/* ============================================================
   開運旅行術 ─ ボロ儲けカレンダー  共通スタイル（モバイルファースト）
   トーン: 白ベース＋金。清潔・余白・細い罫・上質感。差し色は金のみ。
   既定 = スマホ。min-width ブレークポイントで広い画面に拡張する。
   ============================================================ */
:root{
  --bg-top:#ffffff; --bg-bot:#f6f1e6;        /* 白 → オフホワイト */
  --gold:#b8901f; --gold-lt:#9a7715; --gold-dk:#876710;   /* 金はアクセント専用(罫線/バッジ/ボタン/星) */
  --ink:#201f1b; --muted:#4f4b43; --faint:#736c61;        /* 本文=ほぼ黒、補助=濃いグレー(可読性優先) */
  --red:#c0392b; --blue:#3a6ea5;
  --card:#ffffff; --surface:#faf6ec;          /* 面/入力欄のうっすら地 */
  --line:rgba(184,144,31,.22);                /* 細い金の罫 */
  --line-soft:rgba(60,50,20,.10);             /* 中立の細罫 */
  --shadow:0 2px 12px rgba(120,100,40,.08);
  --shadow-sm:0 1px 4px rgba(120,100,40,.07);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Zen Kaku Gothic New',sans-serif;
  background:linear-gradient(180deg,var(--bg-top),var(--bg-bot)) fixed;
  color:var(--ink); min-height:100vh; min-height:100dvh;
  overflow-x:hidden;
}
.app{ max-width:920px; margin:0 auto; padding:14px 14px calc(28px + var(--safe-b)); }

/* ---------- Header ---------- */
header{ text-align:center; padding:24px 0 16px; position:relative; }
header h1{
  font-family:'Noto Serif JP',serif; font-size:1.8rem; font-weight:700;
  background:linear-gradient(135deg,var(--gold-dk),var(--gold),var(--gold-dk));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:.28em; line-height:1.3;
}
.subtitle{ color:var(--gold-dk); font-size:.82rem; font-weight:700; margin-top:8px; letter-spacing:.14em; }
.nav-pill{
  display:inline-block; margin-top:14px; cursor:pointer;
  background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:8px 18px; color:var(--muted);
  font-size:.8rem; letter-spacing:.12em; text-decoration:none; transition:all .3s;
  box-shadow:var(--shadow-sm);
}
.nav-pill:active{ color:var(--gold); border-color:var(--gold); }
header .nav-pill{ position:absolute; top:18px; right:0; }

/* ---------- Input ---------- */
.input-section{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:18px 16px; margin-bottom:20px; box-shadow:var(--shadow);
}
.input-intro{
  text-align:center; color:var(--muted); font-size:.88rem; line-height:1.9;
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line-soft);
}
.input-intro strong{ color:var(--ink); font-weight:700; }

/* スマホ既定: 年は横長、月日時分は等幅。タップしやすい大きさ。 */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.form-grid label{ display:flex; flex-direction:column; gap:6px; }
.form-grid label span{ font-size:.8rem; color:var(--muted); letter-spacing:.05em; }
.form-grid .col-2{ grid-column:span 2; }
.form-grid input,.form-grid select{
  background:var(--surface); border:1px solid var(--line);
  color:var(--ink); padding:12px 12px; border-radius:10px;
  font-size:16px; /* iOS のズーム防止 */ font-family:inherit;
  width:100%; appearance:none; -webkit-appearance:none;
}
/* select の矢印 */
.form-grid select{
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 1.15em, calc(100% - 11px) 1.15em;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px;
}
.form-grid input:focus,.form-grid select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,144,31,.12); }
.error{ color:var(--red); margin-top:12px; font-size:.9rem; text-align:center; }

.btn-kantei{
  display:block; width:100%; margin-top:18px; padding:16px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dk));
  border:none; border-radius:12px; color:#fffdf7;
  font-size:1.15rem; font-weight:700; font-family:'Noto Serif JP',serif;
  letter-spacing:.4em; cursor:pointer; transition:transform .15s,box-shadow .3s;
  box-shadow:0 4px 14px rgba(184,144,31,.28);
}
.btn-kantei:active{ transform:scale(.98); }
.btn-kantei:disabled{ opacity:.5; cursor:not-allowed; }

/* 副ボタン（方位を見る等） */
.btn-secondary{
  display:block; width:100%; margin-top:10px; padding:13px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; color:var(--gold-dk); font-size:1rem; font-family:'Noto Serif JP',serif;
  letter-spacing:.18em; cursor:pointer; transition:all .2s; font-weight:700;
}
.btn-secondary:active{ background:rgba(184,144,31,.12); }

/* ---------- Loading ---------- */
.loading{ display:none; text-align:center; padding:48px 20px; }
.loading.show{ display:block; }
.loading-orbit{ width:80px; height:80px; margin:0 auto 22px; position:relative; }
.loading-orbit::before,.loading-orbit::after{ content:''; position:absolute; border-radius:50%; }
.loading-orbit::before{ width:100%; height:100%; border:2px solid rgba(184,144,31,.2); border-top-color:var(--gold); animation:spin 1.6s linear infinite; }
.loading-orbit::after{ inset:14px; background:radial-gradient(circle,var(--gold),var(--gold-dk)); animation:pulse 2s ease-in-out infinite; }
@keyframes spin{ to{transform:rotate(360deg)} }
@keyframes pulse{ 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }
.loading-text{ color:var(--gold-lt); letter-spacing:.4em; font-family:'Noto Serif JP',serif; font-size:1.1rem; margin-bottom:8px; }
.loading-detail{ color:var(--faint); font-size:.8rem; letter-spacing:.12em; min-height:1.2em; }
.loading-progress{ margin:16px auto 0; max-width:240px; height:3px; background:rgba(184,144,31,.18); border-radius:3px; overflow:hidden; }
.loading-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-dk),var(--gold)); transition:width .6s ease; }

/* ---------- Result ---------- */
#result{ display:none; }
#result.show{ display:block; animation:fadeIn .5s; }
@keyframes fadeIn{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.reading-hero-img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:14px; margin:4px 0 14px; box-shadow:var(--shadow-sm); }
.result-header{ text-align:center; padding:18px 0; border-bottom:1px solid var(--line); margin-bottom:8px; }
.result-header h2{ font-family:'Noto Serif JP',serif; color:var(--ink); font-size:1.4rem; }
.result-header p{ color:var(--muted); margin-top:6px; font-size:.88rem; }

/* セクション間ジャンプ用の横スクロール目次（長文対策） */
.toc{
  position:sticky; top:0; z-index:20; margin:0 -14px 16px; padding:10px 14px;
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.85));
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line);
  scrollbar-width:none;
}
.toc::-webkit-scrollbar{ display:none; }
.toc a{
  flex:0 0 auto; font-size:.8rem; letter-spacing:.08em; text-decoration:none;
  color:var(--muted); border:1px solid var(--line); border-radius:18px;
  padding:7px 14px; background:var(--card); white-space:nowrap;
}
.toc a:active{ color:var(--gold); border-color:var(--gold); }

.section-title{
  scroll-margin-top:56px;
  font-family:'Noto Serif JP',serif; color:var(--ink); font-size:1.1rem;
  border-bottom:1px solid var(--line); padding-bottom:8px; margin:30px 0 16px;
  letter-spacing:.16em; display:flex; align-items:center;
}
.section-title .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; flex:0 0 24px; color:var(--gold-dk);
  background:rgba(184,144,31,.14); border-radius:50%; font-size:.85rem; margin-right:10px;
  font-family:'Zen Kaku Gothic New',sans-serif;
}

/* ---------- うまれもち（4柱）---------- */
.pillars-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.pillar-col{
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:12px 4px; text-align:center; min-width:0; box-shadow:var(--shadow-sm);
}
.pillar-label{ font-size:.72rem; color:var(--faint); margin-bottom:4px; letter-spacing:.05em; }
.pillar-kanshi{ font-family:'Noto Serif JP',serif; font-size:1.5rem; color:var(--ink); margin:6px 0; line-height:1.2; }
.pillar-gogyo{ font-size:.72rem; color:var(--muted); }
.pillar-meta{ font-size:.66rem; color:var(--faint); margin-top:8px; line-height:1.7; }
.pillar-meta .label{ color:var(--faint); display:block; }
.pillar-meta .val{ color:var(--ink); }

/* ---------- 鑑定文（DeepSeek 長文）---------- */
.reading-prose{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:18px 16px; font-size:.95rem; line-height:1.95;
  color:var(--ink); letter-spacing:.01em; box-shadow:var(--shadow-sm);
}
.reading-prose h2{
  font-family:'Noto Serif JP',serif; font-size:1.02rem; color:var(--ink); font-weight:700;
  letter-spacing:.16em; margin:22px 0 12px; padding-left:12px; border-left:3px solid var(--gold);
}
.reading-prose h2:first-child{ margin-top:0; }
.reading-prose p{ margin:0 0 14px; }
.reading-prose strong{ color:var(--ink); font-weight:700; }

/* ---------- サマリーカード ---------- */
.summary-row{ display:grid; grid-template-columns:1fr; gap:10px; margin:18px 0; }
.summary-card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; box-shadow:var(--shadow-sm); }
.summary-card-label{ font-size:.7rem; letter-spacing:.28em; color:var(--faint); margin-bottom:8px; }
.summary-card-days{ font-family:'Noto Serif JP',serif; font-size:1rem; line-height:1.8; color:var(--ink); }
.summary-card-days .day-num{ color:var(--ink); font-weight:700; font-size:1.1rem; }
.summary-card.best{ border-color:rgba(184,144,31,.45); }
.summary-card.best .summary-card-label{ color:var(--gold-dk); }
.summary-card.worst{ border-color:rgba(192,57,43,.3); }
.summary-card.worst .summary-card-label{ color:var(--red); }
.summary-card.worst .summary-card-days .day-num{ color:var(--red); }
.lucky-color{ text-align:center; margin-top:12px; background:rgba(184,144,31,.07); border:1px solid var(--line); border-radius:10px; padding:14px; }
.lucky-color-label{ font-size:.7rem; letter-spacing:.28em; color:var(--faint); margin-bottom:8px; }
.lucky-color-value{ font-family:'Noto Serif JP',serif; font-size:1.25rem; color:var(--ink); letter-spacing:.16em; font-weight:700; }

/* ---------- カレンダー ---------- */
.calendar{ margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 8px; box-shadow:var(--shadow-sm); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-head{ padding:6px 2px; text-align:center; border-radius:4px; font-size:.7rem; letter-spacing:.06em; color:var(--muted); background:rgba(184,144,31,.1); }
.cal-head.sun{ color:var(--red); } .cal-head.sat{ color:var(--blue); }
.cal-day{ background:var(--surface); border:1px solid var(--line-soft); border-radius:5px; padding:4px 2px; min-height:52px; font-size:.66rem; display:flex; flex-direction:column; align-items:center; }
.cal-day.empty{ background:transparent; border:none; }
.cal-day.tentyu{ background:rgba(192,57,43,.07); border-color:rgba(192,57,43,.2); }
.cal-day.best{ background:rgba(184,144,31,.12); border-color:rgba(184,144,31,.35); }
.cal-day.today{ background:rgba(184,144,31,.2); border-color:var(--gold); box-shadow:0 0 0 2px rgba(184,144,31,.25); }
.cal-num{ font-family:'Noto Serif JP',serif; font-size:.95rem; color:var(--ink); font-weight:700; }
.cal-day.tentyu .cal-num{ color:var(--red); }
.cal-stars{ margin-top:2px; color:var(--gold); font-size:.55rem; letter-spacing:-.02em; }
.cal-day.tentyu .cal-stars{ color:var(--red); }
.cal-kanshi{ margin-top:1px; font-family:'Noto Serif JP',serif; font-size:.62rem; color:var(--muted); }
.cal-legend{ display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center; margin-top:12px; font-size:.7rem; color:var(--faint); }
.cal-legend i{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px; border:1px solid var(--line); }
.cal-legend .lg-best{ background:rgba(184,144,31,.35); }
.cal-legend .lg-tentyu{ background:rgba(192,57,43,.25); }
.cal-legend .lg-today{ background:rgba(184,144,31,.6); }

/* ---------- 画像保存ボタン ---------- */
.save-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  background:var(--surface); border:1px solid var(--line); color:var(--gold-lt);
  padding:10px 18px; border-radius:10px; font-size:.85rem; letter-spacing:.06em;
  font-family:inherit; cursor:pointer; transition:all .2s;
}
.save-btn:active{ background:rgba(184,144,31,.14); }
.save-btn:disabled{ opacity:.5; }
.save-btn svg{ width:16px; height:16px; fill:currentColor; }
.save-row{ text-align:center; }

/* キャプチャ中だけ付与（背景を不透明に） */
.capturing{ background:linear-gradient(180deg,var(--bg-top),var(--bg-bot)) !important; }

/* ---------- その他 ---------- */
.error-banner{ background:rgba(192,57,43,.07); border-left:3px solid var(--red); padding:12px 16px; margin:16px 0; border-radius:6px; font-size:.85rem; color:var(--red); }
.result-footer{ text-align:center; padding:28px 0 8px; display:flex; flex-direction:column; gap:14px; align-items:center; }
.btn-back{ background:transparent; border:1px solid var(--line); color:var(--muted); padding:12px 26px; border-radius:8px; font-family:'Noto Serif JP',serif; font-size:.9rem; letter-spacing:.25em; cursor:pointer; transition:all .3s; }
.btn-back:active{ border-color:var(--gold); color:var(--gold); }

/* 上へ戻る FAB */
.fab-top{
  position:fixed; right:16px; bottom:calc(16px + var(--safe-b)); z-index:30;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--gold); font-size:1.2rem; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(120,100,40,.18);
}
.fab-top.show{ display:flex; }

/* トースト（濃色・一時表示） */
.toast{
  position:fixed; left:50%; bottom:calc(80px + var(--safe-b)); transform:translateX(-50%) translateY(20px);
  background:#2b2a27; border:1px solid rgba(184,144,31,.4); color:#fdfaf2;
  padding:12px 20px; border-radius:10px; font-size:.85rem; z-index:50;
  opacity:0; transition:opacity .3s,transform .3s; pointer-events:none; max-width:90vw; text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================
   広い画面（タブレット/PC）への拡張
   ============================================================ */
@media(min-width:600px){
  .app{ padding:16px; }
  header{ padding:32px 0 20px; }
  header h1{ font-size:2.2rem; letter-spacing:.3em; }
  .form-grid{ grid-template-columns:repeat(4,1fr); }
  .form-grid .col-2{ grid-column:auto; }
  .input-section{ padding:24px; }
  .summary-row{ grid-template-columns:1fr 1fr; }
  .reading-prose{ padding:24px 28px; }
  .pillar-kanshi{ font-size:1.8rem; }
  .cal-day{ min-height:64px; font-size:.7rem; }
  .cal-num{ font-size:1rem; }
  .toc{ margin-left:0; margin-right:0; }
}

/* ---------- 運気の波（過去5年〜これから5年）---------- */
.lifeflow{ margin:6px 0 4px; }
.lifeflow-grid{
  display:grid; grid-template-columns:repeat(11,1fr); gap:4px;
  overflow-x:auto; padding-bottom:6px;
}
.lf-year{
  text-align:center; padding:8px 2px; border-radius:8px;
  background:var(--card); border:1px solid var(--line); min-width:46px; box-shadow:var(--shadow-sm);
}
.lf-year.now{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; }
.lf-year.oyasumi{ background:rgba(110,104,92,.10); }
.lf-year.fushime{ background:rgba(184,144,31,.10); }
.lf-y{ font-size:.7rem; color:var(--muted); }
.lf-age{ font-size:.62rem; color:var(--faint); margin-bottom:3px; }
.lf-stars{ font-size:.7rem; color:var(--gold); letter-spacing:-1px; line-height:1.2; }
.lf-tag{ font-size:.58rem; margin-top:3px; min-height:.8em; color:var(--muted); }
.lf-year.oyasumi .lf-tag{ color:var(--muted); }
.lf-year.fushime .lf-tag{ color:var(--gold-dk); }
.lf-note{ font-size:.78rem; color:var(--muted); line-height:1.7; margin:10px 0 0;
  padding:9px 12px; border-left:3px solid var(--gold); background:rgba(184,144,31,.06); border-radius:6px; }
.lf-note b{ color:var(--gold-dk); }

@media (min-width:560px){ .lf-y{ font-size:.78rem; } .lf-stars{ font-size:.8rem; } }

/* ---------- 認証・プロフィール画面 ---------- */
.auth-card{
  max-width:420px; margin:24px auto; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:26px 22px; text-align:center;
  box-shadow:var(--shadow);
}
.auth-card h2{ font-family:'Noto Serif JP',serif; color:var(--ink); font-size:1.3rem; letter-spacing:.1em; }
.auth-lead{ color:var(--muted); font-size:.86rem; line-height:1.9; margin:12px 0 18px; }
.auth-lead b{ color:var(--ink); }
.auth-field{ display:flex; flex-direction:column; gap:6px; text-align:left; margin-bottom:14px; }
.auth-field span{ font-size:.8rem; color:var(--muted); letter-spacing:.05em; }
.auth-field input{
  width:100%; background:var(--surface); border:1px solid var(--line);
  color:var(--ink); padding:12px; border-radius:10px; font-size:16px; font-family:inherit;
}
.auth-field input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,144,31,.12); }
.auth-link{
  display:inline-block; margin-top:14px; background:none; border:none; cursor:pointer;
  color:var(--muted); font-size:.82rem; letter-spacing:.08em; text-decoration:underline; font-family:inherit;
}
.auth-link:active{ color:var(--gold); }

/* ============================================================
   ホーム（今日の運気＋今月カレンダー）／SPA ビュー
   ============================================================ */
.btn-back-sm{
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-family:inherit; font-size:.85rem; letter-spacing:.06em; padding:4px 0 14px; margin-bottom:4px;
}
.btn-back-sm:active{ color:var(--gold); }

.home-loading{ text-align:center; color:var(--faint); font-size:.85rem; padding:28px 0; }

/* 今日カード */
.home-today{
  background:linear-gradient(135deg,rgba(184,144,31,.08),var(--card));
  border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px; margin-bottom:18px;
  box-shadow:var(--shadow);
}
.home-today-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.home-today-date{ font-family:'Noto Serif JP',serif; font-size:1.05rem; color:var(--ink); letter-spacing:.06em; }
.home-today-stars{ color:var(--gold); font-size:1.2rem; letter-spacing:1px; }
.home-tag{ display:inline-block; margin-top:8px; font-size:.7rem; padding:3px 10px; border-radius:20px; letter-spacing:.08em; }
.home-tag.oyasumi{ background:rgba(110,104,92,.10); color:var(--muted); border:1px solid var(--line-soft); }
.home-today-advice{ color:var(--ink); font-size:.92rem; line-height:1.85; margin-top:10px; }
.home-today-houi{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:3px; }
.home-houi-label{ font-size:.68rem; letter-spacing:.2em; color:var(--faint); }
.home-houi-dirs{ font-family:'Noto Serif JP',serif; font-size:1.15rem; color:var(--ink); letter-spacing:.1em; font-weight:700; }
.home-houi-none{ font-size:.88rem; color:var(--muted); }
.home-houi-load{ font-size:.82rem; color:var(--faint); }
.home-houi-btn{ margin-top:14px; width:100%; }

/* ナビ（個人診断・10年・今月）*/
.home-nav{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:22px; }
.home-nav-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:15px 18px;
  cursor:pointer; font-family:inherit; transition:all .25s; position:relative; box-shadow:var(--shadow-sm);
}
.home-nav-btn::after{ content:'›'; position:absolute; right:18px; top:50%; transform:translateY(-50%); color:var(--gold); font-size:1.3rem; }
.home-nav-btn:active{ border-color:var(--gold); background:rgba(184,144,31,.06); }
.home-nav-btn b{ font-family:'Noto Serif JP',serif; font-size:1.02rem; color:var(--ink); letter-spacing:.08em; }
.home-nav-btn span{ font-size:.74rem; color:var(--faint); letter-spacing:.04em; }

/* カレンダー：タップ可能な日 */
.cal-day.tap{ cursor:pointer; transition:transform .12s; }
.cal-day.tap:active{ transform:scale(.94); }

/* 日付タップ詳細（ボトムシート）*/
.day-sheet{ position:fixed; inset:0; z-index:80; display:none; }
.day-sheet.show{ display:block; }
.day-sheet-backdrop{ position:absolute; inset:0; background:rgba(43,42,39,.35); }
.day-sheet-panel{
  position:absolute; left:0; right:0; bottom:0; max-width:920px; margin:0 auto;
  background:var(--card); border-top:2px solid var(--gold);
  border-radius:18px 18px 0 0; padding:22px 22px calc(26px + var(--safe-b)); text-align:center;
  animation:sheetUp .25s ease; box-shadow:0 -6px 24px rgba(120,100,40,.14);
}
@keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.day-sheet-close{
  position:absolute; right:14px; top:10px; background:none; border:none; color:var(--muted);
  font-size:1.6rem; line-height:1; cursor:pointer; padding:4px 8px;
}
.day-sheet-date{ font-family:'Noto Serif JP',serif; font-size:1.2rem; color:var(--ink); letter-spacing:.08em; }
.day-sheet-stars{ color:var(--gold); font-size:1.5rem; letter-spacing:2px; margin-top:8px; }
.day-sheet-advice{ color:var(--ink); font-size:.95rem; line-height:1.9; margin-top:14px; }

@media(min-width:600px){
  .home-nav{ grid-template-columns:1fr 1fr 1fr; }
}

/* 使い方リンク（ホーム下部）＋ガイドページ */
.help-link{
  display:block; width:100%; margin-top:14px; background:none; border:none; cursor:pointer;
  color:var(--faint); font-family:inherit; font-size:.82rem; letter-spacing:.06em; padding:8px;
}
.help-link:active{ color:var(--gold); }
.inline-link{ color:var(--gold-lt); cursor:pointer; white-space:nowrap; text-decoration:underline; }
.inline-link:active{ color:var(--gold); }
.help-page .reading-prose{ margin-bottom:6px; }
.help-page .reading-prose p{ margin:0 0 8px; }

/* ============================================================
   LP（未ログインの入口）／ 白×金
   ============================================================ */
#gate-lp{ max-width:560px; margin:0 auto; }

/* ヒーロー */
.lp-hero{ text-align:center; padding:14px 8px 26px; }
.lp-hero-img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:16px; margin:0 0 20px; box-shadow:var(--shadow); }
.lp-catch{
  font-family:'Noto Serif JP',serif; font-size:1.1rem; line-height:1.95; color:var(--ink);
  letter-spacing:.03em; margin:6px 0 22px;
}
.lp-catch strong{ color:var(--gold-dk); font-weight:700; }
.lp-cta{ max-width:360px; margin-left:auto; margin-right:auto; }
.lp-login-link{
  display:block; width:100%; margin-top:12px; background:none; border:none; cursor:pointer;
  color:var(--muted); font-family:inherit; font-size:.86rem; letter-spacing:.04em; text-decoration:underline; padding:8px;
}
.lp-login-link:active{ color:var(--gold); }

/* 3つの価値 */
.lp-values{ display:grid; grid-template-columns:1fr; gap:12px; margin:8px 0 30px; }
.lp-value{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px 18px 16px; box-shadow:var(--shadow-sm); text-align:center;
}
.lp-value-icon{ display:block; width:64px; height:64px; margin:0 auto 8px; object-fit:contain; }
.lp-value b{ display:block; font-family:'Noto Serif JP',serif; font-size:1.06rem; color:var(--ink); letter-spacing:.06em; margin-bottom:6px; }
.lp-value span{ display:block; font-size:.86rem; line-height:1.8; color:var(--muted); }

/* お試しの始め方 */
.lp-steps{
  background:linear-gradient(180deg,rgba(184,144,31,.06),var(--card));
  border:1px solid var(--line); border-radius:16px; padding:22px 18px; margin-bottom:24px; box-shadow:var(--shadow-sm);
}
.lp-steps-title{
  text-align:center; font-family:'Noto Serif JP',serif; font-size:1.12rem; color:var(--ink);
  letter-spacing:.1em; margin-bottom:18px;
}
.lp-step-list{ list-style:none; padding:0; margin:0 0 18px; }
.lp-step-list li{ display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line); }
.lp-step-list li:first-child{ border-top:none; }
.lp-step-n{
  flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-dk)); color:#fffdf7;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Noto Serif JP',serif;
}
.lp-step-list b{ display:block; font-size:.98rem; color:var(--ink); margin-bottom:2px; }
.lp-step-list p{ font-size:.85rem; line-height:1.75; color:var(--muted); margin:0; }
.lp-step-list p b{ display:inline; color:var(--gold-dk); }

/* 本登録案内 */
.lp-register{ text-align:center; padding:4px 6px 8px; }
.lp-register p{ font-size:.9rem; line-height:1.85; color:var(--muted); margin-bottom:16px; }
.lp-register strong{ color:var(--ink); }
.lp-register .btn-kantei{ max-width:360px; margin-left:auto; margin-right:auto; }

/* 認証カードの戻る */
.auth-back{
  position:absolute; left:14px; top:12px; background:none; border:none; cursor:pointer;
  color:var(--muted); font-family:inherit; font-size:.82rem; letter-spacing:.04em; padding:4px 6px;
}
.auth-back:active{ color:var(--gold); }
.auth-card{ position:relative; }

@media(min-width:600px){
  .lp-values{ grid-template-columns:1fr 1fr 1fr; }
}

/* ============================================================
   ファネル: お試し(trial) / アップセル / 再シェア
   ============================================================ */
/* お試しホームの導入カード */
.trial-intro{
  background:linear-gradient(135deg,rgba(184,144,31,.10),var(--card));
  border:1px solid var(--line); border-radius:16px; padding:22px 18px; text-align:center; box-shadow:var(--shadow);
}
.trial-intro-badge{
  display:inline-block; font-size:.7rem; letter-spacing:.12em; color:var(--gold-dk);
  background:rgba(184,144,31,.14); border:1px solid var(--line); border-radius:20px; padding:3px 12px; margin-bottom:12px;
}
.trial-char{ display:block; height:160px; width:auto; margin:0 auto 4px; }
.profile-char{ display:block; height:140px; width:auto; margin:0 auto 8px; }
.upsell-char{ display:block; height:150px; width:auto; margin:0 auto 8px; }
.trial-cta-char{ display:block; height:140px; width:auto; margin:0 auto 6px; }
.day-char{ display:block; height:130px; width:auto; margin:6px auto 0; }
.trial-intro-title{ font-family:'Noto Serif JP',serif; font-size:1.2rem; color:var(--ink); letter-spacing:.06em; margin-bottom:10px; }
.trial-intro p{ font-size:.9rem; line-height:1.85; color:var(--muted); margin-bottom:18px; }
.trial-intro p b{ color:var(--gold-dk); }
.trial-intro .btn-kantei{ max-width:340px; margin-left:auto; margin-right:auto; }

/* ナビの鍵（アクセス不可） */
.home-nav-btn.locked{ opacity:.72; }
.home-nav-btn.locked::after{ content:'🔒'; font-size:.95rem; color:var(--faint); }
.home-nav-btn.locked b{ color:var(--muted); }

/* アップセル（鍵つき機能を開いた時） */
.upsell{
  text-align:center; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:30px 20px; box-shadow:var(--shadow-sm); margin-top:8px;
}
.upsell-lock{ font-size:2rem; margin-bottom:10px; }
.upsell-title{ font-family:'Noto Serif JP',serif; font-size:1.12rem; color:var(--ink); letter-spacing:.06em; margin-bottom:10px; }
.upsell-msg{ font-size:.88rem; line-height:1.85; color:var(--muted); margin-bottom:18px; }
.upsell .btn-kantei{ max-width:340px; margin-left:auto; margin-right:auto; }

/* 再シェア導線（保存画像に入る） */
.reshare{
  margin-top:22px; padding:16px; text-align:center;
  border:1px dashed var(--gold); border-radius:12px; background:rgba(184,144,31,.06);
}
.reshare-brand{ font-family:'Noto Serif JP',serif; font-size:1.05rem; color:var(--gold-dk); letter-spacing:.16em; margin-bottom:6px; }
.reshare-msg{ font-size:.82rem; line-height:1.8; color:var(--muted); }
.reshare-msg b{ color:var(--ink); }

/* 運気の波: これから5年のモザイク（stage2） */
.lf-year.lf-mosaic{ filter:blur(3px); opacity:.5; pointer-events:none; user-select:none; }
.lf-lock{ text-align:center; font-size:.82rem; color:var(--gold-dk); letter-spacing:.04em; margin-top:10px; }

/* お試し結果下の本登録CTA */
.trial-cta{ text-align:center; padding:22px 6px 8px; }
.trial-cta p{ font-size:.9rem; color:var(--muted); line-height:1.8; margin-bottom:14px; }
.trial-cta .btn-kantei{ max-width:340px; margin-left:auto; margin-right:auto; }

/* ===== 人生年表（10年ごとの流れ）===== */
.timeline{ margin-top:4px; }
.tl-highlights{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.tl-hl{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 12px;
  border-radius:10px; border:1px solid var(--line); background:var(--surface); font-size:.84rem; }
.tl-hl.peak{ border-color:rgba(184,144,31,.5); background:rgba(184,144,31,.08); }
.tl-hl.oyasumi{ border-color:var(--line-soft); background:rgba(60,50,20,.04); }
.tl-hl-when{ font-family:'Noto Serif JP',serif; color:var(--ink); font-weight:700; }
.tl-hl-tag{ font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:8px; letter-spacing:.04em; }
.tl-hl.peak .tl-hl-tag{ color:var(--gold-dk); background:rgba(184,144,31,.18); }
.tl-hl.oyasumi .tl-hl-tag{ color:var(--faint); background:rgba(60,50,20,.08); }
.tl-hl-desc{ color:var(--muted); flex:1 1 100%; line-height:1.6; }

.tl-rows{ display:flex; flex-direction:column; gap:6px; }
.tl-row{ display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--line); box-shadow:var(--shadow-sm); }
.tl-row.tl-s5{ border-left-color:#b8901f; }
.tl-row.tl-s4{ border-left-color:#cdb15a; }
.tl-row.tl-s3{ border-left-color:#bdb6a6; }
.tl-row.tl-s2{ border-left-color:#cdb3a0; }
.tl-row.tl-s1{ border-left-color:#b9a39a; }
.tl-when{ display:flex; flex-direction:column; line-height:1.3; min-width:78px; }
.tl-when .tl-age{ font-family:'Noto Serif JP',serif; color:var(--ink); font-size:.92rem; font-weight:700; }
.tl-when .tl-year{ font-size:.68rem; color:var(--faint); letter-spacing:.02em; }
.tl-stars{ color:var(--gold); letter-spacing:1px; font-size:.82rem; white-space:nowrap; }
.tl-theme{ color:var(--muted); font-size:.82rem; line-height:1.55; }
.tl-summary{ margin-top:14px; }

/* ===== 用語対応表（凡例・専門用語との対応）===== */
.term-legend{ margin:14px 0 6px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); padding:2px 14px; }
.term-legend summary{ cursor:pointer; font-size:.82rem; color:var(--gold-dk); font-weight:700;
  padding:10px 0; letter-spacing:.03em; list-style:none; }
.term-legend summary::-webkit-details-marker{ display:none; }
.term-legend summary::before{ content:"▸ "; color:var(--gold); }
.term-legend[open] summary::before{ content:"▾ "; }
.term-legend-intro{ font-size:.76rem; color:var(--muted); line-height:1.7; margin:2px 0 8px; }
.term-legend-list{ list-style:none; margin:0 0 10px; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:4px 14px; }
.term-legend-list li{ font-size:.78rem; color:var(--muted); line-height:1.7; }
.term-legend-list li b{ color:var(--ink); font-weight:700; }
.term-legend-list .tl-eq{ color:var(--faint); margin:0 4px; }
@media(max-width:480px){ .term-legend-list{ grid-template-columns:1fr; } }
