:root{ --gap: 2vw; --radius: 12px; --border: 2px solid black; --fg:#111; --bg:#Fff; --muted:#787878; --card:#fff; }
*{box-sizing:border-box}
html,body{height:100%;font-family: 'Noto Serif KR', serif; }
body{ margin:0;color:var(--fg); background:var(--bg); display:flex; min-height:100dvh; }
.page{width:min(1080px, 100%); margin:0 auto; display:flex; flex-direction:column; gap:var(--gap); padding:var(--gap)}
.hero{flex:1; min-height:48dvh; padding:3vw;border:1.4px solid black; border-radius:9px;font-weight:600;font-size:5vw;}
.subhead{padding:13px 2vw; font-weight:600; font-size:3.2vw; height:4vh;width:25vw;display:flex;align-items:center;justify-content:center;border:1.4px solid black; border-radius:9px; position:relative;}
.day-nav.outside{ position:relative;margin-top:-36px;display:flex;gap:8px;justify-content:flex-end;padding-right:12px;}
.day-nav.outside button{ padding:0; border:none; border-radius:10px; background:#fff; cursor:pointer;}
.strip{padding:var(--gap);border:1.4px solid black;  border-radius:9px;position:relative;}
.strip .icons{display:grid; grid-template-columns:repeat(7, 1fr); gap:9px; margin-bottom:9px; }
.icons-edit-bar{ position:absolute; right:12px; top:-5vh; }
.icons-edit{ padding:4px 10px; border:none; border-radius:10px; background:#fff; cursor:pointer; }
.icon{height:44px; border:var(--border); border-radius:10px; background:var(--card); height:3vh;font-size:3vw;font-weight:600;border:1.4px solid black;}
.strip .cards{ display:grid; grid-template-columns:repeat(7, 1fr); gap:9px; }
.card{height:160px;  border:var(--border); border-radius:9px; height:19vh; font-size:4vw;line-height: 1.5;}
nav.bottom{ position:sticky; bottom:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:9px; z-index:5;  font-size:4.5vw;}
.nav-btn{height:10vh; border:var(--border); border-radius:9px; border:1.4px solid black;}
button,a.btn{all:unset; display:block; cursor:pointer; text-align:center; padding:10px; border-radius:10px; border:var(--border); background:#f6f6f6}
.row{display:flex; gap:10px}
.muted{color:var(--muted); font-size:14px}
.icon, .card, .nav-btn { display:flex; align-items:center; justify-content:center; text-align:center; }
.s {border:1.4px solid red !important;}
.t {border:1.4px solid blue !important;}
.task{ display:flex; align-items:center; width:100%; }
.task span{ order:1; margin-right:auto; }
.task input[type="checkbox"]{ order:2; margin-left:9px;}
.icon.done { background:#FFF3B0; border-color:#F1C40F;}
.sheet{position:fixed;left:50%;transform:translateX(-50%);top:0;width:100vw;background:#fff;border:2px solid #222;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:4; height: 100vh;}
.sheet[hidden]{display:none}
.sheet-actions{display:flex;gap:8px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #eee;font-weight:700}
.sheet-body{padding:14px;max-height:40vh;overflow:auto}
.sheet-body textarea{width:100%;min-height:28vh;border:1px solid #ccc;border-radius:10px;padding:10px;font:inherit;resize:vertical}
.sheet-body .save-row{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.sheet-body .save-btn,.sheet-body .cancel-btn{padding:6px 12px;border:1px solid #222;border-radius:10px;background:#fff;cursor:pointer}
.sheet-edit,.sheet-close{border:1px solid #222;border-radius:10px;background:#fff;cursor:pointer;padding:4px 10px}