/* 검사·결과·내 결과 화면. 원본(홍보 사이트 public/tests/animal-type)의 모양을 옮겼다.
   글꼴은 외부(구글 폰트)에서 받지 않는다. 방문자 주소가 밖으로 나가고, CSP 도 막는다.
   기기에 설치된 글꼴을 쓰고, 자체 호스팅은 디자인을 정할 때 붙인다. */

:root{
  --grad-a:#FF9B36; --grad-b:#FE705D;
  --bg:#FFFCF8; --ink:#241A15; --sub:#6E5C53; --line:#F1E3D7;
  --card:#FFFFFF;
  --serif:'Nanum Myeongjo','Noto Serif KR','AppleMyungjo','Batang',serif;
  --sans:'Gothic A1','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
[hidden]{display:none !important}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; line-height:1.6}
body,h1,h2,h3,p,span,b,small,a,button{word-break:keep-all;overflow-wrap:anywhere}
.wrap{max-width:660px; margin:0 auto; padding:0 24px 80px; min-height:100%}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:40; height:58px; display:flex; align-items:center;
  background:rgba(255,252,248,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar .in{max-width:660px; margin:0 auto; width:100%; padding:0 24px; display:flex; align-items:center; justify-content:space-between}
.topbar a{display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; min-height:44px}
.topbar a span{font-size:15px; font-weight:700; letter-spacing:-.02em}
.topbar .backlink{font-size:13px; font-weight:600; color:var(--sub)}
@media (max-width:560px){ .topbar .in{padding:0 20px} }

/* ---------- progress ---------- */
#progress{position:fixed; top:57px; left:0; right:0; height:3px; background:var(--line); z-index:50}
#progress .fill{height:100%; width:0; background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); transition:width .35s ease}

/* ---------- shared ---------- */
.screen{padding-top:48px}
h1{font-family:var(--serif); font-weight:800; font-size:2.1rem; line-height:1.35; letter-spacing:-.01em}
h2{font-family:var(--serif); font-weight:700; font-size:1.45rem; line-height:1.45}
p.lead{color:var(--sub); margin-top:18px; font-size:1.02rem}
.btn{display:inline-block; border:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:1rem; color:#fff;
  padding:16px 34px; border-radius:999px; background:linear-gradient(96deg,var(--grad-a),var(--grad-b)); text-decoration:none}
.btn[disabled]{background:#EFE6DE; color:#B3A197; cursor:default}
.btn:focus-visible,.opt:focus-visible,.chip:focus-visible,.textlink:focus-visible{outline:2px solid var(--grad-b); outline-offset:3px}
.textlink{background:none;border:none;color:var(--sub);font-family:var(--sans);font-size:.9rem;cursor:pointer;padding:12px 0;min-height:44px}
.textlink[disabled]{opacity:0;pointer-events:none}

/* ---------- intro ---------- */
#intro .meta{margin-top:36px; padding-top:22px; border-top:1px solid var(--line); color:var(--sub); font-size:.9rem; display:grid; gap:6px}
#intro .btn{margin-top:34px}
#intro .fine{margin-top:22px; font-size:.8rem; color:#9A8B82; line-height:1.7}
#intro .lab-notice{margin-top:28px}

/* ---------- pre ---------- */
.field{margin-top:34px}
.field .lb{font-size:.9rem; font-weight:700; color:var(--sub); margin-bottom:12px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--card); border:1px solid var(--line); border-radius:999px; padding:13px 22px; font-family:var(--sans); font-size:.98rem; color:var(--ink); cursor:pointer}
.chip.sel{border-color:transparent; background:linear-gradient(96deg,var(--grad-a),var(--grad-b)); color:#fff; font-weight:600}
#pre .btn{margin-top:40px}

/* ---------- question ---------- */
.qcount{font-size:.85rem; color:#B3A197; letter-spacing:.04em; margin-bottom:14px}
.part{display:inline-block; margin-left:8px; font-size:.72rem; font-weight:600; color:#B4712A; background:#FFF3E4; border-radius:999px; padding:2px 9px; letter-spacing:0}
.qtext{font-family:var(--serif); font-size:1.45rem; line-height:1.55; font-weight:700}
.qhint{font-size:.86rem; color:#B3A197; margin-top:10px}
.picks{display:grid; gap:8px; margin-top:24px}
.opt{position:relative; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:15px 48px 15px 18px; font-family:var(--sans); font-size:1rem; line-height:1.5; color:var(--ink); cursor:pointer}
.opt.sel{border-color:transparent; background:linear-gradient(96deg,var(--grad-a),var(--grad-b)); color:#fff; font-weight:600}
.opt .dot{position:absolute; right:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50%; border:1.5px solid #D6C4B6}
.opt.sel .dot{border-color:#fff; background:#fff}
.qnav{margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:14px}
.qnav .btn{padding:14px 30px; font-size:.95rem}

/* ---------- 로그인 관문 · 불러오는 중 ---------- */
.gate .lab-stack{margin-top:28px}
.gate .again{margin-top:18px}
.lab-error{margin-top:20px; padding:14px 16px; border-radius:14px; background:#FDECEB; color:#9B2C22; font-size:.93rem}
.lab-stack{display:flex; flex-direction:column; gap:10px}
.lab-btn{display:flex; align-items:center; justify-content:center; min-height:52px; width:100%; padding:0 18px; border-radius:999px;
  border:1px solid transparent; font-family:var(--sans); font-size:1rem; font-weight:600; text-decoration:none; cursor:pointer}
.lab-btn-primary{background:var(--ink); color:#fff}
.lab-btn-line{background:#fff; color:var(--ink); border-color:var(--line); margin-top:10px}
.lab-btn-disabled{opacity:.4; pointer-events:none}
.lab-notice{padding:16px 18px; border-radius:16px; background:#FFF3E4; font-size:.92rem; line-height:1.7}
.lab-notice p{margin-top:6px; color:var(--sub)}
.lab-hint{font-size:.88rem; color:#9A8B82; margin-top:8px}

/* ---------- result ---------- */
#result{padding-top:40px}
.rhead{font-family:var(--serif); font-size:2rem; font-weight:800; line-height:1.38}
.rsub{color:var(--sub); margin-top:14px; font-size:.98rem}
.main{margin-top:26px; padding:32px 26px; border:1px solid var(--line); border-radius:20px; background:var(--card); text-align:center}
.main .face{width:112px; height:112px; margin:0 auto 18px; border-radius:50%; background:linear-gradient(135deg,#FFF2E8,#FFE4DC);
  display:flex; align-items:center; justify-content:center; font-size:56px; line-height:1}
.main .an{font-family:var(--serif); font-size:2.05rem; font-weight:800; line-height:1.3}
.main .ty{display:inline-block; margin-top:12px; font-size:.8rem; font-weight:700; padding:5px 14px; border-radius:999px; color:#fff; background:linear-gradient(96deg,var(--grad-a),var(--grad-b))}
.main .cnt{margin-top:14px; font-size:.84rem; color:#B3A197}
.main .d{margin-top:20px; text-align:left; color:var(--sub); font-size:1rem; line-height:1.85}
.main .d p + p{margin-top:14px}
.sec{margin-top:18px; padding:20px 22px; border:1px solid var(--line); border-radius:16px; background:#FFFDFB; display:flex; gap:16px; align-items:flex-start}
.sec .face{flex:none; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#FFF6EE,#FFECE4); display:flex; align-items:center; justify-content:center; font-size:28px; line-height:1}
.sec .rk{font-size:.74rem; font-weight:700; color:#B4712A; letter-spacing:.02em}
.sec .an{font-family:var(--serif); font-size:1.28rem; font-weight:800; margin-top:4px}
.sec .an em{font-style:normal; font-size:.78rem; font-weight:600; color:#B3A197; margin-left:7px}
.sec .d{margin-top:8px; font-size:.93rem; line-height:1.8; color:var(--sub)}
.card{margin-top:26px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 24px}
.card h3{font-family:var(--serif); font-size:1.15rem; font-weight:700}
.card .cap{font-size:.85rem; color:#B3A197; margin-top:6px}
.radar{display:block; width:100%; height:auto; margin-top:14px}
.clist{margin-top:18px; display:grid; gap:13px}
.crow .l{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.crow .l b{font-size:.96rem; font-weight:700}
.crow .l b em{font-style:normal; font-size:.76rem; font-weight:600; color:#B3A197; margin-left:6px}
.crow .l span{font-size:.88rem; font-weight:700; color:#C4553F; white-space:nowrap}
.crow .bar{height:5px; border-radius:999px; background:var(--line); margin-top:8px; overflow:hidden}
.crow .bar i{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); transition:width .9s cubic-bezier(.2,.7,.3,1)}
.note{margin-top:18px; padding:20px 22px; border:1px dashed var(--line); border-radius:16px}
.note h3{font-family:var(--serif); font-size:1.05rem; font-weight:700; margin-bottom:9px}
.note p{font-size:.93rem; line-height:1.8; color:var(--sub)}
.locked{margin-top:18px; padding:22px; border:1px dashed #E3CFBF; border-radius:16px; background:#FFFAF5}
.locked h3{font-family:var(--serif); font-size:1.08rem; font-weight:700}
.locked p{margin-top:6px; font-size:.9rem; color:#9A8B82}
.cta{margin-top:38px; padding:32px 26px; border-radius:20px; color:#fff; background:linear-gradient(120deg,var(--grad-a),var(--grad-b))}
.cta h3{font-family:var(--serif); font-size:1.4rem; font-weight:800; line-height:1.5}
.cta p{margin-top:14px; font-size:.95rem; opacity:.94}
.cta a{display:inline-block; margin-top:22px; background:#fff; color:#D4593F; text-decoration:none; font-weight:700; padding:15px 32px; border-radius:999px}
.more{margin-top:16px; text-align:center}
.more a{display:inline-block; padding:13px 16px; font-size:.9rem; font-weight:600; color:var(--sub); text-decoration:none}
.disclaim{margin-top:26px; font-size:.8rem; color:#9A8B82; line-height:1.75}

/* ---------- 결과 공유 ---------- */
.share{margin-top:16px; padding:24px 22px; border:1px solid var(--line); border-radius:18px; background:var(--card)}
.share h3{font-family:var(--serif); font-size:1.15rem; font-weight:700}
.share .why{margin-top:8px; font-size:.86rem; line-height:1.7; color:#B3A197}
.sbtns{margin-top:16px; display:grid; gap:9px}
.sbtn{height:52px; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer; font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--ink)}
.sbtn.prim{border-color:transparent; color:#fff; background:linear-gradient(96deg,var(--grad-a),var(--grad-b))}
.sbtn[disabled]{opacity:.55; cursor:default}
.smsg{min-height:1.3em; margin-top:11px; font-size:.84rem; line-height:1.6; color:#C4553F}
.sfall{width:100%; margin-top:11px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-family:var(--sans); font-size:.88rem; line-height:1.7; color:var(--ink); background:#FFFDFB; resize:none}
.scard{margin-top:14px}
.scard img{display:block; width:100%; border-radius:14px; border:1px solid var(--line)}
.scard .tip{margin-top:10px; font-size:.84rem; line-height:1.7; color:#B3A197}
@media (min-width:480px){ .sbtns{grid-template-columns:1fr 1fr} }

/* ---------- 내 결과 목록 ---------- */
.rlist{margin-top:24px; display:grid; gap:10px}
.ritem{display:block; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); text-decoration:none}
.ritem .t{font-size:.8rem; color:#B3A197}
.ritem .l{margin-top:4px; font-family:var(--serif); font-size:1.15rem; font-weight:800}
.ritem .d{margin-top:4px; font-size:.82rem; color:#9A8B82}

@media (max-width:560px){
  .wrap{padding:0 20px 60px}
  .card,.note{padding:22px 20px}
  h1{font-size:1.75rem}
  .qtext{font-size:1.22rem}
  .opt{font-size:.95rem; padding:14px 44px 14px 16px; border-radius:12px}
  .rhead{font-size:1.6rem}
  .main{padding:28px 20px}
  .main .face{width:96px; height:96px; font-size:48px}
  .main .an{font-size:1.8rem}
  .sec{padding:18px 18px; gap:13px}
  .sec .face{width:48px; height:48px; font-size:24px}
}
/* =========================================================
   애착유형 · 이별 요인 · 관계적 가치 — 원본 모양을 옮겼다.
   이름이 겹치던 것은 바꿨다: 애착유형의 차원 카드 .area → .dim (이별 요인의 .area 와 막대 모양이 달라서)
   ========================================================= */

/* 척도(5점·7점)와 한 개 고르기 */
.qtext.tall{min-height:2.4em}
.scale{display:flex; gap:6px; margin-top:34px}
.scale .opt{text-align:center; padding:18px 0; font-weight:600; font-size:1.05rem; min-height:52px}
.scale .opt.sel{color:#fff}
.scalelabels{display:flex; justify-content:space-between; margin-top:12px; font-size:.8rem; color:#B3A197}
.choices{margin-top:38px; display:grid; gap:10px}
.choices .opt{padding:15px 18px; min-height:52px}
.btn.wide{width:100%; margin-top:32px}

/* 등급 뱃지(두 검사 공용) */
.grade{display:inline-block; margin-left:10px; vertical-align:3px; font-size:.78rem; font-weight:600; padding:4px 11px; border-radius:999px; font-family:var(--sans)}
.g0{background:#F2F5F0; color:#5F7A5A}
.g1{background:#FFF3E4; color:#B4712A}
.g2{background:#FFE9E2; color:#C4553F}
.g3{background:linear-gradient(96deg,var(--grad-a),var(--grad-b)); color:#fff}

/* 애착유형 */
.map{margin-top:26px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 24px}
.map h3{font-family:var(--serif); font-size:1.15rem; font-weight:700}
.map .cap{font-size:.85rem; color:#B3A197; margin-top:6px}
.map svg{display:block; width:100%; height:auto; margin-top:18px}
.map .legend{margin-top:14px; font-size:.86rem; line-height:1.75; color:var(--sub)}
.map .legend b{color:var(--ink); font-weight:700}
.dim{margin-top:26px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 24px}
.dim .rank{font-size:.82rem; color:#B3A197; margin-bottom:10px}
.dim .nm{font-family:var(--serif); font-size:1.5rem; font-weight:800}
.dim .bar{position:relative; height:5px; background:var(--line); border-radius:999px; margin:34px 0 14px}
.dim .bar>span{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); width:0; transition:width .9s cubic-bezier(.2,.7,.3,1)}
.dim .bar i{position:absolute; top:-5px; width:1px; height:15px; background:#D9C7B9}
.dim .bar em{position:absolute; top:-24px; transform:translateX(-50%); font-style:normal; font-size:.7rem; color:#B3A197; white-space:nowrap}
.dim .num{font-size:.82rem; color:#B3A197; margin-bottom:14px}
.dim .desc{color:var(--sub); font-size:.98rem}
.trig{margin-top:26px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 24px}
.trig h3{font-family:var(--serif); font-size:1.3rem; font-weight:800; line-height:1.5}
.trig .tag{display:inline-block; margin-bottom:12px; font-size:.75rem; font-weight:600; padding:4px 11px; border-radius:999px; background:#FFE9E2; color:#C4553F}
.trig dl{margin-top:16px}
.trig dt{font-size:.86rem; font-weight:700; color:var(--ink); margin-top:16px}
.trig dt:first-child{margin-top:0}
.trig dd{font-size:.95rem; line-height:1.8; color:var(--sub); margin-top:5px}
.cycle{margin-top:26px; padding:24px; border:1px dashed var(--line); border-radius:18px}
.cycle h3{font-family:var(--serif); font-size:1.15rem; font-weight:700; margin-bottom:12px}
.cycle p{color:var(--sub); font-size:.95rem; line-height:1.8}
.cycle b{color:var(--ink); font-weight:600}
.ref{margin-top:26px; padding:22px 24px; border:1px solid var(--line); border-radius:18px; background:#FFFDFB}
.ref h3{font-family:var(--serif); font-size:1.05rem; font-weight:700}
.ref ol{margin:12px 0 0 18px; font-size:.84rem; line-height:1.85; color:var(--sub)}

/* 이별 요인 */
.area{margin-top:26px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 24px}
.area .rank{font-size:.82rem; color:#B3A197; margin-bottom:10px}
.area .nm{font-family:var(--serif); font-size:1.5rem; font-weight:800}
.area .bar{height:5px; background:var(--line); border-radius:999px; margin:18px 0 16px; overflow:hidden}
.area .bar span{display:block; height:100%; background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); width:0; transition:width .9s cubic-bezier(.2,.7,.3,1)}
.area .desc{color:var(--sub); font-size:.98rem}
.all{margin-top:30px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 24px}
.all h3{font-family:var(--serif); font-size:1.15rem; font-weight:700}
.all .cap{font-size:.85rem; color:#B3A197; margin-top:6px}
.rows{margin-top:18px}
.rw{border-top:1px solid var(--line)}
.rw:first-child{border-top:none}
.row{display:flex; align-items:center; gap:14px; width:100%; min-height:44px; padding:13px 0; background:none; border:0; font-family:var(--sans); color:var(--ink); cursor:pointer; text-align:left}
.rw:first-child .row{padding-top:4px}
.row .rn{flex:0 0 auto; width:126px; font-size:.94rem; font-weight:600}
.row.hi .rn{color:#C4553F}
.row .rb{flex:1 1 auto; height:5px; background:#F6EFE9; border-radius:999px; overflow:hidden; min-width:36px}
.row .rb span{display:block; height:100%; width:0; border-radius:999px; transition:width .8s cubic-bezier(.2,.7,.3,1)}
.f0{background:#B7C6B1} .f1{background:#EFC27E}
.f2,.f3{background:linear-gradient(90deg,var(--grad-a),var(--grad-b))}
.row .rg{flex:0 0 auto; width:56px; text-align:right; font-size:.76rem; font-weight:600}
.c0{color:#5F7A5A} .c1{color:#B4712A} .c2{color:#C4553F} .c3{color:#B33A22}
.row .chev{flex:0 0 auto; width:14px; height:14px; color:#C4B4A8; transition:transform .25s ease}
.row[aria-expanded="true"] .chev{transform:rotate(180deg)}
.row:focus-visible{outline:2px solid var(--grad-b); outline-offset:2px; border-radius:8px}
.panel{max-height:0; overflow:hidden; transition:max-height .3s ease}
.panel.open{max-height:480px}
.panel .pin{padding:2px 0 16px 0; font-size:.92rem; line-height:1.8; color:var(--sub)}
.panel .pin .num{display:block; margin-top:8px; font-size:.8rem; color:#B3A197}
.all .foot{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:.86rem; line-height:1.75; color:var(--sub)}
.others{margin-top:30px; padding:24px; border:1px dashed var(--line); border-radius:18px}
.others h3{font-family:var(--serif); font-size:1.15rem; font-weight:700; margin-bottom:12px}
.others p{color:var(--sub); font-size:.95rem}
.others b{color:var(--ink); font-weight:600}

/* 관계적 가치 — 1단계(10개 중 4개) */
.picks .opt .no{position:absolute; right:14px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:#C9B6A8}
.picks .opt.sel .no{border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.22); color:#fff}
.picks.full .opt:not(.sel){opacity:.62}
/* 2단계(최우선·최하위) */
.md{margin-top:24px; border:1px solid var(--line); border-radius:16px; background:var(--card); overflow:hidden}
.mdhead{display:grid; grid-template-columns:1fr 56px 56px; gap:8px; align-items:end; padding:12px 14px 10px; border-bottom:1px solid var(--line); background:#FFFDFB}
.mdhead b{font-size:.72rem; font-weight:700; text-align:center; line-height:1.35}
.mdhead b.hi{color:#C4553F}
.mdhead b.lo{color:#8E8079}
.mdrow{display:grid; grid-template-columns:1fr 56px 56px; gap:8px; align-items:center; padding:12px 14px; border-top:1px solid #F7EFE7}
.mdrow p{font-size:.95rem; line-height:1.5}
.pk{height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center}
.pk i{width:15px; height:15px; border-radius:50%; border:1.5px solid #D6C4B6; display:block}
.pk.on.hi{border-color:transparent; background:linear-gradient(96deg,var(--grad-a),var(--grad-b))}
.pk.on.lo{border-color:transparent; background:#6E5C53}
.pk.on i{border-color:#fff; background:#fff}
/* 3단계(충족도) */
.fitem{margin-top:22px; padding:20px 20px 16px; border:1px solid var(--line); border-radius:16px; background:var(--card)}
.fitem .ft{font-size:1rem; line-height:1.55; font-weight:600}
.fitem .fv{margin-top:14px; display:flex; align-items:baseline; justify-content:space-between}
.fitem .fv b{font-family:var(--serif); font-size:1.5rem; font-weight:800}
.fitem .fv b.none{color:#C9B6A8}
.fitem .fv span{font-size:.78rem; color:#B3A197}
.fitem input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; cursor:pointer; margin-top:2px}
.fitem input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:999px; background:var(--line)}
.fitem input[type=range]::-moz-range-track{height:6px; border-radius:999px; background:var(--line)}
.fitem input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:50%;
  background:linear-gradient(96deg,var(--grad-a),var(--grad-b)); border:2px solid #fff; box-shadow:0 2px 6px rgba(120,60,30,.22)}
.fitem input[type=range]::-moz-range-thumb{width:26px; height:26px; border-radius:50%; border:2px solid #fff;
  background:linear-gradient(96deg,var(--grad-a),var(--grad-b)); box-shadow:0 2px 6px rgba(120,60,30,.22)}
.fends{display:flex; justify-content:space-between; font-size:.76rem; color:#B3A197}
/* 결과 */
.top5{margin-top:26px; display:grid; gap:10px}
.t5{display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px}
.t5 .rk{flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700; color:#fff; background:linear-gradient(96deg,var(--grad-a),var(--grad-b))}
.t5 .tx{font-family:var(--serif); font-size:1.12rem; font-weight:700; line-height:1.55}
.t5 .ax{font-size:.78rem; color:#B3A197; margin-top:5px}
.axlist{margin-top:20px; display:grid; gap:14px}
.axrow .l{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.axrow .l b{font-size:.98rem; font-weight:700}
.axrow .l em{font-style:normal; font-size:.88rem; font-weight:700; color:#C4553F}
.axrow .bar{height:5px; border-radius:999px; background:var(--line); margin:8px 0 7px; overflow:hidden}
.axrow .bar span{display:block; height:100%; border-radius:999px; width:0; background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); transition:width .9s cubic-bezier(.2,.7,.3,1)}
.axrow .d{font-size:.88rem; line-height:1.75; color:var(--sub)}
.rsub b{color:var(--ink)}
.gap{margin-top:18px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:var(--card)}
.gap .gt{font-size:1rem; line-height:1.55; font-weight:600}
.gap .tag{display:inline-block; margin-top:10px; font-size:.74rem; font-weight:700; padding:4px 11px; border-radius:999px}
.tg2{background:#FFE9E2; color:#C4553F}
.tg1{background:#FFF3E4; color:#B4712A}
.tg0{background:#F2F5F0; color:#5F7A5A}
.gbars{margin-top:14px; display:grid; gap:9px}
.gb{display:grid; grid-template-columns:52px 1fr 42px; gap:10px; align-items:center}
.gb i{font-style:normal; font-size:.76rem; color:#B3A197}
.gb .tr{height:6px; border-radius:999px; background:var(--line); overflow:hidden}
.gb .tr span{display:block; height:100%; border-radius:999px; width:0; transition:width .9s cubic-bezier(.2,.7,.3,1)}
.gb.imp .tr span{background:linear-gradient(90deg,var(--grad-a),var(--grad-b))}
.gb.fil .tr span{background:#B9A99E}
.gb b{font-size:.8rem; font-weight:700; text-align:right}

/* 연애 감정 전달과 갈등 대화 검사 · 짝사랑 관계 발전 가능성 검사 —
   두 검사가 .tk* 를 함께 쓴다(막대 .tkbar, 조합 .tkcombo, 행동 .tkact).
   막대 색은 구간(b0 / b1 / b2)을 나타낼 뿐 좋고 나쁨이 아니다.
   산출하지 않은 영역은 막대를 그리지 않는다 — 빈 막대는 0점으로 오해된다. */
.skipopt{margin-top:14px; text-align:center; padding:14px 16px; min-height:52px; font-size:.92rem}
.tklist{margin-top:16px; display:grid; gap:14px}
.tkrow .l,.tkscale .l{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.tkrow .l b,.tkscale .l b{font-size:.98rem; font-weight:700}
.tkrow .l em{font-style:normal; font-size:.84rem; font-weight:600; color:#C4553F; text-align:right}
.tkbar{height:6px; border-radius:999px; background:var(--line); margin-top:9px; overflow:hidden}
.tkbar span{display:block; height:100%; width:0; border-radius:999px; transition:width .9s cubic-bezier(.2,.7,.3,1)}
.tkbar .b0{background:#B7C6B1} .tkbar .b1{background:#EFC27E}
.tkbar .b2{background:linear-gradient(90deg,var(--grad-a),var(--grad-b))}
.tkscale{margin-top:16px; padding:22px 22px 20px; border:1px solid var(--line); border-radius:16px; background:var(--card)}
.tkscale .tag{flex:none; font-size:.76rem; font-weight:700; padding:4px 11px; border-radius:999px; white-space:nowrap}
.tkscale .tag.b0{background:#F2F5F0; color:#5F7A5A}
.tkscale .tag.b1{background:#FFF3E4; color:#B4712A}
.tkscale .tag.b2{background:#FFE9E2; color:#C4553F}
.tkscale .tag.off{background:#F4EFEB; color:#9A8B82}
.tkscale .sub{margin-top:5px; font-size:.84rem; color:#B3A197}
.tkscale .num{margin-top:9px; font-size:.8rem; color:#B3A197}
.tkscale .d{margin-top:10px; font-size:.94rem; line-height:1.8; color:var(--sub)}
.tkscale .warn{margin-top:9px; padding:10px 13px; border-radius:11px; background:#FFF8F0; font-size:.86rem; line-height:1.7; color:#B4712A}
.tkcombo{margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.tkcombo .nm{font-family:var(--serif); font-size:1.12rem; font-weight:800}
.tkcombo .d{margin-top:9px; font-size:.94rem; line-height:1.8; color:var(--sub)}
.tkcombo .ask{margin-top:10px; padding:12px 14px; border-radius:12px; background:#FFF8F0; font-size:.9rem; line-height:1.7; color:#B4712A}
.tkact{margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.tkact .nm{font-family:var(--serif); font-size:1.12rem; font-weight:800}
.tkact dt{margin-top:13px; font-size:.82rem; font-weight:700; color:#B4712A}
.tkact dd{margin-top:4px; font-size:.94rem; line-height:1.8; color:var(--sub)}
.tkact dd.say{padding:13px 15px; border-radius:12px; background:#FFFDFB; border:1px dashed var(--line); color:var(--ink)}
.tkplan{margin:16px 0 0 18px; font-size:.94rem; line-height:1.9; color:var(--sub)}
.tktasks{margin-top:8px}
.tktask{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.tktask .nm{font-size:.94rem; font-weight:700}
.tktask p{margin-top:6px; font-size:.92rem; line-height:1.8; color:var(--sub)}
.tkrec{margin-top:18px; padding:16px 18px; border-radius:14px; background:#FFFDFB; border:1px solid var(--line)}
.tkrec .nm{font-size:.82rem; font-weight:700; color:#B4712A}
.tkrec .nm + .nm{margin-top:14px}
.tkrec p{margin-top:5px; font-size:.9rem; line-height:1.8; color:var(--sub)}
.tkrec ul{margin:5px 0 0 18px; font-size:.9rem; line-height:1.8; color:var(--sub)}
.card .foot{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:.86rem; line-height:1.75; color:var(--sub)}


/* 짝사랑 관계 발전 가능성 검사에만 있는 것 — 네 축 카드, 주제별 상태, 점검표 */
.cpaxis{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.cpaxis:first-of-type{border-top:none; padding-top:6px}
.cpaxis .l{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.cpaxis .l b{font-size:.98rem; font-weight:700}
.cpaxis .tag{flex:none; font-size:.76rem; font-weight:700; padding:4px 11px; border-radius:999px; white-space:nowrap}
.cpaxis .tag.b0{background:#F2F5F0; color:#5F7A5A}
.cpaxis .tag.b1{background:#FFF3E4; color:#B4712A}
.cpaxis .tag.b2{background:#FFE9E2; color:#C4553F}
.cpaxis .tag.off{background:#F4EFEB; color:#9A8B82}
.cpaxis .sub{margin-top:5px; font-size:.84rem; color:#B3A197}
.cpaxis .num{margin-top:8px; font-size:.8rem; color:#B3A197}
.cpnm{margin-top:16px; font-size:.82rem; font-weight:700; color:#B4712A}
.cplist{margin:6px 0 0 18px; font-size:.94rem; line-height:1.85; color:var(--sub)}
.cptopics{margin-top:6px}
.cptopic{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.cptopic p{margin-top:7px; font-size:.94rem; line-height:1.7}
.cptopic .st{display:inline-block; font-size:.74rem; font-weight:700; padding:4px 11px; border-radius:999px}
.cptopic .s0{background:#F4EFEB; color:#9A8B82}
.cptopic .s1{background:#F2F5F0; color:#5F7A5A}
.cptopic .s2{background:#FFF3E4; color:#B4712A}
.cptopic .s3{background:linear-gradient(96deg,var(--grad-a),var(--grad-b)); color:#fff}
.cptopic .sx{background:#F4EFEB; color:#B3A197}
.cpnote{margin-top:12px; padding:12px 14px; border-radius:12px; background:#FFF8F0; font-size:.9rem; line-height:1.7; color:#B4712A}
.cprec{margin-top:8px}
.cprow{display:grid; grid-template-columns:104px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:.92rem; line-height:1.7}
.cprow b{font-weight:700}
.cprow span{color:var(--sub)}
.qhint-top{margin-top:0; margin-bottom:-14px}
@media (max-width:560px){ .cprow{grid-template-columns:86px 1fr; gap:10px} }

/* 로그인 동의 */
.consent{margin-top:4px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:var(--card)}
.consent h3{font-family:var(--serif); font-size:1.02rem; font-weight:700}
.consent .crow2{margin-top:10px; display:grid; grid-template-columns:86px 1fr; gap:10px; font-size:.88rem; line-height:1.7}
.consent .crow2 b{color:#B4712A; font-weight:700}
.consent .crow2 span{color:var(--sub)}
.consent .lab-hint{margin-top:12px}
.consent-agree{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:flex-start;
  min-height:44px; font-size:.95rem; font-weight:600; cursor:pointer}
.consent-agree input{width:22px; height:22px; margin-top:2px; accent-color:#FE705D; flex:none}
@media (max-width:560px){ .consent .crow2{grid-template-columns:76px 1fr; gap:8px} }

/* 처리방침 화면 */
.policy h2{font-family:var(--serif); font-size:1.15rem; font-weight:700; margin:28px 0 10px}
.policy p{margin-top:10px; font-size:.95rem; line-height:1.85; color:var(--sub)}
.policy p strong,.policy th{color:var(--ink)}
.policy ul{margin:10px 0 0 18px; font-size:.95rem; line-height:1.9; color:var(--sub)}
.policy table{width:100%; margin-top:12px; border-collapse:collapse; font-size:.92rem; line-height:1.75}
.policy th,.policy td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; color:var(--sub)}
.policy th{width:34%; font-weight:700; background:#FFFDFB}
.policy a{color:#C4553F}
@media (max-width:560px){ .policy th{width:40%} .policy th,.policy td{padding:8px 10px} }

/* 화면 아래 공통 꼬리말 */
.foot-links{margin-top:34px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.84rem}
.foot-links a,.foot-links button{display:inline-flex; align-items:center; min-height:44px; color:#9A8B82; text-decoration:none; background:none; border:0; padding:8px 0; font-family:var(--sans); font-size:.84rem; cursor:pointer}
.foot-links button{text-decoration:underline}
.foot-links .biz{flex-basis:100%; margin-top:2px; font-size:.78rem; line-height:1.7; color:#B5A79E}

/* 첫 화면 검사 카드 */
.ecard .blurb{margin-top:8px; font-size:.9rem; line-height:1.7; color:var(--sub)}
.ecard .emeta{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.8rem; color:#9A8B82}
.ecard .emeta b{color:var(--ink); margin-right:4px}

@media (max-width:560px){
  .dim,.trig,.map,.ref,.all,.gap,.tkscale{padding:22px 20px}
  .qtext.tall{min-height:0}
  .scale{gap:4px}
  .scale .opt{padding:15px 0; font-size:.95rem; border-radius:10px}
  .scalelabels{font-size:.72rem}
  .row{gap:10px}
  .row .rn{width:92px; font-size:.88rem}
  .row .rg{width:48px; font-size:.72rem}
  .mdhead,.mdrow{grid-template-columns:1fr 52px 52px; gap:6px; padding-left:12px; padding-right:12px}
  .mdrow p{font-size:.9rem}
  .t5 .tx{font-size:1.04rem}
  .gb{grid-template-columns:46px 1fr 38px; gap:8px}
  .picks .opt{padding-right:46px}
}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }