*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* 시각적으로 숨기고 스크린리더·검색엔진에만 노출 — 텍스트 전용(display:none 은 접근성 트리에서도 빠진다). 사용처: 스플래시 h1 부제·소개문 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root{
  --bg:#0f172a;--surface:#1e293b;--surface2:#253347;--border:#334155;
  --text:#e2e8f0;--dim:#94a3b8;--accent:#3b82f6;--blue:#60a5fa;
  --red:#f87171;--yellow:#fbbf24;--success:#4ade80;
  --popup-bg:#0f172a;--header-bg:#0f172a;--bg-deep:#0d0f12;
  --text-inv:#ffffff;--tt-text:#cbd5e1;
  /* 등급색 (텍스트용) — **인게임 원본을 그대로 쓴다** (사용자 결정 2026-08-29).
     대비 파생값을 만들어 봤으나 어느 쪽으로 옮겨도 등급색으로 안 읽혀 전부 폐기했다
     (어둡게 → 라이트 전설·희귀 / 밝게 → 다크 영웅·유물). 대비 미달은 알고 감수한다.
     **유일한 예외는 라이트 테마의 에스더·고급** — 원본이 흰 배경에서 너무 밝아 못 읽혀 어둡게 유지(:root.light).
     ※ 다크 전율만 원본(#1B43D3)이 1.55:1 로 사실상 안 보여 종전 파생값을 유지한다(아래 주석) */
  --grade-esther:#3CF2E6;--grade-ancient:#E99F49;--grade-legendary:#FFAE00;--grade-rare:#00B8FF;
  --grade-relic:#D34C1B;--grade-epic:#B235FF;
  --grade-serca:#6690FF;  /* 인게임 원본 #1B43D3 은 다크에서 1.55:1 로 판독 불가 → 같은 파랑 계열 명도만 올린 종전 값 유지(3.94:1). 원본은 :root.light */
  --grade-uncommon:var(--success); /* 고급: 원색 #00FF00 은 형광이라 success 녹색 대체 */
  /* ── 인게임 원본 등급색 — **비텍스트 전용** (아이콘 등급 테두리 .gbd-*) ─────────
     위 --grade-* 는 작은 글자 가독성 때문에 테마별 파생값을 갖지만, 아이콘 테두리·틀·띠는 게임 화면과
     같아 보여야 하므로 **원본색을 그대로 쓴다**(사용자 결정 2026-08-29). 테마 무관 고정.
     즉 같은 '유물'이라도 글자는 --grade-relic, 아이콘 테두리는 --grade-src-relic 이다 */
  --grade-src-legendary:#FFAE00;--grade-src-ancient:#E99F49;--grade-src-relic:#D34C1B;
  --grade-src-epic:#B235FF;--grade-src-rare:#00B8FF;--grade-src-esther:#3CF2E6;
  --grade-src-uncommon:var(--success); /* 고급만 예외 — 원색 #00FF00 은 형광이라 success 녹색 대체(위 --grade-uncommon 과 동일 사유) */
  /* 아이콘 배경 — **인게임 아이템 틀 그라데이션 원본** (등급 텍스트색과 별개, 테마 무관).
     출처: 공식 전투정보실 CSS 의 `[data-grade="N"] img{background:...}` 규칙 그대로 옮긴 값
     (https://cdn-lostark.game.onstove.com/2018/obt/assets/css/profile.pc.css — data-grade 1=고급 2=희귀 3=영웅 4=전설 5=유물 6=고대 7=에스더).
     **게임은 아이템 종류와 무관하게 등급당 배경이 하나다** — 보석·장비·장신구·아바타가 모두 이 변수를 공유한다.
     보석만 다른 값을 쓰려고 별도 변수를 두지 말 것(그렇게 했다가 인게임과 어긋나 되돌렸다). 눈대중으로 고치지도 말 것 — 위 CSS 를 다시 확인할 것 */
  --grade-bg-uncommon:linear-gradient(135deg,#18220b,#304911);--grade-bg-rare:linear-gradient(135deg,#111f2c,#113d5d);--grade-bg-epic:linear-gradient(135deg,#261331,#480d5d);
  --grade-bg-legendary:linear-gradient(135deg,#362003,#9e5f04);--grade-bg-relic:linear-gradient(135deg,#341a09,#a24006);--grade-bg-ancient:linear-gradient(135deg,#3d3325,#dcc999);
  --grade-bg-serca:var(--grade-bg-ancient); /* 전율(세르카) 아이템 틀은 인게임에서 고대와 동일 */
  --grade-bg-esther:linear-gradient(135deg,#0c2e2c,#2faba8); /* 에스더 청록 틀 (근사) */
  --sk-icon-bg:linear-gradient(135deg,#3a2020,#5a2828); /* 스킬 아이콘 미해석 시 대체 배경 — 등급 틀과 같은 계열(테마 무관) */
  /* 전율 장비 모서리 문양 — 전투정보실 data-pet-border="6" 오버레이(bg_equipment_petBorder.png 74×74 투명 PNG), CDN 이미지 프록시 경유 */
  --grade-orn-serca:url("/api/icon?url=https%3A%2F%2Fcdn-lostark.game.onstove.com%2F2018%2Fobt%2Fassets%2Fimages%2Fcommon%2Fgame%2Fbg_equipment_petBorder.png");
  --tier-high:var(--grade-legendary);--tier-mid:var(--grade-epic);--tier-low:var(--grade-rare);
  /* 무기 품질 → 등급 **텍스트색** (100 전설 / 90 영웅 / 70 희귀 / 30 고급). 재련 칩 아래 품질 칩의 숫자 색.
     아이콘 위 품질 띠(흰 글자 배경)는 폐지됐다(2026-08-30) — 그래서 배경용 어두운 파생값이 아니라 텍스트용 등급색이다 */
  --quality-100:var(--grade-legendary);--quality-90:var(--grade-epic);--quality-70:var(--grade-rare);--quality-30:var(--grade-uncommon);
  --tripod-0:#4DAFFF; /* 1티어 — 원본 #008cff 은 다크 최악 3.48:1. 명도만 올림 (5.00:1). 게임 기본 보호 대상 아님 */
  --tripod-1:#19d95e; /* 2티어 — 다크 최악 6.26:1, 유지 */
  --tripod-2:var(--grade-legendary); /* 3티어 = 전설색 별칭 (의도적 연동 — 전설색을 바꾸면 함께 움직인다) */
  --tt-green:#99ff99;--tt-red:#ff9999;--tt-yellow:#ffff99;
  --dd-hover:var(--surface2);
  --click:var(--text); /* 클릭-수정 텍스트 색 = 본문색(검회색 계열). 클릭 표시는 --chip-bg 알약 배경 */
  --chip-bg:color-mix(in srgb,var(--text) 8%,transparent); /* 클릭 가능 텍스트 공통 알약 배경 */
  --cmp-base:#fda4af;--cmp-cur:#7dd3fc; /* 비교 그래프: 기준(로즈)/현재(스카이) — 밝은 파스텔 대비 쌍 */
  /* 행 항목 간 가로 간격 — 화면이 좁아지면 자동 축소(16px → 8px). 규칙: DESIGN.md 작업 규칙 7 */
  --items-gap:clamp(8px,2vw,16px);
  --fs-display:36px;--fs-heading:24px;--fs-xl:32px;--fs-body:18px;--fs-small:14px;--fs-caption:13px;--fs-xs:12px;--fs-mono:12px;--fs-xxs:11px;--fs-tiny:9px;--fs-icon:46px;--fs-input:16px;
}
:root.light{
  --bg:#f1f5f9;--surface:#ffffff;--surface2:#e2e8f0;--border:#cbd5e1;
  --text:#0f172a;--dim:#475569;--accent:#2563eb;--blue:#3b82f6;
  --red:#dc2626;--yellow:#d97706;--success:#16a34a;
  --popup-bg:#ffffff;--header-bg:#ffffff;--bg-deep:#f8fafc;
  --text-inv:#ffffff;--tt-text:#1e293b;
  --tt-green:#047857;--tt-red:#b91c1c;--tt-yellow:#92400e;
  --cmp-base:#fb7185;--cmp-cur:#38bdf8; /* 비교 그래프: 라이트 테마는 한 톤 진하게 (흰 배경 대비) */
  /* 등급색 라이트 — **원칙은 :root 의 인게임 원본을 그대로 상속**한다. 여기 재정의가 있는 것만 예외다.
     예외 판정 기준은 대비 수치가 아니라 **흰 배경에서 색이 날아가 안 읽히는가** — 에스더(청록)·고급(형광 녹)만 해당한다.
     전설·고대·유물·영웅·희귀는 파생값을 만들어 봤으나 등급색으로 안 읽혀 폐기하고 원본으로 되돌렸다(사용자 결정 2026-08-29).
     **여기에 새 등급색 재정의를 추가하지 말 것** — 대비가 낮다는 이유만으로는 근거가 되지 않는다 */
  --grade-serca:#1B43D3;      /* 전율: 인게임 원본. :root 는 다크 판독용 파생값이라 여기서 원본으로 되돌린다 (6.11:1) */
  --grade-esther:#096D67;     /* 에스더: 원본 #3CF2E6 은 흰 배경 1.40:1 로 날아간다 → 같은 청록 계열 명도만 낮춤 (5.02:1) */
  /* 고급: 다크는 var(--success) 를 그대로 쓰지만 라이트 success(#16a34a)는 2.67:1 이라 여기서만 분리한다.
     --success 자체는 도약 섹션·아크 노드 테두리 등이 함께 쓰므로 건드리지 않는다 */
  --grade-uncommon:#0F7033;   /* (5.03:1) */
  /* 트라이포드 티어색은 등급색이 아니라 근사색이라 '게임 원본'이 없다 → 라이트 파생값 유지 (DESIGN.md) */
  --tripod-0:#0062B3;         /* 1티어 — 원본 #008cff → 2.75:1 (5.01:1) */
  --tripod-1:#0D7031;         /* 2티어 — 원본 #19d95e → 1.53:1 (5.04:1) */
}
:root.light .ark-node-btn.inactive{filter:grayscale(1) brightness(0.85);opacity:.5}
.profile-name{color:var(--text)} /* 캐릭터명 = 헤더. 스탯/레벨 값은 표시값 → 검회색(body) */
html,body{height:100%}
body{font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif;background:var(--bg);color:var(--dim);font-size:var(--fs-small);display:flex;flex-direction:column;overflow:hidden}

/* 팝업 공통 베이스 — position/z-index/bg/border/shape/shadow 통합 */
/* overscroll-behavior:contain — 팝업 내부 스크롤이 경계에 닿아도 부모(window)로 체이닝되지 않음.
   이게 없으면 window scroll 이벤트가 발생해서 overlay.js 의 스크롤 리스너가 팝업을 닫아버림 */
.eng-dd-popup,.sk-add-popup,.gem-lv-popup,.acc-polish-popup,.equip-dropdown,.av-popup,.global-popup{position:fixed;z-index:9999;background:var(--popup-bg);border:1px solid var(--blue);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);overscroll-behavior:contain}
/* 리스트형 선택 팝업 공통 폭 — 가장 긴 항목 글자 길이에 맞춤(max-content), 화면 밖으로 나가지 않게 max-width. 개별 클래스는 min-width 만 재정의 */
.eng-dd-popup,.sk-add-popup,.acc-polish-popup,.equip-dropdown,.av-popup{width:max-content;min-width:64px;max-width:min(320px,calc(100vw - 16px));scrollbar-gutter:stable both-edges} /* both-edges: 스크롤바 예약 폭을 양쪽에 두어 좌우 여백 대칭 */
.eng-dd-opt,.sk-add-opt,.acc-dd-opt,.equip-dd-opt,.av-popup-opt{white-space:nowrap} /* 폭 측정 기준: 항목은 한 줄 (팔찌 특수효과만 아래에서 normal 로 재정의) */

/* 팝업/드롭다운 스크롤바 */
.eng-dd-popup,.sk-add-popup,.gem-lv-popup,.acc-polish-popup,.brac-dd-popup,.equip-dropdown{scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.eng-dd-popup::-webkit-scrollbar,.sk-add-popup::-webkit-scrollbar,.gem-lv-popup::-webkit-scrollbar,.acc-polish-popup::-webkit-scrollbar,.brac-dd-popup::-webkit-scrollbar,.equip-dropdown::-webkit-scrollbar{width:5px}
.eng-dd-popup::-webkit-scrollbar-track,.sk-add-popup::-webkit-scrollbar-track,.gem-lv-popup::-webkit-scrollbar-track,.acc-polish-popup::-webkit-scrollbar-track,.brac-dd-popup::-webkit-scrollbar-track,.equip-dropdown::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.eng-dd-popup::-webkit-scrollbar-thumb,.sk-add-popup::-webkit-scrollbar-thumb,.gem-lv-popup::-webkit-scrollbar-thumb,.acc-polish-popup::-webkit-scrollbar-thumb,.brac-dd-popup::-webkit-scrollbar-thumb,.equip-dropdown::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
/* 터치 기기: iOS 는 요소 ::-webkit-scrollbar 커스텀을 무시하고 오버레이 스크롤바만 쓰므로(자동 숨김) 네이티브는 숨기고 JS 인디케이터(.popup-scrollbar, overlay.js _attachPopupScrollbar)로 상시 표시 — 5행 제한 리스트에 '더 있음' 단서 (2026-08-24) */
.touch-popup-sb{scrollbar-width:none}
.touch-popup-sb::-webkit-scrollbar{display:none;width:0}
.popup-scrollbar{position:fixed;width:4px;z-index:10000;pointer-events:none;border-radius:2px;background:color-mix(in srgb, var(--dim) 18%, transparent)}
.popup-scrollbar-thumb{position:absolute;left:0;width:100%;border-radius:2px;background:var(--dim);opacity:.9}

/* HEADER */
header{background:var(--header-bg);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;height:52px;gap:12px;flex-shrink:0;z-index:200}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo-text{font-weight:700;font-size:var(--fs-body);letter-spacing:1px;color:var(--text)}
.logo-d{color:var(--blue)}

/* ── SPLASH ─────────────────────────────────────── */
/* 하단 패딩 80px: 푸터(.site-footer, 스플래시 위에 z-index 로 얹힘 — PC 한 줄 ~28px) + 우하단 🐞 제보 버튼(.dbg-toggle bottom:40px)과 겹침 방지 — PC 전용.
   모바일(≤820px)은 제보 버튼이 헤더 서랍으로 들어가는 대신 푸터가 두 줄(~46px)로 접혀 72px 로 둔다(헤더 서랍 미디어쿼리) */
/* **문서 흐름 배치 — 스크롤 컨테이너는 body 하나뿐이다.** 예전엔 position:fixed + 내부 overflow-y:auto 였는데,
   iOS Safari 가 fixed 컨테이너의 내부 스크롤을 터치로 잡아주지 않아 펼친 행이 화면 밖에 남고 스크롤이 먹지 않았다
   (실측 2026-09-04, 최신 iOS Safari). 중첩 스크롤을 없애고 문서 스크롤에 맡기면 iOS 가 기본 동작으로 처리한다.
   min-height:calc(100dvh − 52px) — 접힘 상태는 화면을 정확히 채워 스크롤이 없고(dvh 라 주소창 뒤로 숨는 구간도 없다),
   펼쳐서 넘치면 그만큼 문서가 늘어난다. 헤더는 sticky, 푸터는 fixed 로 제자리(아래 body.splash-on 규칙) */
.splash-overlay{position:relative;z-index:150;flex-shrink:0;min-height:calc(100dvh - 52px);background:var(--header-bg);display:flex;flex-direction:column;align-items:center;gap:0;transition:opacity .7s cubic-bezier(0.4,0,0.2,1);padding:24px 16px 80px;box-sizing:border-box}
/* 세로 배치 — **위 스페이서는 뷰포트에만 연동되는 고정 높이(18vh)**이고 아래 스페이서가 남는 공간을 전부 흡수한다.
   grow 비율(7:13)로 '여유 공간'을 나누면 로고 y 가 F=H−Σ 의 함수가 되어 **아래 요소가 커질 때마다 로고가 끌려 올라간다**
   (게시판을 펼치거나 간격을 벌릴 때마다 대문이 들썩였다 — 사용자 결정 2026-09-04: 로고는 움직이지 않는다).
   18vh 는 게시판 도입 전 7:13 이 주던 값과 같다(1080p 194px). 모바일(≤820px)은 화면이 짧아 14vh 로 한 단계 더 올린다.
   shrink 0 이라 내용이 길어져도 로고가 위로 밀리지 않고, 넘치는 만큼은 아래로 스크롤된다.
   justify-content:center 를 함께 주면 안 된다 — 오버플로 시 상하 양방향으로 밀어 상단이 스크롤 원점 위로 잘린다(도달 불가) */
.splash-overlay::before{content:'';flex:0 0 18vh}
.splash-overlay::after{content:'';flex:1 0 0}
/* 자식은 **줄어들지 않는다** — flex 기본 shrink:1 이면 내용이 넘칠 때 스크롤이 생기는 대신 자식이 눌린다.
   실제 증상 둘: ① 내용이 없는 .splash-line 이 0 으로 붕괴해 로고 밑줄이 사라진다 ② 펼친 .nb-wrap 의 1fr 행이
   압축돼 .nb-body{overflow:hidden} 에 잘리고, 넘치지 않았으니 오버레이도 스크롤되지 않는다.
   shrink 를 막으면 넘친 만큼이 그대로 스크롤 영역이 된다(::before 14/18vh 는 이미 shrink:0 — 로고 고정) */
.splash-overlay>*{flex-shrink:0}
/* 사라질 땐 fixed 로 띄운다 — 흐름에 남아 있으면 700ms 페이드 동안 되살아난 .main 을 아래로 밀어낸다 */
.splash-overlay.splash-hide{opacity:0;pointer-events:none;position:fixed;top:52px;left:0;right:0;bottom:0}
/* 스플래시가 떠 있는 동안의 셸 — **body 를 유일한 스크롤 컨테이너로** 만든다(중첩 스크롤 제거, iOS 대응).
   .main 은 어차피 스플래시에 완전히 가려지는 영역이라 흐름에서 빼야 스플래시와 겹치지 않는다.
   헤더 sticky · 푸터 fixed 로 둘은 제자리에 남고 내부만 움직인다(사용자 요구 2026-09-04).
   해제는 character.js hideSplash() */
body.splash-on{overflow-y:auto;height:100dvh}
body.splash-on .main{display:none}
body.splash-on header{position:sticky;top:0}
body.splash-on .site-footer{position:fixed;left:0;right:0;bottom:0}
/* padding-left = letter-spacing: 광학 중심 보정 — 자간이 마지막 글자 뒤에도 붙어 글리프가 시각 중심에서 좌측으로 밀리는 것 상쇄 */
.splash-title{font-size:clamp(44px,17vw,112px);font-weight:700;letter-spacing:.10em;padding-left:.10em;color:var(--text);line-height:1} /* 700 = 헤더 로고(.logo-text)와 같은 굵기. 자간 .15→.10em — 디스플레이 크기에서 자간이 넓으면 획이 상대적으로 가늘어 보여 낱글자로 흩어진다(2026-08-30). padding-left 는 자간과 항상 같은 값(광학 중심 보정) */
.sp-d{color:var(--blue)}
.splash-line{width:clamp(160px,24vw,280px);height:1.5px;background:linear-gradient(90deg,transparent,var(--blue),transparent);margin:28px 0;opacity:.6}
.splash-sub{font-size:clamp(10px,1.4vw,16px);letter-spacing:.45em;padding-left:.45em;color:var(--dim);font-weight:400}
/* 게시판 컨테이너 — 내용은 notice.js 가 주입.
   width:fit-content — **내용 폭에 딱 맞춰야 화면 가로 중앙에 놓인다**(부모 .splash-overlay 의 align-items:center 가 센터링).
   고정 폭을 주면 박스만 가운데고 좌측 정렬된 글자 덩어리는 중앙에서 왼쪽으로 치우쳐 보인다.
   상한 480px = 워드마크 상한 폭(112px 6자 + 자간 .10em ≈ 469px) — 제목이 길어져도 로고보다 넓어지지 않는다.
   margin-top = **로고 그룹과의 간격 그 자체**(둘 사이에 스페이서가 없다). `min(28vh, 100vh − 620px)` 인 이유:
   28vh 가 원하는 크기지만 나머지 고정 높이(위 스페이서 18vh·타이틀·선·부제·접힌 게시판 3행·헤더·패딩 ≈ 620px)를 빼고 남는 만큼까지만 쓸 수 있다.
   그냥 28vh 로 두면 낮은 화면에서 **접힌 게시판이 화면 밖으로 밀린다**(펼쳤을 때의 스크롤은 허용, 접힘은 보여야 한다).
   → 높은 화면에서는 28vh 전부, 낮은 화면에서는 남는 만큼으로 자동 축소(하한 56px) */
.splash-notice{margin-top:max(64px,min(28vh,100vh - 620px));width:fit-content;max-width:min(480px,100%)}
/* 비지원 직업 안내(.placeholder 내부) — 내용은 character.js SUPPORT_NOTICE(단일 출처)가 주입. 아래 .sn-* 를 게시판 첫 줄 본문과 공용한다 */
.support-notice{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:10px}
/* 순수 타이포그래피 — 칩/버튼 형태·한글 광자간 금지(사용자 결정, 2026-08-28), 스플래시 기존 문법(전부 텍스트)과 동일한 결 */
.sn-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:10px}
.sn-class,.sn-spec{font-size:var(--fs-small);font-weight:700;color:var(--text)}
.sn-builds{font-size:var(--fs-small);color:var(--dim);font-variant-numeric:tabular-nums}

/* ── 스플래시 게시판(.nb-*) ─────────────────────────
   첫 줄 = 현재 지원 직업 목록(고정, 본문은 .sn-* 재사용) + 최신 공지 4건. 전 행 접힘으로 시작. 마크업·데이터는 notice.js.
   **높이는 내용을 따른다**(고정 height 없음). 위 스페이서가 18vh 로 고정이라 게시판이 커져도 로고가 움직이지 않고,
   화면을 넘기면 아래로 스크롤될 뿐이다(사용자 결정 2026-09-04 — 펼쳤을 때의 스크롤은 허용).
   그래서 접힘 상태에 죽은 예약 공간이 없다 — 3행이면 딱 3행 높이다.
   overflow:hidden 을 주지 않는다 — 주면 :focus-visible 링이 잘린다.
   배경·테두리·구분선·:hover 를 두지 않는다(위 2026-08-28 형태 규칙 승계 + 작업 규칙 3 '위계는 선이 아니라 색·굵기·여백') */
.nb{--nb-row-h:42px} /* 행 높이 — 터치 타깃 하한(38px)보다 여유 */
/* 열 순서 셰브론 → 날짜 → 제목 — 열림 상태를 행 맨 앞에서 먼저 읽는다 */
.nb-head{display:grid;grid-template-columns:14px auto minmax(0,1fr);column-gap:12px;align-items:center;width:100%;min-height:var(--nb-row-h);padding:0 4px;background:none;border:none;font-family:inherit;text-align:left}
/* min-width:8ch — 'YY.MM.DD' 8자 폭을 tabular 기준으로 고정 → 전 행의 제목 시작 x 가 맞는다 */
.nb-date{font-size:var(--fs-small);color:var(--dim);font-variant-numeric:tabular-nums;min-width:8ch;white-space:nowrap}
.nb-title{font-size:var(--fs-body);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-chev{font-size:var(--fs-small);color:var(--dim);transition:transform .15s} /* .dmg-bd-chev 와 동일 타이밍 */
.nb-item:not(.open) .nb-chev{transform:rotate(-90deg)}
/* 펼침 — .sp-unfold 의 0fr→1fr 을 세로축으로 전용. max-height 어림값은 자연 높이와 어긋나고 이징이 뭉개진다(같은 근거가 .sp-unfold 주석에 있다).
   3층인 이유: overflow:hidden 은 자기 패딩을 클리핑하지 않으므로, 패딩을 .nb-text 로 한 층 더 내려야 접힌 상태가 완전히 0 이 된다 */
.nb-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s cubic-bezier(0.22,1,0.36,1)}
.nb-item.open .nb-wrap{grid-template-rows:1fr}
.nb-body{overflow:hidden;min-height:0}
.nb-text{font-size:var(--fs-small);line-height:1.7;word-break:keep-all;padding:4px 4px 16px 26px} /* 들여쓰기 = 행 소속 표시 — 셰브론 열(14) + 간격(12) 만큼 들여 날짜 시작 x 에 맞춘다 */
.nb-text p{margin:0 0 6px}
.nb-text p:last-child{margin-bottom:0}
/* 지원 목록 = 직업 · 특성 · 순번 3열 grid. `.sn-row{display:contents}` 로 행 자체의 박스를 없애 **모든 행이 같은 트랙을 공유**한다
   → 열이 정확히 맞는다(폭 하한 em 추정 불필요). 베이스 .sn-row(flex·중앙)는 .support-notice 쪽 그대로 둔다 */
.nb-support{display:grid;grid-template-columns:auto auto auto;justify-content:start;column-gap:18px;row-gap:2px;align-items:baseline}
.nb-support .sn-row{display:contents}
/* 같은 직업의 특성끼리는 붙이고(row-gap 2px), 직업이 바뀌는 행에서만 벌린다 — .sn-grp 는 character.js 가 그룹 첫 행에 단다.
   .sn-row 는 display:contents 라 박스가 없으므로 간격은 자식(grid item)의 margin 으로 준다 */
.nb-support .sn-grp:not(:first-child)>span{margin-top:11px}
/* 상태를 .open 클래스가 소유하고 opacity/fill-mode 에 기대지 않으므로 이 가드는 안전하다(sp-anim 계열의 함정과 다른 축) */
@media(prefers-reduced-motion:reduce){.nb-wrap,.nb-chev{transition:none}}

/* 등장 애니메이션 — 타이틀 페이드업 선행(.15s) → **좌우 펼침 3종 동시(.8s)**: 워드마크(.sp-unfold) ·
   구분선(scaleX) · 부제(중앙 클립) → 공지 후행(1.6s) (사용자 결정 2026-08-30).
   셋은 delay·duration·이징을 공유해야 한 동작으로 읽힌다 — 하나만 바꾸지 말 것.
   sp-anim 계열은 관례상 reduced-motion 가드 없음 — animation:none 시 opacity:0 잔존 함정 */
@keyframes sp-fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* 구분선 — 중앙에서 양옆으로 그어지는 드로잉. forwards 최종값은 반드시 기본 opacity(.6)와 일치시킬 것(fill 이 캐스케이드를 이겨 영구 적용됨) */
@keyframes sp-line-draw{from{opacity:0;transform:scaleX(0)}to{opacity:.6;transform:scaleX(1)}}
.sp-anim-1{opacity:0;animation:sp-fade-up .9s cubic-bezier(0.22,1,0.36,1) forwards;animation-delay:.15s}
/* LD → LoDeal 좌우 펼침 — inline-grid 의 grid-template-columns 를 0fr→1fr 로 애니메이션한다.
   width:auto 는 애니메이션 불가이고 max-width 로 흉내내면 웹폰트(Pretendard CDN) 로드 전후로 자연 폭이 달라져
   중간에 멈추거나 넘친다. 0fr→1fr 은 **내용의 자연 폭까지 정확히** 펼쳐지므로 폭 상수도 JS 측정도 필요 없다.
   기본값이 1fr 이고 fill-mode 는 backwards — 딜레이 동안만 접혀 있고, 애니메이션이 없거나 꺼지면
   펼쳐진 채로 남는다(위 sp-anim 계열의 'animation:none 시 opacity:0 잔존' 함정을 피하는 방향) */
.sp-unfold{display:inline-grid;grid-template-columns:1fr;animation:sp-unfold .7s cubic-bezier(0.22,1,0.36,1) backwards;animation-delay:.8s}
.sp-unfold>span{overflow:hidden;min-width:0}
@keyframes sp-unfold{from{grid-template-columns:0fr}to{grid-template-columns:1fr}}
/* 구분선 — 워드마크와 같은 시각·시간·이징으로 중앙에서 양옆으로 */
.sp-anim-line{opacity:0;transform:scaleX(0);animation:sp-line-draw .7s cubic-bezier(0.22,1,0.36,1) forwards;animation-delay:.8s}
/* 부제 — 중앙에서 양옆으로 열리는 클립. scaleX 로 하면 글자가 눌려 보이고, 자간 애니메이션은 매 프레임 리플로우다.
   clip-path 는 레이아웃에 영향이 없어 자리가 처음부터 확보되고(등장 시 아래가 밀리지 않는다) 글리프도 안 눌린다.
   fill-mode backwards — 딜레이 동안만 닫혀 있고 애니메이션이 꺼지면 열린 채로 남는다(.sp-unfold 와 같은 방향) */
@keyframes sp-open-x{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
.sp-anim-3{clip-path:inset(0 0 0 0);animation:sp-open-x .7s cubic-bezier(0.22,1,0.36,1) backwards;animation-delay:.8s}
/* 게시판만 후행 — 셋이 다 열린 뒤(.8+.7=1.5s) 이어진다.
   기본값 = 보임 + fill-mode:backwards — 딜레이 동안만 접혀 있고, 애니메이션이 없거나 꺼지면 보인 채로 남는다
   (.sp-unfold / .sp-anim-3 과 같은 방향). 게시판은 조작 대상이라 위 sp-anim 계열의 'animation:none 시 opacity:0
   잔존' 함정에 걸리면 조작 불가 영역이 된다. 정상 동작 시 화면은 이전과 동일(backwards 가 딜레이 동안 from 을 적용) */
.sp-anim-4{animation:sp-fade-up .8s cubic-bezier(0.22,1,0.36,1) backwards;animation-delay:1.6s}
/* 아래 4분기는 **폭(820) → 폭(600~820) → 폭+높이(760) → 높이(600)** 순서를 유지할 것 — 미디어쿼리 조합은 특이성을 올리지
   않고 순서로만 이긴다. 순서가 뒤집히면 저높이·모바일 값이 조용히 무효가 된다 */
/* 모바일 — 워드마크가 작고(17vw) 하단 패딩도 56px 이라 고정 높이 합이 작다 → 뺄 값도 580px 로 낮춘다.
   글자를 낮춘다: 제목 --fs-small(14) / 날짜·셰브론 --fs-caption(13) / 본문·지원 목록 --fs-xs(12).
   지원 목록은 .support-notice(비지원 직업 안내)와 베이스를 공용하므로 반드시 .nb-support 스코프로 좁힌다 */
@media(max-width:820px){.splash-overlay::before{flex:0 0 14vh}.nb{--nb-row-h:34px}.splash-notice{margin-top:max(56px,min(40vh,100vh - 546px))}.nb-title{font-size:var(--fs-small)}.nb-date,.nb-chev{font-size:var(--fs-caption)}.nb-text{font-size:var(--fs-xs)}.nb-support .sn-class,.nb-support .sn-spec,.nb-support .sn-builds{font-size:var(--fs-xs)}}
/* 폭 600~820px(폴더블 내부 화면·태블릿 분할·창 축소) — 이 구간부터 워드마크가 상한 112px 에 걸려(17vw ≥ 112 는 폭 659px 부터)
   위 식이 전제한 '작은 워드마크'가 성립하지 않는다. 그대로 두면 접힌 게시판이 화면 밖으로 밀린다(820×900 에서 24px) */
@media(min-width:600px) and (max-width:820px){.splash-notice{margin-top:max(56px,min(32vh,100vh - 590px))}}
/* 짧은 세로 화면이라도 **모바일 폭**이면 위 식(100vh−580 가지가 잡혀 87px 까지 떨어진다)보다 벌린다 —
   워드마크가 작아(17vw) 세로 예산에 여유가 있다. 데스크톱 폭의 720p·768p 는 걸리면 안 되므로 폭 조건을 함께 건다 */
@media(max-width:820px) and (max-height:760px){.splash-notice{margin-top:150px}}
/* 저높이 화면(모바일 가로 모드 등) — 세로 여백 압축 (앞 두 분기보다 뒤에 두어 우선).
   이 구간은 어차피 오버플로라 스크롤 길이를 줄이는 것이 목적이다 */
@media(max-height:600px){.splash-line{margin:16px 0}.splash-notice{margin-top:32px}}
.search-wrap{flex:1;min-width:0;max-width:340px;background:var(--surface);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;padding:0 10px;gap:8px;height:36px}
.search-wrap input{background:none;border:none;outline:none;color:var(--text);font-size:var(--fs-small);flex:1;min-width:0;font-family:inherit}
.search-wrap input::placeholder{color:var(--dim)}
.search-icon{color:var(--dim);cursor:pointer;font-size:var(--fs-body);flex-shrink:0}
.spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .6s linear infinite;display:none;flex-shrink:0}
.spinner.on{display:block}
.ph-spinner{width:28px;height:28px;border-width:3px} /* 본문 로딩 — .spinner 베이스 확장(크기만) */
@keyframes spin{to{transform:rotate(360deg)}}
/* 데이터 렌더 직후 등장 — 화면이 번쩍이지 않도록. 이징은 스플래시(sp-fade-up)와 동일, 거리·시간만 축소 */
@keyframes fade-up-sm{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fade-up-sm .32s cubic-bezier(0.22,1,0.36,1)}
@media (prefers-reduced-motion:reduce){.fade-in{animation:none}}
.theme-switch{margin-left:auto;flex-shrink:0;cursor:pointer;user-select:none;background:none;border:none;padding:0}
/* 치수는 --tsw/--tsh 두 변수에서 파생 — 크기를 바꾸는 쪽(헤더 서랍)은 변수만 덮고 width/height/thumb/translate 를 재선언하지 않는다 */
.theme-switch-track{--tsw:56px;--tsh:28px;position:relative;display:block;width:var(--tsw);height:var(--tsh);border-radius:calc(var(--tsh) / 2);background:var(--border);transition:background .2s}
/* 두 아이콘은 thumb 의 좌/우 정지 위치 **중심**에 놓는다 — 고정 inset 을 쓰면 치수를 줄였을 때
   가려져야 할 아이콘이 thumb 옆으로 몇 px 삐져나온다(서랍 크기에서 실제 발생) */
.theme-ic{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:var(--fs-mono);line-height:1;pointer-events:none}
.theme-ic-sun{left:calc(var(--tsh) / 2)}
.theme-ic-moon{left:calc(var(--tsw) - var(--tsh) / 2)}
.theme-switch-thumb{position:absolute;top:2px;left:2px;width:calc(var(--tsh) - 4px);height:calc(var(--tsh) - 4px);border-radius:50%;background:var(--text);transition:transform .2s}
:root.light .theme-switch-track{background:var(--blue)}
:root.light .theme-switch-thumb{transform:translateX(calc(var(--tsw) - var(--tsh)))}

/* 모바일 헤더 서랍 (≤820px 전용) — 테마 · 제보를 접는다. PC 는 헤더 구성 현행 유지(버튼 자체가 display:none).
   팝업은 `.global-popup hdr-menu-popup` 조합이라 position/z-index/배경/테두리와 스크롤·ESC 닫기(POPUP_SEL)를
   베이스에서 물려받는다 — 여기선 패딩/내부 레이아웃만 (외부 클릭 닫기는 addPopupDismiss 로 따로 붙인다) */
.hdr-menu-btn{display:none;position:relative;flex-shrink:0;background:none;border:1px solid var(--border);border-radius:6px;color:var(--dim);padding:4px;cursor:pointer;align-items:center;justify-content:center}
.hdr-menu-btn svg{width:18px;height:18px;display:block}
.global-popup.hdr-menu-popup{--hdr-slot:42px;padding:5px;min-width:0} /* 조합 선택자 — 베이스 .global-popup 이 파일 뒤쪽(값/스테퍼 팝업용 padding:10px 12px, min-width:200px)이라
  단일 클래스로는 덮이지 않는다. min-width:0 이어야 폭을 내용이 정한다. --hdr-slot: 행 우측 컨트롤(스위치/✓) 공통 폭 */
.hdr-menu-item{display:flex;align-items:center;gap:4px;width:100%;min-height:38px;background:none;border:none;border-radius:6px;padding:0 6px;font-family:inherit;font-size:var(--fs-small);color:var(--text);text-align:left;cursor:pointer} /* 높이는 내용(스위치 21 / ✓ 24 / 텍스트 17)과 무관하게 min-height 로 통일 */
/* 행 우측 컨트롤은 공통 폭 슬롯 + 가운데 정렬 */
.hdr-menu-item .theme-switch{margin-left:auto;width:var(--hdr-slot);display:flex;align-items:center;justify-content:center}
/* 테마 행도 같은 .hdr-menu-item — 행 전체가 토글 버튼이라 스위치는 <span>(중첩 button 금지).
   켜짐/꺼짐 표현을 :root.light 셀렉터가 결정하므로 헤더의 마크업을 복제해도 동기화 코드가 필요 없다 */
.hdr-menu-item .theme-switch{pointer-events:none}
.hdr-menu-item .theme-switch-track{--tsw:var(--hdr-slot);--tsh:21px} /* 메뉴 행에서는 헤더보다 작게 — 치수 변수만 덮는다 */
.hdr-menu-item .theme-ic{font-size:var(--fs-tiny)} /* thumb(17px) 안에 완전히 가려지는 크기 */
@media(max-width:820px){
  header>.theme-switch{display:none} /* 직계 자식만 — 서랍 안에 복제된 .theme-switch 까지 숨지 않게 */
  .hdr-menu-btn{display:inline-flex;margin-left:auto} /* 우측 정렬 주체를 .theme-switch 에서 이관 */
  .dbg-toggle{display:none}            /* 🐞 제보 플로팅 버튼은 서랍으로 흡수 */
  .splash-overlay{padding-bottom:72px} /* 위 버튼이 없으므로 푸터 몫만. 두 줄 푸터 실측 51px + 여유 — 56px 은 펼친 마지막 행과 푸터 사이가 5px 밖에 안 남았다(실측) */
}

/* MAIN */
.main{max-width:960px;width:100%;margin:0 auto;padding:0 16px;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;position:relative}
/* 첫 조회 로딩 커버 — 섹션이 하나씩 채워지는 중간 상태를 가리고, 모든 체인이 끝나면 걷혀 결과가 한 번에 보이게 한다.
   불투명 --bg 로 덮되 헤더(검색창·스피너)는 덮지 않아 진행 중임은 계속 보인다. visibility 는 페이드가 끝난 뒤 전환 */
.load-cover{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg);opacity:0;visibility:hidden;transition:opacity .28s,visibility 0s .28s}
.main.loading .load-cover{opacity:1;visibility:visible;transition:opacity .28s}

/* PROFILE */
.profile-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px 12px;margin:12px 0 6px;transition:.3s;display:flex;flex-direction:column;gap:6px;flex-shrink:0}

/* GEAR */
#gearContent{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.profile-card.loading{opacity:.5;pointer-events:none}
.profile-card.hide{display:none} /* 로드 실패 시 값이 '-' 뿐인 빈 카드 감춤 (character.js showLoadError) */
.profile-row1{display:flex;align-items:center;gap:14px}
.profile-meta{display:flex;gap:16px;align-items:baseline;margin-left:auto}
.meta-label{color:var(--dim);font-size:var(--fs-caption);margin-right:4px}
.meta-val{font-size:var(--fs-small);font-weight:700;letter-spacing:-0.5px} /* 아이템/전투력/원정대 값 공통 — 컬러 없이 body 상속 */
.profile-actions{flex-shrink:0;display:flex;align-items:center;gap:8px;margin-left:12px}
.profile-actions .btn{padding:4px 10px;font-size:var(--fs-caption)}
.profile-row2{display:flex;flex-wrap:wrap;gap:4px 12px;padding:4px 10px;background:var(--surface2);border-radius:8px;border:1px solid var(--border)}
.dv{display:flex;align-items:baseline;gap:3px}
.dv-label{font-size:var(--fs-caption);color:var(--dim)}
.dv-val{font-size:var(--fs-small);font-weight:600}
.cv-input{width:52px;box-sizing:border-box;color:var(--click);font-size:var(--fs-small);font-weight:600;text-align:right;padding:1px 5px;display:inline-block} /* 숫자 입력 — 칩 공통 규칙(알약 배경) 적용 */
.row-calc{border-color:var(--accent)}
.row-calc .dv-label{font-size:var(--fs-caption)}
.row-calc .dv-val{color:var(--accent);font-size:var(--fs-small)}
.profile-info{min-width:0;display:flex;align-items:baseline;gap:8px} /* 닉네임 · 클래스명 한 줄 가로 배치 (세로 공간 절약) */
.profile-name{font-size:var(--fs-body);font-weight:700}
.profile-class{color:var(--dim);font-size:var(--fs-caption);white-space:nowrap}
.profile-build{color:var(--accent);font-size:var(--fs-small);font-weight:700;white-space:nowrap} /* 깨달음 특성 + 질서 코어 순번 (예: 비기 112) — 프로필 헤더 유일 강조 */
.btn{padding:7px 14px;border-radius:6px;border:none;font-family:inherit;font-size:var(--fs-small);cursor:pointer;font-weight:500}
.btn-primary{background:var(--accent);color:var(--text-inv)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-primary.btn-cooldown:disabled{background:var(--surface2);color:var(--dim);opacity:1} /* 갱신 쿨다운 — 회색 비활성(남은 초 표시) */
#refreshBtn{min-width:92px;text-align:center} /* '갱신하기'/'갱신 중...'/'10초' 폭 차이로 버튼이 흔들리지 않게 고정 */
/* 공통 아이콘 버튼 — SVG 스프라이트(index.html #ic-*)를 <use>로 참조. 초기화 버튼은 모두 .reset-btn + #ic-reset 재사용 (state.js resetBtnHtml) */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.reset-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:1px solid var(--border);border-radius:6px;background:var(--surface2);color:var(--dim);cursor:pointer;line-height:0;flex-shrink:0;vertical-align:middle}
.reset-btn svg{display:block;width:14px;height:14px}

/* TABS */
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;flex-shrink:0}
.tab{padding:11px 18px;color:var(--dim);cursor:pointer;font-size:var(--fs-small);border-bottom:2px solid transparent;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tab-panel{display:none}
.tab-panel.active{display:block;flex:1;min-height:0;overflow-y:auto;padding-bottom:64px}

/* PANEL (스킬분석 등) */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px}
.placeholder{text-align:center;padding:60px 20px;color:var(--dim)}
.placeholder-icon{font-size:var(--fs-icon);margin-bottom:10px}
.placeholder-msg{color:var(--dim);font-size:var(--fs-small)}
.placeholder-msg.pad{padding:8px} /* 섹션 컨테이너에 직접 놓일 때(감싸는 .placeholder 없음) 여백 확보 */
.sub-label{font-size:var(--fs-small);color:var(--dim)}
.emoji-placeholder{opacity:.3}

/* ══ GEAR TAB ══ */
.gear-tab-layout{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.cycle-tab-layout{grid-template-columns:repeat(2,minmax(0,1fr))} /* 스킬/사이클 탭 — 좌 스킬/보석, 우 딜 사이클 동일 폭(2026-09-01 사용자 확정 — 풀딜 열 삭제로 우측이 홀쭉해짐). 모바일 1열 전환은 .gear-tab-layout 공통 미디어쿼리 */
.cycle-tab-layout[data-cyccols="3"]{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)} /* 딜 사이클이 3열이면 좌(스킬/보석) 40% : 우(딜 사이클) 60% — 3열은 2열보다 1.5배 폭이 필요하다. 속성은 cycle_ui.js setLayoutCols 가 붙인다(열 수 = preset.segments.length) */
.gear-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:12px;position:relative}
.gear-section:last-child{margin-bottom:0}
.sec-title{font-size:var(--fs-body);font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:6px;padding-right:32px}
.sec-sub{font-size:var(--fs-small);color:var(--dim);margin-left:auto;font-weight:400}
.sec-reset-btn{position:absolute;top:8px;right:8px;z-index:2} /* 섹션 우상단 위치만 — 외형은 .reset-btn 공통 */
/* 캐릭터 탭 섹션 접기 — 본문 래퍼를 만들지 않고 '제목·토글 버튼을 뺀 나머지 직계 자식'을 숨긴다
   (섹션 5개가 각자 다른 파일 소유라 마크업 불변). 상태는 세션 한정(state.js).
   **토글은 셰브론 버튼만** — 제목 줄 전체를 누르게 하면 의도치 않게 접히는 일이 잦다(사용자 지적 2026-08-30).
   버튼은 .sec-title 의 **형제**이자 absolute — 각인 섹션이 .sec-title 의 innerHTML 을 갈아끼우므로
   (engravings.js) 안에 넣으면 지워진다. 초기화 버튼(우상단)과 같은 배치 패턴 */
#tabChar .gear-section > .sec-title{padding-left:24px} /* 좌상단 셰브론 자리 */
.sec-collapse-btn{position:absolute;top:7px;left:6px;z-index:2;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;font-family:inherit;font-size:var(--fs-small);line-height:1;color:var(--dim);cursor:pointer;transition:transform .15s}
.gear-section.collapsed > .sec-collapse-btn{transform:rotate(-90deg)}
#tabChar .gear-section.collapsed > .sec-title{margin-bottom:0}
/* 접히면 **초기화 버튼도 함께 숨긴다** (사용자 결정 2026-08-30) — 초기화는 되돌릴 수 없는데
   접힌 상태에서는 무엇이 지워지는지 볼 수 없고, 제목 줄만 남아 오탭 확률도 올라간다.
   흐리게(disabled) 두지 않는 이유: 눌리지 않는 버튼은 '왜 안 되지'를 만들지만, 없으면 '펼쳐야 한다'가 자명하다 */
#tabChar .gear-section.collapsed > :not(.sec-title):not(.sec-collapse-btn){display:none} /* 셰브론은 남는다 — 다시 펼칠 유일한 수단 */

/* 캐릭터 내실 */
.inner-label{font-size:var(--fs-small);color:var(--dim)}
.inner-val{font-size:var(--fs-small);font-weight:600}
.combat-stat-pair{display:inline-flex;align-items:baseline;gap:4px}
/* 시너지 */
.syn-list{display:flex;flex-direction:column;gap:4px}
.syn-row{display:flex;align-items:flex-start;gap:8px;padding:5px 9px;background:var(--surface2);border-radius:7px;font-size:var(--fs-small)}
.syn-row input[type=checkbox]{accent-color:var(--accent);margin:0 3px 0 0}
.syn-name{font-weight:600;width:110px;flex-shrink:0;padding-top:2px}
.syn-cls-list{display:flex;flex-wrap:wrap;gap:3px 12px}
.syn-cls{display:inline-flex;align-items:center;cursor:pointer;font-size:var(--fs-small);color:var(--text);padding:2px 0}
/* 모바일: 값 `(+10%)` 만 다음 줄로 내리고 소제목 열을 좁힌다(110→64px) — 직업 체크박스 가로 공간 확보.
   2줄이 된 소제목은 가로 중앙(text-align) + 세로 중앙(행 align-items) 정렬. 64px = 가장 긴 값 `(+4%/+9%)`(12px 기준 ~58px) 여유분.
   PC 는 `.syn-nm`+`.syn-val` 두 inline span 이 붙어 한 줄 그대로 */
@media(max-width:820px){.syn-row{align-items:center}.syn-name{width:64px;padding-top:0;text-align:center}.syn-val{display:block;font-size:var(--fs-xs);white-space:nowrap}}
/* 라벨 행 (.lrow) — "좌측 고정폭 라벨 + 우측 항목 나열" 공용 베이스. 도메인 무관: 버프/시너지 탭 + 기본 정보 섹션이 함께 사용 */
.lrow-list{display:flex;flex-direction:column;gap:4px}
.lrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:5px 9px;background:var(--surface2);border-radius:7px;font-size:var(--fs-small)}
.lrow input[type=checkbox]{accent-color:var(--accent)}
.lrow-label{font-weight:600;min-width:84px;flex-shrink:0}
.lrow label{display:flex;align-items:center;gap:3px;cursor:pointer}
.lrow label:has(input:disabled){opacity:.5;cursor:not-allowed} /* 잠긴 선택지 — 사유는 같은 행의 .lrow-desc 로 표시 */
.lrow .combat-stat-pair{gap:5px;margin-right:6px}
.lrow .inner-label{font-size:var(--fs-small);color:var(--dim)}
.lrow .inner-val{font-size:var(--fs-small);font-weight:600}
.lrow-desc{font-size:var(--fs-small);color:var(--dim)}
/* 기본 정보 소제목 — 한글 3글자('원정대') 폭으로 통일하고 2글자는 글자 사이를 벌려 양끝 맞춤 → 항목 시작점이 모든 행에서 일치.
   라벨↔항목 간격은 **카드 폭(container query)** 에 연동 — 뷰포트(vw)로는 안 된다: 창이 좁아 1단 레이아웃이 되면
   창은 좁아도 카드는 오히려 넓어지기 때문. 좁은 카드는 10px 유지(넓히면 펫목장 체크박스 3개가 한 줄에 못 들어감),
   카드 폭 360px↑ 24px / 400px↑ 48px. 항목 간 간격 --items-gap 과 축이 달라 토큰을 쓰지 않는다.
   (@media 폴백은 두지 않는다 — 창은 넓은데 카드가 좁은 경우를 잡아내지 못해 오히려 좁은 카드에서 간격이 벌어진다.
    container query 는 이미 쓰고 있는 :has() 와 지원 범위가 같다) */
.pf-list{container-type:inline-size}
.pf-list .lrow{column-gap:10px}
@container (min-width:360px){.pf-list .lrow{column-gap:24px}}
@container (min-width:400px){.pf-list .lrow{column-gap:48px}} /* 카드가 넓으면 우측 여백이 크게 남는다 — 항목 묶음을 더 안쪽으로 */
.pf-list .lrow-label{width:3em;min-width:0;white-space:nowrap;text-align:justify;text-align-last:justify} /* nowrap: 3em 이 3글자 advance 와 같아 반올림 오차로 줄바꿈되는 것 방지 */
/* 단일 선택 칩 (도메인 무관 베이스) — 제보 모달 카테고리(.report-cat)·버프 탭 만찬이 함께 쓴다.
   선택 표시는 .on 하나뿐(테두리+글자 액센트). 목록 컨테이너는 .chip-list, 폰트는 섹션 본문 기준 --fs-small */
.chip-list{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-family:inherit;font-size:var(--fs-small);color:var(--dim)}
.chip.on{border-color:var(--accent);color:var(--accent);font-weight:700}
.lrow-warn{font-size:var(--fs-small);color:var(--red)} /* 역산 이상 경고 — 내용 없으면 자리도 차지하지 않음 */
.lrow-warn:empty{display:none}
/* 항목 래퍼(.lrow-items) — 줄(.lrow-line) 단위 세로 배치. 한 행을 2줄로 나눌 땐 줄 요소를 2개 둔다.
   래퍼는 display:contents 로 사라지고 줄 요소가 .lrow 그리드의 직접 항목이 된다 → 2번째 줄부터는 라벨 열까지 써서
   행 전체 폭 기준으로 중앙 정렬(라벨이 없는 줄에 빈 라벨 칸이 남아 오른쪽으로 밀리는 것 방지) */
.lrow:has(> .lrow-items){display:grid;grid-template-columns:auto minmax(0,1fr)}
.lrow-items{display:contents}
.lrow-items > :nth-child(n+2){grid-column:1/-1}
/* 한 줄 — 라벨 열 바로 뒤에서 시작해 모든 행의 항목 시작점을 맞춘다(좌측 열 정렬, DESIGN.md 작업 규칙 7). 폭이 모자라면 wrap */
.lrow-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--items-gap)}
/* 항목 묶음이 .lrow 의 **직접 자식**일 때(버프/시너지 탭) — 줄바꿈이 이 안에서만 일어나 2번째 줄도 항목 열에서 시작한다.
   항목을 .lrow 에 직접 나열하면 .lrow 의 flex-wrap 이 다음 줄을 행 왼쪽 끝(= 라벨 아래)으로 떨어뜨려
   모바일에서 열이 어긋난다. .lrow-items 경유(기본 정보)는 grid 라 해당 없고, 간격도 그쪽 --items-gap 을
   건드리지 않도록 직접 자식일 때만 .lrow 와 같은 8px 로 맞춘다 */
.lrow > .lrow-line{flex:1;min-width:0;gap:4px 8px}
.lrow-line .combat-stat-pair{margin-right:0;white-space:nowrap} /* 간격은 --items-gap 이 담당(공통 6px 여백 해제) + 라벨이 "치/명" 으로 쪼개지지 않게 */

/* 장비 */
.equip-summary{display:flex;gap:16px;padding:8px 4px 2px;font-size:var(--fs-small);color:var(--dim)}

/* 스킬 섹션 (장비 탭) */
.sk-list{display:flex;flex-direction:column;gap:0}
.sk-row{display:flex;align-items:center;gap:8px;padding:4px;height:56px;border-bottom:1px solid var(--border)}
.sk-row:last-child{border-bottom:none}
.sk-row > *{align-self:center}
.sk-info{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;overflow:hidden} /* 초소형 화면(≤353px)에서 .sk-sub 칩이 룬 슬롯 위로 넘치지 않게 잘라냄 */
.sk-left-col{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0} /* 내용 폭 기준(부족 시 축소 → 스킬명 ellipsis) — 남는 폭은 룬·보석의 margin-left:auto 가 균등 분배 */
.sk-icon-wrap{width:34px;height:34px;border-radius:7px;flex-shrink:0;overflow:hidden;background:var(--sk-icon-bg);display:flex;align-items:center;justify-content:center;font-size:var(--fs-body)}
.sk-icon-wrap img{width:100%;height:100%;object-fit:cover}
.sk-name{font-size:var(--fs-small);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sk-sub{display:flex;align-items:center;gap:5px;margin-top:1px}
.sk-gem-col{display:flex;flex-direction:row;gap:6px;flex-shrink:0;align-items:center;margin-left:auto}
.sk-gem-slot{display:flex;align-items:center;justify-content:center;cursor:pointer}
.sk-gem-icon{width:36px;height:36px;border-radius:5px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--surface);cursor:pointer;position:relative}
.sk-gem-icon img{width:100%;height:100%;object-fit:cover}
.sk-gem-icon.empty{position:relative;border:1px dashed var(--border);background:transparent}
.sk-gem-icon.empty::after{content:'+';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-body);font-weight:700;color:var(--dim)}
.sk-gem-icon.gem-grade-relic{background:var(--grade-bg-relic);border:1.5px solid var(--grade-src-relic)}
.sk-gem-icon.gem-grade-ancient{background:var(--grade-bg-ancient);border:1.5px solid var(--grade-src-ancient)}
.sk-unmatched-section{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.sk-unmatched-title{font-size:var(--fs-small);color:var(--dim);font-weight:600;margin-bottom:6px}
.other-gems-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.other-gem-slot{position:relative;width:36px;height:36px;border-radius:5px;overflow:hidden;cursor:pointer;background:var(--surface);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.other-gem-slot img{width:100%;height:100%;object-fit:cover}
.other-gem-slot.empty{border:1px dashed var(--border);background:transparent;color:var(--dim);font-size:var(--fs-body);font-weight:700}
.other-gem-slot.gem-grade-relic{background:var(--grade-bg-relic);border:1.5px solid var(--grade-src-relic)}
.other-gem-slot.gem-grade-ancient{background:var(--grade-bg-ancient);border:1.5px solid var(--grade-src-ancient)}
.sk-gem-lv,.other-gem-lv{position:absolute;bottom:1px;right:2px;font-size:var(--fs-xs);font-weight:700;color:var(--text-inv);line-height:1;text-shadow:0 1px 2px #000;pointer-events:none} /* 보석 레벨 오버레이 — 36px 아이콘 기준 12px (9px 에서 확대 2026-08-23) */
.gem-icon-empty{opacity:.3;width:100%;height:100%;object-fit:cover} /* 아이콘 URL 미해석 시 흐린 대체 이미지 */
.sk-del-btn{background:none;border:none;color:var(--dim);cursor:pointer;font-size:var(--fs-caption);padding:0;line-height:1;opacity:.7;flex-shrink:0;align-self:center}
.sk-del-btn.sk-del-placeholder{visibility:hidden;pointer-events:none}
/* 트라이포드 요약 칩 (.sk-sub 줄, 2026-08-25 점 9개 → 팝업 개편) — 공통 클릭-수정 칩 목록 등록, 숫자는 티어 의미색 유지(칩 안 의미색 규칙) */
.sk-tp-chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:1px 5px;line-height:1.5;font-weight:700;width:48px;box-sizing:border-box} /* 폭 고정 — 행마다 숫자 조합이 달라도 트포→룬→보석 간격이 흔들리지 않게 (2026-08-27 사용자 요청). 숫자는 등폭(.sk-tp-d) + 가운데 정렬 */
.sk-tp-d.tier-0{color:var(--tripod-0)}
.sk-tp-d.tier-1{color:var(--tripod-1)}
.sk-tp-d.tier-2{color:var(--tripod-2)}
.sk-tp-d.locked{color:var(--dim);opacity:.5}
/* 트라이포드 선택 팝업 (.sk-add-popup 변형 — 베이스/POPUP_SEL 재사용) — 티어 그룹 + 트포 이름 옵션 행 */
.sk-add-popup.sk-tp-popup{padding:6px} /* 베이스 .sk-add-popup(padding:4px)이 뒤에 선언돼 있어 특이도를 올려야 적용됨 */
.sk-tp-group + .sk-tp-group{border-top:1px solid var(--border);margin-top:4px;padding-top:5px}
.sk-tp-group-label{font-size:var(--fs-xs);color:var(--dim);padding:0 4px 3px}
.sk-tp-opt{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:5px;cursor:pointer;font-size:var(--fs-caption)}
.sk-tp-opt.active{background:var(--surface2);color:var(--text);font-weight:600}
.sk-tp-opt.locked{opacity:.35;cursor:default;pointer-events:none}
.sk-tp-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sk-tp-dot.tier-0{background:color-mix(in srgb,var(--tripod-0) 30%,transparent)}
.sk-tp-dot.tier-1{background:color-mix(in srgb,var(--tripod-1) 30%,transparent)}
.sk-tp-dot.tier-2{background:color-mix(in srgb,var(--tripod-2) 30%,transparent)}
.sk-tp-dot.tier-0.on{background:var(--tripod-0)}
.sk-tp-dot.tier-1.on{background:var(--tripod-1)}
.sk-tp-dot.tier-2.on{background:var(--tripod-2)}
/* 스킬 룬 슬롯 (2026-08-25) — 30px(보석 36px 보다 한 단계 작게), 등급 테두리/배경은 .gbd-* 재사용. 빈 슬롯은 dashed + '룬' */
.sk-rune-slot{display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:auto} /* auto 마진 2곳(룬·보석)이 남는 폭을 반씩 — 트포→룬 = 룬→보석 간격 균등. 행마다 흔들리지 않는 건 트포 칩 폭이 고정이라서 */
.sk-rune-slot.sk-rune-placeholder{visibility:hidden;pointer-events:none} /* 아이덴티티 행 — 보석 열 정렬용 자리 */
.sk-rune-icon{width:30px;height:30px;border-radius:5px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;border:1.5px solid var(--border);background:var(--surface)} /* 보석(36px)보다 한 단계 작게 (2026-08-25 사용자 요청) */
.sk-rune-icon img{width:100%;height:100%;object-fit:cover}
.sk-rune-icon.empty{border:1px dashed var(--border);background:transparent}
.sk-rune-icon.empty::after{content:'룬';font-size:var(--fs-xs);font-weight:600;color:var(--dim)}
.sk-rune-name{font-size:var(--fs-xs);font-weight:700;color:var(--text-inv);text-shadow:0 1px 2px #000;letter-spacing:-.5px} /* 아이콘 없는 룬 — 등급 그라데이션 배경(테마 무관 어두움) 위 오버레이 = 보석 레벨(.sk-gem-lv)과 동일 처리 */
.sk-rune-nm{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:var(--fs-tiny);font-weight:700;color:var(--text-inv);line-height:1.2;letter-spacing:-.3px;white-space:nowrap;text-shadow:0 1px 2px #000;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none} /* 아이콘 위 룬 이름 — 30px 슬롯 하단 오버레이(9px, 룬명은 전부 2글자). 밝은 아이콘 대비용 하단 그라데이션, 클릭은 슬롯이 받도록 pointer-events 해제 */
/* 룬 선택 팝업 (.sk-add-popup 변형) — 룬별 행 + 등급 칩(수치% 또는 등급명 + 남은 수량), 소진 칩 비활성 */
.sk-add-popup.sk-rune-popup{padding:6px} /* 트포 팝업과 동일 — 베이스 padding:4px 캐스케이드 대응 */
.sk-rune-pop-title{font-size:var(--fs-xs);color:var(--dim);padding:0 4px 4px}
.sk-rune-row{display:flex;align-items:center;gap:4px;padding:2px 4px}
.sk-rune-row-name{width:38px;flex-shrink:0;font-size:var(--fs-caption);font-weight:600}
.sk-rune-gr{display:inline-flex;align-items:baseline;gap:3px;padding:2px 6px;border-radius:5px;background:var(--surface2);font-size:var(--fs-caption);font-weight:600;cursor:pointer;white-space:nowrap}
.sk-rune-gr i{font-style:normal;font-size:var(--fs-xxs);color:var(--dim)}
.sk-rune-gr.rg-uncommon{color:var(--grade-uncommon)}
.sk-rune-gr.rg-rare{color:var(--grade-rare)}
.sk-rune-gr.rg-epic{color:var(--grade-epic)}
.sk-rune-gr.rg-legendary{color:var(--grade-legendary)}
.sk-rune-gr.active{outline:1px solid currentColor}
.sk-rune-gr.off{opacity:.3;cursor:default;pointer-events:none}
.sk-add-btn{width:100%;margin-top:8px;padding:2px 6px;background:var(--surface2);border:1px dashed var(--border);border-radius:7px;color:var(--dim);cursor:pointer;font-size:var(--fs-small);font-weight:600;text-align:center;line-height:1.3}
.sk-add-popup{max-height:320px;overflow-y:auto;padding:4px}
.sk-add-opt{padding:6px 10px;border-radius:5px;cursor:pointer;font-size:var(--fs-caption);display:flex;align-items:center;gap:6px}
.sk-add-opt img{width:24px;height:24px;border-radius:4px;object-fit:cover}

/* 아크그리드 섹션 (장비 탭) */
.agr-slots{display:flex;flex-direction:column;gap:7px}
.agr-slot{display:flex;align-items:center;gap:8px;padding:0 8px}
.agr-slot.empty .agr-slot-icon{opacity:.4}
/* 아크그리드 — 섹션 내 폰트는 코어명(.agr-slot-name) 기준 --fs-small 로 통일 (등급 칩/포인트/효과 합산, 2026-08-24) */
.agr-grade-chip{font-size:var(--fs-small);font-weight:600;cursor:pointer;padding:1px 4px;line-height:1.5;white-space:nowrap;width:40px;text-align:center;flex-shrink:0;color:var(--click)}
.agr-slot-icon{width:34px;height:34px;border-radius:7px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:var(--fs-body)}
.agr-slot-icon img{width:100%;height:100%;object-fit:cover}
.agr-slot-body{flex:1;min-width:0}
.agr-slot-head{display:flex;align-items:center;gap:6px}
.agr-slot-name{font-size:var(--fs-small);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;flex:1;min-width:0;color:var(--click);padding:1px 5px;line-height:1.5}
.agr-slot-pt{font-size:var(--fs-small);font-weight:700;cursor:pointer;padding:1px 5px;line-height:1.5;width:40px;text-align:center;flex-shrink:0;color:var(--click)} /* 칩 높이 통일: padding 1px 5px + line-height 1.5 = 23px (장비 칩과 동일, 2026-08-24) */
.agr-effects{margin-top:8px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap} /* 효과 3개 한 줄 — 양끝 정렬 + 좌우 여백 14px (2026-08-24), wrap 은 초소형 화면 안전장치 */
.agr-eff-row{display:inline-flex;align-items:center;font-size:var(--fs-small);padding:0;gap:3px;white-space:nowrap}
.agr-eff-name{font-weight:500}
.agr-eff-val{font-weight:600;cursor:pointer;padding:1px 3px;text-align:right;color:var(--click)}
/* 모바일: 효과 3개(추가 피해/공격력/보스 피해 + 값)가 14px 로는 375px 폭에 안 들어감 → 팔찌 옵션과 같은 공간 제약 예외로 한 단계씩 축소 (DESIGN.md 규칙 8) */
@media(max-width:820px){.agr-effects{padding:0 6px;gap:4px}.agr-eff-row{font-size:var(--fs-caption)}}
@media(max-width:400px){.agr-eff-row{font-size:var(--fs-xs)}}

/* 각인 — 섹션 내 폰트는 각인명(.eng-name) 기준 --fs-small 로 통일 (단계/스톤 레벨 포함, 2026-08-24) */
.eng-list{display:flex;flex-direction:column;gap:7px}
.eng-row{display:flex;align-items:center;gap:8px;padding:0 9px}
.eng-icon{width:32px;height:32px;border-radius:7px;overflow:hidden;flex-shrink:0;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:var(--fs-small)}
.eng-icon img{width:100%;height:100%;object-fit:contain}
.eng-name{font-size:var(--fs-small);font-weight:600;cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;color:var(--click);padding:1px 5px;line-height:1.5}
.eng-lv{font-size:var(--fs-small);font-weight:700;text-align:center;cursor:pointer;padding:1px 5px;line-height:1.5;white-space:nowrap;width:60px;box-sizing:border-box;color:var(--click)} /* 'N단계' 14px 기준 폭 56→60. 칩 높이 23px 통일 */
.eng-stone{font-size:var(--fs-small);font-weight:700;text-align:center;cursor:pointer;padding:1px 5px;line-height:1.5;color:var(--click);white-space:nowrap;width:56px;box-sizing:border-box} /* 스톤 레벨 — 각인 단계(.eng-lv)와 동일 폰트·색 (활성 강조색 제거 2026-08-23) */
.eng-dd-popup{max-height:280px;overflow-y:auto;padding:4px}
.eng-dd-opt{padding:5px 10px;border-radius:5px;cursor:pointer;font-size:var(--fs-caption);display:flex;align-items:center;gap:6px}
.eng-dd-opt.active{background:var(--surface2);color:var(--accent)}
.eng-dd-opt img{width:24px;height:24px;border-radius:4px;object-fit:cover}
.eng-dd-opt.eng-dd-opt-none{justify-content:center}

/* 아크그리드 코어 미선택 시 반투명 기본 아이콘 */
.agr-slot .agr-icon-placeholder{opacity:.3}

/* 등급 */
.grade-전설{color:var(--grade-legendary)}.grade-영웅{color:var(--grade-epic)}.grade-희귀{color:var(--grade-rare)}.grade-고급{color:var(--grade-uncommon)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:999;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px;width:var(--modal-w,440px);max-width:92vw;box-shadow:0 24px 60px rgba(0,0,0,.5);transform:translateY(10px);transition:transform .2s} /* 폭은 --modal-w 로 열어둔다 — 넓은 모달(.pst-modal 720px)은 변수만 덮고 나머지는 베이스 그대로 */
.modal-overlay.open .modal{transform:translateY(0)}
.modal-title{font-size:var(--fs-body);font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px}
/* 모달 우상단 닫기 — 제목 줄 안에서 우측 끝으로 밀어낸다(.dbg-close 와 같은 패턴).
   absolute 배치를 쓰지 말 것: .report-modal 은 내부 스크롤이라 버튼이 같이 밀려 올라간다 */
.modal-close{margin-left:auto;background:none;border:none;color:var(--dim);cursor:pointer;font-size:var(--fs-body);line-height:1;padding:0 2px;font-family:inherit}
.modal-row{display:flex;gap:8px}
.modal-input{flex:1;min-width:0;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:var(--fs-small);padding:9px 12px;outline:none;transition:border-color .15s}
.modal-input:focus{border-color:var(--blue)}
.modal-save{background:var(--accent);color:var(--text-inv);border:none;border-radius:8px;padding:9px 16px;font-family:inherit;font-size:var(--fs-small);font-weight:700;cursor:pointer;flex-shrink:0;white-space:nowrap}

@media(max-width:820px){.modal{padding:20px}} /* 좁은 화면에서 좌우 26px 패딩이 가용 폭을 52px 먹는다 */

/* 오류 제보 모달 (.modal 베이스 확장 — 베이스 속성 재선언 금지) */
.report-modal{max-height:min(92vh,720px);overflow-y:auto} /* 항목이 많아 작은 화면에서 내부 스크롤 */
.report-cats{margin:12px 0} /* 위치만 — 칩 나열은 .chip-list 베이스 */
.report-cat{font-size:var(--fs-caption)} /* 모달 안이라 섹션 본문(--fs-small)보다 한 단계 작게 (규칙 8 예외) */
.report-text{width:100%;resize:vertical;min-height:110px;line-height:1.6}
.report-foot{display:flex;justify-content:flex-end;margin-top:4px}
.report-count{font-size:var(--fs-caption);color:var(--dim)}
.report-diag-row{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:var(--fs-caption);color:var(--dim)}
.report-diag-row input[type=checkbox]{accent-color:var(--accent)}
.report-diag-toggle{font-size:var(--fs-caption)}
.report-diag{display:none;margin:8px 0 0;padding:8px 10px;max-height:140px;overflow-y:auto;background:var(--surface2);border:1px solid var(--border);border-radius:8px;font-size:var(--fs-caption);font-family:inherit;color:var(--dim);white-space:pre-wrap;word-break:break-all;line-height:1.6}
.report-diag.on{display:block}
.report-img-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.report-img-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-family:inherit;font-size:var(--fs-caption);color:var(--text)}
.report-img-hint{font-size:var(--fs-caption);color:var(--dim)}
.report-thumb-wrap{display:none;position:relative;width:max-content;margin-top:10px}
.report-thumb-wrap.on{display:block}
.report-thumb{display:block;max-width:160px;max-height:120px;border:1px solid var(--border);border-radius:8px}
.report-thumb-del{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--dim);font-size:var(--fs-xs);line-height:1}
.report-actions{margin-top:16px;align-items:center}
.report-dbg-link{margin-right:auto;font-size:var(--fs-caption)}
.report-send{min-width:96px;text-align:center} /* '보내기'/'전송 중...' 상태 텍스트 폭 고정 */

/* 빌드 프리셋 — 상단 바 + 불러오기 모달 (.modal 베이스 확장, 베이스 속성 재선언 금지).
   동작·적용 규칙의 원본은 preset.js / preset_ui.js 파일 헤더 주석 */
.pst-bar{display:flex;margin-bottom:10px} /* 스킬/사이클 탭 최상단 — .cycle-tab-layout 의 형제. 버튼 폭은 내용에 맡긴다(라벨이 바뀌지 않아 폭 고정이 필요 없다) */
/* max-height 는 .report-modal 과 같은 값. **스크롤은 이 한 겹만** — 내부 목록에 별도 overflow 를 주면 iOS 가 2중 스크롤을 잡아주지 않는다 */
.pst-modal{--modal-w:720px;max-height:min(92vh,720px);overflow-y:auto}
.pst-cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;margin-top:12px} /* minmax(0,*) 필수 — 1fr 은 내용물 min-content 에 밀려 모달보다 넓어진다 */
.pst-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.pst-sub{font-size:var(--fs-small);font-weight:600;color:var(--text)}
.pst-groups{display:flex;flex-direction:column;gap:12px}
.pst-group{display:flex;flex-direction:column;gap:6px}
.pst-rows{display:flex;flex-wrap:wrap;gap:6px} /* 칩을 가로로 흘린다 — 세로 목록이면 9건 + 저장 10건에 모달이 길어진다. 추천 빌드는 특성마다 .pst-rows 한 줄(라벨 없음 — 칩에 특성이 들어 있다) */
.pst-row{display:flex;align-items:center;gap:4px}
/* 선택 버튼 = .chip 베이스 재사용 — 선택 표시는 .chip.on 하나뿐이다(복제 금지, .report-cat 선례). 여기서는 행 레이아웃만 얹는다.
   삭제 버튼이 필요해 행은 div + 선택 button + 삭제 button 구조다(button 중첩 금지) */
.pst-pick{display:flex;align-items:baseline;gap:6px;text-align:left;white-space:nowrap} /* 칩은 내용 폭 — 가로 흘림이라 늘리지 않는다 */
.pst-label{flex-shrink:0;word-break:keep-all}
.pst-note-txt{font-weight:400;font-size:var(--fs-caption);color:var(--dim)} /* 저장슬롯 설명(10자) — weight 고정은 .chip.on 의 700 을 물려받지 않게 */
.pst-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px} /* 불러올 항목 6종 = 3열×2행 — 글자 수가 비슷한 것끼리 같은 열(마크업 순서가 배치를 정한다) */
.pst-parts .lrow{flex-wrap:nowrap;white-space:nowrap;padding:5px 6px} /* 375px 에서 칸이 ~100px — 체크박스와 '아크패시브'가 두 줄로 갈라지지 않게 좌우 여백을 줄이고 줄바꿈을 막는다 */
.pst-del{width:24px;height:24px;font-family:inherit;font-size:var(--fs-caption);line-height:1} /* 외형은 .reset-btn 베이스(마크업 class="reset-btn pst-del") — 여기는 크기·글자 차이분만 */
.pst-save{margin-top:auto} /* 좌열 맨 아래 — 우열(경고)이 길어져도 저장 행이 바닥에 붙어 두 열 하단이 맞는다 */
.pst-hint{margin:0;font-size:var(--fs-caption);color:var(--dim);word-break:keep-all;line-height:1.6}
/* 경고 — 색은 --red 단일(.sk-point-over·.cyc-warn 선례), 아이콘·이모지 없음.
   **박스는 0건이어도 남는다** — 체크를 토글할 때마다 사라지면 아래가 밀려 화면이 번쩍인다(0건 = .pst-warn-none 회색 한 줄) */
.pst-warn{display:flex;flex-direction:column;gap:5px;padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;word-break:keep-all;line-height:1.6}
.pst-warn-item{font-size:var(--fs-caption);color:var(--red)}
.pst-warn-none{font-size:var(--fs-caption);color:var(--dim)}
.pst-actions{margin-top:16px;justify-content:flex-end;align-items:center}
.pst-author{margin-top:12px;display:flex;flex-direction:column;gap:6px} /* 추천 프리셋 기록(개발 전용) — 행은 .lrow 재사용, 저장 버튼은 행 우측 */
.pst-author.hide{display:none}
.pst-author .lrow > .btn{margin-left:auto}
.pst-cancel{background:var(--surface2);color:var(--dim)} /* .btn 베이스 + 보조 버튼 톤 — 주 버튼(.btn-primary)과 같은 치수를 쓴다 */
@media(max-width:820px){.pst-cols{grid-template-columns:minmax(0,1fr)}} /* 1열 — 좁은 화면에서 두 열은 각각 min-content 에 밀린다 */

/* TOAST */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:9px 18px;font-size:var(--fs-small);opacity:0;transition:all .3s;pointer-events:none;z-index:9999;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--red);color:var(--red)}.toast.ok{border-color:var(--accent);color:var(--accent)}

@media(max-width:820px){.gear-tab-layout,.cycle-tab-layout[data-cyccols]{grid-template-columns:minmax(0,1fr)}.profile-row1{flex-wrap:wrap}.profile-meta{margin-left:0}.profile-row2{gap:4px 8px}} /* minmax(0,1fr): 1열 트랙이 내용물 min-content 에 밀려 화면보다 넓어지는 것 방지 (가로 스크롤) */
/* 모바일 데미지 변수 패널: 3열 2행 그리드 — 1행 치적·치피·뭉가 / 2행 공속·이속·음돌 (DOM 순서는 데스크톱 한 줄 기준이라 nth-child 로 배치), 열 폭 동일 + 좌측 정렬로 위아래 텍스트 줄맞춤 */
@media(max-width:820px){.row-calc{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 8px}.row-calc .dv:nth-child(1){grid-area:1/1}.row-calc .dv:nth-child(2){grid-area:1/2}.row-calc .dv:nth-child(5){grid-area:1/3}.row-calc .dv:nth-child(3){grid-area:2/1}.row-calc .dv:nth-child(4){grid-area:2/2}.row-calc .dv:nth-child(6){grid-area:2/3}}
/* 모바일 프로필 1행: [이름·클래스·빌드 … 갱신 버튼·시각(우측 고정)] / 2행: 아이템·전투력·원정대 (order + basis 100% 로 줄바꿈) */
@media(max-width:820px){.profile-info{order:1}.profile-actions{order:2;margin-left:auto}.profile-meta{order:3;flex-basis:100%}}
/* 모바일 기본 정보 섹션: 줄바꿈 시 세로 간격 확보 (라벨↔항목 간격은 clamp 로 뷰포트 연동 — 별도 분기 없음) */
@media(max-width:820px){.pf-list .lrow{row-gap:6px}}
/* 모바일: 헤더·프로필 카드·비교 그래프 고정 해제 — body 가 스크롤 컨테이너, 탭 패널 내부 스크롤 해제. 탭바만 sticky */
/* 커서: 클릭 핸들러가 있는 요소·버튼만 손가락 (컨테이너에는 pointer 금지) */
[onclick],button,label:has(input),select,.clickable{cursor:pointer}
/* 터치: 버튼·클릭 요소 연타 시 iOS 더블탭 확대 방지 (핀치 줌·스크롤은 유지) */
button,[onclick],.clickable,.sp-btn,.eng-dd-opt,.equip-dd-opt,.av-popup-opt,.acc-dd-opt,.sk-add-opt,.ark-node-btn{touch-action:manipulation}
/* 키보드 포커스 표시 — :hover 금지(작업 규칙 6)와는 다른 축이다. hover 는 마우스용 affordance 라 쓰지 않지만,
   focus 는 키보드 사용자가 **현재 위치를 아는 유일한 수단**이라 반드시 보인다.
   :focus 가 아니라 :focus-visible — 마우스 클릭에는 링이 뜨지 않고 Tab 탐색에서만 나타난다.
   outline(+offset) 이라 레이아웃을 밀지 않는다. 개별 요소에서 outline:none 으로 지우지 말 것 */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.modal-input:focus-visible{outline-offset:0} /* 입력창은 테두리에 붙여 폭 변화 없이 */
/* 모바일: input 폰트 16px 미만이면 iOS Safari 가 포커스 시 자동 확대 → 모든 입력 요소를 --fs-input(16px) 로 */
@media(max-width:820px){input,select,textarea{font-size:var(--fs-input)!important}} /* !important: .search-wrap input 등 개별 셀렉터보다 우선 */
@media(max-width:820px){body{overflow-y:auto}.main,#gearContent,.tab-panel.active{flex:none;min-height:auto;overflow:visible}.tabs{position:sticky;top:0;z-index:5;background:var(--bg)}}

/* DEBUG PANEL */
.dbg-panel{position:fixed;bottom:0;left:0;right:0;height:160px;background:var(--bg-deep);border-top:1px solid var(--border);z-index:9000;display:none;flex-direction:column}
.dbg-panel.open{display:flex}
.dbg-header{display:flex;align-items:center;gap:10px;padding:4px 12px;background:var(--popup-bg);border-bottom:1px solid var(--border);flex-shrink:0}
.dbg-header span{font-size:var(--fs-small);color:var(--dim)}
.dbg-close{margin-left:auto;background:none;border:none;color:var(--dim);cursor:pointer;font-size:var(--fs-body)}
#dbgLog{flex:1;overflow-y:auto;padding:6px 12px;font-size:var(--fs-caption);font-family:'Noto Sans KR Variable',sans-serif;color:var(--blue);line-height:1.6}
.dbg-toggle{position:fixed;bottom:40px;right:16px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:var(--fs-caption);color:var(--dim);cursor:pointer;z-index:8999;font-family:inherit} /* bottom 40 = 푸터(.site-footer ~28px) 위로 12px — 푸터 신설 전 12px 에서 상향 */

/* ══ 아크패시브 그리드 ══ */
.ark-section { margin-bottom: 20px; width: 100%; }
.ark-section-label {
  font-size: var(--fs-small); font-weight: 600; color: var(--text);
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.ark-label-main {
  grid-column: 2; justify-self: center;
  display: inline-flex; align-items: center; gap: 4px;
}
.ark-label-text { font-weight: 600; }
.ark-label-unit { font-weight: 600; font-size: var(--fs-small); }
.ark-section-label .karma-bonus {
  grid-column: 3; justify-self: end;
  font-size: var(--fs-small); font-weight: 400; opacity: 0.8;
  white-space: nowrap;
}
.ark-grid-wrap { display: flex; flex-direction: column; gap: 9px; }
.ark-row { display: flex; gap: 11px; justify-content: flex-start; align-items: flex-start; }
/* 깨달음/도약 들여쓰기 트리 */

.ark-node-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
.ark-node-btn {
  width: 43px; height: 43px; border-radius: 50%;
  border: 2px solid var(--border);
  overflow: hidden; cursor: pointer;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
}
.ark-node-btn img { width: 100%; height: 100%; object-fit: cover; }
.ark-node-btn.inactive { filter: grayscale(1) brightness(0.4); }
.ark-node-btn.partial { filter: none; border-color: var(--success); } /* 선택 노드(부분/완료) 녹색 테두리 */
.ark-node-btn.full    { filter: none; border-color: var(--success); }
.ark-node-label {
  font-size: var(--fs-small); font-weight: 600; white-space: nowrap;
  line-height: 1;
  color: var(--click);
}
.ark-node-label.inactive { color: var(--dim); }
/* 모바일 축소 — 노드 11행 × 3그룹이라 행마다의 몇 px 가 섹션 전체에서 크게 누적된다.
   아이콘 43→38(행 높이 59→54) · 행 간격 9→6 · 그룹 간격 20→13. 라벨 폰트(--fs-small)는
   '10/30' 판독성 때문에 유지. 가로는 6열 최대 행이 313→283px 로 오히려 여유가 생긴다 */
@media(max-width:820px){
  .ark-node-btn{width:38px;height:38px}
  .ark-grid-wrap{gap:6px}
  .ark-section{margin-bottom:13px}
}

/* 아바타 */
.av-grade-btn {
  font-size: var(--fs-caption); font-weight: 700;
  padding: 2.4px 8.4px;
  border: none;
  cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  background: none;
  color: var(--click);
}
/* 아바타 등급 드롭다운 팝업 */
.av-popup {
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.8);
}
.av-popup-opt {
  padding: 6px 10px; border-radius: 5px;
  cursor: pointer; font-size: var(--fs-caption); font-weight: 600;
}
.av-popup-opt.active { font-weight: 800; }

/* 보석 레벨 팝업 */
.gem-lv-popup {
  border-radius: 10px; padding: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,.85);
  min-width: 160px;
}
.gem-popup-label { font-size: var(--fs-caption); color: var(--dim); margin-bottom: 4px; font-weight: 600; letter-spacing: .5px; }
.gem-popup-tiers { display: flex; gap: 4px; margin-bottom: 6px; }
.gem-tier-btn {
  flex: 1; padding: 4px; border-radius: 5px; cursor: pointer;
  font-size: var(--fs-caption); font-weight: 700; border: 1px solid var(--border);
  background: var(--surface); text-align: center;
}
.gem-tier-btn.active { background: var(--accent); color: var(--text-inv); border-color: var(--accent); }
.gem-popup-levels { display: flex; gap: 3px; }
.gem-lv-opt {
  flex: 1; padding: 4px 2px; border-radius: 4px; cursor: pointer;
  font-size: var(--fs-caption); font-weight: 700; border: 1px solid var(--border);
  background: var(--surface); text-align: center;
}
.gem-lv-opt.active { background: var(--accent); color: var(--text-inv); border-color: var(--accent); }
.gem-popup-del {
  width: 100%; margin-top: 4px; padding: 4px; border-radius: 5px;
  border: 1px solid var(--border); background: none;
  color: var(--red); font-size: var(--fs-caption); cursor: pointer;
}

/* 장비 리뉴얼 */
/* 장비 칩(재련·품질) — 선택 칩이라 **값에 따라 폭이 바뀌지 않는다**(2026-08-30).
   실측 폭: '품질 0' 46 / '전설 +11' 59 / '품질 100' 62 / 2글자 등급 +25 64 / '에스더 +25' 76
   → 가장 긴 상태 76px 로 고정. 무기의 재련·품질 두 칩이 세로로 겹쳐 있어 폭이 다르면 바로 드러난다 */
.equip-chip {
  display: inline-block; box-sizing: border-box; min-width: 76px; text-align: center;
  font-size: var(--fs-small); font-weight: 600; padding: 1px 5px; line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  color: var(--click);
}
.equip-chip.disabled { opacity: .4; cursor: default; pointer-events: none; }
.equip-dd-opt.grade-serca { color: var(--grade-serca); }
.equip-dd-opt.grade-ancient  { color: var(--grade-ancient); }
.equip-dd-opt.grade-relic    { color: var(--grade-relic); }
.equip-dd-opt.grade-esther   { color: var(--grade-esther); }
/* 장비 강화 칩은 등급색 — 전율/에스더 (공통 클릭-수정 칩 규칙의 예외, 사용자 결정 2026-08-23) */
.equip-chip.grade-serca  { color: var(--grade-serca); }
.equip-chip.grade-esther { color: var(--grade-esther); }
/* 무기 품질 칩 — 숫자에 등급색(100 전설 / 90 영웅 / 70 희귀 / 30 고급). 30 미만은 색 없이 공통 칩 색(--click) */
.equip-chip.q-100 { color: var(--quality-100); }
.equip-chip.q-90  { color: var(--quality-90); }
.equip-chip.q-70  { color: var(--quality-70); }
.equip-chip.q-30  { color: var(--quality-30); }
/* 장비 드롭다운 */
.equip-dropdown {
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.8);
  max-height: 240px; overflow-y: auto;
}
.equip-dd-opt {
  padding: 5px 10px; border-radius: 5px; cursor: pointer;
  font-size: var(--fs-caption); font-weight: 600;
}
.equip-dd-opt.active { font-weight: 800; background: var(--dd-hover); }

/* 아이콘 박스는 38×38 **고정** — 미장착 슬롯(이모지 자리표시)에서도 장착 슬롯과 크기가 같아야 한다.
   높이를 img(34px)에 맡기면 이모지 행만 텍스트 높이로 쪼그라든다 (2026-09-03) */
.equip-icon-wrap {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 6px; overflow: hidden;
}
.equip-icon-wrap img {
  width: 34px; height: 34px; object-fit: cover;
  display: block; flex-shrink: 0;
}

/* ══ 장비 · 장신구 · 아바타 통합 카드 ══
   .ea-cols 내부 2단(좌 장비 .ea-col#equipAvSection / 우 장신구 .ea-col#accSection), 하단 .av-strip 가로 */
.ea-cols { display: grid; grid-template-columns: auto 1px auto; justify-content: space-between; gap: 4px 4px; align-items: stretch; } /* 두 열 모두 내용 폭: 넓은 화면은 양끝 배치(장신구 우측), 좁아지면 간격이 줄어 최소 2.4px */ /* stretch: 장비 열이 장신구 열 높이에 맞춰 행 간격을 균등 분배 */
.ea-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ea-col-equip { justify-content: flex-start; }
.ea-divider { width: 1px; background: var(--border); align-self: stretch; } /* 장비 | 장신구 세로 구분선 — grid 가운데 셀, space-between 으로 양쪽 간격 균등 → 장비와 귀걸이의 정중앙 (2026-08-23) */
.ea-rows-top { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; } /* 무기~보주 8행이 남는 높이를 균등 분배 (행 높이가 모두 .ea-icon-col 로 같아 아이콘 간격도 일정) */
.ea-sub-label { height: 49px; display: flex; align-items: flex-end; font-size: var(--fs-body); font-weight: 700; color: var(--text); line-height: 1.2; padding: 0 0 0 2px; margin-bottom: -2px; } /* 높이 = 팔찌 행 − 좌열 마지막 행(보주) → 보주 상단이 팔찌 상단과 일치. 텍스트는 구분선에 바짝 */
.ea-row { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; }
.ea-body-equip { min-height: 38px; justify-content: center; } /* 장비 행: 칩을 아이콘(38px) 세로 중앙에. 무기는 품질 칩까지 2줄이라 고정 높이가 아니라 최소 높이 */
.ea-icon-col { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; width: 40px; }
.ea-icon-label { font-size: var(--fs-small); color: var(--dim); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.ea-body { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; margin-top: 0; } /* 첫 칩(레벨/재련) 상단 = 아이콘 상단, 텍스트끼리 가운데 정렬 */
.ea-av-icon {
  width: 38px; height: 38px; border-radius: 6px;
  overflow: hidden; cursor: pointer; box-sizing: border-box;
  border: 2px solid var(--border); background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* 아이콘 등급 테두리 + 옅은 배경 (.gbd-*) — 장비/완갑/장신구/팔찌/아바타 공용, 게임 등급 컬러 변수 */
.equip-icon-wrap,.acc-icon-outer{border:2px solid var(--border);background:var(--surface2);box-sizing:border-box}
.gbd-esther{border-color:var(--grade-src-esther);background:var(--grade-bg-esther)}
/* 전율(세르카): 테두리·배경은 고대와 동일, 모서리 문양만 ::after 로 덧씌움 (인게임 슬롯과 동일 — 사용자 결정 2026-08-23). .gbd-orn 은 완갑(전율 완갑, 해방 등급 테두리 유지 + 문양) */
.gbd-serca{border-color:var(--grade-src-ancient);background:var(--grade-bg-serca)}
.gbd-serca::after,.gbd-orn::after{content:"";position:absolute;top:0;left:0;width:34px;height:34px;background:var(--grade-orn-serca) 0 0/100% 100% no-repeat;pointer-events:none}
.gbd-ancient{border-color:var(--grade-src-ancient);background:var(--grade-bg-ancient)}
.gbd-relic{border-color:var(--grade-src-relic);background:var(--grade-bg-relic)}
.gbd-legendary{border-color:var(--grade-src-legendary);background:var(--grade-bg-legendary)}
.gbd-epic{border-color:var(--grade-src-epic);background:var(--grade-bg-epic)}
.gbd-rare{border-color:var(--grade-src-rare);background:var(--grade-bg-rare)}
.gbd-uncommon{border-color:var(--grade-src-uncommon);background:var(--grade-bg-uncommon)}
.ea-av-icon img { width: 100%; height: 100%; object-fit: cover; }
.av-strip { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 4px 14px; margin-top: 6px; padding-top: 4px; padding-bottom: 0; border-top: 1px solid var(--border); } /* 4개 좌우 균등 배치 — 구분선 위에 장비 열의 아바타 라벨 */
.av-item { display: flex; align-items: center; gap: 6px; }
.av-item .ea-icon-label { line-height: 1; margin-bottom: -2px; }

/* 아크패시브 내부 박스 - 내용 크기에 맞게 수축, 부모에서 가운데 정렬 */
.ark-inner-box {
  display: flex; flex-direction: column;
  gap: 10px; align-items: flex-start;
  width: fit-content; margin: 0 auto;
}

/* ══ 악세사리 리뉴얼 ══ */
.acc-row2 {
  display: flex; align-items: flex-start; gap: 6px; /* 아이콘+부위명을 행 상단에 — 장비 열 첫 행(무기)과 상단 정렬 */
  padding: 3px 0;
}
.acc-icon-outer { /* 크기 고정 이유는 .equip-icon-wrap 주석 참조 */
  flex-shrink: 0; width: 38px; height: 38px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 6px; overflow: hidden;
}
.acc-icon-wrap2 { position: relative; }
.acc-icon-wrap2 img { width: 34px; height: 34px; object-fit: cover; display: block; }
/* 옵션 열: 주스탯 1줄 + 연마 3줄 (팔찌는 효과 5줄) */
.acc-opt-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; } /* 칩 폭 = 장신구 열 폭 (목걸이~팔찌 우측 가장자리 정렬) */
.brac-dd-popup{max-height:400px;padding:0 4px} /* 폭은 공통 리스트 규칙(max-content) — 옵션 텍스트가 축약되어 한 줄 */
.brac-dd-popup .eng-dd-opt{line-height:1.5;display:block}
.brac-dd-header{display:none}
.brac-fx-row{display:flex;align-items:center;gap:6px;padding:1px 5px;cursor:pointer;font-size:var(--fs-caption);font-weight:600;line-height:1.5;color:var(--click)}
.brac-fx-text{flex:1;min-width:0;white-space:normal;line-height:1.5}
.brac-fx-row .brac-val-sm{font-size:var(--fs-xs)} /* 긴 옵션(항목 2개 이상)의 숫자만 한 단계 축소 */

.acc-stat-row { font-size: var(--fs-caption); font-weight: 600; line-height: 1.5; padding: 1px 5px; display: flex; align-items: center; gap: 4px; color: var(--dim); }
.acc-stat-val { font-weight: 700; color: var(--click); } /* 연마 값(.acc-polish-val)과 동일 굵기 */
.acc-polish-col {
  display: flex; flex-direction: column;
  justify-content: flex-start; align-items: stretch;
  gap: 3px; padding: 0; min-width: 0;
}
.acc-polish-row {
  font-size: var(--fs-caption); font-weight: 600; line-height: 1.5; cursor: pointer; padding: 1px 5px;
  display: flex; align-items: center;
  color: var(--click);
}
.acc-polish-val{font-weight:700}
.acc-opt-label{color:var(--dim);font-weight:600} /* 옵션 라벨(추피/치피…)은 회색, 값은 의미색 */
.acc-polish-row.empty,.brac-fx-row.empty{justify-content:center;opacity:.7} /* 빈 슬롯: 가운데 + 기호, 살짝 흐리게 */
.acc-opt-empty{color:var(--dim);font-weight:700}
/* 연마옵션 드롭다운 */
.acc-polish-popup {
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.8);
  max-height: 320px; overflow-y: auto;
}
.acc-dd-opt {
  padding: 4px 8px; border-radius: 4px; cursor: pointer;
  font-size: var(--fs-caption);
}
.acc-dd-opt.active { font-weight: 800; }

.acc-dd-opt.disabled { pointer-events: none; }

/* 공통 Tooltip */
.game-tooltip{position:fixed;z-index:99999;pointer-events:none;background:var(--popup-bg);border:1px solid var(--blue);border-radius:8px;padding:8px 12px;max-width:300px;font-size:var(--fs-caption);line-height:1.5;color:var(--text);box-shadow:0 6px 20px rgba(0,0,0,.6);white-space:pre-wrap;transition:opacity .1s}
@media(hover:none){.game-tooltip{max-height:40vh;overflow:hidden}} /* 터치: 요소 위 앵커 배치 — 팝업과 세로 공간 공유 */
.game-tooltip .tt-name{font-weight:700;font-size:var(--fs-small);margin-bottom:4px;color:var(--yellow)}
.game-tooltip .tt-desc{color:var(--tt-text)}
.game-tooltip .tt-val-green{color:var(--tt-green)}
.game-tooltip .tt-val-red{color:var(--tt-red)}
.game-tooltip .tt-val-yellow{color:var(--tt-yellow)}
/* 스킬 툴팁 본문 줄 (skill.js showSkillTT) — 폰트 크기는 .game-tooltip 의 --fs-caption 상속 */
.game-tooltip .tt-meta{color:var(--dim)}  /* 스킬 타입·분류·쿨 — 설명보다 한 단계 흐리게 */
.game-tooltip .tt-atk{color:var(--red)}   /* 백/헤드어택 표기 */
.game-tooltip .tt-buff{color:var(--accent)}
@media(max-width:820px){.game-tooltip{max-width:min(300px,calc(100vw - 16px))}.game-tooltip.tt-agr{font-size:var(--fs-xxs)}} /* 모바일: 툴팁 폭을 화면 안으로 제한(잘림·폭 변동 방지), 아크그리드 툴팁은 11px (2026-08-24) */

/* ═══ 전역 팝업 시스템 ═══ */
.global-popup{padding:10px 12px;min-width:200px;max-width:260px}
.stepper-popup{padding:6px 8px;min-width:0} /* 스테퍼(아크패시브 노드 등)는 소형 */

/* Type A: 숫자+슬라이더 */
.value-popup .vp-label{font-size:var(--fs-small);font-weight:600;margin-bottom:6px;color:var(--text)}
.value-popup .vp-range-hint{display:flex;justify-content:space-between;font-size:var(--fs-caption);color:var(--dim);margin-bottom:2px}
.value-popup .vp-slider{width:100%;accent-color:var(--blue);cursor:pointer;margin-bottom:6px}
.value-popup .vp-input-row{display:flex;align-items:center;gap:6px}
.value-popup .vp-input{width:80px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:4px 6px;font-size:var(--fs-small);text-align:right}
.value-popup .vp-unit{font-size:var(--fs-caption);color:var(--dim)}
.value-popup .vp-btn{padding:4px 12px;background:var(--blue);color:var(--text-inv);border:none;border-radius:4px;cursor:pointer;font-size:var(--fs-caption)}

/* Type B: +/- 버튼 */
.stepper-popup .sp-label{font-size:var(--fs-caption);font-weight:600;margin-bottom:4px;color:var(--text);text-align:center}
.stepper-popup .sp-row{display:flex;align-items:center;justify-content:center;gap:6px}
.stepper-popup .sp-btn{width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:var(--fs-small);cursor:pointer;display:flex;align-items:center;justify-content:center}
.stepper-popup .sp-val{font-size:var(--fs-small);font-weight:700;min-width:44px;text-align:center;font-variant-numeric:tabular-nums}

/* 계산 패널 툴팁 커서 */
.cv-has-tip{cursor:help} /* 정보 툴팁 — 밑줄 없음 (help 커서만) */
.clickable{cursor:pointer;color:var(--click);padding:1px 5px}
/* 드롭다운형 클릭 텍스트 (네이티브 select 대체 — openEquipDropdown 커스텀 팝업 사용): 현재값 + ▾ */
/* 선택 칩 베이스 — **선택값에 따라 폭이 바뀌지 않는다**(2026-08-30). 값이 짧아졌다 길어질 때마다
   칩이 늘었다 줄면 옆 항목까지 밀려 목록이 흔들린다. 폭 고정 3종(inline-block · box-sizing · text-align:center)은
   여기 한 곳에 두고, **쓰는 쪽은 가장 긴 옵션 기준 min-width 하나만** 덮는다.
   기본 44px = 2자리 숫자·2글자 한글 + ▾ 가 들어가는 최소치 */
.dd-sel{display:inline-block;box-sizing:border-box;text-align:center;min-width:44px;white-space:nowrap;font-size:var(--fs-small);font-weight:600} /* .agr-slot-name / .eng-name 과 동일 톤 */
.sk-sub .dd-sel{min-width:62px}    /* 스킬 레벨 — 'Lv. 14' 기준 (2026-08-24) */
.dd-sel-food{min-width:176px}      /* 만찬·음식 — **두 행 중 가장 긴 옵션** 기준(실측 만찬 '공이속 +5% · 무공 +1600' 176 > 음식 '에아달린 (공속 +3%)' 147). 폭을 공유해 같은 카드 안에서 컨트롤 좌우가 맞으므로, 어느 쪽 옵션을 고쳐도 이 값을 다시 재야 한다 */
.dd-sel-card{min-width:104px}      /* 카드 각성 — 가장 긴 옵션 '30각(+15%)' 기준 */
.dd-sel::after{content:'▾';margin-left:4px;font-size:var(--fs-caption);color:var(--dim)}
/* 카르마 셀렉트 */
.karma-bonus{font-size:var(--fs-small);color:inherit;white-space:nowrap}
/* 스킬/보석 서브 행 */
.sk-sub-row{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 6px;font-size:var(--fs-small);color:var(--dim)}
.sk-sub-left{text-align:left}
.sk-sub-right{text-align:right;color:var(--blue)}
.sk-point-over{color:var(--red)} /* 스킬포인트 초과 (skill.js updateSkillPointDisplay) */

/* ════════════════════════════════════════════
   데미지 분석 탭
   ════════════════════════════════════════════ */
.dmg-loading{text-align:center;padding:40px 20px;color:var(--dim);font-size:var(--fs-body)}

/* 스킬 데미지 서브탭 (폭주/비폭주) */
.dmg-subtab-bar{display:flex;gap:4px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.dmg-subtab-btn{padding:8px 16px;color:var(--dim);cursor:pointer;font-size:var(--fs-small);border:none;background:none;border-bottom:2px solid transparent;font-family:inherit}
.dmg-subtab-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* 스킬 상세 세그먼트 탭 (합계 + 툴팁 공격 페이즈별) — 세그 2개 이상인 스킬에만 렌더.
   상세 패널 안이라 서브탭보다 한 단계 작다. 세그명이 길어질 수 있어 줄바꿈 허용 */
.dmg-seg-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.dmg-seg-tab{padding:5px 10px;color:var(--dim);cursor:pointer;font-size:var(--fs-caption);border:none;background:none;border-bottom:2px solid transparent;font-family:inherit;white-space:nowrap}
.dmg-seg-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.dmg-seg-panel{display:none}
.dmg-seg-panel.active{display:block}

/* 스킬 데미지 테이블 */
.dmg-table-header{display:grid;grid-template-columns:32px 1fr 112px 90px 60px 80px;gap:16px;align-items:center;padding:4px 8px;font-size:var(--fs-small);color:var(--dim);border-bottom:1px solid var(--border)} /* 헤더 폰트 = 본문 행과 동일(14px), 모바일은 --fs-caption 13px(아래 미디어쿼리). 2행 셀(치명타/(예둔X)) 대비 세로 중앙. 치명타 열 112px = "치명타 ▾(예둔X)" 14px 한 줄(≈106px)이 말줄임 없이 들어가는 폭 — .dmg-row-main 과 동일 템플릿 */
.dmg-table-header>span{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 직계 셀만 — 셀 내부 .dmg-head-main/.dmg-head-sub 에 nth-child 규칙이 새지 않도록 */
.dmg-table-header>span:nth-child(2){text-align:left} /* 스킬 — 본문 스킬명(좌측 정렬)에 맞춤 */
.dmg-table-header .sortable{cursor:pointer}
.dmg-table-header .sort-active{color:var(--accent);font-weight:600}
/* 정렬 ▾ — 모든 sortable 헤더에 항상 렌더(visibility:hidden)해 공간을 선점 → 활성 전환 시 텍스트 이동 없음. PC: 셀 끝(치명타(예둔X) ▾). 모바일 2행 배치는 아래 미디어쿼리 */
.dmg-table-header .sortable::after{content:' ▾';visibility:hidden}
.dmg-table-header .sort-active::after{visibility:visible}
.dmg-head-sub{display:inline} /* 치명타 보조 라벨 "(예둔X)" — 데스크톱 한 줄, 모바일 2행(미디어쿼리) */
.dmg-table{display:flex;flex-direction:column;gap:2px}
.dmg-row{background:var(--surface);border-radius:6px;padding:0;cursor:pointer}
.dmg-row.group-sum{cursor:default;background:var(--surface2)} /* 블러디 러쉬 합계 요약 행 — 상세 없음 */
.dmg-row.group-member .dmg-row-main{padding-left:20px} /* 그룹 타별 행 들여쓰기 */
.dmg-row-main,.dmg-total-row{display:grid;grid-template-columns:32px 1fr 112px 90px 60px 80px;gap:16px;align-items:center;padding:6px 8px;font-size:var(--fs-small)} /* 열 간격 16px + 쿨 열 60px(칩 44 + 여백) — 수치 열(기대피해·쿨·DPS)이 붙어 보이지 않게. 스킬 1fr 이 흡수한다 */
.dmg-skill-icon{width:28px;height:28px;border-radius:4px;object-fit:cover}
.dmg-skill-name{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 행 클릭(상세 토글) 유도 — 블랙/화이트 */
.dmg-row.group-sum .dmg-skill-name{color:inherit} /* 합계 요약 행은 클릭 없음 → 검회색 */
.dmg-critval{justify-self:center;min-width:48px;text-align:right;font-weight:600;color:var(--yellow);font-variant-numeric:tabular-nums} /* 치명타 확정값 (예둔 장착 시 발동 X) */
.dmg-val{justify-self:center;min-width:48px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums} /* 셀 중앙 고정폭 박스 + 박스 내 우측 정렬 → 헤더 중심과 일치 */
.dmg-cool{justify-self:center;min-width:44px;text-align:center;font-size:var(--fs-caption);color:var(--dim);font-variant-numeric:tabular-nums} /* 선택 칩 폭 고정 — 실측 '1.0s' 36 / '34.6s'·'99.9s' 44 / '600.0s' 52. 현실 쿨 상한인 99.9s 기준 44px(수동 편집 상한 600s 는 팝업 경계값이라 기준으로 잡지 않는다 — 100s 이상만 칩이 늘어난다). tabular-nums 로 자릿수 폭도 고정 */
.dmg-cool.overridden{color:var(--yellow)} /* 수동 편집된 쿨 */
.dmg-cool-head{display:inline-flex;align-items:center;justify-content:center;gap:3px}
.cmp-dps-total{font-size:var(--fs-small);color:var(--accent);font-weight:700;margin-left:4px;margin-right:auto} /* DPS 모드 합계 — 딜 사이클 DPS */
.cmp-total-pct{font-size:var(--fs-caption);font-weight:400;margin-left:2px;white-space:nowrap} /* 합계 옆 괄호 증감 — 기준 세팅 대비, 막대 % 라벨과 같은 0점 */
.cmp-total-pct.up{color:var(--success)}
.cmp-total-pct.down{color:var(--red)}
:root.light .cmp-total-pct.up{color:var(--grade-uncommon)} /* 라이트 --success 대비 미달 보정 — .cyc-item-slack 과 같은 파생값(팔레트 주석) */
.dmg-dps{justify-self:center;min-width:48px;text-align:right;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}
/* DPS 합계 (참고용) — 표 맨 아랫줄. 열 템플릿·패딩은 .dmg-row-main 과 공유(위 규칙)해 DPS 열 아래에 값이 정확히 선다 */
.dmg-total-row{margin-top:2px;border-top:1px solid var(--border)}
.dmg-total-label{grid-column:2/6;color:var(--dim);font-weight:600}
.dmg-total-note{font-size:var(--fs-caption);font-weight:400}
.dmg-total-val{grid-column:6;justify-self:center;min-width:48px;text-align:right;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}

/* 상세 계산식 */
/* 블록 대제목 = 아코디언 토글 버튼. border:none 은 UA 테두리 제거용 —
   위쪽 컬러 선을 두지 않는다(감싸는 .dmg-bd-block 의 1px 테두리와 중복이고, 브레이크다운에서
   **컬러 선을 쓰는 곳은 여기 하나도 없다**: 위계는 색·굵기·여백으로만 — DESIGN.md 작업 규칙 3) */
.dmg-bd-section{display:flex;align-items:center;gap:6px;width:100%;text-align:left;font-family:inherit;font-weight:700;color:var(--blue);padding:6px 8px;margin-top:8px;border:none;background:color-mix(in srgb,var(--blue) 9%,transparent);border-radius:4px;font-size:var(--fs-caption);cursor:pointer}
.dmg-bd-section:first-child{margin-top:0}
.dmg-bd-chev{margin-left:auto;transition:transform .15s}
.dmg-bd-block:not(.open) .dmg-bd-chev{transform:rotate(-90deg)}
/* 접힘 상태 — 초기값은 damage_ui.js _bdCollapsed 가 정한다(모바일만 접고 시작, 데스크톱은 .open 부여) */
.dmg-bd-body{display:none}
.dmg-bd-block.open .dmg-bd-body{display:block}
/* 결과 요약 — F 블록에서 뺀 기대 피해·치명타(PC·모바일 공통). 블록을 전부 접어도 항상 보인다.
   데스크톱 2열 그리드에서는 전폭(1/-1), 모바일 1열에서는 그대로 첫 줄 */
.dmg-bd-summary{grid-column:1/-1;display:flex;flex-direction:column;gap:2px;margin-bottom:2px}
.dmg-bd-group{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:600;color:var(--text);font-size:var(--fs-mono);padding:4px 0 2px;margin-top:12px} /* 좌측 바 없음 — 그룹 구분은 margin-top 여백이 담당 */
.dmg-bd-formula{font-size:var(--fs-mono);color:var(--dim);padding:2px 0 2px 10px;white-space:pre-wrap} /* 본문 폰트 상속 — 상세내역 타 행과 통일 (monospace 제거 2026-09-01) */
/* 소그룹 행: 본문색·600, 하위항목: 회색·가이드선. 라벨–숫자 사이는 옅은 점선 리더(::after)로 연결 */
.dmg-bd-sub{display:flex;justify-content:space-between;align-items:baseline;gap:4px;padding:2px 0 1px 20px;font-size:var(--fs-mono);color:var(--dim);font-weight:400}
.dmg-bd-sub.parent{font-weight:600}
.dmg-bd-sub span:first-child{order:0;white-space:nowrap}
.dmg-bd-sub span:last-child{order:2;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dmg-bd-sub.parent span:last-child{font-weight:700}
.dmg-bd-sub.child{padding:1px 0 1px 8px;margin-left:26px;border-left:1px solid var(--border);color:var(--dim);font-weight:400}
.dmg-bd-cat{margin-top:4px}
.dmg-bd-cat + .dmg-bd-cat{margin-top:6px}
.dmg-bd-formula.gap,.dmg-bd-result.gap{margin-top:8px}
.dmg-bd-result{display:flex;justify-content:space-between;padding:3px 6px;font-size:var(--fs-caption);font-weight:700;color:var(--yellow);background:color-mix(in srgb,var(--yellow) 8%,transparent);border-radius:3px;margin-top:2px}
.dmg-bd-result span:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} /* F 결과값 — 자리수가 같으면 자릿수 열이 세로로 맞도록 (비례폭이면 1 과 8 의 폭이 달라 어긋난다) */
.dmg-bd-result.hl{color:var(--success)} /* 강조 결과 행 = F 블록의 '기대 피해' (치명타는 기본 노랑) — 예둔 장착 여부와 무관 */

/* 상세 펼침 */
.dmg-detail{padding:0 12px 8px;border-top:1px solid var(--border);cursor:default} /* 행(.dmg-row) 클릭 토글 영역 밖 — 상세 내용은 기본 커서 */
.dmg-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:var(--fs-caption);align-items:start} /* 2열: [A·B]|[C·D] / [E]|[F] */
.dmg-bd-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.dmg-bd-block{min-width:0;max-width:100%;background:var(--surface);border-radius:6px;padding:6px 8px;border:1px solid var(--border)}
@media(max-width:820px){.dmg-breakdown{grid-template-columns:1fr}} /* 모바일 1열: A B C D E F 순 */

/* ═══════════ 데미지 비교 그래프 (프로필 아래 고정 섹션) ═══════════ */
.cmp-section{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:5px 14px 8px;margin-top:10px} /* 상하 패딩은 헤더 줄(.cmp-head)을 테두리 쪽으로 붙이려 좁게 — 좌우 14px 는 유지 */
.cmp-section.hide{display:none} /* 캐릭터 조회 전·로드 실패 시에만 숨김 */
/* 로드 중 — 차트가 준비되기 전에도 섹션을 흐름에 남겨 최종 높이(.cmp-chart-wrap 데스크톱 205px / 모바일 150px)를 미리 확보한다.
   display:none 으로 접어두면 차트가 뜨는 순간 아래 내용이 통째로 밀려 내려가 화면이 번쩍인다.
   아직 의미 없는 토글·기준값 버튼만 visibility 로 감춘다(자리는 유지) */
.cmp-section.cmp-loading .cmp-head{visibility:hidden}
/* 헤더 줄: 데미지/DPS 토글 좌측, 기준값 버튼 우측 */
.cmp-head{position:relative;z-index:2;display:flex;align-items:center;gap:8px;margin-bottom:0} /* 토글 · DPS합(DPS 모드) · (우측) 기준값 버튼 */
/* 모바일: 폭이 좁아 DPS 합계가 2줄이 될 수 있다 — 가운데 정렬이면 토글·버튼이 그 차이만큼 내려앉는다.
   위로 붙여 세 항목의 윗변을 맞춘다. 데스크톱은 전부 1줄이라 높이 차가 없어 가운데 정렬 유지 */
@media(max-width:820px){
  .cmp-head{align-items:flex-start}
  /* DPS 합계는 테두리 없는 맨 텍스트라 윗변을 맞추면 글자가 토글 라벨보다 6px 떠 보인다(토글은 테두리+패딩만큼 안쪽).
     박스가 아니라 **글자 높이**를 맞추는 보정 — 값은 토글의 border+padding 합 */
  .cmp-dps-total{padding-top:6px;font-size:var(--fs-xs)}
  .cmp-total-pct{font-size:var(--fs-xxs)}
}
/* 초협폭(구형 320px 등)에서는 토글·DPS합·버튼의 min-content 합이 폭을 넘는다 — 버튼을 다음 줄로 내려
   가로 넘침을 막는다. 360px 이상에서는 한 줄에 들어가므로 이 폭에서만 건다(위 폭에 걸면 375px 도 2행이 된다) */
@media(max-width:359px){ .cmp-head{flex-wrap:wrap} }
/* 데미지/DPS 세그먼트 토글 (버튼 1개, 활성 쪽 강조) */
.cmp-toggle{display:flex;background:transparent;border:1px solid var(--border);border-radius:6px;padding:2px;cursor:pointer;font-family:inherit}
.cmp-toggle-opt{flex:1;text-align:center;padding:2px 10px;border-radius:4px;font-size:var(--fs-caption);color:var(--dim);line-height:1.4;white-space:nowrap}
.cmp-toggle-opt.active{background:var(--surface2);color:var(--text);font-weight:600}
/* 기준값 버튼 = .cmp-toggle 베이스(모서리/폭) 공유하되 박스 자체를 단색 액센트로 채움 (.btn-primary 톤, 이중 프레임 없음). 높이 = 토글과 동일(25px) */
.cmp-baseline-btn{padding:0;background:var(--accent);border-color:var(--accent);margin-left:auto}
.cmp-baseline-btn .cmp-toggle-opt{padding:3px 10px;color:var(--text-inv);font-weight:600}
/* 모바일: 헤더 4요소가 한 줄을 나눠 쓰므로 기준값 버튼을 한 단계 축소해 **줄바꿈 없이** 넣는다
   (11px·nowrap 이면 320~430px 전 구간 1줄 — 접히면 헤더 높이가 두 배가 된다) */
@media(max-width:820px){.cmp-baseline-btn .cmp-toggle-opt{white-space:nowrap;font-size:var(--fs-xxs);line-height:1.25;padding:2px 8px}}
/* 차트 컨테이너 — 바깥은 가로 스크롤, 안쪽(.cmp-chart-inner)이 Chart.js 크기 기준. 최소 폭은 JS가 스킬 수×60px 로 설정 → 모바일에서 막대 비율·스킬 간 간격 유지 */
.cmp-chart-wrap{overflow-x:auto;height:205px;margin-top:-12px} /* 버튼 줄 아래로 끌어올림 — 230→205 (막대 축소분만큼 섹션 축소 2026-08-23). 플롯 상단 ~23% 는 증감 라벨 여유(y max ×1.3, damage_compare.js CMP_Y_HEADROOM) */
/* 모바일: 205→150 (2026-08-30). 이 섹션은 탭과 무관하게 상시 노출이라 4개 탭 전부의 스크롤을 먹는다.
   x축 3줄 라벨 영역(72px)은 고정이므로 줄어드는 건 플롯 영역뿐 — 133→78px, 최장 막대 102→60px.
   막대만 줄이고 컨테이너를 두면 빈 공간이 남으므로 **줄어든 만큼 wrap 높이도 함께 줄인다** */
@media(max-width:820px){.cmp-chart-wrap{height:150px}}
.cmp-chart-inner{position:relative;height:100%}

/* ══ 스킬/사이클 탭 — 딜 사이클 섹션 (cycle_ui.js) + 팔찌 효율 배지 ══ */
.brac-eff{font-size:var(--fs-small);font-weight:700;color:var(--accent);line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums} /* 장신구 카드 "팔찌" 라벨 아래 효율 00.0% — 표시 전용 */
.cyc-section{position:relative}
.cyc-ctrl{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:var(--fs-small);margin-bottom:12px} /* 항목 단위 줄바꿈 — 모바일에서 가로로 늘어지지 않음 */
.cyc-ctrl-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cyc-note{color:var(--dim);font-size:var(--fs-caption)}
.cyc-warn{color:var(--red);font-size:var(--fs-caption)} /* 쿨 대기 경고 — 기준 스킬(산책) 외 항목의 대기, 폭주 안 대기 */
/* 세로 시퀀스 열 — 구간(segments) 순 1열씩, 행 = [아이콘][이름 + 뱃지][시전시간] */
.cyc-seq-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;max-width:600px;margin-top:16px} /* 광기: 광기 / 풀딜 */
.cyc-seq-cols[data-n="1"]{grid-template-columns:minmax(0,1fr);max-width:none} /* 단일 열(광기 쿨마다) — 섹션 폭을 꽉 채워 화면 폭 따라 가변 (2026-09-01 사용자 확정) */
.cyc-seq-cols[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none} /* 3구간(처단자 333: 비폭주A / 비폭주B / 폭주) — PC 는 한 줄에 전부 */
.cyc-seq-col{display:flex;flex-direction:column;gap:3px;min-width:0}
.cyc-seq-head{color:var(--text);font-weight:700;font-size:var(--fs-small);padding:0 4px 4px;border-bottom:1px solid var(--border);margin-bottom:4px} /* 열 헤더 폭주/비폭주 — 섹션 제목(--fs-body)보다 한 단계 아래 */
.cyc-seq-stats{display:flex;flex-direction:column;gap:2px;padding:0 6px 6px;font-size:var(--fs-small);font-variant-numeric:tabular-nums} /* 헤더 아래 행: 공속 → 딜 → 사이클(구간 소요시간, 초각성 제외) */
.cyc-seq-stat{display:flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap}
.cyc-seq-val,.cyc-seq-time{font-weight:600} /* 계산값 → 검회색(body 상속) */
.cyc-item{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:6px;font-size:var(--fs-small);min-width:0} /* 클릭 항목은 공통 .clickable 칩 규칙 */
.cyc-item.fixed{background:var(--chip-bg)} /* [폭주] 고정 행 — 클릭 없음, 음영만 다른 행과 통일 (사용자 요청) */
.cyc-item[data-src]:not([data-bound]){user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} /* 드래그 가능 행 — 드래그 중 텍스트 선택 방지 */
.cyc-item.dragging{opacity:.55;outline:1px dashed var(--accent)} /* 드래그 중 행 — 같은 열 안에서 상하 이동 */
.cyc-item.hyper .cyc-item-icon{box-shadow:0 0 0 1px var(--blue)} /* 부동 항목(초각성·첫 기회·쿨마다) 신호 — 아이콘 링 */
.cyc-item[data-src] .cyc-item-time,.cyc-item[data-bound="enter"] .cyc-item-time{margin-left:auto} /* 아이콘 전용 행 — 시전시간 우측 고정 (진입 행 포함) */
.cyc-item.move{cursor:grab;background:var(--chip-bg)} /* 이동만 가능한 잠금 행(블러디 러쉬 2타) — 클릭 메뉴 없음. 규칙: 시퀀스 스킬 행은 편집 가능 여부와 무관하게 칩 배경 통일(2026-08-24 사용자 결정) */
.cyc-dd-opt{display:flex;align-items:center;gap:8px} /* 스킬 드롭다운 행 — 아이콘 + 이름 */
.cyc-dd-icon{width:20px;height:20px;border-radius:4px;object-fit:cover;flex-shrink:0;display:inline-block}
.cyc-periodic-head{color:var(--text);font-weight:700;font-size:var(--fs-small);padding:0 4px 4px;border-bottom:1px solid var(--border);margin:16px 0 8px;max-width:600px} /* 주기 스킬 소제목 — 열 헤더(.cyc-seq-head)와 같은 양식으로 구역을 가른다. 배경 박스(칩 묻힘)·액센트 바 안은 기각 (2026-08-31) */
.cyc-periodic .cyc-icon-sm{width:20px;height:20px;vertical-align:middle;margin-right:2px} /* 주기 스킬 아이콘 */
.cyc-per-name{font-size:var(--fs-small);font-weight:600} /* 주기 스킬명 — 사이클 행 스킬명(.cyc-item-name)과 폰트 통일 (2026-09-01 사용자 확정) */
.cyc-pu{font-variant-numeric:tabular-nums} /* P사이클 / U회 편집 칩 */
.cyc-item-slack{margin-left:2px;font-size:var(--fs-caption);color:var(--success);font-weight:400;white-space:nowrap;flex-shrink:0} /* 행 뱃지 — 쿨 여유 초(여유 +N.NNNs, 빨간 대기와 대비) */
:root.light .cyc-item-slack{color:var(--grade-uncommon)} /* 라이트 success(#16a34a)는 행 배경 2.80:1 로 미달 — 고급 등급색(--grade-uncommon)과 같은 파생값(≈5:1). --success 자체는 공용이라 안 건드린다 */
.cyc-item-wait{margin-left:2px;font-size:var(--fs-caption);color:var(--red);font-weight:400;white-space:nowrap;flex-shrink:0} /* 행 뱃지 — 적중형 rate 쿨감 스킬의 결정론 대기(대기 N.NNNs). .cyc-item-slack(초록 여유)과 대비 */
.cyc-item-anchor{margin-left:2px;font-size:var(--fs-caption);color:var(--text);font-weight:700;white-space:nowrap;flex-shrink:0} /* 행 뱃지 — 기준 스킬(사이클 길이를 정하는 항목) 강조 */
.cyc-item.add{justify-content:center;color:var(--dim)}
.cyc-item.add .cyc-item-name{flex:none}
.cyc-item-icon{width:24px;height:24px;border-radius:4px;object-fit:cover;flex-shrink:0;display:inline-block}
.cyc-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cyc-item-name .cyc-wait-cover{color:var(--red);font-weight:600} /* 쿨 대기 — 스킬명 자리를 덮어 표시(이름은 툴팁), 2026-09-01 사용자 확정 */
.cyc-item-time{flex-shrink:0;font-size:var(--fs-caption);color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:820px){.cyc-item{font-size:var(--fs-caption);gap:4px;padding:3px 4px}.cyc-item-icon{width:20px;height:20px}.cyc-seq-cols,.cyc-seq-cols[data-n="3"]{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 6px;max-width:none}.cyc-ctrl-item{white-space:normal}} /* 모바일: 들어가는 만큼 가로 배치, 꽉 차면 줄바꿈. 설정 줄 항목은 좁으면 내부 줄바꿈 허용(섹션 최소폭 방지) */
@media(max-width:820px){.brac-fx-row{font-size:var(--fs-xs)}} /* 모바일 팔찌 옵션 텍스트만 한 단계 축소 (긴 특수옵션 문장) */

/* ══ 숫자 값 공통: 탭 숫자(등폭) — 값 열 정렬 흔들림 방지 (가독성 점검 2026-08-23) ══ */
.inner-val,.dmg-dps,.dmg-critval,.dmg-val,.dmg-cool,.acc-polish-val,.cv-input,.eng-lv,.agr-slot-pt,.brac-eff,.cyc-seq-val,.cyc-item-time,.sk-tp-d{font-variant-numeric:tabular-nums}

/* 섹션 본문 텍스트 폰트 통일(--fs-small) 규칙과 예외 목록은 doc/DESIGN.md 작업 규칙 8 이 원본 */
/* ══ 클릭-수정 텍스트 공통 칩 규칙 (doc/DESIGN.md 작업 규칙 5) ══
   텍스트 색은 --click(=본문색), 클릭 가능 표시는 옅은 알약 배경(--chip-bg) + 둥근 모서리. 테두리·호버 없음.
   값의 의미색(연마 상/중/하, 등급, 쿨증 빨강)은 칩 안에서 유지. 새 클릭-수정 텍스트는 이 목록에 클래스만 추가 */
.clickable,.dd-sel,.cv-input,.equip-chip,.acc-stat-row,.acc-polish-row,.brac-fx-row,
.agr-grade-chip,.agr-slot-name,.agr-slot-pt,.agr-eff-val,
.eng-name,.eng-lv,.eng-stone,
.sk-tp-chip{background:var(--chip-bg);border-radius:5px;color:var(--click);cursor:pointer}
/* 아크패시브 노드 라벨(0/3)은 아이콘이 클릭 대상이므로 칩 배경 없음 */
.equip-chip.disabled{background:transparent}

/* 데미지 테이블 모바일: 열 폭·간격 축소, 숫자 칩 고정폭 해제, 폰트 한 단계 축소 */
@media(max-width:820px){
  /* 모바일은 **치명타 열을 뺀 5열**(2026-08-30) — 6열은 최소 폭으로도 안 들어간다: 실측 필요 폭 합계
     24(아이콘)+93(가장 긴 스킬명 '피니쉬 스트라이크')+52+52+38+52 = 311 + gap·padding = 329 > 표 폭 317.
     치명타만이 '표시 전용 + 상세에 중복'인 열이라 뺐다 — 값은 행을 펼치면 .dmg-bd-summary 에 그대로 나온다.
     (쿨은 클릭 편집 열, 기대피해는 기본 정렬, DPS 는 하단 합계와 연결이라 뺄 수 없다)
     확보한 폭은 스킬명(63→97)과 열 간격·수치 열 폭에 쓴다 */
  /* 수치 열은 값이 가운데 정렬이라 **열을 넓히는 것 자체가 값 사이 여백**이 된다 — gap 과 열 폭을 함께 키웠다.
     모바일은 총 폭이 고정이라 그 여백을 스킬 열에서 빌려온다: 스킬 97px(가장 긴 이름 93px + 여유 4) 이 하한 */
  .dmg-table-header,.dmg-row-main,.dmg-total-row{grid-template-columns:24px minmax(0,1fr) 60px 54px 54px;gap:5px;padding:4px 4px} /* 기대피해 60 = 헤더 '기대피해 ▾' 실측 60(데이터 49보다 헤더가 넓다). 쿨·DPS 54 = 칩/값(44·48)보다 넓게 잡아 **열 여백이 곧 값 사이 간격** */
  .dmg-crit-head,.dmg-critval{display:none}
  .dmg-total-label{grid-column:2/5}
  .dmg-total-val{grid-column:5}
  .dmg-table-header{font-size:var(--fs-caption)}
  .dmg-critval,.dmg-val,.dmg-dps,.dmg-total-val{min-width:0;font-size:var(--fs-caption)}
  .dmg-total-label{font-size:var(--fs-caption)}
  /* min-width 를 풀지 않는다 — 풀면 값 길이대로 칩이 흔들린다(위 .dmg-cool 폭 고정) */
  .dmg-skill-icon{width:24px;height:24px}
  .dmg-skill-name{font-size:var(--fs-caption)}
}

/* ══ 사이트 푸터 + 문서 페이지 (privacy.html·guide.html) ══
   푸터 — '개인정보 처리방침' 링크의 법정 상시 공개 지점(표준 개인정보 보호지침 20조: 명칭 고정 + 다른 링크와 시각 구분).
   z-index 151: 스플래시(.splash-overlay, z-index 150)가 fixed 로 화면을 덮어도 푸터는 랜딩 화면에서 보여야 한다(지속 게재 요건).
   margin-top:auto — 모바일(body 스크롤·.main flex:none)에서 내용이 짧아도 하단 고정 */
.site-footer{position:relative;z-index:151;flex-shrink:0;margin-top:auto;display:flex;flex-wrap:wrap;row-gap:2px;align-items:center;justify-content:center;gap:8px;padding:6px 16px;font-size:var(--fs-caption);color:var(--dim);background:var(--header-bg);border-top:1px solid var(--border)} /* wrap: 상표 고지 포함 시 모바일에서 두 줄로 접힘(PC 는 한 줄) — 접힘 높이는 스플래시 모바일 패딩(56px)과 연동 */
.site-footer a{color:var(--dim);text-decoration:none}
.site-footer .ft-privacy{color:var(--accent);font-weight:700} /* 개인정보 처리방침 — 시각 구분(위 지침 요건). 색·굵기를 지우지 말 것. 명시도: .site-footer a(0,1,1) 를 이겨야 색이 적용된다 — 단독 .ft-privacy 로 낮추지 말 것 */
/* 문서 페이지 공통 — body 전역(flex+overflow:hidden)은 앱 셸(탭 내부 스크롤) 전제라 문서 페이지에서 해제.
   해제 없이는 데스크톱(>820px)에서 페이지 스크롤이 전혀 안 된다(모바일만 확인하면 못 잡는 함정) */
body.doc-page{display:block;height:auto;min-height:100%;overflow-y:auto}
.doc-wrap{max-width:820px;margin:0 auto;padding:28px 16px 64px}
.doc-head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.doc-title{font-size:var(--fs-heading);font-weight:700;color:var(--text)}
.doc-page a{color:var(--blue)} /* 전역 앵커 색 규칙이 없어 문서 페이지에서만 지정 — 브라우저 기본 파랑/보라 방지 */
.doc-page .gear-section{padding:14px 16px}
.doc-page p,.doc-page li{line-height:1.7;word-break:keep-all}
.doc-page p{margin-bottom:10px}
.doc-page p:last-child{margin-bottom:0}
.doc-page ul,.doc-page ol{padding-left:20px;margin-bottom:10px}
.doc-page li{margin-bottom:4px}
.doc-sub{font-size:var(--fs-small);font-weight:600;color:var(--text);margin:14px 0 6px} /* 절 내부 소제목 */
.doc-table-wrap{overflow-x:auto;margin-bottom:10px} /* 넓은 표는 표만 가로 스크롤 — 페이지 가로 스크롤 금지 */
.doc-table{width:100%;border-collapse:collapse;font-size:var(--fs-caption)}
.doc-table th,.doc-table td{border:1px solid var(--border);padding:6px 8px;text-align:left;vertical-align:top;line-height:1.6;word-break:keep-all}
.doc-table th{color:var(--text);background:var(--surface2);font-weight:600;white-space:nowrap}
.doc-table tbody th{white-space:normal} /* 행머리 th(세로형·정의형 표 — privacy 국외이전 표) — nowrap 이면 긴 라벨이 모바일 표 폭을 강제해 항상 가로 스크롤. 열머리(thead)만 nowrap 유지 */
.doc-updated{margin-top:20px;font-size:var(--fs-caption);color:var(--dim)}
.doc-nav{display:flex;gap:14px;margin-top:24px;font-size:var(--fs-caption)}
/* 제보 모달 수집 고지 — 개인정보보호법 15조 2항(수집 시점 고지). 보유기간 등 문구 원본은 privacy.html 오류 제보 항목 */
.report-privacy-note{margin-top:10px;font-size:var(--fs-caption);color:var(--dim);line-height:1.6;word-break:keep-all}
.report-privacy-note a{color:var(--blue)}