/* 실습 앱 — base.css 위에. 모바일 먼저. */
body.app{font-family:var(--sans); line-height:1.65; padding-bottom:calc(60px + env(safe-area-inset-bottom))}
.app .wrap{max-width:640px}
.app .mast-in{justify-content:space-between}
.who{display:flex; gap:12px; align-items:center; font-size:14px; color:var(--ink2)}
.linkbtn{background:none; border:0; color:var(--mute); font:inherit; font-size:14px; text-decoration:underline; text-underline-offset:.2em; cursor:pointer; padding:8px 0}
.linkbtn:hover{color:var(--accent)}
.boot{padding:60px 0; color:var(--mute)}
.view{padding:28px 0 20px}
.title{font-family:var(--sans); font-weight:600; font-size:clamp(26px,7vw,34px); line-height:1.3; letter-spacing:-.03em; margin:0 0 8px}
.sub{color:var(--ink2); margin:0 0 22px; font-size:16.5px}
.sub b{color:var(--accent); font-weight:500}
.kicker{font-size:13px; color:var(--sea); margin:14px 0 4px}
.back{display:inline-block; font-size:14px; color:var(--mute); text-decoration:none; padding:6px 0}
.btn{border-radius:10px; font-family:inherit; font-size:16px}
.btn.wide{display:flex; width:100%; margin-top:12px}
.btn[disabled]{opacity:.45; cursor:default; pointer-events:none}
.msg{color:#ffb4a8; min-height:1.2em; margin:10px 0 0; font-size:15px}
.msg:empty{min-height:0; margin:0}
.small{font-size:13.5px; color:var(--mute)}

/* form */
.form{display:grid; gap:16px}
.form label, .extra{display:grid; gap:6px; font-size:14px; color:var(--ink2)}
input, textarea{font:inherit; font-size:16px; color:var(--ink); background:var(--bg2); border:1px solid var(--rule2); border-radius:10px; padding:13px 14px; width:100%}
input:focus, textarea:focus{outline:none; border-color:var(--accent)}
textarea{resize:vertical; min-height:120px; line-height:1.6}

/* 승인 대기 */
.wait-card{text-align:center; padding:50px 0}
.pulse{width:64px; height:64px; margin:0 auto 22px; border-radius:50%; border:2px solid var(--accent); animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.8); opacity:.4} 50%{transform:scale(1); opacity:1}}

/* 배지 — 둥근 메달: 그라데이션 테두리 + 안쪽 원판 + 아이콘(Lucide) + 빛 */
.medal{--c1:#4fa3c7; --c2:#1d4f6b; --d:62px; position:relative; display:inline-flex; flex-direction:column; align-items:center; width:calc(var(--d) + 16px); flex:none; color:var(--mute)}
.medal .m-disc{position:relative; display:grid; place-items:center; width:var(--d); height:var(--d); border-radius:50%; overflow:hidden;
  background:conic-gradient(from 200deg, var(--c1), #fff3d6, var(--c1) 30%, var(--c2) 55%, var(--c1) 80%, #fff3d6, var(--c1));
  box-shadow:0 6px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12)}
.medal .m-disc::before{content:""; position:absolute; inset:calc(var(--d) * .08); border-radius:50%;
  background:radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c1) 80%, #fff), var(--c1) 38%, var(--c2) 92%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.4), inset 0 -4px 8px rgba(0,0,0,.4)}
.medal .m-disc::after{content:""; position:absolute; inset:calc(var(--d) * .08); border-radius:50%; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 32%, rgba(255,255,255,0) 48%)}
.medal .m-ico{position:relative; z-index:1; width:calc(var(--d) * .42); height:calc(var(--d) * .42); margin-top:calc(var(--d) * -.08); fill:none; stroke:#fffaf0; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}
.medal .m-code{position:absolute; z-index:2; left:50%; bottom:calc(var(--d) * .1); transform:translateX(-50%); font:600 10.5px/1 var(--sans); letter-spacing:.02em; color:#fffaf0; padding:2px 6px; border-radius:99px; background:rgba(0,0,0,.28)}
.medal .m-name{margin-top:7px; font-size:11.5px; line-height:1.25; text-align:center; word-break:keep-all}
.medal.on .m-name{color:var(--ink)}
/* 잠김(아직) */
.medal:not(.on) .m-disc{background:conic-gradient(from 200deg, #3a4654, #5d6876, #3a4654 50%, #2a333e, #3a4654); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.medal:not(.on) .m-disc::before{background:radial-gradient(circle at 34% 28%, #2b3643, #18212b 90%); box-shadow:inset 0 2px 5px rgba(0,0,0,.5)}
.medal:not(.on) .m-disc::after{opacity:.15}
.medal:not(.on) .m-ico{stroke:#5f6b78; filter:none}
.medal:not(.on) .m-code{color:#8995a2; background:rgba(0,0,0,.25)}
.medal .m-lock{position:absolute; z-index:2; top:calc(var(--d) * .1); right:calc(var(--d) * .1); display:grid; place-items:center; width:calc(var(--d) * .3); height:calc(var(--d) * .3); border-radius:50%; background:#0d1520; box-shadow:0 0 0 1px #3a4654}
.medal .m-lock-ico{width:60%; height:60%; fill:none; stroke:#8995a2; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.medal .m-sweep{position:absolute; z-index:3; inset:0; border-radius:50%; pointer-events:none; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); background-size:260% 100%; background-position:160% 0; opacity:0}
.earned.fresh .medal .m-sweep{animation:sweep 1.3s .55s ease-out 1}
@keyframes sweep{0%{opacity:1; background-position:160% 0} 100%{opacity:1; background-position:-60% 0}}
.medal.m-l11{--c1:#4fa3c7; --c2:#174a66}
.medal.m-l12{--c1:#e2b56f; --c2:#80501b}
.medal.m-l21{--c1:#7fc08f; --c2:#24583a}
.medal.m-l22{--c1:#b98ad6; --c2:#4f2766}
.medal.m-l31{--c1:#e5806e; --c2:#76291f}
.medal.m-l32{--c1:#3fbab3; --c2:#0f4c49}
.medal.m-l33{--c1:#dcc35a; --c2:#66530f}
.medal.m-l34{--c1:#e98fb8; --c2:#6e2245}
.medal.big{--d:84px}
.medal.big .m-code{font-size:12px}
.medal.big .m-name{font-size:13px}
@media (prefers-reduced-motion: reduce){.earned.fresh .medal .m-sweep{animation:none}}
.shelf{display:flex; gap:8px; margin:0 0 24px; flex-wrap:wrap}
.earned{display:flex; gap:16px; align-items:center; margin:20px 0 6px; padding:16px; border:1px solid var(--rule2); border-radius:14px; background:var(--bg2)}
.earned b{display:block; font-size:17px}
.earned span{color:var(--ink2); font-size:14.5px}
.earned.fresh .medal{animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.3) rotate(-20deg)} 100%{transform:scale(1) rotate(0)}}

/* 레슨 목록 */
.lessons{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.lesson{display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:center; padding:16px; border:1px solid var(--rule2); border-radius:14px; text-decoration:none; background:var(--bg2)}
.lesson .l-code{font:600 20px/1 var(--sans); color:var(--accent)}
.lesson .l-body b{display:block; font-size:17px; font-weight:500}
.lesson .l-body span{display:block; font-size:14px; color:var(--mute); line-height:1.5}
.lesson .l-state{font-size:12.5px; padding:4px 9px; border-radius:99px; border:1px solid var(--rule2); white-space:nowrap}
.lesson.open{border-color:var(--accent)}
.lesson.open .l-state{background:var(--accent); color:var(--bg); border-color:var(--accent)}
.lesson.done .l-state{color:var(--sea); border-color:var(--sea)}
.lesson.locked{opacity:.5}
.lesson.locked .l-code{color:var(--mute)}

/* 1-1 */
.howto{margin:0 0 18px; padding-left:20px; color:var(--ink2); font-size:15px}
.howto b{color:var(--ink); font-weight:500}
.ratio{display:flex; gap:8px; margin-bottom:14px}
.ratio button{display:flex; gap:8px; align-items:center; background:none; border:1px solid var(--rule2); color:var(--ink2); border-radius:10px; padding:9px 14px; font:inherit; font-size:15px; cursor:pointer}
.ratio button[aria-pressed="true"]{border-color:var(--accent); color:var(--ink); background:rgba(226,181,111,.12)}
.ratio i{display:inline-block; border:1.5px solid currentColor; border-radius:2px}
.ratio .r11{width:14px; height:14px}
.ratio .r916{width:10px; height:17px}
.composer{position:relative}
.helpers{position:sticky; top:57px; z-index:5; display:flex; flex-wrap:wrap; gap:6px; padding:10px 0; margin:0 0 4px; background:var(--bg)}
.helpers::-webkit-scrollbar{display:none}
.helpers button{flex:none; border:1px solid var(--accent); color:var(--accent); background:rgba(226,181,111,.08); border-radius:99px; padding:8px 14px; font:inherit; font-size:15px; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35)}
.helpers button.used{background:var(--accent); color:var(--bg)}
.helpers button.idea{font-weight:600; padding:9px 18px}
.helpers button.idea:disabled{opacity:.6; cursor:wait}
.helpers button[aria-expanded="true"]{outline:2px solid var(--ink); outline-offset:1px}
.helper-panel{border:1px solid var(--rule2); border-radius:12px; background:#0d1824; padding:12px; margin-bottom:10px; box-shadow:0 12px 28px rgba(0,0,0,.45)}
.hp-t{margin:0 0 10px; font-size:13.5px; color:var(--mute)}
.used{display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:8px; font-size:13px; color:var(--mute)}
.used span.on{color:var(--sea)}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--rule2); background:var(--bg2); color:var(--ink); border-radius:99px; padding:9px 14px; font:inherit; font-size:15px; cursor:pointer; line-height:1.3}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:500}
.chip.etc{border-style:dashed}
.chip.fixed{border-color:var(--sea); color:var(--sea); cursor:default}
.chips.big .chip{padding:12px 16px; font-size:16px}

/* 1-2 마법사 */
.wizard{border:1px solid var(--rule2); border-radius:16px; padding:18px; background:var(--bg2)}
.wbar{display:grid; grid-template-columns:repeat(10,1fr); gap:4px; margin-bottom:10px}
.wbar i{height:5px; border-radius:3px; background:var(--rule)}
.wbar i.d{background:var(--sea)}
.wbar i.c{background:var(--accent)}
.wstep{margin:0; font-size:13px; color:var(--mute)}
.wq{font-size:22px; font-weight:600; margin:2px 0 14px; letter-spacing:-.02em}
.wcustom{margin-top:12px}
.wnav{display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:16px}
.summary{margin:0 0 16px; border-top:1px solid var(--rule)}
.summary div{display:grid; grid-template-columns:96px 1fr auto; gap:10px; padding:10px 0; border-bottom:1px solid var(--rule); cursor:pointer; align-items:baseline}
.summary dt{font-size:13.5px; color:var(--mute)}
.summary dd{margin:0}
.summary dd.none{color:var(--mute)}
.summary .edit{font-size:12.5px; color:var(--accent)}
.summary div.fixed{cursor:default}
.wizard .extra{display:block; margin:0 0 14px}
.pv{display:grid; gap:6px; font-size:13.5px; color:var(--mute)}
.pick-t{margin:22px 0 10px; color:var(--ink2)}
.pick{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cand{padding:0; border:3px solid transparent; border-radius:12px; overflow:hidden; background:none; cursor:pointer}
.cand[aria-pressed="true"]{border-color:var(--accent)}
.cand img{width:100%; aspect-ratio:2/3; object-fit:cover}

/* 2-1 · 2-2 */
.note{border-left:3px solid var(--sea); padding:10px 14px; background:var(--bg2); border-radius:0 10px 10px 0; margin:0 0 18px; font-size:14.5px; color:var(--ink2)}
.note ul{margin:6px 0 0; padding-left:18px}
.drop{display:grid; place-items:center; gap:10px; min-height:150px; border:1.5px dashed var(--rule2); border-radius:14px; padding:16px; cursor:pointer; text-align:center; color:var(--accent); margin-bottom:16px}
.drop input{position:absolute; width:1px; height:1px; opacity:0}
.drop img{max-height:260px; border-radius:10px}
.drop:focus-within{border-color:var(--accent)}
.og{margin-bottom:14px}
.og-t{margin:0 0 8px; font-size:14px; color:var(--ink2)}
.og-t small{color:var(--sea)}
.mychar figure{margin:0 0 18px; display:flex; gap:14px; align-items:center}
.mychar img{width:96px; aspect-ratio:2/3; object-fit:cover; border-radius:10px}
.mychar figcaption{font-size:14px; color:var(--mute)}
.extra{margin:4px 0 12px}
.preview{font-size:14px; color:var(--sea); padding:10px 12px; border:1px solid var(--rule); border-radius:10px}

/* 결과 */
.result:empty{display:none}
.result{margin-top:20px}
.shot{margin:0; border-radius:14px; overflow:hidden; border:1px solid var(--rule2)}
.shot img{width:100%}
.shot.r916 img{aspect-ratio:9/16; object-fit:cover}
.shot.id{max-width:360px; margin:0 auto}
.busy{display:grid; grid-template-columns:auto 1fr auto; gap:6px 12px; align-items:center; padding:20px; border:1px solid var(--rule2); border-radius:14px; background:var(--bg2)}
.busy small{grid-column:1/-1; color:var(--mute)}
.spin{width:22px; height:22px; border-radius:50%; border:3px solid var(--rule2); border-top-color:var(--accent); animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translate(-50%,30px); opacity:0; pointer-events:none; transition:.25s;
  background:var(--ink); color:var(--bg); padding:11px 18px; border-radius:99px; font-size:14.5px; width:max-content; max-width:calc(100% - 32px); text-align:center; z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.5)}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* 운영자 */
.adm .wrap{max-width:980px}
.tot{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0 0 20px}
.tot div{border:1px solid var(--rule2); border-radius:12px; padding:12px 14px; background:var(--bg2)}
.tot b{display:block; font-size:24px; font-weight:600}
.tot span{font-size:13px; color:var(--mute)}
.bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px}
.bar .btn{min-height:42px; padding:8px 16px; font-size:15px}
.ulist{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.urow{border:1px solid var(--rule2); border-radius:14px; padding:14px; background:var(--bg2); display:grid; gap:10px}
.urow.pending{border-color:var(--accent)}
.urow .top{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.urow .nm{font-size:18px; font-weight:600}
.urow .meta{font-size:13px; color:var(--mute)}
.pill{font-size:12.5px; padding:3px 9px; border-radius:99px; border:1px solid var(--rule2)}
.pill.pending{background:var(--accent); color:var(--bg); border-color:var(--accent)}
.pill.approved{color:var(--sea); border-color:var(--sea)}
.pill.revoked{color:#ffb4a8; border-color:#ffb4a8}
.urow .medals{display:flex; gap:6px; flex-wrap:wrap}
.urow .medal{--d:44px}
.urow .medal .m-code{font-size:9px; padding:1px 4px}
.urow .acts{display:flex; gap:8px; flex-wrap:wrap}
.urow .acts button{border-radius:8px; border:1px solid var(--rule2); background:none; color:var(--ink); padding:8px 12px; font:inherit; font-size:14px; cursor:pointer}
.urow .acts button.pri{background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:500}
.urow .acts button.danger{color:#ffb4a8}
@media (min-width:760px){ .tot{grid-template-columns:repeat(4,1fr)} }

/* 3부: 블록 제목, 대화, 프롬프트 카드, 생물 카드 */
.lessons .block-h{list-style:none; margin:14px 0 -2px; font-size:13.5px; color:var(--sea); letter-spacing:.02em}
.lessons .block-h:first-child{margin-top:0}
.chat{border:1px solid var(--rule2); border-radius:16px; background:var(--bg2); padding:14px; display:grid; gap:10px}
.chat:empty{display:none}
.chat-bar{display:flex; justify-content:space-between; align-items:center}
.chat-bar .btn{min-height:38px; padding:6px 16px; font-size:14.5px}
.chat-log{display:grid; gap:8px}
.bubble{max-width:86%; padding:10px 14px; border-radius:16px; line-height:1.55; font-size:15.5px; white-space:pre-wrap}
.bubble.agent{background:#13283a; border:1px solid rgba(143,195,217,.35); border-top-left-radius:4px; justify-self:start}
.bubble.me{background:var(--accent); color:var(--bg); border-top-right-radius:4px; justify-self:end}
.bubble.typing{display:flex; gap:5px; padding:14px}
.bubble.typing i{width:7px; height:7px; border-radius:50%; background:var(--sea); animation:blink 1s infinite}
.bubble.typing i:nth-child(2){animation-delay:.2s} .bubble.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25} 50%{opacity:1}}
.chat-chips:empty{display:none}
.chat-in{display:grid; grid-template-columns:1fr auto; gap:8px}
.chat-in .btn{min-height:46px; padding:8px 16px}
.chat-in[hidden]{display:none}
.pkg{border:1px solid var(--accent); border-radius:14px; padding:14px; background:#0d1824; margin-top:14px}
.pkg-t{display:flex; gap:10px; align-items:center; margin:0 0 6px; font-size:16.5px}
.pkg-set{margin:0 0 10px; font-size:13px; color:var(--sea); line-height:1.5}
.pkg-prompt{margin:0; white-space:pre-wrap; word-break:break-word; font:400 13px/1.55 var(--mono); color:var(--ink2); max-height:360px; overflow:auto; background:rgba(0,0,0,.25); padding:10px; border-radius:8px}
.pkg details summary{cursor:pointer; color:var(--accent); font-size:14px; padding:4px 0}
.sent{font-size:17px; color:var(--sea); margin:18px 0 0; font-weight:500}
.crgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.crcard{display:grid; justify-items:center; gap:4px; text-align:center; padding:14px 10px; border:1px solid var(--rule2); border-radius:16px; background:var(--bg2); color:var(--ink); font:inherit; cursor:pointer}
.crcard:hover, .crcard.on{border-color:var(--accent); background:#162434}
.crcard[disabled]{cursor:default}
.crcard img{width:84px; height:84px; image-rendering:pixelated}
.crcard b{font-size:17px}
.crcard .cr-t{font-size:14px; color:var(--accent)}
.crcard .cr-l{font-size:12.5px; color:var(--mute); line-height:1.4}
.busy.sending span:first-of-type{font-size:16.5px}
.toggle2 .chip{min-width:96px; text-align:center}
.og-t{margin:12px 0 8px}
#cap34{min-height:280px}
/* 운영자: 탭·제출 */
.tabs{display:flex; gap:8px; margin:0 0 18px}
.tabs button, .filt button{border:1px solid var(--rule2); background:none; color:var(--ink2); border-radius:99px; padding:8px 16px; font:inherit; font-size:15px; cursor:pointer}
.tabs button[aria-pressed="true"], .filt button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.filt{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
.subcard{border:1px solid var(--rule2); border-radius:14px; padding:14px; background:var(--bg2); display:grid; gap:8px}
.subcard.used{opacity:.6}
.subcard .top{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline}
.subcard .nm{font-weight:600; font-size:17px}
.subcard .acts{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.subcard .acts button{border-radius:8px; border:1px solid var(--rule2); background:none; color:var(--ink); padding:7px 12px; font:inherit; font-size:14px; cursor:pointer}
.subcard .acts button.pri{background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:500}
.subcard label.chk{display:flex; gap:6px; align-items:center; font-size:14.5px; margin-left:auto; cursor:pointer}
.subcard label.chk input{width:20px; height:20px; padding:0}
.urow .medals .medal{--d:42px}

/* 수료증 */
.certbox{margin:8px 0 14px}
.certbox img{display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.5)}
.lesson.cert .l-code{font-size:26px}
.certlink{margin-top:12px}