/* 見た目の着せかえ（2026-10-27）：style.css / app.css のあとに読み込み、色・文字の形・角・影だけを上書きする。
   文言や配置は変えない。ここに書いた値が A 案（ピンク×ラベンダー）。B〜E 案は theme-b.css などで変数を差しかえる。
   このファイルを外せば、元のモーヴ案に戻る */
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&display=swap");
:root {
  --bg: #FFF8FB;
  --surface: #FFF0F5;
  --card: #FFFFFF;
  --ink: #2A1E2E;
  --muted: #7B6B80;
  --line: #F3E1EA;
  --accent: #E8397D;
  --accent-dark: #C92566;
  --accent-soft: #FFE3EE;
  --hero: #FFF0F6;
  --lav: #EFE8FF;
  --lav-ink: #5B3FC4;
  --mint: #DDF5EC;
  --mint-ink: #136B56;
  --peach: #FFEEDD;
  --peach-ink: #8A4B12;
  --grad: linear-gradient(135deg, #FF6FA1 0%, #E8397D 55%, #B14BE0 100%);
  --logo-fill: var(--grad);
  --bar: var(--grad);
  --btn-shadow: 0 6px 16px rgba(232, 57, 125, 0.28);
  --shadow: 0 6px 22px rgba(201, 37, 102, 0.08);
  --shadow-lift: 0 10px 28px rgba(201, 37, 102, 0.16);
  --bw: 1px;
  --edge: var(--line);
  --r-card: 20px;
  --r-photo: 18px;
  --r-btn: 999px;
  --r-field: 14px;
  --hero-bg:
    radial-gradient(circle at 12% 18%, #FFD3E4 0, rgba(255, 211, 228, 0) 38%),
    radial-gradient(circle at 88% 22%, #E4D9FF 0, rgba(228, 217, 255, 0) 42%),
    radial-gradient(circle at 55% 110%, #FFE7C9 0, rgba(255, 231, 201, 0) 40%),
    #FFF4F8;
  --page-bg: var(--bg);
  --display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --body: "Noto Sans JP", system-ui, sans-serif;
  --head-w: 900;
  --price: var(--ink);
}

body { font-family: var(--body); background: var(--page-bg); letter-spacing: 0.01em; }
a { color: var(--accent-dark); }

/* 一番上のお知らせ帯 */
.test-bar { background: var(--bar); font-weight: 500; letter-spacing: 0.04em; }

/* 上の帯 */
.top { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 0; box-shadow: 0 1px 0 var(--line), 0 4px 18px rgba(0, 0, 0, 0.03); }
.logo { font-family: var(--display); font-weight: var(--head-w); font-size: 20px; letter-spacing: 0.01em; background: var(--logo-fill); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav a { font-weight: 500; }
.nav a:hover, .nav a.now { background: var(--accent-soft) !important; color: var(--accent-dark) !important; }

/* ボタン */
.btn { border-radius: var(--r-btn); letter-spacing: 0.04em; transition: transform 0.15s, box-shadow 0.15s; }
.btn.primary, .btn.send { background: var(--grad); box-shadow: var(--btn-shadow); }
.btn.primary:hover { background: var(--grad); transform: translateY(-1px); }
.btn.ghost { background: var(--card); border: max(var(--bw), 1.5px) solid var(--edge); }
.btn.ghost:hover { color: var(--accent-dark); }

/* 見出し */
.hero h1, .sec-head h2, .page-head h1, .trust h2, .item-info h1, .profile-top h1, .doc h1, .sub-head { font-family: var(--display); font-weight: var(--head-w); }
.hero { background: var(--hero-bg); }
.hero h1 { letter-spacing: 0.02em; line-height: 1.35; }
.trust { background: rgba(255, 255, 255, 0.88); border: var(--bw) solid var(--edge); border-radius: var(--r-card); padding: 22px; box-shadow: var(--shadow); counter-reset: tr; }
.trust-item { counter-increment: tr; }
.trust-item::before { content: counter(tr); flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; font-size: 14px; color: #fff; background: var(--grad); }
.sec-head h2::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; transform: translateY(-2px); }

/* 検索 */
.search-box { border: max(var(--bw), 1.5px) solid var(--edge); border-radius: var(--r-btn); box-shadow: var(--shadow); }
.search-box:focus-within { border-color: var(--accent); }

/* 商品カード */
.items { gap: 20px 14px; }
.photo { border-radius: var(--r-photo); background-color: var(--surface); }
.item a .photo { border: var(--bw) solid var(--edge); transition: transform 0.18s, box-shadow 0.18s; }
.item a:hover .photo { outline: 0 !important; transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.item .name { font-size: 13px; color: var(--ink); opacity: 0.85; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item .price { font-family: var(--display); font-size: 17px; font-weight: var(--head-w); color: var(--price); }
.sold-mark { border-radius: 0 var(--r-btn) var(--r-btn) 0; background: rgba(30, 22, 34, 0.86); }
.sold-mark.decided { background: var(--accent); }

/* 札とチップ */
.tag { border-radius: var(--r-btn); padding: 2px 9px; background: var(--accent-soft); color: var(--accent-dark); }
.tag.deliv.hand { background: var(--mint); color: var(--mint-ink); border: 0; }
.tag.deliv.free { background: var(--lav); color: var(--lav-ink); border: 0; }
.tag.deliv.paid { background: var(--peach); color: var(--peach-ink); border: 0; }
.hand-mark { background: var(--mint-ink); }
.badge { color: var(--lav-ink); }
.chip { border: max(var(--bw), 1.5px) solid var(--edge); border-radius: var(--r-btn); background: var(--card); font-weight: 500; }
.chip[aria-pressed=true] { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; }
.cats-m a { background: var(--card); border: max(var(--bw), 1.5px) solid var(--edge); border-radius: var(--r-field); font-weight: 500; }
.side h2 { color: var(--accent-dark); }
.side li a { border-radius: var(--r-field); }
.side li a:hover, .side li a.now { background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.side .chip { border: 0; background: transparent; }
.side .chip[aria-pressed=true] { background: var(--accent-soft); color: var(--accent-dark); }

/* カード類 */
.card, .member, .review, .seller-card, .thread-list a, .trade-box, .share-box, .plan-box, .report-box, .admin-list li {
  border: var(--bw) solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow);
}
.avatar { background-color: var(--accent-soft); color: var(--accent); font-family: var(--display); font-weight: 900; }
.profile-top { background: var(--hero-bg); }
.photo-edit label { background: var(--grad); }
.tabs button[aria-selected=true] { color: var(--accent-dark); border-bottom: 3px solid var(--accent); }

/* フォーム */
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=date], .field select, .field textarea, .composer textarea {
  border: max(var(--bw), 1.5px) solid var(--edge); border-radius: var(--r-field); background: var(--card);
}
.field input:focus, .field select:focus, .field textarea:focus, .composer textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.checks { background: var(--surface); border-radius: var(--r-card); }
.photo-add { border-color: var(--accent); background: var(--card); border-radius: var(--r-field); }

/* お知らせ */
.notice { background: var(--lav); color: var(--lav-ink); border-radius: var(--r-field); }
.warn, .plan-bar { border-radius: var(--r-field); }
.msg { border-radius: 20px 20px 20px 6px; }
.msg.mine { border-radius: 20px 20px 6px 20px; background: var(--accent-soft); }
.stepper li.now { border-color: var(--accent); color: var(--accent-dark); }

/* フッター・下のメニュー */
footer { background: var(--card); border-top: var(--bw) solid var(--edge); }
.tabbar { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 0; box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.05); }
.tabbar a.now { color: var(--accent); }
.tabbar .sell { width: 46px; height: 34px; border-radius: var(--r-btn); background: var(--grad); box-shadow: var(--btn-shadow); }
.toast { border-radius: var(--r-btn); }

@media (min-width: 1024px) {
  .logo { font-size: 24px; }
  .hero h1 { font-size: 50px; }
  .items { gap: 28px 22px; }
}