/* ほめちっぷ 共通スタイル */
:root {
  --milk: #FFF6E9;
  --choco: #4A3B33;
  --choco-deep: #2E241F;
  --pink: #FF7EB0;
  --cheek: #FF8FAB;
  --white: #FFFFFF;
  --line: 2.5px solid var(--choco);
  --dots: radial-gradient(circle, var(--milk) 0 4px, transparent 4.5px);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--milk);
  color: var(--choco);
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  font-weight: 500;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--choco); }
a:hover { color: var(--choco-deep); }
h1, h2, h3, .maru { font-family: 'Kiwi Maru', serif; font-weight: 500; margin: 0; }
h1 { font-size: 26px; line-height: 1.3; }
h2 { font-size: 20px; line-height: 1.4; }
h3 { font-size: 17px; }
p { margin: 0; }
.wrap { max-width: 480px; margin: 0 auto; padding: 0 20px 40px; }
.wrap-wide { max-width: 960px; }

/* 上の帯 */
.topbar {
  background-color: var(--pink);
  background-image: var(--dots);
  background-size: 26px 26px;
  border-bottom: var(--line);
  border-radius: 0 0 28px 28px;
  padding: 12px 16px;
  margin-bottom: 20px;
}
.topbar-inner { max-width: 480px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand {
  background: var(--milk); border: var(--line); border-radius: 999px;
  padding: 2px 14px 2px 6px; display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none; font-family: 'Kiwi Maru', serif; font-size: 18px;
}
.topbar nav { display: flex; gap: 6px; }
.chip {
  background: var(--milk); border: var(--line); border-radius: 999px;
  padding: 4px 12px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}

.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 10px; align-items: center; }
.between { justify-content: space-between; }
.muted { font-size: 13px; opacity: 0.85; }
.small { font-size: 12px; }
.center { text-align: center; }

.card {
  background: var(--white); border: var(--line); border-radius: 20px; padding: 14px 16px;
}
.card-link { display: block; text-decoration: none; }
.card-link:hover { background: #FFFDF8; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border-radius: 999px;
  background: var(--choco); color: var(--milk); border: none;
  font-family: 'Kiwi Maru', serif; font-size: 17px; font-weight: 500;
  text-decoration: none; cursor: pointer; width: 100%;
}
.btn:hover { background: var(--choco-deep); color: var(--milk); }
.btn:focus-visible, .chip:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .homemyaru-btn:focus-visible {
  outline: 3px solid var(--pink); outline-offset: 2px;
}
.btn-sub { background: var(--white); color: var(--choco); border: var(--line); }
.btn-sub:hover { background: #FFFDF8; color: var(--choco); }
.btn[disabled] { opacity: 0.5; cursor: default; }

label { font-size: 14px; font-weight: 700; display: block; margin-bottom: 4px; }
input[type=text], input:not([type]), textarea, select {
  width: 100%; font: inherit; color: var(--choco);
  background: var(--white); border: var(--line); border-radius: 14px; padding: 10px 12px; min-height: 48px;
}
textarea { min-height: 96px; resize: vertical; }

.notice { background: var(--white); border: 2.5px dashed var(--choco); border-radius: 16px; padding: 10px 14px; font-size: 13px; }
.error { background: #FFE9EE; border: var(--line); border-radius: 16px; padding: 10px 14px; font-size: 14px; }

.pill {
  display: inline-block; border: 2px solid var(--choco); border-radius: 999px; padding: 0 10px;
  font-size: 12px; font-weight: 700; background: var(--white);
}
.pill-pink { background: var(--pink); }

/* ほめみゃるの大きいボタン */
.homemyaru-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 220px; height: 220px; margin: 0 auto; border-radius: 999px;
  border: 3px solid var(--choco); background: var(--milk); cursor: pointer;
  justify-content: center; font: inherit; color: inherit;
  box-shadow: 0 6px 0 var(--choco);
  transition: transform .08s;
}
.homemyaru-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--choco); }
.dots-ring {
  width: 252px; height: 252px; margin: 0 auto; border-radius: 999px; border: 3px solid var(--choco);
  background-color: var(--pink); background-image: var(--dots); background-size: 24px 24px;
  display: flex; align-items: center; justify-content: center;
}

.voice { background: var(--white); border: var(--line); border-radius: 18px; padding: 12px 14px; }
.voice .meta { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; margin-top: 6px; }
.dot { width: 12px; height: 12px; border-radius: 999px; border: 2px solid var(--choco); display: inline-block; background: var(--pink); }

.list-plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rank-no {
  width: 36px; height: 36px; border-radius: 999px; border: var(--line); background: var(--pink);
  display: inline-flex; align-items: center; justify-content: center; font-family: 'Kiwi Maru', serif; flex-shrink: 0;
}
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs a { text-decoration: none; }
.tabs .on { background: var(--pink); }

#map { height: 260px; border: var(--line); border-radius: 20px; overflow: hidden; }
.foot { margin-top: 32px; font-size: 12px; text-align: center; }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--white); border: var(--line); border-radius: 12px; padding: 10px; word-break: break-all; }
.card-link.row { display: flex; }

/* ---- おすそわけ：使う画面（動きでスクショ・録画の使い回しを防ぐ） ---- */
.osu-live .dots-ring { animation: osu-dots 5s linear infinite; }
@keyframes osu-dots { to { background-position: 48px 24px; } }
.osu-live .hm-live { transform-origin: 50% 92%; animation: osu-sway 1.8s ease-in-out infinite; }
@keyframes osu-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.osu-live .hm-ear-l { transform-box: view-box; transform-origin: 96px 76px; animation: osu-ear-l .9s ease-in-out infinite alternate; }
.osu-live .hm-ear-r { transform-box: view-box; transform-origin: 104px 76px; animation: osu-ear-r .9s ease-in-out infinite alternate; }
@keyframes osu-ear-l { from { transform: rotate(0deg); } to { transform: rotate(-12deg); } }
@keyframes osu-ear-r { from { transform: rotate(0deg); } to { transform: rotate(12deg); } }
.osu-clock { font-family: 'Kiwi Maru', serif; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.osu-used { filter: grayscale(1); opacity: .75; }
.hold-btn { position: relative; overflow: hidden; }
.hold-btn .hold-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--pink); opacity: .55; }
.hold-btn span { position: relative; }
.gift { border: var(--line); border-radius: 20px; background: var(--white); padding: 14px 16px; text-decoration: none; display: flex; gap: 12px; align-items: center; }
.gift-icon { width: 54px; height: 54px; flex-shrink: 0; border-radius: 999px; border: var(--line); background-color: var(--pink); background-image: var(--dots); background-size: 14px 14px; display: flex; align-items: center; justify-content: center; }
.foot-card { border: 2.5px dashed var(--choco); border-radius: 20px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; text-decoration: none; background: var(--white); }
.badge-n { display: inline-flex; min-width: 24px; height: 24px; border-radius: 999px; background: var(--pink); border: 2px solid var(--choco); align-items: center; justify-content: center; font-size: 13px; font-weight: 700; padding: 0 6px; }
#mymap { height: 240px; border: var(--line); border-radius: 20px; overflow: hidden; }

/* ---- ほめスタンプ（0.3） ---- */
.stamp-pick { display: flex; flex-wrap: wrap; gap: 8px; border: none; padding: 0; margin: 0; }
.stamp-pick legend { font-size: 14px; font-weight: 700; margin-bottom: 6px; padding: 0; }
.stamp {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px;
  border: var(--line); border-radius: 999px; background: var(--white); font-weight: 700; font-size: 14px; cursor: pointer;
  user-select: none;
}
.stamp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stamp:has(input:checked) { background: var(--pink); box-shadow: 0 3px 0 var(--choco); transform: translateY(-1px); }
.stamp:has(input:focus-visible) { outline: 3px solid var(--pink); outline-offset: 2px; }
.stamp:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.stamp-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stamp-bars li { display: grid; grid-template-columns: 9.5em 1fr 2.5em; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.stamp-bars .bar { height: 14px; border: 2px solid var(--choco); border-radius: 999px; background: var(--white); overflow: hidden; }
.stamp-bars .bar span { display: block; height: 100%; background: var(--pink); }
.stamp-bars .n { text-align: right; font-family: 'Kiwi Maru', serif; }
.stamp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.for-shop { border: 2.5px dashed var(--choco); border-radius: 16px; padding: 10px 14px; font-size: 13px; background: var(--white); }

/* ---- 0.4：写真とGoogleの候補 ---- */
.shop-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--line); border-radius: 18px; display: block; background: var(--white); }
.my-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.my-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--choco); border-radius: 12px; display: block; }
.thumb { width: 48px; height: 48px; object-fit: cover; border: 2px solid var(--choco); border-radius: 10px; flex-shrink: 0; }
.photo-box { display: flex; flex-direction: column; gap: 8px; }
.photo-box img { max-width: 100%; border: var(--line); border-radius: 16px; }
.file-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border: 2.5px dashed var(--choco); border-radius: 999px; background: var(--white); font-weight: 700; cursor: pointer; }
.file-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file-btn:focus-within { outline: 3px solid var(--pink); outline-offset: 2px; }
.place-list { list-style: none; margin: 6px 0 0; padding: 0; border: var(--line); border-radius: 14px; background: var(--white); overflow: hidden; }
.place-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 48px; padding: 8px 12px; border: none; border-bottom: 1px solid #E8DED3; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.place-item span { font-size: 12px; }
.place-item:hover, .place-item:focus { background: #FFF0F6; }
.gmaps { display: inline-flex; align-items: center; gap: 6px; }

/* 声をかける候補 */
.chip-on { background: var(--pink); }
.lead input[readonly] { background: #FFFDF8; }

/* シェア画像 */
.share-box { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.share-box img { width: 100%; max-width: 360px; align-self: center; border: var(--line); border-radius: 16px; }
.share-box .row { flex-wrap: wrap; }
.share-box .btn { flex: 1; min-width: 9em; }