/* 데모 페이지 껍데기 — 헤더를 실제 크기로 보기 위한 최소 스타일.
   (실제 사이트에서는 그 사이트의 정본 CSS가 이 자리를 대신한다) */
:root{
  --bg:#0B0B0D; --bg-deep:#060607; --panel:#16151A; --panel-2:#1D1C22;
  --border:#2A2830; --border-2:#3A3742; --hairline:#1A191F;
  --text:#EFEBE3; --text-2:#B9B3A8; --muted:#8A8478;
  --primary:#6E1423; --primary-bright:#8A2030;
  --accent-text:#E6A9B0;
  --brass:#A8895C; --brass-line:rgba(168,137,92,0.55); --brass-soft:rgba(168,137,92,0.26);
  --maxw:1120px;
  --glow:rgba(110,20,35,0.28); --glow-2:rgba(110,20,35,0.20);
}
html[data-theme="navy"]{
  --primary:#15325E; --primary-bright:#1E4A86; --accent-text:#9FC2E8;
  --glow:rgba(21,50,94,0.34); --glow-2:rgba(21,50,94,0.24);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Pretendard,"Pretendard Variable",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;
  font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(60rem 40rem at -10% -8%, var(--glow), transparent 60%),
    radial-gradient(52rem 38rem at 108% 112%, var(--glow-2), transparent 60%);
  background-attachment:fixed;background-repeat:no-repeat;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1{margin:0 0 16px;font-size:40px;font-weight:800;line-height:1.24;letter-spacing:-0.02em}
h2{margin:0 0 10px;font-size:24px;font-weight:800;letter-spacing:-0.01em}
p{margin:0;color:var(--text-2)}
.rose{color:var(--accent-text)}

.hero{padding:84px 0 64px}
.hero p{font-size:17px;max-width:62ch}
/* 큰 제목 위 소제목 키워드(eyebrow)는 쓰지 않는다 — 제목부터 바로 시작 */
.filler{padding:54px 0;border-top:1px solid var(--hairline)}
.filler p{max-width:70ch}
.tall{min-height:70vh}

/* 데모 상단 안내줄 */
.demobar{position:relative;z-index:70;background:var(--bg-deep);border-bottom:1px solid var(--hairline)}
.demobar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:40px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
.demobar b{color:var(--text);font-size:13.5px;font-weight:700}
.demobar span{color:var(--muted);font-size:12.5px}
.demobar .acts{display:flex;gap:8px;align-items:center}
.demobar button,.demobar a.lnk{background:transparent;border:1px solid var(--border);color:var(--text-2);
  border-radius:7px;padding:5px 11px;font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:inherit;text-decoration:none}
.demobar button:hover,.demobar a.lnk:hover{color:var(--accent-text);border-color:var(--brass-soft)}
@media (max-width:860px){
  .wrap{padding:0 18px}
  h1{font-size:29px}
  .hero{padding:56px 0 44px}
}