:root {
  color-scheme: light;
  /* "ときめき" palette shared with the LP: cream paper, tomato accent, yellow marker.
     --sage / --sage-dark keep their names for older rules but now carry the accent. */
  --bg: #fff8ee;
  --surface: #fffdf8;
  --surface-soft: #fff4e6;
  --ink: #2a2420;
  --muted: #7a6e64;
  --line: #efe4d6;
  --sage: #ee6a4c;
  --sage-dark: #d4533a;
  --tomato: #ee6a4c;
  --egg: #f6cf5b;
  --marker: #f6cf5b;
  --blue: #5e7f9d;
  --shadow: 0 12px 30px rgba(90, 60, 30, 0.12);
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --hand: "Klee One", "Zen Maru Gothic", cursive;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  background: linear-gradient(180deg, #fffdf7 0%, #f8f6f0 42%, #f4f0e8 100%);
  position: relative;
  box-shadow: 0 0 0 1px rgba(65, 52, 37, 0.08);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px;
  background: rgba(255, 253, 247, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(231, 223, 210, 0.8);
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--sage-dark);
  font-size: 12px;
  font-weight: 700;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 24px;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 12px;
  font-size: 20px;
}

h3 {
  margin-bottom: 8px;
  font-size: 15px;
}

.screen {
  min-height: calc(100vh - 134px);
  padding: 14px 14px 96px;
}

.bottom-tabs {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 4;
  width: min(100%, 430px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 8px 8px 12px;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.tab,
.icon-button,
.stepper-button,
.primary-button,
.secondary-button,
.text-button,
.slot,
.chip,
.mood-button,
.no-repeat-button,
.choice-button,
.calendar-day {
  border: 0;
  cursor: pointer;
}

.tab {
  min-height: 44px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.tab.is-active {
  background: #ffece5;
  color: var(--sage-dark);
}

.add-tab {
  min-height: 56px;
  margin-top: -14px;
  background: var(--sage);
  color: #fff;
  box-shadow: 0 8px 18px rgba(238, 106, 76, 0.28);
}

.add-tab.is-active {
  background: var(--sage-dark);
  color: #fff;
}

.add-icon {
  display: block;
  margin-bottom: 1px;
  font-size: 24px;
  line-height: 1;
}

.icon-button {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f1eadf;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
}

.hero-card,
.panel,
.meal-board,
.suggestion-panel,
.recipe-card,
.shopping-group,
.log-detail,
.balance-card,
.mockup-card,
.empty-state {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero-card {
  padding: 14px;
  background: #fffef9;
}

.hero-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.hero-stat {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  background: #fff4e6;
}

.hero-stat strong {
  display: block;
  font-size: 22px;
}

.hero-stat span {
  color: var(--muted);
  font-size: 12px;
}

.panel {
  margin-top: 12px;
  padding: 14px;
}

.danger-zone {
  border-color: #efd3cc;
  background: #fff8f6;
}

.danger-zone h3 {
  color: #9f3d34;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.section-head p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
}

.weekday-list {
  display: grid;
  gap: 10px;
}

.day-row {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  align-items: stretch;
}

.day-label {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f4eadb;
  color: #6f5134;
  font-size: 13px;
  font-weight: 800;
}

.meal-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.slot {
  min-height: 76px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease;
}

.slot:active {
  transform: scale(0.98);
}

.slot.is-empty {
  border-style: dashed;
  background: #fffaf1;
}

.slot-meal {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.slot-title {
  display: -webkit-box;
  min-height: 32px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.slot-meta {
  display: block;
  margin-top: 6px;
  color: var(--sage-dark);
  font-size: 10px;
  font-weight: 700;
}

.suggestion-panel {
  margin-top: 12px;
  padding: 14px;
  border-color: #dfc771;
  background: #fff9e6;
}

.suggestion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #ffece5;
  color: var(--sage-dark);
  font-size: 11px;
  font-weight: 800;
}

.badge.warn {
  background: #fff1df;
  color: #9a542f;
}

.badge.hot {
  background: #f9e7e2;
  color: var(--tomato);
}

.badge.stop {
  background: #ede7df;
  color: #6e6358;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.compact-actions {
  margin-top: 8px;
}

.primary-button,
.secondary-button,
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 8px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.primary-button {
  background: var(--sage);
  color: #fff;
}

.secondary-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.text-button {
  background: transparent;
  color: var(--sage-dark);
}

.secondary-button.danger {
  border-color: #e7c6bf;
  color: var(--tomato);
}

.secondary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.member-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.member-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

body.is-onboarding .bottom-tabs,
body.is-onboarding .icon-button {
  display: none;
}

.onboarding {
  margin-top: 24px;
  padding: 22px 18px;
  text-align: center;
}

.onboarding h2 {
  margin-bottom: 8px;
}

.onboarding p {
  line-height: 1.7;
}

.onboarding-actions {
  display: grid;
  gap: 10px;
  margin: 18px 0 12px;
}

.onboarding-actions .full-button {
  margin-top: 0;
}

.file-input {
  height: auto;
  padding: 9px 12px;
}

.photo-preview {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.photo-preview img {
  width: 100%;
  max-height: 240px;
  border-radius: 8px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.eval-photo {
  display: block;
  width: 100%;
  max-height: 220px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.form-grid {
  display: grid;
  gap: 10px;
}

.register-hero {
  display: grid;
  gap: 10px;
}

.quick-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 8px;
  align-items: end;
}

.fetch-button {
  min-height: 44px;
}

.quick-entry-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.compact-source {
  padding: 9px 10px;
}

.entry-detail-panel .actions {
  grid-template-columns: 1fr 1.1fr;
}

.ingredient-edit-panel {
  display: grid;
  gap: 10px;
}

.ingredient-head {
  align-items: start;
}

.serving-stepper,
.ingredient-amount-controls {
  display: grid;
  grid-template-columns: 34px minmax(70px, auto) 34px;
  gap: 5px;
  align-items: center;
}

.serving-stepper {
  min-width: 132px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.serving-stepper strong {
  color: var(--sage-dark);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.stepper-button {
  display: grid;
  place-items: center;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f0e8;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.ingredient-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ingredient-editor-list {
  display: grid;
  gap: 8px;
}

.ingredient-editor-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(116px, 0.9fr) minmax(74px, 0.7fr) auto;
  gap: 6px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.ingredient-editor-row .input,
.ingredient-editor-row .select {
  height: 38px;
  padding-inline: 9px;
}

.ingredient-delete-button {
  min-height: 38px;
  padding: 0 10px;
}

.ingredient-display-amount {
  grid-column: 2 / -1;
  margin-bottom: 0;
  text-align: right;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.source-card,
.notice {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.source-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.source-card p,
.notice {
  margin-bottom: 0;
}

.notice {
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.input,
.textarea,
.select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.input,
.select {
  height: 44px;
  padding: 0 12px;
}

.textarea {
  min-height: 108px;
  padding: 10px 12px;
  resize: vertical;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip,
.choice-button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f4f0e8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chip.is-active,
.choice-button.is-active,
.choice-button[aria-pressed="true"] {
  background: var(--sage-dark);
  color: #fff;
}

.meal-picker,
.meal-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meal-picker-secondary {
  margin-top: 6px;
}

.meal-more-button {
  background: #fffaf0;
}

.meal-more-button.is-expanded {
  border: 1px solid #ead8b9;
  color: #8a6338;
}

.meal-filter {
  margin-top: 10px;
}

.ingredient-list,
.recipe-list,
.shopping-list,
.feedback-list,
.advice-list,
.mockup-grid {
  display: grid;
  gap: 8px;
}

.subhead {
  margin: 12px 0 8px;
  color: var(--sage-dark);
  font-size: 13px;
}

.step-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.ingredient-row,
.shopping-item,
.feedback-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #f0e9df;
}

.ingredient-row:last-child,
.shopping-item:last-child,
.feedback-row:last-child {
  border-bottom: 0;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 12px;
}

.recipe-card {
  padding: 12px;
}

.mvp-list {
  margin-top: 10px;
}

.recipe-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.recipe-card p {
  margin-bottom: 8px;
}

.link-button {
  color: #fff;
}

.full-button {
  width: 100%;
  margin-top: 12px;
}

.rating-target {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.repeat-focus-card {
  display: grid;
  gap: 8px;
}

.repeat-week-card {
  display: grid;
  gap: 10px;
}

.compact-head {
  align-items: start;
}

.repeat-week-grid {
  display: grid;
  grid-template-columns: 34px repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.week-corner,
.week-day,
.week-meal-label,
.week-cell {
  min-width: 0;
}

.week-day {
  padding: 4px 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.week-day.is-today {
  background: #fff4e6;
  color: var(--sage-dark);
}

.week-meal-label {
  display: grid;
  place-items: center;
  min-height: 36px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.week-meal-label span {
  display: block;
  font-size: 9px;
}

.week-cell {
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 3px 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.week-cell span,
.week-cell small {
  display: block;
}

.week-cell small {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-cell.is-done {
  border-color: #f6cf5b;
  background: #fff4e6;
  color: var(--sage-dark);
}

.week-cell.is-missing {
  border-color: #eccb9a;
  background: #fff2dd;
  color: #9a6234;
}

.week-cell.is-empty {
  background: rgba(255, 255, 255, 0.48);
  color: #c2b8a9;
}

.missing-strip {
  display: grid;
  gap: 6px;
}

.missing-strip strong {
  font-size: 12px;
}

.missing-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.missing-chip {
  border: 1px solid #eccb9a;
  border-radius: 999px;
  background: #fff8ed;
  color: #8a5a2d;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 900;
}

.repeat-focus-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.repeat-focus-main h2 {
  margin-bottom: 2px;
  font-size: 22px;
}

.repeat-focus-main p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.repeat-entry-panel {
  display: grid;
  gap: 8px;
}

.rating-target strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
}

.repeat-date-row {
  display: grid;
  grid-template-columns: auto minmax(148px, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.repeat-date-row label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.repeat-date-row .input {
  height: 38px;
}

.repeat-meal-picker {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
}

.repeat-meal-picker > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.rating-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid #f0e9df;
}

.rating-row:last-child {
  border-bottom: 0;
}

.repeat-person {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding-top: 2px;
  text-align: center;
}

.family-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.repeat-person span:not(.family-avatar) {
  color: var(--sage-dark);
  font-size: 11px;
  font-weight: 900;
}

.repeat-choice-wrap {
  display: grid;
  gap: 5px;
}

.mood-meter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(90deg, #fff1e8 0%, #fff7d9 34%, #ffece5 70%, #eef4fb 100%);
}

.repeat-recipe-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.repeat-recipe-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-align: left;
}

.repeat-recipe-row.is-active {
  border-color: var(--sage);
  background: #fff4e6;
}

.repeat-recipe-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.repeat-thumb {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid var(--line);
  object-fit: cover;
  background: #fffaf0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.repeat-photo-tap {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--sage-dark);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.repeat-photo-tap img {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  object-fit: cover;
}

.mood-button,
.no-repeat-button {
  min-width: 0;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

.mood-button {
  display: grid;
  gap: 2px;
  place-items: center;
  padding: 5px 2px;
}

.repeat-compact-fields {
  display: grid;
  gap: 8px;
}

.repeat-compact-fields .compact-textarea {
  min-height: 48px;
}

.repeat-photo-preview {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  align-items: center;
}

.repeat-photo-preview img {
  width: 72px;
  height: 54px;
}

.repeat-picker {
  border-top: 1px solid #f0e9df;
  padding-top: 10px;
}

.repeat-picker + .repeat-picker {
  margin-top: 10px;
}

.repeat-picker summary {
  cursor: pointer;
  color: var(--sage-dark);
  font-size: 13px;
  font-weight: 900;
}

.compact-history {
  margin-top: 8px;
}

.compact-remove {
  margin-top: 0;
}

.mood-button span:not(.mood-dot) {
  display: block;
}

.mood-button small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.mood-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--sage);
}

.mood-tomorrow .mood-dot {
  background: var(--tomato);
}

.mood-weekly .mood-dot {
  background: var(--egg);
}

.mood-twice_month .mood-dot {
  background: var(--sage);
}

.mood-monthly .mood-dot {
  background: var(--blue);
}

.mood-pause .mood-dot {
  background: #9b9185;
}

.mood-button.is-active {
  border-color: var(--sage);
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(238, 106, 76, 0.25);
}

.mood-button.is-active small {
  color: var(--sage-dark);
}

.no-repeat-button {
  width: 100%;
  min-height: 38px;
  background: #f1ede8;
  color: #6e6358;
}

.no-repeat-button.is-active {
  border-color: #9b9185;
  background: #e2ddd5;
  color: var(--ink);
}

.compact-textarea {
  min-height: 88px;
}

.shopping-group {
  padding: 12px;
}

.shopping-item {
  grid-template-columns: auto 1fr auto;
}

.shopping-item input {
  width: 20px;
  height: 20px;
  accent-color: var(--sage);
}

.shopping-item.is-checked {
  color: var(--muted);
  text-decoration: line-through;
}

.progress {
  height: 10px;
  overflow: hidden;
  border-radius: 8px;
  background: #efe7dc;
}

.progress span {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: var(--sage);
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.calendar-day {
  min-height: 48px;
  padding: 5px 4px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
}

.calendar-day.is-active {
  border-color: var(--sage);
  background: #ffece5;
}

.calendar-day span {
  display: block;
  font-size: 11px;
  font-weight: 800;
}

.photo-dot {
  display: block;
  width: 26px;
  height: 18px;
  margin-top: 4px;
  border-radius: 5px;
  background: linear-gradient(135deg, #e9b24d, #c95b48 55%, #ee6a4c);
}

.log-detail {
  margin-top: 12px;
  padding: 14px;
}

.rating {
  color: #b87d00;
  font-size: 13px;
  font-weight: 900;
}

.balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.balance-card {
  padding: 12px;
}

.balance-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 24px;
}

.advice {
  padding: 10px;
  border-radius: 8px;
  background: #fffaf0;
  border: 1px solid #f1dfaa;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 78px;
  z-index: 5;
  width: min(calc(100% - 28px), 402px);
  transform: translateX(-50%);
  padding: 12px 14px;
  border-radius: 8px;
  background: #2d2925;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.mockup-card {
  overflow: hidden;
}

.mockup-card img {
  display: block;
  width: 100%;
  height: auto;
}

.mockup-card figcaption {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.empty-state {
  padding: 16px;
  text-align: center;
}

@media (max-width: 520px) {
  .ingredient-head,
  .repeat-focus-main,
  .rating-target,
  .repeat-compact-fields {
    grid-template-columns: 1fr;
  }

  .ingredient-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ingredient-head .serving-stepper {
    width: 100%;
  }

  .ingredient-editor-row {
    grid-template-columns: 1fr;
  }

  .ingredient-display-amount {
    grid-column: auto;
    text-align: left;
  }

  .repeat-date-row {
    grid-template-columns: auto 1fr;
  }

  .repeat-date-row .muted {
    grid-column: 2;
  }

  .repeat-meal-picker {
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
  }

  .repeat-recipe-row {
    grid-template-columns: 42px 1fr;
  }

  .repeat-recipe-row .badge {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 360px) {
  .quick-url-row {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 700px) {
  body {
    background: #ece6dc;
  }

  .app-shell {
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: calc(100vh - 40px);
    border-radius: 18px;
    overflow: hidden;
  }

  .bottom-tabs {
    border-radius: 0 0 18px 18px;
  }
}

/* --- 動画サムネイル --- */
.recipe-thumb-link {
  flex-shrink: 0;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f1eadf;
}

.recipe-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 献立の差し替え・1タップ記録 --- */
.slot.is-pinned {
  border-color: var(--sage);
  background: #f7faf4;
}

.slot-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.slot-button {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
}

/* --- 買い物リスト --- */
.shopping-category {
  margin: 10px 0 4px;
  color: var(--sage-dark);
  font-size: 11px;
  font-weight: 800;
}

.shopping-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 6px;
  cursor: pointer;
}

.shopping-item .shopping-name {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}

.shopping-item .shopping-amount {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.shopping-item.is-checked {
  background: #f4f0e8;
}

.shopping-item.is-checked .shopping-name,
.shopping-item.is-checked .shopping-amount {
  text-decoration: line-through;
  color: var(--muted);
}

.shopping-check {
  width: 18px;
  height: 18px;
  accent-color: var(--sage-dark);
}

/* --- バックアップリマインド --- */
.backup-reminder {
  border-color: var(--egg);
  background: #fff9e6;
}

.serving-controls { min-width: 0; display: grid; gap: 8px; }
.serving-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.serving-presets button { white-space: nowrap; min-height: 44px; }

.image-import-panel input[type="file"] { display:block; width:100%; margin:8px 0 16px; }
.image-previews { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.image-previews figure { margin:0; min-width:0; }
.image-previews img { width:100%; max-height:280px; object-fit:contain; background:#f4f0e8; border-radius:8px; }
.image-previews .actions { flex-wrap:wrap; }
.image-previews button { min-height:44px; }

/* App-sized layouts: the shell stays narrow even on a wide desktop. */
[hidden] { display: none !important; }
/* (older palette overrides removed; tokens live in the first :root) */
.topbar .eyebrow { font-size: 10px; letter-spacing: .025em; }
.screen { padding: 20px 16px 110px; }
.hero-card, .panel { border-radius: 20px; box-shadow: var(--shadow); }
.hero-card { background: #fff4e6; }
h2 { font-size: 24px; line-height: 1.4; letter-spacing: -.04em; }
p { line-height: 1.65; }
.section-head > div, .field, .two-col > div { min-width: 0; }
.section-head p { font-weight: 400; }
.input, .select, .textarea { min-width: 0; max-width: 100%; }
.primary-button, .secondary-button { border-radius: 12px; min-height: 44px; }
.entry-methods { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 20px 0; }
.entry-methods button { padding: 14px 4px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer; }
.entry-methods button[aria-pressed="true"] { border: 2px solid var(--sage-dark); background: #ffece5; }
.entry-methods strong, .entry-methods small { display: block; }
.entry-methods small { font-size: 10px; margin-top: 6px; }
.entry-extra { border-top: 1px solid var(--line); padding: 14px 0; min-width: 0; }
.entry-extra summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sage-dark); padding: 6px 0; }
.entry-extra[open] summary { margin-bottom: 16px; }
.ingredient-head { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.serving-controls { width: 100%; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; }
.serving-stepper, .ingredient-amount-controls { min-width: 0; grid-template-columns: 34px minmax(0,1fr) 34px; }
.ingredient-editor-row { grid-template-columns: minmax(0,1fr) auto; gap: 10px; background: #fff; padding: 14px; border-radius: 14px; }
.ingredient-name-field { grid-column: 1 / -1; }
.ingredient-amount-controls { grid-column: 1; }
.ingredient-category-input { grid-column: 1; grid-row: 3; }
.ingredient-delete-button { grid-column: 2; grid-row: 2; white-space: nowrap; }
.ingredient-display-amount { grid-column: 1 / -1; text-align: left; font-size: 12px; }
.ingredient-editor-row .input { width: 100%; }
.recipe-diff { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.diff-line { border-radius: 10px; padding: 12px; border-left: 4px solid transparent; overflow-wrap: anywhere; }
.diff-line span { font-size: 11px; font-weight: 700; }
.diff-line p { margin: 6px 0 0; font-size: 14px; }
.diff-mine { background: #fff0e5; border-color: #aa4d20; color: #753814; }
.diff-common { background: #e8f2e8; border-color: #366949; color: #285336; }
.diff-same { background: #f4f3ef; color: var(--muted); }
.comparison-panel { padding: 16px; }
.collection-hero .hero-row { display: none; }
.recipe-card { border-radius: 20px; overflow: hidden; }
button:focus-visible, summary:focus-visible { outline: 3px solid #b35a29; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
.image-feedback { margin: 18px 0; padding: 16px; border-radius: 14px; background: #fff4e6; border: 1px solid #efe4d6; }
.image-feedback p { margin: 8px 0 0; font-size: 13px; }
.image-feedback.error { background: #fff0e5; border-color: #d5a185; }
.image-feedback.success { background: #fff4e6; }
.image-feedback small { display: block; margin-top: 8px; }

/* Daily journey and progressive profile setup */
.topbar .eyebrow { font-size: 11px; }
.profile-button { border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--sage-dark); width:48px; height:48px; font-size:12px; flex-shrink:0; }
.bottom-tabs .tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:11px; padding:9px 0; min-width:0; }
.bottom-tabs .tab > span:first-child { font-size:20px; line-height:1.1; }
.bottom-tabs .tab.is-active { background:#ffece5; border-radius:16px; }
.is-onboarding #profile-button { visibility:hidden; }
.profile-wizard h2 { margin:24px 0 20px; font-size:24px; line-height:1.55; }
.wizard-progress { display:flex; justify-content:space-between; font-size:12px; margin-top:16px; }
.profile-wizard progress { width:100%; height:6px; accent-color:var(--sage-dark); }
.profile-wizard p { line-height:1.8; }
.profile-options { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 24px; }
.profile-choice { display:flex; gap:10px; align-items:center; min-height:48px; padding:12px; border:1px solid var(--line); background:var(--surface); border-radius:14px; cursor:pointer; flex:1 1 120px; font-size:14px; }
.profile-choice:has(input:checked) { border-color:var(--sage-dark); background:#ffece5; }
.profile-choice input { accent-color:var(--sage-dark); flex:none; width:18px; height:18px; }
.profile-wizard .field { display:grid; gap:10px; margin:20px 0; }
.profile-wizard fieldset { min-width:0; border:0; padding:0; margin:16px 0; }
.profile-wizard legend { font-weight:700; }
.profile-wizard small { color:var(--muted); line-height:1.7; }
.ownership-list { display:grid; gap:8px; }
.ownership-list > label { display:grid; grid-template-columns:minmax(0,1fr) minmax(100px,110px); align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); }
.ownership-list > label > span { overflow-wrap:anywhere; font-size:14px; }
.ownership-list .input { min-width:0; width:100%; padding:12px 8px; }
.wizard-footer { display:flex; align-items:center; gap:8px; margin:24px 0 12px; }
.wizard-footer .primary-button { flex:1; }
.profile-summary { margin:24px 0; }
.profile-summary div { padding:12px 0; border-bottom:1px solid var(--line); }
.profile-summary dt { color:var(--muted); font-size:12px; margin-bottom:6px; }
.profile-summary dd { margin:0; line-height:1.7; overflow-wrap:anywhere; }
.today-heading { padding:16px 4px 4px; }
.today-heading h2 { font-size:28px; font-weight:750; letter-spacing:.03em; margin-top:10px; }
.today-dish { padding:0; overflow:hidden; }
.today-dish-body { display:grid; gap:12px; padding:24px; }
.today-dish-body h3 { font-size:23px; line-height:1.5; margin:0; }
.today-dish-body p { margin-bottom:2px; }
.daily-photo { width:100%; max-height:250px; object-fit:cover; border-radius:16px; }
.today-dish .daily-photo { border-radius:0; }
.dish-art { background:linear-gradient(145deg,#f1e7d5,#ebeeda); border-radius:16px; text-align:center; overflow:hidden; padding:10px 10px 12px; }
.dish-art svg { display:block; width:100%; height:140px; }
.dish-art.large { border-radius:0; }
.dish-art.large svg { height:190px; }
.dish-art small { color:#6f705e; font-size:10px; }
.setup-invitation { background:#fff4e6; padding:18px; border-radius:18px; margin-bottom:18px; }
.setup-invitation p { font-size:14px; line-height:1.7; }
.daily-plan-row { padding:20px 0; border-bottom:1px solid var(--line); }
.daily-plan-row:first-child { padding-top:4px; }
.daily-plan-row h3 { font-size:18px; line-height:1.6; }
.daily-plan-row .actions { flex-wrap:wrap; }
.daily-plan-row + .primary-button { width:100%; margin-top:20px; }
.daily-shopping-row { display:grid; grid-template-columns:minmax(0,1fr) 108px; gap:12px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.daily-shopping-row .input { min-width:0; padding:12px 6px; font-size:13px; }
.daily-shopping-row p { margin:6px 0 0; color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.daily-shopping-row strong { overflow-wrap:anywhere; }
.cooking-ingredients { list-style:none; padding:0; }
.cooking-ingredients li { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.cooking-steps { padding-left:26px; }
.cooking-steps li { padding-left:5px; margin-bottom:22px; line-height:1.9; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid var(--sage-dark); outline-offset:3px; }
@media(max-width:360px) { .today-dish-body { padding:18px; } .profile-wizard { padding:18px; } .profile-wizard h2 { font-size:22px; } }

/* Compact, single-tap equipment setup. */
.equipment-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:20px 0 12px; }
.equipment-group { display:flex; flex-direction:column; align-items:center; gap:6px; min-height:64px; padding:10px 3px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--ink); font-size:12px; cursor:pointer; }
.equipment-group[aria-pressed="true"] { background:var(--sage-dark); color:white; border-color:var(--sage-dark); }
.profile-wizard .equipment-group small { color:inherit; }
.equipment-hint { font-size:13px; color:var(--muted); }
.equipment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.equipment-choice { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:12px; min-height:86px; padding:14px; border:1px solid var(--line); border-radius:14px; background:white; color:var(--ink); font-size:14px; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.equipment-choice strong { font-size:12px; color:var(--muted); }
.equipment-choice[aria-pressed="true"] { background:#ffece5; border-color:var(--sage-dark); }
.equipment-choice[aria-pressed="true"] strong { color:var(--sage-dark); }
.equipment-choice[aria-pressed="mixed"] { border-style:dashed; }
.equipment-custom { margin-top:18px; font-size:14px; }
.equipment-custom summary { padding:12px 0; cursor:pointer; }

/* Dense mobile selection: readable labels, 44px+ targets, decorative emoji. */
.choice-emoji { display:inline-block; margin-right:6px; font-size:1.12em; line-height:1.2; }
.profile-wizard { padding:16px; }
.profile-wizard .wizard-progress { margin:0; }
.profile-wizard h2 { font-size:21px; line-height:1.4; margin:14px 0 10px; }
.profile-wizard p { font-size:13px; line-height:1.55; margin-bottom:12px; }
.profile-wizard .profile-options { gap:6px; margin:10px 0 14px; }
.profile-wizard .profile-choice { min-height:44px; padding:8px 10px; gap:6px; flex:1 1 95px; font-size:14px; }
.profile-wizard .profile-choice > span { display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
.profile-wizard .profile-choice input { width:16px; height:16px; }
.profile-wizard .field { margin:12px 0; gap:6px; }
.profile-wizard .field small { font-size:11px; }
.profile-wizard .input { min-height:44px; font-size:16px; padding:9px 10px; }
.profile-wizard fieldset { margin:12px 0; }
.profile-wizard fieldset .profile-choice { flex:1 1 60px; }
.profile-wizard[data-step="1"] .profile-options:first-of-type { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.profile-wizard[data-step="1"] .profile-options:first-of-type .profile-choice { justify-content:center; padding:6px 1px; }
.profile-wizard[data-step="1"] .profile-options:first-of-type input { position:absolute; opacity:0; width:1px; height:1px; }
.profile-wizard .profile-choice:has(input:focus-visible) { outline:3px solid var(--sage-dark); outline-offset:2px; }
.profile-wizard .equipment-groups { margin:10px 0; gap:6px; }
.profile-wizard .equipment-group { flex-direction:row; justify-content:center; min-height:44px; padding:8px 2px; gap:2px; font-size:12px; }
.profile-wizard .equipment-group .choice-emoji { margin-right:2px; }
.profile-wizard .equipment-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.profile-wizard .equipment-choice { min-height:78px; padding:9px 5px; gap:4px; align-items:center; text-align:center; font-size:13px; border-radius:12px; }
.profile-wizard .equipment-choice .choice-emoji { margin:0; font-size:22px; }
.profile-wizard .equipment-choice strong { font-size:11px; }
.profile-wizard .equipment-custom { margin-top:10px; font-size:13px; }
.profile-wizard .equipment-custom summary { min-height:44px; padding:12px 0; }
.profile-wizard .wizard-footer { margin:14px 0 4px; gap:8px; }
.profile-wizard button { min-height:44px; }
.profile-wizard .profile-summary { margin:10px 0; }
.profile-summary div { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; padding:10px 0; }
.profile-summary dt { grid-column:1; margin-bottom:3px; }
.profile-summary dd { grid-column:1; font-size:14px; }
.profile-summary button { grid-column:2; grid-row:1 / span 2; align-self:center; padding:8px 10px; font-size:12px; }
.topbar { padding-top:10px; padding-bottom:10px; }
.topbar .eyebrow { display:none; }
.today-heading { padding-top:10px; }
.today-heading h2 { font-size:25px; }
.daily-plan-row { padding:14px 0; }
.daily-shopping-row { padding:12px 0; }
@media(max-width:359px) {
 .profile-wizard { padding:12px; }
 .profile-wizard h2 { font-size:20px; }
 .profile-wizard .equipment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .profile-wizard .equipment-group { font-size:11px; }
}
@media(max-width:359px) {
 .profile-wizard[data-step="1"] .profile-options:first-of-type { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.profile-wizard .equipment-choice { min-height:76px; padding:8px 5px; gap:2px; }
.profile-wizard .equipment-choice .choice-emoji { font-size:20px; line-height:1; }
.profile-wizard .wizard-secondary { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px; }
.profile-wizard .wizard-secondary > button { flex:1; font-size:13px; padding:8px 4px; }
.profile-wizard .wizard-secondary > p { margin:8px 0 0; width:100%; text-align:center; }

/* A compact, touch-first food preference deck. */
.taste-caption,.taste-secondary {display:flex;justify-content:space-between;align-items:center;gap:8px}
.taste-caption{font-size:13px!important;margin:6px 0!important}
.taste-card{position:relative;aspect-ratio:1/1;max-height:360px;overflow:hidden;border-radius:24px;background:#e8dac5;touch-action:pan-y;user-select:none;box-shadow:0 8px 24px #382b171c;will-change:transform}
.taste-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.taste-card:focus-visible{outline:3px solid #355d45;outline-offset:3px}
.taste-card-title{position:absolute;inset:auto 0 0;padding:36px 18px 18px;color:white;background:linear-gradient(transparent,#23190adb)}
.taste-card-title h3{font-size:21px;line-height:1.35;margin:5px 0 0;color:inherit}
.taste-card-title small{font-size:13px;color:white}
.taste-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.taste-actions button{min-height:48px;border:1px solid #d8d9ce;border-radius:24px;background:white;font-weight:700;color:#54604f;font-size:14px;padding:8px}
.taste-actions button:last-child{background:#d4533a;color:white;border-color:#d4533a}
.taste-secondary button{min-height:44px;font-size:13px}
.taste-quiz>p:last-child{margin:0!important;text-align:center;font-size:11px!important}
.taste-result{text-align:center;padding:8px 0}
.taste-result-emoji{font-size:64px}
.taste-result h3{font-size:26px;line-height:1.4;color:#d4533a;margin:8px 0 16px}
.taste-result p{line-height:1.6!important}
.taste-liked{background:#f4eee3;border-radius:16px;padding:12px}
.taste-result .text-button{min-height:44px;font-size:13px}
.image-unavailable img{visibility:hidden}
.image-unavailable:before{content:'🍽️ 写真を読み込めませんでした';display:block;text-align:center;padding-top:50px;font-size:14px}
@media(max-width:359px){.taste-card-title h3{font-size:18px}.taste-actions button{font-size:12px}.taste-result h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){.taste-card{transform:none!important}}

.priority-card{aspect-ratio:auto;min-height:255px;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px;background:#f8f1e6;text-align:center}
.priority-card>span{font-size:46px}.priority-card h3{font-size:21px;line-height:1.5;margin:0}
.priority-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.priority-options p{font-size:13px!important;line-height:1.6!important;margin:0}
.persona-portrait{display:block;width:210px;max-width:80%;height:auto;margin:0 auto;border-radius:40px}
.persona-axes{text-align:left;margin:18px 0}.persona-axes p{display:flex;justify-content:space-between;gap:4px;font-size:11px!important;margin:10px 0 3px!important}.persona-axes strong{font-size:11px}.persona-axes meter{width:100%;height:12px}
.persona-operation,.persona-conversation{padding:12px;border-radius:14px;background:#f8f1e6;text-align:left}.persona-conversation{border:1px dashed #ee6a4c}
.persona-details{text-align:left;margin:12px 0;font-size:13px}.persona-details summary{padding:10px 0;min-height:44px;cursor:pointer}.persona-details p{font-size:12px!important}
.persona-matrix{width:100%;table-layout:fixed;border-collapse:collapse;font-size:11px;margin:12px 0}.persona-matrix caption{font-weight:700;margin:8px}.persona-matrix th,.persona-matrix td{border:1px solid #efe4d6;text-align:center;padding:5px}.persona-matrix th:first-child{width:24%}.persona-matrix td img{width:100%;max-width:110px;border-radius:16px}.persona-matrix td span,.persona-matrix td strong{display:block}.persona-matrix td[aria-current]{background:#f6dfd2;outline:2px solid #d4533a;outline-offset:-2px}

/* Fast recipe confirmation and shopping in one hand. */
.planning-panel { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border, #ddd); border-radius: 18px; }
.planning-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 14px; }
.planning-chip { display:flex; align-items:center; gap:5px; padding:9px 10px; border:1px solid #efe4d6; border-radius:12px; cursor:pointer; min-height:44px; }
.planning-chip:has(input:checked) { background:#fff4e6; border-color:#66805e; }
.planning-chip input { accent-color:#d4533a; width:18px; height:18px; }
.daily-shopping-check { display:flex; align-items:center; gap:12px; flex:1; min-height:52px; cursor:pointer; }
.daily-shopping-check input { width:28px; height:28px; flex-shrink:0; accent-color:#d4533a; }
.daily-shopping-check small { display:block; }
.daily-shopping-check:has(input:checked) strong { text-decoration:line-through; opacity:.65; }
.daily-shopping-row details { flex-shrink:0; }
.daily-shopping-row summary { padding:12px; cursor:pointer; }

.daily-shopping-row { grid-template-columns:minmax(0,1fr) auto; }
.daily-shopping-check { width:auto; height:auto; min-width:0; }
.daily-shopping-check > span { min-width:0; }
.daily-shopping-row details { position:relative; }
.daily-shopping-row details[open] > button { position:absolute; right:0; top:44px; min-width:148px; z-index:2; background:white; box-shadow:var(--shadow); }
.daily-shopping-row details[open] > button + button { top:98px; }
.planning-panel .actions:has([data-planning-minute]) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.planning-panel [data-planning-minute] { min-width:0; padding:10px 6px; }


.playlist-items { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.playlist-item { display: grid; grid-template-columns: 24px 72px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; min-height: 44px; }
.playlist-item input { width: 22px; height: 22px; accent-color: var(--sage-dark); }
.playlist-item img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; background: var(--surface-soft); }
.playlist-item span { display: grid; gap: 2px; min-width: 0; }
.playlist-item strong { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.playlist-item small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-item.is-owned { opacity: 0.55; cursor: default; }
.playlist-item:has(input:focus-visible) { outline: 3px solid var(--sage); outline-offset: 2px; }
.playlist-footer { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); margin-top: 12px; padding-top: 8px; background: linear-gradient(transparent, var(--bg) 30%); }
.playlist-footer .primary-button { width: 100%; }
.playlist-thumb-empty { width: 72px; height: 54px; border-radius: 8px; background: var(--surface-soft); display: grid !important; place-items: center; font-size: 22px; }

.welcome-card { display: grid; gap: 14px; }
.welcome-actions { display: grid; gap: 10px; }
.welcome-actions button { width: 100%; min-height: 52px; font-size: 16px; }

/* Shopping list: one-tap row actions, compact add form, folded secondary groups */
.shopping-hero { display: grid; gap: 10px; }
.shopping-hero h2, .shopping-hero p { margin: 0; }
.daily-shopping-row { display: flex; align-items: center; gap: 8px; }
.shopping-inline { flex-shrink: 0; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--sage-dark); font-size: 13px; font-weight: 700; cursor: pointer; }
.shopping-add { display: grid; grid-template-columns: minmax(0, 1fr) 88px auto; gap: 8px; }
.shopping-add .input { min-width: 0; }
.shopping-add .primary-button { min-height: 44px; padding: 0 16px; }
.shopping-fold > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; }
.shopping-fold > summary::-webkit-details-marker { display: none; }
.shopping-fold > summary h3 { margin: 0; }
.shopping-fold > summary::after { content: "開く ▾"; font-size: 12px; color: var(--sage-dark); font-weight: 700; }
.shopping-fold[open] > summary::after { content: "閉じる ▴"; }

/* Plan: one tappable card per day, inline swap choices */
.plan-hero { display: grid; gap: 10px; }
.plan-hero-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.plan-hero-head h2 { margin: 0; }
.plan-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.segmented { display: inline-flex; gap: 4px; padding: 3px; border-radius: 12px; background: #f4f0e8; }
.segmented .choice-button { min-height: 40px; min-width: 72px; font-size: 14px; }
.plan-list { display: grid; gap: 10px; }
.plan-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.plan-card.is-swapping { border-color: var(--sage-dark); }
.plan-card.is-off { opacity: 0.8; }
.plan-card > .notice, .plan-card > .secondary-button { grid-column: 1 / -1; }
.plan-main { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 56px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.plan-main > span:last-child { display: grid; gap: 2px; min-width: 0; }
.plan-main strong { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.plan-main small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.plan-status { color: var(--sage-dark); }
.plan-thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--surface-soft); display: grid; place-items: center; font-size: 26px; }
.plan-icon { min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--sage-dark); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.plan-more { position: relative; }
.plan-more > summary { list-style: none; min-width: 36px; min-height: 44px; display: grid; place-items: center; cursor: pointer; font-weight: 800; color: var(--muted); }
.plan-more > summary::-webkit-details-marker { display: none; }
.plan-more[open] > div { position: absolute; right: 0; top: 44px; z-index: 3; display: grid; gap: 6px; min-width: 190px; padding: 10px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.plan-list > .primary-button { width: 100%; min-height: 52px; }
.swap-panel { display: grid; gap: 6px; margin: -4px 0 4px 16px; padding-left: 10px; border-left: 3px solid var(--sage); }
.swap-option { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 56px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.swap-option .plan-thumb { width: 44px; height: 44px; font-size: 20px; }
.swap-option span { display: grid; gap: 2px; min-width: 0; }
.swap-option strong { font-size: 15px; overflow-wrap: anywhere; }
.swap-option small { color: var(--muted); font-size: 12px; }
.swap-option b { color: var(--sage-dark); font-size: 13px; }
.swap-option.needs-review b { color: var(--tomato); }
.plan-main:focus-visible, .swap-option:focus-visible, .plan-icon:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }
@media (max-width: 360px) {
  .plan-list { padding-left: 8px; padding-right: 8px; }
  .plan-card { padding: 6px; gap: 2px; }
  .plan-main { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
  .plan-main .plan-thumb { width: 44px; height: 44px; font-size: 20px; }
  .plan-icon { padding: 0 8px; min-width: 44px; }
  .plan-icon-label { display: none; }
  .plan-more > summary { min-width: 28px; }
  .swap-panel { margin-left: 4px; padding-left: 6px; }
}

/* Recipe conditions: tap chips, auto-detected summary, edits folded */
.planning-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; margin: 10px 0; }
.planning-row > span { font-size: 13px; font-weight: 800; color: var(--muted); }
.planning-options { display: flex; flex-wrap: wrap; gap: 6px; }
.planning-options .choice-button { min-height: 40px; min-width: 52px; font-size: 14px; }
.planning-summary { display: grid; gap: 4px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-soft); }
.planning-summary div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
.planning-summary dt { color: var(--muted); font-size: 13px; }
.planning-summary dd { margin: 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.planning-edit { margin: 8px 0; }
.planning-edit > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--sage-dark); padding: 8px 0; }
.planning-confirm { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }

/* Today: compact dish card when there is no photo; one-tap rows for what's next */
.today-dish-head { display: grid; gap: 6px; padding: 20px 20px 0; }
.today-dish-head h3 { font-size: 22px; line-height: 1.4; margin: 0; }
.today-dish-head p { margin: 0; }
.today-dish-actions { display: grid; gap: 10px; padding: 14px 20px 20px; }
.today-dish.is-compact { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.today-dish.is-compact .dish-art { margin: 16px 0 0 16px; padding: 4px; height: 88px; border-radius: 14px; display: grid; align-content: center; }
.today-dish.is-compact .dish-art svg { height: 54px; }
.today-dish.is-compact .dish-art small { font-size: 10px; line-height: 1.2; }
.today-dish.is-compact .today-dish-head { padding: 16px 16px 0 12px; }
.today-dish.is-compact .today-dish-actions { grid-column: 1 / -1; padding: 12px 16px 16px; }
.today-links { display: grid; gap: 8px; }
.today-link { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 56px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.today-link .plan-thumb { width: 44px; height: 44px; font-size: 20px; }
.today-link span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.today-link small { color: var(--muted); font-size: 12px; }
.today-link strong { font-size: 15px; overflow-wrap: anywhere; }
.today-link b { color: var(--muted); font-size: 20px; }
.starter-list { display: grid; gap: 8px; }
.starter-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.starter-row .plan-thumb { width: 44px; height: 44px; font-size: 20px; }
.starter-row span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.starter-row strong { font-size: 15px; overflow-wrap: anywhere; }
.starter-row small { color: var(--muted); font-size: 12px; }

/* Cooking: compact header, tap-to-tick ingredients and steps, pinned main action */
.cooking-card { display: grid; gap: 12px; }
.cooking-back { justify-self: start; padding: 4px 0; }
.cooking-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.cooking-head .plan-thumb { width: 64px; height: 64px; }
.cooking-head h2 { margin: 2px 0; font-size: 22px; line-height: 1.35; }
.cooking-head p { margin: 0; }
.cooking-safety { border-radius: 12px; background: #fff8ea; padding: 10px 12px; }
.cooking-safety summary { cursor: pointer; font-size: 13px; font-weight: 700; }
.cooking-safety p { margin: 8px 0 0; }
.cooking-card h3 small { font-size: 12px; font-weight: 400; margin-left: 6px; }
.cooking-check { list-style: none; padding: 0; margin: 0; }
.cooking-check li { border-bottom: 1px solid var(--line); }
.cooking-check label { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 48px; padding: 8px 0; cursor: pointer; }
.cooking-check input { width: 22px; height: 22px; accent-color: var(--sage-dark); }
.cooking-steps.cooking-check { counter-reset: step; }
.cooking-steps.cooking-check label { grid-template-columns: 24px minmax(0, 1fr); font-size: 17px; line-height: 1.6; }
.cooking-steps.cooking-check label > span::before { counter-increment: step; content: counter(step) ". "; font-weight: 800; color: var(--sage-dark); }
.cooking-check label:has(input:checked) span { text-decoration: line-through; opacity: 0.55; }
.cooking-primary { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); padding-top: 10px; background: linear-gradient(transparent, var(--surface-soft) 35%); }
.cooking-primary .primary-button { width: 100%; min-height: 54px; font-size: 17px; }
.settings-food { display: grid; gap: 10px; }
.settings-food h2 { margin: 0; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.settings-row > span { font-weight: 800; color: var(--muted); font-size: 13px; }
.settings-stepper { display: flex; align-items: center; gap: 10px; }
.settings-stepper strong { min-width: 56px; text-align: center; font-size: 17px; }
.settings-stepper .plan-icon { min-width: 44px; font-size: 18px; }
.settings-fold > summary { list-style: none; cursor: pointer; display: grid; gap: 2px; }
.settings-fold > summary::-webkit-details-marker { display: none; }
.settings-fold > summary h3 { margin: 0; }
.settings-fold > summary h3::after { content: " ▾"; color: var(--sage-dark); font-size: 13px; }
.settings-fold[open] > summary { margin-bottom: 10px; }
.cooking-check li { display: block; padding: 0; }
.cooking-check label span:nth-of-type(2) { justify-self: end; text-align: right; color: var(--muted); }
.badge { white-space: nowrap; }
.planning-summary div { grid-template-columns: 88px minmax(0, 1fr); }


/* ===== 2026-09-24 "ときめき" theme (matches the LP) ===== */
.hand { font-family: var(--hand); font-weight: 600; letter-spacing: 0.04em; }
.marker { background: linear-gradient(transparent 60%, var(--marker) 60%, var(--marker) 90%, transparent 90%); padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.app-shell { background: var(--bg); }
.topbar { align-items: flex-start; padding: 14px 16px 10px; background: rgba(255, 248, 238, 0.94); border-bottom: 0; }
.brand-block { display: grid; gap: 0; }
.app-logo { margin: 0; font-size: 28px; font-weight: 900; color: var(--tomato); letter-spacing: 0.04em; line-height: 1.1; }
.app-tagline { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.profile-button { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); display: grid; place-items: center; }
.profile-button svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.bottom-tabs { background: rgba(255, 253, 248, 0.96); border-top: 1px solid var(--line); padding: 6px 8px calc(10px + env(safe-area-inset-bottom)); }
.tab { display: grid; justify-items: center; gap: 2px; min-height: 54px; border-radius: 16px; font-size: 11px; font-weight: 700; color: var(--muted); }
.tab-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.is-active, .bottom-tabs .tab.is-active { background: #ffece5; color: var(--tomato); }
h1, h2, h3 { font-weight: 900; letter-spacing: 0.01em; }
h2 { font-size: 24px; line-height: 1.35; }
.hero-card, .panel { border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 8px 22px rgba(90, 60, 30, 0.06); }
.hero-card { background: var(--surface); }
.primary-button { border-radius: 999px; background: var(--tomato); color: #fff; font-weight: 900; box-shadow: 0 8px 18px rgba(238, 106, 76, 0.3); }
.primary-button:hover { background: var(--sage-dark); }
.secondary-button { border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; }
.text-button { color: var(--sage-dark); font-weight: 700; }
.badge { background: #ffece5; color: var(--sage-dark); border-radius: 999px; }
.eyebrow { color: var(--tomato); }
.notice { background: #fff6dc; border-color: #f3dfa6; }

/* ----- Today (mockup: 最近のごはん / 今夜のおすすめ / 明日も、楽しみ) ----- */
.dish-tile { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: var(--surface-soft); }
.dish-art-tile { display: grid; place-items: center; align-content: center; gap: 2px; color: var(--muted); }
.dish-art-tile > span { font-size: 34px; line-height: 1; }
.dish-art-tile small { font-size: 9px; }
.art-japanese { background: linear-gradient(145deg, #fff1dc, #fde6cf); }
.art-western { background: linear-gradient(145deg, #ffe6dc, #fff0d6); }
.art-chinese { background: linear-gradient(145deg, #ffe0d6, #fbe9c9); }
.today-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin: 4px 2px 14px; }
.today-top h2 { font-size: 30px; line-height: 1.3; margin: 0; }
.today-date { margin: 6px 0 0; color: var(--muted); font-weight: 700; font-size: 14px; }
.today-note { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: right; transform: rotate(-4deg); white-space: nowrap; }
.section-title { font-size: 20px; margin: 0 0 10px; }
.recent-meals { margin: 0 0 16px; }
.recent-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.recent-card { margin: 0; position: relative; }
.recent-card .dish-tile { aspect-ratio: 4 / 3; }
.recent-card figcaption { position: absolute; left: 8px; bottom: 8px; right: 8px; padding: 3px 8px; border-radius: 10px; background: rgba(255, 253, 248, 0.94); font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tonight-card { padding: 16px; background: #fff4ea; border: 1.5px solid #f6d3c5; }
.tonight-head { display: flex; justify-content: space-between; align-items: flex-start; }
.tonight-label { margin: 0 0 10px; font-size: 24px; font-weight: 900; color: var(--tomato); }
.tonight-aside { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); transform: rotate(-6deg); }
.tonight-photo { aspect-ratio: 16 / 11; border-radius: 18px; }
.tonight-title { font-size: 26px; margin: 12px 0 4px; line-height: 1.3; }
.tonight-reason { margin: 0 0 6px; font-size: 15px; }
.tonight-meta { margin: 0 0 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.tonight-both { margin: 0 0 6px; font-weight: 800; }
.tonight-both span { font-size: 22px; margin-right: 4px; }
.tonight-off { margin: 8px 0 12px; font-weight: 700; }
.tonight-actions { display: grid; gap: 8px; margin-top: 12px; }
.tonight-actions .primary-button { min-height: 56px; font-size: 18px; }
.swap-link { justify-self: center; font-size: 15px; }
.next-meals { margin: 18px 0; }
.next-card { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; margin-bottom: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.next-card .dish-tile { aspect-ratio: 4 / 3; border-radius: 12px; }
.next-card span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.next-card strong { font-size: 16px; overflow-wrap: anywhere; }
.next-card small { color: var(--muted); font-size: 12px; }
.next-card b { color: var(--muted); font-size: 20px; }
.next-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }

/* ----- Plan (mockup: N日分、いい感じ。) ----- */
.plan-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 4px 2px 12px; }
.plan-top h2 { font-size: 28px; line-height: 1.3; margin: 0; }
.plan-tools { display: flex; align-items: center; gap: 8px; }
.round-icon { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.round-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.plan-trial { margin: 0 2px 10px; }
.plan-list { display: grid; gap: 12px; padding: 0; background: none; border: 0; box-shadow: none; }
.plan-list .plan-card { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 8px 22px rgba(90, 60, 30, 0.07); }
.plan-list .plan-card.is-swapping { border-color: var(--tomato); }
.plan-photo { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; min-height: 100%; }
.plan-photo .dish-tile { width: 100%; height: 100%; min-height: 150px; aspect-ratio: auto; border-radius: 0; }
.today-badge { position: absolute; left: 10px; top: 10px; padding: 4px 12px; border-radius: 999px; background: var(--tomato); color: #fff; font-weight: 900; font-size: 13px; }
.plan-body { display: grid; align-content: start; gap: 2px; padding: 12px 12px 10px; min-width: 0; }
.plan-date { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.plan-title { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 18px; font-weight: 900; line-height: 1.3; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.plan-time { margin: 2px 0 0; font-weight: 800; font-size: 14px; }
.plan-note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.plan-controls { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 6px; }
.plan-swap { display: grid; justify-items: center; gap: 0; min-width: 64px; min-height: 52px; padding: 4px 8px; border-radius: 14px; color: var(--tomato); }
.plan-swap span:first-child { font-size: 18px; line-height: 1; }
.plan-swap .plan-icon-label { font-size: 11px; color: var(--ink); }
.plan-list .plan-card > .notice { grid-column: 1 / -1; margin: 0 12px 12px; }
.plan-hint { text-align: center; color: var(--muted); margin: 6px 0 0; }
.plan-list > .primary-button { width: 100%; min-height: 56px; font-size: 17px; }
.plan-list .swap-panel { margin: -6px 0 4px 12px; }
@media (max-width: 360px) { .plan-list .plan-card { grid-template-columns: 40% minmax(0, 1fr); } .plan-title { font-size: 16px; } .plan-top h2 { font-size: 24px; } }
.nobr { white-space: nowrap; }
.plan-top h2 { flex: 0 1 auto; min-width: 0; }
.plan-tools { flex: 0 0 auto; }

/* ----- Recipes (mockup: おいしい、を集めよう。) ----- */
.coll-top, .shop-top, .refl-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 4px 2px 14px; }
.coll-top h2, .shop-top h2, .refl-top h2 { font-size: 28px; line-height: 1.3; margin: 0; min-width: 0; }
.round-add { flex: 0 0 auto; background: var(--tomato); border-color: var(--tomato); }
.round-add svg { stroke: #fff; stroke-width: 2.4; }
.search-pill { display: flex; align-items: center; gap: 8px; padding: 0 16px; min-height: 50px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); }
.search-pill svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search-pill input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.search-pill:focus-within { border-color: var(--tomato); }
.chip-tabs { display: flex; gap: 8px; margin: 12px 0 14px; overflow-x: auto; }
.chip-tab { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.chip-tab small { color: var(--muted); font-weight: 700; }
.chip-tab[aria-pressed="true"] { background: var(--tomato); border-color: var(--tomato); color: #fff; }
.chip-tab[aria-pressed="true"] small { color: #fff; }
.recipe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.recipe-grid > p { grid-column: 1 / -1; }
.recipe-tile { position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
.tile-photo { position: relative; display: block; padding: 0; border: 0; background: none; border-radius: 16px; overflow: hidden; cursor: pointer; }
span.tile-photo { cursor: default; }
.tile-photo .dish-tile { aspect-ratio: 1 / 1; border-radius: 16px; }
.tile-time { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 253, 248, .92); font-size: 12px; font-weight: 800; color: var(--ink); }
.tile-mark { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255, 253, 248, .92); cursor: pointer; }
.tile-mark svg { width: 20px; height: 20px; fill: none; stroke: var(--tomato); stroke-width: 2; stroke-linejoin: round; }
.tile-mark.is-saved { cursor: default; }
.tile-mark.is-saved svg { fill: var(--tomato); }
.tile-title { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 28px; }
.tile-foot small { font-size: 12px; }
.tile-more > summary { min-height: 32px; }
.tile-more[open] > div { top: 32px; min-width: 170px; }
.add-card { margin-top: 22px; padding: 16px; border: 2px dashed var(--line); border-radius: 20px; text-align: center; display: grid; gap: 8px; }
.add-card .hand { margin: 0; color: var(--muted); }

/* ----- Shopping (mockup: 買ったら、ポン。) ----- */
.shop-top .hand { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.shop-tools { display: flex; gap: 6px; flex: 0 0 auto; }
.shop-tools .secondary-button { min-height: 40px; padding: 0 12px; font-size: 13px; }
.shop-progress { margin: 0 0 14px; }
.shop-progress p { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-weight: 800; font-size: 18px; }
.shop-progress p small { color: var(--muted); font-size: 13px; }
.shop-bar { display: block; height: 12px; border-radius: 999px; background: var(--surface-soft, #f6ecdf); overflow: hidden; }
.shop-bar i { display: block; height: 100%; border-radius: inherit; background: var(--tomato); transition: width .3s ease; }
.aisle-card { margin-bottom: 12px; padding: 6px 16px 4px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.aisle-card h4 { margin: 10px 0 2px; font-size: 15px; }
.aisle-card h4 small { color: var(--muted); }
.aisle-card .daily-shopping-row:last-child { border-bottom: 0; }
.daily-shopping-check input { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #e6d3bf; background: var(--surface); display: grid; place-items: center; margin: 0; cursor: pointer; }
.daily-shopping-check input:checked { background: var(--tomato); border-color: var(--tomato); }
.daily-shopping-check input:checked::after { content: ""; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
.daily-shopping-check input:focus-visible { outline: 3px solid var(--marker); outline-offset: 2px; }
.shopping-inline { min-height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.shop-add { margin: 14px 0; padding: 14px 16px; border: 2px dashed #e6d3bf; border-radius: 20px; }
.shop-add h3 { margin: 0 0 10px; font-size: 16px; color: var(--tomato); }
.shopping-fold { margin-bottom: 12px; padding: 4px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.shopping-fold > summary { cursor: pointer; padding: 10px 0; }
.shopping-fold > summary h3 { display: inline; margin: 0; font-size: 16px; }
.shopping-fold > summary small { display: block; }

/* ----- Reflection (mockup: 今月も、おいしかった。) ----- */
.refl-top { flex-wrap: wrap; }
.month-nav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.month-nav .round-icon { width: 40px; height: 40px; font-size: 20px; font-weight: 800; color: var(--ink); }
.month-nav .round-icon:disabled { opacity: .35; cursor: default; }
.month-nav strong { font-size: 15px; white-space: nowrap; }
.insight-card { margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.insight-card h3 { margin: 0 0 6px; font-size: 15px; display: flex; align-items: center; gap: 4px; }
.insight-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.insight-card p { margin: 0; font-size: 13px; }
/* 🏆 わが家の定番 PR 6a */
.staple-card { margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.staple-card h3 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 4px; }
.staple-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.staple-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.staple-list b { display: block; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.staple-list small { color: var(--muted); font-size: 12px; }
.staple-list .secondary-button { min-height: 36px; padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.staple-photo { width: 48px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; }
/* 記録からの提案（方針に入れる？）PR 6b */
.evidence-card { margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; background: #fff7ea; border: 1px dashed #f0c98f; }
.evidence-card p { margin: 0 0 4px; line-height: 1.6; }
.evidence-card small { color: var(--muted); }
.evidence-ask { font-size: 14px; }
.evidence-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.evidence-reflect .evidence-card { margin-top: 0; }
.today-evidence .evidence-card { margin: 0; }
.refl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.refl-stats p { margin: 0; padding: 12px 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.refl-stats strong { display: block; font-size: 24px; color: var(--tomato); }
.refl-stats small { color: var(--muted); font-size: 12px; font-weight: 700; }
.fav-card { margin-bottom: 18px; padding: 16px; border-radius: 22px; background: #fff1dc; border: 1px solid #f6dcb8; }
.fav-card .eyebrow { margin: 0 0 10px; font-weight: 800; color: var(--tomato); }
.fav-body { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 14px; align-items: center; }
.fav-photo { aspect-ratio: 1 / 1; }
.fav-body h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.4; }
.fav-body .hand { margin: 0; }
.table-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.table-head h3 { margin: 0; font-size: 18px; }
.table-head .secondary-button { min-height: 36px; padding: 0 12px; font-size: 13px; }
.table-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.table-tile { position: relative; display: grid; gap: 4px; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; min-width: 0; }
.table-tile .dish-tile { aspect-ratio: 1 / 1; border-radius: 14px; }
.table-tile .dish-art-tile small { display: none; }
.table-tile > small { font-size: 11px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.day-num { position: absolute; top: 6px; left: 6px; min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 253, 248, .94); font-size: 13px; font-weight: 800; }
.tile-love { position: absolute; top: 4px; right: 6px; font-size: 16px; }
@media (max-width: 360px) { .coll-top h2, .shop-top h2, .refl-top h2 { font-size: 24px; } .recipe-grid { gap: 14px 10px; } }
.shop-top { align-items: flex-start; }
.shop-top > div { min-width: 0; }
.add-card + .backup-card, .add-card + section { margin-top: 16px; }
.tonight-label { color: var(--ink); }
.shop-bar { background: #f1e2cf; }
.dish-fallback { position: relative; background-size: cover; background-position: center; }
.dish-fallback small { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 253, 248, .9); color: var(--muted); font-size: 10px; font-weight: 700; }
.tile-photo .dish-fallback small { bottom: auto; top: 8px; right: auto; left: 8px; }

/* ----- 次に食べたい頃（周期の選択） ----- */
.rate-card { display: grid; gap: 10px; }
.rate-card h3 { margin: 0; font-size: 18px; line-height: 1.45; }
.rate-note { margin: 0; color: var(--tomato); font-size: 18px; }
.cycle-row { display: grid; gap: 6px; margin: 4px 0 6px; }
.rate-name { font-weight: 800; font-size: 15px; display: flex; align-items: baseline; gap: 8px; }
.rate-name small { color: var(--tomato); font-size: 13px; }
.cycle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cycle-chip { min-height: 52px; padding: 6px 4px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; display: grid; place-content: center; gap: 1px; text-align: center; }
.cycle-chip strong { font-size: 14px; line-height: 1.25; }
.cycle-chip small { font-size: 11px; color: var(--muted); }
.cycle-chip[aria-pressed="true"] { background: var(--tomato); border-color: var(--tomato); color: #fff; }
.cycle-chip[aria-pressed="true"] small { color: #fff; }
.cycle-chip.cycle-never { grid-column: 1 / -1; min-height: 40px; background: transparent; border-style: dashed; }
.cycle-chip.cycle-never[aria-pressed="true"] { background: #8b7d6b; border-color: #8b7d6b; }

/* ----- リクエスト ----- */
.request-card { margin: 0 0 16px; padding: 14px 16px; border-radius: 20px; background: #fff1dc; border: 1px solid #f6dcb8; display: grid; gap: 10px; }
.request-card h3 { margin: 0; font-size: 16px; }
.request-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.request-thumb { aspect-ratio: 1 / 1; border-radius: 12px; }
.request-row strong { display: block; font-size: 15px; line-height: 1.35; }
.request-row small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.request-from { margin: 0; font-size: 12px; font-weight: 800; color: var(--tomato); }
.request-row .text-button { font-size: 13px; white-space: nowrap; }
.tile-request { justify-self: start; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--tomato); background: var(--surface); color: var(--tomato); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.tile-request[aria-pressed="true"] { background: var(--tomato); color: #fff; }

/* ----- ふたりで使う ----- */
.share-panel { display: grid; gap: 10px; }
.share-panel h3, .share-panel p { margin: 0; }
.share-names { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-names label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.share-link summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.share-link input { margin-top: 6px; font-size: 12px; }
.share-invite { margin-top: 18px; padding: 16px; border: 2px dashed #e6d3bf; border-radius: 20px; text-align: center; display: grid; gap: 6px; }
.share-invite p { margin: 0; }
.share-invite .hand { color: var(--muted); }
.legacy-sync summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.join-card { display: grid; gap: 12px; margin-top: 12px; }
.join-card h2 { margin: 0; font-size: 26px; line-height: 1.4; }
.join-card p { margin: 0; }
.join-card .field { display: grid; gap: 6px; font-weight: 700; }

/* ----- 記録の編集 ----- */
.record-editor { display: grid; gap: 12px; }
.record-head { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 14px; align-items: center; }
.record-photo { aspect-ratio: 1 / 1; }
.record-head h2 { margin: 2px 0; font-size: 20px; line-height: 1.4; }
.record-head .eyebrow { margin: 0; font-weight: 800; color: var(--tomato); font-size: 13px; }
/* 記録の事実（作った回数・人数・元の動画・もう一度）PR 6a */
.record-facts { margin: 12px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.record-facts p { margin: 0 0 6px; line-height: 1.6; }
.record-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.record-links .text-button { padding-left: 0; }
.record-field { display: grid; gap: 6px; font-weight: 700; }
.record-h { margin: 6px 0 0; font-size: 17px; }
.record-editor > .muted { margin: -6px 0 0; }
.record-photo-actions { display: flex; align-items: center; gap: 10px; }
.record-photo-actions .secondary-button { cursor: pointer; }
.text-button.danger { color: #b3261e; }

/* ----- 見るだけモード ----- */
.viewer-note { margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.viewer-banner { margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; background: var(--tomato); color: #fff; display: grid; gap: 4px; }
.viewer-banner small { opacity: .9; }
.viewer-banner.is-done { background: #fff1dc; color: var(--ink); border: 1px solid #f6dcb8; }
.swap-request { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 10px 12px; border-radius: 14px; background: #fff1dc; font-size: 14px; }
.swap-request span { flex: 1 1 100%; }
.swap-request .primary-button { min-height: 40px; padding: 0 16px; font-size: 14px; }
.ask-button { margin-bottom: 10px; }
.role-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.role-toggle span { display: grid; gap: 2px; font-weight: 800; }
.role-toggle small { font-weight: 500; color: var(--muted); }
.role-toggle i { flex: 0 0 auto; width: 46px; height: 28px; border-radius: 999px; background: #e6d3bf; position: relative; transition: background .2s; }
.role-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .2s; }
.role-toggle[aria-pressed="true"] i { background: var(--tomato); }
.role-toggle[aria-pressed="true"] i::after { left: 21px; }

/* ----- 閲覧者（シンプル画面） ----- */
.is-viewer .tab[data-view="repeat"] { display: none; }
.viewer-setup { display: grid; gap: 14px; padding-top: 8px; }
.viewer-setup h2 { margin: 0; font-size: 28px; line-height: 1.35; }
.viewer-setup p { margin: 0; }
.viewer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.viewer-likes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.viewer-like { position: relative; display: grid; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.viewer-like .dish-tile { aspect-ratio: 1 / 1; border-radius: 14px; border: 3px solid transparent; }
.viewer-like span { font-size: 11px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.viewer-like[aria-pressed="true"] .dish-tile { border-color: var(--tomato); }
.viewer-like[aria-pressed="true"]::after { content: "♥"; position: absolute; top: 6px; right: 8px; color: var(--tomato); font-size: 20px; text-shadow: 0 0 4px #fff; }
.viewer-today { display: grid; gap: 8px; text-align: center; margin-top: 4px; }
.viewer-today .hand { margin: 0; font-size: 18px; color: var(--muted); }
.viewer-photo { aspect-ratio: 1 / 1; border-radius: 28px; }
.viewer-title { margin: 4px 0 0; font-size: 26px; line-height: 1.35; }
.viewer-next { margin: 0; color: var(--muted); }
.viewer-actions { display: grid; gap: 10px; margin-top: 18px; }
.viewer-sent { margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.viewer-plan-top h2 { margin: 4px 2px 14px; font-size: 26px; line-height: 1.35; }
.viewer-days { display: grid; gap: 10px; }
.viewer-day { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.viewer-day .dish-tile { aspect-ratio: 1 / 1; border-radius: 12px; }
.viewer-day b { display: block; font-size: 12px; color: var(--tomato); }
.viewer-day strong { display: block; font-size: 16px; line-height: 1.35; }
.viewer-day small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.viewer-day.is-off { grid-template-columns: 1fr auto; padding: 14px 16px; color: var(--muted); }
/* 役割 */
.role-settings { display: grid; gap: 8px; margin: 4px 0; }
.role-settings h4 { margin: 4px 0 0; font-size: 15px; }
.role-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.role-seg { display: flex; }
.role-seg .choice-button { min-height: 38px; padding: 0 14px; font-size: 13px; }
.role-badge { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--surface-soft); }
.role-badge.role-owner { background: var(--tomato); color: #fff; }
.role-help summary { cursor: pointer; font-weight: 700; color: var(--tomato); font-size: 14px; }
.role-help table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.role-help th, .role-help td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: center; }
.role-help td:first-child { text-align: left; }
.role-help td.ok { color: var(--tomato); font-weight: 800; }
.role-help td.ng { color: #b9ab99; }

/* ----- 最近のごはんカレンダー ----- */
.meal-cal { margin: 0 0 16px; padding: 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.meal-cal .section-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 16px; }
.meal-cal .section-title small { color: var(--muted); font-size: 12px; font-weight: 700; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head span { text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); }
.cal-head span:first-child { color: #d4533a; }
.cal-cell { position: relative; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 10px; background: var(--surface-soft); overflow: hidden; cursor: pointer; font: inherit; }
.cal-cell .dish-tile { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.cal-cell .dish-fallback small { display: none; }
.cal-cell > span { position: absolute; left: 3px; top: 2px; padding: 0 4px; border-radius: 6px; background: rgba(255, 253, 248, .88); font-size: 10px; font-weight: 800; color: var(--ink); line-height: 1.5; }
.cal-cell.is-empty { cursor: default; }
.cal-cell.is-empty > span { background: none; color: #b9ab99; }
.cal-cell.is-today { outline: 2.5px solid var(--tomato); outline-offset: -2.5px; }
.cal-cell.is-future { opacity: .55; outline: 1.5px dashed #d8c4ad; outline-offset: -1.5px; }
.cal-cell.is-picked { outline: 3px solid var(--marker); outline-offset: -3px; opacity: 1; }
/* 条件に合う料理が少ない時の知らせ PR 4a */
.plan-short { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; background: #fff7ea; border: 1px dashed #f0c98f; }
/* ふりかえりの記録のカレンダー PR 6c */
.record-cal { margin: 0 0 6px; }
.record-cal .cal-head { margin-bottom: 4px; text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); }
.cal-cell.is-blank { background: none; cursor: default; }
.cal-cell.is-later > span { color: #d5c8b8; }
.cal-more { position: absolute; right: 3px; bottom: 3px; padding: 0 5px; border-radius: 8px; background: var(--tomato); color: #fff; font-size: 10px; line-height: 1.6; }
.view-switch { display: flex; gap: 4px; }
.view-switch .chip-button { min-height: 36px; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.view-switch .chip-button[aria-pressed="true"] { border-color: var(--tomato); background: #fff1ec; color: var(--sage-dark); }
.cal-caption { margin: 8px 2px 0; font-size: 13px; color: var(--muted); min-height: 1.5em; }
.cal-caption b { color: var(--ink); }

/* ----- 買い物ラウンド ----- */
.round-card { margin: 0 0 14px; padding: 14px 16px; border-radius: 20px; background: #fff1dc; border: 1px solid #f6dcb8; display: grid; gap: 8px; }
.round-card h3, .round-card p { margin: 0; }
.round-card.is-open { background: var(--surface); border: 2px solid var(--tomato); }
.round-card.is-closed { background: #fdeee8; }
.round-form { display: grid; gap: 8px; }
.round-form label { display: grid; gap: 4px; font-weight: 700; font-size: 13px; }
.round-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.round-actions .secondary-button, .round-actions .primary-button { min-height: 42px; padding: 0 16px; font-size: 14px; }
.copy-mini { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.round-done { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border-radius: 18px; border: 1.5px dashed #e6d3bf; }
.round-done p { margin: 0; font-weight: 800; }
.round-done.is-ready { border: 2px solid var(--tomato); background: #fff1dc; }
.round-done .secondary-button, .round-done .primary-button { min-height: 42px; padding: 0 16px; }
.request-card.is-quiet { background: var(--surface); border-color: var(--line); padding: 10px 16px; }
.request-log summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); }
.request-log ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 12px; }
.request-log li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.request-log li span { color: var(--muted); }
.request-log li em { margin-left: auto; font-style: normal; color: var(--tomato); font-weight: 700; }
.round-done p { flex: 1; min-width: 0; }
.round-done .secondary-button, .round-done .primary-button { flex: 0 0 auto; white-space: nowrap; }

/* ----- 共通タイムライン ----- */
.flow { margin: 0 0 14px; padding: 10px 12px 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.flow-steps { list-style: none; margin: 0; padding: 0; display: flex; }
.flow-steps li { flex: 1; position: relative; display: grid; justify-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: #b9ab99; }
.flow-steps li::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 3px; background: #efe4d6; z-index: 0; }
.flow-steps li:first-child::before { display: none; }
.flow-steps li.is-done::before, .flow-steps li.is-now::before { background: var(--tomato); }
.flow-steps i { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: #efe4d6; color: #fff; }
.flow-steps li.is-done { color: var(--muted); }
.flow-steps li.is-done i { background: var(--tomato); }
.flow-steps li.is-now { color: var(--tomato); }
.flow-steps li.is-now i { background: var(--tomato); box-shadow: 0 0 0 4px #fde3da; }
.flow-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin: 8px 2px 0; font-size: 13px; color: var(--ink); }
.flow-hint b { color: var(--tomato); }
.flow-go { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 800; color: var(--tomato); cursor: pointer; white-space: nowrap; }

/* ----- 週のボード（献立のリズム） ----- */
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 14px 4px 8px; font-size: 16px; }
.block-head small { font-size: 12px; font-weight: 800; color: var(--muted); }
.block-head.is-open small { color: var(--tomato); }
.block-foot { margin: 4px 0 8px; }
.block-foot .primary-button { width: 100%; }
.rhythm-options { display: grid; gap: 8px; }
.rhythm-option { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.rhythm-option small { color: var(--muted); }
.rhythm-option[aria-pressed="true"] { border-color: var(--tomato); background: #fff1dc; }
.rhythm-time { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: 700; }
.rhythm-invite { margin: 0 0 14px; padding: 14px 16px; border-radius: 20px; border: 2px dashed #e6d3bf; display: grid; gap: 8px; }
.rhythm-invite p { margin: 0; }
.rhythm-invite small { color: var(--muted); }

/* ----- タグで絞り込み（3タップ） ----- */
.facets { display: grid; gap: 6px; margin: 10px 0 14px; }
.facet-row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: center; gap: 6px; }
.facet-label { font-size: 11px; font-weight: 800; color: var(--muted); line-height: 1.3; }
.facet-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
.facet-chips::-webkit-scrollbar { display: none; }
.facet-chip { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 1; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.facet-chip small { font-size: 10px; color: var(--muted); }
.facet-chip[aria-pressed="true"] { background: var(--tomato); border-color: var(--tomato); color: #fff; }
.facet-chip[aria-pressed="true"] small { color: #fff; }
.facet-result { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 0; font-size: 13px; }
.facet-result b { color: var(--tomato); }
.facet-result .text-button { font-size: 13px; min-height: 0; padding: 0; }

/* 売り場の直し */
.daily-shopping-row.is-fixing { flex-wrap: wrap; }
.aisle-select { order: 3; flex: 1 1 100%; min-height: 38px; margin: 0 0 4px 40px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--tomato); background: var(--surface); font: inherit; font-size: 13px; color: var(--ink); }

/* この買い物で作るごはん */
.trip-meals { margin: 0 0 12px; padding: 10px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.trip-range { margin: 0 0 8px; font-size: 13px; }
.trip-range b { color: var(--tomato); }
.trip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.trip-row::-webkit-scrollbar { display: none; }
.trip-meal { position: relative; flex: 0 0 72px; display: grid; gap: 3px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.trip-meal .dish-tile { width: 72px; height: 72px; aspect-ratio: 1 / 1; border-radius: 12px; }
.trip-meal .dish-fallback small { display: none; }
.trip-meal > small { position: absolute; top: 4px; left: 4px; padding: 0 5px; border-radius: 6px; background: rgba(255, 253, 248, .9); font-size: 10px; font-weight: 800; }
.trip-meal > span { font-size: 10px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.shop-uses { font-style: normal; color: var(--muted); font-size: 11px; }

/* ----- レシピの詳細 ----- */
.recipe-detail { display: grid; gap: 10px; }
.detail-photo { aspect-ratio: 4 / 3; border-radius: 24px; }
.detail-title { margin: 4px 0 0; font-size: 24px; line-height: 1.4; }
.detail-meta, .detail-history { margin: 0; font-size: 13px; color: var(--muted); }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.detail-actions .secondary-button, .detail-actions .link-button { min-height: 40px; padding: 0 14px; font-size: 14px; }
.detail-h { margin: 12px 0 0; font-size: 17px; display: flex; align-items: baseline; gap: 8px; }
.detail-h small { font-size: 12px; color: var(--muted); }
.detail-ingredients { list-style: none; margin: 0; padding: 4px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.detail-ingredients li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.detail-ingredients li:last-child { border-bottom: 0; }
.detail-ingredients li span:last-child { color: var(--muted); white-space: nowrap; }
.detail-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; font-size: 15px; line-height: 1.7; }
.detail-note { margin: 4px 0 0; padding: 10px 14px; border-radius: 14px; background: #fff1dc; font-size: 14px; }
.detail-foot { display: grid; gap: 8px; margin-top: 12px; }
button.tile-title { padding: 0; border: 0; background: none; font: inherit; font-weight: 800; color: var(--ink); text-align: left; cursor: pointer; }
.starter-hint { margin: 0 0 12px; padding: 14px 16px; border-radius: 18px; border: 2px dashed #e6d3bf; display: grid; gap: 8px; }
.starter-hint p { margin: 0; }
.starter-hint small { color: var(--muted); }
.starter-settings { display: grid; gap: 10px; }
.starter-settings h3 { margin: 0; }

/* ----- 今日タブ（今夜の一品 → 今日やること → 明日） ----- */
.today-date { margin: 2px 4px 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.today-todos { margin: 16px 0 0; display: grid; gap: 8px; }
.today-todos .section-title { margin: 0 2px 2px; font-size: 16px; }
.todo-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.todo-row > span { font-size: 18px; }
.todo-row p { margin: 0; font-size: 14px; line-height: 1.45; }
.todo-row .secondary-button, .todo-row .primary-button { min-height: 38px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
.todo-row.is-urgent { border: 2px solid var(--tomato); }
.tomorrow-line { display: flex; align-items: center; gap: 8px; width: 100%; margin: 16px 0 0; padding: 12px 16px; border-radius: 16px; border: 1.5px dashed #e6d3bf; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.tomorrow-line span { font-size: 13px; color: var(--muted); font-weight: 700; }
.tomorrow-line b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tomorrow-line i { font-style: normal; color: var(--tomato); font-weight: 800; }
.detail-skill { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin: 0; padding: 8px 12px; border-radius: 14px; background: #fff1dc; font-size: 14px; }
.skill-stars { color: var(--tomato); letter-spacing: 1px; font-size: 15px; }
.detail-skill small { flex-basis: 100%; color: var(--muted); font-size: 12px; }

/* ----- 料理スキル診断 ----- */
.skill-quiz { display: grid; gap: 12px; padding-top: 6px; text-align: center; }
.skill-quiz h2 { margin: 0; font-size: 26px; line-height: 1.4; }
.quiz-progress { margin: 0; font-size: 13px; font-weight: 800; color: var(--muted); }
.quiz-progress b { color: var(--tomato); }
.quiz-bar { height: 6px; border-radius: 999px; background: #efe4d6; overflow: hidden; }
.quiz-bar i { display: block; height: 100%; background: var(--tomato); }
.quiz-photo { aspect-ratio: 4 / 3; border-radius: 24px; }
.quiz-how { margin: -4px 0 0; color: var(--muted); }
.quiz-answers { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.quiz-answers button { min-height: 52px; padding: 0 8px; }
.quiz-growth { display: grid; gap: 10px; text-align: left; }
.quiz-stars { margin: 4px 0 0; font-size: 34px; color: var(--tomato); letter-spacing: 4px; }
.skill-quiz.is-result h2 { font-size: 30px; }
.skill-quiz.is-result p { margin: 0; }
.quiz-style { padding: 12px 14px; border-radius: 16px; background: #fff1dc; text-align: left; font-size: 14px; }
.quiz-actions { display: grid; gap: 8px; }
.skill-settings { display: grid; gap: 10px; }
.skill-settings h3, .skill-settings p { margin: 0; }

/* ----- 初回の5問とお披露目 ----- */
.skill-picks { display: grid; gap: 8px; }
.skill-picks .rhythm-option strong { display: flex; align-items: baseline; gap: 6px; }
.quick-sub { margin: 14px 0 6px; font-size: 15px; }
.first-reveal { margin: 0 0 16px; padding: 18px 16px; border-radius: 24px; background: #fff1dc; border: 2px solid #f6dcb8; text-align: center; display: grid; gap: 8px; }
.first-reveal h2 { margin: 0; font-size: 26px; line-height: 1.35; }
.first-reveal p { margin: 0; }
.first-reveal-emoji { font-size: 36px; }
.first-invite { margin-top: 6px; padding: 12px; border-radius: 16px; background: var(--surface); display: grid; gap: 8px; text-align: left; }
.first-invite small { color: var(--muted); }

/* ----- ごはんの好み診断：結果 ----- */
.persona-card { display: grid; gap: 10px; text-align: center; }
.persona-kicker { margin: 0; font-weight: 800; color: var(--muted); }
.persona-card .persona-portrait { width: 180px; height: 180px; margin: 0 auto; }
.persona-name { margin: 0; font-size: 30px; color: var(--tomato); }
.persona-catch { margin: 0; font-size: 16px; font-weight: 700; }
.persona-features { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.persona-features li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 999px; background: #fff1dc; font-weight: 800; font-size: 15px; }
.persona-features li span { font-size: 22px; }
.persona-card .persona-operation { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: left; display: grid; gap: 4px; font-size: 14px; }
.persona-card .persona-operation b { color: var(--tomato); font-size: 13px; }
.persona-likes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.persona-likes figure { margin: 0; display: grid; gap: 4px; }
.persona-likes img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; }
.persona-likes figcaption { font-size: 11px; line-height: 1.3; }
.persona-card .persona-conversation { margin: 0; font-size: 14px; color: var(--muted); }

/* ----- 設定：一覧（開くのは1つずつ） ----- */
.settings-list { display: grid; gap: 8px; }
.setting-row { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.setting-row > summary { list-style: none; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; }
.setting-row > summary::-webkit-details-marker { display: none; }
.setting-icon { font-size: 20px; }
.setting-text { display: grid; gap: 2px; min-width: 0; }
.setting-text b { font-size: 15px; }
.setting-text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setting-row > summary i { font-style: normal; color: var(--muted); font-weight: 800; transition: transform .15s; }
.setting-row[open] > summary i { transform: rotate(90deg); }
.setting-row[open] { border-color: var(--tomato); }
.setting-body { padding: 0 16px 16px; display: grid; gap: 10px; }
.setting-body > .panel, .setting-body > details.panel { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.setting-body > .panel > h3:first-child, .setting-body > .panel > .section-head:first-child h3 { display: none; }
/* ===== 2026-09-26 compact shopping list + auto-hiding bars ===== */
.topbar, .bottom-tabs { transition: transform .22s ease; }
body.bars-hidden .topbar { transform: translateY(-110%); }
body.bars-hidden .bottom-tabs { transform: translate(-50%, 110%); }
body.bars-hidden .playlist-footer, body.bars-hidden .cooking-primary { bottom: env(safe-area-inset-bottom); }
.shop-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.shop-head .trip-meals { flex: 1; min-width: 0; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.shop-head .trip-range { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.shop-head .trip-row { display: flex; gap: 4px; overflow-x: auto; }
.shop-head .trip-meal { position: relative; flex: 0 0 auto; width: 36px; min-height: 0; padding: 0; border: 0; background: none; }
.shop-head .trip-meal .dish-tile { width: 36px; height: 36px; border-radius: 10px; }
.shop-head .trip-meal .dish-tile small { display: none; }
.shop-head .trip-meal > small { position: absolute; top: auto; left: auto; right: -3px; bottom: -3px; font-size: 9px; line-height: 1; padding: 2px 3px; border-radius: 6px; background: var(--surface); }
.shop-head .shop-progress { flex: 0 0 auto; display: grid; justify-items: end; gap: 3px; margin: 0; padding: 0; background: none; border: 0; font-size: 12px; }
.shop-head .shop-progress strong { font-size: 18px; color: var(--tomato); margin-left: 2px; }
.shop-head .shop-bar { width: 64px; height: 5px; }
.shop-head .shop-progress small { font-size: 10px; color: var(--muted); }
.shop-menu { position: relative; flex: 0 0 auto; }
.shop-menu > summary { list-style: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); font-weight: 900; cursor: pointer; }
.shop-menu > summary::-webkit-details-marker { display: none; }
.shop-menu-list { position: absolute; right: 0; top: 42px; z-index: 5; display: grid; gap: 6px; width: 190px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(60, 30, 10, .15); }
.shop-menu-list button { width: 100%; min-height: 40px; font-size: 13px; }
.aisle-group { display: grid; grid-template-columns: 22px 1fr; border-top: 1px solid var(--line); }
.aisle-group:first-child { border-top: 0; }
.aisle-tag { margin: 0; writing-mode: vertical-rl; text-orientation: upright; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: 0; line-height: 1.05; padding: 2px 0; background: var(--surface-soft, #fff4e8); color: var(--muted); overflow: hidden; white-space: nowrap; }
.aisle-items { min-width: 0; }
.aisle-items .daily-shopping-row { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 6px; margin: 0; border: 0; border-top: 1px dashed var(--line); border-radius: 0; background: none; box-shadow: none; }
.aisle-items .daily-shopping-row:first-child { border-top: 0; }
.aisle-items .daily-shopping-check { flex: 1; min-width: 0; min-height: 38px; display: flex; align-items: center; gap: 8px; }
.aisle-items .daily-shopping-check input { width: 24px; height: 24px; }
.aisle-items .daily-shopping-check input:checked::after { width: 10px; height: 6px; }
.shop-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.shop-line strong { flex: 0 1 auto; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-line small { flex: 0 10 auto; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.use-icons { flex: 0 0 auto; display: flex; }
.use-icon { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--surface); margin-left: -6px; background: #f3e6d6; }
.use-icon:first-child { margin-left: 0; }
.use-letter { display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--muted); }
.aisle-items .shopping-inline { flex: 0 0 auto; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 50%; font-size: 13px; opacity: .75; }
.shopping-fold .aisle-group { border: 0; margin-top: 4px; }
.shop-add { margin: 10px 0 0; }
.shop-add > summary { cursor: pointer; font-weight: 700; color: var(--tomato); padding: 8px 2px; }
.shop-done-sheet { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 6; width: min(calc(100% - 24px), 406px); transform: translateX(-50%); padding: 14px; border-radius: 20px; background: var(--surface); border: 2px solid var(--tomato); box-shadow: 0 12px 36px rgba(60, 30, 10, .22); animation: sheetUp .25s ease; }
body.bars-hidden .shop-done-sheet { bottom: calc(12px + env(safe-area-inset-bottom)); }
.shop-done-sheet p { margin: 0 0 10px; font-size: 15px; }
.shop-done-sheet p b { display: block; font-size: 18px; color: var(--tomato); }
.shop-done-sheet div { display: flex; gap: 8px; align-items: center; }
.shop-done-sheet .primary-button { flex: 1; }
@keyframes sheetUp { from { transform: translate(-50%, 30px); opacity: 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pantry-head { display: flex; align-items: center; gap: 8px; }
.pantry-head h2 { margin: 0; font-size: 22px; }
.pantry-group { margin: 14px 0 6px; font-size: 14px; color: var(--muted); }
.pantry-add { margin-top: 14px; }
.pantry-page .pantry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pantry-page .equipment-choice { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 4px; min-height: 48px; padding: 6px 8px; text-align: left; }
.pantry-page .equipment-choice .choice-emoji { grid-row: 1 / 3; font-size: 15px; margin: 0; }
.pantry-page .equipment-choice > span:not(.choice-emoji) { font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; }
.pantry-page .equipment-choice strong { font-size: 10px; line-height: 1.1; }
/* ===== 2026-09-26 app bar: compact header, page name instead of 2-line headings ===== */
.topbar { align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px 6px 16px; }
.brand-block { flex: 1; min-width: 0; }
.app-logo { font-size: 22px; line-height: 1.2; }
.app-tagline { display: none; }
.page-title { display: none; margin: 0; font-size: 19px; font-weight: 900; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.has-page-title .app-logo { display: none; }
body.has-page-title .page-title { display: block; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.topbar-actions:empty { display: none; }
.topbar-actions .round-icon, .profile-button { width: 38px; height: 38px; min-height: 38px; }
.topbar-actions .round-icon svg, .profile-button svg { width: 20px; height: 20px; }
.topbar-actions .segmented .choice-button { min-height: 34px; padding: 4px 10px; font-size: 13px; }
.plan-top, .coll-top { margin: 0; }
.plan-top:not(:has(*)) { display: none; }
.page-hint { margin: 0 2px 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.refl-top { justify-content: center; margin: 0 0 8px; }
.today-date { margin: 0 4px 8px; }
.screen { padding-top: 6px; }
/* Plan: one row per meal (photo thumb + text + swap), not a half-screen card. */
.plan-list { gap: 8px; }
.plan-list .plan-card { grid-template-columns: 92px minmax(0, 1fr); border-radius: 16px; box-shadow: 0 3px 10px rgba(90, 60, 30, 0.05); }
.plan-photo .dish-tile { min-height: 92px; }
.today-badge { left: 6px; top: 6px; padding: 2px 8px; font-size: 11px; }
.plan-body { position: relative; gap: 0; padding: 8px 10px 8px 12px; }
.plan-date { font-size: 11px; }
.plan-title { font-size: 16px; line-height: 1.3; padding-right: 2px; }
.plan-time { margin: 2px 0 0; font-size: 12px; }
.plan-note { margin: 2px 0 0; font-size: 11px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 96px; }
.plan-controls { position: absolute; right: 6px; bottom: 4px; margin: 0; }
.plan-swap { grid-auto-flow: column; gap: 3px; min-width: 0; min-height: 34px; padding: 2px 8px; border-radius: 12px; }
.plan-swap span:first-child { font-size: 15px; }
.block-head { margin: 10px 4px 6px; font-size: 15px; }
@media (max-width: 360px) { .plan-list .plan-card { grid-template-columns: 80px minmax(0, 1fr); } .plan-title { font-size: 15px; } }
/* Recipes: smaller search, chips and tiles so more dishes show at once. */
.search-pill { min-height: 40px; padding: 0 12px; }
.search-pill input { font-size: 16px; }
.chip-tabs { gap: 6px; margin: 8px 0; }
.chip-tab { min-height: 34px; padding: 0 12px; font-size: 14px; }
.facet-chip { min-height: 32px; padding: 0 10px; }
.facet-row { gap: 4px; }
.recipe-grid { gap: 12px 10px; }
.tile-photo .dish-tile { aspect-ratio: 4 / 3; border-radius: 14px; }
.tile-mark { width: 34px; height: 34px; top: 6px; right: 6px; }
.tile-title { font-size: 14px; line-height: 1.35; }
.tile-foot { min-height: 24px; }
/* Settings rows: list density. */
.settings-list { gap: 6px; }
.setting-row { border-radius: 14px; }
.setting-row > summary { padding: 9px 12px; gap: 8px; }
/* Today: tonight's dish stays the hero, but leaves room for the to-do list below. */
.tonight-card { padding: 12px; border-radius: 18px; }
.tonight-head { align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 0 2px 8px; }
.tonight-label { margin: 0; font-size: 17px; }
/* 長い見出し（献立は◯月◯日から）の時は、日付・人数を次の行へ。言葉の途中では折り返さない。 */
.tonight-head .today-date { margin: 0; font-size: 12px; white-space: nowrap; }
.tonight-photo { aspect-ratio: 16 / 9; border-radius: 14px; }
.tonight-title { font-size: 21px; margin: 8px 0 2px; }
.tonight-reason { font-size: 13px; margin: 0 0 2px; }
.tonight-meta { margin: 0 0 2px; font-size: 12px; }
.tonight-actions { gap: 6px; margin-top: 8px; }
.tonight-actions .primary-button { min-height: 48px; font-size: 16px; }
.tonight-actions .secondary-button { min-height: 42px; }
.tonight-actions .text-button { min-height: 36px; padding: 4px; }
.today-todos { margin: 10px 0 0; gap: 6px; }
.todo-row { padding: 8px 10px; border-radius: 14px; }
.topbar-actions .month-nav { display: flex; align-items: center; gap: 4px; margin: 0; }
.topbar-actions .month-nav strong { font-size: 14px; white-space: nowrap; }
.topbar-actions .shop-menu > summary { width: 38px; height: 38px; }
.topbar-actions .shop-menu-list { top: 44px; }
/* ===== Recipe tags: one color-coded cloud, no headings, no sideways scrolling. ===== */
.facets { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px; }
.facet-row, .facets .facet-chips { display: contents; }
.facets .facet-label { display: none; }
[data-facet="home"] { --fc: #fde4ea; --fl: #c0395a; }
[data-facet="staple"] { --fc: #fff1c7; --fl: #9a6a00; }
[data-facet="main"] { --fc: #ffe3d6; --fl: #c24e21; }
[data-facet="style"] { --fc: #e3f2df; --fl: #3f7a35; }
.facets .facet-chip { min-height: 30px; padding: 0 9px; gap: 3px; font-size: 12.5px; background: var(--fc, var(--surface)); border-color: transparent; color: var(--ink); }
.facets .facet-chip small { font-size: 9.5px; color: var(--fl, var(--muted)); }
.facets .facet-chip[aria-pressed="true"] { background: var(--tomato); color: #fff; }
.facets .facet-chip[aria-pressed="true"] small { color: #fff; }
.facets .facet-author { background: var(--tomato); color: #fff; }
.facets .facet-result { flex-basis: 100%; margin: 2px 0 0; }
.facet-legend { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 2px 0; font-size: 10px; color: var(--muted); }
.facet-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 3px; border-radius: 2px; background: var(--fc); box-shadow: inset 0 0 0 1px var(--fl); vertical-align: -1px; }
/* Channel / account names. */
.src-mark { display: inline-block; margin-right: 3px; font-size: .85em; font-weight: 900; }
.src-youtube { color: #e02b20; }
.src-tiktok { color: #111; }
.src-instagram { color: #c13584; }
.src-other { color: var(--muted); }
.tile-creator { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.creator-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.creator-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 52px; padding: 6px 10px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.creator-row:first-child { border-top: 0; }
.creator-name { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-thumbs { display: flex; }
.creator-thumb { width: 34px; height: 34px; border-radius: 8px; margin-left: -8px; border: 2px solid var(--surface); }
.creator-thumbs .creator-thumb:first-child { margin-left: 0; }
.creator-row small { color: var(--muted); font-size: 12px; min-width: 2.5em; text-align: right; }
.creator-thumb small { display: none; }
.creator-thumb.dish-fallback { background-size: cover; background-position: center; }
/* Saving recipes from SNS: a small always-visible strip, a step card the first time. */
.save-strip { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.paste-button { flex: 1; min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1.5px dashed var(--tomato); background: #fff4ee; color: var(--tomato); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.save-guide-link { flex: 0 0 auto; min-height: 38px; padding: 0 4px; font-size: 12px; }
.save-guide { margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; background: #fff4ee; border: 1.5px solid #f6d3c5; }
.save-guide-title { margin: 0 0 4px; font-weight: 900; font-size: 14px; }
.save-guide ol { margin: 0; padding-left: 1.3em; font-size: 13px; line-height: 1.6; }
.save-guide-tip { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
.save-guide-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.save-guide-actions .paste-button { background: var(--surface); }
.paste-inline { margin-top: 4px; padding: 4px 0; font-size: 13px; }
.register-hero { padding: 12px; }
.register-lead { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--muted); }
.quick-url-row .fetch-button { white-space: nowrap; padding: 0 14px; font-size: 14px; }
.register-hero .entry-methods { margin-top: 0; }
/* ===== Recipe add / edit: fewer boxes, one line per ingredient ===== */
.register-hero { padding: 10px; }
.register-hero .entry-methods { margin: 0 0 8px; gap: 6px; }
.register-hero .entry-methods button { min-height: 52px; padding: 6px 4px; }
.quick-url-row { display: flex; gap: 6px; align-items: center; }
.quick-url-row .url-input { flex: 1; min-width: 0; }
.quick-url-row .fetch-button { flex: 0 0 auto; min-height: 44px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.entry-detail-panel { display: grid; gap: 8px; padding: 12px; }
.title-input { font-size: 18px; font-weight: 800; }
.servings-pick { padding: 8px 10px; border-radius: 12px; background: var(--surface-soft); }
.servings-pick p { margin: 0 0 6px; font-size: 13px; }
.servings-pick p small { margin-left: 6px; color: var(--sage-dark, #3f7a35); font-weight: 700; }
.servings-options { display: flex; gap: 4px; flex-wrap: wrap; }
.servings-options .choice-button { min-width: 40px; min-height: 36px; padding: 0 8px; }
.servings-pick.is-unknown { background: var(--surface-soft); }
.servings-warn { margin: 6px 0 0 !important; color: var(--muted); font-size: 12px !important; }
.ingredient-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.ingredient-head h3 { margin: 0; font-size: 15px; }
.ingredient-head h3 small { font-size: 11px; font-weight: 700; }
.ingredient-head .text-button { padding: 4px 6px; font-size: 13px; }
.ingredient-editor-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ingredient-editor-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 32px; gap: 4px; align-items: center; padding: 3px 4px; border-top: 1px dashed var(--line); margin: 0; background: none; border-radius: 0; box-shadow: none; }
.ingredient-editor-row:first-child { border-top: 0; }
.ingredient-editor-row .input { min-height: 34px; padding: 4px 8px; font-size: 14px; border-color: transparent; background: transparent; }
.ingredient-editor-row .input:focus { border-color: var(--tomato); background: var(--surface); }
.ingredient-editor-row .ingredient-amount-select { color: var(--muted); }
.ingredient-delete-button { width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 14px; cursor: pointer; }
.steps-input { min-height: 120px; font-size: 14px; }
.entry-detail-panel .subhead { margin: 4px 0 0; font-size: 15px; }
.servings-banner { display: flex; gap: 10px; align-items: center; margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: #fff0ee; border: 1.5px solid #e2574c; color: #c0392b; }
.servings-banner p { flex: 1; margin: 0; font-size: 12px; line-height: 1.5; }
.servings-banner b { font-size: 13px; }
.servings-banner .secondary-button { flex: 0 0 auto; min-height: 38px; padding: 0 12px; font-size: 13px; border-color: #e2574c; color: #c0392b; }
.ingredient-editor-list .ingredient-editor-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 32px; gap: 4px; padding: 3px 4px; border-radius: 0; background: none; }
.ingredient-editor-list .ingredient-delete-button { grid-column: auto; grid-row: auto; }
.servings-options { flex-wrap: nowrap; }
.servings-options .choice-button { flex: 1 1 0; min-width: 0; padding: 0 2px; }
.servings-options .choice-button:last-child { flex: 1.4 1 0; }
/* 献立の条件：要約だけ見せ、直す時に開く。チップは小さく。 */
.planning-panel { margin: 0 0 10px; padding: 10px; border-radius: 14px; }
.planning-panel h3 { margin: 0; font-size: 15px; }
.planning-row { margin: 6px 0; }
.planning-options { display: flex; flex-wrap: wrap; gap: 4px; }
.planning-options .choice-button { min-height: 34px; padding: 0 9px; font-size: 13px; }
.planning-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.planning-chip { min-height: 34px; padding: 4px 8px; gap: 4px; font-size: 13px; }
.planning-chip input { width: 15px; height: 15px; }
.planning-edit h4 { margin: 8px 0 4px; font-size: 12px; }
.ingredient-editor-list .ingredient-editor-row { border: 0; border-top: 1px dashed var(--line); margin: 0; min-height: 0; }
.ingredient-editor-list .ingredient-editor-row:first-child { border-top: 0; }
.ingredient-editor-list .input { min-height: 32px; }
.ingredient-head { margin: 2px 0 -2px; }
.ingredient-head .text-button { min-height: 32px; }
.planning-options .choice-button { flex: 0 0 auto; }
.ingredient-editor-list .ingredient-editor-row { align-items: center; } .ingredient-editor-list .ingredient-editor-row .input { height: 32px; }
.entry-detail-panel .ingredient-head { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; } .entry-detail-panel .ingredient-head > span { display: flex; flex: 0 0 auto; }
.app-version { margin: 12px 0 0; text-align: center; font-size: 11px; color: var(--muted); }
/* Small phones: keep the page name readable next to page buttons. */
.page-title { flex-shrink: 0; }
.topbar-actions .month-nav .round-icon { width: 34px; height: 34px; min-height: 34px; font-size: 18px; }
.topbar-actions .month-nav strong { font-size: 14px; min-width: 2.6em; text-align: center; }
.shop-head .trip-range { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 360px) { .shop-head .trip-range { font-size: 11px; } }
body.has-page-title .brand-block { flex: 1 0 auto; }
/* Request replies: the requester hears back, the planner hears thanks. */
.request-news { display: grid; gap: 8px; margin: 0 0 10px; }
.news-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); }
.news-card.is-good { background: #fff4e6; border-color: #f3c27a; }
.news-card.is-thanks { background: #fdecef; border-color: #f2b8c3; }
.news-card .news-thumb { width: 56px; height: 56px; border-radius: 12px; }
.news-card .news-thumb small { display: none; }
.news-title { margin: 0; font-size: 14px; font-weight: 900; }
.news-body { margin: 2px 0 0; font-size: 13px; line-height: 1.5; }
.news-actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.news-actions .primary-button { min-height: 36px; padding: 0 14px; font-size: 14px; }
.news-actions .text-button { min-height: 36px; padding: 0 6px; font-size: 13px; }
.request-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.request-actions .secondary-button { min-height: 34px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.viewer-save-note { margin: 0 0 10px; }
/* Join: pick which of the two people you are (a second device joins under the same name). */
.join-q { font-weight: 800; }
.join-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.join-choice { display: grid; gap: 2px; justify-items: center; min-height: 64px; padding: 10px 6px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; }
.join-choice b { font-size: 17px; }
.join-choice small { font-size: 11px; color: var(--muted); }
.join-choice[aria-pressed="true"] { border-color: var(--tomato); background: #fff1ea; }
.join-custom { justify-self: start; padding: 4px 0; font-size: 13px; }
/* 動画から読み直す */
.reread-row { display: grid; gap: 4px; margin: 6px 0; }
.reread-row small { color: var(--muted); font-size: 11px; }
.reread-row .text-button { justify-self: start; padding: 6px 0; font-size: 13px; }
.reread-row.is-empty { padding: 10px 12px; border-radius: 14px; background: #fff4e6; border: 1.5px solid #f3c27a; }
.reread-row.is-empty p { margin: 0; font-size: 13px; }
.reread-row.is-empty p b { display: block; font-size: 14px; }
.reread-row .secondary-button { justify-self: start; min-height: 38px; }
/* 動画読み取りの枠と、開発者コードのキーパッド */
.plan-fill { display: block; max-width: calc(100% - 96px); margin-top: 2px; padding: 2px 0; font-size: 12px; line-height: 1.35; text-align: left; }
.quota-sheet { position: fixed; inset: 0; z-index: 20; display: grid; place-items: end center; padding: 12px; background: rgba(40, 25, 15, .35); }
.quota-card { width: min(100%, 406px); display: grid; gap: 8px; padding: 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 16px 40px rgba(40, 25, 15, .25); margin-bottom: env(safe-area-inset-bottom); }
.quota-title { margin: 0; font-size: 17px; font-weight: 900; }
.quota-dev > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }
.quota-code { margin: 6px 0; text-align: center; font-size: 22px; letter-spacing: .4em; min-height: 28px; }
.quota-wrong { margin: 4px 0 0; text-align: center; color: #c0392b; font-size: 13px; font-weight: 700; }
.quota-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.quota-key { min-height: 48px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-soft); font: inherit; font-size: 20px; font-weight: 800; color: var(--ink); cursor: pointer; }
.planning-panel.is-ai { background: #f6fbf4; border-color: #cfe5c7; }
/* 投稿者の呼び名 */
.creator-row { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 0; }
.creator-open { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 52px; padding: 6px 4px 6px 10px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.creator-edit { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 15px; cursor: pointer; }
.creator-row.is-editing { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
.creator-rename { flex: 1 1 100%; display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.creator-rename .input { min-height: 40px; font-size: 16px; }
.creator-row.is-editing .primary-button { min-height: 38px; padding: 0 16px; }
.creator-note { margin: 6px 2px 0; }
/* 🎟 チケットと、はじめての4週間チャレンジ */
.tk-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-soft); font-size: 20px; color: var(--muted); cursor: pointer; }
/* 達成の瞬間 */
@keyframes tk-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tk-fade { from { opacity: 0; } }
@keyframes tk-fly { from { transform: translateY(40px) rotate(-30deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tk-stamp { from { transform: scale(2.4) rotate(-10deg); opacity: 0; } to { transform: scale(1) rotate(-10deg); opacity: 1; } }
@keyframes tk-fall { to { transform: translateY(110vh) rotate(540deg); } }
@keyframes tk-pulse { 50% { transform: scale(1.12); } }
@keyframes tk-wiggle { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
.draft-video { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
}
/* レシピの選択モード */
.tabs-row { display: flex; align-items: center; gap: 8px; }
.tabs-row .chip-tabs { flex: 1; min-width: 0; }
.select-toggle { flex-shrink: 0; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.select-toggle[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.recipe-tile.is-selecting .tile-mark, .recipe-tile.is-selecting .tile-more, .recipe-tile.is-selecting .tile-request { visibility: hidden; }
.select-cover { position: absolute; inset: 0; z-index: 3; border: 0; border-radius: 18px; background: transparent; cursor: pointer; }
.select-cover i { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: rgba(42, 36, 32, .25); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.select-cover[aria-pressed="true"] { background: rgba(238, 106, 76, .12); outline: 3px solid var(--tomato); outline-offset: -3px; }
.select-cover[aria-pressed="true"] i { background: var(--tomato); }
.select-cover[aria-pressed="true"] i::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.select-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 15; width: min(calc(100% - 24px), 430px); display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-radius: 18px; background: var(--surface); box-shadow: 0 10px 30px rgba(40, 25, 15, .22); border: 1px solid var(--line); font-size: 13px; }
.select-bar > span { white-space: nowrap; }
.select-bar .text-button { flex: 1; font-size: 12px; min-width: 0; }
.select-bar .primary-button { flex-shrink: 0; min-height: 40px; padding: 0 14px; font-size: 14px; }
.danger-fill { background: #d9442a; }
.danger-fill:disabled { opacity: .45; }
.starter-hidden { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.select-space { height: 72px; }
/* ログイン */
.account-panel { display: grid; gap: 8px; }
.account-panel h3 { margin: 0; }
.account-in { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.account-dot { width: 10px; height: 10px; border-radius: 50%; background: #3aa76d; }
.google-login { min-height: 44px; }
.login-row { display: flex; gap: 8px; }
.login-row .input { flex: 1; min-width: 0; }
.google-login { font-size: 12px; color: var(--muted); }
/* はじめの献立づくり（課金につながるオンボーディング） */
.funnel-picks { display: grid; gap: 8px; }
.funnel-picks.is-grid { grid-template-columns: 1fr 1fr; }
.funnel-pick { min-height: 52px; padding: 10px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; }
.funnel-pick[aria-pressed="true"] { border-color: var(--tomato); background: #fff1ec; }
.funnel-graph { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--surface-soft); }
.funnel-graph-title { margin: 0; font-size: 13px; font-weight: 800; }
.fg-row { display: grid; grid-template-columns: 4.5em 1fr 2.6em; align-items: center; gap: 8px; font-size: 13px; }
.fg-row i { height: 14px; width: var(--w); border-radius: 99px; background: #d9cbbb; animation: fg-grow .9s ease-out both; }
.fg-row.is-us i { background: var(--tomato); animation-delay: .35s; }
.fg-row b { font-size: 15px; text-align: right; }
.fg-row.is-us b { color: var(--tomato); }
@keyframes fg-grow { from { width: 0; } }
.funnel-points { margin: 4px 0 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 14px; }
.funnel-result { padding: 14px; border-radius: 18px; background: #f3faf1; border: 1.5px solid #cfe5c7; text-align: center; animation: tk-pop .4s ease-out; }
.funnel-result p { margin: 0; }
.funnel-big b { font-size: 34px; font-weight: 900; color: #2f7d4f; }
.funnel-demo { display: grid; gap: 8px; justify-items: center; padding: 14px; border-radius: 18px; background: var(--surface-soft); }
.fd-link { padding: 6px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; animation: fd-in .4s ease-out both; }
.fd-arrow { font-size: 12px; font-weight: 800; color: var(--muted); animation: fd-in .4s .5s ease-out both; }
.fd-card { width: 100%; display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: 0 6px 18px rgba(40, 25, 15, .12); animation: fd-in .5s 1s ease-out both; }
.fd-card span { font-size: 12px; color: var(--muted); }
.fd-tags { color: var(--tomato) !important; font-weight: 700; }
@keyframes fd-in { from { opacity: 0; transform: translateY(8px); } }
.funnel-hold { position: relative; justify-self: center; width: 150px; height: 150px; border-radius: 50%; border: 0; background: var(--tomato); color: #fff; font: inherit; font-weight: 900; font-size: 16px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 10px 26px rgba(238, 106, 76, .35); }
.fh-ring { position: absolute; inset: -8px; border-radius: 50%; background: conic-gradient(var(--ink) 0deg, transparent 0deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); }
.funnel-hold.is-holding { transform: scale(.96); }
.funnel-hold.is-holding .fh-ring { animation: fh-fill 1.2s linear forwards; }
@property --fh { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.fh-ring { background: conic-gradient(var(--ink) var(--fh), transparent var(--fh)); }
@keyframes fh-fill { to { --fh: 360deg; } }
.funnel-building { display: grid; gap: 10px; }
.fb-pct { margin: 0; font-size: 40px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.funnel-building progress { width: 100%; height: 10px; }
.fb-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.fb-list li::before { content: "○ "; }
.fb-list li.is-done { color: var(--ink); }
.fb-list li.is-done::before { content: "✓ "; color: #2f7d4f; font-weight: 900; }
.funnel-step .wizard-footer { justify-content: space-between; }
@media (prefers-reduced-motion: reduce) { .fg-row i, .fd-link, .fd-arrow, .fd-card, .funnel-result { animation: none; } }
.funnel-hold { display: block; margin: 10px auto; }
.funnel-building .fb-pct { font-size: 40px; line-height: 1.1; }
/* 気になる料理を選ぶ・今週の人気 */
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick-tile { position: relative; display: grid; gap: 4px; padding: 0 0 8px; border: 2px solid transparent; border-radius: 18px; background: var(--surface); font: inherit; color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; box-shadow: 0 2px 10px rgba(40, 25, 15, .08); }
.pick-tile .dish-tile { width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: 16px 16px 0 0; object-fit: cover; }
.pick-title { padding: 0 8px; font-size: 13px; font-weight: 800; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick-tile small { padding: 0 8px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: rgba(42, 36, 32, .25); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.pick-tile[aria-pressed="true"] { border-color: var(--tomato); }
.pick-tile[aria-pressed="true"] .pick-check { background: var(--tomato); }
.pick-tile[aria-pressed="true"] .pick-check::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.discover-badge { color: #c2551f; font-weight: 800; }
/* 出典と、見ながら作るプレーヤー */
.creator-credit { display: grid; gap: 8px; margin: 8px 0 12px; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.video-frame.is-shorts { aspect-ratio: 9 / 16; max-height: 62vh; width: auto; margin: 0 auto; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.credit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-soft); }
.credit-name { margin: 0; display: grid; min-width: 0; }
.credit-name small { font-size: 11px; color: var(--muted); }
.credit-name b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subscribe-button { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #cc0000; color: #fff; font-weight: 800; font-size: 13px; text-decoration: none; }
.credit-note { margin: 0; color: var(--muted); }
.credit-note a { color: var(--muted); }
.step-time { margin: 0 6px 0 0; vertical-align: 1px; padding: 2px 8px; min-height: 26px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12px; font-weight: 800; color: #cc0000; cursor: pointer; white-space: nowrap; }
.cooking-steps li { display: flex; align-items: flex-start; gap: 4px; flex-wrap: wrap; }
.creator-thanks { display: grid; gap: 6px; margin: 10px 0; padding: 12px; border-radius: 16px; background: var(--surface-soft); }
.creator-thanks p { margin: 0; }
.thanks-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.thanks-actions .secondary-button { min-height: 44px; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* 手順の「▶」は番号のすぐ後ろ。 */
.step-time-slot:empty { display: none; }
.cooking-steps.cooking-check label > span::before { margin-right: 2px; }

/* 縦持ち：再生中に動画が上に隠れたら、画面の上に小さく残す（ページは動かさない）。 */
.video-undock { display: none; }
@media (orientation: portrait), (min-height: 521px) {
  .video-frame.is-docked iframe { position: fixed; z-index: 20; top: 0; left: 50%; transform: translateX(-50%); width: min(100vw, 430px); height: auto; aspect-ratio: 16 / 9; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
  .video-frame.is-docked.is-shorts iframe { left: auto; right: max(8px, calc(50vw - 207px)); top: 8px; transform: none; width: min(34vw, 150px); aspect-ratio: 9 / 16; border-radius: 12px; }
  .video-frame.is-docked .video-undock { display: grid; place-items: center; position: fixed; z-index: 21; top: calc(min(100vw, 430px) * 9 / 16 + 6px); right: max(8px, calc(50vw - 207px)); width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0,0,0,.72); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
  .video-frame.is-docked.is-shorts .video-undock { top: calc(min(34vw, 150px) * 16 / 9 + 14px); }
}

/* 横持ちのスマホ：左に動画、右にレシピ（材料・手順）を並べる。 */
@media (orientation: landscape) and (max-height: 520px) {
  body:has(.creator-credit .video-frame) { background: #000; }
  body:has(.creator-credit .video-frame) .app-shell { width: 50vw; min-height: 100vh; margin: 0 0 0 50vw; border-radius: 0; }
  body:has(.creator-credit .video-frame) .topbar { position: static; }
  body:has(.creator-credit .video-frame) .bottom-tabs { display: none; }
  body:has(.creator-credit .video-frame) .screen { padding-bottom: 24px; }
  .creator-credit .video-frame, .creator-credit .video-frame.is-shorts { position: fixed; z-index: 5; left: 0; top: 0; width: 50vw; height: 100vh; height: 100dvh; max-height: none; aspect-ratio: auto; margin: 0; border-radius: 0; }
}

/* ▶ の時刻を直す：再生しながら「📍今の場面」。 */
.timefix { margin: 8px 0 4px; }
.timefix-note { margin: 0; font-size: 11.5px; color: var(--muted); }
.link-inline { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.timefix-open { padding: 10px 12px; border-radius: 14px; background: #fff7e8; border: 1px solid #f1dcb4; display: grid; gap: 8px; }
.timefix-open p { margin: 0; }
.timefix-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.timefix-actions .primary-button { min-height: 40px; padding: 8px 14px; }
.step-here { margin: 0 6px 0 0; padding: 2px 8px; min-height: 26px; border-radius: 999px; border: 1px solid #e0a53a; background: #fff3d6; font: inherit; font-size: 12px; font-weight: 800; color: #8a5a00; cursor: pointer; white-space: nowrap; }
.step-time.is-empty { color: var(--muted); cursor: default; }

/* ===== 初回設定（2026-09 作り直し） ===== */
/* 進み具合：13のブロックが1つずつ色づく */
.funnel-steps { display: grid; grid-template-columns: repeat(var(--n, 7), 1fr); gap: 3px; margin: 4px 0 0; padding: 0; list-style: none; }
/* 2部構成：いまのあなた ｜ これからのあなた */
.funnel-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.fs-label { display: block; font-size: 11px; font-weight: 800; color: #b9ab9b; white-space: nowrap; }
.fs-part.is-active .fs-label { color: var(--sage-dark); }
.fs-part.is-done .fs-label { color: var(--muted); }
.funnel-echo { margin: 0 0 6px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #fff1ec; font-size: 13px; font-weight: 700; width: fit-content; max-width: 100%; animation: fd-in .35s ease-out both; }
.funnel-turn { margin: 12px 0 0; text-align: center; font-size: 15px; }
.remind-card { padding: 16px; border-radius: 20px; background: linear-gradient(135deg, #fff7e8, #ffeccc); margin-bottom: 12px; }
.remind-card p { margin: 0; }
.rc-when { font-size: 16px; margin-bottom: 6px !important; }
.rc-when b { font-size: 22px; color: var(--sage-dark); }
.primary-button.is-quiet { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.cc-gain { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.cc-gain p { margin: 0; padding: 10px; border-radius: 14px; background: #fff1ec; display: grid; }
.cc-gain p:last-child { background: #eef5e2; }
.cc-gain small { font-size: 11px; color: var(--muted); font-weight: 700; }
.cc-gain b { font-size: 20px; }
.funnel-steps li { height: 8px; border-radius: 4px; background: #eadfd1; transition: background .3s, transform .3s; }
.funnel-steps li.is-done { background: var(--tomato); }
.funnel-steps li.is-current { background: var(--tomato); opacity: .55; transform: scaleY(1.35); }
/* 選ぶボタン：アイコンつき */
.funnel-pick { display: flex; align-items: center; gap: 10px; }
.fp-icon { font-size: 22px; line-height: 1; flex: none; }
.funnel-picks.is-goals .funnel-pick { min-height: 64px; font-size: 16px; }
.funnel-picks.is-servings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.funnel-picks.is-servings .funnel-pick { flex-direction: column; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 4px; text-align: center; white-space: nowrap; font-size: 15px; }
.funnel-picks.is-servings .fp-icon { font-size: 15px; letter-spacing: -5px; padding-right: 5px; }
/* 1年の変化：大きな数字とアイコンで */
.funnel-year { display: grid; gap: 12px; }
.fy-card { padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: 0 4px 16px rgba(40, 25, 15, .08); }
.fy-card.is-time { background: linear-gradient(135deg, #fff1e6, #ffe3d6); }
.fy-card.is-food { background: linear-gradient(135deg, #f3f7e8, #e7f0d6); }
.fy-card p { margin: 0; }
.fy-label { font-size: 13px; font-weight: 800; color: var(--muted); }
.fy-big { font-size: 18px; font-weight: 800; }
.fy-big b { font-size: 48px; line-height: 1.1; color: var(--sage-dark); letter-spacing: -.02em; }
.fy-card.is-food .fy-big b { color: #4f7a28; }
.fy-big span { font-size: 16px; }
.fy-eq { font-size: 14px; font-weight: 700; margin-top: 2px !important; }
.fy-bags { font-size: 24px; letter-spacing: 2px; line-height: 1.3; margin-top: 4px !important; }
.fy-bags small { display: block; font-size: 12px; letter-spacing: 0; color: var(--muted); font-weight: 700; }
.fy-goal { margin-top: 8px !important; font-size: 13px; }
.funnel-source { margin-top: 10px; font-size: 12px; color: var(--muted); }
.funnel-source summary { cursor: pointer; }
.funnel-source ul { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
/* AIの読み取りを試す */
.demo-try { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 8px 0; }
.demo-try .primary-button { min-height: 46px; padding: 8px 14px; white-space: nowrap; }
.fd-card.is-real { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; animation: none; }
.fd-card.is-real .fd-photo { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; }
.fd-card.is-real div { display: grid; gap: 3px; }
.fd-ok { color: #3f7a1f !important; font-weight: 800; }
.fd-plan { width: 100%; padding: 10px 12px; border-radius: 14px; background: #fff7e8; font-size: 12px; font-weight: 700; animation: fd-in .5s 1.6s ease-out both; }
/* 料理スキル：診断を主役に、自分で選ぶのは控えめに */
.skill-diagnose { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 0; border-radius: 20px; background: var(--tomato); color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 8px 22px rgba(238, 106, 76, .35); }
.skill-diagnose .sd-icon { font-size: 30px; }
.skill-diagnose b { display: block; font-size: 19px; }
.skill-diagnose small { font-size: 12px; color: #fff; opacity: .95; }
.skill-why { margin: 10px 2px; }
.skill-self { margin-top: 6px; }
.skill-self summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 8px 0; }
.skill-result { text-align: center; margin-bottom: 10px; }
.skill-result p { margin: 0; }
.cc-badge { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: #e9f5dc; color: #3f7a1f; font-size: 12px; font-weight: 800; }
/* 時計のダイヤル */
.time-dial { position: relative; width: min(240px, 70vw); margin: 4px auto 0; touch-action: none; }
.time-dial svg { width: 100%; height: auto; display: block; cursor: grab; outline: none; }
.time-dial svg:focus-visible { filter: drop-shadow(0 0 0 3px #f5b9a8); }
.td-face { fill: #fff; stroke: #eadfd1; stroke-width: 18; }
.td-ticks line { stroke: #c8b8a6; stroke-width: 2; stroke-linecap: round; }
.td-arc { fill: none; stroke: var(--tomato); stroke-width: 18; stroke-linecap: round; }
.td-knob { fill: #fff; stroke: var(--tomato); stroke-width: 4; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); }
.td-value { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; font-size: 18px; font-weight: 800; pointer-events: none; }
.td-value b { font-size: 56px; line-height: 1; text-align: center; }
.td-quick { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.td-quick .chip-button { min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.td-quick .chip-button[aria-pressed="true"] { border-color: var(--tomato); background: #fff1ec; color: var(--sage-dark); }
/* 食べられないもの：入力 → 追加でタブ */
.chip-field { display: grid; gap: 8px; margin: 8px 0 4px; }
.chip-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.chip-add .secondary-button { min-height: 44px; padding: 6px 16px; }
.food-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.food-chips:empty { display: none; }
.food-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: #fff1ec; border: 1.5px solid #f5c3b5; font-size: 14px; font-weight: 700; }
.food-chip button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; font-size: 16px; line-height: 1; color: var(--sage-dark); cursor: pointer; }
/* 新着から選ぶ：雑誌のように */
.pick-grid.is-mag { gap: 14px 10px; }
.pick-tile.is-mag { gap: 5px; padding-bottom: 10px; }
.pick-photo { position: relative; display: block; }
.pick-badge { position: absolute; left: 8px; top: 8px; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--sage-dark); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.pick-tile.is-mag .pick-title { font-size: 14px; }
.pick-blurb { padding: 0 8px; font-size: 11.5px; line-height: 1.45; color: #5b5048; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick-creator { display: flex; align-items: center; gap: 6px; padding: 2px 8px 0; font-size: 12px; font-weight: 800; min-width: 0; }
.pick-creator > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-creator.is-starter { color: var(--muted); font-weight: 700; }
.pick-avatar { width: 22px; height: 22px; flex: none; border-radius: 50%; object-fit: cover; }
.pick-avatar.is-letter { display: grid; place-items: center; background: hsl(var(--h) 55% 88%); color: hsl(var(--h) 45% 32%); font-size: 11px; }
/* 目標を決める */
.commit-card { padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: 0 4px 16px rgba(40, 25, 15, .08); margin-bottom: 14px; }
.cc-goal { margin: 0 0 10px; font-size: 20px; font-weight: 800; line-height: 1.4; }
.cc-plan { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.cc-plan li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); column-gap: 8px; align-items: baseline; font-size: 14px; }
.cc-plan li span { color: var(--muted); font-size: 12px; font-weight: 700; }
.cc-plan li small, .cc-plan li .cc-badge { grid-column: 2; font-size: 11px; color: var(--muted); }
.cc-plan li .cc-badge { color: #3f7a1f; justify-self: start; }
/* 価値を先に見せる「ようこそ」 */
.welcome-card h2 { font-size: 24px; line-height: 1.45; }
.welcome-flow { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: wf; }
.welcome-flow li { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 2px; border-radius: 16px; background: var(--surface); box-shadow: 0 3px 10px rgba(40, 25, 15, .07); text-align: center; animation: fd-in .45s ease-out both; }
.welcome-flow li:nth-child(2) { animation-delay: .15s; } .welcome-flow li:nth-child(3) { animation-delay: .3s; } .welcome-flow li:nth-child(4) { animation-delay: .45s; }
.welcome-flow span { font-size: 26px; }
.welcome-flow b { font-size: 12px; }
.welcome-flow small { font-size: 10px; color: var(--muted); line-height: 1.3; }
/* 一緒に食べる人・調理器具 */
.funnel-picks.is-grid2 { grid-template-columns: 1fr 1fr; }
.funnel-picks.is-grid2 .funnel-pick { font-size: 13px; min-height: 58px; }
.tool-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tool-chip { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.tool-chip[aria-pressed="true"] { border-color: var(--tomato); background: #fff1ec; color: var(--ink); }
.tool-chip[aria-pressed="true"]::before { content: "✓ "; color: var(--sage-dark); }
/* 宣言：指紋を長押し */
.cc-declare { margin: 6px 0 4px; text-align: center; font-size: 17px; font-weight: 800; line-height: 1.6; }
.funnel-hold.is-print { width: 120px; height: 120px; display: grid; place-items: center; }
.fh-print { width: 64px; height: 64px; color: #fff; position: relative; z-index: 1; }
.funnel-hold.is-print.is-holding .fh-ring { animation-duration: 1.5s; }
.fh-hint { text-align: center; }
/* 課金の案内（プレビュー） */
.paywall { position: fixed; inset: 0; z-index: 40; display: grid; align-items: end; justify-items: center; background: rgba(30, 22, 16, .45); backdrop-filter: blur(3px); animation: fd-in .3s ease-out both; }
.pw-card { position: relative; width: min(100%, 430px); max-height: 92vh; overflow: auto; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: #fffaf3; display: grid; gap: 12px; }
.pw-card h2 { margin: 0; font-size: 22px; line-height: 1.45; }
.pw-kicker { margin: 0; font-size: 13px; font-weight: 800; color: var(--sage-dark); }
.pw-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; color: #b3a596; cursor: pointer; }
.pw-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; display: grid; gap: 10px; border-left: 3px solid #f3d3c8; }
.pw-timeline li { position: relative; display: grid; font-size: 13px; }
.pw-timeline li::before { content: ""; position: absolute; left: -26px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--tomato); }
.pw-timeline li:first-child::before { background: var(--tomato); }
.pw-timeline b { font-size: 14px; }
.pw-timeline span { color: var(--muted); }
.pw-plans { display: grid; gap: 8px; }
.pw-plan { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; padding: 14px 14px; border-radius: 16px; border: 2px solid var(--line); background: #fff; font: inherit; text-align: left; cursor: pointer; }
.pw-plan[aria-pressed="true"] { border-color: var(--tomato); background: #fff4ef; }
.pw-plan b { font-size: 15px; }
.pw-plan small { grid-column: 1; font-size: 11px; color: var(--muted); }
.pw-price { grid-row: 1 / span 2; grid-column: 2; font-size: 18px; font-weight: 900; }
.pw-price small { font-size: 11px; font-weight: 700; }
.pw-badge { position: absolute; top: -10px; left: 12px; padding: 1px 8px; border-radius: 999px; background: var(--tomato); color: #fff; font-size: 11px; font-weight: 800; }
.pw-start { min-height: 54px; font-size: 17px; }
.pw-fine { margin: 0; text-align: center; }
.pw-card.is-exit { text-align: center; justify-items: center; }

/* ベータ版 for 晩ごはん */
.beta-badge { display: inline-flex; align-items: baseline; gap: 4px; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: #2a2420; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; }
.beta-badge i { font-style: italic; font-family: Georgia, "Times New Roman", serif; font-weight: 700; color: #ffcf9e; }
.beta-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.beta-note .beta-badge { margin-left: 0; }
.beta-line { margin-top: -4px; }
/* 損の場面：太陽が回る空・ちゃぶ台返し */
.loss-scenes { display: grid; gap: 8px; }
.loss-video { position: relative; margin: 0; aspect-ratio: 640 / 358; border-radius: 20px; overflow: hidden; background: #2a2420; }
.lv-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.lv-over { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: end; gap: 0; padding: 36px 14px 10px; background: linear-gradient(transparent, rgba(20, 14, 10, .78)); color: #fff; text-align: right; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.lv-label { font-size: 12px; font-weight: 800; opacity: .9; }
.lv-num { font-size: 20px; font-weight: 900; line-height: 1.2; }
.lv-num span { font-size: 38px; color: var(--egg); font-variant-numeric: tabular-nums; }
.lv-sub { font-size: 11px; font-weight: 700; opacity: .85; }
/* AIの読み取り：待ち時間・結果 */
.demo-wait { display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: var(--surface); }
.dw-stage { margin: 0; font-weight: 800; }
.dw-stage::after { content: " …"; animation: dw-dots 1.2s steps(3) infinite; }
@keyframes dw-dots { from { opacity: .3; } to { opacity: 1; } }
.dw-bar { height: 6px; border-radius: 3px; background: #efe4d6; overflow: hidden; }
.dw-bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--tomato); animation: dw-bar 1.6s ease-in-out infinite; }
@keyframes dw-bar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.dw-tip { padding: 12px 14px; border-radius: 14px; background: #fff7e8; }
.dw-tip small { font-size: 11px; color: var(--muted); font-weight: 700; }
.dw-tip p { margin: 4px 0 0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.dw-tip p.is-in { animation: fd-in .4s ease-out both; }
.demo-recipe { display: grid; gap: 6px; }
.demo-title { margin: 4px 0 0; font-size: 19px; }
.demo-hint { margin: 4px 0; padding: 10px 12px; border-radius: 14px; background: #eef5ff; font-size: 13px; }
.demo-recipe .detail-h { margin: 10px 0 2px; }
.remind-options { display: grid; gap: 6px; }
.remind-button { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 15px; font-weight: 800; color: var(--ink); cursor: pointer; text-align: left; }
.remind-button span { font-size: 22px; }
.remind-how { margin: 0 4px 6px; font-size: 12px; color: var(--muted); }
.remind-how summary { cursor: pointer; padding: 2px 0; }
.remind-how ol { margin: 6px 0 0; padding-left: 1.3em; display: grid; gap: 4px; color: var(--ink); }
/* 宣言：暗転して、明朝体で読ませる */
.pledge { position: fixed; inset: 0; z-index: 60; display: grid; align-content: center; justify-items: center; gap: 22px; padding: 32px 26px calc(32px + env(safe-area-inset-bottom)); background: #0b0908; color: #f6efe4; text-align: center; animation: pl-fade 1.2s ease-out both; overflow: auto; }
@keyframes pl-fade { from { background: #fffaf3; color: transparent; } 40% { background: #0b0908; color: transparent; } to { background: #0b0908; color: #f6efe4; } }
.pledge .pl-kicker { margin: 0; font-size: 12px; letter-spacing: .4em; color: #b9a58c; }
.pledge .pl-text { margin: 0; font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 800; font-size: clamp(18px, 5.6vw, 28px); line-height: 2; letter-spacing: .04em; }
.pl-text span { display: block; opacity: 0; animation: pl-line 1.2s ease-out forwards; }
.pl-text span:nth-child(1) { animation-delay: 1s; } .pl-text span:nth-child(2) { animation-delay: 1.9s; } .pl-text span:nth-child(3) { animation-delay: 2.8s; } .pl-text span:nth-child(4) { animation-delay: 3.7s; }
.pledge.is-read .pl-text span, .pledge.is-read { animation: none; opacity: 1; }
@keyframes pl-line { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.pledge .pl-guide { margin: 0; font-size: 13px; line-height: 1.8; color: #cdbba3; }
.pl-guide b { color: #fff; }
.funnel-hold.is-pledge { margin: 0; background: transparent; border: 1.5px solid #6f5d49; box-shadow: 0 0 40px rgba(255, 190, 120, .12); }
.funnel-hold.is-pledge .fh-print { color: #f6d8a8; }
.funnel-hold.is-pledge.is-holding .fh-ring { animation-duration: .9s; }
.pl-dots { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; color: #b9a58c; }
.pl-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #8a7560; }
.pl-dots i.is-on { background: #f6d8a8; border-color: #f6d8a8; box-shadow: 0 0 10px #f6d8a8; }
.pl-back { border: 0; background: none; color: #8a7560; font: inherit; font-size: 13px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pledge, .pl-text span { animation: none; opacity: 1; } }
.pick-facts { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px; }
.pick-facts i { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #fff1ec; color: #8a4a36; }
.pick-tile.is-mag .pick-blurb { font-size: 12px; color: #5b5048; -webkit-line-clamp: 2; }
/* 晩ごはんタイプ診断 */
.ratio-plates { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 6px 0 12px; }
.ratio-plates i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--c); font-style: normal; font-size: 18px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); animation: fd-in .25s ease-out both; }
.ratio-rows { display: grid; gap: 6px; }
.ratio-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px 40px; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 14px; background: var(--surface); }
.rr-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.rr-label span { font-size: 20px; }
.rr-count { text-align: center; font-size: 16px; }
.chain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.chain-tile { display: grid; justify-items: center; gap: 1px; min-height: 72px; padding: 8px 2px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font: inherit; cursor: pointer; line-height: 1.25; }
.chain-tile span { font-size: 20px; }
.chain-tile b { font-size: 12px; }
.chain-tile small { font-size: 10px; color: var(--muted); }
.chain-tile[aria-pressed="true"] { border-color: var(--tomato); background: #fff1ec; box-shadow: 0 0 0 2px #ffd8cc; }
.chain-tile:disabled { opacity: .4; }
.photo-drop { display: grid; justify-items: center; gap: 4px; padding: 20px 16px; border-radius: 20px; background: var(--tomato); color: #fff; text-align: center; cursor: pointer; box-shadow: 0 8px 22px rgba(238, 106, 76, .35); }
.photo-drop span { font-size: 34px; }
.photo-drop b { font-size: 18px; }
.photo-drop small { font-size: 12px; opacity: .95; }
.photo-judge { display: grid; justify-items: center; gap: 4px; padding: 16px; border-radius: 20px; background: var(--surface); text-align: center; }
.photo-judge p { margin: 0; }
.pj-kicker { font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.pj-dish { font-size: 18px; font-weight: 800; }
.pj-tech { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.pj-tech i { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #fff1ec; color: #8a4a36; }
.pj-comment { font-size: 14px; }
/* 晩ごはんタイプのカード：生成りのメニューカード（アプリの色に合わせる） */
.cook-type-card { position: relative; margin-top: 4px; padding: 18px 18px 20px; border-radius: 22px; background: #fffaf3; color: var(--ink); text-align: center; display: grid; justify-items: center; gap: 4px; border: 1px solid #ead9c4; box-shadow: inset 0 0 0 6px #fffaf3, inset 0 0 0 7px #e2c2ad, 0 10px 26px rgba(80, 50, 30, .12); animation: ct-in .6s ease-out both; }
@keyframes ct-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ct-kicker { width: 100%; margin: 0 0 6px; display: flex; justify-content: space-between; white-space: nowrap; font-size: 10px; letter-spacing: .16em; color: #a88f78; font-weight: 700; }
.ct-portrait { position: relative; margin: 2px 0 6px; width: min(230px, 68%); aspect-ratio: 4 / 5; border-radius: 999px 999px 18px 18px; overflow: hidden; background: color-mix(in srgb, var(--el) 22%, #f6ead9); box-shadow: 0 0 0 4px #fffaf3, 0 0 0 5px #e2c2ad; }
.ct-art { width: 100%; height: 100%; object-fit: cover; }
.ct-stamp { position: absolute; right: 8px; bottom: 10px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 2.5px solid #c8412c; color: #c8412c; background: rgba(255, 250, 243, .85); font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", serif; font-weight: 800; font-size: 15px; transform: rotate(-12deg); }
.ct-element { margin: 0; font-size: 11px; letter-spacing: .15em; color: #a88f78; font-weight: 700; }
.ct-name { margin: 0; font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 800; font-size: 24px; line-height: 1.35; letter-spacing: .04em; color: #2a2420; }
.ct-catch { margin: 0 0 8px; font-size: 13px; color: #7a6e64; }
.ct-sheet { position: relative; width: 100%; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #efe2d2; }
.ct-overall { position: absolute; bottom: 10px; left: 10px; margin: 0; width: 56px; height: 56px; display: grid; place-content: center; border-radius: 50%; background: #d4533a; color: #fff; box-shadow: 0 4px 10px rgba(212, 83, 58, .35); line-height: 1; }
.ct-overall span { font-size: 9px; letter-spacing: .2em; }
.ct-overall b { font-family: "Shippori Mincho B1", serif; font-size: 22px; }
.ct-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ct-stats li { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) 1.8em; align-items: center; gap: 10px; font-size: 13px; }
.cs-name { text-align: left; font-weight: 700; color: #5b5048; }
.cs-bar { height: 6px; border-radius: 3px; background: #f3e9dc; overflow: hidden; }
.cs-bar i { display: block; height: 100%; width: var(--v); border-radius: 3px; transform-origin: left; animation: cs-fill .9s var(--d) cubic-bezier(.2, .9, .3, 1) both; }
@keyframes cs-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cs-grade { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 18px; font-weight: 700; animation: fd-in .4s calc(var(--d) + .6s) ease-out both; }
.g-S { color: #b8862b; } .cs-bar .g-S { background: linear-gradient(90deg, #e4b75a, #b8862b); }
.g-A { color: #d4533a; } .cs-bar .g-A { background: #d4533a; }
.g-B { color: #e0784f; } .cs-bar .g-B { background: #e0784f; }
.g-C { color: #d99a45; } .cs-bar .g-C { background: #e6ac5c; }
.g-D { color: #a99a52; } .cs-bar .g-D { background: #c7b86a; }
.g-E { color: #7f9a6c; } .cs-bar .g-E { background: #9db78a; }
.g-F { color: #7f98ab; } .cs-bar .g-F { background: #a3b8c7; }
.g-G { color: #a89a8c; } .cs-bar .g-G { background: #cdbfb1; }
.ct-move { width: 100%; margin: 10px 0 2px; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; font-size: 13px; }
.ct-move span { color: #a88f78; font-weight: 700; letter-spacing: .1em; }
.ct-move i { border-bottom: 2px dotted #d9c4ad; transform: translateY(-3px); }
.ct-move b { font-family: "Shippori Mincho B1", serif; font-size: 16px; color: #2a2420; }
.ct-share { margin-top: 8px; padding: 9px 22px; border-radius: 999px; border: 0; background: var(--tomato); color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(238, 106, 76, .3); }
@media (prefers-reduced-motion: reduce) { .cook-type-card, .cs-bar i, .cs-grade { animation: none; } }
.profile-wizard .photo-drop small, .photo-drop small { color: #fff; opacity: .95; }
.profile-wizard .photo-drop b { color: #fff; }

/* 料理スキル：写真＋テスト */
.skill-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.skill-part { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 132px; padding: 12px 8px; border-radius: 18px; text-align: center; font: inherit; cursor: pointer; }
.skill-part.photo-drop { background: var(--tomato); color: #fff; box-shadow: 0 6px 16px rgba(238, 106, 76, .3); }
.skill-part.quiz-start { border: 1.5px solid var(--tomato); background: #fff; color: var(--ink); }
.skill-part span { font-size: 30px; }
.skill-part b { font-size: 15px; }
.skill-part small { font-size: 11px; line-height: 1.4; }
.skill-part.is-done { background: #fff; border: 1.5px solid #e2d3c0; cursor: default; }
.skill-part.is-done p { margin: 0; }
.sp-head { font-size: 13px; font-weight: 800; }
.sp-head b { color: var(--sage-dark); font-size: 13px; }
.skill-part .pj-dish { font-size: 14px; font-weight: 800; }
.skill-part .pj-comment { font-size: 11px; color: var(--muted); }
.skill-total { display: grid; justify-items: center; gap: 2px; margin: 6px 0; padding: 12px; border-radius: 18px; background: #fff7ec; text-align: center; }
.skill-total p { margin: 0; }
.st-label { font-size: 11px; color: var(--muted); font-weight: 700; }
.st-name { font-weight: 800; }
.ratio-part { margin-bottom: 10px; }
.ratio-part .quick-sub small { color: var(--muted); font-weight: 700; margin-left: 4px; }

.ratio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ratio-cell { display: grid; justify-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 14px; background: #fff; border: 1.5px solid color-mix(in srgb, var(--c) 40%, #efe2d2); }
.rc-label { display: grid; justify-items: center; font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center; min-height: 3.1em; }
.rc-label span { font-size: 20px; }
.ratio-cell .rr-count { font-size: 22px; color: var(--c); line-height: 1.1; }
.rc-btns { display: flex; gap: 4px; }
.rc-btns button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fffaf3; font: inherit; font-size: 16px; font-weight: 800; color: var(--ink); cursor: pointer; }
.rc-btns button:disabled { opacity: .35; }

.ct-story { margin: 0 2px 10px; text-align: left; font-size: 13px; line-height: 1.85; color: #4a403a; }
.skill-photo { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0 0 10px; }
.skill-photo img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; }
.skill-photo figcaption { display: grid; font-size: 12px; color: var(--muted); }
.skill-photo figcaption b { color: var(--ink); font-size: 14px; }
.skill-photo small { font-size: 11px; }

/* ── 料理スキル試験（CBT） ── */
.skill-quiz.is-cbt { text-align: left; }
.skill-quiz.is-cbt .quiz-progress { text-align: center; }
.quiz-meta { display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: 12px; font-weight: 800; color: var(--muted); }
.qm-cat { padding: 3px 10px; border-radius: 999px; background: #fff1dc; color: var(--sage-dark); }
.qm-level { letter-spacing: 1px; color: #c9a45a; }
.skill-quiz h2.quiz-q { font-size: 21px; line-height: 1.5; }
.quiz-choices { display: grid; gap: 8px; }
.quiz-choice { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; font-weight: 700; line-height: 1.4; cursor: pointer; }
.quiz-choice:not(:disabled):active { transform: scale(0.99); border-color: var(--tomato); }
.qc-key { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f5ebdd; font-size: 12px; font-weight: 900; color: var(--muted); }
.quiz-choice.is-right { border-color: #3f9a6b; background: #eaf7ef; }
.quiz-choice.is-right .qc-key { background: #3f9a6b; color: #fff; }
.quiz-choice.is-wrong { border-color: var(--tomato); background: #fdeae4; }
.quiz-choice.is-wrong .qc-key { background: var(--tomato); color: #fff; }
.quiz-choice.is-dim { opacity: 0.5; }
.quiz-choice:disabled { cursor: default; color: var(--ink); }
.quiz-reveal { padding: 12px 14px; border-radius: 16px; background: #fff7e8; font-size: 14px; line-height: 1.6; }
.quiz-reveal p { margin: 0; }
.quiz-reveal .qr-head { margin-bottom: 4px; font-weight: 900; }
.quiz-reveal.is-right .qr-head { color: #2f7d55; }
.quiz-reveal.is-wrong .qr-head { color: var(--sage-dark); }
.score-card { display: grid; justify-items: center; gap: 2px; padding: 16px 12px 14px; border-radius: 24px; background: #2a2420; color: #fff8ee; }
.skill-quiz.is-result .score-card p { margin: 0; }
.sc-score b { font-size: 56px; line-height: 1; font-weight: 900; color: var(--egg); font-variant-numeric: tabular-nums; }
.sc-score small { margin-left: 4px; font-size: 14px; color: #d8cbbb; }
.sc-rank { display: flex; align-items: center; gap: 10px; }
.sc-kyu { padding: 2px 12px; border: 1.5px solid var(--egg); border-radius: 8px; font-size: 18px; font-weight: 900; color: var(--egg); font-family: "Shippori Mincho", serif; }
.sc-rank .skill-stars { font-size: 20px; color: var(--egg); letter-spacing: 2px; }
.sc-name { font-size: 22px; font-weight: 900; }
.sc-sub { font-size: 12px; color: #d8cbbb; }
.cat-scores { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cat-scores li { display: flex; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff1dc; font-size: 12px; font-weight: 700; }
.cat-scores b { color: var(--sage-dark); }
.ladder-box { text-align: left; border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; background: var(--surface); }
.ladder-box summary { font-weight: 800; font-size: 14px; cursor: pointer; }
.star-ladder { display: grid; gap: 4px; margin: 10px 0 6px; padding: 0; list-style: none; }
.star-ladder li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; font-size: 13px; }
.star-ladder li.is-here { background: #fff1dc; outline: 2px solid var(--tomato); }
.star-ladder li.is-done { opacity: 0.6; }
.sl-star { font-weight: 900; color: var(--tomato); }
.sl-body { display: grid; min-width: 0; }
.sl-body small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.sl-band { display: grid; justify-items: end; font-size: 11px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.sl-band em { font-style: normal; color: var(--tomato); }
.quiz-next { padding: 12px 14px; border-radius: 16px; background: #f1f6ee; text-align: left; font-size: 14px; line-height: 1.6; }
.quiz-growth-q { margin: 6px 0 0; font-size: 17px; }
.exam-score { font-size: 18px; font-weight: 800; }
.exam-score b { font-size: 48px; color: var(--tomato); }

/* ── 経験値のお知らせ（作った！のあと） ── */
.xp-pop { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 16px); z-index: 90; display: grid; justify-items: center; gap: 2px; min-width: 180px; padding: 10px 18px; border-radius: 18px; background: #2a2420; color: #fff8ee; box-shadow: var(--shadow); font-size: 14px; font-weight: 800; transform: translateX(-50%); animation: xp-pop 3.6s ease forwards; pointer-events: none; }
.xp-gain { font-size: 22px; color: var(--egg); }
@keyframes xp-pop { 0% { opacity: 0; transform: translate(-50%, -12px) scale(0.9); } 8% { opacity: 1; transform: translate(-50%, 0) scale(1.04); } 14% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .xp-pop { animation: none; } }

/* ── プロフィール：Lv・スキル・バッジ ── */
.skill-settings { display: grid; gap: 10px; }
.skill-settings > * { margin: 0; }
.lv-card { display: flex; align-items: center; gap: 12px; }
.lv-badge { flex: none; display: grid; place-items: center; align-content: center; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe28a, var(--egg) 55%, #d9a92c); color: #5a3d0c; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.12); }
.lv-badge small { font-size: 11px; font-weight: 900; line-height: 1; }
.lv-badge b { font-size: 26px; line-height: 1; font-weight: 900; }
.lv-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lv-main p { margin: 0; }
.lv-title { font-weight: 800; }
.lv-title .skill-stars { color: var(--tomato); }
.lv-title small { display: block; font-size: 12px; color: var(--muted); }
.xp-bar { height: 10px; border-radius: 999px; background: #f1e6d8; overflow: hidden; }
.xp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--egg), var(--tomato)); }
.next-star { padding: 10px 12px; border-radius: 14px; background: #fff7e8; font-size: 13px; line-height: 1.6; }
.next-star p { margin: 0; }
.next-star small { color: var(--muted); }
.next-star.is-ready { display: grid; gap: 8px; background: #fff1dc; outline: 2px solid var(--egg); }
.skill-h { margin: 4px 0 0; font-size: 14px; }
.skill-h small { color: var(--muted); font-weight: 700; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #fff1dc; font-size: 12px; font-weight: 700; }
.skill-chip small { color: var(--sage-dark); font-weight: 900; }
.skill-chip.lv3 { background: #fde6c8; } .skill-chip.lv4 { background: #fcd8b8; } .skill-chip.lv5 { background: #f9c6a8; }
.skill-chip.is-locked { background: none; border: 1px dashed #d8c8b4; color: var(--muted); }
.badge-shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.badge-shelf li { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 8px 2px 6px; border-radius: 14px; background: #f6efe6; text-align: center; }
.badge-shelf li span { font-size: 22px; line-height: 1.2; filter: grayscale(1); opacity: 0.35; }
.badge-shelf li b { font-size: 10px; line-height: 1.3; color: var(--muted); }
.badge-shelf li small { display: none; }
.badge-shelf li.is-earned { background: #fff1dc; box-shadow: inset 0 0 0 1.5px var(--egg); }
.badge-shelf li.is-earned span { filter: none; opacity: 1; }
.badge-shelf li.is-earned b { color: var(--ink); }

/* ── 外食・中食にする（作れない日の逃げ道） ── */
.skip-panel { display: grid; gap: 10px; margin: -4px 0 12px; padding: 14px; border: 1.5px solid var(--egg); border-radius: 20px; background: #fffaf0; }
.skip-q { margin: 0; font-weight: 800; }
.skip-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skip-kind { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-weight: 800; font-size: 14px; cursor: pointer; }
.skip-kind span { font-size: 20px; }
.skip-kind:active { border-color: var(--tomato); background: #fff1dc; }
.skip-shops { margin: 0; font-size: 12px; color: var(--muted); }
.skip-shift { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 700; line-height: 1.5; }
.skip-shift input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--tomato); }
.skip-shift small { display: block; font-weight: 500; color: var(--muted); }
.skip-panel .text-button { justify-self: center; }

/* ── 定番フォルダ ── */
.child-name { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.child-name .src-mark, .folder-row .src-mark, .rank-prompt .src-mark { margin-right: 2px; }
.tonight-title .child-name { font-size: 14px; }
.swap-group { margin: 6px 0 0; font-size: 12px; font-weight: 800; color: var(--muted); }
/* 「⇄ ほかの一皿」の理由（任意・1タップ） */
.swap-why { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.swap-why > span { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.swap-why-echo { margin: 0 0 8px; font-size: 13px; line-height: 1.6; }
.swap-bought { padding: 12px; border-radius: 14px; background: #fff7ea; border: 1px dashed #f0c98f; }
.swap-bought p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.swap-bought-actions { display: grid; gap: 8px; }
.swap-folder { margin: 0; font-size: 14px; }
.swap-medal { margin-right: 4px; font-style: normal; }
.rank-prompt { display: grid; gap: 8px; }
.rank-prompt p { margin: 0; }
.rp-head { font-size: 16px; }
.rp-list { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.8; }
.rp-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-buttons button { flex: 1 0 56px; min-height: 44px; padding: 0 8px; }
.rank-prompt .text-button { justify-self: center; }
.folder-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.folder-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.folder-card > span { display: grid; flex: 1; min-width: 0; }
.folder-card small { color: var(--muted); font-size: 12px; }
.fc-thumb { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: none; }
.fc-pin { font-style: normal; font-size: 12px; font-weight: 800; color: var(--sage-dark); }
.folder-detail { display: grid; gap: 8px; }
.folder-title { margin: 0; font-size: 22px; }
.folder-pin label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.folder-pin select { width: auto; min-height: 40px; }
.folder-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.folder-rows.is-out { opacity: .7; }
.folder-row { display: flex; align-items: center; gap: 8px; }
.fr-rank { flex: none; width: 30px; text-align: center; font-size: 18px; font-weight: 800; }
.fr-main { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.fr-main > span { display: grid; min-width: 0; }
.fr-main small { color: var(--muted); font-size: 11px; }
.fr-thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.fr-moves { display: grid; gap: 2px; }
.fr-moves .plan-icon { min-width: 36px; min-height: 30px; padding: 0; }
.folder-search { display: grid; gap: 8px; margin-top: 6px; }
.search-results { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.search-results li { display: flex; align-items: center; gap: 8px; }
.search-results img { width: 96px; aspect-ratio: 16 / 9; border-radius: 10px; object-fit: cover; flex: none; }
.search-results span { display: grid; flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; }
.search-results b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-results small { color: var(--muted); }
.search-results button { flex: none; min-height: 40px; padding: 0 10px; }
.folder-edit summary { font-size: 13px; color: var(--muted); cursor: pointer; }
.folder-edit-row { display: flex; gap: 6px; margin: 8px 0; }
.folder-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: 14px; }
.folder-other summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.folder-other > div { display: grid; justify-items: start; }
.folder-empty p { margin: 0 0 6px; }
.child-name span, .fr-main b span, .rank-prompt b span { display: inline; }
.swap-option .child-name { display: block; }
.swap-option .child-name .src-mark { display: inline-block; }
/* 献立の「⋯」メニュー（カードの下に開く） */
.plan-more-btn { min-width: 36px; font-weight: 900; color: var(--muted); }
.plan-menu { display: grid; gap: 6px; margin: -4px 0 12px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: #fffaf0; }
.plan-menu-item { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 800; text-align: left; cursor: pointer; }
.plan-menu-item:active { border-color: var(--tomato); background: #fff1dc; }
.skip-spill { margin-top: 4px; padding: 6px 8px; border-radius: 10px; background: #fff1dc; color: var(--ink) !important; }
.skip-modes { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.skip-modes legend { margin-bottom: 4px; font-size: 13px; font-weight: 800; }
.skip-mode { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px; line-height: 1.5; }
.skip-mode:has(input:checked) { border-color: var(--tomato); background: #fff6ec; }
.skip-mode input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--tomato); flex: none; }
.skip-mode small { display: block; color: var(--muted); }
.skip-mode u { text-decoration-color: var(--egg); text-decoration-thickness: 3px; }

/* ── ホーム画面に追加の案内 ── */
.install-card { display: grid; gap: 10px; border: 1.5px solid var(--egg); background: #fffaf0; }
.install-head { display: flex; align-items: center; gap: 10px; }
.install-head img { border-radius: 12px; box-shadow: 0 2px 6px rgba(90, 60, 30, .15); }
.install-head p { display: grid; margin: 0; }
.install-head small { color: var(--muted); font-size: 12px; }
.install-why { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.install-steps { display: grid; gap: 6px; margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.6; }
.install-steps b { color: var(--sage-dark); }
.ios-share { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; color: #1a73e8; }
.install-card .text-button { justify-self: center; }
/* 振り分け（いまの1週間）：1画面に収まるよう小さく */
.ratio-part { margin-bottom: 12px; }
.ratio-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ratio-head .ratio-plates { display: flex; gap: 3px; margin: 0; }
.ratio-head .ratio-plates i { width: 24px; height: 24px; font-size: 13px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.ratio-grid { gap: 5px; }
.ratio-cell { gap: 4px; padding: 6px 2px; border-radius: 12px; }
.rc-label { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 0; font-size: 10.5px; white-space: nowrap; letter-spacing: -.02em; }
.rc-label span { font-size: 15px; }
.rc-row { display: flex; align-items: center; justify-content: center; gap: 2px; }
.ratio-cell .rr-count { min-width: 18px; font-size: 20px; }
.ratio-cell .rc-btn { flex: none; width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); background: #fffaf3; font: inherit; font-size: 15px; font-weight: 800; line-height: 1; color: var(--ink); cursor: pointer; }
.ratio-cell .rc-btn:disabled { opacity: .35; }
.ratio-cell .rc-btn:active:not(:disabled) { background: #fff1dc; border-color: var(--c); }
.ratio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ratio-cell { min-width: 0; }
.rc-label { max-width: 100%; overflow: hidden; }
@media (max-width: 374px) {
  .ratio-grid { gap: 4px; }
  .rc-label { display: grid; justify-items: center; gap: 0; font-size: 9.5px; }
  .rc-label span { font-size: 14px; line-height: 1.1; }
  .rc-row { gap: 1px; }
  .ratio-cell .rc-btn { width: 23px; height: 23px; font-size: 13px; }
  .ratio-cell .rr-count { min-width: 13px; font-size: 18px; }
  .ratio-head { flex-wrap: wrap; }
  .ratio-head .ratio-plates i { width: 20px; height: 20px; font-size: 11px; }
}
.rc-label { display: grid; justify-items: center; gap: 0; font-size: 10.5px; line-height: 1.25; }
.rc-label span { font-size: 16px; line-height: 1.1; }
@media (max-width: 374px) { .rc-label { font-size: 9.5px; } .rc-label span { font-size: 14px; } }
.plan-controls .plan-more-btn { flex: none; width: 40px; height: 40px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%; aspect-ratio: 1; }

/* ── 通知の設定 ── */
.push-types { display: grid; gap: 6px; }
.push-type { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.push-type input { width: 20px; height: 20px; accent-color: var(--tomato); flex: none; }
.push-type span { display: grid; flex: 1; min-width: 0; font-size: 14px; }
.push-type small { color: var(--muted); font-size: 12px; }
.push-type .push-time { width: auto; min-height: 36px; padding: 0 8px; flex: none; }
.push-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.remind-button.is-push { border-color: var(--tomato); background: #fff1dc; }
.remind-done { margin: 0; font-weight: 800; color: var(--sage-dark); }
/* フォルダを作る・レシピを入れる */
.folder-create { display: flex; gap: 6px; margin: 0 0 10px; }
.folder-create .input { flex: 1; min-width: 0; }
.folder-create .primary-button { flex: none; min-height: 44px; padding: 0 16px; }
.folder-picker { display: grid; gap: 8px; padding: 12px; border: 1.5px solid var(--egg); border-radius: 16px; background: #fffaf0; }
.folder-picker-head { display: flex; justify-content: space-between; align-items: center; }
.folder-pick-list { display: grid; gap: 6px; max-height: 420px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.folder-pick-list li { display: flex; align-items: center; gap: 8px; }
.folder-pick-list li[hidden] { display: none; }
.folder-pick-list span { display: grid; flex: 1; min-width: 0; font-size: 13px; }
.folder-pick-list small { color: var(--muted); font-size: 11px; }
.folder-pick-list .secondary-button { flex: none; min-height: 38px; padding: 0 12px; }
/* 1週間コンプ：スタンプカード・メニュー・アルバム */
.stamp-card { display: grid; gap: 10px; padding: 14px; }
.stamp-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.stamp-count { font-weight: 900; font-size: 14px; color: var(--muted); }
.stamp-count.is-comp { color: var(--sage-dark); }
.stamp-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.stamp { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; font: inherit; color: var(--muted); min-width: 0; }
button.stamp { cursor: pointer; }
.stamp i { display: grid; place-items: center; width: 100%; max-width: 42px; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--line); background: var(--surface); font-style: normal; font-size: 16px; overflow: hidden; }
.stamp i img { width: 100%; height: 100%; object-fit: cover; }
.stamp small { font-size: 11px; font-weight: 700; }
.stamp.is-photo i { border: 2px solid var(--sage); }
.stamp.is-cooked i { border-style: solid; border-color: var(--egg); background: #fff7dc; }
.stamp.is-missed i { border-style: solid; background: var(--surface-soft); }
.stamp.is-off i, .stamp.is-none i { border-color: transparent; background: var(--surface-soft); opacity: .6; }
.stamp.is-today small { color: var(--sage-dark); }
.stamp-note { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.stamp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stamp-actions > * { flex: 1 1 0; }
.stamp-card .primary-button small { font-size: 12px; opacity: .85; }
.menu-viewer { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 12px; background: rgba(40, 25, 15, .55); }
.menu-sheet { display: grid; gap: 10px; width: min(440px, 100%); max-height: calc(100dvh - 24px); padding: 12px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.menu-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-top .segmented { flex: 1; margin: 0; }
.menu-frame { display: grid; place-items: center; min-height: 0; overflow: hidden; border-radius: 14px; background: var(--surface-soft); color: var(--muted); font-size: 13px; }
.menu-frame img { display: block; max-width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; }
.menu-frame.is-feed:not(:has(img)) { aspect-ratio: 4 / 5; }
.menu-frame.is-story:not(:has(img)) { aspect-ratio: 9 / 16; max-height: calc(100dvh - 170px); }
.menu-actions { display: flex; gap: 8px; }
.menu-actions > * { flex: 1 1 0; }
.album-row { display: grid; grid-auto-flow: column; grid-auto-columns: 30%; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.album-tile { display: grid; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.album-art { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 6px; aspect-ratio: 4 / 5; align-content: center; border-radius: 12px; background: var(--paper, #faf5ec); box-shadow: inset 0 0 0 1px var(--line); }
.album-art img { width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; }
.album-tile small { font-size: 11px; color: var(--muted); }
.menu-album { margin-bottom: 18px; }
.menu-setup { gap: 12px; overflow-y: auto; }
.menu-setup .menu-top b { font-size: 17px; }
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.style-card { display: grid; justify-items: start; gap: 2px; padding: 10px 12px; border: 2px solid transparent; border-radius: 16px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.style-card span { font-size: 22px; line-height: 1.2; }
.style-card b { font-size: 15px; color: var(--accent); }
.style-card small { font-size: 11.5px; opacity: .75; }
.style-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 6px 16px rgba(90, 60, 30, .14); }
.menu-wish { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.wish-chips, .menu-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.wish-chip, .opt-chip { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.opt-chip[aria-pressed="true"] { border-color: var(--sage); background: #fde9e2; color: var(--sage-dark); font-weight: 700; }
.opt-chip[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.menu-name { font-size: 14px; }
.menu-sheet .primary-button small { font-size: 12px; opacity: .85; }
.menu-sheet { overflow-y: auto; }
.menu-frame img { max-height: calc(100dvh - 250px); }
.album-tile > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.menu-field { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.menu-field .segmented { margin: 0; }
.menu-field .choice-button { display: grid; justify-items: center; line-height: 1.25; }
.menu-field .choice-button small { font-size: 10.5px; font-weight: 500; opacity: .75; }
.style-grid .style-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.menu-setup .style-card { padding: 8px 12px; }
.menu-setup .style-card span { font-size: 18px; }
.menu-field .choice-button { font-size: 13.5px; padding-left: 6px; padding-right: 6px; }
.legal-links { margin: 0 0 6px; padding-left: 1.2em; } .legal-links li { margin: 4px 0; }
/* 無料とプラス：ロックの日は1行、案内は短く */
.lock-strip { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface-soft); }
.lock-days { font-size: 16px; }
.lock-day { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.lock-plus { margin-left: auto; padding: 7px 12px; border: 0; border-radius: 999px; background: var(--sage); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.plus-nudge { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #fff4e6; font-size: 13.5px; font-weight: 700; }
.plus-nudge .lock-plus { margin-left: auto; }
.plus-nudge .tk-close { width: 30px; height: 30px; font-size: 16px; }
.pw-plus h2 { margin: 2px 0 8px; }
.pw-perks { margin: 0 0 10px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pw-perks li { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--surface-soft); font-size: 13.5px; font-weight: 700; }
.pw-perks li span { font-size: 18px; }
/* ⓘ：押すと吹き出し */
.tip { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; vertical-align: middle; }
.tip:focus::after, .tip:hover::after { content: attr(data-tip); position: absolute; z-index: 20; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 220px; padding: 7px 10px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.5; text-align: left; white-space: normal; box-shadow: var(--shadow); }
.plan-foot { margin: 4px 0 0; text-align: right; }
/* チケットのページ */
/* チケットのページ：タブ・ミッション・ショップ */
/* β版の「お気持ちありがとう」と意見フォーム */
.fb-sheet .quota-card { display: grid; gap: 10px; }
.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fb-title { margin: 0; font-size: 18px; font-weight: 900; }
.fb-lead { margin: 0; font-size: 14.5px; }
.fb-gift { margin: 0; padding: 10px 12px; border-radius: 14px; background: #fff4e6; font-size: 13.5px; line-height: 1.6; }
.fb-message { min-height: 110px; resize: vertical; font-size: 15px; }
.fb-contact { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.fb-note { margin: 0; text-align: center; }

/* 献立の入れ替え：🔗 動画のURLから入れる */
.swap-url { display: flex; gap: 6px; align-items: center; margin: 0 0 10px; }
.swap-url .input { flex: 1; min-width: 0; }
.swap-url .primary-button { flex: none; padding: 10px 14px; min-height: 0; }
.swap-url.is-busy { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line); font-size: 14px; }

/* ⭐ まとめて評価（今日・献立の上） */
.rv-card { padding: 12px 12px 8px; }
.rv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rv-head h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rv-tabs { display: flex; gap: 6px; margin: 10px 0 4px; }
.rv-tab { flex: 1; padding: 7px 8px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.rv-tab[aria-selected="true"] { background: var(--tomato); border-color: var(--tomato); color: #fff; }
.rv-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.rv-row { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.rv-row:last-child { border-bottom: 0; }
.rv-dish { display: flex; align-items: center; gap: 8px; }
.rv-dish .dish-tile { flex: none; width: 44px !important; height: 44px !important; min-width: 0; border-radius: 10px; object-fit: cover; }
.rv-dish > span:not(.dish-tile) { display: grid; min-width: 0; }
.rv-dish b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-dish small { font-size: 12px; color: var(--muted); }
.rv-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.rv-chip { display: grid; place-items: center; gap: 0; padding: 4px 0; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; cursor: pointer; color: var(--ink); }
.rv-chip span { font-size: 18px; line-height: 1.2; }
.rv-chip small { font-size: 10px; white-space: nowrap; }
.rv-chip[aria-pressed="true"] { border-color: var(--tomato); background: color-mix(in srgb, var(--tomato) 14%, var(--surface)); }

/* 読み取りの2段階（① 説明欄 → ② 動画AI） */
.read-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.rs { padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); }
.rs p { margin: 0; display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
.rs p small { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 700; }
.rs em { display: block; font-style: normal; font-size: 13px; margin-top: 2px; }
.rs.is-ok { border-color: #8fc27f; background: #f2faee; } .rs.is-ok em { color: #3f7a35; font-weight: 700; }
.rs.is-part { border-color: #e7c35a; background: #fffaea; } .rs.is-part em { color: #9a6b00; font-weight: 700; }
.rs.is-no { border-color: #e7a39b; background: #fff3f1; } .rs.is-no em { color: #b3443a; font-weight: 700; }
.rs.is-todo { border-style: dashed; border-color: var(--tomato); } .rs.is-todo em { color: var(--ink); }
.rs.is-skip em, .rs.is-run em { color: var(--muted); }
.rs .draft-video { margin-top: 8px; }
/* 🧩 レシピの完成度 */
.ck-card { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-soft); border: 1px solid var(--line); }
.ck-card.is-full { background: #f2faee; border-color: #8fc27f; }
.ck-card.pop { animation: ck-pop .5s ease; }
@keyframes ck-pop { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
.ck-head { display: flex; justify-content: space-between; font-size: 14px; }
.ck-head span { font-weight: 800; color: var(--tomato); }
.ck-bar { height: 6px; border-radius: 99px; background: var(--line); margin: 6px 0 8px; overflow: hidden; }
.ck-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f2a65a, var(--tomato)); border-radius: 99px; transition: width .3s ease; }
.ck-card.is-full .ck-bar i { background: #6bb35a; }
.ck-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ck-chip { padding: 4px 9px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; border: 1.5px dashed var(--tomato); background: var(--surface); color: var(--tomato); cursor: pointer; }
.ck-chip.is-done { border: 1.5px solid #8fc27f; background: #f2faee; color: #3f7a35; cursor: default; }
.ck-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.ck-flash { animation: ck-flash 1.2s ease; }
@keyframes ck-flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tomato) 45%, transparent); } }

/* 作る画面：画面つけっぱなし・⏱タイマー・1手順ずつ */
.wake-chip { margin: 4px 0 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.cooking-steps-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cooking-steps-head h3 { margin: 0; }
.cook-mode-open { flex: none; padding: 8px 12px; min-height: 0; font-size: 14px; }
.cook-timer-chip { display: inline-flex; align-items: center; gap: 1px; margin: 0 2px; padding: 1px 8px; border-radius: 999px; border: 1.5px solid var(--tomato); background: color-mix(in srgb, var(--tomato) 10%, var(--surface)); color: var(--tomato); font: inherit; font-weight: 800; cursor: pointer; line-height: 1.5; }
#cook-timer-bar { position: fixed; left: 8px; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; display: grid; gap: 6px; max-width: 520px; margin: 0 auto; }
body.cook-mode-open #cook-timer-bar { bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 90; }
.ctb-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #2b2825; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.ctb-time { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 58px; }
.ctb-label { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.ctb-item button { flex: none; border: 0; border-radius: 10px; padding: 6px 9px; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ctb-item.is-paused .ctb-time { opacity: .6; }
.ctb-item.is-done { background: var(--tomato); animation: ctb-ring 1s ease-in-out infinite; }
.ctb-item.is-done .ctb-label { opacity: 1; font-weight: 800; font-size: 15px; }
@keyframes ctb-ring { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } }


/* 作る画面：手順ごとの材料・タレのまとまり */
.cook-list { list-style: none; counter-reset: step; padding: 0; margin: 6px 0 0; }
.cook-list > li { display: block; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--line); line-height: 1.7; }
.cook-list .cs-text { font-size: 16px; }
.cook-list .cs-text::before { counter-increment: step; content: counter(step) ". "; font-weight: 800; color: var(--tomato); }
.step-uses { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: var(--muted); }
.step-uses b { color: var(--ink); font-weight: 700; }
.step-uses .su-group { padding: 1px 8px; border-radius: 8px; background: #fff3dc; color: #7a5a1c; }
.ing-group { margin: 6px 0 4px; padding: 4px 10px 2px; border-radius: 12px; background: #fff7e8; }
.ing-group > p { margin: 4px 0 0; font-size: 13px; font-weight: 800; color: #7a5a1c; }
.ing-group .cooking-ingredients li:last-child { border-bottom: 0; }

/* 🍳 料理モード：横持ちは 左に動画｜右に手順と材料、縦持ちは 上に動画・下に手順と材料 */
#cook-mode { position: fixed; inset: 0; z-index: 80; background: var(--bg, #fffaf3); display: grid; grid-template-rows: auto 1fr auto; padding-bottom: env(safe-area-inset-bottom); }
body.cook-mode-open { overflow: hidden; }
.cm-video { background: #000; aspect-ratio: 16 / 9; width: 100%; }
.cm-video.is-shorts { aspect-ratio: auto; height: 42vh; }
.cm-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.cm-novideo { height: 100%; display: grid; place-items: center; font-size: 48px; background: var(--surface-soft); }
.cm-side { min-height: 0; overflow-y: auto; padding: 10px 16px 8px; display: flex; flex-direction: column; }
.cm-top { display: flex; align-items: center; gap: 8px; }
.cm-count { font-size: 15px; color: var(--tomato); white-space: nowrap; }
.cm-title { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-close { flex: none; border: 0; background: var(--surface); border-radius: 999px; width: 38px; height: 38px; font-size: 17px; cursor: pointer; }
.cm-dots { display: flex; gap: 3px; margin: 6px 0 0; }
.cm-dots i { flex: 1; height: 4px; border-radius: 99px; background: var(--line); }
.cm-dots i.is-done { background: #b7aea3; } .cm-dots i.is-now { background: var(--tomato); }
.cm-step { margin: 10px 0; font-size: clamp(19px, 5.2vw, 24px); line-height: 1.6; font-weight: 700; color: var(--ink); }
.cm-uses { margin-top: auto; padding: 8px 12px; border-radius: 14px; background: #fff7e8; }
.cm-uses-head { margin: 0 0 4px; font-size: 12.5px; font-weight: 800; color: #7a5a1c; display: flex; gap: 8px; align-items: center; }
.cm-list, .cm-list ul { list-style: none; margin: 0; padding: 0; }
.cm-list li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 16px; border-bottom: 1px dashed #efdcb8; }
.cm-list li:last-child { border-bottom: 0; }
.cm-list li b { white-space: nowrap; }
.cm-list li.cm-group { display: block; }
.cm-list li.cm-group > p { margin: 4px 0 0; font-size: 13px; font-weight: 800; color: #7a5a1c; }
.cm-uses.is-all .ing-group { background: #fff; }
.cm-foot { border-top: 1px solid var(--line); background: var(--bg, #fffaf3); }
.cm-nav { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
.cm-nav button { min-height: 64px; font-size: 18px; font-weight: 800; border-radius: 18px; box-shadow: 0 3px 8px rgba(0,0,0,.08); transition: transform .08s ease, filter .08s ease; }
.cm-nav button:active { transform: scale(0.96); filter: brightness(0.95); }
.cm-nav button[disabled] { opacity: 0.35; pointer-events: none; }
.cm-nav .cm-next-btn { font-size: 19px; }
.cm-loop { border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 0 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--ink); }
.cm-loop[aria-pressed="true"] { border-color: var(--tomato); color: var(--tomato); }
/* 横長の画面（スマホ横持ち・パソコン・タブレット）：左に動画｜右に手順と材料 */
@media (orientation: landscape) {
  #cook-mode { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); grid-template-rows: 1fr auto; }
  .cm-video, .cm-video.is-shorts { grid-row: 1 / 3; aspect-ratio: auto; height: 100vh; height: 100dvh; max-height: none; }
  .cm-side { grid-column: 2; }
  .cm-foot { grid-column: 2; }
  body.cook-mode-open #cook-timer-bar { left: 8px; right: auto; width: calc(60% - 16px); max-width: 520px; bottom: 8px; margin: 0; }
}
/* スマホの横持ち（背が低い）：文字とボタンを詰める */
@media (orientation: landscape) and (max-height: 600px) {
  #cook-mode { grid-template-columns: 58% 1fr; }
  body.cook-mode-open #cook-timer-bar { width: calc(58% - 16px); }
  .cm-nav button { white-space: nowrap; }
  .cm-nav { padding: 4px 8px 8px; }
  .cm-nav button { min-height: 44px; font-size: 14px; }
  .cm-step { font-size: 18px; margin: 6px 0; }
  .cm-list li { font-size: 14px; }
}
/* パソコン・タブレット（広い横長）：手順を大きく */
@media (orientation: landscape) and (min-height: 601px) {
  .cm-side { padding: 18px 24px 12px; }
  .cm-step { font-size: clamp(22px, 2vw, 30px); }
  .cm-list li { font-size: 18px; }
  .cm-nav { padding: 10px 24px 16px; }
}

/* 🎙️ 声で操作 */
.cm-voice { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.cm-voice-btn { flex: none; height: 38px; padding: 0 12px; border: 1.5px solid var(--tomato); background: var(--surface); color: var(--tomato); border-radius: 999px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: all .15s ease; }
.cm-voice-btn[aria-pressed="true"], .cm-voice-btn.is-active { background: var(--tomato); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tomato) 30%, transparent); animation: cm-pulse 1.8s infinite; }
@keyframes cm-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tomato) 30%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tomato) 15%, transparent); }
}

/* ✋ 手の形で操作 */
.cook-mode-cta { display: grid; justify-items: end; gap: 2px; flex: none; }
.cook-mode-cta small { font-size: 11px; color: var(--muted); }
.cm-video { position: relative; }
.cm-hand { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.cm-hand-btn { flex: none; height: 38px; padding: 0 12px; border: 1.5px solid var(--tomato); background: var(--surface); color: var(--tomato); border-radius: 999px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.cm-hand-btn[aria-pressed="true"] { background: var(--tomato); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tomato) 30%, transparent); animation: hg-glow 1.6s infinite; }
@keyframes hg-glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--tomato) 12%, transparent); } }
.cm-nav.no-loop { grid-template-columns: 1fr 1.6fr; }
/* 動画のないレシピ：動画の場所に料理の写真 */
.cm-video { overflow: hidden; }
.cm-novideo { position: absolute; inset: 0; overflow: hidden; }
.cm-novideo .cm-photo { width: 100% !important; height: 100% !important; max-width: none; margin: 0; height: 100%; object-fit: cover; border-radius: 0; display: block; aspect-ratio: auto; }
.cm-novideo span.cm-photo { background-size: cover; background-position: center; }
/* はじめて料理モードを開いた時の説明（1回だけ） */
.cm-coach { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(30, 24, 20, .55); animation: fd-in .25s ease-out both; }
.cc-card { width: min(100%, 380px); max-height: 100%; overflow-y: auto; padding: 18px 18px 12px; border-radius: 22px; background: var(--bg, #fffaf3); box-shadow: 0 12px 40px rgba(0,0,0,.3); display: grid; gap: 8px; text-align: center; }
.cc-kicker { margin: 0; font-size: 12px; font-weight: 800; color: var(--muted); }
.cc-card h3 { margin: 0; font-size: 20px; }
.cc-signs { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc-signs li { display: grid; gap: 2px; padding: 10px 4px; border-radius: 16px; background: #fff0e8; }
.cc-signs b { font-size: 34px; line-height: 1.1; }
.cc-signs span { font-size: 14px; font-weight: 800; color: var(--tomato); }
.cc-signs small { font-size: 11px; color: var(--muted); }
.cc-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.cc-card .primary-button { min-height: 50px; }
.cc-card .secondary-button { min-height: 44px; }
.cc-card .text-button { font-size: 12.5px; }
/* 合図の絵文字：ボタンの中。✋ がオンの時ははっきり、オフの時は控えめに */
i.g { font-style: normal; margin-left: 4px; opacity: .45; }
#cook-mode.hand-on i.g { opacity: 1; }
#cook-mode .cook-timer-chip i.g { margin-left: 2px; }
#cook-mode .is-seen { position: relative; overflow: hidden; outline: 3px solid var(--tomato); outline-offset: 1px; }
#cook-mode .is-seen::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--hold, 0) * 100%); background: #2b2825; transition: width .1s linear; }
.cm-cam { position: absolute; right: 8px; bottom: 8px; width: 84px; height: 112px; object-fit: cover; border-radius: 12px; border: 2px solid #fff; transform: scaleX(-1); box-shadow: 0 4px 12px rgba(0,0,0,.3); z-index: 2; background: #222; }
.hg-flash { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; padding: 12px 22px; border-radius: 20px; background: rgba(0,0,0,.72); color: #fff; font-size: 26px; font-weight: 800; white-space: nowrap; animation: hg-pop .9s ease both; pointer-events: none; }
@keyframes hg-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; } }
/* 縦持ち（スマホホルダーに縦置き）：上に動画、真ん中に手順と材料、下に合図と ◀▶ */
@media (orientation: portrait) {
  .cm-video { max-height: 38vh; }
  body.cook-mode-open #cook-timer-bar { top: calc(8px + env(safe-area-inset-top)); bottom: auto; }
  .cm-video.is-shorts { height: 38vh; }
  .cm-cam { width: 64px; height: 86px; }
  .cm-step { font-size: clamp(20px, 5.6vw, 26px); }
}

/* よはく：余白にこっそり住んでいる。文字やボタンに重ねず、ゆっくりゆれる（動きを減らす設定では止める） */
.yohaku { display: block; width: 64px; height: 64px; object-fit: contain; pointer-events: none; user-select: none; animation: yh-float 3.6s ease-in-out infinite; }
@keyframes yh-float { 50% { transform: translateY(-3px) rotate(-2deg); } }
.empty-state .yohaku { width: 96px; height: 96px; margin: 8px auto 16px; }
.yohaku-tile { display: grid; place-items: center; background: var(--surface-soft); }
.yohaku-tile .yohaku { width: 72%; height: 72%; }
/* 今週のカレンダー：見出しの右の余白から、日付のすきまにひょっこり（高さは取らない） */
@keyframes yh-pop { from { transform: translateY(40%) scaleY(.7); opacity: 0; } to { transform: none; opacity: 1; } }
/* まとめて評価：右下で、もじもじ待つ */
.rv-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 4px; }
.rv-foot .yohaku-wait { width: 56px; height: 56px; flex: none; }
/* わかってきたこと：右上の余白で両手をひろげる */
.insight-card { position: relative; }
.ic-yohaku { position: absolute; right: 8px; top: -10px; width: 52px; height: 52px; }
.insight-card h3 { padding-right: 56px; }
/* 作った時のXP：上でうれしそうに */
.xp-yohaku { width: 56px; height: 56px; margin: 0 auto 2px; }
/* レシピの最後：右下の余白で手をふる */
.yohaku-corner { display: flex; justify-content: flex-end; margin: 24px 8px 0; }
.yohaku-wave { transform-origin: 50% 90%; animation: yh-wave 2.8s ease-in-out infinite; }
@keyframes yh-wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } 90% { transform: rotate(-3deg); } }
.cc-yohaku { width: 88px; height: 88px; margin: -6px auto 0; }
@media (prefers-reduced-motion: reduce) { .yohaku { animation: none !important; } }
.empty-state { grid-column: 1 / -1; }

/* ===== 2026-09-29 スマホ確認の直し ===== */
/* ⏰ タイマー：左上から小さな札を順に並べる（作る画面は見出しの下、料理モードは動画の左上） */
#cook-timer-bar, body.cook-mode-open #cook-timer-bar { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 60px); left: 8px; right: auto; bottom: auto; width: auto; max-width: calc(100% - 16px); margin: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; z-index: 60; }
body.cook-mode-open #cook-timer-bar { top: calc(env(safe-area-inset-top, 0px) + 8px); max-width: calc(100% - 128px); z-index: 90; }
.ctb-item { display: inline-flex; align-items: center; gap: 0; padding: 0; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.ctb-item .ctb-main { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px; margin: 0; border: 0; border-radius: 999px; background: none; color: #fff; font: inherit; cursor: pointer; }
.ctb-item .ctb-time { font-size: 15px; min-width: 0; }
.ctb-item .ctb-label { flex: none; max-width: 7.5em; font-size: 12px; opacity: .9; }
.ctb-item .ctb-sub { margin: 3px 3px 3px 0; padding: 4px 9px; border-radius: 999px; font-size: 12px; }
.ctb-item.is-done .ctb-label { font-size: 13px; }
/* 🍳 料理モード：「✕ 終わる」は動画の右上に、はっきり */
.cm-exit { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); right: 8px; z-index: 95; border: 0; border-radius: 999px; padding: 9px 14px; background: rgba(30, 24, 20, .82); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.28); }
@media (orientation: landscape) { .cm-exit { right: auto; left: calc(60% - 8px); transform: translateX(-100%); } }
@media (orientation: landscape) and (max-height: 600px) { .cm-exit { left: calc(58% - 8px); } }
/* 前へ・次へ の2つだけ（くり返すボタンはなし・いつもその手順をくり返す） */
.cm-nav, .cm-nav.no-loop { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.cm-nav button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; padding-right: 8px; }
/* ✋ 見せている間：ボタンが光り、ふちを一周する線で「あとどれくらい」 */
#cook-mode .is-seen { position: relative; overflow: visible; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tomato) 30%, transparent), 0 0 20px color-mix(in srgb, var(--tomato) 60%, transparent); }
#cook-mode .is-seen::after { content: ""; position: absolute; inset: -6px; left: -6px; bottom: -6px; width: auto; height: auto; padding: 3px; border-radius: 999px; background: conic-gradient(from -90deg, var(--tomato) calc(var(--hold, 0) * 360deg), transparent 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: none; }
/* 今週のカレンダー：見出しの下に線を引き、よはくはその線の上に手をのせる（すきまを作らない） */
/* 買い物：直近の1つを元に戻す（画面の下） */
.shop-undo { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; align-items: center; gap: 8px; width: min(calc(100% - 32px), 420px); padding: 8px 8px 8px 14px; border-radius: 16px; background: #2b2825; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 14px; animation: fd-in .2s ease-out both; }
.shop-undo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-undo button { flex: none; border: 0; border-radius: 10px; padding: 7px 10px; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.shop-undo .shop-undo-x { background: none; padding: 7px 6px; opacity: .7; }
/* 🧂 常備品：買い物リストの中でも見られる */
.pantry-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pantry-chip { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.pantry-chip::after { content: " ✓"; color: #3f7a35; font-weight: 800; }
.shop-pantry .text-button { font-size: 13px; }
.shop-undo-space { height: 64px; }

/* ---- 💬 わが家のごはん方針（talk-ui.js・APP_MAP §37） ---- */
.talk-card h2 { margin: 6px 0 14px; font-size: 21px; line-height: 1.4; }
.talk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.talk-meta .tip { margin-left: auto; }
.talk-picks { margin-bottom: 8px; }
.talk-bubble { margin: 14px 0 18px; padding: 14px 16px; border-radius: 18px 18px 18px 4px; background: #fff1ec; font-size: 17px; font-weight: 700; line-height: 1.6; }
.talk-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 6px; }
.talk-yesno > * { min-height: 48px; }
.talk-skip { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 4px 0; }
.talk-skip .text-button { min-height: 44px; }
.talk-note { margin: 10px 0 4px; }
.talk-note summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--muted); }
.talk-note textarea { width: 100%; resize: vertical; }
.talk-note p { margin: 4px 0 0; }
.talk-items { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.talk-item { display: grid; gap: 8px; padding: 10px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); }
.talk-item p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.talk-item small { color: var(--muted); font-size: 12px; font-weight: 700; }
.talk-item.is-confirmed { border-color: var(--tomato); background: #fff7f3; }
.talk-item.is-confirmed small { color: var(--sage-dark); }
.talk-item.is-rejected p { color: var(--muted); text-decoration: line-through; }
.talk-item-actions { display: flex; gap: 8px; }
.talk-item-actions .chip-button { min-height: 44px; flex: 1; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.talk-item-actions .chip-button[aria-pressed="true"] { border-color: var(--tomato); background: #fff1ec; color: var(--sage-dark); }
.talk-locked { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.talk-locked li { padding: 4px 10px; border-radius: 999px; background: var(--surface-soft); font-size: 13px; font-weight: 700; }
.talk-answers { margin: 10px 0; }
.talk-answers summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.talk-answers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.talk-answers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.talk-answers li span { grid-column: 1 / -1; color: var(--muted); }
.talk-answers li .link-inline { min-height: 44px; padding: 0 8px; }
.talk-dish { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0 0 8px; }
.talk-dish .dish-tile { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; }
.talk-dish strong { display: block; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.talk-dish small { color: var(--muted); font-weight: 700; }
.talk-why { margin: 0 0 8px; padding-left: 1.2em; display: grid; gap: 4px; font-size: 14px; line-height: 1.5; }
.todo-row.has-x { grid-template-columns: 24px minmax(0, 1fr) auto 32px; }
.todo-x { width: 32px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.danger-text { color: #b3402a; }

/* ---- 初回設定の整理（2026-09-30）：方針の会話を初回の中に・最後は実際の中身 ---- */
.funnel-talk { display: grid; gap: 10px; }
.funnel-talk > .funnel-parts { padding: 0 4px; }
.funnel-result { list-style: none; width: 100%; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; text-align: left; }
.funnel-result li { padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }

/* ---- 方針の深掘り・反応・見える化（PR 2b・2026-09-30） ---- */
.talk-react { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 10px; }
.talk-react > span { width: 100%; color: var(--muted); font-size: 13px; font-weight: 700; }
.talk-react .chip-button { min-height: 44px; padding: 4px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.talk-said, .talk-history { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.talk-said li, .talk-history li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.talk-said li span, .talk-history li span, .talk-said li small, .talk-history li small { color: var(--muted); }
.talk-said li b { font-size: 15px; }

/* ---- 方針の共有範囲・家族の方針・晩ごはんタイプ（PR 2c・2026-09-30） ---- */
.talk-share { display: grid; gap: 6px; margin: 0 0 10px; padding: 10px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); }
.talk-share p { margin: 0; display: grid; gap: 2px; font-size: 14px; overflow-wrap: anywhere; }
.talk-share p small { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.5; }
.talk-share .talk-yesno { margin: 2px 0 6px; }
.talk-share .chip-button, .talk-type-open .chip-button { min-height: 44px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.talk-share .chip-button[aria-pressed="true"] { border-color: var(--tomato); background: #fff1ec; color: var(--sage-dark); }
.talk-share-state { font-weight: 700; color: var(--sage-dark); }
.talk-type-open { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.talk-type-open > * { flex: 1; min-height: 44px; }
.talk-card[data-stage="type"] .cook-type-card { margin: 0 auto 10px; }

/* ---- 動画を取り込めない理由・埋め込み再生ができない動画（2026-10-01） ---- */
.read-reason { margin: 8px 0 0; }
.video-open { display: grid; gap: 2px; justify-items: center; padding: 18px 12px; border-radius: 16px; background: #1f1b18; color: #fff; font-weight: 800; text-decoration: none; text-align: center; min-height: 44px; }
.video-open small { color: #e9ded3; font-weight: 700; font-size: 12px; }

/* ---- 献立のリズム：週の始まり・作る曜日・買い物の日（PR 5a） ---- */
.rhythm-days { display: grid; gap: 6px; margin: 10px 0 4px; }
.rhythm-days p { margin: 4px 0 0; }
.rhythm-week { display: flex; flex-wrap: wrap; gap: 6px; }
.rhythm-week .chip-button { min-width: 44px; min-height: 44px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rhythm-week .chip-button[aria-pressed="true"] { border-color: var(--tomato); background: #fff1ec; color: var(--sage-dark); }

/* ---- 残っている食材・献立を変えた時の買い物の差分（PR 5b） ---- */
.leftover-panel { margin: 0 0 10px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); overflow: hidden; }
.leftover-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; user-select: none; }
.leftover-summary::-webkit-details-marker { display: none; }
.leftover-summary .quick-sub { margin: 0; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.leftover-badge { padding: 1px 8px; border-radius: 999px; background: #fff1ec; color: var(--sage-dark); font-size: 11.5px; font-weight: 800; border: 1px solid var(--tomato); }
.leftover-toggle { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.leftover-panel[open] .leftover-summary { padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.leftover-body { display: grid; gap: 8px; padding: 8px 12px 12px; }
.leftover-lead { margin: 0; }
.leftover-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.leftover-chips .chip-button { min-height: 44px; padding: 4px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.leftover-chips .chip-button[aria-pressed="true"] { border-color: var(--tomato); background: #fff1ec; color: var(--sage-dark); }
.leftover-hint { color: var(--sage-dark); font-weight: 700; }
.shop-diff { position: relative; display: grid; gap: 4px; margin: 0 0 12px; padding: 12px 44px 12px 12px; border-radius: 16px; background: #fff7e8; border: 1.5px solid #f2d9a6; font-size: 14px; overflow-wrap: anywhere; }
.shop-diff p { margin: 0; }
.shop-diff .todo-x { position: absolute; top: 4px; right: 4px; }

/* ---- 傷みやすい食材の「その前に買うと安心」・あとで買う（PR 5c） ---- */
.shop-line:has(.later-hint) { flex-wrap: wrap; row-gap: 2px; }
.shop-line small.later-hint { flex: 1 1 100%; white-space: normal; overflow: visible; color: #9a5b00; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.shopping-inline.later-btn { min-width: 52px; font-size: 13px; }
/* 同じ親（料理名）の作り方の数（APP_MAP §48）。押すと料理名で探す。 */
button.tile-variants { justify-self: start; margin: 2px 0 0; padding: 1px 8px; border: 1.5px solid var(--line, #efe4d6); border-radius: 999px; background: var(--surface, #fffdf8); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
/* レシピの詳細：親（料理名）と定番フォルダの統合枠（APP_MAP §48）。 */
.dish-group-box { margin: 8px 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-soft); border: 1px solid var(--line); display: grid; gap: 8px; }
.dish-group-box .parent-line, .dish-group-box .folder-line { margin: 0; padding: 0; background: none; border-radius: 0; }
.dish-group-box .parent-line + .folder-line { padding-top: 8px; border-top: 1px dashed var(--line); }
.parent-line { margin: 8px 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-soft); display: grid; gap: 6px; }
.parent-line p { margin: 0; }
.parent-line .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.auto-dish-section { margin-top: 14px; display: grid; gap: 8px; }
.auto-dish-section > p { margin: 0; }
.auto-dish-card { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.auto-dish-card .folder-card.is-static { padding: 0; border: 0; background: none; cursor: default; }
.auto-dish-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.auto-dish-actions button { min-height: 36px; padding: 4px 12px; font-size: 13px; }

/* 覚えやすく書き直した手順（AI。APP_MAP §49）：元の手順は各手順の下に小さく「動画では」 */
.guide-badge { color: var(--muted); }
.cooking-steps.has-guide details.guide-src { margin-top: 4px; font-size: 0.78rem; color: var(--muted); }
.cooking-steps.has-guide details.guide-src summary { cursor: pointer; list-style: none; display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; }
.cooking-steps.has-guide details.guide-src summary::-webkit-details-marker { display: none; }
.cooking-steps.has-guide details.guide-src summary::after { content: " ▾"; }
.cooking-steps.has-guide details.guide-src[open] summary::after { content: " ▴"; }
.cooking-steps.has-guide ol.guide-orig { margin: 6px 0 2px; padding-left: 1.6em; list-style: decimal; }
.cooking-steps.has-guide ol.guide-orig li { display: list-item; padding: 0; margin: 2px 0; border: 0; line-height: 1.5; }
.cooking-steps.has-guide .guide-key { margin-right: 0.15em; color: var(--sage-dark); }
.cooking-steps.has-guide .guide-key::after { content: "："; }

/* 新しい版があります（入力中・料理モードの間は自動で読み込み直さない。app.js checkAppUpdate） */
.update-bar { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #fffaf3; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.12); font-size: 14px; }
.update-bar span { display: flex; flex-direction: column; gap: 2px; }
.update-bar small { color: var(--muted); font-size: 12px; }
.update-bar .primary-button { padding: 8px 16px; min-height: 44px; white-space: nowrap; }

/* 添え物・主食リマインド（提案6） */
.plan-staple-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; }
.staple-tip { background: #fff4e5; color: #9a5b00; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; border: 1px solid #ffd8a8; white-space: nowrap; }
.plan-side-pill { background: #eef7ed; color: #27671f; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; border: 1px solid #c2e5bd; display: inline-flex; align-items: center; gap: 4px; }
.side-del { background: transparent; border: none; font-size: 11px; color: #777; cursor: pointer; padding: 0 2px; margin-left: 2px; }
.side-fold { display: inline-block; font-size: 11px; }
.side-fold summary { color: var(--accent, #e25c34); cursor: pointer; font-weight: 700; list-style: none; user-select: none; }
.side-fold summary::-webkit-details-marker { display: none; }
.side-fold[open] summary { margin-bottom: 4px; }
.side-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.side-chip { background: #fff; border: 1px solid #d0d7de; border-radius: 12px; padding: 2px 8px; font-size: 11px; color: #333; cursor: pointer; transition: background 0.15s; }
.side-chip:active { background: #eee; }
.cooking-staple-alert { background: #fff8ee; border: 1px solid #ffd8a8; border-radius: 10px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.csa-icon { font-size: 22px; flex-shrink: 0; }
.csa-text strong { display: block; font-size: 13px; color: #9a5b00; }
.cooking-side-box { background: #f3f9f1; border: 1px solid #c8e6c4; border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.cooking-side-box b { color: #27671f; font-size: 13px; }
.cm-rice-alert { background: #fff8ee; border: 1px solid #f2d19f; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; color: #8a5300; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-rice-icon { font-size: 16px; }
.cm-side-tag { color: #27671f; background: #eef7ed; border-radius: 4px; padding: 1px 6px; font-size: 12px; }
.shop-rice-tip { background: #fff9f0; border: 1px dashed #f0ca8c; border-radius: 8px; padding: 8px 12px; margin: 8px 0 12px; font-size: 12px; color: #8a5814; display: flex; align-items: center; gap: 8px; }

/* 料理モード内：動画ループ位置のワンタップ微調整バー */
.cm-time-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 10px; margin-bottom: 10px; border-radius: 10px; background: rgba(255, 248, 238, 0.9); border: 1px solid #f0dfc4; font-size: 12.5px; }
.cm-time-range { font-weight: 700; color: #6e5233; white-space: nowrap; }
.cm-time-btns { display: inline-flex; align-items: center; gap: 6px; }
.cm-time-btn { min-height: 34px; padding: 4px 10px; border-radius: 999px; border: 1px solid #dcc5a3; background: #fff; color: #4a3a28; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cm-time-btn:active { background: #f5ebd9; }
.cm-time-btn.cm-time-here { border-color: #e0a53a; background: #fff4db; color: #8a5a00; }

/* 食後・翌日の1タップ周期フィードバック＆定番図鑑の成長実感（提案10） */
.tonight-quick-rate { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-soft); border: 1px solid var(--line); display: grid; gap: 8px; }
.tonight-quick-rate.is-done { background: #fff8ee; border-color: #f0dfc4; gap: 4px; }
.qr-head, .qr-done-line { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.qr-edit { font-size: 12.5px; padding: 2px 6px; min-height: 30px; }
.qr-chips .rv-chip { transition: transform 0.12s ease, background 0.15s ease; }
.qr-chips .rv-chip:active { transform: scale(0.93); }
.qr-growth { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #2f7d55; }
.qr-growth.is-staple { color: #b86b00; }
.todo-row.is-rate-row { grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
.todo-rate-body { display: grid; gap: 6px; }
.todo-rate-body p { margin: 0; }
.staple-rank { display: inline-flex; align-items: center; padding: 1px 7px; margin-left: 4px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #fff4e0; color: #9a5b00; border: 1px solid #f0d090; vertical-align: 1px; }
.staple-rank.is-silver { background: #eef6ff; color: #2b5c8f; border-color: #b8d4f2; }
.staple-rank.is-gold { background: linear-gradient(90deg, #fff3c4, #ffe082); color: #7a4a00; border-color: #e6b83a; }
.staple-candidates { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); display: grid; gap: 6px; }
.staple-card.is-growing .staple-candidates { margin-top: 0; padding-top: 0; border-top: 0; }
.staple-cand-head { margin: 0; font-size: 13px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.staple-list.is-cand li { opacity: 0.92; }

/* データ保護ステータス＆軽量バックアップ導線（提案11） */
.data-protection-card { display: grid; gap: 8px; padding: 14px 16px; margin-bottom: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.data-protection-card.is-safe { border-color: #b7dfc5; background: #f6fbf7; }
.data-protection-card.is-local { border-color: #f0d090; background: #fffaf0; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14.5px; }
.dp-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #fff3d6; color: #8a5300; border: 1px solid #f0d090; }
.dp-badge.is-safe { background: #e6f5ec; color: #1f6b3b; border-color: #b7dfc5; }
.dp-badge.is-local { background: #ffeed9; color: #9a4b00; border-color: #f2c48d; }
.dp-sub { margin: 0; line-height: 1.45; }
.dp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; background: var(--surface-soft); color: var(--muted); border: 1px solid var(--line); }
.dp-pill.is-on { background: #eef8f1; color: #1f6b3b; border-color: #bfe3cb; font-weight: 700; }
.dp-actions { margin-top: 2px; }
.todo-row.is-backup-row { position: relative; padding-right: 36px; }
.todo-row.is-backup-row .todo-x { position: absolute; top: 6px; right: 6px; }

/* 週間プランの「ざっくり栄養・気分バランス」1行サマリー（提案12） */
.plan-balance-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 12px; margin: 6px 0 10px; border-radius: 12px; background: var(--surface-soft); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink); }
.pb-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 12px; background: #fff; border: 1px solid var(--line); white-space: nowrap; }
.pb-veg { background: #eef7ed; color: #27671f; border-color: #c2e5bd; }
.pb-veg.is-low { background: #fff8ee; color: #9a5b00; border-color: #f0d090; }
.pb-mood { color: var(--muted); font-size: 12px; }

/* 読み込み失敗の案内文字を、正方形・横長・小さい枠でも切り取らない。 */
.dish-tile.dish-load-failed, .recipe-thumb.dish-load-failed {
  background-color: #fff7ed;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.sync-save-panel { padding: 8px 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.sync-save-panel p { margin: 4px 0; font-size: 13px; }
.sync-plan-choice { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--surface-soft); }
.sync-plan-choice button { white-space: normal; text-align: left; min-height: 44px; }

/* 献立のリスト（2026-10-28 のユーザーの判断）：1行＝写真（動画のサムネイルと同じ16:9・黒い帯は切り落とす）＋日付の1行・料理名・ボタン。
   買い物のひとかたまり（3日など）が1画面に入る高さに。リズムの時は、ひとかたまりを1ページにして横にスライド。 */
.plan-list .plan-card.is-dish, .plan-list .plan-card.is-past { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 14px; box-shadow: 0 3px 10px rgba(90, 60, 30, 0.05); }
.plan-list .plan-card.is-dish .plan-photo, .plan-list .plan-card.is-past .plan-photo { position: relative; display: block; width: 100%; min-height: 0; align-self: start; }
.plan-list .plan-card.is-dish .plan-photo .dish-tile, .plan-list .plan-card.is-past .plan-photo .dish-tile { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.plan-list .plan-card.is-dish .plan-body, .plan-list .plan-card.is-past .plan-body { position: static; gap: 1px; padding: 6px 8px 6px 10px; }
.plan-list .plan-card .plan-date { font-size: 11px; }
.plan-list .plan-card.is-dish .plan-title, .plan-list .plan-card.is-past .plan-title { font-size: 14px; line-height: 1.3; padding-right: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plan-list .plan-card.is-dish .plan-note { padding-right: 0; font-size: 11px; }
.plan-list .plan-card.is-dish .plan-controls, .plan-list .plan-card.is-past .plan-controls { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; margin: 3px 0 0; }
.plan-list .plan-card.is-dish .plan-controls .plan-staple-note { flex: 1 1 auto; margin: 0; gap: 4px; font-size: 11px; }
.plan-list .plan-card.is-dish .plan-icon, .plan-list .plan-card.is-past .plan-icon { min-height: 32px; padding: 0 10px; font-size: 12px; }
.plan-list .plan-card.is-dish .plan-controls .plan-more-btn { width: 32px; height: 32px; }
.plan-list .plan-card.is-dish .plan-icon-label { display: inline; }
.plan-list .plan-card.is-dish .plan-swap { display: inline-flex; align-items: center; gap: 3px; }
/* 食べた日：✓ と評価 */
.plan-list .plan-card.is-past { background: var(--surface-soft); }
.plan-list .plan-card.is-past .plan-photo .dish-tile { filter: saturate(0.85); }
.past-check { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tomato); color: #fff; font-style: normal; font-size: 12px; font-weight: 900; }
.plan-rating { margin: 2px 0 0; font-size: 12px; font-weight: 700; }
.plan-list .plan-card.is-off-row { grid-template-columns: 42% minmax(0, 1fr); }
.plan-list .plan-card.is-off-row .plan-photo .dish-tile { aspect-ratio: 16 / 9; min-height: 0; font-size: 22px; }
/* ページ（横スライド） */
.plan-pages { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
.plan-pages::-webkit-scrollbar { display: none; }
.plan-page { display: grid; align-content: start; gap: 8px; scroll-snap-align: start; min-width: 0; }
.plan-page .block-head { margin: 0; }
.plan-page .block-foot { margin-top: 2px; }
.plan-dots { display: flex; justify-content: center; gap: 6px; margin: 0 0 8px; }
.plan-dot { min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; }
.plan-dot[aria-pressed="true"] { background: var(--tomato); border-color: var(--tomato); color: #fff; }

/* 好きな味：料理名の写真12枚（taste-ui.js renderDishPickGrid）。3列で1画面に収める。 */
.dp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; }
.dp-tile { position: relative; display: grid; gap: 4px; padding: 0 0 6px; border: 2px solid transparent; border-radius: 14px; background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; overflow: hidden; box-shadow: 0 2px 8px rgba(40, 25, 15, .08); }
.dp-photo { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface-soft); overflow: hidden; }
.dp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fcf9ee; }
.dp-emoji { font-size: 30px; line-height: 1; }
.dp-name { padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center; }
.dp-tile .pick-check { top: 5px; right: 5px; width: 22px; height: 22px; }
.dp-tile[aria-pressed="true"] { border-color: var(--tomato); }
.dp-tile[aria-pressed="true"] .pick-check { background: var(--tomato); }
.dp-tile[aria-pressed="true"] .pick-check::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.persona-likes .dp-emoji { display: grid; place-items: center; aspect-ratio: 1 / 1; font-size: 34px; }

/* レシピの画面：上の ⋯ と「🗓 献立に入れる」（daily-ui.js renderRecipeDetail）。 */
.detail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.detail-top .detail-more { position: relative; }
.detail-top .detail-more .plan-more-menu { right: 0; left: auto; min-width: 240px; z-index: 20; }
.detail-place { margin: 12px 0 8px; }
.detail-actions:empty { display: none; }
/* 「◯◯を、いつ？」：下から出る日の一覧。 */
.place-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.place-dim { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(40, 30, 20, .45); cursor: pointer; }
.place-card { position: relative; width: 100%; max-width: 560px; max-height: 80vh; overflow: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--surface); box-shadow: 0 -8px 30px rgba(0, 0, 0, .15); }
.place-card h3 { margin: 0 0 4px; font-size: 18px; }
.place-days { display: grid; gap: 8px; margin: 10px 0 6px; }
.place-day { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.place-day span { display: grid; gap: 2px; font-size: 15px; font-weight: 700; }
.place-day small { font-size: 12px; font-weight: 400; color: var(--muted); }
.place-day .place-unused { color: var(--sage-dark); }
.place-day b { flex: none; color: var(--tomato); font-size: 13px; }
.place-day.is-same, .place-day.is-off { cursor: default; background: var(--surface-soft); }
.place-day.is-off span { color: var(--muted); }

/* レシピタブ（2026-10-28 の整理：案①②）。タブ2つ・気分のボタン1行・好きな料理から・写真の一覧。 */
.recipe-tabs { display: flex; margin: 10px 0; padding: 4px; border-radius: 999px; background: var(--surface-soft); }
.recipe-tabs .chip-tab { flex: 1; min-height: 40px; border: 0; background: transparent; color: var(--muted); }
.recipe-tabs .chip-tab[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.recipe-tabs .chip-tab[aria-pressed="true"] small { color: var(--muted); }
.quick-filters { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 8px; padding: 0 16px 4px; scrollbar-width: none; }
.quick-filters::-webkit-scrollbar { display: none; }
.quick-chip, .quick-more { flex: 0 0 auto; white-space: nowrap; }
.quick-more { color: var(--tomato); }
.recipe-section { margin: 12px 0 8px; font-size: 15px; }
.recipe-section small { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.recipe-section-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pick-dish-row { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px 6px; padding: 0 16px 4px; scrollbar-width: none; }
.pick-dish-row::-webkit-scrollbar { display: none; }
.pick-dish { flex: 0 0 120px; display: grid; gap: 2px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.pick-dish img, .pick-dish .dish-tile, .pick-dish-empty { width: 120px; height: 90px; aspect-ratio: auto; object-fit: cover; border-radius: 14px; background: var(--surface-soft); }
.pick-dish-empty { display: grid; place-items: center; font-size: 28px; }
.pick-dish b { font-size: 13px; line-height: 1.3; }
.pick-dish small { color: var(--muted); font-size: 12px; }
.tile-heart span { font-size: 18px; line-height: 1; }
.recipe-note { margin: 10px 0; }
/* ＋（レシピを追加）の画面の、動画の保存のしかた。 */
.save-steps { margin: 4px 0 10px; padding-left: 20px; font-size: 14px; line-height: 1.7; }
.paste-big { margin: 4px 0 6px; }
.or-line { margin: 10px 0 4px; text-align: center; }