:root{
    --bg-void:#15170f;
    --bg-panel:#1d2016;
    --bg-panel-raised:#262a1b;
    --line:rgba(232,230,220,0.09);
    --line-strong:rgba(232,230,220,0.22);
    --text-primary:#ece8da;
    --text-secondary:#bcb9a9;
    --text-muted:#8a8b78;
    --erosion:#83ab5d;
    --erosion-ink:#dff0cf;
    --awakened:#e29144;
    --awakened-ink:#ffe9d3;
    --corruption:#7a6570;
    --corruption-ink:#e7dbe0;
    --blessing:#74bce2;
    --blessing-ink:#dff2fb;
  }
  html{background:var(--bg-void);min-height:100%}
  *{box-sizing:border-box}
  body{
    margin:0;min-height:100vh;
    background:
      radial-gradient(ellipse at 20% -10%, rgba(116,188,226,0.07), transparent 45%),
      radial-gradient(ellipse at 90% 0%, rgba(131,171,93,0.06), transparent 40%),
      var(--bg-void);
    color:var(--text-primary);
    font-family:'IBM Plex Sans KR', sans-serif;
    padding:56px 24px 80px;
  }
  .page{max-width:920px;margin:0 auto}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--blessing);opacity:0.85;margin:0 0 14px;
  }
  h1{
    font-family:'Cinzel',serif;font-weight:600;
    font-size:34px;line-height:1.25;margin:0 0 10px;
    color:var(--text-primary);letter-spacing:0.01em;
  }
  .sub{font-size:14px;color:var(--text-secondary);margin:0 0 40px;max-width:56ch;line-height:1.7}

  .panel{
    background:var(--bg-panel);
    border:0.5px solid var(--line-strong);
    border-radius:16px;padding:28px 28px 24px;
    box-shadow:0 1px 2px rgba(0,0,0,0.15), 0 12px 32px rgba(0,0,0,0.25);
  }

  .ruler-row{display:grid;grid-template-columns:210px 1fr;margin-bottom:6px}
  .ruler{position:relative;height:20px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-muted)}
  .ruler span{position:absolute;top:0}

  .group{margin-top:26px}
  .group:first-of-type{margin-top:22px}

  .build-card{
    display:flex;align-items:center;gap:12px;
    padding:10px 14px;margin-bottom:14px;
    background:var(--bg-panel-raised);
    border:0.5px solid var(--line);
    border-radius:10px;
  }
  .socket{
    width:16px;height:16px;flex:none;
    transform:rotate(45deg);
    border:1.5px solid var(--text-muted);
    border-radius:3px;
    transition:background 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .socket.on{
    background:var(--blessing);
    border-color:var(--blessing);
    box-shadow:0 0 10px 1px rgba(116,188,226,0.5);
  }
  .build-title{font-size:14px;font-weight:600;color:var(--text-primary)}
  .build-meta{
    font-family:'IBM Plex Mono',monospace;font-size:12px;
    color:var(--text-muted);
  }
  .build-meta b{color:var(--text-secondary);font-weight:500}
  .switch{
    display:flex;align-items:center;gap:9px;
    margin-left:auto;cursor:pointer;user-select:none;
  }
  .switch input{position:absolute;opacity:0;width:1px;height:1px}
  .switch-track{
    position:relative;width:34px;height:19px;border-radius:10px;
    background:var(--line-strong);transition:background 0.2s;flex:none;
  }
  .switch-thumb{
    position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
    background:var(--text-secondary);transition:transform 0.2s, background 0.2s;
  }
  .switch input:checked + .switch-track{background:rgba(116,188,226,0.35)}
  .switch input:checked + .switch-track .switch-thumb{
    transform:translateX(15px);background:var(--blessing);
    box-shadow:0 0 6px rgba(116,188,226,0.7);
  }
  .switch-label{font-size:12.5px;color:var(--text-secondary);white-space:nowrap}

  .mini-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
  .mini-head .offset-title{margin:0}
  .mini-switch{margin-left:0}
  .mini-switch .switch-track{width:26px;height:15px}
  .mini-switch .switch-thumb{width:11px;height:11px}
  .mini-switch input:checked + .switch-track .switch-thumb{transform:translateX(11px)}

  .row{display:grid;grid-template-columns:210px 1fr;align-items:center;margin-bottom:10px}
  .row-label{font-size:13px;color:var(--text-secondary);padding-right:14px}
  .row-label b{color:var(--text-primary);font-weight:500}
  .row-label .cyc{
    display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    color:var(--text-muted);margin-top:3px;white-space:nowrap;
  }

  .track-wrap{display:flex;flex-direction:column;gap:3px}
  .ticks{position:relative;height:8px}
  .tick{position:absolute;top:0;background:var(--line-strong)}
  .tick.minor{width:1px;height:4px}
  .tick.major{width:1px;height:8px;background:rgba(232,230,220,0.38)}

  .track{
    position:relative;height:22px;border-radius:5px;
    background:rgba(255,255,255,0.035);
    border:0.5px solid var(--line);
    overflow:hidden;
  }
  .seg{position:absolute;top:0;bottom:0}
  .seg.normal{background:var(--erosion)}
  .seg.awakened{background:var(--awakened)}
  .seg.ineffective{background:var(--corruption)}
  .overlay{
    position:absolute;top:0;bottom:0;
    background-image:repeating-linear-gradient(48deg, rgba(116,188,226,0.32) 0 2px, rgba(116,188,226,0.32) 2px 3px, transparent 3px 9px);
    border-left:1.5px solid var(--blessing);
    border-right:1.5px solid var(--blessing);
  }
  .overlay-emblem{
    position:absolute;top:0;bottom:0;
    background-image:repeating-linear-gradient(48deg, rgba(224,90,90,0.32) 0 2px, rgba(224,90,90,0.32) 2px 3px, transparent 3px 9px);
    border-left:1.5px solid #e05a5a;
    border-right:1.5px solid #e05a5a;
  }
  .overlay-both{
    position:absolute;top:0;bottom:0;
    background-image:repeating-linear-gradient(48deg, rgba(216,150,240,0.42) 0 2px, rgba(216,150,240,0.42) 2px 3px, transparent 3px 9px);
    border-left:1.5px solid #d896f0;
    border-right:1.5px solid #d896f0;
    box-shadow:0 0 6px rgba(216,150,240,0.5);
  }
  .overlay-break{
    position:absolute;top:0;bottom:0;
    background:rgba(240,208,96,0.16);
    border-top:2px dashed #f0d060;
    border-bottom:2px dashed #f0d060;
    border-left:1.5px solid #f0d060;
    border-right:1.5px solid #f0d060;
  }

  .controls-row{
    display:flex;align-items:flex-start;gap:10px;margin-bottom:22px;
    flex-wrap:nowrap;overflow-x:auto;
  }
  .offset-controls{
    display:flex;flex-direction:column;gap:8px;flex:none;
    width:fit-content;
    padding:10px 12px;background:var(--bg-panel-raised);
    border:0.5px solid var(--line);border-radius:10px;
  }
  .stack-controls{
    display:flex;flex-direction:column;gap:8px;justify-content:center;flex:none;
    width:fit-content;
    padding:10px 12px;background:var(--bg-panel-raised);
    border:0.5px solid var(--line);border-radius:10px;
  }
  .offset-title{
    font-size:11.5px;font-weight:500;color:var(--text-secondary);
    margin:0 0 2px;letter-spacing:0.01em;white-space:nowrap;
  }
  .offset-control{display:flex;align-items:center;gap:8px}
  .offset-control label{font-size:12px;color:var(--text-secondary);white-space:nowrap;width:118px}
  .offset-hint{color:var(--text-muted);font-size:10.5px}
  .offset-control input[type=range]{
    -webkit-appearance:none;appearance:none;
    width:100px;height:4px;border-radius:2px;
    background:var(--line-strong);outline:none;cursor:pointer;
  }
  .offset-control input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
    background:var(--blessing);cursor:pointer;
    box-shadow:0 0 7px rgba(116,188,226,0.65);
  }
  .offset-control input[type=range]::-moz-range-thumb{
    width:14px;height:14px;border-radius:50%;background:var(--blessing);
    cursor:pointer;border:none;box-shadow:0 0 7px rgba(116,188,226,0.65);
  }
  .offset-control input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line-strong)}
  .offset-val{
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--blessing);
    min-width:34px;text-align:right;
  }
  .offset-val-input{
    font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.4;
    width:48px;text-align:right;box-sizing:border-box;
    background:var(--bg-panel);color:var(--awakened);
    border:0.5px solid var(--line-strong);border-radius:5px;
    padding:3px 6px;
    -webkit-appearance:textfield;appearance:textfield;
  }
  .offset-val-input::-webkit-outer-spin-button,
  .offset-val-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .offset-val-input{-moz-appearance:textfield}

  /* 슬라이더 색상을 그래프 위 오버레이 색상과 맞춰서, 어떤 조작이 어떤 구간에 대응하는지 한눈에 알 수 있게 함 */
  #offset-1-val, #offset-2-val, #offset-3-val{color:var(--blessing)}

  #stack-input{background:var(--line-strong)}
  #stack-input::-webkit-slider-thumb{background:var(--awakened);box-shadow:0 0 7px rgba(226,145,68,0.65)}
  #stack-input::-moz-range-thumb{background:var(--awakened);box-shadow:0 0 7px rgba(226,145,68,0.65)}
  #stack-input-val{color:var(--awakened)}

  #emblem-cd-input::-webkit-slider-thumb{background:#e05a5a;box-shadow:0 0 7px rgba(224,90,90,0.65)}
  #emblem-cd-input::-moz-range-thumb{background:#e05a5a;box-shadow:0 0 7px rgba(224,90,90,0.65)}
  #emblem-cd-input-val{color:#e05a5a}

  #break-time-input::-webkit-slider-thumb,
  #break-dur-input::-webkit-slider-thumb{background:#f0d060;box-shadow:0 0 7px rgba(240,208,96,0.65)}
  #break-time-input::-moz-range-thumb,
  #break-dur-input::-moz-range-thumb{background:#f0d060;box-shadow:0 0 7px rgba(240,208,96,0.65)}
  #break-time-input-val,
  #break-dur-input-val{color:#f0d060}

  .legend{
    display:flex;flex-wrap:wrap;gap:20px;
    margin-top:30px;padding-top:20px;
    border-top:0.5px solid var(--line);
    font-size:12px;color:var(--text-secondary);
  }
  .legend-item{display:flex;align-items:center;gap:7px}
  .swatch{width:11px;height:11px;border-radius:3px;flex:none}
  .legend-note{font-size:11px;color:var(--text-muted);margin-left:auto}

  @media (max-width:640px){
    .ruler-row,.row{grid-template-columns:1fr}
    .row{row-gap:6px}
    .row-label{font-size:12px;padding-right:0}
    .row-label .cyc{white-space:normal}
    .ruler{display:none}
    .legend-note{margin-left:0;width:100%}
  }

  /* ---------- 탭 ---------- */
  .tabbar{display:flex;gap:8px;margin-bottom:22px}
  .tab-btn{
    font-family:'IBM Plex Sans KR',sans-serif;
    font-size:13.5px;font-weight:500;
    color:var(--text-secondary);
    background:var(--bg-panel);
    border:0.5px solid var(--line-strong);
    border-radius:10px;
    padding:11px 20px;cursor:pointer;
    transition:background 0.15s, color 0.15s, border-color 0.15s;
  }
  .tab-btn:hover{color:var(--text-primary)}
  .tab-btn.active{
    color:var(--blessing-ink);
    background:var(--bg-panel-raised);
    border-color:var(--blessing);
    box-shadow:0 0 0 1px rgba(116,188,226,0.15);
  }
  .tab-panel{display:none}
  .tab-panel.active{display:block}

  /* ---------- 데카 계산기 ---------- */
  .calc-title{
    font-family:'Cinzel',serif;font-weight:600;font-size:20px;
    margin:0 0 8px;color:var(--text-primary);
  }
  .calc-toplevel{display:flex;gap:10px;margin:20px 0 18px}
  .cat-btn{
    flex:1;font-family:'IBM Plex Sans KR',sans-serif;
    font-size:14px;font-weight:600;color:var(--text-secondary);
    background:var(--bg-panel-raised);
    border:0.5px solid var(--line-strong);
    border-radius:10px;padding:14px;cursor:pointer;
    transition:background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  }
  .cat-btn:hover{color:var(--text-primary)}
  .cat-btn.active{
    color:var(--awakened-ink);
    background:rgba(226,145,68,0.14);
    border-color:var(--awakened);
    box-shadow:0 0 12px rgba(226,145,68,0.18);
  }
  .calc-groups{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
  .calc-group{
    background:var(--bg-panel-raised);
    border:0.5px solid var(--line);
    border-radius:10px;overflow:hidden;
  }
  .calc-group-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 14px;cursor:pointer;user-select:none;
    font-size:13.5px;font-weight:600;color:var(--text-primary);
  }
  .calc-group-head .chev{
    font-family:'IBM Plex Mono',monospace;color:var(--text-muted);
    font-size:12px;transition:transform 0.15s;
  }
  .calc-group.open .calc-group-head .chev{transform:rotate(90deg)}
  .calc-group-body{
    display:none;padding:0 14px 14px;
    flex-direction:column;gap:8px;
  }
  .calc-group.open .calc-group-body{display:flex}
  .tier-row{
    display:flex;align-items:center;gap:10px;
    padding:9px 10px;border-radius:9px;
    border:0.5px solid var(--line);
    background:rgba(255,255,255,0.02);
  }
  .tier-row.tier-jan{border-left:3px solid var(--erosion)}
  .tier-row.tier-hae{border-left:3px solid var(--blessing)}
  .tier-label{
    flex:none;width:40px;text-align:center;
    font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
    letter-spacing:0.02em;border-radius:6px;padding:4px 0;
  }
  .tier-row.tier-jan .tier-label{color:var(--erosion-ink);background:rgba(131,171,93,0.16)}
  .tier-row.tier-hae .tier-label{color:var(--blessing-ink);background:rgba(116,188,226,0.16)}
  .tier-items{display:flex;flex-wrap:wrap;gap:8px;flex:1}
  .item-btn{
    font-family:'IBM Plex Sans KR',sans-serif;
    font-size:12.5px;color:var(--text-secondary);
    background:var(--bg-panel);
    border:0.5px solid var(--line);
    border-radius:8px;padding:8px 12px;cursor:pointer;
    transition:background 0.15s, color 0.15s, border-color 0.15s;
  }
  .item-btn:hover{color:var(--text-primary);border-color:var(--line-strong)}
  .item-btn.selected.tier-btn-jan{
    color:var(--erosion-ink);background:rgba(131,171,93,0.2);border-color:var(--erosion);
  }
  .item-btn.selected.tier-btn-hae{
    color:var(--blessing-ink);background:rgba(116,188,226,0.2);border-color:var(--blessing);
  }

  .calc-result{
    background:var(--bg-panel-raised);
    border:0.5px solid var(--blessing);
    border-radius:12px;padding:18px 20px;margin-bottom:22px;
    box-shadow:0 0 16px rgba(116,188,226,0.1);
  }
  .result-header{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:10px;margin-bottom:14px;
  }
  .result-title{font-size:15.5px;font-weight:600;color:var(--blessing-ink)}
  .qty-control{display:flex;align-items:center;gap:8px}
  .qty-control label{font-size:12px;color:var(--text-secondary)}
  .qty-control input{
    width:56px;font-family:'IBM Plex Mono',monospace;font-size:13px;
    color:var(--text-primary);background:var(--bg-panel);
    border:0.5px solid var(--line-strong);border-radius:7px 0 0 7px;
    border-right:none;
    padding:6px 8px;text-align:right;
  }
  .mat-table{width:100%;border-collapse:collapse;font-size:12.5px}
  .mat-table th{
    text-align:left;font-weight:500;color:var(--text-muted);
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:0.05em;text-transform:uppercase;
    padding:0 0 8px;border-bottom:0.5px solid var(--line);
  }
  .mat-table td{
    padding:7px 0;border-bottom:0.5px solid var(--line);
    color:var(--text-secondary);
  }
  .mat-table td:first-child{color:var(--text-primary)}
  .mat-name{display:flex;align-items:center;gap:8px}
  .mat-name img{width:22px;height:22px;object-fit:contain;border-radius:5px}
  .mat-table td.num, .mat-table th.num{text-align:right;font-family:'IBM Plex Mono',monospace}
  .result-total{
    display:flex;justify-content:flex-end;align-items:center;gap:8px;
    margin-top:14px;padding-top:12px;border-top:0.5px solid var(--line-strong);
    font-size:14px;color:var(--text-secondary);
  }
  .result-total span{
    font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;
    color:var(--awakened-ink);
  }
  .price-editor{
    padding-bottom:20px;margin-bottom:22px;border-bottom:0.5px solid var(--line);
  }
  .price-editor-head{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:10px;
  }
  .sync-status{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    color:var(--text-muted);margin-left:8px;font-weight:400;
  }
  .admin-box{margin-top:14px;padding-top:14px;border-top:0.5px dashed var(--line);display:none}
  .admin-box.visible{display:block}
  .admin-panel{
    display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;
  }
  .admin-panel input[type=password]{
    font-family:'IBM Plex Mono',monospace;font-size:12px;
    color:var(--text-primary);background:var(--bg-panel);
    border:0.5px solid var(--line-strong);border-radius:7px;
    padding:6px 10px;width:160px;
  }
  .admin-status{font-size:11.5px;color:var(--text-muted)}
  .price-editor-actions{display:flex;gap:8px;flex-wrap:wrap}
  .ghost-btn{
    font-family:'IBM Plex Sans KR',sans-serif;font-size:11.5px;color:var(--text-secondary);
    background:transparent;border:0.5px solid var(--line-strong);border-radius:7px;
    padding:6px 10px;cursor:pointer;
    transition:color 0.15s, border-color 0.15s, background 0.15s;
  }
  .ghost-btn:hover{color:var(--text-primary);border-color:var(--blessing);background:rgba(116,188,226,0.08)}
  .bulk-paste-box{
    margin:12px 0 4px;padding:12px;
    background:var(--bg-panel-raised);border:0.5px solid var(--line);border-radius:10px;
  }
  .bulk-paste-box textarea{
    width:100%;min-height:110px;resize:vertical;box-sizing:border-box;
    font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.6;
    color:var(--text-primary);background:var(--bg-panel);
    border:0.5px solid var(--line-strong);border-radius:8px;padding:10px;
  }
  .bulk-paste-footer{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:10px;margin-top:8px;
  }
  .bulk-paste-hint{font-size:11.5px;color:var(--text-muted)}
  .apply-btn{
    font-family:'IBM Plex Sans KR',sans-serif;font-size:12.5px;font-weight:600;
    color:var(--blessing-ink);background:rgba(116,188,226,0.16);
    border:0.5px solid var(--blessing);border-radius:7px;padding:7px 14px;cursor:pointer;
    transition:background 0.15s;
  }
  .apply-btn:hover{background:rgba(116,188,226,0.26)}
  .price-grid{
    display:grid;grid-template-columns:repeat(3, 1fr);
    gap:10px;margin-top:14px;
  }
  .price-item{
    display:flex;align-items:center;gap:10px;
    background:var(--bg-panel-raised);border:0.5px solid var(--line);
    border-radius:8px;padding:8px 10px;
  }
  .price-item img{
    width:34px;height:34px;flex:none;border-radius:7px;
    object-fit:contain;
  }
  .price-item .price-fields{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
  .price-item label{font-size:11.5px;color:var(--text-secondary);line-height:1.3;overflow:hidden}
  .price-item input{
    width:64px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
    color:var(--blessing);background:var(--bg-panel);
    border:0.5px solid var(--line-strong);border-radius:6px 0 0 6px;
    border-right:none;
    padding:5px 6px;text-align:right;
  }
  .num-input{display:inline-flex;align-items:stretch}
  .num-input input[type=number]{-moz-appearance:textfield}
  .num-input input[type=number]::-webkit-outer-spin-button,
  .num-input input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .num-stepper{display:flex;flex-direction:column;flex:none}
  .num-stepper button{
    width:16px;flex:1;border:0.5px solid var(--line-strong);border-left:none;
    background:var(--bg-panel);color:var(--text-muted);
    font-size:7px;line-height:1;cursor:pointer;padding:0;
    display:flex;align-items:center;justify-content:center;
    transition:background 0.15s, color 0.15s;
  }
  .num-stepper button:first-child{border-top-right-radius:6px;border-bottom:none}
  .num-stepper button:last-child{border-bottom-right-radius:6px}
  .num-stepper button:hover{color:var(--blessing);background:var(--bg-panel-raised)}
  .num-stepper button:active{color:var(--blessing-ink)}
  .qty-control .num-stepper button:first-child{border-top-right-radius:7px}
  .qty-control .num-stepper button:last-child{border-bottom-right-radius:7px}
  @media (max-width:640px){
    .price-grid{grid-template-columns:1fr 1fr}
    .rune-trait-filter{grid-template-columns:repeat(2, 1fr)}
    .pn-job-groups{grid-template-columns:repeat(3, 1fr)}
  }
  /* ---------- 직업별 패치노트 ---------- */
  .pn-filter-label{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:0.05em;text-transform:uppercase;
    color:var(--text-muted);margin:20px 0 8px;
  }
  .pn-job-groups{
    display:grid;grid-template-columns:repeat(6, 1fr);gap:8px;margin-top:18px;margin-bottom:6px;
  }
  .pn-job-group{
    background:var(--bg-panel-raised);border:0.5px solid var(--line);
    border-radius:10px;padding:8px;
  }
  .pn-job-group-title{
    font-family:'IBM Plex Sans KR',sans-serif;font-size:13px;font-weight:700;
    color:var(--text-primary);text-align:center;margin-bottom:8px;letter-spacing:0.01em;
  }
  .pn-job-btn{
    display:block;width:100%;font-family:'IBM Plex Sans KR',sans-serif;
    font-size:12.5px;font-weight:600;color:var(--text-muted);
    background:var(--bg-panel);border:0.5px solid var(--line);
    border-radius:7px;padding:7px 4px;margin-top:5px;cursor:pointer;
    transition:background 0.15s, color 0.15s, border-color 0.15s;
  }
  .pn-job-group-title + .pn-job-btn{margin-top:0}
  .pn-job-btn:hover{color:var(--text-primary)}
  .pn-job-btn.active{
    color:var(--text-primary);background:var(--bg-panel);
    border-color:var(--blessing);box-shadow:0 0 8px rgba(116,188,226,0.15);
  }
  .pn-sort-row{
    display:flex;align-items:center;justify-content:space-between;
    margin:18px 0 10px;
  }
  .pn-selected-job{font-size:14px;font-weight:700;color:var(--text-primary)}
  .pn-timeline{display:flex;flex-direction:column;gap:14px;min-height:60px}
  .pn-empty{color:var(--text-muted);font-size:13px;padding:20px 0;text-align:center}
  .pn-date-group{
    background:var(--bg-panel-raised);border:0.5px solid var(--line);
    border-radius:12px;padding:14px 16px;
  }
  .pn-date-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:8px;
  }
  .pn-date-label{
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;
    color:var(--awakened-ink);
  }
  .pn-entry-list{display:flex;flex-direction:column;gap:4px}
  .pn-entry{
    display:flex;gap:8px;align-items:flex-start;font-size:12.5px;
    color:var(--text-secondary);line-height:1.6;
  }
  .pn-entry-text{flex:1}
  .pn-entry-admin-actions{display:none;gap:6px;flex-shrink:0}
  .pn-admin-active .pn-entry-admin-actions{display:flex}
  .pn-entry-admin-actions button{
    font-family:'IBM Plex Mono',monospace;font-size:10px;
    color:var(--text-muted);background:none;border:0.5px solid var(--line);
    border-radius:5px;padding:1px 6px;cursor:pointer;
  }
  .pn-entry-admin-actions button:hover{color:var(--text-primary)}
  /* 메인 항목( - ) */
  .pn-entry-bullet::before{content:"–";color:var(--text-muted);flex-shrink:0}
  /* 세부 항목( * ) : 들여쓰기 + 옅은 스타일로 구분 */
  .pn-entry-detail{
    margin-left:18px;font-size:12px;color:var(--text-muted);
  }
  .pn-entry-detail::before{content:"·";color:var(--text-muted);flex-shrink:0}
  /* 개발자 코멘트 등 안내 문단 (접두어 없음) */
  .pn-entry-note{
    color:var(--text-muted);font-size:12px;font-style:italic;
    padding-top:2px;border-top:0.5px dashed var(--line);margin-top:4px;
  }
  .pn-entry-note::before{content:"";}
  .pn-admin-panel{display:flex;flex-direction:column;gap:8px;padding-top:10px}
  .pn-admin-form{display:flex;flex-direction:column;gap:8px}
  .pn-admin-form input[type="date"],
  .pn-admin-form select{
    font-family:'IBM Plex Sans KR',sans-serif;font-size:13px;
    color:var(--text-primary);background:var(--bg-panel);
    border:0.5px solid var(--line-strong);border-radius:7px;padding:7px 9px;
  }
  .pn-admin-form textarea{
    font-family:'IBM Plex Sans KR',sans-serif;font-size:12.5px;
    color:var(--text-primary);background:var(--bg-panel);
    border:0.5px solid var(--line-strong);border-radius:7px;padding:9px;
    min-height:90px;resize:vertical;line-height:1.6;
  }
  .pn-admin-form-actions{display:flex;gap:8px}
  .site-footer{
    margin-top:32px;text-align:center;
    font-size:11px;line-height:1.7;color:var(--text-muted);
  }
  /* ---------- 시즌2 룬 도감 ---------- */
  .rune-atk-box{
    display:flex;align-items:center;flex-wrap:wrap;gap:10px;
    background:var(--bg-panel-raised);border:0.5px solid var(--line);
    border-radius:10px;padding:12px 14px;margin-bottom:6px;
  }
  .rune-atk-box label{
    font-size:13px;font-weight:600;color:var(--text-primary);
  }
  .rune-atk-box input{
    width:100px;font-family:'IBM Plex Mono',monospace;font-size:13px;
    color:var(--awakened-ink);background:var(--bg-panel);
    border:0.5px solid var(--line-strong);border-radius:7px 0 0 7px;
    border-right:none;padding:6px 8px;text-align:right;
  }
  .rune-atk-hint{font-size:11px;color:var(--text-muted)}
  .rune-filter-label{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:0.05em;text-transform:uppercase;
    color:var(--text-muted);margin:18px 0 8px;
  }
  .rune-filter-label:first-of-type{margin-top:20px}
  .rune-filter-hint{
    text-transform:none;font-family:'IBM Plex Sans KR',sans-serif;
    font-size:11px;color:var(--text-muted);letter-spacing:0;
  }
  .rune-cat-toggle{display:flex;gap:10px;margin-bottom:4px}
  .rune-cat-btn{
    flex:1;font-family:'IBM Plex Sans KR',sans-serif;
    font-size:14px;font-weight:600;color:var(--text-muted);
    background:var(--bg-panel);
    border:0.5px solid var(--line);
    border-radius:10px;padding:12px;cursor:pointer;
    transition:background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    opacity:0.45;
  }
  .rune-cat-btn.active{
    opacity:1;color:var(--text-primary);
    background:var(--bg-panel-raised);
    border-color:var(--blessing);
    box-shadow:0 0 10px rgba(116,188,226,0.12);
  }
  .rune-tag-toggle{display:flex;gap:10px;margin-bottom:4px}
  .rune-tag-btn{
    flex:1;font-family:'IBM Plex Sans KR',sans-serif;
    font-size:13px;font-weight:600;color:var(--text-muted);
    background:var(--bg-panel);
    border:0.5px solid var(--line);
    border-radius:10px;padding:10px;cursor:pointer;
    transition:background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    opacity:0.45;
  }
  .rune-tag-btn.active{
    opacity:1;color:var(--text-primary);
    background:var(--bg-panel-raised);
    border-color:var(--awakened);
    box-shadow:0 0 10px rgba(226,145,68,0.12);
  }
  .rune-trait-filter{
    display:grid;grid-template-columns:repeat(6, 1fr);gap:8px;margin-bottom:22px;
    padding-bottom:18px;border-bottom:0.5px solid var(--line);
  }
  .trait-chip{text-align:center}
  .trait-chip{
    font-family:'IBM Plex Sans KR',sans-serif;font-size:12px;
    color:var(--text-secondary);background:var(--bg-panel-raised);
    border:0.5px solid var(--line);border-radius:999px;
    padding:6px 13px;cursor:pointer;
    transition:background 0.15s, color 0.15s, border-color 0.15s;
  }
  .trait-chip:hover{color:var(--text-primary);border-color:var(--line-strong)}
  .trait-chip.active{
    color:var(--awakened-ink);background:rgba(226,145,68,0.16);
    border-color:var(--awakened);
  }
  .rune-grid{display:flex;flex-direction:column;gap:10px}
  .rune-card{
    background:var(--bg-panel-raised);border:0.5px solid var(--line);
    border-radius:10px;padding:14px 16px;
  }
  .rune-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
  .rune-name{font-size:14.5px;font-weight:600;color:var(--text-primary)}
  .rune-cat-badge{
    font-family:'IBM Plex Mono',monospace;font-size:10px;
    padding:2px 8px;border-radius:6px;font-weight:500;
  }
  .rune-cat-badge.weapon{color:var(--erosion-ink);background:rgba(131,171,93,0.16)}
  .rune-cat-badge.armor{color:var(--blessing-ink);background:rgba(116,188,226,0.16)}
  .rune-cat-badge.emblem{color:var(--awakened-ink);background:rgba(226,145,68,0.16)}
  .rune-grade{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--text-muted);
  }
  .rune-desc{font-size:12.5px;color:var(--text-secondary);line-height:1.7;margin-bottom:10px}
  .rune-desc-line{padding:2px 0}
  .rune-desc-line + .rune-desc-line{margin-top:2px}
  .rune-desc-line b{
    font-family:'IBM Plex Mono',monospace;font-weight:600;
    color:var(--awakened-ink);
  }
  .rune-traits{display:flex;flex-wrap:wrap;gap:6px}
  .rune-trait-tag{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    color:var(--text-muted);background:var(--bg-panel);
    border:0.5px solid var(--line);border-radius:6px;padding:3px 8px;
  }
  .rune-empty{
    text-align:center;color:var(--text-muted);font-size:13px;
    padding:40px 0;
  }