:root {
  color-scheme: light;
  --bg: #eef2ed;
  --phone: #fbf8f1;
  --paper: #fffdf8;
  --ink: #262724;
  --muted: #747a71;
  --line: #e0ded3;
  --mint: #2f7f67;
  --mint-dark: #1f5c4b;
  --coral: #d66f5c;
  --amber: #a56d30;
  --red: #b94b50;
  --sage: #e4efe8;
  --butter: #f5df9e;
  --shadow: 0 18px 46px rgba(40, 42, 37, 0.14);
}

* {
  box-sizing: border-box;
}

/* hidden 属性は display 指定より確実に優先（.update-overlay 等の display:grid に負けないように） */
[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 255, 255, 0.95) 0 18%, transparent 42%),
    radial-gradient(circle at 16% 18%, rgba(245, 223, 158, 0.22), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(214, 111, 92, 0.14), transparent 28%),
    linear-gradient(180deg, #eef5ef 0%, #fff8ee 50%, #edf5ef 100%);
  color: var(--ink);
  font-family: "Yu Gothic UI", "Hiragino Sans", Meiryo, system-ui, sans-serif;
}

button,
input,
select {
  font: inherit;
}

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

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  background:
    linear-gradient(90deg, rgba(47, 127, 103, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #fffaf0 0%, #f7efe5 55%, #e9f1ec 100%);
  background-size: 28px 28px, auto;
  color: var(--mint-dark);
  transition: opacity 360ms ease, visibility 360ms ease;
}

.splash-screen.hide {
  opacity: 0;
  visibility: hidden;
}

.splash-screen p {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 900;
}

.spice-jar {
  position: relative;
  width: 86px;
  height: 82px;
  border: 5px solid var(--mint-dark);
  border-radius: 8px;
  background: #fffdf8;
  transform: rotate(-18deg);
  animation: jarTip 1500ms ease-in-out both;
}

.spice-jar::before {
  content: "";
  position: absolute;
  left: 12px;
  top: -18px;
  width: 52px;
  height: 18px;
  border-radius: 8px 8px 3px 3px;
  background: var(--coral);
}

.spice-jar span {
  position: absolute;
  left: 18px;
  right: 18px;
  height: 6px;
  border-radius: 999px;
  background: var(--butter);
}

.spice-jar span:nth-child(1) {
  top: 24px;
}

.spice-jar span:nth-child(2) {
  top: 39px;
  background: #d66f5c;
}

.spice-jar span:nth-child(3) {
  top: 54px;
}

.spice-drops {
  position: relative;
  width: 120px;
  height: 24px;
  margin-top: -18px;
}

.spice-drops i {
  position: absolute;
  top: -52px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  opacity: 0;
  animation: spiceFall 1500ms ease-in both;
}

.spice-drops i:nth-child(1) { left: 12px; animation-delay: 160ms; }
.spice-drops i:nth-child(2) { left: 30px; animation-delay: 260ms; background: var(--coral); }
.spice-drops i:nth-child(3) { left: 49px; animation-delay: 360ms; }
.spice-drops i:nth-child(4) { left: 66px; animation-delay: 460ms; background: var(--mint); }
.spice-drops i:nth-child(5) { left: 84px; animation-delay: 560ms; }
.spice-drops i:nth-child(6) { left: 101px; animation-delay: 660ms; background: var(--coral); }

@keyframes jarTip {
  0% { transform: rotate(-3deg) translateY(6px); }
  36% { transform: rotate(-24deg) translateY(0); }
  72% { transform: rotate(-18deg); }
  100% { transform: rotate(-14deg); }
}

@keyframes spiceFall {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(82px) scale(1.1); }
}

.app-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px 14px 112px;
  background:
    linear-gradient(180deg, rgba(255, 249, 238, 0.96) 0%, rgba(251, 248, 241, 0.94) 44%, rgba(240, 246, 241, 0.96) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.74), 0 24px 80px rgba(39, 44, 39, 0.16);
}

.hero {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 228, 0.82)),
    linear-gradient(160deg, rgba(47, 127, 103, 0.16), rgba(214, 111, 92, 0.12));
  box-shadow: var(--shadow);
}

.app-topbar {
  align-items: center;
  padding: 12px 14px;
  box-shadow: 0 10px 26px rgba(40, 42, 37, 0.08);
}

.hero-copy {
  min-width: 0;
}

/* 上部の「しおりん」＋一言（全画面共通の挨拶／状態表示） */
.hero { position: relative; }
.hero-mascot {
  flex: 0 0 auto;
  width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* タップで しおりん がぴょこっと跳ねる */
.hero-mascot.hop .mascot-img { animation: shiorinHop 620ms cubic-bezier(0.3, 0.9, 0.3, 1.2); }
@keyframes shiorinHop {
  0% { transform: translateY(0) scale(1); }
  28% { transform: translateY(-9px) scale(1.04, 0.97); }
  55% { transform: translateY(0) scale(0.98, 1.02); }
  72% { transform: translateY(-3px) scale(1); }
  100% { transform: translateY(0) scale(1); }
}
/* しおりんの一言（吹き出し） */
.hero-bubble {
  position: absolute;
  left: 6px;
  bottom: calc(100% - 14px);
  z-index: 6;
  max-width: 70%;
  padding: 5px 10px;
  border-radius: 12px 12px 12px 4px;
  background: #fffef9;
  border: 1px solid rgba(106, 86, 70, 0.18);
  box-shadow: 0 6px 14px rgba(45, 35, 24, 0.12);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.hero-bubble.show { animation: shiorinBubble 1700ms ease forwards; }
@keyframes shiorinBubble {
  0% { opacity: 0; transform: translateY(6px) scale(0.85); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  82% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(1); }
}
.hero-mascot .mascot-svg {
  width: 52px;
  height: 52px;
}
.hero-mascot .mascot-img {
  width: 52px;
  height: 62px;            /* 高さ固定。表情(PNG)で縦横比が違っても段差が出ないように */
  object-fit: contain;     /* 箱の中で比率を保って収める（歪まない・はみ出さない） */
  object-position: center bottom;
  display: block;
}
.hero-greeting {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}

.hero-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--mint-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

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

h1 {
  margin-bottom: 5px;
  color: rgba(38, 39, 36, 0.82);
  font-size: 1.48rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.hero-text {
  max-width: 13rem;
  margin-bottom: 0;
  color: rgba(38, 39, 36, 0.72);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.25;
}

.mini-shelf {
  position: relative;
  display: flex;
  align-items: end;
  gap: 7px;
  height: 30px;
  width: 126px;
  margin-top: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  touch-action: manipulation;
}

.mini-shelf:focus-visible {
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(47, 127, 103, 0.13);
}

.mini-shelf::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -4px;
  width: 62px;
  height: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 70% 46%, rgba(255, 211, 83, 0.78) 0 5px, transparent 6px),
    linear-gradient(90deg, rgba(245, 186, 76, 0.72), rgba(214, 111, 92, 0.42));
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px) scaleX(0.35);
  transform-origin: center;
}

.mini-shelf::after {
  content: "";
  position: absolute;
  left: 0;
  right: 4px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: rgba(165, 109, 48, 0.22);
}

.mini-jar {
  position: relative;
  width: 20px;
  height: 25px;
  border: 2px solid rgba(31, 92, 75, 0.55);
  border-radius: 6px 6px 5px 5px;
  background: #fffdf8;
  box-shadow: 0 5px 12px rgba(45, 35, 24, 0.08);
}

.mini-jar::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -6px;
  width: 10px;
  height: 6px;
  border-radius: 4px 4px 2px 2px;
  background: currentColor;
}

.mini-jar::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 6px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.72;
}

.jar-mint {
  color: var(--mint);
  height: 24px;
}

.jar-butter {
  color: var(--butter);
  height: 21px;
}

.jar-coral {
  color: var(--coral);
  height: 27px;
}

.jar-sage {
  color: #8bb6a3;
  height: 22px;
}

.mini-shelf.shelf-tap .mini-jar {
  animation: miniBottleTap 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.mini-shelf.shelf-tap .mini-jar:nth-child(2) {
  animation-delay: 24ms;
}

.mini-shelf.shelf-tap .mini-jar:nth-child(3) {
  animation-delay: 48ms;
}

.mini-shelf.shelf-spill .mini-jar {
  animation: miniBottleSpill 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.mini-shelf.shelf-spill .mini-jar:nth-child(3) {
  animation-duration: 720ms;
}

.mini-shelf.shelf-spill::before {
  animation: miniShelfSpill 2000ms ease-out both;
}

.notify-button {
  min-width: 58px;
  min-height: 38px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 246, 0.92));
  color: var(--mint-dark);
  box-shadow: 0 10px 22px rgba(45, 127, 111, 0.15), inset 0 -1px 0 rgba(31, 92, 75, 0.08);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
}

.notify-button.is-granted {
  color: #2f7f67;
  background: linear-gradient(180deg, #f7fff8, #e9f6ea);
  border-color: rgba(47, 127, 103, 0.18);
}

.notify-button.is-denied {
  color: #9a6b2f;
  background: linear-gradient(180deg, #fffaf0, #fff4df);
  border-color: rgba(195, 132, 58, 0.26);
}

.notify-button.is-unsupported {
  opacity: 0.58;
  cursor: not-allowed;
}

.bell-icon {
  position: relative;
  width: 14px;
  height: 15px;
  border: 2px solid var(--mint-dark);
  border-bottom: 0;
  border-radius: 9px 9px 4px 4px;
}

.bell-icon::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -4px;
  height: 5px;
  border-radius: 999px;
  background: var(--mint-dark);
}

.bell-icon::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: -8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--coral);
}

.notify-button:hover .bell-icon,
.notify-button:focus-visible .bell-icon {
  animation: bellRing 320ms ease-out both;
}

.menu-button {
  display: grid;
  gap: 4px;
  place-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(45, 127, 111, 0.18);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(45, 127, 111, 0.1);
}

.menu-button span {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: var(--mint-dark);
}

.notification-status {
  min-height: 22px;
  margin: 9px 4px 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 14px;
  position: relative;
  z-index: 1;
}

.status-strip div {
  min-height: 78px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  place-items: center;
  gap: 2px;
  padding: 9px 5px;
  border: 1px solid rgba(230, 221, 208, 0.86);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.9);
  box-shadow: 0 8px 20px rgba(45, 35, 24, 0.06);
  text-align: center;
}

/* 上部の集計をタップで該当画面へ。見た目は据え置き、押した時だけ軽く反応。 */
.status-strip div[data-metric] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}
.status-strip div[data-metric]:active {
  transform: scale(0.97);
}
.status-strip div[data-metric]:focus-visible {
  outline: 2px solid var(--mint-dark);
  outline-offset: 2px;
}

.metric-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-bottom: 3px;
  border-radius: 8px;
  background: rgba(228, 239, 232, 0.78);
  color: var(--mint-dark);
}

.metric-icon::before,
.metric-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.metric-cart::before {
  width: 13px;
  height: 10px;
  bottom: 7px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 2px 2px 4px 4px;
}

.metric-cart::after {
  width: 15px;
  height: 7px;
  top: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: skewX(-12deg);
}

.metric-clock {
  background: rgba(245, 223, 158, 0.68);
  color: var(--amber);
}

.metric-clock::before {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.metric-clock::after {
  width: 6px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(1px, -1px) rotate(-45deg);
}

.metric-check::before {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: rgba(47, 127, 103, 0.12);
}

.metric-check::after {
  width: 10px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.metric-box {
  background: rgba(214, 111, 92, 0.12);
  color: var(--coral);
}

.metric-box::before {
  width: 14px;
  height: 13px;
  bottom: 6px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.metric-box::after {
  width: 10px;
  height: 5px;
  top: 7px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

.status-strip strong {
  color: var(--mint-dark);
  font-size: 1.28rem;
  line-height: 1;
}

.status-strip span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.status-strip .metric-icon {
  color: var(--mint-dark);
  align-self: center;
}

.status-strip .metric-icon::before,
.status-strip .metric-icon::after {
  display: none;
}

.status-strip .metric-clock {
  color: var(--amber);
}

.status-strip .metric-check {
  color: var(--mint-dark);
}

.status-strip .metric-box {
  color: var(--coral);
}

.metric-svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entry-panel,
.list-panel,
.settings-panel,
.buy-panel,
.analysis-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 15px 38px rgba(45, 35, 24, 0.08);
  padding: 14px;
}

.settings-panel,
.buy-panel,
.analysis-panel {
  margin-bottom: 14px;
}

.app-view {
  display: none;
}

.app-view.active-view {
  display: block;
  animation: viewIn 200ms ease-out both;
}

.section-title,
.list-header {
  display: grid;
  gap: 12px;
  margin-bottom: 15px;
}

.home-section {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

/* 初回ホームのようこそ＋クイック追加 */
.home-welcome {
  text-align: center;
  padding: 24px 18px 22px;
  margin: 4px 0 14px;
  border: 1px solid var(--line, #e6e0d2);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf8, #fff);
}
.home-welcome-art { font-size: 2.4rem; line-height: 1; }
.home-welcome h3 { margin: 8px 0 6px; font-size: 1.15rem; font-weight: 900; color: #3f3a30; }
.home-welcome > p { margin: 0 auto 14px; max-width: 320px; font-size: 0.86rem; line-height: 1.6; color: #6b6557; }
.home-welcome .primary-button { width: auto; min-width: 210px; }
.home-welcome-quick-label { margin: 16px 0 8px; font-size: 0.78rem; font-weight: 800; color: #9a9588; }
.home-welcome-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hw-chip {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2ddcf;
  border-radius: 999px;
  background: #fff;
  color: #5b574c;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hw-chip:active { background: #f0f7f3; }

/* このアプリについて・FAQ（検索向けの説明。普段は折りたたみで目立たせない） */
.home-about {
  margin: 6px 0 18px;
  border: 1px solid var(--line, #e6e0d2);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.home-about > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 0.86rem;
  font-weight: 800;
  color: #6b6557;
  -webkit-tap-highlight-color: transparent;
}
.home-about > summary::-webkit-details-marker { display: none; }
.home-about > summary::after { content: "▾"; float: right; opacity: 0.6; }
.home-about[open] > summary::after { content: "▴"; }
.home-about-body {
  padding: 0 14px 14px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #6b6557;
}
.home-about-body h4 {
  margin: 12px 0 2px;
  font-size: 0.84rem;
  font-weight: 800;
  color: #4f4a40;
}
.home-about-body p { margin: 0; }
.about-guide {
  margin: 4px 0 2px;
  padding-left: 1.1em;
  display: grid;
  gap: 5px;
}
.about-guide li { line-height: 1.5; }
.about-guide strong { color: #4f4a40; }

.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-section-header h3 {
  margin-bottom: 0;
  font-size: 0.96rem;
}

.text-button {
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--mint-dark);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
  padding: 0;
}

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

.home-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.compact-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 11px;
  border: 1px solid rgba(224, 222, 211, 0.78);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #fff8ea);
  box-shadow: 0 8px 18px rgba(40, 42, 37, 0.05);
}

.compact-card.empty-compact {
  grid-template-columns: 1fr auto;
}

/* 空セクションは大きなカードではなく、余白を取らないさりげない1行で表示 */
.compact-empty-line {
  margin: 2px 0 0;
  padding: 8px 4px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.home-card-grid .compact-card {
  grid-template-columns: auto 1fr;
  align-content: stretch;
  min-height: 136px;
  padding: 14px;
  border-color: rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  background:
    radial-gradient(circle at right 14px top 12px, rgba(245, 223, 158, 0.68) 0 12px, transparent 13px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 247, 232, 0.92));
  box-shadow: 0 14px 34px rgba(45, 35, 24, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.home-card-grid .compact-card div {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.home-card-grid .compact-card strong {
  min-height: 2.55em;
  font-size: 0.96rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.home-card-grid .compact-card span {
  display: -webkit-box;
  min-height: 2.5em;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-card-grid .compact-card em {
  grid-column: 2;
  justify-self: start;
  align-self: end;
  margin-top: 12px;
}

.compact-illustration {
  position: relative;
  grid-row: 1 / 3;
  width: 34px;
  height: 44px;
  justify-self: center;
  align-self: center;
}

.compact-card strong {
  display: block;
  font-size: 0.94rem;
  line-height: 1.3;
}

.compact-card span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.compact-card em {
  border-radius: 999px;
  background: #f1e4bd;
  color: var(--mint-dark);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
  padding: 5px 8px;
  white-space: nowrap;
}

/* 危険度の色分け（そろそろ=黄 / 期限切れ=赤） */
.compact-card em.warning {
  background: #f6c453;
  color: #6b4d12;
}

.compact-card em.danger {
  background: #e0664f;
  color: #fff;
}

/* 買うもの：フィルタチップ（すべて / 未対応 / 買った / 買わない） */
.buy-filter {
  display: flex;
  gap: 6px;
  margin: 4px 0 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.buy-chip {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid #e2ddcf;
  border-radius: 999px;
  background: #fff;
  color: #8a8678;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.buy-chip i {
  font-style: normal;
  opacity: 0.7;
  margin-left: 2px;
}

.buy-chip.on {
  background: var(--mint-dark);
  border-color: var(--mint-dark);
  color: #fff;
}

.buy-section {
  margin-bottom: 14px;
}

.buy-sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 2px 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.buy-sub-count {
  color: var(--mint-dark);
}

/* 折りたたみ見出し（対応済み / 今週のおすすめ） */
.buy-collapse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(40, 42, 37, 0.06);
  -webkit-tap-highlight-color: transparent;
}

.buy-chev {
  color: #9a9788;
  transition: transform 180ms ease;
}

.buy-collapse-head[aria-expanded="true"] .buy-chev {
  transform: rotate(180deg);
}

/* 対応済みの1行 */
.buy-done-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}

.buy-done-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.buy-done-body strong {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.buy-done-result {
  font-size: 0.76rem;
  font-weight: 900;
}

.buy-done-result.bought { color: var(--mint-dark); }
.buy-done-result.skipped { color: #c0392b; }

.buy-undo {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid #e2ddcf;
  border-radius: 999px;
  background: #fff;
  color: #8a8678;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.buy-clear {
  display: block;
  margin: 10px auto 0;
  padding: 9px 16px;
  border: 1px solid rgba(185, 70, 70, 0.2);
  border-radius: 999px;
  background: rgba(185, 70, 70, 0.06);
  color: var(--red, #c0392b);
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

/* ホーム「期限が近いもの」のグループ見出し */
.compact-group-label {
  grid-column: 1 / -1;
  margin: 8px 2px 2px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.compact-group-label.danger { color: #c0392b; }
.compact-group-label.warning { color: #9a6a12; }

.compact-group-label:first-child { margin-top: 0; }

.learning-note {
  padding: 12px;
  border: 1px solid rgba(47, 127, 103, 0.2);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(228, 239, 232, 0.8), rgba(255, 248, 234, 0.82));
  color: var(--mint-dark);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.6;
}

.compact-title {
  margin-bottom: 10px;
}

h2 {
  margin-bottom: 0;
  font-size: 1.05rem;
  letter-spacing: 0;
}

form {
  display: grid;
  gap: 11px;
}

label,
.date-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.date-field {
  position: relative;
  margin: 0;
  border: 1px solid rgba(47, 127, 103, 0.13);
  border-radius: 16px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 248, 234, 0.72));
  box-shadow: 0 8px 22px rgba(53, 61, 51, 0.06);
}

.date-field legend {
  padding: 0;
  margin-bottom: 4px;
}

input,
select,
textarea {
  min-height: 52px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 0 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* 名前欄は <label> ではなく <div>（iOSがラベル「名前」を氏名欄と判定して
   連絡先バーを出すのを防ぐ）。label を外した分のレイアウトをここで再現。 */
.name-field {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

/* 名前欄は contenteditable な div（iOSの「連絡先を自動入力」バーを完全に出さないため）。
   見た目・挙動は通常のテキスト入力欄と同じになるよう整える。 */
#itemLabelInput {
  min-height: 52px;
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 0 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}
#itemLabelInput:focus {
  border-color: var(--mint, #2f7f67);
  box-shadow: 0 0 0 3px rgba(47, 127, 103, 0.18);
}
/* 空のときだけプレースホルダを表示（通常の input と同じ挙動） */
#itemLabelInput:empty::before {
  content: attr(data-placeholder);
  color: #9a9588;
  pointer-events: none;
}
/* スクロールバーは隠す（入力欄に見えるように） */
#itemLabelInput::-webkit-scrollbar { display: none; }

/* 追加フォームはコンパクトに（1画面に収まりやすく） */
#itemForm input,
#itemForm select { min-height: 42px; }
#itemForm #itemLabelInput { min-height: 42px; }
#itemForm textarea { min-height: 58px; }
#itemForm label { gap: 3px; }

.category-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -2px 0 2px;
  padding: 8px 12px;
  border: 1px solid rgba(47, 127, 103, 0.1);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(246, 250, 240, 0.94), rgba(255, 251, 240, 0.86));
  color: #6b6557;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.category-suggestion span {
  white-space: nowrap;
}

.category-suggestion strong {
  min-width: 0;
  color: var(--mint-dark, #2f7f67);
  font-size: 0.86rem;
  text-align: right;
}

.category-suggestion.is-manual strong::after {
  content: "（変更済み）";
  margin-left: 4px;
  color: #8a7c67;
  font-size: 0.72rem;
  font-weight: 800;
}

textarea {
  min-height: 118px;
  padding: 12px;
  resize: vertical;
  line-height: 1.5;
}

/* 賞味期限：ドラム式ホイール（年・月・日 一体／中央＝選択） */
.date-wheel-hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--mint-dark, #2f7f67);
}
.date-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 7px 13px;
  margin: 0 0 4px;
  border: 1px solid #e3dccd;
  border-radius: 12px;
  background: #fff;
  color: #3f3a30;
  font-size: 1rem;
  font-weight: 900;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.date-summary:disabled {
  opacity: 0.5;
  cursor: default;
}
.date-summary-caret {
  display: none;
}
.date-wheel {
  margin-top: 0;
}
.date-wheel[hidden] {
  display: none !important;
}
.no-printed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
.no-printed-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  justify-self: start;
  margin: 0;
  cursor: pointer;
}
.no-printed-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: #6b6557;
  pointer-events: none;
}
/* 追加時に「もう開けている」で登録するトグル＋開封日 */
.opened-field {
  margin: 0;
}
.opened-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: #6b6557;
}
.opened-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--mint-dark, #2f7f67);
}
.opened-date-wrap {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(47, 127, 103, 0.18);
  border-radius: 12px;
  background: rgba(140, 179, 156, 0.10);
  display: grid;
  gap: 4px;
}
.opened-date-wrap[hidden] {
  display: none;
}
.opened-date-label {
  display: grid;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted);
}
.opened-date-label input {
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid rgba(53, 61, 51, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.opened-hint {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
}
.no-printed-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--mint-dark, #2f7f67);
}
.date-field.no-date .date-wheel,
.date-field.no-date .date-summary {
  opacity: 0.4;
  pointer-events: none;
}
.date-field.date-picker-open {
  z-index: 12;
}
.after-open-field {
  border: none;
  padding: 0;
  margin: 0 0 4px;
}
.after-open-field legend {
  font-size: 0.9rem;
  font-weight: 900;
  color: #5b574c;
  padding: 0;
}
.after-open-hint {
  margin: 4px 0 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #6b6557;
  line-height: 1.4;
}
.after-open-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ao-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #e2ddcf;
  border-radius: 999px;
  background: #fff;
  color: #6b6557;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ao-chip.is-active {
  background: var(--mint-dark, #2f7f67);
  border-color: var(--mint-dark, #2f7f67);
  color: #fff;
}
.after-open-custom {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.after-open-custom[hidden] {
  display: none !important;
}
.after-open-custom-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
}
#afterOpenCustom {
  width: 120px;
  padding: 8px 10px;
  border: 1px solid #e2ddcf;
  border-radius: 10px;
  font-size: 0.9rem;
}
.after-open-custom-input #afterOpenCustom {
  width: 74px;
}
.after-open-custom-input span {
  color: #5f594d;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}
.after-open-custom small {
  color: #817866;
  font-size: 0.72rem;
  font-weight: 700;
}

.form-detail-settings {
  margin: 2px 0 4px;
  border: 1px solid rgba(153, 135, 101, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 251, 241, 0.95), rgba(248, 252, 243, 0.92));
  box-shadow: 0 8px 20px rgba(53, 61, 51, 0.05);
  overflow: hidden;
}

.form-detail-settings summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 9px 13px;
  color: #4f493d;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.form-detail-settings summary::-webkit-details-marker {
  display: none;
}

.form-detail-settings summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 12px;
  border-right: 2px solid rgba(47, 127, 103, 0.82);
  border-bottom: 2px solid rgba(47, 127, 103, 0.82);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.form-detail-settings[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.form-detail-settings summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.form-detail-settings summary strong {
  font-size: 0.9rem;
  font-weight: 900;
}

.form-detail-settings summary small {
  color: #817866;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
}

.detail-settings-body {
  display: grid;
  gap: 8px;
  padding: 0 13px 10px;
}

.detail-settings-body label {
  margin: 0;
}

.detail-settings-body .after-open-field {
  padding-top: 2px;
}

.detail-settings-body input,
.detail-settings-body select {
  min-height: 48px;
}

.date-wheel {
  position: relative;
  display: flex;
  gap: 0;
  height: 108px;
  margin-top: 4px;
  border: 1px solid #e3dccd;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  z-index: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform-origin: center;
}
.date-wheel:not([hidden]) {
  animation: inlineWheelOpen 160ms ease-out both;
}
.date-wheel::before {
  display: none;
}
.dw-band {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 36px;
  height: 36px;
  /* 中央＝選択中をはっきり見せる枠 */
  border: 1.5px solid rgba(47, 127, 103, 0.55);
  background: rgba(140, 179, 156, 0.22);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(47, 127, 103, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.dw-col + .dw-col {
  border-left: 1px solid #eee6d8;
}
.dw-col {
  flex: 1;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  text-align: center;
  padding: 36px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-user-select: none;
  user-select: none;
  /* 端の候補を淡く、中央（選択値）だけくっきり見せる */
  -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 30%, #000 70%, transparent 98%);
  mask-image: linear-gradient(to bottom, transparent 2%, #000 30%, #000 70%, transparent 98%);
}
.dw-col::-webkit-scrollbar {
  display: none;
}
.dw-col > div {
  height: 36px;
  line-height: 36px;
  scroll-snap-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: #6b6457;
}

@keyframes inlineWheelOpen {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 4px rgba(45, 127, 111, 0.14);
}

input.readonly-input,
#itemLabelInput.readonly-input {
  background: linear-gradient(180deg, rgba(246, 250, 240, 0.96), rgba(255, 251, 240, 0.9));
  border-color: rgba(47, 127, 103, 0.16);
  color: #4f493f;
  font-weight: 900;
  cursor: default;
}

input.readonly-input:focus,
#itemLabelInput.readonly-input:focus {
  border-color: rgba(47, 127, 103, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.rebuy-mode .name-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: -2px;
  padding: 8px 10px;
  border: 1px solid rgba(47, 127, 103, 0.12);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(248, 252, 247, 0.96), rgba(255, 251, 240, 0.88));
}

.rebuy-mode .name-field > span {
  margin: 0;
  color: #6d6558;
  font-size: 0.76rem;
  white-space: nowrap;
}

.rebuy-mode .name-field input,
.rebuy-mode .name-field #itemLabelInput {
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1rem;
}

.rebuy-mode .category-suggestion {
  margin-top: -4px;
}

.name-edit-link {
  justify-self: start;
  min-height: 0;
  margin: -7px 0 -2px 10px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--mint-dark, #2f7f67);
  font-size: 0.74rem;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}

.name-edit-link[hidden] {
  display: none !important;
}

.name-suggestions {
  display: none;
  gap: 6px;
  margin-top: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.name-suggestions::-webkit-scrollbar { display: none; }

.name-suggestions.active {
  display: flex;
}

.suggestion-chip {
  flex: 0 0 auto;
  min-height: 34px;
  max-width: 11em;
  border: 1px solid rgba(47, 127, 103, 0.18);
  border-radius: 999px;
  background: #eef6f0;
  color: var(--mint-dark);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  overflow: hidden;
  padding: 0 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestion-chip:active {
  transform: translateY(1px);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
}

.primary-button,
.secondary-button,
.danger-button,
.tab {
  min-height: 48px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 800;
}

.primary-button {
  margin-top: 2px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--mint), var(--mint-dark));
  color: white;
  box-shadow: 0 13px 26px rgba(45, 127, 111, 0.22);
}

/* 追加ボタンは「画面下に固定された不透明バー」にする。
   全幅の不透明背景なので、スクロールしても中身がボタンの脇から覗いて重なって見えない。 */
.form-footer {
  position: sticky;
  bottom: 0;
  z-index: 12;
  margin: 0 -14px;                 /* パネルの左右パディング(14px)を打ち消して全幅に */
  padding: 12px 14px calc(10px + env(safe-area-inset-bottom));
  background: #fffdf8;             /* パネルと同じ完全不透明色（下を完全に隠す） */
  border-top: 1px solid rgba(53, 61, 51, 0.10); /* くっきり区切る。ぼかし影は半透明帯になり透けるので使わない */
}
#saveItemButton {
  width: 100%;
  margin: 0;
}
/* キーボード表示中：下に余白を足して隠れたドラム等までスクロールで届くようにする。
   「追加する」バーは消さず、キーボードのすぐ上にせり上げて常に押せるようにする
   （入力 → そのまま追加。一度キーボードを閉じる手間をなくす）。 */
/* 実際にソフトキーボードが出ている時（.kb-real）だけ余白を足し、ボタンをせり上げる。
   iPadの外付けキーボード等で画面キーボードが無いケースでは持ち上げない（誤って浮くのを防ぐ）。 */
.kb-open.kb-real .form-sheet-panel {
  max-height: 100vh;
  padding-bottom: calc(var(--kb, 0px) + 220px);
  scroll-padding-bottom: calc(var(--kb, 0px) + 220px);
}
.kb-open.kb-real .form-footer {
  /* sticky のまま bottom をキーボード高さぶん持ち上げる（キーボードの真上に固定） */
  bottom: var(--kb, 0px);
}

.primary-button:active,
.notify-button:active,
.menu-button:active,
.tab:active,
.secondary-button:active,
.danger-button:active {
  transform: translateY(1px);
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f0eadf;
}

.filter-row {
  gap: 6px;
}

.swipe-hint {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(47, 127, 103, 0.18);
  border-radius: 8px;
  background: rgba(228, 239, 232, 0.72);
  color: var(--mint-dark);
}

.swipe-hint[hidden] {
  display: none;
}

.swipe-hint strong {
  font-size: 0.76rem;
  line-height: 1.35;
}

.swipe-hint button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.9);
  color: var(--mint-dark);
  cursor: pointer;
  font-weight: 900;
}

.tab {
  min-height: 40px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.tab.active {
  background: var(--paper);
  color: var(--mint-dark);
  box-shadow: 0 7px 16px rgba(45, 35, 24, 0.1);
}

.empty-state {
  display: none;
  padding: 16px 16px 18px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
  text-align: center;
}

.app-empty {
  min-height: 0;
  border: 1px dashed rgba(47, 127, 103, 0.22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(228, 239, 232, 0.72));
  box-shadow: 0 14px 34px rgba(45, 35, 24, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.app-empty::before {
  content: none;
}

.app-empty strong,
.app-empty span {
  display: block;
  max-width: 270px;
  margin-inline: auto;
}

.app-empty strong {
  margin-top: 8px;
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.45;
}

.app-empty span {
  margin-top: 7px;
  font-size: 0.87rem;
  line-height: 1.65;
}

.empty-illustration {
  display: block;
  width: min(96px, 36%);
  height: auto;
  margin: 0 auto 8px;
}

.empty-glow {
  fill: rgba(255, 244, 222, 0.88);
}

.empty-glow-green {
  fill: rgba(227, 241, 218, 0.9);
}

.empty-line {
  fill: none;
  stroke: rgba(143, 128, 102, 0.88);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty-soft-line {
  fill: none;
  stroke: rgba(164, 174, 158, 0.48);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty-fill-shelf {
  fill: #ead7b8;
}

.empty-fill-cream {
  fill: #fff9ef;
}

.empty-fill-glass {
  fill: rgba(249, 255, 250, 0.9);
}

.empty-fill-lid {
  fill: #e8efe2;
}

.empty-leaf {
  fill: #dcebd4;
  stroke: #78965d;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.item-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  padding: 15px;
  box-shadow: 0 12px 28px rgba(45, 35, 24, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  touch-action: pan-y;
}

.stock-compact .item-card {
  padding: 10px;
}

.stock-card::before,
.stock-card::after {
  position: absolute;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 82px;
  color: white;
  font-size: 0.78rem;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.stock-card::before {
  content: attr(data-swipe-right);
  left: 0;
  background:
    radial-gradient(circle at 22px 18px, rgba(245, 223, 158, 0.9) 0 5px, transparent 6px),
    linear-gradient(90deg, rgba(47, 127, 103, 0.92), rgba(47, 127, 103, 0));
}

.stock-card::after {
  content: attr(data-swipe-left);
  right: 0;
  background:
    radial-gradient(circle at calc(100% - 22px) 18px, rgba(255, 253, 248, 0.9) 0 5px, transparent 6px),
    linear-gradient(270deg, rgba(214, 111, 92, 0.94), rgba(214, 111, 92, 0));
}

.stock-card.swiping {
  box-shadow: 0 14px 28px rgba(45, 35, 24, 0.12);
  transition: none;
}

.stock-card.swiping.swipe-right::before,
.stock-card.swiping.swipe-left::after {
  opacity: 1;
}

.stock-card.swiping.swipe-commit-right::before,
.stock-card.swiping.swipe-commit-left::after {
  opacity: 1;
  filter: saturate(1.08);
}

.stock-card.swiping.swipe-commit-right,
.stock-card.swiping.swipe-commit-left {
  box-shadow:
    0 18px 34px rgba(45, 35, 24, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.stock-card.swiping .item-main,
.stock-card.swiping .item-note,
.stock-card.swiping .item-category,
.stock-card.swiping .item-dates,
.stock-card.swiping .item-actions {
  position: relative;
  z-index: 1;
  transform: translateX(var(--swipe-x, 0));
  transition: none;
}

.stock-card.swiping.swipe-commit-right .item-main,
.stock-card.swiping.swipe-commit-right .item-note,
.stock-card.swiping.swipe-commit-right .item-category,
.stock-card.swiping.swipe-commit-right .item-dates,
.stock-card.swiping.swipe-commit-right .item-actions,
.stock-card.swiping.swipe-commit-left .item-main,
.stock-card.swiping.swipe-commit-left .item-note,
.stock-card.swiping.swipe-commit-left .item-category,
.stock-card.swiping.swipe-commit-left .item-dates,
.stock-card.swiping.swipe-commit-left .item-actions {
  transform: translateX(var(--swipe-x, 0)) scale(0.985);
}

.opened-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 250, 245, 0.94));
  border-color: rgba(47, 127, 103, 0.2);
}

.item-card.action-done {
  animation: actionPop 260ms ease both;
}

.item-card.just-added {
  animation: cardAdded 520ms ease-out both;
}

.item-card.just-added .jar-icon {
  animation: jarAdded 520ms ease-out both;
}

.stock-card.opening-done .jar-lid,
.stock-card.opening-done .category-icon [class*="icon-lid"],
.stock-card.opening-done .milk-pack-icon [class*="icon-lid"] {
  transform-box: fill-box;
  transform-origin: 86% 92%;
  animation: lidPop 780ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.stock-card.opening-done {
  animation: openCardPop 780ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.stock-card.opening-done .jar-icon {
  animation: openBottleLift 780ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.stock-card.opening-done .jar-icon::before {
  animation: openBottleBurst 780ms ease-out both;
}

.stock-card.opening-done .jar-icon::after {
  animation: openBottleGlow 780ms ease-out both;
}

.stock-card.finished-done {
  animation: finishSink 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.stock-card.finished-done .jar-body::after {
  animation: finishCheck 720ms ease both;
}

.stock-card.finished-done .item-main,
.stock-card.finished-done .item-note,
.stock-card.finished-done .item-category,
.stock-card.finished-done .item-dates,
.stock-card.finished-done .item-actions {
  animation: finishContentSoftOut 720ms ease both;
}

.stock-card.bottle-wiggle .jar-icon {
  animation: bottleWiggle 330ms ease-out both;
}

.stock-card.bottle-spill .jar-icon {
  animation: bottleWiggle 480ms ease-out both;
}

.jar-icon::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: -4px;
  width: 25px;
  height: 7px;
  border-radius: 50%;
  background: rgba(245, 186, 76, 0.56);
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: center;
}

.jar-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 34px;
  height: 28px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.5);
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 253, 248, 0.96) 0 3px, transparent 4px),
    linear-gradient(90deg, transparent 0 45%, rgba(245, 223, 158, 0.94) 45% 55%, transparent 55% 100%),
    linear-gradient(34deg, transparent 0 45%, rgba(47, 127, 103, 0.5) 45% 55%, transparent 55% 100%),
    linear-gradient(-34deg, transparent 0 45%, rgba(214, 111, 92, 0.5) 45% 55%, transparent 55% 100%);
  border-radius: 999px;
}

.stock-card.bottle-spill .jar-icon::after {
  animation: tinySpill 980ms ease-out both;
}

.stock-compact .item-note,
.stock-compact .item-dates {
  display: none;
}

.stock-compact .item-actions {
  display: none;
}

.item-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}

.stock-card .item-main {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
}

.buy-card .item-main {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
}

.jar-icon {
  position: relative;
  width: 31px;
  height: 42px;
  justify-self: center;
  cursor: pointer;
  transform-origin: 50% 100%;
}

.category-icon-wrap {
  display: grid;
  place-items: center;
  color: var(--mint-dark);
}

.category-icon {
  width: 36px;
  height: 38px;
  overflow: visible;
}

.milk-pack-icon {
  width: 36px;
  height: 38px;
  overflow: visible;
}

/* ストック/買うもののカードだけ、商品アイコンを約1.3倍にして視認性UP。
   テキスト位置は変えず、アイコン列の幅も合わせて広げる（詳細・ホームの小アイコンは現状維持）。 */
.stock-card .item-main,
.buy-card .item-main {
  grid-template-columns: 52px minmax(0, 1fr) auto;
}
.stock-card .jar-icon,
.buy-card .jar-icon {
  width: 46px;
  height: 58px;
}
.stock-card .jar-icon > svg,
.buy-card .jar-icon > svg {
  width: 53px;
  height: 55px;
}

.compact-illustration .category-icon {
  width: 34px;
  height: 36px;
}

.compact-illustration .milk-pack-icon {
  width: 34px;
  height: 36px;
}

/* 新・調味料アイコン（condiment-icons.js のSVG）: コンテナに合わせてサイズ調整 */
.category-icon-wrap > svg {
  display: block;
  overflow: visible;
}
.compact-illustration.category-icon-wrap > svg {
  display: block;
}

.category-icon path,
.category-icon rect,
.category-icon ellipse,
.category-icon circle {
  fill: none;
  stroke: #5f5147;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-icon .icon-ground {
  fill: rgba(245, 226, 196, 0.78);
  stroke: none;
}

.category-icon .icon-glass {
  fill: rgba(255, 255, 249, 0.86);
}

.category-icon .icon-label {
  fill: #fff8ea;
  stroke: rgba(174, 137, 83, 0.82);
}

.category-icon .icon-liquid-dark {
  fill: #6a422f;
}

.category-icon .icon-liquid-soft {
  fill: #d4e4c9;
}

.category-icon .icon-liquid-gold {
  fill: #e5bd73;
}

.category-icon .icon-liquid-red {
  fill: #d86b58;
}

.category-icon .icon-liquid-yellow {
  fill: #f0cf7a;
}

.category-icon .icon-vinegar {
  fill: rgba(252, 248, 232, 0.88);
}

.category-icon .icon-cream,
.category-icon .icon-lid-cream {
  fill: #fff2c9;
}

.category-icon .icon-lid-red {
  fill: #d86b58;
}

.category-icon .icon-lid-gold {
  fill: #d6b172;
}

.category-icon .icon-lid-green {
  fill: #abc8ad;
}

.category-icon .icon-lid-brown {
  fill: #9b7657;
}

.category-icon .icon-lid-plain {
  fill: #fffaf0;
}

.category-icon .icon-mark {
  fill: none;
  stroke: rgba(104, 120, 94, 0.85);
}

.category-icon .icon-mark-fill {
  fill: #d86b58;
  stroke: rgba(104, 120, 94, 0.85);
}

.category-icon .icon-shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 2.4;
}

.category-soy {
  color: #6f432d;
}

.category-sauce {
  color: #8b5b3f;
}

.category-miso {
  color: #94652f;
}

.category-spice {
  color: #c05c4f;
}

.category-oil {
  color: #6d8e71;
}

.category-dairy {
  color: #6f93a2;
}

.category-other {
  color: #6f7a6b;
}

.compact-illustration .jar-lid,
.compact-illustration .jar-body {
  transform-origin: right bottom;
}

.jar-lid {
  position: absolute;
  left: 6px;
  top: 0;
  width: 19px;
  height: 8px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #e84234, #b82f2b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transform-origin: right bottom;
}

.opened-card .jar-lid {
  transform: translate(5px, -3px) rotate(22deg);
}

.opened-illustration .category-icon [class*="icon-lid"],
.opened-illustration .milk-pack-icon [class*="icon-lid"] {
  transform-box: fill-box;
  transform-origin: 86% 92%;
  transform: translate(5px, -3px) rotate(22deg);
}

.jar-body {
  position: absolute;
  left: 3px;
  bottom: 0;
  width: 25px;
  height: 35px;
  border: 1px solid rgba(47, 127, 103, 0.34);
  border-radius: 10px 10px 7px 7px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(180deg, #fffdf8 0%, #f9e9b4 52%, #e8c46d 100%);
  box-shadow: inset -5px 0 7px rgba(165, 109, 48, 0.12), 0 6px 13px rgba(45, 35, 24, 0.12);
}

.jar-body::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 12px;
  height: 8px;
  border-radius: 999px;
  background: rgba(214, 111, 92, 0.72);
}

.jar-body::after {
  content: "\2713";
  position: absolute;
  inset: 3px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: rgba(47, 127, 103, 0.9);
  color: white;
  font-size: 0.9rem;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.78);
  transition: opacity 180ms ease, transform 180ms ease;
}

.product-soy .jar-lid {
  left: 7px;
  top: 0;
  width: 18px;
  height: 8px;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #f0503d, #bd2c27);
}

.product-soy .jar-body {
  left: 5px;
  bottom: 0;
  width: 21px;
  height: 36px;
  border-color: rgba(90, 50, 28, 0.38);
  border-radius: 7px 7px 5px 5px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.38), transparent 28%),
    linear-gradient(180deg, #5a2516 0%, #3a160d 58%, #1e0d08 100%);
  box-shadow: inset -5px 0 8px rgba(0, 0, 0, 0.18), 0 6px 13px rgba(45, 35, 24, 0.14);
}

.product-soy .jar-body::before {
  left: 4px;
  right: 4px;
  top: 13px;
  height: 11px;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(226, 66, 52, 0.94), rgba(176, 42, 36, 0.96));
}

.product-mayo .jar-lid {
  left: 7px;
  top: 0;
  width: 17px;
  height: 7px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #e84234, #b82f2b);
}

.product-mayo .jar-body {
  left: 4px;
  bottom: 0;
  width: 24px;
  height: 37px;
  border: 1px solid rgba(195, 165, 100, 0.4);
  border-radius: 14px 14px 8px 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.68), transparent 36%),
    linear-gradient(180deg, rgba(255, 253, 232, 0.78) 0%, rgba(247, 224, 139, 0.5) 100%);
  box-shadow: inset -6px 0 8px rgba(173, 133, 42, 0.1), 0 6px 13px rgba(45, 35, 24, 0.1);
}

.product-mayo .jar-body::before {
  left: 8px;
  right: 8px;
  top: 11px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(244, 190, 84, 0.34);
}

.product-miso .jar-lid {
  left: 4px;
  top: 4px;
  width: 24px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9d6f42, #705034);
}

.product-miso .jar-body {
  left: 3px;
  bottom: 0;
  width: 26px;
  height: 31px;
  border-radius: 8px 8px 10px 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.38), transparent 32%),
    linear-gradient(180deg, #f2dfad, #c88d4d);
}

.item-main h3 {
  margin-bottom: 2px;
  font-size: 0.98rem;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.stock-summary {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
}

.item-note {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.item-category {
  margin: 8px 0 0 42px;
  color: var(--mint-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

.stock-compact .item-category {
  display: none;
}

.badge {
  align-self: start;
  border-radius: 999px;
  padding: 5px 8px;
  white-space: nowrap;
  background: var(--sage);
  color: var(--mint-dark);
  font-size: 0.7rem;
  font-weight: 900;
}

.card-badges {
  display: grid;
  gap: 5px;
  justify-items: end;
}

.state-label {
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(245, 223, 158, 0.55);
  color: var(--amber);
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.state-label.opened {
  background: rgba(47, 127, 103, 0.12);
  color: var(--mint-dark);
}

.badge.warning {
  background: #f6c453;
  color: #6b4d12;
}

.badge.danger {
  background: #e0664f;
  color: #fff;
}

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

.item-dates div {
  min-width: 0;
  padding: 11px 10px;
  border-radius: 8px;
  background: #f6f1e8;
}

.item-dates .opened-expiry-note-row {
  grid-column: 1 / -1;
  padding: 8px 10px;
  background: rgba(246, 241, 232, 0.68);
}

.opened-expiry-note {
  margin: 0;
  color: rgba(64, 69, 62, 0.62);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.45;
}

dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

dd {
  margin: 4px 0 0;
  font-size: 0.9rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.item-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stock-card .item-actions {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 9px;
}

.secondary-button,
.danger-button {
  min-height: 38px;
  border-radius: 8px;
  background: white;
  padding: 0 4px;
  font-size: 0.74rem;
}

.secondary-button span,
.danger-button span {
  margin-right: 3px;
  font-weight: 900;
}

.buy-card {
  background: linear-gradient(180deg, #fffdf8, #fff6de);
  border-color: rgba(165, 109, 48, 0.22);
}

.buy-card .item-actions {
  grid-template-columns: repeat(3, 1fr);
}

.weekly-section {
  margin-bottom: 14px;
}

.mini-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 9;
  width: min(390px, calc(100% - 28px));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 44px rgba(40, 42, 37, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transform: translateX(-50%);
}

.nav-button {
  position: relative;
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  gap: 2px;
  place-items: center;
  font-size: 0.74rem;
  font-weight: 900;
  padding: 5px 2px;
  transition: color 200ms ease, transform 200ms ease;
}

.nav-button::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 247, 232, 0.95), rgba(228, 239, 232, 0.86));
  box-shadow: 0 8px 18px rgba(45, 35, 24, 0.08);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 220ms ease, transform 220ms ease;
}

.nav-button b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(47, 127, 103, 0.08);
  color: currentColor;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.nav-icon::before,
.nav-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.nav-icon {
  position: relative;
}

.icon-home::before {
  width: 13px;
  height: 10px;
  bottom: 5px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 2px;
}

.icon-home::after {
  width: 12px;
  height: 12px;
  top: 5px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.icon-stock::before {
  width: 15px;
  height: 13px;
  bottom: 4px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.icon-stock::after {
  width: 9px;
  height: 5px;
  top: 6px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.icon-buy::before {
  width: 15px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.icon-buy::after {
  width: 8px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(1px) rotate(-45deg);
}

.icon-analysis::before {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.icon-analysis::after {
  width: 8px;
  height: 8px;
  right: 4px;
  top: 4px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 0 8px 0 0;
}

.icon-settings::before {
  width: 14px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
  border-radius: 999px;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.nav-button span {
  line-height: 1.1;
}

.fab-button {
  position: fixed;
  right: max(18px, calc((100% - 430px) / 2 + 18px));
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 11;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff805f 0%, #ff634f 52%, #e8473f 100%);
  color: white;
  box-shadow: 0 12px 24px rgba(232, 71, 63, 0.28);
  cursor: pointer;
  font-size: 2.05rem;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0 0 3px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.fab-button:active {
  transform: scale(0.92);
  box-shadow: 0 8px 18px rgba(232, 71, 63, 0.24);
}

.form-sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: end;
  justify-content: center;
  background: rgba(38, 39, 36, 0.34);
}

.form-sheet.active {
  display: flex;
}

.action-sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: end;
  justify-content: center;
  background: rgba(38, 39, 36, 0.28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.action-sheet.active {
  display: flex;
}

.settings-overlay {
  position: fixed;
  z-index: 21;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease-out;
}

.settings-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.settings-drawer {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 22;
  width: min(390px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  margin: 0;
  box-shadow: 0 18px 46px rgba(40, 42, 37, 0.18);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(calc(-50% + 42px));
  transition:
    opacity 250ms ease-out,
    transform 250ms ease-out,
    visibility 250ms ease-out;
}

.settings-drawer.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%);
}

.form-sheet-panel {
  width: min(430px, 100%);
  max-height: 88vh;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px 0;
  border-radius: 8px 8px 0 0;
  background: var(--paper);
  box-shadow: 0 -20px 48px rgba(40, 42, 37, 0.2);
}

.action-sheet-panel {
  width: min(430px, 100%);
  padding: 16px 14px max(18px, env(safe-area-inset-bottom));
  border-radius: 8px 8px 0 0;
  background: var(--paper);
  box-shadow: 0 -18px 44px rgba(40, 42, 37, 0.2);
  animation: sheetUp 200ms ease-out both;
}

.action-sheet-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.action-sheet-buttons {
  display: grid;
  gap: 9px;
}

.action-sheet-buttons .primary-button,
.action-sheet-buttons .secondary-button,
.action-sheet-buttons .danger-button {
  min-height: 46px;
  font-size: 0.88rem;
}

.stock-detail-overlay {
  background: rgba(38, 39, 36, 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.stock-detail-sheet {
  position: relative;
  overflow: hidden;
  padding: 10px 18px max(20px, env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(circle at right 18px top 44px, rgba(228, 239, 232, 0.72), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 250, 240, 0.96));
  box-shadow: 0 -24px 58px rgba(53, 61, 51, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.sheet-grabber {
  width: 42px;
  height: 5px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: rgba(38, 39, 36, 0.18);
}

.stock-detail-sheet .sheet-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.stock-detail-hero {
  display: grid;
  place-items: center;
  width: 78px;
  height: 92px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 26px rgba(53, 61, 51, 0.08);
}

.detail-illustration {
  width: 42px;
  height: 60px;
  transform: scale(1.18);
}

.stock-detail-sheet h2 {
  margin-bottom: 5px;
  font-size: 1.24rem;
}

.stock-detail-body {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.detail-expiry-row,
.detail-info-row,
.detail-note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.detail-note {
  grid-template-columns: 1fr;
  align-items: start;
}

.detail-expiry-row span,
.detail-info-row span,
.detail-note span {
  color: rgba(64, 69, 62, 0.72);
  font-size: 0.8rem;
  font-weight: 900;
}

.detail-expiry-row strong,
.detail-info-row strong {
  color: var(--mint-dark);
  font-size: 0.92rem;
}

.detail-opened-expiry {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.detail-opened-expiry[hidden] {
  display: none;
}

.detail-opened-expiry div {
  display: grid;
  grid-template-columns: 1fr minmax(0, auto);
  gap: 12px;
  align-items: baseline;
}

.detail-opened-expiry span {
  color: rgba(64, 69, 62, 0.72);
  font-size: 0.8rem;
  font-weight: 900;
}

.detail-opened-expiry strong {
  color: var(--mint-dark);
  font-size: 0.94rem;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-align: right;
}

.detail-opened-expiry p {
  margin: 4px 0 0;
  color: rgba(64, 69, 62, 0.64);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
}

.detail-warning .detail-expiry-row strong {
  color: var(--coral);
}

.detail-danger .detail-expiry-row strong {
  color: var(--red);
}

.detail-note p {
  margin: -4px 0 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.55;
}

.detail-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(214, 111, 92, 0.18);
}

.detail-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff6b5c, #ff9c91);
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.detail-actions .primary-button,
.detail-actions .secondary-button,
.detail-actions .danger-button {
  min-height: 50px;
  border-radius: 999px;
}

.detail-actions .primary-button,
.detail-actions .danger-button {
  grid-column: span 1;
}

.sheet-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.sheet-close {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 800;
}

.chart-card {
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.analysis-block {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.analysis-block h3 {
  margin-bottom: 10px;
  font-size: 0.98rem;
}

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

.analysis-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: #f6f1e8;
  font-size: 0.86rem;
  font-weight: 800;
}

.settings-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.settings-card h3 {
  margin-bottom: 0;
  font-size: 0.98rem;
}

.settings-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.6;
}

.primary-link {
  display: grid;
  min-height: 44px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--mint), var(--mint-dark));
  color: white;
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
}

.full-button {
  width: 100%;
}

.backup-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.backup-actions .primary-button,
.backup-actions .secondary-button {
  width: 100%;
}

.settings-note {
  min-height: 20px;
}

.privacy-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.consent-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.consent-privacy-link {
  display: block;
  margin-top: 8px;
  border: 0;
  background: none;
  padding: 0;
  width: 100%;
  color: var(--mint);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.settings-footer-link {
  margin-top: 18px;
  text-align: center;
}

.settings-footer-link a,
.settings-footer-link button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
}

.privacy-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: end;
  justify-content: center;
  background: rgba(38, 39, 36, 0.34);
}

.privacy-sheet.active {
  display: flex;
}

.privacy-body {
  display: grid;
}

.privacy-updated {
  margin-top: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
}

.consent-panel {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(90px + env(safe-area-inset-bottom));
  left: max(14px, env(safe-area-inset-left));
  z-index: 40;
  display: grid;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  backdrop-filter: blur(22px) saturate(1.08);
  box-shadow: 0 18px 48px rgba(53, 61, 51, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.consent-panel.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.consent-panel h2 {
  margin: 0 0 8px;
  color: var(--mint-dark);
  font-size: 1rem;
}

.consent-panel p {
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.55;
}

.consent-panel .consent-detail {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.release-notes-panel {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(92px + env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  z-index: 42;
  display: grid;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 22px;
  background: rgba(255, 253, 248, 0.96);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  backdrop-filter: blur(22px) saturate(1.08);
  box-shadow: 0 22px 54px rgba(53, 61, 51, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.release-notes-panel.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.release-notes-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rn-badge {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 56px;
}

.rn-bottle {
  display: block;
  width: 48px;
  height: 56px;
  filter: drop-shadow(0 4px 8px rgba(95, 120, 72, 0.18));
}

.rn-head-text {
  min-width: 0;
}

.rn-spark {
  position: absolute;
  color: #e9c45e;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}

.rn-spark-1 { top: -3px; right: -2px; }
.rn-spark-2 { bottom: 4px; left: -5px; font-size: 10px; animation-delay: 950ms; }

/* パネルが開いている間だけ光らせる。閉じている時は要素が opacity:0 で残るだけなので、
   無限アニメを常時回さない（モバイルのバッテリー/CPUの無駄を防ぐ）。 */
.release-notes-panel.active .rn-spark {
  animation: rnSpark 1900ms ease-in-out infinite;
}

@keyframes rnSpark {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  45%      { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .release-notes-panel.active .rn-spark { animation: none; }
  .rn-spark { opacity: 0.85; }
}

.release-notes-head p {
  margin: 0 0 4px;
  color: var(--mint-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

.release-notes-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.16rem;
}

.release-notes-panel ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.55;
}

.nav-button.active {
  color: var(--mint-dark);
  transform: translateY(-2px);
}

.nav-button.active::before {
  opacity: 1;
  transform: scale(1);
}

.nav-button.active b {
  background: linear-gradient(180deg, #fff7e6, #f5df9e);
  box-shadow: 0 7px 14px rgba(165, 109, 48, 0.16);
  transform: translateY(-4px);
}

.secondary-button {
  border-color: var(--line);
  color: var(--ink);
}

.danger-button {
  border-color: rgba(185, 70, 70, 0.2);
  color: var(--red);
  background: rgba(185, 70, 70, 0.06);
}

.update-banner {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 10;
  width: min(390px, calc(100% - 28px));
  display: none;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(31, 92, 75, 0.18);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.97);
  box-shadow: 0 18px 46px rgba(40, 42, 37, 0.18);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  transform: translateX(-50%);
}

.update-banner.active {
  display: grid;
}

.update-banner button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: var(--mint);
  color: white;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 900;
  padding: 0 12px;
  white-space: nowrap;
}


@keyframes actionPop {
  0% { transform: scale(1); }
  48% { transform: scale(0.98); box-shadow: 0 6px 16px rgba(47, 127, 103, 0.1); }
  100% { transform: scale(1.02); opacity: 0.78; }
}

@keyframes cardAdded {
  0% { opacity: 0; transform: translateY(-10px) scale(0.98); }
  58% { opacity: 1; transform: translateY(2px) scale(1.01); box-shadow: 0 14px 30px rgba(47, 127, 103, 0.14); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes jarAdded {
  0% { transform: rotate(-5deg) scale(0.9); }
  55% { transform: rotate(4deg) scale(1.08); }
  100% { transform: rotate(0) scale(1); }
}

@keyframes viewIn {
  0% { opacity: 0; transform: translateX(10px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes lidPop {
  0% { transform: translate(0, 0) rotate(0); }
  46% { transform: translate(7px, -9px) rotate(32deg); }
  72% { transform: translate(4px, -4px) rotate(18deg); }
  100% { transform: translate(5px, -3px) rotate(22deg); }
}

@keyframes openCardPop {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-5px) scale(1.012); box-shadow: 0 16px 34px rgba(47, 127, 103, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
  68% { transform: translateY(1px) scale(0.998); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes openBottleLift {
  0% { transform: translateY(0) rotate(0); }
  38% { transform: translateY(-2px) rotate(-3deg); }
  68% { transform: translateY(1px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes openBottleGlow {
  0%, 18% { opacity: 0; transform: translateY(0) scaleX(0.3); }
  42% { opacity: 0.74; transform: translateY(-3px) scaleX(1.15); }
  100% { opacity: 0; transform: translateY(-6px) scaleX(0.7); }
}

@keyframes openBottleBurst {
  0%, 18% { opacity: 0; transform: translateX(-50%) translateY(2px) scale(0.32) rotate(0deg); }
  34% { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.08) rotate(8deg); }
  62% { opacity: 0.76; transform: translateX(-50%) translateY(-7px) scale(1.18) rotate(-4deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(1.35) rotate(10deg); }
}

@keyframes finishSink {
  0% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
  38% { transform: translateY(4px) scale(0.985); opacity: 1; filter: blur(0); }
  100% { transform: translateY(16px) scale(0.94); opacity: 0; filter: blur(2px); }
}

@keyframes finishCheck {
  0% { opacity: 0; transform: scale(0.78); }
  28% { opacity: 1; transform: scale(1.08); }
  58% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.94); }
}

@keyframes finishContentSoftOut {
  0% { opacity: 1; transform: translateY(0); }
  42% { opacity: 0.7; transform: translateY(1px); }
  100% { opacity: 0.18; transform: translateY(7px); }
}

@keyframes detailIn {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes sheetUp {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes bellRing {
  0% { transform: rotate(0); }
  22% { transform: rotate(-13deg); }
  48% { transform: rotate(11deg); }
  72% { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}

@keyframes bottleWiggle {
  0% { transform: rotate(0) translateY(0); }
  25% { transform: rotate(-8deg) translateY(-1px); }
  55% { transform: rotate(7deg) translateY(0); }
  80% { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}

@keyframes tinySpill {
  0% { opacity: 0; transform: translateY(-2px) scaleX(0.25); }
  28% { opacity: 1; transform: translateY(0) scaleX(1); }
  100% { opacity: 0; transform: translateY(1px) scaleX(1.18); }
}

@keyframes miniBottleTap {
  0% { transform: rotate(0) translateY(0); }
  34% { transform: rotate(-5deg) translateY(-1px); }
  68% { transform: rotate(4deg) translateY(0); }
  100% { transform: rotate(0) translateY(0); }
}

@keyframes miniBottleSpill {
  0% { transform: rotate(0) translateY(0); }
  18% { transform: rotate(-12deg) translateY(-2px); }
  42% { transform: rotate(13deg) translateY(0); }
  64% { transform: rotate(-8deg) translateY(1px); }
  100% { transform: rotate(0) translateY(0); }
}

@keyframes miniShelfSpill {
  0% { opacity: 0; transform: translateY(-3px) scaleX(0.25); }
  18% { opacity: 1; transform: translateY(0) scaleX(1); }
  74% { opacity: 0.9; transform: translateY(0) scaleX(1.08); }
  100% { opacity: 0; transform: translateY(2px) scaleX(1.16); }
}

/* iOS app polish: soft glass, floating surfaces, quiet spacing. */
body {
  background:
    linear-gradient(180deg, rgba(247, 251, 247, 0.96), rgba(255, 250, 240, 0.96) 52%, rgba(240, 247, 242, 0.98));
}

.app-shell {
  padding: 18px 16px 118px;
  background:
    linear-gradient(180deg, rgba(253, 251, 246, 0.96), rgba(248, 250, 245, 0.96));
  box-shadow: none;
  /* 画面切替の横スライド中に横スクロールが出ないようクリップ（スクロール枠は作らない）。 */
  overflow-x: clip;
}

.hero,
.entry-panel,
.list-panel,
.settings-panel,
.buy-panel,
.analysis-panel,
.item-card,
.compact-card,
.learning-note,
.analysis-block,
.settings-card {
  border-color: rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow:
    0 16px 36px rgba(53, 61, 51, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hero {
  min-height: 0;
  padding: 9px 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 249, 235, 0.72)),
    linear-gradient(180deg, rgba(230, 241, 233, 0.74), rgba(255, 255, 255, 0.3));
}

.status-strip {
  gap: 8px;
  margin: 8px 0 10px;
}

.status-strip div {
  min-height: 78px;
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 24px rgba(53, 61, 51, 0.07);
}

.status-strip strong {
  font-size: 1.22rem;
}

.status-strip span {
  color: rgba(92, 101, 91, 0.82);
}

.home-section {
  margin-top: 18px;
}

.home-section-header,
.list-header,
.section-title {
  margin-bottom: 11px;
}

.home-card-grid,
.list {
  gap: 10px;
}

.home-card-grid .compact-card {
  min-height: 128px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 249, 237, 0.78));
  box-shadow: 0 16px 32px rgba(53, 61, 51, 0.08);
}

.item-card {
  border-radius: 18px;
  padding: 13px;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease;
}

.item-card:active,
.compact-card:active {
  transform: scale(0.985);
}

.primary-button,
.secondary-button,
.danger-button,
.tab,
.text-button,
.notify-button,
.menu-button,
.update-banner button {
  border-radius: 999px;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease, background 200ms ease;
}

.primary-button {
  background: linear-gradient(135deg, #3b9278, #1f6652);
  box-shadow: 0 12px 26px rgba(31, 92, 75, 0.18);
}

.secondary-button {
  border-color: rgba(47, 127, 103, 0.1);
  background: rgba(255, 255, 255, 0.7);
}

.danger-button {
  border-color: rgba(214, 111, 92, 0.14);
  background: rgba(255, 244, 241, 0.76);
}

.primary-button:active,
.notify-button:active,
.menu-button:active,
.tab:active,
.secondary-button:active,
.danger-button:active,
.fab-button:active,
.nav-button:active {
  transform: scale(0.96);
}

.bottom-nav {
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(382px, calc(100% - 26px));
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  backdrop-filter: blur(24px) saturate(1.18);
  box-shadow:
    0 18px 42px rgba(53, 61, 51, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.nav-button {
  min-height: 52px;
  transition: color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-button::before {
  inset: 4px;
  background: rgba(228, 239, 232, 0.86);
  box-shadow: 0 10px 22px rgba(47, 127, 103, 0.1);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-button.active {
  transform: translateY(-3px);
}

.nav-button.active b {
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 8px 18px rgba(47, 127, 103, 0.12);
  transform: translateY(-3px);
}

.fab-button {
  bottom: calc(92px + env(safe-area-inset-bottom));
  box-shadow: 0 16px 30px rgba(232, 71, 63, 0.24);
}

.form-sheet,
.action-sheet {
  background: rgba(38, 39, 36, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.form-sheet-panel,
.action-sheet-panel {
  border-radius: 24px 24px 0 0;
  background: #fffdf8; /* 完全不透明。スクロール時に下が透けないようにする */
  box-shadow: 0 -18px 46px rgba(53, 61, 51, 0.18);
}

.settings-overlay {
  background: rgba(20, 24, 22, 0.24);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.settings-drawer {
  border-radius: 24px;
  background: rgba(255, 253, 248, 0.92);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: 0 22px 58px rgba(53, 61, 51, 0.2);
  transform: translate(calc(-50% + 34px), 0);
  transition:
    opacity 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 250ms ease;
}

.settings-drawer.active {
  transform: translate(-50%, 0);
}

.app-view.active-view {
  animation: viewIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes viewIn {
  0% { opacity: 0; transform: translateX(calc(var(--view-dir, 0) * 26px)); }
  100% { opacity: 1; transform: translateX(0); }
}

/* 動きを抑える設定の人には横スライドを出さない（フェードのみ＝静かに切替）。 */
@media (prefers-reduced-motion: reduce) {
  .app-view.active-view { animation: none; }
}

@keyframes sheetUp {
  0% { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Native-like motion layer. Kept lightweight: CSS transitions + short keyframes. */
.mini-jar {
  animation: miniBottleIntro 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.mini-jar:nth-child(2) { animation-delay: 70ms; }
.mini-jar:nth-child(3) { animation-delay: 140ms; }
.mini-jar:nth-child(4) { animation-delay: 210ms; }

.primary-button,
.secondary-button,
.danger-button,
.tab,
.text-button,
.notify-button,
.menu-button,
.fab-button,
.nav-button,
.update-banner button {
  transform-origin: center;
  will-change: transform;
}

.fab-button:active {
  transform: scale(0.9);
}

.bottom-nav {
  --nav-index: 0;
  overflow: hidden;
  isolation: isolate;
}

.bottom-nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 7px;
  top: 7px;
  width: calc((100% - 14px) / 5);
  height: calc(100% - 14px);
  border-radius: 999px;
  background: rgba(228, 239, 232, 0.9);
  box-shadow: 0 12px 24px rgba(47, 127, 103, 0.11);
  transform: translateX(calc(var(--nav-index) * 100%));
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-button {
  z-index: 1;
}

.nav-button::before {
  display: none;
}

.nav-button b {
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background 220ms ease, box-shadow 220ms ease;
}

.nav-button.active b {
  transform: translateY(-5px) scale(1.04);
}

.form-sheet,
.action-sheet {
  transition: opacity 220ms ease;
}

.form-sheet-panel,
.action-sheet-panel {
  animation: modalUp 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.form-sheet.closing,
.action-sheet.closing {
  opacity: 0;
}

.form-sheet.closing .form-sheet-panel,
.action-sheet.closing .action-sheet-panel {
  animation: modalDown 210ms ease-out both;
}

.item-card.removing-card,
.buy-card.removing-card {
  pointer-events: none;
  animation: cardRemove 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.item-card.just-added {
  animation: cardAddedNative 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.item-card.just-added::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(228, 239, 232, 0), rgba(228, 239, 232, 0.6), rgba(228, 239, 232, 0));
  animation: addHighlight 680ms ease-out both;
  pointer-events: none;
}

.expiry-soon-card,
.expiry-expired-card {
  box-shadow:
    0 16px 36px rgba(185, 112, 62, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: dueBreath 2400ms ease-in-out infinite;
}

.expiry-soon-card .badge.warning,
.expiry-expired-card .badge.danger {
  box-shadow: 0 8px 16px rgba(214, 111, 92, 0.12);
}

.action-toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 30;
  width: min(360px, calc(100% - 32px));
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  backdrop-filter: blur(22px) saturate(1.12);
  box-shadow: 0 18px 38px rgba(53, 61, 51, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.action-toast span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: white;
  font-size: 0.9rem;
  font-weight: 900;
}

.action-toast strong {
  min-width: 0;
  color: var(--mint-dark);
  font-size: 0.84rem;
  line-height: 1.35;
  text-align: left;
}

.action-toast button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(228, 239, 232, 0.7);
  color: var(--mint-dark);
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 900;
}

.action-toast.success span {
  background: var(--mint);
}

.action-toast.success span::before {
  content: "\2713";
}

.action-toast.danger span {
  background: var(--red);
}

.action-toast.danger span::before {
  content: "\1F5D1";
  font-size: 0.78rem;
}

.action-toast.warning span {
  background: var(--amber);
}

.action-toast.warning span::before {
  content: "!";
}

.bell-icon::after {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.notify-button:hover .bell-icon,
.notify-button:focus-visible .bell-icon {
  animation: none;
}

.notify-button.has-alert .bell-icon {
  animation: bellNudge 340ms ease-out both;
}

.notify-button.has-alert .bell-icon::after {
  opacity: 1;
  transform: scale(1);
}

.app-empty .empty-illustration {
  animation: emptyIllustrationIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.home-card-grid .compact-card {
  animation: homeCardIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.home-card-grid .compact-card:nth-child(2) {
  animation-delay: 45ms;
}

.home-card-grid .compact-card:nth-child(3) {
  animation-delay: 90ms;
}

.home-card-grid .compact-card:nth-child(4) {
  animation-delay: 135ms;
}

.form-sheet.active,
.action-sheet.active {
  animation: overlayFadeIn 180ms ease-out both;
}

.action-toast.show {
  opacity: 1;
  pointer-events: auto;
  animation: toastLift 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes miniBottleIntro {
  0% { opacity: 0; transform: translateX(-10px) translateY(6px) scale(0.86); }
  64% { opacity: 1; transform: translateX(1px) translateY(-2px) scale(1.04); }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}

@keyframes homeCardIn {
  0% { opacity: 0; transform: translateY(8px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes overlayFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes toastLift {
  0% { transform: translateX(-50%) translateY(18px) scale(0.98); }
  62% { transform: translateX(-50%) translateY(-1px) scale(1.01); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes modalUp {
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes modalDown {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(24px); }
}

@keyframes cardAddedNative {
  0% { opacity: 0; transform: translateY(12px) scale(0.98); }
  62% { opacity: 1; transform: translateY(-1px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes addHighlight {
  0% { opacity: 0; transform: translateX(-18%); }
  35% { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(18%); }
}

@keyframes cardRemove {
  0% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-22px) scale(0.98); }
}

@keyframes dueBreath {
  0%, 100% { box-shadow: 0 14px 30px rgba(185, 112, 62, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
  50% { box-shadow: 0 18px 40px rgba(214, 111, 92, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
}

@keyframes bellNudge {
  0% { transform: rotate(0); }
  24% { transform: rotate(-10deg); }
  52% { transform: rotate(8deg); }
  78% { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}

@keyframes emptyIllustrationIn {
  0% { opacity: 0; transform: translateY(8px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .app-empty .empty-illustration,
  .home-card-grid .compact-card,
  .notify-button.has-alert .bell-icon,
  .action-toast.show,
  .form-sheet.active,
  .action-sheet.active,
  .stock-card.opening-done,
  .stock-card.opening-done .jar-icon,
  .stock-card.opening-done .jar-icon::before,
  .stock-card.opening-done .jar-icon::after,
  .stock-card.opening-done .jar-lid,
  .stock-card.opening-done .category-icon [class*="icon-lid"],
  .stock-card.opening-done .milk-pack-icon [class*="icon-lid"],
  .stock-card.finished-done,
  .stock-card.finished-done .jar-body::after,
  .stock-card.finished-done .item-main,
  .stock-card.finished-done .item-note,
  .stock-card.finished-done .item-category,
  .stock-card.finished-done .item-dates,
  .stock-card.finished-done .item-actions {
    animation: none;
  }
}

@media (min-width: 720px) {
  body {
    display: grid;
    place-items: start center;
    padding: 20px 0;
  }

  .app-shell {
    width: 390px;
    min-height: 844px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 28px;
    padding: 18px 14px 104px;
    overflow: hidden;
  }

  .bottom-nav {
    width: 374px;
    bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 999px;
  }

  .hero {
    min-height: 0;
  }

  .status-strip {
    margin-left: 8px;
    margin-right: 8px;
  }
}

/* ===== Settings view ===== */
.settings-view {
  padding: 14px;
}

.settings-group {
  margin-bottom: 18px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(45, 35, 24, 0.05);
}

.settings-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  min-height: 58px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid rgba(224, 222, 211, 0.7);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.settings-row:last-child {
  border-bottom: 0;
}
.settings-row:active {
  background: rgba(47, 127, 103, 0.04);
}
.settings-row-static {
  cursor: default;
}

.settings-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sicon-svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sicon-notify {
  background: var(--sage);
  color: var(--mint-dark);
}
.sicon-backup {
  background: rgba(245, 223, 158, 0.55);
  color: var(--amber);
}
.sicon-analytics {
  background: rgba(214, 111, 92, 0.12);
  color: var(--coral);
}
.sicon-privacy {
  background: rgba(116, 122, 113, 0.12);
  color: var(--muted);
}
.sicon-info {
  background: var(--sage);
  color: var(--mint-dark);
}
.sicon-update {
  background: var(--sage);
  color: var(--mint-dark);
}

.settings-row-body {
  padding: 0 8px;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.settings-row-label {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  display: block;
}
.settings-row-sub {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 700;
  display: block;
  line-height: 1.3;
}
.settings-row-badge {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--mint);
  white-space: nowrap;
  padding-right: 4px;
}
.icon-style-preview {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}
.icon-style-preview svg {
  width: 32px;
  height: 32px;
}
.settings-row-version {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.settings-row-chevron {
  width: 16px;
  height: 16px;
  color: rgba(116, 122, 113, 0.5);
  position: relative;
}
.settings-row-chevron::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* ===== Settings sub-sheets ===== */
.settings-sub-sheet {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(38, 39, 36, 0.28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.settings-sub-sheet.active {
  display: flex;
}
.settings-sub-panel {
  width: min(430px, 100%);
  max-height: 80vh;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 14px max(20px, env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  background: var(--paper);
  box-shadow: 0 -20px 48px rgba(40, 42, 37, 0.2);
  display: grid;
  gap: 13px;
}
.sheet-title-sm {
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink);
}
.settings-sub-note {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

/* Feedback */
.feedback-input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 13px;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  resize: vertical;
  min-height: 120px;
}
.feedback-input:focus {
  outline: none;
  border-color: var(--mint-dark, #2f7f67);
}
.feedback-result {
  font-size: 0.86rem;
  font-weight: 800;
  margin: 0;
}
.feedback-result.ok { color: var(--mint-dark, #2f7f67); }
.feedback-result.fail { color: #c0492f; }

/* Notify toggle row */
.notify-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.notify-toggle-label {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
}
.toggle-switch {
  flex-shrink: 0;
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  cursor: pointer;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(116, 122, 113, 0.25);
  transition: background 0.22s;
}
.toggle-switch input:checked + .toggle-track {
  background: var(--mint);
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.22s;
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
  transform: translateX(20px);
}

/* Backup sheet extras */
.backup-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}
.backup-export-result {
  display: grid;
  gap: 10px;
}
.backup-code-display {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 0.7rem;
  font-family: 'SF Mono', 'Courier New', monospace;
  color: var(--ink);
  background: white;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  word-break: break-all;
  line-height: 1.5;
  cursor: text;
  user-select: all;
  -webkit-user-select: all;
}
.backup-expiry-note {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  margin: 0;
}
.backup-code-input {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--ink);
  background: white;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 0.04em;
}
.backup-code-input:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(47, 127, 103, 0.12);
}
.backup-result {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mint-dark);
  min-height: 1.2em;
  margin: 0;
}
.secondary-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border: 1.5px solid var(--mint);
  border-radius: 12px;
  background: transparent;
  color: var(--mint-dark);
  font-size: 0.9rem;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.secondary-btn:active {
  background: rgba(47, 127, 103, 0.06);
}
.primary-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--mint), var(--mint-dark));
  color: white;
  font-size: 0.9rem;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(45, 127, 111, 0.2);
  -webkit-tap-highlight-color: transparent;
}
.primary-btn:active {
  opacity: 0.88;
}

/* 通知時刻セレクト行 */
.notify-hour-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 4px;
  border-top: 1px solid var(--border, rgba(0,0,0,.07));
  margin-top: 14px;
}
.notify-hour-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}
.notify-hour-select {
  padding: 7px 10px;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: 8px;
  background: var(--card-bg, #fff);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  min-width: 90px;
}

/* ── TUTORIAL / ONBOARDING ──────────────────────────────── */
.tut-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(38, 39, 36, 0.42);
  display: flex;
  align-items: flex-end;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tut-overlay[hidden] {
  display: none;
}

.tut-sheet {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 24px 24px 0 0;
  padding: 0 0 28px;
  box-shadow: 0 -6px 40px rgba(38, 39, 36, 0.2);
  overflow: hidden;
}

.tut-grabber {
  width: 36px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin: 12px auto 0;
}

.tut-header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
}

.tut-skip {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.tut-skip:active {
  background: var(--line);
}

.tut-viewport {
  overflow: hidden;
  width: 100%;
}

.tut-track {
  display: flex;
  transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

.tut-step {
  min-width: 100%;
  flex-shrink: 0;
  padding: 4px 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;        /* center だと iOS で width:100% の子が右にずれるため stretch に */
  gap: 10px;
}

.tut-art {
  width: 100%;
  height: 138px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.tut-title {
  font-size: 1.12rem;
  font-weight: 900;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.02em;
  margin: 0;
}

.tut-body {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.65;
  margin: 0;
}

/* ── HOW-TO STEPS (card 2) ── */
.tut-howto {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 10px 0 14px;
}

.tut-how-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.tut-how-num {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: #a7bd86;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 800;
  margin-top: 1px;
}

.tut-how-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tut-how-row strong {
  font-size: 0.88rem;
  color: var(--ink);
  font-weight: 800;
}

.tut-how-row span {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── NOTIFY BUTTON (card 3) ── */
/* ボタンはdivで包み、その中で width:100%。
   ラッパdivは（pと同じく）flexで内側いっぱいに伸びる＝余白を正しく守る。
   ボタンのwidth:100%は「余白のないdiv」基準なのでiOSの%バグを踏まない。 */
.tut-notify-wrap {
  align-self: stretch;
  margin-top: 6px;
}
.tut-notify-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;   /* iOSのボタン特有のサイズ/配置の癖を消す */
  appearance: none;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: #6f8a5c;
  color: white;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(95, 120, 72, 0.18);
  -webkit-tap-highlight-color: transparent;
}
.tut-notify-btn:active {
  opacity: 0.88;
}
.tut-notify-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── FOOTER: dots + next ── */
.tut-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 24px 0;
}

.tut-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}

.tut-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.tut-dot {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: #ddd8ca;
  transition: background 0.25s, width 0.25s;
}

.tut-dot.active {
  background: #a7bd86;
  width: 20px;
}

.tut-count {
  font-size: 0.9rem;
  font-weight: 700;
  color: #9a9788;            /* 中立で明るめ・見やすい数字 */
  letter-spacing: 0.06em;
}

.tut-back {
  min-width: 64px;
  padding: 11px 18px;
  border: 1.5px solid #e2ddcf;
  border-radius: 12px;
  background: #fff;
  color: #8a8678;            /* 緑をやめて中立グレー */
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tut-back:active {
  background: #f4f2ec;
}

.tut-next {
  min-width: 64px;
  padding: 12px 24px;
  border: 0;
  border-radius: 12px;
  background: #6f8a5c;
  color: white;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(95, 120, 72, 0.2);
  -webkit-tap-highlight-color: transparent;
}
.tut-next:active {
  opacity: 0.88;
}

/* ── 更新中オーバーレイ（芸術的ローディング） ───────────── */

.update-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(20px, 6vmin, 40px);
  background:
    linear-gradient(90deg, rgba(47, 127, 103, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #fffaf0 0%, #f7efe5 55%, #e9f1ec 100%);
  background-size: 28px 28px, auto;
  color: var(--mint-dark);
  animation: overlayFade 360ms ease both;
}

@keyframes overlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.update-halo {
  position: relative;
  width: clamp(140px, 40vmin, 200px);
  height: clamp(140px, 40vmin, 200px);
  display: grid;
  place-items: center;
}

/* 回転する光輪リング */
.halo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(47, 127, 103, 0) 0deg,
    rgba(47, 127, 103, 0.65) 90deg,
    rgba(214, 111, 92, 0.55) 200deg,
    rgba(245, 223, 158, 0.7) 300deg,
    rgba(47, 127, 103, 0) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  animation: haloSpin 2400ms linear infinite;
}

@keyframes haloSpin {
  to { transform: rotate(360deg); }
}

/* 拡大しながら淡く消える同心円（複数を遅延で重ねる） */
.halo-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(47, 127, 103, 0.45);
  opacity: 0;
  animation: haloPulse 2600ms ease-out infinite;
}
.halo-pulse:nth-child(2) { animation-delay: 0ms; }
.halo-pulse:nth-child(3) { animation-delay: 870ms; }
.halo-pulse:nth-child(4) { animation-delay: 1740ms; }

@keyframes haloPulse {
  0%   { opacity: 0.55; transform: scale(0.55); }
  70%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.05); }
}

/* 中央のスパイス瓶（splashの.spice-jarを流用しつつ呼吸アニメ） */
.update-jar {
  position: relative;
  animation: jarBreathe 2200ms ease-in-out infinite;
}

@keyframes jarBreathe {
  0%, 100% { transform: rotate(-14deg) scale(1); }
  50%      { transform: rotate(-14deg) scale(1.08); }
}

.update-overlay-text {
  margin: 0;
  font-size: clamp(0.95rem, 3.4vmin, 1.1rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, var(--mint-dark), var(--coral), var(--mint), var(--mint-dark));
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: textShimmer 2600ms ease-in-out infinite;
}

@keyframes textShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ── 更新完了の祝福（きらきら星） ─────────────────────── */

.sparkle-layer {
  position: fixed;
  inset: 0;
  z-index: 130;
  pointer-events: none;
  overflow: hidden;
}

.sparkle {
  position: absolute;
  font-size: var(--s-size, 22px);
  line-height: 1;
  opacity: 0;
  transform: scale(0);
  will-change: transform, opacity;
  animation: twinkle var(--s-dur, 1500ms) ease-in-out var(--s-delay, 0ms) both;
  filter: drop-shadow(0 0 6px rgba(245, 223, 158, 0.85));
}

@keyframes twinkle {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  35%  { opacity: 1; transform: scale(1.15) rotate(40deg); }
  70%  { opacity: 1; transform: scale(0.95) rotate(150deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(220deg); }
}

.sparkle-message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 24px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 14px 40px rgba(40, 42, 37, 0.22);
  color: var(--mint-dark);
  font-weight: 900;
  font-size: clamp(0.95rem, 3.6vmin, 1.15rem);
  white-space: nowrap;
  animation: popFade 2200ms ease both;
}

@keyframes popFade {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  30%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .halo-ring, .halo-pulse, .update-jar, .update-overlay-text { animation-duration: 0.001ms; animation-iteration-count: 1; }
  .sparkle, .sparkle-message { animation-duration: 600ms; }
}

/* ── ボトル（起動・更新・完了で共通） ──────────────────── */

.bottle {
  width: clamp(108px, 34vmin, 132px);
  aspect-ratio: 80 / 124;
}
.bottle .bottle-svg { width: 100%; height: 100%; display: block; }

/* スプラッシュ（起動画面） */
.splash-brand {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #8a9a6e;
}

/* 更新中オーバーレイの中身（gapを詰める） */
.update-overlay { gap: 14px; }
.uo-brand {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #9aa884;
}
.uo-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #5f6e48;            /* コントラスト確保 */
  letter-spacing: 0.02em;
}
.uo-bar {
  width: clamp(150px, 56vmin, 200px);
  height: 5px;
  background: #e7e3d4;
  border-radius: 999px;
  overflow: hidden;
}
.uo-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: #8ba36d;
  border-radius: 999px;
}
.uo-pct {
  font-size: 0.78rem;        /* 控えめ（主役にしない） */
  font-weight: 700;
  color: #8a9a6e;
  margin-top: -6px;
}

/* 完了画面 */
.done-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  background:
    linear-gradient(90deg, rgba(47, 127, 103, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, #fffaf0 0%, #f7efe5 55%, #e9f1ec 100%);
  background-size: 28px 28px, auto;
  animation: overlayFade 420ms ease both;
}
.done-msg {
  font-size: 1.12rem;
  font-weight: 800;
  color: #566546;
  text-align: center;
}
.done-sub {
  font-size: 0.84rem;
  color: #6f6f5c;
  text-align: center;
  line-height: 1.6;
}
.done-btn {
  margin-top: 8px;
  min-width: 200px;
  padding: 13px 28px;
  border: none;
  border-radius: 12px;
  background: #6f8a5c;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: doneBtnIn 600ms ease 360ms both;   /* 少し遅れてフェードイン */
}
.done-btn:active { opacity: 0.9; }
@keyframes doneBtnIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* キラキラ（完了時に一度だけ） */
.bottle-spark { animation: sparkFade 1.8s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes sparkFade {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .update-overlay, .done-overlay { animation-duration: 0.001ms; }
  .done-btn { animation: none; }
  .bottle-spark { animation: none; opacity: 0.8; }
}

/* 読み上げ・検索エンジン用に存在させつつ、視覚的には隠す共通ユーティリティ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ホーム上部を詰める：冗長な「ホーム」見出しは視覚的に隠し（読み上げ用には残す）、
   セクションを上に上げて上部の空きを縮める。 */
#homeTitle {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
#viewHome .list-header { margin-bottom: 0; }
#viewHome .home-section:first-of-type { margin-top: 2px; }

/* ===== ホームのカードを「横長・縦並び・大きいアイコン」に統一 =====
   以前は2列の正方形カードでアイコンが小さかった。ストック/買うものカードと
   見た目を揃え、絵柄を大きく見やすくする。ファイル末尾＝最後に適用して上書き。 */
.home-card-grid {
  grid-template-columns: 1fr; /* 1列＝横長カードを縦に並べる */
}
.home-card-grid .compact-card {
  grid-template-columns: 46px minmax(0, 1fr) auto; /* アイコン | 文字 | 状態 */
  align-items: center;
  align-content: center;
  gap: 12px;
  min-height: 0;
  padding: 12px 14px;
  cursor: pointer; /* タップで該当画面へ飛ぶ */
}
.home-card-grid .compact-illustration {
  grid-row: auto;
  width: 44px;
  justify-self: center;
}
.home-card-grid .compact-illustration .category-icon,
.home-card-grid .compact-illustration .milk-pack-icon {
  width: 44px;
  height: 46px;
}
.home-card-grid .compact-card div {
  gap: 3px;
}
.home-card-grid .compact-card strong {
  min-height: 0;
  font-size: 1rem;
}
.home-card-grid .compact-card span {
  min-height: 0;
  -webkit-line-clamp: 1;
  font-size: 0.78rem;
}
.home-card-grid .compact-card em {
  grid-column: auto;
  justify-self: end;
  align-self: center;
  margin-top: 0;
}

/* ===== ホーム最下部の締めカード（マスコット＋状態メッセージ＋日替わり豆知識） ===== */
.home-outro {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 244, 236, 0.7));
  box-shadow: 0 12px 28px rgba(45, 35, 24, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  text-align: center;
}
.home-outro-mascot {
  display: flex;
  justify-content: center;
}
.mascot-svg {
  width: 72px;
  height: 72px;
}
.home-outro-message {
  margin: 6px 0 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
}
.home-tip {
  margin: 0 auto;
  max-width: 320px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}
/* マスコット「しおりん」の配色（やわらかい線・白ボディ・セージ色のキャップ） */
.mascot-svg .m-shadow { fill: rgba(53, 61, 51, 0.08); }
.mascot-svg .m-cap { fill: #8cb39c; stroke: #7a9d88; stroke-width: 1; }
.mascot-svg .m-body { fill: #fffdf8; stroke: #b8ab90; stroke-width: 1.6; }
.mascot-svg .m-arm { fill: none; stroke: #b8ab90; stroke-width: 1.6; stroke-linecap: round; }
.mascot-svg .m-foot { fill: #fffdf8; stroke: #b8ab90; stroke-width: 1.4; }
.mascot-svg .m-eye { fill: #5b5346; }
.mascot-svg .m-brow { fill: none; stroke: #5b5346; stroke-width: 1.4; stroke-linecap: round; }
.mascot-svg .m-cheek { fill: #f1b3a3; }
.mascot-svg .m-mouth path { fill: none; stroke: #5b5346; stroke-width: 1.6; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .hero-mascot .mascot-svg { animation: homeCardIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}