/* うめのレシピ。テーマとぶつからないよう .ume- を必ず付ける。 */

.ume-recipe {
  --ume-ink: #2f2a26;
  --ume-sub: #7b7168;
  --ume-line: #e6ded4;
  --ume-bg: #fdfbf7;
  --ume-accent: #b5651d;
  --ume-chip: #f3ece2;
  color: var(--ume-ink);
  line-height: 1.8;
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem;
}

@media (prefers-color-scheme: dark) {
  .ume-recipe {
    --ume-ink: #ece5dc;
    --ume-sub: #a89c8f;
    --ume-line: #3b3530;
    --ume-bg: #211d1a;
    --ume-accent: #e2a86b;
    --ume-chip: #2e2823;
  }
}

/* ------------------------------------------------------------ 見出し */

.ume-recipe .ume-title {
  font-size: 1.6rem;
  line-height: 1.4;
  margin: 0 0 .3rem;
}

.ume-recipe .ume-headline {
  color: var(--ume-sub);
  margin: 0 0 .8rem;
  font-size: .95rem;
}

.ume-recipe .ume-h2 {
  font-size: 1.05rem;
  margin: 0 0 .6rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--ume-line);
}

.ume-recipe .ume-serving {
  font-size: .8rem;
  font-weight: normal;
  color: var(--ume-sub);
  margin-left: .4rem;
}

/* ------------------------------------------------------------ チップ */

.ume-recipe .ume-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
}

.ume-recipe .ume-chip {
  display: inline-block;
  padding: .2rem .7rem;
  border: 1px solid var(--ume-line);
  border-radius: 999px;
  background: var(--ume-chip);
  color: var(--ume-sub);
  font-size: .82rem;
  line-height: 1.7;
  text-decoration: none;
  cursor: pointer;
}

.ume-recipe .ume-chip:hover { color: var(--ume-accent); }

.ume-recipe .ume-chip.is-on {
  background: var(--ume-accent);
  border-color: var(--ume-accent);
  color: #fff;
}

/* ------------------------------------------------------- 材料と作り方 */

.ume-recipe .ume-cols { display: grid; gap: 1.6rem; }

@media (min-width: 720px) {
  .ume-recipe .ume-cols { grid-template-columns: 1fr 1.4fr; gap: 2rem; }
}

.ume-recipe .ume-block { margin-bottom: 1.6rem; }

.ume-recipe .ume-list { list-style: none; margin: 0; padding: 0; }

.ume-recipe .ume-item {
  padding: .35rem 0;
  border-bottom: 1px dotted var(--ume-line);
  font-size: .95rem;
}

.ume-recipe .ume-group {
  padding: .7rem 0 .2rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ume-accent);
}

.ume-recipe .ume-steplist { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.ume-recipe .ume-steplist li {
  display: flex;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px dotted var(--ume-line);
  font-size: .95rem;
}

.ume-recipe .ume-mk {
  flex: 0 0 auto;
  color: var(--ume-accent);
  font-weight: 600;
}

.ume-recipe .ume-empty { color: var(--ume-sub); font-size: .9rem; }

.ume-recipe .ume-photo img { max-width: 100%; height: auto; border-radius: 8px; }

/* ------------------------------------------------------------ 動画リンク */

.ume-recipe .ume-video {
  margin: 1.6rem 0;
  padding: .9rem 1rem;
  background: var(--ume-chip);
  border-radius: 8px;
  font-size: .95rem;
}

.ume-recipe .ume-video a { color: var(--ume-accent); font-weight: 600; }
.ume-recipe .ume-date { color: var(--ume-sub); font-size: .82rem; margin-left: .6rem; }

/* ------------------------------------------------------------ 検索 */

.ume-recipe .ume-searchbar { position: relative; margin-bottom: 1rem; }

.ume-recipe .ume-q {
  width: 100%;
  box-sizing: border-box;
  padding: .8rem 2.4rem .8rem 1rem;
  font-size: 1rem;
  color: var(--ume-ink);
  background: var(--ume-bg);
  border: 2px solid var(--ume-line);
  border-radius: 999px;
}

.ume-recipe .ume-q:focus { outline: none; border-color: var(--ume-accent); }

.ume-recipe .ume-clear {
  position: absolute;
  right: .7rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--ume-sub);
  font-size: 1.2rem;
  cursor: pointer;
}

.ume-recipe .ume-axis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: .5rem;
}

.ume-recipe .ume-axis-label {
  flex: 0 0 4.5em;
  font-size: .8rem;
  color: var(--ume-sub);
}

.ume-recipe .ume-axis-terms { display: flex; flex-wrap: wrap; gap: .35rem; }

.ume-recipe .ume-count {
  margin: 1rem 0 .5rem;
  font-size: .85rem;
  color: var(--ume-sub);
}

/* ------------------------------------------------------------ 一覧 */

.ume-recipe .ume-results,
.ume-recipe .ume-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

@media (min-width: 560px) {
  .ume-recipe .ume-results,
  .ume-recipe .ume-cards { grid-template-columns: 1fr 1fr; }
}

.ume-recipe .ume-results a,
.ume-recipe .ume-cards a {
  display: block;
  padding: .8rem 1rem;
  background: var(--ume-bg);
  border: 1px solid var(--ume-line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ume-ink);
}

.ume-recipe .ume-results a:hover,
.ume-recipe .ume-cards a:hover { border-color: var(--ume-accent); }

.ume-recipe .ume-card-title { display: block; font-weight: 600; }

.ume-recipe .ume-card-head,
.ume-recipe .ume-card-vid {
  display: block;
  font-size: .8rem;
  color: var(--ume-sub);
  margin-top: .2rem;
}

.ume-recipe .ume-noresult { color: var(--ume-sub); font-size: .9rem; }