@import url('/assets/nav-icons.css');
@import url('/assets/ui-icons.css');

:root{
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#f1f4f8;
  --text:#16181d; --muted:#8b95a1; --line:#eaedf1;
  --brand:#0ea6e5; --brand-soft:#e3f4fd;
  --grad:linear-gradient(120deg,#0ea6e5,#0fb787);
  --yes:#0fb787; --header-bg:rgba(255,255,255,.85);
  --font:'Pretendard',-apple-system,sans-serif;
  --shadow:0 4px 18px rgba(20,40,80,.06);
  --sb-w:244px;
}
[data-theme="dark"]{
  --bg:#0b0e13; --surface:#12161d; --surface-2:#1b212b;
  --text:#e6edf3; --muted:#8b95a1; --line:#222a34;
  --brand:#2cb6ef; --brand-soft:rgba(14,166,229,.18);
  --header-bg:rgba(11,14,19,.85);
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.55; }
a{ color:var(--brand); text-decoration:none; }
.hidden{ display:none !important; }
.app{ display:flex; min-height:100vh; }
.sidebar{ width:var(--sb-w); flex:none; position:sticky; top:0; height:100vh; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:16px 14px; z-index:120; }
.sb-head{ padding:4px 6px 12px; }
.logo{ display:flex; align-items:center; gap:9px; color:inherit; text-decoration:none; }
.logo .mark{ width:32px; height:32px; border-radius:10px; background:var(--grad); display:grid; place-items:center; color:#fff; font-weight:800; }
.logo .nm{ font-weight:800; font-size:17px; }
.logo .nm span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.s-nav{ display:flex; flex-direction:column; gap:3px; flex:1; margin-top:6px; }
.s-nav a{ display:flex; align-items:center; gap:13px; padding:12px 13px; border-radius:13px; font-weight:700; font-size:14.5px; color:var(--text); text-decoration:none; }
.s-nav a:hover{ background:var(--surface-2); }
.s-nav a.active{ background:var(--brand-soft); color:var(--brand); }
.s-nav a .ic{ width:22px; text-align:center; }
.s-divider{ height:1px; background:var(--line); margin:8px 4px; }
.switch-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 13px; }
.switch-row .lab{ display:flex; align-items:center; gap:13px; font-weight:700; }
.switch{ position:relative; width:46px; height:26px; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch .track{ position:absolute; inset:0; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; }
.switch .thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:.22s; }
.switch input:checked ~ .track{ background:var(--yes); border-color:var(--yes); }
.switch input:checked ~ .thumb{ transform:translateX(20px); }
.mainwrap{ flex:1; min-width:0; }
header{ position:sticky; top:0; z-index:60; background:var(--header-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.head-in{ display:flex; align-items:center; gap:14px; padding:12px 22px; }
.menu-btn{ display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:11px; background:var(--surface); cursor:pointer; flex-direction:column; gap:4px; align-items:center; justify-content:center; }
.menu-btn span{ width:17px; height:2px; background:var(--text); }
.head-spacer{ flex:1; }
.head-banner{ background:var(--grad); color:#fff; border-radius:999px; padding:8px 14px; font-weight:800; font-size:13px; text-decoration:none; }
.sb-overlay{ position:fixed; inset:0; background:rgba(15,25,40,.45); z-index:110; opacity:0; pointer-events:none; }
.sb-overlay.open{ opacity:1; pointer-events:auto; }
.content{ max-width:860px; margin:0 auto; padding:28px 22px 64px; }
.back-link{ display:inline-flex; font-size:13px; font-weight:700; color:var(--brand); margin-bottom:18px; text-decoration:none; }
.guide-cover{ width:100%; aspect-ratio:1600/1080; border-radius:18px; overflow:hidden; margin-bottom:24px; box-shadow:var(--shadow); background:linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.guide-cover img{ width:100%; height:100%; object-fit:contain; display:block; }
.guide-kicker{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); margin-bottom:8px; }
.guide-title{ font-size:clamp(26px,4vw,34px); font-weight:800; margin-bottom:10px; }
.guide-intro{ font-size:15px; color:var(--muted); margin-bottom:24px; max-width:640px; }
.art-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:14px; box-shadow:var(--shadow); }
.art-card h2{ font-size:16px; font-weight:800; margin-bottom:10px; }
.art-card p{ font-size:14px; color:var(--text); line-height:1.55; }
.guide-foot{ margin-top:20px; text-align:center; }
.guide-foot a{ display:inline-block; background:var(--grad); color:#fff; font-weight:800; padding:12px 20px; border-radius:12px; text-decoration:none; }
@media (max-width:960px){ .sidebar{ position:fixed; transform:translateX(-104%); width:262px !important; } .sidebar.open{ transform:translateX(0); } .menu-btn{ display:flex; } }