:root { color-scheme: light; --green:#4DB88C; --green-d:#23735A; --ink:#173D32; --muted:#55685F; --line:#DDE5E1; --bg:#F6F8F7; --cream:#FBFAF6;
  --sky:#CFEAF6; --butter:#F6E7AF; --peach:#F6D1C9; --aqua:#C5EAE7; --red:#B3261E; --yellow:#FFF4CC; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif; color:var(--ink); background:var(--bg); font-size:16px; line-height:1.6; word-break:keep-all; }
.hidden { display:none !important; }
h1,h2,h3 { line-height:1.3; margin:0 0 8px; }
.muted { color:var(--muted); }
.brand { font-weight:800; letter-spacing:.1em; color:var(--green-d); }
.brand small { font-weight:600; letter-spacing:0; color:var(--muted); margin-left:6px; }
.btn { font:inherit; font-weight:600; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:10px; padding:9px 16px; cursor:pointer; }
.btn:hover { border-color:var(--green-d); }
.btn.primary { background:var(--green-d); border-color:var(--green-d); color:#fff; }
.btn.danger { color:var(--red); border-color:#E8C7C4; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--muted); }
.btn.small { padding:5px 10px; font-size:14px; border-radius:8px; }
.btn.wide { width:100%; padding:12px; margin-top:12px; }
.btn:disabled { opacity:.5; cursor:default; }

/* 로그인 */
.login { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:min(420px,100%); background:#fff; border:1px solid var(--line); border-radius:20px; padding:32px; }
.login-card h1 { font-size:26px; }
.login-card label { display:block; font-weight:600; margin:18px 0 6px; }
.login-card input { width:100%; font:inherit; padding:12px 14px; border:1px solid var(--line); border-radius:10px; }
.msg { color:var(--red); min-height:24px; margin:10px 0 0; font-weight:600; }

/* 레이아웃 */
.top { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:16px; background:#fff; border-bottom:1px solid var(--line); padding:10px 20px; }
.save-state { flex:1; font-size:14px; color:var(--muted); }
.save-state.saving { color:#8A6D00; } .save-state.saved { color:var(--green-d); } .save-state.error { color:var(--red); font-weight:600; }
.top-actions { display:flex; gap:8px; }
.layout { display:grid; grid-template-columns:230px 1fr; min-height:calc(100vh - 58px); }
.menu { background:#fff; border-right:1px solid var(--line); padding:16px 10px; position:sticky; top:58px; align-self:start; height:calc(100vh - 58px); overflow-y:auto; }
.menu button { display:block; width:100%; text-align:left; font:inherit; background:none; border:0; border-radius:10px; padding:10px 14px; cursor:pointer; color:var(--ink); }
.menu button:hover { background:var(--bg); }
.menu button.on { background:#E6F4EE; color:var(--green-d); font-weight:700; }
.menu .sub { padding-left:28px; font-size:15px; }
.main { padding:28px 32px 120px; max-width:980px; }
.local-note { position:fixed; left:16px; bottom:16px; right:16px; max-width:640px; background:var(--yellow); border:1px solid #E9D48A; border-radius:12px; padding:10px 14px; font-size:14px; }

/* 쉬운 설명 */
.eli5 { background:#EEF7F2; border:1px solid #CFE8DB; border-radius:14px; padding:14px 16px; margin:16px 0 22px; font-size:15px; }
.eli5 b { display:block; color:var(--green-d); margin-bottom:4px; }

/* 카드·그룹 */
.card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:16px; }
details.group { background:#fff; border:1px solid var(--line); border-radius:16px; margin-bottom:12px; }
details.group > summary { cursor:pointer; padding:16px 20px; font-weight:700; font-size:17px; list-style:none; display:flex; justify-content:space-between; }
details.group > summary::after { content:"펼치기 ▾"; font-weight:500; font-size:14px; color:var(--muted); }
details.group[open] > summary::after { content:"접기 ▴"; }
details.group > .inner { padding:0 20px 20px; }
.field { margin:14px 0; }
.field > label { display:block; font-weight:600; margin-bottom:4px; }
.field .help { font-size:14px; color:var(--muted); margin:0 0 6px; }
.field input[type=text], .field input[type=url], .field input[type=date], .field textarea, .field select { width:100%; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.field textarea { min-height:90px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline:2px solid #9FD8BF; border-color:var(--green-d); }
.field.bad input, .field.bad textarea { border-color:var(--red); }
.count { font-size:12px; color:var(--muted); text-align:right; }
.row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start; border:1px dashed var(--line); border-radius:12px; padding:12px; margin:8px 0; background:var(--cream); }
.row .cols { display:grid; gap:8px; }
.row .cols label { font-size:13px; color:var(--muted); font-weight:600; }
.row .cols input, .row .cols textarea { width:100%; font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; }
.row .cols textarea { min-height:60px; }
.row .ops { display:flex; flex-direction:column; gap:4px; }
.imgs { display:flex; flex-wrap:wrap; gap:12px; }
.imgbox { width:170px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.imgbox img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--bg); }
.imgbox .bar { display:flex; flex-wrap:wrap; gap:4px; padding:6px; }
.imgbox .tag { font-size:12px; font-weight:700; color:var(--green-d); padding:4px 8px 0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
table.rate { width:100%; border-collapse:collapse; }
table.rate th, table.rate td { text-align:left; padding:10px; border-bottom:1px solid var(--line); }
table.rate input { width:110px; font:inherit; padding:8px; border:1px solid var(--line); border-radius:8px; }
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tabs button { font:inherit; border:1px solid var(--line); border-radius:999px; padding:8px 16px; background:#fff; cursor:pointer; }
.tabs button.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.notice { border-radius:12px; padding:12px 16px; margin:0 0 14px; font-size:15px; }
.notice.err { background:#FDECEA; border:1px solid #F3C2BD; color:#7A1A14; }
.notice.warn { background:var(--yellow); border:1px solid #E9D48A; }
.notice ul { margin:6px 0 0; padding-left:20px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.tile { text-align:left; font:inherit; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; cursor:pointer; }
.tile b { display:block; font-size:17px; margin-bottom:4px; }
.tile span { font-size:14px; color:var(--muted); }
.status-big { font-size:20px; font-weight:700; }
.change { border-bottom:1px solid var(--line); padding:12px 0; }
.change .what { font-weight:700; }
.change .ba { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; font-size:14px; }
.change .ba div { background:var(--bg); border-radius:8px; padding:8px 10px; white-space:pre-wrap; overflow-wrap:anywhere; }
.change .ba .after { background:#E6F4EE; }
.steps { list-style:none; padding:0; }
.steps li { padding:6px 0; }
.release { display:flex; justify-content:space-between; gap:12px; align-items:center; border-bottom:1px solid var(--line); padding:12px 0; }
@media (max-width:820px) {
  .layout { grid-template-columns:1fr; }
  .menu { display:flex; overflow-x:auto; gap:4px; border-right:0; border-bottom:1px solid var(--line); padding:8px; position:static; height:auto; }
  .menu button { white-space:nowrap; width:auto; }
  .menu .sub { padding-left:14px; }
  .main { padding:20px 16px 120px; }
  .top { flex-wrap:wrap; }
  .grid2, .change .ba { grid-template-columns:1fr; }
}
.photo-note { background:var(--yellow); border:1px solid #E9D48A; border-radius:10px; padding:8px 12px; font-size:14px; margin:10px 0 0; }
.diff-img { display:block; width:120px; height:120px; object-fit:cover; border-radius:8px; margin-top:6px; }
.local-note { cursor:pointer; }

/* 가이드 본문 편집기 */
.switch { display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin:0 0 16px; cursor:pointer; }
.switch input { width:18px; height:18px; vertical-align:-3px; }
.toolbar { position:sticky; top:58px; z-index:5; display:flex; flex-wrap:wrap; gap:6px; background:#fff; border:1px solid var(--line); border-bottom:0; border-radius:12px 12px 0 0; padding:8px; }
.rich { min-height:420px; background:#fff; border:1px solid var(--line); border-radius:0 0 12px 12px; padding:18px 22px; font-size:17px; line-height:1.75; outline:none; }
.rich:focus { border-color:var(--green-d); box-shadow:0 0 0 2px #9FD8BF; }
.rich h2 { font-size:24px; margin:28px 0 10px; } .rich h3 { font-size:20px; margin:22px 0 8px; }
.rich p { margin:0 0 12px; } .rich ul, .rich ol { padding-left:24px; margin:0 0 12px; }
.rich a { color:var(--green-d); text-decoration:underline; } .rich img { display:block; max-width:100%; border-radius:12px; margin:8px 0; }
.rich .src-note { font-size:13px; color:var(--muted); }
.rich table { border-collapse:collapse; width:100%; margin:0 0 12px; } .rich th, .rich td { border:1px solid var(--line); padding:6px 10px; text-align:left; }
.dlg { border:1px solid var(--line); border-radius:16px; padding:22px; width:min(520px, 92vw); }
.dlg select, .dlg input { width:100%; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; margin-top:8px; }
.dlg::backdrop { background:rgba(23,61,50,.35); }
.gap-b { margin-bottom:12px; } .gap-t { margin-top:12px; }