@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   세무법인 넥스트 고양지점 — 컴포넌트 레이어
   Semantic / Component 토큰을 참조한다. 서피스 전환에 영향받으면 안 되는
   고정값(역전 버튼·로고 마크)에 한해 Primitive를 직접 쓴다. 원시 색상 리터럴은 사용하지 않는다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────── Base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + 16px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--color-bg-page);
  color:var(--color-text-secondary);
  font-family:var(--font-body);
  font-size:var(--text-body-size);
  line-height:var(--p-leading-body);
  font-weight:var(--p-weight-regular);
  letter-spacing:var(--p-track-korean);
  word-break:keep-all;
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
  /* overflow-x:hidden 은 overflow-y 를 auto 로 만들어 sticky 헤더가 풀릴 수 있다.
     clip 은 스크롤 컨테이너를 만들지 않아 헤더 고정이 유지된다. hidden 은 구형 폴백. */
  overflow-x:hidden;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }   /* 채널 미개설 시 자동 숨김이 display:flex 에 눌리지 않게 */
svg{ width:24px; height:24px; flex:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
h1,h2,h3,h4,h5{ margin:0; color:var(--color-text-primary); font-weight:var(--p-weight-bold); letter-spacing:var(--p-track-korean); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline:3px solid var(--color-focus-ring);
  outline-offset:2px;
  border-radius:var(--p-radius-xs);
}

.u-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* 새 창으로 열리는 인라인 링크 표시 */
.u-inline-ico{ width:1em; height:1em; vertical-align:-.12em; margin-inline-start:.25em; }
.u-num{ font-variant-numeric:tabular-nums; }
br.u-br-lg{ display:none; }
@media (min-width:981px){ br.u-br-lg{ display:inline; } }

.skip{
  position:absolute; left:var(--p-space-4); top:-100px; z-index:var(--p-z-modal);
  background:var(--color-bg-inverse); color:var(--color-text-on-inverse);
  padding:12px 18px; border-radius:var(--p-radius-sm); font-weight:var(--p-weight-bold);
}
.skip:focus{ top:var(--p-space-4); }

/* 장부 괘선 — 사진 없이 성립하는 배경 텍스처. 이 사이트의 유일한 패턴 모티프 */
.ledger{
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 33px,
    var(--color-border-default) 33px, var(--color-border-default) 34px);
}

/* ─────────────────────────────────────────────────── Layout */
.container{ width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad); }

.section{ padding-block:var(--space-section-y); }
.section--subtle{ background:var(--color-bg-subtle); }
.section--tight{ padding-block:clamp(40px,5vw,64px); }
.section--flush-top{ padding-top:0; }

.sec-head{ max-width:64ch; margin-bottom:clamp(28px,3.6vw,48px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--split{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--p-space-8); max-width:none;
}
@media (max-width:760px){ .sec-head--split{ flex-direction:column; align-items:flex-start; gap:var(--p-space-5); } }

.eyebrow{
  display:block;
  font-size:var(--p-size-2xs); font-weight:var(--p-weight-black);
  letter-spacing:var(--p-track-caps); text-transform:uppercase;
  color:var(--color-text-brand); margin-bottom:var(--p-space-3);
}
.eyebrow::before{
  content:""; display:block; width:32px; height:3px;
  background:var(--color-bg-brand); margin-bottom:var(--p-space-3);
}
.sec-head--center .eyebrow::before{ margin-inline:auto; }

.h-display{ font-size:var(--text-display-size); font-weight:var(--text-display-weight); line-height:var(--p-leading-display); }
.h1{ font-size:var(--text-h1-size); font-weight:var(--p-weight-black); line-height:var(--p-leading-display); }
.h2{ font-size:var(--text-h2-size); font-weight:var(--p-weight-black); line-height:var(--p-leading-display); }
.h3{ font-size:var(--text-h3-size); font-weight:var(--p-weight-bold); line-height:var(--p-leading-heading); }

.lead{
  font-size:var(--text-body-lg-size); line-height:var(--p-leading-body);
  color:var(--color-text-secondary); max-width:62ch; margin-top:var(--p-space-4);
}
.sec-head--center .lead{ margin-inline:auto; }
.caption{ font-size:var(--text-caption-size); color:var(--color-text-tertiary); line-height:1.65; }

/* ─────────────────────────────────────────────────── Button */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--p-space-2);
  min-height:var(--control-height-md); padding-inline:var(--btn-pad-x);
  border:1px solid transparent; border-radius:var(--btn-radius);
  font-size:var(--btn-font-size); font-weight:var(--btn-font-weight);
  letter-spacing:var(--p-track-korean); text-align:center; cursor:pointer;
  transition:background-color var(--p-duration-base) var(--p-ease-out),
             border-color var(--p-duration-base) var(--p-ease-out),
             color var(--p-duration-base) var(--p-ease-out),
             transform var(--p-duration-fast) var(--p-ease-out);
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:20px; height:20px; }
.btn--lg{ min-height:var(--control-height-lg); font-size:var(--p-size-lg); padding-inline:var(--p-space-8); }
.btn--sm{ min-height:var(--control-height-sm); font-size:var(--p-size-sm); padding-inline:var(--p-space-4); }
.btn--block{ width:100%; }

.btn--primary{ background:var(--color-action-primary); color:var(--color-text-on-action); }
.btn--primary:hover{ background:var(--color-action-primary-hover); color:var(--color-text-on-action); }
.btn--primary:active{ background:var(--color-action-primary-active); }

.btn--secondary{
  background:var(--color-action-secondary); color:var(--color-text-primary);
  border-color:var(--color-border-field);
}
.btn--secondary:hover{ background:var(--color-action-secondary-hover); border-color:var(--color-text-tertiary); color:var(--color-text-primary); }
.btn--secondary:active{ background:var(--color-action-secondary-active); }

.btn--onBrand{ background:var(--p-neutral-0); color:var(--color-action-primary); }
.btn--onBrand:hover{ background:var(--p-neutral-100); color:var(--color-action-primary-hover); }

.btn--onBrandGhost{ background:transparent; color:var(--color-text-on-brand); border-color:oklch(0.205 0.016 258 / .38); }
.btn--onBrandGhost:hover{ background:oklch(0.205 0.016 258 / .1); border-color:oklch(0.205 0.016 258 / .6); color:var(--color-text-on-brand); }

.btn--onInverse{ background:var(--p-neutral-0); color:var(--p-neutral-950); }
.btn--onInverse:hover{ background:var(--p-neutral-200); color:var(--p-neutral-950); }
.btn--onInverseGhost{ background:transparent; color:var(--p-neutral-50); border-color:oklch(1 0 0 / .3); }
.btn--onInverseGhost:hover{ background:oklch(1 0 0 / .1); border-color:oklch(1 0 0 / .55); color:var(--p-neutral-0); }

.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--p-neutral-200); color:var(--color-text-disabled);
  border-color:transparent; cursor:not-allowed; transform:none;
}
.btn[data-loading="true"]{ pointer-events:none; }
.btn[data-loading="true"] .btn__label{ opacity:.55; }

.spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid oklch(1 0 0 / .35); border-top-color:currentColor;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.link{
  display:inline-flex; align-items:center; gap:var(--p-space-2);
  min-height:var(--control-height-sm);
  font-size:var(--p-size-sm); font-weight:var(--p-weight-bold); color:var(--color-text-brand);
  border-bottom:1px solid transparent;
  transition:gap var(--p-duration-base) var(--p-ease-out), border-color var(--p-duration-base) var(--p-ease-out);
}
.link svg{ width:17px; height:17px; }
.link:hover{ gap:var(--p-space-3); border-bottom-color:currentColor; }

/* ─────────────────────────────────────────────────── Logo */
.logo{ display:inline-flex; align-items:center; gap:var(--p-space-3); flex:none; }
.logo__mark{ width:38px; height:38px; }
.logo__tile{ fill:var(--p-neutral-950); }
.logo__check{ fill:none; stroke:var(--p-brand-500); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.logo__type{ display:flex; flex-direction:column; line-height:1.2; }
.logo__name{ font-size:var(--p-size-lg); font-weight:var(--p-weight-black); color:var(--color-text-primary); }
.logo__name em{ font-style:normal; color:var(--color-text-brand); }
.logo__branch{
  font-size:var(--p-size-2xs); font-weight:var(--p-weight-bold);
  letter-spacing:var(--p-track-wide); color:var(--color-text-tertiary);
}
.logo--inverse .logo__tile{ fill:var(--p-brand-500); }
.logo--inverse .logo__check{ stroke:var(--p-neutral-950); }
.logo--inverse .logo__name{ color:var(--p-neutral-0); }
.logo--inverse .logo__name em{ color:var(--p-brand-400); }
.logo--inverse .logo__branch{ color:var(--color-text-secondary); }
.logo--sm .logo__mark{ width:32px; height:32px; }
.logo--sm .logo__name{ font-size:var(--p-size-md); }

/* ─────────────────────────────────────────────────── Header */
.header{
  position:sticky; top:0; z-index:var(--p-z-sticky);
  background:oklch(1 0 0 / .95);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--color-border-subtle);
  transition:box-shadow var(--p-duration-base) var(--p-ease-out);
}
.header.is-stuck{ box-shadow:var(--elevation-card); }
.header__inner{
  display:flex; align-items:center; gap:clamp(16px,2.6vw,40px);
  height:var(--header-height);
  transition:height var(--p-duration-base) var(--p-ease-out);
}
.header.is-stuck .header__inner{ height:var(--header-height-compact); }
.header.is-stuck .logo__mark{ width:32px; height:32px; }

.gnb{ display:flex; align-items:center; gap:var(--p-space-1); margin-inline-start:auto; }
.gnb a{
  position:relative; display:inline-flex; align-items:center;
  min-height:var(--control-height-md); padding-inline:var(--p-space-4);
  border-radius:var(--p-radius-xs);
  font-size:var(--p-size-md); font-weight:var(--p-weight-semibold);
  color:var(--color-text-secondary);
  transition:background-color var(--p-duration-fast) var(--p-ease-out), color var(--p-duration-fast) var(--p-ease-out);
}
.gnb a:hover{ background:var(--color-bg-subtle); color:var(--color-text-primary); }
.gnb a[aria-current="page"]{ color:var(--color-text-primary); font-weight:var(--p-weight-bold); }
.gnb a[aria-current="page"]::after{
  content:""; position:absolute; left:var(--p-space-4); right:var(--p-space-4); bottom:6px;
  height:3px; background:var(--color-bg-brand); border-radius:2px;
}

.header__aside{ display:flex; align-items:center; gap:var(--p-space-4); flex:none; }
.tel-block{ display:flex; flex-direction:column; line-height:1.25; }
.tel-block strong{
  font-size:var(--p-size-xl); font-weight:var(--p-weight-black);
  color:var(--color-text-primary); letter-spacing:var(--p-track-latin);
  font-variant-numeric:tabular-nums;
}
.tel-block span{ font-size:var(--p-size-2xs); font-weight:var(--p-weight-semibold); color:var(--color-text-tertiary); }
a.tel-block:hover strong{ color:var(--color-text-brand); }

.iconbtn{
  width:var(--control-height-md); height:var(--control-height-md);
  display:grid; place-items:center; border-radius:var(--p-radius-xs);
  color:var(--color-text-primary); cursor:pointer;
  transition:background-color var(--p-duration-fast) var(--p-ease-out);
}
.iconbtn:hover{ background:var(--color-bg-subtle); }
.burger{ display:none; }

@media (max-width:1060px){
  .gnb{ display:none; }
  .header__cta{ display:none; }
  .burger{ display:grid; }
  .tel-block strong{ font-size:var(--p-size-lg); }
  /* GNB가 사라지면 우측 정렬을 담당하던 auto 마진도 사라진다.
     정렬 책임을 aside 로 넘겨 햄버거가 항상 상단 우측 끝에 고정되게 한다. */
  .header__aside{ margin-inline-start:auto; }
  .burger{ margin-inline-end:calc(var(--p-space-3) * -1); }  /* 아이콘 광학 중심을 컨테이너 우측 여백에 맞춤 */
}
@media (max-width:520px){ .header__aside .tel-block{ display:none; } }

/* 모바일 풀스크린 오버레이 메뉴 */
.mnav{
  position:fixed; inset:0; z-index:var(--p-z-overlay);
  background:var(--color-bg-page);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--p-duration-base) var(--p-ease-out),
             transform var(--p-duration-base) var(--p-ease-out), visibility var(--p-duration-base);
}
.mnav[data-open="true"]{ opacity:1; visibility:visible; transform:none; }
.mnav__top{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-height); padding-inline:var(--container-pad);
  border-bottom:1px solid var(--color-border-subtle); flex:none;
}
/* 닫기 버튼은 햄버거와 정확히 같은 자리에 놓인다 — 열고 닫을 때 아이콘이 튀지 않게 */
.mnav__top .iconbtn{ margin-inline-end:calc(var(--p-space-3) * -1); }
.header.is-stuck ~ .mnav .mnav__top{ height:var(--header-height-compact); }
.mnav__body{ flex:1; overflow-y:auto; padding:var(--p-space-4) var(--container-pad) var(--p-space-8); }
.mnav__body a{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px; padding-block:var(--p-space-3);
  border-bottom:1px solid var(--color-border-subtle);
  font-size:var(--p-size-xl); font-weight:var(--p-weight-bold); color:var(--color-text-primary);
}
.mnav__body a svg{ width:20px; height:20px; color:var(--color-text-tertiary); }
.mnav__body a:hover{ color:var(--color-text-brand); }
.mnav__body a[aria-current="page"]{ color:var(--color-text-brand); }
.mnav__foot{
  flex:none; padding:var(--p-space-5) var(--container-pad) calc(var(--p-space-6) + env(safe-area-inset-bottom));
  border-top:1px solid var(--color-border-subtle); background:var(--color-bg-subtle);
  display:grid; gap:var(--p-space-3);
}
.mnav__meta{ font-size:var(--p-size-xs); color:var(--color-text-tertiary); line-height:1.7; }

/* ─────────────────────────────────────────────────── Hero */
.hero{ background:var(--color-bg-subtle); border-bottom:1px solid var(--color-border-default); }
.hero__grid,
.page-hero__split{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(32px,4.5vw,64px); row-gap:clamp(28px,3.2vw,40px);
  align-items:start;
}
.hero__grid{ padding-block:clamp(40px,5vw,72px); }

/* 상담 폼은 어느 폭에서도 헤드라인 바로 다음에 온다 — 첫 화면 노출은 확정 요건 */
.hero__copy { grid-column:1; grid-row:1; }
.hero__form { grid-column:2; grid-row:1 / span 2; align-self:start; }
.hero__aside{ grid-column:1; grid-row:2; }
.hero__aside .trust{ margin-top:0; }
.hero__aside .hero__contact{ margin-top:var(--p-space-5); }

@media (max-width:980px){
  .hero__grid,
  .page-hero__split{ grid-template-columns:minmax(0,1fr); row-gap:clamp(24px,4vw,32px); }
  .hero__copy { grid-column:1; grid-row:1; }
  .hero__form { grid-column:1; grid-row:2; }
  .hero__aside{ grid-column:1; grid-row:3; }
  /* 강제 줄바꿈을 풀고 측정 폭으로 제어 — 넓은 1열에서 라인이 들쭉날쭉해지는 것을 막는다 */
  .hero__copy h1{ max-width:14ch; }
}

.badge{
  display:inline-flex; align-items:center; gap:var(--p-space-2);
  padding:8px 14px; border-radius:var(--p-radius-full);
  background:var(--color-bg-brand-subtle); border:1px solid var(--p-brand-200);
  font-size:var(--p-size-xs); font-weight:var(--p-weight-bold); color:var(--color-text-brand);
}
.badge__dot{ width:7px; height:7px; border-radius:50%; background:var(--color-bg-brand); flex:none; }

.hero h1{ margin:var(--p-space-5) 0 var(--p-space-4); }
.hero__lead{ font-size:var(--text-body-lg-size); color:var(--color-text-secondary); line-height:var(--p-leading-body); max-width:34em; }

.trust{ display:flex; flex-wrap:wrap; gap:var(--p-space-2); margin-top:var(--p-space-6); }
.trust li{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:var(--p-radius-full);
  background:var(--color-bg-raised); border:1px solid var(--color-border-default);
  font-size:var(--p-size-xs); font-weight:var(--p-weight-semibold); color:var(--color-text-secondary);
}
.trust svg{ width:15px; height:15px; color:var(--color-text-primary); }

.hero__contact{
  margin-top:clamp(28px,3.2vw,40px); padding-top:var(--p-space-6);
  border-top:1px solid var(--color-border-default);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--p-space-6) var(--p-space-8);
}
.hero__tel{ display:flex; flex-direction:column; gap:2px; }
.hero__tel span{ font-size:var(--p-size-2xs); font-weight:var(--p-weight-bold); letter-spacing:var(--p-track-caps); text-transform:uppercase; color:var(--color-text-tertiary); }
.hero__tel strong{
  font-size:clamp(24px,2.4vw,30px); font-weight:var(--p-weight-black);
  color:var(--color-text-primary); letter-spacing:var(--p-track-latin); line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.hero__tel small{ font-size:var(--p-size-xs); font-weight:var(--p-weight-semibold); color:var(--color-text-tertiary); }
a.hero__tel:hover strong{ color:var(--color-text-brand); }
.hero__links{ display:flex; flex-wrap:wrap; gap:var(--p-space-2); }

/* ─────────────────────────────────────────────────── Form */
.form-card{
  background:var(--color-bg-raised); border:1px solid var(--color-border-default);
  border-radius:var(--p-radius-lg); padding:clamp(22px,2.6vw,30px);
  box-shadow:var(--elevation-raised);
}
.form-card__head{ margin-bottom:var(--p-space-5); }
.form-card__head h2{ font-size:var(--p-size-2xl); font-weight:var(--p-weight-black); }
.form-card__head p{ margin-top:6px; font-size:var(--p-size-sm); color:var(--color-text-tertiary); }

.form-stack{ display:grid; gap:var(--p-space-4); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--p-space-4); }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

.field{ display:grid; gap:var(--p-space-2); }
.field label{
  font-size:var(--p-size-xs); font-weight:var(--p-weight-bold);
  color:var(--color-text-primary); letter-spacing:var(--p-track-wide);
}
.field label .req{ color:var(--color-error); margin-left:2px; }
.field label .opt{ color:var(--color-text-tertiary); font-weight:var(--p-weight-semibold); margin-left:4px; }

.input,.select,.textarea{
  width:100%; min-height:var(--field-height);
  padding:12px var(--field-pad-x);
  background:var(--color-bg-raised);
  border:1px solid var(--color-border-field); border-radius:var(--field-radius);
  font-family:var(--font-body); font-size:var(--field-font-size);
  line-height:1.6; color:var(--color-text-primary);
  transition:border-color var(--p-duration-fast) var(--p-ease-out), box-shadow var(--p-duration-fast) var(--p-ease-out);
}
.textarea{ min-height:104px; resize:vertical; }
.select{
  appearance:none; cursor:pointer; padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.input::placeholder,.textarea::placeholder{ color:var(--color-text-tertiary); opacity:.8; }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--color-text-tertiary); }
@media (forced-colors: active){
  .input:focus,.select:focus,.textarea:focus{ outline:3px solid Highlight; outline-offset:2px; }
}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--color-focus-ring); box-shadow:0 0 0 3px var(--color-focus-halo);
}

.check{
  display:flex; align-items:flex-start; gap:var(--p-space-3);
  min-height:var(--control-height-md); padding:10px 0;
  font-size:var(--p-size-sm); line-height:1.6; color:var(--color-text-secondary); cursor:pointer;
}
.check input{ width:22px; height:22px; margin:1px 0 0; accent-color:var(--color-action-primary); flex:none; cursor:pointer; }
.check a{ color:var(--color-text-brand); font-weight:var(--p-weight-semibold); border-bottom:1px solid currentColor; }

.field-error{
  display:none; align-items:center; gap:6px;
  font-size:var(--p-size-xs); font-weight:var(--p-weight-semibold); color:var(--color-error);
}
.field-error svg{ width:15px; height:15px; }
.field[data-state="error"] .field-error{ display:flex; }
.field[data-state="error"] .input,
.field[data-state="error"] .select,
.field[data-state="error"] .textarea{ border-color:var(--color-error); background:var(--color-error-bg); }
.field[data-state="error"] .check input{ outline:2px solid var(--color-error); outline-offset:2px; border-radius:3px; }

.form-alert{
  display:none; gap:var(--p-space-3); align-items:flex-start;
  padding:16px 18px; border-radius:var(--p-radius-sm); font-size:var(--p-size-sm); line-height:1.7;
}
.form-alert[data-on="true"]{ display:flex; }
.form-alert svg{ width:20px; height:20px; margin-top:2px; }
.form-alert--error{ background:var(--color-error-bg); border:1px solid var(--color-error-border); color:var(--color-error); }
.form-alert--success{ background:var(--color-success-bg); border:1px solid var(--color-success-border); color:var(--color-success); }
.form-alert strong{ display:block; font-weight:var(--p-weight-bold); }
.form-alert p{ margin-top:3px; color:inherit; opacity:.9; }

.form-done{ display:none; text-align:center; padding:var(--p-space-6) 0; }
.form-done[data-on="true"]{ display:block; }
.form-done__icon{
  width:64px; height:64px; margin:0 auto var(--p-space-4);
  display:grid; place-items:center; border-radius:50%;
  background:var(--color-success-bg); color:var(--color-success);
}
.form-done__icon svg{ width:30px; height:30px; }
.form-done h3{ font-size:var(--p-size-xl); }
.form-done p{ margin-top:var(--p-space-3); font-size:var(--p-size-sm); color:var(--color-text-secondary); line-height:1.75; }

/* ─────────────────────────────────────────────────── 업무분야 카드 */
.svc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-gutter); }
.svc-grid--wide{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:var(--space-gutter); }
@media (max-width:900px){ .svc-grid,.svc-grid--wide{ grid-template-columns:1fr; } }

.svc-card{
  display:flex; flex-direction:column; gap:var(--p-space-3);
  background:var(--color-bg-raised); border:var(--card-border);
  border-radius:var(--card-radius); padding:var(--card-padding);
  transition:border-color var(--p-duration-base) var(--p-ease-out),
             box-shadow var(--p-duration-base) var(--p-ease-out),
             transform var(--p-duration-base) var(--p-ease-out);
}
.svc-card:hover{ border-color:var(--color-border-brand); box-shadow:var(--elevation-raised); transform:translateY(-3px); }
.svc-card__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--p-space-3); }
.svc-card__icon{
  width:48px; height:48px; border-radius:var(--p-radius-sm);
  display:grid; place-items:center;
  background:var(--color-bg-subtle); color:var(--color-text-primary);
}
.svc-card__icon svg{ width:26px; height:26px; }
.svc-card__no{
  font-family:var(--p-font-num); font-size:var(--p-size-xs); font-weight:var(--p-weight-bold);
  color:var(--color-text-tertiary); letter-spacing:var(--p-track-latin);
}
.svc-card h3{ font-size:var(--p-size-xl); }
.svc-card p{ font-size:var(--p-size-sm); color:var(--color-text-secondary); line-height:1.72; }
.tag-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:var(--p-space-4); border-top:1px solid var(--color-border-subtle); }
.tag-list li{
  font-size:var(--p-size-2xs); font-weight:var(--p-weight-semibold);
  color:var(--color-text-secondary); background:var(--color-bg-subtle);
  padding:5px 10px; border-radius:var(--p-radius-xs);
}

.inline-band{
  display:flex; align-items:center; justify-content:space-between; gap:var(--p-space-5);
  margin-top:var(--space-gutter); padding:var(--p-space-5) var(--card-padding);
  background:var(--color-bg-subtle); border:1px dashed var(--color-border-strong);
  border-radius:var(--card-radius);
}
.inline-band b{ display:block; font-size:var(--p-size-lg); color:var(--color-text-primary); }
.inline-band p{ font-size:var(--p-size-sm); color:var(--color-text-secondary); margin-top:4px; }
@media (max-width:700px){ .inline-band{ flex-direction:column; align-items:flex-start; } }

/* ─────────────────────────────────────────────────── 본사 연계 */
.hq{
  background:var(--color-bg-inverse); border-radius:var(--p-radius-lg);
  padding:clamp(28px,3.4vw,44px);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,3.4vw,52px);
  align-items:center;
}
@media (max-width:900px){ .hq{ grid-template-columns:1fr; } }
.hq h2{ color:var(--color-text-on-inverse); font-size:var(--p-size-3xl); line-height:var(--p-leading-display); }
.hq p{ margin-top:var(--p-space-3); color:var(--color-text-secondary); font-size:var(--p-size-sm); line-height:1.8; }
.hq__link{ margin-top:var(--p-space-4); color:var(--p-brand-400); }
.hq__link:hover{ border-bottom-color:currentColor; }
.hq__list{ display:grid; gap:1px; background:var(--color-border-inverse); border:1px solid var(--color-border-inverse); border-radius:var(--p-radius-md); overflow:hidden; }
.hq__item{
  display:flex; align-items:center; gap:var(--p-space-4);
  padding:var(--p-space-4) var(--p-space-5); background:var(--color-bg-inverse);
  transition:background-color var(--p-duration-base) var(--p-ease-out);
}
.hq__item:hover{ background:oklch(1 0 0 / .06); }
.hq__item svg{ width:24px; height:24px; color:var(--p-brand-400); }
.hq__item b{ display:block; font-size:var(--p-size-md); font-weight:var(--p-weight-bold); color:var(--p-neutral-50); }
.hq__item span{ font-size:var(--p-size-xs); color:var(--color-text-secondary); }

/* ─────────────────────────────────────────────────── 전문가 */
.people{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-gutter); }
@media (max-width:760px){ .people{ grid-template-columns:1fr; } }
.person{
  display:flex; gap:var(--p-space-5); align-items:flex-start;
  background:var(--color-bg-raised); border:var(--card-border);
  border-radius:var(--card-radius); padding:var(--card-padding);
}
.avatar{
  width:76px; height:76px; flex:none; border-radius:var(--p-radius-md);
  display:grid; place-items:center;
  background:var(--color-bg-inverse); color:var(--p-brand-400);
  font-size:28px; font-weight:var(--p-weight-black);
}
.person h3{ font-size:var(--p-size-xl); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.person h3 span{ font-size:var(--p-size-xs); font-weight:var(--p-weight-bold); color:var(--color-text-brand); }
.person__meta{ margin-top:var(--p-space-3); }

/* ─────────────────────────────────────────────────── 인사이트 */
.posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-gutter); }
@media (max-width:900px){ .posts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .posts{ grid-template-columns:1fr; } }

.post{
  display:flex; flex-direction:column;
  background:var(--color-bg-raised); border:var(--card-border);
  border-radius:var(--card-radius); overflow:hidden;
  transition:border-color var(--p-duration-base) var(--p-ease-out), box-shadow var(--p-duration-base) var(--p-ease-out);
}
.post:hover{ border-color:var(--color-border-strong); box-shadow:var(--elevation-raised); }
.post:hover .post__title{ color:var(--color-text-brand); }

/* 사진 없이 성립하는 타이포 썸네일 — 카테고리 + 괘선 + 고스트 인덱스 */
.thumb{
  position:relative; aspect-ratio:var(--thumb-ratio);
  background:var(--color-bg-muted); overflow:hidden;
  display:flex; align-items:flex-end; padding:var(--p-space-4) var(--p-space-5);
  border-bottom:1px solid var(--color-border-default);
}
.thumb::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 23px,
    oklch(0.205 0.016 258 / .07) 23px, oklch(0.205 0.016 258 / .07) 24px);
}
.thumb__cat{
  position:relative; font-size:var(--p-size-xs); font-weight:var(--p-weight-black);
  letter-spacing:var(--p-track-wide); color:var(--color-text-primary);
  background:var(--color-bg-raised); border:1px solid var(--color-border-default);
  padding:6px 12px; border-radius:var(--p-radius-full);
}
.thumb__index{
  position:absolute; right:14px; bottom:-14px;
  font-family:var(--p-font-num); font-size:78px; font-weight:var(--p-weight-black);
  color:oklch(0.205 0.016 258 / .09); line-height:1; letter-spacing:var(--p-track-latin);
}
.thumb--feature{ background:var(--color-bg-inverse); border-bottom-color:var(--color-bg-inverse); }
.thumb--feature::before{ background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 23px,
  oklch(1 0 0 / .07) 23px, oklch(1 0 0 / .07) 24px); }
.thumb--feature .thumb__cat{ background:transparent; color:var(--p-neutral-50); border-color:oklch(1 0 0 / .3); }
.thumb--feature .thumb__index{ color:oklch(1 0 0 / .1); }

.post__body{ padding:var(--p-space-5); display:flex; flex-direction:column; gap:var(--p-space-3); flex:1; }
.post__title{
  font-size:var(--p-size-lg); font-weight:var(--p-weight-bold);
  color:var(--color-text-primary); line-height:var(--p-leading-heading);
  transition:color var(--p-duration-fast) var(--p-ease-out);
}
.post__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:var(--p-space-3); }
.post time{ font-size:var(--p-size-xs); color:var(--color-text-tertiary); font-variant-numeric:tabular-nums; }

.filter{ display:flex; flex-wrap:wrap; gap:var(--p-space-2); margin-bottom:clamp(24px,3vw,36px); }
.chip-btn{
  min-height:var(--control-height-sm); padding-inline:var(--p-space-4);
  border:1px solid var(--color-border-default); border-radius:var(--p-radius-full);
  background:var(--color-bg-raised); color:var(--color-text-secondary);
  font-size:var(--p-size-sm); font-weight:var(--p-weight-semibold); cursor:pointer;
  transition:background-color var(--p-duration-fast) var(--p-ease-out),
             border-color var(--p-duration-fast) var(--p-ease-out), color var(--p-duration-fast) var(--p-ease-out);
}
.chip-btn:hover{ background:var(--color-bg-subtle); border-color:var(--color-border-strong); color:var(--color-text-primary); }
.chip-btn[aria-pressed="true"]{
  background:var(--color-bg-inverse); border-color:var(--color-bg-inverse); color:var(--p-neutral-0);
}
.chip-btn[aria-pressed="true"]:hover{ background:var(--p-neutral-900); color:var(--p-neutral-0); }

.empty{
  display:none; text-align:center; padding:clamp(40px,6vw,72px) var(--p-space-5);
  background:var(--color-bg-subtle); border:1px dashed var(--color-border-strong); border-radius:var(--card-radius);
}
.empty[data-on="true"]{ display:block; }
.empty svg{ width:38px; height:38px; color:var(--color-text-tertiary); margin:0 auto var(--p-space-4); }
.empty h3{ font-size:var(--p-size-lg); }
.empty p{ margin-top:var(--p-space-2); font-size:var(--p-size-sm); color:var(--color-text-tertiary); }

/* ─────────────────────────────────────────────────── CTA 밴드 */
.cta-band{ background:var(--color-bg-brand); }
.cta-band__inner{
  padding-block:clamp(48px,6vw,80px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--p-space-4);
}
.cta-band h2{ color:var(--color-text-on-brand); font-size:var(--p-size-4xl); line-height:var(--p-leading-display); }
.cta-band p{ color:oklch(0.205 0.016 258 / .8); font-size:var(--p-size-lg); max-width:52ch; }
.cta-band__btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--p-space-3); margin-top:var(--p-space-2); }

/* ─────────────────────────────────────────────────── 페이지 히어로 */
.page-hero{ background:var(--color-bg-subtle); border-bottom:1px solid var(--color-border-default); }
.page-hero__inner{ padding-block:clamp(36px,4.4vw,64px); }
.crumb{ display:flex; flex-wrap:wrap; gap:8px; font-size:var(--p-size-xs); color:var(--color-text-tertiary); margin-bottom:var(--p-space-4); }
.crumb a{ display:inline-flex; align-items:center; min-height:24px; }
.crumb a:hover{ color:var(--color-text-brand); }
.page-hero h1{ font-size:var(--text-h1-size); }
.page-hero .lead{ margin-top:var(--p-space-4); }

/* ─────────────────────────────────────────────────── 장문 콘텐츠 */
.prose{ font-size:var(--text-body-lg-size); line-height:var(--p-leading-loose); color:var(--color-text-secondary); max-width:74ch; }
.prose > * + *{ margin-top:var(--p-space-5); }
.prose h2{ font-size:var(--p-size-3xl); margin-top:var(--p-space-14); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:var(--p-size-xl); margin-top:var(--p-space-10); }
.prose strong{ color:var(--color-text-primary); font-weight:var(--p-weight-bold); }
.prose ul{ display:grid; gap:var(--p-space-3); }
.prose ul li{ display:flex; gap:var(--p-space-3); }
.prose ul li::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--color-border-strong); margin-top:calc(var(--p-leading-loose) * 0.5em - 3px);
}
.prose ol{ counter-reset:n; display:grid; gap:var(--p-space-3); }
.prose ol li{ display:flex; gap:var(--p-space-3); counter-increment:n; }
.prose ol li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--p-font-num); font-size:var(--p-size-xs); font-weight:var(--p-weight-bold);
  color:var(--color-text-brand); flex:none; padding-top:.35em;
}

.callout{
  padding:var(--p-space-5) var(--p-space-6);
  background:var(--color-bg-subtle); border:1px solid var(--color-border-default);
  border-radius:var(--card-radius); font-size:var(--p-size-md); line-height:1.8;
}
.callout__t{ display:flex; align-items:center; gap:8px; font-size:var(--p-size-xs); font-weight:var(--p-weight-black); letter-spacing:var(--p-track-wide); color:var(--color-text-primary); margin-bottom:var(--p-space-2); }
.callout__t svg{ width:17px; height:17px; color:var(--color-text-brand); }
.callout--brand{ background:var(--color-bg-brand-subtle); border-color:var(--p-brand-200); }

.table-wrap{ overflow-x:auto; border:1px solid var(--color-border-default); border-radius:var(--card-radius); }
table.data{ width:100%; border-collapse:collapse; font-size:var(--p-size-sm); min-width:520px; }
table.data th,table.data td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--color-border-subtle); vertical-align:top; line-height:1.7; }
table.data thead th{ background:var(--color-bg-subtle); color:var(--color-text-primary); font-weight:var(--p-weight-bold); white-space:nowrap; }
table.data tbody th{ color:var(--color-text-primary); font-weight:var(--p-weight-bold); white-space:nowrap; width:1%; }
table.data td{ color:var(--color-text-secondary); }
table.data tr:last-child th,table.data tr:last-child td{ border-bottom:0; }

/* 체크리스트 */
.checklist{ display:grid; gap:var(--p-space-3); }
.checklist li{
  display:flex; gap:var(--p-space-3); align-items:flex-start;
  padding:var(--p-space-4) var(--p-space-5);
  background:var(--color-bg-raised); border:var(--card-border); border-radius:var(--p-radius-sm);
  font-size:var(--p-size-md); color:var(--color-text-secondary); line-height:1.7;
}
.checklist svg{ width:20px; height:20px; color:var(--color-action-primary); margin-top:3px; }

/* 단계 타임라인 */
.steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-gutter); counter-reset:s; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ counter-increment:s; padding-top:var(--p-space-5); border-top:3px solid var(--color-border-default); }
.step:first-child{ border-top-color:var(--color-bg-brand); }
.step__n{ font-family:var(--p-font-num); font-size:var(--p-size-xs); font-weight:var(--p-weight-bold); color:var(--color-text-brand); letter-spacing:var(--p-track-latin); }
.step h3{ font-size:var(--p-size-lg); margin-top:var(--p-space-2); }
.step p{ margin-top:var(--p-space-2); font-size:var(--p-size-sm); color:var(--color-text-secondary); line-height:1.72; }

/* FAQ 아코디언 */
.faq{ border-top:1px solid var(--color-border-default); }
.faq__item{ border-bottom:1px solid var(--color-border-default); }
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--p-space-4);
  padding:var(--p-space-5) var(--p-space-2); text-align:left; cursor:pointer;
  font-size:var(--p-size-lg); font-weight:var(--p-weight-bold); color:var(--color-text-primary);
  line-height:var(--p-leading-heading); min-height:var(--control-height-lg);
  transition:color var(--p-duration-fast) var(--p-ease-out);
}
.faq__q:hover{ color:var(--color-text-brand); }
.faq__q svg{ width:22px; height:22px; color:var(--color-text-tertiary); margin-top:2px; transition:transform var(--p-duration-base) var(--p-ease-out), color var(--p-duration-fast) var(--p-ease-out); }
.faq__q[aria-expanded="true"] svg{ transform:rotate(180deg); color:var(--color-text-brand); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--p-duration-slow) var(--p-ease-out); }
.faq__a > div{ overflow:hidden; }
.faq__item[data-open="true"] .faq__a{ grid-template-rows:1fr; }
/* 높이만 0 으로 접으면 스크린리더는 접힌 답변을 전부 읽는다.
   visibility 로 접근성 트리에서도 빼되, 전환 지연을 줘서 시각 결과는 그대로 둔다. */
.faq__a > div{ visibility:hidden; transition:visibility 0s linear var(--p-duration-slow); }
.faq__item[data-open="true"] .faq__a > div{ visibility:visible; transition-delay:0s; }
.faq__a p{ padding:0 var(--p-space-2) var(--p-space-6); font-size:var(--p-size-md); color:var(--color-text-secondary); line-height:1.85; max-width:72ch; }
.faq__a p + p{ padding-top:0; margin-top:calc(var(--p-space-4) * -1 + var(--p-space-4)); }

/* 정보 카드 (연락 수단 · 오시는 길) */
.info-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-gutter); }
@media (max-width:900px){ .info-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .info-grid{ grid-template-columns:1fr; } }
.info-card{
  display:flex; flex-direction:column; gap:var(--p-space-3);
  background:var(--color-bg-raised); border:var(--card-border);
  border-radius:var(--card-radius); padding:var(--card-padding);
  transition:border-color var(--p-duration-base) var(--p-ease-out), transform var(--p-duration-base) var(--p-ease-out);
}
a.info-card:hover{ border-color:var(--color-border-brand); transform:translateY(-2px); }
.info-card__icon{
  width:44px; height:44px; border-radius:var(--p-radius-sm); display:grid; place-items:center;
  background:var(--color-bg-subtle); color:var(--color-text-primary);
}
.info-card h3{ font-size:var(--p-size-lg); }
.info-card p{ font-size:var(--p-size-sm); color:var(--color-text-secondary); line-height:1.72; }
.info-card b{ font-size:var(--p-size-lg); color:var(--color-text-primary); font-variant-numeric:tabular-nums; letter-spacing:var(--p-track-latin); }

.map-frame{
  aspect-ratio:16/9; border:1px solid var(--color-border-default); border-radius:var(--card-radius);
  background:var(--color-bg-muted); overflow:hidden; position:relative;
  display:grid; place-items:center; text-align:center; padding:var(--p-space-6);
}
.map-frame::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--color-border-default) 1px,transparent 1px),
                   linear-gradient(90deg,var(--color-border-default) 1px,transparent 1px);
  background-size:44px 44px; opacity:.55;
}
.map-frame__note{ position:relative; }
.map-frame__note svg{ width:34px; height:34px; color:var(--color-action-primary); margin:0 auto var(--p-space-3); }
.map-frame__note b{ display:block; font-size:var(--p-size-md); color:var(--color-text-primary); }
.map-frame__note span{ font-size:var(--p-size-xs); color:var(--color-text-tertiary); }

/* ─────────────────────────────────────────────────── Footer */
.footer{ background:var(--color-bg-inverse-deep); color:var(--color-text-secondary); font-size:var(--p-size-sm); }
.footer a:hover{ color:var(--p-brand-400); }
.footer__top{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,56px); padding-block:clamp(40px,5vw,64px);
}
@media (max-width:820px){ .footer__top{ grid-template-columns:1fr 1fr; } .footer__col--brand{ grid-column:1/-1; } }
@media (max-width:520px){ .footer__top{ grid-template-columns:1fr; } }
.footer__addr{ margin-top:var(--p-space-4); line-height:1.85; color:var(--color-text-secondary); }
.footer h2{ font-size:var(--p-size-2xs); font-weight:var(--p-weight-black); letter-spacing:var(--p-track-caps); text-transform:uppercase; color:var(--p-neutral-300); margin-bottom:var(--p-space-4); }  /* neutral-300 은 잉크 서피스에 대응하는 Semantic 토큰이 없다 */
.footer ul{ display:grid; gap:var(--p-space-3); }
.footer li{ line-height:1.6; }
.footer__legal{
  border-top:1px solid var(--color-border-inverse);
  padding-block:var(--p-space-5) calc(var(--p-space-6) + env(safe-area-inset-bottom));
  font-size:var(--p-size-xs); color:var(--color-text-tertiary); line-height:1.9;
}
.footer__legal b{ color:var(--p-neutral-300); font-weight:var(--p-weight-semibold); }
.footer__legal a{ color:var(--p-neutral-300); border-bottom:1px solid oklch(1 0 0 / .25); }

/* ─────────────────────────────────────────────────── 모바일 고정 CTA 바 */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--p-z-dock);
  display:none; grid-template-columns:1fr 1.25fr; gap:var(--p-space-2);
  padding:var(--p-space-2) var(--p-space-3) calc(var(--p-space-2) + env(safe-area-inset-bottom));
  background:oklch(1 0 0 / .96); backdrop-filter:blur(10px);
  border-top:1px solid var(--color-border-default);
}
.dock .btn{ min-height:var(--control-height-lg); }
@media (max-width:1060px){
  .dock{ display:grid; }
  /* dock 자신이 safe-area 만큼 더 두꺼워지므로 본문 여백도 같이 늘려야 한다.
     고정값만 쓰면 노치 기기에서 페이지 최하단이 dock 뒤로 영구히 숨는다. */
  body{ padding-bottom:calc(var(--dock-height) + env(safe-area-inset-bottom)); }

  /* 입력 중에는 dock 을 내린다.
     키보드가 올라오면 시각 뷰포트가 줄어드는데 dock 은 화면 하단에 그대로 붙어 있어,
     그 띠에 들어온 입력칸을 누르면 dock 버튼이 대신 눌린다. 다른 페이지로 이동해
     입력한 내용이 통째로 사라진다 — 상담 유입이 목적인 사이트에서 치명적이다. */
  body:has(.form-stack :is(input,select,textarea):focus) .dock{ display:none; }
}

/* 데스크톱 플로팅 — 채널톡 위젯 영역(우하단 84px)을 피해 위로 쌓는다 */
.floats{
  position:fixed; right:20px; bottom:calc(var(--float-reserve) + 12px); z-index:var(--p-z-float);
  display:flex; flex-direction:column; gap:var(--p-space-2); align-items:flex-end;
}
@media (max-width:1060px){ .floats{ bottom:calc(var(--dock-height) + var(--float-reserve)); right:12px; } }
.float-btn{
  display:inline-flex; align-items:center; gap:var(--p-space-2);
  min-height:var(--control-height-md); padding-inline:var(--p-space-4);
  border-radius:var(--p-radius-full); cursor:pointer;
  background:var(--color-bg-raised); color:var(--color-text-primary);
  border:1px solid var(--color-border-default); box-shadow:var(--elevation-raised);
  font-size:var(--p-size-sm); font-weight:var(--p-weight-bold);
  transition:background-color var(--p-duration-base) var(--p-ease-out),
             border-color var(--p-duration-base) var(--p-ease-out), transform var(--p-duration-fast) var(--p-ease-out);
}
.float-btn svg{ width:20px; height:20px; color:var(--color-action-primary); }
.float-btn:hover{ background:var(--color-bg-subtle); border-color:var(--color-border-brand); transform:translateY(-2px); }
.float-btn[hidden]{ display:none; }

/* ─────────────────────────────────────────────────── 쿠키 배너 */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--p-z-overlay);
  display:none; background:var(--color-bg-inverse); color:var(--p-neutral-300);
  border-top:1px solid var(--color-border-inverse);
  padding:var(--p-space-4) 0 calc(var(--p-space-4) + env(safe-area-inset-bottom));
}
.cookie[data-on="true"]{ display:block; }
.cookie__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--p-space-5); flex-wrap:wrap; }
.cookie p{ font-size:var(--p-size-sm); line-height:1.7; max-width:64ch; }
.cookie a{ color:var(--p-brand-400); border-bottom:1px solid currentColor; }
.cookie__btns{ display:flex; gap:var(--p-space-2); flex:none; }
@media (max-width:1060px){
  .cookie{ bottom:calc(var(--dock-height) + env(safe-area-inset-bottom)); }
  /* 배너 버튼도 터치 타깃 하한을 지킨다 */
  .cookie .btn{ min-height:var(--control-height-md); }
  /* 배너가 떠 있는 동안 플로팅 버튼은 배너 뒤에 완전히 가려진다(z 130 < 200).
     겹쳐 놓느니 감춘다. 배너는 한 번 선택하면 사라진다. */
  body:has(.cookie[data-on="true"]) .floats{ display:none; }
  /* 인사이트 필터 칩 — 40~60대 요건인 48px 하한 */
  .chip-btn{ min-height:var(--control-height-md); }
}

/* 가로 모드에서는 세로 공간이 없다. 메뉴 항목이 1개만 보이던 것을 줄여서 담는다. */
@media (max-width:1060px) and (max-height:520px){
  .mnav__body a{ min-height:48px; font-size:var(--p-size-lg); }
  .mnav__foot{ padding-block:var(--p-space-3); gap:var(--p-space-2); }
  .mnav__foot .btn{ min-height:var(--control-height-md); }
  .mnav__meta{ display:none; }
}

/* ─────────────────────────────────────────────────── 404 */
.notfound{ min-height:52vh; display:grid; place-items:center; text-align:center; padding-block:clamp(56px,8vw,120px); }
.notfound__code{
  font-family:var(--p-font-num); font-size:clamp(64px,12vw,140px); font-weight:var(--p-weight-black);
  color:var(--color-border-strong); line-height:1; letter-spacing:var(--p-track-latin);
}

/* ─────────────────────────────────────────────────── 디자인 시스템 시트 전용 */
.ds-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:var(--p-space-3); }
.ds-sw{ border:1px solid var(--color-border-default); border-radius:var(--p-radius-sm); overflow:hidden; }
.ds-sw__c{ height:72px; }
.ds-sw__m{ padding:10px 12px; background:var(--color-bg-raised); }
.ds-sw__m b{ display:block; font-size:var(--p-size-xs); color:var(--color-text-primary); }
.ds-sw__m span{ display:block; font-family:var(--p-font-num); font-size:11px; color:var(--color-text-tertiary); margin-top:2px; }
.ds-sw__m i{ display:block; font-style:normal; font-size:11px; font-weight:var(--p-weight-bold); color:var(--color-text-brand); margin-top:3px; }

.ds-row{ display:flex; align-items:baseline; gap:var(--p-space-5); padding:var(--p-space-4) 0; border-bottom:1px solid var(--color-border-subtle); }
.ds-row:last-child{ border-bottom:0; }
.ds-row__l{ width:190px; flex:none; font-family:var(--p-font-num); font-size:var(--p-size-2xs); color:var(--color-text-tertiary); }
@media (max-width:700px){ .ds-row{ flex-direction:column; gap:var(--p-space-2); } .ds-row__l{ width:auto; } }

.ds-panel{ background:var(--color-bg-raised); border:1px solid var(--color-border-default); border-radius:var(--card-radius); padding:var(--card-padding); }
.ds-strip{ display:flex; flex-wrap:wrap; gap:var(--p-space-3); align-items:center; }
.ds-icons{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:var(--p-space-2); }
.ds-icon{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:var(--p-space-4) var(--p-space-2); border:1px solid var(--color-border-subtle);
  border-radius:var(--p-radius-sm); text-align:center;
}
.ds-icon svg{ width:26px; height:26px; color:var(--color-text-primary); }
.ds-icon span{ font-size:11px; color:var(--color-text-tertiary); }
.ds-space{ display:flex; align-items:flex-end; gap:var(--p-space-2); flex-wrap:wrap; }
.ds-space div{ background:var(--color-bg-brand-subtle); border:1px solid var(--p-brand-200); }
.ds-space i{ display:block; font-style:normal; font-family:var(--p-font-num); font-size:10px; color:var(--color-text-tertiary); text-align:center; margin-top:6px; }

/* ─────────────────────────────────────────────────── 보강 */
.post__foot svg{ width:18px; height:18px; color:var(--color-text-tertiary); transition:color var(--p-duration-fast) var(--p-ease-out), transform var(--p-duration-base) var(--p-ease-out); }
.post:hover .post__foot svg{ color:var(--color-text-brand); transform:translateX(3px); }

@media (max-width:820px){ .svc-detail__grid{ grid-template-columns:1fr !important; gap:var(--p-space-5) !important; } }

.split-2{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,4vw,64px); align-items:start; }
@media (max-width:900px){ .split-2{ grid-template-columns:1fr; } }

.stack-lg > * + *{ margin-top:clamp(28px,3.4vw,44px); }
.stack-md > * + *{ margin-top:var(--p-space-5); }

.hours{ display:grid; gap:1px; background:var(--color-border-default); border:1px solid var(--color-border-default); border-radius:var(--card-radius); overflow:hidden; }
.hours__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--p-space-4); padding:16px 20px; background:var(--color-bg-raised); font-size:var(--p-size-md); }
.hours__row b{ color:var(--color-text-primary); font-weight:var(--p-weight-bold); }
.hours__row span{ color:var(--color-text-secondary); font-variant-numeric:tabular-nums; }
.hours__row--off span{ color:var(--color-text-tertiary); }

.legal{ font-size:var(--p-size-md); line-height:1.9; color:var(--color-text-secondary); max-width:76ch; }
.legal h2{ font-size:var(--p-size-xl); margin-top:var(--p-space-12); }
.legal h2:first-child{ margin-top:0; }
.legal > * + *{ margin-top:var(--p-space-4); }
.legal ol{ counter-reset:l; display:grid; gap:var(--p-space-2); }
.legal ol li{ display:flex; gap:var(--p-space-3); counter-increment:l; }
.legal ol li::before{ content:counter(l) "."; flex:none; color:var(--color-text-tertiary); font-variant-numeric:tabular-nums; }