/* ============================================================================
   BASTILLE MANSION — 질문카드 컴포넌트 (QUESTION-CARD-SPEC.md 정본 구현)
   전 타입 중립(에스프레소+골드 헤어라인) — condition_check 경보성 제로 하드룰.
   버튼 = 플랫+상단 하이라이트 (골드 그라데이션 폐기, README 확정 레시피).
   ============================================================================ */

.qcard{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--qcard-radius,14px);
  padding:var(--qcard-pad,15px 18px);display:flex;flex-direction:column;gap:var(--qcard-gap,10px);
  box-shadow:var(--shadow-card);margin-bottom:10px;
  animation:qcard-enter var(--dur-base,180ms) var(--ease-standard,cubic-bezier(.4,0,.2,1))}
@keyframes qcard-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qcard--urgent{border-color:var(--qcard-urgent-hairline,rgba(197,160,89,.5))}
.qcard--answered{opacity:var(--qcard-answered-opacity,.82)}
.qcard--expired{opacity:var(--qcard-expired-opacity,.55)}

.qcard-head{display:flex;align-items:center;gap:7px}
.qcard-head .material-symbols-outlined{font-size:15px;color:var(--gold)}
.qcard-typelabel{font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  font-weight:600;color:var(--gold);opacity:.85}
.qcard-flag{font-size:10px;letter-spacing:.2em;font-weight:600;color:var(--warning,#e8b339)}
.qcard-expiry{margin-left:auto;font-size:11px;color:var(--qcard-expiry-color,var(--text-faint))}
.qcard-state{margin-left:auto;font-size:11px;color:var(--text-faint)}

.qcard-title{font-size:var(--qcard-title-size,15px);font-weight:700;color:var(--text-strong);line-height:1.4}
.qcard-body{font-size:var(--qcard-body-size,13.5px);color:var(--text-muted);line-height:1.6}
.qcard-note{font-size:var(--qcard-note-size,12px);color:var(--text-faint)}

.qcard-actions{display:flex;gap:8px;flex-wrap:wrap}
.qbtn{font:inherit;font-size:13px;font-weight:600;padding:.42rem 1rem;border-radius:8px;
  cursor:pointer;border:none;background:var(--gold);color:var(--on-gold,#1a120f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 1px 2px rgba(0,0,0,.3),0 6px 16px rgba(120,85,30,.35);
  transition:transform var(--dur-fast,120ms) var(--ease-standard),filter var(--dur-fast,120ms)}
.qbtn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.qbtn:active{transform:translateY(0);filter:brightness(.97)}
.qbtn:disabled{opacity:.5;transform:none}
.qbtn--ghost{background:transparent;color:var(--text-muted);border:1px solid var(--hairline);box-shadow:none}
.qbtn--ghost:hover{color:var(--text);border-color:var(--hairline-strong)}

.qcard-answertag{display:inline-block;font-size:12.5px;font-weight:700;color:var(--gold);
  border:1px solid var(--hairline);border-radius:9999px;padding:.2rem .75rem}

.qcap{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-faint);padding:.35rem 0}
.qcap .material-symbols-outlined{font-size:14px;color:var(--text-faint)}

/* 문패 — microlabel 시그니처 (10px · uppercase · .2em · 골드) */
.doorplate{font-size:10px;text-transform:uppercase;letter-spacing:.2em;font-weight:600;
  color:var(--gold);opacity:.8;margin-bottom:2px}
.doorplate b{color:var(--text-strong)}

/* 뱃지(앱 유일) — 대기 카드 수, 크림슨 필 */
.trib-badge{display:inline-block;min-width:16px;text-align:center;font-size:11px;font-weight:700;
  color:#fff;background:var(--crimson,#b8383b);border-radius:9999px;padding:1px 5px;
  margin-left:6px;vertical-align:1px}
.trib-badge:empty{display:none}

/* Tribunal 카드 거처 */
#trib-cards-home{border-bottom:1px solid var(--border);padding:.7rem .9rem;max-height:46vh;overflow-y:auto}
#trib-cards-home .qcard{margin-bottom:8px}
.trib-histrow{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-faint);
  padding:.3rem 0;border-top:1px dashed var(--hairline-neutral,rgba(255,255,255,.1))}
.trib-histrow .h-title{color:var(--text-muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================================
   2단계 — 3-모드 사이드바 셸 + 모바일 하단 탭바 (v4 정본 어휘, PRODUCT-FACTS §2·§6)
   ============================================================================ */
#sidebar{display:none;flex-direction:column;width:230px;min-width:230px;height:100vh;
  background:var(--espresso-850,#201510);border-right:1px solid var(--border);
  padding:14px 10px 10px;overflow-y:auto}
#sidebar .emblem{font-family:var(--font-serif);color:var(--gold);font-size:17px;
  letter-spacing:.12em;padding:2px 8px 12px}
.mode-row{display:flex;gap:4px;margin-bottom:6px}
.mode-chip{flex:1;font:inherit;font-size:11.5px;padding:.38rem 0;border-radius:6px;
  border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer}
.mode-chip.on{color:var(--gold);border-color:var(--hairline-strong);background:var(--tint-gold-08)}
.nav-group{margin-top:8px;transition:opacity var(--dur-base,180ms) var(--ease-standard)}
.nav-glabel{font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--text-faint);padding:2px 8px 4px}
body[data-mode] .nav-group{opacity:.45}
body[data-mode=glance] .nav-group[data-mode=glance],
body[data-mode=operate] .nav-group[data-mode=operate],
body[data-mode=tend] .nav-group[data-mode=tend]{opacity:1}
#sidebar .tab-btn{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  width:100%;text-align:left;padding:7px 10px;border-radius:6px;border-bottom:none}
#sidebar .tab-btn .nav-name{font-size:13px}
#sidebar .tab-btn .nav-sub{font-size:10px;color:var(--text-faint);letter-spacing:.08em}
#sidebar .tab-btn.active{background:var(--tint-gold-08);color:var(--gold);border-bottom:none}
#sidebar .tab-btn.active .nav-sub{color:var(--gold-deep)}
#hb-row{margin-top:auto;font:inherit;font-size:11.5px;color:var(--text-faint);background:none;
  border:none;border-top:1px solid var(--border);padding:10px 8px 4px;text-align:left;cursor:pointer}
#hb-row b{color:var(--success)}
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--espresso-850,#201510);border-top:1px solid var(--border);
  justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tabbar button{font:inherit;background:none;border:none;color:var(--muted);font-size:10px;
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  border-bottom:none;padding:2px 8px;position:relative}
.tabbar button .material-symbols-outlined{font-size:20px}
.tabbar button.active{color:var(--gold);border-bottom:none}
.tabbar .trib-badge{position:absolute;top:-2px;right:0}
@media(min-width:769px){
  body{flex-direction:row}
  #topbar{display:none}
  #sidebar{display:flex}
}
@media(max-width:768px){
  #topbar{display:none}
  .tabbar{display:flex}
  .tab-panel{padding-bottom:56px}
  #sidebar.open{display:flex;position:fixed;top:0;left:0;bottom:0;right:25%;z-index:110;
    box-shadow:var(--shadow-modal)}
}

/* ============================================================================
   3단계-① — 모드별 홈 강조 실효화 (PRODUCT-FACTS §2: 홈은 강조점만 전환)
   일상=브리핑·인사 중심(기본) / 업무=승인 큐+장부 밀도 / 정비=서고·시스템 중심
   ============================================================================ */
body[data-mode=operate] #greeting,
body[data-mode=tend] #greeting{display:none}

body[data-mode=operate] #card-questions{order:-3;border-color:var(--hairline-strong)}
body[data-mode=operate] #card-subs{order:-2}
body[data-mode=operate] #card-economy{order:-1}
body[data-mode=operate] #card-weather{order:2}

body[data-mode=tend] #card-ask{order:-2;border-color:var(--hairline-strong)}
body[data-mode=tend] #card-questions{order:-1}
body[data-mode=tend] #card-weather,
body[data-mode=tend] #card-subs,
body[data-mode=tend] #card-economy{order:2;opacity:.75}

/* 3단계-② — 방 제목 격상: 세리프 + 골드 룰 (패널 직계 제목만 — 하위 섹션 제외) */
.tab-panel > .section-title{font-family:var(--font-serif);font-size:1.08rem;font-weight:700;
  color:var(--text-strong);letter-spacing:.04em;text-transform:none;padding:.85rem 1.2rem .15rem}
.tab-panel > .section-title::after{content:"";display:block;width:56px;height:2px;
  background:var(--gold);margin-top:.45rem}

/* 리팩토링 1차 — Solarium v4 우선순위(승인→브리핑→숫자→발렛) 상시 순서 */
#card-questions{order:-3}
#card-briefing{order:-2}
#card-ask{order:-1}

/* 리팩토링 2차 — 회계실: v4 모노 숫자 규율 (JetBrains Mono·탭 정렬 숫자) */
#counting-panel .num,#counting-panel td{font-family:var(--mono);font-variant-numeric:tabular-nums}
#counting-panel th{font-variant-numeric:tabular-nums}

/* 리팩토링 2차 — 작전실: v4 규격(목록 열 330px·중립 헤어라인·원장 모노) */
#war-panel .war-root>aside{width:330px;min-width:330px;border-right:1px solid var(--hairline-neutral)}
#ledger-body,#war-detail-body{font-variant-numeric:tabular-nums}
@media(max-width:768px){#war-panel .war-root>aside{width:40%;min-width:0}}

/* 리팩토링 2차 — 도서관: 기록 행 탭 숫자 정렬 */
#scriptorium-panel .scrp-row{font-variant-numeric:tabular-nums}

/* 회계실 제목 버그 수정 — 제목 배너 아래 2열 행 컨테이너 */
.ch-row{display:flex;flex:1;min-height:0;overflow:hidden}
@media(max-width:768px){.ch-row{flex-direction:column;overflow-y:auto}}

/* 양호실 그룹 — 접이식 카테고리 섹션 */
.inf-grp{border:none;margin-bottom:.5rem}
.inf-grp-h{cursor:pointer;list-style:none;font-family:var(--font-serif);font-size:1rem;color:var(--text-strong);
  padding:.5rem 0 .4rem;border-bottom:1px solid var(--hairline);margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
.inf-grp-h::-webkit-details-marker{display:none}
.inf-grp-h::before{content:"▸";color:var(--gold);font-size:.8rem;transition:transform .15s}
.inf-grp[open] .inf-grp-h::before{transform:rotate(90deg)}
.inf-grp-n{font-size:.68rem;color:var(--text-faint);font-family:var(--font);background:var(--tint-gold-08);
  border-radius:9999px;padding:1px 8px;font-weight:400}
.inf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7rem;margin-bottom:.4rem}

/* 모바일 ① — 최근거래 테이블을 카드형으로 (세로 글자 깨짐 해소) */
@media(max-width:768px){
  /* 모든 ch-table: 헤더 세로 글자 방지 */
  .ch-table th{white-space:nowrap}
  /* 최근거래: 행 = 카드 */
  .ch-tx-table thead{display:none}
  .ch-tx-table,.ch-tx-table tbody,.ch-tx-table tr,.ch-tx-table td{display:block;width:auto}
  .ch-tx-table tr{border:1px solid var(--hairline);border-radius:10px;padding:.4rem .2rem;margin-bottom:.55rem;background:var(--panel)}
  .ch-tx-table tr:hover{background:var(--panel)}
  .ch-tx-table td{display:flex;justify-content:space-between;align-items:center;gap:1rem;
    padding:.28rem .8rem;border:none;white-space:normal}
  .ch-tx-table td::before{content:attr(data-label);color:var(--text-faint);font-size:.72rem;flex-shrink:0}
  .ch-tx-table td[data-label=""]{justify-content:flex-end}
  .ch-tx-table td.num{font-size:1rem;font-weight:600}
}

/* 방 설명 캡션 — "뭐 하는 곳인지" 한 줄 */
.room-caption{font-size:.76rem;color:var(--text-muted);padding:0 1.2rem .5rem;line-height:1.5}
.room-caption b{color:var(--gold)}

/* 모바일 ② — War Room: 3열 stack에 경계·라벨, 원장 가로스크롤 */
@media(max-width:768px){
  .war-root{gap:.7rem}
  .war-root>*{border:1px solid var(--hairline);border-radius:10px;min-height:auto;max-height:none}
  #ledger-body,#war-session-list{overflow-x:auto}
  .war-row{min-width:560px}
  /* Valet: 세로 재구성 — 채팅 먼저, 세션·감사는 접어서 위/아래 */
  #valet-panel{flex-direction:column;overflow-y:auto}
  #valet-sidebar{width:100%;flex-shrink:0;max-height:150px;border-right:none;border-bottom:1px solid var(--border)}
  #valet-main{order:-1;min-height:340px}
  #valet-audit{width:100%!important;border-left:none;border-top:1px solid var(--border)}
}

/* 모바일 ③ — 그래프 KPI 3열 고정 → 1열(큰 금액 잘림 해소), 전역 가로넘침 방지 */
@media(max-width:768px){
  #ch-chart-kpis{grid-template-columns:1fr!important}
  #ch-content{overflow-x:hidden}
  .tab-panel{max-width:100vw}
  /* 금액 셀이 카드 밖으로 넘지 않게 */
  .ch-cards .num,#ch-chart-kpis .num{overflow-wrap:anywhere}
}

/* 음악(Conservatory) 정리 — v4 카드·통계·순위·리듬 */
.mus-stats{display:flex;gap:.7rem;flex-wrap:wrap}
.mus-metric{flex:1;min-width:100px;background:var(--panel);border:1px solid var(--hairline);border-radius:12px;padding:.8rem .9rem}
.mus-metric-l{font-size:.72rem;color:var(--text-muted)}
.mus-metric-v{font-size:1.5rem;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;margin-top:.15rem}
.mus-card{background:var(--panel);border:1px solid var(--hairline);border-radius:12px;padding:1rem}
.mus-h{font-family:var(--font-serif);font-size:.95rem;color:var(--text-strong);margin-bottom:.7rem}
.mus-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mus-rank{display:flex;align-items:center;gap:.6rem;padding:.32rem 0}
.mus-num{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);width:1.2rem;flex:none;text-align:right}
.mus-rank-main{flex:1;min-width:0}
.mus-t{font-size:.82rem;color:var(--text)}
.mus-sub{font-size:.74rem;color:var(--text-muted)}
.mus-plays{font-family:var(--mono);font-size:.74rem;color:var(--text-muted);flex:none}
.mus-bar{height:3px;background:var(--hairline-neutral,rgba(255,255,255,.08));border-radius:2px;margin-top:.25rem;overflow:hidden}
.mus-bar span{display:block;height:100%;background:var(--gold);opacity:.6}
@media(max-width:768px){.mus-grid{grid-template-columns:1fr}}

/* ============================================================================
   Valet 채팅 — Claude식 (가운데 대화 · 발렛 답변=서체 · 여백 · 감사로그 토글)
   ============================================================================ */
#chat-area{padding:1.7rem max(1rem,calc((100% - 760px)/2));gap:1.6rem;background:var(--bg)}
#chat-area .msg{font-size:.92rem;line-height:1.7}
/* 발렛(assistant) = 집사의 목소리: 조선명조 서체, 전체폭, 버블 없음 */
#chat-area .msg.assistant{align-self:stretch;max-width:100%;background:none;border:none;
  padding:.1rem 0;border-radius:0;font-family:var(--font-serif);font-size:1.04rem;
  line-height:1.9;color:var(--text-strong)}
/* 사용자 = 오른쪽 부드러운 버블 */
#chat-area .msg.user{align-self:flex-end;max-width:80%;background:var(--espresso-800,#241813);
  color:var(--text);border:1px solid var(--hairline);border-radius:16px;
  border-bottom-right-radius:5px;padding:.6rem .95rem}
#chat-area .msg.system-note{color:var(--text-faint);font-style:normal}
/* 입력바 — 깔끔·가운데 정렬 */
#chat-input-bar{padding:.7rem max(1rem,calc((100% - 760px)/2)) 1rem;border-top:1px solid var(--hairline);background:var(--bg);align-items:flex-end}
#chat-input{border:1px solid var(--hairline-strong);border-radius:16px;background:var(--panel);
  padding:.7rem .95rem;font-family:var(--font);font-size:.9rem;resize:none}
#chat-send{border-radius:14px;background:var(--gold);color:var(--on-gold);border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px rgba(120,85,30,.3);padding:.55rem 1rem}
#chat-send:disabled{opacity:.4;box-shadow:none}
/* 툴바 정돈 */
#valet-toolbar{background:var(--bg);border-bottom:1px solid var(--hairline)}
/* 감사 로그 — 기본 숨김, 토글로 표시 */
#valet-panel:not(.show-audit) #audit-panel{display:none}
#valet-panel.show-audit #audit-panel{display:flex}

/* ============================================================================
   저택 느낌 — 식별용 작은 라벨에 조선명조 (데이터·숫자는 고딕 유지)
   ============================================================================ */
.ic-label,.mus-metric-l,.mus-h,.inf-grp-h,.doorplate,.nav-glabel,.room-caption b,
#chat-area .msg.system-note,.qcard-typelabel,.section-title{
  font-family:var(--font-serif)}
/* 라벨은 대문자 자간을 살짝 풀어 세리프가 눌리지 않게 */
.ic-label{text-transform:none;letter-spacing:.06em;font-size:12px;color:var(--gold);opacity:.85}
.mus-metric-l{font-size:.82rem}
.qcard-typelabel{text-transform:none;letter-spacing:.05em;font-size:12px}
.nav-glabel{text-transform:none;letter-spacing:.05em;font-size:11px}

/* The Observatory(관측소) — 인사이트 카드 (스크로블 스타일) */
.obs-group-h{font-family:var(--font-serif);font-size:1.05rem;color:var(--gold);
  margin:1.2rem 0 .7rem;padding-bottom:.3rem;border-bottom:1px solid var(--hairline)}
.obs-group-h:first-child{margin-top:.3rem}
.obs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.obs-card{background:var(--panel);border:1px solid var(--hairline);border-radius:14px;
  padding:1rem 1.1rem;position:relative;overflow:hidden}
.obs-card::before{content:"";position:absolute;inset:0;background:var(--sheen-gold);opacity:.5;pointer-events:none}
.obs-icon{font-size:1.4rem;margin-bottom:.35rem}
.obs-kicker{font-family:var(--font-serif);font-size:.78rem;color:var(--text-muted);margin-bottom:.15rem}
.obs-value{font-family:var(--font-serif);font-size:1.55rem;font-weight:700;color:var(--text-strong);
  line-height:1.2;margin-bottom:.35rem;word-break:break-word}
.obs-detail{font-size:.76rem;color:var(--text-faint);line-height:1.55}
@media(max-width:768px){.obs-grid{grid-template-columns:1fr 1fr;gap:.6rem}
  .obs-card{padding:.8rem}.obs-value{font-size:1.25rem}}

/* 관측소 상세페이지 — 클릭 카드 + 드릴다운 모달 */
.obs-clickable{cursor:pointer;transition:transform .12s,border-color .12s}
.obs-clickable:hover{transform:translateY(-2px);border-color:var(--hairline-strong)}
.obs-more{font-size:.7rem;color:var(--gold);opacity:.75;margin-top:.5rem}
#obs-detail-modal{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);
  align-items:center;justify-content:center;padding:1rem}
#obs-detail-modal.open{display:flex}
.obs-detail-box{background:var(--panel);border:1px solid var(--hairline-strong);border-radius:16px;
  width:100%;max-width:640px;max-height:82vh;display:flex;flex-direction:column;box-shadow:var(--shadow-modal)}
.obs-detail-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--hairline)}
.obs-detail-head h3{font-family:var(--font-serif);font-size:1.1rem;color:var(--text-strong);margin:0}
.obs-detail-x{background:none;border:none;color:var(--text-muted);font-size:1.1rem;cursor:pointer}
#obs-detail-body{padding:1rem 1.2rem;overflow-y:auto}
/* 목록형 */
.obs-d-row{display:flex;align-items:center;gap:.6rem;padding:.35rem 0}
.obs-d-rank{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);width:1.5rem;text-align:right;flex:none}
.obs-d-main{flex:1;min-width:0}
.obs-d-label{font-size:.85rem;color:var(--text)}
.obs-d-sub{color:var(--text-muted);font-size:.76rem}
.obs-d-bar{height:3px;background:var(--hairline-neutral,rgba(255,255,255,.08));border-radius:2px;margin-top:.2rem;overflow:hidden}
.obs-d-bar span{display:block;height:100%;background:var(--gold);opacity:.6}
.obs-d-val{font-family:var(--mono);font-size:.78rem;color:var(--text-muted);flex:none}
/* 막대형 */
.obs-d-bars{display:flex;align-items:flex-end;gap:3px;height:180px;overflow-x:auto;padding-bottom:1.4rem}
.obs-d-bcol{flex:1;min-width:14px;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.obs-d-bwrap{width:100%;flex:1;display:flex;align-items:flex-end}
.obs-d-bfill{width:100%;background:var(--gold);opacity:.55;border-radius:3px 3px 0 0;min-height:2px}
.obs-d-blabel{font-size:.58rem;color:var(--text-faint);margin-top:.25rem;white-space:nowrap;transform:rotate(-45deg);transform-origin:top left;height:1rem}