:root{
  /* PASSMATE 브랜드 컬러 */
  --iv:#F5F7F6;--ivd:#E8EDEA;--wh:#FFFFFF;

  /* 메인: 세이지 그린 (로고 주색) */
  --fo:#4A7C6F;--fom:#5A9080;--fol:#6BA898;

  /* 포인트: 스틸 블루 (로고 보조색) */
  --go:#4A7FA8;--gol:#6A9FC8;

  /* 경고/에러 */
  --bl:#C0504A;--sg:#8AB4A8;

  /* 텍스트/보더 */
  --st:#6B7B76;--stl:#A8B8B2;--stp:#D8E4E0;
  --ink:#1A2420;

  --r:12px;--rl:20px;
  --sh:0 4px 24px rgba(74,124,111,.10);--shl:0 12px 48px rgba(74,124,111,.14);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;background:var(--iv);color:var(--ink);min-height:100vh;}

/* NAV */
.nav{padding:18px 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--stp);background:var(--wh);}
.logo{font-family:'DM Serif Display',serif;font-size:22px;color:var(--fo);}
.logo em{font-style:italic;color:var(--go);}
.nav-r{display:flex;gap:10px;}
.btn-g{background:none;border:1.5px solid var(--stp);border-radius:var(--r);padding:8px 18px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--st);cursor:pointer;transition:all .2s;}
.btn-g:hover{border-color:var(--fo);color:var(--fo);}
.btn-p{background:var(--fo);border:none;border-radius:var(--r);padding:9px 20px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:var(--wh);cursor:pointer;transition:all .2s;}
.btn-p:hover{background:var(--fom);transform:translateY(-1px);}

/* LANDING */
#pg-land{min-height:100vh;}
.hero{display:grid;grid-template-columns:1fr 1fr;max-width:1100px;margin:0 auto;padding:64px 48px;gap:40px;align-items:center;}
.hero-eyebrow{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--go);margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.hero-eyebrow::before{content:'';width:22px;height:1.5px;background:var(--go);}
.hero-h1{font-family:'DM Serif Display',serif;font-size:50px;line-height:1.15;color:var(--fo);letter-spacing:-1px;margin-bottom:18px;}
.hero-h1 em{font-style:italic;color:var(--go);}
.hero-p{font-size:15px;color:var(--st);line-height:1.7;margin-bottom:32px;font-weight:300;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.btn-big{background:var(--fo);border:none;border-radius:var(--r);padding:13px 30px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;color:var(--wh);cursor:pointer;transition:all .2s;}
.btn-big:hover{background:var(--fom);transform:translateY(-2px);box-shadow:var(--shl);}
.btn-big-o{background:none;border:1.5px solid var(--fo);border-radius:var(--r);padding:12px 26px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;color:var(--fo);cursor:pointer;transition:all .2s;}
.btn-big-o:hover{background:var(--fo);color:var(--wh);}

/* floating cards */
.cards{position:relative;height:400px;}
.fc{position:absolute;border-radius:var(--rl);padding:22px;box-shadow:var(--shl);}
.fc1{background:var(--fo);color:var(--wh);width:300px;top:0;left:50px;animation:fl 4s ease-in-out infinite;}
.fc2{background:var(--wh);width:190px;top:190px;left:0;border:1px solid var(--stp);animation:fl 4s ease-in-out infinite .8s;}
.fc3{background:var(--ivd);width:210px;top:70px;left:270px;border:1px solid var(--stp);animation:fl 4s ease-in-out infinite 1.6s;}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.fc-badge{display:inline-block;font-size:10px;font-weight:600;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.14);color:rgba(255,255,255,.8);margin-bottom:12px;margin-right:6px;}
.fc-q{font-size:13px;line-height:1.6;color:rgba(255,255,255,.9);margin-bottom:14px;}
.fc-row{display:flex;align-items:center;gap:7px;}
.fc-av{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:12px;}
.fc-avl{font-size:11px;color:rgba(255,255,255,.55);}
.fc2-lbl{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--st);margin-bottom:10px;}
.fc2-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
.fc2-name{font-size:12px;color:var(--ink);}
.chip{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;}
.cg{background:#EBF5EE;color:var(--fom);}
.cw{background:#FDF6E3;color:var(--go);}
.fc3-score{font-family:'DM Serif Display',serif;font-size:44px;color:var(--fo);line-height:1;}
.fc3-sub{font-size:11px;color:var(--st);margin:4px 0 10px;}
.tag-r{display:flex;flex-wrap:wrap;gap:5px;}
.tag{font-size:10px;padding:3px 9px;border-radius:20px;background:var(--stp);color:var(--st);}
.tag.g{background:#EBF5EE;color:var(--fom);}

/* FEATURES */
.feats{background:var(--wh);padding:48px 48px 40px;border-top:1px solid var(--stp);}
.feats-h{font-family:'DM Serif Display',serif;font-size:34px;color:var(--fo);text-align:center;margin-bottom:6px;}
.feats-s{font-size:14px;color:var(--st);text-align:center;margin-bottom:44px;font-weight:300;}
.feats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto;}
.feat{padding:26px;border-radius:var(--rl);border:1px solid var(--stp);transition:all .2s;}
.feat:hover{border-color:var(--fo);transform:translateY(-3px);box-shadow:var(--sh);}
.feat-ic{font-size:30px;margin-bottom:14px;}
.feat-t{font-size:15px;font-weight:600;color:var(--fo);margin-bottom:7px;}
.feat-d{font-size:13px;color:var(--st);line-height:1.6;}

/* SETUP */
#pg-setup{display:none;min-height:100vh;background:var(--iv);}
.setup-wrap{max-width:540px;margin:0 auto;padding:48px 24px;}
.back-btn{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--st);cursor:pointer;margin-bottom:24px;transition:color .2s;}
.back-btn:hover{color:var(--fo);}
.setup-ttl{font-family:'DM Serif Display',serif;font-size:26px;color:var(--fo);}
.setup-ttl em{font-style:italic;color:var(--go);}
.setup-sub{font-size:13px;color:var(--st);margin:4px 0 28px;font-weight:300;}
.setup-card{background:var(--wh);border-radius:var(--rl);padding:32px;box-shadow:var(--shl);border:1px solid var(--stp);}
.fsec{margin-bottom:22px;}
.flbl{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--st);margin-bottom:9px;display:block;}
.finp{width:100%;background:var(--iv);border:1.5px solid var(--stp);border-radius:var(--r);padding:11px 14px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--ink);outline:none;transition:all .2s;}
.finp:focus{border-color:var(--fo);background:var(--wh);}
.finp::placeholder{color:var(--stl);}
.ogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.oc{background:var(--iv);border:1.5px solid var(--stp);border-radius:var(--r);padding:14px 10px;text-align:center;cursor:pointer;transition:all .2s;user-select:none;}
.oc:hover{border-color:var(--fol);background:var(--wh);}
.oc.on{background:var(--fo);border-color:var(--fo);}
.oc.on .ol,.oc.on .os{color:rgba(255,255,255,.9);}
.oc.on .os{color:rgba(255,255,255,.5);}
.oi{font-size:22px;margin-bottom:7px;}
.ol{font-size:13px;font-weight:500;color:var(--ink);}
.os{font-size:11px;color:var(--st);margin-top:2px;}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.mc{border:1.5px solid var(--stp);border-radius:var(--r);padding:16px;cursor:pointer;transition:all .2s;background:var(--iv);}
.mc:hover{border-color:var(--fol);background:var(--wh);}
.mc.on{border-color:var(--fo);background:var(--fo);}
.mc.on .mt,.mc.on .md{color:rgba(255,255,255,.9);}
.mc.on .md{color:rgba(255,255,255,.5);}
.mt{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:3px;}
.md{font-size:11px;color:var(--st);line-height:1.5;}
.btn-begin{width:100%;background:var(--fo);color:var(--wh);border:none;border-radius:var(--r);padding:14px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;margin-top:6px;letter-spacing:.2px;}
.btn-begin:hover{background:var(--fom);transform:translateY(-1px);box-shadow:var(--sh);}

/* INTERVIEW */
#pg-int{display:none;height:100vh;flex-direction:column;background:var(--iv);overflow:hidden;}
.int-nav{background:var(--wh);border-bottom:1px solid var(--stp);padding:11px 22px;display:flex;align-items:center;justify-content:space-between;}
.int-info{display:flex;align-items:center;gap:8px;}
.ibadge{font-size:11px;font-weight:600;padding:3px 11px;border-radius:20px;}
.ib-j{background:var(--fo);color:var(--wh);}
.ib-t{background:var(--ivd);color:var(--st);border:1px solid var(--stp);}
.ib-m{background:#EBF5EE;color:var(--fom);}
.tpill{display:flex;align-items:center;gap:7px;background:var(--ivd);border:1px solid var(--stp);border-radius:100px;padding:5px 13px;}
.tdot{width:6px;height:6px;border-radius:50%;background:var(--fol);}
.tdot.w{background:var(--go);}
.tdot.d{background:var(--bl);animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.tval{font-size:13px;font-weight:600;color:var(--fo);font-variant-numeric:tabular-nums;}
.tval.w{color:var(--go);}
.tval.d{color:var(--bl);}

.int-body{flex:1;display:flex;overflow:hidden;}

/* cam panel */
.cpanel{width:272px;flex-shrink:0;background:var(--wh);border-right:1px solid var(--stp);display:flex;flex-direction:column;overflow-y:auto;}
.cp-sec{padding:14px 14px 0;}
.cambox{background:var(--fo);border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;position:relative;margin-bottom:14px;}
#vfeed{width:100%;height:100%;object-fit:cover;}
.cam-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:rgba(255,255,255,.35);font-size:12px;}
.cam-off-ic{font-size:28px;}
.clive{position:absolute;top:8px;left:8px;background:rgba(30,61,47,.65);backdrop-filter:blur(4px);border-radius:100px;padding:3px 9px;display:flex;align-items:center;gap:4px;font-size:10px;color:rgba(255,255,255,.8);}
.ldot{width:5px;height:5px;border-radius:50%;background:#4CAF50;animation:blink 1.5s infinite;}
.sec-t{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--st);margin-bottom:10px;}
.metrics{display:flex;flex-direction:column;gap:9px;padding:0 14px 14px;}
.mrow{display:flex;align-items:center;justify-content:space-between;}
.mlbl{font-size:13px;color:var(--ink);}
.mchip{font-size:10px;font-weight:600;padding:2px 9px;border-radius:20px;}
.mg{background:#EBF5EE;color:var(--fom);}
.mw{background:#FDF6E3;color:var(--go);}
.mb{background:#FEF0ED;color:var(--bl);}
.fbbox{margin:0 14px 14px;background:var(--ivd);border-radius:var(--r);padding:11px;border-left:3px solid var(--go);font-size:11px;color:var(--st);line-height:1.6;}
.fblbl{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--go);margin-bottom:5px;}

/* chat */
.chatpanel{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.chatscroll{flex:1;overflow-y:auto;padding:22px 26px;display:flex;flex-direction:column;gap:18px;}
.chatscroll::-webkit-scrollbar{width:3px;}
.chatscroll::-webkit-scrollbar-thumb{background:var(--stp);}
.bwrap{display:flex;gap:11px;max-width:76%;animation:min .28s ease;}
.bwrap.ai{align-self:flex-start;}
.bwrap.me{align-self:flex-end;flex-direction:row-reverse;}
@keyframes min{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.bav{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;}
.bav-ai{background:var(--fo);}
.bav-me{background:var(--go);}
.bname{font-size:10px;font-weight:600;color:var(--stl);letter-spacing:.04em;margin-bottom:4px;}
.bwrap.me .bname{text-align:right;}
.bubble{padding:13px 16px;border-radius:var(--rl);font-size:14px;line-height:1.7;position:relative;}
.bubble.ai{background:var(--wh);border:1px solid var(--stp);border-radius:4px var(--rl) var(--rl) var(--rl);color:var(--ink);box-shadow:0 2px 8px rgba(30,61,47,.06);}
.bubble.me{background:var(--fo);color:rgba(255,255,255,.95);border-radius:var(--rl) 4px var(--rl) var(--rl);}
.tts-b{position:absolute;bottom:7px;right:10px;background:none;border:none;cursor:pointer;font-size:11px;color:var(--stl);transition:color .2s;}
.tts-b:hover{color:var(--fo);}
.typing{background:var(--wh);border:1px solid var(--stp);border-radius:4px var(--rl) var(--rl) var(--rl);padding:13px 16px;display:flex;gap:4px;align-items:center;box-shadow:0 2px 8px rgba(30,61,47,.06);}
.td{width:5px;height:5px;background:var(--stp);border-radius:50%;animation:td 1.2s infinite;}
.td:nth-child(2){animation-delay:.2s;}
.td:nth-child(3){animation-delay:.4s;}
@keyframes td{0%,60%,100%{transform:translateY(0);background:var(--stp)}30%{transform:translateY(-5px);background:var(--st)}}

.inpzone{background:var(--wh);border-top:1px solid var(--stp);padding:14px 22px;}
.recbar{display:none;align-items:center;gap:7px;background:#FEF8EE;border:1px solid #F0D890;border-radius:var(--r);padding:7px 13px;margin-bottom:9px;font-size:12px;color:var(--go);font-weight:500;}
.recbar.on{display:flex;}
.rdot{width:6px;height:6px;border-radius:50%;background:var(--bl);animation:blink .8s infinite;}
.inprow{display:flex;gap:9px;align-items:flex-end;}
.ainp{flex:1;background:var(--iv);border:1.5px solid var(--stp);border-radius:var(--r);padding:11px 14px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--ink);outline:none;resize:none;min-height:46px;max-height:110px;transition:border-color .2s;line-height:1.5;}
.ainp:focus{border-color:var(--fo);background:var(--wh);}
.ainp::placeholder{color:var(--stl);}
.bmic{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--stp);background:var(--iv);color:var(--st);cursor:pointer;font-size:16px;transition:all .2s;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.bmic:hover{border-color:var(--fo);color:var(--fo);}
.bmic.rec{background:var(--bl);border-color:var(--bl);color:var(--wh);animation:blink 1s infinite;}
.bsend{height:46px;padding:0 20px;background:var(--fo);color:var(--wh);border:none;border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;flex-shrink:0;}
.bsend:hover{background:var(--fom);}
.bsend:disabled{background:var(--stp);color:var(--stl);cursor:not-allowed;}

/* ── voice panel: 좌우 2단 레이아웃 ── */
.voicepanel{flex:1;display:none;flex-direction:row;width:100%;overflow:hidden;}

/* 왼쪽: 면접관 이미지 고정 영역 */
.voice-fixed{
  width:42%;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:32px 24px;
  background:var(--iv);
  border-right:1px solid var(--stp);
}

/* 오른쪽: 질문+입력 영역 */
.voice-right{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
}

/* 오른쪽 스크롤 영역 */
.voice-scroll{flex:1;overflow-y:auto;padding:32px 40px 16px;display:flex;flex-direction:column;gap:16px;}

/* 오른쪽 고정 하단 입력창 */
.voice-input{flex-shrink:0;padding:16px 40px 24px;border-top:1px solid var(--stp);background:var(--iv);}
.vvis{position:relative;width:150px;height:150px;}
.vring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--stp);animation:vr 2s ease-in-out infinite;}
.vring:nth-child(2){animation-delay:.4s;border-color:var(--sg);}
.vring:nth-child(3){animation-delay:.8s;border-color:var(--fol);}
@keyframes vr{0%{transform:scale(.85);opacity:0}50%{opacity:.5}100%{transform:scale(1.2);opacity:0}}
.vcenter{position:absolute;inset:18px;border-radius:50%;background:var(--fo);display:flex;align-items:center;justify-content:center;font-size:38px;box-shadow:var(--shl);}
.vstatus{font-size:13px;color:var(--st);font-weight:300;}
.vqbox{background:var(--wh);border-radius:var(--rl);padding:24px 28px;width:100%;box-shadow:var(--sh);border:1px solid var(--stp);}
.vqlbl{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fo);margin-bottom:10px;}
.vqtxt{font-size:16px;color:var(--ink);line-height:1.75;}
.vinprow{display:flex;gap:10px;width:100%;}

/* REPORT */
#pg-rep{display:none;min-height:100vh;background:var(--iv);padding:48px 24px;}
.repwrap{max-width:680px;margin:0 auto;}
.rlogo{font-family:'DM Serif Display',serif;font-size:24px;color:var(--fo);}
.rlogo em{font-style:italic;color:var(--go);}
.rdate{font-size:12px;color:var(--st);margin:3px 0 32px;}
.scorehero{background:var(--fo);border-radius:var(--rl);padding:28px;display:flex;align-items:center;gap:24px;margin-bottom:18px;overflow:hidden;position:relative;}
.scorehero::after{content:'';position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;border:30px solid rgba(255,255,255,.04);}
.sdial{position:relative;width:84px;height:84px;flex-shrink:0;}
.sdial svg{transform:rotate(-90deg);}
.sdial circle{fill:none;stroke-width:5;}
.sdtrack{stroke:rgba(255,255,255,.15);}
.sdfill{stroke:var(--gol);stroke-linecap:round;transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);}
.sdinn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.sdnum{font-family:'DM Serif Display',serif;font-size:24px;color:var(--wh);line-height:1;}
.sdunit{font-size:9px;color:rgba(255,255,255,.45);}
.stxt h3{font-size:17px;font-weight:600;color:var(--wh);margin-bottom:7px;}
.stxt p{font-size:12px;color:rgba(255,255,255,.6);line-height:1.65;}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.rcard{background:var(--wh);border-radius:var(--rl);padding:20px;border:1px solid var(--stp);box-shadow:0 2px 10px rgba(30,61,47,.05);}
.rcard.full{grid-column:1/-1;}
.rchead{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--st);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.rpip{width:5px;height:5px;border-radius:50%;}
.ppg{background:var(--fol);}
.ppr{background:var(--bl);}
.ppa{background:var(--go);}
.ppb{background:var(--fo);}
.tagrow{display:flex;flex-wrap:wrap;gap:7px;}
.rtag{font-size:11px;font-weight:500;padding:4px 12px;border-radius:20px;}
.rtg{background:#EBF5EE;color:var(--fom);}
.rtr{background:#FEF0ED;color:var(--bl);}
.rta{background:#FDF6E3;color:var(--go);}
.rcbody{font-size:13px;color:var(--st);line-height:1.7;}
.btnredo{width:100%;background:var(--fo);color:var(--wh);border:none;border-radius:var(--r);padding:14px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;margin-top:6px;}
.btnredo:hover{background:var(--fom);transform:translateY(-1px);box-shadow:var(--sh);}

/* 파일 업로드 */
.file-upload-label{display:flex;align-items:center;gap:8px;background:var(--iv);border:1.5px dashed var(--stp);border-radius:var(--r);padding:11px 14px;font-size:13px;color:var(--st);cursor:pointer;transition:all .2s;}
.file-upload-label:hover{border-color:var(--fo);color:var(--fo);background:var(--wh);}
.file-upload-label.has-file{border-color:var(--fol);background:#EBF5EE;color:var(--fom);}

/* 면접관 아바타 — 실사 이미지 크로스페이드 */
.avatar-container{position:relative;width:100%;max-width:340px;aspect-ratio:3/4;border-radius:24px;overflow:hidden;box-shadow:0 12px 40px rgba(30,61,47,0.25);flex-shrink:0;flex-grow:0;}
.avatar-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity 0.6s ease-in-out;z-index:1;}
.avatar-img.active{opacity:1;z-index:2;}
/* talking 효과: 테두리 글로우 */
.avatar-container.talking{box-shadow:0 12px 40px rgba(30,61,47,0.25),0 0 0 3px var(--fol);}
/* 감정별 테두리 색 */
.avatar-container.happy{box-shadow:0 12px 40px rgba(30,61,47,0.25),0 0 0 3px var(--fol);}
.avatar-container.frown{box-shadow:0 12px 40px rgba(196,136,42,0.3),0 0 0 3px var(--go);}
.avatar-container.angry{box-shadow:0 12px 40px rgba(232,80,58,0.35),0 0 0 3px var(--bl);}
/* 점수 배지 */
.score-badge{position:absolute;bottom:10px;right:10px;background:var(--fo);color:var(--wh);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;transition:all .5s;border:2px solid rgba(255,255,255,0.3);z-index:10;backdrop-filter:blur(4px);}
.score-badge.warn{background:var(--go);}
.score-badge.bad{background:var(--bl);}
.score-badge.orange{background:#E8753A;}
.emotion-label{font-size:11px;color:var(--stl);margin-top:8px;height:18px;text-align:center;transition:all .3s;letter-spacing:.05em;}

@media(max-width:768px){
  .hero{grid-template-columns:1fr;padding:36px 20px;}
  .cards{display:none;}
  .hero-h1{font-size:34px;}
  .feats-grid{grid-template-columns:1fr;}
  .nav{padding:14px 20px;}
  .cpanel{display:none;}
  .rgrid{grid-template-columns:1fr;}
  .scorehero{flex-direction:column;text-align:center;}
}

/* ── TOAST ── */
#toast-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:9px;pointer-events:none;min-width:260px;max-width:400px;}
.toast{background:var(--wh);border-radius:var(--r);padding:12px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,.14);border:1px solid var(--stp);font-size:13px;color:var(--ink);animation:tsIn .28s ease;pointer-events:auto;}
.toast.err{border-left:3px solid var(--bl);}
.toast.warn{border-left:3px solid var(--go);}
.toast.ok{border-left:3px solid var(--fol);}
.toast-ic{font-size:16px;flex-shrink:0;}
.toast-close{margin-left:auto;background:none;border:none;cursor:pointer;font-size:16px;color:var(--stl);padding:0 0 0 8px;}
@keyframes tsIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes tsOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
/* ── SPINNER OVERLAY ── */
#spin-overlay{display:none;position:fixed;inset:0;background:rgba(247,244,238,.88);backdrop-filter:blur(4px);z-index:8888;flex-direction:column;align-items:center;justify-content:center;gap:18px;}
#spin-overlay.on{display:flex;}
.spin-ring{width:48px;height:48px;border:3px solid var(--stp);border-top-color:var(--fo);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-msg{font-size:14px;color:var(--st);font-weight:300;}
/* ── 시작 버튼 로딩 ── */
.btn-begin{width:100%;background:var(--fo);color:var(--wh);border:none;border-radius:var(--r);padding:14px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;margin-top:6px;letter-spacing:.2px;display:flex;align-items:center;justify-content:center;gap:9px;}
.btn-begin:hover:not(:disabled){background:var(--fom);transform:translateY(-1px);box-shadow:var(--sh);}
.btn-begin:disabled{background:var(--fom);cursor:not-allowed;opacity:.85;}
.btn-begin .btn-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none;}
.btn-begin.loading .btn-spin{display:block;}
/* ── 인터뷰 로딩 배너 ── */
#int-loading{display:none;align-items:center;justify-content:center;gap:12px;padding:18px;background:var(--ivd);border-bottom:1px solid var(--stp);font-size:13px;color:var(--st);}
#int-loading.on{display:flex;}
#int-loading .spin-ring{width:18px;height:18px;border-width:2px;}
/* ── 전송 버튼 로딩 ── */
.ainp:disabled{opacity:.55;cursor:not-allowed;}
.bsend{height:46px;padding:0 20px;background:var(--fo);color:var(--wh);border:none;border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;flex-shrink:0;display:flex;align-items:center;gap:7px;}
.bsend:hover:not(:disabled){background:var(--fom);}
.bsend:disabled{background:var(--stp);color:var(--stl);cursor:not-allowed;}
.bsend .btn-spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none;}
.bsend.sending .btn-spin{display:block;}
/* ── 리포트 로딩 / 에러 ── */
.rep-loading{text-align:center;padding:60px;color:var(--st);display:flex;flex-direction:column;align-items:center;gap:16px;}
.rep-loading .spin-ring{width:36px;height:36px;}
.rep-err{background:var(--wh);border-radius:var(--rl);padding:28px;border-left:4px solid var(--bl);margin-bottom:14px;}
.rep-err-t{font-size:14px;font-weight:600;color:var(--bl);margin-bottom:7px;}
.rep-err-d{font-size:13px;color:var(--st);line-height:1.6;}
/* 면접관 이름/직책 */
.interviewer-info{text-align:center;margin-bottom:4px;}
.interviewer-name{font-family:'DM Serif Display',serif;font-size:18px;color:var(--fo);font-weight:600;}
.interviewer-title{font-size:11px;color:var(--st);margin-top:2px;letter-spacing:.03em;}

/* 면접 진행률 바 */
.progress-wrap{padding:0 22px;background:var(--wh);border-bottom:1px solid var(--stp);}
.progress-bar-bg{height:4px;background:var(--stp);border-radius:2px;overflow:hidden;}
.progress-bar-fill{height:100%;background:var(--fo);border-radius:2px;transition:width .5s ease;width:0%;}
.progress-info{display:flex;justify-content:space-between;align-items:center;padding:6px 0;}
.progress-pct{font-size:11px;font-weight:600;color:var(--fo);}
.progress-label{font-size:11px;color:var(--stl);}

/* 질문 목록 */
.q-list{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.q-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--iv);border-radius:var(--r);border:1px solid var(--stp);transition:border-color .2s;}
.q-item:hover{border-color:var(--fo);}
.q-num{font-size:10px;font-weight:700;color:var(--wh);background:var(--fo);border-radius:6px;padding:2px 7px;flex-shrink:0;margin-top:2px;}
.q-txt{flex:1;font-size:13px;color:var(--ink);line-height:1.6;}
.q-bm{background:none;border:none;cursor:pointer;font-size:18px;color:var(--stl);padding:0 4px;transition:all .2s;flex-shrink:0;}
.q-bm:hover{color:var(--go);transform:scale(1.2);}
.q-bm.on{color:var(--go);}

/* Auth */
.auth-tab{flex:1;background:none;border:none;border-radius:9px;padding:9px 16px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:var(--st);cursor:pointer;transition:all .2s;}
.auth-tab.on{background:var(--wh);color:var(--fo);box-shadow:0 2px 8px rgba(30,61,47,.1);}

/* 로고 클릭 */
.logo{cursor:default;}
.logo[onclick]{cursor:pointer;transition:opacity .2s;}
.logo[onclick]:hover{opacity:.75;}

/* 직군 태그 선택 */
.job-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px;}
.job-tag{background:var(--iv);border:1.5px solid var(--stp);border-radius:20px;padding:5px 14px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;color:var(--st);cursor:pointer;transition:all .2s;}
.job-tag:hover{border-color:var(--fol);color:var(--fo);background:var(--wh);}
.job-tag.on{background:var(--fo);border-color:var(--fo);color:var(--wh);}

/* 이력서 구조화 입력 */
.resume-fields{display:flex;flex-direction:column;gap:10px;}
.resume-field{display:flex;flex-direction:column;gap:5px;}
.resume-field-label{font-size:11px;font-weight:600;color:var(--st);letter-spacing:.04em;}

/* 로고 */
.logo img{height:28px;vertical-align:middle;margin-right:6px;}

/* 직군 태그 */
.job-tag{background:var(--iv);border:1.5px solid var(--stp);border-radius:20px;padding:6px 14px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;color:var(--st);cursor:pointer;transition:all .2s;white-space:nowrap;}
.job-tag:hover{border-color:var(--fol);color:var(--fo);}
.job-tag.on{background:var(--fo);border-color:var(--fo);color:#fff;}
.job-tag.direct{border-style:dashed;}
.job-tag.direct.on{background:var(--go);border-color:var(--go);}

/* 이력서 탭 */
.resume-tab{flex:1;background:none;border:none;border-radius:8px;padding:8px 12px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;color:var(--st);cursor:pointer;transition:all .2s;}
.resume-tab.on{background:var(--wh);color:var(--fo);box-shadow:0 1px 6px rgba(30,61,47,.1);}