/* app/_shell.css — 20화면 공통 껍데기
   규격: docs/DESIGN_v1.md (P-011 · 시안2 상황판 · 밝은 화면)
   ⚠️ 색값·글자 크기를 화면 파일에 직접 쓰지 말 것. 전부 여기서 가져다 쓴다.
   ⚠️ 클래스 이름은 옛것을 그대로 유지한다 — 기존 화면을 폐기하지 않고 갈아입히기 위함 (부칙8-5) */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root{
  --bg:#FFFFFF; --panel:#F5F7F9;
  --ink:#0F1418; --ink2:#59636D; --ink3:#667079;
  --rule:#E6EAEE;
  --lv1:#D0342C; --lv2:#E08700; --lv3:#2563A8; --lv4:#A8B2BB;
  --lv1bg:#FCE9E7; --lv1tx:#A82A22; --lv2bg:#FBF0DC; --lv2tx:#8A5300;
  --ok:#1E6B47; --okbg:#E4F2EA;
  --nav-w:184px; --pad-x:32px; --max-w:900px;
  --gap-sec:32px; --pad-row:14px; --bar-w:6px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}

/* ── 버튼 · 입력 ─────────────────────────────────
   주 버튼(.primary)은 구획당 1개만 쓴다 (규격 5) */
button{font:inherit;font-size:12.5px;padding:6px 12px;border:1px solid var(--rule);
  border-radius:6px;background:var(--bg);color:var(--ink2);cursor:pointer}
button:hover{border-color:var(--ink3)}
button.primary{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
button:disabled{opacity:.45;cursor:default}
button:focus-visible{outline:2px solid var(--lv3);outline-offset:2px}
input[type=email],input[type=text]{font:inherit;width:100%;padding:11px 13px;border-radius:6px;
  border:1px solid var(--rule);background:var(--bg);color:var(--ink);margin-bottom:10px}
input:focus-visible{outline:2px solid var(--lv3);outline-offset:1px}

/* ── 뼈대 ───────────────────────────────────────── */
#os{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);min-height:100vh}

nav{background:var(--panel);padding:20px 0 40px}
nav .brand{font-size:11px;font-weight:800;letter-spacing:.04em;padding:0 18px;margin-bottom:20px}
nav .g{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--ink3);padding:0 18px;margin:15px 0 4px}
nav a.m{display:flex;justify-content:space-between;gap:8px;padding:6px 18px;
  font-size:13.5px;color:var(--ink2)}
nav a.m:hover{color:var(--ink)}
nav a.m.on{background:var(--bg);color:var(--ink);font-weight:700}
nav a.m .n{color:var(--ink3);font-size:12px}
nav a.m .n.hot{color:var(--lv1);font-weight:700}
nav .sub{padding-left:30px;font-size:13px}

main{min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:20px var(--pad-x) 16px;flex-wrap:wrap}
.topbar h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0}
.topbar .who{font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:6px}
.body{padding:0 var(--pad-x) 70px;max-width:var(--max-w)}

/* ── 구획 — 사방 테두리 카드 금지 (규격 1) ───────── */
.card{background:transparent;border:0;padding:0;margin-bottom:var(--gap-sec)}
.h2{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.note{font-size:12.5px;color:var(--ink3);line-height:1.65}
.err{color:var(--lv1);font-size:13px;word-break:break-all}
.empty{padding:20px 0;font-size:13.5px;color:var(--ink2)}
.empty b{color:var(--ink)}

/* ── 줄 — 아랫줄만. 급함은 왼쪽 띠로만 (규격 2) ──── */
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:var(--pad-row) 0;border-bottom:1px solid var(--rule)}
.row .t{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.row .when{font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 7px;
  border-radius:3px;background:var(--panel);color:var(--ink2);margin-right:9px}
.row .when.late{background:var(--lv1bg);color:var(--lv1tx)}
.row .when.soon{background:var(--lv2bg);color:var(--lv2tx)}
.row .area{color:var(--ink3);font-size:12px;font-weight:400;margin-left:8px}
.row .acts{display:flex;gap:6px;flex:none;flex-wrap:wrap}

/* 왼쪽 색 띠를 쓰는 줄 — 새 화면은 이쪽을 쓴다 */
.r{display:grid;grid-template-columns:var(--bar-w) minmax(0,1fr) auto;gap:0 15px;
  align-items:center;border-bottom:1px solid var(--rule)}
.r .bar{align-self:stretch;background:var(--lv4)}
.r.l1 .bar{background:var(--lv1)}
.r.l2 .bar{background:var(--lv2)}
.r.l3 .bar{background:var(--lv3)}
.r .mid{padding:var(--pad-row) 0}
.r .right{display:flex;align-items:center;gap:14px;padding:var(--pad-row) 0}
.tag{font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:3px;
  background:var(--panel);color:var(--ink2)}
.tag.l1{background:var(--lv1bg);color:var(--lv1tx)}
.tag.l2{background:var(--lv2bg);color:var(--lv2tx)}
.tag.l3{background:#E7EFF8;color:var(--lv3)}
.money{font-size:20px;font-weight:800;letter-spacing:-.03em}

/* ── 묶음 제목 · 경보 · 강조 블록 ────────────────── */
.grp{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink3);margin:18px 0 4px}
.grp.late{color:var(--lv1)} .grp.soon{color:var(--lv2tx)} .grp.today{color:var(--ink2)}

.strip{border-left:var(--bar-w) solid var(--lv2);background:var(--lv2bg);
  border-radius:0 8px 8px 0;padding:11px 15px;margin-bottom:16px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.strip span{font-size:12.5px;color:var(--lv2tx)}
.blk{border-left:var(--bar-w) solid var(--lv4);background:var(--panel);
  padding:16px 20px;border-radius:0 8px 8px 0}
.blk.l1{border-left-color:var(--lv1)}
.blk.l2{border-left-color:var(--lv2)}
.blk.l3{border-left-color:var(--lv3)}

.tabs{display:flex;gap:18px;border-bottom:1px solid var(--rule);padding-bottom:9px;
  margin-bottom:16px;font-size:13.5px;flex-wrap:wrap}
.tabs a{color:var(--ink3);cursor:pointer}
.tabs a.on{color:var(--ink);font-weight:700;box-shadow:0 10px 0 -8px var(--ink)}

.bar{display:flex;justify-content:space-between;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--rule);font-size:12.5px;color:var(--ink2)}
.bar:last-child{border-bottom:0}
.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink3);border-top:1px solid var(--rule);
  padding-top:13px;margin-top:32px}
.foot.warn{color:var(--lv2tx)}

/* ── 좁은 화면 ──────────────────────────────────── */
#burger{display:none}
@media(max-width:760px){
  :root{--pad-x:16px}
  #os{grid-template-columns:1fr}
  nav{position:fixed;inset:0 auto 0 0;width:210px;z-index:20;transform:translateX(-100%);
    transition:transform .18s;overflow:auto;border-right:1px solid var(--rule)}
  nav.open{transform:none}
  #burger{display:inline-block}
  .topbar{padding:14px var(--pad-x) 12px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.cap{font-size:12.5px;color:var(--ink2);margin:-4px 0 12px}