/* ════════════════════════════════════════════════════════════════
   占いマルシェページ（uranai.html）専用のデザイン
   夜の海と星空の一枚世界（ダーク固定）。
   このファイルは uranai.html だけが読み込むので、他のページには影響しません。
   共通のナビ・フッターは styles.css 側のデザインのままです。
   ════════════════════════════════════════════════════════════════ */
body.page-uranai {
  --un-bg:   #0B1030;   /* 糸満の夜の海 */
  --un-bg2:  #141B48;
  --un-ink:  #F3EEDF;   /* 月明かり */
  --un-muted:#B4B3C9;
  --un-gold: #E3C27A;   /* 星の金 */
  --un-sea:  #5FB7C2;   /* KOAから見える海 */
  --un-line: rgba(227,194,122,.28);
  --un-font-display: "Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --un-font-body:    "Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --un-font-num:     "Cormorant Garamond","Times New Roman",serif;
  background: linear-gradient(180deg,var(--un-bg) 0%,var(--un-bg2) 55%,var(--un-bg) 100%);
  color-scheme: dark;
}

/* 星空キャンバス（画面に固定）。ナビとフッターはその上に重なる */
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
body.page-uranai footer { position: relative; z-index: 2; }

.un {
  position: relative;
  z-index: 1;
  padding-top: 56px; /* 固定ナビの高さぶん */
  color: var(--un-ink);
  font-family: var(--un-font-body);
  font-size: 16px;
  line-height: 1.85;
}
.un .wrap { max-width: 960px; margin: 0 auto; padding-inline: 20px; }
.un h1, .un h2, .un h3 {
  font-family: var(--un-font-display);
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
  margin: 0;
  color: inherit;
  letter-spacing: normal;
}
.un p { margin: 0; }
.un a { color: var(--un-gold); }
.un .label { font-family: var(--un-font-num); font-style: italic; font-size: 16px; letter-spacing: .12em; color: var(--un-gold); }

/* HERO */
.un .hero { text-align: center; padding-block: 64px 72px; display: grid; justify-items: center; gap: 22px; }
.un .moon { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 36% 36%,#FFF7DD,var(--un-gold) 70%); box-shadow: 0 0 60px rgba(227,194,122,.55); position: relative; animation: un-glow 5s ease-in-out infinite; }
.un .moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--un-bg); transform: translate(26%,-12%); opacity: .92; }
@keyframes un-glow { 50% { box-shadow: 0 0 90px rgba(227,194,122,.8); } }
.un .hero h1 { font-size: clamp(46px,10vw,96px); font-weight: 800; letter-spacing: .06em; }
.un .hero h1 span { display: inline-block; animation: un-drift 1.1s cubic-bezier(.2,.8,.2,1) both; }
.un .hero h1 span:nth-child(2) { animation-delay: .08s; }
.un .hero h1 span:nth-child(3) { animation-delay: .16s; }
.un .hero h1 span:nth-child(4) { animation-delay: .24s; }
.un .hero h1 span:nth-child(5) { animation-delay: .32s; }
.un .hero h1 span:nth-child(6) { animation-delay: .4s; }
@keyframes un-drift { from { transform: translateY(18px); filter: blur(6px); } to { transform: none; filter: none; } }
.un .hero .copy { font-family: var(--un-font-display); font-size: clamp(18px,3vw,24px); color: var(--un-gold); }
.un .hero .lead { max-width: 30em; color: var(--un-muted); }
.un .next { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; border: 1px solid var(--un-line); border-radius: 999px; padding: 10px 24px; background: rgba(11,16,48,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.un .next .date { font-family: var(--un-font-num); font-size: 30px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.un .next .date small { font-size: 15px; margin-left: 4px; color: var(--un-gold); }
.un .next .count { font-size: 13px; color: var(--un-muted); }
.un .next .count b { color: var(--un-gold); font-size: 16px; }

.un section { padding: 0; }
.un section.block { padding-block: 80px; }
.un .head { display: grid; gap: 8px; justify-items: center; text-align: center; margin-bottom: 40px; }
.un .head h2 { font-size: clamp(28px,5vw,40px); }

/* READERS（今回の占い師） */
.un .readers { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: stretch; }
.un .reader { border: 1px solid var(--un-line); border-radius: 22px; padding: 30px; background: rgba(20,27,72,.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: grid; gap: 16px; min-width: 0; position: relative; overflow: hidden; }
.un .reader .slot { font-family: var(--un-font-num); font-size: 14px; letter-spacing: .14em; color: var(--un-sea); }
.un .reader .portrait { width: 120px; height: 120px; border-radius: 50%; border: 1.5px solid var(--un-gold); display: grid; place-items: center; font-family: var(--un-font-display); font-size: 44px; color: var(--un-gold); background: radial-gradient(circle,rgba(227,194,122,.15),transparent 70%); }
.un .reader h3 { font-size: 30px; }
.un .reader h3 small { font-size: 16px; margin-left: 4px; color: var(--un-muted); }
.un .reader dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: 15px; }
.un .reader dt { color: var(--un-muted); }
.un .reader dd { margin: 0; font-weight: 700; }
.un .reader .photo { object-fit: cover; background: #fff; padding: 0; box-shadow: 0 0 40px rgba(227,194,122,.35); }
.un .reader .tag { font-family: var(--un-font-display); font-size: 20px; color: var(--un-gold); border-top: 1px solid var(--un-line); padding-top: 14px; }
.un .reader.soon { display: grid; align-content: center; justify-items: center; text-align: center; border-style: dashed; background: rgba(11,16,48,.5); }
.un .reader.soon .portrait { border-style: dashed; color: var(--un-muted); }
.un .reader.soon h3 { font-size: 22px; }
.un .reader.soon p { color: var(--un-muted); font-size: 14px; }
.un .reader:not(.soon)::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg,transparent 0 70%,rgba(227,194,122,.16) 80%,transparent 90%); animation: un-spin 9s linear infinite; pointer-events: none; }
.un .reader > * { position: relative; }
@keyframes un-spin { to { transform: rotate(1turn); } }

/* PRICE（料金と時間） */
.un .price { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--un-line); border-radius: 22px; overflow: hidden; }
.un .price > div { padding: 28px 20px; text-align: center; display: grid; gap: 4px; min-width: 0; }
.un .price > div + div { border-left: 1px solid var(--un-line); }
.un .price .k { font-size: 13px; color: var(--un-muted); }
.un .price .v { font-family: var(--un-font-num); font-size: 44px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.un .price .v small { font-family: var(--un-font-body); font-size: 15px; margin-left: 2px; }
.un .price .s { font-size: 13px; color: var(--un-gold); }
.un .fine { margin-top: 16px; font-size: 13px; color: var(--un-muted); text-align: center; }

/* LINE友だち限定特典 */
.un .perk { position: relative; max-width: 720px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 8px; border: 1.5px solid var(--un-gold); border-radius: 22px; padding: 34px 24px 32px; background: radial-gradient(ellipse 80% 70% at 50% 0%,rgba(227,194,122,.18),transparent 70%),rgba(20,27,72,.75); box-shadow: 0 0 50px rgba(227,194,122,.22); }
.un .perk h2 { font-size: clamp(22px,4.4vw,30px); margin-bottom: 6px; }
.un .perk .perk-lead { color: var(--un-muted); font-size: 15px; }
.un .perk .perk-main { font-family: var(--un-font-display); font-size: clamp(18px,4.2vw,24px); font-weight: 700; line-height: 1.6; }
.un .perk .perk-main strong { font-family: var(--un-font-num); font-size: 1.7em; color: var(--un-gold); margin-left: 4px; white-space: nowrap; }
.un .perk .perk-note { font-size: 13px; color: var(--un-muted); }

/* はじめての方へ */
.un .guide { max-width: 720px; margin: 0 auto; border: 1px solid var(--un-line); border-radius: 22px; padding: 8px 28px; background: rgba(20,27,72,.6); }
.un .guide > div { display: grid; grid-template-columns: 6em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--un-line); }
.un .guide > div:last-child { border-bottom: 0; }
.un .guide dt { color: var(--un-gold); font-family: var(--un-font-display); font-weight: 700; }
.un .guide dd { margin: 0; color: var(--un-muted); font-size: 15px; min-width: 0; }
.un .guide dd strong { color: var(--un-ink); }

/* DRAW CARD（カードを引く） */
.un .draw { display: grid; justify-items: center; gap: 20px; }
.un .card { display: block; width: 220px; aspect-ratio: 2/3.3; max-width: 100%; perspective: 1000px; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.un .card .inner { display: block; position: relative; width: 100%; height: 100%; transition: transform .9s cubic-bezier(.3,.8,.3,1); transform-style: preserve-3d; }
.un .card.flipped .inner { transform: rotateY(180deg); }
.un .card .face { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1.5px solid var(--un-gold); display: grid; place-items: center; padding: 20px; text-align: center; }
.un .card .back { background: repeating-linear-gradient(45deg,rgba(227,194,122,.12) 0 2px,transparent 2px 14px),var(--un-bg2); }
.un .card .back .sigil { width: 90px; height: 90px; border: 1px solid var(--un-gold); border-radius: 50%; display: grid; place-items: center; font-family: var(--un-font-num); font-size: 30px; color: var(--un-gold); animation: un-pulse 2.6s ease-in-out infinite; }
@keyframes un-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 30px rgba(227,194,122,.45); } }
.un .card .front { background: linear-gradient(160deg,#1E2763,var(--un-bg)); transform: rotateY(180deg); align-content: center; gap: 12px; }
.un .card .front .t { font-family: var(--un-font-display); font-size: 22px; color: var(--un-gold); }
.un .card .front .m { font-size: 14px; line-height: 1.8; }
.un .card:focus-visible { outline: 2px solid var(--un-gold); outline-offset: 6px; border-radius: 16px; }
.un .draw .hint { font-size: 13px; color: var(--un-muted); text-align: center; }

/* INFO（予約・会場） */
.un .info { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.un .box { border: 1px solid var(--un-line); border-radius: 22px; padding: 28px; background: rgba(20,27,72,.6); display: grid; gap: 12px; align-content: start; min-width: 0; }
.un .box h3 { font-size: 22px; }
.un .box p { color: var(--un-muted); font-size: 15px; }
.un .addr { font-weight: 700; color: var(--un-ink) !important; }

/* ボタン（styles.css の共通 .btn を、このページ用に上書き） */
.un .btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; background: var(--un-gold); color: var(--un-bg); font-family: var(--un-font-body); font-size: 16px; font-weight: 700; letter-spacing: normal; border-radius: 999px; padding: 14px 24px; text-decoration: none; box-shadow: none; transition: transform .25s, box-shadow .25s; margin-top: 6px; }
.un .btn:hover { background: var(--un-gold); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(227,194,122,.35); }
.un .btn.ghost, .un .btn.ghost:hover { background: transparent; color: var(--un-gold); border: 1px solid var(--un-gold); }
.un .btn:focus-visible { outline: 2px solid var(--un-ink); outline-offset: 3px; }

/* FAQ */
.un .faq { display: grid; gap: 12px; max-width: 720px; margin: 0 auto; }
.un details { border: 1px solid var(--un-line); border-radius: 16px; padding: 16px 22px; background: rgba(11,16,48,.5); }
.un summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.un summary::-webkit-details-marker { display: none; }
.un summary::after { content: "+"; color: var(--un-gold); font-family: var(--un-font-num); font-size: 22px; line-height: 1; transition: transform .3s; }
.un details[open] summary::after { transform: rotate(45deg); }
.un details p { color: var(--un-muted); margin-top: 10px; font-size: 15px; }

/* 出店希望の占い師さん向けリンク（詳細は /join ページ） */
.un .vendor-wrap { padding-block: 0 64px; text-align: center; }
.un .vendor { display: inline-block; border: 1px solid var(--un-line); border-radius: 999px; padding: 8px 18px; font-size: 13px; color: var(--un-muted); text-decoration: none; }
.un .vendor:hover { color: var(--un-gold); border-color: var(--un-gold); }

@media (max-width: 760px) {
  .un .readers, .un .info { grid-template-columns: 1fr; }
  .un .price { grid-template-columns: 1fr; }
  .un .price > div + div { border-left: 0; border-top: 1px solid var(--un-line); }
  .un section.block { padding-block: 60px; }
  .un .guide { padding: 4px 20px; }
  .un .guide > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .un *, .un *::before, .un *::after { animation: none !important; transition: none !important; }
}