/* UIV2 W0 (진영 D-1023-24) — Figma "시안 v2" 토큰 + 공통 틀 + 공통 부품.
   html.ui-v2 일 때만 적용된다(주소 ?ui=v2). 없으면 지금 화면 그대로. 화면별 규칙은 ui-v2-<화면>.css 에서. */

/* §1 토큰 */
html.ui-v2{
  --bg:#F4F5F6 !important; --off:#C9CFD8 !important; --info:#0E7490 !important; --info-bg:#E6F6F9 !important; --v3-pillbg:#EEF0FF !important; --surface:#FFFFFF; --surface-2:#F7F8F9;
  --text-1:#1E2124; --text-2:#464C53; --text-3:#58616A;
  --border:#E6E8EA; --border-strong:#8A949E;
  --accent:#4F46E5 !important; --accent-hover:#4338CA; --accent-soft:#EEF0FF !important; --on-accent:#FFFFFF;
  --trend:#C2410C; --trend-soft:#FFF0E8;
  --success:#2E7D32; --success-soft:#EAF5EA;
  --warning:#9A5B00; --warning-soft:#FDF1DE;
  --danger:#C0362C; --danger-soft:#FCEDEB;
  --ai:#0E7490; --ai-soft:#E6F6F9;
  --photo:#D5D9DD;
  --shadow-1:0 1px 4px rgba(0,0,0,.08);
  --shadow-2:0 2px 10px rgba(0,0,0,.10);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  /* 기존 화면 변수를 새 토큰으로 이어 준다 — 기존 마크업이 그대로 새 색을 입는다 */
  --base:#F4F5F6; --surface-2:#F7F8F9;
  --accent-2:#C7C9FB; --accent-ink:#4338CA !important; --accent-fg:#4F46E5 !important;
  --accent-line:#C7C9FB !important; --accent-mid:#8E88F0 !important;
  --text:#1E2124; --sub:#464C53; --faint:#58616A; --line:#E6E8EA !important; --line-2:#F0F1F3 !important;
  color-scheme:light;
}
html.ui-v2 body{background:#F4F5F6 !important;color:var(--text-1);font-family:Pretendard,"Pretendard Variable",system-ui,sans-serif}

/* v2 상단 바는 화면 크기와 관계없이 기존 .topbar의 안쪽 여백·선을 대신한다. */
html.ui-v2 body:not(.v3home) .topbar{position:sticky;top:0;z-index:20;height:64px;min-height:64px;padding:0;margin:0;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:none}
html.ui-v2 body:not(.v3home) .topbar>:not(.v2-topbar){display:none !important}
html.ui-v2 body:not(.v3home) .topbar .v2-topbar{margin:0;position:static;border:0;flex:1;min-width:0}

/* §2 공통 틀 — PC(768px 이상): 왼쪽 메뉴 88px + 상단 바 64px */
@media (min-width:768px){
  html.ui-v2 .app{display:block}
  html.ui-v2 .ghead{position:fixed;left:0;top:0;bottom:0;width:88px;z-index:40;background:var(--surface);border-right:1px solid var(--border);box-shadow:none}
  html.ui-v2 .ghead .gstrip{display:none}
  html.ui-v2 .ghead .gbar,html.ui-v2 .ghead .gbar .wrap{height:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0;max-width:none;background:transparent;border:0}
  html.ui-v2 .ghead .brand{font-size:15px;font-weight:700;color:var(--text-1);padding:0;margin:0 0 4px;flex-direction:column;gap:2px}
  html.ui-v2 .ghead .brand small{display:none}
  html.ui-v2 .ghead .gorg{display:none}
  html.ui-v2 .ghead .rnav{display:flex;flex-direction:column;gap:12px;margin:8px 0 0;border:0;background:transparent}
  html.ui-v2 .ghead .rnav a{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;padding:0;font-size:13px;line-height:19.5px;font-weight:400;color:var(--text-2);background:transparent;border:0;text-decoration:none}
  html.ui-v2 .ghead .rnav a svg{width:24px;height:24px;box-sizing:content-box;padding:4px 16px;border-radius:var(--r-pill)}
  html.ui-v2 .ghead .rnav a[aria-current="page"],html.ui-v2 .ghead .rnav a.on,html.ui-v2 .ghead .rnav a.is-on{color:var(--accent);font-weight:700;background:transparent}
  html.ui-v2 .ghead .rnav a[aria-current="page"] svg,html.ui-v2 .ghead .rnav a.on svg,html.ui-v2 .ghead .rnav a.is-on svg{background:var(--accent-soft)}
  html.ui-v2 .v2-make{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;font-size:13px;font-weight:700;color:var(--accent);text-decoration:none}
  html.ui-v2 .v2-make svg{width:24px;height:24px;box-sizing:content-box;padding:12px;border-radius:16px;background:var(--accent-soft);color:var(--accent)}
  html.ui-v2 body:not(.v3home):not(.v3all) .body{margin-left:88px}
  /* UIV2FIX-11: 내용 칸(최대 1280)은 레일 오른쪽 남는 영역 가운데 — 칸 자체를 가운데로, 칸 안 화면은 왼쪽 정렬 그대로 */
  html.ui-v2 body:not(.v3home):not(.v2-entry-on) main#view{box-sizing:border-box;padding:0 40px 48px;max-width:1360px;margin:0 auto}
  html.ui-v2 body:not(.v3home):not(.v2-entry-on) main#view>*{max-width:1280px}
  html.ui-v2 main#view:focus,html.ui-v2 main#view:focus-visible{outline:none !important}
  html.ui-v2 body.v3home main#view,html.ui-v2 body.v3home .body{max-width:none !important;margin:0 !important;padding:0 !important}
  html.ui-v2 body.v3home .app{max-width:none !important;margin:0 !important}
  html.ui-v2 body:not(.v3home) .gfoot{margin-left:88px}
}
html.ui-v2 .v2-make{display:none}
@media (min-width:768px){html.ui-v2 .v2-make{display:flex}}

/* 기존 부품을 새 위계로 — 카드는 테두리 없이 그림자, 버튼은 인디고 */
html.ui-v2 .card,html.ui-v2 .lv2-card{background:var(--surface);border:0 !important;border-radius:var(--r-md);box-shadow:var(--shadow-1)}
html.ui-v2 .btn:not(.ghost):not(.line):not(.sub):not(.soft):not(.red),html.ui-v2 .v3-btn:not(.ghost),html.ui-v2 .v3-send{background:var(--accent) !important;color:var(--on-accent) !important;border-color:transparent !important;border-radius:var(--r-sm);font-weight:700}
html.ui-v2 .btn:not(.ghost):not(.line):not(.sub):not(.soft):not(.red):hover,html.ui-v2 .v3-btn:not(.ghost):hover{background:var(--accent-hover) !important}
html.ui-v2 .btn.ghost,html.ui-v2 .btn.soft,html.ui-v2 .btn.line,html.ui-v2 .btn.sub{background:var(--accent-soft) !important;color:var(--accent) !important;border-color:transparent !important;font-weight:700;border-radius:var(--r-sm)}
html.ui-v2 .btn:disabled{background:var(--surface-2) !important;color:var(--text-3) !important}
html.ui-v2 .chip{height:40px;display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:var(--r-pill);padding:0 16px;background:var(--surface);color:var(--text-1);font-size:15px}
html.ui-v2 .chip[aria-pressed="true"],html.ui-v2 .chip.on,html.ui-v2 .chip.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:500}
html.ui-v2 h1{font-size:32px;line-height:42px;font-weight:700;color:var(--text-1)}
html.ui-v2 h2{font-size:22px;line-height:31px;font-weight:700}
html.ui-v2 a{color:var(--accent)}

/* §2 공통 부품 클래스 (화면 카드가 쓴다) */
html.ui-v2 .v2-card{background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:20px}
html.ui-v2 .v2-card:hover{box-shadow:var(--shadow-2)}
html.ui-v2 .v2-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border:0;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font:700 15px/22.5px Pretendard,system-ui,sans-serif;cursor:pointer;text-decoration:none}
html.ui-v2 .v2-btn-primary:hover{background:var(--accent-hover)}
html.ui-v2 .v2-btn-weak{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border:0;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);font:700 15px/22.5px Pretendard,system-ui,sans-serif;cursor:pointer;text-decoration:none}
html.ui-v2 .v2-btn-weak svg{width:20px;height:20px}
html.ui-v2 .v2-chip{height:40px;display:inline-flex;align-items:center;gap:6px;padding:0 16px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--text-1);font-size:15px}
html.ui-v2 .v2-chip[aria-pressed="true"],html.ui-v2 .v2-chip.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:500}
html.ui-v2 .v2-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:var(--r-pill);font:700 13px/19.5px Pretendard,system-ui,sans-serif;background:var(--surface-2);color:var(--text-2)}
html.ui-v2 .v2-pill.is-making{background:var(--accent-soft);color:var(--accent)}
html.ui-v2 .v2-pill.is-wait,html.ui-v2 .v2-pill.is-days{background:var(--warning-soft);color:var(--warning)}
html.ui-v2 .v2-pill.is-ok{background:var(--success-soft);color:var(--success)}
html.ui-v2 .v2-pill.is-fix{background:var(--danger-soft);color:var(--danger)}
html.ui-v2 .v2-trend{display:inline-flex;align-items:center;gap:4px;color:var(--trend);font:700 13px/19.5px Pretendard,system-ui,sans-serif}
html.ui-v2 .v2-trend svg{width:16px;height:16px}
html.ui-v2 .v2-thumb916{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--photo)}
html.ui-v2 .v2-thumb916 img{width:100%;height:100%;object-fit:cover;display:block}
html.ui-v2 .v2-thumb916::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(transparent,rgba(19,20,22,.85));pointer-events:none}
html.ui-v2 .v2-ai-note{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;border-radius:var(--r-md);background:var(--surface-2);color:var(--text-2);font-size:13px;line-height:19.5px}
html.ui-v2 .v2-ai-note svg{width:16px;height:16px;color:var(--ai);flex:none;margin-top:2px}
html.ui-v2 .v2-todo{font-size:17px;line-height:25.5px;color:var(--text-2);margin:4px 0 24px}
html.ui-v2 .v2-link{color:var(--accent);font-weight:700;font-size:15px;text-decoration:none}
html.ui-v2 .v2-link::after{content:" ›"}

/* 폰(768px 미만): 지금 모바일 배치 유지 — 색·모서리·그림자만 위 토큰을 따른다 */

/* W0 고침(13:2x, 점검 #1) — 실제 앱 틀은 home-v3 의 .v3(240px 사이드바). 그 틀을 시안 v2 로 덮는다 */
html.ui-v2 body,html.ui-v2 body.v3home,html.ui-v2 .v3,html.ui-v2 .v3-main{background:#F4F5F6 !important}
html.ui-v2 .v2-topbar{position:sticky;top:0;z-index:20;height:64px;margin:0 0 24px;padding:0 16px;display:flex;align-items:center;gap:16px;background:var(--surface);border-bottom:1px solid var(--border)}
html.ui-v2 .v2-topbar .v2-where{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--text-1);text-decoration:none}
html.ui-v2 .v2-topbar .v2-where svg{width:18px;height:18px;color:var(--text-2)}
html.ui-v2 .v2-topbar .v2-where .v2-caret{width:16px;height:16px}
html.ui-v2 .v2-topbar .v2-sp{flex:1}
html.ui-v2 .v2-topbar .v2-wait{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-pill);background:var(--warning-soft);color:var(--warning);font-size:13px;font-weight:700;text-decoration:none}
html.ui-v2 .v2-topbar .v2-me{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-size:15px;font-weight:700;color:var(--accent);background:var(--accent-soft);border:0}
@media (max-width:767px){html.ui-v2 main>.v2-topbar{margin-left:-16px;margin-right:-16px}}
@media (min-width:768px){
  html.ui-v2 .v3{grid-template-columns:88px minmax(0,1fr) !important;background:var(--bg) !important;--v3-main:var(--bg);--v3-side:var(--surface)}
  html.ui-v2 .v3-sidecol{background:var(--surface) !important;border-right:1px solid var(--border)}
  html.ui-v2 .v3-side{background:var(--surface) !important;padding:16px 8px !important;align-items:center;gap:12px !important}
  html.ui-v2 .v3-side-h{padding:0;justify-content:center}
  html.ui-v2 .v3-logo{font-size:15px;font-weight:700;color:var(--text-1);gap:0}
  html.ui-v2 .v3-logo i{display:none}
  html.ui-v2 .v3-side-f,html.ui-v2 .v3-nav-h,html.ui-v2 .v3-subnav{display:none !important}
  html.ui-v2 .v3-nav{align-items:center;gap:12px !important}
  html.ui-v2 .v3-nav .v2-rail{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;padding:0;min-height:0;border-radius:0;background:transparent !important;color:var(--text-2) !important;font-size:13px;line-height:19.5px;font-weight:400;text-decoration:none}
  html.ui-v2 .v3-nav .v2-rail svg{width:24px;height:24px;box-sizing:content-box;padding:4px 16px;border-radius:var(--r-pill)}
  html.ui-v2 .v3-nav .v2-rail[aria-current="page"]{color:var(--accent) !important;font-weight:700}
  html.ui-v2 .v3-nav .v2-rail[aria-current="page"] svg{background:var(--accent-soft)}
  html.ui-v2 .v3-nav .v2-new{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;margin:0 0 8px;color:var(--accent);font-size:13px;font-weight:700;text-decoration:none;background:transparent;outline:0}
  html.ui-v2 .v3-nav .v2-new svg{width:24px;height:24px;box-sizing:content-box;padding:12px;border-radius:16px;background:var(--accent-soft);color:var(--accent)}
  html.ui-v2 .v3-main{padding:0 40px 48px !important}
  html.ui-v2 .v3-col{max-width:1280px !important;margin:0 auto !important}
  html.ui-v2 .v3-title{font-size:32px;line-height:42px;font-weight:700;letter-spacing:0}
  html.ui-v2 .v2-topbar{position:sticky;top:0;z-index:20;height:64px;margin:0 -40px 24px;padding:0 40px;display:flex;align-items:center;gap:16px;background:var(--surface);border-bottom:1px solid var(--border)}
  html.ui-v2 .v2-topbar .v2-where{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--text-1);text-decoration:none}
  html.ui-v2 .v2-topbar .v2-where svg{width:18px;height:18px;color:var(--text-2)}
  html.ui-v2 .v2-topbar .v2-sp{flex:1}
  html.ui-v2 .v2-topbar .v2-wait,html.ui-v2 .v2-topbar .v2-making{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-pill);font-size:13px;font-weight:700;text-decoration:none}
  html.ui-v2 .v2-topbar .v2-wait{background:var(--warning-soft);color:var(--warning)}
  html.ui-v2 .v2-topbar .v2-making{background:var(--accent-soft);color:var(--accent)}
  html.ui-v2 .v2-topbar .v2-me{width:40px;height:40px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border)}
}

/* 점검 #2 (13:2x) — 로고는 레일 폭 안에, 상단 바 지역 ▾ · 프로필 첫 글자 */
@media (min-width:768px){
  html.ui-v2 .v3-logo,html.ui-v2 .ghead .brand{max-width:72px;overflow:hidden;font-size:13px !important;white-space:nowrap;text-overflow:clip;justify-content:center}
}

/* 점검 #3 (13:3x) — 홈 밖 화면의 틀(body.v3all + #v3shell, 사이드바 240px 고정)도 홈과 같게 */
@media (min-width:768px){
  html.ui-v2 body.v3all .app{padding-left:88px !important}
  html.ui-v2 .v3-shell .v3-sidecol,html.ui-v2 .v3-sidecol{width:88px !important;min-width:88px;max-width:88px}
  html.ui-v2 .v3-side{width:88px !important;box-sizing:border-box}
  html.ui-v2 body.v3all .body{margin-left:0 !important}
  html.ui-v2 body.v3all:not(.v2-entry-on) main#view{box-sizing:border-box;padding:0 40px 48px !important;max-width:1360px !important;margin:0 auto !important}
  html.ui-v2 body.v3all .body>.v2-topbar{margin:0 0 24px}
  html.ui-v2 .pl-org{display:none !important}
  /* 처음 그릴 때 옛 넓은 메뉴(검정 '새로 만들기'·내 기획…)가 잠깐 보이지 않게 — 새 레일로 바뀌기 전에는 비워 둔다 */
  html.ui-v2 .v3-nav>:not(.v2-new):not(.v2-rail){display:none !important}
  /* 로고: 글자 대신 표시만(레일 88px 안) */
  html.ui-v2 .v3-side-h .v3-logo{font-size:0 !important;max-width:none}
  html.ui-v2 .v3-side-h .v3-logo i{display:block !important;width:28px;height:28px;border-radius:8px;background:var(--accent)}
}
html.ui-v2 body{overflow-x:clip}
html.ui-v2 .v3-main,html.ui-v2 main#view{overflow-x:clip}

/* 점검 #4 (13:4x) — 로고 그림(img.ieum-logo 96px)을 레일 안으로 · 옛 단계 표시 숨김 · 가로 넘침은 화면 단위에서 */
@media (min-width:768px){
  html.ui-v2 .v3-side-h .v3-logo{font-size:15px !important}
  html.ui-v2 .v3-side-h .v3-logo i{display:none !important}
  html.ui-v2 .v3-side .ieum-logo,html.ui-v2 .ghead .ieum-logo{width:64px !important;height:auto !important;display:block}
}
html.ui-v2 .crumb,html.ui-v2 nav.crumb.jstep{display:none !important}
html.ui-v2{overflow-x:hidden}

/* 점검 #6 (14:0x) — 홈 본문이 레일 밑에 깔림: 두 틀 모두 '레일 고정 88px + 본문 왼쪽 88px' 하나로 */
@media (min-width:768px){
  html.ui-v2 body.v3home .v3{display:block !important;padding-left:88px !important}
  html.ui-v2 body.v3home .v3 > .v3-sidecol{position:fixed !important;left:0;top:0;bottom:0;z-index:40}
  html.ui-v2 body.v3home .v3 > .v3-sidecol .v3-side{height:100vh}
  /* 레일 고른 표시는 알약만 — 다른 규칙이 붙이는 밑줄·테두리 없앰 */
  html.ui-v2 .v3-nav .v2-rail,html.ui-v2 .v3-nav .v2-rail[aria-current="page"]{border:0 !important;box-shadow:none !important;text-decoration:none !important}
  html.ui-v2 .v3-nav .v2-rail::before,html.ui-v2 .v3-nav .v2-rail::after,html.ui-v2 .v3-nav .v2-new::before,html.ui-v2 .v3-nav .v2-new::after{content:none !important;display:none !important}
}

/* 계정 메뉴(시안 18) — 프로필 원을 누르면 */
html.ui-v2 .v2-acct{position:relative}
html.ui-v2 .v2-acct .v2-me{cursor:pointer}
html.ui-v2 .v2-menu{position:absolute;right:0;top:48px;min-width:160px;padding:8px;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-2);display:flex;flex-direction:column;z-index:60}
html.ui-v2 .v2-menu[hidden]{display:none}
html.ui-v2 .v2-menu a,html.ui-v2 .v2-menu button{all:unset;cursor:pointer;padding:10px 12px;border-radius:8px;font-size:15px;color:var(--text-1)}
html.ui-v2 .v2-menu a:hover,html.ui-v2 .v2-menu button:hover{background:var(--surface-2)}

/* D-1023-29 — 새 화면은 밝은 화면 고정: OS 다크 모드여도 밝은 색 */
html.ui-v2,html.ui-v2[data-theme]{color-scheme:light !important}
@media (prefers-color-scheme:dark){html.ui-v2 body{background:#F4F5F6 !important;color:#1E2124}}