/* =====================================================================
   Layout — 헤더 / GNB / 페이지 골격 / 푸터
   값은 Figma design_context 정밀 감사 기준 (1px 일치)
   ===================================================================== */

/* ---------------- HEADER ---------------- */
.site-header { background: var(--c-white); }

/* 유틸리티 바 (주황) — Figma 697:22052 */
.util-bar { background: var(--orange-65); }            /* #FF5F20 */
.util-bar__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 51px;
}
.util-tabs { display: flex; align-items: stretch; }
.util-tab {
  display: flex;
  align-items: center;
  padding: 11px 15px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking);
  color: var(--c-white);
  white-space: nowrap;
}
.util-tab.is-active { background: var(--c-white); color: var(--orange-65); font-weight: var(--fw-bold); }

.util-links { display: flex; align-items: center; }
.util-links a {
  padding: 8px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: var(--tracking);
  color: var(--c-white);
  white-space: nowrap;
}

/* 브랜드 행 */
.brand-row { background: var(--c-white); }
.brand-row__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.logo { display: inline-flex; align-items: center; gap: 9px; line-height: 0; }
.logo__mark {
  width: 48px;
  height: 35px;
  flex: 0 0 auto;
  aspect-ratio: 40.84 / 29.9993;
  object-fit: contain;
}
.logo__wordmark {
  width: 154px;
  height: 15px;
  flex: 0 0 auto;
  aspect-ratio: 171.409 / 16.3622;
  object-fit: contain;
}

/* 검색 — Figma 697:22103 (pill #F7F7F7, 오렌지 원형버튼) */
.search {
  position: relative;
  width: 370px;
  height: 50px;
  background: var(--neutral-100);
  background-clip: padding-box;
  border: 1px solid #e8e8e8;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px 0 22px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(23,23,23,.02), inset 0 1px 0 rgba(255,255,255,.9);
}
.search__input {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--neutral-40);
  background: transparent;
  border: 0;
}
.search__input:focus { outline: none; }
.search__input::placeholder { color: var(--neutral-40); font-weight: 400; }  /* #5C5C5C */
.search__btn {
  position: relative;
  z-index: 1;
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-65);              /* #FF5F20 */
  border-radius: 50%;
}
.search__btn img { width: 24px; height: 24px; }

/* 카테고리 GNB */
.gnb {
  background: var(--neutral-100);            /* #FBFBFB */
  border-top: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
}
.gnb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 73px;
}
.gnb__nav { display: flex; align-items: center; gap: 1px; }
.gnb__item {
  padding: 0 16px;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: #111;
  white-space: nowrap;
  transition: color .15s;
}
.gnb__item:hover { color: var(--orange-65); }
.gnb__item--accent { color: var(--orange-60); }
.gnb__item--accent-regular { font-weight: 400; }
.gnb__item--accent:hover { color: var(--orange-50); }
.gnb__divider {
  width: 1px; height: 20px;
  background: #111;
  margin: 0;
}
.gnb__biz {
  padding: 12px 16px;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--green-40);                    /* #00715B */
  white-space: nowrap;
}

/* ---------------- 페이지 본문 골격 (홈 전용) ---------------- */
/* padding-block 만 지정 → 좌우 패딩은 .container 규칙(모바일 24/20px)이 살아남 */
#main > .container {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: 40px 80px;
}

/* ---------------- FOOTER ---------------- */
.site-footer {
  background: var(--neutral-100);            /* #FBFBFB */
  border-top: 1px solid #d8d8d8;
  padding: 24px 0;
}
.footer__inner {
  display: flex;
  align-items: flex-start;
}
.footer__col--a {
  width: 320px;
  flex: 0 0 320px;
  padding-right: 24px;
}
.footer__col--b {
  display: flex;
  gap: 30px;
  flex: 0 0 369px;
  padding: 0 24px 0 25px;
  border-left: 1px solid #d9d9d9;
  align-self: stretch;
}
.footer__col--c {
  flex: 1;
  padding-left: 25px;
  border-left: 1px solid #d9d9d9;
  align-self: stretch;
}
.logo--sm { height: 45px; gap: 6px; margin-bottom: 18px; }
.logo--sm .logo__mark { width: 35px; height: 26px; }
.logo--sm .logo__wordmark { width: 147px; height: 14px; }

/* 고객센터 */
.cs { margin-bottom: 20px; }
.cs__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: #333; letter-spacing: var(--tracking); margin-bottom: 12px; }
.cs__phone { font-size: var(--fs-base); color: var(--neutral-30); }
.cs__phone strong { color: var(--orange-60); font-weight: var(--fw-semibold); letter-spacing: var(--tracking); }
.cs__phone span { font-size: var(--fs-sm); color: #505050; margin-left: 8px; font-weight: var(--fw-medium); letter-spacing: var(--tracking); }
.cs__note { margin-top: 12px; font-size: var(--fs-xs); color: #505050; letter-spacing: var(--tracking); }

.cs__chips { display: flex; gap: 10px; margin-bottom: 24px; }
.cs-chip {
  padding: 8px 14px;
  font-size: var(--fs-sm);
  color: #2f3438;
  letter-spacing: var(--tracking);
  border: 1px solid #e6e6e6;
  border-radius: var(--radius-xs);
  background: var(--c-white);
  white-space: nowrap;
}
.cs-chip:hover { border-color: var(--orange-65); color: var(--orange-65); }

.account__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: #505050; letter-spacing: var(--tracking); margin-bottom: 4px; }
.account__desc { font-size: var(--fs-sm); color: #505050; line-height: var(--lh-body); letter-spacing: var(--tracking); }

/* 푸터 링크 컬럼 */
.footer-links li + li { margin-top: 24px; }
.footer-links a { font-size: var(--fs-sm); line-height: var(--lh-body); letter-spacing: var(--tracking); color: var(--gray-700); }
.footer-links a:hover { color: var(--neutral-10); }
.footer-links a.is-strong { font-weight: 700; color: var(--gray-700); }

/* 법인 정보 */
.legal { font-size: var(--fs-xs); line-height: var(--lh-body); letter-spacing: var(--tracking); color: #505050; }
.legal i { color: #d9d9d9; font-style: normal; margin: 0 8px; }
.legal--notice { margin-top: 20px; color: #505050; line-height: 1.5; }
.legal--copy { margin-top: 20px; color: #505050; }
.socials { display: flex; gap: 8px; margin-top: 12px; }
.socials img { width: 32px; height: 32px; }