/* 사용자 요청 (2026-10-12): "index 페이지 HTML 구현 시작하자" — 페이지 틀, GNB, Footer, Section.
 * Breakpoint: tablet 672px, desktop 1056px (DesignTokens.md, Carbon md / lg). Mobile First. */

.page-shell {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter-mobile);
}

/* ── GNB ─────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
  border-bottom: var(--border-width-default) solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--space-8);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
  font-weight: var(--weight-semibold);
}

/* 로고 기호 (templates/icons.html "logo-mark"): 부채꼴 비트 배열 + 해시 선 5개 + 원 */
.logo-mark {
  width: calc(var(--icon-md) * 1.5);
  height: var(--icon-md);
}

.logo-mark .lm-on { fill: var(--color-primary); }
.logo-mark .lm-off { fill: var(--color-border); }
.logo-mark .lm-line { stroke: var(--color-primary); stroke-width: 3; stroke-linecap: square; }
.logo-mark .lm-dot { fill: var(--color-text-primary); }

.site-nav,
.site-header__actions {
  display: none;
}

.site-nav {
  margin-left: auto;
  gap: var(--space-4);
}

.site-nav__link {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-nav__link:hover {
  color: var(--color-primary);
}

.site-header__actions {
  align-items: center;
  gap: var(--space-4);
}

.menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-lg);
  height: var(--control-height-lg);
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
}

.menu-button .icon {
  width: var(--icon-md);
  height: var(--icon-md);
}

.mobile-nav {
  background: var(--color-surface);
  border-top: var(--border-width-default) solid var(--color-border);
  box-shadow: var(--shadow-raised);
}

.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-2) var(--space-3);
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--control-height-lg);
  border-bottom: var(--border-width-default) solid var(--color-border);
}

.mobile-nav__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

/* ── Section ─────────────────────────── */
.section {
  padding-block: var(--section-gap-mobile);
}

.section__head {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.section__label {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--color-text-secondary);
}

.section__title {
  font-size: var(--text-2xl-size);
  line-height: var(--text-2xl-line);
}

.section__copy {
  color: var(--color-text-secondary);
}

/* ── Footer ──────────────────────────── */
.site-footer {
  border-top: var(--border-width-default) solid var(--color-border);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-4);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--color-text-secondary);
}

.site-footer__info span {
  white-space: nowrap;
}

/* 사용자 요청 (2026-10-13): "상호, 대표, 사업자등록번호, 주소만 600 으로 하라고" → 항목 이름만 600, 값과 © 는 400 */
.site-footer__info b {
  font-weight: var(--weight-semibold);
}

/* ── Tablet ──────────────────────────── */
@media (min-width: 672px) {
  .page-shell {
    padding-inline: var(--page-gutter-tablet);
  }
}

/* ── Desktop ─────────────────────────── */
@media (min-width: 1056px) {
  .page-shell {
    padding-inline: var(--page-gutter-desktop);
  }

  .site-nav,
  .site-header__actions {
    display: flex;
  }

  .menu-button,
  .mobile-nav {
    display: none !important;
  }

  .section {
    padding-block: var(--section-gap-desktop);
  }

  .section__head {
    margin-bottom: var(--space-6);
  }

  .section__title {
    font-size: var(--text-3xl-size);
    line-height: var(--text-3xl-line);
  }
}