/* ============================================================
   3Q DESIGN SYSTEM v1 — "Premium Wellness Editorial"
   감정 목표: 신뢰(포레스트) · 안정(크림) · 프리미엄(골드) · 설렘(세리프)
   ------------------------------------------------------------
   [DS-0] tokens        색·타이포·간격·라운드·그림자
   [DS-1] base          문서 기본
   [DS-2] hero          첫인상(Visceral)
   [DS-3] nav/tabs      탐색(Behavioral)
   [DS-4] section       섹션 헤더·스텝
   [DS-5] callout       내답변/피드백/구체화/장점/약점/전략
   [DS-6] card          경쟁업체 카드·Q칩
   [DS-7] action        실행 리스트(체크·진행률)
   [DS-8] a11y/motion   접근성·반응형
   ============================================================ */

/* [DS-0] tokens */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@600;900&display=swap');
:root{
  /* color */
  --cream:#f8f4eb; --paper:#fffdf7; --ink:#241d12; --ink-soft:#5d5140; --muted:#84765f;
  --forest:#1f4d3a; --forest-2:#2d6a50; --forest-deep:#132f22; --forest-tint:#e6eee7;
  --gold:#b18539; --gold-deep:#8a6524; --gold-soft:#ecdcb4; --gold-tint:#f7eed7;
  --line:#e9dfca; --line-2:#d9cbae;
  --mine-bg:#f2ecdc; --mine-b:#ddd1b4; --mine-d:#6f6046;
  --fb-bg:#faf1d9;  --fb-b:#e6ca87;  --fb-d:#7c5a14;
  --act-bg:#eaf1fa; --act-b:#b3cbea; --act-d:#28517f; --fix:#1d55a8;
  --pro-bg:#e7efe8; --pro-b:#a5c8b1; --pro-d:#1e5540;
  --con-bg:#f8ece7; --con-b:#e2b8a9; --con-d:#8f3d2a;
  /* type */
  --serif:"Noto Serif KR","Apple Myungjo","Nanum Myeongjo",serif;
  --sans:"Apple SD Gothic Neo","Pretendard","Noto Sans KR",system-ui,sans-serif;
  /* radius / shadow */
  --r-sm:10px; --r-md:16px; --r-lg:24px;
  --sh-1:0 1px 2px rgba(72,56,28,.05),0 10px 30px rgba(72,56,28,.07);
  --sh-2:0 2px 6px rgba(72,56,28,.08),0 18px 44px rgba(72,56,28,.12);
}

/* [DS-1] base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);line-height:1.85;letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;background:
  radial-gradient(1200px 520px at 108% -12%,#efe4c9 0,transparent 55%),
  radial-gradient(900px 480px at -12% 4%,#e3ece2 0,transparent 52%),var(--cream)}
.wrap{max-width:800px;margin:0 auto;padding:0 20px 120px}
::selection{background:var(--gold-soft)}

/* [DS-2] hero — Visceral: 세리프 디스플레이 + 골드 룰 + 여백 */
header.hero{max-width:800px;margin:0 auto;padding:64px 20px 8px}
.kick{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:800;
  letter-spacing:.22em;color:var(--gold-deep);text-transform:uppercase}
.kick::before{content:"";width:26px;height:2px;background:var(--gold)}
h1{font-family:var(--serif);font-weight:900;font-size:clamp(2.5rem,6.4vw,3.7rem);
  line-height:1.12;letter-spacing:-.02em;margin:.35em 0 .2em}
h1 .u{background:linear-gradient(transparent 68%,var(--gold-soft) 68%)}
.sub{color:var(--ink-soft);font-size:1.06rem;font-weight:600;line-height:1.7;margin:4px 0 22px;max-width:46ch}

/* [DS-3] nav — Behavioral: 세그먼트 탭 */
nav{position:sticky;top:0;z-index:30;background:rgba(248,244,235,.88);
  backdrop-filter:blur(14px);margin-top:20px}
nav .in{max-width:800px;margin:0 auto;padding:11px 18px;display:flex;gap:8px;overflow-x:auto;
  -webkit-overflow-scrolling:touch}
nav a{white-space:nowrap;font-weight:800;font-size:.95rem;text-decoration:none;color:var(--ink-soft);
  border:1.5px solid var(--line-2);background:var(--paper);padding:10px 18px;border-radius:999px;
  transition:color .15s,border .15s,background .2s,transform .15s}
nav a:hover{border-color:var(--forest);color:var(--forest);transform:translateY(-1px)}
nav a.on{background:linear-gradient(135deg,var(--forest),var(--forest-2));color:#fff;
  border-color:transparent;box-shadow:0 8px 18px rgba(31,77,58,.25)}
.tabhint{max-width:800px;margin:2px auto 0;padding:0 18px;display:flex;justify-content:flex-start;
  transition:opacity .3s ease,transform .3s ease}
.tabhint.hidden{opacity:0;transform:translateY(-6px);pointer-events:none}
.tabhint-bubble{position:relative;margin-left:14px;margin-top:9px;
  background:linear-gradient(135deg,var(--forest),var(--forest-2));color:#fff;
  font-size:.84rem;font-weight:800;padding:9px 16px;border-radius:14px;
  box-shadow:0 10px 22px rgba(31,77,58,.28);animation:hintNudge 1.6s ease-in-out infinite}
.tabhint-bubble::before{content:"";position:absolute;top:-7px;left:26px;
  border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid var(--forest)}
@keyframes hintNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.tabhint-bubble{animation:none}}
nav a .cnt{font-size:.72rem;font-weight:800;background:rgba(0,0,0,.07);padding:2px 8px;
  border-radius:999px;margin-left:6px}
nav a.on .cnt{background:rgba(255,255,255,.26);color:#fff}

/* [DS-4] section */
section{margin-top:56px}
.qtitle{display:flex;align-items:center;gap:16px}
.qtitle .n{flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-weight:900;font-size:1.45rem;color:var(--forest);
  background:var(--paper);border:1.5px solid var(--gold);box-shadow:var(--sh-1)}
.qtitle h2{font-family:var(--serif);font-weight:900;font-size:2rem;margin:0;letter-spacing:-.02em}
.qtitle .en{display:block;color:var(--muted);font-weight:700;font-size:.8rem;letter-spacing:.06em;margin-top:3px}
.qrule{height:1px;background:linear-gradient(90deg,var(--gold) 0,var(--line) 55%,transparent);margin:16px 0 4px}
.step{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:900;
  color:var(--forest);background:var(--forest-tint);border:1px solid #cfe0d4;
  padding:8px 16px;border-radius:999px;margin:36px 0 8px;letter-spacing:.02em}
.stepnote{display:block;margin:0 0 16px;padding-left:2px;font-size:.88rem;line-height:1.6;color:var(--ink-soft)}

/* [DS-4b] stepbox — 스텝별 접기/펼치기 토글 */
.stepbox{margin:0}
.stepbox summary.step{cursor:pointer;user-select:none;list-style:none;transition:background .15s,border-color .15s}
.stepbox summary.step::-webkit-details-marker{display:none}
.stepbox summary.step::marker{content:""}
.stepbox summary.step:hover{background:#dcebe0;border-color:var(--forest-2)}
.stepbox summary.step:focus-visible{outline:2px solid var(--forest-2);outline-offset:2px}
.stepchevron{display:inline-block;font-size:.72em;color:var(--forest-2);transition:transform .2s var(--ease-out-expo,ease)}
.stepbox[open] summary.step{border-radius:16px 16px 0 0}
.stepbox[open] .stepchevron{transform:rotate(90deg)}
.stepcount{display:none;margin-left:6px;font-size:.72rem;font-weight:800;color:var(--gold-deep);
  background:var(--gold-tint);border:1px solid var(--gold-soft);padding:2px 8px;border-radius:99px;vertical-align:middle}
.stepcount.show{display:inline-block}
.stepcount.done{color:var(--pro-d);background:var(--pro-bg);border-color:var(--pro-b)}
.stepbox .stepnote{margin-top:10px}
.stepbox[open] > *:not(summary){animation:stepReveal .25s ease}
@keyframes stepReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.stephint{position:relative;display:inline-flex;align-items:center;margin:6px 0 3px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;
  font-size:.82rem;font-weight:800;padding:9px 16px;border-radius:14px;
  box-shadow:0 10px 22px rgba(138,101,36,.28);animation:stephintNudge 1.6s ease-in-out infinite;
  transition:opacity .3s,max-height .3s,margin .3s;overflow:visible}
.stephint::after{content:"";position:absolute;bottom:-6px;left:26px;
  border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--gold-deep)}
.stephint.hidden{opacity:0;max-height:0;margin:0;padding:0;box-shadow:none}
@keyframes stephintNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.stephint{animation:none}}
.niche{background:rgba(255,255,255,.6);border:1px solid var(--fb-b);border-radius:12px;
  padding:13px 15px;margin:12px 0}
.niche .nt{display:block;font-weight:900;color:var(--fb-d);margin-bottom:6px;font-size:.92rem;word-break:keep-all}
.nichegrid{display:grid;gap:10px;margin:12px 0;grid-template-columns:1fr 1fr}
.nichegrid .niche{margin:0}
.exlab{font-style:normal;font-weight:800;font-size:.68rem;color:var(--muted);background:rgba(0,0,0,.06);
  padding:2px 8px;border-radius:99px;margin-left:4px;vertical-align:middle}
.writebox{position:relative;margin:10px 0 34px;background:linear-gradient(160deg,var(--mine-bg),var(--paper) 70%);
  border:1px solid var(--mine-b);border-left:4px solid var(--gold);border-radius:4px 14px 14px 4px;
  padding:15px 17px 16px;box-shadow:var(--sh-1);transition:box-shadow .2s,transform .2s}
.writebox:focus-within{box-shadow:var(--sh-2);transform:translateY(-1px)}
.writebox .wlabel{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px;font-weight:800;font-size:.88rem;color:var(--mine-d);margin-bottom:3px}
.writebox .wlabel .wico{flex:0 0 auto}
.writebox .wsub{display:block;margin:0 0 6px;font-size:.74rem;font-weight:600;color:var(--muted)}
.vdemo{margin:0 0 12px;padding:0}
.vdemo-cap{font-size:.76rem;font-weight:800;color:var(--forest);margin:0 0 6px}
.vdemo video{display:block;width:100%;max-width:420px;border-radius:12px;border:1px solid var(--line);
  box-shadow:var(--sh-1);background:var(--fb-bg)}
.writebox .wguide{display:block;margin:0 0 10px;padding:7px 11px;font-size:.8rem;font-weight:700;line-height:1.55;
  color:var(--act-d);background:var(--act-bg);border:1px solid var(--act-b);border-radius:9px}
.writebox .wguide b{font-weight:900}
/* 원시인 테스트: 적는 칸 바로 위에 큰 버튼 2개 + 흐름 안내 */
.whow{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  margin:2px 0 7px;font-size:.8rem;font-weight:800;color:var(--mine-d);text-align:center;line-height:1.4}
.whow .num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  background:var(--gold);color:#fff;border-radius:50%;font-size:.68rem;font-weight:900;flex:0 0 auto}
.whow .arw{color:var(--muted);font-weight:900}
.wtools{display:flex;gap:8px;margin:0 0 9px}
.wtools button{flex:1 1 0;font-family:inherit;font-size:.9rem;font-weight:800;cursor:pointer;
  border:1.5px solid var(--line-2);background:#fffdf9;color:var(--ink-soft);
  padding:13px 10px;min-height:50px;border-radius:13px;transition:all .15s;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;text-align:center}
.wtools button:active{transform:scale(.97)}
.wtools .wmic{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#fdecea 0%,#fbdfda 100%);border-color:#edaaa0;color:#a3352a;
  animation:micInvite 2.6s ease-in-out infinite}
.wtools .wmic::before{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);
  transform:skewX(-18deg);animation:micShine 3.6s ease-in-out infinite;pointer-events:none}
.wtools .wmic:hover{border-color:#c0392b;background:linear-gradient(135deg,#f9ded9,#f5ccc4)}
.wtools .wai{background:var(--gold-tint);border-color:var(--gold-soft);color:var(--gold-deep)}
.wtools .wai:hover{border-color:var(--gold)}
.wtools .wmic.rec{background:#c0392b;border-color:#c0392b;color:#fff;animation:micPulse 1.2s ease-in-out infinite}
.wtools .wmic.rec::before{display:none}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.4)}50%{box-shadow:0 0 0 8px rgba(192,57,43,0)}}
@keyframes micInvite{
  0%,100%{transform:scale(1);box-shadow:0 2px 8px rgba(192,57,43,.12),0 0 0 0 rgba(192,57,43,.26)}
  50%{transform:scale(1.028);box-shadow:0 5px 15px rgba(192,57,43,.22),0 0 0 6px rgba(192,57,43,0)}}
@keyframes micShine{0%{left:-60%}24%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){
  .wtools .wmic{animation:none}
  .wtools .wmic::before{display:none}}
.wtools .wai.busy{opacity:.55;pointer-events:none}
.wlisten{display:none;margin-top:8px;padding:8px 12px;font-size:.86rem;font-weight:600;line-height:1.5;
  color:#7c1d12;background:#fdecea;border:1px solid #f3c6bf;border-radius:9px}
.wlisten.show{display:block;animation:stepReveal .2s ease}
.writebox textarea{display:block;width:100%;min-height:56px;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-family:inherit;font-size:.95rem;color:var(--ink);background:#fffdf9;
  resize:none;overflow:hidden;line-height:1.65;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.writebox textarea:hover{border-color:var(--gold-soft)}
.writebox textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(47,106,82,.14)}
.writebox .wsaved{font-size:.72rem;font-weight:700;color:var(--forest);margin-top:6px;opacity:0;transition:opacity .4s}
.writebox .wsaved.show{opacity:1}
.wfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;min-height:18px}
.wundo{display:none;font-family:inherit;font-size:.72rem;font-weight:800;cursor:pointer;color:var(--fix);
  background:none;border:none;padding:0;text-decoration:underline;text-underline-offset:2px}
.wundo.show{display:inline}
.wmsg{font-size:.72rem;font-weight:700;color:var(--con-d);opacity:0;transition:opacity .3s}
.wmsg.show{opacity:1}
.wainote{display:block;margin:9px 0 0;font-size:.7rem;line-height:1.5;color:var(--muted)}
.wgroup{display:grid;gap:12px}
.wgroup .witem label{display:block;font-size:.82rem;font-weight:700;color:#6f6455;margin-bottom:5px}
.wgroup .witem textarea{min-height:40px}
.wprogress{max-width:800px;margin:14px auto 0;padding:0 20px;display:flex;align-items:center;gap:9px}
.wprogress-track{flex:1 1 auto;height:5px;background:rgba(0,0,0,.07);border-radius:99px;overflow:hidden;max-width:160px}
.wprogress-fill{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--forest-2));
  border-radius:99px;transition:width .4s var(--ease-out-expo,ease)}
.wprogress-text{font-size:.76rem;font-weight:800;color:var(--muted);letter-spacing:.01em}
.wexport{margin-left:auto;font-family:inherit;font-size:.72rem;font-weight:800;cursor:pointer;
  border:1px solid var(--line-2);background:#fffdf9;color:var(--ink-soft);padding:5px 11px;border-radius:99px;
  transition:all .15s;flex:0 0 auto;line-height:1}
.wexport:hover{border-color:var(--forest);color:var(--forest);transform:translateY(-1px)}
.wstore-note{max-width:800px;margin:8px auto 0;padding:0 20px;font-size:.72rem;line-height:1.55;color:var(--muted)}
.wstore-note b{color:var(--ink-soft);font-weight:800}
.cloudbadge{flex:0 0 auto;font-size:.72rem;font-weight:800;color:var(--pro-d);
  background:var(--pro-bg);border:1px solid var(--pro-b);padding:4px 10px;border-radius:99px;line-height:1;white-space:nowrap}
.cloudbadge.off{color:var(--con-d);background:var(--con-bg);border-color:var(--con-b)}
.wjump{margin-left:auto;flex:0 0 auto;font-family:inherit;font-size:.72rem;font-weight:800;cursor:pointer;
  color:var(--forest);background:var(--forest-tint);border:1px solid #cfe0d4;padding:5px 11px;border-radius:99px;
  line-height:1;white-space:nowrap;transition:all .15s}
.wjump:hover{background:#dcebe0;border-color:var(--forest-2);transform:translateY(-1px)}
.wjump:active{transform:scale(.96)}
.wjump.done{display:none}
.niche p{margin:8px 0 0;font-size:.92rem;line-height:1.68;word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty;letter-spacing:-.02em}
.niche p:first-of-type{margin-top:0}
.pair{background:rgba(255,255,255,.6);border:1px solid var(--fb-b);border-radius:12px;
  padding:12px 14px;margin:10px 0}
.pair .pb{display:block;margin-bottom:5px}
.pair .sb{display:block;margin-top:0;font-weight:800}
.pair .sbtxt{display:block;margin-top:4px;font-weight:400;color:var(--ink-soft);line-height:1.8}
.microgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
@media(max-width:640px){.microgrid{grid-template-columns:1fr}}
.micro{background:rgba(255,255,255,.6);border:1px solid var(--fb-b);border-radius:10px;padding:10px 13px}
.micro .mt{display:block;font-weight:900;color:var(--fb-d);margin-bottom:3px;font-size:.82rem}
.micro p{margin:0;line-height:1.7}
.stepnote b{color:var(--forest);font-weight:800}
.row{margin:6px 0 36px}
.meta{display:flex;align-items:center;gap:9px;color:var(--ink-soft);font-weight:800;font-size:.88rem;margin:0 0 12px}
.meta::before{content:"";width:16px;height:2px;background:var(--gold);flex:0 0 auto}

/* [DS-5] callout — 좌측 컬러바 + 은은한 틴트 */
.co{display:flex;gap:14px;border-radius:var(--r-md);padding:17px 18px;margin:0 0 14px;
  border:1px solid transparent;border-left-width:3px}
.co .ico{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:1rem}
.co .cbody{min-width:0;flex:1}
.co .clab{display:block;font-size:.7rem;font-weight:900;letter-spacing:.12em;margin-bottom:6px;opacity:.95}
.co .ctxt{white-space:pre-wrap;margin:0;font-size:1.03rem;line-height:1.92;word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
.co .ctxt b{font-weight:850}
.co-mine{background:var(--mine-bg);border-color:var(--mine-b)}
.co-mine .ico{background:#e2d7bd}.co-mine .clab{color:var(--mine-d)}.co-mine .ctxt{font-weight:700;color:#43371f}
.co-fb{background:var(--fb-bg);border-color:var(--fb-b)}
.co-fb .ico{background:#f2dfa8}.co-fb .clab{color:var(--fb-d)}.co-fb .ctxt{color:#584727}
.co-fb .ctxt b{color:#1a1408;background:linear-gradient(transparent 68%,#f1dc9e 68%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 1px}
.co-act{background:var(--act-bg);border-color:var(--act-b)}
.co-act .ico{background:#cbdcf3}.co-act .clab{color:var(--act-d)}.co-act .ctxt{color:#35527b}
.co-act .ctxt b{color:#0d2038;background:linear-gradient(transparent 68%,#cfe0f7 68%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 1px}
.co-pro{background:var(--pro-bg);border-color:var(--pro-b);margin-bottom:9px}
.co-pro .ico{background:#cadfd1}.co-pro .clab{color:var(--pro-d)}.co-pro .ctxt{color:#1c4433;font-weight:700}
.co-con{background:var(--con-bg);border-color:var(--con-b)}
.co-con .ico{background:#eecfc2}.co-con .clab{color:var(--con-d)}.co-con .ctxt{color:#5c2a1c;font-weight:700}
.co-strat{background:var(--forest-tint);border-color:#bcd6c4}
.co-strat .ico{background:#cfe2d7}.co-strat .clab{color:var(--forest)}
.co-strat .ctxt{color:#193b2c;font-weight:700}

/* 원답(취소선) + 고친 답변(파랑) */
.answrap{display:grid;gap:14px}
@media(min-width:640px){.answrap{grid-template-columns:1fr 1.15fr;align-items:start}}
.old .ctxt{text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:rgba(196,82,63,.6);color:#8f8272;font-weight:600}
.fix{border-left:3px solid var(--fix);padding-left:14px}
.fix .ctxt{color:var(--fix);font-weight:800}

/* 스크롤 진입 시 1회: 옛 답변 쫙 그어지고(왼→오 와이프), 파란 답변 타이핑되듯 그려짐 */
.answrap.anim-strike.armed .old{clip-path:inset(0 100% 0 0)}
.answrap.anim-strike.armed .fix{clip-path:inset(0 100% 0 0);position:relative}
.answrap.anim-strike.armed.revealed .old{animation:wipeIn .65s .05s ease-out forwards}
.answrap.anim-strike.armed.revealed .fix{animation:wipeIn 1.1s .55s steps(28,end) forwards}
.answrap.anim-strike.armed.revealed .fix::after{content:'';position:absolute;top:6%;right:-2px;width:2px;height:88%;
  background:var(--fix);animation:caretBlink .5s .55s steps(1) 4, caretGone 0s 1.7s forwards}
@keyframes wipeIn{to{clip-path:inset(0 0 0 0)}}
@keyframes caretBlink{50%{opacity:0}}
@keyframes caretGone{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.answrap.anim-strike.armed .old,.answrap.anim-strike.armed .fix{clip-path:none!important;animation:none!important}}
/* ✏️ 형광펜 밑줄 — 스크롤 진입 시 왼→오로 그어짐(최초 1회). JS로 hl-armed 켜질 때만 숨김(무JS 안전) */
.hl-armed .co-fb .ctxt b,.hl-armed .co-act .ctxt b,.hl-armed .concl,.hl-armed h1 .u{
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 100%;
  transition:background-size 1.4s cubic-bezier(.45,.05,.35,1) .1s}
.hl-armed .co-fb .ctxt b.hl-on,.hl-armed .co-act .ctxt b.hl-on,.hl-armed .concl.hl-on,.hl-armed h1 .u.hl-on{background-size:100% 100%}
/* 이 효과는 글자는 계속 또렷하고 색 띠만 지나가는 저자극 모션 → 전역 transition:none(356행)를 예외로 이겨서 '동작 줄이기'에서도 유지 */
@media(prefers-reduced-motion:reduce){.hl-armed .co-fb .ctxt b,.hl-armed .co-act .ctxt b,.hl-armed .concl,.hl-armed h1 .u{transition:background-size 1.4s cubic-bezier(.45,.05,.35,1) .1s!important}}

/* 두 갈래 분기선 (고객군 → 2 니즈) */
.branch{position:relative;height:34px;margin:14px 0 4px}
.branch-node{position:absolute;left:50%;top:-2px;transform:translateX(-50%);
  font-size:.72rem;font-weight:900;color:var(--fb-d);background:var(--fb-bg);
  border:1.5px solid var(--fb-b);border-radius:99px;padding:3px 12px;z-index:1}
.branch::before{content:"";position:absolute;left:50%;top:22px;transform:translateX(-50%);
  width:2px;height:6px;background:var(--fb-b)}
.branch::after{content:"";position:absolute;left:25%;right:25%;top:28px;height:2px;background:var(--fb-b);
  border-radius:2px}
.branch .arm{position:absolute;top:28px;width:2px;height:8px;background:var(--fb-b)}
.branch i{position:absolute;top:28px;width:2px;height:8px;background:var(--fb-b)}
.branch i:first-of-type{left:25%}.branch i:last-of-type{right:25%}
.twobranch{margin-top:2px}

/* a·b·c·d 단계 뱃지 구분 */
.abc-item{display:flex;align-items:flex-start;gap:8px;margin:9px 0 0}
.abc-badge{flex:0 0 auto;display:inline-grid;place-items:center;width:19px;height:19px;
  font-size:.72rem;font-weight:900;color:#fff;background:var(--fb-d);border-radius:50%;
  margin-top:2px;text-transform:uppercase;font-style:normal}

/* 강조 마커 */
.concl{font-weight:850;font-size:1.06rem;color:var(--forest-deep);
  background:linear-gradient(transparent 52%,#d3e4d3 52%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:1px 3px 2px;border-radius:2px}
.pb{font-weight:900;color:var(--con-d)}
.sb{font-weight:900;color:var(--forest)}
.comp{font-weight:900;color:var(--forest)}

/* [DS-6] cocard / qchip */
.cocard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 18px 9px;margin:0 0 16px;box-shadow:var(--sh-1);transition:box-shadow .2s}
.cocard:hover{box-shadow:var(--sh-2)}
.cocard .cohead{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:13px}
.cocard .coname{font-family:var(--serif);font-size:1.18rem;font-weight:900}
.cocard .coaud{font-size:.78rem;font-weight:800;color:var(--ink-soft);background:var(--mine-bg);
  border:1px solid var(--mine-b);padding:3px 10px;border-radius:999px}
.cocard .cotag{font-size:.71rem;font-weight:900;color:#fff;background:var(--forest);padding:4px 11px;border-radius:999px;letter-spacing:.04em}
.cocard .cotag.sub{background:#8d7f68}
.cocard .cotag.no{background:#bdb2a0;text-decoration:line-through}
.qchip{display:flex;gap:11px;align-items:baseline;margin:0 0 11px}
.qchip .qn{flex:0 0 auto;font-size:.76rem;font-weight:900;color:var(--gold-deep);
  border:1.5px solid var(--gold);padding:3px 11px;border-radius:999px;background:var(--gold-tint)}
.qchip .qt{font-family:var(--serif);font-weight:900;font-size:1.12rem;letter-spacing:-.01em}

/* footer */
footer{margin-top:70px;text-align:center;color:var(--muted);font-size:.84rem;line-height:1.9}
footer b{color:var(--ink-soft)}

.nextread{text-align:center;margin:44px 0 6px}
/* 탭 넘어가기 전 건조한 이유 한 줄 — 감정·칭찬 없이 "안 넘어가면 반쪽"이라는 사실만 */
.nextwhy{max-width:520px;margin:0 auto 16px;font-size:.96rem;color:var(--ink-soft);line-height:1.7;
  word-break:keep-all;text-wrap:pretty}
.nextwhy b{color:var(--forest);font-weight:800}
.nextbtn{font-family:inherit;font-weight:800;font-size:1rem;padding:14px 26px;border-radius:999px;cursor:pointer;
  border:none;background:linear-gradient(135deg,var(--forest),var(--forest-2));color:#fff;
  box-shadow:0 10px 22px rgba(31,77,58,.26);transition:transform .15s,box-shadow .15s}
.nextbtn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(31,77,58,.3)}

/* [DS-8] tabs / a11y / responsive */
section.tab{display:none;margin-top:36px}
section.tab.on{display:block;animation:rise .3s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
a:focus-visible,button:focus-visible{outline:3px solid #7fb99b;outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media(max-width:640px){
  .wrap{padding:0 16px 100px}
  header.hero{padding:44px 16px 6px}
  h1{font-size:clamp(2.2rem,9vw,2.8rem)}
  .sub{font-size:1rem}
      nav .in{padding:10px 14px;gap:6px}
  nav a{padding:9px 14px;font-size:.9rem}
  .qtitle .n{width:46px;height:46px;font-size:1.15rem}
  .qtitle h2{font-size:1.55rem}
  .step{margin-top:28px;font-size:.82rem;padding:7px 13px}
  .co{padding:13px 12px;gap:9px;margin:9px 0}
  .co .ico{width:28px;height:28px;font-size:.85rem}
  .co .ctxt{font-size:.96rem;line-height:1.72}
  .qchip .qt{font-size:1.05rem}
  .cocard{padding:15px 14px 6px}
  .row{margin-bottom:14px}
  .niche{padding:11px 13px;margin:9px 0}
  .niche p{line-height:1.62}
  /* 2단 니즈 카드: 좁은 칸이라 여백을 줄여 글 너비를 최대한 확보 + 폰트 미세 축소 */
  .co .nichegrid{gap:6px;margin:10px -2px 0}
  .nichegrid .niche{padding:10px 9px}
  .nichegrid .niche .nt{font-size:.86rem}
  .nichegrid .niche p{font-size:.87rem;line-height:1.58;margin-top:6px}
  /* a·b·c·d 목록이 있는 카드(구체화)는 폭이 필요 → 모바일에선 1단으로 펼침 */
  .nichegrid:has(.abc-item){grid-template-columns:1fr;gap:10px;margin:12px 0}
  .nichegrid:has(.abc-item) .niche{padding:13px 15px}
  .nichegrid:has(.abc-item) .niche .nt{font-size:.92rem}
  .nichegrid:has(.abc-item) .niche p{font-size:.92rem;line-height:1.62}
  section{margin-top:40px}
  .writebox{margin:8px 0 24px;padding:13px 14px}
}