:root {
  --rice: #f8f3e9;
  --paper: #fffdf8;
  --wood: #774c32;
  --wood-soft: #a87958;
  --ink: #3f392f;
  --green: #7f9170;
  --green-light: #dfe6d7;
  --red: #b85f4a;
  --line: #ded2c0;
  --nav-height: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--rice); font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "PingFang SC", sans-serif; line-height: 1.6; letter-spacing: 0; padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 20px); }
button, a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.paper-grain { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .3; background-image: url("/assets/images/backgrounds/paper-grain.svg"); }

.recipes-hero { position: relative; min-height: 190px; overflow: hidden; padding: max(26px, env(safe-area-inset-top)) 22px 24px; background: var(--paper); border-bottom: 1px solid var(--line); }
.brand-mark { position: relative; z-index: 2; display: block; width: 62px; height: 62px; border: 1px solid var(--line); border-radius: 50%; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.recipes-hero__title { position: relative; z-index: 1; margin-top: 12px; }
.recipes-hero__title p { margin: 0; color: var(--green); font-family: Georgia, "Yu Mincho", serif; font-size: 10px; letter-spacing: 2px; }
.recipes-hero__title h1 { margin: 1px 0 0; color: var(--wood); font-family: "Yu Mincho", "Hiragino Mincho ProN", "Songti SC", serif; font-size: 31px; font-weight: 600; }
.recipes-hero__title span { position: absolute; left: 145px; bottom: 5px; color: var(--wood-soft); font-family: "Yu Mincho", serif; font-size: 10px; white-space: nowrap; }
.recipes-hero__seal { position: absolute; z-index: 2; top: 30px; right: 23px; width: 36px; padding: 5px 0; color: var(--red); border: 1px solid var(--red); text-align: center; font-family: "Yu Mincho", serif; font-size: 12px; line-height: 1.3; transform: rotate(3deg); }
.recipes-hero__sketch { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.recipes-hero__sketch path { fill: none; stroke: var(--wood-soft); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .18; }

main, .recipes-footer { width: min(100%, 760px); margin: 0 auto; }
.filter-section, .recipe-section { padding: 30px 20px 8px; }
.section-label { display: flex; align-items: center; gap: 10px; }
.section-label > span { display: grid; place-items: center; width: 31px; height: 31px; color: var(--red); border: 1px solid rgba(184,95,74,.45); border-radius: 50%; font-family: Georgia, serif; font-size: 10px; }
.section-label p { margin: 0; color: var(--green); font-family: Georgia, "Yu Mincho", serif; font-size: 9px; letter-spacing: 1.4px; }
.section-label h2 { margin: 0; color: var(--wood); font-family: "Yu Mincho", "Songti SC", serif; font-size: 21px; font-weight: 600; }
.section-label small { margin-left: auto; color: #8d8174; font-size: 10px; }

.filter-list { display: flex; gap: 8px; overflow-x: auto; margin: 18px -20px 0; padding: 2px 20px 10px; scrollbar-width: none; }
.filter-list::-webkit-scrollbar { display: none; }
.tag-filter-list { display: flex; gap: 7px; overflow-x: auto; margin: 4px -20px 0; padding: 0 20px 7px; scrollbar-width: none; }
.tag-filter-list::-webkit-scrollbar { display: none; }
.tag-filter-button { flex: 0 0 auto; min-height: 29px; padding: 0 11px; color: var(--green); background: transparent; border: 1px dashed rgba(127,145,112,.6); border-radius: 15px; font: inherit; font-size: 10px; }
.tag-filter-button.is-active { color: var(--paper); background: var(--green); border-style: solid; }
.filter-button { flex: 0 0 auto; min-width: 58px; height: 35px; padding: 0 15px; color: #74695d; background: rgba(255,253,248,.76); border: 1px solid var(--line); border-radius: 18px; font: inherit; font-size: 12px; cursor: pointer; }
.filter-button.is-active { color: var(--paper); background: var(--wood); border-color: var(--wood); }
.recipe-tools { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 9px; margin-top: 10px; }
.search-field, .sort-field { position: relative; display: flex; align-items: center; height: 43px; background: rgba(255,253,248,.82); border: 1px solid var(--line); border-radius: 4px; }
.search-field { padding: 0 12px 0 38px; }
.search-field__icon { position: absolute; left: 14px; top: 13px; width: 14px; height: 14px; border: 1.5px solid var(--wood-soft); border-radius: 50%; }
.search-field__icon::after { content: ""; position: absolute; width: 6px; height: 1px; right: -5px; bottom: -3px; background: var(--wood-soft); transform: rotate(45deg); }
.search-field input, .sort-field select { min-width: 0; width: 100%; color: var(--ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: 12px; }
.search-field input::placeholder { color: #a29689; }
.sort-field { padding: 0 8px; }
.sort-field > span { flex: 0 0 auto; margin-right: 3px; color: #9a8e80; font-size: 9px; }
.sort-field select { appearance: none; padding-right: 13px; background-image: linear-gradient(45deg, transparent 50%, var(--wood-soft) 50%), linear-gradient(135deg, var(--wood-soft) 50%, transparent 50%); background-position: calc(100% - 7px) 50%, calc(100% - 3px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }

.recipe-section { padding-top: 32px; }
.recipe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin-top: 20px; }
.dish-card { min-width: 0; overflow: hidden; color: inherit; background: rgba(255,253,248,.78); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; box-shadow: 0 6px 18px rgba(89,66,43,.05); }
.dish-card__image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #d9b894; }
.dish-card__content { padding: 11px 11px 14px; }
.dish-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #908375; font-size: 9px; }
.dish-card__meta span { color: var(--green); }
.dish-card h3 { margin: 4px 0 6px; color: var(--wood); font-family: "Yu Mincho", "Songti SC", serif; font-size: 17px; font-weight: 600; }
.dish-card p { margin: 0; color: #746b61; font-size: 11px; line-height: 1.65; }
.empty-state { margin: 42px 0; color: #897d70; text-align: center; font-family: "Yu Mincho", serif; font-size: 13px; }

.recipe-detail { padding: 28px 20px 48px; }
.detail-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px; color: var(--wood-soft); text-decoration: none; font-size: 12px; }
.detail-back::before { content: "←"; font-size: 16px; }
.detail-visual { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #d8c0a3; border: 1px solid var(--line); border-radius: 6px; }
.detail-heading { padding: 22px 2px 18px; border-bottom: 1px solid var(--line); }
.detail-heading small { color: var(--green); font-size: 10px; letter-spacing: 1px; }
.detail-heading h2 { margin: 3px 0 8px; color: var(--wood); font-family: "Yu Mincho", serif; font-size: 29px; font-weight: 600; }
.detail-heading p { margin: 0; color: #6e655a; font-size: 13px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.detail-tags span { color: var(--green); font-size: 9px; }
.detail-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border: 1px solid var(--line); background: rgba(255,253,248,.55); }
.detail-facts div { padding: 13px 15px; }
.detail-facts div + div { border-left: 1px solid var(--line); }
.detail-facts span { display: block; color: #988b7c; font-size: 9px; }
.detail-facts strong { color: var(--wood); font-family: "Yu Mincho", serif; font-size: 14px; font-weight: 500; }
.detail-story { margin-top: 27px; }
.detail-section-title { margin: 0 0 10px; color: var(--wood); font-family: "Yu Mincho", serif; font-size: 19px; font-weight: 600; }
.detail-section-title small { display: block; color: var(--green); font-family: Georgia, serif; font-size: 9px; font-weight: 400; letter-spacing: 1.4px; }
.detail-story p { margin: 0; padding: 17px 18px; color: #6f665c; background: var(--green-light); border-left: 3px solid var(--green); font-family: "Yu Mincho", serif; font-size: 13px; line-height: 1.9; }
.detail-notes { margin-top: 26px; }
.detail-notes p { margin: 0; padding: 14px 16px; color: #6f665c; background: var(--paper); border: 1px solid var(--line); font-size: 12px; line-height: 1.8; }
.tutorial-button { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: 18px; padding: 0 17px; color: var(--paper); background: var(--wood); border-radius: 4px; text-decoration: none; font-size: 13px; }
.tutorial-button::after { content: "↗"; font-size: 16px; }
.detail-gallery { margin-top: 30px; }
.gallery-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 9px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-grid::-webkit-scrollbar { display: none; }
.gallery-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; scroll-snap-align: start; }
.gallery-hint { margin: 4px 0 0; color: #928678; text-align: right; font-size: 9px; }
.detail-missing { padding: 45px 10px; color: #776c61; text-align: center; }
.detail-missing h2 { color: var(--wood); font-family: "Yu Mincho", serif; }
.recipe-detail-hero { min-height: 174px; }
.order-today-button { display: flex; align-items: center; justify-content: space-between; min-height: 50px; margin-top: 20px; padding: 0 17px; color: var(--wood); background: var(--paper); border: 1px solid var(--wood-soft); border-radius: 4px; text-decoration: none; font-size: 13px; }
.order-today-button span { display: grid; place-items: center; width: 22px; height: 22px; color: var(--paper); background: var(--red); border-radius: 50%; font-size: 17px; line-height: 1; }
.edit-recipe-button { display: flex; align-items: center; justify-content: space-between; min-height: 46px; margin-top: 10px; padding: 0 17px; color: var(--green); border: 1px solid rgba(127,145,112,.6); border-radius: 4px; text-decoration: none; font-size: 12px; }
.favorite-button { width: 100%; min-height: 46px; margin-top: 10px; color: var(--red); background: var(--paper); border: 1px solid rgba(184,95,74,.45); border-radius: 4px; font: inherit; font-size: 12px; }
.tutorial-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.tutorial-links .tutorial-button { margin-top: 0; min-width: 0; font-size: 11px; }

.recipes-footer { padding: 48px 20px 40px; text-align: center; color: var(--wood-soft); }
.recipes-footer::before { content: "◆"; display: block; margin-bottom: 8px; color: var(--red); font-size: 8px; }
.recipes-footer span { font-family: Georgia, "Yu Mincho", serif; font-size: 11px; letter-spacing: 1px; }
.recipes-footer p { margin: 3px 0 0; font-family: "Yu Mincho", serif; font-size: 12px; }

.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--nav-height) + env(safe-area-inset-bottom)); padding: 7px 12px env(safe-area-inset-bottom); background: rgba(255,253,248,.96); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #8a8074; text-decoration: none; font-size: 10px; }
.nav-icon { display: grid; place-items: center; width: 28px; height: 28px; color: inherit; font-family: Arial, sans-serif; font-size: 23px; line-height: 1; }
.nav-item.is-active { color: var(--wood); font-weight: 600; }
.nav-item--order .nav-icon { width: 38px; height: 38px; margin-top: -20px; color: white; background: var(--red); border: 3px solid var(--paper); border-radius: 50%; box-shadow: 0 3px 8px rgba(120,72,55,.22); }

@media (min-width: 620px) {
  .recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bottom-nav { left: 50%; right: auto; width: min(760px, 100%); transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }