/* ==============================================
   対魔忍同人サーチ — 和×忍ダークUI
   2カラム: 左フィルタ + 右リアルタイム結果
   ============================================== */

/* --- Tokens --- */
:root {
  --c-bg:       #0b0b14;
  --c-surface:  #111122;
  --c-panel:    #161630;
  --c-input:    #1b1b38;
  --c-border:   #2d2d55;
  --c-border-l: #3e3e6e;
  --c-text:     #eae7f2;
  --c-text-2:   #b8b2d0;
  --c-text-3:   #8a84a8;
  --c-accent:   #d1344e;
  --c-accent-h: #ec3f5e;
  --c-accent-bg:rgba(209,52,78,.15);
  --c-teal:     #3eddb5;
  --c-teal-bg:  rgba(62,221,181,.14);
  --c-gold:     #f0c040;
  --c-fanza:    #e82060;
  --c-dlsite:   #0880e8;
  --font:       'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-d:     'Shippori Mincho', serif;
  --r:          6px;
  --side-w:     300px;
  --header-h:   56px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ===== Header ===== */
.g-header {
  position: sticky; top:0; z-index: 100;
  height: var(--header-h);
  background: rgba(11,11,20,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.g-header__inner {
  max-width: 1400px; margin:0 auto;
  height: 100%;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
}
.g-header__brand { display:flex; align-items:center; gap:12px; }
.g-header__icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-family: var(--font-d); font-size: 1.25rem; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--c-accent), #8b2040);
  border-radius: 8px;
  flex-shrink: 0;
}
.g-header__title {
  font-family: var(--font-d);
  font-size: 1.15rem; font-weight: 700; color: #fff;
  letter-spacing: .06em; line-height: 1.2;
}
.g-header__sub { font-size: .72rem; color: var(--c-text-2); line-height:1.3; }
.g-header__nav { margin-left:auto; }
.g-header__link {
  font-size: .78rem; color: var(--c-text-2);
  text-decoration: none; border-bottom: 1px dashed var(--c-border-l);
  transition: color .15s;
}
.g-header__link:hover { color: var(--c-teal); }
.g-header__toggle {
  display: none;
  align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--c-border-l); border-radius: var(--r);
  background: transparent; color: var(--c-text-2);
  font-size: .82rem; font-family: var(--font);
  cursor: pointer;
}

/* ===== 2-col Layout ===== */
.g-layout {
  display: flex;
  max-width: 1400px; margin:0 auto;
  min-height: calc(100vh - var(--header-h));
}

/* ===== Sidebar ===== */
.g-side {
  width: var(--side-w); flex-shrink:0;
  padding: 16px 14px 32px;
  border-right: 1px solid var(--c-border);
  overflow-y: auto;
  height: calc(100vh - var(--header-h));
  position: sticky; top: var(--header-h);
  background: var(--c-surface);
}

.sf { margin-bottom: 18px; }
.sf__head {
  font-size: .78rem; font-weight: 700; color: var(--c-text-2);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.sf__badge {
  display: inline-grid; place-items:center;
  min-width: 20px; height: 20px; padding: 0 5px;
  font-size: .68rem; font-weight: 700; color: #fff;
  background: var(--c-accent); border-radius: 10px;
}
.sf__hint {
  font-size: .78rem; color: var(--c-text-3);
  margin: -4px 0 6px; line-height: 1.4;
}

.sf__input {
  width: 100%; padding: 10px 12px;
  background: var(--c-input); border: 1px solid var(--c-border);
  border-radius: var(--r); color: var(--c-text);
  font-size: .9rem; font-family: var(--font);
  outline: none; transition: border-color .15s;
}
.sf__input:focus { border-color: var(--c-accent); }
.sf__input--s { font-size: .88rem; padding: 8px 10px; margin-bottom: 6px; }

/* pills */
.sf__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  padding: 7px 16px; border-radius: 20px;
  background: var(--c-input); border: 1px solid var(--c-border);
  color: var(--c-text-2); font-size: .88rem; font-family: var(--font);
  cursor: pointer; transition: all .15s;
}
.pill:hover { border-color: var(--c-text-3); color: var(--c-text); }
.pill.is-on {
  background: var(--c-accent-bg); border-color: var(--c-accent);
  color: var(--c-accent);
}

/* char list */
.sf__list {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--c-border); border-radius: var(--r);
  background: var(--c-input); padding: 4px;
}

.ck {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 4px;
  font-size: .88rem; color: var(--c-text-2); cursor: pointer;
  transition: background .1s;
}
.ck:hover { background: rgba(209,52,78,.08); }
.ck input { accent-color: var(--c-accent); width:16px; height:16px; }
.ck__nm { flex:1; }
.ck__ct {
  font-size: .78rem; color: #c8c4da;
  background: #2e2e58; border-radius: 8px;
  padding: 2px 7px; min-width: 24px; text-align: center;
}

/* genre modal button */
.sf__modal-btn {
  width:100%; padding:10px 14px;
  background:var(--c-input); border:1px solid var(--c-border);
  border-radius:var(--r); color:var(--c-text-2);
  font-size:.88rem; font-family:var(--font); cursor:pointer;
  text-align:left; transition:all .15s;
}
.sf__modal-btn:hover { border-color:var(--c-accent); color:var(--c-accent); }

/* selected genre tags in sidebar */
.sf__selected-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.sf__sel-tag {
  display:inline-flex; align-items:center; gap:3px;
  padding:4px 10px; border-radius:14px;
  background:var(--c-accent-bg); color:var(--c-accent);
  font-size:.82rem; font-weight:500;
}
.sf__sel-tag--ex { background:rgba(220,38,38,.12); color:#f87171; }
.sf__sel-tag small { opacity:.7; }
.sf__sel-tag button {
  background:none; border:none; color:inherit; cursor:pointer;
  font-size:.9rem; line-height:1; padding:0 2px; opacity:.7;
}
.sf__sel-tag button:hover { opacity:1; }

/* genre selection modal */
.genre-modal {
  display:none; position:fixed; inset:0; z-index:350;
}
.genre-modal.is-vis { display:flex; align-items:center; justify-content:center; }
.genre-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.genre-modal__box {
  position:relative; z-index:1;
  width:min(700px,92vw); max-height:85vh;
  background:var(--c-surface); border:1px solid var(--c-border-l); border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  display:flex; flex-direction:column;
}
.genre-modal__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px 0;
}
.genre-modal__title { font-size:1.05rem; font-weight:700; color:var(--c-text); }
.genre-modal__x {
  width:34px; height:34px; border:none; border-radius:50%;
  background:rgba(255,255,255,.08); color:var(--c-text-2);
  font-size:1rem; cursor:pointer;
}
.genre-modal__x:hover { background:rgba(255,255,255,.15); }
.genre-modal__hint {
  padding:8px 22px 4px; font-size:.82rem; color:var(--c-text-3);
}
.genre-modal__search {
  display:block; width:calc(100% - 44px); margin:0 22px 12px;
  padding:9px 12px; border:1px solid var(--c-border); border-radius:var(--r);
  background:var(--c-input); color:var(--c-text);
  font-size:.88rem; font-family:var(--font); outline:none;
}
.genre-modal__search:focus { border-color:var(--c-accent); box-shadow:0 0 0 3px rgba(33,150,243,.1); }
.genre-modal__tags {
  flex:1; overflow-y:auto; padding:0 22px 16px;
  display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start;
}
.gm__tag {
  padding:8px 16px; border-radius:20px;
  background:var(--c-input); border:1px solid var(--c-border);
  font-size:.92rem; color:var(--c-text-2); font-family:var(--font);
  cursor:pointer; transition:all .15s;
}
.gm__tag:hover { border-color:var(--c-accent); color:var(--c-accent); }
.gm__tag.is-on {
  background:var(--c-accent); border-color:var(--c-accent); color:#fff;
}
.gm__tag small { opacity:.7; }
.genre-modal__footer {
  padding:12px 22px 18px; border-top:1px solid var(--c-border);
  text-align:right;
}
.genre-modal__done {
  padding:10px 32px; border-radius:8px; border:none;
  background:var(--c-accent); color:#fff;
  font-size:.92rem; font-weight:600; font-family:var(--font);
  cursor:pointer; transition:opacity .15s;
}
.genre-modal__done:hover { opacity:.85; }

.sf__loading { font-size: .82rem; color: var(--c-text-3); }
.sf__reset {
  width: 100%; padding: 8px; margin-top: 8px;
  background: transparent; border: 1px solid var(--c-border);
  border-radius: var(--r); color: var(--c-text-3);
  font-size: .82rem; font-family: var(--font); cursor: pointer;
  transition: all .15s;
}
.sf__reset:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* 「結果を見る」ボタン（モバイルドロワー用、PC時は非表示） */
.sf__apply { display: none; }

.sf__notice {
  margin-top: 16px; font-size: .7rem; color: var(--c-text-3);
  line-height: 1.5;
}

/* sidebar scrollbar */
.g-side::-webkit-scrollbar, .sf__list::-webkit-scrollbar, .sf__tags::-webkit-scrollbar { width:5px; }
.g-side::-webkit-scrollbar-track, .sf__list::-webkit-scrollbar-track { background:transparent; }
.g-side::-webkit-scrollbar-thumb { background: var(--c-border-l); border-radius:3px; }

/* ===== Main ===== */
.g-main {
  flex: 1; min-width: 0;
  padding: 16px 20px 40px;
}

/* toolbar */
.tb {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border);
}
.tb__count { font-size: .88rem; color: var(--c-text-2); }
.tb__count strong { color: var(--c-accent); font-size: 1.15rem; }
.tb__sort { display: flex; gap: 4px; }
.sb {
  padding: 4px 10px; border-radius: 4px;
  background: transparent; border: 1px solid transparent;
  color: var(--c-text-2); font-size: .78rem; font-family: var(--font);
  cursor: pointer; transition: all .12s;
}
.sb:hover { color: var(--c-text); }
.sb.is-on { background: var(--c-panel); border-color: var(--c-border-l); color: #fff; }

/* card grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.grid__msg {
  grid-column: 1/-1; text-align: center;
  padding: 60px 16px; color: var(--c-text-3); font-size: .92rem;
}

/* spinner */
.spin {
  display: inline-block; width:18px; height:18px;
  border: 2px solid var(--c-border-l); border-top-color: var(--c-accent);
  border-radius: 50%; animation: sp .6s linear infinite;
  vertical-align: middle; margin-right: 8px;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* card */
.cd {
  display: flex; flex-direction: column;
  background: var(--c-panel); border: 1px solid var(--c-border);
  border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cd:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  border-color: var(--c-border-l);
}
.cd__img {
  position: relative; aspect-ratio: 7/10;
  overflow: hidden; background: var(--c-bg);
}
.cd__img img { width:100%; height:100%; object-fit:cover; transition: transform .3s; }
.cd:hover .cd__img img { transform: scale(1.06); }
.cd__src {
  position: absolute; top:6px; right:6px;
  width:24px; height:24px; border-radius:50%;
  display: grid; place-items:center;
  font-size: .6rem; font-weight:700; font-style:normal; color:#fff;
}
.cd__src--fanza { background: var(--c-fanza); }
.cd__src--dlsite { background: var(--c-dlsite); }

.cd__body { padding: 10px; flex:1; display:flex; flex-direction:column; gap:4px; }
.cd__title {
  font-size: .8rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cd__circle { font-size: .72rem; color: var(--c-text-2); }
.cd__row { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.cd__price { color: var(--c-accent); font-size: .88rem; }
.cd__row del { font-size:.72rem; color:var(--c-text-3); font-weight:400; }
.cd__star { font-size:.72rem; color:var(--c-gold); }
.cd__tags { display:flex; flex-wrap:wrap; gap:3px; }
.cd__ct {
  padding: 1px 7px; border-radius:10px;
  background: rgba(62,221,181,.16); color: var(--c-teal);
  font-size: .66rem; font-weight: 500;
}
.cd__tags--g .cd__gt {
  padding: 1px 6px; border-radius:4px;
  background: #2a2a52; color: var(--c-text-2);
  font-size: .64rem;
}

/* pager */
.pg { display:flex; justify-content:center; gap:5px; margin: 28px 0 16px; }
.pgb {
  min-width:34px; height:34px; padding:0 8px;
  display:inline-grid; place-items:center;
  border-radius:var(--r); border:1px solid var(--c-border);
  background:var(--c-panel); color:var(--c-text-2);
  font-size:.85rem; font-family:var(--font); cursor:pointer;
  transition: all .12s;
}
.pgb:hover { border-color:var(--c-accent); color:var(--c-accent); }
.pgb.is-cur { background:var(--c-accent); border-color:var(--c-accent); color:#fff; font-weight:700; }

/* footer */
.g-foot {
  text-align:center; padding:20px 0 0; margin-top:12px;
  border-top:1px solid var(--c-border);
  font-size:.75rem; color:var(--c-text-3);
}
.g-foot a { color:var(--c-text-3); text-decoration:underline; }

/* image lightbox */
.lb {
  display:none; position:fixed; inset:0; z-index:500;
}
.lb.is-vis { display:flex; align-items:center; justify-content:center; }
.lb__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.92); }
.lb__x {
  position:absolute; top:16px; right:20px; z-index:2;
  width:44px; height:44px; border:none; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff;
  font-size:1.4rem; cursor:pointer; transition:background .15s;
}
.lb__x:hover { background:rgba(255,255,255,.2); }
.lb__arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:52px; height:52px; border:none; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff;
  font-size:2rem; cursor:pointer; transition:background .15s;
  display:flex; align-items:center; justify-content:center;
}
.lb__arrow:hover { background:rgba(255,255,255,.25); }
.lb__arrow--prev { left:16px; }
.lb__arrow--next { right:16px; }
.lb__img-wrap {
  position:relative; z-index:1;
  max-width:90vw; max-height:85vh;
  display:flex; align-items:center; justify-content:center;
}
.lb__img {
  max-width:90vw; max-height:85vh; object-fit:contain;
  border-radius:4px;
}
.lb__counter {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:2; padding:6px 16px; border-radius:20px;
  background:rgba(0,0,0,.6); color:#fff;
  font-size:.88rem; font-weight:500;
}

/* work detail modal */
.modal {
  display:none; position:fixed; inset:0; z-index:400;
}
.modal.is-vis { display:flex; align-items:center; justify-content:center; }
.modal__backdrop {
  position:absolute; inset:0; background:rgba(0,0,0,.7);
}
.modal__box {
  position:relative; z-index:1;
  width:min(900px,92vw); max-height:90vh; overflow-y:auto;
  background:var(--c-surface); border:1px solid var(--c-border-l); border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.modal__x {
  position:absolute; top:12px; right:14px; z-index:2;
  width:36px; height:36px; border:none; border-radius:50%;
  background:rgba(255,255,255,.08); color:var(--c-text-2);
  font-size:1.1rem; cursor:pointer; transition:all .15s;
}
.modal__x:hover { background:rgba(255,255,255,.15); color:var(--c-text); }
.modal__inner { display:flex; gap:0; }
.modal__gallery {
  width:45%; flex-shrink:0; background:var(--c-bg);
  border-radius:14px 0 0 14px; padding:16px;
  display:flex; flex-direction:column; gap:10px;
}
.modal__main-img {
  aspect-ratio:7/10; overflow:hidden; border-radius:8px;
  background:var(--c-panel); display:flex; align-items:center; justify-content:center;
}
.modal__main-img img { width:100%; height:100%; object-fit:contain; cursor:zoom-in; }
.modal__thumbs { display:flex; gap:6px; overflow-x:auto; padding:2px 0; }
.modal__thumb {
  width:52px; height:52px; border-radius:6px; object-fit:cover;
  cursor:pointer; border:2px solid transparent;
  opacity:.5; transition:all .15s; flex-shrink:0;
}
.modal__thumb:hover { opacity:.8; }
.modal__thumb.is-on { border-color:var(--c-accent); opacity:1; }
.modal__info {
  flex:1; padding:28px 24px; display:flex; flex-direction:column; gap:14px;
}
.modal__title { font-size:1.15rem; font-weight:700; color:var(--c-text); line-height:1.4; }
.modal__circle { font-size:.85rem; color:var(--c-text-2); }
.modal__meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:.85rem; color:var(--c-text-2);
}
.modal__price b { font-size:1.2rem; color:var(--c-accent); }
.modal__price del { color:var(--c-text-3); font-size:.82rem; margin-right:4px; }
.modal__rating { color:var(--c-gold); }
.modal__rating small { color:var(--c-text-3); }
.modal__age {
  padding:2px 10px; border-radius:4px; font-size:.75rem; font-weight:600;
  background:var(--c-panel); color:var(--c-text-2);
}
.modal__date { color:var(--c-text-3); font-size:.82rem; }
.modal__actions { display:flex; gap:8px; flex-wrap:wrap; }
.modal__btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 24px; border-radius:8px; font-size:.9rem; font-weight:600;
  text-decoration:none; color:#fff; transition:opacity .15s;
}
.modal__btn:hover { opacity:.85; }
.modal__btn--fanza { background:#e82060; }
.modal__btn--dlsite { background:#0880e8; }
.modal__section h3 {
  font-size:.82rem; font-weight:600; color:var(--c-text-2);
  margin-bottom:6px;
}
.modal__tags { display:flex; flex-wrap:wrap; gap:5px; }
.modal__tag {
  padding:3px 12px; border-radius:14px; font-size:.78rem;
  background:var(--c-panel); color:var(--c-text-2); border:1px solid var(--c-border);
}
.modal__tag--empty { color:var(--c-text-3); font-size:.82rem; }
.modal__tag--link { cursor:pointer; transition:all .15s; }
.modal__tag--link:hover { background:var(--c-accent); color:#fff; border-color:var(--c-accent); }

@media (max-width:700px) {
  .modal__inner { flex-direction:column; }
  .modal__gallery { width:100%; border-radius:14px 14px 0 0; }
  .modal__info { padding:20px 16px; }
  .modal__main-img { aspect-ratio:1/1; }
}

/* price filter */
.price-filter__inputs {
  display:flex; align-items:center; gap:4px; margin-bottom:8px;
}
.sf__input--price {
  width:80px; padding:6px 8px; text-align:right;
  background:var(--c-input); border:1px solid var(--c-border);
  border-radius:var(--r); color:var(--c-text);
  font-size:.82rem; font-family:var(--font); outline:none;
}
.sf__input--price:focus { border-color:var(--c-accent); }
.price-filter__sep { color:var(--c-text-3); font-size:.85rem; }
.price-filter__unit { color:var(--c-text-3); font-size:.78rem; }
.price-filter__presets { display:flex; flex-wrap:wrap; gap:5px; }
.pill--sm { padding:3px 10px; font-size:.74rem; }

/* circle filter */
.circle-filter { position:relative; }
.circle-dropdown {
  display:none; position:absolute; left:0; right:0; bottom:100%;
  max-height:200px; overflow-y:auto; z-index:50;
  background:var(--c-panel); border:1px solid var(--c-border-l);
  border-radius:var(--r) var(--r) 0 0; box-shadow:0 -6px 20px rgba(0,0,0,.4);
}
.circle-dropdown.is-vis { display:block; }
.circle-item {
  padding:7px 10px; font-size:.8rem; color:var(--c-text-2); cursor:pointer;
  transition:background .1s;
}
.circle-item:hover { background:var(--c-accent-bg); color:var(--c-accent); }
.circle-item small { color:var(--c-text-3); }
.circle-item--empty { cursor:default; color:var(--c-text-3); text-align:center; }
.circle-selected { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.circle-tag {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 8px; border-radius:12px;
  background:var(--c-accent-bg); color:var(--c-accent);
  font-size:.74rem; font-weight:500;
}
.circle-tag button {
  background:none; border:none; color:var(--c-accent); cursor:pointer;
  font-size:.85rem; line-height:1; padding:0 2px; opacity:.7;
}
.circle-tag button:hover { opacity:1; }

/* overlay */
.g-overlay {
  display:none; position:fixed; inset:0; z-index:199;
  background:rgba(0,0,0,.55);
}
.g-overlay.is-vis { display:block; }

/* ===== Mobile ===== */
@media (max-width: 820px) {
  .g-header__nav { display:none; }
  .g-header__toggle { display:flex; margin-left:auto; }

  /* --- ドロワーサイドバー --- */
  .g-side {
    position: fixed; left:0; top: var(--header-h);
    width: min(320px, 85vw); z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s ease;
    height: calc(100vh - var(--header-h));
    padding-bottom: 80px; /* 下部余裕 */
  }
  .g-side.is-open { transform: translateX(0); }

  /* --- ドロワー下部に「結果を見る」ボタン --- */
  .sf__apply {
    display: block;
    position: sticky; bottom: 0; left: 0;
    width: 100%; padding: 14px;
    background: var(--c-accent); color: #fff;
    border: none; border-radius: 0;
    font-size: .95rem; font-weight: 700; font-family: var(--font);
    cursor: pointer; z-index: 5;
    box-shadow: 0 -4px 16px rgba(0,0,0,.4);
  }
  .sf__apply:active { background: var(--c-accent-h); }

  .g-main { padding: 12px 10px 40px; }
  .tb { flex-direction:column; align-items:flex-start; gap:6px; }
  .tb__sort { flex-wrap:wrap; }

  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }

  /* --- タッチ領域拡大: ピルボタン --- */
  .pill { padding: 8px 16px; font-size: .85rem; }

  /* --- タッチ領域拡大: チェックボックス --- */
  .ck { padding: 10px 10px; min-height: 44px; }
  .ck input { width: 18px; height: 18px; }
  .ck__nm { font-size: .88rem; }
  .ck__ct { font-size: .76rem; padding: 2px 8px; }

  /* --- タッチ領域拡大: ジャンルタグ --- */
  .gt { padding: 7px 14px; font-size: .82rem; }

  /* --- タッチ領域拡大: ソートボタン --- */
  .sb { padding: 7px 14px; font-size: .82rem; }

  /* --- タッチ領域拡大: ページャ --- */
  .pgb { min-width: 42px; height: 42px; font-size: .9rem; }

  /* --- カード: スマホ向けスリム化 --- */
  .cd__body { padding: 8px 10px; }
  .cd__title { font-size: .78rem; -webkit-line-clamp: 2; }
  .cd__circle { display: none; }  /* サークル名を非表示（カード軽量化） */
  .cd__tags--g { display: none; } /* ジャンルタグ非表示（キャラタグだけ残す） */
  .cd__row del { display: none; } /* 定価取消線も非表示 */
  .cd__star { font-size: .7rem; }
  .cd__ct { font-size: .64rem; padding: 2px 6px; }

  /* --- リセットボタン --- */
  .sf__reset { padding: 12px; font-size: .88rem; }

  /* --- ヘッダー高さ縮小 --- */
  :root { --header-h: 50px; }
  .g-header__icon { width: 32px; height: 32px; font-size: 1rem; }
  .g-header__title { font-size: 1rem; }
  .g-header__sub { font-size: .68rem; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cd__img { aspect-ratio: 2/3; } /* やや横長に調整 */
  .cd__body { padding: 6px 8px; gap: 3px; }
  .cd__title { font-size: .74rem; }
  .cd__price { font-size: .82rem; }
  .cd__tags { gap: 2px; }
  .cd__ct { font-size: .6rem; padding: 1px 5px; }

  /* 極小画面ではタグも1行に収める */
  .cd__tags { flex-wrap: nowrap; overflow: hidden; }
}