/* Brand Guide 화면 (2026-10-17 재작성). 이 읽기 화면에만 적용한다. 견본은 공통 site-ui 요소를 그대로 쓴다.
   구성 패턴은 Publishing 디자인 시스템(번호 목차·n/N, 핵심 카드, 구역 머리 띠, 비교표)을 따르고 색·표면은 brand-tech.css 값을 쓴다. */
#view.brand-guide-view .bg-guide{--bg-gap:28px;--bg-pad:32px;font-size:var(--fs-base);line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
#view.brand-guide-view .bg-guide [hidden]{display:none!important}
#view.brand-guide-view .bg-guide :is(h1,h2,h3,h4,p,figure,dl,dd,ul,ol){margin:0}
#view.brand-guide-view .bg-guide h2:focus{outline:none}
#view.brand-guide-view .bg-guide code{font-family:var(--font-tech,var(--font-mono));font-size:.92em;padding:1px 6px;border-radius:var(--radius-xs);background:var(--bg-soft);border:1px solid var(--glass-line,var(--border))}
#view.brand-guide-view .tech-mono{font-family:var(--font-tech,var(--font-mono));font-variant-numeric:tabular-nums}
.bg-load-message{padding:40px 0;color:var(--text-soft)}
.bg-load-message button{margin-left:12px}

/* 공통 유리 카드 */
#view.brand-guide-view :is(.bg-hero,.bg-index,.bg-section){
  border:1px solid transparent;border-radius:var(--radius);
  background:linear-gradient(var(--glass-surface,var(--bg-elev)),var(--glass-surface,var(--bg-elev))) padding-box,var(--edge,linear-gradient(var(--border),var(--border))) border-box;
  box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}

/* ── 표지 ─────────────────────────────────────────────────────── */
#view.brand-guide-view .bg-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:40px;margin:0}
#view.brand-guide-view .bg-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-xs);font-weight:600}
#view.brand-guide-view .bg-hero h1{margin:18px 0 16px;font-size:clamp(34px,4vw,52px);line-height:1.2;letter-spacing:-.045em}
#view.brand-guide-view .bg-title-accent{color:var(--accent-2,var(--brand-cyan));-webkit-text-fill-color:var(--accent-2,var(--brand-cyan))}
#view.brand-guide-view .bg-hero-intro{color:var(--text-soft);font-size:var(--fs-md);line-height:1.7;max-width:34em}
/* 표지 이름의 뜻: G → Y → O 를 한 줄 흐름으로. 마지막 O가 표지 그림의 빛과 같은 도착점이다. */
#view.brand-guide-view .bg-guide .bg-hero-name{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px;padding:0;list-style:none}
#view.brand-guide-view .bg-hero-name::before{content:"";position:absolute;left:22px;right:calc(33.333% - 22px);top:22px;height:1px;
  background:linear-gradient(90deg,var(--glass-line-strong,var(--border-strong)),var(--accent-2,var(--accent)))}
#view.brand-guide-view .bg-hero-name li{position:relative;display:grid;gap:4px;align-content:start;animation:bg-name-in var(--dur-slow) var(--ease) both}
#view.brand-guide-view .bg-hero-name li:nth-child(2){animation-delay:90ms}
#view.brand-guide-view .bg-hero-name li:nth-child(3){animation-delay:180ms}
#view.brand-guide-view .bg-name-letter{display:grid;place-items:center;width:44px;height:44px;margin-bottom:10px;border:1px solid var(--glass-line-strong,var(--border-strong));border-radius:var(--radius-xs);
  background:var(--bg-elev);color:var(--text);font-size:20px;font-weight:650;letter-spacing:0;line-height:1}
#view.brand-guide-view .bg-hero-name li:last-child .bg-name-letter{border-color:var(--accent-2,var(--accent));color:var(--accent-2,var(--accent));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-2,var(--accent)) 14%,transparent),0 0 18px color-mix(in srgb,var(--accent-2,var(--accent)) 30%,transparent)}
#view.brand-guide-view .bg-hero-name b{font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em}
#view.brand-guide-view .bg-hero-name li>span:last-child{color:var(--text-soft);font-size:var(--fs-sm);line-height:1.55;white-space:nowrap}
@keyframes bg-name-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#view.brand-guide-view .bg-hero-name li{animation:none}}
#view.brand-guide-view .bg-mark{border-radius:25%;object-fit:cover}
/* 표지 그림: 흩어진 빛점(기록)이 흐름(관계)을 따라 한 점의 빛(판단)으로 모인다. 원본 brand/cover-generator/. */
#view.brand-guide-view .bg-cover{position:relative;height:330px;overflow:hidden;border-radius:var(--radius-sm);border:1px solid var(--glass-line,var(--border));background:#071018;box-shadow:var(--shadow)}
#view.brand-guide-view .bg-cover-image{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 45%}
#view.brand-guide-view .bg-cover::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  background:linear-gradient(180deg,transparent 55%,rgba(4,6,10,.35))}
@media (max-width:600px){#view.brand-guide-view .bg-cover{height:260px}}
#view.brand-guide-view .bg-hero-aside .site-page-actions:empty,#view.brand-guide-view .bg-hero-aside .site-page-status:empty{display:none}

/* ── 읽기 틀: 목차 + 본문 ─────────────────────────────────────── */
#view.brand-guide-view .bg-reader{display:grid;grid-template-columns:272px minmax(0,1fr);gap:var(--bg-gap);align-items:start;margin-top:var(--bg-gap)}
#view.brand-guide-view .bg-index{padding:14px;display:grid;gap:8px}
@media (min-width:901px) and (min-height:860px){#view.brand-guide-view .bg-index{position:sticky;top:calc(var(--ui-nav-top) + var(--nav-h) + 16px)}}
#view.brand-guide-view .bg-search-label{font-size:var(--fs-xs);color:var(--text-mute);font-weight:600}
#view.brand-guide-view .bg-search{width:100%;min-height:var(--ui-control-height);padding:8px 12px;border:1px solid var(--glass-line-strong,var(--border-strong));border-radius:var(--radius-xs);background:var(--bg-soft);color:var(--text);font:inherit;font-size:var(--fs-sm)}
#view.brand-guide-view .bg-search::placeholder{color:var(--text-mute)}
#view.brand-guide-view .bg-search-status{font-size:var(--fs-xs);color:var(--text-mute)}
#view.brand-guide-view .bg-index-sections>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px;cursor:pointer;list-style:none;font-size:var(--fs-xs);color:var(--text-soft);font-weight:600}
#view.brand-guide-view .bg-index-sections>summary::-webkit-details-marker{display:none}
#view.brand-guide-view .bg-current-count{color:var(--text);font-size:var(--fs-xs)}
#view.brand-guide-view .bg-toc{display:grid;gap:2px;margin-top:4px}
#view.brand-guide-view .bg-toc-part{margin:8px 2px 0!important;color:var(--text-mute);font-size:11px;font-weight:600;letter-spacing:.04em}
#view.brand-guide-view .bg-toc-part:first-child{margin-top:0!important}
#view.brand-guide-view .bg-toc a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:6px;align-items:start;padding:5px 10px;border-radius:var(--radius-sm);color:var(--text-soft);text-decoration:none;border:1px solid transparent;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
#view.brand-guide-view .bg-toc a:hover{background:var(--bg-soft);color:var(--text);text-decoration:none}
#view.brand-guide-view .bg-toc-no{font-size:11px;line-height:20px;color:var(--text-mute)}
#view.brand-guide-view .bg-toc-copy{display:grid;min-width:0}
#view.brand-guide-view .bg-toc-title{font-size:var(--fs-sm);font-weight:600;line-height:20px}
#view.brand-guide-view .bg-toc small{display:none;font-size:var(--fs-xs);line-height:1.5}
#view.brand-guide-view .bg-toc a[aria-current="location"]{color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--accent-strong,var(--accent)) 88%,#fff),var(--accent-strong,var(--accent)));box-shadow:0 4px 14px color-mix(in srgb,var(--accent-strong,var(--accent)) 24%,transparent)}
#view.brand-guide-view .bg-toc a[aria-current="location"] .bg-toc-no{color:rgba(255,255,255,.8)}
#view.brand-guide-view .bg-toc a[aria-current="location"] small{display:block;color:rgba(255,255,255,.86)}
#view.brand-guide-view .bg-content{display:grid;gap:var(--bg-gap);min-width:0}
#view.brand-guide-view .bg-no-results{padding:24px;border:1px dashed var(--glass-line-strong,var(--border-strong));border-radius:var(--radius);color:var(--text-soft)}

/* ── 장 ───────────────────────────────────────────────────────── */
#view.brand-guide-view .bg-section{padding:0 var(--bg-pad) var(--bg-pad);display:grid;gap:20px;scroll-margin-top:calc(var(--ui-nav-top) + var(--nav-h) + 20px);min-width:0}
#view.brand-guide-view .bg-chapter-head{display:flex;align-items:center;gap:16px;margin:0 calc(-1 * var(--bg-pad));padding:18px var(--bg-pad);border-bottom:1px solid var(--glass-line,var(--border));border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
#view.brand-guide-view .bg-chapter-no{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-sm);font-weight:700;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
#view.brand-guide-view .bg-chapter-part{color:var(--text-mute);font-size:var(--fs-xs);font-weight:600}
#view.brand-guide-view .bg-chapter-head h2{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.025em;line-height:1.35}
#view.brand-guide-view .bg-key{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center;padding-top:8px}
#view.brand-guide-view .bg-key:has(>.bg-key-copy:only-child){grid-template-columns:minmax(0,1fr)}
#view.brand-guide-view .bg-key-copy{display:grid;gap:10px;justify-items:start}
#view.brand-guide-view .bg-key-copy>p:not(.bg-key-label):not(.bg-key-statement){color:var(--text-soft);max-width:40em}
#view.brand-guide-view .bg-key-label{color:var(--accent-ink);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em}
#view.brand-guide-view .bg-key-statement{font-size:clamp(20px,2.1vw,26px);font-weight:650;line-height:1.4;letter-spacing:-.03em;color:var(--text);padding-bottom:12px;border-bottom:1px solid var(--glass-line,var(--border));width:100%}
#view.brand-guide-view .bg-sub{display:flex;align-items:center;gap:10px;margin-top:8px!important;font-size:var(--fs-md)}
#view.brand-guide-view .bg-sub::before{content:"";width:3px;height:16px;border-radius:2px;background:var(--accent)}
#view.brand-guide-view .bg-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
#view.brand-guide-view .bg-split>div{display:grid;gap:12px;align-content:start}

/* 문장 블록 */
#view.brand-guide-view .bg-note{color:var(--text-soft);font-size:var(--fs-sm);line-height:1.7}
#view.brand-guide-view :is(.bg-callout,.bg-avoid){padding:14px 16px;border-radius:var(--radius-sm);font-size:var(--fs-sm);line-height:1.7;color:var(--text-soft);border-left:3px solid var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 7%,transparent)}
#view.brand-guide-view .bg-avoid{border-left-color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,transparent)}
#view.brand-guide-view :is(.bg-callout,.bg-avoid) b{display:block;margin-bottom:2px;color:var(--text)}
#view.brand-guide-view .bg-rules{display:grid;gap:8px;padding:0;list-style:none;color:var(--text-soft)}
#view.brand-guide-view ul.bg-rules>li{position:relative;padding-left:18px}
#view.brand-guide-view ul.bg-rules>li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:1px;background:var(--accent)}
#view.brand-guide-view ol.bg-rules{counter-reset:bg-rule}
#view.brand-guide-view ol.bg-rules>li{counter-increment:bg-rule;display:grid;grid-template-columns:28px minmax(0,1fr)}
#view.brand-guide-view ol.bg-rules>li::before{content:counter(bg-rule,decimal-leading-zero);font-family:var(--font-tech,var(--font-mono));font-size:var(--fs-xs);color:var(--accent-ink);line-height:2.2}

/* 표 */
#view.brand-guide-view .bg-table-wrap{border:1px solid var(--glass-line,var(--border));border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-soft)}
#view.brand-guide-view .bg-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--fs-sm);overflow-wrap:anywhere}
#view.brand-guide-view .bg-table :is(th,td){padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--glass-line,var(--border))}
#view.brand-guide-view .bg-table tr:last-child>:is(th,td){border-bottom:0}
#view.brand-guide-view .bg-table thead th{color:var(--text-mute);font-size:var(--fs-xs);font-weight:600;background:color-mix(in srgb,var(--accent) 5%,transparent)}
#view.brand-guide-view .bg-table tbody th{width:28%;color:var(--text);font-weight:650}
#view.brand-guide-view .bg-table td{color:var(--text-soft)}
#view.brand-guide-view .bg-table [data-result=pass]{color:var(--ok)}
#view.brand-guide-view .bg-table [data-result=fail]{color:var(--danger);font-weight:600}
#view.brand-guide-view .bg-disclosure{border:1px solid var(--glass-line,var(--border));border-radius:var(--radius-sm);padding:0 16px}
#view.brand-guide-view .bg-disclosure>summary{padding:12px 0;cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
#view.brand-guide-view .bg-disclosure[open]{padding-bottom:16px}
#view.brand-guide-view .bg-disclosure[open]>summary{margin-bottom:8px;border-bottom:1px solid var(--glass-line,var(--border))}
#view.brand-guide-view .bg-disclosure>:not(summary)+:not(summary){margin-top:12px}

/* ── 01 G.Y.O ─────────────────────────────────────────────────── */
#view.brand-guide-view .bg-identity-list{display:grid;gap:0;border:1px solid var(--glass-line,var(--border));border-radius:var(--radius-sm);overflow:hidden}
#view.brand-guide-view .bg-identity-list>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px 16px;border-bottom:1px solid var(--glass-line,var(--border))}
#view.brand-guide-view .bg-identity-list>div:last-child{border-bottom:0}
#view.brand-guide-view .bg-identity-list dt{color:var(--text-mute);font-size:var(--fs-xs);font-weight:600;line-height:2}
#view.brand-guide-view .bg-identity-list dd{display:grid}
#view.brand-guide-view .bg-identity-list dd span{color:var(--text-soft);font-size:var(--fs-sm)}
#view.brand-guide-view .bg-principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0;list-style:none}
#view.brand-guide-view .bg-principles li{display:grid;gap:6px;align-content:start;padding:16px;border:1px solid var(--glass-line,var(--border));border-radius:var(--radius-sm);background:var(--bg-soft)}
#view.brand-guide-view .bg-principles li>span{color:var(--accent-ink);font-size:var(--fs-xs)}
#view.brand-guide-view .bg-principles h4{font-size:var(--fs-md)}
#view.brand-guide-view .bg-principles p{color:var(--text-soft);font-size:var(--fs-sm);line-height:1.65}

/* ── 02 로고 ──────────────────────────────────────────────────── */
#view.brand-guide-view .bg-clearspace{display:grid;justify-items:center;gap:10px}
#view.brand-guide-view .bg-logo-boundary{padding:25px;border:1px dashed var(--accent);border-radius:var(--radius-xs);background:color-mix(in srgb,var(--accent) 6%,transparent)}
#view.brand-guide-view .bg-logo-boundary img{display:block}
#view.brand-guide-view .bg-clearspace figcaption{font-size:var(--fs-xs);color:var(--text-mute)}
#view.brand-guide-view .bg-logo-sizes{display:flex;align-items:flex-end;gap:24px}
#view.brand-guide-view .bg-logo-sizes figure{display:grid;justify-items:center;gap:6px}
#view.brand-guide-view .bg-logo-sizes figcaption{font-size:var(--fs-xs);color:var(--text-mute)}
#view.brand-guide-view .bg-wordmark{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--glass-line,var(--border));border-radius:var(--radius-sm);background:var(--bg-soft)}
#view.brand-guide-view .bg-wordmark div{display:grid}
#view.brand-guide-view .bg-wordmark strong{font-size:26px;letter-spacing:.14em;line-height:1.1}
#view.brand-guide-view .bg-wordmark span{font-size:13px;color:var(--text-soft)}

/* ── 03 색 ────────────────────────────────────────────────────── */
#view.brand-guide-view .bg-brand-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#view.brand-guide-view .bg-swatch{display:grid;border:1px solid var(--bg-preview-border,var(--glass-line,var(--border)));border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-preview-surface,var(--bg-soft))}
#view.brand-guide-view .bg-swatch-chip{display:block;height:44px;background:var(--bg-swatch-color)}
#view.brand-guide-view .bg-brand-colors .bg-swatch-chip{height:88px}
#view.brand-guide-view .bg-swatch figcaption{display:grid;gap:2px;padding:10px 12px}
#view.brand-guide-view .bg-swatch strong{font-size:var(--fs-sm);color:var(--bg-preview-text,var(--text))}
#view.brand-guide-view .bg-swatch code{padding:0;border:0;background:none;font-size:var(--fs-xs);color:var(--bg-preview-soft,var(--text-soft))}
#view.brand-guide-view .bg-palette-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#view.brand-guide-view .bg-palette-panel{padding:18px;border-radius:var(--radius-sm);background:var(--bg-preview-bg);color:var(--bg-preview-text);border:1px solid var(--bg-preview-border)}
#view.brand-guide-view .bg-palette-panel h3{margin-bottom:12px;font-size:var(--fs-md);color:var(--bg-preview-text)}
#view.brand-guide-view .bg-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

/* ── 04 글자 ──────────────────────────────────────────────────── */
#view.brand-guide-view .bg-type-samples{display:grid;gap:12px;padding:20px;border:1px solid var(--glass-line,var(--border));border-radius:var(--radius-sm);background:var(--bg-soft)}
#view.brand-guide-view .bg-type-title{font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1.25}
#view.brand-guide-view .bg-type-samples p:nth-child(2){color:var(--text-soft)}
#view.brand-guide-view .bg-type-numbers{font-size:20px;font-weight:600;letter-spacing:-.01em}
#view.brand-guide-view .bg-type-numbers small{font-size:13px;color:var(--text-mute)}
#view.brand-guide-view .bg-dodont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#view.brand-guide-view .bg-dodont figure{display:grid;gap:10px;align-content:start;padding:16px;border:1px solid var(--glass-line,var(--border));border-radius:var(--radius-sm)}
#view.brand-guide-view .bg-dodont figcaption{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700}
#view.brand-guide-view .bg-dodont figcaption::before{content:"";width:8px;height:8px;border-radius:50%}
#view.brand-guide-view .bg-do figcaption{color:var(--ok)} #view.brand-guide-view .bg-do figcaption::before{background:var(--ok)}
#view.brand-guide-view .bg-dont figcaption{color:var(--danger)} #view.brand-guide-view .bg-dont figcaption::before{background:var(--danger)}
#view.brand-guide-view .bg-dodont figure>p:last-child{color:var(--text-soft);font-size:var(--fs-sm)}
#view.brand-guide-view .bg-dont-mono{font-family:var(--font-tech,var(--font-mono));letter-spacing:.08em;font-size:var(--fs-md)}

/* ── 05 표면과 깊이 ───────────────────────────────────────────── */
#view.brand-guide-view .bg-depth-stage{position:relative;min-height:236px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--glass-line,var(--border));
  background:radial-gradient(60% 70% at 20% 10%,var(--blob-a,transparent),transparent 70%),radial-gradient(50% 60% at 90% 30%,var(--blob-b,transparent),transparent 70%),
    var(--bg)}
#view.brand-guide-view .bg-depth{position:absolute;display:grid;gap:4px;align-content:start;padding:14px 16px;border:1px solid transparent;border-radius:var(--radius-sm);box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}
#view.brand-guide-view .bg-depth b{font-size:var(--fs-sm)}
#view.brand-guide-view .bg-depth span{font-size:11px;color:var(--text-soft)}
#view.brand-guide-view .bg-depth-panel{inset:16px 30% 16px 16px;background:linear-gradient(var(--glass-surface),var(--glass-surface)) padding-box,var(--edge) border-box}
#view.brand-guide-view .bg-depth-strong{left:28%;right:14%;top:72px;height:84px;background:linear-gradient(var(--glass-strong),var(--glass-strong)) padding-box,var(--edge) border-box}
#view.brand-guide-view .bg-depth-pop{right:16px;top:128px;width:46%;height:88px;background:linear-gradient(var(--glass-pop),var(--glass-pop)) padding-box,var(--edge) border-box;box-shadow:var(--shadow-lg)}
#view.brand-guide-view .bg-glass-sample{display:grid;gap:4px;padding:18px;border-radius:var(--radius-sm)}
#view.brand-guide-view .bg-glass-sample span{color:var(--text-soft);font-size:var(--fs-sm)}
#view.brand-guide-view .bg-glow-sample{border:2px solid var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 22%,var(--bg-elev));box-shadow:0 0 36px color-mix(in srgb,var(--accent-2,var(--accent)) 55%,transparent)}

/* ── 06 모션 ──────────────────────────────────────────────────── */
#view.brand-guide-view .bg-motion-demo{display:grid;gap:8px;padding:16px;border:1px solid var(--glass-line,var(--border));border-radius:var(--radius-sm);background:var(--bg-soft)}
#view.brand-guide-view .bg-motion-demo span{display:flex;align-items:center;padding:0 14px;border-radius:var(--radius-xs);font-size:var(--fs-xs);color:var(--text-soft);border:1px solid transparent;
  background:linear-gradient(var(--glass-strong,var(--bg-elev)),var(--glass-strong,var(--bg-elev))) padding-box,var(--edge,linear-gradient(var(--border),var(--border))) border-box}
#view.brand-guide-view .bg-motion-demo span:nth-child(1){height:30px;width:55%;font-weight:700;color:var(--text)}
#view.brand-guide-view .bg-motion-demo span:nth-child(2){height:56px}
#view.brand-guide-view .bg-motion-demo span:nth-child(n+3){height:38px;width:80%}

/* ── 07 화면 틀 ───────────────────────────────────────────────── */
#view.brand-guide-view .bg-frame-order{display:grid;gap:8px;padding:0;list-style:none;counter-reset:bg-step}
#view.brand-guide-view .bg-frame-order li{counter-increment:bg-step;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;padding:10px 12px;border:1px solid var(--glass-line,var(--border));border-radius:var(--radius-sm);background:var(--bg-soft)}
#view.brand-guide-view .bg-frame-order li::before{content:counter(bg-step,decimal-leading-zero);grid-row:span 2;font-family:var(--font-tech,var(--font-mono));font-size:var(--fs-xs);color:var(--accent-ink);line-height:1.9}
#view.brand-guide-view .bg-frame-order b{font-size:var(--fs-sm)}
#view.brand-guide-view .bg-frame-order span{font-size:var(--fs-xs);color:var(--text-soft)}
#view.brand-guide-view .bg-frame-lab{display:grid;gap:10px;padding:18px;border:1px dashed var(--glass-line-strong,var(--border-strong));border-radius:var(--radius-sm)}
#view.brand-guide-view .bg-frame-picker{max-width:280px}
#view.brand-guide-view .bg-frame-preview{min-width:0;padding:18px;border-radius:var(--radius-sm);background:var(--bg-soft)}
#view.brand-guide-view .bg-frame-preview h3{font-size:var(--fs-lg)}
#view.brand-guide-view .bg-special-demo{border-style:dashed}

/* ── 08 화면 요소 ─────────────────────────────────────────────── */
#view.brand-guide-view .bg-component-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#view.brand-guide-view .bg-demo{display:grid;gap:12px;align-content:start;padding:18px;border:1px solid var(--glass-line,var(--border));border-radius:var(--radius-sm);background:var(--bg-soft);min-width:0}
#view.brand-guide-view .bg-demo h3{font-size:var(--fs-md)}
#view.brand-guide-view .bg-button-samples{display:flex;flex-wrap:wrap;gap:var(--ui-action-gap)}
#view.brand-guide-view .bg-status-samples{display:flex;flex-wrap:wrap;gap:8px}
#view.brand-guide-view :is(.bg-status-ok,.bg-status-warn,.bg-status-danger){display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--radius-xs);font-size:var(--fs-xs);font-weight:600}
#view.brand-guide-view :is(.bg-status-ok,.bg-status-warn,.bg-status-danger)::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
#view.brand-guide-view .bg-status-ok{color:var(--ok);background:var(--ok-soft)}
#view.brand-guide-view .bg-status-warn{color:var(--warn);background:var(--warn-soft)}
#view.brand-guide-view .bg-status-danger{color:var(--danger);background:var(--danger-soft)}

/* ── 10 이미지 · 13 확인 ──────────────────────────────────────── */
#view.brand-guide-view :is(.bg-density-pair,.bg-check-grid){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#view.brand-guide-view :is(.bg-density-pair article,.bg-check-grid>div){display:grid;gap:8px;align-content:start;padding:18px;border:1px solid var(--glass-line,var(--border));border-radius:var(--radius-sm);background:var(--bg-soft)}
#view.brand-guide-view .bg-density-pair p{color:var(--text-soft);font-size:var(--fs-sm)}
#view.brand-guide-view .bg-density-pair small{color:var(--text-mute);font-size:var(--fs-xs)}
#view.brand-guide-view .bg-check-grid h3{font-size:var(--fs-md)}
#view.brand-guide-view .bg-checklist{display:grid;gap:8px;padding:0;list-style:none;color:var(--text-soft);font-size:var(--fs-sm)}
#view.brand-guide-view .bg-checklist li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px}
#view.brand-guide-view .bg-checklist li::before{content:"";width:14px;height:14px;margin-top:.3em;border:1.5px solid var(--accent);border-radius:3px}

/* ── 12 코드 · 바닥 ───────────────────────────────────────────── */
#view.brand-guide-view .bg-code{margin:0;padding:16px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--glass-line,var(--border));white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-xs);line-height:1.7}
#view.brand-guide-view .bg-code code{padding:0;border:0;background:none}
#view.brand-guide-view .bg-footer{display:flex;gap:10px;justify-content:center;padding:12px 0 4px;color:var(--text-mute);font-size:var(--fs-xs);letter-spacing:.12em}

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width:1100px){
  #view.brand-guide-view .bg-principles{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
@media (max-width:900px){
  #view.brand-guide-view .bg-guide{--bg-gap:20px;--bg-pad:24px}
  #view.brand-guide-view .bg-hero{grid-template-columns:minmax(0,1fr);padding:28px}
  #view.brand-guide-view .bg-reader{grid-template-columns:minmax(0,1fr)}
  #view.brand-guide-view .bg-key{grid-template-columns:minmax(0,1fr)}
  #view.brand-guide-view .bg-toc small{display:none!important}
}
@media (max-width:600px){
  #view.brand-guide-view .bg-guide{--bg-gap:14px;--bg-pad:16px}
  #view.brand-guide-view .bg-hero{padding:20px}
  #view.brand-guide-view .bg-chapter-head{gap:12px;padding:14px var(--bg-pad)}
  #view.brand-guide-view :is(.bg-split,.bg-dodont,.bg-palette-pair,.bg-component-examples,.bg-density-pair,.bg-check-grid,.bg-principles){grid-template-columns:minmax(0,1fr)}
  #view.brand-guide-view .bg-table :is(th,td){padding:10px}
  #view.brand-guide-view .bg-table tbody th{width:34%}
  #view.brand-guide-view .bg-identity-list>div{grid-template-columns:minmax(0,1fr);gap:2px}
  #view.brand-guide-view .bg-guide .bg-hero-name{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:24px}
  #view.brand-guide-view .bg-hero-name::before{left:18px;right:auto;top:18px;bottom:18px;width:1px;height:auto;background:linear-gradient(180deg,var(--glass-line-strong,var(--border-strong)),var(--accent-2,var(--accent)))}
  #view.brand-guide-view .bg-hero-name li{grid-template-columns:36px minmax(0,1fr);column-gap:14px}
  #view.brand-guide-view .bg-name-letter{grid-row:span 2;width:36px;height:36px;margin:0;font-size:17px}
  #view.brand-guide-view .bg-depth-panel{right:16px}
  #view.brand-guide-view .bg-depth-strong{left:24px;right:24px}
  #view.brand-guide-view .bg-depth-pop{width:auto;left:40px}
}
@media (prefers-reduced-motion:reduce){
  #view.brand-guide-view .bg-toc a{transition:none}
}
@media (min-width:901px) and (max-width:1000px){#view.brand-guide-view .bg-hero-name li>span:last-child{white-space:normal}}