:root{
  --bg:#F6F8FB; --card:#ffffff; --text:#0B1320; --muted:#5B6477; --border:#E3E7EE;
  --brand:#2B6EF3; --brand-ink:#163a9f; --pill:#EAF2FF; --ring:#CFE0FF; --shadow:0 8px 28px rgba(17,24,39,.08);
  --good:#22c55e; --warn:#ef4444; --radius:20px;
  --btn-h:42px; --btn-px:14px; --btn-fs:14px;
  --link:#1d4ed8;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A0F1A; --card:#0F172A; --text:#E7EAF0; --muted:#9AA7BD; --border:#1F2A44;
    --pill:#102244; --ring:#14326A; --shadow:0 10px 34px rgba(0,0,0,.45);
    --link:#93c5fd;
  }
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{ margin:0; background:var(--bg); color:var(--text);
  font:15px/1.75 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR","맑은 고딕",sans-serif; letter-spacing:-.2px; }
a{ color:var(--link); text-underline-offset:2px; }
img{ max-width:100%; height:auto; }
.container{ max-width:980px; margin:0 auto; padding:16px clamp(16px,2.4vw,28px); }

/* Header (공통 네비) */
.header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(150%) blur(10px);
  background: color-mix(in srgb, var(--bg) 86%, #fff 14%); border-bottom:1px solid var(--border); }
.header .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
.brand{ display:flex; align-items:center; gap:12px; min-height:48px; }
.logo{ width:36px; height:36px; border-radius:12px; overflow:hidden; border:1px solid var(--ring); background:#DDE8FF; display:grid; place-items:center; }
.brand .title{ font-weight:800; font-size:18px; letter-spacing:-.2px; }

.nav{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.btn{ appearance:none; border:1px solid transparent; border-radius:12px; height:var(--btn-h);
  padding:0 var(--btn-px); font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; 
  color:inherit; font-size:var(--btn-fs); line-height:1; max-width:100%; }
.btn.ghost{ background:var(--pill); color:#244bde; border:1px solid color-mix(in srgb, var(--brand) 22%, white 78%); }
.btn.primary{ background:var(--brand); color:#fff; border:1px solid color-mix(in srgb, var(--brand) 70%, black 30%); box-shadow:var(--shadow); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.badge{ display:inline-block; min-width:1.5em; text-align:center; padding:2px 8px; border-radius:999px; background:var(--pill); border:1px solid var(--ring); }

.header .menu-btn{
  display:none; appearance:none; border:1px solid var(--ring); background:var(--card);
  width:40px; height:40px; border-radius:12px; padding:0; cursor:pointer; align-items:center; justify-content:center;
}
.header .menu-btn:hover{ box-shadow:var(--shadow); }
.header .menu-btn svg{ width:22px; height:22px; }
.header .menu-wrap{ position:static; }
.header .menu-wrap .nav{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width:760px){
  .header .menu-btn{ display:inline-flex; }
  .header .menu-wrap{ position:relative; }
  .header .menu-wrap .nav{ display:none; }
  .header .menu-wrap[data-open="true"] .nav{
    display:flex; position:absolute; right:0; top:52px;
    flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--ring);
    border-radius:16px; padding:10px; min-width:220px; box-shadow:var(--shadow); z-index:60;
  }
  .header .menu-wrap[data-open="true"] .nav .btn{ width:100%; justify-content:flex-start; border-radius:10px; }
}
.header .menu-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ===== Common Dropdown (공통) — 초기 닫힘 보장 ===== */
.dropdown{ position:relative; }
.dropdown-toggle{ display:inline-flex; align-items:center; gap:6px; }
.dropdown-toggle svg{ width:14px; height:14px; }
.dropdown-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:180px;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); padding:6px; display:none; z-index:60;
}
.dropdown-menu a{ display:block; padding:8px 10px; border-radius:10px; text-decoration:none; color:inherit; }
.dropdown-menu a:hover{ background:var(--pill); }
.dropdown[data-open="true"] .dropdown-menu{ display:block; }
@media (max-width:760px){
  .dropdown-menu{ position:static; margin-top:8px; }
  .dropdown:not([data-open="true"]) .dropdown-menu{ display:none; }
}

/* Card & content */
.card{ margin-top:16px; background:var(--card); border:1px solid var(--ring); border-radius:24px; box-shadow:var(--shadow); overflow:hidden; }
.card-head{ padding:18px; border-bottom:1px solid var(--border); display:grid; gap:8px; }
.title{ font-weight:900; font-size:clamp(18px, 1.2vw + 16px, 24px); letter-spacing:-.3px; line-height:1.35; word-break:keep-all; overflow-wrap:anywhere; }
.meta-row{ display:grid; grid-template-columns: auto 1fr auto auto auto; gap:10px 12px; align-items:center; }
@media (max-width:640px){ .meta-row{ grid-template-columns: 1fr; } }
.meta{ display:flex; flex-wrap:wrap; gap:8px 12px; color:var(--muted); font-size:12.5px; }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:var(--pill);
  border:1px solid color-mix(in srgb, var(--brand) 22%, white 78%); color:#244bde; font-weight:800; white-space:nowrap; }
.card-body{ padding:18px; display:grid; gap:16px; }
.content{ white-space:pre-wrap; line-height:1.85; word-break:keep-all; overflow-wrap:anywhere; }

/* 갤러리 */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:720px){ .gallery{ grid-template-columns:1fr; } }
.gallery img{ width:100%; border-radius:16px; border:1px solid var(--border); display:block; }

/* 첨부 */
.attach{ padding:12px; border:1px dashed var(--ring); border-radius:14px; background:color-mix(in srgb,var(--pill) 55%, transparent); }
.attach a{ color:#244bde; font-weight:800; text-decoration:none; }
.attach .meta{ color:var(--muted); font-size:12px; margin-top:6px; }

.hr{ height:1px; background:var(--border); margin:6px 0; }

/* 댓글/알림 리스트 공용 */
.list{ list-style:none; margin:0; padding:0; }
.c-item{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:flex-start; padding:12px 16px; border-bottom:1px solid var(--border); }
.c-item:last-child{ border-bottom:none; }
.avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--ring); background:var(--pill); flex:0 0 auto; }
.c-author{ font-weight:900; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.c-author .btn{ height:34px; padding:0 12px; font-size:13px; }
.c-meta{ color:var(--muted); font-size:12px; }
.c-text{ white-space:pre-wrap; line-height:1.75; margin-top:4px; word-break:keep-all; overflow-wrap:anywhere; }

/* 폼 */
.select, .input, textarea{
  width:100%; border:1px solid var(--ring); border-radius:14px; padding:12px 14px;
  background:transparent; color:var(--text);
}
textarea{ min-height:120px; resize:vertical; }
textarea::placeholder, .input::placeholder{ color:var(--muted); }
.select:focus, .input:focus, textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 60%, transparent);
}
.c-form{ display:grid; gap:10px; }
.c-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.footer{ color:var(--muted); font-size:12px; text-align:center; padding:28px 0 40px; }

.toast{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(8px);
  background:var(--text); color:var(--card); padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); opacity:0; pointer-events:none; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); transition:opacity .25s ease, transform .25s ease; }