@font-face{
  font-family:'GabiaGosran';
  src:url('font/GabiaGosran.otf') format('opentype');
  font-weight:normal;
  font-display:swap;
}
:root{
  --bg:#F4F6F1; --surface:#FFFFFF; --ink:#24302A; --sub:#5C6B62;
  --line:#DCE4DA; --primary:#2F5D46; --primary-soft:#E7EFE9;
  --amber:#9C6420; --amber-soft:#F7EFE2; --danger:#B4452F;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.55;
}
.wrap{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1;padding:20px 20px 120px}

/* 고정 로고 헤더 */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(244,246,241,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .in{max-width:480px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;justify-content:center}
.topbar img{height:26px;display:block}
.wrap{padding-top:53px}

/* 상단 진행 */
header{position:sticky;top:53px;z-index:10;background:var(--bg);padding:12px 20px 10px;max-width:480px;margin:0 auto;width:100%}
.progress{margin-top:8px;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--primary);border-radius:2px;transition:width .3s ease}
.stepnum{margin-top:6px;font-size:12px;color:var(--sub)}

h1{font-size:24px;font-weight:800;line-height:1.35;letter-spacing:-.01em}
h2{font-size:19px;font-weight:700;margin-bottom:6px}
.hint{color:var(--sub);font-size:14px;margin-top:6px}

/* 문항 리스트 */
.qlist{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.qcard{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.qhead{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--primary-soft);color:var(--primary);font-size:14.5px;font-weight:800;letter-spacing:.01em;border-bottom:1px solid var(--line)}
.qhead::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary)}
.qrow{display:flex;gap:12px;align-items:flex-start;padding:16px;border-top:1px solid var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent}
.qrow:first-child{border-top:0}
.qrow input{position:absolute;opacity:0;pointer-events:none}
.qrow .box{flex:0 0 24px;height:24px;margin-top:1px;border:2px solid #B9C6BC;border-radius:8px;position:relative;transition:all .15s}
.qrow .box::after{content:"";position:absolute;inset:0;margin:auto;width:12px;height:7px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translateY(-1px);opacity:0}
.qrow input:checked + .box{background:var(--primary);border-color:var(--primary)}
.qrow input:checked + .box::after{opacity:1}
.qrow input:focus-visible + .box{outline:3px solid #A8C6B4;outline-offset:2px}
.qrow .txt{font-size:16px}
.qrow input:checked ~ .txt{font-weight:600}
.sect{padding:14px 16px 4px;font-size:13px;font-weight:700;color:var(--primary);background:var(--surface)}
.sect + .qrow{border-top:0}
.qrow-none{background:#FAFBF8}
.qrow-none .txt{color:var(--sub)}

/* 하단 버튼 */
.footer{position:fixed;bottom:0;left:0;right:0;z-index:20;background:linear-gradient(transparent,var(--bg) 30%);padding:24px 20px calc(16px + env(safe-area-inset-bottom))}
.footer .inner{max-width:440px;margin:0 auto;display:flex;gap:10px}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn{flex:1;padding:16px;border-radius:var(--radius);border:0;font-size:17px;font-weight:700;transition:opacity .15s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:disabled{opacity:.4;cursor:default}
.btn-ghost{flex:0 0 auto;padding:16px 18px;background:var(--surface);border:1px solid var(--line);color:var(--sub)}

/* 시작 화면 */
.intro{padding-top:8vh}
.intro .mark{font-family:'GabiaGosran',"Pretendard Variable",sans-serif;font-size:20px;font-weight:400;color:var(--primary);margin-bottom:14px}
.intro h1{font-size:28px}
.intro p{margin-top:14px;color:var(--sub)}
.intro .meta{margin-top:26px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);font-size:14px;color:var(--sub)}

/* 동의 */
.agree-all-box{margin-top:18px;background:var(--primary-soft);border-radius:var(--radius);overflow:hidden}
.agree-all-box .qrow{font-weight:700}
.agrow{display:flex;align-items:center;border-top:1px solid var(--line)}
.agrow:first-child{border-top:0}
.agrow .qrow{flex:1;border-top:0}
.see{border:0;background:none;color:var(--sub);font-size:13.5px;padding:16px 16px 16px 4px;text-decoration:underline;flex:0 0 auto}
.agbody{padding:0 16px 16px 52px;font-size:13.5px;color:var(--sub)}
.req{color:var(--danger);font-size:13px;font-weight:700}
.opt{color:var(--sub);font-size:13px;font-weight:700}

/* 입력 */
.field{margin-top:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.field input{width:100%;padding:15px 16px;font:inherit;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.field input:focus{outline:none;border-color:var(--primary)}
.err{display:none;margin-top:6px;font-size:13px;color:var(--danger)}

/* 결과 */
.r-group{margin-top:16px;font-size:15px;color:var(--sub)}
.r-group b{color:var(--ink)}
.typecard{margin-top:14px;background:var(--primary);color:#fff;border-radius:18px;padding:26px 22px}
.typecard .code{font-size:44px;font-weight:800;letter-spacing:.01em;line-height:1}
.typecard .code small{font-size:22px;font-weight:700;margin-left:8px}
.typecard .alias{margin-top:8px;font-size:14px;font-weight:600;color:rgba(255,255,255,.85);letter-spacing:.02em}
.typecard .catch{font-family:'GabiaGosran',"Pretendard Variable",sans-serif;margin-top:14px;font-size:21px;font-weight:400;line-height:1.5}
.typecard .catch::before{content:"“"}.typecard .catch::after{content:"”"}
.typecard .lv{display:inline-block;margin-bottom:12px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.18);font-size:12.5px;font-weight:600}
.r-desc{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.r-desc p + p{margin-top:10px}
.r-desc .adv{color:var(--primary);font-weight:600}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.badge{padding:7px 12px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--sub)}
.r-sec{margin-top:26px}
.r-sec h3{font-size:16px;font-weight:700;margin-bottom:10px}
.auto-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;margin-top:8px}
.auto-item b{display:block}
.auto-item span{font-size:14px;color:var(--sub)}
.note{margin-top:8px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);font-size:14px;color:var(--sub)}
.sahyang{margin-top:26px;background:var(--amber-soft);border:1px solid #E4D2B4;border-radius:var(--radius);padding:20px}
.sahyang h3{color:var(--amber);font-size:16.5px;margin-bottom:8px}
.sahyang p{font-size:14.5px}
.sahyang .btn{width:100%;margin-top:14px;background:var(--amber);color:#fff;display:block;text-align:center;text-decoration:none;padding:15px;border-radius:var(--radius);font-weight:700}
.call{display:block;margin-top:26px;text-align:center;background:var(--surface);border:1.5px solid var(--primary);color:var(--primary);font-weight:700;padding:16px;border-radius:var(--radius);text-decoration:none}
.linkrow{display:flex;gap:10px;margin-top:10px}
.btn-link{flex:1;text-align:center;background:var(--surface);border:1px solid var(--line);color:var(--sub);font-weight:600;font-size:14.5px;padding:13px;border-radius:var(--radius);text-decoration:none}
.disclaim{margin-top:20px;font-size:12.5px;color:#8B968E;text-align:center}
.hidden{display:none}
/* ---- 모션 ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes grow{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.ani{animation:fadeUp .38s cubic-bezier(.2,.7,.3,1) both;animation-delay:min(calc(var(--i,0)*45ms),650ms)}
.qrow input:checked + .box{animation:pop .28s cubic-bezier(.3,1.4,.5,1)}
.sopt input:checked + span{animation:pop .22s ease-out}
.radar-val{transform-box:fill-box;transform-origin:center;animation:grow .7s cubic-bezier(.2,.7,.3,1) .25s both}
.hub h1,.hub .sub,.hub .cat,.hub .langs,.hub .disclaim{animation:fadeUp .4s cubic-bezier(.2,.7,.3,1) both}
.hub .sub{animation-delay:.08s}
.hub .cat:nth-of-type(1){animation-delay:.18s}
.hub .cat:nth-of-type(2){animation-delay:.28s}
.hub .cat:nth-of-type(3){animation-delay:.38s}
.hub .langs,.hub .disclaim{animation-delay:.5s}
.cat:active{transform:scale(.985)}
.btn-primary:not(:disabled):active,.call:active,.btn-link:active{transform:scale(.97)}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}

/* 언어 선택 */
.langs{margin-top:18px;font-size:13.5px;color:var(--sub);text-align:center}
.langs a{color:var(--sub);text-decoration:none;padding:0 7px}
.langs a.cur{color:var(--primary);font-weight:700}
.langs a+a{border-left:1px solid var(--line)}

/* 단일 선택(라디오) */
.qhead-sub{margin-left:auto;font-size:12px;font-weight:600;color:var(--sub)}
.qrow-single .box{border-radius:50%}
.qrow-single .box::after{width:10px;height:10px;border:0;border-radius:50%;background:#fff;transform:none}
/* 척도 문항 */
.srow{padding:14px 16px;border-top:1px solid var(--line)}
.srow:first-child{border-top:0}
.stxt{font-size:15.5px;margin-bottom:10px}
.scale{display:flex;gap:6px}
.sopt{flex:1;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sopt input{position:absolute;opacity:0;pointer-events:none}
.sopt span{display:block;text-align:center;padding:10px 0;border:1.5px solid var(--line);border-radius:10px;font-weight:700;color:var(--sub);background:var(--surface);transition:all .15s}
.sopt input:checked + span{background:var(--primary);border-color:var(--primary);color:#fff}
/* FDI 결과 */
.fdi-score{font-weight:800;color:var(--primary);margin-left:6px}
.fdi-bar{height:8px;background:#EEF1ED;border-radius:4px;overflow:hidden;margin:8px 0}
.fdi-bar i{display:block;height:100%;background:var(--amber);border-radius:4px}
/* 허브 */
.hub{padding-top:4vh}
.hub h1{font-size:26px}
.hub .sub{margin-top:10px;color:var(--sub)}
.cat{display:block;margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.cat:hover{border-color:var(--primary)}
.cat b{display:block;font-size:18px;color:var(--primary);margin-bottom:4px}
.cat span{font-size:14px;color:var(--sub)}
.cat .arrow{float:right;color:var(--primary);font-weight:800;margin-top:10px}