@import url('./vendor/fonts/fonts.css');
@import url('./site-theme.css');

/* 메인과 서브페이지의 헤더·푸터만 공유한다. 본문과 구성기 스타일은 유지한다. */
:root { --hd-h: 104px; }
.cso-header, .cso-footer {
  --shell-paper: #fff;
  --shell-ink: #29372e;
  --shell-accent: #344f3b;
  --shell-forest: #263e30;
  --shell-light: #f3f6ef;
  --shell-muted: #cbd8c7;
  font: 400 17px/1.8 'Noto Sans KR', sans-serif;
  letter-spacing: normal;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
.cso-shell-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 1760px;
  padding-inline: clamp(56px, 5.55vw, 112px);
  margin-inline: auto;
}
.cso-header a, .cso-footer a { color: inherit; text-decoration: none; transition: opacity 180ms ease; }
.cso-header a:hover, .cso-footer a:hover { opacity: .75; }
.cso-header a:focus-visible, .cso-footer a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.cso-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  color: var(--shell-ink);
  background: var(--shell-paper);
  border: 0;
  backdrop-filter: none; /* taste-skill-ignore: clears the inherited legacy header blur; no glass surface. */
  transition: transform 200ms ease, background-color 180ms ease, color 180ms ease;
}
.cso-header--hero { color: var(--shell-paper); background: transparent; }
.cso-header--static { position: relative; }
.cso-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: var(--hd-h); transition: height 180ms ease; }
.cso-header__brand { display: block; flex: none; width: 150px; user-select: none; -webkit-user-drag: none; }
.cso-header__brand img { user-select: none; -webkit-user-drag: none; }
.cso-header .cso-header__brand img { display: block; width: 100%; height: auto; filter: none; }
.cso-header--hero .cso-header__brand img { filter: brightness(0) invert(1); }
.cso-header__nav { display: flex; align-items: center; gap: clamp(24px, 2.6vw, 48px); margin-left: auto; font-size: 19px; }
.cso-header .cso-header__nav a { padding-block: 8px; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; white-space: nowrap; }
.cso-header .cso-header__nav a::after { content: none; }
.cso-header .cso-header__nav a[aria-current="page"] { color: var(--shell-accent); font-weight: 600; }
.cso-header .cso-header__build { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 18px; min-height: 46px; padding: 10px 20px; color: #fff; background: var(--shell-accent); font-size: 16px; font-weight: 500; line-height: 1.5; white-space: nowrap; transition: background-color 180ms ease; }
.cso-header .cso-header__build:hover { opacity: 1; background: var(--shell-forest); }
.cso-header .cso-header__build:focus-visible { outline-color: var(--shell-accent); }
.cso-header--hero:not(.is-stuck) .cso-header__build:focus-visible { outline-color: #fff; }
@media (min-width: 1100px) and (max-width: 1279px) {
  .cso-header__inner { gap: 24px; }
  .cso-header__nav { gap: 24px; font-size: 17px; }
  .cso-header .cso-header__build { gap: 12px; padding-inline: 16px; }
}
.cso-header.is-stuck { border: 0; }
.cso-header[data-auto-hide].is-stuck .cso-header__inner { height: 64px; }
.cso-header--hero.is-stuck { color: var(--shell-ink); background: var(--shell-paper); }
.cso-header--hero.is-stuck .cso-header__brand img { filter: none; }
.cso-header.is-scroll-hidden { transform: translateY(-110%); pointer-events: none; }
body[data-page] .bhero__crumb, body[data-page] .story__crumb { top: calc(var(--hd-h) + 24px); }

.cso-footer { padding-block: 64px 32px; color: var(--shell-light); background: var(--shell-forest); border: 0; }
.cso-footer p, .cso-footer dl, .cso-footer dd { margin: 0; }
.cso-footer .footer__top { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 0; border: 0; }
.cso-footer .brand { display: block; flex: none; width: 180px; }
.cso-footer .brand img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
.cso-footer .footer__top nav { display: flex; gap: 28px; }
.cso-footer .footer__details { margin-top: 40px; }
.cso-footer .footer__policies { display: flex; gap: 24px; margin-bottom: 28px; font-size: 14px; font-weight: 500; }
.cso-footer .footer__policies a { padding-block: 6px; }
.cso-footer .footer__business { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px 28px; color: var(--shell-muted); font-size: 14px; }
.cso-footer .footer__business > div { display: grid; grid-template-columns: max-content 1fr; align-items: baseline; gap: 16px; }
.cso-footer .footer__business dt { color: var(--shell-light); }
.cso-footer .footer__business dd { min-width: 0; }
.cso-footer .footer__business--wide { grid-column: span 2; }
.cso-footer .footer__business address { font-style: normal; }
.cso-footer .footer__business a { display: inline-block; padding-block: 2px; }
.cso-footer .footer__business a:hover, .cso-footer .footer__policies a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.cso-footer .footer__bottom { margin-top: 32px; color: var(--shell-muted); font-size: 14px; }

/* Static and generated headers share the same touch and keyboard navigation. */
.cso-header .hd__burger { display: none; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; margin-left: auto; padding: 12px; border: 0; border-radius: 0; color: inherit; background: transparent; cursor: pointer; }
.cso-header .hd__burger i, .cso-header .hd__burger i::before, .cso-header .hd__burger i::after { background: currentColor; }
.mnav { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; gap: 16px; padding: 112px 28px max(40px, env(safe-area-inset-bottom)); overflow-y: auto; color: var(--white, #fff); background: var(--forest-900, #263e30); visibility: hidden; pointer-events: none; transform: translateY(-100%); transition: transform 240ms cubic-bezier(.22, 1, .36, 1), visibility 240ms; }
.mnav.is-open { visibility: visible; pointer-events: auto; transform: none; }
.mnav a { min-height: 48px; padding-block: 8px; color: inherit; font: 400 clamp(24px, 5vw, 32px)/1.5 'Gowun Batang', serif; letter-spacing: -.025em; text-decoration: none; text-transform: none; }
.mnav .mnav__build { align-self: flex-start; margin-top: 12px; padding: 12px 20px; border: 1px solid currentColor; font: 500 18px/1.6 'Noto Sans KR', sans-serif; }
.mnav__close { position: absolute; top: 16px; right: 20px; display: grid; place-items: center; width: 48px; height: 48px; padding: 12px; border: 0; border-radius: 0; color: inherit; background: transparent; cursor: pointer; }
.mnav a:focus-visible, .mnav__close:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 1099px) {
  :root { --hd-h: 80px; }
  .cso-header .cso-header__nav { display: none; }
  .cso-header .cso-header__build { display: none; }
  .cso-header .hd__burger { display: flex; }
  .cso-shell-wrap { padding-inline: 28px; }
}
@media (max-width: 768px) {
  :root { --hd-h: 72px; }
  .cso-header__inner { gap: 16px; }
  .cso-header__brand { width: 120px; }
  .cso-shell-wrap { padding-inline: 24px; }
  .cso-footer .footer__top { align-items: flex-start; flex-direction: column; }
  .cso-footer .footer__top nav { flex-wrap: wrap; }
  .cso-footer .footer__business { grid-template-columns: 1fr; }
  .cso-footer .footer__business--wide { grid-column: auto; }
  .cso-footer .footer__business a { overflow-wrap: anywhere; }
  .drw .field :is(input, select, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cso-header, .cso-header__inner, .cso-header a, .cso-footer a, .mnav { transition: none; }
}

/* 모든 일반 페이지에서 같은 상담 버튼과 기존 상담 양식을 사용한다. */
.dock { position: fixed; right: 24px; bottom: 24px; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dock[hidden] { display: none !important; }
.dock .dock__ic { display: none; }
.dock .dock__cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; height: auto; padding: 10px 14px; border: 0; border-radius: 0; background: var(--forest-700); color: var(--white); box-shadow: none; font: 500 14px/1.4 var(--f-body); cursor: pointer; transition: background-color 180ms ease; } /* taste-skill-ignore: removes the legacy resting shadow; this action is flat. */
.dock .dock__cta:hover { background: var(--forest-900); transform: none; }
.dock .dock__top { box-sizing: border-box; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--forest-700); border-radius: 0; background: var(--white); color: var(--forest-700); cursor: pointer; transition: background-color 180ms ease; }
.dock .dock__top:hover { background: var(--paper-2); }
/* Reserve the arrow's space so the consultation button stays in place. */
.dock .dock__top[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
.dock__cta:focus-visible, .dock__top:focus-visible { outline: 2px solid var(--forest-700); outline-offset: 5px; }
.dock__cta svg, .dock__top svg { flex: none; }
@media (max-width: 1099px) {
  .dock { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .cso-footer { padding-bottom: max(128px, calc(env(safe-area-inset-bottom) + 112px)); }
}
/* 작은 PC 화면에서도 스토리의 둘러보기 버튼과 고정 상담 버튼 사이를 비운다. */
[data-contact-hero] ~ .story .story__bottom { padding-bottom: 48px; }
.drw { --paper: #fff; --ink: #29372e; --ink-70: #576359; --ink-50: #576359; position: fixed; inset: 0; z-index: 80; visibility: hidden; color: var(--ink); font: 400 17px/1.8 var(--f-body); }
.drw.is-open { visibility: visible; }
.drw__scrim { position: absolute; inset: 0; background: rgb(9 20 14 / .5); opacity: 0; transition: opacity 200ms ease; }
.drw.is-open .drw__scrim { opacity: 1; }
.drw__panel { position: absolute; inset: 0 0 0 auto; height: 100%; width: min(560px, 100%); padding: 40px 32px 56px; background: var(--paper); border: 0; overflow: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }
.drw.is-open .drw__panel { transform: none; }
.drw__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.drw__head h2 { font-family: var(--f-display); font-weight: 400; letter-spacing: -.035em; }
.drw .eyebrow { display: none; } /* taste-skill-ignore: removes the existing kicker; no new eyebrow is rendered. */
.drw__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 0; background: var(--paper-2); color: var(--ink); cursor: pointer; }
.drw__close:hover { background: var(--paper-3); }
.drw .form, .drw .field { display: grid; gap: 24px; }
.drw .field { gap: 8px; }
.drw .g { display: grid; }
.drw .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drw .field label { color: var(--ink-70); font-size: 14px; font-weight: 500; letter-spacing: normal; }
.drw .req { color: var(--danger); }
.drw .field :is(input, select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--white); color: var(--ink); font: 400 14px/1.6 var(--f-body); }
.drw .field textarea { min-height: 132px; resize: vertical; }
.drw .field :is(input, select, textarea):focus { outline: 2px solid var(--forest-700); outline-offset: 2px; box-shadow: none; } /* taste-skill-ignore: replaces the old field glow with a visible focus outline. */
.drw .field .hint { color: var(--ink-70); font-size: 14px; }
.drw .field--err :is(input, select, textarea) { border-color: var(--danger); }
.drw .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.drw .chip { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 0; background: var(--paper-2); color: var(--ink); font: 400 14px/1.6 var(--f-body); }
.drw .chip[aria-pressed="true"] { background: var(--forest-700); color: var(--white); }
.drw .consent { padding: 20px; border: 0; border-radius: 0; background: var(--paper-2); }
.drw .consent--err { outline: 2px solid var(--danger); }
.drw .consent__h { margin-bottom: 12px; font-size: 14px; font-weight: 500; }
.drw .consent__t { width: 100%; border-collapse: collapse; border: 0; background: var(--white); font-size: 14px; }
.drw .consent__t td { padding: 12px; border: 0; vertical-align: top; color: var(--ink-70); }
.drw .consent__t td:first-child { width: 88px; white-space: nowrap; color: var(--ink); font-weight: 500; }
.drw .consent__n { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--ink-70); }
.drw .consent__n a { color: var(--forest-700); text-decoration: underline; text-underline-offset: 3px; }
.drw .consent__chk { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; margin-top: 12px; color: var(--ink-70); font-size: 14px; line-height: 1.7; cursor: pointer; }
.drw .consent__chk input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--forest-700); }
.drw .consent__chk b { color: var(--ink); font-weight: 500; }
.drw .btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; padding: 14px 24px; border: 0; border-radius: 0; background: var(--forest-700); color: var(--white); font: 500 17px/1.4 var(--f-body); }
.drw .btn:hover { background: var(--forest-900); }
.drw .btn:focus-visible, .drw button:focus-visible { outline: 2px solid var(--forest-700); outline-offset: 4px; }
.drw [data-form-msg] { margin: 0; }
@media (prefers-reduced-motion: reduce) { .drw__panel, .drw__scrim, .dock .dock__cta, .dock .dock__top { transition: none; } }