/* ================================================================
   うららん FEAT03 相性系 共通CSS
   - 日めくりカレンダー / 月間カレンダー / 重要日リスト /
     今日の相性カード / パートナーバー / サンプルバナー
   - 各画面（compat / compat-sample / compat-calendar）で共有
   ================================================================ */

/* 共通ボディ背景 */
.compat-body-bg { background: #FAFAFA; }

/* ----------------------------------------------------------------
   相性ランディング body
   ---------------------------------------------------------------- */
.compat-landing {
  flex: 1;
  overflow-y: auto;
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.compat-landing::-webkit-scrollbar { display: none; }

/* ----------------------------------------------------------------
   日めくりカレンダー
   ---------------------------------------------------------------- */
.himekuri {
  margin: 20px 16px 0;
  perspective: 800px;
}
.himekuri.compact { margin: 0 0 14px; }

.himekuri-frame {
  background: #fff;
  border-radius: 4px 4px 14px 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
  position: relative;
  overflow: visible;
}
.himekuri-rings {
  display: flex;
  justify-content: center;
  gap: 40px;
  position: relative;
  z-index: 3;
  height: 16px;
}
.himekuri-ring {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #bbb;
  background: #E2DED8;
  margin-top: -6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
}

.himekuri-content {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 14px 14px;
}
.himekuri-page {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 24px 16px 20px;
  text-align: center;
  background: #fff;
  transform-origin: top center;
  transition: transform .7s cubic-bezier(.4, .0, .2, 1);
  cursor: pointer;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.himekuri-page.flipped {
  transform: rotateX(-120deg);
  pointer-events: none;
}
.himekuri-page::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8px; right: 8px;
  height: 3px;
  background: repeating-linear-gradient(90deg, #ddd 0, #ddd 6px, transparent 6px, transparent 10px);
  border-radius: 2px;
  opacity: .5;
}
.himekuri-month { font-size: 11px; color: var(--ts); letter-spacing: 2px; margin-bottom: 2px; }
.himekuri-day {
  font-family: 'Noto Serif JP', serif;
  font-size: 72px;
  font-weight: 700;
  color: #333;
  line-height: 1;
  margin-bottom: 4px;
}
.himekuri-dow { font-size: 16px; color: var(--pu); font-weight: 600; margin-bottom: 12px; }
.himekuri-tap {
  font-size: 15px;
  color: var(--red);
  font-weight: 700;
  animation: himeTap 2s ease-in-out infinite;
}
@keyframes himeTap {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}

.himekuri-stack {
  position: absolute;
  bottom: -2px; left: 3px; right: 3px;
  height: 6px;
  background: #f5f5f5;
  border-radius: 0 0 12px 12px;
  z-index: 0;
  border: 1px solid #eee;
  border-top: none;
}
.himekuri-stack2 {
  position: absolute;
  bottom: -4px; left: 6px; right: 6px;
  height: 6px;
  background: #efefef;
  border-radius: 0 0 10px 10px;
  z-index: -1;
  border: 1px solid #e8e8e8;
  border-top: none;
}

/* 日めくり裏面（診断結果） */
.himekuri-result {
  padding: 28px 16px;
  text-align: center;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.himekuri-result-label {
  font-size: 10px;
  color: var(--ts);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.himekuri-result-partner {
  font-size: 11px;
  color: #888;
  margin-bottom: 10px;
}
.himekuri-result-partner b {
  color: var(--pu);
  font-weight: 600;
}
.himekuri-result-score {
  font-size: 48px;
  font-weight: 700;
  color: var(--pu-d);
  font-family: 'Noto Serif JP', serif;
  line-height: 1;
  margin-bottom: 2px;
}
.himekuri-result-unit { font-size: 12px; color: var(--ts); }
.himekuri-result-stars {
  color: var(--amber);
  font-size: 14px;
  margin: 6px 0;
}
.himekuri-result-msg {
  font-size: 13px;
  color: #333;
  line-height: 1.7;
  margin-bottom: 14px;
}

/* ----------------------------------------------------------------
   パートナーバー（小サマリ）
   ---------------------------------------------------------------- */
.s2-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px calc(100px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.s2-body::-webkit-scrollbar { display: none; }
.s2-partner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}
.s2-partner-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pu-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--pu);
  flex-shrink: 0;
  font-weight: 600;
}
.s2-partner-name { font-size: 13px; font-weight: 600; color: #333; }
.s2-partner-rel  { font-size: 10px; color: #999; }
.s2-partner-days {
  font-size: 10px;
  color: var(--pu);
  font-weight: 500;
  margin-left: auto;
}

/* ----------------------------------------------------------------
   サンプルバナー
   ---------------------------------------------------------------- */
.s-sample-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #FFF8E1;
  border: 1px solid #FFE082;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 11px;
  color: #8D6E63;
}
.s-sample-badge-lg {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--amber);
  padding: 3px 10px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   今日の相性カード（詳細）
   ---------------------------------------------------------------- */
.today-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
  margin-bottom: 14px;
}
.today-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.today-card-date { font-size: 14px; font-weight: 600; color: #333; }
.today-card-type {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}
.type-best { background: #FFEBEE; color: var(--red); }
.type-turn { background: #FFF8E1; color: var(--amber); }
.type-wait { background: #E8F5E9; color: var(--green); }

.today-score-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f5f5f5;
}
.today-score-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--pu);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.today-score-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--pu-d);
  line-height: 1;
}
.today-score-label {
  font-size: 8px;
  color: #999;
  margin-top: 1px;
}
.today-stars { color: var(--amber); font-size: 11px; margin-bottom: 3px; }
.today-comment {
  font-size: 13px;
  color: #333;
  line-height: 1.8;
  white-space: pre-wrap;
}

.today-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.today-sec { padding: 10px 12px; border-radius: 10px; }
.today-sec-action  { background: #FFF3E0; }
.today-sec-caution { background: #F3E5F5; }
.today-sec-lucky   { background: #E8F5E9; }
.today-sec-label {
  font-size: 9px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 1px;
}
.today-sec-label-a { color: #E65100; }
.today-sec-label-c { color: #7B1FA2; }
.today-sec-label-l { color: #2E7D32; }
.today-sec-text {
  font-size: 12px;
  color: #444;
  line-height: 1.7;
  white-space: pre-wrap;
}
.today-sec-text.lucky-word {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #2E7D32;
  text-align: center;
}

/* ----------------------------------------------------------------
   月間カレンダー
   ---------------------------------------------------------------- */
.cal {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
  margin-bottom: 14px;
}
.cal-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cal-month-name { font-size: 15px; font-weight: 600; color: #333; }
.cal-month-nav { display: flex; gap: 8px; }
.cal-month-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #888;
  cursor: pointer;
  font-family: inherit;
}
.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.cal-dow span {
  text-align: center;
  font-size: 9px;
  color: #bbb;
  padding: 4px 0;
  font-weight: 500;
}
.cal-dow span:first-child { color: var(--red); }
.cal-dow span:last-child { color: #4A90D9; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  position: relative;
}
.cal-cell.today {
  background: var(--pu);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
}
.cal-cell.today .cal-dot { background: #fff; }
.cal-cell.past { color: #ccc; }
.cal-cell.empty { visibility: hidden; }
.cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-top: 2px;
}
.dot-best { background: var(--red); }
.dot-wait { background: var(--green); }
.dot-turn { background: var(--amber); }

.cal-legend {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: #888;
}
.cal-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* ----------------------------------------------------------------
   重要日リスト
   ---------------------------------------------------------------- */
.imp-dates {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
}
.imp-dates-title {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}
.imp-date-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f8f8f8;
}
.imp-date-item:last-child { border-bottom: none; }
.imp-date-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.imp-date-info { flex: 1; }
.imp-date-day { font-size: 12px; font-weight: 600; color: #333; }
.imp-date-desc { font-size: 10px; color: #888; }