/* design.md tokens — shared across all 5 concepts */
:root {
  --purple: #7132f5;
  --purple-dark: #5741d8;
  --purple-deep: #5b1ecf;
  --purple-subtle: rgba(133, 91, 251, 0.16);
  --near-black: #101114;
  --cool-gray: #686b82;
  --silver-blue: #9497a9;
  --white: #ffffff;
  --border-gray: #dedee5;
  --green: #149e61;
  --green-dark: #026b3f;
  --green-subtle: rgba(20, 158, 97, 0.16);
  --shadow: rgba(0, 0, 0, 0.03) 0 4px 24px;
  --shadow-micro: rgba(16, 24, 40, 0.04) 0 1px 4px;
  --r: 12px;
  --font: "IBM Plex Sans", "Pretendard", "Apple SD Gothic Neo", Helvetica, Arial, sans-serif;
  --max: 1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.38;color:var(--near-black);background:var(--white);-webkit-font-smoothing:antialiased}
a{color:var(--purple);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{width:min(100% - 40px,var(--max));margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px/1.38 var(--font);border-radius:var(--r);border:1px solid transparent;padding:13px 16px;cursor:pointer;text-decoration:none;transition:.15s}
.btn:hover{text-decoration:none}
.btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.btn-primary{background:var(--purple);color:#fff}
.btn-primary:hover{background:var(--purple-dark);color:#fff}
.btn-out{background:#fff;color:var(--purple-dark);border-color:var(--purple-dark)}
.btn-out:hover{background:var(--purple-subtle)}
.btn-ghost{background:rgba(148,151,169,.08);color:var(--near-black)}
.btn-block{width:100%}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 10px;border-radius:6px}
.badge-ok{background:var(--green-subtle);color:var(--green-dark)}
.badge-muted{background:rgba(104,107,130,.12);color:#484b5e;border-radius:8px}
.h-hero{font-size:clamp(32px,5vw,48px);font-weight:700;line-height:1.17;letter-spacing:-1px;margin:0}
.h-section{font-size:clamp(28px,4vw,36px);font-weight:700;line-height:1.22;letter-spacing:-.5px;margin:0}
.h-sub{font-size:28px;font-weight:700;line-height:1.29;letter-spacing:-.5px;margin:0}
.h-feat{font-size:22px;font-weight:600;line-height:1.2;margin:0 0 8px}
.muted{color:var(--silver-blue)}
.cool{color:var(--cool-gray)}
.caption{font-size:14px;line-height:1.5;color:var(--silver-blue)}
.concept-tag{position:fixed;bottom:16px;left:16px;z-index:100;background:var(--near-black);color:#fff;font-size:12px;font-weight:600;padding:8px 12px;border-radius:8px;box-shadow:var(--shadow);opacity:.9}
.concept-tag a{color:#fff;text-decoration:underline}