/* うららん ホーム画面 スタイル
 * モバイル前提（〜430px）。PCでは中央寄せして固定幅。
 */

:root {
  --c-bg: #F8F8F8;          /* おすすめセクション帯（Unity版に合わせた極薄グレー）*/
  --c-surface: #FFFFFF;     /* ヘッダー・ランキングセクション・カード本体 */
  --c-border: #ECECEC;      /* 無彩色のボーダーに（旧 #ECE9E0 はベージュ寄り）*/
  --c-text: #2C2C2A;
  --c-text-muted: #7A7770;
  --c-text-hint: #9A968C;
  --c-tag-bg: #EDEDED;      /* タグ背景も無彩色に */
  --c-tag-text: #6A6760;
  --c-tag-track: #F0F0F0;   /* 検索バー背景も無彩色に */
  --c-purple: #7B5BC4;
  --c-purple-soft: #B5A0DC;
  --c-rank-1: #E5A21B;
  --c-rank-2: #9DA0A8;
  --c-rank-3: #C26E3F;
  --c-rank-other: #7C7C82;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app {
  height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
}

/* --- App header (sticky wrapper: topbar + searchbar) --- */
.app-header {
  flex: 0 0 auto;
  background: var(--c-surface);
}

/* --- おすすめ section: fixed below header --- */
.recommended-section {
  flex: 0 0 auto;
  background: var(--c-bg);
}

/* --- ランキング section: title fixed, list scrolls --- */
.ranking-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--c-surface);  /* Unity版: ランキング帯は白 */
}
.ranking-title {
  flex: 0 0 auto;
  background: var(--c-surface);
}
.ranking-list-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
  scrollbar-width: none;
}
.ranking-list-scroll::-webkit-scrollbar { display: none; }

/* --- Top row (point balance + purchase button) --- */
.topbar {
  padding: 10px 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
.topbar-point {
  font-size: 14px;
  color: #5A5A60;
  font-weight: 500;
}
.topbar-buy {
  font-size: 13px;
  color: var(--c-purple);
  border: 1px solid var(--c-purple-soft);
  border-radius: 6px;
  padding: 5px 16px;
  background: var(--c-surface);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
}
.topbar-buy:hover { background: #F8F5FA; }

/* --- Search bar (inside .app-header) --- */
.searchbar {
  padding: 4px 16px 12px;
  border-bottom: 0.5px solid var(--c-border);
}
.searchbar-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--c-tag-track);
  border-radius: 20px;
  padding: 8px 14px;
  color: var(--c-text-hint);
  text-decoration: none;
  cursor: pointer;
}
.searchbar-box:hover { background: #E8E8E8; }
.searchbar-icon { flex: 0 0 16px; }
.searchbar-input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  color: var(--c-text-hint);
  padding: 0;
}
.searchbar-input::placeholder { color: var(--c-text-hint); }
.searchbar-input:disabled { cursor: not-allowed; }

/* --- Section --- */
.section-title {
  font-size: 17px;
  font-weight: 500;
  padding: 16px 16px 8px;
  margin: 0;
}

/* --- おすすめ section: horizontal scroll cards --- */
.cards-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 16px 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.cards-scroll::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 190px;
  background: var(--c-surface);
  border-radius: 12px;
  overflow: hidden;
  border: 0.5px solid var(--c-border);
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  cursor: pointer;
}
.card-img {
  position: relative;
  aspect-ratio: 5 / 3;
  background: linear-gradient(135deg, var(--g1, #E8E0F5), var(--g2, #CFC0E8));
  overflow: hidden;
}
.card-img-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #5A4A6F;
  text-align: center;
  padding: 8px;
}
.card-body {
  padding: 8px 10px 10px;
}
.card-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  margin-bottom: 6px;
  overflow: hidden;
}
.card-name {
  font-size: 14px;
  font-weight: 500;
  margin: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-cp {
  font-size: 10px;
  color: var(--c-text-muted);
  line-height: 1.4;
  margin: 2px 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-price {
  font-size: 11px;
  color: var(--c-purple);
  font-weight: 500;
}

/* --- Tag pill --- */
.tag {
  background: var(--c-tag-bg);
  color: var(--c-tag-text);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.5;
  flex-shrink: 0;
}

/* --- 音声鑑定バナー（おすすめとランキングの間） ---
 * 画像のみで完結する型。
 * 画像: /assets/banners/voice-michiyo-banner.jpg (aspect 3872/1088 = 3.559)
 * aspect-ratio で画像ロード前から領域確保（CLS防止）。
 */
.voice-banner-section {
  flex: 0 0 auto;
  background: var(--c-bg);
  padding: 4px 16px 16px;
}
.voice-banner {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(60, 38, 96, 0.18);
  transition: transform .15s ease, box-shadow .25s ease;
  /* 画像ロード前の領域確保＆未ロード時のフォールバック背景 */
  aspect-ratio: 3872 / 1088;
  background: linear-gradient(135deg, #3d2660 0%, #7B5BC4 100%);
}
.voice-banner:active {
  transform: scale(0.99);
  box-shadow: 0 1px 4px rgba(60, 38, 96, 0.14);
}
.voice-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- AI占い師ランキング --- */
.ranking-list {
  list-style: none;
  padding-left: 16px;
  padding-right: 16px;
  margin: 0;
}
.rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-surface);
  border-radius: 12px;
  padding: 10px 36px 10px 10px;
  margin-bottom: 8px;
  border: 0.5px solid var(--c-border);
  box-shadow: var(--shadow-card);
  position: relative;
  cursor: pointer;
}
.rank-avatar {
  position: relative;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
}
.rank-avatar-photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--av-color, #C4A4DE);
}
.rank-avatar-fallback {
  position: absolute;
  inset: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--av-color, #C4A4DE);
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.rank-avatar.has-image .rank-avatar-fallback { display: none; }
.rank-num {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rank-color, var(--c-rank-other));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.rank-body {
  flex: 1;
  min-width: 0;
}
.rank-name {
  font-size: 14px;
  font-weight: 500;
}
.rank-cp {
  font-size: 11px;
  color: var(--c-text-muted);
  margin: 2px 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.rank-price {
  font-size: 11px;
  color: var(--c-purple);
  font-weight: 500;
}
.rank-badge {
  position: absolute;
  top: 8px;
  right: 28px;
  background: var(--c-purple);
  color: #fff;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 11px;
  white-space: nowrap;
  font-weight: 500;
}
.rank-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-purple);
  width: 16px;
  height: 16px;
}

/* --- Bottom tab bar --- */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: var(--c-surface);
  border-top: 0.5px solid var(--c-border);
  display: flex;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 20;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--c-text-hint);
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.tab svg { width: 22px; height: 22px; }
.tab.is-active { color: var(--c-purple); }