/* えみり 共通スタイル（全ページ共通）
 * 色・角丸・カードは旧TOP（main-top-v2）と各占術ページの世界観を引き継いでいる。
 * 占術固有のスタイルは assets/css/<占術>.css に分け、クラス名に接頭辞を付ける（例：.num-）。 */

:root {
  --bg: #07050c;
  --card: #171020;
  --card-2: #1c1427;
  --line: #443253;
  --line-soft: rgba(255, 255, 255, .08);
  --gold: #e7c568;
  --gold-soft: rgba(231, 197, 104, .12);
  --purple: #a27cff;
  --purple-strong: #7459ff;
  --text: #faf5ff;
  --muted: #c3b8cf;
  --danger: #ff9b9b;
  --danger-bg: rgba(255, 110, 110, .10);
  --radius: 22px;
  --radius-sm: 14px;
  --serif: Georgia, "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0, #392052 0, #0b0712 35%, #050408 100%) no-repeat, var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.8;
}
a { color: var(--gold); }
a:hover { color: #f3d98f; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -48px; padding: 8px 14px; background: var(--gold); color: #1a1020; border-radius: 10px; z-index: 50; font-weight: 700; }
.skip-link:focus { top: 12px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 16px; }

/* ---- ヘッダー・共通ナビ ---- */
.site-header { border-bottom: 1px solid var(--line-soft); background: rgba(7, 5, 12, .72); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; }
.site-logo { color: var(--text); text-decoration: none; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.site-logo:hover { color: var(--text); }
.site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a, .site-nav .nav-soon { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font-size: 14px; text-decoration: none; color: var(--text); }
.site-nav a:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.site-nav a[aria-current="page"] { background: var(--gold-soft); color: var(--gold); }
.site-nav .nav-soon { color: #9a8fa6; }
.soon-badge { display: inline-block; font-size: 10px; line-height: 1; padding: 4px 6px; border-radius: 999px; border: 1px solid #5d4a6d; color: #b9aec4; letter-spacing: .02em; white-space: nowrap; }

@media (max-width: 600px) {
  .site-header { position: static; }
  .site-header .wrap { padding-top: 10px; padding-bottom: 8px; }
  .site-nav { width: 100%; }
  .site-nav ul { justify-content: space-between; }
  .site-nav a, .site-nav .nav-soon { padding: 7px 8px; font-size: 13px; }
}

/* ---- パンくず ---- */
.breadcrumb { font-size: 12px; color: var(--muted); margin: 16px 0 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 4px; color: #7c6f89; }
.breadcrumb a { color: var(--muted); }

/* ---- ヒーロー ---- */
.hero { text-align: center; padding: 56px 8px 28px; }
.eyebrow { color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: .18em; margin: 0 0 6px; }
.hero h1 { font: 700 clamp(32px, 7vw, 52px)/1.3 var(--serif); margin: 10px 0 14px; }
.hero p { max-width: 680px; margin: 0 auto; color: var(--muted); }
.badges { margin-top: 20px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0; list-style: none; }
.badge { border: 1px solid #68517e; border-radius: 999px; padding: 6px 12px; font-size: 12px; }

/* ---- カード ---- */
.card {
  margin: 16px 0; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(28, 20, 42, .96), rgba(14, 11, 25, .96));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
}
.card h2 { font-size: 22px; margin: 0 0 14px; line-height: 1.5; }
.card h3 { font-size: 17px; margin: 0 0 8px; line-height: 1.6; }
.card p { margin: 0 0 12px; color: #e3dcea; }
.card p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .card { padding: 18px; border-radius: 18px; } }

.section { margin-top: 40px; }
.section > h2 { font-size: 24px; margin: 4px 0 6px; }
.lead { color: var(--muted); margin: 0 0 18px; }

/* ---- ボタン ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; padding: 14px 18px; margin-top: 16px;
  border: 0; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--purple-strong), #d3ae51);
  color: #fff; font: 900 16px var(--sans); letter-spacing: .04em; cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(1.07); color: #fff; }
.btn-ghost { background: rgba(255, 255, 255, .05); border: 1px solid #5b456e; font-weight: 700; }
.link-button { background: none; border: 0; padding: 4px 0; color: var(--gold); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* ---- 生年月日入力（共通部品） ---- */
.bd-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.bd-legend { font-weight: 800; font-size: 15px; margin-bottom: 10px; padding: 0; }
.bd-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.bd-cell label { display: block; font-size: 12px; color: #d7ccef; margin-bottom: 6px; }
.bd-input {
  width: 100%; min-height: 50px; padding: 12px; border-radius: 12px;
  border: 1px solid #52406a; background: #0b0912; color: var(--text); font-size: 16px; font-family: var(--sans);
}
.bd-input[aria-invalid="true"] { border-color: var(--danger); background: #1a0c12; }
.bd-hint { font-size: 12px; color: var(--muted); margin: 8px 0 0 !important; }
.bd-error { margin: 10px 0 0 !important; padding: 10px 12px; border-radius: 10px; background: var(--danger-bg); border: 1px solid rgba(255, 140, 140, .45); color: var(--danger) !important; font-size: 14px; font-weight: 700; }
.bd-tools { margin-top: 4px; text-align: right; }
@media (max-width: 400px) { .bd-row { grid-template-columns: 1fr 1fr; } .bd-cell-year { grid-column: 1 / -1; } }

.profile-box { margin-top: 14px; padding: 14px; border: 1px dashed #52406a; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .02); }
.profile-check { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; cursor: pointer; }
.profile-check input { width: 20px; height: 20px; accent-color: var(--gold); flex: none; }
.profile-note { font-size: 12px; color: var(--muted) !important; margin: 6px 0 0 !important; line-height: 1.7; }
.profile-saved { margin: 8px 0 0 !important; font-size: 13px; }
.profile-saved-text { color: var(--gold); font-weight: 700; }
.profile-status { margin: 6px 0 0 !important; font-size: 12px; color: var(--gold) !important; min-height: 1em; }

/* ---- 占術カード（TOP・相性TOPなど） ---- */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0; margin: 0; list-style: none; }
.tool {
  position: relative; display: flex; flex-direction: column; min-height: 220px; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(145deg, var(--card-2), #0e0a16);
}
.tool.is-ready { border-color: #73549b; background: radial-gradient(circle at top right, #5c368044, transparent 50%), linear-gradient(145deg, #21142e, #0e0a16); }
.tool .tool-icon { font-size: 34px; line-height: 1; }
.tool .tool-tag { font-size: 11px; color: var(--gold); font-weight: 800; letter-spacing: .1em; margin: 12px 0 0; }
.tool h3 { font-size: 19px; margin: 6px 0; }
.tool p { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0 0 16px; }
.tool .tool-actions { margin-top: auto; display: grid; gap: 8px; }
.tool .tool-link { display: block; padding: 11px; text-align: center; text-decoration: none; color: #fff; border-radius: 11px; background: #ffffff0c; border: 1px solid #5b456e; font-weight: 700; font-size: 14px; }
.tool .tool-link:hover { background: #ffffff16; color: #fff; }
.tool .tool-link.primary { background: linear-gradient(90deg, var(--purple-strong), #b98f3f); border-color: transparent; }
.tool.is-soon { opacity: .78; }
.tool .tool-soon { display: block; padding: 11px; text-align: center; border-radius: 11px; border: 1px dashed #5b456e; color: #a99db5; font-size: 13px; }
@media (max-width: 820px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tool-grid { grid-template-columns: 1fr; } .tool { min-height: 0; } }

.feature-box { margin-top: 38px; padding: 32px 22px; border: 1px solid #8b6c32; border-radius: 25px; text-align: center; background: radial-gradient(circle, #59401d44, transparent 65%), #110c12; }
.feature-box h2 { font: 700 28px/1.4 var(--serif); margin: 6px 0; }
.feature-box p { max-width: 680px; margin: 10px auto 16px; color: var(--muted); }

.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.link-list a, .link-list .soon-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #110c18; text-decoration: none; color: var(--text); }
.link-list a:hover { border-color: #8262a4; color: var(--text); }
.link-list .soon-item { color: #a99db5; }
.link-list .arrow { color: var(--gold); }

.prose h2 { font-size: 21px; margin: 0 0 10px; }
.prose h3 { font-size: 16px; margin: 18px 0 6px; }
.prose ul, .prose ol { padding-left: 1.3em; color: #e3dcea; margin: 0 0 12px; }
.prose li { margin: 4px 0; }
.calc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; padding: 14px; border-radius: var(--radius-sm); background: #0d0914; border: 1px solid #3b2c47; font-size: 15px; }
.calc b { color: var(--gold); font-size: 20px; }

.notice { padding: 16px 18px; border-left: 3px solid var(--gold); background: #0d0914; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ---- ロゴ ---- */
.site-logo { display: inline-flex; align-items: center; gap: 8px; font: 700 22px/1 var(--serif); letter-spacing: .12em; }
.site-logo-mark { color: var(--gold); font-size: 20px; }

/* ---- 無料占い／本格占いの切り替え（TOP・本格占いTOP） ---- */
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 0; padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: #0d0914; }
.mode-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 13px; text-decoration: none; color: var(--muted); text-align: center; }
.mode-tab:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.mode-tab .mode-name { font-weight: 900; font-size: 15px; letter-spacing: .04em; }
.mode-tab .mode-note { font-size: 11px; }
.mode-tab.is-current { background: linear-gradient(135deg, #3a2557, #1d1330); color: var(--text); box-shadow: inset 0 0 0 1px #73549b; }
.mode-tab.is-current.is-premium { background: linear-gradient(135deg, #4a3816, #1f170d); box-shadow: inset 0 0 0 1px #8b6c32; }
.mode-tab.is-current .mode-note { color: var(--gold); }
.hero-compact { padding-top: 36px; padding-bottom: 8px; }

/* ---- 今日の運勢 ---- */
.today { margin-top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at top left, #3a245544, transparent 55%), #110c18; display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: center; }
.today-head h2 { font-size: 22px; margin: 4px 0 6px; }
.today-head .lead { margin: 0; font-size: 14px; }
.today-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.today-links a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #5b456e; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); text-decoration: none; color: var(--text); }
.today-links a:hover { border-color: #8262a4; color: var(--text); }
.today-links b { display: block; font-size: 15px; }
.today-links small { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; }
.today-icon { font-size: 26px; line-height: 1; flex: none; }
.today-date { font: 700 13px var(--sans); color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.today-top3 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.today-top3 h3 { font-size: 12px; margin: 0 0 4px; color: var(--gold); letter-spacing: .06em; }
.today-top3 ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; font-size: 14px; font-weight: 700; }
.today-top3 li span { display: inline-block; width: 2.8em; color: var(--muted); font-size: 12px; font-weight: 400; }
@media (max-width: 720px) { .today { grid-template-columns: 1fr; padding: 18px; } }

/* ---- 悩みから選ぶ ---- */
.nayami-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nayami { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #110c18; }
.nayami h3 { font-size: 16px; margin: 0 0 8px; }
.nayami ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nayami a { display: block; padding: 6px 0; font-size: 14px; color: #e9def5; text-decoration: none; border-bottom: 1px dashed #3b2c47; }
.nayami li:last-child a { border-bottom: 0; }
.nayami a::after { content: " →"; color: var(--gold); }
.nayami a:hover { color: var(--gold); }
@media (max-width: 820px) { .nayami-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .nayami-grid { grid-template-columns: 1fr; } }

/* ---- 本格占い ---- */
.premium-teaser .premium-btn { max-width: 320px; margin: 4px auto 0; color: var(--text); }
.premium-teaser p:has(.soon-badge) { margin: 0 auto; }
.premium-status { margin-top: 14px !important; font-size: 14px; }
.premium-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.premium-item { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--card-2), #0e0a16); }
.premium-item.is-first { border-color: #8b6c32; background: radial-gradient(circle at top right, #59401d55, transparent 55%), linear-gradient(145deg, #21180e, #0e0a10); }
.premium-tag { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: .1em; color: var(--gold); }
.premium-item h3 { font: 700 22px/1.4 var(--serif); margin: 4px 0 8px; }
.premium-item p { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.premium-points { margin: 0 0 12px; padding-left: 1.2em; font-size: 13px; color: #e3dcea; }
.premium-points li { margin: 4px 0; }
.premium-soon { margin-top: auto !important; }
.premium-price { color: var(--gold) !important; font: 700 20px var(--serif); margin: 4px 0 8px !important; }
.premium-sample-btn { margin-top: 0; min-height: 44px; color: var(--text); }
.premium-flow { list-style: none; counter-reset: flow; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.premium-flow li { counter-increment: flow; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #110c18; }
.premium-flow li::before { content: counter(flow); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 8px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); font-weight: 900; }
.premium-flow b { display: block; margin-bottom: 4px; }
.premium-flow span { display: block; color: var(--muted); font-size: 13px; }
@media (max-width: 820px) { .premium-grid { grid-template-columns: 1fr; } .premium-flow { grid-template-columns: 1fr; } }

/* ---- フッター ---- */
.site-footer { margin-top: 64px; padding: 32px 0 40px; border-top: 1px solid var(--line-soft); color: #9d92a8; font-size: 13px; }
.site-footer nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0 0 16px; }
.site-footer a { color: #c9bfd3; }
.site-footer .footer-note { margin: 0 0 6px; line-height: 1.8; }
.site-footer .copyright { margin: 12px 0 0; font-size: 12px; }

/* ---- スマホ幅の調整（メニューを1行に・見出しの改行位置） ---- */
@media (max-width: 600px) {
  .site-nav ul { gap: 0; flex-wrap: nowrap; }
  .site-nav a, .site-nav .nav-soon { padding: 6px 5px; font-size: 12px; gap: 3px; white-space: nowrap; }
  .site-nav .soon-badge { font-size: 9px; padding: 3px 4px; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 25px; }
}