:root {
    --bg: #0f0608;
    --bg-card: #1a0d10;
    --bg-elevated: #241418;
    --burgundy: #722028;
    --burgundy-light: #9a3440;
    --gold: #c9a961;
    --gold-muted: #8a7440;
    --gold-bright: #e4c77a;
    --cream: #ede4d0;
    --ink: #d4c8b5;
    --ink-dim: #8a7e6d;
    --divider: rgba(201, 169, 97, 0.15);
    --glow: rgba(201, 169, 97, 0.3);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--cream);
    min-height: 100vh;
    padding: 1.5rem 1.25rem 3rem;
    position: relative;
    overflow-x: hidden;
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: 
      radial-gradient(ellipse at top, rgba(114, 32, 40, 0.25) 0%, transparent 60%),
      radial-gradient(ellipse at bottom right, rgba(201, 169, 97, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  .container { max-width: 560px; margin: 0 auto; position: relative; z-index: 1; }
  header { text-align: center; padding: 3rem 0 2.5rem; position: relative; }
  .header-ornament { display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
  .logo-mark {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.7rem; letter-spacing: 0.32em; color: var(--gold); text-transform: uppercase;
  }
  h1 {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
    font-size: clamp(2.4rem, 7.5vw, 3.15rem); color: var(--cream);
    letter-spacing: 0.02em; line-height: 1.2; margin-bottom: 1rem;
  }
  h1 em { font-style: italic; font-weight: 500; color: var(--gold-bright); }
  .tagline {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1rem; color: var(--ink-dim); letter-spacing: 0.05em;
  }
  .mode-tabs {
    display: flex; gap: 0; margin-bottom: 1.25rem;
    border: 1px solid var(--divider); border-radius: 2px;
    padding: 0.25rem; background: var(--bg-card);
  }
  .mode-tab {
    flex: 1; padding: 0.75rem 0.5rem; background: transparent;
    color: var(--ink-dim); font-size: 0.7rem; letter-spacing: 0.2em;
    border: none; cursor: pointer; font-family: 'Inter', sans-serif;
    text-transform: uppercase; font-weight: 500; border-radius: 2px;
    transition: all 0.3s;
  }
  .mode-tab.active { background: var(--bg-elevated); color: var(--gold-bright); }
  .mode-tab:hover:not(.active) { color: var(--ink); }

  /* === 일일 사용량 인디케이터 === */
  /* 스캔 헤더 우측 상단 — 무료/토큰 텍스트 + 충전 버튼 */
  .scan-header { position: relative; }
  .usage-indicators-wrap {
    position: absolute; top: 0.25rem; right: 0;
    display: flex; align-items: center; gap: 0.9rem;
    z-index: 2;
  }
  .usage-indicators-wrap[hidden] { display: none !important; }

  /* 통계 텍스트 — 배경/보더 없이 */
  .usage-stat {
    display: inline-flex; align-items: center; gap: 0.35rem;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
  }
  .usage-stat[hidden] { display: none !important; }

  .ui-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    font-weight: 500;
    opacity: 0.85;
  }
  .ui-value {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--gold-bright);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  /* 무료 — 소진 상태 */
  .usage-stat.low .ui-value { color: #e4a0a8; }
  .usage-stat.depleted .ui-value {
    color: var(--ink-dim);
    text-decoration: line-through;
    opacity: 0.55;
  }

  /* 동전 SVG (토큰 앞) */
  .ui-coin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 12px; height: 12px;
    color: var(--gold-bright);
    filter: drop-shadow(0 0 2px rgba(201,169,97,0.3));
    flex-shrink: 0;
  }
  .ui-coin svg { width: 100%; height: 100%; display: block; }

  /* 충전 버튼 — 우측 분리, 작은 pill */
  .usage-charge-btn {
    display: inline-flex; align-items: center; gap: 0.28rem;
    padding: 0.32rem 0.65rem 0.32rem 0.55rem;
    background: rgba(201,169,97,0.1);
    border: 1px solid rgba(201,169,97,0.28);
    border-radius: 14px;
    cursor: pointer; transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    line-height: 1;
    color: var(--gold-bright);
    appearance: none; -webkit-appearance: none;
  }
  .usage-charge-btn:hover {
    background: rgba(201,169,97,0.2);
    border-color: var(--gold);
  }
  .ucb-plus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--bg);
    font-size: 0.75rem; font-weight: 700;
    line-height: 1;
  }
  .ucb-text {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    font-weight: 500;
  }

  @media (max-width: 400px) {
    .usage-indicators-wrap { gap: 0.6rem; }
    .ucb-text { display: none; }   /* 좁은 화면에선 + 버튼만 */
    .usage-charge-btn { padding: 0.32rem; }
  }

  /* 기존 usage-indicator (레거시 — 사용 안 함, 호환성용) */
  .usage-indicator {
    display: none !important;
  }
  .usage-indicator-label, .usage-indicator-count { display: none; }
  .usage-dots {
    display: inline-flex; gap: 4px; margin-left: 0.5rem;
  }
  .usage-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--bg-elevated); border: 1px solid var(--gold-muted);
  }
  .usage-dot.used { background: var(--gold); border-color: var(--gold); }

  /* === 한도 초과 모달 === */
  .limit-modal {
    background: var(--bg-card); border: 1px solid var(--gold-muted);
    border-radius: 12px; padding: 2rem 1.5rem; text-align: center;
    margin-top: 1rem;
  }
  .limit-modal-icon {
    font-size: 2.5rem; margin-bottom: 1rem; opacity: 0.7;
  }
  .limit-modal-title {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--gold-bright); font-size: 1.5rem; margin-bottom: 0.5rem;
  }
  .limit-modal-text {
    color: var(--ink); font-size: 0.9rem; line-height: 1.6;
    margin-bottom: 0.5rem;
  }
  .limit-modal-reset {
    color: var(--ink-dim); font-size: 0.8rem; margin-bottom: 1.5rem;
    font-family: 'Cormorant Garamond', serif; font-style: italic;
  }
  .limit-modal-actions {
    display: flex; flex-direction: column; gap: 0.5rem;
  }
  .limit-modal-actions button {
    padding: 0.85rem; font-size: 0.85rem;
    border-radius: 8px; cursor: pointer; font-weight: 500;
    border: none; font-family: 'Inter', sans-serif;
    letter-spacing: 0.02em;
  }
  .limit-modal-actions .primary {
    background: var(--gold); color: var(--bg);
  }
  .limit-modal-actions .primary:hover { background: var(--gold-bright); }
  .limit-modal-actions .secondary {
    background: transparent; color: var(--ink-dim);
    border: 1px solid var(--divider);
  }
  .limit-modal-actions .secondary:hover { color: var(--ink); border-color: var(--gold-muted); }

  /* ============================================================
     이미지 팝업 (와인 사진 탭 시 확대)
     ============================================================ */
  .img-popup-overlay {
    position: fixed; inset: 0;
    background: rgba(8, 4, 6, 0.72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    z-index: 400;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .img-popup-overlay.is-open { opacity: 1; pointer-events: auto; }
  .img-popup-card {
    position: relative;
    background: var(--bg-card, #1a0e11);
    border-radius: 14px; padding: 0.9rem;
    border: 1px solid var(--divider);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65);
    max-width: min(520px, 92vw);
    max-height: min(720px, 88vh);
    transform: scale(0.92);
    transition: transform 0.26s cubic-bezier(0.25, 0.8, 0.35, 1);
    display: flex; align-items: center; justify-content: center;
  }
  .img-popup-overlay.is-open .img-popup-card { transform: scale(1); }
  .img-popup-img {
    display: block;
    max-width: 100%; max-height: calc(88vh - 2rem);
    width: auto; height: auto;
    object-fit: contain; border-radius: 8px;
  }
  .img-popup-close {
    position: absolute;
    top: -14px; right: -14px;
    width: 36px; height: 36px; border-radius: 50%;
    background: #1a0e11;
    border: 1.5px solid #c9a961;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: #e4c77a;
  }
  .img-popup-close:hover { background: #2a1a1e; }
  .wine-hero { cursor: zoom-in; }
  .wine-hero img { cursor: zoom-in; }

  /* ============================================================
     APP DRAWER (좌측 슬라이드 메뉴)
     ============================================================ */
  .drawer-toggle-btn {
    position: fixed;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 80;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(15, 10, 12, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1.5px solid #c9a961;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
  }
  .drawer-toggle-btn:hover, .drawer-toggle-btn:active {
    background: rgba(30, 20, 22, 0.95);
    border-color: #e4c77a;
    transform: scale(1.05);
  }
  .hamburger-icon {
    display: block;
    position: relative;
    width: 18px;
    height: 14px;
    pointer-events: none;
  }
  .hamburger-icon > span {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #e4c77a;
    border-radius: 1px;
  }
  .hamburger-icon > span:nth-child(1) { top: 0; }
  .hamburger-icon > span:nth-child(2) { top: 6px; }
  .hamburger-icon > span:nth-child(3) { top: 12px; }

  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 4, 6, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 150;
  }
  body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }

  .app-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: linear-gradient(180deg, #130a0c, #180d10 60%, #1a0e11);
    border-right: 1px solid var(--divider);
    box-shadow: 4px 0 32px rgba(0,0,0,0.6);
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.35, 1);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body.drawer-open .app-drawer { transform: translateX(0); }

  .tab-page, .bottom-tabs {
    transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.35, 1);
  }
  body.drawer-open .tab-page,
  body.drawer-open .bottom-tabs { transform: translateX(280px); }
  body.drawer-open .drawer-toggle-btn { opacity: 0; pointer-events: none; }

  .drawer-header {
    padding: 1.1rem 1.2rem 0.9rem;
    border-bottom: 1px solid var(--divider);
    display: flex; align-items: center; justify-content: space-between;
  }
  .drawer-brand {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-size: 1.35rem;
    color: var(--gold); letter-spacing: 0.02em;
  }
  .drawer-close {
    width: 32px; height: 32px; border-radius: 0;
    background: transparent; border: none;
    color: #b5a889; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; position: relative;
  }
  .drawer-close:hover { color: #ede4d0; }
  .drawer-close-x {
    display: block; position: relative;
    width: 14px; height: 14px; pointer-events: none;
  }
  .drawer-close-x::before, .drawer-close-x::after {
    content: ''; display: block; position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1.8px; margin-top: -0.9px;
    background: #d4c29a; border-radius: 1px;
  }
  .drawer-close-x::before { transform: rotate(45deg); }
  .drawer-close-x::after  { transform: rotate(-45deg); }

  .drawer-account {
    padding: 1rem 1.2rem;
    display: flex; align-items: center; gap: 0.8rem;
    border-bottom: 1px solid var(--divider);
    background: rgba(201, 169, 97, 0.03);
  }
  .drawer-account-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--gold-muted);
    display: flex; align-items: center; justify-content: center;
    color: var(--bg); font-family: 'Inter', sans-serif;
    font-weight: 600; font-size: 0.9rem;
    overflow: hidden; flex-shrink: 0;
  }
  .drawer-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .drawer-account-info { flex: 1; min-width: 0; }
  .drawer-account-name {
    font-size: 0.88rem; color: var(--cream); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .drawer-account-email {
    font-size: 0.7rem; color: var(--ink-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-top: 0.1rem;
  }

  .drawer-body {
    flex: 1; overflow-y: auto; padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch; min-height: 0;
  }
  .drawer-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--divider);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.2));
    padding-bottom: env(safe-area-inset-bottom);
  }

  .drawer-section { padding: 0.5rem 0 0; }
  .drawer-section-title {
    font-family: 'Inter', sans-serif; font-size: 0.65rem;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-dim); font-weight: 500;
  }
  .drawer-section-toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 1.2rem;
    background: transparent; border: none;
    cursor: pointer; text-align: left;
    transition: background 0.15s;
  }
  .drawer-section-toggle:hover { background: rgba(201, 169, 97, 0.04); }
  .drawer-section-toggle-count {
    font-size: 0.7rem; color: var(--gold-muted);
    margin-left: 0.4rem;
    font-family: 'Inter', sans-serif; letter-spacing: 0.02em;
  }
  .drawer-chevron {
    display: block; width: 8px; height: 8px;
    border-right: 1.5px solid #c9a961;
    border-bottom: 1.5px solid #c9a961;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }
  .drawer-section-toggle[aria-expanded="true"] .drawer-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
  }

  .drawer-wine-list {
    display: flex; flex-direction: column; gap: 0.1rem;
    max-height: 0; overflow: hidden;
    padding: 0 1.2rem;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .drawer-wine-list.is-expanded {
    max-height: 60vh; overflow-y: auto;
    padding: 0.1rem 1.2rem 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .drawer-wine-item {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.5rem 0.6rem; border-radius: 6px;
    cursor: pointer; transition: background 0.15s;
  }
  .drawer-wine-item:hover, .drawer-wine-item:active {
    background: rgba(201, 169, 97, 0.08);
  }
  .drawer-wine-thumb {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 4px; background: var(--bg-elevated);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; color: var(--gold-muted); opacity: 0.6;
  }
  .drawer-wine-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .drawer-wine-info { flex: 1; min-width: 0; }
  .drawer-wine-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.9rem; color: var(--cream); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .drawer-wine-meta {
    font-size: 0.65rem; color: var(--ink-dim);
    letter-spacing: 0.08em; margin-top: 0.1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .drawer-empty {
    padding: 0.7rem 0.6rem;
    color: var(--ink-dim); font-size: 0.78rem;
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    text-align: center; opacity: 0.85;
  }

  .drawer-divider { height: 1px; background: var(--divider); margin: 0.7rem 0; }

  .drawer-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 1.2rem;
    color: var(--ink);
    font-family: 'Inter', sans-serif; font-size: 0.86rem;
    cursor: pointer; border: none; background: transparent;
    width: 100%; text-align: left;
    transition: background 0.15s, color 0.15s;
  }
  .drawer-link:hover, .drawer-link:active {
    background: rgba(201, 169, 97, 0.06); color: var(--cream);
  }
  .drawer-link-icon { width: 20px; text-align: center; font-size: 0.95rem; flex-shrink: 0; }
  .drawer-link.is-destructive { color: #c4556a; }
  .drawer-link.is-destructive:hover { background: rgba(139, 30, 46, 0.08); color: #d8697f; }

  /* === 와인장 상세 모달의 "삭제" 액션 바 === */
  .cellar-actions-bar {
    margin: 1.2rem 0 0;
    padding: 1rem 0 0.2rem;
    border-top: 1px solid var(--divider);
    display: flex; justify-content: center;
  }
  .cellar-delete-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.1rem;
    background: transparent;
    color: var(--burgundy-light, #c4556a);
    border: 1px solid rgba(139, 30, 46, 0.4);
    border-radius: 8px;
    font-family: 'Inter', sans-serif; font-size: 0.82rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s;
  }
  .cellar-delete-btn:hover {
    background: rgba(139, 30, 46, 0.12);
    border-color: rgba(139, 30, 46, 0.65);
  }
  .cellar-delete-btn:active {
    background: rgba(139, 30, 46, 0.22);
  }

  /* === 와인 상세 모달 (와인장 위 떠있는 카드, 배경 살짝만 어둡게) === */
  .wine-detail-overlay {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(15, 6, 8, 0.35);          /* 배경 와인장 보이게 */
    backdrop-filter: blur(2.5px) saturate(0.9);
    -webkit-backdrop-filter: blur(2.5px) saturate(0.9);
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem 1rem calc(5.5rem + env(safe-area-inset-bottom));
    animation: backdropFade 0.35s ease;
  }
  @keyframes backdropFade {
    from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
    to   { opacity: 1; }
  }
  .wine-detail-sheet {
    width: 100%; max-width: 520px;
    max-height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--gold-muted);
    border-radius: 16px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow:
      0 24px 80px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(201, 169, 97, 0.12),
      0 0 40px rgba(201, 169, 97, 0.08);
    transform-origin: center center;
    animation: cardUnfold 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  /* 가로 슬릿 → 카드로 unfold */
  @keyframes cardUnfold {
    0% {
      opacity: 0;
      clip-path: inset(48% 8% 48% 8% round 16px);
      transform: translateY(0) scale(0.94);
    }
    35% {
      opacity: 1;
      clip-path: inset(48% 0 48% 0 round 16px);
      transform: translateY(0) scale(1);
    }
    100% {
      opacity: 1;
      clip-path: inset(0 0 0 0 round 16px);
      transform: translateY(0) scale(1);
    }
  }
  /* 닫기: 카드 → 가로 슬릿 → 사라짐 */
  .wine-detail-overlay.closing { animation: backdropFadeOut 0.35s ease forwards; }
  .wine-detail-overlay.closing .wine-detail-sheet {
    animation: cardFold 0.35s cubic-bezier(0.7, 0, 0.84, 0) forwards;
  }
  @keyframes backdropFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  @keyframes cardFold {
    0% {
      opacity: 1;
      clip-path: inset(0 0 0 0 round 16px);
      transform: translateY(0) scale(1);
    }
    65% {
      opacity: 1;
      clip-path: inset(48% 0 48% 0 round 16px);
      transform: translateY(0) scale(1);
    }
    100% {
      opacity: 0;
      clip-path: inset(48% 8% 48% 8% round 16px);
      transform: translateY(0) scale(0.94);
    }
  }
  .wine-detail-handle { display: none; }
  .wine-detail-header {
    display: flex; justify-content: flex-end; align-items: center;
    padding: 0.4rem 0.5rem; flex-shrink: 0;
    border-bottom: 1px solid var(--divider);
  }
  .wine-detail-close {
    background: transparent; border: none; color: var(--ink-dim);
    cursor: pointer; font-size: 1.5rem; padding: 0.3rem 0.7rem;
    line-height: 1; flex: none; letter-spacing: 0;
    border-radius: 50%; transition: color 0.2s;
    font-family: 'Inter', sans-serif; font-weight: 300;
  }
  .wine-detail-close:hover { color: var(--gold); }
  .wine-detail-scroll {
    flex: 1; overflow-y: auto;
    padding: 0 0.25rem;
    -webkit-overflow-scrolling: touch;
  }
  .wine-detail-scroll .result-card {
    box-shadow: none; border: none; border-radius: 0;
    padding: 1.5rem 1.25rem 2rem;
  }
  .wine-detail-scroll .wine-hero {
    margin: -1.5rem -1.25rem 1.5rem;
    border-radius: 0;
    height: 200px;
  }

  /* === Phase C: 로그인 / 계정 === */
  .account-card {
    background: var(--bg-card); border: 1px solid rgba(201,169,97,0.25);
    border-radius: 14px; padding: 1.1rem 1.2rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.5rem;
  }
  .account-main { display: flex; align-items: center; gap: 0.9rem; min-width: 0; flex: 1; }
  .account-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; border: 1px solid rgba(201,169,97,0.35);
    flex-shrink: 0;
  }
  .account-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    background: rgba(201,169,97,0.18); color: var(--gold-bright);
    font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600;
  }
  .account-info { min-width: 0; }
  .account-name {
    font-family: 'Cormorant Garamond', serif; color: var(--cream);
    font-size: 1.1rem; letter-spacing: 0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .account-meta {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem;
    font-size: 0.7rem; color: var(--ink-dim);
  }
  .account-provider-chip {
    padding: 0.1rem 0.5rem; border-radius: 10px; font-weight: 500;
    background: rgba(201,169,97,0.15); color: var(--gold-bright);
    letter-spacing: 0.02em;
  }
  .provider-kakao { background: rgba(254,229,0,0.18); color: #fee500; }
  .provider-google { background: rgba(255,255,255,0.08); color: #e8e8e8; }

  /* Provider 로고 (아이콘) */
  .provider-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    flex-shrink: 0;
  }
  .provider-logo svg { width: 65%; height: 65%; display: block; }
  .provider-logo-kakao { background: #FEE500; }
  .provider-logo-google { background: #fff; }
  .provider-logo-google svg { width: 55%; height: 55%; }
  .account-email {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 140px;
  }
  .account-logout-btn {
    padding: 0.45rem 0.85rem; border-radius: 8px;
    background: transparent; color: var(--ink-dim);
    border: 1px solid rgba(201,169,97,0.25);
    font-family: 'Inter', sans-serif; font-size: 0.72rem;
    cursor: pointer; transition: all 0.2s; flex-shrink: 0;
  }
  .account-logout-btn:hover { color: var(--gold); border-color: var(--gold); }

  /* ========== 프로필 탭 재설계 ========== */
  .profile-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; position: relative;
  }
  .profile-header-text { flex: 1; min-width: 0; }

  /* 계정 칩 (우측 상단 작게) */
  .account-chip {
    background: none; border: none; padding: 0; cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s;
  }
  .account-chip:hover { transform: scale(1.05); }
  .account-chip[hidden] { display: none !important; }
  .account-chip-avatar-wrap {
    display: inline-block; position: relative;
  }
  .account-chip-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    object-fit: cover; display: block;
    border: 1.5px solid rgba(201,169,97,0.4);
  }
  .account-chip-avatar-fallback {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(201,169,97,0.18); color: var(--gold-bright);
    font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600;
    border: 1.5px solid rgba(201,169,97,0.4);
  }

  /* 계정 시트 (드롭다운 오버레이) */
  .account-sheet-overlay {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(15, 6, 8, 0.6);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    animation: backdropFade 0.3s ease;
  }
  .account-sheet-overlay.closing { animation: backdropFadeOut 0.35s ease forwards; }
  .account-sheet-overlay.closing .account-sheet {
    animation: cardFold 0.35s cubic-bezier(0.7, 0, 0.84, 0) forwards;
  }
  .account-sheet-overlay[hidden] { display: none !important; }

  .account-sheet {
    position: relative;
    width: 100%; max-width: 440px; max-height: 88vh;
    background: var(--bg-card);
    border: 1px solid var(--gold-muted);
    border-radius: 16px;
    padding: 1.5rem 1.3rem calc(1.5rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    animation: cardUnfold 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  }
  .account-sheet-close {
    position: absolute; top: 0.85rem; right: 0.95rem;
    width: 30px; height: 30px;
    background: transparent; border: none;
    color: var(--ink-dim); font-size: 1rem;
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: all 0.2s;
  }
  .account-sheet-close:hover { color: var(--gold-bright); background: rgba(201,169,97,0.1); }

  .account-sheet-header {
    display: flex; align-items: center; gap: 0.9rem;
    padding-bottom: 1.2rem; margin-bottom: 1rem;
    border-bottom: 1px solid rgba(201,169,97,0.15);
  }
  .account-sheet-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid rgba(201,169,97,0.3);
  }
  .account-sheet-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    background: rgba(201,169,97,0.2); color: var(--gold-bright);
    font-family: 'Cormorant Garamond', serif; font-size: 1.5rem;
  }
  .account-sheet-name {
    font-family: 'Cormorant Garamond', serif; font-size: 1.25rem;
    color: var(--cream);
  }
  .account-sheet-email {
    font-size: 0.75rem; color: var(--ink-dim); margin-top: 0.15rem;
  }
  .account-sheet-section { margin-bottom: 1.25rem; }
  .account-sheet-section-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem; color: var(--ink-dim);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: 0.6rem; font-weight: 600;
  }
  .account-sheet-action {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 0.85rem 0.9rem;
    background: rgba(201,169,97,0.05);
    border: 1px solid rgba(201,169,97,0.15);
    border-radius: 10px;
    color: var(--cream); font-family: 'Inter', sans-serif; font-size: 0.85rem;
    cursor: pointer; transition: all 0.2s;
    margin-bottom: 0.45rem;
  }
  .account-sheet-action:hover {
    background: rgba(201,169,97,0.12);
    border-color: var(--gold-muted);
  }
  .account-sheet-action .chev {
    color: var(--gold); font-size: 1rem;
  }
  .account-sheet-logout {
    width: 100%; padding: 0.85rem;
    background: rgba(228,160,168,0.08);
    border: 1px solid rgba(228,160,168,0.25);
    color: #e4a0a8; border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 0.85rem;
    cursor: pointer; transition: all 0.2s;
    margin-top: 0.5rem;
  }
  .account-sheet-logout:hover {
    background: rgba(228,160,168,0.15);
  }

  /* 프로필 섹션 공통 */
  .pf-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(201,169,97,0.08);
  }
  .pf-section:first-of-type {
    margin-top: 1.5rem; padding-top: 0; border-top: none;
  }
  .pf-section-header { margin-bottom: 1rem; }
  .pf-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem; color: var(--cream);
    letter-spacing: 0.005em; font-weight: 500;
    margin: 0 0 0.35rem;
    display: flex; align-items: baseline; gap: 0.5rem;
  }
  .pf-section-count {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold-bright); font-size: 0.95rem;
    font-style: italic; opacity: 0.8;
  }
  .pf-section-desc {
    font-size: 0.72rem; color: var(--ink-dim);
    line-height: 1.5; margin: 0;
    letter-spacing: 0.01em;
  }

  /* ==========================================
     1. 와인 라벨 사전 — 2분할 레이아웃
     왼쪽: 컴팩트 라벨 | 오른쪽: 서술 + 피하세요
  ==========================================  */
  .label-dict-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    margin-top: 0.5rem;
  }
  @media (max-width: 380px) {
    .label-dict-layout { grid-template-columns: 1fr; }
  }

  .wine-label-card {
    position: relative;
    padding: 0.5rem;
    background: linear-gradient(180deg, #f5eeda 0%, #ece2c8 55%, #e4d6b2 100%);
    border-radius: 3px;
    box-shadow:
      0 8px 22px rgba(0,0,0,0.4),
      0 2px 4px rgba(0,0,0,0.25),
      inset 0 0 40px rgba(170,130,70,0.1);
    overflow: hidden;
  }
  .wine-label-card::before {
    content: ''; position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 18% 25%, rgba(139,94,43,0.07) 0%, transparent 55%),
      radial-gradient(circle at 82% 75%, rgba(114,32,40,0.05) 0%, transparent 55%);
    pointer-events: none;
  }
  /* 라벨 공통 프레임 */
  .wlc-frame {
    position: relative; z-index: 1;
    padding: 0.85rem 0.6rem 0.7rem;
    text-align: center;
    border: 1px solid rgba(114,32,40,0.4);
    border-radius: 1px;
    box-shadow: inset 0 0 0 2px rgba(245,238,218,1), inset 0 0 0 2.5px rgba(114,32,40,0.15);
  }

  .wlc-crest {
    width: 22px; height: 24px;
    margin: 0 auto 0.4rem;
    color: #722028; opacity: 0.75;
  }
  .wlc-crest svg { width: 100%; height: 100%; display: block; }

  .wlc-producer {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.58rem;
    letter-spacing: 0.32em;
    color: #3a2018;
    font-weight: 500;
    padding-left: 0.32em;
  }
  .wlc-producer-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.42rem;
    letter-spacing: 0.22em;
    color: #8a5a2e;
    text-transform: uppercase;
    margin-top: 0.12rem;
    padding-left: 0.22em;
  }

  .wlc-cuvee {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.58rem;
    color: #8a5a2e;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-top: 0.7rem;
  }
  .wlc-cuvee-name {
    font-style: normal;
    font-size: 1.15rem;
    color: #2d1810;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.1;
    margin-top: 0.15rem;
  }

  .wlc-vintage {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.88rem;
    color: #722028;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin: 0.35rem 0 0.25rem;
    padding-left: 0.1em;
  }

  .wlc-appellation { margin: 0.2rem 0 0.1rem; }
  .wlc-appellation-line {
    font-family: 'Inter', sans-serif;
    font-size: 0.46rem;
    letter-spacing: 0.2em;
    color: #3a2018;
    font-weight: 600;
    text-transform: uppercase;
    padding-left: 0.2em;
  }

  .wlc-divider {
    margin: 0.5rem 10%;
    border-top: 0.5px solid rgba(114,32,40,0.3);
  }
  .wlc-divider-dashed {
    border-top-style: dashed;
    border-top-color: rgba(138,90,46,0.35);
  }

  .wlc-section { padding: 0.05rem 0; }
  .wlc-section-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.44rem;
    letter-spacing: 0.22em;
    color: #722028;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
    font-weight: 600;
    padding-left: 0.22em;
  }
  .wlc-terms {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.35rem;
  }
  .wlc-terms li {
    display: flex; flex-direction: column; align-items: center; gap: 0.05rem;
  }
  .wlc-term {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.82rem;
    color: #2d1810;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
  }

  .wlc-classif {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.62rem;
    color: #722028;
    letter-spacing: 0.12em;
    margin: 0.1rem 0 0.2rem;
    padding-left: 0.12em;
  }

  .wlc-bottom-line {
    display: flex; justify-content: center; align-items: center; gap: 0.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.4rem; letter-spacing: 0.2em;
    color: #3a2018;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 0.15rem;
    padding-left: 0.2em;
  }
  .wlc-bottom-dot { opacity: 0.45; }

  /* ========== 단일 컬럼 레이아웃 ========== */
  .label-dict-body {
    display: flex; flex-direction: column; gap: 1.75rem;
    align-items: center;
    margin-top: 1.2rem;
  }

  /* 섹션 제목 밑 인라인 서술 (em dash 연결) — 레거시 */
  .pf-section-narrative {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--cream);
    line-height: 1.6;
    letter-spacing: 0.005em;
    margin: 0.4rem 0 0;
    opacity: 0.82;
    max-width: 520px;
  }

  /* 단독 서술 (제목 없이 섹션 오프닝 역할) */
  .section-narrative-solo {
    position: relative;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.98rem;
    color: var(--cream);
    line-height: 1.65;
    letter-spacing: 0.005em;
    opacity: 0.92;
    text-align: center;
    max-width: 520px;
    margin: 0.75rem auto 0.9rem;
    padding: 0.2rem 1.4rem 0.6rem;
  }
  .section-narrative-solo::before,
  .section-narrative-solo::after {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-style: normal;
    font-weight: 500;
    color: var(--gold);
    opacity: 0.55;
    font-size: 2.2rem;
    line-height: 1;
    position: absolute;
  }
  .section-narrative-solo::before {
    content: '\201C'; /* “ */
    left: 0;
    top: -0.35rem;
  }
  .section-narrative-solo::after {
    content: '\201D'; /* ” */
    right: 0;
    bottom: -0.8rem;
  }

  /* 단독 서술 섹션은 섹션 상단 구분선 위치 조정 */
  .pf-wine-taste.pf-section {
    padding-top: 1.5rem;
  }

  /* ========== 스펙트럼 바 (중앙 정렬) ========== */
  .spectrums {
    display: flex; flex-direction: column; gap: 1.1rem;
    width: 100%; max-width: 500px;
  }
  .spectrums-center { align-items: stretch; }

  .spectrum-row {
    display: flex; flex-direction: column; gap: 0.4rem;
    align-items: center;
  }

  .spec-header {
    display: flex; align-items: baseline; gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.1rem;
  }

  /* 스펙트럼 컨텍스트 노트 (적용 범위 설명) */
  .spec-context {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.68rem;
    color: var(--ink-dim);
    opacity: 0.75;
    letter-spacing: 0.01em;
    margin-bottom: 0.35rem;
    text-align: center;
  }

  /* 듀얼 레이더 블록 (통합 섹션 내부) */
  .wine-radar-block {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0.2rem 0 0.3rem;
  }
  .wine-radar-block .wine-profile-radar-wrap svg { max-width: 300px; }
  .wine-radar-block .wine-profile-radar-wrap {
    line-height: 0;  /* SVG 하단 inline 공백 제거 */
  }
  .wine-radar-source {
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    color: var(--ink-dim);
    opacity: 0.55;
    letter-spacing: 0.05em;
    margin-top: -0.3rem;  /* 레이더에 바짝 붙이기 */
  }
  .spec-label-en {
    font-family: 'Inter', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    color: var(--gold-bright);
    font-weight: 600;
    text-transform: uppercase;
  }
  .spec-label-ko {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.72rem;
    color: var(--ink-dim);
    letter-spacing: 0.02em;
    font-style: italic;
  }

  .spectrum-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: rgba(201,169,97,0.04);
    border: 1px solid rgba(201,169,97,0.15);
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
  }
  .spec-cell {
    padding: 0.38rem 0.18rem;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.6rem;
    color: var(--ink-dim);
    line-height: 1.15;
    border-right: 1px solid rgba(201,169,97,0.1);
    transition: all 0.2s;
    min-width: 0;
  }
  .spec-cell:last-child { border-right: none; }
  .spec-cell.active {
    background: linear-gradient(180deg, rgba(201,169,97,0.3) 0%, rgba(201,169,97,0.18) 100%);
    color: var(--cream);
    font-weight: 600;
    box-shadow:
      inset 0 0 0 1px rgba(201,169,97,0.45),
      0 0 8px rgba(201,169,97,0.15);
    position: relative;
  }
  .spec-cell.active::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    background: var(--gold);
    border-radius: 50%;
  }

  .spec-axis {
    display: flex; align-items: center; gap: 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.5rem;
    color: var(--ink-dim);
    letter-spacing: 0.06em;
    opacity: 0.7;
    margin-top: 0.1rem;
    width: 100%;
    max-width: 420px;
  }
  .spec-axis-line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(201,169,97,0.2) 0%, rgba(201,169,97,0.05) 100%);
    position: relative;
  }
  .spec-axis-line::after {
    content: '→';
    position: absolute;
    right: -2px; top: 50%;
    transform: translateY(-50%);
    font-size: 0.55rem;
    color: var(--gold-muted);
    opacity: 0.6;
  }

  /* 2. 와인 프로파일 (듀얼 레이더) */
  .wine-profile-legend {
    display: flex; gap: 1rem; margin-bottom: 0.5rem;
    padding: 0 0.5rem;
  }
  .wp-legend-item {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.7rem; color: var(--ink-dim);
    font-family: 'Inter', sans-serif; letter-spacing: 0.02em;
  }
  .wp-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block; flex-shrink: 0;
  }
  .wp-dot-red { background: #8d2c36; border: 1px solid rgba(141,44,54,0.6); }
  .wp-dot-white { background: #e8d8a8; border: 1px solid rgba(232,216,168,0.6); }
  .wine-profile-radar-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 0.5rem;
  }
  .wine-profile-radar-wrap svg { max-width: 340px; }

  /* 3. 미각 프로파일 추가 dim */
  .pf-extra-dims { margin-top: 1rem; }

  /* 4. 와인장 인사이트 */
  .cellar-stats-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem; margin-bottom: 1rem;
  }
  .cellar-stat {
    background: rgba(201,169,97,0.04);
    border: 1px solid rgba(201,169,97,0.1);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
  }
  .cellar-stat-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem; color: var(--gold-bright);
    font-weight: 500; letter-spacing: 0.01em;
    line-height: 1;
  }
  .cellar-stat-unit {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem; color: var(--gold);
    margin-left: 0.2rem; font-weight: 400;
  }
  .cellar-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem; color: var(--ink-dim);
    letter-spacing: 0.05em; margin-top: 0.35rem;
    line-height: 1.4;
  }
  .cellar-insight-narrative {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem; font-style: italic;
    color: var(--cream); opacity: 0.82;
    line-height: 1.5;
    padding: 0.85rem 0 0.2rem;
  }

  /* 5. 선호 음식 (compact) */
  .food-categories-compact {
    display: flex; flex-direction: column; gap: 0.7rem;
  }
  .food-categories-compact .food-category-section { gap: 0.35rem; }
  .food-categories-compact .food-grid {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 0.3rem;
  }
  .food-categories-compact .food-chip {
    padding: 0.4rem 0.3rem;
    font-size: 0.7rem;
    border-radius: 8px;
  }
  .pf-meta-inline {
    display: flex; gap: 1.25rem; flex-wrap: wrap;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(201,169,97,0.12);
  }
  .pf-meta-item {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem; color: var(--cream);
  }
  .pf-meta-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem; color: var(--ink-dim);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 0.2rem;
  }

  /* Phase D: 연결된 identities 리스트 */
  .identities-section {
    background: var(--bg-card); border: 1px solid rgba(201,169,97,0.2);
    border-radius: 12px; padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
  }
  .identities-header {
    font-family: 'Inter', sans-serif; font-size: 0.7rem;
    color: var(--ink-dim); letter-spacing: 0.08em;
    text-transform: uppercase; margin-bottom: 0.8rem;
  }
  .identity-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.55rem 0; border-top: 1px solid rgba(201,169,97,0.08);
  }
  .identity-row:first-of-type { border-top: none; }
  .identity-info {
    display: flex; align-items: center; gap: 0.55rem;
    min-width: 0; flex: 1;
  }
  .identity-name {
    color: var(--cream); font-size: 0.82rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .identity-primary-badge {
    padding: 0.08rem 0.42rem; border-radius: 8px;
    background: rgba(201,169,97,0.18); color: var(--gold-bright);
    font-size: 0.62rem; letter-spacing: 0.02em;
  }
  .identity-unlink-btn {
    padding: 0.32rem 0.7rem; border-radius: 7px;
    background: transparent; color: var(--ink-dim);
    border: 1px solid rgba(201,169,97,0.2);
    font-family: 'Inter', sans-serif; font-size: 0.68rem;
    cursor: pointer; transition: all 0.2s; flex-shrink: 0;
  }
  .identity-unlink-btn:hover {
    color: #c96a6a; border-color: #c96a6a;
  }
  .account-identity-count {
    font-size: 0.68rem; color: var(--gold-bright);
    letter-spacing: 0.02em;
  }
  .link-buttons-row {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-top: 0.85rem; padding-top: 0.85rem;
    border-top: 1px dashed rgba(201,169,97,0.18);
  }
  .link-add-btn {
    flex: 1; min-width: 130px;
    padding: 0.55rem 0.8rem; border-radius: 8px;
    border: 1px solid rgba(201,169,97,0.3);
    background: transparent; color: var(--gold-bright);
    font-family: 'Inter', sans-serif; font-size: 0.72rem;
    font-weight: 500; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  }
  .link-add-btn:hover {
    background: rgba(201,169,97,0.08);
    border-color: var(--gold);
  }
  .link-add-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--gold); color: var(--bg);
    font-size: 0.7rem; font-weight: 700;
  }

  .account-card-loggedout {
    flex-direction: column; align-items: stretch; gap: 0.9rem;
    text-align: left;
  }
  .account-loggedout-title {
    font-family: 'Cormorant Garamond', serif; font-size: 1.15rem;
    color: var(--cream); letter-spacing: 0.01em;
  }
  .account-loggedout-text {
    font-size: 0.78rem; color: var(--ink-dim); line-height: 1.5;
    margin: 0;
  }

  /* 로그인 CTA 카드 (와인장 비로그인 화면) */
  .login-required-card {
    background: var(--bg-card); border: 1px dashed rgba(201,169,97,0.3);
    border-radius: 14px; padding: 2rem 1.5rem; text-align: center;
    margin-top: 1rem;
  }
  .login-required-icon {
    font-size: 2.2rem; margin-bottom: 0.8rem;
    filter: drop-shadow(0 0 12px rgba(201,169,97,0.25));
  }
  .login-required-title {
    font-family: 'Cormorant Garamond', serif; font-size: 1.4rem;
    color: var(--cream); margin: 0 0 0.5rem;
    letter-spacing: 0.01em;
  }
  .login-required-text {
    font-size: 0.82rem; color: var(--ink-dim); line-height: 1.55;
    margin: 0 0 1.3rem;
  }
  .login-required-privacy {
    font-size: 0.65rem; color: var(--ink-dim); opacity: 0.7;
    margin: 1rem 0 0; line-height: 1.5;
  }

  .login-buttons {
    display: flex; flex-direction: column; gap: 0.55rem;
  }
  .login-btn {
    width: 100%; padding: 0.85rem 1rem; border-radius: 10px;
    border: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 500;
    letter-spacing: 0.01em; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
  }
  /* 내부 [로고 + 텍스트] 를 고정 폭으로 감싸서 버튼 간 정렬 일치 */
  .login-btn-inner {
    display: inline-flex; align-items: center; gap: 0.6rem;
    width: 170px; /* 가장 긴 라벨 기준 + 로고 폭 고정 */
    justify-content: flex-start;
  }
  .login-btn-mark {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    flex-shrink: 0;
  }
  .login-kakao { background: #fee500; color: #191919; }
  .login-kakao:hover { background: #fddc00; }
  .login-kakao .login-btn-mark { background: rgba(0,0,0,0.08); color: #191919; }
  .login-google {
    background: #fff; color: #1f1f1f;
    border: 1px solid rgba(0,0,0,0.15);
  }
  .login-google:hover { background: #f7f7f7; }
  .login-google .login-btn-mark {
    background: #fff; color: #4285f4; border: 1px solid #dadce0;
    font-family: 'Inter', sans-serif;
  }

  /* 로그인 모달 */
  .login-modal-overlay {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(15, 6, 8, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    animation: fadeOverlay 0.3s ease;
  }
  .login-modal[hidden], .login-modal-overlay[hidden] { display: none !important; }
  .login-modal {
    position: relative; width: 100%; max-width: 420px;
    background: var(--bg-card); border: 1px solid rgba(201,169,97,0.3);
    border-radius: 16px;
    animation: slideUp 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .login-modal .login-required-card {
    border: none; margin: 0; padding: 1.8rem 1.5rem;
  }
  .login-modal-close {
    position: absolute; top: 0.8rem; right: 0.9rem;
    background: transparent; border: none; color: var(--ink-dim);
    font-size: 1.1rem; cursor: pointer; padding: 0.3rem;
    line-height: 1; z-index: 1;
  }
  .login-modal-close:hover { color: var(--gold-bright); }

  /* === 토큰 구매 모달 (bottom sheet) === */
  .purchase-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(15, 6, 8, 0.62);          /* 와인장 모달과 동일한 반투명도 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    animation: backdropFade 0.3s ease;
  }
  .purchase-overlay.closing {
    animation: backdropFadeOut 0.35s ease forwards;
  }
  .purchase-overlay.closing .purchase-modal {
    animation: cardFold 0.35s cubic-bezier(0.7, 0, 0.84, 0) forwards;
  }
  .purchase-modal {
    width: 100%; max-width: 560px; max-height: 90vh;
    background: var(--bg-card);
    border: 1px solid var(--gold-muted);
    border-radius: 16px;
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    box-shadow:
      0 24px 80px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(201, 169, 97, 0.12),
      0 0 40px rgba(201, 169, 97, 0.08);
    transform-origin: center center;
    animation: cardUnfold 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    position: relative;
  }
  /* X 닫기 버튼 (우측 상단) */
  .purchase-close-x {
    position: absolute; top: 0.85rem; right: 0.95rem;
    width: 30px; height: 30px;
    background: transparent; border: none;
    color: var(--ink-dim); font-size: 1rem;
    cursor: pointer; padding: 0; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: all 0.2s;
    z-index: 2;
  }
  .purchase-close-x:hover {
    color: var(--gold-bright);
    background: rgba(201,169,97,0.1);
  }
  .purchase-handle {
    width: 36px; height: 4px; background: var(--divider);
    border-radius: 2px; margin: 0 auto 1.25rem;
  }
  .purchase-header { text-align: center; margin-bottom: 1.5rem; }
  .purchase-header h2 {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--cream); font-size: 1.6rem; margin-bottom: 0.4rem;
  }
  .purchase-header h2 em { color: var(--gold-bright); font-weight: 500; }
  .purchase-header .balance {
    font-size: 0.8rem; color: var(--ink-dim);
  }
  .purchase-header .balance strong { color: var(--gold-bright); font-weight: 600; }

  .package-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
  .package-card {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.1rem 1.25rem; background: var(--bg-elevated);
    border: 1.5px solid var(--divider); border-radius: 12px;
    cursor: pointer; transition: all 0.2s;
    flex: none; font-family: 'Inter', sans-serif;
    text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: inherit;
    color: inherit; text-align: left; position: relative;
  }
  .package-card:hover { border-color: var(--gold-muted); }
  .package-card.selected {
    border-color: var(--gold); background: rgba(201, 169, 97, 0.06);
  }
  .package-card .badge {
    position: absolute; top: -8px; right: 16px;
    background: var(--gold); color: var(--bg);
    font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.15rem 0.55rem; border-radius: 100px; font-weight: 600;
  }
  .package-tokens {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem; color: var(--cream); font-weight: 500;
    line-height: 1;
  }
  .package-unit {
    font-size: 0.7rem; color: var(--ink-dim); margin-top: 0.3rem;
  }
  .package-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem; color: var(--gold-bright); font-weight: 500;
  }

  .payment-section-label {
    font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold-muted); margin-bottom: 0.75rem;
  }
  .payment-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .payment-method {
    padding: 0.85rem 0.5rem; background: var(--bg-elevated);
    border: 1.5px solid var(--divider); border-radius: 10px;
    cursor: pointer; text-align: center; transition: all 0.2s;
    flex: none; font-family: 'Inter', sans-serif;
    text-transform: none; letter-spacing: normal; font-size: 0.8rem; font-weight: 500;
    color: var(--ink); position: relative; overflow: hidden;
  }
  .payment-method:hover { border-color: var(--gold-muted); }
  .payment-method.selected {
    border-color: var(--gold); background: rgba(201, 169, 97, 0.08); color: var(--cream);
  }
  .payment-method .pm-mark {
    display: inline-block; width: 22px; height: 22px;
    border-radius: 50%; margin-bottom: 0.4rem;
    line-height: 22px; font-size: 0.65rem; font-weight: 700;
  }
  .pm-kakaopay .pm-mark { background: #FFE812; color: #3C1E1E; }
  .pm-naverpay .pm-mark { background: #03C75A; color: #fff; }
  .pm-tosspay .pm-mark { background: #0064FF; color: #fff; }
  .pm-payco .pm-mark { background: #F1423D; color: #fff; }
  .pm-card .pm-mark { background: var(--gold-muted); color: var(--bg); font-size: 0.7rem; }
  .pm-applepay .pm-mark { background: #000; color: #fff; font-size: 0.85rem; }

  .purchase-cta {
    width: 100%; padding: 1rem; background: var(--gold); color: var(--bg);
    border: none; border-radius: 10px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600;
    letter-spacing: 0.02em; transition: all 0.2s;
  }
  .purchase-cta:disabled {
    background: rgba(201,169,97,0.18); color: var(--gold);
    cursor: not-allowed; opacity: 1;
    border: 1px dashed rgba(201,169,97,0.4);
  }
  .purchase-cta:not(:disabled):hover { background: var(--gold-bright); }
  .purchase-cancel {
    width: 100%; padding: 0.7rem; margin-top: 0.5rem;
    background: transparent; border: none; color: var(--ink-dim);
    cursor: pointer; font-size: 0.85rem;
    font-family: 'Inter', sans-serif; letter-spacing: 0.02em;
  }
  .purchase-cancel:hover { color: var(--ink); }
  .purchase-notice {
    margin-top: 1rem; padding: 0.75rem; text-align: center;
    background: rgba(114, 32, 40, 0.15); color: #f5b7be;
    border-radius: 6px; font-size: 0.7rem; line-height: 1.5;
  }
  .setup-banner {
    background: var(--bg-card); border: 1px solid var(--divider);
    border-left: 2px solid var(--gold); padding: 1rem 1.25rem;
    margin-bottom: 2rem; font-size: 0.85rem; color: var(--ink); border-radius: 2px;
  }
  .setup-banner strong { color: var(--gold-bright); font-weight: 500; letter-spacing: 0.05em; }
  .setup-banner input {
    width: 100%; padding: 0.7rem; margin-top: 0.75rem;
    border: 1px solid var(--divider); border-radius: 2px;
    font-size: 0.85rem; font-family: 'Inter', sans-serif;
    background: var(--bg); color: var(--cream);
  }
  .setup-banner input:focus { outline: none; border-color: var(--gold); }
  .setup-banner button {
    margin-top: 0.5rem; padding: 0.5rem 1.25rem; font-size: 0.7rem;
    background: var(--gold); color: var(--bg); border: none; cursor: pointer;
    border-radius: 2px; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600;
  }
  .upload-zone {
    background: var(--bg-card); border: 1px dashed var(--divider);
    border-radius: 12px; padding: 3rem 1.5rem; text-align: center;
    cursor: pointer; transition: all 0.25s ease; display: block;
  }
  .upload-zone:hover { border-color: var(--gold-muted); background: var(--bg-elevated); }
  .upload-zone.has-image { padding: 0; border-style: solid; border-color: var(--divider); overflow: hidden; }
  .upload-zone img { max-width: 100%; max-height: 420px; display: block; margin: 0 auto; }
  .upload-icon {
    width: 36px; height: 36px; margin: 0 auto 1rem;
    color: var(--gold); opacity: 0.75;
  }
  .upload-icon svg { width: 100%; height: 100%; }
  .upload-text {
    font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500;
    color: var(--cream); margin-bottom: 0.4rem;
  }
  .upload-hint { font-size: 0.78rem; color: var(--ink-dim); }
  input[type="file"] { display: none; }
  .actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
  button {
    flex: 1; padding: 1rem 1.5rem; border: none;
    font-family: 'Inter', sans-serif; font-size: 0.85rem;
    letter-spacing: 0.04em;
    font-weight: 500; cursor: pointer; transition: all 0.25s ease; border-radius: 8px;
  }
  .btn-primary { background: var(--gold); color: var(--bg); position: relative; overflow: hidden; }
  .btn-primary::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%); transition: transform 0.6s;
  }
  .btn-primary:hover:not(:disabled)::after { transform: translateX(100%); }
  .btn-primary:hover:not(:disabled) { background: var(--gold-bright); box-shadow: 0 0 24px var(--glow); }
  .btn-primary:disabled { opacity: 0.3; cursor: not-allowed; }

  /* 분석 시작 버튼 내부 토큰 비용 라벨 */
  .analyze-btn-content {
    display: inline-flex; align-items: baseline; gap: 0.5rem;
  }
  .analyze-btn-cost {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.75;
    background: rgba(0,0,0,0.12);
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    font-feature-settings: 'tnum';
  }
  .analyze-btn-cost.is-free {
    background: rgba(72, 140, 95, 0.22);
    opacity: 0.95;
  }
  .btn-secondary { background: transparent; color: var(--gold); border: 1px solid var(--gold-muted); }
  .btn-secondary:hover { border-color: var(--gold); background: rgba(201, 169, 97, 0.05); }
  .loading { text-align: center; padding: 4rem 2rem; display: none; }
  .loading.show { display: block; }
  .loading-glass {
    display: inline-block; font-size: 3rem;
    animation: swirl 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 12px var(--glow));
  }
  @keyframes swirl {
    0%, 100% { transform: rotate(-12deg) scale(1); }
    50% { transform: rotate(12deg) scale(1.05); }
  }
  .loading-text {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--gold); margin-top: 1.25rem; font-size: 1.15rem; letter-spacing: 0.05em;
  }
  .loading-dots {
    display: inline-block; animation: dots 1.5s steps(4) infinite;
    width: 0; overflow: hidden; vertical-align: bottom;
  }
  @keyframes dots { to { width: 2em; } }
  .error {
    background: rgba(114, 32, 40, 0.2); border: 1px solid var(--burgundy-light);
    border-left: 3px solid var(--burgundy-light); padding: 1rem 1.25rem;
    margin-top: 1.5rem; display: none; font-size: 0.875rem; color: #e4a0a8; border-radius: 2px;
  }
  .error.show { display: block; }
  .result { margin-top: 3rem; display: none; animation: fadeIn 0.8s ease; }
  .result.show { display: block; }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .result-card {
    background: var(--bg-card); padding: 2rem 1.5rem 2.25rem;
    border-radius: 12px; border: 1px solid var(--divider); position: relative;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  }
  .wine-hero {
    position: relative; margin: -2rem -1.5rem 1.5rem;
    height: 240px; overflow: hidden; border-radius: 12px 12px 0 0;
    background: var(--bg-elevated);
  }
  .wine-hero img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    display: block;
  }
  .wine-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 40%, var(--bg-card) 100%);
    pointer-events: none;
  }
  .wine-type-badge {
    display: inline-block;
    font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 0.75rem; font-weight: 500;
  }
  .wine-name {
    font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 500;
    color: var(--cream); line-height: 1.15; margin-bottom: 0.5rem; letter-spacing: 0.01em;
  }
  .wine-producer {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--gold-bright); font-size: 1.05rem; margin-bottom: 0.75rem;
  }
  .wine-origin { font-size: 0.8rem; color: var(--ink-dim); letter-spacing: 0.15em; text-transform: uppercase; }
  .meta-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem;
    padding: 1.25rem 0 0.25rem; margin-top: 1.25rem;
    border-top: 1px solid var(--divider);
  }
  .meta-item {
    display: flex; flex-direction: column; justify-content: center;
    padding: 0.9rem 1rem; min-height: 72px;
    background: rgba(201,169,97,0.04);
    border: 1px solid rgba(201,169,97,0.12);
    border-radius: 10px;
  }
  .meta-item .label {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem; letter-spacing: 0.12em;
    color: var(--ink-dim); text-transform: uppercase;
    margin-bottom: 0.4rem; line-height: 1;
  }
  .meta-item .value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem; line-height: 1.2;
    color: var(--cream); letter-spacing: 0.005em;
    font-weight: 500;
  }
  .section { margin-top: 2.5rem; }
  .section-title { margin-bottom: 1.25rem; }
  .section-title h3 {
    font-family: 'Inter', sans-serif;
    color: var(--ink-dim); font-size: 0.7rem; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
  }
  .wine-text { font-size: 0.95rem; line-height: 1.75; color: var(--ink); }
  .radar-container { display: flex; justify-content: center; margin: 1rem 0 2rem; position: relative; }
  .radar-chart { width: 100%; max-width: 380px; height: auto; }
  .radar-grid { fill: none; stroke: var(--divider); stroke-width: 0.5; }
  .radar-axis { stroke: var(--divider); stroke-width: 0.5; }
  .radar-shape {
    fill: url(#radarGradient); fill-opacity: 0.4;
    stroke: var(--gold); stroke-width: 1.5;
    filter: drop-shadow(0 0 8px rgba(201, 169, 97, 0.4));
    animation: radarFade 1.2s ease-out;
  }
  @keyframes radarFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .radar-point { fill: var(--gold-bright); r: 3; }
  .radar-vertex { font-family: 'Inter', sans-serif; }
  .radar-label {
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
    fill: var(--cream); letter-spacing: 0.08em;
  }
  .radar-value {
    font-family: 'Cormorant Garamond', serif; font-size: 12px;
    font-style: italic; fill: var(--gold-bright); font-weight: 500;
  }
  .bars { margin-top: 1rem; }
  .bar-row { margin-bottom: 1rem; }
  .bar-row:last-child { margin-bottom: 0; }
  .bar-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
  .bar-label { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
  .bar-desc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.85rem; color: var(--gold); }
  .bar-track { height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; position: relative; }
  .bar-fill {
    height: 100%; background: linear-gradient(90deg, var(--burgundy), var(--gold));
    border-radius: 2px; transform: scaleX(0); transform-origin: left;
    animation: fillBar 1s ease-out forwards;
  }
  @keyframes fillBar { to { transform: scaleX(var(--fill-amount)); } }
  .terroir-box {
    background: var(--bg-elevated); border-left: 2px solid var(--gold);
    padding: 1.25rem; margin-top: 1rem; border-radius: 0 2px 2px 0; position: relative;
  }
  .terroir-box::before {
    content: '❝'; position: absolute; top: -0.5rem; left: 1rem;
    font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--gold);
    background: var(--bg-card); padding: 0 0.5rem; line-height: 1;
  }
  /* === 한식 페어링 카드 (별점 + 이유) === */
  .korean-pairing-card {
    background: var(--bg-elevated);
    border-left: 2px solid var(--gold);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    border-radius: 0 2px 2px 0;
  }
  .pairing-rating {
    color: var(--gold-bright);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    margin-bottom: 0.4rem;
    font-family: 'Cormorant Garamond', serif;
  }
  .pairing-rating .star-empty { color: var(--gold-muted); opacity: 0.4; }
  .pairing-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    color: var(--cream);
    margin-bottom: 0.4rem;
    font-weight: 500;
  }
  .pairing-reason {
    font-size: 0.85rem;
    color: var(--ink-dim);
    line-height: 1.55;
  }
  .pairing-section-label {
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold-muted);
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
  }
  .pairing-section-label:first-child { margin-top: 0; }

  .pairing-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
  .pairing-list li {
    background: var(--bg-elevated); padding: 0.5rem 1rem; border-radius: 100px;
    font-size: 0.85rem; color: var(--cream); border: 1px solid var(--divider); transition: all 0.3s;
  }
  .pairing-list li:hover { border-color: var(--gold); color: var(--gold-bright); }
  .similar-wine { padding: 1rem 0; border-bottom: 1px solid var(--divider); }
  .similar-wine:last-child { border-bottom: none; }
  .similar-wine-name { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: var(--cream); margin-bottom: 0.25rem; }
  .similar-wine-reason { font-size: 0.85rem; color: var(--ink-dim); line-height: 1.5; }
  .wine-list-header {
    text-align: center; margin-bottom: 1.5rem; padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--divider);
  }
  .wine-list-count {
    font-family: 'Cormorant Garamond', serif; font-size: 1.75rem;
    color: var(--gold-bright); font-style: italic; margin-bottom: 0.25rem; line-height: 1.1;
  }
  .wine-list-hint {
    font-size: 0.7rem; color: var(--ink-dim);
    letter-spacing: 0.2em; text-transform: uppercase;
  }
  .wine-list { display: flex; flex-direction: column; gap: 0.5rem; }
  .wine-list-card {
    display: block; width: 100%; text-align: left;
    background: var(--bg-elevated); border: 1px solid var(--divider);
    padding: 1rem 1.25rem; border-radius: 2px; cursor: pointer;
    transition: all 0.3s; font-family: 'Inter', sans-serif;
    color: inherit; letter-spacing: normal; text-transform: none;
    flex: none; font-size: inherit; font-weight: inherit;
    position: relative;
  }
  .wine-list-card::after {
    content: '›'; position: absolute; right: 1.25rem; top: 50%;
    transform: translateY(-50%); color: var(--gold-muted);
    font-family: 'Cormorant Garamond', serif; font-size: 1.5rem;
    transition: all 0.3s;
  }
  .wine-list-card:hover {
    border-color: var(--gold); background: rgba(201, 169, 97, 0.05);
  }
  .wine-list-card:hover::after { color: var(--gold-bright); transform: translateY(-50%) translateX(4px); }
  .wine-list-card-name {
    font-family: 'Cormorant Garamond', serif; font-size: 1.2rem;
    color: var(--cream); margin-bottom: 0.25rem; padding-right: 1.5rem;
    line-height: 1.3;
  }
  .wine-list-card-producer {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--gold); font-size: 0.9rem; margin-bottom: 0.35rem;
  }
  .wine-list-card-meta {
    font-size: 0.7rem; color: var(--ink-dim);
    letter-spacing: 0.15em; text-transform: uppercase;
  }
  .wine-list-card-price {
    font-size: 0.85rem; color: var(--gold-bright);
    margin-top: 0.35rem; font-weight: 500;
  }
  .back-btn {
    background: transparent; color: var(--gold);
    border: 1px solid var(--divider); padding: 0.6rem 1rem;
    font-size: 0.7rem; letter-spacing: 0.2em; margin-bottom: 1.5rem;
    cursor: pointer; border-radius: 2px; width: auto; flex: none;
    font-family: 'Inter', sans-serif; text-transform: uppercase;
    font-weight: 500; display: inline-block;
  }
  .back-btn:hover { border-color: var(--gold); background: rgba(201, 169, 97, 0.05); }
  .price-summary {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
    padding: 1.25rem; background: var(--bg-elevated);
    border: 1px solid var(--divider); border-radius: 2px; margin-bottom: 1rem;
  }
  .price-stat { text-align: center; }
  .price-stat .label {
    font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold-muted); margin-bottom: 0.35rem;
  }
  .price-stat .value {
    font-family: 'Cormorant Garamond', serif; font-size: 1.35rem;
    color: var(--cream); font-weight: 500;
  }
  .price-stat.median .value { color: var(--gold-bright); }
  .price-listings { display: flex; flex-direction: column; gap: 0.5rem; }
  .price-listing {
    display: flex; gap: 0.75rem; padding: 0.75rem;
    background: var(--bg-elevated); border: 1px solid var(--divider);
    border-radius: 2px; text-decoration: none; color: inherit;
    transition: all 0.3s;
  }
  .price-listing:hover {
    border-color: var(--gold); background: rgba(201, 169, 97, 0.05);
  }
  .price-listing-image {
    width: 56px; height: 56px; flex-shrink: 0;
    background: var(--bg); border-radius: 2px; object-fit: cover;
  }
  .price-listing-body { flex: 1; min-width: 0; }
  .price-listing-title {
    font-size: 0.8rem; color: var(--cream); line-height: 1.35;
    margin-bottom: 0.25rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .price-listing-meta { display: flex; justify-content: space-between; align-items: baseline; }
  .price-listing-mall {
    font-size: 0.7rem; color: var(--ink-dim);
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .price-listing-price {
    font-family: 'Cormorant Garamond', serif; font-size: 1rem;
    color: var(--gold-bright); font-weight: 500;
  }
  .price-disclaimer {
    font-size: 0.7rem; color: var(--ink-dim); font-style: italic;
    margin-top: 0.75rem; text-align: center;
  }
  .price-empty {
    padding: 1.5rem; text-align: center; color: var(--ink-dim);
    font-size: 0.85rem; background: var(--bg-elevated);
    border: 1px dashed var(--divider); border-radius: 2px;
  }

  /* === 하단 탭 바 === */
  body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .bottom-tabs {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(15, 6, 8, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--divider);
    padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
    z-index: 50;
  }
  .bottom-tab {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    background: transparent; border: none; padding: 0.5rem 0.25rem;
    color: var(--ink-dim); cursor: pointer; flex: 1;
    font-family: 'Inter', sans-serif; transition: color 0.2s;
    text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: 400;
    border-radius: 0;
  }
  .bottom-tab .icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .bottom-tab .icon svg { width: 100%; height: 100%; stroke: currentColor; }
  .bottom-tab .label {
    font-size: 0.66rem; letter-spacing: 0.04em; font-weight: 500;
  }
  .bottom-tab.active { color: var(--gold-bright); }
  .bottom-tab:hover:not(.active) { color: var(--ink); }
  /* AI 탭 프리미엄 강조 */
  .ai-tab .icon svg {
    filter: drop-shadow(0 0 4px rgba(228, 199, 122, 0.0));
    transition: filter 0.3s, transform 0.3s;
  }
  .ai-tab.active .icon svg {
    filter: drop-shadow(0 0 6px rgba(228, 199, 122, 0.55));
  }
  .ai-tab .label {
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 600;
  }
  .ai-tab.active .label {
    background: linear-gradient(90deg, var(--gold-bright), #ffd98a, var(--gold-bright));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* === 탭 페이지 === */
  .tab-page { display: none; }
  .tab-page.active { display: block; }

  /* === 온보딩 모달 === */
  [hidden] { display: none !important; }
  .onboarding-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(15, 6, 8, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: flex-end; justify-content: center;
    animation: fadeOverlay 0.3s ease;
  }
  @keyframes fadeOverlay { from { opacity: 0; } to { opacity: 1; } }
  .onboarding-modal {
    width: 100%; max-width: 560px; max-height: 92vh;
    background: var(--bg-card); border-top: 1px solid var(--gold);
    border-radius: 16px 16px 0 0;
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    animation: slideUp 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .onboarding-step-header { margin-bottom: 1.5rem; text-align: center; }
  .step-progress {
    display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 1.25rem;
  }
  .step-dot {
    width: 24px; height: 3px; background: var(--bg-elevated); border-radius: 2px;
    transition: background 0.3s;
  }
  .step-dot.done { background: var(--gold); }
  .step-dot.active { background: var(--gold-bright); }
  .onboarding-modal h2 {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--cream); font-size: 1.85rem; font-weight: 400;
    margin-bottom: 0.4rem; line-height: 1.2;
  }
  .onboarding-modal h2 em { color: var(--gold-bright); font-weight: 500; }
  .onboarding-modal .subtitle {
    color: var(--ink-dim); font-size: 0.85rem;
    font-family: 'Cormorant Garamond', serif; font-style: italic;
  }
  .food-category { margin-bottom: 1.5rem; }
  .food-category-title {
    font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 0.75rem; font-weight: 500;
  }
  .food-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 0.5rem;
  }
  .food-chip {
    background: var(--bg-elevated); border: 1px solid var(--divider);
    color: var(--ink); padding: 0.65rem 0.5rem; border-radius: 12px;
    font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
    text-align: center; font-family: 'Inter', sans-serif;
    text-transform: none; letter-spacing: normal; font-weight: 400;
  }
  .food-chip:hover { border-color: var(--gold-muted); }
  .food-chip.selected {
    background: var(--gold); color: var(--bg);
    border-color: var(--gold); font-weight: 500;
  }

  /* 마이 탭 선호 음식 카테고리별 섹션 */
  .food-categories-wrap {
    display: flex; flex-direction: column; gap: 1.15rem;
  }
  .food-category-section {
    display: flex; flex-direction: column; gap: 0.55rem;
  }
  .food-category-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(201,169,97,0.12);
  }
  .food-category-emoji { font-size: 0.95rem; }
  .food-category-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem; letter-spacing: 0.08em;
    color: var(--gold-bright); text-transform: uppercase;
    font-weight: 500;
  }
  .food-category-count {
    margin-left: auto;
    font-size: 0.7rem; color: var(--ink-dim);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
  }
  .section-title-count {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold-bright); font-size: 1rem;
    margin-left: 0.4rem; font-style: italic;
    opacity: 0.85;
  }
  .taste-slider-row {
    display: grid; grid-template-columns: 80px 1fr 30px;
    align-items: center; gap: 1rem; padding: 0.6rem 0;
  }
  .taste-slider-label { font-size: 0.85rem; color: var(--cream); }
  .taste-slider-label .emoji { margin-right: 0.4rem; }
  .taste-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px; outline: none;
  }
  .taste-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--gold); cursor: pointer; border: 2px solid var(--bg);
    box-shadow: 0 0 0 1px var(--gold);
  }
  .taste-slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--gold); cursor: pointer; border: 2px solid var(--bg);
  }
  .taste-slider-value {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.1rem; color: var(--gold-bright); text-align: right;
  }
  .radio-group { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
  .radio-option {
    display: block; padding: 0.85rem 1rem;
    background: var(--bg-elevated); border: 1px solid var(--divider);
    border-radius: 8px; cursor: pointer; transition: all 0.2s;
    font-size: 0.9rem; color: var(--cream);
  }
  .radio-option:hover { border-color: var(--gold-muted); }
  .radio-option input { display: none; }
  .radio-option.selected { border-color: var(--gold); background: rgba(201,169,97,0.08); color: var(--gold-bright); }
  .consent-row {
    display: flex; gap: 0.75rem; padding: 0.75rem 0; cursor: pointer;
    font-size: 0.85rem; color: var(--ink); line-height: 1.4;
  }
  .consent-row input[type="checkbox"] {
    flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;
    accent-color: var(--gold);
  }
  .onboarding-actions {
    display: flex; gap: 0.5rem; margin-top: 1.5rem;
    padding-top: 1rem; border-top: 1px solid var(--divider);
  }
  .onboarding-actions button {
    flex: 1; padding: 0.95rem; font-size: 0.75rem;
    letter-spacing: 0.2em; border-radius: 6px; cursor: pointer;
    text-transform: uppercase; font-weight: 600;
    font-family: 'Inter', sans-serif; border: none;
  }
  .btn-skip {
    background: transparent; color: var(--ink-dim); border: 1px solid var(--divider);
  }
  .btn-skip:hover { color: var(--ink); border-color: var(--gold-muted); }
  .btn-next {
    background: var(--gold); color: var(--bg);
  }
  .btn-next:hover { background: var(--gold-bright); }
  .btn-next:disabled { opacity: 0.4; cursor: not-allowed; }

  /* === 별점 + 공유 (스캔 결과) === */
  .wine-actions {
    display: flex; gap: 0.5rem; margin-top: 1rem; align-items: stretch;
    padding-bottom: 1rem; border-bottom: 1px solid var(--divider);
  }
  .rating-block {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    background: var(--bg-elevated); border: 1px solid var(--divider);
    border-radius: 8px; padding: 0.65rem 0.5rem; gap: 0.3rem;
  }
  .rating-stars {
    display: flex; gap: 0.15rem;
  }
  .star-btn {
    background: transparent; border: none; cursor: pointer;
    color: var(--gold-muted); opacity: 0.4;
    font-size: 1.4rem; padding: 0.1rem 0.2rem; line-height: 1;
    transition: all 0.15s; flex: none;
    font-family: serif;
  }
  .star-btn.filled { color: var(--gold-bright); opacity: 1; }
  .star-btn:hover { transform: scale(1.15); }
  .rating-label {
    font-size: 0.65rem; color: var(--ink-dim); letter-spacing: 0.05em;
  }
  .rating-label.has-rating { color: var(--gold-bright); }

  /* === 디멘션 별점 (Tasting Profile 하단) === */
  .dim-rating-section {
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid var(--divider);
  }
  .dim-rating-toggle {
    background: transparent; border: 1px solid var(--divider);
    color: var(--ink-dim); padding: 0.6rem 1rem;
    border-radius: 6px; cursor: pointer; width: 100%;
    font-family: 'Inter', sans-serif; font-size: 0.78rem;
    letter-spacing: 0.02em; transition: all 0.2s;
    text-transform: none; flex: none; font-weight: 500;
  }
  .dim-rating-toggle:hover { color: var(--ink); border-color: var(--gold-muted); }
  .dim-rating-toggle.expanded { color: var(--gold-bright); border-color: var(--gold-muted); }
  .dim-rating-list {
    margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem;
  }
  .dim-rating-row {
    display: grid; grid-template-columns: 60px 1fr; align-items: center;
    gap: 0.75rem; padding: 0.5rem 0;
  }
  .dim-rating-row .name {
    font-size: 0.8rem; color: var(--cream); letter-spacing: 0.02em;
  }
  .dim-rating-row .stars {
    display: flex; gap: 0.05rem; justify-self: end;
  }
  .dim-star {
    background: transparent; border: none; cursor: pointer;
    color: var(--gold-muted); opacity: 0.3;
    font-size: 1.05rem; padding: 0.1rem 0.15rem; line-height: 1;
    transition: all 0.15s; flex: none; font-family: serif;
  }
  .dim-star.filled { color: var(--gold-bright); opacity: 1; }
  .dim-star:hover { transform: scale(1.2); }
  .dim-rating-hint {
    font-size: 0.7rem; color: var(--ink-dim);
    margin: 1.1rem 0 1rem;  /* 위 여백 넉넉히 — 버튼에서 분리 */
    text-align: center; font-style: italic;
    font-family: 'Cormorant Garamond', serif;
    opacity: 0.7;
  }
  .share-btn {
    flex: 1; padding: 0.85rem; background: var(--bg-elevated);
    border: 1px solid var(--divider); color: var(--cream); cursor: pointer;
    border-radius: 6px; font-size: 0.8rem; letter-spacing: 0.1em;
    transition: all 0.25s; display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; font-family: 'Inter', sans-serif; text-transform: none; font-weight: 500;
  }
  .share-btn:hover { border-color: var(--gold-muted); color: var(--gold-bright); }
  .share-btn .icon { font-size: 1rem; }
  .share-toast {
    position: fixed; bottom: calc(6.5rem + env(safe-area-inset-bottom)); left: 50%;
    transform: translateX(-50%); z-index: 200;
    background: var(--bg-elevated); color: var(--cream);
    border: 1px solid var(--gold); border-radius: 4px;
    padding: 0.75rem 1.25rem; font-size: 0.85rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    animation: toastShow 0.25s ease;
  }
  @keyframes toastShow {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }

  /* === 컬렉션 화면 === */
  .collection-empty {
    text-align: center; padding: 4rem 1.5rem;
    color: var(--ink-dim);
  }
  .collection-empty-icon {
    font-size: 3.5rem; color: var(--gold-muted); margin-bottom: 1.25rem;
    font-family: 'Cormorant Garamond', serif;
  }
  .collection-empty-text {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.15rem; margin-bottom: 0.5rem; color: var(--ink);
  }
  .collection-empty-hint { font-size: 0.85rem; }
  .collection-summary {
    background: var(--bg-card); padding: 1.5rem;
    border: 1px solid var(--divider); border-radius: 3px; margin-bottom: 1.5rem;
    text-align: center;
  }
  .collection-count {
    font-family: 'Cormorant Garamond', serif; font-size: 2.25rem;
    color: var(--gold-bright); font-style: italic; line-height: 1;
  }
  .collection-count-label {
    font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--gold-muted); margin-top: 0.5rem;
  }
  .collection-list { display: flex; flex-direction: column; gap: 0.6rem; }

  /* 스와이프 래퍼 (overflow hidden + 뒤에 삭제 버튼) */
  .collection-item-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
  }
  .collection-item-delete {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 88px;
    background: linear-gradient(135deg, #8b1e2e, #5d1520);
    color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.2rem;
    font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    z-index: 0;
  }
  .collection-item-delete-icon {
    font-size: 1.1rem; line-height: 1;
  }
  .collection-item-delete:active {
    background: linear-gradient(135deg, #a02439, #6d1828);
  }

  .collection-item {
    position: relative;
    display: flex; align-items: stretch; gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--bg-elevated); border: 1px solid var(--divider);
    border-radius: 8px;
    transition: border-color 0.2s, transform 0.26s cubic-bezier(0.22, 0.7, 0.24, 1);
    cursor: pointer;
    z-index: 1;
    touch-action: pan-y;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
  }
  .collection-item:hover { border-color: var(--gold-muted); }
  .collection-item-wrap.is-swiped .collection-item {
    transform: translateX(-88px);
  }
  .collection-item-thumb {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 6px; overflow: hidden;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--divider);
  }
  .collection-item-thumb img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .collection-item-thumb-placeholder {
    color: var(--gold-muted); opacity: 0.4;
    width: 24px; height: 24px;
  }
  .collection-item-thumb-placeholder svg { width: 100%; height: 100%; }
  .collection-item-body { flex: 1; min-width: 0; }
  .collection-item-name {
    font-family: 'Cormorant Garamond', serif; font-size: 1.15rem;
    color: var(--cream); margin-bottom: 0.2rem;
  }
  .collection-item-meta {
    font-size: 0.7rem; color: var(--ink-dim);
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  .collection-item-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 0.75rem;
  }
  .collection-item-title-block { flex: 1; min-width: 0; }
  .collection-item-rating {
    color: var(--gold-bright); font-size: 0.9rem; letter-spacing: 0.06em;
    flex-shrink: 0; font-family: serif; line-height: 1.3;
    white-space: nowrap;
  }
  .collection-item-rating-empty {
    color: var(--ink-dim); font-size: 0.7rem; letter-spacing: 0.05em;
    flex-shrink: 0; font-style: italic; opacity: 0.5;
    font-family: 'Cormorant Garamond', serif; padding-top: 0.15rem;
  }
  .collection-item-notes {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--ink); font-size: 0.85rem; margin-top: 0.3rem; line-height: 1.4;
  }

  /* === 페이지 헤더 (홈/컬렉션/마이) === */
  .page-header { text-align: center; padding: 2.5rem 0 2rem; }
  .page-header h1 {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-weight: 400; color: var(--cream);
    font-size: clamp(1.75rem, 6vw, 2.25rem); line-height: 1.2;
    margin-bottom: 0.4rem;
  }
  .page-header h1 em { color: var(--gold-bright); }
  .page-header .subtitle {
    color: var(--ink-dim); font-size: 0.9rem;
    font-family: 'Cormorant Garamond', serif; font-style: italic;
  }

  /* === 환영 배너 (첫 방문) === */
  .welcome-banner {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
    border: 1px solid var(--gold-muted);
    border-left: 3px solid var(--gold);
    padding: 1.25rem 1.25rem 1rem;
    border-radius: 4px; margin-bottom: 1.5rem;
    position: relative; animation: fadeIn 0.6s ease;
  }
  .welcome-banner-close {
    position: absolute; top: 0.5rem; right: 0.5rem;
    background: transparent; border: none; color: var(--ink-dim);
    cursor: pointer; font-size: 1.2rem; padding: 0.25rem 0.5rem;
    line-height: 1; flex: none; letter-spacing: 0;
  }
  .welcome-banner-close:hover { color: var(--gold); }
  .welcome-banner-title {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.3rem; color: var(--gold-bright); margin-bottom: 0.4rem;
  }
  .welcome-banner-text {
    font-size: 0.85rem; color: var(--ink); line-height: 1.5;
    margin-bottom: 0.85rem;
  }
  .welcome-banner-actions { display: flex; gap: 0.5rem; }
  .welcome-banner-actions button {
    flex: 1; padding: 0.7rem; font-size: 0.7rem;
    letter-spacing: 0.15em; border-radius: 4px; cursor: pointer;
    text-transform: uppercase; font-weight: 600; border: none;
    font-family: 'Inter', sans-serif;
  }
  .welcome-banner-actions .primary { background: var(--gold); color: var(--bg); }
  .welcome-banner-actions .primary:hover { background: var(--gold-bright); }
  .welcome-banner-actions .secondary {
    background: transparent; color: var(--ink-dim); border: 1px solid var(--divider);
  }
  .welcome-banner-actions .secondary:hover { color: var(--ink); border-color: var(--gold-muted); }

  /* === 가격 CTA 강조 === */
  .price-cta {
    color: var(--gold-bright);
    font-size: 0.7rem; letter-spacing: 0.1em;
    margin-left: 0.4rem; opacity: 0.85;
    transition: opacity 0.2s;
  }
  .price-listing:hover .price-cta { opacity: 1; }

  /* === 홈 탭: 음식 → 와인 추천 === */
  /* 초기 상태: 히어로가 뷰포트 중앙 — 구글 홈 느낌 */
  .home-container {
    display: flex; flex-direction: column;
    min-height: calc(100vh - 110px);  /* bottom tabs + header 제외 */
  }
  .home-hero {
    flex: 1;
    display: flex; flex-direction: column;
    justify-content: center;
    padding: 1.5rem 0 1rem;
    transition:
      flex-grow 1.1s cubic-bezier(0.22, 0.8, 0.36, 1),
      flex-basis 1.1s cubic-bezier(0.22, 0.8, 0.36, 1),
      padding 1.1s cubic-bezier(0.22, 0.8, 0.36, 1);
  }
  /* 결과 있을 때: 히어로 축소 → 콘텐츠 크기만 차지 → 부드럽게 위로 */
  .home-container.has-results .home-hero {
    flex: 0 0 auto;
    padding: 0.2rem 0 0.4rem;
  }
  .home-hero-header {
    text-align: center;
    transition:
      opacity 0.6s cubic-bezier(0.22, 0.8, 0.36, 1),
      max-height 0.95s cubic-bezier(0.22, 0.8, 0.36, 1),
      margin 0.95s cubic-bezier(0.22, 0.8, 0.36, 1);
    max-height: 200px;
  }
  .home-container.has-results .home-hero-header {
    opacity: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .recommend-section {
    background: var(--bg-card); border: 1px solid var(--divider);
    border-radius: 4px; padding: 1.5rem 1.25rem; margin-bottom: 1.5rem;
    transition: padding 0.95s cubic-bezier(0.22, 0.8, 0.36, 1);
  }
  .home-container.has-results .recommend-section {
    padding: 1rem 1.25rem;
  }

  /* 결과 영역 페이드인 — 위에서 천천히 내려옴 */
  #recommendResult:empty { display: none; }
  .home-container.has-results #recommendResult {
    animation: resultFadeIn 0.85s cubic-bezier(0.22, 0.8, 0.36, 1) 0.35s both;
  }
  @keyframes resultFadeIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .recommend-input-row {
    display: flex; gap: 0.5rem; margin-bottom: 1.25rem;
  }
  .recommend-input {
    flex: 1; padding: 0.85rem 1rem; background: var(--bg);
    border: 1px solid var(--divider); border-radius: 6px;
    font-family: 'Inter', sans-serif; color: var(--cream);
    font-size: 0.9rem;
  }
  .recommend-input:focus { outline: none; border-color: var(--gold); }
  .recommend-input::placeholder { color: var(--ink-dim); }
  .recommend-go-btn {
    padding: 0 1.25rem; background: var(--gold); color: var(--bg);
    border: none; border-radius: 6px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 0.75rem;
    letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600;
    flex: none; min-width: 70px;
  }
  .recommend-go-btn:hover { background: var(--gold-bright); }
  /* 와인 DB 통계 — 박스 없이 배경에 녹아들게 */
  .stats-badge {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0.25rem 0.75rem;
    margin-top: 0.6rem;
    border-top: 1px solid rgba(201,169,97,0.1);
    background: transparent;
  }
  .stats-badge-headline {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.05rem; line-height: 1.35;
    color: var(--cream);
    letter-spacing: 0.008em;
    font-weight: 400;
    opacity: 0.72;
  }
  .stats-badge-count {
    flex-shrink: 0; display: flex; align-items: baseline;
    gap: 0.4rem;
    text-align: right;
    opacity: 0.7;
  }
  .stats-badge-count strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem; font-weight: 400;
    color: var(--gold-bright); line-height: 1;
    letter-spacing: 0.015em;
  }
  .stats-badge-count strong::after {
    content: '종';
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem; font-weight: 400;
    color: var(--gold); margin-left: 0.15rem;
    letter-spacing: 0.02em;
  }
  .stats-badge-count span {
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem; color: var(--ink-dim);
    letter-spacing: 0.14em; text-transform: uppercase;
  }

  .stats-badge[hidden] { display: none !important; }

  @media (max-width: 360px) {
    .stats-badge {
      flex-direction: column; align-items: flex-start; gap: 0.35rem;
    }
    .stats-badge-headline { font-size: 0.95rem; }
    .stats-badge-count { text-align: left; }
  }

  /* AI 추천 탭 quick food 카테고리 */
  .rec-food-cat-section { margin-bottom: 1.1rem; }
  .rec-food-cat-header {
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.5rem; padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(201,169,97,0.1);
  }
  .rec-food-cat-emoji { font-size: 0.85rem; }
  .rec-food-cat-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem; letter-spacing: 0.1em;
    color: var(--gold-bright); text-transform: uppercase;
    font-weight: 500;
  }
  .rec-food-cat-chips {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
  }

  /* 선호 목록 추가 버튼 */
  .rec-save-food-btn {
    padding: 0.45rem 0.85rem; border-radius: 8px;
    background: rgba(201,169,97,0.12);
    border: 1px solid rgba(201,169,97,0.3);
    color: var(--gold-bright);
    font-family: 'Inter', sans-serif; font-size: 0.72rem;
    font-weight: 500; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
    flex-shrink: 0;
  }
  .rec-save-food-btn:hover:not(:disabled) {
    background: rgba(201,169,97,0.22);
    color: var(--gold-bright);
  }
  .rec-save-food-btn.is-saved,
  .rec-save-food-btn:disabled {
    background: rgba(95,171,95,0.1);
    border-color: rgba(95,171,95,0.3);
    color: #9ccf9c;
    cursor: default;
  }
  .recommend-result-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
  }

  /* 자주 먹는 음식 접기/펼치기 토글 */
  .recommend-quick-toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 0.25rem;
    background: transparent; border: none;
    cursor: pointer;
    margin-top: 0.25rem;
    font-family: 'Inter', sans-serif;
    color: var(--ink-dim);
    transition: color 0.2s;
  }
  .recommend-quick-toggle:hover { color: var(--gold-bright); }
  .rqt-label {
    font-size: 0.7rem; letter-spacing: 0.1em;
    text-transform: uppercase; font-weight: 500;
  }
  .rqt-chevron {
    font-size: 0.85rem; color: var(--gold);
    transition: transform 0.25s ease;
  }
  .recommend-quick-toggle[aria-expanded="true"] .rqt-chevron {
    transform: rotate(180deg);
  }
  .recommend-quick-grid {
    max-height: 1000px; overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.25s ease;
    margin-top: 0.5rem;
  }
  .recommend-quick-grid.is-collapsed {
    max-height: 0 !important;
    opacity: 0; margin-top: 0;
  }

  .recommend-quick-label {
    font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--gold-muted); margin-bottom: 0.6rem;
  }
  .recommend-quick-grid {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
  }
  .recommend-quick-chip {
    background: var(--bg-elevated); border: 1px solid var(--divider);
    color: var(--ink); padding: 0.5rem 0.85rem; border-radius: 100px;
    font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
    font-family: 'Inter', sans-serif; text-transform: none; letter-spacing: normal; flex: none;
  }
  .recommend-quick-chip:hover {
    background: var(--bg); border-color: var(--gold-muted); color: var(--cream);
  }

  .recommend-result-card {
    background: var(--bg-card); border: 1px solid var(--divider);
    border-radius: 4px; padding: 1.5rem 1.25rem; margin-top: 1rem;
  }
  .recommend-result-header {
    text-align: center; margin-bottom: 1.25rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--divider);
  }
  .recommend-result-food {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.4rem; color: var(--gold-bright); margin-bottom: 0.25rem;
  }
  .recommend-result-hint {
    font-size: 0.7rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--ink-dim);
  }
  .recommend-wine-card {
    display: block; width: 100%; text-align: left;
    background: var(--bg-elevated); border: 1px solid var(--divider);
    padding: 1rem 1.25rem; border-radius: 3px;
    cursor: pointer; transition: all 0.2s;
    margin-bottom: 0.6rem;
    flex: none; font-family: 'Inter', sans-serif; color: inherit;
    text-transform: none; letter-spacing: normal; font-weight: inherit; font-size: inherit;
    position: relative;
  }
  .recommend-wine-card::after {
    content: '›'; position: absolute; right: 1.25rem; top: 50%;
    transform: translateY(-50%); color: var(--gold-muted);
    font-family: 'Cormorant Garamond', serif; font-size: 1.5rem;
    transition: all 0.3s;
  }
  .recommend-wine-card:hover {
    border-color: var(--gold); background: rgba(201, 169, 97, 0.05);
  }
  .recommend-wine-card:hover::after { color: var(--gold-bright); transform: translateY(-50%) translateX(4px); }
  .recommend-wine-rating {
    color: var(--gold-bright); font-size: 0.85rem; letter-spacing: 0.1em;
    font-family: 'Cormorant Garamond', serif; margin-bottom: 0.3rem;
  }
  .recommend-wine-rating .star-empty { color: var(--gold-muted); opacity: 0.4; }
  .recommend-wine-name {
    font-family: 'Cormorant Garamond', serif; font-size: 1.15rem;
    color: var(--cream); margin-bottom: 0.25rem; padding-right: 1.5rem;
  }
  .recommend-wine-type {
    font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 0.4rem;
  }
  .recommend-wine-reason {
    font-size: 0.8rem; color: var(--ink-dim); line-height: 1.5;
    margin-bottom: 0.4rem;
  }
  .recommend-wine-price {
    font-size: 0.8rem; color: var(--gold-bright); font-weight: 500;
  }

  /* === 추천 카드 액션 (구매정보 + 분석) === */
  .recommend-wine-card {
    /* 카드 자체는 클릭 가능하지 않게 변경 */
    cursor: default;
  }
  .recommend-wine-card::after { display: none !important; }
  .recommend-wine-card:hover {
    border-color: var(--divider) !important;
    background: var(--bg-elevated) !important;
  }

  /* 국내 유통 가능한 와인 강조 */
  .recommend-wine-card.is-available {
    border-left: 3px solid var(--gold);
    background: linear-gradient(90deg, rgba(201,169,97,0.06) 0%, var(--bg-elevated) 40%);
  }
  .recommend-wine-card.is-unavailable {
    opacity: 0.82;
  }

  /* 카드 내부 레이아웃: 왼쪽 정보 + 오른쪽 미니 레이더 */
  .rec-card-main {
    display: flex; gap: 0.9rem; align-items: flex-start;
  }
  .rec-card-left { flex: 1; min-width: 0; }
  .rec-card-right {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.35rem; flex-shrink: 0;
  }
  .rec-rating-label {
    font-size: 0.62rem; color: var(--ink-dim);
    letter-spacing: 0.08em; text-transform: uppercase;
    font-family: 'Inter', sans-serif; margin-left: 0.3rem;
  }
  .rec-match-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.5rem; border-radius: 10px;
    background: rgba(201,169,97,0.14);
    border: 1px solid rgba(201,169,97,0.3);
    font-size: 0.62rem; color: var(--gold-bright);
    white-space: nowrap;
  }
  .rec-match-icon { font-size: 0.65rem; }
  .rec-match-text {
    font-family: 'Inter', sans-serif; letter-spacing: 0.02em;
    font-weight: 600;
  }

  /* 가용성 칩 */
  .rec-avail-row { margin-top: 0.6rem; }
  .rec-avail-chip {
    display: inline-flex; align-items: center;
    padding: 0.3rem 0.6rem; border-radius: 6px;
    font-family: 'Inter', sans-serif; font-size: 0.72rem;
    letter-spacing: 0.01em;
  }
  .rec-avail-yes {
    background: rgba(95, 171, 95, 0.12);
    color: #9ccf9c;
    border: 1px solid rgba(95, 171, 95, 0.28);
  }
  .rec-avail-no {
    background: rgba(150,150,150,0.08);
    color: var(--ink-dim);
    border: 1px solid rgba(150,150,150,0.15);
  }
  .rec-actions {
    display: flex; gap: 0.5rem; margin-top: 0.85rem;
    padding-top: 0.85rem; border-top: 1px solid var(--divider);
  }
  .rec-btn {
    flex: 1; padding: 0.7rem 0.4rem; border: none;
    font-family: 'Inter', sans-serif; font-size: 0.78rem;
    letter-spacing: 0.02em; cursor: pointer; border-radius: 6px;
    transition: all 0.2s; text-transform: none; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  }
  .rec-btn-shop {
    background: var(--bg); color: var(--ink); border: 1px solid var(--divider);
  }
  .rec-btn-shop:hover { border-color: var(--gold-muted); color: var(--cream); }
  .rec-btn-shop .chevron { font-size: 0.7rem; transition: transform 0.2s; opacity: 0.7; }
  .rec-btn-shop.expanded .chevron { transform: rotate(180deg); }
  .rec-btn-analyze {
    background: var(--gold); color: var(--bg);
  }
  .rec-btn-analyze:hover { background: var(--gold-bright); }
  .rec-btn-analyze:disabled { opacity: 0.4; cursor: not-allowed; }
  .rec-btn-cost {
    font-size: 0.68rem; opacity: 0.85; font-weight: 400;
  }
  .rec-shop-panel {
    margin-top: 0.75rem; padding: 1rem; background: var(--bg);
    border-radius: 8px; animation: fadeIn 0.3s ease;
  }

  /* === 컬렉션 컨트롤 (필터 + 정렬) === */
  .collection-controls {
    display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center;
  }
  .collection-controls .collection-filter {
    flex: 1; margin-bottom: 0;
  }
  .collection-sort {
    padding: 0.55rem 1.7rem 0.55rem 0.85rem;
    background: var(--bg-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%238a7440' stroke-width='1.2' stroke-linecap='round'><path d='M1.5 1.5 L5 5 L8.5 1.5'/></svg>") no-repeat right 0.6rem center;
    background-size: 10px 6px;
    border: 1px solid var(--divider);
    border-radius: 2px;
    color: var(--gold-bright);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    cursor: pointer; appearance: none; -webkit-appearance: none;
    flex-shrink: 0;
    transition: border-color 0.2s;
    line-height: 1.3;
  }
  .collection-sort:hover { border-color: var(--gold-muted); }
  .collection-sort:focus { outline: none; border-color: var(--gold); }
  .collection-sort option {
    background: var(--bg-card); color: var(--cream);
  }

  /* === 컬렉션 필터 토글 === */
  .collection-filter {
    display: flex; gap: 0; margin-bottom: 1rem;
    border: 1px solid var(--divider); border-radius: 2px;
    padding: 0.25rem; background: var(--bg-card);
  }
  .collection-filter-btn {
    flex: 1; padding: 0.6rem; background: transparent;
    color: var(--ink-dim); font-size: 0.7rem; letter-spacing: 0.15em;
    border: none; cursor: pointer; font-family: 'Inter', sans-serif;
    text-transform: uppercase; font-weight: 500; border-radius: 2px;
    transition: all 0.2s;
  }
  .collection-filter-btn.active { background: var(--bg-elevated); color: var(--gold-bright); }
  .collection-item-badges {
    display: flex; gap: 0.4rem; margin-top: 0.4rem; align-items: center;
    font-size: 0.65rem; color: var(--ink-dim); letter-spacing: 0.1em;
  }
  .collection-item-liked { color: var(--burgundy-light); }
  .collection-item-views {
    background: var(--bg); padding: 0.15rem 0.5rem; border-radius: 100px;
    font-size: 0.65rem;
  }

  /* === Coming Soon 카드 === */
  .coming-soon {
    background: var(--bg-card); border: 1px dashed var(--gold-muted);
    padding: 3rem 1.5rem; text-align: center; border-radius: 3px;
    color: var(--ink-dim);
  }
  .coming-soon-title {
    font-family: 'Cormorant Garamond', serif; font-size: 1.4rem;
    color: var(--gold-bright); font-style: italic; margin-bottom: 0.75rem;
  }
  .coming-soon-text { font-size: 0.9rem; line-height: 1.6; }
  footer {
    text-align: center; margin-top: 4rem; padding-top: 2rem;
    font-size: 0.7rem; color: var(--ink-dim); letter-spacing: 0.3em; opacity: 0.6;
  }
  footer::before { content: '✦'; display: block; color: var(--gold); font-size: 0.8rem; margin-bottom: 1rem; letter-spacing: normal; }