/* =====================================================================================
   六星占術 星人診断 — 「天体観測ノート」がテーマ
   -------------------------------------------------------------------------------------
   ・深い藍から夜明けの紫へ抜ける空を背景に、細い罫線と箔押しのような金を重ねる
   ・見出しは明朝体（Shippori Mincho）、本文はゴシックでコントラストをつける
   ・カードは「観測記録の紙片」として、四隅の角飾りと淡い光で浮かせる
   ===================================================================================== */

:root {
  /* 空 */
  --ink:        #070a16;
  --ink-2:      #0c1226;

  /* 箔 */
  --gold:       #d9b26a;
  --gold-soft:  #f0d9a8;
  --gold-dim:   rgba(217, 178, 106, .30);

  /* 文字 */
  --text:       #eef1fb;
  --muted:      #9aa4c6;
  --faint:      #6b7599;

  /* 補助色 */
  --aqua:       #8fd3f4;

  --line:        rgba(255, 255, 255, .10);
  --line-strong: rgba(217, 178, 106, .34);

  --radius:     4px;
  --radius-lg:  6px;

  /* 共通ナビ（rin-nav）の配色をこのアプリに寄せる */
  --rn-bg:       rgba(12, 18, 38, .82);
  --rn-bg-hover: rgba(217, 178, 106, .16);
  --rn-line:     rgba(217, 178, 106, .30);
  --rn-accent:   var(--gold);
  --rn-radius:   6px;

  /* 遊び方・解説パネル（rin-guide）も夜空の色に合わせる */
  --rg-bg:       #0a0f22;
  --rg-fg:       #fff;
  --rg-line:     var(--line);
  --rg-btn-bg:   rgba(217, 178, 106, .10);
  --rg-btn-fg:   var(--gold-soft);
  --rg-btn-line: var(--line-strong);
  --rg-accent:   var(--gold);
  --rg-font:     "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* サイドレール広告の逃げ場（--rail-* は ../_shared/rin-ads.css と ../portal/ad-rail.js が決める） */
  padding-left: var(--rail-left);
  padding-right: var(--rail-right);
  min-height: 100%;
  color: var(--text);
  font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.85;
  background:
    radial-gradient(900px 620px at 78% -8%,  rgba(143, 211, 244, .13), transparent 62%),
    radial-gradient(760px 560px at 12% 12%,  rgba(217, 178, 106, .10), transparent 60%),
    radial-gradient(1100px 900px at 50% 108%, rgba(120, 92, 200, .16), transparent 66%),
    linear-gradient(178deg, var(--ink) 0%, var(--ink-2) 46%, #0a0f22 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* 星をCSSだけで散らす（画像を足さずに空気を作る） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px     at 62% 14%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.6px 1.6px at 84% 38%, rgba(240,217,168,.85), transparent),
    radial-gradient(1px 1px     at 34% 48%, rgba(255,255,255,.50), transparent),
    radial-gradient(1.2px 1.2px at 72% 62%, rgba(255,255,255,.70), transparent),
    radial-gradient(1px 1px     at 10% 72%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 47% 86%, rgba(143,211,244,.75), transparent),
    radial-gradient(1px 1px     at 90% 80%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 26% 6%,  rgba(255,255,255,.60), transparent);
}

body > * { position: relative; z-index: 1; }

.container {
  /* 92vw だとサイドレールの余白を足したときに横にはみ出すので、本文の幅を基準にする */
  width: min(1080px, calc(100% - 8vw));
  margin: 0 auto;
}

/* =========================================================
   ヒーロー
   ========================================================= */
.hero {
  padding: 78px 0 34px;
  text-align: center;
}

/* 見出しの上に置く細い箔の線 */
.hero::before {
  content: "";
  display: block;
  width: 116px;
  height: 1px;
  margin: 0 auto 26px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

h1 {
  margin: 0 auto 18px;
  max-width: 20em;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(25px, 4.4vw, 40px);
  line-height: 1.5;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 2px 28px rgba(143, 211, 244, .18);
}

.hero .sub {
  margin: 0 auto 12px;
  max-width: 40em;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.9;
}

.hero .note {
  margin: 0 auto;
  max-width: 40em;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.8;
}

/* パンくず */
.crumbs {
  margin: 0 0 30px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--faint);
  text-align: center;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   診断カード
   ========================================================= */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-bottom: 8px;
}
@media (min-width: 920px) {
  .grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.card {
  position: relative;
  padding: 30px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 24px 60px rgba(0, 0, 0, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 紙片の四隅に箔の角飾り */
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-strong);
  pointer-events: none;
}
.card::before { top: 10px;    left: 10px;  border-right: 0; border-bottom: 0; }
.card::after  { bottom: 10px; right: 10px; border-left: 0;  border-top: 0; }

.card h2 {
  margin: 0 0 22px;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .10em;
  color: var(--gold-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}
.card h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), transparent);
}

.h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--aqua);
}

/* =========================================================
   フォーム
   ========================================================= */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 9px; }

label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .10em;
  color: var(--muted);
}

select {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: rgba(4, 7, 18, .55);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select:focus {
  border-color: var(--gold);
  background-color: rgba(217, 178, 106, .07);
  box-shadow: 0 0 0 3px rgba(217, 178, 106, .14);
}

.dob {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.05fr;
  gap: 7px;
}
/* グリッド項目の既定 min-width:auto だと、狭いカラムで年月日が切れる */
.dob select {
  min-width: 0;
  padding-left: 10px;
  padding-right: 26px;
}
@media (max-width: 400px) {
  .dob { grid-template-columns: 1fr; }
}

.twoCol { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) {
  .twoCol { grid-template-columns: 1fr 1fr; }
}

.block {
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .22);
}

.row { display: flex; align-items: center; }
.gap { gap: 10px; }
.pad { padding: 12px 0; }

/* =========================================================
   ボタン
   ========================================================= */
.btn {
  appearance: none;
  position: relative;
  isolation: isolate;
  padding: 13px 30px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(217, 178, 106, .20), rgba(217, 178, 106, .08));
  color: var(--gold-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  cursor: pointer;
  overflow: hidden;
  transition: color .2s ease, box-shadow .2s ease, transform .12s ease;
}
/* 下から金色が満ちる。文字より背面に置く */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  transform: translateY(101%);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}
.btn:hover { color: #1a1204; box-shadow: 0 10px 26px rgba(217, 178, 106, .26); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

.btn.ghost {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
  letter-spacing: .08em;
}

/* =========================================================
   診断結果
   ========================================================= */
.result:empty { display: none; }
.result {
  margin-top: 22px;
  padding: 22px 20px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(217, 178, 106, .10), transparent 70%),
    rgba(4, 7, 18, .48);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(217, 178, 106, .10);
  color: var(--gold-soft);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}

.hr {
  height: 1px;
  margin: 16px 0;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.kpi {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 520px) {
  .kpi { grid-template-columns: 1fr 1fr; }
}

.box {
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .028);
}
.box .t {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--faint);
}
.box .v { font-size: 14.5px; line-height: 1.85; color: var(--text); }
.box .v strong { color: var(--aqua); font-weight: 700; }

/* 今年から3年分の運気 */
.fortune-years {
  display: flex;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 0;
  list-style: none;
}
.fortune-years li {
  flex: 1;
  min-width: 0;
  padding: 9px 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .03);
  text-align: center;
}
.fortune-years .fy { display: block; font-size: 11px; letter-spacing: .06em; color: var(--faint); }
.fortune-years b {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.fortune-years li.is-small { border-color: rgba(233, 184, 74, .45); }
.fortune-years li.is-dai { border-color: rgba(236, 113, 97, .6); background: rgba(236, 113, 97, .10); }
.fortune-years li.is-dai b { color: #f5a99e; }

/* 詳細の開閉（ボタン風） */
.details summary {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .10em;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.details summary::-webkit-details-marker { display: none; }
.details summary:hover { background: rgba(217, 178, 106, .14); border-color: var(--gold-dim); }
.details .pad { margin-top: 14px; }

/* =========================================================
   共有バー
   ========================================================= */
.share-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.share-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.share-btn:hover {
  background: rgba(217, 178, 106, .14);
  border-color: var(--gold-dim);
  transform: translateY(-1px);
}
.share-btn:disabled { opacity: .65; cursor: default; transform: none; }
.share-btn.x { background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .24); }
.share-btn.x:hover { background: #000; }

/* =========================================================
   解説（検索・AI検索からの流入を受ける本文）
   ========================================================= */
.doc {
  max-width: 760px;
  margin: 68px auto 0;
  padding: 0 2px;
}

.doc h2 {
  margin: 56px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: clamp(19px, 3.2vw, 24px);
  letter-spacing: .06em;
  line-height: 1.5;
  color: #fff;
}
.doc h2:first-child { margin-top: 0; }

.doc h3 {
  margin: 32px 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold-soft);
}

.doc p { margin: 0 0 16px; color: #d3d9ee; }
.doc ul, .doc ol { margin: 0 0 18px; padding-left: 1.35em; }
.doc li { margin-bottom: 8px; color: #d3d9ee; }
.doc li::marker { color: var(--gold-dim); }
.doc strong { color: var(--gold-soft); font-weight: 700; }
.doc a:not(.related-card):not(.rin-guide__close) {
  color: var(--aqua);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(143, 211, 244, .4);
}

/* 星人一覧表 */
.star-table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
  -webkit-overflow-scrolling: touch;
}
.star-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 14px;
}
.star-table th,
.star-table td {
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.star-table thead th {
  border-bottom: 1px solid var(--line-strong);
  color: var(--gold-soft);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  white-space: nowrap;
}
.star-table tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.star-table td:first-child {
  white-space: nowrap;
  font-weight: 700;
  color: #fff;
  font-family: "Shippori Mincho", serif;
  letter-spacing: .06em;
}

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item > summary {
  position: relative;
  padding: 18px 46px 18px 2px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  transition: color .16s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--gold-soft); }
.faq-item > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item .faq-body { padding: 0 8px 20px 2px; }
.faq-item .faq-body p { margin: 0; color: var(--muted); font-size: 14px; }

/* 関連アプリ */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}
.related-card {
  display: block;
  padding: 18px 18px 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .028);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.related-card:hover {
  border-color: var(--line-strong);
  background: rgba(217, 178, 106, .07);
  transform: translateY(-2px);
}
.related-card b {
  display: block;
  margin-bottom: 5px;
  font-family: "Shippori Mincho", serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold-soft);
}
.related-card span { font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* 遊び方・解説パネルの中では、本文の上余白はパネル側が持つ */
.rin-guide .doc { margin: 0 auto; }
.rin-guide .rin-guide__head + h2 { margin-top: 0; }

/* =========================================================
   広告（診断カードの直下に1枠）
   ========================================================= */
.ad-slot {
  margin: 56px 0 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(4, 7, 18, .45);
}
.ad-label {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--faint);
}

/* =========================================================
   この診断について（ページ上に常に見える短い説明）
   ========================================================= */
.about {
  max-width: 760px;
  margin: 64px auto 0;
  text-align: center;
}
.about h2 {
  margin: 0 0 16px;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: clamp(19px, 3.2vw, 24px);
  letter-spacing: .06em;
  line-height: 1.5;
  color: #fff;
}
.about p { margin: 0 0 16px; color: #d3d9ee; }
.about-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--muted);
}
.about-points li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  vertical-align: 3px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* 解説パネルを開くボタン（.btn をリンクとして使う） */
.hero-cta { margin: 22px 0 0; }
.about .about-cta { margin: 22px 0 0; }
.about-related { margin-top: 36px; text-align: left; }
a.btn { display: inline-block; text-decoration: none; }

/* =========================================================
   フッター
   ========================================================= */
.footer {
  margin-top: 64px;
  padding: 30px 0 44px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer a { color: var(--gold-soft); text-underline-offset: 3px; }

.muted { color: var(--muted); }
.small { font-size: 12px; }

/* hidden 属性を作者スタイルより優先させる */
[hidden] { display: none !important; }