/* demo.css - 데모 공용 디자인(빌드 없음, 파일 하나). 데모는 영문 우선(소유자 방침).
   랜딩(pages.yml이 생성)과 examples/*.html이 같은 시각 정체성을 공유한다.

   색의 출처는 브랜드 마크(assets/logo.svg)다. 마크의 실측값이 --markFrom, --markTo, --ink이고,
   나머지 면(배경/패널/테두리)은 마크의 터미널 색(#08112a)을 축으로 세운 네이비 램프다.
   텍스트로 쓰는 스와치는 배경 #0a0f1c 위 대비를 계산해 골랐다(전부 WCAG AA 이상):
   틸 9.9:1, 바이올렛 7.0:1, 딤 7.5:1, 블루 5.9:1, 레드 6.0:1, CTA 위 흰 글자 4.8:1.
   마크의 원본 그라디언트(#247efd)는 흰 글자 대비가 3.9:1이라 CTA에는 쓰지 않는다:
   CTA는 같은 색상(hue)을 유지하되 밝기만 낮춘 --ctaFrom을 쓴다. */
:root{
  /* 브랜드(assets/logo.svg 실측). tests/run.mjs [브랜드] 게이트가 마크와 일치를 검사한다. */
  --markFrom:#247efd; --markTo:#6c38fd; --ink:#08112a;
  /* 텍스트·강조용 스와치(아이콘 팔레트) */
  --blue:#5b8cff; --violet:#a78bfa; --teal:#00d4c8; --red:#ff6b7c;
  /* CTA 그라디언트: 흰 글자가 양 끝에서 AA를 넘도록 마크 블루를 낮춘 값 */
  --ctaFrom:#2a6bf2; --ctaTo:#6c38fd;
  /* 면 */
  --bg:#0a0f1c; --panel:#111a2e; --deep:#060b15; --border:#1e2a44; --borderHi:#2e3f66;
  --text:#e2e8f0; --dim:#94a3b8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 ui-monospace,'Cascadia Code',Consolas,'SF Mono',monospace}
.wrap{max-width:58rem;margin:0 auto;padding:1.1rem 1.2rem 4rem}
header.site{display:flex;align-items:baseline;gap:1.1rem;padding:.9rem 0;border-bottom:1px solid var(--border);margin-bottom:1.5rem;flex-wrap:wrap}
header.site .logo{color:var(--text);font-weight:700;text-decoration:none;font-size:1.05rem}
header.site nav{display:flex;gap:.9rem;flex-wrap:wrap}
header.site nav a{color:var(--dim);text-decoration:none;font-size:.92rem}
header.site nav a:hover{color:var(--text)}
header.site nav a.on{color:var(--teal)}
h1{font-size:1.45rem;margin:.2rem 0 .5rem}
.lead{color:var(--dim);margin:.2rem 0 1.1rem}
a{color:var(--blue)}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1rem 1.1rem;margin:.9rem 0}
.term{background:var(--deep);border:1px solid var(--border);border-radius:10px;padding:.9rem 1rem;white-space:pre-wrap;min-height:6.5rem;font-size:.95rem}
.badge{display:inline-block;border:1px solid var(--border);border-radius:99px;padding:.05rem .65rem;font-size:.8rem;color:var(--dim);margin:0 .35rem .35rem 0}
.badge.ok{color:var(--teal);border-color:#14453f}
.badge.info{color:var(--blue);border-color:#27407a}
.status{color:var(--blue);min-height:1.4rem}
.ok{color:var(--teal)} .err{color:var(--red)} .dim{color:var(--dim)}
button{background:linear-gradient(111deg,var(--ctaFrom),var(--ctaTo));color:#fff;border:0;border-radius:8px;padding:.55rem 1rem;font:inherit;font-weight:700;cursor:pointer}
button.ghost{background:transparent;color:var(--text);border:1px solid var(--border);font-weight:400}
button:disabled{opacity:.45;cursor:default}
textarea,input.line{width:100%;background:var(--deep);color:var(--text);border:1px solid var(--border);border-radius:8px;font:inherit;padding:.6rem .7rem}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1.2rem;margin:.6rem 0}
.kv .k{color:var(--dim)}
.barWrap{background:var(--deep);border:1px solid var(--border);border-radius:6px;height:14px;overflow:hidden}
.bar{height:100%;background:var(--blue);width:0;transition:width .5s}
.bar.ok{background:var(--teal)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:1.2rem 0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;text-decoration:none;color:var(--text);display:block}
.card:hover{border-color:var(--borderHi)}
.card h3{margin:.1rem 0 .35rem;color:var(--blue);font-size:1.02rem}
.card p{margin:0;color:var(--dim);font-size:.9rem}
footer.site{margin-top:2.6rem;padding-top:1rem;border-top:1px solid var(--border);color:var(--dim);font-size:.86rem;line-height:1.9}

/* 랜딩(브랜딩/히어로/수치 스트립/SNS) */
.logo{display:inline-flex;align-items:center;gap:.5rem;color:var(--text)}
.logo .py{color:var(--blue)}
.logoMark{flex:none}
header.site .sns{margin-left:auto}
/* 채널 행은 siteChrome.js의 <sns-links>가 그린다(라우트 공통 SSOT). 커스텀 엘리먼트 자체는
   레이아웃에서 비운다: 안의 nav.sns가 헤더의 flex 아이템이 되어 마크업이 있던 때와 같다. */
sns-links{display:contents}
.sns{display:flex;align-items:center;gap:2px}
.snsBtn{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--dim);text-decoration:none;transition:color .15s,background .15s}
.snsBtn:hover{color:var(--text);background:rgba(255,255,255,.08)}
.snsHeart{color:var(--red)}
.snsHeart:hover{color:#ff9aa6}
/* 히어로: 마크가 주인공. 마크/슬로건/CTA만 가운데 세우고, 코드(예시 터미널)는 왼쪽 정렬을 지킨다.
   마크 뒤의 번짐은 마크 그라디언트와 같은 두 색이라 배경에서 색이 겉돌지 않는다. */
.hero{padding:2.6rem 0 1rem;text-align:center}
.heroMark{width:clamp(84px,13vw,112px);height:auto;filter:drop-shadow(0 14px 38px rgba(42,107,242,.35))}
.hero h1{font-size:clamp(1.7rem,4.5vw,2.6rem);line-height:1.25;margin:.9rem 0 .8rem}
/* 히어로 강조는 마크와 같은 각도의 그라디언트 텍스트. 배경 클립이 안 되는 환경에서는
   color 값이 그대로 보이므로 폴백이 저절로 성립한다. */
.hero .accent{color:var(--violet);background:linear-gradient(111deg,var(--blue),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lead{max-width:38rem;margin:0 auto;font-size:1.02rem}
.heroCta{margin:1.4rem 0;justify-content:center}
.btn{display:inline-block;background:linear-gradient(111deg,var(--ctaFrom),var(--ctaTo));color:#fff;border-radius:8px;padding:.6rem 1.1rem;font-weight:700;text-decoration:none}
.ghostBtn{background:transparent;color:var(--text);border:1px solid var(--border);font-weight:400}
.chip{background:var(--deep);border:1px dashed #14453f;color:var(--teal);border-radius:8px;padding:.55rem .9rem;cursor:pointer;user-select:none}
/* 히어로 콘솔: 가운데 놓되 코드와 출력은 왼쪽 정렬을 지킨다(코드는 가운데 정렬하면 안 읽힌다).
   탭이 데모를 갈아끼우고, 런타임은 하나를 공유한다(heroConsole.js). */
.heroDemo{max-width:44rem;margin:1.8rem auto 0;text-align:left;box-shadow:0 18px 55px rgba(42,107,242,.14)}
.heroTabs{display:flex;gap:.35rem;flex-wrap:wrap;margin:0 0 .75rem}
.heroTab{background:transparent;color:var(--dim);border:1px solid var(--border);border-radius:99px;padding:.22rem .8rem;font:inherit;font-size:.85rem;font-weight:400;cursor:pointer}
.heroTab:hover{color:var(--text)}
.heroTab.on{background:linear-gradient(111deg,var(--ctaFrom),var(--ctaTo));border-color:transparent;color:#fff;font-weight:700}
.heroOut{min-height:9.5rem;max-height:24rem;overflow:auto}
.heroRun{margin:.8rem 0 0;gap:.6rem}
.heroRun .status{flex:1;min-width:13rem;font-size:.86rem;color:var(--dim)}
/* display를 주면 hidden 속성(UA의 display:none)이 덮인다: 숨김을 명시적으로 되살린다. */
.heroLine{display:flex;gap:.5rem;align-items:center;margin:.55rem 0 0}
.heroLine[hidden]{display:none}
.heroLine .ps{flex:none;font-weight:700}
.heroLine input{flex:1;background:var(--deep);color:var(--text);border:1px solid var(--border);border-radius:8px;font:inherit;padding:.45rem .6rem}
h2{font-size:1.15rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;margin:2.6rem 0 .2rem;padding-top:.6rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1rem;margin:2rem 0 1rem;padding:1.1rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat b{display:block;color:var(--teal);font-size:1.5rem}
.stat span{color:var(--dim);font-size:.82rem;line-height:1.45;display:block;margin-top:.15rem}
.features .card h3{color:var(--violet)}
@media (max-width:640px){header.site nav:not(.sns){display:none}}