/* 그로스노트 — 화면 스타일. 건강수첩 틀 + 가계부 설정(.set) 패턴을 가져와 피드백 카드·숙제·메모를 얹었다. */
:root{
  --lang:#2a78d6; --sense:#d6822a; --vh:#c92f2f;
  --bg:#fcfcfb; --card:#fff; --line:#e6e6e3; --soft:#f1f1ef;
  --ink:#0b0b0b; --sub:#52514e; --muted:#8a8984;
  --accent:#2a9d6f; --accent-soft:#e6f5ee;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:'Noto Sans KR','Apple SD Gothic Neo',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
.main{padding:8px 16px 96px;max-width:560px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 16px 4px;max-width:560px;margin:0 auto}
.top h1{font-size:24px;font-weight:800}
.top .right{display:flex;gap:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;margin-bottom:12px}
.sec{font-size:13px;font-weight:800;color:var(--sub);margin:18px 2px 8px}
.sec:first-child{margin-top:0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{font-size:14px;padding:7px 13px;border-radius:99px;border:1px solid var(--line);color:var(--sub);background:#fff}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.empty{color:var(--muted);text-align:center;padding:24px 0;font-size:14px;white-space:pre-line}
.empty.small{padding:10px 0;font-size:13px}
.muted{color:var(--muted);font-size:13px}
/* 배지 */
.badge{display:inline-block;font-size:13px;font-weight:700;padding:4px 10px;border-radius:99px}
.badge-언어{background:#e8f1fc;color:var(--lang)}
.badge-감통{background:#fbeee0;color:var(--sense)}
/* 피드백 카드(홈) */
.list{display:flex;flex-direction:column;gap:10px}
.entry-card{cursor:pointer;padding:14px 16px}
.entry-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.entry-title{font-size:17px;font-weight:800;margin-bottom:4px}
.entry-title.small{font-size:15px;margin-bottom:10px}
.entry-preview{font-size:14px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 상세 */
.back{font-size:15px;font-weight:700;color:var(--accent);padding:6px 0}
.entry-h{font-size:21px;font-weight:800;margin:10px 0 14px}
.content{font-size:15px;line-height:1.7;margin-bottom:8px}
.content-h{font-weight:800;font-size:16px;margin:14px 0 4px}
.content-h:first-child{margin-top:0}
.content-p{white-space:pre-wrap}
.content-sp{height:8px}
/* 원본 전문(접기) */
.raw-details{margin-bottom:14px}
.raw-details summary{font-size:13px;font-weight:700;color:var(--sub);padding:8px 0;cursor:pointer}
.raw-text{white-space:pre-wrap;font-size:14px;line-height:1.7;color:var(--sub);background:var(--soft);border-radius:14px;padding:12px 14px;margin-top:6px}
/* 숙제 */
.hw-card{padding:10px 14px}
.hw-entry{padding:14px 16px}
.hw-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--soft)}
.hw-row:first-child{border-top:0}
.hw-row input{width:20px;height:20px;accent-color:var(--accent)}
.hw-text{flex:1;font-size:15px}
.hw-row.done .hw-text{color:var(--muted);text-decoration:line-through}
.hw-who{font-size:12px;color:var(--accent);font-weight:700;white-space:nowrap}
/* 메모 */
.memo-card{padding:10px 14px}
.memo-row{padding:10px 0;border-top:1px solid var(--soft)}
.memo-row:first-child{border-top:0}
.memo-meta{display:flex;gap:8px;align-items:baseline;margin-bottom:3px}
.memo-meta b{font-size:14px}
.memo-text{font-size:15px;white-space:pre-wrap}
.memo-form{display:flex;gap:8px;align-items:flex-end;margin-top:4px}
.memo-input{flex:1;border:1px solid var(--line);border-radius:14px;padding:12px;font-size:15px;resize:none;background:#fff}
/* 출석 */
.att-banner{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:15px;padding:13px 16px;border-radius:16px;margin-bottom:12px}
.nav{display:flex;align-items:center;gap:10px;margin:8px 0 14px}
.nav button{font-size:20px;color:var(--sub);padding:0 6px}
.nav .lbl{flex:1;text-align:center;font-weight:800;font-size:16px}
.att-summary{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700}
.att-miss-line{color:var(--vh)}
.att-card{padding:6px 14px}
.att-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--soft)}
.att-row:first-child{border-top:0}
.att-row.clickable{cursor:pointer}
.att-date{flex:1;font-size:14px}
.att-ok{font-size:13px;color:var(--accent);font-weight:700}
.att-miss{font-size:13px;color:var(--vh);font-weight:700}
.claim-card{padding:14px 16px}
.claim-card.warn{background:#fbecec;border-color:#f0c9c9}
.claim-row{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:700;margin-bottom:4px}
/* 설정 줄(가계부와 같다) */
.set{display:flex;justify-content:space-between;align-items:center;padding:12px 2px;border-bottom:1px solid #f0f0ee;gap:8px;width:100%;text-align:left}
.set:last-child{border-bottom:0}
.set small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.small-btn{font-size:13px;color:var(--accent);font-weight:700;margin-left:6px;white-space:nowrap}
.small-btn.red{color:var(--vh)}
/* 탭 줄 */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar>div{display:flex;max-width:560px;margin:0 auto}
.tabbar button{flex:1;padding:10px 0 12px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px}
.tabbar button b{font-size:19px;font-weight:400}
.tabbar .on{color:var(--accent);font-weight:800}
/* 잠금·안내 */
.center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;gap:14px}
.center .logo{font-size:56px}.center h1{font-size:24px}.center p{color:var(--sub);line-height:1.6}
.b1{background:var(--accent);color:#fff;font-weight:800;font-size:17px;padding:15px 28px;border-radius:16px;min-width:220px}
.b2{background:var(--soft);color:var(--ink);font-weight:700;font-size:16px;padding:14px 22px;border-radius:14px}
.b1:disabled{opacity:.5}
/* 토스트·확인창 */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#222;color:#fff;padding:11px 18px;border-radius:12px;font-size:14px;z-index:50;max-width:88vw;text-align:center}
.dlgveil{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;justify-content:center;z-index:40}
.dlg{background:#fff;border-radius:22px 22px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom));width:100%;max-width:560px}
.dlg h3{font-size:18px;margin-bottom:8px}.dlg p{color:var(--sub);font-size:14px;margin-bottom:14px;line-height:1.5}
.dlg .btns{display:flex;gap:10px;margin-top:4px}.dlg .btns button{flex:1}
body.busy::before{content:"";position:fixed;top:0;left:0;height:3px;width:40%;background:var(--accent);animation:bar 1s linear infinite;z-index:60}
@keyframes bar{from{left:-40%}to{left:100%}}