/* ==========================================================================
   청연 — Scroll Edition · 하위 페이지 공용 레이어
   (css/chungyeon-scroll.css 뒤에 로드)
   ========================================================================== */

body.subpage main{padding-top:74px;}
section.band-sm{padding:clamp(64px,9vw,116px) 0; position:relative;}

/* ---------- typographic page hero ---------- */
.page-hero{padding:clamp(76px,10vw,140px) 0 0; position:relative; overflow:clip;}
.page-hero .ghost{position:absolute; right:-5vw; top:-10%; font-family:var(--serif); font-weight:600;
  font-size:clamp(170px,23vw,360px); line-height:1; color:var(--ink); opacity:.04;
  pointer-events:none; user-select:none; will-change:transform;}
.page-hero .eyebrow{margin-bottom:24px;}
.page-hero h1{font-size:clamp(33px,5.2vw,64px); font-weight:600; line-height:1.3; max-width:24ch; position:relative;}
.page-hero .lede{margin-top:26px; font-size:clamp(16px,1.8vw,19px); line-height:2; color:var(--muted); max-width:66ch;}
.page-hero .lede strong{color:var(--text-strong);}
.page-hero .rule{margin-top:clamp(44px,6vw,72px); height:1px; background:var(--border);}

/* ---------- signal list (hairline editorial rows) ---------- */
.sig-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(30px,4vw,60px); border-bottom:1px solid var(--border);}
.sig{position:relative; display:flex; gap:18px; padding:clamp(22px,3vw,30px) 0; border-top:1px solid var(--border); align-items:flex-start;}
.sig::before{content:""; position:absolute; top:-1px; left:0; height:1px; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform 1.4s cubic-bezier(.22,.61,.36,1) .1s;}
.sig.in::before{transform:scaleX(1);}
.sig .ic{width:44px; height:44px; border-radius:12px; background:var(--accent-tint); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.sig .ic svg{width:22px; height:22px;}
.sig p{font-size:15.5px; line-height:1.8; color:var(--text); margin-top:7px;}
@media(max-width:760px){.sig-grid{grid-template-columns:1fr;}}

/* ---------- comparison cards ---------- */
.compare{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;}
.cmp{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:34px 28px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease;}
.cmp:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.cmp.pick{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow);}
.cmp .hd{text-align:center; padding-bottom:10px; border-bottom:1px solid var(--border-soft); margin-bottom:14px;}
.cmp .emo{font-size:38px; line-height:1.3; display:block;}
.cmp .hd h3{font-size:20px; margin-top:10px;}
.cmp h4{font-family:var(--sans); font-size:11.5px; font-weight:700; color:var(--accent); letter-spacing:.12em;
  margin:16px 0 6px; text-transform:uppercase;}
.cmp p{font-size:14px; color:var(--muted); line-height:1.78;}
@media(max-width:860px){.compare{grid-template-columns:1fr;}}

/* ---------- 3-value cards ---------- */
.val3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.val{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:38px 28px;
  box-shadow:var(--shadow-sm); text-align:center; transition:transform .35s ease, box-shadow .35s ease;}
.val:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.val .ic{width:56px; height:56px; margin:0 auto 18px; border-radius:16px; background:var(--accent-tint);
  color:var(--accent); display:flex; align-items:center; justify-content:center;}
.val .ic svg{width:26px; height:26px;}
.val .emo{font-size:40px; line-height:1.2; display:block; margin-bottom:12px;}
.val h3{font-size:19px; line-height:1.5;}
.val .cap{color:var(--accent); font-weight:600; font-size:13.5px; margin-top:6px;}
.val p{margin-top:12px; font-size:14px; color:var(--muted); line-height:1.85; text-align:left;}
.val p.center{text-align:center;}
@media(max-width:860px){.val3{grid-template-columns:1fr;}}
@media(min-width:861px) and (max-width:1080px){.val3{gap:16px;}}

/* 4-up variant */
.val4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.val4 .val{padding:30px 22px;}
@media(max-width:980px){.val4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.val4{grid-template-columns:1fr;}}

/* ---------- surface panel ---------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(28px,4.5vw,56px); box-shadow:var(--shadow-sm);}
.panel + .panel{margin-top:26px;}
.panel h3.pt{display:flex; align-items:center; gap:12px; font-size:clamp(19px,2vw,23px);}
.panel h3.pt svg{width:22px; height:22px; color:var(--accent); flex-shrink:0;}
.panel .pb{margin-top:14px; font-size:15.5px; line-height:1.95; color:var(--text);}

/* ---------- notes / callouts ---------- */
.note{background:var(--accent-tint); border-radius:var(--radius-sm); padding:18px 24px;
  font-size:14.5px; color:var(--text); line-height:1.9;}
.note.center{text-align:center;}
.note strong{color:var(--brand);}
.note-line{border-left:3px solid var(--accent); background:var(--surface-warm);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:16px 22px;
  font-size:14px; line-height:1.9; color:var(--text);}
.note-line strong{color:var(--accent);}

/* ---------- check lists ---------- */
.checks{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.checks li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.8; color:var(--text);}
.checks li svg{width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:5px;}
.checks strong{color:var(--text-strong);}
.checks .sm{font-size:13px; color:var(--muted); display:block; margin-top:3px;}

/* ---------- two-column guide ---------- */
.guide{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,60px); align-items:start;}
.guide h3{display:flex; align-items:center; gap:12px; font-size:20px;}
.guide h3 svg{width:22px; height:22px; color:var(--accent); flex-shrink:0;}
.guide p{margin-top:14px; font-size:15px; line-height:2; color:var(--text);}
.guide strong{color:var(--text-strong);}
@media(max-width:760px){.guide{grid-template-columns:1fr;}}

/* ---------- stats trio ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); text-align:center;}
.stat .k{font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.08em;}
.stat .v{font-family:var(--serif); font-size:clamp(25px,3vw,38px); color:var(--brand); font-weight:600;
  margin-top:12px; line-height:1.25; font-variant-numeric:tabular-nums;}
.stat .v b{color:var(--accent); font-weight:600;}
.stat .s{font-size:13px; color:var(--muted); margin-top:8px;}
@media(max-width:720px){.stats{grid-template-columns:1fr; gap:26px;}}

/* ---------- mini profile cards ---------- */
.minis{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:840px; margin:0 auto;}
.mini{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:38px 30px; box-shadow:var(--shadow-sm); text-align:center;}
.mini img{width:118px; height:118px; border-radius:50%; object-fit:cover; object-position:center top;
  margin:0 auto 18px; border:4px solid var(--surface); box-shadow:var(--shadow-sm);}
.mini h3{font-size:24px; letter-spacing:.08em;}
.mini .role{color:var(--accent); font-weight:600; font-size:14px; margin-top:7px;}
.mini .cert2{font-size:13px; color:var(--muted); margin-top:9px;}
.mini .certline{font-size:13.5px; font-weight:700; color:var(--text-strong); margin-top:10px; line-height:1.7;}
.mini .p-more{margin-top:18px; justify-content:center;}
.mini .box{text-align:left; background:var(--surface-warm); border:1px solid var(--border-soft);
  border-radius:var(--radius-sm); padding:20px 22px; margin-top:20px;}
.mini .box h4{font-family:var(--sans); font-size:11.5px; color:var(--accent); letter-spacing:.14em;
  font-weight:700; margin:0 0 12px; text-transform:uppercase;}
.mini .box ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.mini .box li{display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.65; color:var(--text);}
.mini .box li svg{width:15px; height:15px; color:var(--accent); flex-shrink:0; margin-top:3px;}
.mini.wide{max-width:640px; margin:0 auto;}
@media(max-width:700px){.minis{grid-template-columns:1fr;}}

/* ---------- image figure ---------- */
.tool-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,4.5vw,60px); align-items:center;}
.tool-fig{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin:0;}
.tool-fig img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;}
@media(max-width:820px){.tool-grid{grid-template-columns:1fr;}}

/* ---------- final CTA ---------- */
.cta-final{text-align:center; max-width:780px; margin:0 auto;}
.cta-final h2{font-size:clamp(26px,4vw,46px); line-height:1.4;}
.cta-final > p{margin-top:20px; font-size:17px; color:var(--muted); line-height:2;}
.cta-row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px; margin-top:36px;}
.tel-link{font-weight:600; color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;}
.tel-link:hover{color:var(--brand);}
.chan-btns{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:32px;}
.chan-btn{display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px 26px; font-weight:600; font-size:15px; color:var(--text-strong);
  min-width:172px; justify-content:center; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.chan-btn:hover{transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow);}
.chan-btn svg{width:18px; height:18px; flex-shrink:0;}
@media(max-width:560px){.chan-btn{width:100%;} .cta-row .btn{width:100%;}}

/* ---------- 유틸 (Tailwind 제거 후 JS가 토글하는 클래스) ---------- */
.hidden{display:none !important;}

/* ---------- 정부지원 안내: 진단 퀴즈 ---------- */
.quiz-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:clamp(26px,4vw,44px); text-align:left;}
.quiz-card h3{font-size:clamp(18px,2.2vw,22px); line-height:1.5; font-weight:600;}
.quiz-card h3 .qn{color:var(--accent); margin-right:6px;}
.quiz-card .hint{margin-top:10px; font-size:14px; color:var(--muted); line-height:1.75;}
.quiz-card .hint-list{margin:10px 0 0; padding-left:18px; font-size:14px; color:var(--muted); line-height:1.85;}
.quiz-card .hint-list strong{color:var(--text-strong);}
.quiz-opts{display:grid; gap:11px; margin-top:24px;}
.quiz-opt{display:block; width:100%; text-align:left; font-family:var(--sans); font-size:16px;
  color:var(--text); background:var(--surface-warm); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:16px 20px; cursor:pointer;
  transition:background .25s, border-color .25s, transform .25s;}
.quiz-opt:hover{background:var(--accent-tint); border-color:var(--accent-soft); transform:translateX(3px);}
.quiz-start{width:100%; margin-top:24px;}

/* 결과 블록 */
.res-h{font-size:clamp(19px,2.4vw,24px); font-weight:600; text-align:center; color:var(--ink); margin-bottom:8px;}
.res-lead{text-align:center; color:var(--muted); font-size:15.5px; line-height:1.9; margin-top:12px;}
.res-box{margin-top:18px; padding:24px 26px; border-radius:var(--radius-sm);
  background:var(--surface-warm); border:1px solid var(--border-soft);}
.res-box.accent{background:var(--accent-tint); border-color:var(--accent-soft);}
.res-box.good{background:color-mix(in srgb, var(--accent-tint) 55%, var(--surface)); border-color:var(--accent-soft);}
.res-box .step{display:block; font-size:16px; font-weight:700; color:var(--text-strong);}
.res-box .key{margin-top:8px; font-size:17px; font-weight:700; color:var(--accent);}
.res-box p{margin-top:10px; font-size:14.5px; line-height:1.85; color:var(--text);}
.res-box p.sm{font-size:13.5px; color:var(--muted);}
.res-box .warn{color:#B3261E; font-weight:700;}
.linkgrid{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:16px;}
.linkgrid a{display:block; text-align:center; font-size:13.5px; padding:11px 12px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); transition:background .2s, border-color .2s;}
.linkgrid a:hover{background:var(--accent-tint); border-color:var(--accent-soft);}
@media(max-width:560px){.linkgrid{grid-template-columns:1fr;}}

/* 비용 계산기 */
.cost-field{margin-top:16px;}
.cost-field select{width:100%; font-family:var(--sans); font-size:14.5px; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text);}
.cost-note{font-size:12.5px; color:var(--muted); margin-top:7px; text-align:right;}
.grade-opts{display:grid; gap:9px; margin-top:11px;}
.grade-opt{display:flex; align-items:center; gap:12px; padding:13px 16px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; font-size:15px;
  transition:background .2s, border-color .2s;}
.grade-opt:hover{background:var(--accent-tint); border-color:var(--accent-soft);}
.cost-out{margin-top:16px;}
.cost-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:20px 22px; text-align:left;}
.cost-card .ct{font-size:13px; font-weight:700; color:var(--accent); letter-spacing:.1em; text-transform:uppercase;}
.cost-card p{margin-top:9px; font-size:15px; color:var(--text);}
.cost-card .big{font-size:19px; font-weight:700; color:var(--ink);}
.cost-card .gov{font-weight:600; color:var(--accent);}
.cost-card .sep{margin-top:18px; padding-top:18px; border-top:1px solid var(--border-soft);}
.cost-err{font-size:14px; font-weight:600; color:#B3261E;}

/* 아코디언 */
.acc{margin-top:36px; border-top:1px solid var(--border); padding-top:28px;}
.acc-btn{display:flex; width:100%; justify-content:space-between; align-items:center; gap:14px;
  background:none; border:none; cursor:pointer; font-family:var(--sans); font-size:15.5px; font-weight:600;
  color:var(--text); padding:6px 0; transition:color .25s; text-align:left;}
.acc-btn:hover{color:var(--ink);}
.acc-btn svg{width:19px; height:19px; flex-shrink:0; transition:transform .3s ease;}
.acc-btn.open svg{transform:rotate(180deg);}
.acc-body{max-height:0; overflow:hidden; opacity:0; padding:0 clamp(20px,3vw,28px);
  background:var(--surface-warm); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  margin-top:16px; text-align:left;
  transition:max-height .6s ease, padding .4s ease, opacity .4s ease;}
.acc-body.open{max-height:5000px; opacity:1; padding:clamp(24px,3.5vw,32px) clamp(20px,3vw,28px);}
.acc-sec + .acc-sec{margin-top:26px;}
.acc-sec h4{font-size:16px; font-weight:700; color:var(--ink); margin:0 0 10px;}
.acc-sec h5{font-size:14.5px; font-weight:700; color:var(--text-strong); margin:18px 0 10px;}
.acc-sec p{font-size:14.5px; line-height:1.9; color:var(--text);}
.acc-sec p.sm{font-size:12.5px; color:var(--muted);}
.acc-sec ul, .acc-sec ol{margin:10px 0 0; padding-left:20px; font-size:14.5px; line-height:1.9; color:var(--text);}
.acc-sec li{margin-bottom:6px;}
.acc-sec strong{color:var(--text-strong);}
.acc-sec .warn{color:#B3261E; font-weight:700;}
.tbl-scroll{overflow-x:auto; margin-top:12px;}
.tbl-scroll table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px;}
.tbl-scroll th, .tbl-scroll td{border:1px solid var(--border); padding:10px 12px; text-align:center;}
.tbl-scroll th{background:var(--accent-tint); color:var(--text-strong); font-weight:700;}
.tbl-scroll td strong{color:var(--ink);}

/* 툴팁 */
.tooltip-container{position:relative; display:inline-flex; align-items:center;}
.tooltip-trigger{width:19px; height:19px; border-radius:50%; background:var(--accent-soft);
  color:var(--brand); font-size:12px; font-weight:700; margin-left:8px; cursor:pointer; border:none;
  display:inline-flex; justify-content:center; align-items:center; flex-shrink:0;}
.tooltip-content{visibility:hidden; opacity:0; position:absolute; bottom:130%; left:50%;
  transform:translateX(-50%); background:var(--brand); color:#fff; padding:14px 16px;
  border-radius:var(--radius-sm); width:min(300px,72vw); z-index:20; transition:opacity .3s;
  font-size:13px; line-height:1.7; text-align:left; box-shadow:var(--shadow);}
.tooltip-content::after{content:""; position:absolute; top:100%; left:50%; margin-left:-5px;
  border-width:5px; border-style:solid; border-color:var(--brand) transparent transparent transparent;}
.tooltip-content.visible{visibility:visible; opacity:1;}
.tooltip-content p{font-weight:700; margin-bottom:8px;}
.tooltip-content ul{list-style:disc; padding-left:18px; margin:0;}

/* ---------- 상담사 프로필 페이지 ---------- */
.prof-wrap{display:grid; grid-template-columns:.62fr 1.38fr; gap:clamp(36px,5vw,76px); align-items:start;}
.prof-side{position:sticky; top:96px;}
.prof-photo{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:3/3.4;}
.prof-photo img{width:100%; height:100%; object-fit:cover; object-position:center top;}
.prof-side .cert{margin-top:24px;}
.prof-side .pitch{font-size:clamp(17px,1.8vw,19px); margin-top:16px;}
.prof-body{display:grid; gap:clamp(30px,4vw,46px);}
.prof-sec h3{font-size:12.5px; font-weight:700; color:var(--accent); letter-spacing:.16em;
  font-family:var(--sans); text-transform:uppercase; margin:0 0 16px; padding-bottom:12px;
  border-bottom:1px solid var(--border);}
.prof-sec .tlist{font-size:15px;}
.prof-sec .tlist li{margin-bottom:13px;}
.prof-sec .paper{font-size:14px; line-height:1.75; color:var(--muted);}
.back-link{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  color:var(--muted); transition:color .25s; margin-bottom:clamp(28px,4vw,44px);}
.back-link svg{width:15px; height:15px; transition:transform .25s;}
.back-link:hover{color:var(--ink);}
.back-link:hover svg{transform:translateX(-4px);}
@media(max-width:860px){
  .prof-wrap{grid-template-columns:1fr; gap:38px;}
  .prof-side{position:static; max-width:300px;}
}

/* ---------- 장문 산문 블록 (approach 페이지) ---------- */
.prose{max-width:68ch;}
.prose p{margin-top:22px; font-size:17px; line-height:2.05; color:var(--text);}
.prose p:first-child{margin-top:0;}
.prose p.lead{font-size:19px; line-height:1.95; color:var(--text-strong); font-weight:500;}
.prose strong{color:var(--text-strong); font-weight:700;}
.prose .hanja-line{margin-top:26px; font-family:var(--serif); font-size:19px; color:var(--accent);}
.sec-head .num{font-family:var(--serif); font-size:14px; font-weight:600; color:var(--accent);
  letter-spacing:.2em; display:block; margin-bottom:14px;}
@media(max-width:600px){.prose p{font-size:16px; line-height:1.95;} .prose p.lead{font-size:17.5px;}}

/* ---------- misc ---------- */
.mt-note{margin-top:30px;}
.center-narrow{max-width:900px; margin:0 auto;}
.sec-head .sub{margin-top:12px; font-size:16px; color:var(--muted);}
ol.plist{margin:14px 0 0; padding:0 0 0 2px; list-style:none; display:grid; gap:11px; counter-reset:pl;}
ol.plist li{counter-increment:pl; display:flex; gap:12px; font-size:15px; line-height:1.8; color:var(--text);}
ol.plist li::before{content:counter(pl); font-family:var(--serif); font-weight:600; color:var(--accent);
  width:24px; height:24px; border:1px solid var(--accent-soft); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; flex-shrink:0; margin-top:3px;}
ol.plist strong{color:var(--text-strong);}