@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

  :root {
    /* Sailingstone key color (brand teal) ramp — from the official design system */
    --key-30:  #F2FAFA;
    --key-50:  #DBF4F5;
    --key-100: #C8EFF0;
    --key-200: #9EDFE1;
    --key-300: #73D4D6;
    --key-400: #41C0C2;
    --key-500: #30ADAD;
    --key-600: #14999C;
    --key-650: #00878B;
    --key-700: #1E7274;
    --key-800: #17595B;
    --key-850: #0A4445;
    --key-900: #063031;

    --bg-top: #F6FBFB;
    --bg-bot: #E4F3F3;
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-soft: var(--key-30);
    --text: #14181A;
    --text-muted: rgba(20, 24, 26, 0.62);
    --text-faint: rgba(20, 24, 26, 0.42);
    --border: rgba(20, 24, 26, 0.08);
    --accent: var(--key-600);
    --accent-ink: var(--key-800);
    --accent-soft: var(--key-50);
    --accent-2: var(--key-600);
    --accent-2-soft: var(--key-50);
    --code-bg: rgba(20, 24, 26, 0.05);
    --code-text: var(--text);
    --callout-bg: var(--key-30);
    --shadow: 0 1px 2px rgba(20,24,26,0.05), 0 16px 40px rgba(20,150,150,0.14);
    --shadow-sm: 0 1px 2px rgba(20,24,26,0.05), 0 6px 16px rgba(20,150,150,0.09);
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 10px;

    /* warning accent — used only for callout.warn, kept out of the brand ramp on purpose */
    --warn: #F0A93E; --warn-soft: #FFF8EC; --warn-ink: #9A6B12;

    /* the three help tracks read as tints/shades of the single brand color, not separate hues */
    --track-a: var(--key-600); --track-a-soft: var(--key-50); --track-a-ink: var(--key-800);
    --track-b: var(--key-650); --track-b-soft: var(--key-50); --track-b-ink: var(--key-850);
    --track-c: var(--key-700); --track-c-soft: var(--key-50); --track-c-ink: var(--key-900);

    --sidebar-bg: #FFFFFF;
    --sidebar-text: var(--text);
    --sidebar-text-dim: rgba(20, 24, 26, 0.55);
    --sidebar-border: rgba(20, 24, 26, 0.08);
    --sidebar-active-bg: var(--key-50);
    --sidebar-active-text: var(--key-800);
    --sidebar-group-label: rgba(20, 24, 26, 0.42);
  }

  * { box-sizing: border-box; }
  html { background: var(--bg-top); }
  body {
    margin: 0;
    background:
      radial-gradient(1100px 520px at 82% 0%, rgba(20,153,156,0.10), transparent 60%),
      radial-gradient(900px 500px at 8% 100%, rgba(20,153,156,0.08), transparent 55%),
      linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'IBM Plex Sans', 'IBM Plex Sans KR', sans-serif;
    font-size: 15.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  a { color: var(--accent); }
  a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
  }
  code, .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

  /* ---------- shell layout ---------- */
  .shell { display: grid; grid-template-columns: 292px minmax(0, 1fr); min-height: 100vh; }

  .sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    box-shadow: 1px 0 0 rgba(23,27,46,0.03), 10px 0 30px -18px rgba(20,150,150,0.25);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 22px 14px 40px;
  }
  .sidebar::-webkit-scrollbar { width: 8px; }
  .sidebar::-webkit-scrollbar-thumb { background: rgba(20,150,150,0.14); border-radius: 8px; }

  .brand { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px; text-decoration: none; }
  .brand-mark { flex: none; display: block; }
  .brand-name { font-weight: 700; font-size: 16px; color: var(--sidebar-text); letter-spacing: -0.01em; }
  .brand-sub { display: block; font-size: 11.5px; color: var(--sidebar-text-dim); padding: 0 10px 16px; }

  .search-wrap { padding: 0 4px 16px; position: relative; }
  .search-input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
    border-radius: var(--radius-sm);
    padding: 9px 12px 9px 32px;
    font-size: 13.5px;
    font-family: inherit;
    box-shadow: var(--shadow-sm);
  }
  .search-input::placeholder { color: var(--sidebar-text-dim); }
  .search-icon { position: absolute; left: 20px; top: 18px; transform: translateY(-50%); width: 13px; height: 13px; color: var(--sidebar-text-dim); pointer-events: none; }

  /* ---------- tree ---------- */
  .tree-list { list-style: none; margin: 0; padding: 0; }
  .tree-list.root-list { padding-top: 4px; }
  .tree-item { margin: 0; }
  .tree-row { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
  .tree-toggle-spacer { width: 6px; flex: none; display: inline-block; }
  .tree-link {
    flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px;
    color: var(--sidebar-text-dim); text-decoration: none; font-size: 13.3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tree-link:hover { background: rgba(20,150,150,0.07); color: var(--sidebar-text); }
  .tree-row.active .tree-link { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); font-weight: 600; }
  .tree-row.top .tree-link { font-weight: 700; color: var(--sidebar-text); }
  .tree-badge {
    font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-ink); margin-left: 6px;
  }

  /* ---------- main content ---------- */
  main { min-width: 0; }
  .content { max-width: 100%; padding: 44px clamp(20px, 5vw, 72px) 120px; }
  .doc { max-width: 860px; margin: 0 auto; }

  .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-faint); margin-bottom: 22px; max-width: 860px; margin-left: auto; margin-right: auto; }
  .crumbs a { color: var(--text-muted); text-decoration: none; }
  .crumbs a:hover { color: var(--accent); text-decoration: underline; }
  .crumb-sep { color: var(--border); }
  .crumb-current { color: var(--text-faint); }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
    background: var(--accent-soft); padding: 5px 12px; border-radius: 999px;
  }
  .eyebrow.track-a { color: var(--track-a-ink); background: var(--track-a-soft); }
  .eyebrow.track-b { color: var(--track-b-ink); background: var(--track-b-soft); }
  .eyebrow.track-c { color: var(--track-c-ink); background: var(--track-c-soft); }

  h1 { font-size: clamp(27px, 3.2vw, 36px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance; color: var(--text); }
  .lede { font-size: 17px; color: var(--text-muted); margin: 0 0 8px; max-width: none; }
  h1 + .lede, h2 + .lede { margin-bottom: 22px; }

  h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; margin: 36px 0 6px; text-wrap: balance; color: var(--text); }
  h3 { font-size: 16.5px; font-weight: 700; margin: 28px 0 10px; color: var(--text); text-wrap: balance; }
  p { margin: 0 0 15px; max-width: 66ch; color: var(--text); }
  strong { font-weight: 700; }
  ul, ol { margin: 0 0 16px; padding-left: 22px; max-width: 64ch; }
  li { margin-bottom: 6px; }

  .card-grid { display: grid; gap: 14px; margin: 18px 0 26px; }
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  .cards-2 { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 720px) { .cards-3, .cards-2 { grid-template-columns: 1fr; } }

  .icon-badge {
    width: 36px; height: 36px; border-radius: 10px; background: var(--accent);
    display: flex; align-items: center; justify-content: center; color: #fff;
    flex: none; margin-bottom: 12px; box-shadow: 0 4px 10px rgba(20,150,150,0.28);
  }
  .icon-badge svg { width: 18px; height: 18px; }
  .icon-badge.track-a { background: var(--track-a); }
  .icon-badge.track-b { background: var(--track-b); }
  .icon-badge.track-c { background: var(--track-c); }

  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 20px 18px; box-shadow: var(--shadow-sm); }
  .card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; text-wrap: balance; }
  .card p { margin: 0; font-size: 14px; color: var(--text-muted); }
  .card .num { font-family: 'IBM Plex Mono'; font-size: 12px; color: var(--text-faint); margin-bottom: 6px; display: block; }

  .track-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 22px 22px 20px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text);
    display: flex; flex-direction: column; height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .track-card:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-2px); }
  .track-card h3 { margin: 8px 0 8px; font-size: 16.5px; font-weight: 800; }
  .track-card.child-card { padding: 20px 20px 18px; }
  .track-card.child-card h3 { margin: 0 0 6px; font-size: 15px; }
  .track-card p { font-size: 13.6px; color: var(--text-muted); margin: 0 0 12px; }
  .track-card .go { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-top: auto; }
  .track-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
  .track-pill.a { background: var(--track-a-soft); color: var(--track-a-ink); }
  .track-pill.b { background: var(--track-b-soft); color: var(--track-b-ink); }
  .track-pill.c { background: var(--track-c-soft); color: var(--track-c-ink); }

  .section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); margin: 34px 0 4px; }

  table { width: 100%; border-collapse: collapse; margin: 6px 0 26px; font-size: 14px; }
  .table-wrap { overflow-x: auto; margin: 6px 0 26px; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
  .table-wrap table { margin: 0; min-width: 460px; }
  th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
  th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); font-weight: 700; }
  td code { background: none; color: var(--accent-ink); padding: 0; border-radius: 0; font-size: 13px; font-weight: 600; }
  tr:last-child td { border-bottom: none; }

  .callout { background: var(--surface-soft); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: 16px 20px; margin: 18px 0 26px; font-size: 14px; box-shadow: var(--shadow-sm); }
  .callout.warn { background: var(--warn-soft); border-left-color: var(--warn); }
  .callout p:last-child { margin-bottom: 0; }
  .callout .callout-label { font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-ink); margin-bottom: 4px; display: block; }
  .callout.warn .callout-label { color: var(--warn-ink); }

  .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 28px; }
  @media (max-width: 720px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
  .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 18px 16px; box-shadow: var(--shadow-sm); }
  .stat .arrow { font-family: 'IBM Plex Mono'; font-size: 15px; font-weight: 700; color: var(--accent); display: block; margin-bottom: 4px; }
  .stat .label { font-size: 12.5px; color: var(--text-muted); }

  figure { margin: 8px 0 30px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; box-shadow: var(--shadow-sm); }
  figure svg { width: 100%; height: auto; display: block; color: var(--text-muted); }
  figure svg text { opacity: 1; }
  figure .diagram-accent { color: var(--accent); }
  figure .diagram-accent2 { color: var(--track-b); }
  figcaption { font-size: 12.5px; color: var(--text-faint); margin-top: 10px; text-align: center; }

  .timeline { display: flex; flex-direction: column; gap: 0; margin: 6px 0 28px; }
  .tl-row { display: grid; grid-template-columns: 88px 20px 1fr; gap: 0; }
  .tl-when { font-family: 'IBM Plex Mono'; font-size: 12.5px; color: var(--text-faint); padding-top: 3px; }
  .tl-rail { display: flex; flex-direction: column; align-items: center; }
  .tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 4px; flex: none; }
  .tl-line { width: 2px; flex: 1; background: var(--border); }
  .tl-row:last-child .tl-line { display: none; }
  .tl-body { padding-bottom: 22px; }
  .tl-title { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
  .tl-desc { font-size: 13.5px; color: var(--text-muted); }
  .tl-desc ul { margin: 6px 0 0; padding-left: 18px; }
  .tl-desc li { margin-bottom: 3px; }

  .badge-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--border); color: var(--text-faint); margin-bottom: 18px; }

  .page-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); }
  .page-nav-link { flex: 1; max-width: 48%; display: flex; flex-direction: column; gap: 3px; text-decoration: none; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--text); }
  .page-nav-link:hover { background: var(--accent-soft); }
  .page-nav-link:hover .pn-title { color: var(--accent-ink); }
  .page-nav-link.next { margin-left: auto; text-align: right; align-items: flex-end; }
  .pn-dir { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
  .pn-title { font-size: 13.8px; font-weight: 700; }
  .page-nav-spacer { flex: 1; max-width: 48%; }

  .footline { margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-faint); max-width: 860px; margin-left: auto; margin-right: auto; }

  .about-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin: 4px 0 24px; }
  .about-hero .lede { margin: 0; }
  .about-logo { width: 240px; max-width: 60%; height: auto; }

  .faq-list { margin: 6px 0 26px; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border); padding: 0 18px; }
  .faq-item { border-bottom: 1px solid var(--border); }
  .faq-item:last-child { border-bottom: none; }
  .faq-item summary { cursor: pointer; padding: 16px 2px; font-weight: 700; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary .faq-icon { color: var(--text-faint); font-weight: 400; font-size: 19px; flex: none; }
  .faq-item[open] summary .faq-icon { color: var(--accent); }
  .faq-item .faq-a { padding: 0 2px 18px; color: var(--text-muted); font-size: 14px; max-width: 64ch; }
  .faq-item .faq-a p { margin: 0 0 10px; }
  .faq-item .faq-a p:last-child { margin-bottom: 0; }

  .mobile-menu-btn { display: none; }
  .sidebar-backdrop { display: none; }

  @media (max-width: 640px) {
    .table-wrap table { min-width: 0; }
    th, td { padding: 10px 12px; }
  }
  @media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar {
      position: fixed; top: 0; left: 0; height: 100vh; width: 280px; max-width: 85vw;
      transform: translateX(-100%); transition: transform 0.22s ease; z-index: 60;
      box-shadow: 12px 0 32px rgba(23,27,46,0.18);
    }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar-backdrop {
      display: block; position: fixed; inset: 0; background: rgba(23,27,46,0.35);
      z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
    }
    .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
    .mobile-menu-btn {
      display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
      position: sticky; top: 0; z-index: 40; background: var(--surface);
      border: none; border-bottom: 1px solid var(--border); cursor: pointer;
      padding: 14px clamp(20px, 5vw, 72px); font-family: inherit; font-size: 14px;
      font-weight: 700; color: var(--text);
    }
    .mobile-menu-btn .mm-icon { font-size: 16px; line-height: 1; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

  .site-footer { background: linear-gradient(180deg, transparent, rgba(20,150,150,0.06)); padding: 40px clamp(20px, 5vw, 72px) 30px; border-top: 1px solid var(--border); }
  .site-footer-inner { max-width: 900px; }
  .site-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
  .site-footer-brand { display: flex; align-items: center; gap: 12px; }
  .site-footer-logo-img { height: 34px; width: auto; display: block; }
  .site-footer-info p { margin: 0 0 6px; font-size: 12.8px; color: var(--text-faint); }
  .site-footer-copyright { margin: 12px 0 0; font-size: 12px; color: var(--text-faint); }