/* 고객 포털 — 가입·로그인·설문·내 공간. Crest 컴포넌트 규격을 따른다 (crest/components.css, base.css)
   글자: 화면 제목 Title 3 · 카드 제목 Heading 2 · 문항 Headline 2 · 본문 Body 1/2 · 메타 Label 1 · 도움말 Caption 1 */
.inline { display: inline; margin: 0; }
.linkbtn.small { font-size: 13px; }
.btn[disabled] { cursor: not-allowed; }
.fine { font-size: 13px; line-height: 18px; color: var(--label-alternative); margin-top: var(--space-16); }
.center { text-align: center; }
.muted { color: var(--label-alternative); }
.eyebrow { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .0145em; color: var(--primary-normal); }

/* 알림 상자 — 상태색 10% 면 + 아이콘 (Toast 의 문구 규칙: 마침표로 끝나는 문장) */
.ok, .warn, .banner { display: flex; gap: var(--space-8); align-items: flex-start; border-radius: var(--radius-12); padding: var(--space-12) var(--space-16);
  font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .0145em; margin: var(--space-12) 0; text-align: left; }
.ok::before, .warn::before, .banner::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; }
.ok { background: var(--cr-positive-soft); color: var(--label-normal); }
.ok::before { color: var(--status-positive); -webkit-mask: var(--cr-icon-ok) center / contain no-repeat; mask: var(--cr-icon-ok) center / contain no-repeat; }
.warn { background: var(--cr-cautionary-soft); color: var(--label-normal); }
.warn::before { color: var(--status-cautionary); -webkit-mask: var(--cr-icon-exc) center / contain no-repeat; mask: var(--cr-icon-exc) center / contain no-repeat; }
.banner { background: var(--cr-primary-soft); color: var(--label-normal); margin: 0 0 var(--space-20); }
.banner::before { color: var(--primary-normal); -webkit-mask: var(--cr-icon-exc) center / contain no-repeat; mask: var(--cr-icon-exc) center / contain no-repeat; }
.banner.ok::before { color: var(--status-positive); -webkit-mask: var(--cr-icon-ok) center / contain no-repeat; mask: var(--cr-icon-ok) center / contain no-repeat; }
.banner.ok { background: var(--cr-positive-soft); }
.banner a { color: var(--primary-normal); text-decoration: underline; }

/* 가입 카드 */
.notice-card.join { text-align: left; }
.notice-card.join h1 { margin-top: var(--space-4); }
.prefill { margin: var(--space-20) 0; padding: var(--space-12) var(--space-16); background: var(--background-alternative); border-radius: var(--radius-12); display: grid; gap: var(--space-6); font-size: 14px; line-height: 20px; }
.prefill div { display: flex; gap: var(--space-12); }
.prefill dt { width: 52px; color: var(--label-alternative); flex: none; }
.prefill dd { margin: 0; color: var(--label-normal); font-weight: 500; }

/* 약관 동의 — FramedStyle 틀 + ListCell 줄 + Checkbox */
.agree { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-normal-neutral), var(--shadow-xsmall); padding: var(--space-4) var(--space-16); margin: 0 0 var(--space-20); display: grid; background: var(--background-normal); }
.agree label { display: flex; gap: var(--space-8); align-items: center; min-height: 48px; padding: var(--space-12) 0; font-size: 15px; line-height: 22px; color: var(--label-normal); box-shadow: inset 0 -1px 0 var(--line-normal-alternative); cursor: pointer; }
.agree label:last-of-type { box-shadow: none; }
.agree label.all { font-size: 16px; font-weight: 600; }
.agree a { margin-left: auto; font-size: 13px; color: var(--label-alternative); text-decoration: underline; }
.join-btns { display: grid; gap: var(--space-8); margin-top: var(--space-16); }
.or { display: flex; align-items: center; gap: var(--space-12); color: var(--label-alternative); font-size: 13px; margin: var(--space-20) 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-normal-alternative); }
.email-form { display: grid; gap: var(--space-8); }
.k-form { display: grid; gap: var(--space-8); margin-top: var(--space-20); }
.policy ul { text-align: left; padding-left: 18px; display: grid; gap: var(--space-8); margin: var(--space-16) 0; font-size: 14px; line-height: 22px; }

/* 앱 화면 공통 */
main.app { max-width: 720px; margin: 0 auto; padding: var(--space-28) var(--page-margin-mobile) 72px; }

/* 설문 */
.sv-top { position: sticky; top: 56px; z-index: 5; background: var(--background-normal); padding: var(--space-8) 0 var(--space-16); }
.sv-step { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--primary-normal); display: flex; justify-content: space-between; gap: var(--space-8); }
.sv-note { font-weight: 500; color: var(--label-alternative); }
/* 필수·선택 표시 — ContentBadge xsmall */
.req { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-6); border-radius: var(--radius-6); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .0311em;
  background: var(--fill-normal); color: var(--label-alternative); vertical-align: 2px; margin-left: var(--space-4); }
.req.on { background: var(--cr-primary-soft); color: var(--primary-normal); }
.hint { font-size: 14px; line-height: 20px; color: var(--label-alternative); margin: calc(-1 * var(--space-4)) 0 var(--space-12); }
.sv-bar { height: 4px; border-radius: var(--radius-full); background: var(--fill-normal); overflow: hidden; margin-top: var(--space-8); }
.sv-bar i { display: block; height: 100%; background: var(--primary-normal); border-radius: inherit; transition: width .3s; }
.sv-bar.big { height: 8px; margin: var(--space-12) 0 var(--space-8); }
.sv-dots { display: none; }
.sv-form h1, .sv-h { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.023em; margin: var(--space-12) 0 var(--space-24); }
.q { border: 0; padding: 0; margin: 0 0 var(--space-32); }
.q legend { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--label-strong); margin-bottom: var(--space-12); padding: 0; }
.q legend small { font-size: 13px; font-weight: 500; color: var(--label-alternative); margin-left: var(--space-6); }
/* 선택 칩 — Chip Outlined · large(40 · r10) · 선택 시 primary 5% 면 + 43% 테두리 */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--space-4); min-height: 40px; padding: 9px var(--space-12) 9px var(--space-12);
  border-radius: var(--radius-10); box-shadow: inset 0 0 0 1px var(--line-normal-neutral); color: var(--label-alternative);
  font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: .0096em; cursor: pointer; }
.chip span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--label-normal); opacity: 0; transition: opacity .12s; z-index: -1; }
.chip span:hover::after { opacity: var(--state-light-hover); }
.chip span:active::after { opacity: var(--state-light-pressed); }
.chip input:checked + span { color: var(--primary-normal); background: color-mix(in srgb, var(--primary-normal) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-normal) 43%, transparent); }
.chip input:checked + span::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--cr-icon-check) center / contain no-repeat; mask: var(--cr-icon-check) center / contain no-repeat; }
.chip input:focus-visible + span { outline: 2px solid var(--primary-normal); outline-offset: 2px; }
.sv-nav { display: flex; justify-content: space-between; gap: var(--space-12); margin-top: var(--space-12); }
.sv-nav .btn { min-width: 120px; }
.sv-later { text-align: center; margin-top: var(--space-20); }
.review { display: grid; gap: var(--space-12); margin-bottom: var(--space-20); }
.rv { background: var(--background-normal); border-radius: var(--radius-16); padding: var(--space-20); box-shadow: var(--cf-card); }
.rv header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-8); }
.rv h2 { font-size: 17px; line-height: 24px; font-weight: 600; }
.rv header a { font-size: 14px; color: var(--primary-normal); font-weight: 600; }
.rv dl { margin: 0; display: grid; gap: var(--space-8); }
.rv dl div { display: grid; grid-template-columns: 42% 1fr; gap: var(--space-12); font-size: 14px; line-height: 20px; }
.rv dt { color: var(--label-alternative); }
.rv dd { margin: 0; color: var(--label-normal); white-space: pre-wrap; }
.rv dl div.empty dd { color: var(--status-negative); font-weight: 600; }

/* 내 공간 */
.me-head h1 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.023em; margin-top: var(--space-8); }
.me-grid { display: grid; gap: var(--space-12); margin-top: var(--space-16); }
.me-card { background: var(--background-normal); border-radius: var(--radius-16); padding: var(--space-24); box-shadow: var(--cf-card); }
.me-card h2 { font-size: 20px; line-height: 28px; font-weight: 600; margin: var(--space-6) 0 var(--space-8); }
.me-card p { font-size: 15px; line-height: 22px; color: var(--label-neutral); }
.me-card .btn { margin-top: var(--space-16); }
/* 문서함 — ListCell (48 · Body 1 medium · 캡션 Label 1 regular) */
.docs { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; }
.docs li { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: var(--space-12) 0; box-shadow: inset 0 -1px 0 var(--line-normal-alternative);
  font-size: 16px; line-height: 24px; font-weight: 500; color: var(--label-assistive); }
.docs li:last-child { box-shadow: none; }
.docs li.ready { color: var(--label-normal); }
.docs li a { color: var(--primary-normal); }
.docs small { font-size: 14px; line-height: 20px; color: var(--label-alternative); font-weight: 400; }
.me-tip { margin-top: var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; justify-content: space-between;
  background: var(--background-normal); border-radius: var(--radius-16); padding: var(--space-16) var(--space-20); font-size: 14px; line-height: 20px; color: var(--label-alternative); box-shadow: var(--cf-card); }
.me-tip b { display: block; color: var(--label-normal); font-size: 15px; }
@media (min-width: 760px) { .me-grid { grid-template-columns: 1.3fr 1fr; } }

/* 간편 로그인 버튼 — 서비스마다 정해진 색(브랜드 규정). 모양은 Button large(48 · r12) */
.social-btns { display: grid; gap: var(--space-8); }
.sb-ico { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-right: var(--space-2); }
.btn.sb-kakao { background: #FEE500; color: #191919; }
.sb-kakao .sb-ico { background: #191919; }
.btn.sb-naver { background: #03C75A; color: #fff; }
.sb-naver .sb-ico::before { content: "N"; color: #fff; }
.btn.sb-google { background: #fff; color: #1F1F1F; box-shadow: inset 0 0 0 1px #747775; }
.sb-google .sb-ico::before { content: "G"; color: #4285F4; }
.sb-badge { width: 64px; height: 64px; border-radius: var(--radius-20); display: grid; place-items: center; margin: 0 auto var(--space-16); }
.sb-badge.sb-kakao { background: #FEE500; } .sb-badge.sb-naver { background: #03C75A; } .sb-badge.sb-google { background: #fff; box-shadow: inset 0 0 0 1px #747775; }
.sb-badge .sb-ico { width: 28px; height: 28px; font-size: 16px; }
.me-tip .social-btns { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); width: 100%; }
.me-tip .btn.sb { height: 40px; border-radius: var(--radius-10); font-size: 15px; }
.me-pw { margin-top: var(--space-12); background: var(--background-normal); border-radius: var(--radius-16); padding: var(--space-16) var(--space-20); box-shadow: var(--cf-card); font-size: 14px; }
.me-pw summary { cursor: pointer; color: var(--label-alternative); }
.me-pw summary b { color: var(--label-normal); margin-right: var(--space-6); }
.me-pw form { margin-top: var(--space-12); max-width: 420px; }

/* 최초 상담 신청서 · 바로 시작 */
.apply { width: 100%; max-width: 640px; display: grid; gap: var(--space-12); }
.ap-head { background: var(--background-normal); border-radius: var(--radius-20); box-shadow: var(--cf-card); padding: var(--space-28) var(--space-24); }
.ap-head h1 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.023em; margin: var(--space-12) 0; }
.ap-desc { display: grid; gap: var(--space-8); color: var(--label-neutral); font-size: 15px; line-height: 24px; }
.ap-steps { margin-top: var(--space-16); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--label-neutral); background: var(--fill-alternative); border-radius: var(--radius-10); padding: var(--space-8) var(--space-12); }
.ap-steps b { color: var(--primary-normal); margin: 0 var(--space-4); }
.ap-sec { background: var(--background-normal); border-radius: var(--radius-20); box-shadow: var(--cf-card); padding: var(--space-20); border: 0; margin: 0; display: grid; gap: var(--space-16); }
.ap-sec legend { float: left; width: 100%; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--label-strong); padding: 0; margin-bottom: var(--space-4); }
.ap-sec legend small { font-size: 13px; font-weight: 500; color: var(--label-alternative); margin-left: var(--space-4); }
/* TextField 제목: Label 1 bold · label-neutral */
.ap-field { display: grid; gap: var(--space-8); }
.ap-field > span { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .0145em; color: var(--label-neutral); }
/* 신청서 선택지 — FramedStyle(r14 · 1px line-normal-neutral · shadow-xsmall · 선택 시 2px primary 43%) + Radio */
.ap-options { display: grid; gap: var(--space-8); }
.ap-opt { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-12) var(--space-16); border-radius: 14px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-normal-neutral), var(--shadow-xsmall); font-size: 15px; line-height: 22px; color: var(--label-normal); background: var(--background-normal); }
.ap-opt:hover { background: color-mix(in srgb, var(--background-normal), var(--label-normal) 4%); }
.ap-opt input { margin-top: 1px; }
.ap-opt:has(input:checked) { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-normal) 43%, transparent), var(--shadow-xsmall); }
.ap-consent ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 22px; color: var(--label-neutral); display: grid; gap: var(--space-4); }
.ap-errs { margin: 0; }
.ap-submit { width: 100%; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
main.notice:has(.apply) { align-items: start; }

/* 설문 문항이 강조될 때: 제목을 상자 안으로, 안쪽 여백 */
.survey .q legend { float: left; width: 100%; }
.survey .q .chips, .survey .q textarea, .survey .q .hint { clear: both; }
.survey .q.invalid, .survey .q.spot { padding: var(--space-16); margin-left: calc(-1 * var(--space-16)); margin-right: calc(-1 * var(--space-16)); }
.done-cta { margin: var(--space-20) 0 var(--space-6); padding: var(--space-16); border-radius: var(--radius-16); background: var(--cr-primary-soft); display: grid; gap: var(--space-12); text-align: left; }
.done-cta p { font-size: 15px; line-height: 22px; }
.apply .known { margin: calc(-1 * var(--space-6)) 0 var(--space-4); }
.q .other { margin-top: var(--space-8); }
.forgot { margin-top: var(--space-16); text-align: left; }
.forgot summary { cursor: pointer; font-size: 14px; color: var(--label-alternative); text-decoration: underline; text-align: center; list-style: none; }
.forgot summary::-webkit-details-marker { display: none; }
.forgot .fine { margin: var(--space-8) 0; }
.pw-sec { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-normal-neutral); padding: var(--space-12) var(--space-16); margin: 0; display: grid; gap: var(--space-8); text-align: left; }
.pw-sec legend { font-size: 15px; font-weight: 600; color: var(--label-normal); padding: 0 var(--space-4); }
.pw-sec legend small { font-weight: 500; color: var(--label-alternative); font-size: 13px; margin-left: var(--space-4); }
.apply .pw-sec { box-shadow: var(--cf-card); padding: var(--space-20); }
.join-btns .pw-sec { margin: var(--space-4) 0 0; }
.join-btns .pw-sec[hidden] { display: none; }

/* 설문 첫머리 */
.sv-intro h1 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.023em; margin: var(--space-6) 0 var(--space-12); }
.sv-intro .lead { font-size: 16px; line-height: 26px; color: var(--label-neutral); }
.sv-howto { list-style: none; padding: 0; margin: var(--space-20) 0 var(--space-32); display: grid; gap: var(--space-8); }
.sv-howto li { background: var(--background-normal); border-radius: var(--radius-12); padding: var(--space-16); box-shadow: var(--cf-card); font-size: 14px; line-height: 20px; color: var(--label-alternative); }
.sv-howto b { display: block; color: var(--label-normal); font-size: 16px; line-height: 24px; font-weight: 600; margin-bottom: var(--space-2); }
.sv-intro-h { font-size: 20px; line-height: 28px; font-weight: 600; margin: var(--space-8) 0 var(--space-16); }
.sv-intro .sv-nav { margin-top: var(--space-28); }
@media (min-width: 900px) { .sv-howto { grid-template-columns: 1fr 1fr; } }

/* 대화 카드 · 개수 표시(PushBadge number) */
.me-chat { margin-top: var(--space-12); display: flex; gap: var(--space-12); align-items: center; justify-content: space-between; color: inherit; }
.me-chat p { font-size: 14px; color: var(--label-alternative); margin-top: var(--space-4); }
.me-chat .eyebrow { margin: 0; }
.me-chat .btn { flex: none; margin: 0; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--status-negative); color: var(--static-white); font-size: 11px; line-height: 14px; font-weight: 600; }
.chat-page h1 { font-size: 24px; line-height: 32px; font-weight: 700; margin: var(--space-6) 0; }
.chat-page .eyebrow a { color: var(--label-alternative); font-size: 14px; }
.chat-card { margin-top: var(--space-16); }
.me-card .eyebrow, .me-chat .eyebrow { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--primary-normal); }