/* 기본 골격 스타일. 디자인(창문 불빛 연출·테마 3종·스티커)은 WP6에서 채운다. */
:root {
  --bg: #fbf8f2;
  --fg: #2b2620;
  --muted: #7a7064;
  --accent: #d9822b;
  --card: #ffffff;
  --line: #e8e1d5;
  --radius: 14px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #16130f; --fg: #f3ede4; --muted: #a89e90; --card: #221d17; --line: #3a332a; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  overflow-x: hidden; /* 수락 9: 375px에서 가로 스크롤 없음 */
}
main { max-width: 480px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 8px; }
.muted { color: var(--muted); font-size: 0.875rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
button, .button {
  display: inline-block; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.dual-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.dual-cta .button { display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 12px; }
input, textarea, select {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--fg); font: inherit;
}
footer { max-width: 480px; margin: 0 auto; padding: 16px; font-size: 0.8125rem; color: var(--muted); }
footer a { color: inherit; }

/* 학생 화면의 밤 교실 테마. 관리자 기본 토큰은 보존한다. */
.site { --bg:#101a2c; --fg:#f6f3eb; --muted:#b5c0d1; --accent:#f2ca78; --card:#19263b; --line:#3c4b62; color-scheme:dark; background:var(--bg); color:var(--fg); }
.site [hidden] { display:none !important; }
.site main { max-width:760px; padding:20px 20px 48px; }
.site .narrow { max-width:520px; }
.site a { color:inherit; text-underline-offset:4px; }
.site button, .site .button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border-radius:12px; color:#253044; line-height:1.5; background:var(--accent); }
.site button.secondary, .site .button.secondary { border:1px solid #64728a; background:transparent; color:var(--fg); }
.site button.danger { border:1px solid #d18d86; background:transparent; color:#ffc3b8; }
.site button:disabled { cursor:default; opacity:.5; }
.site :focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.site input, .site textarea { background:#131f32; border-color:#60718a; border-radius:10px; }
.site input:read-only { color:#c7d4e6; }
.site input[type="checkbox"], .site input[type="radio"] { width:20px; min-height:20px; margin:0; padding:0; accent-color:var(--accent); flex:0 0 20px; }
.site textarea { resize:vertical; min-height:110px; }
.site h1 { font-size:clamp(1.9rem,6vw,2.7rem); line-height:1.22; letter-spacing:-.045em; text-wrap:balance; overflow-wrap:anywhere; }
.site h2 { font-size:1.2rem; margin:0; letter-spacing:-.025em; }
.site h3 { margin:0; font-size:1rem; }
.site p { margin:8px 0 16px; }
.site .site-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 30px; }
.site .site-brand { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.9rem; text-decoration:none; }
.brand-windows { display:grid; grid-template-columns:repeat(2,5px); gap:3px; padding:5px; border:1px solid #60718a; border-radius:4px; }
.brand-windows i { width:5px; height:7px; background:#f2ca78; }
.site .date-badge { font-size:.7rem; color:var(--muted); white-space:nowrap; }
.site .eyebrow { color:var(--accent); letter-spacing:.08em; font-size:.75rem; font-weight:600; }
.site .hero { text-align:center; }
.site .hero h1 { margin-bottom:12px; }
.site .hero .intro { font-size:.93rem; color:#c3ccda; line-height:1.75; }
.scene-wrap { aspect-ratio:700 / 345; background:radial-gradient(ellipse at 50% 95%,#2b3c56,#101a2c 75%); margin-top:8px; }
.building-scene { width:100%; display:block; height:auto; }
.window-light { opacity:0; transition:opacity 180ms cubic-bezier(.23,1,.32,1); }
.window-light.is-lit { opacity:1; }
.site .window-counter { margin:0 0 12px; font-size:1rem; color:#e4e6e8; font-variant-numeric:tabular-nums; }
.site .window-counter strong { color:var(--accent); font-size:1.35rem; }
.site .dual-cta { margin:18px 0 22px; gap:10px; }
.site .dual-cta .button { min-height:76px; padding:12px 14px; font-size:.91rem; font-weight:700; }
.site .section { margin-top:32px; }
.site .section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.site .paper-panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; }
.site .field-label { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:18px 0 7px; }
.site .field-label:first-child { margin-top:0; }
.site label, .site legend { font-size:.9rem; font-weight:600; }
.site .char-count { color:var(--muted); font-size:.75rem; font-weight:400; font-variant-numeric:tabular-nums; }
.site .hint { color:var(--muted); font-size:.8rem; line-height:1.7; }
.site fieldset { margin:0; padding:0; border:0; min-width:0; }
.site .check-line { display:flex; align-items:center; gap:10px; margin-top:22px; }
.site .captcha { min-height:65px; margin:20px 0 12px; }
.site .submit { width:100%; }
.site .notice { padding:12px 14px; border-radius:10px; background:#203c3c; color:#d3efdf; font-size:.9rem; overflow-wrap:anywhere; }
.site .notice[data-error="true"] { background:#472e34; color:#ffd2c7; }
.site .notice a { font-weight:600; }
.site .wall-post { padding:18px 0; border-bottom:1px solid var(--line); }
.site .wall-post .post-body { font-size:1.05rem; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 8px; }
.site .post-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); font-size:.8rem; }
.site .post-meta button { min-height:44px; padding:7px 12px; font-size:.8rem; }
.site .load-more { width:100%; margin-top:18px; }
.site .empty { padding:28px 0; text-align:center; color:var(--muted); }
.site .theme-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.site .choice { position:relative; }
.site .choice input { position:absolute; inset:0; z-index:1; opacity:0; width:100%; height:100%; min-height:0; cursor:pointer; }
.site .choice label { display:flex; flex-direction:column; align-items:center; gap:8px; border:1px solid #64728a; border-radius:12px; padding:14px 6px; font-size:.76rem; cursor:pointer; }
.site .choice input:checked + label { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:#28364b; }
.site .choice input:focus-visible + label { outline:3px solid var(--accent); outline-offset:3px; }
.theme-swatch { width:32px; height:24px; border-radius:6px; background:var(--swatch); box-shadow:inset 0 -5px #00000012; }
.site .warning { color:#f5d798; border-left:3px solid var(--accent); padding-left:14px; font-size:.95rem; }
.site .result-links label { display:block; margin:20px 0 8px; }
.site .actions { display:flex; gap:9px; flex-wrap:wrap; margin:12px 0 20px; }
.site .actions > button, .site .actions > .button { flex:1 1 125px; font-size:.85rem; padding:10px 12px; }
.site .countdown { color:var(--accent); font-variant-numeric:tabular-nums; font-size:.85rem; min-height:1.6em; margin:14px 0; }
.site .box-surface { position:relative; display:block; width:100%; min-height:230px; border:0; border-radius:18px; overflow:hidden; background:#f2ca78; color:#283244; padding:28px; text-align:center; }
.box-surface[data-theme="1"] { background:#b6c5e9; }
.box-surface[data-theme="2"] { background:#e8b6ad; }
.box-surface::before { content:''; position:absolute; top:0; left:0; right:0; height:32px; background:#ffffff38; border-bottom:2px solid #27344722; }
.box-surface::after { content:''; position:absolute; top:0; bottom:0; width:38px; left:calc(50% - 19px); background:#a4653f30; pointer-events:none; }
.site .box-stamp { position:relative; z-index:1; display:inline-block; margin-top:52px; padding:8px 12px; font-size:.88rem; border:1px solid #28324444; border-radius:6px; }
.sticker-layer { position:absolute; inset:0; z-index:2; pointer-events:none; }
.placed-sticker { position:absolute; width:38px; height:38px; transform:translate(-50%,-50%); filter:drop-shadow(0 2px 1px #18202f20); }
.placed-sticker svg { width:100%; height:100%; }
.sticker-preview { z-index:3; opacity:.8; pointer-events:none; }
.site .sticker-options { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0 18px; }
.site .sticker-options label { padding:10px 3px; gap:5px; font-size:.7rem; }
.sticker-options svg { width:32px; height:32px; }
.site .received { font-size:1.1rem; margin:20px 0 10px; }
.site .received strong { color:var(--accent); }
.site .message-card { padding:20px; border-radius:14px; margin:14px 0; background:#faf3e5; color:#263449; overflow-wrap:anywhere; }
.site .message-card .message-body { white-space:pre-wrap; line-height:1.8; }
.site .message-card .muted { color:#596574; }
.site .message-card .secondary { color:#263449; border-color:#9da8b6; background:transparent; }
.site .message-card .danger { color:#9a3d32; border-color:#a46861; }
.site .message-card svg { width:30px; height:30px; }
.site .message-heading { display:flex; align-items:center; gap:10px; }
.site dialog { max-width:420px; width:calc(100% - 32px); padding:24px; border:1px solid #67768b; border-radius:16px; background:#19263b; color:#f6f3eb; }
.site dialog::backdrop { background:#07101acc; }
.site .site-footer { max-width:760px; padding:20px; border-top:1px solid var(--line); line-height:2; }
.site .site-footer nav { display:flex; gap:10px 18px; flex-wrap:wrap; }
.site .site-footer small { display:block; margin-top:10px; }
.copy-buffer { position:fixed; left:-1000px; top:0; }
@media (min-width:600px) { .site .hero h1 { font-size:3.15rem; } .scene-wrap { max-width:600px; margin:0 auto; } .site .dual-cta { max-width:540px; margin-left:auto; margin-right:auto; } }
@media (prefers-reduced-motion:reduce) { .window-light { transition:none; } }

/* The school activity sheets share the world's materials and calm hierarchy. */
.site { --bg:#152b2b; --fg:#f0ebdc; --muted:#b9c8bb; --accent:#e8c58a; --card:#213c36; --line:#4b6758; background:var(--bg); }
.site main { padding-top:28px; }
.site .narrow { max-width:560px; }
.site h1 { font-weight:700; font-size:clamp(1.8rem,5vw,2.5rem); letter-spacing:-.065em; }
.site .eyebrow { letter-spacing:0; font-weight:500; color:#d8bc8c; }
.site button,.site .button { border-radius:8px; transition:transform 120ms cubic-bezier(.23,1,.32,1),background 160ms ease; }
.site button:active,.site .button:active { transform:scale(.98); }
.site .paper-panel { border:1px solid #8fa68a3d; border-radius:14px; padding:24px; background:#234037; box-shadow:0 12px 36px #071e241c; }
.site input,.site textarea { background:#162f2b; border-color:#657e68; color:#f0ecdd; }
.site .box-surface { border-radius:12px; background:linear-gradient(155deg,#d7b884,#b99862); box-shadow:inset 0 -8px 0 #6e563638,0 12px 24px #081b2430; }
.box-surface[data-theme="1"] { background:linear-gradient(155deg,#b3c7cc,#809fa9); }
.box-surface[data-theme="2"] { background:linear-gradient(155deg,#e2b6a1,#c58b77); }
.box-surface::before { top:14px; left:15px; right:15px; height:calc(100% - 36px); border:1px solid #fff8e26e; border-radius:5px; background:linear-gradient(145deg,#fff9e955 0 48%,transparent 48%); transform:rotate(-3deg); }
.box-surface::after { top:26px; left:25px; width:calc(100% - 50px); bottom:30px; background:linear-gradient(33deg,transparent 49.5%,#725c3638 50%,transparent 50.6%),linear-gradient(-33deg,transparent 49.5%,#725c3638 50%,transparent 50.6%); border:1px solid #725c3638; border-radius:4px; }
.site .box-stamp { background:#f3ead2e0; border:1px solid #9e9476; color:#4d5e4b; font-size:.78rem; border-radius:3px; box-shadow:0 2px 6px #4c50341a; }
.placed-sticker{width:44px;height:44px;filter:drop-shadow(0 2px 0 #fff3d3) drop-shadow(0 4px 3px #36433833)}
.site .message-card{border-radius:3px 12px 12px 12px;border:1px solid #d7d2ba;box-shadow:0 5px 12px #071e241a;background:#f4edd9;color:#34483d}
.site .message-card .message-body{font-size:1.05rem;line-height:1.9;margin-top:14px}
.site .message-card .muted{font-size:.75rem;color:#73806b}
.embedded{color-scheme:light;background:#f3eee2}.embedded body.site{--bg:#f3eee2;--fg:#30483c;--muted:#72806b;--accent:#41654f;--line:#d8d9c5;--card:#faf7ed;background:#f3eee2;color:#30483c;font-size:14px}
.embedded .site main,.embedded .site .narrow{width:100%;max-width:none;padding:22px 24px 32px}.embedded .site .site-header,.embedded .site .site-footer,.embedded .site .hero,.embedded .site #result-box,.embedded .site #manage-box{display:none}.embedded .site .eyebrow{color:#8b805f;font-size:.7rem;margin:0 0 10px}.embedded .site h1{font-size:26px;line-height:1.3;margin-bottom:10px}.embedded .site h2{font-size:18px;letter-spacing:-.045em}.embedded .site .hint{color:#6e7d64;font-size:11px}.embedded .site .paper-panel{border:0;background:transparent;padding:0;box-shadow:none}.embedded .site .section{margin-top:24px}.embedded .site input,.embedded .site textarea{background:#fcfaf2;border:1px solid #c5ccb6;color:#2f4838;border-radius:7px;font-size:14px;min-height:46px;padding:11px 13px}.embedded .site input::placeholder,.embedded .site textarea::placeholder{color:#919c82}.embedded .site textarea{min-height:110px}.embedded .site input:read-only{color:#65745f;background:#e8e8d9;font-size:11px}.embedded .site input[type=checkbox],.embedded .site input[type=radio]{min-height:20px;width:20px;padding:0;flex:0 0 20px}.embedded .site .field-label{margin-top:20px}.embedded .site label,.embedded .site legend{font-size:12px}.embedded .site button,.embedded .site .button{background:#41654f;color:#fff9e9;min-height:44px;font-size:12px}.embedded .site button.secondary,.embedded .site .button.secondary{background:transparent;color:#4c654c;border-color:#a2b195}.embedded .site button.danger{background:transparent;color:#96594a;border-color:#bd9a83}.embedded .site .char-count{font-size:10px;color:#859275}.embedded .site .notice{background:#dce5ce;color:#42603e;border-radius:6px;font-size:12px;border-left:3px solid #839c66}.embedded .site .notice[data-error=true]{background:#f0dfd0;color:#92584a;border-left-color:#b9826b}.embedded .site .captcha{margin:16px 0 8px;min-height:65px;color:#7b866e;font-size:11px}.embedded .site .warning{border-left-color:#b59059;color:#827246;font-size:12px;margin:24px 0}.embedded .site .choice label{border-color:#c4c9b1;border-radius:8px;padding:11px 4px;color:#5c7056;font-size:10px}.embedded .site .choice input:checked+label{background:#e2e8d5;border-color:#6c8963;box-shadow:inset 0 0 0 1px #6c8963}.embedded .site .choice input{width:100%;height:100%}.embedded .site .countdown{color:#88764b;font-size:12px}.embedded .site .received{font-size:14px}.embedded .site .received strong{color:#7f713f}.embedded .site .actions{gap:7px}.embedded .site .actions>button{font-size:11px;padding:8px}.embedded .site .box-surface{min-height:190px}.embedded .site .box-stamp{margin-top:37px}.embedded .site .wall-post{padding:20px 18px;margin:14px 0;background:#faf7ec;border:1px solid #dedfcb;border-radius:3px;box-shadow:0 3px 8px #67704d0a}.embedded .site .wall-post .post-body{font-size:14px;line-height:1.9;color:#40583f}.embedded .site .post-meta{font-size:10px}.embedded .site .post-meta button{min-height:32px;font-size:10px}.embedded .site .message-card{background:#faf6e9}.embedded .site :focus-visible{outline-color:#748f55}.embedded .site dialog{background:#f3eee2;color:#30483c;border-color:#97a986}.embedded .site dialog::backdrop{background:#142e3066}
@media(max-width:420px){.embedded .site main,.embedded .site .narrow{padding:18px}.embedded .site h1{font-size:24px}.embedded .site .actions>button{flex-basis:100px}}
.embedded .site main,.embedded .site .narrow{padding:24px 25px 32px}
.embedded .site h1{font-size:24px;letter-spacing:-.06em;line-height:1.45}
.embedded .site .field-label{margin-top:18px}
.embedded .site input,.embedded .site textarea{border:0;border-bottom:1px solid #b8bea9;border-radius:0;background:#ffffff4d;padding:10px 9px}
.embedded .site textarea{background:repeating-linear-gradient(transparent 0 29px,#b5bca22e 29px 30px);line-height:30px;min-height:120px}
.embedded .site .wall-post{background:#fffcf0;border:0;border-left:2px solid #b3bfa0;padding:17px 16px}
.embedded .site .captcha{margin:12px 0 8px}
@media(max-width:420px){.embedded .site main,.embedded .site .narrow{padding:18px 20px}.embedded .site h1{font-size:22px}}
@media(prefers-reduced-motion:reduce){.site button,.site .button{transition:none}}