/*
 * フロントページ（TOP）
 * カード本体のスタイルは archive-teller.css の .teller-card を流用する。
 */

.tp { background:#FFFFFF; padding-bottom:48px; }

/* ── Hero ── */
.tp-hero { position:relative; width:100%; height:300px; overflow:hidden; }
.tp-hero__bg { position:absolute; inset:0; background:#B3B3B3; }
.tp-hero__inner { position:relative; z-index:1; height:100%; padding:24px 16px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.tp-hero__msg { font-family:'Noto Serif JP', serif; font-size:18px; font-weight:500; color:#FFFFFF; line-height:1.7; letter-spacing:0.03em; text-align:center; margin:24px 0 0; }
.tp-hero__cta { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:0 16px; background:#1A1A1A; color:#FFFFFF; border-radius:8px; font-family:'Noto Sans JP', sans-serif; font-size:15px; font-weight:500; line-height:1.5; text-decoration:none; }

/* ── Hero (logged-in: 画像 + ドット, Figma準拠) ── */
.tp-hero--logged-in { height:200px; }
.tp-hero--logged-in .tp-hero__bg { bottom:20px; }
.tp-hero__dots { position:absolute; left:0; right:0; bottom:0; height:20px; margin:0; padding:0; list-style:none; display:flex; gap:6px; align-items:center; justify-content:center; }
.tp-hero__dot { width:8px; height:8px; border-radius:50%; background:#D9D9D9; }
.tp-hero__dot.is-active { background:#1A1A1A; }

/* ── Notify (ログイン時の通知バナー) ── */
.tp-notify { padding:16px; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; }
.tp-notify__item { display:flex; align-items:center; gap:12px; min-height:56px; padding:0 16px; background:#FFFFFF; color:#1A1A1A; border:0.5px solid #D9D9D9; border-radius:8px; text-decoration:none; transition:background-color 0.15s ease; }
.tp-notify__item:hover { background:#F5F5F5; }
.tp-notify__icon { flex:0 0 24px; display:inline-flex; align-items:center; justify-content:center; color:#1A1A1A; }
.tp-notify__label { flex:1 1 auto; font-family:'Noto Sans JP', sans-serif; font-size:14px; font-weight:500; line-height:1.5; letter-spacing:0.03em; }
.tp-notify__chevron { flex:0 0 24px; display:inline-flex; align-items:center; justify-content:center; color:#1A1A1A; }

/* ── Section ── */
.tp-section { background:#FFFFFF; }
.tp-section__title { padding:24px 16px; }
.tp-section__title h2 { font-family:'Noto Sans JP', sans-serif; font-size:22px; font-weight:500; color:#1A1A1A; line-height:1.5; margin:0; }
.tp-empty { padding:24px 16px; color:#808080; font-size:13px; text-align:center; margin:0; }

/* ── Card grid ── */
.tp-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; padding:0 16px; }
.tp-grid--list { /* 一覧セクション用フック（追加スタイルが必要になったらここに） */ }
.tp-grid__item { display:flex; min-width:0; }
.tp-grid__item > .teller-card { flex:1 1 0; }
.tp-grid__item.is-hidden { display:none; }

/* ── More button (各セクション末尾) ── */
.tp-section__more { padding:16px; }
.tp-btn-more { display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:40px; padding:0 16px; background:#FFFFFF; color:#1A1A1A; border:1px solid #B3B3B3; border-radius:8px; font-family:'Noto Sans JP', sans-serif; font-size:14px; font-weight:500; line-height:1.5; text-decoration:none; cursor:pointer; transition:background-color 0.15s ease; }
.tp-btn-more:hover { background:#F5F5F5; }

/* ── 口コミから占い師を探す（3x3） ── */
.tp-concern-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; padding:0 16px; }
.tp-concern-tile { position:relative; aspect-ratio:1/1; padding:0; border:0; background:transparent; cursor:pointer; overflow:hidden; border-radius:8px; min-height:44px; }
.tp-concern-tile__bg { position:absolute; inset:0; background:#4D4D4D; }
.tp-concern-tile__label { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; height:100%; font-family:'Noto Sans JP', sans-serif; font-size:14px; font-weight:500; color:#FFFFFF; letter-spacing:0.03em; }