:root{
  --pink:#FF6971; --pink-deep:#F2545C; --violet:#918AFF;
  --pink-light:#FFEDEE; --violet-light:#E7E3FF;
  --ink:#2B2B33; --ink-soft:#55555F; --ink-mute:#8B8B96; --ink-faint:#B4B4BE;
  --line:#ECECF2; --bg:#F4F4F8; --panel:#F7F7FA; --card:#FFFFFF;
  --green:#4CAF50; --amber:#F5A623; --red:#F0554D;
}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;background:var(--bg);color:var(--ink);word-break:keep-all;-webkit-font-smoothing:antialiased;
  height:100dvh;overflow:hidden;display:flex;flex-direction:column}

/* ── 상단 ── */
.topbar{flex:none;background:#fff;border-bottom:1px solid var(--line);z-index:60}
.tb-inner{max-width:1380px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:20px}
.tb-title strong{font-size:16px;font-weight:800}
.tb-title span{font-size:12px;color:var(--ink-mute);margin-left:8px}
.tb-prog{margin-left:auto;display:flex;align-items:center;gap:11px;min-width:210px}
.tb-count{font-size:12px;color:var(--ink-mute);font-weight:600;white-space:nowrap}
.tb-count b{color:var(--pink);font-size:14px;font-weight:800}
.tb-bar{flex:1;height:7px;background:#F0F0F5;border-radius:99px;overflow:hidden}
.tb-bar i{display:block;height:100%;background:var(--pink);border-radius:99px;transition:width .35s ease}

/* ── 레이아웃 (화면 높이에 맞춰 채웁니다) ── */
.wrap{flex:1;min-height:0;width:100%;max-width:1380px;margin:0 auto;padding:14px 20px 16px;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px}
.left{min-width:0;min-height:0;position:relative;overflow:hidden}
/* iPad는 1060×660(가로로 긴 16:10)을 논리 크기로 두고, 남는 공간에 맞춰 통째로 축소합니다.
   컨테이너보다 큰 요소라서 절대 위치로 중앙을 잡은 뒤 배율만 바꿉니다. */
.ipad{width:1060px;height:660px;position:absolute;left:50%;top:50%;margin-left:-530px;margin-top:-330px;
  transform-origin:center center;
  background:#1b1b1f;border-radius:22px;padding:11px;box-shadow:0 10px 40px rgba(30,30,60,.18);
  display:flex;flex-direction:column}
.ipad-status{flex:none;display:flex;justify-content:space-between;font-size:11px;color:#fff;padding:2px 12px 8px;font-weight:600}
.st-right{display:flex;align-items:center;gap:6px}
.rec{width:9px;height:9px;border-radius:99px;background:#FF3B30;display:inline-block}
.ipad-screen{flex:1;min-height:0;background:var(--bg);border-radius:12px;overflow:hidden;position:relative}
.taplayer{position:absolute;inset:11px;top:32px;pointer-events:none;z-index:40}

/* 눌러야 할 곳 표시 */
.tapring{position:absolute;border:2.5px solid var(--pink);border-radius:12px;animation:pulse 1.5s ease-out infinite;pointer-events:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,105,113,.5)}70%{box-shadow:0 0 0 11px rgba(255,105,113,0)}100%{box-shadow:0 0 0 0 rgba(255,105,113,0)}}
.taphint{position:absolute;background:var(--pink);color:#fff;font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 3px 12px rgba(255,105,113,.4);display:flex;align-items:center;gap:5px}
.taphint::before{content:"👆"}
.tapme{cursor:pointer !important}

/* ── 우측 안내 ── */
.right{min-height:0;display:flex;flex-direction:column;gap:10px}
.guide{flex:1;min-height:0;overflow:auto;background:#fff;border-radius:16px;padding:20px 20px 22px;box-shadow:0 1px 8px rgba(40,40,70,.06)}
.g-step{font-size:11px;font-weight:800;color:var(--pink);letter-spacing:.05em;margin-bottom:6px}
.guide h2{font-size:18px;font-weight:800;line-height:1.4}
.guide p{font-size:13.5px;line-height:1.8;color:var(--ink-soft);margin-top:12px}
.guide p b{color:var(--ink);font-weight:700}
.term{margin-top:16px;background:var(--violet-light);border-radius:12px;padding:14px 16px}
.term .t{font-size:12.5px;font-weight:800;color:#5B52D6;margin-bottom:6px}
.term .d{font-size:12.5px;line-height:1.75;color:#4A4470}
.term .d b{font-weight:700}
.term.pink{background:var(--pink-light)}
.term.pink .t{color:var(--pink-deep)}
.term.pink .d{color:#8B4046}
.signal-legend{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.signal-legend div{display:flex;align-items:center;gap:8px;font-size:12px;color:#4A4470}
.doit{margin-top:16px;font-size:12.5px;font-weight:700;color:var(--pink);display:flex;align-items:center;gap:6px}
.navbtns{flex:none;display:flex;gap:9px}
.gbtn{flex:1;font:inherit;font-size:13.5px;font-weight:700;padding:12px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer}
.gbtn:hover:not(:disabled){background:#FBFBFE}
.gbtn:disabled{opacity:.4;cursor:default}
.gbtn.primary{background:var(--pink);border-color:var(--pink);color:#fff}

/* ══════ 앱 화면 공통 ══════ */
.study{display:flex;height:100%;position:relative}
.side{width:60px;flex:none;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:10px 0}
.side .avatar{width:32px;height:32px;border-radius:99px;background:#3A3A42;margin-bottom:3px}
.side .nick{font-size:9.5px;color:var(--ink-soft);font-weight:600;margin-bottom:13px}
.side .item{text-align:center;margin-bottom:12px}
.side .item .ico{font-size:18px;line-height:1}
.side .item .lb{font-size:8.5px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.side .item .vl{font-size:10px;font-weight:800;margin-top:1px}
.side .item.off{opacity:.38}
.side .burger{margin-top:auto;width:29px;height:29px;border-radius:99px;background:var(--pink);display:grid;place-items:center;color:#fff;font-size:13px}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.crumb{display:flex;gap:9px;padding:9px 16px 0;font-size:10.5px;color:var(--ink-mute)}
.crumb i{color:var(--line);font-style:normal}
.tabs{display:flex;align-items:center;justify-content:center;gap:13px;padding:6px 16px 0;position:relative}
.tabs .tab{font-size:11.5px;font-weight:700;color:var(--ink-faint);padding:6px 4px 9px}
.tabs .tab.cur{color:var(--ink);border-bottom:2.5px solid var(--pink)}
.tabs .arw{color:var(--ink-faint);font-size:11px}
.progbadge{position:absolute;right:16px;top:4px;font-size:10.5px;font-weight:700;color:var(--pink);border:1px solid var(--pink);border-radius:999px;padding:3px 9px;background:#fff}

.board{flex:1;margin:10px 14px 0;background:#fff;border-radius:10px 10px 0 0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.board-head{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:11px;color:var(--ink-mute)}
.tools{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft)}
.tools .pen-r{color:#E23B3B}.tools .pen-b{color:#3B6FE2}
.pill{font-size:10.5px;font-weight:700;border-radius:999px;padding:4px 10px;border:1px solid var(--violet);color:var(--violet);background:#fff}
.pill.coral{background:var(--pink);border-color:var(--pink);color:#fff}
.qbody{flex:1;padding:4px 20px 14px;overflow:auto;display:flex;gap:16px;min-height:0}
.qcol{flex:1;min-width:0;display:flex;flex-direction:column}
.qtext{font-size:14px;line-height:1.8}
.choices{margin-top:16px;display:flex;flex-wrap:wrap;gap:20px;font-size:13.5px}
.tbl{border-collapse:collapse;margin-top:16px;font-size:12px}
.tbl th,.tbl td{border:1px solid #999;padding:3px 12px;text-align:center}
.tbl th{font-weight:600}

.answer{background:var(--panel);border-top:1px solid var(--line);padding:11px 20px 14px;margin:0 14px}
.ans-label{font-size:11.5px;color:var(--ink-mute);display:flex;align-items:center;gap:8px}
.ans-label .signal{margin-left:auto;display:flex;align-items:center;gap:5px;font-weight:700;color:var(--ink-soft)}
.dot{width:9px;height:9px;border-radius:99px;display:inline-block}
.dot.g{background:var(--green)}.dot.a{background:var(--amber)}.dot.r{background:var(--red)}
.ans-row{margin-top:10px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.numbtn{width:30px;height:30px;border-radius:99px;border:1px solid var(--line);background:#fff;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.numbtn.on{background:var(--pink);border-color:var(--pink);color:#fff}
.blankbtn{min-width:50px;padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;font:inherit;font-size:12px;font-weight:600;color:var(--ink-soft)}
.blankbtn.filled{background:var(--violet-light);border-color:var(--violet);color:#5B52D6;font-weight:800}
.inblank{display:inline-block;min-width:44px;text-align:center;padding:1px 10px;border:1px solid var(--ink-faint);border-radius:5px;font-size:12px}
.inblank.filled{background:var(--violet-light);border-color:var(--violet);color:#5B52D6;font-weight:800}
.ans-right{margin-left:auto;display:flex;gap:8px}
.btn{font:inherit;font-size:12.5px;font-weight:700;padding:8px 18px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink-soft)}
.btn.primary{background:var(--pink);border-color:var(--pink);color:#fff}
.btn.dim{background:#F7C9CC;border-color:#F7C9CC;color:#fff}
/* ── 문항 이미지 + 학생 필기 (겹쳐서 한 장) ────────────────────
   ★아이는 문항 이미지 위에 직접 펜으로 씁니다. 필기를 문항 아래나 별도 노트 칸에
   두면 안 됩니다 — 어느 위치에 그렸는지가 그대로 의미를 갖기 때문입니다.
   .qshot = 겹쳐 보이는 한 장 / .qimg = 문항 이미지 / .inklayer = 필기 이미지 */
.qshot{position:relative;height:100%;min-height:150px}
.qimg{position:absolute;inset:0;overflow:hidden}
.inklayer{position:absolute;inset:0;pointer-events:none}
.pw{position:absolute;font-family:"Bradley Hand","Segoe Script","Comic Sans MS",cursive;
  font-size:15px;line-height:1.5;color:#2E3E6B;white-space:nowrap;transform:rotate(-.6deg)}
.pw.red{color:#D63B36}
.pm{position:absolute;display:block}
.pm.circle{border:2px solid #D63B36;border-radius:50%;transform:rotate(-5deg);opacity:.85}
.nowrite{position:absolute;left:0;bottom:6px;font-size:11px;font-weight:700;
  color:var(--ink-faint);background:var(--panel);border-radius:999px;padding:4px 11px}

/* AI 매티 */
.matty{position:absolute;top:8px;right:0;bottom:8px;width:296px;background:#fff;border-left:1px solid var(--line);box-shadow:-6px 0 22px rgba(40,40,70,.07);display:flex;flex-direction:column;border-radius:10px 0 0 10px;z-index:12}
.m-head{display:flex;align-items:center;gap:6px;padding:12px 14px;font-size:12.5px;font-weight:800}
.m-head .info{width:14px;height:14px;border-radius:99px;background:var(--ink-faint);color:#fff;font-size:9px;display:grid;place-items:center}
.m-head .x{margin-left:auto;color:var(--ink-mute);font-size:14px}
.m-body{flex:1;overflow:auto;padding:0 14px 8px;display:flex;flex-direction:column;gap:13px}
.bub{max-width:90%}
.bub .who{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--ink-mute);margin-bottom:4px}
.bub .who .av{width:17px;height:17px;border-radius:99px;background:var(--violet-light);display:grid;place-items:center;font-size:10px}
.bub .txt{background:#F4F4F8;border-radius:12px;padding:9px 11px;font-size:11.5px;line-height:1.7}
.bub .tm{font-size:9px;color:var(--ink-faint);margin-top:3px}
.bub.me{margin-left:auto}
.bub.me .txt{background:#EFEFF4}
.bub.me .tm{text-align:right}
.m-foot{border-top:1px solid var(--line);padding:10px 14px 12px}
.m-check{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--pink);margin-bottom:9px}
.m-check .ck{width:15px;height:15px;border-radius:99px;background:var(--pink);color:#fff;font-size:9px;display:grid;place-items:center}
.m-input{display:flex;align-items:center;gap:8px;background:#F4F4F8;border-radius:999px;padding:7px 10px}
.m-input .ph{flex:1;font-size:11px;color:var(--ink-faint)}
.m-input .ph.typed{color:var(--ink)}
.m-input .send{width:20px;height:20px;border-radius:99px;background:var(--pink);color:#fff;font-size:11px;display:grid;place-items:center}

/* 풀이 정보 */
.solve{width:322px;flex:none;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;overflow:hidden}
.s-head{display:flex;align-items:center;gap:6px;padding:9px 12px;font-size:11.5px;font-weight:700;border-bottom:1px solid var(--line)}
.s-head .grp{margin-left:auto;display:flex;gap:6px}
.tag{font-size:10px;font-weight:700;border-radius:6px;padding:4px 9px;border:1px solid var(--line);background:#F4F4F8;color:var(--ink-soft)}
.tag.coral{background:var(--pink);border-color:var(--pink);color:#fff}
.s-body{padding:13px 14px;font-size:12px;line-height:1.9;overflow:auto}
.hint{color:var(--pink);font-size:11.5px;font-weight:700;padding:10px 20px 0}

/* 자기 평가 */
.selfeval{background:var(--panel);border-top:1px solid var(--line);margin:0 14px;padding:12px 20px 16px}
.se-label{font-size:11.5px;font-weight:700;color:var(--pink)}
.se-row{margin-top:11px;display:flex;align-items:center;gap:10px}
.se-opt{display:flex;align-items:center;gap:7px;border-radius:999px;padding:5px 14px 5px 6px;font-size:12px;font-weight:600;color:var(--ink-mute);background:#EFEFF4}
.se-opt .face{width:24px;height:24px;border-radius:99px;background:#fff;display:grid;place-items:center;font-size:13px}
.se-opt.on{background:var(--pink-light);color:var(--pink-deep);font-weight:800}

/* 모달·토스트 */
.dim-layer{position:absolute;inset:0;background:rgba(255,255,255,.55);display:grid;place-items:center;z-index:20}
.modal{background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(40,40,70,.16);padding:22px 26px 24px;width:266px;text-align:center}
.modal .m-sub{font-size:11px;font-weight:800;color:var(--pink);margin-bottom:5px}
.modal .m-title{font-size:15px;font-weight:800;line-height:1.5}
.modal .m-pt{font-size:20px;font-weight:800;margin-top:6px}
.modal .btn{width:100%;margin-top:15px;padding:11px;font-size:14px;border-radius:9px}
.modal .btn + .btn{margin-top:9px}
.modal.warn{width:292px}
.modal.warn .m-title{font-size:14px;line-height:1.7}
.modal .selfq{font-size:14px;font-weight:800;margin-bottom:4px}

.toast{position:absolute;top:14px;right:14px;background:#fff;border-radius:13px;box-shadow:0 5px 22px rgba(40,40,70,.14);padding:11px 16px 11px 11px;display:flex;align-items:center;gap:11px;z-index:30;max-width:296px}
.toast .tface{width:38px;height:38px;border-radius:99px;background:#FFF3D6;display:grid;place-items:center;font-size:21px;flex:none}
.toast .tsub{font-size:10.5px;font-weight:800;color:var(--violet);text-align:center}
.toast .ttxt{font-size:12px;font-weight:700;line-height:1.5;margin-top:2px}

.confetti{position:absolute;inset:0;pointer-events:none;z-index:15;overflow:hidden}
.confetti i{position:absolute;width:8px;height:12px;border-radius:2px;animation:fall linear infinite}
@keyframes fall{0%{transform:translateY(-40px) rotate(0)}100%{transform:translateY(700px) rotate(540deg)}}

/* 리포트 */
.report{height:100%;overflow:auto;background:#fff;padding:14px 26px 18px}
.rp-top{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:14px}
.rp-top h2{font-size:19px;font-weight:800}
.rp-date{position:absolute;right:0;font-size:11.5px;font-weight:700;border:1px solid var(--line);border-radius:8px;padding:6px 12px}
.rp-sec{display:flex;align-items:center;gap:9px;margin:15px 0 10px}
.rp-sec h3{font-size:15px;font-weight:800}
.rp-sec .cap{font-size:10.5px;color:var(--ink-mute);font-weight:600}
.rp-sec .chipgray{font-size:10.5px;font-weight:700;color:var(--ink-soft);background:#F1F1F6;border-radius:999px;padding:4px 10px}
.rp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
.rp-grid.five{grid-template-columns:repeat(5,1fr)}
.rp-cell .cap{font-size:10.5px;font-weight:700;color:var(--ink-soft);background:#F4F4F8;border-radius:999px;padding:4px 11px;display:inline-block;margin-bottom:10px}
.rp-cell .big{font-size:18px;font-weight:800;margin-top:6px}
.rp-cell .sm{font-size:10.5px;color:var(--ink-mute);margin-top:5px;line-height:1.5}
.rp-cell .legend{font-size:9.5px;color:var(--ink-mute);margin-top:6px}
.matty-say{display:flex;gap:14px;align-items:center}
.matty-say .ill{width:82px;height:82px;border-radius:14px;background:linear-gradient(160deg,#7C5BC7,#5E3FA8);display:grid;place-items:center;font-size:38px;flex:none}
.matty-say .say{flex:1;background:#F4F4F8;border-radius:12px;padding:13px 16px;font-size:12px;line-height:1.9;color:var(--ink-soft)}

/* ── 문항 리스트 · 문항 확인 ── */
.page{height:100%;display:flex;flex-direction:column;background:#fff}
.p-top{flex:none;display:flex;align-items:center;position:relative;padding:14px 20px}
.p-top .back{font-size:13.5px;font-weight:800;color:var(--pink);display:flex;align-items:center;gap:5px}
.p-top h2{position:absolute;left:50%;transform:translateX(-50%);font-size:16px;font-weight:800}
.p-top .round{margin-left:auto;display:flex;align-items:center;gap:11px;font-size:11.5px;font-weight:600;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:10px;padding:7px 13px;box-shadow:0 1px 4px rgba(40,40,70,.05)}
.p-top .round b{font-weight:800;color:var(--ink)}

.filters{flex:none;display:flex;align-items:center;gap:8px;padding:0 20px 12px}
.fchip{font-size:12px;font-weight:700;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 14px;box-shadow:0 1px 3px rgba(40,40,70,.05)}
.fchip.on{background:var(--pink);border-color:var(--pink);color:#fff}
.filters .reset{margin-left:auto}

.qlist{flex:1;min-height:0;margin:0 20px;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.qlist table{width:100%;border-collapse:collapse;font-size:12px}
.qlist thead th{font-size:11.5px;font-weight:700;color:var(--ink-soft);background:#FBFBFD;padding:12px 8px;border-bottom:1px solid var(--line)}
.qlist tbody td{padding:11px 8px;text-align:center;border-bottom:1px solid #F5F5FA;color:var(--ink-soft)}
.qlist tbody tr:last-child td{border-bottom:none}
.qlist tbody tr.hot td{background:#FFF8F8}
.radio{width:15px;height:15px;border-radius:99px;border:1.5px solid #D6D6E0;display:inline-block}
.radio.on{border-color:var(--pink);background:radial-gradient(circle,var(--pink) 45%,transparent 47%)}
.badge{display:inline-block;font-size:11px;font-weight:700;border-radius:7px;padding:4px 10px}
.badge.dunno{background:#FFF6DF;color:#A97B12}
.badge.wrong{background:#FFECEC;color:#C6403A}
.badge.right{background:#EDF8E7;color:#4E8F2A}
.qlist .sig{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--ink-soft)}
.qlist .go{color:var(--ink-faint)}
.list-foot{flex:none;display:flex;justify-content:flex-end;padding:12px 20px 14px}
.mkchallenge{font-size:12.5px;font-weight:700;color:#fff;background:#DCDCE4;border-radius:9px;padding:11px 22px}
.mkchallenge.on{background:var(--pink)}

.detail{flex:1;min-height:0;margin:0 20px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.d-head{flex:none;display:flex;align-items:center;gap:10px;padding:12px 16px}
.d-head .cnt{font-size:11px;font-weight:800;color:#5B52D6;background:var(--violet-light);border-radius:8px;padding:5px 10px}
.d-head .src{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.d-head .grp{margin-left:auto;display:flex;align-items:center;gap:8px}
.d-head .obtn{font-size:11px;font-weight:700;border-radius:8px;padding:6px 12px;border:1px solid var(--line);background:#fff;color:var(--ink-mute)}
.d-head .obtn.on{border-color:var(--violet);color:var(--violet)}
.d-body{flex:1;min-height:0;display:flex;gap:16px;padding:0 16px 14px;overflow:hidden}
.d-q{flex:1;min-width:0;font-size:14px;line-height:1.8;padding-top:6px;display:flex;flex-direction:column}
.d-sol{width:400px;flex:none;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:12.5px;line-height:1.95;overflow:auto}
.d-foot{flex:none;background:var(--panel);border-top:1px solid var(--line);margin:12px 20px 0;padding:11px 20px 15px}
.d-foot .lb{font-size:11.5px;font-weight:700;color:var(--pink);display:flex;align-items:center}
.d-foot .lb .sig{margin-left:auto;display:flex;align-items:center;gap:5px;color:var(--ink-soft)}
.d-foot .row{margin-top:11px;display:flex;align-items:center}
.d-foot .row .right{margin-left:auto}

/* 홈 */
.home{height:100%;overflow:auto;background:#F4F4F8;padding:14px 0 30px}
.home-tog{padding:0 18px 12px;color:var(--pink);font-size:15px}
.home-inner{max-width:620px;margin:0 auto;padding:0 16px}
.home h3{font-size:16px;font-weight:800;margin:15px 0 11px}
.home-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.hcard{background:#fff;border-radius:13px;padding:14px 14px 8px;box-shadow:0 1px 5px rgba(40,40,70,.05)}
.hcard .t{font-size:13.5px;font-weight:800}
.hcard .s{font-size:10px;color:var(--ink-mute);margin-top:6px;line-height:1.6}
.hcard .em{font-size:36px;text-align:center;margin-top:8px}
.notice{background:#fff;border-radius:13px;padding:15px 17px;box-shadow:0 1px 5px rgba(40,40,70,.05)}
.notice .k{font-size:11px;font-weight:700;color:var(--pink)}
.notice .v{font-size:13.5px;font-weight:700;margin-top:5px}
.notice .d{font-size:10px;color:var(--ink-faint);margin-top:6px}
.dots{display:flex;gap:5px;justify-content:center;margin-top:10px}
.dots i{width:5px;height:5px;border-radius:99px;background:#DEDEE6}
.dots i.on{background:var(--pink)}

/* 인트로·마무리 */
.cover{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 46px;background:linear-gradient(160deg,#FFF6F7,#F2F0FF)}
.cover .face{font-size:60px}
.cover h2{font-size:24px;font-weight:800;margin-top:16px;line-height:1.4}
.cover p{font-size:14px;color:var(--ink-soft);margin-top:14px;line-height:1.85;max-width:430px}
.cover .mission{margin-top:20px;font-size:15px;font-weight:800;color:var(--pink)}
.recap{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:22px;width:100%;max-width:470px;text-align:left}
.recap div{background:rgba(255,255,255,.8);border-radius:11px;padding:11px 14px;font-size:12px;line-height:1.6;color:var(--ink-soft)}
.recap div b{display:block;font-size:12.5px;color:var(--ink);font-weight:800;margin-bottom:3px}

.foot{flex:none;padding:0 20px 9px;font-size:11px;color:var(--ink-faint);text-align:center}

/* 화면이 좁아지면 안내를 아래로 내리고, iPad는 남은 높이에 맞춰 줄어듭니다. */
/* 좁은 화면에서는 iPad가 가로 폭을 꽉 채우고(높이는 JS가 비율대로 잡습니다),
   남는 세로 공간을 안내가 모두 차지합니다. */
@media (max-width:1000px){
  .wrap{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:10px;padding:10px 12px 12px}
  .guide{padding:16px 17px 18px}
  .guide h2{font-size:16.5px}
  .guide p{font-size:13px;margin-top:10px}
}
@media (max-width:620px){
  .tb-title span{display:none}
  .tb-prog{min-width:130px}
  .foot{display:none}
  .gbtn{padding:11px;font-size:13px}
}