/* AI 모의면접 공통 스타일 (2026-10-04) — 채용 플랫폼 모의면접 화면처럼 넉넉한 여백·큰 글자·둥근 카드.
   글자 크기 단계: 본문 16 / 보조 14 / 소제목 18 / 단계 제목 24 / 질문 21 */
:root{
  --navy:#0b1424; --pri:#6d3df5; --pri-d:#5b2fd9; --pri-l:#f3effe;
  --teal:#0f9b8e; --teal-d:#0b6f66; --teal-l:#e8f7f4;
  --gold:#e8b400; --gold-l:#fff7da; --violet:#6a4ce0; --violet-l:#f0ecff;
  --ink:#1b2333; --sub:#5f6b7d; --mute:#8a95a5; --line:#e6e9ef; --bg:#f5f7fb;
  --red:#d63c3c; --red-l:#fdecec;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
a{color:inherit}
.wrap{max-width:820px;margin:0 auto;padding:20px 18px 40px}
.narrow{max-width:600px;margin-left:auto;margin-right:auto}
header.top{background:#fff;border-bottom:1px solid var(--line)}
header.top .in{max-width:820px;margin:0 auto;padding:14px 18px;display:flex;justify-content:space-between;align-items:center}
header.top .logo{font-weight:900;font-size:18px;color:var(--navy);text-decoration:none}
header.top .logo b{color:var(--pri)}
header.top .home{font-size:14px;color:var(--sub);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 26px;margin-top:18px}
@media(max-width:560px){.card{padding:22px 18px}}
h1{font-size:24px;line-height:1.35;margin:0 0 8px;font-weight:800}
h2{font-size:20px;margin:0 0 10px;font-weight:800}
h3{font-size:17px;margin:0 0 8px;font-weight:800}
.wtitle{text-align:center;margin:6px 0 22px}
.wtitle .ico{width:64px;height:64px;border-radius:18px;background:var(--pri-l);display:inline-flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:12px}
.wtitle h1{font-size:24px}
.wtitle .sub{font-size:15px;color:var(--sub);margin-top:4px}
.hint{font-size:14px;color:var(--sub)}
.small{font-size:13px;color:var(--mute)}
label.f{display:block;font-size:15px;font-weight:700;color:var(--ink);margin:22px 0 10px}
label.f .hint{font-weight:500}
select,input[type=text],textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink);transition:border .15s}
select:focus,input[type=text]:focus,textarea:focus{outline:none;border-color:var(--pri)}
textarea{min-height:130px;resize:vertical;line-height:1.6}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:14px 24px;border-radius:999px;font-weight:800;font-size:16px;border:none;cursor:pointer;text-decoration:none;transition:.15s}
.btn.pri{background:var(--pri);color:#fff}
.btn.pri:hover{background:var(--pri-d)}
.btn.gold{background:var(--gold);color:#20180a}
.btn.teal{background:var(--teal);color:#fff}
.btn.navy{background:var(--navy);color:#fff}
.btn.ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.wide{min-width:160px}
.btn:disabled{background:#d8dde6!important;color:#fff!important;border-color:#d8dde6!important;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr;gap:14px}
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}}
.opt{border:1.5px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;background:#fff;transition:.15s;position:relative}
.opt:hover{border-color:#b9c3d6}
.opt.sel{border-color:var(--pri);background:var(--pri-l);box-shadow:0 0 0 1px var(--pri) inset}
.opt.lock{opacity:.5;cursor:not-allowed}
.opt.static{cursor:default}
.opt.static:hover{border-color:var(--line)}
.opt .t{font-weight:800;font-size:17px}
.opt .d{font-size:14px;color:var(--sub);margin-top:6px}
.opt .chk{font-size:14px;color:var(--pri);margin-top:12px;font-weight:700;border-top:1px solid var(--line);padding-top:10px}
.opt .ico{font-size:30px;margin-bottom:8px}
.opt .selmark{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--pri);color:#fff;font-size:13px;display:none;align-items:center;justify-content:center}
.opt.sel .selmark{display:flex}
.band{text-align:center;padding:14px 8px}
.band .t{font-size:16px}
.band .d{font-size:13px}
.badge{display:inline-block;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--bg);color:var(--sub);border:1px solid var(--line)}
.badge.p{background:var(--gold-l);color:#7a5c00;border-color:#f3dd8f}
.badge.r{background:var(--violet-l);color:var(--violet);border-color:#d9d0fb}
.badge.g{background:var(--teal-l);color:var(--teal-d);border-color:#bfe8e1}
.badge.b{background:var(--pri-l);color:var(--pri);border-color:#cdd7fb}
.badge.red{background:var(--red-l);color:var(--red);border-color:#f6caca}
.steps{display:flex;gap:6px;margin:0 auto 18px;max-width:320px}
.steps i{flex:1;height:5px;border-radius:5px;background:var(--line)}
.steps i.on{background:var(--pri)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;font-size:15px;cursor:pointer;background:#fff;transition:.15s}
.chip:hover{border-color:#b9c3d6}
.chip.sel{background:var(--pri);color:#fff;border-color:var(--pri)}
.chip.star{border-color:#f0d27a}
.avatar{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:900;color:#fff;flex:none;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.av-staff{background:linear-gradient(135deg,#34a397,#1f7a70)}.av-lead{background:linear-gradient(135deg,#4f6fc4,#2f4a8e)}.av-exec{background:linear-gradient(135deg,#8460d1,#5a3aa6)}
.pcard{display:flex;gap:16px;align-items:flex-start}
.pcard .meta{font-size:14px;color:var(--sub);margin-top:2px}
.pcard ul{margin:8px 0 0;padding-left:18px;font-size:14px;color:var(--ink)}
.pcard .lv{display:inline-block;margin-top:10px;font-size:13px;font-weight:800;color:var(--pri);background:var(--pri-l);padding:3px 10px;border-radius:8px}
.stage{background:linear-gradient(180deg,#eef1f8,#e6eaf3);border-radius:20px;padding:26px 20px;text-align:center;position:relative}
.stage .nm{font-weight:800;font-size:17px;margin-top:10px}
.stage .rk{font-size:14px;color:var(--sub)}
.stage .timerbox{position:absolute;left:16px;bottom:16px}
.qbox{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;margin-top:14px;box-shadow:0 8px 24px rgba(20,30,60,.05)}
.qnum{font-size:15px;color:var(--mute);font-weight:700;text-align:center}
.qtext{font-size:21px;font-weight:800;line-height:1.5;text-align:center;margin-top:6px}
.fu{display:block;width:max-content;margin:0 auto 8px;background:var(--violet-l);color:var(--violet);font-weight:800;font-size:13px;padding:4px 12px;border-radius:999px}
.timer{font-variant-numeric:tabular-nums;font-weight:900;font-size:16px;padding:6px 14px;border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.timer.warn{background:var(--red-l);color:var(--red)}
.guide{background:#f7f8ff;border:1px solid #e0e5fb;border-radius:16px;padding:18px;margin-top:14px;font-size:15px}
.guide .gl{font-size:13px;font-weight:800;color:var(--pri);margin-bottom:4px}
.kw{display:inline-block;background:#fff;border:1px solid #ddd3fb;border-radius:8px;padding:2px 10px;font-weight:700;margin-right:8px;font-size:13.5px;color:var(--pri-d)}
.modal-bg{position:fixed;inset:0;background:rgba(15,20,35,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal{background:#fff;border-radius:22px;max-width:540px;width:100%;padding:28px 26px;max-height:90vh;overflow:auto}
.modal h2{font-size:21px}
.inner{background:var(--navy);color:#fff;border-radius:16px;padding:16px 18px;font-weight:700;font-size:16px;margin:12px 0}
.fb{border-top:1px solid var(--line);padding-top:14px;margin-top:14px;font-size:15px}
.fb b{font-size:15px}
.next{display:inline-block;background:var(--pri-l);color:var(--pri);font-size:12px;font-weight:900;padding:2px 8px;border-radius:6px;margin-right:8px}
.nexttxt{color:var(--pri-d);font-weight:700}
.load{text-align:center;padding:40px 16px}
.load ul{padding:0;margin:20px auto;display:inline-block;text-align:left}
.load li{list-style:none;margin:10px 0;color:var(--mute);font-size:15px}
.load li::before{content:"○ ";}
.load li.on{color:var(--ink);font-weight:800}
.load li.on::before{content:"◉ ";color:var(--pri)}
.load li.done{color:var(--teal-d)}
.load li.done::before{content:"✓ ";}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-top:10px}
.tab{padding:12px 16px;cursor:pointer;font-weight:700;font-size:16px;color:var(--mute);border-bottom:3px solid transparent}
.tab.on{color:var(--ink);border-color:var(--ink)}
.rep-head{background:linear-gradient(135deg,#231b66,#3d2d96);color:#fff;border-radius:20px;padding:24px;margin-top:14px}
.rep-head .title{font-size:24px;font-weight:900;line-height:1.35}
.rep-head .meta{opacity:.8;font-size:14px;margin-top:6px}
.rep-head .hl{margin-top:12px;font-weight:800;font-size:17px;color:#ffe48a}
.gradeTag{display:inline-block;padding:5px 14px;border-radius:999px;font-weight:900;font-size:14px;margin-top:12px}
.gr-pass{background:#d9f7ee;color:#0b6f66}.gr-mid{background:#fff3cf;color:#7a5c00}.gr-low{background:#fde8e8;color:#c0392b}
.sec{margin-top:26px}
.sec > h3{display:flex;align-items:center;gap:8px}
table.cov{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
table.cov td,table.cov th{border-bottom:1px solid var(--line);padding:11px 8px;text-align:left;vertical-align:top}
table.cov th{font-size:13px;color:var(--mute);font-weight:700}
.item{border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:14px}
.item .qq{font-size:17px;font-weight:800}
.item .sc{font-weight:900;color:var(--pri);font-size:18px}
.better{background:var(--teal-l);border-radius:14px;padding:16px;margin-top:12px;font-size:15px}
.better b{color:var(--teal-d)}
.myans{background:var(--bg);border-radius:14px;padding:16px;margin-top:12px;font-size:15px;white-space:pre-wrap}
.err{background:var(--red-l);color:var(--red);border-radius:12px;padding:12px 14px;font-size:15px;margin-top:12px}
.list{margin:8px 0 0;padding-left:20px;font-size:15px}
.list li{margin:4px 0}
.att{border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:10px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.slides{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
@media(min-width:640px){.slides{grid-template-columns:repeat(3,1fr)}}
.slide{background:var(--bg);border-radius:14px;padding:16px;font-size:14px}
.slide b{display:block;font-size:15px;margin-bottom:4px}
.flow{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.flow .st{text-align:center;min-width:90px}
.flow .st .c{width:56px;height:56px;border-radius:50%;background:var(--pri-l);display:inline-flex;align-items:center;justify-content:center;font-size:24px}
.flow .st .l{font-size:14px;font-weight:700;margin-top:6px}
.flow .st .tm{display:inline-block;font-size:12px;background:var(--gold-l);color:#7a5c00;border-radius:6px;padding:1px 8px;margin-top:4px}
.flow .ar{color:#c3cad6;font-size:18px}
.notice{background:var(--bg);border-radius:16px;padding:20px 22px;margin-top:22px;font-size:13.5px;color:var(--sub)}
.notice h4{margin:0 0 6px;font-size:14.5px;color:var(--ink)}
.notice ul{margin:0 0 12px;padding-left:18px}
.notice li{margin:3px 0}
.tip{position:relative;display:inline-block;cursor:help;color:var(--pri);font-size:14px;font-weight:700}
.tip .bub{display:none;position:absolute;left:0;top:24px;z-index:5;width:260px;background:var(--navy);color:#fff;font-weight:500;font-size:13.5px;border-radius:12px;padding:12px 14px;line-height:1.55}
.tip:hover .bub,.tip:focus .bub{display:block}
.blur{filter:blur(5px);pointer-events:none;user-select:none}
.lockwrap{position:relative;margin-top:18px}
.lockmsg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center}
.lockmsg > div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 22px;box-shadow:0 12px 36px rgba(0,0,0,.14);font-size:15px}
@media print{ header,.noprint,.tabs{display:none!important} body{background:#fff} .card,.item{box-shadow:none;border-color:#ddd} }

/* ---- 음성 면접(iv-voice.js) ---- */
.ivMeter{display:inline-flex;gap:3px;vertical-align:middle;align-items:center}
.ivMeter > i{display:inline-block;width:6px;height:16px;border-radius:3px;background:#dfe4ee}
.ivModeSw{display:flex;background:var(--bg);border-radius:999px;padding:4px;width:max-content;max-width:100%;margin:16px auto 0;gap:4px}
.ivModeSw span{white-space:nowrap}
.ivModeSw span{padding:7px 16px;border-radius:999px;font-weight:700;font-size:14px;color:var(--sub);cursor:pointer}
.ivModeSw span.on{background:#fff;color:var(--pri);box-shadow:0 2px 8px rgba(20,30,60,.08)}
.ivNote{background:var(--gold-l);border-radius:12px;padding:10px 14px;font-size:14px;margin-top:14px;text-align:center}
.ivRec{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.ivMic{width:72px;height:72px;border-radius:50%;border:none;background:var(--pri);color:#fff;font-size:30px;cursor:pointer;box-shadow:0 8px 20px rgba(51,82,224,.3);flex:none}
.ivMic:disabled{background:#c9d0de;box-shadow:none;cursor:not-allowed}
.ivMic.live{background:var(--red);animation:ivPulse 1.4s infinite}
@keyframes ivPulse{0%{box-shadow:0 0 0 0 rgba(214,60,60,.45)}70%{box-shadow:0 0 0 16px rgba(214,60,60,0)}100%{box-shadow:0 0 0 0 rgba(214,60,60,0)}}
.ivRecInfo{display:flex;flex-direction:column;gap:6px;min-width:200px;max-width:420px}
.ivRecSt{font-size:14px;font-weight:700;color:var(--sub)}
.ivRecSt.live{color:var(--red)}
.ivRecSt.bad{color:var(--red)}
.ivTa{margin-top:12px;min-height:160px}
.ivTa[readonly]{background:var(--bg)}
.ivFoot{margin-top:8px;flex-wrap:wrap;gap:6px}
.ivPace{font-size:14px;font-weight:700;color:var(--teal-d)}
.ivLive{font-size:13.5px;font-weight:700;color:var(--pri-d);background:var(--pri-l);border-radius:10px;padding:0 10px;margin-top:6px;max-height:0;opacity:0;overflow:hidden;transition:all .3s}
.ivLive.on{max-height:60px;opacity:1;padding:6px 10px}
.ivLive.warn{color:#9a5b00;background:var(--gold-l)}
.ivLive.good{color:var(--teal-d);background:var(--teal-l)}
.ivTools{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:8px}
.ivTool{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;color:var(--sub);cursor:pointer;font-family:inherit}
.ivCam{position:absolute;right:14px;bottom:14px;width:132px;height:99px;object-fit:cover;border-radius:12px;transform:scaleX(-1);background:#000;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ivCamTag{position:absolute;right:14px;bottom:116px;font-size:11px;color:var(--sub)}
@media(max-width:560px){.ivCam{width:96px;height:72px}.ivCamTag{bottom:90px}}
.ivCamBig{width:100%;max-width:320px;border-radius:12px;transform:scaleX(-1);background:#000;margin-top:10px;display:block}
.ivChk{border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:12px}
.ivChkH{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ivBadge{font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--bg);color:var(--sub)}
.ivBadge.ok{background:var(--teal-l);color:var(--teal-d)}
.ivBadge.bad{background:var(--red-l);color:var(--red)}
.ivSent{font-size:17px;font-weight:800;margin:6px 0 10px;color:var(--navy)}
.ivSpeaking{font-size:13px;color:var(--pri);font-weight:800;margin-top:6px;min-height:20px}

.avatar.avimg{object-fit:cover;background:#dfe4ee;border:3px solid #fff}
.opt.lock .avatar.avimg{filter:grayscale(.6);opacity:.75}
@media(max-width:420px){.ivModeSw{width:100%}.ivModeSw span{flex:1;text-align:center;padding:7px 4px;font-size:13px}}

.ivCoach{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:rgba(11,20,36,.85);color:#fff;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;opacity:0;transition:opacity .3s;pointer-events:none;max-width:90%;text-align:center}
.ivCoach.on{opacity:1}

/* 면접관 사진 움직임 — iv-voice.js setAvState가 body에 iv-talk / iv-listen / iv-react 클래스를 붙인다 */
.ivAv{position:relative;display:inline-block;line-height:0}
.ivAv .avimg{animation:ivBreath 6s ease-in-out infinite;transform-origin:50% 85%;transition:box-shadow .3s}
.ivWave{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;gap:3px;align-items:flex-end;height:18px;padding:3px 8px;border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12);opacity:0;transition:opacity .25s}
.ivWave i{display:block;width:3px;height:4px;border-radius:2px;background:var(--pri)}
.iv-talk .ivAv .avimg{animation:ivTalk 2.6s ease-in-out infinite;box-shadow:0 0 0 4px rgba(51,82,224,.35),0 0 22px rgba(51,82,224,.35)}
.iv-talk .ivWave{opacity:1}
.iv-talk .ivWave i{animation:ivBar .9s ease-in-out infinite}
.iv-talk .ivWave i:nth-child(2){animation-delay:.15s}.iv-talk .ivWave i:nth-child(3){animation-delay:.3s}
.iv-talk .ivWave i:nth-child(4){animation-delay:.45s}.iv-talk .ivWave i:nth-child(5){animation-delay:.6s}
.iv-listen .ivAv .avimg{animation:ivListen 4.2s ease-in-out infinite;box-shadow:0 0 0 4px rgba(15,155,142,.35)}
.iv-react .ivAv .avimg{animation:ivNod 1.2s ease-in-out 1}
@keyframes ivBreath{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.015) rotate(.4deg)}}
@keyframes ivTalk{0%{transform:translateY(0) rotate(0)}12%{transform:translateY(-2px) rotate(-1deg)}25%{transform:translateY(0) rotate(.6deg)}
  38%{transform:translateY(-1px) rotate(1.2deg)}50%{transform:translateY(-2px) rotate(0)}63%{transform:translateY(0) rotate(-.8deg)}
  76%{transform:translateY(-1px) rotate(.5deg)}88%{transform:translateY(-2px) rotate(1deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes ivBar{0%,100%{height:4px}50%{height:14px}}
@keyframes ivListen{0%,70%,100%{transform:translateY(0) rotate(0)}78%{transform:translateY(3px) rotate(.5deg)}86%{transform:translateY(0) rotate(0)}92%{transform:translateY(2px)}}
@keyframes ivNod{0%,100%{transform:translateY(0)}25%{transform:translateY(5px)}50%{transform:translateY(0)}75%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.ivAv .avimg,.iv-talk .ivAv .avimg,.iv-listen .ivAv .avimg,.iv-react .ivAv .avimg,.iv-talk .ivWave i{animation:none}}

/* 연습 면접: PC(넓은 화면)에서 오른쪽 AI 답변 가이드 패널 — .wrap(820px) 밖으로 넓혀 가운데 정렬 */
.ivSide{display:none}
@media(min-width:1180px){
  .ivLayout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;width:min(1180px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%)}
  .ivSide{display:block;position:sticky;top:16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;font-size:15px;max-height:calc(100vh - 32px);overflow:auto}
  .ivSide .gl{font-size:13px;font-weight:800;color:var(--pri);margin-bottom:4px}
  .ivSideHead{font-weight:800;font-size:16px;margin-bottom:12px}
  .ivSideItem{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:8px;line-height:1.6}
  .ivLayout .ivGuideBtn{display:none}
}
/* 내 카메라: 면접관 무대 오른쪽 위에 크게 */
.ivCam{top:14px;bottom:auto;width:220px;height:165px}
.ivCamTag{top:183px;bottom:auto}
@media(max-width:760px){.ivCam{width:120px;height:90px}.ivCamTag{top:106px}}
@media(max-width:560px){.ivCam{width:96px;height:72px}.ivCamTag{top:88px}}
@media(min-width:1180px){.card:has(> .ivLayout){background:transparent;border:none;padding:0;box-shadow:none}}
@media(max-width:420px){.ivCam{width:78px;height:58px;right:10px;top:10px}.ivCamTag{top:70px;right:10px}}

/* 2026-10-06 소개 페이지와 같은 톤 — 홈 상단 사진 배너 + 카드 등장 애니메이션 */
.ivBanner{position:relative;border-radius:26px;overflow:hidden;color:#fff;padding:34px 30px;margin-top:6px;background:#0d1020 url(/assets/iv-img/hero.jpg) 65% 40%/cover no-repeat;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end}
.ivBanner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,13,28,.92) 0%,rgba(10,13,28,.6) 55%,rgba(10,13,28,.15) 100%)}
.ivBanner > *{position:relative}
.ivBanner .eb{font-size:14px;font-weight:800;color:#c4b5fd}
.ivBanner h1{color:#fff;font-size:clamp(26px,3.6vw,36px);font-weight:900;letter-spacing:-.03em;margin:8px 0 10px}
.ivBanner .meta{display:flex;flex-wrap:wrap;gap:8px}
.ivBanner .meta span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;font-size:14.5px;font-weight:700}
.ivUp > *{animation:ivUp .6s cubic-bezier(.2,.8,.2,1) both}
.ivUp > *:nth-child(2){animation-delay:.08s}.ivUp > *:nth-child(3){animation-delay:.16s}.ivUp > *:nth-child(4){animation-delay:.24s}.ivUp > *:nth-child(5){animation-delay:.32s}.ivUp > *:nth-child(6){animation-delay:.4s}
@keyframes ivUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ivUp > *{animation:none}}

/* 2026-10-06 사용자 요청: 상자 안 글씨가 작고 흐림 → 크기·진하기 올림 / 면접관 얼굴 크게(얼굴 중심 사진 _face.jpg) */
:root{--sub:#374151;--mute:#5b6472}
body{color:#111827}
.hint{font-size:15.5px}
.small{font-size:14.5px}
.wtitle .sub{font-size:17px}
.opt .t{font-size:18.5px}
.opt .d{font-size:16px;line-height:1.65;color:#374151}
.pcard .meta{font-size:15.5px}
.pcard ul{font-size:15px}
.flow .st .l{font-size:16px}
.flow .st .tm{font-size:13.5px}
.badge{font-size:14px}
.notice{font-size:15px;line-height:1.75}
.tab{font-size:17px}
.qnum{font-size:16px}
.qtext{font-size:clamp(20px,2.2vw,25px)}
.guide{font-size:16px}
.ivTool{font-size:14px;padding:6px 14px}
.ivModeSw span{font-size:15px}
.ivRecSt{font-size:15px}
.ivBadge{font-size:13.5px}
.stage .nm{font-size:21px;margin-top:14px}
.stage .rk{font-size:15.5px}
.stage .ivAv .avimg{width:210px !important;height:210px !important;border-width:5px}
@media(max-width:560px){.stage .ivAv .avimg{width:150px !important;height:150px !important}}
/* 로딩·종료 화면 안내(사용자: "안내 글자 너무 작고 안 보임") */
.load .wtitle h1{font-size:clamp(24px,2.6vw,30px)}
.load .wtitle .sub{font-size:18px;color:#374151}
.load ul{margin:26px auto}
.load li{font-size:18px;color:#6b7280;margin:14px 0;font-weight:600}
.load li.on{color:#111827;font-weight:800}
.load li.done{color:#0b6f66}
.load .hint{font-size:17px;color:#374151;font-weight:600;margin-top:8px}
.load > h1,#ldTitle{font-size:clamp(26px,2.8vw,32px);line-height:1.4}
.load .stage .avatar{font-size:44px}
.load .stage .nm{font-size:19px}
/* 면접관 얼굴 더 크게(사용자: "여전히 작다") — 얼굴을 꽉 채운 사진(_face v2)을 둥근 사각형으로 크게 */
.stage .ivAv .avimg{width:300px !important;height:300px !important;border-radius:32px !important;border-width:6px}
.stage .ivWave{bottom:-10px}
@media(max-width:760px){.stage .ivAv .avimg{width:220px !important;height:220px !important;border-radius:26px !important}}
@media(max-width:420px){.stage .ivAv .avimg{width:180px !important;height:180px !important}}
/* 2026-10-08 면접관 얼굴 더 크게(사용자: "어쨌든 더 컸으면") — PC 380px, 내 카메라 창은 조금 작게 */
.stage .ivAv .avimg{width:380px !important;height:380px !important;border-radius:36px !important}
.ivCam{width:190px;height:142px}
.ivCamTag{top:160px}
@media(max-width:1240px){.stage .ivAv .avimg{width:320px !important;height:320px !important}}
@media(max-width:760px){.stage .ivAv .avimg{width:240px !important;height:240px !important;border-radius:26px !important}.ivCam{width:120px;height:90px}.ivCamTag{top:106px}}
@media(max-width:420px){.stage .ivAv .avimg{width:200px !important;height:200px !important}.ivCam{width:78px;height:58px}.ivCamTag{top:70px}}

/* 2026-10-09 사용자: "면접관 얼굴은 작게, 면접자는 크게" — 카메라를 켠 경우에만, 면접관(왼쪽 작게)·내 카메라(오른쪽 크게) 2단 */
.stage:has(.ivCam){display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,1.8fr);column-gap:22px;align-items:start;justify-items:center;padding:22px 22px 60px}
.stage:has(.ivCam) > *{grid-column:1}
.stage:has(.ivCam) .ivAv .avimg{width:170px !important;height:170px !important;border-radius:24px !important}
.stage:has(.ivCam) .ivCam{position:static;grid-column:2;grid-row:1 / span 4;width:100%;height:auto;aspect-ratio:4/3;max-height:440px;border-radius:16px}
.stage:has(.ivCam) .ivCamTag{position:static;grid-column:2;grid-row:5;margin-top:6px;font-size:12px}
.stage:has(.ivCam) .ivCoach{left:auto;right:30px;top:30px;transform:none;max-width:55%}
@media(max-width:760px){
  .stage:has(.ivCam){grid-template-columns:110px minmax(0,1fr);column-gap:12px;padding:14px 12px 54px}
  .stage:has(.ivCam) .ivAv .avimg{width:100px !important;height:100px !important;border-radius:18px !important}
  .stage:has(.ivCam) .nm{font-size:16px}
  .stage:has(.ivCam) .ivCam{width:100%;height:auto;right:auto;top:auto}
  .stage:has(.ivCam) .ivCamTag{top:auto;right:auto}
  .stage:has(.ivCam) .ivCoach{right:16px;top:18px;max-width:60%}
}

/* 2026-10-09 리포트 PDF 한 파일 — 섹션마다 새 쪽, 영상 자리는 인쇄에서 뺀다 */
@media print{ .pgbreak{break-before:page;page-break-before:always} .ivClip{display:none!important} }