:root {
      color-scheme: light;
      --outer:#e7ecef; --bg:#f5f7f8; --panel:#fff; --panel-2:#edf2f4;
      --panel-hover:#e6edef; --text:#172126; --muted:#667580; --line:#d7e0e4;
      --line-strong:#b9c8ce; --accent:#087f78; --accent-strong:#066c67;
      --accent-soft:#dff3f0; --good:#16865b; --bad:#cc4050; --blue:#356fae;
      --shadow:0 12px 32px rgba(23,33,38,.09);
      --goguryeo:#356fae; --baekje:#b54f5d; --silla:#8b7020; --balhae:#6e5c8d;
      --goryeo:#087f78; --joseon:#416c7a; --modern:#805a8f;
    }
    :root[data-theme="dark"] {
      color-scheme: dark;
      --outer:#090d12; --bg:#0f151c; --panel:#161e27; --panel-2:#1d2732;
      --panel-hover:#24313e; --text:#eef3f6; --muted:#8d9aa7; --line:#2b3743;
      --line-strong:#40515f; --accent:#49c8bb; --accent-strong:#6bd8cd;
      --accent-soft:#12302f; --good:#55d29a; --bad:#ff6b78; --blue:#7aa7e8;
      --shadow:0 12px 32px rgba(0,0,0,.22);
      --goguryeo:#7aa7e8; --baekje:#e27d88; --silla:#d6b650; --balhae:#b39ad6;
      --goryeo:#49c8bb; --joseon:#75adbd; --modern:#bd9acb;
    }
    * { box-sizing:border-box; }
    html, body { margin:0; min-width:1120px; min-height:100%; }
    body {
      background:var(--outer); color:var(--text);
      font-family:Pretendard,"Noto Sans KR",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      letter-spacing:0;
    }
    button, a { font:inherit; }
    button { cursor:pointer; }
    button:focus-visible, a:focus-visible { outline:3px solid color-mix(in srgb,var(--blue) 40%,transparent); outline-offset:2px; }

    .app-shell { width:min(1600px,100%); min-height:100vh; margin:0 auto; background:var(--bg); border-inline:1px solid var(--line); box-shadow:var(--shadow); }
    .product-bar {
      position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
      min-height:58px; padding:0 22px; border-bottom:1px solid var(--line);
      background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(12px);
    }
    .brand { display:grid; line-height:1.15; text-decoration:none; color:var(--text); }
    .brand strong { font-size:15px; font-weight:850; }
    .brand small { margin-top:3px; color:var(--muted); font-size:10px; font-weight:650; }
    .bar-actions { display:flex; align-items:center; gap:7px; }
    .bar-button {
      display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px;
      padding:0 10px; border:1px solid var(--line); border-radius:6px;
      background:var(--panel); color:var(--text); font-size:11px; font-weight:750; text-decoration:none;
    }
    .bar-button:hover { border-color:var(--line-strong); background:var(--panel-hover); }
    .theme-button { width:34px; padding:0; font-size:15px; }

    .intro { display:flex; align-items:flex-end; justify-content:space-between; gap:50px; padding:34px 28px 24px; }
    .eyebrow { margin:0 0 7px; color:var(--accent); font-size:11px; font-weight:850; }
    h1 { margin:0; font-size:30px; line-height:1.15; font-weight:900; letter-spacing:-.035em; }
    .intro-copy { max-width:720px; margin:9px 0 0; color:var(--muted); font-size:12px; font-weight:650; line-height:1.7; }
    .legend { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:10px; font-weight:700; white-space:nowrap; }
    .legend span { display:flex; align-items:center; gap:6px; }
    .legend i { display:block; width:15px; height:3px; border-radius:999px; background:var(--accent); }
    .legend .gray { background:var(--line-strong); }

    .timeline-toolbar { position:sticky; top:58px; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 28px 12px; border-bottom:1px solid transparent; background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(12px); }
    .era-nav { display:flex; gap:5px; }
    .era-nav button, .scroll-button {
      min-height:34px; padding:0 11px; border:1px solid var(--line); border-radius:6px;
      background:var(--panel); color:var(--muted); font-size:11px; font-weight:800;
    }
    .era-nav button:hover, .era-nav button.active, .scroll-button:hover { border-color:var(--line-strong); background:var(--panel-hover); color:var(--text); }
    .era-nav button.active { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); background:var(--accent-soft); }
    .scroll-controls { display:flex; align-items:center; gap:6px; }
    .scroll-hint { margin-right:7px; color:var(--muted); font-size:10px; font-weight:650; }
    .current-era { display:inline-flex; align-items:center; min-height:26px; margin-right:4px; padding:0 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:10px; font-weight:850; white-space:nowrap; }
    .scroll-button { width:34px; padding:0; color:var(--text); font-size:16px; }

    .timeline-frame { position:relative; margin:0 28px; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--panel); box-shadow:var(--shadow); }
    .timeline-grid { display:grid; grid-template-columns:108px minmax(0,1fr); }
    .lane-labels { position:relative; z-index:20; display:grid; grid-template-rows:72px repeat(4,124px); border-right:1px solid var(--line); background:var(--panel); box-shadow:10px 0 22px color-mix(in srgb,var(--outer) 68%,transparent); }
    .corner, .lane-label { display:flex; align-items:center; padding:0 13px; border-bottom:1px solid var(--line); }
    .corner { align-items:flex-end; padding-bottom:12px; color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.08em; background:var(--panel-2); }
    .lane-label { position:relative; gap:8px; color:var(--muted); font-size:11px; font-weight:800; transition:color .16s ease,background .16s ease; }
    .lane-label::before { content:""; flex:0 0 auto; width:3px; height:22px; border-radius:999px; background:var(--lane-color,var(--line-strong)); transition:background .16s ease; }
    .lane-label span { line-height:1.3; }
    .lane-label.flow { --lane-color:var(--accent); }

    .timeline-viewport { position:relative; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-color:var(--line-strong) var(--panel-2); scrollbar-width:thin; cursor:grab; scroll-behavior:smooth; }
    .timeline-viewport.dragging { cursor:grabbing; user-select:none; }
    .timeline-viewport::-webkit-scrollbar { height:12px; }
    .timeline-viewport::-webkit-scrollbar-track { background:var(--panel-2); }
    .timeline-viewport::-webkit-scrollbar-thumb { background:var(--line-strong); border:3px solid var(--panel-2); border-radius:999px; }
    .timeline-track { display:flex; width:max-content; min-height:568px; }
    .era-column { flex:0 0 var(--width); display:grid; grid-template-rows:72px repeat(4,124px); border-right:1px solid var(--line); background:var(--panel); transition:background .18s ease; }
    .era-column:last-child { border-right:0; }
    .era-head { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--panel-2); }
    .era-head::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--era-color,var(--accent)); }
    .era-head strong { display:block; font-size:13px; font-weight:900; }
    .era-head small { color:var(--muted); font-size:9px; font-weight:750; white-space:nowrap; }
    .era-column.current .era-head { background:color-mix(in srgb,var(--accent-soft) 62%,var(--panel-2)); }
    .era-column.current .era-head strong { color:var(--accent); }
    .timeline-cell { position:relative; display:flex; flex-wrap:wrap; align-content:center; align-items:center; gap:6px 8px; min-width:0; padding:8px 12px; border-bottom:1px solid var(--line); }
    .timeline-cell::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:color-mix(in srgb,var(--line) 72%,transparent); }
    .timeline-cell.inactive { background:color-mix(in srgb,var(--panel-2) 24%,transparent); }
    .event-card { position:relative; z-index:2; flex:1 1 0; min-width:125px; max-width:240px; padding:9px 10px; border:1px solid var(--line); border-left:3px solid var(--nation,var(--accent)); border-radius:7px; background:var(--panel); box-shadow:0 3px 10px color-mix(in srgb,var(--outer) 55%,transparent); transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease; }
    .event-card:hover { z-index:5; transform:translateY(-2px); border-color:var(--line-strong); box-shadow:0 8px 20px color-mix(in srgb,var(--outer) 72%,transparent); }
    .event-card time { display:block; margin-bottom:2px; color:var(--nation,var(--accent)); font-size:9px; font-weight:850; }
    .event-card strong { display:block; font-size:11px; font-weight:850; line-height:1.25; }
    .event-card p { margin:3px 0 0; color:var(--muted); font-size:9px; font-weight:600; line-height:1.4; }
    .event-card.goguryeo { --nation:var(--goguryeo); }.event-card.baekje { --nation:var(--baekje); }.event-card.silla { --nation:var(--silla); }.event-card.balhae { --nation:var(--balhae); }.event-card.goryeo { --nation:var(--goryeo); }.event-card.joseon { --nation:var(--joseon); }.event-card.modern { --nation:var(--modern); }
    .king-strip { position:relative; z-index:2; width:100%; padding:10px 12px; border:1px dashed var(--line-strong); border-radius:7px; background:var(--panel-2); color:var(--muted); font-size:9px; font-weight:650; line-height:1.7; opacity:.72; }
    .king-strip b { color:var(--text); font-weight:900; }
    .king-strip.joseon-kings { color:var(--text); font-size:10px; opacity:.92; }
    .king-strip.joseon-kings .deposed { color:var(--bad); }
    .reign-strip { position:relative; z-index:3; flex:1 0 100%; overflow:hidden; padding:4px 7px; border:1px solid color-mix(in srgb,var(--line-strong) 72%,transparent); border-radius:5px; background:var(--panel-2); color:var(--muted); font-size:8px; font-weight:700; line-height:1.45; white-space:normal; }
    .reign-strip::before { content:"왕"; display:inline-block; margin-right:6px; color:var(--nation,var(--accent)); font-size:8px; font-weight:900; }
    .reign-strip b { color:var(--text); font-weight:900; }
    .reign-strip.goguryeo { --nation:var(--goguryeo); }.reign-strip.baekje { --nation:var(--baekje); }.reign-strip.silla { --nation:var(--silla); }.reign-strip.balhae { --nation:var(--balhae); }.reign-strip.goryeo { --nation:var(--goryeo); }.reign-strip.joseon { --nation:var(--joseon); }
    .empty-note { position:relative; z-index:2; margin:auto; color:var(--muted); font-size:9px; opacity:.5; }

    .progress-shell { position:relative; height:4px; margin:10px 28px 0 136px; overflow:hidden; border-radius:999px; background:var(--panel-2); }
    .progress-bar { width:0; height:100%; border-radius:inherit; background:var(--accent); transition:width .08s linear; }
    .study-note { display:flex; justify-content:space-between; gap:30px; padding:14px 28px 24px 136px; color:var(--muted); font-size:10px; font-weight:650; }
    .study-note strong { color:var(--text); }
    footer { display:flex; justify-content:space-between; gap:40px; padding:18px 28px 28px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; }
    footer p { max-width:760px; margin:0; }
    footer a { color:var(--accent); }
    @media print { html,body{min-width:0}.product-bar,.timeline-toolbar,.progress-shell,.study-note{display:none}.app-shell{width:auto;border:0}.intro{padding:18px}.timeline-frame{margin:0;border:0}.timeline-grid{grid-template-columns:88px 1fr}.timeline-viewport{overflow:visible}.timeline-track{transform:scale(.28);transform-origin:top left}.timeline-frame{height:235px}.lane-labels{display:none}footer{border:0} }