/* V4 공통 기반 — Casting4.dc.html helmet 이식 (토큰·기본 컨트롤·사이드바 룩) */

/* 1B Feed Magenta — 기획 확정 2026-09-02. 라이트 값은 팔레트 정본, 다크 값은
   구 티일 팔레트의 명도·알파 관계를 hue 334(마젠타)로 옮긴 유도값 */
:root{
  --on-brand:#FFFFFF;
  --surface-1:#FFFFFF; --bg:#FFFFFF; --sidebar:#FAFAF9; --panel:#F7F8F8; --card:#FFFFFF; --surface-disabled:#EDEEF0;
  --text-1:#17191C; --text-2:#3A3F45; --text-3:#666C74; --text-muted:#8B9199; --text-disabled:#B6BBC2;
  --w-03:rgba(20,24,28,.03); --w-08:rgba(20,24,28,.09); --w-12:rgba(20,24,28,.14); --w-16:rgba(20,24,28,.2); --w-24:rgba(20,24,28,.28); --w-34:rgba(20,24,28,.4);
  --b-08:rgba(244,63,142,.09); --b-12:rgba(244,63,142,.14); --b-25:rgba(244,63,142,.3); --b-45:rgba(244,63,142,.52);
  --warning:#B45309; --danger:#C6362F;
  --media-bg:#08090C; --media-bg-2:#0B0D10;
  /* 색 시스템 단일화(2026-09-07) — 이 accent 계열의 유일한 이름은 --pri 다. 구 이름 --brand
     는 폐기했다(전 사용처 --pri 로 치환 완료). --pri-hover 는 옛 --brand-hover 값을 그대로 옮김 */
  --pri-strong:#A31757; --pri:#F43F8E; --pri-hover:#DE2B7B; --pri-text:#C21E68; --pri-border:rgba(244,63,142,.45); --pri-tint:rgba(244,63,142,.08); --pri-tint-2:rgba(244,63,142,.15);
  --pri-gradient:linear-gradient(135deg,#FF9A7B 0%,#F43F8E 100%);
  --scrim:linear-gradient(to top,rgba(6,8,11,.92) 0%,rgba(6,8,11,.5) 32%,rgba(6,8,11,0) 64%);
}
:root[data-theme="dark"]{
  --on-brand:#1A0711;
  --surface-1:#0C0E13; --bg:#0E1014; --sidebar:#101216; --panel:#14171C; --card:#181A20; --surface-disabled:#1A1E26;
  --text-1:#E8EAED; --text-2:#CFD3D9; --text-3:#9AA0AA; --text-muted:#686D76; --text-disabled:#4B515B;
  --w-03:rgba(255,255,255,.03); --w-08:rgba(255,255,255,.08); --w-12:rgba(255,255,255,.12); --w-16:rgba(255,255,255,.16); --w-24:rgba(255,255,255,.24); --w-34:rgba(255,255,255,.34);
  --b-08:rgba(255,102,168,.08); --b-12:rgba(255,102,168,.12); --b-25:rgba(255,102,168,.25); --b-45:rgba(255,102,168,.45);
  --warning:#FBBF24; --danger:#F87171;
  --media-bg:#08090C; --media-bg-2:#0B0D10;
  --pri-strong:#FF8FC0; --pri:#FF66A8; --pri-hover:#F25A9C; --pri-text:#FF66A8; --pri-border:rgba(255,102,168,.4); --pri-tint:rgba(255,102,168,.08); --pri-tint-2:rgba(255,102,168,.16);
  --pri-gradient:linear-gradient(135deg,#FF9A7B 0%,#FF66A8 100%);
}
*{box-sizing:border-box}
b,strong{font-weight:500}
input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:0 0 16px;margin:0;border:1px solid var(--w-24);border-radius:4px;background:var(--surface-1);display:inline-grid;place-content:center;cursor:pointer;transition:background .12s,border-color .12s}
input[type="checkbox"]:hover{border-color:var(--pri-border)}
input[type="checkbox"]:checked{background:var(--pri);border-color:var(--pri)}
input[type="checkbox"]:checked::after{content:"";width:9px;height:5px;margin-top:-2px;border-left:1.4px solid var(--on-brand);border-bottom:1.4px solid var(--on-brand);border-radius:1px;transform:rotate(-45deg)}
input[type="radio"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:0 0 16px;margin:0;border:1px solid var(--w-24);border-radius:50%;background:var(--surface-1);display:inline-grid;place-content:center;cursor:pointer;transition:border-color .12s}
input[type="radio"]:hover{border-color:var(--pri-border)}
input[type="radio"]:checked{border:1.5px solid var(--pri)}
input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--pri)}

button,input,select,textarea{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text-1);font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;font-size:14px;font-weight:400;line-height:1.45;letter-spacing:-0.025em}
a{color:var(--text-2);text-decoration:none}
a:hover{color:var(--text-1)}
/* 로고 2장 전환 — app.css 의 `.side-logo img{display:block}` 보다 선택자를 강하게 잡는다 */
.side-logo img.logo-dark,img.logo-dark{display:none}
.side-logo img.logo-light,img.logo-light{display:block}
[data-theme="dark"] .side-logo img.logo-dark,[data-theme="dark"] img.logo-dark{display:block}
[data-theme="dark"] .side-logo img.logo-light,[data-theme="dark"] img.logo-light{display:none}
/* 구판의 라이트 로고 반전 필터 무효화 — 이제 라이트 전용 로고가 따로 있다 */
[data-theme="light"] .side-logo img{filter:none}

/* tokens.css 전용 이름 보정 — data-theme 미설정(기본 라이트)에서 다크 값이 새지 않게 라이트 값을 주고, 다크에선 원래 값으로 되돌린다.
   --brand-light 는 실사용처가 없어 2026-09-07 정리에서 제거했다(전수 조사 확인) */
:root{--surface-select:#FFFFFF;--surface-tooltip:#FFFFFF;--text-faint:#A0A6AE;--info:#4F46E5;--tooltip-bg:#1C2128}
:root[data-theme="dark"]{--surface-select:#14181F;--surface-tooltip:#1C2128;--text-faint:#5A606B;--info:#A5B4FC;--tooltip-bg:#F4F6F8}

/* ── V4 셸 — 수치는 Casting4.dc.html 인라인 style 실측값 ────────────────── */

/* 사이드바: width 220 · padding 20px 12px · gap 22 */
.sidebar{width:220px;gap:22px;padding:20px 12px;background:var(--sidebar);border-right:1px solid var(--w-08)}
.side-logo{padding:4px 12px}
.side-logo img{height:20px;width:auto}
.side-nav{gap:2px}
/* 메뉴 항목: padding 10px 12px · radius 8 · 14px/500 */
.side-item{gap:10px;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text-3)}
.side-item:hover{background:var(--w-03);color:var(--text-1)}
.side-item.is-active{background:var(--pri-tint-2);color:var(--pri-text)}
.side-ico{width:18px;flex:0 0 18px;display:inline-flex;align-items:center;justify-content:center;font-size:inherit}
.side-ico svg{width:18px;height:18px;display:block}
.side-badge{min-width:20px;padding:1px 6px;border-radius:6px;background:var(--pri);color:var(--on-brand);font-size:11px;font-weight:500;text-align:center}

/* 관리자 구분 — 시안에 없는 화면들이라 선으로 갈라 둔다 */
.side-group{margin:10px 0 2px;padding-top:10px;border-top:1px solid var(--w-08)}
.side-group-label{display:block;padding:0 12px 2px;font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:0}

/* 하단 묶음: padding-top 10 · 구분선 · 행 9px 12px · 13px/500 */
.side-foot{display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1px solid var(--w-08)}
.side-foot-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;border-radius:8px;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--text-3);text-decoration:none;cursor:pointer;text-align:left}
.side-foot-row:hover{background:var(--w-03);color:var(--text-1)}
.side-foot-row.is-collapse{color:var(--text-muted)}
.side-foot-row.is-collapse:hover{color:var(--text-2)}
.side-foot-value{margin-left:auto;font-size:11px;color:var(--text-muted)}
.side-version{padding:4px 12px 0;font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 접기 화살표 — 펼침은 ‹, 접힘은 › */
.side-foot-row .ico-closed{display:none}
.is-collapsed .side-foot-row .ico-open{display:none}
.is-collapsed .side-foot-row .ico-closed{display:inline-flex}
/* 접힘 상태에서는 라벨·버전을 감춘다 (구판 규칙 유지) */
.is-collapsed .side-label{display:none}
.is-collapsed .side-version,.is-collapsed .side-group-label{display:none}

/* 상단바: height 58 · padding 0 28px · 화면명 18px/600 */
.topbar{height:58px;min-height:58px;padding:0 28px;gap:16px;background:var(--bg);border-bottom:1px solid var(--w-08)}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.topbar-title{font-size:18px;font-weight:600;color:var(--text-1);white-space:nowrap;flex:0 0 auto}
.topbar-right{display:flex;align-items:center;gap:8px}
/* 계정 버튼: pill · 아바타 28 */
.account-btn{gap:9px;padding:5px 10px 5px 5px;border:1px solid var(--w-08);border-radius:22px;background:none;font-size:13px;font-weight:500;color:var(--text-2)}
.account-btn:hover{background:var(--w-03);border-color:var(--w-16)}
.account-btn .avatar{width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--text-1);color:var(--bg);font-size:13px;font-weight:500}
.account-btn .caret{font-size:10px;color:var(--text-muted)}

/* 본문: padding 30px 28px 80px · 제목 26px/600 · 부제 13.5px */
.page{padding:30px 28px 80px}
.page-title{margin:0 0 6px;font-size:26px;font-weight:600;line-height:1.25;letter-spacing:-0.025em}
.page-desc{margin:0 0 26px;max-width:620px;font-size:13.5px;color:var(--text-3);line-height:1.45}