*{box-sizing:border-box}
button,textarea{font-family:inherit}
body{font-family:'Gowun Dodum',sans-serif;background:#f4efeb;color:#333;padding:20px 10px;line-height:1.6;margin:0;display:flex;flex-direction:column;align-items:center;overflow-x:hidden}
.wrap{width:100%;max-width:600px;display:flex;flex-direction:column;gap:20px}
.tw{text-align:center}
.ttl{display:inline-flex;gap:8px;font-family:'Jua',sans-serif;font-size:1.5em;color:#fff;background:#5d4037;padding:12px 30px;border-radius:30px;box-shadow:0 4px 12px rgba(93,64,55,.25);cursor:pointer;border:2px dashed #8d6e63}
.dash,.card{background:#fff;border-radius:20px;padding:25px 15px;box-shadow:0 4px 15px rgba(139,115,85,.06);border:1px solid #f0eae1}
.dash{background:linear-gradient(145deg,#fff,#faf8f5);padding:25px 20px}
.sh{font:1.1em 'Jua',sans-serif;color:#4e342e;margin-bottom:18px}
.ph{display:flex;justify-content:space-between;align-items:flex-end;font-size:.9em;font-weight:bold;margin-bottom:10px;color:#795548}
.pp{font:1.8em/1 'Jua',sans-serif;color:#43a047}
.pb{height:16px;background:#efebe9;border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}
#bar{height:100%;width:0;background:linear-gradient(90deg,#81c784,#4caf50);border-radius:10px;transition:width .8s}
.mt{text-align:center;font-weight:bold;margin-bottom:20px;color:#795548;border-bottom:2px dashed #efebe9;padding-bottom:15px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.wd{font-weight:bold;color:#a1887f;font-size:.8em;padding-bottom:8px}
.wd:first-child{color:#ef5350}.wd:nth-child(7){color:#42a5f5}
.dc{position:relative;display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:8px 4px;min-height:85px;box-shadow:0 2px 4px rgba(0,0,0,.02)}
.dc[data-act]{cursor:pointer;transition:.2s}
.dc[data-act]:hover{transform:translateY(-3px);box-shadow:0 6px 12px rgba(139,115,85,.1)}
.dc.rest{background:#faf8f5;border:1px dashed #d7ccc8;box-shadow:none}
.dc.pf{background:#f1f8e9;border-color:#81c784}.dc.wr{background:#ffebee;border-color:#e57373}
.dt{font-size:.7em;color:#8d6e63;font-weight:bold}
.dn{font-weight:bold;font-size:.8em;color:#e53935;margin:3px 0;background:#ffebee;padding:2px 6px;border-radius:10px}
.sc,.wl{font-size:.55em;line-height:1.3;word-break:break-all;margin-top:4px;font-weight:bold;color:#5d4037;padding:0 2px}
.wl{color:#795548}.wl.red{color:#ef5350}.wl.blue{color:#42a5f5}
.paw{position:absolute;bottom:5px;font-size:1.2em;transform:rotate(-10deg);text-shadow:1px 2px 4px rgba(0,0,0,.15)}
.qh{font:1.4em 'Jua',sans-serif;color:#5d4037;margin-bottom:20px;border-bottom:2px dashed #d7ccc8;padding-bottom:12px}
.rs{text-align:right;margin-bottom:15px;cursor:pointer;font-size:.85em;color:#795548;text-decoration:underline;font-weight:bold}
.rst{text-align:center;margin-bottom:15px;cursor:pointer;font-size:.8em;color:#a1887f;text-decoration:underline;font-weight:bold}
.qi{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid #f0eae1}
.qi.w{border-left:4px solid #c62828;padding-left:10px}.qi.b{border-left:4px solid #ffb300;padding-left:10px}
.stk{display:inline-block;background:#fff3e0;color:#e65100;border:1px dashed #ffb74d;padding:4px 12px;border-radius:15px;font-size:.8em;font-weight:bold;margin-bottom:15px;transform:rotate(-1deg)}
.stk.info{background:#e3f2fd;color:#1565c0;border-color:#90caf9}
.qt{font-weight:bold;margin-bottom:15px;white-space:pre-wrap;word-break:keep-all;line-height:1.7}
.ox{display:flex;gap:15px;justify-content:center;margin-bottom:10px}
.ob{width:65px;height:65px;border-radius:50%;border:2px solid #d7ccc8;background:#fff;font:1.5em 'Jua',sans-serif;cursor:pointer;transition:.2s;box-shadow:0 4px 8px rgba(0,0,0,.06)}
.ob.o{color:#1976d2}.ob.x{color:#d84315}
.ob:hover:not(:disabled){background:#faf8f5;transform:translateY(-3px)}
.ob:disabled{opacity:.5;cursor:not-allowed}.ob.sel{opacity:1}.ob.sel.o{background:#e3f2fd}.ob.sel.x{background:#fbe9e7}
.ex{display:none;font-size:.9em;padding:15px;border-radius:12px;margin-top:10px;white-space:pre-wrap;line-height:1.6;border:1px solid}
.ex.good{border-color:#c8e6c9;background:#f1f8e9;color:#2e7d32}.ex.bad{border-color:#ef9a9a;background:#ffebee;color:#c62828}
.acts{margin-top:15px;display:flex;gap:10px}
.btn{flex:1;padding:10px;border:0;border-radius:10px;background:#8d6e63;color:#fff;font-weight:bold;font-size:.9em;cursor:pointer}
.btn.on{background:#ffb300}
.btn.sm{flex:none;width:100%;padding:12px;margin-bottom:12px;background:#5d4037;font-size:.95em}
.pi{background:#fff9c4;border-left:4px solid #fbc02d;padding:15px;margin-top:15px;box-shadow:2px 4px 8px rgba(0,0,0,.05);transform:rotate(.5deg)}
.pt{font-weight:bold;font-size:.85em;color:#f57f17;margin-bottom:8px}
.qi.w .pi{background:#ffebee;border-color:#ef5350}.qi.w .pt{color:#c62828}
.mm{width:100%;background:transparent;border:0;outline:0;font-size:.9em;line-height:1.5;color:#333;resize:vertical;min-height:60px}
.sb{width:100%;padding:16px;background:#5d4037;color:#fff;border:0;border-radius:12px;font-weight:bold;font-size:1.05em;cursor:pointer;margin-top:15px;box-shadow:0 4px 12px rgba(93,64,55,.25);transition:.2s}
.sb:hover{background:#4e342e}
.emp{text-align:center;padding:20px;color:#795548;font-weight:bold}
.bb{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding-bottom:30px}
.bb button{background:#fff;border:2px solid #e0e0e0;color:#5d4037;border-radius:30px;padding:12px 20px;font-size:.9em;font-weight:bold;cursor:pointer;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.bb button:hover{background:#faf8f5;border-color:#d7ccc8;transform:translateY(-2px)}
.quiz-input{-webkit-appearance:none;appearance:none;border:0;border-bottom:2px solid #8d6e63;border-radius:0;background:transparent;outline:0;width:60px;height:25px;font:bold 16px inherit;text-align:center;padding:0 1px;margin:0 2px;vertical-align:middle;color:#1976d2}
.quiz-input.correct{border-bottom-color:#2196f3}.quiz-input.wrong{border-bottom-color:#f44336;color:#d84315}
table{border:1px solid #d7ccc8;width:100%;border-collapse:collapse;margin-top:10px}
td,th{padding:10px;border:1px solid #eee;vertical-align:middle;line-height:1.5}
.align-left{text-align:left!important;padding-left:10px!important;word-break:keep-all}
mark{padding:0 1px;border-radius:2px;color:inherit;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.hl-y{background:#fff59d}mark.hl-p{background:#f8bbd0}mark.hl-b{background:#b3e5fc}mark.hl-g{background:#c8e6c9}
#hb{position:fixed;z-index:10000;display:none;align-items:center;gap:7px;background:#4a4a4a;padding:8px 12px;border-radius:25px;box-shadow:0 4px 15px rgba(0,0,0,.35)}
#hb .sw{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.9);padding:0;cursor:pointer}
#hb .y{background:#fff59d}#hb .p{background:#f8bbd0}#hb .b{background:#b3e5fc}#hb .g{background:#c8e6c9}
#hb .er{border:0;background:#7a7a7a;color:#fff;border-radius:14px;padding:0 12px;height:24px;font-size:.75em;cursor:pointer;font-weight:bold}
button,.dc{touch-action:manipulation}
/* ===== 첫 화면 업그레이드 ===== */
body{background-image:radial-gradient(#e4d9ce 1px,transparent 1px);background-size:20px 20px}
.sub{margin-top:8px;font-size:.85em;color:#a1887f;font-weight:bold;letter-spacing:.5px}
.dash{position:relative;padding:28px 20px 20px}
.dash::before{content:'';position:absolute;top:-10px;left:50%;width:96px;height:22px;background:rgba(255,202,40,.55);transform:translateX(-50%) rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.hero{display:flex;align-items:center;gap:16px;padding-bottom:18px;margin-bottom:16px;border-bottom:2px dashed #efebe9}
.dd{flex:none;text-align:center;background:#5d4037;color:#fff;border-radius:18px;padding:10px 16px;border:2px dashed #8d6e63;transform:rotate(-2deg);box-shadow:0 4px 12px rgba(93,64,55,.25)}
.dd small{display:block;font-size:.75em;opacity:.85}
.dd b{font:2.2em/1.1 'Jua',sans-serif;color:#ffca28}
.td{flex:1;min-width:0}
.tl{font-size:.8em;color:#a1887f;font-weight:bold}
.tt{font:1.2em 'Jua',sans-serif;color:#4e342e;margin-bottom:8px;word-break:keep-all}
.go{display:none;padding:9px 16px;border:0;border-radius:20px;background:#43a047;color:#fff;font-weight:bold;font-size:.9em;cursor:pointer;box-shadow:0 3px 8px rgba(67,160,71,.3)}
.pb{position:relative;overflow:visible}
.runner{position:absolute;top:-9px;left:0;transform:translateX(-50%) rotate(-10deg);font-size:1.1em;transition:left .8s}
.chips{display:flex;gap:8px;margin-top:16px}
.chip{flex:1;background:#fff;border:1px dashed #d7ccc8;border-radius:12px;padding:8px 4px;text-align:center;font-size:.75em;color:#795548;font-weight:bold}
button.chip{cursor:pointer}
.chip b{display:block;font:1.3em 'Jua',sans-serif;color:#5d4037}
.mt{font:1.05em 'Jua',sans-serif}
.mh{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:12px 0 2px;font:1.05em 'Jua',sans-serif;color:#5d4037}
.mh::after{content:'';flex:1;border-top:2px dashed #e6dcd2}
.dc.now{box-shadow:0 0 0 2px #ffca28,0 4px 10px rgba(139,115,85,.15)}
.dc.now::before{content:'오늘';position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-3deg);background:#ffca28;color:#5d4037;font-size:.6em;font-weight:bold;padding:1px 8px;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.lg{margin-top:14px;text-align:center;font-size:.75em;color:#a1887f}
/* ===== 디자인 v3: 동글동글 + 정돈 ===== */
:root{--ink:#4e342e;--ink2:#795548;--line:#efe6dc;--gold2:#ffd77a}
body{background:#f6f0e8}
.dash::before{content:none}
.dash{background:linear-gradient(145deg,#5d4037,#3b2a22);color:#fbeee0;border:0;border-radius:28px;padding:26px 20px 18px;box-shadow:0 12px 26px rgba(59,42,34,.25)}
.hero{border-bottom:2px dashed rgba(255,255,255,.18);padding-bottom:18px;margin-bottom:16px}
.dd{background:none;border:0;box-shadow:none;transform:none;padding:0;text-align:left;color:inherit}
.dd small{font-size:.8em;opacity:.75}
.dd b{font-size:2.8em;color:var(--gold2)}
.td{text-align:right}
.tl{color:rgba(251,238,224,.65)}
.tt{color:#fff}
.go{background:var(--gold2);color:var(--ink);box-shadow:none}
.sh{color:rgba(251,238,224,.88)}
.ph{color:rgba(251,238,224,.7)}
.pp{color:var(--gold2)}
.pb{height:12px;background:rgba(255,255,255,.14);border-radius:12px}
#bar{background:linear-gradient(90deg,#ffca28,#ffe082);border-radius:12px}
.runner{top:-8px}
.chips{gap:8px}
.chip{background:rgba(255,255,255,.1);border:0;border-radius:16px;color:rgba(251,238,224,.75);padding:10px 4px;font-size:.78em}
.chip b{color:#fff}
.card{border-radius:26px;border-color:var(--line);box-shadow:0 6px 18px rgba(93,64,55,.06)}
.dc{border-radius:16px;border-color:var(--line);padding:9px 4px 8px}
.dc.rest{border:1px solid var(--line);background:#faf6f1}
.dn{background:#fdecea;color:#e0685c;font-size:.68em;padding:1px 7px;margin:3px 0 4px}
.sc,.wl{font-size:.66em;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.dc.pf{background:#f1f8e9;border-color:#a5d6a7}.dc.wr{background:#fff0ee;border-color:#ef9a9a}
/* 폰 세로 화면 대응: D-day 줄바꿈 방지 + 좁은 화면에서는 위아래로 배치 */
.dd b{display:block;white-space:nowrap;font-size:clamp(2.2em,12vw,2.8em)}
@media (max-width:420px){
.hero{flex-direction:column;align-items:flex-start;gap:12px}
.td{width:100%;text-align:left}
.go{width:100%;padding:11px 18px}
}