/* ==========================================================================
   DND2 공통 스타일
   - 간격은 4px 단위 토큰(--sp-*)만 사용
   - 반응형 기준: 1180(메뉴 접힘) / 1024(사이드바 아래로) / 768(태블릿) / 480(폰)
   - 페이지 전용 스타일은 css/pages/*.css 에 둡니다
   ========================================================================== */

:root {
  color-scheme: dark;

  /* 색 */
  /* 바탕은 보라 기운 없는 중립 회색(디스코드·유튜브 다크 느낌), 포인트만 보라→핑크
     글씨는 대비를 높여서 흐린 회색도 잘 읽히게 */
  --bg: #111214;
  --bg-rgb: 17,18,20;
  --surface: rgba(255,255,255,0.05);
  --surface-2: rgba(255,255,255,0.08);
  --surface-solid: #1B1C1F;
  --glass-bg: rgba(27,28,31,0.92);   /* 유리 효과는 살짝만 (뒤가 거의 안 비치게) */
  --glass-border: rgba(255,255,255,0.09);
  --glass-blur: blur(12px);
  --accent-grad: linear-gradient(135deg, #7C3AED 0%, #A855F7 55%, #D946EF 100%);
  --line: rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.17);
  --hover: rgba(255,255,255,0.05);      /* 줄·버튼에 마우스 올렸을 때 살짝 밝게 */
  --reply-bg: rgba(255,255,255,0.045);   /* 답글 바탕 (1단계) */
  --reply-bg-2: rgba(255,255,255,0.075); /* 답글의 답글 바탕 */
  --text: #ECEDEF;
  --text-strong: #FFFFFF;
  --text-sub: #C8CAD0;
  --muted: #A4A7AF;
  --placeholder: #9A9EA8;   /* 입력칸 안내 문구 (바탕에 묻히지 않게, 실제 입력 글씨보다는 흐리게) */
  --gold: #FFD166;          /* 평점 별·1위 숫자 */
  /* 뽑기 아이콘 등급색 (게임장 arcade.css --r-* 와 같은 색, 일반만 테두리용으로 더 밝게): 일반 · 희귀 · 영웅 · 전설 · 신화. 회원 아이콘 테두리 .ic-r */
  --rarity-c: #D5D8DE; --rarity-r: #6FA8DC; --rarity-e: #B38BE8; --rarity-l: #E3B35C; --rarity-m: #FF6B9A;
  --rarity-l-rgb: 227,179,92; --rarity-m-rgb: 255,107,154;
  --scrim-rgb: 8,8,14;      /* 그림 위 글씨가 읽히게 까는 어두운 막 (rgba(var(--scrim-rgb), 투명도)) */
  --pillar-bg: #ECECEE;     /* 메인 캐릭터 기둥 바탕 (그림이 덮지 못한 곳) */
  --sand-light: #F7F4EE;    /* 메인 캐릭터 기둥의 모래(양피지) 톤: 가운데 밝은 곳 */
  --sand: #ECE6DB;          /*   중간 */
  --sand-dark: #D3CABA;     /*   가장자리 어두운 곳 */
  --accent: #C4B5FD;
  --accent-line: rgba(196,181,253,0.45);
  --primary: #8B5CF6;
  --primary-hover: #A855F7;
  --avatar: #4C2A85;
  --pink: #D993B8;
  --pink-strong: #9A3D6E;
  --green: #3E9A63;
  --focus-rgb: 139,92,246;   /* 키보드 포커스 링 */
  /* 게시판 분류 색 (커뮤니티 목록의 분류 딱지·인기 글) */
  --cat-free: #7CC0FF; --cat-qna: #FFD08A; --cat-guide: #8BE28B; --cat-greet: #F9A8D4; --cat-gallery: #FDBA74; --cat-video: #FCA5A5;
  --new: #FF6B6B;      /* 새 글 N 표시 */
  --new-rgb: 255,107,107;
  --hot: #FF8A5B;      /* 인기 글 불꽃 아이콘 */
  /* 순위 변화 · 보스 도감 */
  --rank-up: #8BE28B; --rank-down: #FF8A8A; --rank-new: #FFD08A;
  --boss-hidden: #FF7B7B; --boss-hidden-soft: #FFB0B0;   /* 숨겨진 보스 */
  --boss-final: #FFD08A;                                  /* 최종 보스 · 1위 */
  /* 스테이지 루트: 보스를 쓰러뜨리면 돌아오는 마법 (pages/stages.css) */
  --spell-cleric: #7CC0FF; --spell-mage: #8BE28B;
  /* 스테이지 상세 (pages/stage-scenes.css): 스테이지 색(지역마다 하나) · 게임 대사창 금테 · 오락기 화면 · 게임 속 플레이어 색 */
  --stage-broken: #F2A65A; --stage-broken-rgb: 242,166,90;   /* 브로큰 랜드 노을 (STAGE 1) */
  --stage-village: #FF7A59; --stage-village-rgb: 255,122,89;   /* 불타는 트린턴 마을 (STAGE 2) */
  --stage-juggernaut: #D29A5C; --stage-juggernaut-rgb: 210,154,92;   /* 3-A 저거노트 전차 · 흙먼지 */
  --stage-vesuvia: #4FB3D9; --stage-vesuvia-rgb: 79,179,217;   /* 3-B 베수비아 강 */
  --stage-aengmore: #8FB8FF; --stage-aengmore-rgb: 143,184,255;   /* 4 에잉모어 상공 · 하늘 */
  --stage-despair: #6FBF73; --stage-despair-rgb: 111,191,115;   /* 5-A 절망의 숲 */
  --stage-aensun: #E8B04B; --stage-aensun-rgb: 232,176,75;   /* 5-B 아인슨 마을 */
  --stage-bridge: #7FC9A8; --stage-bridge-rgb: 127,201,168;   /* 5-C 숲의 다리 */
  --stage-oak: #A3C76A; --stage-oak-rgb: 163,199,106;   /* 6 천년나무 */
  --stage-destruction: #D0755A; --stage-destruction-rgb: 208,117,90;   /* 7 파괴의 숲 */
  --stage-labyrinth: #5FBF9F; --stage-labyrinth-rgb: 95,191,159;   /* 8-A 미로의 숲 */
  --stage-rescue: #E0A060; --stage-rescue-rgb: 224,160,96;   /* 8-B 놈 마을 구조 */
  --stage-rafael: #E86A55; --stage-rafael-rgb: 232,106,85;   /* 라파엘 동굴 */
  --stage-fire: #FF6A3D; --stage-fire-rgb: 255,106,61;   /* 9-A 화염의 대지 */
  --stage-lost: #9DD3E0; --stage-lost-rgb: 157,211,224;   /* 9-B 잃어버린 땅 */
  --stage-underworld: #A08CFF; --stage-underworld-rgb: 160,140,255;   /* 9-C 드워프 지하 통로 */
  --stage-gateway: #B9A7FF; --stage-gateway-rgb: 185,167,255;   /* 10-1 천공의 성 */
  --stage-overtures: #D9A6FF; --stage-overtures-rgb: 217,166,255;   /* 10-2 오버추어 */
  --stage-arena: #F2C14E; --stage-arena-rgb: 242,193,78;   /* 10-3 투기장 */
  --stage-battleroyal: #FF8A5B; --stage-battleroyal-rgb: 255,138,91;   /* 10-4 배틀로얄 */
  --stage-showdown: #F5D76E; --stage-showdown-rgb: 245,215,110;   /* 10-5 투기장 II */
  --stage-final: #C77DFF; --stage-final-rgb: 199,125,255;   /* 10-6 부유성 최상층 */
  --stage-end: #FFE7A8; --stage-end-rgb: 255,231,168;   /* 엔딩 */
  --msg-frame: #C9A24A; --msg-frame-light: #FFE7A8;
  --crt-bezel: #15151B; --crt-bezel-edge: #2A2A33; --scan: rgba(0,0,0,.28);
  --p1: #FF6B6B; --p2: #7CC0FF; --p3: #FFD166; --p4: #8BE28B;   /* 1P 빨강 · 2P 파랑 · 3P 노랑 · 4P 초록 */
  --medal-gold: linear-gradient(135deg, #FFE7A8, #D9A441); --medal-gold-ink: #2A1A06;
  --art-bg: #0B0A10;   /* 그림 칸 바탕 (그림이 없거나 불러오는 중) */
  --art-bg-deep: #07070A;   /* 게임 화면 그림(움짤) 뒤 · 누끼 그림 칸의 검은 바탕 (모든 페이지 같은 검정) */
  /* 누끼 그림 칸 = 검은 바탕 하이라이트 (아래 "누끼 그림 칸" .art-cut): 검정 위에 그림 발밑 쪽 은은한 빛 한 겹.
     빛 색은 칸마다 --art-glow-c 로 (직업색 · 스테이지 색 · 몬스터 색 · 금색 …), 모양 · 진하기 · 테두리는 어디서나 같게 */
  --art-glow-at: ellipse 60% 75% at 50% 60%;   /* 빛 모양 · 위치 */
  --art-glow-mix: 20%;                          /* 빛 진하기 (빛 색을 이만큼 섞음) */
  --art-line: rgba(255,255,255,0.1);            /* 그림 칸 테두리 · 아래 구분선 */
  /* 보스 상세 탭 (boss-tabs.css): 받는 피해 막대 · 상태 */
  --dmg-melee: #FF8A7A;     /* 근접(파이터·클레릭·드워프)이 받는 피해 */
  --dmg-light: #7CC0FF;     /* 마법·경장(매직유저·시프·엘프)이 받는 피해 */
  --state-ok: #8BE28B; --state-warn: #FFD08A; --state-off: #6E6B80;
  --goblin: #8BCB6A; --goblin-oil: #FF9F5A;   /* 지원군 그림 */
  --gc-stage: #6EAA96;      /* 게임장 고블린 크래쉬 게임 칸 바탕 (게임 하늘색, 불러오기 전에 보임) */
  /* 마법 도감 (pages/spells.css): 오락실 노랑·하늘 · 시전 장면 TV(브라운관) · 조건 빨강 · 계보도 */
  --hud-yellow: #FFD23F; --hud-yellow-rgb: 255,210,63; --hud-cyan: #3FD0FF; --hud-cyan-rgb: 63,208,255; --hud-shadow: #B3261E; --hud-ink: #111214;
  --tv-body: #2B2830; --tv-body-lo: #17151B; --tv-line: #3A3642; --tv-led: #4DFF7A; --tv-led-rgb: 77,255,122; --tv-glass: #030406; --tv-glass-hi: #0D121A; --tv-glare: rgba(255,255,255,.08);
  --req-bg: rgba(180,30,30,.3); --req-line: #FF5A5A; --req-ink: #FFD9D9;
  --gem-line: #2D3448; --sep-ink: #6C7590; --panel-deep: #0B0B10;
  /* 고블린 크래쉬 모험가 기술 카드 색 (game.html CLS 색과 같게) */
  --gc-fighter: #FFD08A; --gc-dwarf: #FF9F5A; --gc-muser: #FF7A3D; --gc-cleric: #FFE9A8; --gc-elf: #9EE7FF; --gc-thief: #7CC0FF; --gc-ghoul: #B5D86A;
  --accent-soft: rgba(196,181,253,0.12);   /* 목록에서 '나' 줄 같은 옅은 강조 바탕 */
  --script: #FFE2B8;        /* 보스 대사 말풍선 글씨 */
  --mark-hot: #FFC4C4;      /* 그림 설명 속 강조 */
  --break-grad: linear-gradient(90deg, #6C4AD8, #D946EF 60%, #FF6B6B);   /* 외관 변화 진행 막대 */
  /* 명예의 전당 (hall-of-fame.css): 금·은·동 명판 */
  --hof-gold: #E6C46E; --hof-gold-rgb: 230,196,110; --hof-gold-deep: #C9A24A; --hof-gold-dark: #8A6A24; --hof-gold-darker: #9C7A2E;
  --hof-gold-light: #FFF3CF; --hof-gold-light-rgb: 255,243,207;
  --hof-silver: #CBD2DC; --hof-bronze: #C99366;
  --hof-plate: #16151C; --hof-plate-2: #17161D; --hof-plate-3: #1D1B24; --hof-plate-4: #1E1C24; --hof-plate-edge: #15141A; --hof-ink: #14110A;
  --hof-cream: #E9DDB8; --hof-carpet: linear-gradient(180deg, #4A0710, #8F1426 45%, #6E0D1C);
  --hof-font: "Gowun Batang", "Nanum Myeongjo", serif;   /* 명판 이름·제목 (명조) */
  /* 직업 색 (명판의 주캐릭터 딱지) */
  --cls-fighter: #FFD08A; --cls-cleric: #EDE6CE; --cls-elf: #8BE28B; --cls-dwarf: #FF9F5A; --cls-muser: #C4B5FD; --cls-thief: #FF6B81; --cls-etc: #F9A8D4;
  /* 공통 UI 키트 (dnd2-ui.css: 알림·확인 창·말풍선·메뉴) */
  --danger: #C23B5E; --danger-hover: #D4476B;
  --hitbox-atk: #E5484D; --hitbox-body: #A78BFA;   /* 게임 판정 네모: 공격 · 몸 (스페셜 콤보 판정 그림의 범례) */
  --ui-raise: #2A2B30;     /* 메뉴 항목·닫기 버튼에 마우스 올렸을 때 */
  --ui-tip-bg: #101114;    /* 말풍선 바탕 */
  --ui-success: #5FBF85; --ui-success-rgb: 95,191,133;
  --ui-warn: #E7B04F;    --ui-warn-rgb: 231,176,79;
  /* 개발 노트 분류색 (추가·개선·수정·기타, pages/devnote.css) */
  --dev-add: var(--ui-success); --dev-improve: var(--accent); --dev-fix: var(--ui-warn); --dev-etc: var(--muted);
  --ui-error: #F07089;   --ui-error-rgb: 240,112,137;

  /* 간격 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* 모양 */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --icon-size: 35px;   /* 회원 동그라미·게임장 아이콘은 어디서나 이 크기 */
  --shadow-hover: 0 14px 32px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(196,181,253,.18);

  /* 레이아웃 */
  /* 사이트 한 덩어리의 최대 폭: 머리줄 · 왼쪽 빠른 메뉴부터 오른쪽 본문 끝까지 모든 화면이 1200px 안 (가운데 정렬)
     왼쪽 메뉴가 있는 화면은 그 안에서 메뉴(84px) + 간격을 뺀 만큼이 본문 (.site-shell--rail 이 --container 를 다시 정함) */
  --site-max: 1200px;
  --container: var(--site-max);
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 72px;
  --section-gap: clamp(40px, 6vw, 64px);
  /* 본문 + 오른쪽 칸 화면의 기준 (게시판 목록 · 글 · 글쓰기 · 영상 · 갤러리 글이 모두 같음): 오른쪽 칸 폭과 사이 간격.
     사이트 한 덩어리 1200 안(왼쪽 메뉴를 빼면 본문 칸 1068)에서 본문이 좁아지지 않게 오른쪽 280px · 간격 24px → 본문 764px.
     오른쪽 칸이 없는 화면(공지 목록 등)은 컨테이너 전체 */
  --aside-w: 280px;
  --aside-gap: var(--sp-6);

  --font: 'Noto Sans KR', system-ui, sans-serif;   /* 글꼴은 고정 (layouts/default.html 이 static/fonts 의 Noto Sans KR · Cinzel 을 불러옴) */
  --font-display: 'Cinzel', Georgia, serif;
  --font-heading: var(--font);   /* 제목 전용 */

  /* ---------- 글자 크기·굵기·줄 간격 (모든 화면이 이 값만 씀. 크기를 바꾸려면 여기만 고치면 됨) ----------
     새 CSS 에서도 px 대신 아래 이름을 쓸 것. 어디에 쓰는지:
       micro 10 작은 동그라미 안 글자 · 2xs 11 딱지·영문 소제목 · xs 12 날짜·글쓴이·숫자 같은 곁 정보
       sm 13 보조 글·작은 버튼 · md 14 버튼·메뉴·목록 제목 · base 15 본문 · lg 16 카드 제목·글 본문
       xl 18 작은 제목 · 2xl 20 소제목·창 제목 · 3xl 22 · 4xl 26 큰 숫자·목록 제목 */
  --fs-micro: 10px;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 22px;
  --fs-4xl: 26px;
  /* 화면 폭 따라 커지는 제목 */
  --fs-hero: clamp(34px, 5vw, 56px);          /* 메인 첫 화면 제목 */
  --fs-ghost: clamp(64px, 13vw, 180px);       /* 제목 뒤에 깔리는 큰 장식 글자 (공략실 첫 화면) */
  --fs-page-title: clamp(28px, 4vw, 40px);    /* .page-title */
  --fs-post-title: clamp(24px, 3vw, 32px);    /* 글 보기 제목 */
  --fs-section-title: clamp(20px, 2.4vw, 26px); /* .section-title */
  --fs-feature-title: clamp(18px, 2vw, 24px); /* 메인 추천 공략 큰 카드 제목 */
  --fs-arcade-name: clamp(30px, 3.2vw, 44px);  /* 마법 도감 고른 주문 영문 이름 (Bebas Neue) */
  --fs-hud-title: clamp(52px, 7vw, 88px);      /* 공략실 머리말 영문 큰 제목 (.page-head--hud, Bebas Neue) */
  --fs-bb-slot: 68px;   /* 게임장 숫자야구 숫자 칸 (Bebas Neue, pages/arcade-baseball.css) */
  --fs-bb-key: 30px;    /* 게임장 숫자야구 키패드 숫자 */
  --fs-bb-inn: 24px;    /* 게임장 숫자야구 전광판 칸 숫자 */
  --fs-body: var(--fs-base);                  /* body 기본 (모바일은 md) */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;  /* 큰 숫자·첫 화면 제목만 */

  --lh-none: 1;
  --lh-display: 1.15; /* 아주 큰 제목 */
  --lh-tight: 1.3;    /* 제목 */
  --lh-snug: 1.45;    /* 두 줄짜리 카드 제목·딱지 */
  --lh-base: 1.6;     /* 기본 */
  --lh-loose: 1.75;   /* 댓글·설명 글 */
  --lh-reading: 1.85; /* 글 본문 */

  --ls-tight: -0.02em;   /* 제목·굵은 글 */
  --ls-tighter: -0.03em; /* 큰 제목 */
  --ls-display: -0.045em; /* 첫 화면 제목 */
  --ls-caps: 0.16em;     /* 영문 대문자 소제목 (Cinzel) */
  --ls-arcade: 0.04em;      /* Bebas Neue 큰 글 (마법 도감 제목 · 주문 이름 · 수치) */
  --ls-arcade-wide: 0.08em; /* Bebas Neue 버튼 · 표 머리 */

  /* 겹치는 순서 (z-index): 화면 위에 뜨는 것은 모두 이 표에서 골라 씀. 숫자를 규칙 안에 바로 쓰지 않음
     (카드 안 배지 · 단추처럼 한 덩어리 안에서만 겹치는 1~6 은 예외)
     아래 → 위: 페이지 안 고정 탭 < 사이트 머리 < 머리 메뉴 펼침 < 폰 아래 고정 단추 줄 < 떠 있는 영상 · 관리자 [편집] 단추
              < 채팅 단추 · 창 < 아래에서 올라오는 칸(도감 · 곡 담기 · 음악 창) < 음악 재생기 · 관리자 도구 줄
              < 폰 삼선 메뉴 펼침 < 크게 보기 < 게임 전체 화면 < 알림 · 확인 창 < 전체 화면 효과 */
  --z-sticky: 20;     /* 페이지 안에서 위에 붙는 탭 줄 (보스 · 몬스터 목차) */
  --z-header: 50;     /* 사이트 머리 */
  --z-pop: 60;        /* 머리 메뉴 펼침 · 작은 떠 있는 목록 */
  --z-bar: 85;        /* 폰 아래 고정 단추 줄 ([등록] · 이전/다음) */
  --z-float: 240;     /* 떠 있는 작은 영상 · 관리자 [편집] 단추 */
  --z-chat: 250;      /* 채팅 단추 · 창 (js/chat.js) */
  --z-sheet: 260;     /* 아래에서 올라오는 칸 · 음악 창. 어둡게 덮는 막은 -1, 칸 안 아래 막대는 +1 */
  --z-dock: 900;      /* 음악 재생기 (dock.css) · 관리자 도구 줄 (편집 · 일괄 작업) */
  --z-menu: 960;      /* 폰 삼선 메뉴를 연 동안의 머리 */
  --z-lightbox: 1000; /* 그림 · 지도 크게 보기 */
  --z-fullscreen: 2000; /* 게임장 전체 화면 · 가로 돌림 */
  --z-dialog: 9000;   /* 알림 · 확인 · 토스트 · 말풍선 (dnd2-ui.css --dnd-z) · 편집 창 */
  --z-fx: 9500;       /* 화면 전체를 잠깐 덮는 효과 (확대 전환 · 꽃가루) */
}

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg);
  /* 스크롤바 자리를 늘 비워 둠: 알림창·에디터 창(TinyMCE)이 열리며 스크롤을 막아 스크롤바가 사라져도 화면 폭이 바뀌지 않아 좌우로 흔들리지 않음 */
  scrollbar-gutter: stable; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--text);
  position: relative;
  background: transparent;
  word-break: keep-all;

  overflow-wrap: anywhere;
}
img, svg, video { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { color: var(--text-strong); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #DDD6FE; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 레이아웃 ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.site-main { flex: 1; padding-block: var(--sp-8) var(--section-gap); }
.stack { display: flex; flex-direction: column; gap: var(--sp-6); }
.stack-lg { display: flex; flex-direction: column; gap: var(--section-gap); }
.stack-sm { display: flex; flex-direction: column; gap: var(--sp-3); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.push { margin-left: auto; }

/* 본문 + 오른쪽 사이드바 */
.layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-w); gap: var(--aside-gap); align-items: start; }
/* 왼쪽 사이드바 + 본문 */
.layout-nav { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }

/* 왼쪽 빠른 메뉴 (fragments/rail.html, 모든 화면 공통 · layouts/default 의 .site-shell)
   메뉴 줄 + 본문을 한 덩어리로 가운데 정렬: 넓은 화면에서도 메뉴가 화면 끝이 아니라 본문 바로 옆에 붙음
   본문 쪽 .container 의 왼쪽 여백(gutter)이 메뉴와 본문 사이 간격이 됨. 1180 이하에서는 메뉴 숨김 */
.site-shell { flex: 1; display: flex; flex-direction: column; }
.site-shell--rail { --container: calc(var(--site-max) - 84px - var(--gutter)); display: grid; grid-template-columns: 84px minmax(0, 1fr); width: 100%; max-width: calc(var(--site-max) + var(--gutter) * 2); margin-inline: auto; padding-left: var(--gutter); }
.home-rail {
  position: sticky; top: var(--header-h); align-self: start;
  height: calc(100vh - var(--header-h)); overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-2); border-right: 1px solid var(--line);
}
.home-rail a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; font-size: var(--fs-2xs); color: var(--muted); border-radius: 12px;
  text-align: center; word-break: keep-all; line-height: var(--lh-tight); /* '관리자 게시판'처럼 두 줄이 되는 이름도 가운데로, 낱말 단위로 꺾음 */
  transition: background .2s ease, color .2s ease;
}
.home-rail a:hover { color: var(--text-strong); background: var(--hover); }
/* 안 읽은 쪽지 수 (fragments/rail.html · header.html 내 메뉴) */
.home-rail a { position: relative; }
.home-rail__count { position: absolute; top: 4px; right: 14px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--primary); color: var(--text-strong); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: var(--lh-none); }
.home-rail a[data-rail-feed="notice"] .home-rail__count { background: #e0b04a; color: #1a1208; } /* 새 공지는 금색 (새 글 보라와 구분) */
.umenu__count { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--primary); color: var(--text-strong); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-align: center; }
.home-rail a[aria-current="page"] { color: var(--text-strong); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--primary); }
.home-rail a[aria-current="page"] svg { stroke: var(--accent); }
.home-rail__sep { height: 1px; margin: var(--sp-2) var(--sp-3); background: var(--line); }
@media (max-width: 1180px) {
  .site-shell--rail { --container: var(--site-max); display: flex; flex-direction: column; max-width: none; padding-left: 0; }
  .home-rail { display: none; }
}
.aside { display: flex; flex-direction: column; gap: var(--sp-5); }
.aside--sticky { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }

/* 반응형 그리드: 열 수 고정 + 화면 폭에 따라 단계적으로 줄어듦
   grid--auto 는 칸 최소 너비(--min) 기준 자동 줄바꿈 */
.grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.grid--2 { --cols: 2; }
.grid--3 { --cols: 3; }
.grid--4 { --cols: 4; }
.grid--6 { --cols: 6; }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 240px)), 1fr)); }
.grid--tight { gap: var(--sp-3); }
@media (max-width: 1024px) {
  .grid--6 { --cols: 4; }
}
@media (max-width: 900px) {
  .grid--3, .grid--4 { --cols: 2; }
  .grid--6 { --cols: 3; }
}
@media (max-width: 640px) {
  .grid--2, .grid--3 { --cols: 1; }
  .grid--6 { --cols: 2; }
}
@media (max-width: 420px) {
  .grid--4:not(.grid--m2) { --cols: 1; }
}
/* grid--m2 : 폰에서도 2열 유지 (썸네일 목록용) */
@media (max-width: 640px) {
  .grid--m2 { --cols: 2; gap: var(--sp-4) var(--sp-3); }
}

/* ---------- 헤더 ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  /* 위는 진하고 아래로 갈수록 투명 → 아래 보라빛과 경계 없이 이어짐 */
  background: linear-gradient(180deg, rgba(var(--bg-rgb),0.78) 0%, rgba(var(--bg-rgb),0.45) 100%);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.035);
}
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: var(--sp-6); }
.brand { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.brand__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-3xl); letter-spacing: var(--ls-caps); color: var(--accent); }
.brand__logo { display: block; height: 34px; width: auto; max-width: 180px; object-fit: contain; } /* 관리자가 로고 그림을 올리면 글자 대신 */
.brand__sub { font-size: var(--fs-sm); color: var(--muted); }
.gnb { display: flex; align-items: center; gap: var(--sp-1); margin-inline: auto; }
.nav-link { padding: 10px 14px; font-size: var(--fs-base); border-radius: 8px; color: var(--text-sub); white-space: nowrap; transition: background .2s ease, color .2s ease; }
.nav-link:hover { color: var(--text-strong); background: rgba(255,255,255,0.04); }
.nav-link.active { color: var(--text-strong); background: var(--surface-2); font-weight: var(--fw-semibold); }
/* 상단 펼침 메뉴 (공략 ▸ 캐릭터·보스·몬스터·아이템·스테이지, fragments/header.html). 마우스를 올리거나 키보드로 들어가면 펼침 */
.gnb-drop { position: relative; }
.gnb-drop > .nav-link { display: inline-flex; align-items: center; gap: var(--sp-1); }
.gnb-drop__chev { color: var(--muted); transition: transform .2s; }
.gnb-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } /* 메뉴와 펼친 상자 사이 틈에서 닫히지 않게 */
.gnb-drop__panel { position: absolute; top: calc(100% + 8px); left: 50%; z-index: var(--z-pop); display: none; min-width: 168px; padding: var(--sp-2); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(0,0,0,.85); transform: translateX(-50%); }
.gnb-drop:hover .gnb-drop__panel, .gnb-drop:focus-within .gnb-drop__panel { display: grid; gap: 2px; }
.gnb-drop:hover .gnb-drop__chev, .gnb-drop:focus-within .gnb-drop__chev { transform: rotate(180deg); }
.gnb-drop__panel a { display: flex; align-items: center; min-height: 40px; padding: 0 var(--sp-3); color: var(--text-sub); font-size: var(--fs-md); white-space: nowrap; border-radius: var(--radius-sm); }
.gnb-drop__panel a:hover { color: var(--text-strong); background: var(--surface-2); }
.gnb-drop__panel a[aria-current="page"] { color: var(--text-strong); font-weight: var(--fw-semibold); background: var(--surface-2); }.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.btn-icon.menu-toggle { display: none; }
.gnb__account { display: none; }
.header-user { padding-inline: var(--sp-2); }
.header-user .user__name { color: var(--text-strong); font-weight: var(--fw-semibold); }
/* 내 포인트: 내 메뉴 버튼의 닉네임 아래 줄(.umenu__pts) · 모바일 메뉴의 내 정보 줄(.header-user__pts)
   숫자가 바뀌면 잠깐 색으로 알림 (dnd2.js [data-my-points] · [data-pts-box]) */
.header-user__pts { margin-left: auto; color: var(--gold); font-size: var(--fs-sm); white-space: nowrap; }
[data-pts-box] b { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; transition: color .3s; }
[data-pts-box].is-up b { color: var(--gold); }
[data-pts-box].is-down b { color: var(--danger-hover); }
/* 관리자 버튼 (ADMIN 에게만 보임) */
/* 로그인한 내 메뉴: 아이콘 + 닉네임 ▾ 을 누르면 아래로 펼침 (fragments/header.html, dnd2.js [data-umenu]) */
.umenu { position: relative; }
.umenu__btn { display: flex; align-items: center; gap: var(--sp-2); height: 44px; padding: 0 10px 0 4px; color: var(--text-strong); font: var(--fw-semibold) var(--fs-md) var(--font); background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: background .2s, border-color .2s; }
.umenu__btn:hover, .umenu__btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--line); }
.umenu__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: var(--lh-tight); }
.umenu__name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umenu__pts { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--gold); font-size: var(--fs-xs); white-space: nowrap; }
.umenu__pts b { color: var(--text-sub); }
.umenu__chev { color: var(--muted); transition: transform .2s; }
.umenu__btn[aria-expanded="true"] .umenu__chev { transform: rotate(180deg); }
.umenu__panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: var(--z-pop); width: 260px; padding: var(--sp-2); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(0,0,0,.85); transform-origin: top right; animation: umenuIn .18s cubic-bezier(.2,.8,.2,1); }
.umenu__panel[hidden] { display: none; }
@keyframes umenuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.umenu__me { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--line); }
.umenu__who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.umenu__who b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-base); color: var(--text-strong); }
.umenu__list { display: flex; flex-direction: column; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.umenu__list a, .umenu__out button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px var(--sp-3); font: var(--fw-medium) var(--fs-sm) var(--font); color: var(--text-sub); text-align: left; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.umenu__list a svg, .umenu__out svg { color: var(--muted); }
.umenu__list a:hover, .umenu__out button:hover { color: var(--text-strong); background: var(--hover); }
.umenu__list a:hover svg, .umenu__list .umenu__admin, .umenu__list .umenu__admin svg { color: var(--accent); }
.umenu__out { padding-top: var(--sp-2); }
.umenu__out button:hover, .umenu__out button:hover svg { color: var(--ui-error); }
@media (prefers-reduced-motion: reduce) { .umenu__panel { animation: none; } }
.header-admin { color: var(--accent); background: rgba(139,92,246,0.14); border-color: var(--accent-line); }
.header-admin:hover, .header-admin.active { color: #fff; background: var(--accent-grad); border-color: transparent; }
.btn.header-admin--block { display: none; }

/* 메뉴 10개가 한 줄에 들어가도록 접히기 직전 구간은 간격을 줄임 */
@media (max-width: 1360px) {
  .nav-link { padding-inline: 10px; }
  .brand__sub { display: none; }
}
@media (max-width: 1180px) {
  .site-header__inner { gap: var(--sp-3); }
  .brand { margin-right: auto; }
  .btn-icon.menu-toggle { display: inline-flex; }
  .header-actions .auth-link { display: none; }
  .gnb {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: var(--sp-3) var(--gutter) var(--sp-5);
    background: var(--bg);
    box-shadow: 0 24px 48px -12px rgba(0,0,0,0.7);
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .gnb.is-open { display: flex; }
  /* 메뉴를 연 동안 머리(메뉴 포함)를 채팅 · 떠 있는 영상 · 아래 칸 · 고정 재생기 위로. 알림창보다는 아래 (:root 의 겹치는 순서 표) */
  .site-header:has(.gnb.is-open) { z-index: var(--z-menu); }
  .nav-link { padding: 12px 14px; font-size: var(--fs-lg); }
  .gnb__account { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
  .btn.header-admin--block { display: inline-flex; grid-column: 1 / -1; }
  /* 내 정보 줄(아이콘·레벨·닉네임·포인트)은 한 줄 전체, 로그아웃은 그 아래 (반 칸이면 닉네임이 잘림) */
  .gnb__account .header-user, .gnb__account form { grid-column: 1 / -1; }
  /* 내 정보 줄 아래 바로가기 세 칸 (출석 체크 · 쪽지함 · 내 스크랩) */
  .gnb__quick { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .gnb__quick a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-sub); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .gnb__quick a:hover { color: var(--text-strong); border-color: var(--line-strong); }
  .gnb__quick a[aria-current="page"] { color: var(--text-strong); border-color: var(--accent-line); }
  .gnb__quick .umenu__count { position: absolute; top: 6px; right: 8px; margin: 0; }
  /* 모바일 메뉴: 공략 아래 항목을 펼친 채 들여 써서 (마우스 올리기가 없으므로) */
  .gnb-drop::after, .gnb-drop__chev { display: none; }
  .gnb-drop > .nav-link { display: flex; }
  .gnb-drop__panel, .gnb-drop:hover .gnb-drop__panel, .gnb-drop:focus-within .gnb-drop__panel { position: static; display: grid; gap: 2px; min-width: 0; padding: 0 0 var(--sp-1) var(--sp-5); background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
  .gnb-drop__panel a { min-height: 44px; font-size: var(--fs-base); }
}
@media (max-width: 480px) {
  .brand__sub { display: none; }
}

/* ---------- 폰 메뉴: 옆에서 나오는 칸 하나 (2026-10-21 모바일 개편 D안, docs/mobile-ui-sian) ----------
   폰(768 이하)에서는 머리가 위에 붙어 따라오지 않고 글과 함께 올라감 → 화면 위를 막는 줄이 없음.
   머리가 화면 밖으로 나가면 왼쪽 아래에 ☰ 단추(.mnav-fab). 머리의 ☰ · 이 단추 → 왼쪽 칸(.mnav)이 밀려 나옴.
   칸 안은 단계별: 사이트 메뉴 ↔ 공략실 · 게임장 같은 아래 목록이 옆으로 넘어감. 지금 있는 곳의 아래 목록부터 열림.
   게임장의 [☰ 게임] 막대(.ar-side)는 이 칸 안 '게임장' 목록이 대신함 (arcade.css). 칸을 만드는 건 dnd2.js */
.mnav, .mnav-dim, .mnav-fab { display: none; }
@media (max-width: 768px) {
  /* --header-h 는 '위에 붙은 머리 높이'(붙는 탭 · 목차가 그 밑에 붙음) → 붙지 않으니 0.
     0.01px: 여러 js 가 parseFloat(--header-h) || 72 로 읽어서 0 이면 72 로 바뀜 */
  :root { --header-h: 0.01px; }
  .site-header { position: relative; }
  .site-header__inner { height: 56px; }
  .brand__name { font-size: var(--fs-2xl); }
  .gnb, .gnb.is-open { display: none; }

  .mnav-fab { position: fixed; left: var(--sp-3); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-float); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; color: #fff;
    background: rgba(var(--bg-rgb), .82); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.8);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
  .mnav-fab:not(.is-on) { transform: translateY(calc(100% + var(--sp-6))); opacity: 0; pointer-events: none; }
  html:is(.kb-open, .fab-avoid, .dc-open) .mnav-fab, .mnav-fab.is-off { display: none; }   /* 자판 · 게임 키패드 · 채팅창이 아래를 쓰는 동안, 오토체스처럼 게임이 화면을 다 쓰는 곳(.is-off, dnd2.js) */
  html.mnav-fab-on .ge-open { left: calc(var(--sp-3) + 56px); }   /* 관리자 [편집] 단추는 ☰ 오른쪽으로 */
  /* 높이는 채팅 단추(chat.js .dc-fab)와 같게 dnd2.js 가 맞춤 (body:has(…) 규칙은 화면이 바뀔 때마다 문서 전체를 다시 계산해 던전 레이스가 끊겼음, 10-21) */

  .mnav-dim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: calc(var(--z-menu) - 1); background: rgba(var(--scrim-rgb), 0); transition: background .28s; }
  .mnav-dim.is-open { background: rgba(var(--scrim-rgb), .6); }
  .mnav:not([hidden]) { display: block; position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-menu); width: min(86vw, 340px); overflow: hidden;
    background: var(--surface-solid); border-right: 1px solid var(--line-strong); box-shadow: 20px 0 40px -10px rgba(0,0,0,.8);
    transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
  .mnav.is-open { transform: none; }
  .mnav__track { display: flex; height: 100%; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
  .mnav.is-sub .mnav__track { transform: translateX(-100%); }
  .mnav__pane { flex: none; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sp-3) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); }
  .mnav__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--sp-1); min-height: 64px; padding-left: var(--sp-1); background: var(--surface-solid); }
  .mnav__head .brand { margin-right: auto; }
  .mnav__head b { margin-right: auto; font-size: var(--fs-lg); color: var(--text-strong); }
  .mnav__ib { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; color: var(--text-sub); background: none; border: 0; border-radius: 999px; cursor: pointer; }
  .mnav__ib:hover { color: var(--text-strong); background: var(--hover); }
  /* 머리는 ☰ 하나만: 검색 · 내 플리 아이콘은 옆 메뉴 맨 위 아이콘 줄로 (내 플리 창 · 재생 표시는 머리 것이 그대로 일함, js/my-pl.js) */
  .header-actions .header-search, .header-actions .hpl__btn { display: none; }
  /* 옆 메뉴 맨 위 아이콘 줄 (글쓰기 · 검색 · 내 플리, 시안 docs/mobile-header-sian B · 아이콘만) */
  .mnav__quick { display: flex; gap: var(--sp-2); margin: 0 var(--sp-1) var(--sp-3); }
  .mnav__quick > :is(a, button) { flex: 1; display: grid; place-items: center; min-height: 52px; padding: 0; color: var(--text-sub); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
  .mnav__quick > :is(a, button):hover { color: var(--text-strong); border-color: var(--line-strong); }
  .mnav__quick > .is-main { color: var(--text-strong); background: rgba(139,92,246,.18); border-color: var(--accent-line); }
  .mnav .gnb__account { margin: 0 var(--sp-1) var(--sp-3); padding: 0; border: 0; }   /* 로그인 · 내 정보 줄은 머리 메뉴 것을 그대로 옮겨 씀 */
  .mnav__list { display: grid; gap: 2px; }
  .mnav__list > a, .mnav__list > button { position: relative; display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 52px; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
    font: inherit; font-size: var(--fs-lg); font-weight: var(--fw-semibold); text-align: left; color: var(--text); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
  .mnav__list > :is(a, button):hover { color: var(--text-strong); background: var(--hover); }
  .mnav__list > .is-here { color: var(--text-strong); background: rgba(139,92,246,.14); }
  .mnav__list > .is-here::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent); }
  .mnav__here { flex: none; margin-left: auto; padding: 2px 8px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent); border: 1px solid var(--accent-line); border-radius: 999px; }
  .mnav__chev { flex: none; margin-left: auto; color: var(--muted); }
  .mnav__here + .mnav__chev { margin-left: 0; }
  .mnav__list .mnav__no { flex: none; width: 24px; font-size: var(--fs-sm); color: var(--muted); }
  .mnav__list small { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .08em; line-height: 1.3; color: var(--muted); }
  .mnav__sep { height: 1px; margin: var(--sp-3) var(--sp-1); background: var(--line); }
  html.mnav-open, html.mnav-open body { overflow: hidden; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mnav:not([hidden]), .mnav__track, .mnav-dim:not([hidden]), .mnav-fab { transition: none; }
}

/* ---------- 푸터 ---------- */
.site-footer { border-top: 1px solid rgba(255,255,255,0.08); font-size: var(--fs-sm); color: var(--muted); }
.site-footer__inner { padding-block: var(--sp-8); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); }
.site-footer__nav a { color: var(--text-sub); }
.site-footer__nav a:hover { color: var(--text-strong); }
.site-footer__nav a.strong { font-weight: var(--fw-bold); }
.site-footer__bottom { color: var(--muted); }
/* 추천 사이트 (fragments/footer): 제목 + 배너 카드(그림 위에 이름 · 설명, PC 3칸 · 폰 한 줄씩 낮게). 구분선 없이 여백으로만 메뉴 줄과 나눔 */
.foot-links { width: 100%; max-width: 980px; margin-bottom: var(--sp-4); text-align: left; }
.foot-links__t { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em; color: var(--hud-yellow); text-align: center; }
.foot-links__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.foot-links__list a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 64px; padding: var(--sp-3) var(--sp-4); overflow: hidden; color: var(--text-sub); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); isolation: isolate; transition: border-color .2s ease, transform .2s ease; }
.foot-links__list a.has-img { aspect-ratio: 16 / 5; } /* 낮은 띠 배너 (그림은 가운데를 잘라 보임) */
.foot-links__list a::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(var(--bg-rgb), .92) 0%, rgba(var(--bg-rgb), .45) 45%, transparent 75%); }
.foot-links__list img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .3s ease; filter: brightness(.85); }
.foot-links__list a:hover { color: var(--text-strong); border-color: var(--line-strong); transform: translateY(-2px); }
.foot-links__list a:hover img { transform: scale(1.04); filter: brightness(1); }
.foot-links__list b { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.foot-links__list small { font-size: var(--fs-xs); color: var(--text-sub); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.foot-links__list svg { position: absolute; top: 10px; right: 10px; color: var(--text-strong); opacity: .8; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
@media (max-width: 640px) {
  .foot-links__list { grid-template-columns: 1fr; gap: var(--sp-2); }
  .foot-links__list a.has-img { aspect-ratio: auto; min-height: 76px; } /* 폰: 낮은 띠 배너로 */
  .foot-links__list a::after { background: linear-gradient(90deg, rgba(var(--bg-rgb), .9) 0%, rgba(var(--bg-rgb), .55) 55%, transparent 100%); }
}

/* ---------- 제목류 ---------- */
.page-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.page-edit { position: absolute; top: var(--sp-6); left: 0; right: 0; z-index: 2; display: flex; justify-content: flex-end; pointer-events: none; } /* 안내 페이지 위 관리자 전용 '본문 편집' 버튼 (fragments/site-page.html). 오른쪽 위에 띄워 머리말을 밀어 내리지 않게 (관리자만 제목이 52px 아래로 내려가 다른 화면과 높이가 달랐음) */
.page-edit > * { pointer-events: auto; }
.page-head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); }
.eyebrow { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); color: var(--accent); text-transform: uppercase; }
.eyebrow--pink { font-family: var(--font); letter-spacing: var(--ls-caps); color: var(--pink); }
.page-title { font-size: var(--fs-page-title); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tighter); }
.page-desc { font-size: var(--fs-base); color: var(--muted); max-width: 64ch; }
/* 공략실 머리말 (게임 소개 01 · 캐릭터 02 · 스페셜 콤보 03 · 스테이지 04 · 보스 05 · 몬스터 06 · 아이템 07 · 마법 08 · 타임어택 09, 번호는 공략실 첫 화면 순서, 헤더 통일 시안 05 포인트 띠)
   영문 소제목(.eyebrow)을 큰 Bebas 연보라 글씨로, 한글 제목(.page-title)은 그 밑 보라 띠. 띠 앞 번호는 h1 의 data-no
   (예전 오락실 HUD 노랑·빨강 → 사이트 포인트색. 원복은 이 블록을 바꾼 커밋 하나를 git revert) */
/* 큰 글씨의 글자 상자가 위로 튀어나와 빵조각을 덮지 않게: 블록 + 줄 높이 1 + 위 여백, 빵조각은 항상 위에 */
.page-head--hud { margin-top: 0; } /* 머리말 높이는 모든 화면이 같게: 본문 맨 위(.site-main 위 여백 32) 에서 바로 시작 — 영상 · 갤러리 기준 */
/* 머리말 바로 위 위치 표시(공략실 › 보스 등)는 본문 위 여백 안에 띄워, 머리말이 다른 화면과 같은 높이에서 시작하게 */
.site-main { position: relative; }
.breadcrumb:has(+ .page-head--hud), .breadcrumb:has(+ .page-head--row) { position: absolute; top: 6px; }
.breadcrumb { position: relative; z-index: 1; }
.page-head--hud .eyebrow { display: block; font-family: 'Bebas Neue', var(--font-display); font-size: var(--fs-hud-title); font-weight: var(--fw-bold); line-height: 1; letter-spacing: var(--ls-arcade); color: var(--text-strong); text-shadow: 0 2px 12px rgba(0,0,0,.45); } /* 배경 그림 위에서도 읽히게 부드러운 그림자만 */
.page-head--hud .page-title { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); padding: 3px 14px 3px 8px; font-size: var(--fs-lg); font-weight: var(--fw-heavy); letter-spacing: 0; line-height: var(--lh-snug); color: var(--text-strong); background: var(--primary); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.page-head--hud .page-title[data-no]::before { content: attr(data-no); padding: 0 6px; font-family: 'Bebas Neue', var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-regular); letter-spacing: 0.06em; color: var(--accent); background: var(--bg); }
.page-head--hud .page-desc { max-width: 70ch; font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-sub); }
.page-head--hud .page-desc b { color: var(--accent); }
/* 공략 기준 버전 딱지 (fragments/guide-note): 공략실 제목 그림 오른쪽 위 작은 딱지, 누르거나 마우스를 올리면 자세한 안내. 폰은 제목 아래 가운데 */
.guide-ver { position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 2; text-align: left; } /* 크기는 딱지만큼 (펼친 안내는 아래로 띄워서 딱지가 밀리지 않게) */
.guide-ver summary { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-sub); background: rgba(0,0,0,.5); border: 1px solid rgba(var(--hud-yellow-rgb), .3); border-radius: 999px; cursor: pointer; list-style: none; backdrop-filter: blur(4px); }
.guide-ver summary::-webkit-details-marker { display: none; }
.guide-ver summary svg { flex: none; color: var(--hud-yellow); }
.guide-ver summary:hover, .guide-ver[open] summary { color: var(--text-strong); border-color: rgba(var(--hud-yellow-rgb), .6); }
.guide-ver p { position: absolute; top: calc(100% + 6px); right: 0; width: min(340px, calc(100vw - 2 * var(--sp-6))); margin: 0; padding: 10px 12px; font-size: var(--fs-xs); line-height: var(--lh-loose); color: var(--text-sub); background: rgba(var(--bg-rgb), .92); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 10px 24px -10px rgba(0,0,0,.8); }
@media (max-width: 760px) { .guide-ver { top: var(--sp-3); right: var(--sp-3); left: var(--sp-3); text-align: center; } .guide-ver summary { max-width: 100%; white-space: normal; text-align: left; line-height: 1.4; } .guide-ver p { right: auto; left: 50%; transform: translateX(-50%); text-align: left; } .gg-hero__text { padding-top: calc(var(--sp-6) + 36px); } } /* 폰: 제목 그림 위 가운데 (아래쪽은 문이 덮음) */
.section { display: flex; flex-direction: column; gap: var(--sp-5); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.section-title { font-size: var(--fs-section-title); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tighter); display: flex; align-items: center; gap: var(--sp-2); }
.section-title--sm { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.more-link { font-size: var(--fs-md); white-space: nowrap; }
.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); flex-wrap: wrap; }
.breadcrumb [aria-current] { color: var(--text); }

/* ---------- 카드 ---------- */
/* 흐림(backdrop-filter)은 뺌: 바탕이 92% 불투명이라 흐림은 거의 안 보이는데, 카드가 많은 목록에서 스크롤할 때마다 뒤를 다시 흐리게 그려 무거웠음 */
.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 20px 40px -24px rgba(0,0,0,0.8);
  border-radius: var(--radius-lg);
  color: var(--text);
}
.card--pad { padding: var(--sp-6); }
.card--accent { border-color: rgba(196,181,253,0.45); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.card__body { padding: var(--sp-6); }
.card__foot { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line); text-align: center; font-size: var(--fs-md); }
@media (max-width: 480px) {
  .card--pad, .card__body { padding: var(--sp-5); }
  .card__head { padding: var(--sp-4) var(--sp-5); }
}

/* 호버 효과 (시안 유지) */
.fx { transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease, filter .28s ease, opacity .28s ease; }
.fx:hover, .fx:focus-visible { transform: translateY(-4px); border-color: rgba(196,181,253,.35); box-shadow: var(--shadow-hover); }
/* 옆 카드를 흐리게 하던 효과(.fx-group:hover)는 뺌: 훑어보는 목록에서 마우스가 지날 때마다 다른 카드가 흐려져 정신없음. 올린 카드가 떠오르는 것만 남김 */
@media (prefers-reduced-motion: reduce) {
  .fx, .fx:hover { transition: none; transform: none; }
}

/* ---------- 버튼 ----------
   단색 + 은은한 hover(색만 살짝 밝게), 누를 때 살짝 어둡게. 번쩍이는 그림자·그라데이션·눌림 확대 없음
   포커스는 키보드로 왔을 때만 링 표시 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-5);
  font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-none); white-space: nowrap; letter-spacing: var(--ls-tight);
  border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--text);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { color: var(--text-strong); }
.btn:focus-visible, .btn-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--focus-rgb), .45); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); color: #fff; }
.btn--primary:active { background: var(--primary); filter: brightness(.92); }
.btn--pink { background: var(--pink-strong); color: #fff; }
.btn--pink:hover { background: #AE4A7F; color: #fff; }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { background: var(--surface-2); border-color: rgba(255,255,255,.24); }
.btn--ghost:active { background: var(--surface); }
.btn--danger { color: #fff; background: var(--danger); border-color: transparent; }
.btn--danger:hover { background: var(--danger-hover); color: #fff; }
.btn--sm { min-height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn--lg { min-height: 52px; padding: 0 var(--sp-6); font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-icon:hover { background: var(--surface-2); border-color: rgba(255,255,255,.24); color: var(--text-strong); }
/* 글자 사이에 넣는 Lucide 아이콘 (<svg class="ico">): 글자 크기를 따라가고 줄 가운데에 맞춤 */
.ico { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

/* 끌어서 순서 바꾸기 손잡이 (dnd2.js [data-sortable] · [data-sort-handle]). 줄을 끄는 동안 그 줄은 .is-sorting */
.sort-handle {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--muted);
  cursor: grab; touch-action: none; /* 폰에서 끌 때 화면이 같이 스크롤되지 않게 */
  transition: background-color .15s ease, color .15s ease;
}
.sort-handle:hover { background: var(--surface-2); color: var(--text-strong); }
.sort-handle:active { cursor: grabbing; }
[data-sortable] > .is-sorting { background: var(--surface-2); outline: 1px solid var(--accent-line); outline-offset: -1px; }
[data-sortable] > .is-sorting > td { background: transparent; }
@media (max-width: 768px) { .sort-handle { width: 44px; height: 44px; } }

/* ---------- 배지 / 칩 / 아바타 ---------- */
.chip { display: inline-flex; align-items: center; padding: 3px 10px; font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--accent); border: 1px solid var(--accent-line); border-radius: 999px; white-space: nowrap; }
/* 한 줄 목록의 [더보기 +N] · [접기] 단추 (js/media-more.js 가 [data-more] 줄 끝에 붙임: 갤러리 · 영상 · 음악). 크기는 쓰는 곳에서 줄에 맞춤 */
.vl-tags__more { padding: 4px 12px; font: inherit; font-size: var(--fs-sm); color: var(--muted); background: none; border: 1px dashed var(--line-strong); border-radius: 999px; cursor: pointer; }
.vl-tags__more:hover, .vl-tags__more:focus-visible { color: var(--text-strong); border-color: var(--accent); }
.chip--pink { color: #fff; background: var(--pink-strong); border-color: transparent; font-weight: var(--fw-semibold); }
.chip--solid { color: #fff; background: var(--primary); border-color: transparent; font-weight: var(--fw-semibold); }
.chip--hot { color: #fff; background: var(--danger); border-color: transparent; font-weight: var(--fw-semibold); } /* 이번 주 추천 같은 강조 딱지 */
.lv { display: inline-flex; align-items: center; padding: 1px 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--accent); border: 1px solid var(--accent-line); border-radius: 4px; white-space: nowrap; }
.lv--solid { color: #fff; background: var(--primary); border-color: transparent; }
.avatar { width: var(--icon-size); height: var(--icon-size); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-md); font-weight: var(--fw-bold); color: #fff; background: var(--avatar); border-radius: 50%; }
.avatar--md, .avatar--lg { width: var(--icon-size); height: var(--icon-size); font-size: var(--fs-md); } /* 크기 구분 없이 통일 */
/* 주 캐릭터 얼굴 동그라미 (fragments/mainchar.html). 여러 개면 살짝 겹쳐 놓음 */
.mc-faces { display: inline-flex; align-items: center; flex-shrink: 0; }
.mc-faces img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface-solid); background: var(--surface-2); }
.mc-faces img + img { margin-left: -7px; }
.mc-faces--lg img { width: 36px; height: 36px; }
.mc-faces--lg img + img { margin-left: -9px; }
/* 얼굴 + 직업 이름 알약 (fragments/mainchar.html chips) */
.mc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
/* 글쓴이 카드 '주 캐릭터' (mainchar :: stack): 얼굴 겹쳐 한 줄, 이름은 올리면(폰은 탭) 말풍선. 올린 얼굴은 살짝 떠서 앞으로 */
.mc-stackbox { display: flex; justify-content: center; }
.mc-stack { display: inline-flex; align-items: center; padding-left: var(--sp-3); }
/* max-width: none · flex: none — 공통 img { max-width: 100% } 가 겹친 칸 폭(44 − 12)에 걸려 1개일 때 얼굴이 타원으로 찌그러졌음 */
.mc-stack img { position: relative; flex: none; width: 44px; height: 44px; max-width: none; margin-left: calc(-1 * var(--sp-3)); border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 2px solid var(--surface-solid); box-shadow: 0 0 0 1px var(--line-strong); cursor: default; transition: transform .15s ease, box-shadow .15s ease; }
.mc-stack img:hover, .mc-stack img:focus-visible { z-index: 1; transform: translateY(-3px); box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-hover); outline: none; }
/* 폰: 겹치면 누를 수 있는 폭이 32px 라(44px 기준 미달) 겹치지 않고 나란히. 카드 폭(약 330)에 6개 × 44 + 사이 4 가 들어감 */
@media (max-width: 768px) {
  .mc-stack { gap: var(--sp-1); padding-left: 0; }
  .mc-stack img { margin-left: 0; }
}
.mc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--sp-3) 3px 3px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mc-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--surface); }
/* 주 캐릭터 고르기 (회원가입·설정): 얼굴 + 이름, 고르면 테두리·밝게 */
.mc-pick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); }
.mc-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-1); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-sub); font-size: var(--fs-sm); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.mc-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mc-opt img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; filter: grayscale(.7) brightness(.8); transition: filter .15s ease; }
.mc-opt:hover { border-color: var(--accent-line); }
.mc-opt:has(input:checked) { border-color: var(--accent); background: var(--surface-2); color: var(--text-strong); font-weight: var(--fw-semibold); }
.mc-opt:has(input:checked) img { filter: none; box-shadow: 0 0 0 2px var(--accent); }
.mc-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) {
  .mc-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.user { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-md); color: var(--text-sub); }
.user__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { flex-shrink: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--pink); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.meta { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); }
.dot-sep { column-gap: var(--sp-2); }
.dot-sep > * + *::before { content: "·"; margin-right: var(--sp-2); color: var(--muted); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- 탭 ---------- */
.tabs { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex-shrink: 0; height: 52px; padding: 0 var(--sp-4); font-size: var(--fs-base); background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-sub); white-space: nowrap; display: inline-flex; align-items: center; }
.tab:hover { color: var(--text-strong); }
.tab[aria-selected="true"], .tab.active { color: var(--accent); font-weight: var(--fw-semibold); border-bottom-color: var(--accent); }
.tabs--line { border-bottom: 1px solid var(--line); }

/* 게임장 게임 메뉴 (templates/arcade/tabs.html — 게임장·고블린 크래쉬·온라인 오락실 공용). 폭이 좁으면 옆으로 밀어서 봄 */
.ar-tabs { display: flex; gap: var(--sp-1); width: max-content; max-width: 100%; margin: var(--sp-6) 0 var(--sp-5); padding: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ar-tabs::-webkit-scrollbar { display: none; }
.ar-tabs__no, .ar-tabs__en { display: none; } /* 게임장 화면(.ar-select, arcade.css)에서만 보이는 번호·영문 이름 */
.ar-tabs__admin { margin-left: var(--sp-2); padding: 1px 6px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--accent); border: 1px solid var(--accent-line); border-radius: 999px; } /* 노출을 끈 게임: 관리자에게만 보이는 칸 (ArcadeService.menu) */
.ar-tabs a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); color: var(--text-sub); font-size: var(--fs-md); font-weight: var(--fw-semibold); white-space: nowrap; border-radius: var(--radius); transition: color .2s, background .2s; }
.ar-tabs a:hover { color: var(--text-strong); background: var(--surface-2); }
.ar-tabs a[aria-current="page"] { color: var(--text-strong); background: var(--primary); }
.ar-tabs a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--focus-rgb), .45); }
@media (max-width: 768px) { .ar-tabs { margin: var(--sp-5) 0 var(--sp-4); } }

/* 알약형 필터 */
.pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pill { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-md); border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-sub); display: inline-flex; align-items: center; white-space: nowrap; }
.pill:hover { border-color: var(--accent-line); color: var(--text-strong); }
.pill.active, .pill[aria-pressed="true"], .pill[aria-selected="true"] { background: var(--primary); border-color: transparent; color: #fff; font-weight: var(--fw-semibold); }

/* ---------- 폼 ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-sub); }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 14px;
  font-size: var(--fs-base); color: var(--text);
  background-color: rgba(0,0,0,0.25); border: 1px solid var(--line-strong); border-radius: 8px;
  transition: border-color .2s ease, background-color .2s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--placeholder); opacity: 1; }
/* background 전체가 아니라 색만 바꿈 (전체를 바꾸면 드롭다운 화살표 그림까지 지워짐) */
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); background-color: rgba(0,0,0,0.35); }
.select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23979BA6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }

/* 입력창·드롭다운·글상자는 뒤 배경이 비치지 않게 불투명 (글씨가 잘 보이게) */
.input, .select, .textarea { background-color: var(--surface-solid); }
.input:focus, .select:focus, .textarea:focus { background-color: #212226; }
.input:hover, .textarea:hover { border-color: var(--accent-line); }
.select:hover { border-color: var(--accent-line); }
.select option { background: var(--surface-solid); color: var(--text); }
.textarea { min-height: 240px; resize: vertical; line-height: var(--lh-loose); }
.search-bar { display: flex; gap: var(--sp-2); min-width: 0; }
.search-bar .select { width: 132px; flex: 0 0 auto; } /* "제목+내용" 이 잘리지 않게 */
.search-bar .input { flex: 1 1 auto; width: auto; min-width: 0; }
.search-bar .btn, .search-bar .btn-icon { flex-shrink: 0; }
.checkbox { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); color: var(--text-sub); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--primary); }

/* ---------- 게시글 목록 행 (메인·게시판 공용) ----------
   데스크톱: 분류 | 제목 | 글쓴이 | 작성 | 추천 (필요 시 번호/조회 추가)
   모바일  : 제목이 첫 줄, 나머지는 아래 한 줄 메타로 */
.post-list { display: flex; flex-direction: column; }
.post-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 200px 84px 56px;
  grid-template-areas: "cat title user time vote";
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  transition: background .2s ease;
}
.post-row:last-child { border-bottom: 0; }
a.post-row:hover { background: rgba(255,255,255,0.035); color: var(--text); }
.post-row--head { padding-block: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }
.post-row--head .post-row__vote, .post-row--head .post-row__time { color: var(--muted); font-size: var(--fs-xs); }
.post-row--notice { background: rgba(139,92,246,0.08); }
.post-row__cat { grid-area: cat; font-size: var(--fs-sm); color: var(--muted); }
.post-row__title { grid-area: title; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-base); font-weight: var(--fw-medium); }
.post-row__title .ellipsis { flex: 0 1 auto; }
.post-row__user { grid-area: user; }
.post-row__time { grid-area: time; font-size: var(--fs-sm); color: var(--muted); }
.post-row__vote { grid-area: vote; font-size: var(--fs-sm); color: var(--text-sub); text-align: right; }
.post-row__views { grid-area: views; font-size: var(--fs-sm); color: var(--muted); }
.post-row__no { grid-area: no; font-size: var(--fs-sm); color: var(--muted); }
.post-row__vote-label, .post-row__views-label { display: none; }
@media (max-width: 768px) {
  .post-row {
    grid-template-columns: auto auto auto 1fr;
    grid-template-areas: "title title title title" "cat user time vote";
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
  }
  .post-row--head { display: none; }
  .post-row__cat, .post-row__time, .post-row__vote { font-size: var(--fs-xs); }
  .post-row__user { font-size: var(--fs-sm); }
  .post-row__user .avatar { display: none; }
  .post-row__vote-label, .post-row__views-label { display: inline; }
  .post-row__no, .post-row__views { display: none; }
}

/* ---------- 데이터 표 (도감 등) : 좁으면 가로 스크롤 ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.table th { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.table td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .2s ease; }
.table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* ---------- 페이지네이션 ---------- */
.pagination { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 44px; height: 44px; padding: 0 var(--sp-3); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-md); color: var(--text-sub); border: 1px solid var(--line-strong); border-radius: 8px; }
.pagination a:hover { border-color: var(--accent-line); color: var(--text-strong); }
.pagination .active { background: var(--primary); border-color: transparent; color: #fff; font-weight: var(--fw-bold); }
/* 목록 쪽 나눔 (게시판 · 영상 · 갤러리 같은 모양): 목록 밀도에 맞춰 조금 작게 (기본 .pagination 은 44px) */
.cm-pages { padding-top: 6px; }
.cm-pages a, .cm-pages span { min-width: 34px; height: 34px; padding: 0 10px; font-size: var(--fs-sm); }

/* ---------- 이미지 자리 / 미디어 ---------- */
.img-ph { display: flex; align-items: center; justify-content: center; background: var(--surface-solid); color: var(--muted); font-size: var(--fs-sm); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-3x4 { aspect-ratio: 3 / 4; }
.thumb { position: relative; width: 100%; }
.thumb__badge { position: absolute; right: var(--sp-2); bottom: var(--sp-2); padding: 2px 8px; font-size: var(--fs-xs); color: #fff; background: rgba(0,0,0,0.65); border-radius: 4px; }
.play-icon { width: 48px; height: 48px; }

/* 미디어 카드 (갤러리·영상) */
.media-card { display: flex; flex-direction: column; gap: var(--sp-3); color: var(--text); min-width: 0; }
.media-card:hover { color: var(--text); }
.media-card__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.media-card__meta { font-size: var(--fs-sm); color: var(--muted); }

/* 요약 수치 박스 */
.stat { padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.stat__label { font-size: var(--fs-xs); color: var(--muted); }
.stat__value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-strong); }

/* 사이드 목록 (접속자, 랭킹 등) */
.side-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.side-list__item { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-md); min-width: 0; }
.rank-no { width: 20px; flex-shrink: 0; font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--accent); text-align: center; }
.rank-no--low { color: var(--muted); }

/* 키 입력 표기 */
.key { display: inline-flex; align-items: center; padding: 2px 8px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text); background: rgba(255,255,255,0.08); border: 1px solid var(--line-strong); border-radius: 5px; white-space: nowrap; }

/* 등장 애니메이션 (시안 유지) */
@keyframes blurIn { from { opacity: 0; filter: blur(6px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: none; } }
.blur-in { animation: blurIn .45s ease both; }

/* ---------- 반응형 공통 ---------- */
@media (max-width: 1024px) {
  .layout-aside, .layout-nav { grid-template-columns: minmax(0, 1fr); }
  .aside--sticky { position: static; }
}
@media (max-width: 768px) {
  :root { --fs-body: var(--fs-md); }
  .site-main { padding-top: var(--sp-6); }
  .hide-md { display: none !important; }
}
@media (max-width: 480px) {
  .hide-sm { display: none !important; }
  .btn-row-sm-stack { flex-direction: column; align-items: stretch; }
}

/* ---------- 시안 4 공통 컴포넌트 ---------- */

/* 탭 패널 (dnd2.js 의 data-tabs 와 짝) */
[data-panel][hidden] { display: none !important; }

/* 스위치 (설정 on/off) */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.14); transition: background .2s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 접었다 펴는 질문 목록 */
details.faq { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
details.faq:last-child { border-bottom: 0; }
details.faq summary { cursor: pointer; font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--text-strong); }
details.faq p { margin-top: var(--sp-3); color: var(--text-sub); line-height: var(--lh-loose); }

/* 포인트 증감 표시 */
.plus { color: #5DBB86; font-weight: var(--fw-bold); }
.minus { color: #E07A7A; font-weight: var(--fw-bold); }

/* 위험 버튼 (삭제, 정지 등) */

/* ---------- 상단 배경 일러스트 (게임장 스타일) ----------
   이미지(::before)와 그라데이션(::after)을 나눠서, 이미지에 필터를 걸어도 아래 경계선이 생기지 않게 함.
   왼쪽은 글씨가 잘 읽히도록 어둡게, 아래로 갈수록 단색 배경으로 사라짐. */
body::before, body::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 820px; pointer-events: none;
}
body::before { z-index: -2; background: url(../img/art/keyart-arcade-bg.webp) center top / cover no-repeat; }
body::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(var(--bg-rgb),0.92) 0%, rgba(var(--bg-rgb),0.55) 30%, rgba(var(--bg-rgb),0) 62%),
    linear-gradient(180deg, rgba(var(--bg-rgb),0.1) 0%, rgba(var(--bg-rgb),0.25) 40%, rgba(var(--bg-rgb),0.85) 78%, var(--bg) 100%);
}
@media (max-width: 768px) {
  body::before, body::after { height: 480px; }
  body::after {
    background:
      linear-gradient(180deg, rgba(var(--bg-rgb),0.35) 0%, rgba(var(--bg-rgb),0.55) 45%, rgba(var(--bg-rgb),0.9) 80%, var(--bg) 100%);
  }
}

/* ---------- 위쪽 사선 빛 ----------
   왼쪽 위 모서리에서 '/' 사선을 경계로 오른쪽 아래로 넓게 퍼지며 사라지는 빛.
   배경 상자(820px)에 같이 그리면 상자 아래 끝에서 수평으로 잘려 네모처럼 보여서, 따로 크게(정사각형에 가깝게) 깔고
   아래쪽은 마스크로 부드럽게 사라지게 함. html::after 는 body::after 보다 뒤에 그려져서 어두운 층 위에 빛이 얹힘.
   색은 기본 네온 보라 → 핑크. 두 색(시작 --glow-a, 끝 --glow-b)과 그 사이 두 색(--glow-a2, --glow-m)을 "R,G,B" 로 지정.
   페이지별로 바꾸려면 아래 "페이지별 사선 빛 색" 처럼 :root:has(> body.page-구역) 에 네 값을 줌
   (색은 관리자 > 사이트 설정 > 배경에서도 구역별로 바꿀 수 있음) */
:root { --glow-a: 124,58,237; --glow-a2: 147,72,244; --glow-m: 180,80,245; --glow-b: 217,70,239; }
html::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1400px; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(var(--glow-a),0.3) 0%, rgba(var(--glow-a2),0.19) 11%, rgba(var(--glow-m),0.1) 22%,
    rgba(var(--glow-b),0.045) 32%, rgba(var(--glow-b),0.012) 42%, rgba(var(--glow-b),0) 50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
@media (max-width: 768px) {
  html::after { height: 900px; }
}
/* 페이지별 사선 빛 색 (없으면 위의 기본 보라 → 핑크). 예:
   :root:has(> body.page-items) { --glow-a: 124,58,237; --glow-a2: 147,72,244; --glow-m: 180,80,245; --glow-b: 217,70,239; } */

/* 글자에 빨강 그라데이션 */
.text-grad { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 회원 프로필 아이콘: 70×70 원본을 원형으로 (image-rendering: 도트 그림 그대로) */
.uicon { width: var(--icon-size); height: var(--icon-size); display: inline-block; flex-shrink: 0; border-radius: 50%; object-fit: cover; image-rendering: pixelated; background: #23252E; box-shadow: 0 0 0 1px rgba(255,255,255,0.14); vertical-align: middle; }

/* 메인의 캐릭터 일러스트는 배경이 아니라 첫 화면 오른쪽 기둥 6개로 보여줌 (pages/home.css .hv-slice) */
.page-home::before { display: none; }

/* 그 밖의 페이지 배경 (레이아웃의 .page-art 상자, body::before 는 메인·게임장만 사용)
   ::after = 구역 그림 한 장을 화면 위쪽 가로 전체에 가운데 기준으로 깔고, 아래쪽은 배경색으로 녹임
   그림은 --art, 보이는 부분은 --art-pos(위치) · --art-size(크기) · --art-opacity(진하기)
   구역별 기본값은 아래, 관리자 > 사이트 설정 > 배경 그림에서 바꾸면 /theme.css 가 덮어씀 */
body:not(.page-home)::before { display: none; }
.page-art {
  --art: url(../img/bg/etc.jpg);
  position: absolute; left: 0; right: 0; top: 0; height: 820px; z-index: -2; overflow: hidden; pointer-events: none;
}
.page-home .page-art { display: none; }
.page-art::before {
  /* 뒷받침: 같은 그림을 크게 흐리고 어둡게 띠 전체에 깔아둠 → 그림이 화면보다 좁게(확대·전체 보기) 설정돼도 양옆이 뚝 끊기지 않고 번져 보임 */
  content: ""; position: absolute; left: -60px; right: -60px; top: -60px; height: 520px;
  background: var(--art) center / cover no-repeat;
  filter: blur(36px) brightness(0.62) saturate(1.15);
  opacity: var(--art-opacity, 0.6);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
}
.page-art::after {
  /* 위쪽 띠(제목 영역)에만 그림을 또렷하게. 본문 박스가 시작되기 전에 아래로 녹여서 박스 사이로 그림이 삐져나오지 않게
     그림 위에 어두운 막을 좌우 똑같이 덮어 한쪽만 튀지 않게 (글씨가 있는 위·아래는 조금 더 진하게) */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 460px;
  background-image:
    linear-gradient(to right, rgba(var(--bg-rgb),0.55) 0%, rgba(var(--bg-rgb),0.15) 22%, rgba(var(--bg-rgb),0.15) 78%, rgba(var(--bg-rgb),0.55) 100%),
    linear-gradient(to bottom, rgba(var(--bg-rgb),0.35) 0%, rgba(var(--bg-rgb),0) 35%, rgba(var(--bg-rgb),0.25) 70%),
    var(--art);
  background-position: 0 0, 0 0, var(--art-pos, center 30%);
  background-size: 100% 100%, 100% 100%, var(--art-size, cover);
  background-repeat: no-repeat;
  opacity: var(--art-opacity, 0.6); filter: brightness(0.9) saturate(1);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
/* 구역별 그림: 어두운 바탕에 어울리고 구역 주제에 맞는 것으로 (캐릭터=캐릭터 선택 화면, 아이템=상점, 스테이지=용의 소굴, 공략=레드 드래곤 전투, 영상=애니 장면, 갤러리=엘프·도적 팬아트, 커뮤니티=여관의 파티, 게임장=캐릭터 모음, 관리자=마법진, 회원=직업 소개, 그 밖=어두운 전투)
   그림은 가로로 넓은 장면(1920×약 830, 2.3:1)으로 넣음. 세로 그림·작은 그림을 쓰면 화면 폭에 맞추느라 얼굴 한 부분만 크게 확대돼 보임 */
.page-characters .page-art { --art: url(../img/bg/characters.jpg); --art-pos: center 50%; --art-opacity: 0.55; }
.page-bosses .page-art     { --art: url(../img/bg/bosses.jpg); --art-pos: center 35%; }
.page-monsters .page-art   { --art: url(../img/bg/bosses.jpg); --art-pos: center 65%; --art-opacity: 0.45; } /* 몬스터 전용 그림이 생기기 전까지 보스 그림의 다른 부분을 옅게 */
.page-items .page-art      { --art: url(../img/bg/items.jpg); --art-pos: center 60%; --art-opacity: 0.55; }
.page-stages .page-art     { --art: url(../img/bg/stages.jpg); --art-pos: center 40%; }
.page-guides .page-art     { --art: url(../img/art/cover-redboss.webp); --art-pos: center 45%; --art-opacity: 0.5; }
.page-videos .page-art     { --art: url(../img/bg/videos.jpg); --art-pos: center 40%; --art-opacity: 0.7; }
.page-gallery .page-art    { --art: url(../img/bg/gallery.jpg); --art-pos: center 45%; --art-opacity: 0.55; }
.page-community .page-art  { --art: url(../img/bg/community.jpg); --art-pos: center 50%; --art-opacity: 0.5; } /* 글 보기·쓰기 배경 = 여관의 파티 (목록 위 그림 띠는 board.css .cm-hero 의 엘프 그림 그대로) */
.page-arcade .page-art     { --art: url(../img/art/keyart-arcade-bg.webp); --art-pos: center 40%; --art-opacity: 0.45; }
/* 게임장은 네온 보랏빛으로 */
.page-arcade .page-art::after { filter: hue-rotate(-58deg) saturate(1.2) brightness(0.85); }
.page-admin .page-art      { --art: url(../img/bg/admin.jpg); --art-pos: center 50%; --art-size: contain; --art-opacity: 0.45; }
.page-member .page-art     { --art: url(../img/bg/member.jpg); --art-pos: center 10%; }
/* 하단 푸터 메뉴 화면 (LayoutAdvice 에서 구역 이름을 붙임): 소개=파티의 모험, 시작 가이드=클래스 일러스트, 명예의 전당=엔딩 화면, 출석부=파티의 전투, 운영 정책=던전 */
.page-about .page-art      { --art: url(../img/bg/about.jpg); --art-pos: center 25%; --art-opacity: 0.55; }
.page-guide .page-art      { --art: url(../img/bg/guide.jpg); --art-pos: center 45%; --art-opacity: 0.4; }
.page-ranking .page-art    { --art: url(../img/bg/ranking.jpg); --art-pos: center 40%; --art-opacity: 0.55; }
.page-attendance .page-art { --art: url(../img/bg/attendance.jpg); --art-pos: center 35%; --art-opacity: 0.55; }
.page-policy .page-art     { --art: url(../img/bg/policy.jpg); --art-pos: center 20%; --art-opacity: 0.5; }
.page-devnote .page-art    { --art: url(../img/bg/devnote.jpg); --art-pos: center 50%; --art-opacity: 0.55; } /* 개발 노트 = 모험의 서(책 표지) */
@media (max-width: 768px) {
  .page-art { height: 480px; }
  .page-art::after { height: 300px; opacity: 0.45; }
}

/* 제목류는 --font-heading 을 따름 */
h1, h2, h3, .page-title, .section-title, .card__title, .home-hero__title, .auth-card__title { font-family: var(--font-heading); }

/* 헤더 닉네임 옆 프로필 아이콘 */
.header-user__icon { width: var(--icon-size); height: var(--icon-size); }

/* ---------- 페이지 옮길 때 깜빡임 줄이기 ----------
   - 같은 사이트 안에서 페이지를 옮기면 브라우저가 화면을 부드럽게 겹쳐 바꿈 (크롬·엣지·사파리, 파이어폭스는 기존대로)
   - 헤더는 그대로 두고 본문만 바뀌게 따로 이름을 붙임
   - 같은 탭에서 두 번째 페이지부터는 등장 애니메이션(blur-in)을 끔 (html.seen, layouts/default.html) */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
.seen .blur-in { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.pagination .is-off { opacity: .35; cursor: default; }
/* 폰: 번호는 지금 쪽 앞뒤 2개씩만 (« ‹ 1 2 3 4 5 › » 가 한 줄에). 번호 링크 = aria-label 없는 a, 화살표는 aria-label 이 있음 */
@media (max-width: 560px) {
  .pagination { gap: 4px; flex-wrap: nowrap; }
  .pagination a, .pagination span { min-width: 34px; height: 36px; padding: 0 6px; font-size: var(--fs-sm); }
  .pagination > a:not([aria-label]):not(.active) { display: none; }
  .pagination > .active + a:not([aria-label]), .pagination > .active + a + a:not([aria-label]),
  .pagination > a:not([aria-label]):has(+ .active), .pagination > a:not([aria-label]):has(+ a + .active) { display: inline-flex; }
}
/* 레벨 배지: 자릿수(Lv.1 / Lv.31 / Lv.99)와 상관없이 같은 폭 */
.lv { justify-content: center; min-width: 44px; font-variant-numeric: tabular-nums; }

/* 알림·확인 창·말풍선·메뉴는 공통 UI 키트 (css/dnd2-ui.css) */
.avatar--img { object-fit: contain; background: #26272b; image-rendering: pixelated; } /* 게임장 아이콘 (픽셀 그림이라 흐려지지 않게). 바탕은 불투명 (반투명이면 읽은 사람처럼 겹친 줄에서 아래 아이콘이 비쳐 뚫려 보였음) */
.avatar--photo { object-fit: cover; image-rendering: auto; }
.avatar--empty { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-sub); background: transparent; border: 1px dashed var(--line-strong); box-shadow: none; } /* 프로필 사진 없음 (관리자 · 설정) */
/* 회원 동그라미 테두리: 바탕색 틈 + 어두운 회색 고리 (게시글 · 댓글 · 프로필 · 머리글). 큰 동그라미(글쓴이 카드 · 마이페이지)는 고리를 굵게 */
.avatar, .uicon { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px rgba(255,255,255,.16); }
/* 회원 아이콘 등급 테두리: 글 · 댓글 · 목록(fragments/avatar) · 채팅 · 랭킹 · 쪽지 · 머리글(dnd2.js 가 주소의 r= 를 보고) 어디서나 같은 모양
   일반은 밝은 회색 (아이콘 없는 회원 · 관리자 지정 그림의 어두운 고리와 구별), 전설 · 신화는 등급색 빛을 살짝 더함.
   img 까지 붙여 채팅 · 게임장처럼 아이콘 테두리를 따로 정한 곳보다 앞서게 */
img.ic-r { border-radius: 50%; }
img.ic-r.ic-r--c { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--rarity-c); }
img.ic-r.ic-r--r { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--rarity-r); }
img.ic-r.ic-r--e { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--rarity-e); }
img.ic-r.ic-r--l { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--rarity-l), 0 0 10px 1px rgba(var(--rarity-l-rgb), .5); }
img.ic-r.ic-r--m { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--rarity-m), 0 0 12px 2px rgba(var(--rarity-m-rgb), .55); }
.author-card .avatar, .my-profile__avatar { box-shadow: 0 0 0 3px var(--surface-solid), 0 0 0 5px rgba(255,255,255,.18), 0 8px 20px -8px rgba(0,0,0,.7); } /* 관리자가 지정한 프로필 사진 (fragments/avatar :: profile). 사진이라 부드럽게 */
.crumb-top { padding-top: var(--sp-4); }   /* 큰 그림 머리가 있는 상세 페이지(보스 · 스테이지) 위 빵조각 줄 */

/* 떠 있는 영상 (dnd2.js 'floatPlayer'): 재생 중인 유튜브를 내려서 화면 위로 지나가면 머리글 바로 아래 오른쪽 위 작은 창으로 계속 보임
   (오른쪽 아래는 채팅 버튼 · 채팅창 자리라 겹쳤음). 열린 채팅창이 작은 창 아래 끝을 넘어올 때만 비켜 섬(.fp-dodge, dnd2.js): PC 는 채팅창 왼쪽으로, 폰은 맨 위로 */
.fp-on { position: fixed !important; top: calc(var(--header-h) + 12px); right: 20px; z-index: var(--z-float); width: 400px !important; max-width: none !important; height: auto !important; aspect-ratio: 16 / 9; margin: 0 !important; border-radius: 12px !important; box-shadow: 0 20px 44px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.12); animation: fpIn .2s ease both; }
.fp-hold { display: block; max-width: 100%; border-radius: var(--radius-lg); background: rgba(255,255,255,.03); border: 1px dashed var(--line); }
.fp-x { position: fixed; z-index: calc(var(--z-float) + 1); display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: #fff; background: rgba(10,10,14,.85); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; cursor: pointer; }
.fp-x:hover { background: var(--primary); }
.fp-x[hidden] { display: none; }
@keyframes fpIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* 창으로 띄우기 단추 (닫기 왼쪽). 폰은 작은 창을 따로 띄울 수 없어 숨김 */
@media (max-width: 640px), (pointer: coarse) { .fp-pip { display: none !important; } }
.fp-on.fp-dodge { right: 412px; width: min(400px, calc(100vw - 444px)) !important; } /* 채팅창(폭 380, 오른쪽 20) 왼쪽 */
/* 폰: 화면 폭의 60% 정도로 작게 */
@media (max-width: 640px) {
  .fp-on { top: calc(var(--header-h) + 8px); right: 12px; width: min(62vw, 300px) !important; }
  /* 채팅창이 화면 아래 78% 를 덮으므로 남은 위쪽 22% 안에 들어가게: 맨 위(머리글 위)로 올리고 높이에 맞춰 폭을 줄임 */
  .fp-on.fp-dodge { top: 8px; right: 12px; width: min(62vw, 300px, calc((22svh - 16px) * 16 / 9)) !important; }
}

/* ---------- 폰 글자 크기 균형 (640 이하) ----------
   큰 영문 머리말 · 캐릭터 이름 · 주문 이름이 본문보다 너무 커서 첫 화면을 차지하고, 설명 글은 13px 로 작았음
   단계: 큰 머리말 38 · 이름 40 · 쪽 제목 24 · 글 제목 21 · 구역 제목 19 · 소제목 16~18 · 설명 14 · 본문 15
   (페이지 CSS 가 뒤에 읽히므로 같은 칸은 html 을 앞에 붙여 이김) */
@media (max-width: 640px) {
  :root { --fs-hud-title: 38px; --fs-hero: 30px; --fs-page-title: 24px; --fs-post-title: 21px; --fs-arcade-name: 24px; }
  .page-head--hud .page-desc { font-size: var(--fs-md); }
  html .cx-name { font-size: 40px; }
  html .bxt-h h2 { font-size: 19px; }
  html .vd-band__title { font-size: 21px; }
  html .media-detail__title, html .media-detail__title--lg { font-size: 20px; }
  html .gj .gj-cover .gi-title, html .gj[data-skin="6"] .gj-cover .gi-title { font-size: 26px; }
}

/* ---------- 폰 화면 머리말 높이 맞추기 (640 이하) ----------
   화면마다 빵조각 줄 유무 · 설명 줄 수(1~5줄)가 달라 제목 영역 높이가 112~253px 로 제각각이었음
   → 빵조각은 숨기고(제목 띠가 이미 어디인지 알려 줌), 설명은 2줄까지, 머리말 위 여백은 하나로 */
@media (max-width: 640px) {
  html .breadcrumb { display: none; }
  html .page-head.page-head--hud { margin-top: 0; }
  html .cm, html .container.gi { padding-top: 0; } /* 게시판 목록 · 게임 소개는 머리말 위에 따로 여백이 있었음 */
  html .page-head .page-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}

/* 글의 관련 캐릭터 (PostForm.chars, fragments/mainchar postPick · postChars).
   글쓰기 고르기는 주 캐릭터 고르기(.mc-pick)를 작게, 글 보기는 누르면 직업 화면으로 가는 알약, 목록 · 카드는 작은 얼굴(.mc-faces) */
.wr-chars { margin-top: var(--sp-4); }
.mc-pick--post .mc-opt { padding: var(--sp-2) var(--sp-1); gap: 4px; }
.mc-pick--post .mc-opt img { width: 40px; height: 40px; }
/* 폰: 6칸이면 '매직유저'가 두 줄로 꺾여서 3칸 × 2줄 가로 알약 (얼굴 왼쪽 · 이름 오른쪽) */
@media (max-width: 640px) {
  .mc-pick--post { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mc-pick--post .mc-opt { flex-direction: row; justify-content: flex-start; gap: 6px; padding: 5px 8px 5px 5px; border-radius: 999px; white-space: nowrap; }
  .mc-pick--post .mc-opt img { width: 30px; height: 30px; flex-shrink: 0; }
}
.mc-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.mc-tags .mc-chip { padding: 2px var(--sp-3) 2px 2px; font-size: var(--fs-xs); text-decoration: none; border: 1px solid var(--line-strong); }
.mc-tags .mc-chip img { width: 22px; height: 22px; }
.mc-tags .mc-chip:hover { border-color: var(--accent-line); color: var(--text-strong); }
.cm-title .mc-faces, .bl-line1 .mc-faces, .post-row__title .mc-faces, .bl-cat .mc-faces, .gallery-card__meta .mc-faces, .vl-card__meta .mc-faces, .media-card__meta .mc-faces { margin-left: 6px; vertical-align: middle; }
.cm-title .mc-faces img, .bl-line1 .mc-faces img, .post-row__title .mc-faces img, .bl-cat .mc-faces img, .gallery-card__meta .mc-faces img, .vl-card__meta .mc-faces img, .media-card__meta .mc-faces img { width: 18px; height: 18px; border-width: 1.5px; }
.cm-title .mc-faces img + img, .bl-line1 .mc-faces img + img, .post-row__title .mc-faces img + img, .bl-cat .mc-faces img + img, .gallery-card__meta .mc-faces img + img, .vl-card__meta .mc-faces img + img, .media-card__meta .mc-faces img + img { margin-left: -5px; }
.vl-card__meta .mc-faces, .media-card__meta .mc-faces { margin: 0 6px 0 0; }

/* 공략 준비중인 보스와 연결된 글 · 영상의 게임 데이터 카드 (board/detail · videos/detail, 링크 없음): 누르는 모양 · 화살표 없이 */
.linked-data.is-soon, .video-link.is-soon { cursor:default; }
.video-link.is-soon .video-link__arrow { display:none; }

/* 공략 화면 [편집] 버튼 (관리자만, fragments/guide-edit.html). 왼쪽 아래 — 오른쪽 아래는 채팅 버튼 */
.ge-open { position: fixed; left: 20px; bottom: 20px; z-index: var(--z-float); display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #fff; background: var(--primary); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.ge-open:hover { background: var(--primary-hover); color: #fff; }
.dc-open .ge-open { display: none; }   /* 채팅 창이 열려 있으면(chat.js 가 html 에 dc-open) 입력칸 · 목록을 가리지 않게 숨김 */
/* 폰: 자판이 올라와 있는 동안(html.kb-open, dnd2.js 가 화면 높이로 판단)에는 떠 있는 채팅 · [편집] 단추를 숨김.
   자판 위로 단추가 떠올라 쓰는 글을 가렸음. 자판을 내리면(뒤로 단추 포함) 바로 다시 나옴 */
@media (max-width: 768px) {
  html.kb-open :is(.dc-fab, .ge-open) { display: none; }
  html.fab-avoid .dc-fab { display: none; }   /* 게임 키패드처럼 화면 아래까지 단추가 있는 칸이 아래 띠에 걸려 있는 동안 (dnd2.js [data-fab-avoid]) */
}
/* 폰 · 태블릿: 글자를 빼고 44px 동그라미로 줄여 채팅 버튼(오른쪽 아래)과 같은 아래쪽 높이에 두고, 아래로 읽어 내려가는 동안은 숨김(.is-tucked, dnd2.js)
   본문 끝에도 버튼 자리만큼 여백을 둬서 마지막 글 · 바닥글을 가리지 않게.
   겹치는 순서는 --z-float (채팅 버튼보다 아래): 도감에서 아래로 올라오는 칸(--z-sheet)이 열리면 그 칸이 버튼을 덮음 */
@media (max-width: 768px) {
  .ge-open { left: var(--sp-3); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); justify-content: center; width: 44px; height: 44px; min-height: 0; padding: 0; transition: transform .2s ease, opacity .2s ease; }
  .ge-open svg { width: 20px; height: 20px; }
  .ge-open__t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }   /* 글자는 화면 읽기에만 */
  .ge-open.is-tucked { transform: translateY(calc(100% + var(--sp-6))); opacity: 0; pointer-events: none; }
  body:has(.ge-open) { padding-bottom: var(--sp-16); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) { .ge-open { transition: none; } }

/* ===== 누끼 그림 칸 (검은 바탕 하이라이트): 배경을 뺀 도트 그림을 올리는 칸은 모두 같은 검정 + 같은 빛 =====
   캐릭터 기술 · 보스 특성 · 스테이지 스프라이트 · 마법 원문 그림 · 아이템 · 몬스터 칸 공용. 칸 크기 · 모서리 · 테두리 위치는 페이지 css 그대로,
   바탕만 여기서 정함 (페이지 css 에는 background 를 쓰지 않음). 빛 색은 칸이나 그 위에서 --art-glow-c 로 (없으면 보라).
   몬스터 칸처럼 무늬를 더 깔려면 --art-cut-tex 에 그라데이션을 넣음 (빛 아래 · 검정 위) */
.art-cut,
.cx-dex__media:not(.is-video),
.bxt-mini__img, .bxt-item__img, .bxt-detail__stage, .bx-doc .gcard .gm,
.sw-shot--sprite img,
.sp-fig img,
.mk-art, .mk-row__spr, .mk-slot__spr, .mk-srow__spr, .mx-order__pic, .mx-card__pic,
.mj-art, .mj-pat::before, .mj-lore figure, .st-art, .mi-art, .mi-tart {
  background-color: var(--art-bg-deep);
  background-image: radial-gradient(var(--art-glow-at), color-mix(in srgb, var(--art-glow-c, var(--primary)) var(--art-glow-mix), transparent), transparent 72%), var(--art-cut-tex, none);
}

/* 재생기(js/dock.js)가 영상을 겹쳐 띄운 큰 자리: 자리 안 원래 내용(썸네일 · ▶)은 숨김. 재생기 틀 안 화면은 dock.css 를 안 받으므로 여기에 */
[data-slot].is-live > *:not(.dk-keep) { visibility: hidden; }

/* 마법 시전 장면 TV(.sp-tv · .sp-crt …)는 css/spell-tv.css, 공략 영상 재생기(Plyr)는 css/dnd2-video.css 로 옮김 (쓰는 화면에서만 받게) */

/* 공략 편집에서 정한 영역 크기 (GuideStruct: style 의 --ge-w 폭 · --ge-h 높이 · --ge-cols 한 줄 칸 수 · --ge-mt 위 간격)
   폭 · 높이 · 칸 수는 넓은 화면(1025 이상)에서만 (태블릿 · 폰은 공략 css 가 접는 대로), 위 간격은 어디서나. 보스 · 스테이지 등 공략 공통이라 여기 둠 */
[style][style*="--ge-mt"] { margin-top: var(--ge-mt); }
@media (min-width: 1025px) {
  [style][style*="--ge-w"] { max-width: var(--ge-w); }
  [style][style*="--ge-h"] { min-height: var(--ge-h); }
  [style][style*="--ge-cols"] { grid-template-columns: repeat(var(--ge-cols), minmax(0, 1fr)); }
}

/* 직업별 안쪽 톤(공략 화면 · 캐릭터 목록 '공략 보기'): 직업색(--cls-*)을 흙빛 쪽으로 톤다운한 색. 파이터는 공략실 금빛 그대로.
   .char-* = 캐릭터 상세 body, [data-cls] = 캐릭터 목록 쇼케이스(showcase.js 가 고른 직업으로 바꿈). 이 칸에서는 --hof-gold 계열 · 메달 금색을 이 색으로 */
.char-cleric, [data-cls="cleric"] { --t: #d8cdb0; --t-rgb: 216,205,176; --t-l: #f3eddc; --t-d: #a89a78; }
.char-elf,    [data-cls="elf"]    { --t: #a7c493; --t-rgb: 167,196,147; --t-l: #e6efdc; --t-d: #7f9c6b; }
.char-dwarf,  [data-cls="dwarf"]  { --t: #d9a478; --t-rgb: 217,164,120; --t-l: #f4e0cf; --t-d: #a87650; }
.char-muser,  [data-cls="muser"]  { --t: #b0a6c9; --t-rgb: 176,166,201; --t-l: #e7e2f1; --t-d: #857ba0; }
.char-thief,  [data-cls="thief"]  { --t: #cf9a96; --t-rgb: 207,154,150; --t-l: #f3dfdc; --t-d: #a0706c; }
:is(.char-cleric, .char-elf, .char-dwarf, .char-muser, .char-thief, [data-cls="cleric"], [data-cls="elf"], [data-cls="dwarf"], [data-cls="muser"], [data-cls="thief"]) {
  --hof-gold: var(--t); --hof-gold-rgb: var(--t-rgb); --hof-gold-light: var(--t-l); --hof-gold-deep: var(--t-d); --hof-gold-dark: var(--t-d); --hof-gold-darker: var(--t-d);
  --medal-gold: linear-gradient(135deg, var(--t-l), var(--t-d));
}