/* ============================================================================
 * toss-common.css — Mansion 대개장 파운데이션 A (토스 커먼 룰)
 * ----------------------------------------------------------------------------
 * 로드 계약: index.html 의 인라인 <style> 및 /ds/*.css 링크들 **뒤에** <link>.
 *   - 같은 특이도면 이 파일이 나중이므로 /ds/*.css 를 이긴다 (재도장 원리).
 *   - 인라인 style="" 속성과는 싸우지 않는다 — 클래스 레벨에서 우아하게 양보.
 *   - .fun-* 는 amusements.js 가 런타임에 <style id="fun-style"> 를 주입해
 *     이 파일보다 늦게 붙으므로, 이중 클래스(.fun-card.fun-card)로만 이긴다.
 * 팔레트 불변: 새 색상값 도입 금지. 아래 모든 rgba 는 기존 팔레트
 *   (에스프레소 #1A120F/#241813/#2D1E18, 골드 #C5A059) 의 알파판이다.
 * 성능 예산: 유리(.glass)는 화면당 1~2개 한정. 대면적·스크롤 연동 블러 금지.
 * ========================================================================== */

/* ── ① 표면 3단 토큰 (TDS colors 구조 이식) ─────────────────────────────── */
:root{
  --surface-base:    var(--bg, #1a120f);            /* 바닥 */
  --surface-layered: var(--panel, #2d1e18);         /* 카드 */
  --surface-floated: rgba(45,30,24,.62);            /* 유리 시트 — --panel 알파판 */
  --glass-blur: 14px;
  --glass-edge: rgba(197,160,89,.24);               /* 골드 저알파 외곽선 */
  --glass-fallback: rgba(36,24,18,.88);             /* backdrop-filter 미지원 폴백 */
  --overlay-dim: rgba(26,18,15,.55);                /* 오버레이 — --bg(#1A120F) 알파판 */

  /* ── ③ 모션 어휘 — 이징 2종만, 이름 붙여서 ── */
  --motion-quick: cubic-bezier(.22,1.2,.36,1);      /* 스프링감 — 진입·강조 */
  --motion-calm:  cubic-bezier(.33,0,.2,1);         /* 차분함 — 퇴장·이동 */
  --motion-quick-dur: 320ms;
  --motion-calm-dur:  200ms;

  /* ── ④ 타이포 번호형 스케일 (행간비 1.33~1.5, 픽셀 하드코딩 금지·토큰만) ── */
  --type-1-size:30px; --type-1-lh:40px;             /* 초대형 디스플레이 */
  --type-2-size:26px; --type-2-lh:36px;             /* 큰 숫자·핵심 값 */
  --type-3-size:22px; --type-3-lh:30px;             /* 방 제목 */
  --type-4-size:19px; --type-4-lh:27px;             /* 부제·중간 숫자 */
  --type-5-size:17px; --type-5-lh:25.5px;           /* 본문 */
  --type-6-size:15px; --type-6-lh:22px;             /* 보조 본문·카드 제목 */
  --type-7-size:13px; --type-7-lh:19.5px;           /* 작은 캡션 */
}

/* 타이포 유틸 */
.type-1{font-size:var(--type-1-size);line-height:var(--type-1-lh)}
.type-2{font-size:var(--type-2-size);line-height:var(--type-2-lh)}
.type-3{font-size:var(--type-3-size);line-height:var(--type-3-lh)}
.type-4{font-size:var(--type-4-size);line-height:var(--type-4-lh)}
.type-5{font-size:var(--type-5-size);line-height:var(--type-5-lh)}
.type-6{font-size:var(--type-6-size);line-height:var(--type-6-lh)}
.type-7{font-size:var(--type-7-size);line-height:var(--type-7-lh)}
/* 금액·수치 전용 — 롤링 카운트업(rollNum)과 짝 */
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ── ② 유리 레시피 — 배경 블러 + 1px 골드 저알파 외곽선 ─────────────────── */
.glass{
  background:var(--surface-floated);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-edge);
  color:var(--text-strong,#f7f1e6);                 /* 유리 위 텍스트는 한 단계 밝게 */
}
@supports not (backdrop-filter: blur(1px)){
  .glass{
    background:var(--glass-fallback);
    border:1px solid var(--glass-edge);
  }
}

/* ── ③ 모션 유틸 — 진입 .rise / 등장 .fade ("한 타겟에 한 모션") ──────────── */
.rise{animation:ts-rise var(--motion-quick-dur) var(--motion-quick) both}
.fade{animation:ts-fade var(--motion-calm-dur) var(--motion-calm) both}
@keyframes ts-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes ts-fade{from{opacity:0}to{opacity:1}}

/* ── ⑤ 스켈레톤 — 스피너 금지, 내용 자리 뼈대 + 은은한 골드 파문 ─────────── */
.skel{
  position:relative;overflow:hidden;
  background:var(--white-05,rgba(255,255,255,.05));
  border-radius:var(--r-sm,6px);
  pointer-events:none;user-select:none;
}
.skel::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 0%,rgba(197,160,89,.14) 50%,transparent 100%);
  animation:ts-skel-sweep 1.6s var(--motion-calm) infinite;
}
.skel-line{height:1em;margin:.4em 0}
.skel-line.w40{width:40%}.skel-line.w60{width:60%}.skel-line.w80{width:80%}
.skel-block{height:72px}
@keyframes ts-skel-sweep{100%{transform:translateX(100%)}}

/* ── ⑥ 기존 클래스 재도장 — 표면·라운드·헤어라인 통일 ──────────────────── */
/* 카드 공통 표면 (클래스 셀렉터로만 — 인라인 스타일에는 양보) */
.obs-card,.mus-card,.qcard,.inf-grp,
.fun-card.fun-card{
  background:var(--surface-layered);
  border:1px solid var(--hairline,rgba(197,160,89,.20));
  border-radius:var(--r-lg,14px);
  box-shadow:var(--shadow-inset,inset 0 1px 0 rgba(255,255,255,.06));
  transition:
    transform var(--motion-calm-dur) var(--motion-calm),
    border-color var(--motion-calm-dur) var(--motion-calm),
    box-shadow var(--motion-calm-dur) var(--motion-calm);
}
.obs-card,.mus-card,.qcard,
.fun-card.fun-card{padding:14px 16px}

/* 호버 뜸 — 호버 가능 기기에서만 translateY(-2px) */
@media (hover:hover) and (pointer:fine){
  .obs-card:hover,.mus-card:hover,.qcard:hover,
  .fun-card.fun-card:hover{
    transform:translateY(-2px);
    border-color:var(--hairline-strong,rgba(197,160,89,.50));
    box-shadow:var(--shadow-card,0 4px 20px rgba(0,0,0,.40));
  }
  .inf-grp:hover{border-color:var(--hairline-strong,rgba(197,160,89,.50))}
  .obs-clickable{cursor:pointer}
}

/* 큰 숫자 위계 — 조선명조 디스플레이는 큰 숫자만, 전부 tabular */
.obs-value{
  font-family:var(--font-serif,serif);
  font-size:var(--type-2-size);line-height:var(--type-2-lh);
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
  color:var(--text-strong,#f7f1e6);letter-spacing:-.01em;
}
.fun-big.fun-big{
  font-size:var(--type-2-size);line-height:var(--type-2-lh);
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
  color:var(--text-strong,#f7f1e6);
}
.fun-mid.fun-mid{
  font-size:var(--type-4-size);line-height:var(--type-4-lh);
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
}

/* 섹션 제목 세리프 룰 */
.obs-group-h,
.fun-group-title.fun-group-title{
  font-family:var(--font-serif,serif);
  font-size:var(--type-5-size);line-height:var(--type-5-lh);
  color:var(--gold,#c5a059);font-weight:600;letter-spacing:.05em;
}
.mus-h,.inf-grp-h{
  font-family:var(--font-serif,serif);
  font-size:var(--type-6-size);line-height:var(--type-6-lh);
  color:var(--gold,#c5a059);font-weight:600;letter-spacing:.04em;
}

/* 관측소 카드 내부 위계 */
.obs-kicker{font-size:var(--type-7-size);line-height:var(--type-7-lh);color:var(--text-faint,#6d6353);letter-spacing:.08em}
.obs-detail{font-size:var(--type-6-size);line-height:var(--type-6-lh);color:var(--text-muted,#9a8f7d)}
.obs-more{font-size:var(--type-7-size);color:var(--primary,#135bec)}

/* 정보 그룹(details) — 접이식 서랍 재도장 */
.inf-grp{overflow:hidden}
.inf-grp-h{cursor:pointer;padding:10px 14px;user-select:none;list-style:none}
.inf-grp-h::-webkit-details-marker{display:none}
.inf-grp[open]>.inf-grp-h{border-bottom:1px solid var(--hairline,rgba(197,160,89,.20))}
.inf-grp-n{
  display:inline-block;min-width:1.6em;padding:0 .45em;margin-left:.3em;
  border-radius:var(--r-full,9999px);
  background:var(--tint-gold-12,rgba(197,160,89,.12));color:var(--gold,#c5a059);
  font-family:var(--font,sans-serif);font-size:var(--type-7-size);
  text-align:center;font-variant-numeric:tabular-nums;
}
.inf-grid{padding:10px 14px 14px}

/* 회계실 확인카드 — 긴급 표식 */
.qcard--urgent{
  border-color:var(--crimson,var(--danger,#f43f5e));
  box-shadow:0 0 0 1px var(--tint-danger-12,rgba(244,63,94,.12));
}

/* ── ⑦ 디테일 — 스크롤바·포커스 링·선택 영역 ───────────────────────────── */
html{scrollbar-color:rgba(197,160,89,.30) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(197,160,89,.25);border-radius:var(--r-full,9999px)}
::-webkit-scrollbar-thumb:hover{background:rgba(197,160,89,.45)}

:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--primary,#135bec);
  outline-offset:2px;
}
::selection{background:var(--tint-gold-40,rgba(197,160,89,.40));color:var(--text-strong,#f7f1e6)}

/* ── 모바일(≤720px) — 블러 예산 축소·패딩 조임 ─────────────────────────── */
@media (max-width:720px){
  :root{--glass-blur:10px}
  .obs-card,.mus-card,.qcard,
  .fun-card.fun-card{padding:12px 14px;border-radius:var(--r-md,10px)}
  .inf-grp{border-radius:var(--r-md,10px)}
}

/* ── prefers-reduced-motion 존중 ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .rise,.fade{animation:none}
  .skel::after{animation:none;transform:none;background:none}
  .obs-card,.mus-card,.qcard,.inf-grp,
  .fun-card.fun-card{transition:none}
  .obs-card:hover,.mus-card:hover,.qcard:hover,
  .fun-card.fun-card:hover{transform:none}
}

/* ── ⑧ 커먼 룰 심화 (CLOCK_SPEC C항) — 추가 재도장 전용, 위 규칙 불변 ────── */

/* C-1. 관측소 .obs-card 유리 승격 — 상단 1px 골드 하이라이트를 얹는다.
   블러는 쓰지 않는다(유리 예산 화면당 1~2개 보존) — 유리의 골드 엣지 감각만 승격.
   호버 뜸(-2px)은 ⑥의 기존 규칙이 이미 담당. 색은 전부 기존 토큰 재사용. */
.obs-card{
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    var(--shadow-inset,inset 0 1px 0 rgba(255,255,255,.06));
}
@media (hover:hover) and (pointer:fine){
  .obs-card:hover{
    box-shadow:
      inset 0 1px 0 var(--glass-edge),
      var(--shadow-card,0 4px 20px rgba(0,0,0,.40));
  }
}
/* 큰 숫자 --type-2 세리프 통일 — 카드 문맥(.obs-card .obs-value)에서 한 단계
   굳혀 /ds/qcard.css 의 모바일 축소(1.25rem) 잔재까지 확실히 이긴다 */
.obs-card .obs-value{
  font-family:var(--font-serif,serif);
  font-size:var(--type-2-size);line-height:var(--type-2-lh);
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
  color:var(--text-strong,#f7f1e6);letter-spacing:-.01em;
}

/* C-2a. 회계실 테이블(.ch-table) — 헤어라인 통일·행 호버 정돈.
   행/셀은 JS 생성이라 무클래스 → .ch-table 클래스 뿌리에만 매달아 특이도 최소.
   마지막 행 border 제거는 index.html 의 tr:last-child 규칙이 계속 이긴다. */
.ch-table th,
.ch-table td{border-bottom:1px solid var(--hairline,rgba(197,160,89,.20))}
.ch-table tbody tr:hover{background:var(--white-05,rgba(255,255,255,.05))}

/* C-2b. 양호실 .inf-grp — 행(서랍 머리) 호버, 호버 가능 기기에서만 */
@media (hover:hover) and (pointer:fine){
  .inf-grp-h:hover{background:var(--white-05,rgba(255,255,255,.05))}
}

/* C-2c. 모바일(≤720px) — 회계실 셀·양호실 서랍 여백 정돈 */
@media (max-width:720px){
  .ch-table th,
  .ch-table td{padding:.45rem .6rem}
  .inf-grp-h{padding:9px 12px}
  .inf-grid{padding:8px 12px 12px}
}

/* C-3. 질문카드 .qcard — 버튼 프레스(scale .97, --motion-quick).
   filter 전환은 /ds/qcard.css 의 빠른 전환을 그대로 승계("한 타겟에 한 모션"). */
.qcard .qbtn{
  transition:
    transform var(--motion-quick-dur) var(--motion-quick),
    filter var(--dur-fast,120ms);
}
.qcard .qbtn:active{transform:scale(.97)}

/* C항 신규 모션도 reduced-motion 존중 — 프레스는 전환 없이 즉답 */
@media (prefers-reduced-motion:reduce){
  .qcard .qbtn{transition:none}
}

/* ── 방 스코프 탭-인-탭 (2026-07-25 운영자 지시: 위아래 분할 철거) ── */
.room-tabs{display:flex;gap:2px;padding:0 1.2rem;border-bottom:1px solid var(--hairline,rgba(197,160,89,.20));flex:0 0 auto}
.rt-btn{padding:.55rem .95rem;background:none;border:none;color:var(--text-muted,#9a8f7d);cursor:pointer;font-size:.8rem;border-bottom:2px solid transparent;transition:color .15s var(--motion-calm,ease),border-color .15s var(--motion-calm,ease)}
.rt-btn.active{color:var(--gold,#c5a059);border-bottom-color:var(--gold,#c5a059)}
.rt-panel{display:none}
.rt-panel.active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:auto}

/* 검토대 — 대화에서 확정된 항목 금테 강조 (2026-07-25 운영자 지시) */
.pb-row.pb-pinned{border-color:rgba(197,160,89,.55);box-shadow:inset 2px 0 0 var(--gold,#c5a059)}