/* unanai.com — base styles (cute eel / water theme) */
:root {
  --ink: #243038;
  --muted: #5e6e76; /* WCAG AA: 5.3:1 on white, 4.9:1 on --bg tint (was #65767e=4.47 on tint) */
  --bg: #f3faf8;
  --cream: #fff8ef;
  --teal: #1f5b66;
  --teal-deep: #16414a;
  --accent: #ff8a5c;
  --accent-strong: #b85a2e; /* WCAG AA: white text 4.63:1 — primary button bg */
  --accent-deep: #f0915a;
  --line: #e3eeec;
  --onsen: #f0915a;
  --seiryu: #2f9e8f;
  --sazanami: #7b8fd6;
  /* text-only variants — used ONLY where the bright accent fails contrast as text;
     bright tokens above stay for dots/borders/fills/gradients. */
  --accent-text: #b85a2e;   /* ≈4.63:1 on white (orange text) */
  --onsen-text: #b85a2e;    /* ≈4.63:1 — 温泉 heading text */
  --sazanami-text: #5a6bbb; /* ≈4.93:1 — さざ波 heading text */
  --radius: 18px;
  --shadow: 0 8px 28px rgba(31, 91, 102, 0.1);
  --maxw: 760px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Zen Maru Gothic", system-ui, -apple-system, "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 50% -10%, #e7f6f2 0%, transparent 70%),
    var(--bg);
  line-height: 1.75;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: var(--teal); }

/* a11y: visible focus ring (don't remove existing focus styles) */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible, .scale__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* a11y: skip link to <main> */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--teal-deep);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
}

/* a11y: visually-hidden (for screen-reader-only labels) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; max-width: var(--maxw); margin: 0 auto; padding: 6px 18px; }
.logo { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--teal-deep); letter-spacing: .02em; display: inline-flex; align-items: center; min-height: 44px; }
.logo small { color: var(--accent-text); font-size: .72rem; display: block; line-height: 1; font-weight: 500; }
.nav { display: flex; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--muted); font-size: .9rem; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.nav a:hover { color: var(--teal); }

main { padding: 26px 0 60px; }
.site-footer { border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: .82rem; }
.site-footer .wrap { padding: 22px 18px; }
.site-footer a { color: var(--muted); display: inline-block; padding: 6px 2px; min-height: 24px; }
.site-footer a:hover { color: var(--teal); }

/* headings & text */
.h2 { font-size: 1.12rem; margin: 0 0 10px; color: var(--teal-deep); }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.center { text-align: center; }
.loading, .error { text-align: center; padding: 40px 0; color: var(--muted); }
.error { color: #c0392b; }

/* buttons */
.btn {
  display: inline-block; cursor: pointer; border: none;
  background: var(--accent-strong); color: #fff; text-decoration: none;
  padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  font-family: inherit; box-shadow: 0 6px 16px rgba(255, 138, 92, .32);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(255, 138, 92, .4); }
.btn--ghost { background: #fff; color: var(--teal); box-shadow: none; border: 1.5px solid var(--line); }
.btn--x { background: #111; box-shadow: none; }
.btn--line { background: #06c755; box-shadow: none; }
.btn--portal { background: var(--teal); box-shadow: none; }
.btn--lg { padding: 16px 36px; font-size: 1.1rem; }

/* cards */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 14px 0; box-shadow: var(--shadow); }
.card--accent { background: linear-gradient(180deg, #fff6ef, #fff); border-color: #ffe2cf; }
.card--share, .card--cta { text-align: center; }

/* LP hero */
.hero { text-align: center; padding: 18px 0 6px; }
.hero__art { width: 200px; max-width: 64vw; margin: 0 auto 6px; color: var(--seiryu); }
.hero h1 { font-size: 1.9rem; margin: 6px 0 4px; color: var(--teal-deep); }
.hero__pun { color: var(--accent-text); font-weight: 700; }
.hero__lead { color: var(--muted); margin: 6px auto 18px; max-width: 30em; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; box-shadow: var(--shadow); }
.feature b { display: block; color: var(--teal-deep); }
.feature span { font-size: .8rem; color: var(--muted); }

/* question flow */
.progress { height: 10px; background: #e7f1ef; border-radius: 999px; overflow: hidden; margin: 6px 0 16px; }
.progress__bar { height: 100%; background: linear-gradient(90deg, var(--seiryu), var(--accent)); transition: width .25s ease; }
.q-counter { text-align: center; color: var(--muted); font-size: .85rem; margin: 0 0 6px; }
.q-text { font-size: 1.25rem; font-weight: 700; text-align: center; min-height: 3.2em; display: flex; align-items: center; justify-content: center; }
.scale { margin: 10px 0 4px; }
.scale__btns { display: flex; justify-content: space-between; gap: 5px; margin: 8px 0; }
.scale__btn {
  /* flex sizing yields ~40–56px circles; clamps the min so they stay tappable
     (WCAG 2.5.8 ≥24px) without forcing horizontal overflow at 360px. */
  flex: 1 1 0; min-width: 36px; aspect-ratio: 1; max-width: 56px; border-radius: 50%;
  border: 2px solid var(--line); background: #fff; color: var(--muted);
  font-weight: 700; font-family: inherit; cursor: pointer; font-size: 1rem;
  transition: transform .1s ease, background .1s ease, color .1s ease, border-color .1s ease;
}
/* a11y: Likert fieldset rendered by shindan.js — reset native chrome,
   keep <legend> in the a11y tree (visually hidden, not display:none) */
.scale fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.scale__btn:hover { border-color: var(--seiryu); transform: scale(1.06); }
.scale__btn.is-selected { background: var(--seiryu); color: #fff; border-color: var(--seiryu); }
.scale__anchor { font-size: .75rem; color: var(--muted); }
.scale__anchor--min { float: left; }
.scale__anchor--max { float: right; }
.q-nav { text-align: center; margin-top: 18px; clear: both; }

/* bars */
.bars { display: grid; gap: 14px; margin-top: 8px; }
.bar__label { font-weight: 700; font-size: .9rem; margin-bottom: 2px; }
.bar__track { position: relative; height: 30px; background: #eef5f3; border-radius: 999px; }
.bar__ends { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 3.6em 0 12px; font-size: .72rem; color: var(--muted); }
.bar__fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--seiryu), var(--accent)); border-radius: 999px; opacity: .85; }
.bar__pct { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: .78rem; font-weight: 700; color: var(--teal-deep); }

/* chips / kv / compat */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { background: #eef7f4; color: var(--teal-deep); border-radius: 999px; padding: 6px 14px; font-size: .9rem; font-weight: 700; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.kv dt { font-weight: 700; color: var(--accent-text); }
.kv dd { margin: 0; }
.compat { margin: 10px 0; }
.compat__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tag-link { background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 14px; text-decoration: none; font-size: .85rem; color: var(--teal); display: inline-flex; align-items: center; min-height: 44px; }
.tag-link:hover { border-color: var(--seiryu); }
.share-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* zukan */
.zukan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.zukan__card { text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px; text-align: center; box-shadow: var(--shadow); transition: transform .12s ease; }
.zukan__card:hover { transform: translateY(-3px); }
.zukan__art { width: 76px; margin: 0 auto 4px; }
.zukan__name { font-weight: 700; font-size: .92rem; color: var(--teal-deep); }
.zukan__catch { font-size: .72rem; color: var(--muted); line-height: 1.4; }
.zukan__code { margin-top: 4px; }

/* ---- type page (/u/{slug}/) ---- */
.type-hero { text-align: center; padding: 16px 0 6px; }
.type-hero__art { width: 200px; max-width: 60vw; margin: 0 auto 4px; }
.type-hero__kicker { color: var(--muted); margin: 0; font-size: .85rem; }
.type-hero__name { font-family: "Shippori Mincho", serif; font-size: 2rem; margin: 2px 0 6px; color: var(--teal-deep); }
.type-hero__catch { color: var(--ink); max-width: 28em; margin: 0 auto 12px; }
.type-hero__code { color: var(--muted); font-size: .8rem; letter-spacing: .08em; margin: 0 0 14px; }

.type-axes { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; gap: 8px; }
.type-axes li { display: flex; justify-content: space-between; align-items: center; background: #f4faf8; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; }
.type-axis__name { color: var(--muted); font-size: .9rem; }
.type-axis__pole { font-weight: 700; color: var(--teal-deep); }

.type-bands { display: grid; gap: 12px; margin-top: 6px; }
.type-band { border: 1px solid var(--line); border-left: 5px solid var(--band, var(--seiryu)); border-radius: 12px; padding: 12px 14px; background: #fff; }
.type-band__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.type-band__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--band, var(--seiryu)); display: inline-block; }
.type-band__name { font-weight: 700; color: var(--teal-deep); margin: 6px 0 2px; }

.faq__item { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.faq__item:last-child { border-bottom: none; }
.faq__q { font-weight: 700; color: var(--teal-deep); margin: 0 0 4px; }
.faq__a { margin: 0; color: var(--ink); }

/* your-own-result panel (injected by typepage.js) */
.card--you { border-width: 2px; }
.you-band { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.you-band__pill { border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: .85rem; font-weight: 700; color: var(--muted); background: #fff; }
.you-band__pill.is-on { color: #fff; }

@media (max-width: 640px) {
  .features { grid-template-columns: 1fr; }
  .zukan { grid-template-columns: repeat(2, 1fr); }
  .q-text { font-size: 1.1rem; }
  .scale__btn { font-size: .9rem; }
}

/* ============================================================
   今日のうなぎ占い（daily / 習慣エンジン） — daily.js が出力する
   クラスのスタイル。既存の water/eel トークンで統一。
   ============================================================ */

/* hero intro */
.daily-hero { padding: 18px 0 4px; }
.daily-hero h1 { font-size: 1.7rem; margin: 4px 0 6px; color: var(--teal-deep); }
.daily-hero__lead { color: var(--muted); margin: 0 auto; max-width: 24em; }

/* head: 日付 + ストリーク + 型あいさつ */
.daily-head { margin: 18px 0 8px; }
.daily-date {
  color: var(--muted);
  letter-spacing: .12em;
  font-size: .9rem;
  margin: 0 0 8px;
}
.daily-streak {
  display: inline-block;
  margin: 4px 0 8px;
  padding: 5px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--onsen));
  box-shadow: 0 4px 14px rgba(255, 138, 92, .42), 0 0 18px rgba(255, 138, 92, .28);
}
.daily-greeting {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--teal-deep);
  margin: 6px auto 0;
  max-width: 26em;
}

/* テーマ・総合・カテゴリ */
.daily-theme p { margin: 0; }
.daily-overall p { margin: 0; font-size: 1.02rem; }
.daily-cats .kv dd { color: var(--ink); }

/* 今日の一歩（.card--accent を流用） */
.daily-step p { margin: 0; }

/* ラッキー：色スウォッチ */
.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
  border: 1px solid rgba(36, 48, 56, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}

/* 相性うなぎ・週次：やさしい強調 */
.daily-lucky-type {
  background: linear-gradient(180deg, #f4faf8, #fff);
  border-color: #d8ede9;
}
.daily-lucky-type p { margin: 0; }
.daily-weekly {
  background: linear-gradient(180deg, #f5f6fd, #fff);
  border-color: #dfe3f4;
  border-left: 5px solid var(--sazanami);
}
.daily-weekly .h2 { color: var(--sazanami-text); }
.daily-weekly p { margin: 0; }

/* 誕生日フォーム */
.daily-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.daily-form select {
  flex: 1 1 120px;
  min-width: 100px;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.daily-form select:focus { outline: none; border-color: var(--seiryu); }
.daily-form__row .btn { flex: 1 1 100%; }

@media (min-width: 480px) {
  .daily-form__row .btn { flex: 0 0 auto; }
}

/* ============================================================
   M5 送客（占いポータル / タイプページの送客枠） — a8-ad-fitting の
   ネイティブカード。既存の water/eel トークンで統一。
   ============================================================ */

/* 悩み別セクション（.card を流用） */
.concern-section .h2 { margin-bottom: 6px; }

/* 広告開示 */
.aff-disclosure { margin: 6px 0 10px; }

/* オファーグリッド（狭い画面は1カラム） */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 560px) {
  .offer-grid { grid-template-columns: 1fr; }
}

/* ネイティブ送客カード */
.offer-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.offer-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.offer-card__modality {
  display: inline-block;
  background: #eef7f4;
  color: var(--teal);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: .78rem;
  font-weight: 700;
}
.pr-chip {
  display: inline-block;
  background: #f1f4f5;
  color: #586870; /* ≈5.24:1 on #f1f4f5 (AA) */
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.offer-card__title {
  font-size: 1.02rem;
  color: var(--teal-deep);
  margin: 0 0 6px;
}
.offer-card__blurb { margin: 0 0 8px; font-size: .92rem; }
.offer-card__note { margin: 0 0 12px; }
.offer-card__action { margin: auto 0 0; }
.offer-card__cta { display: inline-block; }

/* 近日掲載（placeholder） */
.offer-card__soon { margin: auto 0 0; }
.badge-soon {
  display: inline-block;
  background: #fff1e9;
  color: #a84f24; /* ≈4.99:1 on #fff1e9 (AA) */
  border: 1px solid #ffe2cf;
  border-radius: 999px;
  padding: 5px 16px;
  font-size: .82rem;
  font-weight: 700;
}

/* インプレッションビーコン（1×1）：レイアウト中立・不可視 */
.aff-beacon {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}