/*
 * 占い師アーカイブ（一覧）
 * グレースケールのみ。CTAボタンは template-parts/teller/ 配下の例外として色付きPNGをそのまま使用する。
 */

.teller-archive { background:#F5F5F5; min-height:100vh; padding-bottom:48px; }

/* ── Search ── */
.teller-archive__search { background:#FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.2); padding:12px 16px; display:flex; flex-direction:column; gap:12px; }
.teller-archive__search-input { display:flex; align-items:center; gap:8px; border:1px solid #D9D9D9; border-radius:4px; padding:8px 12px; color:#808080; }
.teller-archive__search-input input { flex:1; min-width:0; border:none; outline:none; font-family:inherit; font-size:14px; line-height:1.7; background:transparent; color:#1A1A1A; padding:0; }
.teller-archive__search-input input::placeholder { color:#808080; }

.teller-archive__chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.teller-archive__chips--scroll { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; margin:0 -16px; padding:0 16px; scrollbar-width:none; }
.teller-archive__chips--scroll::-webkit-scrollbar { display:none; }

.ta-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; min-height:32px; border:1px solid #B3B3B3; border-radius:999px; background:#FFFFFF; color:#1A1A1A; font-family:inherit; font-size:13px; font-weight:400; line-height:1.4; white-space:nowrap; cursor:pointer; }
.ta-chip--select { font-weight:500; padding-right:4px; }
.ta-chip svg { flex-shrink:0; color:#4D4D4D; }

/* ── Title ── */
.teller-archive__title { padding:24px 16px; background:#F5F5F5; }
.teller-archive__title h1 { font-family:'Noto Sans JP', sans-serif; font-size:22px; font-weight:500; line-height:1.5; color:#1A1A1A; margin:0; }

/* ── Popular filter ── */
.teller-archive__filter { display:flex; flex-direction:column; gap:8px; padding:0 16px 16px; background:#F5F5F5; }
.teller-archive__filter-label { font-size:13px; font-weight:500; color:#1A1A1A; margin:0; line-height:1.5; }

/* ── List header ── */
.teller-archive__list-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px 16px; background:#F5F5F5; }
.teller-archive__count { display:flex; align-items:baseline; gap:4px; color:#1A1A1A; margin:0; }
.teller-archive__count-label { font-size:12px; }
.teller-archive__count-num { font-size:18px; font-weight:500; }
.teller-archive__count-unit { font-size:12px; }

/* ── Grid (2-up) ── */
.teller-archive__grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; padding:12px 16px 16px; background:#FFFFFF; }

/* ── Card ── */
.teller-card { position:relative; display:flex; flex-direction:column; gap:8px; padding-bottom:10px; border:1px solid #D9D9D9; border-radius:6px; background:#FFFFFF; color:#1A1A1A; overflow:hidden; min-width:0; }
.teller-card__overlay-link { position:absolute; inset:0; z-index:1; text-indent:-9999px; overflow:hidden; }
.teller-card__image-wrap { position:relative; width:100%; aspect-ratio:167/120; background:#B3B3B3; overflow:hidden; }
.teller-card__image { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.teller-card__new-badge { position:absolute; top:0; left:0; width:56px; height:56px; pointer-events:none; z-index:2; }
.teller-card__hof-badge { position:absolute; top:8px; left:8px; z-index:2; display:inline-flex; align-items:center; justify-content:center; padding:3px 8px; border-radius:100px; background:#FFFFFF; font-size:12px; font-weight:500; line-height:1; color:#000000; pointer-events:none; }

.teller-card__body { display:flex; flex-direction:column; gap:4px; padding:0 10px; min-width:0; }
.teller-card__kana { font-size:10px; color:#808080; line-height:1.4; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.teller-card__name-row { display:flex; align-items:center; gap:4px; min-width:0; }
.teller-card__name { flex:1 1 0; min-width:0; font-size:14px; font-weight:500; color:#1A1A1A; line-height:1.4; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* お気に入りハート: overlay-link より上に置いてカードリンクを横取りせず単独タップ可能にする */
.teller-card__fav { position:relative; z-index:2; flex-shrink:0; width:36px; height:36px; padding:0; border:0; border-radius:999px; background:transparent; color:#1A1A1A; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.teller-card__fav svg { display:block; transition: fill 0.15s ease; }
/* お気に入り状態（押された）: ハート全体を黒で塗りつぶす */
.teller-card__fav.is-favorited svg { fill: currentColor; }
.teller-card__price { font-size:13px; color:#1A1A1A; line-height:1.4; margin:0; }

.teller-card__cta-wrap { position:relative; z-index:2; padding:0 10px; }
.teller-card__cta-wrap .cta-btn { width:100%; }

.teller-card__sched { display:flex; flex-direction:column; align-items:center; gap:2px; padding:0 10px; }
.teller-card__sched-head { display:flex; align-items:center; gap:4px; color:#1A1A1A; font-size:10px; line-height:1.4; }
.teller-card__sched-label { font-size:10px; }
/* 1行/2行どちらでもカード高さを揃えるため、常に2行分の高さを確保する */
.teller-card__sched-time { font-size:10px; color:#1A1A1A; line-height:1.4; margin:0; text-align:center; min-height:28px; }
.teller-card__sched-time--none { color:#808080; }

/* 終了まであと〇〇分（60分以内・今すぐ/鑑定中）: 上=時間 / 下=終了予告 を2行で表示 */
.teller-card__sched-time--ending .teller-card__sched-time-main,
.teller-card__sched-time--ending .teller-card__sched-time-alt { display:block; }
.teller-card__sched-time--ending .teller-card__sched-time-alt {
  color:#e0374a;
  font-weight:500;
}

.teller-archive__empty { padding:32px 16px; text-align:center; color:#808080; font-size:13px; }

/* ── 一覧カード内 CTA：中央寄せ（「順番待ち受付中」サブラベルと「N人待ち」はそのまま表示） ── */
/* 追従CTA用に設定されていた space-between ＋ 左48px padding（= N人待ちを右端に寄せる）を
   一覧カード内だけ打ち消して、stack と N人待ちを中央に並べる。 */
.teller-card__cta-wrap .cta-btn--kantei-queued,
.teller-card__cta-wrap .cta-btn--kantei-count,
.teller-card__cta-wrap .cta-btn--taiki-count { justify-content:center; padding:0 8px; gap:6px; }