/* ============================================================================
   DBT 상담사 아카데미 — 말랑골 달빛 밤 수업 (js/academy.js)
   디자인: ChatGPT 시안(2026-11-06, 밤 남색·크림 종이·갈색 선·금빛 등불, Gaegu·Gowun Batang·Noto Sans KR)을 앱에 옮긴 것.
   모든 규칙은 .ac-root 안에서만 — 앱 화면을 건드리지 않는다.
   ========================================================================== */
.ac-root,.ac-sheet-bg,.ac-toast,.ac-confetti{--night:#202747;--night2:#2b3263;--shade:#131a32;--cream:#fff5e2;--cream2:#f4e3c3;--ink:#49382f;--ink2:#6f5b4c;--line:#90745c;--gold:#f8d58b;--gold2:#f0bf5a;--mint:#9fd3c7;--pink:#f4a6b8;--lav:#b9b4ff;--orange:#f2b880;--text:#fff5e2;--muted:#d8d1ea;--ok:#5fae8a;--no:#e07a72;
  --r-sm:14px;--r:22px;--r-lg:30px;--pill:999px;--sh:0 6px 0 rgba(19,26,50,.28),0 14px 28px rgba(19,26,50,.22);--sh-sm:0 3px 0 rgba(19,26,50,.22);--c:var(--gold);
}
.ac-root{position:fixed;inset:0;z-index:1310;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:radial-gradient(120% 40% at 50% 0%,#2e3770 0%,var(--night) 60%) fixed,var(--night);color:var(--text);
  font:15px/1.75 'Noto Sans KR','Apple SD Gothic Neo',sans-serif;letter-spacing:-.01em;-webkit-text-size-adjust:100%;isolation:isolate}
.ac-root.ac-page{position:relative;inset:auto;min-height:100vh;min-height:100dvh;overflow:visible}
.ac-root *,.ac-root *:before,.ac-root *:after,.ac-sheet-bg *,.ac-sheet-bg *:before,.ac-sheet-bg *:after{box-sizing:border-box}
:where(.ac-root,.ac-sheet-bg) button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent}
:where(.ac-root,.ac-sheet-bg) button:disabled{cursor:default;opacity:.6}
.ac-root :focus-visible{outline:3px solid var(--pink);outline-offset:3px}
:where(.ac-root) img{max-width:100%;-webkit-user-drag:none;user-select:none}
:where(.ac-root) :is(h1,h2,h3){font-family:'Gowun Batang',serif;font-weight:700;letter-spacing:-.02em;line-height:1.35;margin:0}
:where(.ac-root,.ac-sheet-bg) p{margin:0;overflow-wrap:anywhere}
.ac-root b{font-weight:800}
.ac-hand{font-family:'Gaegu',cursive}
.ac-shell{max-width:560px;margin:0 auto;padding:0 16px calc(96px + env(safe-area-inset-bottom))}

/* ── 위 막대 ── */
.ac-top{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 2px 10px;margin:0 -2px;background:linear-gradient(180deg,var(--night) 70%,rgba(32,39,71,0))}
.ac-root.ac-page .ac-top{padding-top:10px}
.ac-iconbtn{width:42px;height:42px;min-width:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,245,226,.12);border:1.5px solid rgba(255,245,226,.22)!important;font-size:1.15rem;font-weight:900}
.ac-top-t{flex:1;min-width:0;font:700 20px/1.2 'Gaegu',cursive;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-xp-chip{flex:0 0 auto;padding:5px 12px;border-radius:var(--pill);background:var(--gold);color:var(--ink);font:700 16px/1.4 'Gaegu',cursive;box-shadow:var(--sh-sm)}
.ac-xp-chip.ac-pop{animation:acPop .5s ease}

/* ── 공통 카드·글자 ── */
.ac-card{display:block;width:100%;text-align:left;background:var(--cream);color:var(--ink);border:2px solid var(--line)!important;border-radius:var(--r);padding:18px;margin:16px 0;box-shadow:var(--sh)}
.ac-card h3{font-size:18px;margin:0 0 8px;color:var(--ink)}
.ac-eyebrow{display:block;font:700 15px/1.4 'Gaegu',cursive;letter-spacing:.04em;color:var(--gold)}
.ac-card .ac-eyebrow{color:#a0703a}
.ac-h{font-size:22px;margin:30px 0 4px}
/* 남색 바탕 제목 — 앱 style.css 의 h1~h6{color:var(--text-primary)}(진한 갈색)이 덮어써 '말랑골 밤 산책'·'마을 도장판'이 안 보였다(2026-11-06) */
.ac-root .ac-h{color:var(--text)}
/* 남색 카드(스킬 카드·순서대로) — 크림 카드용 갈색 머리글(.ac-card .ac-eyebrow)이 남색 위에서 안 보였다(2026-11-06) */
.ac-card.ac-darkcard{background:var(--night2);color:var(--text);border-color:rgba(255,245,226,.25)!important}
.ac-card.ac-darkcard .ac-eyebrow{color:var(--gold);font-size:16px}
.ac-darkcard-t{display:block;margin-top:2px;font:700 17px/1.5 'Noto Sans KR','Apple SD Gothic Neo',sans-serif;color:var(--text);overflow-wrap:anywhere}
.ac-sub{color:var(--muted);font-size:14px;margin-bottom:10px}
.ac-chip{display:inline-block;padding:3px 11px;border-radius:var(--pill);background:var(--gold);color:var(--ink);font:700 15px/1.5 'Gaegu',cursive;white-space:nowrap}
.ac-chip.ac-soft{background:rgba(248,213,139,.18);color:var(--gold);border:1.5px solid rgba(248,213,139,.45)}
.ac-small{font-size:12.5px;color:var(--ink2);line-height:1.65}
.ac-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 18px;border-radius:var(--r-sm);font-weight:800!important;background:var(--gold);color:var(--ink)!important;border:2px solid var(--line)!important;box-shadow:var(--sh-sm);transition:transform .12s}
.ac-btn:active{transform:translateY(2px);box-shadow:none}
.ac-btn.ac-ghost{background:var(--cream)}
.ac-btn.ac-dark{background:rgba(255,245,226,.1);color:var(--text)!important;border-color:rgba(255,245,226,.35)!important;box-shadow:none}
.ac-btn.ac-wide{display:flex;width:100%}
.ac-meter{height:12px;border-radius:var(--pill);background:var(--cream2);overflow:hidden;border:1.5px solid rgba(144,116,92,.35)}
.ac-meter>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));border-radius:var(--pill);transition:width .5s}
.ac-row{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ── 첫 화면: 밤 마을 ── */
.ac-hero{position:relative;margin:4px 0 0;min-height:380px;padding:22px 20px 96px;border-radius:var(--r-lg);overflow:hidden;border:2px solid rgba(144,116,92,.7);
  background:linear-gradient(180deg,rgba(32,39,71,.05) 0%,rgba(32,39,71,.25) 45%,rgba(32,39,71,.92) 100%),var(--hero) center 35%/cover no-repeat,var(--night2);box-shadow:var(--sh);text-shadow:0 2px 10px rgba(19,26,50,.7)}
.ac-crest{width:76px;height:auto;display:block;margin-bottom:8px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
.ac-hero h1{font-size:31px;line-height:1.38;margin:6px 0 8px;color:#fff}
.ac-hero-sub{font-weight:700;font-size:15px;color:#f3eefe}
.ac-teacher{position:absolute;right:6px;bottom:0;width:150px;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));animation:acBob 4s ease-in-out infinite;transform-origin:50% 100%}
.ac-status{position:relative;margin-top:-34px;z-index:2}
.ac-xpline{display:flex;align-items:baseline;gap:8px;margin:2px 0 8px}
.ac-big{font:700 44px/1 'Gaegu',cursive;color:var(--ink)}
.ac-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px;text-align:center}
.ac-stats>div{background:#fffaf0;border:1.5px dashed rgba(144,116,92,.45);border-radius:var(--r-sm);padding:8px 4px}
.ac-stats b{display:block;font:700 26px/1.2 'Gaegu',cursive;color:var(--ink)}
.ac-stats span{font-size:12.5px;color:var(--ink2)}
.ac-continue{position:relative;min-height:168px;padding-right:118px;border-color:var(--line)!important;background:linear-gradient(135deg,var(--cream) 55%,color-mix(in srgb,var(--c) 30%,var(--cream)))}
.ac-continue-t{display:block;font:700 21px/1.4 'Gowun Batang',serif;margin:4px 0 4px;color:var(--ink)}
.ac-continue-h{display:block;font-size:13.5px;color:var(--ink2);margin-bottom:12px;line-height:1.6}
.ac-continue .ac-host{position:absolute;right:8px;bottom:12px;width:104px;height:104px;object-fit:contain;animation:acBob 3.6s ease-in-out infinite}

/* 지도 */
.ac-map{position:relative;aspect-ratio:2/3;max-height:880px;border-radius:var(--r-lg);border:2px solid var(--line);overflow:hidden;background:var(--map) center/cover no-repeat,#26305e;box-shadow:var(--sh);display:flex;flex-direction:column-reverse;justify-content:space-around;padding:14px 10px}
/* 좁은 폰에선 집 다섯 채가 2:3 상자보다 길어 맨 아래 탐정소가 잘렸다 — 넘치면 상자가 늘어나게(2026-11-06) */
.ac-map{overflow:clip}   /* hidden 은 스크롤 상자라 2:3 비율보다 내용이 길어도 상자가 안 늘어난다 — clip 은 늘어난다 */
@supports not (overflow:clip){.ac-map{aspect-ratio:auto}}
.ac-land{display:flex;align-items:center;width:84%;position:relative;text-align:left;padding:0}
.ac-land:nth-child(even){align-self:flex-end;flex-direction:row-reverse;text-align:right}
.ac-house{width:118px;height:auto;flex:0 0 auto;filter:brightness(.55) saturate(.6);transition:filter .5s,transform .25s}
.ac-land.ac-warm .ac-house{filter:brightness(.85) saturate(.9) drop-shadow(0 0 10px rgba(248,213,139,.45))}
.ac-land.ac-lit .ac-house{filter:brightness(1.04) drop-shadow(0 0 16px rgba(248,213,139,.85))}
.ac-land:active .ac-house{transform:scale(.96)}
.ac-land.ac-here .ac-house{animation:acBob 3s ease-in-out infinite}
.ac-map-label{position:relative;z-index:1;margin-left:-14px;background:var(--cream);color:var(--ink);border:2px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;box-shadow:var(--sh-sm);min-width:0}
.ac-land:nth-child(even) .ac-map-label{margin:0 -14px 0 0}
.ac-map-label b{display:block;font:700 18px/1.25 'Gaegu',cursive}
.ac-map-label small{display:block;font-size:11.5px;color:var(--ink2);line-height:1.4}
.ac-here-flag{position:absolute;top:-10px;left:6px;padding:1px 8px;border-radius:var(--pill);background:var(--pink);color:var(--ink);font:700 13px/1.5 'Gaegu',cursive;box-shadow:var(--sh-sm);animation:acBob 2.4s ease-in-out infinite}
.ac-land:nth-child(even) .ac-here-flag{left:auto;right:6px}
.ac-land-stamp{position:absolute;top:2px;left:84px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#7a3d14;border:2px dashed #b4682f;font:700 15px 'Gaegu',cursive;transform:rotate(-12deg);box-shadow:var(--sh-sm)}
.ac-land:nth-child(even) .ac-land-stamp{left:auto;right:84px}

/* 도장판 */
.ac-stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ac-stampcell{text-align:center;font:700 13px/1.3 'Gaegu',cursive;color:var(--ink)}
.ac-stampcell i{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 4px;border-radius:50%;border:2.5px dashed rgba(144,116,92,.55);background:#fffaf0;font-style:normal;font-size:24px;filter:grayscale(1);opacity:.55}
.ac-stampcell.ac-on i{filter:none;opacity:1;background:var(--c);border-style:solid;border-color:var(--line);transform:rotate(-8deg);box-shadow:var(--sh-sm)}
.ac-stampcell img{width:38px;height:38px;object-fit:contain}
.ac-info{margin:20px 0 6px;padding:14px 16px;border-radius:var(--r);background:rgba(255,245,226,.07);border:1.5px solid rgba(255,245,226,.16);font-size:13px;line-height:1.75;color:var(--muted)}
.ac-info b{color:var(--text)}

/* ── 장소(마을 집) ── */
.ac-place{position:relative;text-align:center;padding:18px 16px 18px;border-radius:var(--r-lg);border:2px solid var(--line);background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--c) 32%,var(--night2)),var(--night2) 70%);box-shadow:var(--sh)}
.ac-place .ac-house{width:150px;filter:drop-shadow(0 0 18px rgba(248,213,139,.7))}
.ac-place h1{font-size:28px;margin:4px 0 6px;color:#fff}
.ac-place-story{font-size:14px;color:#efeafd;line-height:1.7;margin:0 auto 12px;max-width:30em}
.ac-say{display:flex;align-items:flex-end;gap:8px;text-align:left;margin:10px 0 14px}
.ac-say img{width:84px;height:84px;object-fit:contain;flex:0 0 auto;animation:acBob 3.4s ease-in-out infinite}
.ac-say p{flex:1;background:var(--cream);color:var(--ink);border:2px solid var(--line);border-radius:18px 18px 18px 4px;padding:10px 13px;font:700 17px/1.55 'Gaegu',cursive}
.ac-say p small{display:block;font:800 12px 'Noto Sans KR';color:#a0703a;margin-bottom:2px}
.ac-path{list-style:none;margin:18px 0 0;padding:0;position:relative}
.ac-path:before{content:'';position:absolute;left:27px;top:20px;bottom:20px;border-left:3px dotted rgba(248,213,139,.45)}
.ac-node{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px 10px 4px;margin:6px 0;border-radius:var(--r);transition:background .2s}
.ac-node:active{background:rgba(255,245,226,.08)}
.ac-lamp{position:relative;z-index:1;flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:700 20px 'Gaegu',cursive;background:#3a4278;color:var(--muted);border:2px solid rgba(255,245,226,.25)}
.ac-node.ac-done .ac-lamp{background:var(--c);color:var(--ink);border-color:var(--line);box-shadow:0 0 14px color-mix(in srgb,var(--c) 70%,transparent)}
.ac-node.ac-next .ac-lamp{background:var(--gold);color:var(--ink);border-color:var(--line);box-shadow:0 0 0 5px rgba(248,213,139,.25),0 0 16px rgba(248,213,139,.7);animation:acGlow 2s ease-in-out infinite}
.ac-node-tx{flex:1;min-width:0}
.ac-node-tx b{display:block;font-size:15.5px;line-height:1.45;color:var(--text)}
.ac-node-tx small{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:1px}
.ac-node-tx em{display:block;font-style:normal;font-size:11.5px;color:#bdb4d9;margin-top:2px}
.ac-node>i{flex:0 0 auto;font-style:normal;font:700 18px 'Gaegu',cursive;color:var(--gold)}
.ac-examcard{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fff3d6,var(--cream));margin-top:20px}
.ac-examcard .ac-medal{flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--orange);border:2.5px dashed #b4682f;font-size:26px;transform:rotate(-8deg)}
.ac-examcard b{display:block;font:700 18px/1.3 'Gowun Batang',serif}
.ac-examcard span{font-size:13px;color:var(--ink2)}

/* ── 강의 머리·단계 ── */
.ac-lhead{padding:4px 2px 0}
.ac-lhead h1{font-size:25px;margin:2px 0 4px;color:#fff}
.ac-lhead p{font-size:14px;color:var(--muted)}
.ac-steps{display:flex;gap:6px;overflow-x:auto;padding:12px 2px 10px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.ac-steps::-webkit-scrollbar{display:none}
.ac-steps button{flex:0 0 auto;min-width:64px;min-height:56px;padding:6px 8px;border-radius:var(--r-sm);background:rgba(255,245,226,.1);border:1.5px solid rgba(255,245,226,.2)!important;color:var(--muted);font:700 14px/1.2 'Gaegu',cursive;text-align:center}
.ac-steps button small{display:block;font-size:17px;margin-bottom:2px}
.ac-steps button.ac-on{background:var(--gold);color:var(--ink);border-color:var(--line)!important;box-shadow:var(--sh-sm)}
.ac-steps button.ac-ok{color:var(--text);border-color:rgba(159,211,199,.6)!important}
.ac-steps button.ac-ok small:after{content:'✓';font-size:12px;margin-left:2px;color:var(--mint)}
.ac-stepnav{display:flex;gap:8px;margin:20px 0 6px}
.ac-stepnav .ac-btn{flex:1}
.ac-stepnav .ac-btn.ac-dark{flex:0 0 auto}

/* ── ① AI 강의 무대 ── */
.ac-videochip{display:flex;align-items:center;gap:6px;font:700 14.5px/1.4 'Gaegu',cursive;color:var(--gold);padding:7px 12px;border-radius:var(--pill);background:rgba(248,213,139,.12);border:1.5px dashed rgba(248,213,139,.45);width:max-content;max-width:100%;margin:2px 0 10px}
.ac-video{width:100%;border-radius:var(--r);border:2px solid var(--line);background:#000;margin-bottom:10px}
.ac-stage{position:relative;border-radius:var(--r-lg);border:2px solid var(--line);overflow:hidden;min-height:470px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(32,39,71,0) 55%,rgba(19,26,50,.65)),radial-gradient(80% 50% at 80% 0%,rgba(248,213,139,.16),transparent 70%),linear-gradient(180deg,#2c3468,#1d2347);box-shadow:var(--sh)}
.ac-board{margin:14px 14px 0;padding:12px 16px 14px;border-radius:12px;background:radial-gradient(120% 120% at 30% 20%,#3f6250,#2c4a3b 70%);border:7px solid #a8794e;box-shadow:inset 0 0 0 2px rgba(0,0,0,.18),0 4px 0 rgba(0,0,0,.25);color:#f4f7ef;position:relative}
.ac-board small{display:block;font:700 13.5px/1.4 'Gaegu',cursive;color:#cfe3c6;opacity:.9;padding-right:44px}
.ac-board b{display:block;font:700 25px/1.3 'Gaegu',cursive;margin-top:2px;text-shadow:0 0 1px rgba(255,255,255,.4)}
.ac-board-n{position:absolute;right:10px;top:8px;font:700 14px 'Gaegu',cursive;color:#e3efdb}
.ac-board:after{content:'';position:absolute;left:14px;bottom:-11px;width:34px;height:6px;border-radius:3px;background:#f2f0e6;box-shadow:42px 0 0 #f4b9c4}
.ac-bubble{position:relative;display:block;width:auto;margin:18px 14px 0;text-align:left;background:var(--cream);color:var(--ink)!important;border:2.5px solid var(--line)!important;border-radius:22px;padding:16px 18px 18px;font-size:17px;line-height:1.85;min-height:150px;box-shadow:var(--sh-sm)}
.ac-bubble:after{content:'';position:absolute;left:48px;bottom:-14px;width:22px;height:22px;background:var(--cream);border-right:2.5px solid var(--line);border-bottom:2.5px solid var(--line);transform:rotate(45deg) skew(8deg,8deg);border-radius:0 0 6px 0}
.ac-bubble b{color:#7a4a1e}
.ac-bubble .ac-caret{display:inline-block;width:2px;height:1.1em;background:var(--line);vertical-align:-3px;margin-left:2px;animation:acBlink .8s steps(2) infinite}
.ac-chalknote{display:block;margin-top:10px;padding:8px 12px;border-radius:12px;background:#fff9ec;border:1.5px dashed rgba(144,116,92,.55);font:700 16px/1.6 'Gaegu',cursive;color:#5a4636}
.ac-stage-foot{margin-top:auto;display:flex;align-items:flex-end;gap:6px;padding:8px 12px 12px;position:relative}
.ac-stage-host{position:relative;flex:0 0 auto;width:118px;text-align:center}
.ac-stage-host img{width:118px;height:118px;object-fit:contain;animation:acBob 3.4s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.ac-stage-host span{display:inline-block;margin-top:-4px;padding:0 10px;border-radius:var(--pill);background:var(--gold);color:var(--ink);font:700 14px/1.6 'Gaegu',cursive}
.ac-stage-host.ac-react img{animation:acHop .5s ease}
.ac-stage-ctrl{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ac-dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.ac-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,245,226,.25)}
.ac-dots i.ac-on{background:var(--gold);width:22px;border-radius:5px}
.ac-dots i.ac-chk{background:var(--pink)}
.ac-ctrl-row{display:flex;gap:6px}
.ac-round{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--ink)!important;border:2px solid var(--line)!important;font-size:22px;font-weight:900;box-shadow:var(--sh-sm)}
.ac-round.ac-go{background:var(--gold);width:64px}
.ac-round.ac-voice{font-size:19px;background:rgba(255,245,226,.12);color:var(--text)!important;border-color:rgba(255,245,226,.3)!important;box-shadow:none}
.ac-round.ac-voice.ac-on{background:var(--mint);color:var(--ink)!important;border-color:var(--line)!important}
.ac-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ac-linkbtn{padding:8px 12px;border-radius:var(--pill);border:1.5px solid rgba(255,245,226,.3)!important;color:var(--muted);font-size:13.5px;font-weight:700}
.ac-overview .ac-card h3{font-family:'Gaegu',cursive;font-size:21px}
/* 콕 확인 */
.ac-check{margin:18px 14px 0;padding:16px 16px 14px;border-radius:22px;background:repeating-linear-gradient(transparent 0 29px,rgba(144,116,92,.16) 29px 30px),#fffaf0;color:var(--ink);border:2.5px solid var(--line);box-shadow:var(--sh-sm);position:relative}
.ac-check:before{content:'';position:absolute;top:-9px;left:42%;width:62px;height:18px;background:rgba(244,166,184,.75);transform:rotate(-4deg)}
.ac-check .ac-eyebrow{color:#c25e7c;font-size:17px}
.ac-check p{font-size:16.5px;line-height:1.75;margin:4px 0 12px;font-weight:600}
.ac-ox{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ac-ox button{min-height:62px;border-radius:18px;font:700 34px/1 'Gaegu',cursive;border:2.5px solid var(--line)!important;background:var(--cream);box-shadow:var(--sh-sm)}
.ac-ox button.ac-o{color:#2f7f5f}.ac-ox button.ac-x{color:#c0504a}
.ac-ox button.ac-pick-ok{background:var(--mint)}.ac-ox button.ac-pick-no{background:#f6c6c0}
.ac-react-line{margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--cream);border:1.5px dashed var(--line);font-size:14.5px;line-height:1.7}
.ac-react-line b{font:700 18px 'Gaegu',cursive;margin-right:4px}

/* ── ② 스킬 카드 ── */
.ac-flips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ac-flip{position:relative;min-height:124px;border-radius:var(--r);background:var(--cream);color:var(--ink)!important;border:2px solid var(--line)!important;box-shadow:var(--sh-sm);padding:14px;text-align:center;perspective:600px;transition:transform .15s}
.ac-flip:active{transform:scale(.97)}
.ac-flip .ac-letter{display:block;font:700 54px/1.1 'Gaegu',cursive;color:#7a4a1e}
.ac-flip .ac-tap{font:700 14px 'Gaegu',cursive;color:var(--ink2)}
.ac-flip.ac-open{text-align:left;animation:acFlip .35s ease;background:#fffaf0}
.ac-flip.ac-open .ac-letter{display:inline-block;font-size:30px;margin-right:6px}
.ac-flip em{font-style:normal;font-size:12px;color:var(--ink2);font-weight:700}
.ac-flip strong{display:block;font:700 18px/1.35 'Gowun Batang',serif;margin:2px 0 6px}
.ac-flip p{font-size:13.5px;line-height:1.65}
.ac-flip.ac-open:after{content:'✓';position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);background:color-mix(in srgb,var(--c) 70%,#fff);color:var(--ink);font:700 15px 'Gaegu',cursive;transform:rotate(-12deg);animation:acStamp .4s ease}
.ac-flip.ac-wide{grid-column:1/-1}
.ac-timeline{list-style:none;margin:0;padding:0;counter-reset:st}
.ac-timeline li{position:relative;margin:0 0 12px;padding:14px 14px 14px 58px;border-radius:var(--r);background:var(--cream);color:var(--ink);border:2px solid var(--line);box-shadow:var(--sh-sm)}
.ac-timeline li:before{counter-increment:st;content:counter(st);position:absolute;left:12px;top:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--c);border:2px solid var(--line);font:700 18px 'Gaegu',cursive;color:var(--ink)}
.ac-timeline li:not(:last-child):after{content:'';position:absolute;left:29px;bottom:-14px;height:14px;border-left:3px dotted var(--gold)}
.ac-timeline b{display:block;font:700 17px/1.4 'Gowun Batang',serif;margin-bottom:4px}
.ac-timeline p{font-size:14px;line-height:1.7}

/* ── ③ 심화 노트 ── */
.ac-notebook{position:relative;margin:6px 0 0;padding:20px 16px 12px;border-radius:var(--r);border:2px solid var(--line);color:var(--ink);box-shadow:var(--sh);
  background:linear-gradient(90deg,transparent 30px,rgba(224,122,114,.35) 30px 32px,transparent 32px),repeating-linear-gradient(transparent 0 30px,rgba(144,116,92,.15) 30px 31px),#fffaf0}
.ac-notebook:before{content:'';position:absolute;top:-10px;left:36%;width:72px;height:20px;background:rgba(248,213,139,.85);transform:rotate(-5deg);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.ac-nb-head{padding-left:26px;margin-bottom:6px}
.ac-nb-head b{display:block;font:700 22px/1.3 'Gaegu',cursive}
.ac-nb-head small{font-size:12.5px;color:var(--ink2)}
.ac-notebook details{margin:6px 0 6px 26px;border-bottom:1.5px dashed rgba(144,116,92,.35)}
.ac-notebook summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font:700 17.5px/1.4 'Gaegu',cursive;color:#5a3f2a}
.ac-notebook summary::-webkit-details-marker{display:none}
.ac-notebook summary:before{content:'▸';font-size:14px;color:#a0703a;transition:transform .2s}
.ac-notebook details[open] summary:before{transform:rotate(90deg)}
.ac-notebook summary em{font-style:normal;font-size:12px;color:var(--ink2);font-family:'Noto Sans KR';margin-left:auto}
.ac-nb-body{padding:0 0 12px;font-size:14.5px;line-height:1.85}
.ac-nb-body ul,.ac-nb-body ol{margin:0;padding-left:18px}
.ac-nb-body li{margin:0 0 8px}
.ac-cite{display:inline-block;margin:2px 0 0;padding:1px 9px;border-radius:var(--pill);background:#efe2ff;color:#4b3a8a!important;border:1.5px solid #c9b8f2!important;font-size:12px;font-weight:800;line-height:1.7;min-height:0}
.ac-ref{display:block;margin:6px 0 2px;padding:8px 10px;border-radius:10px;background:#f6efe2;border-left:4px solid var(--lav);font-size:12.5px;line-height:1.65;color:#4c3e34}
.ac-refs li{font-size:12.5px;line-height:1.65}

/* ── ④ 상담실 노트 ── */
.ac-speech{display:flex;align-items:flex-end;gap:8px;margin:4px 0 10px}
.ac-speech img{width:96px;height:96px;object-fit:contain;flex:0 0 auto;animation:acBob 3.6s ease-in-out infinite}
.ac-speech blockquote{flex:1;margin:0;padding:14px 16px;border-radius:20px 20px 20px 4px;background:var(--cream);color:var(--ink);border:2px solid var(--line);font:700 18px/1.6 'Gaegu',cursive;box-shadow:var(--sh-sm)}
.ac-speech blockquote small{display:block;font:800 12px 'Noto Sans KR';color:#a0703a;margin-bottom:4px}
.ac-tick{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:14.5px;line-height:1.7;cursor:pointer}
.ac-tick input{flex:0 0 auto;width:22px;height:22px;margin-top:3px;accent-color:#8a6a4f}
.ac-tick input:checked+span{color:var(--ink2);text-decoration:line-through;text-decoration-color:rgba(144,116,92,.5)}
.ac-myth{display:block;width:100%;text-align:left;margin:10px 0;padding:14px 16px;border-radius:var(--r);background:var(--cream);color:var(--ink)!important;border:2px solid var(--line)!important;box-shadow:var(--sh-sm)}
.ac-myth>span{display:block;font-size:14.5px;line-height:1.7}
.ac-myth>span b{font:700 17px 'Gaegu',cursive;margin-right:4px}
.ac-myth .ac-m{color:#a5463e}
.ac-myth .ac-f{display:none;margin-top:8px;padding-top:8px;border-top:1.5px dashed rgba(144,116,92,.4);color:#2f6a51}
.ac-myth.ac-open .ac-f{display:block;animation:acUnfold .3s ease}
.ac-myth .ac-hint{display:block;margin-top:4px;font:700 13.5px 'Gaegu',cursive;color:var(--ink2)}
.ac-myth.ac-open .ac-hint{display:none}

/* ── ⑤ 역할극 ── */
.ac-role{position:relative;padding:14px;border-radius:var(--r-lg);border:2px solid var(--line);background:linear-gradient(180deg,#323a72,#252c58);box-shadow:var(--sh)}
.ac-role-head{display:flex;align-items:center;gap:10px}
.ac-role-head img{width:96px;height:96px;object-fit:contain;flex:0 0 auto;animation:acBob 3.2s ease-in-out infinite}
.ac-role-head .ac-chip{margin-bottom:4px}
.ac-ctx{display:block;font-size:13px;color:var(--muted);line-height:1.6}
.ac-client{position:relative;margin:12px 0 4px;padding:14px 16px;border-radius:4px 20px 20px 20px;background:var(--cream);color:var(--ink);border:2px solid var(--line);font:700 19px/1.6 'Gaegu',cursive}
.ac-q{margin:14px 2px 8px;font-weight:800;font-size:15px;color:var(--text)}
.ac-opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;margin:8px 0;padding:13px 14px;border-radius:var(--r-sm);background:var(--cream);color:var(--ink)!important;border:2px solid var(--line)!important;box-shadow:var(--sh-sm);font-size:14.5px;line-height:1.65}
.ac-opt>b{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--cream2);font:700 17px 'Gaegu',cursive}
.ac-opt.ac-best{background:#dff3ea;border-color:#5fae8a!important}
.ac-opt.ac-best>b{background:var(--mint)}
.ac-opt.ac-miss{background:#fbe3df;border-color:#e07a72!important}
.ac-opt:disabled,.ac-ox button:disabled{opacity:1;cursor:default}
.ac-opt.ac-dim{opacity:.5}
.ac-fb{display:block;margin-top:6px;font-size:13.5px;color:#3f342c;font-weight:500}
.ac-aiprac{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#efe6ff,var(--cream))}
.ac-aiprac img{width:70px;height:70px;object-fit:contain;flex:0 0 auto}
.ac-aiprac b{display:block;font:700 18px/1.35 'Gowun Batang',serif;margin-bottom:3px}
.ac-aiprac span{display:block;font-size:13px;color:var(--ink2);line-height:1.6}

/* ── ⑥ 쪽지 시험 ── */
.ac-quiz{padding:18px 16px;border-radius:var(--r);background:repeating-linear-gradient(transparent 0 30px,rgba(144,116,92,.14) 30px 31px),#fffaf0;color:var(--ink);border:2px solid var(--line);box-shadow:var(--sh);position:relative}
.ac-quiz:before{content:'';position:absolute;top:-9px;right:22%;width:60px;height:18px;background:rgba(159,211,199,.85);transform:rotate(5deg)}
.ac-qtop{display:flex;justify-content:space-between;align-items:center;font:700 17px 'Gaegu',cursive;color:#a0703a}
.ac-qq{font:700 19px/1.55 'Gowun Batang',serif;margin:8px 0 12px}
.ac-quiz .ac-opt{box-shadow:none}
.ac-why{margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--cream);border:1.5px dashed var(--line);font-size:14px;line-height:1.7}
.ac-why b{font:700 18px 'Gaegu',cursive;margin-right:4px}
.ac-score{text-align:center;padding:10px 0 4px}
.ac-score .ac-big{font-size:56px}
.ac-progress{height:8px;border-radius:var(--pill);background:rgba(144,116,92,.18);overflow:hidden;margin:8px 0 2px}
.ac-progress span{display:block;height:100%;background:var(--c);transition:width .4s}

/* ── ⑦ 마무리 ── */
.ac-finish{text-align:center}
.ac-secret{margin:6px 0 16px;border-radius:var(--r);background:#fffaf0;color:var(--ink);border:2px solid var(--line);box-shadow:var(--sh);overflow:hidden;text-align:left}
.ac-secret summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px;font:700 19px/1.4 'Gaegu',cursive}
.ac-secret summary::-webkit-details-marker{display:none}
.ac-secret summary i{font-style:normal;font-size:28px;animation:acWiggle 2.4s ease-in-out infinite}
.ac-secret[open] summary i{animation:none}
.ac-secret-body{padding:2px 20px 18px;background:repeating-linear-gradient(transparent 0 33px,rgba(144,116,92,.15) 33px 34px);animation:acUnfold .45s ease;transform-origin:top}
.ac-secret-body p{font:700 21px/1.6 'Gaegu',cursive;color:#4a3626}
.ac-secret-body .ac-sign{text-align:right;margin-top:6px;font-size:18px;color:#8a6a4f}
.ac-stamp{width:150px;height:150px;margin:8px auto 4px;border-radius:50%;display:grid;place-content:center;gap:2px;text-align:center;border:5px double #c66b2c;color:#a8481a;background:radial-gradient(circle,#fffaf0 58%,#ffe3c4);box-shadow:var(--sh);transform:rotate(-9deg);font:700 16px/1.3 'Gaegu',cursive;animation:acStamp .55s cubic-bezier(.2,1.6,.4,1) both}
.ac-stamp img{width:58px;height:58px;object-fit:contain;margin:0 auto}
.ac-xpgain{font:700 38px/1.2 'Gaegu',cursive;color:var(--gold);margin:6px 0 2px;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.ac-finish .ac-card{text-align:left}
.ac-bookline{display:flex;gap:8px;margin:4px 0;font-size:14px;line-height:1.65}
.ac-bookline b{flex:0 0 auto;min-width:64px;color:#a0703a}

/* ── 시험·수료증 ── */
.ac-examhead{text-align:center;padding:6px 0 12px}
.ac-examhead img{width:96px}
.ac-examhead h1{font-size:24px;color:#fff;margin:4px 0}
.ac-examhead p{color:var(--muted);font-size:14px}
.ac-result{text-align:center;padding:14px 0}
.ac-result h2{font-size:24px;color:#fff;margin:6px 0}
.ac-cert{position:relative;text-align:center;padding:26px 20px 22px;border-radius:var(--r);background:radial-gradient(circle at 50% 0,#fffdf6,#fff3dc);color:var(--ink);border:6px double var(--line);box-shadow:var(--sh)}
.ac-cert img.ac-crest{margin:0 auto 6px;width:90px}
.ac-cert h1{font-size:28px}
.ac-cert .ac-certsub{font:700 17px 'Gaegu',cursive;color:#a0703a}
.ac-cert input{width:100%;margin:14px 0 6px;padding:12px 14px;border-radius:var(--r-sm);border:2px solid var(--line);background:#fff;color:var(--ink);font:700 20px 'Gowun Batang',serif;text-align:center}
.ac-reccard{margin-top:18px;background:linear-gradient(135deg,#fff8e8,#f3ecff)}
.ac-recin{width:100%;margin:0 0 10px;padding:11px 12px;border-radius:var(--r-sm);border:2px solid rgba(144,116,92,.55);background:#fff;color:var(--ink);font:15px 'Noto Sans KR',sans-serif}
.ac-cert .ac-stamps{margin:14px 0}
.ac-certline{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font-size:14px;margin:6px 0}
.ac-certline b{font:700 22px 'Gaegu',cursive}

/* ── 아래 질문 단추·시트 ── */
.ac-ask{display:flex;align-items:center;gap:10px;width:100%;margin:14px 0 4px;padding:10px 14px 10px 10px;border-radius:var(--r);background:linear-gradient(135deg,#3a3f7a,#2b3263);color:var(--text)!important;border:2px dashed rgba(248,213,139,.55)!important;text-align:left}
.ac-ask img{width:46px;height:46px;object-fit:contain;flex:0 0 auto;animation:acBob 3.6s ease-in-out infinite}
.ac-ask span{flex:1;min-width:0}
.ac-ask b{display:block;font:700 18px/1.3 'Gaegu',cursive;color:var(--gold)}
.ac-ask small{display:block;font-size:12.5px;color:var(--muted)}
.ac-ask i{font-style:normal;font:700 22px 'Gaegu',cursive;color:var(--gold)}
.ac-sheet-bg{position:fixed;inset:0;z-index:1320;background:rgba(19,26,50,.72);display:flex;align-items:flex-end;justify-content:center;animation:acFade .2s ease}
.ac-sheet{width:100%;max-width:560px;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;background:var(--cream);color:var(--ink);border:2px solid var(--line);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:14px 16px calc(12px + env(safe-area-inset-bottom));animation:acUp .25s ease;font:15px/1.7 'Noto Sans KR',sans-serif}
.ac-sheet-head{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1.5px dashed rgba(144,116,92,.4)}
.ac-sheet-head img{width:52px;height:52px;object-fit:contain}
.ac-sheet-head b{display:block;font:700 19px/1.3 'Gaegu',cursive}
.ac-sheet-head small{display:block;font-size:12px;color:var(--ink2);line-height:1.5}
.ac-sheet-head .ac-iconbtn{margin-left:auto;background:var(--cream2);border-color:var(--line)!important;color:var(--ink)}
.ac-log{flex:1;overflow-y:auto;padding:10px 2px;min-height:180px;overscroll-behavior:contain}
.ac-msg{max-width:86%;margin:8px 0;padding:10px 13px;border-radius:18px 18px 18px 4px;background:#fff;border:1.5px solid rgba(144,116,92,.4);font-size:14.5px;line-height:1.75;white-space:pre-wrap}
.ac-msg.ac-me{margin-left:auto;border-radius:18px 18px 4px 18px;background:var(--gold);border-color:var(--line)}
.ac-msg.ac-sys{max-width:100%;background:#f3ecff;border-color:#c9b8f2;font-size:13px}
.ac-msg.ac-client-msg{font:700 17px/1.6 'Gaegu',cursive}
.ac-typing{display:inline-flex;gap:4px;padding:12px 14px}
.ac-typing i{width:7px;height:7px;border-radius:50%;background:#8a6a4f;animation:acDot 1s infinite ease-in-out}
.ac-typing i:nth-child(2){animation-delay:.15s}.ac-typing i:nth-child(3){animation-delay:.3s}
.ac-sugs{display:flex;gap:6px;overflow-x:auto;padding:6px 0;scrollbar-width:none}
.ac-sugs::-webkit-scrollbar{display:none}
.ac-sugs button{flex:0 0 auto;max-width:78%;padding:7px 12px;border-radius:var(--pill);background:#fff;border:1.5px solid rgba(144,116,92,.5)!important;font-size:13px;font-weight:700;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:36px}
.ac-form{display:flex;gap:8px;align-items:flex-end;padding-top:6px}
.ac-form textarea{flex:1;min-height:46px;max-height:120px;resize:none;padding:11px 12px;border-radius:16px;border:2px solid var(--line);background:#fff;color:var(--ink);font:16px/1.5 'Noto Sans KR',sans-serif}
.ac-form button{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--gold);border:2px solid var(--line)!important;font-size:20px;font-weight:900}
.ac-sheet-foot{display:flex;gap:8px;align-items:center;justify-content:space-between;padding-top:8px;font-size:12px;color:var(--ink2)}
.ac-fbcard{margin:10px 0;padding:14px;border-radius:18px;background:#fffaf0;border:2px solid var(--line)}
.ac-fbcard .ac-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.ac-fbcard .ac-scores div{text-align:center;padding:6px 2px;border-radius:12px;background:#fff;border:1.5px dashed rgba(144,116,92,.45);font-size:12px}
.ac-fbcard .ac-scores b{display:block;font:700 18px 'Gaegu',cursive;color:#a0703a}

/* ── 알림·불러오기 ── */
.ac-toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));z-index:1330;transform:translate(-50%,-160%);max-width:90%;padding:10px 18px;border-radius:var(--pill);background:var(--gold);color:var(--ink);border:2px solid var(--line);font:700 17px/1.4 'Gaegu',cursive;box-shadow:var(--sh);transition:transform .3s;pointer-events:none}
.ac-toast.ac-show{transform:translate(-50%,0)}
.ac-loading{min-height:70vh;display:grid;place-content:center;text-align:center;gap:10px;font:700 20px 'Gaegu',cursive;color:var(--gold)}
.ac-loading img{width:130px;margin:0 auto;animation:acBob 1.6s ease-in-out infinite}
.ac-confetti{position:fixed;inset:0;pointer-events:none;z-index:1325;overflow:hidden}
.ac-confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:acFall 1.6s ease-in forwards}

@keyframes acBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(1.5deg)}}
@keyframes acHop{0%{transform:translateY(0)}35%{transform:translateY(-14px) scale(1.04)}100%{transform:translateY(0)}}
@keyframes acGlow{0%,100%{box-shadow:0 0 0 5px rgba(248,213,139,.25),0 0 14px rgba(248,213,139,.6)}50%{box-shadow:0 0 0 8px rgba(248,213,139,.12),0 0 22px rgba(248,213,139,.9)}}
@keyframes acBlink{to{opacity:0}}
@keyframes acFlip{from{transform:rotateY(80deg);opacity:.4}to{transform:rotateY(0);opacity:1}}
@keyframes acStamp{0%{transform:scale(1.7) rotate(-20deg);opacity:0}60%{transform:scale(.92) rotate(-7deg);opacity:1}100%{transform:scale(1) rotate(-9deg)}}
@keyframes acUnfold{from{transform:scaleY(.6);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes acWiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
@keyframes acPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes acDot{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes acFade{from{opacity:0}}
@keyframes acUp{from{transform:translateY(40px);opacity:.4}}
@keyframes acFall{to{transform:translateY(105vh) rotate(540deg);opacity:.9}}
@media (max-width:380px){.ac-hero h1{font-size:27px}.ac-teacher{width:120px}.ac-house{width:100px}.ac-continue{padding-right:96px}.ac-continue .ac-host{width:84px;height:84px}.ac-stage-host,.ac-stage-host img{width:100px}.ac-stage-host img{height:100px}.ac-map-label b{font-size:16px}.ac-flip{padding:12px 10px}.ac-flip strong{font-size:16px}.ac-flip p{font-size:13px}}
@media (max-width:340px){.ac-flips{grid-template-columns:1fr}}
@media (min-width:700px){.ac-shell{padding-top:6px}}
@media (prefers-reduced-motion:reduce){.ac-root *,.ac-sheet-bg *{animation:none!important;transition:none!important}}
