/* 인다이브 디자인 시스템 v0.3.1. 직접 고치지 말고 app-factory/ui/src를 고친 뒤 빌드하세요. */
/* 인다이브 디자인 토큰. 색, 글자, 간격, 모양의 값은 전부 여기에만 둔다. */
:root,
[data-in-theme="light"] {
/* 바닥과 면 */
--in-bg: #f1f2f4;
--in-paper: #f5f5f3;
--in-grid: rgba(30, 35, 50, 0.055);
--in-dot: rgba(30, 50, 110, 0.13);
--in-stage: #e9ecf2;
--in-face: #ffffff;
--in-sunken: #f1f2f4;
--in-edge: rgba(20, 25, 40, 0.08);
--in-edge-strong: rgba(20, 25, 40, 0.26);
/* 글자 */
--in-ink: #16181d;
--in-mid: #5f6573;
--in-soft: #8b909c;
--in-off-bg: #e3e5e9;
--in-off-ink: #6f7480;
/* 강조색 */
--in-accent: #2563eb;
--in-accent-hover: #1d52cc;
--in-accent-ink: #ffffff;
--in-accent-text: #1f5ae0;
--in-accent-wash: #e4edff;
--in-brand: #1f469b;
--in-brand-face: #1f469b;
--in-brand-face-off: #3a3f4b;
/* 차트: 양을 나타내는 한 색 단계(옅음→짙음)와 그 위 글자색 */
--in-q1: #dbe6ff; --in-q2: #a9c2ff; --in-q3: #6f98fb; --in-q4: #3466e6; --in-q5: #1d4ed8;
--in-q1-ink: #1d3a8a; --in-q2-ink: #1d3a8a; --in-q3-ink: #10265e; --in-q4-ink: #ffffff; --in-q5-ink: #ffffff;
--in-q-off: #b8bdc8;
--in-spot: #f5b301;
/* 상태 */
--in-ok: #0a7945;
--in-ok-solid: #16a35d;
--in-ok-wash: #dff6ea;
--in-warn: #8f5a00;
--in-warn-wash: #fdf1d8;
--in-err: #c72f3a;
--in-err-wash: #fde8e8;
--in-info: #1f5ae0;
--in-info-wash: #e4edff;
--in-neutral-wash: #eceef1;
/* 토글 */
--in-track: #8b909c;
--in-knob: #ffffff;
/* 떠 있는 정도 */
--in-lift: 0 1px 1px rgba(20, 25, 40, 0.04), 0 2px 6px rgba(20, 25, 40, 0.05), 0 10px 22px -10px rgba(20, 25, 40, 0.14);
--in-float: 0 2px 4px rgba(20, 25, 40, 0.08), 0 24px 44px -18px rgba(25, 40, 90, 0.38);
--in-glow: 0 1px 1px rgba(20, 60, 160, 0.2), 0 8px 18px -6px rgba(37, 99, 235, 0.55);
--in-small-lift: 0 1px 3px rgba(20, 25, 40, 0.14);
--in-scrim: rgba(16, 18, 24, 0.45);
/* 앱마다 고정된 색 */
--in-app-option: #2563eb;
--in-app-coupon: #16181d; /* 2026-11-10 재욱 "쿠폰앱은 검정" (앱스토어 아이콘과 같게) */
--in-app-grow: #129a56;
--in-app-rebuy: #7350f5;
--in-app-member: #e6336c;
--in-app-promo: #d93a40;
--in-app-task: #16181d;
--in-app-review: #0b90aa;
/* 글꼴과 글자 크기 */
--in-font: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
--in-text-xs: 13px;
--in-text-sm: 15px;
--in-text-md: 17px;
--in-text-lg: 18px;
--in-title-sm: 22px;
--in-title-md: 26px;
--in-title-lg: 36px;
/* 간격 */
--in-1: 4px;
--in-2: 8px;
--in-3: 12px;
--in-4: 16px;
--in-5: 20px;
--in-6: 24px;
--in-8: 32px;
--in-12: 48px;
/* 모양과 크기 */
--in-r-s: 12px;
--in-r-m: 16px;
--in-r-l: 22px;
--in-r-xl: 28px;
--in-ctl: 56px;
--in-ctl-inner: 44px;
/* 움직임 */
--in-fast: 0.14s;
--in-spring: 0.28s cubic-bezier(0.3, 1.3, 0.5, 1);
}
[data-in-theme="light"] { color-scheme: light; }
[data-in-theme="dark"] {
color-scheme: dark;
--in-bg: #0e1015;
--in-paper: #14161c;
--in-grid: rgba(255, 255, 255, 0.045);
--in-dot: rgba(190, 205, 255, 0.14);
--in-stage: #171a22;
--in-face: #1c1f27;
--in-sunken: #12141a;
--in-edge: rgba(255, 255, 255, 0.09);
--in-edge-strong: rgba(255, 255, 255, 0.3);
--in-ink: #f1f2f5;
--in-mid: #a6acb9;
--in-soft: #7e8492;
--in-off-bg: #2a2d36;
--in-off-ink: #8b909c;
--in-accent: #6f9bff;
--in-accent-hover: #8badff;
--in-accent-ink: #0b1020;
--in-accent-text: #9dbbff;
--in-accent-wash: rgba(111, 155, 255, 0.17);
--in-brand: #9dbbff;
--in-brand-face: #1d3d86;
--in-brand-face-off: #2c3039;
--in-q1: #1f2a45; --in-q2: #233f86; --in-q3: #3462d4; --in-q4: #6b97ff; --in-q5: #b3caff;
--in-q1-ink: #c9d6f5; --in-q2-ink: #e3ebff; --in-q3-ink: #ffffff; --in-q4-ink: #0b1020; --in-q5-ink: #0b1020;
--in-q-off: #5a606c;
--in-ok: #4fd29d;
--in-ok-solid: #2bb673;
--in-ok-wash: rgba(79, 210, 157, 0.15);
--in-warn: #e9bb62;
--in-warn-wash: rgba(233, 187, 98, 0.15);
--in-err: #f58089;
--in-err-wash: rgba(245, 128, 137, 0.15);
--in-info: #9dbbff;
--in-info-wash: rgba(111, 155, 255, 0.17);
--in-neutral-wash: #2a2d36;
--in-track: #7a808e;
--in-knob: #ffffff;
--in-lift: 0 1px 1px rgba(0, 0, 0, 0.25), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
--in-float: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 44px -18px rgba(0, 0, 0, 0.75);
--in-glow: 0 8px 20px -8px rgba(111, 155, 255, 0.6);
--in-small-lift: 0 1px 3px rgba(0, 0, 0, 0.45);
--in-scrim: rgba(0, 0, 0, 0.6);
--in-app-task: #3a3e49;
}
@media (prefers-color-scheme: dark) {
[data-in-theme="auto"] {
color-scheme: dark;
--in-bg: #0e1015;
--in-paper: #14161c;
--in-grid: rgba(255, 255, 255, 0.045);
--in-dot: rgba(190, 205, 255, 0.14);
--in-stage: #171a22;
--in-face: #1c1f27;
--in-sunken: #12141a;
--in-edge: rgba(255, 255, 255, 0.09);
--in-edge-strong: rgba(255, 255, 255, 0.3);
--in-ink: #f1f2f5;
--in-mid: #a6acb9;
--in-soft: #7e8492;
--in-off-bg: #2a2d36;
--in-off-ink: #8b909c;
--in-accent: #6f9bff;
--in-accent-hover: #8badff;
--in-accent-ink: #0b1020;
--in-accent-text: #9dbbff;
--in-accent-wash: rgba(111, 155, 255, 0.17);
--in-brand: #9dbbff;
--in-brand-face: #1d3d86;
--in-brand-face-off: #2c3039;
--in-q1: #1f2a45; --in-q2: #233f86; --in-q3: #3462d4; --in-q4: #6b97ff; --in-q5: #b3caff;
--in-q1-ink: #c9d6f5; --in-q2-ink: #e3ebff; --in-q3-ink: #ffffff; --in-q4-ink: #0b1020; --in-q5-ink: #0b1020;
--in-q-off: #5a606c;
--in-ok: #4fd29d;
--in-ok-solid: #2bb673;
--in-ok-wash: rgba(79, 210, 157, 0.15);
--in-warn: #e9bb62;
--in-warn-wash: rgba(233, 187, 98, 0.15);
--in-err: #f58089;
--in-err-wash: rgba(245, 128, 137, 0.15);
--in-info: #9dbbff;
--in-info-wash: rgba(111, 155, 255, 0.17);
--in-neutral-wash: #2a2d36;
--in-track: #7a808e;
--in-knob: #ffffff;
--in-lift: 0 1px 1px rgba(0, 0, 0, 0.25), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
--in-float: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 44px -18px rgba(0, 0, 0, 0.75);
--in-glow: 0 8px 20px -8px rgba(111, 155, 255, 0.6);
--in-small-lift: 0 1px 3px rgba(0, 0, 0, 0.45);
--in-scrim: rgba(0, 0, 0, 0.6);
--in-app-task: #3a3e49;
}
}
/* 표가 많은 업무 화면용. 크기만 줄이고 모양은 그대로 둔다. */
.in-compact {
--in-text-md: 15px;
--in-text-sm: 14px;
--in-text-lg: 16px;
--in-title-sm: 19px;
--in-title-md: 22px;
--in-title-lg: 28px;
--in-ctl: 44px;
--in-ctl-inner: 34px;
font-size: var(--in-text-md);
--in-r-l: 16px;
--in-r-m: 12px;
--in-r-s: 9px;
--in-r-xl: 20px;
}
/* 앱별 상태판 색 (v0.3.1, 2026-11-10 쿠폰앱에서). 상태판(in-hero) 판 색만 앱 색으로 바꾼다.
버튼·선택 같은 조작 색(--in-accent)은 모든 앱이 같아야 하므로 여기서 바꾸지 않는다.
쓰는 법: 화면을 감싼 in-root에 data-in-app="앱이름". 새 앱은 아래에 한 줄 추가(밝게·어둡게 둘 다 보이는 색). */
[data-in-app="coupon"] { --in-brand-face: #16181d; --in-brand-face-off: #3a3f4b; }
/* 인다이브 부품. 전부 in- 접두어라 기존 화면, 다른 앱 CSS와 겹치지 않는다. */
.in-root {
background: var(--in-bg);
color: var(--in-ink);
font-family: var(--in-font);
font-size: var(--in-text-md);
font-weight: 500;
line-height: 1.45;
word-break: keep-all;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
}
.in-root *,
.in-root *::before,
.in-root *::after { box-sizing: border-box; }
.in-root [hidden] { display: none !important; }
/* :where로 감싸 특이성을 0으로 둔다. 안 그러면 .in-btn--primary 같은 부품의 글자색을 덮는다. */
:where(.in-root) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.in-root :focus-visible { outline: 3px solid var(--in-accent); outline-offset: 2px; }
/* 아이콘 */
.in-icon { display: inline-block; flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; }
/* 글자 */
.in-title-lg, .in-title-md, .in-title-sm { margin: 0; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.in-title-lg { font-size: var(--in-title-lg); letter-spacing: -0.03em; }
.in-title-md { font-size: var(--in-title-md); letter-spacing: -0.025em; }
.in-title-sm { font-size: var(--in-title-sm); letter-spacing: -0.02em; }
.in-muted { color: var(--in-mid); }
.in-small { font-size: var(--in-text-sm); }
.in-tiny { font-size: var(--in-text-xs); }
/* 버튼 */
.in-btn {
appearance: none; border: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: var(--in-2);
height: var(--in-ctl); padding: 0 calc(var(--in-ctl) * 0.5); border-radius: var(--in-r-l);
background: var(--in-face); color: var(--in-ink); box-shadow: var(--in-lift);
font-weight: 700; text-decoration: none; white-space: nowrap;
transition: background-color var(--in-fast), color var(--in-fast), box-shadow var(--in-fast), transform 0.1s;
}
.in-btn:hover, .in-btn.is-hover { background: var(--in-sunken); }
.in-btn:active, .in-btn.is-active { transform: scale(0.97); }
.in-btn.is-focus { outline: 3px solid var(--in-accent); outline-offset: 2px; }
.in-btn--primary { background: var(--in-accent); color: var(--in-accent-ink); box-shadow: var(--in-glow); }
.in-btn--primary:hover, .in-btn--primary.is-hover { background: var(--in-accent-hover); }
.in-btn--ghost { background: transparent; color: var(--in-mid); box-shadow: none; }
.in-btn--ghost:hover, .in-btn--ghost.is-hover { background: var(--in-neutral-wash); color: var(--in-ink); }
.in-btn--danger { background: var(--in-err-wash); color: var(--in-err); box-shadow: none; }
.in-btn--danger:hover, .in-btn--danger.is-hover { background: var(--in-err); color: var(--in-face); }
.in-btn--sm { height: var(--in-ctl-inner); padding: 0 calc(var(--in-ctl-inner) * 0.4); border-radius: var(--in-r-m); font-size: var(--in-text-sm); font-weight: 600; }
.in-btn--block { width: 100%; }
.in-btn--icon { width: var(--in-ctl-inner); height: var(--in-ctl-inner); padding: 0; border-radius: var(--in-r-m); }
.in-btn:disabled, .in-btn[aria-disabled="true"] { background: var(--in-off-bg); color: var(--in-off-ink); box-shadow: none; cursor: not-allowed; transform: none; }
.in-btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.in-btn[aria-busy="true"]::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--in-accent-ink); border-right-color: transparent; animation: in-spin 0.7s linear infinite; }
.in-btn:not(.in-btn--primary)[aria-busy="true"]::after { border-color: var(--in-ink); border-right-color: transparent; }
.in-btn:disabled[aria-busy="true"]::after { border-color: var(--in-off-ink); border-right-color: transparent; }
@keyframes in-spin { to { transform: rotate(360deg); } }
/* 입력칸 */
.in-field { display: grid; gap: var(--in-2); min-width: 0; }
.in-label { font-size: var(--in-text-sm); font-weight: 600; color: var(--in-mid); }
.in-help { margin: 0; font-size: var(--in-text-sm); color: var(--in-mid); }
.in-help--err { color: var(--in-err); font-weight: 600; }
.in-input, .in-select, .in-textarea {
appearance: none; display: block; width: 100%; min-width: 0;
height: var(--in-ctl); padding: 0 calc(var(--in-ctl) * 0.32);
background-color: var(--in-sunken); border: 0; border-radius: var(--in-r-m);
color: var(--in-ink); font-weight: 600;
box-shadow: inset 0 0 0 1px transparent;
transition: box-shadow var(--in-fast), background-color var(--in-fast);
}
.in-input:hover, .in-select:hover, .in-textarea:hover, .in-input.is-hover { box-shadow: inset 0 0 0 1px var(--in-edge-strong); }
.in-input:focus, .in-select:focus, .in-textarea:focus, .in-input.is-focus { outline: 3px solid transparent; background-color: var(--in-face); box-shadow: 0 0 0 3px var(--in-accent); }
.in-input::placeholder, .in-textarea::placeholder { color: var(--in-mid); font-weight: 500; }
.in-input[aria-invalid="true"], .in-textarea[aria-invalid="true"], .in-select[aria-invalid="true"] { background-color: var(--in-err-wash); box-shadow: inset 0 0 0 1.5px var(--in-err); }
.in-input[aria-invalid="true"]:focus, .in-textarea[aria-invalid="true"]:focus, .in-select[aria-invalid="true"]:focus { background-color: var(--in-face); box-shadow: 0 0 0 3px var(--in-err); }
.in-input:disabled, .in-select:disabled, .in-textarea:disabled { background-color: var(--in-off-bg); color: var(--in-off-ink); box-shadow: none; cursor: not-allowed; }
.in-textarea { height: auto; min-height: 120px; padding-block: var(--in-3); line-height: 1.5; resize: vertical; }
.in-select {
padding-right: 48px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238b909c' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
}
.in-input-unit { position: relative; display: block; }
.in-input-unit .in-input { padding-right: 52px; }
.in-input-unit > span { position: absolute; right: calc(var(--in-ctl) * 0.32); top: 50%; transform: translateY(-50%); color: var(--in-mid); font-size: var(--in-text-sm); font-weight: 600; pointer-events: none; }
/* 찾기 */
.in-search { display: flex; align-items: center; gap: var(--in-2); height: var(--in-ctl); padding: 0 calc(var(--in-ctl) * 0.32); min-width: 0; background: var(--in-face); border-radius: var(--in-r-l); box-shadow: var(--in-lift); color: var(--in-mid); transition: box-shadow var(--in-fast); }
.in-search:focus-within { outline: 3px solid transparent; box-shadow: 0 0 0 3px var(--in-accent); color: var(--in-mid); }
.in-search input { flex: 1; width: 100%; min-width: 0; border: 0; background: none; color: var(--in-ink); }
.in-root .in-search input:focus-visible { outline: 0; }
.in-search input::placeholder { color: var(--in-mid); }
/* 토글, 체크, 라디오: 브라우저 기본 입력칸이라 폼과 React에서 그대로 쓴다 */
.in-toggle, .in-check, .in-radio { appearance: none; margin: 0; flex: none; cursor: pointer; display: inline-grid; place-items: center; }
.in-toggle { width: 62px; height: 36px; border-radius: 99px; background: var(--in-track); box-shadow: inset 0 1px 3px rgba(20, 25, 40, 0.12); place-items: center start; transition: background-color 0.2s; }
.in-toggle::before { content: ""; margin-left: 3px; width: 30px; height: 30px; border-radius: 50%; background: var(--in-knob); box-shadow: 0 1px 2px rgba(20, 25, 40, 0.2), 0 3px 8px rgba(20, 25, 40, 0.16); transition: transform var(--in-spring); }
.in-toggle:checked { background: var(--in-ok-solid); }
.in-toggle:checked::before { transform: translateX(26px); }
.in-toggle:disabled { opacity: 0.45; cursor: not-allowed; }
.in-compact .in-toggle { width: 48px; height: 28px; }
.in-compact .in-toggle::before { width: 22px; height: 22px; }
.in-compact .in-toggle:checked::before { transform: translateX(20px); }
.in-check, .in-radio { width: 28px; height: 28px; box-shadow: inset 0 0 0 2px var(--in-track); background: var(--in-face); transition: box-shadow 0.16s, background-color 0.16s; }
.in-check { border-radius: 9px; }
.in-radio { border-radius: 50%; }
.in-check:checked { background: var(--in-ok-solid); box-shadow: none; }
.in-check:checked::before { content: ""; width: 14px; height: 8px; margin-top: -3px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; border-radius: 1px; transform: rotate(-45deg); }
.in-radio:checked { box-shadow: inset 0 0 0 8px var(--in-accent); }
.in-check:disabled, .in-radio:disabled { opacity: 0.45; cursor: not-allowed; }
.in-compact .in-check, .in-compact .in-radio { width: 22px; height: 22px; }
.in-compact .in-check:checked::before { width: 11px; height: 6px; }
.in-compact .in-radio:checked { box-shadow: inset 0 0 0 6px var(--in-accent); }
.in-row-label { display: flex; align-items: center; justify-content: space-between; gap: var(--in-4); padding: var(--in-3) 0; cursor: pointer; }
.in-row-label--start { justify-content: flex-start; }
.in-row-label > span small { display: block; color: var(--in-mid); font-size: var(--in-text-sm); font-weight: 500; }
/* 선택칸과 메뉴 탭: 고른 칸이 미끄러진다. 스크립트가 없으면 고른 칸에 바로 색이 칠해진다 */
.in-seg { position: relative; display: inline-flex; gap: 2px; padding: 6px; max-width: 100%; background: var(--in-face); border-radius: var(--in-r-l); box-shadow: var(--in-lift); }
.in-seg > button, .in-seg > a {
appearance: none; border: 0; background: none; position: relative; z-index: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: var(--in-ctl-inner); padding: 0 calc(var(--in-ctl-inner) * 0.4); border-radius: var(--in-r-m);
color: var(--in-mid); font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 0.16s, background-color 0.16s;
}
.in-seg > :is(button, a):not([aria-pressed="true"], [aria-selected="true"], [aria-current="page"]):hover { color: var(--in-ink); }
.in-seg > button:focus-visible, .in-seg > a:focus-visible { outline-offset: -2px; }
.in-seg > [aria-pressed="true"], .in-seg > [aria-selected="true"], .in-seg > [aria-current="page"] { color: var(--in-accent-text); background: var(--in-accent-wash); }
.in-seg > button:disabled { color: var(--in-off-ink); cursor: not-allowed; }
.in-seg.in-is-ready::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 0; width: var(--in-seg-w); transform: translateX(var(--in-seg-x)); border-radius: var(--in-r-m); background: var(--in-accent-wash); transition: transform var(--in-spring), width var(--in-spring); }
.in-seg.in-is-ready > [aria-pressed="true"], .in-seg.in-is-ready > [aria-selected="true"], .in-seg.in-is-ready > [aria-current="page"] { background: none; }
.in-seg--sunken { background: var(--in-sunken); box-shadow: none; }
.in-seg--sunken.in-is-ready::before { background: var(--in-face); box-shadow: var(--in-small-lift); }
.in-seg--sunken:not(.in-is-ready) > [aria-pressed="true"], .in-seg--sunken:not(.in-is-ready) > [aria-selected="true"], .in-seg--sunken:not(.in-is-ready) > [aria-current="page"] { background: var(--in-face); }
.in-seg--block { display: flex; width: 100%; }
.in-seg--block > button, .in-seg--block > a { flex: 1; padding: 0 6px; }
.in-scroll-x { max-width: 100%; overflow-x: auto; padding: 6px; margin: -6px; }
.in-scroll-x > .in-seg { max-width: none; }
/* 수량 */
.in-step { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--in-1); height: var(--in-ctl); padding: 0 6px; background: var(--in-sunken); border-radius: var(--in-r-l); }
.in-step > button { appearance: none; border: 0; cursor: pointer; display: grid; place-items: center; width: var(--in-ctl-inner); height: var(--in-ctl-inner); border-radius: var(--in-r-m); background: var(--in-face); box-shadow: var(--in-small-lift); transition: color var(--in-fast), transform 0.1s; }
.in-step > button:hover { color: var(--in-accent-text); }
.in-step > button:active { transform: scale(0.92); }
.in-step > button:disabled { background: none; box-shadow: none; color: var(--in-off-ink); cursor: not-allowed; transform: none; }
.in-step > input, .in-step > output { width: 3.2em; min-width: 0; border: 0; background: none; text-align: center; font-size: var(--in-text-lg); font-weight: 700; outline: none; }
.in-step--block { display: flex; width: 100%; }
/* 면 */
.in-card { background: var(--in-face); border-radius: var(--in-r-xl); box-shadow: var(--in-lift); padding: var(--in-6); min-width: 0; }
.in-card--flat { box-shadow: inset 0 0 0 1px var(--in-edge); }
.in-card--link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: transform var(--in-fast), box-shadow var(--in-fast); }
.in-card--link:hover { transform: translateY(-2px); box-shadow: var(--in-float); }
.in-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--in-3); margin-bottom: var(--in-4); }
.in-stack { display: grid; gap: var(--in-5); min-width: 0; }
.in-stack--s { gap: var(--in-2); }
.in-inline { display: flex; flex-wrap: wrap; gap: var(--in-3); align-items: center; min-width: 0; }
.in-between { display: flex; flex-wrap: wrap; gap: var(--in-3); align-items: center; justify-content: space-between; min-width: 0; }
.in-grid-paper { background-color: var(--in-paper); background-image: linear-gradient(var(--in-grid) 1px, transparent 1px), linear-gradient(90deg, var(--in-grid) 1px, transparent 1px); background-size: 22px 22px; }
.in-stage { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: var(--in-3); min-width: 0; padding: var(--in-6) var(--in-5); border-radius: var(--in-r-xl); background-color: var(--in-stage); background-image: radial-gradient(var(--in-dot) 1.2px, transparent 1.3px); background-size: 18px 18px; }
/* 미리보기 왼쪽 + 편집칸 오른쪽 */
.in-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--in-4); align-items: stretch; }
@media (max-width: 980px) { .in-split { grid-template-columns: minmax(0, 1fr); } }
/* 큰 숫자 */
.in-stat { display: grid; gap: 2px; min-width: 0; }
.in-stat__label { font-size: var(--in-text-sm); font-weight: 600; color: var(--in-mid); }
.in-stat__value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--in-3); font-size: var(--in-title-lg); font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; }
.in-delta { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 12px; background: var(--in-ok-wash); color: var(--in-ok); font-size: var(--in-text-sm); font-weight: 700; letter-spacing: 0; }
.in-delta--down { background: var(--in-err-wash); color: var(--in-err); }
/* 상태와 뱃지 */
.in-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; background: var(--in-neutral-wash); color: var(--in-mid); font-size: var(--in-text-xs); font-weight: 700; white-space: nowrap; }
.in-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.in-status--ok { background: var(--in-ok-wash); color: var(--in-ok); }
.in-status--warn { background: var(--in-warn-wash); color: var(--in-warn); }
.in-status--err { background: var(--in-err-wash); color: var(--in-err); }
.in-status--info { background: var(--in-info-wash); color: var(--in-info); }
.in-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 8px; background: var(--in-accent-wash); color: var(--in-accent-text); font-size: var(--in-text-xs); font-weight: 700; white-space: nowrap; }
/* 표 */
.in-table-wrap { overflow-x: auto; border-radius: var(--in-r-xl); background: var(--in-face); box-shadow: var(--in-lift); }
.in-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.in-table th { padding: var(--in-3) var(--in-4); text-align: left; font-size: var(--in-text-xs); font-weight: 600; color: var(--in-mid); white-space: nowrap; border-bottom: 1px solid var(--in-edge); }
.in-table td { padding: var(--in-3) var(--in-4); border-bottom: 1px solid var(--in-edge); }
.in-table tbody tr:last-child td { border-bottom: 0; }
.in-table tbody tr { transition: background-color var(--in-fast); }
.in-table tbody tr:hover { background: var(--in-sunken); }
.in-table tbody tr.is-selected, .in-table tbody tr[aria-selected="true"] { background: var(--in-accent-wash); }
.in-table .is-num { text-align: right; white-space: nowrap; }
.in-table-title { font-weight: 700; white-space: nowrap; }
.in-table small { display: block; color: var(--in-mid); font-size: var(--in-text-xs); font-weight: 500; }
.in-thumb { display: block; flex: none; width: 48px; height: 48px; border-radius: var(--in-r-s); object-fit: cover; background: var(--in-neutral-wash); }
/* 알림 */
.in-alert { display: flex; gap: var(--in-3); padding: var(--in-4); border-radius: var(--in-r-m); background: var(--in-info-wash); font-size: var(--in-text-sm); line-height: 1.5; }
.in-alert > .in-icon { color: var(--in-info); margin-top: 1px; }
.in-alert b { display: block; font-weight: 700; }
.in-alert--ok { background: var(--in-ok-wash); }
.in-alert--ok > .in-icon { color: var(--in-ok); }
.in-alert--warn { background: var(--in-warn-wash); }
.in-alert--warn > .in-icon { color: var(--in-warn); }
.in-alert--err { background: var(--in-err-wash); }
.in-alert--err > .in-icon { color: var(--in-err); }
/* 도움말 물음표 */
.in-tip { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: var(--in-neutral-wash); color: var(--in-mid); font-size: 12px; font-weight: 700; cursor: help; vertical-align: 1px; }
.in-tip::after { content: attr(data-tip); position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px; padding: 10px 12px; border-radius: var(--in-r-s); background: var(--in-ink); color: var(--in-bg); font-size: var(--in-text-xs); font-weight: 500; line-height: 1.45; text-align: left; white-space: normal; visibility: hidden; opacity: 0; transition: opacity var(--in-fast); pointer-events: none; }
.in-tip:hover::after, .in-tip:focus-visible::after { visibility: visible; opacity: 1; }
/* 창: 브라우저 기본 dialog라 포커스 가두기와 Esc 닫기가 저절로 된다 */
.in-modal { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: var(--in-6); border: 0; border-radius: var(--in-r-xl); background: var(--in-face); color: var(--in-ink); box-shadow: var(--in-float); font-family: var(--in-font); }
.in-modal::backdrop { background: var(--in-scrim); }
.in-modal[open] { animation: in-rise var(--in-spring); }
.in-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--in-2); margin-top: var(--in-6); }
@keyframes in-rise { from { opacity: 0; transform: translateY(14px); } }
/* 잠깐 뜨는 안내 */
.in-toast { position: fixed; z-index: 60; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: var(--in-2); width: max-content; max-width: calc(100vw - 32px); padding: 14px 22px; border-radius: var(--in-r-l); background: var(--in-ink); color: var(--in-bg); font-family: var(--in-font); font-size: var(--in-text-sm); font-weight: 600; box-shadow: var(--in-float); animation: in-toast var(--in-spring); }
@keyframes in-toast { from { opacity: 0; transform: translate(-50%, 14px); } }
/* 저장 줄 */
.in-savebar { position: sticky; bottom: var(--in-4); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--in-3); padding: var(--in-3) var(--in-3) var(--in-3) var(--in-5); border-radius: var(--in-r-l); background: var(--in-face); box-shadow: var(--in-float); font-weight: 600; }
/* 쪽 넘김 */
.in-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--in-1); }
.in-pages > * { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 var(--in-2); border: 0; border-radius: var(--in-r-s); background: none; color: var(--in-mid); font-weight: 600; text-decoration: none; cursor: pointer; }
.in-pages > *:hover { background: var(--in-neutral-wash); color: var(--in-ink); }
.in-pages > [aria-current="page"] { background: var(--in-accent); color: var(--in-accent-ink); }
.in-pages > :disabled { color: var(--in-off-ink); background: none; cursor: not-allowed; }
/* 비었을 때와 불러올 때 */
.in-empty { display: grid; justify-items: center; gap: var(--in-3); padding: var(--in-12) var(--in-5); text-align: center; color: var(--in-mid); }
.in-empty > .in-icon { width: 36px; height: 36px; color: var(--in-soft); stroke-width: 1.6; }
.in-empty b { display: block; color: var(--in-ink); font-size: var(--in-text-lg); font-weight: 700; }
.in-skel { display: block; height: 1em; border-radius: 8px; background: linear-gradient(90deg, var(--in-neutral-wash), var(--in-sunken), var(--in-neutral-wash)); background-size: 200% 100%; animation: in-skel 1.3s linear infinite; }
@keyframes in-skel { to { background-position: -200% 0; } }
/* 앱 틀과 앱 아이콘 */
.in-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--in-5); max-width: 1240px; margin: 0 auto; padding: var(--in-5); }
.in-appbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--in-4); min-width: 0; }
.in-appbar > * { min-width: 0; }
.in-who { display: flex; align-items: center; gap: var(--in-3); min-width: 0; }
.in-who b { display: block; font-size: var(--in-text-lg); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.in-who small { color: var(--in-mid); font-size: var(--in-text-xs); }
.in-tile { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 27%; background: var(--in-app-task); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(20, 25, 40, 0.14), 0 8px 14px -8px rgba(20, 25, 40, 0.4); }
.in-tile > svg { width: 56%; height: 56%; fill: currentColor; stroke: none; }
.in-tile--option { background: var(--in-app-option); }
.in-tile--coupon { background: var(--in-app-coupon); }
.in-tile--grow { background: var(--in-app-grow); }
.in-tile--rebuy { background: var(--in-app-rebuy); }
.in-tile--member { background: var(--in-app-member); }
.in-tile--promo { background: var(--in-app-promo); }
.in-tile--task { background: var(--in-app-task); }
.in-tile--review { background: var(--in-app-review); }
.in-tile--lg { width: 64px; height: 64px; }
/* 상태 무대: 화면 맨 위에서 "된 거야?"에 답한다. data-in-mode = on | new | off */
.in-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--in-5) 40px; padding: var(--in-8) 36px; border-radius: var(--in-r-xl); background: var(--in-brand-face); color: #fff; transition: background-color 0.5s ease; }
.in-hero::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent); z-index: -1; transition: opacity 0.5s; }
.in-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 90%); mask-image: linear-gradient(100deg, transparent 35%, #000 90%); }
.in-hero[data-in-mode="off"] { background: var(--in-brand-face-off); }
.in-hero[data-in-mode="off"]::before { opacity: 0; }
.in-hero > * { min-width: 0; }
.in-hero h1, .in-hero h2 { margin: var(--in-2) 0 0; font-size: clamp(24px, 3.4vw, var(--in-title-lg)); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
.in-hero p { margin: var(--in-2) 0 0; color: rgba(255, 255, 255, 0.76); }
.in-hero-side { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.in-hero-num small { display: block; color: rgba(255, 255, 255, 0.76); font-size: var(--in-text-xs); font-weight: 600; }
.in-hero-num b { display: block; margin-top: 2px; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.in-hero-num em { font-style: normal; font-size: var(--in-text-xs); font-weight: 700; color: #86efac; }
.in-hero .in-toggle { width: 72px; height: 42px; background: rgba(255, 255, 255, 0.24); }
.in-hero .in-toggle::before { width: 36px; height: 36px; }
.in-hero .in-toggle:checked { background: #22c55e; }
.in-hero .in-toggle:checked::before { transform: translateX(30px); }
.in-hero-switch { display: grid; justify-items: center; gap: 6px; color: rgba(255, 255, 255, 0.8); font-size: var(--in-text-xs); font-weight: 700; cursor: pointer; }
.in-hero .in-btn:not(.in-btn--primary) { background: #fff; color: var(--in-brand-face); }
.in-hero-steps { display: flex; flex-wrap: wrap; gap: var(--in-2); margin-top: var(--in-4); }
.in-hero-steps > * { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.13); font-size: var(--in-text-xs); font-weight: 700; }
.in-hero-steps > .is-done { background: rgba(255, 255, 255, 0.95); color: var(--in-brand-face); }
.in-hero-steps > .is-wait::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: in-blink 1.2s infinite; }
.in-hero-steps .in-icon { width: 14px; height: 14px; }
.in-live { display: inline-flex; align-items: center; gap: var(--in-2); padding: 6px 12px 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.13); font-size: var(--in-text-xs); font-weight: 700; }
.in-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: in-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }
.in-hero[data-in-mode="off"] .in-live::before { background: #9aa0ab; animation: none; }
@keyframes in-ping { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); } 80%, 100% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } }
@keyframes in-blink { 50% { opacity: 0.25; } }
@media (max-width: 980px) { .in-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .in-hero { padding: var(--in-6) var(--in-5); border-radius: var(--in-r-l); } .in-hero-num b { font-size: 28px; } }
/* 손님 기기 틀: 미리보기를 폰이나 PC 틀에 담는다. 틀 안은 쇼핑몰 화면이라 늘 밝다 */
.in-device { width: 340px; max-width: 100%; margin: 0 auto; padding: 10px; border-radius: 46px; background: #15171c; box-shadow: 0 0 0 1px #2b2e36, 0 30px 60px -20px rgba(20, 25, 40, 0.45), 0 12px 24px -12px rgba(20, 25, 40, 0.3); transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.45s, padding 0.45s; }
.in-device-screen { position: relative; overflow: hidden; border-radius: 37px; background: #fff; color: #191b20; color-scheme: light; transition: border-radius 0.45s; }
.in-device-bar { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 24px; font-size: 12px; font-weight: 700; }
.in-device-bar::after { content: ""; order: 0; width: 90px; height: 24px; border-radius: 99px; background: #15171c; }
.in-device-bar > :last-child { order: 1; }
.in-device--pc { width: 640px; padding: 8px; border-radius: 18px; }
.in-device--pc .in-device-screen { border-radius: 11px; }
.in-device--pc .in-device-bar { height: 26px; justify-content: flex-start; padding: 0 12px; background: #f1f2f5; }
.in-device--pc .in-device-bar > * { display: none; }
.in-device--pc .in-device-bar::after { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; box-shadow: 15px 0 #febc2e, 30px 0 #28c840; }
.in-device[data-in-off] { opacity: 0.55; filter: grayscale(1); }
/* 가리키기: 편집칸(data-in-key)과 미리보기 속 자리(data-in-spot)를 잇는다. 이어 주는 일은 indive-ui.js */
[data-in-spot] { border-radius: 6px; outline: 2px dashed transparent; outline-offset: 3px; transition: outline-color 0.2s, background-color 0.2s; }
[data-in-spot].in-is-spot { outline-color: var(--in-spot); background-color: color-mix(in srgb, var(--in-spot) 14%, transparent); }
.in-flash { animation: in-flash 1s ease; }
@keyframes in-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--in-spot) 70%, transparent); background-color: color-mix(in srgb, var(--in-spot) 30%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; background-color: transparent; } }
.in-row { display: flex; align-items: center; justify-content: space-between; gap: var(--in-4); margin: 0 calc(-1 * var(--in-3)); padding: var(--in-4) var(--in-3); border-radius: var(--in-r-m); cursor: pointer; transition: background-color var(--in-fast); }
.in-row + .in-row { box-shadow: 0 -1px 0 var(--in-edge); }
.in-row:hover, .in-row:hover + .in-row { box-shadow: none; }
.in-row:hover { background: var(--in-neutral-wash); }
.in-row > span { min-width: 0; }
.in-row b { display: block; font-weight: 700; }
.in-row small { display: block; margin-top: 2px; color: var(--in-mid); font-size: var(--in-text-xs); }
/* 저장 순간: 바뀐 개수 → 저장 → 초록 "반영됐어요". 화면 아래에 떠 있다 */
.in-dock { visibility: hidden; position: fixed; left: 50%; bottom: calc(var(--in-5) + env(safe-area-inset-bottom, 0px)); z-index: 20; width: min(640px, calc(100% - 32px)); transform: translate(-50%, 140%); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.15), visibility 0s 0.45s; }
.in-dock.is-open { visibility: visible; transform: translate(-50%, 0); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.15); }
.in-dock > .in-savebar { position: static; transition: background-color 0.3s, color 0.3s; }
.in-dock-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-right: var(--in-2); padding: 0 7px; border-radius: 99px; background: var(--in-accent); color: var(--in-accent-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.in-dock-done { display: none; align-items: center; gap: var(--in-2); }
.in-dock-done small { opacity: 0.85; font-weight: 500; }
.in-dock-done svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.in-dock.is-done > .in-savebar { background: #0a7945; color: #fff; }
.in-dock.is-done .in-dock-done { display: inline-flex; }
.in-dock.is-done .in-dock-done svg { animation: in-draw 0.45s 0.1s ease forwards; }
.in-dock.is-done .in-dock-edit { display: none; }
@keyframes in-draw { to { stroke-dashoffset: 0; } }
/* ── 리포트 부품 ── */
/* 무대 안 큰 숫자와 비교 막대 */
.in-hero-big { display: flex; align-items: baseline; gap: 6px; margin-top: var(--in-3); }
.in-hero-big b { font-size: clamp(48px, 7vw, 72px); font-weight: 850; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.in-hero-big span { font-size: 20px; font-weight: 800; }
.in-vs { display: grid; gap: var(--in-3); min-width: min(300px, 100%); }
.in-vs-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: var(--in-text-xs); font-weight: 700; }
.in-vs-row > :first-child { color: rgba(255, 255, 255, 0.8); }
.in-vs-row > b { text-align: right; font-size: 18px; font-variant-numeric: tabular-nums; }
.in-vs-bar { height: 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.in-vs-bar > i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: #fff; transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.in-vs-row--dim .in-vs-bar > i { background: rgba(255, 255, 255, 0.45); }
.in-vs-note { color: rgba(255, 255, 255, 0.6); font-size: 11px; }
/* 할 일 카드: 숫자에서 바로 고친다. 끝나면 .is-done */
.in-tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--in-3); }
.in-task { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 22px; border-radius: var(--in-r-l); background: var(--in-face); box-shadow: var(--in-lift); transition: background-color 0.4s, box-shadow 0.4s; }
.in-task-kind { display: inline-flex; align-items: center; gap: 6px; color: var(--in-accent-text); font-size: var(--in-text-xs); font-weight: 800; }
.in-task-kind .in-icon { width: 16px; height: 16px; }
.in-task h3 { margin: 0; font-size: var(--in-text-lg); line-height: 1.4; letter-spacing: -0.02em; text-wrap: balance; }
.in-task p { margin: 4px 0 0; color: var(--in-mid); font-size: var(--in-text-sm); }
.in-task-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.in-task-acts small { color: var(--in-soft); font-size: var(--in-text-xs); }
.in-task-done { display: none; align-items: center; gap: var(--in-2); color: var(--in-ok); font-weight: 800; }
.in-task-done svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.in-task.is-done { background: var(--in-ok-wash); box-shadow: none; }
.in-task.is-done .in-task-kind { color: var(--in-ok); }
.in-task.is-done .in-task-done { display: inline-flex; }
.in-task.is-done .in-task-done svg { animation: in-draw 0.45s 0.1s ease forwards; }
.in-task.is-done .in-task-acts > :not(.in-task-done) { display: none; }
/* 차트 공통: 범례, 안내 풍선. data-in-tip="작은 줄|굵은 줄|작은 줄" 을 단 칸은 올리면 풍선이 뜬다(.in-chart 안) */
.in-chart { position: relative; min-width: 0; }
.in-chart svg { display: block; width: 100%; overflow: visible; }
.in-chart text { fill: var(--in-soft); font-size: 11px; font-family: var(--in-font); }
.in-chart .in-grid-line { stroke: var(--in-edge); }
.in-chart-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 110px; padding: 10px 12px; border-radius: var(--in-r-s); background: var(--in-ink); color: var(--in-face); font-size: var(--in-text-xs); line-height: 1.5; white-space: nowrap; box-shadow: var(--in-float); opacity: 0; transform: translate(-50%, calc(-100% - 12px)); transition: opacity 0.12s; }
.in-chart-tip.is-on { opacity: 1; }
.in-chart-tip b { display: block; font-size: var(--in-text-sm); }
.in-chart-tip small { display: block; opacity: 0.72; }
.in-legend { display: flex; flex-wrap: wrap; gap: 6px var(--in-4); margin: 0 0 var(--in-3); color: var(--in-mid); font-size: var(--in-text-xs); font-weight: 600; }
.in-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.in-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--c, var(--in-q4)); }
.in-legend i.is-dash { width: 16px; height: 0; border-top: 2px dashed var(--in-soft); border-radius: 0; background: none; }
.in-spark { display: block; width: 100%; height: 36px; overflow: visible; }
/* 비율 막대: 한 줄이 100%. 칸은 style="flex-grow:값; --c:var(--in-q3); --t:var(--in-q3-ink)" */
.in-dist { display: grid; gap: var(--in-3); }
.in-dist-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: var(--in-3); font-size: var(--in-text-sm); font-weight: 700; }
.in-dist-bar { display: flex; gap: 2px; height: 36px; min-width: 0; }
.in-dist-bar > * { display: grid; place-items: center; min-width: 0; overflow: hidden; border-radius: 4px; background: var(--c, var(--in-q3)); color: var(--t, #fff); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; transition: flex-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.in-dist-bar > :first-child { border-radius: 8px 4px 4px 8px; }
.in-dist-bar > :last-child { border-radius: 4px 8px 8px 4px; }
.in-dist-bar > :hover { filter: brightness(0.94); }
/* 순위 막대 */
.in-rank { display: grid; gap: var(--in-3); margin: 0; padding: 0; list-style: none; }
.in-rank > li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 4px var(--in-3); }
.in-rank-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--in-neutral-wash); color: var(--in-mid); font-size: 12px; font-weight: 800; }
.in-rank > li:first-child .in-rank-n { background: var(--in-accent); color: var(--in-accent-ink); }
.in-rank-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.in-rank-t small { margin-left: 6px; color: var(--in-soft); font-weight: 500; }
.in-rank-v { font-weight: 800; font-variant-numeric: tabular-nums; }
.in-rank-bar { grid-column: 2 / 4; height: 8px; border-radius: 99px; background: var(--in-neutral-wash); overflow: hidden; }
.in-rank-bar > i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--in-q4); transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* 열지도: 첫 줄은 빈칸 + 열 이름, 이후 줄마다 행 이름 + 칸. 칸은 class="in-heat-cell" style="--c:var(--in-q3)" */
.in-heat { display: grid; grid-template-columns: 40px repeat(var(--cols, 7), minmax(0, 1fr)); gap: 4px; color: var(--in-soft); font-size: 11px; font-weight: 600; }
.in-heat > span { display: grid; place-items: center; }
.in-heat > .in-heat-cell { height: 34px; border-radius: 6px; background: var(--c, var(--in-q1)); cursor: default; transition: background-color 0.5s, transform 0.15s; }
.in-heat > .in-heat-cell:hover, .in-heat > .in-heat-cell:focus-visible { transform: scale(1.08); box-shadow: 0 0 0 2px var(--in-face), 0 0 0 4px var(--in-ink); outline: 0; }
.in-heat-scale { display: flex; align-items: center; gap: 4px; margin-top: var(--in-3); color: var(--in-soft); font-size: 11px; }
.in-heat-scale i { width: 22px; height: 10px; border-radius: 3px; background: var(--c); }
/* ── 목록 부품 ── */
/* 세기 칸: 숫자가 곧 거르개. 고른 칸은 aria-pressed="true" */
.in-counts { display: flex; flex-wrap: wrap; gap: 10px; }
.in-count { display: grid; gap: 2px; min-width: 128px; padding: 14px 18px; border: 0; border-radius: var(--in-r-l); background: var(--in-face); box-shadow: var(--in-lift); color: var(--in-ink); text-align: left; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s; }
.in-count:hover { transform: translateY(-2px); }
.in-count small { display: flex; align-items: center; gap: 6px; color: var(--in-mid); font-size: var(--in-text-xs); font-weight: 700; }
.in-count small i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, transparent); }
.in-count b { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.in-count[aria-pressed="true"] { background: var(--in-ink); color: var(--in-face); box-shadow: none; }
.in-count[aria-pressed="true"] small { color: inherit; opacity: 0.75; }
@media (max-width: 560px) { .in-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .in-count { min-width: 0; } }
.in-kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--in-neutral-wash); color: var(--in-mid); font: 700 12px var(--in-font); }
/* 목록 줄: 고르기 · 그림 · 이름 · 미리보기 칩 · 오른쪽 조작. 줄 전체를 눌러 연다 */
.in-list { display: grid; gap: var(--in-2); }
.in-item { display: grid; grid-template-columns: 28px 64px minmax(0, 1.4fr) minmax(0, 1.2fr) auto; align-items: center; gap: var(--in-4); padding: 12px 18px 12px 14px; border-radius: var(--in-r-l); background: var(--in-face); box-shadow: 0 0 0 1px var(--in-edge); cursor: pointer; transition: box-shadow 0.2s, background-color 0.2s; }
.in-item:hover { box-shadow: 0 0 0 1px var(--in-edge-strong), var(--in-lift); }
.in-item.is-picked { background: var(--in-accent-wash); box-shadow: 0 0 0 2px var(--in-accent); }
.in-item.is-open { box-shadow: 0 0 0 2px var(--in-ink); }
.in-item.is-off .in-item-pic, .in-item.is-off .in-chips { opacity: 0.45; filter: grayscale(0.8); }
.in-item-pic { display: block; width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--in-sunken); }
.in-item-name { min-width: 0; }
.in-item-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.in-item-name small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; color: var(--in-soft); font-size: var(--in-text-xs); }
.in-item-side { display: flex; align-items: center; gap: var(--in-3); }
.in-item-side > small { min-width: 40px; color: var(--in-mid); font-size: var(--in-text-xs); font-weight: 700; text-align: right; }
@media (max-width: 860px) {
.in-item { grid-template-columns: 28px 56px minmax(0, 1fr) auto; }
.in-item > .in-chips { grid-column: 3 / 5; grid-row: 2; }
.in-item-pic { width: 56px; height: 56px; }
}
@media (max-width: 560px) {
.in-item { grid-template-columns: 24px 48px minmax(0, 1fr) auto; gap: var(--in-3); padding: var(--in-3); }
.in-item > .in-chips { grid-column: 2 / 5; }
.in-item-pic { width: 48px; height: 48px; }
.in-item-name b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.in-item-side > small, .in-item-name .in-wide { display: none; }
}
/* 미리보기 칩: 손님에게 보일 옵션을 줄 안에서 작게. 기본값을 따르면 .is-basic(점선), 눈에 띄는 칸은 .is-top */
.in-chips { display: flex; gap: 6px; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); transition: opacity 0.3s, filter 0.3s; }
.in-chips > * { flex: none; display: grid; gap: 1px; padding: 7px 10px; border: 1.5px solid var(--in-edge); border-radius: 10px; font-size: 12px; font-weight: 800; line-height: 1.25; }
.in-chips > * em { color: var(--in-mid); font-size: 11px; font-style: normal; font-weight: 600; }
.in-chips > .is-top { border-color: var(--in-accent); }
.in-chips > .is-top em { color: var(--in-accent-text); }
.in-chips.is-basic > * { border-style: dashed; }
/* 줄 안의 작은 표시 */
.in-tag { padding: 2px 8px; border-radius: 6px; background: var(--in-neutral-wash); color: var(--in-mid); font-size: var(--in-text-xs); font-weight: 800; white-space: nowrap; }
.in-tag--accent { background: var(--in-accent-wash); color: var(--in-accent-text); }
.in-tag--warn { background: var(--in-warn-wash); color: var(--in-warn); }
/* 접어 두기: …
내용