/* 레이아웃: 맨 위 조종 띠(학생/원장님 바꾸기·처음부터·지금 할 일) + 아래 한 화면. 시안 A(빨간펜 노트) 색 그대로, 실제 사이트처럼 밝은 화면 하나로 고정 */
:root{
  --ivory:#fbf8f0; --ivory-2:#f3eedf; --white:#ffffff; --mint:#eaf3ec; --mint-2:#d6e8da; --green:#1f4d36; --green-2:#2f6b4c;
  --ink:#1b231e; --ink-2:#5b675f; --hand:#26324a; --pen:#c8322b; --pen-soft:#fbe6e3; --pen-faint:#d9918b; --rule:#e3dccb; --rule-g:#d9e3db;
  --caution:#9a6400; --caution-soft:#fbefd6; --ok:#2f6b4c; --ok-soft:#e3efe6; --ctl:#16211b; --ctl-2:#2a3a30; --desk:#5f564c;
  --f-display:"Gowun Batang",serif; --f-body:"Noto Sans KR","Malgun Gothic",sans-serif; --f-hand:"Nanum Pen Script",cursive;
  --r:12px;
}
*{box-sizing:border-box}
body{background:var(--ivory); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.6}
button{font:inherit; cursor:pointer}
button:focus-visible, textarea:focus-visible{outline:3px solid var(--green-2); outline-offset:2px}
.pad{padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1180px; margin:0 auto}

/* 조종 띠 */
.ctl{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--ctl); color:#e8efe9; padding-block:10px}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); background:var(--ctl); z-index:30}
.ctl .inner{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.ctl .tag{font-size:11.5px; letter-spacing:.06em; color:#9fbfac; font-weight:700}
.seg{display:flex; background:var(--ctl-2); border-radius:999px; padding:3px}
.seg button{border:0; background:transparent; color:#cfe0d4; padding:6px 14px; border-radius:999px; font-size:13.5px; font-weight:500}
.seg button[aria-pressed="true"]{background:var(--ivory); color:var(--green); font-weight:700}
.reset{border:1px solid #3d5145; background:transparent; color:#cfe0d4; border-radius:999px; padding:5px 12px; font-size:12.5px}
.guide{flex:1 1 260px; min-width:0; font-size:13.5px; color:#fff}
.guide b{color:#ffd9d5}

/* 사이트 공통 */
.site{padding-block:22px 60px}
.top{display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--rule); margin-bottom:22px; flex-wrap:wrap}
.logo{font-family:var(--f-display); font-weight:700; font-size:20px; color:var(--green)}
.who{font-size:13px; color:var(--ink-2)}
.hello{font-size:13.5px; color:var(--ink-2)}
.h1{font-family:var(--f-display); font-size:clamp(22px,3vw,30px); font-weight:700; line-height:1.3; margin:2px 0 0}
.h1 small{display:block; font-family:var(--f-body); font-size:13px; font-weight:500; color:var(--green)}
.back{border:0; background:none; color:var(--green); font-weight:700; padding:0; font-size:14px; justify-self:start}
.tnote{font-size:12px; color:var(--ink-2)}

.four{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:20px}
.tbtn{text-align:left; background:var(--white); border:1px solid var(--rule); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:6px; min-height:140px; min-width:0; color:var(--ink); position:relative}
.tbtn:hover{border-color:var(--green-2)}
.tbtn .ic{width:40px; height:40px; border-radius:10px; background:var(--mint); color:var(--green); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:18px}
.tbtn b{font-family:var(--f-display); font-size:clamp(18px,2.2vw,22px)}
.tbtn span.d{font-size:13px; color:var(--ink-2)}
.tbtn.lec{box-shadow:inset 0 0 0 1.5px var(--green)}
.tbtn.fbk{background:repeating-linear-gradient(var(--white) 0 23px, var(--rule-g) 23px 24px)}
.tbtn.fbk span.d{font-family:var(--f-hand); font-size:20px; color:var(--pen)}
.new{position:absolute; top:14px; right:14px; background:var(--pen); color:var(--white); font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px}
.acts2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:14px; margin-top:14px}
.dl{border:0; background:transparent; box-shadow:inset 0 0 0 1.5px var(--green); color:var(--green); border-radius:var(--r); padding:14px 18px; font-weight:700; text-align:left; display:flex; flex-direction:column; gap:2px}
.dl span{font-weight:400; font-size:12.5px; color:var(--ink-2)}
.sub{border:0; background:var(--green); color:var(--white); border-radius:var(--r); padding:14px 20px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:700; font-size:18px; text-align:left}
.sub span{font-weight:400; font-size:13px; opacity:.85; text-align:right}
.sub.done{background:var(--mint); color:var(--green)}
@media (max-width:620px){.four{gap:10px}.tbtn{padding:14px; min-height:112px}.acts2{grid-template-columns:1fr}}

/* 제출 */
.slist{display:grid; gap:10px; margin-top:20px}
.srow{display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:14px; align-items:center; background:var(--white); border:1px solid var(--rule); border-radius:var(--r); padding:14px 16px}
.no{width:32px; height:32px; border-radius:50%; background:var(--mint); color:var(--green); font-weight:700; display:flex; align-items:center; justify-content:center}
.no.ok{background:var(--green); color:var(--white)}
.srow b{display:block; font-size:16px}
.srow small{color:var(--ink-2); font-size:12.5px}
.srow small.ok{color:var(--ok)}
.thumbs{display:flex; gap:5px; margin-top:6px}
.thumb{width:34px; height:44px; border-radius:3px; border:1px solid var(--rule); background:repeating-linear-gradient(var(--white) 0 6px, var(--rule-g) 6px 7px)}
.wave{display:flex; gap:2px; align-items:center; height:22px; margin-top:6px; overflow:hidden; min-width:0}
.wave i{flex:none; width:3px; border-radius:2px; background:var(--green-2)}
.up{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.up button{border:0; font-size:13px; font-weight:700; padding:8px 14px; border-radius:8px; background:var(--green); color:var(--white); white-space:nowrap}
.up button.ghost{background:var(--mint); color:var(--green)}
.sfoot{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; font-size:14px; color:var(--ink-2)}
.final{border:0; background:var(--green); color:var(--white); padding:12px 24px; border-radius:var(--r); font-weight:700; font-size:16px}
.final:disabled{opacity:.4; cursor:not-allowed}
.fill{border:0; background:none; color:var(--ink-2); text-decoration:underline; font-size:12.5px; padding:0}
@media (max-width:560px){.srow{grid-template-columns:34px minmax(0,1fr)}.up{grid-column:2; justify-content:flex-start}}
.donebox{margin-top:24px; background:var(--white); border:1px solid var(--rule); border-radius:var(--r); padding:32px 24px; text-align:center}
.donebox .big{font-family:var(--f-display); font-size:26px; font-weight:700; color:var(--green)}

/* 자료 보기 창 */
.modal{position:fixed; inset:0; z-index:40; background:rgba(20,30,24,.55); display:flex; align-items:center; justify-content:center; padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.sheet{background:var(--ivory); border-radius:16px; width:min(780px,100%); max-height:100%; overflow:auto; padding:20px; display:grid; gap:14px}
.sheet .sh{display:flex; justify-content:space-between; align-items:center; gap:10px}
.sheet .sh b{font-family:var(--f-display); font-size:20px}
.x{border:0; background:var(--mint); color:var(--green); border-radius:999px; width:36px; height:36px; font-size:18px; font-weight:700; flex:none}
.video{aspect-ratio:16/9; max-width:100%; background:var(--green); border-radius:10px; color:var(--ivory); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:16px}
.video .play{width:64px; height:64px; border-radius:50%; background:var(--ivory); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:24px}
.video small{opacity:.75}
.sheetfoot{display:flex; justify-content:flex-end; gap:8px}
.sheetfoot button{border:0; background:var(--green); color:var(--white); border-radius:10px; padding:9px 16px; font-weight:700}

/* 종이 */
.paper{background:var(--white); border:1px solid var(--rule); border-radius:3px; padding:22px 24px; box-shadow:0 6px 18px rgba(30,40,30,.08); position:relative; overflow:hidden}
.paper.lined{background:repeating-linear-gradient(var(--white) 0 31px, var(--rule-g) 31px 32px); background-position:0 14px; min-height:330px}
.paper h4{font-family:var(--f-display); font-size:16px; margin:0 0 8px; color:var(--ink-2); font-weight:400}
.print{font-size:14px; line-height:1.9}
.print ol{margin:0; padding-left:20px}
.hand{font-family:var(--f-hand); font-size:24px; line-height:32px; color:var(--hand)}
.hand .ln{display:block}
.hand .q{color:var(--ink-2); font-family:var(--f-body); font-size:12.5px}
.pg-tag{position:absolute; left:0; top:0; background:var(--green); color:var(--white); font-size:11.5px; font-weight:700; padding:3px 10px; border-bottom-right-radius:8px}
.stamp{position:absolute; right:16px; top:12px; font-family:var(--f-hand); font-size:20px; color:var(--pen); border:2px solid var(--pen); border-radius:50%; padding:6px 9px; transform:rotate(-10deg); opacity:.9}
.score-c{position:absolute; right:22px; top:16px; font-family:var(--f-hand); font-size:38px; color:var(--pen); border:2px solid var(--pen); border-radius:50%; width:66px; height:66px; display:flex; align-items:center; justify-content:center; transform:rotate(-8deg)}
/* 빨간펜: 확정(진한 빨강) / AI 초안(점선·연한) */
.w.red{text-decoration:line-through; text-decoration-color:var(--pen); text-decoration-thickness:2px}
.w.draft{text-decoration:line-through dashed; text-decoration-color:var(--pen-faint)}
.fx{margin-left:6px; font-weight:700}
.fx.red{color:var(--pen)} .fx.draft{color:var(--pen-faint)}
.ul.red{text-decoration:underline wavy var(--pen); text-underline-offset:5px}
.ul.draft{text-decoration:underline dashed var(--pen-faint); text-underline-offset:5px}
.nt{margin-left:8px; white-space:nowrap}
.nt.red{color:var(--pen); font-size:22px}
.nt.draft{font-family:var(--f-body); font-size:12px; color:var(--pen); border:1px dashed var(--pen-faint); background:var(--pen-soft); border-radius:6px; padding:1px 7px; vertical-align:middle; white-space:normal}
.nt.draft::before{content:"AI "; font-weight:700}
/* 원본 사진처럼 보이기 */
.shot{background:var(--desk); padding:22px 16px; border-radius:8px; overflow:hidden}
.shot .paper{transform:rotate(-2.4deg) skewX(-1.5deg) scale(.95); filter:sepia(.35) brightness(.86) contrast(.82); box-shadow:0 10px 24px rgba(0,0,0,.4)}
.shot .paper::after{content:""; position:absolute; inset:0; background:linear-gradient(118deg, rgba(0,0,0,.30), rgba(0,0,0,0) 48%), linear-gradient(0deg, rgba(90,70,30,.12), rgba(0,0,0,0)); pointer-events:none}
.shot .pg-tag{display:none}

/* 원장님 화면 */
.admin{display:grid; grid-template-columns:190px minmax(0,1fr); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; background:var(--ivory); min-width:0}
.side{background:var(--ivory-2); border-right:1px solid var(--rule); padding:18px 10px; display:flex; flex-direction:column; gap:3px}
.side .logo{padding:0 10px 14px; font-size:17px}
.side a{display:flex; justify-content:space-between; align-items:center; padding:9px 10px; border-radius:10px; font-size:14px; color:var(--ink-2)}
.side a.on{background:var(--green); color:var(--white); font-weight:700}
.badge{background:var(--pen); color:var(--white); border-radius:999px; font-size:11px; font-weight:700; padding:0 7px; line-height:18px}
.side .me{margin-top:auto; font-size:12px; color:var(--ink-2); padding:16px 10px 0}
.amain{padding:20px 22px; display:grid; gap:16px; min-width:0}
.ahead{display:flex; justify-content:space-between; align-items:flex-end; gap:8px 16px; flex-wrap:wrap}
.ahead h3{font-family:var(--f-display); font-size:22px; margin:0}
.ahead small{color:var(--ink-2); font-size:12.5px}
.deadline{font-size:12.5px; background:var(--white); border:1px solid var(--rule); border-radius:999px; padding:4px 12px}
.akpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.akpi{background:var(--white); border:1px solid var(--rule); border-radius:12px; padding:12px 14px; color:var(--ink-2); font-size:12.5px; display:flex; flex-direction:column; gap:2px; min-width:0}
.akpi b{font-family:var(--f-display); font-size:28px; line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums}
.akpi b small{font-size:15px; color:var(--ink-2)}
.akpi.fbw b{color:var(--pen)} .akpi.risk b{color:var(--caution)}
.akpi.bump{box-shadow:inset 0 0 0 2px var(--pen)}
.tablewrap{overflow-x:auto; border:1px solid var(--rule); border-radius:12px; background:var(--white)}
table.st{width:100%; border-collapse:collapse; font-size:13.5px; min-width:840px}
.st th{text-align:left; font-weight:500; font-size:12px; color:var(--ink-2); padding:10px 12px; border-bottom:1px solid var(--rule); background:var(--ivory); white-space:nowrap; vertical-align:bottom}
.st td{padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:middle}
.st tr:last-child td{border-bottom:0}
.st tr.me td{background:#fff7f5}
.nm b{display:block} .nm small{color:var(--ink-2); font-size:11.5px} .nm small.flag{color:var(--pen)}
.chip{display:inline-block; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap}
.chip.r{background:var(--pen-soft); color:var(--pen)} .chip.y{background:var(--caution-soft); color:var(--caution)} .chip.g{background:var(--ok-soft); color:var(--ok)}
/* 점 5개와 항목 이름을 같은 칸 너비로 맞춤 */
.d5, .d5h{display:grid; grid-template-columns:repeat(5,38px); justify-items:center}
.d5h{margin-top:4px; font-size:11px; color:var(--ink); font-weight:700}
.d5 i{width:13px; height:13px; border-radius:50%; background:var(--mint)}
.d5 i.on{background:var(--green)}
.d5 i.miss{background:transparent; box-shadow:inset 0 0 0 2px var(--pen)}
.d5n{font-size:11.5px; color:var(--ink-2); margin-top:3px; white-space:nowrap; padding-left:12px}
.score{font-variant-numeric:tabular-nums; font-weight:700} .score.low{color:var(--pen)}
.fbst{font-size:12.5px; color:var(--ink-2); white-space:nowrap} .fbst.wait{color:var(--pen); font-weight:700} .fbst.sent{color:var(--ok); font-weight:700}
.fbst small{display:block; font-weight:400; color:var(--ink-2); font-size:11px}
.act{border:0; font-size:12.5px; font-weight:700; border-radius:8px; padding:6px 11px; white-space:nowrap; background:var(--mint); color:var(--green)}
.act.pri{background:var(--green); color:var(--white)}
@media (max-width:760px){.admin{grid-template-columns:1fr}.side{flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--rule); padding:8px}.side .logo,.side .me{display:none}.side a{white-space:nowrap}.akpis{grid-template-columns:repeat(2,minmax(0,1fr))}.amain{padding:16px}}

/* 피드백 화면: 쪽 목록 | PDF 쪽 | AI 초안 */
.fbgrid{display:grid; grid-template-columns:96px minmax(0,1fr) 330px; gap:16px; align-items:start}
.thumbs-v{display:flex; flex-direction:column; gap:8px}
.tp{border:1px solid var(--rule); background:var(--white); border-radius:8px; padding:6px; display:flex; flex-direction:column; gap:4px; align-items:center; font-size:11px; color:var(--ink-2); position:relative}
.tp .mini{width:54px; height:68px; border:1px solid var(--rule); background:repeating-linear-gradient(var(--white) 0 6px, var(--rule-g) 6px 7px); border-radius:2px}
.tp[aria-pressed="true"]{border-color:var(--green); box-shadow:inset 0 0 0 1.5px var(--green); color:var(--green); font-weight:700}
.tp .dot{position:absolute; top:4px; right:4px; min-width:18px; height:18px; border-radius:9px; background:var(--pen); color:var(--white); font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px}
.viewer{display:grid; gap:10px; min-width:0}
.vbar{display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap; font-size:13px}
.vbar .fn{font-weight:700; color:var(--ink); min-width:0; overflow-wrap:anywhere}
.mseg{display:flex; background:var(--ivory-2); border-radius:999px; padding:3px}
.mseg button{border:0; background:transparent; color:var(--ink-2); padding:4px 12px; border-radius:999px; font-size:12.5px}
.mseg button[aria-pressed="true"]{background:var(--green); color:var(--white); font-weight:700}
.audio{display:flex; align-items:center; gap:12px; background:var(--white); border:1px solid var(--rule); border-radius:var(--r); padding:10px 14px; min-width:0}
.audio .play{width:38px; height:38px; border-radius:50%; background:var(--green); color:var(--white); display:flex; align-items:center; justify-content:center; flex:none}
.audio .wave{flex:1; margin:0}
.audio b{font-size:13px; white-space:nowrap}
.panel{background:var(--white); border:1px solid var(--rule); border-radius:var(--r); padding:14px; display:grid; gap:12px; position:sticky; top:calc(env(safe-area-inset-top,0px) + 66px)}
.ph{display:flex; justify-content:space-between; align-items:center; gap:8px}
.ph b{font-size:14px}
.ph small{color:var(--pen); font-weight:700; font-size:12px}
.allok{border:0; background:var(--mint); color:var(--green); border-radius:8px; padding:5px 10px; font-size:12.5px; font-weight:700; white-space:nowrap}
.cards{display:grid; gap:8px}
.ai{border:1px solid var(--rule); border-radius:10px; padding:10px 12px; display:grid; gap:4px; font-size:13px}
.ai.pending{border:1px dashed var(--pen-faint); background:#fffaf9}
.ai .wh{display:flex; justify-content:space-between; gap:6px; align-items:center}
.ai .wh button{border:0; background:none; padding:0; color:var(--green); font-weight:700; font-size:12.5px; text-align:left}
.kind{font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px; background:var(--pen-soft); color:var(--pen); white-space:nowrap}
.kind.good{background:var(--ok-soft); color:var(--ok)}
.ai .lb{color:var(--ink-2); font-size:11.5px; margin-right:4px}
.ai .sg{color:var(--pen); font-weight:700}
.ai .why{color:var(--ink-2); font-size:12.5px}
.ai .btns{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:4px}
.ai .btns button{border:0; border-radius:7px; padding:6px 0; font-size:12.5px; font-weight:700; background:var(--mint); color:var(--green)}
.ai .btns button.ok{background:var(--green); color:var(--white)}
.ai .res{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; margin-top:2px}
.ai .res b{color:var(--ok)}
.ai .res b.no{color:var(--ink-2)}
.ai .res button{border:0; background:none; color:var(--ink-2); text-decoration:underline; font-size:12px; padding:0}
.ai input{font:inherit; font-size:13px; border:1px solid var(--pen-faint); border-radius:7px; padding:6px 8px; width:100%; background:var(--white); color:var(--ink)}
.ai .ebtn{display:flex; gap:5px; justify-content:flex-end}
.ai .ebtn button{border:0; border-radius:7px; padding:5px 12px; font-size:12.5px; font-weight:700; background:var(--mint); color:var(--green)}
.ai .ebtn button.ok{background:var(--green); color:var(--white)}
.chips{display:flex; flex-wrap:wrap; gap:5px}
.chips button{border:1px solid var(--rule); background:var(--ivory); border-radius:999px; padding:4px 10px; font-size:12.5px; color:var(--ink)}
textarea{width:100%; min-height:76px; resize:vertical; border:1px dashed var(--pen-faint); border-radius:10px; padding:9px 11px; font:inherit; font-size:13.5px; background:#fffaf9; color:var(--ink)}
textarea.edited{border-style:solid; border-color:var(--rule); background:var(--ivory)}
.send{border:0; background:var(--pen); color:var(--white); border-radius:var(--r); padding:12px; font-weight:700; font-size:15.5px; width:100%}
.send:disabled{background:var(--ivory-2); color:var(--ink-2); cursor:not-allowed}
@media (max-width:1020px){.fbgrid{grid-template-columns:minmax(0,1fr) 300px}.thumbs-v{grid-column:1 / -1; flex-direction:row; overflow-x:auto; padding-bottom:4px}.tp{flex:none}}
@media (max-width:780px){.fbgrid{grid-template-columns:1fr}.panel{position:static}}

/* 학생 쪽 피드백 보기 */
.fbsum{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px}
.fbsum span{color:var(--ok)}
.tcomment{background:var(--white); border:1px solid var(--rule); border-radius:var(--r); padding:14px 16px}
.tcomment small{color:var(--ink-2); font-size:12px}
.tcomment p{font-family:var(--f-hand); font-size:26px; line-height:1.3; color:var(--pen); margin:4px 0 0}

.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ctl); color:#fff; padding:10px 18px; border-radius:999px; font-size:14px; z-index:50; max-width:calc(100% - 32px); text-align:center}
@media (prefers-reduced-motion:no-preference){.toast{animation:up .25s ease-out}@keyframes up{from{transform:translate(-50%,10px); opacity:0}to{transform:translate(-50%,0); opacity:1}}}

/* 위 토큰과 시연판 구성요소는 A안 원본 그대로 사용한다. 아래는 실제 폼·링크 보완이다. */
body{margin:0}
a{color:var(--green);text-decoration:none}
a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--green-2);outline-offset:2px}
button:disabled,.tbtn:disabled{opacity:.45;cursor:not-allowed}
.tbtn{font:inherit}
h2{font-family:var(--f-display);font-size:20px}
.who{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.who a{font-size:12px}
.inline{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.formbox{max-width:620px;margin:32px auto;background:var(--white);padding:28px;border:1px solid var(--rule);border-radius:var(--r)}
.fields{display:grid;gap:16px;margin-top:20px}
.fields label{display:grid;gap:6px;font-size:14px;min-width:0}
input,select{font:inherit;color:var(--ink);background:var(--white);border:1px solid var(--rule);border-radius:8px;padding:10px;max-width:100%;min-width:0}
.fields input,.fields select{width:100%}
.fields .check{display:flex;align-items:flex-start;gap:10px}
.fields .check input{width:18px;height:18px;flex:none;margin-top:4px}
.formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.formgrid .final{align-self:end}
footer{margin-top:40px;font-size:12px;color:var(--ink-2)}
.akpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.dot-status{font-size:20px;color:var(--rule)}
.dot-status.ok{color:var(--green)}
.flag{color:var(--pen)}
.tablewrap{overflow-x:auto}
.st{min-width:650px}
.st td{vertical-align:top}
.st td .act{display:inline-block;margin:2px;white-space:nowrap}
.st details{min-width:85px;font-size:12px;margin-top:8px}
.st details a{display:inline-block;margin-top:6px}
.file-input{width:100%;font-size:12px}
.js .upload .file-input{position:absolute;width:1px;height:1px;opacity:0;padding:0;pointer-events:none}
.thumbs{flex-wrap:wrap;max-width:100%}
img.thumb{object-fit:cover;width:42px;height:56px}
audio{max-width:100%;width:260px;height:36px}
.up{max-width:270px}
.up progress,.up .upload-status{width:100%;font-size:12px}
.slist .srow{min-width:0}
@media(max-width:700px){.admin{grid-template-columns:1fr}.side{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--rule)}.side .logo,.side .me{display:none}.amain{padding:16px}.formgrid{grid-template-columns:1fr}.formbox{padding:20px;margin:20px auto}.akpi{padding:10px}.akpi b{font-size:24px}}
/* 올리기 전 미리보기: 사진 방향 확인·돌리기 */
.tray{grid-column:1 / -1; display:grid; gap:10px; border-top:1px dashed var(--rule); padding-top:12px; margin-top:4px}
.tray-hint{margin:0; font-size:13px; color:var(--green); font-weight:700}
.tray-list{display:flex; flex-wrap:wrap; gap:10px}
.tray-item{margin:0; display:grid; gap:6px; justify-items:center}
.tray-frame{width:min(180px, 40vw); height:min(180px, 40vw); border:1px solid var(--rule); border-radius:8px; background:var(--ivory); display:flex; align-items:center; justify-content:center; overflow:hidden}
.tray-frame img{max-width:100%; max-height:100%; transition:transform .15s ease}
.tray-item button{border:0; font:inherit; font-size:12.5px; font-weight:700; padding:6px 10px; border-radius:8px; background:var(--mint); color:var(--green); cursor:pointer}
.tray-acts{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.tray-acts button{border:0; font:inherit; font-size:14px; font-weight:700; padding:9px 16px; border-radius:8px; background:var(--green); color:var(--white); cursor:pointer}
.tray-acts button.ghost{background:var(--mint); color:var(--green)}
@media (prefers-reduced-motion:reduce){.tray-frame img{transition:none}}

/* 2차: 시연 A안의 색·글꼴·패널과 작은 화면 카드 배치 */
.akpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.akpi{font:inherit;font-size:12.5px;text-decoration:none}
.akpi:hover,.akpi:focus-visible{border-color:var(--green)}
.akpi.overdue b,.akpi.overdue span{color:var(--pen)}
.dashboard-filters,.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.filter-tabs{justify-content:flex-start}
.filter-tabs a{border-radius:99px;background:var(--mint);padding:6px 10px;font-size:12px}
.filter-tabs a[aria-current]{background:var(--green);color:var(--white)}
.dashboard-filters form{max-width:100%;flex-wrap:nowrap}
.dashboard-filters input[type=search]{width:160px;min-width:0}
.dashboard-table{overflow:visible}
.dashboard-table table.st{min-width:0;width:100%;table-layout:auto}
.dashboard-table .st th,.dashboard-table .st td{padding:10px 8px}
.dashboard-table .nm{min-width:110px;max-width:180px;overflow-wrap:anywhere}
.dashboard-table .d5,.dashboard-table .d5h{grid-template-columns:repeat(5,38px)}
.dashboard-table .fbst{white-space:normal}
.dashboard-table .d5n{white-space:normal;padding-left:0}
.mobile-labels{display:none}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.row-actions details{max-width:190px}
.row-actions summary{cursor:pointer;font-size:11px;color:var(--ink-2)}
#feedback-editor{min-width:0}
.fbgrid{grid-template-columns:76px minmax(0,1fr) 270px;gap:12px}
.tp img.mini{object-fit:contain;background:var(--white);height:68px}
.tp .dot[hidden]{display:none}
.pen-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pen-tools button,.pen-tools label{font:inherit;font-size:12px;border:1px solid var(--rule);background:var(--white);border-radius:8px;padding:6px 8px;color:var(--green)}
.pen-tools select{font-size:12px;padding:2px;border:0}
.pen-tools [aria-pressed=true],.allok[aria-pressed=true]{background:var(--green);color:var(--white)}
.pen-stage,.student-pen{position:relative;width:100%;aspect-ratio:595/842;overflow:hidden;background:white;box-shadow:0 6px 18px rgba(30,40,30,.08);border:1px solid var(--rule)}
.pen-stage img,.student-pen img{position:absolute;left:50%;top:50%;width:100%;max-width:none;height:auto;transform:translate(-50%,-50%);pointer-events:none;user-select:none}
.pen-stage canvas,.student-pen canvas{position:absolute;inset:0;width:100%;height:100%}
.pen-stage canvas{touch-action:none;cursor:crosshair}
.student-pen canvas{pointer-events:none}
.panel label{display:grid;gap:6px;font-size:13px;min-width:0}
.panel input{width:100%}
.item-checks{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:var(--ok)}
.favorite{display:inline-flex;max-width:100%;align-items:stretch}
.favorite button{white-space:normal;overflow-wrap:anywhere;text-align:left}
.favorite button:first-child{border-radius:12px 0 0 12px}
.favorite button:last-child{border-radius:0 12px 12px 0;color:var(--pen)}
.panel,.panel>*{min-width:0}
.audio audio{min-width:0;flex:1}
.feedback-sheet{margin:24px auto;max-height:none;border:1px solid var(--rule);padding:22px}
.feedback-sheet .x{display:flex;align-items:center;justify-content:center}
.feedback-figure{margin:0;min-width:0}
.feedback-figure figcaption{font-size:12px;color:var(--ink-2);margin-bottom:6px}
.feedback-download{text-align:center;display:block}
.feedback-history{padding-left:20px;font-size:14px;line-height:2}
.feedback-hand{font-family:var(--f-hand);font-size:23px;color:var(--pen);line-height:1.3;overflow-wrap:anywhere}
.feedback-alone{max-width:420px;margin:20px auto}
.feedback-alone .tbtn{width:100%}
.feedback-sheet .tcomment p{overflow-wrap:anywhere;white-space:pre-wrap}
@media(max-width:1200px){
  .fbgrid{grid-template-columns:minmax(0,1fr) 260px}
  .thumbs-v{grid-column:1/-1;flex-direction:row;overflow-x:auto;max-width:100%;padding-bottom:4px}
  .tp{flex:0 0 76px}
  .dashboard-table table,.dashboard-table tbody{display:block}
  .dashboard-table thead{display:none}
  .dashboard-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;border-bottom:1px solid var(--rule);gap:8px}
  .dashboard-table .st td{display:block;border:0;padding:2px 0;min-width:0;max-width:none}
  .dashboard-table td::before{content:attr(data-label);display:block;color:var(--ink-2);font-size:11px;margin-bottom:3px}
  .dashboard-table td:last-child{grid-column:1/-1}
  .dashboard-table .mobile-labels{display:grid;margin:0 0 7px}
}
@media(max-width:960px){
  .admin{grid-template-columns:1fr}.side{flex-direction:row;flex-wrap:wrap;overflow:visible;border-right:0;border-bottom:1px solid var(--rule);padding:8px;gap:2px}
  .side .logo,.side .me{display:none}.side a{font-size:12px;padding:8px;gap:5px}
}
@media(max-width:780px){.fbgrid{grid-template-columns:minmax(0,1fr)}.panel{position:static}.akpis{grid-template-columns:repeat(2,minmax(0,1fr))}.feedback-sheet{padding:16px}.amain{padding:14px}.dashboard-table .d5,.dashboard-table .d5h{grid-template-columns:repeat(5,38px)}}
@media(max-width:480px){.dashboard-table tr{grid-template-columns:minmax(0,1fr)}.dashboard-table td:last-child{grid-column:auto}.feedback-sheet .sh b{font-size:17px}.feedback-download{font-size:14px;padding:12px}.pen-tools{gap:4px}.pen-tools button{padding:7px}.akpi b{font-size:24px}.dashboard-filters{gap:12px}}

.d5h span{white-space:nowrap}
/* 화면 안 확인 칸 (브라우저 기본 확인 창 대신) */
.inline-confirm{margin-top:8px; border:1.5px solid var(--green); background:var(--ivory); border-radius:var(--r); padding:12px 14px; display:grid; gap:6px}
.inline-confirm.danger{border-color:var(--pen)}
.inline-confirm b{font-size:15px}
.inline-confirm p{margin:0; font-size:13px; color:var(--ink-2)}
.inline-confirm-acts{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.inline-confirm-acts button{border:0; font:inherit; font-size:14px; font-weight:700; padding:9px 16px; border-radius:8px; background:var(--green); color:var(--white); cursor:pointer}
.inline-confirm.danger .inline-confirm-acts button:not(.ghost){background:var(--pen)}
.inline-confirm-acts button.ghost{background:var(--mint); color:var(--green)}
.operation-warning{padding:14px 18px;margin:0 0 20px;border:1px solid #d49c35;border-radius:12px;background:#fff6df;color:#713e0b}.operation-warning p{margin:4px 0}.erase-student{margin:20px 0}.erase-student .inline-confirm{display:grid;max-width:640px}.erase-student .danger{color:#a32929}