/* Shared additions for both home pages: "More sayings" and the pantry guide.
   Version A has --seal instead of --cinnabar, so colors fall back. */
.more-row { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.more-btn, .pantry-item { font: 500 15px var(--f-body); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: border-color 150ms cubic-bezier(0.16,1,0.3,1), background-color 150ms cubic-bezier(0.16,1,0.3,1); touch-action: manipulation; }
.more-btn:hover, .pantry-item:hover { border-color: var(--ink); }
.more-count { font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.pantry { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.pantry h3 { font-family: var(--f-display); font-weight: 400; font-size: 28px; margin: 0; }
.pantry h3 .han { color: var(--cinnabar, var(--seal)); font-size: .7em; margin-left: 8px; }
.pantry > div > p { color: var(--muted); margin-top: 8px; max-width: 52ch; }
.pantry-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pantry-item { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; border-radius: 6px; min-width: 88px; }
.pantry-item .han { font-family: var(--f-han); font-size: 20px; line-height: 1.2; }
.pantry-item small { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.pantry-item[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pantry-item[aria-pressed="true"] small { color: inherit; opacity: .75; }
.pantry-detail { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 24px; min-height: 220px; }
.pantry-detail .pd-name { margin: 0; }
.pantry-detail .pd-name .han { font-family: var(--f-han); font-size: 40px; color: var(--cinnabar, var(--seal)); }
.pantry-detail .pd-py { font-family: var(--f-mono); font-size: 14px; color: var(--jade); margin-left: 8px; }
.pantry-detail h4 { font-family: var(--f-display); font-weight: 400; font-size: 24px; margin: 8px 0 0; }
.pantry-detail p { color: var(--muted); font-size: 15.5px; margin-top: 8px; }
.pantry-detail .pd-buy { color: var(--ink); }
/* Zodiac extras: your 本命年 years, matches, compare, share */
.zx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 32px; border-top: 1px solid var(--line); }
.zx-col { padding: 24px 24px 8px 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.zx-col + .zx-col { padding-left: 24px; border-left: 1px solid var(--line); }
.zx h3 { font-family: var(--f-display); font-weight: 400; font-size: 22px; margin: 0; line-height: 1.3; }
.zx h3 .han { font-family: var(--f-han); color: var(--cinnabar, var(--seal)); font-size: .8em; margin-left: 6px; }
.zx h3 rt { display: inline; font-size: .6em; margin-left: .3em; }
.zx p { margin: 0; font-size: 15px; color: var(--muted); }
.zx p b { color: var(--ink); font-weight: 600; }
.zx-note { font-size: 13.5px !important; }
.zx-years { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.zx-years li { display: flex; gap: 14px; padding: 6px 10px; border-radius: 4px; font-size: 15px; }
.zx-years .zx-y { font-family: var(--f-mono); font-variant-numeric: tabular-nums; min-width: 3.2em; }
.zx-years li.past { color: var(--muted); }
.zx-years li.now { background: #B8372D; color: #FFF6F2; }
.zx-k { font-size: 13.5px !important; color: var(--ink) !important; font-weight: 600; margin-top: 6px !important; }
.zx-k ruby { font-family: var(--f-han); font-weight: 500; margin-right: 6px; }
.zx-k rt { display: inline; font-family: var(--f-mono); font-size: .8em; margin-left: .25em; color: var(--muted); }
.zx-sub { font-weight: 400; color: var(--muted); }
.zx-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.zx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 14.5px; color: var(--ink); }
.zx-chip .han { font-family: var(--f-han); font-size: 20px; line-height: 1; }
.zx-chip rt { font-size: 9px; color: var(--muted); }
.zx-clash .zx-chip { border-style: dashed; }
.zx-pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px !important; }
.zx-verdict { margin-top: 6px; }
.zx-col .zfields { margin-top: 2px; }
.zx-share { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 20px; border-top: 1px solid var(--line); margin-top: 16px; }
.zx-status { font-size: 14px; color: var(--jade); overflow-wrap: anywhere; }
.zx-wait .zx-col, .zx-wait .zx-share { opacity: .45; pointer-events: none; }
@media (max-width: 960px) {
  .zx { grid-template-columns: minmax(0, 1fr); }
  .zx-col, .zx-col + .zx-col { padding: 20px 0 8px; border-left: 0; }
  .zx-col + .zx-col { border-top: 1px solid var(--line); }
}

@media (max-width: 820px) { .pantry { grid-template-columns: minmax(0, 1fr); } .pantry-detail { min-height: 0; } }