/* ==========================================================================
   공통 상단·하단 (GB-27)
   정본: Figma Global Header 171:43, Dropdown 179:250, Footer 171:74,
         모바일 Header 175:2, Menu 175:10, Footer 175:41.
   색은 남색 바탕 + 아이보리 글씨 + 금색 선만 쓴다. 모든 화면에서 같다.
   ========================================================================== */

.gb-header,
.gb-footer {
  --gb-chrome-ink: var(--gb-paper);
  --gb-chrome-dim: color-mix(in srgb, var(--gb-paper) 72%, transparent);
  --gb-chrome-line: color-mix(in srgb, var(--gb-paper) 12%, transparent);
  --gb-chrome-pad: 80px;
  background: var(--gb-navy);
  color: var(--gb-chrome-ink);
  font-family: var(--gb-font-family-ui);
}

.gb-header ul,
.gb-footer ul { list-style: none; margin: 0; padding: 0; }

.gb-header a,
.gb-footer a { color: inherit; text-decoration: none; }

.gb-header a:focus-visible,
.gb-header button:focus-visible,
.gb-footer a:focus-visible {
  outline: 2px solid var(--gb-paper);
  outline-offset: 4px;
}

.gb-header button {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: none;
}

/* ── 상단 막대 ───────────────────────────────────────── */

/* components.css 초기 시안 규칙(테두리·flex 간격)을 지운다 */
.gb-header { position: relative; z-index: 100; border: 0; }
.gb-nav { display: block; gap: 0; }

.gb-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 72px;
  padding-inline: var(--gb-chrome-pad);
}

.gb-header__logo,
.gb-footer__logo {
  font-family: var(--gb-font-display-family);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gb-paper);
  white-space: nowrap;
}
.gb-header__logo { font-size: 18px; line-height: 1; }

.gb-header__panel {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between;
  block-size: 100%;
  margin-inline-start: 40px;
}

/* 메뉴 — 가운데 정렬은 로고와 계정 영역 사이 남는 폭 기준 */
.gb-nav { block-size: 100%; }
.gb-nav > ul {
  display: flex;
  gap: 40px;
  block-size: 100%;
}
.gb-nav > ul > li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gb-nav > ul > li > a {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gb-chrome-dim);
  line-height: 15px;
  transition: color var(--gb-motion-fast) var(--gb-ease);
}
.gb-nav > ul > li > a:hover,
.gb-nav > ul > li:focus-within > a { color: var(--gb-paper); }

/* 현재 메뉴: 글자 아래 6px, 금색 18x2 */
.gb-nav > ul > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a::after {
  content: "";
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 50%;
  inline-size: 18px;
  block-size: 2px;
  margin-inline-start: -9px;
  background-color: var(--gb-gold);
}

.gb-nav__sub-toggle {
  display: inline-flex;
  align-items: center;
  color: var(--gb-chrome-dim);
}
.gb-nav__sub-toggle .gb-icon { inline-size: 12px; block-size: 12px; }
/* 누르는 면적 24px(WCAG 2.5.8). 바깥 여백을 음수로 줘 보이는 간격은 아이콘 12px 그대로 */
.gb-nav__sub-toggle {
  justify-content: center;
  min-inline-size: 24px;
  min-block-size: 24px;
  margin: -6px;
}

/* 펼침 판 (데스크톱) */
.gb-nav .sub-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: -24px;
  min-inline-size: 280px;
  padding-block: 12px;
  background: var(--gb-navy);
  border-block-start: 2px solid var(--gb-gold);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--gb-motion-fast) var(--gb-ease), visibility 0s linear var(--gb-motion-fast);
}
/* 여닫기는 li.is-open 하나로 한다(chrome.js). :hover·:focus-within 으로 열면 버튼·Esc 로 닫을 수 없다 */
.gb-nav > ul > li.is-open > .sub-menu {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.gb-nav .sub-menu a {
  position: relative;
  display: block;
  padding: 10px 24px;
  font-size: 14px;
  line-height: 17px;
  color: color-mix(in srgb, var(--gb-paper) 80%, transparent);
  white-space: nowrap;
}
.gb-nav .sub-menu a:hover { color: var(--gb-paper); }
.gb-nav .sub-menu li:is(.current-menu-item, .current_page_item) > a { color: var(--gb-paper); }
.gb-nav .sub-menu li:is(.current-menu-item, .current_page_item) > a::before {
  content: "";
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: 50%;
  inline-size: 2px;
  block-size: 16px;
  margin-block-start: -8px;
  background: var(--gb-gold);
}

/* 계정 영역 */
.gb-header__account {
  display: flex;
  align-items: center;
  gap: 24px;
}
.gb-header__account a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 15px;
  white-space: nowrap;
}
.gb-header__search { color: var(--gb-chrome-dim); }
.gb-header__search:hover { color: var(--gb-paper); }
.gb-header__button {
  padding: 10px 18px;
  border: 1px solid var(--gb-gold);
  letter-spacing: 0.08em;
}
.gb-header__button:hover { background: color-mix(in srgb, var(--gb-gold) 14%, transparent); }

.gb-header__toggle { display: none; }

/* ── 1100px 미만: 모바일 상단 ─────────────────────────── */

@media (max-width: 1099px) {
  .gb-header__bar { block-size: 64px; padding-inline: 20px; }
  .gb-header__logo { font-size: 16px; }

  .gb-header .gb-header__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-block-size: 44px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gb-chrome-dim);
  }
  .gb-header__toggle .gb-icon { color: var(--gb-paper); }
  .gb-header__toggle-icon--close { display: none; }
  .gb-header.is-open .gb-header__toggle-icon--menu { display: none; }
  .gb-header.is-open .gb-header__toggle-icon--close { display: inline-flex; }

  .gb-header__panel {
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    block-size: calc(100dvh - 64px - var(--wp-admin--admin-bar--height, 0px));
    margin: 0;
    padding: 16px 20px 32px;
    overflow-y: auto;
    background: var(--gb-navy);
    border-block-start: 1px solid var(--gb-chrome-line);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .gb-header.is-open .gb-header__panel { display: flex; }
  html.gb-menu-open { overflow: hidden; scrollbar-gutter: stable; }
  .gb-header__panel { overscroll-behavior: contain; }

  .gb-nav { block-size: auto; }
  .gb-nav > ul { flex-direction: column; gap: 0; block-size: auto; }
  .gb-nav > ul > li {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-block-end: 1px solid var(--gb-chrome-line);
  }
  /* 위아래 여백을 li 가 아니라 링크에 둔다 — 누르는 면적이 줄 전체 높이(51px) */
  .gb-nav > ul > li > a { flex: 1; padding-block: 18px 16px; font-size: 14px; line-height: 17px; color: var(--gb-paper); }
  .gb-nav > ul > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a::after {
    inset-inline-start: 0;
    margin-inline-start: 0;
    inset-block-start: calc(100% - 8px);
  }
  .gb-nav__sub-toggle { min-inline-size: 44px; min-block-size: 44px; margin: -15px; }
  .gb-nav__sub-toggle .gb-icon { inline-size: 14px; block-size: 14px; transition: transform var(--gb-motion-fast) var(--gb-ease); }
  .gb-nav > ul > li.is-open > .gb-nav__sub-toggle .gb-icon { transform: rotate(180deg); }

  .gb-nav .sub-menu {
    position: static;
    flex-basis: 100%;
    display: none;
    min-inline-size: 0;
    padding: 16px 0 0 16px;
    border: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transition: none;
  }
  .gb-nav > ul > li.is-open > .sub-menu { display: block; }
  .gb-nav .sub-menu a { padding: 11px 0; font-size: 15px; line-height: 18px; white-space: normal; }
  .gb-nav .sub-menu li:is(.current-menu-item, .current_page_item) > a::before { inset-inline-start: -12px; }

  .gb-header__account {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-block-start: 0;
  }
  .gb-header__search {
    padding-block: 18px 16px;
    border-block-end: 1px solid var(--gb-chrome-line);
    font-size: 14px !important;
    line-height: 17px;
    margin-block-end: 16px;
  }
  .gb-header__account a { font-size: 13px; }
  .gb-header__button { text-align: center; padding-block: 14px; }
}

/* ── 하단 ─────────────────────────────────────────────── */

/* components.css 초기 시안의 .gb-footer 규칙(위 여백 80, 안쪽 여백 64, 제목 흰색)을 지운다 */
.gb-footer {
  margin-block-start: 0;
  padding-block: 0;
  font-size: inherit;
  border-block-start: 2px solid var(--gb-gold);
}

/* GB-42 하단 간소화 — Figma F02 219:1096(1440), 219:1079(390). 고객 승인 2026-10-02 */
.gb-footer__inner { padding: 56px var(--gb-chrome-pad) 32px; }

.gb-footer__main {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  align-items: flex-start;
}
.gb-footer__brand { display: flex; flex-direction: column; align-items: flex-start; flex: 0 1 auto; min-inline-size: 0; } /* 고객 10-03 2번: 소개 한 줄. 자리가 모자라면 줄어든다 */ /* 세로 흐름 — 로고 inline-block 의 기준선 틈(5px)을 없앤다 */
.gb-footer__logo { display: inline-block; font-size: 20px; line-height: 27px; }
.gb-footer__intro {
  margin: 12px 0 0;
  font-family: var(--gb-font-serif);
  font-size: 17px;
  line-height: 1.2;
  color: var(--gb-paper);
}

.gb-footer__side { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.gb-footer__links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.gb-footer__links a { display: block; font-size: 14px; line-height: 17px; white-space: nowrap; }

.gb-footer__sns { display: flex; flex-wrap: wrap; gap: 12px; } /* 추가 링크로 늘어나면 줄바꿈(최대 8개) */
.gb-footer__sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--gb-paper) 60%, transparent);
  border-radius: 50%;
}
.gb-footer__sns svg { inline-size: 15px; block-size: 15px; fill: currentColor; }
.gb-footer__sns .gb-footer__sns-link { fill: none; stroke: currentColor; stroke-width: var(--gb-icon-stroke, 1.5); stroke-linecap: round; stroke-linejoin: round; } /* 추가 링크 기본 아이콘(Lucide link) */
/* 고객이 올린 아이콘: 이미지의 모양(알파)만 쓰고 색은 글자색 — 기본 아이콘과 같은 단색이 된다 */
.gb-footer__sns-mask {
  inline-size: 15px;
  block-size: 15px;
  background-color: currentColor;
  -webkit-mask: var(--gb-sns-icon) center / contain no-repeat;
  mask: var(--gb-sns-icon) center / contain no-repeat;
}

.gb-footer__links a:hover,
.gb-footer__legal a:hover { color: var(--gb-paper); text-decoration: underline; text-underline-offset: 3px; }
.gb-footer__sns a:hover { border-color: var(--gb-paper); }

.gb-footer__legal {
  display: flex;
  gap: 24px;
  margin-block-start: 40px;
  padding-block-start: 16px;
  border-block-start: 1px solid color-mix(in srgb, var(--gb-paper) 30%, transparent);
  font-size: 12px;
  line-height: 15px;
  color: color-mix(in srgb, var(--gb-paper) 80%, transparent);
}

@media (max-width: 1099px) {
  .gb-footer__inner { padding: 40px 20px 28px; }
  .gb-footer__main { flex-direction: column; gap: 28px; }
  .gb-footer__brand { inline-size: auto; }
  .gb-footer__logo { font-size: 18px; line-height: 24px; }
  .gb-footer__intro { margin-block-start: 10px; font-size: 16px; }
  .gb-footer__side { align-items: flex-start; gap: 28px; }
  .gb-footer__links { gap: 12px 20px; }
  .gb-footer__links a { font-size: 15px; line-height: 18px; }
  .gb-footer__legal { margin-block-start: 28px; }
}
}