/**
 * K·JUM Design Tokens (CSS Custom Properties)
 * Overhauled for Five Elements (五行) Color System & Night Sky Luxury Aesthetic
 */

/* 게이트 숨김 보장(2026-09-12 지시서): applyFeatureVisibility가 el.hidden=true를 걸 때
   어떤 유틸리티/특이도에도 안 밀리게 강제 숨김. JS는 style.display='none'도 함께 건다(이중). */
[hidden] { display: none !important; }

:root {
  --safe-top: max(env(safe-area-inset-top, 28px), 28px);

  /* 형광 탈피 · 한지 팔레트(A) 재정립 2026-08-19: 차가운 잉크+보라 → 따뜻한 한지 잉크
     + 단청주홍 primary(어두워 흰 텍스트 유지) + 골드 accent. 오방색(wood/fire/…)은 보존. */
  --komei-bg: #1a1813;
  --komei-error: #d17679;        /* 삭제·경고 등 파괴적 액션용. 어두운 배경서 잘 보이는 붉은 톤 */
  --komei-bg-card: #2a2420;
  --komei-surface-dim: #221d19;
  --komei-surface: #2a2420;
  --komei-surface-bright: #342c24;
  --komei-surface-lowest: #15110e;
  --komei-surface-low: #2a242080;
  --komei-surface-container: #2a2420;
  --komei-surface-high: #342c24;
  --komei-surface-highest: #3e352c;
  --komei-surface-variant: #342c24;
  --komei-surface-inverse: #f5efe2;

  --komei-text-primary: #ede4d3;
  --komei-text-secondary: #c6b8a3;
  --komei-text-muted: #9c8f7c;
  --komei-outline: #423931;
  --komei-outline-variant: #4f453b;

  --komei-primary: #b5654b;
  --komei-primary-container: #9e4e38;
  --komei-primary-on: #ffffff;
  --komei-primary-on-container: #ffffff;
  --komei-primary-fixed: #cf7c62;
  --komei-primary-fixed-dim: #b5654b;
  --komei-primary-on-fixed: #1e1a17;

  --komei-secondary: #8a9e84;
  --komei-secondary-container: #6f8369;
  --komei-secondary-on: #1e1a17;
  --komei-secondary-fixed: #a3b79c;
  --komei-secondary-fixed-dim: #8a9e84;

  --komei-tertiary: #c9a24b;
  --komei-tertiary-container: #c9a24b;
  --komei-tertiary-on: #1e1a17;
  --komei-tertiary-fixed: #c8ab5a;
  --komei-tertiary-fixed-dim: #c9a24b;

  /* P40: 감사에서 발견된 반복 하드코딩 값을 정식 토큰으로 승격.
     --komei-primary-deep: primary-container보다 더 진한 보라 그라디언트
     끝점으로 chat.html/friend-match.html/matching.html/onboarding.html
     6곳에서 동일한 #4e3f86 값이 하드코딩되어 있던 것을 통합.
     --komei-danger: 상태 배지(주의/경고)용 시맨틱 색상 — 기존 토큰에
     빨강 계열이 없어 신규 추가 (tojeong.html 흉운 배지 등에서 사용). */
  --komei-primary-deep: #7a3b2a;
  --komei-danger: #d37f7c;
  /* P98: 꿈해몽(dream-interpretation.html) 전용 포인트 컬러. 세계 전통 운세
     그리드(saju-hub.html worldtrad-track)의 기존 7개 타일과 겹치지 않는
     색조가 필요해 인디고 계열을 신규 토큰으로 추가 — "밤/수면/꿈"과도
     자연스럽게 어울린다. 인라인 hex 대신 반드시 이 토큰을 통해서만 사용. */
  --komei-dream-primary: #6e74c0;

  --komei-element-bg: #1e1a17;
  --komei-element-primary: #c9a24b;
  --komei-element-accent: #c9a24b;
  --komei-element-light: #342c24;
  --komei-element-badge-bg: rgba(181, 101, 75, 0.16);

  --komei-safe-top: max(20px, env(safe-area-inset-top, 24px));
  --komei-safe-bottom: max(20px, env(safe-area-inset-bottom, 24px));

  --komei-wood-bg: #0f1a13;
  --komei-wood-surface: #16261c;
  --komei-wood-primary: #6fbf9b;
  --komei-wood-accent: #4fa37f;
  --komei-wood-light: #1a2e21;
  --komei-wood-badge-bg: rgba(111, 191, 155, 0.15);
  /* P97-B4: 다운로드 버튼 등 큰 면적 solid fill에는 -primary(네온톤) 대신
     이 muted 톤을 쓴다. 아이콘 칩/텍스트 강조는 기존 -primary 유지 —
     "컨셉과 같은 라인의 색으로 채도를 맞춰라"(항목4) 대응. */
  --komei-wood-muted: #7fae8c;

  --komei-fire-bg: #1c0f13;
  --komei-fire-surface: #29171d;
  --komei-fire-primary: #d3847b;
  --komei-fire-accent: #c65f56;
  --komei-fire-light: #2e1a20;
  --komei-fire-badge-bg: rgba(228, 119, 106, 0.15);
  --komei-fire-muted: #c98a90;

  --komei-earth-bg: #1c150a;
  --komei-earth-surface: #291f10;
  --komei-earth-primary: #c8ab5a;
  --komei-earth-accent: #c08b40;
  --komei-earth-light: #2e2412;
  --komei-earth-badge-bg: rgba(216, 178, 74, 0.15);
  --komei-earth-muted: #c9a468;

  --komei-metal-bg: #18140a;
  --komei-metal-surface: #241e10;
  --komei-metal-primary: #cfb16f;
  --komei-metal-accent: #c9a24b;
  --komei-metal-light: #2c2412;
  --komei-metal-badge-bg: rgba(201, 162, 75, 0.15);
  --komei-metal-muted: #c7ac6e;

  --komei-water-bg: #0a1420;
  --komei-water-surface: #101f30;
  --komei-water-primary: #6e90c8;
  --komei-water-accent: #4e74b0;
  --komei-water-light: #16283d;
  --komei-water-badge-bg: rgba(110, 144, 200, 0.15);
  --komei-water-muted: #7a9cc4;

  --komei-font-display: 'Playfair Display', serif;
  --komei-font-body: 'Inter', sans-serif;
  --komei-font-label: 'Geist', sans-serif;

  --komei-radius-sm: 8px;
  --komei-radius-md: 12px;
  --komei-radius-lg: 18px;
  --komei-radius-full: 9999px;
}

.element-wood {
  --komei-bg: var(--komei-wood-bg);
  --komei-primary: var(--komei-wood-primary);
  --komei-primary-container: var(--komei-wood-primary);
  --komei-primary-fixed: var(--komei-wood-primary);
  --komei-element-primary: var(--komei-wood-primary);
  --komei-element-accent: var(--komei-wood-accent);
  --komei-element-light: var(--komei-wood-light);
  --komei-element-badge-bg: var(--komei-wood-badge-bg);
}

.element-fire {
  --komei-bg: var(--komei-fire-bg);
  --komei-primary: var(--komei-fire-primary);
  --komei-primary-container: var(--komei-fire-primary);
  --komei-primary-fixed: var(--komei-fire-primary);
  --komei-element-primary: var(--komei-fire-primary);
  --komei-element-accent: var(--komei-fire-accent);
  --komei-element-light: var(--komei-fire-light);
  --komei-element-badge-bg: var(--komei-fire-badge-bg);
}

.element-earth {
  --komei-bg: var(--komei-earth-bg);
  --komei-primary: var(--komei-earth-primary);
  --komei-primary-container: var(--komei-earth-primary);
  --komei-primary-fixed: var(--komei-earth-primary);
  --komei-element-primary: var(--komei-earth-primary);
  --komei-element-accent: var(--komei-earth-accent);
  --komei-element-light: var(--komei-earth-light);
  --komei-element-badge-bg: var(--komei-earth-badge-bg);
}

.element-metal {
  --komei-bg: var(--komei-metal-bg);
  --komei-primary: var(--komei-metal-primary);
  --komei-primary-container: var(--komei-metal-primary);
  --komei-primary-fixed: var(--komei-metal-primary);
  --komei-element-primary: var(--komei-metal-primary);
  --komei-element-accent: var(--komei-metal-accent);
  --komei-element-light: var(--komei-metal-light);
  --komei-element-badge-bg: var(--komei-metal-badge-bg);
}

.element-water {
  --komei-bg: var(--komei-water-bg);
  --komei-primary: var(--komei-water-primary);
  --komei-primary-container: var(--komei-water-primary);
  --komei-primary-fixed: var(--komei-water-primary);
  --komei-element-primary: var(--komei-water-primary);
  --komei-element-accent: var(--komei-water-accent);
  --komei-element-light: var(--komei-water-light);
  --komei-element-badge-bg: var(--komei-water-badge-bg);
}

.komei-glass {
  background: rgba(38, 31, 26, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

html.light-mode .komei-glass {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.komei-card-shadow {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.komei-gradient-border-gold {
  border: 1px solid transparent;
  background: linear-gradient(#201a15, #201a15) padding-box, linear-gradient(135deg, #c2a649, #dbcc92) border-box;
}

/* ============================================================================
   P35: 골드 선형(線形) 프리미엄 지침 — 확정된 부적 디자인 컨셉(골드 선버스트
   메달리온)을 앱 전역 표준으로 승격. 골드는 "행운과 복"을 상징하는 브랜드
   규칙이므로, 레이아웃을 사각/원형으로 분리하는 지점(프리미엄 카드, 원형
   아이콘 컨테이너, 섹션 구분선)에는 기본값으로 이 처리를 적용한다.
   과거 shop.html 로컬 .gold-line-card를 전역화한 것 — 다른 화면도 이 클래스를
   재사용해야 하며, 페이지 로컬 <style>에 동일 스타일을 다시 정의하지 않는다.
   ============================================================================ */
.komei-gold-line-card {
  background: var(--komei-surface);
  border: 1px solid rgba(212, 175, 55, 0.34);
  /* 상단 은은한 빛결(inset) + 깊은 그림자 → 질감 있는 한지 바탕 위에 카드가 떠 보이게(대비). */
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(233, 215, 176, 0.07);
  border-radius: var(--komei-radius-lg, 1.25rem);
}

.komei-gold-ring {
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.25);
  overflow: hidden;
}

.komei-gold-divider {
  border-top: 1px solid rgba(212, 175, 55, 0.25);
}

.safe-top-padding,
header,
.header-safe,
.safe-area-top {
  padding-top: max(env(safe-area-inset-top, 28px), 28px) !important;
}

.safe-bottom-padding {
  padding-bottom: max(calc(env(safe-area-inset-bottom, 24px) + 14px), 30px);
}

.komei-keep-all {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ===== 다국어 텍스트 배치 안정화 (2026-08-20, 사용자 피드백) =====
   word-break:keep-all(어절을 통째로 유지)은 "한국어 전용" 규칙이다. 이걸 전 언어에
   그대로 적용하면 언어별로 문장이 부자연스럽게 끊기거나 아예 못 끊겨 넘친다:
   - 태국어(단어 사이 공백 없음): 문장 전체가 한 덩어리라 못 끊겨 카드 밖으로 넘침
   - 중국어·일본어(CJK): 글자 사이가 끊기지 않아 어색하게 넘치거나 한 줄이 밀림
   - 영어·베트남어·인니어·힌디어: 어절 유지가 오히려 균형을 깨 단락이 뚝뚝 떨어짐
   i18n.js가 html[lang]을 설정하므로(ko/ja/en/zh-Hant/vi/hi/th/id), 한국어가 아닐 때는
   word-break를 각 언어의 자연 규칙(normal)으로 되돌린다. keep-all 클래스들의
   overflow-wrap:break-word는 그대로 남아 초장문 토큰만 최후에 분절한다.
   특이성: html:not([lang="ko"]) * = (0,1,1) > .komei-keep-all (0,1,0) 이라 !important 불필요. */
html:not([lang="ko"]) * { word-break: normal; }
/* 태국어: 사전 기반 단어 단위 줄바꿈(Chromium 내장) 활성화 — 공백 없는 태국어가
   글자 중간이 아니라 단어 경계에서 자연스럽게 접히도록. */
html[lang="th"] * { line-break: auto; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  word-break: keep-all;
  overflow-wrap: break-word;
  /* 한지 종이 질감(닥섬유 결 + 따뜻한 얼룩) — 페이지별 background-color(var(--komei-bg)) 위에
     겹쳐, 카드 사이 '여백'이 평평한 다크가 아니라 실제 한지 바탕처럼 보이게 한다.
     (사용자 피드백 2026-08-19: "모바일서 한지 느낌 전혀 없다 · 여백이 안 보인다".) fixed로 스크롤 시 종이 고정. */
  /* 玄(현) 밤하늘 한지 — 명분: 천지현황(하늘=玄)·오방 북방 흑(수)·만세력/천문(별).
     상단은 따뜻한 한지 글로우, 하단 코너에 절제된 쪽빛(수·북방의 딥블루, 보라 아님) 깊이,
     별(금)은 hanji-tile.png에 성기게 박아 타일 반복으로 스타필드. */
  background-image:
    url(assets/hanji-tile.png),
    radial-gradient(70% 42% at 50% 3%, rgba(222,178,112,0.13), transparent 60%),
    radial-gradient(96% 62% at 10% 100%, rgba(40,46,84,0.30), transparent 62%),
    radial-gradient(96% 62% at 92% 98%, rgba(32,38,74,0.24), transparent 60%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 300px 300px, auto, auto, auto;
  background-attachment: fixed;
}

main,
.komei-safe-bottom-nav {
  /* P218: 하단 공백 과다("미완성 느낌") 수정 — 고정 하단 네비(~70~90px) 클리어런스만
     남기고 축소. 기존 160px + body의 중복 pb-36(144px)이 겹쳐 ~300px 공백이 생겼다.
     body pb-36은 전 페이지에서 제거했고, 여기서 네비 높이+소량 여백선까지 줄인다. */
  /* P219 (2026-08-10): 마지막 카드가 하단 nav에 '밀착'(가시여백 ~24px뿐) 문제 수정 —
     nav 높이(~64px+safe) 위로 넉넉한 여백(~44px)이 남도록 클리어런스를 소폭 상향.
     짧은 입력폼 페이지의 하단 '과다 공백'은 main 세로 중앙정렬로 별도 해소했으므로
     여기 상향은 스크롤형 페이지의 밀착만 완화한다(둘 충돌 없음). */
  padding-bottom: max(calc(env(safe-area-inset-bottom, 20px) + 92px), 124px) !important;
}

/* ============================================================================
   P31: 공용 토글 스위치 (체크박스 시각 피드백 버그 수정)
   네이티브 <input type="checkbox">는 WebView에서 체크 상태가 잘 보이지 않아
   "체크가 안 된다"는 혼동을 유발함. label + span 트랙/썸 구조로 감싸 항상
   명확한 on/off 시각 상태와 넓은 탭 영역을 보장한다. 기존 checkbox id/checked
   속성 및 JS(.checked 접근)는 그대로 유지되므로 페이지별 로직 수정 불필요.
   ============================================================================ */
.komei-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  cursor: pointer;
}
.komei-toggle-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.komei-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--komei-outline-variant);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease;
  pointer-events: none;
}
.komei-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
}
.komei-toggle-input:checked ~ .komei-toggle-track {
  background: var(--komei-primary);
  border-color: var(--komei-primary);
}
.komei-toggle-input:checked ~ .komei-toggle-track .komei-toggle-thumb {
  transform: translateX(18px);
}
.komei-toggle-input:focus-visible ~ .komei-toggle-track {
  outline: 2px solid var(--komei-primary);
  outline-offset: 2px;
}

/* ============================================================================
   P31: 공용 아이콘칩 + 배지필 (원형/사각 레이아웃 불일치 정리)
   아이콘은 항상 고정 크기 원형 칩에, 텍스트는 별도 pill에 담아 두 요소의
   높이/정렬 기준선을 일치시킨다.
   ============================================================================ */
.komei-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 9999px;
}
.komei-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  line-height: 1.25;
}
/* P84 §17.4: white-space:nowrap was removed here (2026-08-01) — this class is
   reused for dynamic i18n text (e.g. dashboard.js hook badges), and nowrap
   silently clipped long translated strings (confirmed: English
   "Object/Person Matching Recommendation" was cut off mid-word with no
   ellipsis). Pills now wrap to a 2nd line instead of overflowing. Callers
   that truly need a single-line fixed-width pill (short counts/timestamps)
   should add whitespace-nowrap explicitly on that instance, not rely on the
   base class. */
.komei-badge-pill {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ============================================================================
   P31: 공용 모달 닫기(X) 버튼
   ============================================================================ */
.komei-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.06);
  color: #6b6b76;
  z-index: 5;
}
.komei-modal-close:active {
  background: rgba(0, 0, 0, 0.12);
}

/* ============================================================================
   P48: 컴포넌트 3종 승격 (§9.2 참고)
   전체 화면 감사(P47)에서 2개 이상 화면에 반복 등장한 패턴을 여기로 승격.
   배경/보더/그림자처럼 이미 다른 클래스(.komei-glass, .komei-gold-line-card,
   .komei-icon-chip 등)가 책임지는 스타일은 여기서 다시 정의하지 않고, 이
   클래스들과 조합해서 쓰는 것을 전제로 한다. 크기(w-/h-)나 색상처럼 화면마다
   달라지는 값은 계속 유틸리티 클래스로 얹는다.
   ============================================================================ */

/* --- 섹션 헤더 (아이콘칩 + 타이틀/서브 + 우측 화살표·카운트) ---
   기준: dashboard.html 포토카드 컬렉션 런처 행.
   사용법: 배경/보더가 필요하면 .komei-glass 또는 .komei-gold-line-card 와
   함께 쓰고, 아이콘 원은 .komei-icon-chip(+w-/h-/bg-)를 그대로 사용한다.
   <div class="komei-section-header ...">
     <div class="komei-section-header-body">
       <div class="komei-icon-chip w-11 h-11 ...">...</div>
       <div class="komei-section-header-text">
         <h3 class="komei-section-header-title">...</h3>
         <p class="komei-section-header-sub">...</p>
       </div>
     </div>
     <span class="komei-section-header-trailing">...</span>
   </div> */
.komei-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.komei-section-header-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.komei-section-header-text {
  min-width: 0;
}
.komei-section-header-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--komei-text-primary);
}
.komei-section-header-sub {
  display: block;
  font-size: 12px;
  color: var(--komei-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.komei-section-header-trailing {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--komei-text-muted);
}

/* --- 통계 강조 카드 (큰 숫자 + 라벨 + 서브텍스트) ---
   기준: energy-compat.html 시너지 점수 카드, matching.html 매칭 점수 카드.
   배경이 필요한 화면은 .komei-glass 또는 .komei-gold-line-card로 감싸고,
   숫자 폰트 크기(text-4xl/5xl 등)는 화면 맥락에 맞게 유틸리티로 조정한다.
   <div class="komei-stat-card">
     <span class="komei-stat-card-label">...</span>
     <div class="komei-stat-card-value text-5xl">88%</div>
     <span class="komei-stat-card-sub">...</span>
   </div> */
.komei-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
}
.komei-stat-card-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
  color: var(--komei-tertiary-fixed, var(--komei-tertiary));
}
.komei-stat-card-value {
  font-family: var(--komei-font-display);
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  color: var(--komei-secondary);
  margin: 0.125rem 0;
}
.komei-stat-card-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.875rem;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--komei-element-badge-bg);
  color: var(--komei-tertiary-fixed, var(--komei-tertiary));
  border: 1px solid rgba(212, 175, 55, 0.3);
}

/* --- P164: 회전 링 모션(AURA) 컴포넌트 — 얇은 흰색 원형 + 플래시 모션 ---
   §13/§14 경쟁 레퍼런스(AURA 등) 대비 결과 점수 카드가 "정적"으로 보인다는
   피드백에 대응. .komei-stat-card-value를 감싸면 뒤에 얇은 흰색 원형 게이지 +
   그 위를 도는 작은 플래시(빛 점)가 얹혀 "지금 계산 중/살아있는" 인상을 준다.
   사용법:
   <div class="komei-aura-ring" style="--aura-pct: 92">
     <div class="komei-aura-ring-spin"></div>
     <h2 class="komei-stat-card-value ...">92</h2>
     <span class="komei-aura-ring-unit">점</span>  <!-- P165: 단위는 선택 사항,
       숫자만 원 중앙에 크게 두고 단위(점/pts/点 등)만 우측 하단에 작게 뺄 때 추가 -->
   </div>
   --aura-pct는 0~100 숫자(단위 없이). 퍼센트가 아닌 점수(예: "92점")를 표시할 때도
   시각적 게이지 채움 비율로만 사용— 텍스트는 원본 그대로 둔다.
   모션은 §6 규칙에 따라 transform만 사용(레이아웃 속성 애니메이션 없음).

   P164 변경 이유: 기존엔 컨테이너 크기가 내부 텍스트("92점")의 가로 폭에 맞춰
   자동으로 정해져(inline-flex + padding) 텍스트가 넓을수록 폭>높이가 되어
   원이 아니라 타원으로 보였다. 폭/높이를 148px로 고정하고 내부 텍스트는
   flex 중앙 정렬로 겹치게 해서, 텍스트 길이와 무관하게 항상 정원(正圓)을
   유지한다. 링 두께도 6px→2px로 얇게, 색도 금색(--komei-tertiary)에서
   흰색으로 바꿨고, 점선이 통째로 도는 대신 작은 빛 점(플래시) 하나가
   원 둘레를 도는 것으로 교체했다. */
.komei-aura-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  flex-shrink: 0;
}
.komei-aura-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: conic-gradient(#fff calc(var(--aura-pct, 100) * 1%), rgba(255, 255, 255, 0.18) 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}
.komei-aura-ring-spin {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  animation: komei-aura-spin 3.5s linear infinite;
  pointer-events: none;
}
.komei-aura-ring-spin::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.9), 0 0 18px 6px rgba(255, 255, 255, 0.45);
}
.komei-aura-ring > .komei-stat-card-value {
  position: relative;
  z-index: 1;
}
/* P165: "92점"처럼 숫자+단위를 한 덩어리로 크게 쓰지 않고, 단위(점/pts/点 등)만
   원 안쪽 우측 하단에 작게 배치할 때 쓴다. 숫자(.komei-stat-card-value)는
   그대로 원 중앙에 크게 두고, 이 span만 옆에 얹는 용도 — 사용법은
   .komei-aura-ring 컴포넌트 주석 참고. */
.komei-aura-ring-unit {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--komei-text-secondary);
}
@keyframes komei-aura-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- 빈 상태 3단 블록 (아이콘 원 + 타이틀/설명 + CTA 버튼) ---
   기준: profiles.html "프로필을 등록하면 매칭이 3초 빨라져요" 블록.
   §10 카피 지침에 따라 타이틀/설명은 긍정형·행동유도형으로 쓰고
   "없습니다/없어요" 부정형 문구는 쓰지 않는다.
   <div class="komei-empty-state">
     <div class="komei-empty-state-icon"><span class="material-symbols-outlined text-[32px]">...</span></div>
     <div class="komei-empty-state-text">
       <h3 class="komei-empty-state-title">...</h3>
       <p class="komei-empty-state-desc komei-keep-all">...</p>
     </div>
     <a class="komei-empty-state-btn">...</a>
   </div> */
.komei-empty-state {
  background: rgba(38, 31, 26, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  border-radius: var(--komei-radius-lg, 1.25rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}
html.light-mode .komei-empty-state {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.komei-empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: var(--komei-surface-low);
  color: var(--komei-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.komei-empty-state-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.komei-empty-state-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--komei-text-primary);
}
.komei-empty-state-desc {
  font-size: 12px;
  color: var(--komei-text-muted);
}
.komei-empty-state-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 44px;
  padding: 0 1.5rem;
  background: var(--komei-primary-container);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--komei-radius-md, 0.75rem);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ============================================================================
   P84 §17.4: 3열 이상 아이콘+라벨 런처의 라벨 — truncate 대신 항상 이 클래스를
   쓴다. 잘라내지 않고 2줄까지 자연스럽게 줄바꿈하며, 언어별로 1줄/2줄이 섞여도
   행 전체가 들쭉날쭉해 보이지 않도록 카드 자체에 최소 높이를 준다.
   사용법: <h4 class="komei-quick-tile-label">...</h4> (word-break/줄바꿈은
   이 클래스가 책임지므로 개별 truncate/whitespace-nowrap을 추가하지 않는다) */
.komei-quick-tile-label {
  /* P84 §17.4 재수정 (2026-08-01): -webkit-line-clamp:2는 그 자체가 2줄을
     넘는 텍스트를 말줄임(...)으로 잘라내는 트렁케이션이다 — 영어 "Fortune
     Calendar"/"AI Counselor"가 실기기에서 "Fortune Calen…"/"AI Coun…"으로
     잘리는 것을 실측으로 확인. line-clamp를 제거하고 줄 수 제한 없이 자연
     줄바꿈만 허용한다. min-height는 바닥값으로만 남겨 짧은 언어 라벨과
     길게 wrap되는 언어 라벨이 같은 행에 섞여도 카드 높이가 덜 들쭉날쭉해
     보이게 한다(§17.3) — 그래도 넘치면 카드가 더 자라도록 둔다(높이 상한 없음).
     P84 §17.4 실측 버그 #3 (2026-08-01, 영어 3열 리빌드 검증): line-clamp를
     걷어낸 뒤에도 "Calendar"/"Counselor"처럼 한 단어가 카드 텍스트 폭보다
     길면 overflow-wrap:break-word가 임의 지점("Calend"+"ar", "Counse"+"lor")
     에서 잘라 매우 어색해 보였다. word-break:keep-all은 CJK 전용이라 라틴
     단어 줄바꿈에는 관여하지 않는다. hyphens:auto로 음절 경계에서 자연스럽게
     하이픈 줄바꿈되도록 백업하고, 실제 폭 여유는 dashboard.html 쪽 폰트
     크기/패딩 조정으로 확보했다(문서 하단 §17.4 실전 사례 3번 참고). */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  line-height: 1.3;
  min-height: calc(1.3em * 2);
}

/* ============================================================================
   P97-5: 2열 리스트형 카드 그리드(사주/운세 허브 등)의 줄맞춤 보강.
   §17.3 min-h는 "행(row)" 단위로만 카드 높이를 맞춰준다 — CSS Grid의 기본
   align-items:stretch는 같은 행끼리만 키를 맞추고, 서로 다른 행(예: 1행
   토정비결/신점상담 vs 2행 택일/작명풀이)은 각자 콘텐츠 높이로 따로
   계산되어 언어별 서브텍스트 줄바꿈 수가 다르면 "2x2인데 칸 크기가 다
   제각각"으로 보이는 문제가 있었다. 서브텍스트 자체에 2줄 분량의
   min-height를 예약해 어떤 행에 있든 카드 전체 높이가 항상 동일하게
   수렴하도록 한다.
   사용법: <span class="komei-hub-tile-sub komei-keep-all">...</span> */
.komei-hub-tile-sub {
  display: block;
  line-height: 1.35;
  min-height: calc(1.35em * 2);
}

/* P97-B6: 로고 워드마크 입체감(항목6) — 너무 튀지 않게 골드 그라디언트
   fill + 얇은 하이라이트/그림자만 사용한다. */
/* P97-B12: "행성 조화 & 기운" 등 결과 헤더 카드에 스티치 플래쉬 톤의
   은은한 회전 오로라 글로우를 준다(항목12). 콘텐츠는 z-index로 위에 둔다. */
.komei-flash-header-glow {
  position: relative;
  overflow: hidden;
}
.komei-flash-header-glow::before {
  content: '';
  position: absolute;
  inset: -45% -25%;
  background: conic-gradient(from 0deg, rgba(212, 175, 55, 0.32), rgba(181, 101, 75, 0.32), rgba(212, 175, 55, 0.32));
  filter: blur(34px);
  opacity: 0.65;
  z-index: 0;
  animation: flashHeaderSpin 7s linear infinite;
}
.komei-flash-header-glow > * {
  position: relative;
  z-index: 1;
}
/* P97-B13: 12하우스 그리드 셀 높이 통일(항목13) — 5H처럼 텍스트가 길어
   2줄로 감기는 셀이 있어도 같은 행의 다른 셀과 높이가 어긋나지 않도록
   모든 셀에 동일한 min-height를 예약한다. */
/* P97-B1: 대시보드 하단 여백이 허전하다는 피드백 — 퀵런처/링크 카드들에
   스티치 영상 톤의 은은한 골드 플래쉬 펄스를 개별적으로(딜레이를 달리해)
   줘서 화면이 정적으로 비어보이지 않게 한다(항목1). */
.komei-tile-flash {
  animation: tileFlashPulse 3.2s ease-in-out infinite;
}
@keyframes tileFlashPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
  50% { box-shadow: 0 0 14px 2px rgba(212, 175, 55, 0.35); }
}

.komei-house-cell {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@keyframes flashHeaderSpin {
  to { transform: rotate(360deg); }
}

.komei-logo-3d {
  background: linear-gradient(180deg, #ebe0c2 0%, #c2a649 45%, #927230 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.4));
}

/* ============================================================================
   P84 §17.5: "플래시(Flash)" 핵심 기능 스포트라이트 — 매칭 등 핵심 기능을
   텍스트 카드 여러 장으로 나열하는 대신, 스토리형으로 자동 순환 노출한다.
   구조: 슬라이드 1장(아이콘+한줄 헤드라인+화살표) + 상단 진행 도트.
   자동 전환/스와이프 로직은 flash-carousel.js가 담당하고, 이 클래스들은
   레이아웃·모션만 책임진다. §6 규칙에 따라 transform/opacity만 애니메이션한다.
   사용법:
   <div class="komei-flash-carousel">
     <div class="komei-flash-track">
       <a class="komei-flash-slide" href="matching.html">...</a>
       <a class="komei-flash-slide" href="...">...</a>
     </div>
     <div class="komei-flash-dots"><span class="komei-flash-dot is-active"></span>...</div>
   </div> */
.komei-flash-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--komei-radius-lg, 1.25rem);
}
.komei-flash-track {
  display: flex;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.komei-flash-slide {
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.1rem 1.25rem;
  box-sizing: border-box;
}
.komei-flash-slide-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.komei-flash-slide-body {
  min-width: 0;
  flex: 1;
}
.komei-flash-slide-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--komei-text-primary);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.komei-flash-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}
.komei-flash-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.35);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.komei-flash-dot.is-active {
  background: var(--komei-tertiary, #c2a649);
  transform: scale(1.5);
}
@media (prefers-reduced-motion: reduce) {
  .komei-flash-track { transition: none; }
  .komei-flash-slide::after { animation: none !important; opacity: 0.4; }
  .komei-flash-slide.is-flash-active { animation: none !important; }
  /* P217 §1-3: 테두리 플래시/글로우도 모션 감소 설정에서 정지 */
  .komei-flash-slide--flagship { animation: none !important; }
}

/* ============================================================================
   P91-96 §18.3.2: 플래시 슬라이드 강조 glow + 진입 애니메이션.
   box-shadow를 직접 애니메이션하지 않는다(페인트 비용 큼) — 별도 ::after
   레이어의 opacity만 pulse한다. 진입 애니메이션은 flash-carousel.js가 활성
   슬라이드에 .is-flash-active를 붙였다 뗄 때만 1회 재생된다(§6: transform/
   opacity만 사용). prefers-reduced-motion 대응은 위 미디어쿼리에서 처리. */
.komei-flash-slide {
  position: relative;
}
.komei-flash-slide::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 24px 2px var(--komei-tertiary, #c2a649);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  animation: komei-flash-glow-pulse 2.4s ease-in-out infinite;
}
.komei-flash-slide-icon,
.komei-flash-slide-body {
  position: relative;
  z-index: 1;
}
.komei-flash-slide.is-flash-active {
  animation: komei-flash-enter 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes komei-flash-glow-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}
@keyframes komei-flash-enter {
  0% { opacity: 0; transform: scale(0.96); }
  60% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================================
   P97-1: 플래시 캐러셀 "flagship" 변형 — 대표 기능(카메라 오행 매칭) 슬라이드를
   "선형(그라데이션 라인)"으로 고급화한다. 새 색상을 만들지 않고 기존
   --komei-tertiary(골드)→--komei-primary(퍼플) 토큰만으로 그라데이션을
   구성해 다른 화면의 골드라인 지침과 팔레트를 통일한다.
   사용법: <a class="komei-flash-slide komei-flash-slide--flagship" ...> */
.komei-flash-slide--flagship {
  /* P97: --komei-primary/-tertiary는 사용자의 개인 오행 테마(목/화/토/금/수)에
     따라 element-theme.js가 색을 바꿔치기하는 "동적" 토큰이다 — 목(초록)
     테마인 사용자에게는 이 그라데이션이 골드→초록으로 보여 "골드→퍼플
     선형 고급화" 의도가 깨졌다. 브랜드 플래그십 강조는 개인 오행과 무관하게
     항상 동일해야 하므로 고정 골드/퍼플 hex 값을 직접 사용한다. */
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #c2a649 0%, #b5654b 100%);
  /* P217 §1-3: 사용자 요청 "플래시 효과를 테두리도 해라" — 정적이던 테두리를
     밝게 반짝이도록 border-color를 애니메이션한다. border-color는 레이아웃에
     영향 없는 paint-only 속성이라 §6(transform/opacity 우선) 취지와 충돌하지
     않는다. glow-pulse와 같은 2.8s 주기로 동기화해 한 박자로 반짝인다. */
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  animation: komei-flagship-glow-pulse 2.8s ease-in-out infinite,
             komei-flagship-border-flash 2.8s ease-in-out infinite;
}
.komei-flash-slide--flagship::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: komei-flagship-shimmer-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.komei-flash-slide--flagship .komei-flash-slide-title {
  color: #fff;
  position: relative;
  z-index: 2;
}
.komei-flash-slide--flagship .komei-flash-slide-icon {
  background: rgba(255, 255, 255, 0.22);
  position: relative;
  z-index: 2;
}
.komei-flash-slide--flagship .material-symbols-outlined {
  color: #fff;
  position: relative;
  z-index: 2;
}
.komei-flash-slide--flagship::after {
  box-shadow: 0 0 28px 4px rgba(212, 175, 55, 0.55);
}

@keyframes komei-flagship-shimmer-sweep {
  0% { left: -75%; }
  60%, 100% { left: 125%; }
}
/* P217 §1-3: 플래그십 카메라 CTA 카드의 테두리 플래시(반짝임). 흰빛과 밝은
   골드 사이를 오가며 테두리가 살아 있는 느낌을 준다. */
@keyframes komei-flagship-border-flash {
  0%, 100% { border-color: rgba(255, 255, 255, 0.30); }
  45%      { border-color: rgba(245, 217, 122, 0.95); }
  55%      { border-color: rgba(255, 255, 255, 0.95); }
}
/* P203 (2026-08-04): 홈 화면 AI 상담사 티저 카드 — 존재감을 위한 은은한 펄스.
   플래그십(카메라 CTA)만큼 화려하면 시선을 뺏으므로 훨씬 절제된 톤. */
.komei-ai-teaser {
  animation: komei-ai-teaser-pulse 3.4s ease-in-out infinite;
}
@keyframes komei-ai-teaser-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181, 101, 75, 0.25); }
  50% { box-shadow: 0 0 14px 2px rgba(181, 101, 75, 0.35); }
}

@keyframes komei-flagship-glow-pulse {
  /* P200 (2026-08-04): "테두리 플래시를 더 눈에 띄게" 피드백 — 반경/불투명도를
     약 25~30% 키워 카드 가장자리 발광이 더 뚜렷하게 느껴지도록 보강. */
  0%, 100% {
    box-shadow: 0 0 18px 3px rgba(212, 175, 55, 0.55), 0 0 28px 4px rgba(181, 101, 75, 0.45);
  }
  50% {
    box-shadow: 0 0 36px 9px rgba(212, 175, 55, 0.85), 0 0 46px 11px rgba(181, 101, 75, 0.75);
  }
}

/* ============================================================================
   P97-7: 수집형 포토카드 컴포넌트 — "글도 그림도 다 깨진다"는 피드백의 원인은
   grid-cols-5(카드 폭 ~75px)에 아이콘+등급뱃지+긴 해금조건 문장을 욱여넣은
   것이었다. 3열로 넓혀 "썸네일 존"과 "텍스트 존"을 명확히 분리한다:
   상단 60%는 카드 아트(아이콘+그라데이션)만, 하단은 등급 라벨 1줄 뿐이고
   해금조건 같은 긴 문장은 카드 안에 넣지 않는다(필요하면 탭 시 별도 안내).
   사용법: <div class="komei-collectible-card">
             <div class="komei-collectible-art">...아이콘/등급뱃지...</div>
             <div class="komei-collectible-label">...짧은 라벨 1줄...</div>
           </div> */
.komei-collectible-card {
  aspect-ratio: 3 / 4;
  border-radius: var(--komei-radius-md, 0.9rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  background: var(--komei-surface-low);
}
.komei-collectible-art {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.komei-collectible-rarity-chip {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}
.komei-collectible-label {
  flex: 0 0 auto;
  padding: 5px 6px 7px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  color: var(--komei-text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* P97-B3(항목3 재지적): "미리보기 해라 → 노출시켜서 가져가고 싶게
   만들라"는 피드백. 잠긴 카드를 흐림/그레이스케일로 가리는 대신 테마
   아이콘과 색상을 완전히 노출해(같은 밝기의 "카드 미리보기") 수집욕을
   자극한다. 자물쇠는 우측 하단 작은 배지로만 남기고, 좌측 상단에는
   "미리보기" 리본을 달아 지금 보이는 아트가 해금 후 그대로 내 것이
   된다는 걸 알려준다. */
.komei-collectible-icon-big {
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
/* P97-8: 실제 일러스트 에셋이 준비된 테마(hanbok/royal/hangeul 등)는 CSS
   패턴+아이콘 대신 이 <img>가 아트 영역을 꽉 채운다. 카드 자체(overflow:
   hidden)가 라운드 코너를 잘라주므로 이미지는 inset:0 + object-fit:cover만
   하면 된다. 등급뱃지/잠금뱃지/미리보기 리본은 z-index:1이라 항상 위에 뜬다. */
.komei-collectible-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.komei-collectible-card.is-locked .komei-collectible-art {
  filter: none;
}
.komei-collectible-card.is-locked .komei-collectible-icon-big {
  opacity: 1;
  transform: none;
}
.komei-collectible-card.is-locked .komei-collectible-rarity-chip {
  opacity: 1;
}
.komei-collectible-preview-ribbon {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 9999px;
  color: #1a1a1a;
  background: linear-gradient(120deg, var(--komei-tertiary, #c2a649), #ddcb98);
  white-space: nowrap;
  z-index: 1;
}
.komei-collectible-lock-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* P97-C(항목2 재지적): "포토카드는 디자인까지 완료해서 보이게 하라 — 크게
   확장해서는 못 보지만 미리보기처럼 카드에 디자인을 넣으라"는 피드백.
   36장 전부에 실제 일러스트를 그려 넣을 수는 없으므로, 테마 패턴 배경
   (kculture-cards-data.js의 themePattern, photocards.js가 인라인 스타일로
   주입)에 "등급이 오를수록 카드가 화려해진다"는 가챠 게임 문법의 테두리·
   광채·홀로그램 escalation을 얹어 6단계가 한눈에 달라 보이게 한다. */
.komei-collectible-card[data-rarity="common"] {
  border-color: rgba(255, 255, 255, 0.14);
}
.komei-collectible-card[data-rarity="uncommon"] {
  border-color: color-mix(in srgb, var(--komei-card-accent, #fff) 35%, transparent);
}
.komei-collectible-card[data-rarity="rare"] {
  border-color: color-mix(in srgb, var(--komei-card-accent, #fff) 55%, transparent);
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--komei-card-accent, #fff) 45%, transparent);
}
.komei-collectible-card[data-rarity="epic"] {
  border-color: color-mix(in srgb, var(--komei-card-accent, #fff) 75%, transparent);
  box-shadow: 0 0 14px -1px color-mix(in srgb, var(--komei-card-accent, #fff) 55%, transparent);
}
.komei-collectible-card[data-rarity="epic"] .komei-collectible-art {
  filter: saturate(1.15);
}
.komei-collectible-card[data-rarity="legendary"] {
  border: 1px solid transparent;
  background: linear-gradient(var(--komei-surface-low), var(--komei-surface-low)) padding-box,
              linear-gradient(135deg, var(--komei-tertiary, #c2a649), #ddcb98, var(--komei-tertiary, #c2a649)) border-box;
  box-shadow: 0 0 18px -2px rgba(212, 175, 55, 0.55);
}
.komei-collectible-card[data-rarity="legendary"] .komei-collectible-art {
  filter: saturate(1.3);
}
.komei-collectible-card[data-rarity="mythic"] {
  border: 1px solid transparent;
  background: linear-gradient(var(--komei-surface-low), var(--komei-surface-low)) padding-box,
              linear-gradient(135deg, #ddcb98, #d3847b, #b5654b, #c9a24b, #ddcb98) border-box;
  box-shadow: 0 0 22px -1px rgba(245, 215, 128, 0.6);
}
.komei-collectible-card[data-rarity="mythic"] .komei-collectible-art {
  filter: saturate(1.45);
  overflow: hidden;
}
.komei-collectible-card[data-rarity="mythic"] .komei-collectible-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  background-size: 220% 220%;
  animation: komei-holo-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes komei-holo-sweep {
  0% { background-position: 160% 160%; }
  100% { background-position: -60% -60%; }
}
@media (prefers-reduced-motion: reduce) {
  .komei-collectible-card[data-rarity="mythic"] .komei-collectible-art::after {
    animation: none;
  }
}

/* ============================================================================
   P91-96 §18.1.1: 사주 명조(8자) 카드 그리드 — 4기둥(년/월/일/시) x 2행
   (천간/지지). 일주(3번째 열)는 본인 기준 기둥이라 tertiary 테두리로 강조.
   셀 배경/텍스트 색은 해당 글자의 오행 토큰(--komei-{element}-light/-primary,
   66~99행)을 그대로 쓴다 — 새 색상 팔레트를 만들지 않는다.
   사용법: <div class="komei-palja-grid"><span class="komei-palja-col-label">...
   <div class="komei-palja-cell komei-palja-cell--fire is-day-pillar">丙</div> */
.komei-palja-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.komei-palja-col-label {
  text-align: center;
  font-size: 11px;
  color: var(--komei-text-muted);
  padding-bottom: 4px;
  word-break: keep-all;
}
.komei-palja-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--komei-radius-md, 0.75rem);
  font-family: var(--komei-font-display, serif);
  font-size: clamp(20px, 6.5vw, 30px);
  font-weight: 700;
  border: 1.5px solid transparent;
}
.komei-palja-cell.is-day-pillar {
  border-color: var(--komei-tertiary);
}
.komei-palja-cell--wood  { background: var(--komei-wood-light);  color: var(--komei-wood-primary); }
.komei-palja-cell--fire  { background: var(--komei-fire-light);  color: var(--komei-fire-primary); }
.komei-palja-cell--earth { background: var(--komei-earth-light); color: var(--komei-earth-primary); }
.komei-palja-cell--metal { background: var(--komei-metal-light); color: var(--komei-metal-primary); }
.komei-palja-cell--water { background: var(--komei-water-light); color: var(--komei-water-primary); }
.komei-palja-cell {
  position: relative;
}
.komei-palja-cell-tag {
  /* §18.5 접근성: 셀 배경색(오행)만으로 구분하지 않도록 1자 한자 오행명을
     코너에 병기한다(색맹 대응). */
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 9px;
  font-weight: 500;
  opacity: 0.75;
  font-family: var(--komei-font-body);
}

/* ============================================================================
   P91-96 §18.1.2: 오행 분포 도넛. SVG <circle> 5개를 pathLength="100" 트릭으로
   쌓아 퍼센트를 그대로 dasharray/dashoffset 값으로 쓴다(원주 직접 계산 불필요).
   진입 애니메이션은 JS가 dasharray를 "0 100"→"목표값 100"으로 1회 바꿔
   아래 transition으로 재생한다(반복 없음). 레이더 보조뷰는 .is-radar-active일
   때만 노출한다(§18.0 수정안 2: 레이더 기본 숨김). */
.komei-element-donut {
  display: flex;
  align-items: center;
  gap: 16px;
}
.komei-element-donut-svg-wrap {
  position: relative;
  width: 116px;
  height: 116px;
  flex-shrink: 0;
}
.komei-element-donut-svg circle {
  transition: stroke-dasharray 600ms ease-out;
}
.komei-element-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.komei-element-donut-center-char {
  font-family: var(--komei-font-display, serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--komei-text-primary);
}
.komei-element-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.komei-element-donut-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--komei-text-secondary);
}
.komei-element-donut-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.komei-element-donut-pct {
  margin-left: auto;
  font-weight: 700;
  color: var(--komei-text-primary);
}
.komei-element-radar-toggle {
  font-size: 11px;
  color: var(--komei-text-muted);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  min-height: 44px; /* §18.4 예외1: 터치 타겟은 8px 배수 예외 */
  display: inline-flex;
  align-items: center;
}

/* ============================================================================
   P91-96 §18.1.3: 반원 게이지. 기존 .komei-aura-ring(원형, --aura-pct 패턴,
   477행)의 반원 변형 — 새 메커니즘을 만들지 않고 pathLength=100 트릭만 추가.
   진입 애니메이션은 1회만 실행(반복 금지, 배터리 절약). */
.komei-gauge-half {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.komei-gauge-half-svg {
  width: 140px;
  height: auto;
  overflow: visible;
}
.komei-gauge-half-track {
  fill: none;
  stroke: var(--komei-surface-low);
  stroke-width: 10;
  stroke-linecap: round;
}
.komei-gauge-half-fill {
  fill: none;
  stroke: var(--komei-tertiary);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dasharray 700ms ease-out;
}
.komei-gauge-half-center {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: -34px;
}
.komei-gauge-half-value {
  font-family: var(--komei-font-display, serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--komei-text-primary);
}
.komei-gauge-half-unit {
  font-size: 14px;
  color: var(--komei-text-muted);
}
/* P97: 반원 게이지 compact 변형. transform:scale()은 레이아웃 박스 크기를
   줄이지 않아(시각적으로만 축소) flex 형제(제목 텍스트)가 원래 140px 폭을
   그대로 내주며 영어 등 긴 텍스트에서 한 글자씩 줄바꿈되는 버그가 있었다
   (§17.4 트렁케이션 금지 위반). transform 대신 실제 width를 줄여 flex 레이아웃이
   정확한 공간을 계산하도록 수정. */
.komei-gauge-half--compact {
  /* 컨테이너 자체의 width를 고정하지 않으면 grade label(예: "Highly Auspicious
     Name")이 줄바꿈되지 않고 flex column이 그 텍스트의 자연 폭까지 넓어져,
     형제인 제목 flex 아이템이 거의 0폭으로 짓눌리는 문제가 있었다. */
  width: 100px;
  flex: 0 0 100px;
}
.komei-gauge-half--compact .komei-gauge-half-svg {
  width: 100px;
}
.komei-gauge-half--compact .komei-gauge-half-center {
  margin-top: -24px;
  gap: 1px;
}
.komei-gauge-half--compact .komei-gauge-half-value {
  font-size: 28px;
}
.komei-gauge-half--compact .komei-gauge-half-unit {
  font-size: 10px;
}

/* ============================================================================
   P91-96 §18.1.5: 카테고리별 운세 카드(재물/연애/건강/직업 등). 서술문 없이
   아이콘+진행바+짧은 배지로만 구성한다. 라벨은 komei-keep-all 필수(§17.4).
   배지는 white-space:nowrap을 쓰지 않는다 — §17.4 실전 사례 1번(.komei-badge-pill
   nowrap 잘림 버그)이 재발하지 않도록, 배지 텍스트는 애초에 짧게 설계하고
   줄바꿈을 허용한다. */
.komei-fortune-category-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--komei-radius-md, 0.75rem);
  background: var(--komei-surface-low);
}
.komei-fortune-category-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.komei-fortune-category-label {
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 40px;
  max-width: 64px;
}
.komei-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.komei-progress-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 600ms ease-out;
}
.komei-fortune-category-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  flex-shrink: 0;
  word-break: keep-all;
}

/* ============================================================================
   P91-96 §18.1.4: 대운/세운 스텝 타임라인. 연도별 종합운 스코어 산출 로직이
   아직 미정(§18.7)이라 라인그래프 대신 미니 세로 바로 강약만 표현한다.
   현재 연도는 tertiary 테두리로 강조(색상만으로 구분하지 않고 테두리+scale
   병행). */
.komei-fortune-timeline {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.komei-fortune-timeline-step {
  flex: 0 0 auto;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: var(--komei-radius-md, 0.75rem);
  background: var(--komei-surface-low);
  border: 1.5px solid transparent;
}
.komei-fortune-timeline-step.is-current {
  border-color: var(--komei-tertiary);
  transform: scale(1.05);
}
.komei-fortune-timeline-year {
  font-size: 10px;
  color: var(--komei-text-muted);
}
.komei-fortune-timeline-bar-track {
  width: 8px;
  height: 32px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.komei-fortune-timeline-bar-fill {
  width: 100%;
  border-radius: 9999px;
  background: var(--komei-tertiary);
}

/* ============================================================================
   P217 §1-1: 일본어(ja)/중국어(zh) 줄바꿈 오버플로("롤링") 수정
   ----------------------------------------------------------------------------
   body(line 249)와 여러 컴포넌트 클래스(.komei-keep-all, .komei-badge-pill,
   .komei-quick-tile-label, .komei-flash-slide-title, .komei-palja-col-label,
   .komei-fortune-category-badge 등)가 word-break:keep-all을 쓴다. keep-all은
   어절 사이 공백이 있는 한국어에는 옳지만, 공백이 없는 일본어/중국어에서는
   래핑 지점이 사라져 텍스트가 컨테이너를 넘어 밀리는(롤링) 버그를 유발한다
   (설정 화면 토글 행에서 특히 심함). i18n.js가 런타임에 <html lang>을 갱신하므로
   :lang()으로 이 두 언어에서만 word-break를 normal로 되돌린다. 한국어(ko)는
   keep-all을 유지(어절 보존). 라틴 계열(en/vi/hi)은 keep-all이 normal처럼
   동작하므로 무관. overflow-wrap:break-word는 그대로라 긴 라틴 토큰은 계속 안전.
   이 블록은 파일 최하단에 두어 위의 모든 keep-all(specificity 0,1,0)을 소스
   순서로, body(0,0,1)는 specificity로 override한다. ============================ */
:lang(ja),
:lang(zh) {
  word-break: normal;
}

/* ============================================================================
   P218: 로컬라이제이션 타이포그래피 모듈 — 언어별 조판 관습대로 텍스트를 배치해
   "기계번역/외국 앱" 티가 나지 않게 한다. i18n.js가 <html lang>을 런타임 갱신하므로
   :lang()으로 타깃. (번역 문구 자체의 원어민 품질은 생성 단계의 원어민 검수 패스로
   보강 — 이 CSS는 '렌더/줄바꿈' 층을 담당한다.)
   ----------------------------------------------------------------------------
   태국어(th): 단어 사이 공백이 없어 keep-all이면 절대 안 된다(줄바꿈 지점이
   사라져 컨테이너를 넘거나, break-word면 음절/성조 클러스터 중간이 잘려 매우
   어색해진다). 브라우저(Chromium WebView)의 ICU 태국어 사전 분절에 맡기도록
   word-break:normal + line-break:normal. 성조/상하 모음 기호가 쌓여 행간이 좁으면
   겹쳐 보이므로 line-height를 넉넉히 준다. Thai 글리프는 시스템 태국어 글꼴로
   자동 폴백되지만 일관성을 위해 스택 명시. (인니어 id 등 라틴 계열은 표준으로 충분.)
   ============================================================================ */
:lang(th) {
  word-break: normal;
  line-break: normal;
  overflow-wrap: normal;
}
:lang(th) .komei-keep-all {
  word-break: normal;
  overflow-wrap: normal;
}
body:lang(th),
:lang(th) body {
  line-height: 1.72;
  font-family: "Noto Sans Thai", "Sarabun", "Leelawadee UI", var(--komei-font-body, sans-serif);
}
/* 좁은 UI(배지/타일 라벨)에서 태국어가 넘칠 때 최후 방어: 클러스터 경계 우선
   유지하되 불가피하면 줄바꿈 허용(오버플로보다 낫다). */
:lang(th) .komei-badge-pill,
:lang(th) .komei-quick-tile-label,
:lang(th) .komei-fortune-category-badge {
  overflow-wrap: anywhere;
}

/* ============================================================================
   P218: 대시보드 궤도 히어로 — 6개 핵심 기능을 원형으로 배치, 느린 회전(아이콘은
   counter-spin으로 항상 정립), prefers-reduced-motion 대응. 사용자 제공 컴포넌트.
   ============================================================================ */
.komei-orbit-hero {
  position: relative;
  width: min(80vw, 300px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 2.75rem;
  animation: komeiOrbitEnter .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes komeiOrbitEnter {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.komei-orbit-ring {
  position: absolute; inset: 0;
  border: 1.5px dashed rgba(232,199,102,0.4);
  border-radius: 50%;
}
.komei-orbit-center {
  position: absolute; top: 50%; left: 50%;
  width: 26%; aspect-ratio: 1/1;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--komei-tertiary) 0%, transparent 72%);
  animation: komeiOrbitGlow 3.2s ease-in-out infinite alternate;
}
@keyframes komeiOrbitGlow {
  0%   { opacity: .65; transform: translate(-50%,-50%) scale(.92); }
  100% { opacity: 1;   transform: translate(-50%,-50%) scale(1.08); }
}
.komei-orbit-spin {
  position: absolute; inset: 0;
  animation: komeiOrbitSpin 70s linear infinite;
}
.komei-orbit-anchor {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  transform: rotate(var(--angle)) translate(100px);
}
.komei-orbit-badge {
  position: absolute; top: -19px; left: -28px;
  width: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transform: rotate(calc(-1 * var(--angle)));
  animation: komeiOrbitCounterSpin 70s linear infinite;
}
.komei-orbit-badge-circle {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--bd); color: var(--c);
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
}
.komei-orbit-badge-label {
  font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--komei-text-primary);
  background: var(--komei-bg);
  padding: 2px 6px; border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
@keyframes komeiOrbitSpin        { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes komeiOrbitCounterSpin { from { transform: rotate(calc(-1 * var(--angle))); } to { transform: rotate(calc(-1 * var(--angle) - 360deg)); } }
@media (prefers-reduced-motion: reduce) {
  .komei-orbit-hero, .komei-orbit-spin, .komei-orbit-badge, .komei-orbit-center {
    animation: none !important;
  }
}

/* ============================================================================
   P218: K·JUM 고유 인장(印) 마크 — 범용 auto_awesome(반짝임) 전수 대체.
   SVG 실루엣을 mask로 씌우고 currentColor로 채워, 기존 text-[Npx]/색상 클래스를
   그대로 재사용(1em 크기). 자산: assets/brand/icon-mark.svg
   ============================================================================ */
.komei-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url('assets/brand/icon-mark.svg');
  mask-image: url('assets/brand/icon-mark.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: -0.15em;
}

/* ── 접근성 '글자 크기: 크게' 모드 (a11y.js가 html.komei-a11y 부여) ────────── */
html.komei-a11y body { zoom: 1.1; overflow-x: hidden; } /* 배율은 실기기 튜닝값 */
/* 고대비 부스트(노안 가독성, 40인 감사 시니어 반영): 큰글씨 모드에서 뮤트/보조
   텍스트 색을 밝게 재정의 → 변수 캐스케이드로 전 페이지에 저위험 적용. */
html.komei-a11y {
  --komei-text-secondary: #e6e1f2;
  --komei-text-muted: #d3c3a8;
  --komei-tertiary-fixed: #c8ab5a;
  --komei-text-muted-fixed: #d3c3a8;
}
html.komei-a11y .a11y-hanja { font-size: 0.82em; opacity: 0.55; }
.a11y-term { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; }
html.komei-a11y .a11y-term { border-bottom: 1px dotted currentColor; cursor: pointer; }
.a11y-tip { display: none; position: fixed; z-index: 9999; max-width: 280px;
  background: var(--komei-surface-high, #221a2c); border: 1px solid var(--komei-outline-variant, #2e2740);
  border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); color: var(--komei-text-primary, #ece7f2); }
.a11y-tip b { display: block; font-size: 13px; color: var(--komei-tertiary-fixed, #d4bc80); margin-bottom: 4px; }
.a11y-tip p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--komei-text-secondary, #cbc4d8); }
.a11y-tip-close { display: block; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--komei-tertiary-fixed, #d4bc80); background: none; border: 0; padding: 4px 6px; cursor: pointer; }
/* 접근성 글자 크기 2단 세그먼트(설정) */
.a11y-seg { display: inline-flex; border: 1px solid var(--komei-outline-variant, #2e2740); border-radius: 999px; overflow: hidden; }
.a11y-seg-btn { padding: 7px 16px; font-size: 13px; font-weight: 600; background: transparent; border: 0; color: var(--komei-text-secondary, #cbc4d8); cursor: pointer; }
.a11y-seg-btn.is-active { background: var(--komei-tertiary, #b8923f); color: var(--komei-bg, #0e0b14); }
/* 공유 카드 미리보기 오버레이 (share-card.js) */
.kjum-share-ov{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.82);backdrop-filter:blur(4px);flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;overflow-y:auto;}
.kjum-share-img{width:min(80vw,320px);height:auto;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.6);}
.kjum-share-cap{font-size:12px;color:#cbc4d8;text-align:center;max-width:320px;line-height:1.5;margin:0;}
.kjum-share-row{display:flex;gap:10px;}
.kjum-share-do{padding:11px 26px;border-radius:12px;border:0;background:var(--komei-tertiary,#b8923f);color:var(--komei-bg,#0e0b14);font-weight:700;font-size:14px;}
.kjum-share-close{padding:11px 26px;border-radius:12px;border:1px solid var(--komei-outline-variant,#2e2740);background:transparent;color:var(--komei-text-secondary,#cbc4d8);font-weight:600;font-size:14px;}


/* ========================================================================
   프리빌드 tailwind.min.css 미빌드 arbitrary 유틸 보강
   (tools/check-tailwind.js 검출, 2026-08-10) — P217 근본원인의 일반 해법.
   프리빌드 CSS는 JIT가 아니라 arbitrary 값·opacity 수식(/15 등) 유틸을 생성하지
   못한다. 해당 클래스를 이미 쓰고 있던 마크업이 무성 무효였던 것을, tailwind.min.css
   뒤에 로드되는 이 파일에서 명시 정의해 살린다. color-mix는 Android WebView 지원.
   ======================================================================== */
.z-\[60\]{z-index:60}
.z-\[61\]{z-index:61}
.max-h-\[85vh\]{max-height:85vh}
.max-w-\[340px\]{max-width:340px}
.w-\[38\%\]{width:38%}
.min-h-\[64px\]{min-height:64px}
.min-h-\[74px\]{min-height:74px}
.text-\[22px\]{font-size:22px}
.bg-\[var\(--komei-outline-variant\)\]{background-color:var(--komei-outline-variant)}
.bg-\[var\(--komei-primary\)\]\/15{background-color:color-mix(in srgb,var(--komei-primary) 15%,transparent)}
.bg-\[var\(--komei-surface-low\)\]\/60{background-color:color-mix(in srgb,var(--komei-surface-low) 60%,transparent)}
.border-\[var\(--komei-outline-variant\)\]\/60{border-color:color-mix(in srgb,var(--komei-outline-variant) 60%,transparent)}
.text-\[var\(--komei-tertiary-fixed\)\]\/90{color:color-mix(in srgb,var(--komei-tertiary-fixed) 90%,transparent)}
.text-\[var\(--komei-error\)\]{color:var(--komei-error)}
.border-\[var\(--komei-tertiary\)\]\/25{border-color:color-mix(in srgb,var(--komei-tertiary) 25%,transparent)}


/* ===== Phase3a-2: 프리빌드 tailwind.min.css 미빌드 유틸 보강 + 고정높이 텍스트 겹침(사각 테두리에 물림) 전수 수정 =====
   min-h-* 를 쓴 요소는 '2줄 텍스트가 잘리지 않고 자라라'는 의도이므로, 함께 걸린 고정 height(h-14 등)를
   auto로 풀어 min-height를 바닥값으로 성장하게 한다. (cta-fixed-height-text-collision / prebuilt-tailwind-missing-classes) */
.min-h-12{ min-height:3rem !important; height:auto !important; }
.min-h-14{ min-height:3.5rem !important; height:auto !important; }
.min-h-16{ min-height:4rem !important; height:auto !important; }
.pt-28{ padding-top:7rem !important; }
.pt-32{ padding-top:8rem !important; }


/* ===== onboarding 임의값(arbitrary) tailwind 클래스 보강 =====
   CDN(cdn.tailwindcss.com) 제거로 로컬 프리빌드 tailwind.min.css를 쓰는데, 프리빌드는 JIT
   arbitrary([..]) 클래스를 미빌드해 무효가 된다. 온보딩이 쓰는 14종을 명시 정의(오프라인 견고성). */
.text-\[11px\]{font-size:11px}
.text-\[12px\]{font-size:12px}
.text-\[13px\]{font-size:13px}
.text-\[16px\]{font-size:16px}
.text-\[18px\]{font-size:18px}
.text-\[20px\]{font-size:20px}
.text-\[40px\]{font-size:40px}
.text-\[var\(--komei-tertiary\)\]{color:var(--komei-tertiary)}
.text-\[var\(--komei-primary-fixed\)\]{color:var(--komei-primary-fixed)}
.border-\[var\(--komei-tertiary\)\]{border-color:var(--komei-tertiary)}
.focus\:border-\[var\(--komei-tertiary\)\]:focus{border-color:var(--komei-tertiary)}
.tracking-\[0\.25em\]{letter-spacing:0.25em}
.from-\[var\(--komei-primary-container\)\]{--tw-gradient-from:var(--komei-primary-container);--tw-gradient-to:rgb(0 0 0 / 0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-\[var\(--komei-primary-deep\)\]{--tw-gradient-to:var(--komei-primary-deep)}
.active\:scale-\[0\.98\]:active{--tw-scale-x:.98;--tw-scale-y:.98;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

/* ── 다국어 레이아웃 보정 (2026-09-06) ─────────────────────────────────────
   실측: 한국어 대비 평균 길이 배율 id 2.39 · th 2.20 · vi 2.19 · en 2.12 · hi 2.08.
   헤더 제목은 대부분 `truncate`(한 줄 + 말줄임)라 vi/id/th에서 제목이 잘려
   무슨 화면인지 못 읽는 사고가 난다(예: "생활 속 오행 지혜" 10자 → id 48자).
   번역이 장황한 게 아니라 언어 특성이므로, 자르지 말고 줄여서 두 줄까지 허용한다.
   화면 41개의 마크업을 각각 고치지 않고 이 한 곳으로 처리한다. */
h1[data-i18n$="headerTitle"],
h1[data-i18n$="HeaderTitle"] {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.22;
  word-break: keep-all;
}
/* 폰트 축소는 실제로 길어지는 언어에만. ko/ja/zh는 16px 원본 유지(가독성 회귀 방지). */
html[lang="en"] h1[data-i18n$="headerTitle"],
html[lang="vi"] h1[data-i18n$="headerTitle"],
html[lang="hi"] h1[data-i18n$="headerTitle"],
html[lang="th"] h1[data-i18n$="headerTitle"],
html[lang="id"] h1[data-i18n$="headerTitle"] {
  font-size: clamp(12.5px, 3.5vw, 15px) !important;
}

/* 태국어·힌디는 성조부호·마트라가 위아래로 쌓여 촘촘한 행간에서 윗부분이 잘린다.
   시스템 폰트 폴백을 쓰므로(번들 폰트는 라틴 전용) 행간을 넉넉히 준다. */
html[lang="th"] body, html[lang="hi"] body { line-height: 1.65; }
html[lang="th"] .leading-snug, html[lang="hi"] .leading-snug { line-height: 1.55 !important; }
html[lang="th"] .leading-relaxed, html[lang="hi"] .leading-relaxed { line-height: 1.9 !important; }
html[lang="th"] h1, html[lang="hi"] h1,
html[lang="th"] h2, html[lang="hi"] h2 { line-height: 1.4 !important; }

/* 길어지는 언어에서 칩·버튼이 한 줄로 눌리지 않게 — 잘림 대신 줄바꿈 허용 */
html[lang="id"] .truncate, html[lang="vi"] .truncate,
html[lang="th"] .truncate, html[lang="hi"] .truncate {
  white-space: normal;
  text-overflow: clip;
}

/* ── P219 인텐트 네비게이션 그룹 헤더 (2026-09-06) ─────────────────────
   대시보드 홈을 술법 분류가 아니라 '온 이유'(사람/때/나/재미)로 묶으면서
   추가된 소제목. tailwind 프리빌드에 pl-0.5가 없어 유틸리티 조합 대신
   전용 클래스로 정의한다(무음 실패 방지).
   scroll-margin-top: 상단 고정 헤더가 있어 #nav-* 앵커로 점프하면 제목이
   헤더 아래로 숨는다. 헤더 높이만큼 여백을 줘서 제목부터 보이게 한다. */
.komei-nav-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  padding-left: 2px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--komei-tertiary-fixed, #d8b24a);
  scroll-margin-top: 76px;
}
.komei-nav-group-head--first { padding-top: 6px; }
.komei-nav-group-head .material-symbols-outlined { font-size: 14px; flex-shrink: 0; }
/* 태국어·힌디어는 성조/모음 부호가 위아래로 쌓여 11px 한 줄에서 잘린다 */
html[lang="th"] .komei-nav-group-head,
html[lang="hi"] .komei-nav-group-head { line-height: 1.7; }