:root{
  --bg:#000;
  --ink:#f5f5f7;
  --ink-dim:#a1a1a6;
  --ink-dimmer:#6e6e73;
  --surface:#111113;
  --surface-2:#1a1a1c;
  --hair:rgba(255,255,255,0.08);
  --hair-strong:rgba(255,255,255,0.14);
  --blue:#2997ff;
  --violet:#bf5af2;
  --green:#30d158;
  --red:#ff453a;
  --orange:#ff9f0a;
  --yellow:#ffd60a;
  --teal:#64d2ff;
  --pink:#ff375f;
  --font:-apple-system, BlinkMacSystemFont, "Pretendard Variable", Pretendard, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
html,body{margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-weight:400; letter-spacing:-0.01em}
body{overflow-x:hidden; word-break:keep-all; overflow-wrap:break-word}
h1, h2, h3, h4, h5, h6, p, li, dt, dd, span, a, button, label, figcaption, blockquote, q{word-break:keep-all; overflow-wrap:break-word}
code, pre, kbd, samp, .mono, .terminal, .md-preview, .term-line{word-break:break-word; overflow-wrap:anywhere}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
::selection{background:rgba(41,151,255,0.35); color:#fff}

/* ======= Top nav ======= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:44px;
  background:rgba(0,0,0,0.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#f5f5f7;
}
.nav-inner{display:flex; align-items:center; gap:20px; max-width:1200px; width:100%; padding:0 22px}
.nav-back{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 10px 4px 6px; border-radius:999px;
  font-size:11.5px; color:var(--ink-dim);
  border:1px solid transparent;
  transition:all .2s;
}
.nav-back:hover{color:#fff; background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12)}
.nav-back .arr{font-size:13px; line-height:1}
.nav-divider{width:1px; height:14px; background:rgba(255,255,255,0.12)}
.nav-project{font-weight:600; letter-spacing:-0.01em; font-size:13px; display:flex; align-items:center; gap:8px}
.nav-project .dot{width:7px;height:7px;border-radius:50%; box-shadow:0 0 8px currentColor}
.nav-spacer{flex:1}
.nav a.nav-item{opacity:0.82; font-size:12px; transition:opacity .2s; cursor:pointer}
.nav a.nav-item:hover{opacity:1}
.nav .nav-cta{border:1px solid rgba(255,255,255,0.22); padding:4px 12px; border-radius:999px; font-size:11px; opacity:0.92}
.nav .nav-cta:hover{background:rgba(255,255,255,0.08); opacity:1}

/* ======= Page hero ======= */
.page-hero{
  min-height:100vh;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:120px 24px 80px;
  overflow:hidden;
}
.page-hero .grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%);
  pointer-events:none;
}
.page-hero .inner{max-width:1100px; width:100%; position:relative; z-index:2}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; color:var(--ink-dim); letter-spacing:0.02em;
  padding:6px 14px; border-radius:999px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,0.03);
  margin-bottom:28px;
  font-weight:500;
}
.eyebrow .pulse{width:6px;height:6px;border-radius:50%;background:var(--green); box-shadow:0 0 0 0 rgba(48,209,88,0.5); animation:pulse 2s infinite}
.eyebrow .pulse.blue{background:var(--blue); box-shadow:0 0 0 0 rgba(41,151,255,0.5)}
.eyebrow .pulse.violet{background:var(--violet); box-shadow:0 0 0 0 rgba(191,90,242,0.5)}
.eyebrow .pulse.orange{background:var(--orange); box-shadow:0 0 0 0 rgba(255,159,10,0.5)}
.eyebrow .pulse.teal{background:var(--teal); box-shadow:0 0 0 0 rgba(100,210,255,0.5)}
.eyebrow .pulse.pink{background:var(--pink); box-shadow:0 0 0 0 rgba(255,55,95,0.5)}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent}}

h1.display{
  font-size:clamp(48px, 7.5vw, 104px);
  line-height:0.98; letter-spacing:-0.045em;
  font-weight:700; margin:0 0 28px;
  word-break:keep-all;
}
h1.display .grad{
  background:linear-gradient(180deg,#fff 0%, #a1a1a6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1.display .accent{
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-size:clamp(17px,1.5vw,21px);
  color:var(--ink-dim); max-width:720px; margin:0 0 40px;
  line-height:1.55; font-weight:400;
}

/* ======= Stat strip ======= */
.stat-strip{
  display:flex; flex-wrap:wrap; gap:36px 48px;
  padding:24px 32px; border:1px solid var(--hair); border-radius:18px;
  background:rgba(255,255,255,0.02);
  backdrop-filter:blur(8px);
  margin-bottom:32px;
}
.stat-strip .stat .num{font-size:36px; font-weight:700; letter-spacing:-0.03em; line-height:1; background:linear-gradient(180deg, #fff, #8e8e93); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-strip .stat .lbl{font-size:11px; color:var(--ink-dimmer); margin-top:6px; font-family:var(--mono); letter-spacing:0.1em; text-transform:uppercase}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:999px;
  font-size:14px; font-weight:500; letter-spacing:-0.01em;
  transition:all .25s cubic-bezier(.2,.7,.2,1);
  border:1px solid var(--hair-strong);
}
.cta.primary{background:#fff; color:#000; border-color:#fff}
.cta.primary:hover{background:rgba(255,255,255,0.9); transform:translateY(-1px)}
.cta.ghost{color:#fff; background:rgba(255,255,255,0.04)}
.cta.ghost:hover{background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.28); transform:translateY(-1px)}
.cta span{transition:transform .25s}
.cta:hover span{transform:translateX(4px)}

/* ======= Section scaffolding ======= */
section.chapter{
  position:relative;
  padding:110px 24px;
  border-top:1px solid var(--hair);
}
section.chapter.tight{padding:70px 24px}
.wrap{max-width:1200px; margin:0 auto}
.chapter-label{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.15em;
  color:var(--ink-dimmer); text-transform:uppercase;
  margin-bottom:22px;
}
.chapter-label .num{
  color:var(--ink); font-weight:600;
  padding:3px 8px; border:1px solid var(--hair-strong); border-radius:4px;
  background:rgba(255,255,255,0.03);
}
section.chapter h2{
  font-size:clamp(34px,4.6vw,60px);
  line-height:1.05; letter-spacing:-0.035em;
  font-weight:700; margin:0 0 22px; max-width:900px;
  word-break:keep-all;
}
section.chapter h2 .sub{color:var(--ink-dim); font-weight:600}
section.chapter .tagline{font-size:clamp(16px,1.3vw,19px); color:var(--ink-dim); max-width:720px; line-height:1.55}

/* ======= Cards ======= */
.feature-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; margin-top:52px}
.feature-grid.three{grid-template-columns:repeat(3, 1fr)}
.feat-card{
  padding:32px; border-radius:20px;
  border:1px solid var(--hair-strong);
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  position:relative; overflow:hidden;
  transition:background .25s, border-color .25s, transform .25s;
}
.feat-card:hover{background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)); border-color:var(--hair-strong); transform:translateY(-2px)}
.feat-card h4{font-size:20px; margin:0 0 12px; font-weight:600; letter-spacing:-0.02em}
.feat-card p{color:var(--ink-dim); font-size:14.5px; line-height:1.55; margin:0}
.feat-card .icon{
  width:44px; height:44px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; font-family:var(--mono); font-weight:600; font-size:16px;
  background:rgba(255,255,255,0.05); border:1px solid var(--hair-strong);
}

/* ======= Chips ======= */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:12px; padding:6px 12px; border-radius:999px; border:1px solid var(--hair-strong); color:var(--ink-dim); background:rgba(255,255,255,0.03)}
.chip.blue{color:var(--blue); border-color:rgba(41,151,255,0.3); background:rgba(41,151,255,0.08)}
.chip.violet{color:var(--violet); border-color:rgba(191,90,242,0.3); background:rgba(191,90,242,0.08)}
.chip.green{color:var(--green); border-color:rgba(48,209,88,0.3); background:rgba(48,209,88,0.08)}
.chip.orange{color:var(--orange); border-color:rgba(255,159,10,0.3); background:rgba(255,159,10,0.08)}
.chip.teal{color:var(--teal); border-color:rgba(100,210,255,0.3); background:rgba(100,210,255,0.08)}
.chip.pink{color:var(--pink); border-color:rgba(255,55,95,0.3); background:rgba(255,55,95,0.08)}

/* ======= Terminal ======= */
.terminal{
  background:#0d0d0f;
  border:1px solid var(--hair-strong);
  border-radius:14px;
  overflow:hidden;
  font-family:var(--mono);
  font-size:13px; line-height:1.7;
  box-shadow:0 40px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}
.term-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--hair);
  background:rgba(255,255,255,0.02);
}
.term-bar .dot{width:11px;height:11px;border-radius:50%}
.term-bar .d1{background:#ff5f57}
.term-bar .d2{background:#febc2e}
.term-bar .d3{background:#28c840}
.term-bar .title{font-size:11px; color:var(--ink-dimmer); margin-left:10px; letter-spacing:0.02em}
.term-body{padding:20px 22px; color:#e5e5e7; min-height:280px}
.term-line{margin:2px 0; white-space:pre-wrap; word-break:break-word}
.term-user{color:#30d158}
.term-arrow{color:#64d2ff}
.term-k{color:#ff9f0a}
.term-v{color:#f5f5f7}
.term-dim{color:#6e6e73}
.term-str{color:#bf5af2}
.term-num{color:#64d2ff}
.term-err{color:#ff6961}
.term-ok{color:#30d158}
.cursor{display:inline-block; width:7px; height:14px; background:#30d158; vertical-align:-2px; margin-left:2px; animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ======= Table ======= */
.md-table{
  width:100%; border-collapse:collapse; margin:24px 0;
  font-size:13.5px; background:rgba(255,255,255,0.02);
  border:1px solid var(--hair); border-radius:12px; overflow:hidden;
}
.md-table th, .md-table td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--hair)}
.md-table th{background:rgba(255,255,255,0.04); font-weight:600; font-size:12px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.08em}
.md-table tr:last-child td{border-bottom:none}
.md-table td.num{font-family:var(--mono); text-align:right; color:var(--ink-dim)}
.md-table code{font-family:var(--mono); font-size:12px; color:var(--teal); background:rgba(100,210,255,0.08); padding:2px 6px; border-radius:4px}

/* ======= Reveal ======= */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal-stagger > *{opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.in > *{opacity:1; transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.19s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.33s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.4s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.47s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.54s}

/* ======= Footer ======= */
footer.page-footer{
  padding:60px 24px 40px; border-top:1px solid var(--hair);
  text-align:center;
  font-family:var(--mono); font-size:12px; color:var(--ink-dimmer); letter-spacing:0.04em;
}
footer.page-footer .sig{margin-top:8px; color:var(--ink-dim)}
footer.page-footer a{color:var(--ink-dim)}
footer.page-footer a:hover{color:#fff}

/* ======= Tool grid ======= */
.tool-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; margin-top:24px}
.tool{
  padding:11px 14px; border-radius:10px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,0.02);
  font-family:var(--mono); font-size:11px; color:var(--ink-dim);
  transition:all .2s; cursor:default;
}
.tool.hot{color:#fff; border-color:var(--hair-strong); background:rgba(255,255,255,0.05)}
.tool:hover{background:rgba(255,255,255,0.06); color:#fff; border-color:var(--hair-strong); transform:translateY(-1px)}

/* ======= Responsive ======= */
/* Tablet & below */
@media (max-width:960px){
  .feature-grid{grid-template-columns:1fr}
  .feature-grid.three{grid-template-columns:repeat(2,1fr)}
  .stat-strip{gap:24px 32px; padding:20px 24px}
  .nav-inner{gap:12px; padding:0 16px}
  .nav-item{display:none}
  section.chapter{padding:84px 20px}
  section.chapter.tight{padding:56px 20px}
  .page-hero{padding:100px 20px 60px}
  .stat-strip .stat .num{font-size:clamp(28px,5vw,36px)}
  .feat-card{padding:26px 22px; border-radius:18px}
  .feat-card h4{font-size:18px}
  .cta{padding:13px 22px}
  footer.page-footer{padding:44px 20px 32px}
  .md-table{font-size:13px}
  .md-table th, .md-table td{padding:12px 14px}
}

/* Small tablet / large phone */
@media (max-width:768px){
  .feature-grid.three{grid-template-columns:1fr}
  section.chapter{padding:64px 18px}
  .tool-grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr))}
  /* Horizontal-scrollable tables on small screens */
  .md-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
}

/* Phone */
@media (max-width:480px){
  html,body{font-size:15px}
  section.chapter{padding:48px 16px}
  .page-hero{padding:90px 16px 48px}
  .stat-strip{flex-direction:column; align-items:flex-start; gap:14px; padding:18px 20px}
  .stat-strip .stat .num{font-size:clamp(26px,7vw,32px)}
  .stat-strip .stat .lbl{font-size:10.5px}
  .cta-row{gap:10px}
  .cta{padding:12px 18px; font-size:13px; min-height:44px}
  .chips{gap:6px}
  .chip{font-size:11px; padding:5px 10px}
  .feat-card{padding:22px 18px}
  .feat-card .icon{width:38px; height:38px; margin-bottom:14px; font-size:14px}
  .feat-card h4{font-size:17px; margin:0 0 8px}
  .feat-card p{font-size:13.5px; line-height:1.55}
  .eyebrow{font-size:11px; padding:5px 11px}
  /* Terminal on phone */
  .terminal{font-size:11.5px; line-height:1.55}
  .term-body{padding:14px 14px}
  .term-bar{padding:8px 12px}
  .term-bar .title{font-size:10px; margin-left:6px}
  /* Tables: force horizontal scroll container */
  .md-table{font-size:12px; min-width:520px}
  /* Chapter heading sizing */
  section.chapter h2{font-size:clamp(28px,7.4vw,40px); letter-spacing:-0.03em}
  /* Hero display */
  h1.display{font-size:clamp(38px,9.8vw,56px); letter-spacing:-0.035em}
  .hero-sub{font-size:15.5px; line-height:1.55}
  /* Navigation — Apple Safari toolbar style: back · 제목 centered · CTA */
  .nav{height:44px}
  .nav-inner{
    gap:10px; padding:0 12px;
    position:relative;
    justify-content:space-between;
  }
  .nav-back{
    font-size:0; /* "Portfolio" 텍스트 숨김 */
    padding:6px 8px; border-radius:10px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.03);
    min-width:36px; min-height:30px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .nav-back .arr{font-size:16px; line-height:1}
  .nav-divider{display:none}
  .nav-project{
    display:inline-block;
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%, -50%);
    max-width:54vw;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    pointer-events:none;
    vertical-align:middle;
  }
  .nav-project .dot{
    display:inline-block;
    width:6px; height:6px;
    border-radius:50%;
    margin-right:6px;
    vertical-align:1px;
    box-shadow:0 0 6px currentColor;
  }
  .nav-spacer{display:none}
  .nav-cta{
    padding:5px 12px; font-size:10.5px;
    white-space:nowrap;
    min-height:28px;
    display:inline-flex; align-items:center;
  }
  /* About section */
  footer.page-footer{padding:36px 16px 28px; font-size:11px}
}

/* Very small phone */
@media (max-width:360px){
  section.chapter h2{font-size:clamp(24px,7.8vw,32px)}
  h1.display{font-size:clamp(32px,10vw,44px)}
  .feat-card{padding:18px 16px}
  .feat-card h4{font-size:16px}
}