/**
* design-v2.css — 新デザイン「夜空」（2026-09）
* のときだけ読み込まれる。配色は themes.css のトークンに従うので、
* 「クラシック（以前の配色）」等の他テーマでもレイアウトは同じまま色だけ変わる。
* 画像は docs/mockups/parts（ユーザー支給）と docs/mockups/01-home.png からの切り出し。
*/
/* ========== 土台 ========== */
[data-design="v2"] {
--font-display: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
--nav-h: 84px;
--paper-radius: 22px;
--glass-radius: 20px;
--glass-bg: rgba(28, 26, 74, 0.55);
--glass-border: rgba(255, 255, 255, 0.14);
--glass-shadow: 0 8px 24px rgba(8, 6, 30, 0.28);
--v2-orange: #E8632A;
--v2-orange-deep: #D4501C;
--v2-peach: #F7A98A;
--v2-lavender: #BDA8F5;
--v2-white: #F7F3FF;
/* ガラス面の上の文字・線・塗り（ライト系テーマでは下で暗色に切り替える） */
--on-glass: #FFFFFF;
--on-glass-soft: rgba(247,243,255,0.86);
--on-glass-muted: rgba(247,243,255,0.66);
--heading-color: #F7E9D0;
--heading-alt: #E7DCCD;
--fill-glass: rgba(255,255,255,0.08);
--fill-glass-strong: rgba(255,255,255,0.15);
--line-glass: rgba(255,255,255,0.18);
--text-glow: 0 1px 8px rgba(10,8,40,0.6);
--heading-glow: 0 0 18px rgba(246,197,106,0.35), 0 2px 14px rgba(10,8,40,0.5);
--nav-active: #F9B08A;
--ok-green: #7ED9A0;
/* 紙の上のアクセント文字（夜空＝橙、ダーク系＝明るいアクセント、ライト系＝濃いアクセント） */
--paper-accent: var(--color-primary);
--num-accent: var(--v2-peach);
--pill-bg: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.55));
--pill-border: rgba(214,170,100,0.38);
--advice-panel: linear-gradient(180deg, #F3ECFA 0%, #FBEBE2 100%);
--advice-panel-text: #3B2F5C;
--modal-glass: linear-gradient(180deg, rgba(64,56,132,0.94) 0%, rgba(34,29,86,0.96) 100%);
/* テーマ別の固定背景（夜空の写真をテーマ色に染めたもの） */
--v2-bg: url('../img/design/bg-night.jpg?v=20260918c');
--v2-bg-color: #2F2946; /* bg-night.jpg の下端の色（引っぱったときに続きに見える） */
}
/* ダーク系（クラシック含む）: 紙が暗いのでアクセント文字は明るい色、白いピルは半透明に */
[data-design="v2"][data-theme="midnight"], [data-design="v2"][data-theme="ruby"], [data-design="v2"][data-theme="sapphire"], [data-design="v2"][data-theme="emerald"],
[data-design="v2"][data-theme="sunset"], [data-design="v2"][data-theme="rose"], [data-design="v2"][data-theme="gold"], [data-design="v2"][data-theme="mono"] {
--glass-bg: rgba(var(--surface-rgb, 28, 26, 74), 0.6);
--paper-accent: var(--color-accent-light);
--num-accent: var(--color-accent-light);
--pill-bg: rgba(255,255,255,0.07);
--pill-border: rgba(255,255,255,0.14);
--advice-panel: rgba(255,255,255,0.06);
--advice-panel-text: var(--color-text-primary);
--modal-glass: linear-gradient(180deg, rgba(var(--surface-rgb), 0.95) 0%, rgba(var(--surface-rgb), 0.98) 100%);
--v2-bg-color: var(--color-bg-primary);
}
[data-design="v2"][data-theme="midnight"] { --v2-bg: linear-gradient(rgba(6,8,20,0.45), rgba(6,8,20,0.45)), url('../img/yumelog_background.webp'); }
[data-design="v2"][data-theme="ruby"] { --v2-bg: url('../img/design/bg-night-ruby.jpg?v=20260919a'); }
[data-design="v2"][data-theme="sapphire"] { --v2-bg: url('../img/design/bg-night-sapphire.jpg?v=20260919a'); }
[data-design="v2"][data-theme="emerald"] { --v2-bg: url('../img/design/bg-night-emerald.jpg?v=20260919a'); }
[data-design="v2"][data-theme="sunset"] { --v2-bg: url('../img/design/bg-night-sunset.jpg?v=20260919a'); }
[data-design="v2"][data-theme="rose"] { --v2-bg: url('../img/design/bg-night-rose.jpg?v=20260919a'); }
[data-design="v2"][data-theme="gold"] { --v2-bg: url('../img/design/bg-night-gold.jpg?v=20260919a'); }
[data-design="v2"][data-theme="mono"] { --v2-bg: url('../img/design/bg-night-mono.jpg?v=20260919a'); }
/* ライト系: ガラスは白、文字は濃色、光り物は落ち着かせる */
[data-design="v2"][data-theme="lavender"], [data-design="v2"][data-theme="sakura"], [data-design="v2"][data-theme="mint"], [data-design="v2"][data-theme="sky"],
[data-design="v2"][data-theme="cream"], [data-design="v2"][data-theme="pearl"], [data-design="v2"][data-theme="coral"], [data-design="v2"][data-theme="lilac"] {
--glass-bg: rgba(255,255,255,0.74);
--glass-border: rgba(0,0,0,0.08);
--glass-shadow: 0 8px 24px rgba(60,50,90,0.12);
--on-glass: var(--color-text-primary);
--on-glass-soft: var(--color-text-secondary);
--on-glass-muted: var(--color-text-muted);
--heading-color: var(--color-text-primary);
--heading-alt: var(--color-text-primary);
--fill-glass: rgba(0,0,0,0.05);
--fill-glass-strong: rgba(0,0,0,0.09);
--line-glass: rgba(0,0,0,0.12);
--text-glow: none;
--heading-glow: none;
--nav-active: var(--color-primary);
--ok-green: #2E7D32;
--gold: #A8801C;
--gold-soft: #D9B65A;
--v2-peach: #C2531F;
--v2-lavender: #6B4FC8;
--v2-white: var(--color-text-primary);
--paper-accent: var(--color-primary);
--num-accent: var(--color-primary);
--pill-bg: rgba(255,255,255,0.85);
--pill-border: rgba(0,0,0,0.08);
--modal-glass: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(250,248,255,0.98) 100%);
--v2-bg-color: var(--color-bg-primary);
}
[data-design="v2"][data-theme="lavender"] { --v2-bg: url('../img/design/bg-night-lavender.jpg?v=20260919a'); }
[data-design="v2"][data-theme="sakura"] { --v2-bg: url('../img/design/bg-night-sakura.jpg?v=20260919a'); }
[data-design="v2"][data-theme="mint"] { --v2-bg: url('../img/design/bg-night-mint.jpg?v=20260919a'); }
[data-design="v2"][data-theme="sky"] { --v2-bg: url('../img/design/bg-night-sky.jpg?v=20260919a'); }
[data-design="v2"][data-theme="cream"] { --v2-bg: url('../img/design/bg-night-cream.jpg?v=20260919a'); }
[data-design="v2"][data-theme="pearl"] { --v2-bg: url('../img/design/bg-night-pearl.jpg?v=20260919a'); }
[data-design="v2"][data-theme="coral"] { --v2-bg: url('../img/design/bg-night-coral.jpg?v=20260919a'); }
[data-design="v2"][data-theme="lilac"] { --v2-bg: url('../img/design/bg-night-lilac.jpg?v=20260919a'); }
/* フォント設定（きせかえ）: 既定は「見出し＝明朝（ゆめ）／本文＝まる」。別の書体を選んだら見出しもその書体に揃える */
[data-design="v2"][data-font="zenmaru"] { --font-display: 'Zen Maru Gothic', 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif; }
[data-design="v2"][data-font="kiwi"] { --font-display: 'Kiwi Maru', 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif; }
[data-design="v2"][data-font="klee"] { --font-display: 'Klee One', 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif; }
[data-design="v2"][data-font="shippori"] { --font-display: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; }
[data-design="v2"][data-font] h1, [data-design="v2"][data-font] h2 { letter-spacing: 0.01em; }
[data-design="v2"] { background: var(--v2-bg-color, var(--color-bg-primary)); overscroll-behavior-y: none; } /* iOS の引っぱり（ラバーバンド）で見える地の色を、背景画像の下端に合わせる */
[data-design="v2"] body {
background: var(--color-bg-gradient) no-repeat;
background-size: 100% 100%;
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 100vh;
min-height: 100svh; /* 大きい方の vh だと短いページまでツールバー分だけスクロールできてしまう */
padding-bottom: calc(var(--nav-h) + 16px);
position: relative;
}
/* 夜空テーマ: 支給の全画面イラスト（月・雲・城と湖）を固定背景に。右寄せで月を見出しの右側に置く */
[data-design="v2"] body { background: transparent; } /* html の背景の上、本文の下に ::before を置く */
[data-design="v2"] body::before {
content: '';
position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none;
background: var(--v2-bg-color); background-image: var(--v2-bg); background-position: 100% 100%; background-size: cover; background-repeat: no-repeat;
}
[data-design="v2"] body::after { display: none; } /* 旧デザインの背景画像（style.css の body::after）は使わない */
/* プランを選ぶ: 湖と城の夜景（モックアップ 08-checkout.png） */
[data-theme="starry"][data-design="v2"] body.page-checkout::before { background-image: linear-gradient(180deg, rgba(18,16,48,0.28) 0%, rgba(18,16,48,0.34) 45%, rgba(18,16,48,0.5) 100%), url('../img/design/bg-night-lake.jpg?v=20260918g'); background-position: center bottom; }
/* マイページ・きせかえ: 同じ湖の夜景を少し暗めに */
[data-theme="starry"][data-design="v2"] body.page-mypage::before, [data-theme="starry"][data-design="v2"] body.page-appearance::before { background-image: linear-gradient(180deg, rgba(14,12,40,0.42) 0%, rgba(14,12,40,0.5) 45%, rgba(14,12,40,0.62) 100%), url('../img/design/bg-night-lake.jpg?v=20260918g'); background-position: center bottom; }
[data-design="v2"] .sky-decor { display: none; }
[data-design="v2"], [data-design="v2"] body { overflow-x: clip; } /* hidden だと iOS Safari がスクロール挙動を変える（固定ナビが浮く）ので clip */
[data-design="v2"] .main-content { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 4px 16px 24px; }
[data-design="v2"] .main-content > * { position: relative; }
[data-design="v2"] .main-content > .modal { position: fixed; } /* main の中に書かれたモーダル（診断の確認・レポート・規約など）は上の指定で relative にならないように */
/* ========== アプリヘッダー ========== */
[data-design="v2"] .app-header {
position: relative; top: auto; z-index: 2; max-width: 560px; margin: 0 auto; background: transparent; border: none; box-shadow: none;
display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 2px;
padding-top: calc(12px + env(safe-area-inset-top, 0px)); /* ホーム画面に追加した PWA ではステータスバーの下まで背景画像を描く（black-translucent）ので、その分だけ下げて見た目の位置は変えない */
}
[data-design="v2"] .app-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--on-glass); }
[data-design="v2"] .app-brand-moon {
width: 46px; height: 42px; flex: none;
background: url('../img/design/brand-moon.webp?v=20260918c') center / contain no-repeat;
}
[data-design="v2"] .app-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
[data-design="v2"] .app-brand-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.02em; text-shadow: 0 2px 12px rgba(10,8,40,0.5); }
[data-design="v2"] .app-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2px rgba(246,197,106,0.35), 0 0 18px rgba(246,197,106,0.3); }
[data-design="v2"] .app-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-design="v2"] .app-header-back { padding-bottom: 0; }
[data-design="v2"] .app-back { color: var(--on-glass); text-decoration: none; font-size: 16px; font-family: var(--font-display); letter-spacing: 0.05em; padding: 6px 0; }
[data-design="v2"] .back-nav-btn { display: none; }
/* ========== ボトムナビ ========== */
[data-design="v2"] .bottom-nav {
position: fixed; left: 0; right: 0; bottom: 0; margin: 0; width: 100%; max-width: none; z-index: 100; transform: none;
background: rgba(22, 19, 56, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: none; border-top: 1px solid rgba(255,255,255,0.13); border-radius: 0; box-shadow: 0 -6px 24px rgba(8,6,30,0.35);
height: var(--nav-h); box-sizing: border-box; padding: 8px 4px 0; /* 高さは固定。safe-area で伸縮させると Safari のツールバー開閉のたびにナビが持ち上がる */
}
/* ナビは bottom:0 に固定する。以前は top: calc(100svh − ナビ高) で置いていたが、Safari のツールバーが隠れると
ナビの下に隙間ができ、それを埋めていた ::after の帯（pointer-events:auto）が下のボタンを覆って押せなくなっていた（2026-09-22 修正）。
ホーム画面に追加した PWA（ツールバーなし）ではホームバー分だけ safe-area で高くする */
@media (display-mode: standalone) {
[data-design="v2"] .bottom-nav { height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
[data-design="v2"] body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px); }
}
[data-theme="lavender"][data-design="v2"] .bottom-nav, [data-theme="sakura"][data-design="v2"] .bottom-nav, [data-theme="mint"][data-design="v2"] .bottom-nav,
[data-theme="sky"][data-design="v2"] .bottom-nav, [data-theme="cream"][data-design="v2"] .bottom-nav, [data-theme="pearl"][data-design="v2"] .bottom-nav,
[data-theme="coral"][data-design="v2"] .bottom-nav, [data-theme="lilac"][data-design="v2"] .bottom-nav { background: rgba(255,255,255,0.9); border-color: rgba(0,0,0,0.08); }
[data-design="v2"] .bottom-nav-content { display: flex; justify-content: space-around; align-items: flex-end; max-width: 560px; margin: 0 auto; }
[data-design="v2"] .bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; text-decoration: none; color: var(--color-text-primary); padding: 2px 4px 4px; min-width: 60px; max-width: none; min-height: 0; position: relative; border: none; }
[data-design="v2"] .bottom-nav .nav-item-diary { border-left: none; border-right: none; }
[data-design="v2"] .bottom-nav .nav-item-diary .nav-label { font-size: 11px; color: var(--color-text-primary); }
[data-design="v2"] .bottom-nav .nav-icon-img { width: 36px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); transition: transform .2s; }
[data-design="v2"] .bottom-nav .nav-item.active .nav-icon-img { transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 0 10px rgba(var(--color-accent-rgb), 0.7)); }
[data-design="v2"] .bottom-nav .nav-label { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
[data-design="v2"] .bottom-nav .nav-item.active .nav-label { color: var(--nav-active); }
[data-design="v2"] .bottom-nav .nav-item.active::after { content: ''; position: absolute; bottom: -5px; width: 22px; height: 3px; border-radius: 3px; background: var(--color-accent-light); box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.8); }
/**
* design-v2.css — 新デザイン「夜空」（2026-09）
* のときだけ読み込まれる。配色は themes.css のトークンに従うので、
* 「クラシック（以前の配色）」等の他テーマでもレイアウトは同じまま色だけ変わる。
*/
/* ========== 見出し ========== */
[data-design="v2"] h1, [data-design="v2"] h2, [data-design="v2"] .font-display { font-family: var(--font-display); letter-spacing: 0.02em; }
[data-design="v2"] .page-header {
display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px;
padding: 6px 0 18px; margin: 0; text-align: left;
}
[data-design="v2"] .page-header h1 {
font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.25;
color: var(--color-text-primary); text-shadow: var(--text-glow);
display: flex; align-items: center; gap: 10px; margin: 0;
}
[data-design="v2"] .page-header h1 .page-title-icon { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); }
[data-design="v2"] .page-header .page-sub { grid-column: 1 / -1; font-size: 13px; color: var(--color-text-secondary); margin-top: 6px; line-height: 1.7; }
[data-design="v2"] .page-tagline {
font-family: var(--font-display); font-size: 12px; line-height: 1.75; color: var(--color-text-secondary);
text-align: right; white-space: pre-line; padding-top: 8px; position: relative; padding-bottom: 12px;
}
[data-design="v2"] .page-tagline::after { content: ''; position: absolute; right: 0; bottom: 0; width: 34px; height: 1px; background: var(--gold); opacity: 0.8; }
/* 区切りの飾り（見出し右の線） */
[data-design="v2"] .section-title {
display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 20px; font-weight: 700;
color: var(--color-text-primary); margin: 0 0 14px;
}
[data-design="v2"] .section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); opacity: 0.7; }
[data-design="v2"] .section-title .section-note { flex: none; font-family: inherit; font-size: 11px; font-weight: 400; color: var(--color-text-secondary); line-height: 1.6; text-align: right; white-space: pre-line; }
/* ========== 面（紙とガラス） ========== */
[data-design="v2"] .paper, [data-design="v2"] .card.paper {
background: var(--surface-paper); color: var(--paper-text);
border: 1px solid var(--paper-border); border-radius: var(--paper-radius); box-shadow: var(--paper-shadow);
}
[data-design="v2"] .paper h1, [data-design="v2"] .paper h2, [data-design="v2"] .paper h3, [data-design="v2"] .paper h4 { color: var(--paper-text); }
[data-design="v2"] .paper p, [data-design="v2"] .paper .text-muted { color: var(--paper-text-secondary); }
[data-design="v2"] .paper .muted { color: var(--paper-text-muted); }
[data-design="v2"] .glass, [data-design="v2"] .card {
background: var(--surface-card); color: var(--color-text-primary);
border: 1px solid var(--border-soft); border-radius: var(--glass-radius);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px var(--inset-glass);
}
[data-design="v2"] .card { padding: 18px; }
/* ========== ボタン ========== */
[data-design="v2"] .btn { border-radius: 16px; font-weight: 700; letter-spacing: 0.02em; transition: transform .15s, box-shadow .15s, filter .15s; }
[data-design="v2"] .btn-primary, [data-design="v2"] .cta-orange {
background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 60%, var(--color-accent-dark) 100%);
color: var(--color-on-primary); border: none; box-shadow: 0 8px 22px rgba(var(--color-primary-rgb), 0.38), 0 1px 0 rgba(255,255,255,0.25) inset;
}
[data-design="v2"] .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
[data-design="v2"] .btn-secondary {
background: transparent; color: var(--color-text-primary); border: 1.5px solid rgba(var(--color-accent-rgb), 0.55);
}
[data-design="v2"] .paper .btn-secondary { color: var(--paper-text); border-color: rgba(var(--color-primary-rgb), 0.5); }
[data-design="v2"] .btn-text { color: var(--color-text-secondary); }
[data-design="v2"] .paper .btn-text { color: var(--paper-text-secondary); }
[data-design="v2"] .pill-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px;
background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary)); color: #fff; text-decoration: none; font-weight: 700;
box-shadow: 0 8px 22px rgba(var(--color-primary-rgb), 0.38);
}
/* ========== 小物 ========== */
[data-design="v2"] .orn { color: var(--gold); }
[data-design="v2"] .tag-gold { display: inline-block; font-size: 11px; font-weight: 700; color: #3B2F5C; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); border-radius: 999px; padding: 3px 12px; }
[data-design="v2"] .progress-track { height: 8px; border-radius: 99px; background: var(--fill-glass); overflow: hidden; }
[data-design="v2"] .paper .progress-track { background: rgba(59,47,92,0.12); }
[data-design="v2"] .progress-track > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--color-accent-soft), var(--color-accent-light)); }
[data-design="v2"] .footer-scene { height: 120px; }
[data-design="v2"] .hidden { display: none !important; }
/* ========== 新デザインのお知らせ ========== */
[data-design="v2"] .design-notice-modal { align-items: center; justify-content: center; }
[data-design="v2"] .design-notice { max-width: 380px; width: calc(100% - 32px); padding: 22px 22px 18px; text-align: center; }
[data-design="v2"] .design-notice-art { width: 140px; height: 140px; margin: 0 auto 6px; background: url('../img/design/moon-cat.webp?v=20260918a') center / contain no-repeat; }
[data-design="v2"] .design-notice h3 { font-family: var(--font-display); font-size: 19px; margin: 0 0 8px; }
[data-design="v2"] .design-notice p { font-size: 13px; line-height: 1.8; margin: 0 0 16px; }
[data-design="v2"] .design-notice-actions { display: grid; gap: 8px; }
[data-design="v2"] .design-notice-note { font-size: 11px; color: var(--paper-text-muted); margin: 4px 0 0; }
/* 修正: モーダルの紙面とボタン（modal.css より強く） */
[data-design="v2"] .modal .modal-content.paper { background: var(--surface-paper); color: var(--paper-text); border: 1px solid var(--paper-border); box-shadow: var(--paper-shadow); }
[data-design="v2"] .modal .btn-primary { background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 60%, var(--color-accent-dark) 100%); color: #fff; border: none; box-shadow: 0 8px 22px rgba(var(--color-primary-rgb), 0.38); }
[data-design="v2"] .modal .paper .btn-secondary { color: var(--paper-text); border: 1.5px solid rgba(var(--color-primary-rgb), 0.5); background: transparent; }
/* ホームの利用状況: 連続記録タイルはマイページに任せて非表示（モックアップに合わせ3枚に） */
[data-design="v2"] .usage-item:has(.usage-streak) { display: none; }
/* マイページ: 元の矢印は隠し、::after の › だけにする */
[data-design="v2"] .mp-menu-arrow { display: none; }
[data-design="v2"] .mp-menu-item-label { flex: 1; }
/* ========== 共通: 他ページの見出しとリンクカード ========== */
[data-design="v2"] .cross-link-card {
display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0 0 14px; text-decoration: none; color: var(--color-text-primary);
background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--glass-radius); backdrop-filter: blur(10px);
}
[data-design="v2"] .cross-link-card img, [data-design="v2"] .cross-link-icon { width: 44px; height: 44px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35)); }
[data-design="v2"] .cross-link-title { font-size: 15px; font-weight: 700; }
[data-design="v2"] .cross-link-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
[data-design="v2"] .cross-link-card::after { content: '›'; margin-left: auto; font-size: 22px; color: var(--color-text-muted); }
[data-design="v2"] .tabs, [data-design="v2"] .community-tabs, [data-design="v2"] .cycle-toggle {
display: flex; gap: 6px; padding: 5px; margin: 0 0 14px; background: var(--fill-glass); border: 1px solid var(--border-soft); border-radius: 999px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
[data-design="v2"] .tab-btn, [data-design="v2"] .community-tab, [data-design="v2"] .cycle-btn {
flex: 1 0 auto; padding: 9px 14px; border-radius: 999px; border: none; background: transparent; color: var(--color-text-secondary); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
[data-design="v2"] .tab-btn.active, [data-design="v2"] .community-tab.active, [data-design="v2"] .cycle-btn.active { background: var(--surface-paper-solid); color: var(--paper-text); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
[data-design="v2"] .tab-btn-premium .premium-crown { margin-right: 4px; }
[data-design="v2"] .sort-chips { display: flex; gap: 8px; margin: 0 0 14px; }
[data-design="v2"] .sort-chip { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line-glass); background: transparent; color: var(--color-text-secondary); font-size: 12px; font-weight: 600; }
[data-design="v2"] .sort-chip.active { background: var(--surface-paper-solid); color: var(--paper-text); border-color: transparent; }
/* ========== 見出し（共通の調整） ========== */
/* ホーム以外は図鑑と同じ配置: 中央の「アイコン＋見出し」＋中央の説明文。右上の添え書き（tagline）はホームだけ */
[data-design="v2"] .page-header-v2 { display: block; padding: 10px 0 16px; text-align: center; }
[data-design="v2"] .page-header-v2 h1 .page-title-icon { overflow: visible; }
[data-design="v2"] .page-header-v2 h1 { font-size: clamp(22px, 7.4vw, 30px); gap: 8px; justify-content: center; white-space: nowrap; color: var(--heading-color); text-shadow: var(--heading-glow); }
[data-design="v2"] .page-header-v2[data-page="analysis"] h1, [data-design="v2"] .page-header-v2[data-page="fortune"] h1 { color: var(--heading-alt); }
[data-design="v2"] .page-header-v2 h1 .page-title-icon { width: 44px; height: 44px; filter: drop-shadow(0 0 10px rgba(246,197,106,0.35)); }
[data-design="v2"] .page-header-v2[data-page="analysis"] h1 .page-title-icon { width: 58px; height: 58px; object-fit: contain; }
[data-design="v2"] .page-header-v2[data-page="fortune"] h1 .page-title-icon { width: 54px; height: 54px; }
[data-design="v2"] .page-header-v2 .page-tagline, [data-design="v2"] .page-header-v2 .page-tagline-left { display: none; }
[data-design="v2"] .page-header-v2 .page-sub { font-family: var(--font-display); font-size: 14px; color: var(--on-glass-soft); letter-spacing: 0.04em; margin: 6px 0 0; line-height: 1.7; text-align: center; text-shadow: var(--text-glow); }
[data-design="v2"] .home-page .current-date { color: var(--heading-color) !important; }
[data-design="v2"] .app-brand-name { color: var(--heading-color); }
[data-design="v2"] #fortuneHistory h3, [data-design="v2"] .mp-menu-title, [data-design="v2"] .kc-card h3, [data-design="v2"] .home-page .calendar-month-header h3 { color: var(--heading-color) !important; }
/* プラン選択だけ説明文の下に金の飾り線 */
[data-design="v2"] .page-header-v2[data-page="checkout"] .page-sub::after { content: '—— ✦ ——'; display: block; font-size: 11px; color: var(--gold); opacity: 0.8; margin-top: 8px; letter-spacing: 0.2em; }
/* 戻るヘッダーのページ: 見出しを「〈 戻る」の下に置く */
[data-design="v2"] .app-header-back { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: 14px 16px; max-width: 560px; margin: 0 auto; }
[data-design="v2"] .app-header-back + .main-content, [data-design="v2"] .app-header-back ~ .main-content { padding-top: 16px; }
[data-design="v2"] .app-header-back ~ .main-content .page-header-v2 { padding-top: 38px; }
/* ========== 共通: リンクカード ========== */
[data-design="v2"] .cross-link-card { padding: 14px 16px; gap: 14px; box-shadow: var(--glass-shadow); background: var(--glass-bg); border-color: var(--glass-border); }
[data-design="v2"] .cross-link-card img, [data-design="v2"] .cross-link-icon { width: 52px !important; height: 52px !important; }
[data-design="v2"] .fortune-page .cross-link-card { padding: 16px 14px 16px 122px; min-height: 100px; position: relative; overflow: hidden; background: var(--glass-bg); }
[data-design="v2"] .fortune-page .cross-link-card > * { position: relative; }
[data-design="v2"] .fortune-page .cross-link-card img { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 104px !important; height: 96px !important; object-fit: contain; filter: drop-shadow(0 0 12px rgba(246,197,106,0.45)); }
[data-design="v2"] .fortune-page .cross-link-card .cross-link-title { font-size: 19px; white-space: nowrap; }
[data-design="v2"] .fortune-page .cross-link-card .cross-link-desc { font-size: 13.5px; line-height: 1.6; margin-top: 4px; }
[data-design="v2"] .cross-link-title { font-family: var(--font-display); font-size: 16px; color: var(--heading-alt); }
[data-design="v2"] .cross-link-desc { font-size: 12px; color: var(--on-glass-soft); }
[data-design="v2"] .cross-link-card::after { color: var(--on-glass-soft); }
/* ========== 夢タイプ診断 — docs/mockups/02-analysis.png ========== */
[data-design="v2"] #analysisExecuteArea.card { background: var(--glass-bg); color: var(--color-text-primary); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: var(--glass-radius); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 16px 18px; margin-bottom: 14px; }
[data-design="v2"] #analysisExecuteArea h3, [data-design="v2"] #analysisExecuteArea h4 { color: var(--on-glass); font-family: var(--font-display); }
[data-design="v2"] #analysisExecuteArea p { color: var(--on-glass-soft); }
[data-design="v2"] .analysis-diary-shortage { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 0; }
[data-design="v2"] .analysis-diary-shortage::before { content: ''; width: 56px; height: 52px; background: url('../img/design/book-open.webp?v=20260918d') center / contain no-repeat; }
[data-design="v2"] .analysis-diary-shortage p { margin: 0; font-size: 14px; font-weight: 700; color: var(--on-glass); }
[data-design="v2"] .analysis-diary-shortage p strong { color: var(--gold); }
[data-design="v2"] .analysis-diary-shortage .shortage-sub { font-size: 11px; font-weight: 400; color: var(--on-glass-soft); margin-top: 3px; }
[data-design="v2"] .analysis-diary-shortage .btn { background: linear-gradient(135deg, #FBD9C0, #F6C4A6); color: #7A4A2A; border: none; border-radius: 12px; padding: 12px 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
[data-design="v2"] #analysisExecuteArea .btn-primary { max-width: none; border-radius: 16px; margin-top: 10px; }
[data-design="v2"] #analysisExecuteArea p[style] { color: var(--on-glass-soft) !important; }
[data-design="v2"] #analysisExecuteArea .analysis-ready-title { font-size: 15px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 4px; }
[data-design="v2"] #analysisExecuteArea .analysis-ready-sub { font-size: 12px; color: var(--color-text-secondary); margin: 0; }
[data-design="v2"] .analysis-result.card { background: none; border: none; box-shadow: none; padding: 0; }
[data-design="v2"] .analysis-main, [data-design="v2"] .analysis-summary, [data-design="v2"] .analysis-advice, [data-design="v2"] .analysis-share {
background: var(--surface-paper); color: var(--paper-text); border: 1px solid rgba(255,255,255,0.7); border-radius: var(--paper-radius); box-shadow: var(--paper-shadow); padding: 18px 16px; margin: 0 0 14px; position: relative; overflow: hidden;
}
[data-design="v2"] .analysis-main::before, [data-design="v2"] .analysis-main::after { content: ''; position: absolute; background: url('../img/design/sparkle.webp?v=20260918d') center / contain no-repeat; opacity: 0.95; pointer-events: none; }
[data-design="v2"] .analysis-main::before { left: 12px; top: 40px; width: 30px; height: 30px; } [data-design="v2"] .analysis-main::after { right: 14px; top: 34px; width: 24px; height: 24px; }
[data-design="v2"] .analysis-main { padding: 20px 16px 16px; }
[data-design="v2"] .analysis-header h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--paper-text); display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; }
[data-design="v2"] .analysis-header .icon-inline { width: 34px; height: 34px; object-fit: contain; }
[data-design="v2"] .analysis-period { display: block; text-align: center; font-size: 12px; color: var(--paper-text-secondary); margin-top: 4px; }
[data-design="v2"] .analysis-dream-type { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 14px; align-items: center; margin: 14px 0 10px; padding: 0; background: none; border: none; border-radius: 0; text-align: left; }
[data-design="v2"] .dtype-image { width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: none; margin: 0; border-radius: 50%; overflow: hidden; border: 2px solid #E6C58F; box-shadow: 0 0 0 3px var(--surface-paper-solid), 0 0 0 4px rgba(214,170,100,0.6), 0 8px 20px rgba(59,47,92,0.18); background: #2a2158; align-self: center; display: block; font-size: 0; }
[data-design="v2"] .dtype-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-design="v2"] .dtype-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[data-design="v2"] .dtype-label { font-size: 12px; color: var(--paper-text-secondary); }
[data-design="v2"] .dtype-name { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--paper-text); line-height: 1.3; }
[data-design="v2"] .dtype-name span { color: var(--paper-accent); }
[data-design="v2"] .dtype-name .dtype-adj { display: block; font-size: 22px; line-height: 1.3; }
[data-design="v2"] .dtype-name .dtype-animal { display: block; color: var(--paper-accent); font-size: 28px; line-height: 1.25; }
[data-design="v2"] .dtype-category { font-family: var(--font-display); font-size: 15px; color: var(--paper-text); padding-bottom: 10px; border-bottom: 1px solid rgba(59,47,92,0.14); }
[data-design="v2"] .dtype-desc { font-size: 12.5px; line-height: 1.75; color: var(--paper-text); margin: 6px 0 0; }
[data-design="v2"] .dtype-detail-toggle { background: none; border: none; color: var(--paper-text-secondary); font-size: 12px; padding: 6px 0 0; text-align: left; cursor: pointer; white-space: nowrap; }
[data-design="v2"] .dtype-detail-body { grid-column: 1 / -1; }
[data-design="v2"] .dtype-score-tag { display: inline-block; font-size: 11px; background: rgba(59,47,92,0.08); color: var(--paper-text); border-radius: 999px; padding: 4px 10px; margin: 0 4px 6px 0; }
[data-design="v2"] .dtype-meta { font-size: 11px; color: var(--paper-text-muted); }
/* 指標メーター: 目盛り付きの軌道に金の星が灯る。タップで説明を開く */
[data-design="v2"] .analysis-scores { background: none; border: none; padding: 0; margin-top: 12px; display: grid; gap: 8px; }
[data-design="v2"] .score-item {
display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; grid-template-areas: 'label value chev' 'bar bar bar' 'desc desc desc'; align-items: center; column-gap: 8px; row-gap: 7px;
margin: 0; padding: 10px 14px 12px 14px; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent;
background: var(--pill-bg); border: 1px solid var(--pill-border); border-radius: 18px;
box-shadow: 0 2px 10px rgba(59,47,92,0.07), 0 0 0 1px rgba(255,255,255,0.7) inset; transition: box-shadow .2s, border-color .2s;
}
[data-design="v2"] .score-item:hover, [data-design="v2"] .score-item.open { border-color: rgba(214,170,100,0.75); box-shadow: 0 4px 16px rgba(59,47,92,0.12), 0 0 0 1px rgba(255,255,255,0.7) inset; }
[data-design="v2"] .score-item::after { content: '›'; grid-area: chev; justify-self: end; font-size: 18px; line-height: 1; color: var(--paper-text-muted); transform: rotate(90deg); transition: transform .25s; }
[data-design="v2"] .score-item.open::after { transform: rotate(-90deg); }
[data-design="v2"] .score-label { grid-area: label; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--paper-text); white-space: nowrap; letter-spacing: 0.02em; }
[data-design="v2"] .score-label::before { content: '✦'; font-size: 11px; line-height: 1; color: var(--color-primary); text-shadow: 0 0 6px rgba(var(--color-primary-rgb),0.45); }
[data-design="v2"] .score-item[data-type="happiness"] .score-label::before { color: #E8A62A; text-shadow: 0 0 6px rgba(232,166,42,0.5); }
[data-design="v2"] .score-item[data-type="energy"] .score-label::before { color: #E8632A; }
[data-design="v2"] .score-item[data-type="social"] .score-label::before { color: #5B7BE0; text-shadow: 0 0 6px rgba(91,123,224,0.5); }
[data-design="v2"] .score-item[data-type="creativity"] .score-label::before { color: #9A6BE0; text-shadow: 0 0 6px rgba(154,107,224,0.5); }
[data-design="v2"] .score-bar {
grid-area: bar; position: relative; height: 10px; border-radius: 99px; overflow: visible; background: rgba(59,47,92,0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(59,47,92,0.12) inset;
}
[data-design="v2"] .score-bar::before { content: ''; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: linear-gradient(90deg, rgba(59,47,92,0.18) 1.5px, transparent 1.5px) 0 0 / 25% 100% repeat-x; opacity: 0.9; }
[data-design="v2"] .score-bar > div, [data-design="v2"] .score-fill, [data-design="v2"] .score-bar-fill {
position: relative; height: 100%; min-width: 10px; border-radius: 99px; overflow: visible; box-shadow: 0 0 10px rgba(246,197,106,0.35); transition: width .9s cubic-bezier(.2,.8,.2,1);
background: linear-gradient(90deg, #F5B48A, #EE6B3A 70%, #E23F3F);
}
[data-design="v2"] .score-bar > .score-fill { background: linear-gradient(90deg, #F5B48A, #EE6B3A 70%, #E23F3F); }
[data-design="v2"] .score-fill::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 60%); }
[data-design="v2"] .score-fill::after {
content: ''; position: absolute; right: -11px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
background: url('../img/design/sparkle.webp?v=20260918d') center / contain no-repeat; filter: drop-shadow(0 0 5px rgba(246,197,106,0.95)); animation: v2-star-twinkle 2.6s ease-in-out infinite;
}
@keyframes v2-star-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(0.78) rotate(25deg); opacity: 0.8; } }
[data-design="v2"] .score-bar > .stress-fill { background: linear-gradient(90deg, #F5B48A, #EE6B3A 70%, #E23F3F); }
[data-design="v2"] .score-bar > .happiness-fill { background: linear-gradient(90deg, #F9DC9E, #F3B04C 70%, #E8912A); }
[data-design="v2"] .score-bar > .energy-fill { background: linear-gradient(90deg, #FBC6A6, #F28A5A 70%, #E8632A); }
[data-design="v2"] .score-bar > .social-fill { background: linear-gradient(90deg, #CDBEFF, #8FA4F2 70%, #5B7BE0); box-shadow: 0 0 10px rgba(91,123,224,0.35); }
[data-design="v2"] .score-bar > .creativity-fill { background: linear-gradient(90deg, #D7BDF7, #B592F0 70%, #9A6BE0); box-shadow: 0 0 10px rgba(154,107,224,0.35); }
[data-design="v2"] .score-value { grid-area: value; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--paper-accent); text-align: right; line-height: 1; }
[data-design="v2"] .score-desc { grid-area: desc; display: none; margin-top: 3px; padding: 10px 12px; border-radius: 12px; background: rgba(59,47,92,0.045); border: 1px dashed rgba(214,170,100,0.55); font-size: 12px; line-height: 1.8; color: var(--paper-text); text-align: left; cursor: default; }
[data-design="v2"] .score-item.open .score-desc { display: block; animation: v2-fade-in .25s ease; }
@keyframes v2-fade-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
[data-design="v2"] .score-desc .score-level { display: inline-block; font-family: var(--font-display); font-weight: 700; color: var(--paper-accent); margin-right: 6px; }
[data-design="v2"] .score-desc .score-reason { margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid rgba(59,47,92,0.12); background: none; border-radius: 0; font-size: 12px; line-height: 1.8; color: var(--paper-text-secondary); }
[data-design="v2"] .score-desc .score-reason::before { content: 'あなたの夢では： '; font-weight: 700; color: var(--paper-text); }
/* ロックされた指標: ガラスの案内カード */
[data-design="v2"] .locked-scores { position: relative; margin: 0 0 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 16px 16px 16px 104px; min-height: 120px; }
[data-design="v2"] .locked-scores::before { content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 80px; height: 80px; background: url('../img/design/book-closed.webp?v=20260918d') center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(246,197,106,0.4)); }
[data-design="v2"] .locked-score-blur { display: none; }
[data-design="v2"] .locked-scores::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--img-scene) right center / cover no-repeat; opacity: 0.3; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 72%); mask-image: linear-gradient(90deg, transparent 30%, #000 72%); pointer-events: none; z-index: 0; }
[data-design="v2"] .locked-scores > * { position: relative; z-index: 1; }
[data-design="v2"] .locked-overlay { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; padding: 0; opacity: 1; }
[data-design="v2"] .locked-overlay .locked-icon { display: none; }
[data-design="v2"] .locked-overlay .locked-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--on-glass); margin: 0; line-height: 1.5; }
[data-design="v2"] .locked-overlay .locked-sub { font-size: 11px; color: var(--on-glass-soft); margin: 0; }
[data-design="v2"] .locked-overlay p { max-width: none; }
/* 診断結果カードの中に置いたときは紙の上なので少し濃く */
[data-design="v2"] .analysis-main .locked-scores { margin: 12px 0 0; }
[data-design="v2"] .locked-overlay .btn { margin-top: 6px; border-radius: 999px; padding: 11px 22px; font-size: 13px; background: linear-gradient(135deg, var(--color-primary-hover), var(--color-accent-dark)); box-shadow: 0 8px 20px rgba(var(--color-primary-rgb),0.35); }
/* 総合診断 / アドバイス / シェア */
[data-design="v2"] .analysis-summary h3, [data-design="v2"] .analysis-advice h3, [data-design="v2"] .share-label { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--paper-text); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
[data-design="v2"] .analysis-summary h3::before, [data-design="v2"] .analysis-advice h3::before, [data-design="v2"] .share-label::before { content: ''; width: 30px; height: 30px; flex: none; background: center / contain no-repeat; }
[data-design="v2"] .analysis-summary h3::before { background-image: url('../img/design/icon-moon.webp?v=20260918d'); }
[data-design="v2"] .analysis-advice h3::before { background-image: url('../img/design/icon-lamp.webp?v=20260918d'); }
[data-design="v2"] .share-label::before { background-image: url('../img/design/icon-share.webp?v=20260918d'); }
[data-design="v2"] .analysis-summary::after, [data-design="v2"] .analysis-advice::after { position: absolute; right: 18px; top: 14px; font-family: 'Shippori Mincho', serif; font-style: italic; font-size: 16px; color: rgba(var(--color-primary-rgb),0.35); letter-spacing: 0.08em; }
[data-design="v2"] .analysis-summary::after { content: 'Diagnosis'; } [data-design="v2"] .analysis-advice::after { content: 'Advice'; }
[data-design="v2"] .analysis-advice.advice-locked { background: var(--glass-bg); color: var(--color-text-primary); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-design="v2"] .analysis-advice.advice-locked h3 { color: var(--on-glass); }
[data-design="v2"] .analysis-advice.advice-locked::after { color: rgba(246,197,106,0.5); }
[data-design="v2"] .analysis-summary p, [data-design="v2"] .analysis-advice p { font-size: 14px; line-height: 1.95; color: var(--paper-text); margin: 0; }
[data-design="v2"] .analysis-summary p + p, [data-design="v2"] .analysis-advice p + p { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(214,170,100,0.35); }
[data-design="v2"] .advice-blur-wrap { position: relative; min-height: 164px; border-radius: 16px; overflow: hidden; background: var(--advice-panel); border: 1px solid rgba(214,170,100,0.3); }
[data-design="v2"] .advice-blur-wrap::before { content: ''; position: absolute; inset: 0; background: var(--img-scene) center 35% / cover no-repeat; opacity: 0.3; filter: saturate(0.9); pointer-events: none; }
[data-design="v2"] .advice-blur-wrap::after { content: ''; position: absolute; right: 12px; top: 10px; width: 26px; height: 26px; background: url('../img/design/sparkle.webp?v=20260918d') center / contain no-repeat; opacity: 0.9; pointer-events: none; }
[data-design="v2"] .advice-blur-text { filter: blur(5px); opacity: 0.35; position: relative; color: var(--advice-panel-text); }
[data-design="v2"] .advice-locked-overlay { position: absolute; inset: 0; z-index: 1; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
[data-design="v2"] .advice-locked-overlay p { font-size: 12px; color: var(--advice-panel-text); line-height: 1.7; }
[data-design="v2"] .advice-locked-overlay .btn { border-radius: 999px; padding: 11px 28px; font-size: 14px; background: linear-gradient(135deg, var(--color-primary-hover), var(--color-accent-dark)); box-shadow: 0 8px 20px rgba(var(--color-primary-rgb),0.35); }
[data-design="v2"] .analysis-share { text-align: left; }
[data-design="v2"] .analysis-share .share-label { margin-bottom: 2px; }
[data-design="v2"] .analysis-share .share-label::after { content: 'あなたの夢タイプをシェアしてみましょう'; display: block; width: 100%; font-family: var(--font-family); font-size: 12px; font-weight: 400; color: var(--paper-text-secondary); margin: 0 0 4px 38px; flex-basis: 100%; }
[data-design="v2"] .analysis-share .share-label { flex-wrap: wrap; }
[data-design="v2"] .share-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; max-width: none; }
[data-design="v2"] .share-btns button, [data-design="v2"] .share-btns a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; overflow: hidden; border: none; border-radius: 999px; padding: 13px 2px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: 0; }
[data-design="v2"] .share-btns svg { width: 13px; height: 13px; flex: none; }
[data-design="v2"] .share-btn-x { background: #111; } [data-design="v2"] .share-btn-line { background: #06C755; } [data-design="v2"] .share-btn-fb { background: #1877F2; } [data-design="v2"] .share-btn-email { background: linear-gradient(135deg, var(--color-primary-hover), var(--color-accent-dark)); }
[data-design="v2"] .analysis-cooldown-badge { text-align: center; font-size: 12px; color: var(--on-glass-soft); margin-bottom: 14px; }
[data-design="v2"] .collapsible-section { margin-top: 0; }
[data-design="v2"] .collapsible-toggle { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface-paper); color: var(--paper-text); border: 1px solid rgba(255,255,255,0.7); border-radius: var(--paper-radius); box-shadow: var(--paper-shadow); padding: 16px 16px; font-size: 15px; font-weight: 700; font-family: var(--font-display); }
[data-design="v2"] .collapsible-toggle::before { content: ''; width: 36px; height: 36px; flex: none; background: url('../img/design/icon-parchment.webp?v=20260918d') center / contain no-repeat; }
[data-design="v2"] .collapsible-toggle::after { content: 'これまでの診断結果を確認できます'; font-family: var(--font-family); font-size: 11px; font-weight: 400; color: var(--paper-text-secondary); margin-left: 48px; }
[data-design="v2"] .collapsible-toggle { flex-wrap: wrap; row-gap: 2px; text-decoration: none; cursor: pointer; }
[data-design="v2"] .collapsible-toggle .collapsible-arrow { margin-left: auto; color: var(--paper-text-secondary); font-size: 22px; line-height: 1; transition: transform .2s; transform: none; }
[data-design="v2"] .collapsible-toggle[aria-expanded="true"] .collapsible-arrow { transform: rotate(180deg); }
[data-design="v2"] .collapsible-body { padding-top: 12px; }
/* 診断履歴・レポート（別ページ） */
[data-design="v2"] .history-page h4, [data-design="v2"] #analysisHistorySection h4 { color: var(--heading-color) !important; font-family: var(--font-display); font-size: 15px !important; margin: 0 0 8px; }
[data-design="v2"] .trend-chart-wrap { background: var(--surface-paper); border: 1px solid rgba(255,255,255,0.7); border-radius: 16px; padding: 14px; margin: 0 0 12px; box-shadow: var(--paper-shadow); }
[data-design="v2"] .trend-chart-wrap.hidden { display: none; }
[data-design="v2"] .trend-chart-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--paper-text); margin-bottom: 6px; }
[data-design="v2"] .trend-chart { display: block; width: 100%; height: 170px; }
[data-design="v2"] .history-page .history-date, [data-design="v2"] .history-page .history-period, [data-design="v2"] #analysisHistorySection .history-date, [data-design="v2"] #analysisHistorySection .history-period { color: var(--paper-text-secondary); }
[data-design="v2"] .history-page .history-item, [data-design="v2"] #analysisHistorySection .history-item { cursor: pointer; position: relative; padding: 14px 40px 14px 16px; overflow: hidden; }
[data-design="v2"] .history-page .history-item.has-art, [data-design="v2"] #analysisHistorySection .history-item.has-art { padding-right: 112px; min-height: 104px; }
[data-design="v2"] .history-page .history-art, [data-design="v2"] #analysisHistorySection .history-art { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%); mask-image: linear-gradient(90deg, transparent 0%, #000 50%); pointer-events: none; }
[data-design="v2"] .history-page .history-item.has-art > *:not(.history-art), [data-design="v2"] #analysisHistorySection .history-item.has-art > *:not(.history-art) { position: relative; z-index: 1; }
[data-design="v2"] .history-page .history-item::after, [data-design="v2"] #analysisHistorySection .history-item::after { content: '›'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--paper-text-muted); }
[data-design="v2"] .history-page .history-date, [data-design="v2"] #analysisHistorySection .history-date { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--paper-text); }
[data-design="v2"] .history-page .history-type, [data-design="v2"] #analysisHistorySection .history-type { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--paper-accent); margin: 0 0 6px; }
[data-design="v2"] .history-page .history-period, [data-design="v2"] #analysisHistorySection .history-period { font-size: 12px; margin: 2px 0 8px; }
[data-design="v2"] .history-page .history-scores, [data-design="v2"] #analysisHistorySection .history-scores { display: flex; flex-wrap: wrap; gap: 6px; }
[data-design="v2"] .history-page #reportsSection, [data-design="v2"] #analysisHistorySection #reportsSection { margin-top: 22px !important; }
[data-design="v2"] .history-page #analysisResultCard { margin-bottom: 18px; }
[data-design="v2"] .history-page .history-empty { text-align: center; font-family: var(--font-display); color: var(--on-glass-soft); padding: 30px 0; }
[data-design="v2"] .collapsible-toggle .collapsible-arrow + * { display: none; }
[data-design="v2"] .collapsible-body { padding-top: 10px; }
[data-design="v2"] .history-item { background: var(--surface-paper); border: 1px solid rgba(255,255,255,0.7); border-radius: 16px; padding: 12px 14px; margin-top: 8px; color: var(--paper-text); box-shadow: var(--paper-shadow); }
[data-design="v2"] .collapsible-body .history-date, [data-design="v2"] .collapsible-body .history-period { color: var(--paper-text-secondary); }
[data-design="v2"] .collapsible-body h4 { color: var(--heading-color) !important; font-family: var(--font-display); font-size: 15px !important; }
[data-design="v2"] .score-chip { background: rgba(59,47,92,0.08); color: var(--paper-text); border-radius: 999px; padding: 2px 10px; font-size: 11px; }
/* ========== 夢占い — docs/mockups/03-fortune.png ========== */
[data-design="v2"] .card:has(#fortuneDiarySelect) {
background: var(--surface-paper); color: var(--paper-text); border: 1px solid rgba(255,255,255,0.7); box-shadow: var(--paper-shadow); border-radius: var(--paper-radius);
padding: 20px 18px 18px; position: relative; overflow: hidden; margin-bottom: 14px;
}
[data-design="v2"] .card:has(#fortuneDiarySelect)::after { content: ''; position: absolute; z-index: 1; right: 6px; top: 4px; width: 86px; height: 86px; background: url('../img/design/crystal-ball.webp?v=20260918d') center / contain no-repeat; filter: drop-shadow(0 6px 14px rgba(120,80,160,0.35)); pointer-events: none; }
[data-design="v2"] .card:has(#fortuneDiarySelect)::before { content: ''; position: absolute; z-index: 2; right: 88px; top: 8px; width: 22px; height: 22px; background: url('../img/design/sparkle.webp?v=20260918d') center / contain no-repeat; }
[data-design="v2"] .card:has(#fortuneDiarySelect) h3::before { content: ''; width: 26px; height: 26px; background: url('../img/design/sparkle.webp?v=20260918d') center / contain no-repeat; }
[data-design="v2"] .card:has(#fortuneDiarySelect) > * { position: relative; z-index: 1; }
[data-design="v2"] .fortune-scene { position: absolute !important; z-index: 0 !important; right: 0; top: 0; bottom: 0; width: 64%; background: var(--img-scene) center right / cover no-repeat; opacity: 0.32; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); pointer-events: none; }
[data-design="v2"] .card:has(#fortuneDiarySelect) h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--paper-text); margin: 0 0 14px; padding-right: 92px; min-height: 72px; display: flex; align-items: center; gap: 8px; }
[data-design="v2"] .card:has(#fortuneDiarySelect) .form-group, [data-design="v2"] .card:has(#fortuneDiarySelect) .btn-row { max-width: none; }
[data-design="v2"] .card:has(#fortuneDiarySelect) .form-group { margin-bottom: 12px; }
[data-design="v2"] .card:has(#fortuneDiarySelect) select { width: 100%; background: #fff; color: #3B2F5C; -webkit-text-fill-color: #3B2F5C; border: 1px solid rgba(59,47,92,0.25); border-radius: 12px; padding: 15px 14px; font-size: 16px; }
[data-design="v2"] .card:has(#fortuneDiarySelect) select option.opt-done { color: #9A8FB8; }
[data-design="v2"] .card:has(#fortuneDiarySelect) select optgroup { color: #6E6488; font-size: 13px; }
/* 背景を白に固定しているので、文字色もテーマに関わらず濃い色に固定（暗いテーマでは --paper-text が明るい色になり読めなくなる） */
[data-design="v2"] .card:has(#fortuneDiarySelect) select option { color: #3B2F5C; background: #fff; }
[data-design="v2"] .card:has(#fortuneDiarySelect) .btn-primary { width: 100%; border-radius: 14px; padding: 16px 10px; font-size: 17px; font-weight: 700; background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 45%, var(--color-accent-dark) 100%); box-shadow: 0 8px 20px rgba(var(--color-primary-rgb),0.35); color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
[data-design="v2"] .card:has(#fortuneDiarySelect) .btn-primary::after { content: '›'; font-size: 20px; margin-left: 4px; }
[data-design="v2"] .card:has(#fortuneDiarySelect) .btn-primary:disabled { opacity: 0.55; }
[data-design="v2"] .card:has(#fortuneDiarySelect) .btn-primary img { display: none; }
[data-design="v2"] .card:has(#fortuneDiarySelect) .btn-primary::before { content: ''; width: 22px; height: 22px; background: url('../img/design/sparkle.webp?v=20260918d') center / contain no-repeat; }
[data-design="v2"] #fortuneRemaining { font-size: 12px !important; color: var(--paper-text-secondary) !important; text-align: center; margin-top: 10px !important; }
[data-design="v2"] #fortuneExhaustedBanner { background: var(--surface-paper) !important; color: var(--paper-text); border: 1px solid rgba(255,255,255,0.7) !important; border-radius: var(--paper-radius); box-shadow: var(--paper-shadow); }
[data-design="v2"] #fortuneExhaustedBanner p { color: var(--paper-text) !important; }
[data-design="v2"] #fortuneExhaustedBanner img { display: none !important; }
[data-design="v2"] .fortune-result.card { background: var(--surface-paper); color: var(--paper-text); border: 1px solid rgba(255,255,255,0.7); box-shadow: var(--paper-shadow); border-radius: var(--paper-radius); margin-bottom: 14px; }
[data-design="v2"] .fortune-result h2, [data-design="v2"] .fortune-result h3, [data-design="v2"] .fortune-title { font-family: var(--font-display); color: var(--paper-text); }
[data-design="v2"] .fortune-overall { text-align: center; padding: 10px 0 14px; }
[data-design="v2"] .fortune-overall .fortune-value, [data-design="v2"] .fortune-overall strong { font-family: var(--font-display); font-size: 40px; color: var(--paper-accent); }
[data-design="v2"] .fortune-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--fill-glass-strong); border-radius: 14px; margin-bottom: 8px; }
[data-design="v2"] .fortune-item-label { font-size: 12px; color: var(--paper-text-secondary); }
[data-design="v2"] .fortune-item-value { font-weight: 700; color: var(--paper-text); }
[data-design="v2"] .fortune-lucky { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
[data-design="v2"] .lucky-item { background: var(--fill-glass-strong); border-radius: 14px; padding: 12px; text-align: center; }
[data-design="v2"] .lucky-label { font-size: 11px; color: var(--paper-text-secondary); }
[data-design="v2"] .lucky-value { font-weight: 700; color: var(--paper-accent); font-size: 15px; }
[data-design="v2"] .fortune-message { background: var(--fill-glass-strong); border-radius: 14px; padding: 14px; font-size: 14px; line-height: 1.9; color: var(--paper-text); }
[data-design="v2"] .fortune-result .share-label { color: var(--paper-text) !important; }
[data-design="v2"] #fortuneHistory { margin-top: 22px; }
[data-design="v2"] #fortuneHistory h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--on-glass); display: flex; align-items: center; gap: 10px; margin: 0 0 8px; text-shadow: 0 2px 12px rgba(10,8,40,0.5); }
[data-design="v2"] #fortuneHistory h3::before { content: ''; width: 36px; height: 34px; flex: none; background: url('../img/design/brand-moon.webp?v=20260918d') center / contain no-repeat; }
[data-design="v2"] #fortuneHistory h3 .section-title-text { position: relative; padding-right: 36px; white-space: nowrap; flex: none; }
[data-design="v2"] #fortuneHistory h3 .section-title-text::after { content: ''; position: absolute; right: 0; bottom: 6px; width: 30px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
[data-design="v2"] #fortuneHistory h3 .section-note { margin-left: auto; font-size: 10px; font-weight: 400; color: var(--on-glass-soft); letter-spacing: 0; text-align: right; line-height: 1.5; white-space: nowrap; }
[data-design="v2"] #fortuneHistoryList .text-muted { color: var(--on-glass-muted); text-align: center; padding: 20px 0; }
[data-design="v2"] #fortuneHistoryList .history-item {
background: var(--surface-paper); color: var(--paper-text); border: 1px solid rgba(255,255,255,0.7); border-radius: 20px; padding: 16px 44px 16px 18px; margin-top: 12px; box-shadow: var(--paper-shadow);
display: grid; grid-template-columns: 1fr; gap: 6px; align-items: start; cursor: pointer; position: relative; overflow: hidden; min-height: 112px;
}
[data-design="v2"] #fortuneHistoryList .history-date { font-size: 13px; color: var(--paper-text-secondary); position: relative; z-index: 1; }
[data-design="v2"] #fortuneHistoryList .history-preview { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--paper-text); line-height: 1.6; position: relative; z-index: 1; max-width: 62%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-design="v2"] #fortuneHistoryList .history-badge { justify-self: start; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--paper-accent); background: none; padding: 0; display: flex; align-items: center; gap: 6px; position: relative; z-index: 1; }
[data-design="v2"] #fortuneHistoryList .rank-best .history-badge { color: var(--paper-accent); }
[data-design="v2"] #fortuneHistoryList .rank-mild .history-badge { color: var(--paper-accent); opacity: 0.8; }
[data-design="v2"] #fortuneHistoryList .history-badge img { display: none; }
[data-design="v2"] #fortuneHistoryList .history-badge::before { content: ''; width: 24px; height: 24px; background: url('../img/design/icon-moon.webp?v=20260918d') center / contain no-repeat; }
[data-design="v2"] #fortuneHistoryList .history-thumb { position: absolute; right: 0; top: 0; bottom: 0; width: 48%; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); border-radius: 0 20px 20px 0; }
[data-design="v2"] #fortuneHistoryList .history-item::after { content: '›'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 24px; color: #FFFFFF; text-shadow: 0 1px 6px rgba(0,0,0,0.6); z-index: 1; }
/* ========== 夢の図鑑 — docs/mockups/04-dictionary.png ========== */
[data-design="v2"] .dictionary-progress, [data-design="v2"] .card:has(#progressFill) { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); padding: 14px 16px 14px; margin-bottom: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-design="v2"] .progress-text { font-family: var(--font-display); font-size: 12px; color: var(--on-glass); display: flex; gap: 4px; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
[data-design="v2"] .progress-text > span:not(.progress-premium) { font-size: 18px; font-weight: 700; color: var(--gold); }
[data-design="v2"] .progress-text #totalCount, [data-design="v2"] .progress-text #premiumTotalCount { font-size: 13px; color: var(--on-glass); font-weight: 500; }
[data-design="v2"] .progress-premium { display: inline-flex; align-items: baseline; gap: 4px; flex: none; padding: 0; border: none; margin: 0 0 0 6px; }
[data-design="v2"] .progress-premium::before { content: '＋'; font-size: 13px; color: var(--on-glass-soft); margin-right: 2px; }
[data-design="v2"] .progress-premium .premium-crown { font-size: 0; width: 18px; height: 15px; background: url('../img/design/crown.webp?v=20260918d') center / contain no-repeat; align-self: center; }
[data-design="v2"] .progress-premium .progress-premium-label { font-size: 13px; }
[data-design="v2"] .progress-premium > span:not(.premium-crown):not(.progress-premium-label) { font-size: 18px; font-weight: 700; color: var(--gold); }
[data-design="v2"] .progress-bar { height: 8px; border-radius: 99px; background: var(--fill-glass); overflow: hidden; margin-top: 10px; }
[data-design="v2"] .progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-accent-soft), var(--color-accent-light)); border-radius: 99px; }
[data-design="v2"] .tabs { display: flex; gap: 2px; padding: 4px; margin: 0 0 12px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; overflow: visible; }
[data-design="v2"] .tab-btn { flex: 1 1 auto; min-width: 0; padding: 8px 4px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--on-glass); font-size: 11.5px; letter-spacing: 0; white-space: nowrap; }
[data-design="v2"] .tab-btn.active { background: var(--surface-paper-solid); color: var(--paper-text); border-color: transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
[data-design="v2"] .tab-btn.active::before { content: none; }
[data-design="v2"] .tab-btn-premium { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; color: var(--gold); border-color: rgba(246,197,106,0.5); padding-left: 3px; padding-right: 5px; }
[data-design="v2"] .tab-btn-premium.active { color: var(--paper-text); }
[data-design="v2"] .tab-btn-premium .premium-crown { font-size: 0; display: inline-block; width: 14px; height: 11px; background: url('../img/design/crown.webp?v=20260918d') center / contain no-repeat; margin-right: 2px; vertical-align: -1px; }
[data-design="v2"] .dictionary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
[data-design="v2"] .dict-item { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 10px 3px 8px; text-align: center; cursor: pointer; box-shadow: none; }
[data-design="v2"] .dict-item:hover { transform: none; box-shadow: var(--glass-shadow); }
[data-design="v2"] .dict-item.acquired { border-color: var(--glass-border); }
[data-design="v2"] .dict-img-wrap { width: 46px; height: 46px; margin: 0 auto 6px; border-radius: 50%; overflow: hidden; border: none; background: none; box-shadow: none; }
[data-design="v2"] .dict-item.acquired .dict-img-wrap { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(246,197,106,0.5); background: #2a2158; }
[data-design="v2"] .dict-img-wrap img { width: 100%; height: 100%; object-fit: cover; filter: none; }
[data-design="v2"] .dict-item:not(.acquired) .dict-img-wrap { background: url('../img/design/orb-locked.webp?v=20260918d') center / 112% no-repeat; }
[data-design="v2"] .dict-item:not(.acquired) .dict-img-wrap img { display: none; }
[data-design="v2"] .dict-item-premium:not(.acquired) .dict-img-wrap { background-image: url('../img/design/orb-gold.webp?v=20260918d'); }
[data-design="v2"] .dict-name { font-size: 11px; font-weight: 600; color: var(--on-glass); line-height: 1.3; }
[data-design="v2"] .dict-item:not(.acquired) .dict-name { color: var(--on-glass-soft); }
[data-design="v2"] .dict-category { font-size: 9px; color: var(--on-glass-muted); margin-top: 1px; }
[data-design="v2"] .dict-lock { position: absolute; top: 6px; right: 6px; font-size: 9px; opacity: 0.9; background: rgba(20,18,50,0.7); border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
[data-design="v2"] .dict-premium-badge { position: absolute; top: -7px; left: 4px; font-size: 9px; font-weight: 700; color: #3B2F5C; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); border-radius: 999px; padding: 2px 7px; z-index: 1; }
[data-design="v2"] .dict-item-premium { border-color: rgba(246,197,106,0.5); background: var(--premium-item-bg); }
/* 未取得の限定は詳細でも中身を見せない（金の玉のまま） */
[data-design="v2"] .dict-detail-premium .dict-detail-img.locked { background: url('../img/design/orb-gold.webp?v=20260918d') center / 112% no-repeat; border-color: rgba(246,197,106,0.5); }
[data-design="v2"] .dict-detail-premium .dict-detail-img.locked img { display: none; }
[data-design="v2"] .dict-item-premium.acquired { background: var(--premium-item-bg); }
/* スマホ幅は3列（アイテムを大きく） */
@media (max-width: 480px) {
[data-design="v2"] .dictionary-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
[data-design="v2"] .dict-item { padding: 12px 4px 10px; border-radius: 16px; }
[data-design="v2"] .dict-img-wrap { width: 66px; height: 66px; margin-bottom: 8px; }
[data-design="v2"] .dict-name { font-size: 12.5px; }
[data-design="v2"] .dict-category { font-size: 10px; }
[data-design="v2"] .dict-premium-badge { font-size: 10px; padding: 2px 8px; }
}
/* ========== みんなの夢 — docs/mockups/05-community.png ========== */
[data-design="v2"] .page-header-v2[data-page="community"] h1 span::after { content: '✦'; color: var(--gold); font-size: 16px; margin-left: 8px; vertical-align: 10px; }
[data-design="v2"] .page-header-v2[data-page="community"] .page-sub::after { content: '日記は、自分で選んだものだけが公開されます'; display: block; font-size: 12px; margin-top: 4px; }
[data-design="v2"] .community-tabs { background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 5px; gap: 0; margin-bottom: 12px; }
[data-design="v2"] .community-tab { flex: 1; padding: 12px 10px; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--on-glass); }
[data-design="v2"] .community-tab.active { background: linear-gradient(135deg, #FBE7D6, #F7D3BE); color: #6B3A1F; }
[data-design="v2"] .sort-chips { position: relative; margin: 0 0 14px; padding-right: 150px; }
[data-design="v2"] .sort-chips::after { content: 'どんな夢にも\Aきっと、意味がある'; white-space: pre; position: absolute; right: 0; top: -2px; font-family: var(--font-display); font-size: 11px; line-height: 1.7; color: var(--on-glass-soft); text-align: left; padding-left: 20px; background: url('../img/design/sparkle.webp?v=20260918d') left 6px / 14px no-repeat; }
[data-design="v2"] .sort-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--on-glass); white-space: nowrap; cursor: pointer; }
[data-design="v2"] .sort-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary); }
[data-design="v2"] .sort-chip { flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; border: 1px solid var(--line-glass); background: var(--glass-bg); color: var(--on-glass); font-size: 12.5px; font-weight: 700; }
[data-design="v2"] .sort-chip.active { background: linear-gradient(135deg, #FBE7D6, #F7D3BE); color: #6B3A1F; border-color: transparent; }
[data-design="v2"] .post-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); padding: 16px; margin-bottom: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--on-glass); }
[data-design="v2"] .post-header { display: grid; grid-template-columns: 46px 1fr auto; grid-auto-rows: min-content; column-gap: 12px; row-gap: 2px; align-items: center; margin-bottom: 12px; }
[data-design="v2"] .post-author { display: contents; }
[data-design="v2"] .post-author .avatar-wrap, [data-design="v2"] .post-author .author-avatar { grid-column: 1; grid-row: 1 / span 2; }
[data-design="v2"] .post-author .author-name { grid-column: 2; grid-row: 1; }
[data-design="v2"] .post-author .plan-badge-inline { grid-column: 3; grid-row: 1; }
[data-design="v2"] .post-header .post-date { grid-column: 2; grid-row: 2; }
[data-design="v2"] .post-header .post-rank, [data-design="v2"] .post-header .friends-only-badge { grid-column: 3; grid-row: 2; }
[data-design="v2"] .post-moon { display: none; }
[data-design="v2"] .post-author .avatar-wrap { width: 46px !important; height: 46px !important; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(246,197,106,0.35); flex: none; }
[data-design="v2"] .post-author .avatar-img { width: 100%; height: 100%; object-fit: cover; }
[data-design="v2"] .author-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--on-glass); }
[data-design="v2"] .post-header .post-date { margin-left: 0; font-size: 12px; color: var(--on-glass-soft); }
[data-design="v2"] .post-diary-date { font-family: var(--font-display); font-size: 14px; color: var(--on-glass); display: flex; align-items: center; gap: 6px; position: relative; }
[data-design="v2"] .post-diary-date::before { content: ''; width: 18px; height: 18px; background: url('../img/design/brand-moon.webp?v=20260918d') center / contain no-repeat; }
[data-design="v2"] .post-more-btn { margin-left: auto; background: none; border: none; color: var(--on-glass-soft); font-size: 22px; line-height: 1; padding: 0 4px; }
[data-design="v2"] .post-more-menu { background: var(--surface-card-solid); border: 1px solid var(--glass-border); border-radius: 12px; }
[data-design="v2"] .post-content { font-size: 15px; line-height: 1.9; margin: 8px 0 12px; color: var(--on-glass); }
[data-design="v2"] .expand-btn { color: var(--color-accent-light); font-size: 13px; padding: 0; margin: -6px 0 10px; }
[data-design="v2"] .post-footer { display: block; }
[data-design="v2"] .reactions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
[data-design="v2"] .reaction-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 4px; border-radius: 999px; border: 1px solid var(--line-glass); background: var(--fill-glass); color: var(--on-glass); font-size: 12px; font-weight: 600; min-width: 0; }
[data-design="v2"] .reaction-img { width: 22px; height: 22px; object-fit: contain; flex: none; }
[data-design="v2"] .reaction-btn.active { background: linear-gradient(135deg, #FBE7D6, #F7D3BE); color: #6B3A1F; border-color: transparent; box-shadow: 0 0 0 1px rgba(246,197,106,0.6), 0 0 12px rgba(246,197,106,0.35); }
[data-design="v2"] .reaction-btn .reaction-count { color: var(--paper-accent); font-weight: 700; font-family: var(--font-display); font-size: 14px; }
[data-design="v2"] .community-fab { position: fixed; right: 16px; bottom: calc(var(--nav-h) + 20px); z-index: 90; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 14px 22px; background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 45%, var(--color-accent-dark) 100%); color: #fff; border: none; font-size: 15px; font-weight: 700; box-shadow: 0 10px 24px rgba(var(--color-primary-rgb),0.45); }
[data-design="v2"] .community-fab .fab-icon { font-size: 18px; }
[data-design="v2"] .pagination .text-muted { color: var(--on-glass-muted); }
[data-design="v2"] .empty-state { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); padding: 28px 16px; text-align: center; color: var(--on-glass); }
[data-design="v2"] .plan-badge-inline { font-size: 10px; }
/* ========== マイページ — docs/mockups/06-mypage.png ========== */
[data-design="v2"] .mp-overview { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-bottom: 14px; }
[data-design="v2"] .mp-avatar { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(246,197,106,0.35), 0 0 18px rgba(246,197,106,0.3); background: none; flex: none; }
[data-design="v2"] .mp-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; }
[data-design="v2"] .mp-nickname { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--on-glass); }
[data-design="v2"] .mp-email { font-family: var(--font-display); font-size: 13px; color: var(--on-glass-soft); }
[data-design="v2"] .mp-plan-tag { border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--on-glass) !important; background: var(--fill-glass) !important; }
[data-design="v2"] .mp-upgrade { display: block; position: relative; text-align: left; background: var(--surface-paper); color: var(--paper-text); border: 1px solid rgba(255,255,255,0.7); border-radius: var(--paper-radius); box-shadow: var(--paper-shadow); padding: 14px 14px 14px 41%; min-height: 0; margin: 0 0 14px; overflow: hidden; }
[data-design="v2"] .mp-upgrade > * { position: relative; z-index: 1; }
[data-design="v2"] .mp-upgrade::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 42%; background: var(--img-upgrade) 40% center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%); mask-image: linear-gradient(90deg, #000 62%, transparent 100%); pointer-events: none; }
[data-design="v2"] .mp-upgrade-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--paper-text); margin: 0 0 4px; white-space: nowrap; }
[data-design="v2"] .mp-upgrade-desc { font-size: 12px; color: var(--paper-text); margin: 0; line-height: 1.6; }
[data-design="v2"] .mp-upgrade-price { display: none; }
[data-design="v2"] .mp-upgrade-desc { margin-bottom: 10px; }
[data-design="v2"] .mp-upgrade-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 12px; border-radius: 16px; text-decoration: none; background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 45%, var(--color-accent-dark) 100%); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 8px 20px rgba(var(--color-primary-rgb),0.35); white-space: nowrap; }
[data-design="v2"] .mp-upgrade-btn::before { content: ''; width: 18px; height: 18px; background: url('../img/design/sparkle.webp?v=20260918d') center / contain no-repeat; filter: brightness(3); }
[data-design="v2"] .mp-plan-status { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); padding: 14px 16px; margin: 0 0 14px; }
[data-design="v2"] .mp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
[data-design="v2"] .mp-stat-item { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: var(--glass-shadow); padding: 14px 10px 12px; text-align: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; }
[data-design="v2"] .mp-stat-icon { width: 64px; height: 64px; object-fit: contain; margin: 0 0 6px; filter: drop-shadow(0 0 10px rgba(246,197,106,0.35)); }
[data-design="v2"] .mp-stat-number { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--num-accent); line-height: 1.1; }
[data-design="v2"] .mp-stat-item:nth-child(3) .mp-stat-number { color: var(--num-accent); }
[data-design="v2"] .mp-stat-number::after { content: ''; display: block; width: 100%; height: 6px; border-radius: 99px; margin: 8px auto 0; background: linear-gradient(90deg, var(--color-accent-light) 34%, var(--fill-glass-strong) 34%); }
[data-design="v2"] .mp-stat-item:nth-child(3) .mp-stat-number::after { background: linear-gradient(90deg, var(--color-accent-light) 34%, var(--fill-glass-strong) 34%); }
[data-design="v2"] .mp-stat-label { font-size: 12px; color: var(--on-glass); margin-top: 6px; }
[data-design="v2"] .mp-menu { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); padding: 6px 16px 8px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: visible; margin-bottom: 14px; }
[data-design="v2"] .mp-menu-title { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--on-glass); padding: 14px 0 10px; }
[data-design="v2"] .mp-menu-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(246,197,106,0.8), rgba(246,197,106,0.15)); }
[data-design="v2"] .mp-menu-title::before { content: '✦'; order: 3; color: var(--gold); font-size: 14px; }
[data-design="v2"] .mp-menu-item { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: none; color: var(--on-glass); font-size: 16px; cursor: pointer; background: none !important; }
[data-design="v2"] .mp-menu-item:first-of-type { border-top: none; }
[data-design="v2"] .mp-menu-item-label { gap: 14px; font-size: 16px; color: var(--on-glass); }
[data-design="v2"] .mp-menu-item-label img { width: 44px; height: 44px; opacity: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); }
[data-design="v2"] .mp-menu-item::after { content: '›'; margin-left: auto; color: var(--on-glass-soft); font-size: 20px; }
[data-design="v2"] .mp-panel { background: var(--inset-glass); border-radius: 12px; border-bottom: none; }
[data-design="v2"] .mp-panel.open { margin-bottom: 8px; }
[data-design="v2"] .mp-footer { text-align: center; padding: 20px 0 8px; }
[data-design="v2"] .mp-footer-links { gap: 14px; margin-bottom: 18px; }
[data-design="v2"] .mp-footer-links a { font-size: 11px; color: var(--on-glass-muted); }
[data-design="v2"] .mp-logout-btn { background: transparent; color: var(--color-accent-light); border: 1.5px solid var(--color-accent-light); border-radius: 999px; padding: 14px 52px; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 0.15em; }
/* ========== きせかえ設定 — docs/mockups/07-appearance.png ========== */
[data-design="v2"] .kc-card, [data-design="v2"] .kp-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 16px; margin-bottom: 14px; color: var(--on-glass); }
[data-design="v2"] .kp-card { position: relative; overflow: hidden; padding-right: 120px; min-height: 80px; align-items: center; align-content: center; }
[data-design="v2"] .kp-head { margin-bottom: 0; }
[data-design="v2"] .kp-card::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 58%; background: var(--img-kisekae) 60% 40% / cover no-repeat; -webkit-mask-image: linear-gradient(270deg, #000 42%, transparent 100%); mask-image: linear-gradient(270deg, #000 42%, transparent 100%); opacity: 0.95; pointer-events: none; z-index: 0; }
[data-design="v2"] .kp-card > * { position: relative; z-index: 1; }
[data-design="v2"] .kp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
[data-design="v2"] .kp-head img { width: 34px; height: 34px; object-fit: contain; }
[data-design="v2"] .kp-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; }
[data-design="v2"] .kp-sub { font-size: 11px; color: var(--on-glass-soft); }
[data-design="v2"] .kp-user { display: flex; align-items: flex-start; gap: 14px; }
[data-design="v2"] .kp-avatar { width: 66px !important; height: 66px !important; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2px rgba(246,197,106,0.35); }
[data-design="v2"] .kp-avatar img { width: 100%; height: 100%; object-fit: cover; }
[data-design="v2"] .kp-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
[data-design="v2"] .kp-msg { font-size: 12px; color: var(--on-glass-soft); margin: 2px 0 8px; }
[data-design="v2"] .kp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
[data-design="v2"] .kp-chip { font-size: 10px; padding: 5px 9px; border-radius: 999px; background: var(--fill-glass); color: var(--on-glass); white-space: nowrap; }
[data-design="v2"] .kp-chip-avatar::before { content: '👤 '; }
[data-design="v2"] .kp-art { display: none; }
[data-design="v2"] .kc-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--on-glass); margin: 0 0 2px; padding-left: 44px; position: relative; line-height: 34px; }
[data-design="v2"] .kc-card h3::before { content: ''; position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.1) center / 22px no-repeat; }
[data-design="v2"] .kc-theme h3::before { background-image: url('../img/design/menu-palette.webp?v=20260918d'); background-size: 30px; }
[data-design="v2"] .kc-font h3::before { content: 'あ'; font-family: var(--font-display); color: var(--color-accent-light); font-size: 20px; text-align: center; line-height: 34px; }
[data-design="v2"] .kc-avatar h3::before { background-image: url('../img/design/menu-profile.webp?v=20260918d'); background-size: 30px; }
[data-design="v2"] .kc-card .kc-sub { padding-left: 44px; color: var(--on-glass-soft) !important; margin-bottom: 14px !important; }
[data-design="v2"] .kc-group { background: var(--inset-glass); border: 1px solid var(--line-glass); border-radius: 16px; padding: 12px 10px 10px; margin-top: 10px; }
[data-design="v2"] .kc-group .kisekae-group-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--on-glass); margin: 0 0 10px !important; }
[data-design="v2"] .kc-group .kisekae-group-label::before { content: '☾'; color: var(--gold); }
[data-design="v2"] .kc-group-light .kisekae-group-label::before { content: '☀'; color: var(--color-accent-light); }
[data-design="v2"] .kc-group-note { margin-left: auto; font-size: 10px; font-weight: 400; color: var(--on-glass-soft); }
[data-design="v2"] .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 12px 4px; align-items: start; }
[data-design="v2"] .theme-swatch { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--on-glass-soft); font-size: 8.5px; line-height: 1.25; padding: 4px 0; position: relative; width: auto; }
[data-design="v2"] .theme-swatch-name { color: var(--on-glass-soft); font-size: 8px; line-height: 1.2; text-align: center; white-space: normal; word-break: break-all; }
[data-design="v2"] .theme-swatch-ball { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,0.15), 0 4px 10px rgba(0,0,0,0.35); }
[data-design="v2"] .theme-swatch.selected .theme-swatch-ball { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--color-primary), 0 0 14px rgba(var(--color-primary-rgb),0.6); }
[data-design="v2"] .theme-swatch.selected::after { content: '✓'; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
[data-design="v2"] .theme-swatch.selected { background: none; }
[data-design="v2"] .mycolor-section { border-top-color: var(--on-glass-muted) !important; }
[data-design="v2"] .mycolor-section h4 { font-size: 14px; color: var(--on-glass); }
[data-design="v2"] .font-option { display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: 'r n s' 'r d s'; align-items: center; column-gap: 12px; row-gap: 2px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-glass); background: var(--inset-glass); margin-bottom: 8px; cursor: pointer; color: var(--on-glass); text-align: left; }
[data-design="v2"] .font-option::before { content: ''; grid-area: r; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); box-sizing: border-box; }
[data-design="v2"] .font-option.selected { border-color: var(--paper-accent); box-shadow: 0 0 0 1px var(--color-primary); background: rgba(var(--color-primary-rgb),0.14); }
[data-design="v2"] .font-option.selected::before { border-color: var(--paper-accent); background: radial-gradient(circle, var(--color-primary) 45%, transparent 50%); }
[data-design="v2"] .font-option-name { grid-area: n; font-size: 14px; font-weight: 700; color: var(--on-glass); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-design="v2"] .font-option-desc { grid-area: d; font-size: 11px; color: var(--on-glass-soft); }
[data-design="v2"] .font-option-sample { grid-area: s; font-size: 11px; color: var(--on-glass-soft); white-space: nowrap; }
[data-design="v2"] .kc-avatar .kisekae-group-label { font-size: 12px; color: var(--on-glass-soft); margin-bottom: 8px; }
[data-design="v2"] .avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
[data-design="v2"] .avatar-option { background: none; border: 1px solid transparent; border-radius: 16px; padding: 8px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; color: var(--on-glass); }
[data-design="v2"] .avatar-option.selected { border-color: var(--paper-accent); box-shadow: 0 0 0 1px var(--color-primary); }
[data-design="v2"] .avatar-option .avatar-wrap { width: 88px !important; height: 88px !important; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
[data-design="v2"] .avatar-option .avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
[data-design="v2"] .avatar-option::after { content: 'ベーシック'; font-size: 10px; color: var(--on-glass-soft); }
[data-design="v2"] #avatarGridStd .avatar-option::after { content: 'STANDARD'; font-size: 9px; font-weight: 700; color: #3B2F5C; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); border-radius: 999px; padding: 2px 10px; }
[data-design="v2"] .avatar-lock-overlay { position: absolute; right: 22px; top: 72px; width: 22px; height: 22px; border-radius: 50%; background: rgba(20,18,50,0.85); font-size: 11px; display: flex; align-items: center; justify-content: center; }
[data-design="v2"] #customAvatarArea { margin-top: 6px; }
[data-design="v2"] #customAvatarArea .btn-secondary { border: 1px solid var(--line-glass); color: var(--on-glass); border-radius: 12px; padding: 12px; font-weight: 700; }
[data-design="v2"] #customAvatarArea .btn-secondary::before { content: ''; display: inline-block; width: 16px; height: 13px; margin-right: 6px; vertical-align: -1px; background: url('../img/design/crown.webp?v=20260918d') center / contain no-repeat; }
[data-design="v2"] #customAvatarArea p { color: var(--on-glass-muted) !important; text-align: center; }
[data-design="v2"] .kisekae-savebar { position: static; display: flex; flex-direction: column-reverse; gap: 10px; padding: 8px 0 0; background: transparent; border: none; box-shadow: none; }
[data-design="v2"] .kisekae-savebar .btn-primary { width: 100%; padding: 18px; font-size: 18px; font-weight: 700; border-radius: 999px; background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-hover) 45%, var(--color-primary) 100%); box-shadow: 0 10px 26px rgba(var(--color-primary-rgb),0.4); }
[data-design="v2"] .kisekae-savebar .btn-secondary { border: none; color: var(--on-glass-soft); font-size: 13px; background: none; }
[data-design="v2"] .v2-footer { text-align: center; padding: 28px 0 4px; }
[data-design="v2"] .v2-footer-brand { font-family: var(--font-display); font-size: 20px; color: var(--on-glass); letter-spacing: 0.06em; }
[data-design="v2"] .v2-footer-line { font-family: var(--font-display); font-size: 12px; color: var(--on-glass-soft); margin-top: 6px; letter-spacing: 0.06em; }
/* ========== プランを選ぶ — docs/mockups/08-checkout.png ========== */
[data-design="v2"] .checkout-page { position: relative; max-width: 560px; }
[data-design="v2"] .ck-lead { font-family: var(--font-display); font-size: 14px; line-height: 1.8; color: var(--on-glass-soft); letter-spacing: 0.04em; margin: 0 0 14px; text-shadow: var(--text-glow); }
[data-design="v2"] .ck-moon-cat { position: absolute; right: -10px; top: -4px; width: 126px; height: 126px; object-fit: contain; pointer-events: none; z-index: 0; }
[data-design="v2"] .checkout-page .page-header-v2 { position: relative; z-index: 1; }
[data-design="v2"] .cycle-toggle-wrap { position: relative; padding-right: 92px; margin-bottom: 18px; }
[data-design="v2"] .checkout-page .cycle-toggle { max-width: none; margin: 0; background: var(--glass-bg); border: 1px solid var(--glass-border); }
[data-design="v2"] .cycle-btn { padding: 11px 6px; font-size: 13px; font-weight: 700; color: var(--on-glass); }
[data-design="v2"] .cycle-btn.active { background: linear-gradient(135deg, #FBE7D6, #F7D3BE); color: #8A4A1E; }
[data-design="v2"] .cycle-btn .save-tag { color: var(--ok-green); font-size: 10px; margin-left: 4px; }
@media (max-width: 359px) { [data-design="v2"] .cycle-toggle-wrap { padding-right: 0; } [data-design="v2"] .cycle-note { display: none; } }
[data-design="v2"] .cycle-note { position: absolute; right: 0; top: 4px; font-family: var(--font-display); font-size: 11px; line-height: 1.6; color: var(--on-glass-soft); text-align: left; transform: rotate(-8deg); }
[data-design="v2"] .cycle-note::before { content: '✦'; position: absolute; left: -16px; top: -8px; color: var(--gold); font-size: 12px; }
[data-design="v2"] .checkout-plans { display: grid; gap: 16px; grid-template-columns: 1fr; }
[data-design="v2"] .checkout-plan {
position: relative; background: var(--surface-paper); color: var(--paper-text); border: 2px solid rgba(255,255,255,0.7); border-radius: var(--paper-radius); box-shadow: var(--paper-shadow);
padding: 18px 16px 16px 84px; text-align: left; cursor: pointer; overflow: hidden; min-height: 250px;
}
[data-design="v2"] .checkout-plan::before { content: ''; position: absolute; left: 16px; top: 18px; width: 56px; height: 56px; border-radius: 50%; background: #fff url('../img/design/plan-moon.webp?v=20260918d') center / 100% no-repeat; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
[data-design="v2"] .checkout-plan[data-plan="premium"]::before { background-image: url('../img/design/plan-crystal.webp?v=20260918d'); }
[data-design="v2"] .checkout-plan[data-plan="supporter"]::before { background-image: url('../img/design/plan-heart.webp?v=20260918d'); }
[data-design="v2"] .checkout-page .checkout-plan.selected { background: var(--surface-paper); border-color: var(--paper-accent); box-shadow: 0 0 0 1px var(--color-primary), 0 0 20px rgba(var(--color-primary-rgb),0.35), var(--paper-shadow); }
[data-design="v2"] .checkout-page .checkout-plan[style] { border-color: rgba(255,255,255,0.7) !important; }
[data-design="v2"] .checkout-page .checkout-plan.selected[style] { border-color: var(--paper-accent) !important; }
[data-design="v2"] .checkout-page .checkout-plan-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--paper-text) !important; padding-right: 120px; line-height: 1.2; }
[data-design="v2"] .checkout-plan-desc { font-size: 11.5px; color: var(--paper-text-secondary); margin: 4px 0 10px; padding-right: 110px; }
[data-design="v2"] .checkout-plan-price { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--paper-accent); position: absolute; right: 16px; top: 16px; line-height: 1; }
[data-design="v2"] .checkout-plan-price small, [data-design="v2"] .checkout-plan-price span { font-size: 13px; font-weight: 500; color: var(--paper-text-secondary); }
[data-design="v2"] .checkout-plan-yearly { position: absolute; right: 16px; top: 54px; font-size: 12px; color: var(--paper-text-secondary); }
[data-design="v2"] .checkout-page .checkout-plan-features { list-style: none; padding: 0; margin: 4px 0 0 -64px; width: 212px; }
[data-design="v2"] .checkout-page .checkout-plan li { font-size: 13.5px; color: var(--paper-text); padding: 0; margin: 0; line-height: 1.45; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
[data-design="v2"] .checkout-page .checkout-plan li + li { margin-top: 3px; }
[data-design="v2"] .checkout-page .checkout-plan li::before { content: none; }
[data-design="v2"] .checkout-page .checkout-plan-features .ck { color: var(--paper-accent) !important; font-weight: 700; font-size: 15px; }
[data-design="v2"] .plan-art { position: absolute; right: 8px; bottom: 8px; width: 42%; max-width: 150px; text-align: center; pointer-events: none; }
[data-design="v2"] .plan-art-text { display: block; font-family: 'Klee One', 'Yu Mincho', var(--font-display); font-size: 12px; line-height: 1.6; color: #7A5A8A; transform: rotate(-5deg); margin: 0 0 -4px; }
[data-design="v2"] .plan-art img { display: block; width: 100%; max-width: 118px; height: auto; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(90,70,150,0.25)); }
/* 文字入りの挿絵（支給 51/52）: 文字は画像に含まれるので大きめに */
[data-design="v2"] .plan-art-with-text { width: 48%; max-width: 172px; right: 4px; bottom: 4px; }
[data-design="v2"] .plan-art-with-text img { max-width: 172px; filter: drop-shadow(0 4px 12px rgba(90,70,150,0.2)); }
[data-design="v2"] .plan-art-supporter.plan-art-with-text { width: 54%; max-width: 196px; bottom: 2px; }
[data-design="v2"] .plan-art-supporter.plan-art-with-text img { max-width: 196px; }
@media (max-width: 480px) {
[data-design="v2"] .plan-art-with-text { width: 38%; max-width: 132px; right: 8px; bottom: 8px; }
[data-design="v2"] .plan-art-with-text img { max-width: 132px; }
[data-design="v2"] .plan-art-supporter.plan-art-with-text { width: 46%; max-width: 156px; }
[data-design="v2"] .plan-art-supporter.plan-art-with-text img { max-width: 156px; }
}
@media (max-width: 400px) {
[data-design="v2"] .plan-art-with-text { width: 36%; max-width: 118px; }
[data-design="v2"] .plan-art-with-text img { max-width: 118px; }
[data-design="v2"] .plan-art-supporter.plan-art-with-text { width: 44%; max-width: 140px; }
[data-design="v2"] .plan-art-supporter.plan-art-with-text img { max-width: 140px; }
}
[data-design="v2"] .checkout-page .checkout-plan.recommended { padding-top: 30px; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--glow-gold), var(--paper-shadow); }
[data-design="v2"] .checkout-page .checkout-plan.recommended.selected { border-color: var(--paper-accent); box-shadow: 0 0 0 1px var(--color-primary), 0 0 20px rgba(var(--color-primary-rgb),0.35), var(--paper-shadow); }
[data-design="v2"] .checkout-page .checkout-plan.recommended::before { top: 30px; left: 16px; transform: none; content: ''; width: 56px; height: 56px; padding: 0; font-size: 0; border-radius: 50%; background: #fff url('../img/design/plan-crystal.webp?v=20260918d') center / 100% no-repeat; }
[data-design="v2"] .checkout-page .checkout-plan.recommended .checkout-plan-price { top: 28px; }
[data-design="v2"] .checkout-page .checkout-plan.recommended .checkout-plan-yearly { top: 66px; }
@media (max-width: 450px) {
[data-design="v2"] .checkout-plan { padding: 16px 14px 14px 68px; }
[data-design="v2"] .checkout-plan::before { width: 44px; height: 44px; left: 14px; top: 17px; }
[data-design="v2"] .checkout-page .checkout-plan-name { font-size: 18px; padding-right: 100px; white-space: nowrap; }
[data-design="v2"] .checkout-plan-desc { padding-right: 96px; font-size: 11px; }
[data-design="v2"] .checkout-plan-price { font-size: 24px; right: 14px; top: 17px; }
[data-design="v2"] .checkout-plan-price small, [data-design="v2"] .checkout-plan-price span { font-size: 11px; }
[data-design="v2"] .checkout-plan-yearly { right: 14px; top: 46px; font-size: 11px; }
[data-design="v2"] .checkout-page .checkout-plan.recommended .checkout-plan-price { top: 27px; }
[data-design="v2"] .checkout-page .checkout-plan.recommended .checkout-plan-yearly { top: 56px; }
[data-design="v2"] .checkout-page .checkout-plan-features { margin-left: -50px; }
/* おすすめ（プレミアム）はアイコンが 56px のままで名前に重なっていた */
[data-design="v2"] .checkout-page .checkout-plan.recommended { padding-left: 68px; }
[data-design="v2"] .checkout-page .checkout-plan.recommended::before { width: 44px; height: 44px; top: 30px; left: 14px; }
}
[data-design="v2"] .checkout-plan.recommended::after { content: 'おすすめ'; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #3B2F5C; font-size: 12px; font-weight: 700; border-radius: 0 0 14px 14px; padding: 5px 16px 5px 34px; white-space: nowrap; background-image: url('../img/design/crown.webp?v=20260918d'), linear-gradient(135deg, var(--gold-soft), var(--gold)); background-repeat: no-repeat; background-size: 18px, auto; background-position: 12px center, 0 0; }
[data-design="v2"] .trust-badge { display: flex; gap: 12px; align-items: flex-start; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); padding: 16px; margin: 18px 0 0; color: var(--on-glass); font-size: 12px; line-height: 1.8; }
[data-design="v2"] .trust-badge::before { content: ''; width: 56px; height: 56px; flex: none; background: url('../img/design/shield.webp?v=20260918d') center / contain no-repeat; }
[data-design="v2"] .trust-badge > span:last-child::before { content: '安心してご利用いただけます'; display: block; font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 4px; }
[data-design="v2"] .checkout-page .trust-badge .shield { display: none; }
[data-design="v2"] .trust-badge strong { color: var(--ok-green) !important; }
[data-design="v2"] .ck-closing { text-align: center; font-family: var(--font-display); font-size: 13px; line-height: 1.9; color: var(--on-glass-soft); margin: 26px 0 0; letter-spacing: 0.06em; text-shadow: var(--text-glow); }
[data-design="v2"] .ck-closing::after { content: '✦'; display: block; color: var(--gold); font-size: 10px; margin-top: 6px; }
[data-design="v2"] .ck-pay { margin: 22px 0 0; text-align: center; }
[data-design="v2"] .ck-pay-btn { width: 100%; padding: 18px; font-size: 19px; font-weight: 700; border-radius: 999px; background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 45%, var(--color-accent-dark) 100%); box-shadow: 0 10px 26px rgba(var(--color-primary-rgb),0.45); display: flex; align-items: center; justify-content: center; gap: 8px; }
[data-design="v2"] .ck-pay-btn span { font-size: 22px; }
[data-design="v2"] .ck-pay-note { font-family: var(--font-display); font-size: 12px; color: var(--on-glass-soft); margin-top: 10px; letter-spacing: 0.04em; }
[data-design="v2"] .cross-link-arrow { display: none; }
/* ========== ホーム（夢日記） — docs/mockups/01-home.png ========== */
[data-design="v2"] .closing-line { text-align: center; font-family: var(--font-display); font-size: 13px; color: var(--on-glass-soft); margin: 30px 0 4px; letter-spacing: 0.1em; text-shadow: var(--text-glow); }
[data-design="v2"] .closing-line::after { content: '—→—'; display: block; font-size: 12px; opacity: 0.7; margin-top: 6px; letter-spacing: 0; }
/* 見出し: 「2026年」小 + 「9月17日（木）」大 / 右に三行の添え書き */
[data-design="v2"] .home-head { display: grid; grid-template-columns: 1fr; grid-template-areas: 'date' 'lead'; gap: 4px 12px; align-items: start; padding: 8px 0 10px; }
[data-design="v2"] .home-head .current-date { grid-area: date; }
[data-design="v2"] .home-head .page-tagline { grid-area: tag; }
[data-design="v2"] .home-head .home-lead { grid-area: lead; }
[data-design="v2"] .home-page .current-date { font-family: var(--font-display); color: var(--on-glass); line-height: 1.1; margin: 0 0 10px; text-shadow: var(--text-glow); }
[data-design="v2"] .home-page .current-date .cd-year { display: block; font-size: 21px; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 6px; }
[data-design="v2"] .home-page .current-date .cd-day { display: block; font-size: 38px; font-weight: 700; white-space: nowrap; letter-spacing: 0.01em; }
[data-design="v2"] .home-page .current-date .cd-day small { font-size: 24px; font-weight: 500; margin-left: 2px; }
[data-design="v2"] .home-page .home-lead { font-family: var(--font-display); font-size: 15px; color: var(--on-glass-soft); margin: 0; letter-spacing: 0.05em; text-shadow: 0 1px 8px rgba(10,8,40,0.5); }
[data-design="v2"] .home-head .page-tagline {
font-family: var(--font-display); font-size: clamp(10px, 3.1vw, 12px); line-height: 1.85; color: var(--on-glass-soft); letter-spacing: 0.06em;
text-align: left; white-space: pre; padding: 8px 0 0; margin: 0; max-width: none; position: static; text-shadow: var(--text-glow);
}
[data-design="v2"] .home-head .page-tagline::after { content: ''; position: static; display: block; width: 28px; height: 1px; background: var(--fill-glass-strong); margin-top: 8px; opacity: 1; }
/* 検索 */
[data-design="v2"] .home-page .calendar-header { position: static; background: transparent; border: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 0 8px; margin: 0; }
[data-design="v2"] .home-page .search-bar {
display: flex; align-items: center; gap: 8px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 999px;
padding: 5px 5px 5px 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px var(--inset-glass);
}
[data-design="v2"] .home-page .search-bar-icon { position: static; transform: none; width: 22px; height: 22px; color: var(--on-glass); flex: none; }
[data-design="v2"] .home-page .search-bar input { flex: 1; min-width: 0; padding: 10px 6px; background: none; border: none; border-radius: 0; color: var(--on-glass); font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; backdrop-filter: none; }
[data-design="v2"] .home-page .search-bar input::placeholder { color: var(--on-glass-muted); }
[data-design="v2"] #searchResults .empty-message { margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--on-glass-soft); font-family: var(--font-display); font-size: 13px; text-align: center; letter-spacing: 0.03em; }
[data-design="v2"] .home-page .search-submit-btn { background: #0F1136; color: #FFFFFF; border: 1px solid var(--line-glass); border-radius: 999px; padding: 10px 16px; font-size: 13px; font-weight: 700; }
/* 利用状況 3 タイル（占い / 診断 / AI整形）: カレンダーが早く見えるよう低めに */
[data-design="v2"] .usage-panel { margin: 8px 0 12px; }
[data-design="v2"] .usage-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
[data-design="v2"] .usage-item {
background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 9px 8px 10px; min-height: 0;
display: flex; flex-direction: column; align-items: center; text-align: center; position: relative;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--glass-shadow);
}
[data-design="v2"] .usage-item.exhausted { border-color: var(--glass-border); background: var(--glass-bg); }
[data-design="v2"] .usage-item.exhausted .usage-count { color: var(--num-accent); opacity: 0.7; }
[data-design="v2"] .usage-item:has(.usage-streak) { display: none; }
[data-design="v2"] .usage-label { display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; font-weight: 600; color: var(--on-glass); margin: 0 0 4px; white-space: nowrap; }
[data-design="v2"] .usage-label::before { content: none; }
[data-design="v2"] .usage-icon { width: 26px; height: 26px; object-fit: contain; margin-right: 2px; filter: drop-shadow(0 0 6px rgba(var(--color-accent-rgb),0.35)); }
[data-design="v2"] .usage-arrow { color: var(--on-glass-muted); font-size: 13px; }
[data-design="v2"] .usage-item.usage-tappable::after { content: none; }
[data-design="v2"] .usage-count { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--num-accent); line-height: 1; margin: 2px 0 0; white-space: nowrap; }
[data-design="v2"] .usage-count small { font-size: 11px; font-weight: 500; color: var(--on-glass-soft); margin-left: 2px; }
[data-design="v2"] .usage-count .usage-pre { margin: 0 3px 0 0; }
[data-design="v2"] .usage-count.usage-lav { color: var(--num-accent); opacity: 0.9; }
[data-design="v2"] .usage-count.usage-ok { color: var(--ok-green) !important; font-size: 22px; }
[data-design="v2"] .usage-ready { font-size: 10.5px !important; color: var(--ok-green) !important; margin-top: 5px !important; font-weight: 600; }
[data-design="v2"] .usage-item .usage-bar { width: 100%; height: 6px; border-radius: 99px; background: var(--fill-glass); margin-top: auto; padding-top: 0; overflow: hidden; }
[data-design="v2"] .usage-item .usage-count + .usage-bar { margin-top: 9px; }
[data-design="v2"] .usage-item .usage-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--color-accent-soft), var(--color-accent-light)); }
[data-design="v2"] .usage-item .usage-bar-fill.lav { background: linear-gradient(90deg, var(--color-accent-soft), var(--color-accent-light)); opacity: 0.75; }
[data-design="v2"] .usage-item .usage-bar-fill.low, [data-design="v2"] .usage-item .usage-bar-fill.empty { background: linear-gradient(90deg, var(--color-accent-soft), var(--color-accent-light)); }
/* おはようカード（紙 + 月猫） */
[data-design="v2"] .morning-card {
display: grid; grid-template-columns: 120px 1fr; gap: 6px; align-items: center;
background: var(--surface-paper); color: var(--paper-text); border: 1px solid rgba(255,255,255,0.7); border-radius: var(--paper-radius);
box-shadow: 0 12px 30px rgba(8,6,30,0.35); padding: 14px 16px 12px 8px; margin: 0 0 12px; text-align: left; overflow: hidden; position: relative;
}
[data-design="v2"] .morning-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 168px; background: var(--img-upgrade) 42% center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, #000 56%, transparent 100%); mask-image: linear-gradient(90deg, #000 56%, transparent 100%); pointer-events: none; } /* 幅は固定（% だと広い画面で文字に被る） */
[data-design="v2"] .morning-card > * { grid-column: 2; position: relative; z-index: 1; }
[data-design="v2"] .morning-greeting { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--paper-text); line-height: 1.5; margin: 0; }
[data-design="v2"] .morning-note { font-family: var(--font-display); font-size: 12px; color: var(--paper-text-secondary); margin: 6px 0 10px; letter-spacing: 0.04em; }
[data-design="v2"] .morning-mic-btn {
width: 100%; justify-content: center; gap: 10px; padding: 10px 12px; font-size: 16px; font-weight: 700; border-radius: 16px; margin: 0;
background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 45%, var(--color-accent-dark) 100%); color: #FFFFFF; border: none; box-shadow: 0 8px 20px rgba(var(--color-primary-rgb),0.35);
}
[data-design="v2"] .morning-mic-btn .btn-icon-image { width: 20px; height: 20px; }
[data-design="v2"] .morning-keyboard-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; color: var(--paper-text-secondary); font-family: var(--font-display); font-size: 13px; letter-spacing: 0.04em; margin: 10px 0 0; padding: 0; }
[data-design="v2"] .morning-keyboard-btn::before, [data-design="v2"] .morning-keyboard-btn::after { content: ''; flex: 1; max-width: 44px; height: 1px; background: rgba(110,97,145,0.4); }
/* カレンダー（1か月 + ‹ ›） */
[data-design="v2"] .home-page .calendar-container {
max-height: none; overflow: visible; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 22px; padding: 16px 14px 14px;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--glass-shadow);
}
[data-design="v2"] .home-page .calendar-month-section { margin: 0; padding: 0; background: transparent; border: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-design="v2"] .home-page .calendar-month-header { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 2px 12px; margin: 0; }
[data-design="v2"] .home-page .calendar-month-header h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--on-glass); margin: 0; white-space: nowrap; flex: none; text-align: center; order: 1; min-width: 150px; }
[data-design="v2"] .calendar-nav { display: contents; }
[data-design="v2"] .calendar-nav-btn[data-dir="-1"] { order: 0; }
[data-design="v2"] .calendar-nav-btn[data-dir="1"] { order: 2; }
[data-design="v2"] .calendar-nav-btn { width: 36px; height: 36px; background: none; border: none; color: var(--on-glass-soft); font-size: 24px; line-height: 1; cursor: pointer; font-family: var(--font-display); padding: 0; }
[data-design="v2"] .calendar-nav-btn:disabled { opacity: 0.3; cursor: default; }
[data-design="v2"] .home-page .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
[data-design="v2"] .home-page .calendar-weekday { text-align: center; font-size: 13px; font-weight: 500; color: var(--on-glass-soft); padding: 2px 0; }
[data-design="v2"] .home-page .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
[data-design="v2"] .home-page .calendar-day {
aspect-ratio: 1 / 1; min-height: 0; padding: 0; border-radius: 12px; background: var(--fill-glass); background-color: var(--fill-glass); border: 1px solid var(--line-glass);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--on-glass); cursor: pointer; position: relative; opacity: 1;
}
[data-design="v2"] .home-page .calendar-day .date-number { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1; }
[data-design="v2"] .home-page .calendar-day.other-month { color: var(--on-glass-muted); background-color: transparent; border-color: transparent; opacity: 0.6; cursor: default; }
[data-design="v2"] .home-page .calendar-day.empty { visibility: hidden; }
[data-design="v2"] .home-page .calendar-day.future { opacity: 1; color: var(--on-glass-soft); cursor: default; }
[data-design="v2"] .home-page .calendar-day.has-diary { background-color: var(--fill-glass); }
[data-design="v2"] .home-page .calendar-day:hover:not(.other-month):not(.future):not(.today) { background-color: var(--fill-glass-strong); }
[data-design="v2"] .home-page .calendar-day .diary-indicator { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-light); box-shadow: 0 0 6px rgba(var(--color-accent-rgb),0.8); margin: 0; }
[data-design="v2"] .home-page .calendar-day.no-dream .diary-indicator { background: var(--fill-glass-strong); box-shadow: none; }
[data-design="v2"] .home-page .calendar-day.today { background: linear-gradient(135deg, var(--color-primary-hover), var(--color-accent-dark)); background-color: var(--color-primary); border-color: transparent; color: #FFFFFF; box-shadow: 0 6px 16px rgba(var(--color-primary-rgb),0.45); }
[data-design="v2"] .home-page .calendar-day.today .diary-indicator { background: #FFFFFF; box-shadow: none; }
[data-design="v2"] .home-page .calendar-day.selected:not(.today) { background-color: var(--fill-glass-strong); border-color: var(--line-glass); }
[data-design="v2"] .calendar-legend { display: flex; gap: 18px; justify-content: flex-start; flex-wrap: wrap; margin-top: 14px; padding: 0 4px; font-size: 12px; color: var(--on-glass-soft); }
[data-design="v2"] .calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
[data-design="v2"] .calendar-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
[data-design="v2"] .calendar-legend .lg-today { background: #F08A5A; }
[data-design="v2"] .calendar-legend .lg-diary { background: var(--color-accent-light); }
[data-design="v2"] .calendar-legend .lg-none { background: var(--fill-glass-strong); }
/* 振り返りカード */
[data-design="v2"] .home-review-card {
display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 14px 16px 14px 12px; text-decoration: none; color: var(--on-glass);
background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--glass-shadow);
}
[data-design="v2"] .home-review-card::before { content: ''; width: 60px; height: 54px; flex: none; background: url('../img/design/book.webp?v=20260918c') center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(246,197,106,0.35)); }
[data-design="v2"] .home-review-card strong { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 700; margin-bottom: 4px; }
[data-design="v2"] .home-review-card > span > span { font-family: var(--font-display); font-size: 11px; color: var(--on-glass-soft); letter-spacing: 0.03em; }
[data-design="v2"] .home-review-card::after { content: '›'; margin-left: auto; font-size: 24px; color: var(--on-glass-soft); }
/* 他ページ共通の見出し添え書き幅 */
[data-design="v2"] .page-header .page-tagline { max-width: 128px; }
/* ========== 日記モーダル（夢の内容）: 支給の参考画像に合わせたガラス面 ========== */
[data-design="v2"] #diaryModal { background: var(--color-overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 14px; align-items: center; }
[data-design="v2"] #diaryModal .modal-content {
position: relative; overflow: hidden; max-width: 560px; padding: 22px 18px 18px; border-radius: 26px;
background: var(--modal-glass); color: var(--on-glass);
border: 1px solid rgba(var(--color-accent-rgb),0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 18px 50px rgba(8,6,30,0.35), 0 0 24px rgba(var(--color-accent-rgb),0.18);
}
/* 角の雲と星（飾り） */
[data-design="v2"] #diaryModal .modal-content::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(var(--color-accent-rgb),0.22), transparent 70%), radial-gradient(ellipse 55% 35% at 0% 100%, rgba(var(--color-primary-rgb),0.16), transparent 70%); }
[data-design="v2"] #diaryModal .modal-content::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.9; background: url('../img/design/sparkle.webp?v=20260918d') 92% 6% / 22px no-repeat, url('../img/design/sparkle.webp?v=20260918d') 84% 13% / 12px no-repeat, url('../img/design/sparkle.webp?v=20260918d') 4% 62% / 18px no-repeat, url('../img/design/sparkle.webp?v=20260918d') 10% 70% / 10px no-repeat, url('../img/design/sparkle.webp?v=20260918d') 96% 48% / 14px no-repeat; }
[data-design="v2"] #diaryModal .modal-content > * { position: relative; z-index: 1; }
[data-design="v2"] #diaryModal .modal-header { display: block; text-align: left; margin: 0 0 16px; padding: 0 44px 0 0; }
[data-design="v2"] #diaryModal .modal-title { font-family: var(--font-display); font-size: clamp(19px, 5.6vw, 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--heading-color); letter-spacing: 0.04em; text-shadow: var(--heading-glow); line-height: 1.3; }
[data-design="v2"] #diaryModal .modal-header::after { content: ''; display: block; width: 62%; height: 16px; margin: 8px auto 0; position: relative; left: 22px; background: url('../img/design/sparkle.webp?v=20260918d') center / 16px 16px no-repeat, linear-gradient(90deg, transparent 0%, rgba(var(--color-accent-rgb),0.75) 40%, transparent 44%, transparent 56%, rgba(var(--color-accent-rgb),0.75) 60%, transparent 100%) center / 100% 1px no-repeat; }
[data-design="v2"] #diaryModal .modal-close { position: absolute; right: -8px; top: -6px; min-width: 40px; min-height: 40px; color: var(--on-glass); font-size: 24px; font-weight: 300; }
[data-design="v2"] #diaryModal .modal-close:hover { background: var(--fill-glass); }
[data-design="v2"] #diaryModal .modal-body { margin-bottom: 14px; }
[data-design="v2"] #diaryModal .form-group { margin: 0; }
[data-design="v2"] #diaryModal label { display: block; font-size: 14px; font-weight: 600; color: var(--on-glass); margin: 0 0 8px 2px; }
[data-design="v2"] #diaryModal textarea {
width: 100%; min-height: 236px; padding: 14px 14px; border-radius: 16px; resize: vertical;
background: var(--fill-glass); border: 1px solid var(--line-glass); color: var(--on-glass); font-size: 15px; line-height: 1.75;
box-shadow: 0 2px 10px var(--inset-glass) inset;
}
[data-design="v2"] #diaryModal textarea::placeholder { color: var(--on-glass-muted); }
[data-design="v2"] #diaryModal textarea:focus { outline: none; border-color: rgba(var(--color-accent-rgb),0.8); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb),0.18), 0 2px 10px var(--inset-glass) inset; }
[data-design="v2"] #diaryModal .char-counter { color: var(--on-glass-muted); font-size: 12px; margin-top: 6px; }
[data-design="v2"] #diaryModal .diary-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
[data-design="v2"] #diaryModal .voice-input-container, [data-design="v2"] #diaryModal .ai-format-container { min-width: 0; }
[data-design="v2"] #diaryModal .diary-action-row .btn {
width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; border-radius: 999px;
background: var(--fill-glass); border: 1.5px solid rgba(var(--color-accent-rgb),0.8); color: var(--on-glass); font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 0 14px rgba(var(--color-accent-rgb),0.12);
}
[data-design="v2"] #diaryModal .diary-action-row .btn .btn-icon-image { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(var(--color-accent-rgb),0.45)); }
[data-design="v2"] #diaryModal .voice-status { display: block; text-align: center; font-size: 11px; color: var(--on-glass-soft); margin-top: 4px; }
[data-design="v2"] #diaryModal #noDreamBtn { margin-top: 12px !important; padding: 12px !important; border: 1px dashed rgba(var(--color-accent-rgb),0.55) !important; border-radius: 14px !important; color: var(--on-glass-soft) !important; font-size: 12.5px !important; background: var(--fill-glass) !important; }
[data-design="v2"] #diaryModal .modal-footer { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 10px; margin-top: 4px; }
[data-design="v2"] #diaryModal .modal-footer .btn-primary {
width: 100%; padding: 16px; border-radius: 999px; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0.12em;
display: inline-flex; align-items: center; justify-content: center; gap: 14px;
position: relative; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.6); color: var(--color-on-primary, #FFFFFF); text-shadow: 0 0 10px rgba(255,255,255,0.45);
background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(255,255,255,0.28), transparent 60%), linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 50%, var(--color-accent-dark) 100%);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),0.28), 0 0 18px rgba(var(--color-primary-rgb),0.75), 0 0 42px rgba(var(--color-primary-rgb),0.45), 0 10px 26px rgba(var(--color-primary-rgb),0.45), 0 0 16px rgba(255,255,255,0.28) inset;
animation: v2-save-glow 2.8s ease-in-out infinite;
}
[data-design="v2"] #diaryModal .modal-footer .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
@keyframes v2-save-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),0.28), 0 0 18px rgba(var(--color-primary-rgb),0.75), 0 0 42px rgba(var(--color-primary-rgb),0.45), 0 10px 26px rgba(var(--color-primary-rgb),0.45), 0 0 16px rgba(255,255,255,0.28) inset; } 50% { box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),0.4), 0 0 26px rgba(var(--color-primary-rgb),0.95), 0 0 60px rgba(var(--color-primary-rgb),0.6), 0 10px 26px rgba(var(--color-primary-rgb),0.45), 0 0 22px rgba(255,255,255,0.4) inset; } }
[data-design="v2"] #diaryModal .modal-footer .btn-primary::before, [data-design="v2"] #diaryModal .modal-footer .btn-primary::after { content: '✦'; font-size: 16px; color: rgba(255,255,255,0.9); text-shadow: 0 0 8px rgba(255,255,255,0.9); animation: v2-star-twinkle 2.6s ease-in-out infinite; }
[data-design="v2"] #diaryModal .modal-footer .btn-primary::after { animation-delay: 1.3s; }
[data-design="v2"] #diaryModal .modal-footer .btn-secondary { width: 100%; border-radius: 999px; padding: 13px; border: 1.5px solid rgba(var(--color-accent-rgb),0.7); color: var(--on-glass); background: var(--fill-glass); font-weight: 700; }
/* プレミアムのバッジ: 白文字が読める濃い緑に */
[data-design="v2"] .kisekae-badge-premium { background: #177A50; color: #FFFFFF; }
/* ガラスの中のくぼみ（設定パネル等）と図鑑の限定アイテムの下地: ライト系では薄く */
[data-design="v2"] { --inset-glass: rgba(8,6,30,0.25); --premium-item-bg: rgba(60,50,40,0.45); }
[data-design="v2"][data-theme="lavender"], [data-design="v2"][data-theme="sakura"], [data-design="v2"][data-theme="mint"], [data-design="v2"][data-theme="sky"],
[data-design="v2"][data-theme="cream"], [data-design="v2"][data-theme="pearl"], [data-design="v2"][data-theme="coral"], [data-design="v2"][data-theme="lilac"] { --inset-glass: rgba(0,0,0,0.04); --premium-item-bg: rgba(214,170,100,0.16); }
[data-design="v2"] .mp-panel p[style], [data-design="v2"] .mp-panel h4[style] { color: var(--on-glass-soft) !important; }
/* 写真パネル（アップグレード枠・きせかえのプレビュー・診断/占いの情景）: ライト系では白を混ぜたパステル版 */
[data-design="v2"] {
--img-upgrade: url('../img/design/upgrade-cat.jpg?v=20260918a');
--img-kisekae: url('../img/design/kisekae-cat.jpg?v=20260918a');
--img-scene: url('../img/design/thumb-moon.jpg?v=20260918d');
}
[data-design="v2"][data-theme="lavender"], [data-design="v2"][data-theme="sakura"], [data-design="v2"][data-theme="mint"], [data-design="v2"][data-theme="sky"],
[data-design="v2"][data-theme="cream"], [data-design="v2"][data-theme="pearl"], [data-design="v2"][data-theme="coral"], [data-design="v2"][data-theme="lilac"] {
--img-upgrade: url('../img/design/upgrade-cat-light.jpg?v=20260919a');
--img-kisekae: url('../img/design/kisekae-cat-light.jpg?v=20260919a');
--img-scene: url('../img/design/thumb-moon-light.jpg?v=20260919a');
}
/* ========== 星の空（占った夢が星になる）— プレビュー機能 ========== */
[data-design="v2"] { --sky-base: url('../img/design/sky/base-dark.jpg?v=20260919b'); --sky-star-glow: 0 0 10px rgba(255,236,190,0.9); --sky-dust: rgba(255,248,230,0.95); --sky-ring: rgba(var(--color-accent-rgb), 0.95); }
[data-design="v2"][data-theme="lavender"], [data-design="v2"][data-theme="sakura"], [data-design="v2"][data-theme="mint"], [data-design="v2"][data-theme="sky"],
[data-design="v2"][data-theme="cream"], [data-design="v2"][data-theme="pearl"], [data-design="v2"][data-theme="coral"], [data-design="v2"][data-theme="lilac"] {
--sky-base: url('../img/design/sky/base-light.jpg?v=20260919b'); --sky-star-glow: 0 0 3px rgba(var(--color-primary-rgb),0.95); --sky-dust: rgba(var(--color-primary-rgb),0.85); --sky-ring: rgba(var(--color-primary-rgb), 0.9);
}
/* 空は画面いっぱい（ページの固定背景の代わり） */
/* 空の色はテーマに合わせる: 基底画像の明るさを残したまま、テーマ色の色相に寄せる（background-blend-mode: color） */
[data-design="v2"] { --sky-tint: var(--v2-bg-color); --sky-tint-blend: color; }
[data-design="v2"][data-theme="lavender"], [data-design="v2"][data-theme="sakura"], [data-design="v2"][data-theme="mint"], [data-design="v2"][data-theme="sky"], [data-design="v2"][data-theme="cream"], [data-design="v2"][data-theme="pearl"], [data-design="v2"][data-theme="coral"], [data-design="v2"][data-theme="lilac"] { --sky-tint: rgba(var(--color-primary-rgb), 0.5); }
[data-design="v2"][data-theme="starry"] { --sky-tint: transparent; } /* 夜空は基底画像そのまま */
[data-design="v2"] body.page-sky::before { background-image: linear-gradient(var(--sky-tint), var(--sky-tint)), var(--sky-base); background-blend-mode: var(--sky-tint-blend), normal; background-position: center bottom; }
[data-design="v2"] .sky-embed .sky-horizon { bottom: -6px; }
[data-design="v2"] .sky-page { padding: 0; max-width: none; }
[data-design="v2"] .sky-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
[data-design="v2"] .sky-stars { position: absolute; inset: 0; }
[data-design="v2"] .sky-horizon { position: absolute; left: 0; right: 0; bottom: calc(var(--nav-h) - 6px); height: 27%; background: url('../img/design/sky/horizon.webp?v=20260919a') center bottom / cover no-repeat; opacity: 0.95; pointer-events: none; }
[data-design="v2"] .sky-milkyway { position: absolute; left: -18%; right: -18%; top: 20%; height: 52%; background: url('../img/design/sky/milkyway.webp?v=20260919a') center / contain no-repeat; opacity: 0; transform: rotate(-26deg) scale(1.25); transition: opacity 2.4s ease; pointer-events: none; }
[data-design="v2"] .sky-milkyway.visible { opacity: 0.8; }
[data-design="v2"][data-theme="lavender"] .sky-milkyway, [data-design="v2"][data-theme="sakura"] .sky-milkyway, [data-design="v2"][data-theme="mint"] .sky-milkyway, [data-design="v2"][data-theme="sky"] .sky-milkyway,
[data-design="v2"][data-theme="cream"] .sky-milkyway, [data-design="v2"][data-theme="pearl"] .sky-milkyway, [data-design="v2"][data-theme="coral"] .sky-milkyway, [data-design="v2"][data-theme="lilac"] .sky-milkyway { mix-blend-mode: multiply; }
[data-design="v2"][data-theme="lavender"] .sky-milkyway.visible, [data-design="v2"][data-theme="sakura"] .sky-milkyway.visible, [data-design="v2"][data-theme="mint"] .sky-milkyway.visible, [data-design="v2"][data-theme="sky"] .sky-milkyway.visible,
[data-design="v2"][data-theme="cream"] .sky-milkyway.visible, [data-design="v2"][data-theme="pearl"] .sky-milkyway.visible, [data-design="v2"][data-theme="coral"] .sky-milkyway.visible, [data-design="v2"][data-theme="lilac"] .sky-milkyway.visible { opacity: 0.4; }
/* 見出し（空の上に重ねる） */
[data-design="v2"] .sky-head { position: relative; z-index: 1; text-align: center; padding: 54px 16px 0; pointer-events: none; }
[data-design="v2"] .sky-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--heading-color); letter-spacing: 0.12em; margin: 0; text-shadow: var(--heading-glow); }
[data-design="v2"] .sky-sub { font-family: var(--font-display); font-size: 12.5px; color: var(--on-glass-soft); letter-spacing: 0.06em; margin: 6px 0 0; text-shadow: var(--text-glow); }
[data-design="v2"] .sky-count { font-family: var(--font-display); font-size: 11px; color: var(--on-glass-muted); letter-spacing: 0.06em; margin: 8px 0 0; }
[data-design="v2"] .sky-count strong { color: var(--num-accent); font-size: 14px; margin: 0 1px; }
/* 星 */
[data-design="v2"] .sky-star { position: absolute; transform: translate(-50%, -50%); background: none; border: none; padding: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: sky-twinkle var(--tw, 3s) ease-in-out var(--delay, 0s) infinite; box-sizing: content-box; }
[data-design="v2"] .sky-star img { display: block; width: 100%; height: 100%; object-fit: contain; transform: rotate(var(--rot, 0deg)); filter: drop-shadow(var(--sky-star-glow)); }
[data-design="v2"] .sky-star-l { width: 50px; height: 50px; }
[data-design="v2"] .sky-star-m { width: 34px; height: 34px; }
[data-design="v2"] .sky-star-s { width: 10px; height: 10px; padding: 10px; }
[data-design="v2"] .sky-star-s i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--sky-dust); box-shadow: 0 0 6px 1px var(--sky-dust); opacity: 0.85; transform: scale(var(--dot, 0.7)); }
[data-design="v2"] .sky-star.selected { animation: none; }
[data-design="v2"] .sky-star.selected::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--sky-ring); box-shadow: 0 0 12px var(--sky-ring), 0 0 4px var(--sky-ring) inset; }
[data-design="v2"] .sky-star.selected img { filter: drop-shadow(0 0 14px rgba(255,220,140,1)) brightness(1.15); }
[data-design="v2"] .sky-star.is-new { animation: sky-birth 1.6s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes sky-twinkle { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.9); } }
@keyframes sky-birth { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1.6); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
[data-design="v2"] .sky-burst { position: absolute; width: 170px; height: 170px; transform: translate(-50%, -50%); pointer-events: none; animation: sky-burst 2.4s ease-out both; }
[data-design="v2"] .sky-burst img { width: 100%; height: 100%; object-fit: contain; }
@keyframes sky-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-20deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4) rotate(25deg); } }
/* 星とカードをつなぐ点線 */
[data-design="v2"] .sky-link { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
[data-design="v2"] .sky-link line { stroke: var(--sky-ring); stroke-width: 1.2; stroke-dasharray: 3 5; stroke-linecap: round; opacity: 0.85; }
/* 流れ星: 細い光の筋（先端に光の玉） */
[data-design="v2"] .sky-meteor { position: absolute; left: 0; top: 0; width: var(--len, 240px); height: 40px; transform-origin: 100% 50%; background: none; border: none; padding: 0; margin: 0; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; }
[data-design="v2"] .sky-meteor::before { content: ''; position: absolute; top: -14px; bottom: -14px; right: -18px; left: calc(100% - 70px); } /* 当たり判定は先端だけ（星のタップを邪魔しない） */
[data-design="v2"] .sky-meteor-tail { position: absolute; right: 4px; top: 50%; height: 2px; width: calc(100% - 4px); transform: translateY(-50%); border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(214,206,255,0.18) 35%, rgba(255,255,255,0.95) 100%); box-shadow: 0 0 6px rgba(200,190,255,0.35); }
[data-design="v2"] .sky-meteor-head { position: absolute; right: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 8px 2px rgba(255,255,255,0.95), 0 0 22px 6px rgba(200,190,255,0.6); }
[data-design="v2"][data-theme="lavender"] .sky-meteor-tail, [data-design="v2"][data-theme="sakura"] .sky-meteor-tail, [data-design="v2"][data-theme="mint"] .sky-meteor-tail, [data-design="v2"][data-theme="sky"] .sky-meteor-tail,
[data-design="v2"][data-theme="cream"] .sky-meteor-tail, [data-design="v2"][data-theme="pearl"] .sky-meteor-tail, [data-design="v2"][data-theme="coral"] .sky-meteor-tail, [data-design="v2"][data-theme="lilac"] .sky-meteor-tail { background: linear-gradient(90deg, rgba(110,80,190,0) 0%, rgba(110,80,190,0.25) 35%, rgba(90,60,170,0.95) 100%); box-shadow: none; }
[data-design="v2"][data-theme="lavender"] .sky-meteor-head, [data-design="v2"][data-theme="sakura"] .sky-meteor-head, [data-design="v2"][data-theme="mint"] .sky-meteor-head, [data-design="v2"][data-theme="sky"] .sky-meteor-head,
[data-design="v2"][data-theme="cream"] .sky-meteor-head, [data-design="v2"][data-theme="pearl"] .sky-meteor-head, [data-design="v2"][data-theme="coral"] .sky-meteor-head, [data-design="v2"][data-theme="lilac"] .sky-meteor-head { background: #FFFFFF; box-shadow: 0 0 6px 2px rgba(255,255,255,0.9), 0 0 14px 4px rgba(110,80,190,0.6); }
/* 空の演出用 canvas */
.sky-fx-canvas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* 星がないとき・デモ表示 */
[data-design="v2"] .sky-empty { position: fixed; left: 24px; right: 24px; top: 42%; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--on-glass); font-family: var(--font-display); line-height: 1.9; }
[data-design="v2"] .sky-empty p { margin: 0; text-shadow: var(--text-glow); }
[data-design="v2"] .sky-demo-note { position: fixed; left: 16px; right: 16px; bottom: calc(var(--nav-h) + 8px); z-index: 1; text-align: center; font-size: 10.5px; color: var(--on-glass-muted); margin: 0; pointer-events: none; }
/* カード（ガラス） */
[data-design="v2"] .sky-popup {
position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 14px); z-index: 60; max-width: 536px; margin: 0 auto; padding: 16px 44px 16px 18px;
background: var(--glass-bg); color: var(--on-glass); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: var(--glass-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: v2-fade-in .25s ease;
}
[data-design="v2"][data-theme="starry"] .sky-popup { background: rgba(18,16,48,0.9); }
/* アプリ内（embed）: ナビが無いので画面の下端に。星が隠れないようコンパクトに */
[data-design="v2"] .sky-embed ~ .sky-popup, [data-design="v2"] .sky-embed .sky-popup { bottom: max(10px, env(safe-area-inset-bottom, 0px)); padding: 12px 40px 12px 14px; }
[data-design="v2"] .sky-embed .sky-popup .sky-popup-text { -webkit-line-clamp: 2; margin: 6px 0 10px; }
[data-design="v2"] .sky-embed .sky-popup .sky-popup-actions .btn { padding: 10px 8px; }
[data-design="v2"] .sky-embed .sky-popup-close { top: 4px; right: 4px; }
[data-design="v2"] .sky-popup-close { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border: none; background: none; color: var(--on-glass-muted); font-size: 15px; cursor: pointer; }
[data-design="v2"] .sky-popup-kicker { font-size: 11px; color: var(--on-glass-soft); letter-spacing: 0.06em; }
[data-design="v2"] .sky-popup-kicker.is-shooting { color: var(--gold); }
[data-design="v2"] .sky-popup-kicker.is-shooting::before { content: '✦ '; }
[data-design="v2"] .sky-popup-date { font-family: var(--font-display); font-size: 13px; color: var(--on-glass-soft); margin-top: 4px; }
[data-design="v2"] .sky-popup-rank { display: none; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--on-glass); margin-top: 2px; letter-spacing: 0.04em; }
[data-design="v2"] .sky-popup-rank.has-rank { display: block; }
[data-design="v2"] .sky-popup-rank strong { color: var(--gold); margin-left: 8px; }
[data-design="v2"] .sky-popup-text { font-size: 13px; line-height: 1.8; margin: 8px 0 14px; color: var(--on-glass-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
[data-design="v2"] .sky-popup-actions { display: flex; gap: 8px; }
[data-design="v2"] .sky-popup-actions .btn { flex: 1; padding: 12px 8px; font-size: 13px; border-radius: 999px; text-decoration: none; text-align: center; }
[data-design="v2"] .sky-popup-actions .btn-secondary { color: var(--on-glass); border: 1.5px solid rgba(var(--color-accent-rgb), 0.55); background: transparent; }
[data-design="v2"] .sky-popup-actions .btn.hidden { display: none; }
/* ホームの入口カード */
[data-design="v2"] .home-sky-card::before { background-image: url('../img/design/sky/star-l.webp?v=20260919a'); width: 52px; height: 52px; margin: 0 4px; filter: drop-shadow(0 0 10px rgba(255,236,190,0.7)); }
/* 占いページ: 全画面の空に星が飛んでいく */
.sky-launch { position: fixed; inset: 0; z-index: 1300; background: #0F1030 var(--sky-base, none) center bottom / cover no-repeat; opacity: 0; transition: opacity .6s ease; cursor: pointer; overflow: hidden; }
.sky-launch.show { opacity: 1; }
.sky-launch::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,30,0.55) 0%, rgba(10,8,30,0.15) 40%, rgba(10,8,30,0) 70%); pointer-events: none; }
/* 明るいテーマでは薄い空に星も文字も溶けるので、夕暮れの紗をかける（アプリの SkyLaunch と同じ） */
[data-theme="lavender"] .sky-launch::before, [data-theme="sakura"] .sky-launch::before, [data-theme="mint"] .sky-launch::before, [data-theme="sky"] .sky-launch::before, [data-theme="cream"] .sky-launch::before, [data-theme="pearl"] .sky-launch::before, [data-theme="coral"] .sky-launch::before, [data-theme="lilac"] .sky-launch::before { background: linear-gradient(180deg, rgba(22,16,52,0.78) 0%, rgba(22,16,52,0.62) 40%, rgba(22,16,52,0.5) 70%); }
.sky-launch-head { position: absolute; left: 0; right: 0; top: 14%; text-align: center; color: #FFFFFF; z-index: 1; pointer-events: none; }
.sky-launch-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid rgba(var(--color-accent-rgb, 190,180,255), 0.85); box-shadow: 0 0 18px rgba(var(--color-accent-rgb, 190,180,255), 0.5); margin-bottom: 14px; }
.sky-launch-icon img { width: 26px; height: 26px; }
.sky-launch-title { font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-size: 19px; font-weight: 700; letter-spacing: 0.08em; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.sky-launch-sub { font-size: 12.5px; color: rgba(247,243,255,0.85); margin-top: 6px; letter-spacing: 0.04em; }
.sky-launch-horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: url('../img/design/sky/horizon.webp?v=20260919a') center bottom / cover no-repeat; opacity: 0.95; pointer-events: none; }
.sky-launch-skip { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: 11px; color: rgba(247,243,255,0.6); letter-spacing: 0.08em; pointer-events: none; z-index: 1; }
.sky-launch .sky-fx-canvas { z-index: 2; }
/* 完了後の帯 */
.sky-fly-note { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h, 80px) + 14px); z-index: 1200; max-width: 420px; display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 14px; border-radius: 16px; background: rgba(28,26,74,0.94); color: #FFFFFF; box-shadow: 0 10px 30px rgba(8,6,30,0.5); border: 1px solid rgba(var(--color-accent-rgb, 190,180,255), 0.5); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; }
.sky-fly-note.show { opacity: 1; transform: translateY(0); }
.sky-fly-note > img { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 0 6px rgba(255,236,190,0.8)); }
.sky-fly-note-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13px; }
.sky-fly-note-body a { color: var(--color-accent-soft, #CFC4FF); font-weight: 700; text-decoration: none; font-size: 13px; }
.sky-fly-note-close { flex: none; width: 34px; height: 34px; border: none; background: none; color: rgba(247,243,255,0.7); font-size: 14px; cursor: pointer; }
/* 「自分」タブはチップが2つなので右の添え書きは出さず、チップを折り返さない */
[data-design="v2"] #mineTab .sort-chips { padding-right: 0; flex-wrap: wrap; }
[data-design="v2"] #mineTab .sort-chips::after { content: none; }
/* ========== 夢占い結果（モーダル。参考画像の形） ========== */
[data-design="v2"] .fr-modal { padding: 28px 12px; align-items: center; background: var(--color-overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
[data-design="v2"] .fr-modal .modal-content.fr-card {
position: relative; overflow: hidden; max-width: 560px; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; padding: 22px 16px 18px; border-radius: 26px;
background: var(--surface-paper); color: var(--paper-text); border: 1px solid rgba(255,255,255,0.7); box-shadow: var(--paper-shadow);
}
[data-design="v2"] .fr-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 300px; background: var(--img-scene) center top / cover no-repeat; opacity: 0.55; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.6) 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.6) 45%, transparent 100%); pointer-events: none; }
[data-design="v2"] .fr-card > * { position: relative; z-index: 1; }
[data-design="v2"] .fr-close { position: sticky; top: 0; float: right; margin: -8px -4px 0 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.7); background: rgba(59,47,92,0.55); color: #FFFFFF; font-size: 15px; cursor: pointer; z-index: 2; }
[data-design="v2"] .fr-head { text-align: center; padding: 6px 30px 0; }
[data-design="v2"] .fr-head h2 { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--on-glass); margin: 0; text-shadow: var(--text-glow); }
[data-design="v2"] .fr-head h2 img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(246,197,106,0.6)); }
[data-design="v2"] .fr-sub { font-family: var(--font-display); font-size: 12px; color: var(--on-glass); margin: 6px 0 0; letter-spacing: 0.02em; white-space: nowrap; text-shadow: var(--text-glow); }
[data-design="v2"] .fr-rule { display: block; width: 60%; height: 14px; margin: 6px auto 12px; background: url('../img/design/sparkle.webp?v=20260918d') center / 14px 14px no-repeat, linear-gradient(90deg, transparent 0%, rgba(246,197,106,0.9) 42%, transparent 46%, transparent 54%, rgba(246,197,106,0.9) 58%, transparent 100%) center / 100% 1px no-repeat; }
[data-design="v2"] .fr-overall {
width: min(260px, 100%); margin: 0 auto 14px; padding: 16px 14px 14px; border-radius: 18px; text-align: center; color: #FFFFFF;
background: linear-gradient(160deg, var(--color-primary-hover) 0%, var(--color-primary) 55%, var(--color-accent-dark) 100%);
border: 2px solid rgba(255,255,255,0.55); box-shadow: 0 10px 26px rgba(var(--color-primary-rgb),0.4), 0 0 0 1px rgba(255,255,255,0.25) inset;
}
[data-design="v2"] .fr-overall-label { display: inline-block; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.2em; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,0.22); }
[data-design="v2"] .fr-overall-value { display: block; font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1.2; margin: 6px 0 4px; text-shadow: 0 2px 10px rgba(0,0,0,0.25); }
[data-design="v2"] .fr-overall-value::before, [data-design="v2"] .fr-overall-value::after { content: '❧'; font-size: 20px; opacity: 0.85; margin: 0 10px; vertical-align: 8px; }
[data-design="v2"] .fr-overall-value::after { display: inline-block; transform: scaleX(-1); }
[data-design="v2"] .fr-overall-note { display: block; font-size: 12px; line-height: 1.7; opacity: 0.95; }
[data-design="v2"] .fr-grid, [data-design="v2"] .fr-lucky { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-design="v2"] .fr-lucky { margin-top: 8px; }
[data-design="v2"] .fr-tile { display: flex; align-items: center; gap: 8px; padding: 10px 10px; border-radius: 14px; background: var(--pill-bg); border: 1px solid var(--pill-border); box-shadow: 0 2px 8px rgba(59,47,92,0.06); min-width: 0; }
[data-design="v2"] .fr-tile-icon { flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
[data-design="v2"] .fr-tile-icon img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(59,47,92,0.2)); }
[data-design="v2"] .fr-emoji { font-style: normal; font-size: 30px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(59,47,92,0.2)); }
[data-design="v2"] .fr-swatch { display: block; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px rgba(59,47,92,0.15), 0 3px 8px rgba(59,47,92,0.2); }
[data-design="v2"] .fr-tile-body { display: flex; flex-direction: column; min-width: 0; }
[data-design="v2"] .fr-tile-label { font-size: 10px; color: var(--paper-text-secondary); letter-spacing: 0; white-space: nowrap; }
[data-design="v2"] .fr-tile-value { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--paper-text); line-height: 1.3; }
[data-design="v2"] .fr-tile.lv-good .fr-tile-value { color: var(--paper-accent); }
[data-design="v2"] .fr-tile.lv-care .fr-tile-value { color: var(--paper-text-secondary); }
[data-design="v2"] .fr-tile-lucky .fr-tile-value { color: var(--paper-accent); font-size: 15px; }
[data-design="v2"] .fr-tile-note { font-size: 10px; color: var(--paper-text-secondary); line-height: 1.5; margin-top: 1px; }
[data-design="v2"] .fr-message { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--pill-bg); border: 1px solid var(--pill-border); }
[data-design="v2"] .fr-message p { margin: 0; font-size: 13px; line-height: 1.9; color: var(--paper-text); }
[data-design="v2"] .fr-share { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 14px; }
[data-design="v2"] .fr-share-label { flex: none; font-size: 11px; color: var(--paper-text-secondary); white-space: nowrap; }
[data-design="v2"] .fr-share-label::before { content: '✦ '; color: var(--gold); }
[data-design="v2"] .fr-share .share-btns { width: 100%; margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
[data-design="v2"] .fr-share .share-btns button { padding: 10px 2px; font-size: 11.5px; }
@media (max-width: 380px) { [data-design="v2"] .fr-tile-icon, [data-design="v2"] .fr-tile-icon img { width: 40px; height: 40px; } [data-design="v2"] .fr-emoji { font-size: 26px; } [data-design="v2"] .fr-tile-value { font-size: 15px; } }
/* ========== 過去の夢（日記一覧） ========== */
[data-design="v2"] .dl-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 14px; margin-bottom: 12px; }
[data-design="v2"] .dl-control { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--on-glass-soft); }
[data-design="v2"] .dl-control select { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-glass); background: var(--fill-glass); color: var(--on-glass); font-size: 13px; }
[data-design="v2"] .dl-check input { width: 18px; height: 18px; accent-color: var(--color-primary); }
[data-design="v2"] .dl-summary { font-size: 11px; color: var(--on-glass-muted); margin: 0 4px 8px; }
[data-design="v2"] .dl-item { position: relative; margin-bottom: 8px; }
[data-design="v2"] .dl-main { display: block; padding: 12px 14px; border-radius: 16px; background: var(--surface-paper); color: var(--paper-text); border: 1px solid rgba(255,255,255,0.7); box-shadow: var(--paper-shadow); text-decoration: none; }
[data-design="v2"] .dl-item.is-none .dl-main { background: var(--glass-bg); color: var(--on-glass); border-color: var(--glass-border); box-shadow: none; }
[data-design="v2"] .dl-item.is-none .dl-text, [data-design="v2"] .dl-item.is-none .dl-date { color: var(--on-glass-soft); }
[data-design="v2"] .dl-main { position: relative; overflow: hidden; }
[data-design="v2"] .dl-art { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); opacity: 0.9; pointer-events: none; }
[data-design="v2"] .dl-item.has-art .dl-top, [data-design="v2"] .dl-item.has-art .dl-text { position: relative; z-index: 1; }
[data-design="v2"] .dl-item.has-art .dl-text { padding-right: 100px; }
[data-design="v2"] .dl-item.has-art .dl-main { min-height: 92px; }
[data-design="v2"] .dl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
[data-design="v2"] .dl-date { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--paper-text); }
[data-design="v2"] .dl-text { margin: 0; font-size: 13px; line-height: 1.7; color: var(--paper-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 56px; }
[data-design="v2"] .dl-badge { flex: none; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
[data-design="v2"] .dl-badge-done { background: rgba(var(--color-primary-rgb), 0.12); color: var(--paper-accent); }
[data-design="v2"] .dl-badge-done.rank-best { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #3B2F5C; }
[data-design="v2"] .dl-badge-todo { background: rgba(59,47,92,0.08); color: var(--paper-text-secondary); }
[data-design="v2"] .dl-badge-none { background: var(--fill-glass); color: var(--on-glass-muted); }
[data-design="v2"] .dl-fortune { position: absolute; right: 12px; bottom: 12px; font-size: 12px; font-weight: 700; color: #FFFFFF; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary)); box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.35); }
[data-design="v2"] .dl-more { text-align: center; margin: 12px 0 0; }
[data-design="v2"] .dl-more .btn { border-radius: 999px; padding: 12px 28px; }
[data-design="v2"] .dl-empty { text-align: center; font-family: var(--font-display); color: var(--on-glass-soft); padding: 30px 0; }
[data-design="v2"] .fr-tile-text { padding-left: 14px; }
[data-design="v2"] .fr-search { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; font-size: 10px; color: var(--paper-text-secondary); }
[data-design="v2"] .fr-search a { display: inline-block; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(var(--color-accent-rgb), 0.5); color: var(--paper-accent); font-size: 10.5px; font-weight: 700; text-decoration: none; background: var(--fill-glass); }
/* おはようカード: 文言は中央、記録済みはアクセント色 */
[data-design="v2"] .morning-greeting, [data-design="v2"] .morning-note { text-align: center; }
[data-design="v2"] .morning-done { color: var(--paper-accent); }
/* ========== マイクの許可の案内（日記モーダルと同じ見た目） ========== */
[data-design="v2"] #micPermissionOverlay { background: var(--color-overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 14px; align-items: center; }
[data-design="v2"] #micPermissionOverlay .modal-content {
position: relative; overflow: hidden; border-radius: 26px; padding: 26px 20px 22px !important; text-align: center;
background: var(--modal-glass); color: var(--on-glass);
border: 1px solid rgba(var(--color-accent-rgb),0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 18px 50px rgba(8,6,30,0.35), 0 0 24px rgba(var(--color-accent-rgb),0.18);
}
[data-design="v2"] #micPermissionOverlay .modal-content::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(var(--color-accent-rgb),0.22), transparent 70%), radial-gradient(ellipse 55% 35% at 0% 100%, rgba(var(--color-primary-rgb),0.16), transparent 70%); }
[data-design="v2"] #micPermissionOverlay .modal-content::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.9; background: url('../img/design/sparkle.webp?v=20260918d') 92% 6% / 22px no-repeat, url('../img/design/sparkle.webp?v=20260918d') 84% 13% / 12px no-repeat, url('../img/design/sparkle.webp?v=20260918d') 4% 62% / 18px no-repeat, url('../img/design/sparkle.webp?v=20260918d') 96% 48% / 14px no-repeat; }
[data-design="v2"] #micPermissionOverlay .modal-content > * { position: relative; z-index: 1; }
[data-design="v2"] #micPermissionOverlay .modal-body { padding: 0 !important; margin: 0; }
[data-design="v2"] #micPermissionOverlay img { width: 76px !important; height: 76px !important; filter: drop-shadow(0 0 10px rgba(var(--color-accent-rgb),0.55)); }
[data-design="v2"] #micPermissionOverlay h3 { font-family: var(--font-display); font-size: 20px !important; font-weight: 700; color: var(--heading-color); letter-spacing: 0.04em; text-shadow: var(--heading-glow); margin: 0 0 6px !important; }
[data-design="v2"] #micPermissionOverlay h3::after { content: ''; display: block; width: 62%; height: 16px; margin: 8px auto 6px; background: url('../img/design/sparkle.webp?v=20260918d') center / 16px 16px no-repeat, linear-gradient(90deg, transparent 0%, rgba(var(--color-accent-rgb),0.75) 40%, transparent 44%, transparent 56%, rgba(var(--color-accent-rgb),0.75) 60%, transparent 100%) center / 100% 1px no-repeat; }
[data-design="v2"] #micPermissionOverlay p { color: var(--on-glass-soft) !important; font-size: 13px !important; line-height: 1.8 !important; }
[data-design="v2"] #micPermissionOverlay .modal-body > div[style*="text-align:left"] { background: var(--fill-glass) !important; border: 1px dashed rgba(var(--color-accent-rgb),0.45); border-radius: 14px !important; color: var(--on-glass-soft) !important; }
[data-design="v2"] #micPermissionOverlay strong, [data-design="v2"] #micPermissionOverlay b { color: var(--on-glass) !important; }
[data-design="v2"] #micPermissionOverlay .btn { flex: 1; border-radius: 999px; padding: 13px 10px; font-weight: 700; }
[data-design="v2"] #micPermissionOverlay .btn-secondary { border: 1.5px solid rgba(var(--color-accent-rgb),0.7); color: var(--on-glass); background: var(--fill-glass); }
/* ========== 共通モーダル（診断の確認・レポート・規約・プラン管理・回数切れ・図鑑の詳細）: 日記モーダルと同じ面 ========== */
[data-design="v2"] .modal:not(#diaryModal):not(#micPermissionOverlay):not(.fr-modal) { background: var(--color-overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 20px 12px; }
[data-design="v2"] .modal:not(#diaryModal):not(#micPermissionOverlay):not(.fr-modal) .modal-content:not(.paper):not(.fr-card),
[data-design="v2"] .dict-detail-card {
position: relative; overflow: hidden; border-radius: 24px; padding: 22px 18px 18px !important;
background: var(--modal-glass); color: var(--on-glass);
border: 1px solid rgba(var(--color-accent-rgb),0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 18px 50px rgba(8,6,30,0.35), 0 0 24px rgba(var(--color-accent-rgb),0.18);
max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto;
}
[data-design="v2"] .modal:not(#diaryModal):not(#micPermissionOverlay):not(.fr-modal) .modal-content:not(.paper):not(.fr-card)::before,
[data-design="v2"] .dict-detail-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(var(--color-accent-rgb),0.2), transparent 70%), radial-gradient(ellipse 55% 35% at 0% 100%, rgba(var(--color-primary-rgb),0.14), transparent 70%); }
[data-design="v2"] .modal:not(#diaryModal):not(#micPermissionOverlay):not(.fr-modal) .modal-content:not(.paper):not(.fr-card) > *,
[data-design="v2"] .dict-detail-card > * { position: relative; z-index: 1; }
[data-design="v2"] .modal .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid rgba(var(--color-accent-rgb),0.35); }
[data-design="v2"] .modal .modal-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--heading-color); text-shadow: var(--heading-glow); margin: 0; }
[data-design="v2"] .modal .modal-close { min-width: 36px; min-height: 36px; border-radius: 50%; color: var(--on-glass-soft); font-size: 16px; }
[data-design="v2"] .modal .modal-close:hover { background: var(--fill-glass); color: var(--on-glass); }
[data-design="v2"] .modal .modal-body { color: var(--on-glass); }
[data-design="v2"] .modal .modal-body p, [data-design="v2"] .modal .modal-body div { color: inherit; }
[data-design="v2"] .modal .modal-body [style*="color:#ccc"], [data-design="v2"] .modal .modal-body [style*="color: #ccc"], [data-design="v2"] .modal .modal-body [style*="color:var(--color-text-secondary)"] { color: var(--on-glass-soft) !important; }
[data-design="v2"] .modal .modal-body [style*="color:var(--color-text-primary)"], [data-design="v2"] .modal .modal-body strong { color: var(--on-glass) !important; }
[data-design="v2"] .modal .modal-body h3 { color: var(--heading-color); font-family: var(--font-display); }
[data-design="v2"] .modal .btn-primary { border-radius: 999px; }
[data-design="v2"] .modal .btn-secondary { border-radius: 999px; border: 1.5px solid rgba(var(--color-accent-rgb),0.7); color: var(--on-glass); background: var(--fill-glass); }
[data-design="v2"] .modal .btn-block { width: 100%; }
[data-design="v2"] .modal .modal-body button[style*="color:#f44336"] { border-radius: 999px !important; }
[data-design="v2"] .modal .legal-modal-body, [data-design="v2"] .modal .legal-modal-body * { color: var(--on-glass) !important; }
[data-design="v2"] .modal .legal-modal-body th, [data-design="v2"] .modal .legal-modal-body td { border-color: var(--line-glass) !important; background: transparent !important; }
/* ホーム画面に追加（PWA）の案内カードとモーダル */
[data-design="v2"] .pwa-card { position: relative; margin: 0 0 14px; background: var(--fill-glass); border: 1px solid var(--line-glass); border-radius: 16px; }
[data-design="v2"] .pwa-card-body { display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 12px; cursor: pointer; }
[data-design="v2"] .pwa-card-icon { width: 44px; height: 44px; border-radius: 11px; flex: none; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
[data-design="v2"] .pwa-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-design="v2"] .pwa-card-text strong { font-size: 14px; color: var(--on-glass); font-weight: 600; line-height: 1.4; }
[data-design="v2"] .pwa-card-text span { font-size: 12px; color: var(--on-glass-soft); }
[data-design="v2"] .pwa-card-arrow { margin-left: auto; color: var(--on-glass-muted); font-size: 20px; }
[data-design="v2"] .pwa-card-close { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: none; background: none; color: var(--on-glass-muted); font-size: 14px; cursor: pointer; border-radius: 50%; }
[data-design="v2"] .pwa-card-close:hover { background: rgba(255,255,255,0.08); }
[data-design="v2"] .pwa-guide-modal { max-width: 440px; }
[data-design="v2"] .pwa-lead { font-size: 14.5px; line-height: 1.7; color: var(--on-glass); margin: 0 0 14px; }
[data-design="v2"] .pwa-steps { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 10px; }
[data-design="v2"] .pwa-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--on-glass); }
[data-design="v2"] .pwa-steps strong { color: var(--heading-color); font-weight: 600; }
[data-design="v2"] .pwa-step-no { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--pill-bg); border: 1px solid var(--pill-border); color: var(--heading-color); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
[data-design="v2"] .pwa-ios-share { display: inline-block; width: 16px; height: 18px; vertical-align: -3px; margin: 0 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
[data-design="v2"] .pwa-note { font-size: 12.5px; color: var(--on-glass-muted); line-height: 1.6; margin: 6px 0 0; }
[data-design="v2"] #pwaInstallNowBtn { margin-bottom: 14px; }
html.is-pwa .pwa-card, html.is-pwa #pwaMenuRow { display: none !important; }
/* プラン選択（アップグレード）画面は下部ナビを出さない（戻るは上部ヘッダー） */
[data-design="v2"] body.page-checkout .bottom-nav { display: none; }
[data-design="v2"] body.page-checkout { padding-bottom: 24px; }
/* モーダル表示中は下部ナビを隠す（法的表記などの長いモーダルでナビが重ならないように） */
[data-design="v2"] body.modal-open .bottom-nav { display: none; }
[data-design="v2"] body:has(.modal.show) .bottom-nav { display: none; }
[data-design="v2"] body.modal-open { padding-bottom: 16px; }
/* 法的モーダル（利用規約・プライバシー・特商法）: 表は「項目名の下に内容」の縦積み。左揃え、細い区切り線 */
[data-design="v2"] .modal .legal-modal-body { text-align: left; }
[data-design="v2"] .modal .legal-modal-body .legal-card { background: none; border: none; padding: 0; backdrop-filter: none; }
[data-design="v2"] .modal .legal-modal-body .legal-table,
[data-design="v2"] .modal .legal-modal-body .legal-table tbody,
[data-design="v2"] .modal .legal-modal-body .legal-table tr,
[data-design="v2"] .modal .legal-modal-body .legal-table th,
[data-design="v2"] .modal .legal-modal-body .legal-table td { display: block; width: 100%; box-sizing: border-box; text-align: left; }
[data-design="v2"] .modal .legal-modal-body .legal-table tr { padding: 12px 0 13px; border-bottom: 1px solid var(--line-glass); }
[data-design="v2"] .modal .legal-modal-body .legal-table tr:last-child { border-bottom: none; }
[data-design="v2"] .modal .legal-modal-body .legal-table th { padding: 0 0 5px; border: none; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--heading-color) !important; white-space: normal; min-width: 0; }
[data-design="v2"] .modal .legal-modal-body .legal-table td { padding: 0; border: none; font-size: 14.5px; line-height: 1.75; color: var(--on-glass) !important; }
[data-design="v2"] .modal .legal-modal-body .legal-table td a { color: var(--on-glass) !important; text-decoration: underline; text-underline-offset: 3px; }
[data-design="v2"] .modal .legal-modal-body h2 { font-size: 15px; font-weight: 600; color: var(--heading-color) !important; margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-glass); text-shadow: none; }
[data-design="v2"] .modal .legal-modal-body h2:first-child { margin-top: 4px; }
[data-design="v2"] .modal .legal-modal-body h3 { font-size: 14px; font-weight: 600; color: var(--on-glass) !important; margin: 14px 0 6px; }
[data-design="v2"] .modal .legal-modal-body p, [data-design="v2"] .modal .legal-modal-body li { font-size: 14px; line-height: 1.8; color: var(--on-glass-soft) !important; margin: 0 0 8px; }
[data-design="v2"] .modal .legal-modal-body ul, [data-design="v2"] .modal .legal-modal-body ol { padding-left: 1.3em; margin: 0 0 10px; }
[data-design="v2"] .modal .legal-modal-body .legal-section { margin: 0; padding: 0; background: none; border: none; }
[data-design="v2"] .modal .legal-modal-body .legal-card + .legal-card { margin-top: 18px; }
[data-design="v2"] .modal .legal-modal-body .legal-updated, [data-design="v2"] .modal .legal-modal-body .legal-date { font-size: 12px; color: var(--on-glass-muted) !important; margin-bottom: 12px; }
[data-design="v2"] .modal .legal-modal-body .back-link { display: none; }
/* 図鑑の詳細 */
[data-design="v2"] .dict-detail-overlay { background: var(--color-overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
[data-design="v2"] .dict-detail-card { text-align: center; max-width: 360px; }
[data-design="v2"] .dict-detail-img { width: 124px; height: 124px; margin: 4px auto 12px; border: 3px solid rgba(var(--color-accent-rgb),0.4); background: rgba(0,0,0,0.15); box-shadow: 0 0 18px rgba(var(--color-accent-rgb),0.25); }
[data-design="v2"] .dict-detail-name { font-family: var(--font-display); font-size: 22px; color: var(--heading-color); text-shadow: var(--heading-glow); }
[data-design="v2"] .dict-detail-category { color: var(--on-glass-soft); }
[data-design="v2"] .dict-detail-desc { color: var(--on-glass); background: var(--fill-glass); border-radius: 14px; padding: 12px 14px; }
[data-design="v2"] .dict-detail-locked-msg { color: var(--on-glass-muted); font-style: normal; font-family: var(--font-display); font-size: 18px; letter-spacing: 0.2em; }
[data-design="v2"] .dict-detail-date { color: var(--on-glass-muted); }
[data-design="v2"] .dict-detail-premium { border-color: rgba(246,197,106,0.6); }
[data-design="v2"] .dict-detail-premium-msg { background: var(--fill-glass); border: 1px dashed rgba(246,197,106,0.55); color: var(--on-glass-soft); border-radius: 14px; }
[data-design="v2"] .dict-detail-card .btn { border-radius: 999px; }
[data-design="v2"] .dict-detail-card .btn-secondary { border: 1.5px solid rgba(var(--color-accent-rgb),0.7); color: var(--on-glass); background: var(--fill-glass); }
[data-design="v2"] .dict-detail-card .dict-premium-badge { position: absolute; top: 14px; left: 14px; }
/* ========== 「まだ診断結果がありません」 ========== */
[data-design="v2"] .analysis-empty { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--on-glass); margin: 0 0 16px; }
[data-design="v2"] .analysis-empty .analysis-empty-icon { width: 64px !important; height: 64px !important; opacity: 1 !important; filter: drop-shadow(0 0 12px rgba(var(--color-accent-rgb),0.5)); }
[data-design="v2"] .analysis-empty h3 { font-family: var(--font-display); font-size: 19px; color: var(--heading-color); text-shadow: var(--heading-glow); }
[data-design="v2"] .analysis-empty p { color: var(--on-glass-soft) !important; }
[data-design="v2"] .analysis-empty .btn-secondary { border-radius: 999px; border: 1.5px solid rgba(var(--color-accent-rgb),0.7); color: var(--on-glass); background: var(--fill-glass); padding: 11px 22px; text-decoration: none; }
[data-design="v2"] .analysis-empty .btn-primary { border-radius: 999px; }
[data-design="v2"] #analysisResultCard:not(.hidden) + #analysisHistorySection, [data-design="v2"] .collapsible-section { margin-top: 4px; }
/* ========== 通知（トースト） ========== */
[data-design="v2"] .toast {
left: 12px; right: 12px; bottom: calc(var(--nav-h) + 14px); width: auto; min-width: 0; max-width: 480px; margin: 0 auto; transform: translateY(16px);
display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; font-size: 13px; line-height: 1.6;
background: var(--modal-glass); color: var(--on-glass); border: 1px solid rgba(var(--color-accent-rgb),0.55); box-shadow: 0 12px 30px rgba(8,6,30,0.4), 0 0 18px rgba(var(--color-accent-rgb),0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
[data-design="v2"] .toast.show { transform: translateY(0); }
[data-design="v2"] .toast::before { content: '✦'; flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #FFFFFF; background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary)); box-shadow: 0 0 10px rgba(var(--color-primary-rgb),0.5); }
[data-design="v2"] .toast-success { border-left-width: 1px; } [data-design="v2"] .toast-success::before { content: '✓'; background: linear-gradient(135deg, #5FBF7A, #2E8B57); box-shadow: 0 0 10px rgba(95,191,122,0.5); }
[data-design="v2"] .toast-error { border-left-width: 1px; } [data-design="v2"] .toast-error::before { content: '!'; background: linear-gradient(135deg, #E0524F, #B8322F); box-shadow: 0 0 10px rgba(224,82,79,0.5); }
[data-design="v2"] .toast-warning { border-left-width: 1px; } [data-design="v2"] .toast-warning::before { content: '!'; background: linear-gradient(135deg, #F3B04C, #C98A1E); box-shadow: 0 0 10px rgba(243,176,76,0.5); }
[data-design="v2"] .toast-info { border-left-width: 1px; }
/* ========== ホーム: 無制限のタイル ========== */
[data-design="v2"] .usage-count.usage-unlimited { font-size: 26px; letter-spacing: 0.04em; }
[data-design="v2"] .usage-count.usage-unlimited small { display: block; margin: 4px 0 0; font-size: 10.5px; letter-spacing: 0.06em; }
[data-design="v2"] .usage-unlimited-item .usage-bar-fill { background: linear-gradient(90deg, var(--color-accent-soft), var(--gold)); }
/* ========== マイページ上部: 画像＋名前・プランの2行 ========== */
[data-design="v2"] .mp-overview { gap: 14px; padding: 16px 18px; }
[data-design="v2"] .mp-nickname { font-family: var(--font-display); font-size: 17px; margin-bottom: 6px; }
[data-design="v2"] .mp-plan-line { display: flex; }
[data-design="v2"] .mp-plan-line .mp-plan-tag { padding: 5px 12px; font-size: 11px; }
/* ========== 星の空: ページ自体はスクロールしない（空は固定） ========== */
[data-design="v2"] body.page-sky { overflow: hidden; height: 100vh; height: 100dvh; padding-bottom: 0; }
[data-design="v2"] .sky-page { min-height: 0; padding-bottom: 0; }
/* ========== レポート（週次・月次） ========== */
[data-design="v2"] #reportModal .modal-content { padding: 0 !important; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; }
[data-design="v2"] #reportModal .modal-header { position: sticky; top: 0; z-index: 3; margin: 0; padding: 14px 12px 12px 18px; background: var(--modal-glass); }
[data-design="v2"] #reportModal .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 8px; flex: 1 1 auto; min-height: 0; }
[data-design="v2"] #reportModal .modal-content > div[style*="text-align:center"] { padding: 10px 16px 18px !important; }
[data-design="v2"] #reportModal .share-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; margin: 0 auto; }
[data-design="v2"] .rp { color: var(--on-glass); }
[data-design="v2"] .rp-head { text-align: center; padding: 4px 0 12px; }
[data-design="v2"] .rp-type { display: inline-block; font-size: 11px; letter-spacing: 0.16em; color: var(--on-glass-soft); border: 1px solid rgba(var(--color-accent-rgb),0.5); border-radius: 999px; padding: 3px 12px; }
[data-design="v2"] .rp-headline { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--heading-color); text-shadow: var(--heading-glow); margin: 10px 0 4px; line-height: 1.4; }
[data-design="v2"] .rp-period { font-family: var(--font-display); font-size: 12.5px; color: var(--on-glass-soft); margin: 0; letter-spacing: 0.06em; }
[data-design="v2"] .rp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 6px; }
[data-design="v2"] .rp-stat { text-align: center; padding: 10px 4px 8px; border-radius: 14px; background: var(--fill-glass); border: 1px solid var(--line-glass); }
[data-design="v2"] .rp-stat strong { display: block; font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--num-accent); }
[data-design="v2"] .rp-stat strong small { font-size: 11px; margin-left: 1px; }
[data-design="v2"] .rp-stat span { display: block; font-size: 10px; color: var(--on-glass-muted); margin-top: 5px; }
[data-design="v2"] .rp-note { font-size: 11.5px; color: var(--on-glass-soft); text-align: center; margin: 4px 0 8px; }
[data-design="v2"] .rp-sec { margin: 14px 0 0; padding: 14px 14px 12px; border-radius: 18px; background: var(--fill-glass); border: 1px solid var(--line-glass); }
[data-design="v2"] .rp-sec h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--heading-color); margin: 0 0 10px; }
[data-design="v2"] .rp-sec h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--color-accent-rgb),0.6), transparent); }
[data-design="v2"] .rp-sec-icon { font-size: 16px; }
[data-design="v2"] .rp-sec h4 { font-family: var(--font-display); font-size: 13.5px; color: var(--on-glass); margin: 12px 0 4px; }
[data-design="v2"] .rp-sec p { font-size: 13px; line-height: 1.9; color: var(--on-glass); margin: 0; }
[data-design="v2"] .rp-sec p + p { margin-top: 8px; }
[data-design="v2"] .rp-label { font-size: 11px !important; color: var(--on-glass-muted) !important; margin: 10px 0 6px !important; line-height: 1.5 !important; }
[data-design="v2"] .rp-label b { color: var(--on-glass); }
[data-design="v2"] .rp-rank { list-style: none; margin: 0 0 10px; padding: 0; }
[data-design="v2"] .rp-rank li { display: grid; grid-template-columns: 22px 88px 1fr 40px; align-items: center; gap: 8px; margin: 0 0 5px; font-size: 12.5px; }
[data-design="v2"] .rp-rank-no { font-family: var(--font-display); font-weight: 700; color: var(--num-accent); text-align: center; }
[data-design="v2"] .rp-rank-word { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-design="v2"] .rp-rank-bar { height: 8px; border-radius: 99px; background: var(--fill-glass-strong); overflow: hidden; }
[data-design="v2"] .rp-rank-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--color-accent-soft), var(--color-accent-light)); }
[data-design="v2"] .rp-rank-count { font-size: 11px; color: var(--on-glass-muted); text-align: right; white-space: nowrap; }
[data-design="v2"] .rp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
[data-design="v2"] .rp-chip { font-size: 11.5px; padding: 5px 10px; border-radius: 999px; background: var(--fill-glass-strong); color: var(--on-glass); }
[data-design="v2"] .rp-chip small { margin-left: 4px; color: var(--num-accent); font-weight: 700; }
[data-design="v2"] .rp-weeks { list-style: none; margin: 0; padding: 0; }
[data-design="v2"] .rp-weeks li { padding: 8px 0 8px 14px; border-left: 2px solid rgba(var(--color-accent-rgb),0.5); margin: 0 0 6px; }
[data-design="v2"] .rp-weeks b { font-family: var(--font-display); color: var(--num-accent); margin-right: 8px; }
[data-design="v2"] .rp-week-meta { font-size: 11px; color: var(--on-glass-muted); }
[data-design="v2"] .rp-weeks p { margin-top: 4px !important; }
[data-design="v2"] .rp-cats, [data-design="v2"] .rp-weekdays, [data-design="v2"] .rp-elements { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 84px; margin: 0 0 10px; padding: 0 4px; }
[data-design="v2"] .rp-cat, [data-design="v2"] .rp-wd, [data-design="v2"] .rp-el { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 10.5px; color: var(--on-glass-soft); }
[data-design="v2"] .rp-cat i, [data-design="v2"] .rp-wd i, [data-design="v2"] .rp-el i { display: block; width: 60%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--color-accent-light), var(--color-accent-soft)); margin-bottom: 4px; }
[data-design="v2"] .rp-wd.is-top i { background: linear-gradient(180deg, var(--gold), var(--gold-soft)); }
[data-design="v2"] .rp-cat b, [data-design="v2"] .rp-el span { font-size: 10px; color: var(--num-accent); font-weight: 700; }
[data-design="v2"] .rp-el strong { font-family: var(--font-display); font-size: 14px; color: var(--on-glass); }
[data-design="v2"] .rp-ranks { display: flex; flex-wrap: wrap; gap: 6px; }
[data-design="v2"] .rp-rankchip { font-family: var(--font-display); font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--fill-glass-strong); color: var(--on-glass); }
[data-design="v2"] .rp-rankchip b { margin-left: 5px; color: var(--num-accent); }
[data-design="v2"] .rp-rankchip.rank-0 { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #3B2F5C; } [data-design="v2"] .rp-rankchip.rank-0 b { color: #3B2F5C; }
[data-design="v2"] .rp-aspects { display: grid; gap: 6px; margin: 8px 0 4px; }
[data-design="v2"] .rp-aspect { display: grid; grid-template-columns: 56px 1fr; gap: 4px 10px; align-items: center; font-size: 12px; }
[data-design="v2"] .rp-aspect small { grid-column: 2; font-size: 10px; color: var(--on-glass-muted); }
[data-design="v2"] .rp-aspect-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--fill-glass-strong); }
[data-design="v2"] .rp-aspect-bar i { display: block; height: 100%; }
[data-design="v2"] .rp-aspect-bar .lv-0 { background: var(--gold); } [data-design="v2"] .rp-aspect-bar .lv-1 { background: var(--color-accent-light); } [data-design="v2"] .rp-aspect-bar .lv-2 { background: rgba(255,255,255,0.35); } [data-design="v2"] .rp-aspect-bar .lv-3 { background: #8FA4F2; } [data-design="v2"] .rp-aspect-bar .lv-4 { background: #5B7BE0; }
[data-design="v2"] .rp-scores .score-item { background: var(--fill-glass); border-color: var(--line-glass); cursor: default; padding: 9px 12px 10px; }
[data-design="v2"] .rp-scores .score-item::after { content: none; }
[data-design="v2"] .rp-scores .score-label { color: var(--on-glass); }
[data-design="v2"] .rp-scores .score-value { color: var(--num-accent); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
[data-design="v2"] .rp-delta { font-size: 9.5px; font-family: var(--font-family); font-weight: 700; white-space: nowrap; }
[data-design="v2"] .rp-delta-up { color: #7ED9A0; } [data-design="v2"] .rp-delta-down { color: #F4A27E; } [data-design="v2"] .rp-delta-flat { color: var(--on-glass-muted); }
[data-design="v2"] .rp-dtype { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
[data-design="v2"] .rp-dtype strong { font-family: var(--font-display); font-size: 18px; color: var(--heading-color); }
[data-design="v2"] .rp-dtype span:last-child { font-size: 12px; color: var(--on-glass-soft); }
[data-design="v2"] .rp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 6px; }
[data-design="v2"] .rp-pillar { text-align: center; padding: 10px 4px; border-radius: 14px; background: var(--fill-glass-strong); }
[data-design="v2"] .rp-pillar span { display: block; font-size: 10px; color: var(--on-glass-muted); }
[data-design="v2"] .rp-pillar strong { display: block; font-family: var(--font-display); font-size: 22px; color: var(--heading-color); margin: 3px 0 2px; letter-spacing: 0.1em; }
[data-design="v2"] .rp-pillar small { font-size: 10px; color: var(--on-glass-soft); }
[data-design="v2"] .rp-lucky { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
[data-design="v2"] .rp-lucky-tile { padding: 10px 12px; border-radius: 14px; background: var(--fill-glass-strong); }
[data-design="v2"] .rp-lucky-wide { grid-column: 1 / -1; }
[data-design="v2"] .rp-lucky-tile span { display: block; font-size: 10px; color: var(--on-glass-muted); }
[data-design="v2"] .rp-lucky-tile strong { display: block; font-family: var(--font-display); font-size: 17px; color: var(--heading-color); margin: 3px 0 2px; }
[data-design="v2"] .rp-lucky-tile small { display: block; font-size: 11px; color: var(--on-glass-soft); line-height: 1.6; }
[data-design="v2"] .rp-advice { margin: 0; padding: 0; list-style: none; }
[data-design="v2"] .rp-advice li { position: relative; padding: 6px 0 6px 24px; font-size: 13px; line-height: 1.8; }
[data-design="v2"] .rp-advice li::before { content: '✦'; position: absolute; left: 4px; top: 7px; color: var(--gold); font-size: 12px; }
[data-design="v2"] .rp-next { margin: 16px 0 0; text-align: center; font-family: var(--font-display); font-size: 15px; color: var(--heading-color); }
[data-design="v2"] .rp-next span { display: block; font-size: 10.5px; letter-spacing: 0.16em; color: var(--on-glass-muted); margin-bottom: 4px; }
[data-design="v2"] .rp-closing { text-align: center; font-family: var(--font-display); font-size: 13px; color: var(--on-glass-soft); margin: 10px 0 0; }
[data-design="v2"] .rp-foot { font-size: 10.5px; color: var(--on-glass-muted); text-align: center; margin: 16px 0 4px; line-height: 1.6; }
[data-design="v2"] .rp-sec-icon img { width: 22px; height: 22px; object-fit: contain; display: block; filter: drop-shadow(0 0 6px rgba(var(--color-accent-rgb),0.5)); }
[data-design="v2"] #reportModal .modal-body .rp-share { padding: 14px 0 6px !important; }
[data-design="v2"] #reportModal .modal-content > div[style*="text-align:center"]:not(.rp-share) { display: none; }
[data-design="v2"] .dict-detail-hint { font-size: 12px !important; letter-spacing: 0 !important; color: var(--on-glass-muted) !important; margin-bottom: 14px; }
/* 診断の免責（医療・心理の診断ではないことを明示） */
[data-design="v2"] .analysis-disclaimer { font-size: 11.5px; color: var(--on-glass-muted); line-height: 1.6; text-align: center; margin: 10px 4px 0; }
/* マイページのアカウント削除リンク（目立たせないが到達できる） */
[data-design="v2"] .mp-footer-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
[data-design="v2"] .mp-delete-link { font-size: 12px; color: var(--on-glass-muted); text-decoration: underline; text-underline-offset: 3px; }
/* シェア（ShareKit）: 画像で共有 / X / LINE / Facebook / 画像を保存 / リンクをコピー */
[data-design="v2"] .share-kit { margin-top: 14px; }
[data-design="v2"] .share-kit .share-btns { grid-template-columns: repeat(3, 1fr); gap: 8px; }
[data-design="v2"] .share-btn-native { background: linear-gradient(135deg, #E0743A, #F09A5C); color: #fff; grid-column: 1 / -1; font-weight: 700; padding: 14px 8px !important; font-size: 14px !important; }
[data-design="v2"] .analysis-share .share-note { color: var(--paper-text-secondary, #6E6488); }
[data-design="v2"] .share-note { font-size: 11px; color: var(--on-glass-muted); margin: 8px 0 0; text-align: center; }
[data-design="v2"] .fr-modal .share-note, [data-design="v2"] .fr-modal .share-label { color: var(--paper-text-secondary, #6E6488); }
[data-design="v2"] .fr-share .share-kit { margin-top: 0; }
[data-design="v2"] .fr-share .share-kit .share-label { font-size: 12px; margin: 0 0 8px; text-align: center; }