:root{
  --cardw:min(392px,34vw);
    --void:#05090D; --panel:#080F15; --ocean:#080F16;
    --gold:#D9B26A; --gold-lo:#8A7346; --gold-glow:rgba(217,178,106,.16);
    --steel:#D3DEE3; --sea:#7FB4C4;
    --tx:#E9EFF1; --tx-mid:#93A6AE; --tx-lo:#5C6F78;
    --hair:#16212A; --hair2:#1E2C36;
    --sans:"Pretendard","Pretendard Variable",-apple-system,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR",system-ui,sans-serif;
    --serif:Georgia,"Times New Roman",serif;
    --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,monospace;
    --side:392px;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{margin:0;background:var(--void);color:var(--tx);font-family:var(--sans);
    line-height:1.65;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow:hidden;}

  .app{display:grid;grid-template-rows:1fr auto auto auto;height:100vh;height:100dvh;}

  /* ---------------- 지도 위 연도 ---------------- */
  .hud{position:absolute;left:18px;top:16px;pointer-events:none;}
  .bigyr{display:flex;align-items:baseline;gap:7px;}
  #bigEra{font-family:var(--serif);font-size:20px;color:var(--tx-mid);text-shadow:0 1px 10px rgba(0,0,0,.95);}
  #bigNum{font-family:var(--serif);font-size:52px;line-height:1;font-variant-numeric:tabular-nums;
    text-shadow:0 2px 14px rgba(0,0,0,.95);}
  #bigSuf{font-size:13px;color:var(--tx-mid);}
  #bigTitle{margin-top:5px;font-size:15px;font-weight:700;color:var(--gold);text-shadow:0 1px 10px rgba(0,0,0,.95);}
  #bigKor{margin-top:2px;font-size:12.5px;color:var(--tx-mid);text-shadow:0 1px 8px rgba(0,0,0,.95);}
  #bigSnap{margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--tx-lo);
    text-shadow:0 1px 8px rgba(0,0,0,.95);}
  .brandtag{position:absolute;left:18px;bottom:12px;font-family:var(--mono);font-size:9.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--tx-lo);
    text-shadow:0 1px 8px rgba(0,0,0,.95);
    background:none;border:0;padding:0;cursor:pointer;text-align:left;font-weight:inherit;}
  .brandtag:hover{color:var(--gold);}
  .brandtag .src{border-bottom:1px dotted var(--tx-lo);}
  .brandtag:hover .src{border-bottom-color:var(--gold);}

  /* ---------------- 시대 바로가기 ---------------- */
  .jumpbar{display:flex;gap:8px;padding:9px 12px 9px 14px;background:var(--panel);
    border-top:1px solid var(--hair);overflow:hidden;align-items:center;}
  .chips::-webkit-scrollbar{height:6px;}
  .chips::-webkit-scrollbar-thumb{background:#1D2A33;border-radius:6px;}
  .chips::-webkit-scrollbar-track{background:transparent;}
  .jumpbar button{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--tx-mid);
    background:rgba(255,255,255,.04);border:1px solid var(--hair2);border-radius:100px;
    padding:6px 12px;cursor:pointer;transition:.15s;white-space:nowrap;flex:none;}
  .jumpbar button:hover{color:var(--tx);border-color:var(--gold-lo);}
  .jumpbar button.act{background:var(--gold);color:#0A0F14;border-color:var(--gold);}
  .jumpbar button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  .jumpbar .jlabel{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold-lo);flex:none;margin-right:8px;}
  .chips{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;padding-bottom:2px;}
  /* 대단원이 바뀌는 자리에만 왼쪽에 틈을 둔다 — 271개가 한 줄이라 마디가 필요하다 */
  #kchips button.bigmark{margin-left:14px;}
  #kchips button.bigmark::before{content:"";position:absolute;left:-8px;top:14%;
    height:72%;width:1px;background:#2B3A45;}
  #kchips button{position:relative;}
  .jumpbar button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.25;}
  .jumpbar button .yr{font-family:var(--serif);font-size:9.5px;color:var(--tx-lo);
    font-variant-numeric:tabular-nums;letter-spacing:0;}
  .jumpbar button.act .yr{color:rgba(10,15,20,.66);}
  .korbar{padding-top:6px;padding-bottom:8px;}
  .korbar.off,.stagebar.off,.jumpbar.off{display:none;}
  .jbtn{flex:none;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.02em;
    padding:6px 11px;border-radius:5px;border:1px solid var(--gold-lo);background:transparent;
    color:var(--gold);cursor:pointer;white-space:nowrap;}
  .jbtn:hover{background:var(--gold);color:#0A0F14;}
  .jbtn.on{background:var(--gold);color:#0A0F14;}
  .stagebar{display:flex;gap:8px;padding:8px 12px 9px 14px;background:#140F0C;
    border-top:1px solid #3A2A20;align-items:center;overflow:hidden;}
  .stagebar .sname{flex:none;font-family:var(--sans);font-weight:800;font-size:13px;color:#F0DCC4;}
  .stagebar .ssub{flex:none;font-family:var(--serif);font-size:10.5px;color:#B49478;margin-right:4px;}
  .stagebar button.act{background:#C9754A;color:#150E08;border-color:#C9754A;}
  .stagebar button.act .yr{color:rgba(21,14,8,.7);}
  .xbtn{flex:none;font-size:11px;font-weight:700;padding:6px 11px;border-radius:5px;
    border:1px solid #6A4A38;background:transparent;color:#C9A08A;cursor:pointer;white-space:nowrap;}
  .xbtn:hover{background:#6A4A38;color:#F0DCC4;}
  /* 진영 범례 — 2026-09-05, 진영별 색으로 나뉜 무대(2차대전 등)에서만 뜬다 */
  .stagelegend{position:fixed;left:14px;bottom:66px;z-index:8;background:rgba(20,15,12,.88);
    border:1px solid #3A2A20;border-radius:8px;padding:9px 12px;font-family:var(--sans);
    font-size:11px;color:#E7D4C0;display:flex;flex-direction:column;gap:5px;
    backdrop-filter:blur(3px);pointer-events:none;}
  .stagelegend.off{display:none;}
  .stagelegend .lgrow{display:flex;align-items:center;gap:7px;white-space:nowrap;}
  .stagelegend .lgsw{width:11px;height:11px;border-radius:3px;flex:none;}
  .stagelegend .lgline{width:20px;height:3px;border-radius:2px;flex:none;position:relative;}
  .stagelegend .lgline::after{content:"";position:absolute;right:-4px;top:-2.5px;border-style:solid;
    border-width:4px 0 4px 6px;border-color:transparent transparent transparent currentColor;}
  .sheet{position:fixed;inset:0;background:rgba(6,10,14,.86);z-index:60;display:none;
    overflow-y:auto;padding:34px 24px 40px;}
  .sheet.on{display:block;}
  .sheet h3{font-family:var(--sans);font-size:17px;font-weight:800;color:var(--tx);
    text-align:center;margin:0 0 4px;}
  .sheet .sub{font-family:var(--serif);font-size:12px;color:var(--tx-lo);text-align:center;margin:0 0 22px;}
  .sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;
    max-width:1180px;margin:0 auto;}
  .scard{text-align:left;background:var(--panel);border:1px solid var(--hair);border-left:4px solid;
    border-radius:7px;padding:13px 15px 14px;cursor:pointer;color:inherit;font:inherit;}
  .scard:hover{border-color:var(--gold-lo);transform:translateY(-2px);}
  .scard{transition:transform .13s ease,border-color .13s ease;}
  .scard .st{font-family:var(--sans);font-weight:800;font-size:14.5px;color:var(--tx);}
  .scard .sy{font-family:var(--mono);font-size:9.5px;color:var(--gold);letter-spacing:.06em;margin:3px 0 6px;}
  .scard .sd{font-size:11.5px;line-height:1.55;color:var(--tx-mid);}
  .scard .sn{font-family:var(--mono);font-size:9px;color:var(--tx-lo);margin-top:8px;letter-spacing:.05em;}
  .sheet .close{display:block;margin:24px auto 0;padding:8px 22px;border-radius:6px;
    border:1px solid var(--hair);background:transparent;color:var(--tx-mid);cursor:pointer;font-size:12px;}
  .qwrap{max-width:640px;margin:0 auto;}
  .qbar{display:flex;gap:14px;justify-content:center;margin-bottom:18px;
    font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--tx-lo);}
  .qbar b{color:var(--gold);font-size:13px;font-family:var(--sans);}
  .stamps{display:flex;flex-wrap:wrap;gap:6px;max-width:640px;margin:0 auto 6px;justify-content:center;}
  .stamp{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;padding:5px 9px;border-radius:20px;
    border:1px dashed #2A3843;color:#4E5C66;}
  .stamp.got{border-style:solid;border-color:var(--gold-lo);color:var(--gold);background:rgba(201,160,94,.08);}
  .mkrow{display:flex;align-items:center;gap:10px;max-width:640px;margin:0 auto 6px;
    background:var(--panel);border:1px solid var(--hair);border-radius:6px;padding:9px 12px;}
  .mkrow .my{font-family:var(--mono);font-size:11px;color:var(--gold);flex:none;min-width:88px;}
  .mkrow .mt{flex:1;font-size:12.5px;color:var(--tx-mid);}
  .mkrow button{flex:none;font-size:11px;padding:4px 9px;border-radius:4px;border:1px solid var(--hair);
    background:transparent;color:var(--tx-lo);cursor:pointer;}
  .mkrow button:hover{border-color:var(--gold-lo);color:var(--gold);}
  .bside .sw2{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:0;}
  .bfall .bt{color:#E7C9A6;}
  .bfall .kind{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
    padding:1px 5px;border-radius:3px;color:#0A0F14;margin-right:6px;vertical-align:1px;}
  .bfall .by{font-size:11px;color:var(--tx-mid);margin:3px 0 0;}
  .bfall .blow{font-family:var(--serif);font-size:12px;color:#D9B48A;margin:4px 0 0;font-style:italic;}
  .bfall .nx{font-size:10.5px;color:var(--tx-lo);margin-top:5px;}
  .bfall .nx b{color:var(--tx-mid);font-weight:600;}
  .korbar.off{display:none;}
  .korbar .jlabel{color:#C9A05E;}
  .korbar button{border-left-width:3px;}
  .korbar button.act{background:#C9A05E;color:#100C06;border-color:#C9A05E;}
  .korbar button.act .yr{color:rgba(16,12,6,.68);}

  /* ---------------- 하단 카드 ---------------- */
  .dock{display:flex;gap:1px;background:var(--hair);border-top:1px solid var(--hair2);
    height:274px;overflow-x:auto;overflow-y:hidden;transition:height .26s ease;}
  .app.wide .dock{height:0;border-top-color:transparent;}
  .dock::-webkit-scrollbar{height:7px;}
  .dock::-webkit-scrollbar-thumb{background:#22303A;border-radius:7px;}
  .dcard{flex:1 1 clamp(238px,17vw,330px);min-width:238px;background:var(--panel);
    display:flex;flex-direction:column;min-height:0;}
  .dcard.w2{flex:1.5 1 clamp(300px,24vw,440px);}
  .dcard.off{display:none;}
  .tag{font-size:11.5px;color:#7FC49A;margin:-1px 0 5px;font-weight:600;}
  .xitem .bt{color:#E08C6A;}
  .kvp{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
  .kvp span{font-size:11.5px;color:var(--tx-mid);background:rgba(255,255,255,.05);
    border:1px solid var(--hair2);border-radius:100px;padding:2px 9px;white-space:nowrap;}
  .dcard h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--gold-lo);margin:0;font-weight:700;padding:11px 16px 9px;
    border-bottom:1px solid var(--hair);flex:none;display:flex;align-items:center;gap:7px;}
  .dcard h4 .cnt{color:var(--tx-lo);font-size:9px;letter-spacing:.06em;}
  .dbody{flex:1;overflow-y:auto;padding:12px 16px 18px;min-height:0;}
  .dbody::-webkit-scrollbar{width:8px;}
  .dbody::-webkit-scrollbar-thumb{background:#1D2A33;border-radius:8px;}
  .dbody::-webkit-scrollbar-track{background:transparent;}

  .sides{font-size:11.5px;color:var(--sea);margin:-1px 0 7px;font-weight:600;line-height:1.45;}
  .battles{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px;}
  .battles span{font-size:10.5px;color:var(--tx-mid);background:rgba(255,255,255,.05);
    border:1px solid var(--hair2);border-radius:100px;padding:2px 8px;white-space:nowrap;
    font-variant-numeric:tabular-nums;}
  .scale{font-size:11.5px;color:var(--tx-lo);margin-top:7px;padding-top:6px;
    border-top:1px dashed var(--hair2);line-height:1.5;}
  .life{font-family:var(--serif);font-size:11.5px;color:var(--tx-lo);margin:-1px 0 6px;
    font-variant-numeric:tabular-nums;}
  .deeds{list-style:none;padding:0;margin:8px 0 0;}
  .deeds li{font-size:12px;color:var(--tx-mid);line-height:1.5;padding-left:11px;
    position:relative;margin-bottom:3px;}
  .deeds li::before{content:"";position:absolute;left:0;top:7.5px;width:4px;height:4px;
    border-radius:50%;background:var(--gold-lo);}
  .imp{font-size:11.5px;color:var(--tx-lo);line-height:1.55;margin-top:5px;
    padding-left:8px;border-left:2px solid var(--hair2);}
  .goods,.stops{font-size:11.5px;color:var(--tx-mid);line-height:1.55;margin-top:7px;}
  .goods b,.stops b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
    color:var(--gold-lo);margin-bottom:2px;font-weight:700;}

  .bt{font-size:13.5px;font-weight:700;margin-bottom:4px;color:var(--tx);}
  /* 목차 항목 아래에 놓인 단원 제목 — 한 단 낮춰 보이게 */
  .bt.sub{font-size:11.5px;font-weight:600;color:var(--tx-mid);margin-top:10px;
    padding-top:8px;border-top:1px solid rgba(255,255,255,.07);}
  .battles span.on{color:#F0D48C;background:rgba(233,199,122,.14);
    box-shadow:inset 0 0 0 1px rgba(233,199,122,.3);}
  .bd{font-size:12.5px;color:var(--tx-mid);line-height:1.64;margin:0;}
  .bitem{padding:11px 0;border-top:1px solid var(--hair);}
  .bitem:first-child{border-top:none;padding-top:0;}
  .bwar .bt{color:#E8B092;}
  .broute .bt{color:var(--sea);}
  .yrs{font-family:var(--serif);font-size:11px;color:var(--tx-lo);margin-left:6px;font-variant-numeric:tabular-nums;}
  .why{font-size:12.5px;color:var(--tx-mid);line-height:1.58;margin:0 0 6px;}
  .why b,.then b{font-weight:700;font-size:10px;font-family:var(--mono);letter-spacing:.08em;display:block;margin-bottom:2px;}
  .why b{color:var(--gold-lo);}
  .then{font-size:12.5px;color:var(--tx-lo);line-height:1.58;margin:0;}
  .then b{color:var(--tx-lo);}
  .bev{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--hair);}
  .bev:first-child{border-top:none;padding-top:0;}
  .bev .y{font-family:var(--serif);font-size:11.5px;color:var(--gold);flex:none;min-width:52px;
    font-variant-numeric:tabular-nums;padding-top:1px;}
  .bev .t{font-size:12.5px;font-weight:700;margin-bottom:2px;}
  .bev .d{font-size:11.5px;color:var(--tx-mid);line-height:1.55;}
  .bnone{font-size:12.5px;color:var(--tx-lo);}
  .prole{font-family:var(--mono);font-size:9px;letter-spacing:.1em;padding:1px 6px;border-radius:100px;
    margin-left:6px;vertical-align:middle;}
  .prole.정치{background:rgba(233,199,122,.16);color:#E4C079;}
  .prole.장군{background:rgba(226,140,116,.16);color:#E8A088;}
  .prole.사상{background:rgba(122,196,198,.16);color:#7EC4C6;}

  /* ---------------- 지도 ---------------- */
  .mapwrap{position:relative;overflow:hidden;background:var(--ocean);touch-action:none;
    transition:margin-right .22s cubic-bezier(.4,0,.2,1);}
  /* 창이 지도 위에 뜨므로 지도를 밀 일이 없다 */
  canvas#map{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;}
  /* 누를 게 있는 자리 — 끄는 중일 때는 끄는 손이 이긴다 */
  canvas#map.pick{cursor:pointer;}
  /* 글자 위 — 이 글자를 정확히 찍는다는 뜻. I빔은 이름을 고치는 걸로 읽힌다 */
  canvas#map.ontext{cursor:crosshair;}
  canvas#map.drag{cursor:grabbing;}

  .ctl{position:absolute;top:14px;right:96px;display:flex;gap:6px;align-items:flex-start;}
  .ctl button{height:32px;min-width:32px;padding:0 10px;border-radius:9px;border:1px solid var(--hair2);
    background:rgba(8,15,21,.86);color:var(--tx-mid);font-size:12px;cursor:pointer;
    font-family:var(--sans);line-height:1;display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(6px);}
  .ctl button:hover{color:var(--tx);border-color:var(--gold-lo);}
  .ctl button:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
  .ctl button.big{font-size:16px;}
  .ctl button.on{border-color:var(--gold);color:var(--gold);}
  /* 참여는 눌러 볼 마음이 들어야 시작된다. 처음부터 보이는 자리에 둔다 */
  .ctl button.whotop{color:var(--gold);border-color:var(--gold-lo);
    max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ctl button.fixtop{border-style:dashed;color:var(--gold-lo);}
  .ctl button.fixtop:hover{border-style:solid;color:var(--gold);
    background:rgba(201,160,94,.12);}

  /* 오른쪽 상세 창 — 지도를 덮지 않고 옆으로 민다 */
  /* 화면 끝이 아니라 카드 바로 옆. 지도를 밀어낼 필요가 없다 */
  .side{position:absolute;left:calc(16px + var(--cardw) + 10px);bottom:96px;
    width:var(--cardw);max-height:max(180px,min(62vh,560px,calc(100% - 156px)));
    z-index:60;background:rgba(8,14,19,.975);border:1px solid var(--hair2);
    border-radius:14px;display:none;flex-direction:column;overflow:hidden;
    opacity:0;transform:translateX(-10px);transition:opacity .18s,transform .18s;
    box-shadow:0 18px 46px rgba(0,0,0,.55);}
  .side.on{display:flex;opacity:1;transform:none;}
  .side-h{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 10px;
    border-bottom:1px solid var(--hair);flex:none;}
  .side-h .ttl{flex:1;min-width:0;}
  .side-h .eyeb{font-family:var(--serif);font-size:12px;color:var(--gold);
    font-variant-numeric:tabular-nums;margin-bottom:3px;}
  .side-h h3{margin:0;font-size:17px;font-weight:700;line-height:1.3;}
  .side-x{flex:none;width:30px;height:30px;border-radius:7px;border:1px solid var(--hair2);
    background:transparent;color:var(--tx-lo);font-size:17px;cursor:pointer;line-height:1;}
  .side-x:hover{color:var(--tx);border-color:var(--gold-lo);}
  .side-b{flex:1;overflow-y:auto;padding:2px 16px 16px;overscroll-behavior:contain;}
  .side-b .card-sec{margin-top:15px;padding-top:13px;}
  .side-b .card-p{font-size:13px;line-height:1.72;}
  .side-b .card-row{font-size:12.5px;margin-bottom:7px;}
  .detbtn{margin-top:14px;width:100%;padding:9px;border-radius:8px;
    border:1px solid var(--gold-lo);background:rgba(201,160,94,.10);
    color:var(--gold);font:inherit;font-size:12.5px;cursor:pointer;}
  .detbtn:hover{background:rgba(201,160,94,.18);}
  @media (max-width:1100px){
    /* 나란히 놓을 자리가 없다. 카드 자리에 겹쳐 띄운다 */
    .side{left:16px;width:var(--cardw);}
    .app.side-on .card{display:none;}
  }
  .modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;
    justify-content:center;background:rgba(4,8,12,.72);backdrop-filter:blur(3px);}
  .modal.on{display:flex;}
  .modal-box{width:min(380px,90vw);background:#0C141B;border:1px solid var(--hair2);
    border-radius:14px;padding:24px 24px 20px;box-shadow:0 24px 70px rgba(0,0,0,.7);}
  .modal-box h4{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--tx);}
  .modal-box p{margin:0 0 18px;font-size:12.5px;line-height:1.6;color:var(--tx-mid);}
  .signin{display:flex;flex-direction:column;gap:8px;}
  .signin button{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:8px;
    border:1px solid var(--hair2);background:rgba(255,255,255,.04);color:var(--tx);
    font:inherit;font-size:13px;cursor:pointer;text-align:left;}
  .signin button:hover{border-color:var(--gold-lo);}
  .signin button i{width:18px;height:18px;border-radius:4px;flex:none;font-style:normal;
    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
  .modal-x{margin-top:14px;width:100%;padding:9px;border-radius:8px;border:0;
    background:transparent;color:var(--tx-lo);font:inherit;font-size:12px;cursor:pointer;}
  .modal-x:hover{color:var(--tx-mid);}
  .modal-note{margin-top:12px;font-size:11px;color:var(--tx-lo);line-height:1.5;}
  .modal-note.agree{margin-top:8px;}
  .modal-note a{color:var(--gold-lo);border-bottom:1px solid var(--gold-lo);
    text-decoration:none;}
  .modal-note a:hover{color:var(--gold);border-bottom-color:var(--gold);}
  /* 고칠 곳 알려주기 — 245편을 혼자 다 지킬 수는 없다 */
  .nodeep{margin-top:14px;padding:9px 11px;border-radius:8px;
    border:1px dashed var(--hair2);font-size:11.5px;color:var(--tx-lo);
    text-align:center;line-height:1.55;}
  .fixbtn{margin-top:8px;width:100%;padding:8px;border-radius:8px;
    border:1px dashed var(--hair2);background:transparent;color:var(--tx-lo);
    font:inherit;font-size:11.5px;cursor:pointer;}
  .fixbtn:hover{border-color:var(--gold-lo);color:var(--gold);}
  .fixsub{margin:-10px 0 16px;padding:8px 11px;border-radius:8px;
    background:rgba(201,160,94,.08);border:1px solid var(--gold-lo);
    font-size:12.5px;color:var(--gold);}
  .fixkind{display:flex;gap:6px;margin-bottom:11px;}
  .fixkind button{flex:1;padding:8px 4px;border-radius:8px;border:1px solid var(--hair2);
    background:rgba(255,255,255,.03);color:var(--tx-mid);font:inherit;font-size:12px;
    cursor:pointer;}
  .fixkind button.on{border-color:var(--gold);color:var(--gold);
    background:rgba(201,160,94,.12);}
  .fixform textarea,.fixform input{width:100%;box-sizing:border-box;border-radius:8px;
    border:1px solid var(--hair2);background:rgba(6,11,16,.8);color:var(--tx);
    font:inherit;font-size:12.5px;padding:9px 11px;outline:none;resize:vertical;}
  .fixform textarea{min-height:104px;line-height:1.65;margin-bottom:8px;}
  .fixform textarea:focus,.fixform input:focus{border-color:var(--gold-lo);}
  .fixgo{margin-top:12px;width:100%;padding:11px;border-radius:9px;border:1px solid var(--gold);
    background:rgba(201,160,94,.16);color:var(--gold);font:inherit;font-size:13.5px;
    font-weight:700;cursor:pointer;}
  .fixgo:hover{background:rgba(201,160,94,.26);}
  .fixmine{margin-top:10px;display:flex;align-items:center;justify-content:space-between;
    gap:8px;font-size:11px;color:var(--tx-lo);}
  .fixmine button{padding:5px 9px;border-radius:6px;border:1px solid var(--hair2);
    background:transparent;color:var(--tx-lo);font:inherit;font-size:11px;cursor:pointer;}
  .fixmine button:hover{color:var(--gold);border-color:var(--gold-lo);}
  /* 검색은 이 지도에서 가장 많이 쓰는 손잡이다. 단추들 틈에 끼워 두면 안 보인다 */
  .find{position:relative;flex:none;margin-right:6px;}
  .find .mg{position:absolute;left:13px;top:50%;margin-top:-7px;width:11px;height:11px;
    border:1.7px solid var(--gold-lo);border-radius:50%;pointer-events:none;}
  .find .mg::after{content:"";position:absolute;right:-5px;bottom:-4px;width:7px;height:1.7px;
    background:var(--gold-lo);transform:rotate(45deg);border-radius:1px;}
  .find input{width:248px;height:38px;padding:0 12px 0 34px;border-radius:11px;
    border:1px solid var(--gold-lo);background:rgba(10,18,25,.94);color:var(--tx);
    font:inherit;font-size:13.5px;outline:none;backdrop-filter:blur(6px);
    box-shadow:0 0 0 3px rgba(201,160,94,.07),0 10px 26px rgba(0,0,0,.42);
    transition:width .18s ease,box-shadow .18s ease,border-color .18s ease;}
  .find input:focus{width:330px;border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,160,94,.20),0 12px 32px rgba(0,0,0,.55);}
  .find input:focus + .mg,.find input:hover + .mg{border-color:var(--gold);}
  .find input:focus + .mg::after,.find input:hover + .mg::after{background:var(--gold);}
  .find input::placeholder{color:var(--tx-lo);}
  .findlist{position:absolute;top:calc(100% + 6px);left:0;min-width:248px;z-index:60;
    background:rgba(10,17,23,.97);border:1px solid var(--hair);border-radius:8px;
    padding:4px;display:none;box-shadow:0 14px 34px rgba(0,0,0,.55);}
  .findlist.on{display:block;}
  .findlist div{padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px;
    color:var(--tx-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .findlist div.sel,.findlist div:hover{background:rgba(201,160,94,.13);color:var(--gold);}
  .findlist div span{opacity:.55;font-size:11px;margin-left:7px;}
  /* 항목을 늘리면 화면 밖으로 밀려난다. 넘치면 그 안에서 굴러가게 한다 */
  .layers{position:absolute;top:54px;right:96px;width:186px;background:rgba(8,15,21,.95);
    border:1px solid var(--hair2);border-radius:12px;padding:12px 14px;display:none;
    backdrop-filter:blur(10px);box-shadow:0 14px 40px rgba(0,0,0,.5);
    max-height:calc(100% - 74px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--gold-lo) transparent;}
  .layers::-webkit-scrollbar{width:7px;}
  .layers::-webkit-scrollbar-thumb{background:var(--gold-lo);border-radius:4px;}
  .layers::-webkit-scrollbar-track{background:transparent;}
  .layers.on{display:block;}
  .layers h5{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold-lo);margin:0 0 9px;font-weight:700;}
  .lrow{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:12.5px;color:var(--tx-mid);}
  .lrow:hover{color:var(--tx);}
  .lrow input{appearance:none;width:15px;height:15px;flex:none;border:1px solid #3A4A55;
    border-radius:4px;background:transparent;cursor:pointer;position:relative;margin:0;}
  .lrow input:checked{background:var(--gold);border-color:var(--gold);}
  .lrow input:checked::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;
    border:solid #0A0F14;border-width:0 2px 2px 0;transform:rotate(42deg);}
  .lrow input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  .lsep{height:1px;background:var(--hair);margin:8px 0;}
  .lall{display:flex;gap:6px;margin-bottom:10px;}
  .lall button{flex:1;font-family:var(--sans);font-size:10.5px;padding:5px 0;border-radius:7px;
    border:1px solid var(--hair2);background:transparent;color:var(--tx-mid);cursor:pointer;}
  .lall button:hover{color:var(--tx);border-color:var(--tx-mid);}
  .lcat{display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin:10px 0 3px;padding-top:8px;border-top:1px solid var(--hair);}
  .lcat:first-of-type{border-top:none;padding-top:0;margin-top:0;}
  .lcat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--gold-lo);font-weight:700;}
  .lcat input{appearance:none;width:14px;height:14px;flex:none;border:1px solid #3A4A55;
    border-radius:4px;background:transparent;cursor:pointer;position:relative;margin:0;}
  .lcat input:checked{background:var(--gold);border-color:var(--gold);}
  .lcat input:checked::after{content:"";position:absolute;left:4px;top:1px;width:3.5px;height:7px;
    border:solid #0A0F14;border-width:0 2px 2px 0;transform:rotate(42deg);}
  .pfield{padding:2px 0 8px 24px;}
  .pfield-hint{font-size:10px;color:var(--tx-lo);margin-bottom:5px;}
  .pfield .pfchip{margin:0 5px 5px 0;}
  .pfchip{font-family:var(--sans);font-size:11px;padding:3px 9px;border-radius:100px;
    border:1px solid var(--hair2);background:transparent;color:var(--tx-mid);cursor:pointer;}
  .pfchip:hover{color:var(--tx);border-color:var(--tx-mid);}
  .pfchip.on{background:var(--gold);border-color:var(--gold);color:#0A0F14;font-weight:600;}

  /* 출처와 같은 자리에 있어 글자가 겹쳤다. 한 층 위로 올린다 */
  .legend{position:absolute;left:16px;bottom:34px;right:120px;pointer-events:none;}
  .legend-t{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--tx-lo);margin-bottom:7px;}
  /* 줄바꿈을 막지 않아 이름 가운데서 잘려 아랫줄과 겹쳤다.
     한 칸은 통째로, 넘치면 줄임표 */
  .legend-items{display:flex;flex-wrap:wrap;gap:5px 14px;max-height:38px;overflow:hidden;}
  .li{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx-mid);
    text-shadow:0 1px 6px rgba(0,0,0,.9);
    white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;
    line-height:1.5;flex:none;}
  .sw{width:9px;height:9px;border-radius:2px;flex:none;}

  .scalebar{position:absolute;right:104px;bottom:18px;height:6px;pointer-events:none;
    border-left:1px solid rgba(233,239,241,.5);border-right:1px solid rgba(233,239,241,.5);
    border-bottom:1.5px solid rgba(233,239,241,.5);}
  .errbox{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:900;
    max-width:min(560px,88vw);background:#140A0A;border:1px solid #7A3A2E;border-radius:12px;
    padding:18px 20px;color:#F0D8CE;font-size:13px;line-height:1.65;display:none;
    box-shadow:0 20px 60px rgba(0,0,0,.7);}
  .errbox.on{display:block;}
  .errbox h4{margin:0 0 8px;font-size:14px;color:#E8907A;font-weight:700;}
  .errbox pre{margin:8px 0 0;white-space:pre-wrap;word-break:break-all;font-size:11.5px;
    font-family:var(--mono);color:#E8CFC4;background:rgba(0,0,0,.45);padding:11px 12px;
    border-radius:6px;max-height:300px;overflow:auto;user-select:text;
    -webkit-user-select:text;cursor:text;}
  .errbox pre::selection{background:#7A3A2E;color:#fff;}
  .errbtns{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap;}
  .errbox button{padding:7px 14px;border-radius:6px;border:1px solid #7A3A2E;
    background:transparent;color:#E8907A;cursor:pointer;font:inherit;font-size:12px;}
  .errbox button:hover{background:#7A3A2E;color:#FFEDE6;}
  .toast{position:absolute;left:50%;bottom:34px;transform:translate(-50%,10px);
    background:rgba(10,17,23,.96);border:1px solid var(--hair2);border-radius:100px;
    padding:9px 18px;font-size:12.5px;color:var(--tx);opacity:0;pointer-events:none;
    transition:opacity .2s,transform .2s;white-space:nowrap;backdrop-filter:blur(8px);}
  .toast.on{opacity:1;transform:translate(-50%,0);}
  .scalebar span{position:absolute;right:0;bottom:8px;font-family:var(--mono);font-size:9px;
    color:var(--tx-mid);white-space:nowrap;text-shadow:0 1px 5px rgba(0,0,0,.9);}

  .card{position:absolute;left:16px;bottom:96px;width:var(--cardw);
    max-height:max(180px,min(58vh,520px,calc(100% - 156px)));overflow-y:auto;background:rgba(8,15,21,.96);
    border:1px solid var(--hair2);border-radius:14px;padding:15px 18px;
    transform:translateY(12px);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
    backdrop-filter:blur(10px);}
  .card.on{opacity:1;transform:none;pointer-events:auto;}
  .card.war{border-color:#3A2A22;} .card.route{border-color:#1F3A42;}
  .card-y{font-family:var(--serif);font-size:12.5px;color:var(--gold);margin-bottom:4px;font-variant-numeric:tabular-nums;}
  .card-t{font-size:15.5px;font-weight:700;margin-bottom:5px;line-height:1.32;}
  .card-d{font-size:12.5px;color:var(--tx-mid);line-height:1.58;margin:0;}
  /* 위 바(공유·표시·검색)에 가리지 않게 지도 칸 높이로도 묶는다 */
  .card{max-height:max(180px,min(62vh,560px,calc(100% - 156px)));overscroll-behavior:contain;}
  .card-sec{margin-top:13px;padding-top:11px;border-top:1px solid var(--hair);}
  .card-s > .card-sec:first-child{border-top:none;padding-top:2px;}
  /* 8.5px 에 자간 .16em 대문자는 한국어에서 안 읽힌다. 키우고 밝힌다 */
  /* 우리가 쓴 긴 글. 카드가 「무슨 일」이면 이 글은 「왜」다 */
  /* 저작권이 끝난 그림만 쓴다. 파일이 없으면 조용히 사라진다 */
  .pic{margin:0 0 14px;}
  .pic img{width:100%;border-radius:9px;display:block;background:rgba(255,255,255,.03);}
  .pic figcaption{margin-top:6px;font-size:10.5px;color:var(--tx-lo);line-height:1.5;}
  .pic figcaption b{color:var(--tx-mid);font-weight:600;}
  .side-b .card-sec.long{border-top:none;padding-top:0;margin-top:6px;}
  .side-b .card-sec.long .card-h{font-size:13px;color:var(--tx);letter-spacing:-.01em;
    line-height:1.4;margin-bottom:10px;}
  .side-b .card-sec.long .card-p{font-size:13.5px;line-height:1.85;color:var(--tx-mid);
    margin-bottom:11px;}
  /* 글 안의 갈래 표시. 긴 글은 마디가 있어야 읽힌다 */
  .side-b .lh{margin:18px 0 8px;font-size:11.5px;font-weight:700;color:var(--gold);
    letter-spacing:.01em;display:flex;align-items:center;gap:8px;}
  .side-b .lh::after{content:"";flex:1;height:1px;background:var(--hair);}
  .side-b .card-sec.long .card-p:first-child{margin-top:0;}
  .side-b .card-sec.long .card-p:first-letter{}
  .card-sec.dis{border-top-color:#4A3E28;}
  .card-sec.dis .card-h{color:#D9B36C;}
  .card-sec.dis .card-h::before{content:"⚖ ";font-size:11px;}
  .card-sec.dis .card-p{color:#C9BCA4;}
  .card-sec.src .card-h::before{content:"📖 ";font-size:11px;}
  .card-sec.src ul.deeds{margin:0 0 10px;}
  .card-h{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.02em;
    color:var(--gold);margin-bottom:8px;opacity:.95;}
  .card-p{font-size:12.5px;color:var(--tx-mid);line-height:1.6;margin:0 0 6px;}
  .card-p b{color:var(--tx);font-weight:600;}
  .card-p em{color:#D9B48A;font-style:italic;font-family:var(--serif);}
  .card-row{display:flex;gap:9px;align-items:baseline;margin-bottom:5px;font-size:12px;}
  .card-row .yy{font-family:var(--mono);font-size:10px;color:var(--gold);flex:none;
    min-width:64px;text-align:right;font-variant-numeric:tabular-nums;}
  .card-row .tt{color:var(--tx-mid);line-height:1.5;}
  .card-row .tt b{color:var(--tx);font-weight:600;}
  .chain-i{display:flex;gap:9px;align-items:baseline;font-size:12px;padding:3px 0;
    border-left:2px solid var(--hair2);padding-left:10px;margin-left:2px;}
  .chain-i.now{border-left-color:var(--gold);}
  .chain-i.now .cn{color:var(--gold);font-weight:700;}
  .chain-i .cy{font-family:var(--mono);font-size:10px;color:var(--tx-lo);flex:none;
    min-width:70px;text-align:right;font-variant-numeric:tabular-nums;}
  .chain-i .cn{color:var(--tx-mid);}
  .spark{width:100%;height:62px;display:block;margin:4px 0 6px;}
  .sparknote{display:flex;justify-content:space-between;font-family:var(--mono);
    font-size:9px;color:var(--tx-lo);margin-bottom:4px;}
  .lk{color:var(--gold);cursor:pointer;border-bottom:1px dotted var(--gold-lo);
    text-decoration:none;}
  .lk:hover{color:#F4E2C2;border-bottom-style:solid;background:rgba(201,160,94,.12);}
  .lk.place{color:#8FC4D8;border-bottom-color:rgba(143,196,216,.5);}
  .lk.place:hover{color:#C4E4F0;background:rgba(143,196,216,.12);}
  .lk.war{color:#D98878;border-bottom-color:rgba(217,136,120,.5);}
  .lk.war:hover{color:#F0B8AC;background:rgba(217,136,120,.12);}
  .back{position:sticky;top:0;float:left;font-family:var(--sans);font-size:11.5px;
    letter-spacing:0;color:var(--gold);background:rgba(201,160,94,.12);
    border:1px solid var(--gold-lo);
    cursor:pointer;padding:5px 11px;border-radius:6px;margin:-2px 0 6px -2px;z-index:2;}
  .back:hover{color:var(--gold);background:rgba(201,160,94,.14);}
  .peer{display:inline-block;font-size:11.5px;padding:3px 8px;border-radius:4px;margin:0 4px 4px 0;
    background:rgba(201,160,94,.10);border:1px solid var(--gold-lo);color:var(--gold);cursor:pointer;}
  .peer:hover{background:var(--gold);color:#0A0F14;}
  .peer .kk{font-family:var(--mono);font-size:8.5px;opacity:.75;margin-right:4px;}
  .card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px;}
  .card-tags span{font-size:10.5px;padding:2px 7px;border-radius:3px;
    background:rgba(255,255,255,.05);color:var(--tx-mid);border:1px solid var(--hair);}
  .card-x{position:sticky;top:0;float:right;width:26px;height:26px;border:none;
    background:rgba(8,15,21,.92);color:var(--tx-mid);font-size:17px;cursor:pointer;
    border-radius:50%;z-index:2;margin:-4px -6px 0 0;line-height:1;}
  .card-x:hover{color:var(--tx);background:rgba(255,255,255,.14);}
  .card-esc{display:block;width:100%;margin-top:14px;padding:9px;border-radius:6px;
    border:1px solid var(--hair);background:transparent;color:var(--tx-lo);
    cursor:pointer;font:inherit;font-size:12px;}
  .card-esc:hover{border-color:var(--gold-lo);color:var(--gold);}

  .hint{position:absolute;right:104px;bottom:74px;font-size:12px;color:var(--tx-mid);
    text-align:right;pointer-events:none;transition:opacity .4s;line-height:1.5;
    text-shadow:0 1px 8px rgba(0,0,0,.95);}
  .hint.off{opacity:0;}
  .hint b{color:var(--gold);font-weight:600;}

  /* ---------------- 게이지 ---------------- */
  .gauge{position:absolute;right:0;top:0;bottom:0;width:78px;touch-action:none;cursor:ns-resize;}
  .gauge:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;border-radius:12px;}
  .gauge-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,13,0),rgba(5,9,13,.72) 42%,rgba(5,9,13,.92));}
  .railbox{position:absolute;right:0;left:0;top:52px;bottom:52px;}
  .railbox::after{content:"";position:absolute;right:26px;top:0;bottom:0;width:1px;background:var(--hair2);}
  .tick{position:absolute;right:26px;height:1px;background:var(--tx-lo);opacity:.55;}
  .wtick{position:absolute;right:15px;width:6px;border-radius:2px;background:#B4664A;opacity:.8;}
  .tlab{position:absolute;right:35px;transform:translateY(-50%);font-family:var(--serif);
    font-size:9.5px;color:var(--tx-lo);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .kband{position:absolute;right:60px;top:0;bottom:0;width:5px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.04);}
  .kseg{position:absolute;left:0;right:0;}
  .klab{position:absolute;right:70px;transform:translateY(-50%);font-size:10px;color:var(--tx-lo);
    white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.95);opacity:.75;}
  .spd{position:absolute;right:52px;transform:translateY(-50%);font-family:var(--mono);
    font-size:11px;font-weight:700;color:var(--gold);opacity:0;transition:opacity .15s;
    pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.9);}
  .spd.on{opacity:1;}
  /* 게이지에는 원래부터 연도 눈금용 .tick이 있다. 이름을 겹치면
     지우고 다시 그릴 때 원래 눈금까지 날아간다 */
  .evtick{position:absolute;right:34px;width:9px;height:1.5px;border-radius:1px;pointer-events:none;}
  .evtick.pp{background:rgba(233,199,122,.72);}
  .evtick.ww{background:rgba(180,69,58,.7);width:12px;}
  .evtick.ee{background:rgba(127,190,208,.6);width:7px;}
  .evtick.ff{background:rgba(156,75,58,.75);width:6px;right:46px;}
  .handle{position:absolute;right:18px;width:22px;height:2px;background:var(--gold);box-shadow:0 0 14px 2px var(--gold-glow);}
  .handle::after{content:"";position:absolute;right:-7px;top:50%;width:15px;height:15px;margin-top:-7.5px;
    border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(217,178,106,.16),0 2px 8px rgba(0,0,0,.6);}
  .gcap{position:absolute;right:20px;font-family:var(--mono);font-size:9px;letter-spacing:.09em;color:var(--tx-lo);}
  .gcap.top{top:26px;} .gcap.bot{bottom:26px;}

  /* ---------------- 좁은 화면 ---------------- */
  @media(max-width:900px){
    .dock{height:44vh;}
    .app.wide .dock{height:0;}
    .dcard{min-width:210px;flex:0 0 210px;}
    .dcard.w2{flex:0 0 268px;}
    .ctl{right:84px;top:10px;gap:4px;}
    .ctl button{height:29px;min-width:29px;padding:0 8px;font-size:11px;}
    /* 좁은 화면에서는 줄이되 여전히 다른 단추보다 크게 둔다 */
    .find input{width:150px;height:31px;font-size:12.5px;padding-left:30px;border-radius:9px;}
    .find input:focus{width:196px;}
    .find .mg{left:11px;width:10px;height:10px;margin-top:-6px;}
    .findlist{min-width:200px;}
    .layers{right:84px;top:46px;}
    .legend{right:96px;bottom:10px;}
    .card{width:min(320px,72vw);}
    .klab{display:none;}
    #bigNum{font-size:38px;}
    /* 출처는 라이선스 조건이라 좁은 화면에서도 지우면 안 된다. 줄이기만 한다 */
    .brandtag .long{display:none;}
    .brandtag{bottom:10px;font-size:9px;}
  }