/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* BANANA HAIR CATALOG — デザインシステム（mock/gallery-mock.html を継承）
   白黒・直線・角丸ゼロ・ヘアライン罫・等幅数字・Didone調ディスプレイ。ライト/ダーク両対応。 */

:root {
  --paper: #fcfcfb;
  --ink: #0c0c0d;
  --rule: #e4e3df;
  --muted: #77776f;
  --accent: #0c0c0d;
  --paper-2: #f4f3f0;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0c0c0d;
    --ink: #f3f2ee;
    --rule: #2a2a2c;
    --muted: #8f8f88;
    --accent: #f3f2ee;
    --paper-2: #141416;
  }
}
:root[data-theme="light"] {
  --paper: #fcfcfb; --ink: #0c0c0d; --rule: #e4e3df; --muted: #77776f; --accent: #0c0c0d; --paper-2: #f4f3f0;
}
:root[data-theme="dark"] {
  --paper: #0c0c0d; --ink: #f3f2ee; --rule: #2a2a2c; --muted: #8f8f88; --accent: #f3f2ee; --paper-2: #141416;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.serif { font-family: "Times New Roman", Georgia, "Yu Mincho", serif; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.upper { text-transform: uppercase; letter-spacing: 0.22em; }

/* ---- レイアウト ---- */
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* ---- ヘッダ ---- */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead-inner { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 0 16px; flex-wrap: wrap; }
.logo { font-size: clamp(22px, 3.2vw, 34px); letter-spacing: 0.02em; }
.logo b { font-weight: 400; }
.masthead-meta { display: flex; gap: 20px; align-items: baseline; font-size: 11px; color: var(--muted); }

/* ---- フィルタバー ---- */
.filters { position: -webkit-sticky; position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); }
.filters-inner { display: flex; align-items: center; gap: 10px 22px; padding: 12px 0; flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-label { font-size: 10px; color: var(--muted); margin-right: 2px; }
.chip {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font: inherit; font-size: 11px; letter-spacing: 0.08em; padding: 6px 12px; cursor: pointer;
  border-radius: 0; transition: background .15s, color .15s, border-color .15s; white-space: nowrap;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.chip .n { color: var(--muted); margin-left: 6px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .n { color: var(--paper); opacity: .7; }

.bar-spacer { flex: 1 1; }
.count { font-size: 11px; color: var(--muted); }
.toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 10px; color: var(--muted);
  border: 1px solid var(--rule); padding: 6px 10px; -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.toggle[data-on="true"] { border-color: var(--ink); color: var(--ink); }
.toggle .dot { width: 8px; height: 8px; background: var(--muted); }
.toggle[data-on="true"] .dot { background: var(--ink); }

/* ---- グリッド ---- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1px; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 22px 0 60px; }
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px)  { .grid { grid-template-columns: 1fr; } }

.card { position: relative; background: var(--paper); cursor: pointer; overflow: hidden; }
.card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.card:hover .card-media img { transform: scale(1.04); }
.ph { position: absolute; inset: 0; }

/* 透かしオーバーレイ＝薄い斜線のみ（BANANA文字は元画像に焼込済のため付けない）。
   表示は常に透かし付き。透かしなし原本は会員DL時のみ（画面上では出さない）。 */
.wm-mark {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-30deg, transparent 0 42px, rgba(255,255,255,.06) 42px 43px);
}

.card-cap { padding: 10px 12px 14px; border-top: 1px solid var(--rule); }
.card-idx { font-size: 10px; color: var(--muted); display: flex; justify-content: space-between; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.card-title { font-size: 12px; margin: 4px 0 0; letter-spacing: .02em; }
.card-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }

.view-hint { position: absolute; left: 10px; bottom: 10px; font-size: 10px; letter-spacing: .18em; color: #fff; opacity: 0; transform: translateY(4px); transition: .3s; text-transform: uppercase; }
.card:hover .view-hint { opacity: 1; transform: none; }

/* ---- モーダル（三面） ---- */
.modal-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 100; display: grid; place-items: center; padding: clamp(12px, 4vw, 48px); }
.modal { background: var(--paper); border: 1px solid var(--ink); max-width: 1100px; width: 100%; max-height: 92vh; overflow: auto; }
.modal-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--rule); position: -webkit-sticky; position: sticky; top: 0; background: var(--paper); }
.modal-title { font-size: 20px; } .modal-title .serif { }
.modal-meta { font-size: 11px; color: var(--muted); }
.modal-close { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: 1px solid var(--rule); color: var(--ink); font-size: 16px; width: 34px; height: 34px; cursor: pointer; }
.modal-close:hover { border-color: var(--ink); }
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1px; gap: 1px; background: var(--rule); }
@media (max-width: 720px) { .triptych { grid-template-columns: 1fr; } }
.tri-cell { background: var(--paper); position: relative; }
.tri-media { position: relative; aspect-ratio: 4/5; background: var(--paper-2); }
.tri-media img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.tri-label { padding: 8px 12px; font-size: 10px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; border-top: 1px solid var(--rule); }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.dl-btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: inherit; font-size: 12px; letter-spacing: .1em; padding: 12px 22px; cursor: pointer; }
.dl-btn[disabled] { background: transparent; color: var(--muted); border-color: var(--rule); cursor: not-allowed; }
.dl-note { font-size: 10px; color: var(--muted); max-width: 60ch; }

/* 保存deterrent: 画像の選択・ドラッグを抑止 */
.noselect img { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }

.footer { border-top: 1px solid var(--rule); padding: 28px 0 48px; color: var(--muted); font-size: 11px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ===== 新着・ランキング・いいね/お気に入り（2026-07-23 追加） ===== */
/* ライムイエロー＝新着アクセントのみに使用（基調は白黒を維持）。 */
:root { --lime: #c6ec00; --lime-ink: #0c0c0d; }
@media (prefers-color-scheme: dark) { :root { --lime: #d4ff3a; --lime-ink: #0c0c0d; } }
:root[data-theme="light"] { --lime: #c6ec00; }
:root[data-theme="dark"]  { --lime: #d4ff3a; }

/* モード切替（一覧/新着/人気/お気に入り）。.chip を流用しつつ区切りを追加 */
.modes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modes .chip[aria-pressed="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent); }

/* NEW バッジ＋ライム枠 */
.card.is-new { box-shadow: inset 0 0 0 2px var(--lime); }
.badge-new {
  position: absolute; left: 0; top: 0; z-index: 3;
  background: var(--lime); color: var(--lime-ink);
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: 4px 9px;
}

/* いいね/お気に入りボタン（カード右上） */
.like-btn {
  position: absolute; right: 8px; top: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; cursor: pointer; font: inherit; font-size: 11px;
  border: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 78%, transparent);
  color: var(--ink); padding: 4px 8px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: border-color .15s, background .15s;
}
.like-btn:hover { border-color: var(--ink); }
.like-btn .heart { font-size: 12px; line-height: 1; }
.like-btn[data-fav="true"] { border-color: var(--ink); }
.like-btn[data-fav="true"] .heart { color: var(--ink); }
.like-btn .lc { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--muted); }
.like-btn[data-fav="true"] .lc { color: var(--ink); }

/* ランキング番号 */
.rank-num {
  position: absolute; left: 0; top: 0; z-index: 3;
  background: var(--accent); color: var(--paper);
  font-family: "Times New Roman", Georgia, serif; font-size: 15px; letter-spacing: .02em;
  padding: 4px 10px; min-width: 34px; text-align: center; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.rank-num.top { background: var(--lime); color: var(--lime-ink); font-weight: 700; }

/* ランキング指標の小注記 */
.rank-metric { font-size: 10px; color: var(--muted); }
.metricval { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* 空状態（お気に入り無し等） */
.empty { padding: 60px 0; text-align: center; color: var(--muted); font-size: 12px; }
.empty b { color: var(--ink); font-weight: 400; }