:root {
    --base-cream: #FCF9F5;
    --lv-brown: #4E3629;
    --lv-tan: #D4A373;
    --brand-orange: #EA580C;
    --accent-emerald: #10B981;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--base-cream);
    color: var(--lv-brown);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    height: 100vh;
    overscroll-behavior-y: none; /* プルトゥリフレッシュを無効化してフリックを保護 */
}

/* 背景：麻の葉（Asanoha）パターン */
.bg-pattern {
    position: fixed; inset: 0; z-index: -1; opacity: 0.04;
    background-image: url('data:image/svg+xml,%3Csvg width="80" height="138" viewBox="0 0 80 138" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M40 0l40 23v46L40 92 0 69V23L40 0zm0 23L13.33 38.33V69L40 84.33 66.67 69V38.33L40 23zM40 0v23m40 0l-26.67 15.33M80 69L53.33 53.67M40 92v-23M0 69l26.67-15.33M0 23l26.67 15.33" stroke="%234E3629" fill="none" stroke-width="1"/%3E%3C/svg%3E');
    background-size: 100px 172.5px;
}

/* 光のオーブ */
.bg-orb {
    position: absolute; border-radius: 50%; filter: blur(120px);
    opacity: 0.15; animation: float 25s infinite alternate ease-in-out; pointer-events: none;
}
.orb-1 { width: 500px; height: 500px; background: var(--brand-orange); top: -200px; right: -100px; }
.orb-2 { width: 400px; height: 400px; background: var(--lv-tan); bottom: -100px; left: -100px; animation-delay: -10s; }

@keyframes float {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, 60px) scale(1.1); }
}

/* カード */
.card-bg-orange {
    background: linear-gradient(145deg, #EA580C, #C2410C);
    box-shadow: 0 20px 40px -10px rgba(234, 88, 12, 0.3);
}

/* スクロールバー非表示（asset-card-wrapper内のcard-panel用） */
.card-panel::-webkit-scrollbar { display: none; }

/* ヘッダーインジケーター */
.indicator-mask {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
    /* マスクで視覚的に消えても、タップは全域で受け付ける */
    pointer-events: auto;
}

/* 画面切り替えアニメーション */
.view {
    /* トランジションはJS側でインラインスタイルとして制御 */
}
.hidden-view {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/* カードラッパー：縦スクロールはブラウザに委譲し、横スワイプはJSで処理 */
#asset-card-wrapper,
#input-card-wrapper {
    touch-action: pan-y;
}

/* カードパネル（スライドアニメーションの舞台） */
.card-panel {
    position: absolute;
    inset: 0;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y; /* 縦スクロールはブラウザ、横スワイプはJSで処理 */
}

/* スライドアニメーション */
@keyframes slide-in-from-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes slide-in-from-left {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes slide-out-to-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
@keyframes slide-out-to-right {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}
.slide-in-right  { animation: slide-in-from-right 0.38s cubic-bezier(0.4, 0, 0.2, 1) both; }
.slide-in-left   { animation: slide-in-from-left  0.38s cubic-bezier(0.4, 0, 0.2, 1) both; }
.slide-out-left  { animation: slide-out-to-left   0.38s cubic-bezier(0.4, 0, 0.2, 1) both; }
.slide-out-right { animation: slide-out-to-right  0.38s cubic-bezier(0.4, 0, 0.2, 1) both; }

/* ガラスボタン */
.glass-btn {
    background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); color: #FFFFFF;
}
/* PCのみホバーで緑（スマホのタップ時に緑が出ないよう hover: hover で限定） */
@media (hover: hover) {
    .glass-btn:hover {
        color: var(--accent-emerald); border-color: var(--accent-emerald);
        background: rgba(255, 255, 255, 0.25); transform: translateY(-2px);
    }
}
.glass-btn:active { transform: scale(0.95); }

/* 録音中アニメーション（赤） — PC・スマホ共通 */
.recording-active {
    border-color: #EF4444 !important;
    color: #EF4444 !important;
    background: rgba(239, 68, 68, 0.15) !important;
    transform: none !important; /* PCホバーの translateY を打ち消す */
    animation: pulse-red 1.5s infinite;
}
@keyframes pulse-red {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70%  { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ドリームコイン */
@keyframes coin-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(216,90,48,0.5), 0 0 35px rgba(216,90,48,0.25); }
    50%       { box-shadow: 0 6px 44px rgba(216,90,48,0.9), 0 0 72px rgba(216,90,48,0.55); }
}
.coin-legend-pulse { animation: coin-pulse 2.5s ease-in-out infinite; }

/* ボトムナビのview切替 */
#nav-go-home { display: none; }
#nav-trash   { display: none; }
/* input（MEMO）: ASSET / FAV / HOME */
#bottom-nav[data-view="input"] #nav-asset    { display: flex !important; }
#bottom-nav[data-view="input"] #nav-memo     { display: none !important; }
#bottom-nav[data-view="input"] #nav-filter   { display: none !important; }
#bottom-nav[data-view="input"] #nav-export   { display: none !important; }
#bottom-nav[data-view="input"] #nav-home     { display: flex !important; }
#bottom-nav[data-view="input"] #nav-logout   { display: none !important; }
#bottom-nav[data-view="input"] #nav-go-home  { display: flex !important; }
/* asset: MEMO / FILTER / EXPORT / HOME */
#bottom-nav[data-view="asset"] #nav-asset    { display: none !important; }
#bottom-nav[data-view="asset"] #nav-memo     { display: flex !important; }
#bottom-nav[data-view="asset"] #nav-filter   { display: flex !important; }
#bottom-nav[data-view="asset"] #nav-export   { display: flex !important; }
#bottom-nav[data-view="asset"] #nav-home     { display: none !important; }
#bottom-nav[data-view="asset"] #nav-logout   { display: none !important; }
#bottom-nav[data-view="asset"] #nav-go-home  { display: flex !important; }
/* onboarding（テーマ選択オーバーレイ）: ASSET / MEMO / LOGOUT / TRASH */
#bottom-nav[data-view="onboarding"] #nav-asset    { display: flex !important; }
#bottom-nav[data-view="onboarding"] #nav-memo     { display: flex !important; }
#bottom-nav[data-view="onboarding"] #nav-filter   { display: none !important; }
#bottom-nav[data-view="onboarding"] #nav-export   { display: none !important; }
#bottom-nav[data-view="onboarding"] #nav-home     { display: none !important; }
#bottom-nav[data-view="onboarding"] #nav-logout   { display: flex !important; }
#bottom-nav[data-view="onboarding"] #nav-go-home  { display: none !important; }
#bottom-nav[data-view="onboarding"] #nav-trash    { display: flex !important; }

/* ボトムナビ */
.glass-ui {
    background: rgba(252, 249, 245, 0.95); backdrop-filter: blur(20px);
    border-top: 1px solid rgba(78, 54, 41, 0.1);
    box-shadow: 0 -10px 30px -10px rgba(78, 54, 41, 0.1);
    transition: all 0.3s ease;
}


/* 案3: 文字アウトライン（背景に干渉しない白抜き文字） */
.card-outline-text {
    color: #fff;
    -webkit-text-stroke: 1.5px rgba(0,0,0,0.85);
    paint-order: stroke fill;
    text-shadow: none;
}

/* メモテキスト折りたたみ */
.line-clamp-text {
    display: -webkit-box; -webkit-line-clamp: 4;
    -webkit-box-orient: vertical; overflow: hidden; transition: all 0.3s ease;
}
.expanded .line-clamp-text { -webkit-line-clamp: unset; }

/* ヘッダー */
header { background: rgba(252, 249, 245, 0.75); backdrop-filter: blur(10px); }

/* ホバー時のみ表示するアイコン */
.hover-actions { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
@media (hover: hover) {
    .group:hover .hover-actions { opacity: 1; pointer-events: auto; }
}
.group.actions-visible .hover-actions { opacity: 1; pointer-events: auto; }

/* オンボーディング */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.onboarding-footer { background: linear-gradient(to top, #FCF9F5 70%, transparent); }

/* ローディングスピナー */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 0.8s linear infinite; }

/* ── 認証オーバーレイ ────────────────────────────────────────────────────── */
#auth-overlay {
    background-color: var(--base-cream);
    overflow-y: auto;
}
.bg-pattern-auth {
    position: fixed; inset: 0; z-index: -1; opacity: 0.04;
    background-image: url('data:image/svg+xml,%3Csvg width="80" height="138" viewBox="0 0 80 138" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M40 0l40 23v46L40 92 0 69V23L40 0zm0 23L13.33 38.33V69L40 84.33 66.67 69V38.33L40 23zM40 0v23m40 0l-26.67 15.33M80 69L53.33 53.67M40 92v-23M0 69l26.67-15.33M0 23l26.67 15.33" stroke="%234E3629" fill="none" stroke-width="1"/%3E%3C/svg%3E');
    background-size: 100px 172.5px;
}
.auth-panel {
    animation: auth-fade-in 0.3s ease both;
}
@keyframes auth-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 並び替えボトムシート */
.sort-item-dragging {
    /* ゴーストクローン用：JS側のインラインスタイルで追加指定 */
    background: #FFF7ED;
    border-radius: 1rem;
}
.sort-item {
    touch-action: none;
    user-select: none;
    transition: opacity 0.15s ease;
}

/* ── テーマカードドラッグ&ドロップ ─────────────────────────────────── */
.theme-card-ghost {
    opacity: 0.35;
    border-radius: 1rem;
    background: #e7e0d8;
}
.theme-card-chosen {
    opacity: 0.9;
    transform: scale(1.04);
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
    z-index: 10;
}