/* 화면 부품 — 토큰은 styles.css */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));
  padding-top:calc(10px + env(safe-area-inset-top,0px));background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{font-weight:900;font-size:19px;color:var(--fg);text-decoration:none;letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px}
.brand small{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.04em}
.who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-width:0}
.who button,.linkbtn{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:4px}
.who a{color:var(--accent);font-weight:700;font-size:13px}
.loading{color:var(--muted);text-align:center;padding:40px 0}

h2.page{font-size:24px;font-weight:900;letter-spacing:-.02em;margin:2px 4px 2px;text-wrap:balance}
p.lead{color:var(--muted);margin:0 4px 10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.muted{color:var(--muted)}
.small{font-size:13px}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);padding:22px;text-align:center;color:var(--muted)}

/* 폼 */
form.card{display:grid;gap:14px}
label.field{display:grid;gap:6px;font-weight:700;font-size:14px}
label.field span.hint{font-weight:500;color:var(--muted);font-size:12px}
input[type=text],input[type=date],select,textarea{width:100%;font:inherit;font-size:16px;color:var(--fg);background:var(--bg);
  border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
textarea{min-height:110px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0}
.chip span{display:inline-block;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);font-weight:700;font-size:14px;background:var(--surface)}
.chip input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}

/* 별점 */
.rating{display:grid;gap:6px}
.rating .stars{display:flex;gap:6px}
.rating label{position:relative}
.rating input{position:absolute;opacity:0;inset:0}
.rating label span{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);
  font-weight:800;background:var(--surface);font-variant-numeric:tabular-nums}
.rating input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.rating input:focus-visible+span{outline:3px solid var(--fg);outline-offset:2px}

/* 목록·상태 */
.list{display:grid;gap:10px}
a.card{display:block;color:inherit;text-decoration:none}
.status{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;border:1.5px solid currentColor}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-received,.s-reviewing{color:var(--muted)}
.s-planned,.s-rereview{color:var(--warn)}
.s-done{color:var(--good)}
.s-rejected{color:#c2410c}
.d-adopted,.d-partial{color:var(--good)}
.d-hold{color:var(--warn)}
.d-rejected{color:#c2410c}
.daygroup h3{font-size:14px;font-weight:800;margin:18px 4px 8px;color:var(--muted)}
.daygroup h3.today{color:var(--accent)}
.meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.score{font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums}

/* 타임라인 */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.timeline li{border-left:3px solid var(--line);padding:2px 0 2px 12px}
.timeline li:last-child{border-left-color:var(--accent)}
.timeline b{display:block;font-size:14px}
.timeline span{font-size:12px;color:var(--muted)}

/* 개선 사례 흐름 */
.flow{display:grid;gap:6px;margin-top:10px;font-size:14px}
.flow div{display:grid;grid-template-columns:62px 1fr;gap:8px}
.flow dt,.flow .k{color:var(--muted);font-size:12px;font-weight:700;padding-top:2px}

/* 관리자 */
.tabs{display:flex;gap:6px;overflow-x:auto;margin:4px 0 14px;padding-bottom:2px}
.tabs button{flex:none;border:1.5px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.sm{padding:8px 12px;font-size:13px}
.btn.ghost{background:transparent;color:var(--fg);border:1.5px solid var(--line)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpis .stat b{font-size:22px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:20;
  background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.toast.error{background:#c2410c;color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* 의견 보내기: 하단 시트 */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.4);display:flex;align-items:flex-end;justify-content:center}
.sheet .card{width:100%;max-width:560px;margin:0;border-radius:16px 16px 0 0;display:grid;gap:10px}

/* 알림 종 배지 */
#bell{position:relative}
.badge{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:#fff;font-size:10px;line-height:16px;text-align:center}

/* 상단바: 한 줄 유지(좁은 폰에서 줄바꿈 방지) */
.topbar{flex-wrap:nowrap}
.brand{white-space:nowrap;font-size:17px}
.brand small{display:none}
.who{gap:6px;flex-shrink:1;white-space:nowrap}
.who button,.who a{font-size:12px;padding:4px 2px;white-space:nowrap}
.who span{max-width:7em;overflow:hidden;text-overflow:ellipsis}
/* 라벨과 힌트를 한 줄에, 입력칸은 그 아래 (세로 길이 절약) */
label.field{display:block}
label.field>:is(input,select,textarea){display:block;width:100%;margin-top:6px;box-sizing:border-box}
label.field span.hint{display:inline;margin-left:6px}

/* SVG 아이콘 */
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;flex:none}
.tabbar .ic{width:18px;height:18px;vertical-align:0}
.who button{display:inline-flex;align-items:center;gap:3px}

/* 폼 세로 길이 줄이기 */
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}
.two label.field{min-width:0}
form.card{gap:10px;padding:14px}
form.card textarea{min-height:76px;height:76px}
form.card textarea[name=body]{min-height:100px;height:100px}
.card{padding:14px;margin-bottom:10px}
p.lead a{color:var(--accent)}
.hero p{font-size:14px}

/* 운영 탭: 가로 스크롤 대신 줄바꿈으로 전부 보이게 */
.tabs{flex-wrap:wrap;overflow:visible}
.tabs button{padding:6px 12px;font-size:14px}
/* 홈을 한 화면에: 작은 히어로·한 줄 통계·한 줄 메뉴 */
.hero-compact{padding:14px 16px}
.hero-compact h1{font-size:20px;margin:0 0 10px}
.hero-compact .btn{padding:8px 14px;font-size:14px}
.card.lunch{padding:10px 14px;margin:10px 0}
.statline{display:flex;justify-content:space-around;gap:8px;font-size:13px;color:var(--muted);margin:2px 0 6px}
.statline b{color:var(--fg);font-size:17px;font-variant-numeric:tabular-nums}
.mrow{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:8px}
.mrow .mname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.opt{margin:-2px 0}
details.opt>summary{cursor:pointer;font-weight:700;font-size:14px;padding:4px 0}
details.opt .two{margin-top:8px}

/* 불만 접수 폼을 한 화면에 */
form.card textarea[name=body]{min-height:84px;height:84px}
form.card textarea[name=suggestion]{min-height:52px;height:52px}
form.card .chip span{padding:6px 12px}
form.card .chips{gap:6px}
form.card>p.small{font-size:12px}
p.lead{font-size:14px;margin-bottom:6px}
h2.page{font-size:22px}
.tabbar a[aria-current] .ic{fill:color-mix(in srgb,var(--accent) 16%,transparent)}

/* 앱 설치 안내(홈) */
.installbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;margin:10px 0 0;font-size:13px}
.installbar .row{gap:6px;flex:none}

.nickline{margin:4px 4px 0}