@font-face {
  font-family: "Jua Local";
  src: url("./assets/fonts/Jua-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root { --ink:#30261f; --muted:#776e67; --line:#e9ddd0; --paper:#fffdf9; --wood:#9e653d; --wood-dark:#71432a; --brick:#bf6036; --green:#5f815b; --purple:#7253a3; --shadow:0 15px 42px rgba(87,61,39,.13); }
* { box-sizing:border-box; }
html { background:#f7f3eb; }
body { min-width:320px; margin:0; color:var(--ink); background:radial-gradient(circle at 5% 15%,#fdf7eb 0 15%,transparent 35%),radial-gradient(circle at 100% 10%,#f7eee3 0 12%,transparent 29%),#f7f3eb; font-family:"Jua Local","Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
button { font:inherit; color:inherit; cursor:pointer; }
.page-wrap { width:calc(100% - 28px); max-width:1760px; min-height:calc(100vh - 28px); margin:14px auto; }
.house { position:relative; display:flex; flex-direction:column; min-height:calc(100vh - 28px); overflow:hidden; border:1px solid #eee5d8; border-radius:24px; background:linear-gradient(90deg,#fffaf0,#fffefa 50%,#fff8ef); box-shadow:var(--shadow); }

.home-header { position:relative; z-index:3; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:34px 42px 0; }
.brand-lockup h1 { margin:0; font-size:clamp(27px,2.7vw,43px); letter-spacing:-1.8px; line-height:1; }
.brand-lockup h1 span { margin-left:8px; color:#665c54; font-size:clamp(15px,1.3vw,21px); letter-spacing:-.7px; }
.brand-lockup p { margin:13px 0 0; color:#675c54; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:14px; }
.class-badge { display:flex; align-items:center; gap:9px; padding:8px 9px 8px 10px; border:1px solid #ebdfd2; border-radius:13px; background:rgba(255,255,255,.72); font-size:15px; box-shadow:0 4px 12px rgba(93,66,43,.04); }
.badge-avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#e9e0fb; font-size:18px; }
.class-badge button, .class-badge a { display:grid; place-items:center; width:28px; height:28px; border:0; border-left:1px solid #eee3d9; background:transparent; color:#6d635b; font-size:15px; text-decoration:none; }

.roof { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; height:210px; margin:-48px 2% -52px; }
.roof::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(91deg,#a56237 0 22px,#bf7a4c 23px 43px,#96552f 44px 48px); clip-path:polygon(0 100%,50% 1%,100% 100%); filter:drop-shadow(0 4px 0 rgba(88,50,29,.22)); }
.roof::after { content:""; position:absolute; right:2%; bottom:0; left:2%; height:10px; border-radius:12px 12px 0 0; background:#815033; }
.chimney { position:absolute; z-index:1; top:55px; right:16%; width:61px; height:91px; border:5px solid #8c502e; border-bottom:0; border-radius:5px 5px 0 0; background:repeating-linear-gradient(0deg,#b76c42 0 15px,#a45c35 16px 20px); }.chimney::before { content:""; position:absolute; top:-13px; left:-10px; width:72px; height:14px; border-radius:4px; background:#754124; }
.hero-message { position:relative; z-index:2; width:min(490px,80%); margin-top:82px; text-align:center; }.hero-message .flag { display:inline-grid; place-items:center; width:48px; height:41px; margin-bottom:7px; border-radius:3px 16px 16px 3px; background:#8159a9; color:white; font-size:25px; transform:rotate(4deg); box-shadow:0 3px 0 rgba(72,38,100,.22); }.hero-message h2 { margin:2px 0 6px; font-size:clamp(22px,2.2vw,32px); letter-spacing:-1px; }.hero-message p { margin:0; color:#675c54; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:14px; }.hero-message i { display:block; margin-top:12px; color:#e9997d; font-style:normal; font-size:16px; }

.house-body { position:relative; z-index:2; width:min(1140px,86%); margin:0 auto; padding:50px 0 28px; }
.tool-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.tool-card { position:relative; display:grid; grid-template-columns:104px minmax(0,1fr); column-gap:14px; align-items:center; min-height:174px; padding:21px 24px; overflow:hidden; border:1.5px solid var(--outline,#e9dfd2); border-radius:19px; background:linear-gradient(145deg,#fffefa,#fffaf5); color:inherit; text-align:left; text-decoration:none; box-shadow:0 5px 12px rgba(98,69,44,.055); transition:transform .2s,box-shadow .2s; }.tool-card:hover { transform:translateY(-5px); box-shadow:0 14px 22px rgba(98,69,44,.13); }.tool-card .tool-icon { display:grid; place-items:center; width:94px; height:94px; border-radius:20px; background:var(--tint,#f8eee1); font-size:54px; filter:drop-shadow(0 5px 3px rgba(72,49,33,.13)); }.tool-copy b { display:block; color:var(--accent,#633f27); font-size:clamp(20px,1.65vw,27px); letter-spacing:-1px; }.tool-copy small { display:block; margin-top:9px; color:#685e56; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:12px; line-height:1.65; }.tool-card>i { position:absolute; right:24px; bottom:20px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--accent,#b9875f); color:white; font-family:Arial,sans-serif; font-size:18px; font-style:normal; }.notice { --accent:#a85b22; --outline:#eec997; --tint:#fff0d3; }.seating { --accent:#b34d31; --outline:#f1c3b1; --tint:#fff0ea; }.timer { --accent:#2f704c; --outline:#bfd7c3; --tint:#edf6e9; }.board { --accent:#2e6d4c; --outline:#bed5c2; --tint:#e9f3e8; }.rules { --accent:#385ca3; --outline:#c1d0ec; --tint:#edf3ff; }.goals { --accent:#7655a8; --outline:#d4c8e6; --tint:#f3edfc; }.grapes { --accent:#714a9e; --outline:#d6c4e7; --tint:#f4edfb; }.settings { --accent:#5c5a58; --outline:#d7d4cf; --tint:#f4f2ee; }.new-mark { position:absolute; top:10px; right:-21px; width:74px; padding:3px 0; background:#8156a8; color:#fff; font-family:Arial,sans-serif; font-size:10px; font-weight:bold; text-align:center; transform:rotate(44deg); }
.tool-card.board .board-home-icon { position:relative; box-sizing:border-box; overflow:hidden; background:var(--tint); box-shadow:0 5px 3px rgba(72,49,33,.13); }.tool-card.board .board-home-icon::before { content:""; position:absolute; top:22%; left:20%; width:60%; height:48%; border:3px solid #9f704b; border-radius:7px; background:linear-gradient(145deg,#4d8669,#2d654c); box-shadow:0 3px 0 #dfbd95,0 5px 6px rgba(72,49,33,.16); }.tool-card.board .board-home-icon::after { content:""; position:absolute; z-index:1; bottom:36%; left:41%; width:18%; height:2px; border-radius:99px; background:rgba(255,249,210,.8); box-shadow:0 7px 0 rgba(255,249,210,.57); }.tool-card.board .board-home-icon span { position:absolute; z-index:2; top:24%; left:50%; color:#fff2a8; font-family:Arial,sans-serif!important; font-size:clamp(16px,2.35vh,23px); line-height:1; text-shadow:0 1px rgba(0,0,0,.28); transform:translateX(-50%); }
.grape-summary { display:none; }

.tool-collection { --accent:#587284; --outline:#c5d4db; --tint:#edf4f6; }
.tool-card.is-coming-soon { cursor:not-allowed; opacity:.72; filter:saturate(.72); }
.tool-card.is-coming-soon:hover { box-shadow:0 5px 12px rgba(98,69,44,.055); transform:none; }
.tool-card.is-coming-soon>i { background:#94a7b0; }

.info-shelf { display:grid; grid-template-columns:1fr 1.12fr 1.75fr .72fr 1.38fr; gap:12px; margin-top:auto; padding:15px 24px; border-top:5px solid #a86b42; background:linear-gradient(90deg,#a76b42,#c18a58 45%,#a26943); box-shadow:0 -6px 0 rgba(87,52,29,.12) inset; }.shelf-item { display:flex; align-items:center; gap:12px; min-height:64px; padding:11px 16px; border:1px solid rgba(94,60,37,.19); border-radius:12px; background:rgba(255,250,240,.91); text-align:left; }.shelf-icon { flex:0 0 auto; font-size:26px; }.shelf-item small { display:block; margin-bottom:3px; color:#796b5d; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:10px; }.shelf-item b { display:block; font-size:13px; }.screen-mode { border:1px solid rgba(94,60,37,.19); }.screen-mode i { margin-left:auto; color:#83624c; font-size:20px; font-style:normal; }

.focus-screen { position:fixed; inset:0; z-index:20; display:none; align-items:center; justify-content:center; overflow:auto; padding:35px; background:linear-gradient(150deg,#8bc7df,#c7e7be); color:var(--ink); }.focus-screen.is-open { display:flex; }.close-focus { position:fixed; z-index:3; top:18px; right:20px; width:40px; height:40px; border:0; border-radius:50%; background:#fff; font-size:27px; }.focus-top { position:absolute; top:23px; left:50%; display:flex; gap:18px; transform:translateX(-50%); color:#fff; font-size:18px; text-shadow:0 2px 0 #4d8290; }.focus-house { width:min(1050px,94vw); margin-top:50px; overflow:hidden; border:7px solid #f3ddb3; border-radius:18px; background:#fff9eb; box-shadow:0 18px 40px rgba(34,76,74,.28); }.focus-roof { display:grid; place-items:center; height:97px; background:repeating-linear-gradient(90deg,#d96334 0 55px,#ed854b 56px 69px); color:#fff7de; font-size:30px; text-shadow:0 2px #a04422; }.focus-body { display:grid; grid-template-columns:1.55fr 1fr 1fr 1fr; gap:13px; padding:20px; background:#fff8e6; }.focus-rules,.focus-panel { padding:17px; border-radius:14px; background:#fffefa; box-shadow:0 4px 12px rgba(92,90,57,.11); }.focus-label { color:#71906d; font-size:10px; letter-spacing:1px; }.focus-rules h2 { margin:2px 0 8px; color:#367fbc; font-size:26px; }.focus-rules ol { margin:0; padding-left:23px; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:14px; font-weight:700; line-height:1.9; }.focus-panel h3 { margin:0 0 10px; color:#54745a; font-size:17px; }.focus-panel { font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:12px; font-weight:700; line-height:1.9; }.dday { background:#edf7e7; text-align:center; }.dday b { display:block; color:#39734b; font-family:"Jua Local",sans-serif; font-size:30px; }.dday span { font-size:24px; }.focus-cheer { margin:0; padding:15px; background:#688c61; color:#fffce4; text-align:center; font-size:19px; }

.tool-dialog { width:min(530px,calc(100% - 28px)); padding:0; overflow:visible; border:0; border-radius:19px; background:#fffefa; box-shadow:0 24px 60px rgba(48,48,35,.29); }.tool-dialog::backdrop { background:rgba(36,48,44,.39); backdrop-filter:blur(3px); }.dialog-close { position:absolute; top:-10px; right:-10px; width:35px; height:35px; border:0; border-radius:50%; background:#314238; color:#fff; font-size:22px; }.modal-tool { padding:30px; text-align:center; }.modal-emoji { display:block; font-size:44px; }.modal-label { display:block; margin-top:7px; color:#819785; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:10px; font-weight:700; letter-spacing:1.3px; }.modal-tool h2 { margin:4px 0; font-size:27px; letter-spacing:-1px; }.modal-tool>p { margin:0 0 20px; color:#748078; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:13px; }.timer-display { margin:12px auto; color:#346348; font-size:64px; letter-spacing:3px; }.time-presets,.modal-actions { display:flex; justify-content:center; gap:7px; }.time-presets { margin:15px 0; }.time-presets button,.soft-button { padding:9px 13px; border:1px solid #e5dbcc; border-radius:9px; background:#fff8ec; font-size:13px; }.primary-button { padding:10px 18px; border:0; border-radius:9px; background:#e47743; color:#fff; font-size:13px; box-shadow:0 3px 0 #bb552e; }.full-button { width:100%; margin:12px 0; }.modal-tool textarea { width:100%; padding:12px; border:1px solid #e5dacb; border-radius:11px; background:#fffefa; font:13px/1.6 "Apple SD Gothic Neo","Malgun Gothic",sans-serif; resize:vertical; }.seat-result { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; min-height:10px; margin-top:11px; }.seat-result span { padding:8px 3px; border-radius:8px; background:#ebf4e8; font-size:12px; }.modal-tool #boardMessage { margin-top:12px; padding:10px; border-radius:9px; background:#eff7eb; color:#52735b; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:12px; white-space:pre-line; }.simple-tool { padding:30px; text-align:center; }.simple-tool h2 { margin:7px 0; font-size:26px; }.simple-tool p { color:#748078; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:13px; line-height:1.7; }.feature-list { display:grid; gap:7px; margin:18px 0; text-align:left; }.feature-list span { padding:11px; border-radius:9px; background:#fff5e6; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:13px; font-weight:700; }.grape-status { margin:-4px 0 13px; color:#8765a2; }.grape-status b { font-size:28px; }.grape-board { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; max-width:270px; margin:0 auto 18px; padding:15px; border:2px dashed #d7c4e8; border-radius:18px; background:#fcf9ff; }.grape-board span { aspect-ratio:1; border-radius:50%; background:#efe9e0; cursor:pointer; transition:transform .15s; }.grape-board span.filled { background:radial-gradient(circle at 32% 26%,#d6b3ed 0 11%,transparent 12%),linear-gradient(145deg,#a371c8,#6f438d); box-shadow:inset -2px -3px 0 rgba(57,25,77,.22),0 2px 2px rgba(82,47,103,.18); }.grape-board span:hover { transform:scale(1.12); }

@media (max-width:1120px) { .house-body { width:min(1020px,89%); }.tool-card { grid-template-columns:78px minmax(0,1fr); min-height:151px; padding:18px; }.tool-card .tool-icon { width:72px; height:72px; font-size:40px; }.tool-copy b { font-size:21px; }.tool-card>i { right:17px; bottom:14px; }.info-shelf { grid-template-columns:1fr 1fr; }.shelf-item.meal { grid-column:span 2; } }
@media (max-width:760px) { .page-wrap { width:calc(100% - 16px); min-height:calc(100vh - 16px); margin:8px auto; }.house { min-height:calc(100vh - 16px); border-radius:17px; }.home-header { padding:24px 20px 0; }.brand-lockup h1 { font-size:28px; }.brand-lockup h1 span { display:none; }.brand-lockup p { margin-top:8px; font-size:11px; }.class-badge { padding:5px; }.class-badge b { display:none; }.roof { height:160px; margin:-27px -13% -28px; }.chimney { top:45px; right:13%; transform:scale(.7); transform-origin:top right; }.hero-message { margin-top:55px; }.hero-message h2 { font-size:23px; }.hero-message p { font-size:11px; }.hero-message .flag { width:38px; height:32px; margin-bottom:2px; font-size:20px; }.hero-message i { margin-top:5px; }.house-body { width:calc(100% - 28px); padding:31px 0 21px; }.tool-grid { grid-template-columns:1fr 1fr; gap:10px; }.tool-card { grid-template-columns:1fr; min-height:139px; padding:15px; }.tool-card .tool-icon { width:47px; height:47px; border-radius:13px; font-size:27px; }.tool-copy b { margin-top:7px; font-size:18px; }.tool-copy small { margin-top:3px; font-size:10px; line-height:1.35; }.tool-card>i { width:26px; height:26px; right:13px; bottom:13px; font-size:14px; }.new-mark { top:6px; right:-25px; transform:rotate(44deg) scale(.76); }.info-shelf { grid-template-columns:1fr 1fr; gap:7px; padding:10px; }.shelf-item { min-height:55px; padding:9px 10px; gap:7px; }.shelf-icon { font-size:20px; }.shelf-item b { font-size:11px; }.shelf-item small { font-size:9px; }.shelf-item.meal { grid-column:span 2; }.screen-mode { grid-column:span 2; }.focus-top { top:12px; font-size:13px; }.focus-house { margin-top:34px; }.focus-roof { height:72px; font-size:24px; }.focus-body { grid-template-columns:1fr 1fr; padding:12px; }.focus-rules { grid-column:span 2; }.focus-panel { padding:13px; }.dday { grid-column:auto; }.focus-rules h2 { font-size:22px; }.focus-rules ol { font-size:12px; line-height:1.7; }.focus-cheer { font-size:16px; } }
@media (max-width:390px) { .home-header { padding:18px 15px 0; }.brand-lockup h1 { font-size:25px; }.roof { margin-right:-19%; margin-left:-19%; }.house-body { width:calc(100% - 20px); }.tool-card { min-height:129px; padding:12px; }.tool-copy b { font-size:16px; }.tool-copy small { font-size:9px; }.info-shelf { grid-template-columns:1fr; }.shelf-item.meal,.screen-mode { grid-column:auto; }.modal-tool { padding:26px 17px; }.seat-result { grid-template-columns:1fr 1fr; }.focus-screen { padding:24px 10px; }.focus-body { grid-template-columns:1fr; }.focus-rules,.dday { grid-column:auto; }.focus-panel { min-height:auto; } }

/* 학생 뽑기 카드도 다른 교실 도구와 같은 파스텔 타일 톤으로 맞춥니다. */
.tool-card.picker { --accent:#7a4d9c; --outline:#d8c4e9; --tint:#f5edfb; }

/* 일러스트 배경과 서체를 모든 화면에 일관되게 적용합니다. */
body, body * { font-family: "Jua Local", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif !important; }

.house {
  background-color: #fffaf1;
  background-image: url("./assets/illustrations/classroom-house-background.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-header { padding-top: 38px; }
.brand-lockup h1, .brand-lockup h1 span { color: #34271f; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.brand-lockup p { color: #5e5146; font-size: 15px; }
.class-badge { border-color: rgba(116,87,64,.18); background: rgba(255,253,248,.8); box-shadow: 0 4px 15px rgba(90,65,40,.09); }

.roof { height: 235px; margin: -42px 0 -54px; }
.roof::before, .roof::after, .chimney { display: none; }
.hero-message { width: min(510px, 80%); margin-top: 92px; padding: 16px 22px 13px; border: 1px solid rgba(156,119,79,.16); border-radius: 22px; background: rgba(255,253,248,.62); box-shadow: 0 10px 24px rgba(112,81,47,.07); backdrop-filter: blur(2px); }
.hero-message .flag { background: #7251a0; }
.hero-message h2 { color: #35271e; font-size: clamp(25px, 2.3vw, 34px); }
.hero-message p { color: #5a4d43; font-size: 15px; }

.house-body { width: min(1130px, 82%); padding-top: 45px; }
.tool-card { border-color: color-mix(in srgb, var(--outline) 76%, white); background: rgba(255,255,253,.88); box-shadow: 0 7px 18px rgba(89,64,42,.10); backdrop-filter: blur(4px); }
.tool-card:hover { box-shadow: 0 16px 26px rgba(89,64,42,.17); }
.tool-copy b { font-size: clamp(22px, 1.7vw, 28px); }
.tool-copy small { color: #5c5149; font-size: 13px; line-height: 1.6; }
.tool-card>i { box-shadow: 0 3px 8px rgba(65,43,29,.18); }
.info-shelf { border-top-color: rgba(105,65,39,.76); background: linear-gradient(90deg,rgba(125,76,43,.94),rgba(177,123,76,.93) 45%,rgba(118,72,43,.94)); }
.shelf-item { background: rgba(255,251,244,.95); }.shelf-item b { font-size: 14px; }.shelf-item small { color: #66594e; }

@media (max-width:760px) {
  .house { background-position: 50% top; background-size: auto 100%; }
  .home-header { padding-top: 24px; }
  .roof { height: 186px; margin: -27px 0 -30px; }
  .hero-message { margin-top: 63px; padding: 11px 14px 9px; border-radius: 16px; }
  .hero-message h2 { font-size: 24px; }.hero-message p { font-size: 11px; }
  .house-body { width: calc(100% - 30px); padding-top: 28px; }
  .tool-card { background: rgba(255,255,253,.92); }.tool-copy small { font-size: 10px; }
}

/* 전체 안내 화면도 메인 화면과 같은 일러스트 템플릿을 사용합니다. */
.focus-screen {
  background-color: #fffaf1;
  background-image: url("./assets/illustrations/classroom-house-background.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.focus-screen::before { content:""; position:absolute; inset:0; background:rgba(255,250,240,.18); }
.focus-screen > * { position:relative; z-index:1; }
.focus-top { padding:8px 15px; border:1px solid rgba(111,82,57,.16); border-radius:999px; background:rgba(255,253,248,.76); color:#4d3d30; text-shadow:none; box-shadow:0 5px 14px rgba(86,63,43,.08); }
.close-focus { background:rgba(255,253,248,.92); color:#49382b; box-shadow:0 5px 14px rgba(86,63,43,.13); }
.focus-house { border:1px solid rgba(132,97,65,.22); border-radius:24px; background:rgba(255,252,246,.78); box-shadow:0 18px 42px rgba(83,59,39,.18); backdrop-filter:blur(5px); }
.focus-roof { height:90px; background:rgba(119,79,48,.82); color:#fff8e9; font-size:31px; text-shadow:0 2px rgba(71,43,25,.35); }
.focus-digital-clock { width:fit-content; margin:20px auto -4px; padding:13px 28px; border:1px solid rgba(107,77,48,.18); border-radius:17px; background:rgba(255,254,250,.88); color:#3d5e49; box-shadow:0 7px 18px rgba(83,59,39,.09); font-family:"Jua Local",monospace; font-size:clamp(38px,5vw,68px); letter-spacing:4px; line-height:1; }
.focus-body { background:transparent; }
.focus-rules,.focus-panel { border:1px solid rgba(152,120,88,.17); background:rgba(255,254,250,.83); box-shadow:0 5px 15px rgba(93,70,45,.08); }
.focus-rules h2 { color:#7953a4; }.focus-panel h3 { color:#466b4e; }.dday { background:rgba(236,247,228,.86); }
.focus-cheer { background:rgba(89,126,83,.91); }

/* 전체 안내판 자체를 화면 정중앙에 두어 해상도 변화에도 균형을 유지합니다. */
.focus-screen { box-sizing:border-box; min-height:100dvh; }
.focus-screen.is-open { display:grid; place-items:center; }
.focus-house { width:min(1050px,calc(100vw - 70px)); max-height:calc(100dvh - 56px); margin:0; overflow:auto; }

.tool-card.thermometer-mode { --accent:#cf583d; --outline:#f0b9aa; --tint:#fff0e8; }

@media (max-width:760px) {
  .focus-screen { background-position:center top; background-size:auto 100%; }
  .focus-screen { padding:16px 12px; }
  .focus-house { width:min(100%,700px); max-height:calc(100dvh - 32px); margin:0; border-radius:17px; }
  .focus-roof { height:68px; font-size:24px; }
  .focus-digital-clock { margin:13px auto -1px; padding:10px 17px; border-radius:13px; font-size:35px; letter-spacing:2px; }
}

/* 데스크톱 메인은 화면 높이에 맞춰 한 장의 대시보드로 완결합니다. */
@media (min-width:761px) {
  html:has(body:not(.tool-page)) { height:100dvh; overflow:hidden; }
  body:not(.tool-page) { height:100dvh; overflow:hidden; }
  body:not(.tool-page) .page-wrap { height:calc(100dvh - 28px); min-height:0; }
  body:not(.tool-page) .house { height:100%; min-height:0; }
  body:not(.tool-page) .home-header { padding:clamp(18px,3.8vh,38px) clamp(24px,3.3vw,42px) 0; }
  body:not(.tool-page) .brand-lockup h1 { font-size:clamp(27px,2.5vw,43px); }
  body:not(.tool-page) .brand-lockup p { margin-top:clamp(7px,1.4vh,13px); }
  body:not(.tool-page) .roof { height:clamp(130px,21vh,235px); margin:clamp(-48px,-4.7vh,-27px) 0 clamp(-54px,-5.3vh,-30px); }
  body:not(.tool-page) .hero-message { margin-top:clamp(53px,9.5vh,92px); padding:clamp(9px,1.7vh,16px) clamp(15px,2vw,22px) clamp(8px,1.4vh,13px); }
  body:not(.tool-page) .hero-message .flag { width:clamp(34px,4.7vh,48px); height:clamp(29px,4vh,41px); margin-bottom:clamp(2px,.7vh,7px); font-size:clamp(19px,2.4vh,25px); }
  body:not(.tool-page) .hero-message h2 { margin:1px 0 4px; font-size:clamp(22px,3.1vh,34px); }
  body:not(.tool-page) .hero-message p { font-size:clamp(11px,1.6vh,15px); }
  body:not(.tool-page) .hero-message i { margin-top:clamp(3px,.9vh,12px); }
  body:not(.tool-page) .house-body { display:flex; flex:1 1 auto; align-items:center; width:min(1130px,82%); min-height:0; padding:clamp(10px,2vh,28px) 0; }
  body:not(.tool-page) .tool-grid { width:100%; gap:clamp(8px,1.7vh,20px); }
  body:not(.tool-page) .tool-card { min-height:clamp(105px,19vh,174px); padding:clamp(12px,2.2vh,21px) clamp(14px,1.8vw,24px); grid-template-columns:clamp(64px,10.5vh,104px) minmax(0,1fr); column-gap:clamp(8px,1.2vw,14px); }
  body:not(.tool-page) .tool-card .tool-icon { width:clamp(58px,10.5vh,94px); height:clamp(58px,10.5vh,94px); border-radius:clamp(13px,2vh,20px); font-size:clamp(32px,6vh,54px); }
  body:not(.tool-page) .tool-copy b { font-size:clamp(18px,2.8vh,28px); }
  body:not(.tool-page) .tool-copy small { margin-top:clamp(3px,.8vh,9px); font-size:clamp(10px,1.45vh,13px); line-height:1.45; }
  body:not(.tool-page) .tool-card>i { right:clamp(13px,1.7vw,24px); bottom:clamp(11px,1.9vh,20px); width:clamp(26px,3.8vh,34px); height:clamp(26px,3.8vh,34px); font-size:clamp(14px,2vh,18px); }
  body:not(.tool-page) .info-shelf { flex:0 0 auto; gap:clamp(7px,1vw,12px); padding:clamp(9px,1.7vh,15px) clamp(14px,1.7vw,24px); }
  body:not(.tool-page) .shelf-item { min-height:clamp(51px,8vh,64px); padding:clamp(8px,1.3vh,11px) clamp(10px,1.2vw,16px); }
  body:not(.tool-page) .shelf-icon { font-size:clamp(20px,3.2vh,26px); }
  body:not(.tool-page) .shelf-item small { font-size:clamp(9px,1.2vh,10px); }
  body:not(.tool-page) .shelf-item b { font-size:clamp(11px,1.5vh,14px); }
}

/* 메인 하단에는 현재 칭찬판 상태를 간단한 위젯으로 보여줍니다. */
.info-shelf { grid-template-columns:1fr 1.15fr 1.05fr .72fr 1.35fr; }
.homepage-seo-intro { max-width:min(820px,calc(100% - 42px)); margin:clamp(6px,.9vh,10px) auto clamp(9px,1.3vh,15px); color:rgba(96,77,62,.58); font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif!important; font-size:clamp(8px,1.00vh,10px); line-height:1.45; letter-spacing:-.2px; text-align:center; }
.reward-shelf { border-color:rgba(126,84,164,.25); background:linear-gradient(145deg,#fffaff,#f8f0ff); }.reward-shelf .shelf-icon { filter:drop-shadow(0 3px 3px rgba(104,62,130,.16)); }
.reward-shelf.is-disabled { border-color:rgba(130,116,99,.18); background:linear-gradient(145deg,#fffdf8,#f4efe8); color:#76685d; opacity:.82; }
.tool-card.reward-disabled-mode { --accent:#8a7c70; --outline:#ddd3c8; --tint:#f6f1ea; cursor:not-allowed; opacity:.7; filter:saturate(.7); }
.tool-card.reward-disabled-mode:hover { transform:none; box-shadow:0 7px 18px rgba(87,61,39,.08); }
.tool-card.reward-disabled-mode>i { background:#b3a79c; }
.bell-mode { justify-content:flex-start; border-color:rgba(220,159,64,.33); background:linear-gradient(145deg,#fff9e7,#fff0bf); color:#6b4a1e; box-shadow:inset 0 -3px 0 rgba(201,143,44,.08); }
.bell-mode .shelf-icon { filter:drop-shadow(0 3px 3px rgba(143,94,22,.16)); }
.bell-mode b { color:#704d1f; white-space:nowrap; }
.bell-mode:hover { transform:translateY(-1px); filter:brightness(1.03); }

/* 화면보호기는 학생들이 한눈에 보는 큰 안내 위젯 세 개만 남깁니다. */
.focus-screen { overflow:hidden; padding:clamp(14px,2.8vh,36px); background-position:center; }
body.focus-open { overflow:hidden; }
.focus-screen.is-open { display:grid; place-items:center; }
.focus-house { width:min(1340px,94vw); max-height:calc(100dvh - 34px); margin:0; overflow:hidden; border:1px solid rgba(128,92,61,.25); border-radius:28px; background:rgba(255,253,247,.86); box-shadow:0 22px 50px rgba(69,51,35,.22); }
.close-focus { position:fixed; z-index:4; top:auto; right:auto; bottom:20px; left:24px; width:auto; height:auto; padding:10px 15px; border:1px solid rgba(93,67,48,.2); border-radius:999px; background:rgba(255,253,248,.9); color:#594638; font-size:13px; box-shadow:0 5px 14px rgba(74,51,32,.15); }
.focus-bell-button { position:fixed; right:24px; bottom:20px; z-index:4; display:flex; align-items:center; gap:7px; width:auto; height:auto; padding:10px 14px; border:1px solid rgba(175,125,44,.25); border-radius:999px; background:rgba(255,247,220,.9); color:#6d4a18; box-shadow:0 5px 14px rgba(106,73,24,.15); font-size:13px; }
.focus-bell-button:hover { transform:translateY(-1px); background:#fff5c8; }
.focus-bell-button span { font-size:12px; }
.focus-header { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:clamp(20px,3vw,32px) clamp(25px,4vw,46px); background:linear-gradient(100deg,rgba(126,84,164,.12),rgba(255,253,247,.12)); border-bottom:1px solid rgba(130,96,65,.14); }
.focus-header .focus-label { color:#8863a7; font-family:Arial,sans-serif !important; font-size:11px; font-weight:700; letter-spacing:2px; }.focus-header h2 { margin:3px 0 4px; color:#4d3c31; font-size:clamp(28px,3vw,42px); }.focus-header p { margin:0; color:#786b60; font-size:15px; }
.focus-digital-clock { flex:0 0 auto; margin:0; padding:15px 25px; border:1px solid rgba(104,76,52,.17); border-radius:19px; background:rgba(255,255,255,.8); color:#3d5e49; box-shadow:0 7px 18px rgba(83,59,39,.09); font-family:"Jua Local",sans-serif !important; font-size:clamp(34px,4vw,60px); letter-spacing:1px; line-height:1; }
.focus-body { display:grid; grid-template-columns:1fr 1.35fr .72fr; gap:18px; min-height:clamp(340px,52vh,545px); padding:clamp(18px,2.8vw,34px); background:transparent; }
.focus-body.reward-disabled { grid-template-columns:minmax(260px,.9fr) minmax(0,1.9fr); }
.focus-body.reward-disabled .focus-reward-widget { display:none; }
.focus-widget { min-width:0; min-height:0; padding:clamp(17px,2.2vw,27px); border:1px solid rgba(138,105,74,.17); border-radius:20px; background:rgba(255,255,255,.76); box-shadow:0 7px 17px rgba(87,61,39,.08); }.focus-widget-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; color:#6e5544; font-size:clamp(17px,1.8vw,23px); }.focus-widget-head b { color:#9b8979; font-family:Arial,sans-serif !important; font-size:10px; letter-spacing:1.2px; }
.focus-schedule-widget { background:linear-gradient(145deg,rgba(249,252,255,.94),rgba(238,247,255,.86)); }.focus-schedule-list { display:grid; gap:10px; }.schedule-line { display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center; gap:10px; padding:clamp(10px,1.6vh,15px) 0; border-bottom:1px solid rgba(110,153,186,.17); }.schedule-line:last-child { border-bottom:0; }.schedule-line b { color:#4c78a8; font-size:clamp(17px,1.8vw,23px); }.schedule-line span { color:#3c4d5f; font-size:clamp(16px,1.65vw,21px); line-height:1.35; }
.schedule-line.is-current { margin:0 -9px; padding-right:9px; padding-left:9px; border:1px solid rgba(69,129,91,.32); border-radius:12px; background:rgba(235,247,232,.9); box-shadow:0 4px 10px rgba(69,129,91,.1); }.schedule-line.is-current b { color:#327246; }.schedule-empty { display:grid; place-items:center; min-height:170px; margin:0; padding:20px; border:1px dashed rgba(110,153,186,.35); border-radius:16px; color:#667889; font-size:16px; line-height:1.6; text-align:center; }
.focus-board-widget { position:relative; display:flex; flex-direction:column; padding:clamp(15px,2vw,24px); border:10px solid #895538; border-radius:16px; background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.06),transparent 22%),linear-gradient(145deg,#255646,#173f33); box-shadow:inset 0 0 34px rgba(0,0,0,.28),0 7px 16px rgba(79,48,30,.18); }.focus-board-widget .focus-widget-head { position:relative; z-index:1; margin-bottom:10px; color:#fff4ce; }.focus-board-widget .focus-widget-head b { color:rgba(255,247,214,.67); }.focus-board-widget textarea { flex:1 1 auto; min-height:0; padding:clamp(10px,1.5vw,18px) 6px; border:0; border-radius:0; background:transparent; color:#fffdf0; font-size:clamp(20px,2.25vw,31px); line-height:1.55; resize:none; text-shadow:0 1px rgba(0,0,0,.28); }.focus-board-widget textarea:focus { box-shadow:none; outline:0; }.focus-board-widget p { position:relative; z-index:1; margin:6px 0 0; color:rgba(255,245,214,.72); font-size:12px; }
.focus-reward-widget { display:flex; flex-direction:column; justify-content:center; text-align:center; background:linear-gradient(145deg,rgba(252,247,255,.96),rgba(244,237,252,.88)); }.focus-reward-widget[data-mode="thermometer"] { background:linear-gradient(145deg,rgba(255,249,240,.97),rgba(255,237,229,.9)); }.focus-reward-widget strong { display:block; margin:9px 0 18px; color:#7550a1; font-size:clamp(32px,4.1vw,55px); line-height:1; }.focus-reward-widget[data-mode="thermometer"] strong { color:#cb593e; }.focus-reward-gauge { --reward-level:0%; position:relative; height:25px; overflow:hidden; border:1px solid rgba(111,78,145,.18); border-radius:999px; background:rgba(111,78,145,.11); }.focus-reward-gauge i { position:absolute; inset:0 auto 0 0; width:var(--reward-level); border-radius:inherit; background:linear-gradient(90deg,#7650a2,#b383da); box-shadow:0 0 12px rgba(111,72,150,.35); transition:width .5s cubic-bezier(.22,1,.36,1); }.focus-reward-widget[data-mode="thermometer"] .focus-reward-gauge { border-color:rgba(202,89,62,.2); background:rgba(202,89,62,.1); }.focus-reward-widget[data-mode="thermometer"] .focus-reward-gauge i { background:linear-gradient(90deg,#efbe55,#e65a42); box-shadow:0 0 12px rgba(220,91,61,.28); }.focus-reward-widget p { margin:14px 0 0; color:#806995; font-size:14px; }.focus-reward-widget[data-mode="thermometer"] p { color:#a16950; }

@media (max-width:900px) { .info-shelf { grid-template-columns:1fr 1fr; }.reward-shelf { grid-column:auto; }.focus-house { width:min(100%,760px); max-height:calc(100dvh - 28px); overflow:auto; }.focus-body { grid-template-columns:1fr 1fr; }.focus-body.reward-disabled { grid-template-columns:1fr; }.focus-reward-widget { grid-column:span 2; min-height:155px; }.close-focus { bottom:13px; left:13px; }.focus-bell-button { right:13px; bottom:13px; } }
@media (max-width:600px) { .focus-screen { padding:12px; }.focus-house { max-height:calc(100dvh - 24px); border-radius:20px; }.focus-header { align-items:flex-start; flex-direction:column; gap:12px; padding:20px; }.focus-digital-clock { padding:10px 14px; font-size:34px; }.focus-body { grid-template-columns:1fr; min-height:0; padding:13px; }.focus-reward-widget { grid-column:auto; min-height:135px; }.focus-widget { min-height:210px; padding:17px; }.focus-board-widget { min-height:280px; }.focus-board-widget textarea { font-size:20px; line-height:37px; }.close-focus,.focus-bell-button { font-size:11px; } }

/* 메인 좌상단은 교사용 도구 이름보다 학생들이 보는 학급 정보를 먼저 보여줍니다. */
.class-identity { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.site-version { color:#88796e; font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif!important; font-size:10px; font-weight:700; letter-spacing:.7px; }
.class-identity h1 { max-width:min(62vw,760px); margin:4px 0 0; overflow:hidden; color:#34271f; font-size:clamp(30px,3.1vw,48px); letter-spacing:-1.8px; line-height:1.03; text-align:left; text-overflow:ellipsis; text-shadow:0 1px 0 rgba(255,255,255,.8); white-space:nowrap; }
.class-identity p { margin:5px 0 0; color:#68594e; font-size:clamp(17px,1.55vw,24px); letter-spacing:-.6px; line-height:1.1; }
.header-settings { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; margin-top:5px; border:1px solid rgba(116,87,64,.18); border-radius:12px; background:rgba(255,253,248,.82); color:#6d635b; box-shadow:0 4px 15px rgba(90,65,40,.09); font-size:18px; text-decoration:none; }
.header-settings:hover { background:#fff; transform:rotate(10deg); }

@media(max-width:760px) {
  .class-identity h1 { max-width:calc(100vw - 110px); font-size:clamp(26px,7vw,35px); }
  .class-identity p { font-size:16px; }
  .site-version { font-size:9px; }
  .header-settings { width:34px; height:34px; margin-top:2px; font-size:16px; }
}

/* 메인의 인사말은 설정에서만 바꾸며, 학생에게는 깔끔하게 보여줍니다. */
.hero-message { position:relative; }

.students { --accent:#3c7a83; --outline:#bfdbdc; --tint:#eaf6f5; }

/* 화면보호기 시계 옆에는 현재 지역의 날씨만 작게 곁들입니다. */
.focus-header-widgets { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:0 0 auto; }
.focus-weather-widget { order:-1; display:flex; align-items:center; gap:7px; min-width:0; padding:9px 11px; border:1px solid rgba(92,133,159,.18); border-radius:15px; background:rgba(247,252,255,.82); color:#4c6576; box-shadow:0 5px 13px rgba(77,106,125,.07); }
.focus-weather-widget>span { flex:0 0 auto; font-size:24px; line-height:1; }
.focus-weather-widget div { min-width:0; }
.focus-weather-widget small,.focus-weather-widget b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.focus-weather-widget small { margin-bottom:2px; color:#7b95a5; font-family:Arial,sans-serif!important; font-size:9px; font-weight:700; letter-spacing:.5px; }
.focus-weather-widget b { max-width:130px; color:#476476; font-size:13px; }
@media(max-width:600px) { .focus-header-widgets { width:100%; justify-content:space-between; }.focus-weather-widget { padding:8px 10px; }.focus-weather-widget b { max-width:145px; font-size:12px; } }

/* 홈 우상단의 빠른 링크는 지구본과 번호만으로 가볍게 구분합니다. */
.home-header-actions { display:flex; align-items:flex-start; gap:7px; }
.header-quick-link { position:relative; display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; margin-top:5px; border:1px solid rgba(116,87,64,.18); border-radius:12px; background:rgba(255,253,248,.82); color:#5d7886; box-shadow:0 4px 15px rgba(90,65,40,.09); font-size:18px; text-decoration:none; transition:transform .18s,background .18s; }
.header-quick-link:hover { background:#fff; transform:translateY(-2px); }
.header-quick-link>span { line-height:1; }.header-quick-link>b { position:absolute; right:-5px; bottom:-5px; display:grid; place-items:center; width:17px; height:17px; border:2px solid #fffaf1; border-radius:50%; background:#7755a4; color:#fff; font-family:Arial,sans-serif!important; font-size:10px; line-height:1; }
.header-quick-link.is-unset { color:#9ea6a6; cursor:default; opacity:.62; }.header-quick-link.is-unset:hover { background:rgba(255,253,248,.82); transform:none; }
@media(max-width:760px) { .home-header-actions { gap:5px; }.home-header-actions .header-quick-link,.home-header-actions .header-settings { width:34px; height:34px; margin-top:2px; border-radius:10px; font-size:16px; }.header-quick-link>b { right:-4px; bottom:-4px; width:15px; height:15px; font-size:9px; }.class-identity h1 { max-width:calc(100vw - 154px); } }

/* 홈 하단의 시간표 박스에서 바로 전체 시간표를 조회합니다. */
.timetable-now { min-width:0; }
.timetable-now-copy { min-width:0; }
.timetable-now-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shelf-mini-action {
  flex:0 0 auto;
  margin-left:auto;
  padding:8px 12px;
  border:0;
  border-radius:999px;
  background:linear-gradient(145deg,#6d8f67,#4f765a);
  color:#fffdf3;
  box-shadow:0 3px 0 rgba(54,91,62,.25),0 5px 12px rgba(72,96,67,.18);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.shelf-mini-action:hover { transform:translateY(-1px); filter:brightness(1.03); }

.timetable-viewer {
  position:fixed;
  inset:0;
  z-index:30;
  display:none;
  place-items:center;
  padding:clamp(16px,3.4vw,42px);
  background:rgba(50,39,30,.34);
  backdrop-filter:blur(5px);
}
.timetable-viewer.is-open { display:grid; }
body.timetable-viewer-open { overflow:hidden; }
.timetable-viewer-card {
  position:relative;
  display:grid;
  grid-template-rows:minmax(0,1fr);
  width:min(1360px,96vw);
  height:min(850px,92dvh);
  overflow:hidden;
  border:1px solid rgba(132,97,65,.2);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,253,248,.97),rgba(247,239,227,.94));
  box-shadow:0 24px 70px rgba(54,39,26,.28);
}
.timetable-viewer-close {
  position:absolute;
  top:14px;
  right:16px;
  z-index:2;
  flex:0 0 auto;
  padding:9px 14px;
  border:1px solid rgba(112,82,60,.18);
  border-radius:999px;
  background:rgba(255,250,240,.88);
  color:#5d4838;
  box-shadow:0 5px 14px rgba(86,63,43,.12);
  font-size:13px;
}
.timetable-viewer-grid {
  display:grid;
  grid-template-columns:minmax(108px,.6fr) repeat(5,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  gap:10px;
  min-height:0;
  padding:clamp(38px,4.2vw,58px) clamp(20px,3vw,42px) clamp(22px,3vw,42px);
  overflow:auto;
}
.timetable-viewer-grid.is-empty {
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
}
.timetable-empty {
  display:grid;
  place-items:center;
  width:min(620px,100%);
  min-height:220px;
  padding:30px;
  border:2px dashed rgba(120,91,67,.2);
  border-radius:22px;
  background:rgba(255,255,255,.58);
  color:#6a5a4d;
  font-size:clamp(20px,2vw,28px);
  text-align:center;
}
.time-table-cell {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:clamp(64px,9.1vh,96px);
  padding:12px;
  border:1px solid rgba(126,92,65,.14);
  border-radius:15px;
  background:rgba(255,255,255,.68);
  box-shadow:0 5px 12px rgba(89,64,42,.05);
  color:#423228;
  font-size:clamp(22px,2vw,32px);
  text-align:center;
  line-height:1.18;
}
.time-table-head {
  min-height:clamp(48px,6.2vh,72px);
  background:linear-gradient(145deg,#7c956e,#5e7f63);
  color:#fffdf2;
  font-size:clamp(19px,1.8vw,28px);
  box-shadow:none;
}
.time-table-period {
  flex-direction:column;
  align-items:center;
  gap:4px;
  background:linear-gradient(145deg,#fff5e5,#fffdf5);
  color:#7b5a40;
}
.time-table-period b { font-size:clamp(21px,1.9vw,29px); }
.time-table-period small {
  color:#957966;
  font-family:Arial,sans-serif!important;
  font-size:clamp(12px,1.05vw,15px);
  white-space:nowrap;
}
.timetable-subject-cell { font-size:clamp(25px,2.35vw,37px); }
.timetable-subject-cell.is-current {
  border-color:rgba(74,134,82,.46);
  background:linear-gradient(145deg,#ecf9e9,#fffef6);
  box-shadow:0 0 0 3px rgba(90,155,85,.12),0 8px 18px rgba(74,134,82,.16);
  color:#2f7045;
}
@media(max-width:900px) {
  .timetable-now { grid-column:span 1; }
  .shelf-mini-action { padding:7px 10px; font-size:11px; }
  .timetable-viewer-card { height:min(860px,94dvh); }
  .timetable-viewer-grid { grid-template-columns:minmax(86px,.54fr) repeat(5,minmax(104px,1fr)); }
  .time-table-cell { min-height:68px; }
}
@media(max-width:600px) {
  .timetable-now { grid-column:span 2; }
  .timetable-viewer { padding:10px; }
  .timetable-viewer-card { border-radius:20px; }
  .timetable-viewer-close { top:10px; right:10px; padding:8px 12px; font-size:12px; }
  .timetable-viewer-grid { grid-template-columns:minmax(76px,.54fr) repeat(5,minmax(92px,1fr)); padding:50px 12px 12px; gap:6px; }
  .time-table-cell { min-height:58px; border-radius:12px; font-size:17px; }
  .time-table-head { font-size:16px; }
  .timetable-subject-cell { font-size:20px; }
}

.bell-wave {
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
}
.bell-wave::before,
.bell-wave::after {
  content:"";
  position:absolute;
  width:min(78vmin,720px);
  aspect-ratio:1;
  border:clamp(6px,1vw,12px) solid rgba(255,209,73,.44);
  border-radius:50%;
  box-shadow:0 0 45px rgba(255,214,82,.28), inset 0 0 30px rgba(255,237,164,.3);
  transform:scale(.12);
}
.bell-wave::after {
  width:min(98vmin,900px);
  border-color:rgba(255,238,164,.33);
  animation-delay:.08s;
}
.bell-wave.is-active {
  opacity:1;
  animation:bell-layer .95s ease-out both;
}
.bell-wave.is-active::before,
.bell-wave.is-active::after {
  animation:bell-ripple .95s cubic-bezier(.12,.72,.2,1) both;
}
body.is-bell-ringing .house,
body.is-bell-ringing .focus-house {
  animation:bell-room-shimmer .62s ease-out both;
}
@keyframes bell-layer {
  0% { background:rgba(255,237,164,.08); opacity:1; }
  38% { background:rgba(255,237,164,.18); opacity:1; }
  100% { background:rgba(255,237,164,0); opacity:0; }
}
@keyframes bell-ripple {
  0% { opacity:0; transform:scale(.12); }
  12% { opacity:1; }
  100% { opacity:0; transform:scale(1.65); }
}
@keyframes bell-room-shimmer {
  0%,100% { filter:none; transform:translate3d(0,0,0); }
  18% { filter:brightness(1.08) saturate(1.07); transform:translate3d(0,-1px,0); }
  36% { filter:brightness(1.04) saturate(1.04); transform:translate3d(1px,1px,0); }
  54% { filter:brightness(1.06) saturate(1.05); transform:translate3d(-1px,0,0); }
}