/*  TRINITY PRISM 설치 안내 3종 공유 디자인 SSOT (download / checklist / verify).
    PRISM Design System v3 (#249 §s-ui-common v3.5.80) 정합 — 브랜드 인디고 3색·radius 4/8/12·토큰 강제.
    AI틱 0: 글로우·그라데 텍스트·이모지·둥실 hover 없음. 색은 의미일 때만. 여백·타이포로 위계.
    light 기본 + dark 토글. 값 변경은 여기 1곳에서만.
    2026-06-29 yjmoon  컨테이너명 폰트 mono 정합 — --mono 스택에 OS 기본 mono(Consolas·DejaVu·Noto Sans Mono) 보강 + .diag-cn 굵기 400 통일.
    2026-07-30 yjmoon  다운로드 카드 파일명이 글자 한가운데서 잘려 보이던 것 수정 (하이픈 자리에서 줄바꿈).
*/

/* ───────── 토큰 (light 기본) ───────── */
:root {
  --bg:#f8f9fc; --surface:#ffffff; --surface2:#f1f3f9; --surface3:#e9ecf3;
  --border:#e2e5ed; --border-h:#cfd3de;
  --text:#1e1e2e; --text-h:#0b0a14; --muted:#646b7d; --subtle:#9aa0b0;

  /* 브랜드 3색만 — indigo(주요/CTA) · green(성공) · orange(주의). 4번째 색 금지 */
  --primary:#4f46e5; --primary-h:#4338ca; --link:#4f46e5;
  --primary-bg:rgba(79,70,229,.06); --primary-border:rgba(79,70,229,.16);
  --green:#16a34a; --green-bg:rgba(22,163,74,.08);
  --orange:#d97706; --orange-bg:rgba(217,119,6,.08);
  --red:#dc2626;            /* 신호색: 에러/실패 1색만 */
  --on-accent:#ffffff;

  /* 분광 3선 (PRISM 마크 전용) */
  --spec-purple:#7c3aed; --spec-green:#16a34a; --spec-orange:#d97706;

  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
  --sp-2xs:4px; --sp-xs:6px; --sp-sm:8px; --sp-25:10px; --sp-md:12px; --sp-35:14px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px;
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-13:13px; --fs-md:14px; --fs-lg:15px; --fs-h:18px; --fs-h2:24px; --fs-xl:22px; --fs-hero:clamp(28px,3.4vw,38px);
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

  /* iOS 옅고 넓게 — 깊이용. 둥실 hover 그림자 아님 */
  --shadow-sm:0 1px 3px rgba(15,18,40,.05);
  --shadow-md:0 4px 16px rgba(15,18,40,.07);
  --shadow-lg:0 12px 36px rgba(15,18,40,.10);
  --glass:rgba(255,255,255,.72);
  --scrim:rgba(15,18,40,.5);          /* 모달 오버레이 딤(scrim) — light */

  --ease:cubic-bezier(.4,0,.2,1); --dur:.15s; --dur-2:.22s;
  --mono:ui-monospace,'SF Mono','JetBrains Mono','Fira Code',Menlo,Consolas,'DejaVu Sans Mono','Noto Sans Mono',monospace;   /* OS 기본 mono(Win=Consolas·Linux=DejaVu/Noto) 보강 — 미설치 환경서 generic monospace 추락(폭/획 어색) 방지 */
  font-family:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",sans-serif;
}

[data-theme="dark"] {
  --bg:#0b0b11; --surface:#14141d; --surface2:#1b1b26; --surface3:#242430;
  --border:#2a2a37; --border-h:#3b3b4a;
  --text:#e7e8f0; --text-h:#ffffff; --muted:#9a9fb0; --subtle:#6b7080;
  --primary:#6366f1; --primary-h:#818cf8; --link:#818cf8;
  --primary-bg:rgba(99,102,241,.12); --primary-border:rgba(99,102,241,.28);
  --green:#22c55e; --green-bg:rgba(34,197,94,.12);
  --orange:#f59e0b; --orange-bg:rgba(245,158,11,.12);
  --red:#f87171;
  --spec-purple:#a855f7; --spec-green:#22c55e; --spec-orange:#f59e0b;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:0 12px 36px rgba(0,0,0,.55);
  --glass:rgba(20,20,29,.72);
  --scrim:rgba(0,0,0,.6);             /* 모달 오버레이 딤(scrim) — dark */
}

/* ───────── 베이스 ───────── */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); cursor:default;   /* 본문 등 나머지=기본 화살표 (복사 코드=text, 클릭=pointer 는 개별 지정) */
  font-size:var(--fs-lg); line-height:1.7; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  word-break:keep-all; overflow-wrap:break-word;   /* 한국어 어절 단위 줄바꿈(글자 중간 끊김 방지) + 긴 영문/URL 만 분절 */
  text-wrap:pretty;   /* 짧은 어절이 줄 끝/시작에 외톨이로 남는 부자연스러운 줄바꿈 방지 */
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
h1, .hero h1, .h2, .h3 { text-wrap:balance; }   /* 제목은 줄 길이 균형 */
a { color:var(--link); text-decoration:none; cursor:pointer; }   /* 링크=클릭 커서 */
a:hover { text-decoration:underline; }
code, .mono { font-family:var(--mono); }
.section td .mono, .section th .mono { white-space:nowrap; }
.tbl td.nw { white-space:nowrap; }
.diag-cn { font-family:var(--mono); letter-spacing:0; }   /* 컨테이너명·IP placeholder mono. 어절 중간 끊김 방지. 굵기는 .diag-st.diag-cn 에서 통일(아래) */
::selection { background:var(--primary-bg); }

/* ───────── 상단 바 ───────── */
.topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  height:56px; padding:0 clamp(16px,4vw,28px);
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); }
.brandmark { display:flex; align-items:center; gap:var(--sp-25); text-decoration:none; color:var(--text-h); }
.brandmark:hover { text-decoration:none; }
/* 공식 s-brand lockup(BrandLockup §v3.4.20 compact-sidebar) 정합 — topbar 컴팩트. mark 32 / PRISM 8 / TRINITY 18, 비율 sb-C 확정값 */
.brandmark svg { width:32px; height:32px; flex-shrink:0; }
.brandmark .wm { display:flex; flex-direction:column; line-height:1; }
.brandmark .wm .t { font-size:8px; font-weight:var(--fw-semibold); letter-spacing:2px; color:var(--muted); text-transform:uppercase; padding-bottom:3px; }
.brandmark .wm .p { font-size:18px; font-weight:900; letter-spacing:2px; color:var(--text-h); }

/* 테마 토글 — light/dark 두 점 */
.theme-toggle { display:inline-flex; gap:var(--sp-xs); padding:var(--sp-2xs); background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-pill); }
.theme-dot { width:18px; height:18px; border-radius:var(--r-pill); border:1px solid var(--border-h); cursor:pointer; padding:0; background:transparent; transition:border-color var(--dur) var(--ease); }
.theme-dot.d-light { background:#f8f9fc; }
.theme-dot.d-dark { background:#14141d; }
.theme-dot.active { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-bg); }
.theme-dot:focus-visible { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-bg); }

/* ───────── 셸 (콘텐츠 컬럼) ───────── */
.shell { max-width:1120px; margin:0 auto; padding:0 clamp(20px,5vw,28px); }
.shell--wide { max-width:1120px; }

/* ───────── Hero ───────── */
.hero { padding:clamp(40px,7vh,72px) 0 clamp(28px,4vh,40px); }
.eyebrow { display:inline-block; font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:var(--sp-35); }
.eyebrow.accent { color:var(--primary); }
.hero h1 { margin:0 0 var(--sp-35); font-size:var(--fs-hero); font-weight:var(--fw-black); letter-spacing:-.8px; line-height:1.14; color:var(--text-h); }
.hero .lead { margin:0; font-size:var(--fs-lg); line-height:1.6; color:var(--muted); }
.hero .lead b { color:var(--text); font-weight:var(--fw-semibold); }

/* 요구사항 칩 (다운로드 hero) */
.chips { display:flex; flex-wrap:wrap; gap:var(--sp-sm); margin-top:var(--sp-6); }
.chip { display:inline-flex; align-items:center; gap:var(--sp-xs); padding:var(--sp-xs) var(--sp-35);
  border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--muted);
  background:var(--surface); border:1px solid var(--border); }
.chip svg { width:14px; height:14px; opacity:.7; }

/* hero 보조 액션 (체크리스트 링크 등) */
.hero-actions { margin-top:var(--sp-6); display:flex; flex-wrap:wrap; gap:var(--sp-sm); }

/* ───────── 섹션 ───────── */
.section { padding:clamp(36px,6vh,56px) 0; border-top:1px solid var(--border); }
.section:first-of-type { border-top:none; }
.sec-eyebrow { display:block; font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:1px; text-transform:uppercase; color:var(--primary); margin-bottom:var(--sp-sm); }
.sec-eyebrow.soft { color:var(--muted); }
.h2 { margin:0 0 var(--sp-sm); font-size:var(--fs-h2); font-weight:var(--fw-black); letter-spacing:-.4px; line-height:1.25; color:var(--text-h); }
.sec-desc { margin:0 0 var(--sp-6); font-size:var(--fs-md); color:var(--muted); line-height:1.65; }
.h3 { margin:var(--sp-7) 0 var(--sp-md); font-size:var(--fs-h); font-weight:var(--fw-bold); color:var(--text-h); letter-spacing:-.2px; }
.h3:first-child { margin-top:0; }
.prose p { margin:0 0 var(--sp-md); }
.prose b { color:var(--text-h); font-weight:var(--fw-semibold); }
.muted { color:var(--muted); }
.muted b, .muted strong, .card-foot b { color:var(--text); font-weight:var(--fw-semibold); }
.fs-sm { font-size:var(--fs-sm); }
.fs-md { font-size:var(--fs-md); }

/* 인라인 코드 */
.section code:not(.cmd code), .ic { font-family:var(--mono); font-size:.86em; padding:1px 6px;
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--primary); }
[data-theme="dark"] .section code:not(.cmd code), [data-theme="dark"] .ic { color:var(--text-h); }

/* ───────── 명령 박스 ───────── */
.cmd { margin:var(--sp-md) 0; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-md);
  font-family:var(--mono); font-size:var(--fs-13); line-height:1.7; color:var(--text-h); overflow:hidden; cursor:text; }   /* 복사하는 코드 영역=텍스트 커서 */
.cmd-row { display:flex; align-items:flex-start; gap:var(--sp-md); padding:var(--sp-md) var(--sp-35); }
.cmd-row pre { margin:0; flex:1; min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.cmd .c { color:var(--muted); }
.cmd .pr { color:var(--muted); user-select:none; }
.copy { flex-shrink:0; display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 var(--sp-25);
  background:var(--surface); color:var(--muted); border:1px solid var(--border); border-radius:var(--r-sm);
  font:inherit; font-family:'Pretendard',sans-serif; font-size:var(--fs-xs); font-weight:var(--fw-medium); cursor:pointer;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.copy:hover { color:var(--primary); border-color:var(--primary-border); }
.copy.done { color:var(--green); border-color:var(--green); }
.copy svg { width:12px; height:12px; }

/* ───────── 콜아웃 (좌보더 1줄) ───────── */
.callout { margin:var(--sp-6) 0; padding:var(--sp-2xs) 0 var(--sp-2xs) var(--sp-4); border-left:3px solid var(--orange);
  font-size:var(--fs-md); line-height:1.65; color:var(--text); }
.callout.info { border-left-color:var(--primary); }
.callout .lab { display:block; font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--orange); margin-bottom:var(--sp-2xs); }
.callout.info .lab { color:var(--primary); }
.callout b { font-weight:var(--fw-bold); color:var(--text-h); }

/* 결과 강조 단락 (verify) */
.result { margin:var(--sp-5) 0; padding-left:var(--sp-4); border-left:3px solid var(--primary); font-size:var(--fs-h); line-height:1.55; color:var(--text-h); }
.result b { font-weight:var(--fw-bold); }

/* ───────── 표 (보더리스 + 얇은 가로선) ───────── */
.tbl-wrap { overflow-x:auto; margin:var(--sp-4) 0; }
.tbl { width:100%; border-collapse:collapse; font-size:var(--fs-13); }
.tbl thead th { text-align:left; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--muted);
  padding:var(--sp-25) var(--sp-md) var(--sp-25) 0; border-bottom:1px solid var(--border); white-space:nowrap; }
.tbl tbody td { padding:var(--sp-md) var(--sp-md) var(--sp-md) 0; border-bottom:1px solid var(--border); color:var(--text); vertical-align:top; line-height:1.55; }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl td.mono, .tbl td .mono { font-family:var(--mono); font-size:var(--fs-sm); color:var(--muted); }
.tbl strong { font-weight:var(--fw-semibold); color:var(--text-h); }
.tbl .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tbl tr.sum td { border-top:1px solid var(--border-h); border-bottom:none; font-weight:var(--fw-bold); color:var(--text-h); padding-top:var(--sp-35); }
.tbl tr.sum .num { color:var(--primary); }
.sig-bad { color:var(--red); font-weight:var(--fw-bold); }

/* 작은 칩 (포트/DB) */
.tag { display:inline-block; padding:1px 7px; border-radius:var(--r-sm); font-size:var(--fs-xs); font-weight:var(--fw-medium);
  background:var(--surface2); border:1px solid var(--border); color:var(--text); margin:1px 2px 1px 0; }
.tag.port { font-family:var(--mono); color:var(--primary); }
[data-theme="dark"] .tag.port { color:var(--text-h); }

/* ───────── 카드 그리드 (사양/카드) ───────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-6); }
.card.accent { border-color:var(--primary-border); background:var(--primary-bg); }
.card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); padding-bottom:var(--sp-md); border-bottom:1px solid var(--border); }
.card-label { font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); }
.card.accent .card-label { color:var(--primary); }
.card-title { font-size:var(--fs-h); font-weight:var(--fw-bold); color:var(--text-h); margin-top:2px; }
.card-tag { font-size:var(--fs-2xs); font-weight:var(--fw-semibold); letter-spacing:.5px; padding:3px 9px; border-radius:var(--r-pill); background:var(--surface2); color:var(--muted); }
.card.accent .card-tag { background:var(--primary-bg); color:var(--primary); }
.kv { display:flex; flex-direction:column; gap:var(--sp-25); }
.kv-row { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-md); font-size:var(--fs-13); }
.kv-row .k { color:var(--muted); flex-shrink:0; min-width:64px; }
.kv-row .v { color:var(--text); text-align:right; font-weight:var(--fw-medium); line-height:1.5; }
.card-foot { margin-top:var(--sp-4); padding-top:var(--sp-md); border-top:1px solid var(--border); font-size:var(--fs-xs); color:var(--muted); display:flex; align-items:center; gap:var(--sp-xs); }
.card-foot svg { width:13px; height:13px; opacity:.75; flex-shrink:0; }

/* ───────── 스텝 ───────── */
.steps { display:flex; flex-direction:column; gap:var(--sp-5); }
.step { display:flex; gap:var(--sp-4); }
.step-n { flex-shrink:0; width:28px; height:28px; border-radius:var(--r-md); background:var(--primary-bg); color:var(--primary);
  font-size:var(--fs-13); font-weight:var(--fw-bold); display:flex; align-items:center; justify-content:center; margin-top:2px; }
.step-b { flex:1; min-width:0; }
.step-t { font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--text-h); margin-bottom:var(--sp-2xs); }
.step-d { font-size:var(--fs-13); color:var(--muted); }

/* ───────── 다운로드 번들 카드 ───────── */
.dl-card { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  background:var(--surface); border:1px solid var(--primary-border); border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6); text-decoration:none; color:var(--text);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.dl-card:hover { text-decoration:none; border-color:var(--primary); background:var(--surface2); }
.dl-left { flex:1; min-width:0; }
.dl-badge { display:inline-block; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:1px; text-transform:uppercase;
  background:var(--primary-bg); color:var(--primary); padding:3px 10px; border-radius:var(--r-pill); margin-bottom:var(--sp-25); }
.dl-name { font-family:var(--mono); font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--text-h); word-break:normal; overflow-wrap:anywhere; margin-bottom:var(--sp-xs); }
.dl-desc { font-size:var(--fs-13); color:var(--muted); line-height:1.55; margin-bottom:var(--sp-sm); }
.dl-meta { display:flex; flex-wrap:wrap; gap:var(--sp-25); align-items:center; font-size:var(--fs-sm); color:var(--muted); }
.dl-meta .sep { opacity:.5; }
.dl-meta code { font-family:var(--mono); font-size:var(--fs-xs); background:var(--surface2); border:1px solid var(--border); padding:1px 6px; border-radius:var(--r-sm); color:var(--text); }
.dl-btn { flex-shrink:0; display:inline-flex; align-items:center; gap:var(--sp-xs); height:42px; padding:0 var(--sp-5);
  background:var(--primary); color:var(--on-accent); border-radius:var(--r-md); font-size:var(--fs-md); font-weight:var(--fw-semibold);
  transition:background var(--dur) var(--ease); }
.dl-card:hover .dl-btn { background:var(--primary-h); }
.dl-btn svg { width:16px; height:16px; }

/* ───────── 버튼 (보조 액션·다음단계) ───────── */
.btn { display:inline-flex; align-items:center; gap:var(--sp-sm); height:42px; padding:0 var(--sp-5);
  border-radius:var(--r-md); font-size:var(--fs-md); font-weight:var(--fw-semibold); cursor:pointer; transition:all var(--dur) var(--ease); }
.btn svg { width:16px; height:16px; }
.btn-outline { background:var(--surface); color:var(--text-h); border:1px solid var(--border-h); }
.btn-outline:hover { text-decoration:none; border-color:var(--primary); color:var(--primary); }
.btn-soft { background:var(--primary-bg); color:var(--primary); border:1px solid var(--primary-border); }
.btn-soft:hover { text-decoration:none; background:var(--primary); color:var(--on-accent); border-color:var(--primary); }
/* primary CTA (solid) — #249 §s-ui-common .v3-btn--primary 정합. 둥실/글로우 없음 */
.btn-primary { background:var(--primary); color:var(--on-accent); border:1px solid var(--primary); }
.btn-primary:hover { text-decoration:none; background:var(--primary-h); border-color:var(--primary-h); }

/* ───────── 다음 단계 / 평문 블록 ───────── */
.next p { font-size:var(--fs-md); line-height:1.7; color:var(--muted); margin:0 0 var(--sp-25); }
.next strong { color:var(--text-h); font-weight:var(--fw-semibold); }

/* ───────── 푸터 ───────── */
.footer { border-top:1px solid var(--border); margin-top:clamp(40px,7vh,72px); padding:clamp(32px,5vh,48px) 0 clamp(40px,6vh,56px); text-align:center; }
.footer .fmark { display:inline-flex; align-items:center; gap:var(--sp-sm); margin-bottom:var(--sp-md); color:var(--text-h); }
.footer .fmark svg { width:26px; height:26px; }
.footer .fwm { font-size:var(--fs-13); font-weight:var(--fw-black); letter-spacing:2.5px; }
.footer .tagline { font-size:var(--fs-13); color:var(--muted); margin:0 0 var(--sp-xs); }
.footer .copy-txt { font-size:var(--fs-xs); color:var(--subtle); margin:0; }
.footer a { color:var(--muted); }

/* ───────── 노티스 배너 ───────── */
.banner { display:flex; gap:var(--sp-md); align-items:flex-start; margin:var(--sp-5) 0; padding:var(--sp-35) var(--sp-4);
  background:var(--orange-bg); border:1px solid color-mix(in srgb,var(--orange) 30%,transparent); border-radius:var(--r-md);
  font-size:var(--fs-13); line-height:1.6; color:var(--text); }
.banner svg { width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--orange); }
.banner b { font-weight:var(--fw-semibold); color:var(--text-h); }
.banner code { font-family:var(--mono); font-size:var(--fs-sm); background:var(--surface); border:1px solid var(--border); padding:1px 5px; border-radius:var(--r-sm); }

/* ───────── 체크리스트 항목 ───────── */
.checklist { list-style:none; margin:0; padding:0; }
.checklist li { display:flex; align-items:flex-start; gap:var(--sp-25); padding:var(--sp-sm) 0; border-bottom:1px solid var(--border); font-size:var(--fs-md); color:var(--text); line-height:1.6; }
.checklist li:last-child { border-bottom:none; }
.checklist .box { width:16px; height:16px; border:1.5px solid var(--border-h); border-radius:var(--r-sm); flex-shrink:0; margin-top:2px; background:var(--surface); }
.cl-group { font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.6px; text-transform:uppercase; color:var(--primary); margin:var(--sp-4) 0 var(--sp-xs); }
.cl-group:first-child { margin-top:0; }

/* ───────── 타임라인 (설치 계획) ───────── */
.timeline { display:flex; flex-direction:column; }
.tl-item { display:flex; gap:var(--sp-4); }
.tl-left { display:flex; flex-direction:column; align-items:center; width:64px; flex-shrink:0; }
.tl-day { background:var(--primary); color:var(--on-accent); font-size:var(--fs-xs); font-weight:var(--fw-bold); padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.tl-line { width:2px; background:var(--border); flex:1; min-height:16px; margin:var(--sp-xs) 0; }
.tl-item:last-child .tl-line { display:none; }
.tl-right { flex:1; min-width:0; padding-bottom:var(--sp-5); }
.tl-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.tl-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-md); flex-wrap:wrap; padding:var(--sp-md) var(--sp-4); border-bottom:1px solid var(--border); background:var(--surface2); }
.tl-title { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text-h); }
.tl-owner { font-size:var(--fs-xs); color:var(--muted); }
.tl-owner .t { font-size:var(--fs-xs); color:var(--muted); margin-left:var(--sp-xs); }
.tl-body { padding:var(--sp-4); }
.tl-body ul { list-style:none; margin:0; padding:0; }
.tl-body ul li { position:relative; padding:3px 0 3px var(--sp-4); font-size:var(--fs-md); color:var(--text); line-height:1.6; }
.tl-body ul li::before { content:''; position:absolute; left:2px; top:11px; width:4px; height:4px; border-radius:var(--r-pill); background:var(--primary); }
.tl-confirm { margin-top:var(--sp-md); padding-top:var(--sp-md); border-top:1px solid var(--border); font-size:var(--fs-sm); color:var(--muted); line-height:1.55; }
.tl-confirm b { color:var(--green); font-weight:var(--fw-semibold); }

/* ───────── 아키텍처 다이어그램 (mono) ───────── */
.arch { background:var(--surface3); border:1px solid var(--border); color:var(--text); font-family:var(--mono);
  font-size:var(--fs-sm); line-height:1.55; padding:var(--sp-5); border-radius:var(--r-md); overflow-x:auto; white-space:pre; }
[data-theme="dark"] .arch { background:#0d0d14; }
.arch .w { color:var(--text-h); font-weight:var(--fw-bold); }
.arch .b { color:var(--primary); }
.arch .g { color:var(--green); }
.arch .y { color:var(--orange); }
.arch .m { color:var(--subtle); }

/* ───────── A/B 분기 카드 (verify) ───────── */
.branch { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); margin:var(--sp-4) 0; }
.branch-col { border-left:2px solid var(--border-h); padding-left:var(--sp-4); }
.branch-col h4 { margin:0 0 var(--sp-2xs); font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text-h); }
.branch-col .sub { margin:0 0 var(--sp-md); font-size:var(--fs-sm); color:var(--muted); }
.branch-col ol { margin:0; padding-left:var(--sp-4); font-size:var(--fs-13); line-height:1.7; color:var(--text); }
.branch-col ol li { margin-bottom:var(--sp-2xs); }
.branch-col ol li::marker { color:var(--muted); }

/* 메타 정보 행 (verify hero) */
.meta { border-top:1px solid var(--border); margin-top:var(--sp-6); padding-top:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-sm); max-width:480px; }
.meta-row { display:flex; gap:var(--sp-35); font-size:var(--fs-13); }
.meta-row .k { color:var(--muted); min-width:72px; }
.meta-row .v { color:var(--text-h); font-weight:var(--fw-semibold); }
.meta-row .v.mono { font-family:var(--mono); font-size:var(--fs-sm); }

/* 스크린샷 */
.shot { width:100%; border:1px solid var(--border); border-radius:var(--r-md); margin:var(--sp-4) 0 var(--sp-xs); display:block; }
.shot-cap { font-size:var(--fs-sm); color:var(--muted); margin:0 0 var(--sp-sm); }

/* ───────── 구성도 SVG (시스템 아키텍처) ───────── */
.diagram { width:100%; height:auto; display:block; margin:var(--sp-5) 0; }
.diagram text { word-break:normal; }
.diag-zone { fill:var(--surface2); stroke:var(--border); }
.diag-box { fill:var(--surface); stroke:var(--border-h); }
.diag-app { fill:var(--primary-bg); stroke:var(--primary-border); }
.diag-t { fill:var(--text-h); font-weight:var(--fw-bold); }
.diag-st { fill:var(--muted); font-weight:var(--fw-medium); }
.diag-st.diag-cn { font-weight:var(--fw-normal); }   /* 컨테이너명 굵기=본문/verify 표 mono(400)와 통일 — .diag-st(500)보다 명시도 우선 */
.diag-line { stroke:var(--border-h); fill:none; }
.diag-arrow { fill:var(--border-h); }
.diag-port { fill:var(--primary); font-weight:var(--fw-semibold); }
.diag-zlabel { fill:var(--muted); font-weight:var(--fw-semibold); letter-spacing:1px; }
.diag-bm1 { stroke:var(--spec-purple); } .diag-bm2 { stroke:var(--spec-green); } .diag-bm3 { stroke:var(--spec-orange); }

/* ───────── 엑셀 다운로드 버튼 ───────── */
.xls-row { display:flex; flex-wrap:wrap; gap:var(--sp-md); margin:var(--sp-4) 0; }
.xls-card { display:flex; align-items:center; gap:var(--sp-35); flex:1; min-width:280px; padding:var(--sp-4) var(--sp-5);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); text-decoration:none; color:var(--text);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.xls-card:hover { text-decoration:none; border-color:var(--green); background:var(--green-bg); }
.xls-ico { flex-shrink:0; width:38px; height:38px; border-radius:var(--r-md); background:var(--green-bg); color:var(--green);
  display:flex; align-items:center; justify-content:center; }
.xls-ico svg { width:20px; height:20px; }
.xls-b { flex:1; min-width:0; }
.xls-t { display:block; font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--text-h); }
.xls-d { display:block; font-size:var(--fs-sm); color:var(--muted); margin-top:2px; line-height:1.45; }
.xls-dl { flex-shrink:0; color:var(--muted); }
.xls-card:hover .xls-dl { color:var(--green); }

/* 설치 문서 페이지는 항상 즉시 렌더 — 스크롤 숨김 애니메이션 없음(신뢰·#249 목적없는 모션 자제). */
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* ───────── 공통 폼 컨트롤 (다운로드 게이트 등) — admin v3 규격을 install.css 토큰으로 포팅 ─────────
   2026-06-19 yjmoon  다운로드 입력폼을 공통 UI(인풋·체크박스)에 정렬. 버튼은 .btn/.btn-soft/.btn-outline 재사용. */
.fld { display:flex; flex-direction:column; gap:var(--sp-xs); }
.fld > span:first-child { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text); }
.fld input, .fld textarea { font:inherit; font-size:var(--fs-sm); color:var(--text-h);
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--sp-sm) var(--sp-md); width:100%; box-sizing:border-box;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fld input::placeholder, .fld textarea::placeholder { color:var(--subtle); }
/* #249 §c-input v3.5.69 F안 SSOT — focus = hover 동일 회색(border-h) + ring 제거. invalid 만 별도 시그널 */
.fld input:hover, .fld textarea:hover { border-color:var(--border-h); }
.fld input:focus, .fld textarea:focus { outline:none; border-color:var(--border-h); box-shadow:none; }
.fld textarea { resize:vertical; min-height:48px; }
/* v3 체크박스 — 시각 숨김 네이티브 input + 옆 .v3-check 박스를 input:checked 가 CSS 로 구동(JS 불필요) */
.v3-check-wrap { position:relative; display:inline-flex; align-items:flex-start; cursor:pointer; vertical-align:middle; }
.v3-check-input { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.v3-check { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex-shrink:0;
  border:1.5px solid var(--border); border-radius:var(--r-sm); background:var(--surface);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.v3-check svg { width:10px; height:10px; color:var(--on-accent); opacity:0; transition:opacity var(--dur) var(--ease); }
.v3-check-wrap:hover .v3-check { border-color:var(--primary); }
.v3-check-input:checked + .v3-check { background:var(--primary); border-color:var(--primary); }
.v3-check-input:checked + .v3-check svg { opacity:1; }
.v3-check-input:focus-visible + .v3-check { box-shadow:0 0 0 3px var(--primary-bg); }
.v3-check-label { gap:var(--sp-sm); align-items:flex-start; font-size:var(--fs-md); color:var(--text); line-height:1.55; }
.v3-check-label a { color:var(--link); }
/* #249 §c-input 인라인 검증 — 실패 필드 빨강 테두리 + 직하 메시지(aria-live). 브라우저 native 툴팁 대체 */
.fld input.error, .fld textarea.error,
.fld input.error:focus, .fld textarea.error:focus { border-color:var(--red); box-shadow:none; }
.v3-check-input.error + .v3-check { border-color:var(--red); }
.fld-err { font-size:var(--fs-xs); color:var(--red); margin-top:var(--sp-2xs); line-height:1.45; }

/* ───────── 반응형 ───────── */
@media (max-width:760px) {
  .grid-2 { grid-template-columns:1fr; }
  .branch { grid-template-columns:1fr; gap:var(--sp-4); }
  .dl-card { flex-direction:column; align-items:stretch; }
  .dl-btn { justify-content:center; }
  .cmd-row { flex-direction:column; gap:var(--sp-sm); }
  .copy { align-self:flex-end; }
  .diagram { min-width:640px; }
}

/* 릴리즈 노트 — 박스형 강조 링크 */
.rel-link { display:inline-flex; align-items:center; gap:var(--sp-sm);
  padding:var(--sp-md) var(--sp-4); border:1px solid var(--primary-border);
  border-radius:var(--r-md); background:var(--primary-bg); color:var(--text-h);
  font-size:var(--fs-md); font-weight:var(--fw-semibold); text-decoration:none;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.rel-link svg { width:18px; height:18px; color:var(--primary); flex:none; }
.rel-link .rel-arrow { color:var(--primary); font-weight:var(--fw-bold); }
.rel-link:hover { border-color:var(--border-h); background:var(--surface2); }
.rel-link:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }