/* 安かれ — 特価さむらい. Shared theme for lists, details, forms and admin. */
:root {
  --bg:#faf8f2; --surface:#fffefa; --surface-2:#f1f1e9; --text:#34352f;
  --muted:#666b5f; --line:#e1e3d7; --accent:#48634d; --accent-ink:#ffffff;
  --accent-weak:#e9eee3; --price:#b53d30; --hot:#b53d30; --hot-weak:#f8e8e1;
  --nv:#48634d; --or:#b53d30; --or-weak:#f8e8e1; --teal:#48634d;
  --pr-bg:#f4eedf; --pr-ink:#765b29; --pr-line:#e3d6b8;
  --staff:#48634d; --staff-weak:#e9eee3; --bot:#48634d; --bot-weak:#e9eee3;
  --ended:#717669; --warn-bg:#f8eddf; --warn-ink:#8b5428; --warn-line:#e7cfae;
  --error:#b53d30; --radius:18px; --shadow:none; --welcome:#edf0e4;
  --welcome-ink:#48634d; --speech:#fffefa; --speech-ink:#b53d30; --button:#48634d;
}
@media(prefers-color-scheme:dark) {
  :root { --bg:#1b211d; --surface:#252d27; --surface-2:#2e382f; --text:#eeeee3;
    --muted:#b4beae; --line:#435043; --accent:#b6cead; --accent-ink:#1b211d;
    --accent-weak:#354536; --price:#ffa18e; --hot:#ffa18e; --hot-weak:#4b302a;
    --nv:#b6cead; --or:#ffa18e; --or-weak:#4b302a; --teal:#b6cead;
    --pr-bg:#3b3424; --pr-ink:#e4c38a; --pr-line:#675635;
    --staff:#b6cead; --staff-weak:#354536; --bot:#b6cead; --bot-weak:#354536;
    --ended:#a2ad9d; --warn-bg:#3e3024; --warn-ink:#efc28f; --warn-line:#705335;
    --error:#ffa18e; --welcome:#2d3b2f; --welcome-ink:#d6e4c9; --speech:#f8f5e9;
    --speech-ink:#a8372c; --button:#b6cead; }
}
html { scroll-padding-top:24px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.deal-banner { position:relative; margin-bottom:30px; border-radius:20px; overflow:hidden; background:var(--welcome); }
.banner-viewport { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.banner-viewport::-webkit-scrollbar { display:none; }
.banner-slide { flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always; }
.banner-link { display:grid; grid-template-columns:minmax(0,1fr) 220px; align-items:center; gap:32px; min-height:250px; padding:26px 64px 50px; }
.banner-link:hover { text-decoration:none; }
.banner-link:focus-visible { outline-offset:-5px; }
.banner-copy { min-width:0; }
.banner-shop { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); margin-bottom:9px; }
.banner-copy h2 { font-size:23px; line-height:1.6; margin:0 0 12px; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.banner-price { color:var(--price); font-size:29px; font-weight:700; display:inline-block; margin-right:10px; }
.banner-price.ask { color:var(--accent); font-size:16px; }
.banner-shipping { color:var(--muted); font-size:13px; }
.banner-art { width:210px; height:190px; object-fit:contain; justify-self:center; }
.banner-controls[hidden] { display:none; }
.banner-arrow { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:48px; border:0; border-radius:50%; background:var(--surface); color:var(--accent); font-size:30px; line-height:1; cursor:pointer; }
.banner-arrow.prev { left:9px; }
.banner-arrow.next { right:9px; }
.banner-dots { display:flex; position:absolute; bottom:9px; left:50%; transform:translateX(-50%); background:rgba(35,45,36,.62); border-radius:999px; padding:0 7px; }
.banner-dot { display:grid; place-items:center; width:32px; height:34px; border:0; padding:0; background:transparent; cursor:pointer; }
.banner-dot span { width:9px; height:9px; border-radius:50%; background:#fff; opacity:.6; }
.banner-dot[aria-current] span { background:#f5bd92; opacity:1; width:11px; height:11px; }
.banner-empty { min-height:250px; display:grid; place-items:center; }
.banner-empty img { object-fit:contain; }
@media(max-width:640px) {
  .deal-banner { border-radius:16px; margin-bottom:24px; }
  .banner-link { grid-template-columns:minmax(0,1fr) 80px; min-height:222px; padding:22px 30px 49px; gap:10px; }
  .banner-copy h2 { font-size:15px; line-height:1.65; margin-bottom:9px; }
  .banner-shop { font-size:11px; margin-bottom:6px; }
  .banner-art { width:80px; height:110px; }
  .banner-price { font-size:24px; }
  .banner-price.ask { font-size:12px; }
  .banner-shipping { font-size:11px; }
  .banner-arrow { width:24px; height:44px; font-size:25px; background:transparent; }
  .banner-arrow.prev { left:1px; }
  .banner-arrow.next { right:1px; }
  .banner-dot { width:32px; height:36px; }
  .banner-empty { min-height:222px; }
  .banner-empty img { width:140px; height:140px; }
}
@media(pointer:coarse) { .banner-dot { width:44px; height:44px; } .banner-arrow { min-width:28px; } }
body { font-size:15px; line-height:1.75; }
.wrap { max-width:1160px; padding-left:24px; padding-right:24px; }
.page { padding-top:26px; padding-bottom:64px; }
.site-header { position:static; border-bottom:1px solid var(--line); background:var(--surface); }
.head { min-height:108px; gap:30px; padding-top:16px; padding-bottom:16px; }
.logo { gap:8px; flex-shrink:0; }
.logo-mascot { width:64px; height:64px; object-fit:contain; }
.logo-text b { font-size:27px; line-height:1.1; letter-spacing:-.045em; transform:skewX(-9deg); color:var(--accent); }
.logo-first { font-size:37px; margin-right:2px; }
.logo-text small { margin-top:7px; font-size:11px; color:var(--muted); }
.hsearch { border:1px solid var(--line); background:var(--bg); border-radius:999px; max-width:520px; }
.hsearch:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.hsearch input { padding:12px 18px; font-size:15px; }
.hsearch button { display:flex; align-items:center; gap:6px; background:var(--button); color:var(--accent-ink); padding:0 20px; }
.hpost { border-radius:999px; padding:11px 17px; background:var(--accent-weak); color:var(--accent); font-size:14px; }
.gnav { background:var(--surface); }
.gnav-inner { gap:4px; padding-top:0; padding-bottom:12px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.gnav a { color:var(--muted); padding:7px 13px; font-size:13px; border:0; border-radius:999px; }
.gnav a:hover { background:var(--surface-2); color:var(--accent); }
.gnav a.on { background:var(--accent); color:var(--accent-ink); }
.layout { grid-template-columns:minmax(0,1fr) 260px; gap:28px; }
.layout > .sidebar { order:initial; position:static; }
.listing-layout.no-sidebar { grid-template-columns:minmax(0,1fr); }
.board { min-width:0; }
.page-h { font-size:23px; margin-bottom:17px; overflow-wrap:anywhere; }
.sortbar { gap:7px; margin-bottom:20px; font-size:13px; }
.pill { min-height:38px; align-items:center; padding:7px 13px; color:var(--accent); }
.pill.on { background:var(--accent); color:var(--accent-ink); }
.pill.toggle { background:transparent; }
.pill.toggle.on { background:var(--accent-weak); color:var(--accent); border-color:var(--line); }
.mallsel { margin-left:auto; }
.mallsel select { max-width:100%; min-height:38px; border-radius:10px; padding:7px 10px; }
.cards { display:flex; flex-direction:column; gap:12px; }
.dcard { display:grid; grid-template-columns:92px minmax(0,1fr); gap:20px; padding:23px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.dcard:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.dimg { height:92px; width:92px; margin:0; border-radius:16px; align-self:start; background:var(--surface-2); }
.dimg-ph { background:var(--accent-weak); color:var(--accent); gap:4px; }
.dimg-ph .ph-icon { width:32px; height:32px; stroke-width:1.5; }
.dimg-ph small { font-size:10px; letter-spacing:0; }
.dbody { min-width:0; }
.dshop { display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-size:12px; }
.dshop .chip { font-size:10px; padding:0 6px; height:18px; }
.dtitle { display:block; font-size:16px; font-weight:700; line-height:1.65; margin:5px 0 9px; overflow:visible; overflow-wrap:anywhere; -webkit-line-clamp:unset; }
.dprice { display:inline-block; font-size:27px; margin:0 9px 0 0; line-height:1.45; }
.dprice.ask { font-size:15px; color:var(--accent); }
.dbasis { display:inline-block; background:transparent; font-size:12px; padding:0; white-space:normal; }
.dsub { font-size:13px; line-height:1.7; margin-top:4px; }
.dmeta { font-size:12px; line-height:1.7; padding-top:10px; gap:4px 12px; }
.checked-at { margin-left:auto; }
.dcard.ended { opacity:1; border-top-color:var(--line); background:var(--surface-2); }
.dcard.ended .dtitle { color:var(--muted); }
.dcard.ended .dprice { color:var(--ended); }
.hotstrip { background:var(--or-weak); padding:16px; border:0; margin-bottom:20px; border-radius:18px; }
.hotstrip h2 { flex-wrap:wrap; }
.hotstrip h2 small { font-size:12px; }
.card { padding:20px; border-radius:18px; font-size:13px; }
.card h2 { font-size:15px; margin-bottom:12px; }
.ending-card { background:var(--surface-2); }
.mini-list li { padding:14px 0; }
.mini-list a { font-size:13px; line-height:1.7; }
.mini-meta { display:block; margin-top:7px; }
.mini-meta .price { font-size:13px; }
.criteria-link { font-size:12px; color:var(--muted); padding:0 6px; }
.list-note { color:var(--muted); font-size:12px; line-height:1.8; margin:20px 2px 0; }
.empty { padding:36px 20px; border:1px solid var(--line); }
.empty img { object-fit:contain; margin-bottom:12px; }
.empty p { overflow-wrap:anywhere; }
.crumbs { margin:0 0 20px; }
.detail-title { font-size:25px; line-height:1.65; }
.price-card, .panel, .prose, .form, .comment-list { border-radius:18px; }
.price-card, .panel { padding:24px; }
.fine { line-height:1.9; }
.facts { gap:10px; }
.facts dd { min-width:0; overflow-wrap:anywhere; }
.vote { border-radius:999px; padding:11px 18px; }
.vote.end.on { background:var(--surface-2); color:var(--accent); border-color:var(--accent); }
.vote-help { line-height:1.9; }
.btn-primary { background:var(--button); color:var(--accent-ink); }
.btn-primary:hover { background:var(--button); }
.btn-cta { background:var(--price); color:var(--bg); border-radius:999px; }
.btn-cta:hover { background:var(--price); }
.site-footer { border-top:1px solid var(--line); background:var(--surface-2); margin-top:0; padding:36px 0; }
.footer-inner { font-size:12px; line-height:1.9; }
.footer-links { display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:22px; }
.footer-links a[aria-current] { font-weight:700; color:var(--accent); }
.admin-preview-note { padding:12px; background:var(--warn-bg); color:var(--warn-ink); border-radius:10px; }
@media(max-width:1000px) {
  .layout { grid-template-columns:minmax(0,1fr) 220px; gap:20px; }
  .head { gap:16px; }
}
@media(max-width:900px) {
  .layout { grid-template-columns:minmax(0,1fr); }
  .layout > .sidebar { order:2; }
}
@media(max-width:640px) {
  body { font-size:15px; }
  .wrap { padding-left:16px; padding-right:16px; }
  .page { padding-top:18px; padding-bottom:40px; }
  .head { min-height:0; flex-wrap:wrap; gap:12px; padding-top:12px; padding-bottom:12px; }
  .logo-mascot { width:48px; height:48px; }
  .logo-text b { font-size:23px; }
  .logo-first { font-size:31px; }
  .logo-text small { display:none; }
  .hpost { font-size:12px; padding:9px 12px; margin-left:auto; }
  .hsearch { flex-basis:100%; order:3; max-width:none; }
  .hsearch input { font-size:16px; padding:10px 15px; }
  .hsearch button { padding:0 16px; }
  .gnav-inner { padding-bottom:10px; }
  .gnav a { padding:7px 12px; }
  .page-h { font-size:21px; margin-bottom:14px; }
  .sortbar { gap:5px; }
  .pill { padding:7px 11px; }
  .mallsel { margin-left:0; flex-basis:100%; margin-top:5px; }
  .mallsel select { width:100%; font-size:14px; }
  .dcard { grid-template-columns:58px minmax(0,1fr); gap:12px; padding:18px 14px; border-radius:16px; }
  .dimg { width:58px; height:62px; border-radius:12px; }
  .dimg-ph .ph-icon { width:27px; height:27px; }
  .dimg-ph small { display:none; }
  .dtitle { font-size:15px; line-height:1.7; }
  .dprice { font-size:25px; }
  .dprice.ask { font-size:14px; }
  .dsub { font-size:12px; }
  .dmeta { font-size:11px; gap:5px 9px; }
  .checked-at { margin-left:0; }
  .detail-title { font-size:21px; }
  .price-card, .panel { padding:18px; }
  .facts div { grid-template-columns:5em minmax(0,1fr); }
  .btn-cta { width:100%; white-space:normal; }
  .cta-row { gap:8px; }
  .tier-labels { font-size:11px; line-height:1.6; }
  .footer-links { gap:10px 16px; }
  .hotstrip { padding:12px; }
}
