/* suui — 자동 생성(tools/build.mjs). 직접 고치지 말고 tokens/tokens.json·src/components.css 를 고친다. */
:root {
  --su-font: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --su-font-en: Inter, "Pretendard Variable", Pretendard, Arial, sans-serif;
  --su-font-serif: "Noto Serif KR", "Playfair Display", serif;
  --su-w-light: 300;
  --su-w-regular: 400;
  --su-w-semibold: 600;
  --su-w-bold: 700;
  --su-tr-body: -0.02em;
  --su-tr-title: -0.03em;
  --su-tr-display: -0.04em;
  --su-tr-label: 0.01em;
  --su-bg: #F6F6F6;
  --su-surface: #FFFFFF;
  --su-surface-muted: #F2F2F2;
  --su-line: #E4E5E8;
  --su-text-strong: #1B1F28;
  --su-text: #333A44;
  --su-text-muted: #666A6D;
  --su-text-faint: #B4BBC5;
  --su-danger: #EF4454;
  --su-danger-soft: #FFDFE3;
  --su-success: #00BE78;
  --su-success-soft: #D6F5E9;
  --su-primary: #0D6FEE;
  --su-fs-display: 56px;
  --su-fs-title: 30px;
  --su-fs-subtitle: 19px;
  --su-fs-body: 16px;
  --su-fs-label: 13px;
  --su-fs-caption: 12px;
  --su-lh-body: 1.6;
  --su-lh-title: 1.3;
  --su-pad: 24px;
  --su-gap: 16px;
  --su-radius: 16px;
  --su-radius-sm: 10px;
  --su-shadow-blur: 24px;
  --su-shadow-a: 0.07;
}
/* 파생 변수는 선언된 요소에서 값이 확정되므로, 색·테마·캔버스가 바뀌는 곳마다 다시 선언 */
:root, [data-su-theme], [data-su-primary], [data-su-style], .su-canvas {
  --su-primary-soft: color-mix(in srgb, var(--su-primary) 20%, var(--su-surface));
  --su-primary-mid: color-mix(in srgb, var(--su-primary) 60%, var(--su-surface));
  --su-on-primary: #FFFFFF;
  --su-shadow: var(--su-shadow-x, 0 0 var(--su-shadow-blur) rgba(0, 0, 0, var(--su-shadow-a)));
}
/* 스타일: lilac */
[data-su-style="lilac"] {
  --su-primary: #6D4EC4;
  --su-bg: #F7F5FA;
  --su-surface: #FFFFFF;
  --su-surface-muted: #F3F0F9;
  --su-line: #E6E3EE;
  --su-text-strong: #231F4D;
  --su-text: #3D3862;
  --su-text-muted: #6E6A8A;
  --su-text-faint: #B9B4CC;
  --su-radius: 20px;
  --su-radius-sm: 12px;
  --su-radius-lg: 28px;
  --su-shadow-x: 0 1px 2px rgba(35,31,77,.04), 0 24px 48px -32px rgba(35,31,77,.24);
  --su-lx-soft: #A78BFA;
  --su-lx-deep: #4A357A;
  --su-lx-night: #221650;
  --su-lx-mist: #EDE7F6;
  --su-lx-grad: linear-gradient(100deg, var(--su-primary) 0%, color-mix(in srgb, var(--su-primary) 52%, var(--su-lx-soft)) 100%);
  --su-lx-glow: 0 12px 30px -10px color-mix(in srgb, var(--su-primary) 60%, transparent);
  --su-lx-glass: rgba(255,255,255,.72);
  --su-lx-glass-line: rgba(255,255,255,.9);
  --su-lx-hair: rgba(35,31,77,.08);
  --su-lx-ease: cubic-bezier(.22,1,.36,1);
}
[data-su-style="lilac"][data-su-theme="dark"], [data-su-theme="dark"] [data-su-style="lilac"], [data-su-style="lilac"] [data-su-theme="dark"], [data-su-style="lilac"] .su-canvas--dark {
  --su-primary: #A78BFA;
  --su-bg: #15112B;
  --su-surface: #211B42;
  --su-surface-muted: #2A2254;
  --su-line: #3A3366;
  --su-text-strong: #FFFFFF;
  --su-text: #E6E1F5;
  --su-text-muted: #A79FC8;
  --su-text-faint: #5A5280;
  --su-lx-glass: rgba(255,255,255,.06);
  --su-lx-glass-line: rgba(255,255,255,.14);
  --su-lx-hair: rgba(255,255,255,.1);
  --su-lx-mist: #2A2254;
  --su-shadow-x: 0 1px 2px rgba(0,0,0,.2), 0 24px 48px -28px rgba(0,0,0,.6);
}
/* 스타일: navy */
[data-su-style="navy"] {
  --su-primary: #3D8BFF;
  --su-bg: #0B0D10;
  --su-surface: #15181D;
  --su-surface-muted: #1C2026;
  --su-line: #2A2F36;
  --su-text-strong: #F9FAFB;
  --su-text: #D1D6DB;
  --su-text-muted: #8B95A1;
  --su-text-faint: #4E5968;
  --su-radius: 14px;
  --su-radius-sm: 8px;
  --su-radius-lg: 18px;
  --su-on-primary: #FFFFFF;
  --su-shadow-x: 0 0 0 1px rgba(255,255,255,.05), 0 24px 48px -28px rgba(0,0,0,.7);
  --su-nv-deep: #0050D9;
  --su-nv-band: #1D3A68;
  --su-nv-hl: rgba(61,139,255,.28);
  --su-nv-hair: rgba(255,255,255,.07);
}
[data-su-style="navy"][data-su-theme="dark"], [data-su-theme="dark"] [data-su-style="navy"], [data-su-style="navy"] [data-su-theme="dark"], [data-su-style="navy"] .su-canvas--dark {
  --su-primary: #4593FC;
  --su-bg: #060607;
  --su-surface: #111316;
  --su-surface-muted: #181B20;
  --su-line: #24282E;
  --su-text-strong: #FFFFFF;
  --su-text: #D1D6DB;
  --su-text-muted: #8B95A1;
  --su-text-faint: #4E5968;
  --su-nv-band: #16305A;
}
/* 스타일: airy */
[data-su-style="airy"] {
  --su-primary: #3182F6;
  --su-bg: #F4F5F7;
  --su-surface: #FFFFFF;
  --su-surface-muted: #EEF0F3;
  --su-line: #E5E8EB;
  --su-text-strong: #191F28;
  --su-text: #333D4B;
  --su-text-muted: #6B7684;
  --su-text-faint: #B0B8C1;
  --su-radius: 18px;
  --su-radius-sm: 12px;
  --su-radius-lg: 24px;
  --su-shadow-x: 0 1px 2px rgba(25,31,40,.04), 0 10px 28px -14px rgba(25,31,40,.16);
  --su-ai-ink: #191F28;
  --su-ai-on-ink: #FFFFFF;
  --su-ai-sky: #CFE3FF;
  --su-ai-lav: #DCD6FF;
  --su-ai-note: #FFF6CF;
  --su-ai-kakao: #FEE500;
  --su-ai-night: #0B1020;
}
[data-su-style="airy"][data-su-theme="dark"], [data-su-theme="dark"] [data-su-style="airy"], [data-su-style="airy"] [data-su-theme="dark"], [data-su-style="airy"] .su-canvas--dark {
  --su-primary: #5AA2FF;
  --su-bg: #0B1020;
  --su-surface: #141A2E;
  --su-surface-muted: #1B2238;
  --su-line: #283049;
  --su-text-strong: #FFFFFF;
  --su-text: #D6DCE8;
  --su-text-muted: #8C96AB;
  --su-text-faint: #4A5470;
  --su-ai-ink: #FFFFFF;
  --su-ai-on-ink: #191F28;
  --su-ai-sky: #1C3563;
  --su-ai-lav: #2E2A63;
  --su-ai-note: #3A3413;
  --su-shadow-x: 0 1px 2px rgba(0,0,0,.3), 0 16px 32px -18px rgba(0,0,0,.7);
}
/* 스타일: pop */
[data-su-style="pop"] {
  --su-primary: #E4322B;
  --su-bg: #F5F6F8;
  --su-surface: #FFFFFF;
  --su-surface-muted: #EDEFF2;
  --su-line: #E4E6EA;
  --su-text-strong: #111318;
  --su-text: #2C2F36;
  --su-text-muted: #7A7F8A;
  --su-text-faint: #B8BCC4;
  --su-radius: 18px;
  --su-radius-sm: 10px;
  --su-radius-lg: 24px;
  --su-shadow-x: 0 1px 2px rgba(17,19,24,.05), 0 12px 30px -18px rgba(17,19,24,.22);
  --su-pp-ink: #18181B;
  --su-pp-on-ink: #FFFFFF;
  --su-pp-m1: radial-gradient(120% 95% at 100% 0%, #D9342B 0%, #A3141B 55%, #7E0E14 100%);
  --su-pp-m2: radial-gradient(120% 95% at 100% 0%, #F0802A 0%, #C9480F 55%, #9C340A 100%);
  --su-pp-m3: radial-gradient(120% 95% at 100% 0%, #7650E6 0%, #45239A 55%, #2C166B 100%);
  --su-pp-m4: radial-gradient(120% 95% at 100% 0%, #22A896 0%, #0F6E64 55%, #0A4E48 100%);
  --su-pp-m5: radial-gradient(120% 95% at 100% 0%, #343945 0%, #17191F 55%, #0D0E12 100%);
}
[data-su-style="pop"][data-su-theme="dark"], [data-su-theme="dark"] [data-su-style="pop"], [data-su-style="pop"] [data-su-theme="dark"], [data-su-style="pop"] .su-canvas--dark {
  --su-primary: #FF5A4E;
  --su-bg: #0E0F12;
  --su-surface: #17181C;
  --su-surface-muted: #202228;
  --su-line: #2A2C33;
  --su-text-strong: #FFFFFF;
  --su-text: #D9DBE0;
  --su-text-muted: #8D929C;
  --su-text-faint: #4B4F58;
  --su-pp-ink: #FFFFFF;
  --su-pp-on-ink: #111318;
}
/* 스타일: paper */
[data-su-style="paper"] {
  --su-primary: #0E0E0E;
  --su-bg: #FDFDF7;
  --su-surface: #FFFFFF;
  --su-surface-muted: #F4F4F2;
  --su-line: #EEEEEE;
  --su-text-strong: #171717;
  --su-text: #3E3E3E;
  --su-text-muted: #707070;
  --su-text-faint: #A5A39C;
  --su-radius: 12px;
  --su-radius-sm: 10px;
  --su-radius-lg: 16px;
  --su-shadow-x: none;
  --su-font-serif: "Nanum Myeongjo", "Noto Serif KR", serif;
  --su-pa-ink: #0E0E0E;
  --su-pa-on-ink: #FDFDF7;
  --su-pa-clay: #D97757;
  --su-pa-rose: #E0654F;
  --su-pa-desk: #F4F2EC;
  --su-pa-field: #DAD7CE;
  --su-pa-ok: #F1F4EE;
  --su-pa-ok-ink: #2F5130;
  --su-pa-err: #FBF1EC;
  --su-pa-err-ink: #9A3B1E;
}
[data-su-style="paper"][data-su-theme="dark"], [data-su-theme="dark"] [data-su-style="paper"], [data-su-style="paper"] [data-su-theme="dark"], [data-su-style="paper"] .su-canvas--dark {
  --su-primary: #ECEAE4;
  --su-bg: #1C1B19;
  --su-surface: #262522;
  --su-surface-muted: #2C2B28;
  --su-line: #34322E;
  --su-text-strong: #ECEAE4;
  --su-text: #D6D2CA;
  --su-text-muted: #9C9890;
  --su-text-faint: #6B6861;
  --su-pa-ink: #ECEAE4;
  --su-pa-on-ink: #1C1B19;
  --su-pa-desk: #141311;
  --su-pa-field: #3A3834;
  --su-pa-ok: #1E2A1F;
  --su-pa-ok-ink: #A9CFA6;
  --su-pa-err: #2E1D17;
  --su-pa-err-ink: #F0A58A;
}
/* 스타일: mono */
[data-su-style="mono"] {
  --su-primary: #171717;
  --su-bg: #FAFAFA;
  --su-surface: #FFFFFF;
  --su-surface-muted: #F5F5F5;
  --su-line: #EBEBEB;
  --su-text-strong: #171717;
  --su-text: #333333;
  --su-text-muted: #888888;
  --su-text-faint: #B3B3B3;
  --su-danger: #EE0000;
  --su-danger-soft: #FDEBEB;
  --su-success: #16A34A;
  --su-success-soft: #EAF7EF;
  --su-radius: 8px;
  --su-radius-sm: 6px;
  --su-radius-lg: 12px;
  --su-on-primary: #FFFFFF;
  --su-font: Inter, "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", sans-serif;
  --su-font-en: Inter, "Pretendard Variable", Pretendard, sans-serif;
  --su-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --su-shadow-x: 0 1px 1px rgba(0,0,0,.02), 0 2px 2px rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.08);
  --su-mo-hair: rgba(0,0,0,.08);
  --su-mo-side: #FAFAFA;
  --su-mo-side-text: #4D4D4D;
  --su-mo-side-on: #EFEFEF;
  --su-mo-link: #0070F3;
  --su-mo-a1: hsl(353 90% 82%);
  --su-mo-a1-ink: hsl(353 80% 28%);
  --su-mo-a2: hsl(25 100% 76%);
  --su-mo-a2-ink: hsl(25 90% 25%);
  --su-mo-a3: hsl(48 100% 72%);
  --su-mo-a3-ink: hsl(31 85% 25%);
  --su-mo-a4: hsl(151 70% 70%);
  --su-mo-a4-ink: hsl(151 80% 18%);
  --su-mo-a5: hsl(216 90% 78%);
  --su-mo-a5-ink: hsl(216 85% 25%);
  --su-mo-a6: hsl(278 75% 84%);
  --su-mo-a6-ink: hsl(278 75% 28%);
  --su-mo-c1: hsl(216 85% 55%);
  --su-mo-c2: hsl(262 65% 58%);
  --su-mo-c3: hsl(30 80% 55%);
  --su-mo-c4: hsl(151 65% 45%);
  --su-mo-c5: hsl(340 75% 55%);
}
[data-su-style="mono"][data-su-theme="dark"], [data-su-theme="dark"] [data-su-style="mono"], [data-su-style="mono"] [data-su-theme="dark"], [data-su-style="mono"] .su-canvas--dark {
  --su-primary: #FAFAFA;
  --su-bg: #171717;
  --su-surface: #1C1C1C;
  --su-surface-muted: #262626;
  --su-line: #2E2E2E;
  --su-text-strong: #FAFAFA;
  --su-text: #D9D9D9;
  --su-text-muted: #A6A6A6;
  --su-text-faint: #5C5C5C;
  --su-danger: #E5605F;
  --su-danger-soft: #3A1F1F;
  --su-success: #4ADE80;
  --su-success-soft: #16301F;
  --su-on-primary: #171717;
  --su-shadow-x: 0 1px 1px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
  --su-mo-hair: rgba(255,255,255,.08);
  --su-mo-side: #121212;
  --su-mo-side-text: #CCCCCC;
  --su-mo-side-on: #222222;
  --su-mo-a1: hsl(353 40% 32%);
  --su-mo-a1-ink: hsl(353 60% 78%);
  --su-mo-a2: hsl(25 42% 32%);
  --su-mo-a2-ink: hsl(25 65% 78%);
  --su-mo-a3: hsl(48 42% 32%);
  --su-mo-a3-ink: hsl(48 65% 78%);
  --su-mo-a4: hsl(151 36% 28%);
  --su-mo-a4-ink: hsl(151 50% 72%);
  --su-mo-a5: hsl(216 42% 32%);
  --su-mo-a5-ink: hsl(216 60% 78%);
  --su-mo-a6: hsl(278 38% 32%);
  --su-mo-a6-ink: hsl(278 55% 78%);
  --su-mo-c1: hsl(216 80% 65%);
  --su-mo-c2: hsl(262 60% 68%);
  --su-mo-c3: hsl(30 75% 65%);
  --su-mo-c4: hsl(151 60% 55%);
  --su-mo-c5: hsl(340 70% 65%);
}
[data-su-primary="blue"] { --su-primary: #0D6FEE; }
[data-su-primary="orange"] { --su-primary: #F2682A; }
[data-su-primary="green"] { --su-primary: #10A95B; }
[data-su-primary="violet"] { --su-primary: #6B4EEF; }
[data-su-theme="dark"], .su-canvas--dark {
  --su-bg: #121212;
  --su-surface: #1B1B1B;
  --su-surface-muted: #262626;
  --su-line: #33363C;
  --su-text-strong: #FFFFFF;
  --su-text: #E7E8EC;
  --su-text-muted: #949BA5;
  --su-text-faint: #4B4F58;
  --su-danger: #FF5A68;
  --su-danger-soft: #3A1D22;
  --su-success: #1ED08F;
  --su-success-soft: #15352A;
  --su-shadow-a: .35;
}
.su-canvas[data-format="slide"] {
  --su-fs-display: 100px;
  --su-fs-title: 56px;
  --su-fs-subtitle: 30px;
  --su-fs-body: 28px;
  --su-fs-label: 26px;
  --su-fs-caption: 21px;
  --su-lh-body: 1.4;
  --su-lh-title: 1.25;
  --su-pad: 120px;
  --su-gap: 32px;
  --su-radius: 32px;
  --su-radius-sm: 16px;
  --su-shadow-blur: 40px;
}
.su-canvas[data-format="card"], .su-canvas[data-format="card-square"] {
  --su-fs-display: 78px;
  --su-fs-title: 46px;
  --su-fs-subtitle: 40px;
  --su-fs-body: 38px;
  --su-fs-label: 30px;
  --su-fs-caption: 26px;
  --su-lh-body: 1.75;
  --su-lh-title: 1.3;
  --su-pad: 94px;
  --su-gap: 28px;
  --su-radius: 30px;
  --su-radius-sm: 18px;
  --su-shadow-blur: 40px;
}

/* ───────────────────────── suui components ─────────────────────────
   원칙(analysis/principles-*.md 요약)
   · 폰트 1개(Pretendard). 위계는 크기보다 굵기·색으로.
   · 강조 = 굵기 + 포인트 색뿐. 밑줄·기울임·글자 그림자·글자 그라데이션·양쪽 정렬 금지.
   · 순백 바탕 금지 — 회색 바탕 위에 흰 카드. 그림자는 흰 도형에만, 아주 옅게.
   · 포인트 색은 작은 면적(키워드·태그·번호)에. 큰 면(강조 띠)은 화면당 1개.
   · 한 덩어리 안의 둥글기는 통일. 버튼·알약은 높이의 1/2.
   크기는 모두 변수라 .su-canvas[data-format] 이 바뀌면 같이 커진다(slide/card/web).
──────────────────────────────────────────────────────────────────── */

.su, .su-canvas {
  font-family: var(--su-font);
  color: var(--su-text);
  font-size: var(--su-fs-body);
  line-height: var(--su-lh-body);
  letter-spacing: var(--su-tr-body);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
.su { background: var(--su-bg); }
.su *, .su-canvas, .su-canvas * { box-sizing: border-box; }
.su em, .su i, .su-canvas em, .su-canvas i { font-style: normal; } /* 기울임 금지 */

/* ── 캔버스: 카드뉴스·슬라이드 한 장 ── */
.su-canvas {
  position: relative; overflow: hidden; flex: none;
  background: var(--su-bg);
  padding: var(--su-pad);
  display: flex; flex-direction: column;
}
.su-canvas[data-format="slide"]       { width: 1920px; height: 1080px; }
.su-canvas[data-format="card"]        { width: 1080px; height: 1350px; }
.su-canvas[data-format="card-square"] { width: 1080px; height: 1080px; }
.su-canvas--primary { background: var(--su-primary); color: var(--su-on-primary); }
/* 포인트 색 캔버스: 포인트 색 글자·면은 흰색 계열로 */
.su-canvas--primary :is(.su-title, .su-display, .su-subtitle, .su-body, .su-key, .su-label, .su-index, .su-stat__num) { color: inherit; }
.su-canvas--primary :is(.su-desc, .su-caption, .su-foot, .su-cover__meta, .su-stat__label) { color: rgba(255, 255, 255, .78); }
.su-canvas--primary :is(.su-pill, .su-pill--soft, .su-num) { background: rgba(255, 255, 255, .18); color: #fff; }
.su-fill { flex: 1; min-height: 0; }
.su-foot { display: flex; justify-content: space-between; align-items: flex-end; font-size: var(--su-fs-caption); color: var(--su-text-muted); }

/* ── 타이포 ── */
.su-display, .su-title, .su-subtitle { color: var(--su-text-strong); margin: 0; font-weight: var(--su-w-bold); }
.su-display { font-size: var(--su-fs-display); line-height: 1.2; letter-spacing: var(--su-tr-display); }
.su-title { font-size: var(--su-fs-title); line-height: var(--su-lh-title); letter-spacing: var(--su-tr-title); }
.su-subtitle { font-size: var(--su-fs-subtitle); line-height: var(--su-lh-title); }
.su-body { font-size: var(--su-fs-body); color: var(--su-text); margin: 0; }
.su-desc { font-size: var(--su-fs-body); color: var(--su-text-muted); margin: 0; }
.su-label { font-size: var(--su-fs-label); font-weight: var(--su-w-semibold); color: var(--su-primary); letter-spacing: var(--su-tr-label); margin: 0; }
.su-label--en { font-family: var(--su-font-en); text-transform: uppercase; }
.su-caption { font-size: var(--su-fs-caption); color: var(--su-text-muted); margin: 0; }
.su-key { color: var(--su-primary); }                 /* 제목 안 1~2단어 */
.su-thin { font-weight: var(--su-w-light); }          /* 큰 제목 굵기 대비: 문장 thin + 키워드 bold */
.su-danger { color: var(--su-danger); }
.su-stack { display: flex; flex-direction: column; gap: calc(var(--su-gap) * .5); }
.su-stack--lg { gap: var(--su-gap); }
.su-stack--xl { gap: calc(var(--su-gap) * 2); }
.su-row { display: flex; gap: var(--su-gap); align-items: center; }
.su-grid { display: grid; gap: var(--su-gap); grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }

/* 진행 표시 01/05 */
.su-index { font-size: var(--su-fs-label); font-weight: var(--su-w-semibold); color: var(--su-primary); font-family: var(--su-font-en); letter-spacing: 0; }

/* 번호 배지 ①  — solid(기본) / soft / outline */
.su-num {
  display: inline-grid; place-items: center; flex: none;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  font-size: .8em; font-weight: var(--su-w-semibold); font-family: var(--su-font-en); line-height: 1;
  background: var(--su-primary); color: var(--su-on-primary);
}
.su-num--soft { background: var(--su-primary-soft); color: var(--su-primary); }
.su-num--outline { background: transparent; color: var(--su-primary); box-shadow: inset 0 0 0 .1em var(--su-primary); }

/* ── 알약(태그) ── */
.su-pill {
  display: inline-flex; align-items: center; gap: .4em; width: max-content;
  padding: .35em 1em; border-radius: 999px;
  font-size: var(--su-fs-label); font-weight: var(--su-w-semibold); line-height: 1.2;
  background: var(--su-primary); color: var(--su-on-primary);
}
.su-pill--soft { background: var(--su-primary-soft); color: var(--su-primary); }
.su-pill--neutral { background: var(--su-surface-muted); color: var(--su-text-muted); }
.su-pill--outline { background: transparent; color: var(--su-primary); box-shadow: inset 0 0 0 2px var(--su-primary); }
/* 같은 색 면 위에서 묻히지 않게 */
.su-card--muted .su-pill--neutral, .su-panel .su-pill--neutral, .su-compare > :last-child .su-pill--soft { background: var(--su-surface); }
.su-pill--lg { font-size: var(--su-fs-subtitle); padding: .35em 1.1em; }

/* ── 버튼: 패딩 상하:좌우 = 0.4:0.7, 둥글기 = 높이의 1/2 ── */
.su-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .75em 1.35em; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: var(--su-fs-body); font-weight: var(--su-w-semibold); line-height: 1;
  background: var(--su-primary); color: var(--su-on-primary); text-decoration: none;
}
.su-btn--tint { background: var(--su-primary-soft); color: var(--su-primary); }
.su-btn--outline { background: transparent; color: var(--su-text-strong); box-shadow: inset 0 0 0 1.5px var(--su-line); }
.su-btn--white { background: var(--su-surface); color: var(--su-text-strong); box-shadow: var(--su-shadow); }
.su-btn:hover { filter: brightness(.96); }

/* ── 카드 ── */
.su-card {
  background: var(--su-surface); border-radius: var(--su-radius);
  padding: calc(var(--su-pad) * .5); box-shadow: var(--su-shadow);
}
.su-card--flat { box-shadow: none; }
.su-card--muted { background: var(--su-surface-muted); box-shadow: none; }
.su-card--outline { box-shadow: inset 0 0 0 1.5px var(--su-line); }
.su-card--center { display: grid; place-items: center; text-align: center; }
.su-panel { background: var(--su-surface-muted); border-radius: var(--su-radius-sm); padding: calc(var(--su-pad) * .3); }

/* 강조 띠 — 화면당 1개 */
.su-band { background: var(--su-primary); color: var(--su-on-primary); border-radius: var(--su-radius-sm); padding: calc(var(--su-pad) * .4) calc(var(--su-pad) * .5); }
.su-band .su-title, .su-band .su-subtitle { color: inherit; }
.su-band .su-desc { color: color-mix(in srgb, var(--su-on-primary) 72%, transparent); }
.su-band--bleed { margin-inline: calc(var(--su-pad) * -1); border-radius: 0; padding-inline: var(--su-pad); }

/* POINT 프레임 — 파란 테두리 + 라벨 */
.su-point { position: relative; border-radius: var(--su-radius); box-shadow: inset 0 0 0 3px var(--su-primary); padding: calc(var(--su-pad) * .5); padding-top: calc(var(--su-pad) * .6); background: var(--su-surface); }
.su-point::before { content: attr(data-label); position: absolute; top: 0; left: calc(var(--su-pad) * .5); transform: translateY(-50%);
  background: var(--su-primary); color: var(--su-on-primary); font: var(--su-w-semibold) var(--su-fs-caption)/1 var(--su-font-en); padding: .5em 1em; border-radius: 999px; }
.su-point:not([data-label])::before { content: "POINT"; }

/* Do / Don't */
.su-verdict { display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 28%; font-weight: var(--su-w-bold); flex: none; }
.su-verdict--no  { background: var(--su-danger-soft); color: var(--su-danger); }
.su-verdict--yes { background: var(--su-success-soft); color: var(--su-success); }
.su-verdict--no::before { content: "✕"; }
.su-verdict--yes::before { content: "✓"; }

/* AS-IS → TO-BE */
.su-tag-asis, .su-tag-tobe { display: inline-block; width: max-content; padding: .3em .9em; border-radius: 999px; font: var(--su-w-semibold) var(--su-fs-caption)/1.2 var(--su-font-en); }
.su-tag-asis { background: var(--su-primary-soft); color: var(--su-primary); }
.su-tag-tobe { background: var(--su-primary); color: var(--su-on-primary); }

/* 통계 */
.su-stat { display: flex; flex-direction: column; gap: .2em; }
.su-stat__num { font: var(--su-w-bold) calc(var(--su-fs-display) * .9)/1 var(--su-font-en); color: var(--su-text-strong); letter-spacing: var(--su-tr-display); }
.su-stat__num .su-key, .su-stat--key .su-stat__num { color: var(--su-primary); }
.su-stat__label { font-size: var(--su-fs-caption); color: var(--su-text-muted); }

/* ── 막대 그래프: 둥근 끝, 나머지 회색 + 강조 1개 ── */
.su-bars { display: flex; align-items: flex-end; gap: calc(var(--su-gap) * 1.2); height: 100%; min-height: 8em; padding-top: 1.6em; }
.su-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .5em; height: 100%; }
.su-bar__fill { position: relative; width: min(100%, 2.4em); height: var(--v, 50%); border-radius: 999px 999px .35em .35em; background: var(--su-surface-muted); }
.su-bar.is-key .su-bar__fill { background: var(--su-primary); }
.su-bar__fill::after { content: attr(data-value); position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -.35em); font: var(--su-w-semibold) var(--su-fs-caption)/1 var(--su-font-en); color: var(--su-text-muted); white-space: nowrap; }
.su-bar.is-key .su-bar__fill::after { color: var(--su-primary); }
.su-bar__label { font-size: var(--su-fs-caption); color: var(--su-text-muted); }

/* ── 도넛: <svg class="su-donut" viewBox="0 0 120 120"><circle class="track"/><circle class="value" pathLength="100" style="--v:72"/></svg> ── */
.su-donut { width: 100%; height: auto; transform: rotate(-90deg); overflow: visible; }
.su-donut circle { cx: 60px; cy: 60px; r: 48px; fill: none; stroke-width: 14; }
.su-donut .track { stroke: var(--su-surface-muted); }
.su-donut .value { stroke: var(--su-primary); stroke-linecap: round; stroke-dasharray: var(--v) 100; }
.su-donut-wrap { position: relative; display: grid; place-items: center; }
.su-donut-wrap > .su-stat { position: absolute; text-align: center; align-items: center; }

/* 진행바 */
.su-progress { height: .45em; border-radius: 999px; background: var(--su-surface-muted); overflow: hidden; }
.su-progress > i { display: block; height: 100%; width: var(--v, 40%); background: var(--su-primary); border-radius: inherit; }

/* ── 표: 세로선 없음, 가로선만, 머리만 연회색. 강조 열은 흰 판을 띄운다 ── */
.su-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--su-fs-caption); }
.su-table th, .su-table td { padding: .9em 1em; text-align: center; border-bottom: 1px solid var(--su-line); }
.su-table th { background: var(--su-surface-muted); color: var(--su-text-muted); font-weight: var(--su-w-semibold); border-bottom: 0; }
.su-table th:first-child { border-radius: var(--su-radius-sm) 0 0 var(--su-radius-sm); }
.su-table th:last-child { border-radius: 0 var(--su-radius-sm) var(--su-radius-sm) 0; }
.su-table td:first-child { text-align: left; color: var(--su-text-strong); font-weight: var(--su-w-semibold); }
.su-table .is-key { background: var(--su-surface); color: var(--su-primary); font-weight: var(--su-w-bold); box-shadow: 10px 0 20px -12px rgba(0,0,0,.12), -10px 0 20px -12px rgba(0,0,0,.12); position: relative; }
.su-table th.is-key { background: var(--su-primary); color: var(--su-on-primary); border-radius: var(--su-radius-sm) var(--su-radius-sm) 0 0; }
.su-table tr:last-child td { border-bottom: 0; }
.su-table tr:last-child td.is-key { border-radius: 0 0 var(--su-radius-sm) var(--su-radius-sm); }

/* ── 연혁 ── */
.su-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--su-gap) * .9); }
.su-timeline li { display: grid; grid-template-columns: 4.2em 1fr; gap: var(--su-gap); align-items: baseline; }
.su-timeline b { font: var(--su-w-bold) var(--su-fs-subtitle)/1 var(--su-font-en); color: var(--su-text-strong); }
.su-timeline li:first-child b { color: var(--su-primary); }
.su-timeline span { color: var(--su-text-muted); border-left: 1.5px dashed var(--su-text-faint); padding-left: var(--su-gap); }

/* ── 비교 VS ── */
.su-compare { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--su-gap) * 2.4); }  /* VS 워터마크 자리 */
.su-compare::after { content: "VS"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 800 calc(var(--su-fs-display) * 1.4)/1 var(--su-font-en); color: var(--su-text-strong); opacity: .06; pointer-events: none; }
.su-compare > :last-child { background: var(--su-primary-soft); }
.su-compare > :last-child .su-subtitle { color: var(--su-primary); }

/* ── 로고 벽: 같은 크기 회색 상자 + 흑백 ── */
.su-logos { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: calc(var(--su-gap) * .5); }
.su-logos > * { display: grid; place-items: center; aspect-ratio: 2.2; background: var(--su-surface-muted); border-radius: var(--su-radius-sm);
  font: var(--su-w-bold) var(--su-fs-caption)/1 var(--su-font-en); color: var(--su-text-muted); letter-spacing: .02em; }
.su-logos img { max-height: 36%; max-width: 62%; filter: grayscale(1); opacity: .6; }

/* 연결선: 연회색 짧은 파선(블록 화살표 금지) */
.su-arrow { display: flex; align-items: center; color: var(--su-text-faint); min-width: 2em; flex: 1; }
.su-arrow::before { content: ""; flex: 1; border-top: 2px dashed currentColor; }
.su-arrow::after { content: ""; width: .5em; height: .5em; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); margin-left: -.45em; }

/* 글머리: 작은 점 하나, 색은 글자와 같게, 내어쓰기 */
.su-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.su-bullets li { position: relative; padding-left: 1.1em; }
.su-bullets li::before { content: ""; position: absolute; left: .3em; top: calc(.5em * var(--su-lh-body)); width: .28em; height: .28em; border-radius: 50%; background: currentColor; }

/* 아이콘: <svg class="su-i"><use href="suui-icons.svg#chart"/></svg> — 선형·둥근 끝 한 세트 */
.su-i { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; }

/* 아이콘 타일 */
.su-icon { display: inline-grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 28%; background: var(--su-primary-soft); color: var(--su-primary); flex: none; }
.su-icon svg { width: 52%; height: 52%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.su-icon--neutral { background: var(--su-surface-muted); color: var(--su-text); }
.su-icon .su-i { width: 52%; height: 52%; }
.su-icon--duo { background: var(--su-surface-muted); color: var(--su-text); }
.su-icon--duo .su-i { fill: var(--su-primary-mid); }   /* 투톤: 회색 선 + 포인트 면 */

/* ── 카드뉴스 본문 머리: 상단 회색 띠(인덱스+제목+›) ── */
.su-cn-head { margin: calc(var(--su-pad) * -1) calc(var(--su-pad) * -1) 0; padding: var(--su-pad); padding-bottom: calc(var(--su-pad) * .7);
  background: var(--su-bg); display: grid; grid-template-columns: 1fr auto; gap: .4em var(--su-gap); align-items: center; }
.su-cn-head > :not(.su-next) { grid-column: 1; }
.su-next { grid-column: 2; grid-row: 1 / span 3; color: var(--su-text-faint); font-size: var(--su-fs-title); font-weight: var(--su-w-light); }
.su-next::before { content: "›"; }
.su-canvas--split { background: var(--su-surface); }   /* 머리는 회색, 아래는 흰 */
.su-canvas--split > .su-cn-body { padding-top: var(--su-pad); }

/* 표지 */
.su-cover { flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: var(--su-gap); }
.su-cover__meta { display: flex; justify-content: space-between; align-items: flex-end; font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-cover--center { place-items: center; text-align: center; grid-template-rows: 1fr auto 1fr; }

/* 웹 레이아웃 도우미 */
.su-section { padding: calc(var(--su-pad) * 3) var(--su-pad); }
.su-container { max-width: 1120px; margin: 0 auto; }
@media (max-width: 720px) {
  .su-grid { grid-template-columns: 1fr; }
  .su-compare { grid-template-columns: 1fr; }
  .su-logos { grid-template-columns: repeat(2, 1fr); }
}


/* ───────────────────── suui components 2 — 폼·오버레이·콘텐츠 블록 ─────────────────────
   같은 원칙: 크기는 변수(--su-fs-*·--su-pad·--su-gap·--su-radius*)와 em 으로만.
   입력칸·버튼·알약 둥글기 = 높이의 1/2 또는 radius-sm. 강조는 굵기 + 포인트 색 하나.
   상호작용(탭·모달·토스트·드롭다운 닫기)은 dist/suui.js.
──────────────────────────────────────────────────────────────────────────────── */

/* ── 폼 ── */
.su-field { display: grid; gap: .45em; font-size: var(--su-fs-body); min-width: 0; }
.su-label-text { font-size: var(--su-fs-label); font-weight: var(--su-w-semibold); color: var(--su-text-strong); }
.su-label-text .su-req { color: var(--su-primary); margin-left: .2em; }
.su-input, .su-textarea, .su-select {
  width: 100%; min-width: 0; margin: 0;
  font: inherit; font-size: var(--su-fs-body); line-height: 1.4; letter-spacing: var(--su-tr-body);
  color: var(--su-text-strong); background: var(--su-surface);
  border: 0; border-radius: var(--su-radius-sm); outline: none;
  box-shadow: inset 0 0 0 1.5px var(--su-line);
  padding: .72em .95em;
  transition: box-shadow var(--su-dur-fast, 160ms) ease, background-color var(--su-dur-fast, 160ms) ease;
}
.su-input::placeholder, .su-textarea::placeholder { color: var(--su-text-faint); }
.su-input:hover, .su-textarea:hover, .su-select:hover { box-shadow: inset 0 0 0 1.5px var(--su-text-faint); }
.su-input:focus-visible, .su-textarea:focus-visible, .su-select:focus-visible {
  box-shadow: inset 0 0 0 2px var(--su-primary), 0 0 0 .25em var(--su-primary-soft);
}
.su-input:disabled, .su-textarea:disabled, .su-select:disabled { background: var(--su-surface-muted); color: var(--su-text-muted); cursor: not-allowed; box-shadow: none; }
.su-textarea { min-height: 6.5em; resize: vertical; line-height: var(--su-lh-body); }
.su-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.6em;
  background-image: linear-gradient(45deg, transparent 50%, var(--su-text-muted) 50%), linear-gradient(135deg, var(--su-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25em) 50%, calc(100% - .95em) 50%;
  background-size: .32em .32em; background-repeat: no-repeat;
}
.su-help { font-size: var(--su-fs-caption); color: var(--su-text-muted); margin: 0; }
.su-field.is-error .su-input, .su-field.is-error .su-textarea, .su-field.is-error .su-select { box-shadow: inset 0 0 0 2px var(--su-danger); }
.su-field.is-error .su-input:focus-visible, .su-field.is-error .su-textarea:focus-visible, .su-field.is-error .su-select:focus-visible { box-shadow: inset 0 0 0 2px var(--su-danger), 0 0 0 .25em var(--su-danger-soft); }
.su-field.is-error .su-help { color: var(--su-danger); }

/* 체크박스·라디오·스위치: 네이티브 input 을 그대로 쓰고 모양만 바꾼다 */
.su-check, .su-radio, .su-switch {
  display: inline-flex; align-items: flex-start; gap: .6em; cursor: pointer;
  font-size: var(--su-fs-body); color: var(--su-text); line-height: 1.4; user-select: none;
}
.su-check input, .su-radio input, .su-switch input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer; position: relative;
  font-size: inherit; background: var(--su-surface); box-shadow: inset 0 0 0 1.5px var(--su-text-faint);
  transition: background-color var(--su-dur-fast, 160ms) ease, box-shadow var(--su-dur-fast, 160ms) ease;
}
.su-check input, .su-radio input { width: 1.2em; height: 1.2em; margin-top: .1em; }
.su-check input { border-radius: .3em; }
.su-radio input { border-radius: 50%; }
.su-check input:checked, .su-radio input:checked { background: var(--su-primary); box-shadow: none; }
.su-check input::after { content: ""; position: absolute; left: .4em; top: .2em; width: .3em; height: .6em;
  border: solid var(--su-on-primary); border-width: 0 .14em .14em 0; transform: rotate(45deg) scale(0); transition: transform var(--su-dur-fast, 160ms) var(--su-ease-out, ease); }
.su-check input:checked::after { transform: rotate(45deg) scale(1); }
.su-radio input::after { content: ""; position: absolute; inset: .34em; border-radius: 50%; background: var(--su-on-primary); transform: scale(0); transition: transform var(--su-dur-fast, 160ms) var(--su-ease-out, ease); }
.su-radio input:checked::after { transform: scale(1); }
.su-switch { align-items: center; }
.su-switch input { width: 2.3em; height: 1.35em; border-radius: 999px; background: var(--su-text-faint); box-shadow: none; }
.su-switch input::after { content: ""; position: absolute; top: .15em; left: .15em; width: 1.05em; height: 1.05em; border-radius: 50%;
  background: var(--su-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transition: transform var(--su-dur, 320ms) var(--su-spring, ease); }
.su-switch input:checked { background: var(--su-primary); }
.su-switch input:checked::after { transform: translateX(.95em); }
.su-check input:focus-visible, .su-radio input:focus-visible, .su-switch input:focus-visible { outline: 2px solid var(--su-primary); outline-offset: 2px; }
.su-check input:disabled, .su-radio input:disabled, .su-switch input:disabled { opacity: .45; cursor: not-allowed; }
.su-choices { display: flex; flex-wrap: wrap; gap: .6em 1.4em; }

/* 입력 + 버튼 한 덩어리(검색창·구독). 바깥이 알약이면 안쪽 버튼도 알약 */
.su-input-group {
  display: flex; align-items: center; gap: .35em; padding: .3em; min-width: 0;
  background: var(--su-surface); border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--su-line);
  font-size: var(--su-fs-body); transition: box-shadow var(--su-dur-fast, 160ms) ease;
}
.su-input-group:focus-within { box-shadow: inset 0 0 0 2px var(--su-primary), 0 0 0 .25em var(--su-primary-soft); }
.su-input-group .su-input { flex: 1; box-shadow: none; background: transparent; padding: .45em .75em; border-radius: 999px; }
.su-input-group .su-btn { flex: none; font-size: inherit; padding: .62em 1.2em; }
.su-input-group--square { border-radius: var(--su-radius-sm); }
.su-input-group--square .su-btn { border-radius: calc(var(--su-radius-sm) - .3em); }

/* ── 탭 ── */
.su-tabs { font-size: var(--su-fs-body); }
.su-tabs__list { position: relative; display: flex; gap: .2em; box-shadow: inset 0 -1.5px 0 var(--su-line); overflow-x: auto; scrollbar-width: none; }
.su-tab {
  position: relative; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: var(--su-fs-body); font-weight: var(--su-w-semibold); color: var(--su-text-muted);
  padding: .75em 1em; transition: color var(--su-dur, 320ms) ease;
}
.su-tab:hover { color: var(--su-text); }
.su-tab[aria-selected="true"] { color: var(--su-text-strong); }
.su-tab:focus-visible { outline: 2px solid var(--su-primary); outline-offset: -2px; border-radius: var(--su-radius-sm); }
.su-tabs__ind { position: absolute; left: 0; bottom: 0; height: .16em; min-height: 2px; width: 0; border-radius: 999px; background: var(--su-primary);
  transition: transform var(--su-dur, 320ms) var(--su-ease-out, ease), width var(--su-dur, 320ms) var(--su-ease-out, ease); }
.su-tabs__panel { padding-top: var(--su-gap); }
.su-tabs__panel[hidden] { display: none; }
.su-tabs__panel:not([hidden]) { animation: su-fade-up var(--su-dur, 320ms) var(--su-ease-out, ease); }
/* 알약형: 회색 판 위 흰 알약 */
.su-tabs--pill .su-tabs__list { display: inline-flex; box-shadow: none; padding: .3em; border-radius: 999px; background: var(--su-surface-muted); max-width: 100%; }
.su-tabs--pill .su-tab { padding: .55em 1.15em; border-radius: 999px; z-index: 1; font-size: var(--su-fs-label); }
.su-tabs--pill .su-tabs__ind { top: .3em; bottom: .3em; height: auto; background: var(--su-surface); box-shadow: 0 1px 6px rgba(0, 0, 0, .08); }
@keyframes su-fade-up { from { opacity: 0; transform: translateY(.4em); } }

/* ── 아코디언: <details class="su-accordion"><summary>질문</summary><div class="su-accordion__body">답</div></details> ── */
.su-accordion-group { display: grid; gap: calc(var(--su-gap) * .5); }
.su-accordion {
  background: var(--su-surface); border-radius: var(--su-radius-sm); box-shadow: var(--su-shadow);
  font-size: var(--su-fs-body); interpolate-size: allow-keywords;
}
.su-accordion > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--su-gap);
  padding: 1em 1.2em; font-weight: var(--su-w-semibold); color: var(--su-text-strong); border-radius: inherit;
}
.su-accordion > summary::-webkit-details-marker { display: none; }
.su-accordion > summary::after {
  content: ""; margin-left: auto; flex: none; width: .5em; height: .5em;
  border: solid var(--su-text-muted); border-width: 0 .13em .13em 0; transform: translateY(-.15em) rotate(45deg);
  transition: transform var(--su-dur, 320ms) var(--su-ease-out, ease);
}
.su-accordion[open] > summary::after { transform: translateY(.1em) rotate(-135deg); border-color: var(--su-primary); }
.su-accordion > summary:focus-visible { outline: 2px solid var(--su-primary); outline-offset: 2px; }
.su-accordion__body { padding: 0 1.2em 1.1em; color: var(--su-text-muted); }
.su-accordion::details-content { block-size: 0; overflow: clip; transition: block-size var(--su-dur, 320ms) var(--su-ease-out, ease), content-visibility var(--su-dur, 320ms) allow-discrete; }
.su-accordion[open]::details-content { block-size: auto; }
.su-accordion--flat { box-shadow: none; background: var(--su-surface-muted); }

/* ── 모달: <dialog class="su-modal" id="…"> + data-su-open="id" / su.modal.open(id) ── */
.su-modal {
  width: min(32em, calc(100vw - 2em)); max-height: calc(100vh - 2em); padding: 0; border: 0;
  border-radius: var(--su-radius); background: var(--su-surface); color: var(--su-text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .18); font-family: var(--su-font); font-size: var(--su-fs-body); line-height: var(--su-lh-body);
  letter-spacing: var(--su-tr-body); word-break: keep-all;
  opacity: 0; transform: translateY(1em) scale(.97);
  transition: opacity var(--su-dur, 320ms) var(--su-ease-out, ease), transform var(--su-dur, 320ms) var(--su-ease-out, ease),
    overlay var(--su-dur, 320ms) allow-discrete, display var(--su-dur, 320ms) allow-discrete;
}
.su-modal[open] { opacity: 1; transform: none; }
.su-modal:focus { outline: none; }
.su-modal__x:focus-visible { outline: 2px solid var(--su-primary); outline-offset: 1px; }
@starting-style { .su-modal[open] { opacity: 0; transform: translateY(1em) scale(.97); } }
.su-modal::backdrop { background: rgba(10, 12, 16, 0); backdrop-filter: blur(0); transition: background-color var(--su-dur, 320ms) ease, backdrop-filter var(--su-dur, 320ms) ease, overlay var(--su-dur, 320ms) allow-discrete, display var(--su-dur, 320ms) allow-discrete; }
.su-modal[open]::backdrop { background: rgba(10, 12, 16, .42); backdrop-filter: blur(3px); }
@starting-style { .su-modal[open]::backdrop { background: rgba(10, 12, 16, 0); backdrop-filter: blur(0); } }
.su-modal *, .su-modal { box-sizing: border-box; }
.su-modal__head { display: flex; align-items: flex-start; gap: var(--su-gap); padding: 1.4em 1.5em .4em; }
.su-modal__head h3, .su-modal__title { margin: 0; flex: 1; font-size: var(--su-fs-subtitle); font-weight: var(--su-w-bold); color: var(--su-text-strong); line-height: var(--su-lh-title); }
.su-modal__x { flex: none; width: 2em; height: 2em; margin: -.3em -.4em 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--su-text-muted); cursor: pointer; font: inherit; font-size: 1.1em; line-height: 1; }
.su-modal__x::before { content: "✕"; }
.su-modal__x:hover { background: var(--su-surface-muted); }
.su-modal__body { padding: .4em 1.5em 1.2em; color: var(--su-text-muted); }
.su-modal__foot { display: flex; justify-content: flex-end; gap: .5em; padding: .9em 1.5em 1.4em; }

/* ── 토스트: su.toast("메시지", {type:"success|danger"}) 아래 가운데에 쌓임 ── */
.su-toaster { position: fixed; inset: auto auto 1.5rem 50%; transform: translateX(-50%); z-index: 1000; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit;
  display: flex; flex-direction: column-reverse; align-items: center; gap: .5rem; pointer-events: none; width: max-content; max-width: calc(100vw - 2rem); }
.su-toast {
  display: inline-flex; align-items: center; gap: .6em; pointer-events: auto;
  padding: .8em 1.25em; border-radius: 999px; max-width: 100%;
  background: var(--su-text-strong); color: var(--su-bg);
  font-family: var(--su-font); font-size: var(--su-fs-label, 14px); font-weight: var(--su-w-semibold); letter-spacing: var(--su-tr-body); line-height: 1.35;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  animation: su-toast-in var(--su-dur, 320ms) var(--su-spring, ease) both;
}
.su-toast::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--su-primary-mid); }
.su-toast--success::before { content: "✓"; width: 1.35em; height: 1.35em; display: grid; place-items: center; background: var(--su-success); color: #fff; font-size: .8em; }
.su-toast--danger::before { content: "!"; width: 1.35em; height: 1.35em; display: grid; place-items: center; background: var(--su-danger); color: #fff; font-size: .8em; }
.su-toast.is-out { animation: su-toast-out var(--su-dur-fast, 160ms) ease-in both; }
@keyframes su-toast-in { from { opacity: 0; transform: translateY(1em) scale(.96); } }
@keyframes su-toast-out { to { opacity: 0; transform: translateY(.5em); } }

/* ── 툴팁(CSS 만): <button data-su-tip="설명"> · data-su-tip-pos="bottom" ── */
[data-su-tip] { position: relative; }
[data-su-tip]::after {
  content: attr(data-su-tip); position: absolute; left: 50%; bottom: calc(100% + .55em); z-index: 30;
  width: max-content; max-width: 16em; padding: .5em .8em; border-radius: var(--su-radius-sm);
  background: var(--su-text-strong); color: var(--su-bg);
  font-family: var(--su-font); font-size: var(--su-fs-caption); font-weight: var(--su-w-regular); line-height: 1.45; letter-spacing: var(--su-tr-body); white-space: normal; text-align: left;
  pointer-events: none; opacity: 0; transform: translate(-50%, .3em);
  transition: opacity var(--su-dur-fast, 160ms) ease, transform var(--su-dur-fast, 160ms) var(--su-ease-out, ease);
}
[data-su-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + .55em); transform: translate(-50%, -.3em); }
[data-su-tip]:hover::after, [data-su-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 120ms; }

/* ── 드롭다운(<details> 기반) ── */
.su-dropdown { position: relative; display: inline-block; font-size: var(--su-fs-body); }
.su-dropdown > summary { list-style: none; cursor: pointer; }
.su-dropdown > summary::-webkit-details-marker { display: none; }
.su-dropdown > summary.su-btn::after { content: ""; width: .38em; height: .38em; border: solid currentColor; border-width: 0 .12em .12em 0; transform: translateY(-.15em) rotate(45deg); transition: transform var(--su-dur, 320ms) var(--su-ease-out, ease); }
.su-dropdown[open] > summary.su-btn::after { transform: translateY(.1em) rotate(-135deg); }
.su-dropdown__menu {
  position: absolute; top: calc(100% + .4em); left: 0; z-index: 40; min-width: 12em;
  display: grid; padding: .35em; border-radius: var(--su-radius-sm);
  background: var(--su-surface); box-shadow: 0 10px 32px rgba(0, 0, 0, .12), 0 0 0 1px var(--su-line);
  animation: su-fade-up var(--su-dur-fast, 160ms) var(--su-ease-out, ease);
}
.su-dropdown--end .su-dropdown__menu { left: auto; right: 0; }
.su-dropdown__menu > a, .su-dropdown__menu > button {
  display: flex; align-items: center; gap: .6em; width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  padding: .6em .8em; border-radius: calc(var(--su-radius-sm) - .2em);
  font: inherit; font-size: var(--su-fs-label); color: var(--su-text); text-decoration: none;
}
.su-dropdown__menu > a:hover, .su-dropdown__menu > button:hover, .su-dropdown__menu > :focus-visible { background: var(--su-surface-muted); color: var(--su-text-strong); outline: none; }
.su-dropdown__menu > .is-danger { color: var(--su-danger); }
.su-dropdown__menu > hr { border: 0; border-top: 1px solid var(--su-line); margin: .3em .2em; }

/* ────────────── 콘텐츠 블록 ────────────── */

/* 겹친 카드 더미: 첫 카드가 맨 앞, 뒤 카드는 위로 조금씩 빠져나온다 */
.su-stack-cards { display: grid; isolation: isolate; padding-top: calc(var(--su-gap) * 1.6); }
.su-stack-cards > * { grid-area: 1 / 1; transition: transform var(--su-dur, 320ms) var(--su-ease-out, ease); }
.su-stack-cards > :nth-child(1) { z-index: 3; }
.su-stack-cards > :nth-child(2) { z-index: 2; transform: translateY(calc(var(--su-gap) * -.8)) scale(.94); opacity: .85; }
.su-stack-cards > :nth-child(3) { z-index: 1; transform: translateY(calc(var(--su-gap) * -1.6)) scale(.88); opacity: .6; }
.su-stack-cards > :nth-child(n+4) { visibility: hidden; }
.su-stack-cards > :nth-child(n+2) > * { visibility: hidden; }   /* 뒤 카드는 모양만 */
.su-stack-cards--fan { padding-top: 0; place-items: center; }
.su-stack-cards--fan > :nth-child(2) { transform: rotate(-6deg) translateX(-22%); opacity: 1; }
.su-stack-cards--fan > :nth-child(3) { transform: rotate(6deg) translateX(22%); opacity: 1; }
.su-stack-cards--fan > :nth-child(n+2) > * { visibility: visible; }

/* 후기 카드 */
.su-testimonial { display: flex; flex-direction: column; gap: calc(var(--su-gap) * .75); background: var(--su-surface); border-radius: var(--su-radius); padding: calc(var(--su-pad) * .5); box-shadow: var(--su-shadow); }
.su-testimonial__body { margin: 0; color: var(--su-text); font-size: var(--su-fs-body); }
.su-testimonial__body b { color: var(--su-text-strong); }
.su-testimonial__who { display: flex; align-items: center; gap: .7em; margin-top: auto; }
.su-testimonial__who > :not(.su-avatar) b { display: block; color: var(--su-text-strong); font-size: var(--su-fs-label); }
.su-testimonial__who > :not(.su-avatar) span { display: block; color: var(--su-text-muted); font-size: var(--su-fs-caption); }
.su-avatar { display: inline-grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; overflow: hidden;
  background: var(--su-primary-soft); color: var(--su-primary); font-weight: var(--su-w-bold); font-size: var(--su-fs-label); }
.su-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* 별점: <span class="su-stars" style="--v:4.5" aria-label="5점 중 4.5점"></span> — 노랑 대신 포인트 색 */
.su-stars { --v: 5; display: inline-block; width: max-content; font-size: var(--su-fs-label); letter-spacing: .1em; line-height: 1; }
.su-stars::before { content: "★★★★★"; background: linear-gradient(90deg, var(--su-primary) calc(var(--v) / 5 * 100%), var(--su-line) 0);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 문제 카드(페인 포인트) */
.su-problem { position: relative; display: flex; flex-direction: column; gap: .4em; background: var(--su-surface); border-radius: var(--su-radius); padding: calc(var(--su-pad) * .5); box-shadow: var(--su-shadow); }
.su-problem__num { font: var(--su-w-bold) var(--su-fs-subtitle)/1 var(--su-font-en); color: var(--su-text-faint); letter-spacing: -.02em; margin-bottom: .3em; }
.su-problem__num::before { content: "PROBLEM "; font-size: .5em; letter-spacing: .06em; vertical-align: .35em; margin-right: .3em; }
.su-problem__title { margin: 0; font-size: var(--su-fs-subtitle); font-weight: var(--su-w-bold); color: var(--su-text-strong); line-height: var(--su-lh-title); }
.su-problem__desc { margin: 0; color: var(--su-text-muted); font-size: var(--su-fs-body); }
.su-problem.is-key .su-problem__num { color: var(--su-primary); }
.su-problem--muted { background: var(--su-surface-muted); box-shadow: none; }

/* 쿠폰: 가운데 점선 + 위아래 반원 홈. 홈 색은 바탕색(--su-coupon-hole) */
.su-coupon { --hole: 1.1em; position: relative; display: flex; align-items: stretch; background: var(--su-surface); border-radius: var(--su-radius-sm); box-shadow: var(--su-shadow); font-size: var(--su-fs-body); }
.su-coupon__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25em; padding: 1.2em 1.4em; }
.su-coupon__amount { font: var(--su-w-bold) calc(var(--su-fs-title) * 1.25)/1.05 var(--su-font-en); color: var(--su-primary); letter-spacing: var(--su-tr-display); }
.su-coupon__title { font-weight: var(--su-w-semibold); color: var(--su-text-strong); }
.su-coupon__meta { font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-coupon__stub { position: relative; flex: none; display: grid; place-items: center; align-content: center; gap: .3em; min-width: 6.5em; padding: 1em 1.2em;
  border-left: 2px dashed var(--su-line); color: var(--su-primary); font-weight: var(--su-w-bold); font-size: var(--su-fs-label); text-align: center; }
.su-coupon__stub::before, .su-coupon__stub::after { content: ""; position: absolute; left: calc(var(--hole) / -2 - 1px); width: var(--hole); height: var(--hole); border-radius: 50%; background: var(--su-coupon-hole, var(--su-bg)); }
.su-coupon__stub::before { top: calc(var(--hole) / -2); }
.su-coupon__stub::after { bottom: calc(var(--hole) / -2); }
.su-coupon--primary .su-coupon__stub { background: var(--su-primary); color: var(--su-on-primary); border-left-color: transparent; border-radius: 0 var(--su-radius-sm) var(--su-radius-sm) 0; }

/* 폰 프레임 + 대화 말풍선 */
.su-phone { --bezel: #1B1F28; width: var(--w, 19em); max-width: 100%; aspect-ratio: 9 / 18; flex: none; display: flex; flex-direction: column;
  padding: .55em; border-radius: 2.4em; background: var(--bezel); box-shadow: 0 18px 48px rgba(0, 0, 0, .14); font-size: var(--su-fs-body); }
[data-su-theme="dark"] .su-phone { --bezel: #34363B; }
.su-phone__screen { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.9em; background: var(--su-bg); }
.su-phone__screen::before { content: ""; position: absolute; top: .55em; left: 50%; transform: translateX(-50%); width: 28%; height: 1.2em; border-radius: 999px; background: var(--bezel); z-index: 2; }
.su-phone__bar { display: flex; align-items: center; gap: .6em; padding: 2.4em 1em .8em; background: var(--su-surface); border-bottom: 1px solid var(--su-line); font-size: var(--su-fs-label); }
.su-phone__bar b { color: var(--su-text-strong); }
.su-chat { display: flex; flex-direction: column; gap: .45em; padding: 1em .9em; font-size: var(--su-fs-label); overflow: hidden; }
.su-phone .su-chat { flex: 1; justify-content: flex-end; }
.su-msg { max-width: 78%; width: max-content; padding: .6em .9em; border-radius: 1.1em 1.1em 1.1em .3em; background: var(--su-surface); color: var(--su-text); line-height: 1.45; box-shadow: var(--su-shadow); }
.su-msg--me { align-self: flex-end; border-radius: 1.1em 1.1em .3em 1.1em; background: var(--su-primary); color: var(--su-on-primary); box-shadow: none; }
.su-msg__time { align-self: flex-start; font-size: var(--su-fs-caption); color: var(--su-text-faint); margin: -.2em .3em .2em; }
.su-msg--me + .su-msg__time, .su-msg__time--me { align-self: flex-end; }
.su-chat__day { align-self: center; font-size: var(--su-fs-caption); color: var(--su-text-muted); background: var(--su-surface-muted); padding: .25em .9em; border-radius: 999px; }

/* 체크리스트 */
.su-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; font-size: var(--su-fs-body); }
.su-checklist li { display: flex; align-items: flex-start; gap: .65em; color: var(--su-text-strong); }
.su-checklist li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; margin-top: calc((1em * var(--su-lh-body) - 1.35em) / 2);
  border-radius: 50%; background: var(--su-primary); color: var(--su-on-primary); font-size: .85em; font-weight: var(--su-w-bold); line-height: 1; }
.su-checklist li.is-off { color: var(--su-text-muted); }
.su-checklist li.is-off::before { content: ""; background: transparent; box-shadow: inset 0 0 0 .12em var(--su-text-faint); }
.su-checklist--card li { background: var(--su-surface); border-radius: var(--su-radius-sm); padding: .8em 1em; box-shadow: var(--su-shadow); }

/* 단계 STEP 1 — 2 — 3 (연결선은 연회색 파선) */
.su-steps { --cols: 3; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--su-gap); counter-reset: su-step; font-size: var(--su-fs-body); }
.su-step { position: relative; display: flex; flex-direction: column; gap: .45em; counter-increment: su-step; }
.su-step__label { position: relative; z-index: 1; width: max-content; padding: .4em 1em; border-radius: 999px; background: var(--su-primary-soft); color: var(--su-primary);
  font: var(--su-w-bold) var(--su-fs-caption)/1.1 var(--su-font-en); letter-spacing: .04em; }
.su-step__label:empty::before { content: "STEP " counter(su-step); }
.su-step.is-key .su-step__label { background: var(--su-primary); color: var(--su-on-primary); }
.su-step:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--su-fs-caption) * .55 + .4em); left: calc(5.2em + .5em); right: calc(var(--su-gap) * -1 + .5em); border-top: 2px dashed var(--su-line); }
.su-step__title { margin: .3em 0 0; font-size: var(--su-fs-subtitle); font-weight: var(--su-w-bold); color: var(--su-text-strong); line-height: var(--su-lh-title); }
.su-step__desc { margin: 0; color: var(--su-text-muted); }
.su-steps--card .su-step { background: var(--su-surface); border-radius: var(--su-radius); padding: calc(var(--su-pad) * .45); box-shadow: var(--su-shadow); }
.su-steps--card .su-step:not(:last-child)::after { display: none; }

/* 인용 */
.su-quote { position: relative; margin: 0; padding: 0 0 0 1.1em; border-left: .22em solid var(--su-primary); font-size: var(--su-fs-subtitle); }
.su-quote p { margin: 0; color: var(--su-text-strong); font-weight: var(--su-w-semibold); line-height: var(--su-lh-title); letter-spacing: var(--su-tr-title); }
.su-quote cite, .su-quote footer { display: block; margin-top: .8em; font-style: normal; font-size: var(--su-fs-caption); color: var(--su-text-muted); font-weight: var(--su-w-regular); }
.su-quote--mark { border: 0; padding: 0; text-align: center; }
.su-quote--mark::before { content: "“"; display: block; height: .55em; margin-bottom: .1em; font: var(--su-w-bold) 3em/1 var(--su-font-en); color: var(--su-primary); }

/* 진행바: 값을 바꾸면 부드럽게 */
.su-progress > i { transition: width var(--su-dur-slow, 640ms) var(--su-ease-out, ease); }

@media (max-width: 720px) {
  .su-steps { grid-template-columns: 1fr; }
  .su-step:not(:last-child)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .su-tabs__ind, .su-accordion::details-content, .su-modal, .su-modal::backdrop, .su-switch input::after, .su-stack-cards > * { transition: none !important; }
  .su-toast, .su-tabs__panel, .su-dropdown__menu { animation: none !important; }
}


/* ───────────────────────── 스타일: lilac (.su-lx-*) ─────────────────────────
   <html data-su-style="lilac"> 로 켠다. 기존 .su-* 는 토큰만 바뀌어 그대로 따라오고,
   아래는 이 스타일에서만 쓰는 조각들이다.
   원칙
   · 글자는 검정이 아니라 잉크 퍼플(text-strong). 본문은 한 단계 옅게.
   · 바탕은 라일락 기가 도는 흰 톤 + 아주 옅은 빛 번짐(.su-lx-ambient). 순백 카드가 그 위에 뜬다.
   · 카드: 큰 둥글기(20~28) + 선 1px + 길고 옅은 그림자. 떠 있지만 무겁지 않게.
   · 섹션 머리는 "번호 · 단계 · 설명" 한 줄(.su-lx-eyebrow). 제목은 짧게, 끝에 마침표.
   · 강조는 두 가지뿐 — 포인트 색 글자(.su-key), 연한 라일락 칩(.su-lx-mark).
   · 큰 색면은 페이지 끝 CTA(.su-lx-night) 한 번.
─────────────────────────────────────────────────────────────────────────── */

[data-su-style="lilac"] .su-btn { border-radius: 999px; }
[data-su-style="lilac"] .su-card { border: 1px solid var(--su-lx-hair); }

/* ── 바탕: 라일락 빛 번짐 + 흐린 잎 그림자(순수 CSS) ── */
.su-lx-ambient { position: relative; isolation: isolate; overflow: hidden; }
.su-lx-ambient::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 88% 12%, color-mix(in srgb, var(--su-lx-soft) 26%, transparent), transparent 70%),
    radial-gradient(35% 45% at 8% 88%, color-mix(in srgb, var(--su-lx-soft) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--su-surface) 0%, var(--su-bg) 100%);
}
.su-lx-ambient--leaf::after {  /* 창밖 나뭇잎 그림자 느낌: 흐린 타원 몇 개 */
  content: ""; position: absolute; z-index: -1; pointer-events: none; top: -8%; right: -6%; width: 55%; aspect-ratio: 1.3;
  background:
    radial-gradient(18% 11% at 30% 30%, color-mix(in srgb, var(--su-lx-deep) 22%, transparent), transparent 70%),
    radial-gradient(14% 9% at 55% 22%, color-mix(in srgb, var(--su-lx-deep) 18%, transparent), transparent 70%),
    radial-gradient(16% 10% at 48% 50%, color-mix(in srgb, var(--su-lx-deep) 20%, transparent), transparent 70%),
    radial-gradient(12% 8% at 74% 40%, color-mix(in srgb, var(--su-lx-deep) 16%, transparent), transparent 70%),
    radial-gradient(15% 9% at 70% 70%, color-mix(in srgb, var(--su-lx-deep) 14%, transparent), transparent 70%);
  filter: blur(18px); transform: rotate(-18deg); opacity: .7;
}

/* ── 섹션 머리: 01 진단 · 막힌 지점 ── */
.su-lx-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; margin: 0;
  font-size: var(--su-fs-label); color: var(--su-text-muted); letter-spacing: var(--su-tr-label); }
.su-lx-eyebrow b { color: var(--su-text-strong); font-weight: var(--su-w-bold); }
.su-lx-eyebrow__n { font-family: var(--su-font-en); color: var(--su-primary); font-weight: var(--su-w-semibold); }
.su-lx-eyebrow b + span::before { content: "·"; margin-right: .5em; color: var(--su-text-faint); }
.su-lx-eyebrow--en { font-family: var(--su-font-en); text-transform: uppercase; letter-spacing: .18em; color: var(--su-primary); font-weight: var(--su-w-semibold); }
.su-lx-eyebrow--en::after { content: ""; width: 3em; height: 1px; background: var(--su-line); }
.su-lx-head { display: flex; flex-direction: column; gap: .6em; margin-bottom: calc(var(--su-gap) * 2.5); }
.su-lx-head > .su-title { margin-top: .2em; }
.su-lx-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--su-gap); flex-wrap: wrap; }
.su-lx-head--center { align-items: center; text-align: center; }

/* 히어로 제목: 옅은 문장 + 진한 결론 한 줄 */
.su-lx-hero-title { margin: 0; font-size: var(--su-fs-display); line-height: 1.22; letter-spacing: var(--su-tr-display);
  font-weight: var(--su-w-regular); color: color-mix(in srgb, var(--su-text-strong) 55%, var(--su-bg)); }
.su-lx-hero-title strong { display: block; font-weight: var(--su-w-bold); color: var(--su-primary); }
.su-lx-hero-title strong.is-ink { color: var(--su-text-strong); }

/* 가운데 두 줄 선언: 첫 줄 잉크, 둘째 줄 포인트 */
.su-lx-statement { margin: 0; text-align: center; font-size: var(--su-fs-subtitle); line-height: 1.7; color: var(--su-text-strong); }
.su-lx-statement > span { display: block; color: var(--su-primary); }
.su-lx-statement--bold > span { font-weight: var(--su-w-bold); }

/* ── 버튼: 그라데이션 알약 + 빛 ── */
.su-lx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; border: 0; cursor: pointer; text-decoration: none;
  padding: 1em 1.9em; border-radius: 999px; font: inherit; font-weight: var(--su-w-semibold); color: #fff;
  background: var(--su-lx-grad); box-shadow: var(--su-lx-glow);
  transition: transform .28s var(--su-lx-ease), box-shadow .28s var(--su-lx-ease); }
.su-lx-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px color-mix(in srgb, var(--su-primary) 70%, transparent); }
.su-lx-btn__arrow { transition: transform .28s var(--su-lx-ease); }
.su-lx-btn:hover .su-lx-btn__arrow { transform: translate(2px, -2px); }
.su-lx-btn--sm { padding: .62em 1.2em; font-size: var(--su-fs-label); box-shadow: none; }
.su-lx-btn--ghost { background: var(--su-lx-glass); color: var(--su-text-strong); box-shadow: inset 0 0 0 1px var(--su-line); backdrop-filter: blur(12px); }
.su-lx-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--su-primary-mid); }
.su-lx-link { display: inline-flex; gap: .4em; align-items: center; color: var(--su-primary); font-weight: var(--su-w-semibold);
  font-size: var(--su-fs-label); text-decoration: none; border-bottom: 1px solid var(--su-primary-mid); padding-bottom: .15em; }
.su-lx-link--plain { border: 0; }

/* ── 흐름 칩: 진찰 · 진단 · 소견 (한 줄 알약 안에 단계) ── */
.su-lx-flow { display: inline-flex; align-self: flex-start; align-items: center; flex-wrap: wrap; gap: .2em; padding: .45em .6em; margin: 0; list-style: none;
  border-radius: var(--su-radius-sm); background: var(--su-surface); box-shadow: var(--su-shadow); border: 1px solid var(--su-lx-hair);
  font-size: var(--su-fs-label); color: var(--su-text); }
.su-lx-flow li { padding: .25em .7em; border-radius: 8px; }
.su-lx-flow li + li::before { content: "·"; margin: 0 .7em 0 -.7em; color: var(--su-text-faint); }
.su-lx-flow li.is-on { color: var(--su-primary); font-weight: var(--su-w-semibold); }

/* 작은 상태 점 라벨(히어로 윗줄) */
.su-lx-dot { display: inline-flex; align-items: center; gap: .55em; font-size: var(--su-fs-label); color: var(--su-text-muted); margin: 0; }
.su-lx-dot::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: var(--su-primary);
  box-shadow: 0 0 0 .3em color-mix(in srgb, var(--su-primary) 16%, transparent); }

/* 연한 라일락 강조 칩(문장 속 숫자·키워드) */
.su-lx-mark { display: inline-block; padding: .05em .45em; border-radius: .35em; background: var(--su-lx-mist); color: var(--su-primary); font-weight: var(--su-w-bold); }
/* 작은 표 속 태그 */
.su-lx-tag { display: inline-flex; align-items: center; padding: .15em .6em; border-radius: 999px; font-size: .78em; font-weight: var(--su-w-semibold);
  background: var(--su-lx-mist); color: var(--su-primary); vertical-align: middle; }

/* ── 카드 ── */
.su-lx-card { position: relative; background: var(--su-surface); border: 1px solid var(--su-lx-hair); border-radius: var(--su-radius-lg, var(--su-radius));
  box-shadow: var(--su-shadow); padding: calc(var(--su-pad) * 1.25); }
.su-lx-card--lift { transition: transform .28s var(--su-lx-ease), box-shadow .28s var(--su-lx-ease); }
.su-lx-card--lift:hover { transform: translateY(-4px); box-shadow: var(--su-shadow), 0 30px 60px -30px color-mix(in srgb, var(--su-primary) 40%, transparent); }
.su-lx-card--glass { background: var(--su-lx-glass); border-color: var(--su-lx-glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.su-lx-card__label { display: flex; gap: .5em; font-size: var(--su-fs-caption); color: var(--su-text-muted); margin: 0 0 1em; }
.su-lx-card__label b { color: var(--su-text-strong); }

/* 서비스 카드: 제목 · 설명 · 항목(가운뎃점) · 자세히 보기 */
.su-lx-service { display: flex; flex-direction: column; gap: .8em; }
.su-lx-service h3 { margin: 0; font-size: var(--su-fs-subtitle); color: var(--su-text-strong); letter-spacing: var(--su-tr-title); }
.su-lx-service p { margin: 0; color: var(--su-text-muted); }
.su-lx-items { display: flex; flex-wrap: wrap; gap: .3em 0; margin: 0; padding: 0; list-style: none; font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-lx-items li + li::before { content: "·"; margin: 0 .55em; color: var(--su-text-faint); }
.su-lx-items li.is-on { color: var(--su-primary); text-decoration: underline; text-underline-offset: .25em; }
.su-lx-service .su-lx-link { margin-top: auto; padding-top: .8em; align-self: flex-start; }

/* ── 세그먼트 탭: 회색 트랙 위에 흰 알약이 떠 있는 형태 ── */
.su-lx-seg { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: .3em; padding: .35em;
  border-radius: calc(var(--su-radius-sm) + .35em); background: var(--su-surface-muted); border: 1px solid var(--su-lx-hair); }
.su-lx-seg button { position: relative; display: flex; align-items: baseline; justify-content: center; gap: .6em; border: 0; background: transparent; cursor: pointer;
  padding: .75em .8em; border-radius: var(--su-radius-sm); font: inherit; font-weight: var(--su-w-semibold); color: var(--su-text-strong);
  transition: background .28s var(--su-lx-ease), box-shadow .28s var(--su-lx-ease); }
.su-lx-seg button small { font-size: var(--su-fs-caption); font-weight: var(--su-w-regular); color: var(--su-text-muted); }
.su-lx-seg button i { font-style: normal; font-family: var(--su-font-en); font-size: var(--su-fs-caption); color: var(--su-text-muted); font-weight: var(--su-w-regular); }
.su-lx-seg button[aria-selected="true"] { background: var(--su-surface); color: var(--su-primary); box-shadow: 0 6px 18px -8px rgba(35, 31, 77, .28);
  outline: 1px solid var(--su-primary-mid); }
.su-lx-seg button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -.95em; translate: -50% 0;
  border: .35em solid transparent; border-top-color: var(--su-primary); }
@media (max-width: 720px) { .su-lx-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .su-lx-seg button[aria-selected="true"]::after { display: none; } }

/* ── 진단서 표: 라벨 + 작은 태그 | 설명 (가로선만) ── */
.su-lx-sheet { width: 100%; border-collapse: collapse; font-size: var(--su-fs-label); }
.su-lx-sheet th, .su-lx-sheet td { text-align: left; vertical-align: top; padding: .95em 0; border-bottom: 1px solid var(--su-line); }
.su-lx-sheet tr:first-child > * { border-top: 1px solid var(--su-line); }
.su-lx-sheet th { width: 40%; color: var(--su-text-strong); font-weight: var(--su-w-bold); padding-right: 1em; }
.su-lx-sheet th .su-lx-tag { margin-left: .5em; }
.su-lx-sheet td { color: var(--su-text-muted); }
.su-lx-sheet tr.is-key th { color: var(--su-primary); }

/* ── 단계 진행: 위 막대가 차오르는 4단 + 되돌아오는 선 ── */
.su-lx-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--su-gap); margin: 0; padding: 0; list-style: none; }
.su-lx-steps li { position: relative; padding-top: 1.1em; border-top: 2px solid var(--su-line); }
.su-lx-steps li::before { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: var(--p, 60%); background: var(--su-lx-grad); }
.su-lx-steps .su-lx-steps__k { display: flex; gap: .55em; margin: 0 0 1.2em; font-size: var(--su-fs-caption); font-weight: var(--su-w-bold); color: var(--su-primary); }
.su-lx-steps .su-lx-steps__k i { font-style: normal; font-family: var(--su-font-en); font-weight: var(--su-w-regular); }
.su-lx-steps h4 { margin: 0 0 .5em; color: var(--su-text-strong); font-size: var(--su-fs-body); }
.su-lx-steps p { margin: 0; font-size: var(--su-fs-label); color: var(--su-text-muted); }
.su-lx-loop { position: relative; margin: calc(var(--su-gap) * 1.2) 12% 0; height: 2.2em; border: 1px solid var(--su-line); border-top: 0;
  border-radius: 0 0 var(--su-radius) var(--su-radius); }
.su-lx-loop + p { text-align: center; font-size: var(--su-fs-caption); color: var(--su-text-muted); margin: 1.2em 0 0; }
@media (max-width: 720px) { .su-lx-steps { grid-template-columns: 1fr 1fr; } .su-lx-loop { display: none; } }

/* ── 인용: 큰 따옴표 + 강조 칩 · 오른쪽 메모 ── */
.su-lx-quote { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2em 1.6em; align-items: start; margin: 0; }
.su-lx-quote::before { content: "\201C"; font: 700 3.4em/0.8 Georgia, serif; color: var(--su-lx-soft); opacity: .6; }
.su-lx-quote blockquote { margin: 0; font-size: var(--su-fs-subtitle); line-height: 1.75; font-weight: var(--su-w-bold); color: var(--su-text-strong); }
.su-lx-quote aside { display: flex; gap: .9em; align-items: flex-start; max-width: 17em; padding-left: 1.4em; border-left: 1px solid var(--su-line);
  font-size: var(--su-fs-caption); color: var(--su-text-muted); }
@media (max-width: 720px) { .su-lx-quote { grid-template-columns: auto 1fr; } .su-lx-quote aside { grid-column: 1 / -1; } }

/* 작은 아이콘 원(라일락) */
.su-lx-ico { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--su-lx-mist); color: var(--su-primary); }
.su-lx-ico svg { width: 50%; height: 50%; }

/* ── 전후 숫자: 2 → 8.8 ── */
.su-lx-metric { display: flex; flex-direction: column; gap: .4em; }
.su-lx-metric__v { display: flex; align-items: baseline; gap: .3em; margin: 0; font-size: calc(var(--su-fs-display) * 1.05); line-height: 1; font-weight: 800;
  letter-spacing: var(--su-tr-display); color: var(--su-text-strong); }
.su-lx-metric__v { flex-wrap: wrap; }
@media (max-width: 720px) { .su-lx-metric__v { font-size: calc(var(--su-fs-display) * .78); } }
.su-lx-metric__v .su-lx-metric__arrow { color: var(--su-primary); font-weight: var(--su-w-regular); font-size: .7em; }
.su-lx-metric__v small { font-size: .55em; font-weight: var(--su-w-bold); }
.su-lx-metric > p:not(.su-lx-metric__v) { margin: 0; font-size: var(--su-fs-subtitle); font-weight: var(--su-w-bold); color: var(--su-text-strong); }
.su-lx-metric p b { color: var(--su-primary); font-size: 1.3em; }

/* ── 경로 카드: 가로로 이어지는 이력(사이 화살표) ── */
.su-lx-path { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: calc(var(--su-gap) * 1.6); margin: 0; padding: 0; list-style: none; }
.su-lx-path li { position: relative; padding: 1.3em 1.4em; border-radius: var(--su-radius-sm); background: var(--su-surface); border: 1px solid var(--su-line); }
.su-lx-path li + li::before { content: "›"; position: absolute; left: calc(var(--su-gap) * -1.05); top: 50%; translate: -50% -50%; color: var(--su-text-faint); font-size: 1.3em; }
.su-lx-path time { display: block; font-family: var(--su-font-en); font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-lx-path b { display: block; margin: .6em 0 .35em; color: var(--su-text-strong); }
.su-lx-path p { margin: 0; font-size: var(--su-fs-caption); color: var(--su-text-muted); }
@media (max-width: 720px) { .su-lx-path { grid-template-columns: 1fr; gap: var(--su-gap); } .su-lx-path li + li::before { display: none; } }

/* ── 사람 카드(사진 위 · 이름 아래) ── */
.su-lx-person { overflow: hidden; padding: 0; }
.su-lx-person__photo { aspect-ratio: 4 / 4.2; background: linear-gradient(160deg, var(--su-lx-mist), color-mix(in srgb, var(--su-lx-soft) 40%, var(--su-surface))); display: grid; place-items: end center; }
.su-lx-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.su-lx-person__body { padding: 1.2em 1.4em 1.5em; }
.su-lx-person__body b { color: var(--su-text-strong); font-size: var(--su-fs-subtitle); }
.su-lx-person__body small { display: block; color: var(--su-text-muted); margin: .2em 0 .9em; font-size: var(--su-fs-caption); }
.su-lx-person__body p { margin: 0; font-size: var(--su-fs-caption); color: var(--su-text); }

/* ── 로고 타일 벽 ── */
.su-lx-logos { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--su-gap); margin: 0; padding: 0; list-style: none; }
.su-lx-logos li { display: grid; place-items: center; min-height: 5.2em; padding: 1em; border-radius: var(--su-radius-sm); background: var(--su-surface);
  box-shadow: var(--su-shadow); border: 1px solid var(--su-lx-hair); color: var(--su-text-strong); font-weight: 800; font-family: var(--su-font-en); letter-spacing: -.02em; }
.su-lx-logos li:nth-child(3n+2) { font-family: var(--su-font-serif); font-weight: 600; }
@media (max-width: 720px) { .su-lx-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 글 카드: 흑백 사진 위 유리 라벨 ── */
.su-lx-post { display: flex; flex-direction: column; overflow: hidden; padding: 0; text-decoration: none; color: inherit; }
.su-lx-post__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--su-text-strong) 12%, var(--su-surface)), color-mix(in srgb, var(--su-text-strong) 28%, var(--su-surface))); }
.su-lx-post__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .6s var(--su-lx-ease); }
.su-lx-post:hover .su-lx-post__media img { transform: scale(1.04); }
.su-lx-post__glass { position: absolute; left: 7%; bottom: 10%; max-width: 70%; padding: .9em 1.1em; border-radius: var(--su-radius-sm);
  background: var(--su-lx-glass); border: 1px solid var(--su-lx-glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-weight: var(--su-w-bold); color: var(--su-text-strong); line-height: 1.4; }
.su-lx-post__glass small { display: block; margin-bottom: .5em; font: 600 .62em/1 var(--su-font-en); letter-spacing: .14em; color: var(--su-primary); }
.su-lx-post__body { display: flex; flex-direction: column; gap: .7em; padding: 1.3em 1.4em 1.5em; }
.su-lx-post__meta { display: flex; align-items: center; gap: .6em; font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-lx-post__meta b { color: var(--su-text-strong); font-weight: var(--su-w-semibold); }
.su-lx-post__body h3 { margin: 0; font-size: var(--su-fs-body); color: var(--su-text-strong); line-height: 1.45; }
.su-lx-post__body p { margin: 0; font-size: var(--su-fs-caption); color: var(--su-text-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.su-lx-chips { display: flex; flex-wrap: wrap; gap: .4em; margin: 0; padding: 0; list-style: none; }
.su-lx-chips li { padding: .3em .8em; border-radius: 999px; background: var(--su-surface-muted); font-size: var(--su-fs-caption); color: var(--su-text-muted); }

/* ── 머리글: 유리 띠 + 오른쪽 알약 버튼 ── */
.su-lx-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: calc(var(--su-gap) * 2);
  padding: .8em max(var(--su-pad), calc((100% - 1140px) / 2)); background: var(--su-lx-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--su-lx-hair); }
.su-lx-header__logo { display: flex; align-items: center; gap: .55em; font: 800 var(--su-fs-label)/1 var(--su-font-en); letter-spacing: .16em; color: var(--su-text-strong); text-decoration: none; }
.su-lx-header nav { display: flex; gap: 1.8em; margin-left: auto; font-size: var(--su-fs-label); }
.su-lx-header nav a { position: relative; color: var(--su-text-muted); text-decoration: none; padding: .3em 0; }
.su-lx-header nav a[aria-current] { color: var(--su-text-strong); font-weight: var(--su-w-semibold); }
.su-lx-header nav a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.3em; height: 2px; border-radius: 2px; background: var(--su-primary); }
@media (max-width: 860px) { .su-lx-header nav { display: none; } .su-lx-header .su-lx-btn { margin-left: auto; } }

/* ── 밤 보라 CTA 구역(페이지에 한 번) ── */
.su-lx-night { position: relative; isolation: isolate; overflow: hidden; color: #E6E1F5;
  --su-text-strong: #FFFFFF; --su-text: #E6E1F5; --su-text-muted: #B8AFD8; --su-text-faint: #6F66A0; --su-line: rgba(255, 255, 255, .14);
  background: radial-gradient(60% 70% at 30% 20%, color-mix(in srgb, var(--su-primary) 55%, transparent), transparent 70%),
              radial-gradient(50% 60% at 90% 90%, color-mix(in srgb, var(--su-lx-soft) 30%, transparent), transparent 70%),
              var(--su-lx-night); }
.su-lx-night .su-lx-eyebrow__n, .su-lx-night .su-key { color: var(--su-lx-soft); }
.su-lx-night .su-lx-card { color: var(--su-text); }
/* 밤 구역 안의 흰 카드는 원래 색으로 되돌림 */
.su-lx-night .su-lx-card:not(.su-lx-card--glass) { --su-text-strong: #231F4D; --su-text: #3D3862; --su-text-muted: #6E6A8A; --su-text-faint: #B9B4CC; --su-line: #E6E3EE;
  --su-surface: #FFFFFF; --su-surface-muted: #F3F0F9; --su-primary: #6D4EC4; --su-lx-mist: #EDE7F6; --su-lx-hair: rgba(35, 31, 77, .08);
  --su-primary-mid: color-mix(in srgb, var(--su-primary) 60%, var(--su-surface)); }
.su-lx-contact { display: grid; grid-template-columns: auto 1fr; gap: .6em 1.6em; margin: 0; font-size: var(--su-fs-label); }
.su-lx-contact dt { color: var(--su-text-muted); } .su-lx-contact dd { margin: 0; color: var(--su-text-strong); font-weight: var(--su-w-semibold); }

/* ── 폼: 번호 붙은 묶음 + 알약 선택 칩 ── */
.su-lx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--su-gap) * 2.4); }
.su-lx-form > fieldset { margin: 0; padding: 1.4em 0; border: 0; border-bottom: 1px solid var(--su-line); min-width: 0; }
.su-lx-form legend { display: flex; align-items: center; gap: .6em; padding: 0; margin-bottom: 1.2em; font-weight: var(--su-w-bold); color: var(--su-text-strong); }
.su-lx-form legend i { font-style: normal; font-family: var(--su-font-en); color: var(--su-primary); }
.su-lx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.su-lx-fields label { display: flex; flex-direction: column; gap: .45em; font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-lx-fields label.is-wide { grid-column: 1 / -1; }
.su-lx-input { width: 100%; padding: .85em 1.1em; border: 1px solid var(--su-line); border-radius: 999px; background: var(--su-surface); font: inherit;
  font-size: var(--su-fs-label); color: var(--su-text-strong); outline: none; transition: border-color .15s, box-shadow .15s; }
textarea.su-lx-input { border-radius: var(--su-radius-sm); min-height: 7em; resize: vertical; }
.su-lx-input::placeholder { color: var(--su-text-faint); }
.su-lx-input:focus { border-color: var(--su-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--su-primary) 14%, transparent); }
.su-lx-pick { display: flex; flex-wrap: wrap; gap: .5em; }
.su-lx-pick label { position: relative; cursor: pointer; }
.su-lx-pick input { position: absolute; opacity: 0; pointer-events: none; }
.su-lx-pick span { display: inline-block; padding: .55em 1.1em; border: 1px solid var(--su-line); border-radius: 999px; font-size: var(--su-fs-caption);
  color: var(--su-text); background: var(--su-surface); transition: all .15s; }
.su-lx-pick input:checked + span { border-color: var(--su-primary); background: var(--su-lx-mist); color: var(--su-primary); font-weight: var(--su-w-semibold); }
.su-lx-pick input:focus-visible + span { outline: 2px solid var(--su-primary); outline-offset: 2px; }
@media (max-width: 860px) { .su-lx-form { grid-template-columns: 1fr; } }

/* ── 로고 모노그램(브랜드 자리) ── */
.su-lx-mono { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.su-lx-mono::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: color-mix(in srgb, var(--su-lx-soft) 45%, transparent); filter: blur(40px); }
.su-lx-mono span { position: relative; font: 400 clamp(5rem, 16vw, 13rem)/1 var(--su-font-serif); letter-spacing: -.06em; color: var(--su-text-strong); }
.su-lx-mono span i { font-style: normal; color: var(--su-primary); }

/* ── 캔버스(카드뉴스·슬라이드)에 스타일 적용 시 ── */
[data-su-style="lilac"] .su-canvas, .su-canvas[data-su-style="lilac"] { --su-radius-lg: calc(var(--su-radius) * 1.25); }
[data-su-style="lilac"] .su-canvas:not(.su-canvas--primary, .su-canvas--dark, .su-lx-night),
.su-canvas[data-su-style="lilac"]:not(.su-canvas--primary, .su-canvas--dark, .su-lx-night) {
  background: radial-gradient(45% 40% at 90% 8%, color-mix(in srgb, var(--su-lx-soft) 24%, transparent), transparent 70%),
              radial-gradient(40% 35% at 5% 95%, color-mix(in srgb, var(--su-lx-soft) 14%, transparent), transparent 70%), var(--su-bg); }
.su-canvas.su-lx-night { background: radial-gradient(60% 55% at 25% 15%, color-mix(in srgb, var(--su-primary) 55%, transparent), transparent 70%),
  radial-gradient(50% 50% at 95% 95%, color-mix(in srgb, var(--su-lx-soft) 30%, transparent), transparent 70%), var(--su-lx-night); }


/* ───────────────────────── 스타일: navy (.su-nv-*) ─────────────────────────
   <html data-su-style="navy">. 거의 검은 남색 바탕 + 선명한 파랑 하나.
   원칙
   · 제목은 크고 흰색, 굵게. 파랑은 제목 속 한 단어(.su-nv-hi)나 형광 상자(.su-nv-hl) 한 곳.
   · 카드는 바탕보다 한 톤 밝은 면 + 아주 옅은 흰 선. 그림자 대신 선으로 나눈다.
   · 사람 말투의 말풍선(.su-nv-chat)과 그림 카드(.su-nv-illo)로 딱딱함을 푼다.
   · 버튼은 네모에 가까운 8px. 파랑 채움 하나 + 선 버튼.
   · 큰 파랑 면(.su-nv-band)은 끝 CTA 한 번.
─────────────────────────────────────────────────────────────────────────── */

/* 스타일 공통: 체크 표시는 글자(✓) 대신 선 아이콘 — 글꼴마다 모양이 달라지지 않게. mask 로 색은 currentColor/배경색을 따른다 */
:root {
  --su-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  --su-check-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
}

[data-su-style="navy"] .su-card { border: 1px solid var(--su-nv-hair); }

.su-nv-kicker { margin: 0; font-size: var(--su-fs-caption); color: var(--su-text-muted); letter-spacing: .02em; }
.su-nv-kicker--en { font-family: var(--su-font-en); text-transform: uppercase; letter-spacing: .14em; }
.su-nv-head { display: flex; flex-direction: column; gap: .7em; margin-bottom: calc(var(--su-gap) * 2.5); }
.su-nv-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--su-gap); }
.su-nv-title { margin: 0; font-size: calc(var(--su-fs-title) * 1.15); line-height: 1.3; letter-spacing: var(--su-tr-title); color: var(--su-text-strong); font-weight: 800; }
.su-nv-title .is-soft { color: var(--su-text-muted); font-weight: 700; }

/* 히어로 제목: 아주 크게, 파랑 단어 하나. .su-nv-rotate 는 단어 돌려 보여 주기 */
.su-nv-hero-title { margin: 0; font-size: calc(var(--su-fs-display) * 1.12); line-height: 1.18; letter-spacing: var(--su-tr-display); font-weight: 800; color: var(--su-text-strong); }
.su-nv-hi { color: var(--su-primary); }
.su-nv-rotate { display: inline-grid; vertical-align: bottom; }
.su-nv-rotate > span { grid-area: 1 / 1; color: var(--su-primary); opacity: 0; animation: su-nv-rot calc(var(--n, 4) * 2.2s) infinite; }
.su-nv-rotate > span:nth-child(2) { animation-delay: 2.2s; } .su-nv-rotate > span:nth-child(3) { animation-delay: 4.4s; } .su-nv-rotate > span:nth-child(4) { animation-delay: 6.6s; }
@keyframes su-nv-rot { 0% { opacity: 0; transform: translateY(.3em); } 4%, 22% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: translateY(-.3em); } }
@media (prefers-reduced-motion: reduce) { .su-nv-rotate > span { animation: none; } .su-nv-rotate > span:first-child { opacity: 1; } }
.su-canvas .su-nv-rotate > span { animation: none; } .su-canvas .su-nv-rotate > span:first-child { opacity: 1; }

/* 형광 상자: 제목 속 핵심 구절 */
.su-nv-hl { padding: 0 .12em; border-radius: .12em; background: linear-gradient(transparent 12%, var(--su-nv-hl) 12%, var(--su-nv-hl) 94%, transparent 94%);
  box-shadow: inset 0 -.08em 0 var(--su-primary); color: var(--su-text-strong); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* 버튼 */
.su-nv-btn { display: inline-flex; align-items: center; gap: .5em; padding: .8em 1.3em; border: 0; border-radius: var(--su-radius-sm); cursor: pointer; text-decoration: none;
  font: inherit; font-size: var(--su-fs-label); font-weight: var(--su-w-semibold); background: var(--su-primary); color: #fff; transition: background .15s, transform .15s; }
.su-nv-btn:hover { background: var(--su-nv-deep); }
.su-nv-btn:active { transform: scale(.98); }
.su-nv-btn--line { background: transparent; color: var(--su-text-strong); box-shadow: inset 0 0 0 1px var(--su-line); }
.su-nv-btn--line:hover { background: var(--su-surface-muted); }
.su-nv-btn--lg { padding: 1em 1.6em; font-size: var(--su-fs-body); }
.su-nv-note { font-size: var(--su-fs-caption); color: var(--su-text-muted); margin: 0; }

/* 빠른 메뉴: 아이콘 + 짧은 이름 한 줄 */
.su-nv-quick { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: var(--su-gap); margin: 0; padding: calc(var(--su-gap) * 1.4) 0; list-style: none;
  border-block: 1px solid var(--su-nv-hair); }
.su-nv-quick a { display: flex; flex-direction: column; align-items: center; gap: .6em; text-decoration: none; font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-nv-quick a:hover { color: var(--su-text-strong); }
.su-nv-quick i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: var(--su-radius-sm); background: var(--su-surface-muted); color: var(--su-text); font-style: normal; }
.su-nv-quick svg { width: 50%; height: 50%; }
@media (max-width: 720px) { .su-nv-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 카드 · 그림 카드 · 말풍선 */
.su-nv-card { background: var(--su-surface); border: 1px solid var(--su-nv-hair); border-radius: var(--su-radius); padding: calc(var(--su-pad) * 1.1); }
.su-nv-illo { position: relative; overflow: hidden; min-height: 16em; border-radius: var(--su-radius); border: 1px solid var(--su-nv-hair);
  background: linear-gradient(160deg, #EDE6DA 0%, #D8CDBB 100%); color: #1C1B19; }
.su-nv-illo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.su-nv-illo figcaption { position: absolute; left: .8em; bottom: .8em; padding: .35em .8em; border-radius: 999px; background: rgba(11, 13, 16, .72); color: #fff; font-size: var(--su-fs-caption); }
.su-nv-bubble { position: absolute; padding: .7em 1em; border-radius: 1.2em; background: #fff; color: #1C1B19; border: 2px solid #1C1B19; font-size: var(--su-fs-caption); font-weight: 700; line-height: 1.35; max-width: 11em; }
.su-nv-bubble::after { content: ""; position: absolute; left: 1.4em; bottom: -.55em; width: .8em; height: .8em; background: #fff; border-right: 2px solid #1C1B19; border-bottom: 2px solid #1C1B19; transform: rotate(45deg); }

/* 고르는 목록: 번호 · 제목 · 설명, 선택된 줄은 파랑 테두리 */
.su-nv-pick { display: grid; gap: .6em; margin: 0; padding: 0; list-style: none; }
.su-nv-pick--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.su-nv-pick li > * { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr auto; gap: .2em .8em; width: 100%; cursor: pointer;
  padding: 1em 1.1em; border-radius: var(--su-radius-sm); border: 1px solid var(--su-nv-hair); background: var(--su-surface); transition: border-color .15s, background .15s; }
.su-nv-pick li > *:hover { border-color: var(--su-line); }
.su-nv-pick i { font-style: normal; font-family: var(--su-font-en); font-size: var(--su-fs-caption); color: var(--su-text-muted); grid-row: 1 / 3; padding-top: .15em; }
.su-nv-pick b { color: var(--su-text-strong); font-size: var(--su-fs-body); }
.su-nv-pick small { grid-column: 2; color: var(--su-text-muted); font-size: var(--su-fs-caption); }
.su-nv-pick em { font-style: normal; font-size: var(--su-fs-caption); color: var(--su-text-faint); grid-column: 3; grid-row: 1; }
.su-nv-pick [aria-selected="true"], .su-nv-pick .is-on { border-color: var(--su-primary); background: color-mix(in srgb, var(--su-primary) 12%, var(--su-surface)); }
.su-nv-pick [aria-selected="true"] i, .su-nv-pick .is-on i, .su-nv-pick [aria-selected="true"] em, .su-nv-pick .is-on em { color: var(--su-primary); }
@media (max-width: 720px) { .su-nv-pick--grid { grid-template-columns: 1fr; } }

/* 대화창 */
.su-nv-chat { display: flex; flex-direction: column; border-radius: var(--su-radius-lg); background: var(--su-surface); border: 1px solid var(--su-nv-hair); overflow: hidden; }
.su-nv-chat__head { display: flex; align-items: center; gap: .6em; padding: .9em 1.1em; border-bottom: 1px solid var(--su-nv-hair); font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-nv-chat__head b { color: var(--su-text-strong); }
.su-nv-chat__head::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: #22C55E; }
.su-nv-chat__body { display: flex; flex-direction: column; gap: .7em; padding: 1.1em; }
.su-nv-msg { max-width: 82%; padding: .7em .95em; border-radius: 1em 1em 1em .3em; background: var(--su-surface-muted); color: var(--su-text); font-size: var(--su-fs-caption); line-height: 1.55; margin: 0; }
.su-nv-msg small { display: block; margin-bottom: .3em; color: var(--su-text-muted); font-size: .9em; }
.su-nv-msg--me { align-self: flex-end; border-radius: 1em 1em .3em 1em; background: var(--su-primary); color: #fff; }
.su-nv-chat__input { display: flex; gap: .5em; margin: 0 1.1em 1.1em; padding: .6em .6em .6em 1em; border-radius: 999px; background: var(--su-surface-muted); color: var(--su-text-faint); font-size: var(--su-fs-caption); align-items: center; }
.su-nv-chat__input::after { content: "↑"; margin-left: auto; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--su-primary); color: #fff; }

/* 세 단계: 체크 원 + "이게 빠지면" 경고 한 줄 */
.su-nv-stages { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.su-nv-stages li { display: grid; grid-template-columns: 3em 1fr auto; gap: .3em 1em; padding: 1.4em 0; border-top: 1px solid var(--su-nv-hair); }
.su-nv-stages li > i { font-style: normal; font-family: var(--su-font-en); color: var(--su-text-faint); font-size: var(--su-fs-caption); padding-top: .3em; }
.su-nv-stages h4 { margin: 0; color: var(--su-text-strong); font-size: var(--su-fs-subtitle); }
.su-nv-stages p { grid-column: 2; margin: 0; color: var(--su-text-muted); font-size: var(--su-fs-label); }
.su-nv-stages .su-nv-stages__warn { color: var(--su-text-faint); font-size: var(--su-fs-caption); }
.su-nv-stages li::after { content: ""; grid-column: 3; grid-row: 1; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--su-primary) var(--su-check-white) center / 60% no-repeat; }
.su-nv-stages li.is-on h4, .su-nv-stages li.is-on p:first-of-type { color: var(--su-primary); }

/* 걱정 카드: 큰따옴표 속 질문 + 답 */
.su-nv-worry { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: .7em; margin: 0; padding: 0; list-style: none; }
.su-nv-worry li { padding: 1.3em; border-radius: var(--su-radius-sm); background: var(--su-surface); border: 1px solid var(--su-nv-hair); }
.su-nv-worry b { display: block; margin: .8em 0 .5em; color: var(--su-text-strong); font-size: var(--su-fs-label); }
.su-nv-worry b::before { content: "\201C"; } .su-nv-worry b::after { content: "\201D"; }
.su-nv-worry p { margin: 0; color: var(--su-text-muted); font-size: var(--su-fs-caption); line-height: 1.6; }
.su-nv-ico { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: var(--su-radius-sm); background: var(--su-surface-muted); color: var(--su-text); }
.su-nv-ico svg { width: 55%; height: 55%; }
@media (max-width: 720px) { .su-nv-worry { grid-template-columns: 1fr; } }

/* 가격표: 아이콘 · 이름 · 설명 · 기간 · 금액 */
.su-nv-price { width: 100%; border-collapse: collapse; font-size: var(--su-fs-label); }
.su-nv-price th { text-align: left; padding: .8em .6em; font-size: var(--su-fs-caption); font-weight: var(--su-w-regular); color: var(--su-text-muted); border-bottom: 1px solid var(--su-line); }
.su-nv-price td { padding: 1.05em .6em; border-bottom: 1px solid var(--su-nv-hair); color: var(--su-text-muted); vertical-align: middle; }
.su-nv-price td:first-child { color: var(--su-text-strong); font-weight: var(--su-w-semibold); white-space: nowrap; }
.su-nv-price td:first-child svg { width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-right: .7em; color: var(--su-text-muted); }
.su-nv-price td:nth-last-child(-n+2) { white-space: nowrap; color: var(--su-text); }
@media (max-width: 720px) { .su-nv-price th:nth-child(2), .su-nv-price td:nth-child(2) { display: none; } }

/* 진행 단계: 왼쪽 목록 + 오른쪽 상세 */
.su-nv-flow { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: calc(var(--su-gap) * 1.4); align-items: start; }
.su-nv-flow__count { font-size: var(--su-fs-caption); color: var(--su-text-muted); padding-bottom: .8em; border-bottom: 2px solid var(--su-primary); margin: 0 0 .8em; width: fit-content; }
.su-nv-flow ol { display: grid; gap: .3em; margin: 0; padding: 0; list-style: none; }
.su-nv-flow ol button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 2em 1fr; gap: 0 .6em; width: 100%; cursor: pointer; padding: .8em .9em; border-radius: var(--su-radius-sm); border: 1px solid transparent; }
.su-nv-flow ol button i { font-style: normal; font-family: var(--su-font-en); color: var(--su-text-faint); grid-row: 1 / 3; }
.su-nv-flow ol button b { color: var(--su-text); font-weight: var(--su-w-semibold); font-size: var(--su-fs-label); }
.su-nv-flow ol button small { color: var(--su-text-faint); font-size: var(--su-fs-caption); }
.su-nv-flow ol button[aria-selected="true"] { border-color: var(--su-primary); background: color-mix(in srgb, var(--su-primary) 10%, transparent); }
.su-nv-flow ol button[aria-selected="true"] i, .su-nv-flow ol button[aria-selected="true"] b { color: var(--su-primary); }
.su-nv-flow__panel { overflow: hidden; border-radius: var(--su-radius); background: var(--su-surface); border: 1px solid var(--su-nv-hair); }
.su-nv-flow__panel .su-nv-illo { border: 0; border-radius: 0; min-height: 13em; }
.su-nv-flow__body { padding: 1.3em 1.4em 1.5em; }
.su-nv-flow__body small { font-family: var(--su-font-en); color: var(--su-primary); font-size: var(--su-fs-caption); letter-spacing: .1em; }
.su-nv-flow__body h3 { margin: .3em 0 .2em; color: var(--su-text-strong); font-size: var(--su-fs-subtitle); }
@media (max-width: 860px) { .su-nv-flow { grid-template-columns: 1fr; } }

/* 숫자 근거 목록: 아이콘 · 큰 값 · 설명 */
.su-nv-facts { display: grid; margin: 0; padding: 0; list-style: none; }
.su-nv-facts li { display: grid; grid-template-columns: 2em 7em 1fr; gap: 1em; align-items: center; padding: 1.15em 0; border-bottom: 1px solid var(--su-nv-hair); }
.su-nv-facts li > svg { width: 1.2em; height: 1.2em; color: var(--su-primary); }
.su-nv-facts b { color: var(--su-text-strong); font-size: var(--su-fs-subtitle); font-weight: 800; letter-spacing: -.02em; }
.su-nv-facts p { margin: 0; font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-nv-facts p strong { display: block; color: var(--su-text); font-size: var(--su-fs-label); margin-bottom: .15em; }

/* 파랑 CTA 띠 + 폼 판 */
.su-nv-band { background: var(--su-nv-band); background-image: radial-gradient(50% 80% at 0% 0%, rgba(255,255,255,.08), transparent 70%); }
.su-nv-band .su-nv-hero-title { font-size: calc(var(--su-fs-display) * .95); }
.su-nv-formcard { padding: 1.5em; border-radius: var(--su-radius); background: rgba(11, 13, 16, .55); border: 1px solid var(--su-nv-hair); backdrop-filter: blur(8px); }
.su-nv-formcard h4 { margin: 0 0 1em; color: var(--su-text-strong); font-size: var(--su-fs-label); }
.su-nv-field { display: flex; flex-direction: column; gap: .4em; margin-bottom: .9em; font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-nv-input { padding: .75em .9em; border-radius: var(--su-radius-sm); border: 1px solid var(--su-line); background: rgba(255,255,255,.04); color: var(--su-text-strong); font: inherit; font-size: var(--su-fs-label); outline: none; }
.su-nv-input::placeholder { color: var(--su-text-faint); }
.su-nv-input:focus { border-color: var(--su-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--su-primary) 30%, transparent); }
.su-nv-formcard .su-nv-btn { width: 100%; justify-content: center; }

/* 포트폴리오 카드 */
.su-nv-work { display: flex; flex-direction: column; gap: .7em; text-decoration: none; color: inherit; }
.su-nv-work__shot { aspect-ratio: 4 / 3; border-radius: var(--su-radius-sm); overflow: hidden; border: 1px solid var(--su-nv-hair); background: linear-gradient(150deg, #1E2632, #0F141B); }
.su-nv-work__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.su-nv-work:hover .su-nv-work__shot img { transform: scale(1.04); }
.su-nv-work small { color: var(--su-text-faint); font-size: var(--su-fs-caption); }
.su-nv-work b { color: var(--su-text-strong); font-size: var(--su-fs-label); }
.su-nv-work p { margin: 0; color: var(--su-text-muted); font-size: var(--su-fs-caption); }


/* ───────────────────────── 스타일: airy (.su-ai-*) ─────────────────────────
   <html data-su-style="airy">. 밝은 회색 바탕 + 하늘·연보라 빛 번짐, 검정 알약 버튼.
   원칙
   · 섹션 머리는 가운데 정렬: 작은 파랑 라벨 → 굵은 두 줄 제목 → 회색 한 줄.
   · 주 버튼은 검정(다크에선 흰색) 알약, 보조는 흰 알약 + 선. 파랑은 아이콘·체크·링크에만.
   · 카드는 흰 면 + 1px 선 + 옅은 그림자. 제품 화면 조각(.su-ai-float)을 겹쳐 띄운다.
   · 숫자는 크게, 단위는 작게(.su-ai-stats). 비용·한계는 숨기지 않고 작은 글씨로 바로 밑에.
   · 노란 띠(.su-ai-note)는 사용자 목소리 한 줄에만.
─────────────────────────────────────────────────────────────────────────── */

[data-su-style="airy"] .su-card { border: 1px solid var(--su-line); }

.su-ai-glow { position: relative; isolation: isolate; overflow: hidden; }
.su-ai-glow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 55% at 22% 30%, var(--su-ai-sky), transparent 70%),
              radial-gradient(38% 50% at 70% 85%, var(--su-ai-lav), transparent 70%),
              radial-gradient(30% 40% at 90% 10%, color-mix(in srgb, var(--su-ai-sky) 70%, transparent), transparent 70%); opacity: .85; }

.su-ai-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7em; margin: 0 auto calc(var(--su-gap) * 2.6); max-width: 40em; }
.su-ai-head--left { align-items: flex-start; text-align: left; margin-left: 0; }
.su-ai-eyebrow { margin: 0; font-size: var(--su-fs-caption); font-weight: var(--su-w-semibold); color: var(--su-primary); }
.su-ai-title { margin: 0; font-size: calc(var(--su-fs-title) * 1.15); line-height: 1.3; letter-spacing: var(--su-tr-title); font-weight: 800; color: var(--su-text-strong); }
.su-ai-hero-title { margin: 0; font-size: calc(var(--su-fs-display) * 1.05); line-height: 1.2; letter-spacing: var(--su-tr-display); font-weight: 800; color: var(--su-text-strong); }
.su-ai-lead { margin: 0; color: var(--su-text-muted); font-size: var(--su-fs-body); }
.su-ai-fine { margin: 0; color: var(--su-text-faint); font-size: var(--su-fs-caption); }

/* 버튼 */
.su-ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .85em 1.35em; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: inherit; font-size: var(--su-fs-label); font-weight: var(--su-w-semibold); background: var(--su-ai-ink); color: var(--su-ai-on-ink); transition: transform .15s, opacity .15s; }
.su-ai-btn:hover { opacity: .88; } .su-ai-btn:active { transform: scale(.97); }
.su-ai-btn--white { background: var(--su-surface); color: var(--su-text-strong); box-shadow: inset 0 0 0 1px var(--su-line); }
.su-ai-btn--kakao { background: var(--su-ai-kakao); color: #191600; }
.su-ai-btn--sm { padding: .55em 1em; font-size: var(--su-fs-caption); }

/* 숫자 줄 */
.su-ai-stats { display: flex; flex-wrap: wrap; gap: 1.6em 2.4em; margin: 0; padding: 0; list-style: none; }
.su-ai-stats b { display: block; font-size: calc(var(--su-fs-title) * .95); font-weight: 800; letter-spacing: -.03em; color: var(--su-text-strong); line-height: 1.1; }
.su-ai-stats b small { font-size: .5em; font-weight: var(--su-w-semibold); margin-left: .1em; }
.su-ai-stats span { font-size: var(--su-fs-caption); color: var(--su-text-muted); }

/* 떠 있는 제품 조각 */
.su-ai-stage { position: relative; min-height: 22em; }
.su-ai-float { position: absolute; padding: 1em 1.1em; border-radius: var(--su-radius-sm); background: var(--su-surface); border: 1px solid var(--su-line);
  box-shadow: 0 24px 50px -24px rgba(25, 31, 40, .35); font-size: var(--su-fs-caption); color: var(--su-text); }
.su-ai-float b { color: var(--su-text-strong); }
.su-ai-shot { position: absolute; overflow: hidden; border-radius: var(--su-radius); box-shadow: 0 30px 60px -30px rgba(25, 31, 40, .45);
  background: linear-gradient(160deg, #F6C28B, #B5643A 55%, #4E3A2E); }
.su-ai-shot img { width: 100%; height: 100%; object-fit: cover; }
.su-ai-ring { display: inline-grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%;
  background: conic-gradient(var(--su-primary) calc(var(--v, 90) * 1%), var(--su-surface-muted) 0); font-weight: 800; color: var(--su-text-strong); font-size: var(--su-fs-caption); }
.su-ai-ring::before { content: attr(data-v); display: grid; place-items: center; width: 78%; height: 78%; border-radius: 50%; background: var(--su-surface); }
.su-ai-checks { display: flex; flex-wrap: wrap; gap: .3em .9em; margin: .5em 0 0; padding: 0; list-style: none; color: var(--su-text-muted); }
.su-ai-checks li::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .25em; vertical-align: -.12em;
  background: var(--su-primary); -webkit-mask: var(--su-check) center / contain no-repeat; mask: var(--su-check) center / contain no-repeat; }

/* 직접 vs 도구 비교표 */
.su-ai-vs { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--su-fs-label); background: var(--su-surface); border: 1px solid var(--su-line); border-radius: var(--su-radius); overflow: hidden; }
.su-ai-vs th, .su-ai-vs td { padding: 1em 1.1em; text-align: left; border-bottom: 1px solid var(--su-line); }
.su-ai-vs tr:last-child > * { border-bottom: 0; }
.su-ai-vs thead th { font-size: var(--su-fs-caption); color: var(--su-text-muted); font-weight: var(--su-w-regular); background: var(--su-surface-muted); }
.su-ai-vs thead th:last-child { color: var(--su-primary); font-weight: var(--su-w-bold); }
.su-ai-vs tbody th { color: var(--su-text-strong); font-weight: var(--su-w-semibold); white-space: nowrap; }
.su-ai-vs td { color: var(--su-text-muted); }
.su-ai-vs td:last-child { color: var(--su-text-strong); background: color-mix(in srgb, var(--su-primary) 6%, var(--su-surface)); }
.su-ai-vs td:last-child::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.15em;
  background: var(--su-primary); -webkit-mask: var(--su-check) center / contain no-repeat; mask: var(--su-check) center / contain no-repeat; }
@media (max-width: 720px) { .su-ai-vs th, .su-ai-vs td { padding: .8em .7em; } .su-ai-vs tbody th { white-space: normal; } }

/* 카드 · 아이콘 */
.su-ai-card { background: var(--su-surface); border: 1px solid var(--su-line); border-radius: var(--su-radius); box-shadow: var(--su-shadow); padding: calc(var(--su-pad) * 1.05); }
.su-ai-card h3 { margin: .8em 0 .4em; font-size: var(--su-fs-body); color: var(--su-text-strong); }
.su-ai-card p { margin: 0; color: var(--su-text-muted); font-size: var(--su-fs-caption); line-height: 1.65; }
.su-ai-ico { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .7em; background: color-mix(in srgb, var(--su-primary) 14%, var(--su-surface)); color: var(--su-primary); }
.su-ai-ico svg { width: 55%; height: 55%; }
.su-ai-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--su-gap); }
.su-ai-bento > * { grid-column: span 2; } .su-ai-bento > .is-wide { grid-column: span 3; } .su-ai-bento > .is-full { grid-column: 1 / -1; }
@media (max-width: 860px) { .su-ai-bento { grid-template-columns: 1fr; } .su-ai-bento > * { grid-column: auto !important; } }
.su-ai-tags { display: flex; flex-wrap: wrap; gap: .35em; margin: .9em 0 0; padding: 0; list-style: none; }
.su-ai-tags li { padding: .25em .65em; border-radius: 999px; background: color-mix(in srgb, var(--su-primary) 10%, var(--su-surface)); color: var(--su-primary); font-size: .72em; font-weight: var(--su-w-semibold); }
.su-ai-card .su-ai-tag { float: right; font-size: .72em; color: var(--su-text-faint); }

/* 3단계 카드: 위에 작은 화면, 아래 번호 원 */
.su-ai-steps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--su-gap); margin: 0; padding: 0; list-style: none; counter-reset: ai; }
.su-ai-steps li { counter-increment: ai; display: flex; flex-direction: column; gap: .5em; }
.su-ai-steps__mock { min-height: 9em; padding: 1em; border-radius: var(--su-radius); background: var(--su-surface); border: 1px solid var(--su-line); box-shadow: var(--su-shadow); font-size: var(--su-fs-caption); color: var(--su-text); }
.su-ai-steps li::before { content: counter(ai, decimal-leading-zero); order: 1; display: grid; place-items: center; width: 2em; height: 2em; margin-top: .6em; border-radius: 50%; background: var(--su-primary); color: #fff; font: 700 var(--su-fs-caption)/1 var(--su-font-en); }
.su-ai-steps h3 { order: 2; margin: 0; font-size: var(--su-fs-body); color: var(--su-text-strong); }
.su-ai-steps p { order: 3; margin: 0; font-size: var(--su-fs-caption); color: var(--su-text-muted); line-height: 1.65; }
@media (max-width: 860px) { .su-ai-steps { grid-template-columns: 1fr; } }
.su-ai-bar { height: .5em; border-radius: 999px; background: var(--su-surface-muted); margin: .45em 0; }
.su-ai-bar--key { background: color-mix(in srgb, var(--su-primary) 45%, var(--su-surface)); width: 70%; }
.su-ai-bar--s { width: 45%; }

/* 후기 · 노란 띠 */
.su-ai-review { display: flex; flex-direction: column; gap: .8em; min-height: 11em; }
.su-ai-stars { color: #F5A524; letter-spacing: .05em; font-size: var(--su-fs-caption); }
.su-ai-review p { color: var(--su-text-strong); font-size: var(--su-fs-label); font-weight: var(--su-w-semibold); line-height: 1.55; margin: 0; }
.su-ai-review footer { margin-top: auto; display: flex; justify-content: space-between; font-size: var(--su-fs-caption); color: var(--su-text-faint); }
.su-ai-review footer span:first-child { padding: .2em .6em; border-radius: 999px; background: var(--su-surface-muted); color: var(--su-text-muted); }
.su-ai-note { display: flex; justify-content: space-between; align-items: center; gap: 1em; flex-wrap: wrap; padding: 1.1em 1.3em; border-radius: var(--su-radius-sm);
  background: var(--su-ai-note); color: var(--su-text-strong); font-size: var(--su-fs-label); }
.su-ai-note b { display: block; } .su-ai-note small { color: var(--su-text-muted); font-size: var(--su-fs-caption); }

/* 요금 카드: 두 선택지 + 합계 줄 */
.su-ai-price { max-width: 34em; margin: 0 auto; text-align: center; }
.su-ai-price__opts { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin: 1.2em 0; text-align: left; }
.su-ai-price__opts > div { padding: 1em 1.1em; border-radius: var(--su-radius-sm); border: 1px solid var(--su-line); background: var(--su-surface); font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-ai-price__opts > div.is-key { border-color: color-mix(in srgb, var(--su-primary) 45%, var(--su-line)); background: color-mix(in srgb, var(--su-primary) 5%, var(--su-surface)); }
.su-ai-price__opts small { display: block; color: var(--su-text-muted); margin-bottom: .4em; }
.su-ai-price__opts b { display: block; font-size: calc(var(--su-fs-subtitle) * 1.1); color: var(--su-text-strong); letter-spacing: -.02em; margin-bottom: .4em; }
.su-ai-price__sum { padding: .8em 1em; border-radius: var(--su-radius-sm); background: color-mix(in srgb, var(--su-primary) 8%, var(--su-surface)); font-size: var(--su-fs-caption); color: var(--su-text); text-align: left; }
.su-ai-price__sum b { color: var(--su-text-strong); }
@media (max-width: 720px) { .su-ai-price__opts { grid-template-columns: 1fr; } }
.su-ai-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; margin: 1em auto 0; padding: 0; list-style: none; max-width: 34em; }
.su-ai-trust li { padding: .8em; border-radius: var(--su-radius-sm); background: var(--su-surface); border: 1px solid var(--su-line); font-size: var(--su-fs-caption); color: var(--su-text-muted); text-align: left; }
.su-ai-trust li b { display: block; color: var(--su-text-strong); margin: .3em 0 .15em; }
.su-ai-trust li::before { content: ""; display: block; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--su-primary) var(--su-check-white) center / 62% no-repeat; }
@media (max-width: 720px) { .su-ai-trust { grid-template-columns: 1fr 1fr; } }

/* 자주 묻는 질문: 카드형 details */
.su-ai-faq { display: grid; gap: .5em; max-width: 44em; margin: 0 auto; }
.su-ai-faq details { border-radius: var(--su-radius-sm); background: var(--su-surface); border: 1px solid var(--su-line); }
.su-ai-faq summary { display: flex; justify-content: space-between; gap: 1em; padding: 1em 1.2em; cursor: pointer; list-style: none; font-size: var(--su-fs-label); font-weight: var(--su-w-semibold); color: var(--su-text-strong); }
.su-ai-faq summary::-webkit-details-marker { display: none; }
.su-ai-faq summary::after { content: "⌄"; color: var(--su-text-faint); transition: transform .2s; }
.su-ai-faq details[open] summary::after { transform: rotate(180deg); }
.su-ai-faq details > div { padding: 0 1.2em 1.1em; color: var(--su-text-muted); font-size: var(--su-fs-caption); line-height: 1.7; }

/* 도구 입력 한 줄 */
.su-ai-tool { display: grid; grid-template-columns: 1fr auto; gap: 1.5em; align-items: center; }
.su-ai-tool > * { min-width: 0; }
.su-ai-tool form { display: flex; flex-wrap: wrap; gap: .5em; }
.su-ai-tool form .su-ai-input { flex: 1 1 12em; }
.su-ai-input { flex: 1; min-width: 0; padding: .8em 1.1em; border-radius: 999px; border: 1px solid var(--su-line); background: var(--su-surface); color: var(--su-text-strong); font: inherit; font-size: var(--su-fs-label); outline: none; }
.su-ai-input:focus { border-color: var(--su-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--su-primary) 18%, transparent); }
@media (max-width: 720px) { .su-ai-tool { grid-template-columns: 1fr; } }

/* 마지막 권유: 남색 그라데이션 카드 */
.su-ai-final { padding: calc(var(--su-pad) * 2.2) var(--su-pad); border-radius: var(--su-radius-lg); text-align: center; color: #fff;
  background: radial-gradient(60% 90% at 50% 120%, rgba(90, 162, 255, .55), transparent 70%), var(--su-ai-night); }
.su-ai-final h2 { margin: 0 0 .5em; font-size: calc(var(--su-fs-title) * 1.1); color: #fff; letter-spacing: var(--su-tr-title); }
.su-ai-final p { margin: 0 0 1.4em; color: rgba(255, 255, 255, .72); font-size: var(--su-fs-label); }
.su-ai-final .su-ai-btn { background: #fff; color: #191F28; }
.su-ai-final a:not(.su-ai-btn) { color: rgba(255, 255, 255, .8); }

/* 머리글 */
.su-ai-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 2em; padding: .75em max(var(--su-pad), calc((100% - 1140px) / 2));
  background: color-mix(in srgb, var(--su-bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.su-ai-header__logo { display: flex; align-items: center; gap: .45em; font: 800 var(--su-fs-body)/1 var(--su-font-en); color: var(--su-text-strong); text-decoration: none; letter-spacing: -.02em; }
.su-ai-header__logo i { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: .45em; background: var(--su-primary); color: #fff; font-style: normal; font-size: .8em; }
.su-ai-header nav { display: flex; gap: 1.8em; margin: 0 auto; font-size: var(--su-fs-label); }
.su-ai-header nav a { color: var(--su-text); text-decoration: none; } .su-ai-header nav a:hover { color: var(--su-text-strong); }
.su-ai-header__end { display: flex; align-items: center; gap: 1em; font-size: var(--su-fs-label); }
.su-ai-header__end > a:not(.su-ai-btn) { color: var(--su-text-muted); text-decoration: none; }
@media (max-width: 860px) { .su-ai-header nav, .su-ai-header__end > a:not(.su-ai-btn) { display: none; } .su-ai-header__end { margin-left: auto; } }

/* 로고 줄 */
.su-ai-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2em 2.8em; margin: 0; padding: 1.6em 0; list-style: none; border-block: 1px solid var(--su-line); }
.su-ai-logos li { display: flex; align-items: center; gap: .5em; font: 800 var(--su-fs-label)/1 var(--su-font-en); color: var(--su-text-strong); letter-spacing: -.01em; }
.su-ai-logos li small { display: block; font: 400 var(--su-fs-caption)/1.2 var(--su-font); color: var(--su-text-faint); }


/* ───────────────────────── 스타일: pop (.su-pp-*) ─────────────────────────
   <html data-su-style="pop">. 앱 화면형 — 흰 바탕, 왼쪽 메뉴, 알약 검색, 커버 격자.
   원칙
   · 화면의 색은 콘텐츠(커버·무드 카드)가 낸다. 뼈대(메뉴·칩·버튼)는 무채색.
   · 무드 카드(.su-pp-mood)는 채도 높은 그라데이션 + 흰 글자. 제목은 기능이 아니라 "순간"의 이름.
   · 커버는 정사각형, 재생 버튼은 커버 위 왼쪽 아래. 캡션은 제목(진하게) + 만든 이(회색) 두 줄.
   · 칩은 아이콘 + 한두 단어, 선택된 것만 회색 면.
   · 검정 버튼은 네모에 가까운 10px, 한 화면에 하나(로그인·구독).
─────────────────────────────────────────────────────────────────────────── */

/* 앱 뼈대 */
.su-pp-app { display: grid; grid-template-columns: 15em minmax(0, 1fr); min-height: 100vh; background: var(--su-surface); }
.su-pp-side { position: sticky; top: 0; height: 100vh; overflow: auto; padding: 1.2em .8em; border-right: 1px solid var(--su-line); background: var(--su-surface); }
.su-pp-logo { display: flex; align-items: center; gap: .45em; padding: .2em .6em 1em; font: 800 calc(var(--su-fs-body) * 1.25)/1 var(--su-font-en); letter-spacing: -.03em; color: var(--su-text-strong); text-decoration: none; }
.su-pp-logo i { font-style: normal; color: var(--su-primary); }
.su-pp-side h6 { margin: 1.4em .8em .5em; font-size: .72em; font-weight: var(--su-w-regular); color: var(--su-text-faint); letter-spacing: .12em; }
.su-pp-side a { display: flex; align-items: center; gap: .9em; padding: .7em .8em; border-radius: var(--su-radius-sm); color: var(--su-text); text-decoration: none; font-size: var(--su-fs-label); }
.su-pp-side a:hover { background: var(--su-surface-muted); }
.su-pp-side a[aria-current] { background: var(--su-surface-muted); color: var(--su-text-strong); font-weight: var(--su-w-semibold); }
.su-pp-side svg { width: 1.2em; height: 1.2em; flex: none; }
.su-pp-side a.su-pp-btn { display: inline-flex; padding: .5em .9em; background: var(--su-pp-ink); color: var(--su-pp-on-ink); font-weight: var(--su-w-semibold); }
.su-pp-side a.su-pp-btn:hover { background: var(--su-pp-ink); opacity: .85; }
.su-pp-main { min-width: 0; padding: 1em calc(var(--su-pad) * 1.1) 4em; }
@media (max-width: 860px) {
  .su-pp-app { grid-template-columns: 1fr; }
  .su-pp-side { position: fixed; z-index: 30; inset: auto 0 0 0; height: auto; display: flex; justify-content: space-around; padding: .4em; border: 0; border-top: 1px solid var(--su-line); }
  .su-pp-side > :not(nav), .su-pp-side h6, .su-pp-side nav ~ nav { display: none; }
  .su-pp-side nav { display: flex; width: 100%; justify-content: space-around; }
  .su-pp-side a { flex-direction: column; gap: .25em; font-size: .7em; padding: .5em; }
  .su-pp-main { padding: .8em var(--su-pad) 6em; }
}

/* 윗줄: 이동 · 검색 · 버튼 */
.su-pp-top { display: flex; align-items: center; gap: 1em; margin-bottom: 1.4em; }
.su-pp-nav { display: flex; gap: .2em; color: var(--su-text-muted); }
.su-pp-nav button { all: unset; cursor: pointer; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; }
.su-pp-nav button:hover { background: var(--su-surface-muted); }
.su-pp-search { flex: 1; min-width: 0; max-width: 44em; margin: 0 auto; display: flex; align-items: center; gap: .6em; padding: .75em 1.3em; border-radius: 999px;
  background: var(--su-surface); box-shadow: 0 6px 24px -10px rgba(17, 19, 24, .22), 0 0 0 1px var(--su-line); color: var(--su-text-faint); font-size: var(--su-fs-label); }
.su-pp-search input { all: unset; flex: 1; color: var(--su-text-strong); }
.su-pp-search input::placeholder { color: var(--su-text-faint); }
.su-pp-btn { display: inline-flex; align-items: center; gap: .4em; padding: .65em 1.1em; border: 0; border-radius: var(--su-radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: var(--su-fs-label); font-weight: var(--su-w-semibold); background: var(--su-pp-ink); color: var(--su-pp-on-ink); }
.su-pp-btn--ghost { background: transparent; color: var(--su-text-strong); }
.su-pp-btn--ghost:hover { background: var(--su-surface-muted); }
.su-pp-btn--white { background: #fff; color: #111318; border-radius: 999px; padding: .7em 1.3em; }
@media (max-width: 720px) { .su-pp-nav, .su-pp-top .su-pp-btn--ghost { display: none; } }

/* 칩: 아이콘 + 한두 단어, 가로 스크롤 */
.su-pp-chips { display: flex; gap: .3em; margin: 0 0 1.6em; padding: 0 0 .3em; list-style: none; overflow-x: auto; scrollbar-width: none; }
.su-pp-chips::-webkit-scrollbar { display: none; }
.su-pp-chips button { all: unset; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: .45em; padding: .6em 1em; border-radius: 999px; font-size: var(--su-fs-label); color: var(--su-text); white-space: nowrap; }
.su-pp-chips button:hover { background: var(--su-surface-muted); }
.su-pp-chips button[aria-pressed="true"] { background: var(--su-surface-muted); color: var(--su-text-strong); font-weight: var(--su-w-semibold); }
.su-pp-chips svg { width: 1em; height: 1em; }

/* 무드 카드 줄 */
.su-pp-moods { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(18em, 1fr); gap: 1em; overflow-x: auto; scrollbar-width: none; margin-bottom: 2.4em; }
.su-pp-moods::-webkit-scrollbar { display: none; }
.su-pp-mood { isolation: isolate; position: relative; display: flex; flex-direction: column; gap: .9em; min-height: 17em; padding: 1.4em; border-radius: var(--su-radius-lg); color: #fff; overflow: hidden;
  background: var(--su-pp-m1); }
.su-pp-mood--m2 { background: var(--su-pp-m2); } .su-pp-mood--m3 { background: var(--su-pp-m3); } .su-pp-mood--m4 { background: var(--su-pp-m4); } .su-pp-mood--m5 { background: var(--su-pp-m5); }
.su-pp-mood--center { justify-content: center; align-items: center; text-align: center; }
.su-pp-mood > :not(.su-pp-play) { position: relative; z-index: 3; }
/* 사진 자리(사진이 없을 때): 어두운 바탕에 번진 빛 — 사진이 있으면 style="background:url(...) center/cover" */
.su-pp-mood--photo { background: radial-gradient(38% 45% at 22% 40%, rgba(214, 64, 50, .75), transparent 70%), radial-gradient(30% 35% at 80% 75%, rgba(120, 150, 110, .55), transparent 70%),
  radial-gradient(60% 60% at 50% 50%, #26221F, #0C0B0A); }
.su-pp-mood--photo h3 { font-size: calc(var(--su-fs-subtitle) * 1.25); text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.su-pp-mood small { display: flex; align-items: center; gap: .4em; font-size: var(--su-fs-caption); opacity: .85; }
.su-pp-mood h3 { margin: 0; font-size: calc(var(--su-fs-subtitle) * 1.15); line-height: 1.35; letter-spacing: var(--su-tr-title); color: #fff; }
.su-pp-mood .su-pp-play { position: absolute; z-index: 3; right: 1.2em; bottom: 1.2em; }
.su-pp-mood .su-pp-track small { opacity: .7; }
.su-pp-play { display: grid; place-items: center; width: 3em; height: 3em; border: 0; border-radius: 50%; background: #fff; color: #111318; cursor: pointer; box-shadow: 0 8px 20px -6px rgba(0,0,0,.4);
  transition: transform .2s; }
.su-pp-play:hover { transform: scale(1.06); }
.su-pp-play::before { content: ""; margin-left: .18em; border-left: .75em solid currentColor; border-top: .45em solid transparent; border-bottom: .45em solid transparent; }
.su-pp-play--sm { width: 2.2em; height: 2.2em; background: rgba(17, 19, 24, .55); color: #fff; box-shadow: none; backdrop-filter: blur(6px); }
.su-pp-play--sm::before { border-left-width: .6em; border-top-width: .36em; border-bottom-width: .36em; }

/* 곡 한 줄: 작은 커버 · 제목 · 만든 이 */
.su-pp-track { display: grid; grid-template-columns: 2.8em 1fr; gap: 0 .8em; align-items: center; }
.su-pp-track > i { position: relative; overflow: hidden; grid-row: 1 / 3; width: 2.8em; height: 2.8em; border-radius: .5em; display: block;
  background: radial-gradient(35% 35% at var(--x, 30%) var(--y, 35%), rgba(255,255,255,.55), transparent 70%), var(--c, rgba(255,255,255,.25)); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.su-pp-track b { font-size: var(--su-fs-label); line-height: 1.3; }
.su-pp-track small { font-size: var(--su-fs-caption); color: inherit; opacity: .6; }

/* 선반: 제목 + 화살표, 가로로 흐르는 커버 */
.su-pp-shelf { margin-bottom: 2.6em; }
.su-pp-shelf__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1em; }
.su-pp-shelf__head h2 { margin: 0; font-size: var(--su-fs-subtitle); color: var(--su-text-strong); letter-spacing: var(--su-tr-title); }
.su-pp-shelf__row--round { grid-auto-columns: minmax(7em, 9em) !important; justify-content: start; }
.su-pp-shelf__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5em, 13em); gap: 1em; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .3em; }
.su-pp-shelf__row::-webkit-scrollbar { display: none; }
.su-pp-shelf__row > * { scroll-snap-align: start; }

/* 커버 — 사진이 있으면 img, 없으면 .su-pp-art-1~6 구도 중 하나(한 선반에서 섞어 쓴다).
   같은 구도·같은 글자 위치를 반복하면 가짜 티가 난다 → 구도·서체·색을 섞고 입자(grain)를 얹는다. */
.su-pp-cover { display: flex; flex-direction: column; gap: .15em; text-decoration: none; color: inherit; min-width: 0; }
.su-pp-cover__art { --ink: #fff; position: relative; isolation: isolate; aspect-ratio: 1; border-radius: var(--su-radius-sm); overflow: hidden; margin-bottom: .6em;
  background: var(--c, #2A2D35); color: var(--ink); container-type: inline-size; }
.su-pp-cover__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.su-pp-cover__art .su-pp-play { position: absolute; z-index: 3; left: .7em; bottom: .7em; opacity: 0; transform: translateY(4px); transition: all .2s; }
.su-pp-cover:hover .su-pp-cover__art .su-pp-play, .su-pp-cover:focus-visible .su-pp-play { opacity: 1; transform: none; }
.su-pp-grain::after, .su-pp-cover__art::after, .su-pp-mood::after, .su-pp-track > i::after, .su-pp-rank li > i::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .38; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.su-pp-cover__art .t, .su-pp-cover__art .s { position: absolute; z-index: 1; margin: 0; }
.su-pp-cover__art .s { font: 600 6.5cqw/1 var(--su-font-en); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
/* 1 세리프 포스터: 위 왼쪽 큰 세리프, 아래 작은 영문 */
.su-pp-art-1 .t { left: 8%; top: 8%; right: 8%; font: 400 15cqw/1.05 var(--su-font-serif); letter-spacing: -.03em; }
.su-pp-art-1 .s { left: 8%; bottom: 8%; }
/* 2 해와 수평선: 원 + 아래 줄무늬 */
.su-pp-art-2 { background: linear-gradient(180deg, var(--c1, #F3B25B) 0 58%, var(--c2, #1E3A5F) 58%); }
.su-pp-art-2::before { content: ""; position: absolute; left: 50%; top: 20%; width: 46%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--c3, #F6E3B4);
  -webkit-mask: linear-gradient(#000 0 80%, transparent 80%); mask: linear-gradient(#000 0 80%, transparent 80%); }
.su-pp-art-2 .t { left: 0; right: 0; bottom: 9%; text-align: center; font: 700 8.5cqw/1.1 var(--su-font-en); letter-spacing: .22em; text-transform: uppercase; }
.su-pp-art-2 .t::before { content: ""; position: absolute; left: 0; right: 0; top: -60%; height: 22%; background: repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 2px, transparent 2px 6px); }
/* 3 세로쓰기: 오른쪽 세로 제목 + 작은 달 */
.su-pp-art-3 .t { right: 9%; top: 9%; bottom: 20%; writing-mode: vertical-rl; font: 800 16cqw/1 var(--su-font); letter-spacing: -.02em; }
.su-pp-art-3::before { content: ""; position: absolute; left: 14%; top: 16%; width: 7%; aspect-ratio: 1; border-radius: 50%; background: currentColor; box-shadow: 0 0 20px 4px rgba(255,255,255,.35); }
.su-pp-art-3 .s { left: 9%; bottom: 9%; font-family: var(--su-font); letter-spacing: .02em; text-transform: none; font-weight: 400; font-size: 7cqw; }
/* 4 흐린 사진 느낌: 번진 빛 두세 개 + 가운데 가는 글씨 */
.su-pp-art-4 { background: radial-gradient(40% 35% at 30% 35%, var(--c1, #F59E8B), transparent 70%), radial-gradient(45% 40% at 72% 70%, var(--c2, #6D5BD0), transparent 70%), var(--c, #1B1B24); }
.su-pp-art-4 .t { left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; font: 300 10cqw/1.2 var(--su-font); letter-spacing: .06em; }
.su-pp-art-4 .s { left: 0; right: 0; bottom: 8%; text-align: center; }
/* 5 글자 덩어리: 잘려 나가는 큰 글자 */
.su-pp-art-5 { --ink: var(--c-ink, #111318); }
.su-pp-art-5 .t { left: -2%; top: -3%; right: -6%; font: 900 21cqw/.88 var(--su-font-en); letter-spacing: -.05em; text-transform: uppercase; word-break: keep-all; overflow-wrap: normal; }
.su-pp-art-5 .s { right: 7%; bottom: 7%; }
/* 6 점 격자: 도트 + 네모 라벨 */
.su-pp-art-6 { background: radial-gradient(circle, rgba(255,255,255,.28) 1.2px, transparent 1.5px) 0 0 / 9% 9%, var(--c, #0F4C45); }
.su-pp-art-6 .t { left: 8%; bottom: 8%; padding: .35em .55em; background: var(--ink); color: var(--c-box, #0F4C45); font: 800 8cqw/1.15 var(--su-font); }
.su-pp-art-6 .s { left: 8%; top: 8%; }
.su-pp-cover b { font-size: var(--su-fs-label); color: var(--su-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-pp-cover small { font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-pp-cover--round .su-pp-cover__art { border-radius: 50%; }

/* 순위 목록 */
.su-pp-rank { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: .2em 2em; margin: 0; padding: 0; list-style: none; counter-reset: pp; }
.su-pp-rank li { counter-increment: pp; display: grid; grid-template-columns: 1.6em 2.8em 1fr auto; gap: .9em; align-items: center; padding: .55em .5em; border-radius: var(--su-radius-sm); }
.su-pp-rank li:hover { background: var(--su-surface-muted); }
.su-pp-rank li::before { content: counter(pp); font: 700 var(--su-fs-label)/1 var(--su-font-en); color: var(--su-text-strong); text-align: center; }
.su-pp-rank li > i { position: relative; overflow: hidden; width: 2.8em; height: 2.8em; border-radius: .5em;
  background: radial-gradient(35% 35% at var(--x, 30%) var(--y, 35%), rgba(255,255,255,.5), transparent 70%), var(--c, #2A2D35); }
.su-pp-rank b { display: block; font-size: var(--su-fs-label); color: var(--su-text-strong); }
.su-pp-rank small { font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-pp-rank time { font: var(--su-fs-caption) var(--su-font-en); color: var(--su-text-faint); }
.su-pp-rank .is-up { color: var(--su-primary); font-size: .7em; margin-left: .4em; }
@media (max-width: 720px) { .su-pp-rank { grid-template-columns: 1fr; } }

/* 앱 안내 띠 · 요금 */
.su-pp-banner { display: flex; align-items: center; gap: 1.2em; flex-wrap: wrap; padding: 1.2em 1.4em; border-radius: var(--su-radius); background: var(--su-pp-m5); color: #fff; }
.su-pp-banner b { display: block; font-size: var(--su-fs-body); } .su-pp-banner small { opacity: .7; font-size: var(--su-fs-caption); }
.su-pp-banner .su-pp-btn--white { margin-left: auto; }
.su-pp-plans { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1em; }
.su-pp-plan { display: flex; flex-direction: column; gap: .6em; padding: 1.4em; border-radius: var(--su-radius); border: 1px solid var(--su-line); background: var(--su-surface); }
.su-pp-plan h3 { margin: 0; font-size: var(--su-fs-body); color: var(--su-text-strong); }
.su-pp-plan b { font-size: calc(var(--su-fs-title) * .9); color: var(--su-text-strong); letter-spacing: -.03em; }
.su-pp-plan b small { font-size: .45em; color: var(--su-text-muted); font-weight: var(--su-w-regular); }
.su-pp-plan ul { margin: .3em 0 .8em; padding: 0; list-style: none; font-size: var(--su-fs-caption); color: var(--su-text-muted); display: grid; gap: .4em; }
.su-pp-plan ul li::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .35em; vertical-align: -.12em;
  background: currentColor; -webkit-mask: var(--su-check) center / contain no-repeat; mask: var(--su-check) center / contain no-repeat; }
.su-pp-plan .su-pp-btn { margin-top: auto; justify-content: center; }
.su-pp-plan.is-key { background: var(--su-pp-m1); border: 0; color: #fff; }
.su-pp-plan.is-key :is(h3, b, b small, ul), .su-pp-plan.is-key ul li::before { color: #fff; }
.su-pp-plan.is-key .su-pp-btn { background: #fff; color: #111318; }
@media (max-width: 860px) { .su-pp-plans { grid-template-columns: 1fr; } }


/* ───────────────────────── 스타일: paper (.su-pa-*) ─────────────────────────
   <html data-su-style="paper">. 따뜻한 아이보리 한 면 + 먹색, 명조 제목. 웹소설·에세이·출판·매거진.
   원칙
   · 한 면에 흐른다: 카드·그림자 대신 가는 선(1px)으로 나눈다. 박스는 꼭 필요한 곳(요약·결제)만 옅게.
   · 제목·섹션 머리는 명조(--su-font-serif), 나머지는 프리텐다드. 명조는 굵게(800), 본문은 담백하게.
   · 행동은 검정(먹) 버튼 하나. 색은 표지·배지·프리미엄(클레이) 한두 곳에만.
   · 가격·상태는 작은 알약(.su-pa-chip): 무료는 회색 면, 유료는 선.
   · 표지는 흐린 빛 + 아래 먹색 띠 위 명조 제목 — 그림이 없어도 책처럼.
─────────────────────────────────────────────────────────────────────────── */

[data-su-style="paper"] .su-card { box-shadow: none; border: 1px solid var(--su-line); }
[data-su-style="paper"] .su-title, [data-su-style="paper"] .su-display { font-family: var(--su-font-serif); font-weight: 800; }

.su-pa-serif { font-family: var(--su-font-serif); }
.su-pa-h1 { margin: 0; font: 800 clamp(28px, 3.2vw, 38px)/1.28 var(--su-font-serif); letter-spacing: -.02em; color: var(--su-text-strong); }
.su-pa-h2 { margin: 0; font: 800 20px/1.3 var(--su-font-serif); color: var(--su-text-strong); letter-spacing: -.01em; }
.su-pa-lead { margin: 0; color: var(--su-text-muted); font-size: var(--su-fs-body); line-height: 1.7; }
.su-pa-meta { margin: 0; font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-pa-meta b { color: var(--su-text-strong); font-weight: var(--su-w-bold); }
.su-pa-meta small { font-size: .9em; color: var(--su-text-faint); }

/* 머리글: 반투명 아이보리 + 필기체 워드마크 */
.su-pa-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.6em; height: 64px; padding: 0 max(var(--su-pad), calc((100% - 1200px) / 2));
  background: color-mix(in srgb, var(--su-bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--su-line); }
.su-pa-logo { display: flex; align-items: center; gap: .35em; color: var(--su-text-strong); text-decoration: none; font: 400 34px/1 "Italianno", "Pinyon Script", cursive; }
.su-pa-logo svg { width: 22px; height: 22px; }
.su-pa-header nav { display: flex; gap: 1.4em; font-size: var(--su-fs-label); }
.su-pa-header nav a { color: var(--su-text-muted); text-decoration: none; } .su-pa-header nav a:hover, .su-pa-header nav a[aria-current] { color: var(--su-text-strong); }
.su-pa-header__end { display: flex; align-items: center; gap: .6em; margin-left: auto; font-size: var(--su-fs-label); }
.su-pa-search { display: flex; align-items: center; gap: .5em; width: 14em; padding: .55em .9em; border: 1px solid var(--su-line); border-radius: 10px; background: var(--su-surface); color: var(--su-text-faint); }
.su-pa-search input { all: unset; flex: 1; min-width: 0; color: var(--su-text-strong); font-size: var(--su-fs-label); }
.su-pa-header__end > a:not([class]) { color: var(--su-text-strong); text-decoration: none; font-weight: var(--su-w-semibold); }
@media (max-width: 860px) { .su-pa-header nav, .su-pa-search { display: none; } }

/* 작은 알약: 코인·배지·가격 */
.su-pa-chip { display: inline-flex; align-items: center; gap: .3em; padding: .38em .8em; border-radius: 999px; border: 1px solid var(--su-line); background: var(--su-surface);
  font-size: .78em; font-weight: 800; color: var(--su-text-strong); white-space: nowrap; line-height: 1; }
.su-pa-chip svg { width: 1em; height: 1em; }
.su-pa-chip--free { background: var(--su-surface-muted); color: var(--su-text); font-weight: var(--su-w-semibold); }
.su-pa-chip--ink { background: var(--su-pa-ink); border-color: var(--su-pa-ink); color: var(--su-pa-on-ink); }
.su-pa-chip--clay { background: color-mix(in srgb, var(--su-pa-clay) 12%, var(--su-surface)); border-color: color-mix(in srgb, var(--su-pa-clay) 35%, var(--su-line)); color: var(--su-pa-clay); }
.su-pa-tags { display: flex; flex-wrap: wrap; gap: .4em; margin: 0; padding: 0; list-style: none; }
.su-pa-tags li { padding: .35em .8em; border-radius: 999px; border: 1px solid var(--su-line); font-size: var(--su-fs-caption); color: var(--su-text); }
.su-pa-age { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--su-pa-rose); color: #fff; font: 800 .72em/1 var(--su-font-en); }

/* 버튼: 먹 사각(12px) · 원형 보조 */
.su-pa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; height: 3.4em; padding: 0 1.8em; border: 0; border-radius: var(--su-radius); cursor: pointer; text-decoration: none;
  font: inherit; font-size: var(--su-fs-body); font-weight: var(--su-w-bold); background: var(--su-pa-ink); color: var(--su-pa-on-ink); transition: opacity .15s, transform .15s; }
.su-pa-btn:hover { opacity: .88; } .su-pa-btn:active { transform: scale(.985); }
.su-pa-btn--line { background: transparent; color: var(--su-text-strong); box-shadow: inset 0 0 0 1px var(--su-pa-field); }
.su-pa-btn--sm { height: 2.4em; padding: 0 1em; font-size: var(--su-fs-label); border-radius: 999px; }
.su-pa-btn--wide { width: 100%; }
.su-pa-round { display: inline-grid; place-items: center; width: 3.4em; height: 3.4em; flex: none; border-radius: 50%; border: 1px solid var(--su-pa-field); background: var(--su-surface); color: var(--su-text-strong); cursor: pointer; }
.su-pa-round svg { width: 42%; height: 42%; }
.su-pa-round[aria-pressed="true"] { color: var(--su-pa-rose); } .su-pa-round[aria-pressed="true"] svg { fill: currentColor; }

/* 표지: 흐린 빛 + 아래 먹색 띠 + 명조 제목 + 모서리 배지 */
.su-pa-cover { position: relative; isolation: isolate; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; color: #fff; text-decoration: none; display: block;
  background: radial-gradient(55% 40% at 55% 32%, color-mix(in srgb, #fff 32%, var(--cv, #6B3A4A)), transparent 72%), linear-gradient(180deg, var(--cv, #6B3A4A) 0%, color-mix(in srgb, var(--cv, #6B3A4A) 60%, #0E0B0C) 100%); }
.su-pa-cover::after { content: ""; position: absolute; inset: 55% 0 0; z-index: -1; background: linear-gradient(180deg, transparent, rgba(12, 10, 11, .78)); }
.su-pa-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.su-pa-cover__top { position: absolute; top: .7em; left: .7em; right: .7em; display: flex; justify-content: space-between; align-items: center; }
.su-pa-cover__top .su-pa-chip { background: rgba(14, 14, 14, .72); border: 0; color: #fff; font-size: .68em; }
.su-pa-cover__mid { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; display: grid; justify-items: center; gap: .5em; font-size: .78em; font-weight: 700; opacity: .92; }
.su-pa-cover__mid svg { width: 2.4em; height: 2.4em; }
.su-pa-cover__title { position: absolute; left: .75em; right: .75em; bottom: .75em; margin: 0; font: 400 1.25em/1.35 var(--su-font-serif); letter-spacing: -.02em; }
.su-pa-cover__title small { display: block; margin-top: .4em; font: 600 .5em/1.2 var(--su-font); opacity: .85; }

/* 작품 머리: 표지 + 정보 */
.su-pa-work { display: grid; grid-template-columns: minmax(10em, 15em) 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.su-pa-work__info { display: flex; flex-direction: column; gap: .9em; padding-top: .2em; }
.su-pa-work__cta { display: flex; gap: .6em; align-items: center; margin-top: .6em; }
.su-pa-work__cta .su-pa-btn { flex: 0 1 22em; }
@media (max-width: 720px) { .su-pa-work { grid-template-columns: 8em 1fr; gap: 16px; } .su-pa-work__cta .su-pa-btn { flex: 1 1 auto; padding: 0 1em; font-size: var(--su-fs-label); } .su-pa-work__cta .su-pa-round { width: 2.9em; height: 2.9em; } }

/* 회차 목록: 번호 · 제목/날짜·댓글 · 가격 칩, 가로선만 */
.su-pa-list-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .6em; }
.su-pa-list-head .su-pa-h2 { font-weight: 400; } .su-pa-list-head button, .su-pa-list-head a { all: unset; cursor: pointer; font-size: var(--su-fs-caption); color: var(--su-text-muted); }
.su-pa-eps { margin: 0; padding: 0; list-style: none; }
.su-pa-eps li > * { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 2.2em 1fr auto; gap: 0 .9em; align-items: center; width: 100%; padding: .95em .2em; cursor: pointer; border-bottom: 1px solid var(--su-line); }
.su-pa-eps li > *:hover { background: color-mix(in srgb, var(--su-text-strong) 3%, transparent); }
.su-pa-eps i { font: 400 1.1em/1 var(--su-font-serif); font-style: normal; color: var(--su-text-muted); text-align: center; grid-row: 1 / 3; }
.su-pa-eps b { font-size: var(--su-fs-label); font-weight: var(--su-w-semibold); color: var(--su-text-strong); }
.su-pa-eps small { grid-column: 2; display: flex; align-items: center; gap: .3em; font-size: .72em; color: var(--su-text-faint); }
.su-pa-eps small svg { width: 1.1em; height: 1.1em; }
.su-pa-eps .su-pa-chip { grid-column: 3; grid-row: 1 / 3; }
.su-pa-eps li.is-read b { color: var(--su-text-muted); font-weight: var(--su-w-regular); }
.su-pa-eps li.is-now > * { background: color-mix(in srgb, var(--su-pa-clay) 7%, transparent); }
.su-pa-more { display: block; text-align: center; padding: 1em; font-size: var(--su-fs-caption); color: var(--su-text-muted); text-decoration: none; }

/* 표지 선반 */
.su-pa-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); gap: .8em; }
.su-pa-shelf figcaption { margin-top: .5em; font-size: var(--su-fs-caption); color: var(--su-text); }
.su-pa-shelf figcaption small { display: block; color: var(--su-text-faint); }
.su-pa-shelf figure { margin: 0; }

/* 접는 줄(독자 반응 등) */
.su-pa-fold { border-bottom: 1px solid var(--su-line); }
.su-pa-fold summary { display: flex; align-items: center; gap: .5em; padding: 1em 0; cursor: pointer; list-style: none; font-size: var(--su-fs-label); font-weight: var(--su-w-bold); color: var(--su-text-strong); }
.su-pa-fold summary::-webkit-details-marker { display: none; }
.su-pa-fold summary::before { content: ""; border-left: .4em solid currentColor; border-top: .3em solid transparent; border-bottom: .3em solid transparent; transition: transform .2s; }
.su-pa-fold[open] summary::before { transform: rotate(90deg); }
.su-pa-fold summary svg { width: 1.1em; height: 1.1em; }
.su-pa-fold > div { padding: 0 0 1.2em; color: var(--su-text); font-size: var(--su-fs-label); line-height: 1.75; }

/* 떠 있는 하단 독 */
.su-pa-dock { position: fixed; z-index: 30; left: 50%; bottom: 20px; translate: -50% 0; display: flex; align-items: center; gap: .2em; padding: .35em;
  border-radius: 999px; background: color-mix(in srgb, var(--su-surface) 94%, transparent); border: 1px solid var(--su-line); backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .28); font-size: var(--su-fs-caption); }
.su-pa-dock a { display: inline-flex; align-items: center; gap: .4em; padding: .65em .95em; border-radius: 999px; color: var(--su-text); text-decoration: none; white-space: nowrap; }
.su-pa-dock a:hover { background: var(--su-surface-muted); }
.su-pa-dock a svg { width: 1.25em; height: 1.25em; }
.su-pa-dock a.is-on { background: var(--su-pa-ink); color: var(--su-pa-on-ink); font-weight: var(--su-w-bold); padding-inline: 1.1em; }
.su-pa-dock a.is-on small { padding-left: .6em; margin-left: .2em; border-left: 1px solid color-mix(in srgb, var(--su-pa-on-ink) 35%, transparent); font-weight: 400; opacity: .85; }
.su-pa-dock--static { position: static; translate: none; display: inline-flex; }
@media (max-width: 560px) { .su-pa-dock { left: 12px; right: 12px; translate: none; justify-content: space-between; } .su-pa-dock a:not(.is-on) span { display: none; } }

/* 펼친 책: 왼쪽 면 인사 · 오른쪽 면 내용, 아래 쪽번호 */
.su-pa-desk { background: var(--su-pa-desk); padding: clamp(28px, 7vh, 72px) 16px 48px; }
.su-pa-book { width: min(920px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 34em; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .12)); }
.su-pa-book > section { position: relative; background: var(--su-bg); padding: 11% 10% 14%; display: flex; flex-direction: column; justify-content: center; gap: 1em; }
.su-pa-book > section:first-child { border-radius: 6px 0 0 6px; box-shadow: inset -28px 0 32px -26px rgba(0, 0, 0, .18); }
.su-pa-book > section:last-child { border-radius: 0 6px 6px 0; box-shadow: inset 28px 0 32px -26px rgba(0, 0, 0, .14); justify-content: flex-start; }
.su-pa-book [data-folio]::after { content: "— " attr(data-folio) " —"; position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: 400 12px var(--su-font-serif); color: var(--su-text-faint); }
.su-pa-book h1 { margin: 0; font: 700 clamp(20px, 2.8vw, 30px)/1.35 var(--su-font-serif); color: var(--su-text-strong); letter-spacing: -.02em; }
@media (max-width: 720px) {
  .su-pa-book { grid-template-columns: 1fr; min-height: 0; }
  .su-pa-book > section:first-child { border-radius: 6px 6px 0 0; box-shadow: none; border-bottom: 1px dashed var(--su-pa-field); padding: 26px 24px 20px; }
  .su-pa-book > section:first-child::after { display: none; }
  .su-pa-book > section:last-child { border-radius: 0 0 6px 6px; box-shadow: none; padding: 24px 24px 56px; }
}

/* 폼 · 고르기 · 안내 */
.su-pa-form { display: grid; gap: 14px; }
.su-pa-field { display: grid; gap: 6px; }
.su-pa-field > span { font-size: 13px; font-weight: var(--su-w-semibold); color: var(--su-text-strong); }
.su-pa-field > span small { font-weight: 400; color: var(--su-text-muted); margin-left: 4px; }
.su-pa-input { height: 44px; padding: 0 14px; border: 1px solid var(--su-pa-field); border-radius: 10px; background: var(--su-surface); font: inherit; font-size: 15px; color: var(--su-text-strong); outline: none; }
.su-pa-input:focus { border-color: var(--su-text-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--su-text-strong) 8%, transparent); }
.su-pa-hint { font-size: 12px; color: var(--su-text-muted); }
.su-pa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.su-pa-seg { display: flex; gap: 6px; }
.su-pa-seg button { flex: 1; height: 40px; border: 1px solid var(--su-pa-field); border-radius: 10px; background: var(--su-surface); font: inherit; font-size: 14px; color: var(--su-text); cursor: pointer; }
.su-pa-seg button[aria-pressed="true"] { border-color: var(--su-pa-ink); background: var(--su-pa-ink); color: var(--su-pa-on-ink); font-weight: var(--su-w-semibold); }
.su-pa-ok, .su-pa-err { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.6; }
.su-pa-ok { background: var(--su-pa-ok); color: var(--su-pa-ok-ink); } .su-pa-err { background: var(--su-pa-err); color: var(--su-pa-err-ink); }
.su-pa-alt { font-size: 14px; color: var(--su-text-muted); text-align: center; margin: 0; }
.su-pa-alt a { color: var(--su-text-strong); font-weight: var(--su-w-semibold); text-decoration: underline; text-underline-offset: 3px; }

/* 옅은 박스(요약·결제처럼 꼭 필요한 곳만) */
.su-pa-box { padding: 1.2em 1.3em; border-radius: var(--su-radius); background: color-mix(in srgb, var(--su-pa-clay) 5%, var(--su-bg)); border: 1px solid color-mix(in srgb, var(--su-pa-clay) 18%, var(--su-line)); }

/* ───────────────────────── 스타일: mono (.su-mo-*) ─────────────────────────
   <html data-su-style="mono">. 브랜드 색 없는 잉크·회색 대시보드. 셀프호스팅 도구·QA·개발자 콘솔.
   원칙
   · 색은 상태에만: 버튼·링크·활성 메뉴는 잉크(#171717) 하나. 파랑·초록·빨강은 배지·점·차트에서만.
   · 깊이는 그림자 단계(.su-mo-lv1~4·modal)로: 작은 오프셋 겹침 + 안쪽 1px 실선. 무거운 그림자 한 방 금지.
   · 글꼴 둘: Inter(본문·제목) + JetBrains Mono(빌드 번호·ID·시간·수치). 기술 값은 반드시 mono.
   · 제목 자간은 늘 음수, 대문자 제목 금지. 크기보다 굵기 500/600 으로 위계를 만든다.
   · 위험한 행동은 빨간 면 대신 옅은 틴트(.su-mo-btn--danger). 둥글기 6~8px, 칩·아바타만 원.
─────────────────────────────────────────────────────────────────────────── */

[data-su-style="mono"].su, [data-su-style="mono"] .su { font-feature-settings: "ss01", "ss02"; -webkit-font-smoothing: antialiased; }
[data-su-style="mono"] :is(.su-title, .su-display) { font-weight: 600; letter-spacing: -.04em; }
[data-su-style="mono"] .su-card { border: 0; }

.su-mo-mono { font-family: var(--su-font-mono); font-size: .86em; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.su-mo-muted { color: var(--su-text-muted); }

/* 깊이 0~4 + 모달: 오프셋 겹침 + 안쪽 실선 */
.su-mo-lv1, .su-mo-lv2, .su-mo-lv3, .su-mo-lv4, .su-mo-modal { background: var(--su-surface); border-radius: var(--su-radius); }
.su-mo-lv1 { box-shadow: inset 0 0 0 1px var(--su-mo-hair); }
.su-mo-lv2 { box-shadow: 0 1px 1px rgba(0,0,0,.02), 0 2px 2px rgba(0,0,0,.04), inset 0 0 0 1px var(--su-mo-hair); }
.su-mo-lv3 { box-shadow: 0 2px 2px rgba(0,0,0,.04), 0 8px 8px -8px rgba(0,0,0,.04), inset 0 0 0 1px var(--su-mo-hair); }
.su-mo-lv4 { box-shadow: 0 2px 2px rgba(0,0,0,.04), 0 8px 16px -4px rgba(0,0,0,.04), inset 0 0 0 1px var(--su-mo-hair); }
.su-mo-modal { box-shadow: 0 1px 1px rgba(0,0,0,.02), 0 8px 16px -4px rgba(0,0,0,.04), 0 24px 32px -8px rgba(0,0,0,.06), inset 0 0 0 1px var(--su-mo-hair); }
.su-mo-pad { padding: 24px; } .su-mo-pad--sm { padding: 16px; }

/* 대시보드 뼈대: 사이드바 + 본문 */
.su-mo-app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; font-size: 14px; color: var(--su-text-strong); background: var(--su-surface); }
.su-mo-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--su-mo-side); border-right: 1px solid var(--su-line); box-sizing: border-box; }
.su-mo-brand { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px; margin-bottom: 8px; color: var(--su-text-strong); text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: -.02em; }
.su-mo-brand i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--su-primary); color: var(--su-on-primary); }
.su-mo-brand i svg { width: 13px; height: 13px; }
.su-mo-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.su-mo-nav h6 { margin: 6px 0 4px; padding: 0 8px; font-size: 12px; font-weight: 500; color: var(--su-text-muted); letter-spacing: 0; }
.su-mo-nav a { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 8px; border-radius: var(--su-radius-sm); color: var(--su-mo-side-text); text-decoration: none; font-weight: 500; }
.su-mo-nav a svg { width: 16px; height: 16px; flex: none; }
.su-mo-nav a:hover { background: var(--su-mo-side-on); color: var(--su-text-strong); }
.su-mo-nav a[aria-current] { background: var(--su-mo-side-on); color: var(--su-text-strong); }
.su-mo-nav a:focus-visible { outline: 2px solid var(--su-mo-link); outline-offset: -2px; }
.su-mo-nav a > span:last-child:not(:first-child) { margin-left: auto; }
.su-mo-user { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 8px 6px; border-radius: var(--su-radius-sm); }
.su-mo-user b { display: block; font-weight: 500; font-size: 13px; }
.su-mo-user small { display: block; font-size: 12px; color: var(--su-text-muted); }
.su-mo-main { display: flex; flex-direction: column; min-width: 0; }

/* 상단 경로 막대 */
.su-mo-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--su-line);
  background: color-mix(in srgb, var(--su-surface) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.su-mo-crumbs { display: flex; align-items: center; gap: 0; min-width: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; white-space: nowrap; font-size: 13px; color: var(--su-text-muted); }
.su-mo-crumbs li { display: flex; align-items: center; min-width: 0; }
.su-mo-crumbs li + li::before { content: ""; width: 5px; height: 5px; margin: 0 11px 0 8px; border: solid currentColor; border-width: 1.4px 1.4px 0 0; transform: rotate(45deg); opacity: .7; flex: none; }
.su-mo-crumbs a { color: inherit; text-decoration: none; } .su-mo-crumbs a:hover { color: var(--su-text-strong); }
.su-mo-crumbs li:last-child { color: var(--su-text-strong); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.su-mo-top__end { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* 버튼: 잉크 기본 · 6 변형 · 크기 */
.su-mo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border: 0; border-radius: var(--su-radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 500 14px/1 var(--su-font); background: var(--su-primary); color: var(--su-on-primary); transition: background-color .12s, color .12s, transform .12s; }
.su-mo-btn svg { width: 16px; height: 16px; flex: none; }
.su-mo-btn:hover { background: color-mix(in srgb, var(--su-primary) 88%, var(--su-surface)); }
.su-mo-btn:active { transform: translateY(1px); }
.su-mo-btn:focus-visible { outline: 2px solid var(--su-text-strong); outline-offset: 2px; }
.su-mo-btn--outline { background: var(--su-surface); color: var(--su-text-strong); box-shadow: inset 0 0 0 1px var(--su-line); }
.su-mo-btn--outline:hover, .su-mo-btn--secondary:hover, .su-mo-btn--ghost:hover { background: var(--su-surface-muted); }
.su-mo-btn--secondary { background: var(--su-surface-muted); color: var(--su-text-strong); }
.su-mo-btn--ghost { background: transparent; color: var(--su-text-strong); }
.su-mo-btn--danger { background: color-mix(in srgb, var(--su-danger) 10%, transparent); color: var(--su-danger); }
.su-mo-btn--danger:hover { background: color-mix(in srgb, var(--su-danger) 16%, transparent); }
.su-mo-btn--sm { height: 36px; padding: 0 12px; font-size: 13px; }
.su-mo-btn--lg { height: 44px; padding: 0 22px; }
.su-mo-btn--nav { height: 28px; padding: 0 10px; font-size: 12px; }
.su-mo-btn--pill { height: 48px; padding: 0 26px; border-radius: 100px; font-size: 15px; }
.su-mo-btn--icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: transparent; color: var(--su-text-muted); }
.su-mo-btn--icon:hover { background: var(--su-surface-muted); color: var(--su-text-strong); }
.su-mo-btn--wide { width: 100%; }

/* 배지: 상태·플랫폼 톤. 글자색은 같은 색을 잉크/흰색 쪽으로 섞어 라이트·다크 모두 읽힌다 */
.su-mo-badge { --t: var(--su-text-muted); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  font: 600 12px/1 var(--su-font); background: color-mix(in srgb, var(--t) 12%, var(--su-surface)); color: color-mix(in srgb, var(--t) 70%, var(--su-text-strong)); }
.su-mo-badge--backlog { --t: #71717A; }
.su-mo-badge--progress { --t: #2563EB; }
.su-mo-badge--done { --t: #16A34A; }
.su-mo-badge--rejected { --t: #DC2626; }
.su-mo-badge--ios { --t: #0284C7; }
.su-mo-badge--android { --t: #059669; }
.su-mo-badge--ink { background: var(--su-primary); color: var(--su-on-primary); }
.su-mo-badge--line { background: transparent; color: var(--su-text-strong); box-shadow: inset 0 0 0 1px var(--su-line); }
.su-mo-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--su-success); flex: none; }
.su-mo-dot--live { box-shadow: 0 0 0 3px color-mix(in srgb, var(--su-success) 22%, transparent); }
.su-mo-dot--off { background: var(--su-text-faint); }
.su-mo-dot--warn { background: #F59E0B; }
.su-mo-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px; box-sizing: border-box;
  font: 500 11px/1 var(--su-font-mono); color: var(--su-text-muted); background: var(--su-surface-muted); box-shadow: inset 0 -1px 0 var(--su-line), inset 0 0 0 1px var(--su-line); }

/* 아바타: 이름 해시 6칸(data-c="1"~"6") */
.su-mo-avatar { --a: var(--su-mo-a5); --ai: var(--su-mo-a5-ink); display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--a); color: var(--ai); font: 600 12px/1 var(--su-font); overflow: hidden; }
.su-mo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.su-mo-avatar[data-c="1"] { --a: var(--su-mo-a1); --ai: var(--su-mo-a1-ink); }
.su-mo-avatar[data-c="2"] { --a: var(--su-mo-a2); --ai: var(--su-mo-a2-ink); }
.su-mo-avatar[data-c="3"] { --a: var(--su-mo-a3); --ai: var(--su-mo-a3-ink); }
.su-mo-avatar[data-c="4"] { --a: var(--su-mo-a4); --ai: var(--su-mo-a4-ink); }
.su-mo-avatar[data-c="6"] { --a: var(--su-mo-a6); --ai: var(--su-mo-a6-ink); }
.su-mo-avatar--sm { width: 22px; height: 22px; font-size: 10px; }

/* 쪽 머리 */
.su-mo-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.su-mo-head > div:first-child { flex: 1; min-width: 0; }
.su-mo-h1 { margin: 0; font: 600 24px/1.25 var(--su-font); letter-spacing: -.04em; color: var(--su-text-strong); }
.su-mo-h2 { margin: 0; font: 600 16px/1.3 var(--su-font); letter-spacing: -.02em; color: var(--su-text-strong); }
.su-mo-desc { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--su-text-muted); }
.su-mo-head__end { display: flex; gap: 8px; flex-wrap: wrap; }

/* 탭: 회색 홈 안에서 흰 칸이 미끄러진다 */
.su-mo-tabs { display: flex; gap: 2px; padding: 3px; border-radius: var(--su-radius); background: var(--su-surface-muted); }
.su-mo-tabs button { all: unset; box-sizing: border-box; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--su-radius-sm);
  font: 500 13px/1 var(--su-font); color: var(--su-text-muted); cursor: pointer; white-space: nowrap; }
.su-mo-tabs button svg { width: 14px; height: 14px; }
.su-mo-tabs button[aria-selected="true"] { background: var(--su-surface); color: var(--su-text-strong); box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 0 0 1px var(--su-mo-hair); }
.su-mo-tabs button:focus-visible { outline: 2px solid var(--su-mo-link); outline-offset: 1px; }
.su-mo-tabs--fit { display: inline-flex; } .su-mo-tabs--fit button { flex: none; }

/* 입력 */
.su-mo-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.su-mo-field > span { font-weight: 500; color: var(--su-text-strong); }
.su-mo-field small { font-size: 12px; color: var(--su-text-muted); }
.su-mo-field small.is-err { color: var(--su-danger); }
.su-mo-input { box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--su-line); border-radius: var(--su-radius-sm); background: var(--su-surface);
  font: 400 14px/1 var(--su-font); color: var(--su-text-strong); outline: 0; transition: border-color .12s, box-shadow .12s; }
.su-mo-input::placeholder { color: var(--su-text-muted); }
.su-mo-input:focus { border-color: var(--su-text-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--su-text-strong) 10%, transparent); }
.su-mo-input[aria-invalid="true"] { border-color: var(--su-danger); }
.su-mo-input--mono { font-family: var(--su-font-mono); font-size: 13px; }
.su-mo-search { position: relative; display: block; }
.su-mo-search svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--su-text-muted); pointer-events: none; }
.su-mo-search .su-mo-input { padding-left: 34px; height: 36px; }
.su-mo-switch { all: unset; position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--su-line); cursor: pointer; flex: none; transition: background-color .15s; }
.su-mo-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.su-mo-switch[aria-checked="true"] { background: var(--su-primary); }
.su-mo-switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--su-on-primary); }

/* 기기 무대: 떠 있는 세로 도구막대 + 기기 + 상태 카드 */
.su-mo-stage { display: flex; justify-content: center; align-items: flex-start; gap: 20px; padding: 36px 20px; min-width: 0; }
.su-mo-rail { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 5px; margin-top: 12px; flex: none; border-radius: 16px; border: 1px solid var(--su-line);
  background: color-mix(in srgb, var(--su-surface) 90%, transparent); backdrop-filter: blur(6px); }
.su-mo-rail button { all: unset; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--su-radius-sm); color: var(--su-text-muted); cursor: pointer; }
.su-mo-rail button svg { width: 16px; height: 16px; }
.su-mo-rail button:hover, .su-mo-rail button[aria-pressed="true"] { background: var(--su-surface-muted); color: var(--su-text-strong); }
.su-mo-rail hr { width: 16px; height: 1px; margin: 4px 0; border: 0; background: var(--su-line); }
.su-mo-phone { position: relative; width: 260px; aspect-ratio: 9 / 19.5; flex: none; padding: 9px; border-radius: 44px; box-sizing: border-box;
  background: #111; box-shadow: inset 0 0 0 2px #2b2b2b, 0 2px 2px rgba(0,0,0,.06), 0 20px 40px -16px rgba(0,0,0,.25); }
.su-mo-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: #F7F7F5; color: #171717; font-size: 11px; container-type: inline-size; }
.su-mo-phone__island { position: absolute; top: 9px; left: 50%; z-index: 2; width: 34%; height: 22px; transform: translateX(-50%); border-radius: 999px; background: #000; }
.su-mo-phone__bar { display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 22px; font: 600 12px/1 var(--su-font-en); }
.su-mo-phone__bar span:last-child { display: flex; gap: 4px; align-items: center; }
.su-mo-phone__bar i { display: block; width: 18px; height: 9px; border-radius: 3px; border: 1.2px solid currentColor; box-sizing: border-box; background: linear-gradient(90deg, currentColor 70%, transparent 0) content-box; padding: 1px; }
.su-mo-status { display: flex; flex-direction: column; gap: 8px; width: 220px; padding: 14px 16px; flex: none; box-sizing: border-box; font-size: 13px; }
.su-mo-status p { display: flex; align-items: center; gap: 7px; margin: 0; }
.su-mo-status b { font-weight: 500; }
.su-mo-status__k { color: var(--su-text-muted); }
.su-mo-status dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--su-line); font-size: 12px; }
.su-mo-status dt { color: var(--su-text-muted); } .su-mo-status dd { margin: 0; text-align: right; font-family: var(--su-font-mono); }

/* 오른쪽 패널: 탭 + 댓글 흐름 + 입력 */
.su-mo-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0; border-left: 1px solid var(--su-line); box-sizing: border-box; }
.su-mo-thread { flex: 1; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 4px 4px 0; list-style: none; overflow: auto; }
.su-mo-day { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--su-text-muted); }
.su-mo-day::before, .su-mo-day::after { content: ""; flex: 1; height: 1px; background: var(--su-line); }
.su-mo-msg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.6; }
.su-mo-msg header { display: flex; align-items: baseline; gap: 8px; }
.su-mo-msg header b { font-weight: 600; }
.su-mo-msg header time { font: 400 11px/1 var(--su-font-mono); color: var(--su-text-muted); }
.su-mo-msg p { margin: 2px 0 0; color: var(--su-text); }
.su-mo-msg code { font: 12px var(--su-font-mono); padding: 1px 5px; border-radius: 4px; background: var(--su-surface-muted); color: var(--su-text-strong); }
.su-mo-msg__shot { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 9px 5px 5px; border-radius: var(--su-radius-sm); font-size: 12px; color: var(--su-text-strong); text-decoration: none; box-shadow: inset 0 0 0 1px var(--su-line); }
.su-mo-msg__shot i { width: 22px; height: 30px; border-radius: 4px; background: linear-gradient(#F7F7F5 0 30%, #E4E4E0 30% 34%, #F7F7F5 34% 60%, #171717 60% 72%, #F7F7F5 72%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.su-mo-composer { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--su-radius); box-shadow: inset 0 0 0 1px var(--su-line); background: var(--su-surface); }
.su-mo-composer:focus-within { box-shadow: inset 0 0 0 1px var(--su-text-strong); }
.su-mo-composer textarea { all: unset; min-height: 3.4em; font: 400 13px/1.55 var(--su-font); color: var(--su-text-strong); white-space: pre-wrap; }
.su-mo-composer textarea::placeholder { color: var(--su-text-muted); }
.su-mo-composer footer { display: flex; align-items: center; justify-content: space-between; color: var(--su-text-muted); }
.su-mo-composer footer svg { width: 16px; height: 16px; }
.su-mo-send { all: unset; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--su-primary); color: var(--su-on-primary); cursor: pointer; }
.su-mo-send:disabled { background: var(--su-text-faint); cursor: default; }
.su-mo-send svg { width: 14px; height: 14px; }

/* 릴리스 묶음(접기) + 빌드 줄 */
.su-mo-release { overflow: hidden; }
.su-mo-release + .su-mo-release { margin-top: 12px; }
.su-mo-release > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; }
.su-mo-release > summary::-webkit-details-marker { display: none; }
.su-mo-release > summary::before { content: ""; width: 6px; height: 6px; flex: none; margin: 0 4px 0 2px; border: solid var(--su-text-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s; }
.su-mo-release[open] > summary::before { transform: rotate(45deg); }
.su-mo-release > summary b { font-weight: 600; letter-spacing: -.02em; }
.su-mo-release > summary small { margin-left: auto; font-size: 12px; color: var(--su-text-muted); }
.su-mo-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--su-line); }
.su-mo-rows > li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.su-mo-rows > li + li { border-top: 1px solid var(--su-line); }
.su-mo-rows > li:hover { background: color-mix(in srgb, var(--su-surface-muted) 55%, transparent); }
.su-mo-row__main { flex: 1; min-width: 0; }
.su-mo-row__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 500; }
.su-mo-row__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--su-text-muted); }
.su-mo-row__meta > * + *::before { content: ""; display: inline-block; width: 1px; height: 10px; margin-right: 8px; vertical-align: -1px; background: var(--su-line); }
.su-mo-row__end { display: flex; align-items: center; gap: 4px; flex: none; }

/* 표: 머리는 작은 회색, 수치는 mono 오른쪽 */
.su-mo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.su-mo-table th { height: 36px; padding: 0 12px; text-align: left; font-weight: 500; font-size: 12px; color: var(--su-text-muted); border-bottom: 1px solid var(--su-line); white-space: nowrap; }
.su-mo-table td { height: 44px; padding: 0 12px; border-bottom: 1px solid var(--su-line); }
.su-mo-table tr:last-child td { border-bottom: 0; }
.su-mo-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.su-mo-table td.is-num { font-family: var(--su-font-mono); }
.su-mo-table td > .su-mo-dot { margin-right: 4px; vertical-align: 1px; }

/* 수치 칸 + 영역 차트 */
.su-mo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.su-mo-stat { padding: 16px; }
.su-mo-stat > span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--su-text-muted); }
.su-mo-stat > span svg { width: 14px; height: 14px; }
.su-mo-stat > b { display: block; margin-top: 8px; font: 600 26px/1 var(--su-font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.su-mo-stat > b small { margin-left: 3px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--su-text-muted); }
.su-mo-meter { height: 4px; margin-top: 12px; border-radius: 999px; background: var(--su-surface-muted); overflow: hidden; }
.su-mo-meter i { display: block; height: 100%; width: var(--v, 40%); border-radius: inherit; background: var(--su-primary); }
.su-mo-meter.is-hot i { background: #F59E0B; }
.su-mo-chart { padding: 16px; }
.su-mo-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.su-mo-chart .grid { stroke: var(--su-line); stroke-width: 1; }
.su-mo-chart .axis { fill: var(--su-text-muted); font: 10px var(--su-font-mono); }
.su-mo-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--su-text-muted); }
.su-mo-legend li { display: flex; align-items: center; gap: 6px; }
.su-mo-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }

/* 빈 상태 · 알림 띠 */
.su-mo-empty[hidden], .su-mo-thread[hidden] { display: none; }
.su-mo-empty { flex: 1; justify-content: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center; font-size: 13px; color: var(--su-text-muted); border-radius: var(--su-radius); box-shadow: inset 0 0 0 1px var(--su-line); }
.su-mo-empty svg { width: 22px; height: 22px; margin-bottom: 4px; }
.su-mo-empty b { color: var(--su-text-strong); font-weight: 500; font-size: 14px; }
.su-mo-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--su-radius-sm); font-size: 13px; line-height: 1.5; background: var(--su-surface-muted); color: var(--su-text); }
.su-mo-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--su-text-muted); }
.su-mo-note--warn { background: color-mix(in srgb, #F59E0B 12%, var(--su-surface)); }
.su-mo-note--warn svg { color: #D97706; }

/* 폰 폭: 사이드바는 위 가로 막대로, 무대·패널은 세로로 */
@media (max-width: 860px) {
  .su-mo-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .su-mo-side { position: static; height: auto; flex-direction: row; align-items: center; gap: 4px; padding: 8px 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--su-line); }
  .su-mo-brand { margin: 0 6px 0 0; flex: none; }
  .su-mo-nav { flex-direction: row; margin: 0; flex: none; }
  .su-mo-nav h6, .su-mo-user, .su-mo-nav--sub { display: none; }
  .su-mo-nav a { white-space: nowrap; }
  .su-mo-crumbs li { flex: none; } .su-mo-crumbs li:last-child { flex: 0 1 auto; min-width: 0; }
  .su-mo-crumbs li:not(:first-child):not(:last-child) { display: none; }
  .su-mo-stage { flex-direction: column; align-items: center; padding: 20px 16px; }
  .su-mo-rail { flex-direction: row; margin: 0; } .su-mo-rail hr { width: 1px; height: 16px; margin: 0 4px; }
  .su-mo-status { width: 100%; max-width: 320px; }
  .su-mo-panel { border-left: 0; border-top: 1px solid var(--su-line); }
  .su-mo-rows > li { flex-wrap: wrap; }
}

/* ── 모션: suui-motion(dist/suui-motion.css·js)과 함께. 짧고 단단하게 — 200~360ms, 튕김 없음, 이동 8px ──
   탭: class="su-mo-tabs su-seg" + button.on → 흰 칸이 미끄러진다(suMotion 의 seg).
   수치: <span data-su-count="46">0</span> · 막대: .su-mo-meter[data-su-reveal] · 차트: .su-mo-chart[data-su-reveal] 의 path.line[pathLength=1] / path.area
   새 댓글: .su-mo-msg.is-new · 스크린샷 번쩍: .su-mo-phone__screen.is-flash · 릴리스 접기는 높이로 열린다(지원 브라우저). */
[data-su-style="mono"] { --su-reveal-dist: 8px; --su-dur-slow: 360ms; --su-dur: 200ms; }
.su-mo-tabs.su-seg { position: relative; display: flex; padding: 3px; border-radius: var(--su-radius); background: var(--su-surface-muted); }
.su-mo-tabs--fit.su-seg { display: inline-flex; }
.su-mo-tabs.su-seg button { padding: 0 12px; border-radius: var(--su-radius-sm); font: 500 13px/1 var(--su-font); color: var(--su-text-muted); transition: color .15s; }
.su-mo-tabs.su-seg button.on, .su-mo-tabs.su-seg button[aria-selected="true"] { color: var(--su-text-strong); background: none; box-shadow: none; }
.su-mo-tabs .su-seg__ind { top: 3px; bottom: 3px; border-radius: var(--su-radius-sm); background: var(--su-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 0 0 1px var(--su-mo-hair); transition: transform 220ms var(--su-ease-out), width 220ms var(--su-ease-out); }
.su-mo-dot--live { animation: su-mo-pulse 2.2s var(--su-ease-out) infinite; }
@keyframes su-mo-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--su-success) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
.su-mo-rail button[aria-pressed="true"] { color: var(--su-danger); }
.su-mo-rail button[aria-pressed="true"] svg { animation: su-mo-blink 1.2s steps(2, jump-none) infinite; }
@keyframes su-mo-blink { 50% { opacity: .35; } }
.su-mo-meter i { transition: width 700ms var(--su-ease-out) 120ms; }
.su-motion-ready .su-mo-meter[data-su-reveal]:not(.is-in) i { width: 0; }
.su-mo-chart .line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--su-ease-out); }
.su-mo-chart .area { transition: opacity 500ms var(--su-ease-out) 400ms; }
.su-motion-ready .su-mo-chart[data-su-reveal]:not(.is-in) .line { stroke-dashoffset: 1; }
.su-motion-ready .su-mo-chart[data-su-reveal]:not(.is-in) .area { opacity: 0; }
.su-mo-msg.is-new { animation: su-mo-in 260ms var(--su-ease-out); }
@keyframes su-mo-in { from { opacity: 0; transform: translateY(6px); } }
.su-mo-phone__screen::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.su-mo-phone__screen.is-flash::after { animation: su-mo-flash 360ms var(--su-ease-out); }
@keyframes su-mo-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
.su-mo-release { interpolate-size: allow-keywords; }
.su-mo-release::details-content { height: 0; overflow: clip; transition: height 240ms var(--su-ease-out), content-visibility 240ms allow-discrete; }
.su-mo-release[open]::details-content { height: auto; }
.su-mo-rows > li.is-gone { display: none; }
@media (prefers-reduced-motion: reduce) {
  .su-mo-dot--live, .su-mo-rail button svg, .su-mo-msg.is-new, .su-mo-phone__screen.is-flash::after { animation: none; }
  .su-mo-release::details-content { transition: none; }
}