:root{color-scheme:light;--ink:#26392e;--leaf:#41634e;--border:#d6ded3;--paper:#fbfaf5;--muted:#506356}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#eef0e8;color:var(--ink);font:16px/1.55 'Malgun Gothic',system-ui,sans-serif}
header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px clamp(14px,5vw,64px);background:var(--paper);border-bottom:1px solid var(--border)}
h1{font-size:clamp(19px,3vw,26px)}
h1,h2,h3,p{margin:0 0 .5rem}
header h1{margin:0}
.brand-logo{display:block;width:clamp(135px,36vw,195px);height:auto}
body:has(#welcome:not([hidden])) header{flex-direction:column;justify-content:center;gap:6px}
main{max-width:1260px;margin:auto;padding:24px clamp(12px,3vw,38px)}
.card{background:var(--paper);border:1px solid var(--border);border-radius:16px;padding:16px}
.welcome{max-width:560px;margin:clamp(20px,6vh,64px) auto;padding:clamp(12px,4vw,28px);text-align:center}
.welcome h2{font-size:22px}
.welcome-intro{font-size:clamp(14px,4vw,16px);word-break:keep-all;overflow-wrap:anywhere}
.welcome-intro span{display:block;margin-top:4px}
form{display:grid;justify-items:start;gap:10px;margin-top:12px}
#entry{justify-items:center;gap:12px;margin-top:24px}
.entry-label{margin-inline:auto;font-weight:600}
.entry-label::before{content:"•";margin-inline-end:.42em;color:var(--leaf);font-size:.75em}
.character-picker{border:0;padding:0;margin:0 0 6px;width:min(100%,390px);min-width:0}
.character-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.character-options label{display:block;min-width:0;cursor:pointer}
.character-card{display:grid;justify-items:center;padding:8px 4px;border:1px solid var(--border);border-radius:12px;background:var(--paper)}
.character-card img{display:block;width:min(100%,88px);height:auto}
.character-options input:checked + .character-card{background:#e4ebda;border-color:var(--leaf)}
.character-options input:focus-visible + .character-card{outline:2px solid var(--leaf);outline-offset:2px}
.nickname-field{display:grid;gap:4px;width:min(100%,250px)}
#nickname{text-align:center;width:100%}
input,button,select{font:inherit;color:inherit}
input:not([type=radio],[type=checkbox]),select{border:1px solid var(--border);border-radius:8px;background:white;padding:8px;max-width:100%}
button{border:1px solid #adbaaa;border-radius:9px;background:#fffef9;padding:8px 11px;min-height:44px;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #466d50;outline-offset:2px}
button:disabled{opacity:.5;cursor:default}
.primary{background:var(--leaf);color:white;border-color:var(--leaf)}
.room-header,.actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.room-header{justify-content:space-between}
.room-header .actions{position:relative}
.sound-settings summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid #adbaaa;border-radius:9px;background:#fffef9;cursor:pointer}
.sound-settings summary::-webkit-details-marker{display:none}
.sound-settings summary:focus-visible{outline:3px solid #466d50;outline-offset:2px}
.sound-settings .sound-on,.sound-settings[data-audible] .sound-off{display:none}
.sound-settings[data-audible] .sound-on{display:inline}
.sound-panel{position:absolute;z-index:5;top:calc(100% + 6px);right:0;width:min(240px,100%);padding:12px;display:grid;gap:6px;box-shadow:0 6px 18px #29392e1a}
.sound-panel label{font-size:14px}
.sound-panel select,.sound-panel input{width:100%}
.sound-panel input[type=range]{padding:0;accent-color:var(--leaf)}
.sound-panel #background-status{margin-top:4px}
.zone-controls{display:flex;flex-wrap:wrap;gap:6px}
.zone-controls button[aria-pressed=true]{border-color:var(--leaf);background:#e0eccd;color:var(--ink)}
.room-header{margin-bottom:12px}
.room-header p{margin:0;color:var(--muted)}
.room-header .room-intro{font-size:clamp(15px,2.2vw,19px);font-weight:400;line-height:1.65;color:var(--ink)}
#count{font-size:14px;font-variant-numeric:tabular-nums}
#info{margin-bottom:12px}
#info h4{margin:16px 0 .5rem}
#materials{margin-top:10px}
#daily-english{margin-top:10px}
.english-topic{display:block;margin-bottom:2px;color:var(--leaf);font-size:13px;font-weight:700}
.english-words{list-style:none;margin:0;padding:0;overflow-wrap:anywhere}
.english-words li{padding:8px 0}
.english-words li + li{border-top:1px solid var(--border)}
.english-words strong{margin-inline-end:8px}
.english-korean{font-weight:600}
.english-words p{margin:2px 0 0;color:var(--muted);font-size:14px}
.materials-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--border)}
.materials-tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-size:clamp(15px,2vw,18px);padding:8px 3px}
.materials-tabs button[aria-selected=true]{border-bottom-color:var(--leaf);color:var(--ink);font-weight:700}
.materials-links{margin:8px 0 0;padding-inline-start:1.2em;list-style-type:disc}
.materials-links li::marker{color:var(--muted);font-size:.75em}
.materials-links a{display:block;min-height:44px;padding:10px 0;color:var(--ink);text-decoration:none}
.materials-links a:hover,.materials-links a:focus-visible{font-weight:700}
.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:18px 0 0;padding:0;list-style:none}
.book-grid a{display:grid;justify-items:center;gap:10px;padding:0 0 8px;color:var(--ink);text-align:center;text-decoration:none}
.book-grid a:hover,.book-grid a:focus-visible{font-weight:700}
.book-grid img{display:block;width:min(100%,185px);height:auto;aspect-ratio:5/7;object-fit:contain}
.scene{height:clamp(340px,53vh,560px);background:radial-gradient(ellipse at 50% 65%,#e0e8d9,#f1f1e8);position:relative;overflow:hidden;margin:10px 0;border-radius:12px;touch-action:pan-y}
canvas{display:block;width:100%;height:100%}
#lounge-tree{position:absolute;transform:translate(-50%,-100%);pointer-events:none}
.view-toggle{display:grid;position:absolute;right:10px;bottom:10px;z-index:1;width:44px;padding:0;place-items:center;border:0;border-radius:50%;background:#18241dd6;color:white}
.view-toggle .collapse-icon,.space.large .view-toggle .expand-icon{display:none}
.space.large .view-toggle .collapse-icon{display:inline}
.seat{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:transparent}
.scene:not(.fallback) .seat:not(.occupied){pointer-events:none}
.seat-caption{display:none}
.seat.occupied .seat-caption,.scene.fallback .seat-caption{display:block;position:absolute;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 6px;border:0;border-radius:5px;background:rgb(255 255 255 / 76%);font-size:12px;pointer-events:none}
.seat[hidden]{display:none}
.seat-action{position:absolute;z-index:3;white-space:nowrap;min-height:44px;padding:6px 10px;font-size:13px;box-shadow:0 2px 8px #283d2926}
.scene.fallback{height:auto;min-height:210px;padding:12px 12px 64px}
.scene.fallback canvas{display:none}
.scene.fallback #seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.scene.fallback .seat{position:static;transform:none;width:100%;border:1px solid #adbaaa;background:#fffef9}
.scene.fallback .seat-caption{position:static;max-width:100%;border:0}
.scene.fallback .seat[aria-pressed=true]{outline:2px solid var(--leaf);outline-offset:-2px}
.scene.fallback .seat::before{display:none}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
#goal-form{grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-items:stretch}
#goal-form input{width:100%;min-width:0;min-height:44px}
#save-goal{white-space:nowrap}
.character-count{justify-self:end;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.goal-count{grid-column:1;margin-top:-6px}
#seat-status:empty{display:none}
.hint{font-size:13px;color:var(--muted)}
.bubble{position:absolute;z-index:2;width:max-content;max-width:min(235px,calc(100% - 16px));padding:7px 10px;background:#fffef9;color:var(--ink);border:1px solid #c8d4c5;border-radius:10px;margin:0;font-size:13px;line-height:1.35;overflow-wrap:anywhere;box-shadow:0 2px 7px #283d2926;pointer-events:none}
.bubble::after{content:'';position:absolute;left:var(--tail-x,50%);bottom:-5px;width:8px;height:8px;background:inherit;border-right:1px solid #c8d4c5;border-bottom:1px solid #c8d4c5;transform:translateX(-50%) rotate(45deg)}
.bubble[data-below=true]::after{top:-5px;bottom:auto;border:0;border-left:1px solid #c8d4c5;border-top:1px solid #c8d4c5}
.clock{font:36px/1.4 Consolas,monospace;margin:4px 0}
#minutes{width:73px}
.notice{position:fixed;z-index:20;bottom:16px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);background:#263b2e;color:white;padding:10px 15px;border-radius:10px;margin:0}
.space.large,.space:fullscreen{position:fixed;inset:0;z-index:10;overflow:auto;border:0;border-radius:0;display:flex;flex-direction:column;padding:12px}
.space.large .scene{flex:1 0 210px;height:auto;touch-action:none}
body.big{overflow:hidden}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:600px){
 .book-grid{grid-template-columns:1fr;gap:24px}
 .controls{grid-template-columns:1fr}
 .zone-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .zone-controls button{padding-inline:4px;font-size:13px}
 .card{padding:12px}
 .scene{height:auto;aspect-ratio:1.68}
 .scene.fallback{aspect-ratio:auto}
 .scene:not(.fallback) .seat.occupied .seat-caption{max-width:58px}
 .scene.fallback #seats{grid-template-columns:repeat(2,minmax(0,1fr))}
}