/* ════════════════════════════════════════════════════════════
   나나 파트너센터 2.0 — 디자인 시스템 (2026-11 확정 시안 기준)
   짙은 잉크 사이드바 + 밝은 본문 + 나나 바이올렛 포인트
   고유 표식: 트윈 마크(겹친 두 원) — 로고·트윈 아바타·로그인에만
   ════════════════════════════════════════════════════════════ */
:root {
  --ink-950: #16132A; --ink-900: #1F1B36; --ink-800: #2B2647; --ink-700: #3B3560;
  --text: #1C1930; --text-2: #4A4663; --muted: #6E6A85; --faint: #A09CB4;
  --canvas: #F5F4F9; --surface: #FFFFFF; --subtle: #FAF9FD; --line: #E8E6F0; --line-2: #D9D6E5;
  --violet-700: #4636D6; --violet-600: #5747F0; --violet-500: #6B5BFF; --violet-200: #D9D4FF; --violet-100: #EDEBFF; --violet-50: #F6F5FF;
  --ok: #10794F; --ok-bg: #E5F5EC; --warn: #9A5A06; --warn-bg: #FFF3DC; --warn-dot: #F2A33A;
  --bad: #BE2F2A; --bad-bg: #FDECEA; --info: #285FA5; --info-bg: #E8F0FB; --neutral-bg: #EFEEF4;
  --r-sm: 6px; --r-md: 9px; --r-lg: 14px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(22,19,42,.05);
  --sh-2: 0 10px 30px -12px rgba(22,19,42,.22), 0 2px 6px rgba(22,19,42,.06);
  --sh-3: 0 24px 60px -18px rgba(22,19,42,.35), 0 4px 12px rgba(22,19,42,.08);
  --focus: 0 0 0 3px rgba(107,91,255,.28);
  --font: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --side-w: 252px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--text); background: var(--canvas); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--violet-600); text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--focus); }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 15px; height: 15px; }
svg.i.xs { width: 12px; height: 12px; }

/* ── 타이포 ── */
.h1 { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.h2 { font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.h3 { font-size: 14px; font-weight: 650; margin: 0; }
.sub { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.tiny { font-size: 12px; color: var(--muted); }
.strong { color: var(--text); font-weight: 600; }

/* ── 버튼 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid transparent; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, opacity .12s; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--violet-500); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--violet-600); }
.btn-secondary { background: var(--surface); border-color: var(--line-2); color: var(--text); }
.btn-secondary:hover:not(:disabled) { background: var(--subtle); border-color: #C9C5DA; }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--neutral-bg); }
.btn-danger { background: var(--surface); border-color: #F1C8C5; color: var(--bad); }
.btn-danger:hover:not(:disabled) { background: var(--bad-bg); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-lg { height: 44px; padding: 0 18px; font-size: 15px; }
.btn-icon { width: 34px; padding: 0; }
.btn-block { width: 100%; }
.btn .spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 입력 ── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 16px; }
.label { font-size: 13px; font-weight: 600; color: var(--text-2); display: flex; align-items: baseline; gap: 6px; }
.label .req { color: var(--violet-600); font-weight: 700; }
.label .opt { color: var(--faint); font-weight: 500; font-size: 12px; }
.label .count { margin-left: auto; font-weight: 500; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.help { font-size: 12px; color: var(--muted); line-height: 1.5; }
.input, .select, .textarea { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); font-size: 14px; color: var(--text); transition: border-color .12s, box-shadow .12s; }
.textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
.input:hover, .select:hover, .textarea:hover { border-color: #C6C2D8; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--violet-500); box-shadow: var(--focus); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236E6A85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.input-affix { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); height: 40px; overflow: hidden; transition: border-color .12s, box-shadow .12s; }
.input-affix:hover { border-color: #C6C2D8; }
.input-affix:focus-within { border-color: var(--violet-500); box-shadow: var(--focus); }
.input-affix input { border: 0; outline: 0; flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0 12px; background: transparent; font-size: 14px; }
.input-affix input:focus { box-shadow: none; }
.input-affix .affix { padding: 0 12px; color: var(--muted); font-size: 13px; height: 100%; display: flex; align-items: center; background: var(--subtle); border-left: 1px solid var(--line); }
.input-affix .icon-lead { padding-left: 11px; color: var(--faint); display: flex; }
.input-affix .icon-lead + input { padding-left: 8px; }
.input-affix .btn { margin-right: 4px; }
.field.error .input, .field.error .input-affix, .field.error .select { border-color: #E4938E; }
.field-msg { font-size: 12px; line-height: 1.5; display: flex; align-items: flex-start; gap: 5px; }
.field-msg.err { color: var(--bad); }
.field-msg.ok { color: var(--ok); }
.field-msg.info { color: var(--muted); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--violet-500); margin: 0; }
.inline-row { display: flex; gap: 8px; }
.inline-row > .input, .inline-row > .input-affix { flex: 1; min-width: 0; }
.inline-row > .btn { height: 40px; flex: none; }

/* 세그먼트·배지·칩 */
.seg { display: inline-flex; background: var(--neutral-bg); padding: 3px; border-radius: 10px; gap: 2px; }
.seg button { border: 0; background: transparent; height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge.plain::before { display: none; }
.b-ok { background: var(--ok-bg); color: var(--ok); }
.b-warn { background: var(--warn-bg); color: var(--warn); }
.b-bad { background: var(--bad-bg); color: var(--bad); }
.b-info { background: var(--info-bg); color: var(--info); }
.b-neutral { background: var(--neutral-bg); color: var(--muted); }
.b-violet { background: var(--violet-100); color: var(--violet-700); }

/* 패널 */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel-h { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel-h .h2 { flex: 1; }
.panel-b { padding: 20px; }
.divider { height: 1px; background: var(--line); margin: 20px 0; }

/* 알림 상자 */
.alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; line-height: 1.55; }
.alert svg { margin-top: 2px; }
.alert.err { background: var(--bad-bg); color: #8E2420; }
.alert.ok { background: var(--ok-bg); color: #0C5E3D; }
.alert.warn { background: var(--warn-bg); color: #7A4705; }
.alert.info { background: var(--violet-50); color: var(--violet-700); border: 1px solid var(--violet-100); }
.alert b { font-weight: 650; }
.alert .act { margin-left: auto; flex: none; align-self: center; }

/* 트윈 마크·아바타 */
.twin-mark { position: relative; display: inline-block; flex: none; }
.twin-mark::before, .twin-mark::after { content: ""; position: absolute; top: 0; width: 64%; height: 100%; border-radius: 50%; }
.twin-mark::before { left: 0; background: var(--violet-500); }
.twin-mark::after { right: 0; border: 2px solid #B8AEFF; }
.twin-avatar { position: relative; flex: none; display: inline-block; }
.twin-avatar .av { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(140deg, #8C7BFF, #5747F0); overflow: hidden; }
.twin-avatar .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 테두리 링은 사진과 같은 중심의 정원으로 (예전: 오른쪽으로 치우친 링 때문에 사진이 기울어 보였음) */
.twin-avatar::after { content: ""; position: absolute; inset: -3px; border: 1.5px solid rgba(184,174,255,.75); border-radius: 50%; pointer-events: none; }

/* 스켈레톤 */
.skel { background: linear-gradient(90deg, #EFEDF5 25%, #F7F6FB 50%, #EFEDF5 75%); background-size: 200% 100%; animation: skel 1.3s ease infinite; border-radius: 6px; }
@keyframes skel { to { background-position: -200% 0; } }

/* ════════ 부트 화면 ════════ */
.boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; color: var(--muted); font-size: 13px; }
.boot .twin-mark { width: 40px; height: 28px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* ════════ 인증 화면 (로그인·개설) ════════ */
.auth { display: grid; grid-template-columns: minmax(420px, 46%) 1fr; min-height: 100vh; background: var(--surface); }
.auth-brand { background: var(--ink-950); color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 40px 48px; }
.auth-brand .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.auth-brand .logo .twin-mark { width: 30px; height: 21px; }
.auth-art { flex: 1; display: flex; align-items: center; justify-content: center; }
.auth-art .orb { position: relative; width: 300px; height: 210px; }
.auth-art .orb .a { position: absolute; left: 0; top: 0; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9C8FFF, var(--violet-500) 55%, #4636D6); }
.auth-art .orb .b { position: absolute; right: 0; top: 0; width: 210px; height: 210px; border-radius: 50%; border: 2px solid rgba(190,182,255,.75); }
.auth-art .orb .b::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed rgba(190,182,255,.28); }
.auth-brand h2 { font-size: 30px; line-height: 1.32; letter-spacing: -0.025em; margin: 0 0 12px; font-weight: 700; }
.auth-brand p { margin: 0; color: #B4AFCC; font-size: 15px; line-height: 1.6; max-width: 380px; }
.auth-brand .foot { margin-top: 36px; font-size: 12.5px; color: #7F7A9E; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-box { width: 100%; max-width: 380px; }
.auth-box .h1 { font-size: 26px; }
.auth-box form { margin-top: 28px; }
.auth-box .alert { margin-top: 18px; }
.auth-help { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.6; }
.auth-help b { color: var(--text); font-weight: 600; }
.auth-note { margin-top: 12px; font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 6px; }

/* 개설 */
.setup { min-height: 100vh; background: var(--canvas); }
.setup-top { height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 28px; background: var(--ink-950); color: #fff; font-weight: 700; }
.setup-top .twin-mark { width: 26px; height: 18px; }
.setup-top .sp { flex: 1; }
.setup-top .btn-ghost { color: #C9C5DD; }
.setup-top .btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff; }
.setup-wrap { max-width: 680px; margin: 0 auto; padding: 36px 20px 64px; }
.setup-hero { display: flex; gap: 18px; align-items: center; margin-bottom: 24px; }
.setup-hero .twin-mark { width: 54px; height: 38px; }
.setup-steps { display: flex; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.setup-steps li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.setup-steps li .n { width: 20px; height: 20px; border-radius: 50%; background: var(--neutral-bg); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.setup-steps li.on { color: var(--text); border-color: var(--violet-200); background: var(--violet-50); }
.setup-steps li.on .n { background: var(--violet-500); color: #fff; }
.setup-steps li.done .n { background: var(--violet-100); color: var(--violet-600); }
.setup-sec + .setup-sec { margin-top: 16px; }
.setup-sec .panel-h .h2 { display: flex; align-items: center; gap: 8px; }
.setup-sec .panel-b > .help:first-child { margin: -4px 0 16px; }
.lock-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--warn-bg); color: #7A4705; font-size: 12.5px; line-height: 1.5; }
.setup-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.setup-actions .help { text-align: center; }
.state-card { padding: 40px 28px; text-align: center; }
.state-card .ic { width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.state-card .h2 { margin-bottom: 6px; }
.state-card p { margin: 0 auto 20px; color: var(--muted); font-size: 13.5px; line-height: 1.6; max-width: 420px; }

/* ════════ 앱 셸 ════════ */
.app { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; background: linear-gradient(to right, var(--ink-950) var(--side-w), transparent var(--side-w)); }
.side { background: var(--ink-950); color: #CFCBE3; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 40; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 14px; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; text-decoration: none; }
.side-brand .twin-mark { width: 26px; height: 18px; }
.ws { margin: 4px 12px 10px; padding: 10px; display: flex; align-items: center; gap: 10px; background: var(--ink-900); border: 1px solid var(--ink-800); border-radius: 12px; cursor: pointer; color: #fff; text-align: left; width: calc(100% - 24px); }
.ws:hover { border-color: var(--ink-700); }
.ws[aria-disabled="true"] { cursor: default; }
.ws[aria-disabled="true"] .ws-chev { display: none; }
.ws .twin-avatar { width: 34px; height: 34px; }
.ws .twin-avatar .av { font-size: 13px; }
.ws .t { flex: 1; min-width: 0; }
.ws .t b { display: block; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws .t span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #9C97BA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws .t span i { width: 6px; height: 6px; border-radius: 50%; background: #4CC38A; display: inline-block; flex: none; }
.ws .t span i.off { background: #8F8AAD; }
.nav { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }
.nav-g { font-size: 12px; color: #7D789C; padding: 16px 10px 6px; }
.nav a { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; color: #C9C5DD; font-size: 13.5px; font-weight: 500; }
.nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav a.on { background: rgba(107,91,255,.18); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--violet-500); }
.nav a .cnt { margin-left: auto; font-size: 11.5px; color: #9C97BA; font-variant-numeric: tabular-nums; }
.nav a .dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--warn-dot); }
.nav a .lock { margin-left: auto; color: #8F8AAD; }
.side-foot { border-top: 1px solid var(--ink-800); padding: 12px; display: flex; align-items: center; gap: 10px; }
.side-foot .me { width: 30px; height: 30px; border-radius: 50%; background: var(--ink-800); color: #D9D5EE; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; text-transform: uppercase; }
.side-foot .t { flex: 1; min-width: 0; font-size: 12.5px; }
.side-foot .t b { display: block; color: #E8E5F5; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .t span { color: #8F8AAD; }
.side-foot button, .side-foot a.ib { background: none; border: 0; color: #8F8AAD; cursor: pointer; padding: 6px; border-radius: 6px; display: flex; }
.side-foot button:hover, .side-foot a.ib:hover { background: rgba(255,255,255,.06); color: #fff; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; }
.crumbs b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumbs svg { color: var(--faint); }
.topbar .sp { flex: 1; }
.page { padding: 28px 32px 48px; max-width: 1360px; width: 100%; }
.page-h { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.page-h .t { flex: 1; min-width: 0; }
.page-h .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.banner { margin: 0 32px; margin-top: 16px; }
.m-top, .bnav { display: none; }

/* ════════ 팝오버·시트·모달·토스트 ════════ */
.pop { position: fixed; z-index: 200; min-width: 260px; max-width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-3); padding: 6px; }
.pop-h { padding: 8px 10px 6px; font-size: 12px; color: var(--muted); }
.pop-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; color: var(--text); }
.pop-item:hover, .pop-item:focus-visible { background: var(--subtle); }
.pop-item .twin-avatar { width: 30px; height: 30px; }
.pop-item .twin-avatar .av { font-size: 12px; }
.pop-item .t { flex: 1; min-width: 0; }
.pop-item .t b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-item .t span { font-size: 12px; color: var(--muted); }
.pop-item .ck { color: var(--violet-600); }
.scrim { position: fixed; inset: 0; z-index: 150; background: rgba(22,19,42,.42); }
.scrim.clear { background: transparent; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 210; background: var(--surface); border-radius: 18px 18px 0 0; box-shadow: var(--sh-3); padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); max-height: 82vh; overflow-y: auto; animation: up .18s ease-out; }
.sheet .grab { width: 36px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 4px auto 10px; }
.sheet .nav-g { color: var(--muted); padding: 12px 10px 4px; }
.sheet a, .sheet button.sheet-item { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 10px; border-radius: 10px; color: var(--text); font-size: 14.5px; font-weight: 500; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; }
.sheet a.on { background: var(--violet-50); color: var(--violet-700); font-weight: 650; }
.sheet a .cnt { margin-left: auto; font-size: 12.5px; color: var(--muted); }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
.modal-wrap { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(22,19,42,.42); }
.modal { width: 100%; max-width: 440px; background: var(--surface); border-radius: 16px; box-shadow: var(--sh-3); padding: 24px; animation: up .16s ease-out; }
.modal .h2 { font-size: 17px; }
.modal p { margin: 8px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.modal .hl { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--subtle); border: 1px solid var(--line); font-weight: 650; font-size: 15px; word-break: break-all; }
.modal .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }
.toasts { position: fixed; z-index: 300; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border-radius: 12px; background: var(--ink-950); color: #fff; font-size: 13.5px; box-shadow: var(--sh-2); max-width: min(92vw, 480px); animation: up .16s ease-out; }
.toast.err { background: #3A1515; }
.toast svg { flex: none; }
.toast.ok svg { color: #6FE0A8; }
.toast.err svg { color: #FF9C95; }

/* ════════ 홈 ════════ */
.twin-strip { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.twin-strip .twin-avatar { width: 52px; height: 52px; }
.twin-strip .twin-avatar .av { font-size: 18px; }
.twin-strip .t { flex: 1; min-width: 0; }
.twin-strip .t .name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.twin-strip .t .meta { display: flex; gap: 14px; margin-top: 4px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.twin-strip .t .meta b { color: var(--text-2); font-weight: 600; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.home-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line); }
.todo li:first-child { border-top: 0; }
.todo .ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.todo .t { flex: 1; min-width: 0; }
.todo .t b { display: block; font-size: 14px; font-weight: 600; }
.todo .t span { font-size: 12.5px; color: var(--muted); }
.todo-empty { padding: 26px 20px; display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 13.5px; }
.stockbar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--neutral-bg); }
.stockbar i { display: block; height: 100%; }
.legend { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.legend a { padding: 12px 14px; border-left: 1px solid var(--line); color: var(--text); display: block; }
.legend a:first-child { border-left: 0; }
.legend a:hover { background: var(--subtle); }
.legend .k { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.legend .k i { width: 8px; height: 8px; border-radius: 3px; }
.legend .v { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.legend .v small { font-size: 13px; color: var(--faint); font-weight: 500; margin-left: 2px; }
.ring { --p: 0; width: 92px; height: 92px; border-radius: 50%; background: conic-gradient(var(--violet-500) calc(var(--p) * 1%), var(--violet-100) 0); display: flex; align-items: center; justify-content: center; flex: none; }
.ring div { width: 74px; height: 74px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring b { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ring span { font-size: 11px; color: var(--muted); margin-top: -2px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.checks li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); }
.checks li .ck { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.checks li.done .ck { background: var(--violet-500); color: #fff; }
.checks li.todo-x .ck { border: 1.5px dashed var(--line-2); }
.checks li.todo-x { color: var(--text); font-weight: 600; }
.checks li .x { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); }
.kv div + div { border-left: 1px solid var(--line); padding-left: 16px; }
.kv .k { font-size: 12.5px; color: var(--muted); }
.kv .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.dl { display: grid; gap: 10px; font-size: 13.5px; }
.dl > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.dl > div > span:first-child { color: var(--muted); font-size: 13px; }
.dl b { font-weight: 600; text-align: right; }

/* ════════ 표 (홈 최근 상품용) ════════ */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tbl th { background: var(--subtle); text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 0 14px; height: 40px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; }
.tbl .prod { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.tbl .prod .t { min-width: 0; }
.tbl .prod b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.thumb { width: 44px; height: 44px; border-radius: 8px; flex: none; overflow: hidden; border: 1px solid rgba(0,0,0,.04); background: var(--neutral-bg); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.empty { background: repeating-linear-gradient(-45deg, #F3F1F8, #F3F1F8 6px, #ECEAF3 6px, #ECEAF3 12px); display: flex; align-items: center; justify-content: center; color: var(--faint); }
.price b { font-weight: 650; font-variant-numeric: tabular-nums; }
.m-cards { display: none; }

/* ════════ 준비 중(다음 단계) 화면 ════════ */

/* ════════ 계정 ════════ */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.pw-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pw-rules li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pw-rules li.ok { color: var(--ok); }
.pw-rules li .d { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; }

/* ════════ 반응형 ════════ */
/* ════════ 트윈 프로필 편집 (2단계) ════════ */
.btn-danger-solid { background: var(--bad); color: #fff; }
.btn-danger-solid:hover:not(:disabled) { background: #A52722; }
.txt-bad { color: var(--bad) !important; }
.file-btn { position: relative; }
.file-btn:focus-within { box-shadow: var(--focus); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.textarea.short { min-height: 64px; }
.label .count.over { color: var(--warn); }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.btn-row label.btn { cursor: pointer; }
.pedit { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 24px; align-items: start; }
.pedit.single { grid-template-columns: minmax(0, 860px); }
.form-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sec .panel-h { padding: 16px 22px; }
.sec .panel-b { padding: 22px; }
.sec .panel-h .tiny { margin-left: auto; }
.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.grid-2 .field + .field { margin-top: 0; }
.ro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ro { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--subtle); border: 1px solid var(--line); min-width: 0; }
.ro .k { font-size: 12px; color: var(--muted); }
.ro b { font-size: 15px; font-weight: 650; word-break: break-all; }
.ro .tiny { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); }
/* 사진 */
.media-row { display: flex; gap: 18px; align-items: flex-start; }
.media-row .t { flex: 1; min-width: 0; }
.media-row .help { margin: 4px 0 0; }
.av-lg { position: relative; width: 96px; height: 96px; border-radius: 50%; flex: none; overflow: hidden; border: 1px solid var(--line); background: var(--violet-100); color: var(--violet-700); font-size: 30px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: zoom-in; padding: 0; }
.av-lg:disabled { cursor: default; }
.av-lg img, .cover-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-lg em, .cover-lg em { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: rgba(107,91,255,.92); color: #fff; font-size: 11px; font-weight: 600; font-style: normal; display: flex; align-items: center; justify-content: center; }
.av-lg.pending, .cover-lg.pending { box-shadow: 0 0 0 2px var(--violet-500); }
.cover-lg { position: relative; width: 100%; max-width: 480px; aspect-ratio: 2 / 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--neutral-bg); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; color: var(--faint); font-size: 12.5px; cursor: zoom-in; padding: 0; }
.cover-lg.empty { background: repeating-linear-gradient(-45deg, #F3F1F8, #F3F1F8 8px, #ECEAF3 8px, #ECEAF3 16px); cursor: default; }
/* 태그 입력 */
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); cursor: text; }
.tag-input:focus-within { border-color: var(--violet-500); box-shadow: var(--focus); }
.tag-input input { border: 0; outline: 0; flex: 1; min-width: 120px; height: 26px; font-size: 14px; background: transparent; }
.tag-input input:focus { box-shadow: none; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: var(--r-sm); background: var(--violet-50); border: 1px solid var(--violet-100); font-size: 12.5px; color: var(--violet-700); font-weight: 600; }
.tag button { border: 0; background: none; color: var(--violet-600); cursor: pointer; padding: 3px; display: flex; border-radius: 4px; }
.tag button:hover { background: var(--violet-100); }
/* 미리보기 */
.preview-col { position: sticky; top: 84px; }
.pv-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pv-card, .pv-chat { border-radius: 20px; overflow: hidden; background: #0B0A18; color: #fff; box-shadow: var(--sh-2); border: 6px solid #16132A; }
.pv-cover { aspect-ratio: 2 / 1; background: linear-gradient(135deg, #2B2647, #3B3560); }
.pv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-body { padding: 0 16px 18px; }
.pv-av { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #0B0A18; background: var(--violet-500); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; overflow: hidden; margin-top: -32px; position: relative; }
.pv-av img { width: 100%; height: 100%; object-fit: cover; }
.pv-av.sm { width: 28px; height: 28px; font-size: 12px; margin: 0; border-width: 0; }
.pv-name { margin-top: 8px; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 6px; word-break: break-all; }
.pv-off { width: 16px; height: 16px; border-radius: 50%; background: #6B5BFF; display: inline-flex; align-items: center; justify-content: center; }
.pv-chip { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 600; color: #c4b8ff; background: rgba(139,127,255,.14); border: 1px solid rgba(139,127,255,.24); padding: 2px 8px; border-radius: 20px; }
.pv-bio { margin: 10px 0 0; font-size: 12.5px; color: rgba(230,225,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-bio i, .pv-qs i { color: rgba(180,165,220,.55); font-style: normal; }
.pv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pv-tags span { font-size: 11px; color: #c4b8ff; }
.pv-chat { padding: 14px; }
.pv-chat-h { display: flex; align-items: center; gap: 8px; font-size: 13px; padding-bottom: 12px; border-bottom: 1px solid rgba(139,127,255,.15); }
.pv-bubble { margin-top: 14px; display: inline-block; padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: rgba(139,127,255,.16); font-size: 12.5px; }
.pv-qs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 14px; font-size: 12px; }
.pv-qs span { padding: 7px 11px; border-radius: 14px; border: 1px solid rgba(139,127,255,.4); color: #d9d2ff; max-width: 100%; word-break: break-all; }
/* 상세 소개 HTML 미리보기 */
.html-pv { width: 100%; min-height: 180px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: #fff; display: block; }
/* 소개 이미지 */
.imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.img-tile { aspect-ratio: 1; border-radius: 10px; position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--neutral-bg); }
.img-hit { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: zoom-in; display: flex; align-items: center; justify-content: center; color: var(--faint); }
.img-hit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-tile .lab { position: absolute; left: 6px; top: 6px; height: 20px; min-width: 20px; padding: 0 6px; border-radius: 6px; background: rgba(22,19,42,.78); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.tile-acts { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 4px; padding: 6px; background: linear-gradient(transparent, rgba(22,19,42,.55)); }
.tile-acts .sp { flex: 1; }
.ta { width: 28px; height: 28px; border-radius: 7px; border: 0; background: rgba(255,255,255,.94); color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ta:hover:not(:disabled) { background: #fff; color: var(--text); }
.ta.bad { color: var(--bad); }
.ta:disabled { opacity: .4; cursor: not-allowed; }
.img-tile.pending { box-shadow: 0 0 0 2px var(--violet-500) inset; }
.img-tile.pending::after { content: "올리기 대기"; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: rgba(107,91,255,.92); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.tile-x { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(22,19,42,.78); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 1; }
.img-add { aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 12.5px; background: var(--subtle); cursor: pointer; position: relative; }
.img-add:hover, .img-add:focus-within { border-color: var(--violet-500); color: var(--violet-600); background: var(--violet-50); }
.img-add:focus-within { box-shadow: var(--focus); }
/* 추천 질문 */
.qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qrow { display: flex; align-items: center; gap: 10px; }
.qrow .n { width: 24px; height: 24px; border-radius: 50%; background: var(--violet-50); color: var(--violet-700); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.q-in { flex: 1; min-width: 0; position: relative; }
.q-in .input { padding-right: 64px; }
.q-in .count { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; pointer-events: none; }
.q-in .count.over { color: var(--warn); }
.row-acts { display: flex; gap: 2px; flex: none; }
.row-acts .btn-icon { width: 30px; }
/* 토글 */
.switch { position: relative; display: inline-flex; width: 40px; height: 24px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { width: 100%; height: 100%; border-radius: 99px; background: #CFCBDD; transition: background .15s; position: relative; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(22,19,42,.25); transition: transform .15s; }
.switch input:checked + i { background: var(--violet-500); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { box-shadow: var(--focus); }
.tg-list { display: flex; flex-direction: column; gap: 10px; }
.tg-list.plain { gap: 0; }
.tg-list.plain .tg-row { padding: 14px 0; border-top: 1px solid var(--line); }
.tg-list.plain .tg-row:first-child { border-top: 0; }
.tg-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tg-row { display: flex; align-items: center; gap: 12px; }
.tg-row .t { flex: 1; min-width: 0; }
.tg-row .t b { display: block; font-size: 14px; font-weight: 650; }
.tg-row .t span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.tg-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--subtle); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--text-2); flex: none; }
/* 기타 링크 */
.links-box { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--subtle); }
.links-h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.links-h .t { flex: 1; }
.links-h b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; }
.links-h span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ln-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ln-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--surface); }
.ln-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ln-top > b { font-size: 13px; font-weight: 700; }
.ln-top .tiny { flex: 1; min-width: 0; }
.ln-fields .label { font-size: 12px; }
.ln-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 10px; background: var(--surface); }
.legacy { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-2); word-break: break-all; }
.ig-h { display: flex; align-items: flex-start; gap: 12px; }
.ig-h .t { flex: 1; min-width: 0; }
/* 저장 바 */
.savebar { position: sticky; bottom: 16px; z-index: 15; margin-top: 24px; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--ink-950); color: #fff; box-shadow: var(--sh-2); max-width: 860px; }
.pedit:not(.single) + .savebar { max-width: none; }
.savebar .t { flex: 1; min-width: 0; font-size: 13.5px; display: flex; align-items: center; gap: 10px; }
.savebar .t .pulse { width: 8px; height: 8px; border-radius: 50%; background: #F2A33A; flex: none; }
.savebar .t b { font-weight: 650; white-space: nowrap; }
.savebar .t span { color: #B4AFCC; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.savebar .btn-secondary { background: transparent; border-color: rgba(255,255,255,.18); color: #fff; }
.savebar .btn-secondary:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.savebar .btn { height: 34px; }
/* 크게 보기 */
.modal-wrap.zoom { background: rgba(10,9,20,.86); cursor: zoom-out; }
.modal-wrap.zoom img { max-width: min(92vw, 1100px); max-height: 86vh; border-radius: 10px; box-shadow: var(--sh-3); }
.zoom-x { position: absolute; top: 14px; right: 14px; color: #fff; background: rgba(255,255,255,.1); }
@media (max-width: 1279px) {
  .pedit, .pedit.single { grid-template-columns: minmax(0, 1fr); }
  .preview-col { display: none; }
}
@media (max-width: 767px) {
  .edit-page.has-savebar { padding-bottom: 96px; }
  .sec .panel-h { padding: 14px 16px; }
  .sec .panel-b { padding: 16px; }
  .grid-2, .ro-grid { grid-template-columns: 1fr; }
  .media-row { gap: 14px; }
  .av-lg { width: 76px; height: 76px; font-size: 24px; }
  .imgs { grid-template-columns: repeat(2, 1fr); }
  .qrow { flex-wrap: wrap; gap: 8px; }
  .qrow .q-in { flex: 1 1 calc(100% - 34px); }
  .qrow .row-acts { margin-left: 34px; }
  .ln-top { flex-wrap: wrap; }
  .ln-top .tiny { order: 3; flex-basis: 100%; }
  .ln-top .row-acts { margin-left: auto; }
  .savebar { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); border-radius: 0; margin: 0; padding: 10px 12px; max-width: none; }
  .savebar .t span { display: none; }
  .savebar [data-act="form-reset"] span { display: none; }
  .savebar [data-act="form-reset"] { width: 34px; padding: 0; }
}

@media (max-width: 1279px) {
  :root { --side-w: 72px; }
  .side-brand { justify-content: center; padding: 18px 0 12px; }
  .side-brand span, .ws .t, .ws .ws-chev, .side .nav-g, .nav a span, .nav a .cnt, .nav a .lock, .side-foot .t { display: none; }
  .ws { width: 48px; margin: 4px auto 10px; padding: 6px; justify-content: center; }
  .nav a { justify-content: center; padding: 0; }
  .nav a .dot { position: absolute; margin: 0; top: 7px; right: 12px; }
  .nav .nav-sep { height: 1px; background: var(--ink-800); margin: 10px 8px; }
  .side-foot { flex-direction: column; }
  .home-grid, .acct-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1280px) { .nav .nav-sep { display: none; } }
@media (max-width: 767px) {
  .app { display: block; padding-bottom: calc(72px + env(safe-area-inset-bottom)); background: none; }
  .side, .topbar { display: none; }
  .m-top { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 10px 0 12px; background: var(--ink-950); color: #fff; position: sticky; top: 0; z-index: 30; }
  .m-top .ws { margin: 0; width: auto; flex: 1; min-width: 0; padding: 6px 8px; background: transparent; border: 0; }
  .m-top .ws .t { display: block; }
  .m-top .ws .ws-chev { display: block; }
  .m-top .ws .twin-avatar { width: 30px; height: 30px; }
  .m-top .ib { width: 38px; height: 38px; border: 0; background: rgba(255,255,255,.06); color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
  .bnav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); z-index: 30; }
  .bnav a, .bnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--muted); font-weight: 500; border: 0; background: none; cursor: pointer; }
  .bnav .on { color: var(--violet-600); font-weight: 650; }
  .page { padding: 18px 16px 28px; }
  .banner { margin: 12px 16px 0; }
  .page-h { flex-wrap: wrap; align-items: flex-start; margin-bottom: 16px; }
  .page-h .acts { width: 100%; }
  .page-h .acts .btn { flex: 1; }
  .h1 { font-size: 21px; }
  .panel { border-radius: 12px; }
  .panel-h { padding: 14px 16px; }
  .panel-b { padding: 16px; }
  .todo li { padding: 13px 16px; }
  .todo li .btn { display: none; }
  .legend { grid-template-columns: repeat(2, 1fr); }
  .legend a:nth-child(3) { border-left: 0; }
  .legend a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .twin-strip { padding: 16px; gap: 12px; flex-wrap: wrap; }
  .twin-strip .btn { width: 100%; }
  .tbl-wrap { display: none; }
  .m-cards { display: block; }
  .m-card { display: flex; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); align-items: center; color: var(--text); }
  .m-card:first-child { border-top: 0; }
  .m-card .t { flex: 1; min-width: 0; }
  .m-card .t b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-card .ln { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
  /* 인증 */
  .auth { display: block; }
  .auth-brand { padding: 22px 20px 26px; }
  .auth-art, .auth-brand .foot { display: none; }
  .auth-brand h2 { font-size: 21px; margin-top: 26px; }
  .auth-brand p { font-size: 13.5px; }
  .auth-form { padding: 28px 20px 40px; align-items: flex-start; }
  .auth-box .h1 { font-size: 22px; }
  .setup-top { padding: 0 12px 0 16px; }
  .setup-wrap { padding: 22px 16px 48px; }
  .setup-hero .twin-mark { width: 40px; height: 28px; }
  .setup-steps li span.lbl { display: none; }
  .setup-steps li { justify-content: center; }
  .inline-row { flex-direction: column; }
  .inline-row > .input, .inline-row > .input-affix, .inline-row > .select { flex: none; width: 100%; max-width: none !important; }
  .inline-row > .btn { width: 100%; }
  .modal .acts { flex-direction: column-reverse; }
  .modal .acts .btn { width: 100%; }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .pop { left: 12px !important; right: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* 저장 바가 보일 때 알림은 그 위로 */
body.sb-on .toasts { bottom: 88px; }
@media (max-width: 767px) { body.sb-on .toasts { bottom: calc(140px + env(safe-area-inset-bottom)); } }
.broken { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--faint); font-size: 11px; text-align: center; padding: 6px; }
.av-lg .broken small { display: none; }

/* ════════ AI 학습 자료 (3단계) ════════ */
.only-sm { display: none !important; }
.tabs-line { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs-line button { border: 0; background: none; padding: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; }
.tabs-line button.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--violet-500); }
.tabs-line button:disabled { cursor: not-allowed; opacity: .6; }
.seg button .c { font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.toolbar .search { flex: 1 1 220px; max-width: 360px; }
.mat-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.mat-add { position: sticky; top: 84px; }
.mat-form .field + .field { margin-top: 16px; }
.mat-form .field-msg { margin: 12px 0 0; }
.mat-form .btn-block { margin-top: 14px; height: 40px; }
.mat-list-panel .panel-h .tiny { margin-left: -2px; }
.mat-rows { list-style: none; margin: 0; padding: 0; }
.mat-row { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-top: 1px solid var(--line); }
.mat-row:first-child { border-top: 0; }
.mat-row.fresh { background: var(--violet-50); }
.mat-open { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 10px; color: var(--text); }
.mat-open:hover { background: var(--subtle); }
.mat-open .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mat-open .meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.mat-open b { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-open .pv { font-size: 13px; color: var(--text-2); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.mat-ic { width: 44px; height: 44px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--neutral-bg); color: var(--muted); }
.mat-ic.document { background: var(--violet-50); color: var(--violet-600); }
.mat-row .row-acts { gap: 0; }
.mat-more { padding: 12px 16px 16px; text-align: center; border-top: 1px solid var(--line); }
.mat-cap { margin: 0; padding: 0 16px 16px; display: flex; gap: 6px; align-items: flex-start; }
.mat-empty { padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.mat-empty b { color: var(--text); font-size: 14.5px; font-weight: 650; }
.mat-empty .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--violet-50); color: var(--violet-600); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.mat-empty .ic.bad { background: var(--bad-bg); color: var(--bad); }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 22px 14px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: var(--subtle); color: var(--muted); font-size: 12.5px; text-align: center; cursor: pointer; position: relative; }
.drop b { color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.drop:hover, .drop:focus-within, .drop.over { border-color: var(--violet-500); background: var(--violet-50); color: var(--violet-700); }
.drop:focus-within { box-shadow: var(--focus); }
.drop.has { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 10px 10px 12px; border-style: solid; cursor: default; text-align: left; background: var(--surface); }
.drop.has:hover { border-color: var(--line-2); background: var(--surface); color: var(--muted); }
.drop.has .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.drop.has .t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-img { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex: none; border: 1px solid var(--line); }
.drop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal.mat-modal { max-width: 640px; max-height: calc(100vh - 40px); overflow-y: auto; }
.mat-mh { display: flex; align-items: center; gap: 8px; margin: -6px -8px 14px 0; }
.mat-x { margin-left: auto; }
.mat-photo { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--neutral-bg); cursor: zoom-in; margin-bottom: 14px; }
.mat-photo img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.mat-body { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--text-2); white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow-y: auto; }
.mat-modal .acts { align-items: center; }
@media (max-width: 1279px) {
  .mat-grid { grid-template-columns: minmax(0, 1fr); }
  .mat-add { position: static; order: -1; }
}
@media (max-width: 767px) {
  .only-sm { display: inline-flex !important; }
  .hide-sm { display: none; }
  .mat-add { order: 0; }
  .toolbar { padding: 12px; }
  .toolbar .search { max-width: none; flex-basis: 100%; }
  .toolbar .seg { width: 100%; overflow-x: auto; }
  .mat-row { padding: 2px 4px 2px 0; gap: 0; }
  .mat-open { padding: 12px 8px 12px 12px; gap: 10px; }
  .mat-row .row-acts { flex-direction: column; gap: 2px; }
  .mat-row .row-acts .btn { height: 32px; padding: 0 8px; }
  .modal.mat-modal { padding: 18px; }
  .mat-modal .acts { flex-direction: row; flex-wrap: wrap; }
  .mat-modal .acts > span { width: 100%; margin-bottom: 4px; }
  .mat-modal .acts .btn { flex: 1; }
}
#matEditor[data-mode="edit"] .mat-photo img { max-height: 140px; }

/* ════════ 4-A단계: 상품 관리 ════════ */
.seller-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); font-size: 13px; color: var(--muted); }
.seller-strip b { color: var(--text); font-weight: 650; }
.seller-strip .note { flex-basis: 100%; font-size: 12.5px; }
.seller-strip .note.warn { color: var(--warn); }
.filters { display: flex; gap: 8px; padding: 12px 16px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip.on { border-color: var(--violet-200); background: var(--violet-50); color: var(--violet-700); font-weight: 600; }
.toolbar .sp { flex: 1; }
.tbl tbody tr[data-popen] { cursor: pointer; }
.tbl tbody tr[data-popen]:hover td, .tbl tbody tr[data-popen]:focus-visible td { background: #FBFAFE; }
.tbl tbody tr[data-popen]:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--violet-500); }
.tbl .prod .mks, .m-card .mks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.mk { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--neutral-bg); padding: 1px 6px; border-radius: 5px; }
.mk.pin { color: var(--violet-700); background: var(--violet-50); }
.mk.warn { color: var(--warn); background: var(--warn-bg); }
.pid { font-size: 11.5px; color: var(--faint); }
.price s { display: block; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.price .rate { color: #D9455F; font-weight: 700; margin-right: 4px; font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.pager .sp { flex: 1; }
.pager .pg { display: flex; gap: 4px; }
.pager .pg button { min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; }
.pager .pg button:hover:not(:disabled) { background: var(--neutral-bg); }
.pager .pg button.on { background: var(--ink-950); color: #fff; font-weight: 600; }
.pager .pg button:disabled { color: var(--line-2); cursor: default; }
.pager .select { width: auto; height: 32px; font-size: 13px; }
.pop a.pop-item { text-decoration: none; }
.pop-item svg { color: var(--muted); }
/* 편집 */
.pe-sub { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pe-sub .num { font-size: 12px; color: var(--faint); }
.edit { display: grid; grid-template-columns: 172px minmax(0, 1fr) 316px; gap: 24px; align-items: start; }
.toc { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.toc a { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.toc a:hover { background: var(--neutral-bg); color: var(--text); }
.toc a.on { color: var(--text); font-weight: 650; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.toc a .st { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.toc a .st.ok { background: var(--violet-100); color: var(--violet-600); }
.toc a .st.need { border: 1.5px solid #F2A33A; }
.toc .meta { margin-top: 18px; padding: 14px 12px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); line-height: 1.7; }
.toc .meta b { color: var(--text-2); font-weight: 600; }
.edit .form-col { scroll-margin-top: 80px; }
.edit .sec { scroll-margin-top: 80px; }
.vis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vis label { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.vis label:hover { border-color: #C6C2D8; }
.vis label.on { border-color: var(--violet-500); background: var(--violet-50); box-shadow: 0 0 0 1px var(--violet-500) inset; }
.vis label:focus-within { box-shadow: var(--focus); }
.vis input { accent-color: var(--violet-500); margin: 3px 0 0; }
.vis b { display: block; font-size: 14px; font-weight: 650; }
.vis span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.vis input:disabled + div { opacity: .7; }
.calc { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--subtle); border: 1px dashed var(--line-2); font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.calc .rate { color: #D9455F; font-weight: 700; }
.bad-t { color: var(--bad); display: inline-flex; align-items: center; gap: 4px; }
.opt-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px; }
.opt-row + .opt-row { margin-top: 8px; }
.img-group + .img-group { margin-top: 22px; }
.img-group .gh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.img-group .gh .help { flex: 1; min-width: 160px; }
.img-group .gh .tiny { margin-left: auto; }
.imgs.main { grid-template-columns: repeat(auto-fill, minmax(150px, 180px)); }
.img-tile .ptag { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: rgba(107,91,255,.92); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.img-tile .ptag.fail { background: rgba(190,47,42,.92); }
.img-tile.pending::after { display: none; }
.img-tile.pending .tile-acts { bottom: 22px; background: none; }
.img-tile.failed { box-shadow: 0 0 0 2px var(--bad) inset; }
.notice-row { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--subtle); font-size: 13px; }
.notice-row + .notice-row { margin-top: 8px; }
.notice-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count-line { display: flex; justify-content: flex-end; }
.count-line .count { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rep { margin: 6px 0; padding-left: 18px; }
.html-pv.phone-w { max-width: 420px; min-height: 260px; margin-top: 10px; }
.danger-zone .panel-b { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.danger-zone .panel-b > div { flex: 1; min-width: 200px; }
.danger-zone b { font-weight: 650; }
/* 고객 화면 미리보기 */
.phone { width: 290px; margin: 0 auto; border-radius: 36px; padding: 10px; background: #0F0D1C; box-shadow: var(--sh-2); }
.phone .scr { border-radius: 28px; overflow: hidden; background: #020410; height: 560px; color: #fff; display: flex; flex-direction: column; }
.phone .bar { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 12.5px; font-weight: 700; border-bottom: 1px solid rgba(139,127,255,.12); flex: none; }
.phone .bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone .gal { aspect-ratio: 1; flex: none; position: relative; background: linear-gradient(135deg, #1F1B36, #2B2647); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.45); font-size: 12px; }
.phone .gal span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.phone .gal img { width: 100%; height: 100%; object-fit: contain; display: block; }
.phone .gal em { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px; text-align: center; font-style: normal; font-size: 11.5px; font-weight: 700; background: rgba(0,0,0,.6); }
.phone .bd { padding: 14px 16px; overflow: hidden; }
.phone .chipx { display: inline-block; font-size: 10px; font-weight: 600; color: #c4b8ff; background: rgba(139,127,255,.14); border: 1px solid rgba(139,127,255,.24); padding: 2px 8px; border-radius: 20px; }
.phone .nm { margin-top: 8px; font-size: 15px; font-weight: 800; line-height: 1.4; word-break: break-all; }
.phone .sm { font-size: 11px; color: rgba(220,215,245,.7); margin-top: 4px; }
.phone .ls { margin-top: 10px; font-size: 11px; color: rgba(180,165,220,.55); text-decoration: line-through; }
.phone .pr { font-size: 18px; font-weight: 800; margin-top: 2px; }
.phone .pr i { font-style: normal; color: #ff6b9d; margin-right: 6px; }
.phone .tg { margin-top: 8px; font-size: 11px; color: #c4b8ff; }
.phone .ft { margin-top: auto; padding: 10px 12px 14px; border-top: 1px solid rgba(139,127,255,.15); }
.phone .buy { height: 40px; border-radius: 12px; background: linear-gradient(135deg,#7b6fff,#c47fff); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.phone .buy.off { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }
.edit .preview-col .pv-head { justify-content: space-between; }
@media (max-width: 1279px) {
  .edit { grid-template-columns: 160px minmax(0, 1fr); }
  .edit .preview-col { display: none; }
}
@media (max-width: 767px) {
  .edit { display: block; }
  .toc { position: sticky; top: 56px; z-index: 20; flex-direction: row; overflow-x: auto; gap: 6px; background: var(--canvas); padding: 10px 16px; margin: -6px -16px 14px; border-bottom: 1px solid var(--line); }
  .toc a { flex: none; height: 32px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 99px; }
  .toc a.on { background: var(--ink-950); color: #fff; box-shadow: none; border-color: var(--ink-950); }
  .toc a .st, .toc .meta { display: none; }
  .vis { grid-template-columns: 1fr; }
  .vis label { padding: 12px; }
  .opt-row { grid-template-columns: 110px minmax(0, 1fr); }
  .imgs.main { grid-template-columns: repeat(2, 1fr); }
  .toolbar #prCat, .toolbar #prSort { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .toolbar .sp { display: none; }
  .filters { overflow-x: auto; flex-wrap: nowrap; }
  .filters .seg { flex: none; }
  .m-card[data-popen] { cursor: pointer; }
  .m-card .mks { margin-top: 4px; }
  .pager { justify-content: center; }
  .pager .sp, .pager .tot { display: none; }
  .pe-page .page-h .acts .btn { flex: 1 1 auto; }
  .seller-strip { font-size: 12.5px; }
}

/* ════════════════ 4-B단계: 선택 · 카테고리·고정 · 공지 · 엑셀 · 일괄수정 ════════════════ */
input.check { width: 16px; height: 16px; accent-color: var(--violet-500); margin: 0; cursor: pointer; flex: none; }
.w-check { width: 44px; padding-right: 0 !important; }
label.w-check { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px 0; cursor: pointer; border-radius: 8px; }
label.w-check:hover { background: var(--violet-50); }
.m-card.sel { background: var(--violet-50); }
.selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 16px 12px; padding: 8px 8px 8px 14px; border-radius: var(--r-md); background: var(--ink-900); color: #fff; font-size: 13px; }
.selbar .x { color: rgba(255,255,255,.66); font-size: 12.5px; }
.selbar .sp { flex: 1; }
.selbar .btn-secondary { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; }
.selbar.off { background: var(--subtle); color: var(--muted); border: 1px dashed var(--line-2); }
.help-list { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13px; line-height: 1.65; }
.help-list li + li { margin-top: 2px; }
.txt-bad { color: var(--bad) !important; }
.state-card { padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.state-card .ic { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.state-card p { color: var(--muted); margin: 0 0 6px; }

/* 카테고리 · 고정 */
.cx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cx-list { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.cx-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.cx-row:first-child { border-top: 0; }
.cx-row .n { width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--violet-100); color: var(--violet-700); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.cx-row .thumb { width: 36px; height: 36px; }
.cx-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cx-name .input { height: 36px; }
.cx-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-name .tiny { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.cx-empty { padding: 18px 14px; color: var(--muted); font-size: 13px; text-align: center; list-style: none; }
.cx-foot { padding: 10px 14px; background: var(--subtle); border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; list-style: none; }
.cx-pin-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* 상품 고르기 */
.picker { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.picker-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 10px; border-bottom: 1px solid var(--line); background: var(--subtle); }
.picker-h .search { flex: 1; min-width: 180px; }
.picker-l { max-height: 300px; overflow-y: auto; }
.pk-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.pk-row:first-child { border-top: 0; }
.pk-row:hover { background: var(--violet-50); }
.pk-row .t { flex: 1; min-width: 0; }
.pk-row .t b { font-weight: 550; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-f { padding: 8px 12px; border-top: 1px solid var(--line); background: var(--subtle); }
.modal.wide { max-width: 620px; }
.modal .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* 공지 */
.nt-compose { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.nt-compose .field + .field { margin-top: 14px; }
.nt-pv-wrap { border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.nt-pv-wrap > div { width: 100%; }
.notice-pv { width: 100%; max-width: 420px; min-height: 90px; border: 1px solid #F2D58A; border-radius: var(--r-md); display: block; margin-top: 8px; background: #FFF8E6; }
.nt-pv { margin-top: 12px; }
.nt-item { padding: 16px 20px; border-top: 1px solid var(--line); }
.nt-item:first-child { border-top: 0; }
.nt-item.off .nt-body { opacity: .6; }
.nt-item.editing { background: var(--violet-50); }
.nt-item .field + .field { margin-top: 10px; }
.nt-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nt-h b { font-weight: 650; font-size: 14px; }
.nt-body { margin-top: 6px; color: var(--text-2); font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.nt-targets { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.nt-targets summary { cursor: pointer; color: var(--violet-600); }
.nt-targets div { margin-top: 6px; line-height: 1.6; }
.btn-row .sp { flex: 1; }
.nt-ind { list-style: none; margin: 0; padding: 0; }
.nt-ind li { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); }
.nt-ind li:first-child { border-top: 0; }
.nt-ind a { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--text); }
.nt-ind a b { font-weight: 600; }
.nt-ind a span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-ind a:hover b { color: var(--violet-600); }
.confirm { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 10px; font-size: 13.5px; font-weight: 550; cursor: pointer; line-height: 1.5; }
.confirm input { margin-top: 2px; }
.confirm.danger { color: var(--bad); }
.rep { margin: 4px 0; padding-left: 18px; }
.rep.scroll { max-height: 180px; overflow-y: auto; }

/* 엑셀 */
.im-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.im-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 12px; }
.im-steps li { counter-increment: s; position: relative; padding-left: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.im-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--violet-100); color: var(--violet-700); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.im-steps li span { font-size: 12.5px; color: var(--muted); }
.im-steps li .btn { margin-top: 6px; }
.im-tbl { margin-top: 14px; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.im-tbl .ellip { display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-btn { cursor: pointer; }

/* 일괄수정 */
.bk-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 16px; flex-wrap: wrap; }
.bk-steps li { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; }
.bk-steps li i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--neutral-bg); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.bk-steps li.on { border-color: var(--violet-500); color: var(--violet-700); background: var(--violet-50); }
.bk-steps li.on i { background: var(--violet-500); color: #fff; }
.bk-steps li.done i { background: var(--ok-bg); color: var(--ok); }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bk-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--subtle); border: 1px solid var(--line); font-size: 12.5px; max-width: 280px; }
.bk-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-chip em { font-style: normal; color: var(--muted); font-size: 11.5px; }
.bk-ops { display: flex; flex-direction: column; gap: 10px; }
.bk-op { border: 1px solid var(--line); border-radius: var(--r-md); }
.bk-op.on { border-color: var(--violet-200); box-shadow: 0 0 0 1px var(--violet-200); }
.bk-op-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.bk-op-h b { font-weight: 650; }
.bk-op.on .bk-off-note { display: none; }
.bk-op-b { padding: 0 14px 14px 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; }
.radio-row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.radio-row input { accent-color: var(--violet-500); width: 16px; height: 16px; margin: 0; }
.bk-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bk-sum span { height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--neutral-bg); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; color: var(--text-2); }
.bk-sum .ok { background: var(--ok-bg); color: var(--ok); }
.bk-sum .fail { background: var(--bad-bg); color: var(--bad); }
.bk-rows { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); max-height: 560px; overflow-y: auto; }
div.bk-row { border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 12px; }
.bk-row { padding: 12px 14px; border-top: 1px solid var(--line); font-size: 13px; }
.bk-row:first-child { border-top: 0; }
.bk-row > b { display: block; font-weight: 650; margin-bottom: 4px; }
.bk-row.same { color: var(--muted); }
.bk-row.fail { background: #FFF9F8; }
.bk-ch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.bk-ch .k { min-width: 84px; color: var(--muted); font-size: 12.5px; }
.bk-ch .b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); word-break: break-all; }
.bk-ch .a { color: var(--violet-700); font-weight: 600; word-break: break-all; }
.bk-err { color: var(--bad); margin-top: 3px; display: flex; gap: 5px; align-items: center; }
.bk-warn { color: var(--warn); margin-top: 4px; font-size: 12.5px; display: flex; gap: 5px; align-items: center; }
.bk-imgs { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.bk-imgs > div { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.bk-imgs .tiny { width: 100%; }
.thumb.sm { width: 34px; height: 34px; border-radius: 6px; }
.bk-html { margin-top: 8px; }
.bk-html summary { cursor: pointer; color: var(--violet-600); font-size: 12.5px; }
.img-tile.loading { display: flex; align-items: center; justify-content: center; }

@media (max-width: 1023px) {
  .cx-grid, .nt-compose, .im-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .selbar { margin: 0 12px 10px; }
  .selbar .x { width: 100%; order: 3; }
  .cx-row { flex-wrap: wrap; }
  .cx-row .cx-name { flex: 1 1 0; }
  .cx-row .row-acts { flex-basis: 100%; padding-left: 30px; }
  .nt-item, .nt-ind li { padding: 14px 16px; }
  .bk-ch .k { min-width: 100%; }
  .bk-chip { max-width: 100%; }
  .m-card label.w-check { margin: 0 -4px 0 -8px; }
  .modal.wide { padding: 18px; }
  .picker-l { max-height: 50vh; }
}

/* 상품 목록: 행마다 [수정] [복사] 버튼 (··· 메뉴 대신) */
.pr-acts { display: inline-flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.pr-acts .btn { height: 32px; padding: 0 12px; }
.pr-acts .btn svg { margin-right: 2px; }
.pr-acts .btn[disabled] { opacity: .45; cursor: not-allowed; }
.pr-acts .pr-pin { gap: 4px; color: var(--muted); }
.pr-acts .pr-pin.on { color: var(--violet-700); background: var(--violet-50); border-color: var(--violet-200); font-weight: 600; }
.pr-acts .pr-pin.on:hover:not(:disabled) { background: var(--violet-100); border-color: var(--violet-200); }
.pr-acts .pr-pin .spin { width: 14px; height: 14px; }
.pin-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pin-row .t b { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 767px) {
  .m-card { align-items: flex-start; }
  .m-card .pr-acts { display: flex; justify-content: flex-start; margin-top: 10px; }
  .m-card .pr-acts .btn { height: 34px; flex: 0 0 auto; min-width: 72px; justify-content: center; }
  .m-card .pr-acts { width: 100%; max-width: 330px; }
  .m-card .pr-acts .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
}

/* 엑셀 일괄수정 (2026-11-10) — 일괄수정 미리보기 스타일 재사용 */
.bk-ch.info .k, .bk-ch.info .a { color: var(--muted); font-weight: 500; }
.xl-list .bk-rows { max-height: 520px; }
.xl-list .bk-row > b .tiny { font-weight: 500; color: var(--faint); margin-left: 6px; }
@media (max-width: 767px) {
  .xl-list .bk-ch .k { min-width: 100%; }
  .xl-list .bk-row > b .tiny { display: block; margin: 2px 0 0; }
}