:root {
      /* ── 브랜드 ── */
      --primary-brown: #8a5e2e;
      --primary-dark:  #6b4720;
      --primary-light: #c9965a;
      --accent-gold:   #d4a255;

      /* ── 배경/카드 ── */
      --bg-soft: #fdf8f2;
      --card-bg: #ffffff;
      --card-shadow: 0 2px 4px rgba(120,80,30,0.04),
                     0 8px 24px rgba(120,80,30,0.08),
                     0 24px 56px rgba(120,80,30,0.07);
      --card-border: rgba(196,160,110,0.22);

      /* ── 텍스트 ── */
      --text-main:  #3a2c1a;
      --text-muted: #8a7a68;
      --text-faint: #b8ab9c;

      /* ── UI 요소 ── */
      --light-brown: #f7f2eb;
      --border-brown: #c4a06e;
      --line-color:  #ede4d8;
      --soft-line:   #ecdfd0;
      --input-bg:    #faf6f1;

      /* ── 탭/버튼 ── */
      --tab-bg:     #f3ece3;
      --tab-border: #e2d0ba;
      --theme-btn-bg:     #f3ece3;
      --theme-btn-text:   #8a5e2e;
      --theme-btn-border: #ddd0bc;

      /* ── 공지 ── */
      --notice-bg:     #fff8f8;
      --notice-border: #fde8e8;
      --notice-text:   #8a6d6d;

      /* ── 계산기 화면 ── */
      --normal-screen-bg:     #faf5ee;
      --normal-screen-border: #e8d9c4;

      /* ── 계산기 키 ── */
      --key-bg:      #f5f0ea;
      --key-text:    #3a2c1a;
      --key-op-bg:   #ecdfd0;
      --key-op-text: #7a4e22;

      /* ── 상태 색상 ── */
      --success: #10b981;
      --danger:  #c82b2b;
    }

    body.dark-mode {
      /* ── 배경/카드 ── */
      --bg-soft:    #100d0a;
      --card-bg:    #1c1712;
      --card-shadow: 0 2px 4px rgba(0,0,0,0.3),
                     0 12px 32px rgba(0,0,0,0.38),
                     0 28px 64px rgba(0,0,0,0.26);
      --card-border: rgba(255,255,255,0.06);

      /* ── 텍스트 ── */
      --text-main:  #f0e5d6;
      --text-muted: #a89880;
      --text-faint: #6a5e52;

      /* ── UI 요소 ── */
      --light-brown:  #241e18;
      --border-brown: #8a6840;
      --line-color:   rgba(255,255,255,0.07);
      --soft-line:    rgba(255,255,255,0.07);
      --input-bg:     #231d17;

      /* ── 탭/버튼 ── */
      --tab-bg:     #241e18;
      --tab-border: #3e3028;
      --theme-btn-bg:     #241e18;
      --theme-btn-text:   #e8d4b8;
      --theme-btn-border: #3e3028;

      /* ── 공지 ── */
      --notice-bg:     #261b1b;
      --notice-border: #4a2828;
      --notice-text:   #c8a8a8;

      /* ── 계산기 화면 ── */
      --normal-screen-bg:     #221a14;
      --normal-screen-border: #3e3026;

      /* ── 계산기 키 ── */
      --key-bg:      #272018;
      --key-text:    #f0e5d6;
      --key-op-bg:   #32281e;
      --key-op-text: #e8c898;

      /* ── 상태 색상 ── */
      --primary-light: #d4a86a;
      --accent-gold:   #c89040;
    }

    * {
      box-sizing: border-box;
      font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
                   'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    }

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

    body {
      margin: 0;
      min-height: 100dvh;
      background-color: var(--bg-soft);
      background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(196,152,80,0.09) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(160,110,50,0.06) 0%, transparent 60%);
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding:
        max(10px, env(safe-area-inset-top))
        max(10px, env(safe-area-inset-right))
        max(14px, env(safe-area-inset-bottom))
        max(10px, env(safe-area-inset-left));
      color: var(--text-main);
      transition: background-color 0.3s ease, color 0.3s ease;
      overscroll-behavior-y: contain;
    }

    .calc-card {
      width: min(100%, 680px);
      background: var(--card-bg);
      border-radius: min(26px, 6vw);
      border: 1px solid var(--card-border);
      padding: clamp(14px, 4vw, 20px);
      box-shadow: var(--card-shadow);
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    /* 카드 상단 골드 그라디언트 액센트 바 (모서리 곡률 맞춤) */
    .calc-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      border-top-left-radius: min(26px, 6vw);
      border-top-right-radius: min(26px, 6vw);
      background: linear-gradient(90deg,
        rgba(196,152,80,0.0) 0%,
        rgba(212,162,85,0.85) 30%,
        rgba(196,140,60,0.95) 55%,
        rgba(212,162,85,0.85) 70%,
        rgba(196,152,80,0.0) 100%);
      z-index: 1;
      pointer-events: none;
    }

    .header-row {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 2px;
    }

    .header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .title {
      font-size: clamp(17px, 5vw, 21px);
      font-weight: 900;
      color: var(--primary-brown);
      letter-spacing: -1px;
      margin: 0;
      line-height: 1.2;
    }

    .theme-toggle-btn,
    .tab-btn,
    .site-btn,
    .swap-btn,
    .calc-key {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .theme-toggle-btn {
      min-height: 26px;
      padding: 4px 11px;
      border: 1px solid var(--theme-btn-border);
      background: var(--theme-btn-bg);
      color: var(--theme-btn-text);
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      line-height: 1.1;
      letter-spacing: -0.2px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(120,80,30,0.06), 0 2px 8px rgba(120,80,30,0.04);
    }

    .theme-toggle-btn:hover {
      box-shadow: 0 2px 8px rgba(120,80,30,0.12);
      transform: translateY(-1px);
    }

    .toggle-tabs {
      position: relative;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
      padding: 3px;
      border-radius: 15px;
      background: rgba(141, 103, 58, 0.08);
      border: 1px solid rgba(176, 141, 106, 0.18);
      overflow: hidden;
      isolation: isolate;
    }

    .toggle-tabs::before {
      display: none;
    }

    /* normal: position 0 (default) */
    .toggle-tabs[data-active="ksta"]::before {
      transform: translateX(calc(100% + 3px));
    }

    .toggle-tabs[data-active="multi"]::before {
      transform: translateX(calc(200% + 6px));
    }

    .toggle-tabs[data-active="portfolio"]::before {
      transform: translateX(calc(300% + 9px));
    }

    .toggle-tabs[data-active="pnl"]::before {
      transform: translateX(calc(400% + 12px));
    }

    .toggle-tabs[data-active="target"]::before {
      transform: translateX(calc(500% + 15px));
    }

    .toggle-tabs[data-active="avg"]::before {
      transform: translateX(calc(600% + 18px));
    }

    .tab-btn {
      position: relative;
      z-index: 1;
      min-height: 32px;
      padding: 8px 4px;
      background: transparent;
      color: var(--primary-brown);
      border: 1px solid transparent;
      border-radius: 12px;
      font-size: 10.5px;
      font-weight: 800;
      cursor: pointer;
      transition: color 0.24s ease, transform 0.24s ease, filter 0.24s ease;
      white-space: nowrap;
      letter-spacing: -0.3px;
    }

    .tab-btn.active {
      background: linear-gradient(135deg, var(--primary-brown) 0%, var(--primary-light) 100%);
      color: white;
      border-color: transparent;
      box-shadow: 0 4px 14px rgba(138,94,46,0.30), 0 1px 3px rgba(138,94,46,0.18);
      border-radius: 12px;
    }

    .tab-btn.tab-switch-pop {
      animation: tab-switch-pop 0.34s cubic-bezier(.22, 1, .36, 1);
    }

    .panel-stage {
      position: relative;
      overflow: hidden;
      transition: height 0.28s ease;
      min-height: 100px;
    }

    .calc-panel {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(0);
      transition:
        transform 0.28s cubic-bezier(.22, 1, .36, 1),
        opacity 0.28s ease,
        visibility 0.28s ease;
    }

    .calc-panel.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(0);
    }

    .ksta-panel .rate-box {
      margin-top: 8px;
    }

    .ksta-footer-stack {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 4px;
    }

    .calc-panel.enter-from-right {
      opacity: 0;
      visibility: visible;
      transform: translateX(42px);
    }

    .calc-panel.enter-from-left {
      opacity: 0;
      visibility: visible;
      transform: translateX(-42px);
    }

    .calc-panel.exit-to-left {
      opacity: 0;
      visibility: visible;
      transform: translateX(-42px);
    }

    .calc-panel.exit-to-right {
      opacity: 0;
      visibility: visible;
      transform: translateX(42px);
    }

    .rate-box {
      border: 1.5px solid rgba(196,160,110,0.36);
      background: linear-gradient(160deg,
        rgba(196,152,80,0.06) 0%,
        rgba(255,255,255,0.85) 100%);
      border-radius: 16px;
      padding: 10px 11px;
      position: relative;
      transition: all 0.25s ease;
      box-shadow: 0 2px 10px rgba(138,94,46,0.05);
    }

    body.dark-mode .rate-box {
      background: linear-gradient(160deg,
        rgba(196,152,80,0.07) 0%,
        rgba(255,255,255,0.02) 100%);
      border-color: rgba(196,152,80,0.18);
    }

    .rate-box.error {
      border-color: rgba(200, 43, 43, 0.40);
      background: linear-gradient(160deg, rgba(200,43,43,0.05) 0%, rgba(255,244,244,0.9) 100%);
    }

    body.dark-mode .rate-box.error {
      background: linear-gradient(160deg, rgba(200,43,43,0.12) 0%, rgba(200,43,43,0.04) 100%);
    }

    .rate-box.warning {
      border-color: rgba(210,160,0,0.42);
      background: linear-gradient(160deg, rgba(255,235,150,0.18) 0%, rgba(255,255,255,0.92) 100%);
      box-shadow: 0 2px 12px rgba(210,160,0,0.10);
    }

    body.dark-mode .rate-box.warning {
      background: linear-gradient(160deg, rgba(210,160,0,0.14) 0%, rgba(210,160,0,0.04) 100%);
      border-color: rgba(220,180,60,0.28);
    }

    .rate-caption {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      font-size: 11px;
      font-weight: 800;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .rate-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
      flex-wrap: nowrap;
    }

    .rate-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 24px;
      font-size: 10px;
      font-weight: 800;
      color: var(--text-muted);
      background: rgba(255,255,255,0.55);
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(176, 141, 106, 0.2);
      white-space: nowrap;
      flex: 0 0 auto;
    }

    body.dark-mode .rate-status {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.08);
    }

    .rate-status.loading {
      color: var(--primary-brown);
    }

    .rate-status.success {
      color: var(--success);
    }

    .rate-status.error {
      color: var(--danger);
      background: rgba(211, 47, 47, 0.1);
      border-color: rgba(211, 47, 47, 0.24);
    }

    .rate-status.warning {
      color: #9a6700;
      background: rgba(255, 193, 7, 0.14);
      border-color: rgba(255, 193, 7, 0.34);
      box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.05), 0 6px 14px rgba(255, 193, 7, 0.12);
    }

    body.dark-mode .rate-status.warning {
      color: #ffd666;
      background: rgba(255, 193, 7, 0.18);
      border-color: rgba(255, 214, 102, 0.24);
      box-shadow: 0 8px 18px rgba(255, 193, 7, 0.14);
    }

    .rate-status.manual {
      color: #4f1fd6;
      background: rgba(109, 61, 242, 0.2);
      border-color: rgba(79, 31, 214, 0.34);
      box-shadow: 0 0 0 1px rgba(79, 31, 214, 0.08), 0 8px 18px rgba(79, 31, 214, 0.18);
    }

    body.dark-mode .rate-status.manual {
      color: #e0d2ff;
      background: rgba(109, 61, 242, 0.28);
      border-color: rgba(224, 210, 255, 0.3);
      box-shadow: 0 10px 22px rgba(109, 61, 242, 0.24);
    }

    .loading-spinner {
      width: 11px;
      height: 11px;
      border: 2px solid rgba(141, 103, 58, 0.18);
      border-top-color: var(--primary-brown);
      border-radius: 50%;
      display: none;
      flex: 0 0 auto;
    }

    .loading-spinner.active {
      display: inline-block;
      animation: spin 0.8s linear infinite;
    }

    .rate-updated-at {
      grid-area: updated;
      margin-top: 0;
      padding-left: 8px;
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      text-align: right;
      white-space: nowrap;
      justify-self: end;
      align-self: center;
    }

    @media (max-width: 420px) {
      .price-inline {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
      }

      .rate-updated-at {
        font-size: 9px;
      }
    }

    .status-dot {
      width: 7px;
      height: 7px;
      background: var(--success);
      border-radius: 50%;
      display: inline-block;
      animation: pulse-dot 2s infinite;
      flex: 0 0 auto;
    }

    .status-dot.error {
      background: var(--danger);
      animation: none;
      box-shadow: none;
    }

    .status-dot.warning {
      background: #f4b400;
      animation: none;
      box-shadow: 0 0 0 4px rgba(244, 180, 0, 0.12);
    }

    .live-price-display {
      background: var(--card-bg);
      border-radius: 12px;
      padding: 9px 10px;
      border: 1px solid var(--soft-line);
      position: relative;
      transition: background-color 0.25s ease, border-color 0.25s ease;
      box-shadow: 0 1px 4px rgba(120,80,30,0.04);
    }

    .rate-line {
      display: block;
    }

    .price-inline {
      min-width: 0;
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "usd updated"
        "krw updated"
        "drift updated";
      column-gap: 12px;
      row-gap: 2px;
      align-items: center;
    }

    .updating-glow {
      animation: glow-fade 0.7s ease-out;
    }

    .live-price-usd {
      grid-area: usd;
      font-size: clamp(15px, 4.2vw, 17px);
      font-weight: 900;
      color: var(--primary-brown);
      margin-bottom: 0;
      word-break: break-word;
      letter-spacing: -0.5px;
    }

    .live-price-krw {
      grid-area: krw;
      font-size: 10.5px;
      color: var(--text-muted);
      font-weight: 600;
      word-break: break-word;
    }

    .asset-drift-note {
      grid-area: drift;
      margin-top: 2px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      line-height: 1.3;
      font-weight: 800;
      color: var(--text-muted);
      flex-wrap: wrap;
    }

    .asset-drift-note.up {
      color: var(--success);
    }

    .asset-drift-note.down {
      color: var(--danger);
    }

    .asset-drift-note.neutral {
      color: var(--text-muted);
    }

    .rate-fail-banner {
      margin-top: 6px;
      padding: 5px 7px;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 700;
      color: var(--danger);
      background: rgba(211, 47, 47, 0.08);
      border: 1px solid rgba(211, 47, 47, 0.18);
      line-height: 1.35;
    }

    .manual-ksta-box {
      --manual-accent-strong: var(--primary-brown);
      --manual-accent-border: rgba(176, 141, 106, 0.34);
      --manual-accent-soft: rgba(176, 141, 106, 0.08);
      --manual-accent-glow: rgba(176, 141, 106, 0.16);
      margin-top: 8px;
      padding: 10px;
      border: 1.5px solid var(--manual-accent-border);
      background: linear-gradient(180deg, var(--manual-accent-soft), rgba(255,255,255,0.3));
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
      box-shadow: 0 8px 20px rgba(74, 58, 42, 0.06), 0 0 0 1px rgba(255,255,255,0.24) inset;
    }

    .manual-ksta-box::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--manual-accent-soft), transparent 62%);
      pointer-events: none;
      opacity: 0.95;
    }

    .manual-ksta-box::after {
      content: "";
      position: absolute;
      top: -30%;
      left: -42%;
      width: 46%;
      height: 170%;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 18%, rgba(255,255,255,0.52) 50%, rgba(255,255,255,0.05) 82%, transparent 100%);
      transform: rotate(18deg) translateX(-180%);
      pointer-events: none;
      opacity: 0;
      filter: blur(1px);
    }

    .manual-ksta-box > * {
      position: relative;
      z-index: 1;
    }

    .manual-ksta-box.coin-accent-flash {
      animation: manual-coin-accent-flash 0.92s cubic-bezier(.22,.61,.36,1);
    }

    .manual-ksta-box.coin-accent-flash::after {
      opacity: 1;
      animation: manual-coin-shimmer 1.02s cubic-bezier(.22,.61,.36,1);
    }

    .manual-ksta-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
      font-weight: 800;
      color: var(--manual-accent-strong);
    }

    .manual-ksta-head-main {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }

    #manualKstaTitle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: -0.02em;
      color: var(--manual-accent-strong);
      text-shadow: 0 1px 0 rgba(255,255,255,0.36);
    }

    .manual-coin-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1.5px solid var(--manual-accent-border);
      background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.66));
      color: var(--manual-accent-strong);
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      box-shadow: 0 6px 16px var(--manual-accent-glow);
      white-space: nowrap;
    }

    .manual-coin-badge-icon {
      font-size: 12px;
      line-height: 1;
    }

    .manual-ksta-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .manual-ksta-select,
    .manual-ksta-input {
      min-height: 34px;
      border: 1.5px solid var(--manual-accent-border);
      background: var(--input-bg);
      color: var(--text-main);
      border-radius: 11px;
      padding: 7px 10px;
      font-size: 13px;
      font-weight: 800;
      outline: none;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease;
      box-shadow: 0 3px 12px rgba(74, 58, 42, 0.05);
    }

    .manual-ksta-select:focus,
    .manual-ksta-input:focus,
    #unit1.current-coin-accent:focus {
      box-shadow: 0 0 0 3px var(--manual-accent-glow);
      border-color: var(--manual-accent-strong);
    }

    .manual-ksta-select {
      flex: 0 0 94px;
      min-width: 94px;
      appearance: none;
      -webkit-appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, var(--manual-accent-strong) 50%), linear-gradient(135deg, var(--manual-accent-strong) 50%, transparent 50%);
      background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px);
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      padding-right: 28px;
      color: var(--manual-accent-strong);
    }

    .manual-ksta-input {
      flex: 1;
      min-width: 0;
    }

    .manual-ksta-btn {
      min-height: 34px;
      padding: 0 11px;
      border: 1.5px solid var(--manual-accent-border);
      background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.68));
      color: var(--manual-accent-strong);
      border-radius: 11px;
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
      transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }

    .manual-ksta-btn:hover {
      box-shadow: 0 6px 14px var(--manual-accent-glow);
      transform: translateY(-1px);
    }

    .manual-ksta-hint {
      font-size: 10px;
      line-height: 1.45;
      color: var(--manual-accent-strong);
      opacity: 0.86;
    }

    #unit1.current-coin-accent {
      border: 1.5px solid var(--manual-accent-border);
      color: var(--manual-accent-strong);
      box-shadow: 0 4px 14px rgba(74, 58, 42, 0.06);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background-color 0.25s ease;
    }

    body.dark-mode .manual-ksta-box {
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255,255,255,0.03) inset;
    }

    body.dark-mode .manual-ksta-btn,
    body.dark-mode .manual-coin-badge {
      background: linear-gradient(180deg, rgba(28, 29, 35, 0.9), rgba(34, 35, 41, 0.72));
    }

    body.dark-mode #manualKstaTitle {
      text-shadow: none;
    }

    body.dark-mode .manual-ksta-hint {
      opacity: 0.92;
    }

    .pretty-confirm-overlay {
      position: fixed;
      inset: 0;
      z-index: 1200;
      background: rgba(16, 16, 18, 0.52);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: flex;
      justify-content: center;
    }

    .pretty-confirm-overlay[hidden] {
      display: none !important;
    }

    .pretty-confirm-overlay {
      align-items: center;
      padding: 18px;
      z-index: 1300;
    }

    .pretty-confirm-panel {
      width: min(100%, 360px);
      background: rgba(255,255,255,0.97);
      border: 1px solid rgba(109, 61, 242, 0.18);
      border-radius: 22px;
      box-shadow: 0 24px 56px rgba(0,0,0,0.2);
      padding: 18px 16px 14px;
      color: var(--text-main);
      position: relative;
    }

    body.dark-mode .pretty-confirm-panel {
      background: rgba(34, 34, 38, 0.97);
      border-color: rgba(200, 180, 255, 0.2);
      box-shadow: 0 28px 64px rgba(0,0,0,0.34);
    }

    .pretty-confirm-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      color: #4f1fd6;
      background: rgba(109, 61, 242, 0.12);
      border: 1px solid rgba(79, 31, 214, 0.18);
      box-shadow: 0 8px 18px rgba(79, 31, 214, 0.08);
    }

    body.dark-mode .pretty-confirm-badge {
      color: #e0d2ff;
      background: rgba(109, 61, 242, 0.22);
      border-color: rgba(224, 210, 255, 0.22);
    }

    .pretty-confirm-title {
      margin-top: 12px;
      font-size: 18px;
      line-height: 1.28;
      font-weight: 900;
      letter-spacing: -0.02em;
    }

    .pretty-confirm-desc {
      margin-top: 8px;
      font-size: 13px;
      line-height: 1.5;
      font-weight: 800;
      color: var(--text-main);
    }

    .pretty-confirm-note {
      margin-top: 8px;
      padding: 9px 10px;
      border-radius: 12px;
      background: rgba(141, 103, 58, 0.07);
      border: 1px solid rgba(176, 141, 106, 0.14);
      font-size: 11px;
      line-height: 1.5;
      font-weight: 700;
      color: var(--text-muted);
    }

    body.dark-mode .pretty-confirm-note {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.08);
    }

    .pretty-confirm-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 14px;
    }

    .pretty-confirm-btn {
      min-height: 40px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      border: 1px solid var(--tab-border);
      background: var(--tab-bg);
      color: var(--primary-brown);
    }

    .pretty-confirm-btn.primary {
      color: #fff;
      border-color: rgba(79, 31, 214, 0.3);
      background: linear-gradient(135deg, #6d3df2, #4f1fd6);
      box-shadow: 0 10px 20px rgba(79, 31, 214, 0.22);
    }

    .input-row {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--input-bg);
      border: 1.5px solid var(--line-color);
      border-radius: 14px;
      padding: 6px 8px 6px 14px;
      margin: 8px 0;
      min-width: 0;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .input-row:focus-within {
      border-color: var(--border-brown);
      background: var(--card-bg);
      box-shadow: 0 0 0 4px rgba(196, 160, 110, 0.18);
    }

    /* 빈 상태에서 입력 위치를 부드럽게 안내하는 펄스 */
    .input-row:has(input:placeholder-shown):not(:focus-within) {
      animation: inputAttract 2.4s ease-in-out infinite;
    }

    @keyframes inputAttract {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(196, 160, 110, 0);
        border-color: var(--line-color);
      }
      50% {
        box-shadow: 0 0 0 6px rgba(196, 160, 110, 0.16);
        border-color: var(--border-brown);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .input-row { animation: none !important; }
    }

    .input-row input {
      flex: 1;
      min-width: 0;
      border: none;
      font-size: clamp(20px, 6.5vw, 26px);
      font-weight: 800;
      outline: none;
      background: transparent;
      color: var(--text-main);
      padding: 10px 0;
      line-height: 1.2;
      letter-spacing: -0.5px;
    }

    .input-row input::placeholder {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted, #9b8a76);
      letter-spacing: 0;
      opacity: 0.85;
    }

    .input-row select {
      flex: 0 0 auto;
      max-width: 42%;
      min-height: 40px;
      border: none;
      background: var(--input-bg);
      color: var(--text-main);
      padding: 6px 9px;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
    }

    .picker-field {
      position: relative;
      flex: 0 0 auto;
      max-width: 42%;
      min-width: 118px;
    }

    .manual-picker-field {
      flex: 0 0 112px;
      min-width: 112px;
      max-width: 112px;
    }

    .picker-native-select {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      width: 1px;
      height: 1px;
      left: 0;
      top: 0;
    }

    .picker-trigger {
      width: 100%;
      min-height: 42px;
      border: 1.5px solid var(--soft-line);
      background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,246,240,0.90) 100%);
      color: var(--text-main);
      padding: 6px 10px;
      border-radius: 13px;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(120,80,30,0.06), 0 1px 2px rgba(120,80,30,0.04);
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .picker-trigger:hover {
      border-color: var(--border-brown);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(120,80,30,0.10);
    }

    body.dark-mode .picker-trigger {
      background: linear-gradient(180deg, rgba(38,32,24,0.98) 0%, rgba(30,25,18,0.90) 100%);
      border-color: rgba(255,255,255,0.08);
    }

    .picker-trigger-main,
    .picker-option-main {
      min-width: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .picker-trigger-icon,
    .picker-option-icon {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(141, 103, 58, 0.10);
      color: var(--primary-brown);
      font-size: 13px;
      font-weight: 900;
      flex: 0 0 22px;
      box-shadow: 0 2px 8px rgba(74, 58, 42, 0.08) inset;
    }

    .picker-trigger-texts,
    .picker-option-texts {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1px;
    }

    .picker-trigger-label,
    .picker-option-label {
      font-size: 14px;
      font-weight: 900;
      color: inherit;
      line-height: 1.15;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    .picker-trigger-sub,
    .picker-option-sub {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      line-height: 1.15;
      white-space: nowrap;
    }

    .picker-trigger-chevron {
      flex: 0 0 auto;
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 900;
    }

    .picker-overlay {
      position: fixed;
      inset: 0;
      z-index: 1300;
      background: rgba(14, 14, 18, 0.38);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 16px;
    }

    .picker-overlay[hidden] {
      display: none !important;
    }

    .picker-sheet {
      width: min(100%, 680px);
      max-height: min(80vh, 640px);
      background: rgba(255,255,255,0.99);
      border-radius: 28px 28px 20px 20px;
      border: 1px solid rgba(196,160,110,0.22);
      box-shadow: 0 -4px 24px rgba(0,0,0,0.06), 0 24px 56px rgba(0,0,0,0.16);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .picker-sheet-head {
      padding: 14px 16px 12px;
      border-bottom: 1px solid rgba(196,160,110,0.12);
      background: linear-gradient(180deg, rgba(196,152,80,0.07) 0%, rgba(255,255,255,0.60) 100%);
    }

    .picker-sheet-grab {
      width: 38px;
      height: 4px;
      border-radius: 999px;
      background: rgba(138,94,46,0.18);
      margin: 0 auto 12px;
    }

    .picker-sheet-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .picker-sheet-title {
      font-size: 18px;
      font-weight: 900;
      color: var(--text-main);
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .picker-sheet-desc {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.45;
      color: var(--text-muted);
    }

    .picker-sheet-close {
      min-width: 34px;
      min-height: 34px;
      border: 1px solid rgba(196,160,110,0.20);
      border-radius: 50%;
      background: rgba(255,255,255,0.90);
      color: var(--primary-brown);
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.18s ease, transform 0.18s ease;
    }

    .picker-sheet-close:hover {
      background: rgba(240,232,220,0.96);
      transform: scale(1.06);
    }

    .picker-options {
      overflow-y: auto;
      padding: 8px 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .picker-section-title {
      padding: 6px 6px 2px;
      font-size: 11px;
      font-weight: 800;
      color: var(--primary-brown);
      letter-spacing: -0.01em;
      opacity: 0.8;
    }

    .picker-section-body {
      border: 1px solid rgba(196,160,110,0.14);
      border-radius: 18px;
      overflow: hidden;
      background: rgba(255,255,255,0.94);
      box-shadow: 0 4px 16px rgba(120,80,30,0.04);
    }

    .picker-option {
      width: 100%;
      border: none;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 13px 14px;
      cursor: pointer;
      text-align: left;
      transition: background-color 0.15s ease;
    }

    .picker-option + .picker-option {
      border-top: 1px solid rgba(196,160,110,0.10);
    }

    .picker-option:hover {
      background: rgba(196,152,80,0.05);
    }

    .picker-option.selected {
      background: linear-gradient(180deg, rgba(196,152,80,0.10) 0%, rgba(196,152,80,0.04) 100%);
    }

    .picker-option-check {
      flex: 0 0 auto;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1.5px solid rgba(138,94,46,0.28);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: transparent;
      font-size: 11px;
      background: rgba(255,255,255,0.88);
    }

    .picker-option.selected .picker-option-check {
      color: #fff;
      border-color: var(--primary-brown);
      background: linear-gradient(135deg, var(--primary-light), var(--primary-brown));
      box-shadow: 0 4px 10px rgba(138,94,46,0.24);
    }

    body.dark-mode .picker-trigger,
    body.dark-mode .picker-sheet,
    body.dark-mode .picker-section-body {
      background: rgba(26,22,16,0.97);
      border-color: rgba(255,255,255,0.07);
      color: #f0e5d6;
    }

    body.dark-mode .picker-sheet-close {
      background: rgba(38,32,24,0.92);
      border-color: rgba(255,255,255,0.10);
      color: #e8d4b8;
    }

    body.dark-mode .picker-sheet-head {
      background: linear-gradient(180deg, rgba(196,152,80,0.12), rgba(26,22,16,0.96));
      border-color: rgba(255,255,255,0.07);
    }

    body.dark-mode .picker-trigger-sub,
    body.dark-mode .picker-option-sub,
    body.dark-mode .picker-sheet-desc,
    body.dark-mode .picker-trigger-chevron {
      color: rgba(240,224,200,0.60);
    }

    .swap-container {
      display: flex;
      justify-content: center;
      margin: -2px 0;
    }

    /* ── 스왑 버튼 애니메이션 ── */
    @keyframes swapPulse {
      0%   { box-shadow: 0 0 0 0 rgba(201,150,90,.6); }
      60%  { box-shadow: 0 0 0 10px rgba(201,150,90,0); }
      100% { box-shadow: 0 0 0 0 rgba(201,150,90,0); }
    }
    @keyframes swapSpin {
      0%   { transform: rotate(0deg) scale(1); }
      40%  { transform: rotate(200deg) scale(1.18); }
      70%  { transform: rotate(160deg) scale(1.1); }
      100% { transform: rotate(180deg) scale(1); }
    }
    @keyframes swapIdleBob {
      0%, 100% { transform: translateY(0) scale(1); }
      50%       { transform: translateY(-3px) scale(1.05); }
    }

    .swap-btn {
      width: 48px;
      height: 48px;
      min-height: 48px;
      min-width: 48px;
      font-size: 20px;
      cursor: pointer;
      color: #fff;
      background: linear-gradient(145deg, var(--primary-light) 0%, var(--primary-brown) 60%, var(--primary-dark) 100%);
      border: none;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(138,94,46,0.40), 0 2px 4px rgba(138,94,46,0.20);
      transition: box-shadow 0.2s ease;
      animation: swapPulse 2.4s ease-out infinite, swapIdleBob 3s ease-in-out infinite;
      -webkit-tap-highlight-color: transparent;
      position: relative;
    }

    .swap-btn::after {
      content: "";
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      border: 2px solid rgba(201,150,90,.35);
      animation: swapPulse 2.4s ease-out infinite;
    }

    .swap-btn:hover {
      box-shadow: 0 8px 24px rgba(138,94,46,0.50);
      animation: none;
      transform: scale(1.12);
    }

    .swap-btn.spinning {
      animation: swapSpin 0.45s cubic-bezier(.22,1,.36,1) forwards !important;
    }

    .notice-box {
      background: var(--notice-bg);
      border-radius: 12px;
      padding: 12px;
      text-align: left;
      font-size: 11px;
      line-height: 1.55;
      color: var(--notice-text);
      border: 1px solid var(--notice-border);
      transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }

    .notice-box b {
      color: var(--danger);
      display: block;
      margin-bottom: 2px;
    }

    .privacy-link-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px 0 2px;
      flex-wrap: wrap;
    }

    .privacy-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      text-decoration: none;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--tab-border);
      background: var(--tab-bg);
      transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    }

    .privacy-link:hover {
      color: var(--primary-brown);
      border-color: rgba(196,160,110,0.45);
    }

    .normal-notice {
      background: var(--card-bg);
      border-color: var(--soft-line);
      color: var(--text-muted);
    }

    .normal-notice b {
      color: var(--primary-brown);
    }

    .normal-screen {
      background: var(--normal-screen-bg);
      border: 1.5px solid var(--normal-screen-border);
      border-radius: 18px;
      padding: 12px 14px;
      min-height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      transition: background-color 0.25s ease, border-color 0.25s ease;
      box-shadow: inset 0 2px 8px rgba(120,80,30,0.04);
    }

    .normal-history {
      min-height: 18px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      text-align: right;
      word-break: break-all;
      letter-spacing: 0;
    }

    .normal-display {
      width: 100%;
      border: none;
      background: transparent;
      outline: none;
      text-align: right;
      font-size: clamp(24px, 7vw, 30px);
      font-weight: 900;
      color: var(--text-main);
      letter-spacing: -1px;
    }

    .calc-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .calc-key {
      min-height: 44px;
      border: none;
      border-radius: 14px;
      padding: 10px 0;
      font-size: clamp(16px, 4.2vw, 18px);
      font-weight: 700;
      cursor: pointer;
      background: var(--key-bg);
      color: var(--key-text);
      box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 -2px 0 rgba(0,0,0,0.06) inset,
        0 3px 8px rgba(0,0,0,0.05);
      transition:
        background-color 0.14s ease,
        color 0.14s ease,
        transform 0.06s ease,
        box-shadow 0.06s ease,
        filter 0.06s ease;
      will-change: transform;
      letter-spacing: -0.3px;
    }

    .calc-key.operator {
      background: var(--key-op-bg);
      color: var(--key-op-text);
      font-weight: 800;
    }

    .calc-key.equal {
      background: linear-gradient(145deg, var(--primary-light) 0%, var(--primary-brown) 50%, var(--primary-dark) 100%);
      color: white;
      font-weight: 900;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.2) inset,
        0 -2px 0 rgba(0,0,0,0.14) inset,
        0 6px 18px rgba(138,94,46,0.30),
        0 2px 6px rgba(138,94,46,0.18);
    }

    .full-equal {
      grid-column: span 4;
    }

    .calc-key:hover {
      filter: brightness(1.02);
    }

    .calc-key:active,
    .calc-key.key-press,
    .theme-toggle-btn:active,
    .tab-btn:active,
    .site-btn:active,
    .swap-btn:active {
      transform: scale(0.94);
      box-shadow:
        inset 0 3px 8px rgba(0,0,0,0.12),
        0 1px 2px rgba(0,0,0,0.06);
      filter: brightness(0.97);
    }

    .bottom-actions {
      position: fixed;
      right: max(10px, env(safe-area-inset-right));
      bottom: calc(max(10px, env(safe-area-inset-bottom)) + 2px);
      margin-top: 0;
      display: flex;
      justify-content: flex-end;
      z-index: 80;
      pointer-events: none;
      background: transparent;
      transition: opacity 0.22s ease, transform 0.22s ease;
    }

    .bottom-actions .site-btn {
      pointer-events: auto;
    }

    body.keyboard-open .bottom-actions {
      opacity: 0;
      transform: translateY(14px);
      pointer-events: none;
      background: transparent;
    }

    body.keyboard-open {
      padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    body.keyboard-open .calc-card {
      padding-bottom: 12px;
    }

    .site-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: auto;
      min-width: 64px;
      min-height: 30px;
      padding: 6px 14px;
      background: rgba(255,255,255,0.94);
      color: var(--primary-brown);
      text-decoration: none;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      border: 1px solid rgba(196,160,110,0.38);
      text-align: center;
      line-height: 1;
      letter-spacing: -0.2px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow:
        0 2px 8px rgba(120,80,30,0.08),
        0 8px 20px rgba(120,80,30,0.10);
      transition: all 0.22s ease;
    }

    .site-btn:hover {
      background: rgba(255,255,255,0.98);
      box-shadow: 0 4px 14px rgba(120,80,30,0.16), 0 12px 28px rgba(120,80,30,0.12);
      transform: translateY(-1px);
    }

    body.dark-mode .site-btn {
      background: rgba(30,24,18,0.92);
      color: #e8d4b8;
      border-color: rgba(255,255,255,0.12);
      box-shadow: 0 4px 16px rgba(0,0,0,0.32), 0 10px 28px rgba(0,0,0,0.22);
    }

    body.ios-safari {
      padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    body.ios-safari.keyboard-open {
      padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    body.ios-safari .bottom-actions {
      right: max(8px, env(safe-area-inset-right));
      bottom: calc(max(8px, env(safe-area-inset-bottom)) + 4px);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .mini-toggle-btn {
      min-width: 84px;
      padding-inline: 8px;
      font-size: 11px;
    }

    .help-icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border: 1px solid var(--theme-btn-border);
      background: var(--theme-btn-bg);
      border-radius: 50%;
      font-size: 13px;
      text-decoration: none;
      cursor: pointer;
      flex: 0 0 26px;
      transition: all 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .help-icon-btn:hover {
      box-shadow: 0 2px 8px rgba(120,80,30,0.12);
      transform: translateY(-1px);
    }

    .notice-box.collapsible {
      padding: 0;
      overflow: hidden;
    }

    .notice-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      padding: 6px 9px;
      min-height: 30px;
    }

    .notice-title-wrap {
      min-width: 0;
      flex: 1;
      display: flex;
      align-items: center;
      gap: 6px;
      overflow: hidden;
    }

    .notice-head b {
      display: inline;
      margin-bottom: 0;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .notice-summary {
      margin-top: 0;
      font-size: 9px;
      color: var(--notice-text);
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1 1 auto;
    }

    .notice-toggle {
      min-height: 18px;
      min-width: 18px;
      border: 1px solid var(--notice-border);
      background: rgba(255,255,255,0.55);
      color: var(--primary-brown);
      border-radius: 6px;
      padding: 0;
      font-size: 10px;
      font-weight: 900;
      cursor: pointer;
      flex: 0 0 18px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    body.dark-mode .notice-toggle {
      background: rgba(255,255,255,0.06);
    }

    .notice-body {
      border-top: 1px solid var(--notice-border);
      padding: 0 10px 9px;
      font-size: 10px;
      line-height: 1.5;
    }

    .notice-box.collapsed .notice-body {
      display: none;
    }

    @media (max-width: 390px) {
      .header-actions {
        gap: 6px;
      }

      .mini-toggle-btn {
        min-width: 82px;
        font-size: 11px;
      }


      .notice-head {
        padding: 6px 8px;
      }
    }

    @keyframes tab-switch-pop {
      0% { transform: scale(0.94); }
      55% { transform: scale(1.04); }
      100% { transform: scale(1); }
    }

    @keyframes pulse-dot {
      0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
      70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
      100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }

    @keyframes glow-fade {
      0%   { box-shadow: 0 0 0px rgba(196,152,80,0); }
      30%  { box-shadow: 0 0 12px rgba(196,152,80,0.30), 0 0 0 1px rgba(196,152,80,0.14); }
      100% { box-shadow: 0 0 0px rgba(196,152,80,0); }
    }

    @keyframes manual-coin-accent-flash {
      0% {
        transform: scale(1);
        box-shadow: 0 8px 20px rgba(74, 58, 42, 0.06), 0 0 0 0 var(--manual-accent-glow);
        filter: brightness(1);
      }
      32% {
        transform: scale(1.014);
        box-shadow: 0 16px 34px rgba(74, 58, 42, 0.12), 0 0 0 6px var(--manual-accent-glow);
        filter: brightness(1.025);
      }
      68% {
        transform: scale(1.005);
        box-shadow: 0 12px 26px rgba(74, 58, 42, 0.10), 0 0 0 2px var(--manual-accent-glow);
        filter: brightness(1.012);
      }
      100% {
        transform: scale(1);
        box-shadow: 0 8px 20px rgba(74, 58, 42, 0.06), 0 0 0 0 var(--manual-accent-glow);
        filter: brightness(1);
      }
    }

    @keyframes manual-coin-shimmer {
      0% {
        transform: rotate(18deg) translateX(-210%);
        opacity: 0;
      }
      18% {
        opacity: 0.92;
      }
      70% {
        opacity: 0.58;
      }
      100% {
        transform: rotate(18deg) translateX(360%);
        opacity: 0;
      }
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @media (max-width: 480px) {
      body {
        padding:
          max(4px, env(safe-area-inset-top))
          max(4px, env(safe-area-inset-right))
          max(6px, env(safe-area-inset-bottom))
          max(4px, env(safe-area-inset-left));
      }

      .calc-card {
        width: 100%;
        border-radius: 16px;
        padding: 10px 10px calc(10px + 42px);
        gap: 8px;
      }

      .ksta-panel .rate-box {
        margin-top: 7px;
      }

      .ksta-footer-stack {
        margin-top: 4px;
        gap: 9px;
      }

      .header-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .title {
        text-align: left;
        font-size: 18px;
        flex: 1;
        min-width: 0;
      }

      .header-actions {
        display: flex;
        gap: 5px;
        align-items: center;
        flex-shrink: 0;
      }

      .theme-toggle-btn,
      .mini-toggle-btn {
        width: 100%;
        min-width: 0;
        min-height: 20px;
        padding: 3px 8px;
        font-size: 11px;
      }

      .help-icon-btn {
        width: 24px;
        height: 24px;
        font-size: 12px;
      }

      .toggle-tabs {
        grid-template-columns: repeat(4, 1fr);
        gap: 3px;
      }

      .toggle-tabs::before {
        display: none; /* 2줄 그리드에서는 슬라이더 비활성 */
      }

      .tab-btn.active {
        background: linear-gradient(135deg, var(--primary-brown) 0%, var(--primary-light) 100%) !important;
        color: #fff !important;
        border-radius: 11px;
      }

      .tab-btn {
        font-size: 13px;
        padding: 8px 8px;
        min-height: 34px;
      }

      .rate-meta {
        flex-wrap: wrap;
        margin-bottom: 5px;
      }

      .rate-caption {
        width: 100%;
      }

      .rate-status {
        width: 100%;
        justify-content: center;
      }

      .rate-line {
        align-items: flex-start;
      }

      .price-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
      }

      .rate-updated-at {
        width: 100%;
        text-align: left;
      }

      .input-row {
        gap: 8px;
      }

      .input-row input {
        font-size: 19px;
        padding: 10px 0;
      }

      .input-row select {
        max-width: 46%;
        min-height: 38px;
        padding: 7px 8px;
        font-size: 15px;
      }

      .swap-container {
        display: flex;
        justify-content: center;
        padding-left: 0;
        margin: -2px 0;
      }

      .swap-btn {
        min-height: 38px;
        min-width: 38px;
        width: 38px;
        height: 38px;
        font-size: 16px;
      }

      .calc-grid {
        gap: 7px;
      }

      .calc-key {
        min-height: 42px;
        border-radius: 14px;
      }

      .notice-box {
        font-size: 10.5px;
      }

      .bottom-actions {
        right: max(8px, env(safe-area-inset-right));
        bottom: calc(max(8px, env(safe-area-inset-bottom)) + 4px);
      }

      .site-btn {
        min-height: 26px;
        padding: 4px 11px;
        font-size: 10px;
      }
    }

    @media (max-width: 390px) {
      .calc-card {
        padding: 9px 9px calc(9px + 40px);
        gap: 8px;
      }

      .ksta-panel .rate-box {
        margin-top: 6px;
      }

      .ksta-footer-stack {
        margin-top: 4px;
        gap: 8px;
      }

      .theme-toggle-btn,
      .mini-toggle-btn {
        min-height: 18px;
        font-size: 10px;
        padding: 2px 7px;
      }

      .tab-btn {
        font-size: 12px;
        padding: 7px 6px;
        min-height: 32px;
      }

      .input-row select {
        max-width: 44%;
        padding: 7px;
        font-size: 14px;
      }

      .calc-grid {
        gap: 6px;
      }

      .calc-key {
        min-height: 40px;
      }

      .notice-box {
        font-size: 10px;
      }
    }

    @media (max-width: 340px) {
      .title {
        font-size: 17px;
      }

      .header-actions {
        grid-template-columns: 1fr;
      }

      .tab-btn,
      .theme-toggle-btn,
      .mini-toggle-btn {
        font-size: 11px;
      }

      .site-btn {
        min-width: 48px;
        min-height: 24px;
        font-size: 9px;
        padding: 4px 9px;
      }

      .calc-key {
        min-height: 38px;
        font-size: 16px;
      }

      .input-row input {
        font-size: 18px;
      }

      .input-row select {
        max-width: 42%;
        font-size: 13px;
      }
    }

    @media (max-width: 480px) {
      body.ios-safari {
        padding:
          max(2px, env(safe-area-inset-top))
          max(2px, env(safe-area-inset-right))
          max(4px, env(safe-area-inset-bottom))
          max(2px, env(safe-area-inset-left));
      }

      body.ios-safari .calc-card {
        border-radius: 15px;
        gap: 7px;
      }

      body.ios-safari .rate-box,
      body.ios-safari .live-price-display {
        padding-left: 7px;
        padding-right: 7px;
      }

      body.ios-safari .input-row input {
        font-size: 18px;
        padding: 8px 0;
      }

      body.ios-safari .input-row select {
        min-height: 34px;
        font-size: 14px;
      }

      body.ios-safari .swap-btn {
        min-height: 32px;
        min-width: 32px;
        font-size: 18px;
      }

      body.ios-safari .notice-head {
        padding: 5px 8px;
        min-height: 28px;
      }

      body.ios-safari .notice-body {
        padding: 0 9px 8px;
      }
    }

    @media (hover: none) {
      .calc-key:hover {
        filter: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .panel-stage,
      .calc-panel,
      .manual-ksta-box,
      .manual-ksta-box::after,
      .manual-ksta-btn,
      .picker-trigger.current-coin-accent,
      #unit1.current-coin-accent {
        transition: none !important;
        animation: none !important;
      }
    }
    /* ── 다중 환산 뷰 ── */
    .multi-input-row {
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1.5px solid var(--line-color);
      padding-bottom: 10px;
      margin-bottom: 2px;
      transition: border-color 0.2s ease;
    }

    .multi-input-row:focus-within {
      border-bottom-color: var(--border-brown);
    }

    .multi-input-row input {
      flex: 1;
      min-width: 0;
      border: none;
      font-size: clamp(22px, 6.5vw, 28px);
      font-weight: 900;
      outline: none;
      background: transparent;
      color: var(--text-main);
      padding: 10px 0;
      letter-spacing: -1px;
    }

    .multi-results {
      display: flex;
      flex-direction: column;
    }

    .multi-result-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 2px;
      border-bottom: 1px solid var(--line-color);
      transition: background-color 0.15s ease;
    }

    .multi-result-item:last-child { border-bottom: none; }

    .multi-result-icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(196,152,80,0.08);
      border: 1px solid rgba(196,152,80,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex: 0 0 34px;
      transition: background-color 0.25s ease, border-color 0.25s ease;
    }

    .multi-result-item.is-source .multi-result-icon {
      background: linear-gradient(135deg, rgba(196,152,80,0.18), rgba(138,94,46,0.12));
      border-color: rgba(196,152,80,0.40);
    }

    .multi-result-info {
      flex: 1;
      min-width: 0;
    }

    .multi-result-name {
      font-size: 14px;
      font-weight: 800;
      color: var(--text-main);
      letter-spacing: -0.4px;
      line-height: 1.2;
    }

    .multi-result-sub {
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 600;
      margin-top: 1px;
    }

    .multi-result-value {
      text-align: right;
      min-width: 0;
      flex: 0 0 auto;
      max-width: 55%;
    }

    .multi-result-amount {
      font-size: clamp(13px, 3.8vw, 15px);
      font-weight: 900;
      color: var(--text-main);
      letter-spacing: -0.5px;
      word-break: break-all;
      line-height: 1.25;
    }

    .multi-result-amount.is-zero {
      color: var(--text-muted);
      font-weight: 600;
    }

    .multi-result-item.is-source .multi-result-amount {
      color: var(--primary-brown);
    }

    .multi-result-price {
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 600;
      margin-top: 2px;
    }

    .multi-copy-btn {
      opacity: 0;
      pointer-events: none;
      width: 22px;
      height: 22px;
      border: 1px solid var(--soft-line);
      border-radius: 6px;
      background: var(--input-bg);
      color: var(--text-muted);
      font-size: 11px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 22px;
      transition: opacity 0.15s ease, color 0.15s ease;
    }

    .multi-result-item:hover .multi-copy-btn {
      opacity: 1;
      pointer-events: auto;
    }

    .multi-copy-btn.copied {
      color: var(--success);
      border-color: rgba(16,185,129,0.28);
      opacity: 1;
    }

    /* 토스트 알림 */
    .copy-toast {
      position: fixed;
      bottom: calc(max(20px, env(safe-area-inset-bottom)) + 56px);
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      background: rgba(30,24,18,0.92);
      color: #f0e5d6;
      font-size: 12px;
      font-weight: 700;
      padding: 7px 16px;
      border-radius: 999px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.22s ease;
      z-index: 2000;
      white-space: nowrap;
      box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    }

    .copy-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @media (max-width: 480px) {
      .multi-result-item { padding: 9px 0; }
      .multi-result-icon { width: 30px; height: 30px; flex: 0 0 30px; font-size: 13px; }
      .multi-result-name { font-size: 13px; }
    }

    /* ── 빠른 금액 버튼 ── */
    .quick-amounts {
      display: flex;
      gap: 6px;
      padding: 4px 0 6px;
    }
    .quick-btn {
      flex: 1;
      min-height: 30px;
      border: 1px solid var(--tab-border);
      background: var(--tab-bg);
      color: var(--primary-brown);
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 800;
      cursor: pointer;
      letter-spacing: -0.3px;
      transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .quick-btn:active {
      transform: scale(0.93);
      background: var(--border-brown);
      color: white;
    }

    /* ── 단축 키패드 (값 조작) ── */
    .calc-ops {
      display: flex;
      gap: 5px;
      padding: 2px 0 4px;
    }
    .calc-op-btn {
      flex: 1;
      min-height: 28px;
      border: 1px solid rgba(176,141,106,0.22);
      background: rgba(141,103,58,0.05);
      color: var(--primary-brown);
      border-radius: 7px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      letter-spacing: -0.3px;
      transition: background-color 0.15s ease, transform 0.1s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .calc-op-btn:active {
      transform: scale(0.92);
      background: var(--border-brown);
      color: white;
    }
    .calc-op-btn.danger {
      color: #c82b2b;
    }
    body.dark-mode .calc-op-btn.danger {
      color: #ff7a7a;
    }

    /* ── 온보딩 튜토리얼 ── */
    .onboarding-overlay {
      position: fixed;
      inset: 0;
      z-index: 1500;
      background: rgba(14, 14, 18, 0.55);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: fadeIn 0.25s ease;
    }
    .onboarding-overlay[hidden] { display: none !important; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    .onboarding-card {
      width: min(100%, 360px);
      background: var(--card-bg);
      border-radius: 22px;
      border: 1px solid rgba(196,160,110,0.22);
      box-shadow: 0 16px 48px rgba(0,0,0,0.22);
      padding: 28px 24px 20px;
      text-align: center;
      animation: slideUp 0.32s cubic-bezier(.22,1,.36,1);
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .ob-emoji {
      font-size: 44px;
      line-height: 1;
      margin-bottom: 12px;
    }
    .ob-title {
      font-size: 18px;
      font-weight: 900;
      color: var(--primary-brown);
      margin: 0 0 8px;
      letter-spacing: -0.5px;
    }
    .ob-body {
      font-size: 14px;
      color: var(--text-main);
      line-height: 1.55;
      margin: 0 0 20px;
      opacity: 0.85;
    }
    .ob-dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-bottom: 16px;
    }
    .ob-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(141,103,58,0.22);
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .ob-dot.active {
      background: var(--primary-brown);
      transform: scale(1.3);
    }
    .ob-actions {
      display: flex;
      gap: 8px;
    }
    .ob-btn {
      flex: 1;
      min-height: 42px;
      border-radius: 12px;
      font-size: 13.5px;
      font-weight: 800;
      cursor: pointer;
      transition: opacity 0.15s ease, transform 0.1s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .ob-btn.primary {
      background: linear-gradient(135deg, var(--primary-brown), var(--primary-light));
      color: white;
      border: none;
      box-shadow: 0 4px 14px rgba(138,94,46,0.30);
    }
    .ob-btn.secondary {
      background: transparent;
      color: var(--text-muted, #9b8a76);
      border: 1px solid rgba(176,141,106,0.25);
    }
    .ob-btn:active { transform: scale(0.96); }
    .ob-skip {
      margin-top: 14px;
      font-size: 11.5px;
      color: var(--text-muted, #9b8a76);
      background: none;
      border: none;
      cursor: pointer;
      text-decoration: underline;
      opacity: 0.7;
    }

    /* 📚 법적 문서 링크 영역 (온보딩 마지막 단계) */
    .ob-legal-links {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 16px 0 10px;
      text-align: left;
    }
    .ob-legal-links[hidden] { display: none !important; }

    .ob-legal-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: var(--input-bg, rgba(141,103,58,0.05));
      border: 1.5px solid rgba(176,141,106,0.22);
      border-radius: 12px;
      text-decoration: none;
      color: var(--text-main);
      transition: all 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .ob-legal-link:hover {
      background: rgba(141,103,58,0.10);
      border-color: var(--primary-brown);
      transform: translateX(2px);
    }
    .ob-legal-link:active { transform: scale(0.98); }
    .ob-legal-link.visited {
      background: rgba(16,185,129,0.08);
      border-color: rgba(16,185,129,0.45);
    }

    .ob-legal-icon {
      font-size: 22px;
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: white;
      border-radius: 10px;
      box-shadow: 0 1px 3px rgba(120,80,30,0.08);
    }
    .ob-legal-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .ob-legal-text b {
      font-size: 13.5px;
      font-weight: 800;
      color: var(--primary-brown);
      letter-spacing: -0.2px;
    }
    .ob-legal-sub {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 500;
      line-height: 1.4;
    }
    .ob-legal-check {
      font-size: 16px;
      color: var(--primary-brown);
      flex-shrink: 0;
      font-weight: 800;
      transition: all 0.2s ease;
    }
    .ob-legal-link.visited .ob-legal-check {
      color: #10b981;
    }

    /* 동의 체크박스 */
    .ob-consent {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 11px 14px;
      background: rgba(196,152,80,0.08);
      border: 1.5px solid rgba(196,152,80,0.28);
      border-radius: 12px;
      margin-top: 4px;
      cursor: pointer;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-main);
      transition: all 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .ob-consent:hover {
      background: rgba(196,152,80,0.14);
    }
    .ob-consent input[type="checkbox"] {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      accent-color: var(--primary-brown);
      cursor: pointer;
      margin: 0;
    }
    .ob-consent b {
      color: var(--primary-brown);
      font-weight: 800;
    }
    .ob-consent.checked {
      background: rgba(16,185,129,0.08);
      border-color: rgba(16,185,129,0.45);
    }

    /* 비활성화된 "다음" 버튼 스타일 */
    .ob-btn.primary:disabled,
    .ob-btn.primary[disabled] {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none !important;
    }

    /* 동의 체크박스 미체크 시 흔들림 피드백 */
    @keyframes obShake {
      0%, 100% { transform: translateX(0); }
      20%      { transform: translateX(-6px); }
      40%      { transform: translateX(6px); }
      60%      { transform: translateX(-4px); }
      80%      { transform: translateX(4px); }
    }

    /* ── 위젯 임베드 모달 ── */
    /* ── PWA 설치 배너 ── */
    .pwa-install-banner {
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: calc(max(12px, env(safe-area-inset-bottom)) + 60px);
      z-index: 900;
      background: linear-gradient(135deg, var(--primary-brown), var(--primary-light));
      color: white;
      border-radius: 16px;
      padding: 14px 16px;
      box-shadow: 0 8px 28px rgba(138,94,46,0.32), 0 2px 6px rgba(0,0,0,0.12);
      display: flex;
      align-items: center;
      gap: 12px;
      animation: pwaBannerSlideUp 0.42s cubic-bezier(.22,1,.36,1);
      max-width: 480px;
      margin: 0 auto;
    }
    .pwa-install-banner[hidden] { display: none !important; }
    @keyframes pwaBannerSlideUp {
      from { transform: translateY(120%); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    .pwa-banner-icon {
      font-size: 28px;
      line-height: 1;
      flex-shrink: 0;
    }
    .pwa-banner-text {
      flex: 1;
      min-width: 0;
      line-height: 1.35;
    }
    .pwa-banner-title {
      font-size: 13.5px;
      font-weight: 900;
      margin: 0 0 2px;
      letter-spacing: -0.2px;
    }
    .pwa-banner-sub {
      font-size: 11.5px;
      opacity: 0.9;
      font-weight: 500;
      margin: 0;
    }
    .pwa-banner-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }
    .pwa-banner-btn {
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 800;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.1s ease;
    }
    .pwa-banner-btn.primary {
      background: white;
      color: var(--primary-brown);
    }
    .pwa-banner-btn.dismiss {
      background: rgba(255,255,255,0.18);
      color: white;
    }
    .pwa-banner-btn:active { transform: scale(0.94); }

    /* iOS 설치 안내 모달 (PWA prompt 없는 iOS용) */
    .ios-install-modal[hidden] { display: none !important; }
    .ios-install-modal {
      position: fixed;
      inset: 0;
      z-index: 1460;
      background: rgba(14,14,18,0.55);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .ios-install-card {
      width: min(100%, 360px);
      background: var(--card-bg);
      border-radius: 20px;
      padding: 22px 20px 18px;
      border: 1px solid rgba(196,160,110,0.22);
      box-shadow: 0 20px 56px rgba(0,0,0,0.22);
      text-align: center;
    }
    .ios-install-emoji { font-size: 40px; line-height: 1; margin-bottom: 10px; }
    .ios-install-title {
      font-size: 16px; font-weight: 900; color: var(--primary-brown);
      margin: 0 0 12px; letter-spacing: -0.3px;
    }
    .ios-install-step {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      background: var(--input-bg);
      border-radius: 10px;
      margin-bottom: 8px;
      font-size: 13px;
      text-align: left;
    }
    .ios-install-step-num {
      width: 22px; height: 22px;
      background: var(--primary-brown); color: white;
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800;
      flex-shrink: 0;
    }
    .ios-install-icon-demo {
      display: inline-block;
      padding: 2px 6px;
      background: rgba(141,103,58,0.12);
      border-radius: 6px;
      font-size: 14px;
      margin: 0 2px;
    }
    .ios-install-close-btn {
      margin-top: 12px;
      width: 100%;
      padding: 12px;
      background: var(--primary-brown); color: white;
      border: none; border-radius: 12px;
      font-size: 13.5px; font-weight: 800;
      cursor: pointer;
    }
    .ios-install-close-btn:active { transform: scale(0.98); }

    /* ── 오프라인 인디케이터 ── */
    .offline-indicator {
      position: fixed;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 950;
      background: linear-gradient(135deg, #c82b2b, #a12020);
      color: white;
      padding: 7px 16px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 4px 14px rgba(200,43,43,0.35);
      display: flex;
      align-items: center;
      gap: 6px;
      animation: offlineSlideDown 0.3s ease;
      letter-spacing: -0.2px;
    }
    .offline-indicator[hidden] { display: none !important; }
    @keyframes offlineSlideDown {
      from { transform: translate(-50%, -100%); opacity: 0; }
      to   { transform: translate(-50%, 0);     opacity: 1; }
    }
    .offline-indicator.reconnected {
      background: linear-gradient(135deg, #16a34a, #128a3f);
      box-shadow: 0 4px 14px rgba(22,163,74,0.35);
    }
    .offline-indicator-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: white;
      animation: offlinePulse 1.4s ease-in-out infinite;
    }
    @keyframes offlinePulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.4; }
    }

    /* ── ⚙️ 설정 버튼 (아이콘만, 컴팩트) ── */
    .home-btn,
    .settings-btn {
      background: rgba(141,103,58,0.08);
      border: 1px solid rgba(176,141,106,0.22);
      color: var(--primary-brown);
      border-radius: 50%;
      width: 30px;
      height: 30px;
      padding: 0;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: background 0.15s ease, transform 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
      text-decoration: none;
    }
    .home-btn:hover {
      background: rgba(141,103,58,0.12);
      transform: translateY(-2px);
    }
    .home-btn:active { transform: scale(0.9); }
    .settings-btn:hover {
      background: rgba(141,103,58,0.12);
      transform: rotate(45deg);
    }
    .settings-btn:active { transform: scale(0.9) rotate(30deg); }

    .settings-overlay {
      position: fixed;
      inset: 0;
      z-index: 1420;
      background: rgba(14, 14, 18, 0.48);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 0;
      animation: settingsFadeIn 0.22s ease;
    }
    .settings-overlay[hidden] { display: none !important; }
    @keyframes settingsFadeIn { from { opacity: 0; } to { opacity: 1; } }

    .settings-sheet {
      width: min(100%, 480px);
      max-height: 85vh;
      overflow-y: auto;
      background: var(--card-bg);
      border-radius: 24px 24px 0 0;
      border: 1px solid rgba(196,160,110,0.20);
      border-bottom: none;
      box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
      padding: 20px 18px 28px;
      animation: settingsSlideUp 0.28s cubic-bezier(.22,1,.36,1);
    }
    @keyframes settingsSlideUp {
      from { transform: translateY(20px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }

    .settings-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line-color);
    }
    .settings-title {
      font-size: 17px;
      font-weight: 900;
      color: var(--primary-brown);
      margin: 0;
      letter-spacing: -0.3px;
    }
    .settings-close {
      background: none;
      border: none;
      font-size: 22px;
      color: var(--text-muted, #9b8a76);
      cursor: pointer;
      padding: 4px 10px;
      line-height: 1;
      border-radius: 8px;
    }
    .settings-close:active { background: rgba(141,103,58,0.08); }

    .settings-group {
      margin-bottom: 18px;
    }
    .settings-group-label {
      font-size: 10.5px;
      font-weight: 800;
      color: var(--text-muted, #9b8a76);
      letter-spacing: 0.8px;
      text-transform: uppercase;
      margin: 0 4px 6px;
    }

    /* 언어 선택 그리드 (설정 시트 내부) */
    .settings-lang-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }
    .settings-lang-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 10px 6px;
      background: rgba(141,103,58,0.04);
      border: 1px solid rgba(176,141,106,0.14);
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      font-family: inherit;
    }
    .settings-lang-btn:hover { background: rgba(141,103,58,0.08); }
    .settings-lang-btn:active { transform: scale(0.96); }
    .settings-lang-btn.active {
      background: linear-gradient(135deg, var(--primary-brown), var(--primary-light));
      border-color: transparent;
      box-shadow: 0 3px 10px rgba(138,94,46,0.25);
    }
    .settings-lang-flag {
      font-size: 22px;
      line-height: 1;
    }
    .settings-lang-name {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-main);
      letter-spacing: -0.2px;
    }
    .settings-lang-btn.active .settings-lang-name {
      color: white;
    }
    body.dark-mode .settings-lang-btn {
      background: rgba(255,200,120,0.05);
      border-color: rgba(255,200,120,0.12);
    }
    body.dark-mode .settings-lang-btn:hover {
      background: rgba(255,200,120,0.09);
    }

    .settings-row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 12px 14px;
      background: rgba(141,103,58,0.04);
      border: 1px solid rgba(176,141,106,0.14);
      border-radius: 12px;
      margin-bottom: 6px;
      cursor: pointer;
      text-decoration: none;
      color: var(--text-main);
      font-size: 14px;
      font-weight: 600;
      transition: background 0.15s ease, transform 0.1s ease;
      -webkit-tap-highlight-color: transparent;
      text-align: left;
      font-family: inherit;
    }
    .settings-row:hover { background: rgba(141,103,58,0.08); }
    .settings-row:active { transform: scale(0.98); }
    .settings-row-icon {
      font-size: 17px;
      width: 24px;
      text-align: center;
      flex-shrink: 0;
    }
    .settings-row-label {
      flex: 1;
      min-width: 0;
    }
    .settings-row-value {
      font-size: 12.5px;
      color: var(--primary-brown);
      font-weight: 700;
      opacity: 0.85;
    }
    .settings-row-arrow {
      color: var(--text-muted, #9b8a76);
      font-size: 16px;
      font-weight: 600;
      flex-shrink: 0;
    }

    body.dark-mode .settings-row {
      background: rgba(255,200,120,0.05);
      border-color: rgba(255,200,120,0.12);
    }
    body.dark-mode .settings-row:hover {
      background: rgba(255,200,120,0.09);
    }

    /* 🗑️ v110: Reset Data - 위험 버튼 스타일 */
    .settings-row.settings-row-danger {
      background: rgba(239,68,68,0.06);
      border: 1px solid rgba(239,68,68,0.25);
      color: #dc2626;
    }
    .settings-row.settings-row-danger:hover {
      background: rgba(239,68,68,0.12);
      border-color: rgba(239,68,68,0.4);
    }
    .settings-row.settings-row-danger .settings-row-label {
      color: #dc2626;
      font-weight: 700;
    }
    body.dark-mode .settings-row.settings-row-danger {
      background: rgba(239,68,68,0.12);
      border-color: rgba(239,68,68,0.3);
    }
    body.dark-mode .settings-row.settings-row-danger .settings-row-label {
      color: #f87171;
    }

    /* Reset Data Modal */
    .reset-modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.6);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: resetFadeIn 0.2s ease-out;
    }
    @keyframes resetFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .reset-modal {
      background: #fff;
      border-radius: 16px;
      max-width: 420px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 20px 50px rgba(0,0,0,0.3);
      animation: resetSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
    }
    @keyframes resetSlideUp {
      from { transform: translateY(30px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    body.dark-mode .reset-modal {
      background: #1c1712;
      color: #ede4d8;
    }
    .reset-modal-header {
      padding: 20px 20px 12px;
      text-align: center;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    body.dark-mode .reset-modal-header {
      border-bottom-color: rgba(255,255,255,0.08);
    }
    .reset-modal-icon {
      font-size: 40px;
      margin-bottom: 8px;
    }
    .reset-modal-title {
      font-size: 17px;
      font-weight: 900;
      color: #dc2626;
      margin: 0;
    }
    body.dark-mode .reset-modal-title {
      color: #f87171;
    }
    .reset-modal-body {
      padding: 16px 20px;
      font-size: 13.5px;
      line-height: 1.7;
    }
    .reset-modal-body p {
      margin: 0 0 12px;
    }
    .reset-modal-list {
      background: rgba(239,68,68,0.06);
      border: 1px solid rgba(239,68,68,0.2);
      border-radius: 10px;
      padding: 10px 16px;
      margin: 10px 0;
      font-size: 12.5px;
    }
    body.dark-mode .reset-modal-list {
      background: rgba(239,68,68,0.12);
    }
    .reset-modal-list ul {
      margin: 4px 0;
      padding-left: 20px;
    }
    .reset-modal-list li {
      margin: 3px 0;
    }
    .reset-modal-warn {
      background: rgba(220,170,60,0.1);
      border-left: 3px solid #d4af6f;
      padding: 10px 14px;
      margin: 10px 0;
      border-radius: 0 8px 8px 0;
      font-size: 12.5px;
      font-weight: 700;
      color: #b8860b;
    }
    body.dark-mode .reset-modal-warn {
      background: rgba(220,170,60,0.15);
      color: #fbbf24;
    }
    .reset-modal-actions {
      display: flex;
      gap: 8px;
      padding: 12px 20px 20px;
    }
    .reset-modal-btn {
      flex: 1;
      padding: 12px 16px;
      border-radius: 10px;
      border: none;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.15s;
    }
    .reset-modal-btn-cancel {
      background: rgba(0,0,0,0.06);
      color: #2a1f15;
    }
    .reset-modal-btn-cancel:hover {
      background: rgba(0,0,0,0.1);
    }
    body.dark-mode .reset-modal-btn-cancel {
      background: rgba(255,255,255,0.08);
      color: #ede4d8;
    }
    body.dark-mode .reset-modal-btn-cancel:hover {
      background: rgba(255,255,255,0.12);
    }
    .reset-modal-btn-confirm {
      background: #dc2626;
      color: #fff;
    }
    .reset-modal-btn-confirm:hover {
      background: #b91c1c;
    }
    .reset-modal-btn-confirm:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .settings-footer {
      margin-top: 20px;
      padding-top: 14px;
      border-top: 1px solid var(--line-color);
      text-align: center;
    }
    .settings-footer-disclaimer {
      font-size: 11px;
      color: var(--text-muted, #9b8a76);
      line-height: 1.7;
      margin-bottom: 8px;
    }
    .settings-footer-contact {
      font-size: 11.5px;
      color: var(--text-muted, #9b8a76);
      font-weight: 600;
    }
    .settings-footer-contact a {
      color: var(--primary-brown);
      text-decoration: none;
      font-weight: 700;
    }

    .embed-overlay {
      position: fixed;
      inset: 0;
      z-index: 1400;
      background: rgba(14, 14, 18, 0.42);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .embed-overlay[hidden] { display: none !important; }
    .embed-card {
      width: min(100%, 440px);
      max-height: 88vh;
      overflow-y: auto;
      background: var(--card-bg);
      border-radius: 20px;
      border: 1px solid rgba(196,160,110,0.22);
      box-shadow: 0 20px 56px rgba(0,0,0,0.20);
      padding: 22px 20px 18px;
    }
    .embed-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
    }
    .embed-title {
      font-size: 16px;
      font-weight: 900;
      color: var(--primary-brown);
      margin: 0;
      letter-spacing: -0.5px;
    }
    .embed-close {
      background: none;
      border: none;
      font-size: 22px;
      color: var(--text-muted, #9b8a76);
      cursor: pointer;
      padding: 4px 8px;
      line-height: 1;
    }
    .embed-desc {
      font-size: 12.5px;
      color: var(--text-muted, #9b8a76);
      margin: 0 0 14px;
      line-height: 1.5;
    }
    .embed-size-row {
      display: flex;
      gap: 6px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .embed-size-btn,
    .embed-theme-btn {
      flex: 1 1 auto;
      min-width: 70px;
      padding: 8px 6px;
      border: 1px solid rgba(176,141,106,0.25);
      background: rgba(141,103,58,0.05);
      color: var(--primary-brown);
      border-radius: 9px;
      font-size: 11.5px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .embed-size-btn.active,
    .embed-theme-btn.active {
      background: linear-gradient(135deg, var(--primary-brown), var(--primary-light));
      color: white;
      border-color: transparent;
    }
    .embed-code-box {
      background: var(--input-bg);
      border: 1px solid var(--line-color);
      border-radius: 10px;
      padding: 12px;
      font-family: 'SF Mono', Menlo, Consolas, monospace;
      font-size: 11.5px;
      color: var(--text-main);
      line-height: 1.5;
      word-break: break-all;
      margin-bottom: 12px;
      max-height: 110px;
      overflow-y: auto;
    }
    .embed-preview {
      width: 100%;
      border: 1px dashed rgba(176,141,106,0.3);
      border-radius: 10px;
      margin-bottom: 12px;
      overflow: hidden;
      background: var(--input-bg);
    }
    .embed-actions {
      display: flex;
      gap: 8px;
    }
    .embed-action-btn {
      flex: 1;
      min-height: 40px;
      border-radius: 11px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      border: none;
      transition: opacity 0.15s ease, transform 0.1s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .embed-action-btn.primary {
      background: linear-gradient(135deg, var(--primary-brown), var(--primary-light));
      color: white;
      box-shadow: 0 4px 14px rgba(138,94,46,0.25);
    }
    .embed-action-btn.secondary {
      background: rgba(141,103,58,0.08);
      color: var(--primary-brown);
      border: 1px solid rgba(176,141,106,0.25);
    }
    .embed-action-btn:active { transform: scale(0.96); }
    .embed-toast {
      margin-top: 10px;
      font-size: 12px;
      color: #16a34a;
      text-align: center;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    .embed-toast.show { opacity: 1; }

    /* ── 스파크라인 ── */
    .sparkline-wrap {
      margin-top: 4px;
      line-height: 0;
    }
    .sparkline-wrap svg {
      display: block;
      width: 100%;
      height: 22px;
    }

    /* ── 포트폴리오 패널 ── */
    .portfolio-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1.5px solid var(--line-color);
      margin-bottom: 4px;
    }
    .portfolio-header-title {
      font-size: 15px;
      font-weight: 900;
      color: var(--text-main);
      letter-spacing: -0.5px;
    }
    .portfolio-header-note {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      padding: 3px 8px;
      border: 1px solid var(--soft-line);
      border-radius: 999px;
      background: var(--input-bg);
    }
    .portfolio-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 0;
      border-bottom: 1px solid var(--line-color);
    }
    .portfolio-row:last-child { border-bottom: none; }
    .portfolio-row-left {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 100px;
      min-width: 0;
    }
    .portfolio-row-icon {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(196,152,80,0.10);
      border: 1px solid rgba(196,152,80,0.20);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex: 0 0 30px;
    }
    .portfolio-row-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .portfolio-row-name {
      font-size: 12px;
      font-weight: 800;
      color: var(--text-main);
      letter-spacing: -0.3px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .portfolio-row-price {
      font-size: 9.5px;
      color: var(--text-muted);
      font-weight: 600;
      margin-top: 1px;
      white-space: nowrap;
    }
    .portfolio-manual-tag {
      display: inline-flex;
      align-items: center;
      font-size: 9px;
      font-weight: 800;
      color: #4f1fd6;
      background: rgba(109,61,242,0.12);
      border: 1px solid rgba(79,31,214,0.22);
      border-radius: 999px;
      padding: 1px 5px;
    }
    body.dark-mode .portfolio-manual-tag {
      color: #c4b0ff;
      background: rgba(109,61,242,0.22);
      border-color: rgba(200,180,255,0.22);
    }
    .portfolio-qty-input {
      flex: 1;
      min-width: 0;
      height: 36px;
      border: 1.5px solid var(--soft-line);
      border-radius: 10px;
      background: var(--input-bg);
      color: var(--text-main);
      font-size: 13px;
      font-weight: 800;
      padding: 0 10px;
      outline: none;
      text-align: right;
      transition: border-color 0.2s ease;
    }
    .portfolio-qty-input:focus {
      border-color: var(--border-brown);
    }
    .portfolio-row-value {
      flex: 0 0 76px;
      text-align: right;
      font-size: 12.5px;
      font-weight: 800;
      color: var(--text-main);
      letter-spacing: -0.3px;
    }
    .portfolio-row-value.zero { color: var(--text-muted); font-weight: 600; }
    .portfolio-total {
      margin-top: 8px;
      padding: 12px 14px;
      border-radius: 14px;
      background: linear-gradient(160deg, rgba(196,152,80,0.08) 0%, transparent 100%);
      border: 1.5px solid rgba(196,160,110,0.28);
    }
    .portfolio-total-label {
      font-size: 11px;
      font-weight: 800;
      color: var(--text-muted);
      margin-bottom: 4px;
      letter-spacing: 0.02em;
    }
    .portfolio-total-krw {
      font-size: clamp(20px, 5.5vw, 24px);
      font-weight: 900;
      color: var(--primary-brown);
      letter-spacing: -1px;
      line-height: 1.2;
    }
    .portfolio-total-usd {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* ── 손익 계산기 ── */
    .pnl-coin-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 10px;
      border-bottom: 1.5px solid var(--line-color);
      margin-bottom: 4px;
    }
    .pnl-coin-label {
      font-size: 12px;
      font-weight: 800;
      color: var(--text-muted);
      white-space: nowrap;
    }
    .pnl-input-group {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 8px 0;
      border-bottom: 1px solid var(--line-color);
    }
    .pnl-input-label {
      font-size: 11px;
      font-weight: 800;
      color: var(--text-muted);
      letter-spacing: -0.2px;
    }
    .pnl-input-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .pnl-input {
      flex: 1;
      min-width: 0;
      height: 40px;
      border: 1.5px solid var(--soft-line);
      border-radius: 11px;
      background: var(--input-bg);
      color: var(--text-main);
      font-size: 16px;
      font-weight: 800;
      padding: 0 12px;
      outline: none;
      transition: border-color 0.2s ease;
      letter-spacing: -0.5px;
    }
    .pnl-input:focus { border-color: var(--border-brown); }
    .pnl-input-unit {
      font-size: 12px;
      font-weight: 800;
      color: var(--text-muted);
      white-space: nowrap;
      flex: 0 0 auto;
    }
    .pnl-current-price {
      font-size: 10.5px;
      font-weight: 600;
      color: var(--text-muted);
      margin-top: 2px;
    }
    /* 결과 카드 */
    .pnl-result {
      margin-top: 6px;
      border-radius: 16px;
      border: 1.5px solid var(--border);
      overflow: hidden;
      transition: border-color 0.3s ease;
    }
    .pnl-result.profit { border-color: rgba(16,185,129,0.36); }
    .pnl-result.loss   { border-color: rgba(200,43,43,0.30); }
    .pnl-result-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 14px 10px;
      background: var(--input-bg);
      gap: 10px;
    }
    .pnl-rate-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: clamp(20px, 5.5vw, 24px);
      font-weight: 900;
      letter-spacing: -1px;
      line-height: 1.1;
    }
    .pnl-rate-badge.profit { color: var(--success); }
    .pnl-rate-badge.loss   { color: var(--danger); }
    .pnl-rate-badge.zero   { color: var(--text-muted); }
    .pnl-rate-arrow { font-size: 14px; }
    .pnl-result-sub {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      text-align: right;
      line-height: 1.5;
    }
    .pnl-rows {
      display: flex;
      flex-direction: column;
    }
    .pnl-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 14px;
      border-top: 1px solid var(--line-color);
      gap: 8px;
    }
    .pnl-row-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-muted);
      white-space: nowrap;
    }
    .pnl-row-value {
      font-size: 13px;
      font-weight: 800;
      color: var(--text-main);
      text-align: right;
      letter-spacing: -0.4px;
    }
    .pnl-row-value.profit { color: var(--success); }
    .pnl-row-value.loss   { color: var(--danger); }
    .pnl-row-value.sub {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
    }
    .pnl-empty {
      text-align: center;
      padding: 28px 16px;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* ══════════════════════════════
       관리자 패널
    ══════════════════════════════ */
    .admin-overlay {
      position: fixed; inset: 0; z-index: 2000;
      background: rgba(10,8,5,0.72);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      display: flex; align-items: flex-end; justify-content: center;
      padding: 0 0 0;
    }
    .admin-overlay[hidden] { display: none !important; }

    .admin-panel {
      width: min(100%, 460px); max-height: 90dvh;
      background: var(--card-bg);
      border-radius: 26px 26px 0 0;
      border: 1px solid var(--card-border);
      border-bottom: none;
      box-shadow: 0 -8px 40px rgba(0,0,0,0.28);
      display: flex; flex-direction: column;
      overflow: hidden;
    }

    /* PIN 화면 */
    .admin-pin-screen {
      padding: 28px 24px 24px;
      display: flex; flex-direction: column; align-items: center; gap: 16px;
    }
    .admin-pin-title {
      font-size: 18px; font-weight: 900; color: var(--text-main); letter-spacing: -0.5px;
    }
    .admin-pin-sub { font-size: 12px; font-weight: 600; color: var(--text-muted); }
    .admin-pin-dots {
      display: flex; gap: 12px; margin: 4px 0;
    }
    .admin-pin-dot {
      width: 14px; height: 14px; border-radius: 50%;
      border: 2px solid var(--border-brown); background: transparent;
      transition: background 0.15s ease;
    }
    .admin-pin-dot.filled { background: var(--primary-brown); border-color: var(--primary-brown); }
    .admin-pin-keypad {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 240px;
    }
    .admin-pin-key {
      min-height: 48px; border-radius: 14px;
      background: var(--key-bg); color: var(--text-main);
      border: none; font-size: 20px; font-weight: 800; cursor: pointer;
      transition: transform 0.1s ease, background-color 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .admin-pin-key:active { transform: scale(0.92); background: var(--key-op-bg); }
    .admin-pin-key.del { font-size: 16px; color: var(--text-muted); }
    .admin-pin-err { font-size: 12px; font-weight: 700; color: var(--danger); min-height: 18px; }

    /* 관리자 메인 */
    .admin-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 18px 10px;
      border-bottom: 1px solid var(--line-color);
    }
    .admin-head-title { font-size: 16px; font-weight: 900; color: var(--text-main); letter-spacing: -0.5px; }
    .admin-close-btn {
      width: 32px; height: 32px; border-radius: 50%;
      border: 1px solid var(--tab-border); background: var(--tab-bg);
      color: var(--primary-brown); font-size: 14px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .admin-tabs {
      display: flex; gap: 0; border-bottom: 1px solid var(--line-color);
      overflow-x: auto; scrollbar-width: none;
    }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tab-btn {
      flex: 0 0 auto; padding: 10px 18px;
      background: none; border: none; border-bottom: 2px solid transparent;
      font-size: 13px; font-weight: 800; color: var(--text-muted); cursor: pointer;
      white-space: nowrap; transition: color 0.18s ease, border-color 0.18s ease;
    }
    .admin-tab-btn.active {
      color: var(--primary-brown); border-bottom-color: var(--primary-brown);
    }
    .admin-body {
      flex: 1; overflow-y: auto; padding: 14px 18px 24px;
    }
    .admin-section { display: none; }
    .admin-section.active { display: block; }

    /* 통화 관리 */
    .admin-subheading {
      font-size: 11px; font-weight: 900; color: var(--text-muted);
      letter-spacing: 0.04em; text-transform: uppercase; margin: 16px 0 8px;
    }
    .admin-subheading:first-child { margin-top: 0; }
    .asset-list { display: flex; flex-direction: column; gap: 6px; }
    .asset-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 10px; border-radius: 12px;
      background: var(--input-bg); border: 1px solid var(--soft-line);
    }
    .asset-item-icon {
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(196,152,80,0.10); border: 1px solid rgba(196,152,80,0.18);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; flex: 0 0 32px;
    }
    .asset-item-info { flex: 1; min-width: 0; }
    .asset-item-name { font-size: 13px; font-weight: 800; color: var(--text-main); }
    .asset-item-meta { font-size: 10.5px; color: var(--text-muted); font-weight: 600; margin-top: 1px; }
    .asset-item-del {
      width: 26px; height: 26px; border-radius: 8px;
      border: 1px solid rgba(200,43,43,0.28);
      background: rgba(200,43,43,0.07); color: var(--danger);
      font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
      flex: 0 0 26px; transition: background 0.15s ease;
    }
    .asset-item-del:hover { background: rgba(200,43,43,0.14); }
    .asset-item-del[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }

    /* 추가 폼 */
    .admin-form {
      margin-top: 12px; padding: 12px;
      background: var(--input-bg); border-radius: 14px;
      border: 1.5px solid var(--soft-line);
      display: flex; flex-direction: column; gap: 8px;
    }
    .admin-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .admin-input {
      flex: 1; min-width: 80px; height: 36px;
      border: 1.5px solid var(--soft-line); border-radius: 10px;
      background: var(--card-bg); color: var(--text-main);
      font-size: 13px; font-weight: 700; padding: 0 10px; outline: none;
      transition: border-color 0.2s ease;
    }
    .admin-input:focus { border-color: var(--border-brown); }
    .admin-input::placeholder { color: var(--text-muted); font-weight: 600; }
    .admin-btn {
      height: 36px; padding: 0 14px; border-radius: 10px;
      font-size: 12px; font-weight: 800; cursor: pointer;
      border: 1.5px solid var(--border-brown);
      background: linear-gradient(135deg, var(--primary-light), var(--primary-brown));
      color: white; white-space: nowrap; transition: opacity 0.15s ease, transform 0.1s ease;
    }
    .admin-btn:active { transform: scale(0.96); opacity: 0.88; }
    .admin-btn.sec {
      background: var(--tab-bg); color: var(--primary-brown);
      border-color: var(--tab-border);
    }
    .admin-msg { font-size: 11px; font-weight: 700; min-height: 16px; }
    .admin-msg.ok  { color: var(--success); }
    .admin-msg.err { color: var(--danger); }

    /* 통계 */
    .stat-card {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px;
    }
    .stat-box {
      background: var(--input-bg); border: 1px solid var(--soft-line);
      border-radius: 12px; padding: 10px 8px; text-align: center;
    }
    .stat-box-num {
      font-size: clamp(18px, 5vw, 22px); font-weight: 900;
      color: var(--primary-brown); letter-spacing: -1px;
    }
    .stat-box-label { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-top: 2px; }
    .stat-bar-row {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 0; border-bottom: 1px solid var(--line-color);
    }
    .stat-bar-row:last-child { border-bottom: none; }
    .stat-bar-label { font-size: 12px; font-weight: 700; color: var(--text-main); flex: 0 0 60px; }
    .stat-bar-track {
      flex: 1; height: 8px; background: var(--line-color); border-radius: 999px; overflow: hidden;
    }
    .stat-bar-fill {
      height: 100%; border-radius: 999px; min-width: 4px;
      background: linear-gradient(90deg, var(--primary-light), var(--primary-brown));
      transition: width 0.5s ease;
    }
    .stat-bar-val { font-size: 11px; font-weight: 800; color: var(--text-muted); flex: 0 0 36px; text-align: right; }
    .stat-pair-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 0; border-bottom: 1px solid var(--line-color);
      font-size: 12.5px;
    }
    .stat-pair-row:last-child { border-bottom: none; }
    .stat-pair-name { font-weight: 700; color: var(--text-main); }
    .stat-pair-cnt {
      font-weight: 800; color: var(--primary-brown);
      background: rgba(196,152,80,0.10); padding: 2px 8px; border-radius: 999px;
      font-size: 11px;
    }
    .stat-reset-btn {
      margin-top: 14px; width: 100%; height: 34px; border-radius: 10px;
      border: 1px solid rgba(200,43,43,0.28); background: rgba(200,43,43,0.07);
      color: var(--danger); font-size: 12px; font-weight: 800; cursor: pointer;
    }

    /* PIN 변경 */
    .admin-pin-change-row { display: flex; gap: 8px; flex-wrap: wrap; }

    /* ── 일반계산기 환율 변환 ── */
    .calc-fx-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px 4px;
      flex-wrap: wrap;
    }
    .calc-fx-label {
      font-size: 11px;
      font-weight: 800;
      color: var(--text-muted);
      white-space: nowrap;
    }
    .calc-fx-chips {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }
    .calc-fx-chip {
      height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1.5px solid var(--tab-border);
      background: var(--tab-bg);
      color: var(--primary-brown);
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .calc-fx-chip.active {
      background: linear-gradient(135deg, var(--primary-light), var(--primary-brown));
      color: white;
      border-color: var(--primary-brown);
    }
    .calc-fx-result {
      padding: 6px 10px 10px;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-muted);
      line-height: 1.7;
      min-height: 28px;
    }
    .calc-fx-row {
      display: flex;
      align-items: baseline;
      gap: 6px;
      padding: 3px 0;
      border-bottom: 1px solid var(--line-color);
    }
    .calc-fx-row:last-child { border-bottom: none; }
    .calc-fx-name {
      font-size: 11px;
      font-weight: 800;
      color: var(--text-muted);
      flex: 0 0 42px;
    }
    .calc-fx-val {
      font-size: 15px;
      font-weight: 900;
      color: var(--text-main);
      letter-spacing: -0.5px;
      flex: 1;
    }
    .calc-fx-rate {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
      white-space: nowrap;
    }

    /* ── 거래소 바로가기 ── */
    .exchange-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 16px;
      margin: 8px 0 0;
    }
    .exchange-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary-light), var(--primary-brown));
      color: white;
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
      border: none;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(138,94,46,.25);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .exchange-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(138,94,46,.35); }
    .exchange-btn:active { transform: translateY(0); }
    .exchange-btn.secondary {
      background: var(--tab-bg);
      color: var(--primary-brown);
      border: 1.5px solid var(--tab-border);
      box-shadow: none;
    }

    /* ── 다국어 선택 ── */
    .lang-bar {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 2px 0;
      min-width: 0;
    }
    .lang-bar[hidden] { display: none !important; }
    .lang-bar::-webkit-scrollbar { display: none; }
    .lang-btn {
      flex: 0 0 auto;
      padding: 4px 11px;
      border-radius: 999px;
      border: 1.5px solid var(--tab-border);
      background: var(--tab-bg);
      color: var(--text-muted);
      font-size: 11.5px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
      white-space: nowrap;
    }
    .lang-btn.active {
      background: var(--primary-brown);
      color: white;
      border-color: var(--primary-brown);
    }

    /* ── 뉴스/공지 피드 ── */
    .news-feed {
      margin: 10px 0 0;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--tab-border);
      background: var(--tab-bg);
    }
    .news-feed-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px 9px;
      border-bottom: 1px solid var(--tab-border);
      font-size: 12.5px;
      font-weight: 900;
      color: var(--primary-brown);
    }
    .news-feed-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .news-item {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      padding: 9px 14px;
      border-bottom: 1px solid var(--line-color);
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--text-main);
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
      min-width: 0;
    }
    .news-item:last-child { border-bottom: none; }
    .news-item:hover { background: rgba(196,152,80,.07); }
    .news-badge {
      flex: 0 0 auto;
      padding: 1px 6px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
      background: rgba(196,152,80,.15);
      color: var(--primary-brown);
      white-space: nowrap;
      margin-top: 2px;
    }
    .news-badge.event { background: rgba(16,185,129,.12); color: #0d6b50; }
    .news-badge.notice { background: rgba(200,43,43,.10); color: #c82b2b; }
    .news-date {
      margin-left: auto;
      font-size: 10px;
      color: var(--text-muted);
      white-space: nowrap;
      margin-top: 2px;
    }

    /* ── 즐겨찾기 환산쌍 ── */
    .fav-bar {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 14px 4px; flex-wrap: wrap;
    }
    .fav-label { font-size: 11px; font-weight: 800; color: var(--text-muted); white-space: nowrap; }
    .fav-chip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px; border-radius: 999px;
      border: 1.5px solid var(--tab-border); background: var(--tab-bg);
      color: var(--text-main); font-size: 11.5px; font-weight: 800;
      cursor: pointer; transition: all .15s; white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }
    .fav-chip:hover { background: rgba(196,152,80,.10); border-color: var(--primary-light); }
    .fav-chip .fav-del {
      font-size: 10px; color: var(--text-muted); margin-left: 2px;
      line-height: 1; padding: 0 1px;
    }
    .fav-add-btn {
      padding: 3px 9px; border-radius: 999px;
      border: 1.5px dashed var(--tab-border); background: transparent;
      color: var(--primary-brown); font-size: 12px; font-weight: 800;
      cursor: pointer; transition: all .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .fav-add-btn:hover { border-color: var(--primary-brown); background: rgba(196,152,80,.08); }

    /* ── 계산 히스토리 ── */
    .calc-hist-bar {
      padding: 6px 10px 4px;
    }
    .calc-hist-label {
      font-size: 11px; font-weight: 800; color: var(--text-muted);
      margin-bottom: 5px; display: flex; align-items: center; justify-content: space-between;
    }
    .calc-hist-clear { font-size: 10px; font-weight: 700; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; }
    .calc-hist-list { display: flex; flex-direction: column; gap: 3px; }
    .calc-hist-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 5px 8px; border-radius: 8px; background: var(--tab-bg);
      border: 1px solid var(--tab-border); cursor: pointer;
      font-size: 12px; font-weight: 700; color: var(--text-main);
      transition: background .15s; gap: 8px;
      -webkit-tap-highlight-color: transparent;
    }
    .calc-hist-item:hover { background: rgba(196,152,80,.10); }
    .calc-hist-expr { color: var(--text-muted); font-size: 11px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .calc-hist-result { font-weight: 900; color: var(--primary-brown); white-space: nowrap; }

    /* ── 공유 버튼 ── */
    .share-bar {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 10px 4px; flex-wrap: wrap; justify-content: flex-end;
    }
    .share-btn {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 6px 13px; border-radius: 999px;
      border: 1.5px solid var(--tab-border); background: var(--tab-bg);
      color: var(--text-main); font-size: 12px; font-weight: 800;
      cursor: pointer; transition: all .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .share-btn:hover { background: rgba(196,152,80,.10); border-color: var(--primary-light); }
    .share-btn.kakao { background: #FEE500; border-color: #FEE500; color: #3C1E1E; }
    .share-btn.kakao:hover { background: #f0d800; }

    /* ══ 시세 변동 알림 배너 ══ */
    .price-alert-banner {
      display: none; align-items: center; gap: 8px;
      padding: 9px 14px; margin: 6px 0 0;
      border-radius: 12px; font-size: 12.5px; font-weight: 700;
      animation: slideDown .3s ease;
    }
    @keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
    .price-alert-banner.up   { background:rgba(46,204,122,.12); border:1px solid rgba(46,204,122,.28); color:#0d6b50; }
    .price-alert-banner.down { background:rgba(231,76,60,.10);  border:1px solid rgba(231,76,60,.25);  color:#c82b2b; }
    .price-alert-banner.show { display: flex; }
    .pal-icon { font-size: 16px; }
    .pal-text { flex: 1; line-height: 1.4; }
    .pal-close { background:none;border:none;cursor:pointer;font-size:14px;color:inherit;padding:0;opacity:.6; }

    /* ── 김치프리미엄 패널 ── */
    .kimchi-bar {
      background: linear-gradient(135deg, rgba(255,140,90,0.06), rgba(196,160,110,0.04));
      border: 1px solid rgba(255,140,90,0.20);
      border-radius: 14px;
      padding: 10px 12px;
      margin: 10px 0 0;
    }
    body.dark-mode .kimchi-bar {
      background: linear-gradient(135deg, rgba(255,140,90,0.10), rgba(196,160,110,0.06));
      border-color: rgba(255,140,90,0.30);
    }
    .kimchi-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .kimchi-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--primary-brown);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .kimchi-meta {
      font-size: 10px;
      color: var(--text-muted, #9b8a76);
      font-weight: 600;
    }
    .kimchi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }
    .kimchi-item {
      background: var(--card-bg);
      border: 1px solid rgba(196,160,110,0.18);
      border-radius: 10px;
      padding: 7px 6px;
      text-align: center;
      transition: transform 0.15s ease;
    }
    .kimchi-item:active { transform: scale(0.97); }
    .kimchi-coin {
      font-size: 10.5px;
      font-weight: 800;
      color: var(--text-muted, #9b8a76);
      margin-bottom: 2px;
    }
    .kimchi-pct {
      font-size: 14.5px;
      font-weight: 900;
      letter-spacing: -0.5px;
    }
    .kimchi-pct.up   { color: #16a34a; }
    .kimchi-pct.down { color: #dc2626; }
    .kimchi-pct.flat { color: var(--text-muted, #9b8a76); }
    .kimchi-pct.loading { color: var(--text-muted, #9b8a76); opacity: 0.5; }
    .kimchi-price {
      font-size: 9.5px;
      color: var(--text-muted, #9b8a76);
      font-weight: 600;
      margin-top: 1px;
      letter-spacing: -0.2px;
    }

    /* ── 시뮬레이터 (평균단가 탭 내장) ── */
    .sim-section {
      margin-top: 14px;
      padding: 14px;
      background: var(--input-bg);
      border: 1px solid rgba(196,160,110,0.18);
      border-radius: 14px;
    }
    .sim-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .sim-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--primary-brown);
    }
    .sim-toggle {
      background: none;
      border: 1px solid rgba(176,141,106,0.25);
      color: var(--text-muted);
      border-radius: 8px;
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    .sim-toggle:active { transform: scale(0.95); }
    .sim-body { display: none; }
    .sim-body.show { display: block; animation: simSlideDown 0.25s ease; }
    @keyframes simSlideDown {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .sim-mode-row {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
    }
    .sim-mode-btn {
      flex: 1;
      padding: 7px 8px;
      border: 1px solid rgba(176,141,106,0.25);
      background: transparent;
      color: var(--primary-brown);
      border-radius: 8px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .sim-mode-btn.active {
      background: linear-gradient(135deg, var(--primary-brown), var(--primary-light));
      color: white;
      border-color: transparent;
    }
    .sim-slider-wrap { margin-bottom: 12px; }
    .sim-slider-label {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 6px;
      font-weight: 600;
    }
    .sim-slider {
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
      height: 6px;
      border-radius: 3px;
      background: rgba(196,160,110,0.18);
      outline: none;
    }
    .sim-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary-brown), var(--primary-light));
      box-shadow: 0 2px 8px rgba(138,94,46,0.35);
      cursor: pointer;
    }
    .sim-slider::-moz-range-thumb {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--primary-brown);
      border: none;
      cursor: pointer;
    }
    .sim-price-input {
      width: 100%;
      padding: 9px 12px;
      border: 1px solid rgba(176,141,106,0.25);
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      background: var(--card-bg);
      color: var(--text-main);
      margin-bottom: 12px;
      box-sizing: border-box;
    }
    .sim-result {
      background: var(--card-bg);
      border-radius: 12px;
      padding: 12px;
      border: 1px solid rgba(196,160,110,0.22);
    }
    .sim-result-row {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      font-size: 12px;
    }
    .sim-result-label { color: var(--text-muted); font-weight: 600; }
    .sim-result-val { font-weight: 800; color: var(--text-main); }
    .sim-result-row.profit .sim-result-val { font-size: 16px; font-weight: 900; }
    .sim-result-row.profit.up .sim-result-val   { color: #16a34a; }
    .sim-result-row.profit.down .sim-result-val { color: #dc2626; }
    .sim-empty {
      text-align: center;
      font-size: 12px;
      color: var(--text-muted);
      padding: 16px 8px;
      line-height: 1.5;
    }

    /* ── 공유 카드 ── */
    .share-trigger-btn {
      background: rgba(141,103,58,0.08);
      color: var(--primary-brown);
      border: 1px solid rgba(176,141,106,0.25);
      border-radius: 8px;
      padding: 4px 9px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      transition: transform 0.1s ease;
      margin-left: 6px;
    }
    .share-trigger-btn:active { transform: scale(0.94); }
    .share-overlay {
      position: fixed;
      inset: 0;
      z-index: 1450;
      background: rgba(14, 14, 18, 0.55);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .share-overlay[hidden] { display: none !important; }
    .share-card {
      width: min(100%, 400px);
      max-height: 92vh;
      overflow-y: auto;
      background: var(--card-bg);
      border-radius: 20px;
      border: 1px solid rgba(196,160,110,0.22);
      box-shadow: 0 20px 56px rgba(0,0,0,0.22);
      padding: 20px 18px 16px;
    }
    .share-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .share-title {
      font-size: 15px;
      font-weight: 900;
      color: var(--primary-brown);
      margin: 0;
    }
    .share-canvas-wrap {
      width: 100%;
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 12px;
      background: #f5f1eb;
      box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    }
    .share-canvas-wrap canvas {
      width: 100%;
      height: auto;
      display: block;
    }
    .share-section-label {
      font-size: 10.5px;
      font-weight: 800;
      color: var(--text-muted, #9b8a76);
      letter-spacing: 0.8px;
      text-transform: uppercase;
      margin: 4px 2px 6px;
    }

    .share-custom-input {
      width: 100%;
      padding: 10px 12px;
      background: var(--input-bg);
      border: 1px solid rgba(176,141,106,0.25);
      border-radius: 10px;
      color: var(--text-main);
      font-size: 13.5px;
      font-weight: 500;
      margin-bottom: 14px;
      outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
      font-family: inherit;
    }
    .share-custom-input::placeholder {
      color: var(--text-muted, #9b8a76);
      font-weight: 400;
    }
    .share-custom-input:focus {
      border-color: var(--primary-brown);
      box-shadow: 0 0 0 3px rgba(138,94,46,0.12);
    }

    /* QR 섹션 */
    .share-qr-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px;
      background: var(--input-bg);
      border: 1px solid rgba(176,141,106,0.18);
      border-radius: 12px;
      margin-bottom: 14px;
    }
    .share-qr-wrap[hidden] { display: none !important; }
    .share-qr-code {
      flex-shrink: 0;
      width: 110px;
      height: 110px;
      background: white;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid rgba(176,141,106,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(120,80,30,0.05);
    }
    .share-qr-code canvas,
    .share-qr-code img {
      width: 100% !important;
      height: 100% !important;
      display: block;
      image-rendering: pixelated;  /* QR 선명도 유지 */
      -ms-interpolation-mode: nearest-neighbor;
    }
    .share-qr-info {
      flex: 1;
      min-width: 0;
    }
    .share-qr-label {
      font-size: 11.5px;
      font-weight: 800;
      color: var(--primary-brown);
      margin-bottom: 3px;
    }
    .share-qr-desc {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.5;
      word-break: break-all;
    }

    /* 🎙️ 음성 입력 버튼 */
    .voice-btn {
      position: absolute;
      left: calc(50% - 78px);
      top: 50%;
      transform: translateY(-50%);
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1.5px solid rgba(176,141,106,0.35);
      background: var(--card-bg);
      color: var(--primary-brown);
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      padding: 0;
      line-height: 1;
    }
    .voice-btn[hidden] { display: none !important; }
    .voice-btn:hover {
      background: rgba(141,103,58,0.08);
      transform: translateY(-50%) scale(1.05);
    }
    .voice-btn:active { transform: translateY(-50%) scale(0.92); }
    .voice-btn.listening {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      border-color: transparent;
      color: white;
      box-shadow: 0 0 0 0 rgba(239,68,68,0.5);
      animation: voicePulse 1.3s ease-out infinite;
    }
    @keyframes voicePulse {
      0%   { box-shadow: 0 0 0 0   rgba(239,68,68,0.55); }
      70%  { box-shadow: 0 0 0 14px rgba(239,68,68,0);    }
      100% { box-shadow: 0 0 0 0   rgba(239,68,68,0);    }
    }

    .swap-container {
      position: relative;
    }

    /* 음성 모달 */
    .voice-overlay {
      position: fixed;
      inset: 0;
      z-index: 1500;
      background: rgba(14,14,18,0.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .voice-overlay[hidden] { display: none !important; }
    .voice-card {
      width: min(100%, 360px);
      background: var(--card-bg);
      border-radius: 24px;
      padding: 32px 24px 24px;
      border: 1px solid rgba(196,160,110,0.22);
      box-shadow: 0 20px 56px rgba(0,0,0,0.24);
      text-align: center;
      position: relative;
    }
    .voice-close {
      position: absolute;
      top: 10px; right: 12px;
      background: none;
      border: none;
      font-size: 20px;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 8px;
      line-height: 1;
    }
    .voice-close:active { background: rgba(141,103,58,0.08); }
    .voice-mic-wrap {
      position: relative;
      width: 132px; height: 132px;
      margin: 0 auto 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .voice-mic-icon {
      width: 72px; height: 72px;
      background: linear-gradient(135deg, var(--primary-brown), var(--primary-light));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      box-shadow: 0 8px 24px rgba(138,94,46,0.35);
      position: relative;
      z-index: 3;
      transition: transform 0.12s ease;
    }
    .voice-mic-icon.voice-active {
      transform: scale(1.05);
    }
    .voice-waveform {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      z-index: 1;
      opacity: 0.9;
    }
    .voice-mic-pulse {
      position: absolute;
      inset: 18px;
      border-radius: 50%;
      background: rgba(138,94,46,0.35);
      animation: voicePulseRing 1.8s ease-out infinite;
      z-index: 2;
    }
    .voice-mic-pulse-2 {
      animation-delay: 0.6s;
    }
    @keyframes voicePulseRing {
      0%   { transform: scale(0.8); opacity: 0.6; }
      100% { transform: scale(1.8); opacity: 0;   }
    }
    .voice-status {
      font-size: 15px;
      font-weight: 800;
      color: var(--primary-brown);
      margin-bottom: 10px;
      letter-spacing: -0.3px;
    }
    .voice-transcript-wrap {
      margin-bottom: 14px;
    }
    .voice-transcript {
      font-size: 20px;
      font-weight: 700;
      color: var(--text-main);
      min-height: 60px;
      padding: 14px 16px;
      background: var(--input-bg);
      border-radius: 12px;
      line-height: 1.35;
      word-break: break-word;
      text-align: center;
      letter-spacing: -0.2px;
      transition: background 0.15s ease;
    }
    .voice-transcript.is-final {
      background: linear-gradient(135deg, rgba(138,94,46,0.08), rgba(212,175,111,0.12));
      color: var(--primary-brown);
      font-weight: 800;
    }
    .voice-transcript .interim {
      opacity: 0.55;
      font-style: italic;
      font-weight: 500;
    }
    .voice-transcript .final-part {
      font-weight: 800;
    }
    .voice-transcript.empty {
      color: var(--text-muted);
      font-size: 16px;
      font-weight: 500;
      font-style: italic;
    }
    .voice-examples {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.55;
      text-align: left;
      max-width: 300px;
      margin: 0 auto;
    }
    .voice-examples b {
      color: var(--primary-brown);
      font-weight: 800;
      font-size: 10.5px;
      margin-right: 4px;
    }
    .voice-examples span {
      color: var(--primary-brown);
      font-weight: 600;
    }

    /* 공유 히스토리 */
    .share-history-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 4px 2px 8px;
    }
    .share-history-head[hidden] { display: none !important; }
    .share-history-clear {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 10.5px;
      font-weight: 700;
      cursor: pointer;
      padding: 3px 8px;
      border-radius: 6px;
      letter-spacing: -0.2px;
    }
    .share-history-clear:hover { color: #dc2626; background: rgba(220,38,38,0.08); }
    .share-history-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      margin-bottom: 14px;
    }
    .share-history-grid[hidden] { display: none !important; }
    .share-history-item {
      position: relative;
      aspect-ratio: 1 / 1;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      border: 1.5px solid rgba(176,141,106,0.22);
      background: var(--input-bg);
      transition: transform 0.15s ease, border-color 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .share-history-item:hover {
      border-color: var(--primary-brown);
      transform: translateY(-2px);
    }
    .share-history-item:active { transform: scale(0.96); }
    .share-history-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .share-history-item .share-history-time {
      position: absolute;
      bottom: 2px;
      left: 2px;
      right: 2px;
      font-size: 8.5px;
      color: white;
      text-align: center;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(3px);
      border-radius: 5px;
      padding: 1px 3px;
      font-weight: 700;
      letter-spacing: -0.2px;
    }
    .share-history-item .share-history-del {
      position: absolute;
      top: 3px; right: 3px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: rgba(0,0,0,0.5);
      color: white;
      border: none;
      font-size: 11px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0; line-height: 1;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    .share-history-item:hover .share-history-del { opacity: 1; }
    @media (hover: none) {
      /* 모바일(터치): 항상 표시 */
      .share-history-item .share-history-del { opacity: 0.8; }
    }

    .share-options {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
    }
    .share-opt-btn {
      flex: 1;
      padding: 6px 4px;
      border: 1px solid rgba(176,141,106,0.25);
      background: transparent;
      color: var(--primary-brown);
      border-radius: 8px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    .share-opt-btn.active {
      background: linear-gradient(135deg, var(--primary-brown), var(--primary-light));
      color: white;
      border-color: transparent;
    }
    .share-actions {
      display: flex;
      gap: 8px;
    }
    .share-action-btn {
      flex: 1;
      min-height: 42px;
      border-radius: 11px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      border: none;
      transition: transform 0.1s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .share-action-btn.primary {
      background: linear-gradient(135deg, var(--primary-brown), var(--primary-light));
      color: white;
      box-shadow: 0 4px 14px rgba(138,94,46,0.28);
    }
    .share-action-btn.secondary {
      background: rgba(141,103,58,0.08);
      color: var(--primary-brown);
      border: 1px solid rgba(176,141,106,0.25);
    }
    .share-action-btn:active { transform: scale(0.96); }

    /* ══ 가격 알림 설정 ══ */
    .alert-setting-wrap {
      border: 1.5px solid var(--tab-border); border-radius: 14px;
      overflow: hidden; margin: 8px 0;
    }
    .alert-setting-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px; background: var(--tab-bg);
      border-bottom: 1px solid var(--tab-border);
      font-size: 12.5px; font-weight: 900; color: var(--primary-brown);
    }
    .alert-setting-body { padding: 12px 14px; }
    .alert-input-row {
      display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: nowrap;
    }
    .alert-input {
      height: 36px; border-radius: 8px;
      border: 1.5px solid var(--tab-border); background: var(--bg-main);
      color: var(--text-main); font-size: 13px; font-weight: 700;
      padding: 0 8px; outline: none; min-width: 0;
    }
    .alert-input:focus { border-color: var(--primary-light); }
    .alert-set-btn {
      flex: 0 0 auto;
      height: 36px; padding: 0 12px; border-radius: 8px;
      background: linear-gradient(135deg, var(--primary-light), var(--primary-brown));
      color: white; font-size: 12px; font-weight: 800; border: none; cursor: pointer;
      white-space: nowrap;
    }
    .alert-list { display: flex; flex-direction: column; gap: 5px; }
    .alert-item {
      display: flex; align-items: center; gap: 8px; padding: 7px 10px;
      border-radius: 8px; background: var(--tab-bg); border: 1px solid var(--tab-border);
      font-size: 12.5px; font-weight: 700;
    }
    .alert-item-badge {
      padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 900;
    }
    .alert-item-badge.above { background: rgba(46,204,122,.15); color: #0d6b50; }
    .alert-item-badge.below { background: rgba(231,76,60,.10); color: #c82b2b; }
    .alert-item-price { flex: 1; }
    .alert-item-del { background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:13px; }

    /* ══ 평균단가 계산기 ══ */
    .avg-panel { padding: 14px; }
    .avg-entries { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
    .avg-entry-row {
      display: flex; align-items: center; gap: 6px;
    }
    .avg-entry-input {
      flex: 1; height: 34px; border-radius: 8px;
      border: 1.5px solid var(--tab-border); background: var(--bg-main);
      color: var(--text-main); font-size: 12.5px; font-weight: 700;
      padding: 0 8px; outline: none; min-width: 0;
    }
    .avg-entry-label { font-size: 10px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
    .avg-entry-del { background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:14px;flex:0 0 20px; }
    .avg-add-btn {
      width: 100%; height: 34px; border-radius: 8px;
      border: 1.5px dashed var(--tab-border); background: transparent;
      color: var(--primary-brown); font-size: 12.5px; font-weight: 800;
      cursor: pointer; margin-bottom: 10px;
    }
    .avg-result-box {
      border-radius: 12px; padding: 12px 14px;
      background: var(--tab-bg); border: 1px solid var(--tab-border);
    }
    .avg-result-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 5px 0; border-bottom: 1px solid var(--line-color);
      font-size: 13px;
    }
    .avg-result-row:last-child { border-bottom: none; }
    .avg-result-label { font-weight: 600; color: var(--text-muted); font-size: 12px; }
    .avg-result-val { font-weight: 900; color: var(--primary-brown); }

    /* ══ 목표가 계산기 ══ */
    .target-panel { padding: 14px; }
    .target-input-group { margin-bottom: 10px; }
    .target-label { font-size: 11.5px; font-weight: 800; color: var(--text-muted); margin-bottom: 5px; }
    .target-input-row { display: flex; align-items: center; gap: 6px; }
    .target-input {
      flex: 1; height: 38px; border-radius: 10px;
      border: 1.5px solid var(--tab-border); background: var(--bg-main);
      color: var(--text-main); font-size: 13px; font-weight: 700;
      padding: 0 10px; outline: none;
    }
    .target-input:focus { border-color: var(--primary-light); }
    .target-unit { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
    .target-result {
      border-radius: 12px; padding: 12px 14px;
      background: linear-gradient(135deg, rgba(196,152,80,.08), rgba(196,152,80,.03));
      border: 1px solid var(--tab-border); margin-top: 4px;
    }
    .target-result-main { font-size: 22px; font-weight: 900; color: var(--primary-brown); letter-spacing: -1px; }
    .target-result-sub { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-top: 3px; }
    .target-result-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
    .target-result-row {
      display: flex; justify-content: space-between;
      font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--line-color);
    }
    .target-result-row:last-child { border-bottom: none; }

    /* ── PC 대응 (680px 이상) ── */
    @media (min-width: 681px) {
      body {
        padding: 20px 16px;
      }
      .toggle-tabs {
        grid-template-columns: repeat(7, 1fr);
      }
      .toggle-tabs::before {
        display: none;
      }
      .tab-btn {
        font-size: 12px;
        padding: 8px 6px;
      }
      .header-top h1.title {
        font-size: 22px;
      }
      .rate-box {
        padding: 16px 18px;
      }
      .rate-usd {
        font-size: 26px;
      }
      .exchange-bar {
        justify-content: flex-start;
        gap: 10px;
      }
      .exchange-btn {
        font-size: 13.5px;
        padding: 9px 20px;
      }
      .quick-amounts {
        display: flex;
        gap: 8px;
      }
      .quick-btn {
        flex: 1;
      }
      .calc-panel {
        min-height: 320px;
      }
      .normal-calc-grid {
        max-width: 100%;
      }
      .alert-setting-wrap {
        max-width: 100%;
      }
      .news-feed {
        max-width: 100%;
      }
    }

    /* ══ 포트폴리오 차트 ══ */
    .port-chart-wrap {
      margin: 10px 0 4px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .port-chart-title {
      font-size: 11px; font-weight: 800; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
    }
    .port-pie-row {
      display: flex; align-items: center; gap: 12px;
    }
    .port-pie-canvas { flex: 0 0 100px; height: 100px; }
    .port-legend { display: flex; flex-direction: column; gap: 5px; flex: 1; }
    .port-legend-item {
      display: flex; align-items: center; gap: 6px;
      font-size: 11.5px; font-weight: 700;
    }
    .port-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
    .port-legend-label { flex: 1; color: var(--text-main); }
    .port-legend-pct { color: var(--text-muted); font-size: 11px; }
    .port-bar-list { display: flex; flex-direction: column; gap: 5px; }
    .port-bar-row { display: flex; flex-direction: column; gap: 2px; }
    .port-bar-meta {
      display: flex; justify-content: space-between;
      font-size: 11px; font-weight: 700;
    }
    .port-bar-bg {
      height: 7px; border-radius: 999px;
      background: rgba(196,152,80,.12); overflow: hidden;
    }
    .port-bar-fill {
      height: 100%; border-radius: 999px;
      transition: width .5s cubic-bezier(.22,1,.36,1);
    }

    /* ══ 🎯 v111: 강화된 대시보드 ══ */
    .dash-summary-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin: 0 0 10px;
    }
    .dash-card {
      background: linear-gradient(135deg, rgba(196,152,80,.07), rgba(196,152,80,.02));
      border: 1px solid rgba(196,152,80,.16);
      border-radius: 12px;
      padding: 10px 12px;
      min-height: 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .dash-card:active { transform: scale(0.98); }
    .dash-card-main {
      background: linear-gradient(135deg, rgba(138,94,46,.1), rgba(212,175,111,.05));
      border-color: rgba(138,94,46,.22);
    }
    .dash-card-best {
      background: linear-gradient(135deg, rgba(46,204,122,.1), rgba(46,204,122,.02));
      border-color: rgba(46,204,122,.25);
    }
    .dash-card-worst {
      background: linear-gradient(135deg, rgba(231,76,60,.08), rgba(231,76,60,.02));
      border-color: rgba(231,76,60,.22);
    }
    .dash-card-label {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--text-muted);
      margin-bottom: 3px;
      letter-spacing: .02em;
    }
    .dash-card-value {
      font-size: 15px;
      font-weight: 900;
      color: var(--text-main);
      line-height: 1.1;
      letter-spacing: -0.3px;
    }
    .dash-card-value.profit { color: #2ecc7a; }
    .dash-card-value.loss { color: #e74c3c; }
    .dash-card-sub {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 2px;
      font-weight: 600;
    }
    .dash-card-sub.profit { color: #2ecc7a; font-weight: 700; }
    .dash-card-sub.loss { color: #e74c3c; font-weight: 700; }

    /* 집중도 경고 */
    .dash-warn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(245,158,11,.1);
      border: 1px solid rgba(245,158,11,.3);
      border-radius: 10px;
      font-size: 11.5px;
      font-weight: 700;
      color: #b8860b;
      margin-bottom: 6px;
    }
    .dash-warn-icon { font-size: 14px; }
    body.dark-mode .dash-warn {
      background: rgba(245,158,11,.15);
      color: #fbbf24;
    }

    /* 24시간 추이 차트 */
    .dash-trend-wrap {
      position: relative;
      background: rgba(196,152,80,.04);
      border: 1px solid rgba(196,152,80,.12);
      border-radius: 10px;
      padding: 8px;
      min-height: 96px;
    }
    .dash-trend-canvas {
      width: 100%;
      height: 80px;
      display: block;
    }
    .dash-trend-empty {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-size: 11.5px;
      color: var(--text-muted);
      font-weight: 600;
      text-align: center;
      pointer-events: none;
    }
    .dash-trend-empty span {
      font-size: 20px;
      display: block;
      margin-bottom: 3px;
      opacity: 0.5;
    }

    /* 정렬 가능한 테이블 */
    .dash-table-wrap {
      border: 1px solid rgba(196,152,80,.15);
      border-radius: 12px;
      overflow: hidden;
      background: var(--card-bg, #fff);
    }
    .dash-table-header {
      display: flex;
      gap: 2px;
      padding: 6px 8px;
      background: rgba(196,152,80,.06);
      border-bottom: 1px solid rgba(196,152,80,.12);
    }
    .dash-sort-btn {
      flex: 1;
      padding: 5px 8px;
      border: none;
      background: transparent;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .dash-sort-btn.active {
      background: var(--primary-brown, #8a5e2e);
      color: #fff;
    }
    .dash-sort-btn:hover:not(.active) {
      background: rgba(196,152,80,.12);
      color: var(--text-main);
    }
    .dash-table {
      display: flex;
      flex-direction: column;
      max-height: 220px;
      overflow-y: auto;
    }
    .dash-table-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 10px;
      padding: 8px 12px;
      border-bottom: 1px solid rgba(196,152,80,.08);
      font-size: 11.5px;
      align-items: center;
    }
    .dash-table-row:last-child { border-bottom: none; }
    .dash-table-row:hover { background: rgba(196,152,80,.05); }
    .dash-table-coin {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 800;
      color: var(--text-main);
    }
    .dash-table-coin-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      flex: 0 0 8px;
    }
    .dash-table-coin-meta {
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 600;
      margin-left: 2px;
    }
    .dash-table-value {
      font-weight: 800;
      color: var(--primary-brown, #8a5e2e);
      text-align: right;
      font-size: 11.5px;
      min-width: 72px;
    }
    .dash-table-weight {
      font-weight: 700;
      color: var(--text-muted);
      text-align: right;
      font-size: 10.5px;
      min-width: 40px;
    }
    .dash-table-change {
      font-weight: 800;
      text-align: right;
      font-size: 11px;
      min-width: 58px;
    }
    .dash-table-change.profit { color: #2ecc7a; }
    .dash-table-change.loss { color: #e74c3c; }
    .dash-table-change.zero { color: var(--text-muted); }
    body.dark-mode .dash-table-wrap {
      border-color: rgba(255,200,120,.15);
      background: rgba(28,23,18,.6);
    }
    body.dark-mode .dash-table-header {
      background: rgba(255,200,120,.05);
      border-bottom-color: rgba(255,200,120,.1);
    }

    /* 모바일 최적화 */
    @media (max-width: 420px) {
      .dash-summary-grid { gap: 6px; }
      .dash-card { padding: 8px 10px; min-height: 58px; }
      .dash-card-value { font-size: 13.5px; }
      .dash-card-label { font-size: 9.5px; }
    }

    /* ══ 📝 v113: 투자 메모 관리 화면 ══ */
    .memo-mgr-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 99998;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: memoFade 0.2s ease-out;
    }
    @keyframes memoFade { from { opacity: 0; } to { opacity: 1; } }
    .memo-mgr-sheet {
      background: var(--bg-card, #fff);
      width: 100%;
      max-width: 560px;
      max-height: 90vh;
      border-radius: 20px 20px 0 0;
      display: flex;
      flex-direction: column;
      animation: memoSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
      box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
    }
    @keyframes memoSlideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    @media (min-width: 600px) {
      .memo-mgr-overlay { align-items: center; }
      .memo-mgr-sheet {
        border-radius: 20px;
        max-height: 80vh;
      }
    }
    body.dark-mode .memo-mgr-sheet {
      background: #1c1712;
      color: #ede4d8;
    }
    .memo-mgr-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 12px;
      border-bottom: 1px solid rgba(196,152,80,.15);
    }
    .memo-mgr-title {
      margin: 0;
      font-size: 17px;
      font-weight: 900;
      color: var(--primary-brown, #8a5e2e);
    }
    .memo-mgr-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(0,0,0,0.06);
      border: none;
      font-size: 14px;
      cursor: pointer;
      color: var(--text-muted);
    }
    body.dark-mode .memo-mgr-close {
      background: rgba(255,255,255,0.08);
      color: #ede4d8;
    }
    .memo-mgr-close:hover { background: rgba(0,0,0,0.1); }

    /* 툴바 */
    .memo-mgr-toolbar {
      display: flex;
      gap: 8px;
      padding: 10px 16px;
    }
    .memo-search-wrap {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
      background: rgba(196,152,80,.08);
      border: 1px solid rgba(196,152,80,.18);
      border-radius: 10px;
      padding: 0 10px;
    }
    .memo-search-icon {
      font-size: 13px;
      margin-right: 6px;
      opacity: 0.6;
    }
    .memo-search-input {
      flex: 1;
      border: none;
      background: transparent;
      padding: 9px 4px;
      font-size: 13.5px;
      color: var(--text-main);
      outline: none;
    }
    .memo-search-clear {
      border: none;
      background: rgba(0,0,0,0.08);
      color: var(--text-muted);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      font-size: 10px;
      cursor: pointer;
      padding: 0;
      line-height: 1;
    }
    .memo-sort-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px solid rgba(196,152,80,.18);
      background: rgba(196,152,80,.08);
      color: var(--primary-brown);
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .memo-sort-btn:hover { transform: scale(1.05); }

    /* 태그 필터 */
    .memo-tags-wrap {
      padding: 0 16px 8px;
    }
    .memo-tag-list {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
    }
    .memo-tag-list::-webkit-scrollbar { display: none; }
    .memo-tag-chip {
      flex: 0 0 auto;
      padding: 4px 12px;
      border-radius: 999px;
      border: 1px solid rgba(196,152,80,.25);
      background: transparent;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-muted);
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s;
    }
    .memo-tag-chip.active {
      background: var(--primary-brown, #8a5e2e);
      color: #fff;
      border-color: transparent;
    }
    .memo-tag-chip:hover:not(.active) {
      background: rgba(196,152,80,.1);
    }

    /* 통계 */
    .memo-mgr-stats {
      padding: 0 16px 6px;
      font-size: 11.5px;
      color: var(--text-muted);
      font-weight: 600;
    }

    /* 리스트 */
    .memo-mgr-list {
      flex: 1;
      overflow-y: auto;
      padding: 4px 16px 10px;
    }
    .memo-card {
      background: rgba(196,152,80,.05);
      border: 1px solid rgba(196,152,80,.15);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .memo-card:hover {
      background: rgba(196,152,80,.1);
      transform: translateY(-1px);
    }
    body.dark-mode .memo-card {
      background: rgba(255,200,120,.04);
      border-color: rgba(255,200,120,.12);
    }
    .memo-card-date {
      font-size: 10.5px;
      color: var(--text-muted);
      font-weight: 700;
      margin-bottom: 4px;
    }
    .memo-card-content {
      font-size: 13px;
      color: var(--text-main);
      line-height: 1.55;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .memo-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 6px;
    }
    .memo-card-tag {
      font-size: 10px;
      padding: 1px 7px;
      border-radius: 4px;
      background: rgba(196,152,80,.18);
      color: var(--primary-brown, #8a5e2e);
      font-weight: 700;
    }
    body.dark-mode .memo-card-tag {
      background: rgba(212,175,111,.25);
      color: #d4af6f;
    }

    /* 빈 상태 */
    .memo-mgr-empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 30px;
      text-align: center;
    }
    .memo-empty-icon {
      font-size: 48px;
      margin-bottom: 12px;
      opacity: 0.4;
    }
    .memo-empty-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text-main);
      margin-bottom: 6px;
    }
    .memo-empty-desc {
      font-size: 12.5px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* 푸터 */
    .memo-mgr-footer {
      display: flex;
      gap: 8px;
      padding: 10px 16px 14px;
      border-top: 1px solid rgba(196,152,80,.1);
    }
    .memo-footer-btn {
      flex: 1;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid transparent;
      font-size: 12.5px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.15s;
    }
    .memo-footer-btn-secondary {
      background: rgba(196,152,80,.1);
      color: var(--primary-brown, #8a5e2e);
      border-color: rgba(196,152,80,.2);
    }
    .memo-footer-btn-secondary:hover {
      background: rgba(196,152,80,.18);
    }
    .memo-footer-btn-danger {
      background: rgba(239,68,68,.08);
      color: #dc2626;
      border-color: rgba(239,68,68,.2);
    }
    .memo-footer-btn-danger:hover {
      background: rgba(239,68,68,.15);
    }
    body.dark-mode .memo-footer-btn-danger {
      background: rgba(239,68,68,.15);
      color: #f87171;
    }

    /* 메모 상세 모달 */
    .memo-detail-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      animation: memoFade 0.2s ease-out;
    }
    .memo-detail-sheet {
      background: var(--bg-card, #fff);
      width: 100%;
      max-width: 460px;
      max-height: 85vh;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: memoSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
    }
    body.dark-mode .memo-detail-sheet {
      background: #1c1712;
      color: #ede4d8;
    }
    .memo-detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: rgba(196,152,80,.06);
      border-bottom: 1px solid rgba(196,152,80,.1);
    }
    .memo-detail-date {
      font-size: 12.5px;
      font-weight: 800;
      color: var(--primary-brown, #8a5e2e);
    }
    .memo-detail-body {
      flex: 1;
      overflow-y: auto;
      padding: 14px 16px;
    }
    .memo-detail-section {
      margin-bottom: 14px;
    }
    .memo-detail-label {
      font-size: 11.5px;
      font-weight: 800;
      color: var(--text-muted);
      margin-bottom: 6px;
      letter-spacing: .02em;
    }
    .memo-detail-textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid rgba(196,152,80,.2);
      border-radius: 10px;
      background: rgba(196,152,80,.04);
      font-size: 13.5px;
      font-family: inherit;
      color: var(--text-main);
      line-height: 1.6;
      resize: vertical;
      outline: none;
      transition: border-color 0.15s;
    }
    .memo-detail-textarea:focus {
      border-color: var(--primary-brown, #8a5e2e);
    }
    .memo-detail-analysis {
      padding: 10px 12px;
      background: rgba(59,130,246,.05);
      border: 1px solid rgba(59,130,246,.15);
      border-radius: 10px;
      font-size: 12.5px;
      color: var(--text-main);
      line-height: 1.65;
      white-space: pre-wrap;
      max-height: 260px;
      overflow-y: auto;
    }
    body.dark-mode .memo-detail-analysis {
      background: rgba(59,130,246,.1);
      color: #ede4d8;
    }
    .memo-detail-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 4px;
    }
    .memo-detail-actions {
      display: flex;
      gap: 6px;
      padding: 10px 16px 14px;
      border-top: 1px solid rgba(196,152,80,.1);
    }
    .memo-detail-btn {
      flex: 1;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid rgba(196,152,80,.2);
      background: rgba(196,152,80,.06);
      font-size: 12.5px;
      font-weight: 800;
      color: var(--text-main);
      cursor: pointer;
      transition: all 0.15s;
    }
    .memo-detail-btn:hover {
      background: rgba(196,152,80,.12);
    }
    .memo-detail-btn-save {
      background: var(--primary-brown, #8a5e2e);
      color: #fff;
      border-color: transparent;
    }
    .memo-detail-btn-save:hover {
      background: #6e4a24;
    }
    .memo-detail-btn-danger {
      background: rgba(239,68,68,.08);
      color: #dc2626;
      border-color: rgba(239,68,68,.2);
    }
    .memo-detail-btn-danger:hover {
      background: rgba(239,68,68,.15);
    }
    body.dark-mode .memo-detail-btn {
      color: #ede4d8;
      background: rgba(255,200,120,.05);
      border-color: rgba(255,200,120,.15);
    }
    body.dark-mode .memo-detail-btn-danger {
      color: #f87171;
      background: rgba(239,68,68,.15);
    }

    /* ══ 💾 v114: 데이터 백업/복원 ══ */
    .backup-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 99998;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: memoFade 0.2s ease-out;
    }
    .backup-sheet {
      background: var(--bg-card, #fff);
      width: 100%;
      max-width: 560px;
      max-height: 90vh;
      border-radius: 20px 20px 0 0;
      display: flex;
      flex-direction: column;
      animation: memoSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
      box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
      overflow: hidden;
    }
    @media (min-width: 600px) {
      .backup-overlay { align-items: center; }
      .backup-sheet {
        border-radius: 20px;
        max-height: 86vh;
      }
    }
    body.dark-mode .backup-sheet {
      background: #1c1712;
      color: #ede4d8;
    }
    .backup-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 12px;
      border-bottom: 1px solid rgba(196,152,80,.15);
    }
    .backup-title {
      margin: 0;
      font-size: 17px;
      font-weight: 900;
      color: var(--primary-brown, #8a5e2e);
    }

    /* 탭 */
    .backup-tabs {
      display: flex;
      padding: 6px;
      gap: 4px;
      background: rgba(196,152,80,.05);
      margin: 12px 16px 0;
      border-radius: 10px;
    }
    .backup-tab {
      flex: 1;
      padding: 8px 12px;
      border: none;
      background: transparent;
      font-size: 12.5px;
      font-weight: 800;
      color: var(--text-muted);
      border-radius: 7px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .backup-tab.active {
      background: var(--bg-card, #fff);
      color: var(--primary-brown, #8a5e2e);
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    body.dark-mode .backup-tab.active {
      background: #2a211b;
      color: #d4af6f;
    }

    /* 패널 */
    .backup-panel {
      flex: 1;
      overflow-y: auto;
      padding: 14px 16px 20px;
    }
    .backup-desc {
      font-size: 12.5px;
      color: var(--text-muted);
      margin: 0 0 12px;
      line-height: 1.55;
    }

    /* 카테고리 리스트 */
    .backup-category-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 16px;
    }
    .backup-category {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: rgba(196,152,80,.05);
      border: 1px solid rgba(196,152,80,.15);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .backup-category:hover {
      background: rgba(196,152,80,.1);
    }
    .backup-category input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: var(--primary-brown, #8a5e2e);
      flex: 0 0 18px;
      cursor: pointer;
    }
    .backup-cat-content {
      flex: 1;
    }
    .backup-cat-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--text-main);
    }
    .backup-cat-desc {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
      font-weight: 600;
    }
    body.dark-mode .backup-category {
      background: rgba(255,200,120,.04);
      border-color: rgba(255,200,120,.12);
    }

    /* 액션 버튼 */
    .backup-action-btn {
      width: 100%;
      padding: 12px 16px;
      border-radius: 12px;
      border: none;
      font-size: 13.5px;
      font-weight: 900;
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .backup-action-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .backup-action-primary {
      background: var(--primary-brown, #8a5e2e);
      color: #fff;
    }
    .backup-action-primary:hover:not(:disabled) {
      background: #6e4a24;
    }

    /* 파일 선택기 */
    .backup-file-picker {
      padding: 32px 20px;
      background: rgba(196,152,80,.05);
      border: 2px dashed rgba(196,152,80,.3);
      border-radius: 12px;
      text-align: center;
      cursor: pointer;
      transition: all 0.15s;
      margin-bottom: 12px;
    }
    .backup-file-picker:hover {
      background: rgba(196,152,80,.1);
      border-color: var(--primary-brown, #8a5e2e);
    }
    .backup-file-icon {
      font-size: 36px;
      opacity: 0.6;
      margin-bottom: 8px;
    }
    .backup-file-label {
      font-size: 14px;
      font-weight: 800;
      color: var(--text-main);
    }
    .backup-file-hint {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
      font-family: 'Courier New', monospace;
    }

    /* 미리보기 */
    .backup-preview {
      padding: 14px;
      background: rgba(46,204,122,.06);
      border: 1px solid rgba(46,204,122,.2);
      border-radius: 12px;
      margin-bottom: 12px;
    }
    body.dark-mode .backup-preview {
      background: rgba(46,204,122,.1);
    }
    .backup-preview-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .backup-preview-icon {
      font-size: 18px;
    }
    .backup-preview-title {
      font-size: 13.5px;
      font-weight: 900;
      color: #059669;
    }
    body.dark-mode .backup-preview-title {
      color: #34d399;
    }
    .backup-preview-meta {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-bottom: 10px;
      font-weight: 600;
    }
    .backup-preview-items {
      background: rgba(255,255,255,.6);
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 11.5px;
      color: var(--text-main);
      line-height: 1.7;
    }
    body.dark-mode .backup-preview-items {
      background: rgba(0,0,0,.25);
    }

    /* 모드 선택 */
    .backup-mode-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 14px 0 12px;
    }
    .backup-mode-opt {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      background: var(--bg-card, #fff);
      border: 1px solid rgba(196,152,80,.2);
      border-radius: 10px;
      cursor: pointer;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text-main);
      transition: all 0.15s;
    }
    .backup-mode-opt:hover {
      background: rgba(196,152,80,.05);
    }
    .backup-mode-opt input[type="radio"] {
      width: 16px;
      height: 16px;
      accent-color: var(--primary-brown, #8a5e2e);
      flex: 0 0 16px;
    }
    body.dark-mode .backup-mode-opt {
      background: #231a13;
      border-color: rgba(255,200,120,.15);
    }

    /* ══ 🔔 v115: 알림 히스토리 ══ */
    .alert-hist-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      background: #dc2626;
      color: #fff;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
      margin-right: 4px;
    }
    .alert-hist-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 99998;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: memoFade 0.2s ease-out;
    }
    .alert-hist-sheet {
      background: var(--bg-card, #fff);
      width: 100%;
      max-width: 560px;
      max-height: 90vh;
      border-radius: 20px 20px 0 0;
      display: flex;
      flex-direction: column;
      animation: memoSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
      box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
      overflow: hidden;
    }
    @media (min-width: 600px) {
      .alert-hist-overlay { align-items: center; }
      .alert-hist-sheet {
        border-radius: 20px;
        max-height: 80vh;
      }
    }
    body.dark-mode .alert-hist-sheet {
      background: #1c1712;
      color: #ede4d8;
    }
    .alert-hist-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 12px;
      border-bottom: 1px solid rgba(196,152,80,.15);
    }
    .alert-hist-title {
      margin: 0;
      font-size: 17px;
      font-weight: 900;
      color: var(--primary-brown, #8a5e2e);
    }

    /* 필터 칩 */
    .alert-hist-filters {
      display: flex;
      gap: 6px;
      padding: 10px 16px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .alert-hist-filters::-webkit-scrollbar { display: none; }
    .alert-hist-filter-chip {
      flex: 0 0 auto;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(196,152,80,.25);
      background: transparent;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-muted);
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s;
    }
    .alert-hist-filter-chip.active {
      background: var(--primary-brown, #8a5e2e);
      color: #fff;
      border-color: transparent;
    }
    .alert-hist-filter-chip:hover:not(.active) {
      background: rgba(196,152,80,.1);
    }

    /* 통계 */
    .alert-hist-stats {
      padding: 0 16px 6px;
      font-size: 11.5px;
      color: var(--text-muted);
      font-weight: 600;
    }

    /* 리스트 */
    .alert-hist-list {
      flex: 1;
      overflow-y: auto;
      padding: 4px 16px 10px;
    }
    .alert-hist-date {
      font-size: 11px;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .04em;
      padding: 10px 2px 6px;
      position: sticky;
      top: 0;
      background: var(--bg-card, #fff);
      z-index: 1;
    }
    body.dark-mode .alert-hist-date {
      background: #1c1712;
    }
    .alert-hist-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      background: rgba(196,152,80,.05);
      border: 1px solid rgba(196,152,80,.12);
      border-radius: 10px;
      margin-bottom: 6px;
      transition: all 0.15s;
    }
    .alert-hist-row:hover {
      background: rgba(196,152,80,.1);
    }
    body.dark-mode .alert-hist-row {
      background: rgba(255,200,120,.04);
      border-color: rgba(255,200,120,.12);
    }
    .alert-hist-row[data-type="target"] {
      border-left: 3px solid #2ecc7a;
    }
    .alert-hist-row[data-type="change"] {
      border-left: 3px solid #f59e0b;
    }
    .alert-hist-row[data-type="daily"] {
      border-left: 3px solid #3b82f6;
    }
    .alert-hist-row[data-type="custom"] {
      border-left: 3px solid #8b5cf6;
    }
    .alert-hist-row[data-type="portfolio"] {
      border-left: 3px solid #e74c3c;
    }
    .alert-hist-icon {
      font-size: 20px;
      line-height: 1.2;
      flex: 0 0 24px;
      text-align: center;
    }
    .alert-hist-body {
      flex: 1;
      min-width: 0;
    }
    .alert-hist-title {
      font-size: 12.5px;
      font-weight: 800;
      color: var(--text-main);
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .alert-hist-coin {
      background: rgba(196,152,80,.18);
      color: var(--primary-brown, #8a5e2e);
      padding: 1px 7px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 800;
    }
    body.dark-mode .alert-hist-coin {
      background: rgba(212,175,111,.25);
      color: #d4af6f;
    }
    .alert-hist-msg {
      font-size: 12px;
      color: var(--text-main);
      line-height: 1.5;
      word-break: break-word;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .alert-hist-time {
      font-size: 10.5px;
      color: var(--text-muted);
      font-weight: 600;
      margin-top: 3px;
    }
    .alert-hist-del {
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      border: none;
      background: rgba(0,0,0,.06);
      color: var(--text-muted);
      border-radius: 50%;
      font-size: 10px;
      cursor: pointer;
      opacity: 0.5;
      transition: all 0.15s;
    }
    .alert-hist-row:hover .alert-hist-del {
      opacity: 1;
    }
    .alert-hist-del:hover {
      background: rgba(239,68,68,.15);
      color: #dc2626;
    }
    body.dark-mode .alert-hist-del {
      background: rgba(255,255,255,.08);
    }

    /* 빈 상태 */
    .alert-hist-empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 30px;
      text-align: center;
    }

    /* ══ 🔀 v116: 탭 순서 재배치 ══ */
    .tab-order-overlay,
    .theme-color-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 99998;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: memoFade 0.2s ease-out;
    }
    .tab-order-sheet,
    .theme-color-sheet {
      background: var(--bg-card, #fff);
      width: 100%;
      max-width: 480px;
      max-height: 88vh;
      border-radius: 20px 20px 0 0;
      display: flex;
      flex-direction: column;
      animation: memoSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
      box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
      overflow: hidden;
    }
    @media (min-width: 600px) {
      .tab-order-overlay, .theme-color-overlay { align-items: center; }
      .tab-order-sheet, .theme-color-sheet { border-radius: 20px; max-height: 80vh; }
    }
    body.dark-mode .tab-order-sheet,
    body.dark-mode .theme-color-sheet {
      background: #1c1712;
      color: #ede4d8;
    }
    .tab-order-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 12px;
      border-bottom: 1px solid rgba(196,152,80,.15);
    }
    .tab-order-title {
      margin: 0;
      font-size: 17px;
      font-weight: 900;
      color: var(--primary-brown, #8a5e2e);
    }
    .tab-order-body,
    .theme-color-body {
      flex: 1;
      overflow-y: auto;
      padding: 14px 16px;
    }
    .tab-order-desc {
      font-size: 12.5px;
      color: var(--text-muted);
      margin: 0 0 12px;
      line-height: 1.55;
    }
    .tab-order-footer {
      display: flex;
      gap: 8px;
      padding: 10px 16px 14px;
      border-top: 1px solid rgba(196,152,80,.1);
    }

    /* 탭 순서 리스트 */
    .tab-order-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .tab-order-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: rgba(196,152,80,.06);
      border: 1px solid rgba(196,152,80,.18);
      border-radius: 10px;
      transition: all 0.15s;
    }
    .tab-order-item:hover {
      background: rgba(196,152,80,.1);
    }
    body.dark-mode .tab-order-item {
      background: rgba(255,200,120,.04);
      border-color: rgba(255,200,120,.12);
    }
    .tab-order-item.disabled {
      opacity: 0.5;
    }
    .tab-order-item-handle {
      width: 22px;
      text-align: center;
      cursor: grab;
      color: var(--text-muted);
      font-size: 14px;
      flex: 0 0 22px;
    }
    .tab-order-item-icon {
      font-size: 18px;
      flex: 0 0 24px;
    }
    .tab-order-item-name {
      flex: 1;
      font-size: 13.5px;
      font-weight: 800;
      color: var(--text-main);
    }
    .tab-order-item-arrows {
      display: flex;
      gap: 4px;
    }
    .tab-order-arrow-btn {
      width: 28px;
      height: 28px;
      border: 1px solid rgba(196,152,80,.25);
      background: var(--bg-card, #fff);
      color: var(--primary-brown, #8a5e2e);
      border-radius: 6px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.15s;
    }
    .tab-order-arrow-btn:hover:not(:disabled) {
      background: var(--primary-brown, #8a5e2e);
      color: #fff;
      border-color: transparent;
    }
    .tab-order-arrow-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
    body.dark-mode .tab-order-arrow-btn {
      background: #2a211b;
      border-color: rgba(255,200,120,.15);
      color: #d4af6f;
    }
    .tab-order-toggle {
      width: 36px;
      height: 22px;
      background: rgba(0,0,0,.15);
      border-radius: 999px;
      position: relative;
      cursor: pointer;
      transition: background 0.2s;
      flex: 0 0 36px;
      border: none;
      padding: 0;
    }
    .tab-order-toggle::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      background: #fff;
      border-radius: 50%;
      transition: transform 0.2s;
    }
    .tab-order-toggle.on {
      background: var(--primary-brown, #8a5e2e);
    }
    .tab-order-toggle.on::after {
      transform: translateX(14px);
    }

    /* ══ 🎨 v116: 테마 색상 ══ */
    .theme-section-label {
      font-size: 11.5px;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin: 12px 0 8px;
    }
    .theme-preset-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }
    .theme-preset-btn {
      aspect-ratio: 1;
      border: 2px solid transparent;
      border-radius: 12px;
      cursor: pointer;
      position: relative;
      transition: all 0.15s;
      padding: 0;
    }
    .theme-preset-btn:hover {
      transform: scale(1.05);
    }
    .theme-preset-btn.active {
      border-color: var(--text-main);
      box-shadow: 0 0 0 2px var(--bg-card, #fff), 0 0 0 4px var(--text-main);
    }
    .theme-preset-btn.active::after {
      content: "✓";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18px;
      font-weight: 900;
      text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
    .theme-custom-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .theme-color-picker {
      width: 56px;
      height: 40px;
      border: 1px solid rgba(196,152,80,.25);
      border-radius: 10px;
      cursor: pointer;
      padding: 2px;
      background: transparent;
      flex: 0 0 56px;
    }
    .theme-color-hex {
      flex: 1;
      padding: 10px 12px;
      border: 1px solid rgba(196,152,80,.25);
      border-radius: 10px;
      background: rgba(196,152,80,.05);
      font-size: 13px;
      font-weight: 700;
      font-family: 'Courier New', monospace;
      color: var(--text-main);
      text-transform: uppercase;
      outline: none;
    }
    .theme-color-hex:focus {
      border-color: var(--primary-brown, #8a5e2e);
    }
    body.dark-mode .theme-color-hex {
      background: rgba(255,200,120,.05);
      border-color: rgba(255,200,120,.15);
      color: #ede4d8;
    }
    .theme-preview {
      padding: 14px;
      background: rgba(196,152,80,.04);
      border: 1px solid rgba(196,152,80,.12);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .theme-preview-btn {
      padding: 10px 16px;
      background: var(--primary-brown, #8a5e2e);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: background 0.15s;
    }
    .theme-preview-btn:hover {
      filter: brightness(1.1);
    }
    .theme-preview-card {
      padding: 12px;
      background: var(--bg-card, #fff);
      border: 1px solid var(--primary-brown, #8a5e2e);
      border-radius: 10px;
    }
    .theme-preview-title {
      font-size: 13px;
      font-weight: 900;
      color: var(--primary-brown, #8a5e2e);
      margin-bottom: 4px;
    }
    .theme-preview-text {
      font-size: 11.5px;
      color: var(--text-muted);
      line-height: 1.5;
    }
    body.dark-mode .theme-preview {
      background: rgba(255,200,120,.04);
      border-color: rgba(255,200,120,.12);
    }
    body.dark-mode .theme-preview-card {
      background: rgba(28,23,18,.6);
    }

    /* ══ 🔔 v117: 푸시 알림 ══ */
    .push-status-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 1px 8px;
      background: #2ecc7a;
      color: #fff;
      border-radius: 999px;
      font-size: 9.5px;
      font-weight: 900;
      margin-right: 4px;
    }
    .push-status-badge.off {
      background: #94a3b8;
    }
    .push-status-badge.denied {
      background: #dc2626;
    }
    .push-notif-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 99998;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: memoFade 0.2s ease-out;
    }
    .push-notif-sheet {
      background: var(--bg-card, #fff);
      width: 100%;
      max-width: 480px;
      max-height: 88vh;
      border-radius: 20px 20px 0 0;
      display: flex;
      flex-direction: column;
      animation: memoSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
      box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
      overflow: hidden;
    }
    @media (min-width: 600px) {
      .push-notif-overlay { align-items: center; }
      .push-notif-sheet { border-radius: 20px; max-height: 80vh; }
    }
    body.dark-mode .push-notif-sheet {
      background: #1c1712;
      color: #ede4d8;
    }
    .push-notif-body {
      flex: 1;
      overflow-y: auto;
      padding: 14px 16px 20px;
    }
    .push-status-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: rgba(196,152,80,.06);
      border: 1px solid rgba(196,152,80,.2);
      border-radius: 12px;
      margin: 10px 0;
    }
    .push-status-card.granted {
      background: rgba(46,204,122,.08);
      border-color: rgba(46,204,122,.25);
    }
    .push-status-card.denied {
      background: rgba(239,68,68,.08);
      border-color: rgba(239,68,68,.25);
    }
    body.dark-mode .push-status-card {
      background: rgba(255,200,120,.05);
    }
    .push-status-icon {
      font-size: 28px;
      flex: 0 0 32px;
      text-align: center;
    }
    .push-status-text {
      flex: 1;
      min-width: 0;
    }
    .push-status-title {
      font-size: 14px;
      font-weight: 900;
      color: var(--text-main);
    }
    .push-status-desc {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .push-action-btn {
      width: 100%;
      padding: 12px 16px;
      border-radius: 12px;
      border: none;
      font-size: 13.5px;
      font-weight: 900;
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-bottom: 10px;
    }
    .push-action-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .push-action-primary {
      background: var(--primary-brown, #8a5e2e);
      color: #fff;
    }
    .push-action-primary:hover:not(:disabled) {
      filter: brightness(1.1);
    }
    .push-action-secondary {
      background: rgba(196,152,80,.12);
      color: var(--primary-brown, #8a5e2e);
      border: 1px solid rgba(196,152,80,.2);
    }
    .push-action-secondary:hover:not(:disabled) {
      background: rgba(196,152,80,.2);
    }
    .push-section {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid rgba(196,152,80,.12);
    }
    .push-section-label {
      font-size: 12.5px;
      font-weight: 900;
      color: var(--primary-brown, #8a5e2e);
      margin-bottom: 6px;
    }
    .push-section-desc {
      font-size: 11.5px;
      color: var(--text-muted);
      margin: 0 0 10px;
      line-height: 1.55;
    }
    .push-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: rgba(196,152,80,.05);
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 6px;
    }
    body.dark-mode .push-toggle-row {
      background: rgba(255,200,120,.04);
    }
    .push-bg-status {
      font-size: 11px;
      color: var(--text-muted);
      padding: 4px 12px;
      font-weight: 600;
    }
    .push-info {
      margin-top: 16px;
      padding: 12px 14px;
      background: rgba(59,130,246,.06);
      border: 1px solid rgba(59,130,246,.2);
      border-radius: 10px;
    }
    body.dark-mode .push-info {
      background: rgba(59,130,246,.1);
    }
    .push-info-title {
      font-size: 12px;
      font-weight: 800;
      color: #2563eb;
      margin-bottom: 6px;
    }
    body.dark-mode .push-info-title { color: #60a5fa; }
    .push-info-text {
      font-size: 11.5px;
      color: var(--text-main);
      line-height: 1.7;
    }

    /* ══ 환율 상태 표시 ══ */
    .krw-status-bar {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 10px;
      background: var(--tab-bg); border: 1px solid var(--tab-border);
      font-size: 11.5px; font-weight: 700; margin: 4px 0;
    }
    .krw-status-dot {
      width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
      background: #10b981;
    }
    .krw-status-dot.stale { background: #f59e0b; }
    .krw-status-dot.error { background: #e74c3c; }
    .krw-status-text { flex: 1; color: var(--text-muted); }
    .krw-status-val { color: var(--primary-brown); font-weight: 900; }
    .krw-refresh-btn {
      background: none; border: none; cursor: pointer;
      font-size: 14px; padding: 0 2px; line-height: 1;
      color: var(--text-muted); transition: transform .3s;
    }
    .krw-refresh-btn.spin { animation: krwSpin .6s linear; }
    @keyframes krwSpin { to { transform: rotate(360deg); } }

    /* ══ 수익률 배지 ══ */
    .profit-badge {
      display: none; align-items: center; gap: 5px;
      padding: 5px 12px; border-radius: 999px;
      font-size: 12px; font-weight: 900;
      margin-left: 6px; cursor: pointer;
      transition: all .2s;
    }
    .profit-badge.profit { background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.28); color:#0d6b50; }
    .profit-badge.loss   { background:rgba(231,76,60,.10);  border:1px solid rgba(231,76,60,.25);  color:#c82b2b; }
    .profit-badge.show   { display: inline-flex; }

    /* ══ 포트폴리오 변동 그래프 ══ */
    .port-history-wrap {
      margin-top: 10px;
    }
    .port-history-title {
      font-size: 11px; font-weight: 800; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
    }
    .port-history-canvas-wrap {
      position: relative; height: 80px;
      background: rgba(196,152,80,.04);
      border-radius: 10px; border: 1px solid var(--tab-border);
      overflow: hidden;
    }
    canvas#portHistCanvas { width: 100%; height: 100%; display: block; }
    .port-history-meta {
      display: flex; justify-content: space-between;
      font-size: 10.5px; font-weight: 700; color: var(--text-muted);
      margin-top: 4px;
    }

    /* ══ 계산기 → KSTA 전송 버튼 ══ */
    .send-to-ksta-btn {
      width: 100%; height: 36px; border-radius: 10px; margin-top: 8px;
      background: linear-gradient(135deg, var(--primary-light), var(--primary-brown));
      color: white; font-size: 12.5px; font-weight: 800; border: none;
      cursor: pointer; display: none; align-items: center; justify-content: center; gap: 6px;
      transition: opacity .15s;
    }
    .send-to-ksta-btn.show { display: flex; }
    .send-to-ksta-btn:hover { opacity: .88; }

    /* ══ 🎙️ 음성 매크로 관리 (Phase 6) ══ */
    .macro-overlay {
      position: fixed; inset: 0; background: rgba(20, 14, 6, 0.6);
      backdrop-filter: blur(4px); z-index: 100;
      display: flex; align-items: flex-end; justify-content: center;
      animation: fadeIn 0.2s ease-out;
    }
    .macro-overlay[hidden] { display: none !important; }
    .macro-sheet {
      width: 100%; max-width: 540px; max-height: 85vh; overflow-y: auto;
      background: var(--bg-card);
      border-radius: 20px 20px 0 0;
      padding: 18px 20px 24px;
      box-shadow: 0 -8px 40px rgba(0,0,0,0.25);
      animation: slideUp 0.25s cubic-bezier(0.2, 0.9, 0.35, 1.1);
    }
    @keyframes slideUp {
      from { transform: translateY(40px); opacity: 0.6; }
      to { transform: translateY(0); opacity: 1; }
    }
    .macro-head {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 10px;
    }
    .macro-title {
      font-size: 18px; font-weight: 900;
      color: var(--primary-brown); margin: 0;
    }
    .macro-close {
      width: 32px; height: 32px; border-radius: 50%;
      border: none; background: var(--tab-bg); color: var(--text-main);
      font-size: 16px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .macro-desc {
      font-size: 12.5px; color: var(--text-muted);
      line-height: 1.55; margin-bottom: 16px;
      padding: 10px 12px; background: var(--tab-bg); border-radius: 10px;
    }
    .macro-form {
      background: var(--tab-bg); border-radius: 12px;
      padding: 14px; margin-bottom: 16px;
    }
    .macro-form-row { margin-bottom: 10px; }
    .macro-label {
      display: block; font-size: 12px; font-weight: 800;
      color: var(--primary-brown); margin-bottom: 4px;
    }
    .macro-input {
      width: 100%; padding: 10px 12px;
      border: 1px solid var(--line); border-radius: 8px;
      background: var(--bg-card); color: var(--text-main);
      font-size: 13px; box-sizing: border-box;
    }
    .macro-input:focus {
      outline: none; border-color: var(--primary-brown);
    }
    .macro-add-btn {
      width: 100%; padding: 10px; border: none; border-radius: 8px;
      background: linear-gradient(135deg, var(--primary-brown), var(--primary-light));
      color: white; font-size: 13px; font-weight: 800; cursor: pointer;
      margin-top: 4px;
    }
    .macro-list-head {
      font-size: 12px; font-weight: 800; color: var(--text-muted);
      margin-bottom: 8px; padding: 0 4px;
      display: flex; align-items: center; gap: 6px;
    }
    .macro-count {
      background: var(--primary-brown); color: white;
      padding: 1px 8px; border-radius: 999px;
      font-size: 10.5px; font-weight: 900; min-width: 18px; text-align: center;
    }
    .macro-list { margin-bottom: 4px; }
    .macro-item {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 12px; margin-bottom: 6px;
      background: var(--bg-card); border: 1px solid var(--line);
      border-radius: 10px; font-size: 12.5px;
    }
    .macro-item-phrase {
      font-weight: 800; color: var(--text-main);
      flex-shrink: 0; max-width: 40%;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .macro-item-arrow { color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
    .macro-item-cmd {
      flex: 1; color: var(--primary-brown); font-weight: 600;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .macro-item-del {
      width: 26px; height: 26px; border-radius: 50%;
      border: none; background: rgba(231,76,60,0.1); color: #c82b2b;
      font-size: 12px; cursor: pointer; flex-shrink: 0;
    }
    .macro-empty {
      text-align: center; padding: 20px 0;
      color: var(--text-muted); font-size: 12.5px; font-style: italic;
    }
    .macro-divider {
      height: 1px; background: var(--line); margin: 16px 0 14px;
    }
    .macro-freq-head {
      font-size: 13px; font-weight: 800; color: var(--primary-brown);
      margin-bottom: 4px;
    }
    .macro-freq-desc {
      font-size: 11.5px; color: var(--text-muted);
      margin-bottom: 10px; line-height: 1.5;
    }
    .macro-freq-item {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; margin-bottom: 5px;
      background: var(--tab-bg); border-radius: 8px;
      font-size: 12px;
    }
    .macro-freq-phrase { flex: 1; font-weight: 700; color: var(--text-main); }
    .macro-freq-count {
      font-size: 11px; color: var(--text-muted); font-weight: 700;
      padding: 1px 6px; background: var(--bg-card); border-radius: 999px;
    }
    .macro-freq-add {
      border: none; background: var(--primary-brown); color: white;
      padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
      cursor: pointer;
    }

    /* ══ 📖 음성 가이드 (v31) ══ */

    /* 가이드 대상 하이라이트 (펄스링) */
    .guide-highlight {
      position: relative;
      z-index: 101;
      box-shadow: 0 0 0 4px rgba(212,175,111,0.95), 0 0 0 10px rgba(138,94,46,0.35), 0 0 40px rgba(212,175,111,0.6) !important;
      border-radius: 14px;
      animation: guidePulse 1.6s ease-in-out infinite;
    }
    @keyframes guidePulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(212,175,111,0.95), 0 0 0 10px rgba(138,94,46,0.35), 0 0 40px rgba(212,175,111,0.6); }
      50%      { box-shadow: 0 0 0 6px rgba(212,175,111,1),    0 0 0 16px rgba(138,94,46,0.45), 0 0 60px rgba(212,175,111,0.9); }
    }

    /* 가이드 중 배경 덮개 (대상만 돋보이게) */
    .guide-dim-backdrop {
      position: fixed; inset: 0;
      background: rgba(20,14,6,0.45);
      backdrop-filter: blur(2px);
      z-index: 99;
      pointer-events: none;
      animation: fadeIn 0.3s ease-out;
    }

    /* 화살표 포인터 (대상 위에 내려다보기) */
    .guide-arrow {
      position: absolute;
      font-size: 36px;
      z-index: 102;
      color: var(--primary-brown);
      text-shadow: 0 4px 12px rgba(0,0,0,0.4);
      animation: guideArrowBounce 0.9s ease-in-out infinite;
      pointer-events: none;
      filter: drop-shadow(0 0 8px rgba(212,175,111,0.8));
    }
    @keyframes guideArrowBounce {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-8px); }
    }

    /* 짧은/긴 버전 선택 버튼 */
    .guide-length-picker {
      display: flex; gap: 10px; margin-top: 16px; justify-content: center;
    }
    .guide-length-btn {
      flex: 1; max-width: 160px;
      padding: 14px 10px; border-radius: 14px;
      border: 2px solid var(--line);
      background: var(--tab-bg);
      color: var(--text-main);
      font-size: 13px; font-weight: 800;
      cursor: pointer;
      transition: all 0.15s;
      display: flex; flex-direction: column; gap: 4px; align-items: center;
    }
    .guide-length-btn:hover,
    .guide-length-btn:active {
      border-color: var(--primary-brown);
      background: rgba(138,94,46,0.08);
    }
    .guide-length-btn .gl-icon { font-size: 26px; }
    .guide-length-btn .gl-dur { font-size: 11px; color: var(--text-muted); font-weight: 600; }

    /* 인터랙티브 프롬프트 박스 */
    .guide-interactive-box {
      margin-top: 12px; padding: 12px 14px;
      background: linear-gradient(135deg, rgba(138,94,46,0.12), rgba(212,175,111,0.08));
      border: 2px dashed var(--primary-brown);
      border-radius: 12px;
      text-align: center;
    }
    .guide-interactive-box .gi-label {
      font-size: 11px; font-weight: 800;
      color: var(--primary-brown); letter-spacing: 0.5px; text-transform: uppercase;
      margin-bottom: 6px;
    }
    .guide-interactive-box .gi-prompt {
      font-size: 16px; font-weight: 700;
      color: var(--text-main);
      margin-bottom: 8px;
    }
    .guide-interactive-box .gi-hint {
      font-size: 11px; color: var(--text-muted); font-style: italic;
    }

    /* 성공 피드백 (녹색 체크) */
    .guide-success-flash {
      color: #0d6b50;
      font-size: 14px; font-weight: 800;
      animation: successPop 0.4s ease-out;
    }
    @keyframes successPop {
      0%   { transform: scale(0.5); opacity: 0; }
      60%  { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* ══ 🎭 커스텀 확인 모달 (v39) ══ */

    .ksta-confirm-overlay {
      position: fixed; inset: 0;
      background: rgba(20, 14, 6, 0.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 10000;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      animation: kcFadeIn 0.25s ease-out;
    }
    @keyframes kcFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .ksta-confirm-card {
      width: 100%; max-width: 380px;
      background: var(--card-bg, #fdfaf5);
      border-radius: 24px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,175,111,0.15);
      padding: 28px 24px 20px;
      position: relative;
      animation: kcSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      overflow: hidden;
    }
    /* 상단 브랜드 그라디언트 장식 */
    .ksta-confirm-card::before {
      content: "";
      position: absolute; top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8a5e2e 0%, #d4af6f 50%, #8a5e2e 100%);
    }
    @keyframes kcSlideUp {
      from { transform: translateY(40px) scale(0.95); opacity: 0; }
      to   { transform: translateY(0) scale(1); opacity: 1; }
    }

    /* 아이콘 */
    .ksta-confirm-icon {
      width: 72px; height: 72px;
      margin: 0 auto 16px;
      background: linear-gradient(135deg, #8a5e2e 0%, #d4af6f 100%);
      border-radius: 22px;
      display: flex; align-items: center; justify-content: center;
      font-size: 36px;
      box-shadow: 0 8px 20px rgba(138, 94, 46, 0.35);
      position: relative;
    }
    .ksta-confirm-icon::after {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: 26px;
      border: 2px solid rgba(212, 175, 111, 0.3);
      animation: kcIconPulse 2s ease-in-out infinite;
    }
    @keyframes kcIconPulse {
      0%, 100% { transform: scale(1); opacity: 0.3; }
      50%      { transform: scale(1.08); opacity: 0.6; }
    }

    /* 타이틀 */
    .ksta-confirm-title {
      font-size: 19px; font-weight: 800;
      color: var(--text-main, #2a1d0c);
      text-align: center;
      margin: 0 0 10px;
      letter-spacing: -0.3px;
    }

    /* 본문 */
    .ksta-confirm-body {
      font-size: 14px; font-weight: 500;
      color: var(--text-muted, #6b5636);
      text-align: center;
      line-height: 1.55;
      margin: 0 0 20px;
      padding: 0 4px;
    }

    /* 버튼 영역 */
    .ksta-confirm-actions {
      display: flex; gap: 10px;
      padding-top: 4px;
    }
    .ksta-confirm-btn {
      flex: 1;
      padding: 14px 10px;
      border-radius: 14px;
      font-size: 15px; font-weight: 700;
      cursor: pointer;
      transition: all 0.15s;
      letter-spacing: -0.2px;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    .ksta-confirm-btn.cancel {
      background: transparent;
      color: var(--text-muted, #6b5636);
      border: 2px solid var(--line, #e8dfd1);
    }
    .ksta-confirm-btn.cancel:active {
      background: rgba(138, 94, 46, 0.05);
      transform: scale(0.98);
    }
    .ksta-confirm-btn.primary {
      background: linear-gradient(135deg, #8a5e2e 0%, #a67840 100%);
      color: #fff;
      border: none;
      box-shadow: 0 4px 12px rgba(138, 94, 46, 0.35);
    }
    .ksta-confirm-btn.primary:active {
      transform: scale(0.98) translateY(1px);
      box-shadow: 0 2px 6px rgba(138, 94, 46, 0.4);
    }

    /* 다크모드 대응 */
    body.theme-dark .ksta-confirm-card {
      background: #1a120a;
      color: #f5ebd6;
    }
    body.theme-dark .ksta-confirm-title {
      color: #f5ebd6;
    }
    body.theme-dark .ksta-confirm-body {
      color: #c9b38a;
    }
    body.theme-dark .ksta-confirm-btn.cancel {
      color: #c9b38a;
      border-color: rgba(212, 175, 111, 0.2);
    }
    body.theme-dark .ksta-confirm-btn.cancel:active {
      background: rgba(212, 175, 111, 0.08);
    }

    /* ══ 🎯 음성 명령 힌트 칩 (v47) ══ */
    .voice-hint-label {
      font-size: 12px; font-weight: 700;
      color: var(--primary-brown, #8a5e2e);
      margin-bottom: 10px;
      letter-spacing: -0.3px;
    }
    .voice-chip-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      margin-bottom: 12px;
    }
    .voice-chip {
      padding: 8px 10px;
      border-radius: 10px;
      border: 1.5px solid var(--line, #e8dfd1);
      background: var(--tab-bg, rgba(138,94,46,0.05));
      color: var(--text-main, #2a1d0c);
      font-size: 12px;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-tap-highlight-color: transparent;
      font-family: inherit;
    }
    .voice-chip:hover {
      border-color: var(--primary-brown, #8a5e2e);
      background: rgba(138,94,46,0.12);
    }
    .voice-chip:active {
      transform: scale(0.96);
      background: rgba(138,94,46,0.18);
    }
    .voice-hint-more details {
      font-size: 11px;
      color: var(--text-muted, #6b5636);
    }
    .voice-hint-more summary {
      cursor: pointer;
      padding: 6px 0;
      font-weight: 700;
      list-style: none;
      user-select: none;
    }
    .voice-hint-more summary::-webkit-details-marker { display: none; }
    .voice-hint-more summary:hover { color: var(--primary-brown); }
    .voice-more-list {
      padding: 8px 4px 4px;
      display: flex; flex-direction: column; gap: 6px;
      font-size: 11px; line-height: 1.5;
    }
    .voice-more-list b {
      color: var(--primary-brown, #8a5e2e);
      font-weight: 800;
    }
    body.theme-dark .voice-chip {
      background: rgba(212,175,111,0.08);
      border-color: rgba(212,175,111,0.2);
      color: #f5ebd6;
    }
    body.theme-dark .voice-chip:hover {
      background: rgba(212,175,111,0.15);
      border-color: rgba(212,175,111,0.4);
    }

    /* ══ 🎙️ 플로팅 음성 버튼 (v48) ══ */
    .floating-voice-btn {
      position: fixed;
      bottom: 24px;
      right: 20px;
      width: 60px; height: 60px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, #8a5e2e 0%, #d4af6f 100%);
      color: white;
      font-size: 26px;
      cursor: pointer;
      z-index: 900;
      box-shadow: 
        0 6px 20px rgba(138, 94, 46, 0.45),
        0 0 0 4px rgba(255, 255, 255, 0.06);
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.2s;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      touch-action: manipulation;
    }
    .floating-voice-btn:active {
      transform: scale(0.92);
      box-shadow: 0 4px 10px rgba(138, 94, 46, 0.5);
    }
    .floating-voice-btn:hover {
      transform: scale(1.05);
      box-shadow: 
        0 8px 28px rgba(138, 94, 46, 0.55),
        0 0 0 5px rgba(255, 255, 255, 0.08);
    }

    .fvb-icon {
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
    }

    /* 주변 펄스 링 (부드러운 호흡) */
    .fvb-pulse {
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 2px solid rgba(212, 175, 111, 0.5);
      animation: fvbBreath 3s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes fvbBreath {
      0%, 100% { opacity: 0.4; transform: scale(1); }
      50%      { opacity: 0.7; transform: scale(1.08); }
    }

    /* 흔들기 감지 활성 시 강조 */
    .floating-voice-btn.shake-detected {
      animation: fvbShakeWiggle 0.6s ease-in-out;
    }
    @keyframes fvbShakeWiggle {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-4px) rotate(-8deg); }
      75% { transform: translateX(4px) rotate(8deg); }
    }

    /* 음성 모달 열린 동안 플로팅 버튼 숨김 */
    .floating-voice-btn.hidden-during-voice {
      opacity: 0;
      transform: scale(0.5);
      pointer-events: none;
    }

    /* iOS/미지원 기기 숨김 */
    .floating-voice-btn.unsupported {
      display: none;
    }

    /* 사용자가 숨김 설정한 경우 */
    .floating-voice-btn.user-hidden {
      display: none;
    }

    /* 스크롤 시 약간 축소 (선택) */
    .floating-voice-btn.scrolled {
      opacity: 0.85;
    }

    /* 다크모드 */
    body.theme-dark .floating-voice-btn {
      background: linear-gradient(135deg, #a67840 0%, #d4af6f 100%);
      box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.6),
        0 0 0 4px rgba(212, 175, 111, 0.1);
    }

    /* 작은 화면 대응 */
    @media (max-width: 480px) {
      .floating-voice-btn {
        bottom: 20px;
        right: 16px;
        width: 56px; height: 56px;
        font-size: 24px;
      }
    }

    /* 🎯 Shake 튜토리얼 토스트 */
    .shake-toast {
      position: fixed;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(20, 14, 6, 0.92);
      color: #f5ebd6;
      padding: 12px 20px;
      border-radius: 24px;
      font-size: 13px; font-weight: 700;
      z-index: 10000;
      box-shadow: 0 8px 28px rgba(0,0,0,0.4);
      animation: shakeToastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      white-space: nowrap;
    }
    @keyframes shakeToastIn {
      from { opacity: 0; transform: translate(-50%, 20px); }
      to   { opacity: 1; transform: translate(-50%, 0); }
    }
    .shake-toast.fade-out {
      animation: shakeToastOut 0.3s ease-out forwards;
    }
    @keyframes shakeToastOut {
      to { opacity: 0; transform: translate(-50%, 10px); }
    }



    /* ══ 🎚️ 음성 상세 설정 (v61: 인라인) ══ */
    .vp-inline-row {
      display: block !important;
      padding: 14px 16px !important;
      cursor: default !important;
    }
    .vp-inline-row:hover {
      background: transparent !important;
    }
    .vp-inline-label-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .vp-inline-label-row .settings-row-icon {
      font-size: 18px;
    }
    .vp-inline-label-row .settings-row-label {
      flex: 1;
      font-weight: 700;
    }
    .vp-inline-label-row .settings-row-value {
      font-size: 13px;
      color: var(--primary-brown, #8a5e2e);
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
      background: rgba(138,94,46,0.1);
      padding: 3px 10px;
      border-radius: 10px;
      font-weight: 800;
    }

    .vp-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      background: rgba(138,94,46,0.15);
      border-radius: 3px;
      outline: none;
      margin: 4px 0 0 0;
    }
    .vp-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 24px; height: 24px;
      background: linear-gradient(135deg, #8a5e2e, #d4af6f);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(138,94,46,0.4);
      border: 3px solid var(--card-bg, #fdfaf5);
    }
    .vp-slider::-moz-range-thumb {
      width: 24px; height: 24px;
      background: linear-gradient(135deg, #8a5e2e, #d4af6f);
      border-radius: 50%;
      cursor: pointer;
      border: 3px solid var(--card-bg, #fdfaf5);
      box-shadow: 0 2px 8px rgba(138,94,46,0.4);
    }
    .vp-hints {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      font-size: 10px;
      color: var(--text-muted, #888);
      font-weight: 600;
    }

    .vp-radio-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 4px;
    }
    .vp-radio {
      padding: 12px 8px;
      border: 1.5px solid var(--line, #e8dfd1);
      background: var(--tab-bg, #f5efe6);
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-main, #2a1d0c);
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    .vp-radio:active { transform: scale(0.97); }
    .vp-radio.active {
      background: linear-gradient(135deg, #8a5e2e, #d4af6f);
      color: white;
      border-color: #8a5e2e;
      box-shadow: 0 3px 10px rgba(138,94,46,0.3);
    }

    .vp-action-row {
      display: flex !important;
      gap: 10px !important;
      padding: 14px 16px !important;
    }
    .vp-test-btn, .vp-reset-btn {
      flex: 1;
      padding: 13px;
      border-radius: 12px;
      border: none;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    .vp-test-btn {
      background: linear-gradient(135deg, #8a5e2e, #d4af6f);
      color: white;
      box-shadow: 0 3px 10px rgba(138,94,46,0.3);
    }
    .vp-reset-btn {
      background: var(--tab-bg, #f5efe6);
      color: var(--text-main, #2a1d0c);
      border: 1.5px solid var(--line, #e8dfd1);
    }
    .vp-test-btn:active, .vp-reset-btn:active { transform: scale(0.97); }

    body.theme-dark .vp-radio {
      background: rgba(212,175,111,0.05);
      border-color: rgba(212,175,111,0.15);
    }
    body.theme-dark .vp-reset-btn {
      background: rgba(212,175,111,0.05);
      border-color: rgba(212,175,111,0.15);
    }

    /* ══ 🎯 음성 자동완성 칩 (v62) ══ */
    .voice-autocomplete {
      margin: 12px 16px 4px;
      padding: 14px 14px 12px;
      background: linear-gradient(135deg, rgba(138,94,46,0.06), rgba(212,175,111,0.08));
      border: 1.5px solid rgba(138,94,46,0.15);
      border-radius: 16px;
      animation: vacSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes vacSlideIn {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .vac-label {
      font-size: 12px;
      font-weight: 800;
      color: var(--primary-brown, #8a5e2e);
      margin-bottom: 10px;
      letter-spacing: 0.2px;
    }
    .vac-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .vac-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 14px;
      border: none;
      border-radius: 14px;
      background: white;
      color: var(--text-main, #2a1d0c);
      font-size: 13.5px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(138,94,46,0.12);
      transition: all 0.15s;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
      animation: vacChipIn 0.3s ease-out backwards;
    }
    .vac-chip:nth-child(1) { animation-delay: 0.02s; }
    .vac-chip:nth-child(2) { animation-delay: 0.06s; }
    .vac-chip:nth-child(3) { animation-delay: 0.10s; }
    .vac-chip:nth-child(4) { animation-delay: 0.14s; }
    @keyframes vacChipIn {
      from { opacity: 0; transform: scale(0.85); }
      to { opacity: 1; transform: scale(1); }
    }
    .vac-chip:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(138,94,46,0.2);
    }
    .vac-chip:active {
      transform: scale(0.95);
    }
    .vac-chip-icon { font-size: 15px; line-height: 1; }
    .vac-chip-text { white-space: nowrap; }

    body.theme-dark .voice-autocomplete {
      background: linear-gradient(135deg, rgba(212,175,111,0.08), rgba(212,175,111,0.04));
      border-color: rgba(212,175,111,0.2);
    }
    body.theme-dark .vac-chip {
      background: rgba(212,175,111,0.1);
      color: var(--text-main);
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }

    /* ══ 🏅 체인 매크로 힌트 (v63) ══ */
    .macro-chain-hint {
      margin: 8px 0 12px;
      padding: 10px 12px;
      background: rgba(138,94,46,0.06);
      border-left: 3px solid var(--primary-brown, #8a5e2e);
      border-radius: 8px;
      font-size: 12px;
      line-height: 1.55;
      color: var(--text-main, #2a1d0c);
    }
    .macro-chain-hint code {
      display: inline-block;
      padding: 1px 6px;
      background: rgba(138,94,46,0.12);
      border-radius: 4px;
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
      font-size: 11px;
      font-weight: 700;
      color: var(--primary-brown, #8a5e2e);
    }
    body.theme-dark .macro-chain-hint {
      background: rgba(212,175,111,0.05);
      border-left-color: var(--accent-gold, #d4af6f);
    }
    body.theme-dark .macro-chain-hint code {
      background: rgba(212,175,111,0.15);
      color: var(--accent-gold, #d4af6f);
    }

    /* ══ 🎙️ v66 A1: 노이즈 경고 ══ */
    .voice-noise-warn {
      margin: 10px 16px 0;
      padding: 10px 14px;
      background: linear-gradient(135deg, rgba(255,152,0,0.12), rgba(255,183,77,0.08));
      border: 1.5px solid rgba(255,152,0,0.3);
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      color: #d68910;
      text-align: center;
      animation: noiseWarnPulse 1.5s infinite;
    }
    @keyframes noiseWarnPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    body.theme-dark .voice-noise-warn {
      background: linear-gradient(135deg, rgba(255,183,77,0.12), rgba(255,152,0,0.06));
      border-color: rgba(255,183,77,0.3);
      color: #ffb74d;
    }

    /* ══ 🎓 v67 B1: 학습형 매크로 토스트 ══ */
    .learn-toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 32px);
      max-width: 380px;
      background: linear-gradient(135deg, #fdfaf5, #faf0dc);
      border: 2px solid rgba(138,94,46,0.25);
      border-radius: 20px;
      padding: 14px 16px 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
      z-index: 9700;
      animation: learnToastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes learnToastIn {
      from { opacity: 0; transform: translate(-50%, 20px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }
    .learn-toast-out { animation: learnToastOut 0.3s ease-in forwards; }
    @keyframes learnToastOut {
      to { opacity: 0; transform: translate(-50%, 20px); }
    }
    .learn-toast-body {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
    }
    .learn-toast-icon {
      font-size: 28px;
      line-height: 1;
      padding-top: 2px;
    }
    .learn-toast-content { flex: 1; min-width: 0; }
    .learn-toast-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--primary-brown, #8a5e2e);
      margin-bottom: 4px;
    }
    .learn-toast-desc {
      font-size: 13px;
      color: var(--text-main, #2a1d0c);
      word-wrap: break-word;
      line-height: 1.4;
    }
    .learn-toast-close {
      width: 28px; height: 28px;
      border-radius: 50%;
      border: none;
      background: rgba(138,94,46,0.1);
      color: var(--text-main, #2a1d0c);
      font-size: 14px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .learn-toast-actions {
      display: flex;
      gap: 8px;
    }
    .learn-toast-btn {
      flex: 1;
      padding: 10px;
      border-radius: 12px;
      border: 1.5px solid rgba(138,94,46,0.25);
      background: white;
      color: var(--text-main, #2a1d0c);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    .learn-toast-btn:active { transform: scale(0.97); }
    .learn-toast-btn-primary {
      background: linear-gradient(135deg, #8a5e2e, #d4af6f);
      color: white;
      border-color: #8a5e2e;
    }
    body.theme-dark .learn-toast {
      background: linear-gradient(135deg, #1a120a, #2a1d0c);
      border-color: rgba(212,175,111,0.3);
    }
    body.theme-dark .learn-toast-btn {
      background: rgba(212,175,111,0.08);
      border-color: rgba(212,175,111,0.2);
    }

    /* ══ 🎨 v68 D1: 음성 시각화 강화 ══ */

    /* 단어별 토큰 (Final) */
    .word-token {
      display: inline-block;
      margin: 0 1px;
      padding: 2px 6px;
      border-radius: 6px;
      animation: wordFadeIn 0.25s ease-out backwards;
      transition: all 0.2s;
    }
    @keyframes wordFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .word-token.word-known {
      background: rgba(138,94,46,0.12);
      color: var(--primary-brown, #8a5e2e);
      font-weight: 800;
    }
    .word-token.word-number {
      background: rgba(212,175,111,0.18);
      color: #8a5e2e;
      font-weight: 800;
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
    }
    .word-token.word-low-conf {
      background: rgba(231,76,60,0.12);
      color: #c0392b;
      text-decoration: wavy underline rgba(231,76,60,0.5);
      text-underline-offset: 3px;
    }
    .word-token.word-normal {
      background: transparent;
      color: var(--text-main, #2a1d0c);
    }

    /* 단어별 토큰 (Interim — 물결 효과) */
    .word-token-interim {
      display: inline-block;
      margin: 0 1px;
      color: var(--text-muted, #888);
      opacity: 0.65;
      animation: interimWave 1.2s ease-in-out infinite;
      animation-fill-mode: both;
    }
    @keyframes interimWave {
      0%, 100% { opacity: 0.5; transform: translateY(0); }
      50%      { opacity: 0.9; transform: translateY(-1.5px); }
    }

    /* 확정 상태 — pulse 효과 제거 */
    .voice-transcript.is-final .word-token {
      animation-play-state: paused;
    }
    .voice-transcript.is-final {
      background: linear-gradient(90deg, rgba(138,94,46,0.04), rgba(212,175,111,0.08), rgba(138,94,46,0.04));
      background-size: 200% 100%;
      animation: finalShimmer 2s ease-in-out;
    }
    @keyframes finalShimmer {
      0% { background-position: 0% 0; }
      100% { background-position: -200% 0; }
    }

    /* 프로그레스 바 */
    .voice-progress-wrap {
      margin: 12px 16px 4px;
      padding: 10px 12px 12px;
      background: rgba(138,94,46,0.06);
      border-radius: 12px;
      animation: progressSlideIn 0.25s ease-out;
    }
    @keyframes progressSlideIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .voice-progress-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--primary-brown, #8a5e2e);
      margin-bottom: 8px;
      text-align: center;
      letter-spacing: 0.3px;
    }
    .voice-progress-track {
      width: 100%;
      height: 6px;
      background: rgba(138,94,46,0.15);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }
    .voice-progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #8a5e2e, #d4af6f, #8a5e2e);
      background-size: 200% 100%;
      border-radius: 3px;
      transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      animation: progressShimmer 1.5s linear infinite;
    }
    @keyframes progressShimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* 다크 모드 */
    body.theme-dark .word-token.word-known {
      background: rgba(212,175,111,0.18);
      color: var(--accent-gold, #d4af6f);
    }
    body.theme-dark .word-token.word-number {
      background: rgba(212,175,111,0.15);
      color: var(--accent-gold, #d4af6f);
    }
    body.theme-dark .word-token.word-low-conf {
      background: rgba(255,100,80,0.15);
      color: #ff7a66;
    }
    body.theme-dark .voice-progress-wrap {
      background: rgba(212,175,111,0.08);
    }
    body.theme-dark .voice-progress-track {
      background: rgba(212,175,111,0.15);
    }

    /* ══ 🦻 v69 G2: 청각 장애인 모드 ══ */

    /* 큰 시각 배너 (음성 대체) */
    .deaf-banner {
      position: fixed;
      top: 20px; left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 24px);
      max-width: 520px;
      padding: 20px 24px;
      border-radius: 20px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.25);
      z-index: 9800;
      display: flex;
      align-items: center;
      gap: 16px;
      animation: deafBannerIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      border: 3px solid transparent;
    }
    @keyframes deafBannerIn {
      from { opacity: 0; transform: translate(-50%, -24px) scale(0.95); }
      to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }
    .deaf-banner-out { animation: deafBannerOut 0.35s ease-in forwards; }
    @keyframes deafBannerOut {
      to { opacity: 0; transform: translate(-50%, -20px) scale(0.95); }
    }

    .deaf-banner-icon {
      font-size: 36px;
      line-height: 1;
      flex-shrink: 0;
    }
    .deaf-banner-text {
      flex: 1;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.4;
      word-break: keep-all;
    }
    .deaf-banner-close {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(0,0,0,0.15);
      color: inherit;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .deaf-banner-close:active { transform: scale(0.9); }

    /* 카테고리별 배경 */
    .deaf-banner-info {
      background: linear-gradient(135deg, #e3f2fd, #bbdefb);
      border-color: #1976d2;
      color: #0d47a1;
    }
    .deaf-banner-success {
      background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
      border-color: #388e3c;
      color: #1b5e20;
    }
    .deaf-banner-warning {
      background: linear-gradient(135deg, #fff8e1, #ffecb3);
      border-color: #f57c00;
      color: #e65100;
      animation: deafBannerIn 0.4s cubic-bezier(0.16, 1, 0.3, 1), warningPulse 1.2s infinite;
    }
    .deaf-banner-error {
      background: linear-gradient(135deg, #ffebee, #ffcdd2);
      border-color: #d32f2f;
      color: #b71c1c;
      animation: deafBannerIn 0.4s cubic-bezier(0.16, 1, 0.3, 1), errorShake 0.4s;
    }
    .deaf-banner-alert {
      background: linear-gradient(135deg, #fff3e0, #ffe0b2);
      border-color: #e65100;
      color: #bf360c;
      animation: deafBannerIn 0.4s cubic-bezier(0.16, 1, 0.3, 1), alertPulse 0.8s infinite;
    }
    @keyframes warningPulse {
      0%, 100% { box-shadow: 0 12px 48px rgba(245,124,0,0.3); }
      50% { box-shadow: 0 12px 48px rgba(245,124,0,0.7); }
    }
    @keyframes errorShake {
      0%, 100% { transform: translate(-50%, 0); }
      25% { transform: translate(calc(-50% - 8px), 0); }
      75% { transform: translate(calc(-50% + 8px), 0); }
    }
    @keyframes alertPulse {
      0%, 100% { box-shadow: 0 12px 48px rgba(230,81,0,0.3); }
      50% { box-shadow: 0 12px 48px rgba(230,81,0,0.8), 0 0 0 6px rgba(230,81,0,0.2); }
    }

    /* 다크 모드 */
    body.theme-dark .deaf-banner-info {
      background: linear-gradient(135deg, #0d47a1, #1565c0);
      color: #e3f2fd;
    }
    body.theme-dark .deaf-banner-success {
      background: linear-gradient(135deg, #1b5e20, #2e7d32);
      color: #e8f5e9;
    }
    body.theme-dark .deaf-banner-warning {
      background: linear-gradient(135deg, #e65100, #f57c00);
      color: #fff8e1;
    }
    body.theme-dark .deaf-banner-error {
      background: linear-gradient(135deg, #b71c1c, #c62828);
      color: #ffebee;
    }
    body.theme-dark .deaf-banner-alert {
      background: linear-gradient(135deg, #bf360c, #e65100);
      color: #fff3e0;
    }

    /* ══ 자막 강화 (deaf-mode 활성화 시) ══ */
    body.deaf-mode .voice-transcript-wrap {
      padding: 14px !important;
      margin: 14px 12px !important;
    }
    body.deaf-mode .voice-transcript {
      font-size: 22px !important;  /* 기본 대비 1.3배 */
      font-weight: 800 !important;
      line-height: 1.5 !important;
      min-height: 60px !important;
    }
    body.deaf-mode .word-token {
      font-size: 22px !important;
      padding: 4px 10px !important;
      margin: 2px !important;
    }
    body.deaf-mode .voice-status {
      font-size: 18px !important;
      font-weight: 800 !important;
    }
    body.deaf-mode .voice-noise-warn {
      font-size: 16px !important;
      padding: 14px 18px !important;
      border-width: 2px !important;
    }

    /* ══ 👴 v69 G3: 어르신 모드 ══ */
    /* 전체 UI를 1.25배 크기로 + 고대비 */

    body.senior-mode {
      font-size: 18px !important;
    }

    /* 헤더 */
    body.senior-mode h1, body.senior-mode h2, body.senior-mode h3 {
      font-size: 1.3em !important;
    }

    /* 탭 버튼 */
    body.senior-mode .tab-btn {
      font-size: 17px !important;
      padding: 16px 12px !important;
      min-height: 56px !important;
    }

    /* 메인 입력창 */
    body.senior-mode .val-input,
    body.senior-mode input[type="text"],
    body.senior-mode input[type="number"] {
      font-size: 22px !important;
      padding: 16px 18px !important;
      min-height: 56px !important;
    }

    /* 단위 선택 */
    body.senior-mode .unit-picker,
    body.senior-mode .unit-display {
      font-size: 18px !important;
      min-height: 56px !important;
    }

    /* 버튼 전반 */
    body.senior-mode button {
      min-height: 48px !important;
      font-size: 16px !important;
    }
    body.senior-mode .settings-row {
      min-height: 60px !important;
      padding: 16px 18px !important;
      font-size: 17px !important;
    }
    body.senior-mode .settings-row-icon {
      font-size: 22px !important;
    }

    /* 음성 관련 */
    body.senior-mode .voice-transcript {
      font-size: 24px !important;
      line-height: 1.6 !important;
      min-height: 80px !important;
      font-weight: 800 !important;
    }
    body.senior-mode .voice-status {
      font-size: 20px !important;
      font-weight: 800 !important;
    }
    body.senior-mode .voice-chip {
      font-size: 16px !important;
      padding: 14px 18px !important;
      min-height: 52px !important;
    }

    /* 플로팅 음성 버튼 — 더 크게 */
    body.senior-mode .floating-voice-btn {
      width: 72px !important;
      height: 72px !important;
    }
    body.senior-mode .floating-voice-btn .fvb-icon {
      font-size: 32px !important;
    }

    /* 결과 가격 표시 — 더 크고 눈에 띄게 */
    body.senior-mode .price-display,
    body.senior-mode [id*="priceText"],
    body.senior-mode [id*="priceValue"] {
      font-size: 28px !important;
      font-weight: 900 !important;
    }

    /* 공지/토스트 */
    body.senior-mode .toast,
    body.senior-mode .learn-toast-desc,
    body.senior-mode .learn-toast-title {
      font-size: 16px !important;
    }

    /* 자동완성 칩 더 크게 */
    body.senior-mode .vac-chip {
      font-size: 16px !important;
      padding: 12px 18px !important;
      min-height: 48px !important;
    }

    /* 스크롤 보조 */
    body.senior-mode {
      scroll-behavior: smooth !important;
    }

    /* 혼합 모드: senior + deaf 둘 다 켜지면 deaf가 우선 */
    body.senior-mode.deaf-mode .voice-transcript {
      font-size: 26px !important;
    }

    /* ══ 🎙️ v72: Siri/Google Assistant 가이드 모달 ══ */
    .ag-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 9600;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: agFadeIn 0.3s ease-out;
    }
    @keyframes agFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .ag-overlay[hidden] { display: none !important; }

    .ag-sheet {
      background: var(--card-bg, #fdfaf5);
      width: 100%;
      max-width: 560px;
      max-height: 90vh;
      border-radius: 24px 24px 0 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: agSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
    }
    @keyframes agSlideUp {
      from { transform: translateY(100%); }
      to   { transform: translateY(0); }
    }

    .ag-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      border-bottom: 1px solid rgba(138,94,46,0.15);
      flex-shrink: 0;
    }
    .ag-title {
      font-size: 18px;
      font-weight: 900;
      color: var(--primary-brown, #8a5e2e);
      margin: 0;
    }
    .ag-close {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(138,94,46,0.12);
      color: var(--text-main, #2a1d0c);
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .ag-close:active { transform: scale(0.9); }

    .ag-body {
      padding: 18px 22px 28px;
      overflow-y: auto;
      flex: 1;
      -webkit-overflow-scrolling: touch;
    }

    .ag-intro {
      padding: 14px 16px;
      background: linear-gradient(135deg, rgba(212,175,111,0.18), rgba(212,175,111,0.05));
      border-radius: 14px;
      font-size: 14px;
      font-weight: 700;
      color: var(--text-main, #2a1d0c);
      line-height: 1.5;
      margin-bottom: 20px;
      text-align: center;
    }

    .ag-section {
      margin-bottom: 24px;
      padding-bottom: 20px;
      border-bottom: 1px dashed rgba(138,94,46,0.2);
    }
    .ag-section:last-child {
      border-bottom: none;
    }

    .ag-section-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--primary-brown, #8a5e2e);
      margin-bottom: 14px;
    }

    .ag-steps {
      margin: 0 0 16px;
      padding-left: 22px;
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-main, #2a1d0c);
    }
    .ag-steps li {
      margin-bottom: 6px;
    }
    .ag-steps li b {
      color: var(--primary-brown, #8a5e2e);
      font-weight: 800;
    }

    .ag-code {
      margin-top: 8px;
      padding: 10px 12px;
      background: rgba(138,94,46,0.08);
      border-radius: 8px;
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
      font-size: 12px;
      word-break: break-all;
      color: var(--primary-brown, #8a5e2e);
      border: 1px solid rgba(138,94,46,0.15);
    }

    .ag-copy-btn {
      margin-top: 8px;
      padding: 8px 16px;
      border-radius: 10px;
      border: 1.5px solid var(--primary-brown, #8a5e2e);
      background: var(--primary-brown, #8a5e2e);
      color: white;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    .ag-copy-btn:active { transform: scale(0.97); }

    .ag-examples {
      margin-top: 14px;
      padding: 12px;
      background: rgba(138,94,46,0.04);
      border-radius: 12px;
    }
    .ag-examples-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--primary-brown, #8a5e2e);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .ag-example-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      font-size: 12px;
    }
    .ag-example-item:not(:last-child) {
      border-bottom: 1px dotted rgba(138,94,46,0.15);
    }
    .ag-example-label {
      flex-shrink: 0;
      font-weight: 700;
      color: var(--text-main, #2a1d0c);
      min-width: 80px;
    }
    .ag-example-url {
      flex: 1;
      font-family: ui-monospace, Menlo, monospace;
      font-size: 11px;
      color: var(--primary-brown, #8a5e2e);
      word-break: break-all;
      line-height: 1.4;
    }
    .ag-copy-mini {
      width: 32px; height: 32px;
      border-radius: 8px;
      border: 1px solid rgba(138,94,46,0.2);
      background: white;
      font-size: 14px;
      cursor: pointer;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .ag-copy-mini:active { transform: scale(0.9); }

    .ag-url-format {
      padding: 12px;
      background: rgba(212,175,111,0.12);
      border-radius: 10px;
      margin-bottom: 8px;
      text-align: center;
    }
    .ag-url-format code {
      font-family: ui-monospace, Menlo, monospace;
      font-size: 13px;
      color: var(--primary-brown, #8a5e2e);
    }
    .ag-url-format code b {
      color: #c0392b;
      font-weight: 900;
    }
    .ag-url-help {
      font-size: 12px;
      color: var(--text-muted, #888);
      line-height: 1.5;
    }
    .ag-url-help code {
      background: rgba(138,94,46,0.08);
      padding: 1px 5px;
      border-radius: 3px;
      font-family: ui-monospace, Menlo, monospace;
      font-size: 11px;
    }

    /* 복사 토스트 */
    .ag-copy-toast {
      position: fixed;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 20px;
      background: rgba(0,0,0,0.85);
      color: white;
      border-radius: 24px;
      font-size: 13px;
      font-weight: 700;
      z-index: 9999;
      animation: agToastIn 0.25s;
    }
    @keyframes agToastIn {
      from { opacity: 0; transform: translate(-50%, 12px); }
      to   { opacity: 1; transform: translate(-50%, 0); }
    }

    /* 다크 모드 */
    body.theme-dark .ag-sheet {
      background: var(--card-bg, #1a120a);
    }
    body.theme-dark .ag-title,
    body.theme-dark .ag-section-title,
    body.theme-dark .ag-examples-title,
    body.theme-dark .ag-url-format code,
    body.theme-dark .ag-code,
    body.theme-dark .ag-example-url {
      color: var(--accent-gold, #d4af6f);
    }
    body.theme-dark .ag-intro {
      background: linear-gradient(135deg, rgba(212,175,111,0.2), rgba(212,175,111,0.05));
    }
    body.theme-dark .ag-close {
      background: rgba(212,175,111,0.15);
    }
    body.theme-dark .ag-code {
      background: rgba(212,175,111,0.08);
      border-color: rgba(212,175,111,0.2);
    }
    body.theme-dark .ag-copy-btn {
      background: var(--accent-gold, #d4af6f);
      border-color: var(--accent-gold, #d4af6f);
      color: #1a120a;
    }
    body.theme-dark .ag-examples {
      background: rgba(212,175,111,0.06);
    }
    body.theme-dark .ag-copy-mini {
      background: rgba(212,175,111,0.08);
      border-color: rgba(212,175,111,0.2);
    }
    body.theme-dark .ag-url-format {
      background: rgba(212,175,111,0.1);
    }

    /* ══ 🎭 v75 J2: 캐릭터 음성 선택 모달 ══ */
    .char-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 9600;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: charFadeIn 0.3s ease-out;
    }
    @keyframes charFadeIn { from { opacity: 0; } to { opacity: 1; } }
    .char-overlay[hidden] { display: none !important; }

    .char-sheet {
      background: var(--card-bg, #fdfaf5);
      width: 100%;
      max-width: 520px;
      max-height: 85vh;
      border-radius: 24px 24px 0 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: charSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
    }
    @keyframes charSlideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }

    .char-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      border-bottom: 1px solid rgba(138,94,46,0.15);
    }
    .char-title {
      font-size: 18px;
      font-weight: 900;
      color: var(--primary-brown, #8a5e2e);
      margin: 0;
    }
    .char-close {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(138,94,46,0.12);
      color: var(--text-main, #2a1d0c);
      font-size: 16px;
      cursor: pointer;
    }
    .char-body {
      padding: 18px 22px 28px;
      overflow-y: auto;
      flex: 1;
    }
    .char-intro {
      padding: 12px 14px;
      background: linear-gradient(135deg, rgba(212,175,111,0.15), rgba(212,175,111,0.05));
      border-radius: 12px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-main, #2a1d0c);
      margin-bottom: 16px;
    }

    .char-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .char-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: rgba(138,94,46,0.04);
      border: 2px solid transparent;
      border-radius: 14px;
      transition: all 0.2s;
    }
    .char-item.active {
      background: linear-gradient(135deg, rgba(138,94,46,0.12), rgba(212,175,111,0.2));
      border-color: var(--primary-brown, #8a5e2e);
    }
    .char-icon {
      font-size: 32px;
      line-height: 1;
      flex-shrink: 0;
    }
    .char-info {
      flex: 1;
      min-width: 0;
    }
    .char-name {
      font-size: 15px;
      font-weight: 800;
      color: var(--text-main, #2a1d0c);
      margin-bottom: 2px;
    }
    .char-meta {
      font-size: 11px;
      color: var(--text-muted, #888);
      font-family: ui-monospace, Menlo, monospace;
    }
    .char-preview-btn {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 1.5px solid var(--primary-brown, #8a5e2e);
      background: white;
      color: var(--primary-brown, #8a5e2e);
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .char-preview-btn:active { transform: scale(0.9); }
    .char-select-btn {
      padding: 8px 14px;
      border-radius: 10px;
      border: none;
      background: var(--primary-brown, #8a5e2e);
      color: white;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    .char-item.active .char-select-btn {
      background: #4caf50;
    }
    .char-select-btn:active { transform: scale(0.95); }

    /* 다크 모드 */
    body.theme-dark .char-sheet {
      background: var(--card-bg, #1a120a);
    }
    body.theme-dark .char-title { color: var(--accent-gold, #d4af6f); }
    body.theme-dark .char-intro {
      background: linear-gradient(135deg, rgba(212,175,111,0.18), rgba(212,175,111,0.05));
    }
    body.theme-dark .char-item {
      background: rgba(212,175,111,0.06);
    }
    body.theme-dark .char-item.active {
      background: linear-gradient(135deg, rgba(212,175,111,0.2), rgba(138,94,46,0.15));
      border-color: var(--accent-gold, #d4af6f);
    }
    body.theme-dark .char-preview-btn {
      background: rgba(212,175,111,0.1);
      color: var(--accent-gold, #d4af6f);
      border-color: var(--accent-gold, #d4af6f);
    }
    body.theme-dark .char-select-btn {
      background: var(--accent-gold, #d4af6f);
      color: #1a120a;
    }

    /* ══ 🧠 v76 E1: LLM 설정 모달 ══ */
    .llm-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 9600;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: llmFadeIn 0.3s ease-out;
    }
    @keyframes llmFadeIn { from { opacity: 0; } to { opacity: 1; } }
    .llm-overlay[hidden] { display: none !important; }

    .llm-sheet {
      background: var(--card-bg, #fdfaf5);
      width: 100%;
      max-width: 560px;
      max-height: 90vh;
      border-radius: 24px 24px 0 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: llmSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
    }
    @keyframes llmSlideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }

    .llm-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      border-bottom: 1px solid rgba(138,94,46,0.15);
    }
    .llm-title {
      font-size: 18px;
      font-weight: 900;
      color: var(--primary-brown, #8a5e2e);
      margin: 0;
    }
    .llm-close {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(138,94,46,0.12);
      font-size: 16px;
      cursor: pointer;
    }

    .llm-body {
      padding: 18px 22px 28px;
      overflow-y: auto;
      flex: 1;
      -webkit-overflow-scrolling: touch;
    }

    .llm-intro {
      padding: 12px 14px;
      background: linear-gradient(135deg, rgba(76,175,80,0.12), rgba(76,175,80,0.04));
      border-left: 3px solid #4caf50;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.55;
      color: var(--text-main, #2a1d0c);
      margin-bottom: 18px;
    }

    .llm-field {
      margin-bottom: 16px;
    }
    .llm-label {
      display: block;
      font-size: 13px;
      font-weight: 800;
      color: var(--primary-brown, #8a5e2e);
      margin-bottom: 6px;
    }
    .llm-select, .llm-input {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1.5px solid rgba(138,94,46,0.25);
      background: white;
      color: var(--text-main, #2a1d0c);
      font-size: 14px;
      font-family: inherit;
      -webkit-appearance: none;
    }
    .llm-input {
      font-family: ui-monospace, Menlo, monospace;
      font-size: 13px;
      letter-spacing: 0.5px;
    }
    .llm-select:focus, .llm-input:focus {
      outline: none;
      border-color: var(--primary-brown, #8a5e2e);
    }
    .llm-hint {
      margin-top: 6px;
      font-size: 11px;
      color: var(--text-muted, #888);
      line-height: 1.5;
    }
    .llm-hint a {
      color: var(--primary-brown, #8a5e2e);
      text-decoration: none;
      font-weight: 700;
    }
    .llm-hint a:hover { text-decoration: underline; }

    .llm-actions {
      display: flex;
      gap: 10px;
      margin-top: 16px;
    }
    .llm-test-btn {
      flex: 1;
      padding: 12px;
      border-radius: 12px;
      border: 1.5px solid var(--primary-brown, #8a5e2e);
      background: var(--primary-brown, #8a5e2e);
      color: white;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
    }
    .llm-test-btn:disabled { opacity: 0.5; cursor: wait; }
    .llm-test-btn:active { transform: scale(0.97); }

    .llm-test-result {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 12px;
      line-height: 1.5;
      word-break: break-word;
    }
    .llm-test-result.testing {
      background: rgba(138,94,46,0.08);
      color: var(--text-muted, #888);
    }
    .llm-test-result.success {
      background: rgba(76,175,80,0.12);
      color: #2e7d32;
      border: 1px solid rgba(76,175,80,0.3);
    }
    .llm-test-result.error {
      background: rgba(231,76,60,0.12);
      color: #c0392b;
      border: 1px solid rgba(231,76,60,0.3);
    }

    .llm-usage {
      margin-top: 20px;
      padding: 14px 16px;
      background: rgba(138,94,46,0.04);
      border-radius: 12px;
    }
    .llm-usage-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--primary-brown, #8a5e2e);
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .llm-usage-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .llm-usage-item {
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-main, #2a1d0c);
    }

    .llm-warning {
      margin-top: 16px;
      padding: 12px;
      background: rgba(255,152,0,0.1);
      border-left: 3px solid #ff9800;
      border-radius: 8px;
      font-size: 12px;
      line-height: 1.5;
      color: #e65100;
    }

    /* 다크 모드 */
    body.theme-dark .llm-sheet {
      background: var(--card-bg, #1a120a);
    }
    body.theme-dark .llm-title,
    body.theme-dark .llm-label,
    body.theme-dark .llm-usage-title {
      color: var(--accent-gold, #d4af6f);
    }
    body.theme-dark .llm-select,
    body.theme-dark .llm-input {
      background: rgba(212,175,111,0.08);
      color: var(--accent-gold, #d4af6f);
      border-color: rgba(212,175,111,0.25);
    }
    body.theme-dark .llm-test-btn {
      background: var(--accent-gold, #d4af6f);
      color: #1a120a;
      border-color: var(--accent-gold, #d4af6f);
    }
    body.theme-dark .llm-usage {
      background: rgba(212,175,111,0.06);
    }
    body.theme-dark .llm-warning {
      background: rgba(255,152,0,0.08);
      color: #ffb74d;
    }

    /* ══ 🔧 v78: LLM 모달 모바일 반응형 수정 ══ */
    /* 모달 body 넘침 방지 */
    .llm-overlay {
      padding: 0 !important;
      overflow-x: hidden !important;
    }
    .llm-sheet {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    .llm-body {
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    /* input/select이 컨테이너 넘어가지 않도록 */
    .llm-input, .llm-select {
      max-width: 100% !important;
      box-sizing: border-box !important;
      font-size: 16px !important;  /* iOS zoom 방지 */
    }
    /* 긴 URL 링크 줄바꿈 */
    .llm-hint, .llm-hint a {
      word-break: break-all !important;
      overflow-wrap: break-word !important;
    }
    .llm-usage-item, .llm-intro {
      word-break: keep-all !important;
      overflow-wrap: break-word !important;
    }

    /* 캐릭터 모달도 동일 수정 */
    .char-overlay {
      padding: 0 !important;
      overflow-x: hidden !important;
    }
    .char-sheet {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    /* 어시스턴트 가이드 모달도 */
    .ag-overlay {
      padding: 0 !important;
      overflow-x: hidden !important;
    }
    .ag-sheet {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    .ag-body {
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      max-width: 100% !important;
    }

    /* ══ 🎨 v79: 설정 메뉴 디자인 개선 ══ */

    /* 설정 overlay - 전체 화면 여백 제거 */
    .settings-overlay {
      padding: 0 !important;
      overflow-x: hidden !important;
    }
    .settings-sheet {
      width: 100% !important;
      max-width: 560px !important;
      box-sizing: border-box !important;
      margin: 0 auto;
    }

    /* 설정 헤더 - 고정 */
    .settings-head {
      position: sticky !important;
      top: 0 !important;
      z-index: 10 !important;
      background: var(--card-bg, #fdfaf5) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border-bottom: 1px solid rgba(138,94,46,0.1) !important;
    }
    body.theme-dark .settings-head {
      background: var(--card-bg, #1a120a) !important;
      border-bottom-color: rgba(212,175,111,0.15) !important;
    }

    /* 🔍 검색 바 */
    .settings-search-wrap {
      position: relative;
      margin: 12px 16px 16px;
      display: flex;
      align-items: center;
      background: rgba(138,94,46,0.06);
      border: 1.5px solid rgba(138,94,46,0.12);
      border-radius: 14px;
      padding: 0 12px;
      transition: all 0.2s;
    }
    .settings-search-wrap:focus-within {
      border-color: var(--primary-brown, #8a5e2e);
      background: rgba(138,94,46,0.1);
      box-shadow: 0 0 0 3px rgba(138,94,46,0.12);
    }
    .settings-search-icon {
      font-size: 16px;
      margin-right: 8px;
      opacity: 0.6;
      flex-shrink: 0;
    }
    .settings-search-input {
      flex: 1;
      border: none;
      background: transparent;
      padding: 12px 0;
      font-size: 15px;
      color: var(--text-main, #2a1d0c);
      font-family: inherit;
      outline: none;
      min-width: 0;
    }
    .settings-search-input::placeholder {
      color: var(--text-muted, #999);
      font-size: 14px;
    }
    .settings-search-clear {
      width: 24px; height: 24px;
      border-radius: 50%;
      border: none;
      background: rgba(138,94,46,0.15);
      color: var(--text-main, #2a1d0c);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
      margin-left: 6px;
    }
    .settings-search-clear:active { transform: scale(0.9); }
    body.theme-dark .settings-search-wrap {
      background: rgba(212,175,111,0.06);
      border-color: rgba(212,175,111,0.15);
    }
    body.theme-dark .settings-search-input {
      color: var(--accent-gold, #d4af6f);
    }

    .settings-no-results {
      margin: 40px 16px;
      padding: 24px;
      text-align: center;
      font-size: 14px;
      color: var(--text-muted, #888);
      background: rgba(138,94,46,0.04);
      border-radius: 14px;
    }

    /* 🎨 그룹 라벨 디자인 개선 */
    .settings-group {
      margin: 0 12px 8px !important;
      padding: 0 !important;
      border-radius: 16px !important;
      overflow: hidden;
      background: transparent !important;
    }
    .settings-group-label {
      padding: 14px 16px 8px !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      color: var(--primary-brown, #8a5e2e) !important;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      opacity: 0.7;
    }
    body.theme-dark .settings-group-label {
      color: var(--accent-gold, #d4af6f) !important;
    }

    /* 📋 행 디자인 통일 - 카드 스타일 */
    .settings-group > .settings-row,
    .settings-group > .settings-row.vp-inline-row {
      background: rgba(138,94,46,0.04) !important;
      border-radius: 0 !important;
      border: none !important;
      border-bottom: 1px solid rgba(138,94,46,0.08) !important;
      margin: 0 !important;
      padding: 14px 16px !important;
      min-height: 52px !important;
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
      box-sizing: border-box !important;
      width: 100% !important;
    }
    .settings-group > .settings-row:first-child {
      border-top-left-radius: 16px !important;
      border-top-right-radius: 16px !important;
    }
    .settings-group > .settings-row:last-child,
    .settings-group > .settings-row:last-of-type {
      border-bottom-left-radius: 16px !important;
      border-bottom-right-radius: 16px !important;
      border-bottom: none !important;
    }
    .settings-group > .settings-row:only-child {
      border-radius: 16px !important;
    }
    .settings-group > .settings-row:active {
      background: rgba(138,94,46,0.12) !important;
      transform: scale(0.99);
    }
    body.theme-dark .settings-group > .settings-row {
      background: rgba(212,175,111,0.05) !important;
      border-bottom-color: rgba(212,175,111,0.1) !important;
    }
    body.theme-dark .settings-group > .settings-row:active {
      background: rgba(212,175,111,0.12) !important;
    }

    /* ⭐ 강조 row (AI 등) */
    .settings-row-highlight {
      background: linear-gradient(135deg, rgba(138,94,46,0.1), rgba(212,175,111,0.15)) !important;
      border-left: 3px solid var(--primary-brown, #8a5e2e) !important;
    }

    /* 📝 row 내부 요소들 */
    .settings-row-icon {
      font-size: 20px;
      flex-shrink: 0;
      width: 28px;
      text-align: center;
    }
    .settings-row-label {
      flex: 1;
      font-size: 14px !important;
      font-weight: 600 !important;
      color: var(--text-main, #2a1d0c) !important;
      text-align: left;
      line-height: 1.35;
      word-break: keep-all;
    }
    .settings-row-value {
      font-size: 13px !important;
      font-weight: 700 !important;
      color: var(--primary-brown, #8a5e2e) !important;
      padding: 4px 10px;
      background: rgba(138,94,46,0.08);
      border-radius: 10px;
      flex-shrink: 0;
    }
    body.theme-dark .settings-row-label {
      color: var(--accent-gold, #d4af6f) !important;
    }
    body.theme-dark .settings-row-value {
      color: var(--accent-gold, #d4af6f) !important;
      background: rgba(212,175,111,0.1) !important;
    }
    .settings-row-arrow {
      font-size: 22px;
      color: var(--text-muted, #999);
      opacity: 0.5;
      margin-left: 4px;
      flex-shrink: 0;
    }

    /* 🔍 검색 하이라이트 */
    .settings-row.search-highlight {
      animation: searchPulse 1.5s ease-in-out;
    }
    @keyframes searchPulse {
      0% { background: rgba(138,94,46,0.04); }
      30% { background: rgba(212,175,111,0.25); }
      100% { background: rgba(138,94,46,0.04); }
    }

    /* 언어 선택 그리드 개선 */
    .settings-lang-grid {
      padding: 8px;
      background: rgba(138,94,46,0.04);
      border-radius: 16px;
      margin: 0 4px;
    }
    body.theme-dark .settings-lang-grid {
      background: rgba(212,175,111,0.05);
    }

    /* 📱 모바일 최적화 */
    @media (max-width: 520px) {
      .settings-sheet {
        border-radius: 16px 16px 0 0 !important;
      }
      .settings-group {
        margin: 0 10px 6px !important;
      }
      .settings-row-label {
        font-size: 13px !important;
      }
      .settings-row-value {
        font-size: 12px !important;
        padding: 3px 8px !important;
      }
    }

    /* 🔘 Setting modal close button 개선 */
    .settings-close {
      width: 38px !important;
      height: 38px !important;
      border-radius: 50% !important;
      background: rgba(138,94,46,0.08) !important;
      font-size: 14px !important;
    }
    .settings-close:active { transform: scale(0.9); }

    /* 설정 전체 높이 및 스크롤 */
    .settings-sheet {
      max-height: 95vh !important;
      display: flex;
      flex-direction: column;
    }
    .settings-sheet > .settings-group,
    .settings-sheet > .settings-search-wrap,
    .settings-sheet > .settings-no-results {
      flex-shrink: 0;
    }

    /* ══ 🔁 v80: 다시 듣기 버튼 ══ */
    .voice-replay {
      position: absolute;
      top: 16px;
      left: 16px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px 8px 12px;
      border-radius: 24px;
      border: none;
      background: linear-gradient(135deg, #8a5e2e, #a87443);
      color: white;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 4px 12px rgba(138,94,46,0.3);
      z-index: 10;
      -webkit-tap-highlight-color: transparent;
      animation: replayFadeIn 0.3s ease-out;
    }
    @keyframes replayFadeIn {
      from { opacity: 0; transform: translateX(-8px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .voice-replay:active {
      transform: scale(0.94);
      box-shadow: 0 2px 6px rgba(138,94,46,0.4);
    }
    .voice-replay-icon {
      font-size: 16px;
      line-height: 1;
    }
    .voice-replay-text {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    /* TTS 재생 중일 때 미세한 펄스 */
    .voice-replay.speaking {
      animation: replayPulse 1.5s infinite;
    }
    @keyframes replayPulse {
      0%, 100% { box-shadow: 0 4px 12px rgba(138,94,46,0.3); }
      50% { box-shadow: 0 4px 20px rgba(212,175,111,0.6); }
    }

    /* 다크 모드 */
    body.theme-dark .voice-replay {
      background: linear-gradient(135deg, #d4af6f, #b8923d);
      color: #1a120a;
      box-shadow: 0 4px 12px rgba(212,175,111,0.3);
    }
    body.theme-dark .voice-replay:active {
      box-shadow: 0 2px 6px rgba(212,175,111,0.5);
    }

    /* Mobile: 작은 화면 */
    @media (max-width: 400px) {
      .voice-replay {
        top: 12px;
        left: 12px;
        padding: 7px 12px 7px 10px;
      }
      .voice-replay-text {
        display: none; /* 작은 화면은 아이콘만 */
      }
      .voice-replay {
        padding: 8px;
        border-radius: 50%;
        width: 38px;
        height: 38px;
        justify-content: center;
      }
    }

    /* ══ 🔧 v81: 음성 모달 닫기 버튼 강조 ══ */
    /* 자동 닫기 제거 → 사용자 인지를 위해 닫기 버튼 눈에 띄게 */
    .voice-close {
      width: 44px !important;
      height: 44px !important;
      border-radius: 50% !important;
      background: linear-gradient(135deg, rgba(138,94,46,0.12), rgba(138,94,46,0.2)) !important;
      color: var(--primary-brown, #8a5e2e) !important;
      font-size: 18px !important;
      font-weight: 800 !important;
      border: 1.5px solid rgba(138,94,46,0.25) !important;
      box-shadow: 0 2px 8px rgba(138,94,46,0.12) !important;
      transition: all 0.2s !important;
      position: absolute !important;
      top: 14px !important;
      right: 14px !important;
      z-index: 10 !important;
      cursor: pointer;
    }
    .voice-close:hover, .voice-close:focus {
      background: linear-gradient(135deg, rgba(138,94,46,0.2), rgba(138,94,46,0.3)) !important;
      transform: scale(1.05);
    }
    .voice-close:active {
      transform: scale(0.9);
    }
    body.theme-dark .voice-close {
      background: linear-gradient(135deg, rgba(212,175,111,0.15), rgba(212,175,111,0.25)) !important;
      color: var(--accent-gold, #d4af6f) !important;
      border-color: rgba(212,175,111,0.3) !important;
    }
    body.theme-dark .voice-close:hover {
      background: linear-gradient(135deg, rgba(212,175,111,0.25), rgba(212,175,111,0.35)) !important;
    }

    /* 결과 표시된 후 닫기 버튼 살짝 펄스 (사용자 주의 환기) */
    .voice-overlay:not([hidden]) .voice-close.attention {
      animation: closeAttention 2s ease-in-out 2;
    }
    @keyframes closeAttention {
      0%, 100% {
        box-shadow: 0 2px 8px rgba(138,94,46,0.12);
      }
      50% {
        box-shadow: 0 0 0 8px rgba(138,94,46,0.15),
                    0 2px 8px rgba(138,94,46,0.2);
      }
    }

    /* 닫기 힌트 텍스트 (결과 하단에 표시) */
    .voice-close-hint {
      margin-top: 12px;
      padding: 8px 12px;
      font-size: 11px;
      color: var(--text-muted, #888);
      text-align: center;
      opacity: 0.7;
      letter-spacing: 0.3px;
    }
    .voice-close-hint kbd {
      display: inline-block;
      padding: 1px 5px;
      background: rgba(138,94,46,0.12);
      border-radius: 4px;
      font-family: inherit;
      font-weight: 700;
      margin: 0 2px;
    }
    body.theme-dark .voice-close-hint kbd {
      background: rgba(212,175,111,0.15);
    }

    /* ══ 🎚️ v82: 흔들기 민감도 슬라이더 ══ */
    .settings-slider-row {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      padding: 14px 16px !important;
      gap: 10px !important;
    }
    .slider-row-header {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
    }
    .slider-row-header .settings-row-icon {
      font-size: 20px;
      flex-shrink: 0;
      width: 28px;
      text-align: center;
    }
    .slider-row-header .settings-row-label {
      flex: 1;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-main, #2a1d0c);
    }
    .slider-row-body {
      padding: 4px 0 0 40px;
    }
    .shake-slider {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: rgba(138,94,46,0.15);
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      margin: 8px 0;
    }
    .shake-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, #8a5e2e, #d4af6f);
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(138,94,46,0.3);
      transition: transform 0.1s;
    }
    .shake-slider::-webkit-slider-thumb:active {
      transform: scale(1.2);
    }
    .shake-slider::-moz-range-thumb {
      width: 22px; height: 22px;
      border: none;
      border-radius: 50%;
      background: linear-gradient(135deg, #8a5e2e, #d4af6f);
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(138,94,46,0.3);
    }
    .slider-hints {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--text-muted, #888);
      margin-bottom: 10px;
    }
    .shake-test-btn {
      width: 100%;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1.5px solid var(--primary-brown, #8a5e2e);
      background: var(--primary-brown, #8a5e2e);
      color: white;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
      transition: all 0.15s;
    }
    .shake-test-btn:active {
      transform: scale(0.97);
    }
    .shake-test-result {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 12px;
      line-height: 1.55;
      text-align: center;
    }
    .shake-test-result.testing {
      background: rgba(138,94,46,0.08);
      color: var(--text-main, #2a1d0c);
      animation: testingPulse 1s infinite;
    }
    @keyframes testingPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    .shake-test-result.success {
      background: rgba(76,175,80,0.12);
      color: #2e7d32;
      border: 1px solid rgba(76,175,80,0.3);
    }
    .shake-test-result.warning {
      background: rgba(255,152,0,0.1);
      color: #e65100;
      border: 1px solid rgba(255,152,0,0.3);
    }
    .shake-test-result.error {
      background: rgba(231,76,60,0.12);
      color: #c0392b;
    }

    /* 다크 모드 */
    body.theme-dark .shake-slider {
      background: rgba(212,175,111,0.2);
    }
    body.theme-dark .shake-slider::-webkit-slider-thumb,
    body.theme-dark .shake-slider::-moz-range-thumb {
      background: linear-gradient(135deg, #d4af6f, #b8923d);
    }
    body.theme-dark .shake-test-btn {
      background: var(--accent-gold, #d4af6f);
      color: #1a120a;
      border-color: var(--accent-gold, #d4af6f);
    }
    body.theme-dark .shake-test-result.testing {
      background: rgba(212,175,111,0.08);
      color: var(--accent-gold, #d4af6f);
    }

    /* 모바일 */
    @media (max-width: 400px) {
      .slider-row-body {
        padding-left: 0;
      }
    }

    /* ══ 🎤 v83: 다시 질문 버튼 ══ */
    .voice-continue {
      position: absolute;
      top: 60px;
      left: 16px;
      display: none;
      align-items: center;
      gap: 6px;
      padding: 8px 14px 8px 12px;
      border-radius: 24px;
      border: none;
      background: linear-gradient(135deg, #4caf50, #66bb6a);
      color: white;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 4px 12px rgba(76,175,80,0.3);
      z-index: 10;
      -webkit-tap-highlight-color: transparent;
      animation: replayFadeIn 0.3s ease-out;
    }
    .voice-continue:active {
      transform: scale(0.94);
    }
    .voice-continue-icon {
      font-size: 16px;
    }
    .voice-continue-text {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    body.theme-dark .voice-continue {
      background: linear-gradient(135deg, #66bb6a, #4caf50);
      color: white;
    }

    @media (max-width: 400px) {
      .voice-continue {
        top: 58px;
        left: 12px;
        padding: 7px 10px;
      }
      .voice-continue-text {
        display: none;
      }
      .voice-continue {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        justify-content: center;
      }
    }

    /* ══ 🎤 v84: 마이크 아이콘 탭 가능 시각 힌트 ══ */
    .voice-mic-wrap[style*="cursor: pointer"],
    .voice-mic-wrap[style*="cursor:pointer"] {
      position: relative;
      transition: transform 0.15s;
    }
    .voice-mic-wrap[style*="cursor: pointer"]:active,
    .voice-mic-wrap[style*="cursor:pointer"]:active {
      transform: scale(0.96);
    }
    /* 결과 후 마이크 호버 시 살짝 밝아지게 */
    .voice-mic-wrap[style*="cursor: pointer"]:hover .voice-mic-icon,
    .voice-mic-wrap[style*="cursor:pointer"]:hover .voice-mic-icon {
      filter: brightness(1.1);
    }
    /* 결과 후 "탭해서 다시 질문" 힌트 */
    .voice-status.can-restart::after {
      content: " 🎤";
      animation: micHint 2s infinite;
      display: inline-block;
    }
    @keyframes micHint {
      0%, 100% { opacity: 0.4; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.15); }
    }

    /* ══ 🎯 v87: 하단 큰 액션 버튼 바 ══ */
    .voice-bottom-actions {
      display: flex;
      gap: 10px;
      padding: 14px 16px 18px;
      margin-top: 12px;
      border-top: 1px solid rgba(138,94,46,0.08);
      background: linear-gradient(to top, rgba(138,94,46,0.03), transparent);
    }

    .voice-btn-bottom {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 12px;
      border-radius: 14px;
      border: none;
      font-size: 15px;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: all 0.15s;
      min-height: 56px;
    }
    .voice-btn-bottom:active {
      transform: scale(0.96);
    }

    .voice-btn-icon {
      font-size: 20px;
      line-height: 1;
    }
    .voice-btn-text {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    /* 🎤 다시 질문 — 메인 액션 (초록) */
    .voice-btn-continue {
      background: linear-gradient(135deg, #4caf50, #66bb6a);
      color: white;
      box-shadow: 0 4px 14px rgba(76,175,80,0.35);
    }
    .voice-btn-continue:active {
      box-shadow: 0 2px 8px rgba(76,175,80,0.5);
    }

    /* ✕ 닫기 — 보조 액션 (갈색) */
    .voice-btn-close {
      background: rgba(138,94,46,0.1);
      color: var(--primary-brown, #8a5e2e);
      border: 1.5px solid rgba(138,94,46,0.25);
    }
    .voice-btn-close:active {
      background: rgba(138,94,46,0.2);
    }

    /* 다크 모드 */
    body.theme-dark .voice-bottom-actions {
      border-top-color: rgba(212,175,111,0.1);
      background: linear-gradient(to top, rgba(212,175,111,0.05), transparent);
    }
    body.theme-dark .voice-btn-close {
      background: rgba(212,175,111,0.1);
      color: var(--accent-gold, #d4af6f);
      border-color: rgba(212,175,111,0.3);
    }
    body.theme-dark .voice-btn-continue {
      background: linear-gradient(135deg, #66bb6a, #4caf50);
    }

    /* 🎯 v87: 기존 상단 작은 버튼들은 하단 버튼 있으므로 숨김 */
    .voice-continue {
      display: none !important;
    }
    /* 기존 상단 ✕도 좀 더 작게 */
    .voice-close {
      width: 38px !important;
      height: 38px !important;
      font-size: 14px !important;
    }

    /* 모바일 작은 화면 */
    @media (max-width: 400px) {
      .voice-bottom-actions {
        padding: 12px 12px 14px;
        gap: 8px;
      }
      .voice-btn-bottom {
        min-height: 50px;
        padding: 14px 10px;
        font-size: 14px;
      }
      .voice-btn-icon { font-size: 18px; }
      .voice-btn-text { font-size: 14px; }
    }

    /* ══ 🌐 v89: 관리자 / 개인 모드 스위치 ══ */
    .llm-mode-switch {
      display: flex;
      gap: 6px;
      padding: 4px;
      background: rgba(138,94,46,0.08);
      border-radius: 12px;
      margin-bottom: 18px;
    }
    .llm-mode-btn {
      flex: 1;
      padding: 10px 12px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--text-muted, #888);
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .llm-mode-btn.active {
      background: white;
      color: var(--primary-brown, #8a5e2e);
      box-shadow: 0 2px 6px rgba(138,94,46,0.15);
    }
    .llm-mode-btn:active {
      transform: scale(0.96);
    }
    body.theme-dark .llm-mode-switch {
      background: rgba(212,175,111,0.08);
    }
    body.theme-dark .llm-mode-btn.active {
      background: rgba(212,175,111,0.2);
      color: var(--accent-gold, #d4af6f);
    }

    /* Admin 상태 표시 */
    .llm-admin-info {
      padding: 14px;
      background: rgba(76,175,80,0.06);
      border-left: 3px solid #4caf50;
      border-radius: 10px;
      margin-bottom: 12px;
    }
    .llm-admin-status {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.6;
      margin-bottom: 8px;
      color: var(--text-main, #2a1d0c);
    }
    .llm-admin-status.ready {
      color: #2e7d32;
    }
    .llm-admin-status.unavailable {
      color: #e65100;
    }
    .llm-admin-desc {
      font-size: 12px;
      color: var(--text-muted, #888);
      line-height: 1.5;
    }
    body.theme-dark .llm-admin-info {
      background: rgba(76,175,80,0.1);
    }
    body.theme-dark .llm-admin-status {
      color: var(--accent-gold, #d4af6f);
    }
    body.theme-dark .llm-admin-status.ready {
      color: #81c784;
    }

    /* ══ 🎯 v92: 간소화 On/Off 토글 UI ══ */
    .llm-main-card {
      background: linear-gradient(135deg, rgba(138,94,46,0.04), rgba(212,175,111,0.06));
      border: 1px solid rgba(138,94,46,0.12);
      border-radius: 16px;
      padding: 18px;
      margin-bottom: 18px;
    }
    .llm-status-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .llm-status-icon {
      font-size: 36px;
      flex-shrink: 0;
      line-height: 1;
    }
    .llm-status-info {
      flex: 1;
      min-width: 0;
    }
    .llm-status-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text-main, #2a1d0c);
      margin-bottom: 4px;
    }
    .llm-status-desc {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted, #888);
      line-height: 1.5;
    }

    /* iOS 스타일 토글 */
    .llm-switch {
      position: relative;
      display: inline-block;
      width: 52px;
      height: 30px;
      flex-shrink: 0;
      cursor: pointer;
    }
    .llm-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .llm-switch-slider {
      position: absolute;
      inset: 0;
      background: rgba(138,94,46,0.2);
      border-radius: 30px;
      transition: background 0.25s;
    }
    .llm-switch-slider::before {
      content: "";
      position: absolute;
      width: 24px;
      height: 24px;
      left: 3px;
      top: 3px;
      background: white;
      border-radius: 50%;
      transition: transform 0.25s;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .llm-switch input:checked + .llm-switch-slider {
      background: linear-gradient(135deg, #4caf50, #66bb6a);
    }
    .llm-switch input:checked + .llm-switch-slider::before {
      transform: translateX(22px);
    }
    .llm-switch:active .llm-switch-slider::before {
      width: 28px;
    }

    /* 고급 설정 details */
    .llm-advanced {
      background: rgba(138,94,46,0.04);
      border: 1px solid rgba(138,94,46,0.12);
      border-radius: 12px;
      margin-bottom: 14px;
      overflow: hidden;
    }
    .llm-advanced > summary {
      padding: 12px 16px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-main, #2a1d0c);
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .llm-advanced > summary:hover {
      background: rgba(138,94,46,0.06);
    }
    .llm-advanced[open] > summary {
      border-bottom: 1px solid rgba(138,94,46,0.1);
    }
    .llm-advanced-body {
      padding: 14px 16px;
    }

    /* 다크 모드 */
    body.theme-dark .llm-main-card {
      background: linear-gradient(135deg, rgba(212,175,111,0.05), rgba(138,94,46,0.08));
      border-color: rgba(212,175,111,0.15);
    }
    body.theme-dark .llm-switch-slider {
      background: rgba(212,175,111,0.2);
    }
    body.theme-dark .llm-advanced {
      background: rgba(212,175,111,0.04);
      border-color: rgba(212,175,111,0.15);
    }

    /* 🗑️ v92: 이전 버전 스타일 숨김 (안전) */
    .llm-mode-switch,
    .llm-admin-info,
    .llm-personal-section:not([style*="display:block"]) {
      /* 사용 안 함 - 기존 CSS는 유지하되 여기서 비노출 처리 */
    }

    /* 작은 화면 대응 */
    @media (max-width: 400px) {
      .llm-status-icon { font-size: 30px; }
      .llm-status-title { font-size: 15px; }
      .llm-status-desc { font-size: 11px; }
      .llm-switch { width: 46px; height: 26px; }
      .llm-switch-slider::before { width: 20px; height: 20px; }
      .llm-switch input:checked + .llm-switch-slider::before {
        transform: translateX(20px);
      }
    }

    /* ══ 🧠 v93: AI 답변 전용 박스 ══ */
    .voice-ai-answer {
      margin: 14px 16px 0;
      padding: 0;
      background: linear-gradient(135deg, rgba(138,94,46,0.04), rgba(212,175,111,0.08));
      border: 1.5px solid rgba(138,94,46,0.18);
      border-radius: 14px;
      overflow: hidden;
      animation: aiAnswerFadeIn 0.4s ease-out;
    }
    @keyframes aiAnswerFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .voice-ai-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: rgba(138,94,46,0.08);
      border-bottom: 1px solid rgba(138,94,46,0.12);
    }
    .voice-ai-icon {
      font-size: 18px;
    }
    .voice-ai-title {
      flex: 1;
      font-size: 13px;
      font-weight: 800;
      color: var(--primary-brown, #8a5e2e);
      letter-spacing: 0.3px;
    }
    .voice-ai-copy {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: none;
      background: rgba(138,94,46,0.12);
      color: var(--primary-brown, #8a5e2e);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .voice-ai-copy:active {
      transform: scale(0.92);
      background: rgba(138,94,46,0.2);
    }
    .voice-ai-body {
      padding: 14px 16px 16px;
      font-size: 14px;
      line-height: 1.65;
      color: var(--text-main, #2a1d0c);
      font-weight: 500;
      max-height: 280px;
      overflow-y: auto;
      white-space: pre-wrap;
      word-break: break-word;
      -webkit-overflow-scrolling: touch;
    }
    .voice-ai-body::-webkit-scrollbar {
      width: 4px;
    }
    .voice-ai-body::-webkit-scrollbar-thumb {
      background: rgba(138,94,46,0.3);
      border-radius: 2px;
    }

    /* 다크 모드 */
    body.theme-dark .voice-ai-answer {
      background: linear-gradient(135deg, rgba(212,175,111,0.05), rgba(138,94,46,0.08));
      border-color: rgba(212,175,111,0.2);
    }
    body.theme-dark .voice-ai-header {
      background: rgba(212,175,111,0.1);
      border-bottom-color: rgba(212,175,111,0.15);
    }
    body.theme-dark .voice-ai-title {
      color: var(--accent-gold, #d4af6f);
    }
    body.theme-dark .voice-ai-copy {
      background: rgba(212,175,111,0.15);
      color: var(--accent-gold, #d4af6f);
    }
    body.theme-dark .voice-ai-body {
      color: var(--text-main, #f0e5d6);
    }

    /* 작은 화면 */
    @media (max-width: 400px) {
      .voice-ai-answer { margin: 12px 12px 0; }
      .voice-ai-body {
        font-size: 13px;
        padding: 12px 14px 14px;
        max-height: 220px;
      }
    }

    /* 🌐 v102: 언어 전환 애니메이션 */
    [data-i18n], [data-i18n-placeholder] {
      transition: opacity 200ms ease;
    }
    body.lang-switching [data-i18n],
    body.lang-switching [data-i18n-placeholder] {
      opacity: 0;
    }
    
    /* 설정 행 자체에도 부드러운 페이드 */
    body.lang-switching .settings-row-label,
    body.lang-switching .settings-group-label {
      opacity: 0.3;
    }
    .settings-row-label, .settings-group-label {
      transition: opacity 180ms ease;
    }
    
    /* 🎬 v102: 언어 전환 시 샥 효과 */
    @keyframes langSwitchFade {
      0% { opacity: 1; transform: translateY(0); }
      50% { opacity: 0.3; transform: translateY(-3px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    body.lang-switching .settings-title,
    body.lang-switching .settings-row-label,
    body.lang-switching .settings-group-label {
      animation: langSwitchFade 400ms ease;
    }

    /* 🆕 v105: AI 답변 더보기 */
    .voice-ai-expand {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      margin-top: 10px;
      padding: 10px 14px;
      border: 1px dashed var(--accent-gold, #d4af6f);
      background: rgba(212, 175, 111, 0.08);
      color: var(--primary-brown, #8a5e2e);
      font-size: 13px;
      font-weight: 700;
      border-radius: 10px;
      cursor: pointer;
      transition: all 200ms ease;
    }
    .voice-ai-expand:hover {
      background: rgba(212, 175, 111, 0.18);
      border-style: solid;
    }
    .voice-ai-expand:active {
      transform: scale(0.98);
    }
    .voice-ai-expand.expanded {
      background: rgba(212, 175, 111, 0.2);
      border-style: solid;
    }

    .voice-ai-detail {
      margin-top: 10px;
      padding: 14px 16px;
      background: rgba(250, 246, 241, 0.6);
      border-left: 3px solid var(--accent-gold, #d4af6f);
      border-radius: 8px;
      font-size: 13.5px;
      line-height: 1.65;
      color: var(--text-main, #2a2520);
      max-height: 400px;
      overflow-y: auto;
      white-space: pre-wrap;
      animation: aiDetailSlide 300ms ease;
    }

    @keyframes aiDetailSlide {
      0% { opacity: 0; transform: translateY(-8px); max-height: 0; }
      100% { opacity: 1; transform: translateY(0); max-height: 400px; }
    }

    /* 다크모드 */
    body.theme-dark .voice-ai-expand {
      background: rgba(212, 175, 111, 0.1);
      color: var(--accent-gold, #d4af6f);
      border-color: rgba(212, 175, 111, 0.4);
    }
    body.theme-dark .voice-ai-expand:hover {
      background: rgba(212, 175, 111, 0.18);
    }
    body.theme-dark .voice-ai-detail {
      background: rgba(42, 37, 32, 0.5);
      color: var(--text-main, #f0e5d6);
    }

    /* 작은 화면 */
    @media (max-width: 400px) {
      .voice-ai-detail {
        font-size: 13px;
        padding: 12px 14px;
        max-height: 300px;
      }
    }

    /* 🎙️ v106: 음성 목소리 선택 모달 */
    .voice-picker-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(4px);
      z-index: 9999;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: vpFadeIn 220ms ease;
    }
    @keyframes vpFadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    .voice-picker-sheet {
      width: 100%;
      max-width: 480px;
      background: var(--card-bg, #faf6f1);
      border-radius: 22px 22px 0 0;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      animation: vpSlideUp 280ms cubic-bezier(0.25, 1, 0.5, 1);
      overflow: hidden;
    }
    @keyframes vpSlideUp {
      0% { transform: translateY(100%); }
      100% { transform: translateY(0); }
    }

    .voice-picker-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--line, #e6ddd0);
      background: linear-gradient(180deg, rgba(212,175,111,0.08), transparent);
    }
    .voice-picker-icon { font-size: 24px; }
    .voice-picker-title {
      flex: 1;
      margin: 0;
      font-size: 17px;
      font-weight: 800;
      color: var(--primary-brown, #8a5e2e);
    }
    .voice-picker-close {
      width: 32px; height: 32px;
      border-radius: 50%;
      border: none;
      background: rgba(0,0,0,0.06);
      font-size: 14px;
      color: var(--text-muted, #8a7a66);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .voice-picker-close:hover { background: rgba(0,0,0,0.12); }

    /* 탭 */
    .voice-picker-tabs {
      display: flex;
      gap: 6px;
      padding: 12px 14px 8px;
      border-bottom: 1px solid var(--line, #e6ddd0);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .vp-tab {
      flex-shrink: 0;
      padding: 8px 14px;
      border: 1px solid var(--line, #e6ddd0);
      background: transparent;
      color: var(--text-muted, #8a7a66);
      font-size: 13px;
      font-weight: 700;
      border-radius: 20px;
      cursor: pointer;
      transition: all 180ms ease;
      white-space: nowrap;
    }
    .vp-tab:hover { background: rgba(212,175,111,0.08); }
    .vp-tab.active {
      background: var(--primary-brown, #8a5e2e);
      color: white;
      border-color: var(--primary-brown, #8a5e2e);
    }

    /* 정보 안내 */
    .voice-picker-info {
      padding: 10px 20px;
      background: rgba(212,175,111,0.1);
      font-size: 12.5px;
      color: var(--text-muted, #8a7a66);
      line-height: 1.5;
      border-bottom: 1px solid var(--line, #e6ddd0);
    }

    /* 목소리 리스트 */
    .voice-picker-list {
      flex: 1;
      overflow-y: auto;
      padding: 10px 14px;
      -webkit-overflow-scrolling: touch;
    }
    .voice-picker-list::-webkit-scrollbar {
      width: 6px;
    }
    .voice-picker-list::-webkit-scrollbar-thumb {
      background: rgba(138, 94, 46, 0.2);
      border-radius: 4px;
    }

    .vp-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      margin-bottom: 6px;
      background: var(--tab-bg, #fff);
      border: 1.5px solid var(--line, #e6ddd0);
      border-radius: 12px;
      cursor: pointer;
      transition: all 180ms ease;
      position: relative;
    }
    .vp-item:hover {
      border-color: var(--accent-gold, #d4af6f);
      background: rgba(212,175,111,0.04);
      transform: translateX(2px);
    }
    .vp-item:active {
      transform: translateX(2px) scale(0.99);
    }
    .vp-item.selected {
      border-color: var(--primary-brown, #8a5e2e);
      background: rgba(138, 94, 46, 0.06);
      box-shadow: 0 0 0 3px rgba(212, 175, 111, 0.15);
    }
    .vp-item.neural {
      background: linear-gradient(135deg, rgba(212,175,111,0.06), rgba(138,94,46,0.04));
    }

    .vp-gender {
      font-size: 22px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .vp-gender.female {
      background: rgba(255, 182, 193, 0.3);
      color: #c2185b;
    }
    .vp-gender.male {
      background: rgba(173, 216, 230, 0.35);
      color: #1565c0;
    }
    .vp-gender.unknown {
      background: rgba(158, 158, 158, 0.2);
      color: #616161;
    }

    .vp-info {
      flex: 1;
      min-width: 0;
    }
    .vp-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-main, #2a2520);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .vp-lang {
      font-size: 11px;
      color: var(--text-muted, #8a7a66);
      margin-top: 2px;
      font-family: monospace;
    }
    .vp-neural-badge {
      display: inline-block;
      padding: 2px 8px;
      background: linear-gradient(135deg, #d4af6f, #8a5e2e);
      color: white;
      font-size: 10px;
      font-weight: 800;
      border-radius: 6px;
      letter-spacing: 0.3px;
    }

    .vp-actions-inline {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }
    .vp-test-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--line, #e6ddd0);
      background: transparent;
      color: var(--primary-brown, #8a5e2e);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .vp-test-btn:hover {
      background: rgba(212,175,111,0.12);
      border-color: var(--accent-gold, #d4af6f);
    }
    .vp-check {
      color: var(--primary-brown, #8a5e2e);
      font-size: 20px;
      font-weight: 900;
      opacity: 0;
      transition: opacity 180ms;
    }
    .vp-item.selected .vp-check { opacity: 1; }

    /* 빈 상태 */
    .vp-empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-muted, #8a7a66);
      font-size: 14px;
    }
    .vp-empty-icon { font-size: 42px; margin-bottom: 12px; }

    /* 하단 액션 */
    .voice-picker-actions {
      padding: 14px 20px;
      border-top: 1px solid var(--line, #e6ddd0);
      background: var(--card-bg, #faf6f1);
    }
    .vp-btn-auto {
      width: 100%;
      padding: 14px;
      border: 2px dashed var(--accent-gold, #d4af6f);
      background: rgba(212, 175, 111, 0.08);
      color: var(--primary-brown, #8a5e2e);
      font-size: 14px;
      font-weight: 700;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: all 180ms ease;
    }
    .vp-btn-auto:hover {
      background: rgba(212, 175, 111, 0.18);
      border-style: solid;
    }
    .vp-btn-auto:active {
      transform: scale(0.98);
    }

    /* 다크모드 */
    body.theme-dark .voice-picker-sheet {
      background: var(--card-bg, #2a2520);
    }
    body.theme-dark .vp-item {
      background: rgba(255, 255, 255, 0.03);
      border-color: rgba(212, 175, 111, 0.2);
    }
    body.theme-dark .vp-item:hover {
      background: rgba(212, 175, 111, 0.08);
    }
    body.theme-dark .vp-item.selected {
      background: rgba(212, 175, 111, 0.15);
    }
    body.theme-dark .voice-picker-info {
      background: rgba(212, 175, 111, 0.08);
    }
    body.theme-dark .vp-tab {
      border-color: rgba(212, 175, 111, 0.2);
    }
    body.theme-dark .vp-name {
      color: var(--text-main, #f0e5d6);
    }

    /* 데스크탑 대응 */
    @media (min-width: 600px) {
      .voice-picker-overlay {
        align-items: center;
      }
      .voice-picker-sheet {
        border-radius: 20px;
        max-height: 80vh;
      }
    }

    /* 🎙️ v107: 설정 내부 인라인 목소리 선택 */
    .settings-inline-panel {
      margin: -4px 12px 10px;
      padding: 12px;
      background: rgba(212, 175, 111, 0.06);
      border: 1px solid var(--line, #e6ddd0);
      border-radius: 14px;
      animation: inlineSlide 260ms ease;
      overflow: hidden;
    }
    @keyframes inlineSlide {
      0% { opacity: 0; max-height: 0; transform: translateY(-8px); }
      100% { opacity: 1; max-height: 600px; transform: translateY(0); }
    }

    .vp-inline-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 2px;
    }
    .vp-inline-tabs .vp-tab {
      flex-shrink: 0;
      padding: 6px 12px;
      border: 1px solid var(--line, #e6ddd0);
      background: var(--card-bg, white);
      color: var(--text-muted, #8a7a66);
      font-size: 12px;
      font-weight: 700;
      border-radius: 16px;
      cursor: pointer;
      transition: all 180ms ease;
      white-space: nowrap;
    }
    .vp-inline-tabs .vp-tab.active {
      background: var(--primary-brown, #8a5e2e);
      color: white;
      border-color: var(--primary-brown, #8a5e2e);
    }

    .vp-inline-info {
      padding: 8px 10px;
      background: rgba(212, 175, 111, 0.12);
      border-radius: 8px;
      font-size: 11.5px;
      color: var(--text-muted, #8a7a66);
      line-height: 1.5;
      margin-bottom: 10px;
    }

    .vp-inline-list {
      max-height: 280px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 10px;
    }
    .vp-inline-list::-webkit-scrollbar {
      width: 4px;
    }
    .vp-inline-list::-webkit-scrollbar-thumb {
      background: rgba(138, 94, 46, 0.2);
      border-radius: 2px;
    }

    .vp-inline-list .vp-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      margin-bottom: 4px;
      background: var(--card-bg, white);
      border: 1.5px solid transparent;
      border-radius: 10px;
      cursor: pointer;
      transition: all 150ms ease;
    }
    .vp-inline-list .vp-item:hover {
      background: rgba(212, 175, 111, 0.08);
      border-color: rgba(212, 175, 111, 0.3);
    }
    .vp-inline-list .vp-item.selected {
      border-color: var(--primary-brown, #8a5e2e);
      background: rgba(138, 94, 46, 0.06);
    }
    .vp-inline-list .vp-item.neural {
      background: linear-gradient(135deg, rgba(212,175,111,0.04), rgba(138,94,46,0.02));
    }
    .vp-inline-list .vp-gender {
      width: 32px; height: 32px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .vp-inline-list .vp-gender.female { background: rgba(255, 182, 193, 0.3); color: #c2185b; }
    .vp-inline-list .vp-gender.male { background: rgba(173, 216, 230, 0.35); color: #1565c0; }
    .vp-inline-list .vp-gender.unknown { background: rgba(158, 158, 158, 0.18); color: #616161; }
    .vp-inline-list .vp-info { flex: 1; min-width: 0; }
    .vp-inline-list .vp-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-main, #2a2520);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .vp-inline-list .vp-lang {
      font-size: 10.5px;
      color: var(--text-muted, #8a7a66);
      margin-top: 1px;
      font-family: monospace;
    }
    .vp-inline-list .vp-neural-badge {
      display: inline-block;
      padding: 1px 6px;
      background: linear-gradient(135deg, #d4af6f, #8a5e2e);
      color: white;
      font-size: 9px;
      font-weight: 800;
      border-radius: 4px;
      letter-spacing: 0.3px;
    }
    .vp-inline-list .vp-test-btn {
      width: 30px; height: 30px;
      border-radius: 50%;
      border: 1px solid var(--line, #e6ddd0);
      background: transparent;
      color: var(--primary-brown, #8a5e2e);
      font-size: 13px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .vp-inline-list .vp-test-btn:hover {
      background: rgba(212, 175, 111, 0.12);
    }
    .vp-inline-list .vp-check {
      color: var(--primary-brown, #8a5e2e);
      font-size: 18px;
      font-weight: 900;
      opacity: 0;
      transition: opacity 180ms;
    }
    .vp-inline-list .vp-item.selected .vp-check { opacity: 1; }
    .vp-inline-list .vp-actions-inline {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .vp-inline-empty {
      text-align: center;
      padding: 30px 20px;
      color: var(--text-muted, #8a7a66);
      font-size: 13px;
    }
    .vp-inline-empty-icon { font-size: 36px; margin-bottom: 8px; opacity: 0.6; }

    .vp-inline-auto {
      width: 100%;
      padding: 10px;
      border: 1.5px dashed var(--accent-gold, #d4af6f);
      background: rgba(212, 175, 111, 0.08);
      color: var(--primary-brown, #8a5e2e);
      font-size: 13px;
      font-weight: 700;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 180ms ease;
    }
    .vp-inline-auto:hover {
      background: rgba(212, 175, 111, 0.18);
      border-style: solid;
    }

    /* 확장 화살표 회전 */
    #sSettVoicePickRow[aria-expanded="true"] #sSettVoicePickArrow {
      transform: rotate(90deg);
    }
    #sSettVoicePickArrow {
      transition: transform 240ms ease;
      display: inline-block;
    }

    /* 다크모드 */
    body.theme-dark .settings-inline-panel {
      background: rgba(212, 175, 111, 0.04);
    }
    body.theme-dark .vp-inline-list .vp-item {
      background: rgba(255, 255, 255, 0.03);
    }
    body.theme-dark .vp-inline-list .vp-name {
      color: var(--text-main, #f0e5d6);
    }
    body.theme-dark .vp-inline-tabs .vp-tab {
      background: rgba(255, 255, 255, 0.03);
    }

/* ══ 🛡️ v125: 첫 진입 시 면책 동의 모달 ══ */
.legal-consent-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 8, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: legalFadeIn 0.3s ease-out;
}
@keyframes legalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.legal-consent-sheet {
  background: var(--bg-card, #fff);
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  border-radius: 20px;
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: legalSlideUp 0.35s cubic-bezier(0.16,1,0.3,1);
  overflow-y: auto;
}
@keyframes legalSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
body.dark-mode .legal-consent-sheet { background: #1c1712; color: #ede4d8; }
.legal-consent-icon {
  font-size: 44px;
  text-align: center;
  margin-bottom: 8px;
}
.legal-consent-title {
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-brown, #8a5e2e);
  margin: 0 0 18px;
  letter-spacing: -0.5px;
}
.legal-consent-body {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 16px;
  padding-right: 4px;
}
.legal-consent-section {
  padding: 12px 14px;
  background: rgba(196,152,80,0.06);
  border: 1px solid rgba(196,152,80,0.18);
  border-radius: 12px;
  margin-bottom: 8px;
}
.legal-consent-section.warn {
  background: rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.25);
}
body.dark-mode .legal-consent-section { background: rgba(255,200,120,0.04); border-color: rgba(255,200,120,0.12); }
body.dark-mode .legal-consent-section.warn { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); }
.legal-consent-section-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--primary-brown, #8a5e2e);
  margin-bottom: 6px;
}
.legal-consent-section.warn .legal-consent-section-title { color: #dc2626; }
body.dark-mode .legal-consent-section.warn .legal-consent-section-title { color: #f87171; }
.legal-consent-section p {
  font-size: 12.5px;
  color: var(--text-main, #3a2c1a);
  line-height: 1.65;
  margin: 0;
}
.legal-consent-section strong { color: var(--primary-brown, #8a5e2e); font-weight: 800; }
.legal-consent-section.warn strong { color: #dc2626; }
body.dark-mode .legal-consent-section.warn strong { color: #f87171; }
.legal-consent-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 8px 0 4px;
}
.legal-consent-links a {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary-brown, #8a5e2e);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--bg-soft, #f7efe3);
  border-radius: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-main, #3a2c1a);
}
body.dark-mode .legal-consent-check { background: #251c14; }
.legal-consent-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-brown, #8a5e2e);
  flex: 0 0 18px;
  margin-top: 1px;
  cursor: pointer;
}
.legal-consent-check strong { color: var(--primary-brown, #8a5e2e); font-weight: 800; }
.legal-consent-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: var(--primary-brown, #8a5e2e);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: -0.3px;
}
.legal-consent-btn:hover:not(:disabled) {
  background: #6e4a24;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(120,80,30,0.3);
}
.legal-consent-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--text-muted, #8a7a68);
}

/* 🌐 v130: 면책 동의 모달 언어 선택 바 */
.legal-consent-langs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
  padding: 6px;
  background: var(--bg-soft, #f7efe3);
  border-radius: 999px;
}
body.dark-mode .legal-consent-langs { background: #251c14; }
.lc-lang-btn {
  flex: 0 0 auto;
  padding: 7px 12px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #8a7a68);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.lc-lang-btn:hover {
  color: var(--primary-brown, #8a5e2e);
  background: rgba(196,152,80,0.08);
}
.lc-lang-btn.active {
  background: var(--primary-brown, #8a5e2e);
  color: #fff;
  border-color: var(--primary-brown, #8a5e2e);
  box-shadow: 0 2px 6px rgba(120,80,30,0.2);
}
@media (max-width: 380px) {
  .lc-lang-btn { padding: 6px 9px; font-size: 11.5px; }
}

/* 💬 v131: 관리자 문의 모달 */
.inquiry-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(20, 14, 8, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  animation: legalFadeIn 0.25s ease-out;
}
.inquiry-sheet {
  background: var(--bg-card, #fff);
  width: 100%; max-width: 480px; max-height: 92vh;
  border-radius: 18px;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  overflow: hidden;
  animation: legalSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
}
body.dark-mode .inquiry-sheet { background: #1c1712; color: #ede4d8; }

.inquiry-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border, rgba(196,160,110,0.22));
  background: linear-gradient(160deg,rgba(196,152,80,0.08) 0%,transparent 100%);
}
.inquiry-icon { font-size: 28px; line-height: 1; }
.inquiry-title {
  margin: 0; font-size: 17px; font-weight: 900;
  color: var(--text-main, #3a2c1a); letter-spacing: -0.3px;
}
.inquiry-sub { font-size: 11.5px; color: var(--text-muted, #8a7a68); font-weight: 600; margin-top: 2px; }
.inquiry-close {
  margin-left: auto;
  background: var(--bg-soft, #f7efe3); border: 1px solid var(--border);
  color: var(--text-muted); width: 30px; height: 30px; border-radius: 50%;
  font-size: 14px; cursor: pointer; flex: 0 0 30px;
  display: inline-flex; align-items: center; justify-content: center;
}
body.dark-mode .inquiry-close { background: #251c14; }

.inquiry-body { padding: 14px 18px 6px; overflow-y: auto; flex: 1; }
.inquiry-label {
  display: block; font-size: 12px; font-weight: 800;
  color: var(--text-muted, #8a7a68); margin: 12px 0 6px;
  letter-spacing: 0.02em;
}
.inquiry-label:first-child { margin-top: 0; }
.inquiry-counter {
  float: right; font-size: 10.5px; font-weight: 700;
  color: var(--text-faint, #b8ab9c);
}
.inquiry-input, .inquiry-textarea {
  width: 100%; padding: 11px 13px;
  background: var(--bg-soft, #faf6f1);
  border: 1.5px solid rgba(196,160,110,0.28);
  border-radius: 10px;
  color: var(--text-main, #3a2c1a);
  font-size: 13.5px; font-weight: 600;
  font-family: inherit; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.dark-mode .inquiry-input, body.dark-mode .inquiry-textarea {
  background: #18140f; color: #ede4d8;
}
.inquiry-input:focus, .inquiry-textarea:focus {
  border-color: var(--primary-brown, #8a5e2e);
  box-shadow: 0 0 0 3px rgba(138,94,46,0.1);
}
.inquiry-textarea { resize: vertical; min-height: 100px; line-height: 1.55; }

.inquiry-topics {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.inquiry-topic-btn {
  padding: 10px 8px; background: var(--bg-soft, #faf6f1);
  border: 1.5px solid var(--border, rgba(196,160,110,0.22));
  border-radius: 10px; font-size: 12.5px; font-weight: 700;
  color: var(--text-main, #3a2c1a); cursor: pointer;
  transition: all 0.15s; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
body.dark-mode .inquiry-topic-btn { background: #18140f; color: #ede4d8; }
.inquiry-topic-btn:hover { border-color: var(--primary-brown, #8a5e2e); }
.inquiry-topic-btn.active {
  background: var(--primary-brown, #8a5e2e); color: #fff;
  border-color: var(--primary-brown, #8a5e2e);
}

.inquiry-note {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: rgba(59,130,246,0.06);
  border: 1px solid rgba(59,130,246,0.2);
  padding: 9px 12px; border-radius: 9px;
  line-height: 1.55; margin-top: 12px;
}
body.dark-mode .inquiry-note { background: rgba(59,130,246,0.1); }

.inquiry-status { font-size: 12px; font-weight: 700; min-height: 18px; margin-top: 8px; padding: 0 2px; }
.inquiry-status.ok { color: #10b981; }
.inquiry-status.err { color: #c82b2b; }

.inquiry-actions {
  display: flex; gap: 8px; padding: 12px 18px 14px;
  border-top: 1px solid var(--border);
}
.inquiry-btn-cancel, .inquiry-btn-submit {
  flex: 1; height: 42px; border-radius: 10px;
  font-size: 13px; font-weight: 800; cursor: pointer;
  font-family: inherit; transition: all 0.15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.inquiry-btn-cancel {
  background: var(--bg-soft, #f7efe3); color: var(--text-muted);
  border: 1.5px solid var(--border);
}
body.dark-mode .inquiry-btn-cancel { background: #251c14; }
.inquiry-btn-submit {
  background: var(--primary-brown, #8a5e2e); color: #fff;
  border: 1.5px solid var(--primary-brown, #8a5e2e);
}
.inquiry-btn-submit:hover:not(:disabled) {
  background: #6e4a24;
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(120,80,30,0.3);
}
.inquiry-btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }