#content .theme__latest.theme__latest__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12rem;
}

#content .theme__latest.theme__latest__list .theme__list__title {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2.4rem;
}

#content .theme__latest.theme__latest__list .theme__list__title a {
  font-size: inherit;
  font-weight: inherit;
}

#content .theme__latest.theme__latest__list .theme__list__desc {
  margin-bottom: 4rem;
}

#content .theme__latest.theme__latest__list img {
  width: 100%;
  height: auto;
  margin-bottom: 2.4rem;
  outline: 1px solid var(--line-color);
}

/* ==========================================================================
   Login Popup - 로그인 팝업 (회원가입 없는 아웃로그인)
   ========================================================================== */
#login_pop {
  display: none;
  position: fixed;
  inset: 0;
  /* 모바일 메뉴 버튼(1002)보다 위 */
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

#login_pop.on {
  display: flex;
}

#login_pop .lp_bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

#login_pop .lp_box {
  position: relative;
  width: min(36rem, calc(100% - 3.2rem));
  padding: 3.2rem;
  background: var(--white-color);
  border-radius: 0.8rem;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.2);
}

#login_pop h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
}

#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: 2;
}

#login_pop input[type="text"],
#login_pop input[type="password"] {
  width: 100%;
  height: 4.4rem;
  margin-bottom: 0.8rem;
  padding: 0 1.4rem;
  border: 1px solid var(--line-color);
  border-radius: 0.6rem;
  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: 4.6rem;
  margin-top: 0.4rem;
  background: var(--primary-color);
  border-radius: 0.6rem;
  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.4rem;
  font-size: 1.3rem;
  color: var(--text-color-sub);
}

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

/* ==========================================================================
   Header - 헤더 (히어로 위에 얹히는 투명 바)
   ========================================================================== */
/* 서브페이지 : 흰 바가 자리를 차지한 채 따라온다 (fixed 가 아닌 sticky) */
#header {
  position: sticky;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid var(--line-color);
}

/* ⚠ 헤더의 배경(흰 바 · 블러)은 반드시 이 가상요소가 맡는다.
   #header 자체에 backdrop-filter / filter / transform 을 걸면 그 순간부터
   헤더가 position:fixed 자손의 기준 상자(containing block)가 되어,
   1024px 이하 메뉴 오버레이(.gnb_container)가 화면 전체가 아니라
   헤더 높이(7.2rem)만큼만 열린다. */
#header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* 아래 테두리 선은 덮지 않는다 (음수 z-index 는 테두리보다 위에 그려진다) */
  background: var(--white-color);
  transition: background 0.3s;
}

/* 인덱스 : 히어로 사진 위에 겹쳐 놓는다 (자리를 차지하지 않는다) */
#header.over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

#header.over::before {
  background: transparent;
}

/* 스크롤을 내리면 흰 바로 굳으면서 화면 위에 고정된다 (인덱스 전용) */
#header.over.scr {
  position: fixed;
  animation: hd_drop 0.3s ease;
}

/* 메뉴가 열려 있는 동안에는 내려오는 연출을 쓰지 않는다
   (keyframe 의 transform 때문에 메뉴가 헤더 높이로 접힌다) */
body.menu_open #header.over.scr {
  animation: none;
}

#header.scr {
  border-bottom-color: var(--line-color);
  box-shadow: 0 0.4rem 1.6rem rgb(var(--primary-rgb) / 0.08);
}

#header.scr::before {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
}

@keyframes hd_drop {
  from {
    transform: translateY(-100%);
  }
}

#header .hd_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  height: 8.8rem;
}

/* ── 로고 ─────────────────────────────────────────────────── */
#header h1 {
  position: relative;
  /* 메뉴 오버레이(1000)보다 위에 둬야 메뉴를 열어도 로고가 보인다 */
  z-index: 1001;
  flex: 0 0 auto;
  font-size: 3.2rem;
  font-weight: 800;
  white-space: nowrap;
  user-select: none;
}

#header h1 a {
  display: block;
  width: 190px;
  height: 40px;

  background-image: url(../images/logo.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* 사진 위에서는 로고를 흰색으로 뒤집는다 */
#header.over:not(.scr) h1 a {
  filter: brightness(0) invert(1);
}

/* ── 오른쪽 묶음 ──────────────────────────────────────────── */
#header .hd_right {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

#header .hd_lnk {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap;
  transition: 0.3s;
}

#header .hd_lnk:hover {
  color: var(--point-color);
}

/* 주문 버튼 : 빨간 알약 */
#header .hd_cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;

  height: 4rem;
  padding: 0 2rem;
  border-radius: 4rem;

  background: var(--point-color);
  color: var(--white-color);
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  transition: 0.3s;
}

#header .hd_cta:hover {
  background: var(--primary-color);
}

#header .hd_cta .icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: currentColor;
  stroke-width: 2.2;
}

/* 사진 위에서는 글자를 흰색으로 */
#header.over:not(.scr) .hd_lnk {
  color: var(--white-color);
}

/* ── 햄버거 : 1024px 이하에서만 나온다 ─────────────────────── */
.mbtn {
  position: relative;
  /* 메뉴 오버레이(1000)와 로고(1001)보다 위에 있어야 닫기(X) 가 가려지지 않는다 */
  z-index: 1002;

  display: none;
  align-items: center;
  justify-content: center;

  /* 닿는 넓이 4.4rem, 줄이 그려지는 넓이 2.2rem */
  width: 4.4rem;
  height: 4.4rem;
  background: none;
  border: 0;
  border-radius: 50%;
  font-size: 0;
  transition: background 0.3s;
}

.mbtn::before,
.mbtn::after,
.mbtn span::before,
.mbtn span::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--text-color);
  transition: 0.3s;
}

.mbtn::before {
  top: 1.4rem;
}

.mbtn::after {
  bottom: 1.4rem;
}

.mbtn span::before,
.mbtn span::after {
  top: calc(50% - 1px);
}

/* 열리면 위아래 줄은 사라지고 가운데 두 줄이 X 로 겹친다 */
.mbtn.on::before,
.mbtn.on::after {
  opacity: 0;
}

.mbtn.on span::before {
  transform: rotate(45deg);
}

.mbtn.on span::after {
  transform: rotate(-45deg);
}

/* 사진 위(인덱스)에서는 흰색으로 뒤집는다. 스크롤해 흰 바가 되면 다시 본문색. */
#header.over:not(.scr) .mbtn::before,
#header.over:not(.scr) .mbtn::after,
#header.over:not(.scr) .mbtn span::before,
#header.over:not(.scr) .mbtn span::after {
  background: var(--white-color);
}

/* 사진 위에서는 옅은 원판을 깔아 대비를 만든다 */
#header.over:not(.scr) .mbtn {
  background: rgba(0, 0, 0, 0.24);
}

/* 메뉴가 열리면 흰 판 위에 놓이므로 본문색으로 되돌린다 */
.mbtn.on,
#header.over:not(.scr) .mbtn.on {
  background: none;
}

#header .mbtn.on::before,
#header .mbtn.on::after,
#header .mbtn.on span::before,
#header .mbtn.on span::after,
#header.over:not(.scr) .mbtn.on span::before,
#header.over:not(.scr) .mbtn.on span::after {
  background: var(--text-color);
}

/* ══════════════════════════════════════════════════════════
   메뉴 : PC 는 헤더 안 한 줄, 1024px 이하는 오버레이
   ══════════════════════════════════════════════════════════ */
#header .gnb_container {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

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

#header .gnb > ul > li {
  position: relative;
}

#header .gnb > ul > li > a {
  position: relative;
  display: block;
  line-height: 8.8rem;

  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap;
  transition: 0.2s;
}

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

/* 현재 보고 있는 섹션 표시 (밑줄) */
#header .gnb > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.4rem;

  height: 1px;
  background: var(--point-color);

  transform: scaleX(0);
  transition: 0.3s;
}

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

/* 사진 위에서는 메뉴 글자도 흰색 */
#header.over:not(.scr) .gnb > ul > li > a {
  color: var(--white-color);
}

#header.over:not(.scr) .gnb > ul > li > a:hover {
  color: var(--sand-color);
}

#header.over:not(.scr) .gnb > ul > li > a::after {
  background: var(--white-color);
}

/* 하위 메뉴 (게시판 등) */
#header .gnb > ul > li ul {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 3;

  transform: translate(-50%, 1.6rem);
  background: var(--white-color);
  border: 1px solid var(--line-color);
  border-top: 2px solid var(--point-color);
  border-radius: 0 0 0.6rem 0.6rem;
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}

#header .gnb > ul > li:hover ul,
#header .gnb > ul > li:focus-within ul {
  transform: translate(-50%, -0.8rem);
  opacity: 1;
  visibility: visible;
}

#header .gnb > ul > li ul li a {
  display: block;
  min-width: 18rem;
  padding: 0 2.4rem;
  line-height: 4rem;

  font-size: 1.4rem;
  color: var(--text-color);
  white-space: nowrap;
}

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

#header .gnb > ul > li ul li ~ li a {
  border-top: 1px solid var(--line-color);
}

/* 메뉴 안 전화 · 주소 안내는 오버레이(모바일)에서만 쓴다 */
#header .adm {
  display: none;
}

@media (max-width: 1280px) {
  #header .gnb > ul {
    gap: 2.4rem;
  }

  #header .gnb > ul > li > a {
    font-size: 1.5rem;
  }
}

@media (max-width: 1024px) {
  #header .hd_wrap {
    height: 7.2rem;
  }

  #header h1 a {
    width: 160px;
    height: 36px;
  }

  /* 좁은 화면에서는 로고와 햄버거만 남긴다 */
  #header .hd_lnk,
  #header .hd_cta {
    display: none;
  }

  #header .hd_right {
    gap: 1.6rem;
  }

  .mbtn {
    display: flex;
  }

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

  /* ── 오버레이 ─────────────────────────────────────────── */
  #header .gnb_container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;

    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;

    background: rgb(var(--primary-rgb) / 0.55);

    opacity: 0;
    visibility: hidden;
    transition: 0.35s;
  }

  #header .gnb_container.on {
    opacity: 1;
    visibility: visible;
  }

  /* 오른쪽에서 밀려 나오는 흰 판 */
  #header .gnb {
    display: flex;
    flex-direction: column;

    width: min(42rem, 100%);
    height: 100%;
    padding: 10rem 2.8rem 4rem;
    overflow-y: auto;

    background: var(--white-color);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #header .gnb_container.on .gnb {
    transform: none;
  }

  #header .gnb > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--line-color);
  }

  #header .gnb > ul > li {
    border-bottom: 1px solid var(--line-color);
  }

  #header .gnb > ul > li > a,
  #header.over:not(.scr) .gnb > ul > li > a {
    padding: 1.6rem 0;
    line-height: 1.4;

    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--text-color);
  }

  #header .gnb > ul > li > a::after {
    display: none;
  }

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

  /* 하위 메뉴는 오버레이 안에서 항상 펼쳐 둔다 */
  #header .gnb > ul > li ul {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;

    padding: 0 0 1.6rem 1.2rem;
    background: none;
    border: 0;
  }

  #header .gnb > ul > li:hover ul,
  #header .gnb > ul > li:focus-within ul {
    transform: none;
  }

  #header .gnb > ul > li ul li a {
    min-width: 0;
    padding: 0.6rem 0;
    line-height: 1.5;
    font-size: 1.5rem;
    color: var(--text-color-sub);
  }

  #header .gnb > ul > li ul li ~ li a {
    border-top: 0;
  }

  #header .gnb > ul > li ul li a:hover {
    background: none;
  }

  /* 메뉴 아래 : 전화 · 주소 안내 */
  #header .adm {
    display: block;
    margin-top: auto;
    padding-top: 4rem;
  }

  #header .adm .m_tel {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--point-color);
  }

  #header .adm .m_tel b {
    display: block;
    margin-top: 0.4rem;
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--primary-color);
  }

  #header .hd_addr {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1.6rem;

    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--text-color-sub);
  }

  #header .hd_addr .icon {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: 0.2rem;
    stroke: var(--point-color);
    stroke-width: 2;
  }
}

@media (max-width: 768px) {
  #header .hd_cta {
    height: 3.6rem;
    padding: 0 1.4rem;
    font-size: 1.4rem;
  }

  #header .gnb {
    width: 100%;
    padding: 10rem 2rem 4rem;
  }

  #header .gnb > ul > li > a,
  #header.over:not(.scr) .gnb > ul > li > a {
    font-size: 2rem;
  }
}

/* ==========================================================================
   Sub Content - 서브 콘텐츠 영역
   ========================================================================== */
.sub_content {
  min-height: 60rem;
  margin-top: 8rem;
  margin-bottom: 12rem;
  background: var(--white-color);
}

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

.sub_content .page_title h3 {
  position: relative;
  padding: 1.6rem 0;
  white-space: nowrap;

  display: flex;
  align-items: center;
  gap: 8rem;
}

.sub_content .page_title h3::after {
  content: "";

  flex: 1;
  height: 1px;

  background: var(--primary-color);
  opacity: 0.25;
}

.sub_content .page_title h3 strong {
  font-size: 4rem;
  font-weight: 700;
}

@media (max-width: 1440px) {
}

.sub_content .content p {
  font-size: 1.7rem;
  line-height: 2.4rem;
  opacity: 0.9;
}

/* ==========================================================================
   Footer - 푸터 (어두운 바탕 · 네 칸 + 아래 한 줄)
   ========================================================================== */
#footer {
  padding: 0;
  background: var(--primary-color);
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.5rem;
}

/* ── 위쪽 : 로고 / 입금 계좌 / 영업시간 ────────────────────── */
#footer .ft_top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 6.4rem;
  padding-top: 8rem;
  padding-bottom: 6.4rem;
}

/* 칸 제목 : 작은 라벨 */
#footer .ft_lb {
  display: block;
  margin-bottom: 2rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}

/* ① 로고 칸 */
#footer .f_logo {
  margin-bottom: 2rem;
}

#footer .f_logo img {
  display: block;
  width: 17rem;
  height: auto;
  /* 어두운 바탕이라 로고를 흰색으로 뒤집는다 */
  filter: brightness(0) invert(1);
}

#footer .ft_desc {
  max-width: 30rem;
  font-size: 1.45rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
}

#footer .ft_tel {
  display: inline-block;
  margin-top: 2.4rem;
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white-color);
}

#footer .ft_tel_sub {
  margin-top: 0.6rem;
  font-size: 1.35rem;
  color: rgba(255, 255, 255, 0.5);
}


/* ② 입금 계좌 */
#footer .ft_bank li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 1.45rem;
}

#footer .ft_bank li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#footer .ft_bank b {
  flex: 0 0 auto;
  min-width: 5.6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

/* 계좌번호는 세로로 자릿수가 맞도록 고정폭 숫자로 */
#footer .ft_bank .acc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-weight: 700;
  color: var(--white-color);
  font-variant-numeric: tabular-nums;
}

/* 복사 버튼 : 눌렀을 때만 잠깐 포인트 색으로 바뀐다 */
#footer .copy_acc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transition: 0.3s;
}

#footer .copy_acc.done {
  background: var(--point-color);
  border-color: var(--point-color);
}

#footer .copy_acc .icon {
  width: 1.3rem;
  height: 1.3rem;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2;
  transition: 0.3s;
}

#footer .copy_acc.done .icon {
  stroke: var(--white-color);
}

#footer .ft_holder {
  margin-top: 1.4rem;
  font-size: 1.35rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
}

#footer .ft_holder b {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

/* ③ 영업시간 : 요일과 시간을 양 끝으로 */
#footer .ft_time li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.7rem 0;
  font-size: 1.45rem;
}

#footer .ft_time b {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}

#footer .ft_time .tm {
  font-weight: 600;
  color: var(--white-color);
  font-variant-numeric: tabular-nums;
}

/* 휴무는 한 톤 흐리게 */
#footer .ft_time .tm.off {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

#footer .ft_note {
  margin-top: 1.2rem;
  font-size: 1.3rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
}

/* ── 아래 한 줄 : 가는 선으로 나눈 사업자 정보 ─────────────── */
#footer .ft_bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#footer .ft_bottom .w_inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 4rem;
  padding-top: 2.8rem;
  padding-bottom: 2.8rem;
}

#footer .ft_info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.4rem;
}

#footer .ft_info li {
  position: relative;
  font-size: 1.35rem;
  color: rgba(255, 255, 255, 0.5);
}

#footer .ft_info li ~ li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1.2rem;
  transform: translateY(-50%);

  width: 1px;
  height: 0.9em;
  background: rgba(255, 255, 255, 0.2);
}

#footer .ft_policy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 2.4rem;
}

/* 관리자 바로가기 : 관리자로 로그인했을 때만 출력된다 (tail.php) */
#footer .ft_adm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

#footer .ft_adm a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2rem;

  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  transition: 0.3s;
}

#footer .ft_adm a:hover,
#footer .ft_adm a:focus-visible {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white-color);
}

/* 관리자 페이지는 새 창이라 아이콘으로 표시해 둔다 */
#footer .ft_adm .adm_go {
  border-color: rgb(var(--point-rgb) / 0.55);
  color: var(--white-color);
}

#footer .ft_adm .adm_go:hover,
#footer .ft_adm .adm_go:focus-visible {
  background: var(--point-color);
  border-color: var(--point-color);
}

#footer .ft_adm .icon {
  width: 1.3rem;
  height: 1.3rem;
  stroke: currentColor;
  stroke-width: 2;
}

/* 로그인 : 평소에는 흐리게, 올렸을 때만 또렷하게 */
#footer .ft_login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  opacity: 0.2;
  transition: opacity 0.3s;
}

#footer .ft_login:hover,
#footer .ft_login:focus-visible {
  opacity: 1;
}

#footer .ft_login .icon {
  width: 1.7rem;
  height: 1.7rem;
  stroke: var(--white-color);
  stroke-width: 2;
}

/* ── 반응형 ───────────────────────────────────────────────── */
@media (max-width: 1280px) {
  #footer .ft_top {
    grid-template-columns: 1fr 1fr;
    gap: 4.8rem 4rem;
  }
}

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

  #footer .ft_desc {
    max-width: none;
  }

  #footer .ft_bottom .w_inner {
    flex-direction: column;
    align-items: flex-start;
  }

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

  #footer .ft_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;
}

/* 지도퍼가기가 그리는 사방 테두리(border1~4) 제거 */
.root_daum_roughmap .border1,
.root_daum_roughmap .border2,
.root_daum_roughmap .border3,
.root_daum_roughmap .border4 {
  display: none !important;
}

.root_daum_roughmap,
.root_daum_roughmap .wrap_map {
  border: 0 !important;
}
@media (max-width: 768px) {
  .root_daum_roughmap .wrap_map {
    height: 240px !important;
  }
}

/* ==========================================================================
   Side Link - 사이드 플로팅 링크
   ========================================================================== */
#side_lnk {
  position: fixed;
  bottom: 4rem;
  right: 1.6rem;
  z-index: 100;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  opacity: 0;
  visibility: hidden;

  transition: 0.8s;
}

#side_lnk.on {
  right: 1.6rem;
  bottom: 12rem;
  opacity: 1;
  visibility: visible;
}

/* 원형 버튼 세로 스택 (ㅇ ㅇ ㅇ) */
#side_lnk .lnk_wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.2rem;
}

#side_lnk .lnk_wrap > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 3.2rem;
  overflow: hidden;
  background: var(--white-color);
  border: 1px solid var(--line-color);
  box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

/* 마우스 호버 시 왼쪽으로 길어짐 */
#side_lnk .lnk_wrap > a:not(.d_tel):hover {
  width: 18rem;
  border-color: var(--primary-color);
}

/* 아이콘: 오른쪽 원 영역(6.4rem)에 고정 */
#side_lnk .lnk_wrap > a .icon {
  position: absolute;
  top: 50%;
  right: 1.9rem;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  stroke: var(--text-color);
  stroke-width: 1;
}

/* 텍스트: 평소 폭 0, 호버 시 드러남 */
#side_lnk .lnk_wrap > a span {
  width: 0;
  margin-left: 2.4rem;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-color);
  transition: all 0.3s;
}

#side_lnk .lnk_wrap > a:not(.d_tel):hover span {
  width: 10rem;
}

/* 카카오톡 상담 */
#side_lnk .lnk_wrap > a.d_kakao {
  background: #fee500;
  border-color: #fee500;
}

#side_lnk .lnk_wrap > a.d_kakao img {
  position: absolute;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  width: 3.2rem;
}

#side_lnk .lnk_wrap > a.d_kakao span {
  color: #3c1e1e;
}

#side_lnk .d_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.4rem;
  height: 6.4rem;
  background: var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.1);
}

#side_lnk .d_btn .icon {
  width: 3.2rem;
  height: 3.2rem;
  stroke: var(--white-color);
  stroke-width: 2;
}

#side_lnk .lnk_wrap > a.d_tel {
  position: relative;
  background: var(--point-color);
  border-color: var(--point-color);

  display: none;
}

#side_lnk .lnk_wrap > a.d_tel .icon {
  width: 2.4rem;
  height: 2.4rem;
  stroke: var(--white-color);
  stroke-width: 2;
}

@media (max-width: 768px) {
  #side_lnk .d_btn {
    position: static;
    transform: translate(0, 0);
  }
  #side_lnk .lnk_wrap {
    background: transparent;
    border-radius: 0.8em;
    border: 1px solid transparent;
    padding: 0 0;
    margin-bottom: 0;
  }
  #side_lnk .lnk_wrap > a:not(.d_tel):not(.d_kakao) {
    display: none;
  }

  #side_lnk .lnk_wrap > a.d_tel {
    display: flex;
  }
}

@media (max-width: 768px) {
  #side_lnk.on {
    bottom: 4rem;
  }
}

.s_lnk img {
  padding: 0.8rem;
  width: 2.8rem;
  height: auto;
  background: var(--primary-color);
  box-sizing: content-box;
  border-radius: 0.8rem;
}

.s_lnk {
  margin-bottom: 3.2rem;
}

#sns_link {
  margin-bottom: 4rem;
}

@media (max-width: 768px) {
  #sns_link {
    text-align: left;
  }
}

#sns_link a {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  margin-right: 4px;

  width: 4.8rem;
  height: 4.8rem;

  border-radius: 50%;

  background: var(--background-color);
  color: var(--primary-color);

  font-size: 1.8rem;

  border: 1px solid rgba(0, 0, 0, 0.1);
}

#sns_link a img {
  filter: invert(1);
}

/* ==========================================================================
   To Top Button - 상단 이동 버튼
   ========================================================================== */
.to_top {
  position: fixed;
  left: 50%;
  bottom: 18rem;
  z-index: 998;

  transform: translate(-50%, 0);

  max-width: calc(1610px + 160px);
  width: 100%;

  opacity: 0;
  visibility: hidden;

  transition: 0.5s;
}

.to_top button {
  position: absolute;
  right: 0;
  width: 4rem;
  height: 4rem;

  background: var(--point-color);

  border-radius: 50%;
}

.to_top button svg {
  margin-top: 2px;
}

.to_top.on {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  .to_top {
    position: fixed;
    left: auto;
    right: -1.6rem;
    bottom: 14rem;

    width: auto;
  }

  .to_top.on {
    right: 1.6rem;
  }
}


/* ==========================================================================
   Details - 마감 (스크롤바 · 선택 영역 · 포커스 · 모서리)
   ========================================================================== */
/* 스크롤바가 나타났다 사라질 때 본문이 좌우로 흔들리지 않게 자리를 미리 비운다 */
html {
  scrollbar-gutter: stable;
  /* 파이어폭스 : 얇은 막대 + 테마 색 (자식 요소로 물려받는다) */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--primary-rgb) / 0.35) transparent;
}

/* 크롬 · 사파리 : 양옆에 여백을 준 둥근 막대 */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--background-color);
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--primary-rgb) / 0.3);
  border-radius: 999px;
  /* 바탕색 테두리로 막대를 가늘어 보이게 만든다 */
  border: 3px solid var(--background-color);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: var(--background-color);
}

/* 글자를 끌어 선택했을 때 */
::selection {
  background: var(--point-color);
  color: var(--white-color);
}

/* 키보드로 옮겨 다닐 때만 보이는 초점 테두리 (마우스 클릭에는 나오지 않는다) */
:focus-visible {
  outline: 2px solid var(--point-color);
  outline-offset: 3px;
  border-radius: 0.4rem;
}

/* 이미 둥근 요소는 그 모양을 그대로 따라가게 한다 */
button:focus-visible,
a:focus-visible {
  border-radius: inherit;
}

/* 본문 바로가기 : 탭으로 들어오면 왼쪽 위에 나타난다 */
/* 위치값이 아니라 자기 높이만큼 밀어 올리는 translateY(-100%) 로 숨긴다
   (화면 · 글자 크기가 바뀌어도 항상 완전히 가려진다) */
#skip_nav a {
  position: absolute;
  top: 0;
  left: 1.6rem;
  right: auto;
  z-index: 10020;

  /* common.css 의 height:80px / line-height:80px / text-align:center 를 되돌린다 */
  height: auto;
  line-height: 1.4;
  text-align: left;

  padding: 1.2rem 2rem;
  border-radius: 0 0 0.8rem 0.8rem;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 1.4rem;
  white-space: nowrap;

  transform: translateY(-100%);
  transition: transform 0.2s;
}

#skip_nav a:focus,
#skip_nav a:active {
  top: 0;
  transform: none;
}

/* (.blind 는 lib/css/common.css 에 이미 있어 여기서 다시 정의하지 않는다) */

/* 움직임을 줄이도록 설정한 분께는 애니메이션을 걷어낸다 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}