/* ================== Theme tokens ================== */
:root{
  /* 다크(기본) */
  --bg: #0b0c0e; --surface: #121417; --text: #e6e9ef; --muted: #a8b0bd;
  --accent: #7cd4ff; --card: #15181c; --border: #232832; --link: #8ad5ff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  /* 사이드바 레이아웃 */
  --sidebar-w: 260px;   /* 사이드바 폭 */
  --sidebar-gap: 24px;  /* 본문과 간격 */
}
[data-theme="light"]{
  --bg:#f7f8fb; --surface:#fff; --text:#121417; --muted:#3d4350; --accent:#007aff;
  --card:#fff; --border:#e6e9ef; --link:#005bcb; --shadow:0 10px 24px rgba(2,16,43,.08);
}

/* ================== Global ================== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Pretendard",system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  line-height:1.65; letter-spacing:.2px;
}

/* 본문 컨테이너: 사이드바 폭만큼 오른쪽으로 밀기 */
.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px;
  margin-left: calc(var(--sidebar-w) + var(--sidebar-gap));
}

/* ================== Topbar ================== */
/* 헤더(상단바)는 sticky, 배경 흐림 + 경계선 */
header{
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg), transparent 35%);
}
/* 헤더 내부 정렬 + 좌측 패딩을 사이드바 만큼 주어 본문과 정렬 */
.toprow{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 10px 24px;
  padding-left: calc(24px + var(--sidebar-w) + var(--sidebar-gap));
}
.brand{ font-weight:700; letter-spacing:.2px; display:flex; align-items:center; gap:8px; }
.brand-badge{
  font-weight:600; font-size:12px; letter-spacing:.3px;
  padding:4px 8px; border:1px solid var(--border); border-radius:999px;
  background:var(--surface); color:var(--muted);
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  padding:10px 14px; border-radius:12px; text-decoration:none; box-shadow:var(--shadow);
}
.btn:hover{ transform: translateY(-1px); }

/* ================== Sidebar (항상 보임) ================== */
.sidenav{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding-top: 64px;              /* 상단바 높이만큼 띄움 */
  box-shadow: var(--shadow);
}
.sidenav a{
  display:block; padding:12px 20px; color:var(--text); font-weight:500; text-decoration:none;
  border-bottom:1px dashed color-mix(in oklab, var(--border), transparent 55%);
}
.sidenav a:hover{
  background: color-mix(in oklab, var(--surface), var(--border) 12%);
}
.sidenav a.active{
  background: color-mix(in oklab, var(--surface), var(--border) 18%);
}

/* ================== Content blocks ================== */
.hero{
  display:grid; grid-template-columns:minmax(340px,460px) minmax(0,1fr);
  gap:28px; margin-top:28px; align-items:start;
}
.hero > .grid{ display:flex; flex-direction:column; gap:20px; align-items:stretch; }
.hero-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px 28px 28px;
  box-shadow: var(--shadow);
  height:auto; max-height:none; overflow:visible;
}

h1{ line-height:1.2; margin:0 0 8px; overflow-wrap:anywhere; }
h3{ font-size:18px; margin:0 0 10px; letter-spacing:.2px; }
p{ margin:0 0 10px; }
.muted{ color:var(--muted); }

.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:18px; box-shadow:var(--shadow);
}
.kvs{ display:grid; grid-template-columns:130px 1fr; gap:10px; }
.kvs > div:first-child{ white-space:nowrap; }

.row{ display:flex; flex-wrap:wrap; gap:8px; }
.avatar{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:20px; border:1px solid var(--border); display:block; box-shadow:var(--shadow);
}

/* ================== Responsive ================== */
@media (max-width: 920px){
  .container{ margin-left: 16px; } /* 또는 0 */
  .toprow{ padding-left: 24px; }  // 헤더도 원래대로 */
}