:root {
    --bg-main: #f7f5f0;
    --bg-secondary: #edeae3;
    /* グラデーションの「消える側」に使う、地色と同じ色の透明。
       CSS の transparent は rgba(0,0,0,0)＝透明な「黒」なので、地色から
       transparent へ補間すると途中が黒へ寄ってグレーの帯になる。Chromium は
       乗算済みアルファで補間するため出ないが、iOS Safari では帯が見える。
       フェードの端には必ずこちらを使うこと（transparent は使わない） */
    --bg-main-fade: rgba(247, 245, 240, 0);
    --bg-secondary-fade: rgba(237, 234, 227, 0);
    --bg-input: #ffffff;
    --bg-hover: #e3dfd7;
    --border-color: rgba(180, 170, 155, 0.35);
    --border-faint: rgba(180, 170, 155, 0.2);
    --text-primary: #1a1a1a;
    --text-secondary: #6b6560;
    --text-tertiary: #a09890;
    --gold: #b8860b;
    --gold-dim: rgba(184, 134, 11, 0.12);
    --gold-soft: rgba(184, 134, 11, 0.08); /* チャット吹き出し・サジェスト・ボタン共通の淡い金 */
    --like: #d4a853;          /* 保存済みしおり(暗いピル上のオーバーレイ用): KPIと同系の明るい金 */
    --like-strong: #b8860b;   /* 保存済みしおり(明るい背景=詳細/KPI用): 濃い金(--gold と同値) */
    --gold-line: rgba(184, 134, 11, 0.45); /* 押せる語に引く下線。文字色より薄くして主張を抑える */
    --gold-gradient: linear-gradient(135deg, #d4a853 0%, #b8860b 100%);
    --radius: 24px;
    --radius-sm: 16px;
    /* 入力欄1行ぶんの高さ。テキスト入力・選択欄・単位付き入力・セグメント・
       ノートのチップ枠が縦に並ぶので、全部この値にそろえる（揃っていないと
       同じ列の欄が1〜4pxずつずれて落ち着かない）。
       内訳は .edit-input の実寸: 16px × 1.4 + 上下 padding 20px + 上下 border 3px */
    --edit-field-h: 45px;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --font-body: 'Noto Serif JP', serif;
    --font-display: 'DM Serif Display', 'Noto Serif JP', Georgia, serif;
    --amber-warm: #c97d1d;
    --amber-glow: rgba(201, 125, 29, 0.15);
    --glass-bg: rgba(247, 245, 240, 0.72);
    --glass-border: rgba(184, 134, 11, 0.18);
    /* 丸ガラス調ボタン（絞り込みFAB・戻る/閉じる・詳細アクション・Uisgeに聞く）の地色。
       元は rgba(255,255,255,0.55) + backdrop-filter だったが、不透明な帯の上に載る
       ボタン（戻る・閉じる）は何もぼやけず、スクロールする一覧に被る FAB だけ
       背後が流れてぼやけるため、同じ見た目のはずのボタン同士で挙動が揃わなかった。
       --bg-main に白55%/75%を重ねた実効色をベタで持たせ、どこに置いても同じ見えにする */
    --glass-btn-bg: #fbfaf8;
    --glass-btn-bg-hover: #fdfcfb;
    --shadow-gold: 0 8px 32px rgba(184, 134, 11, 0.12);
    /* 各タブの中身が始まる位置＝画面上端に空ける帯の高さ。
       #recordsList / .register-container / .chat-container / .search-landing(+入力のmargin)
       / #barTabPanelBottles が共有する 76px。ワードマークとFABはこの帯の中央に置く */
    --app-top-band: 76px;
    /* 上端の共通ルール: 画面の一番上のバーの下端を、中身が「溶けて消える」か
       「すっと切れる」かで揃える。判定は、その下を流れるものが延々続くかどうか。
         フェード（この --top-fade ぶん地色を透明へ抜く）
           = 一覧・会話・縦積み情報が流れ続ける画面
             .app-brand-bar（コレクション/登録/チャットの1枚目/探すランディング/
             マイページ/バー各タブ）、探すの全件一覧、プロフィール、
             飲みたいボトル一覧、チャットの会話画面、Uisgeに聞くシート
         きっぱり（地色をベタのままにする）
           = 中身がフォーム・1画面完結のステージ・そもそも流れない短いメニュー
             .edit-modal-header（フォーム）、解析前プレビュー（写真ステージ）、
             .filter-sheet-header（短いメニュー・border-bottom あり）、
             .whisky-detail-topbar（現状維持）
       フェード側を足すときは、バーをオーバーレイにして中身を下へ潜らせ、
       スクロール側に同じ高さの padding-top を入れる。バーの高さが可変だったり
       フローから外せない事情があるときは、代わりにスクロール領域自身へ
       mask-image をかける（.ask-sheet-body がこの形）。 */
    --top-fade: 24px;
}

/* ============================================
   Header Updates
   ============================================ */
.header {
    position: relative;
}

.logout-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    margin-left: 8px;
}

.logout-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Google ログイン処理中オーバーレイ */
.login-loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-main);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}

.login-loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-out, visibility 0s linear 0s;
}

html, body {
    height: 100%;
    overflow: hidden;
    position: fixed;
    width: 100%;
}

body {
    font-family: var(--font-display);
    background: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
}

.app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: 100%;
    overflow: hidden;
}

/* 会話中にキーボードが開いたら下部タブを隠す（入力欄をキーボード直上に） */
body.keyboard-open .header {
    display: none;
}

/* Header (タブ行) - 下部に配置 */
.header {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    order: 3;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 30;
}

/* 並び: タブコンテンツ → 下部タブ（inputArea は tabPanelChat の中に入る） */
.tab-content { order: 1; }

.filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.menu-section {
    display: flex;
    flex-direction: column;
    /* 縦に並ぶ入力欄の間隔も登録・編集画面と同じ（.edit-step の gap）。
       ここだけ 8px で、45px の欄が3つ続くと窮屈だった */
    gap: 14px;
}

.menu-section-title {
    /* 入力欄の文字が16pxになったので、見出しは1段上げて上下関係を保つ
       （ダッシュボードの .section-title 19px より小さく、欄より大きい位置） */
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    /* 下の余白は .menu-section の gap と足して 16px。欄どうしの間隔を広げても
       見出しと最初の欄の距離は変えない */
    margin-bottom: 2px;
    text-align: left;
    align-self: stretch;
}

/* 見出しと「すべて解除」を1行に並べる（絞り込みセクション） */
.menu-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.menu-section-head .menu-section-title {
    margin-bottom: 0;
    /* 単体の見出しは stretch（.menu-section-title）だが、この行では件数・すべて解除と
       ベースラインを共有させたいので、行の align-items をそのまま効かせる */
    align-self: auto;
}

/* 絞り込みが1つ以上効いているときだけ出る（syncFilterUiState が hidden を出し入れ）。
   解除の×が3つ並ぶのを避けるためテキストボタンにしている */
.filter-clear-all {
    flex: 0 0 auto;
    padding: 2px 0;
    border: none;
    background: transparent;
    color: var(--gold);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.filter-clear-all[hidden] {
    display: none;
}

/* 絞り込み後の件数。見出しの右にそっと添えるだけの補助情報なので、
   見出しより小さく・薄く置いて、読む順を 見出し → 件数 → すべて解除 に保つ */
.filter-result-count {
    /* 自分は見出しのすぐ隣、「すべて解除」は右端、という並びにする */
    margin-right: auto;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.filter-result-count[hidden] {
    display: none;
}

/* 0件の空表示に出す解除ボタン。エラー表示の「再試行」と同じ見た目にして、
   「ここから戻れる」ことが同じ形で伝わるようにする */
.filter-reset-btn {
    margin-top: 4px;
    padding: 8px 20px;
    background: var(--gold-soft);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.filter-reset-btn[hidden] {
    display: none;
}

.filter-reset-btn:active {
    background: var(--gold-dim);
}

@media (hover: hover) and (pointer: fine) {
    .filter-reset-btn:hover {
        transform: translateY(-1px);
        background: var(--gold-dim);
    }
}

/* 絞り込みに引っかかった箇所（一覧のカード・詳細）。
   背景は敷かず文字色だけ変える。カードは画像の上に文字が乗る構成で、
   ハイライトの地色まで足すと情報の面が増えて一覧の見通しが落ちるため */
.filter-hit {
    color: var(--gold);
    font-weight: 700;
}

/* 詳細の基本情報は値そのものに .filter-hit が付く（子spanではない）ので、
   項目値の色指定（.whisky-detail-info-grid .value）に負けないよう強さを揃える */
.whisky-detail-info-grid .value.filter-hit {
    color: var(--gold);
    font-weight: 700;
}

/* ============================================
   絞り込みの各行（.filter-field）
   セレクトの右端は「未選択＝自前シェブロン / 選択中＝解除の×」を同じ位置で
   差し替える。行の幅が変わらないので、×の出入りでレイアウトがガタつかない。
   ×は <button> をセレクトの上に重ねてあり、押してもセレクトは開かない。
   ============================================ */
.filter-field {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-field-chevron {
    position: absolute;
    right: 12px;
    display: inline-flex;
    color: #9a8f82;
    /* セレクト本体のタップを邪魔しない */
    pointer-events: none;
}

.filter-field.is-active .filter-field-chevron {
    display: none;
}

.filter-field-clear {
    position: absolute;
    right: 7px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* シート冒頭の「閉じる」×（線だけ）と役割が違うので、こちらは塗りの丸にする */
    background: rgba(74, 69, 64, 0.14);
    color: #4a4540;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 見た目は22pxのまま、指で押せる44px相当の当たり判定を確保する */
.filter-field-clear::before {
    content: '';
    position: absolute;
    inset: -11px;
}

.filter-field.is-active .filter-field-clear {
    display: inline-flex;
}

.filter-field-clear:active {
    background: rgba(74, 69, 64, 0.26);
}

/* 選択中の行は金色に。開いた瞬間に「どれが効いているか」が読める */
.filter-field.is-active .sort-select,
.filter-field.is-active .records-search-input {
    border-color: var(--gold);
    background: var(--gold-dim);
    color: var(--text-primary);
    font-weight: 700;
}

/* ×が出ている間だけ、その分の余白を空ける（未入力時はプレースホルダを長く見せる） */
.filter-field.is-active .records-search-input {
    padding-right: 34px;
}

.menu-section .sort-select,.menu-section .records-search-wrapper,.menu-section .filter-field {
    width: 100%;
}

/* 縦に並ぶ入力欄は登録・編集画面と同じ寸法に揃える（--edit-field-h の規約）。
   ここだけ13px・37pxで小さく、同じ列の検索欄（16px）とも高さが合っていなかった */
.menu-section .sort-select {
    justify-content: flex-start;
    padding: 10px 34px 10px 16px;
    min-height: var(--edit-field-h);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
}

/* 絞り込みシート内の「表示形式」トグル（グリッド⇄リスト） */
.view-mode-segment {
    display: flex;
    width: 100%;
    background: var(--gold-dim);
    border-radius: 999px;
    padding: 3px;
}

.view-mode-segment-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* 枠の上下 padding 3px と合わせて --edit-field-h（45px）に収める */
    height: calc(var(--edit-field-h) - 6px);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--gold);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.view-mode-segment-btn span {
    font-size: 15px;
}

.view-mode-segment-btn.active {
    background: var(--gold);
    color: #fff;
}

.view-mode-segment-btn:hover:not(.active) {
    background: rgba(184, 134, 11, 0.22);
}

.records-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.records-search-icon {
    position: absolute;
    left: 15px;
    color: #9a8f82;
    pointer-events: none;
}

.records-search-input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    /* セレクトと同じ1行ぶんの高さ（--edit-field-h の規約） */
    min-height: var(--edit-field-h);
    line-height: 1.4;
    /* iOS Safariの自動ズーム回避のため16px */
    font-size: 16px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    outline: none;
    transition: var(--transition);
    box-sizing: border-box;
}

/* Chrome/Android が出すネイティブの×は、自前の解除ボタンと二重になるので消す
   （iOS Safari はそもそも出さないため、見た目を全環境で揃える意味もある） */
.records-search-input::-webkit-search-cancel-button,
.records-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.records-search-input::placeholder {
    color: #9a8f82;
    font-weight: 500;
}

.records-search-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-dim);
}

.records-search-wrapper:focus-within .records-search-icon,
.filter-field.is-active .records-search-icon {
    color: var(--gold);
}

.menu-logout-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.menu-logout-btn:hover {
    background: rgba(217, 48, 37, 0.08);
    border-color: rgba(217, 48, 37, 0.3);
    color: #d93025;
}

.icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Main Area */
.main-area {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Welcome Screen */
.welcome-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    gap: 32px;
    overflow: hidden;
}

/* PC: greeting(0) → input(1) → suggestions(2) */
.welcome-screen .chat-greeting { order: 0; }
.welcome-screen .welcome-input-slot { order: 1; }
.welcome-screen .suggestions-carousel { order: 2; }

.chat-greeting {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    color: var(--gold);
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 600px;
    text-align: left;
}

@media (max-width: 640px) {
    .chat-greeting {
        font-size: 23px;
        padding-left: 16px;
    }
}

.welcome-input-slot {
    width: 100%;
    max-width: 600px;
    margin-top: 30px;
}

.input-area.welcome-position {
    padding: 0;
    background: transparent;
}

.input-area.welcome-position .input-wrapper {
    max-width: 100%;
}

.suggestions-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 540px;
    width: 100%;
}

/* カルーセル: スライドトラック */
.carousel-track {
    width: 100%;
}

.carousel-slide {
    display: none;
    width: 100%;
    animation: carouselFadeIn 0.4s ease;
}

.carousel-slide.active {
    display: flex;
}

@keyframes carouselFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* カルーセル: 矢印＋スライドの横並び行 */
.carousel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* 前後ナビボタン */
.carousel-nav-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: var(--gold);
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    flex-shrink: 0;
    padding: 0;
}

.carousel-nav-btn:hover {
    background: var(--gold-dim);
    border-color: var(--gold);
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.18);
}

/* バーインジケーター */
.carousel-dots {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
    padding: 0 40px; /* nav-btn(30px) + gap(10px) */
    box-sizing: border-box;
}

.carousel-dot {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: var(--border-color);
    transition: var(--transition);
}

.carousel-dot.active {
    background: var(--gold);
}

.suggestion-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    white-space: nowrap;
}

.suggestion-btn:hover {
    color: var(--gold);
    transform: translateY(-2px);
}

/* Chat Area */
.chat-area {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* 回答末尾やリンクカードでコンテンツがビューポートを超えた瞬間に縦スクロールバーが
       出現して幅が縮み、右寄せの質問バブルが横にずれるのを防ぐ（領域を常に確保）。
       iOS のオーバーレイスクロールバーでは無害。 */
    scrollbar-gutter: stable;
}

.chat-container {
    flex: 1;
    max-width: 768px;
    width: 100%;
    margin: 0 auto;
    padding: var(--app-top-band) 24px 36px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* キーボード起動時のみ、短い応答を入力欄直上に張り付ける（長い応答時は無効） */
body.keyboard-open .chat-container > *:first-child {
    margin-top: auto;
}

/* ターン末尾の余白スペーサー。質問を最上部まで送るための不足分だけ高さを持つ。
   gap や flex の縮みで高さがぶれないよう固定し、操作対象にもしない。 */
.turn-spacer {
    flex: 0 0 auto;
    pointer-events: none;
}

/* Messages */
.message {
    display: flex;
    gap: 16px;
    animation: fadeIn 0.3s ease;
    /* 長い回答の先頭へスクロールする際、上部フローティングUIに隠れないよう余白を確保 */
    scroll-margin-top: 76px;
}

.message.user {
    justify-content: flex-end;
}

.message.user .message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 100%;
}

.message.user .message-body {
    flex: none;
    background: var(--gold-soft);
    color: var(--text-primary);
    padding: 12px 20px;
    border-radius: 20px;
    max-width: 85%;
    width: fit-content;
    box-shadow: none;
    word-break: break-word;
}

.message.user .message-body p {
    color: var(--text-primary);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-content {
    flex: 1;
    min-width: 0;
    max-width: 85%;
}

.agent-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.message-body {
    flex: 1;
    min-width: 0;
}

.message.assistant .message-content {
    max-width: 95%;
}

.message.assistant .message-body {
    background: transparent;
    padding: 0;
}

.message-body p {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-primary);
}

.message-body p:last-child {
    margin-bottom: 0;
}

.message-body a {
    color: var(--gold);
    text-decoration: underline;
    word-break: break-all;
}

.message-body a:hover {
    opacity: 0.8;
}

/* Link Card — ニュースリンクをコンパクトボタンとして表示 */
.link-card-message {
    margin-top: 2px;
    margin-bottom: 2px;
}

/* コンテンツ幅に合わせてバブル幅を縮小 */
.link-card-message .message-content {
    flex: none;
    width: fit-content;
    max-width: 85%;
}

.link-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    display: inline-flex;
    flex-direction: column;
}

.link-card-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.7;
    transition: var(--transition);
    border-bottom: none;
    background: var(--gold-soft);
    border-radius: 20px;
}

.link-card-item:last-child {
    border-bottom: none;
}

.link-card-item:hover {
    color: var(--gold);
    background: var(--gold-soft);
    text-decoration: none;
    transform: translateY(-2px);
}

.link-card-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.link-card-label {
    color: inherit;
    word-break: break-word;
}

/* Typing Indicator — ステータスメッセージ + ドットアニメーション */
.message-body:has(.typing-indicator) {
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 0 !important;
}

.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    line-height: 1;
}

.typing-status-text {
    font-size: 16px;
    color: var(--gold);
    transition: opacity 0.3s ease;
}

.typing-dots {
    color: var(--gold);
    font-size: 16px;
}

.typing-dots::after {
    content: '';
    animation: typingDots 1.5s steps(4, end) infinite;
}

@keyframes typingDots {
    0%   { content: ''; }
    25%  { content: '•'; }
    50%  { content: '••'; }
    75%  { content: '•••'; }
    100% { content: ''; }
}

/* タイピングインジケーター：エージェント名のフェードトランジション */
#typingAgentName {
    transition: opacity 0.3s ease;
}

#typingAgentName.fading {
    opacity: 0;
}

#typingAgentName.initial {
    opacity: 1;
}

.typing-status-text.fading {
    opacity: 0;
}

/* Input Area */
.input-area {
    padding: 16px;
    background: var(--bg-main);
    flex-shrink: 0;
}

.input-wrapper {
    max-width: 768px;
    margin: 0 auto;
}

.input-container {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 10px 14px;
    transition: var(--transition);
}

.input-container:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-dim);
}

#userInput,
#askSheetInput {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 16px; /* iOS auto-zoom prevention (must be 16px+) */
    font-family: inherit;
    line-height: 1.5;
    resize: none;
    outline: none;
    min-height: 28px;
    max-height: 200px;
    overflow-y: auto;
    touch-action: auto;
}

#userInput::placeholder,
#askSheetInput::placeholder {
    color: var(--text-tertiary);
}

.send-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* サジェスチョンと同系統の淡いゴールド地 × ゴールド矢印 */
    background: var(--gold-dim);
    border: none;
    border-radius: 50%;
    color: var(--gold);
    cursor: pointer;
    transition: transform var(--transition), opacity var(--transition), background var(--transition);
    flex-shrink: 0;
    box-shadow: none;
}

.send-btn:hover:not(:disabled) {
    transform: scale(1.05);
    background: rgba(184, 134, 11, 0.2);
}

/* 空入力時はボタンをその場でフェードアウト（送信中は .loading が付くので対象外）。
   38pxの場所は常に確保するので、入力欄の高さ・幅・文字位置が一切動かない */
.send-btn:disabled:not(.loading) {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
    cursor: default;
}

/* 送信ボタン ローディングスピナー */
.send-btn.loading {
    background: var(--gold-dim);
    cursor: wait;
}

.send-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(184, 134, 11, 0.25);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* 送信中の入力エリア */
.input-area.sending .input-container {
    border-color: var(--gold);
    opacity: 0.7;
}

/* エラーメッセージ + リトライボタン */
.error-message .error-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: transparent !important;
    border: none;
    box-shadow: none !important;
    padding: 0 !important;
}

.error-text-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--gold-gradient);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: var(--gold-soft);
    color: var(--text-primary);
    border: none;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.retry-btn:hover {
    transform: scale(1.05);
    background: var(--gold-dim);
}

@keyframes imagePulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Scrollbar */
.chat-area::-webkit-scrollbar,
.main-area::-webkit-scrollbar,
#userInput::-webkit-scrollbar,
#askSheetInput::-webkit-scrollbar {
    width: 8px;
}

.chat-area::-webkit-scrollbar-track,
.main-area::-webkit-scrollbar-track,
#userInput::-webkit-scrollbar-track,
#askSheetInput::-webkit-scrollbar-track {
    background: transparent;
}

.chat-area::-webkit-scrollbar-thumb,
.main-area::-webkit-scrollbar-thumb,
#userInput::-webkit-scrollbar-thumb,
#askSheetInput::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 4px;
}

.chat-area::-webkit-scrollbar-thumb:hover,
.main-area::-webkit-scrollbar-thumb:hover,
#userInput::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 640px) {
    .welcome-screen {
        justify-content: flex-start;
        padding-top: 12vh;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 0;
        gap: 20px;
    }

    /* モバイル: greeting → input → suggestions の順 */
    .welcome-screen .chat-greeting { order: 0; }
    .welcome-screen .welcome-input-slot { order: 1; margin-top: 0; }
    .welcome-screen .suggestions-carousel { order: 2; }

    /* モバイル: サジェスチョン4つを縦に並べて左寄せ */
    .suggestions-carousel {
        gap: 8px;
        align-items: flex-start;
        margin-top: 20px;
    }

    .carousel-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .carousel-nav-btn {
        display: none;
    }

    .carousel-dots {
        display: none;
    }

    .suggestion-btn {
        padding: 12px 18px;
        font-size: 15px;
        justify-content: flex-start;
        text-align: left;
        width: auto;
        background: var(--gold-soft);
        border: none;
        border-radius: 20px;
    }

    .carousel-slide {
        display: flex !important;
        margin-bottom: 18px;
    }

    .chat-container {
        padding: 76px 16px 24px;
        gap: 28px;
    }

    .message {
        gap: 10px;
    }

    /* Mobile: user message — suggestion-btn と同じスタイル */
    .message.user .message-body {
        max-width: 85%;
        padding: 12px 18px;
        font-size: 15px;
    }

    /* Mobile: assistant message compact */
    .message.assistant .message-content {
        max-width: 95%;
    }

    /* Mobile: リンクカード — suggestion-btn と同じスタイル */
    .link-card-item {
        padding: 12px 18px;
        font-size: 15px;
        justify-content: flex-start;
        width: auto;
        background: var(--gold-soft);
        border-radius: 20px;
    }

}

/* iOS Safe Area Support */
@supports (padding: max(0px)) {
    .header {
        padding-top: max(0px, env(safe-area-inset-top));
    }

    .input-area:not(.welcome-position) {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .chat-container {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }

    .welcome-screen {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .suggestion-btn:hover {
        color: var(--text-primary);
        transform: none;
    }

    .suggestion-btn:active {
        color: var(--gold);
    }

    .suggestion-btn:focus {
        color: var(--text-primary);
    }

    .link-card-item:hover {
        color: var(--text-primary);
        transform: none;
        background: var(--gold-soft);
    }

    .link-card-item:active {
        color: var(--gold);
    }

    .link-card-item:focus {
        color: var(--text-primary);
    }

    .carousel-nav-btn:hover {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        box-shadow: none;
    }

    .carousel-nav-btn:active {
        background: var(--gold-dim);
        border-color: var(--gold);
    }

    .send-btn:hover:not(:disabled) {
        transform: none;
    }

    .send-btn:active:not(:disabled) {
        transform: scale(0.95);
    }

    .sort-select:hover,
.icon-btn:hover,
.logout-btn:hover {
        background: transparent;
        color: var(--text-secondary);
    }

    .sort-select:active,
.icon-btn:active,
.logout-btn:active {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
}

/* ============================================
   Header Tabs (Desktop)
   ============================================ */

.header-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    position: relative;
    min-height: 52px;
}

.header-tab-indicator {
    display: none;
}

.header-tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 6px;
    margin: 3px 2px;
    background: transparent;
    border: none;
    border-radius: 14px;
    color: #4a4540;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    /* 下部タブは再タップ（先頭へ戻す/更新）で連打されるボタン。
       ダブルタップズームと 300ms の click 遅延、タップ時のグレーの点滅を止める */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* 押した瞬間の手応え。再タップは画面が大きく変わらないことがあるため、
   「押せた」ことだけはボタン側で必ず返す */
.header-tab-item:active {
    transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
    .header-tab-item:active {
        transform: none;
    }
}

/* キーボード操作（← → / Home / End）でどのタブにいるか分かるように */
.header-tab-item:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.header-tab-item .tab-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.header-tab-item .tab-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.header-tab-item .tab-label {
    line-height: 1;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* 探すタブの NEW ドット（未閲覧の公開記録があるとき表示） */
.header-tab-new-dot {
    position: absolute;
    top: -3px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold-gradient);
    box-shadow: 0 0 0 2px var(--bg-secondary, #fff), 0 1px 2px rgba(0,0,0,0.25);
    pointer-events: none;
}
.header-tab-new-dot[hidden] { display: none; }

.header-tab-collection {
    touch-action: pan-y;
    user-select: none;
}

/* ============================================
   探すタブ（モードピル + 検索 + 全件ボタン）
   ============================================ */
.search-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
}

/* 全件一覧レイヤー：ランディング（戻り先）の上に被さる不透明レイヤー。
   左→右スワイプで右へスライドさせると、下のランディングが覗いて戻り先が見える。 */
.search-list-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--bg-main);
    display: none;
    flex-direction: column;
    overflow: hidden;
    /* スワイプ戻りのスライド/フェード（詳細・プロフィールと同テンポ） */
    transition: transform 0.25s ease, opacity 0.25s ease;
    will-change: transform;
}
.search-list-layer.is-active {
    display: flex;
}
.search-list-layer.is-dragging {
    transition: none;
}/* 探すの全件一覧・プロフィール（＝飲みたいボトル一覧も同じDOM）の上端バー。
   区切り線を持たず、下をカード一覧が延々流れる画面なので、上端の共通ルールでは
   フェード側。.app-brand-bar と同じく「中身をバーの下へ潜らせて溶かす」ため、
   フローから外してオーバーレイにし、スクロール側で同じ高さぶんの余白を空ける */
.search-list-bar,
.profile-view-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* 一覧（.search-result-area / .profile-view-body は position:relative）より前面 */
    z-index: 4;
    /* 帯の作りを .app-brand-bar とそっくり同じにする（高さ・中身の縦位置・
       地色のグラデーションまで同値）。こうしないと丸ボタンの座り位置が
       コレクションの絞り込みFAB（帯の縦中央＝上から17px）とずれ、
       ボタン下の余白も変わって、同じ画面の作りに見えなくなる */
    height: var(--app-top-band);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 12px;
    /* 不透明域は --top-fade の手前まで。そこから帯の下端へ向けて溶かす */
    background: linear-gradient(
        to bottom,
        var(--bg-main) calc(var(--app-top-band) - var(--top-fade)),
        var(--bg-main-fade) var(--app-top-band)
    );
    /* 帯自体は素通し（.app-brand-bar と同じ）。フェード部分が一覧のスクロールや
       タップを食わないようにし、操作を受けるのは中のボタン・タイトルだけにする */
    pointer-events: none;
    flex-shrink: 0;
}

.search-list-bar > *,
.profile-view-header > * {
    pointer-events: auto;
}

/* 帯（不透明域＋フェード）のぶん、中身の開始位置を下げる。
   .app-brand-bar と #recordsList の関係とまったく同じ値で、フェードの
   終わり＝中身の先頭になるので、静止時に1行目が薄くならない */
.search-result-scroll,
.profile-data-panel {
    padding-top: var(--app-top-band);
    scroll-padding-top: var(--app-top-band);
}

/* グリッド表示の .records-list は padding 一括指定が !important なので、
   #recordsList と同じくこちらも !important で上書きする */
.profile-view-body .records-list {
    padding-top: var(--app-top-band) !important;
    scroll-padding-top: var(--app-top-band);
}

/* 戻るボタン（filter-fab と同じ丸いUI） */.search-back-btn,
.profile-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 50%;
    background: var(--glass-btn-bg);
    color: var(--gold);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.search-back-btn.icon-only {
    width: 42px;
    height: 42px;
    padding: 0;
}

@media (hover: hover) and (pointer: fine) {
    .search-back-btn:hover {
        background: var(--glass-btn-bg-hover);
    }
}.search-list-title,
.profile-view-title,
.edit-modal-eyebrow {
    flex: 1 1 0;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 丸ボタンとの視覚的な中央合わせ（字形が上寄りに見えるため1px下げる） */
    transform: translateY(2px);
}

/* 共通: 絞り込み・並び替えシート（ボトムシート） */
.filter-sheet-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1070;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.filter-sheet-backdrop.open {
    display: block;
    opacity: 1;
}
.filter-sheet {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    /* 画面の3/4。検索欄に打った文字とセレクトの選択値が最後まで読める幅を優先する
       （下の一覧は左1/4が覗いていれば「絞り込みが効いた」ことは分かる）。
       上限はスマホ最大幅（〜450px）で 75vw を下回らない値にして、
       タブレット・PCでだけ効くようにする */
    width: min(75vw, 340px);
    background: var(--bg-secondary);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.filter-sheet.open {
    transform: translateX(0);
}

/* 指で引いている間はアニメを切って1:1で追従させる（JS が inline transform を更新）。
   暗幕も同時に薄くするので、別レイヤーに固定して描き直しを分ける */
.filter-sheet.is-dragging {
    transition: none;
    will-change: transform;
}

.filter-sheet-backdrop.is-dragging {
    transition: none;
    will-change: opacity;
}
.filter-sheet-header h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.filter-sheet-body {
    padding: 14px 16px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.filter-sheet-body .menu-section {
    padding: 0;
    border: none;
}

/* ============================================
   共通: 左上のワードマーク（各タブの最初の画面）
   ログインあり（本体タブ）・バー（自店ホーム）・無認証（/b）で同じ実体を使う。
   フローに置くとタブごとに中身が下がるため、FABと同じくコンテンツに被せる
   オーバーレイにし、上端の帯（--app-top-band）の中央に据える。
   ============================================ */
.app-brand-bar {
    /* ノッチぶんの逃げ。本体タブは .tab-content が safe-area を持たない前提で 0、
       画面全体を覆うバーの自店ホームだけ inset を足す（.app-brand-bar-inset） */
    --brand-bar-inset: 0px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    /* 帯の高さ＝タブの中身が始まる位置。padding-top で safe-area を逃がしても
       content-box は常に --app-top-band になり、中身は帯の縦中央に載る */
    height: calc(var(--app-top-band) + var(--brand-bar-inset));
    padding: var(--brand-bar-inset) 14px 0;
    display: flex;
    align-items: center;
    /* スクロールする一覧（コレクション・マイページ・バーのボトル）の中身が
       ワードマークに重なって両方読めなくなるのを防ぐ地色。背景と同色なので
       静止した画面では見えず、下端 --top-fade ぶんだけ透明へ抜いて、
       中身が帯の下へすっと溶けて消えるようにする（上端の共通ルールを参照） */
    background: linear-gradient(
        to bottom,
        var(--bg-main) calc(var(--brand-bar-inset) + var(--app-top-band) - var(--top-fade)),
        var(--bg-main-fade) calc(var(--brand-bar-inset) + var(--app-top-band))
    );
    /* 帯自体は素通し。下のコンテンツのスクロール・タップを邪魔しない */
    pointer-events: none;
}

/* チャットの会話画面: ワードマークの文字だけ消して帯（＝上端のフェード）は残す。
   帯ごと消すと会話本文が画面上端でぷつりと切れ、他タブと上端が揃わない */
.app-brand-bar.is-wordmark-hidden .app-brand {
    visibility: hidden;
}

.app-brand-bar-inset {
    --brand-bar-inset: env(safe-area-inset-top, 0px);
}

/* ワードマーク: LPタイトル・スプラッシュと同じ単色ゴールドの Uisge（表示のみ・遷移しない） */
.app-brand {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--gold);
}

/* Malt Intelligence（mi.uisge.app / バーモード）のワードマーク。色は当面 Uisge と同じ金色。
   語が長いぶん一回り小さくする */
body.malt-brand .app-brand {
    font-size: 21px;
    letter-spacing: 0.01em;
}

/* 未ログインのトップの「ユーザー登録」。ワードマーク（Uisge）のすぐ右に置く（右上は 探す⇔分析 トグル）。
   帯自体は pointer-events:none なのでボタンだけ戻す。押すとそのまま Google ログイン（説明のシートは挟まない） */
.brand-login-btn {
    pointer-events: auto;
    margin-left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 高さは右上の 探す⇔分析 トグルの中のボタン（36px）と揃える */
    height: 36px;
    padding: 0 16px 0 13px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--glass-btn-bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition);
}

.brand-login-btn:hover {
    background: var(--glass-btn-bg-hover);
}

/* Malt Intelligence の未ログイントップの末尾「バー・酒屋の方はこちらから登録」。
   おすすめ（カルーセル）と同じスクロール領域の最後に置き、自然にスクロールすると出てくる。
   中央揃え・下線の控えめなリンク。店舗用のログインはこれだけ（Uisge には出さない・ログイン後は出さない） */
.bar-entry-link {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 22px auto 0;
    padding: 10px 6px calc(10px + env(safe-area-inset-bottom, 0px));
    border: 0;
    background: none;
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--gold-line);
    cursor: pointer;
}

body.malt-brand.bar-mode.guest-mode .bar-entry-link {
    display: flex;
}

/* マイページ（本体・店）のプライバシーポリシー。ログアウトの上に 1 行、中央揃え */
.mypage-policy-link {
    display: block;
    margin: 14px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-tertiary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 初回登録（ユーザー）で、お店の人を Malt Intelligence へ（「ユーザー登録」が個人用だと分かるように） */
.ob-bar-hint {
    margin: -6px 0 14px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.ob-bar-hint a {
    color: var(--gold);
}

/* 探すタブの全件一覧レイヤー表示中は一覧側の戻るバーと重なるため隠す
   （本体・自店ホームとも、レイヤーは移設先の #tabPanelSearch の中にある） */
#tabContent:has(.search-list-layer.is-active) #appBrandBar,
#barAdminView:has(.search-list-layer.is-active) #barBrandBar {
    display: none !important;
}

/* 同じく、トップ右上の 探す⇔分析 トグルも一覧レイヤーが被さっている間は出さない
   （JS の updateSearchViewToggleVisibility と二重の保険。バーモードは #barAdminView へ移設される） */
#tabContent:has(.search-list-layer.is-active) #searchViewToggle,
#barAdminView:has(.search-list-layer.is-active) #searchViewToggle {
    display: none !important;
}

/* バーモードでは自店ホーム側の #barBrandBar を使う。本体側の実体は
   オンボーディング中に背後から覗くため明示的に消す */
body.bar-mode:not(.guest-mode) #appBrandBar {
    display: none !important;
}

/* 共通: 絞り込みフローティングボタン（タブ直下右上）
   ワードマークと同じ帯の縦中央に置き、左右で高さを揃える（(76-42)/2 = 17px） */
.filter-fab {
    position: absolute;
    top: calc((var(--app-top-band) - 42px) / 2);
    right: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--glass-btn-bg);
    color: var(--gold);
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

@media (hover: hover) and (pointer: fine) {
    .filter-fab:hover {
        background: var(--glass-btn-bg-hover);
    }
}

/* ヘッダーバー内に置く絞り込みボタン（フローティングではなくインライン配置）。
   position は static ではなく relative。バッジ（::after）の基準を自分にするためで、
   フローに乗る配置そのものは static と変わらない */
.filter-fab-inline {
    position: relative;
    flex: 0 0 auto;
    top: auto;
    right: auto;
}

/* 絞り込みが効いている間だけ点す金のドット。シートを閉じたあとに
   「なぜ件数が少ないのか」が分からなくなるのを防ぐ。
   付け外しは syncFilterUiState が対象ボタンのIDを名指しで行うので、
   同じ .filter-fab を使う新規チャットFABには出ない */
.filter-fab.has-active-filter::after {
    content: '';
    position: absolute;
    /* 円の右上のふちに載せる。中のアイコンに被せると絞り込みのマークが読みにくい */
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 2px var(--bg-main);
}

/* 検索タブのランディング: 中央寄せ、余裕のある余白 */
.search-landing {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    /* 上端をコレクションタブのカード上枠（#recordsList の上端＝--app-top-band）に合わせる。
       検索入力には margin-top:4px があるため 4px 引いておく。 */
    padding: calc(var(--app-top-band) - 4px) 20px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* 検索バーは固定し、おすすめ部分だけ内部スクロールさせる。
       コンテナ高さに収めて、検索結果レイヤーの下にランディングが覗くのも防ぐ。 */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* 検索入力（縦に大きめ・上部固定） */
.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 4px;
    flex-shrink: 0;
}

.search-input-icon {
    position: absolute;
    left: 16px;
    color: var(--text-tertiary);
    pointer-events: none;
}

.search-main-input {
    width: 100%;
    padding: 16px 18px 16px 46px;
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-main-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-dim);
}

/* おすすめ（サジェスト） */
.search-suggest {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* 検索バーは固定、ここだけ縦スクロール */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: 8px;
}

.suggest-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.suggest-section[hidden] { display: none; }

.suggest-heading {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

@media (max-width: 600px) {
    .search-suggest { margin-top: 14px; gap: 14px; }
    .suggest-section { gap: 8px; }
    .suggest-heading { font-size: 14px; }
}.search-result-area,
.profile-view-body,
.tab-panel,
.records-container,
.records-subpanel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* 統合検索の結果は1つのスクロールに銘柄・ユーザーを縦積みする */
.search-result-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.search-result-section {
    display: block;
}

/* スクロール内では各リストを独立スクロールさせない（親が唯一のスクロール） */
.search-result-scroll .records-list,
.search-result-scroll .user-search-list {
    flex: none;
    overflow: visible;
    max-width: 900px;
}

/* セクション見出し（統合検索時のみ表示） */
.search-section-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    max-width: 900px;
    margin: 0 auto;
    padding: 18px 20px 0;
}

/* 見出しサイズはアプリ標準のセクション見出し（.menu-section-title 等の16px）に揃える */
.search-section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.search-section-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
}
.search-section-count:empty { display: none; }

/* loading / empty / error / 該当なし は結果スクロール全体を覆って画面中央に表示 */
.search-result-scroll .records-loading,
.search-result-scroll .records-empty,
.search-result-scroll .records-no-match,
.search-result-scroll .records-error {
    position: absolute;
    inset: 0;
    background: var(--bg-main);
}

/* 「ボトル」の全件一覧の分析ビュー（右上トグルで一覧と切替。デフォルトは一覧）。
   縦スクロールと上端の帯ぶんの余白は中の .dashboard-scroll が受け持つ */
/* 探すタブの2ペイン（探す / 分析）。探すペインは中に全件一覧レイヤー（absolute）を抱えるので
   position:relative。デスクトップは片方だけ表示、モバイルはトラック上で横並び（下の media） */
.search-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.public-analysis-panel {
    overflow: hidden;
}

/* トップの分析: 先頭のKPI行（ボトル・バー/バー・ユーザー）。
   器はランキングカードと同じ1枚で、2列を中のヘアラインで仕切る
   （マイページのサマリー .kpi-cards-vertical と同じ「1枚のデータパネル」の見せ方） */
.public-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    margin-bottom: 14px;
    padding: 18px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 18px;
}

.public-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    border-left: 1px solid var(--border-faint);
}

.public-kpi:first-child {
    border-left: none;
}

.public-kpi-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.public-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* おすすめカルーセル（銘柄・ユーザー横スクロール） */
.suggest-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.suggest-seeall {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--gold);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 2px;
    border-radius: 8px;
    transition: opacity 0.15s;
}
.suggest-seeall:active { opacity: 0.6; }
@media (hover: hover) and (pointer: fine) {
    .suggest-seeall:hover { text-decoration: underline; }
}

/* 横スクロールトラック。見出しと同じ余白の中に収める（左端を見出しと揃える） */
.suggest-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 2px 0;
    margin: 0;
    scrollbar-width: none;
}
.suggest-carousel::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* バーは固定高カードなので上端揃え */
.suggest-carousel-user { align-items: stretch; }

/* カルーセルのカード幅。固定 144px だと大きい画面で小さく見えるので、トラック幅
   （100% = .search-landing の内側）から「2.2枚が見える」幅を出す。
   375pt で 147px・390pt で 154px・430pt 以上で上限 160px。
   3枚目の端が常に見えることが「横にスクロールできる」合図なので、
   固定で 156px 以上にはしない（375pt で 3枚目がほぼ隠れる）。
   gap 12px の分を引いて 2.2 で割る */
.suggest-carousel {
    --carousel-card-w: clamp(144px, calc((100% - 12px) / 2.2), 160px);
}

/* 銘柄カード（既存ミニカードを流用） */
.suggest-carousel .whisky-card-wrapper {
    flex: 0 0 var(--carousel-card-w);
    width: var(--carousel-card-w);
    scroll-snap-align: start;
}

/* ユーザー・バーカード（銘柄カードと同じ幅。名前2行→頭文字アイコンの縦積み）。
   position: relative はバーバッジ（.bar-badge）の基準 */
.user-carousel-card {
    position: relative;
    flex: 0 0 var(--carousel-card-w);
    width: var(--carousel-card-w);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* カードの高さは横一列で最も高いもの（＝名前が2行のカード）に揃う。
       中央寄せだと名前が1行のカードだけ丸が下がって、並んだ丸の高さがずれる。
       名前は上端、丸は下端（margin-top: auto）に固定して、どちらも列で揃える */
    justify-content: flex-start;
    /* 銘柄カードの名前を3行にして探すタブが縦に伸びたぶん、こちらは詰める
       （アイコン52px・余白 上下8px）。中身が主役になるよう余白は最小限 */
    gap: 4px;
    padding: 8px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, border-color 0.1s;
}
@media (hover: hover) and (pointer: fine) {
    .user-carousel-card:hover {
        background: var(--gold-dim);
        border-color: var(--gold);
    }
}
.user-carousel-card:active { transform: scale(0.98); }

.user-carousel-name {
    max-width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    /* 2行まで許容し、超えたら末尾を … で切る */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* 頭文字アイコン。一覧（.user-search-avatar 60px）より一回り小さい 52px にして
   カルーセルの高さを抑える。実寸は applyAvatar が付ける .avatar-figure の
   --avatar-size で決まる（頭文字のフォントもそれに追従）。
   margin-top: auto でカードの下端に寄せる（上の justify-content の注記を参照） */
.user-carousel-avatar {
    flex: 0 0 auto;
    margin-top: auto;
    --avatar-size: 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(184, 134, 11, 0.15);
    color: var(--gold, #b8860b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
}

/* バー・ユーザー混在表示でのバーの印: アバター右下に重ねる金の丸バッジ（ロックグラス）。
   以前の「バー」文字チップはアイコンの下端に被さってロゴ・写真を隠していた。
   バッジは丸の端に寄るのでアバターが主役のまま残り、ボトルカード・詳細の所有者行の
   ロックグラス（.bar-mark-ico）と同じ記号で「バー」が全画面で揃う。
   ユーザー側には印を付けない（多数派は無印、例外のバーだけ印）。
   丸の外側に 3px はみ出すため、overflow: hidden の .avatar-figure の中には置けない。
   基準はカルーセル＝カード、一覧＝.user-search-avatar-wrap */
.bar-badge {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 白い縁で丸から浮かせる（カードのホバー色の上でも白のまま。写真の縁取りと同じ役） */
    box-shadow: 0 0 0 2px var(--bg-input);
    pointer-events: none;
}
.bar-badge-ico {
    display: block;
    /* 12px では線幅 1.4 が痩せるので少し太らせる */
    stroke-width: 1.7;
}
/* カルーセル: アイコン(52px)はカード下端 padding 8px・横中央。
   その右下角にバッジ(22px)の右下を 3px はみ出させる
   （left = 50% + 26 + 3 − 22、bottom = 8 − 3） */
.user-carousel-card .bar-badge {
    left: calc(50% + 7px);
    bottom: 5px;
}
/* 一覧: アバターを包む基準要素。アバター本体の寸法・見た目はそのまま */
.user-search-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
    display: flex;
}
.user-search-avatar-wrap .bar-badge {
    right: -3px;
    bottom: -3px;
}
/* 所有者行のロックグラス（ボトルカード・詳細）。色は隣の人型アイコンと同じく
   行の文字色を継承する（金にすると同じ行に並ぶ人型と色が食い違う。
   「バー」の意味は形だけで伝え、金は一覧のバッジに限る） */
.bar-mark-ico {
    flex: 0 0 auto;
}

/* デスクトップ: ややコンパクトに */
@media (min-width: 641px) {
    .search-landing {
        max-width: 640px;
        padding: 48px 32px 0;
        gap: 20px;
    }
    .search-main-input {
        padding: 20px 20px 20px 52px;
        font-size: 17px;
        border-radius: 16px;
    }
    .search-input-icon {
        left: 20px;
    }
}

.user-search-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 16px 24px;
}

.user-search-item {
    display: flex;
    align-items: center;
    gap: 14px;
    /* 上下の余白はアイコン48px時代の値。アイコンを60pxにしたぶん詰めて、
       1行の高さは以前と同じくらいに保つ */
    padding: 18px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.user-search-item:hover {
    background: rgba(184, 134, 11, 0.06);
}

.user-search-item:active {
    transform: scale(0.99);
}.user-search-avatar,
.bar-store-logo {
    flex: 0 0 auto;
    /* 写真を出せるようになったので一回り大きい。
       .avatar-figure（--avatar-size）と同じ値にそろえること */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(184, 134, 11, 0.15);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
}

.user-search-meta {
    flex: 1;
    min-width: 0;
}

.user-search-sub-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-top: 3px;
}

.user-search-sub-row .user-search-sub {
    margin-top: 0;
}

.user-search-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
}
/* 名前だけを省略対象にする（チップまで … に巻き込まれないよう別要素） */
.user-search-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.user-search-sub {
    margin-top: 3px;
    font-size: 13px;
    color: #8a857f;
}

.user-search-chevron {
    flex: 0 0 auto;
    color: #8a857f;
    opacity: 0.6;
}

/* ============================================
   ユーザープロフィールビュー
   ============================================ */
.profile-view {
    position: fixed;
    inset: 0;
    background: var(--bg-main);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
    /* 左→右スワイプで戻る（attachSwipeBack）用。詳細（.whisky-detail-frame）・
       全件一覧（.search-list-layer）と同じ組で、これが無いと指を離した瞬間の
       戻り／確定時の退場がアニメーションせずパチンと瞬間移動になり、
       レイヤー昇格も毎回ドラッグ初動に走ってカクつく */
    transition: transform 0.25s ease;
    will-change: transform;
}

.profile-view.is-dragging {
    transition: none;
}

/* 飲みたいボトル一覧（#likesView）はこのビューのDOMを流用しているので z-index が同値になり、
   後ろにあるぶん一覧が手前に出てしまう。一覧のカードから詳細 → ユーザー名でプロフィールを
   開くと、プロフィールが一覧の裏に隠れて「一覧に戻った」ように見えていた。
   一覧の上にプロフィールを重ねるのが正しい向き（逆に一覧をプロフィールの上に開く動線は
   「すべて見る」がマイページにしかないので存在しない） */
#profileView {
    z-index: 1010;
}

/* 戻るボタン（filter-fab と同じ丸いUI） */

.profile-back-btn.icon-only {
    width: 42px;
    height: 42px;
    padding: 0;
}

@media (hover: hover) and (pointer: fine) {
    .profile-back-btn:hover {
        background: var(--glass-btn-bg-hover);
    }
}

.profile-view-body .records-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* プロフィール: コレクション⇄データ トグル */
.profile-view-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    background: var(--gold-dim);
    border-radius: 999px;
    padding: 3px;
    gap: 0;
}

.profile-view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 全画面共通の1サイズ。プロフィール（3分割）とボトルタブ（2分割）で
       ボタン幅が違うと同じ部品に見えないので、画面ごとの調整はしない */
    width: 50px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
}

.profile-view-toggle-btn.active {
    background: var(--gold);
    color: #fff;
}


.profile-view-toggle-btn:hover:not(.active) {
    background: rgba(184, 134, 11, 0.22);
}

/* ボトルタブ右上の一覧⇔分析トグル。プロフィールのヘッダーと同じ並び
   （左から 絞り込みFAB → トグル）にするため、トグルを右端に置き、
   FAB側をトグルの幅（50px×2＋余白6px＝106px）＋間隔10px ぶん左へずらす。
   トグルの高さはボタン36px＋余白3px×2＝42pxでFABと揃う */
.records-view-toggle {
    position: absolute;
    top: calc((var(--app-top-band) - 42px) / 2);
    right: 12px;
    z-index: 5;
}

#recordsFilterBtn {
    right: 128px;
}

/* バーモードの自店のボトルタブ用。FAB（.filter-fab-bar）が fixed + safe-area
   基準なので同じ座標系に載せる（並びも本体と同じ FAB → トグル） */
.bar-records-view-toggle {
    position: fixed;
    top: calc((var(--app-top-band) - 42px) / 2 + env(safe-area-inset-top));
    right: 12px;
}

#barBottlesFilterBtn {
    right: 128px;
}

/* 自店のボトルの分析ビュー。タブ自体の左右パディングの中で中央に寄せる */
.bar-analysis-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* プロフィール: データモード時はコレクション一覧/空状態を確実に隠す。
   モバイルのモードトラック（.has-profile-swipe）がある間は3パネルが横並びで
   常時表示（見える側はスライドが決める）なので、このルールは外す */
.profile-view.profile-view-mode-data:not(.has-profile-swipe) .records-list,
.profile-view.profile-view-mode-data:not(.has-profile-swipe) #profileEmpty {
    display: none !important;
}
/* データモードでは絞り込み/表示切替を display:none で畳み、空いた幅をタイトルに使う
   （visibility:hidden だと幅が残り、余白があるのにタイトルが…で省略される） */
.profile-view.profile-view-mode-data .filter-fab {
    display: none;
}

/* プロフィール: モード切替（ホーム⇔ボトル⇔分析）の入り方向スライド。
   3パネルは横並びトラックではなく display 切替なので、切替の向きが
   分かる程度の軽い滑りだけ付ける（スワイプ・トグルタップ共通） */
@keyframes profile-mode-in-right {
    from { transform: translateX(28px); opacity: 0.35; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes profile-mode-in-left {
    from { transform: translateX(-28px); opacity: 0.35; }
    to { transform: translateX(0); opacity: 1; }
}

.profile-view-body.profile-mode-in-right {
    animation: profile-mode-in-right 0.22s ease-out;
}

.profile-view-body.profile-mode-in-left {
    animation: profile-mode-in-left 0.22s ease-out;
}

/* プロフィール: モバイルはモードトラック（JSが ホーム/コレクション/分析 の
   3パネルを横並びにする）。タブスワイプと同じ指追従スライドで切り替える */
@media (max-width: 640px) {
    .profile-view-body .profile-swipe-track {
        display: flex;
        flex-direction: row;
        flex: 1;
        min-height: 0;
        width: 300%;
        will-change: transform;
    }

    .profile-swipe-track > .profile-swipe-pane {
        width: calc(100% / 3);
        min-width: calc(100% / 3);
        flex: 0 0 auto;
        height: 100%;
    }

    .profile-swipe-track .profile-swipe-pane-collection {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        position: relative;
    }
}

/* デスクトップ幅（>640px）: 読み込み時 ≤640 で組んだトラックはセッション中
   DOM に残るため、通常の縦積み＋display切替へ戻す（.bar-swipe-track と同じ理屈） */
@media (min-width: 641px) {
    .profile-swipe-track {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .profile-swipe-pane-collection {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    /* トラックが残っていても（.has-profile-swipe）、デスクトップの display 切替では
       データ/ホームモードで一覧・空状態を畳む */
    .profile-view.profile-view-mode-data .records-list,
    .profile-view.profile-view-mode-data #profileEmpty {
        display: none !important;
    }
}

/* プロフィール: データパネル */
.profile-data-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-data-panel .dashboard-scroll {
    height: auto;
    flex: none;
    overflow: visible;
    padding: 28px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-data-panel .dashboard-section {
    padding: 0;
}

/* データパネル先頭のオーナー行: 同じパネル内のKPIと違い、値は数値でなく
   名前(店名)/場所のテキストなので産地ランキングの数値と同サイズの黒系にし、長い名前は折り返す */
.kpi-value.kpi-value-text {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text-primary);
}

/* ラベル（名前/店名/場所）は固定文言なので折り返させない。長い値は値側だけ折り返す。
   同じパネルに同居する数値KPI（ボトル数）はラベル側を伸ばして値を右端に置くので、
   テキスト行（.kpi-card-text）だけに効かせる */
#profileOwnerCards .kpi-card-text .kpi-label {
    flex: 0 0 auto;
    white-space: nowrap;
}

.header-tab-item:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.header-tab-item.active {
    color: var(--gold);
    background: rgba(184, 134, 11, 0.14);
}

/* ============================================
   Tab Content & Panels
   ============================================ */

.tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    /* filter-fab（position:absolute）の基準。FABはスワイプトラックの外の
       .tab-content 直下に置き、スワイプ中もパネルと一緒に流れず画面に固定する */
    position: relative;
}

.sort-select {
    /* 右端は自前のシェブロン／解除の×（.filter-field）を置くため OS 描画を止める。
       iOS のホイールUIはそのまま出る */
    appearance: none;
    -webkit-appearance: none;
    padding: 5px 34px 5px 14px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: #4a4540;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: var(--transition);
}

.sort-select:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sort-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-dim);
}

/* ============================================
   Dashboard
   ============================================ */

.dashboard-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.dashboard-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--text-secondary);
    padding: 40px 20px;
}.dashboard-error,
.records-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.dashboard-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    position: relative;
}

/* Continuous scroll */
.dashboard-scroll {
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 他タブと同じ上端の帯を空ける（左上のワードマークぶん） */
    padding-top: var(--app-top-band);
    /* scrollIntoView（分析カードの「上位だけ表示」の戻り先合わせ）でも
       帯の下に頭が来るようにする */
    scroll-padding-top: var(--app-top-band);
    padding-bottom: 56px;
}

.dashboard-scroll::-webkit-scrollbar {
    display: none;
}

.dashboard-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 36px 32px;
    box-sizing: border-box;
}

.dashboard-section + .dashboard-section {
    padding-top: 24px;
}

.section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
    margin: 0 0 16px 0;
    width: 100%;
    max-width: 600px;
    text-align: left;
    letter-spacing: 0.5px;
}

/* 分析ビューの見出し（「自分の/全ての/〇〇の/自店のボトル傾向・分析」）。
   プロフィールは持ち主名が入るので、スペースなしの長い英字名でも
   はみ出さないよう語中でも折れるようにしておく */
.analysis-title {
    overflow-wrap: anywhere;
}

/* Ranking */
.ranking-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
}

.ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ランキングもサマリーと同じく「押せるカードの集まり」に見せない。
   個々の行フレームは持たせず、ヘアラインで仕切る */
.ranking-item {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 11px 2px;
    background: transparent;
    border-bottom: 1px solid var(--border-faint);
    min-width: 0;
}

.ranking-list .ranking-item:last-child {
    border-bottom: none;
}

/* 順位。メダルはやめて素の数字に統一した（詳細は buildBreakdownList のコメント）。
   「その他」の行は空 */
.ranking-rank {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-align: center;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ranking-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ranking-value {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: right;
    white-space: nowrap;
}

.ranking-value .ranking-count {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

/* %は固定幅の別カラムにして「◯本」の右端を全行で揃える（%側は右端揃え） */
.ranking-value .ranking-pct {
    display: inline-block;
    min-width: 3.2em;
    margin-left: 0.3em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   ボトルの傾向・分析（種類/産地/蒸留所/ボトリング/ボトラー/熟成年数/蒸留年/ボトリング年）
   ボトルタブの分析ビュー・プロフィールのデータパネル・バーの自店のボトルタブ共通。
   8種類を見出し付きで縦に積むだけの構成（チップ＋横スワイプは廃止。
   fixed オーバーレイ内の横スクロールが iOS でどうしても滑らかにならず、
   専用ビューになったことで縦に長いこと自体が問題でなくなったため） */

.breakdown {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    width: 100%;
    max-width: 600px;
}

/* 1グラフ=1カード。器（背景・枠・角丸・余白）は .ranking-card 共用 */
.breakdown-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.breakdown-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.4px;
}

/* --- 登場アニメーション ---
   モチーフ（金・静かな高級感）に合わせて弾まない「注がれる」動き。
   ドーナツは12時から時計回りに一周、横棒は左から満ちる（行ごとに65msカスケード）。
   .is-revealed はカードが画面に入った瞬間に JS（observeBreakdownReveal）が付ける。
   アニメが再生される環境では、付くまでグラフを白紙にしておく（下の :not(.is-revealed)）。
   完成形を先に見せると、observer が付くまでの一拍で「描けていたグラフが
   一瞬消えて描き直される」ように見えるため。
   アニメが再生されない環境（reduced-motion / sweep 非対応）はこの節ごと外れて
   最初から静的な完成形＝壊れない */

/* ドーナツのスイープ角。@property で登録しないと角度が補間されない
   （未対応環境では html.breakdown-sweep-ok が付かず、この演出ごと外れる） */
@property --breakdown-sweep {
    syntax: '<angle>';
    initial-value: 360deg;
    inherits: false;
}

@media (prefers-reduced-motion: no-preference) {
    /* 画面に入るまでの待機状態＝白紙。ドーナツは sweep が確実に再生される
       環境（.breakdown-sweep-ok）だけ隠す。隠したのに再生されないと
       永久に白紙のままになるので、ガードはアニメ側と完全に同じ条件にする */
    .breakdown-sweep-ok .breakdown-card:not(.is-revealed) .breakdown-donut {
        opacity: 0;
    }

    .breakdown-sweep-ok .breakdown-card.is-revealed .breakdown-donut {
        /* conic-gradient は12時から時計回り＝ドーナツの描画開始と同じ向き */
        -webkit-mask-image: conic-gradient(#000 var(--breakdown-sweep), transparent 0);
        mask-image: conic-gradient(#000 var(--breakdown-sweep), transparent 0);
        animation: breakdown-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    @keyframes breakdown-sweep {
        from { --breakdown-sweep: 0deg; }
        to { --breakdown-sweep: 360deg; }
    }

    /* 中央の本数はリングが注がれた頃にふわっと出す。
       待機中の非表示はアニメ自身の from（both で遅延中も適用）が受け持つが、
       ドーナツを隠す環境では待機中も揃えて隠す */
    .breakdown-sweep-ok .breakdown-card:not(.is-revealed) .breakdown-center {
        opacity: 0;
    }

    .breakdown-card.is-revealed .breakdown-center {
        animation: breakdown-center-in 0.75s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
    }

    @keyframes breakdown-center-in {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: none; }
    }

    /* 横棒の待機状態。幅はインラインstyleなので !important で勝つ。
       横棒の width アニメは sweep 非対応でも再生されるためガードは @media だけでよい */
    .breakdown-card:not(.is-revealed) .breakdown-bar-fill {
        width: 0 !important;
    }

    /* 横棒。to を書かないことで「インラインstyleの本来の幅」へ伸びる */
    .breakdown-card.is-revealed .breakdown-bar-fill {
        animation: breakdown-fill-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: calc(var(--bar-i, 0) * 65ms);
    }

    @keyframes breakdown-fill-in {
        from { width: 0; }
    }
}

.breakdown-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- ドーナツ --- */

/* 6分割の弧を色で見分ける図なので、狭いほうの端末に合わせて縮めない。
   375px 幅でもカードの内寸335pxに収まる */
.breakdown-chart {
    position: relative;
    width: 184px;
    height: 184px;
    margin: 4px auto 0;
    flex: 0 0 auto;
    /* ここに transform: translateZ(0)（合成レイヤー化）を入れてはいけない。
       プロフィール（fixed 内＝iOSでメインスレッドスクロールになる経路）では
       合成レイヤーの位置更新がスクロールより一拍遅れて反映されるため、
       スワイプ中にドーナツだけその場に留まってから跳ぶ見た目になった */
}

.breakdown-donut {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* 中央の見出し。総本数だけを出す表示専用 */
.breakdown-center {
    position: absolute;
    inset: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-align: center;
    pointer-events: none;
}

.breakdown-center-row {
    display: flex;
    align-items: baseline;
    gap: 1px;
}

.breakdown-center-value {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.breakdown-center-unit {
    font-size: 13px;
    color: var(--text-secondary);
}

/* --- リスト（既存の .ranking-item を流用し、ドーナツと結ぶ色スウォッチを足す） --- */

/* .ranking-name は ellipsis のため nowrap/overflow:hidden。
   インラインブロックの点は先頭にあるので必ず見える */
.breakdown-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    /* 明るい色でも背景に溶けないよう、ごく薄い縁を引く */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* 全件展開したときの6位以下。場所だけ取って名前の左端を上位の行と揃える */
.breakdown-swatch.is-blank {
    background: none;
    box-shadow: none;
}

/* 「さらに表示（あとN件）」と「上位だけ表示」の2ボタン行。
   たたむ側を右に離して置き、続き読みの動線（さらに表示）を先頭にする */
.breakdown-seeall-row {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 20px;
}

.breakdown-seeall {
    align-self: flex-start;
}

/* --- 年の横棒（蒸留年・ボトリング年） ---
   縦棒だと375px幅で1本38pxしか取れずラベルを削る羽目になるので横棒。
   上が古い年、下が新しい年で時系列に読める */

.breakdown-bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.breakdown-bar-row {
    display: grid;
    grid-template-columns: 5.6em 1fr 3.4em;
    align-items: center;
    gap: 10px;
    padding: 7px 2px;
    min-width: 0;
}

.breakdown-bar-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.breakdown-bar-track {
    display: block;
    height: 14px;
    border-radius: 7px;
    background: var(--border-faint);
    overflow: hidden;
    min-width: 0;
}

.breakdown-bar-fill {
    display: block;
    height: 100%;
    border-radius: 7px;
    /* 実際の色はドーナツと同じ金のランプから JS（breakdownBarColor）が
       本数に応じて入れる（多いほど濃い）。これはその既定値（ランプ中間段） */
    background: #d09a2c;
    /* 0本のビンでも行の存在は見せる（「その年代は持っていない」という情報のため） */
    min-width: 0;
}
.breakdown-bar-row.is-zero .breakdown-bar-label { color: var(--text-tertiary); }
.breakdown-bar-row.is-zero .breakdown-bar-count { color: var(--text-tertiary); }

.breakdown-bar-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.breakdown-empty {
    flex-direction: column;
    gap: 6px;
    padding: 32px 0;
}

.breakdown-empty-hint {
    font-size: 13px;
    color: var(--text-tertiary);
    opacity: 0.8;
}

/* KPI Cards Row */
.kpi-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 600px;
}

/* サマリーは「押せるカードの集まり」ではなく「1枚のデータパネル」に見せる。
   外枠は1枚だけ、行は中でヘアラインで仕切る（個々の行に押せそうな枠を持たせない） */
.kpi-cards-vertical {
    grid-template-columns: 1fr;
    max-width: 600px;
    gap: 0;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 4px 22px;
    box-sizing: border-box;
}

.kpi-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-faint);
    border-radius: 0;
    padding: 18px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.kpi-cards-vertical .kpi-card:last-child {
    border-bottom: none;
}

.kpi-icon {
    color: var(--gold);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gold-dim);
}

.kpi-icon svg {
    width: 26px;
    height: 26px;
}

.kpi-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    flex: 1;
}

/* ラベルの下に内訳を出すKPI（バーのボトル数）。ラベル単体のときの flex:1 を包む側へ移す */
.kpi-label-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kpi-label-wrap .kpi-label {
    flex: none;
}

.kpi-sub {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}

.kpi-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
}

.chart-empty {
    text-align: center;
    font-size: 15px;
    color: var(--text-tertiary);
    padding: 40px 0;
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dashboard responsive */
@media (max-width: 640px) {
    .dashboard-scroll {
        padding-bottom: 72px;
    }

    .dashboard-section {
        padding: 28px 20px 24px;
    }

    .section-title {
        font-size: 19px;
        margin-bottom: 14px;
    }

    .kpi-cards {
        gap: 12px;
    }

    .kpi-cards-vertical {
        gap: 0;
    }

    .kpi-card {
        padding: 18px 4px;
        gap: 10px;
    }

    .kpi-value {
        font-size: 32px;
    }

    /* オーナーセクションの名前/住所はランキング数値(17px)と同サイズを維持 */
    .kpi-value.kpi-value-text {
        font-size: 17px;
    }

    .kpi-label {
        font-size: 15px;
    }

    .kpi-icon svg {
        width: 28px;
        height: 28px;
    }

    .ranking-card {
        padding: 14px;
    }

    .ranking-item {
        grid-template-columns: 22px 1fr auto;
        gap: 6px;
    }

    /* 375px 幅で横棒が窮屈にならないよう詰める */
    .breakdown-bar-row {
        grid-template-columns: 5.2em 1fr 3.2em;
        gap: 8px;
    }

    .breakdown-bar-label { font-size: 12px; }

    .ranking-name {
        font-size: 15px;
    }

    .ranking-value {
        font-size: 15px;
    }

    .ranking-value .ranking-count {
        font-size: 17px;
    }
}

/* ============================================
   Records Tab
   ============================================ */

.records-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--text-secondary);
    padding: 40px 20px;
    pointer-events: none;
    background: var(--bg-main);
    z-index: 2;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(193, 154, 84, 0.2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.loading-text {
    font-size: 18px;
    color: var(--gold);
    font-weight: 600;
}

@keyframes dot-appear {
    0%, 100% { opacity: 0; }
    30%, 70% { opacity: 1; }
}

/* Rating slider */
/* 「スコア」ラベルと大きな数字の間隔。数字の枠は 36px あり、未入力（-）だと
   そのほとんどが余白に見えるため、固定の余白側は詰めておく（下の .rating-label-row と対） */
.rating-slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.rating-slider-value-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.rating-slider-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    letter-spacing: 0.5px;
}

.rating-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.rating-label-row .edit-label {
    margin-bottom: 0;
}

.rating-slider-track-wrapper {
    width: 100%;
    padding: 0;
}

.rating-slider-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
    margin-bottom: 6px;
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 600;
}

.rating-slider-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: auto;
    /* 他のフィールドと左右端を揃える（押し出さず本文のコンテンツ幅内に収める） */
    margin: 0;
}
.rating-slider-row .rating-slider {
    flex: 1 1 auto;
    min-width: 0;
}
/* ラベル列をスライダー本体の幅に揃える（±ボタン幅 + gap 分だけ内側に寄せる） */
.rating-slider-track-wrapper .rating-slider-labels {
    margin: 0;
    padding-left: calc(32px + 4px);
    padding-right: calc(32px + 4px);
}
.rating-step-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--gold);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.rating-step-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.rating-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-secondary);
    outline: none;
    cursor: pointer;
    border: 1px solid var(--border-color);
}

.rating-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
}

.rating-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold-gradient);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    cursor: pointer;
    margin-top: -10px;
    transition: transform 0.1s;
}

.rating-slider::-webkit-slider-thumb:active {
    transform: scale(1.15);
}

.rating-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold-gradient);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform 0.1s;
}

.rating-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.records-empty,
.records-no-match {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--text-secondary);
    text-align: center;
    pointer-events: none;
    z-index: 1;
}
.records-empty *,
.records-no-match * { pointer-events: auto; }

.records-empty-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.records-empty-hint {
    font-size: 13px;
    color: var(--text-tertiary);
}

.records-retry-btn {
    padding: 8px 20px;
    background: var(--gold-soft);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.records-retry-btn:hover {
    transform: translateY(-1px);
    background: var(--gold-dim);
}

.records-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    scroll-padding-top: 16px;
    scroll-padding-bottom: 20px;
}

/* コレクションタブのみ上部余白を確保（左上ワードマーク・メニュー☰ FAB の帯ぶん） */
#recordsList { padding-top: var(--app-top-band) !important; scroll-padding-top: var(--app-top-band); }

/* カード出現アニメーション */
.whisky-card.card-enter {
    opacity: 0;
    transform: translateY(20px);
}

.whisky-card.card-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* wrapper単位での出現アニメ（みんなタブのNEWカード用） */
.whisky-card-wrapper.card-enter {
    opacity: 0;
    transform: translateY(12px);
}
.whisky-card-wrapper.card-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 記録リスト自体のスクロールバーは非表示（スナップで1カード単位に動くため不要） */
.records-list {
    scrollbar-width: none;
}

.records-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ============================================
   Whisky Card
   ============================================ */

.whisky-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px 24px 28px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.whisky-card {
    position: relative;
}

.whisky-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 20px rgba(184, 134, 11, 0.12);
}

/* ============================================
   Share Screen (Full Screen QR)
   ============================================ */

.share-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    background: linear-gradient(160deg, #1a1610 0%, #2a1f0e 40%, #1a1610 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: shareScreenFadeIn 0.3s ease-out;
}

@keyframes shareScreenFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.share-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 24px;
    max-width: 480px;
    width: 100%;
}

.share-title {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 600;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.share-title-sub {
    font-size: clamp(12px, 2.5vw, 16px);
    font-weight: 400;
    letter-spacing: 2px;
    display: block;
    margin-bottom: -2px;
}

.share-items {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    margin-bottom: 8px;
}

.share-item {
    text-align: center;
    animation: shareItemFadeIn 0.5s ease-out both;
}

.share-item:nth-child(1) { animation-delay: 0.15s; }
.share-item:nth-child(2) { animation-delay: 0.3s; }
.share-item:nth-child(3) { animation-delay: 0.45s; }

@keyframes shareItemFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.share-item-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
}

.share-item-text {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.share-qr {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 40px rgba(212, 168, 83, 0.25);
}

.share-url {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

.share-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: var(--transition);
}

.share-close-btn:hover {
    color: rgba(255, 255, 255, 0.6);
}

@supports (padding: max(0px)) {
    .share-close-btn {
        top: max(16px, env(safe-area-inset-top));
        right: max(16px, env(safe-area-inset-right));
    }
}

/* ============================================
   Share Sheet (銘柄シェア: 本文＋写真と本文をシェア)
   「Uisgeに聞く」の ask-sheet と同じボトムシート様式。ドラッグ・キーボード追従は持たない
   ============================================ */

.share-sheet-scrim {
    position: fixed;
    inset: 0;
    background: rgba(26, 22, 15, 0.32);
    z-index: 1900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.share-sheet-scrim.open {
    opacity: 1;
    pointer-events: auto;
}

.share-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    max-width: 480px;
    height: 92vh;
    height: 92dvh;
    z-index: 1910;
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.18);
    transform: translate3d(0, 102%, 0);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.22, 1),
                visibility 0s linear 0.32s;
    visibility: hidden;
}
.share-sheet.open {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.22, 1),
                visibility 0s;
}
/* 指で引いている間はアニメを切って 1:1 で追従させる（JS が inline transform を更新） */
.share-sheet.is-dragging,
.share-sheet-scrim.is-dragging {
    transition: none;
}

.share-sheet-grabber {
    flex: none;
    display: flex;
    justify-content: center;
    padding: 9px 0 3px;
}
.share-sheet-grabber span {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
}

.share-sheet-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 12px;
}
.share-sheet-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    line-height: 1.5;
}
.share-sheet-close {
    margin-left: auto;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.share-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.share-sheet-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.share-sheet-section-head h4 {
    margin: 0;
    font-size: 14px;
    color: var(--gold);
    letter-spacing: 0.08em;
    font-weight: 600;
}
.share-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 10px;
    border: none;
    background: var(--gold-soft);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}
.share-copy-btn:hover {
    background: var(--gold-dim);
}

/* 本文。高さは JS が内容に合わせて伸ばす（resize は切る） */
.share-caption {
    width: 100%;
    min-height: 200px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    resize: none;
    outline: none;
    box-sizing: border-box;
}
.share-caption:focus {
    border-color: var(--gold);
}

.share-sheet-foot {
    flex: none;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
}
/* バーで店・ボトルが非公開のとき、リンク系ボタンが押せない理由 */
.share-link-note {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
    line-height: 1.5;
}
/* 送り先。詳細右上のガラス調ボタンと同じ質感の丸アイコン＋ラベル */
.share-dests {
    display: flex;
    gap: 8px;
}
.share-dest {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 0 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.share-dest-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--glass-btn-bg);
    color: var(--gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: transform 0.12s ease, background 0.2s ease;
}
.share-dest:hover:not(:disabled) .share-dest-icon {
    background: #fff;
}
.share-dest:active:not(:disabled) .share-dest-icon {
    transform: scale(0.94);
}
.share-dest:disabled {
    opacity: 0.4;
    cursor: default;
}
.share-dest-label {
    color: var(--text-primary);
    line-height: 1.2;
}
/* 押す前に「何が送られるか」が分かるように。Instagram=写真と本文 / LINE・X・その他=リンク */
.share-dest-sub {
    font-size: 10.5px;
    color: var(--text-tertiary);
    line-height: 1.2;
    letter-spacing: 0.02em;
}

/* ── 公開リンクの受け手（/s/{id}）: 見せるだけ ──
   詳細 1 枚だけの画面。戻る先がないので戻るボタンの代わりにワードマークを出し、
   背後のタブ内容は見せない。ログインや「はじめる」の誘導は置かない */
.whisky-detail-wordmark {
    display: none;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--gold);
    padding-left: 6px;
}
body.share-mode .whisky-detail-back {
    display: none;
}
body.share-mode .whisky-detail-wordmark {
    display: inline-block;
}
body.share-mode #tabContent {
    visibility: hidden;
}
.share-unavailable {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--bg-main);
    color: var(--text-secondary);
    font-size: 15px;
}
.share-unavailable p {
    margin: 0;
}

/* ============================================
   Edit Modal
   ============================================ */

/* 独立画面（フルスクリーン・モーダルではない） */
.edit-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-main);
    z-index: 1600;
    flex-direction: column;
    padding: 0;
}

.edit-modal-backdrop.open {
    display: flex;
}

/* 初回ユーザー名入力などで使うポップアップ表示 */
.edit-modal-backdrop.is-popup {
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.edit-modal-backdrop.is-popup .edit-modal {
    width: 100%;
    max-width: 360px;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: fadeInScale 0.2s ease-out;
    overflow: hidden;
}
.edit-modal-backdrop.is-popup .edit-modal-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 4px;
}
.edit-modal-backdrop.is-popup .edit-modal-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}
.edit-modal-backdrop.is-popup .edit-modal-body {
    padding: 12px 20px 20px;
    overflow: visible;
}

/* ポップアップヘッダーは [閉じる(40px)][タイトル][空スペーサー] の space-between。
   スペーサーを閉じるボタンと同幅にしないとタイトルが右へ~20pxずれる */
.edit-modal-backdrop.is-popup .edit-modal-header > span:last-child {
    flex: 0 0 40px;
}

.edit-modal {
    background: var(--bg-main);
    width: 100%;
    height: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    border-radius: 0;
    animation: slideInRight 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* デスクトップでも幅は中央寄せ・コンテンツは適切な幅で読みやすく */
@media (min-width: 600px) {
    .edit-modal {
        align-items: center;
    }
    .edit-modal-header,
    .edit-progress,
    .edit-modal-body,
    .edit-modal-footer {
        width: 100%;
        max-width: 600px;
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.edit-modal-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* ×ボタンを他画面の戻る/メニューFAB（左12px・上10px）と同じ位置に。右は20px */
    padding: max(10px, env(safe-area-inset-top)) 20px 12px 12px;
    gap: 4px;
    flex-shrink: 0;
}

.edit-modal-header-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
}

/* 閉じるボタン（戻るボタンと同じ丸いガラス調UI、左寄せ） */
.edit-modal-close.icon-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--glass-btn-bg);
    color: var(--gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
@media (hover: hover) and (pointer: fine) {
    .edit-modal-close.icon-btn:hover {
        background: var(--glass-btn-bg-hover);
        color: var(--gold);
    }
}

/* タイトルは「〜の一覧」ヘッダー（.search-list-title）と同じダーク色・サイズに揃える */

.edit-modal-title {
    display: none;
}

/* ステップインジケータ（テキスト）は非表示にし、進捗バーで代替 */
.edit-step-indicator {
    display: none;
}

/* やわらかいピル型の3分割進捗バー */
.edit-progress {
    display: flex;
    gap: 8px;
    padding: 8px 20px 20px;
    flex-shrink: 0;
}

/* ピルは押せる。番号を押せばそのステップへ直接移動できるので、
   進捗表示とステップ切替タブを1つの部品が兼ねる */
.edit-progress-segment {
    flex: 1;
    min-width: 0;
    height: 38px;
    background: var(--bg-hover);
    border: none;
    padding: 0;
    border-radius: 999px;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

/* 未到達のステップも押せるので、読めない薄さにはしない（tertiary だと「無効」に見える） */
.edit-progress-segment:not(.active):not(.done) {
    color: var(--text-secondary);
}

.edit-progress-segment:active {
    transform: scale(0.96);
}

/* 3ステップ目だけ文言が長い（「3.コメント・スコア」は13pxだと116px必要で、
   幅375px端末のピル約106pxからはみ出す）。ここだけ11pxにして収める */
.edit-progress-segment[data-step="3"] {
    font-size: 11px;
}

/* 文言が長くなっても文字が途中で切れないよう、はみ出す場合は「…」で丸める */
.edit-progress-segment span {
    margin-left: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edit-progress-segment.done {
    background: rgba(184, 134, 11, 0.45);
    color: #fff;
}

.edit-progress-segment.active {
    background: var(--gold-gradient, var(--gold));
    color: #fff;
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.25);
}

.edit-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    padding: 8px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.edit-step {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 登録モーダルのステップは「表示/非表示の差し替え」ではなく、横に並べたトラックを
   ずらして見せる。タブのスワイプ（.header-tab-indicator 側）と同じ作りにすることで、
   指への追従・端のラバーバンド・確定しきい値がアプリ全体で1つの挙動に揃う。
   スクロールは各ステップが自前で持つので、長い基本情報を下まで見てから次へ進んでも
   ノートの画面が途中から始まる、といったズレが起きない */
.edit-steps-body {
    display: block;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.edit-step-track {
    display: flex;
    height: 100%;
    will-change: transform;
}

.edit-steps-body .edit-step {
    flex: 0 0 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* 旧 .edit-modal-body の余白をそのままステップ側へ移したもの */
    padding: 8px 20px 24px;
}

/* ポップアップ表示中は各ステップのスクロールも止める（.dropdown-open と対） */
.edit-steps-body.dropdown-open .edit-step {
    overflow: hidden;
}

.edit-steps-body .edit-step::-webkit-scrollbar {
    width: 6px;
}

.edit-steps-body .edit-step::-webkit-scrollbar-track {
    background: transparent;
}

.edit-steps-body .edit-step::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 3px;
}

.ai-generate-notes-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    justify-content: flex-start;
}

.ai-generate-notes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    padding: 13px 20px;
    background: var(--gold-soft);
    border: none;
    border-radius: 14px;
    color: var(--gold);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
}
.ai-generate-notes-btn svg {
    color: var(--gold);
    width: 18px;
    height: 18px;
}
.ai-generate-notes-btn:hover:not(:disabled) {
    background: rgba(184, 134, 11, 0.15);
}
.ai-generate-notes-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: var(--text-tertiary);
    background: transparent;
}
.ai-generate-notes-btn.loading {
    opacity: 1;
    color: var(--gold);
    background: var(--gold-soft);
    min-width: 240px;
}
.ai-generate-notes-btn.loading svg {
    animation: spin 1s linear infinite;
}

.edit-step-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.edit-prev-btn {
    flex: 1;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--bg-hover);
}

@media (hover: hover) and (pointer: fine) {
    .edit-prev-btn:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
}

/* 次へは戻ると同じ控えめな配色（塗りのゴールドは保存だけに使う） */
.edit-next-btn {
    flex: 1;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--bg-hover);
}

@media (hover: hover) and (pointer: fine) {
    .edit-next-btn:hover:not(:disabled) {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
}

.edit-step-btn:disabled,
.edit-save-btn:disabled {
    cursor: not-allowed;
    background: var(--bg-hover);
    color: var(--text-tertiary);
    border-color: var(--bg-hover);
    box-shadow: none;
    transform: none;
}

.edit-prev-btn:disabled,
.edit-next-btn:disabled {
    background: transparent;
}

.edit-modal-body::-webkit-scrollbar {
    width: 6px;
}

.edit-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.edit-modal-body::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 3px;
}

.edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edit-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
/* 値のクリア（×）を持つラベル行。×はラベルの右端＝入力欄の右端に揃える */
.edit-label.has-clear {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* リスト選択・ボトリング区分・度数は入力欄から直接消せないため、
   ラベル行の右端に×を出す（値が入っているときだけ）。
   上下のマイナスマージンでラベル行の高さは変えずにタップ領域だけ広げる */
.edit-clear-btn {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: -8px 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.edit-clear-btn.show {
    display: inline-flex;
}

.edit-clear-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.edit-label-required {
    font-size: 15px;
    font-weight: 500;
    color: var(--gold);
    margin-left: 4px;
}

/* 必須の指摘は「先へ進ませない」ではなく「保存時にその場で見せる」方式。
   該当ステップまで運んだあと、赤枠＋ひと言＋一度だけの横揺れで場所を示す */
.edit-field-error {
    display: none;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #d93025;
}

.edit-field.is-error .edit-field-error {
    display: block;
}

.edit-field.is-error .edit-input {
    border-color: #d93025;
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}

.edit-field.is-shaking .edit-input {
    animation: editFieldShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes editFieldShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .edit-field.is-shaking .edit-input {
        animation: none;
    }
}

/* 項目のグルーピング（ボトル情報 / カスク情報）。
   折りたたみをやめた代わりに、見出しと区切り線でブロックの切れ目を作る */
.edit-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--border-faint);
}

.edit-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

/* 短い項目は2カラムに並べてスクロール量を減らす。
   minmax(0, 1fr) にしないと入力欄の既定幅（size属性由来）で列が広がり、横にはみ出す */
.edit-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.edit-field-row > .edit-field {
    min-width: 0;
}

/* 2択のセグメント（ボトリング: オフィシャル / ボトラーズ） */
.edit-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    min-height: var(--edit-field-h);
    padding: 4px;
    background: var(--bg-input);
    border: 1.5px solid var(--bg-hover);
    border-radius: 14px;
}

/* 中のボタンは枠いっぱいに伸ばす（grid の既定の stretch）。自前の縦paddingで
   高さを決めると、他の欄より数px高くなってしまうため文字は中央寄せで持たせる */
.edit-segment {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}

/* 2つのボタンの境目に点線を引き、別々の選択肢だと分かるようにする。
   どちらかを選ぶと選択済みの面で区切りが伝わるので点線は消す */
.edit-segment + .edit-segment::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 16%;
    bottom: 16%;
    border-left: 1px dashed var(--text-tertiary);
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.edit-segmented.has-selection .edit-segment + .edit-segment::before {
    opacity: 0;
}

.edit-segment:hover:not(.active) {
    background: var(--gold-soft);
    color: var(--gold);
}

/* 選択中は他の選択済みUI（チップ・リスト項目）と同じ淡い金 */
.edit-segment.active {
    background: var(--gold-dim);
    color: var(--gold);
    font-weight: 700;
}

/* 条件表示のフィールド（ボトラー名など）はふわっと出す */
.edit-field-reveal {
    animation: editRevealIn 0.18s ease;
}

@keyframes editRevealIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* ON/OFFの1項目（シングルカスク）。行全体がタップ領域 */
.edit-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    background: var(--bg-input);
    border: 1.5px solid var(--bg-hover);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.edit-toggle-row.on {
    border-color: var(--gold);
    background: var(--gold-soft);
}

.edit-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.edit-toggle-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.edit-toggle-row.on .edit-toggle-title {
    color: var(--gold);
}

/* 登録モーダルは明るい背景のため、OFF時の白トグルが溶ける → グレーに */
.edit-toggle-row .toggle-slider {
    background-color: rgba(0, 0, 0, 0.18);
}

/* テイスティングノートのチップ入力 */
.notes-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    /* 未入力のときもステップ1の入力欄と同じ高さに見せる。
       border-box なので、この枠自身の padding が違っても外寸は揃う */
    min-height: var(--edit-field-h);
    padding: 5px 8px;
    background: var(--bg-input);
    border: 1.5px solid var(--bg-hover);
    border-radius: 12px;
    transition: var(--transition);
}

.notes-chip {
    display: inline-flex;
    align-items: center;
    /* ✕ が文字に張り付くと消す対象が読みにくいので、語と削除ボタンは離す */
    gap: 10px;
    padding: 6px 8px 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1;
    max-width: 100%;
}

.notes-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.notes-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: var(--transition);
}

.notes-chip-remove:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.notes-chip-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

.notes-chip-add:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-tertiary);
}

/* 細いと入力欄の中で浮いて押しどころが分かりにくいので幅を持たせる。
   ノートの有無で幅を変えると、追加するたびにボタンが縮んで見えて落ち着かないため常に同じ幅 */
.notes-chip-add {
    min-width: 132px;
}

/* 未入力のノート欄に出す例。入力欄の placeholder と同じ見え方にそろえる
   （チップが1つでも入ったら renderNotesChips が出さなくなる） */
.notes-chips-hint {
    color: var(--text-tertiary);
    font-size: 15px;
    line-height: 1.2;
    pointer-events: none;
}

.notes-chip-input {
    width: auto;
    min-width: 80px;
    max-width: 100%;
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1.5px solid var(--gold);
    border-radius: 999px;
    color: var(--text-primary);
    /* iOS Safari は font-size < 16px の input にフォーカスすると
       自動でズームしてしまうため 16px 以上に設定する */
    font-size: 16px;
    font-family: inherit;
    outline: none;
    line-height: 1.2;
}

.edit-input {
    width: 100%;
    min-height: var(--edit-field-h);
    padding: 10px 16px;
    background: var(--bg-input);
    border: 1.5px solid var(--bg-hover);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.4;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
}

.edit-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-dim);
}

select.edit-input {
    cursor: pointer;
    appearance: auto;
}

textarea.edit-input-autosize {
    resize: none;
    overflow-y: auto;
    min-height: var(--edit-field-h);
    max-height: 132px;
    display: block;
}

/* ============================================
   飲んだ場所（venue）: サジェスト付きの自由入力
   候補から選べば掲載店にリンクし、選ばず打てば文字列として残る。
   リスト選択（.custom-select）は中央モーダルだが、ここは「打ちながら絞る」
   入力なので入力欄の直下に開くドロップダウンにしている
   ============================================ */
.venue-input-wrap {
    position: relative;
}

/* 高さと向きは layoutVenueSuggest() が実測して決める。
   iOS ではキーボードが開いてもレイアウトの高さは変わらず画面下部を覆うだけなので、
   固定の max-height だと候補の下のほうがキーボードの裏に隠れてしまう */
.venue-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    max-height: 232px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
}

/* 入力欄の下に十分な高さが取れないときは上に出す（キーボードで潰れた場合など） */
.venue-suggest.is-above {
    top: auto;
    bottom: calc(100% + 6px);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.14);
}

.venue-suggest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.venue-suggest-item:hover,
.venue-suggest-item.active {
    background: var(--gold-soft);
}

.venue-suggest-item .venue-suggest-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 記号はどれもピン（＝場所）で揃え、掲載店だけ金にして「選ぶと店にリンクする」を示す。
   選んだ直後にラベル横の「掲載店」バッジも出るので、判別はそちらでも付く */
.venue-suggest-item .venue-suggest-ico {
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.venue-suggest-item.is-bar .venue-suggest-ico {
    color: var(--gold);
}

/* Custom Select */
.custom-select {
    position: relative;
}

.custom-select-trigger {
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-input);
    border: 1.5px solid var(--bg-hover);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.4;
    /* 未選択時もテキスト入力 (.edit-input) と同じ高さを保つ */
    min-height: var(--edit-field-h);
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-select-trigger::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: rotate(45deg);
    margin-left: 8px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.custom-select.open .custom-select-trigger {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-dim);
}

.custom-select.open .custom-select-trigger::after {
    transform: rotate(-135deg);
}

.custom-select-trigger.placeholder {
    color: var(--text-secondary);
}

/* ドロップダウンを画面中央のポップアップとして表示 */
.custom-select-options {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    z-index: 1500;
    /* 度数のドラムピッカー (.wheel-picker) と同幅に揃える */
    width: min(300px, calc(100vw - 32px));
    max-height: min(70vh, 480px);
    /* ヘッダー固定＋リストのみスクロールの2層構造 */
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* 開いている間はポップアップを #editModalBackdrop 直下へ退避させる（liftEditOverlay）。
   その状態では .custom-select の子孫ではなくなるため、要素自身が持つ .is-open でも開く */
.custom-select.open .custom-select-options,
.custom-select-options.is-open {
    display: flex;
}

/* スクロールするのはリスト部分のみ（ヘッダーは動かない） */
.custom-select-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
}

/* 「その他」はヘッダー直下に常時固定（スクロールで隠れない） */
.custom-select-pinned {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
}

.custom-select.open .custom-select-options.animate-in,
.custom-select-options.is-open.animate-in {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ポップアップの背景マスク */
.custom-select-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1499;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.custom-select-backdrop.show {
    display: block;
}
.custom-select-backdrop.animate-in {
    opacity: 1;
}

/* 「その他」選択時の手入力ブロック（産地・種類・容量・熟成年数・蒸留所共通） */
.edit-other-block {
    margin-top: 8px;
}

/* 単位付きの数値入力欄（容量のその他: 数値＋ml固定表示） */
.edit-unit-input {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--edit-field-h);
    /* 既定の line-height (normal) だと単位の文字が行箱を押し広げて
       他の欄より数px高くなるため、テキスト入力と同じ 1.4 に固定する */
    line-height: 1.4;
    padding: 10px 16px;
    background: var(--bg-input);
    border: 1.5px solid var(--bg-hover);
    border-radius: 12px;
    transition: var(--transition);
}

.edit-unit-input:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-dim);
}

.edit-unit-input input {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.4;
    font-family: inherit;
}

.edit-unit-input input::placeholder {
    color: var(--text-tertiary);
}

/* 単位（右の「ml」「本」）と接頭記号（左の「#」）。位置は DOM 順で決まる */
.edit-unit-suffix,
.edit-unit-prefix {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 15px;
}

/* ポップアップ表示中はモーダル本体スクロール抑止 */
.edit-modal-body.dropdown-open {
    overflow: hidden;
    touch-action: none;
}

/* 度数のドラム式ピッカー */
.wheel-select {
    position: relative;
}

.wheel-select.open .custom-select-trigger {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-dim);
}

.wheel-select.open .custom-select-trigger::after {
    transform: rotate(-135deg);
}

.wheel-picker {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    z-index: 1500;
    width: min(300px, calc(100vw - 32px));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    /* 項目名ヘッダーをリスト式ポップアップと同じく左右いっぱいに出すため、横paddingは持たせない */
    padding: 0 0 12px;
    overflow: hidden;
}

/* リスト式ポップアップと同じく、開いている間はモーダル直下へ退避させる（liftEditOverlay） */
.wheel-select.open .wheel-picker,
.wheel-picker.is-open {
    display: block;
}

.wheel-select.open .wheel-picker.animate-in,
.wheel-picker.is-open.animate-in {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.wheel-cols {
    position: relative;
    display: flex;
    align-items: center;
    /* 他の項目（リスト式ポップアップ）が左寄せなので、数値も左に寄せて決定ボタンと離す */
    justify-content: flex-start;
    gap: 4px;
    height: 220px;
    overflow: hidden;
}

.wheel-col {
    height: 100%;
    /* 先頭の数字の左端がヘッダー・リスト式の項目名と同じ位置に来る幅 */
    width: 56px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    /* 先頭・末尾の項目も中央に来るよう上下に余白を確保（(220px - 44px) / 2） */
    padding: 88px 0;
    scrollbar-width: none;
    overscroll-behavior: contain;
}

.wheel-col::-webkit-scrollbar {
    display: none;
}

.wheel-item {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease;
}

.wheel-item.active {
    color: var(--text-primary);
    font-weight: 600;
}

.wheel-sep {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    z-index: 1;
}

/* 中央の選択行ハイライト */
.wheel-highlight {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 44px;
    transform: translateY(-50%);
    background: var(--gold-dim);
    pointer-events: none;
}

/* 上下のフェードでドラム感を出す */
.wheel-fade {
    position: absolute;
    left: 0;
    right: 0;
    height: 70px;
    pointer-events: none;
    z-index: 1;
}

.wheel-fade-top {
    top: 0;
    background: linear-gradient(to bottom, var(--bg-secondary), var(--bg-secondary-fade));
}

.wheel-fade-bottom {
    bottom: 0;
    background: linear-gradient(to top, var(--bg-secondary), var(--bg-secondary-fade));
}

/* 決定ボタン。下端に横長のボタンを足すとリスト式ポップアップと見た目が離れるため、
   選択中の行（中央ハイライト）の中に小さく置いて、値の延長線上で確定できるようにする。
   左右の auto マージンが余白を等分するので、% と右端のちょうど間に収まる */
.wheel-confirm {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* 強調ボタン（保存の進捗セグメント等）と同じ金のグラデーション＋金の影に揃える */
    background: var(--gold-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3);
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.wheel-confirm svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wheel-confirm:active {
    transform: scale(0.9);
}

/* ポップアップ上部に項目名を固定表示 */
.custom-select-header {
    flex-shrink: 0;
    background: var(--bg-secondary);
    padding: 12px 18px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

/* ポップアップ内オプションは度数ピッカー (.wheel-item) とフォントサイズを統一 */
.custom-select-options .custom-select-option {
    padding: 12px 18px;
    font-size: 20px;
}

/* 五十音の行見出し（蒸留所リストのア行/カ行など・選択不可） */
.custom-select-group {
    padding: 10px 18px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}

.custom-select-group:not(:first-child) {
    border-top: 1px solid var(--border-faint);
    margin-top: 4px;
}

/* 行間の罫線（ヘッダー直後の行には引かない） */
.custom-select-options .custom-select-option + .custom-select-option {
    border-top: 1px solid var(--border-faint);
}

.custom-select-list::-webkit-scrollbar {
    width: 6px;
}

.custom-select-list::-webkit-scrollbar-track {
    background: transparent;
}

.custom-select-list::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 3px;
}

.custom-select-option {
    position: relative;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.custom-select-option:first-child {
    border-radius: 10px 10px 0 0;
}

.custom-select-option:last-child {
    border-radius: 0 0 10px 10px;
}

.custom-select-option:hover {
    background: var(--bg-hover);
}

.custom-select-option.selected {
    color: var(--gold);
    font-weight: 600;
    background: var(--gold-soft);
}

.edit-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--bg-hover);
    flex-shrink: 0;
    background: var(--bg-main);
}

.edit-delete-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(217, 48, 37, 0.35);
    border-radius: 10px;
    color: #d93025;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.edit-delete-btn:hover {
    background: rgba(217, 48, 37, 0.08);
}

.edit-delete-btn:disabled {
    cursor: not-allowed;
    background: transparent;
    color: var(--text-tertiary);
    border-color: var(--bg-hover);
}

.edit-save-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    /* チャットの吹き出し/サジェストと同じ淡い金＋通常文字色 */
    background: var(--gold-soft);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    .edit-save-btn:hover:not(:disabled) {
        background: var(--gold-dim);
        color: var(--text-primary);
    }
}

/* カスタム確認ダイアログ */
.confirm-dialog-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1700;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.confirm-dialog-backdrop.open {
    display: flex;
}

.confirm-dialog {
    background: var(--bg-main);
    border-radius: 14px;
    width: 100%;
    max-width: 300px;
    padding: 24px 20px 16px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: fadeInScale 0.2s ease-out;
}

.confirm-dialog-message {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    /* メッセージ内の明示的な改行（\n）を反映する */
    white-space: pre-line;
}

.confirm-dialog-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.confirm-dialog-buttons {
    display: flex;
    gap: 10px;
}

.confirm-dialog-cancel,
.confirm-dialog-ok {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.confirm-dialog-cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.confirm-dialog-ok {
    background: rgba(217, 48, 37, 0.12);
    color: #d93025;
}

.confirm-dialog-ok-normal {
    /* 保存ボタン・チャット吹き出しと同じ淡い金＋通常文字色に統一 */
    background: var(--gold-soft);
    color: var(--text-primary);
}

/* フッター: 日付左 + ボタン右端 */
.whisky-card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ============================================
   Mobile Tab Bar - Bottom Fixed
   ============================================ */

@media (max-width: 640px) {
    /* モバイル: シームレススワイプ用レイアウト */
    .tab-content {
        overflow: hidden;
        position: relative;
    }

    .tab-panel {
        width: calc(100vw);
        min-width: calc(100vw);
        flex-shrink: 0;
        display: flex !important;
        flex-direction: column;
        overflow-y: auto;
        min-height: 0;
        height: 100%;
    }

    /* ボトルタブ: 一覧と分析はスワイプトラック上で横並び（仮想順序の
       recordsAnalysis スロットに対応してパネルを2スロットぶんの幅にする）。
       縦スクロールはパネルではなく各サブパネル内（.records-list /
       .dashboard-scroll）が担う */
    .tab-swipe-track #tabPanelRecords {
        width: 200vw;
        min-width: 200vw;
        overflow: hidden;
    }

    .tab-swipe-track .records-container {
        flex-direction: row;
    }

    .tab-swipe-track .records-subpanel {
        width: 100vw;
        min-width: 100vw;
        flex: 0 0 auto;
    }

    /* 探すタブ: 探す|分析 も同じくトラック上で横並び（searchAnalysis スロット）。
       バーモード（.bar-swipe-track）では #barTabPanelSearch が2スロット幅を持ち、
       間借りしている #tabPanelSearch はその幅いっぱいに広げる */
    .tab-swipe-track #tabPanelSearch {
        width: 200vw;
        min-width: 200vw;
        overflow: hidden;
    }

    .bar-swipe-track #barTabPanelSearch > #tabPanelSearch {
        width: 100%;
        min-width: 100%;
        overflow: hidden;
    }

    .tab-swipe-track .search-container,
    .bar-swipe-track .search-container {
        flex-direction: row;
    }

    .tab-swipe-track .search-pane,
    .bar-swipe-track .search-pane {
        width: 100vw;
        min-width: 100vw;
        flex: 0 0 auto;
        height: 100%;
    }

    /* モバイル: スライドインジケーターは非表示（ピル形ハイライトに統一） */
    .header-tab-indicator {
        display: none;
    }

    /* モバイル: タブは上部ヘッダーに表示（アイコン＋ラベル） */
    .header-tab-item {
        padding: 7px 2px 7px;
        gap: 3px;
        font-size: 12px;
        font-weight: 600;
    }

    .header-tab-item .tab-icon {
        width: 18px;
        height: 18px;
    }

    /* モバイル: カードのフォントサイズ */

    .whisky-card {
        gap: 16px;
    }

    .whisky-card {
        padding-bottom: 24px;
    }

    /* モーダルのモバイル対応（全画面表示。×をメニュー☰と同じ上端位置に） */
    .edit-modal-backdrop {
        padding: 0;
        align-items: flex-start;
    }

    .edit-modal {
        max-height: 100dvh;
        border-radius: 0;
    }

    .edit-modal-footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* Touch device optimizations for tabs */
@media (hover: none) and (pointer: coarse) {
    .header-tab-item:hover {
        background: transparent;
        color: var(--text-secondary);
    }

    .header-tab-item:active {
        background: rgba(255, 255, 255, 0.75);
    }

    .header-tab-item.active,
    .header-tab-item.active:hover {
        color: var(--gold);
        background: rgba(184, 134, 11, 0.14);
    }

}

.message-image {
    max-width: 240px;
    max-height: 240px;
    border-radius: 12px;
    object-fit: cover;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: block;
}

@media (max-width: 768px) {

    .message-image {
        max-width: 200px;
        max-height: 200px;
    }
}

/* ========== 登録タブ ========== */
.register-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--app-top-band) 20px 24px;
    gap: 16px;
    overflow-y: auto;
}

.register-options {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 440px;
}

.register-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 36px 24px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    text-align: left;
}

.register-option:hover {
    background: var(--gold-dim);
    transform: translateY(-2px);
}

.register-option:active {
    transform: translateY(0);
}

.register-option-disabled,
.register-option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.register-option-disabled:hover,
.register-option:disabled:hover {
    transform: none;
    border-color: var(--border-color);
    background: var(--bg-input);
}

.register-option-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.register-option-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.register-option-label {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.register-option-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.register-loading {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: var(--bg-main);
}

.register-loading > .loading-spinner {
    width: 56px;
    height: 56px;
}

/* 解析前プレビュー（全画面ステージ）。撮影・選択した画像を最大3枚まで束ねてから解析する。
   「写真が読み取れるか確認する」画面なので写真を主役に置く：
   ヒーロー1枚を大きく contain 表示し、下のフィルムストリップで切り替える。
   シェル（全画面・slideInRight・600px中央寄せ）は「手動で追加」の .edit-modal に揃える */
.img-stage-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-main);
    z-index: 1500;
    flex-direction: column;
}

.img-stage-backdrop.open {
    display: flex;
}

.img-stage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
    overflow: hidden;
    animation: slideInRight 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ヘッダーは .edit-modal-header 系をそのまま共用する（別定義を持つと表記ゆれが起きる）。
   デスクトップの 600px 中央寄せも .edit-modal-header 側の指定に相乗りする */
@media (min-width: 600px) {
    .img-stage {
        align-items: center;
    }
    .img-stage-body,
    .img-stage-footer {
        width: 100%;
        max-width: 600px;
    }
}

/* 横向き・小型端末ではヘッダーを詰めて、写真に回せる縦を稼ぐ */
@media (max-height: 560px) {
    .img-stage .edit-modal-header {
        padding-bottom: 6px;
    }
    .img-stage-body {
        gap: 8px;
    }
}

.img-stage-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 20px 8px;
    /* 縦が足りない端末（横向きなど）ではヒーローを潰さずスクロールさせる */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 主役の置き場。残りの縦を全部もらい、中の 3:4 フレームを中央に置く */
.img-stage-hero {
    flex: 1;
    /* 縦が詰まる端末（横向きなど）でも写真が消えない下限。溢れた分は本文がスクロールする */
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 写真の枠。iPhoneの写真と同じ 3:4 に固定するので、縦持ちで撮ったボトル写真は
   余白なくぴったり収まる。空きスペースに合わせて縦横とも縮み、比率は保つ */
.img-stage-frame {
    position: relative;
    aspect-ratio: 3 / 4;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 14px;
    overflow: hidden;
    /* 横位置で撮られた写真は contain で上下に余白が出るため、
       写真が浮き立つ暖かい暗色を敷く（白だと写真の端が曖昧になる） */
    background: #241f1a;
}

.img-stage-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 写真が0枚のときは「写真を浮き立たせる」必要がないので暗色にしない。
   下の空きスロットと同じ点線＋明るい地にして、アプリ全体のテイストに揃える */
.img-stage-frame.is-empty {
    background: transparent;
    border: 2px dashed var(--border-color);
}

/* 画像が1枚もないときの受け皿。画面ごと消さずにここへ戻す */
.img-stage-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
    color: var(--text-tertiary);
}

.img-stage-empty svg {
    color: var(--gold);
    opacity: 0.55;
}

.img-stage-empty-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.img-stage-empty-sub {
    font-size: 12px;
    line-height: 1.6;
}

/* ヒーロー上の削除。旧シートの24pxはタップ目標として小さすぎたので36pxに広げる */
.img-stage-hero-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    /* 暗いステージ上でも輪郭が見えるよう薄い白枠を足す */
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ヒーロー左下のロール表示。1枚目は「サムネ」、2枚目以降は昇格ボタンになる */
.img-stage-role {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.img-stage-role.is-thumb {
    background: var(--gold);
}

/* 押せることが分かるよう枠線付きにする */
.img-stage-role-btn {
    border: 1px solid rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.img-stage-role-btn:active {
    background: var(--gold);
}

@media (hover: hover) and (pointer: fine) {
    .img-stage-role-btn:hover {
        background: var(--gold);
    }
}

/* スマホ縦持ちでは横幅いっぱい。3:4のスロットなので、幅の広い画面でそのまま
   均等割りすると縦に伸びすぎて写真の場所を食うため、上限を設けて中央寄せする */
.img-stage-strip {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    flex-shrink: 0;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

/* 最大 MAX_ANALYSIS_IMAGES 枚ぶんのスロットを横幅いっぱいに均等配置する。
   空きスロットも枠だけ出すので「あと何枚足せるか」が一目で分かる */
.img-stage-slot {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-input);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

/* 未使用スロット。点線で「まだ入る枠」であることを示す（操作対象ではない） */
.img-stage-slot-empty {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 3 / 4;
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    background: transparent;
}

.img-stage-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 選択中は金リング。ヒーローに出ている1枚がどれか一目で分かるようにする */
.img-stage-slot.is-selected {
    border-color: var(--gold);
}

/* 1枚目＝一覧のサムネイル。ヒント文を読まなくてもルールが伝わるよう印を出す */
.img-stage-slot-mark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 0;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: #fff;
    background: var(--gold);
}

.img-stage-slot-index {
    position: absolute;
    top: 3px;
    left: 3px;
    min-width: 16px;
    padding: 1px 4px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
}

.img-stage-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* 追加ボタンは「追加される先」であるフィルムストリップの隣に置く。
   フッターの主アクションと視線を奪い合わせない */
.img-stage-add-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-shrink: 0;
}

/* 320px級の狭い端末では「ライブラリから追加」が2列に入りきらないので縦に積む */
@media (max-width: 360px) {
    .img-stage-add-row {
        flex-direction: column;
    }
}

/* 既存の .image-action-sheet-btn（--bg-secondary / 角丸10px / 枠線なし）に合わせる。
   2つ横並びなので文字だけ小さくする */
.img-stage-add-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 48px;
    /* 「ライブラリから追加」が9文字あり2列だと幅が厳しいので、左右paddingは詰める */
    padding: 12px 6px;
    border: none;
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
}

.img-stage-add-btn svg {
    flex-shrink: 0;
    color: var(--gold);
}

@media (hover: hover) and (pointer: fine) {
    .img-stage-add-btn:hover {
        background: var(--bg-hover);
    }
}

.img-stage-add-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* 枚数が増えても主ボタンが動かないよう、フッターに固定する */
.img-stage-footer {
    flex-shrink: 0;
    padding: 8px 20px calc(12px + env(safe-area-inset-bottom));
}

/* 主ボタンは既存の .edit-save-btn と同じ淡い金＋通常文字色。
   金グラデはこのアプリではアイコン・バッジ用で、大きなボタンには使わない */
.img-stage-analyze-btn {
    width: 100%;
    padding: 15px 16px;
    border: none;
    border-radius: 10px;
    background: var(--gold-soft);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    .img-stage-analyze-btn:hover:not(:disabled) {
        background: var(--gold-dim);
    }
}

.img-stage-analyze-btn:disabled {
    cursor: not-allowed;
    background: var(--bg-hover);
    color: var(--text-tertiary);
}

/* 解析中。画面を閉じずにその場で待たせる（失敗しても写真が残る） */
.img-stage.is-analyzing .img-stage-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.img-stage-spinner {
    position: absolute;
    /* 暗転スクリム（.is-analyzing の ::after）より前面に出す */
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.img-stage.is-analyzing .img-stage-slot,
.img-stage.is-analyzing .img-stage-hero-remove,
.img-stage.is-analyzing .img-stage-role-btn {
    pointer-events: none;
    opacity: 0.6;
}

/* トースト（フルスクリーンオーバーレイ・解析中UIと統一） */
.toast {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: var(--bg-main);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.toast.show {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.toast.fade-out {
    opacity: 0;
    pointer-events: none;
}

.toast-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gold-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-text {
    font-size: 17px;
    color: var(--gold);
    font-weight: 600;
    padding: 0 24px;
    text-align: center;
    white-space: pre-line;
}

/* 軽量トースト: 画面を覆わず、中央に半透明ピルで一言だけ出す（通知はすべてこれに統一） */
.mini-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 全オーバーレイ（最大: シェアプレビューの1900）より前面に出す */
    z-index: 2000;
    pointer-events: none;
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(30, 26, 18, 0.82);
    color: #fff;
    font-size: 14px;
    font-family: var(--font-body);
    /* 旧・全画面トーストの文言は \n 改行を含むため複数行に対応する */
    white-space: pre-line;
    text-align: center;
    line-height: 1.5;
    max-width: min(80vw, 340px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
}

.mini-toast.show {
    opacity: 1;
    visibility: visible;
}

/* タブ再タップでの「静かな更新」インジケーター。
   位置・地色・角丸・文字サイズは .mini-toast に合わせて画面中央に出す
   （このアプリの一言通知はすべて中央のピルに統一されているため）。
   同じ操作の結果である失敗通知（「更新できませんでした」）も mini-toast なので、
   進行中と結果が同じ場所で入れ替わる。違いはスピナーが付くことだけ */
.tab-refresh-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* mini-toast(2000) のすぐ下。両方出る場面では結果の通知を前に出す */
    z-index: 1990;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(30, 26, 18, 0.82);
    color: #fff;
    font-size: 14px;
    font-family: var(--font-body);
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
}

.tab-refresh-indicator.show {
    opacity: 1;
    visibility: visible;
}

.tab-refresh-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .tab-refresh-spinner {
        animation-duration: 1.6s;
    }
}

/* 公開トグル */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 22px;
    transition: 0.2s;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--gold);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   ウイスキーカード A型（画像+銘柄+★のミニマル）
   ============================================ */

/* records-list を2列グリッドに上書き（A型ミニカード用） */
.records-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 18px 12px !important;
    padding: 20px 12px 24px !important;
    flex-direction: initial !important;
    scroll-snap-type: none !important;
}

.whisky-card-mini {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
}
.whisky-card-mini:active { transform: scale(0.98); }

.whisky-card-mini-img-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}.whisky-card-mini-img-wrap img,
.whisky-detail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translate(var(--img-tx, 0%), var(--img-ty, 0%)) scale(var(--img-zoom, 1));
    transform-origin: center center;
}
.whisky-card-mini-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--text-tertiary);
    background: linear-gradient(135deg, #fdfbf3 0%, #f8f1e2 100%);
}

.whisky-card-mini-new {
    position: absolute;
    left: 8px;
    top: 8px;
    background: var(--gold-gradient);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 7px 13px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    pointer-events: none;
    opacity: 1;
    transform: scale(1);
    transition: opacity 200ms ease, transform 200ms ease;
}
.whisky-card-mini-new--fading {
    opacity: 0;
    transform: scale(0.85);
}

/* 「飲みたい」しおりトグル。件数は載せない（受け取った数はマイページのKPIに集約）ため、
   アイコン1つぶんの正円にする。タップ領域は 36px 確保して誤タップを防ぐ */
.whisky-card-mini-like {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 14px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.14);
    line-height: 1;
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease;
}
/* タップ時の押し込みフィードバック（全端末共通） */
.whisky-card-mini-like:active { transform: scale(0.9); }
.whisky-card-mini-like.liked {
    color: var(--like);
    background: rgba(0, 0, 0, 0.5);
}
/* 保存済みのしおりを暗い/明るいどちらの画像上でも際立たせる白ハロー */
.whisky-card-mini-like.liked .heart svg {
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.85));
}
.whisky-card-mini-like .heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.whisky-card-mini-like .heart svg { display: block; }
/* 保存した瞬間のポップ（JS が is-bursting を一瞬付与） */
.whisky-card-mini-like.is-bursting .heart { animation: like-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes like-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.4); }
    60%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

.whisky-card-mini-info {
    padding: 10px 12px 12px;
}
.whisky-card-mini-brand {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    overflow: hidden;
    display: -webkit-box;
    /* 日本語の銘柄名は先頭がボトラー名（ブティックウイスキー、ケイデンヘッド…）で
       1行目が埋まり、区別したい蒸留所名・年数が2行目で切れる。3行まで許容する。
       min-height は 1.3 × 3行。短い名前でも隣のカードと高さを揃えるため */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    min-height: 3.9em;
}
.whisky-card-mini-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    color: var(--text-secondary);
    margin-top: 6px;
}
.whisky-card-mini-rating .star { color: var(--gold); }
.whisky-card-mini-rating .unrated { color: var(--text-tertiary); }
.whisky-detail-rating .unrated { color: var(--text-tertiary); }
.whisky-card-mini-rating .owner-inline {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 3px;
    overflow: hidden;
    max-width: 60%;
}
.whisky-card-mini-rating .owner-inline .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* アイコンを包む span をフレックスにして SVG を行の中央に置く。
   通常のインラインのままだと SVG が文字のベースラインに乗り、
   行の高さ（line-height ぶん）の中で名前より上に寄って見える */
.whisky-card-mini-rating .owner-inline .user-avatar-ico-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
/* スコア非表示（ログインなし画面・バーの探すタブ）: 所有者名だけが右端に浮かないよう左寄せに戻す */
.whisky-card-mini-rating.no-score .owner-inline {
    margin-left: 0;
    max-width: 100%;
}

/* ============================================
   ウイスキー詳細モーダル（全画面・1ページ完結）
   ============================================ */

.whisky-detail-backdrop {
    position: fixed;
    inset: 0;
    /* 背景は透明にして、左→右スワイプで戻る時に下の一覧（戻り先）が覗くようにする。
       フレーム自体は bg-main の不透明なので、静止時の見た目は変わらない。 */
    background: transparent;
    z-index: 1500;
    display: none;
    flex-direction: column;
}
.whisky-detail-backdrop.open {
    display: flex;
}

.whisky-detail-frame {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg-main);
    overflow: hidden;
    /* 横スワイプで一覧に戻る（タブ移動風）アニメーション */
    transition: transform 0.25s ease, opacity 0.25s ease;
    will-change: transform;
}
.whisky-detail-frame.is-dragging {
    transition: none;
}

/* 右下フローティング: この銘柄について Uisge(AI) に聞く導線。
   filter-fab / 戻るボタンと同じ「すりガラス＋ゴールド」のトンマナに合わせる。 */
.whisky-detail-ask-fab {
    position: absolute;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: none;
    border-radius: 999px;
    background: var(--glass-btn-bg);
    color: var(--gold);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: transform 0.15s ease, background 0.15s ease;
    z-index: 3;
}
.whisky-detail-ask-fab svg { flex-shrink: 0; }
.whisky-detail-ask-fab:active {
    transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
    .whisky-detail-ask-fab:hover {
        background: var(--glass-btn-bg-hover);
    }
}

/* 幅広画面（タブレット/PC）では中央480pxシートの左右に下の一覧・タブバーが
   透けて重なって見えてしまうため、scrim（暗い半透明）を敷いてシートを際立たせる。
   モバイル（フル幅）では背景透明のまま＝スワイプ戻し時の覗き見えを維持する。 */
@media (min-width: 481px) {
    .whisky-detail-backdrop {
        background: rgba(28, 22, 14, 0.5);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }
    .whisky-detail-frame {
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
    }
}

.whisky-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* デフォルト画面の filter-fab（top:10px・左右12px）と位置を揃える */
    padding: 10px 12px;
    background: var(--bg-main);
}
/* 戻るボタン（filter-fab と同じ丸いUI） */
.whisky-detail-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 14px;
    border: none;
    border-radius: 50%;
    background: var(--glass-btn-bg);
    color: var(--gold);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.whisky-detail-back.icon-only {
    width: 42px;
    height: 42px;
    padding: 0;
}
@media (hover: hover) and (pointer: fine) {
    .whisky-detail-back:hover { background: var(--glass-btn-bg-hover); }
}

.whisky-detail-header {
    display: flex;
    gap: 14px;
    padding: 20px 16px 20px;
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    align-items: flex-start;
}
.whisky-detail-thumb {
    width: 126px;
    height: 168px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
    cursor: pointer;
    position: relative;
}
.whisky-detail-thumb .placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--text-tertiary);
    background: linear-gradient(135deg, #fdfbf3 0%, #f8f1e2 100%);
}
.whisky-detail-thumb.empty {
    border: 1px dashed var(--border-color);
    background: transparent;
}
.whisky-detail-thumb.empty .add-photo-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.whisky-detail-thumb.empty .add-photo-label .plus {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.whisky-detail-thumb.uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
}
.whisky-detail-thumb.uploading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: whisky-thumb-spin 0.8s linear infinite;
    z-index: 1;
}
@keyframes whisky-thumb-spin {
    to { transform: rotate(360deg); }
}
.whisky-detail-thumb .upload-success-check {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2ecc71;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 2;
    pointer-events: none;
    animation: whisky-thumb-check 1.2s ease forwards;
}
@keyframes whisky-thumb-check {
    0%   { opacity: 0; transform: scale(0.6); }
    20%  { opacity: 1; transform: scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

.whisky-detail-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 168px; /* サムネ高さに揃える（3行銘柄に合わせて拡張） */
}
.whisky-detail-brand {
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
    color: var(--text-primary);
    font-weight: 600;
    /* 1〜3行は3行分の高さを確保（下の星評価が上に動かない）。
       4行以上は省略せずそのまま全行表示（rating/author は自然に下がる）。 */
    min-height: calc(3 * 1.35em);
    /* 余白はタイトル側で吸収し、評価/ユーザー名/記録日は等間隔のまま下端に揃える */
    flex: 1 0 auto;
}
.whisky-detail-rating {
    color: var(--gold);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.whisky-detail-rating .star {
    color: var(--gold);
    margin-right: 4px;
}
.whisky-detail-author {
    display: flex;
    flex-direction: column;
    gap: 6px; /* 親の gap と同じ間隔にして、評価〜ユーザー名〜記録日を等間隔に */
    font-size: 14px;
    color: var(--text-secondary);
}
/* 探すタブのユーザー・バー名（.user-search-name）と同じ太さに揃える（サイズは据え置き） */
.whisky-detail-author .name {
    font-weight: 500;
    color: var(--text-primary);
}
.whisky-detail-author .row {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* 記録日の値は、ユーザー名(.name)や基本情報の値(.whisky-detail-info-grid .value)と
   同じ濃さ・太さに揃える。ラベル「記録日」は他の label と同じく secondary のまま */
.whisky-detail-author .date-value {
    color: var(--text-primary);
    font-weight: 500;
}
/* 所有者名はタップでプロフィールへ。カードでは★行の小さな文字＝カード全体のタップ領域と
   競合して押し分けられないので、導線は詳細ページのここにだけ置く。
   背景は敷かず、末尾の › と金の名前で押せることを示す。
   padding で指のタップ領域を確保しつつ、負のマージンで見た目の行間は元のまま保つ */
.whisky-detail-author .row.owner-row-link {
    align-self: flex-start;
    padding: 8px 6px;
    margin: -8px -6px;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.12s ease;
}
/* 押せることは「金＋下線」で示す。
   この行には所有者と場所の2つのリンクが並ぶことがあり、末尾の › では
   どちらに掛かる矢印なのか読めない。印を語そのものに付ければ、
   リンクが1つでも2つでも同じ規則で読める。
   金だけにしないのは、この画面では★スコアもセクション見出しも金＝
   「金なら押せる」が成り立たないため（下線がその区別を担う） */
.whisky-detail-author .row.owner-row-link .name,
.whisky-detail-author button.venue-row .venue-name {
    color: var(--like-strong);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--gold-line);
}
.whisky-detail-author .row.owner-row-link:active { opacity: 0.55; }

/* 「ユーザー名 @ バー名」の1行。所有者と場所はそれぞれ独立して押せるので、
   ボタンを入れ子にせず横に並べる（負のマージン分は padding で相殺され、
   リンクの有無にかかわらず名前と @ の間隔は gap どおりになる） */
.whisky-detail-author .author-line {
    gap: 6px;
    flex-wrap: wrap;
}

/* 「ユーザー名 @ バー名」の @ 以降。掲載店にリンクされているときだけ押せる */
.whisky-detail-author .venue-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.whisky-detail-author .venue-at {
    color: var(--text-tertiary);
}
/* 場所名は、押せる押せないに関わらず本文と同じ濃さ・太さ。押せるかどうかは
   金＋下線で示しているので、薄くして「情報の格を下げる」必要はない。
   ユーザー名(.name)と同じ font-weight: 500 にして、同じ行に並ぶ二者の
   強さを揃える */
.whisky-detail-author .venue-name {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.whisky-detail-author button.venue-row {
    padding: 8px 6px;
    margin: -8px -6px;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.12s ease;
}
.whisky-detail-author button.venue-row:active { opacity: 0.55; }

.whisky-detail-body {
    flex: 1;
    /* min-height:auto だと画像でヘッダーが高い時にボディが縮まず、ボディ内の
       overflow-y が効かずにフレームで末尾が切れてスクロール不能になる。0 にして
       実際にスクロールできるようにする（flexbox の定番対応）。 */
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* flex スクロールコンテナの padding-bottom は iOS Safari 等でスクロール末尾に
   反映されず（最後の子がコンテナ下端に張り付き FAB の裏に入る）、中身が画面に
   収まる量でもコメントが「Uisgeに聞く」に被る。スクロール高に必ず数えられる実体の
   スペーサーを末尾に置き、最後まで FAB に被らず読めるようにする。 */
.whisky-detail-body::after {
    content: '';
    flex: 0 0 auto;
    height: calc(88px + env(safe-area-inset-bottom, 0px));
}
.whisky-detail-section h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--gold);
    letter-spacing: 0.08em;
    font-weight: 600;
}
.whisky-detail-info-grid {
    display: grid;
    /* 「カスクタイプ」「ボトリング年」等の6文字ラベルが折り返さないよう内容幅に追従させる */
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 10px;
    font-size: 15px;
}
.whisky-detail-info-grid .label { color: var(--text-secondary); white-space: nowrap; }
.whisky-detail-info-grid .value { color: var(--text-primary); font-weight: 500; }
.whisky-detail-empty-msg {
    color: var(--text-tertiary);
    font-size: 14px;
}
.whisky-detail-comment {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.edit-comment-input {
    min-height: 80px;
    resize: none;
}
/* 備考は「ハンドフィル、PB」程度の短い事実を想定。コメントほどの高さは要らないが、
   1行の入力欄に見えると書き足しづらいので2行分の高さから始める（あとは autosize が伸ばす） */
.edit-remarks-input {
    min-height: 56px;
    resize: none;
}
/* コメント・スコアのステップは欄が3つだけで縦に余裕があるぶん、間隔を広めにとる。
   スコアの前だけ margin で広げていた時期があり、飲んだ場所→コメントが 14px、
   コメント→スコアが 34px と不揃いだったので、ステップ全体の gap で 34px にそろえる
   （.edit-field-score のクラス自体は、スコアをオフにした店で欄を隠す目印として JS が使う） */
.edit-step[data-step="3"] {
    gap: 34px;
}
.whisky-detail-pill-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 12px;
    row-gap: 0;
    margin-bottom: 10px;
    align-items: start;
}
/* 基本情報のラベル(.whisky-detail-info-grid .label)と同じく secondary色・通常太さ。
   ラベルは全画面で「secondary + 通常太さ」に統一し、値側だけで強弱を付ける */
.whisky-detail-pill-row .pill-label {
    font-size: 15px;
    color: var(--text-secondary);
    padding-top: 6px;
}
.whisky-detail-pill-row .pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.whisky-detail-pill {
    background: transparent;
    color: var(--text-primary);
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 14px;
    border: 1px solid var(--border-color);
}

.whisky-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid var(--border-color);
    background: transparent;
}
.whisky-detail-actions.in-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: none;
    grid-template-columns: none;
}
.whisky-detail-actions.in-topbar .whisky-detail-action-btn {
    border: none;
    min-height: 42px;
    min-width: 48px;
    padding: 4px 12px;
    border-radius: 12px;
    background: var(--glass-btn-bg);
    color: var(--gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.whisky-detail-actions.in-topbar .whisky-detail-action-btn .icon {
    color: var(--gold);
}
.whisky-detail-actions.in-topbar .whisky-detail-action-btn:hover {
    background: var(--glass-btn-bg-hover);
}
.whisky-detail-actions.in-topbar .whisky-detail-action-btn.liked,
.whisky-detail-actions.in-topbar .whisky-detail-action-btn.liked .icon {
    color: var(--like-strong);
}
.whisky-detail-action-btn {
    background: transparent;
    border: none;
    padding: 8px 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    border-right: 1px solid var(--border-color);
    min-height: 44px;
}
.whisky-detail-action-btn:last-child { border-right: none; }
.whisky-detail-action-btn:hover { background: var(--bg-hover); }
.whisky-detail-action-btn .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}
.whisky-detail-action-btn .icon svg {
    display: block;
}
.whisky-detail-action-btn.liked { color: var(--like-strong); }
.whisky-detail-action-btn.liked .icon { color: var(--like-strong); }
.whisky-detail-action-btn:active .icon { transform: scale(0.88); }
.whisky-detail-action-btn .icon { transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1); }
.whisky-detail-action-btn.is-bursting .icon svg { animation: like-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
.whisky-detail-action-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 画像アクションシート */
.image-action-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1700;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
.image-action-sheet-backdrop.open {
    display: flex;
    animation: fadeIn 0.15s ease-out;
}
.image-action-sheet {
    width: 100%;
    max-width: 480px;
    background: var(--bg-main);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: slideUp 0.2s ease-out;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.image-action-sheet-btn {
    background: var(--bg-secondary);
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    padding: 14px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
}
.image-action-sheet-btn:hover { background: var(--bg-hover); }
.image-action-sheet-btn.danger { color: #d93025; }
.image-action-sheet-btn.cancel {
    margin-top: 4px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* 画像の表示箇所を調整するエディタ */
.image-focus-editor-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1750;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.image-focus-editor-backdrop.open {
    display: flex;
    animation: fadeIn 0.15s ease-out;
}
.image-focus-editor {
    background: var(--bg-main);
    border-radius: 14px;
    padding: 16px;
    width: 100%;
    max-width: 360px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.image-focus-editor-frame {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 60vh;
}
.image-focus-editor-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}
.image-focus-editor-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.image-focus-editor-frame.dragging { cursor: grabbing; }
.image-focus-editor-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    transform: translate(var(--img-tx, 0%), var(--img-ty, 0%)) scale(var(--img-zoom, 1));
    transform-origin: center center;
    transition: none;
}
.image-focus-editor-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}
.image-focus-editor-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
}
.image-focus-editor-zoom input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    height: 4px;
    background: var(--bg-secondary);
    border-radius: 2px;
    outline: none;
}
.image-focus-editor-zoom input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    border: none;
}
.image-focus-editor-zoom input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    border: none;
}
/* スライダー両脇のアイコンは1タップぶんの拡大・縮小ボタン。
   見た目の文字は小さいままだが、指で押せるよう当たり判定を広げてある */
.image-focus-editor-zoom .zoom-icon {
    flex: 0 0 auto;
    padding: 0;
    width: 40px;
    height: 40px;
    margin: -10px -8px;
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.12s, transform 0.1s;
}
.image-focus-editor-zoom .zoom-icon-large { font-size: 20px; }
.image-focus-editor-zoom .zoom-icon:active { transform: scale(0.88); }
/* 端まで来たら薄くする（押しても動かない理由を見せる） */
.image-focus-editor-zoom .zoom-icon:disabled {
    opacity: 0.3;
    cursor: default;
}
.image-focus-editor-actions {
    display: flex;
    gap: 8px;
}
.image-focus-editor-btn {
    flex: 1;
    padding: 12px 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.image-focus-editor-btn.cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.image-focus-editor-btn.primary {
    background: var(--gold-soft);
    color: var(--text-primary);
}

/* ── プロフィール写真 ────────────────────────────────
   ユーザー・バーの丸アイコンは「頭文字（既定）」と「写真」の2状態。
   写真は保存時に正方形へ焼き込んであるので、表示側は丸に cover で収めるだけでよい。
   大きさは --avatar-size で決める（頭文字のフォントもそれに追従する） */
.avatar-figure {
    flex: 0 0 auto;
    width: var(--avatar-size, 60px);
    height: var(--avatar-size, 60px);
    border-radius: 50%;
    background: rgba(184, 134, 11, 0.15);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--avatar-size, 60px) * 0.37);
    font-weight: 600;
    line-height: 1;
    overflow: hidden;
}
.avatar-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 写真を変えられることが分かるよう、丸の右下にカメラのバッジを重ねる。
   未設定（頭文字）のままでも出しておかないと、変更できること自体に気づけない */
.avatar-edit {
    position: relative;
    flex: 0 0 auto;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s;
}
.avatar-edit:active { transform: scale(0.96); }
.avatar-edit-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* カードの地色で縁取って、アイコンの丸から浮かせる */
    border: 2px solid var(--bg-input);
    pointer-events: none;
}

.avatar-edit-lg {
    --avatar-size: 84px;
}
.avatar-edit-lg .avatar-edit-badge {
    width: 26px;
    height: 26px;
    right: 2px;
    bottom: 2px;
    border-color: var(--bg-main);
}
.avatar-edit-lg .avatar-edit-badge svg {
    width: 13px;
    height: 13px;
}

/* プロフィール画面のオーナー行。アイコン枠（.kpi-icon 44px）を写真で埋める */
#profileOwnerAvatar {
    --avatar-size: 44px;
}

/* トリミングは正方形フレーム＋丸マスク。切り抜いた結果がそのまま見える */
.image-focus-editor-frame.is-avatar {
    aspect-ratio: 1 / 1;
    max-width: 280px;
    margin: 0 auto;
    border-radius: 50%;
    /* はみ出した中身は枠で切る（写真は必ずフレームを覆うので地色は見えない） */
    background: transparent;
}
.image-focus-editor-frame.is-avatar::after {
    border-radius: 50%;
}
/* ボトル写真と違い、img をフレームからはみ出させて中身をずらす。
   実寸は JS が短辺基準（＝cover と同じ初期表示）で入れる */
.image-focus-editor-frame.is-avatar img {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    max-height: none;
    object-fit: fill;
}
/* ボトル写真側の 🥃 と違い、こちらは記号なので文字色を明示する */
#avatarCropperBackdrop .zoom-icon {
    color: var(--text-secondary);
    line-height: 1;
}

/* 画像拡大ビューア */
.image-viewer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-main);
    z-index: 1800;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.image-viewer-backdrop.open {
    display: flex;
    animation: fadeIn 0.15s ease-out;
}
.image-viewer-backdrop img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.image-viewer-close {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    left: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.image-viewer-close:hover { background: rgba(0, 0, 0, 0.14); }

/* ============================================
   フォーカス／押下スタイル統一
   - タップ時のハイライト・押下感を抑制（一般的なネイティブアプリ寄り）
   - キーボード操作時（:focus-visible）のみフォーカスリングを表示
   ============================================ */
button,
a,
input,
select,
textarea,
[role="button"],
[tabindex] {
    -webkit-tap-highlight-color: transparent;
}

/* マウス・タッチによるフォーカスではアウトラインを出さない */
button:focus,
a:focus,
[role="button"]:focus,
[tabindex]:focus {
    outline: none;
}

/* キーボード操作時のみ視認可能なフォーカスリング */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* :active による押下時の変形・色変化を全体的に抑制 */
button:active,
a:active,
[role="button"]:active {
    transform: none !important;
    filter: none !important;
}
.sort-select:active,.icon-btn:active,.logout-btn:active,.suggestion-btn:active,.link-card-item:active,.carousel-nav-btn:active,.send-btn:active:not(:disabled) {
    background: inherit;
    box-shadow: none;
}

/* タップ押下感: 押すと少し大きくなる（Claudeアプリ風）
   抑制ルール（上）より後ろ・!important で transform:none を上書きする */
/* 戻り（離したとき）の余韻。transition 未定義のボタンにだけ付与。 */
.filter-fab,
.search-back-btn,
.profile-back-btn,
.whisky-detail-back,
.icon-btn,
.share-close-btn,
.image-viewer-close,
.whisky-detail-action-btn {
    /* 離したときはゆっくり戻す（押下感の余韻）。色・透明度も同じ余韻で戻す */
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.22s ease,
                opacity 0.22s ease;
}

.filter-fab:active,
.search-back-btn:active,
.profile-back-btn:active,
.whisky-detail-back:active,
.icon-btn:active:not(:disabled),
.share-close-btn:active,
.image-viewer-close:active,
.whisky-detail-action-btn:active,
/* JS が遷移直前に付与するクラス（押している間だけでなく、遷移を一瞬遅らせて確実に見せる） */
.btn-press-active {
    /* 押した瞬間に即膨らむ → 短いタップでもぷくっと反応する */
    transform: scale(1.12) !important;
    /* 同時に中身のゴールドが瞬間ですっと薄くなり、全体もふっと透ける → 一瞬でも「押した」と気づける */
    color: rgba(184, 134, 11, 0.5) !important;
    opacity: 0.72 !important;
    transition-duration: 0.04s !important;
}

/* モーション低減設定では押下時の拡大を無効化 */
@media (prefers-reduced-motion: reduce) {
    .filter-fab:active,
    .search-back-btn:active,
    .profile-back-btn:active,
    .whisky-detail-back:active,
    .icon-btn:active:not(:disabled),
    .share-close-btn:active,
    .image-viewer-close:active,
    .whisky-detail-action-btn:active {
        transform: none !important;
    }
}

/* ============================================
   Uisge bar（/b・/b/{slug}・/bar）
   ============================================ */

/* 無認証・バーモードでは本体のメニュー☰・チャット入力欄を出さない
   （入力欄は本体ではログイン後に welcome スロットへ移動されるが、
     guest/bar モードでは移動処理が走らず mainApp 直下に残るため明示的に隠す） */
body.guest-mode .input-area,
body.bar-mode .input-area {
    display: none;
}

/* 本体の下部タブは guest/bar モードでは常時非表示（自店ホームの .bar-tabbar は除く）。
   本体の一覧ビュー（すべて見る）は開閉時に .header の inline style を
   付け外しして復元するため、inline に負けない !important で固定する */
body.guest-mode .header,
body.bar-mode .header:not(.bar-tabbar) {
    display: none !important;
}

/* バーモード・無認証モードの詳細はメニュー確認用途のため、チャット導線（Uisgeに聞く）を出さない
   （無認証モードは本体＝ログインありへの導線を一切置かない） */
body.bar-mode .whisky-detail-ask-fab,
body.guest-mode .whisky-detail-ask-fab {
    display: none;
}

/* FAB を出さない無認証モードでは、FAB を避けるための末尾スペーサーも不要
   （残すと詳細の下に 88px の空白が居座る） */
body.guest-mode .whisky-detail-body::after {
    height: env(safe-area-inset-bottom, 0px);
}

/* バーモードは明るい背景のため、トグルOFF（白 15%）が背景に溶ける → グレーに */
body.bar-mode .toggle-slider {
    background-color: rgba(0, 0, 0, 0.18);
}

/* 本体マイページの公開設定カードも明るい背景のため同じ対処 */
.bar-status-card .toggle-slider {
    background-color: rgba(0, 0, 0, 0.18);
}

/* ── /bar: 自店ホーム ───────────────────── */
/* 表示時は JS が display:flex にする（縦: スクロール領域 + 下部タブ） */
.bar-admin-view {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: var(--bg-main);
    flex-direction: column;
}

.bar-admin-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* モバイル: 本体タブと同じスワイプトラック（JS がパネルを .bar-swipe-track に移して横並びにする）。
   スクロールは body ではなく各パネルが担う */
@media (max-width: 640px) {
    .bar-admin-body.has-swipe-track {
        overflow: hidden;
    }

    /* 幅はスワイプ仮想順序の6スロットぶん（探す・ボトルタブがそれぞれ 探す|分析・一覧|分析 の2つを占める） */
    .bar-swipe-track {
        display: flex;
        flex-direction: row;
        height: 100%;
        width: 600%;
        will-change: transform;
    }

    .bar-swipe-track .bar-tab-panel {
        width: calc(100% / 6);
        min-width: calc(100% / 6);
        flex: 0 0 auto;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: block !important;
    }

    /* 登録タブ・ボトルタブはセンター配置のため flex を維持 */
    .bar-swipe-track #barTabPanelRegister,
    .bar-swipe-track #barTabPanelBottles {
        display: flex !important;
    }

    /* ボトルタブ: 一覧|分析 を横並びにするため2スロットぶんの幅。
       縦スクロールはパネルではなく各ペインが担う（JS がペインを組み立てる） */
    .bar-swipe-track #barTabPanelBottles {
        width: calc(200% / 6);
        min-width: calc(200% / 6);
        flex-direction: row;
        padding: 0;
        overflow: hidden;
    }

    .bar-swipe-track .bar-bottles-pane {
        width: 50%;
        min-width: 50%;
        flex: 0 0 auto;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* パネル（#barTabPanelBottles）から外した余白をペイン側で持つ。
           上端はワードマーク帯（--app-top-band）＋ノッチぶん確保しないと
           グリッドがロゴ・トグルの裏に潜る */
        padding: calc(var(--app-top-band) + env(safe-area-inset-top)) 12px 24px;
        /* scrollIntoView（分析カードの「上位だけ表示」の戻り先合わせ）用 */
        scroll-padding-top: calc(var(--app-top-band) + env(safe-area-inset-top));
    }

    /* 探すタブ: 中身（#tabPanelSearch）が独自にスクロールするためパネル自体は固定。
       探す|分析 を横並びにするため2スロットぶんの幅（本体の .tab-swipe-track #tabPanelSearch と同じ） */
    .bar-swipe-track #barTabPanelSearch {
        display: flex !important;
        flex-direction: column;
        overflow: hidden;
        width: calc(200% / 6);
        min-width: calc(200% / 6);
    }
}

/* デスクトップ幅（>640px）: スワイプトラックは読み込み時に width≤640 で組まれると
   セッション中 DOM に残り続ける。トラックのレイアウトCSSは上の max-width:640 内にしか
   ないため、640 を超えるとトラックが素の display:block / height:auto に化け、
   height:100% 依存の探すパネル（flex:1 + overflow:hidden）が高さを解決できず潰れて
   空白になる（ボトル/マイページは min-height=内容基準のため生き残る）。
   ここで通常の縦フルハイトのコンテナへ戻し、探すパネルに定高を与える。
   デスクトップ幅で読み込んだ場合はトラック自体が生成されないためこのルールは無害。 */
@media (min-width: 641px) {
    .bar-swipe-track {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}

.bar-admin-wrap {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    padding: 16px 20px 48px;
    padding-top: calc(16px + env(safe-area-inset-top));
}

/* 登録タブ: 本体 .register-container の縦横センターを効かせる（表示時は JS が display を戻す） */
#barTabPanelRegister {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* マイページ: 本体データタブ（.dashboard-scroll）と揃えた上部余白＝ワードマークの帯ぶん。
   ノッチ端末（safe-area がある場合）は従来どおり inset ぶんを確保する */
#barTabPanelMypage.bar-admin-wrap {
    padding-top: calc(var(--app-top-band) + env(safe-area-inset-top));
}

/* マイページ: セクションタイトル＋カードの縦積み（本体ダッシュボードと同じ構成） */
.bar-mypage-section {
    margin-bottom: 24px;
}

.bar-mypage-title {
    max-width: none;
    font-size: 18px;
    margin: 0 0 10px;
}

.bar-status-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}

.bar-store {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* 探すタブの .user-search-avatar と同じ見た目（丸・ゴールド淡色＋頭文字） */

.bar-store-meta {
    min-width: 0;
}

.bar-store-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-store-sub {
    font-size: 12px;
    color: var(--text-secondary);
}

.bar-edit-pen {
    flex: 0 0 auto;
    margin-left: auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bar-public-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* 公開設定カード: 左にラベル＋説明、右にトグル */
.bar-public-row {
    width: 100%;
    justify-content: space-between;
    gap: 16px;
}
/* アカウントカードは名前・公開設定・（バーは）登録画面の設定を1枚にまとめている。
   別々の設定だと分かるよう、行の間に仕切りを置く */
.bar-status-card .bar-store + .bar-public-row,
.bar-status-card .bar-public-row + .bar-public-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}
/* カード内の小見出し。1枚にまとめたぶん、性質の違う設定（登録画面の挙動）が
   どこから始まるのかを示す。仕切りはこの見出しが持ち、直後の行では引かない */
.bar-status-card .bar-card-group-label {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text-tertiary);
}
.bar-status-card .bar-card-group-label + .bar-public-row {
    margin-top: 10px;
}

.bar-public-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bar-public-text .t {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.bar-public-text .d {
    font-size: 12px;
    color: var(--text-secondary);
}

.bar-share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--bg-secondary);
}

.bar-share-url {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-mini-btn {
    flex: 0 0 auto;
    cursor: pointer;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    /* body は欧文が DM Serif Display になるため、QR などの英字ラベルも和文と同じ書体に揃える */
    font-family: var(--font-body);
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* 共有カード: URL行の右に「コピー」を隣接、下段は QRを表示 / ページを見る / URLを変更。
   ラベルを同程度の文字量に揃えたうえで3等分し、ボタン幅を統一する */
.bar-share-row .bar-mini-btn {
    padding: 6px 12px;
}

.bar-share-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

/* 375px未満では3ボタン1行が収まらないため、「ページを見る」を
   全幅の1行目にし、QRを表示 / URLを変更 を2行目に半々で並べる */
@media (max-width: 374px) {
    .bar-share-actions {
        grid-template-columns: 1fr 1fr;
    }
    .bar-share-actions #barViewPublicLink {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}

/* 非公開のままURLを共有してしまう事故を防ぐ注意書き（公開オンでは非表示） */
.bar-share-note {
    margin: 10px 2px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--amber-warm);
}

.bar-share-actions .bar-mini-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 600;
}

/* ボトルタブ: 本体コレクションタブの絞り込みFABと同じ見た目・同じ画面右上配置。
   本体・バーとも FAB はスワイプトラックの外に置き、タブ切替（switchTab / switchBarTab）で
   表示を切り替える。本体は .tab-content (position:relative) 基準の absolute、
   バーは .bar-admin-body 自体がスクロールするため position:fixed で画面に固定する */
.filter-fab-bar {
    position: fixed;
    top: calc((var(--app-top-band) - 42px) / 2 + env(safe-area-inset-top));
    right: 12px;
}

/* 本体の .records-list と左右/下の余白・FAB分の上部余白を揃える */
#barTabPanelBottles {
    padding: calc(var(--app-top-band) + env(safe-area-inset-top)) 12px 24px;
}

/* 探すタブ: 移設した本体の探すパネル（.tab-panel は flex:1 前提）を
   バーのタブパネル内いっぱいに広げる。スクロールは探すパネル内部が担う */
#barTabPanelSearch {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
}

/* バーモードでは探すタブの表示制御はラッパー #barTabPanelSearch が担うため、
   移設した本体パネル #tabPanelSearch 自体は常に flex にする。
   本体 switchTab は探す以外のタブ扱いのとき #tabPanelSearch に inline で
   display:none を付ける。モバイル幅では .tab-panel{display:flex!important} が
   これを打ち消すが、その !important はデスクトップ幅(>640)には無いため inline の
   none が残り、探すタブが空白になる（640 を境目に消える不具合の本体）。
   ここでラッパー直下の探すパネルに限り flex を強制して打ち消す。 */
#barTabPanelSearch > #tabPanelSearch {
    display: flex !important;
}

.bar-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 12px;
}

/* .records-empty は本来 .records-subpanel (position:relative の固定高さコンテナ) 内で
   absolute+inset:0 により中央寄せする想定だが、ボトルタブの直近 position 祖先は
   画面全体を覆う .bar-admin-view (position:fixed) のため、そのままだと
   画面全体に重なってしまう。通常フロー（パネルの flex 縦積み）に置き、
   flex:1 で残り高さいっぱいに広げて画面中央に寄せる。 */
#barTabPanelBottles {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#barAdminEmpty.records-empty {
    position: static;
    inset: auto;
    pointer-events: auto;
    flex: 1;
}

.bar-admin-grid .whisky-card-wrapper {
    position: relative;
}

.bar-admin-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

/* 公開/非公開の切替ピル（マイページと同じトグルスイッチ入り。ラベルごとタップで切替） */
.bar-vis-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gold);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.bar-vis-pill.is-hidden {
    color: var(--text-secondary);
}

/* ピル内はミニサイズのスイッチにする */
.bar-vis-pill .toggle-switch {
    width: 30px;
    height: 18px;
}

.bar-vis-pill .toggle-slider::before {
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
}

.bar-vis-pill .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(12px);
}

.bar-vis-pill:has(input:disabled) {
    opacity: .6;
}

.bar-card-hidden .whisky-card-mini {
    opacity: .5;
}

/* マイページ末尾のログアウト（他セクションのカードと同じ枠・角丸・余白に揃える） */
.bar-logout-btn {
    margin: 32px 0 0;
    max-width: none;
    justify-content: center;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

/* 本体マイページ: dashboard-content はスクロールコンテナ内の一要素になったので
   伸縮させない（flex:1 + min-height:0 のままだと潰れて統計が後続のログアウトに被る） */
#tabPanelDashboard .dashboard-content {
    flex: 0 0 auto;
}

/* 本体マイページ: 統計は「サマリー」と「ランキング」の2ブロックに分かれ、あいだに
   ローディングや飲みたいボトルが挟まるので .dashboard-section + .dashboard-section が
   届かない。先頭（アカウント）以外はセクション間の余白を 24px に揃える */
#dashboardSummary,
#tabPanelDashboard .dashboard-content > .dashboard-section:first-child {
    padding-top: 24px;
}

/* 本体マイページ（旧データタブ）: bar のカードを dashboard-section の幅規約（100% / 600px）に合わせる */
.dashboard-section .bar-status-card {
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    margin-bottom: 0;
}

.mypage-logout-btn {
    margin: 0;
    max-width: 600px;
}

/* ── 店プロフィール編集 / オンボーディング ── */
.bar-ob-lead {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 4px;
    text-align: left;
    line-height: 1.6;
}

/* ── オンボーディング共通 ──────────────────────────── */

/* 初回登録の冒頭に置く説明文。見出し（eyebrow）が画面名、この行が
   「何をするのか」を担う。少し余白を足してフォームと呼吸を分ける */
.ob-lead {
    margin: 6px 0 4px;
    font-size: 13px;
    line-height: 1.7;
    /* 公開URLの補足（.bar-slug-hint）と同じ濃さに揃える */
    color: var(--text-primary);
    text-align: left;
}

/* 初回登録の写真欄。ほかの項目と同じ「ラベル＋中身」の形に揃え、
   丸ボタンの横に何ができるかの一言を添える */
.avatar-item-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.avatar-item-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    /* 公開URLの補足（.bar-slug-hint）と同じ濃さに揃える */
    color: var(--text-primary);
}

.bar-slug-row {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    overflow: hidden;
}

/* 変更できない固定部分。薄いとプレースホルダーに見えて「まだ何も入っていない」
   と誤解されるので、確定済みの文字として通常色で出す */
.bar-slug-row .pfx {
    flex: 0 0 auto;
    padding: 0 2px 0 12px;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
}

.bar-slug-row .edit-input {
    border: none;
    border-radius: 0;
    background: transparent;
    padding-left: 0;
}

.bar-slug-hint {
    font-size: 12px;
    margin: 6px 0 0;
    text-align: left;
}

.bar-slug-hint.slug-ok {
    color: var(--gold) !important;
}

.bar-slug-hint.slug-ng {
    color: #d9534f !important;
}

/* ── 店メニューQRモーダル ── */
#barQrModalBackdrop .edit-modal {
    max-width: 320px;
}

.bar-qr-box {
    width: 196px;
    margin: 6px auto 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.bar-qr-box img,
.bar-qr-box canvas {
    display: block;
    width: 176px !important;
    height: 176px !important;
    margin: 0 auto;
}

.bar-qr-url {
    text-align: center;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: 0 0 14px;
    word-break: break-all;
}

.bar-qr-hint {
    text-align: center;
    font-size: 11.5px;
    color: var(--text-tertiary);
    margin: 10px 0 0;
}

/* ============================================
   一覧の表示モード切替（グリッド ⇄ リスト）
   ============================================ */

/* リスト表示: 2列グリッドを1列の行リストへ（.records-list の !important 上書きに合わせる） */
.records-list.view-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.bar-admin-grid.view-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 行カード: [サムネ] [銘柄] / [★スコア ♡ … 投稿者名(右寄せ)]
   ♡は★スコアの右隣に置き、全リストで位置を揃える（JSがrating行内へ移設する） */
.view-list .whisky-card-mini {
    /* NEWバッジ（absolute）の基準をサムネからカード全体へ移す */
    position: relative;
    flex-direction: row;
    /* info をサムネの高さいっぱいに伸ばし、銘柄名を画像上端・★行を画像下端に揃える */
    align-items: stretch;
    gap: 12px;
    padding: 15px 12px;
}

.view-list .whisky-card-mini-img-wrap {
    position: static;
    width: 48px;
    height: auto;
    flex: 0 0 48px;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    /* overflow:hidden にすると、NEWバッジ（このラッパの子でカード基準に絶対配置）が
       iOS Safari で48pxサムネ枠にクリップされて消える。
       overflow:visible にして角丸クリップは画像/プレースホルダ側に任せる */
    overflow: visible;
}
/* サムネの角丸は中身側でクリップ（ラッパの overflow を外したぶんの代替） */
.view-list .whisky-card-mini-img-wrap img,
.view-list .whisky-card-mini-placeholder {
    border-radius: 8px;
}
/* 48pxサムネでは画像フォーカスの拡大/移動を無効化。overflow:visible の枠から
   拡大画像がはみ出すのを防ぐ（object-fit:cover で枠内にちょうど収まる） */
.view-list .whisky-card-mini-img-wrap img {
    transform: none;
}

.view-list .whisky-card-mini-placeholder {
    font-size: 20px;
}

.view-list .whisky-card-mini-info {
    flex: 1;
    min-width: 0;
    /* 銘柄名を上端・★行を下端に振り分ける（画像の高さ基準） */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
}

.view-list .whisky-card-mini-brand {
    -webkit-line-clamp: 1;
    min-height: 0;
    font-size: 16px;
}

/* サブ情報（種類・産地）はグリッド同様リストでも非表示（銘柄名・★評価の2行に絞る） */
.whisky-card-mini-sub {
    display: none;
}

/* リスト表示のテキストは 銘柄名 / ★スコア＋♡＋所有者名(右寄せ) の2行（フォントサイズはグリッドと共通） */
.view-list .whisky-card-mini-rating {
    margin-top: 0;
}

.view-list .whisky-card-mini-rating .owner-inline {
    font-size: 15px;
}

/* ♡はJSがrating行内（★スコアの右隣）へ移設するので、オーバーレイをやめて通常フローで並べる */
.view-list .whisky-card-mini-like {
    position: static;
    /* ★スコアとの間隔: rating行のgap(4px)だけだと詰まるので少し足す */
    margin-left: 6px;
    width: 30px;
    height: 30px;
    font-size: 13px;
    /* 背景は他のピル(プロフィールのトグル等)と同じ --gold-dim。
       薄い背景なのでしおりは読める濃色に寄せる */
    background: var(--gold-dim);
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--text-secondary);
}
.view-list .whisky-card-mini-like .heart svg { filter: none; }
/* 保存済み: しおりを濃い金に */
.view-list .whisky-card-mini-like.liked {
    color: var(--like-strong);
    background: var(--gold-dim);
}

.view-list .whisky-card-mini-new {
    left: 4px;
    top: 4px;
    font-size: 10px;
    padding: 4px 8px;
}

/* bar管理のリスト表示: 公開/非公開ピルは右下（★スコア・♡と同じ行）。♡は他リスト同様★の右隣 */
.bar-admin-grid.view-list .bar-admin-overlay {
    top: auto;
    right: 12px;
    /* ★行（カード下端から15px・高さ約24px）と上下中央を揃える（ピル高さ約28px） */
    bottom: 13px;
    transform: none;
}

/* ============================================
   「Uisgeに聞く」ボトムシート
   詳細モーダル(z:1500)の上に重ねる。詳細フレームと同じ max-width 480px。
   ============================================ */
.ask-sheet-scrim {
    position: fixed;
    inset: 0;
    background: rgba(26, 22, 15, 0.32);
    z-index: 1550;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.ask-sheet-scrim.open {
    opacity: 1;
    pointer-events: auto;
}
/* キーボード表示中（JS が付与）: iOS の window / visualViewport 更新タイミング差で
   シートが1フレームずれることがあり、半透明スクリムだと背後の詳細画面が
   ちらついて見える。表示中だけ地色のベタ塗りにしてちらつきを見えなくする */
.ask-sheet-scrim.kb-open {
    background: var(--bg-main);
    transition: none;
}

/* 高さはフル（92%）固定。キーボード表示中は JS が bottom/height を
   visualViewport 基準の inline スタイルで補正する。
   閉じるときは visibility の切り替えを transform の完了まで遅らせて、
   ✕ でも下スワイプでも同じスライドアウトが見えるようにする */
.ask-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    max-width: 480px;
    height: 92vh;
    height: 92dvh;
    z-index: 1560;
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.18);
    /* translateY ではなく translate3d。2D transform だと iOS で合成レイヤーに
       ならず、指で引いている間フレームごとに本文の文字が描き直されて
       （サブピクセル位置が変わるたび再ラスタライズされて）文字が揺れて見える */
    transform: translate3d(0, 102%, 0);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.22, 1),
                bottom 0.2s ease,
                visibility 0s linear 0.32s;
    visibility: hidden;
}
.ask-sheet.open {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.22, 1),
                bottom 0.2s ease,
                visibility 0s;
}
/* 指で引いている間はアニメを切って1:1で追従させる（JS が inline transform を更新） */
.ask-sheet.is-dragging,
.ask-sheet-scrim.is-dragging {
    transition: none;
}
/* ドラッグ中はシートと暗幕をそれぞれ独立したレイヤーに固定する。
   同じレイヤーのままだと暗幕の opacity 変化でシート側まで描き直しになる */
.ask-sheet.is-dragging {
    will-change: transform;
}
.ask-sheet-scrim.is-dragging {
    will-change: opacity;
}
/* キーボード表示中（JS が付与）: 高さ・bottom は JS の inline 指定に任せるため
   アニメを切って追従を即時に。ホームインジケーター用の safe-area 余白も
   キーボードの上では不要なので外す（入力欄下の無駄な隙間をなくす） */
.ask-sheet.kb-open {
    transition: none;
}
.ask-sheet.kb-open .ask-sheet-input {
    padding-bottom: 10px;
}
/* キーボード表示中はシートを持ち上げるため、シート下端〜画面下端の間が空く。
   iOSのキーボード上部バー（矢印・自動入力）は半透過で背後が透けるので、
   そこに詳細画面が映り込まないようシート下をアプリ地色で目隠しする */
.ask-sheet.kb-open::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 120vh;
    background: var(--bg-main);
}

/* つまみ: 下スワイプで閉じられることを示す目印。
   ここと見出し行はスクロールしない領域なので、掴めば常にドラッグを開始できる */
.ask-sheet-grabber {
    flex: none;
    display: flex;
    justify-content: center;
    padding: 9px 0 3px;
    touch-action: none;
    cursor: grab;
    /* 掴んだつもりが長押し選択になるのを防ぐ（見出しの銘柄名は選択できるまま） */
    -webkit-user-select: none;
    user-select: none;
}
.ask-sheet-grabber span {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
}

.ask-sheet-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    /* 上はつまみ分だけ詰める（つまみ込みで従来と同じ見出し位置になる） */
    padding: 6px 16px 12px;
    /* 区切り線は引かない。本文側を上端フェードにしたので、線で切りつつ下で
       溶かすと境目の主張が二重になる（上端の共通ルールのフェード側に揃える） */
    touch-action: none;
}
/* 見出し: 銘柄名のみをプレーンな黒文字系で表示（長い銘柄は2行まで許容） */
.ask-sheet-title {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.ask-sheet-close {
    margin-left: auto;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    cursor: pointer;
}

/* 本文はメインチャットと同じ .message 系クラスで描画する（見た目を完全に共通化）。
   .message の scroll-margin-top はチャットタブの上部フローティングUI用なので打ち消す */
.ask-sheet-body {
    flex: 1;
    overflow-y: auto;
    /* 上端フェード（上端の共通ルール）。ここだけバーのオーバーレイ化ではなく
       スクロール領域自身をマスクで抜く方式にしている。見出しの銘柄名が1〜2行で
       高さが変わるので固定の padding-top を置けず、さらに つまみ＋見出し行は
       シートを閉じるドラッグ領域なので、フローから外したくないため。
       見え方は他のフェード画面と同じ（本文が地色へ溶けて消える）。
       padding-top をフェード長と同じにしてあるので、先頭まで戻すと
       フェード帯には余白しか載らず、1通目が薄くならない */
    padding: var(--top-fade) 18px 8px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--top-fade));
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--top-fade));
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 24px;
    -webkit-overflow-scrolling: touch;
}
.ask-sheet-body .message {
    scroll-margin-top: 0;
}

/* サジェスト: モバイル版チャットタブの .suggestion-btn と同じチップ装飾
   （淡ゴールド地・角丸20px・15px）。横並びで横スクロール */
.ask-sheet-suggests {
    flex: none;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 14px 10px;
    scrollbar-width: none;
}
.ask-sheet-suggests::-webkit-scrollbar {
    display: none;
}
.ask-sheet-suggest {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--gold-soft);
    border: none;
    border-radius: 20px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    white-space: nowrap;
}
.ask-sheet-suggest:hover {
    color: var(--gold);
}

/* 入力欄はチャットタブと同じ .input-container を使う（枠・フォーカスリング・
   send-btn 込みで見た目を共通化）。textarea のスタイルは #userInput と共有 */
.ask-sheet-input {
    flex: none;
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-faint);
    background: var(--bg-main);
}

@media (prefers-reduced-motion: reduce) {
    /* .open 側にも transition を書いているので、こちらも同じ詳細度で打ち消す */
    .ask-sheet,
    .ask-sheet.open,
    .ask-sheet-scrim {
        transition: none;
    }
    .ask-sheet-msg.typing span {
        animation: none;
    }
}

/* ============================================
   飲みたいボトル（自分がしおりで保存した他ユーザーのボトル）
   ============================================ */

/* 見出し行: セクションタイトルと「すべて見る」を同じ幅（600px）の中で両端に置く */
.mypage-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 600px;
    margin-bottom: 16px;
}
.mypage-section-head .section-title {
    width: auto;
    margin-bottom: 0;
}
.mypage-section-head .suggest-seeall[hidden] { display: none; }

/* セクション見出しにしおりを添える。カードで押すアイコンと同じ印を出すことで、
   「ここに集まるのはあのボタンで保存したもの」が言葉なしで伝わる */
.section-title-with-icon {
    display: flex;
    align-items: center;
    gap: 7px;
}
.section-title-icon {
    flex: 0 0 auto;
    /* 見出し文字のベースラインに合わせる（アイコンの方が視覚的に重いので少し上げる） */
    margin-top: -2px;
}

/* カルーセルは探すタブの「おすすめの銘柄」と同じ見た目。
   .dashboard-section が中央寄せなので、他セクションと同じ最大幅に合わせる */
.liked-carousel {
    width: 100%;
    max-width: 600px;
}
.liked-carousel[hidden] { display: none; }

/* 0件でもセクションごと消さない（消すと機能の存在に気づけない）。
   空状態は主張しすぎない高さに抑え、探すタブへの導線だけ置く */
.liked-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 600px;
    padding: 22px 16px;
    box-sizing: border-box;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-align: center;
}
.liked-empty[hidden] { display: none; }

.liked-empty-bookmark {
    color: var(--gold);
    opacity: 0.75;
}

.liked-empty-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.liked-empty-btn {
    padding: 8px 20px;
    background: var(--gold-soft);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.liked-empty-btn:active { opacity: 0.7; }



/* しおりを外した直後のカード。その場では消さず薄くして押し直せるようにする
   （消すとリストが飛び、誤タップを取り消せない）。次に開いたときに消える */
.is-unliked .whisky-card-mini {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}
/* 薄くなっても押し直しの的（しおり）だけは通常の濃さを保つ */
.is-unliked .whisky-card-mini-like {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .is-unliked .whisky-card-mini { transition: none; }
}