:root{
  --primary:#1B6FB7;
  --primary-hover:#155A99;
  --text:#1A1A1A;
  --text-sub:#5A6B7A;
  --text-muted:#8A95A3;
  --bg:#FFFFFF;
  --bg-soft:#F8FAFB;
  --bg-tint:#F2F5F8;
  --border:#E5E9EE;
  --border-strong:#CFD6DE;
  --kakao:#F5C518;
  --naver:#03843D;
  --meta:#1B5BAA;
  --warn:#DC2626;
  --warn-bg:#FEF2F2;
  --success:#16A34A;
  --success-bg:#F0FDF4;
  --info:#0284C7;
  --info-bg:#F0F9FF;
  --accent-bg:#EFF6FF;
  --shadow-sm:0 1px 2px rgba(15,30,55,.04);
  --shadow-md:0 2px 8px rgba(15,30,55,.06);
  --radius:8px;
  --radius-lg:12px;
  --rail-w:200px;
  --rail-w-collapsed:60px;
  --rail-bg:#1F2937;
  --rail-border:#111827;
  --rail-hover:#2D3441;
  --rail-divider:#374151;
  --rail-text:#D1D5DB;
  --rail-text-muted:#9CA3AF;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg-soft);color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,"Apple SD Gothic Neo",
       "Malgun Gothic",sans-serif;
}
.wb{display:flex;height:100%}
.main{flex:1;min-width:0;display:flex;flex-direction:column}

.utilbar{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--border);
}
.utilbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang{display:flex;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden}
.lang button{
  padding:6px 12px;border:0;background:var(--bg);color:var(--text-sub);
  font:600 11.5px/1 inherit;cursor:pointer;
}
.lang button.on{background:var(--primary);color:#fff}
.export{position:relative}
.export summary{
  list-style:none;padding:7px 13px;border:1px solid var(--border-strong);border-radius:999px;
  background:var(--bg);font-weight:600;font-size:12.5px;cursor:pointer;
}
.export summary::-webkit-details-marker{display:none}
.export[open] summary{border-color:var(--primary);color:var(--primary)}
.export-panel{
  position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;
  padding:6px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-md);
}
.export-panel a,.export-panel button{
  display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:6px;
  background:none;color:var(--text);font:inherit;text-decoration:none;cursor:pointer;
}
.export-panel a:hover,.export-panel button:hover{background:var(--bg-tint)}
.admin-auth a,.admin-auth button{
  padding:7px 13px;border:1px solid var(--border-strong);border-radius:999px;
  background:var(--bg);color:var(--text-sub);font:600 12.5px/1 inherit;
  text-decoration:none;cursor:pointer;white-space:nowrap;
}
.admin-auth a:hover,.admin-auth button:hover{border-color:var(--primary);color:var(--primary)}
/* 로그인 상태 표시 — 로그아웃 버튼은 관리자로 들어와 있다는 걸 한눈에 알 수 있게 */
.admin-auth .on{border-color:var(--primary);color:var(--primary)}

.mode-root{flex:1;min-height:0;overflow:hidden}

.state{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:32px;text-align:center;color:var(--text-sub);
}
.state h2{margin:0;font-size:16px;color:var(--text)}
.state .actions{display:flex;gap:8px}
.btn{
  padding:8px 14px;border:1px solid var(--border-strong);border-radius:var(--radius);
  background:var(--bg);color:var(--text);font:inherit;text-decoration:none;cursor:pointer;
}
.btn.primary{border-color:var(--primary);background:var(--primary);color:#fff}

@media (max-width:760px){
  .wb{flex-direction:column}
  /* 검색 인풋이 언어·내보내기와 한 줄을 다투면 180px 까지 눌린다 — 줄바꿈을 허용해
     search.css 가 검색 박스를 한 줄 전체로 내릴 수 있게 한다. */
  .utilbar{flex-wrap:wrap}
}