/* ==============================================
   アズールレーン同人サーチ — 海洋ネイビーUI
   ============================================== */

:root {
  --c-bg:       #f0f4f8;
  --c-surface:  #ffffff;
  --c-panel:    #ffffff;
  --c-input:    #f5f7fa;
  --c-border:   #d4dce8;
  --c-border-l: #bfc9d9;
  --c-text:     #1a2438;
  --c-text-2:   #4a5670;
  --c-text-3:   #7a8599;
  --c-accent:   #1b5eb5;
  --c-accent-h: #2470d4;
  --c-accent-bg:rgba(27,94,181,.08);
  --c-navy:     #0d2240;
  --c-navy-l:   #1a3a5c;
  --c-gold:     #c89520;
  --c-gold-l:   #e8b430;
  --c-gold-bg:  rgba(200,149,32,.10);
  --c-fanza:    #e82060;
  --c-dlsite:   #0880e8;
  --c-teal:     #1a8a7a;
  --font:       'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-d:     'Shippori Mincho', serif;
  --r:          8px;
  --side-w:     300px;
  --header-h:   58px;
}

*, *::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: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-l) 100%);
  box-shadow: 0 2px 12px rgba(13,34,64,.25);
}
.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:40px; height:40px;
  display:grid; place-items:center;
  font-family:var(--font-d); font-size:1.1rem; font-weight:700;
  color:var(--c-navy);
  background:linear-gradient(135deg, var(--c-gold-l), var(--c-gold));
  border-radius:8px; flex-shrink:0;
}
.g-header__title {
  font-family:var(--font-d);
  font-size:1.2rem; font-weight:700; color:#fff;
  letter-spacing:.04em; line-height:1.2;
}
.g-header__sub { font-size:.72rem; color:rgba(255,255,255,.6); line-height:1.3; }
.g-header__nav { margin-left:auto; }
.g-header__link {
  font-size:.78rem; color:rgba(255,255,255,.65);
  text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.3);
  transition:color .15s;
}
.g-header__link:hover { color:#fff; }
.g-header__toggle {
  display:none; align-items:center; gap:6px;
  padding:7px 14px; border:1px solid rgba(255,255,255,.25); border-radius:var(--r);
  background:transparent; color:rgba(255,255,255,.8);
  font-size:.82rem; font-family:var(--font); cursor:pointer;
}

/* ===== 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-navy);
  text-transform:uppercase; letter-spacing:.06em;
  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-accent); color:var(--c-accent); }
.pill.is-on {
  background:var(--c-accent); border-color:var(--c-accent);
  color:#fff;
}

/* 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:var(--c-accent-bg); }
.ck input { accent-color:var(--c-accent); width:16px; height:16px; }
.ck__nm { flex:1; }
.ck__ct {
  font-size:.78rem; color:var(--c-text-3);
  background:#e4e9f0; 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:#fef2f2; color:#dc2626; }
.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,.5); }
.genre-modal__box {
  position:relative; z-index:1;
  width:min(700px,92vw); max-height:85vh;
  background:#fff; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  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-navy); }
.genre-modal__x {
  width:34px; height:34px; border:none; border-radius:50%;
  background:rgba(0,0,0,.06); color:var(--c-text-2);
  font-size:1rem; cursor:pointer;
}
.genre-modal__x:hover { background:rgba(0,0,0,.1); }
.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:.78rem; 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); }

.sf__apply { display:none; }

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

/* 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); border-radius:3px; }

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

.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-3); font-size:.78rem; font-family:var(--font);
  cursor:pointer; transition:all .12s;
}
.sb:hover { color:var(--c-text); }
.sb.is-on { background:var(--c-accent-bg); border-color:var(--c-accent); color:var(--c-accent); font-weight:500; }

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

.spin {
  display:inline-block; width:18px; height:18px;
  border:2px solid var(--c-border); 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;
}
.cd:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(13,34,64,.12);
}
.cd__img {
  position:relative; aspect-ratio:7/10;
  overflow:hidden; background:#e8ecf2;
}
.cd__img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.cd:hover .cd__img img { transform:scale(1.05); }
.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; color:var(--c-navy);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cd__circle { font-size:.72rem; color:var(--c-text-3); }
.cd__row { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.cd__price { color:var(--c-accent); font-size:.88rem; font-weight:700; }
.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:var(--c-accent-bg); color:var(--c-accent);
  font-size:.66rem; font-weight:500;
}
.cd__tags--g .cd__gt {
  padding:1px 6px; border-radius:4px;
  background:#e8ecf2; color:var(--c-text-3);
  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,.6);
}
.modal__box {
  position:relative; z-index:1;
  width:min(900px,92vw); max-height:90vh; overflow-y:auto;
  background:#fff; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal__x {
  position:absolute; top:12px; right:14px; z-index:2;
  width:36px; height:36px; border:none; border-radius:50%;
  background:rgba(0,0,0,.06); color:var(--c-text-2);
  font-size:1.1rem; cursor:pointer; transition:all .15s;
}
.modal__x:hover { background:rgba(0,0,0,.12); color:var(--c-text); }
.modal__inner {
  display:flex; gap:0;
}
.modal__gallery {
  width:45%; flex-shrink:0; background:#f0f2f6;
  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:#e4e8ee; 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:.6; transition:all .15s; flex-shrink:0;
}
.modal__thumb:hover { opacity:.9; }
.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-navy); 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:#f0f2f6; 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-navy);
  margin-bottom:6px;
}
.modal__tags { display:flex; flex-wrap:wrap; gap:5px; }
.modal__tag {
  padding:3px 12px; border-radius:14px; font-size:.78rem;
  background:#f0f2f6; color:var(--c-text-2);
}
.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;
}

@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-surface); border:1px solid var(--c-border);
  border-radius:var(--r) var(--r) 0 0; box-shadow:0 -6px 20px rgba(0,0,0,.12);
}
.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,.35); }
.g-overlay.is-vis { display:block; }

/* age confirm dialog */
.age-confirm {
  display:none; position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.5);
  place-items:center;
}
.age-confirm.is-vis { display:grid; }
.age-confirm__box {
  background:#fff; border-radius:12px; padding:32px 28px;
  max-width:380px; width:90%; text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.2);
}
.age-confirm__title {
  font-size:1.1rem; font-weight:700; color:var(--c-navy);
  margin-bottom:12px;
}
.age-confirm__text {
  font-size:.88rem; color:var(--c-text-2); line-height:1.6;
  margin-bottom:24px;
}
.age-confirm__buttons { display:flex; gap:10px; justify-content:center; }
.age-confirm__btn {
  padding:10px 24px; border-radius:8px; font-size:.9rem;
  font-family:var(--font); font-weight:600; cursor:pointer;
  border:none; transition:background .15s;
}
.age-confirm__btn--yes {
  background:var(--c-accent); color:#fff;
}
.age-confirm__btn--yes:hover { background:var(--c-accent-h); }
.age-confirm__btn--no {
  background:#e8ecf2; color:var(--c-text-2);
}
.age-confirm__btn--no:hover { background:#d4dce8; }

/* ===== 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,.15);
  }

  .g-main { padding:12px 10px 40px; }
  .tb { flex-direction:column; align-items:flex-start; gap:6px; }
  .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; }
  .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; }
  .cd__circle { display:none; }
  .cd__tags--g { display:none; }
  .cd__row del { display:none; }

  :root { --header-h:50px; }
  .g-header__icon { width:32px; height:32px; font-size:.9rem; }
  .g-header__title { font-size:1rem; }
}

@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__tags { flex-wrap:nowrap; overflow:hidden; }
}