/* 명리AI — 통합 스타일시트 */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* ══════════════════════════════════════════════════════════════════
       Z1 — 라이트 베이스 토큰 통일 (2026-05-27)
       원칙: 레거시 토큰 삭제 금지, 신규 토큰으로 리다이렉트
    ══════════════════════════════════════════════════════════════════ */

    /* ── Point (강조 단 1색) ────────────────────────────────────────── */
    --color-point:            #DF5C3F;
    --color-point-hover:      #C94A2E;
    --color-point-mute:       #DF5C3FCC;
    --color-point-soft:       #FBEEE9;   /* 오렌지 약한 배경 */

    /* ── Backgrounds (라이트 베이스 통일 — 양 채널 공통) ────────────── */
    --color-bg:              #F7F4EB;   /* 메인 배경 */
    --color-bg-card:         #FCFAF4;   /* 카드 본체 — 랜딩 종이톤 */
    --color-bg-elevated:     #F7F4EB;   /* 헤더·sticky */
    --color-bg-soft:         #F1ECDF;   /* 구분 영역 — 종이보다 한 톤 진하게 */

    /* ── Inverse (강조용 다크 — AI sticky 바·콜아웃만) ─────────────── */
    --color-bg-inverse:      #10271F;
    --color-bg-inverse-soft: #1B3B30;

    /* ── Text (3단계) ───────────────────────────────────────────────── */
    --color-text-strong:      #10271F;   /* 헤드라인·중요 */
    --color-text-base:        #44564D;   /* 본문 기본 — 랜딩 .hero-description */
    --color-text-mute:        #6E746C;   /* 보조·라벨·캡션 */
    --color-text-soft:        #98A09A;   /* 가장 옅은 보조 */

    /* ── Text on Inverse ────────────────────────────────────────────── */
    --color-text-on-inverse:      #F2EFE4;
    --color-text-on-inverse-mute: #98A09A;
    /* @deprecated → var(--color-text-on-inverse) */
    --color-text-on-ink:      var(--color-text-on-inverse);
    --color-text-on-ink-mute: var(--color-text-on-inverse-mute);

    /* ── Lines ──────────────────────────────────────────────────────── */
    /* 2026-08-14 홈(landing.css) 색감으로 통일 — 잉크 알파 선 */
    --color-line:             rgba(16,39,31,.16);   /* 라이트 배경 기본 구분선 */
    --color-line-light:       rgba(16,39,31,.10);   /* 옅은 선 */
    --color-line-strong:      rgba(16,39,31,.28);   /* 강조 구분선 */
    --color-sand:             #E7DECA;              /* 랜딩 sand */
    --color-line-inverse:     #2C4C3F;   /* 잉크 위 구분선 */
    /* @deprecated → var(--color-line) */
    --color-line-paper:       var(--color-line);

    /* ── Semantic (최소 — 1색씩) ────────────────────────────────────── */
    --color-error:            #C03030;
    --color-success:          #2E8B57;
    --color-warning:          #E0A030;

    /* ── 호환 별칭 — 기존 var(--color-ink/paper/surface) 참조 유지 ─── */
    --color-ink:     var(--color-bg-inverse);      /* = #10271F */
    --color-surface: var(--color-bg-inverse-soft); /* = #1B3B30 */
    --color-paper:   var(--color-bg-card);         /* = #FFFFFF */
    --color-paper-soft: var(--color-bg-soft);      /* = #EFE9DA */

    /* ── 레거시 토큰 → 신규 토큰 리다이렉트 (@deprecated) ───────────── */
    /* body { background: var(--bg) } 등 기존 참조 유지용 */
    --bg:         var(--color-bg);           /* #F7F4EB — 라이트로 전환 */
    --surface:    var(--color-bg-soft);      /* #EFE9DA */
    --surface2:   var(--color-bg-elevated);  /* #F7F4EB */
    --text:       var(--color-text-base);    /* #1B3B30 */
    --text-dim:   var(--color-text-mute);    /* #6E746C */
    --text-muted: var(--color-text-soft);    /* #98A09A */
    /* Z5: --text-default 미정의 → 리다이렉트 */
    --text-default: var(--color-text-base, #1B3B30);
    /* Z4-1: --gold 계열 → 오렌지 포인트 통합 */
    --gold:        var(--color-point, #DF5C3F);      /* @deprecated → --color-point */
    --gold-dim:    rgba(223,92,63,0.08);              /* @deprecated → --color-point-soft */
    --gold-border: rgba(223,92,63,0.22);              /* @deprecated → rgba(--color-point) */
    /* Z5: --fire → --color-error 리다이렉트 */
    --fire:   var(--color-error, #C03030);   /* @deprecated → --color-error */
    --earth:  #9b6e1f;   /* @deprecated */
    --wood:   #4a8559;   /* @deprecated */
    --metal:  #6b7e8c;   /* @deprecated */
    --water:  #2f5683;   /* @deprecated */

    /* ── 오행색 (명리 시스템 — NAMSIK § 2-3) ──────────────────────────── */
    --color-oh-mok:          #2E8B3F;   /* 木 */
    --color-oh-hwa:          #D72E1A;   /* 火 */
    --color-oh-to:           #D48E15;   /* 土 */
    --color-oh-geum:         #5B7088;   /* 金 */
    --color-oh-su:           #15407A;   /* 水 */
    --color-oh-mok-soft:     #E0F0E4;
    --color-oh-hwa-soft:     #FCE3DF;
    --color-oh-to-soft:      #FCEFD8;
    --color-oh-geum-soft:    #E6EBF1;
    --color-oh-su-soft:      #DCE5F2;

    /* ── cmd-291 명식판 what-if(가정) ─────────────────────────────────
       --color-point(#DF5C3F)는 종이 위 작은 글자에서 3.5:1 이라 본문 대비에 못 쓴다.
       그래서 코랄 계열 딥 톤을 토큰으로 세우고(#A63C25 = 종이 대비 6.1:1) 텍스트·배지에 쓴다.
       나머지는 전부 기존 토큰 참조 — 새 색값은 --color-point-deep 하나뿐이다. */
    --color-point-deep:       #A63C25;
    --color-whatif:           var(--color-point-deep);   /* 가정 강조(글자·배지·링) */
    --color-whatif-line:      var(--color-point);        /* 가정 패널 테두리 */
    --color-whatif-soft:      var(--color-point-soft);   /* 가정 패널 배경 */
    --color-delta-plus:       var(--color-point-deep);   /* 점수 오름 */
    --color-delta-minus:      var(--color-oh-su);        /* 점수 내림 */
    --color-delta-zero:       var(--color-text-mute);    /* 변화 없음 */

    /* ── Typography ─────────────────────────────────────────────────── */
    --font-serif:  'Noto Serif KR', 'Nanum Myeongjo', serif;
    --font-sans:   'Noto Sans KR', system-ui, sans-serif;
    --font-mono:   'JetBrains Mono', ui-monospace, monospace;

    --fs-hero:    56px;
    --fs-h1:      32px;
    --fs-h2:      24px;
    --fs-h3:      18px;
    --fs-body:    13px;
    --fs-label:   11px;
    --fs-caption: 10px;

    --fw-bold:    700;
    --fw-medium:  500;
    --fw-regular: 400;

    --lh-tight:   1.2;
    --lh-normal:  1.5;
    --lh-loose:   1.8;

    /* ── Spacing ─────────────────────────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;

    /* 2026-08-14 시안 규격 — 카드 12~14 / 버튼·칩 8~10 */
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  14px;

    /* ── cmd-103: 앱 셸 폭·여백 전면 통일 (2026-08-13) ─────────────────── */
    --app-max: 640px;
    --app-pad: 16px;

    --shadow-card:  0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-modal: 0 10px 40px rgba(0,0,0,0.5);

    /* ── Channel defaults ────────────────────────────────────────────── */
    --card-pad:  var(--space-6);
    --card-gap:  var(--space-5);
    --hero-size: var(--fs-hero);
  }

  /* cmd-103: 앱 셸 유틸 — 모든 화면 컨테이너 폭·여백 통일 */
  .app-shell {
    width: 100%; max-width: var(--app-max); margin: 0 auto;
    padding-left: var(--app-pad); padding-right: var(--app-pad);
    box-sizing: border-box;
  }
  .app-shell--flush { padding-left: 0; padding-right: 0; }

  /* ── Channel overrides — 양 채널 라이트 베이스 통일 (Z1) ────────────── */
  [data-channel="general"],
  [data-channel="expert"] {
    --color-bg:      #F7F4EB;
    --color-bg-card: #FFFFFF;
    /* 레거시 alias 갱신 */
    --bg:     var(--color-bg);
    --surface: var(--color-bg-soft);
  }
  [data-channel="general"] {
    --card-pad:  var(--space-6);
    --card-gap:  var(--space-5);
    --hero-size: var(--fs-hero);
    --color-line:       #D2D3CA;
    --color-line-light: #D2D3CA;
  }
  [data-channel="expert"] {
    --card-pad:  var(--space-4);
    --card-gap:  var(--space-3);
    --hero-size: var(--fs-h1);
    /* 역술인 — 라인 살짝 진하게 (정보 밀도 강조) */
    --color-line:       #C7C0AC;
    --color-line-light: #C7C0AC;
    --color-line-strong: #A8A5A0;
  }

  /* ── 채널별 보임/숨김 (ADMIN-SEPARATION Phase 1) ─────────────────────── */
  body:not([data-channel="admin"]) [data-channel-only="admin"] {
    display: none !important;
  }
  body[data-channel="admin"] [data-channel-only="expert"],
  body[data-channel="admin"] [data-channel-only="general"],
  body[data-channel="general"] [data-channel-only="expert"],
  body[data-channel="expert"] [data-channel-only="general"] {
    display: none !important;
  }

  body {
    background: var(--color-bg, #F7F4EB);
    color: var(--color-text-base, #1B3B30);
    font-family: 'Noto Serif KR', serif;
    /* zoom:1.2 환산(2026-08-14) — 100vh를 쓰면 문서가 120vh가 되어
       내용이 짧아도 항상 세로 스크롤이 생겼다. 홈과 스크롤 유무가 달라지는 원인. */
    min-height: 83.3333vh;
    padding: 0;
    font-size: 15px;
    /* 전체 1.2배 확대 (Chrome/Edge/Safari/모바일) */
    zoom: 1.2;
  }
  /* cmd-102: 하단 탭바가 본문 끝을 가리므로 여백 확보(위 padding:0과 합산 — bottom만 재정의) */
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* Firefox는 zoom 미지원 — font-size를 직접 키움 */
  @-moz-document url-prefix() {
    html { font-size: 120%; }
  }
  /* ── LAYOUT ── */
  .app { max-width: 1140px; margin: 0 auto; padding: 22px 18px 40px; }
  /* AI 공급자 선택 바 (상단) */
  .ai-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: rgba(255,255,255,0.65);
    border: 1px solid var(--gold-border);
    border-radius: 8px;
    padding: 8px 12px; margin-bottom: 12px;
    font-family: 'Noto Sans KR', sans-serif; font-size: 11px;
  }
  .ai-bar label { color: var(--text-dim); letter-spacing: 1px; }
  .ai-bar select, .ai-bar input {
    font-size: 12px; padding: 6px 10px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(223,92,63,0.20);
    border-radius: 6px; color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
  }
  .ai-bar #ai-key { flex: 1 1 220px; min-width: 0; }
  .ai-bar .ai-save-btn {
    padding: 6px 14px;
    background: var(--gold-dim);
    border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 6px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px; letter-spacing: 1px;
    cursor: pointer;
  }
  .ai-bar .ai-save-btn:hover { background: var(--gold); color: #FFFFFF; }
  .ai-bar .ai-status { font-size: 10px; color: var(--text-muted); }
  .ai-bar .ai-status.ok { color: #4a8559; }
  .ai-bar a { color: var(--gold); font-size: 10px; text-decoration: none; }
  .ai-bar a:hover { text-decoration: underline; }
  /* AI 선택 - 오른쪽 상단 떠 있는 바 */
  .app { position: relative; }
  #ai-card {
    position: absolute; top: 14px; right: 14px;
    z-index: 50;
    display: flex; flex-direction: column; gap: 6px;
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--gold-border);
    border-radius: 14px;
    padding: 8px 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    max-width: 350px;
  }
  #ai-card .section-label { display: none; }
  .ai-logos {
    display: flex; gap: 4px; margin: 0;
  }
  .ai-logo {
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: white;
    opacity: 0.55;
    transition: all .15s;
    position: relative;
    padding: 0;
    background: none;
    border: none;
  }
  .ai-logo .ai-info { display: none; }
  .ai-logo .ai-check {
    position: absolute;
    bottom: -3px; right: -3px;
    background: var(--gold);
    color: #FFFFFF;
    border-radius: 50%;
    width: 12px; height: 12px;
    font-size: 8px;
    font-weight: 900;
    display: none;
    align-items: center; justify-content: center;
    border: 1.5px solid var(--color-bg-card, #FFFFFF);
    opacity: 1;
  }
  .ai-logo.selected .ai-check { display: flex; }
  .ai-logo:hover { opacity: 1; transform: scale(1.1); }
  .ai-logo.selected {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--color-bg-card, #FFFFFF), 0 0 0 4px var(--color-point, #DF5C3F);
  }
  /* 키 입력 행 */
  .ai-key-row { display: flex; gap: 4px; align-items: center; }
  .ai-key-row.no-key { display: none; }
  #ai-key {
    flex: 1; min-width: 0;
    padding: 5px 9px !important;
    font-size: 11px !important;
    border: 1px solid rgba(223,92,63,0.20);
    border-radius: 6px;
    background: rgba(255,255,255,0.5);
    color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
  }
  .ai-key-row .ai-save-btn {
    padding: 5px 10px !important;
    font-size: 10px !important;
  }
  .ai-key-row #ai-key-help {
    font-size: 9px;
    padding: 4px 7px !important;
  }
  #ai-status { font-size: 9px !important; margin: 0 !important; line-height: 1.3; }
  @media (max-width: 820px) {
    #ai-card {
      position: static; max-width: none;
      margin-bottom: 12px;
    }
  }
  /* (옛 스타일 — 호환 위해 두지만 사용 안 함) */
  .ai-logos-old { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .ai-logo-old {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 7px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(223,92,63,0.18);
    border-radius: 7px;
    cursor: pointer; transition: all .15s;
    min-width: 0;
  }
  .ai-logo:hover { border-color: var(--gold); background: rgba(255,255,255,0.75); }
  .ai-logo.selected {
    background: var(--gold-dim);
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold) inset;
  }
  .ai-icon {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: white;
    flex-shrink: 0; font-family: 'Noto Sans KR', sans-serif;
    line-height: 1;
  }
  .ai-icon.free-shared { background: linear-gradient(135deg, #FF7A2F, #DF5C3F); }
  .ai-icon.pollinations { background: linear-gradient(135deg, #84cc16, #15803d); }
  .ai-icon.ollama { background: linear-gradient(135deg, #6366f1, #4338ca); }
  /* 로컬 모드 — Ollama + Claude + Gemini 세 개 표시 */
  .ai-logo:not([data-provider="ollama"]):not([data-provider="anthropic"]):not([data-provider="gemini"]) { display: none !important; }
  .ai-icon.anthropic { background: linear-gradient(135deg, #d97706, #9a4a1c); }
  .ai-icon.openai     { background: linear-gradient(135deg, #10a37f, #0a6e54); }
  .ai-icon.gemini     { background: conic-gradient(from 45deg, #4285f4, #9333ea, #ec4899, #f59e0b, #4285f4); }
  .ai-icon.xai        { background: linear-gradient(135deg, #1a1a1a, #525252); }
  .ai-icon.deepseek   { background: linear-gradient(135deg, #4d6bfe, #2841b8); }
  .ai-icon.groq       { background: linear-gradient(135deg, #f55036, #b13822); }
  .ai-icon.mistral    { background: linear-gradient(135deg, #ff7000, #c54e00); }
  .ai-icon.openrouter { background: linear-gradient(135deg, #6366f1, #3730a3); }
  .ai-info { flex: 1; min-width: 0; overflow: hidden; }
  .ai-name {
    font-size: 11px; font-weight: 600; color: var(--text);
    font-family: 'Noto Sans KR', sans-serif; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ai-meta {
    font-size: 8px; color: var(--text-dim);
    font-family: 'Noto Sans KR', sans-serif; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ai-check {
    font-size: 12px; color: var(--gold); font-weight: 700;
    opacity: 0; transition: opacity .15s; flex-shrink: 0;
  }
  .ai-logo.selected .ai-check { opacity: 1; }
  .main-grid { display: grid; grid-template-columns: 1fr 280px; gap: 14px; align-items: start; }
  .main-col { min-width: 0; }
  .sidebar { position: sticky; top: 20px; }
  /* ── cmd-102: 하단 탭바 전환으로 세로 사이드바 규칙 무효화. 롤백 시 주석 해제 ──
  .left-nav {
    display: flex; flex-direction: column; gap: 6px;
    position: sticky; top: 20px;
  }
  .nav-btn {
    padding: 15px 13px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(223,92,63,0.18);
    border-radius: 10px;
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: 14px; line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: all .15s;
  }
  .nav-btn:hover { border-color: var(--gold); color: var(--text); }
  .nav-btn.active {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold);
    font-weight: 700;
  }
  .nav-btn-admin {
    margin-top: auto;
    border-style: dashed;
    opacity: 0.85;
  }
  .nav-btn-admin.unlocked {
    border-style: solid;
    opacity: 1;
  }
  .nav-btn-admin.active {
    background: linear-gradient(180deg, rgba(223,92,63,0.18), rgba(223,92,63,0.10));
  }
  ── cmd-102 끝 ── */

  /* ── cmd-102: 하단 탭바(B안) 신규 규칙 — navbar-mockup-3안.html .navB 값 그대로 ── */
  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:120;
    display:flex; justify-content:center;
    background:var(--color-bg-card);
    border-top:1px solid var(--color-line);
    padding:0 var(--space-1) 10px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .tabbar .nav-btn{
    flex:1 1 0; max-width:120px;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:11px 2px 5px;
    background:transparent; border:0; border-radius:0;
    position:relative; cursor:pointer;
    color:var(--color-text-soft);
    font-family:var(--font-sans); font-size:var(--fs-caption);
    letter-spacing:-.02em; line-height:1.2;
    transition:color .16s;
  }
  .tabbar .nav-btn::before{
    content:''; position:absolute; top:0; left:50%;
    transform:translateX(-50%) scaleX(0);
    width:26px; height:2px; background:var(--color-point);
    border-radius:0 0 2px 2px;
    transition:transform .2s cubic-bezier(.4,0,.2,1);
  }
  .tabbar .nav-btn.active::before{ transform:translateX(-50%) scaleX(1); }
  .tabbar .nav-btn.active{ color:var(--color-text-strong); }
  .tabbar .nav-btn.active span{ font-weight:var(--fw-bold); }
  .tabbar .nav-btn svg{ width:20px; height:20px; stroke-width:1.6; }

  .tabbar-more{
    flex:1 1 0; max-width:120px;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:11px 2px 5px;
    background:transparent; border:0; border-radius:0;
    cursor:pointer; color:var(--color-text-soft);
    font-family:var(--font-sans); font-size:var(--fs-caption);
    letter-spacing:-.02em; line-height:1.2;
  }
  .tabbar-more svg{ width:20px; height:20px; stroke-width:1.6; }

  .tabbar-mask{
    position:fixed; inset:0; z-index:119;
    background:rgba(16,39,31,.32);
    opacity:0; pointer-events:none; transition:opacity .2s;
  }
  body.sheet-open .tabbar-mask{ opacity:1; pointer-events:auto; }

  .tabbar-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:121;
    background:var(--color-bg-card);
    border-radius:16px 16px 0 0;
    border-top:1px solid var(--color-line);
    padding:var(--space-3) var(--space-4) var(--space-4);
    padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    transform:translateY(100%);
    transition:transform .24s cubic-bezier(.4,0,.2,1);
  }
  body.sheet-open .tabbar-sheet{ transform:translateY(0); }
  .tabbar-sheet-handle{
    width:34px; height:3px; border-radius:2px;
    background:var(--color-line-strong); margin:0 auto var(--space-3);
  }
  .tabbar-sheet h4{
    font-size:var(--fs-label); color:var(--color-text-mute);
    font-weight:700; letter-spacing:.04em; margin-bottom:var(--space-3);
  }
  .tabbar-sheet-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2); }
  .tabbar-sheet-grid .nav-btn{
    border:1px solid var(--color-line); background:var(--color-bg); border-radius:10px;
    padding:var(--space-3) 4px; display:flex; flex-direction:column; align-items:center; gap:6px;
    cursor:pointer; font-family:var(--font-sans); color:var(--color-text-base);
    transition:border-color .14s, background .14s;
  }
  .tabbar-sheet-grid .nav-btn:hover,
  .tabbar-sheet-grid .nav-btn.active{ border-color:var(--color-point); background:var(--color-point-soft); }
  .tabbar-sheet-grid .nav-btn svg{ width:19px; height:19px; stroke-width:1.6; color:var(--color-text-mute); }
  .tabbar-sheet-grid .nav-btn:hover svg{ color:var(--color-point); }
  .tabbar-sheet-grid .nav-btn span{ font-size:var(--fs-caption); font-weight:500; }
  .tabbar-sheet-grid .nav-btn-admin{ border-style:dashed; opacity:.72; }

  @media (min-width: 1021px){
    .tabbar{ gap:var(--space-1); padding:var(--space-2) 0; }
    .tabbar .nav-btn{
      flex:0 0 auto; max-width:none;
      flex-direction:row; gap:7px;
      padding:9px 18px; border-radius:10px;
      font-size:var(--fs-body);
    }
    .tabbar .nav-btn::before{ top:2px; }
  }
  /* ── cmd-102 끝 ── */

  /* 관리자 서브 탭 */
  .admin-sub-tabs {
    display: flex; gap: 6px; margin-top: 12px;
    border-bottom: 1px solid var(--gold-border);
    padding-bottom: 0;
  }
  .admin-sub-btn {
    padding: 8px 18px;
    background: rgba(255,255,255,0.4);
    border: 1px solid var(--gold-border);
    border-bottom: none;
    color: var(--text-muted);
    border-radius: 6px 6px 0 0;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all .15s;
    margin-bottom: -1px;
  }
  .admin-sub-btn:hover { background: var(--gold-dim); color: var(--gold); }
  .admin-sub-btn.active {
    background: rgba(255,255,255,0.95);
    color: var(--gold);
    border-color: var(--gold);
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.95);
  }
  /* 폼 카드만 폭 제한 */
  #input-screen .form-card { max-width: 380px; margin: 0 auto; }
  /* 수정 모드 배너 */
  .editing-banner {
    background: rgba(223,92,63,0.18);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 9px 12px;
    margin-bottom: 14px;
    font-size: 12px; color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    line-height: 1.5;
  }
  .editing-banner-text { flex: 1; min-width: 0; }
  .cancel-edit-btn {
    flex: 0 0 auto;
    background: rgba(184,60,50,0.10);
    border: 1px solid rgba(184,60,50,0.30);
    color: var(--fire);
    font-size: 11px; padding: 4px 10px;
    border-radius: 5px; cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .cancel-edit-btn:hover { background: rgba(184,60,50,0.20); border-color: var(--fire); }
  /* 반응형 */
  @media (max-width: 1020px) {
    .main-grid { grid-template-columns: 1fr 280px; }
    /* cmd-102: .left-nav/.nav-btn 반응형 규칙 제거 — 하단 탭바가 전 화면 공통 처리 */
  }
  @media (max-width: 820px) {
    .main-grid { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    #input-screen .form-card { max-width: none; }
  }
  /* ── HEADER ── */
  .header { text-align: center; margin-bottom: 22px; }
  .header-hanja {
    font-size: 11px; letter-spacing: 7px; color: var(--gold);
    opacity: 0.7; margin-bottom: 6px; font-family: 'Noto Sans KR', sans-serif;
  }
  .header-title {
    font-size: 26px; font-weight: 700; letter-spacing: 1px;
  }
  .header-tak {
    font-size: 36px;
    color: var(--gold);
    margin-left: 4px;
    font-weight: 800;
    letter-spacing: 0;
  }
  .header-line {
    width: 40px; height: 1px; margin: 8px auto;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
  }
  .header-sub { font-size: 11px; color: var(--text-muted); letter-spacing: 2.5px; font-family: 'Noto Sans KR', sans-serif; }
  /* ── CARD ── */
  .card {
    background: var(--surface); border: 1px solid var(--gold-border);
    border-radius: 12px; padding: 16px 18px; margin-bottom: 10px;
  }
  /* ── FORM ── */
  .form-label {
    display: block; font-size: 12px; letter-spacing: 1.2px;
    color: var(--color-text-base, #1B3B30); margin-bottom: 9px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 600;
  }
  .form-group { margin-bottom: 18px; }
  /* 자동 인식 영역 (사이드바 — 저장된 명식 위) */
  #auto-parse-card { padding: 14px 14px 12px; }
  /* 관리자 사이드바 위젯 */
  .admin-sidebar-widget {
    padding: 10px 12px !important;
    background: linear-gradient(180deg, rgba(223,92,63,0.10), rgba(223,92,63,0.04)) !important;
    border: 1px solid var(--gold-border) !important;
  }
  .admin-mini-btn {
    padding: 3px 8px;
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    color: var(--gold);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all .15s;
  }
  .admin-mini-btn:hover { background: var(--gold-dim); color: var(--gold); }
  .admin-mini-progress-bar {
    height: 5px; background: rgba(0,0,0,0.06);
    border-radius: 3px; margin-top: 4px;
    overflow: hidden;
  }
  .admin-mini-progress-fill {
    height: 100%; border-radius: 3px;
    transition: width 0.4s;
  }
  #auto-parse-text {
    width: 100%;
    min-height: 80px;
    max-height: 180px;
    resize: vertical;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(223,92,63,0.20);
    border-radius: 7px;
    padding: 8px 10px;
    color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    outline: none;
  }
  #auto-parse-text:focus { border-color: rgba(223,92,63,0.65); }
  .auto-parse-btn {
    width: 100%; padding: 7px 10px; margin-top: 6px;
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    color: var(--gold);
    border-radius: 7px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px; letter-spacing: 1.5px;
    cursor: pointer;
    transition: all .2s;
  }
  .auto-parse-btn:hover { background: var(--gold-dim); border-color: var(--gold); }
  .auto-parse-btn:disabled { opacity: .5; cursor: not-allowed; }
  .auto-parse-status {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 5px;
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.5;
  }
  .auto-parse-status.ok { color: #4a8559; }
  .auto-parse-status.err { color: var(--fire); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  input, select {
    width: 100%; background: rgba(255,255,255,0.55);
    border: 1px solid rgba(223,92,63,0.20);
    border-radius: 8px; padding: 12px 14px;
    color: var(--text); font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px; outline: none; transition: border-color .2s;
    -webkit-appearance: none; appearance: none;
  }
  input:focus, select:focus { border-color: rgba(223,92,63,0.65); }
  select option { background: var(--color-bg-card,#FFFFFF); color: var(--text); }
  .toggle-group { display: flex; gap: 8px; }
  .toggle-btn {
    flex: 1; padding: 11px; background: rgba(255,255,255,0.45);
    border: 1px solid rgba(223,92,63,0.18); border-radius: 8px;
    color: var(--text-dim); font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px; cursor: pointer; text-align: center; transition: all .2s;
  }
  .toggle-btn.active {
    border-color: rgba(223,92,63,0.75); color: var(--gold);
    background: var(--gold-dim);
  }
  .toggle-btn:disabled { opacity: .4; cursor: default; }
  .submit-btn {
    width: 100%; padding: 16px; margin-top: 6px;
    background: linear-gradient(135deg, #DF5C3F 0%, #C03500 100%);
    border: none; border-radius: 10px;
    color: #FFFFFF; font-family: 'Noto Serif KR', serif;
    font-size: 16px; font-weight: 700; letter-spacing: 3px;
    cursor: pointer; transition: opacity .2s;
  }
  .submit-btn:hover { opacity: .9; }
  .submit-btn:disabled { opacity: .35; cursor: not-allowed; }
  /* ── LOADING ── */
  #loading { display: none; }
  .loading-wrap { text-align: center; padding: 64px 20px; }
  .spinner {
    width: 56px; height: 56px; margin: 0 auto 24px;
    border: 2px solid rgba(200,168,75,0.18);
    border-top-color: var(--gold); border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  /* SKELETON LOADER */
  .sb-skeleton {
    background: linear-gradient(90deg, rgba(200,168,75,0.08) 25%, rgba(200,168,75,0.18) 50%, rgba(200,168,75,0.08) 75%);
    background-size: 200% 100%;
    animation: sb-shimmer 1.4s infinite;
  }
  @keyframes sb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  .loading-txt { font-size: 13px; color: var(--text-muted); letter-spacing: 2px; font-family: 'Noto Sans KR', sans-serif; }
  /* ── RESULT ── */
  #result { display: none; }
  .back-btn, .save-btn {
    background: rgba(255,255,255,0.5); border: 1px solid rgba(223,92,63,0.25);
    color: var(--text-dim); padding: 7px 16px; border-radius: 6px;
    font-family: 'Noto Sans KR', sans-serif; font-size: 12px;
    cursor: pointer; transition: all .2s;
  }
  .back-btn:hover, .save-btn:hover { border-color: var(--gold); color: var(--gold); }
  .save-btn.saved { color: var(--gold); border-color: var(--gold); background: var(--gold-dim); }
  .result-actions { display: flex; gap: 8px; margin-bottom: 12px; }
  /* ── PILLAR backgrounds need a touch more contrast on light bg ── */
  .pillar { background: rgba(255,255,255,0.55) !important; }
  .pillar.ilju { background: rgba(223,92,63,0.10) !important; }
  /* 데이터 파일 도구 (저장된 명식 상단 툴바) */
  .saved-toolbar {
    display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap;
  }
  .saved-toolbar button {
    flex: 1; padding: 6px 8px;
    background: rgba(223,92,63,0.08);
    border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 6px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 10px; letter-spacing: 0.5px;
    cursor: pointer; min-width: 0;
    transition: all .15s;
  }
  .saved-toolbar button:hover { background: var(--gold-dim); border-color: var(--gold); }
  .saved-toolbar-danger {
    color: var(--fire) !important;
    border-color: rgba(184,60,50,0.35) !important;
    background: rgba(184,60,50,0.06) !important;
  }
  .saved-toolbar-danger:hover {
    background: rgba(184,60,50,0.18) !important;
    border-color: var(--fire) !important;
  }
  .file-sync-status {
    font-size: 10px; color: var(--text-muted);
    margin-bottom: 6px; font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.5;
  }
  .file-sync-status.connected { color: #4a8559; }
  /* 검색 + 중요 표시 */
  .saved-search-input {
    width: 100%; padding: 7px 10px; margin-bottom: 8px;
    border: 1px solid rgba(223,92,63,0.20); border-radius: 7px;
    background: rgba(255,255,255,0.55); color: var(--text);
    font-family: 'Noto Sans KR', sans-serif; font-size: 11px;
    outline: none;
  }
  .saved-search-input:focus { border-color: rgba(223,92,63,0.65); }
  .saved-pin {
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    font-size: 14px; padding: 2px 6px; line-height: 1;
    flex-shrink: 0; transition: color .15s;
  }
  .saved-pin:hover { color: var(--gold); }
  .saved-pin.pinned { color: var(--gold); }
  .saved-item.pinned {
    background: rgba(223,92,63,0.10);
    border-color: rgba(223,92,63,0.45);
  }
  .saved-search-empty {
    font-size: 11px; color: var(--text-muted);
    text-align: center; padding: 14px 0;
    font-family: 'Noto Sans KR', sans-serif;
  }
  /* ── SAVED LIST ── */
  .saved-section { margin-top: 0; }
  .saved-list {
    display: flex; flex-direction: column; gap: 5px; margin-top: 8px;
    max-height: 440px; overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
  }
  .saved-list::-webkit-scrollbar { width: 6px; }
  .saved-list::-webkit-scrollbar-thumb { background: rgba(223,92,63,0.30); border-radius: 3px; }
  .saved-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 4px;
    background: rgba(255,255,255,0.5); border: 1px solid rgba(223,92,63,0.18);
    border-radius: 7px; padding: 6px 9px; cursor: pointer; transition: all .15s;
  }
  .saved-item:hover { border-color: var(--gold); background: var(--gold-dim); }
  .saved-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
  .saved-name-row { display: flex; align-items: center; gap: 4px; }
  .saved-name { font-size: 13px; font-weight: 600; color: var(--text); font-family: 'Noto Sans KR', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .saved-meta { font-size: 11px; color: var(--text-dim); font-family: 'Noto Sans KR', sans-serif; }
  .saved-edit-btn {
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    padding: 0 3px; font-size: 10px; line-height: 1;
    opacity: 0; transition: opacity .15s, color .15s;
    flex-shrink: 0;
  }
  .saved-item:hover .saved-edit-btn { opacity: 0.7; }
  .saved-edit-btn:hover { opacity: 1 !important; color: var(--gold); }
  .saved-del { padding: 2px 6px !important; font-size: 14px !important; }
  .saved-pin { font-size: 12px !important; padding: 1px 4px !important; }
  .saved-del {
    background: none; border: none; color: var(--text-muted);
    font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
  }
  .saved-del:hover { color: var(--fire); background: rgba(181,60,50,0.10); }
  .saved-empty { font-size: 12px; color: var(--text-muted); text-align: center; padding: 16px; font-family: 'Noto Sans KR', sans-serif; }
  .result-name {
    font-size: 17px; font-weight: 600; color: var(--text);
    font-family: 'Noto Sans KR', sans-serif; margin-bottom: 2px;
  }
  .result-birth {
    font-size: 12px; color: var(--text-dim);
    font-family: 'Noto Sans KR', sans-serif; margin-bottom: 10px;
  }
  .section-label {
    font-size: 12px; letter-spacing: 1.5px; color: var(--gold);
    margin-bottom: 12px; font-family: 'Noto Sans KR', sans-serif;
    padding-left: 10px;
    border-left: 3px solid var(--gold);
    display: flex; align-items: center;
  }
  /* ── PILLARS ── */
  .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
  .pillar {
    background: rgba(255,255,255,0.02); border: 1px solid var(--gold-border);
    border-radius: 10px; padding: 10px 8px; text-align: center;
  }
  .pillar.ilju { border-color: rgba(200,168,75,0.45); background: rgba(200,168,75,0.04); }
  .p-label { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; font-family: 'Noto Sans KR', sans-serif; letter-spacing: 1px; }
  .p-ss-top, .p-ss-bot {
    font-size: 10px; padding: 2px 6px; border-radius: 4px;
    background: var(--gold-dim); color: var(--gold);
    display: inline-block; font-family: 'Noto Sans KR', sans-serif;
    margin: 2px 0;
  }
  .p-ss-top.ilju-ss, .p-ss-bot.ilju-ss { background: rgba(200,168,75,0.30); }
  /* 색 블록 — 천간/지지 */
  .p-tg-block, .p-zz-block {
    display: block; width: 100%;
    border-radius: 6px;
    padding: 8px 0; margin: 3px 0;
    color: #FFFFFF !important;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    line-height: 1;
  }
  .p-tg-block { font-size: 26px; }
  .p-zz-block { font-size: 24px; }
  .p-sub { font-size: 9px; color: var(--text-dim); margin-top: -1px; line-height: 1.2; }
  .p-jang {
    font-size: 10px; color: var(--text-dim);
    letter-spacing: 2px; margin-top: 5px;
    font-family: 'Noto Serif KR', serif;
    border-top: 1px dotted rgba(223,92,63,0.30);
    padding-top: 4px;
  }
  .p-stage {
    font-size: 10px; color: var(--gold);
    font-family: 'Noto Sans KR', sans-serif;
    margin-top: 2px; letter-spacing: 0.5px;
  }

  /* ── 호버 툴팁 (HOVER-TOOLTIP-SPEC) ────────────────────────────────── */
  .tt-tooltip {
    position: fixed;
    z-index: 9999;
    background: var(--color-bg-inverse, #10271F);
    color: var(--color-text-on-inverse, #F2EFE4);
    padding: 6px 12px;
    border-radius: 6px;
    font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
    font-size: 12px;
    line-height: 1.5;
    max-width: 280px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    white-space: pre-wrap;
    word-break: keep-all;
  }
  .tt-tooltip--visible { opacity: 1; transform: translateY(0); }
  @media (max-width: 480px) {
    .tt-tooltip { font-size: 13px; padding: 8px 14px; max-width: 90vw; }
  }

  /* ── 팔자 글자 클릭 (NAMSIK N2) ────────────────────────────────────── */
  .pillar-char { cursor: pointer; transition: filter .15s; }
  .pillar-char:hover { filter: brightness(1.2); outline: 2px solid rgba(255,255,255,0.5); outline-offset: -1px; }

  /* ── 합충형해파 한글 표시 (NAMSIK N1) ───────────────────────────────── */
  .p-marks { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; min-height: 14px; margin-top: 2px; }
  .pillar-mark {
    display: inline-block;
    font-family: var(--font-serif, 'Noto Serif KR', serif);
    font-size: 11px; font-weight: 600;
    line-height: 1; cursor: help;
    position: relative; padding: 0 1px;
  }
  .pillar-mark--half { opacity: 0.65; font-weight: 400; }
  /* 합 — 오행색 */
  .pillar-mark--hap-mok  { color: var(--color-oh-mok); }
  .pillar-mark--hap-hwa  { color: var(--color-oh-hwa); }
  .pillar-mark--hap-to   { color: var(--color-oh-to); }
  .pillar-mark--hap-geum { color: var(--color-oh-geum); }
  .pillar-mark--hap-su   { color: var(--color-oh-su); }
  .pillar-mark--hap-yuk,
  .pillar-mark--hap-cg   { color: var(--color-text-base); font-weight: 400; }
  /* 흉작용 */
  .pillar-mark--chung { color: var(--color-error); }
  .pillar-mark--hyung { color: var(--color-error); font-weight: 700; }
  .pillar-mark--pa,
  .pillar-mark--hae   { color: var(--color-text-mute); }
  .pillar-mark--gong  { color: var(--color-text-soft); font-weight: 400; }
  /* 호버 툴팁 */
  .pillar-mark[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
    background: var(--color-bg-inverse, #10271F);
    color: var(--color-text-on-inverse, #F2EFE4);
    padding: 3px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 400; white-space: nowrap;
    pointer-events: none; z-index: 200;
    font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  }

  /* ── 명식 하단 각주 (NAMSIK N3) ─────────────────────────────────────── */
  .namsik-footnote {
    margin-top: 12px; padding: 10px 14px;
    background: var(--color-bg-soft, #EFE9DA);
    border-radius: 8px;
    border-left: 3px solid var(--color-point, #DF5C3F);
    font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  }
  .namsik-footnote .fn-row {
    display: flex; gap: 10px; font-size: 11px;
    margin-bottom: 4px; align-items: baseline; flex-wrap: wrap;
  }
  .namsik-footnote .fn-row:last-child { margin-bottom: 0; }
  .namsik-footnote .fn-lbl {
    font-weight: 700; color: var(--color-point);
    min-width: 34px; flex-shrink: 0; font-size: 11px;
  }
  .namsik-footnote .fn-val { color: var(--color-text-base); flex: 1; line-height: 1.6; }
  .namsik-footnote .fn-pos { color: var(--color-text-mute); margin-right: 3px; }
  .namsik-footnote .fn-item { margin-right: 6px; }
  .namsik-footnote .fn-item small { color: var(--color-text-mute); font-size: 10px; }

  /* ── 명식 각주 4컬럼 그리드 (§ 4-2) ─────────────────────────────────────── */
  .namsik-footnote--columns { padding: 8px 10px; border-left-width: 2px; }
  .fn-col-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  }
  .fn-col {
    display: flex; flex-direction: column; gap: 3px;
    align-items: center; min-height: 20px;
  }
  .fn-col__head {
    font-size: 10px; font-weight: 700; color: var(--color-point, #DF5C3F);
    font-family: var(--font-serif, 'Noto Serif KR', serif);
  }
  .fn-col__sinsal { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
  .fn-col__hapchung { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
  .fn-sinsal {
    font-size: 10px; padding: 1px 5px; border-radius: 3px;
    font-family: var(--font-sans, 'Noto Sans KR', sans-serif); font-weight: 600; line-height: 1.3;
  }
  .fn-sinsal--good    { background: rgba(74,133,89,0.15); color: #4a8559; }
  .fn-sinsal--bad     { background: rgba(184,60,50,0.15); color: #b83c32; }
  .fn-sinsal--neutral { background: rgba(223,92,63,0.1); color: var(--color-point, #DF5C3F); }
  /* 신빙성 등급 채도(신살-정리-계획서 §5) — "숫자 대신 테두리 색/채도로: A=진함, B=연함".
     A 는 기본값 그대로 두고 B·C 만 낮춘다. C 는 공부방에서만 뜬다(운세방은 렌더 단계에서 걸러짐). */
  .fn-sinsal--gB { opacity: 0.78; }
  .fn-sinsal--gC { opacity: 0.55; font-weight: 500; }
  .fn-mark {
    display: inline-block;
    font-family: var(--font-serif, 'Noto Serif KR', serif);
    font-size: 12px; font-weight: 700; line-height: 1; cursor: help;
    padding: 0 1px; position: relative;
  }
  .fn-mark--hap-mok  { color: var(--color-oh-mok); }
  .fn-mark--hap-hwa  { color: var(--color-oh-hwa); }
  .fn-mark--hap-to   { color: var(--color-oh-to); }
  .fn-mark--hap-geum { color: var(--color-oh-geum); }
  .fn-mark--hap-su   { color: var(--color-oh-su); }
  .fn-mark--hap-yuk,
  .fn-mark--hap-cg   { color: var(--color-text-base); font-weight: 400; }
  .fn-mark--chung    { color: var(--color-error); }
  .fn-mark--hyung    { color: var(--color-error); font-weight: 700; }
  .fn-mark--pa,
  .fn-mark--hae      { color: var(--color-text-mute); }
  .fn-mark--gong     { color: var(--color-text-soft); font-weight: 400; }
  .fn-mark[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
    background: var(--color-bg-inverse, #10271F); color: var(--color-text-on-inverse, #F2EFE4);
    padding: 3px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 400; white-space: nowrap;
    pointer-events: none; z-index: 200;
    font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  }
  .fn-gongmang {
    margin-top: 5px; font-size: 10px; text-align: center;
    color: var(--color-text-mute); font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
    border-top: 1px dashed rgba(0,0,0,0.1); padding-top: 4px;
  }
  .fn-gongmang small { font-size: 9px; }

  /* ── PILLARS-6COL (세운·대운·시·일·월·년 가로 배치) ─────────────────── */
  .pillars-6col {
    display: grid;
    grid-template-columns: repeat(6, minmax(68px, 1fr));
    gap: 4px; overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; margin-bottom: 14px;
  }
  .pillars-6col::-webkit-scrollbar { height: 4px; }
  .pillars-6col::-webkit-scrollbar-thumb { background: rgba(223,92,63,0.25); border-radius: 2px; }
  /* 각주 — 6컬럼 전체 span */
  .pillars-6col .namsik-footnote {
    grid-column: 1 / -1;
  }
  /* 개별 컬럼 */
  .p6-col {
    background: #fff;
    border: 1px solid var(--gold-border);
    border-radius: 8px; padding: 6px 3px 4px;
    scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    position: relative; min-width: 68px; text-align: center;
  }
  .p6-col--ilju {
    background: rgba(200,168,75,0.04);
    border-color: rgba(200,168,75,0.45); border-width: 1.5px;
  }
  .p6-col--current {
    border: 2px solid var(--gold); box-shadow: 0 3px 8px rgba(223,92,63,0.15);
  }
  .p6-col__label {
    font-size: 10px; color: var(--text-muted);
    background: rgba(0,0,0,0.04); border-radius: 8px;
    padding: 1px 5px; font-weight: 500; letter-spacing: 0.5px;
  }
  .p6-col--current .p6-col__label { background: var(--gold); color: #fff; font-weight: 700; }
  .p6-col__age { font-size: 9px; color: var(--text-muted); line-height: 1.3; }
  .p6-col__ss-tg, .p6-col__ss-zz {
    font-size: 9px; color: var(--text-dim); font-weight: 500; min-height: 11px;
  }
  .p6-col__tg, .p6-col__zz {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Noto Serif KR', serif;
    font-size: 22px; font-weight: 500; border-radius: 6px; color: #fff;
  }
  .p6-col__tg[data-oh="木"], .p6-col__zz[data-oh="木"] { background: var(--color-oh-mok); }
  .p6-col__tg[data-oh="火"], .p6-col__zz[data-oh="火"] { background: var(--color-oh-hwa); }
  .p6-col__tg[data-oh="土"], .p6-col__zz[data-oh="土"] { background: var(--color-oh-to); }
  .p6-col__tg[data-oh="金"], .p6-col__zz[data-oh="金"] { background: var(--color-oh-geum); }
  .p6-col__tg[data-oh="水"], .p6-col__zz[data-oh="水"] { background: var(--color-oh-su); }
  .p6-col__tg-info, .p6-col__zz-info { font-size: 9px; color: var(--text-dim); line-height: 1.2; }
  .p6-col__marks {
    display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; min-height: 12px;
  }
  .p6-col__us { font-size: 9px; color: var(--gold); font-weight: 500; }
  .p6-col__bottom {
    font-size: 9px; color: var(--text-dim);
    font-family: 'Noto Serif KR', serif; margin-top: 1px; letter-spacing: 1px;
  }
  @media (max-width: 480px) {
    .pillars-6col { grid-template-columns: repeat(6, 62px); }
    .p6-col { padding: 5px 2px 3px; min-width: 62px; }
    .p6-col__tg, .p6-col__zz { width: 30px; height: 30px; font-size: 19px; }
  }

  /* 월·일운 달력 */
  .cal-header {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-bottom: 10px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .cal-nav-btn {
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--gold-border);
    color: var(--gold);
    width: 32px; height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
  }
  .cal-nav-btn:hover { background: var(--gold-dim); }
  .cal-today-btn {
    padding: 6px 12px;
    font-size: 11px;
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    color: var(--gold);
    border-radius: 6px; cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .cal-title {
    font-size: 17px; font-weight: 700; color: var(--text);
    min-width: 140px; text-align: center;
  }
  .cal-month-info {
    text-align: center; margin-bottom: 10px;
    font-size: 12px; color: var(--gold);
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: 1px;
  }
  .cal-month-info .badge {
    display: inline-block;
    background: var(--gold-dim);
    padding: 3px 10px; margin: 0 4px;
    border-radius: 4px;
  }
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }
  .cal-dow {
    text-align: center; font-size: 11px;
    color: var(--text-dim); padding: 5px 0;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 600;
  }
  .cal-dow.sun { color: var(--fire); }
  .cal-dow.sat { color: var(--water); }
  .cal-cell {
    min-height: 64px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(223,92,63,0.16);
    border-radius: 6px;
    padding: 5px 4px;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: 1px;
  }
  .cal-cell:hover { border-color: var(--gold); transform: translateY(-1px); }
  .cal-cell.today { background: var(--gold-dim); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
  .cal-cell.other-month { opacity: 0.32; }
  .cal-cell.selected {
    background: linear-gradient(135deg, #DF5C3F 0%, #C03500 100%);
    border-color: var(--gold);
  }
  .cal-cell.selected .cal-date, .cal-cell.selected .cal-ganji, .cal-cell.selected .cal-ss { color: #FFFFFF; }
  .cal-cell.analyzed::after {
    content: '✓'; position: absolute; top: 2px; right: 3px;
    color: #FFFFFF; background: var(--wood);
    border-radius: 50%; width: 11px; height: 11px;
    font-size: 8px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  .cal-date { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1; }
  .cal-date.sun { color: var(--fire); }
  .cal-date.sat { color: var(--water); }
  .cal-ganji {
    font-size: 12px; line-height: 1;
    margin-top: 3px;
    font-family: 'Noto Serif KR', serif;
    font-weight: 600;
  }
  .cal-ss {
    font-size: 8px; color: var(--text-muted);
    line-height: 1; margin-top: 1px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .cal-detail {
    margin-top: 10px; padding: 10px 12px;
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--gold-border); border-radius: 8px;
  }
  .cal-detail-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px; gap: 8px;
  }
  .cal-detail-title {
    font-size: 13px; font-weight: 600; color: var(--gold);
    font-family: 'Noto Sans KR', sans-serif;
  }
  .cal-no-person {
    text-align: center; padding: 30px 20px;
    color: var(--text-muted);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px; line-height: 1.7;
  }
  /* 헤더 강약 표시 */
  .strength-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px; font-weight: 600;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: 0.5px;
  }
  .strength-badge.weak { background: rgba(47,86,131,0.15); color: var(--water); }
  .strength-badge.balanced { background: rgba(74,133,89,0.15); color: var(--wood); }
  .strength-badge.strong { background: rgba(184,60,50,0.15); color: var(--fire); }
  /* ── OHAENG BAR ── */
  .oh-section { margin-top: 4px; }
  .oh-bars {
    display: flex; align-items: stretch; gap: 10px;
    margin-bottom: 4px;
  }
  .oh-col {
    flex: 1; display: flex; flex-direction: column;
    align-items: center;
  }
  .oh-fill-wrap {
    width: 100%; height: 56px;
    display: flex; align-items: flex-end;
  }
  .oh-fill {
    width: 100%; border-radius: 4px 4px 0 0;
    transition: height .6s ease; min-height: 6px;
  }
  .oh-name {
    font-size: 15px; font-weight: 700; line-height: 1.2;
    margin-top: 6px;
  }
  .oh-cnt {
    font-size: 12px; color: var(--text-muted);
    font-family: 'Noto Sans KR', sans-serif;
    margin-top: 2px;
  }
  /* 한난조습 */
  .hnjs-section { margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(223,92,63,0.2); }
  .hnjs-bars { display: flex; gap: 8px; margin: 8px 0 6px; }
  .hnjs-col {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; padding: 8px 4px;
    border-radius: 6px; background: rgba(0,0,0,0.03);
    border: 1px solid transparent;
  }
  .hnjs-col.dom { background: rgba(223,92,63,0.14); border-color: rgba(223,92,63,0.4); }
  .hnjs-name {
    font-size: 14px; font-weight: 700; line-height: 1.2;
    font-family: 'Noto Serif KR', serif;
  }
  .hnjs-cnt {
    font-size: 12px; color: var(--text-muted); margin-top: 4px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .hnjs-note {
    margin-top: 6px; padding: 8px 10px;
    background: rgba(223,92,63,0.06);
    border-left: 2px solid var(--gold);
    font-size: 12px; line-height: 1.7;
    color: var(--text-default);
    font-family: 'Noto Sans KR', sans-serif;
  }
  .hnjs-note b { color: var(--gold); }
  /* 원국 관계·신살 표시 */
  .orig-analysis { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(223,92,63,0.25); }
  .orig-block { margin-bottom: 10px; }
  .orig-block:last-child { margin-bottom: 0; }
  .orig-label {
    font-size: 11px; letter-spacing: 1.5px;
    color: var(--gold); margin-bottom: 6px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .orig-tags { display: flex; flex-wrap: wrap; gap: 5px; }
  .orig-tag {
    font-size: 11px; padding: 3px 9px;
    border-radius: 4px; font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .orig-tag.good { background: rgba(74,133,89,0.14); color: var(--wood); }
  .orig-tag.bad { background: rgba(184,60,50,0.14); color: var(--fire); }
  .orig-tag.neutral { background: rgba(223,92,63,0.14); color: var(--gold); }
  /* ── AI TEXT ── */
  .interp {
    font-size: 15px; line-height: 1.95; color: var(--text);
    white-space: pre-wrap; font-family: 'Noto Serif KR', serif; font-weight: 400;
    padding: 2px 0;
    word-break: keep-all;
  }
  /* ── 카드형 해석 출력 ── */
  .icard-wrap { display: flex; flex-direction: column; gap: 10px; padding: 2px 0; }
  .icard {
    border-radius: 10px; padding: 13px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(223,92,63,0.13);
    font-family: 'Noto Sans KR', sans-serif;
  }
  .icard-title {
    font-size: 11px; letter-spacing: 2px; font-weight: 600;
    color: var(--gold); margin-bottom: 7px;
    display: flex; align-items: center; gap: 6px;
  }
  .icard-body {
    font-size: 14px; line-height: 1.95; color: var(--text);
    white-space: pre-wrap;
    font-family: 'Noto Serif KR', serif;
    word-break: keep-all;
  }
  .icard.strength  { border-color: rgba(74,133,89,0.3);  background: rgba(74,133,89,0.06); }
  .icard.strength .icard-title { color: var(--color-success, #2E8B57); }
  .icard.caution   { border-color: rgba(200,130,50,0.3);  background: rgba(200,130,50,0.06); }
  .icard.caution  .icard-title { color: var(--color-warning, #E0A030); }
  .icard.ai-insight{ border-color: rgba(130,80,200,0.3);  background: rgba(130,80,200,0.07); }
  .icard.ai-insight .icard-title { color: #b07fdf; }
  .icard.closing   { border-color: rgba(223,92,63,0.3);  background: rgba(223,92,63,0.06); }
  .icard.closing  .icard-title { color: var(--gold); }
  .icard-tag {
    display: inline-block; font-size: 10px; padding: 1px 7px;
    border-radius: 10px; background: rgba(223,92,63,0.15);
    color: var(--gold); margin-left: 4px; vertical-align: middle;
  }
  .interp-loading {
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--gold);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px; letter-spacing: 2px;
    font-weight: 500;
    padding: 4px 2px;
  }
  .interp-loading::before {
    content: ''; flex: 0 0 auto;
    width: 20px; height: 20px;
    border: 2.5px solid rgba(223,92,63,0.20);
    border-top-color: var(--gold);
    border-right-color: var(--gold);
    border-radius: 50%;
    animation: aiSpin 0.85s linear infinite;
  }
  .interp-loading::after {
    content: '⋯';
    font-size: 22px; line-height: 0.5;
    letter-spacing: 3px;
    animation: aiDots 1.4s ease-in-out infinite;
  }
  @keyframes aiSpin { to { transform: rotate(360deg); } }
  @keyframes aiDots {
    0%, 100% { opacity: 0.3; transform: translateX(-2px) scale(0.95); }
    50%      { opacity: 1;   transform: translateX(2px)  scale(1.1); }
  }
  /* 텍스트 자체도 살짝 흐려졌다 진해지기 */
  .interp-loading {
    animation: aiPulse 2s ease-in-out infinite;
  }
  @keyframes aiPulse {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
  }
  /* 해석 중단 버튼 */
  .cancel-loading-btn {
    margin-left: 12px;
    background: rgba(184,60,50,0.12);
    border: 1px solid rgba(184,60,50,0.35);
    color: var(--fire);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px; letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 5px;
    cursor: pointer;
    animation: none;
    vertical-align: middle;
  }
  .cancel-loading-btn:hover {
    background: rgba(184,60,50,0.22);
    border-color: var(--fire);
  }
  /* 진행률 바 */
  .interp-progress-wrap {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 12px; vertical-align: middle;
  }
  .interp-progress-bar {
    display: inline-block;
    width: 100px; height: 7px;
    background: rgba(223,92,63,0.15);
    border: 1px solid var(--gold-border);
    border-radius: 4px;
    overflow: hidden;
    vertical-align: middle;
  }
  .interp-progress-fill {
    display: block; height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    transition: width 0.3s ease-out;
    border-radius: 3px;
  }
  .interp-progress-text {
    display: inline-block;
    min-width: 44px;
    text-align: right;
    font-size: 12px; font-weight: 700;
    color: var(--gold);
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: 1px;
    font-feature-settings: 'tnum';
  }
  .interp-progress-elapsed {
    font-size: 10px; color: var(--text-muted);
    margin-left: 6px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  /* ── CHAT ── */
  .chat-history {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 460px; overflow-y: auto;
    margin-bottom: 14px; padding-right: 4px;
  }
  .chat-empty { font-size: 12px; color: var(--text-muted); text-align: center; padding: 14px; font-family: 'Noto Sans KR', sans-serif; }
  .msg {
    padding: 12px 16px; border-radius: 10px;
    font-size: 14px; line-height: 1.85; max-width: 88%;
    font-family: 'Noto Sans KR', sans-serif; white-space: pre-wrap;
    color: var(--text);
  }
  .msg.user {
    background: var(--gold-dim); border: 1px solid var(--gold-border);
    align-self: flex-end;
  }
  .msg.assistant {
    background: rgba(255,255,255,0.65); border: 1px solid rgba(223,92,63,0.18);
    align-self: flex-start;
  }
  .msg.loading { color: var(--text-muted); font-style: italic; }
  .chat-input-row { display: flex; gap: 8px; align-items: stretch; }
  .chat-input-row textarea {
    flex: 1; resize: vertical; min-height: 50px; max-height: 200px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(223,92,63,0.20);
    border-radius: 8px; padding: 12px 14px;
    color: var(--text); font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px; outline: none; line-height: 1.6;
  }
  .chat-input-row textarea:focus { border-color: rgba(223,92,63,0.65); }
  .chat-send {
    flex: 0 0 auto; width: auto; margin-top: 0;
    padding: 0 22px; letter-spacing: 2px;
    background: linear-gradient(135deg, #DF5C3F 0%, #C03500 100%);
    border: none; border-radius: 8px;
    color: #FFFFFF; font-family: 'Noto Serif KR', serif;
    font-size: 14px; font-weight: 700;
    cursor: pointer; transition: opacity .2s;
  }
  .chat-send:hover { opacity: .9; }
  .chat-send:disabled { opacity: .4; cursor: not-allowed; }
  /* ── SUB-SYSTEM CARDS (보조 명식: 구성·점성·자미) ── */
  .sub-system { margin-bottom: 12px; }
  .sub-system:last-child { margin-bottom: 0; }
  .sub-label {
    font-size: 12px; letter-spacing: 2px; color: var(--text-dim);
    margin-bottom: 6px; font-family: 'Noto Sans KR', sans-serif;
    border-left: 2px solid var(--gold); padding-left: 8px;
  }
  .sys-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 0; }
  .sys-stat {
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(223,92,63,0.20);
    padding: 8px 10px; border-radius: 8px; text-align: center;
  }
  .sys-stat-label { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; letter-spacing: 1.5px; font-family: 'Noto Sans KR', sans-serif; }
  .sys-stat-val { font-size: 14px; font-weight: 600; color: var(--gold); font-family: 'Noto Serif KR', serif; line-height: 1.4; }
  .load-btn {
    display: block; margin: 14px auto 0; padding: 9px 24px;
    background: rgba(223,92,63,0.10); border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 8px;
    font-family: 'Noto Sans KR', sans-serif; font-size: 12px; letter-spacing: 2px;
    cursor: pointer; transition: all .2s;
  }
  .load-btn:hover { background: var(--gold-dim); border-color: var(--gold); }
  .load-btn:disabled { opacity: .5; cursor: not-allowed; }
  @media (max-width: 480px) {
    .sys-info { grid-template-columns: 1fr; }
  }
  /* ── DAEWOON · SEWOON ── */
  .fortune-track {
    display: block;
    padding: 4px 2px 8px; margin-bottom: 4px;
  }
  .dw-row {
    display: flex; gap: 6px; overflow-x: auto;
    scrollbar-width: thin;
  }
  .dw-row::-webkit-scrollbar { height: 6px; }
  .dw-row::-webkit-scrollbar-thumb { background: rgba(223,92,63,0.30); border-radius: 3px; }
  .fortune-cell {
    flex: 0 0 auto; min-width: 56px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(223,92,63,0.18);
    border-radius: 8px; padding: 7px 4px;
    text-align: center; cursor: pointer; transition: all .15s;
    position: relative;
  }
  .fortune-cell.analyzed {
    background: rgba(74,133,89,0.10);
    border-color: rgba(74,133,89,0.45);
  }
  .fortune-cell.analyzed::after {
    content: '✓';
    position: absolute; top: 2px; right: 3px;
    color: #FFFFFF; background: var(--wood);
    border-radius: 50%; width: 11px; height: 11px;
    font-size: 8px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  .sub-system[data-analyzed] .sub-label::after {
    content: ' ✓ 분석 완료';
    color: var(--wood); font-weight: 700;
    margin-left: 4px; letter-spacing: 0.5px;
  }
  .fortune-cell:hover { border-color: var(--gold); transform: translateY(-1px); }
  .fortune-cell.conflict-heavy {
    border-color: rgba(184,60,50,0.50) !important;
    box-shadow: 0 0 5px rgba(184,60,50,0.15);
  }
  .fortune-cell.conflict-light { border-color: rgba(184,60,50,0.28) !important; }
  .fortune-cell.harmony { border-color: rgba(74,133,89,0.38) !important; }
  .fortune-cell.current {
    background: var(--gold-dim); border-color: var(--gold);
  }
  .fortune-cell.selected {
    background: linear-gradient(135deg, #DF5C3F 0%, #C03500 100%);
    border-color: var(--gold);
  }
  .fortune-cell.selected .fc-tg,
  .fortune-cell.selected .fc-zz,
  .fortune-cell.selected .fc-age,
  .fortune-cell.selected .fc-year { color: #FFFFFF; }
  .fc-age { font-size: 10px; color: var(--text-dim); margin-bottom: 3px; font-family: 'Noto Sans KR', sans-serif; }
  .fc-tg { font-size: 18px; font-weight: 700; line-height: 1.1; color: var(--text); }
  .fc-zz { font-size: 17px; font-weight: 600; line-height: 1.1; color: var(--text); margin-top: 2px; }
  .fc-ss {
    font-size: 9px; color: var(--text-dim);
    font-family: 'Noto Sans KR', sans-serif;
    margin-top: 1px; margin-bottom: 1px;
  }
  .fc-tags {
    display: flex; flex-wrap: wrap; gap: 2px;
    justify-content: center; margin-top: 3px; min-height: 14px;
  }
  .fc-tag {
    font-size: 8px; padding: 1px 4px;
    border-radius: 3px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 600;
  }
  .fc-tag.bad { background: rgba(184,60,50,0.15); color: var(--fire); }
  .fc-tag.good { background: rgba(74,133,89,0.15); color: var(--wood); }
  .fc-tag.neutral { background: rgba(223,92,63,0.15); color: var(--gold); }
  .fc-year { font-size: 9px; color: var(--text-muted); margin-top: 3px; font-family: 'Noto Sans KR', sans-serif; }
  .fc-us {
    font-size: 9px; color: var(--text-dim); margin-top: 2px;
    font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.2px;
  }
  .dw-label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    padding: 6px 2px 4px; font-family: 'Noto Sans KR', sans-serif;
  }
  .dw-label span { font-weight: 400; font-size: 10px; color: var(--text-dim); margin-left: 4px; }
  .dw-row { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .fc-now {
    font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
    background: var(--gold); color: #fff; border-radius: 3px;
    padding: 1px 5px; margin-bottom: 2px; display: inline-block;
  }
  .fc-pill {
    border-radius: 5px; padding: 1px 4px;
    color: #fff !important; font-weight: 700;
    line-height: 1.2; display: inline-block; min-width: 22px;
  }
  .fortune-cell { min-width: 72px !important; }
  .fortune-detail {
    margin-top: 8px; padding: 10px 12px;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--gold-border); border-radius: 8px;
  }
  .fortune-detail-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
  }
  .fortune-detail-title {
    font-size: 13px; font-weight: 600; color: var(--gold);
    font-family: 'Noto Sans KR', sans-serif;
  }
  .fortune-detail-close {
    background: none; border: none; color: var(--text-muted);
    font-size: 18px; cursor: pointer; padding: 0 6px; line-height: 1;
  }
  .fortune-detail-close:hover { color: var(--fire); }

  /* ── DAEWOON-VIEW-SPEC D1/D2: dw-cell (대운·세운 강화) ─────────────────── */
  .dw-cell {
    flex: 0 0 56px; min-width: 56px;
    background: var(--color-bg-card, #FFFFFF);
    border: 1px solid var(--color-line, #D8D5CE);
    border-radius: var(--radius-md, 8px);
    padding: 6px 2px 4px;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
    scroll-snap-align: start;
    transition: all .15s;
    position: relative;
    outline: none;
  }
  .dw-cell:hover {
    border-color: var(--color-point, #DF5C3F);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  .dw-cell--current {
    border: 2px solid var(--color-point, #DF5C3F);
    box-shadow: 0 4px 12px rgba(223,92,63,0.18);
  }
  .dw-cell__now {
    position: absolute;
    top: -9px; left: 50%; transform: translateX(-50%);
    font-size: 9px;
    background: var(--color-point, #DF5C3F);
    color: #FFF;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
  .dw-cell__ss {
    font-size: 10px;
    color: var(--color-text-mute, #8A8A8F);
    margin-bottom: 3px;
    line-height: 1.2;
  }
  .dw-cell__tg, .dw-cell__zz {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif, 'Noto Serif KR', serif);
    font-size: 20px; font-weight: 500;
    border-radius: 4px;
    margin-bottom: 2px;
    color: #FFF;
    background: var(--color-text-mute, #8A8A8F);
  }
  .dw-cell__tg[data-oh="木"], .dw-cell__zz[data-oh="木"] { background: var(--color-oh-mok, #2E8B3F); }
  .dw-cell__tg[data-oh="火"], .dw-cell__zz[data-oh="火"] { background: var(--color-oh-hwa, #D72E1A); }
  .dw-cell__tg[data-oh="土"], .dw-cell__zz[data-oh="土"] { background: var(--color-oh-to,  #D48E15); }
  .dw-cell__tg[data-oh="金"], .dw-cell__zz[data-oh="金"] { background: var(--color-oh-geum,#5B7088); }
  .dw-cell__tg[data-oh="水"], .dw-cell__zz[data-oh="水"] { background: var(--color-oh-su,  #15407A); }
  .dw-cell__us {
    font-size: 9px;
    color: var(--color-text-mute, #8A8A8F);
    margin-top: 3px;
  }
  .dw-cell__sinsal {
    font-size: 8px;
    color: var(--color-error, #C0392B);
    margin-top: 2px;
    text-align: center;
    line-height: 1.1;
  }
  .dw-cell__age {
    font-size: 9px;
    color: var(--color-text-soft, #888);
    margin-top: 2px;
    font-feature-settings: 'tnum';
  }
  /* ─────────────────────────────────────────────────────────────────────────── */

  .section-hint {
    font-size: 9px; color: var(--text-muted);
    letter-spacing: 1px; margin-left: 6px;
    font-family: 'Noto Sans KR', sans-serif; font-weight: normal;
  }
  .sys-interp-block { margin-top: 8px; }
  .sys-analyze-btn {
    width: 100%; padding: 7px 12px;
    background: rgba(223,92,63,0.08);
    border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 7px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px; letter-spacing: 1.5px;
    cursor: pointer; transition: all .15s;
  }
  .sys-analyze-btn:hover { background: var(--gold-dim); border-color: var(--gold); }
  /* 전생 해석 */
  .pastlife-header {
    padding: 12px 14px; margin-bottom: 10px;
    background: linear-gradient(180deg, rgba(223,92,63,0.10), rgba(223,92,63,0.03));
    border: 1px solid var(--gold-border);
    border-radius: 8px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px; line-height: 1.7;
    color: var(--text-default);
  }
  .pastlife-header .pl-name {
    font-size: 16px; font-weight: 700;
    color: var(--gold); letter-spacing: 2px;
    margin-bottom: 4px;
    font-family: 'Noto Serif KR', serif;
  }
  .pastlife-header .pl-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
  .pastlife-header .pl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .pastlife-header .pl-tag {
    padding: 3px 8px; border-radius: 4px;
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    font-size: 11px; color: var(--gold);
  }
  .pastlife-go-btn {
    display: block; width: 100%;
    padding: 12px 16px; margin: 8px 0;
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 8px;
    font-family: 'Noto Serif KR', serif;
    font-size: 14px; letter-spacing: 4px;
    cursor: pointer; transition: all .2s;
  }
  .pastlife-go-btn:hover { background: var(--gold-dim); border-color: var(--gold); }
  .pastlife-go-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  /* 주식운 */
  .stock-sipsin-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
    margin: 10px 0;
  }
  .stock-sipsin-box {
    padding: 8px 6px;
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    text-align: center;
  }
  .stock-sipsin-label {
    font-size: 10px; color: var(--text-muted);
    letter-spacing: 1px; margin-bottom: 3px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .stock-sipsin-val {
    font-size: 16px; font-weight: 700;
    font-family: 'Noto Serif KR', serif;
  }
  .stock-sipsin-detail {
    font-size: 10px; color: var(--text-muted);
    margin-top: 3px; line-height: 1.3;
  }
  .stock-sectors-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px; margin: 10px 0;
  }
  .stock-sector-card {
    padding: 10px;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--gold-border);
    border-left: 4px solid;
    border-radius: 6px;
  }
  .stock-sector-card.strong { background: rgba(223,92,63,0.10); }
  .stock-sector-card.weak { background: rgba(0,0,0,0.04); opacity: 0.85; }
  .stock-sector-name {
    font-weight: 700; font-size: 13px;
    font-family: 'Noto Serif KR', serif;
    letter-spacing: 1px; margin-bottom: 4px;
  }
  .stock-sector-flag {
    display: inline-block;
    padding: 1px 6px; margin-left: 6px;
    border-radius: 8px;
    font-size: 9px; font-weight: 700;
    background: rgba(223,92,63,0.15); color: var(--gold);
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: 0.5px;
  }
  .stock-sector-flag.weak { background: rgba(99,140,184,0.15); color: #4a6a8a; }
  .stock-sector-list {
    font-size: 11px; color: var(--text-default);
    line-height: 1.7;
    font-family: 'Noto Sans KR', sans-serif;
  }
  /* 지역운 */
  /* 지역 통합 검색 */
  .region-search-wrap {
    position: relative;
    margin-bottom: 10px;
  }
  .region-search-wrap input {
    width: 100%;
    padding: 9px 38px 9px 14px;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--gold-border);
    border-radius: 8px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    color: var(--text-default);
    box-sizing: border-box;
  }
  .region-search-wrap input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255,255,255,0.85);
  }
  .region-search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px;
    background: rgba(0,0,0,0.06);
    border: none; border-radius: 50%;
    cursor: pointer; font-size: 15px;
    color: var(--text-muted);
    display: none;
  }
  .region-search-clear:hover { background: rgba(223,92,63,0.15); color: var(--gold); }
  .region-search-clear.visible { display: block; }
  .region-search-results {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: rgba(223,92,63,0.06);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    max-height: 420px;
    overflow-y: auto;
  }
  .region-search-results .sr-count {
    font-size: 11px; color: var(--gold);
    margin-bottom: 8px;
    letter-spacing: 1px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .region-search-results .sr-tag {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 4px;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--gold-border);
    border-radius: 8px;
    font-size: 9px;
    color: var(--text-muted);
    font-family: 'Noto Sans KR', sans-serif;
  }
  .region-mode-toggle {
    display: flex; gap: 6px; margin-bottom: 12px;
  }
  .region-mode-btn {
    flex: 1; padding: 10px 14px;
    background: rgba(223,92,63,0.05);
    border: 1px solid var(--gold-border);
    color: var(--text-default); border-radius: 7px;
    font-family: 'Noto Serif KR', serif;
    font-size: 13px; letter-spacing: 3px;
    cursor: pointer; transition: all .15s;
  }
  .region-mode-btn:hover { background: var(--gold-dim); }
  .region-mode-btn.active {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold);
  }
  .region-map-wrap {
    position: relative;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(223,92,63,0.18);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    text-align: center;
    overflow: hidden;
  }
  .region-map {
    display: block; margin: 0 auto; max-width: 100%; height: auto;
    user-select: none;
    cursor: grab;
  }
  .region-map.dragging { cursor: grabbing; }
  .region-zoom-controls {
    position: absolute; top: 16px; right: 16px;
    display: flex; flex-direction: column; gap: 4px;
    z-index: 5;
  }
  .region-zoom-btn {
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--gold-border);
    color: var(--text-default);
    border-radius: 6px;
    font-size: 16px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: all .15s;
  }
  .region-zoom-btn:hover { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }
  .region-zoom-btn.small-text { font-size: 11px; letter-spacing: 1px; }
  .region-zoom-info {
    position: absolute; top: 16px; left: 16px;
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--gold-border);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-default);
    z-index: 5;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .region-area {
    cursor: pointer;
    transition: all .2s;
  }
  .region-area:hover { filter: brightness(1.25); }
  .region-area.selected {
    stroke: var(--gold) !important;
    stroke-width: 2.5 !important;
  }
  .region-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px; fill: var(--text-default);
    pointer-events: none; text-anchor: middle;
    font-weight: 600;
  }
  .region-label.small { font-size: 9px; }
  .region-drilldown {
    margin-top: 10px; padding: 10px 12px;
    background: rgba(223,92,63,0.06);
    border-left: 2px solid var(--gold);
    border-radius: 4px;
  }
  .region-drilldown-title {
    font-size: 13px; color: var(--gold);
    margin-bottom: 8px; letter-spacing: 2px;
    font-family: 'Noto Serif KR', serif;
  }
  .region-sub-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 5px; margin-bottom: 8px;
  }
  .region-sub-btn {
    padding: 6px 8px;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--gold-border);
    color: var(--text-default); border-radius: 5px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px; cursor: pointer;
    transition: all .15s;
  }
  .region-sub-btn:hover { background: var(--gold-dim); border-color: var(--gold); }
  .region-sub-btn.active { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); font-weight: 700; }
  .region-dong-row { display: flex; gap: 6px; margin-top: 8px; }
  .region-dong-input {
    flex: 1; padding: 7px 10px;
    border: 1px solid var(--gold-border);
    background: rgba(255,255,255,0.5);
    border-radius: 5px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
  }
  .region-dong-btn {
    padding: 7px 14px;
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 5px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px; letter-spacing: 1.5px;
    cursor: pointer; transition: all .15s;
  }
  .region-dong-btn:hover { background: var(--gold-dim); }
  .region-header {
    padding: 12px 14px; margin-bottom: 10px;
    background: linear-gradient(180deg, rgba(223,92,63,0.10), rgba(223,92,63,0.03));
    border: 1px solid var(--gold-border);
    border-radius: 8px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px; line-height: 1.6;
    color: var(--text-default);
  }
  .region-header b { color: var(--gold); }
  /* 지역운 리스트 */
  .region-list-wrap {
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(223,92,63,0.18);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    max-height: 540px;
    overflow-y: auto;
  }
  .region-oh-section { margin-bottom: 16px; }
  .region-oh-section:last-child { margin-bottom: 0; }
  .region-oh-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 15px;
    letter-spacing: 4px;
    padding: 6px 10px;
    margin-bottom: 8px;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
  }
  .region-oh-title .oh-keyword {
    font-size: 11px; letter-spacing: 1.5px;
    margin-left: 8px; opacity: 0.85;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .region-pill {
    display: inline-block;
    margin: 2px;
    padding: 4px 9px;
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--gold-border);
    border-radius: 14px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: var(--text-default);
    cursor: pointer;
    transition: all .15s;
    line-height: 1.5;
  }
  .region-pill:hover {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold);
  }
  .region-pill.active {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold);
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(223,92,63,0.25);
  }
  .region-pill.sm { font-size: 11px; padding: 3px 7px; }
  .region-pill.xs { font-size: 10px; padding: 2px 6px; background: rgba(255,255,255,0.4); }
  .region-pill .yy-mark { font-size: 9px; margin-left: 3px; opacity: 0.85; }
  .region-sido-card {
    padding: 8px 10px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.45);
    border-left: 3px solid;
    border-radius: 4px;
  }
  .region-sido-header {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-bottom: 6px;
  }
  .region-sido-meta { font-size: 11px; color: var(--text-muted); font-family: 'Noto Sans KR', sans-serif; }
  .region-sg-row {
    margin: 4px 0 6px;
    padding: 4px 6px;
    background: rgba(255,255,255,0.4);
    border-radius: 4px;
  }
  .region-sg-row .sg-head {
    display: inline-block; margin-right: 6px;
  }
  .region-dong-list { display: inline; }
  /* 강의 학습 */
  .learn-input-group { display: flex; flex-direction: column; gap: 8px; }
  .learn-input-group input,
  .learn-input-group textarea {
    width: 100%;
    padding: 8px 10px;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: var(--text-default);
    box-sizing: border-box;
  }
  .learn-input-group textarea { resize: vertical; min-height: 60px; }
  .learn-btn {
    width: 100%; padding: 10px 14px;
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 7px;
    font-family: 'Noto Serif KR', serif;
    font-size: 13px; letter-spacing: 4px;
    cursor: pointer; transition: all .2s;
  }
  .learn-btn:hover { background: var(--gold-dim); border-color: var(--gold); }
  .learn-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  /* 유튜브 강의방 */
  .yt-room-layout { display:flex; gap:20px; align-items:flex-start; }
  .yt-room-left { flex:1; min-width:0; }
  .yt-room-right { width:300px; flex-shrink:0; }
  @media(max-width:900px){ .yt-room-layout{ flex-direction:column; } .yt-room-right{ width:100%; } }
  .yt-add-row { display:flex; gap:8px; margin-bottom:10px; }
  .yt-add-row input { flex:1; padding:9px 11px; background:rgba(255,255,255,0.6); border:1px solid var(--gold-border); border-radius:7px; font-size:13px; color:var(--text-default); font-family:'Noto Sans KR',sans-serif; }
  .yt-add-btn { padding:9px 16px; background:rgba(223,92,63,0.10); border:1px solid var(--gold-border); color:var(--gold); border-radius:7px; font-size:13px; cursor:pointer; white-space:nowrap; font-family:'Noto Sans KR',sans-serif; }
  .yt-add-btn:hover { background:var(--gold-dim); }
  .yt-queue { margin-bottom:12px; display:flex; flex-direction:column; gap:6px; }
  .yt-queue-empty { font-size:12px; color:var(--text-muted); padding:12px 0; text-align:center; }
  .yt-queue-item { display:flex; align-items:center; gap:8px; padding:8px 10px; background:rgba(255,255,255,0.5); border:1px solid var(--gold-border); border-radius:7px; font-size:12px; font-family:'Noto Sans KR',sans-serif; }
  .yt-queue-item.processing { border-color:var(--gold); background:rgba(223,92,63,0.08); }
  .yt-queue-item.done { border-color:#4caf50; background:rgba(76,175,80,0.05); opacity:0.7; }
  .yt-queue-item.error { border-color:var(--fire); background:rgba(184,60,50,0.05); }
  .yt-queue-num { font-size:11px; color:var(--text-muted); min-width:18px; }
  .yt-queue-url { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-default); }
  .yt-queue-state { font-size:11px; white-space:nowrap; }
  .yt-queue-del { padding:2px 7px; border:1px solid var(--gold-border); background:transparent; border-radius:4px; color:var(--text-muted); cursor:pointer; font-size:11px; }
  .yt-queue-del:hover { color:var(--fire); border-color:rgba(184,60,50,0.4); }
  .yt-preset-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .yt-preset-chip { padding:4px 11px; border-radius:14px; border:1px solid var(--gold-border); background:rgba(255,255,255,0.5); font-size:11px; color:var(--text-muted); cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:all .15s; }
  .yt-preset-chip:hover, .yt-preset-chip.on { background:rgba(223,92,63,0.13); color:var(--gold); border-color:var(--gold); }
  .yt-purpose-input { width:100%; padding:9px 11px; background:rgba(255,255,255,0.6); border:1px solid var(--gold-border); border-radius:7px; font-size:12px; color:var(--text-default); font-family:'Noto Sans KR',sans-serif; resize:vertical; min-height:72px; box-sizing:border-box; margin-bottom:12px; }
  .yt-run-row { display:flex; gap:8px; }
  .yt-run-btn { flex:1; padding:11px 14px; background:rgba(223,92,63,0.10); border:1px solid var(--gold-border); color:var(--gold); border-radius:8px; font-family:'Noto Serif KR',serif; font-size:13px; letter-spacing:4px; cursor:pointer; transition:all .2s; }
  .yt-run-btn:hover { background:var(--gold-dim); border-color:var(--gold); }
  .yt-run-btn:disabled { opacity:0.45; cursor:not-allowed; }
  .yt-stop-btn { padding:11px 16px; background:rgba(184,60,50,0.07); border:1px solid rgba(184,60,50,0.3); color:var(--fire); border-radius:8px; font-family:'Noto Sans KR',sans-serif; font-size:12px; cursor:pointer; }
  .yt-log { margin-top:12px; max-height:120px; overflow-y:auto; font-size:11px; font-family:'Noto Sans KR',sans-serif; line-height:1.7; padding:8px 10px; background:rgba(255,255,255,0.5); border:1px solid var(--gold-border); border-radius:7px; }
  .yt-recent-label { font-size:11px; color:var(--text-muted); margin-bottom:8px; font-family:'Noto Sans KR',sans-serif; letter-spacing:1px; }
  .yt-recent-list { display:flex; flex-direction:column; gap:7px; }
  .yt-recent-item { padding:9px 11px; background:rgba(255,255,255,0.55); border:1px solid var(--gold-border); border-radius:7px; font-size:11px; font-family:'Noto Sans KR',sans-serif; cursor:pointer; transition:all .15s; }
  .yt-recent-item:hover { background:var(--gold-dim); }
  .yt-recent-item.enabled { border-left:3px solid var(--gold); }
  .yt-recent-title { font-weight:700; color:var(--gold); margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'Noto Serif KR',serif; }
  .yt-recent-meta { color:var(--text-muted); font-size:10px; }
  /* 자동 검색·분석 */
  .auto-search-divider { display:flex; align-items:center; gap:12px; margin:22px 0 18px; }
  .auto-search-divider::before, .auto-search-divider::after { content:''; flex:1; height:1px; background:var(--gold-border); }
  .auto-search-divider span { font-size:11px; color:var(--text-muted); font-family:'Noto Sans KR',sans-serif; white-space:nowrap; }
  .al-key-row { display:flex; gap:8px; margin-bottom:14px; align-items:center; }
  .al-key-row input { flex:1; padding:8px 11px; background:rgba(255,255,255,0.6); border:1px solid var(--gold-border); border-radius:6px; font-size:12px; color:var(--text-default); font-family:'Noto Sans KR',sans-serif; }
  .al-key-row a { font-size:11px; color:var(--gold); text-decoration:none; white-space:nowrap; }
  .al-keyword-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .al-keyword-chip { padding:4px 11px; border-radius:14px; border:1px solid var(--gold-border); background:rgba(255,255,255,0.5); font-size:11px; color:var(--text-muted); cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:all .15s; user-select:none; }
  .al-keyword-chip.on { background:rgba(223,92,63,0.13); color:var(--gold); border-color:var(--gold); }
  .al-chip-row { display:flex; gap:6px; margin-bottom:12px; }
  .al-chip-btn { padding:4px 10px; border:1px solid var(--gold-border); background:rgba(255,255,255,0.5); border-radius:5px; font-size:11px; color:var(--text-muted); cursor:pointer; font-family:'Noto Sans KR',sans-serif; }
  .al-chip-btn:hover { background:var(--gold-dim); color:var(--gold); }
  .al-options-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
  .al-options-row label { font-size:11px; color:var(--text-muted); font-family:'Noto Sans KR',sans-serif; white-space:nowrap; }
  .al-options-row select { padding:6px 8px; background:rgba(255,255,255,0.6); border:1px solid var(--gold-border); border-radius:6px; font-size:12px; color:var(--text-default); font-family:'Noto Sans KR',sans-serif; }
  .al-options-row input[type=text] { flex:1; min-width:160px; padding:6px 10px; background:rgba(255,255,255,0.6); border:1px solid var(--gold-border); border-radius:6px; font-size:12px; color:var(--text-default); font-family:'Noto Sans KR',sans-serif; }
  .al-run-row { display:flex; gap:8px; margin-bottom:12px; }
  .al-go-btn-el { flex:1; padding:11px 14px; background:rgba(223,92,63,0.10); border:1px solid var(--gold-border); color:var(--gold); border-radius:8px; font-family:'Noto Serif KR',serif; font-size:13px; letter-spacing:4px; cursor:pointer; transition:all .2s; }
  .al-go-btn-el:hover { background:var(--gold-dim); border-color:var(--gold); }
  .al-go-btn-el:disabled { opacity:0.45; cursor:not-allowed; }
  .al-stop-btn-el { padding:11px 16px; background:rgba(184,60,50,0.07); border:1px solid rgba(184,60,50,0.3); color:var(--fire); border-radius:8px; font-family:'Noto Sans KR',sans-serif; font-size:12px; cursor:pointer; }
  .al-progress-card { background:rgba(255,255,255,0.5); border:1px solid var(--gold-border); border-radius:8px; padding:12px 14px; }
  .al-progress-head { font-size:12px; color:var(--text-default); font-family:'Noto Sans KR',sans-serif; margin-bottom:8px; }
  .al-progress-bar-bg { height:6px; background:rgba(223,92,63,0.12); border-radius:3px; margin-bottom:10px; }
  .al-progress-bar-fill { height:100%; background:var(--gold); border-radius:3px; transition:width .3s; }
  .al-log { max-height:160px; overflow-y:auto; font-size:11px; font-family:'Noto Sans KR',sans-serif; line-height:1.7; }
  .al-log-row.info { color:var(--text-default); }
  .al-log-row.success { color:#4caf50; }
  .al-log-row.error { color:var(--fire); }
  /* 텍스트 복사방 슬롯 */
  .txt-slot-tabs { display:flex; gap:6px; margin-bottom:0; }
  .txt-slot-tab {
    flex:1; padding:10px 8px; text-align:center;
    background:rgba(255,255,255,0.45); border:1px solid var(--gold-border);
    border-bottom:none; border-radius:8px 8px 0 0;
    font-size:12px; font-family:'Noto Sans KR',sans-serif;
    color:var(--text-muted); cursor:pointer; transition:all .15s;
    position:relative;
  }
  .txt-slot-tab:hover { background:var(--gold-dim); color:var(--gold); }
  .txt-slot-tab.active { background:rgba(255,255,255,0.95); color:var(--gold); font-weight:700; border-color:var(--gold); }
  .txt-slot-tab .txt-slot-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); margin-left:5px; vertical-align:middle; opacity:0; }
  .txt-slot-tab.has-content .txt-slot-dot { opacity:1; }
  .txt-slot-body { background:rgba(255,255,255,0.95); border:1px solid var(--gold); border-radius:0 0 8px 8px; padding:16px; margin-bottom:12px; }
  .txt-slot-body input { width:100%; padding:8px 10px; background:rgba(255,255,255,0.7); border:1px solid var(--gold-border); border-radius:6px; font-size:13px; color:var(--text-default); font-family:'Noto Sans KR',sans-serif; box-sizing:border-box; margin-bottom:10px; }
  .txt-slot-body textarea { width:100%; padding:9px 11px; background:rgba(255,255,255,0.7); border:1px solid var(--gold-border); border-radius:6px; font-size:12px; color:var(--text-default); font-family:'Noto Sans KR',sans-serif; resize:vertical; box-sizing:border-box; margin-bottom:10px; line-height:1.7; }
  .txt-slot-actions { display:flex; gap:8px; margin-top:4px; }
  .txt-slot-go-btn { flex:1; padding:10px 14px; background:rgba(223,92,63,0.10); border:1px solid var(--gold-border); color:var(--gold); border-radius:7px; font-family:'Noto Serif KR',serif; font-size:12px; letter-spacing:3px; cursor:pointer; transition:all .2s; }
  .txt-slot-go-btn:hover { background:var(--gold-dim); border-color:var(--gold); }
  .txt-slot-go-btn:disabled { opacity:0.45; cursor:not-allowed; }
  .txt-slot-clear-btn { padding:10px 14px; background:rgba(184,60,50,0.05); border:1px solid rgba(184,60,50,0.2); color:var(--fire); border-radius:7px; font-size:12px; cursor:pointer; font-family:'Noto Sans KR',sans-serif; }
  .txt-slot-clear-btn:hover { background:rgba(184,60,50,0.10); }
  .txt-run-all-btn { width:100%; padding:11px 14px; background:rgba(223,92,63,0.12); border:1px solid var(--gold); color:var(--gold); border-radius:8px; font-family:'Noto Serif KR',serif; font-size:13px; letter-spacing:4px; cursor:pointer; transition:all .2s; margin-bottom:12px; }
  .txt-run-all-btn:hover { background:var(--gold-dim); }
  .txt-run-all-btn:disabled { opacity:0.45; cursor:not-allowed; }
  .txt-status { font-size:12px; font-family:'Noto Sans KR',sans-serif; padding:8px 10px; border-radius:6px; margin-top:6px; }
  .txt-status.info { background:rgba(223,92,63,0.07); color:var(--gold); border:1px solid var(--gold-border); }
  .txt-status.ok { background:rgba(76,175,80,0.08); color:#4caf50; border:1px solid rgba(76,175,80,0.3); }
  .txt-status.err { background:rgba(184,60,50,0.07); color:var(--fire); border:1px solid rgba(184,60,50,0.3); }
  /* 학습방 타일 + 패널 */
  .learn-room-tiles { display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
  .learn-room-tile {
    flex:1; min-width:160px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:22px 16px;
    background:rgba(255,255,255,0.55);
    border:1px solid var(--gold-border);
    border-radius:12px;
    cursor:pointer; transition:all .2s;
    font-family:'Noto Serif KR',serif;
    text-align:center;
  }
  .learn-room-tile:hover { background:var(--gold-dim); border-color:var(--gold); transform:translateY(-2px); box-shadow:0 4px 16px rgba(223,92,63,0.13); }
  .learn-room-tile.active { background:rgba(223,92,63,0.13); border-color:var(--gold); border-width:2px; box-shadow:0 4px 18px rgba(223,92,63,0.18); }
  .learn-room-tile-icon { font-size:28px; line-height:1; }
  .learn-room-tile-name { font-size:14px; color:var(--gold); letter-spacing:2px; font-weight:700; }
  .learn-room-tile-desc { font-size:11px; color:var(--text-muted); font-family:'Noto Sans KR',sans-serif; letter-spacing:0; }
  .learn-room-panel { padding:24px 28px !important; }
  /* 사이트 목록 자동 수집 */
  .crawl-add-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
  .crawl-add-row input { flex:2; min-width:160px; padding:7px 10px; background:rgba(255,255,255,0.6); border:1px solid var(--gold-border); border-radius:6px; font-size:12px; color:var(--text-default); font-family:'Noto Sans KR',sans-serif; }
  .crawl-add-row select { flex:1; min-width:100px; padding:7px 8px; background:rgba(255,255,255,0.6); border:1px solid var(--gold-border); border-radius:6px; font-size:12px; color:var(--text-default); font-family:'Noto Sans KR',sans-serif; }
  .crawl-add-btn { padding:7px 14px; background:rgba(223,92,63,0.10); border:1px solid var(--gold-border); color:var(--gold); border-radius:6px; font-size:12px; cursor:pointer; white-space:nowrap; font-family:'Noto Sans KR',sans-serif; }
  .crawl-add-btn:hover { background:var(--gold-dim); }
  .crawl-table { width:100%; border-collapse:collapse; font-size:12px; font-family:'Noto Sans KR',sans-serif; }
  .crawl-table th { padding:7px 8px; text-align:left; color:var(--text-muted); font-weight:400; border-bottom:1px solid var(--gold-border); font-size:11px; }
  .crawl-table td { padding:8px 8px; border-bottom:1px solid rgba(223,92,63,0.08); vertical-align:middle; }
  .crawl-table tr.disabled td { opacity:0.45; }
  .crawl-table tr:last-child td { border-bottom:none; }
  .crawl-url-text { color:var(--text-muted); font-size:10px; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .crawl-title-text { color:var(--text-default); font-weight:500; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .crawl-cat-badge { display:inline-block; padding:2px 7px; border-radius:10px; font-size:10px; background:rgba(223,92,63,0.10); color:var(--gold); border:1px solid var(--gold-border); }
  .crawl-status-text { font-size:10px; color:var(--text-muted); white-space:nowrap; }
  .crawl-status-text.ok { color:#4caf50; }
  .crawl-status-text.err { color:var(--fire); }
  .crawl-status-text.running { color:var(--gold); }
  .crawl-action-btn { padding:3px 8px; border-radius:5px; border:1px solid var(--gold-border); background:rgba(255,255,255,0.5); color:var(--text-muted); cursor:pointer; font-size:11px; }
  .crawl-action-btn:hover { background:var(--gold-dim); color:var(--gold); }
  .crawl-action-btn.del:hover { background:rgba(184,60,50,0.08); color:var(--fire); border-color:rgba(184,60,50,0.3); }
  .crawl-run-row { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
  .crawl-run-btn { flex:1; padding:10px 14px; background:rgba(223,92,63,0.10); border:1px solid var(--gold-border); color:var(--gold); border-radius:7px; font-family:'Noto Serif KR',serif; font-size:12px; letter-spacing:3px; cursor:pointer; transition:all .2s; }
  .crawl-run-btn:hover { background:var(--gold-dim); border-color:var(--gold); }
  .crawl-run-btn:disabled { opacity:0.5; cursor:not-allowed; }
  .crawl-run-btn.stop { background:rgba(184,60,50,0.06); border-color:rgba(184,60,50,0.3); color:var(--fire); }
  .crawl-log { margin-top:10px; max-height:140px; overflow-y:auto; font-size:11px; font-family:'Noto Sans KR',sans-serif; color:var(--text-default); line-height:1.7; padding:8px 10px; background:rgba(255,255,255,0.5); border-radius:6px; border:1px solid var(--gold-border); display:none; }
  .learn-card {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.45);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
  }
  .learn-card.enabled { border-left: 3px solid var(--gold); background: rgba(223,92,63,0.06); }
  .learn-card-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px; flex-wrap: wrap;
  }
  .learn-card-title {
    flex: 1; font-weight: 700;
    color: var(--gold); font-size: 13px;
    font-family: 'Noto Serif KR', serif;
  }
  .learn-card-meta {
    font-size: 10px; color: var(--text-muted);
    font-family: 'Noto Sans KR', sans-serif;
  }
  .learn-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    transition: all .15s;
    user-select: none;
  }
  .learn-toggle.on { background: var(--gold-dim); color: var(--gold); border: 1px solid var(--gold); font-weight: 700; }
  .learn-toggle.off { background: rgba(0,0,0,0.05); color: var(--text-muted); border: 1px solid var(--gold-border); }
  .learn-card-body {
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.6);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-default);
    white-space: pre-wrap;
    max-height: 260px;
    overflow-y: auto;
    line-height: 1.7;
  }
  .learn-card-actions {
    display: flex; gap: 6px;
  }
  .learn-card-actions button {
    padding: 3px 8px;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--gold-border);
    border-radius: 4px;
    color: var(--text-default);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 10px;
    cursor: pointer;
  }
  .learn-card-actions button:hover { background: var(--gold-dim); border-color: var(--gold); }
  .learn-card-actions .danger { color: var(--fire); border-color: rgba(184,60,50,0.35); }
  .learn-status {
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .learn-status.info { background: rgba(223,92,63,0.10); color: var(--gold); }
  .learn-status.error { background: rgba(184,60,50,0.10); color: var(--fire); }
  .learn-status.success { background: rgba(74,133,89,0.10); color: var(--wood); }
  .learn-url-link {
    font-size: 10px; color: var(--text-muted);
    text-decoration: none;
    word-break: break-all;
  }
  .learn-url-link:hover { color: var(--gold); text-decoration: underline; }
  /* 학습 이력·통합 가르침 */
  .learn-history-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px; margin-bottom: 10px;
  }
  .learn-stat-box {
    padding: 8px 10px;
    background: rgba(223,92,63,0.08);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    text-align: center;
  }
  .learn-stat-label {
    font-size: 10px; color: var(--text-muted);
    letter-spacing: 1.5px; margin-bottom: 3px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .learn-stat-val {
    font-size: 18px; font-weight: 700;
    color: var(--gold);
    font-family: 'Noto Serif KR', serif;
  }
  .learn-history-list {
    margin-top: 8px;
    max-height: 200px; overflow-y: auto;
    padding: 4px 0;
  }
  .learn-history-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; margin-bottom: 3px;
    background: rgba(255,255,255,0.4);
    border-radius: 4px;
    font-size: 11px;
    border-left: 2px solid transparent;
  }
  .learn-history-row.enabled { border-left-color: var(--gold); }
  .learn-history-row .h-title { flex: 1; font-weight: 600; color: var(--text-default); }
  .learn-history-row .h-date { font-size: 10px; color: var(--text-muted); }
  .learn-history-row .h-state {
    font-size: 10px; padding: 2px 6px; border-radius: 8px;
  }
  .learn-history-row .h-state.on { background: rgba(223,92,63,0.15); color: var(--gold); }
  .learn-history-row .h-state.off { background: rgba(0,0,0,0.06); color: var(--text-muted); }
  .learn-summary-btn {
    width: 100%; padding: 9px;
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 6px;
    font-family: 'Noto Serif KR', serif;
    font-size: 12px; letter-spacing: 3px;
    cursor: pointer; transition: all .15s;
    margin-top: 8px;
  }
  .learn-summary-btn:hover { background: var(--gold-dim); border-color: var(--gold); }
  .learn-summary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .learn-summary-text {
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    font-size: 13px; line-height: 1.85;
    color: var(--text-default);
    white-space: pre-wrap;
    max-height: 480px;
    overflow-y: auto;
  }
  /* 자동 학습 */
  .auto-learn-group { display: flex; flex-direction: column; gap: 8px; }
  .auto-learn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .auto-learn-row label {
    font-size: 11px; color: var(--text-muted);
    font-family: 'Noto Sans KR', sans-serif;
    min-width: 80px;
  }
  .auto-learn-row input[type="text"],
  .auto-learn-row input[type="password"],
  .auto-learn-row select {
    padding: 6px 8px;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--gold-border);
    border-radius: 5px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: var(--text-default);
  }
  .auto-learn-row input[type="text"], .auto-learn-row input[type="password"] { flex: 1; min-width: 200px; }
  .al-keyword-chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .al-subject-group { border: 1px solid var(--gold-border); border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
  .al-subject-label { padding: 7px 12px; background: rgba(223,92,63,0.07); font-size: 12px; color: var(--gold); cursor: pointer; user-select: none; font-family: 'Noto Serif KR', serif; display: flex; align-items: center; gap: 4px; }
  .al-subject-label:hover { background: rgba(223,92,63,0.13); }
  .al-subject-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  .al-keyword-chip {
    padding: 4px 9px;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--gold-border);
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-default);
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    user-select: none;
    transition: all .15s;
  }
  .al-keyword-chip:hover { background: var(--gold-dim); }
  .al-keyword-chip.on {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold);
    font-weight: 700;
  }
  .al-go-btn {
    flex: 1; padding: 10px;
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 7px;
    font-family: 'Noto Serif KR', serif;
    font-size: 13px; letter-spacing: 4px;
    cursor: pointer;
    transition: all .2s;
  }
  .al-go-btn:hover { background: var(--gold-dim); border-color: var(--gold); }
  .al-go-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  /* 자동 검색/분석 분리 카드 */
  .al-section-card { border: 1px solid var(--gold-border); border-radius: 10px; padding: 16px; margin-top: 18px; background: rgba(255,255,255,0.4); }
  .al-section-header { font-family: 'Noto Serif KR', serif; font-size: 13px; color: var(--gold); letter-spacing: 2px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
  .al-section-sub { font-size: 10px; color: var(--text-muted); font-family: 'Noto Sans KR', sans-serif; letter-spacing: 0; font-weight: 400; }
  /* 검색 결과 테이블 */
  .al-result-table { width: 100%; border-collapse: collapse; font-size: 11px; }
  .al-result-table th { padding: 5px 8px; background: rgba(223,92,63,0.08); color: var(--gold); font-weight: 600; text-align: left; border-bottom: 1px solid var(--gold-border); }
  .al-result-table td { padding: 5px 8px; border-bottom: 1px solid rgba(0,0,0,0.05); color: var(--text-default); vertical-align: top; }
  .al-result-table tr:hover td { background: rgba(223,92,63,0.04); }
  .al-result-idx { color: var(--text-muted); width: 20px; }
  .al-result-title { max-width: 280px; }
  .al-result-title a { color: var(--text-default); text-decoration: none; }
  .al-result-title a:hover { color: var(--gold); }
  .al-result-ch { color: var(--text-muted); white-space: nowrap; }
  .al-result-views { white-space: nowrap; text-align: right; }
  .al-result-dur { white-space: nowrap; text-align: right; color: var(--text-muted); }
  /* ── API 사용량 패널 ── */
  .usage-card { background: rgba(255,255,255,0.45); border: 1px solid var(--gold-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
  .usage-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .usage-card-title { font-family: 'Noto Serif KR', serif; font-size: 13px; color: var(--gold); letter-spacing: 1px; }
  .usage-card-model { font-size: 10px; color: var(--text-muted); background: rgba(223,92,63,0.07); padding: 2px 7px; border-radius: 8px; }
  .usage-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
  .usage-label { color: var(--text-muted); min-width: 90px; flex-shrink: 0; }
  .usage-bar-wrap { flex: 1; background: rgba(0,0,0,0.07); border-radius: 4px; height: 7px; overflow: hidden; }
  .usage-bar { height: 100%; border-radius: 4px; transition: width .4s; }
  .usage-bar.green { background: #4caf80; }
  .usage-bar.yellow { background: #e6b94a; }
  .usage-bar.red { background: var(--fire); }
  .usage-num { color: var(--text-default); font-variant-numeric: tabular-nums; min-width: 110px; text-align: right; flex-shrink: 0; }
  .usage-reset { font-size: 10px; color: var(--text-muted); margin-top: 6px; text-align: right; }
  .usage-note { font-size: 10px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
  .usage-refresh-btn { padding: 5px 10px; background: rgba(223,92,63,0.10); border: 1px solid var(--gold-border); color: var(--gold); border-radius: 5px; cursor: pointer; font-size: 11px; }
  .al-stop-btn {
    padding: 10px 16px;
    background: rgba(184,60,50,0.12);
    border: 1px solid rgba(184,60,50,0.35);
    color: var(--fire);
    border-radius: 7px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px; letter-spacing: 2px;
    cursor: pointer;
  }
  .al-stop-btn:hover { background: rgba(184,60,50,0.22); }
  .al-progress-card {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(223,92,63,0.06);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
  }
  .al-progress-head {
    font-size: 12px; font-weight: 700; color: var(--gold);
    margin-bottom: 6px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .al-progress-bar-bg {
    height: 8px; background: rgba(223,92,63,0.15);
    border: 1px solid var(--gold-border); border-radius: 4px;
    overflow: hidden;
  }
  .al-progress-bar-fill {
    height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    transition: width 0.3s;
  }
  .al-log {
    margin-top: 8px; max-height: 200px; overflow-y: auto;
    font-size: 11px; line-height: 1.7;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .al-log-row { padding: 3px 0; }
  .al-log-row.success { color: var(--wood); }
  .al-log-row.error { color: var(--fire); }
  .al-log-row.info { color: var(--text-default); }
  .al-log-row.skip { color: var(--text-muted); }
  /* 통합 학습 입구 */
  .learn-source-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--gold-border);
    padding-bottom: 6px;
    margin-bottom: 14px;
  }
  .learn-source-btn {
    padding: 7px 14px;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--gold-border);
    color: var(--text-default);
    border-radius: 6px 6px 0 0;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all .15s;
  }
  .learn-source-btn:hover { background: var(--gold-dim); }
  .learn-source-btn.active {
    background: var(--gold-dim);
    color: var(--gold);
    border-color: var(--gold);
    font-weight: 700;
  }
  .learn-source-pane { display: none; }
  .learn-source-pane.active { display: block; }
  .learn-source-pane textarea {
    width: 100%;
    min-height: 140px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-default);
    resize: vertical;
    box-sizing: border-box;
  }
  .learn-source-pane input[type="text"] {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: var(--text-default);
    box-sizing: border-box;
    margin-bottom: 8px;
  }
  .learn-source-help {
    font-size: 11px; color: var(--text-muted);
    background: rgba(223,92,63,0.06);
    border-left: 2px solid var(--gold-border);
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
    line-height: 1.7;
  }
  .learn-source-help b { color: var(--gold); }
  /* 역학 공부 탭 */
  .study-overview-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
  }
  .study-cat-stat {
    padding: 8px 6px; border-radius: 6px;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--gold-border);
    text-align: center;
    cursor: pointer;
    transition: all .15s;
  }
  .study-cat-stat:hover { background: var(--gold-dim); border-color: var(--gold); }
  .study-cat-stat .sc-name {
    font-size: 11px; color: var(--text-default);
    font-family: 'Noto Sans KR', sans-serif;
    margin-bottom: 2px;
  }
  .study-cat-stat .sc-count {
    font-size: 16px; font-weight: 700;
    color: var(--gold);
    font-family: 'Noto Serif KR', serif;
  }
  .study-cat-stat.empty { opacity: 0.4; }
  .study-cat-stat.empty .sc-count { color: var(--text-muted); }
  .study-cat-card {
    margin-bottom: 10px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--gold-border);
    border-left: 4px solid var(--gold);
    border-radius: 6px;
  }
  .study-cat-card.empty { display: none; }
  .study-cat-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px; flex-wrap: wrap;
  }
  .study-cat-name {
    flex: 1; font-family: 'Noto Serif KR', serif;
    font-size: 15px; font-weight: 700;
    color: var(--gold); letter-spacing: 2px;
  }
  .study-cat-desc {
    font-size: 11px; color: var(--text-muted);
    margin-bottom: 8px;
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.6;
  }
  .study-cat-notes {
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(223,92,63,0.05);
    border-radius: 5px;
  }
  .study-note-row {
    padding: 5px 0;
    border-bottom: 1px dashed rgba(223,92,63,0.15);
    font-size: 11px;
  }
  .study-note-row:last-child { border-bottom: none; }
  .study-note-row .sn-title { font-weight: 600; color: var(--text-default); }
  .study-note-row .sn-date { font-size: 10px; color: var(--text-muted); margin-left: 6px; }
  .study-cat-btn {
    padding: 5px 10px;
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    color: var(--gold);
    border-radius: 5px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px; letter-spacing: 1px;
    cursor: pointer;
  }
  .study-cat-btn:hover { background: var(--gold-dim); }
  /* 역학 공부방 — 책 UI */
  .study-book {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 600px;
    background: linear-gradient(180deg, #f5efe2, #ebe3d2);
  }
  .study-toc {
    background: rgba(31,26,20,0.04);
    border-right: 1px solid var(--gold-border);
    padding: 16px 12px;
    max-height: 80vh; overflow-y: auto;
  }
  .study-toc-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 14px; font-weight: 900;
    color: var(--gold); letter-spacing: 2px;
    text-align: center;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1.5px solid var(--gold);
    line-height: 1.4;
  }
  .study-toc-sub { font-size: 9px; letter-spacing: 4px; color: var(--text-muted); font-weight: 400; font-family: 'Inter', sans-serif; }
  .study-toc-section {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 10px; font-weight: 900;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    margin: 10px 0 4px 4px;
  }
  .study-toc-item {
    padding: 6px 10px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: var(--text-default);
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 2px;
    transition: all .15s;
    display: flex; align-items: center; gap: 6px;
  }
  .study-toc-item:hover { background: var(--gold-dim); color: var(--gold); }
  .study-toc-item.active {
    background: var(--gold-dim);
    color: var(--gold);
    font-weight: 700;
    border-left: 3px solid var(--gold);
    padding-left: 7px;
  }
  .study-toc-item .toc-icon {
    font-family: 'Noto Serif KR', serif;
    font-size: 13px; font-weight: 900;
    color: var(--gold);
    min-width: 16px;
  }
  .study-page {
    padding: 28px 36px;
    background: var(--color-bg-card, #FFFFFF);
    max-height: 80vh; overflow-y: auto;
    line-height: 1.85;
  }
  .study-cover {
    text-align: center;
    padding: 80px 20px;
  }
  .study-cover-symbol {
    font-family: 'Noto Serif KR', serif;
    font-size: 120px; font-weight: 900;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 16px;
  }
  .study-cover-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 32px; font-weight: 900;
    color: var(--ink);
    letter-spacing: 8px;
    margin-bottom: 8px;
  }
  .study-cover-sub {
    font-size: 13px; color: var(--text-muted);
    letter-spacing: 2px; margin-bottom: 30px;
  }
  .study-cover-hint {
    font-size: 11px; color: var(--gold);
    letter-spacing: 1px;
  }
  .study-page h1 {
    font-family: 'Noto Serif KR', serif;
    font-size: 24px; font-weight: 900;
    color: var(--gold);
    letter-spacing: 3px;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 8px;
    margin-bottom: 18px;
  }
  .study-page h2 {
    font-family: 'Noto Serif KR', serif;
    font-size: 16px; font-weight: 700;
    color: var(--ink);
    letter-spacing: 2px;
    margin: 18px 0 8px;
    border-left: 3px solid var(--gold);
    padding-left: 10px;
  }
  .study-page p { margin-bottom: 12px; color: var(--text-default); font-size: 13px; }
  .study-page .entry {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(223,92,63,0.15);
    border-left: 3px solid var(--gold);
    border-radius: 4px;
  }
  .study-page .entry-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 15px; font-weight: 700;
    color: var(--gold);
    margin-bottom: 6px;
  }
  .study-page .entry-row { display: flex; gap: 8px; margin-bottom: 4px; font-size: 12px; line-height: 1.6; }
  .study-page .entry-row .label {
    min-width: 50px;
    color: var(--gold);
    font-weight: 700;
    font-size: 11px;
  }
  .study-page .entry-row .value { flex: 1; color: var(--text-default); }
  .study-page .grid-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .study-page .quote {
    background: rgba(223,92,63,0.06);
    border-left: 3px solid var(--gold);
    padding: 10px 14px;
    margin: 12px 0;
    font-style: italic;
    color: var(--text-default);
    font-size: 13px;
  }
  @media (max-width: 768px) {
    .study-book { grid-template-columns: 1fr; }
    .study-toc { max-height: 200px; }
    .study-page { padding: 16px 18px; }
  }
  .study-cat-summary {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--gold-border);
    border-radius: 5px;
    font-size: 12px; line-height: 1.85;
    color: var(--text-default);
    white-space: pre-wrap;
    max-height: 380px; overflow-y: auto;
  }
  .sys-interp-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 5px;
  }
  .sys-interp-label {
    font-size: 9px; color: var(--gold);
    letter-spacing: 1.5px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .re-analyze-btn {
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    color: var(--gold);
    font-size: 10px; cursor: pointer;
    padding: 3px 9px; border-radius: 5px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .re-analyze-btn:hover { background: var(--gold-dim); }
  /* 일반/Claude 듀얼 버튼 */
  .dual-btn-group { display: inline-flex; gap: 4px; }
  .dual-btn-claude {
    padding: 3px 9px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.35);
    color: #4338ca; border-radius: 4px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px; cursor: pointer;
    letter-spacing: 0.5px;
    transition: all .15s;
  }
  .dual-btn-claude:hover { background: rgba(99,102,241,0.18); border-color: #6366f1; }
  .dual-btn-normal {
    padding: 3px 9px;
    background: rgba(223,92,63,0.08);
    border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 4px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px; cursor: pointer;
    letter-spacing: 0.5px;
    transition: all .15s;
  }
  .dual-btn-normal:hover { background: var(--gold-dim); }
  /* 피드백 별점 */
  .star-btn {
    background: none; border: none; cursor: pointer;
    font-size: 16px; color: #555; padding: 0 1px;
    transition: color .1s, transform .1s;
    line-height: 1;
  }
  .star-btn:hover, .star-btn.active { color: #f0c040; transform: scale(1.2); }
  /* 분석 시작 버튼 듀얼 — 큰 버튼 두 개 */
  .start-btn-dual { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
  .start-btn-normal, .start-btn-claude {
    flex: 1; padding: 12px 16px;
    border-radius: 7px;
    font-family: 'Noto Serif KR', serif;
    font-size: 13px; letter-spacing: 3px;
    cursor: pointer; transition: all .2s;
    border: 1px solid;
  }
  .start-btn-normal {
    background: rgba(223,92,63,0.10);
    border-color: var(--gold-border);
    color: var(--gold);
  }
  .start-btn-normal:hover { background: var(--gold-dim); border-color: var(--gold); }
  .start-btn-claude {
    background: rgba(99,102,241,0.10);
    border-color: rgba(99,102,241,0.35);
    color: #4338ca;
  }
  .start-btn-claude:hover { background: rgba(99,102,241,0.20); border-color: #6366f1; }
  .start-btn-normal:disabled, .start-btn-claude:disabled { opacity: 0.5; cursor: not-allowed; }
  .sys-interp-text {
    font-size: 12px; line-height: 1.7;
    color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
    white-space: pre-wrap;
    padding: 4px 0;
  }
  /* 해석 기록 (궁합·타로 공통) */
  .history-list { display: flex; flex-direction: column; gap: 5px; }
  .history-item {
    position: relative;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(223,92,63,0.18);
    border-radius: 8px;
    padding: 9px 30px 9px 12px;
    cursor: pointer;
    transition: all .15s;
  }
  .history-item:hover { border-color: var(--gold); background: var(--gold-dim); }
  .history-meta {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    margin-bottom: 3px;
  }
  .history-date { font-size: 10px; color: var(--text-dim); font-family: 'Noto Sans KR', sans-serif; }
  .history-tag {
    font-size: 9px; padding: 1px 6px;
    background: var(--gold-dim); color: var(--gold);
    border-radius: 3px; font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: 0.5px;
  }
  .history-title {
    font-size: 13px; font-weight: 600; color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
  }
  .history-q {
    font-size: 11px; color: var(--text-dim);
    font-family: 'Noto Sans KR', sans-serif;
    margin-top: 3px; font-style: italic;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .history-del {
    position: absolute; top: 5px; right: 7px;
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    font-size: 14px; padding: 2px 6px; line-height: 1;
  }
  .history-del:hover { color: var(--fire); }
  /* ── COMPAT (궁합) ── */
  .compat-slots {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px; margin-bottom: 4px;
  }
  .compat-slot {
    background: rgba(255,255,255,0.45);
    border: 2px dashed rgba(223,92,63,0.30);
    border-radius: 10px; padding: 12px 8px;
    min-height: 84px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; transition: all .15s; position: relative;
  }
  .compat-slot.over { border-color: var(--gold); background: var(--gold-dim); transform: scale(1.02); }
  .compat-slot.filled {
    border-style: solid; border-color: var(--gold-border);
    background: rgba(255,255,255,0.7);
  }
  .compat-slot-empty {
    color: var(--text-muted); font-size: 11px;
    font-family: 'Noto Sans KR', sans-serif; line-height: 1.6;
  }
  .compat-slot-num {
    font-size: 10px; color: var(--gold); letter-spacing: 1.5px; margin-bottom: 4px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .compat-slot-name {
    font-size: 14px; font-weight: 600; color: var(--text);
    font-family: 'Noto Sans KR', sans-serif; margin-bottom: 2px;
  }
  .compat-slot-meta {
    font-size: 10px; color: var(--text-dim);
    font-family: 'Noto Sans KR', sans-serif;
  }
  .compat-slot-remove {
    position: absolute; top: 4px; right: 6px;
    background: none; border: none; color: var(--text-muted);
    font-size: 16px; cursor: pointer; padding: 2px 6px; line-height: 1;
  }
  .compat-slot-remove:hover { color: var(--fire); }
  .saved-item[draggable="true"] { cursor: grab; }
  .saved-item[draggable="true"]:active { cursor: grabbing; }
  /* ── TAROT ── */
  .tarot-controls {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; align-items: stretch;
  }
  .tarot-controls .toggle-group { flex: 0 0 auto; }
  #tarot-question { flex: 1 1 220px; min-width: 0; }
  .tarot-draw-btn {
    flex: 0 0 auto; padding: 10px 18px;
    background: linear-gradient(135deg, #DF5C3F 0%, #C03500 100%);
    border: none; border-radius: 8px;
    color: #FFFFFF; font-family: 'Noto Serif KR', serif;
    font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
    cursor: pointer; transition: opacity .2s;
  }
  .tarot-draw-btn:hover { opacity: .9; }
  /* 인물 드롭 슬롯 */
  .tarot-person-slot {
    background: rgba(255,255,255,0.45);
    border: 2px dashed rgba(223,92,63,0.30);
    border-radius: 10px; padding: 10px 14px;
    margin-bottom: 10px; text-align: center;
    transition: all .15s; position: relative;
  }
  .tarot-person-slot.over { border-color: var(--gold); background: var(--gold-dim); }
  .tarot-person-slot.filled {
    border-style: solid; border-color: var(--gold-border);
    background: rgba(255,255,255,0.65);
  }
  .tps-empty { color: var(--text-muted); font-size: 12px; font-family: 'Noto Sans KR', sans-serif; line-height: 1.6; }
  .tps-filled-name { font-size: 14px; font-weight: 600; color: var(--text); font-family: 'Noto Sans KR', sans-serif; }
  .tps-filled-meta { font-size: 11px; color: var(--text-dim); font-family: 'Noto Sans KR', sans-serif; }
  .tps-remove {
    position: absolute; top: 4px; right: 6px;
    background: none; border: none; color: var(--text-muted);
    font-size: 16px; cursor: pointer; padding: 2px 6px; line-height: 1;
  }
  .tps-remove:hover { color: var(--fire); }
  /* 카드 표시 */
  .tarot-cards {
    display: grid; gap: 10px; margin-bottom: 4px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .tarot-card-item {
    background: linear-gradient(135deg, #2a2014 0%, #3a2e1f 100%);
    border: 2px solid var(--gold);
    border-radius: 10px;
    padding: 6px 6px 8px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    display: flex; flex-direction: column; align-items: stretch;
    overflow: hidden;
  }
  .tc-pos {
    font-size: 9px; color: var(--gold); letter-spacing: 0.8px;
    font-family: 'Noto Sans KR', sans-serif;
    margin-bottom: 5px; line-height: 1.3;
  }
  .tc-img-wrap {
    position: relative; width: 100%; aspect-ratio: 5/8;
    background: #1a1410; border-radius: 5px; overflow: hidden;
    margin-bottom: 6px;
  }
  .tc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tarot-card-item.reversed .tc-img,
  .tarot-card-item.reversed .tc-fallback { transform: rotate(180deg); }
  .tc-fallback {
    position: absolute; inset: 0;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    color: var(--gold); padding: 4px;
  }
  .tc-fb-corner { font-size: 14px; font-weight: 700; font-family: 'Noto Serif KR', serif; opacity: 0.8; }
  .tc-fb-symbol { font-size: 38px; margin: 6px 0; line-height: 1; }
  .tc-fb-mini { font-size: 9px; color: #FFFFFF; font-family: 'Noto Sans KR', sans-serif; text-align: center; }
  .tc-name {
    font-size: 11px; color: #FFFFFF; font-weight: 600;
    line-height: 1.3; font-family: 'Noto Sans KR', sans-serif;
  }
  .tc-en { font-size: 9px; color: rgba(251,247,236,0.65); font-family: 'Noto Sans KR', sans-serif; line-height: 1.3; }
  .tc-dir {
    font-size: 9px; margin-top: 4px;
    font-family: 'Noto Sans KR', sans-serif;
    color: rgba(251,247,236,0.7);
  }
  .tc-dir.rev { color: #ff9a90; font-weight: 600; }
  /* 뒷면(face-down) — 클릭해서 뒤집기 전 */
  .tarot-card-item.face-down {
    padding: 6px 6px 8px;
    cursor: pointer; user-select: none;
    transition: transform .15s, box-shadow .15s;
  }
  .tarot-card-item.face-down:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  }
  .tc-back-wrap {
    position: relative;
    width: 100%; aspect-ratio: 5/8;
    background: linear-gradient(135deg, #2a2014 0%, #3a2e1f 100%);
    border-radius: 6px; overflow: hidden;
    margin-bottom: 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .tc-back-wrap::before {
    content: '';
    position: absolute; inset: 6px;
    border: 1px solid var(--gold); border-radius: 4px;
    background:
      repeating-linear-gradient(45deg, transparent 0 6px, rgba(223,92,63,0.06) 6px 7px),
      repeating-linear-gradient(-45deg, transparent 0 6px, rgba(223,92,63,0.06) 6px 7px);
  }
  .tc-back-symbol {
    font-size: 30px; color: var(--gold);
    position: relative; z-index: 1;
    text-shadow: 0 0 10px rgba(223,92,63,0.55);
  }
  .tc-back-label {
    font-size: 10px; color: var(--gold);
    letter-spacing: 3px; margin-top: 6px;
    font-family: 'Noto Serif KR', serif;
    position: relative; z-index: 1;
  }
  .tarot-card-item.flipped-anim {
    animation: tarotFlipIn .5s ease-out;
  }
  @keyframes tarotFlipIn {
    0%   { transform: rotateY(90deg); opacity: 0.2; }
    50%  { transform: rotateY(45deg); opacity: 0.7; }
    100% { transform: rotateY(0);     opacity: 1; }
  }
  .tarot-hint {
    text-align: center; font-size: 12px; color: var(--gold);
    font-family: 'Noto Sans KR', sans-serif;
    padding: 6px 0 10px; letter-spacing: 1px;
  }
  .tarot-interp-btn {
    display: block; margin: 10px auto 0;
    padding: 8px 22px; background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border); color: var(--gold); border-radius: 8px;
    font-family: 'Noto Sans KR', sans-serif; font-size: 12px; letter-spacing: 2px;
    cursor: pointer; transition: all .2s;
  }
  .tarot-interp-btn:hover { background: var(--gold-dim); border-color: var(--gold); }
  .tarot-empty {
    text-align: center; color: var(--text-muted); font-size: 12px;
    padding: 22px 0; font-family: 'Noto Sans KR', sans-serif;
  }
  .compat-action-row { display: flex; gap: 8px; margin-bottom: 10px; }
  .sidebar-action {
    display: block; width: 100%; padding: 9px 12px; margin-bottom: 10px;
    background: rgba(223,92,63,0.10); border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 8px;
    font-family: 'Noto Sans KR', sans-serif; font-size: 12px; letter-spacing: 2px;
    cursor: pointer; transition: all .2s; text-align: center;
  }
  .sidebar-action:hover { background: var(--gold-dim); border-color: var(--gold); }
  .note { font-size: 11px; color: var(--text-muted); font-family: 'Noto Sans KR', sans-serif; margin-top: 12px; letter-spacing: 0.5px; }
  /* 시간 추정 도구 */
  .time-est-toggle-btn {
    width: 100%; margin-top: 8px;
    padding: 8px 12px;
    background: rgba(223,92,63,0.06);
    border: 1px dashed var(--gold-border);
    color: var(--gold); border-radius: 6px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px; letter-spacing: 1px;
    cursor: pointer; transition: all .15s;
  }
  .time-est-toggle-btn:hover { background: var(--gold-dim); border-style: solid; }
  .time-est-panel {
    margin-top: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.45);
    border: 1px solid var(--gold-border);
    border-radius: 7px;
  }
  .time-est-mode-toggle {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .time-est-mode-btn {
    flex: 1; min-width: 80px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--gold-border);
    color: var(--text-default); border-radius: 5px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px; cursor: pointer;
    transition: all .15s;
  }
  .time-est-mode-btn.active {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold); font-weight: 700;
  }
  .time-est-mode-btn:hover { background: var(--gold-dim); }
  .te-question {
    margin-bottom: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.55);
    border-radius: 5px;
  }
  .te-question-text {
    font-size: 12px; font-weight: 700;
    color: var(--text-default);
    margin-bottom: 6px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .te-q-num {
    display: inline-block; min-width: 22px;
    color: var(--gold); margin-right: 4px;
  }
  .te-options { display: flex; flex-wrap: wrap; gap: 4px; }
  .te-option {
    padding: 4px 9px;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--gold-border);
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-default);
    cursor: pointer; transition: all .15s;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .te-option:hover { background: var(--gold-dim); }
  .te-option.selected {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold); font-weight: 700;
  }
  .te-mbti-row { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
  .te-mbti-letter { flex: 1; }
  .te-mbti-letter-label {
    font-size: 11px; color: var(--text-muted); margin-bottom: 4px; text-align: center;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .te-mbti-letter-options { display: flex; gap: 3px; }
  .te-mbti-letter-options .te-option { flex: 1; text-align: center; }
  .te-ai-area {
    width: 100%; min-height: 120px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--gold-border);
    border-radius: 5px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px; color: var(--text-default);
    resize: vertical;
    box-sizing: border-box;
  }
  .te-ai-btn {
    width: 100%; margin-top: 8px;
    padding: 8px 12px;
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 6px;
    cursor: pointer;
    font-family: 'Noto Serif KR', serif;
    font-size: 12px; letter-spacing: 2px;
  }
  .te-ai-btn:hover { background: var(--gold-dim); }
  .time-est-result {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(223,92,63,0.06);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
  }
  .time-est-result-title {
    font-size: 12px; color: var(--gold); font-weight: 700;
    letter-spacing: 2px; margin-bottom: 8px;
    font-family: 'Noto Serif KR', serif;
  }
  .te-chart { display: flex; gap: 3px; margin-bottom: 8px; align-items: flex-end; }
  .te-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
  .te-chart-bar-bg { width: 100%; height: 40px; background: rgba(0,0,0,0.04); border-radius: 3px; display: flex; align-items: flex-end; }
  .te-chart-bar { width: 100%; min-height: 1px; transition: height 0.3s; border-radius: 2px 2px 0 0; }
  .te-chart-label { font-size: 9px; color: var(--text-muted); margin-top: 2px; font-family: 'Noto Sans KR', sans-serif; }
  .te-chart-label.top { color: var(--gold); font-weight: 700; }
  .te-top3 { display: flex; flex-direction: column; gap: 5px; }
  .te-top-card {
    padding: 7px 10px;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--gold-border);
    border-left: 3px solid var(--gold);
    border-radius: 5px;
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; transition: all .15s;
  }
  .te-top-card:hover { background: var(--gold-dim); }
  .te-top-rank {
    width: 22px; height: 22px;
    background: var(--gold); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .te-top-info { flex: 1; }
  .te-top-name {
    font-weight: 700; color: var(--gold); font-size: 13px;
    font-family: 'Noto Serif KR', serif; letter-spacing: 1px;
  }
  .te-top-range { font-size: 11px; color: var(--text-muted); }
  .te-top-traits { font-size: 10px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
  .te-fill-btn {
    padding: 5px 10px;
    background: rgba(223,92,63,0.15);
    border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 5px;
    cursor: pointer; font-size: 11px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .te-fill-btn:hover { background: var(--gold); color: #fff; }
  @media (max-width: 480px) {
    .pillars { gap: 6px; }
    .p-tg { font-size: 26px; }
    .p-zz { font-size: 22px; }
    .card { padding: 20px 16px; }
  }

  /* ── 구성학/점성학/자미두수 해석 블록 ── */
  .sys-interp-block {
    margin-top: 8px;
    padding: 9px 11px;
    background: rgba(223,92,63,0.06);
    border-radius: 6px;
    border-left: 2px solid var(--gold);
    font-size: 12px; line-height: 1.75;
    color: var(--text-muted);
  }
  .sib-title { font-size: 11px; color: var(--gold); margin-bottom: 4px; font-family: 'Noto Serif KR',serif; }
  .sib-body  { margin-bottom: 5px; color: var(--text-default); }
  .sib-row   { margin-top: 3px; font-size: 11px; }
  .sib-k     { font-weight: 600; margin-right: 2px; }
  .sib-sub   { margin-top: 7px; padding-top: 5px; border-top: 1px solid rgba(223,92,63,0.18); font-size: 11.5px; line-height: 1.7; }

  /* ── 역학 공부방 TOC (새 스타일) ── */
  .stoc-head {
    font-size: 11px; font-weight: 700;
    color: var(--gold); letter-spacing: 1px;
    padding: 7px 6px 4px;
    margin-top: 8px;
    border-bottom: 1px solid rgba(223,92,63,0.2);
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    user-select: none;
  }
  .stoc-head:first-child { margin-top: 0; }
  .stoc-head:hover { color: #e0c060; }
  .stoc-head.active { background: rgba(223,92,63,0.12); border-radius: 4px; }
  .stoc-item {
    font-size: 11px; color: var(--text-muted);
    padding: 5px 8px 5px 14px;
    cursor: pointer; border-radius: 4px;
    font-family: 'Noto Sans KR', sans-serif;
    display: flex; justify-content: space-between; align-items: center;
  }
  .stoc-item:hover { background: var(--gold-dim); color: var(--gold); }
  .stoc-item.active { background: rgba(223,92,63,0.18); color: var(--gold); font-weight: 600; }
  .stoc-cnt { font-size: 10px; color: var(--gold); background: rgba(223,92,63,0.15); border-radius: 9px; padding: 0 5px; }
  .stoc-group-label { font-size: 9.5px; color: rgba(223,92,63,0.55); letter-spacing: 1.5px; padding: 6px 8px 2px; font-family: 'Noto Sans KR', sans-serif; text-transform: uppercase; }

  /* ── 역학 공부방 페이지 콘텐츠 ── */
  .study-chapter { padding: 20px 24px; max-height: 75vh; overflow-y: auto; }
  .study-ch-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 16px; font-weight: 700;
    color: var(--gold); letter-spacing: 2px;
    border-bottom: 1.5px solid var(--gold-border);
    padding-bottom: 8px; margin-bottom: 14px;
  }
  .study-ch-btn {
    padding: 5px 12px;
    background: rgba(223,92,63,0.10);
    border: 1px solid var(--gold-border);
    color: var(--gold); border-radius: 5px;
    cursor: pointer; font-size: 11px;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: 0.5px;
  }
  .study-ch-btn:hover { background: var(--gold-dim); }
  .study-note-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }

  /* ── 룰 엔진 뷰어 ── */
  .rule-entry-list { display: flex; flex-direction: column; gap: 10px; }
  .rule-entry { background: rgba(255,255,255,0.5); border: 1px solid var(--gold-border); border-radius: 6px; padding: 10px 12px; }
  .rule-entry-key { font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 6px; font-family: 'Noto Serif KR', serif; }
  .rule-entry-body { font-size: 11.5px; line-height: 1.7; }
  .rule-row { display: flex; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
  .rule-k { font-size: 11px; color: var(--gold); font-weight: 600; min-width: 48px; flex-shrink: 0; }
  .rule-v { font-size: 11px; color: var(--text-default); flex: 1; }
  .rule-tag { display: inline-block; background: rgba(223,92,63,0.12); border: 1px solid var(--gold-border); color: var(--text-default); border-radius: 3px; padding: 0 5px; font-size: 11px; margin: 1px 2px; }
  .rule-chip { display: inline-block; padding: 4px 10px; background: rgba(223,92,63,0.10); border: 1px solid var(--gold-border); color: var(--gold); border-radius: 14px; font-size: 11px; cursor: pointer; margin: 2px; }
  .rule-chip:hover { background: var(--gold-dim); }

  /* ── AI 학습 기록 ── */
  .ai-train-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .ai-ts-box { background: rgba(223,92,63,0.08); border: 1px solid var(--gold-border); border-radius: 6px; padding: 8px 14px; text-align: center; min-width: 80px; }
  .ai-ts-label { font-size: 9px; color: var(--text-muted); margin-bottom: 3px; }
  .ai-ts-val { font-size: 20px; font-weight: 700; color: var(--gold); font-family: 'Noto Serif KR', serif; }
  .ai-train-list { display: flex; flex-direction: column; gap: 8px; }
  .ai-train-item { background: rgba(255,255,255,0.5); border: 1px solid var(--gold-border); border-radius: 6px; padding: 8px 10px; }
  .ai-train-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; font-size: 10px; }
  .ai-train-ilju { font-size: 13px; font-weight: 700; color: var(--gold); font-family: 'Noto Serif KR', serif; }
  .ai-train-src { background: rgba(223,92,63,0.15); border-radius: 3px; padding: 0 5px; color: var(--text-muted); }
  .ai-train-date { color: var(--text-muted); margin-left: auto; }
  .ai-train-del { background: none; border: 1px solid rgba(184,60,50,0.3); color: var(--fire); border-radius: 3px; padding: 1px 6px; font-size: 10px; cursor: pointer; }
  .ai-train-del:hover { background: rgba(184,60,50,0.08); }
  .ai-train-preview { font-size: 11.5px; line-height: 1.65; color: var(--text-default); cursor: pointer; }
  .ai-train-preview:hover { color: var(--gold); }
  .ai-train-full { font-size: 11px; line-height: 1.7; color: var(--text-default); white-space: pre-wrap; max-height: 300px; overflow-y: auto; background: rgba(255,255,255,0.6); border-radius: 4px; padding: 8px; font-family: 'Noto Sans KR', sans-serif; margin: 0; }
  /* cmd-102: .nav-btn-admin { margin-top: auto !important; } — 세로 사이드바 전용, 하단 탭바에선 불필요. 롤백 시 주석 해제 */

  /* ── 학습 노트 품질 뱃지 ── */
  .learn-quality-badge {
    font-size: 9px; padding: 1px 5px; border-radius: 3px;
    font-weight: 700; font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer; user-select: none; margin-right: 3px;
  }
  .learn-quality-badge.qhi  { background: rgba(74,133,89,0.18);  color: var(--wood); }
  .learn-quality-badge.qmid { background: rgba(223,92,63,0.18); color: var(--gold); }
  .learn-quality-badge.qlo  { background: rgba(184,60,50,0.12);  color: var(--fire); }
  .learn-src-badge {
    font-size: 9px; padding: 1px 5px; border-radius: 3px;
    background: rgba(120,120,180,0.12); color: #7878b4;
    font-family: 'Noto Sans KR', sans-serif; margin-right: 3px;
  }

  /* ── 합충형파해 시각 연결 행 ── */
  .prel-row {
    display: grid;
    grid-template-columns: 1fr 8px 1fr 8px 1fr 8px 1fr;
    min-height: 18px; margin: 3px 0 6px;
  }
  .prel-cell { }
  .prel-conn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    overflow: visible; position: relative;
  }
  .prel-conn::before {
    content: ''; position: absolute;
    top: 50%; left: -200%; right: -200%;
    border-top: 1px dashed rgba(223,92,63,0.20); z-index: 0;
    pointer-events: none;
  }
  .prel-badge {
    font-size: 9px; padding: 1px 5px; border-radius: 3px;
    font-family: 'Noto Sans KR', sans-serif; font-weight: 700;
    white-space: nowrap; line-height: 1.5;
    position: relative; z-index: 1;
  }
  .prel-badge.good    { background: rgba(74,133,89,0.18);  color: var(--wood); }
  .prel-badge.bad     { background: rgba(184,60,50,0.18);  color: var(--fire); }
  .prel-badge.neutral { background: rgba(223,92,63,0.18); color: var(--gold); }

  /* ── 육효(六爻) 점단 ── */
  .yk-card { background: var(--surface); border: 1px solid var(--gold-border); border-radius: 10px; padding: 16px; }
  .yk-question { font-size: 14px; color: var(--gold); margin-bottom: 14px; padding: 8px 12px; background: rgba(223,92,63,0.08); border-left: 3px solid var(--gold); border-radius: 4px; }
  .yk-hexagram { min-width: 120px; text-align: center; }
  .yk-gue-name { font-size: 16px; font-weight: 700; color: var(--gold); margin-bottom: 8px; letter-spacing: 1px; }
  .yk-section { margin-bottom: 10px; }
  .yk-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
  .yk-val { font-size: 13px; color: var(--text-main); line-height: 1.6; }

  /* ── 블로그 검색 결과 ── */
  .blog-preset-btn {
    padding: 4px 10px; font-size: 11px; font-family: 'Noto Sans KR', sans-serif;
    background: rgba(70,130,180,0.08); border: 1px solid rgba(70,130,180,0.30);
    color: #6ab0d4; border-radius: 12px; cursor: pointer; white-space: nowrap;
    letter-spacing: 0.5px; transition: background 0.15s;
  }
  .blog-preset-btn:hover { background: rgba(70,130,180,0.18); }
  .blog-search-item {
    border-bottom: 1px solid var(--gold-border); padding: 10px 0;
  }
  .blog-search-item:last-child { border-bottom: none; }
  .bsi-title { margin-bottom: 3px; }
  .bsi-title a { color: #6ab0d4; font-size: 13px; text-decoration: none; line-height: 1.4; }
  .bsi-title a:hover { text-decoration: underline; }
  .bsi-meta { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
  .bsi-desc { font-size: 11px; color: var(--text-dim); line-height: 1.6; margin-bottom: 6px; }
  .bsi-actions { display: flex; align-items: center; gap: 8px; }
  .bsi-save-btn {
    padding: 3px 10px; font-size: 11px; font-family: 'Noto Sans KR', sans-serif;
    background: rgba(70,130,180,0.12); border: 1px solid rgba(70,130,180,0.35);
    color: #6ab0d4; border-radius: 4px; cursor: pointer;
  }
  .bsi-save-btn:hover { background: rgba(70,130,180,0.22); }
  .bsi-save-btn:disabled { opacity: 0.5; cursor: default; }
  .bsi-saved { font-size: 11px; color: #4caf80; }

  /* 타로 일반 해석 */
  .tarot-rule-block { display: flex; flex-direction: column; gap: 10px; }
  .tarot-rule-row { background: rgba(255,255,255,0.03); border: 1px solid rgba(223,92,63,0.12); border-radius: 8px; padding: 12px 14px; }
  .trr-pos { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; margin-bottom: 4px; }
  .trr-card { font-size: 13px; color: var(--gold); font-family: 'Noto Serif KR', serif; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
  .trr-dir { font-size: 10px; padding: 2px 7px; border-radius: 10px; background: rgba(100,180,100,0.15); color: #7cbf7c; }
  .trr-dir.rev { background: rgba(180,100,100,0.15); color: #c47c7c; }
  .trr-meaning { font-size: 12px; color: var(--text); line-height: 1.7; }

  /* ── 역학 공부방 v2 ── */
  .sv2-wrap { padding: 18px 22px; max-width: 800px; margin: 0 auto; }
  .sv2-hero { font-size: 17px; font-weight: 700; padding: 6px 0 4px; color: #3d2b1f; }
  .sv2-hero-sub { font-size: 10px; letter-spacing: 3px; color: #8a7060; font-weight: 400; margin-left: 8px; }
  .sv2-statbar { display: flex; gap: 18px; font-size: 12px; color: #6b5844; padding: 6px 0 14px; flex-wrap: wrap; border-bottom: 1px solid rgba(223,92,63,0.25); margin-bottom: 12px; }
  .sv2-statbar b { color: #3d2b1f; }
  .sv2-sec-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #8a7060; text-transform: uppercase; padding: 10px 0 6px; }
  .sv2-acc { border: 1px solid rgba(223,92,63,0.25); border-radius: 8px; margin-bottom: 6px; overflow: hidden; }
  .sv2-empty { opacity: 0.4; }
  .sv2-acc-hd { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; background: rgba(223,92,63,0.08); user-select: none; transition: background .15s; }
  .sv2-acc-hd:hover { background: rgba(223,92,63,0.16); }
  .sv2-acc-title { flex: 1; font-size: 13px; font-weight: 600; color: #3d2b1f; }
  .sv2-cnt { font-size: 11px; color: #8a7060; flex-shrink: 0; }
  .sv2-chev { font-size: 10px; color: #a08060; flex-shrink: 0; }
  .sv2-new { font-size: 9px; background: #4caf80; color: #fff; border-radius: 3px; padding: 1px 5px; vertical-align: middle; }
  .sv2-acc-bd { background: rgba(255,255,255,0.55); }
  .sv2-note-row { border-bottom: 1px solid rgba(223,92,63,0.15); }
  .sv2-note-row:last-child { border-bottom: none; }
  .sv2-note-hd { display: flex; align-items: center; gap: 6px; padding: 8px 14px; cursor: pointer; font-size: 12px; color: #3d2b1f; transition: background .12s; }
  .sv2-note-hd:hover { background: rgba(223,92,63,0.1); }
  .sv2-note-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sv2-note-dt { font-size: 10px; color: #8a7060; flex-shrink: 0; }
  .sv2-note-bd { padding: 8px 14px 12px; background: rgba(255,255,255,0.7); }
  .sv2-note-exc { font-size: 11px; color: #6b5844; line-height: 1.7; margin-bottom: 8px; }
  .sv2-note-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
  .sv2-note-full { margin-top: 8px; }
  .sv2-note-pre { font-size: 11px; line-height: 1.8; white-space: pre-wrap; word-break: break-all; color: #3d2b1f; max-height: 420px; overflow-y: auto; padding: 10px; background: rgba(223,92,63,0.05); border: 1px solid rgba(223,92,63,0.15); border-radius: 6px; margin: 0 0 6px; }
  .sv2-src-link { display: inline-block; margin-top: 4px; font-size: 11px; color: #6ab0d4; text-decoration: none; }
  .sv2-src-link:hover { text-decoration: underline; }
  .sv2-btn { font-size: 11px; padding: 3px 10px; background: rgba(255,255,255,0.7); border: 1px solid rgba(223,92,63,0.3); border-radius: 4px; color: #3d2b1f; cursor: pointer; }
  .sv2-btn:hover { background: rgba(223,92,63,0.12); }
  .sv2-btn-gold { background: rgba(223,92,63,.12); border-color: rgba(223,92,63,.4); color: #7a5c20; }
  .sv2-btn-gold:hover { background: rgba(223,92,63,.22); }
  .sv2-sum-box { padding: 10px 14px 12px; border-top: 1px solid rgba(223,92,63,0.2); background: rgba(255,253,240,0.8); }
  .sv2-sum-title { font-size: 11px; font-weight: 700; color: #7a5c20; margin-bottom: 6px; }
  .sv2-sum-text { font-size: 11px; line-height: 1.8; color: #3d2b1f; white-space: pre-wrap; margin-bottom: 8px; }

/* ── 토스트 알림 ──────────────────────────────── */
#toast-container {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column-reverse;
  gap: 8px; z-index: 99999; max-width: 380px;
  pointer-events: none;
}
.toast {
  padding: 11px 16px; border-radius: 8px;
  color: #fff; font-size: 0.88em; line-height: 1.45;
  max-width: 380px; word-break: break-word;
  opacity: 0; transform: translateX(24px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  cursor: pointer; pointer-events: all;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  white-space: pre-line;
}
.toast.toast-show { opacity: 1; transform: translateX(0); }
.toast-info    { background: #323232; }
.toast-success { background: #388e3c; }
.toast-warn    { background: #f57c00; }
.toast-error   { background: #c62828; }

/* ── PIPELINE STATUS ANIMATE ─────────────────────────────────── */
#pipeline-status-bar.ps-active {
  animation: ps-pulse 1.2s ease-in-out infinite;
  color: var(--gold, #c8a84b) !important;
}
@keyframes ps-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ── DESIGN-SPEC D7: 시스템 카드 ──────────────────────────────────────────── */
.sys-card {
  background: var(--color-paper, #F2EFE4);
  border-radius: var(--radius-lg, 12px);
  padding: var(--card-pad, var(--space-6, 32px));
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.12));
}
.sys-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.sys-card__label {
  display: block;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: var(--fs-label, 11px);
  font-weight: var(--fw-medium, 500);
  color: var(--color-point, #DF5C3F);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2, 8px);
}
.sys-card__title {
  font-family: var(--font-serif, 'Noto Serif KR', serif);
  font-size: var(--fs-h3, 18px);
  font-weight: var(--fw-medium, 500);
  color: var(--color-text-strong, #10271F);
  margin-bottom: var(--space-2, 8px);
  line-height: var(--lh-tight, 1.2);
}
.sys-card__desc {
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: var(--fs-body, 13px);
  color: var(--color-text-mute, #8A8A8F);
  line-height: var(--lh-normal, 1.5);
  margin-bottom: var(--space-3, 12px);
}
.sys-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.sys-card__tags .tag {
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: var(--fs-label, 11px);
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(16,39,31,0.07);
  color: var(--color-text-base, #1B3B30);
}
.sys-card__tags .tag.tag--key {
  background: rgba(223,92,63,0.1);
  color: var(--color-point, #DF5C3F);
}
.sys-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-gap, var(--space-5, 24px));
}
@media (max-width: 480px) { .sys-cards-grid { grid-template-columns: 1fr; } }

/* ── DESIGN-SPEC D8: 오늘의 핵심 바 ───────────────────────────────────────── */
.today-insight-bar {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  background: var(--color-ink, #10271F);
  border-top: 1px solid var(--color-line, #2C4C3F);
  padding: var(--space-3, 12px) var(--space-5, 24px);
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  cursor: pointer;
  z-index: 100;
  transition: background 0.15s;
}
.today-insight-bar:hover { background: var(--color-surface, #1B3B30); }
.today-insight-bar__arrow {
  font-size: 10px;
  color: var(--color-point, #DF5C3F);
  flex-shrink: 0;
}
.today-insight-bar__text {
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: var(--fs-body, 13px);
  color: var(--color-text-on-ink, #F2EFE4);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── LOGO-SPEC L3: 로고 유틸리티 ──────────────────────────────────────────── */
.logo-fallback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-brand, "Noto Serif KR", serif);
  font-weight: 700;
  color: var(--color-point, #DF5C3F);
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}
.logo-fallback::before {
  content: "命";
  display: inline-block;
  background: var(--color-point, #DF5C3F);
  color: #fff;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 0.9em;
}

.brand-logo { max-width: 100%; height: auto; }
.brand-logo--sm { height: 24px; }
.brand-logo--md { height: 32px; }
.brand-logo--lg { height: 48px; }

/* ── DESIGN-SPEC 라이트 베이스: #general-ui 스코프 리매핑 ──────────────
   인라인 스타일 var(--color-ink,...) 등을 라이트 토큰으로 오버라이드
   #general-ui 내부에서만 적용 → 기존 역술인 / 메인 앱 영향 없음
   ─────────────────────────────────────────────────────────────────── */
#general-ui {
  /* 배경 리매핑: 잉크 → 페이퍼 */
  --color-ink:              var(--color-bg, #F7F4EB);
  --color-surface:          var(--color-bg-soft, #EFE9DA);
  --color-paper:            #FFFFFF;            /* 카드 = 순백 */
  /* 텍스트 리매핑: 밝은 글씨 → 어두운 글씨 */
  --color-text-on-ink:      var(--color-text-strong, #10271F);
  --color-text-on-ink-mute: var(--color-text-mute, #6E746C);
  /* 구분선 리매핑: 잉크용 → 라이트용 */
  --color-line:             var(--color-line-light, #D2D3CA);
  /* 라이트 배경 적용 */
  background: var(--color-bg, #F7F4EB) !important;
  color: var(--color-text-strong, #10271F);
}

/* 일반 채널 activated → 채널 오버라이드 색상 상속 */
[data-channel="general"] #general-ui {
  --color-bg: #F7F4EB;
  --color-bg-soft: #EDE9E2;
  --color-line-light: #D2D3CA;
}

/* ── GENERAL-PHASE1: ai-stickybar ──────────────────────────────────── */
.ai-stickybar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5100;
  padding: 10px 16px;
  background: var(--color-surface, #1B3B30);
  border-top: 1px solid var(--color-line, #2C4C3F);
  display: none;
}
.ai-stickybar__open {
  width: 100%;
  background: rgba(223,92,63, 0.08);
  border: 1px solid rgba(223,92,63, 0.3);
  border-radius: var(--radius-full, 999px);
  padding: 11px 18px;
  color: var(--color-text-on-ink, #F2EFE4);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  transition: background 0.2s;
}
.ai-stickybar__open:hover {
  background: rgba(223,92,63, 0.16);
}
.ai-stickybar__text { flex: 1; }
.ai-stickybar__hint {
  font-size: 11px;
  color: var(--color-text-on-ink-mute, #98A09A);
  white-space: nowrap;
}

/* 일반 채널 general-ui 하단 여백 (sticky 바 높이 보정) */
#general-ui { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* ── 앱 하단 전환 바: 홈 · 명식 · 해석 · 공부방 · 내 정보 ─────────── */
#mobile-bottom-nav {
  display: none;
}
#mobile-bottom-nav.is-visible {
  /* 확대 상쇄 제거(2026-08-14) — 랜딩도 body{zoom:1.2}를 쓰므로 양쪽이 같은 배율이다. */
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6000;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  min-height: calc(64px + env(safe-area-inset-bottom));
  padding: 6px 6px calc(4px + env(safe-area-inset-bottom));
  width: min(var(--app-max), 100%);
  margin: 0 auto;
  background: var(--color-bg, #F7F4EB);
  border-top: 1px solid var(--color-line, #D2D3CA);
  border-radius: 0;
}
.bottom-nav__item {
  min-width: 0;
  height: 30px;
  align-self: center;
  padding: 0 3px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-text-mute, #6E746C);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav__icon {
  display: none;   /* 한자 글리프 제거(2026-08-14) — 한글 라벨만 사용 */
}

.bottom-nav__item { font-size: 10.5px; letter-spacing: -0.05em; white-space: nowrap; }
.bottom-nav__item.is-active {
  color: #fff;
  font-weight: 600;
  background: var(--color-point, #DF5C3F);
  border-radius: 9px;
}
body.has-bottom-nav #channel-switcher { display: none !important; }
body.has-bottom-nav #g-app-header > div:last-child { display: none !important; }
body.has-bottom-nav #general-ui { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
body.has-bottom-nav .ai-stickybar { bottom: calc(58px + env(safe-area-inset-bottom)); }
body.has-bottom-nav #study-ui,
body.has-bottom-nav #admin-ui { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* ── cmd-287: 전면 오버레이는 '화면'이지 모달이 아니다 ──────────────
   #g-interp-overlay(해석)·#g-saju-list-overlay(명식목록)는 JS 인라인으로
   z-index:9000, #g-history-overlay(해석자료방)는 99999 를 갖는다.
   하단 탭바(#mobile-bottom-nav, z 6000)보다 위라 해석 화면에서는 탭바가
   통째로 덮여 탭이 눌리지 않았다(실측: 탭 중심점의 최상단 요소가
   .mv-hca-title = 해석 본문).
   셋 다 불투명 배경의 '페이지'이므로 탭바 아래(5900)로 내린다.
   general-ui(5000)보다는 위여야 하므로 5900. 모달류(8000·9900·9950·10001)는 손대지 않는다. */
body.has-bottom-nav #g-interp-overlay,
body.has-bottom-nav #g-saju-list-overlay,
body.has-bottom-nav #g-history-overlay {
  z-index: 5900 !important;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* cmd-287: 하단 탭바가 켜지면 .taktak-header__inner 가 display:none 이라(위 규칙)
   헤더는 border-bottom 1px 만 남는다(실측 height=1px). 그 1px 에 blur(14px) 를
   걸어 두면 스크롤 컨테이너를 레이어로 승격시키는 비용만 남고 얻는 그림은 없다. */
body.has-bottom-nav #g-app-header.taktak-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 좌우 보더 없음 — 랜딩 탭바와 동일 규격(2026-08-14) */


/* ══════════════════════════════════════════════════════════════════════
   카탈로그 Phase 2 — 섹션 컬러 토큰
   ══════════════════════════════════════════════════════════════════════ */
/* Z2: 카테고리 라벨 단색화 — 모든 섹션 포인트 오렌지 통일 */
:root {
  /* @deprecated — 모두 --color-point 로 흡수, Z3에서 참조처 제거 예정 */
  --color-cat-saju:       var(--color-point);
  --color-cat-jami:       var(--color-point);
  --color-cat-astro:      var(--color-point);
  --color-cat-koosung:    var(--color-point);
  --color-cat-tarot:      var(--color-point);
  --color-cat-ai:         var(--color-point);
}

/* ── 카테고리 탭 ─────────────────────────────────────────────────────── */
.cat-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-line-light, #D2D3CA);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky;
  top: 77px;
  background: var(--color-bg-elevated, #F7F4EB);
  z-index: 10;
}
.cat-tabs::-webkit-scrollbar { display: none; }

.cat-tab {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-line-light, #D2D3CA);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  color: var(--color-text-mute, #8A8A8F);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.cat-tab:hover {
  border-color: var(--color-point, #DF5C3F);
  color: var(--color-point, #DF5C3F);
}
.cat-tab--active {
  background: var(--color-point, #DF5C3F);
  border-color: var(--color-point, #DF5C3F);
  color: #fff;
  font-weight: 600;
}

/* ── Hero 캐러셀 ─────────────────────────────────────────────────────── */
.hero-carousel {
  overflow: hidden;
  padding: 16px 0 6px;
  position: relative;
}
.hero-carousel__track {
  display: flex;
  gap: 16px;
  padding: 0 16px;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.hero-carousel__track:active { cursor: grabbing; }

.hero-card {
  flex-shrink: 0;
  width: calc(80vw - 32px);
  max-width: 400px;
  min-height: 180px;
  border-radius: var(--radius-lg, 12px);
  padding: 20px 20px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}

.hero-card__badge {
  display: inline-block;
  background: var(--color-point, #DF5C3F);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
}
.hero-card__title {
  font-family: var(--font-serif, 'Noto Serif KR', serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-strong, #10271F);
  margin: 0 0 8px;
}
.hero-card__sub {
  font-size: 12px;
  color: var(--color-text-mute, #8A8A8F);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  margin: 0;
  line-height: 1.5;
}

.hero-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0 4px;
}
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-line-strong, #C7C0AC);
  cursor: pointer;
  transition: all .2s;
}
.dot--active {
  width: 18px;
  border-radius: 3px;
  background: var(--color-point, #DF5C3F);
}

/* ── 카탈로그 섹션 ───────────────────────────────────────────────────── */
.cat-section {
  padding: 24px 0 8px;
  border-top: 1px solid var(--color-line-light, #D2D3CA);
  margin-top: 4px;
}

.cat-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 16px 12px;
  gap: 8px;
}
.cat-section__head-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cat-section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  color: var(--color-point, #DF5C3F);   /* Z2: 단색화 — 잡색 제거 */
}
.cat-section__title {
  font-family: var(--font-serif, 'Noto Serif KR', serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-strong, #10271F);
  margin: 0;
  line-height: 1.3;
}
.cat-section__more {
  background: transparent;
  border: none;
  color: var(--color-text-mute, #8A8A8F);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  white-space: nowrap;
  margin-top: 6px;
  flex-shrink: 0;
  transition: color .15s;
}
.cat-section__more:hover { color: var(--color-point, #DF5C3F); }

.cat-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 4px 16px 16px;
}

/* ── 메뉴 카드 ───────────────────────────────────────────────────────── */
.menu-card {
  width: 100%;
  min-height: 160px;
  background: var(--color-bg-card, #FFFFFF);
  border: 1px solid var(--color-line-light, #D2D3CA);
  border-radius: var(--radius-lg, 12px);
  padding: 16px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.menu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.menu-card--soon { opacity: .7; cursor: default; }
.menu-card--soon::after {
  content: '준비중';
  position: absolute;
  top: 8px; right: 8px;
  font-size: 9px;
  background: var(--color-bg-soft, #EFE9DA);
  color: var(--color-text-mute, #8A8A8F);
  padding: 2px 6px;
  border-radius: 8px;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
}

.menu-card__icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
}
.menu-card__badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--color-point-soft, #FBEEE9);
  color: var(--color-point, #DF5C3F);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  margin-bottom: 2px;
  width: fit-content;
}
/* cmd-354 도깨비 경고 배지 — 기존 토큰 재사용 */
.menu-card__badge--warn {
  background: rgba(184,60,50,0.14);
  color: var(--fire);
  border: 1px solid rgba(184,60,50,0.28);
}
.menu-card__title {
  font-family: var(--font-serif, 'Noto Serif KR', serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-strong, #10271F);
  margin: 0;
  line-height: 1.3;
}
.menu-card__sub {
  font-size: 11px;
  color: var(--color-text-mute, #8A8A8F);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  margin: 0;
  line-height: 1.4;
}
.menu-card__free {
  margin-top: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-point, #DF5C3F);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
}

/* ══════════════════════════════════════════════════════════════════════
   탁탁사주 일반 채널 — 2026 홈 화면 재구성
   색상 토큰은 유지하고, 개인 요약 → 탐색 → 카드 흐름으로 재배치한다.
   ══════════════════════════════════════════════════════════════════════ */
#general-ui.taktak-app {
  background: #F3F0EA !important;
  color: var(--color-text-strong, #10271F);
}
.taktak-app .g-inner-shell {
  background: var(--color-bg, #F7F4EB);
  min-height: 100%;
}
.taktak-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 248, 243, .94);
  border-bottom: 1px solid rgba(50, 43, 35, .09);
  backdrop-filter: blur(14px);
}
.taktak-header__inner {
  min-height: 68px;
  max-width: var(--app-max);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.taktak-brand {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  line-height: 1;
}
.taktak-brand__name {
  color: var(--color-text-strong, #10271F);
  font-family: var(--font-serif, 'Noto Serif KR', serif);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -1.1px;
}
.taktak-brand__rule {
  width: 52px;
  height: 3px;
  border-radius: 99px;
  background: var(--color-point, #DF5C3F);
}
.taktak-header__actions { display: flex; align-items: center; gap: 4px; }
body.has-bottom-nav .taktak-header__actions { display: none; }
.taktak-icon-button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--color-text-base, #1B3B30);
  background: transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.taktak-icon-button:hover,
.taktak-icon-button:focus-visible { background: var(--color-point-soft, #FBEEE9); color: var(--color-point, #DF5C3F); outline: none; }

.taktak-home { max-width: var(--app-max); margin: 0 auto; padding: 0 var(--app-pad); }
.taktak-input-section {
  padding: 28px 20px 46px;
  background: var(--color-bg, #F7F4EB);
}
.taktak-input-card {
  padding: 22px 20px !important;
  border: 1px solid var(--color-line, #D2D3CA) !important;
  border-radius: 0 !important;
  background: var(--color-bg-card, #FCFAF4) !important;
  box-shadow: none !important;
}
#g-input-section .taktak-input-card input,
#g-input-section .taktak-input-card select {
  min-height: 46px;
  background: #FFFFFF !important;
  border: 1px solid var(--color-line, #D2D3CA) !important;
  border-radius: 0 !important;
}
#g-input-section .taktak-input-card input:focus,
#g-input-section .taktak-input-card select:focus {
  outline: none;
  border-color: var(--color-text-strong, #10271F) !important;
}
/* 주 CTA — 랜딩 .button-primary 와 동일(잉크 채움·각짐·50px) */
#g-input-section .taktak-input-card button[onclick="onGeneralSajuSubmit()"] {
  min-height: 50px;
  border-radius: 0 !important;
  background: var(--color-bg-inverse, #10271F) !important;
  border: 1px solid var(--color-bg-inverse, #10271F) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
#g-input-section .taktak-input-card button[onclick="onGeneralSajuSubmit()"]:hover {
  background: var(--color-point, #DF5C3F) !important;
  border-color: var(--color-point, #DF5C3F) !important;
}

.taktak-profile {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  padding: 18px 20px 22px;
  background: linear-gradient(135deg, #FFF8F2 0%, #F7ECE2 100%);
  border-bottom: 1px solid rgba(155, 111, 76, .13);
}
.taktak-profile::before,
.taktak-profile::after {
  position: absolute;
  content: '';
  border: 1px solid rgba(223,92,63, .12);
  border-radius: 50%;
  pointer-events: none;
}
.taktak-profile::before { width: 196px; height: 196px; right: -74px; bottom: -114px; }
.taktak-profile::after { width: 112px; height: 112px; right: 26px; top: -72px; }
.taktak-back-button {
  position: relative;
  z-index: 1;
  padding: 5px 0;
  border: 0;
  color: var(--color-text-mute, #6E746C);
  background: transparent;
  cursor: pointer;
  font: 12px var(--font-sans, 'Noto Sans KR', sans-serif);
}
.taktak-profile__content { position: relative; z-index: 1; padding-top: 22px; }
.taktak-profile__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--color-point, #DF5C3F);
  font: 700 11px var(--font-sans, 'Noto Sans KR', sans-serif);
  letter-spacing: 1.5px;
}
.taktak-profile__name {
  color: var(--color-text-strong, #10271F);
  font-family: var(--font-serif, 'Noto Serif KR', serif);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -1.2px;
}
.taktak-profile__ilju {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 99px;
  color: var(--color-point, #DF5C3F);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(223,92,63, .15);
  font: 700 11px var(--font-sans, 'Noto Sans KR', sans-serif);
  letter-spacing: .8px;
}

.taktak-daily-brief {
  position: relative;
  overflow: hidden;
  margin: 22px 20px 0;
  padding: 22px 20px 18px;
  border-radius: 0;
  color: #FFF9F3;
  background: linear-gradient(135deg, #3A2B22 0%, #5A3829 100%);
  box-shadow: 0 12px 26px rgba(67, 43, 28, .16);
}
.taktak-daily-brief::after {
  position: absolute;
  width: 140px;
  height: 140px;
  right: -48px;
  top: -58px;
  content: '';
  border: 1px solid rgba(255, 224, 196, .28);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255, 224, 196, .05), 0 0 0 44px rgba(255, 224, 196, .035);
}
.taktak-daily-brief__copy { position: relative; z-index: 1; }
.taktak-daily-brief__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #FFB088;
  font: 700 10px var(--font-sans, 'Noto Sans KR', sans-serif);
  letter-spacing: 1.2px;
}
.taktak-daily-brief strong {
  display: block;
  font-family: var(--font-serif, 'Noto Serif KR', serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -.8px;
}
.taktak-daily-brief p {
  margin: 9px 0 16px;
  color: rgba(255, 249, 243, .67);
  font: 11px/1.55 var(--font-sans, 'Noto Sans KR', sans-serif);
}
.taktak-daily-brief__button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 35px;
  padding: 0 12px 0 13px;
  border: 0;
  border-radius: 99px;
  color: #FFF8F1;
  background: var(--color-point, #DF5C3F);
  cursor: pointer;
  font: 700 11px var(--font-sans, 'Noto Sans KR', sans-serif);
}
.taktak-daily-brief__button span { font-size: 15px; line-height: 1; }

.taktak-app .cat-tabs {
  top: 68px;
  gap: 8px;
  padding: 14px 20px 16px;
  background: rgba(250, 248, 243, .96);
  border-bottom: 1px solid rgba(50, 43, 35, .08);
  box-shadow: 0 6px 16px rgba(79, 64, 47, .035);
}
.taktak-app .cat-tab {
  padding: 7px 13px;
  border-color: rgba(83, 67, 50, .13);
  background: #FFFDF9;
  color: #756D65;
  font-size: 12px;
}
.taktak-app .cat-tab--active {
  border-color: var(--color-point, #DF5C3F);
  background: var(--color-point, #DF5C3F);
  color: #fff;
  box-shadow: 0 4px 10px rgba(223,92,63, .18);
}
.taktak-app .cat-section {
  margin: 0;
  padding: 30px 0 2px;
  border-top: 0;
}
.taktak-app .cat-section + .cat-section { padding-top: 38px; }
.taktak-app .cat-section__head { padding: 0 20px 13px; }
.taktak-app .cat-section__head-left { gap: 5px; }
.taktak-app .cat-section__label { font-size: 10px; letter-spacing: 1.3px; }
.taktak-app .cat-section__title { font-size: 21px; letter-spacing: -1px; }
.taktak-app .cat-section__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 3px 20px 6px;
}
.taktak-app .menu-card {
  min-height: 156px;
  padding: 16px;
  border-color: rgba(83, 67, 50, .12);
  border-radius: 0;
  box-shadow: 0 4px 13px rgba(67, 53, 37, .055);
}
.taktak-app .menu-card:hover {
  transform: translateY(-3px);
  border-color: rgba(223,92,63, .32);
  box-shadow: 0 10px 22px rgba(67, 53, 37, .1);
}
.taktak-app .cat-section:first-child .menu-card:first-child {
  background: #FFF9F4;
  border-color: rgba(223,92,63, .2);
}
.taktak-app .menu-card__icon { font-size: 31px; margin-bottom: 7px; }
.taktak-app .menu-card__badge { padding: 3px 7px; font-size: 9px; }
.taktak-app .menu-card__title { font-size: 16px; letter-spacing: -.5px; }
.taktak-app .menu-card__sub { padding-right: 2px; font-size: 11px; line-height: 1.5; }
.taktak-app .menu-card__free { padding-top: 5px; }

.taktak-app #g-result-panel {
  margin: 18px 20px !important;
  border: 1px solid rgba(83, 67, 50, .12);
  border-radius: 0 !important;
  box-shadow: 0 9px 24px rgba(67, 53, 37, .09) !important;
}

@media (min-width: 600px) {
  .taktak-app .g-inner-shell { box-shadow: 0 0 42px rgba(67, 53, 37, .09); }
  .taktak-header__inner { max-width: var(--app-max); }
}
@media (max-width: 360px) {
  .taktak-app .cat-section__grid { gap: 9px; padding-right: 14px; padding-left: 14px; }
  .taktak-app .cat-section__head { padding-right: 14px; padding-left: 14px; }
  .taktak-app .menu-card { min-height: 148px; padding: 14px; }
  .taktak-app .menu-card__title { font-size: 15px; }
}

/* ── 검색 키워드 칩 ─────────────────────────────────────────────────── */
.g-chip {
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-line-light, #D2D3CA);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 13px;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  color: var(--color-text-base, #3A3A3E);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.g-chip:hover {
  border-color: var(--color-point, #DF5C3F);
  color: var(--color-point, #DF5C3F);
  background: var(--color-point-soft, #FBEEE9);
}

/* ── 퍼시스턴트 탭바 ─────────────────────────────────────────────────── */
#g-persistent-tabs {
  position: sticky;
  top: 61px;
  z-index: 19;
  background: var(--color-bg-elevated, #F7F4EB);
  border-bottom: 1px solid var(--color-line, #D2D3CA);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#g-persistent-tabs::-webkit-scrollbar { display: none; }

.g-ptab {
  display: inline-block;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-mute, #6E746C);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.g-ptab:hover { color: var(--color-text-base, #1B3B30); }
.g-ptab--active {
  color: var(--color-point, #DF5C3F);
  border-bottom-color: var(--color-point, #DF5C3F);
}

/* ── 일반채널 달력 오버레이 — 앱 셸 폭 제약(cmd-103) ─────────────────── */
/* #tab-unse 가 #g-cal-mount(max-width var(--app-max)) 안으로 이동할 때 적용 */
#g-cal-mount #tab-unse,
#g-cal-mount .cal-wrapper,
#g-cal-mount .cal-header,
#g-cal-mount #cal-today-bar,
#g-cal-mount #cal-year-month,
#g-cal-mount #cal-grid,
#g-cal-mount #cal-detail {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
#g-cal-mount #cal-grid {
  width: 100% !important;
}
/* 일반채널 전체 앱 셸 원칙(cmd-103) — 향후 작업 기준 */
/* 모든 general overlay/panel은 max-width:var(--app-max);margin:0 auto 준수 */

/* ── g-overlay — 바텀시트 공통 ─────────────────────────────────────── */
.g-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 5500;   /* #general-ui(5000) 위 */
  align-items: flex-end;
  justify-content: center;
}
.g-overlay__panel {
  background: var(--color-bg-card, #FFFFFF);
  border-radius: 0;
  width: 100%;
  max-width: var(--app-max);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
}
.g-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--color-line, #D2D3CA);
  flex-shrink: 0;
}
.g-overlay__title {
  font-family: var(--font-serif,'Noto Serif KR',serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-strong, #10271F);
}
.g-overlay__close {
  background: none;
  border: none;
  color: var(--color-text-mute, #6E746C);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.g-overlay__search-wrap {
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-line, #D2D3CA);
  flex-shrink: 0;
}
.g-saju-list__search {
  width: 100%;
  background: var(--color-bg, #F7F4EB);
  border: 1px solid var(--color-line-strong, #C7C0AC);
  border-radius: 0;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--color-text-base, #1B3B30);
  box-sizing: border-box;
  outline: none;
  font-family: var(--font-sans,'Noto Sans KR',sans-serif);
}
.g-saju-list__search:focus { border-color: var(--color-point, #DF5C3F); }
.g-saju-list__search::placeholder { color: var(--color-text-soft, #98A09A); }
.g-saju-list__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.g-saju-list__empty {
  text-align: center;
  color: var(--color-text-mute, #6E746C);
  padding: 40px 16px;
  font-size: 13px;
  line-height: 1.7;
  font-family: var(--font-sans,'Noto Sans KR',sans-serif);
}
.g-saju-card {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-line, #D2D3CA);
  transition: background 0.15s;
  border-left: 3px solid transparent;
}
.g-saju-card:hover,
.g-saju-card:active { background: var(--color-point-soft, #FBEEE9); }
.g-saju-card--pinned { border-left-color: var(--color-point,#DF5C3F); }
.g-saju-card__main { flex: 1; min-width: 0; }
.g-saju-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-strong, #10271F);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-sans,'Noto Sans KR',sans-serif);
}
.g-saju-card__meta {
  font-size: 12px;
  color: var(--color-text-mute, #6E746C);
  margin-bottom: 4px;
  font-family: var(--font-sans,'Noto Sans KR',sans-serif);
}
.g-saju-card__ilju {
  display: inline-block;
  font-size: 11px;
  color: var(--color-point,#DF5C3F);
  background: var(--color-point-soft, #FBEEE9);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: var(--font-serif,'Noto Serif KR',serif);
}
.g-saju-card__del {
  background: none;
  border: none;
  color: var(--color-text-soft, #98A09A);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.15s;
}
.g-saju-card__del:hover { color: var(--color-error, #C03030); }

/* ── g-inner-shell — 모바일 우선, 앱 셸 폭 가운데 정렬(cmd-103) ────── */
.g-inner-shell {
  width: 100%;
  position: relative;
}

@media (min-width: 680px) {
  /* #general-ui: CSS #general-ui { background !important } 가 이미 라이트로 덮음 */
  .g-inner-shell {
    max-width: var(--app-max);
    margin: 0 auto;
    background: var(--color-bg, #F7F4EB);
    min-height: 100%;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  }
}

/* ── 스트리밍 해석 뷰 (createStreamView) ── */
.isv-wrap {
  background: var(--color-bg-card, #FFFFFF);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 18px;
  min-height: 120px;
}
.isv-status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 12px; color: var(--color-text-mute, #6E746C);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px dashed var(--color-line, #D2D3CA);
  flex-wrap: wrap;
}
.isv-spinner {
  width: 12px; height: 12px; flex-shrink: 0;
  border: 2px solid var(--color-line, #D2D3CA);
  border-top-color: var(--color-point, #DF5C3F);
  border-radius: 50%;
  animation: isv-spin 0.8s linear infinite;
}
.isv-state { font-weight: 600; color: var(--color-text-base, #2A2A2F); }
.isv-badge {
  background: var(--color-bg-soft, #EFE9DA);
  color: var(--color-text-mute, #6E746C);
  padding: 2px 8px; border-radius: 0; font-size: 10px;
}
.isv-time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, monospace); font-size: 11px;
}
.isv-body {
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 16px; line-height: 1.9;   /* cmd-398: 작가 지시 — 모바일에서 너무 작았다 */
  color: var(--color-text-base, #2A2A2F);
  white-space: pre-wrap; word-break: keep-all;
  min-height: 60px;
}
.isv-cursor::after {
  content: '▍'; display: inline-block; margin-left: 2px;
  color: var(--color-point, #DF5C3F);
  animation: isv-blink 1s steps(1) infinite;
}
.isv-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 10px;
  border-top: 1px dashed var(--color-line, #D2D3CA);
}
.isv-rating { flex: 1; }
.isv-copy, .isv-regen {
  background: transparent; border: 1px solid var(--color-line, #D2D3CA);
  padding: 4px 10px; border-radius: 4px; font-size: 11px;
  cursor: pointer; font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
}
.isv-copy:hover, .isv-regen:hover { background: var(--color-bg-soft, #EFE9DA); }
.isv-retry-bar { margin-top: 12px; }
.isv-retry-btn {
  background: var(--color-point, #DF5C3F); color: #fff; border: none;
  padding: 6px 14px; border-radius: 6px; font-size: 12px; cursor: pointer;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
}
/* ── 자유 발언 표시 분리 (cmd-406 P1) — 확정 판정과 갈라 보이게 머리표만 붙인다 ── */
.isv-freevoice-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--color-point, #DF5C3F);
  background: var(--color-bg-soft, #EFE9DA);
  border-radius: 3px; padding: 1px 6px; margin-right: 6px;
  vertical-align: 2px; user-select: none;
}
[data-state="completed"] .isv-spinner,
[data-state="failed"] .isv-spinner,
[data-state="cached"] .isv-spinner { display: none; }
[data-state="completed"] .isv-state { color: var(--color-success, #2E8B57); }
[data-state="failed"] .isv-state { color: var(--color-error, #D9534F); }
[data-state="cached"] .isv-state { color: var(--color-text-mute, #6E746C); }
@keyframes isv-spin  { to { transform: rotate(360deg); } }
@keyframes isv-blink { 50% { opacity: 0; } }

/* ── 오행 분포 바차트 (N6-C) ── */
.ohaeng-bars {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  align-items: end;
  min-height: 130px;
  padding: 8px 0 0;
}
.ohaeng-bar {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ohaeng-bar__label {
  font-family: var(--font-serif, 'Noto Serif KR', serif);
  font-size: 16px; font-weight: 600;
  color: var(--color-text-strong, #1A1A1F);
}
.ohaeng-bar__fill {
  width: 28px; border-radius: 4px 4px 0 0;
  transition: height .3s ease;
  min-height: 4px;
}
.ohaeng-bar--mok  .ohaeng-bar__fill { background: var(--color-oh-mok,  #2E8B3F); }
.ohaeng-bar--hwa  .ohaeng-bar__fill { background: var(--color-oh-hwa,  #D72E1A); }
.ohaeng-bar--to   .ohaeng-bar__fill { background: var(--color-oh-to,   #D48E15); }
.ohaeng-bar--geum .ohaeng-bar__fill { background: var(--color-oh-geum, #5B7088); }
.ohaeng-bar--su   .ohaeng-bar__fill { background: var(--color-oh-su,   #15407A); }
.ohaeng-bar__count {
  font-size: 10px; color: var(--color-text-mute, #6E746C);
  text-align: center;
}
.ohaeng-bar__count small { font-size: 9px; color: var(--color-text-soft, #98A09A); }

/* ── 충돌 룰 검토 UI ── */
.conflict-group {
  background: var(--color-bg-card, #FFFFFF);
  border: 1px solid var(--color-line, #D2D3CA);
  border-left: 4px solid var(--color-warning, #E0A030);
  border-radius: var(--radius-lg, 12px);
  padding: 16px;
  margin-bottom: 20px;
}
.conflict-group__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.conflict-group__head h3 {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: var(--color-text-strong, #10271F);
  flex: 1; margin: 0;
}
.conflict-arbiter {
  background: #FBEEE9;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px; line-height: 1.6;
  color: var(--color-text-base, #2A2A2F);
  margin-bottom: 12px;
  display: none;
}
.conflict-arbiter.active { display: block; }
.conflict-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.conflict-card {
  background: var(--color-bg-soft, #EFE9DA);
  border: 1px solid var(--color-line, #D2D3CA);
  border-radius: 8px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.conflict-card__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--color-text-mute, #6E746C); flex-wrap: wrap;
}
.cc-src { font-weight: 600; }
.cc-link { color: var(--color-point, #DF5C3F); text-decoration: none; }
.cc-conf { margin-left: auto; font-size: 10px; }
.conflict-card__body {
  flex: 1;
  font-size: 12.5px; line-height: 1.7;
  color: var(--color-text-base, #2A2A2F);
  white-space: pre-wrap;
  max-height: 220px; overflow-y: auto;
  padding: 8px;
  background: var(--color-bg-card, #FFFFFF);
  border-radius: 4px;
}
.conflict-card__actions {
  display: flex; gap: 5px;
}
.conflict-card__actions button {
  flex: 1; padding: 5px 6px;
  border: none; border-radius: 4px;
  font-size: 11px; cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
}
.cc-btn-approve { background: var(--color-success, #2E8B57); color: #fff; }
.cc-btn-edit    { background: var(--color-text-mute, #6E746C); color: #fff; }
.cc-btn-reject  { background: var(--color-error, #D9534F); color: #fff; }
.cc-btn-ai {
  background: var(--color-point, #DF5C3F); color: #fff;
  border: none; padding: 5px 12px; border-radius: 6px;
  font-size: 11px; cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif; white-space: nowrap;
}
.cc-btn-ai:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 480px) {
  .conflict-cards { grid-template-columns: 1fr; }
  .conflict-card__body { max-height: 160px; }
}

/* ── C5: 독서실 (study-library) ──────────────────────────────────── */
.study-library { padding: 0 0 12px; }
.library-tagline { font-size:12px; color:var(--text-muted,#8A8A8F); margin:2px 0 10px; }
.lib-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.lib-filter-btn {
  padding:4px 12px; border-radius:99px; border:1px solid var(--color-line,#E0DDD6);
  background:transparent; font-size:11px; cursor:pointer; color:var(--color-text-mute,#8A8A8F);
  transition:all .15s;
}
.lib-filter-btn.active, .lib-filter-btn:hover {
  background:var(--color-point,#DF5C3F); color:#fff; border-color:var(--color-point,#DF5C3F);
}
.lib-article {
  background:var(--color-bg-card,#EFE9DA); border:1px solid var(--color-line,#E0DDD6);
  border-radius:var(--radius-lg,12px); padding:14px 16px; margin-bottom:10px;
  cursor:pointer; transition:all .15s;
}
.lib-article:hover {
  border-color:var(--color-point,#DF5C3F); transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(223,92,63,0.12);
}
.lib-article__meta { display:flex; gap:8px; font-size:11px; color:var(--text-muted,#8A8A8F); margin-bottom:6px; align-items:center; }
.lib-cat-badge {
  background:rgba(223,92,63,0.10); color:var(--color-point,#DF5C3F);
  padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600;
}
.lib-author { font-style:italic; font-size:10px; color:var(--text-muted,#8A8A8F); }
.lib-article__title {
  font-family:var(--font-serif,'Noto Serif KR',serif); font-size:16px; font-weight:500;
  color:var(--color-text-strong,#10271F); margin:0 0 5px;
}
.lib-article__summary {
  font-size:12px; line-height:1.6; color:var(--color-text-base,#1B3B30);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0;
}
.lib-article__rating { font-size:10px; color:var(--text-muted,#8A8A8F); margin-top:7px; }
@media (max-width: 480px) {
  .lib-article { padding:11px 12px; }
  .lib-article__title { font-size:14px; }
}


/* ── 일반방 올해/평생운세 오버레이 스타일 (cmd-20) ── */
.g-yr-section {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border, #e5e5ea);
}
.g-yr-section:last-child { border-bottom: none; }
.g-yr-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-mute, #6E746C);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.g-rule-text {
  font-size: 15px;          /* cmd-398: 13px → 15px */
  line-height: 1.8;
  white-space: pre-wrap;
  color: var(--color-text, #1c1c1e);
  background: var(--color-bg-sub, #f5f5f7);
  border-radius: 8px;
  padding: 12px;
}
/* 분기 흐름 표 — 룰 본문 카드에 이어 붙인다 (cmd-342) */
#g-rule-body.has-qf .g-rule-text { border-radius: 8px 8px 0 0; }
.g-yr-quarter-facts:empty { display: none; }
#g-rule-body.has-qf .g-yr-quarter-facts {
  background: var(--color-bg-sub, #f5f5f7);
  border-radius: 0 0 8px 8px;
  border-top: 1px solid rgba(16,39,31,.07);
  padding: 10px 12px 12px;
}
.g-qf-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
  color: var(--color-text-mute, #6E746C); margin-bottom: 6px;
}
.g-qf-scroll { overflow-x: auto; }
.g-qf-scroll table { min-width: 560px; }
.g-qf-scroll th, .g-qf-scroll td { padding: 4px 6px; white-space: nowrap; }

.g-dw-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(223,92,63,0.08);
  border-radius: 8px;
  padding: 10px 14px;
}
.g-dw-char { font-size: 22px; font-weight: 700; color: #DF5C3F; }
.g-dw-range { font-size: 13px; color: var(--color-text-mute, #6E746C); }
.g-dw-badge {
  font-size: 11px; font-weight: 600;
  background: #DF5C3F; color: #fff;
  border-radius: 4px; padding: 2px 6px; margin-left: auto;
}
.g-sw-list { display: flex; gap: 6px; flex-wrap: wrap; }
.g-sw-row {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 10px; border-radius: 8px;
  background: var(--color-bg-sub, #f5f5f7);
  font-size: 12px; gap: 2px;
}
.g-sw-row--cur {
  background: rgba(223,92,63,0.10);
  border: 1.5px solid #DF5C3F;
}
.g-sw-year { font-size: 11px; color: var(--color-text-mute, #6E746C); }
.g-sw-char { font-size: 18px; font-weight: 700; }
.g-sw-row--cur .g-sw-char { color: #DF5C3F; }
.g-sw-age { font-size: 11px; color: var(--color-text-mute, #6E746C); }

/* ── cmd-21 AI 버튼 + 룰태그 스타일 ── */
/* 사주 풀이 카드 헤더 토글 — 일운 카드와 같은 꼴 (cmd-332) */
.g-yr-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.g-yr-head .g-yr-label { margin-bottom:0; }
.g-yr-tabs { margin-left:auto; display:flex; gap:6px; }
.g-yr-tab {
  padding:4px 11px; border:1px solid var(--color-line,#D2D3CA); border-radius:99px;
  background:#FEFCF9; color:var(--color-text-mute,#6E746C);
  font-family:'Noto Sans KR',sans-serif; font-size:11px; cursor:pointer;
  white-space:nowrap; transition:.15s;
}
.g-yr-tab:hover { border-color:var(--color-point,#DF5C3F); color:var(--color-point,#DF5C3F); }
.g-yr-tab.is-on {
  border-color:var(--color-point,#DF5C3F); background:var(--color-point-soft,#FBEEE9);
  color:var(--color-point,#DF5C3F); font-weight:700;
}
.g-yr-tab--paid.is-on {
  background:linear-gradient(180deg, var(--color-point,#DF5C3F), #C03500);
  border-color:#c2410c; color:#fff;
}

.g-ai-start-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: #DF5C3F;
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.g-ai-start-btn:disabled {
  background: var(--color-text-mute, #6E746C);
  cursor: not-allowed;
}
.g-ai-start-btn:hover:not(:disabled) { background: #c33c00; }
.g-rule-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.g-rule-tag {
  font-size: 11px; padding: 3px 8px;
  background: rgba(223,92,63,0.1);
  color: #DF5C3F;
  border-radius: 20px; font-weight: 600;
}


/* ── DENSE-NAMSIK Phase A ──────────────────────────────────── */

/* A1: 지장간 개별 칸 */
.p6-col__jijang {
  display: flex;
  gap: 2px;
  justify-content: center;
  min-height: 18px;
  padding: 2px 0;
}
.jijang-char {
  font-size: 11px;
  font-family: 'Noto Serif KR', serif;
  color: var(--text-muted, #888);
  padding: 1px 3px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 2px;
  line-height: 1.3;
}

/* A2: 신살 태그 인라인 */
.p6-col__sinsal {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  padding: 2px 2px;
  min-height: 16px;
}
.sinsal-tag {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.4;
}
.sinsal-tag--good    { background: #e8f4e8; color: #2a7a2a; }
.sinsal-tag--bad     { background: #fde8e8; color: #9a2a2a; }
.sinsal-tag--neutral { background: #f0f0f0; color: #555; }
/* 등급 채도(신살-정리-계획서 §5) */
.sinsal-tag--gB { opacity: 0.78; }
.sinsal-tag--gC { opacity: 0.55; }

/* A3: 오행 갯수 한 줄 요약 */
.oh-text-summary {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 11px;
  padding: 5px 0 3px;
  letter-spacing: 0.3px;
}
.oh-sum-item { font-weight: 600; }
.oh-sum-item--木 { color: #3a7a3a; }
.oh-sum-item--火 { color: #b83c32; }
.oh-sum-item--土 { color: #c2862a; }
.oh-sum-item--金 { color: #888; }
.oh-sum-item--水 { color: #2f5683; }
/* ─────────────────────────────────────────────────────────── */

/* ── DENSE-NAMSIK Phase A ──────────────────────────────────── */
.p6-col__jijang {
  display: flex; gap: 2px; justify-content: center;
  min-height: 18px; padding: 2px 0;
}
.jijang-char {
  font-size: 11px; font-family: 'Noto Serif KR', serif;
  color: var(--text-muted, #888);
  padding: 1px 3px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 2px; line-height: 1.3;
}
.p6-col__sinsal {
  display: flex; flex-wrap: wrap; gap: 2px;
  justify-content: center; padding: 2px 2px; min-height: 16px;
}
.sinsal-tag {
  font-size: 9px; padding: 1px 4px; border-radius: 3px;
  white-space: nowrap; line-height: 1.4;
}
.sinsal-tag--good    { background: #e8f4e8; color: #2a7a2a; }
.sinsal-tag--bad     { background: #fde8e8; color: #9a2a2a; }
.sinsal-tag--neutral { background: #f0f0f0; color: #555; }
/* 등급 채도 — .fn-sinsal--g* 와 같은 정책(신살-정리-계획서 §5). 중복 정의된 위쪽 블록에도 같이 둔다. */
.sinsal-tag--gB { opacity: 0.78; }
.sinsal-tag--gC { opacity: 0.55; }
.oh-text-summary {
  display: flex; justify-content: center; gap: 10px;
  font-size: 11px; padding: 5px 0 3px; letter-spacing: 0.3px;
}
.oh-sum-item { font-weight: 600; }
.oh-sum-item--木 { color: #3a7a3a; }
.oh-sum-item--火 { color: #b83c32; }
.oh-sum-item--土 { color: #c2862a; }
.oh-sum-item--金 { color: #888; }
.oh-sum-item--水 { color: #2f5683; }
.oh-dim { opacity: 0.35; }
/* ─────────────────────────────────────────────────────────── */

/* ── B2 합충 SVG 브래킷 행 ─────────────────────────────────── */
.hc-svg-row {
  grid-column: 1 / -1;
  height: 26px;
  position: relative;
  pointer-events: none;
  overflow: hidden;
  margin-top: -4px;
}

/* ── DENSE-NAMSIK Phase B — 4-col 원국 전용 뷰 ─────────────── */
/* 세운·대운 숨기기 */
.pillars-6col.mode-4col [data-col="sewoon"],
.pillars-6col.mode-4col [data-col="daewoon"] {
  display: none;
}
/* 4기둥 그리드 재설정 */
.pillars-6col.mode-4col {
  grid-template-columns: repeat(4, minmax(80px, 1fr));
}
/* 천간·지지 박스 확대 */
.pillars-6col.mode-4col .p6-col__tg,
.pillars-6col.mode-4col .p6-col__zz {
  width: 40px; height: 40px; font-size: 26px;
}
/* 지장간 한자 약간 키우기 */
.pillars-6col.mode-4col .jijang-char {
  font-size: 12px; padding: 2px 4px;
}
/* 모바일 */
@media (max-width: 480px) {
  .pillars-6col.mode-4col {
    grid-template-columns: repeat(4, 74px);
  }
  .pillars-6col.mode-4col .p6-col {
    min-width: 74px;
  }
}
/* ─────────────────────────────────────────────────────────── */




/* ══════════════════════════════════════════════
   명식표 통합 컴포넌트 (mamsik-view)
   js/components/mamsik-view.js 와 세트
   ══════════════════════════════════════════════ */

/* 헤더 */
.mv-hdr{background:linear-gradient(140deg,#0f0c29,#302b63,#24243e);color:#fff;padding:10px 12px;display:flex;gap:10px;align-items:flex-start;border-radius:8px 8px 0 0;}
.mv-avatar{width:42px;height:42px;border-radius:50%;background:#e74c3c;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;flex-shrink:0;border:2px solid rgba(255,255,255,.2);}
.mv-hdr-name{font-size:13px;font-weight:700;}
.mv-hdr-dates{font-size:9.5px;opacity:.7;line-height:1.65;margin-top:3px;}
.mv-badge{display:inline-block;background:#e74c3c;border-radius:10px;padding:2px 9px;font-size:9.5px;margin-top:4px;}

/* 메인 영역 */
.mv-sw{padding:7px 7px 0;background:#fafafa;border-bottom:1px solid #e0e0e0;}

/* 6열 그리드 */
.mv-sg6{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(7,auto);column-gap:4px;row-gap:3px;}

/* 운 컬럼 */
.mv-col-run{grid-row:span 7;display:grid;grid-template-rows:subgrid;justify-items:center;align-items:center;background:#eef2fc;border:1.5px solid #c5d3ee;border-radius:7px;padding:4px 2px;position:relative;}
/* 원국 컬럼 */
.mv-col-won{grid-row:span 7;display:grid;grid-template-rows:subgrid;justify-items:center;align-items:center;}
.mv-p-nm{font-size:10px;font-weight:700;text-align:center;}
.mv-p-sub{font-size:8.5px;color:#bbb;text-align:center;line-height:1.3;}
.mv-sip{font-size:9px;color:#666;min-height:12px;text-align:center;}
.mv-gz{width:100%;aspect-ratio:1;max-width:72px;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.mv-gz-ch{font-size:22px;font-weight:700;line-height:1;}
.mv-gz-oh{font-size:8px;opacity:.85;margin-top:1px;}
.mv-gz-ilju{box-shadow:0 0 0 2.5px #f1c40f,0 0 0 4.5px rgba(241,196,15,.2);}
.mv-jjg{font-size:8px;color:#bbb;letter-spacing:.3px;text-align:center;margin-top:1px;margin-bottom:2px;display:flex;gap:2px;justify-content:center;flex-wrap:wrap;}

/* 서브그리드 */
.mv-sbg{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:2px 0;}
.mv-sdiv{grid-column:1/-1;display:flex;align-items:center;gap:5px;padding:3px 0;margin:2px 0;}
.mv-sdiv-line{flex:1;height:1px;background:#e0e0e0;}
.mv-sdiv-label{font-size:9px;font-weight:700;color:#888;padding:0 4px;white-space:nowrap;}
.mv-sc{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px 5px;background:#fff;border:1px solid #eee;border-radius:5px;text-align:center;position:relative;font-size:10px;}
.mv-rsc{background:#eef2fc;border-color:#c5d3ee;}
.mv-isc{border-color:#f1c40f;border-width:1.5px;}
.mv-slbl{font-size:8px;color:#aaa;font-weight:700;position:absolute;top:3px;left:4px;}
.mv-slbl.il{color:#c8960a;}
.mv-slbl.ru{color:#4a6cbf;}
.mv-slbl.rs{color:#2a7a52;}

/* 12운성 */
.mv-uns-chip{border-radius:4px;padding:2px 6px;font-size:11.5px;font-weight:700;color:#fff;margin-top:10px;}
.mv-uns-dots{display:flex;gap:2px;}
.mv-ud{width:6px;height:6px;border-radius:50%;background:#e0e0e0;}
.mv-ud.on{background:#f39c12;}
.mv-run-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:55px;font-size:8px;color:#96aad4;line-height:1.6;text-align:center;padding:4px 2px;}

/* 기둥 하단 래퍼 (신살+지장간, 항상 7번째 subgrid 슬롯) */
.mv-bot{display:flex;flex-direction:column;align-items:center;width:100%;gap:2px;}
/* 신살 인라인 (기둥 내부) */
.mv-sin-inline{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin:2px 0;}
/* 신살 태그 */
.mv-stg{font-size:8.5px;border-radius:3px;padding:1px 4px;margin:1px 0;display:block;font-weight:500;white-space:nowrap;}
.mv-stg-bad{background:#fce4ec;color:#c62828;border:1px solid #ef9a9a;}
.mv-stg-warn{background:#fff3e0;color:#bf360c;border:1px solid #ffcc80;}
.mv-stg-gui{background:#e8eaf6;color:#1a237e;border:1px solid #9fa8da;}
.mv-stg-sp{background:#f3e5f5;color:#6a1b9a;border:1px solid #ce93d8;}

/* 형충합 태그 */
.mv-rtg{font-size:8.5px;border-radius:3px;padding:1px 4px;margin:1px 0;display:block;font-weight:600;white-space:nowrap;}

/* 공망 */
.mv-km-bar{grid-column:1/-1;padding:4px 0;display:flex;align-items:center;gap:5px;border-top:1px dashed #ddd;margin-top:2px;margin-bottom:6px;flex-wrap:wrap;}
.mv-km-lbl{font-size:9px;font-weight:700;color:#78909c;}
.mv-km-char{background:#eceff1;border:1px solid #b0bec5;border-radius:3px;padding:1px 5px;font-weight:700;font-size:10px;color:#546e7a;text-decoration:line-through;}
.mv-km-note{font-size:9px;color:#b0bec5;}

/* 형충합파 상세 */
.mv-ssl{display:inline-block;margin:1px;padding:1px 4px;border-radius:3px;font-size:9px;font-weight:700;line-height:1.6;white-space:nowrap;}
.mv-ssl.ssl-g{background:#e6f4ec;color:#1e6b47;}
.mv-ssl.ssl-w{background:#fdeaea;color:#a83232;}
.mv-ssl.ssl-n{background:#eef0f4;color:#46536b;}
.mv-hca-sec{border-bottom:1px solid #e0e0e0;}
.mv-hca-hdr{padding:6px 12px;color:#fff;font-size:11px;font-weight:700;display:flex;justify-content:space-between;background:#3b1f4e;cursor:pointer;user-select:none;}
.mv-hca-cnt{font-size:9px;background:rgba(255,255,255,.15);border-radius:8px;padding:1px 7px;margin-left:4px;}
.mv-hca-list{padding:7px 10px;background:#fafafa;display:flex;flex-direction:column;gap:5px;}
.mv-hca-item{display:flex;align-items:flex-start;gap:6px;}
.mv-hca-badge{width:25px;height:25px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;margin-top:1px;}
.mv-hca-info{flex:1;}
.mv-hca-title{font-size:11px;font-weight:700;color:#222;}
.mv-hca-sub{font-size:9.5px;color:#888;margin-top:1px;line-height:1.5;}
.mv-hca-tag{font-size:8.5px;border-radius:3px;padding:1px 5px;margin-left:4px;font-weight:600;}
.mv-hca-desc{font-size:9.5px;color:#999;text-align:right;white-space:nowrap;align-self:center;margin-left:auto;flex-shrink:0;}
.htg-won{background:#eee;color:#666;}
.htg-d{background:#dce8fc;color:#1a3a6b;}
.htg-s{background:#dcf0e4;color:#1e4d40;}

/* 오행바 */
.mv-ohbar{padding:5px 12px;background:#f0f0f0;border-bottom:1px solid #e0e0e0;display:flex;gap:8px;align-items:center;font-size:10.5px;flex-wrap:wrap;}
.mv-ohd{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:2px;vertical-align:middle;}

/* 선택 인포 */
.mv-trk-info{padding:4px 12px;background:#f5f5f5;font-size:10px;color:#666;border-bottom:1px solid #eee;display:flex;gap:5px;align-items:center;flex-wrap:wrap;}
.mv-ti-b{padding:2px 8px;border-radius:10px;font-size:9.5px;font-weight:600;color:#fff;}
.mv-ti-d{background:#1a3a6b;}
.mv-ti-s{background:#1e4d40;}

/* 섹션 헤더 */
.mv-sec{padding:6px 12px;color:#fff;font-size:11.5px;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
.mv-hint{font-size:9.5px;opacity:.65;}

/* 트랙 */
.mv-fw{overflow-x:auto;padding:6px 10px;background:#f8f8f8;-webkit-overflow-scrolling:touch;}
.mv-ft{display:flex;gap:4px;min-width:max-content;}
.mv-fc{display:flex;flex-direction:column;align-items:center;padding:5px 6px;border:1.5px solid #ddd;border-radius:7px;cursor:pointer;background:#fff;min-width:50px;transition:.15s;user-select:none;}
.mv-fc:hover{border-color:#1a3a6b;background:#f0f5ff;}
.mv-fc-cur{border-color:#e74c3c;background:#fff5f5;}
.mv-fc-sel{border-color:#1a3a6b!important;background:#dce8fc!important;}
.mv-f-age{font-size:8.5px;color:#ccc;}
.mv-f-g{font-size:16px;font-weight:700;line-height:1.1;}
.mv-f-ss{font-size:8px;color:#bbb;}
.mv-f-yr{font-size:8px;color:#ccc;margin-top:1px;}
.mv-f-cur{font-size:8.5px;color:#e74c3c;font-weight:700;}

/* ══════════════════════════════════════════════
   cmd-291 명식판 "만지기" — 글자 what-if · 강약 델타
   js/components/mamsik-whatif.js 와 세트
   기존 .mv-* 표시(십신·지장간·12운성·형합·공망·오행)는 건드리지 않는다.
   색은 전부 토큰 참조(신규 색값은 --color-point-deep 하나, :root 참조).
   ══════════════════════════════════════════════ */

/* 탭 가능한 원국 간지 칸 — 운(대운·세운) 칸에는 안 붙는다 */
.mv-gz-tap{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.mv-gz-tap::after{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1.5px currentColor;opacity:0;transition:opacity .12s;pointer-events:none;}
.mv-gz-tap:hover::after{opacity:.6;}
.mv-gz-tap:focus-visible{outline:2px solid var(--color-whatif);outline-offset:2px;}
.mv-gz-tap:active{transform:scale(.96);}

/* 바뀐 칸 표시 — 원본 글자는 그대로 두고 링·배지만 겹친다 */
.mv-gz-wi{box-shadow:0 0 0 2.5px var(--color-whatif),0 0 0 5px var(--color-whatif-soft)!important;}
/* 배지는 칸 '안쪽' 아래에 둔다 — 칸 밖(지장간 행)을 가리지 않으면서,
   가정으로 무효가 된 원래 글자의 오행 라벨 자리를 대신 차지한다.
   원래 글자는 지우지 않고 흐리게만 한다(원본이 무엇이었는지 계속 보이게). */
.mv-gz-wi .mv-gz-ch{opacity:.4;}
.mv-wi-badge{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
  background:var(--color-whatif);color:#fff;
  font-size:11px;font-weight:700;line-height:1;padding:3px 6px;border-radius:7px;
  white-space:nowrap;pointer-events:none;}

/* 슬롯 */
.mv-wi-slot{margin:12px 0 4px;}
.mv-wi-slot:empty{display:none;margin:0;}

/* 후보 피커 */
.mv-wi-pick{background:var(--color-bg-card);border:1px solid var(--color-line);
  border-radius:var(--radius-lg);padding:10px;margin-bottom:8px;}
.mv-wi-pick-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;color:var(--color-text-base);margin-bottom:9px;}
.mv-wi-pick-hd b{color:var(--color-text-strong);font-size:14px;}
.mv-wi-chips{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;}
.mv-wi-chip{min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:4px 2px;cursor:pointer;font-family:inherit;
  border:1px solid var(--color-line);border-radius:var(--radius-md);
  background:var(--color-bg-soft);color:var(--color-text-strong);}
.mv-wi-chip-ch{font-size:18px;font-weight:700;line-height:1;}
.mv-wi-chip-oh{font-size:11px;color:var(--color-text-mute);line-height:1;}
.mv-wi-chip[data-oh="木"]{background:var(--color-oh-mok-soft);border-color:var(--color-oh-mok);}
.mv-wi-chip[data-oh="火"]{background:var(--color-oh-hwa-soft);border-color:var(--color-oh-hwa);}
.mv-wi-chip[data-oh="土"]{background:var(--color-oh-to-soft);border-color:var(--color-oh-to);}
.mv-wi-chip[data-oh="金"]{background:var(--color-oh-geum-soft);border-color:var(--color-oh-geum);}
.mv-wi-chip[data-oh="水"]{background:var(--color-oh-su-soft);border-color:var(--color-oh-su);}
.mv-wi-chip.is-cur{outline:2px solid var(--color-text-strong);outline-offset:-3px;}
.mv-wi-chip:active{transform:scale(.95);}
.mv-wi-pick-note{font-size:12px;color:var(--color-text-mute);margin-top:8px;line-height:1.5;}

/* 델타 패널 */
.mv-wi-panel{background:var(--color-whatif-soft);border:1.5px solid var(--color-whatif-line);
  border-radius:var(--radius-lg);padding:10px;}
.mv-wi-hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px;}
.mv-wi-tag{flex-shrink:0;background:var(--color-whatif);color:var(--color-bg-card);
  font-size:11px;font-weight:700;letter-spacing:.5px;padding:3px 9px;border-radius:10px;line-height:1.4;}
.mv-wi-hd-txt{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--color-text-strong);line-height:1.4;}
.mv-wi-btn{flex-shrink:0;min-height:44px;padding:6px 13px;cursor:pointer;font-family:inherit;font-size:12px;
  border:1px solid var(--color-line-strong);border-radius:var(--radius-md);
  background:var(--color-bg-card);color:var(--color-text-base);}
.mv-wi-btn.is-reset{border-color:var(--color-whatif-line);color:var(--color-whatif);font-weight:700;}

/* 델타 표 */
.mv-wi-tbl{width:100%;border-collapse:collapse;background:var(--color-bg-card);
  border-radius:var(--radius-md);overflow:hidden;}
.mv-wi-tbl th,.mv-wi-tbl td{padding:6px 9px;text-align:right;font-size:14px;line-height:1.3;
  font-variant-numeric:tabular-nums;border-bottom:1px solid var(--color-line-light);}
.mv-wi-tbl thead th{font-size:12px;font-weight:600;color:var(--color-text-mute);
  background:var(--color-bg-soft);}
.mv-wi-tbl th[scope="row"],.mv-wi-tbl thead th:first-child{text-align:left;
  font-size:12px;font-weight:600;color:var(--color-text-mute);}
.mv-wi-tbl td{color:var(--color-text-mute);}
.mv-wi-tbl td.alt{color:var(--color-text-strong);font-weight:700;}
.mv-wi-tbl td.d{width:24%;font-weight:700;}
.mv-wi-tbl td.d.up{color:var(--color-delta-plus);}
.mv-wi-tbl td.d.dn{color:var(--color-delta-minus);}
.mv-wi-tbl td.d.z{color:var(--color-delta-zero);}
.mv-wi-tbl tfoot th,.mv-wi-tbl tfoot td{border-bottom:none;background:var(--color-bg-soft);font-size:15px;}
.mv-wi-tbl tfoot th[scope="row"]{font-size:13px;color:var(--color-text-strong);}

/* 판정 변화 (강약·용신·격국) */
.mv-wi-vds{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.mv-wi-vd{display:flex;align-items:center;gap:7px;padding:8px 9px;font-size:13px;
  background:var(--color-bg-card);border-radius:var(--radius-md);}
.mv-wi-vd-l{flex-shrink:0;width:34px;font-size:12px;color:var(--color-text-mute);}
.mv-wi-vd-a{color:var(--color-text-mute);}
.mv-wi-vd-arw{color:var(--color-text-mute);font-size:12px;}
.mv-wi-vd-b{font-weight:700;color:var(--color-text-strong);}
.mv-wi-vd-tag{margin-left:auto;flex-shrink:0;font-size:11px;padding:3px 8px;border-radius:9px;
  background:var(--color-bg-soft);color:var(--color-text-mute);}
.mv-wi-vd-tag.is-chg{background:var(--color-whatif);color:var(--color-bg-card);font-weight:700;}
.mv-wi-vd.is-same .mv-wi-vd-b{font-weight:500;color:var(--color-text-mute);}

.mv-wi-note{margin-top:9px;font-size:12px;line-height:1.55;color:var(--color-text-mute);}

@media (prefers-reduced-motion:reduce){
  .mv-gz-tap,.mv-gz-tap::after,.mv-wi-chip{transition:none;}
  .mv-gz-tap:active,.mv-wi-chip:active{transform:none;}
}

/* ══════════════════════════════════════════════════════════════════
   학습실 v3 UI (cmd-53, 시안 outputs/학습실-시안-v3.html 이식)
   클래스는 lr- 접두사로 스코프(기존 .card/.tab/.dot/.sys/.note 등과 충돌 확인 후 분리).
   색·폰트·간격은 시안 인라인 값 대신 기존 --color-*/--font-*/--space-*/--radius-* 토큰만 사용.
   ══════════════════════════════════════════════════════════════════ */
.lr-wrap{max-width:1200px;margin:0 auto;}
.lr-head{margin:var(--space-6) 0 14px;display:flex;align-items:baseline;gap:10px;}
.lr-head h2{font-family:var(--font-serif);font-size:20px;color:var(--color-text-strong);font-weight:600;}
.lr-head .sub{font-size:12px;color:var(--color-text-mute);}
.lr-card{background:var(--color-bg-card);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:20px;}
.lr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* 파이프라인 스트립 */
.lr-pipe{display:flex;align-items:stretch;gap:0;background:var(--color-bg-card);border:1px solid var(--color-line);border-radius:var(--radius-lg);overflow:hidden;margin-top:8px;}
.lr-pipe .lr-stage{flex:1;padding:16px 14px;text-align:center;position:relative;border-right:1px solid var(--color-line);}
.lr-pipe .lr-stage:last-child{border-right:none;}
.lr-pipe .lr-stage .n{font-family:var(--font-serif);font-size:26px;font-weight:700;color:var(--color-text-strong);line-height:1;}
.lr-pipe .lr-stage .lbl{font-size:12px;color:var(--color-text-mute);margin-top:6px;}
.lr-pipe .lr-stage .sub{font-size:11px;color:var(--color-text-soft);margin-top:2px;}
.lr-pipe .lr-stage.hl{background:var(--color-point-soft);}
.lr-pipe .lr-stage.hl .n{color:var(--color-point);}
.lr-pipe .lr-flow{position:absolute;right:-9px;top:50%;transform:translateY(-50%);z-index:2;color:var(--color-line-strong);font-size:16px;background:var(--color-bg-card);width:18px;}
.lr-cap{font-size:11px;color:var(--color-text-soft);margin-top:4px;}

/* 소스 유입 */
.lr-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.lr-tab{padding:7px 14px;border-radius:20px;border:1px solid var(--color-line);background:var(--color-bg-card);color:var(--color-text-base);font-size:13px;cursor:pointer;}
.lr-tab.on{background:var(--color-point);color:#fff;border-color:var(--color-point);font-weight:500;}
.lr-field{display:flex;gap:8px;margin-bottom:10px;}
.lr-field input,.lr-field textarea{flex:1;padding:10px 12px;border:1px solid var(--color-line-strong);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:13px;background:var(--color-bg-card);color:var(--color-text-base);}
.lr-field textarea{resize:vertical;min-height:64px;}
.lr-btn{padding:10px 16px;border-radius:var(--radius-md);border:none;background:var(--color-ink);color:#fff;font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;}
.lr-btn.point{background:var(--color-point);}
.lr-btn.ghost{background:transparent;color:var(--color-text-base);border:1px solid var(--color-line-strong);}
.lr-srclist{margin-top:6px;}
.lr-srcrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--color-line);font-size:13px;}
.lr-srcrow:first-child{border-top:none;}
.lr-srcrow .name{flex:1;color:var(--color-text-base);}
.lr-dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.lr-dot.on{background:var(--color-success);}
.lr-dot.off{background:var(--color-text-soft);}
.lr-trust{font-size:11px;color:var(--color-text-mute);font-variant-numeric:tabular-nums;}
.lr-pane{display:none;}
.lr-pane.on{display:block;}

/* 승인 큐 카드 */
.lr-q{display:flex;flex-direction:column;gap:12px;}
.lr-frag{border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:15px 16px;background:var(--color-bg-card);}
.lr-frag .lr-ftop{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.lr-dom{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;}
.lr-dom.흐름{background:var(--color-oh-su-soft);color:var(--color-oh-su);}
.lr-dom.재물{background:var(--color-oh-to-soft);color:var(--color-oh-to);}
.lr-dom.적성{background:var(--color-oh-mok-soft);color:var(--color-oh-mok);}
.lr-dom.강점{background:var(--color-oh-geum-soft);color:var(--color-oh-geum);}
.lr-dom.조언{background:var(--color-bg-soft);color:var(--color-text-base);}
.lr-dom.총평{background:var(--color-oh-hwa-soft);color:var(--color-oh-hwa);}
.lr-dom.관계배우자,.lr-dom.육친,.lr-dom.건강{background:var(--color-bg-soft);color:var(--color-text-base);}
.lr-when{font-family:var(--font-serif);font-size:12px;color:var(--color-text-mute);}
.lr-when b{color:var(--color-text-base);font-weight:600;}
.lr-frag .lr-fbody{font-size:13.5px;color:var(--color-text-base);line-height:1.7;margin:4px 0 12px;}
.lr-frag .lr-ffoot{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--color-line);}
.lr-meta{font-size:11px;color:var(--color-text-mute);display:flex;gap:12px;flex-wrap:wrap;}
.lr-meta .g{color:var(--color-success);font-weight:600;}
.lr-acts{margin-left:auto;display:flex;gap:6px;}
.lr-mini{padding:5px 12px;font-size:12px;border-radius:var(--radius-sm);border:1px solid var(--color-line-strong);background:var(--color-bg-card);color:var(--color-text-base);cursor:pointer;}
.lr-mini.rej{color:var(--color-error);border-color:#E6C4C4;}

/* 병합대기 */
.lr-merge{display:flex;align-items:center;gap:18px;}
.lr-merge .big{font-family:var(--font-serif);font-size:34px;font-weight:700;color:var(--color-text-strong);}
.lr-merge .txt{flex:1;}
.lr-merge .txt .l1{font-size:14px;color:var(--color-text-base);font-weight:500;}
.lr-merge .txt .l2{font-size:12px;color:var(--color-text-mute);}
.lr-gate{font-size:12px;color:var(--color-success);background:var(--color-oh-mok-soft);border:1px solid var(--color-oh-mok);padding:3px 10px;border-radius:20px;}

/* 시스템(최소) */
.lr-sys{display:flex;gap:20px;align-items:center;font-size:12px;color:var(--color-text-mute);flex-wrap:wrap;}
.lr-sys .it{display:flex;align-items:center;gap:6px;}

@media(max-width:820px){
  .lr-grid2{grid-template-columns:1fr;}
  .lr-pipe{flex-wrap:wrap;}
  .lr-pipe .lr-stage{flex:1 1 30%;}
}


/* ── 구 클래식 셸 감춤 (2026-08-14) ─────────────────────────────────
   '易學工房 / AI 역학 스튜디오 탁(卓)' 브랜드 헤더는 영구 숨김.
   클래식 본체(.app)는 switchTab()이 body.classic-visible 을 줄 때만 노출. */
.app > .header { display: none !important; }
body:not(.classic-visible) .app { display: none; }
body:not(.classic-visible) .tabbar { display: none; }

/* ── 앱 프레임 폭 공용 유틸 (2026-08-14) — body에 붙는 전체화면 패널용 ── */
.g-frame {
  width: 100%;
  max-width: var(--app-max, 640px);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── 명식 입력 2단 레이아웃 (2026-08-14) — 좌: 만세력 입력 / 우: 저장된 명식 ── */
.g-input-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 700px) {
  .g-input-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
.g-input-form-col { min-width: 0; }
.g-input-saved {
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid var(--color-line, #D2D3CA);
  background: var(--color-bg-card, #FCFAF4);
}
.g-input-saved__head {
  margin-bottom: 10px;
  color: var(--color-text-base, #1B3B30);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
}
.g-input-saved__list { max-height: 520px; overflow-y: auto; }
.g-input-saved .g-saju-list__search { width: 100%; margin-bottom: 10px; }

/* ── 저장된 명식 카드 — 즐겨찾기·내 명식 (2026-08-14) ─────────────── */
.g-saju-card__pin {
  flex: 0 0 auto; margin-right: 2px; padding: 2px 4px;
  border: 0; background: none; cursor: pointer; line-height: 1;
  font-size: 14px; color: var(--color-text-soft, #98A09A);
}
/* ── 입력 화면 보조 도구 — 시간 찾기 · 쌍둥이 비교 (cmd-331) ─────── */
.g-bd-label { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.g-bd-tools { margin-left:auto; display:flex; gap:6px; }
.g-bd-tool {
  padding:3px 9px; border:1px solid rgba(200,175,150,.45); border-radius:99px;
  background:#FEFCF9; color:var(--color-text-base,#1B3B30);
  font-family:'Noto Sans KR',sans-serif; font-size:11px; cursor:pointer; transition:.15s;
}
.g-bd-tool:hover { border-color:var(--color-point,#DF5C3F); color:var(--color-point,#DF5C3F); }

.g-tool__body { padding:14px 16px 22px; overflow-y:auto; }
.g-tool__lead { margin:0 0 14px; font-size:12.5px; line-height:1.7; color:var(--color-text-base,#1B3B30); }
.g-tool__hint { margin:10px 0 0; font-size:11px; line-height:1.65; color:var(--color-text-mute,#8A8A8F); }

/* 시간 찾기 */
.g-tf-q { margin-bottom:14px; }
.g-tf-qt { display:flex; gap:6px; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--color-text-base,#1B3B30); }
.g-tf-qt i { flex:0 0 auto; font-style:normal; color:var(--color-point,#DF5C3F); }
.g-tf-opts { display:flex; flex-wrap:wrap; gap:6px; }
.g-tf-opt {
  padding:6px 11px; border:1px solid rgba(200,175,150,.4); border-radius:99px;
  background:#FEFCF9; font-family:'Noto Sans KR',sans-serif; font-size:11.5px;
  color:var(--color-text-base,#1B3B30); cursor:pointer; transition:.15s;
}
.g-tf-opt.is-on { border-color:var(--color-point,#DF5C3F); background:var(--color-point-soft,#FBEEE9); color:var(--color-point,#DF5C3F); font-weight:600; }
.g-tf-res { margin-top:18px; padding-top:14px; border-top:1px solid rgba(200,175,150,.3); }
.g-tf-res-t { font-size:12px; font-weight:700; margin-bottom:10px; color:var(--color-text-base,#1B3B30); }
.g-tf-res-t span { font-weight:400; font-size:10.5px; color:var(--color-text-mute,#8A8A8F); margin-left:6px; }
.g-tf-card { padding:9px 11px; margin-bottom:8px; border:1px solid rgba(200,175,150,.3); border-radius:10px; background:#FEFCF9; }
.g-tf-card.is-top { border-color:var(--color-point,#DF5C3F); background:var(--color-point-soft,#FBEEE9); }
.g-tf-card-h { display:flex; align-items:center; gap:8px; }
.g-tf-card-h b { font-family:var(--font-serif,'Noto Serif KR',serif); font-size:16px; }
.g-tf-range { font-size:11px; color:var(--color-text-mute,#8A8A8F); }
.g-tf-pick {
  margin-left:auto; padding:4px 10px; border:0; border-radius:99px;
  background:var(--color-point,#DF5C3F); color:#fff;
  font-family:'Noto Sans KR',sans-serif; font-size:11px; cursor:pointer;
}
.g-tf-bar { height:4px; margin:7px 0 6px; border-radius:99px; background:rgba(16,39,31,.08); overflow:hidden; }
.g-tf-bar i { display:block; height:100%; background:var(--color-point,#DF5C3F); }
.g-tf-traits { font-size:11px; line-height:1.6; color:var(--color-text-mute,#6E746C); }

/* 쌍둥이 비교 */
.g-tw-side { padding:10px 12px; margin-bottom:10px; border:1px solid rgba(200,175,150,.3); border-radius:10px; background:#FEFCF9; }
.g-tw-tag { font-size:10.5px; font-weight:700; letter-spacing:2px; color:var(--color-point,#DF5C3F); margin-bottom:6px; }
.g-tw-val { font-family:var(--font-serif,'Noto Serif KR',serif); font-size:15px; }
.g-tw-gd { font-size:11px; color:var(--color-text-mute,#8A8A8F); margin-top:2px; }
.g-tw-row { display:flex; gap:6px; }
.g-tw-go {
  width:100%; padding:12px; margin-top:4px; border:0; border-radius:10px;
  background:var(--color-point,#DF5C3F); color:#fff;
  font-family:'Noto Sans KR',sans-serif; font-size:14px; font-weight:700; letter-spacing:2px; cursor:pointer;
}
.g-tw-res { margin-top:16px; padding-top:14px; border-top:1px solid rgba(200,175,150,.3); }
.g-tw-case {
  display:inline-block; padding:4px 12px; border-radius:99px; margin-bottom:10px;
  font-size:12px; font-weight:700; letter-spacing:1px; color:#fff; background:#6E746C;
}
.g-tw-case.is-split  { background:#4E6B44; }
.g-tw-case.is-mirror { background:#33506B; }
.g-tw-case.is-same   { background:#A6801F; }
.g-tw-facts { margin:0 0 12px; display:grid; gap:4px; }
.g-tw-facts > div { display:flex; justify-content:space-between; gap:8px; font-size:11.5px; }
.g-tw-facts dt { margin:0; color:var(--color-text-mute,#8A8A8F); }
.g-tw-facts dd { margin:0; font-weight:600; color:var(--color-text-base,#1B3B30); }
.g-tw-say { margin:0 0 9px; font-size:12.5px; line-height:1.75; color:var(--color-text-base,#1B3B30); word-break:keep-all; }

/* 생년월일·시간 셀렉트 줄 (2026-08-22 — 12자리 한 칸 입력 대체) */
.g-bd-row { display:flex; gap:8px; margin-bottom:14px; }
.g-bd-sel {
  flex:1 1 0; min-width:0; padding:11px 10px;
  border:1px solid rgba(200,175,150,0.3); border-radius:10px; background:#FEFCF9;
  font-family:'Noto Sans KR',sans-serif; font-size:14px; color:#10271F;
  cursor:pointer; -webkit-appearance:none; appearance:none;
}
.g-bd-sel:focus { outline:none; border-color:var(--color-point,#DF5C3F); }

.g-saju-card__pin.is-on { color: var(--color-point, #DF5C3F); }
.g-saju-card__edit {
  flex: 0 0 auto; margin-right: 2px; padding: 2px 4px;
  border: 0; background: none; cursor: pointer; line-height: 1;
  font-size: 13px; color: var(--color-text-soft, #98A09A);
  transition: color 0.15s;
}
.g-saju-card__edit:hover { color: var(--color-point, #DF5C3F); }
.g-saju-card__me {
  margin-left: 6px; padding: 1px 5px;
  border: 1px solid var(--color-point, #DF5C3F);
  color: var(--color-point, #DF5C3F);
  font-size: 9px; font-weight: 700; letter-spacing: 0; vertical-align: middle;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
}
.g-saju-card--me { background: var(--color-point-soft, #FBEEE9); }

/* 입력 화면 우측 컬럼 — 오밀조밀하게 */
.g-input-saved .g-saju-card { padding: 7px 9px; }
.g-input-saved .g-saju-card__name { font-size: 12.5px; margin-bottom: 1px; }
.g-input-saved .g-saju-card__meta {
  font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-input-saved .g-saju-card__ilju { display: none; }   /* 일주 표시 생략 */
.g-input-saved .g-saju-card__edit { font-size: 11.5px; padding: 2px 2px; }
.g-input-saved .g-saju-card__pin { font-size: 12px; }
.g-input-saved .g-saju-card__del { font-size: 13px; }
.g-input-saved .g-saju-card__me { font-size: 8.5px; padding: 0 4px; }
.g-input-saved__list { max-height: 460px; }

/* ── 메뉴 카드 아이콘 = 한글 태그 칩 (2026-08-14, 이모지·한자 제거) ── */
.menu-card__icon, .taktak-app .menu-card__icon {
  display: inline-grid; place-items: center;
  min-width: 38px; height: 26px; padding: 0 7px;
  border: 1px solid var(--color-line, #D2D3CA);
  border-radius: 8px;
  background: var(--color-bg-soft, #F1ECDF);
  color: var(--color-text-base, #44564D);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 11.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1;
}

/* ── 앱 헤더 로고 마크 (2026-08-14) ── */
.taktak-brand { display: flex; align-items: center; gap: 7px; }
.taktak-brand__mark { flex: 0 0 auto; display: block; border-radius: 7px; }

/* ── 메뉴 카드 일러스트 (2026-08-14) — 왼쪽 비운 구도라 우측 정렬 ── */
.taktak-app .menu-card { position: relative; overflow: hidden; }
.menu-card__illust {
  position: absolute; inset: 0; z-index: 0;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: .9;
  pointer-events: none;
}
/* 글자 쪽으로 종이색을 깔아 가독성 확보 */
.menu-card__illust::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--color-bg-card, #FCFAF4) 0%,
    var(--color-bg-card, #FCFAF4) 34%,
    rgba(252,250,244,.72) 56%,
    rgba(252,250,244,.15) 82%,
    rgba(252,250,244,0) 100%);
}
.menu-card > *:not(.menu-card__illust) { position: relative; z-index: 1; }
.menu-card__title, .menu-card__sub { max-width: 68%; }

/* ── TODAY 배너·카테고리 칩바 폐지 (2026-08-14) ── */
.taktak-daily-brief, .cat-tabs, #g-cat-tabs { display: none !important; }

/* 메뉴 카드 태그 칩 폐지(2026-08-14) — 일러스트 가림 방지 */
.menu-card__icon, .taktak-app .menu-card__icon { display: none !important; }
/* 칩이 빠진 만큼 제목을 위로 */
.taktak-app .menu-card { min-height: 138px; }

/* ── 선택된 명식 헤더 축소 (2026-08-14) — 크게 차지하던 프로필을 한 줄로 ── */
.taktak-profile {
  min-height: 0 !important;
  padding: 8px 14px 9px !important;
  background: var(--color-bg, #F7F4EB) !important;
  border-bottom: 1px solid var(--color-line, #D2D3CA) !important;
}
.taktak-profile::before, .taktak-profile::after { display: none !important; }
.taktak-profile__content {
  padding-top: 2px !important;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.taktak-profile__eyebrow { display: none !important; }   /* '나의 사주 흐름' 생략 */
.taktak-profile__name {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.4px !important;
}
.taktak-profile__ilju {
  margin-top: 0 !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
  background: var(--color-bg-card, #FCFAF4) !important;
}
.taktak-back-button { padding: 2px 0 !important; font-size: 11.5px !important; }