@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{--paper:#f5f2eb;--ink:#293e34;--muted:#85877b;--line:#dedfd3;--green:#496b4e;--sand:#e8b65d;--coral:#d67b62;--sage:#8da883;--blue:#7d9fab;--lilac:#ad93b8;--rose:#cf9da3;--aqua:#75aaa1;--gold:#bc9750}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans','Noto Sans KR',sans-serif;-webkit-font-smoothing:antialiased}button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #a9ba86;outline-offset:5px}.site-header{height:112px;max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 52px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);font-weight:700;font-size:24px;letter-spacing:-1px}.brand-mark{width:34px;height:37px;border:1.5px solid var(--ink);border-radius:10px;display:grid;place-content:center;position:relative;font-family:Georgia,serif;font-style:italic;font-size:31px;line-height:1}.brand-mark span{position:absolute;right:5px;top:3px;font-size:23px;color:#b79050}.brand-tag{font-size:10px;color:var(--muted);font-weight:400;letter-spacing:1.2px;margin-left:10px;border-left:1px solid var(--line);padding-left:22px}.icon-button{width:40px;height:40px;border:1px solid var(--line);background:transparent;border-radius:50%;font-size:21px;position:relative}.sound-dot{position:absolute;width:6px;height:6px;background:#aaa99c;border-radius:50%;right:5px;bottom:6px}.sound-on .sound-dot{background:#6d8e60}main{max-width:1056px;margin:auto;padding:0 28px}.intro{text-align:center;padding:45px 0 47px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2.3px;color:var(--muted)}.intro .eyebrow{display:flex;justify-content:center;align-items:center;gap:8px;color:#77836b}.intro .eyebrow span{width:5px;height:5px;background:#91a27a;border-radius:50%}h1{font-size:45px;line-height:1.42;font-weight:500;letter-spacing:-2.2px;margin:20px 0 17px}.period{color:#ba8f55}.intro p{font-size:12px;line-height:1.9;color:var(--muted);margin:0}.game{border:1px solid #dadfcf;border-radius:18px;background:#faf9f4;overflow:hidden;box-shadow:0 8px 28px #35432a03}.game-top{padding:28px 34px 20px;display:flex;align-items:center;justify-content:space-between}.level-heading .eyebrow{font-size:8px;letter-spacing:1.8px}h2{font-size:24px;font-weight:500;margin:8px 0 0;letter-spacing:-.7px}.level-chip{display:inline-block;vertical-align:middle;margin-left:13px;background:#edf0e6;color:#7b886b;font-size:10px;padding:6px 9px;border-radius:5px;letter-spacing:0}.difficulty-label select{background:#faf9f4;border:1px solid var(--line);border-radius:7px;padding:9px 11px;font-size:11px;cursor:pointer}.game-stats{height:43px;background:#f1f2e9;border-top:1px solid #e6e8dc;border-bottom:1px solid #e6e8dc;display:flex;align-items:center;gap:27px;padding:0 34px;font-size:9px;letter-spacing:1.2px;color:#8d9282}.game-stats>span{display:flex;align-items:center;gap:8px}.game-stats strong{font-size:12px;font-weight:500;letter-spacing:.3px;color:#58634e;min-width:20px}.tiny-circle{width:7px;height:7px;border:1px solid #9ca58e;border-radius:50%}.tiny-clock{width:9px;height:9px;border:1px solid #9ca58e;border-radius:50%;position:relative}.tiny-clock:after{content:'';position:absolute;left:3px;top:1px;height:3px;border-left:1px solid #9ca58e}.game-stats .save-status{margin-left:auto;font-size:9px;letter-spacing:0}.save-status i{width:4px;height:4px;border-radius:50%;background:#8fa477}.play-area{position:relative;padding:42px 38px 26px;background:radial-gradient(ellipse at 50% 90%,#dce3cc30,transparent 60%)}.board{display:flex;gap:23px;flex-wrap:wrap;justify-content:center;align-items:flex-end;min-height:212px;padding:8px 0 24px;max-width:740px;margin:auto}.tube-button{border:0;background:transparent;padding:10px 8px 0;position:relative;display:flex;flex-direction:column;align-items:center;gap:15px;transition:transform .25s ease;isolation:isolate}.tube-button:before{content:'';position:absolute;width:70px;height:9px;border-radius:50%;background:#42523b0b;bottom:30px;filter:blur(3px);z-index:-1}.tube{width:61px;height:171px;border:2px solid #c8d0c3;border-top:0;border-radius:0 0 24px 24px;position:relative;background:linear-gradient(90deg,#edf1e84d,#fff8 30%,#fff2 65%,#dce3d966);padding:5px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:inset 3px 0 4px #fff9;transition:border-color .2s}.tube:before{content:'';position:absolute;left:-5px;right:-5px;top:-5px;height:7px;border:2px solid #c8d0c3;border-radius:4px;background:#f8faf3;z-index:2}.tube:after{content:'';position:absolute;top:8px;bottom:21px;left:9px;width:3px;background:#ffffff59;border-radius:3px;pointer-events:none}.sand-stack{display:flex;flex-direction:column-reverse;justify-content:flex-start;height:144px;border-radius:0 0 17px 17px;overflow:hidden}.sand-layer{height:36px;flex-shrink:0;background-color:var(--color);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.15' filter='url(%23n)' d='M0 0h80v80H0z'/%3E%3C/svg%3E");box-shadow:inset 0 1px #ffffff28;position:relative}.sand-layer:last-child{border-radius:35% 25% 0 0 / 5px 4px 0 0}.tube-number{font-size:9px;letter-spacing:1px;color:#afb2a3}.tube-button.selected{transform:translateY(-15px)}.tube-button.selected .tube,.tube-button.hinted .tube{border-color:#719262;box-shadow:0 0 0 5px #a7ba901f}.tube-button.selected .tube:before{border-color:#719262}.tube-button.complete .tube-number{color:#739066}.tube-button.complete .tube-number:after{content:' ✓'}.tube-button.hinted{animation:hint 1s ease-in-out infinite}.tube-button.invalid{animation:shake .3s}.board-caption{text-align:center;font-size:11px;min-height:19px;color:#919583;line-height:1.7}.game-bottom{border-top:1px solid #e5e7db;padding:19px 31px;display:flex;justify-content:space-between;align-items:center;min-height:81px}.tools{display:flex;gap:10px}.tool{display:flex;gap:8px;align-items:center;justify-content:center;background:transparent;border:1px solid #dce0d1;border-radius:7px;padding:10px 13px;font-size:10px;transition:background .2s}.tool:hover:not(:disabled){background:#edf0e4}.tool>span{font-size:18px;line-height:1;color:#829173}.progress-note{font-size:9px;color:#949a85;display:flex;align-items:center;gap:8px}.mini-sands{color:#c9b88f;font-size:8px;letter-spacing:-1px}.next{border:0;border-radius:7px;background:#38573e;color:white;padding:12px 18px;font-size:12px}.next span{margin-left:16px}.next[hidden]{display:none}.how-to{display:flex;justify-content:space-between;gap:22px;padding:37px 2px 47px}.how-title h3{font-size:15px;font-weight:500;letter-spacing:-.5px;margin:9px 0}.how-title .eyebrow{font-size:7px;letter-spacing:1.5px}.rule{display:flex;gap:12px;padding-top:4px}.rule-number{font-family:Georgia,serif;font-size:20px;font-style:italic;color:#b1ba9d}.rule h4{font-size:11px;font-weight:500;margin:0 0 7px}.rule p{font-size:9px;margin:0;color:#929582;line-height:1.8}footer{max-width:1176px;border-top:1px solid var(--line);padding:24px 0 30px;margin:auto;display:flex;justify-content:space-between;font-size:9px;color:#999d8e;letter-spacing:.4px}footer>span:nth-child(2){font-size:8px;letter-spacing:1.5px}.footer-star{margin:0 10px;color:#a5ad91}.stream{position:absolute;pointer-events:none;height:3px;transform-origin:left center;background:var(--color);opacity:0;z-index:5;border-radius:3px}.stream.active{animation:pour .42s ease}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}dialog{border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);padding:30px;max-width:calc(100% - 40px)}dialog::backdrop{background:#243c3270;backdrop-filter:blur(4px)}dialog h2{margin-top:16px}dialog p{font-size:13px;color:var(--muted)}.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:26px}.game.won{border-color:#94ae7b}.game.won .play-area{background:radial-gradient(ellipse at center,#e4edcf70,transparent 75%)}@keyframes hint{50%{transform:translateY(-7px)}}@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}@keyframes pour{0%,100%{opacity:0}20%,80%{opacity:.9}}@media(min-width:1400px){.intro{padding-top:60px}}@media(max-width:800px){.site-header{padding:0 27px;height:85px}.brand-tag{display:none}.intro{padding:30px 0 36px}h1{font-size:36px}.how-to{display:grid;grid-template-columns:1fr 1fr;gap:25px}.board{gap:13px}.tube{width:55px}footer{margin:0 28px}footer>span:last-child{display:none}.progress-note{display:none}}@media(max-width:480px){main{padding:0 16px}.intro{padding:22px 0 30px}h1{font-size:32px;margin-top:16px}.intro p{font-size:11px}.game-top{padding:22px 18px 18px}.level-chip{display:none}.difficulty-label select{font-size:10px;padding:8px}.game-stats{padding:0 18px;gap:17px}.game-stats .save-status{font-size:8px}.play-area{padding:28px 12px 21px}.board{gap:9px;max-width:310px;min-height:205px}.tube-button{padding:7px 5px 0;gap:12px}.tube{width:47px;height:148px;border-radius:0 0 21px 21px;padding:4px}.sand-stack{height:124px;border-radius:0 0 15px 15px}.sand-layer{height:31px}.board-caption{font-size:10px}.game-bottom{padding:15px 16px;gap:9px;flex-wrap:wrap}.tools{gap:7px}.tool{padding:8px 10px;font-size:10px;gap:5px}.next{padding:10px 12px}.how-to{padding:30px 5px 34px;gap:23px 12px}.how-title h3{font-size:13px}.rule{gap:9px}.rule p{font-size:8px}footer{font-size:8px;margin:0 20px;gap:8px}footer>span:nth-child(2){font-size:6px;letter-spacing:.8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}