/* =============================================
   GMS 계산기 — style.css  (묶음1: 청록 다크 테마 + 폰트)
   ============================================= */

/* ── @font-face ── */
@font-face {
  font-family: '고딕';
  src: url('font/ONE_Mobile_Title.ttf') format('truetype');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: 'Maple';
  src: url('font/Maple.ttf') format('truetype');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: '8bit';
  src: url('font/8bit.ttf') format('truetype');
  font-weight: normal; font-style: normal;
}

/* ── CSS 변수 ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* 브라우저가 직접 그리는 것들(select 펼침 목록, 스크롤바, 기본 폼 위젯)이
     테마를 따라가게 한다. 이게 없으면 다크 모드에서도 흰 위젯이 나온다. */
  color-scheme: dark;

  /* 홈 화면에 추가해서 실행하면(PWA standalone) 상태바·홈 인디케이터 밑까지
     화면이 넓어져서 그대로 두면 헤더가 시계에 가린다. 그만큼을 띄우는 값.
     브라우저 탭에서 열거나 노치가 없는 기기면 env()가 0이라 아무 영향이 없다. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* 상단 고정 영역 높이. 사이드바/콘텐츠가 "헤더 아래"에 붙는 기준값이다.
     헤더 밑에 띠를 하나 더 깔게 되면 --top-h에 그 높이만 더하면 된다.
     --top-h가 안전영역을 포함하므로 이걸 쓰는 사이드바 등은 자동으로 따라온다. */
  --hdr-h:  60px;
  --top-h:  calc(var(--hdr-h) + var(--safe-top));

  /* 배경 — 우주 다크 톤 (보라 채도 낮춤) */
  --bg:      #08060d;
  --bg2:     #100e1b;
  --bg3:     #181523;
  --bg-card: #121019;
  --bg-hover:#201e2f;

  /* 텍스트 */
  --text:     #ffffff;
  --text-sub: rgba(255,255,255,.72);
  --text-dim: rgba(255,255,255,.42);

  /* 테두리 */
  --border:   rgba(var(--hue),.2);
  --border-hl:rgba(var(--hue-l),.45);

  /* 그림자 */
  --shadow:    0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 6px 24px rgba(0,0,0,.55);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.7);

  /* 메인 그라데이션 — 우주 보라 (채도 낮춤) */
  --grad:       linear-gradient(135deg,#40315c 0%,#231c3a 100%);
  --grad-soft:  linear-gradient(180deg,#120e1d 0%,#08060d 100%);
  --grad-card:  linear-gradient(160deg,#181521 0%,#0f0d1b 100%);
  --grad-sheen: linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 60%);
  --grad-gold:  linear-gradient(135deg,#f0d080 0%,#c8903a 100%);

  /* 포인트 컬러 (보라만 채도 낮춤) */
  --primary:   #ae9aeb;   /* 라벤더 */
  --primary-d: #8355d2;
  --primary-l: rgba(var(--hue-l),.12);
  --accent:    #f6c744;   /* 별빛 골드 */
  --gold:      #d8b15a;
  --danger:    #f05060;
  --danger-l:  rgba(240,80,96,.14);
  --success:   #3dd68c;
  --success-l: rgba(61,214,140,.12);

  /* 난이도 */
  --easy-bg:    #3cc47d; --easy-fg:    #fff;
  --normal-bg:  #5bc8f5; --normal-fg:  #fff;
  --hard-bg:    #c0186e; --hard-fg:    #fff;
  --chaos-bg:   #1c1c1c; --chaos-fg:   #c8924a;
  --extreme-bg: #1c1c1c; --extreme-fg: #e0473c;

  /* 반경 */
  --radius-sm:  4px;
  --radius:     6px;
  --radius-lg:  8px;
  --radius-pill:999px;

  /* 카드·패널의 반투명 바탕 (보라 채도 낮춤) */
  --panel-veil: rgba(18,15,27,.7);
  /* 카드 배경 이미지 위에 얹는 옅은 막 — 글자 대비만 확보하고 그림은 보이게 */
  --card-bg-scrim: rgba(12,10,20,.42);

  /* 포인트 색 원본값 — 테마별로 이 셋만 바꾸면 하드코딩돼 있던 곳까지 따라온다 (채도 낮춤) */
  --hue:   147,113,225;
  --hue-l: 174,154,235;
  --hue-d: 131,85,210;

  /* var(--grad) 배경 위에 얹는 글자색. 다크에서는 어두운 보라 배경에 금색 글자가
     맞지만, 라이트에서는 --grad 자체가 골드 계열이라 --accent(역시 골드)를
     쓰면 금색 위에 금색 글자가 된다. 배경과 독립적으로 테마별로 정한다. */
  --on-grad: var(--accent);
  --lookup-bg: rgba(86,48,115,.12);
}

/* ═══ 화이트 테마 ═══
   색은 대부분 위 변수를 거쳐 쓰이므로 변수만 갈아끼우면 대부분 따라온다.
   변수를 안 거치고 rgba(255,255,255,.0x)로 박아둔 곳들은 흰 배경에서
   보이지 않게 되므로 아래에서 따로 어두운 톤으로 덮는다. */
:root[data-theme="light"] {
  color-scheme: light;   /* 브라우저 기본 위젯도 라이트로 (다크의 color-scheme 상쇄) */

  /* 다크가 보라 계열이니 라이트는 노랑/골드 계열로 간다.
     배경은 연보라 대신 흰색·따뜻한 아이보리, 선은 골드. */
  --bg:      #ffffff;
  --bg2:     #ffffff;
  --bg3:     #fbf6e6;
  --bg-card: #ffffff;
  --bg-hover:#fdf4dd;

  --text:     #14121c;
  --text-sub: rgba(20,18,28,.82);
  --text-dim: rgba(20,18,28,.82);

  --border:   rgba(184,134,11,.34);
  --border-hl:rgba(184,134,11,.60);

  --shadow:    0 2px 8px rgba(120,95,20,.10);
  --shadow-md: 0 6px 24px rgba(120,95,20,.14);
  --shadow-lg: 0 16px 48px rgba(120,95,20,.18);

  --grad:       linear-gradient(135deg,#e0a92b 0%,#b8860b 100%);
  --grad-soft:  linear-gradient(180deg,#ffffff 0%,#fdfaf1 100%);
  --grad-card:  linear-gradient(160deg,#ffffff 0%,#fffdf6 100%);
  --grad-sheen: linear-gradient(180deg,rgba(0,0,0,.035) 0%,rgba(0,0,0,0) 60%);

  /* 흰 배경 위에서 흰 글씨가 읽히도록 충분히 어두운 골드 */
  --primary:   #a97b0d;
  --primary-d: #8a6309;
  --primary-l: rgba(184,134,11,.13);
  --accent:    #9a6f12;
  --gold:      #8f6a1c;
  --danger:    #d02236;
  --danger-l:  rgba(208,34,54,.10);
  --success:   #0f7a48;
  --success-l: rgba(15,122,72,.12);
  --panel-veil: rgba(255,255,255,.86);
  --card-bg-scrim: rgba(255,255,255,.55);
  --hue:   184,134,11;
  --hue-l: 214,168,44;
  --hue-d: 138,99,9;
  --on-grad: #ffffff;
  --lookup-bg: #ffffff;
}

/* 로고 그라디언트는 라이트에서도 그대로 둔다(사용자 요청) */
/* 스크롤바도 보라 → 골드 */
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(184,134,11,.42); }

/* 변수 밖에 하드코딩돼 있어 화이트에서 안 보이던 것들 */
/* 헤더·사이드바는 아래쪽에 !important 그라디언트가 따로 걸려 있어 변수로는 못 덮는다 */
:root[data-theme="light"] .header {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,244,251,.86)) !important;
  border-bottom: 1px solid var(--border) !important;
}
:root[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,242,250,.86)) !important;
  border-right: 1px solid var(--border);
}
:root[data-theme="light"] .ccbtn--del { background: rgba(208,34,54,.12); }
:root[data-theme="light"] .sb-nav__item:hover { background: rgba(20,18,28,.06); }
:root[data-theme="light"] .ccbtn--edit        { background: rgba(20,18,28,.07); }
:root[data-theme="light"] .crystal-bar__track { background: rgba(20,18,28,.09); }
:root[data-theme="light"] .lib-progress       { background: rgba(20,18,28,.09); }
:root[data-theme="light"] .sf-bidir           { background: rgba(20,18,28,.04); }
/* 헤더 버튼(초기화·설정)이 rgba(--hue-d)를 배경으로 써서 화이트에서 탁한 황토색이 된다.
   다른 주요 버튼(.sbtn--primary)과 같은 골드 그라디언트로 맞춘다. */
:root[data-theme="light"] .hbtn {
  background: var(--grad);
  color: var(--on-grad);
  border-color: rgba(var(--hue-l),.25);
}
:root[data-theme="light"] .hbtn:hover { background: var(--grad); filter: brightness(1.08); color: var(--on-grad); }
:root[data-theme="light"] #headerBtnSettings { color: var(--on-grad); }
/* 다크용으로 고른 밝은 파랑/보라/빨강이 흰 배경에서는 대비가 부족하다.
   색 계열은 그대로 두고 명도만 낮춘 값으로 덮는다. */
:root[data-theme="light"] .hexa-result-row .rv.hp-suf { color: #0369a1; }
:root[data-theme="light"] .bhp-tr__dot--5             { color: #1d4ed8; }
:root[data-theme="light"] .force-arc                  { color: #1d4ed8; }
:root[data-theme="light"] .force-auth                 { color: #6d28d9; }
:root[data-theme="light"] .boss-total__deduct         { color: var(--danger); }
:root[data-theme="light"] .dt-card__del:hover         { color: var(--danger); }
/* select 화살표가 흰색으로 박혀 있어 흰 배경에서 안 보인다 → 어두운 화살표로 교체 */
:root[data-theme="light"] .bhp-diff-sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%2314121c88'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .empty,
:root[data-theme="light"] .ci-empty,
:root[data-theme="light"] .bus-empty          { color: var(--text-dim); }

/* ── 기본 ── */
/* ── 별 캔버스 ── */
#starCanvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.header, .app, .overlay { position: relative; z-index: 1; }

html { font-size: 17px; }
body {
  font-family: '고딕', 'Segoe UI', 'Malgun Gothic', sans-serif;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.55;
}
ul { list-style: none; }
/* 우클릭 저장 방지(app.js)와 짝을 맞춰 드래그로 빼가는 것도 막는다.
   -webkit-touch-callout은 아이폰에서 길게 눌러 저장하는 걸 막는다. */
img { display: block; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

/* ── 전용 커서 ──
   corsor.gif의 첫 프레임을 32px 이내 png로 뽑아 쓴다(images/icons/cursor32.png).
   커서는 OS가 그리는 레이어라 페이지 렌더링과 분리돼 있어 이 방식은 렉이 없다.
   주의 1) 크롬은 32px을 넘는 커서 이미지를 통째로 무시한다 → 원본 38x36을 32x30으로 줄임.
   주의 2) gif를 그대로 쓰면 첫 프레임만 나온다(애니메이션 안 됨). 움직이게 하려면 JS로
           요소를 마우스에 따라다니게 해야 하는데 그건 mousemove마다 리렌더가 걸려 실제로 렉이 생긴다.
   주의 3) 끝의 `, auto` 폴백을 빼면 규칙 자체가 무효가 된다.
   글자 입력칸의 I빔과 색 선택기의 십자선은 각각 아래/클래스 규칙에서 그대로 유지된다.

   ※ 현재 비활성화 상태(사용자 요청). 이미지 파일(cursor32.png, corsor.gif)은 지우지 않았으니
     아래 두 줄의 주석만 풀면 바로 다시 켜진다. */
/*
body, body * { cursor: url('images/icons/cursor32.png') 4 4, auto; }
input[type="text"], input[type="number"], input[type="search"], textarea { cursor: text; }
*/
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--hue),.3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
@media (max-width: 768px) {
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; -ms-overflow-style: none; }
}

/* ── HEADER ── */
.header {
  /* 안전영역만큼 위를 비우고 그만큼 키를 키운다 — 내용은 그대로 60px 안에 놓인다 */
  height: var(--top-h);
  padding-top: var(--safe-top);
  background: rgba(6,4,15,.75);
  
  
  border-bottom: 1px solid rgba(var(--hue-l),.2);
  display: flex; align-items: center;
  padding: 0 24px; gap: 20px;
  flex-shrink: 0; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 0 rgba(246,199,68,.06), 0 4px 32px rgba(0,0,0,.7), 0 0 60px rgba(86,48,115,.15);
}
.header__logo { display: flex; align-items: center; gap: 8px; }
.header__maple-img { width: 28px; height: 28px; object-fit: contain; }
.header__title {
  display: flex; flex-direction: column; gap: 1px; line-height: 1.15;
  font-size: 1rem; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(90deg, #f6c744 0%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 영문 서브 표기(도메인). 한글 이름 아래 작은 둘째 줄로 놓는다.
   좁은 화면(모바일 헤더)에서 예전에 "byeolni..."처럼 잘리던 문제가 있었다 —
   그 자리에 다시 긴 글자를 얹지 않도록 여기선 숨긴다. */
.header__title-en { font-size: .62rem; font-weight: 700; opacity: .75; letter-spacing: .2px; }
.header__center { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header__rlabel { font-size: .75rem; color: var(--text-sub); font-weight: 600; }

/* 테마 토글 — '초기화' 라벨 좌측, 다크/화이트 텍스트 표기 + 아이콘 없는 스위치 */
.theme-toggle-wrap { display: flex; align-items: center; gap: 7px; }
.theme-toggle__label { font-size: .74rem; font-weight: 700; color: var(--text); }
.theme-toggle {
  position: relative;
  width: 40px; height: 22px; flex: 0 0 40px;
  padding: 0; border: 1px solid var(--border-hl);
  border-radius: var(--radius-pill);
  background: var(--bg3);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.theme-toggle:hover { border-color: var(--primary); }
.theme-toggle__knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: var(--shadow);
  transition: transform .18s ease;
}
.theme-toggle--light { background: rgba(var(--hue),.22); }
.theme-toggle--light .theme-toggle__knob { transform: translateX(18px); }
.header__timer {
  font-size: .88rem; font-weight: 800; color: var(--accent);
  background: rgba(246,199,68,.1);
  border: 1px solid rgba(246,199,68,.25);
  padding: 5px 16px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(246,199,68,.5);
}
.header__right { display: flex; gap: 6px; align-items: center; }
.hbtn {
  padding: 6px 16px; border-radius: 6px;
  font-size: .78rem; font-weight: 800; letter-spacing: .3px;
  color: var(--primary);
  background: linear-gradient(135deg, rgba(var(--hue-d),.35) 0%, rgba(var(--hue-d),.55) 100%);
  border: 1.5px solid rgba(var(--hue),.45);
  transition: background .2s, border-color .2s, color .2s;
}
#headerBtnSettings { color: var(--text-sub); }
.hbtn:hover {
  background: linear-gradient(135deg, rgba(var(--hue-d),.5) 0%, rgba(var(--hue-d),.7) 100%);
  border-color: var(--primary);
  color: #fff;
}
.hbtn:active { transform: scale(.96); }

/* ── APP ── */
/* 340px — 300px는 실제 브라우저에서 여유가 0px라 폰트 렌더링差로 줄바꿈 재발 → 여유를 크게 늘림.
   px로 고정하면 글자 크기(root font-size)를 키웠을 때 사이드바만 그대로라 긴 직업명
   ("Arch Mage (Ice, Lightning)")이 다시 줄바꿈된다 → rem으로 바꿔 글자와 같이 커지게 함.
   22.67rem × 15px = 340px 로 기존 값과 동일. */
.app { display: grid; grid-template-columns: 22.67rem 1fr; flex: 1; min-height: calc(100vh - var(--top-h));  }

/* ── SIDEBAR ── */
.sidebar {
  background: rgba(8,5,20,.6);
  
  
  border-right: 1px solid rgba(var(--hue),.18);
  display: flex; flex-direction: column;
  position: sticky; top: var(--top-h);
  height: calc(100vh - var(--top-h)); overflow-y: auto;
  box-shadow: 2px 0 24px rgba(0,0,0,.4);
}

/* 서버 토글 (NA / EU) */
.region-toggle {
  display: flex; gap: 4px;
  margin: 12px 12px 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(var(--hue),.25);
  border-radius: var(--radius-pill); padding: 4px;
}
.region-toggle__btn {
  flex: 1; padding: 7px 0;
  border-radius: var(--radius-pill);
  font-size: .8rem; font-weight: 800;
  color: var(--text-sub); transition: .18s;
  letter-spacing: .6px;
}
.region-toggle__btn:hover { color: var(--text); }
.region-toggle__btn.active {
  background: var(--grad);
  color: var(--accent);
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
  text-shadow: 0 0 8px rgba(246,199,68,.4);
}

/* 캐릭터 영역 */
.sb-char-area { border-bottom: 1px solid var(--border); }
.sb-char-head {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}
.sb-label {
  font-size: 1.4rem; font-weight: 900;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}
.char-list { padding: 0 10px 6px; display: flex; flex-direction: column; gap: 6px; }

/* char card */
.char-card {
  position: relative;
  background: var(--panel-veil);
  border: 1px solid rgba(var(--hue),.2);
  border-radius: var(--radius);
  cursor: pointer; overflow: hidden;
  transition: border-color .2s;
}
/* 카드 배경 이미지(선택 사항) — 캐릭터가 cardBg를 고르면 이 <img>가 일러스트 박스
   위를 덮는다. "없음"을 고르면 이 <img> 자체가 안 그려지므로, 박스는 자기 CSS의
   기본 그라디언트만 보인다(예전엔 여기 images/icons/bg.webp가 항상 깔려 있어서
   "없음"을 골라도 그 그림이 계속 보이는 버그가 있었음 — 지금은 제거함).
   캐릭터 그림보다 아래(z-index:0)에 깔려야 하므로 일러스트는 z-index:1. */
/* 배경을 확대해서 위로 당겨봤는데(160%+anchor) 오히려 바닥이 화면 밖으로 밀려나
   더 떠 보였음(실측 확인) — 캐릭터 크기(92%) 수정만으로 이미 발이 배경 바닥에
   닿아 보여서, 배경은 단순 cover로 되돌린다. */
.portrait-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.char-card:hover { border-color: rgba(var(--hue-l),.4); }
.char-card.dragging { opacity: .35; cursor: grabbing; }
.char-card.drag-over { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.char-card[draggable="true"] { cursor: grab; }
.char-card.active {
  border-color: #f5c842;
  box-shadow: 0 0 0 1px #f5c842;
}

/* 카드 내부: 좌=텍스트+버튼, 우=portrait */
/* flex + aspect-ratio 조합은 폭이 텍스트 칸에 밀려 정사각형이 안 나온다
   (실제로 95x130처럼 세로로 길어졌음). 오른쪽 큰 카드(.cg-card)가 쓰는 방식대로
   grid로 칼럼 폭을 고정하고, 일러스트는 그 폭의 100% + aspect-ratio로 높이를 잡는다. */
.char-card__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) 118px;
  align-items: stretch; overflow: hidden;
}
.char-card__portrait {
  /* 정사각형(aspect-ratio) 고정을 없애고 grid align-items:stretch를 그대로 받아서
     박스 높이가 카드(텍스트 칸) 실제 높이에 꽉 차게 함 — 정사각형일 필요 없음. */
  width: 100%; height: 100%;
  background: transparent;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; position: relative;
}
/* 캐릭터 그림은 배경(.portrait-bg) 위로 */
.char-card__portrait img:not(.portrait-bg) { position: relative; z-index: 1; }
/* 박스가 정사각형(118x118, overflow:hidden)으로 바뀌면서 width만 130%/100%로 키우던
   예전 규칙은 height가 auto라 세로로 넘쳐서 위쪽(머리)이 잘렸다. 오른쪽 큰 카드
   (.cg-portrait)와 똑같이 width+height를 같이 %로 제한해 object-fit:contain이
   실제로 동작하게 함 — 잘리지 않고 박스 안에 꽉 차게 들어간다.
   (바닥 여백은 부모 padding-bottom이나 object-position 오프셋으로 시도했다가 둘 다
   실패함 — padding은 width/height %의 기준이 갈라져 캐릭터가 작아졌고, 3-value
   object-position("center bottom 5%")은 문법이 무효라 브라우저가 규칙 전체를
   버리고 50% 50%로 되돌아갔다(실측으로 확인). 넥슨 아바타는 96x96 정사각형이라
   object-fit:contain에 애초에 여백을 만들 레터박스가 안 생기므로 object-position은
   의미가 없었음 — margin-bottom을 이미지 자체에 줘서 크기 계산과 완전히 분리했다.) */
.char-card__portrait img:not(.portrait-bg) { width: 92%; height: 92%; object-fit: contain; object-position: bottom center; margin-bottom: 1%; }
.char-card__portrait--no img:not(.portrait-bg) { width: 92%; height: 92%; object-position: bottom center; margin-bottom: 1%; }
.char-card__noimg { display: none; color: var(--text-dim); font-size: .65rem; font-weight: 800; }
.char-card__portrait--no .char-card__noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.char-card__txt {
  min-width: 0; flex: 1; display: flex; flex-direction: column;
  gap: 2px; padding: 10px 10px 8px 10px;
}
.char-card__name {
  font-size: .86rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.char-card__lv { color: var(--accent); font-weight: 800; font-size: .73rem; }
.char-card__world-line {
  display: flex; align-items: center; gap: 3px;
  font-size: .7rem; color: var(--text-sub); font-weight: 600;
}
.char-card__world-line img { width: 16px; height: 16px; object-fit: contain; margin: -2px 0; }
/* 넘칠 땐 줄바꿈 대신 말줄임 — 줄바꿈되면 카드 높이가 튀어 레이아웃이 깨진다 */
.char-card__job-line {
  font-size: .68rem; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.char-card__btns { display: flex; flex-direction: row; gap: 5px; margin-top: auto; padding-top: 6px; }
.ccbtn {
  padding: 3px 10px; border-radius: 6px;
  font-size: .65rem; font-weight: 800;
  transition: .12s; white-space: nowrap; text-align: center;
}
.ccbtn--edit { background: rgba(255,255,255,.08); color: var(--text-sub); }
.ccbtn--edit:hover { background: var(--primary); color: #000; }
.ccbtn--del { background: var(--danger-l); color: var(--danger); }
.ccbtn--del:hover { background: var(--danger); color: #fff; }

/* crystal bar */
.crystal-bar { padding: 8px 14px 10px; }
.crystal-bar__row { display: flex; justify-content: space-between; margin-bottom: 5px; }
.crystal-bar__detail { display: flex; gap: 10px; margin-top: 5px; }
.crystal-bar__type { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--text-sub); }
/* 원본이 32x38인데 14px로 그려서 44%까지 줄어 있었다. 게임에서 보던 것보다
   훨씬 작아 보인다는 지적을 받아 원본 크기에 가깝게 올린다.
   rem이라 글자 크기를 키우면 아이콘도 같이 커진다(고정 px이라 글씨만 커졌을 때
   상대적으로 더 작아 보이던 문제도 같이 해결된다). */
.crystal-icon { width: 1.5rem; height: 1.5rem; object-fit: contain; vertical-align: middle; }
.crystal-bar__label { font-size: .72rem; color: var(--text-sub); font-weight: 700; }
.crystal-bar__count { font-size: .72rem; font-weight: 800; color: var(--text); }
.crystal-bar__track {
  height: 6px; background: rgba(255,255,255,.06);
  border-radius: 99px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.crystal-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 99px; transition: width .4s;
}

/* 전체 주간 획득 메소 */
.sb-weekmeso {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 10px 10px;
  padding: 10px 14px;
  background: rgba(246,199,68,.05);
  border: 1px solid rgba(246,199,68,.15);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(246,199,68,.06) inset;
}
.sb-weekmeso__label { font-size: .68rem; font-weight: 700; color: var(--text-sub); }
.sb-weekmeso__val {
  font-size: 1.05rem; font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(246,199,68,.55);
}

/* sidebar nav */
.sb-nav {
  padding: 6px 10px 16px;
  display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto;
}
.sb-bottom { margin-top: auto; border-top: 1px solid var(--border); padding: 6px 0; }
.sb-nav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  font-size: .88rem; font-weight: 600;
  color: var(--text-sub);
  transition: background .18s, color .18s, transform .18s;
  text-align: left; width: 100%;
}
.sb-nav__item:hover { background: rgba(255,255,255,.05); color: var(--text); transform: translateX(2px); }
@keyframes nav-grad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.sb-nav__item.active {
  background-image: linear-gradient(90deg, rgba(246,199,68,.55), rgba(180,140,255,.50), rgba(246,199,68,.55));
  background-size: 250% 100%;
  animation: nav-grad 2.5s ease infinite;
  border: 1px solid rgba(246,199,68,.4);
  color: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 12px rgba(246,199,68,.08);
  text-shadow: 0 0 8px rgba(246,199,68,.35);
}
/* 가장 큰 아이콘(38px)이 들어가고도 남을 만큼 — 좁으면 아이콘이 그릇을 벗어나
   라벨을 밀어낸다 */
.sb-nav__icon-wrap {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
/* ── nav 아이콘 크기 ──
   ★ 값이 제각각인 이유가 있다. 다 32px로 똑같이 줬더니 오히려 크기가 들쭉날쭉해
     보였는데, object-fit:contain이 맞추는 건 "그림"이 아니라 "캔버스"이기 때문이다.
     마플 아이콘은 파일마다 투명 여백이 달라서(캔버스를 꽉 채운 것도 있고 여백이
     넓은 것도 있다) 같은 32px 상자에 넣어도 실제 그림은 27~32px로 벌어졌다.
     그래서 파일별로 그림(불투명 영역)의 실제 크기를 재서, 화면에 보이는 그림이
     모두 32px이 되도록 역산한 값을 넣었다. 작은 쪽에 맞춰 줄이지 않고 가장 크게
     보이던 32px에 맞춰 올린 것이다.
     ※ 아이콘 파일을 교체하면 이 값도 다시 계산해야 한다. 계산식:
       필요값 = 32 × (캔버스 긴 변) ÷ (그림 긴 변) */
.sb-nav__icon { object-fit: contain; width: 32px; height: 32px; }

.sb-nav__item[data-sec="wantchannel"]  .sb-nav__icon { width: 38px; height: 38px; }
.sb-nav__item[data-sec="charinfo"]     .sb-nav__icon { width: 32px; height: 32px; }
.sb-nav__item[data-sec="mcalendar"]    .sb-nav__icon { width: 32px; height: 32px; }
.sb-nav__item[data-sec="boss"]         .sb-nav__icon { width: 34px; height: 34px; }
.sb-nav__item[data-sec="dailytasks"]   .sb-nav__icon { width: 32px; height: 32px; }
.sb-nav__item[data-sec="hexa"]         .sb-nav__icon { width: 34px; height: 34px; }
.sb-nav__item[data-sec="liberation"]   .sb-nav__icon { width: 32px; height: 32px; }
.sb-nav__item[data-sec="addoption"]    .sb-nav__icon { width: 32px; height: 32px; }
.sb-nav__item[data-sec="starforce"]    .sb-nav__icon { width: 32px; height: 32px; }
.sb-nav__item[data-sec="cube"]         .sb-nav__icon { width: 34px; height: 34px; }
.sb-nav__item[data-sec="bosshp"]       .sb-nav__icon { width: 32px; height: 32px; }
.sb-nav__item[data-sec="serverstatus"] .sb-nav__icon { width: 35px; height: 35px; }
/* CSS 아이콘 (기존 유지 — img 태그에는 적용 안 됨) */
.sb-nav__icon::before,.sb-nav__icon::after{content:'';position:absolute;display:block}
.sb-nav__icon--char::before{width:10px;height:10px;border-radius:50%;background:var(--primary);top:3px}
.sb-nav__icon--char::after{width:16px;height:8px;border-radius:8px 8px 4px 4px;background:var(--primary-d);bottom:3px}
.sb-nav__icon--boss::before{width:17px;height:17px;border-radius:50%;border:2px solid var(--primary)}
.sb-nav__icon--boss::after{width:4px;height:4px;border-radius:50%;background:var(--primary);box-shadow:8px 0 0 var(--primary)}
.sb-nav__icon--hexa::before{width:14px;height:14px;background:var(--primary);transform:rotate(45deg);border-radius:3px}
.sb-nav__icon--liberation::before{width:17px;height:2px;background:var(--accent);transform:rotate(40deg);border-radius:2px}
.sb-nav__icon--liberation::after{width:17px;height:2px;background:var(--accent);transform:rotate(-40deg);border-radius:2px}
.sb-nav__icon--starforce::before{width:16px;height:16px;background:#f6c84b;clip-path:polygon(50% 0,62% 35%,98% 35%,68% 56%,80% 96%,50% 72%,20% 96%,32% 56%,2% 35%,38% 35%)}
.sb-nav__icon--hp::before{width:16px;height:16px;border:2.5px solid var(--danger);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.sb-nav__icon--force::before{width:17px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#3b82f6)}
.sb-nav__icon--force::after{width:11px;height:3px;border-radius:99px;background:rgba(255,255,255,.6);bottom:6px}

/* ── CONTENT ── */
.content {
  padding: 24px;
  display: flex; flex-direction: column; gap: 0;
  background: transparent;
  min-height: calc(100vh - var(--top-h));
  min-width: 0;   /* 넓은 자식이 레이아웃을 밀지 않고 자체 스크롤하도록 */
}
.sec { display: none; flex-direction: column; gap: 16px; min-width: 0; }
.sec.active { display: flex; }

/* section header */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
/* 제목과 본문 크기 차이가 작아 구분이 잘 안 된다는 피드백 → 제목을 키우고 아래 여백을 넓힘 */
.sec-title {
  font-size: 1.85rem; font-weight: 900; letter-spacing: -.5px; line-height: 1.25;
  position: relative; padding-left: 18px; color: var(--text);
}
.sec-title::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: .88em; border-radius: 99px;
  background: linear-gradient(180deg, #f6c744 0%, #ae9aeb 100%);
  box-shadow: 0 0 10px rgba(246,199,68,.5), 0 0 20px rgba(var(--hue-l),.3);
}
.sec-badge {
  font-size: .68rem; font-weight: 800; letter-spacing: .3px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: rgba(var(--hue-l),.15);
  color: var(--primary);
  border: 1px solid rgba(var(--hue-l),.3);
}

/* ── CARD ── */
.card {
  background: var(--panel-veil);
  
  
  border: 1px solid rgba(var(--hue),.22);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 4px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  position: relative; overflow: hidden;
  transition: border-color .25s;
}
.card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(var(--hue-l),.04) 0%, transparent 50%, rgba(246,199,68,.03) 100%);
  pointer-events: none;
}
.card:hover { border-color: rgba(var(--hue-l),.38); }
.card__title {
  font-size: 1.2rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-sub); margin-bottom: 14px;
}

/* ── BOSS PANEL ── */
.boss-panel {
  display: flex; flex-direction: column; gap: 0;
  background: var(--panel-veil);
  
  
  border: 1px solid rgba(var(--hue),.2);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04); overflow: hidden;
}
.boss-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(var(--hue),.15);
  /* 원래는 보라기 도는 두 톤 그라디언트였는데, 색을 변수로 묶으면서 한 색이 됐다.
     테마별 포인트색을 살짝 얹어 두 톤을 되살린다. */
  background: linear-gradient(90deg, rgba(var(--hue),.12) 0%, var(--panel-veil) 100%);
}
.boss-panel__charname { font-size: .96rem; font-weight: 800; color: var(--text); }
.boss-panel__headr { display: flex; align-items: center; gap: 16px; }
.boss-crystal-count { display: flex; align-items: center; gap: 12px; }
.boss-crystal-count img { width: 22px; height: 22px; object-fit: contain; }
.boss-crystal-count .cc-item { display: flex; align-items: center; gap: 5px; font-size: 1.1rem; font-weight: 800; color: var(--text); }
.pill { padding: 5px 16px; border-radius: var(--radius-pill); font-size: .76rem; font-weight: 800; }
.pill--blue { background: rgba(var(--hue-l),.15); color: var(--primary); border: 1px solid rgba(var(--hue-l),.3); }
.pill--red { background: var(--danger-l); color: var(--danger); cursor: pointer; transition: .15s; border: 1px solid transparent; }
.pill--red:hover { background: var(--danger); color: #fff; }

.boss-table-wrap { background: var(--bg); }
.boss-table { width: 100%; border-collapse: collapse; }
.boss-table thead th {
  position: sticky; top: 0; background: var(--bg2);
  padding: 10px 18px; text-align: left;
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-sub); z-index: 2;
  border-bottom: 1px solid var(--border);
}
.boss-table tbody tr { border-top: 1px solid var(--border); transition: background .12s; }
.boss-table tbody tr:first-child { border-top: none; }
.boss-table tbody tr:hover { background: var(--bg-hover); }
.boss-table tbody tr.done { background: linear-gradient(90deg, rgba(246,199,68,.22), rgba(180,140,255,.22)); border-top-color: rgba(246,199,68,.25); }
.boss-table tbody tr.locked { opacity: .25; pointer-events: none; }
.boss-table td { padding: 8px 18px; vertical-align: middle; color: var(--text); }

.boss-name-cell { display: flex; align-items: center; gap: 12px; }
/* title(호버 툴팁)은 모바일에서 볼 방법이 없어 탭 가능한 ⓘ를 따로 둔다 */
.bm-crystal-info {
  margin-left: auto; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg2); color: var(--text-sub);
  font-size: .7rem; line-height: 1; cursor: pointer;
}
.bm-crystal-toggle {
  position: relative; display: inline-flex; align-items: center; width: 62px; height: 24px;
  border-radius: 999px; border: 1.5px solid var(--border); cursor: pointer; padding: 0; flex: none;
  background: var(--bg2); transition: background .15s;
}
.bm-crystal-toggle.on { background: rgba(var(--hue),.55); border-color: rgba(var(--hue),.55); }
.bm-crystal-toggle__knob {
  position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.bm-crystal-toggle.on .bm-crystal-toggle__knob { transform: translateX(38px); }
.bm-crystal-toggle__txt {
  position: absolute; top: 50%; transform: translateY(-50%); font-size: .6rem; font-weight: 900;
  letter-spacing: .02em; display: none;
}
.bm-crystal-toggle__txt--on { left: 7px; color: rgba(255,255,255,.85); }
.bm-crystal-toggle__txt--off { right: 8px; color: var(--text-sub); }
.bm-crystal-toggle.on .bm-crystal-toggle__txt--on { display: block; }
.bm-crystal-toggle.off .bm-crystal-toggle__txt--off { display: block; }
.boss-thumb {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--bg3); overflow: hidden;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}
.boss-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(80%) brightness(0.45); transition: filter .2s; }
tr.done .boss-thumb img { filter: none; }
.boss-label { font-size: .9rem; font-weight: 700; white-space: nowrap; color: var(--text); }
.boss-monthly {
  font-size: .6rem; background: rgba(216,177,90,.18);
  color: var(--gold); border-radius: 4px;
  padding: 2px 6px; margin-left: 6px; font-weight: 800;
  border: 1px solid rgba(216,177,90,.35);
}

/* 난이도 필 */
.diff-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.dpill {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 15px; border-radius: var(--radius-pill);
  font-size: .7rem; font-weight: 900; letter-spacing: .4px;
  cursor: pointer; user-select: none;
  border: 2px solid transparent;
  filter: grayscale(.8) opacity(.45); transition: filter .15s;
}
.dpill:hover { filter: grayscale(.3) opacity(.85); }
.dpill.sel { filter: none; opacity: 1; box-shadow: 0 3px 12px rgba(0,0,0,.45); }
.dpill__t { display: inline-block; line-height: 1; white-space: nowrap; }
.dpill.diff-easy    { background: linear-gradient(180deg,#909098 0%,#55555e 100%); border-color:#fff; }
.dpill.diff-easy    .dpill__t { color: #fff; }
.dpill.diff-normal  { background: linear-gradient(180deg,#74e0f0 0%,#1f93b5 100%); border-color:#fff; }
.dpill.diff-normal  .dpill__t { color: #fff; }
.dpill.diff-hard    { background: linear-gradient(180deg,#f040a0 0%,#8b0050 100%); border-color:#fff; }
.dpill.diff-hard    .dpill__t { color: #fff; }
.dpill.diff-chaos   { background: linear-gradient(180deg,#37535c 0%,#15242a 100%); border-color:#e7b765; }
.dpill.diff-chaos   .dpill__t { background: linear-gradient(180deg,#ffe7a8 0%,#c8924a 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dpill.diff-extreme { background: linear-gradient(180deg,#2c1820 0%,#150b10 100%); border-color:#ff3b6e; }
.dpill.diff-extreme .dpill__t { background: linear-gradient(180deg,#ff9a3c 0%,#ff5ea8 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dpill--sm { padding: 3px 10px; font-size: .62rem; }
.dpill--sm:not(.sel) { filter: grayscale(.8) opacity(.4); }

.party-stepper {
  display: inline-flex; align-items: center;
  background: rgba(var(--hue),.08);
  border: 1.5px solid rgba(var(--hue),.25);
  border-radius: 6px; padding: 3px; gap: 3px;
  box-shadow: 0 0 10px rgba(var(--hue),.1), inset 0 1px 0 rgba(255,255,255,.05);
}
.party-stepper button {
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 1rem; font-weight: 700;
  color: var(--primary);
  background: rgba(var(--hue),.12);
  border: 1px solid rgba(var(--hue),.2);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, box-shadow .15s, color .15s, border-color .15s;
}
.party-stepper button:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: #000;
  box-shadow: 0 0 12px rgba(var(--hue-l),.5);
}
.party-stepper button:disabled { opacity: .2; }
.party-stepper__val { min-width: 24px; text-align: center; font-size: .88rem; font-weight: 800; color: var(--text); }
.party-dash,.rev-dash { color: var(--text-dim); font-size: .9rem; }
.rev-val { font-size: .9rem; font-weight: 800; color: var(--accent); text-shadow: 0 0 6px rgba(246,199,68,.35); }

.boss-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--panel-veil);
  border-top: 1px solid rgba(var(--hue-l),.2);
}
.boss-total--month {
  background: rgba(246,199,68,.04);
  border-top: 1px solid rgba(246,199,68,.12);
}
.boss-total__label { font-size: .82rem; color: var(--text-sub); font-weight: 700; }
.boss-total__sub { font-size: .68rem; color: var(--text-dim); margin-left: 4px; }
.boss-total__val {
  font-size: 1.3rem; font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(246,199,68,.4);
}
.boss-total__val--month { font-size: 1.3rem; color: rgba(246,199,68,.75); text-shadow: none; }
.boss-total__deduct { font-size: .8rem; color: #f06c6c; font-weight: 700; margin-top: 2px; display: block; }

/* ── 대여템 섹션 ── */
.rental-section {
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(var(--hue-l),.15);
  padding: 14px 20px 12px;
}
.rental-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rental-title { font-size: .82rem; font-weight: 800; color: var(--text-sub); }
.rental-cost-label { font-size: .82rem; font-weight: 800; color: var(--danger); }
.rental-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.rental-slot {
  width: 48px; height: 48px; border-radius: 10px;
  border: 2px solid rgba(255,255,255,.12);
  overflow: hidden; position: relative;
  filter: grayscale(.85) brightness(.4);
  transition: filter .18s, border-color .18s;
}
.rental-slot.on { filter: none; border-color: rgba(246,199,68,.6); }
.rental-slot img { width: 100%; height: 100%; object-fit: contain; }
.rental-footer { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.rental-wed-label { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--text-sub); font-weight: 700; }
.rental-wed-label input[type=checkbox] { accent-color: var(--primary); width: 15px; height: 15px; }
.rental-notice { font-size: .72rem; color: var(--text-dim); }

/* ── BUTTONS ── */
.sbtn {
  padding: 9px 20px; border-radius: 6px;
  font-size: .84rem; font-weight: 700; text-align: center;
  transition: background .18s, color .18s, filter .18s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent;
}
.sbtn--add {
  background: var(--grad); color: var(--on-grad);
  font-size: .76rem; padding: 5px 13px;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  border-color: rgba(var(--hue-l),.25);
}
.sbtn--add:hover { filter: brightness(1.1); }
.sbtn--primary {
  background: var(--grad); color: var(--on-grad);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  border-color: rgba(var(--hue-l),.25);
}
.sbtn--primary:hover { filter: brightness(1.1); }
.sbtn--ghost {
  background: rgba(255,255,255,.06);
  color: var(--text-sub);
  border-color: var(--border);
}
.sbtn--ghost:hover { background: rgba(255,255,255,.12); color: var(--text); }
.sbtn--danger { background: var(--danger); color: #fff; box-shadow: 0 4px 12px rgba(240,80,96,.3); }
.sbtn--danger:hover { filter: brightness(1.1); }
.w100 { width: 100%; justify-content: center; }

/* ── FORM ── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field__label { font-size: .95rem; color: var(--text-sub); font-weight: 700; }
.inp, select.sel {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--text); font: inherit; font-size: .86rem;
  outline: none; width: 100%;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.inp:focus, select.sel:focus {
  background: rgba(255,255,255,.1);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--hue-l),.12);
}
.inp[readonly] {
  opacity: .7; cursor: default;
  background: rgba(255,255,255,.03);
}
.inp[readonly]:focus { box-shadow: none; border-color: var(--border); }
/* 펼친 목록(option)은 OS가 그리는 영역이라 기본 흰 배경인데, select에 준 밝은
   글자색은 그대로 상속돼 다크 모드에서 흰 글씨 + 흰 배경으로 안 보였다.
   (달력 오전/오후 선택이 class="inp mc-ev__ampm"이라 기존 select.sel 규칙에 안 걸려 발생)
   select마다 규칙을 따로 다는 방식은 새 select를 추가할 때마다 또 빠뜨리게 되므로
   모든 select에 한 번에 건다. 아래 개별 규칙들은 남아 있어도 결과는 같다. */
select option { background: var(--bg2); color: var(--text); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; }
.check-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.check-row input[type=checkbox] { accent-color: var(--primary); width: 15px; height: 15px; }

/* ── DATA TABLE ── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.data-table th {
  padding: 9px 13px; text-align: left;
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-sub);
  background: var(--bg3); border-bottom: 1px solid var(--border);
}
.data-table td { padding: 9px 13px; border-bottom: 1px solid var(--border); color: var(--text); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-hover); }
.empty { text-align: center; color: var(--text-sub); padding: 32px; font-size: .9rem; }

/* ── HEXA ── */
.hexa-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hexa-field-group { display: flex; flex-direction: column; gap: 10px; }
.hexa-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hexa-label { font-size: .84rem; font-weight: 600; flex-shrink: 0; color: var(--text); }
.hexa-row .inp { max-width: 100px; }
.hexa-support-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.hexa-support-item {
  display: grid; grid-template-columns: 1fr auto auto auto auto auto;
  align-items: center; gap: 8px;
  background: var(--bg3); padding: 9px 12px; border-radius: var(--radius-sm);
}
.hexa-support-item span { font-size: .8rem; color: var(--text-sub); }
.hx-node-name { display: flex; align-items: center; gap: 6px; color: var(--text) !important; font-weight: 700; font-size: .88rem; }
.hx-node-icon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; border-radius: 6px; }
.hexa-label { display: flex; align-items: center; gap: 6px; }
.hexa-support-item .inp { max-width: 60px; }
.hexa-support-item button { color: var(--danger); font-size: .82rem; padding: 0 4px; }
.hexa-result { display: flex; flex-direction: column; gap: 10px; }
.hexa-result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.hexa-result-row:last-child { border-bottom: none; }
.hexa-result-row .rl { font-size: .86rem; color: var(--text-sub); }
.hexa-result-row .rv { font-size: .98rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 6px; }
.hexa-result-row .rv.ok { color: var(--accent); }
.hexa-result-row .rv.ng { color: var(--danger); }
.hexa-result-row .rv.hp-suf { color: #38bdf8; }
.hx-res-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.hx-result-sep { margin: 14px 0 10px; border: none; border-top: 2px solid var(--border); }
.hexa-result-label { font-size: .78rem; font-weight: 900; color: var(--text-dim); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 4px; }

/* ── LIBERATION ── */
.lib-tabs { display: flex; gap: 0; margin-bottom: 16px; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; }
.lib-tab__icon { width: 40px; height: 40px; object-fit: contain; margin-right: 10px; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(246,199,68,.6)); }
.lib-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 20px; border-radius: 0;
  font-size: .95rem; font-weight: 700; line-height: 1;
  color: var(--text-sub); background: var(--bg-card);
  border: none; border-right: 1.5px solid var(--border); transition: .15s;
}
.lib-tab:last-child { border-right: none; }
.lib-tab:hover { background: rgba(var(--hue),.1); color: var(--primary); }
.lib-tab.active { background: var(--grad); color: var(--on-grad); box-shadow: none; }
.lib-panel { display: none; flex-direction: column; gap: 14px; }
.lib-panel.active { display: flex; }
.lib-info { font-size: .86rem; color: var(--text-sub); line-height: 1.6; }
.lib-steps { display: flex; flex-direction: column; gap: 8px; }
.lib-step {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.lib-step input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.lib-step__label { font-size: .88rem; font-weight: 600; flex: 1; color: var(--text); }
.lib-step.done .lib-step__label { text-decoration: line-through; color: var(--text-dim); }
.lib-step__type { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.lib-type-boss { background: rgba(240,80,96,.2); color: var(--danger); }
.lib-type-collect { background: rgba(216,177,90,.18); color: var(--gold); }
.lib-type-quest { background: rgba(var(--hue-l),.15); color: var(--primary); }
.lib-progress { height: 7px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.lib-progress__fill { height: 100%; background: linear-gradient(90deg,var(--primary),var(--accent)); border-radius: 99px; transition: width .4s; }
.lib-pct { font-size: .74rem; color: var(--text-sub); text-align: right; margin-top: 4px; }

/* ── STARFORCE ── */
/* minmax(0,1fr) 필수 — 1fr만 쓰면 콘텐츠가 더 큰 쪽(결과 카드)이 최소폭을
   더 많이 가져가 반대쪽(토글 버튼들)이 짜부라진다 */
.sf-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: start; }
.sf-chart-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.sf-right { display: flex; flex-direction: column; gap: 16px; }
#sfResult { display: flex; flex-direction: column; gap: 4px; }
#cubeResults { display: flex; flex-direction: column; gap: 4px; }
.sf-res-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.sf-res-item:last-child { border-bottom: none; }
.sf-res-label { font-size: .86rem; color: var(--text-sub); }
.sf-res-val { font-size: .98rem; font-weight: 800; color: var(--text); }
.sf-res-val.big { font-size: 1.2rem; color: var(--accent); text-shadow: 0 0 8px rgba(246,199,68,.35); }

/* ── 스타포스 토글 그룹 ── */
.sec-sep { border: none; border-top: 1.5px solid var(--border); margin: 0 0 20px; }
.sf-tabs { display: flex; gap: 0; margin-bottom: 12px; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--border); width: fit-content; }
.sf-tab { padding: 10px 28px; font-size: .9rem; font-weight: 700; background: transparent; color: var(--text-sub); border: none; border-right: 1px solid var(--border); cursor: pointer; transition: all .15s; }
.sf-tab:last-child { border-right: none; }
.sf-tab.active { background: var(--primary); color: #fff; }
.sf-tab:hover:not(.active) { background: rgba(var(--hue),.1); color: var(--text); }
/* flex-wrap 안전망 — 그리드 수정 후에도 극단적으로 좁은 폭에서는 줄바꿈으로 대응 */
.sf-toggle-group { display: flex; gap: 0; flex-wrap: wrap; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border); }
.sf-toggle { flex: 1; padding: 10px 10px 8px; font-size: .83rem; background: transparent; color: var(--text-sub); border: none; border-right: 1px solid var(--border); cursor: pointer; transition: all .15s; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sf-toggle:last-child { border-right: none; }
.sf-toggle.active { background: var(--primary); color: #fff; font-weight: 700; }
.sf-toggle:hover:not(.active) { background: rgba(var(--hue),.1); color: var(--text); }

/* ── 스타포스 스테이지 버튼 ── */
.sf-stage-row2 { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.sf-stage-lbl2 { font-size: .8rem; color: var(--text-sub); min-width: 50px; font-weight: 700; flex-shrink: 0; }
select.sel.sf-stage-sel { width: 80px; flex-shrink: 0; font-size: .8rem; padding: 2px 4px; }
.sf-stage-info { display: flex; gap: 6px; font-size: .72rem; flex: 1; }
.sf-stage-prob--succ { color: var(--success); }
.sf-stage-prob--fail { color: var(--text-dim); }
.sf-stage-prob--dest { color: var(--danger); }

/* ── 스타포스 결과 ── */
.sf-star-display { font-size: 2.4rem; font-weight: 900; text-align: center; color: var(--accent); text-shadow: 0 0 20px rgba(246,199,68,.5); padding: 12px 0 8px; }
.sf-log { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.sf-log-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; font-size: .82rem; }
.log-success { background: rgba(34,197,94,.1); }
.log-fail    { background: rgba(255,255,255,.04); }
.log-destroy { background: rgba(239,68,68,.12); }
.sf-log-icon { font-size: .9rem; width: 18px; text-align: center; }
.sf-log-desc { flex: 1; color: var(--text); }
.sf-log-cost { color: var(--text-sub); font-size: .78rem; }

/* ── 스타포스 기댓값 박스 ── */
.sf-stat-box { flex: 1; min-width: 120px; background: rgba(var(--hue),.08); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.sf-stat-box--hi { border-color: rgba(246,199,68,.5); background: rgba(246,199,68,.07); }
.sf-stat-box--danger { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.07); }
.sf-stat-label { font-size: .75rem; color: var(--text-sub); }
.sf-stat-val { font-size: .95rem; font-weight: 800; color: var(--text); }
.sf-stat-box--hi .sf-stat-val { color: var(--accent); }
.sf-stat-box--danger .sf-stat-val { color: var(--danger); }

/* ── 큐브 타입 버튼 ── */
.cube-type-btn {
  flex: 1; padding: 9px 14px; border-radius: 10px; border: 1.5px solid rgba(var(--hue),.3);
  background: rgba(var(--hue),.08); color: var(--text-sub); font-size: .85rem; cursor: pointer;
  transition: all .18s;
}
.cube-type-btn.active {
  background: linear-gradient(135deg, rgba(var(--hue),.25), rgba(109,40,217,.2));
  border-color: rgba(var(--hue),.7); color: var(--primary-light);
  box-shadow: 0 0 12px rgba(var(--hue),.25);
}
.cube-type-btn:hover:not(.active) { border-color: rgba(var(--hue),.5); color: var(--text); }

/* ── 큐브 목표 옵션 ── */
.cube-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.cube-type-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: var(--radius-sm); background: var(--bg3); border: 1.5px solid var(--border); color: var(--text-sub); font-size: .82rem; font-weight: 700; cursor: pointer; transition: .15s; opacity: .6; }
.cube-type-btn img { width: 36px; height: 36px; object-fit: contain; }
.cube-type-btn[data-type="craft"] img  { width: 44px; height: 44px; }
.cube-type-btn[data-type="master"] img { width: 44px; height: 44px; }
.cube-type-btn[data-type="red"] img    { width: 44px; height: 44px; }
.cube-type-btn[data-type="black"] img  { width: 44px; height: 44px; }
.cube-type-btn:not([disabled]):hover { border-color: var(--primary); opacity: 1; }
.cube-type-btn.active { border-color: var(--primary); background: var(--primary-l); color: var(--primary); opacity: 1; }
.cube-type-btn[disabled] { cursor: not-allowed; }

.cube-form-inp { height: 38px; }

.cube-goals { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 8px; }

.cube-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cube-btn-full { width: 100%; text-align: center; }
.cube-btn-row { display: flex; gap: 8px; }
.cube-btn-row .sbtn { flex: 1; text-align: center; }

/* 큐브 결과 모달 */
.modal--cube-result { width: min(1000px, 96vw); max-height: 90vh; display: flex; flex-direction: column; }
.modal--cube-result .modal__body { flex: 1; overflow: hidden; display: flex; flex-direction: column; padding: 16px 20px 20px; }
.cube-result-body { display: flex; gap: 24px; flex: 1; overflow: hidden; padding: 16px 20px 20px; }
.cube-result-left { flex: 0 0 300px; display: flex; flex-direction: column; gap: 4px; }
.cube-result-left .sf-res-item { padding: 10px 0; }
.cube-result-right { flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.cube-combo-note { font-size: .8rem; color: var(--text-sub); margin-bottom: 10px; }
.cube-combo-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.cube-combo-item:last-child { border-bottom: none; }
.cube-combo-line { display: block; font-size: .88rem; color: var(--text-main); line-height: 1.6; }
.cube-combo-p { display: block; font-size: .8rem; color: var(--accent); margin-top: 4px; font-weight: 600; }
.mb8 { margin-bottom: 8px; }

/* 큐브 옵션 세트 */
.cube-set { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.cube-set__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cube-set__title { font-size: .85rem; font-weight: 600; color: var(--text-sub); }
.cube-set__del { background: none; border: none; color: var(--text-sub); cursor: pointer; font-size: .9rem; padding: 2px 6px; border-radius: 4px; line-height: 1; }
.cube-set__del:hover { color: var(--danger); background: var(--bg-hover); }
.cube-goal-hint { color: var(--text-sub); font-size: .8rem; line-height: 1.5; margin: 4px 0 8px; }
.cube-goal-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cube-goal-row .sel { flex: 1; min-width: 0; }
.cube-goal-row .cube-opt-inp { width: 72px; flex: 0 0 72px; text-align: right; }
.cube-goal-row .cube-opt-unit { color: var(--text-sub); font-size: .85rem; white-space: nowrap; min-width: 14px; }
.mb16 { margin-bottom: 16px; }

/* ── 보스 트래커 난이도 버튼 ── */
.diff-btns { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.diff-btns .dpill { cursor: pointer; padding: 5px 14px; font-size: .72rem; }
.boss-diff-wrap { display: flex; align-items: center; gap: 8px; }
/* 진짜 원인: 기본 폰트 '고딕'이 실제로는 ONE_Mobile_Title.ttf(장식용 타이틀 폰트)에
   매핑되어 있어 일반 UI 폰트보다 글자 폭이 훨씬 넓다. body에 인라인으로 걸리는
   폰트(app.js applyFont)를 그대로 물려받으면 사용자가 고른 폰트에 따라 pill 안
   "EXTREME"이 박스를 넘기는 정도가 달라짐 → 이 작은 배지만은 폰트 선택과
   무관하게 항상 시스템 UI 폰트를 쓰도록 고정하고, 박스도 80px로 더 키움 */
.boss-diff-pill { width: 80px; flex-shrink: 0; display: flex; justify-content: center; }
.boss-diff-pill .dpill { pointer-events: none; padding: 3px 4px; width: 100%; justify-content: center; overflow: hidden; }
.boss-diff-pill .dpill .dpill__t {
  font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-size: .62rem;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.boss-diff-sel {
  appearance: none; -webkit-appearance: none;
  background: var(--bg3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: .78rem; padding: 5px 28px 5px 10px;
  width: 110px;
  cursor: pointer; transition: border-color .15s;
}
.boss-diff-sel:hover { border-color: var(--border-hl); }
.boss-diff-sel:focus { outline: none; border-color: var(--primary); }
.boss-diff-sel option { background: var(--bg2); color: var(--text); }

/* ── Genesis 퀘스트 아이콘 ── */
.gen-quest-icons {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0;
}
.gen-qi {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; padding: 6px 8px; border-radius: 10px;
  border: 2px solid transparent;
  transition: border-color .15s, background .15s;
  min-width: 52px;
}
.gen-qi:hover { background: rgba(255,255,255,.06); }
.gen-qi.active { border-color: var(--accent); background: rgba(246,199,68,.08); }
.gen-qi__img {
  width: 64px; height: 64px; border-radius: 8px;
  background: var(--bg3); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gen-qi__img img { width: 100%; height: 100%; object-fit: cover; }
.gen-qi__label { font-size: .6rem; font-weight: 700; color: var(--text-sub); text-align: center; line-height: 1.3; white-space: nowrap; }
.gen-qi.active .gen-qi__label { color: var(--accent); }
.gen-party-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.gen-party-label { font-size: .76rem; color: var(--text-sub); font-weight: 700; }

/* ── 난이도 셀렉트 (보스 트래커) ── */
/* ── BOSS HP 카드 ── */
/* 5열 고정이었더니 창을 좁히면 칸이 강제로 짓눌려 이름이 "유\n피\n테\n르"처럼
   한 글자씩 세로로 쪼개졌다(모바일 캘린더에서 겪었던 것과 같은 유형의 버그).
   auto-fill로 바꿔 칸이 최소 폭 밑으로는 안 줄고, 대신 알아서 다음 줄로 내려가게 한다. */
/* 8열을 상한으로 두고, 그보다 넓어지면 카드가 계속 커지는 게 아니라 오른쪽에
   여백만 남긴다. auto-fill+minmax만 쓰면 화면이 넓을수록 9열, 10열로 끝없이
   늘어나므로(실제로 그랬음) 그리드가 커질 수 있는 폭 자체를 막아둔다.
   상한 폭 = 8칸 × 190px + 칸사이 7개 × 12px = 1604px.
   좁아지면 auto-fill이 알아서 7,6,…,2,1열로 줄인다
   (캐릭터 카드 .cg-grid에서 이미 쓰던 것과 같은 패턴). */
.bhp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px; max-width: 1604px;
}
.bhp-card {
  background: var(--panel-veil);
  
  
  border: 1px solid rgba(var(--hue),.22);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: border-color .22s; color: var(--text);
}
.bhp-card:hover { border-color: var(--border-hl); }
.bhp-card--monthly { border: 2px solid rgba(216,177,90,.8); }
.bhp-card__img {
  width: 100%; aspect-ratio: 1/1;
  background: linear-gradient(160deg,#1e3545 0%,#0c1a28 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.bhp-card__img img { width: 100%; height: 100%; object-fit: cover; }
.bhp-card__img--clickable { cursor: pointer; position: relative; }
.bhp-card__img--clickable:hover img { filter: brightness(1.1); }
.bhp-drops__list { display: flex; flex-wrap: wrap; gap: 6px; }
.bhp-drops__icon {
  width: 44px; height: 44px; object-fit: contain; padding: 4px;
  background: rgba(var(--hue),.08); border: 1px solid var(--border); border-radius: 6px;
  cursor: default;
}
.modal.modal--boss-drop { width: min(1180px, 96vw); }
.modal--boss-drop .modal__body { max-height: 84vh; overflow-y: auto; }
/* 헤더엔 보스 이름만 크게.
   .modal__title이 이 줄보다 파일 뒤쪽(1249줄)에 있어 명세도가 같으면 그쪽이 이긴다
   → 클래스 두 개로 명세도를 올려야 실제로 먹는다(HANDOFF "버그 패턴 2"와 동일 계열). */
.modal__title.modal__title--boss { font-size: 1.6rem; font-weight: 900; letter-spacing: -.3px; }
.bhp-drop-modal { display: flex; gap: 24px; align-items: flex-start; }
.bhp-drop-modal__img {
  /* 세로가 너무 커지면 모달이 스크롤돼서 아이템을 보려고 내려야 한다 → 화면 높이에도 맞춤 */
  flex: 0 0 clamp(280px, min(44vw, 68vh), 620px);
  width: clamp(280px, min(44vw, 68vh), 620px); height: clamp(280px, min(44vw, 68vh), 620px);
  border-radius: var(--radius-md,10px);
  /* 흰 배경 고정(테마 무관) — 어두운 배경에선 보스 외곽이 뭉개져 보였음 */
  background: #fff;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 10px; box-sizing: border-box;
}
/* cover는 원본 비율과 안 맞으면 보스를 잘라먹는다 → contain으로 전체가 보이게 */
.bhp-drop-modal__img img { width: 100%; height: 100%; object-fit: contain; }
.bhp-drop-modal__items { flex: 1; min-width: 0; }
.bhp-drop-modal__itemshead {
  font-size: 1.32rem; font-weight: 900; color: var(--text);
  padding-bottom: 11px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
/* 난이도별 구획 — 이지/노말/하드…를 한 화면에 전부 나열 */
.bhp-drop-sec { margin-bottom: 16px; }
.bhp-drop-sec:last-child { margin-bottom: 0; }
/* 난이도 표기는 앱 공용 .dpill 재사용 (EASY/NORMAL/HARD…) */
.bhp-drop-sec__diff { margin-bottom: 10px; }
/* 글자 길이가 달라도(EASY vs EXTREME) 박스 크기는 같게 — 폭 고정 */
.bhp-drop-sec__diff .dpill {
  cursor: default; pointer-events: none;
  width: 108px; padding-left: 4px; padding-right: 4px; overflow: hidden;
}
/* 기본 폰트 '고딕'(ONE_Mobile_Title)은 폭이 넓어 EXTREME 같은 긴 글자가 잘린다
   — 보스 테이블 필과 동일하게 UI 폰트로 고정 */
.bhp-drop-sec__diff .dpill__t { font-family: 'Segoe UI', 'Malgun Gothic', sans-serif; }
.bhp-drop-modal__empty { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--text-sub); }
/* 아이콘을 옆으로 나열하다 넘치면 다음 줄로 — 세로로 길어져 스크롤 생기던 것 해소 */
.bhp-drop-modal__itemlist { display: flex; flex-wrap: wrap; gap: 9px; }
.bhp-drop-item { position: relative; display: block; line-height: 0; }
.bhp-drop-item__icon {
  width: 58px; height: 58px; object-fit: contain; padding: 6px;
  background: rgba(var(--hue),.08); border: 1px solid var(--border); border-radius: 8px;
  transition: border-color .13s, transform .13s;
}
.bhp-drop-item:hover .bhp-drop-item__icon,
.bhp-drop-item:focus-visible .bhp-drop-item__icon {
  border-color: var(--primary); transform: translateY(-2px);
}
/* 이름은 평소엔 숨기고 마우스를 올릴 때만 툴팁으로 */
.bhp-drop-item__name {
  position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%);
  z-index: 5; padding: 7px 13px; border-radius: 8px;
  background: var(--bg-card); border: 2px solid var(--border-hl, var(--primary));
  box-shadow: 0 5px 18px rgba(0,0,0,.5);
  font-size: 1rem; font-weight: 800; line-height: 1.25; color: var(--text);
  white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .13s;
}
.bhp-drop-item:hover .bhp-drop-item__name,
.bhp-drop-item:focus-visible .bhp-drop-item__name { opacity: 1; visibility: visible; }
@media (max-width: 640px) {
  .bhp-drop-modal { flex-direction: column; align-items: center; }
  .bhp-drop-modal__items { width: 100%; }
}
.bhp-card__body { padding: 12px 14px; display: flex; flex-direction: column; flex: 1; }
.bhp-card__top { display: flex; flex-direction: column; gap: 7px; }
.bhp-card__name { font-size: 1.2rem; font-weight: 900; display: flex; align-items: center; gap: 6px; color: var(--text); }
.bhp-card__info { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bhp-lv { font-size: .82rem; color: var(--text-sub); font-weight: 800; }
/* 선택된 난이도 pill (Lv/포스 아래, select 위) */
.bhp-active-diff { display: flex; }
.bhp-active-diff .dpill {
  flex: 1; width: 100%;
  font-size: 1.3rem; font-weight: 900; padding: 4px 0;
  filter: none; justify-content: center;
  font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
  letter-spacing: .5px;
}
/* 난이도 select */
.bhp-diff-sel {
  width: 100%;
  background-color: rgba(255,255,255,.07);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 30px 7px 14px;
  color: var(--text);
  font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-size: .78rem; font-weight: 700;
  cursor: pointer; outline: none;
  transition: border-color .15s, background-color .15s;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%23ffffff88'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.bhp-diff-sel:hover { border-color: var(--border-hl); background-color: rgba(255,255,255,.11); }
.bhp-diff-sel:focus { border-color: var(--primary); background-color: rgba(255,255,255,.13); }
.bhp-diff-sel option { background: var(--bg2); color: var(--text); }
/* HP 내용 */
.bhp-diff { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; }
.bhp-phase { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; padding: 3px 0; color: var(--text-sub); }
.bhp-phase__val { font-weight: 900; color: var(--text); text-align: right; }
.bhp-sep { border: none; border-top: 1px dashed var(--border); margin: 4px 0; }
.bhp-pdr { font-size: .8rem; color: var(--text-sub); margin-bottom: 4px; }
.bhp-pdr b { color: var(--text); }
.bhp-thresholds { display: flex; flex-direction: column; align-items: flex-end; margin-top: auto; padding-top: 8px; gap: 2px; }
.bhp-tr { display: flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 800; }
.bhp-tr__pct { color: var(--text-sub); font-size: .72rem; font-weight: 700; }
.bhp-tr__dot--10 { color: var(--success); font-size: .65rem; }
.bhp-tr__dot--5  { color: #60a5fa; font-size: .65rem; }
.bhp-tr__val { color: var(--text); }
.hp-ok { color: var(--accent); font-weight: 800; }
.hp-ng { color: var(--danger); font-weight: 800; }
.force { display: inline-flex; align-items: center; gap: 4px; min-width: 40px; text-align: center; padding: 2px 9px; border-radius: 99px; font-size: .7rem; font-weight: 800; }
.force-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.force-arc { background: rgba(96,165,250,.15); color: #60a5fa; }
.force-auth { background: rgba(163,128,225,.16); color: #a380e1; }

/* ── FORCE ── */
.force-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.force-section-label { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-sub); margin-bottom: 10px; }
.boost-ok { color: var(--accent); font-weight: 800; }
.boost-ng { color: var(--danger); font-weight: 800; }
.boost-zero { color: var(--text-sub); }
.sym-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 10px; }
.sym-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; }
.sym-card__name { font-size: .76rem; font-weight: 700; margin-bottom: 7px; color: var(--text-sub); }
.sym-card .inp { margin-top: 4px; }
.sym-card__result { margin-top: 6px; font-size: .86rem; font-weight: 700; color: var(--accent); }

/* ── 앱 설치 안내 배너 ──
   ★ 화면 위에 "띄우는"(position:fixed) 방식은 그만뒀다. 띄우면 그 밑 내용과
     겹치지 않게 하려고 top 값을 직접 계산해야 하는데, 그 계산이 배너 높이가
     바뀔 때마다(스누즈 버튼 줄바꿈, 배너 2개 겹침 등) 틀어져서 캐릭터 카드
     목록과 계속 겹쳤다(실제로 반복 제보됨).
     대신 .content 맨 위에 있는 "평범한 블록"으로 둔다. 배너가 있으면 그만큼
     자동으로 아래 내용이 밀리고, 없으면(display:none) 자리도 없다. 계산 없이
     항상 맞는다. */
/* ★ "일주일간 보지 않기"를 예전엔 position:absolute로 우상단에 얹었다. absolute는
   layout에서 자기 자리를 차지하지 않으므로, 확인/닫기 줄이 좁아져 두 줄로 접히면
   그 위에 그냥 겹쳐 보였다(실제로 겹침 반복 제보). 겹칠 자리 자체를 없애려면
   스누즈를 진짜 한 줄로 넣어야 한다 — 그래서 배너를 세로로 쌓아(column) 스누즈를
   위쪽 독립된 줄로 두고, 아이콘·문구·버튼은 그 아래 별도 줄(.pwa-install__row)에
   둔다. 배너가 필요한 만큼 위아래로 늘어나며 절대 겹치지 않는다. */
/* fixed로 카드 목록 위에 덮어씌우는 느낌을 원해서 되돌렸다. 예전에 겹침으로
   문제였던 건 이 "덮어씌움" 자체가 아니라 배너 안쪽 글자(스누즈/확인/닫기)끼리
   겹치던 것이었고, 그건 위의 __row/__info/__actions 구조로 이미 해결됐다.
   사이드바까지 포함한 전체 폭이라, 헤더와 같은 좌우 여백(24px, 좁은 화면은
   14px)을 줘서 카드 목록 좌우 끝과 줄을 맞춘다. */
.top-banners {
  position: fixed; top: var(--top-h); left: 0; right: 0; z-index: 50;
  display: flex; flex-direction: column;
  padding: 10px 24px 0;
}
@media (max-width: 520px) { .top-banners { padding: 8px 14px 0; } }
/* 위에서 스르륵 떨어지는 느낌 — 배너가 새로 뜰 때마다 재생되게 애니메이션은
   .open이 막 붙는 순간에만 건다(JS에서 opening 클래스를 잠깐 얹었다 뗀다). */
@keyframes pwaInstallDrop {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.pwa-install {
  display: none;
  flex-direction: column;
  margin: 0 0 14px;
  padding: 14px;
  background: var(--bg2); border: 1px solid var(--border-hl);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  gap: 6px;
}
.pwa-install.open { display: flex; }
.pwa-install.opening { animation: pwaInstallDrop .28s ease-out; }
/* 문구 줄(.pwa-install__info)과 버튼 줄(.pwa-install__actions)을 아예 분리한다.
   한 줄에 같이 두면 버튼 높이에 맞춰 문구가 눌리는데, 따로 두면 문구가
   자기 줄 안에서 독립적으로 세로 중앙(그냥 한 줄이라 자연히 중앙)에 온다. */
.pwa-install__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pwa-install__info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.pwa-install__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.pwa-install__icon { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.pwa-install__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pwa-install__txt b { font-size: .9rem; font-weight: 900; color: var(--text); }
.pwa-install__txt span { font-size: .76rem; color: var(--text-sub); line-height: 1.35; }
.pwa-install .sbtn { flex: none; }
.pwa-install__close { color: var(--text-dim); }
/* 배너 안에서는 주 버튼도 그림자를 빼서 닫기 버튼과 같은 평면으로 맞춘다.
   좁은 배너 안에서 혼자 떠 보이면 어색하다. */
.pwa-install .sbtn--primary { box-shadow: none; }
.pwa-install .sbtn--primary:hover { box-shadow: none; transform: none; }
/* 문장 안에 들어가는 공유 버튼 모양. 글자 크기·색을 그대로 따라가게 둔다 */
.pwa-glyph {
  width: 1em; height: 1em; vertical-align: -0.15em;
  margin: 0 1px; color: var(--text);
}
/* 좁은 화면에서는 버튼을 아래 줄로 내리고, 아이콘과 글씨는 같은 줄에 둔다.
   ★ 글씨 영역에 min-width가 꼭 있어야 한다. flex-basis가 0이면 "폭 0까지 줄이면
     한 줄에 다 들어간다"고 계산해서 줄바꿈이 일어나지 않고, 대신 글씨 영역이
     40px대로 짓눌려 글자가 세로로 쪼개진다(실제로 그렇게 깨졌었다). */
@media (max-width: 520px) {
  /* 스누즈는 이제 자기 줄이 따로 있어 겹칠 일이 없다. 좁을 때는 문구 줄
     (.pwa-install__info) 아래로 버튼 줄(.pwa-install__actions)을 내린다. */
  .pwa-install__row { flex-wrap: wrap; }
  .pwa-install__info { flex: 1 1 100%; min-width: 0; }
  .pwa-install__txt { min-width: 150px; }
  .pwa-install__actions { flex: 1 1 100%; justify-content: flex-end; white-space: nowrap; }
}
/* 홈 화면 앱으로 실행 중이면 설치 안내는 의미가 없다 */
@media (display-mode: standalone) { .pwa-install { display: none !important; } }

/* ── MODAL ── */
.overlay {
  display: none; position: fixed; inset: 0;
  background: var(--panel-veil);
  
  z-index: 1000; align-items: center; justify-content: center;
}
.overlay.open { display: flex; }
.modal {
  background: var(--bg2);
  border: 1px solid var(--border-hl);
  border-radius: var(--radius-lg);
  width: min(520px,95vw);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  animation: modalIn .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalIn { from { opacity:0; transform:translateY(14px) scale(.97) } to { opacity:1; transform:none } }
.modal--sm { width: min(360px,95vw); }
.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.modal__title { font-size: .98rem; font-weight: 800; color: var(--text); }
.modal__close {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); transition: .15s;
}
.modal__close:hover { background: var(--danger-l); color: var(--danger); }
.modal__body {
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
  max-height: 70vh; overflow-y: auto;
}
.modal__foot {
  padding: 14px 22px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--bg3);
  /* 버튼 글자가 길면(예: "다음 업데이트까지 보지 않기") 좁은 화면에서 한 글자씩
     세로로 쪼개진다. 줄바꿈을 허용해 버튼째로 아랫줄로 내려가게 한다. */
  flex-wrap: wrap;
}
.modal__foot .sbtn { white-space: nowrap; }
/* ── 메이플 캘린더 ── */
.mc-panel {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.mc-sec { display: flex; flex-direction: column; gap: 10px; }
.mc-sec__label { font-size: 1.06rem; font-weight: 900; color: var(--text); }
.mc-sec__sub { font-size: .84rem; font-weight: 700; color: var(--text-dim); margin-left: 8px; }

/* 지금 보고 있는 캐릭터 — 누르면 선택 모달이 열린다 */
.mc-topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.mc-charchip {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 10px;
  background: var(--bg3); border: 2px solid var(--border);
  border-radius: var(--radius-lg); transition: .15s;
}
.mc-charchip:hover { border-color: var(--primary); background: rgba(var(--hue),.12); }
.mc-charchip__face {
  width: 62px; height: 62px; flex-shrink: 0;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.mc-charchip__face img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mc-charchip__body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.mc-charchip__name { font-size: 1.1rem; font-weight: 900; color: var(--text); }
.mc-charchip__sub { font-size: .8rem; font-weight: 700; color: var(--text-dim); }
.mc-allbtn { margin-left: auto; }   /* 전체 보기는 오른쪽 끝에 */
.sbtn.is-off { opacity: .4; cursor: default; }
/* 전체 보기 중에는 "기록할 캐릭터"가 잠시 물러난다는 걸 눈으로 알려준다 */
.mc-charchip.dim { opacity: .55; }

/* 전체 보기의 날짜 모달 — 캐릭터별 묶음 */
.mc-allblock {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.mc-allblock:last-of-type { padding-bottom: 0; border-bottom: none; }
.mc-allblock__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.02rem; font-weight: 900; color: var(--text);
}
.mc-allblock__head img { width: 34px; height: 34px; object-fit: contain; }
.mc-allblock__items { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-allblock__item {
  width: 40px; height: 40px; object-fit: contain; padding: 4px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm);
}

/* 캐릭터 고르기 */
.mc-chars { display: flex; flex-wrap: wrap; gap: 12px; }
.mc-char {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 140px; padding: 14px 8px;
  background: var(--bg3); border: 2px solid transparent;
  border-radius: var(--radius-sm); transition: .15s;
}
.mc-char:hover { border-color: var(--border-hl); }
.mc-char.sel { border-color: var(--primary); background: rgba(var(--hue),.14); }
.mc-char__face {
  width: 110px; height: 110px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.mc-char__face img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mc-char__name {
  font-size: .92rem; font-weight: 800; color: var(--text-sub);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 날짜 모달 — 일정과 아이템을 여기서 기록한다 */
.modal.modal--mc-day { width: min(880px, 95vw); }
.modal--mc-day .modal__body { max-height: 78vh; gap: 22px; }
.modal__title.modal__title--mc { font-size: 1.3rem; font-weight: 900; letter-spacing: -.3px; }

/* 일정 / 아이템 탭 */
.mc-tabs {
  display: flex; gap: 4px; padding: 0 22px;
  background: var(--bg3); border-bottom: 1px solid var(--border);
}
.mc-tab {
  padding: 12px 20px; margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  font-size: 1rem; font-weight: 800; color: var(--text-dim);
  transition: .15s;
}
.mc-tab:hover { color: var(--text-sub); }
.mc-tab.sel { color: var(--primary); border-bottom-color: var(--primary); }
/* 안 보이는 탭은 완전히 빼서 모달 높이에 영향을 주지 않게 한다 */
.mc-pane { display: none; flex-direction: column; gap: 12px; }
.mc-pane.on { display: flex; }
.mc-sec__label--sub {
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: .98rem;
}

/* 달력 */
/* 좁은 화면에서 4개가 한 줄에 안 들어가면 "이번 달로 이동"이 세로로 짓눌리므로 줄바꿈을 허용한다 */
.mc-cal__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mc-cal__title { font-size: 1.16rem; font-weight: 900; min-width: 8.5em; text-align: center; }
#mcToday { white-space: nowrap; margin-left: auto; }
@media (max-width: 768px) {
  #mcToday { margin-left: 0; }
}
.mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mc-dow {
  text-align: center; padding: 5px 0;
  font-size: .84rem; font-weight: 800; color: var(--text-dim);
}
.mc-dow.sun, .mc-cell.sun .mc-cell__d { color: var(--danger); }
.mc-dow.sat, .mc-cell.sat .mc-cell__d { color: #6ea8ff; }
.mc-cell {
  aspect-ratio: 1 / 1; padding: 5px; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  background: var(--bg3); border: 2px solid transparent;
  border-radius: var(--radius-sm); text-align: left; transition: .12s;
}
.mc-cell--pad { background: transparent; pointer-events: none; }
.mc-cell:hover { border-color: var(--border-hl); }
.mc-cell.today { background: rgba(var(--hue),.10); }
.mc-cell.sel { border-color: var(--primary); }
.mc-cell__d { font-size: .84rem; font-weight: 800; color: var(--text-sub); flex-shrink: 0; }
/* 일정 라벨은 날짜 바로 밑에서부터 위→아래로 채운다 */
.mc-cell__evs { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; }
.mc-cell__ev {
  display: block; padding: 1px 5px; border-radius: 4px;
  font-size: .68rem; font-weight: 800; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* margin-top:auto → 아이템은 라벨이 몇 개든 항상 칸 맨 아래에 붙는다.
   nowrap이 핵심 — flex-shrink:0이라 줄바꿈되는 순간 그만큼 칸 높이를 뚫고 나가
   overflow:hidden에 통째로 잘려 아이템이 아예 안 보였다. 개수는 mcalendar.js가
   칸 폭을 재서 한 줄에 들어갈 만큼만 그리고, 나머지는 +N으로 접는다. */
.mc-cell__icons {
  display: flex; flex-wrap: nowrap; gap: 2px; align-items: center;
  margin-top: auto; flex-shrink: 0; overflow: hidden;
}
.mc-cell__icons img { width: 21px; height: 21px; object-fit: contain; flex-shrink: 0; }
.mc-cell__more { font-size: .7rem; font-weight: 800; color: var(--text-dim); }

/* ── 칸이 좁을 때(압축 모드) ──
   모바일뿐 아니라 전체 보기로 창을 좁혔을 때도 걸린다. 칸 폭이 92px 미만이면
   mcalendar.js가 .mc-grid--compact를 붙인다. 아이콘 줄바꿈을 막고(줄바꿈되면
   flex-shrink:0이라 칸을 뚫고 나가 잘린다) 일정은 글자 대신 색 막대만 남긴다.
   일정 내용은 칸을 눌러 여는 모달과 title 툴팁에 그대로 있다. */
/* 43px 칸의 세로 예산은 34.6px뿐 — 날짜 13 + 막대 4 + 아이콘 14 + 간격 2 = 33으로 맞춘다.
   14px면 360px 화면에서도 아이콘이 한 줄에 2개 들어간다(15px면 1개). */
.mc-grid--compact .mc-cell { gap: 1px; padding: 4px; }
.mc-grid--compact .mc-cell__d { font-size: .78rem; line-height: 1; }
.mc-grid--compact .mc-cell__icons { flex-wrap: nowrap; gap: 2px; }
.mc-grid--compact .mc-cell__icons img { width: 14px; height: 14px; }
.mc-grid--compact .mc-cell__more { font-size: .62rem; }
/* 색 막대는 세로로 쌓으면 개수만큼 넘치므로 가로로 나눠 한 줄에 담는다.
   flex-shrink:0이 없으면 칸이 빠듯할 때 이 줄이 0으로 짓눌려 막대가 사라진다. */
.mc-grid--compact .mc-cell__evs {
  flex-direction: row; align-items: center; gap: 2px;
  flex-shrink: 0; height: 4px;
}
.mc-grid--compact .mc-cell__ev {
  flex: 1 1 0; min-width: 0; height: 4px;
  padding: 0; font-size: 0; line-height: 0; border-radius: 2px;
}
.mc-grid--compact .mc-cell__evs .mc-cell__more { display: none; }

/* 일정 입력 — 설명 → 시간 → 반복 → 색 → 버튼 순으로 한 항목씩 아래로 쌓는다.
   한 줄에 몰아넣으면 좁은 화면에서 서로 밀려 글씨가 잘린다. */
.mc-ev-form { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mc-ev__text { width: 100%; }
.mc-ev__time { display: flex; align-items: center; gap: 6px; }
.mc-ev__ampm { width: 5.4em; }
.mc-ev__num { width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; }
.mc-ev__colon { font-weight: 900; color: var(--text-dim); }
.mc-ev__color { display: flex; align-items: flex-end; gap: 10px; }
.mc-ev__btns { display: flex; gap: 8px; }
.mc-ev__add, .mc-ev__cancel { flex-shrink: 0; }
.mc-ev__repeat {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: .92rem; font-weight: 700; color: var(--text-sub);
}
.mc-ev__repeat input { accent-color: var(--primary); width: 16px; height: 16px; }
.mc-ev__repeat b { color: var(--text-dim); font-weight: 800; }

/* 색 고르기 — 위 사각형은 채도/명도, 아래 띠는 색상 */
.mc-pick { display: flex; flex-direction: column; gap: 6px; width: 150px; }
.mc-pick__sv {
  --mc-hue: #ff0000;
  position: relative; height: 76px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); cursor: crosshair; touch-action: none;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, var(--mc-hue));
}
.mc-pick__hue {
  position: relative; height: 13px; border-radius: 999px;
  border: 1px solid var(--border); cursor: pointer; touch-action: none;
  background: linear-gradient(to right,
    #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.mc-pick__dot, .mc-pick__hdot {
  position: absolute; pointer-events: none;
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55);
}
.mc-pick__dot { width: 12px; height: 12px; transform: translate(-50%, -50%); }
.mc-pick__hdot { width: 13px; height: 13px; top: 50%; transform: translate(-50%, -50%); }
.mc-pick__out { display: flex; flex-direction: column; gap: 6px; }
.mc-pick__prev {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.mc-pick__val { font-size: .78rem; font-weight: 700; color: var(--text-sub); white-space: nowrap; }

.mc-logrow__chip { width: 14px; height: 26px; border-radius: 4px; flex-shrink: 0; }
.mc-logrow__time { font-size: .86rem; font-weight: 800; color: var(--text-sub); flex-shrink: 0; }

/* 아이템 고르기 */
.mc-cat { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.mc-cat__title { font-size: .92rem; font-weight: 800; color: var(--text-sub); }
.mc-itemlist { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-item { position: relative; display: block; line-height: 0; }
.mc-item img {
  width: 46px; height: 46px; object-fit: contain; padding: 5px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); transition: .12s;
}
.mc-item:hover img { border-color: var(--primary); background: rgba(var(--hue),.14); }
.mc-item:active img { transform: scale(.93); }
/* 이름은 body 직속 .mc-tip이 대신 띄운다 (모달 스크롤 영역에 잘리지 않게) */
.mc-item__name { display: none; }

.mc-tip {
  position: fixed; left: 0; top: 0; z-index: 2000;
  padding: 6px 12px; border-radius: 8px;
  background: var(--bg2); border: 2px solid var(--border-hl, var(--primary));
  box-shadow: 0 5px 18px rgba(0,0,0,.5);
  font-size: .92rem; font-weight: 800; line-height: 1.25; color: var(--text);
  white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .13s;
}
.mc-tip.on { opacity: 1; visibility: visible; }

/* 추가됐다는 걸 알려주는 토스트 */
.mc-toasts {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  z-index: 2100; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.mc-toast {
  padding: 11px 22px; border-radius: 999px;
  background: var(--bg2); border: 2px solid var(--primary);
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
  font-size: .98rem; font-weight: 800; color: var(--text);
  white-space: nowrap;
  animation: mcToastIn .18s cubic-bezier(.2,.8,.2,1);
}
.mc-toast.out { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
@keyframes mcToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 기록 목록 */
.mc-log { display: flex; flex-direction: column; gap: 6px; }
.mc-logrow {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.mc-logrow__item { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.mc-logrow__name { font-size: .94rem; font-weight: 700; flex: 1; min-width: 0; }
.mc-logrow__char {
  display: flex; align-items: center; gap: 6px;
  font-size: .86rem; font-weight: 700; color: var(--text-sub);
}
.mc-logrow__char img { width: 26px; height: 26px; object-fit: contain; }
.mc-logrow__del, .mc-logrow__edit {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); transition: .15s; font-size: .9rem;
}
.mc-logrow__del:hover { background: var(--danger-l); color: var(--danger); }
.mc-logrow__edit:hover { background: rgba(var(--hue-l),.15); color: var(--primary); }
/* 지금 폼에 올라와 수정 중인 항목이라는 걸 표시 */
.mc-logrow--editing { border-color: var(--primary); background: rgba(var(--hue-l),.08); }

@media (max-width: 768px) {
  .mc-cell { padding: 3px; }
  .mc-cell__icons img { width: 14px; height: 14px; }
  .mc-cell__ev { font-size: .58rem; padding: 0 3px; }
  .mc-item img { width: 40px; height: 40px; }
  .mc-ev-form { gap: 10px; }
  .mc-ev__text { flex-basis: 100%; }
}

/* ── 첫 방문 공지 카드 ── */
.modal__title.modal__title--notice { font-size: 1.4rem; font-weight: 900; letter-spacing: -.3px; }
.notice-day {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.notice-day:last-child { padding-bottom: 0; border-bottom: none; }
.notice-item { display: flex; flex-direction: column; gap: 5px; }
.notice-item__head { font-size: 1.06rem; font-weight: 900; color: var(--text); }
.notice-item__desc { font-size: .95rem; line-height: 1.6; color: var(--text-sub); }
.notice-date { font-size: .88rem; font-weight: 800; color: var(--text-dim); }

.job-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(66px,1fr)); gap: 6px; max-height: 210px; overflow-y: auto; padding: 2px; }
.job-grid--hidden { display: none; }
.job-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border-radius: var(--radius-sm);
  background: var(--bg3); cursor: pointer;
  font-size: .66rem; color: var(--text-sub); text-align: center; transition: .15s;
  border: 1px solid transparent;
}
.job-item:hover { border-color: var(--primary); color: var(--primary); }
.job-item.sel { background: rgba(var(--hue-l),.15); border-color: var(--primary); color: var(--primary); }
.job-item img { width: 38px; height: 38px; object-fit: contain; border-radius: 7px; }

/* 카드 배경 선택 그리드 — 파일이 없는 번호는 onerror 체인이 타일 자체를
   지워버리므로, 실제로 채워 넣은 개수만큼만 자동으로 줄어든다. */
.cardbg-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(92px,1fr)); gap: 8px; max-height: 320px; overflow-y: auto; padding: 2px; }
.cardbg-opt {
  aspect-ratio: 1/1; border-radius: var(--radius-sm);
  border: 2px solid var(--border); background: var(--bg3); overflow: hidden;
  cursor: pointer; padding: 0; transition: border-color .15s;
}
.cardbg-opt:hover { border-color: var(--border-hl); }
.cardbg-opt.sel { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.cardbg-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cardbg-opt--none { display: flex; align-items: center; justify-content: center; font-size: .68rem; color: var(--text-sub); font-weight: 700; }

/* ── LOOKUP ── */
.lookup-box {
  background: var(--lookup-bg);
  border: 1px solid rgba(var(--hue-l),.25);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.lookup-box__title { font-size: .8rem; font-weight: 800; color: var(--text); }
.region-toggle { display: flex; gap: 0; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--border); align-self: flex-start; }
.region-toggle__btn { padding: 5px 18px; font-size: .78rem; font-weight: 700; background: transparent; color: var(--text-sub); border: none; border-right: 1px solid var(--border); cursor: pointer; transition: all .15s; }
.region-toggle__btn:last-child { border-right: none; }
.region-toggle__btn.active { background: var(--primary); color: #fff; }
.region-toggle__btn:hover:not(.active) { background: rgba(var(--hue),.1); color: var(--text); }

.lookup-box__row { display: flex; gap: 8px; }
.lookup-box__row .inp { flex: 1; }
.lookup-box__row .sbtn { flex-shrink: 0; padding: 9px 16px; }
.lookup-box__result:empty { display: none; }
.char-manual-sep { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; font-size: .78rem; color: var(--text-sub); }
.char-manual-sep::before, .char-manual-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.char-manual .job-grid { margin-top: 8px; }
.lookup-readonly { display: grid; grid-template-columns: 1fr 100px 1fr; gap: 10px; }
.lk-err { font-size: .8rem; color: var(--danger); font-weight: 600; }
.lk-load { font-size: .8rem; color: var(--text-sub); }
.lk-card {
  display: flex; gap: 12px; align-items: center;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.lk-card__av { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.lk-card__info { display: flex; flex-direction: column; gap: 2px; }
.lk-card__name { font-size: .9rem; font-weight: 800; color: var(--text); }
.lk-card__job {
  font-size: .7rem; font-weight: 700; color: var(--primary);
  background: rgba(var(--hue-l),.15); padding: 2px 8px;
  border-radius: 99px; margin-left: 4px;
  border: 1px solid rgba(var(--hue-l),.25);
}
.lk-card__meta { font-size: .74rem; color: var(--text-sub); }
.lk-card__exp { font-size: .72rem; color: var(--text-sub); font-weight: 700; }

/* ── 캐릭터 정보 패널 ── */
.ci-empty {
  text-align: center; color: var(--text-sub); padding: 60px;
  font-size: .92rem; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.ci-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: stretch; }
.ci-layout > .ci-card:first-child { align-self: stretch; }
.ci-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
/* 금색 테두리 — 활성 캐릭터 강조 */
.ci-card--gold { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow-md); }
.ci-portrait {
  position: relative; width: 100%; aspect-ratio: 3/4;
  background: url('images/icons/bg.webp') center/cover, linear-gradient(160deg,#140d2e 0%,#08051a 100%);
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.ci-portrait__img { width: 115%; height: 115%; object-fit: contain; object-position: bottom center; margin-bottom: -4px; }
.cg-char-img { width: 130%; object-fit: contain; object-position: bottom center; display: block; }
.ci-portrait__ph { display: none; color: var(--text-dim); font-size: .86rem; font-weight: 800; letter-spacing: 1px; }
.ci-portrait--noimg .ci-portrait__ph { display: block; }
/* min-width:0 이 없으면 긴 직업명이 칸을 밀어내 카드 밖으로 잘려 나간다 */
.ci-card__body { padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ci-card__nameline { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.ci-card__nameline > div { min-width: 0; }
/* 직업 일러스트는 투명 배경 → 뒤에 박스가 보이지 않도록 배경 없음
   카드 폭(cqw) 기준으로 크기를 잡아 카드가 커지면 아이콘도 함께 커진다 */
.ci-jobicon { width: clamp(34px, 13cqw, 64px); height: clamp(34px, 13cqw, 64px); object-fit: contain; border-radius: 9px; background: transparent; flex-shrink: 0; }
.ci-card__name { font-size: clamp(.9rem, .68rem + 2.2cqw, 1.5rem); font-weight: 900; letter-spacing: -.2px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-card__job { font-size: clamp(.68rem, .5rem + 1.1cqw, 1.05rem); color: var(--text-sub); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 7px; flex-wrap: wrap; min-width: 0;
  border-top: 1px solid var(--border); padding-top: 8px;
}
.ci-lv { font-size: clamp(.84rem, .6rem + 1.8cqw, 1.4rem); font-weight: 900; color: var(--accent); text-shadow: 0 0 8px rgba(246,199,68,.35); }
.ci-server { display: flex; align-items: center; gap: 5px; font-size: clamp(.7rem, .5rem + 1.1cqw, 1.05rem); font-weight: 700; color: var(--text-sub); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 원본이 57x62인데 최대 24px이라 38%까지 줄어 있었다. 카드 폭에 비례(cqw)하는 건
   유지하되(좁은 카드에서 글자를 밀지 않게) 하한과 상한을 원본에 가깝게 올린다. */
.ci-servericon { width: clamp(24px, 7.2cqw, 40px); height: clamp(24px, 7.2cqw, 40px); object-fit: contain; }
.ci-main { display: flex; flex-direction: column; gap: 16px; }
.ci-cody img { width: 96px; height: 96px; }
.ci-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 20px 22px;
}
.ci-panel__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.ci-panel__title { font-size: 1rem; font-weight: 900; color: var(--text); }
.ci-panel__sub { font-size: .76rem; color: var(--text-sub); margin-top: 2px; }
.ci-avgs { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; align-items: stretch; }
.ci-avg {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 12px;
  transition: border-color .2s;
  display: flex; flex-direction: column;
}
.ci-avg:hover { border-color: var(--border-hl); }
.ci-avg--hl {
  background: var(--grad); border-color: transparent;
  color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.ci-avg__lbl { font-size: .7rem; font-weight: 700; color: var(--text-sub); }
.ci-avg--hl .ci-avg__lbl { color: rgba(255,255,255,.65); }
.ci-avg__val { font-size: 1.4rem; font-weight: 900; letter-spacing: -.5px; margin-top: 3px; }
.ci-avg__sub { font-size: .66rem; color: var(--text-sub); margin-top: 2px; }
.ci-chart-wrap { position: relative; height: 220px; }
.ci-rank-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .86rem; }
.ci-rank-row:last-child { border-bottom: none; }
.ci-rank-row span { color: var(--text-sub); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-rank-row b { font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* 좌측 카드 하단 랭킹 */
.ci-card__ranks { margin-top: 0; padding: 7px 13px 9px; border-top: 1px solid var(--border); align-self: end; min-width: 0; }
.ci-ranks-title { font-size: .64rem; font-weight: 800; color: var(--text-sub); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.ci-card__ranks .ci-rank-row { padding: 3px 0; font-size: clamp(.72rem, .5rem + 1.4cqw, 1.15rem); }

/* 코디 히스토리 */
.ci-codies { display: flex; flex-wrap: nowrap; gap: 12px; margin-top: 6px; overflow-x: auto; }
.ci-cody { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.ci-cody img { width: 128px; height: 128px; object-fit: contain; background: transparent; border: none; }
.ci-cody span { font-size: .78rem; color: var(--text-sub); }

/* ── TOAST ── */
.toast {
  position: fixed; left: 50%; bottom: 32px;
  transform: translateX(-50%) translateY(24px);
  background: var(--grad); color: var(--on-grad);
  padding: 12px 24px; border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-size: .88rem; font-weight: 700;
  z-index: 2000; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  border: 1px solid rgba(var(--hue-l),.3);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 제네시스 / 데스티니 ── */
.gen-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gen-progress{text-align:left}
.gen-stat-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:600;padding:5px 0;border-bottom:1px solid var(--border);color:var(--text)}
.gen-stat-row b{font-weight:900;color:var(--text)}
.gen-stat-row.accent b{color:var(--accent);font-size:1rem}
.gen-quest-now{margin-top:12px;font-size:.8rem;line-height:1.7;text-align:left;background:var(--bg3);border-radius:var(--radius-sm);padding:9px 12px;color:var(--text)}
.gen-quest-next{color:var(--text-sub);font-size:.76rem}
.gen-sources{display:flex;flex-direction:column}
.gen-src-row{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;padding:8px 0;border-bottom:1px solid var(--border);color:var(--text)}
.gen-src-row b{margin-left:auto;font-weight:900;color:var(--text)}
.gen-src-row.total{border-bottom:none;font-weight:800}
.gen-src-row.total b{color:var(--accent);font-size:1rem}
.gen-src-note{font-size:.72rem;color:var(--text-sub);margin-top:8px;line-height:1.5}
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot-blue{background:var(--primary)}.dot-purple{background:#a380e1}
.gen-config{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ── 해방 설정 카드 ── */
.gen-cfg-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
.gen-cfg-card{
  display:flex;gap:16px;align-items:center;
  background:var(--grad-card);
  border:1.5px solid rgba(var(--hue),.25);
  border-radius:16px;padding:18px;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  transition:.3s;
  position:relative;overflow:hidden;
  /* overflow:hidden인 flex 아이템의 자동 최소폭은 min-content가 아니라 0이라
     min-width을 명시하지 않으면 좁은 화면에서 이미지가 잘릴 정도로 짜부라진다 */
  flex:1 1 180px; min-width:180px;
}
.gen-cfg-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 0% 0%,rgba(246,199,68,.06) 0%,transparent 70%);
  pointer-events:none;
}
.gen-cfg-card--pass{border-color:rgba(246,199,68,.2)}
.gen-cfg-card--pass.on{
  border-color:rgba(246,199,68,.6);
  background-image:linear-gradient(120deg,rgba(246,199,68,.22),rgba(var(--hue),.28),rgba(246,199,68,.22));
  background-size:300% 300%;
  animation:pass-grad 3s ease infinite;
  box-shadow:0 0 32px rgba(246,199,68,.18),0 4px 20px rgba(0,0,0,.5);
}
.gen-cfg-card--pass.on::before{background:radial-gradient(ellipse 100% 80% at 0% 0%,rgba(246,199,68,.15) 0%,transparent 65%)}
@keyframes pass-grad{
  0%  {background-position:0% 50%}
  50% {background-position:100% 50%}
  100%{background-position:0% 50%}
}
.gen-cfg-card__img{width:72px;height:72px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(246,199,68,.3))}
.gen-cfg-card__body{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.gen-cfg-card__title{font-size:.95rem;font-weight:900;color:var(--text);letter-spacing:.3px}
.gen-cfg-card--pass .gen-cfg-card__title{color:var(--text)}
.gen-cfg-card__desc{font-size:.75rem;color:var(--text-sub);font-weight:600}
.gen-cfg-card__fields{display:flex;flex-direction:column;gap:8px}

/* gen-switch 토글 */
.gen-switch{display:flex;align-items:center;gap:8px;font-size:.83rem;cursor:pointer;padding:7px 0;color:var(--text)}
.gen-switch input{width:15px;height:15px;accent-color:var(--primary)}
.gen-pass-toggle{gap:12px;padding:0}
.gen-pass-toggle input{position:absolute;opacity:0;width:0;height:0}
.gen-switch__track{width:42px;height:24px;border-radius:99px;background:var(--bg2);border:1.5px solid var(--border);position:relative;flex-shrink:0;transition:.2s}
.gen-pass-toggle input:checked ~ .gen-switch__track{background:var(--accent);border-color:var(--accent)}
.gen-switch__thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.gen-pass-toggle input:checked ~ .gen-switch__track .gen-switch__thumb{transform:translateX(18px)}
.gen-switch__label{font-size:.82rem;font-weight:800;color:var(--text-sub)}
.gen-pass-toggle input:checked ~ .gen-switch__label{color:var(--accent)}
.gen-cleared{font-size:.7rem;font-weight:700;color:var(--primary);background:var(--primary-l);padding:2px 9px;border-radius:99px;margin-left:6px;border:1px solid rgba(var(--hue-l),.25)}
.gen-bosses{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.gen-boss{display:flex;gap:12px;align-items:stretch;background:var(--bg3);border-radius:var(--radius-sm);padding:10px 14px;border:1.5px solid transparent;transition:.15s}
.gen-boss .boss-thumb{width:64px;height:64px;border-radius:8px;overflow:hidden;flex-shrink:0;align-self:center}
.gen-boss .boss-thumb img{width:100%;height:100%;object-fit:cover;filter:none}
.gen-boss.on{border-color:var(--success);background:var(--success-l)}
.gen-boss__body{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.gen-boss__top{display:flex;align-items:center;gap:6px}
.gen-boss__name{font-size:.9rem;font-weight:700;color:var(--text)}
.gen-boss__diff{width:100%;font-size:.76rem;padding:4px 7px}
.gen-boss__btm{display:flex;align-items:center;gap:8px;margin-top:auto}
.gen-boss__toggle{padding:5px 12px;border-radius:var(--radius-pill);font-size:.78rem;font-weight:800;white-space:nowrap;background:var(--bg2);color:var(--text-sub);box-shadow:var(--shadow)}
.gen-boss__toggle.on{background:var(--success);color:#000}

/* ── 해방 계산기 새 레이아웃 ── */
/* minmax(0,1fr) 필수 — 1fr만 쓰면 트랙 최소폭이 auto(콘텐츠 기준)라
   왼쪽 콘텐츠가 넓을 때 그리드 자체가 오른쪽으로 넘친다 */
.gen-main-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.gen-left{display:flex;flex-direction:column;gap:14px}
.gen-inputs{display:flex;flex-direction:column;gap:0}
/* flex-wrap 없으면 768~900px대에서 두 카드가 짜부라짐 → 공간 부족 시 줄바꿈 */
.gen-input-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.gen-input-row .field{flex:1;display:flex;flex-direction:column;gap:5px}
.gen-pass-field{flex:0 0 auto!important}
.gen-inp{font-size:.88rem!important;height:38px}
.gen-pass-field .gen-switch{margin-top:2px}

/* 보스 카드 새 구조 */
.gen-boss__row2{display:flex;align-items:center;gap:6px}
.gen-boss__diff{flex:1;font-size:.76rem;padding:4px 7px}
.gen-boss__row3{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px}
.gen-boss__ck{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--text-sub);cursor:pointer;user-select:none}
.gen-boss__ck input{width:15px;height:15px;accent-color:var(--success);cursor:pointer;flex-shrink:0}
.gen-boss__trace{font-size:.82rem;font-weight:800;color:var(--text-dim)}
.gen-boss__trace.on{color:var(--success)}

/* 우측 통계 패널
   .card{position:relative}가 이후에 선언되어 있어 같은 클래스 하나짜리
   명세도로는 소스 순서상 sticky를 덮어써 버린다 → 두 클래스 선택자로 명세도를 올림 */
.gen-stat-panel.card{display:flex;flex-direction:column;position:sticky;top:70px}
.gen-stat2{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:600;padding:7px 0;border-bottom:1px solid var(--border);color:var(--text-sub)}
.gen-stat2 b{font-weight:900;color:var(--text);font-size:.88rem}
.gen-stat2-div{height:8px}
.gen-date-wrap{margin-top:20px;text-align:center;background:var(--bg3);border-radius:var(--radius-sm);padding:14px 12px}
.gen-date-label{font-size:.78rem;font-weight:700;color:var(--text-sub);margin-bottom:6px}
.gen-date-big{font-size:1.7rem;font-weight:900;color:var(--primary);letter-spacing:.5px}
.gen-res-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:600;padding:7px 0;border-bottom:1px solid var(--border);color:var(--text-sub)}
.gen-res-row b,.gen-res-val{font-weight:900;color:var(--text);font-size:.88rem}
.gen-res-total{color:var(--text)!important;font-size:.88rem!important}
.gen-res-total b{color:var(--primary)!important;font-size:.95rem!important}
.gen-res-accent b{color:var(--gold)!important}
.gen-res-divider{height:10px}
.gen-res-section{}

/* ── 스타포스 내 메소 입력 ── */
.sf-chart-card { display: flex; flex-direction: column; }
.sf-chart-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sf-chart-lbl { font-size: .8rem; font-weight: 700; color: var(--text-sub); }
.sf-chart-avg { font-size: 1rem; font-weight: 800; color: var(--primary-light, #c4b5fd); }
.sf-chart-box { position: relative; width: 100%; height: 320px; }
.sf-chart-box canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.sf-my-meso{margin-top:14px;padding:12px 14px;background:var(--bg3);border-radius:var(--radius-sm);border:1px solid var(--border)}
.sf-bidir{display:flex;align-items:flex-end;gap:10px}
.sf-bidir__field{display:flex;flex-direction:column;gap:4px;flex:1}
.sf-bidir__lbl{font-size:.75rem;font-weight:700;color:var(--text-sub)}
.sf-bidir__inp{width:100%;box-sizing:border-box}
.sf-bidir__arrow{font-size:1.2rem;color:var(--text-sub);padding-bottom:6px;flex-shrink:0}
.sf-my-result{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.9rem;font-weight:700}
.sf-my-result__sep{color:var(--text-sub)}
.sf-my-result__meso{color:var(--text)}
.sf-my-result__tag{padding:4px 12px;border-radius:99px;font-size:.85rem;font-weight:800;background:var(--bg2);color:var(--text-sub)}
.sf-my-result__tag.lucky{background:var(--success-l);color:var(--success)}
.sf-my-result__tag.unlucky{background:rgba(240,80,96,.15);color:var(--danger)}

/* ── utils ── */
.mt8  { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.stat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 13px; font-size: .8rem; font-weight: 700;
}

/* ── 캐릭터 그리드 (캐릭터 정보 탭) ── */
/* 가로형 카드 2열 고정 → 캐릭터가 늘면 아래로 행이 추가된다.
   카드는 창 너비를 꽉 채우며, 일러스트가 정사각 비율이라 폭이 커지면 높이도 함께 커진다. */
.cg-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
  gap:10px; padding:8px 0 12px;
  max-width: 1830px; /* 카드 폭이 무한정 안 늘어나게 4열까지만 — 넘는 공간은 우측 여백으로 남긴다(가운데 정렬 X) */
}
.cg-card {
  position: relative;
  background: var(--panel-veil);
  border: 1px solid rgba(var(--hue),.2);
  border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  /* 행을 명시해야 일러스트의 grid-row:1/-1 이 두 행을 걸친다 */
  /* 일러스트 칼럼은 240px에서 상한 — 초광폭 화면에서 카드가 무한정 커지지 않도록 */
  display: grid; grid-template-columns: minmax(130px, min(36%, 240px)) 1fr; grid-template-rows: 1fr auto; align-items: stretch;
  transition: border-color .18s;
  /* 카드 폭 기준 컨테이너 쿼리 단위(cqw) → 카드가 커지면 글씨/아이콘도 함께 커진다 */
  container-type: inline-size;
}
.cg-card:hover { border-color:rgba(var(--hue-l),.5); }
/* 카드 이미지로 저장 버튼 — 평소엔 옅게, 카드 hover 시에만 또렷하게 (카드 정보를 안 가리도록) */
.cg-card__save {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  padding: 3px 8px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff; font-size: .68rem; font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity .15s, background .15s;
}
.cg-card:hover .cg-card__save { opacity: 1; }
.cg-card__save:hover { background: rgba(var(--hue),.7); }
.cg-card__save:disabled { opacity: .6; cursor: default; }
.cg-card--active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
/* 일러스트는 왼쪽에서 카드 전체 높이를 차지 */
/* 정사각 비율 → 카드가 넓어지면 높이도 따라 커진다 */
.cg-portrait {
  grid-row:1 / -1; width:100%; aspect-ratio:1/1;
  background: transparent;
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden; position:relative; flex-shrink:0;
}
/* 넥슨 캐릭터 이미지는 96x96 원본 → 박스 너비에 맞춰 그려진다.
   확대(transform)는 위쪽이 잘리므로 쓰지 않고 박스 크기로 키운다.
   바닥 여백은 margin-bottom으로 준다 — padding(부모)은 width/height %의 기준이
   갈라져 캐릭터가 작아졌고, 3-value object-position은 문법 무효라 무시됐음
   (넥슨 아바타가 96x96 정사각이라 애초에 object-position이 먹을 레터박스도 없었음). */
.cg-portrait img:not(.portrait-bg) { width:92%; height:92%; object-fit:contain; object-position:bottom center; margin-bottom:1%; position:relative; z-index:1; }
/* 기본 이미지(default.png)는 넥슨 스크린샷과 비율이 달라 실제 캐릭터보다 크게 보임 → 축소해서 중앙 배치 */
.cg-portrait--no img:not(.portrait-bg) { width: 92%; height: 92%; object-position: bottom center; margin-bottom: 1%; }
.cg-portrait--no .cg-noimg { display:flex; }
.cg-noimg { display:none; position:absolute; inset:0; align-items:center; justify-content:center; font-size:.7rem; color:var(--text-sub); }
.cg-meta img { width:13px; height:13px; object-fit:contain; }
.cg-rank { font-size:.75rem; font-weight:700; color:var(--accent); margin-top:2px; }
.cg-btns { display:flex; gap:5px; padding:6px 10px 9px; margin-top:auto; }
.cg-head-icon { width:42px; height:42px; object-fit:contain; flex-shrink:0; }

/* ── 버스 5% 참조 패널 ── */
.bus-panel {
  background: var(--panel-veil);
  border: 1px solid rgba(var(--hue),.25);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.bus-panel__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: rgba(var(--hue),.1);
  border-bottom: 1px solid rgba(var(--hue),.15);
}
.bus-panel__title { font-size: .95rem; font-weight: 800; color: var(--accent); }
.bus-panel__sub   { font-size: .75rem; color: var(--text-sub); }
.bus-table-wrap   { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 빈 상태 */
.bus-empty {
  padding: 20px 18px;
  color: var(--text-sub); font-size: .82rem; text-align: center;
}
.bus-empty b { color: var(--text); }

/* 테이블 */
.bus-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.bus-tbl thead tr { background: rgba(255,255,255,.03); }
.bus-tbl th {
  padding: 8px 14px; text-align: left;
  font-size: .73rem; font-weight: 700;
  color: var(--text-sub); letter-spacing: .4px;
  border-bottom: 1px solid rgba(var(--hue),.15);
}
.bus-tbl td { padding: 7px 14px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.bus-tbl tr:last-child td { border-bottom: none; }
.bus-tbl tr:hover td { background: rgba(255,255,255,.03); }
.bus-boss-name { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.bus-boss-img  { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.bus-pct5 { text-align: right; color: var(--danger); font-variant-numeric: tabular-nums; font-size: .9rem; }
.bus-tbl th.bus-pct5 { text-align: right; }

/* 버스 패널 난이도 셀렉트 */
.bus-diff-sel {
  background: var(--bg2); border: 1px solid rgba(var(--hue),.3);
  color: var(--text); border-radius: 6px; padding: 3px 8px; font-size: .78rem;
  font-family: inherit; cursor: pointer;
}
.bus-diff-sel option { background: var(--bg2); color: var(--text); }

/* 버스 패널 제거 버튼 */
.bus-remove {
  color: var(--text-sub); font-size: .8rem; padding: 2px 7px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 5px;
  transition: color .15s, border-color .15s;
}
.bus-remove:hover { color: var(--danger); border-color: var(--danger); }

/* 보스 카드 이름줄 (이름 + 토글 버튼) */
.bhp-name-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-bottom: 2px;
}

/* 버스 토글 스위치 (보스 카드 우측) */
.bus-toggle-wrap { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.bus-toggle-input { display: none; }
.bus-toggle-track {
  position: relative; width: 34px; height: 18px;
  background: rgba(255,255,255,.12); border-radius: 9px;
  border: 1px solid rgba(var(--hue),.3);
  transition: background .2s, border-color .2s;
}
.bus-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #6b7280;
  transition: transform .2s, background .2s;
}
.bus-toggle-input:checked + .bus-toggle-track {
  background: rgba(var(--hue),.5); border-color: var(--primary);
}
.bus-toggle-input:checked + .bus-toggle-track .bus-toggle-thumb {
  transform: translateX(16px); background: #fff;
}

/* ── 햄버거 / 드로어 오버레이 (기본: 데스크탑에선 숨김) ── */
#sbBtnSettings { display: none; }
.hamburger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; padding: 6px; border-radius: 8px; flex-shrink: 0; }
.hamburger span { display: block; height: 2px; width: 100%; background: var(--primary); border-radius: 2px; transition: .25s; }
body.sidebar-open .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.sidebar-open .hamburger span:nth-child(2) { opacity: 0; }
body.sidebar-open .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.sidebar-overlay { display: none; }

/* ── 모바일/저성능 환경: 무한 애니메이션 끄기 (버벅임 방지) ── */
@media (hover:none), (max-width:768px), (prefers-reduced-motion:reduce) {
  .sb-nav__item.active, .gen-cfg-card--pass.on { animation: none; }
}

/* ══════════════ 데스크톱 사이드바(340px) + 고정폭 320px 우측 패널 조합에서
   768px보다 넓은 폭(769~~890px대)에서도 좌측 칼럼이 40px대로 짜부라지는
   구간이 있어 minmax(0,1fr)만으로는 부족 — 이 폭에서는 아예 1열로 전환 ══════════════ */
@media (max-width: 920px) {
  .gen-main-layout { grid-template-columns: 1fr; }
  .sf-layout { grid-template-columns: 1fr !important; }
}

/* ══════════════ 모바일 레이아웃 (≤768px) ══════════════ */
@media (max-width: 768px) {
  .hamburger { display: flex; }
  #sbBtnSettings { display: inline-flex; font-size: .76rem; padding: 5px 13px; }
  #headerBtnSettings { display: none; }
  .header { padding: 0 14px; gap: 10px; }
  /* 로고는 폭이 모자라면 줄어들되 말줄임으로 처리 — 우측 초기화/타이머를 밀어내지 않게 */
  .header__logo { min-width: 0; overflow: hidden; }
  /* ★ 예전엔 .header__title 자체(줄 두 개를 담는 flex column)에 nowrap+ellipsis를
     걸었다. 그건 "가로로 한 줄"에만 뜻이 있는 속성이라 세로로 쌓인 줄에는 안 먹혀서
     결국 영문 줄을 통째로 숨기는 걸로 때웠었다. 이제 한글/영문 줄을 각각 감싸서
     그 줄 안에서만 말줄임되게 한다 — 폭이 모자라도 그 줄만 "메이뿌…"처럼 줄고
     둘째 줄은 그대로 남는다. */
  .header__title { font-size: .8rem; min-width: 0; }
  .header__title-kr, .header__title-en { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header__center { gap: 6px; flex-shrink: 0; }
  /* nowrap이 없으면 "초기화"/타이머가 글자 단위로 세로로 쪼개진다 */
  .header__rlabel { display: inline; font-size: .68rem; white-space: nowrap; }
  /* 테마 토글은 헤더 폭을 먹어 로고가 "Byeolni..."로 잘리게 만든다.
     모바일에서는 숨기고 설정 모달의 "화면 테마"에서 고르게 한다. */
  .theme-toggle-wrap { display: none; }
  .theme-toggle__label { display: none; }
  .header__timer { font-size: .76rem; padding: 4px 10px; white-space: nowrap; }
  .header__right .hbtn { padding: 6px 10px; font-size: .72rem; }

  /* 터치 영역 확보 — 라벨로 감싸이지 않아 아이콘 자체를 정확히 눌러야 하는 버튼들.
     보기 크기(글꼴·배경)는 그대로 두고 최소 눌림 영역만 넓힌다. */
  .modal__close { width: 40px; height: 40px; font-size: 1.15rem; }
  .ccbtn { min-height: 34px; padding-left: 12px; padding-right: 12px; }
  .cube-set__del { min-width: 34px; min-height: 34px; padding: 8px; }
  .pm, .pp { min-width: 36px; min-height: 36px; }
  .cg-card__save { min-height: 34px; }

  /* 달력 날짜 칸 키우기 — 375px에서 칸이 40px밖에 안 나와 누르기 힘들었다.
     칸은 정사각형(aspect-ratio)이라 세로만 늘릴 수 없고, min-height를 주면
     폭보다 커져서 칸끼리 겹친다. 결국 좌우 여백에서 폭을 회수하는 수밖에 없어
     패널 여백(18→8)·칸 간격(5→4)을 줄이고 패널을 좌우로 4px씩 내밀어
     40 → 약 45px을 확보한다. */
  .mc-panel { padding: 14px 8px; margin-left: -4px; margin-right: -4px; }
  .mc-grid { gap: 4px; }
  .mc-cell { padding: 4px; }

  /* 압축 모드 전환은 화면 폭이 아니라 칸 크기 기준이라 .mc-grid--compact로 뺐다 */

  /* 그리드 해제 → 콘텐츠 전체폭 */
  .app { display: block; min-width: 0; }
  /* 홈 화면 실행 시 맨 아래 내용이 홈 인디케이터에 가리지 않게 그만큼 더 띄운다 */
  .content { padding: 14px; padding-bottom: calc(14px + var(--safe-bottom)); min-height: 0; }

  /* 사이드바 = 좌측 슬라이드 드로어 */
  .sidebar {
    position: fixed; top: var(--top-h); left: 0; z-index: 90;
    width: 80vw; max-width: 300px; height: calc(100vh - var(--top-h));
    transform: translateX(-100%);
    transition: transform .28s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* 80vw가 300px보다 좁아지는 소형 화면(~<375px)에서는 일러스트를 줄여
     "Arch Mage (Ice, Lightning)" 같은 긴 직업명도 한 줄에 들어가게 한다 */
  .char-card__inner { grid-template-columns: minmax(0, 1fr) 100px; }
  body.sidebar-open .sidebar { transform: translateX(0); }

  /* 드로어 배경 오버레이 */
  .sidebar-overlay {
    display: block; position: fixed; inset: 60px 0 0 0; z-index: 80;
    background: rgba(0,0,0,.55); opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

  /* 캐릭터 그리드 5열 → 2열 */
  /* 모바일은 1열 — 아래로 쌓인다 */
  .cg-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  /* 보스 테이블 → 카드형 */
  .boss-table-wrap { overflow-x: visible; }
  .boss-table { min-width: 0; display: block; }
  .boss-table thead { display: none; }
  .boss-table tbody { display: flex; flex-direction: column; gap: 6px; }
  .boss-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
  }
  .boss-table tr.done { border-color: rgba(var(--hue),.4); }
  .boss-table tr.locked { opacity: .45; }
  .boss-table td { display: block; padding: 0; border: none; }
  .boss-table td:nth-child(1) { grid-column: 1 / -1; }
  .boss-table td:nth-child(2) { grid-column: 1 / -1; }
  .boss-table td:nth-child(3) { grid-column: 1; display: flex; align-items: center; }
  .boss-table td:nth-child(4) { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; }
  .rev-val { font-size: .85rem; }
  .rev-dash { color: var(--text-sub); }

  /* 제네시스/데스티니 2열 → 1열 */
  .gen-main-layout { grid-template-columns: 1fr; }
  .gen-stat-panel.card { position: static; }
  .gen-input-row { flex-direction: column; }
  .gen-input-row .field { flex: none; width: 100%; }
  .gen-cfg-card { width: 100%; }
  .gen-grid { grid-template-columns: 1fr; }

  /* HEXA 2열 → 1열 */
  .hexa-layout { grid-template-columns: 1fr; }

  /* 큐브 결과 모달: 좌우 분할 → 세로 스택 */
  .cube-result-body { flex-direction: column; overflow: visible; }
  .cube-result-left { flex: none; width: 100%; min-width: 0; }
  .cube-result-right { overflow-y: visible; border: none; padding: 0; }
  .modal--cube-result { width: calc(100vw - 32px); max-height: 88dvh; }
  .modal--cube-result .modal__body { overflow-y: auto !important; padding: 20px !important; flex: 1; max-height: none; }
  .cube-result-body { padding: 16px; overflow-y: auto; max-height: calc(88dvh - 56px); }
  .sf-res-item { gap: 8px; }
  .sf-res-val { font-size: .82rem; text-align: right; min-width: 0; word-break: break-all; }
  .sf-res-val.big { font-size: .95rem; }

  /* 추옵·스타포스·큐브·환산 좌우 → 세로 (2~5) */
  .sf-layout { grid-template-columns: 1fr !important; }

  /* 보스HP 카드: 5열 → 2열, 글자 자동 축소 (6) */
  .bhp-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .bhp-card__name { font-size: .9rem; }
  .bhp-active-diff .dpill { font-size: clamp(.55rem, 3.5vw, 1.3rem); padding: 4px 2px; }
  .bhp-phase { font-size: .8rem; }
  .bhp-phase__val { font-size: .88rem; }

  /* 보스 패널 헤더: 캐릭터명 + 결정석 + 초기화 줄바꿈 방지 */
  .boss-panel__head { flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
  .boss-panel__charname { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
  .boss-crystal-count .cc-item { font-size: .88rem; }

  /* 헥사 노드: 이름 1줄 + 현재/목표 같은 줄 */
  .hexa-support-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .hx-node-name { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hexa-support-item span:not(.hx-node-name) { font-size: .72rem; }
  .hexa-support-item .inp { width: 60px; min-width: 0; }

  /* form 라벨 줄바꿈 방지 (스타포스 등) */
  .field__label { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* 캐릭터 정보: ci-layout 1열, ci-avgs 2열 */
  .ci-layout { grid-template-columns: 1fr; }
  .ci-avgs { grid-template-columns: repeat(2, 1fr); }
}

/* 아주 좁은 화면: 캐릭터 그리드 1열 */
@media (max-width: 420px) {
  .cg-grid { gap: 8px; }
}

/* ═══ 추옵 시뮬레이터 ═══ */
/* table-layout:fixed → 값 유무와 관계없이 열 너비 고정 (빈 칸이어도 안 좁아짐) */
.flame-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; table-layout: fixed; }
.flame-tbl th { padding: 6px 10px; background: var(--bg3); color: var(--text-sub); font-weight: 600; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.flame-tbl td { padding: 5px 10px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 첫 열(스탯명) 고정폭, 나머지 5개 등급열은 남은 폭 균등 분배 */
.flame-tbl th:first-child, .flame-tbl .flame-opt-lbl { width: 30%; }
.flame-tbl .flame-opt-lbl { text-align: left; color: var(--text); font-weight: 500; }
.flame-tbl .flame-avg { color: var(--gold); font-weight: 600; }
.flame-t--zero { color: var(--text-sub); opacity: .35; }
.flame-score-card { padding: 12px 0; border-bottom: 1px solid var(--border); }
.flame-score-card:last-of-type { border-bottom: none; }
.flame-score-card__name { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.flame-score-card__prob { font-size: .82rem; color: var(--text-sub); }
.flame-score-card__mean { font-size: .82rem; color: var(--text-sub); margin-bottom: 2px; }
.flame-th-prob { font-size: .72rem; font-weight: 400; color: var(--text-sub); }
.flame-type-icon { width: 36px; height: 36px; object-fit: contain; display: block; margin: 0 auto 4px; }

tbody tr:hover { background: rgba(var(--hue),.05); }

/* ════════════════════════════════════════════════════════
   ✨ PREMIUM POLISH LAYER — 전부 transform/opacity 기반
   (background-position·box-shadow 무한 리페인트 없음 = 무렉)
   ════════════════════════════════════════════════════════ */

/* ── 3. 헤더 글래스모피즘 ── */
.header {
  background: linear-gradient(180deg, rgba(18,12,38,.82), rgba(8,5,20,.72)) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent, rgba(var(--hue-l),.5), rgba(246,199,68,.35), transparent) 1 !important;
}
/* ── 4. 사이드바 글래스 ── */
.sidebar {
  background: linear-gradient(180deg, rgba(14,9,30,.78), rgba(6,4,16,.7)) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* 글래스 효과(헤더 뒤로 본문이 비치는 것)는 의도된 디자인이다.
   다만 backdrop-filter 미지원 브라우저에서는 블러 없이 반투명 배경만 남아
   글씨가 그대로 겹쳐 읽히므로, 그 경우에만 불투명으로 되돌린다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header  { background: #0d0922 !important; }
  .sidebar { background: #0b0720 !important; }
  :root[data-theme="light"] .header  { background: #ffffff !important; }
  :root[data-theme="light"] .sidebar { background: #ffffff !important; }
}

/* ── 5. 카드: 상단 그라디언트 액센트 + 입체 호버 ── */
.card { position: relative; isolation: isolate; }
.card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--hue-l),.85), rgba(246,199,68,.7), transparent);
  opacity: .55; transition: opacity .3s; z-index: 2;
}
.card:hover::after { opacity: 1; }

/* ── 6. 사이드바 nav 활성: 정적 그라디언트 (빛 스윕 제거) ── */
.sb-nav__item.active {
  animation: none !important;
  background-image: linear-gradient(90deg, rgba(246,199,68,.30), rgba(var(--hue-l),.26)) !important;
  background-size: auto !important;
}

/* ── 7. 제네시스 패스 카드: 빛 스윕 제거 ── */
.gen-cfg-card--pass.on {
  animation: none !important; background-size: auto !important;
}

/* ── 8. 활성 캐릭터 카드: 펄스 글로우 제거, 테두리 링 하나로 단순화 ── */
.char-card.active, .cg-card--active {
  animation: none !important;
  box-shadow: 0 0 0 1px #f5c842 !important;
}

/* ── 9. 버튼 클릭 눌림감 (빛 스윕 제거) ── */
.hbtn:active, .sbtn:active { transform: translateY(1px) scale(.97); }

/* ── 10. 섹션 타이틀 글로우 강화 ── */
.sec-title { text-shadow: 0 0 22px rgba(var(--hue-l),.25); }

/* ── 설정 모달 ── */
.modal--settings { width: min(880px, 96vw); }
.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px;
}
.settings-box {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-box__title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.settings-box__desc {
  font-size: .78rem;
  color: var(--text-sub);
  line-height: 1.5;
  flex: 1;
}
.settings-box__warn {
  font-size: .74rem;
  color: var(--danger);
  line-height: 1.5;
}
.settings-font-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 768px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ── 11. 저성능/모션축소 환경: 드리프트·스윕 전부 정지 ── */
@media (hover:none), (max-width:768px), (prefers-reduced-motion:reduce) {
  .header, .sidebar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ── 서버 상태 ── */
.ss-maint {
  background: rgba(240,80,96,.12); border: 1px solid rgba(240,80,96,.4);
  color: var(--danger); font-weight: 800; font-size: .88rem;
  border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px;
}
/* 2열 고정 — NA 6개 월드 기준 3행 2열 */
.ss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ss-card {
  background: var(--panel-veil); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  border-left: 3px solid var(--text-sub);
}
.ss-card.ss-up { border-left-color: var(--success); }
.ss-card.ss-partial { border-left-color: var(--accent); }
.ss-card.ss-down { border-left-color: var(--danger); }
.ss-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-card__name { font-weight: 900; font-size: .96rem; color: var(--text); display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ss-card__icon { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; margin: -4px 0; }

/* 서버 아이콘 원본이 전부 55~62px 같은 계열로 통일돼서 예전 Luna/Solis 개별
   보정은 제거했다. 다만 Challengers만 62x62 캔버스 안에 실제 그림이 46x48이라
   투명 여백을 안고 있어 같은 박스에 넣으면 혼자 작아 보인다 — 여백만큼 키운다.
   늘어난 크기는 음수 마진으로 흡수해 줄 높이는 건드리지 않는다. */
/* Challengers는 33px이라 26px짜리와 라인 정렬이 달라, .icon-lbl을 1px 내린
   만큼 아이콘도 1px 내려야 같이 맞는다(위 -6 / 아래 -8). */
.ss-card__icon[src*="Challengers"] { width: 33px; height: 33px; flex-basis: 33px; margin: -6px -3px -8px; }
.char-card__world-line img[src*="Challengers"] { width: 21px; height: 21px; margin: -4px -2px; }
/* Challengers 아이콘은 그림이 작게 그려져 있어 광학적으로 맞추려고 더 키운 값 —
   기본값을 올린 만큼 같은 비율(약 1.29배)로 함께 올린다 */
.ci-servericon[src*="Challengers"] { width: clamp(31px, 9.3cqw, 52px); height: clamp(31px, 9.3cqw, 52px); margin: -2px; }
.ss-card__badge {
  font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 99px;
  background: rgba(255,255,255,.06); color: var(--text-sub); white-space: nowrap;
}
.ss-card.ss-up .ss-card__badge { background: rgba(74,222,128,.15); color: var(--success); }
.ss-card.ss-partial .ss-card__badge { background: rgba(246,199,68,.15); color: var(--accent); }
.ss-card.ss-down .ss-card__badge { background: rgba(240,80,96,.15); color: var(--danger); }
.ss-card__row { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--text-sub); }
.ss-card__row b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.ss-card__upd { font-size: .7rem; color: var(--text-dim); margin-top: 2px; }
.ss-chan-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ss-chan {
  min-width: 22px; text-align: center; padding: 2px 3px;
  border-radius: 4px; font-size: .64rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ss-chan--up { background: rgba(74,222,128,.15); color: var(--success); }
.ss-chan--down { background: rgba(240,80,96,.18); color: var(--danger); }

/* ── 숙제 트래커 ── */
.dt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.dt-card { display: flex; flex-direction: column; gap: 12px; transition: opacity .15s, border-color .15s; }
.dt-card--dragging { opacity: .4; }
.dt-card--dragover { border-color: var(--primary); }
.dt-card__head { display: flex; align-items: center; gap: 12px; }
.dt-card__drag { flex: none; cursor: grab; color: var(--text-dim); font-size: 1.1rem; line-height: 1; user-select: none; }
.dt-card__drag:active { cursor: grabbing; }
.dt-card__portrait {
  flex: none; width: 88px; height: 88px; border-radius: var(--radius-sm); overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: transparent;
}
.dt-card__portrait-img { width: 100%; height: 100%; object-fit: cover; }
.dt-card__portrait-no { font-size: .74rem; font-weight: 800; color: var(--text-dim); text-align: center; }
.dt-card__name { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 1.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-card__edit, .dt-card__del {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent;
  color: var(--text-dim); font-size: .92rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s;
}
.dt-card__edit:hover { background: rgba(var(--hue),.18); color: var(--primary); }
.dt-card__del:hover { background: rgba(239,68,68,.15); color: #ef4444; }
.dt-help { font-size: .78rem; color: var(--text-sub); margin: 6px 0 14px; }
.dt-step2-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.dt-step2-portrait { flex: none; width: 72px; height: 72px; border-radius: var(--radius-sm); object-fit: cover; background: rgba(0,0,0,.2); }
.dt-step2-name { font-size: 1.35rem; font-weight: 800; }
.dt-addform__presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-addform__opt {
  display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: rgba(0,0,0,.1); font-size: .78rem; font-weight: 700;
  color: var(--text-dim); cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.dt-addform__opt input { display: none; }
.dt-addform__opt--checked { background: rgba(var(--hue),.15); border-color: rgba(var(--hue),.4); color: var(--text); }
/* 항목 2개씩 고정 폭으로 줄바꿈 — 이름 길이와 무관하게 상자 크기가 통일되고,
   최대 5개(3줄)만큼 높이를 항상 확보해서 항목 개수와 무관하게 카드 크기가 같아진다 */
.dt-tiles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 46px;
  gap: 8px; min-height: calc(46px * 3 + 8px * 2);
}
.dt-tile {
  position: relative; display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 7px 12px 7px 7px; border-radius: var(--radius-sm); cursor: pointer; overflow: hidden;
  border: 1px solid var(--border); transition: background .15s, border-color .15s, opacity .15s;
}
.dt-tile__thumb {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: transparent;
}
.dt-tile__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.55); transition: filter .15s; }
.dt-tile__emoji { font-size: 1.15rem; line-height: 1; filter: grayscale(1); opacity: .4; transition: filter .15s, opacity .15s; }
.dt-tile__label { flex: 1 1 auto; min-width: 0; font-size: .82rem; font-weight: 700; color: var(--text-dim); transition: color .15s; }
.dt-tile--inactive { background: rgba(0,0,0,.1); }
.dt-tile--inactive:hover { background: rgba(0,0,0,.18); }
.dt-tile--active { background: rgba(var(--hue),.1); border-color: rgba(var(--hue),.35); }
.dt-tile--active:hover { background: rgba(var(--hue),.16); }
.dt-tile--active .dt-tile__img { filter: none; }
.dt-tile--active .dt-tile__emoji { filter: none; opacity: 1; }
.dt-tile--active .dt-tile__label { color: var(--text); }
.dt-tile--done { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.4); }
.dt-tile--done .dt-tile__img { opacity: .4; }
.dt-tile--done .dt-tile__emoji { opacity: .35; }
.dt-tile__stamp {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-12deg);
  font-size: .68rem; font-weight: 900; letter-spacing: .06em; color: var(--success);
  border: 2px solid var(--success); border-radius: 4px; padding: 1px 6px; text-transform: uppercase;
  animation: dtStampIn .18s ease-out; pointer-events: none;
}
@keyframes dtStampIn { from { transform: translate(-50%,-50%) rotate(-12deg) scale(1.6); opacity: 0; } to { transform: translate(-50%,-50%) rotate(-12deg) scale(1); opacity: 1; } }

@media (max-width: 768px) {
  .dt-grid { grid-template-columns: 1fr !important; }
  .dt-tiles { grid-template-columns: 1fr !important; min-height: 0 !important; }
}

/* ── 오늘의 채널 추천 ── */
.wc-category { margin-bottom: 22px; }
.wc-category__title {
  font-size: 1.12rem; font-weight: 900; color: var(--primary); margin-bottom: 11px;
  border-left: 4px solid var(--primary); padding-left: 10px; line-height: 1.3;
}
.wc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wc-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-width: 0;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.wc-item:hover { background: var(--bg-hover); }
.wc-item__img { flex: none; width: 32px; height: 32px; object-fit: contain; }
.wc-item__name { flex: 1 1 auto; min-width: 0; font-size: .8rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-result { display: flex; align-items: center; gap: 14px; }
.wc-result__img { flex: none; width: 84px; height: 84px; object-fit: contain; }
.wc-result__item { font-size: .8rem; color: var(--text-sub); font-weight: 700; }
.wc-result__pick { font-size: 1.2rem; font-weight: 900; color: var(--accent); margin: 2px 0; display: flex; align-items: center; gap: 7px; min-width: 0; }
.wc-result__world { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; margin: -4px 0; }

/* 아이콘 옆 라벨의 세로 정렬 보정.
   flex의 align-items:center는 글리프가 아니라 '라인박스'를 기준으로 맞추는데,
   라인박스 높이는 폰트의 ascent/descent로 정해진다. 이 앱 폰트들은 descent가
   실제 글자보다 크게 잡혀 있어(고딕 15/5인데 실제 글리프는 15/3) 라인박스
   중심이 글자 중심보다 아래에 생기고, 그만큼 글자가 위로 떠 보인다.
   고딕 1px, Maple·8bit 0.5px 차이라 1px 내려주면 세 폰트 모두 맞는다. */
.icon-lbl { position: relative; top: 1px; }
/* 결정석은 아이콘이 세로로 길쭉해서 글자가 상대적으로 더 위로 떠 보인다는 지적.
   측정상으로는 1px에서 이미 잉크 중심이 맞지만, 눈으로는 1px 더 내린 쪽이
   맞아 보인다고 해서 여기만 2px로 둔다. 되돌리려면 이 규칙만 지우면 된다. */
.crystal-bar__type .icon-lbl { top: 2px; }
/* 캐릭터 카드·캐릭터 정보의 서버 이름도 눈으로는 1px 더 내린 쪽이 맞아 보인다는 요청 */
.char-card__world-line .icon-lbl { top: 1.5px; }
.ci-server .icon-lbl { top: 2px; }
/* .ci-server는 말줄임을 쓰는데, 글자를 span으로 감싸면 잘림 처리가 그 span으로
   내려가야 하므로 같은 규칙을 물려준다. */
.ci-server .icon-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-result__world[src*="Challengers"] { width: 33px; height: 33px; flex-basis: 33px; margin: -7px -3px; }