/* =========================================================
   별의 종말 - 새 화면 스타일 (css/features.css)
   메뉴 개편 · 설정 창 · 가입 · 프로필 · 커뮤니티 · 상점 · 칭호
   색은 모두 style.css 의 테마 변수만 씁니다 → 다섯 가지 테마에 자동으로 맞음
   크기는 rem → 글자 크기(소 · 중 · 대)에 함께 맞음
   ========================================================= */

/* ----- 메뉴: 메인 6개 + 하위 탭 ----- */
.subnav { display: flex; gap: 0.25rem; overflow-x: auto; padding: 0.375rem 0 0.125rem; scrollbar-width: thin; }
.subtab { flex: none; font: inherit; font-size: 0.875rem; color: var(--text-2); background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: 0.3125rem 0.875rem; cursor: pointer; white-space: nowrap; }
.subtab:hover { color: var(--text); background: var(--panel-sunk); }
.subtab[aria-selected="true"] { color: var(--text); background: var(--raised); border-color: var(--line); font-weight: 600; }
.icon-btn { font: inherit; font-size: 1.25rem; line-height: 1; width: 2.375rem; height: 2.375rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-sunk); color: var(--text); cursor: pointer; display: inline-grid; place-items: center; flex: none; }
.icon-btn:hover { background: var(--raised); }
.topbar { position: relative; }

/* ----- 설정 창 ----- */
.modal-wide .modal { width: min(46rem, 100%); }
.settings { display: grid; gap: 0.75rem; }
.settings-body { display: grid; gap: 0.75rem; min-height: 10rem; }
.setting-row { padding: 0.5rem 0; border-top: 1px solid var(--line-soft); gap: 0.75rem; }
.theme-grid { display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.theme-card { display: grid; gap: 0.25rem; justify-items: start; font: inherit; color: var(--text); text-align: left; cursor: pointer;
  background: var(--panel-sunk); border: 2px solid var(--line); border-radius: var(--r); padding: 0.625rem; }
.theme-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.swatches { display: flex; gap: 0.25rem; }
.swatches i { width: 1.375rem; height: 1.375rem; border-radius: 0.375rem; border: 1px solid var(--line); display: block; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation: none !important; transition: none !important; }
html.compact { --gap: 0.625rem; --pad: 0.75rem; }

/* ----- 가입 · 로그인 ----- */
.signup-grid { grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); }
.terms-box { display: grid; gap: 0.375rem; padding: 0.75rem; background: var(--panel-sunk); border-radius: var(--r); border: 1px solid var(--line); }
.term { display: grid; gap: 0.125rem; }
.term-body { max-height: 12rem; overflow-y: auto; font-size: 0.8125rem; color: var(--text-2); line-height: 1.6; padding: 0.5rem; background: var(--panel); border-radius: 0.375rem; overflow-wrap: anywhere; }
.bad-text { color: var(--bad); }

/* ----- 프로필 · 사진 ----- */
.avatar { border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center; vertical-align: middle; background: var(--panel-sunk); border: 1px solid var(--line); }
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: 0.8125rem; }
.avatar-md { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; }
.avatar-lg { width: 6rem; height: 6rem; font-size: 2.25rem; }
.avatar-default { color: var(--accent-ink); background: var(--accent); font-weight: 700; }
.profile-head { display: flex; gap: 0.875rem; align-items: center; flex-wrap: wrap; }
.bio { white-space: normal; line-height: 1.7; padding: 0.75rem; background: var(--panel-sunk); border-radius: 0.5rem; overflow-wrap: anywhere; }
.title-tag { display: inline-block; font-size: 0.75rem; padding: 0.0625rem 0.5rem; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft); white-space: nowrap; }
.author { display: inline-flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; min-width: 0; }
.name-link { font-weight: 600; text-decoration: none; color: var(--text); }
.name-link:hover { text-decoration: underline; }
.crop-box { display: grid; gap: 0.625rem; justify-items: start; }
#crop-canvas { width: min(300px, 100%); height: auto; aspect-ratio: 1; border-radius: 0.5rem; border: 1px solid var(--line); background: var(--panel-sunk); }

/* ----- 상점 · 제작 · 칭호 카드 ----- */
.shop-grid { display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin-top: 0.25rem; }
.shop-card { display: grid; gap: 0.375rem; align-content: start; padding: 0.75rem; background: var(--panel-sunk); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 0.5rem; min-width: 0; overflow-wrap: anywhere; }
.g0-edge { border-left-color: var(--g0); }
.g1-edge { border-left-color: var(--g1); }
.g2-edge { border-left-color: var(--g2); }
.g3-edge { border-left-color: var(--g3); }
.g4-edge { border-left-color: var(--g4); }
.unknown-card { opacity: 0.72; }
.chip-elem { border: 1px solid var(--line); }
.item-current { background: var(--accent-soft); border-radius: 0.375rem; padding-left: 0.5rem; }
.wallet-inline { margin: 0.5rem 0; }

/* ----- 게시판 · 댓글 ----- */
.post-row.pinned { border-color: var(--accent); }
.post-row.selected { border-color: var(--accent); background: var(--accent-soft); }
.post-row .avatar { margin-top: 0.125rem; }
.comment { padding: 0.5rem 0; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.comment p { margin: 0.25rem 0; }
#tab-board textarea, #tab-board input.input { width: 100%; }

/* ----- 대화 · 채팅 · 거래 ----- */
.chat-layout { display: grid; gap: var(--gap); grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); }
.chat-list { display: grid; gap: 0.375rem; align-content: start; max-height: 70vh; overflow-y: auto; }
.chat-list .post-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.chat-main { display: grid; gap: 0.625rem; align-content: start; min-width: 0; }
.chat-thread { display: grid; gap: 0.5rem; align-content: start; max-height: 55vh; min-height: 12rem; overflow-y: auto; padding: 0.5rem; background: var(--panel-sunk); border-radius: 0.5rem; }
.msg { display: grid; gap: 0.125rem; justify-items: start; max-width: 85%; }
.msg-me { justify-self: end; justify-items: end; }
.msg-bubble { padding: 0.5rem 0.75rem; border-radius: 0.75rem; background: var(--raised); color: var(--text); line-height: 1.55; overflow-wrap: anywhere; }
.msg-me .msg-bubble { background: var(--accent); color: var(--accent-ink); }
.chat-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: end; }
.chat-input textarea { width: 100%; resize: vertical; }
#tab-trade input[type=number] { max-width: 8rem; }

@media (max-width: 720px) {
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-list { max-height: 14rem; }
  .signup-grid { grid-template-columns: minmax(0, 1fr); }
  .msg { max-width: 95%; }
}
@media (max-width: 560px) {
  .topbar .wallet { width: 100%; justify-content: space-between; }
  .avatar-lg { width: 4.5rem; height: 4.5rem; }
  #main-nav { flex-wrap: wrap; overflow-x: visible; }
  #main-nav .tab { padding: 0.5rem 0.625rem; }
}

/* ----- 7차: 상단 아이콘 (메시지함 · 설정) ----- */
.head-icons { display: flex; gap: 0.375rem; align-items: center; }
.inbox-btn { position: relative; }
.badge-float { position: absolute; top: -0.375rem; right: -0.5rem; margin: 0; background: var(--bad); color: var(--on-bad); }
.alert-info { border-left-color: var(--accent); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ----- 홈: 위 (진행 중 던전 · 내 캐릭터) / 아래 (의뢰 · 레이드) / 그 밖 ----- */
.home-top { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.home-bottom, .home-more { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-top: var(--gap); }
.home-run.is-live { border-left: 4px solid var(--accent); }
.home-run .facts .fact b { font-size: 1.25rem; }
.home-profile .profile-head { flex-wrap: nowrap; }
.reward-line { font-size: 1.0625rem; }
.item-chip { display: inline-flex; gap: 0.25rem; align-items: center; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--panel-sunk); border: 1px solid var(--line); font-size: 0.8125rem; }
.quest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.quest { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: 0.5rem 0.625rem; border-radius: 0.5rem; background: var(--panel-sunk); border-left: 3px solid var(--line); }
.quest-ready { border-left-color: var(--warn); }
.quest-done { border-left-color: var(--ok); opacity: 0.72; }
.quest-done b { text-decoration: line-through; text-decoration-color: var(--text-3); }
.bar-thin { height: 0.3125rem; margin-top: 0.25rem; }
.raid-card { display: grid; gap: 0.25rem; padding: 0.625rem; border-radius: 0.5rem; background: var(--panel-sunk); }

/* ----- 펼침 영역 (상세 정보) ----- */
details.more { border-top: 1px solid var(--line-soft); padding-top: 0.5rem; }
details.more > summary { cursor: pointer; color: var(--text-2); font-size: 0.875rem; padding: 0.25rem 0; list-style-position: inside; }
details.more > summary:hover { color: var(--text); }
details.more[open] > summary { margin-bottom: 0.5rem; }
details.more.panel-box { padding: var(--pad); }
.plain-list { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.25rem; }
.mon-list { list-style: none; padding-left: 0; }
.mon-list li { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.compact-grid { gap: 0.75rem; }
.result-compact { padding: 0.75rem 1rem; gap: 0.5rem; margin-bottom: var(--gap); }
.result-compact .result-title { font-size: 1.125rem; }
.pre { white-space: pre-line; overflow-wrap: anywhere; }

/* ----- 메시지함: 화면 왼쪽 위 세로 패널 (전투 화면은 그대로 보임) ----- */
.inbox { position: fixed; z-index: 40; top: 0.75rem; left: 0.75rem; bottom: 0.75rem; width: min(25rem, calc(100vw - 1.5rem));
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 0.5rem; padding: 0.75rem; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden; }
.inbox[hidden] { display: none; }
.inbox-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.inbox-tabs .seg-btn { padding-inline: 0.5rem; }
.inbox-body { overflow-y: auto; min-height: 0; display: grid; gap: 0.5rem; align-content: start; padding-right: 0.125rem; }
.ib-split { display: grid; gap: 0.5rem; min-height: 0; }
.ib-list { display: grid; gap: 0.375rem; align-content: start; }
.ib-list .post-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.ib-thread { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.ib-thread-box { max-height: none; height: clamp(10rem, 45vh, 30rem); }
.inbox[data-pane="thread"] .ib-list { display: none; }
.inbox[data-pane="list"] .ib-thread { display: none; }
.ib-thread-head .author b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-list { display: grid; gap: 0.375rem; }
.mail { border-radius: 0.5rem; background: var(--panel-sunk); border: 1px solid transparent; }
.mail-unread { border-color: var(--accent); }
.mail-head { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 0.75rem minmax(0, 1fr) auto; gap: 0.375rem; align-items: center; padding: 0.5rem 0.625rem; }
.mail-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0.5rem; }
.mail-dot { color: var(--accent); font-size: 0.625rem; }
.mail-body { padding: 0 0.625rem 0.625rem 1.75rem; display: grid; gap: 0.25rem; }
.friend-list { display: grid; gap: 0.375rem; }
.friend-row { grid-template-columns: minmax(0, 1fr) auto; }
/* 넓은 화면: 대화 목록과 내용을 나란히 (패널을 조금 넓힘) */
@media (min-width: 1100px) {
  .inbox.inbox-dm-wide { width: 40rem; }
  .inbox.inbox-dm-wide .ib-split { grid-template-columns: 13rem minmax(0, 1fr); }
  .inbox.inbox-dm-wide[data-pane] .ib-list, .inbox.inbox-dm-wide[data-pane] .ib-thread { display: grid; }
  .inbox.inbox-dm-wide .ib-back { display: none; }
}
@media (max-width: 900px) {
  .home-top, .home-bottom, .home-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .inbox { top: 0; left: 0; bottom: 0; width: 100vw; border-radius: 0; }
  .home-profile .profile-head { flex-wrap: wrap; }
}

/* ----- 8차: 홈 그리드 (PC 12칸 · 태블릿 2단 · 모바일 1단) ----- */
.home-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; grid-auto-flow: row dense; }
.home-grid > * { min-width: 0; }
.home-grid .home-run { grid-column: span 5; }
.home-grid .home-profile { grid-column: span 4; }
.home-grid .home-alerts { grid-column: span 3; }
.home-grid .home-quests { grid-column: span 5; grid-row: span 2; }
.home-grid .home-raid { grid-column: span 4; }
.home-grid .home-rank { grid-column: span 3; }
.home-grid .home-world { grid-column: span 12; display: grid; }
.home-grid .home-world > * { margin: 0; }
.home-grid .home-board { grid-column: span 7; }
.home-grid .home-notice { grid-column: span 12; }
.home-grid .quest { padding: 0.375rem 0.5rem; }
.home-grid .quest .muted.small { font-size: 0.75rem; }
.home-grid .quest-list { gap: 0.3125rem; }
.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.alert-row { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; justify-content: space-between; gap: 0.5rem; align-items: center;
  padding: 0.5rem 0.625rem; border-radius: 0.5rem; background: var(--panel-sunk); border-left: 3px solid var(--accent); font-size: 0.875rem; }
.alert-row:hover { background: var(--raised); }
.alert-row:focus-visible { outline: 2px solid var(--accent); }
/* 16차: 홈 요약 허브 — 종말까지 남은 시간 · 별자리 · 의뢰 요약 */
.alert-row:active { background: var(--raised); transform: translateY(1px); }
.alert-row .min0 { min-width: 0; overflow-wrap: anywhere; }
.home-doom { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem;
  background: var(--panel-sunk); border: 1px solid var(--accent); text-align: left; min-width: 0; }
.home-doom:hover, .home-doom:active { background: var(--raised); }
.home-doom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.doom-label { font-size: 0.8125rem; font-weight: 600; }
.doom-num { font-size: clamp(1.375rem, 4.5vw, 1.75rem); font-weight: 700; color: var(--accent); line-height: 1.2; font-variant-numeric: tabular-nums; }
.home-stars { border-left-color: var(--g3, var(--accent)); }
.home-quests .bar-thin { margin-top: 0.375rem; }
@media (max-width: 1100px) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid > *, .home-grid .home-run, .home-grid .home-profile, .home-grid .home-alerts, .home-grid .home-quests, .home-grid .home-raid,
  .home-grid .home-rank, .home-grid .home-board { grid-column: span 1; }
  .home-grid .home-quests { grid-row: span 1; }
  .home-grid .home-world, .home-grid .home-notice { grid-column: span 2; }
}
@media (max-width: 700px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-grid > *, .home-grid .home-world, .home-grid .home-notice { grid-column: span 1 !important; }
}

/* ----- 독립 화면 (전체 게시판 · 친구 관리): 뒤로 · 홈으로 ----- */
.page-title { align-self: center; font-weight: 700; margin-left: 0.5rem; color: var(--text); }

/* ----- 캐릭터 통합 화면 ----- */
.char-page { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.1fr); align-items: start; }
.stat-big dd { font-size: 1.0625rem; }
.eq-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eq-slot { display: grid; gap: 0.25rem; align-content: start; padding: 0.625rem 0.75rem; border-radius: 0.5rem; background: var(--panel-sunk); border-left: 3px solid var(--line); min-width: 0; }
.eq-empty { border-left-style: dashed; }
.eq-slot-name { font-size: 0.8125rem; color: var(--text-2); display: flex; gap: 0.375rem; align-items: center; flex-wrap: wrap; }
.eq-name { font-size: 1rem; overflow-wrap: anywhere; }
.eq-stat { font-size: 0.875rem; color: var(--text-2); }
.eq-bag { display: grid; gap: 0.25rem; max-height: 28rem; overflow-y: auto; }
.skill-main { padding: 0.625rem 0.75rem; border-radius: 0.5rem; background: var(--accent-soft); }
.skill-main p { margin: 0.25rem 0 0; line-height: 1.6; }
.skill-list li { padding: 0.25rem 0; line-height: 1.5; }
@media (max-width: 1100px) { .char-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .char-skill { grid-column: span 2; } }
@media (max-width: 760px) { .char-page { grid-template-columns: minmax(0, 1fr); } .char-skill { grid-column: auto; } .eq-grid { grid-template-columns: minmax(0, 1fr); } }

/* ----- 플레이어 거래소 ----- */
.mk-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: end; }
.mk-filters label { display: grid; gap: 0.125rem; color: var(--text-2); }
.mk-list { display: grid; gap: 0.375rem; margin-top: 0.5rem; }
.mk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--panel-sunk); border-left: 3px solid var(--line); }
.mk-main { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; min-width: 0; }
.mk-main:focus-visible { outline: 2px solid var(--accent); border-radius: 0.375rem; }
.mk-price { text-align: right; }
.mk-detail { grid-column: 1 / -1; padding-top: 0.25rem; border-top: 1px solid var(--line-soft); }
.mk-act { grid-row: 1; grid-column: 2; }
.mk-sell .form-grid { grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); }
@media (max-width: 560px) { .mk-row { grid-template-columns: minmax(0, 1fr); } .mk-act { grid-row: auto; grid-column: auto; justify-self: end; } .mk-sell .form-grid { grid-template-columns: minmax(0, 1fr); } }
.skill-list { list-style: none; padding-left: 0; }
.skill-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.125rem 0.5rem; align-items: center; }
.skill-list li > :only-child { grid-column: 1 / -1; }
@media (max-width: 560px) {
  #tab-market .item, .char-equip .item { grid-template-columns: minmax(0, 1fr); }
  #tab-market .item-actions, .char-equip .item-actions { justify-content: flex-start; }
}

/* ===== 9차: 인벤토리 필터 · 상세 · 일괄 판매 / 첫 안내 / 바쁨 표시 ===== */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip-row .seg-btn { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.filter-bar .spacer, .spacer { flex: 1 1 auto; }
.notice-warn { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: 8px 10px; }
.bag-row .item-actions { flex-wrap: wrap; }
.recent-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.guide-steps { display: flex; gap: 6px; margin: 6px 0 12px; }
.guide-steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.guide-steps span.on { background: var(--accent); }
button[aria-busy="true"] { cursor: progress; opacity: 0.7; }
fieldset.row { border: 0; padding: 0; margin: 0 0 8px; gap: 12px; display: flex; }
.post-item { border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; }
.post-item .post-row { border-bottom: 0; }
.post-meta { display: block; padding: 0 0 4px 28px; }

/* ===== 10차: 직업 · 스킬 ===== */
.skill-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.skill-slot { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; }
.skill-slot.empty { border-style: dashed; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.skill-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.skill-card.learned { border-color: var(--accent); }
.skill-card.dim { opacity: 0.85; }
.skill-card .skill-desc { margin: 2px 0; overflow-wrap: anywhere; }
.skill-card .lore { font-style: italic; }
@media (max-width: 760px) { .skill-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skill-grid { grid-template-columns: 1fr; } }
.seg-dot { background: var(--burn); opacity: 0.6; }
.seg-pet { background: var(--ok); }
.seg-proc { background: var(--accent); opacity: 0.6; }
.seg-shock { background: #e0b030; opacity: 0.8; }
.seg-elem { background: var(--accent); opacity: 0.85; }
.seg-reflect { background: var(--line); }
.seg-curse { background: #7a4fb0; opacity: 0.75; }

/* ===== 11차: 성장 · 별자리 · 숙련도 ===== */
.mastery-head { display: flex; gap: 0.875rem; align-items: center; margin-bottom: 0.5rem; }
.mastery-grade { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: 0.75rem; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; border: 2px solid currentColor; }
.mastery-D { color: var(--muted); } .mastery-C { color: var(--ok); } .mastery-B { color: #5b8def; } .mastery-A { color: var(--accent); } .mastery-S { color: var(--bad); }
.chip.mastery-D, .chip.mastery-C, .chip.mastery-B, .chip.mastery-A, .chip.mastery-S { font-weight: 700; border: 1px solid currentColor; }
tr.is-current td { background: var(--raised-hover); }
.star-map-wrap { width: 100%; overflow: hidden; border-radius: var(--r); background: radial-gradient(ellipse at 50% 40%, rgba(80, 100, 180, 0.25), transparent 70%), var(--panel-2, rgba(0, 0, 0, 0.25)); }
.star-map { display: block; width: 100%; height: auto; max-height: 26rem; }
.star-link { stroke: var(--line); stroke-width: 0.35; stroke-dasharray: 1 1; }
.star-link.lit { stroke: var(--accent); stroke-dasharray: none; stroke-width: 0.5; }
.star-node { cursor: pointer; outline: none; }
.star-node circle { fill: var(--raised, #333); stroke: var(--line); stroke-width: 0.4; opacity: 1; }
.star-node text { fill: var(--muted); font-size: 2.6px; opacity: 0.7; }
.star-node.star-ready circle { fill: var(--raised, #333); stroke: var(--accent); stroke-width: 0.7; opacity: 1; }
.star-node.star-ready text { fill: var(--text); opacity: 1; }
.star-node.star-unlocked circle { fill: var(--accent); opacity: 1; filter: drop-shadow(0 0 1.2px var(--accent)); }
.star-node.star-unlocked text { fill: var(--text); opacity: 1; }
.star-node.is-sel circle { stroke: var(--text); stroke-width: 0.6; }
.star-node:focus-visible circle { stroke: var(--text); stroke-width: 0.9; }
.star-detail { margin-top: 0.5rem; }
.secret-card { border-style: dashed; }
.offline-now .bar { margin: 0.375rem 0; }
.craft-req { margin-top: 0.25rem; }
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0.625rem; margin-top: 0.5rem; }
.job-change { margin-top: 0.75rem; }
/* 접속 상태 색 (오프라인 > 자리 비움 > 파티 중 > 온라인) */
.status-dot.st-online { background: #3fb950; }
.status-dot.st-away { background: #f0883e; }
.status-dot.st-party { background: #4c8dff; }
.status-dot.st-offline { background: #8b8f96; }

/* ===== 11차: 채팅 독 (화면 아래 왼쪽에 항상 붙어 있음) · 우편함 팝업 ===== */
.inbox.chat-dock { top: auto; bottom: 0.75rem; left: 0.75rem; width: min(24rem, calc(100vw - 1.5rem)); max-height: min(34rem, 70vh);
  grid-template-rows: auto minmax(0, 1fr); padding: 0.5rem 0.625rem; z-index: 35; }
.inbox.chat-dock:not(.dock-open) { grid-template-rows: auto; }
.chat-dock .inbox-head { flex-wrap: nowrap; }
.chat-dock .inbox-head .section-title { margin: 0; font-size: 1rem; white-space: nowrap; }
.chat-dock .inbox-tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; flex-wrap: nowrap; }
.chat-dock .inbox-tabs .seg-btn { padding: 0.25rem 0.5rem; white-space: nowrap; }
.chat-dock .ib-thread-box { height: clamp(8rem, 32vh, 20rem); }
.chat-dock .chat-input textarea { min-height: 2.25rem; }
.dock-toggle { flex: 0 0 auto; }
#game-screen { padding-bottom: 4.5rem; }   /* 접힌 채팅 독이 화면 끝 내용을 가리지 않게 */
.mailpop { position: fixed; z-index: 45; top: 4.25rem; right: 0.75rem; width: min(26rem, calc(100vw - 1.5rem)); max-height: min(36rem, calc(100vh - 5rem));
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.5rem; padding: 0.75rem; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden; }
.mailpop[hidden] { display: none; }
@media (min-width: 1100px) { .inbox.chat-dock.inbox-dm-wide { width: 40rem; } }
@media (max-width: 560px) {
  .inbox.chat-dock { top: auto; left: 0; right: 0; bottom: 0; width: 100vw; border-radius: var(--r) var(--r) 0 0; max-height: 75vh; }
  .mailpop { top: 3.5rem; left: 0.5rem; right: 0.5rem; width: auto; }
}

/* ===== 12차: 로그인 · 회원가입 — 화면 가로 · 세로 가운데 (창 크기 · 비율이 바뀌어도) ===== */
/* 바깥은 화면 높이만큼의 flex 상자, 카드는 margin:auto 로 가운데. 카드가 화면보다 크면 위에서부터 보이고 세로로 스크롤 (잘려서 못 누르는 칸 없음) */
.auth-screen { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-y: auto;
  padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); }
.auth-screen[hidden] { display: none; }
.auth-card { box-sizing: border-box; width: min(100%, 45rem); margin: auto; display: grid; gap: 1.5rem; }
.auth-card.create { margin: auto; max-width: none; }
.auth-card .form-grid { align-items: start; }
.pw-wrap { display: flex; gap: 0.375rem; align-items: center; min-width: 0; }
.pw-wrap .input { flex: 1 1 auto; min-width: 0; }
.pw-wrap + .field-err, .form-grid .field-err { grid-column: 2; }
.field-err { color: var(--bad); font-size: 0.8125rem; margin: 0.125rem 0 0; min-height: 0; }
.field-err:empty { display: none; }
.input[aria-invalid="true"] { border-color: var(--bad); }
.auth-switch { text-align: center; }
@media (max-width: 560px) {
  .auth-card .form-grid { grid-template-columns: minmax(0, 1fr); }
  .pw-wrap + .field-err, .form-grid .field-err { grid-column: 1; }
}
body.auth-mode { padding: 0; }   /* 로그인 · 가입 화면에서는 본문 여백을 없애 정확히 가운데 (여백은 .auth-screen 이 가짐) */

/* ===== 12차 뽑기 · 희귀 재료 · 레전더리 특성 ===== */
.rate-row { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.5rem 0; }
.rate-chip { display: inline-flex; gap: 0.375rem; align-items: baseline; padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--raised); border-left: 3px solid var(--g); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.chip-rare { color: var(--g4); background: color-mix(in srgb, var(--g4) 14%, transparent); font-weight: 600; }
.gacha-card .table tr.is-rare td { background: color-mix(in srgb, var(--g4) 7%, transparent); }
.gacha-card .rate-box summary { cursor: pointer; padding: 0.375rem 0; }
.gacha-card .actions .btn { min-width: 0; white-space: normal; }
.gacha-result { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.gacha-result .chip { white-space: normal; }
.legend-trait { color: var(--g4); margin-top: 0.125rem; }
.rare-fx { color: var(--g4); }
.sum-bad { color: var(--bad); font-weight: 600; }
.sum-ok { color: var(--ok); font-weight: 600; }

/* ===== 13차 튜토리얼 ===== */
.modal-guide #modal-buttons { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
.modal-guide .guide-nav { display: inline-flex; gap: 0.5rem; margin-left: auto; }
.guide-body { line-height: 1.75; }
@media (max-width: 560px) { .modal-guide #modal-buttons .btn { flex: 1 1 auto; } .modal-guide .guide-nav { width: 100%; } .modal-guide .guide-nav .btn { flex: 1; } }

/* ===== 13차 엔딩 (검은 화면 · 크레딧 · 최종 안내) — 테마와 상관없이 항상 어두움 ===== */
body.ending-open { overflow: hidden; }
.ending { position: fixed; inset: 0; z-index: 1000; background: #000; color: #e9e6df; display: grid; grid-template-rows: minmax(0, 1fr) auto; font-size: 1rem; }
.ending[hidden] { display: none; }
.ending-stage { min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 0 max(1rem, env(safe-area-inset-left, 0px)); }
.ending-title, .ending-thanks { font-family: 'Gowun Batang', serif; font-size: clamp(1.5rem, 4.5vw, 2.5rem); letter-spacing: 0.04em; margin: 0; text-align: center; animation: ending-fade 2.2s ease-out both; }
.ending-final { display: grid; gap: 1rem; justify-items: center; text-align: center; animation: ending-fade 1.8s ease-out both; }
.ending-delete { font-size: clamp(1rem, 2.6vw, 1.25rem); margin: 0; animation: ending-fade 1.8s 0.9s ease-out both; }
.ending-when { color: #9a968e; font-size: 0.875rem; margin: 0; animation: ending-fade 1.8s 1.4s ease-out both; }
.ending-actions { animation: ending-fade 1.2s 1.8s ease-out both; justify-content: center; }
.ending .btn { background: #1c1c1c; color: #e9e6df; border-color: #3a3a3a; }
.ending .btn-primary { background: #e9e6df; color: #000; }
@keyframes ending-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ending-roll { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ending-credits { position: absolute; left: 0; right: 0; margin: 0 auto; width: min(100%, 34rem); text-align: center; transform: translateY(var(--roll-from, 100vh)); }
.ending-credits.rolling { animation-name: ending-roll; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes ending-roll { from { transform: translateY(var(--roll-from)); } to { transform: translateY(var(--roll-to)); } }
.ending-bar { display: flex; justify-content: center; padding: 0.875rem 1rem max(0.875rem, env(safe-area-inset-bottom, 0px)); background: #000; border-top: 1px solid #1d1d1d; }
.phase-final .ending-bar { display: none; }
.ending-skip { min-width: 8rem; }
.cr-head { padding: 2rem 0 4rem; } .cr-head h2 { font-family: 'Gowun Batang', serif; font-size: 1.75rem; margin: 0.25rem 0; }
.cr-eyebrow { color: #9a968e; letter-spacing: 0.3em; font-size: 0.8125rem; margin: 0; }
.cr-sec { padding: 2.5rem 0; } .cr-sec > h3 { font-size: 1.25rem; margin: 0 0 1.25rem; color: #f0d9a8; }
.cr-row, .cr-rank { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 0.3rem 0.5rem; text-align: left; line-height: 1.5; }
.cr-rank { grid-template-columns: 3.25rem minmax(0, 1fr) auto; }
.cr-rank b, .cr-row b { font-variant-numeric: tabular-nums; }
.cr-name { overflow-wrap: anywhere; } .cr-no { color: #9a968e; }
.cr-block { padding: 1.25rem 0; } .cr-block h4 { margin: 0 0 0.5rem; font-size: 1rem; color: #cfcac0; }
.cr-week { margin: 2.5rem 0; padding-top: 1.5rem; border-top: 1px solid #262626; } .cr-week > h3 { font-size: 1.125rem; margin: 0; color: #f0d9a8; }
.cr-note { color: #8f8b83; font-size: 0.8125rem; margin: 0.25rem 0 0.75rem; line-height: 1.6; }
.cr-empty { color: #6f6b64; padding: 0.3rem 0; }
.cr-names { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: center; }
.cr-end { padding: 4rem 0 6rem; font-family: 'Gowun Batang', serif; }
.ending-banner { border-left: 3px solid var(--g4); }

/* ===== 전체 게시판: 카드 격자 + 옆 글쓰기 (레이아웃만) ===== */
.bd-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: var(--gap); align-items: start; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 0.625rem; }
.bd-empty { grid-column: 1 / -1; padding: 1.5rem 0; text-align: center; }
.bd-card { display: grid; grid-template-rows: 1fr auto; min-width: 0; background: var(--panel-sunk); border-radius: 0.625rem; border: 1px solid transparent; transition: border-color 0.15s, transform 0.15s; }
.bd-card:hover { border-color: var(--line); transform: translateY(-1px); }
.bd-card.is-open { border-color: var(--accent); }
.bd-card.is-pinned { box-shadow: inset 3px 0 0 var(--accent); }
.bd-card-main { display: grid; align-content: start; gap: 0.375rem; min-height: 6.25rem; padding: 0.75rem 0.875rem 0.5rem; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 0.625rem 0.625rem 0 0; }
.bd-card-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bd-pin { justify-self: start; }
.bd-card-title { font-size: 0.9375rem; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-card-snip { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem 0.625rem; border-top: 1px solid var(--line-soft); font-size: 0.75rem; }
.bd-card-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-card-stats { display: inline-flex; gap: 0.5rem; flex: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bd-card-stats .is-liked { color: var(--bad); }
.bd-compose { position: sticky; top: 1rem; gap: 0.75rem; }
.bd-field { display: grid; gap: 0.25rem; }
.bd-field .input { max-width: none; }
.bd-compose textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.bd-compose-foot { align-items: center; }
@media (max-width: 62rem) { .bd-layout { grid-template-columns: minmax(0, 1fr); } .bd-compose { position: static; } }
.bd-toolbar .actions { flex-wrap: wrap; justify-content: flex-end; }
#tab-board .bd-toolbar #bd-q { width: min(100%, 15rem); }
@media (max-width: 560px) { .bd-toolbar .actions { justify-content: flex-start; } #tab-board .bd-toolbar #bd-q { width: 100%; max-width: none; } }

/* ===== 공지 · 이벤트 (관리자 작성, 게시판 · 홈 맨 위) ===== */
.nt-box { border-left: 3px solid var(--accent); }
.nt-list { display: grid; gap: 0.5rem; }
.nt-card { background: var(--panel-sunk); border-radius: 0.5rem; padding: 0.625rem 0.875rem; display: grid; gap: 0.25rem; }
.nt-card.is-event { box-shadow: inset 3px 0 0 var(--ok); }
.nt-head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; }
.nt-title { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.nt-date { flex: none; }
.nt-del { flex: none; }
.nt-body { margin: 0; color: var(--text-2); font-size: 0.875rem; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; }
.nt-form textarea { resize: vertical; }

/* ===== 게시판: 언제나 좌우 꽉 차게 (본문 보기 포함) · 관리자 공지/이벤트 표시 ===== */
#tab-board { width: 100%; }
#tab-board > .panel-box, #tab-board .bd-layout { width: 100%; }
#tab-board .reader { max-width: none; width: 100%; margin: 0; }
#tab-board .reader .reader-body { max-width: none; }
#tab-board .reader .actions { flex-wrap: wrap; }
#tab-board .reader .actions textarea { flex: 1 1 16rem; max-width: none; }
.bd-admin-actions { display: inline-flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; align-items: center; padding: 0.25rem 0.625rem; border-radius: 0.5rem; background: var(--panel-sunk); }
.bd-mark-pick { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; align-items: center; padding: 0.5rem 0.625rem; border-radius: 0.5rem; background: var(--panel-sunk); }
.bd-card.is-event.is-pinned { box-shadow: inset 3px 0 0 var(--ok); }
.bd-pin.chips { gap: 0.25rem; }
/* 중간 폭(태블릿 · 좁은 창): 글쓰기를 목록 아래로 일찍 내려 카드가 찌그러지지 않게, 카드는 2열 이상 유지 */
@media (max-width: 75rem) { .bd-layout { grid-template-columns: minmax(0, 1fr); } .bd-compose { position: static; } .bd-compose textarea { min-height: 6rem; } }
@media (max-width: 30rem) { .bd-grid { grid-template-columns: minmax(0, 1fr); } .bd-toolbar .row-between { align-items: stretch; } .bd-toolbar .actions { width: 100%; } }

/* 최종 점검: 좁은 화면에서 상단 날짜 칩 · 이름 링크도 손가락으로 누르기 쉽게 (글자 크기는 그대로, 누르는 영역만 32px 이상) */
@media (max-width: 600px) {
  .who .world-chip, .who [data-action=openProfile] { min-height: 32px; display: inline-flex; align-items: center; }
}
/* 최종 점검: 어두운 테마에서 강조 칩이 강조 바탕(내 순위 줄 등) 위에 겹칠 때도 읽히게 */
:root:not([data-theme]) .chip-accent, html[data-theme="dark"] .chip-accent { color: #f3c784; }
:root:not([data-theme]) .table tr.me .chip-accent, html[data-theme="dark"] .table tr.me .chip-accent { background: rgba(0, 0, 0, 0.35); }

/* 최종 점검: 아주 좁은 화면(320px · 확대 200%)에서 패널이 화면보다 넓어지던 문제 — 그리드 · 묶음 칸이 내용 최소 폭 아래로 줄어들 수 있게 */
.grid > *, .stack > *, .panel-box, .row-between > *, .filter-bar > * { min-width: 0; }
.panel-box select, .panel-box input:not([type=checkbox]):not([type=radio]), .panel-box textarea { max-width: 100%; }
@media (max-width: 360px) {
  .row-between.wrap > .seg, .filter-bar label { flex-wrap: wrap; }
  .seg .seg-btn { white-space: normal; }
}
.panel-box > * { min-width: 0; max-width: 100%; }

/* ===== 17차: 편의성 다듬기 ===== */
.only-narrow { display: none; }
@media (max-width: 560px) { .only-narrow { display: block; } }
/* 좁은 화면: 버튼이 2개 이상인 목록 줄은 버튼을 이름 · 설명 아래 줄로 (이름이 한두 글자씩 끊기지 않게) */
@media (max-width: 560px) {
  .item:has(> .item-actions > :nth-child(2)) { grid-template-columns: minmax(0, 1fr); }
  .item:has(> .item-actions > :nth-child(2)) > .item-actions { justify-content: flex-start; }
  .pcard:has(> .pcard-actions > :nth-child(2)) > .pcard-actions { grid-column: 2 / -1; justify-content: flex-start; }
  /* 별자리 지도: 글자가 7px 로 작아지지 않게 지도를 넓히고 가로로 밀어서 봄 */
  .star-map-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
  .star-map { min-width: 34rem; max-height: none; }
}