/* ==========================================================================
   Top Bar - 상단 바 (관리자 로그인 시에만 출력)
   ========================================================================== */
#top_bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1003;

  height: var(--topbar-h);
  background: var(--primary-color);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  line-height: var(--topbar-h);
}

#top_bar .con_wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

#top_bar .con_wrap > * {
  padding: 0 1.6rem;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

#top_bar .con_wrap > *:last-child {
  padding-right: 0;
  border-right: none;
}

#top_bar .con_wrap .top_desc {
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-right: none;
  padding-left: 0;
}

#top_bar a:hover {
  color: var(--white-color);
}

/* ==========================================================================
   Login Popup - 로그인 팝업 (회원가입 없는 아웃로그인)
   ========================================================================== */
#login_pop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

#login_pop.on {
  display: flex;
}

#login_pop .lp_bg {
  position: absolute;
  inset: 0;
  background: rgba(38, 34, 31, 0.55);
}

#login_pop .lp_box {
  position: relative;
  width: min(38rem, calc(100% - 3.2rem));
  padding: 4rem 3.2rem 3.2rem;
  background: var(--white-color);
  box-shadow: 0 2rem 6rem rgba(38, 34, 31, 0.28);
}

#login_pop h2 {
  margin-bottom: 2.4rem;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

#login_pop .lp_close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: 3.2rem;
  height: 3.2rem;
}

#login_pop .lp_close .icon {
  width: 2rem;
  height: 2rem;
  stroke: var(--text-color-sub);
  stroke-width: 1.6;
  transition: stroke 0.3s;
}

#login_pop .lp_close:hover .icon {
  stroke: var(--point-color);
}

#login_pop input[type="text"],
#login_pop input[type="password"] {
  width: 100%;
  height: 4.8rem;
  margin-bottom: 0.8rem;
  padding: 0 1.6rem;
  background: var(--lightgray-color);
  border: 1px solid var(--line-color);
  font-size: 1.5rem;
  color: var(--text-color);
}

#login_pop input[type="text"]:focus,
#login_pop input[type="password"]:focus {
  outline: none;
  border-color: var(--point-color);
}

#login_pop .lp_submit {
  width: 100%;
  height: 5.2rem;
  margin-top: 0.8rem;
  background: var(--primary-color);
  border-radius: 5.2rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--white-color);
  transition: background 0.3s;
}

#login_pop .lp_submit:hover {
  background: var(--point-color);
}

#login_pop .lp_etc {
  display: flex;
  align-items: center;
  margin-top: 1.6rem;
  font-size: 1.3rem;
  color: var(--text-color-sub);
}

#login_pop .lp_etc .chk {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* ==========================================================================
   Header - 상단 고정 헤더 (로고 + 메뉴 + 대표전화 + 원형 전체메뉴 버튼)
   ========================================================================== */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1002;

  height: var(--header-h);
  background: var(--white-color);
}

body.has_topbar #header {
  top: var(--topbar-h);
}

/* 스크롤을 내리면 #header 에 scr 클래스가 붙습니다.
   그림자나 경계선 등을 넣고 싶을 때 아래에 규칙을 추가하세요. */

/* 단청 띠는 헤더 맨 위에 얹힌다 (헤더 높이에는 영향을 주지 않음) */
#header .dancheong {
  position: absolute;
  top: 0;
  left: 0;
}

#header .hd_wrap {
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 4rem;
}

/* ── 로고 ─────────────────────────────────────────────────── */
#header h1 {
  flex: 0 0 auto;
  user-select: none;
}

#header h1 a {
  display: flex;
  align-items: center;
  height: var(--header-h);
}

#header h1 img {
  width: auto;
  height: 3.6rem;
}

/* ── 메뉴 ──────────────────────────────────────────────────── */
#header .gnb_container {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

#header .gnb {
  display: flex;
  align-items: center;
  gap: 4rem;
}

#header .gnb > ul {
  display: flex;
  gap: 3.2rem;
}

#header .gnb > ul > li > a {
  position: relative;
  display: block;
  line-height: var(--header-h);

  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-color);
  white-space: nowrap;
  transition: color 0.3s;
}

#header .gnb > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.2rem;

  height: 1px;
  background: var(--point-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s;
}

#header .gnb > ul > li > a:hover,
#header .gnb > ul > li > a.active {
  color: var(--point-color);
}

#header .gnb > ul > li > a:hover::after,
#header .gnb > ul > li > a.active::after {
  transform: scaleX(1);
}

/* 대표 전화 */
#header .hd_tel {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-left: 4rem;
  border-left: 1px solid var(--line-color);
}

#header .hd_tel .icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--point-color);
  stroke-width: 2;
}

#header .hd_tel a {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-color);
  white-space: nowrap;
}

/* ── 전체메뉴 버튼 (먹색 원) ───────────────────────────────── */
.menu_btn {
  position: relative;
  flex: 0 0 auto;
  width: 5.6rem;
  height: 5.6rem;
  margin-left: 3.2rem;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  transition: background 0.3s;
}

.menu_btn:hover {
  background: var(--point-color);
}

.menu_btn i {
  position: absolute;
  left: 50%;
  width: 1.8rem;
  height: 1px;
  margin-left: -0.9rem;
  background: var(--white-color);
  transition: 0.35s;
}

.menu_btn i:nth-child(1) {
  top: 2.4rem;
}
.menu_btn i:nth-child(2) {
  top: 3.1rem;
}

.menu_btn.on i:nth-child(1) {
  top: 2.75rem;
  transform: rotate(45deg);
}
.menu_btn.on i:nth-child(2) {
  top: 2.75rem;
  transform: rotate(-45deg);
}

@media (max-width: 1280px) {
  #header h1 img {
    height: 3.2rem;
  }

  #header .gnb {
    gap: 2.8rem;
  }

  #header .gnb > ul {
    gap: 2.4rem;
  }

  #header .hd_tel {
    padding-left: 2.8rem;
  }
}

/* 메뉴는 전체메뉴 버튼으로만 연다 */
@media (max-width: 1024px) {
  #header .gnb > ul,
  #header .hd_tel {
    display: none;
  }

  #header .hd_wrap {
    padding: 0 1.6rem;
  }

  #header h1 img {
    height: 2.8rem;
  }

  .menu_btn {
    width: 4.8rem;
    height: 4.8rem;
    margin-left: 0;
  }

  .menu_btn i:nth-child(1) {
    top: 2rem;
  }
  .menu_btn i:nth-child(2) {
    top: 2.7rem;
  }
  .menu_btn.on i:nth-child(1),
  .menu_btn.on i:nth-child(2) {
    top: 2.35rem;
  }
}

/* ==========================================================================
   All Menu - 전체 메뉴 오버레이
   ========================================================================== */
#all_menu {
  position: fixed;
  inset: 0;
  z-index: 1001;

  overflow-y: auto;
  overscroll-behavior: contain;

  background: var(--white-color);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.6rem);
  transition: opacity 0.45s, transform 0.45s, visibility 0.45s;
}

#all_menu.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* 메뉴가 열려 있는 동안에는 뒤 페이지가 스크롤되지 않게 한다 */
body.menu_open {
  overflow: hidden;
}

/* 두 단(메뉴 | 안내)을 나란히 두고, 그 덩어리째 화면 한가운데에 모은다.
   min-height 로 화면을 채우되 내용이 길어지면 늘어나므로 위가 잘리지 않는다. */
#all_menu .am_wrap {
  display: grid;
  grid-template-columns: auto minmax(26rem, 34rem);
  justify-content: center;
  align-content: center;
  align-items: stretch;
  gap: 10rem;

  min-height: 100%;
  padding-top: calc(var(--header-h) + 3.2rem);
  padding-bottom: 4rem;
}

/* ── 왼쪽 : 섹션 목록 ───────────────────────────────────────
   넓은 화면에서는 한지색 판 위에 얹고, 좁은 화면에서는 판을 걷어냅니다. */
#all_menu .am_nav {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 3.6rem 3.2rem;
  border-radius: var(--radius);
  /* 있는 듯 없는 듯한 회색. 더 진하게 하려면 마지막 값(0.035)을 올리세요 */
  background: rgba(38, 34, 31, 0.035);
}

#all_menu .am_nav a {
  display: block;
  padding: 0.9rem 0;
  transition: color 0.3s;
}

#all_menu .am_nav .ko {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1.4;
}

#all_menu .am_nav a:hover {
  color: var(--point-color);
}

/* ── 오른쪽 : 대표전화 · 진료시간 · 오시는 길 ──────────────── */
/* 대표전화 · 진료시간 · 오시는 길 사이를 가는 선으로 나눈다 */
#all_menu .am_side > * + * {
  margin-top: 3.2rem;
  padding-top: 3.2rem;
  border-top: 1px solid var(--line-color);
}

#all_menu .am_lb {
  display: block;
  margin-bottom: 1.2rem;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-color);
}

/* 전체메뉴의 주인공. 크기를 줄이려면 이 값만 낮추세요 */
#all_menu .am_tel {
  display: block;
  font-size: 4.4rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--text-color);
}

#all_menu .am_hours li {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  font-size: 1.5rem;
  line-height: 2.1;
}

#all_menu .am_hours .day {
  color: var(--text-color-sub);
}

#all_menu .am_hours .time {
  font-variant-numeric: tabular-nums;
}

#all_menu .am_addr {
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--text-color-sub);
}

/* 좁은 화면에서는 한 단으로 접고, 메뉴를 가로로 펴서 줄마다 밑줄을 둔다 */
@media (max-width: 1024px) {
  #all_menu .am_wrap {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 5.6rem;
    padding-top: calc(var(--header-h) + 2.4rem);
  }

  /* 판을 걷어내고 줄마다 밑줄만 남긴다 */
  #all_menu .am_nav {
    display: block;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  #all_menu .am_nav li {
    border-bottom: 1px solid var(--line-color);
  }

  #all_menu .am_nav a {
    padding: 1.8rem 0;
  }

  /* 세로로 쌓이면 너무 길어지므로 진료시간 · 주소는 접는다.
     (각 섹션과 푸터에 그대로 있습니다) */
  #all_menu .am_hours_box,
  #all_menu .am_addr_box {
    display: none;
  }

  /* 대표전화는 라벨 없이 번호만 남긴다 */
  #all_menu .am_tel_box .am_lb {
    display: none;
  }
}

@media (max-width: 768px) {
  #all_menu .am_nav .ko {
    font-size: 1.9rem;
  }

  #all_menu .am_nav a {
    padding: 1.5rem 0;
  }

  #all_menu .am_tel {
    font-size: 3.4rem;
  }
}

/* ==========================================================================
   Sub Content - 서브 콘텐츠 영역 (게시판 등)
   ========================================================================== */
/* 게시판 등 서브 페이지는 흰 바탕 위에 놓는다
   (메인은 body 의 한지색을 그대로 씁니다) */
#content.sub {
  background: var(--white-color);
}

/* 흰 바탕이 위아래로 끊기지 않도록 margin 대신 padding 을 쓴다 */
.sub_content {
  min-height: 60rem;
  padding-top: 6.4rem;
  padding-bottom: 12rem;
}

.sub_content .page_title {
  margin-bottom: 4rem;
}

.sub_content .page_title h3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 1.6rem 0;
  white-space: nowrap;
}

.sub_content .page_title h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-color);
}

.sub_content .page_title h3 strong {
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 200;
  letter-spacing: -0.03em;
}

.sub_content .content p {
  font-size: 1.7rem;
  line-height: 1.9;
  color: var(--text-color-sub);
}

@media (max-width: 768px) {
  .sub_content {
    padding-top: 4rem;
    padding-bottom: 8rem;
  }

  .sub_content .page_title h3 strong {
    font-size: 2.8rem;
  }
}

/* ==========================================================================
   Footer - 푸터
   ========================================================================== */
#footer {
  position: relative;
  overflow: hidden;

  background: var(--primary-color);
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.5rem;
}

/* 한약 정물 사진을 오른쪽에 아주 은은하게 깔아둔다.
   농도는 opacity, 보이는 범위는 width 와 mask-image 로 조절합니다.
   (사진 경로는 images/texture02.jpg) */
#footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 85%;

  background: url(../images/texture02.jpg) no-repeat center center / cover;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 35%,
      rgba(0, 0, 0, 0.65) 65%,
      #000 100%);
  mask-image: linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 35%,
      rgba(0, 0, 0, 0.65) 65%,
      #000 100%);
  pointer-events: none;
}

/* 사진 위로 내용이 오도록 */
#footer > * {
  position: relative;
  z-index: 1;
}

/* ── 맺음말 + 예약 버튼 ────────────────────────────────────── */
#footer .ft_top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4rem;
  padding-top: 9.6rem;
  padding-bottom: 6.4rem;
}

#footer .ft_msg {
  font-family: var(--font-serif);
  font-size: 3.2rem;
  font-weight: 200;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--white-color);
}

/* 어두운 푸터에서는 단청 적색이 묻히므로 단청 황색으로 강조한다 */
#footer .ft_msg em {
  font-style: normal;
  font-weight: 600;
  color: var(--dc-yellow);
}

/* ── 병원 정보 ─────────────────────────────────────────────── */
#footer .ft_info {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 4rem;
  padding-top: 5.6rem;
  padding-bottom: 5.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#footer .f_logo {
  margin-bottom: 2.4rem;
}

/* 어두운 바탕이므로 로고를 흰색으로 눌러 찍는다.
   흰색 로고 파일을 따로 쓴다면 아래 filter 줄만 지우세요. */
#footer .f_logo img {
  width: 18rem;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

#footer .add {
  line-height: 1.8;
}

#footer .ft_sns {
  display: flex;
  gap: 0.8rem;
  margin-top: 2.4rem;
}

#footer .ft_sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  transition: 0.3s;
}

#footer .ft_sns .icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.5;
  transition: 0.3s;
}

#footer .ft_sns a:hover {
  background: var(--point-color);
  border-color: var(--point-color);
}

#footer .ft_sns a:hover .icon {
  stroke: var(--white-color);
}

#footer .ft_lb {
  display: block;
  margin-bottom: 1.6rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}

#footer .ft_col li {
  padding: 0.5rem 0;
  line-height: 1.6;
}

#footer .ft_col .day {
  display: inline-block;
  min-width: 9rem;
  color: rgba(255, 255, 255, 0.45);
}

#footer .ft_col a:hover {
  color: var(--white-color);
}

#footer .ft_tel {
  display: block;
  margin-bottom: 1.2rem;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white-color);
}

/* ── 사업자 정보 ───────────────────────────────────────────── */
#footer .ft_bottom {
  padding-top: 3.2rem;
  padding-bottom: 5.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 1.4rem;
}

#footer .info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.4rem;
}

#footer .info li {
  position: relative;
  white-space: nowrap;
}

#footer .info li ~ li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1.2rem;

  transform: translate(0, -50%);

  width: 1px;
  height: 0.5em;

  background: rgba(255, 255, 255, 0.25);
}

#footer address {
  display: block;
  margin-top: 1.6rem;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 1024px) {
  #footer .ft_top {
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2rem;
    padding-top: 6.4rem;
    padding-bottom: 4.8rem;
  }

  #footer .ft_msg {
    font-size: 2.8rem;
  }

  #footer .ft_info {
    grid-template-columns: 1fr 1fr;
    gap: 4rem 3.2rem;
  }

  #footer .f_logo {
    display: none;
  }
}

@media (max-width: 768px) {
  #footer .ft_info {
    grid-template-columns: 1fr;
    gap: 3.2rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  #footer .info {
    flex-direction: column;
    gap: 0.4rem;
  }

  #footer .info li ~ li::before {
    display: none;
  }
}

/* ==========================================================================
   Kakao Map - 카카오 지도
   ========================================================================== */
.root_daum_roughmap {
  width: 100% !important;
}

.root_daum_roughmap .cont {
  display: none;
}

.root_daum_roughmap .wrap_controllers {
  display: none;
}

.root_daum_roughmap .border2 {
  display: block !important;
}
@media (max-width: 768px) {
  .root_daum_roughmap .wrap_map {
    height: 240px !important;
  }
}

/* ==========================================================================
   Side Nav - 오른쪽 고정 버튼 (카카오톡 상담 · 맨 위로)
   조금 스크롤하면 오른쪽 아래에 나타납니다.
   ========================================================================== */
/* 헤더의 전체메뉴 버튼과 같은 세로 라인에 맞춘다 (.hd_wrap 의 좌우 여백과 동일) */
#side_nav {
  position: fixed;
  right: 4rem;
  bottom: 3.2rem;
  z-index: 100;

  display: flex;
  flex-direction: column;
  gap: 1rem;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

#side_nav.on {
  opacity: 1;
  visibility: visible;
}

#side_nav .sn_util {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 5.6rem;
  height: 5.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;

  background: var(--primary-color);
  box-shadow: 0 0.6rem 2rem rgba(38, 34, 31, 0.28);
  color: var(--white-color);
  cursor: pointer;
  transition: background 0.3s;
}

#side_nav .sn_util:hover {
  background: var(--point-color);
}

/* 글자는 화면에서 감추고 title 속성으로만 안내한다 */
#side_nav .sn_util > span:not(.ic) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

#side_nav .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#side_nav .icon {
  width: 2.2rem;
  height: 2.2rem;
  stroke: var(--white-color);
  stroke-width: 1.5;
}

#side_nav .ic img {
  width: 2.8rem;
}

/* 카카오톡은 브랜드 색을 그대로 쓴다 */
#side_nav .d_kakao {
  background: #fee500;
}

#side_nav .d_kakao:hover {
  background: #ffd900;
}

/* 1024px 이하에서는 헤더 여백도 1.6rem 으로 줄어들므로 함께 맞춘다 */
@media (max-width: 1024px) {
  #side_nav {
    right: 1.6rem;
  }
}

@media (max-width: 768px) {
  #side_nav {
    bottom: 2.4rem;
  }

  #side_nav .sn_util {
    width: 5rem;
    height: 5rem;
  }
}

/* ==========================================================================
   Notice Bar - 공지 띠 (푸터 바로 위)
   notice 게시판의 최근 글이 세로로 롤링됩니다. (skin/latest/dd_ticker)
   ========================================================================== */
#notice_bar {
  background: var(--brown-color);
  color: var(--white-color);
}

#notice_bar .nt_wrap {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  height: 6.4rem;
}

#notice_bar .nt_lb {
  flex: 0 0 auto;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* 세로 롤링이므로 컨테이너 높이가 반드시 필요하다 */
#notice_bar .notice_slide {
  flex: 1;
  min-width: 0;
  height: 2.8rem;
}

#notice_bar .notice_slide .swiper-slide {
  display: flex;
  align-items: center;
  height: 2.8rem;
}

#notice_bar .notice_slide .swiper-slide a {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  overflow: hidden;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.92);
}

#notice_bar .notice_slide .swiper-slide span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#notice_bar .notice_slide .swiper-slide .new {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 1.3rem;
  font-weight: 700;
}

#notice_bar .notice_slide .swiper-slide time {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

#notice_bar .nt_ctrl {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4rem;
}

#notice_bar .nt_ctrl button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  cursor: pointer;
  transition: 0.3s;
}

#notice_bar .nt_ctrl .icon {
  width: 1.4rem;
  height: 1.4rem;
  stroke: var(--white-color);
  stroke-width: 2;
}

#notice_bar .nt_ctrl button:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* 아웃로그인 아이콘 : 클릭하면 로그인 팝업이 열립니다.
   (로그인 상태에서는 로그아웃 링크로 바뀝니다 — tail.php) */
#notice_bar .nt_login {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.8rem;
  height: 2.8rem;
  margin-left: 0.8rem;
  padding-left: 2.4rem;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  box-sizing: content-box;

  background: transparent;
  cursor: pointer;
}

#notice_bar .nt_login .icon {
  width: 1.7rem;
  height: 1.7rem;
  stroke: var(--white-color);
  stroke-width: 1.8;
  opacity: 0.8;
  transition: opacity 0.3s;
}

#notice_bar .nt_login:hover .icon {
  opacity: 1;
}

@media (max-width: 768px) {
  #notice_bar .nt_wrap {
    gap: 1.6rem;
  }

  /* 좁은 화면에서는 날짜 · 화살표를 감춘다 (로그인 아이콘은 남긴다) */
  #notice_bar .notice_slide .swiper-slide time,
  #notice_bar .nt_ctrl {
    display: none;
  }

  #notice_bar .nt_login {
    margin-left: 0;
    padding-left: 1.6rem;
  }
}