/* Hallmark · macrostructure: Conversational FAQ (opened by the form as the first answer) · tone: utilitarian-calm · anchor hue: 265 navy
 * theme: custom (site tokens — light / roman-serif / cool) · nav: N1a (1 destination: 전화) · footer: Ft2 inline rule · enrichment: none
 * pre-emit critique: P4 H4 E4 S5 R5 V4
 * 개원 상담 신청 — wementor.kr/open (2026-10-25). 색·글꼴·간격은 ../css/tokens.css 이름으로만 쓴다. */

:root{
  --font-body:"IBM Plex Sans KR","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;
  --color-ok:oklch(46% 0.11 155);
  --color-ok-paper:oklch(96% 0.025 155);
  --color-err:oklch(50% 0.17 28);
  --color-err-paper:oklch(96.5% 0.02 28);
  --color-kakao:oklch(89% 0.17 98);           /* 카카오 노랑 — 단추 한 곳에만 */
  --color-kakao-ink:oklch(22% 0.03 70);
  --tap:3rem;                                  /* 손가락 누르는 칸 48px */
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);
  line-height:var(--leading-body);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-accent);text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}

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

/* ── 머리 ── */
.bar{border-bottom:var(--rule-w) solid var(--color-rule-2);background:var(--color-paper)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:3.75rem}
.brand img{height:1.6rem;width:auto}
.bar-tel{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;color:var(--color-navy);text-decoration:none;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bar-tel:hover{text-decoration:underline}

/* ── 첫 질문 ── */
.lead{padding-block:var(--space-2xl) var(--space-xl)}
.lead h1{margin:0;font-family:var(--font-display);font-weight:700;font-style:normal;font-size:var(--text-display-s);line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);color:var(--color-navy);overflow-wrap:anywhere;min-width:0}
.lead .answer{margin:var(--space-lg) 0 0;font-size:var(--text-md);line-height:1.6;color:var(--color-ink)}
.lead .more{margin:var(--space-md) 0 0;color:var(--color-ink-2)}

.lead .fee{margin:var(--space-md) 0 0;padding-left:var(--space-sm);border-left:var(--rule-strong-w) solid var(--color-accent);font-weight:600;color:var(--color-navy)}
.fee-sm{margin:var(--space-sm) 0 0;text-align:center;font-size:var(--text-sm);color:var(--color-ink-2)}

/* ── 신청서 ── */
.form-sec{padding-bottom:var(--space-2xl)}
form{border-top:var(--rule-strong-w) solid var(--color-navy);padding-top:var(--space-lg);scroll-margin-top:var(--space-lg)}
.f{margin:0 0 var(--space-lg);border:0;padding:0;min-width:0}
.f > label, .f > legend{display:block;font-weight:600;color:var(--color-navy);margin-bottom:var(--space-xs);padding:0}
.f .opt{font-weight:400;color:var(--color-muted);font-size:var(--text-sm)}
.f .hint{display:block;margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--color-muted)}
input[type=text],input[type=tel],textarea{width:100%;min-height:var(--tap);padding:var(--space-sm) var(--space-md);font:inherit;color:var(--color-ink);
  background:oklch(100% 0 0 / 0);border:var(--rule-w) solid var(--color-rule);border-radius:var(--radius-input);
  transition:border-color var(--dur-micro) var(--ease-out)}
input[type=text],input[type=tel]{background:var(--color-accent-ink)}
textarea{background:var(--color-accent-ink);min-height:6rem;resize:vertical}
input:hover,textarea:hover{border-color:var(--color-muted)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--color-focus);outline-offset:0;border-color:var(--color-focus)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--color-err)}
input:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}

/* 고르기 칸 — 라디오를 글자 단추로 */
.picks{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.picks label{position:relative;display:inline-flex}
.picks input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.picks span{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 var(--space-md);border:var(--rule-w) solid var(--color-rule);
  border-radius:var(--radius-input);background:var(--color-accent-ink);color:var(--color-ink-2);white-space:nowrap;
  transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.picks label:hover span{border-color:var(--color-muted)}
.picks input:checked + span{background:var(--color-navy);border-color:var(--color-navy);color:var(--color-on-navy)}
.picks input:focus-visible + span{outline:2px solid var(--color-focus);outline-offset:2px}
.picks input:active + span{transform:translateY(1px)}

/* 확인 칸 */
.check{display:flex;gap:var(--space-sm);align-items:flex-start;margin-bottom:var(--space-sm);cursor:pointer}
.check input{flex:none;width:1.375rem;height:1.375rem;margin:.2rem 0 0;accent-color:var(--color-navy)}
.check b{font-weight:600}
.consent{margin:var(--space-xl) 0 var(--space-lg);padding-top:var(--space-lg);border-top:var(--rule-w) solid var(--color-rule-2)}
.consent details{margin:0 0 var(--space-md) 2.125rem;font-size:var(--text-sm);color:var(--color-ink-2)}
.consent summary{cursor:pointer;color:var(--color-accent);min-height:2rem;display:inline-flex;align-items:center}
.consent details p{margin:var(--space-xs) 0 0}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.go{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);width:100%;min-height:3.5rem;padding:0 var(--space-lg);
  font:inherit;font-weight:700;font-size:var(--text-md);color:var(--color-on-navy);background:var(--color-navy);border:0;border-radius:var(--radius-input);
  cursor:pointer;white-space:nowrap;transition:background-color var(--dur-micro) var(--ease-out)}
.go:hover{background:var(--color-navy-2)}
.go:active{transform:translateY(1px)}
.go:disabled{opacity:.6;cursor:progress}
.go[data-state=loading]::before{content:"";width:1rem;height:1rem;border:2px solid var(--color-on-navy-2);border-top-color:var(--color-on-navy);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.go[data-state=loading]::before{animation:none}}

.msg{margin:calc(-1 * var(--space-sm)) 0 var(--space-lg);padding:var(--space-sm) var(--space-md);border-left:var(--rule-strong-w) solid var(--color-err);background:var(--color-err-paper);color:var(--color-ink)}
.msg[hidden]{display:none}

/* ── 접수 끝 ── */
.done{border-top:var(--rule-strong-w) solid var(--color-ok);padding-top:var(--space-lg)}
.done[hidden]{display:none}
.done h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);line-height:1.35;color:var(--color-navy)}
.ticket{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md);margin:var(--space-lg) 0;padding:var(--space-md);
  background:var(--color-ok-paper);border:var(--rule-w) solid var(--color-rule)}
.ticket small{display:block;color:var(--color-ink-2);font-size:var(--text-sm)}
.nowrap{white-space:nowrap}
.ticket strong{white-space:nowrap;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:clamp(var(--text-lg),6.4vw,var(--text-xl));font-weight:600;letter-spacing:.04em;color:var(--color-navy);
  font-variant-numeric:tabular-nums}
.copy{min-height:2.75rem;padding:0 var(--space-md);font:inherit;font-size:var(--text-sm);color:var(--color-navy);background:var(--color-accent-ink);
  border:var(--rule-w) solid var(--color-rule);border-radius:var(--radius-input);cursor:pointer;white-space:nowrap}
.copy:hover{border-color:var(--color-navy)}
.copy:active{transform:translateY(1px)}
.kakao{display:flex;align-items:center;justify-content:center;width:100%;min-height:3.5rem;font-weight:700;font-size:var(--text-md);
  color:var(--color-kakao-ink);background:var(--color-kakao);text-decoration:none;border-radius:var(--radius-input);white-space:nowrap}
.kakao:hover{filter:brightness(.97)}
.kakao:active{transform:translateY(1px)}
.done ol{margin:var(--space-lg) 0 0;padding-left:1.25rem;color:var(--color-ink-2)}
.done li{margin-bottom:var(--space-xs)}

/* ── 보고서로 아는 것 ── */
.know{padding-block:var(--space-md) var(--space-xl)}
.know h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);line-height:1.35;color:var(--color-navy)}
.know-lead{margin:var(--space-sm) 0 var(--space-lg);color:var(--color-ink-2)}
.proof{margin:0 0 var(--space-lg);padding:var(--space-sm) 0 var(--space-sm) var(--space-sm);border-left:var(--rule-strong-w) solid var(--color-rule);color:var(--color-ink-2)}
.know-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
.know-card{border-top:var(--rule-strong-w) solid var(--color-navy);padding-top:var(--space-md)}
.know-card + .know-card{border-top-color:var(--color-accent)}
.know-card .tag{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--color-accent)}
.know-card h3{margin:var(--space-2xs) 0 0;font-size:var(--text-lg);line-height:1.4;color:var(--color-navy)}
.know-card .short{margin:var(--space-sm) 0 0;color:var(--color-ink)}
.know-card ul{margin:var(--space-sm) 0 0;padding-left:1.15rem;color:var(--color-ink-2)}
.know-card li{margin-bottom:var(--space-2xs)}
.know-card .eg{margin:var(--space-md) 0 0;padding:var(--space-sm) var(--space-md);background:var(--color-paper-2);font-size:var(--text-sm);color:var(--color-ink-2)}

/* ── 자리 찾기 ── */
.spot{padding-block:0 var(--space-2xl)}
.spot h2{margin:0;padding-top:var(--space-lg);border-top:var(--rule-w) solid var(--color-rule);font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);line-height:1.35;color:var(--color-navy)}
.spot-a{margin:var(--space-md) 0 0;font-size:var(--text-md);line-height:1.6}
.spot-note{margin:var(--space-sm) 0 0;font-size:var(--text-sm);color:var(--color-ink-2)}
.spot-go{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:var(--space-md);padding:0 var(--space-lg);border:var(--rule-w) solid var(--color-navy);border-radius:var(--radius-input);
  color:var(--color-navy);font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.spot-go:hover{background:var(--color-navy);color:var(--color-on-navy)}
.spot-go:active{transform:translateY(1px)}

/* ── 순서 ── */
.steps{padding-block:var(--space-2xl) var(--space-xl);background:var(--color-paper-2)}
.go + .msg{margin:var(--space-md) 0 0}
.steps h2,.qa h2.sec{margin:0 0 var(--space-lg);font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);line-height:1.35;color:var(--color-navy)}
.steps ol{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--space-md);padding:var(--space-md) 0;
  border-top:var(--rule-w) solid var(--color-rule)}
.steps li::before{content:counter(s);font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:var(--color-accent);line-height:1.2}
.steps h3{margin:0;font-size:var(--text-md);color:var(--color-navy)}
.steps p{margin:var(--space-2xs) 0 0;color:var(--color-ink-2)}

/* ── 묻고 답하기 ── */
.qa{padding-block:var(--space-2xl)}
.qa details{border-top:var(--rule-w) solid var(--color-rule)}
.qa details:last-of-type{border-bottom:var(--rule-w) solid var(--color-rule)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);padding:var(--space-md) 0;min-height:var(--tap)}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{margin:0;font-size:var(--text-md);font-weight:600;line-height:1.45;color:var(--color-navy)}
.qa summary::after{content:"+";flex:none;font-size:var(--text-lg);color:var(--color-accent);transition:transform var(--dur-short) var(--ease-out)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa .a{padding:0 0 var(--space-lg)}
.qa .a p{margin:0 0 var(--space-sm);color:var(--color-ink-2)}
.qa .a p:first-child{color:var(--color-ink)}

/* ── 꼬리 ── */
.foot{border-top:var(--rule-w) solid var(--color-rule);padding-block:var(--space-lg) var(--space-2xl);font-size:var(--text-sm);color:var(--color-muted)}
.foot p{margin:0 0 var(--space-2xs)}
.foot a{color:var(--color-ink-2)}

@media (min-width:48rem){
  .lead{padding-top:var(--space-3xl)}
  .lead h1{font-size:var(--text-display)}
}