/* 配色と基本寸法。見た目を変える場合はここから調整する。 */
:root {
  color-scheme: light;
  --wine: #65152b;
  --wine-dark: #501020;
  --ink: #292321;
  --muted: #6f6561;
  --paper: #fbf9f5;
  --soft: #eee7df;
  --rule: rgb(41 35 33 / 28%);
  --content: 1180px;
}

/* 基本設定。自動文字拡大を抑え、buttonと通常テキストの見え方を揃える。 */
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

button,
input {
  font: inherit;
}

button,
label[for] {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

main {
  width: min(var(--content), calc(100% - clamp(28px, 5vw, 64px)));
  margin-inline: auto;
  padding-block: 20px 36px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Masthead ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(34px, 6vw, 72px);
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--wine);
}

.brand {
  color: var(--wine);
  font: 500 clamp(1.35rem, 2.5vw, 1.85rem) "Shippori Mincho", "Yu Mincho", serif;
  text-decoration: none;
  white-space: nowrap;
}

#show-favorites {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}

#favorite-count {
  color: var(--wine);
}

/* ---------- Home ---------- */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(36px, 7vw, 84px);
  align-items: center;
}

.welcome,
.upload-card,
.recent-wines {
  min-width: 0;
}

.welcome {
  padding-block: clamp(10px, 4vw, 48px);
}

.welcome h1 {
  margin: 0 0 clamp(24px, 4vw, 38px);
  color: var(--ink);
  font: 500 clamp(2.4rem, 6.2vw, 5rem)/1.2 "Shippori Mincho", "Yu Mincho", serif;
  letter-spacing: .01em;
}

.welcome h1 span {
  display: block;
  white-space: nowrap;
}

.lead {
  max-width: 540px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(.9rem, 1.6vw, 1rem);
  line-height: 2;
  word-break: normal;
  overflow-wrap: break-word;
}

/* ---------- Photo action ---------- */
.upload-card input {
  display: none;
}

#dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(310px, 48vw, 440px);
  padding: clamp(34px, 6vw, 62px) clamp(24px, 5vw, 44px);
  background: var(--wine);
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease;
}

#dropzone:hover,
#dropzone.drag {
  background: var(--wine-dark);
}

#dropzone strong {
  margin: 18px 0 clamp(48px, 8vw, 74px);
  color: #fff;
  font: 500 clamp(1.5rem, 3.5vw, 2.35rem) "Shippori Mincho", "Yu Mincho", serif;
}

#dropzone span {
  color: rgb(255 255 255 / 90%);
}

#dropzone .action-step {
  margin-top: 22px;
  font: .72rem "Shippori Mincho", "Yu Mincho", serif;
  letter-spacing: .12em;
}

.camera-icon {
  position: relative;
  width: 58px;
  height: 44px;
  border: 3px solid #fff;
  color: transparent !important;
}

.camera-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.camera-icon::after {
  content: "";
  position: absolute;
  left: 10px;
  top: -9px;
  width: 20px;
  height: 7px;
  background: #fff;
}

#preview,
#result-label-image {
  display: none;
  width: 100%;
  max-height: 440px;
  margin: 0 0 18px;
  background: transparent;
  object-fit: contain;
  filter: none;
}

#result-label-image {
  width: min(100%, 440px);
  margin: 18px auto 24px;
}

#identify,
#reset,
#search-offers,
.retry-button {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 13px 20px;
  border: 0;
  background: var(--wine);
  color: #fff;
  font-weight: 700;
  text-align: center;
}

#status {
  min-height: 1.4em;
  margin: 14px 0 0;
  color: var(--muted);
  text-align: center;
}

.retry {
  margin-top: 18px;
  padding-block: 18px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.retry strong {
  display: block;
  color: var(--wine);
}

/* ---------- Recent wines ---------- */
.recent-wines {
  grid-column: 1 / -1;
  margin-top: 20px;
  padding-top: 22px;
}

.recent-heading,
.favorites-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.recent-heading h2,
.favorites-title h2 {
  margin: 0;
  color: var(--ink);
  font: 500 clamp(1.25rem, 2.5vw, 1.8rem) "Shippori Mincho", "Yu Mincho", serif;
}

.recent-heading button,
.favorites-title button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wine);
}


/* 3タブ共通の一覧。文字は wine-list-*、保存済み行だけ .favorite-item で行配置を補う。 */
.wine-list-item {
  --thumb: 84px;
  display: grid;
  grid-template-columns: var(--thumb) minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: center;
  width: 100%;
  min-height: 104px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.wine-list-item:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) var(--thumb) auto;
}
.wine-list-cover {
  display: block;
  grid-column: 1;
  grid-row: 1;
  width: var(--thumb);
  height: 80px;
  overflow: hidden;
  background: var(--soft);
}
.wine-list-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wine-list-placeholder { padding: 8px; }
.wine-list-placeholder::before { content: "WINE"; color: var(--wine); font-size: 1rem; }
.wine-list-placeholder span { display: block; margin-top: 12px; font-size: .65rem; }
.wine-list-item:nth-child(even) .wine-list-cover { grid-column: 2; }
.wine-list-copy, .favorite-item h3, .favorite-meta, .record-tags { grid-column: 2; min-width: 0; }
.wine-list-copy { grid-row: 1; display: block; }
.wine-list-item:nth-child(even) :is(.wine-list-copy, h3, .favorite-meta, .record-tags) { grid-column: 1; }
.wine-list-title {
  display: block; margin: 4px 0; font-size: 1rem; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere;
}
.wine-list-meta {
  display: block; margin: 0; color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wine-list-score { display: block; color: var(--wine); font-size: .8rem; font-weight: 400; line-height: 1.6; }
.wine-list-arrow {
  grid-column: 3; grid-row: 1; align-self: center;
  padding: 0; border: 0; background: transparent; color: var(--wine); font-size: 1rem;
}
/* 私のワインはタイトル・情報・操作の3行を画像と矢印がまたぐ。 */
.favorite-item :is(.wine-list-cover, .wine-list-arrow) { grid-row: 1 / 4; }
.favorite-title-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%;
  padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left;
}
.favorite-title-link:hover { color: var(--wine); text-decoration: underline; }
.record-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.record-tags button { padding: 5px 0; border: 0; background: transparent; font-size: .72rem; white-space: nowrap; }
.delete-favorite { color: var(--muted); text-decoration: underline; }

/* 記録画面のタブと分類フィルター。 */
.favorites { margin-top: 38px; }
.records-layout { margin-top: 8px; }
.records-layout > section { min-width: 0; }
.record-view-tabs, .record-filters {
  display: flex; gap: clamp(16px, 4vw, 36px); overflow-x: auto;
  border-bottom: 1px solid var(--rule);
}
.record-view-tabs { margin-top: 26px; }
.record-filters { margin-top: 18px; }
.record-view-tabs button, .record-filters button {
  flex: 0 0 auto; padding: 13px 0; border: 0; background: transparent;
  color: var(--muted); white-space: nowrap;
}
.record-view-tabs button { font-size: clamp(1rem, 2vw, 1.2rem); }
.record-view-tabs button.active, .record-filters button.active {
  color: var(--wine); box-shadow: inset 0 -2px var(--wine);
}
.section-kicker { color: var(--wine); font-size: .7rem; letter-spacing: .18em; }
#favorites-empty, #records-recent-empty, .matching-empty, .matching-note {
  color: var(--muted); font-size: .8rem;
}
.food-search { padding-top: 24px; }
.food-search > label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .8rem; }
#food-select {
  width: min(420px, 100%); min-height: 46px; padding: 8px 30px 8px 0;
  border: 0; border-bottom: 1px solid var(--wine); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit;
}

/* 詳細画面と登録トグル。登録状態の装飾は一覧と共有する。 */
.result { width: min(760px, 100%); margin: 0 auto; padding-top: 32px; }
#back-from-result {
  display: block; margin-bottom: 18px; padding: 8px 0; border: 0;
  background: transparent; color: var(--wine); font: inherit;
}
.result-title { display: flex; justify-content: space-between; color: var(--wine); font-size: .8rem; }
.result h2 { margin: 14px 0 3px; color: var(--wine); font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 500; overflow-wrap: anywhere; }
.producer { margin: 0 0 22px; color: var(--muted); }
.record-buttons { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--rule); }
.save-category {
  min-width: 0; min-height: 44px; padding: 10px 5px; border: 0;
  background: transparent; font-weight: 700;
}
:is(.save-category, .record-category-toggle) { color: var(--muted); }
:is(.save-category, .record-category-toggle).registered {
  color: var(--wine); text-decoration: underline; text-underline-offset: 4px;
}
.favorite-status { min-height: 1.2em; margin: 8px 0 12px; color: var(--muted); font-size: .75rem; }
dl, .taste-evaluation {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  column-gap: 24px; margin: 20px 0;
}
dl > div, .taste-evaluation > div { min-width: 0; padding: 16px 0; border-top: 1px solid var(--rule); }
dl .wide { grid-column: 1 / -1; }
dt, .taste-evaluation span { display: block; margin-bottom: 5px; color: var(--muted); font-size: .75rem; }
dd { margin: 0; }
.taste-evaluation p { margin: 7px 0; line-height: 1.75; }
.evaluation-heading, .shopping h3, .computed-pairings h3 {
  margin: 28px 0 10px; color: var(--wine); font-size: 1.25rem; font-weight: 500;
}
.computed-pairings { margin-top: 28px; }
#wine-food-matches { border-top: 1px solid var(--rule); }
#wine-food-matches .match-result { padding: 9px 0; }
#wine-food-matches .match-result > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  white-space: nowrap; font-size: clamp(.7rem, 2.9vw, 1rem);
}
#wine-food-matches .match-result strong { font-weight: 500; }
#wine-food-matches .match-result span { flex: 0 0 auto; color: var(--wine); font-size: .8em; }
.result-details { margin-top: 12px; border-block: 1px solid var(--rule); }
.result-details summary { padding: 13px 0; color: var(--muted); font-size: .85rem; cursor: pointer; }
.result-details[open] summary { border-bottom: 1px solid var(--rule); }
.result-details > div { padding: 14px 0; line-height: 1.65; }
.result-details a { overflow-wrap: anywhere; }
#reset { border-top: 1px solid var(--wine); background: transparent; color: var(--wine); }

/* Shopping. */
.shopping { margin-top: 26px; }
.affiliate-notice, .shopping-note { color: var(--muted); font-size: .75rem; }
.offer {
  --offer-image: 90px; display: grid; grid-template-columns: var(--offer-image) minmax(0, 1fr);
  gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule);
}
.offer img { width: var(--offer-image); height: var(--offer-image); background: #fff; object-fit: contain; }
.offer > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.offer-shop { color: var(--muted); font-size: .72rem; }
.offer strong { line-height: 1.45; overflow-wrap: anywhere; }
.offer-price { color: var(--wine); font-weight: 700; }
.offer a { padding: 8px 0; color: var(--wine); font-size: .85rem; text-decoration: underline; }
footer { padding: 36px 0 70px; color: var(--muted); font-size: .75rem; text-align: center; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
button:disabled { cursor: wait; opacity: .5; }

/* 狭い画面では画像を左に固定。文字サイズはタブごと・画面幅ごとに上書きしない。 */
@media (max-width: 560px) {
  main { width: calc(100% - 28px); }
  .topbar { gap: 12px; }
  #show-favorites { font-size: .78rem; }
  .welcome h1 { font-size: clamp(1.9rem, 10vw, 2.65rem); }
  #dropzone { min-height: 310px; }
  .wine-list-item, .wine-list-item:nth-child(even) {
    --thumb: 76px; grid-template-columns: var(--thumb) minmax(0, 1fr) auto;
    min-height: 94px; padding: 11px 0; column-gap: 12px;
  }
  .wine-list-item .wine-list-cover { height: 70px; }
  .wine-list-item:nth-child(even) .wine-list-cover { grid-column: 1; }
  .wine-list-item:nth-child(even) :is(.wine-list-copy, h3, .favorite-meta, .record-tags) { grid-column: 2; }
  .save-category { font-size: .72rem; }
  /* 折り返し時だけ縦の間隔を詰める。横間隔とボタンの押せる領域は維持する。 */
  .record-tags { row-gap: 0; }
  .offer { --offer-image: 70px; }
}