/* ═══════════════════════════════════════
   FIND FIXER — style.css
   ═══════════════════════════════════════ */

/* ── Variables ── */
:root {
  --bg:       #080a0c;
  --bg2:      #0d1014;
  --surf:     #111418;
  --surf2:    #181c22;
  --surf3:    #1f252d;
  --brd:      rgba(255,255,255,.06);
  --brd2:     rgba(255,255,255,.12);
  --orange:   #ff6b35;
  --og:       rgba(255,107,53,.3);
  --gold:     #ffd700;
  --text:     #c8bfb3;
  --text2:    #8a8880;
  --white:    #f0ebe4;
  --red:      #ff3838;
  --arcane:   #4f9cf9;
  --free:     #b855f7;
  --cult:     #f74545;
  --ug:       #1ec9b5;
  --none-c:   #f7962a;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--bg);color:var(--text);
  font-family:'Noto Sans KR',sans-serif;
  min-height:100vh;overflow-x:hidden;cursor:crosshair;
}
input,select,textarea,button{font-family:inherit;cursor:auto}
a{text-decoration:none}

/* ── Effect layers ── */
#scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:8000;
  background:repeating-linear-gradient(
    to bottom,transparent 0px,transparent 3px,
    rgba(0,0,0,.2) 3px,rgba(0,0,0,.2) 4px
  );opacity:.6;
}
#vignette{
  position:fixed;inset:0;pointer-events:none;z-index:7999;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%);
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:7998;
  animation:flicker .14s infinite;background:rgba(10,6,4,.06);
}
@keyframes flicker{0%,100%{opacity:.015}50%{opacity:.06}}

/* ── Boot screen ── */
#bootScreen{
  position:fixed;inset:0;background:#000;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  font-family:'Share Tech Mono',monospace;overflow:hidden;
}
#bootScreen::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,255,255,.012) 2px,rgba(255,255,255,.012) 4px);
  animation:sNoise .07s steps(1) infinite;pointer-events:none;
}
@keyframes sNoise{0%{transform:translateY(0)}33%{transform:translateY(-1px)}66%{transform:translateY(1px)}}
#bootInner{width:100%;max-width:540px;padding:2rem;position:relative;z-index:1}
#bootLines{height:200px;overflow:hidden;display:flex;flex-direction:column-reverse;margin-bottom:1.5rem}
.bline{
  font-size:.78rem;line-height:1.75;letter-spacing:.04em;
  color:#3aff6a;text-shadow:0 0 8px #3aff6a;
  opacity:0;animation:bfa .08s forwards;
}
.bline.w{color:#ffdd00;text-shadow:0 0 8px #ffdd00}
.bline.e{color:#ff4444;text-shadow:0 0 8px #ff4444}
.bline.ok{color:#4fa8ff;text-shadow:0 0 8px #4fa8ff}
@keyframes bfa{to{opacity:1}}
#bootLogo{display:none;text-align:center;animation:lReveal .6s ease forwards}
@keyframes lReveal{from{opacity:0;transform:scale(1.08);filter:blur(8px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
.bl-main{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(2.4rem,8vw,4.2rem);letter-spacing:.12em;color:#fff;
  text-shadow:0 0 20px rgba(255,107,53,.8),0 0 60px rgba(255,107,53,.35);line-height:1;
}
.bl-main span{color:var(--orange)}
.bl-hr{width:200px;height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent);margin:.8rem auto;animation:barP 2s ease-in-out infinite}
@keyframes barP{0%,100%{opacity:.4}50%{opacity:1}}
.bl-sub{font-size:.72rem;letter-spacing:.35em;color:var(--text2);margin-top:.5rem;text-transform:uppercase}
#bootProg{margin-top:1.6rem}
.bp-row{display:flex;justify-content:space-between;font-size:.65rem;letter-spacing:.12em;color:var(--text2);margin-bottom:.4rem}
.bp-bar{height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
#bpFill{height:100%;width:0%;background:linear-gradient(90deg,var(--orange),#ffaa00);box-shadow:0 0 8px var(--orange);transition:width .3s}

/* ── Curtain wipe ── */
#bootCurtain{position:fixed;inset:0;background:#000;z-index:9001;display:none}
@keyframes curtainUp{from{transform:translateY(0)}to{transform:translateY(-100%)}}

/* ── Toast ── */
#toast{
  position:fixed;bottom:2rem;left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--surf2);border:1px solid var(--brd);border-left:3px solid var(--orange);
  padding:.6rem 1.4rem;font-family:'Share Tech Mono',monospace;font-size:.68rem;
  letter-spacing:.08em;color:var(--white);z-index:9200;
  transition:transform .35s cubic-bezier(.4,0,.2,1);pointer-events:none;white-space:nowrap;
}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ── Glitch ── */
.glitch{animation:glitchA .2s both}
@keyframes glitchA{
  0%{transform:translate(0)}
  20%{transform:translate(-2px,2px);filter:hue-rotate(90deg) brightness(1.3)}
  40%{transform:translate(2px,-2px);filter:hue-rotate(-60deg)}
  60%{transform:translate(-1px,1px);filter:hue-rotate(20deg)}
  100%{transform:translate(0);filter:none}
}
.crit-pulse{animation:critP .4s infinite alternate}
@keyframes critP{0%{box-shadow:inset 0 0 0 rgba(255,0,0,0)}100%{box-shadow:inset 0 0 80px rgba(255,0,0,.5)}}

/* ── Header ── */
#mainHeader{
  position:sticky;top:0;z-index:500;
  background:rgba(8,10,12,.97);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--brd);
}
.hdr-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(.8rem,3.5vw,2rem);height:58px;gap:.8rem;
}
.site-logo{font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.35rem;letter-spacing:.1em;white-space:nowrap}
.lo-find{color:var(--white)}
.lo-fix{color:var(--orange);text-shadow:0 0 16px rgba(255,107,53,.5)}
.hdr-right{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.credit-badge{
  display:flex;align-items:center;gap:.4rem;
  background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.2);
  padding:.3rem .75rem;font-family:'Share Tech Mono',monospace;font-size:.7rem;color:var(--gold);
}
.cb-lbl{color:rgba(255,215,0,.45);font-size:.6rem}
.cb-unit{color:rgba(255,215,0,.4);font-size:.6rem}
.cont-wrap{cursor:pointer;display:flex;flex-direction:column;gap:3px}
.cw-row{display:flex;align-items:center;gap:5px;font-family:'Share Tech Mono',monospace;font-size:.6rem;color:var(--text2)}
#contPct{color:#4cff8a;font-weight:700;font-size:.68rem;transition:color .3s}
.cw-bar{width:80px;height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
#contFill{height:100%;background:#4cff8a;box-shadow:0 0 6px #4cff8a;transition:width .4s,background .4s,box-shadow .4s}
.sfx-btn{
  font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.08em;
  background:transparent;border:1px solid rgba(255,215,0,.25);color:var(--gold);
  padding:4px 9px;cursor:pointer;transition:.2s;text-transform:uppercase;white-space:nowrap;
}
.sfx-btn.off{color:var(--text2);border-color:rgba(255,255,255,.1)}
.sfx-btn:hover{background:rgba(255,215,0,.07)}

/* ── Nav ── */
.nav-bar{
  display:flex;overflow-x:auto;scrollbar-width:none;
  border-top:1px solid var(--brd);padding:0 clamp(.4rem,2vw,1rem);
}
.nav-bar::-webkit-scrollbar{display:none}
.nb{
  font-family:'Share Tech Mono',monospace;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--text2);padding:.6rem 1.1rem;cursor:pointer;white-space:nowrap;transition:.2s;
  position:relative;
}
.nb::after{content:'';position:absolute;bottom:-1px;left:50%;right:50%;height:2px;background:var(--orange);box-shadow:0 0 8px var(--orange);transition:.3s}
.nb.active{color:var(--orange)}
.nb.active::after{left:0;right:0}
.nb:hover{color:var(--white)}

/* ── Pages ── */
.page{display:none}
.page.active{display:block}
.pg-wrap{padding:clamp(.8rem,3vw,1.8rem);max-width:920px;margin:0 auto}
.sec-hdr{display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.sec-hdr h2{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.2em;color:var(--orange);text-transform:uppercase;white-space:nowrap}
.shl{flex:1;height:1px;background:linear-gradient(90deg,var(--orange),transparent)}

/* ── Carousel ── */
.carousel-box{margin-bottom:1.4rem}
.carousel-view{overflow:hidden;height:240px;border:1px solid var(--brd);background:var(--surf);position:relative}
.carousel-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.req-card{
  min-width:100%;height:100%;padding:1.4rem;
  display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;position:relative;overflow:hidden;
}
.req-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,107,53,.05),transparent 55%)}
.req-card-line{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--orange),transparent);box-shadow:0 0 10px var(--og)}
.rq-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.rq-grade{font-family:'Share Tech Mono',monospace;font-size:.62rem;background:var(--orange);color:#000;padding:2px 8px;font-weight:700}
.rq-client{font-family:'Share Tech Mono',monospace;font-size:.65rem;color:var(--text2)}
.rq-title{font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:.4rem}
.rq-body{font-size:.8rem;color:var(--text);line-height:1.7;flex:1}
.rq-foot{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem}
.rq-reward{font-family:'Share Tech Mono',monospace;font-size:.88rem;color:var(--gold);font-weight:700;text-shadow:0 0 10px rgba(255,215,0,.4)}
.rq-timer{width:100px;height:3px;background:rgba(255,255,255,.05);overflow:hidden}
.rq-timer-fill{height:100%;background:var(--orange);box-shadow:0 0 5px var(--orange);width:0;animation:rtimer 4.2s linear infinite}
@keyframes rtimer{0%{width:0}100%{width:100%}}
.cdots{display:flex;justify-content:center;gap:6px;margin-top:.65rem}
.cdot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.15);cursor:pointer;transition:.2s}
.cdot.active{background:var(--orange);box-shadow:0 0 6px var(--orange)}

/* ── Quick grid ── */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;margin-bottom:1.3rem}
.qb{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:.9rem .5rem;background:var(--surf);border:1px solid var(--brd);
  color:var(--text);cursor:pointer;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  font-family:'Share Tech Mono',monospace;transition:.25s;position:relative;overflow:hidden;
}
.qb::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:.3s}
.qb:hover{background:var(--surf2);color:var(--white);border-color:var(--brd2)}
.qb:hover::after{transform:scaleX(1)}
.qi{width:20px;height:20px}

/* ── Notice ── */
.notice-box{background:var(--surf);border:1px solid var(--brd);border-left:3px solid var(--orange);padding:1rem 1.2rem}
.nb-tag{font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.14em;color:var(--orange);margin-bottom:.45rem}
.nb-body{font-size:.8rem;line-height:1.85;color:var(--text)}
.danger-txt{color:#ff5555}

/* ── Faction tabs ── */
.ftabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem}
.ftab{
  font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .75rem;background:transparent;border:1px solid var(--brd);color:var(--text2);cursor:pointer;transition:.2s;
}
.ftab.active,.ftab:hover{border-color:var(--fc);color:var(--fc);background:rgba(255,255,255,.03)}

/* ── Character grid ──
   ★ 이미지에 박힌 이름 라벨을 가리지 않도록 정보를 상단으로 이동
   - 좌상단: 직책 (role)
   - 우상단: 능력 등급 뱃지 */
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:2px}
.char-card{position:relative;aspect-ratio:3/4;overflow:hidden;cursor:pointer;background:var(--surf)}
.char-card img{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform .5s cubic-bezier(.4,0,.2,1),filter .3s;
  filter:brightness(.92) saturate(.95) contrast(1.02);
}
.char-card:hover img{transform:scale(1.05);filter:brightness(1.05) saturate(1.1) contrast(1.05)}

/* 상단 살짝만 어둡게 — 라벨 가독성 확보, 이미지 이름표 영역(하단)은 절대 안 가림 */
.char-overlay{
  position:absolute;top:0;left:0;right:0;height:64px;
  background:linear-gradient(to bottom,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 60%,transparent 100%);
  pointer-events:none;z-index:1;
}

/* 좌상단: 직책 */
.char-role-top{
  position:absolute;top:.5rem;left:.5rem;z-index:2;
  font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.05em;
  padding:3px 8px 3px 6px;
  border-left:2px solid var(--fc);
  color:#fff;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);
  max-width:62%;line-height:1.25;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 우상단: 능력 등급 뱃지 */
.char-grade-top{
  position:absolute;top:.5rem;right:.5rem;z-index:2;
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:.78rem;letter-spacing:.02em;
  min-width:26px;height:26px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gc,#444);color:var(--gtxt,#000);
  box-shadow:0 2px 8px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.18);
}

/* 등급별 색상 */
.gr-s{--gc:#ff3838;--gtxt:#fff}    /* 빨강 — 최상위 */
.gr-a{--gc:#ff8a3d;--gtxt:#000}    /* 주황 — 상급 */
.gr-b{--gc:#ffd700;--gtxt:#000}    /* 노랑 — 중급 */
.gr-c{--gc:#7dd3fc;--gtxt:#000}    /* 하늘 — 중하급 */
.gr-d{--gc:#a8a29e;--gtxt:#000}    /* 회색 — 하급 */
.gr-f{--gc:#525252;--gtxt:#fff}    /* 어두운 회색 — 최하위 */
.gr-0{--gc:#1f1f1f;--gtxt:#999;border-color:rgba(255,255,255,.1)!important;font-size:.62rem!important} /* 무능력 */
.gr-q{--gc:#9333ea;--gtxt:#fff;font-size:.95rem!important} /* ? — 등급 미상 */
.gr-m{--gc:#9333ea;--gtxt:#fff;font-size:.7rem!important;letter-spacing:0} /* 측정 중 — 기밀 */

/* hover 시 하단 강조 라인 */
.char-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:var(--fc);box-shadow:0 0 12px var(--fc);
  transform:scaleX(0);transition:.35s;z-index:3;
}
.char-card:hover::after{transform:scaleX(1)}

/* 모바일에서는 폰트 약간 키워 가독성 확보 */
@media(max-width:540px){
  .char-role-top{font-size:.62rem;padding:4px 9px 4px 7px}
  .char-grade-top{font-size:.85rem;min-width:28px;height:28px}
  .char-overlay{height:58px}
}

/* ── MAP Layout ── */
.map-layout{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.map-svg-wrap{flex:0 0 auto;width:min(100%,480px);position:relative}
#cityMap{width:100%;height:auto;display:block}
.za{cursor:crosshair}
.poi{cursor:pointer;transition:r .2s}
.poi:hover{r:6}
.poi-pulse{animation:ppulse 2s ease-in-out infinite}
@keyframes ppulse{0%,100%{r:5;opacity:1}50%{r:7;opacity:.6}}

/* MAP hover tooltip */
.map-tooltip{
  position:fixed;pointer-events:none;z-index:6000;
  background:rgba(8,10,12,.96);border:1px solid var(--brd2);border-top:2px solid var(--orange);
  padding:.9rem 1.1rem;max-width:240px;min-width:180px;
  backdrop-filter:blur(8px);
  opacity:0;transition:opacity .15s;
  box-shadow:0 4px 24px rgba(0,0,0,.7);
}
.map-tooltip.show{opacity:1}
.mtt-tier{font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.12em;color:var(--orange);margin-bottom:.25rem}
.mtt-name{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.9rem;color:var(--white);margin-bottom:.4rem;letter-spacing:.05em}
.mtt-desc{font-size:.72rem;line-height:1.65;color:var(--text);margin-bottom:.5rem}
.mtt-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.mtt-tag{font-family:'Share Tech Mono',monospace;font-size:.55rem;padding:1px 6px;border:1px solid rgba(255,255,255,.1);color:var(--text2)}

/* MAP side panel */
.map-side-panel{
  flex:1;min-width:200px;background:var(--surf);border:1px solid var(--brd);
  border-top:2px solid var(--orange);padding:1.1rem;min-height:260px;
  display:flex;flex-direction:column;
}
.mp-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.7rem;text-align:center;opacity:.4}
.mp-idle p{font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:.06em;line-height:1.7;color:var(--text2)}
.mp-tier-badge{font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.14em;margin-bottom:.35rem;transition:color .3s}
.mp-name{font-family:'Orbitron',sans-serif;font-weight:700;font-size:1.05rem;color:var(--white);margin-bottom:.5rem;letter-spacing:.06em}
.mp-desc{font-size:.8rem;line-height:1.8;color:var(--text);margin-bottom:.6rem}
.mp-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.mp-tag{font-family:'Share Tech Mono',monospace;font-size:.58rem;padding:2px 7px;border:1px solid rgba(255,255,255,.1);color:var(--text2)}

/* MAP legend */
.map-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem;margin-top:1.1rem}
.ml-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;background:var(--surf);border:1px solid var(--brd);cursor:pointer;transition:.2s;font-family:'Share Tech Mono',monospace;font-size:.58rem;color:var(--text2);letter-spacing:.04em}
.ml-item:hover{background:var(--surf2);border-color:var(--brd2);color:var(--white)}
.ml-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

/* ── OVERLAYS / MODALS ── */
.overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:700;
  align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(6px);
}
.overlay.open{display:flex}
.modal-x{font-size:1.3rem;color:var(--text2);background:none;border:none;cursor:pointer;transition:.2s;line-height:1;padding:2px 4px;flex-shrink:0}
.modal-x:hover{color:var(--white)}
.modal-x.wh{color:rgba(255,255,255,.7)}
.modal-x.wh:hover{color:#fff}

/* ── Character Modal ── */
.char-modal{
  background:var(--surf);border:1px solid var(--brd);border-top:3px solid var(--mc, var(--orange));
  max-width:540px;width:100%;max-height:90vh;overflow-y:auto;
  position:relative;animation:mSlide .28s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 40px rgba(0,0,0,.8);
}
.char-modal .modal-x{position:absolute;top:.7rem;right:.9rem;z-index:2}
@keyframes mSlide{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.cm-img-wrap{position:relative;height:320px;overflow:hidden;flex-shrink:0}
.cm-img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block;filter:brightness(.9) saturate(.9)}
.cm-grad{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 35%,rgba(0,0,0,.6) 70%,var(--surf) 100%)}
.cm-tint{position:absolute;inset:0;opacity:.08;mix-blend-mode:color}
.cm-body{padding:1.4rem}
.cm-fac{font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.14em;color:var(--mc,var(--orange));margin-bottom:.3rem;text-transform:uppercase}
.cm-en{font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.7rem;letter-spacing:.06em;color:var(--white);line-height:1}
.cm-kr{font-family:'Noto Sans KR',sans-serif;font-weight:300;font-size:.85rem;color:rgba(255,255,255,.38);margin-bottom:.9rem;letter-spacing:.08em}
.cm-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.9rem}
.chip{font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.08em;padding:.2rem .65rem;border:1px solid rgba(255,255,255,.1);color:var(--text2);background:var(--surf2)}
.chip.hl{border-color:var(--mc,var(--orange));color:var(--mc,var(--orange));background:rgba(255,255,255,.02)}
.chip-age{cursor:pointer;transition:.2s;user-select:none}
.chip-age:hover{border-color:var(--mc,var(--orange));color:var(--white)}
.chip-age .age-hidden{letter-spacing:.1em;color:var(--text2);font-size:.85em}
.chip-age.revealed{border-color:var(--mc,var(--orange));color:var(--mc,var(--orange));background:rgba(255,255,255,.03)}
.chip-age.revealed b{color:var(--white)}
.cm-desc{font-size:.82rem;line-height:1.9;color:var(--text);margin-bottom:.9rem}
.cm-lock{
  background:rgba(255,0,0,.05);border:1px dashed rgba(255,56,56,.35);
  padding:.85rem;display:flex;align-items:center;gap:.75rem;cursor:pointer;
  transition:.2s;margin-top:.6rem;
}
.cm-lock:hover{background:rgba(255,0,0,.08);border-color:rgba(255,56,56,.6)}
.lock-text{font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:.06em;line-height:1.6}
.lock-text b{color:#ff5555}
.lock-text span{color:rgba(255,100,100,.5)}
.cm-secret{
  display:none;background:rgba(255,107,53,.05);border:1px solid rgba(255,107,53,.2);
  border-left:3px solid var(--mc,var(--orange));padding:1rem;margin-top:.8rem;
  font-size:.8rem;line-height:1.9;color:var(--text);
  animation:fadeIn .28s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── PW Modal ── */
.pw-box{
  background:var(--surf);border:1px solid var(--brd);border-top:3px solid #ff3838;
  padding:2rem;max-width:360px;width:90%;text-align:center;
  animation:mSlide .25s ease;box-shadow:0 0 40px rgba(255,56,56,.12);
}
.pw-icon{margin-bottom:.8rem;line-height:1}
.pw-title{font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:.2em;color:#ff5555;margin-bottom:.3rem}
.pw-sub{font-size:.76rem;color:var(--text2);margin-bottom:1.1rem;line-height:1.6}
.pw-input{
  width:100%;background:var(--bg);border:1px solid rgba(255,56,56,.3);color:var(--white);
  padding:.65rem 1rem;font-family:'Share Tech Mono',monospace;font-size:.88rem;
  letter-spacing:.25em;text-align:center;text-transform:uppercase;
  margin-bottom:.6rem;outline:none;transition:.2s;
}
.pw-input:focus{border-color:#ff5555;box-shadow:0 0 8px rgba(255,56,56,.2)}
.pw-err{font-family:'Share Tech Mono',monospace;font-size:.62rem;color:#ff5555;letter-spacing:.1em;margin-top:.35rem;display:none;animation:shake .28s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pw-btns{display:flex;gap:.5rem;margin-top:.8rem}
.pw-ok{flex:1;background:#ff3838;border:none;color:#fff;padding:.6rem;font-weight:700;font-family:'Share Tech Mono',monospace;font-size:.7rem;letter-spacing:.08em;cursor:pointer;text-transform:uppercase;transition:.2s}
.pw-ok:hover{background:#ff5555}
.pw-cancel{background:var(--surf2);border:1px solid var(--brd);color:var(--text2);padding:.6rem 1rem;font-family:'Share Tech Mono',monospace;font-size:.68rem;cursor:pointer;transition:.2s}
.pw-cancel:hover{color:var(--white)}

/* ── Panel base ── */
.panel{
  width:95%;max-width:560px;height:88vh;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:var(--bg2);border:1px solid var(--brd);
  box-shadow:0 0 50px rgba(0,0,0,.8);
  animation:mSlide .28s cubic-bezier(.4,0,.2,1);
}
.dc-body{flex:1;overflow:hidden;background:#fff;color:#333;font-family:'Noto Sans KR',sans-serif;display:flex;flex-direction:column;min-height:0}

/* ── DC Panel ── */
.dc-panel{border-top:2px solid #3b4890}
.dc-hdr{
  background:#3b4890;padding:.9rem 1.1rem;
  display:flex;align-items:center;gap:.7rem;flex-shrink:0;
}
.dc-title{font-weight:800;color:#fff;font-size:1.05rem;flex:1}
.dc-back-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;padding:3px 9px;cursor:pointer;font-size:.72rem;border-radius:1px;transition:.2s;white-space:nowrap}
.dc-back-btn:hover{background:rgba(255,255,255,.28)}
.dc-body{flex:1;overflow:hidden;background:#fff;color:#333;font-family:'Noto Sans KR',sans-serif;display:flex;flex-direction:column}

/* DC list */
.dc-search-bar{padding:6px;display:flex;gap:5px;border-bottom:1px solid #ddd;flex-shrink:0}
.dc-search-bar input{flex:1;padding:5px 8px;border:1px solid #ccc;font-size:.82rem;outline:none}
.dc-search-bar input:focus{border-color:#3b4890}
.dc-search-bar button{padding:5px 12px;background:#3b4890;color:#fff;border:none;cursor:pointer;font-size:.78rem}
.dc-thead{display:flex;border-bottom:2px solid #3b4890;background:#f0f2fa;padding:6px 0;font-size:.7rem;color:#555;font-weight:700;flex-shrink:0}
.dtc{display:flex;align-items:center}
.no{width:46px;justify-content:center}
.ti{flex:1;padding-left:8px}
.us{width:70px;justify-content:center}
.da{width:76px;justify-content:center}
.rc{width:42px;justify-content:center}
.dc-row{display:flex;padding:8px 0;border-bottom:1px solid #eee;font-size:.79rem;align-items:center;cursor:pointer;color:#333;transition:.12s}
.dc-row:hover{background:#f0f2fa}
.dc-notice{background:#f4f6fa;font-weight:700}
.dc-notice .no{color:#d32f2f}
.dc-cmt{color:#f00;font-weight:700;font-size:.7rem;margin-left:2px}
#dcListView{flex:1;overflow:hidden;display:flex;flex-direction:column}
#dcRows{flex:1;overflow-y:auto}
.dc-write-btn{
  margin:.6rem;padding:7px 12px;background:#fff;border:1px solid #3b4890;color:#3b4890;
  cursor:pointer;font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:5px;
  transition:.2s;flex-shrink:0;
}
.dc-write-btn:hover{background:#3b4890;color:#fff}

/* Post view */
#dcPostView{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0}
.post-hdr{padding:.85rem 1rem;border-bottom:1px solid #ddd;background:#fafafa;flex-shrink:0}
.post-title{font-size:1rem;font-weight:700;color:#3b4890;margin-bottom:5px}
.post-meta{font-size:.7rem;color:#777;display:flex;justify-content:space-between;flex-wrap:wrap;gap:3px;border-top:1px solid #eee;padding-top:5px}
.meta-ip{font-size:.68rem;color:#aaa}
.post-body{padding:1rem;font-size:.86rem;line-height:1.75;color:#333;white-space:pre-wrap;border-bottom:1px solid #ddd;flex-shrink:0}
.post-rec-row{display:flex;justify-content:center;gap:10px;padding:.8rem 0;flex-shrink:0;border-bottom:1px solid #eee}
.rec-up,.rec-dn{border:1px solid #ccc;background:#fff;padding:6px 16px;cursor:pointer;text-align:center;min-width:65px;font-size:.85rem;display:flex;align-items:center;gap:5px;transition:.2s}
.rec-up{border-color:#3b4890;color:#3b4890}
.rec-up:hover{background:#3b4890;color:#fff}
.rec-dn{border-color:#999;color:#888}
.rec-dn:hover{background:#888;color:#fff}

/* Comments */
.cmt-section{flex-shrink:0;background:#fafafa;display:flex;flex-direction:column}
.cmt-hdr{padding:6px 10px;border-bottom:2px solid #3b4890;font-weight:700;font-size:.78rem;color:#3b4890;flex-shrink:0}
#pvCmts{flex-shrink:0}
.cmt-item{padding:7px 10px;border-bottom:1px solid #eee;font-size:.79rem;display:flex;flex-direction:column;gap:3px}
.cmt-item-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cmt-id{font-weight:700;color:#333}
.cmt-ip{font-size:.67rem;color:#aaa}
.cmt-body{color:#444;line-height:1.5;word-break:break-all}
.cmt-dt{font-size:.67rem;color:#bbb;margin-top:2px}
.ce{display:inline-flex;vertical-align:middle;margin:0 1px}

/* Comment form */
.cmt-form{border-top:2px solid #3b4890;background:#f0f2fa;padding:8px;flex-shrink:0}
.cmt-form-row{display:flex;gap:6px;margin-bottom:6px}
.cmt-field{flex:1;padding:5px 8px;border:1px solid #ccc;font-size:.78rem;outline:none;background:#fff}
.cmt-field:focus{border-color:#3b4890}
.cmt-emoji-strip{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;padding:4px;background:#fff;border:1px solid #e0e0e0}
.ce-btn{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid #e0e0e0;cursor:pointer;
  transition:.15s;border-radius:2px;padding:3px;
}
.ce-btn:hover{background:#e8eeff;border-color:#3b4890}
.cmt-form-bot{display:flex;gap:6px;align-items:flex-end}
.cmt-ta{flex:1;padding:6px 8px;border:1px solid #ccc;font-size:.82rem;resize:none;height:56px;outline:none;line-height:1.5}
.cmt-ta:focus{border-color:#3b4890}
.cmt-sub-btn{padding:8px 14px;background:#3b4890;border:none;color:#fff;cursor:pointer;font-weight:700;font-size:.78rem;align-self:flex-end;transition:.2s;height:56px;white-space:nowrap}
.cmt-sub-btn:hover{background:#4a56b0}

/* Write post */
#dcWriteView{padding:1rem;display:flex;flex-direction:column;gap:8px;flex:1}
.write-hdr{font-weight:700;font-size:1rem;color:#3b4890;border-bottom:2px solid #3b4890;padding-bottom:6px}
.write-row{display:flex;gap:6px}
.write-field{width:100%;padding:7px 10px;border:1px solid #ccc;font-size:.82rem;outline:none}
.write-field:focus{border-color:#3b4890}
.write-field.wide{width:100%}
.write-area{flex:1;padding:8px 10px;border:1px solid #ccc;font-size:.82rem;resize:none;outline:none;min-height:140px}
.write-area:focus{border-color:#3b4890}
.write-btns{display:flex;gap:7px;justify-content:flex-end}
.write-cancel{padding:7px 14px;background:#fff;border:1px solid #ccc;color:#666;cursor:pointer;font-size:.8rem}
.write-ok{padding:7px 20px;background:#3b4890;border:none;color:#fff;cursor:pointer;font-weight:700;font-size:.8rem}

/* ── SHOP PANEL ── */
.shop-panel{border-top:2px solid var(--gold)}
.shop-hdr{background:#0a0800;padding:1rem 1.3rem;border-bottom:1px solid rgba(255,215,0,.15);display:flex;justify-content:space-between;align-items:flex-start;flex-shrink:0}
.shop-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.25rem;letter-spacing:.12em;color:var(--gold);text-shadow:0 0 20px rgba(255,215,0,.4)}
.shop-sub{font-size:.68rem;color:rgba(255,215,0,.3);margin-top:3px}
.marco-bubble{background:rgba(255,215,0,.04);border-left:3px solid var(--gold);padding:.65rem 1rem;margin:.6rem .7rem;font-size:.8rem;color:rgba(255,215,0,.65);font-style:italic;flex-shrink:0}
.shop-list{flex:1;overflow-y:auto;padding:.5rem}
.shop-item{background:rgba(255,255,255,.02);border:1px solid var(--brd);padding:.9rem;margin-bottom:.55rem;transition:.2s}
.shop-item:hover{background:rgba(255,255,255,.04);border-color:var(--brd2)}
.si-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:.3rem;margin-bottom:.35rem}
.si-cat{font-family:'Share Tech Mono',monospace;font-size:.58rem;color:var(--gold);border:1px solid rgba(255,215,0,.25);padding:1px 5px}
.si-name{font-size:.92rem;font-weight:700;color:var(--white);margin-left:5px}
.si-flash{color:#ff3838;font-family:'Share Tech Mono',monospace;font-size:.58rem}
.si-price{font-family:'Share Tech Mono',monospace;font-size:.85rem;color:var(--gold);font-weight:700;transition:color .4s}
.si-stock{font-family:'Share Tech Mono',monospace;font-size:.58rem;color:var(--text2)}
.si-desc{font-size:.75rem;color:var(--text2);padding:.5rem 0;border-bottom:1px solid var(--brd);margin-bottom:.6rem}
.si-btns{display:flex;gap:.4rem}
.buy-btn{flex:1;background:var(--gold);color:#000;border:none;padding:.52rem;font-weight:700;font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:.06em;cursor:pointer;position:relative;overflow:hidden;transition:.2s;text-transform:uppercase}
.buy-btn:hover{background:#ffe842}
.buy-btn.proc::after{content:"처리중...";position:absolute;inset:0;background:#1a1a1a;color:#0f0;font-family:'Share Tech Mono',monospace;display:flex;align-items:center;justify-content:center;font-size:.62rem;letter-spacing:.1em}
.haggle-btn{background:var(--surf3);border:1px solid var(--brd2);color:var(--text2);padding:.52rem .7rem;font-family:'Share Tech Mono',monospace;font-size:.62rem;cursor:pointer;transition:.2s;text-transform:uppercase}
.haggle-btn:hover{color:var(--white);background:var(--surf2)}

/* ── REQUEST PANEL ── */
.req-panel{border-top:2px solid var(--orange)}
.req-hdr{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.1rem;border-bottom:1px solid var(--brd);background:var(--bg);flex-shrink:0;font-family:'Orbitron',sans-serif;font-weight:700;font-size:.85rem;color:var(--orange);letter-spacing:.08em}
.req-layout{flex:1;display:flex;overflow:hidden}
.req-side{width:115px;background:var(--surf);border-right:1px solid var(--brd);padding:.9rem .6rem;display:flex;flex-direction:column;gap:.7rem;overflow-y:auto;flex-shrink:0}
.rs-item{display:flex;align-items:center;gap:6px;font-family:'Share Tech Mono',monospace;font-size:.65rem;color:var(--text2);letter-spacing:.05em}
.rs-item.active{color:var(--orange)}
.rs-num{width:17px;height:17px;border-radius:50%;background:var(--surf2);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:.58rem;flex-shrink:0}
.rs-item.active .rs-num{background:var(--orange);color:#000}
.req-main{flex:1;padding:1rem;overflow-y:auto}
.step-block{display:none;animation:fadeIn .22s}
.step-block.active{display:block}
.rs-title{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.88rem;color:var(--white);margin-bottom:1.1rem;border-bottom:1px solid var(--brd);padding-bottom:.45rem;letter-spacing:.04em}
.fs{margin-bottom:1.1rem}
.fl{font-size:.8rem;font-weight:700;color:var(--white);margin-bottom:.45rem;display:block}
.scope-row{display:flex;gap:.45rem}
.scope-c{flex:1;height:76px;border:1px solid var(--brd);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s;background:var(--surf)}
.scope-c.sel{border-color:var(--orange);background:rgba(255,107,53,.07)}
.scope-ic{font-size:1.3rem;margin-bottom:4px}
.scope-tx{font-size:.65rem;color:var(--text2)}
.chip-row{display:flex;flex-wrap:wrap;gap:5px}
.chip-t{padding:5px 11px;border:1px solid var(--brd);border-radius:14px;font-size:.72rem;cursor:pointer;background:var(--surf);color:var(--text2);transition:.2s}
.chip-t.sel{border-color:var(--orange);color:var(--white);background:rgba(255,107,53,.09)}
.sect-list{display:flex;flex-direction:column;gap:5px}
.sect-opt input{display:none}
.sect-card{background:var(--surf);border:1px solid var(--brd);padding:9px 11px;cursor:pointer;display:flex;align-items:center;transition:.2s}
.sect-opt input:checked + .sect-card{background:rgba(255,107,53,.07);border-color:var(--orange)}
.sect-code{font-family:'Share Tech Mono',monospace;font-weight:700;color:var(--orange);border:1px solid var(--orange);padding:1px 6px;margin-right:9px;font-size:.78rem}
.sect-name{color:var(--text);font-size:.78rem}
.cy-range{-webkit-appearance:none;width:100%;height:6px;background:linear-gradient(90deg,#4CAF50,#FFEB3B,#F44336);border-radius:3px;outline:none;margin:7px 0}
.cy-range::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;background:var(--bg);border:2px solid #fff;border-radius:50%;cursor:pointer;box-shadow:0 0 5px rgba(255,255,255,.3)}
.form-g{margin-bottom:.9rem}
.form-gl{margin-bottom:5px;display:block;color:var(--text2);font-size:.78rem}
.cy-input{width:100%;background:var(--bg);border:1px solid var(--brd);color:var(--white);padding:8px 11px;font-family:'Noto Sans KR',sans-serif;font-size:.86rem;transition:.2s;outline:none}
.cy-input:focus{border-color:var(--orange);box-shadow:0 0 5px rgba(255,107,53,.18)}
.warn-box{background:rgba(255,85,85,.06);border:1px dashed rgba(255,85,85,.35);padding:.85rem;margin-top:1rem}
.warn-box-t{color:#ff5555;font-weight:700;font-size:.8rem;margin-bottom:3px}
.warn-box-b{color:var(--text2);font-size:.72rem;line-height:1.5}
.req-footer{flex-shrink:0;background:var(--surf);border-top:1px solid var(--brd);padding:.8rem 1rem;display:flex;justify-content:space-between;align-items:center}
.req-prev{background:none;border:1px solid var(--brd);color:var(--text2);padding:6px 13px;cursor:pointer;font-family:'Share Tech Mono',monospace;font-size:.68rem;transition:.2s}
.req-next{background:var(--orange);border:none;color:#000;padding:6px 18px;font-weight:700;cursor:pointer;font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;transition:.2s}
.req-next:hover{background:#ff8555}
.op-chat{position:absolute;bottom:62px;right:12px;background:#fff;color:#000;padding:8px 10px;border-radius:12px 12px 0 12px;box-shadow:0 4px 14px rgba(0,0,0,.5);font-size:.7rem;max-width:180px;display:flex;align-items:center;gap:6px;z-index:20;animation:floatAnim 3s ease-in-out infinite}
@keyframes floatAnim{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.op-av{width:24px;height:24px;background:#1a1a1a;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--orange);font-weight:700;font-size:.6rem;flex-shrink:0}
.op-x{position:absolute;top:-4px;right:-4px;background:#ccc;width:13px;height:13px;border-radius:50%;font-size:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;line-height:1}

/* ── Footer ── */
footer{padding:1rem 1.5rem;border-top:1px solid var(--brd);text-align:center;font-family:'Share Tech Mono',monospace;font-size:.57rem;color:var(--text2);letter-spacing:.1em}

/* ── Floating Action Buttons (FAB Dock) ── */
.fab-dock{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:400;
  display:flex;flex-direction:column;gap:0;
  border:1px solid var(--brd);border-right:none;
  background:rgba(8,10,12,.95);backdrop-filter:blur(12px);
  box-shadow:-4px 0 24px rgba(0,0,0,.6);
  border-radius:8px 0 0 8px;overflow:hidden;
}
.fab-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:62px;padding:.8rem .3rem;
  background:none;border:none;border-bottom:1px solid var(--brd);
  cursor:pointer;transition:.22s;position:relative;overflow:hidden;
}
.fab-btn:last-child{ border-bottom:none }
.fab-btn::before{ content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:.22s }
.fab-btn:hover::before{ background:rgba(255,255,255,.04) }
.fab-btn:hover .fab-icon{ transform:scale(1.12) }
.fab-icon{ width:28px;height:28px;transition:transform .22s }
.fab-icon svg{ width:100%;height:100% }
.fab-label{
  font-family:'Share Tech Mono',monospace;font-size:.52rem;letter-spacing:.06em;
  color:var(--text2);text-transform:uppercase;transition:color .22s;line-height:1;
}
.fab-btn:hover .fab-label{ color:var(--white) }
.fab-btn[data-modal="dc"]:hover  .fab-label{ color:#b855f7 }
.fab-btn[data-modal="shop"]:hover .fab-label{ color:#ffd700 }
.fab-btn[data-modal="req"]:hover  .fab-label{ color:#ff6b35 }
.fab-btn.pulse .fab-icon{ animation:fabPulse .6s ease }
@keyframes fabPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.25) } }

/* ══════════════════════════════
   TIMELINE PAGE — Desktop default
══════════════════════════════ */
.tl-mobile-bar{display:none}  /* 모바일 전용 — 데스크탑에서는 숨김 */

.tl-layout{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap}

.tl-sidebar{
  width:180px;flex-shrink:0;
  background:var(--surf);border:1px solid var(--brd);
  border-top:2px solid var(--orange);
  position:sticky;top:120px;
}
.tl-era-btn{
  display:block;width:100%;text-align:left;
  font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:.07em;
  padding:.65rem .9rem;background:none;border:none;border-bottom:1px solid var(--brd);
  color:var(--text2);cursor:pointer;transition:.2s;position:relative;
}
.tl-era-btn::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--ec,var(--orange));transform:scaleY(0);transform-origin:center;transition:.25s;
}
.tl-era-btn.active{color:var(--ec,var(--orange));background:rgba(255,255,255,.03)}
.tl-era-btn.active::before{transform:scaleY(1)}
.tl-era-btn:hover{color:var(--white);background:rgba(255,255,255,.02)}
.tl-era-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--ec,var(--orange));margin-right:7px;vertical-align:middle;flex-shrink:0;
}

.tl-main{flex:1;min-width:0}
.tl-era-section{display:none;animation:fadeIn .3s ease}
.tl-era-section.active{display:block}

.tl-era-header{
  display:flex;align-items:center;gap:1rem;
  margin-bottom:1.5rem;padding-bottom:.8rem;
  border-bottom:1px solid var(--brd);
}
.tl-era-icon{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;flex-shrink:0;border:2px solid var(--ec,var(--orange));
  background:rgba(255,255,255,.03);
}
.tl-era-title{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:1rem;letter-spacing:.1em;color:var(--white);
}
.tl-era-subtitle{
  font-family:'Share Tech Mono',monospace;font-size:.65rem;
  letter-spacing:.1em;color:var(--ec,var(--orange));margin-top:.25rem;
}

.tl-events{position:relative;padding-left:1.8rem}
.tl-events::before{
  content:'';position:absolute;left:.45rem;top:0;bottom:0;
  width:2px;background:linear-gradient(to bottom,var(--ec,var(--orange)),transparent);
  opacity:.35;
}
.tl-event{
  position:relative;margin-bottom:1.1rem;
  background:
    linear-gradient(var(--surf),var(--surf)) padding-box,
    repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(255,255,255,.018) 27px,rgba(255,255,255,.018) 28px) padding-box;
  border:1px solid var(--brd);
  border-left:3px solid var(--ec,var(--orange));
  padding:1rem 1.1rem;transition:.25s;cursor:default;
  font-family:'Noto Sans KR',sans-serif;
}
/* 기록물 상단 식별 라인 */
.tl-event::after{
  content:'ARCHIVE // ECLIPSE DUST';
  position:absolute;top:.5rem;right:.9rem;
  font-family:'Share Tech Mono',monospace;font-size:.48rem;
  letter-spacing:.14em;color:rgba(255,255,255,.12);
  pointer-events:none;
}
.tl-event:hover{background:var(--surf2);border-color:var(--brd2)}
.tl-event::before{
  content:'';position:absolute;
  left:-1.45rem;top:1.1rem;
  width:10px;height:10px;border-radius:50%;
  background:var(--ec,var(--orange));
  box-shadow:0 0 8px var(--ec,var(--orange));
}
.tl-event.classified{
  border-left-color:#ff3838;
  background:rgba(255,0,0,.03);
}
.tl-event.classified::before{background:#ff3838;box-shadow:0 0 8px #ff3838}
.tl-event.classified::after{content:'CLASSIFIED // 봉인됨';color:rgba(255,56,56,.25)}

.tl-ev-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap}
.tl-ev-date{
  font-family:'Share Tech Mono',monospace;font-size:.62rem;
  letter-spacing:.1em;color:var(--ec,var(--orange));white-space:nowrap;
}
.tl-ev-tag{
  font-family:'Share Tech Mono',monospace;font-size:.55rem;letter-spacing:.08em;
  padding:2px 7px;border:1px solid rgba(255,255,255,.1);color:var(--text2);
  white-space:nowrap;
}
.tl-ev-tag.red{border-color:rgba(255,56,56,.4);color:#ff7777}
.tl-ev-tag.blue{border-color:rgba(79,156,249,.4);color:#4f9cf9}
.tl-ev-tag.purple{border-color:rgba(184,85,247,.4);color:#b855f7}
.tl-ev-tag.teal{border-color:rgba(30,201,181,.4);color:#1ec9b5}
.tl-ev-tag.gold{border-color:rgba(255,215,0,.4);color:#ffd700}
.tl-ev-title{
  font-weight:700;font-size:.92rem;color:var(--white);
  margin-bottom:.4rem;letter-spacing:.02em;
  padding-left:.6rem;border-left:2px solid rgba(255,255,255,.12);
}
.tl-ev-body{
  font-size:.8rem;line-height:1.9;color:var(--text);
  padding-left:.6rem;
  text-align:justify;
}
.tl-ev-chars{
  display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.65rem;
  padding-top:.55rem;border-top:1px solid var(--brd);
}
.tl-ev-char{
  font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.06em;
  padding:2px 8px;border:1px solid var(--brd2);color:var(--text2);
  background:var(--surf2);cursor:pointer;transition:.18s;
}
.tl-ev-char:hover{color:var(--white);border-color:rgba(255,255,255,.3)}

/* Classified blur */
.tl-classified-wrap{position:relative;overflow:hidden}
.tl-classified-blur{
  filter:blur(5px);user-select:none;pointer-events:none;
}
.tl-classified-badge{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.4rem;
  background:rgba(0,0,0,.45);cursor:pointer;
}
.tl-classified-badge svg{opacity:.7}
.tl-classified-badge span{
  font-family:'Share Tech Mono',monospace;font-size:.65rem;
  letter-spacing:.15em;color:#ff5555;text-transform:uppercase;
}

/* ══════════════════════════════════════
   ★ MOBILE: FAB & GENERAL RESPONSIVE ★
══════════════════════════════════════ */
@media(max-width:640px){
  .fab-dock{
    position:fixed;right:0;left:0;top:auto;bottom:0;transform:none;
    flex-direction:row;border-radius:0;border:none;
    border-top:1px solid var(--brd2);width:100%;height:58px;z-index:600;
  }
  .fab-btn{
    flex:1;flex-direction:row;width:auto;
    padding:.5rem .8rem;border-bottom:none;border-right:1px solid var(--brd);gap:6px;
  }
  .fab-btn:last-child{ border-right:none }
  .fab-icon{ width:22px;height:22px;flex-shrink:0 }
  .fab-label{ font-size:.65rem;letter-spacing:.04em }
  .page{ padding-bottom:58px }
  footer{ padding-bottom:calc(1rem + 58px) }
}

/* ══════════════════════════════════════
   ★★★ TIMELINE — MOBILE OPTIMIZED ★★★
   핸드폰 가독성 대폭 개선
══════════════════════════════════════ */
@media(max-width:768px){
  /* 데스크탑 사이드바 숨김 */
  .tl-sidebar{ display:none }

  /* 모바일 전용 era 선택 바 */
  .tl-mobile-bar{
    display:block;
    margin-bottom:1.2rem;
    position:sticky;
    top:108px;
    z-index:50;
    background:var(--bg);
    padding:.4rem 0;
  }
  .tl-mobile-toggle{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    background:var(--surf);border:1px solid var(--brd);border-left:3px solid var(--orange);
    color:var(--white);padding:.85rem 1rem;cursor:pointer;
    font-family:'Share Tech Mono',monospace;font-size:.85rem;letter-spacing:.08em;
    transition:.2s;
  }
  .tl-mobile-toggle:hover{ background:var(--surf2) }
  .tl-mobile-toggle.open svg{ transform:rotate(180deg) }
  .tl-mobile-toggle svg{ transition:transform .25s; color:var(--orange) }

  .tl-mobile-dropdown{
    display:none;
    background:var(--surf);border:1px solid var(--brd);border-top:none;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .tl-mobile-dropdown.open{
    display:block;max-height:500px;
  }
  .tl-mobile-item{
    display:flex;align-items:center;gap:.7rem;
    padding:.85rem 1rem;border-bottom:1px solid var(--brd);
    color:var(--text);cursor:pointer;transition:.15s;
    font-family:'Share Tech Mono',monospace;font-size:.8rem;
  }
  .tl-mobile-item:last-child{ border-bottom:none }
  .tl-mobile-item:hover,.tl-mobile-item.active{
    background:rgba(255,255,255,.04);color:var(--ec,var(--orange));
  }
  .tl-mobile-item-dot{
    width:10px;height:10px;border-radius:50%;flex-shrink:0;
    background:var(--ec,var(--orange));
  }
  .tl-mobile-item-meta{
    margin-left:auto;font-size:.62rem;color:var(--text2);letter-spacing:.05em;
  }

  /* 시대 헤더 — 모바일 더 컴팩트 + 큰 폰트 */
  .tl-era-header{
    flex-direction:column;align-items:flex-start;
    gap:.7rem;padding-bottom:1rem;margin-bottom:1.3rem;
  }
  .tl-era-icon{
    width:50px;height:50px;font-size:1.5rem;
  }
  .tl-era-title{ font-size:1.15rem;letter-spacing:.08em }
  .tl-era-subtitle{ font-size:.7rem }

  /* 이벤트 타임라인 — 모바일에서 라인 위치 조정 */
  .tl-events{ padding-left:1.5rem }
  .tl-events::before{ left:.35rem;width:2px }

  /* 이벤트 카드 — 폰트 키움, 패딩 늘림, 줄간격 늘림 */
  .tl-event{
    padding:1.1rem 1.05rem;
    margin-bottom:1.2rem;
  }
  .tl-event::before{
    left:-1.3rem;top:1.2rem;
    width:11px;height:11px;
  }
  .tl-ev-top{
    margin-bottom:.65rem;
    align-items:center;
  }
  .tl-ev-date{
    font-size:.7rem;letter-spacing:.08em;font-weight:700;
  }
  .tl-ev-tag{
    font-size:.62rem;padding:3px 8px;
  }
  .tl-ev-title{
    font-size:1.02rem;
    line-height:1.4;
    margin-bottom:.55rem;
  }
  .tl-ev-body{
    font-size:.88rem;
    line-height:1.95;
    color:var(--text);
  }
  .tl-ev-chars{
    margin-top:.8rem;padding-top:.7rem;
    gap:.45rem;
  }
  .tl-ev-char{
    font-size:.66rem;padding:4px 10px;
    letter-spacing:.04em;
  }

  /* 기밀 이벤트 — 모바일 더 명확하게 */
  .tl-classified-badge{ gap:.55rem }
  .tl-classified-badge svg{ width:26px;height:26px }
  .tl-classified-badge span{ font-size:.72rem;letter-spacing:.12em }
}

/* ── 작은 폰 (480px 이하) ── */
@media(max-width:480px){
  .tl-mobile-bar{ top:104px }
  .tl-era-header{ gap:.55rem }
  .tl-era-icon{ width:44px;height:44px;font-size:1.3rem }
  .tl-era-title{ font-size:1.05rem }
  .tl-era-subtitle{ font-size:.65rem;letter-spacing:.06em }

  .tl-event{ padding:.95rem .9rem;margin-bottom:1rem }
  .tl-event::before{ left:-1.2rem;top:1.1rem;width:10px;height:10px }
  .tl-ev-title{ font-size:.96rem;line-height:1.45 }
  .tl-ev-body{ font-size:.84rem;line-height:1.9 }
  .tl-ev-date{ font-size:.65rem }
  .tl-ev-tag{ font-size:.6rem;padding:2px 7px }
}

/* ══════════════════════════════════════
   기존 540px responsive 유지
══════════════════════════════════════ */
@media(max-width:540px){
  .hdr-top{ padding:0 .7rem; height:52px; gap:.5rem }
  .site-logo{ font-size:1.05rem }
  .credit-badge{ padding:.25rem .5rem; font-size:.62rem }
  .cb-lbl,.cb-unit{ display:none }
  .cw-bar{ width:56px }
  .sfx-btn{ padding:3px 7px; font-size:.55rem }
  .nb{ font-size:.68rem; padding:.5rem .75rem }
  .char-grid{ grid-template-columns:repeat(2,1fr) }
  .panel{ width:100%; max-height:100vh; height:100vh; border-radius:0 }
  .char-modal{ max-width:100%; border-radius:0; max-height:100vh }
  .overlay{ padding:0; align-items:flex-end }
  .char-modal{ max-height:92vh }
  .map-layout{ flex-direction:column }
  .map-side-panel{ min-width:auto; width:100%; min-height:160px }
  .map-legend{ grid-template-columns:repeat(2,1fr) }
  .req-layout{ flex-direction:column }
  .req-side{
    width:100%;height:auto;
    flex-direction:row;flex-wrap:wrap;
    border-right:none;border-bottom:1px solid var(--brd);
    padding:.4rem .6rem;gap:.4rem;
  }
  .rs-item{ font-size:.6rem }
  .si-btns{ flex-wrap:wrap }
  .carousel-view{ height:200px }
  .rq-title{ font-size:.95rem }
  .da,.us{ display:none }
  .dc-search-bar input{ font-size:.8rem }
  input,select,button,textarea{ font-size:16px!important }
}
@media(min-width:800px){
  .char-grid{ grid-template-columns:repeat(auto-fill,minmax(168px,1fr)) }
}

/* ══════════════════════════════════════
   GLOSSARY PAGE (기본 용어)  ★요청9
══════════════════════════════════════ */
.gl-intro{
  font-size:.85rem;line-height:1.8;color:var(--text2);
  margin-bottom:1.3rem;padding:.9rem 1.1rem;
  background:var(--surf);border:1px solid var(--brd);border-left:3px solid var(--arcane);
}
.gl-cat-bar{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.3rem}
.gl-cat{
  font-family:'Share Tech Mono',monospace;font-size:.66rem;letter-spacing:.06em;
  padding:.4rem .85rem;background:transparent;border:1px solid var(--brd);
  color:var(--text2);cursor:pointer;transition:.2s;
}
.gl-cat:hover{border-color:var(--brd2);color:var(--white)}
.gl-cat.active{border-color:var(--arcane);color:var(--arcane);background:rgba(79,156,249,.06)}

.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:.7rem}
.gl-card{
  background:var(--surf);border:1px solid var(--brd);border-top:2px solid var(--arcane);
  padding:1rem 1.1rem;transition:.22s;display:flex;flex-direction:column;
}
.gl-card:hover{background:var(--surf2);border-color:var(--brd2)}
.gl-card.classified{border-top-color:#ff3838;background:rgba(255,0,0,.03);cursor:pointer}
.gl-card.was-classified{border-top-color:#ff8a3d}
.gl-card-top{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-bottom:.5rem}
.gl-cat-tag{
  font-family:'Share Tech Mono',monospace;font-size:.55rem;letter-spacing:.1em;
  padding:2px 7px;border:1px solid var(--brd2);color:var(--text2);
}
.gl-unlocked{font-family:'Share Tech Mono',monospace;font-size:.55rem;color:#ff8a3d;letter-spacing:.06em}
.gl-term{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:1rem;
  color:var(--white);margin-bottom:.55rem;letter-spacing:.03em;line-height:1.3;
}
.gl-en{
  display:block;font-family:'Share Tech Mono',monospace;font-weight:400;
  font-size:.6rem;letter-spacing:.12em;color:var(--arcane);margin-top:.2rem;
}
.gl-desc{font-size:.82rem;line-height:1.85;color:var(--text)}
.gl-lock{
  display:flex;align-items:center;gap:.4rem;margin-top:.7rem;
  font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.08em;
  color:#ff5555;
}

@media(max-width:768px){
  .gl-grid{grid-template-columns:1fr}
  .gl-term{font-size:1.05rem}
  .gl-desc{font-size:.86rem;line-height:1.9}
  .gl-cat{font-size:.7rem;padding:.5rem .9rem}
}

/* ══════════════════════════════════════
   ★ NEW: 검색바 & 등급 필터 (확인된 인물)
══════════════════════════════════════ */
.char-search-row{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  margin-bottom:.8rem;padding:.6rem .8rem;
  background:var(--surf);border:1px solid var(--brd);
}
.csr-input-wrap{
  display:flex;align-items:center;gap:.4rem;flex:1;min-width:180px;
  background:var(--bg);border:1px solid var(--brd2);padding:.4rem .7rem;
  transition:.2s;
}
.csr-input-wrap:focus-within{border-color:var(--orange);box-shadow:0 0 6px rgba(255,107,53,.2)}
.csr-icon{color:var(--text2);flex-shrink:0}
.csr-input{
  flex:1;background:none;border:none;outline:none;color:var(--white);
  font-family:'Noto Sans KR',sans-serif;font-size:.82rem;
}
.csr-clear{
  background:none;border:none;color:var(--text2);font-size:1.1rem;
  cursor:pointer;padding:0 .2rem;line-height:1;
}
.csr-clear:hover{color:var(--white)}
.csr-grade-filter{display:flex;gap:.25rem;flex-wrap:wrap}
.csr-gf{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:.7rem;
  min-width:32px;height:30px;padding:0 .55rem;
  background:transparent;border:1px solid var(--brd2);color:var(--text2);
  cursor:pointer;transition:.18s;
}
.csr-gf:hover{color:var(--white);border-color:rgba(255,255,255,.3)}
.csr-gf.active{background:var(--orange);color:#000;border-color:var(--orange)}
.char-count{
  font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:.08em;
  color:var(--text2);margin-bottom:.5rem;
}
.cc-hit{color:var(--orange);font-weight:700}
.char-empty{
  grid-column:1/-1;padding:3rem 1rem;text-align:center;
  font-family:'Share Tech Mono',monospace;font-size:.85rem;color:var(--text2);
  border:1px dashed var(--brd2);background:var(--surf);
}

/* ══════════════════════════════════════
   ★ NEW: 모달 - 관련 타임라인 링크
══════════════════════════════════════ */
#cm-timeline-refs{
  margin-bottom:.9rem;padding:.7rem .85rem;
  background:rgba(255,255,255,.02);border:1px solid var(--brd);border-left:2px solid var(--mc,var(--orange));
}
.cm-tl-hdr{
  font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:.08em;
  color:var(--mc,var(--orange));margin-bottom:.5rem;
}
.cm-tl-list{display:flex;flex-direction:column;gap:.3rem}
.cm-tl-item{
  display:flex;gap:.6rem;align-items:center;
  padding:.4rem .55rem;background:var(--surf2);
  border-left:2px solid var(--orange);
  cursor:pointer;transition:.18s;font-size:.74rem;
}
.cm-tl-item:hover{background:var(--surf3);transform:translateX(2px)}
.cm-tl-item.cls{border-left-color:#ff3838;background:rgba(255,0,0,.04)}
.cm-tl-date{font-family:'Share Tech Mono',monospace;font-size:.62rem;color:var(--text2);min-width:64px;letter-spacing:.04em}
.cm-tl-title{color:var(--white);flex:1;line-height:1.4}

/* 타임라인 이벤트 하이라이트 (점프 시) */
.tl-event-highlight{
  animation:tlHighlight 2.4s ease;
  box-shadow:0 0 20px rgba(255,107,53,.6),inset 0 0 30px rgba(255,107,53,.15)!important;
}
@keyframes tlHighlight{
  0%{box-shadow:0 0 0 rgba(255,107,53,0)}
  20%{box-shadow:0 0 30px rgba(255,107,53,.85),inset 0 0 50px rgba(255,107,53,.3)}
  100%{box-shadow:0 0 0 rgba(255,107,53,0)}
}

/* ══════════════════════════════════════
   ★ NEW: 외부 링크 배너 (홈)
══════════════════════════════════════ */
.link-intro{
  font-size:.78rem;line-height:1.7;color:var(--text2);
  margin-bottom:.85rem;
}
.link-intro code{
  font-family:'Share Tech Mono',monospace;font-size:.72rem;
  background:var(--surf2);padding:1px 6px;color:var(--orange);
}
.link-banner-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:.7rem;margin-bottom:1.3rem;
}
.link-banner{
  display:flex;flex-direction:column;
  background:var(--surf);border:1px solid var(--brd);
  text-decoration:none;color:var(--text);
  transition:.25s;overflow:hidden;position:relative;
}
.link-banner:hover{
  border-color:var(--brd2);transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.lb-img-wrap{
  position:relative;aspect-ratio:16/9;overflow:hidden;
}
.lb-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a1a1a,#0d0d0d);
}
.lb-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.7) 100%);
  transition:.25s;
}
.link-banner:hover .lb-overlay{background:linear-gradient(to bottom,rgba(0,0,0,.15) 0%,rgba(0,0,0,.85) 100%)}
.lb-corner{
  position:absolute;top:.5rem;right:.5rem;
  font-family:'Share Tech Mono',monospace;font-size:.55rem;letter-spacing:.1em;
  padding:2px 7px;background:rgba(0,0,0,.7);color:var(--orange);
  border:1px solid rgba(255,107,53,.4);
}
.lb-info{padding:.75rem .9rem}
.lb-title{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:.88rem;
  color:var(--white);margin-bottom:.2rem;letter-spacing:.04em;
}
.lb-sub{
  font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.06em;
  color:var(--text2);
}

/* ══════════════════════════════════════
   ★ NEW: 관계도 페이지
══════════════════════════════════════ */
.rel-intro{
  font-size:.82rem;line-height:1.8;color:var(--text2);
  margin-bottom:1rem;padding:.9rem 1.1rem;
  background:var(--surf);border:1px solid var(--brd);border-left:3px solid var(--arcane);
}
.rel-tabs{display:flex;gap:.4rem;margin-bottom:1rem}
.rel-tab{
  flex:1;font-family:'Share Tech Mono',monospace;font-size:.78rem;letter-spacing:.08em;
  padding:.6rem;background:var(--surf);border:1px solid var(--brd);color:var(--text2);
  cursor:pointer;transition:.2s;text-transform:uppercase;
}
.rel-tab:hover{color:var(--white)}
.rel-tab.active{background:var(--arcane);color:#000;border-color:var(--arcane);font-weight:700}
.rel-view{display:none}
.rel-view.active{display:block}
.rel-svg-wrap{
  background:var(--surf);border:1px solid var(--brd);border-top:2px solid var(--arcane);
  padding:.8rem;overflow-x:auto;
}
#factionSvg,#peopleSvg{width:100%;height:auto;min-height:380px}
.people-node:hover circle:first-child{stroke-width:3;filter:drop-shadow(0 0 6px currentColor)}
.rel-legend{
  display:flex;flex-wrap:wrap;gap:.7rem;
  margin-top:.85rem;padding:.7rem .9rem;
  background:var(--surf);border:1px solid var(--brd);
}
.rl-i{
  display:flex;align-items:center;gap:.4rem;
  font-family:'Share Tech Mono',monospace;font-size:.62rem;color:var(--text2);
  letter-spacing:.05em;
}
.rl-line{
  display:inline-block;width:22px;height:2px;
  border-top:2px solid;border-color:inherit;
}

/* ══════════════════════════════════════
   ★ NEW: 오염도 시뮬레이터
══════════════════════════════════════ */
.sim-intro{
  font-size:.82rem;line-height:1.8;color:var(--text2);
  margin-bottom:1rem;padding:.9rem 1.1rem;
  background:var(--surf);border:1px solid var(--brd);border-left:3px solid var(--red);
}
.sim-panel{
  background:var(--surf);border:1px solid var(--brd);border-top:2px solid var(--red);
}
.sim-status{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.7rem;padding:.9rem;border-bottom:1px solid var(--brd);
}
.sim-stat-item{display:flex;flex-direction:column;gap:.3rem}
.ss-lbl{font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.1em;color:var(--text2)}
.ss-val{font-family:'Orbitron',sans-serif;font-weight:700;font-size:1.2rem;color:var(--white)}
.ss-bar{height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.ss-bar-fill{height:100%;background:#4cff8a;box-shadow:0 0 5px currentColor;transition:width .4s,background .4s}
.sim-scenario{
  padding:1.1rem;border-bottom:1px solid var(--brd);
  background:linear-gradient(135deg,rgba(255,56,56,.04),transparent);
}
.ss-tag{
  font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.12em;
  color:var(--red);margin-bottom:.5rem;
}
.ss-desc{
  font-size:.88rem;line-height:1.85;color:var(--text);
  padding:.7rem .9rem;background:var(--bg);border-left:2px solid var(--red);
  font-style:italic;
}
.sim-choices{display:flex;flex-direction:column;gap:.5rem;padding:.9rem;border-bottom:1px solid var(--brd)}
.sim-choice{
  text-align:left;padding:.85rem 1rem;
  background:var(--surf2);border:1px solid var(--brd);
  color:var(--text);cursor:pointer;transition:.2s;
  display:flex;flex-direction:column;gap:.4rem;
}
.sim-choice:hover{background:var(--surf3);border-color:var(--orange);transform:translateX(3px)}
.sim-c-text{font-size:.84rem;line-height:1.5;color:var(--white)}
.sim-c-effects{display:flex;flex-wrap:wrap;gap:.4rem}
.sim-c-effects span{
  font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.04em;
  padding:1px 6px;border:1px solid currentColor;
}
.eff-good{color:#4cff8a}
.eff-bad{color:#ff5555}
.sim-log-wrap{padding:.9rem}
.sim-log-hdr{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Share Tech Mono',monospace;font-size:.7rem;letter-spacing:.08em;
  color:var(--text2);margin-bottom:.5rem;
}
.sim-reset{
  background:none;border:1px solid var(--brd2);color:var(--text2);
  padding:3px 9px;font-family:'Share Tech Mono',monospace;font-size:.6rem;
  cursor:pointer;transition:.2s;
}
.sim-reset:hover{color:var(--orange);border-color:var(--orange)}
.sim-log{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem}
.sim-log-empty{color:var(--text2);font-size:.75rem;font-style:italic;padding:.5rem 0}
.sim-log-item{
  font-size:.76rem;line-height:1.75;color:var(--text);
  padding:.45rem .65rem;background:var(--bg);border-left:2px solid var(--brd2);
}

/* ══════════════════════════════════════
   ★ NEW: 오염 모드 — 글리치 단계별 효과
══════════════════════════════════════ */
.contam-lv1{
  /* 0~25%: 미세한 환청만 — 거의 안 보임 */
}
.contam-lv2 #scanlines{ opacity:.85 }
.contam-lv2{
  animation:contamShake2 6s ease infinite;
}
@keyframes contamShake2{
  0%,90%,100%{transform:translate(0)}
  93%{transform:translate(-1px,0)}
  95%{transform:translate(1px,1px)}
  97%{transform:translate(0,-1px)}
}
.contam-lv3 #scanlines{
  opacity:1;
  background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(255,56,56,.08) 2px,rgba(255,56,56,.08) 3px);
}
.contam-lv3{
  animation:contamShake3 3s ease infinite;
  filter:hue-rotate(5deg) saturate(1.1);
}
@keyframes contamShake3{
  0%,80%,100%{transform:translate(0);filter:hue-rotate(5deg)}
  82%{transform:translate(-2px,1px);filter:hue-rotate(20deg) saturate(1.3)}
  85%{transform:translate(2px,-1px);filter:hue-rotate(-15deg)}
  88%{transform:translate(-1px,2px);filter:hue-rotate(10deg)}
}
.contam-lv4 #scanlines{
  opacity:1;
  background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(255,0,0,.18) 2px,rgba(255,0,0,.18) 3px);
}
.contam-lv4{
  animation:contamShake4 1.2s ease infinite;
}
@keyframes contamShake4{
  0%,100%{transform:translate(0);filter:hue-rotate(0deg)}
  10%{transform:translate(-3px,2px);filter:hue-rotate(40deg) saturate(1.5)}
  20%{transform:translate(3px,-2px);filter:hue-rotate(-30deg) saturate(.7)}
  30%{transform:translate(-2px,-1px);filter:hue-rotate(20deg)}
  40%{transform:translate(2px,3px);filter:hue-rotate(-20deg)}
  50%{transform:translate(0,0);filter:hue-rotate(60deg) invert(.05)}
  60%{transform:translate(-1px,2px);filter:hue-rotate(-40deg)}
  70%{transform:translate(2px,-2px);filter:hue-rotate(15deg)}
  80%{transform:translate(-3px,1px);filter:hue-rotate(-10deg) saturate(1.4)}
  90%{transform:translate(1px,-3px);filter:hue-rotate(30deg)}
}
.contam-lv4::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:7997;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(255,0,0,.18) 100%);
  animation:contamPulse4 1.5s ease-in-out infinite;
}
@keyframes contamPulse4{0%,100%{opacity:.6}50%{opacity:1}}

/* 시뮬레이터 전용 오염 효과 (전역 contam-lv* 클래스와 별도) */
.sim-contam-2{filter:saturate(.92)}
.sim-contam-3 .sim-panel{animation:contamShake3 4s ease infinite;filter:hue-rotate(8deg)}
.sim-contam-4 .sim-panel{animation:contamShake4 1.5s ease infinite}

/* ══════════════════════════════════════
   ★ NEW: 모바일 추가 대응
══════════════════════════════════════ */
@media(max-width:768px){
  /* 검색 행 */
  .char-search-row{flex-direction:column;align-items:stretch;gap:.5rem}
  .csr-grade-filter{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .csr-grade-filter::-webkit-scrollbar{display:none}

  /* 관계도 */
  .rel-svg-wrap{padding:.4rem}
  #factionSvg,#peopleSvg{min-width:520px}

  /* 외부 링크 */
  .link-banner-grid{grid-template-columns:1fr}

  /* 시뮬레이터 */
  .sim-status{grid-template-columns:1fr 1fr}
  .ss-val{font-size:1.05rem}
  .sim-c-text{font-size:.88rem}
}

@media(max-width:480px){
  .csr-input{font-size:16px}  /* iOS 자동 줌 방지 */
  .rel-tabs{flex-direction:column}
  .sim-status{grid-template-columns:1fr}
}

/* ══════════════════════════════════════
   ★ NEW: 시뮬 100% 변이 이벤트 오버레이
══════════════════════════════════════ */
#mutationOverlay{
  position:fixed;inset:0;z-index:99999;
  opacity:0;transition:opacity .35s;
  pointer-events:none;
}
#mutationOverlay.show{opacity:1;pointer-events:auto}
.mut-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(80,0,0,.92) 0%, rgba(0,0,0,.98) 100%);
}
.mut-noise{
  position:absolute;inset:0;opacity:.15;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(255,0,0,.3) 2px, rgba(255,0,0,.3) 3px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(255,255,255,.05) 3px, rgba(255,255,255,.05) 4px);
  animation:mutNoise .12s steps(4) infinite;
}
@keyframes mutNoise{
  0%{transform:translate(0,0)} 25%{transform:translate(-2px,1px)}
  50%{transform:translate(1px,-2px)} 75%{transform:translate(-1px,2px)}
  100%{transform:translate(0,0)}
}
.mut-content{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
}
.mut-stage{
  max-width:580px;width:100%;
  background:rgba(0,0,0,.85);
  border:2px solid #ff3838;
  padding:2rem 2rem 1.7rem;
  box-shadow:0 0 50px rgba(255,0,0,.5), inset 0 0 30px rgba(255,0,0,.1);
  animation:mutShake 2s ease infinite;
  text-align:center;
}
@keyframes mutShake{
  0%,100%{transform:translate(0)}
  20%{transform:translate(-2px,1px)}
  40%{transform:translate(2px,-1px)}
  60%{transform:translate(-1px,2px)}
  80%{transform:translate(2px,1px)}
}
.mut-warn{
  font-family:'Share Tech Mono',monospace;font-size:.78rem;letter-spacing:.18em;
  color:#ff5555;margin-bottom:1.2rem;
  animation:mutBlink 1s steps(2) infinite;
}
@keyframes mutBlink{0%,100%{opacity:1}50%{opacity:.3}}
.mut-cont-num{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:5.5rem;
  color:#ff3838;line-height:1;letter-spacing:-.02em;
  text-shadow:0 0 30px rgba(255,0,0,.7);
  margin-bottom:.4rem;
}
.mut-cont-pct{font-size:2.5rem;font-weight:700}
.mut-sub{
  font-family:'Share Tech Mono',monospace;font-size:.78rem;letter-spacing:.15em;
  color:#ff8a3d;margin-bottom:1.8rem;
}
.mut-status{
  font-size:.88rem;color:#fff;margin-bottom:1rem;line-height:1.7;
}
.mut-bar{
  height:8px;background:rgba(255,0,0,.15);border:1px solid #ff3838;
  overflow:hidden;
}
.mut-bar-fill{
  height:100%;width:0%;background:#ff3838;box-shadow:0 0 10px #ff3838;
  animation:mutFill 3s ease-out forwards;
}
@keyframes mutFill{from{width:0}to{width:100%}}

.mut-title{
  font-family:'Share Tech Mono',monospace;font-size:.85rem;letter-spacing:.2em;
  color:#ff8a3d;margin-bottom:.8rem;
}
.mut-code{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:2.3rem;
  letter-spacing:.08em;margin-bottom:1rem;
  text-shadow:0 0 20px currentColor;
}
.mut-tier{
  display:inline-block;padding:.55rem 1.3rem;
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:1.1rem;
  letter-spacing:.1em;
  border:2px solid;margin-bottom:1.2rem;
}
.mut-tier-ko{
  font-family:'Noto Sans KR',sans-serif;font-weight:700;font-size:.85rem;
  margin-left:.5rem;opacity:.8;
}
.mut-desc{
  font-size:.85rem;line-height:1.85;color:#fff;
  margin-bottom:1.2rem;padding:.7rem .9rem;
  background:rgba(255,255,255,.04);border-left:2px solid #ff8a3d;
  text-align:left;
}
.mut-fragments{
  display:flex;flex-direction:column;gap:.3rem;
  margin-bottom:1.2rem;padding:.7rem;
  background:rgba(0,0,0,.4);border:1px dashed rgba(255,255,255,.2);
  font-family:'Share Tech Mono',monospace;font-size:.75rem;
  color:rgba(255,255,255,.7);
}
.mf-row{display:flex;justify-content:space-between;letter-spacing:.05em}
.mf-row b{color:#fff;font-weight:700}
.mut-quote{
  font-family:'Noto Sans KR',sans-serif;font-style:italic;font-size:.8rem;
  line-height:1.85;color:rgba(255,255,255,.6);
  padding:.8rem;background:rgba(0,0,0,.3);
  border-left:2px solid rgba(255,255,255,.2);
  margin-bottom:1.4rem;text-align:left;
}
.mut-close{
  font-family:'Share Tech Mono',monospace;font-size:.78rem;letter-spacing:.12em;
  padding:.6rem 1.6rem;background:#ff3838;color:#000;
  border:none;cursor:pointer;font-weight:700;
  transition:.2s;
}
.mut-close:hover{background:#fff;color:#ff3838}

@media(max-width:540px){
  .mut-stage{padding:1.4rem 1rem}
  .mut-cont-num{font-size:4rem}
  .mut-code{font-size:1.7rem}
  .mut-tier{font-size:.95rem;padding:.4rem 1rem}
  .mut-quote{font-size:.74rem}
}

/* ★ NEW: 모달 외형(appearance) 블록 */
#cm-appr{
  margin:.8rem 0;padding:.7rem .85rem;
  background:rgba(255,255,255,.02);
  border:1px solid var(--brd);border-left:2px solid var(--mc,var(--orange));
}
.cm-appr-hdr{
  font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.1em;
  color:var(--mc,var(--orange));margin-bottom:.45rem;
}
.cm-appr-body{
  font-size:.8rem;line-height:1.85;color:var(--text);
}

/* ★ NEW: 외부 채널 - 실제 이미지 배너 */
.lb-img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s;
}
.link-banner:hover .lb-img{transform:scale(1.04)}

/* FIND FIXER 대표 배너 (강조) */
.lb-feature{
  border-color:rgba(255,107,53,.4);
}
.lb-feature:hover{
  border-color:var(--orange);
  box-shadow:0 6px 24px rgba(255,107,53,.25);
}
.lb-feature .lb-corner{
  color:var(--orange);border-color:rgba(255,107,53,.6);
  background:rgba(0,0,0,.8);
}
.lb-feature .lb-img-wrap{
  background:#000;
}