:root { --tool-ink:#352920; --tool-muted:#6f635a; --tool-accent:#7854a3; --tool-accent-soft:#f1e9fa; }
body.tool-page { position:relative; isolation:isolate; min-height:100vh; background:#f4eee4; color:var(--tool-ink); }
body.tool-page::before { content:""; position:fixed; inset:-26px; z-index:-2; background:#fff9ef url("./assets/illustrations/classroom-house-background.png") center center / cover no-repeat; filter:blur(16px) saturate(.82) brightness(1.04); transform:scale(1.05); }
body.tool-page::after { content:""; position:fixed; inset:0; z-index:-1; background:rgba(255,250,242,.72); }
.tool-page-shell { width:min(1120px,calc(100% - 32px)); min-height:100vh; margin:0 auto; padding:30px 0 46px; }
.tool-page-nav { display:flex; align-items:center; gap:7px; width:max-content; }.back-home { display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border:1px solid rgba(128,96,66,.2); border-radius:999px; background:rgba(255,253,248,.85); color:#594638; box-shadow:0 4px 12px rgba(88,61,38,.08); font-size:13px; text-decoration:none; }
.back-home:hover { background:#fff; transform:translateX(-2px); }
.tool-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin:22px 0 16px; padding:23px 27px; border:1px solid rgba(137,105,74,.18); border-radius:22px; background:rgba(255,253,249,.75); box-shadow:0 9px 25px rgba(93,66,42,.08); backdrop-filter:blur(5px); }
.tool-page-title { display:flex; align-items:center; gap:16px; }.tool-page-title .page-icon { display:grid; place-items:center; width:60px; height:60px; border-radius:18px; background:var(--tool-accent-soft); font-size:33px; }.tool-page-title p { margin:0 0 3px; color:var(--tool-accent); font-family:"Jua Local",sans-serif; font-size:11px; letter-spacing:1.2px; }.tool-page-title h1 { margin:0; font-size:32px; letter-spacing:-1px; }.tool-page-head > p { max-width:330px; margin:0; color:var(--tool-muted); font-size:14px; line-height:1.6; text-align:right; }
.tool-workspace { min-height:530px; padding:27px; border:1px solid rgba(142,108,76,.2); border-radius:24px; background:rgba(255,253,249,.81); box-shadow:0 15px 35px rgba(88,61,38,.12); backdrop-filter:blur(7px); }
.workspace-intro { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:21px; }.workspace-intro h2 { margin:0; font-size:23px; }.workspace-intro span { padding:6px 10px; border-radius:999px; background:var(--tool-accent-soft); color:var(--tool-accent); font-size:12px; }
.work-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }.work-card { padding:20px; border:1px solid #eadfd2; border-radius:17px; background:rgba(255,255,255,.78); }.work-card h3 { margin:0 0 12px; font-size:18px; }.work-card p { color:var(--tool-muted); font-size:13px; line-height:1.65; }.work-card ul { padding-left:19px; color:#54483f; font-size:14px; line-height:2; }
label { display:block; margin:14px 0 6px; color:#5f5146; font-size:13px; } input, textarea, select { width:100%; padding:12px 13px; border:1px solid #e3d7c9; border-radius:11px; outline:none; background:#fffefa; color:#3d312a; font:inherit; } textarea { min-height:130px; resize:vertical; line-height:1.6; } input:focus,textarea:focus,select:focus { border-color:var(--tool-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--tool-accent) 12%,transparent); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.manual-city-wrap { margin-top:4px; }
.primary-action,.secondary-action { padding:11px 16px; border-radius:10px; font-size:14px; }.primary-action { border:0; background:var(--tool-accent); color:white; box-shadow:0 3px 0 color-mix(in srgb,var(--tool-accent) 72%,#222); }.secondary-action { border:1px solid #dfd2c3; background:#fff8ef; color:#5d4d40; }.action-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }.save-note { min-height:18px; margin:12px 0 0; color:#568060; font-size:13px; }
.notice-preview { min-height:255px; padding:22px; border-radius:15px; background:linear-gradient(145deg,#fff8e8,#f7f1e8); color:#4c3b2e; font-family:"Jua Local",sans-serif; font-size:17px; line-height:1.8; white-space:pre-line; }
.seat-results { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; min-height:150px; }.seat-results span { display:grid; place-items:center; min-height:52px; padding:8px; border-radius:11px; background:color-mix(in srgb,var(--tool-accent) 10%,white); color:var(--tool-accent); font-size:14px; }
.timer-readout { margin:12px 0; color:var(--tool-accent); font-family:"Jua Local",sans-serif; font-size:86px; line-height:1; text-align:center; }.timer-presets { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; }.timer-presets button { padding:8px 12px; border:1px solid #dfd2c3; border-radius:9px; background:#fff8ef; }.timer-stage { display:flex; flex-direction:column; justify-content:center; min-height:330px; border-radius:17px; background:linear-gradient(145deg,#fffefa,#f4f9ef); }
.rule-list { display:grid; gap:9px; }.rule-item { display:flex; align-items:center; gap:10px; padding:12px 13px; border-radius:11px; background:#fff9ef; font-size:15px; }.rule-item i { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--tool-accent); color:white; font-style:normal; font-size:12px; }
.project-board { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.project-metric { padding:17px 12px; border-radius:14px; background:var(--tool-accent-soft); text-align:center; }.project-metric small { display:block; color:#6c5d80; font-size:12px; }.project-metric b { display:block; margin-top:5px; color:var(--tool-accent); font-size:26px; }
.grape-page-board { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; max-width:510px; margin:10px auto 22px; padding:24px; border:2px dashed #d6c5e5; border-radius:23px; background:rgba(252,248,255,.82); }.grape-page-board button { aspect-ratio:1; border:0; border-radius:50%; background:#eae3dc; }.grape-page-board button.filled { background:radial-gradient(circle at 32% 26%,#d8b8ed 0 12%,transparent 13%),linear-gradient(145deg,#a372c8,#6e408c); box-shadow:inset -3px -4px 0 rgba(58,29,78,.22),0 3px 4px rgba(82,47,103,.18); }.grape-count { margin:2px 0 17px; color:var(--tool-accent); font-size:28px; text-align:center; }.grape-count b { font-size:42px; }
.settings-list { display:grid; gap:12px; }.settings-list .setting-line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px; border-bottom:1px dashed #e6d9ca; }.setting-line span { color:#6e6053; font-size:13px; }.toggle { position:relative; width:47px; height:27px; border:0; border-radius:99px; background:#d9d2c9; }.toggle::after { content:""; position:absolute; top:4px; left:4px; width:19px; height:19px; border-radius:50%; background:#fff; transition:.2s; }.toggle.on { background:var(--tool-accent); }.toggle.on::after { transform:translateX(20px); }
body[data-tool-page="timer"] { --tool-accent:#2f704c; --tool-accent-soft:#e8f4e9; } body[data-tool-page="seating"] { --tool-accent:#ad5938; --tool-accent-soft:#fff0e9; } body[data-tool-page="rules"] { --tool-accent:#3c63a8; --tool-accent-soft:#edf3ff; } body[data-tool-page="grapes"] { --tool-accent:#7650a2; --tool-accent-soft:#f2ebfa; } body[data-tool-page="project"] { --tool-accent:#7654a8; --tool-accent-soft:#f2ebfa; }
@media(max-width:700px) { .tool-page-shell { width:calc(100% - 20px); padding-top:16px; }.tool-page-head { display:block; padding:18px; }.tool-page-head>p { margin:13px 0 0; text-align:left; }.tool-page-title h1 { font-size:27px; }.tool-workspace { padding:15px; }.work-grid { grid-template-columns:1fr; }.form-row { grid-template-columns:1fr; gap:0; }.timer-readout { font-size:68px; }.seat-results { grid-template-columns:1fr 1fr; }.project-board { grid-template-columns:1fr; }.grape-page-board { gap:8px; padding:15px; } }

/* 알림장과 칠판은 큰 글쓰기 면을 중심으로, 서로 다른 보관 방식을 제공합니다. */
.full-editor { min-height:620px; }.editor-topbar { display:flex; align-items:center; justify-content:space-between; gap:13px; margin-bottom:14px; padding:10px; border:1px solid #eadfce; border-radius:14px; background:rgba(255,251,243,.9); }.date-navigator,.editor-tools { display:flex; align-items:center; gap:7px; }.date-navigator input { width:auto; padding:8px 9px; font-size:13px; }.editor-tools select { width:190px; padding:8px 9px; font-size:12px; }.round-control { display:grid; place-items:center; width:34px; height:34px; border:1px solid #e2d4c4; border-radius:50%; background:#fffefa; font-size:21px; }.notice-paper { min-height:530px; padding:24px 36px 32px; border:1px solid #e7c991; border-radius:17px; background:repeating-linear-gradient(0deg,#fffef9 0 43px,#e8ddca 44px 45px); box-shadow:inset 0 0 28px rgba(212,174,107,.12),0 7px 16px rgba(104,76,45,.06); }.notice-paper-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:2px solid #e2b872; color:#a2592b; font-size:19px; }.notice-paper-head b { color:#6d5b4c; font-size:14px; }.notice-paper textarea { min-height:430px; padding:17px 0; border:0; border-radius:0; background:transparent; color:#3d312a; font-size:clamp(22px,2.2vw,34px); line-height:1.55; }.notice-paper textarea:focus { box-shadow:none; }
.board-editor-layout { display:grid; grid-template-columns:minmax(0,1fr) 265px; gap:18px; }.board-editor { min-width:0; }.board-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }.board-toolbar input { max-width:360px; font-size:16px; }.board-toolbar>div { display:flex; gap:7px; flex-shrink:0; }.chalkboard { position:relative; min-height:535px; padding:27px; overflow:hidden; border:13px solid #8d5938; border-radius:13px; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.04),transparent 18%),repeating-linear-gradient(0deg,#214b3d 0 46px,#1b4034 47px 48px); box-shadow:inset 0 0 35px rgba(0,0,0,.28),0 7px 15px rgba(86,53,32,.15); }.chalkboard textarea { position:relative; z-index:1; min-height:454px; padding:9px 8px; border:0; background:transparent; color:#fffdf0; font-size:clamp(24px,2.4vw,39px); line-height:1.55; text-shadow:0 1px rgba(0,0,0,.25); }.chalkboard textarea:focus { box-shadow:none; }.chalk-doodle { position:absolute; right:26px; bottom:18px; color:#ffe486; font-size:37px; transform:rotate(12deg); }.board-archive { padding:18px; border:1px solid #e4d9cb; border-radius:16px; background:#fffaf2; }.archive-head { display:flex; align-items:center; justify-content:space-between; gap:7px; }.archive-head h3 { margin:0; font-size:18px; }.archive-head span { color:var(--tool-accent); font-size:12px; }.board-archive>p { margin:8px 0 13px; color:#77695b; font-size:11px; line-height:1.5; }.archive-list { display:grid; gap:8px; }.archive-item { display:flex; border:1px solid #e7dbc9; border-radius:10px; overflow:hidden; background:#fffefa; }.archive-open { flex:1; min-width:0; padding:10px; border:0; background:transparent; text-align:left; }.archive-open b,.archive-open small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.archive-open b { font-size:13px; }.archive-open small { margin-top:3px; color:#8a7c6c; font-size:10px; }.archive-delete { width:31px; border:0; border-left:1px solid #eee2d4; background:#fff8ef; color:#a06f57; font-size:18px; }.empty-archive { margin:20px 0; color:#8a7b6c; font-size:12px; text-align:center; }
@media(max-width:700px) { .full-editor { min-height:0; }.editor-topbar { align-items:stretch; flex-direction:column; }.date-navigator,.editor-tools { justify-content:space-between; }.editor-tools select { width:calc(100% - 128px); }.notice-paper { min-height:460px; padding:18px; }.notice-paper textarea { min-height:360px; font-size:23px; }.board-editor-layout { grid-template-columns:1fr; }.board-toolbar { align-items:stretch; flex-direction:column; }.board-toolbar input { max-width:none; }.board-toolbar>div { justify-content:flex-end; }.chalkboard { min-height:430px; padding:18px; border-width:9px; }.chalkboard textarea { min-height:365px; font-size:26px; }.board-archive { padding:15px; } }

/* 종이 줄은 알림장 본문의 실제 행간에 맞추고, 칠판은 빈 판처럼 깔끔하게 유지합니다. */
.notice-paper { background:#fffef9; }
.notice-paper textarea { --notice-line-height:clamp(39px, 3.5vw, 53px); padding:0; background:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--notice-line-height) - 1px), rgba(190,159,109,.48) calc(var(--notice-line-height) - 1px), rgba(190,159,109,.48) var(--notice-line-height)); line-height:var(--notice-line-height); }
.chalkboard { background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.045),transparent 21%),linear-gradient(145deg,#255344,#1a4034); }
.chalk-pen-canvas { position:absolute; z-index:2; inset:0; width:100%; height:100%; pointer-events:none; touch-action:none; cursor:crosshair; }.chalkboard.is-pen-mode .chalk-pen-canvas { pointer-events:auto; }.chalkboard.is-pen-mode textarea { pointer-events:none; user-select:none; }.chalk-doodle { z-index:3; }.board-pen-toggle.is-active { border-color:#f7dd7c; background:#fff4b8; color:#5a592d; }.board-pen-clear[hidden] { display:none; }
body[data-tool-page="board"] #boardNote[hidden] { display:none; }

@media(max-width:700px) { .notice-paper textarea { --notice-line-height:39px; } }

/* 학급규칙은 멀리서도 읽히는 한 장의 규칙판으로 보여줍니다. */
.rules-display { width:min(880px,100%); min-height:535px; margin:0 auto; padding:clamp(26px,5vw,58px); border:1px solid #b9cbe9; border-radius:26px; background:linear-gradient(145deg,rgba(252,254,255,.97),rgba(239,246,255,.93)); box-shadow:0 16px 32px rgba(61,92,143,.12); }
.rules-display-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:2px solid #c7d7ee; }
.rules-display-head p { margin:0 0 5px; color:#5273ab; font-family:Arial,sans-serif !important; font-size:11px; font-weight:700; letter-spacing:2px; }
.rules-display-head h2 { margin:0; color:#2d5798; font-size:clamp(30px,4vw,48px); letter-spacing:-1.5px; }
.rules-edit-button { display:grid; place-items:center; flex:0 0 auto; width:48px; height:48px; border:1px solid #a8c0e4; border-radius:50%; background:#fff; color:#3c63a8; font-family:Arial,sans-serif !important; font-size:28px; line-height:1; box-shadow:0 4px 10px rgba(63,94,150,.12); transition:transform .18s,background .18s,color .18s; }
.rules-edit-button:hover { transform:translateY(-2px); background:#eaf2ff; }
.rules-display.is-editing .rules-edit-button { border-color:#3c8a66; background:#3c8a66; color:#fff; }
.rules-large-list { display:grid; gap:0; margin:22px 0 0; padding:0; list-style:none; counter-reset:class-rule; }
.rules-large-list li { position:relative; min-height:70px; padding:19px 14px 17px 68px; border-bottom:1px solid #d9e3f1; color:#2f3e54; font-size:clamp(23px,3vw,34px); line-height:1.42; counter-increment:class-rule; }
.rules-large-list li::before { content:counter(class-rule); position:absolute; top:50%; left:8px; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#3f66a8; color:#fff; font-family:Arial,sans-serif !important; font-size:16px; font-weight:700; line-height:1; transform:translateY(-50%); }
.rules-display.is-editing .rules-large-list li { border-radius:10px; background:rgba(255,255,255,.78); box-shadow:inset 0 0 0 1px #b9cbea; cursor:text; }
.rules-large-list li[contenteditable="true"]:focus { outline:3px solid rgba(75,116,183,.25); outline-offset:-3px; }
.rules-save-note { min-height:20px; margin:16px 0 0; color:#4a7860; font-size:14px; text-align:right; }

/* 시·군·구 전체 목록은 고정 높이의 목록에서 스크롤로 고를 수 있습니다. */
.region-picker { display:grid; grid-template-columns:minmax(155px,.62fr) minmax(0,1fr); gap:12px; align-items:start; }
.city-picker select { height:228px; padding:7px; overflow-y:auto; }
.city-picker select option { padding:6px 8px; }
.city-picker small { display:block; margin-top:7px; color:#87796d; font-size:11px; line-height:1.45; }
.settings-weather { display:flex; align-items:center; min-height:51px; margin-top:15px; padding:12px 14px; border:1px solid #d2e2f0; border-radius:12px; background:#f4fbff; color:#396777; font-size:15px; line-height:1.45; }
.settings-weather span { font-size:23px; }
.settings-weather.is-error { border-color:#e4c6b5; background:#fff7f0; color:#9a654a; }

@media(max-width:700px) { .rules-display { min-height:440px; padding:25px 18px; border-radius:20px; }.rules-edit-button { width:43px; height:43px; }.rules-large-list li { min-height:59px; padding:15px 7px 14px 55px; font-size:22px; }.rules-large-list li::before { left:2px; width:35px; height:35px; font-size:14px; }.region-picker { grid-template-columns:1fr; gap:0; }.city-picker select { height:208px; }.settings-weather { font-size:14px; } }

/* 포도알은 개별 스티커를 눌러 붙이거나 떼어낼 수 있습니다. */
.grape-page-board button { cursor:pointer; transition:transform .16s,filter .16s; }
.grape-page-board button:hover { transform:translateY(-2px) scale(1.04); filter:brightness(1.04); }
.grape-page-board button:active { transform:scale(.92); }
.grape-help { margin:2px 0 0; color:#806995; font-size:12px; text-align:center; }

/* 메인에서 사용할 칭찬판 형식을 설정합니다. */
.reward-mode-picker { margin-top:14px; }
.reward-mode-picker small { display:block; margin-top:7px; color:#857569; font-size:11px; line-height:1.45; }

/* 학급 온도계는 색과 온도계 속 애니메이션으로 현재 분위기를 직관적으로 보여줍니다. */
body[data-tool-page="thermometer"] { --tool-accent:#d65b40; --tool-accent-soft:#fff0e9; }
.thermometer-board { --temperature:50; --temperature-height:50%; --temperature-color:#efae4a; --temperature-dark:#d98532; display:grid; grid-template-columns:minmax(180px,1fr) 190px minmax(220px,1fr); grid-template-areas:"copy visual controls" "help visual controls"; align-items:center; gap:22px; min-height:480px; padding:clamp(25px,5vw,54px); overflow:hidden; border:1px solid #f0c7b8; border-radius:25px; background:radial-gradient(circle at 18% 15%,rgba(255,255,255,.98),transparent 28%),linear-gradient(145deg,#fff9f2,#fff0e8); box-shadow:0 16px 32px rgba(153,76,46,.12); }
.thermometer-board[data-mood="cool"] { --temperature-color:#64b9da; --temperature-dark:#3d8eb2; }.thermometer-board[data-mood="mild"] { --temperature-color:#8ccf77; --temperature-dark:#5a9b55; }.thermometer-board[data-mood="warm"] { --temperature-color:#f1ae46; --temperature-dark:#d77a31; }.thermometer-board[data-mood="hot"] { --temperature-color:#ee6545; --temperature-dark:#c83e36; }
.temperature-copy { grid-area:copy; text-align:center; }.temperature-copy>span { color:#bd674e; font-family:Arial,sans-serif !important; font-size:11px; font-weight:700; letter-spacing:1.8px; }.temperature-copy h2 { margin:9px 0 5px; color:var(--temperature-dark); font-family:Arial,sans-serif !important; font-size:clamp(70px,9vw,112px); font-weight:800; line-height:.9; letter-spacing:-6px; transition:color .45s; }.temperature-copy h2 b { font:inherit; }.temperature-copy p { margin:14px 0 0; color:#6b574a; font-size:18px; line-height:1.55; }
.thermometer-visual { position:relative; grid-area:visual; align-self:center; width:190px; height:328px; }.thermometer-scale { position:absolute; top:10px; bottom:42px; left:0; display:flex; flex-direction:column; justify-content:space-between; color:#a06d5d; font-family:Arial,sans-serif !important; font-size:11px; font-style:normal; }.thermometer-scale i { position:relative; font-style:normal; }.thermometer-scale i::after { content:""; position:absolute; top:50%; left:42px; width:15px; border-top:1px solid #d6b8a8; }
.thermometer-tube { position:absolute; top:5px; right:20px; width:54px; height:262px; border:5px solid #e5d4c9; border-radius:30px; background:rgba(255,255,255,.78); box-shadow:inset 0 0 0 4px rgba(255,255,255,.65),0 8px 16px rgba(111,67,44,.12); }.temperature-fill { position:absolute; right:5px; bottom:5px; left:5px; height:var(--temperature-height); min-height:6px; border-radius:20px; background:linear-gradient(90deg,var(--temperature-dark),var(--temperature-color) 55%,#ffe49e); box-shadow:0 0 16px color-mix(in srgb,var(--temperature-color) 58%,transparent); transition:height .65s cubic-bezier(.22,1,.36,1),background .45s; }.temperature-fill::after { content:""; position:absolute; right:7px; top:9px; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.44); animation:temperatureBubble 2.3s ease-in-out infinite; }.thermometer-bulb { position:absolute; right:-17px; bottom:-43px; width:78px; height:78px; border:6px solid #e5d4c9; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff0c3 0 8%,var(--temperature-color) 14% 59%,var(--temperature-dark) 100%); box-shadow:0 8px 15px rgba(111,67,44,.17),0 0 0 5px rgba(255,255,255,.52) inset; transition:background .45s,transform .45s; }.thermometer-board[data-mood="hot"] .thermometer-bulb { animation:temperaturePulse 1.5s ease-in-out infinite; }
.temperature-controls { display:grid; grid-area:controls; grid-template-columns:50px minmax(110px,1fr) 50px; align-items:center; gap:12px; }.temperature-step { width:50px; height:50px; border:1px solid color-mix(in srgb,var(--temperature-dark) 38%,#fff); border-radius:50%; background:#fff; color:var(--temperature-dark); font-family:Arial,sans-serif !important; font-size:34px; line-height:1; box-shadow:0 5px 11px rgba(139,76,49,.11); transition:transform .16s,background .16s; }.temperature-step:hover { background:color-mix(in srgb,var(--temperature-color) 18%,white); transform:translateY(-2px); }.temperature-step:active { transform:scale(.93); }.temperature-controls input[type="range"] { width:100%; min-width:0; padding:0; border:0; border-radius:999px; background:transparent; box-shadow:none; accent-color:var(--temperature-dark); cursor:pointer; }
.temperature-help { grid-area:help; margin:0; color:#8a6b59; font-size:13px; line-height:1.55; text-align:center; }
@keyframes temperatureBubble { 0%,100% { transform:translateY(0); opacity:.45; } 50% { transform:translateY(-28px) scale(.72); opacity:.9; } } @keyframes temperaturePulse { 0%,100% { transform:scale(1); box-shadow:0 8px 15px rgba(111,67,44,.17),0 0 0 5px rgba(255,255,255,.52) inset; } 50% { transform:scale(1.08); box-shadow:0 8px 20px rgba(214,72,48,.3),0 0 24px rgba(239,101,69,.42); } }

@media(max-width:760px) { .thermometer-board { grid-template-columns:1fr; grid-template-areas:"copy" "visual" "controls" "help"; justify-items:center; min-height:0; padding:30px 20px; }.thermometer-visual { margin:5px 0 13px; }.temperature-copy h2 { font-size:82px; }.temperature-controls { width:min(100%,380px); }.temperature-help { max-width:300px; }.grape-help { font-size:11px; } }

/* 데스크톱 도구 화면은 한 화면 안에서 핵심 기능에 집중합니다. */
.tool-fullscreen-toggle { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; padding:8px 11px; border:1px solid rgba(121,91,65,.22); border-radius:10px; background:rgba(255,254,250,.9); color:#5c493a; font-size:12px; box-shadow:0 3px 9px rgba(80,57,38,.08); }
.tool-fullscreen-toggle:hover { background:#fff; transform:translateY(-1px); }

@media(min-width:600px) {
  html:has(body.tool-page), body.tool-page { height:100dvh; overflow:hidden; }
  .tool-page-shell { width:min(1240px,calc(100% - 28px)); height:100dvh; min-height:0; padding:10px 0; display:grid; grid-template-rows:30px 64px minmax(0,1fr); gap:8px; }
  .tool-page-nav { align-self:center; }.back-home { align-self:center; width:max-content; padding:6px 10px; font-size:11px; }
  .tool-page-head { display:flex; min-height:0; height:64px; margin:0; padding:8px 14px; border-radius:16px; align-items:center; }
  .tool-page-title { flex:1 1 auto; min-width:0; gap:10px; }.tool-page-title .page-icon { width:42px; height:42px; border-radius:13px; font-size:24px; }.tool-page-title p { display:none; }.tool-page-title h1 { overflow:hidden; font-size:25px; text-overflow:ellipsis; white-space:nowrap; }.tool-page-head>p { display:none; }
  .tool-fullscreen-toggle { flex:0 0 auto; margin-left:8px; }
  .tool-workspace { min-height:0; padding:clamp(13px,1.8vw,24px); border-radius:19px; overflow:hidden; display:flex; flex-direction:column; }
  .workspace-intro { display:none; }.tool-workspace>:not(.workspace-intro) { flex:1 1 auto; min-height:0; }
  .work-grid { height:100%; min-height:0; grid-template-columns:1.1fr .9fr; gap:14px; }.work-card { min-height:0; overflow:hidden; padding:clamp(14px,1.7vw,20px); }.work-card h3 { margin-bottom:7px; font-size:17px; }.work-card p { margin:5px 0; font-size:12px; line-height:1.45; }
  .form-row { grid-template-columns:1fr 1fr; gap:10px; } label { margin:8px 0 4px; font-size:12px; } input,textarea,select { padding:9px 11px; }.action-row { margin-top:10px; }.primary-action,.secondary-action { padding:9px 13px; font-size:13px; }

  .full-editor { height:100%; min-height:0; display:flex; flex-direction:column; }.editor-topbar { flex:0 0 auto; min-height:40px; margin-bottom:8px; padding:6px 8px; flex-direction:row; align-items:center; }.round-control { width:30px; height:30px; }.date-navigator input,.editor-tools select { padding:6px 8px; font-size:11px; }.notice-paper { flex:1 1 auto; min-height:0; padding:16px 28px; display:flex; flex-direction:column; }.notice-paper-head { flex:0 0 auto; padding-bottom:7px; font-size:16px; }.notice-paper textarea { flex:1 1 auto; min-height:0; height:0; font-size:clamp(20px,2.4vw,32px); }.full-editor .save-note { flex:0 0 auto; min-height:14px; margin:5px 0 0; font-size:11px; }

  .board-editor-layout { height:100%; min-height:0; grid-template-columns:minmax(0,1fr) 220px; gap:14px; }.board-editor { height:100%; min-height:0; display:flex; flex-direction:column; }.board-toolbar { flex:0 0 auto; margin-bottom:8px; }.board-toolbar input { max-width:330px; padding:8px 10px; }.chalkboard { flex:1 1 auto; min-height:0; padding:18px; border-width:10px; }.chalkboard textarea { min-height:0; height:100%; padding:4px; font-size:clamp(22px,3vw,37px); }.board-archive { min-height:0; padding:13px; display:flex; flex-direction:column; }.board-archive>p { margin:5px 0 8px; }.archive-list { min-height:0; overflow:auto; }.archive-open { padding:8px; }

  body[data-tool-page="seating"] .work-card { display:flex; flex-direction:column; } body[data-tool-page="seating"] #seatNames { flex:1 1 auto; min-height:0; resize:none; } body[data-tool-page="seating"] .seat-results { flex:1 1 auto; grid-auto-rows:minmax(38px,1fr); min-height:0; overflow:auto; }
  .timer-main-stage { height:100%; min-height:0; padding:18px; }.timer-readout { font-size:clamp(76px,15vh,150px); }.timer-presets button { padding:8px 14px; }
  .rules-display { height:100%; min-height:0; padding:clamp(22px,3vw,42px); }.rules-display-head { padding-bottom:12px; }.rules-large-list { margin-top:12px; }.rules-large-list li { min-height:0; padding-top:clamp(9px,1.6vh,17px); padding-bottom:clamp(8px,1.4vh,15px); font-size:clamp(21px,2.7vw,31px); }.rules-save-note { margin-top:7px; }
  body[data-tool-page="project"] .work-card { height:100%; } body[data-tool-page="project"] .project-board { height:calc(100% - 35px); align-items:stretch; } body[data-tool-page="project"] .project-metric { display:flex; flex-direction:column; justify-content:center; }
  body[data-tool-page="grapes"] .work-card { height:100%; padding:16px; display:flex; flex-direction:column; align-items:center; } body[data-tool-page="grapes"] .work-card h3 { flex:0 0 auto; } .grape-count { flex:0 0 auto; margin:0 0 7px; }.grape-count b { font-size:36px; }.grape-page-board { flex:1 1 auto; min-height:0; width:min(400px,100%); max-width:none; margin:0 auto 8px; padding:clamp(12px,2vw,20px); gap:clamp(7px,1.4vw,12px); aspect-ratio:6/5; }.grape-page-board button { min-height:0; }.grape-page-board+.action-row { flex:0 0 auto; margin-top:0; }.grape-help { flex:0 0 auto; margin-top:5px; }
  body[data-tool-page="settings"] .work-grid { height:100%; } body[data-tool-page="settings"] .work-card { height:100%; } .city-picker select { height:min(25vh,175px); }.settings-weather { min-height:42px; margin-top:8px; padding:8px 10px; font-size:13px; }.reward-mode-picker { margin-top:8px; }
  .thermometer-board { height:100%; min-height:0; padding:clamp(19px,3vw,40px); }.thermometer-visual { height:min(52vh,400px); transform:scale(1); transform-origin:center; }.thermometer-tube { height:320px; }.thermometer-scale { bottom:70px; }.temperature-copy h2 { font-size:clamp(64px,8vw,100px); }.temperature-copy p { margin-top:8px; font-size:16px; }.temperature-help { font-size:12px; }
}

@media(min-width:600px) and (max-width:900px) {
  .tool-fullscreen-toggle { width:36px; padding:8px; font-size:15px; }.tool-fullscreen-toggle span { display:none; }
  .thermometer-board { grid-template-columns:minmax(0,1fr) 180px; grid-template-areas:"copy visual" "controls controls" "help help"; justify-items:stretch; gap:10px 14px; padding:18px; }.temperature-controls { width:min(100%,390px); justify-self:center; }.temperature-copy { align-self:center; }.thermometer-visual { justify-self:center; }
}

/* 학생 화면에서도 바로 쓸 수 있는 복사 버튼입니다. */
.notice-paper { position:relative; }.copy-content-button { position:absolute; z-index:3; right:16px; bottom:15px; display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(134,101,68,.25); border-radius:10px; background:rgba(255,254,250,.88); color:#725846; font-family:Arial,sans-serif !important; font-size:23px; line-height:1; box-shadow:0 4px 9px rgba(92,62,37,.12); }.copy-content-button:hover { background:#fff; transform:translateY(-1px); }.chalk-copy-button { border-color:rgba(255,251,224,.38); background:rgba(255,253,239,.92); color:#305544; }.chalk-doodle { top:16px; right:18px; bottom:auto; }

/* 알림장·칠판의 전용 전체화면은 교사용 메뉴를 숨기고 내용만 크게 보여줍니다. */
body.tool-page.presentation-mode { overflow:hidden; } body.tool-page.presentation-mode .tool-page-shell { width:100vw; height:100dvh; min-height:0; padding:0; display:block; } body.tool-page.presentation-mode .back-home,body.tool-page.presentation-mode .tool-page-head,body.tool-page.presentation-mode .workspace-intro { display:none; } body.tool-page.presentation-mode .tool-workspace { width:100%; height:100%; min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:hidden; }
body[data-tool-page="notice"].presentation-mode .full-editor { width:100%; height:100%; min-height:0; display:block; } body[data-tool-page="notice"].presentation-mode .editor-topbar,body[data-tool-page="notice"].presentation-mode .save-note { display:none; } body[data-tool-page="notice"].presentation-mode .notice-paper { height:100%; min-height:0; padding:clamp(34px,7vw,90px); border:0; border-radius:0; box-shadow:none; } body[data-tool-page="notice"].presentation-mode .notice-paper-head { padding-bottom:16px; font-size:clamp(22px,3vw,38px); } body[data-tool-page="notice"].presentation-mode .notice-paper-head b { font-size:clamp(15px,2vw,24px); } body[data-tool-page="notice"].presentation-mode .notice-paper textarea { min-height:0; height:calc(100% - 72px); padding:18px 0; font-size:clamp(29px,4.1vw,62px); line-height:var(--notice-line-height); } body[data-tool-page="notice"].presentation-mode .copy-content-button { right:clamp(22px,3vw,48px); bottom:clamp(22px,3vw,48px); width:48px; height:48px; font-size:28px; }
body[data-tool-page="board"].presentation-mode .board-editor-layout { width:100%; height:100%; min-height:0; display:block; } body[data-tool-page="board"].presentation-mode .board-archive,body[data-tool-page="board"].presentation-mode .board-note,body[data-tool-page="board"].presentation-mode #boardNote { display:none; } body[data-tool-page="board"].presentation-mode .board-editor { width:100%; height:100%; } body[data-tool-page="board"].presentation-mode .board-toolbar { position:fixed; z-index:10019; top:clamp(14px,2.4vw,34px); left:clamp(14px,2.4vw,34px); width:auto; margin:0; padding:0; border:0; background:transparent; box-shadow:none; pointer-events:none; } body[data-tool-page="board"].presentation-mode .board-toolbar input,body[data-tool-page="board"].presentation-mode .board-toolbar .archive-toggle,body[data-tool-page="board"].presentation-mode .board-toolbar #newBoard,body[data-tool-page="board"].presentation-mode .board-toolbar #copyBoard,body[data-tool-page="board"].presentation-mode .board-toolbar #saveBoard,body[data-tool-page="board"].presentation-mode .board-toolbar .tool-fullscreen-toggle { display:none !important; } body[data-tool-page="board"].presentation-mode .board-toolbar>div { display:flex; gap:8px; pointer-events:auto; } body[data-tool-page="board"].presentation-mode .board-pen-toggle,body[data-tool-page="board"].presentation-mode .board-pen-clear { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:9px 13px; border:1px solid rgba(255,255,255,.48); border-radius:11px; background:rgba(255,253,239,.9); color:#315744; box-shadow:0 5px 18px rgba(25,48,33,.17); backdrop-filter:blur(8px); } body[data-tool-page="board"].presentation-mode .board-pen-toggle.is-active { border-color:#fff0a4; background:rgba(255,244,184,.94); color:#5a592d; } body[data-tool-page="board"].presentation-mode .board-pen-clear[hidden] { display:none !important; } body[data-tool-page="board"].presentation-mode .chalkboard { width:100%; height:100%; min-height:0; padding:clamp(36px,7vw,100px); border:0; border-radius:0; box-shadow:none; } body[data-tool-page="board"].presentation-mode .chalkboard textarea { min-height:0; height:100%; padding:0; font-size:clamp(31px,4.3vw,66px); } body[data-tool-page="board"].presentation-mode .chalk-copy-button { right:clamp(22px,3vw,48px); bottom:clamp(22px,3vw,48px); width:48px; height:48px; font-size:28px; }.presentation-mode .chalk-doodle { top:clamp(22px,3vw,48px); right:clamp(22px,3vw,48px); }
.presentation-exit-control { display:none; position:fixed; z-index:10020; top:clamp(14px,2.4vw,34px); right:clamp(14px,2.4vw,34px); min-height:38px; padding:9px 13px; border:1px solid rgba(255,255,255,.48); border-radius:11px; background:rgba(40,64,47,.84); box-shadow:0 5px 18px rgba(25,48,33,.2); color:#fffef8; font-family:"Jua Local",sans-serif !important; font-size:13px; line-height:1; backdrop-filter:blur(8px); }
body.tool-page.presentation-mode .presentation-exit-control { display:inline-flex; align-items:center; justify-content:center; gap:5px; }
body.tool-page.presentation-mode .presentation-exit-control:hover { background:rgba(40,64,47,.97); }

/* 타이머는 빠른 추가와 진행 상태를 중심으로, 차례 타이머는 옆에서 자세히 설정합니다. */
.timer-dashboard { display:grid; grid-template-columns:1.08fr .92fr; gap:18px; min-height:430px; }.timer-main-stage { min-height:430px; padding:22px; }.timer-setting-row { width:100%; margin-bottom:3px; text-align:center; }.timer-setting-row label { margin:0; color:#63765f; font-size:14px; }.timer-setting-row label>span { display:inline-flex; align-items:center; gap:4px; margin-left:6px; }.timer-setting-row input { width:56px; padding:6px 4px; border-radius:8px; text-align:center; }.timer-readout { margin:5px 0 0; }.timer-progress-wrap { display:grid; justify-items:center; gap:5px; margin:4px 0 8px; }.timer-progress { --timer-progress:0%; position:relative; display:grid; place-items:center; width:92px; aspect-ratio:1; border-radius:50%; background:conic-gradient(#5d9b68 var(--timer-progress),#e6eee5 0); box-shadow:0 5px 12px rgba(57,101,68,.12); }.timer-progress::after { content:""; position:absolute; inset:9px; border-radius:50%; background:#fffefa; }.timer-progress span { position:relative; z-index:1; color:#4f7656; font-size:13px; }.timer-progress-wrap p { margin:0; color:#78806f; font-size:12px; }.timer-presets { margin:4px 0; }.timer-presets button { padding:8px 13px; color:#376a48; }.timer-actions { align-items:center; justify-content:center; }.timer-status-toggle { padding:8px 10px; border:1px dashed #9ab39b; border-radius:9px; background:#f4faf1; color:#53775a; font-size:12px; }
.sequence-timer-card { min-width:0; padding:20px; background:linear-gradient(145deg,rgba(255,253,249,.93),rgba(244,250,241,.8)); }.sequence-title { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.sequence-title span { color:#5b8e65; font-family:Arial,sans-serif !important; font-size:10px; font-weight:700; letter-spacing:1px; }.sequence-title h3 { margin:2px 0 0; color:#355d42; }.sequence-title p { max-width:125px; margin:0; text-align:right; }.sequence-steps { display:grid; gap:7px; margin:14px 0 8px; }.sequence-step-row { display:grid; grid-template-columns:1fr 64px 18px 24px; align-items:center; gap:5px; padding:6px 8px; border:1px solid #d8e5d8; border-radius:9px; background:rgba(255,255,255,.72); color:#4d654d; font-size:12px; }.sequence-step-row input { width:100%; padding:6px 4px; border-radius:6px; text-align:center; }.sequence-step-row small { color:#7d8c79; }.remove-sequence-step { width:22px; height:22px; border:0; border-radius:50%; background:#f6e8e3; color:#a05c4a; font-family:Arial,sans-serif !important; font-size:17px; line-height:1; }.add-sequence-step { width:100%; padding:7px; border:1px dashed #91b296; border-radius:8px; background:#f8fcf6; color:#497452; font-size:12px; }.sequence-repeat { display:flex; align-items:center; gap:5px; margin-top:10px; color:#516b55; font-size:13px; }.sequence-repeat label { margin:0; }.sequence-repeat input { width:55px; padding:6px; border-radius:7px; text-align:center; }.sequence-readout { min-height:39px; margin-top:9px; padding:9px; border-radius:9px; background:#e9f4e9; color:#426a4b; font-size:13px; line-height:1.45; text-align:center; }

@media(min-width:600px) { .timer-dashboard { height:100%; min-height:0; }.timer-dashboard>.work-card { min-height:0; height:100%; overflow:hidden; }.timer-main-stage { min-height:0; padding:14px; }.timer-main-stage .timer-readout { font-size:clamp(58px,11vh,112px); }.timer-progress { width:76px; }.timer-progress::after { inset:8px; }.sequence-timer-card { padding:14px; }.sequence-steps { margin:9px 0 6px; }.sequence-step-row { padding:4px 6px; }.sequence-repeat { margin-top:7px; }.sequence-readout { min-height:34px; margin-top:7px; padding:7px; }.sequence-timer-card .action-row { margin-top:7px; }.timer-dashboard .primary-action,.timer-dashboard .secondary-action { padding:8px 10px; } }
@media(max-width:599px) { .timer-dashboard { grid-template-columns:1fr; }.timer-main-stage { min-height:0; }.sequence-timer-card { min-height:0; } }

/* 작업 화면은 제목 바보다 실제 도구가 더 크게 보이도록 정리합니다. */
.tool-page-head { display:none !important; }
.copy-content-button,.tool-fullscreen-toggle { position:static; z-index:auto; width:auto; height:auto; min-height:34px; padding:8px 11px; border:1px solid rgba(121,91,65,.22); border-radius:9px; background:#fffdfa; color:#5c493a; font-family:"Jua Local",sans-serif !important; font-size:12px; line-height:1; box-shadow:none; }
.copy-content-button:hover,.tool-fullscreen-toggle:hover { background:#fff; transform:translateY(-1px); }
/* 온도계·설정은 홈 버튼 바로 옆, 명단 확인은 보기 방식 옆에서 다른 메뉴와 같은 버튼을 사용합니다. */
body[data-tool-page="thermometer"] .tool-fullscreen-toggle,body[data-tool-page="settings"] .tool-fullscreen-toggle,body[data-tool-page="checklist"] .tool-fullscreen-toggle { width:auto; height:auto; min-height:34px; padding:8px 11px; border-radius:9px; font-family:"Jua Local",sans-serif !important; font-size:12px; }
body[data-tool-page="thermometer"] .tool-fullscreen-toggle span,body[data-tool-page="settings"] .tool-fullscreen-toggle span,body[data-tool-page="checklist"] .tool-fullscreen-toggle span { display:inline; }
.board-toolbar .copy-content-button { color:#355b45; }
.editor-tools,.board-toolbar>div,.timer-actions { flex-wrap:wrap; }
.notice-paper textarea { --notice-line-height:1.55em; line-height:var(--notice-line-height); }
.notice-paper { background:#fffef9; }

@media(min-width:600px) {
  .tool-page-shell { grid-template-rows:30px minmax(0,1fr); gap:6px; padding:8px 0; }
  body[data-tool-page="thermometer"] .tool-page-shell,body[data-tool-page="settings"] .tool-page-shell { grid-template-rows:34px minmax(0,1fr); }
  .tool-workspace { padding:clamp(11px,1.55vw,20px); }
  .full-editor .save-note { min-height:12px; }
  .notice-paper { padding:14px 28px 16px; }
  .notice-paper textarea { font-size:clamp(22px,2.5vw,36px); }
  .board-toolbar { gap:8px; }
  .board-toolbar>div { justify-content:flex-end; }
}

/* 차례 타이머는 선택했을 때만 같은 타이머의 설정 영역을 열어줍니다. */
.timer-dashboard { grid-template-columns:1fr; min-height:0; }
.timer-dashboard.is-sequence-mode { grid-template-columns:minmax(0,1.12fr) minmax(310px,.88fr); }
.timer-dashboard.is-running { grid-template-columns:1fr; }.timer-dashboard.is-running .sequence-timer-card { display:none !important; }
#sequenceTimerSettings[hidden] { display:none !important; }
#simpleTimerAdds[hidden] { display:none !important; }
#sequenceFlow[hidden] { display:none !important; }
.timer-main-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(8px,1.2vh,14px); min-height:0; padding:clamp(18px,3vw,34px); }
.timer-toolbar { align-self:stretch; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.timer-mode-toggle { display:inline-flex; align-items:center; gap:9px; margin:0; color:#406047; font-size:13px; cursor:pointer; }
.timer-mode-toggle input { appearance:none; position:relative; width:42px; height:24px; margin:0; padding:0; border:0; border-radius:999px; background:#cbd8c9; cursor:pointer; box-shadow:none; transition:background .2s; }
.timer-mode-toggle input::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(50,75,54,.25); transition:transform .2s; }
.timer-mode-toggle input:checked { background:#5b9567; }.timer-mode-toggle input:checked::after { transform:translateX(18px); }.timer-mode-toggle b { color:#5b9567; font-size:12px; }
.timer-sound-options { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }.timer-sound-option { display:inline-flex; align-items:center; gap:5px; margin:0; padding:5px 8px; border:1px solid #d4e2d2; border-radius:999px; background:#f7fcf5; color:#537058; font-size:11px; cursor:pointer; }.timer-sound-option input { width:14px; height:14px; margin:0; padding:0; accent-color:#5b9567; }.timer-sound-option input:checked+span { color:#2e7041; }.timer-sound-option input:not(:checked)+span { color:#918b83; text-decoration:line-through; }#sequenceBeepToggleOption[hidden],#sequencePauseToggleOption[hidden],#zeroTimer[hidden],#stopStopwatch[hidden],#lapStopwatch[hidden],#stopwatchLaps[hidden] { display:none !important; }
.timer-setting-row { margin:0; }.timer-setting-row label { font-size:15px; }.timer-setting-row input { width:64px; padding:8px 5px; font-size:16px; }
.sequence-current-plan { margin:0; padding:7px 12px; border-radius:999px; background:#edf6eb; color:#47714e; font-size:13px; }
.sequence-flow { display:flex; align-items:center; justify-content:center; gap:clamp(5px,1vw,12px); width:min(100%,680px); margin:0; padding:8px 12px; border-radius:16px; background:rgba(237,246,235,.8); }.sequence-flow-step { display:flex; align-items:center; gap:6px; min-width:0; padding:7px 10px; border:1px solid #d6e5d5; border-radius:11px; background:#fffefa; color:#778778; transition:transform .25s,background .25s,border-color .25s,box-shadow .25s; }.sequence-flow-step b { display:grid; place-items:center; flex:0 0 auto; width:21px; height:21px; border-radius:50%; background:#d5e3d3; color:#577157; font-family:Arial,sans-serif !important; font-size:11px; }.sequence-flow-step span { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.sequence-flow-step.is-current { border-color:#579364; background:#f8fff5; color:#2c6a3d; box-shadow:0 4px 12px rgba(69,131,82,.2); transform:translateY(-2px) scale(1.04); animation:sequenceCurrentPulse 1s ease-in-out infinite; }.sequence-flow-step.is-current b { background:#579364; color:#fff; }.sequence-flow-step.is-complete { border-color:#b5d4b6; background:#e8f5e7; color:#57805b; }.sequence-flow-step.is-complete b { background:#94c497; color:#fff; }.sequence-flow-arrow { color:#75a37a; font-family:Arial,sans-serif !important; font-size:17px; font-style:normal; transition:transform .25s; }.sequence-flow-step.is-current+.sequence-flow-arrow { transform:translateX(3px); }
.timer-readout { margin:0; color:#27543a; font-size:clamp(94px,19vh,210px); font-variant-numeric:tabular-nums; letter-spacing:-.07em; line-height:.9; text-shadow:0 5px 0 rgba(50,103,66,.06); transition:font-size .28s ease,transform .28s ease; }
.timer-progress-wrap { display:flex; align-items:center; justify-content:center; gap:14px; margin:0; }.timer-progress { width:clamp(125px,15vh,174px); flex:0 0 auto; }.timer-progress::after { inset:12px; }.timer-progress span { font-size:15px; }.timer-progress-wrap p { max-width:150px; font-size:14px; text-align:left; }
.timer-presets { display:flex; justify-content:center; gap:8px; margin:0; }.timer-presets button { padding:9px 16px; font-size:14px; }
.timer-actions { justify-content:center; margin:0; }.timer-actions .tool-fullscreen-toggle { margin-left:0; }
.stopwatch-laps { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:7px; width:min(100%,560px); max-height:92px; margin:0; padding:0; overflow:auto; list-style:none; }
.stopwatch-laps li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid #d6e5d5; border-radius:12px; background:rgba(255,255,255,.78); color:#55715a; font-size:12px; }
.stopwatch-laps b { color:#28563b; font-size:16px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.timer-main-stage.is-active { justify-content:center; }.timer-main-stage.is-active .timer-toolbar,.timer-main-stage.is-active .timer-setting-row,.timer-main-stage.is-active .timer-presets,.timer-main-stage.is-active .sequence-current-plan { display:none; }.timer-main-stage.is-active .timer-readout { font-size:clamp(126px,27vh,300px); transform:scale(1.02); }.timer-main-stage.is-active .timer-progress { width:clamp(160px,22vh,240px); }.timer-main-stage.is-active .timer-progress-wrap p { font-size:15px; }
.sequence-timer-card { display:flex; flex-direction:column; min-height:0; }.sequence-steps { overflow:auto; }.sequence-step-row { grid-template-columns:minmax(42px,1fr) 60px 20px 60px 20px 24px; }.sequence-step-row input { min-width:0; }
.sequence-pause-dialog { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:22px; background:rgba(37,61,44,.28); backdrop-filter:blur(3px); }.sequence-pause-dialog[hidden] { display:none !important; }.sequence-pause-card { width:min(420px,100%); padding:28px; border:1px solid #d6e5d5; border-radius:23px; background:linear-gradient(145deg,#fffefa,#eff8ed); box-shadow:0 18px 45px rgba(31,69,42,.25); text-align:center; animation:sequencePausePop .25s ease-out; }.sequence-pause-card>span { color:#5b9567; font-family:Arial,sans-serif !important; font-size:11px; font-weight:700; letter-spacing:1.3px; }.sequence-pause-card h2 { margin:8px 0 7px; color:#315c3d; font-size:27px; }.sequence-pause-card p { margin:0 0 18px; color:#667565; font-size:15px; line-height:1.5; }.sequence-pause-card>div { display:flex; justify-content:center; gap:8px; }.sequence-pause-card button { min-width:116px; }
@keyframes sequencePausePop { from { opacity:0; transform:translateY(12px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes sequenceCurrentPulse { 0%,100% { box-shadow:0 4px 12px rgba(69,131,82,.17); } 50% { box-shadow:0 6px 18px rgba(69,131,82,.38); } }

/* 종료 순간에는 큰 종소리와 함께 교실 화면이 밝게 반짝입니다. */
body[data-tool-page="timer"].timer-finish-flash::before { content:""; position:fixed; z-index:9999; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 45%,rgba(255,255,225,.95) 0 16%,rgba(255,225,124,.56) 36%,rgba(255,255,255,0) 72%); animation:timerFinishFlash 2.05s ease-in-out both; }
body[data-tool-page="timer"].timer-finish-flash .timer-readout { animation:timerFinishNumber .72s ease-in-out 2; }
@keyframes timerFinishFlash { 0%,100% { opacity:0; } 10%,30%,50%,70% { opacity:1; } 20%,40%,60%,82% { opacity:.08; } }
@keyframes timerFinishNumber { 0%,100% { transform:scale(1); filter:brightness(1); } 50% { transform:scale(1.09); filter:brightness(1.4); } }

/* 설정 안에서 메인 문구가 실제 크기와 비슷하게 보이도록 미리보기를 둡니다. */
.hero-settings { margin-top:12px; padding-top:11px; border-top:1px dashed #dfd4c8; }.hero-settings h4 { margin:0 0 5px; color:#5f4939; font-size:16px; }.hero-settings label { margin-top:7px; }.hero-live-preview { margin-top:10px; padding:15px 18px; border:1px solid #edd8bb; border-radius:15px; background:linear-gradient(145deg,#fffdf8,#f9eee1); text-align:center; }.hero-live-preview h2 { margin:0; color:#4e3525; font-size:clamp(22px,2.1vw,31px); line-height:1.15; }.hero-live-preview p { margin:8px 0 0; color:#796554; font-size:14px; }

/* 전체화면에서는 학생들이 볼 숫자와 진행 표시만 화면에 가득 남깁니다. */
body[data-tool-page="timer"].presentation-mode .timer-dashboard { width:100%; height:100%; display:block; } body[data-tool-page="timer"].presentation-mode .timer-main-stage { width:100%; height:100%; padding:clamp(32px,8vw,110px); border:0; border-radius:0; background:linear-gradient(145deg,#f7fff5,#e7f4e6); box-shadow:none; } body[data-tool-page="timer"].presentation-mode .timer-toolbar,body[data-tool-page="timer"].presentation-mode .timer-setting-row,body[data-tool-page="timer"].presentation-mode .timer-presets,body[data-tool-page="timer"].presentation-mode .timer-actions,body[data-tool-page="timer"].presentation-mode .sequence-current-plan,body[data-tool-page="timer"].presentation-mode .sequence-timer-card { display:none !important; } body[data-tool-page="timer"].presentation-mode .timer-readout { font-size:clamp(150px,31vw,520px); } body[data-tool-page="timer"].presentation-mode .timer-progress { width:clamp(220px,26vh,340px); } body[data-tool-page="timer"].presentation-mode .timer-progress-wrap { gap:28px; } body[data-tool-page="timer"].presentation-mode .timer-progress-wrap p { max-width:260px; font-size:clamp(19px,2.5vw,34px); } body[data-tool-page="timer"].presentation-mode .stopwatch-laps { width:min(76vw,720px); max-height:13vh; }

@media(max-width:599px) {
  .copy-content-button,.tool-fullscreen-toggle { padding:8px 9px; font-size:11px; }
  .timer-dashboard.is-sequence-mode { grid-template-columns:1fr; }.timer-main-stage { min-height:0; }.timer-toolbar { justify-content:center; gap:6px; }.timer-sound-option { padding:5px 7px; }.timer-readout { font-size:84px; }.timer-main-stage.is-active .timer-readout { font-size:114px; }.timer-progress { width:118px; }.timer-main-stage.is-active .timer-progress { width:148px; }.timer-progress-wrap p { font-size:12px; }.sequence-flow { gap:4px; padding:7px; }.sequence-flow-step { gap:4px; padding:6px 7px; }.sequence-flow-step span { font-size:11px; }.sequence-flow-arrow { font-size:13px; }.sequence-step-row { grid-template-columns:minmax(38px,1fr) 54px 18px 54px 18px 22px; }
  .hero-live-preview h2 { font-size:23px; }
}

/* 학생 명단 확인: 반 전체의 출석·과제·일기 확인을 같은 명단으로 관리합니다. */
body[data-tool-page="checklist"] { --tool-accent:#3c7a83; --tool-accent-soft:#eaf6f5; }
.checklist-layout { height:100%; min-height:0; }
.checklist-card { display:flex; flex-direction:column; height:100%; min-height:0; padding:clamp(16px,2vw,25px); }
.checklist-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex:0 0 auto; }
.checklist-toolbar>div:first-child { flex:1 1 auto; }
.checklist-toolbar label { margin:0 0 5px; color:#54716e; font-size:13px; }
.checklist-toolbar input { font-size:18px; }
.checklist-actions { display:flex; gap:7px; flex:0 0 auto; }
.checklist-summary { display:flex; align-items:baseline; gap:9px; margin-bottom:10px; color:#63807c; }
.checklist-summary b { color:#317176; font-size:clamp(29px,3.3vw,43px); letter-spacing:-1px; }
.checklist-summary span { font-size:13px; }
.student-check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; flex:1 1 auto; min-height:0; overflow:auto; padding:4px; }
.student-check-item { display:flex; align-items:center; gap:10px; min-height:52px; padding:10px 13px; border:1px solid #d6e8e6; border-radius:13px; background:#fffefa; color:#405a58; cursor:pointer; transition:background .15s,border .15s,transform .15s; }
.student-check-item:hover { transform:translateY(-1px); border-color:#8dbdbd; }
.student-check-item input { position:absolute; opacity:0; pointer-events:none; }
.student-check-item i { display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px; border:1.5px solid #aecfcd; border-radius:8px; background:#f9fdfc; color:#fff; font-family:Arial,sans-serif!important; font-size:16px; font-style:normal; }
.student-check-item:has(input:checked) { border-color:#84b9b6; background:#edf8f6; color:#2c696b; }
.student-check-item:has(input:checked) i { border-color:#3d8b8d; background:#3d8b8d; }
.student-check-item span { font-size:17px; }
.checklist-empty { display:grid; grid-column:1 / -1; place-items:center; width:100%; height:100%; min-height:160px; border:2px dashed #bfdad7; border-radius:17px; color:#668380; font-size:16px; text-align:center; }
.student-list-settings { margin-top:10px; padding-top:10px; border-top:1px dashed #dfd4c8; }
.student-list-settings h4 { margin:0 0 4px; color:#5f4939; font-size:16px; }
.student-list-settings label { margin:5px 0 4px; }
.student-list-settings textarea { min-height:64px; height:64px; padding:8px 10px; font-size:13px; line-height:1.45; resize:vertical; }
.student-list-settings small { display:block; margin-top:4px; color:#887a6d; font-size:10px; line-height:1.35; }

@media(min-width:600px) {
  body[data-tool-page="checklist"] .checklist-card { overflow:hidden; }
  body[data-tool-page="settings"] .class-settings-card { overflow:auto; }
  .student-list-settings { margin-top:8px; padding-top:8px; }
  .student-list-settings textarea { min-height:56px; height:56px; }
}

@media(min-width:600px) and (max-width:760px) {
  body[data-tool-page="settings"] .class-settings-card { padding:12px 15px; }
  body[data-tool-page="settings"] .class-settings-card h3 { margin-bottom:3px; }
  body[data-tool-page="settings"] .class-settings-card label { margin:4px 0 2px; font-size:11px; }
  body[data-tool-page="settings"] .class-settings-card input,body[data-tool-page="settings"] .class-settings-card select { padding:7px 9px; }
  body[data-tool-page="settings"] .form-row { gap:7px; }
  body[data-tool-page="settings"] .reward-mode-picker { margin-top:5px; }
  body[data-tool-page="settings"] .hero-settings { margin-top:7px; padding-top:6px; }
  body[data-tool-page="settings"] .hero-settings h4 { margin-bottom:2px; font-size:14px; }
  body[data-tool-page="settings"] .hero-live-preview { margin-top:5px; padding:8px 10px; }
  body[data-tool-page="settings"] .hero-live-preview h2 { font-size:18px; }
  body[data-tool-page="settings"] .hero-live-preview p { margin-top:4px; font-size:11px; }
  body[data-tool-page="settings"] .student-list-settings { margin-top:6px; padding-top:6px; }
  body[data-tool-page="settings"] .student-list-settings h4 { margin-bottom:1px; font-size:14px; }
  body[data-tool-page="settings"] .student-list-settings textarea { min-height:44px; height:44px; padding:6px 8px; }
  body[data-tool-page="settings"] .student-list-settings small { margin-top:2px; font-size:9px; }
}

@media(max-width:599px) {
  .checklist-toolbar { align-items:stretch; flex-direction:column; }
  .checklist-actions { justify-content:flex-end; }
  .student-check-grid { grid-template-columns:1fr; max-height:420px; }
}

/* 설정은 한 화면에 몰아넣지 않고, 필요한 항목을 골라 들어가는 메뉴로 구성합니다. */
body[data-tool-page="settings"],body[data-tool-page="home-settings"] { --tool-accent:#695b50; --tool-accent-soft:#f3eee8; }
.settings-hub { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; height:100%; min-height:0; align-content:center; }
.setting-menu-card { position:relative; display:flex; flex-direction:column; min-height:230px; padding:clamp(18px,2.5vw,30px); overflow:hidden; border:1px solid #e3d8cc; border-radius:21px; background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,249,242,.86)); color:#4c4037; text-decoration:none; box-shadow:0 8px 18px rgba(86,62,42,.08); transition:transform .18s,box-shadow .18s; }
.setting-menu-card:hover { color:#4c4037; transform:translateY(-4px); box-shadow:0 13px 24px rgba(86,62,42,.14); }
.setting-menu-card>span { display:grid; place-items:center; width:62px; height:62px; margin-bottom:22px; border-radius:18px; background:#f4ede3; font-size:35px; }.setting-menu-card>div { display:grid; gap:8px; }.setting-menu-card b { font-size:clamp(20px,2.1vw,27px); }.setting-menu-card small { color:#776a5e; font-family:"Jua Local",sans-serif; font-size:13px; line-height:1.6; }.setting-menu-card i { position:absolute; right:22px; bottom:18px; display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:#6a5b50; color:#fff; font-family:Arial,sans-serif!important; font-size:17px; font-style:normal; }
.setting-menu-card.home-info>span { background:#fff0d8; }.setting-menu-card.home-info i { background:#c7823e; }.setting-menu-card.weather-info>span { background:#eaf5fb; }.setting-menu-card.weather-info i { background:#4c85a2; }.setting-menu-card.timetable-info>span { background:#edf5e8; }.setting-menu-card.timetable-info i { background:#4b8357; }.setting-menu-card.data-info>span { background:#eef1fb; }.setting-menu-card.data-info i { background:#5f6f9f; }
.settings-detail-card { width:min(760px,100%); height:100%; margin:0 auto; overflow:auto; }.settings-detail-card .settings-page-actions { justify-content:flex-end; }.settings-detail-card .secondary-action { display:inline-flex; align-items:center; text-decoration:none; }

/* 시간표 작성: 수업 시간 흐름과 요일별 과목을 한 화면에서 연결합니다. */
body[data-tool-page="timetable"] { --tool-accent:#4b8357; --tool-accent-soft:#edf5e8; }
.timetable-layout { display:grid; grid-template-rows:auto minmax(0,1fr); gap:14px; height:100%; min-height:0; }.timetable-settings-card,.timetable-subject-card { min-height:0; }.timetable-card-head,.timetable-subject-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }.timetable-card-head h3,.timetable-subject-head h3 { margin-bottom:4px; }.timetable-card-head p,.timetable-subject-head p { margin:0; }.timetable-card-head .secondary-action { flex:0 0 auto; text-decoration:none; }
.timetable-setting-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:12px; }.timetable-setting-grid label { position:relative; margin:0; color:#5d6d5d; font-size:12px; }.timetable-setting-grid input { margin-top:4px; padding:8px 9px; font-size:14px; }.timetable-setting-grid small { position:absolute; right:9px; bottom:10px; color:#809080; font-size:10px; pointer-events:none; }.timetable-setting-grid label:has(small) input { padding-right:24px; }
.timetable-flow-preview { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }.timetable-flow-chip { display:flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid #d4e4d5; border-radius:999px; background:#f8fcf5; color:#487253; }.timetable-flow-chip b { font-size:12px; }.timetable-flow-chip small { color:#7b8b7d; font-family:"Jua Local",sans-serif; font-size:10px; }.timetable-flow-chip.break { border-color:#d7e1e9; background:#f5faff; color:#547995; }.timetable-flow-chip.lunch { border-color:#ead9b9; background:#fff8e8; color:#a47739; }
.timetable-subject-card { display:flex; flex-direction:column; }.timetable-subject-head { flex:0 0 auto; }.timetable-subject-head .primary-action { flex:0 0 auto; }.timetable-subject-scroll { flex:1 1 auto; min-height:0; margin-top:11px; overflow:auto; }.timetable-subject-grid { display:grid; grid-template-columns:50px repeat(5,minmax(105px,1fr)); min-width:610px; gap:5px; align-items:stretch; }.timetable-subject-grid>b,.timetable-grid-corner { display:grid; place-items:center; min-height:36px; border-radius:9px; background:#edf5e8; color:#467850; font-size:13px; }.timetable-grid-corner { color:#829082; background:#f5f2ed; }.timetable-period-number { background:#f7fbf5!important; color:#739078!important; }.timetable-subject-field { display:block; margin:0; }.timetable-subject-field input { height:36px; padding:6px 8px; border-radius:9px; font-size:13px; text-align:center; }.timetable-subject-field input::placeholder { color:#b8b2a9; }

@media(min-width:600px) {
  body[data-tool-page="settings"] .tool-workspace,body[data-tool-page="timetable"] .tool-workspace { height:100%; min-height:0; }
  body[data-tool-page="timetable"] .timetable-settings-card { padding:14px 17px; }
  body[data-tool-page="timetable"] .timetable-subject-card { overflow:hidden; }
}

@media(max-width:760px) {
  .settings-hub { grid-template-columns:1fr; align-content:start; }.setting-menu-card { min-height:154px; }.setting-menu-card>span { width:52px; height:52px; margin-bottom:12px; font-size:29px; }
  .timetable-setting-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.timetable-card-head,.timetable-subject-head { align-items:stretch; flex-direction:column; }.timetable-card-head .secondary-action,.timetable-subject-head .primary-action { width:fit-content; }
}

@media(min-width:600px) {
  .timetable-layout { grid-template-columns:minmax(245px,.92fr) minmax(0,1.28fr); grid-template-rows:minmax(0,1fr); }
  .timetable-settings-card { height:100%; overflow:hidden; }
  .timetable-subject-grid { grid-template-columns:38px repeat(5,minmax(78px,1fr)); min-width:440px; }
  .timetable-flow-preview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
  .timetable-flow-chip { justify-content:space-between; gap:3px; padding:4px 6px; }.timetable-flow-chip b { font-size:10px; }.timetable-flow-chip small { font-size:9px; }
}

@media(min-width:600px) and (max-width:900px) {
  body[data-tool-page="timetable"] .tool-fullscreen-toggle { width:auto; align-self:flex-start; }
  body[data-tool-page="timetable"] .tool-fullscreen-toggle span { display:inline; }
}

/* 설정 첫 화면의 인사말은 바로 편집하고, 학교·학급 정보는 별도 화면에서 관리합니다. */
.settings-hub { grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; }
.home-greeting-card { display:grid; grid-template-columns:minmax(230px,1fr) minmax(260px,1.15fr); column-gap:18px; row-gap:7px; grid-column:1 / -1; padding:clamp(18px,2vw,26px); border:1px solid #ead8bd; border-radius:21px; background:linear-gradient(145deg,#fffdf8,#faefe0); box-shadow:0 8px 18px rgba(101,73,47,.08); }.home-greeting-card>div:first-child { grid-row:span 3; }.home-greeting-card>div:first-child>div { display:flex; align-items:flex-start; gap:13px; }.home-greeting-card>div:first-child>span { display:grid; place-items:center; width:54px; height:54px; margin-bottom:11px; border-radius:16px; background:#ffe9cd; font-size:29px; }.home-greeting-card h3 { margin:0 0 4px; color:#604331; font-size:23px; }.home-greeting-card p { margin:0; color:#7c6654; font-size:13px; line-height:1.5; }.home-greeting-card label { margin:0 0 -2px; font-size:12px; }.home-greeting-card input { padding:9px 11px; }.home-greeting-card .hero-live-preview { margin:0; align-self:stretch; padding:11px 15px; }.home-greeting-card .hero-live-preview h2 { font-size:clamp(18px,2vw,26px); }.home-greeting-card .hero-live-preview p { margin-top:5px; font-size:12px; }.home-greeting-card .action-row { grid-column:2; margin:0; }.home-greeting-card .save-note { grid-column:2; min-height:13px; margin:0; font-size:11px; }
.home-greeting-card>div:first-child { grid-row:auto; align-self:center; }.home-greeting-card .hero-direct-edit { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; grid-column:2; grid-row:1; min-height:92px; box-sizing:border-box; cursor:text; text-align:center; }.hero-direct-edit h2,.hero-direct-edit p { width:100%; cursor:text; outline:0; text-align:center; }.hero-direct-edit h2 { line-height:1.25; }.hero-direct-edit p { margin:0!important; line-height:1.45; }.hero-direct-edit h2:focus,.hero-direct-edit p:focus { border-radius:7px; background:rgba(255,255,255,.62); box-shadow:0 0 0 2px rgba(178,125,72,.24); }.hero-direct-edit h2:empty::before { content:"메인 큰 제목"; color:#aa9b8e; }.hero-direct-edit p:empty::before { content:"메인 설명"; color:#aa9b8e; }.home-greeting-card .save-note { grid-column:1 / -1; min-height:13px; margin:0; color:#79836d; text-align:center; }
body[data-tool-page="home-settings"] .tool-workspace { display:grid; place-items:center; }
body[data-tool-page="home-settings"] .home-greeting-card { width:min(980px,100%); margin:auto; }
.school-region-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.school-region-fields label { margin-top:10px; }.school-region-fields select { min-height:42px; }.compact-weather { min-height:0; margin-top:8px; padding:7px 10px; font-size:12px; }
.student-list-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }.student-list-heading h4 { margin:0; }.student-list-heading .secondary-action { padding:6px 10px; font-size:11px; }.student-list-heading [hidden] { display:none!important; }.student-detailed-input { margin-top:8px; padding:11px; border:1px solid #cfe2d2; border-radius:13px; background:#f8fcf6; }.student-detail-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; }.student-gender-toggle { display:inline-flex; align-items:center; gap:6px; margin:0; color:#5b675e; font-size:12px; }.student-gender-toggle input { width:34px; height:19px; margin:0; padding:0; accent-color:#4b8360; }.student-detail-tools .secondary-action { padding:7px 9px; font-size:11px; }.student-detailed-help { margin:8px 0 6px; color:#708272; font-size:11px; }.detailed-student-list { display:grid; gap:6px; max-height:245px; overflow:auto; padding-right:2px; }.detailed-student-row { display:grid; grid-template-columns:29px minmax(0,1fr) 27px; gap:5px; align-items:center; }.detailed-student-row.has-genders { grid-template-columns:29px 56px minmax(0,1fr) 27px; }.detailed-student-row>b { display:grid; place-items:center; width:29px; height:31px; color:#5b8760; font-family:Arial,sans-serif!important; font-size:12px; text-align:right; }.detailed-student-row input,.detailed-student-row select { min-width:0; height:33px; padding:5px 7px; border-radius:8px; font-size:12px; }.remove-detailed-student { width:27px; height:27px; border:0; border-radius:50%; background:#f9e9e5; color:#a15f52; font-family:Arial,sans-serif!important; font-size:18px; line-height:1; }.add-student-row { width:100%; margin-top:9px; padding:10px; border:1px dashed #81af89; border-radius:10px; background:#fffefa; color:#3f7950; font-family:"Jua Local",sans-serif; font-size:13px; }.add-student-row:hover { background:#eff8ec; }
/* 자리뽑기는 명단을 다시 적지 않고, 교실 책상처럼 배치한 뒤 저장된 학생을 앉힙니다. */
body[data-tool-page="seating"] { --tool-accent:#b45135; --tool-accent-soft:#fff0e9; }
.seating-studio { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:12px; height:100%; min-height:0; }
.seating-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:11px 13px; border:1px solid #efd7ca; border-radius:16px; background:linear-gradient(145deg,#fffdf9,#fff4ed); }
.seating-roster-summary { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:6px; min-width:145px; }.seating-roster-summary span { color:#9a6653; font-size:11px; }.seating-roster-summary b { color:#a44d32; font-family:Arial,sans-serif!important; font-size:23px; line-height:1; }.seating-roster-summary small { grid-column:1 / -1; margin-top:3px; color:#877166; font-size:10px; }
.desk-count-controls { display:inline-flex; align-items:center; gap:7px; margin-right:auto; padding:5px 7px; border:1px solid #e9d3c3; border-radius:11px; background:#fffefa; }.desk-count-controls button { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:8px; background:#f9e5dc; color:#a55137; font-family:Arial,sans-serif!important; font-size:22px; line-height:1; }.desk-count-controls button:hover:not(:disabled) { background:#f1cdbc; }.desk-count-controls button:disabled { cursor:not-allowed; opacity:.42; }.desk-count-controls div { min-width:54px; color:#6e5549; font-size:11px; text-align:center; }.desk-count-controls b { margin-right:3px; color:#9d4a31; font-family:Arial,sans-serif!important; font-size:18px; }
.seating-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:6px; }.seating-actions .secondary-action { display:inline-flex; align-items:center; text-decoration:none; }.seating-actions .primary-action,.seating-actions .secondary-action { padding:8px 10px; font-size:12px; }.seating-actions button:disabled { cursor:not-allowed; opacity:.48; box-shadow:none; }
.seating-pair-toggle { display:inline-flex; align-items:center; gap:5px; padding:7px 9px; border:1px dashed #d9b8da; border-radius:9px; background:#fffaff; color:#765375; font-size:11px; white-space:nowrap; }.seating-pair-toggle input { width:30px; height:18px; margin:0; padding:0; accent-color:#8a5fa2; }.seating-pair-toggle.is-disabled { cursor:not-allowed; border-color:#ddd5d8; background:#fbf8f8; color:#a5999e; }.seating-pair-toggle.is-disabled input { cursor:not-allowed; }
.seating-room-layout { display:grid; grid-template-columns:minmax(0,1fr); min-height:0; }.seating-room-layout.is-staging { grid-template-columns:minmax(0,1fr) 158px; gap:11px; }.seat-canvas-frame { position:relative; display:flex; flex-direction:column; min-height:0; padding:10px; border:1px solid #ecd4c4; border-radius:20px; background:linear-gradient(145deg,#fdf8ee,#f6e7d3); box-shadow:inset 0 0 0 5px rgba(255,255,255,.5); }.teacher-desk { display:grid; place-items:center; flex:0 0 auto; width:92px; height:27px; margin:0 auto 8px; border:2px solid #9d6542; border-radius:7px 7px 10px 10px; background:linear-gradient(145deg,#e4b77e,#be7c4f); color:#fff9e8; box-shadow:0 3px 0 #865135,0 5px 7px rgba(91,55,35,.14); font-size:12px; text-shadow:0 1px rgba(82,49,30,.32); }
.desk-staging { display:flex; flex-direction:column; min-height:0; padding:13px 10px; overflow:hidden; border:1px solid #d9c3af; border-radius:18px; background:linear-gradient(145deg,#fffdf9,#f7e8d8); box-shadow:inset 0 0 0 4px rgba(255,255,255,.5); }.desk-staging[hidden] { display:none!important; }.desk-staging>div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:5px; }.desk-staging>div:first-child span { color:#9d6749; font-size:11px; }.desk-staging>div:first-child b { color:#a95632; font-family:Arial,sans-serif!important; font-size:14px; }.desk-staging>p { margin:5px 0 10px; color:#876c59; font-size:10px; line-height:1.4; }.desk-staging-stack { position:relative; flex:1 1 auto; min-height:170px; }.staged-desk { --stack-offset:0px; position:absolute; top:calc(10px + var(--stack-offset)); left:50%; display:grid; gap:2px; width:116px; min-height:62px; padding:8px; border:2px solid #b8784c; border-radius:11px 11px 15px 15px; background:linear-gradient(145deg,#f4d5a7,#d69963); color:#654029; box-shadow:0 4px 0 #aa6d47,0 8px 12px rgba(85,50,30,.16); cursor:grab; text-align:center; transform:translateX(-50%); transition:transform .15s,filter .15s; }.staged-desk:hover { z-index:30!important; filter:brightness(1.05); transform:translateX(-50%) translateY(-3px); }.staged-desk b { font-size:15px; }.staged-desk span { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.desk-staging-empty { margin:35px 0 0; color:#8b715e; font-size:12px; line-height:1.5; text-align:center; }
.seat-canvas { position:relative; flex:1 1 auto; min-height:250px; overflow:hidden; border:1px solid rgba(171,125,83,.26); border-radius:13px; background:linear-gradient(90deg,rgba(169,123,81,.055) 1px,transparent 1px),linear-gradient(rgba(169,123,81,.055) 1px,transparent 1px),#fffdf6; background-size:26px 26px; touch-action:none; transition:border-color .16s,box-shadow .16s,background .16s; }.seat-canvas.is-drop-ready { border-color:#d77643; background-color:#fff9ed; box-shadow:inset 0 0 0 3px rgba(230,133,72,.22); }.seat-canvas::before { content:"창가"; position:absolute; z-index:2; top:12px; right:14px; color:#b09278; font-size:10px; letter-spacing:1px; }.seat-canvas-empty { position:absolute; top:50%; right:20px; left:20px; margin:0; color:#a08067; font-size:15px; text-align:center; transform:translateY(-50%); }
.seat-snap-guide { position:absolute; z-index:1; display:block; pointer-events:none; opacity:0; transition:opacity .12s; }.seat-snap-guide.is-visible { opacity:1; }.seat-snap-guide-x { top:0; bottom:0; left:var(--snap-position,50%); border-left:2px dashed rgba(229,112,58,.8); box-shadow:0 0 0 2px rgba(255,245,221,.68); }.seat-snap-guide-y { right:0; left:0; top:var(--snap-position,50%); border-top:2px dashed rgba(229,112,58,.8); box-shadow:0 0 0 2px rgba(255,245,221,.68); }
.seat-desk { --desk-x:50%; --desk-y:50%; position:absolute; top:var(--desk-y); left:var(--desk-x); display:grid; grid-template-rows:20px 1fr; place-items:center; width:clamp(66px,8.2vw,96px); aspect-ratio:1.15; padding:0; border:2px solid #ac704a; border-radius:8px 8px 12px 12px; background:linear-gradient(145deg,#eec992,#c98c59); color:#573924; cursor:grab; box-shadow:0 4px 0 #a66b45,0 7px 10px rgba(85,50,30,.17); transform:translate(-50%,-50%); transition:box-shadow .15s,filter .15s,outline-color .15s; user-select:none; }.seat-desk::before { content:""; position:absolute; top:4px; right:5px; left:5px; height:14px; border-radius:4px; background:rgba(255,249,226,.48); }.seat-desk:hover { filter:brightness(1.05); box-shadow:0 5px 0 #a66b45,0 9px 13px rgba(85,50,30,.2); }.seat-desk.is-dragging { z-index:5; cursor:grabbing; filter:brightness(1.08); box-shadow:0 8px 0 #a66b45,0 14px 19px rgba(85,50,30,.25); }.seat-desk.is-snap-target { z-index:4; outline:3px solid #f19a67; outline-offset:4px; animation:seatSnapPulse .72s ease-in-out infinite alternate; }.seat-desk.is-assigned { border-color:#6d986e; background:linear-gradient(145deg,#d9edd6,#a6c9a4); color:#36543a; box-shadow:0 4px 0 #6d986e,0 7px 10px rgba(59,105,65,.18); }.seat-desk.is-boy { border-color:#7397c5; background:linear-gradient(145deg,#dfecff,#aac6e8); color:#345578; box-shadow:0 4px 0 #7397c5,0 7px 10px rgba(55,95,145,.18); }.seat-desk.is-girl { border-color:#c88dab; background:linear-gradient(145deg,#ffe5ee,#e4b4c8); color:#814761; box-shadow:0 4px 0 #c88dab,0 7px 10px rgba(138,70,100,.18); }.seat-desk-number { position:relative; z-index:1; display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:rgba(255,255,255,.76); color:#8c5938; font-family:Arial,sans-serif!important; font-size:10px; font-weight:700; }.seat-desk strong { position:relative; z-index:1; display:block; width:calc(100% - 6px); overflow:hidden; padding-bottom:4px; color:inherit; font-size:clamp(15px,2.1vw,21px); letter-spacing:-.8px; line-height:1.08; text-align:center; text-overflow:ellipsis; white-space:nowrap; }.seat-desk.is-long-name strong { font-size:clamp(13px,1.75vw,18px); }.seat-desk.is-very-long-name strong { font-size:clamp(11px,1.45vw,15px); }.seat-drag-ghost { position:fixed; z-index:1000; pointer-events:none; cursor:grabbing; }
@keyframes seatSnapPulse { from { outline-color:rgba(241,154,103,.58); } to { outline-color:#f19a67; } }
.seat-canvas-help { flex:0 0 auto; margin:8px 4px 0; color:#8b7160; font-size:11px; line-height:1.4; text-align:center; }.seating-note { min-height:16px; color:#7c6253; font-size:12px; text-align:center; }

/* 학생 뽑기는 학생들이 함께 보는 순간을 중심으로, 결과를 크게 보여줍니다. */
body[data-tool-page="student-picker"] { --tool-accent:#76509a; --tool-accent-soft:#f4edfa; }
.student-picker-layout { display:grid; grid-template-rows:auto minmax(0,1fr); gap:12px; width:100%; height:100%; min-height:0; }
.picker-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:11px 14px; border:1px solid #dfd0eb; border-radius:16px; background:linear-gradient(145deg,#fffdff,#f7effc); }.picker-class-summary { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:7px; min-width:155px; }.picker-class-summary span { color:#8b6b9e; font-size:11px; }.picker-class-summary b { color:#76509a; font-family:Arial,sans-serif!important; font-size:24px; line-height:1; }.picker-class-summary small { grid-column:1 / -1; margin-top:3px; color:#87788e; font-size:10px; }.picker-settings { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-left:auto; }.picker-settings label { display:inline-flex; align-items:center; gap:5px; margin:0; padding:7px 9px; border:1px dashed #d5c1e3; border-radius:9px; background:#fffaff; color:#6f557e; font-size:11px; white-space:nowrap; }.picker-settings label input { width:30px; height:18px; margin:0; padding:0; accent-color:#8057a4; }.picker-settings .secondary-action { padding:8px 10px; font-size:12px; }.picker-settings button:disabled { cursor:not-allowed; opacity:.48; }
.picker-play-area { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:13px; min-height:0; }.picker-stage { position:relative; display:grid; grid-template-rows:auto minmax(136px,1fr) auto minmax(0,1fr); align-items:center; min-height:0; overflow:hidden; padding:clamp(18px,3.2vw,32px); border:1px solid #d8c6e7; border-radius:23px; background:radial-gradient(circle at 50% 27%,rgba(255,255,255,.96),transparent 31%),linear-gradient(145deg,#fdfaff,#f0e5f7); box-shadow:inset 0 0 0 5px rgba(255,255,255,.52),0 10px 22px rgba(105,67,132,.1); text-align:center; }.picker-stage::before,.picker-stage::after { content:"✦"; position:absolute; color:rgba(154,112,185,.25); font-family:Arial,sans-serif!important; font-size:40px; }.picker-stage::before { top:14%; left:8%; }.picker-stage::after { right:9%; bottom:11%; font-size:28px; }.picker-kicker { position:relative; z-index:1; margin:0 0 8px; color:#8663a0; font-size:14px; }.picker-name-window { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; align-self:stretch; min-height:136px; padding:16px; border:2px solid rgba(135,91,167,.25); border-radius:22px; background:rgba(255,255,255,.76); box-shadow:0 7px 0 rgba(141,98,171,.13),0 11px 19px rgba(104,68,130,.1); }.picker-name-window span { display:grid; place-items:center; min-width:40px; min-height:27px; color:#9974b1; font-family:Arial,sans-serif!important; font-size:20px; font-weight:700; }.picker-name-window strong { display:block; max-width:100%; overflow:hidden; color:#5d3d76; font-size:clamp(36px,6.2vw,76px); letter-spacing:-2px; line-height:1.08; text-overflow:ellipsis; white-space:nowrap; }.picker-message { position:relative; z-index:1; min-height:21px; margin:11px 0 7px; color:#78687d; font-size:13px; }.picker-message a { color:#7551a0; text-decoration:underline; }.picker-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }.picker-actions .primary-action,.picker-actions .secondary-action { padding:10px 15px; font-size:14px; }.picker-actions button:disabled { cursor:not-allowed; opacity:.48; box-shadow:none; }
.picker-order-results { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:6px; min-height:0; margin-top:12px; overflow:auto; }.order-result-item { display:flex; align-items:center; gap:7px; min-height:31px; padding:6px 9px; border:1px solid #dfd0eb; border-radius:9px; background:rgba(255,255,255,.78); color:#654c73; font-size:13px; text-align:left; transition:transform .25s,opacity .25s; }.order-result-item b { display:grid; place-items:center; flex:0 0 auto; width:21px; height:21px; border-radius:50%; background:#8d64ad; color:#fff; font-family:Arial,sans-serif!important; font-size:10px; }.order-result-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.order-result-item.is-new { opacity:0; transform:translateY(-15px) scale(.84); }.picker-stage.is-drawing .picker-name-window { animation:pickerDrum .15s linear infinite alternate; }.picker-stage.is-revealed .picker-name-window { border-color:#e69b5c; background:linear-gradient(145deg,#fffdf2,#fff1d8); animation:pickerTaDa .58s cubic-bezier(.18,.89,.32,1.28); }.picker-stage.is-revealed .picker-name-window strong { color:#b35f2a; }.picker-stage.is-ordering .picker-name-window { min-height:92px; padding:10px; }.picker-stage.is-ordering .picker-name-window strong { font-size:clamp(27px,4.2vw,48px); }.picker-stage.is-ordering .picker-message { margin-top:7px; }
.picker-recent { display:flex; flex-direction:column; min-height:0; padding:17px 14px; overflow:hidden; border:1px solid #ddd0e6; border-radius:19px; background:linear-gradient(145deg,#fffefe,#f8f1fb); }.picker-recent>div span { color:#9b7ab0; font-family:Arial,sans-serif!important; font-size:9px; font-weight:700; letter-spacing:1.4px; }.picker-recent h3 { margin:3px 0 10px; color:#63487a; font-size:18px; }.picker-recent ol { display:grid; align-content:start; gap:6px; min-height:0; margin:0; padding:0; overflow:auto; list-style:none; }.picker-recent li { display:flex; align-items:center; gap:8px; min-height:34px; padding:6px 7px; border-radius:9px; background:#f5ecfa; color:#674f75; font-size:13px; }.picker-recent li b { display:grid; place-items:center; flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:#a87abb; color:#fff; font-family:Arial,sans-serif!important; font-size:10px; }.picker-recent .recent-picks-empty { display:block; padding:10px 4px; background:transparent; color:#96879d; font-size:12px; line-height:1.5; text-align:center; }
.picker-recent[hidden] { display:none !important; }
@keyframes pickerDrum { from { transform:translateX(-5px) rotate(-.4deg); } to { transform:translateX(5px) rotate(.4deg); } } @keyframes pickerTaDa { 0% { transform:scale(.8); } 62% { transform:scale(1.09) rotate(-1deg); } 100% { transform:scale(1); } }
.picker-stage { grid-template-rows:auto minmax(136px,1fr) auto auto minmax(0,1fr) auto; }.picker-order-results { width:100%; }.picker-restart { position:relative; z-index:1; justify-self:center; min-width:142px; margin-top:10px; }.picker-stage.is-order-complete { grid-template-rows:minmax(0,1fr) auto; padding:clamp(18px,3.2vw,32px); }.picker-stage.is-order-complete .picker-kicker,.picker-stage.is-order-complete .picker-name-window,.picker-stage.is-order-complete .picker-message,.picker-stage.is-order-complete .picker-actions { display:none; }.picker-stage.is-order-complete .picker-order-results { grid-row:1; align-self:stretch; margin-top:0; grid-template-columns:repeat(2,minmax(0,1fr)); }.picker-stage.is-order-complete .picker-restart { grid-row:2; }

/* 덩굴과 포도 스티커로 꾸민 우리 반 칭찬판 */
body[data-tool-page="grapes"] { --tool-accent:#704393; --tool-accent-soft:#f6edfb; }
.grape-praise-board { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr); width:100%; height:100%; min-height:0; overflow:hidden; padding:clamp(20px,3vw,38px) clamp(22px,4vw,55px) clamp(18px,2.8vw,34px); border:1px solid #e1cfec; border-radius:25px; background:radial-gradient(circle at 54% 20%,#fff 0 23%,transparent 55%),linear-gradient(180deg,#fffdfb 0 77%,#f1e7f7 100%); box-shadow:inset 0 0 0 6px rgba(255,255,255,.56),0 12px 27px rgba(91,52,116,.1); }.grape-praise-board::after { content:""; position:absolute; right:-8%; bottom:-19%; left:-8%; height:34%; border-radius:50% 50% 0 0; background:radial-gradient(ellipse at 35% 0,#c2df72 0 22%,transparent 23%),radial-gradient(ellipse at 60% 15%,#a7cf5d 0 25%,transparent 26%),linear-gradient(175deg,#d8ee97,#9ec758); opacity:.8; }
.grape-vine { position:absolute; z-index:1; top:-10px; width:44%; height:66px; border-top:8px solid #638d36; border-radius:50%; opacity:.9; }.grape-vine::after { content:""; position:absolute; top:-3px; width:80px; height:37px; border:5px solid #6d983d; border-top:0; border-left:0; border-radius:0 0 70% 0; }.vine-left { left:-7%; transform:rotate(5deg); }.vine-left::after { right:5%; }.vine-right { right:-7%; transform:scaleX(-1) rotate(5deg); }.vine-right::after { right:5%; }.grape-vine i { position:absolute; width:43px; height:28px; border-radius:70% 7% 70% 7%; background:linear-gradient(145deg,#9fc652,#568c30); box-shadow:inset -5px -5px 0 rgba(43,105,37,.16); transform:rotate(-22deg); }.grape-vine i:nth-child(1) { top:1px; left:24%; }.grape-vine i:nth-child(2) { top:16px; left:47%; transform:rotate(35deg) scale(1.2); }.grape-vine i:nth-child(3) { top:-5px; right:10%; transform:rotate(8deg); }
.grape-deco-bunch { position:absolute; z-index:1; top:35px; right:24px; display:grid; grid-template-columns:repeat(3,20px); gap:0; width:64px; transform:rotate(10deg); }.grape-deco-bunch span { width:23px; height:23px; margin:-2px; border-radius:50%; background:radial-gradient(circle at 32% 24%,#fff7ff 0 10%,transparent 12%),linear-gradient(145deg,#aa79c9,#613885); box-shadow:inset -3px -4px 0 rgba(56,29,74,.2),0 2px 2px rgba(57,29,74,.16); }.grape-deco-bunch span:nth-child(2),.grape-deco-bunch span:nth-child(5) { transform:translateY(11px); }
.grape-praise-head { position:relative; z-index:2; text-align:center; }.grape-praise-head p { margin:0; color:#8a65a3; font-family:Arial,sans-serif!important; font-size:10px; font-weight:700; letter-spacing:1.8px; }.grape-praise-head h2 { margin:3px 0 8px; color:#67398c; font-size:clamp(31px,4.4vw,57px); letter-spacing:-2px; line-height:1; text-shadow:0 4px 0 #eee1f3,0 6px 8px rgba(78,36,108,.14); }.grape-praise-head>b { display:inline-block; padding:7px 22px; border-radius:7px 7px 17px 17px; background:linear-gradient(90deg,#7746a0,#9c6bc0,#7746a0); color:#fff; font-size:clamp(13px,1.5vw,18px); transform:rotate(-1deg); box-shadow:0 4px 0 rgba(85,45,116,.18); }
.grape-praise-main { position:relative; z-index:2; display:grid; grid-template-columns:clamp(135px,18vw,230px) minmax(0,1fr); align-items:stretch; gap:clamp(12px,2.5vw,32px); min-height:0; margin-top:clamp(12px,2.2vh,23px); }.grape-side-tree { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; padding-top:10px; }.grape-side-tree::before { content:""; position:absolute; top:8%; left:50%; width:31px; height:42%; border-radius:50% 50% 10px 10px; background:linear-gradient(90deg,#754227,#bd7a43,#6d3b25); box-shadow:inset -4px 0 rgba(68,33,20,.2); transform:translateX(-50%); }.grape-tree-leaves { position:absolute; z-index:1; top:5%; left:50%; display:flex; gap:-6px; transform:translateX(-50%); }.grape-tree-leaves i { width:67px; height:45px; margin:-13px; border-radius:80% 7% 80% 7%; background:linear-gradient(145deg,#a5cf54,#4e8d36); box-shadow:inset -7px -7px rgba(53,118,41,.13); transform:rotate(27deg); }.grape-tree-leaves i:nth-child(2) { transform:rotate(-20deg) translateY(-14px); }.grape-tree-fruit { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,clamp(30px,4.3vw,53px)); justify-content:center; width:100%; margin-top:13%; transform:rotate(-5deg); }.grape-tree-fruit i { width:clamp(30px,4.3vw,53px); aspect-ratio:1; margin:-4px; border:2px solid rgba(74,37,98,.28); border-radius:50%; background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.85) 0 10%,transparent 12%),radial-gradient(circle at 55% 62%,#e495c1 0 8%,transparent 9%),linear-gradient(145deg,#a874cf,#5f3987); box-shadow:inset -4px -5px rgba(51,24,73,.2),0 3px 4px rgba(70,31,94,.16); }.grape-side-tree p { position:relative; z-index:2; margin:13px 0 0; padding:9px 10px; border:1px dashed #c8a97e; border-radius:9px; background:#fffaf0; color:#725a46; font-size:11px; line-height:1.55; text-align:center; transform:rotate(-3deg); }
.grape-sticker-area { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; min-height:0; padding:clamp(11px,2vw,20px); border:2px solid rgba(112,67,147,.18); border-radius:22px; background:rgba(255,255,255,.73); box-shadow:0 8px 18px rgba(86,43,115,.07); }.grape-board-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }.grape-progress strong { display:block; color:#744499; font-size:clamp(20px,2.5vw,31px); }.grape-progress strong b { font-family:Arial,sans-serif!important; font-size:inherit; }.grape-progress strong span { color:#9677aa; font-size:.55em; }.grape-progress strong i { font-family:Arial,sans-serif!important; font-style:normal; }.grape-progress small { color:#8c778e; font-size:10px; }.grape-target-control { display:inline-flex; align-items:center; gap:4px; margin:0; padding:7px 9px; border:1px solid #d8c2e6; border-radius:10px; background:#fffaff; color:#724e85; font-size:12px; white-space:nowrap; }.grape-target-control input { width:42px; min-height:30px; padding:4px; border:0; border-bottom:1px solid #a27fba; border-radius:0; background:transparent; color:#623d78; font-family:Arial,sans-serif!important; font-size:15px; text-align:center; box-shadow:none; }.grape-target-control input:focus { outline:0; border-bottom-color:#6f4390; }
.grape-sticker-grid { --grape-columns:8; display:grid; grid-template-columns:repeat(var(--grape-columns),minmax(0,1fr)); align-content:center; justify-items:center; gap:clamp(7px,1.2vw,15px); width:100%; max-width:none; min-height:0; margin:0; padding:clamp(10px,1.7vw,19px); border:0; border-radius:17px; background:radial-gradient(circle at 50% 45%,#fffdfd,#f8f0fb); }.grape-sticker-grid button { position:relative; width:100%; max-width:clamp(37px,5.3vw,68px); aspect-ratio:1; min-height:0; border:2px solid #704493; border-radius:50%; background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.98) 0 10%,transparent 12%),linear-gradient(145deg,#fff,#f4eefa); box-shadow:inset -2px -2px 0 rgba(133,89,163,.1); cursor:pointer; transition:transform .16s,filter .16s,box-shadow .16s; }.grape-sticker-grid button:hover { transform:translateY(-2px) scale(1.06); filter:brightness(1.03); }.grape-sticker-grid button:active { transform:scale(.9); }.grape-sticker-grid button.filled { border-color:#5e2e83; background:radial-gradient(circle at 31% 21%,#fff7ff 0 9%,transparent 11%),radial-gradient(circle at 64% 67%,#e997c1 0 8%,transparent 9%),linear-gradient(145deg,#b77bd7,#663789); box-shadow:inset -4px -5px 0 rgba(54,24,73,.24),0 3px 5px rgba(83,42,107,.24); }.grape-sticker-grid button.filled::after { content:"⌣"; position:absolute; top:43%; left:50%; color:#fff4ff; font-family:Arial,sans-serif!important; font-size:clamp(11px,1.5vw,17px); font-weight:bold; transform:translate(-50%,-50%); }
.grape-praise-actions { display:flex; justify-content:center; gap:8px; margin-top:9px; }.grape-praise-actions .primary-action,.grape-praise-actions .secondary-action { padding:8px 13px; font-size:12px; }.grape-help { margin:7px 0 0; color:#856d8f; font-size:11px; text-align:center; }

@media(max-width:760px) {
  .home-greeting-card { grid-template-columns:1fr; }.home-greeting-card>div:first-child,.home-greeting-card .hero-direct-edit,.home-greeting-card .action-row,.home-greeting-card .save-note { grid-column:1; grid-row:auto; }.home-greeting-card>div:first-child { display:flex; align-items:flex-start; gap:13px; }.home-greeting-card>div:first-child>span { flex:0 0 auto; margin:0; }.home-greeting-card>div:first-child>div { display:block; }.school-region-fields { grid-template-columns:1fr; gap:0; }
  .seating-toolbar { align-items:stretch; }.seating-roster-summary { min-width:0; }.desk-count-controls { margin-right:0; }.seating-actions { justify-content:flex-start; }.seating-room-layout.is-staging { grid-template-columns:1fr; }.seat-canvas { min-height:430px; }.seat-desk { width:72px; }.seating-pair-toggle { padding:7px 8px; }.desk-staging { min-height:190px; }.desk-staging-stack { min-height:120px; }
  .picker-toolbar { align-items:stretch; }.picker-settings { justify-content:flex-start; margin-left:0; }.picker-play-area { grid-template-columns:1fr; }.picker-stage { min-height:475px; }.picker-recent { max-height:250px; }.picker-name-window strong { font-size:45px; }
  .grape-praise-board { height:auto; min-height:720px; padding:25px 15px; }.grape-praise-main { grid-template-columns:1fr; }.grape-side-tree { display:none; }.grape-deco-bunch { right:10px; transform:scale(.72); transform-origin:top right; }.grape-board-tools { align-items:flex-start; flex-direction:column; }.grape-sticker-area { min-height:500px; }.grape-sticker-grid { gap:8px; }.grape-target-control { align-self:flex-end; }
}

/* 메인 외 도구 화면은 테마의 분위기만 남기고, 실제 작업 공간을 넓게 확보합니다. */
@media(min-width:600px) {
  .tool-page-shell { width:min(1480px,calc(100% - 24px)); grid-template-rows:27px minmax(0,1fr); gap:7px; padding:7px 0; }
  .back-home { padding:5px 10px; }
  .tool-page-head { display:none!important; }
  .tool-workspace { padding:clamp(9px,1.2vw,17px); border-radius:18px; background:rgba(255,253,249,.86); box-shadow:0 14px 30px rgba(88,61,38,.13); }
}

@media(max-width:599px) {
  .tool-page-shell { width:calc(100% - 12px); padding:10px 0 18px; }
  .tool-page-head { margin:12px 0 9px; padding:14px; background:rgba(255,253,249,.78); }
  .tool-workspace { padding:11px; background:rgba(255,253,249,.88); }
}

/* 자리 배치에서는 교실을 최대한 넓게 쓰고, 대기 책상이 있을 때만 옆 공간을 차지합니다. */
@media(min-width:600px) {
  body[data-tool-page="seating"] .tool-workspace { padding:10px 12px 11px; }
  body[data-tool-page="seating"] .seating-studio { gap:8px; }
  body[data-tool-page="seating"] .seating-toolbar { gap:7px; padding:8px 10px; }
  body[data-tool-page="seating"] .seating-room-layout { height:100%; min-height:0; }
  body[data-tool-page="seating"] .seating-room-layout.is-staging { grid-template-columns:minmax(0,1fr) 132px; gap:8px; }
  body[data-tool-page="seating"] .seat-canvas-frame { padding:8px; }
  body[data-tool-page="seating"] .teacher-desk { margin-bottom:6px; }
  body[data-tool-page="seating"] .seat-canvas { min-height:0; }
  body[data-tool-page="seating"] .seat-canvas-help { margin:5px 4px 0; }
  body[data-tool-page="seating"] .desk-staging { padding:10px 7px; }
  body[data-tool-page="seating"] .staged-desk { width:100px; }
}

/* 사이드패널처럼 폭이 좁은 데스크톱에서도 포도 스티커판 전체가 한 화면 안에 들어오게 합니다. */
@media(min-width:600px) and (max-width:760px) {
  body[data-tool-page="grapes"] .grape-praise-board { height:100%; min-height:0; padding:14px 12px 12px; }
  body[data-tool-page="grapes"] .grape-praise-head h2 { margin:2px 0 5px; font-size:34px; }
  body[data-tool-page="grapes"] .grape-praise-head>b { padding:5px 14px; font-size:12px; }
  body[data-tool-page="grapes"] .grape-praise-main { grid-template-columns:104px minmax(0,1fr); gap:9px; margin-top:8px; }
  body[data-tool-page="grapes"] .grape-side-tree { display:flex; padding-top:0; }
  body[data-tool-page="grapes"] .grape-side-tree p { display:none; }
  body[data-tool-page="grapes"] .grape-tree-fruit { grid-template-columns:repeat(3,31px); }
  body[data-tool-page="grapes"] .grape-tree-fruit i { width:31px; }
  body[data-tool-page="grapes"] .grape-sticker-area { min-height:0; padding:9px; border-radius:16px; }
  body[data-tool-page="grapes"] .grape-board-tools { flex-direction:row; align-items:center; gap:7px; margin-bottom:5px; }
  body[data-tool-page="grapes"] .grape-progress strong { font-size:22px; }
  body[data-tool-page="grapes"] .grape-progress small { font-size:9px; }
  body[data-tool-page="grapes"] .grape-target-control { align-self:auto; padding:5px 6px; font-size:10px; }
  body[data-tool-page="grapes"] .grape-target-control input { width:32px; min-height:24px; font-size:13px; }
  body[data-tool-page="grapes"] .grape-sticker-grid { gap:5px; padding:5px; }
  body[data-tool-page="grapes"] .grape-sticker-grid button { max-width:40px; }
  body[data-tool-page="grapes"] .grape-praise-actions { margin-top:5px; }
  body[data-tool-page="grapes"] .grape-praise-actions .primary-action,body[data-tool-page="grapes"] .grape-praise-actions .secondary-action { padding:6px 9px; font-size:11px; }
  body[data-tool-page="grapes"] .grape-help { margin-top:4px; font-size:9px; }
}

/* 학생 명단 확인의 좌석보기는 체크 전에도 따뜻한 노란 책상으로 보여줍니다. */
body[data-tool-page="checklist"] .seat-check-desk { border-color:#c79031; background:linear-gradient(145deg,#fff3b9,#ebc968); color:#72501e; box-shadow:0 4px 0 #ca9636,0 7px 10px rgba(145,100,30,.18); }
body[data-tool-page="checklist"] .seat-check-desk b { color:#94713b; }
body[data-tool-page="checklist"] .seat-check-desk.is-checked { border-color:#4a9a72; background:linear-gradient(145deg,#ddf4e1,#a8d7ae); color:#2b6b4a; box-shadow:0 4px 0 #4a9a72,0 7px 10px rgba(43,105,74,.2); }
body[data-tool-page="checklist"] .seat-check-desk.is-empty { border-color:#c7b59f; background:linear-gradient(145deg,#f3e9de,#ddc9b3); color:#8c715d; box-shadow:0 4px 0 #b89a81,0 7px 10px rgba(89,65,46,.12); }

/* 칠판 저장함은 필요할 때만 열어 주 작업 영역을 넓게 사용합니다. */
body[data-tool-page="board"] .board-editor-layout { grid-template-columns:minmax(0,1fr); }
body[data-tool-page="board"] .board-editor-layout.is-archive-open { grid-template-columns:minmax(0,1fr) clamp(220px,22vw,285px); }
body[data-tool-page="board"] .board-archive[hidden] { display:none; }
body[data-tool-page="board"] .board-toolbar>div { flex-wrap:wrap; justify-content:flex-end; }

@media(max-width:700px) {
  body[data-tool-page="board"] .board-editor-layout.is-archive-open { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
}

/* 빈 칸 없이, 좌상단 줄기에서 자라는 한 송이의 칭찬 포도알 */
body[data-tool-page="grapes"] .grape-praise-board > .grape-vine,
body[data-tool-page="grapes"] .grape-praise-board > .grape-deco-bunch { display:none; }
body[data-tool-page="grapes"] .grape-praise-main { display:block; min-height:0; }
body[data-tool-page="grapes"] .grape-sticker-area { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; min-height:0; overflow:hidden; }
body[data-tool-page="grapes"] .grape-growing-bunch { position:relative; display:block; flex:1 1 auto; width:100%; min-height:0; margin:0; overflow:hidden; border:1px solid rgba(116,70,151,.2); border-radius:18px; background:radial-gradient(ellipse at 50% 100%,rgba(226,207,239,.48),transparent 58%),radial-gradient(circle at 77% 16%,rgba(255,255,255,.96),transparent 22%),linear-gradient(145deg,#fffdfd,#f8f0fb); }
body[data-tool-page="grapes"] .growing-vine { position:absolute; z-index:1; top:0; left:0; width:48%; height:27%; pointer-events:none; }
body[data-tool-page="grapes"] .growing-vine::before { content:""; position:absolute; top:13%; left:5%; width:91%; height:68%; border-top:clamp(4px,.55vw,8px) solid #5a8438; border-radius:48% 50% 0 0; box-shadow:0 -2px 0 rgba(203,232,142,.86); transform:rotate(13deg); transform-origin:left center; }
body[data-tool-page="grapes"] .growing-vine::after { content:""; position:absolute; top:9%; left:3%; width:18%; height:46%; border-left:clamp(3px,.4vw,6px) solid #6e973e; border-radius:60%; transform:rotate(-27deg); }
body[data-tool-page="grapes"] .growing-vine i { position:absolute; z-index:1; display:block; width:clamp(23px,4vw,53px); height:clamp(15px,2.5vw,32px); border:1px solid rgba(74,120,43,.28); border-radius:83% 8% 83% 8%; background:linear-gradient(135deg,#c3e979,#6ba942); box-shadow:inset -5px -4px rgba(71,126,42,.14),0 2px 3px rgba(69,100,40,.12); transform:rotate(27deg); }
body[data-tool-page="grapes"] .growing-vine i:nth-child(1) { top:3%; left:9%; transform:rotate(-28deg); }
body[data-tool-page="grapes"] .growing-vine i:nth-child(2) { top:28%; left:32%; transform:rotate(22deg); }
body[data-tool-page="grapes"] .growing-vine i:nth-child(3) { top:40%; right:0; transform:rotate(-30deg); }
body[data-tool-page="grapes"] .growing-grape { position:absolute; z-index:2; top:var(--grape-y); left:var(--grape-x); width:var(--grape-dot-size,38px); height:var(--grape-dot-size,38px); border:2px solid #5f3384; border-radius:50%; background:radial-gradient(circle at 31% 22%,rgba(255,255,255,.98) 0 9%,transparent 11%),radial-gradient(circle at 64% 67%,#e791bf 0 8%,transparent 9%),linear-gradient(145deg,#bf83de,#6b398e); box-shadow:inset -4px -5px 0 rgba(54,24,73,.24),0 3px 5px rgba(83,42,107,.24); transform:translate(-50%,-50%) scale(0); animation:grape-grow-in .36s cubic-bezier(.22,1.45,.36,1) forwards; animation-delay:calc(var(--grape-index) * 12ms); }
body[data-tool-page="grapes"] .growing-grape:nth-of-type(3n) { background:radial-gradient(circle at 31% 22%,rgba(255,255,255,.98) 0 9%,transparent 11%),radial-gradient(circle at 64% 67%,#f0a1c9 0 8%,transparent 9%),linear-gradient(145deg,#c98be1,#744094); }
body[data-tool-page="grapes"] .growing-grape:nth-of-type(4n) { filter:saturate(1.08) brightness(.96); }
@keyframes grape-grow-in { 0% { opacity:0; transform:translate(-50%,-50%) scale(.25); } 72% { opacity:1; transform:translate(-50%,-50%) scale(1.11); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); } }
body[data-tool-page="grapes"] .grape-help { margin:5px 0 0; font-size:10px; }
body[data-tool-page="grapes"] .grape-target-control input { width:50px; min-width:50px; }

@media(max-width:599px) {
  body[data-tool-page="grapes"] .grape-growing-bunch { min-height:330px; }
  body[data-tool-page="grapes"] .grape-board-tools { align-items:flex-start; flex-direction:column; }
  body[data-tool-page="grapes"] .grape-top-actions { width:100%; justify-content:space-between; }
}

/* 포도알 칭찬판: 장식 포도송이 대신 스티커 판 전체를 넓게 사용합니다. */
body[data-tool-page="grapes"] .grape-praise-main { grid-template-columns:minmax(0,1fr); margin-top:clamp(7px,1.4vh,14px); overflow:visible; }
body[data-tool-page="grapes"] .grape-sticker-area { height:100%; overflow:visible; padding:clamp(9px,1.5vw,16px); }
body[data-tool-page="grapes"] .grape-sticker-grid { grid-template-rows:repeat(var(--grape-rows,4),minmax(0,1fr)); align-content:stretch; align-items:center; justify-items:center; gap:clamp(5px,.9vw,12px); padding:clamp(7px,1.1vw,13px); }
body[data-tool-page="grapes"] .grape-sticker-grid button { width:min(88%,min(68px,11vh)); max-width:none; max-height:88%; }
body[data-tool-page="grapes"] .grape-praise-actions { margin-top:7px; }
body[data-tool-page="grapes"] .grape-help { margin-top:5px; }

/* 학생 명단 확인: 제목·저장 패널은 숨기고, 확인 영역을 화면 끝까지 확장합니다. */
body[data-tool-page="checklist"] .tool-workspace { padding:7px 8px 8px; }
body[data-tool-page="checklist"] .checklist-card { padding:7px 8px; }
body[data-tool-page="checklist"] .checklist-toolbar,
body[data-tool-page="checklist"] .checklist-summary,
body[data-tool-page="checklist"] .checklist-save-manager,
body[data-tool-page="checklist"] #checklistNote { display:none; }
body[data-tool-page="checklist"] .checklist-view-controls { display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; flex-direction:row; min-height:30px; margin:0 0 5px; }
body[data-tool-page="checklist"] .checklist-view-controls button { padding:5px 9px; }
body[data-tool-page="checklist"] .student-check-grid { min-height:0; padding:3px; }
body[data-tool-page="checklist"] .student-check-grid.is-seat-layout { overflow:hidden; padding:0; }
body[data-tool-page="checklist"] .seat-check-layout { min-height:0; height:100%; border-radius:13px; }
body[data-tool-page="checklist"] .seat-check-desk { width:clamp(72px,9.2vw,110px); }

@media(min-width:600px) {
  body[data-tool-page="checklist"] .tool-page-shell { width:min(1500px,calc(100% - 24px)); }
  body[data-tool-page="checklist"] .seat-check-layout { min-height:0; }
}

@media(max-width:599px) {
  body[data-tool-page="grapes"] .grape-praise-board { min-height:680px; }
  body[data-tool-page="grapes"] .grape-sticker-grid button { width:min(86%,58px); }
  body[data-tool-page="checklist"] .checklist-view-controls { align-items:flex-start; flex-direction:column; }
}

/* 포도알은 화면 안에서 모두 보이도록, 상단을 압축하고 스티커 판에 높이를 우선 배정합니다. */
body[data-tool-page="grapes"] .grape-praise-board { grid-template-rows:auto minmax(0,1fr); padding:8px 12px 10px; }
body[data-tool-page="grapes"] .grape-praise-head p { display:none; }
body[data-tool-page="grapes"] .grape-praise-head h2 { margin:0 0 3px; font-size:clamp(24px,3.2vw,39px); line-height:1; }
body[data-tool-page="grapes"] .grape-praise-head>b { padding:3px 12px 4px; border-radius:6px 6px 11px 11px; font-size:clamp(10px,1.1vw,13px); }
body[data-tool-page="grapes"] .grape-praise-main { min-height:0; margin-top:5px; }
body[data-tool-page="grapes"] .grape-sticker-area { grid-template-rows:auto minmax(0,1fr); min-height:0; padding:7px; }
body[data-tool-page="grapes"] .grape-board-tools { min-height:31px; gap:7px; margin-bottom:5px; }
body[data-tool-page="grapes"] .grape-progress { display:flex; align-items:center; gap:6px; }
body[data-tool-page="grapes"] .grape-progress strong { font-size:clamp(18px,2.1vw,25px); line-height:1; white-space:nowrap; }
body[data-tool-page="grapes"] .grape-progress small { display:none; }
body[data-tool-page="grapes"] .grape-top-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-width:0; }
body[data-tool-page="grapes"] .grape-target-control { min-height:29px; padding:4px 7px; font-size:11px; }
body[data-tool-page="grapes"] .grape-target-control input { width:31px; min-height:21px; font-size:13px; }
body[data-tool-page="grapes"] .grape-praise-actions { display:flex; gap:5px; margin:0; }
body[data-tool-page="grapes"] .grape-praise-actions .primary-action,body[data-tool-page="grapes"] .grape-praise-actions .secondary-action { padding:6px 8px; font-size:10px; white-space:nowrap; }
body[data-tool-page="grapes"] .grape-sticker-grid { grid-template-rows:repeat(var(--grape-rows,4),minmax(0,1fr)); min-height:0; align-content:stretch; align-items:center; gap:clamp(4px,.7vw,9px); padding:clamp(5px,.8vw,9px); }
body[data-tool-page="grapes"] .grape-sticker-grid button { width:min(84%,min(64px,10vh)); max-width:84%; max-height:84%; }
body[data-tool-page="grapes"] .grape-help { display:none; }

@media(max-width:599px) {
  body[data-tool-page="grapes"] .grape-praise-board { padding:10px 8px; }
  body[data-tool-page="grapes"] .grape-board-tools { align-items:flex-start; flex-direction:column; }
  body[data-tool-page="grapes"] .grape-top-actions { width:100%; justify-content:space-between; }
  body[data-tool-page="grapes"] .grape-sticker-area { grid-template-rows:auto minmax(0,1fr); }
  body[data-tool-page="grapes"] .grape-sticker-grid button { width:min(82%,56px); }
}

/* 화면 비율이 달라져도 1~50개의 포도알이 그리드 안에 끝까지 들어오도록 합니다. */
body[data-tool-page="grapes"] .grape-praise-board { height:100%; min-height:0; max-height:100%; padding:6px 8px 8px; }
body[data-tool-page="grapes"] .grape-praise-head h2 { margin:0 0 2px; font-size:clamp(20px,2.8vw,31px); }
body[data-tool-page="grapes"] .grape-praise-head>b { padding:2px 9px 3px; font-size:10px; }
body[data-tool-page="grapes"] .grape-praise-main { min-height:0; margin-top:4px; overflow:hidden; }
body[data-tool-page="grapes"] .grape-sticker-area { height:100%; min-height:0; overflow:hidden; padding:5px; }
body[data-tool-page="grapes"] .grape-board-tools { min-height:29px; margin-bottom:4px; }
body[data-tool-page="grapes"] .grape-sticker-grid { grid-template-columns:repeat(var(--grape-columns,4),minmax(0,1fr)); grid-template-rows:repeat(var(--grape-rows,1),minmax(0,1fr)); grid-auto-flow:row; gap:var(--grape-gap,4px); padding:var(--grape-padding,6px); overflow:hidden; }
body[data-tool-page="grapes"] .grape-sticker-grid button { width:var(--grape-dot-size,36px); height:var(--grape-dot-size,36px); min-width:0; min-height:0; max-width:100%; max-height:100%; aspect-ratio:1; }

/* 빈 책상 성별 지정: 클릭할 때 갈색 → 파랑 → 빨강 순서로 전환합니다. */
.seat-canvas::before { content:none; }
.seat-desk.is-seat-boy { border-color:#7397c5; background:linear-gradient(145deg,#dfecff,#aac6e8); color:#345578; box-shadow:0 4px 0 #7397c5,0 7px 10px rgba(55,95,145,.18); }
.seat-desk.is-seat-girl { border-color:#c88dab; background:linear-gradient(145deg,#ffe5ee,#e4b4c8); color:#814761; box-shadow:0 4px 0 #c88dab,0 7px 10px rgba(138,70,100,.18); }
.seat-desk.is-seat-boy::after,.seat-desk.is-seat-girl::after { position:absolute; right:5px; bottom:4px; z-index:2; width:13px; height:13px; border:1px solid rgba(255,255,255,.82); border-radius:50%; background:rgba(255,255,255,.76); color:inherit; font-family:Arial,sans-serif; font-size:9px; font-weight:700; line-height:13px; text-align:center; }
.seat-desk.is-seat-boy::after { content:"남"; }
.seat-desk.is-seat-girl::after { content:"여"; }

.checklist-save-manager { display:flex; align-items:end; justify-content:space-between; gap:8px; margin:8px 0 10px; padding:8px 10px; border:1px solid #d7e6e3; border-radius:12px; background:rgba(248,253,251,.9); }
.checklist-save-manager label { display:grid; flex:1 1 180px; gap:3px; color:#54716e; font-size:12px; }
.checklist-save-manager select { min-width:0; height:31px; padding:0 9px; border:1px solid #c7ddda; border-radius:8px; background:#fff; color:#375b59; font:inherit; }
.checklist-save-manager button { flex:0 0 auto; }
@media(max-width:599px) { .checklist-save-manager { align-items:stretch; flex-direction:column; } }

/* 좁은 데스크톱·사이드패널에서는 자리뽑기 조작부가 여러 줄을 차지하지 않게 합니다. */
@media(min-width:600px) and (max-width:760px) {
  body[data-tool-page="seating"] .seating-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 8px; }
  body[data-tool-page="seating"] .seating-roster-summary { grid-template-columns:auto auto; min-width:0; }
  body[data-tool-page="seating"] .desk-count-controls { margin:0; }
  body[data-tool-page="seating"] .seating-actions { grid-column:1 / -1; flex-wrap:nowrap; justify-content:flex-start; max-width:100%; padding:2px 0 5px; overflow-x:auto; scrollbar-width:thin; }
  body[data-tool-page="seating"] .seating-actions > * { flex:0 0 auto; }
  body[data-tool-page="seating"] .seating-room-layout { min-height:0; }
  body[data-tool-page="seating"] .seat-canvas-frame { min-height:0; }
  body[data-tool-page="seating"] .seat-canvas { min-height:0; }
}

/* 자리뽑기 저장 슬롯 */
.seating-slot-manager { display:flex; align-items:center; gap:5px; padding:5px 6px; border:1px solid #e4cdbc; border-radius:11px; background:#fffaf6; color:#8b5d46; white-space:nowrap; }
.seating-slot-manager>span { font-size:10px; }
.seating-slot-tabs { display:flex; gap:3px; }
.seat-slot { display:grid; place-items:center; width:24px; height:24px; padding:0; border:1px solid #dbc3b0; border-radius:7px; background:#fffefa; color:#9b705a; font-family:Arial,sans-serif!important; font-size:11px; font-weight:700; }
.seat-slot.is-saved { border-color:#bb8158; background:#f6dfce; color:#874827; }
.seat-slot.is-selected { box-shadow:0 0 0 2px rgba(218,117,66,.24); transform:translateY(-1px); }
.seating-slot-manager .secondary-action { padding:6px 7px; font-size:10px; }
.seating-slot-manager button:disabled { opacity:.42; }

/* 학생 명단 확인의 자리 배치 보기 */
.checklist-view-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 1px; }
.checklist-view-controls>div { display:flex; gap:5px; }
.checklist-view-controls button { padding:6px 10px; border:1px solid #c8dfdd; border-radius:999px; background:#f8fcfb; color:#5d8582; font-family:"Jua Local",sans-serif; font-size:11px; }
.checklist-view-controls button.is-active { border-color:#3c898c; background:#3c898c; color:#fff; }
.checklist-view-controls .checklist-reset-checks { flex:0 0 auto; min-width:86px; border-color:#e7c8bd; background:#fff6f1; color:#a45d47; white-space:nowrap; }
.checklist-view-controls .checklist-reset-checks:hover:not(:disabled) { background:#ffe9df; }
.checklist-view-controls button:disabled { cursor:not-allowed; opacity:.45; }
.checklist-view-controls label { display:flex; align-items:center; gap:5px; margin:0; color:#607b78; font-size:11px; white-space:nowrap; }
.checklist-view-controls select { width:auto; min-width:105px; padding:6px 8px; border-radius:8px; font-size:11px; }
.student-check-grid.is-seat-layout { display:block; overflow:auto; padding:0; }
.seat-check-layout { position:relative; min-height:330px; height:100%; overflow:hidden; border:1px solid #c9dedb; border-radius:16px; background:linear-gradient(90deg,rgba(87,144,141,.07) 1px,transparent 1px),linear-gradient(rgba(87,144,141,.07) 1px,transparent 1px),#fbfffe; background-size:26px 26px; }
.seat-check-layout::before { content:"선생님"; position:absolute; z-index:1; top:12px; left:50%; display:grid; place-items:center; width:88px; height:25px; border:1px solid #a97651; border-radius:7px; background:linear-gradient(145deg,#e5b47c,#bd7b4c); color:#fff9e9; font-size:11px; transform:translateX(-50%); }
.seat-check-desk { --seat-x:50%; --seat-y:50%; position:absolute; top:var(--seat-y); left:var(--seat-x); display:grid; grid-template-rows:18px 1fr; place-items:center; width:clamp(72px,9.2vw,106px); aspect-ratio:1.17; padding:0; border:2px solid #7397c5; border-radius:8px 8px 12px 12px; background:linear-gradient(145deg,#dfecff,#aac6e8); color:#345578; box-shadow:0 4px 0 #7397c5,0 7px 10px rgba(55,95,145,.18); cursor:pointer; transform:translate(-50%,-50%); transition:transform .15s,filter .15s,box-shadow .15s; }
.seat-check-desk:hover { filter:brightness(1.04); transform:translate(-50%,-50%) scale(1.04); }
.seat-check-desk b { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.75); color:#6885aa; font-family:Arial,sans-serif!important; font-size:10px; }
.seat-check-desk span { width:calc(100% - 8px); overflow:hidden; padding-bottom:4px; font-size:clamp(14px,1.8vw,20px); line-height:1; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.seat-check-desk.is-checked { border-color:#4a9a72; background:linear-gradient(145deg,#ddf4e1,#a8d7ae); color:#2b6b4a; box-shadow:0 4px 0 #4a9a72,0 7px 10px rgba(43,105,74,.2); }
.seat-check-desk.is-checked::after { content:"✓"; position:absolute; right:-7px; top:-9px; display:grid; place-items:center; width:24px; height:24px; border:2px solid #fff; border-radius:50%; background:#319264; color:#fff; font-family:Arial,sans-serif!important; font-size:15px; font-weight:700; box-shadow:0 2px 5px rgba(38,102,70,.28); }
.seat-check-desk.is-empty { border-color:#c7b59f; background:linear-gradient(145deg,#f3e9de,#ddc9b3); color:#8c715d; cursor:default; box-shadow:0 4px 0 #b89a81,0 7px 10px rgba(89,65,46,.12); }
.seat-check-desk.is-empty:hover { filter:none; transform:translate(-50%,-50%); }

@media(min-width:600px) and (max-width:760px) {
  body[data-tool-page="seating"] .seating-slot-manager { grid-column:1 / -1; overflow-x:auto; }
  .checklist-view-controls { align-items:flex-start; flex-direction:column; gap:6px; }
  .seat-check-layout { min-height:300px; }
}

@media(max-width:599px) {
  .seating-slot-manager { max-width:100%; overflow-x:auto; }
  .checklist-view-controls { align-items:flex-start; flex-direction:column; gap:7px; }
  .seat-check-layout { min-height:420px; }
}

@media(max-width:599px) {
  body[data-tool-page="grapes"] .grape-praise-board { min-height:0; }
  body[data-tool-page="grapes"] .grape-sticker-area { min-height:0; }
}

/* 자리뽑기와 칭찬판은 수업 중 멀리서도 보기 좋게, 주 작업 영역을 최우선으로 사용합니다. */
@media(min-width:600px) {
  body[data-tool-page="seating"] .tool-page-shell { width:min(1500px,calc(100% - 24px)); }
  body[data-tool-page="seating"] .tool-workspace { padding:7px 8px 8px; }
  body[data-tool-page="seating"] .seating-studio { gap:6px; }
  body[data-tool-page="seating"] .seating-toolbar { padding:6px 8px; }
  body[data-tool-page="seating"] .seating-actions { gap:5px; }
  body[data-tool-page="seating"] .seating-actions .primary-action,body[data-tool-page="seating"] .seating-actions .secondary-action { padding:7px 9px; font-size:11px; } body[data-tool-page="seating"] #randomSeats { min-width:102px; padding-right:13px; padding-left:13px; text-align:center; }
  body[data-tool-page="seating"] .seating-roster-summary small { display:none; }
  body[data-tool-page="seating"] .seat-canvas-frame { padding:6px; border-radius:17px; }
  body[data-tool-page="seating"] .seat-canvas-help { display:none; }
  body[data-tool-page="seating"] .seating-note { min-height:14px; font-size:11px; }

  body[data-tool-page="grapes"] .tool-workspace { padding:9px; }
  body[data-tool-page="grapes"] .grape-praise-board { height:100%; max-height:100%; padding:clamp(12px,1.8vw,22px); }
  body[data-tool-page="grapes"] .grape-praise-head p { display:none; }
  body[data-tool-page="grapes"] .grape-praise-head h2 { margin:0 0 5px; font-size:clamp(31px,3.6vw,47px); }
  body[data-tool-page="grapes"] .grape-praise-head>b { padding:5px 16px; font-size:clamp(11px,1.3vw,15px); }
  body[data-tool-page="grapes"] .grape-praise-main { margin-top:8px; gap:clamp(9px,1.8vw,22px); overflow:hidden; }
  body[data-tool-page="grapes"] .grape-sticker-area { overflow:hidden; padding:clamp(8px,1.3vw,14px); border-radius:18px; }
  body[data-tool-page="grapes"] .grape-board-tools { gap:8px; margin-bottom:5px; }
  body[data-tool-page="grapes"] .grape-progress strong { font-size:clamp(19px,2.2vw,27px); }
  body[data-tool-page="grapes"] .grape-sticker-grid { gap:clamp(4px,.8vw,9px); padding:clamp(4px,.8vw,9px); }
  body[data-tool-page="grapes"] .grape-sticker-grid button { max-width:min(58px,7.2vh); }
  body[data-tool-page="grapes"] .grape-praise-actions { margin-top:5px; }
  body[data-tool-page="grapes"] .grape-praise-actions .primary-action,body[data-tool-page="grapes"] .grape-praise-actions .secondary-action { padding:6px 10px; font-size:11px; }
  body[data-tool-page="grapes"] .grape-help { margin-top:4px; font-size:9px; }
}

/* Final checklist and board display overrides. */
body[data-tool-page="checklist"] .seat-check-desk { border-color:#c79031; background:linear-gradient(145deg,#fff3b9,#ebc968); color:#72501e; box-shadow:0 4px 0 #ca9636,0 7px 10px rgba(145,100,30,.18); }
body[data-tool-page="checklist"] .seat-check-desk b { color:#94713b; }
body[data-tool-page="checklist"] .seat-check-desk.is-checked { border-color:#4a9a72; background:linear-gradient(145deg,#ddf4e1,#a8d7ae); color:#2b6b4a; box-shadow:0 4px 0 #4a9a72,0 7px 10px rgba(43,105,74,.2); }
body[data-tool-page="checklist"] .seat-check-desk.is-empty { border-color:#c7b59f; background:linear-gradient(145deg,#f3e9de,#ddc9b3); color:#8c715d; box-shadow:0 4px 0 #b89a81,0 7px 10px rgba(89,65,46,.12); }
body[data-tool-page="board"] .board-editor-layout { grid-template-columns:minmax(0,1fr); }
body[data-tool-page="board"] .board-editor-layout.is-archive-open { grid-template-columns:minmax(0,1fr) clamp(220px,22vw,285px); }
body[data-tool-page="board"] .board-archive[hidden] { display:none; }
body[data-tool-page="board"] .board-toolbar>div { flex-wrap:wrap; justify-content:flex-end; }
@media(max-width:700px) { body[data-tool-page="board"] .board-editor-layout.is-archive-open { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; } }

/* 목표 수에 맞춰 정사각형에 가깝게 다시 정렬되는 포도알 칭찬판 */
body[data-tool-page="grapes"] .grape-sticker-grid { display:grid; grid-template-columns:repeat(var(--grape-columns,5),minmax(0,1fr)); grid-template-rows:repeat(var(--grape-rows,5),minmax(0,1fr)); grid-auto-flow:row; align-content:stretch; align-items:center; justify-items:center; gap:var(--grape-gap,8px); width:100%; height:100%; min-height:0; margin:0; padding:var(--grape-padding,10px); overflow:hidden; }
body[data-tool-page="grapes"] .grape-sticker-grid button { width:var(--grape-dot-size,40px); height:var(--grape-dot-size,40px); min-width:0; min-height:0; max-width:100%; max-height:100%; aspect-ratio:1; }

/* 작은 기본 숫자 화살표 대신 넉넉한 증감 버튼을 제공합니다. */
.timer-number-control { display:inline-flex; align-items:center; gap:4px; }
.timer-number-control button,.grape-target-stepper button { display:grid; place-items:center; width:31px; height:31px; padding:0; border:1px solid #b9cfb5; border-radius:8px; background:#f5fbf2; color:#386b46; font-family:Arial,sans-serif!important; font-size:22px; line-height:1; }
.timer-number-control button:hover,.grape-target-stepper button:hover { background:#e6f4e2; }
.timer-number-control input { width:45px !important; min-width:45px; appearance:textfield; -moz-appearance:textfield; }
.timer-number-control input::-webkit-inner-spin-button,.timer-number-control input::-webkit-outer-spin-button,.grape-target-stepper input::-webkit-inner-spin-button,.grape-target-stepper input::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; }
.timer-number-control b { color:#53775a; font-size:13px; font-weight:400; }
.grape-target-stepper { display:inline-flex; align-items:center; gap:3px; }
.grape-target-stepper button { width:28px; height:28px; border-color:#d6bee4; border-radius:7px; background:#fbf7fe; color:#704493; font-size:20px; }
.grape-target-stepper input { width:37px !important; min-width:37px; padding:3px 1px !important; appearance:textfield; -moz-appearance:textfield; }

@media(max-width:599px) { .timer-number-control { gap:3px; }.timer-number-control button { width:29px; height:29px; }.timer-number-control input { width:39px !important; min-width:39px; } }

/* 원형 진행률을 바로 시작·일시정지할 수 있는 큰 버튼으로 사용합니다. */
body[data-tool-page="timer"] button.timer-progress { padding:0; border:0; cursor:pointer; }
body[data-tool-page="timer"] .timer-progress::after,body[data-tool-page="timer"] .timer-progress span { pointer-events:none; }
body[data-tool-page="timer"] .timer-progress:hover { filter:brightness(1.03); transform:scale(1.035); }
body[data-tool-page="timer"] .timer-progress.is-running { box-shadow:0 6px 17px rgba(57,129,72,.24); }
body[data-tool-page="timer"] .timer-progress:focus-visible { outline:4px solid rgba(96,157,105,.42); outline-offset:5px; }

/* 전체화면에서도 숫자 크기는 유지하고, 아래쪽 조작 버튼만 작게 남깁니다. */
body[data-tool-page="timer"].presentation-mode .timer-main-stage { position:relative; }
body[data-tool-page="timer"].presentation-mode .timer-actions { position:absolute; bottom:clamp(18px,3vw,42px); left:50%; z-index:2; display:flex !important; gap:7px; margin:0; transform:translateX(-50%); }
body[data-tool-page="timer"].presentation-mode .timer-actions button { padding:7px 11px; border-radius:10px; font-size:12px; white-space:nowrap; }
body[data-tool-page="timer"].presentation-mode .timer-actions .tool-fullscreen-toggle { padding:7px 10px; }

/* 현재 버전의 로컬 저장 방식을 짧고 분명하게 안내합니다. */
.local-save-notice { grid-column:1 / -1; margin-top:2px; padding:12px 15px; border:1px dashed #cfbda8; border-radius:14px; background:rgba(255,250,242,.72); color:#776454; }
.local-save-notice strong { display:block; margin-bottom:5px; color:#624735; font-size:13px; }
.local-save-notice p { margin:3px 0; font-size:11px; line-height:1.55; }
.local-save-notice b { color:#905642; font-weight:400; }
@media(max-width:760px) { .local-save-notice { margin-top:0; padding:11px 12px; }.local-save-notice p { font-size:10px; } }

body[data-tool-page="data"] { --tool-accent:#5f6f9f; --tool-accent-soft:#eef1fb; }
.data-management-card { display:flex; flex-direction:column; justify-content:center; }
.data-management-card>p { margin:0 0 18px; color:#73675e; font-size:13px; line-height:1.6; }
.data-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:4px 0 16px; }
.data-action-button { display:flex; align-items:flex-start; flex-direction:column; min-height:154px; padding:17px; border:1px solid #d8ddec; border-radius:17px; background:linear-gradient(145deg,#fff,#f4f6ff); color:#424b6d; text-align:left; box-shadow:0 6px 14px rgba(67,76,111,.08); transition:transform .16s,box-shadow .16s; }
.data-action-button:hover { transform:translateY(-3px); box-shadow:0 10px 20px rgba(67,76,111,.13); }
.data-action-button>span { display:grid; place-items:center; width:44px; height:44px; margin-bottom:13px; border-radius:14px; background:#eef1fb; font-size:24px; }
.data-action-button b { color:#384260; font-size:19px; }
.data-action-button small { margin-top:7px; color:#6f7692; font-size:11px; line-height:1.45; }
.data-action-button.import-data { border-color:#cfe2d2; background:linear-gradient(145deg,#fff,#f4fbf3); color:#3d6849; }.data-action-button.import-data>span { background:#e8f5e8; }.data-action-button.import-data b { color:#3d6849; }
.data-action-button.reset-data { border-color:#efd0c6; background:linear-gradient(145deg,#fff,#fff1ed); color:#914f3e; }.data-action-button.reset-data>span { background:#ffe4dc; }.data-action-button.reset-data b { color:#914f3e; }
.data-safety-note { margin:0 0 12px!important; padding:12px 14px; border:1px dashed #d3c4b5; border-radius:13px; background:#fffaf2; color:#7a6658!important; font-size:11px!important; }
@media(max-width:760px) { .data-action-grid { grid-template-columns:1fr; }.data-action-button { min-height:116px; } }

/* 홈화면 설정에서는 인사말과 빠른 링크를 한 카드에서 바로 관리합니다. */
.quick-link-settings { display:grid; grid-column:1 / -1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:10px; border:1px dashed #d4c2ad; border-radius:13px; background:rgba(255,252,246,.68); }
.quick-link-settings>div { grid-column:1 / -1; display:flex; align-items:baseline; gap:9px; }.quick-link-settings h4 { margin:0; color:#6b4c37; font-size:14px; }.quick-link-settings p { margin:0; color:#897568; font-size:11px; }
.desktop-shortcut-settings { display:grid; grid-column:1 / -1; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px; border:1px dashed #cfc4bb; border-radius:13px; background:linear-gradient(145deg,rgba(255,254,250,.9),rgba(247,241,235,.72)); }
.desktop-shortcut-settings h4 { margin:0 0 2px; color:#5f4f43; font-size:14px; }
.desktop-shortcut-settings p { margin:0; color:#827166; font-size:11px; line-height:1.4; }
.desktop-shortcut-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:7px; }
.desktop-shortcut-button { white-space:nowrap; }
.install-shortcut-button:disabled { opacity:.72; cursor:default; box-shadow:none; }
.quick-link-setting { display:grid; grid-template-columns:31px auto minmax(0,1fr); align-items:center; gap:6px; margin:0; color:#705d50; font-size:12px; white-space:nowrap; }.quick-link-setting input { min-width:0; padding:7px 8px; font-family:Arial,"Jua Local",sans-serif!important; font-size:12px; }
.quick-link-preview { position:relative; display:grid; place-items:center; width:29px; height:29px; border:1px solid rgba(116,87,64,.18); border-radius:9px; background:#fffefa; color:#5d7886; font-size:15px; box-shadow:0 2px 5px rgba(90,65,40,.08); }.quick-link-preview>b { position:absolute; right:-5px; bottom:-5px; display:grid; place-items:center; width:15px; height:15px; border:2px solid #fffaf1; border-radius:50%; background:#7755a4; color:#fff; font-family:Arial,sans-serif!important; font-size:9px; line-height:1; }
.call-sound-settings { display:grid; grid-column:1 / -1; grid-template-columns:1fr minmax(185px,.65fr); align-items:center; gap:10px; padding:10px; border:1px dashed #dec58d; border-radius:13px; background:linear-gradient(145deg,rgba(255,251,235,.86),rgba(255,246,217,.68)); }
.call-sound-settings h4 { margin:0 0 2px; color:#6d4a18; font-size:14px; }
.call-sound-settings p { margin:0; color:#8a7148; font-size:11px; line-height:1.4; }
.call-sound-settings label { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; margin:0; color:#705d50; font-size:12px; }
.call-sound-settings select { min-width:0; padding:7px 9px; border:1px solid #dfc88f; border-radius:9px; background:#fffefa; color:#5f461f; font-size:12px; }
@media(max-width:760px) { .quick-link-settings,.call-sound-settings,.desktop-shortcut-settings { grid-template-columns:1fr; }.quick-link-setting { grid-template-columns:31px 47px minmax(0,1fr); }.quick-link-settings>div { align-items:flex-start; flex-direction:column; gap:2px; }.desktop-shortcut-actions { justify-content:stretch; }.desktop-shortcut-button { width:100%; } }

/* 도구 모음: 작은 수업 활동 도구를 집 모양 테마 안에서 바로 열 수 있게 구성합니다. */
body[data-tool-page="toolbox"] { --tool-accent:#587284; --tool-accent-soft:#edf4f6; }
body[data-tool-page="wheel"] { --tool-accent:#d57a44; --tool-accent-soft:#fff0e3; }
body[data-tool-page="ladder"] { --tool-accent:#5d83b4; --tool-accent-soft:#edf5ff; }
.toolbox-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; min-height:520px; align-content:center; }
.toolbox-card { position:relative; display:grid; grid-template-columns:112px minmax(0,1fr) 38px; align-items:center; gap:18px; min-height:210px; padding:26px; overflow:hidden; border:1px solid #d9d6ca; border-radius:24px; background:linear-gradient(145deg,#fffef9,#f5f8f7); color:#3b3028; text-decoration:none; box-shadow:0 10px 22px rgba(80,62,42,.09); transition:transform .18s, box-shadow .18s; }
.toolbox-card:hover { transform:translateY(-5px); box-shadow:0 18px 30px rgba(80,62,42,.15); }
.toolbox-card>span { display:grid; place-items:center; width:104px; height:104px; border-radius:28px; background:#edf4f6; font-size:58px; filter:drop-shadow(0 5px 4px rgba(73,55,38,.13)); }
.toolbox-card b { display:block; color:#4e5967; font-size:clamp(28px,3vw,42px); letter-spacing:-1px; }
.toolbox-card small { display:block; margin-top:9px; color:#6b6259; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:14px; line-height:1.55; }
.toolbox-card>i { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#587284; color:#fff; font-family:Arial,sans-serif!important; font-style:normal; }
.toolbox-card.wheel-tool { border-color:#f0c59f; background:linear-gradient(145deg,#fffaf1,#fff0df); }
.toolbox-card.wheel-tool>span { background:#fff0df; }
.toolbox-card.wheel-tool b,.toolbox-card.wheel-tool>i { color:#9a542f; }
.toolbox-card.wheel-tool>i { background:#d57a44; color:#fff; }
.toolbox-card.wheel-tool>.toolbox-wheel-icon { position:relative; font-size:0; }
.toolbox-wheel-icon i { position:relative; display:block; width:72%; aspect-ratio:1; border:5px solid #fffaf1; border-radius:50%; background:conic-gradient(from -18deg,#e66b45 0 45deg,#f6c768 45deg 92deg,#5aa77e 92deg 142deg,#6d8fcb 142deg 195deg,#9b6ac7 195deg 252deg,#ef8d54 252deg 310deg,#e66b45 310deg 360deg); box-shadow:0 5px 12px rgba(119,74,40,.18),inset 0 0 0 2px rgba(120,68,37,.16); transform:rotate(-12deg); }
.toolbox-wheel-icon i::before { content:""; position:absolute; inset:31%; border:4px solid #fffaf1; border-radius:50%; background:linear-gradient(145deg,#fffdf7,#f4d6b4); box-shadow:0 2px 5px rgba(89,52,32,.18); }
.toolbox-wheel-icon i::after { content:""; position:absolute; top:-14px; left:50%; width:0; height:0; border-right:8px solid transparent; border-left:8px solid transparent; border-top:16px solid #7a3e29; filter:drop-shadow(0 2px 1px rgba(80,45,31,.2)); transform:translateX(-50%) rotate(12deg); }
.toolbox-card.ladder-tool { border-color:#c5d8ec; background:linear-gradient(145deg,#fbfdff,#edf5ff); }
.toolbox-card.ladder-tool>span { background:#edf5ff; }
.toolbox-card.ladder-tool b { color:#446995; }
.toolbox-card.ladder-tool>i { background:#5d83b4; }
.toolbox-card.sound-tool { border-color:#d8c7ee; background:linear-gradient(145deg,#fffaff,#f5eefc); }
.toolbox-card.sound-tool>span { background:#f5eefc; }
.toolbox-card.sound-tool b { color:#7354a0; }
.toolbox-card.sound-tool>i { background:#8463ad; }
.toolbox-card.is-muted { opacity:.64; filter:saturate(.7); }

.wheel-layout { display:grid; grid-template-columns:minmax(440px,1fr) minmax(270px,340px); gap:20px; height:100%; min-height:540px; }
.wheel-stage,.wheel-panel { min-height:0; border:1px solid #ead8c8; border-radius:24px; background:rgba(255,253,249,.88); box-shadow:inset 0 0 0 4px rgba(255,255,255,.45); }
.wheel-stage { position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto auto; place-items:center; padding:28px 24px 22px; overflow:hidden; background:radial-gradient(circle at 50% 38%,#fffdfa 0 22%,transparent 23%),linear-gradient(145deg,#fff7ed,#fffdfa); }
.wheel-panel { display:flex; flex-direction:column; padding:18px; overflow:hidden; }
.wheel-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.wheel-panel-head b { display:block; color:#8d4d30; font-size:22px; }
.wheel-panel-head small { display:block; margin-top:2px; color:#7c695b; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:11px; line-height:1.35; }
.wheel-probability-toggle { display:flex; align-items:center; gap:6px; margin:0; padding:7px 9px; border:1px dashed #e3b98f; border-radius:999px; background:#fff8ef; color:#865333; font-size:12px; white-space:nowrap; }
.wheel-probability-toggle input { width:30px; height:18px; margin:0; padding:0; accent-color:#d57a44; }
.wheel-item-list { display:grid; gap:7px; flex:1 1 auto; min-height:0; overflow:auto; padding:2px 2px 4px; scrollbar-width:thin; }
.wheel-item-row { display:grid; grid-template-columns:24px minmax(0,1fr) 0 31px; align-items:center; gap:6px; padding:6px; border:1px solid #ead7c5; border-radius:13px; background:#fffdf9; transition:border-color .18s,background .18s; }
.wheel-item-list.is-probability-on .wheel-item-row { grid-template-columns:24px minmax(0,1fr) 76px 31px; }
.wheel-item-row>b { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#fff0df; color:#b86a39; font-family:Arial,sans-serif!important; font-size:11px; }
.wheel-item-row input { min-width:0; padding:8px 9px; border-color:#e5d1bd; border-radius:9px; font-size:14px; }
.wheel-percent-field { display:flex; align-items:center; width:0; min-width:0; overflow:hidden; border:0; border-radius:9px; background:#fff8ef; opacity:0; pointer-events:none; }
.wheel-item-list.is-probability-on .wheel-percent-field { width:76px; min-width:76px; border:1px solid #e0be9e; opacity:1; pointer-events:auto; }
.wheel-percent-input { width:52px !important; min-width:52px !important; padding:8px 3px 8px 7px !important; border:0 !important; background:transparent; text-align:center; }
.wheel-percent-field span { flex:0 0 auto; padding-right:7px; color:#a5653f; font-size:13px; }
.wheel-percent-input::-webkit-inner-spin-button,.wheel-percent-input::-webkit-outer-spin-button { width:18px; height:22px; opacity:1; }
.remove-wheel-item { display:grid; place-items:center; width:31px; height:31px; padding:0; border:1px solid #ecd7c6; border-radius:9px; background:#fff7ef; color:#a05b3d; font-family:Arial,sans-serif!important; font-size:20px; line-height:1; }
.add-wheel-item { margin-top:8px; padding:10px; border:1px dashed #d9aa7f; border-radius:13px; background:#fff8ef; color:#9b5a34; font-size:14px; }
.wheel-quick-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.wheel-pointer { position:absolute; top:22px; left:50%; z-index:4; width:0; height:0; border-right:18px solid transparent; border-left:18px solid transparent; border-top:34px solid #7a3e29; border-bottom:0; filter:drop-shadow(0 3px 2px rgba(80,45,31,.22)); transform:translateX(-50%); }
.spin-wheel { --wheel-rotation:0deg; position:relative; z-index:1; display:grid; place-items:center; width:min(68vmin,610px,100%); aspect-ratio:1; overflow:hidden; border:14px solid #fff9ef; border-radius:50%; box-shadow:0 12px 24px rgba(103,70,45,.16), inset 0 0 0 4px rgba(100,58,35,.12); transform:rotate(var(--wheel-rotation)); transition:transform 3.2s cubic-bezier(.1,.78,.09,1); cursor:pointer; }
.spin-wheel::before { content:""; position:absolute; inset:10px; border:2px dashed rgba(255,255,255,.74); border-radius:50%; pointer-events:none; }
.spin-wheel.is-spinning { filter:saturate(1.08); }
.wheel-label { position:absolute; z-index:4; top:var(--label-y,50%); left:var(--label-x,50%); box-sizing:border-box; width:var(--label-width,28%); min-width:46px; max-width:190px; overflow:hidden; padding:0 4px; border:0; border-radius:0; background:transparent; color:var(--label-color,#fffdf3); font-size:var(--label-font-size,clamp(13px,2vmin,22px)); font-weight:800; letter-spacing:-.04em; line-height:1.08; text-align:left; text-overflow:ellipsis; text-shadow:var(--label-shadow,0 2px 3px rgba(54,35,22,.45)); white-space:nowrap; transform:translateY(-50%) rotate(var(--label-angle,0deg)); transform-origin:0 50%; pointer-events:none; }
.wheel-label.is-winning { color:#fff8b8; filter:drop-shadow(0 0 5px rgba(255,227,92,.88)); text-shadow:0 2px 4px rgba(60,36,22,.55),0 0 6px rgba(255,232,107,.72); }
.wheel-center { position:relative; z-index:3; display:grid; place-items:center; width:34%; aspect-ratio:1; padding:8px; border:8px solid #fff9ef; border-radius:50%; background:linear-gradient(145deg,#fffdfa,#f8e4ca); color:#82452c; box-shadow:0 5px 12px rgba(82,48,27,.18); text-align:center; transform:rotate(calc(-1 * var(--wheel-rotation))); transition:transform 3.2s cubic-bezier(.1,.78,.09,1); }
.wheel-center strong { max-width:100%; overflow:hidden; font-size:clamp(23px,3vw,38px); line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.wheel-center small { margin-top:3px; color:#926954; font-size:11px; }
.wheel-result { position:relative; z-index:5; min-height:44px; margin-top:13px; color:#744733; font-size:clamp(20px,2.5vw,31px); text-align:center; }
.wheel-result b { color:#c86438; font-size:1.18em; }
.wheel-actions { position:relative; z-index:6; justify-content:center; margin-top:7px; }
body[data-tool-page="wheel"].presentation-mode .wheel-layout { width:100%; height:100%; min-height:0; display:grid; grid-template-columns:1fr; place-items:center; gap:0; }
body[data-tool-page="wheel"].presentation-mode .wheel-stage { width:100%; height:100%; min-height:0; padding:clamp(22px,4vmin,58px); border:0; border-radius:0; background:radial-gradient(circle at 50% 45%,#fffdfa 0 26%,#fff3e4 70%,#f3d4b8 100%); box-shadow:none; }
body[data-tool-page="wheel"].presentation-mode .wheel-panel,body[data-tool-page="wheel"].presentation-mode .wheel-result,body[data-tool-page="wheel"].presentation-mode .wheel-actions { display:none !important; }
body[data-tool-page="wheel"].presentation-mode .wheel-pointer { top:clamp(16px,3vmin,32px); border-right-width:clamp(18px,2.6vmin,30px); border-left-width:clamp(18px,2.6vmin,30px); border-top-width:clamp(34px,5vmin,58px); }
body[data-tool-page="wheel"].presentation-mode .spin-wheel { width:min(88vmin,900px); border-width:clamp(12px,2vmin,22px); }
body[data-tool-page="wheel"].presentation-mode .wheel-label { font-size:clamp(16px,2.5vmin,30px); max-width:260px; }
body[data-tool-page="wheel"].presentation-mode .wheel-center strong { font-size:clamp(28px,4.2vmin,54px); }
body[data-tool-page="wheel"].presentation-mode .wheel-center small { font-size:clamp(12px,1.5vmin,18px); }

.ladder-layout { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:12px; height:100%; min-height:540px; }
.ladder-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #d4e1ee; border-radius:18px; background:rgba(250,253,255,.9); }
.ladder-count-control { display:flex; align-items:center; gap:8px; padding:5px; border:1px solid #c6d8e8; border-radius:13px; background:#fff; }
.ladder-count-control button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:10px; background:#eaf3ff; color:#416993; font-family:Arial,sans-serif!important; font-size:26px; }
.ladder-count-control b { min-width:54px; color:#456991; font-size:18px; text-align:center; }
.ladder-toolbar .action-row { margin:0; justify-content:flex-end; }
.ladder-board { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; min-height:0; padding:12px; border:1px solid #c9dbea; border-radius:24px; background:linear-gradient(145deg,#fbfdff,#edf5ff); box-shadow:inset 0 0 0 5px rgba(255,255,255,.5); }
.ladder-inputs { display:grid; grid-template-columns:repeat(var(--ladder-count,4),minmax(0,1fr)); gap:6px; }
.ladder-entry { display:grid; gap:4px; margin:0; min-width:0; }
.ladder-entry input { min-width:0; padding:8px 7px; border-color:#bfd3e6; border-radius:10px; background:#fff; color:#324d69; font-size:clamp(12px,1.2vw,15px); text-align:center; }
.ladder-entry button { padding:5px 4px; border:0; border-radius:9px; background:#5d83b4; color:#fff; font-size:11px; }
.ladder-entry button:disabled { cursor:not-allowed; background:#b8c8d8; color:#f6fbff; opacity:.62; }
.ladder-entry.is-fixed { align-self:stretch; }
.ladder-start-button,.ladder-result-fixed { display:grid; place-items:center; width:100%; min-height:43px; padding:9px 7px; overflow:hidden; border-radius:13px; font-size:clamp(14px,1.35vw,18px); line-height:1.15; text-align:center; text-overflow:ellipsis; white-space:nowrap; box-shadow:0 3px 0 rgba(67,103,141,.18),0 6px 10px rgba(67,103,141,.1); }
.ladder-start-button { border:1px solid #9fbee0 !important; background:linear-gradient(145deg,#ffffff,#e6f2ff) !important; color:#315a84 !important; cursor:pointer; }
.ladder-start-button:hover { filter:brightness(1.03); transform:translateY(-1px); }
.ladder-result-fixed { border:1px solid #dcc49d; background:linear-gradient(145deg,#fff9ec,#f2dec0); color:#795b31; }
.result-entry.is-highlight .ladder-result-fixed { border-color:#f2a640; background:linear-gradient(145deg,#fff7bd,#ffd66e); color:#6d4618; animation:ladder-result-spark .85s ease-in-out infinite; box-shadow:0 0 0 4px rgba(255,205,88,.22),0 0 22px rgba(238,159,47,.35); }
.result-entry input { border-color:#d9cbb3; background:#fffaf1; color:#725a37; }
.ladder-canvas-wrap { position:relative; min-height:0; overflow:hidden; border:1px solid rgba(109,139,166,.28); border-radius:18px; background:linear-gradient(90deg,rgba(84,122,154,.06) 1px,transparent 1px),linear-gradient(rgba(84,122,154,.06) 1px,transparent 1px),#fffefa; background-size:28px 28px; }
.ladder-canvas-wrap svg { display:block; width:100%; height:100%; min-height:300px; }
.ladder-cover { position:absolute; inset:0; z-index:2; display:grid; place-items:center; align-content:center; gap:10px; padding:20px; background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.98),rgba(246,252,255,.94) 45%,rgba(226,238,250,.96)); color:#456991; text-align:center; transition:opacity .28s ease, transform .28s ease; }
.ladder-cover strong { display:grid; place-items:center; width:86px; height:86px; border:3px dashed #9eb8d3; border-radius:50%; background:#fff; color:#6d8baa; font-family:Arial,sans-serif!important; font-size:54px; line-height:1; box-shadow:0 8px 16px rgba(73,104,134,.12); animation:ladder-cover-pulse 1.5s ease-in-out infinite; }
.ladder-cover span { font-size:clamp(18px,2.3vw,31px); line-height:1.35; }
.ladder-canvas-wrap:not(.is-covered) .ladder-cover { opacity:0; pointer-events:none; transform:scale(1.04); }
.ladder-line { stroke-linecap:round; }
.ladder-vertical { stroke:#88a2bc; stroke-width:7; opacity:.7; }
.ladder-bridge { stroke:#db9b58; stroke-width:10; }
.ladder-path { fill:none; stroke:var(--path-color,#d86945); stroke-linecap:round; stroke-linejoin:round; stroke-width:14; opacity:.92; filter:drop-shadow(0 3px 3px rgba(74,63,50,.2)); animation:ladder-draw .55s ease-out both; }
.ladder-path.is-all { stroke-width:8; opacity:.42; filter:none; }
.ladder-path.is-selected { stroke-width:16; opacity:.96; }
.ladder-message { min-height:28px; margin:0; color:#3f668e; font-size:clamp(16px,2vw,23px); text-align:center; }
.ladder-message b { color:#d06a3e; }
@keyframes ladder-draw { from { stroke-dasharray:1 28; opacity:.15; } to { stroke-dasharray:900 0; } }
@keyframes ladder-cover-pulse { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes ladder-result-spark { 0%,100% { transform:translateY(0) scale(1); filter:brightness(1); } 50% { transform:translateY(-2px) scale(1.04); filter:brightness(1.08); } }

@media(max-width:860px) {
  .toolbox-menu { grid-template-columns:1fr; min-height:0; }
  .toolbox-card { min-height:160px; grid-template-columns:82px minmax(0,1fr) 34px; padding:18px; }
  .toolbox-card>span { width:78px; height:78px; font-size:44px; }
  .wheel-layout { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) minmax(0,250px); min-height:0; }
  .wheel-stage { min-height:360px; padding:18px 14px 14px; }
  .spin-wheel { width:min(78vw,330px,46vh); border-width:10px; }
  .wheel-item-list { max-height:220px; }
  .ladder-toolbar { align-items:stretch; flex-direction:column; }
  .ladder-toolbar .action-row { justify-content:flex-start; }
}

@media(max-width:599px) {
  .spin-wheel { width:min(82vw,310px,44vh); border-width:10px; }
  .wheel-label { font-size:var(--label-font-size,11px); }
  .ladder-board { padding:8px; }
  .ladder-inputs { gap:4px; }
  .ladder-entry input { padding:7px 4px; font-size:11px; }
  .ladder-entry button { font-size:10px; }
}