/* --- Cast (staff) portal: a deliberately distinct, playful theme kept
   visually unrelated to the site's own pink branding. Every rule here is
   scoped under .cast-portal-shell so it never leaks into the rest of the
   app, and it works by overriding the shared --brand/--brand-dark/--muted
   custom properties within that scope -- .btn/.badge/.tag-badge/.card/etc.
   all reference those variables already, so they retheme automatically
   without needing per-component overrides. */

.cast-portal-shell {
  --brand: #6C5CE7;
  --brand-dark: #5541d1;
  --muted: #6b6f76;
  --border: #e3e1f5;
  min-height: 100vh;
  display: flex;
  background: linear-gradient(160deg, #6C5CE7 0%, #00CEC9 100%);
}

.cast-portal-sidebar {
  width: 220px;
  flex-shrink: 0;
  padding: 24px 16px;
  color: #fff;
}
.cast-portal-sidebar .brand {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 20px;
  padding: 0 4px;
}
.cast-portal-sidebar a,
.cast-portal-sidebar .link-button {
  display: block;
  width: 100%;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: .92rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
.cast-portal-sidebar a:hover,
.cast-portal-sidebar .link-button:hover {
  background: rgba(255, 255, 255, .3);
  text-decoration: none;
}

.cast-portal-content {
  flex: 1;
  padding: 32px;
  color: #fff;
  min-width: 0;
}
.cast-portal-content h1,
.cast-portal-content h2,
.cast-portal-content h3 {
  color: #fff;
}
.cast-portal-content .notice,
.cast-portal-content .alert {
  border-radius: 12px;
}

.cast-portal-shell .card {
  background: #fff;
  color: var(--text);
  border: none;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(30, 10, 60, .15);
}
.cast-portal-shell .card h1,
.cast-portal-shell .card h2,
.cast-portal-shell .card h3 {
  color: var(--text);
}

.cast-portal-shell .btn {
  border-radius: 999px;
  font-weight: 800;
}

.cast-portal-shell .tag-badge {
  background: #efecfd;
}

.cast-portal-shell table.admin-table {
  border-radius: 12px;
  overflow: hidden;
}

/* Minimal centered shell for unauthenticated pages (Devise sign-in/password
   screens) reached on the dedicated cast portal domain -- see
   layouts/cast_portal_public.html.erb. */
.cast-portal-public {
  --brand: #6C5CE7;
  --brand-dark: #5541d1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #6C5CE7 0%, #00CEC9 100%);
  padding: 24px;
}
.cast-portal-public .auth-card {
  width: 100%;
  max-width: 380px;
  margin: 0;
}
/*
 * 中古下着ショップ (/closet) のスタイル。
 * corporate.css / vintage.css と同じ考え方で、.closet-site と .closet-admin を
 * 付けた要素の下だけに効くようにしてあるので、同じapplication.cssのバンドルに
 * 入っていてもポータル本体・コーポレートサイト・判定ツールには影響しない。
 *
 * デザインの方針:
 *   - 写真が主役。文字と枠は限界まで減らし、余白と大きめの角丸で作る
 *   - 色は生成りの背景+くすみローズ1色。派手な色を足さず、商品の色を邪魔しない
 *   - モバイル優先。カードはCSS Gridのauto-fillで、幅に応じて2〜4列に変わる
 *   - 文字サイズはclamp()で、狭い画面でも詰まりすぎない
 */

.closet-site, .closet-admin {
  --cl-ink: #241f22;
  --cl-muted: #7b7076;
  --cl-accent: #b3546c;
  --cl-accent-dark: #8d3f55;
  --cl-accent-soft: #fbf1f3;
  --cl-bg: #fbf9f9;
  --cl-panel: #ffffff;
  --cl-border: #ece4e6;
  --cl-radius: 14px;
  --cl-shadow: 0 1px 2px rgba(36, 31, 34, .04), 0 8px 24px rgba(36, 31, 34, .06);
  /* 店の設定で上書きされる値(Closet::Setting#design_css)。ここにある
     のは、設定を一度も触っていない店のための既定値。 */
  --cl-accent-line: #f0d8de;
  --cl-pill: 999px;
  --cl-on-accent: #ffffff;
  --cl-heading-font: inherit;
  background: var(--cl-bg);
  color: var(--cl-ink);
  font-feature-settings: "palt";
}

/* 一般向けのリユース店は、下着店のローズではなく落ち着いた青緑に振る。
   同じ画面の作りのまま、色と印象だけを店ごとに変える。 */
.closet-theme-reuse {
  --cl-accent: #3f6f6d;
  --cl-accent-dark: #2c514f;
  --cl-accent-soft: #eef4f3;
  --cl-accent-line: #cfe0de;
  --cl-bg: #f9faf9;
  --cl-border: #e3e8e7;
}

/* 見出しの書体は店の設定で変えられる。本文は読みやすさを優先して
   端末の既定のままにする。 */
.closet-site h1, .closet-site h2, .closet-site h3, .closet-logo-name,
.closet-hero h1, .closet-detail-price, .closet-card-price {
  font-family: var(--cl-heading-font);
}

.closet-site a { color: var(--cl-ink); }
.closet-site a:hover { color: var(--cl-accent-dark); text-decoration: none; }
.closet-container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.closet-narrow { max-width: 720px; }

/* --- ヘッダー ---------------------------------------------------------- */
/* スクロールしても常にカートへ戻れるよう、上に貼り付ける。 */
.closet-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--cl-border);
}
.closet-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 16px;
}
.closet-logo { display: flex; align-items: baseline; gap: 8px; }
.closet-logo:hover { text-decoration: none; }
.closet-logo-name {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.closet-logo-sub { font-size: .68rem; color: var(--cl-muted); letter-spacing: .08em; }
.closet-nav { display: flex; align-items: center; gap: 6px; }
.closet-nav a {
  font-size: .85rem; color: var(--cl-muted); padding: 6px 10px; border-radius: var(--cl-pill);
}
.closet-nav a:hover { background: var(--cl-accent-soft); color: var(--cl-accent-dark); }
.closet-cart-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cl-ink); color: #fff !important; padding: 7px 14px !important;
  border-radius: var(--cl-pill); font-weight: 700;
}
.closet-cart-link:hover { background: var(--cl-accent-dark); }
.closet-cart-count {
  background: #fff; color: var(--cl-ink); border-radius: 999px;
  min-width: 18px; padding: 0 5px; font-size: .72rem; text-align: center;
}
/* 狭い画面では店名とカートだけ残し、ナビは次の行に折り返す。 */
@media (max-width: 640px) {
  .closet-header-inner { flex-wrap: wrap; row-gap: 8px; }
  .closet-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .closet-nav a { white-space: nowrap; }
}

/* --- ヒーロー ---------------------------------------------------------- */
.closet-hero {
  background: linear-gradient(160deg, var(--cl-accent-soft), var(--cl-bg) 70%);
  padding: clamp(36px, 8vw, 72px) 0;
  border-bottom: 1px solid var(--cl-border);
}
.closet-hero h1 {
  margin: 0 0 14px; font-size: clamp(1.5rem, 5vw, 2.4rem); line-height: 1.35; letter-spacing: .02em;
}
.closet-hero-lead { margin: 0 0 24px; color: var(--cl-muted); max-width: 34em; }
.closet-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* 店の設定で背景写真を入れたとき。写真の明るさに関わらず文字が読めるよう、
   暗い膜を1枚かぶせてから白文字を載せる。 */
.closet-hero.has-image {
  background-size: cover; background-position: center; position: relative;
  padding: clamp(56px, 14vw, 128px) 0;
}
.closet-hero.has-image::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 18, .28), rgba(20, 16, 18, .62));
}
.closet-hero.has-image > .closet-container { position: relative; }
.closet-hero.has-image h1 { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.closet-hero.has-image .closet-hero-lead { color: rgba(255, 255, 255, .92); }
.closet-hero.has-image .closet-btn-outline {
  color: #fff !important; border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .12);
}

/* 文字の店名の代わりに置くロゴ画像。高さだけ揃え、横幅は画像なり。 */
.closet-logo-image { height: 26px; width: auto; display: block; }

/* --- 共通パーツ -------------------------------------------------------- */
.closet-section { padding: clamp(28px, 6vw, 56px) 0; }
.closet-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px;
}
.closet-section-head h2 { margin: 0; font-size: clamp(1.05rem, 3vw, 1.3rem); letter-spacing: .04em; }
.closet-section-head a { font-size: .85rem; color: var(--cl-muted); }
.closet-panel {
  background: var(--cl-panel); border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius); padding: clamp(16px, 4vw, 28px); box-shadow: var(--cl-shadow);
}
.closet-muted { color: var(--cl-muted); }
.closet-small { font-size: .82rem; }

.closet-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cl-ink); color: #fff !important; border: 1px solid var(--cl-ink);
  padding: 12px 24px; border-radius: var(--cl-pill); font-size: .95rem; font-weight: 700;
  cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.closet-btn:hover {
  background: var(--cl-accent-dark); border-color: var(--cl-accent-dark);
  color: var(--cl-on-accent) !important; text-decoration: none;
}
.closet-btn:active { transform: translateY(1px); }
.closet-btn-outline { background: transparent; color: var(--cl-ink) !important; border-color: var(--cl-border); }
.closet-btn-outline:hover { background: var(--cl-accent-soft); color: var(--cl-accent-dark) !important; border-color: var(--cl-accent); }
.closet-btn-block { width: 100%; }
.closet-btn[disabled], .closet-btn.is-disabled {
  background: #d9d2d4; border-color: #d9d2d4; color: #fff !important; cursor: not-allowed;
}

.closet-tag {
  display: inline-block; font-size: .72rem; line-height: 1.6; padding: 1px 9px;
  border-radius: var(--cl-pill); border: 1px solid var(--cl-border); color: var(--cl-muted); background: #fff;
}
.closet-tag-accent { background: var(--cl-accent-soft); border-color: var(--cl-accent-line); color: var(--cl-accent-dark); }
.closet-tag-sold { background: #efeced; border-color: #e2dcde; color: #6c6367; }

/* --- 商品グリッド ------------------------------------------------------ */
/* auto-fillなので、列数はブラウザ幅に合わせて自動で増減する
   (スマホ2列 → タブレット3列 → PC4列)。 */
.closet-grid {
  display: grid; gap: clamp(12px, 2.4vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr));
}
.closet-card { display: block; }
.closet-card:hover { text-decoration: none; }
.closet-card:hover .closet-card-name { color: var(--cl-accent-dark); }
.closet-card-thumb {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--cl-radius); background: #f2eeef; border: 1px solid var(--cl-border);
}
.closet-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.closet-card:hover .closet-card-thumb img { transform: scale(1.035); }
.closet-card-noimage {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--cl-muted); font-size: .8rem;
}
.closet-card-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.closet-card-soldout {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .72); font-weight: 700; letter-spacing: .1em; color: var(--cl-ink);
}
.closet-card-body { padding: 10px 2px 0; }
.closet-card-brand { font-size: .74rem; color: var(--cl-muted); letter-spacing: .06em; }
.closet-card-name {
  margin: 2px 0 6px; font-size: .9rem; line-height: 1.5; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.closet-card-price { font-size: 1rem; font-weight: 700; }
.closet-card-price small { font-size: .72rem; font-weight: 400; color: var(--cl-muted); }
.closet-card-listprice { font-size: .74rem; color: var(--cl-muted); text-decoration: line-through; margin-left: 6px; }

/* --- 絞り込み ---------------------------------------------------------- */
/* <details>にしてあるので、スマホでは畳まれ、PCでは常に開いた状態にする。 */
.closet-filter {
  background: var(--cl-panel); border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius); margin-bottom: 20px;
}
.closet-filter > summary {
  cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: .9rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.closet-filter > summary::after { content: "▾"; color: var(--cl-muted); }
.closet-filter[open] > summary::after { content: "▴"; }
.closet-filter-body { padding: 0 18px 18px; display: grid; gap: 14px; }
.closet-filter-row { display: flex; flex-wrap: wrap; gap: 12px; }
.closet-filter-field { flex: 1 1 160px; min-width: 0; }
.closet-filter-field label { display: block; font-size: .76rem; color: var(--cl-muted); margin-bottom: 4px; }
.closet-site input[type=text], .closet-site input[type=email], .closet-site input[type=tel],
.closet-site input[type=number], .closet-site input[type=search],
.closet-site select, .closet-site textarea {
  width: 100%; padding: 10px 12px; font-size: .92rem; font-family: inherit; color: var(--cl-ink);
  background: #fff; border: 1px solid var(--cl-border); border-radius: 10px;
}
.closet-site textarea { min-height: 110px; }
/* 16pxより小さいとiOSのSafariが入力のたびに画面を拡大する。
   ご注文手続きで住所を打つときに効く。 */
@media (max-width: 720px) {
  .closet-site input[type=text], .closet-site input[type=email], .closet-site input[type=tel],
  .closet-site input[type=number], .closet-site input[type=search],
  .closet-site select, .closet-site textarea { font-size: 16px; padding: 12px; }
}
.closet-site input:focus, .closet-site select:focus, .closet-site textarea:focus {
  outline: 2px solid var(--cl-accent); outline-offset: 1px; border-color: transparent;
}
.closet-filter-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (min-width: 800px) {
  .closet-filter > summary { display: none; }
  .closet-filter-body { display: grid !important; padding: 18px; }
}

.closet-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.closet-toolbar-count { font-size: .85rem; color: var(--cl-muted); }
.closet-toolbar form { display: flex; align-items: center; gap: 8px; }
.closet-toolbar select { width: auto; }

.closet-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.closet-chip {
  padding: 7px 14px; border-radius: var(--cl-pill); border: 1px solid var(--cl-border);
  background: #fff; font-size: .84rem; color: var(--cl-muted);
}
.closet-chip:hover { border-color: var(--cl-accent); color: var(--cl-accent-dark); text-decoration: none; }
.closet-chip.is-active { background: var(--cl-ink); border-color: var(--cl-ink); color: #fff; }

.closet-empty {
  border: 1px dashed var(--cl-border); border-radius: var(--cl-radius);
  padding: 40px 20px; text-align: center; color: var(--cl-muted); background: var(--cl-panel);
}

/* --- 商品詳細 ---------------------------------------------------------- */
.closet-detail { display: grid; gap: clamp(20px, 4vw, 40px); align-items: start; }
@media (min-width: 900px) {
  .closet-detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
/* 商品写真は切り取らない。中古品はお客様が状態を見て買うので、端が切れると
   判断できない -- 縦長の枠(3:4)にcoverで入れていたため、横長で撮った写真は
   左右が4割ほど切り落とされていた。
   枠の形を決めずに写真の形へ合わせるので、縦・横どちらで撮っても余白なしで
   全体が写る。一覧のカードとサムネイルは、並びを揃えるためcoverのまま。 */
.closet-gallery-main {
  border-radius: var(--cl-radius); overflow: hidden;
  background: #f2eeef; border: 1px solid var(--cl-border);
}
.closet-gallery-main img { width: 100%; height: auto; display: block; }
/* 写真がまだ無い商品でも、枠が潰れないように高さを持たせる。 */
.closet-gallery-main .closet-card-noimage { padding: 22vh 0; }
/* サブ写真は横スクロール。JavaScriptを足さずに全枚数を見られるようにする。 */
.closet-gallery-thumbs {
  display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px;
}
.closet-gallery-thumb {
  flex: 0 0 auto; padding: 0; border: none; background: none; cursor: pointer; line-height: 0;
  border-radius: 8px;
}
.closet-gallery-thumbs img {
  width: 74px; height: 96px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--cl-border); display: block;
  transition: border-color .15s ease, opacity .15s ease;
}
.closet-gallery-thumb:hover img { border-color: var(--cl-accent); }
/* いま大きく出ている写真が分かるように。 */
.closet-gallery-thumb.is-current img { border-color: var(--cl-ink); border-width: 2px; }
.closet-gallery-thumb:focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 2px; }
.closet-detail-brand { font-size: .8rem; color: var(--cl-muted); letter-spacing: .1em; }
.closet-detail h1 { margin: 6px 0 14px; font-size: clamp(1.2rem, 4vw, 1.6rem); line-height: 1.45; }
.closet-detail-price { font-size: clamp(1.4rem, 5vw, 1.9rem); font-weight: 700; }
.closet-detail-price small { font-size: .8rem; font-weight: 400; color: var(--cl-muted); margin-left: 6px; }
.closet-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px; }
.closet-spec { border-top: 1px solid var(--cl-border); margin: 18px 0; }
.closet-spec div {
  display: flex; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--cl-border); font-size: .9rem;
}
.closet-spec dt, .closet-spec-label { flex: 0 0 96px; color: var(--cl-muted); font-size: .82rem; }
.closet-detail-note { font-size: .86rem; color: var(--cl-muted); line-height: 1.8; }
.closet-estimate {
  background: var(--cl-accent-soft); border-radius: 12px; padding: 12px 14px;
  font-size: .84rem; color: var(--cl-accent-dark); margin: 16px 0;
}
/* スマホでは購入ボタンを画面下に固定して、写真を見ながらいつでも押せるようにする。 */
/* PayPayの送金QR。小さすぎると読み取れないので、実寸に近い大きさで出す。 */
.closet-paypay-qr { margin: 12px 0 0; }
.closet-paypay-qr img {
  width: 100%; max-width: 220px; height: auto; display: block;
  border-radius: 10px; border: 1px solid var(--cl-border); background: #fff; padding: 8px;
}

.closet-buybar { margin-top: 18px; }
.closet-buybar-price { display: none; }
.closet-buy-note { text-align: center; margin-top: 18px; }

/* 狭い画面では「カートに入れる」を画面の下に貼り付ける。写真と説明を
   全部スクロールしないと買えない状態にしないため。
   position:sticky ではなく fixed なのは、このバーが入れ子のグリッドの
   最後の要素で、stickyでは動ける余地が無いから。 */
@media (max-width: 899px) {
  .closet-buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; align-items: center; gap: 14px; margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--cl-border);
    box-shadow: 0 -4px 16px rgba(36, 31, 34, .08);
  }
  .closet-buybar-price { display: block; font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
  .closet-buybar-price small { font-size: .68rem; font-weight: 400; color: var(--cl-muted); }
  .closet-buybar-form { flex: 1 1 auto; min-width: 0; }
  .closet-buy-note { text-align: left; }
}

/* --- カート・注文 ------------------------------------------------------ */
.closet-line {
  display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--cl-border);
}
.closet-line:last-child { border-bottom: none; }
.closet-line-thumb {
  width: 84px; height: 112px; flex: 0 0 auto; border-radius: 10px; overflow: hidden;
  background: #f2eeef; border: 1px solid var(--cl-border);
}
.closet-line-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.closet-line-body { flex: 1; min-width: 0; }
.closet-line-name { font-weight: 600; font-size: .92rem; margin: 0 0 4px; }
.closet-line-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.closet-line-actions input[type=number] { width: 72px; }
.closet-linkbutton {
  background: none; border: none; padding: 0; font: inherit; font-size: .82rem;
  color: var(--cl-muted); text-decoration: underline; cursor: pointer;
}

.closet-summary { display: grid; gap: 8px; font-size: .92rem; }
.closet-summary div { display: flex; justify-content: space-between; gap: 12px; }
.closet-summary .closet-summary-total {
  border-top: 1px solid var(--cl-border); padding-top: 10px; font-size: 1.15rem; font-weight: 700;
}
.closet-checkout-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .closet-checkout-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); } }
@media (min-width: 900px) { .closet-checkout-aside { position: sticky; top: 88px; } }
.closet-form-grid { display: grid; gap: 14px; }
.closet-form-row { display: flex; flex-wrap: wrap; gap: 14px; }
.closet-form-row > * { flex: 1 1 180px; min-width: 0; }
.closet-label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 5px; }
.closet-label .closet-required { color: var(--cl-accent-dark); font-size: .72rem; margin-left: 6px; }
.closet-hint { font-size: .78rem; color: var(--cl-muted); margin-top: 4px; }
.closet-errors {
  background: #fdf0f3; border: 1px solid #f3ccd6; color: var(--cl-accent-dark);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; font-size: .88rem;
}
.closet-errors ul { margin: 6px 0 0; padding-left: 1.2em; }
.closet-radio-cards { display: grid; gap: 10px; }
.closet-radio-card {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px;
  border: 1px solid var(--cl-border); border-radius: 12px; background: #fff; cursor: pointer;
}
.closet-radio-card:has(input:checked) { border-color: var(--cl-accent); background: var(--cl-accent-soft); }
.closet-radio-card input { margin-top: 3px; }

.closet-steps { display: flex; gap: 8px; margin-bottom: 22px; font-size: .78rem; color: var(--cl-muted); flex-wrap: wrap; }
.closet-steps span { display: flex; align-items: center; gap: 8px; }
.closet-steps .is-current { color: var(--cl-accent-dark); font-weight: 700; }

.closet-complete-mark {
  width: 56px; height: 56px; border-radius: 50%; background: var(--cl-accent-soft);
  color: var(--cl-accent-dark); display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 16px;
}

/* --- 年齢確認 ---------------------------------------------------------- */
.closet-agegate {
  min-height: 78vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px;
}
.closet-agegate-card { max-width: 460px; width: 100%; text-align: center; }
.closet-agegate-card h1 { font-size: 1.2rem; margin: 0 0 12px; }
.closet-agegate-actions { display: grid; gap: 10px; margin-top: 22px; }

/* --- 安心ポイント ------------------------------------------------------ */
.closet-features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.closet-feature { background: var(--cl-panel); border: 1px solid var(--cl-border); border-radius: var(--cl-radius); padding: 20px; }
.closet-feature h3 { margin: 0 0 8px; font-size: .95rem; }
.closet-feature p { margin: 0; font-size: .85rem; color: var(--cl-muted); line-height: 1.8; }

/* --- フッター ---------------------------------------------------------- */
.closet-footer { border-top: 1px solid var(--cl-border); background: #fff; margin-top: 40px; padding: 36px 0 48px; }
.closet-footer-nav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; font-size: .85rem; }
.closet-footer-note { font-size: .78rem; color: var(--cl-muted); line-height: 1.9; margin: 0 0 10px; }

/* --- 管理画面 ---------------------------------------------------------- */
.closet-admin { min-height: 100vh; }
.closet-admin-header { background: var(--cl-ink); color: #fff; }
.closet-admin-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 12px 16px;
}
.closet-admin-brand-group { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.closet-admin-brand { color: #fff !important; font-weight: 700; letter-spacing: .1em; }
/* いま見ていない方の店へ移る導線。管理画面は店ごとにURLが分かれている。 */
.closet-admin-switch {
  color: #d9cfd3; font-size: .78rem; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; padding: 3px 10px;
}
.closet-admin-switch:hover { background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none; }
.closet-admin-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.closet-admin-nav a { color: #d9cfd3; font-size: .85rem; padding: 6px 12px; border-radius: 999px; }
.closet-admin-nav a:hover, .closet-admin-nav a.is-active { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }
.closet-admin-main { padding: 24px 0 60px; }
.closet-admin h1 { font-size: 1.25rem; margin: 0 0 4px; }
.closet-admin-lead { color: var(--cl-muted); font-size: .86rem; margin: 0 0 20px; }
.closet-admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

.closet-admin input[type=text], .closet-admin input[type=email], .closet-admin input[type=number],
.closet-admin input[type=search], .closet-admin input[type=file], .closet-admin select, .closet-admin textarea {
  width: 100%; padding: 9px 12px; font-size: .92rem; font-family: inherit;
  border: 1px solid var(--cl-border); border-radius: 10px; background: #fff; color: var(--cl-ink);
}
.closet-admin textarea { min-height: 120px; }
.closet-admin label { font-size: .82rem; font-weight: 700; }

.closet-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 26px; }
.closet-stat { background: var(--cl-panel); border: 1px solid var(--cl-border); border-radius: 12px; padding: 16px; }
.closet-stat-label { font-size: .76rem; color: var(--cl-muted); }
.closet-stat-value { font-size: 1.5rem; font-weight: 700; margin-top: 2px; }

/* 一覧は狭い画面で横スクロールさせる(列を落として情報を隠さない)。 */
.closet-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.closet-table { width: 100%; border-collapse: collapse; font-size: .88rem; background: var(--cl-panel); }
.closet-table th, .closet-table td { padding: 10px 12px; border-bottom: 1px solid var(--cl-border); text-align: left; vertical-align: middle; white-space: nowrap; }
.closet-table th { background: #faf7f8; font-size: .76rem; color: var(--cl-muted); font-weight: 700; }
.closet-table td.closet-table-wrapcell { white-space: normal; min-width: 220px; }
.closet-table tbody tr:hover { background: #fdfbfc; }
.closet-table-thumb { width: 44px; height: 58px; object-fit: cover; border-radius: 6px; border: 1px solid var(--cl-border); }

.closet-admin-form { display: grid; gap: 18px; }
.closet-fieldset { background: var(--cl-panel); border: 1px solid var(--cl-border); border-radius: var(--cl-radius); padding: 20px; }
.closet-fieldset > h2 { margin: 0 0 4px; font-size: .95rem; }
.closet-fieldset > .closet-fieldset-lead { margin: 0 0 16px; font-size: .8rem; color: var(--cl-muted); }
.closet-field-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.closet-field-full { grid-column: 1 / -1; }
/* 1項目しかない行で入力欄が横いっぱいに伸びないように。 */
.closet-field-narrow { max-width: 320px; }
.closet-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* 保存ボタンとは離して置く、あまり使わない導線(店頭を見る・削除)。 */
.closet-form-sidenote { justify-content: flex-end; gap: 18px; padding-top: 4px; }
.closet-inline-form { display: inline; }

/* 査定結果から出品する画面のカード。写真とAIの答えを並べて、
   そのまま「出品する」まで進めるようにする。 */
.closet-judgements { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.closet-judgement {
  display: flex; gap: 14px; padding: 14px;
  background: var(--cl-panel); border: 1px solid var(--cl-border); border-radius: var(--cl-radius);
}
.closet-judgement-thumb {
  position: relative; width: 96px; height: 128px; flex: 0 0 auto;
  border-radius: 10px; overflow: hidden; background: #f2eeef; border: 1px solid var(--cl-border);
}
.closet-judgement-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.closet-judgement-count {
  position: absolute; right: 4px; bottom: 4px; font-size: .68rem;
  background: rgba(36, 31, 34, .72); color: #fff; border-radius: 999px; padding: 1px 7px;
}
.closet-judgement-body { flex: 1; min-width: 0; }
.closet-judgement-brand { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.closet-judgement-meta { margin: 0 0 4px; font-size: .82rem; color: var(--cl-muted); }
.closet-judgement .closet-btn { padding: 8px 16px; font-size: .85rem; }

.closet-ai-panel {
  border: 1px dashed var(--cl-accent); background: var(--cl-accent-soft);
  border-radius: var(--cl-radius); padding: 18px; margin-bottom: 20px;
}
.closet-ai-panel h2 { margin: 0 0 6px; font-size: .95rem; color: var(--cl-accent-dark); }
.closet-ai-panel p { margin: 0 0 10px; font-size: .84rem; color: var(--cl-muted); line-height: 1.8; }

/* 入力欄のすぐ上に置く、AIに書き直させるボタンの行。 */
.closet-ai-inline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px;
}
.closet-ai-inline .closet-btn { padding: 7px 14px; font-size: .82rem; }
.closet-ai-inline .closet-hint { margin: 0; }

.closet-image-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.closet-image-item { width: 96px; text-align: center; }
.closet-image-item img { width: 96px; height: 124px; object-fit: cover; border-radius: 8px; border: 1px solid var(--cl-border); }

.closet-status { font-size: .74rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--cl-border); background: #fff; color: var(--cl-muted); white-space: nowrap; }
.closet-status-published { background: #e8f5ec; border-color: #c3e6cf; color: #1d7a44; }
.closet-status-draft { background: #f4f2f3; }
.closet-status-sold_out, .closet-status-shipped { background: #eef1f6; border-color: #d6dde9; color: #48566e; }
.closet-status-archived, .closet-status-canceled { background: #f6f0f1; border-color: #e6d5d9; color: #8a6b73; }
.closet-status-pending_payment { background: #fdf3e6; border-color: #f0dcc0; color: #96631d; }
.closet-status-paid, .closet-status-preparing { background: #fbf1f3; border-color: #f0d8de; color: var(--cl-accent-dark); }

/* --- 管理画面: たたんで置くパネル(CSVの一括登録など) ------------------ */
.closet-admin-panel {
  background: var(--cl-panel); border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius); margin-bottom: 18px;
}
.closet-admin-panel > summary {
  cursor: pointer; padding: 12px 16px; font-size: .86rem; font-weight: 700;
  list-style: none;
}
.closet-admin-panel > summary::-webkit-details-marker { display: none; }
.closet-admin-panel > summary::before { content: "＋ "; color: var(--cl-muted); }
.closet-admin-panel[open] > summary::before { content: "− "; }
.closet-admin-panel-body { padding: 0 16px 16px; }
.closet-admin-panel-body p { line-height: 1.9; }

/* --- 管理画面: 一括操作の帯 -------------------------------------------- */
.closet-bulk-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--cl-accent-soft); border: 1px solid var(--cl-border);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 12px;
}
.closet-bulk-bar select { width: auto; min-width: 150px; }
.closet-bulk-all { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
.closet-bulk-check { width: 20px; height: 20px; }
/* 行ごとの操作。並べても押し間違えない間隔を空ける。 */
.closet-row-tools { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* --- 管理画面: 商品写真の並べ替え -------------------------------------- */
/* 1枚目が一覧のサムネイルになるので、どれが1枚目かをはっきり見せる。 */
.closet-image-item { position: relative; }
.closet-image-item.is-main img { border-color: var(--cl-accent); box-shadow: 0 0 0 2px var(--cl-accent-soft); }
.closet-image-badge {
  position: absolute; top: 4px; left: 4px;
  background: var(--cl-accent); color: #fff; font-size: .62rem;
  border-radius: 999px; padding: 1px 7px;
}
.closet-image-tools {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; margin-top: 4px;
}
.closet-image-tools .closet-linkbutton { font-size: .74rem; }

/* --- 管理画面: 携帯での使い勝手 ---------------------------------------- */
@media (max-width: 720px) {
  /* 入力欄は16px。これより小さいとiOSのSafariが勝手に拡大する。 */
  .closet-admin input[type=text], .closet-admin input[type=email], .closet-admin input[type=number],
  .closet-admin input[type=search], .closet-admin input[type=file], .closet-admin select,
  .closet-admin textarea { font-size: 16px; padding: 11px 12px; }

  /* 出品フォームは長いので、保存ボタンを画面の下に貼り付ける。
     position:sticky はグリッドの子(=自分の高さぶんしか動ける余地が無い)
     では効かないので、fixedで置いて本文の下に余白を確保する。 */
  .closet-admin-main { padding-bottom: 96px; }
  .closet-admin-actions-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--cl-border);
    backdrop-filter: saturate(180%) blur(8px);
  }
  .closet-admin-actions-sticky .closet-btn { flex: 1 1 auto; text-align: center; }

  /* 写真は指で押せる大きさに。 */
  .closet-image-item, .closet-image-item img { width: 104px; }
  .closet-image-item img { height: 136px; }

  /* 一覧の表は横スクロールではなくカードにする。狭い画面では
     横に流れる表は「隠れている列があること」に気付けないため。
     写真とチェックを左に立てて、残りを右に積む -- 1商品が1画面を
     占めてしまうと、探すのにスクロールばかりすることになる。 */
  .closet-table-cards thead { display: none; }
  .closet-table-cards, .closet-table-cards tbody { display: block; width: 100%; }
  .closet-table-cards tr {
    display: grid; grid-template-columns: 22px 56px minmax(0, 1fr);
    column-gap: 10px; row-gap: 1px; align-items: center;
    background: var(--cl-panel); border: 1px solid var(--cl-border);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
  }
  .closet-table-cards td {
    display: flex; align-items: baseline; gap: 8px; grid-column: 3;
    padding: 0; border-bottom: none; white-space: normal; font-size: .82rem;
  }
  .closet-table-cards td::before {
    content: attr(data-label); flex: 0 0 4em;
    font-size: .7rem; color: var(--cl-muted);
  }
  /* チェックと写真は左に立てて、右の行数ぶん背を伸ばす。 */
  .closet-table-cards td:nth-child(1) { grid-column: 1; grid-row: 1 / span 6; align-self: start; }
  .closet-table-cards td:nth-child(2) { grid-column: 2; grid-row: 1 / span 6; align-self: start; }
  .closet-table-cards td:nth-child(1)::before,
  .closet-table-cards td:nth-child(2)::before,
  .closet-table-cards td.closet-table-wrapcell::before { content: none; }
  .closet-table-cards td.closet-table-wrapcell { display: block; font-size: .9rem; margin-bottom: 2px; }
  /* 操作はカードの下いっぱいに、押せる大きさで。 */
  .closet-table-cards td:last-child { grid-column: 1 / -1; margin-top: 8px; }
  .closet-table-cards td:last-child::before { content: none; }
  .closet-table-cards .closet-row-tools { gap: 6px 16px; }
  .closet-table-cards .closet-row-tools .closet-linkbutton { padding: 4px 0; }
  .closet-table-cards .closet-table-thumb { width: 56px; height: 74px; }
  .closet-table-wrap { overflow-x: visible; }
}

/* --- 管理画面: 見た目の設定の見本 -------------------------------------- */
/* いまのCSS変数のまま組んであるので、保存すればここも一緒に変わる。 */
.closet-design-preview {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: var(--cl-bg); border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius); padding: 16px; margin-bottom: 18px;
}
.closet-design-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.closet-design-swatch { text-align: center; }
.closet-design-swatch span {
  display: block; width: 52px; height: 40px;
  border-radius: calc(var(--cl-radius) / 2); border: 1px solid var(--cl-border);
}
.closet-design-swatch small { font-size: .64rem; color: var(--cl-muted); line-height: 1.5; }
.closet-design-sample {
  background: var(--cl-panel); border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius); padding: 14px;
}
.closet-design-sample h3 { margin: 0 0 2px; font-size: 1rem; font-family: var(--cl-heading-font); }
.closet-design-sample p { margin: 0 0 8px; }
.closet-design-sample-price {
  font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; font-family: var(--cl-heading-font);
}
.closet-design-sample .closet-btn { padding: 8px 18px; font-size: .85rem; }
/* 横長の画像(トップの背景写真)は、正方形の枠に押し込めない。 */
.closet-image-wide, .closet-image-wide img { width: 220px; }
.closet-image-wide img { height: 82px; }

/* 商品ページの「カートに入れる」は狭い画面で下に貼り付くので、フッターの
   最後の行が隠れないように余白を足す(バーの無いページでは余白が空くだけ)。
   .closet-footer の padding より後に書く必要がある -- 同じ強さの指定なので、
   先に書くと上の一括指定に負ける。 */
@media (max-width: 899px) {
  .closet-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* 注文照会に出す入金期限。待たせている側の都合(1点もので棚が塞がる)を
   お客様に押しつける文なので、隠さず目立つところに置く。 */
.closet-due {
  margin: 8px 0 10px; padding: 8px 12px;
  background: #fff; border: 1px solid var(--cl-accent-line); border-radius: calc(var(--cl-radius) / 2);
}
.closet-due .closet-small { color: var(--cl-muted); }

/* --- 入荷のお知らせ ----------------------------------------------------- */
/* 成人向けの店は広告が出しづらくSNSも止められやすいので、この名簿が
   いちばん確実な集客路になる。目立たせるが、押し売りにはしない。 */
.closet-arrival {
  margin-top: 32px;
  background: var(--cl-accent-soft); border: 1px solid var(--cl-accent-line);
  border-radius: var(--cl-radius); padding: clamp(18px, 4vw, 28px);
}
.closet-arrival h2 { margin: 0 0 6px; font-size: 1.05rem; font-family: var(--cl-heading-font); }
.closet-arrival p { margin: 0 0 12px; line-height: 1.9; }
.closet-arrival-form { margin-bottom: 6px; }
.closet-arrival-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.closet-arrival-fields input[type=email] { flex: 2 1 220px; }
.closet-arrival-fields input[type=text] { flex: 1 1 150px; }
.closet-arrival-fields select { flex: 1 1 150px; width: auto; }
.closet-arrival-fields .closet-btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  /* 狭い画面では1行1項目。押し間違いを減らす。 */
  .closet-arrival-fields > * { flex: 1 1 100%; width: 100%; }
}
/*
 * Corporate site (puremint.jp) styles, scoped under body.corporate-site so
 * they never leak into FuzokuZero's own pink-branded portal pages -- both
 * stylesheets ship in the same application.css bundle (see manifest.js's
 * require_tree), they just never apply to the same page.
 */

body.corporate-site {
  /* Greens picked to match the company logo's leaf/monogram color. */
  --corp-primary: #2f7d5e;
  --corp-primary-dark: #1f5940;
  --corp-accent: #6fb897;
  --corp-bg: #ffffff;
  --corp-text: #26313f;
  --corp-muted: #64707d;
  --corp-border: #dfe4e9;
  background: var(--corp-bg);
  color: var(--corp-text);
}

.corporate-header {
  border-bottom: 1px solid var(--corp-border);
  background: #fff;
}
.corporate-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 10px; padding: 18px 16px;
}
.corporate-logo { display: flex; align-items: center; }
.corporate-logo-img { display: block; height: 44px; width: auto; }
.corporate-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.corporate-nav a { color: var(--corp-text); font-size: .92rem; }
.corporate-nav a:hover { color: var(--corp-primary); text-decoration: none; }
.corporate-nav-cta {
  background: var(--corp-primary); color: #fff !important; padding: 8px 16px; border-radius: 20px;
}
.corporate-nav-cta:hover { background: var(--corp-primary-dark); }

.corporate-hero {
  background: linear-gradient(180deg, #f3f8f5, #ffffff);
  border-bottom: 1px solid var(--corp-border);
  text-align: center; padding: 64px 16px;
}
.corporate-hero-logo { display: block; margin: 0 auto 20px; height: 140px; width: auto; }
.corporate-hero-lead { margin: 0; font-size: 1.05rem; color: var(--corp-muted); }

.corporate-main { padding-bottom: 40px; }
.corporate-section { padding: 48px 16px; }
.corporate-section-narrow { max-width: 640px; }
.corporate-section h1 { font-size: 1.6rem; margin-top: 0; }
.corporate-section h2 { font-size: 1.3rem; }

.corporate-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 20px; }
.corporate-cards-wide { grid-template-columns: 1fr; max-width: 720px; }
.corporate-card {
  border: 1px solid var(--corp-border); border-radius: 10px; padding: 20px;
  background: #fbfcfd;
}
.corporate-card h3, .corporate-card h2 { margin-top: 0; color: var(--corp-primary); font-size: 1.05rem; }
.corporate-card p { color: var(--corp-muted); margin: 0 0 10px; }
.corporate-card p:last-child { margin-bottom: 0; }
.corporate-card-features { margin: 0 0 10px; padding-left: 1.2em; color: var(--corp-muted); font-size: .92rem; }
.corporate-card-features li { margin-bottom: 4px; }
.corporate-card-features:last-child { margin-bottom: 0; }

.corporate-link { color: var(--corp-primary); font-weight: bold; }

/* 事業展開予定: 公開中のサービス(corporate-card)より軽い見た目にし、
   「準備中」であることが一目でわかるようにする。 */
.corporate-upcoming-heading { margin-top: 36px; font-size: 1.05rem; color: var(--corp-text); }
.corporate-upcoming-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; }
.corporate-upcoming-item {
  border: 1px dashed var(--corp-border); border-radius: 10px; padding: 16px 18px;
  background: #fff;
}
.corporate-upcoming-badge {
  display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 10px;
  background: #f4f7fa; color: var(--corp-muted); font-size: .72rem; font-weight: bold;
}
.corporate-upcoming-item h3 { margin: 0 0 6px; font-size: .96rem; color: var(--corp-text); }
.corporate-upcoming-body { margin: 0; color: var(--corp-muted); font-size: .88rem; }
.corporate-upcoming-link-row { margin: 10px 0 0; font-size: .88rem; }
.corporate-upcoming-item p:last-child { margin-bottom: 0; }

.corporate-cta { background: #f4f7fa; border-radius: 12px; text-align: center; }
.corporate-cta .btn { background: var(--corp-primary); }
.corporate-cta .btn:hover { background: var(--corp-primary-dark); }

.corporate-table { border-collapse: collapse; width: 100%; max-width: 640px; }
.corporate-table th, .corporate-table td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--corp-border); vertical-align: top;
}
.corporate-table th { width: 160px; color: var(--corp-muted); font-weight: bold; white-space: nowrap; }

.corporate-note { color: var(--corp-muted); font-size: .9rem; }

/* 開発実績の詳細ページ */
.corporate-work-lead { font-size: 1.05rem; color: var(--corp-muted); }
.corporate-pdf-note { font-size: .78rem; color: var(--corp-muted); font-weight: normal; margin-left: 6px; }

/* 8ステップの処理フロー図。横一列に並べ、幅が足りない画面では折り返す
   (「320px幅から横スクロールなし」の要件のため、横スクロールさせず
   縦積みに切り替える)。 */
.corporate-flow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 4px; margin: 24px 0; padding: 0; list-style: none;
}
.corporate-flow-step {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-width: 108px; padding: 10px 12px; border: 1px solid var(--corp-border); border-radius: 8px;
  background: #fbfcfd; font-size: .82rem; font-weight: bold; color: var(--corp-text);
}
/* 矢印は各ステップの中に(::afterで)埋め込む -- 独立した要素だと、折り返し
   の切れ目次第で矢印だけが行頭に取り残される崩れ方をするため、矢印を
   常にひとつ前のステップと同じ行内・同じ要素に固定してそれを防ぐ。 */
.corporate-flow-step:not(:last-child)::after {
  content: "→"; margin-left: 8px; color: var(--corp-accent); font-size: 1rem;
}
/* 「Claude Code」の直前に挟む、幅ゼロで折り返しだけを強制する要素。
   最後の1件(iPhone)だけが孤立しないよう、8ステップを3+5の2行に
   明示的に分ける(ブラウザ任せの自動折り返しに任せない)。 */
.corporate-flow-break { flex-basis: 100%; width: 0; height: 0; }
@media (max-width: 640px) {
  .corporate-flow { flex-direction: column; align-items: stretch; }
  .corporate-flow-step { width: 100%; }
  .corporate-flow-break { display: none; }
}

/* AIの役割分担カード。事業内容カードと同じ見た目の連続にならないよう、
   丸番号バッジと左のアクセント罫線で区切る。 */
.corporate-role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 20px 0; }
.corporate-role-card {
  border: 1px solid var(--corp-border); border-left: 4px solid var(--corp-accent); border-radius: 8px;
  padding: 18px 20px; background: #fff;
}
.corporate-role-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--corp-primary); color: #fff;
  font-size: .85rem; font-weight: bold; margin-bottom: 10px;
}
.corporate-role-card h3 { margin: 0 0 8px; font-size: 1rem; color: var(--corp-primary); }
.corporate-role-card p { margin: 0; color: var(--corp-muted); font-size: .92rem; }

/* 適用例(アプリの実績リスト) */
.corporate-examples { margin: 20px 0; padding: 0; list-style: none; }
.corporate-examples li {
  padding: 14px 0; border-bottom: 1px solid var(--corp-border); font-size: .92rem; color: var(--corp-muted);
}
.corporate-examples li:last-child { border-bottom: none; }
.corporate-examples strong { color: var(--corp-text); }

/* 品質と安全への配慮・まとめ */
.corporate-quality-list { margin: 16px 0; padding-left: 1.2em; color: var(--corp-muted); font-size: .92rem; }
.corporate-quality-list li { margin-bottom: 6px; }

.corporate-site .required {
  color: #b5204f; font-size: .72rem; font-weight: normal; margin-left: 6px;
  border: 1px solid #b5204f; border-radius: 3px; padding: 1px 5px;
}

.corporate-footer {
  border-top: 1px solid var(--corp-border); padding: 24px 16px; color: var(--corp-muted); font-size: .85rem;
}
.corporate-footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.corporate-footer-logo { height: 56px; width: auto; }
.corporate-footer-copyright { margin: 0; }
/*
 * JSBA学科検定 模擬試験(/jsba)の見た目。ポータル本体とは別サイトなので、
 * 色も含めてここで完結させる。
 *
 * application.css に全スタイルがまとめて読み込まれる構成(require_tree)の
 * ため、クラス名はすべて jsba- で始め、body.jsba-app の下に閉じ込めて
 * ポータル側と干渉しないようにしている。
 *
 * スマートフォンで使うものとして作る(モバイルファースト、タップ領域は
 * 最小44px、フォントは16px以上=iOSでズームされない)。
 */
body.jsba-app {
  --jsba-bg: #f3f6fa; --jsba-card: #fff; --jsba-ink: #15202b; --jsba-sub: #5b6b7b; --jsba-line: #dfe6ee;
  --jsba-brand: #12355b; --jsba-accent: #1f7ae0; --jsba-accent-soft: #e6f0fd;
  --jsba-ok: #14804a; --jsba-ok-soft: #e3f5ea; --jsba-ng: #c0352b; --jsba-ng-soft: #fdeceb;
  --jsba-warn: #a15c00; --jsba-warn-soft: #fff3dc;
  --jsba-radius: 14px; --jsba-shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 4px 16px rgba(16, 32, 48, .06);

  margin: 0;
  background: var(--jsba-bg);
  color: var(--jsba-ink);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

@media (prefers-color-scheme: dark) {
  body.jsba-app {
    --jsba-bg: #0e141b; --jsba-card: #17202a; --jsba-ink: #e8eef4; --jsba-sub: #9aabbb; --jsba-line: #2a3644;
    --jsba-brand: #0b2440; --jsba-accent: #5aa2f5; --jsba-accent-soft: #16304f;
    --jsba-ok: #4cc38a; --jsba-ok-soft: #12321f; --jsba-ng: #ff8277; --jsba-ng-soft: #3a1a18;
    --jsba-warn: #f0b35a; --jsba-warn-soft: #3a2a10;
    --jsba-shadow: none;
  }
}

.jsba-app a { color: var(--jsba-accent); }
.jsba-app button, .jsba-app input, .jsba-app select { font: inherit; color: inherit; }
.jsba-app button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jsba-app h1 { font-size: 1.35rem; margin: .2em 0 .6em; line-height: 1.35; }
.jsba-app h2 { font-size: 1.08rem; margin: 0 0 .6em; line-height: 1.4; }
.jsba-app h3 { font-size: .98rem; margin: 1.2em 0 .4em; }
.jsba-app p { margin: .4em 0; }
.jsba-sub, .jsba-app small { color: var(--jsba-sub); font-size: .86rem; }

/* --- 全体の枠 --- */
.jsba-topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px;
  background: var(--jsba-brand); color: #fff;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  padding-top: calc(8px + env(safe-area-inset-top));
}
.jsba-brand {
  display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700;
  padding: 6px 8px; white-space: nowrap; min-height: 44px;
}
.jsba-nav { margin-left: auto; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.jsba-nav::-webkit-scrollbar { display: none; }
/* 指で押す前提の画面なので、押せるものは高さ44pxを下回らないようにする。 */
.jsba-nav a {
  color: #fff; opacity: .82; padding: 8px 10px; border-radius: 999px; font-size: .9rem;
  white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center;
}
.jsba-nav a.jsba-on { background: rgba(255, 255, 255, .18); opacity: 1; }
.jsba-nav .jsba-userchip { border: 1px solid rgba(255, 255, 255, .35); margin-left: 4px; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .jsba-brand span { display: none; } }

.jsba-main {
  max-width: 860px; margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right)) 96px max(16px, env(safe-area-inset-left));
}
.jsba-card {
  background: var(--jsba-card); border: 1px solid var(--jsba-line); border-radius: var(--jsba-radius);
  box-shadow: var(--jsba-shadow); padding: 16px; margin: 0 0 14px;
}
.jsba-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .jsba-grid.jsba-two { grid-template-columns: 1fr 1fr; } }

/* --- 部品 --- */
/* ボタンはリンク(a)でもボタン(button)でも同じ見た目にする。aの色・下線を
   打ち消すため、.jsba-app 付きで詳細度を上げている。 */
.jsba-app .jsba-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px;
  padding: 10px 18px; border-radius: 12px; border: 1px solid var(--jsba-line);
  background: var(--jsba-card); color: var(--jsba-ink); font-weight: 600; text-align: center;
  line-height: 1.3; text-decoration: none;
}
.jsba-btn.jsba-primary { background: var(--jsba-accent); border-color: var(--jsba-accent); color: #fff; }
.jsba-btn.jsba-danger { color: var(--jsba-ng); border-color: var(--jsba-ng); }
/* 指で押せる大きさ(44px)を下回らないようにする -- スマホで使う画面のため。 */
.jsba-btn.jsba-small { min-height: 44px; padding: 6px 12px; font-size: .88rem; border-radius: 10px; }
.jsba-btn.jsba-block { display: flex; width: 100%; }
/* ボタンほど目立たせたくない導線(「パスワードを忘れた方はこちら」など)。
   見た目は文中のリンクのままで、タップ領域だけ44pxを確保する。 */
.jsba-app .jsba-textlink {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  color: var(--jsba-accent); font-size: .9rem; text-decoration: underline;
}
.jsba-btn:disabled { opacity: .45; cursor: not-allowed; }
.jsba-btn:active:not(:disabled) { transform: translateY(1px); }
.jsba-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.jsba-spacer { flex: 1; }

.jsba-app label { display: block; font-size: .88rem; color: var(--jsba-sub); margin: 12px 0 4px; }
.jsba-app input[type=text], .jsba-app input[type=email], .jsba-app input[type=password], .jsba-app select {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--jsba-line);
  border-radius: 10px; background: var(--jsba-card); font-size: 16px;
}
.jsba-app input:focus, .jsba-app select:focus, .jsba-app button:focus-visible { outline: 2px solid var(--jsba-accent); outline-offset: 1px; }

.jsba-login { max-width: 400px; margin: 8vh auto 0; }
.jsba-login h1 { text-align: center; }
.jsba-login .jsba-logo { display: flex; justify-content: center; color: var(--jsba-accent); margin-bottom: 6px; }

.jsba-seg { display: inline-flex; border: 1px solid var(--jsba-line); border-radius: 999px; overflow: hidden; background: var(--jsba-card); }
.jsba-seg button, .jsba-seg a {
  border: 0; background: none; padding: 8px 16px; min-height: 44px; font-weight: 600;
  color: var(--jsba-sub); display: inline-flex; align-items: center;
}
.jsba-seg .jsba-on { background: var(--jsba-accent); color: #fff; }

.jsba-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.jsba-kpi { background: var(--jsba-bg); border-radius: 12px; padding: 10px 8px; text-align: center; }
.jsba-kpi b { display: block; font-size: 1.45rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.jsba-kpi span { font-size: .76rem; color: var(--jsba-sub); }

.jsba-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; vertical-align: middle; }
.jsba-badge.jsba-ok { background: var(--jsba-ok-soft); color: var(--jsba-ok); }
.jsba-badge.jsba-ng { background: var(--jsba-ng-soft); color: var(--jsba-ng); }
.jsba-badge.jsba-warn { background: var(--jsba-warn-soft); color: var(--jsba-warn); }
.jsba-badge.jsba-info { background: var(--jsba-accent-soft); color: var(--jsba-accent); }

.jsba-bar { height: 10px; border-radius: 999px; background: var(--jsba-line); overflow: hidden; }
.jsba-bar > i { display: block; height: 100%; background: var(--jsba-accent); border-radius: 999px; }
.jsba-bar > i.jsba-ok { background: var(--jsba-ok); }
.jsba-catrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--jsba-line); }
.jsba-catrow:first-of-type { border-top: 0; }
.jsba-catrow .jsba-bar { grid-column: 1 / -1; }
.jsba-catrow .jsba-nums { font-size: .84rem; color: var(--jsba-sub); font-variant-numeric: tabular-nums; }

.jsba-chart { width: 100%; height: auto; display: block; }
.jsba-chart text { font-size: 11px; fill: var(--jsba-sub); }

.jsba-modes .jsba-btn { justify-content: flex-start; text-align: left; padding: 14px 16px; min-height: 72px; }
.jsba-modes .jsba-btn b { display: block; font-size: 1.02rem; }
.jsba-modes .jsba-btn small { display: block; font-weight: 400; color: inherit; opacity: .8; }
.jsba-modes .jsba-ico { font-size: 1.5rem; width: 36px; text-align: center; flex: none; }

.jsba-notice { padding: 12px 14px; border-radius: 12px; background: var(--jsba-warn-soft); color: var(--jsba-warn); font-size: .92rem; margin-bottom: 14px; }
.jsba-alert { padding: 12px 14px; border-radius: 12px; background: var(--jsba-ng-soft); color: var(--jsba-ng); font-size: .92rem; margin-bottom: 14px; }

/* ログイン画面の「ログインIDは、登録のしかたで変わります」。自分で登録した人
   (メールアドレス)と、管理者から発行された人(ユーザID)で入り口が違うため。 */
.jsba-help { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--jsba-bg); }
.jsba-help h2 { font-size: .92rem; margin: 0 0 8px; }
.jsba-help dl { margin: 0; }
.jsba-help dt { font-size: .84rem; color: var(--jsba-sub); margin-top: 8px; }
.jsba-help dt:first-child { margin-top: 0; }
.jsba-help dd { margin: 2px 0 0; font-size: .9rem; }
.jsba-help .jsba-ex {
  display: block; margin-top: 2px; color: var(--jsba-sub);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem; word-break: break-all;
}

/* --- 出題画面 --- */
.jsba-qhead { position: sticky; top: 0; z-index: 10; background: var(--jsba-bg); padding: 8px 0 10px; margin-top: -8px; }
.jsba-qhead .jsba-row { justify-content: space-between; font-size: .9rem; color: var(--jsba-sub); font-variant-numeric: tabular-nums; }
.jsba-timer { font-weight: 700; color: var(--jsba-ink); }
.jsba-timer.jsba-low { color: var(--jsba-ng); }
.jsba-qcard .jsba-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.jsba-qtext { font-size: 1.06rem; line-height: 1.8; margin: 4px 0 16px; white-space: pre-wrap; }
.jsba-choices { display: grid; gap: 10px; }
/* 選択肢は <label> なので、上の「.jsba-app label」(フォームの項目名)より
   詳細度を上げて打ち消す必要がある。 */
.jsba-app .jsba-choice {
  display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; min-height: 56px;
  margin: 0; padding: 13px 14px; border-radius: 12px; border: 2px solid var(--jsba-line);
  background: var(--jsba-card); color: var(--jsba-ink); font-size: 1rem; line-height: 1.55;
}
.jsba-choice .jsba-k {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--jsba-line);
  display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; color: var(--jsba-sub);
}
.jsba-choice.jsba-sel { border-color: var(--jsba-accent); background: var(--jsba-accent-soft); }
.jsba-choice.jsba-sel .jsba-k { border-color: var(--jsba-accent); background: var(--jsba-accent); color: #fff; }
.jsba-choice.jsba-right { border-color: var(--jsba-ok); background: var(--jsba-ok-soft); }
.jsba-choice.jsba-right .jsba-k { border-color: var(--jsba-ok); background: var(--jsba-ok); color: #fff; }
.jsba-choice.jsba-wrong { border-color: var(--jsba-ng); background: var(--jsba-ng-soft); }
.jsba-choice.jsba-wrong .jsba-k { border-color: var(--jsba-ng); background: var(--jsba-ng); color: #fff; }
.jsba-choice:disabled { cursor: default; color: inherit; }
.jsba-tf { grid-template-columns: 1fr 1fr; }
.jsba-app .jsba-tf .jsba-choice { justify-content: center; font-size: 1.5rem; font-weight: 700; min-height: 72px; }
.jsba-feedback { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border-left: 5px solid; }
.jsba-feedback.jsba-ok { background: var(--jsba-ok-soft); border-color: var(--jsba-ok); }
.jsba-feedback.jsba-ng { background: var(--jsba-ng-soft); border-color: var(--jsba-ng); }
.jsba-feedback b { display: block; margin-bottom: 2px; }
.jsba-footbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--jsba-card); border-top: 1px solid var(--jsba-line);
  padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.jsba-footbar .jsba-in { max-width: 828px; margin: 0 auto; display: flex; gap: 10px; }
.jsba-footbar .jsba-btn { flex: 1; }
.jsba-footbar .jsba-btn.jsba-narrow { flex: 0 0 auto; }
.jsba-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-top: 8px; }
.jsba-palette button {
  min-height: 44px; border-radius: 10px; border: 1px solid var(--jsba-line); background: var(--jsba-card);
  color: var(--jsba-ink); font-variant-numeric: tabular-nums; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.jsba-palette button.jsba-done { background: var(--jsba-accent-soft); border-color: var(--jsba-accent); color: var(--jsba-accent); font-weight: 700; }
.jsba-palette button.jsba-cur { outline: 2px solid var(--jsba-ink); }

/* --- 採点結果 --- */
.jsba-score { text-align: center; padding: 8px 0; }
.jsba-score .jsba-num { font-size: 3rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jsba-score .jsba-num small { font-size: 1.1rem; font-weight: 600; }
.jsba-item { border-top: 1px solid var(--jsba-line); padding: 14px 0; }
.jsba-item:first-of-type { border-top: 0; }
.jsba-item .jsba-mark { font-weight: 800; margin-right: 6px; }
.jsba-item.jsba-ok .jsba-mark { color: var(--jsba-ok); }
.jsba-item.jsba-ng .jsba-mark { color: var(--jsba-ng); }
.jsba-item .jsba-ans { font-size: .92rem; margin-top: 6px; }
.jsba-item .jsba-exp { font-size: .9rem; color: var(--jsba-sub); margin-top: 6px; background: var(--jsba-bg); padding: 8px 10px; border-radius: 8px; }

/* --- 表 --- */
.jsba-app table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.jsba-app th, .jsba-app td { padding: 10px 8px; border-bottom: 1px solid var(--jsba-line); text-align: left; vertical-align: middle; }
.jsba-app th { font-size: .78rem; color: var(--jsba-sub); font-weight: 600; white-space: nowrap; }
.jsba-app td.jsba-num, .jsba-app th.jsba-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jsba-tablewrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
/* 一覧のセル内リンク(成績の日時など)も、指で押せる高さを確保する。 */
.jsba-tablewrap td a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 560px) { .jsba-hide-sm { display: none; } }

/* --- 受験案内 --- */
.jsba-guide dl { margin: 0; }
.jsba-guide dt { font-weight: 700; margin-top: 12px; }
.jsba-guide dd { margin: 2px 0 0; }
.jsba-guide ul { padding-left: 1.2em; margin: .4em 0; }
.jsba-guide li { margin: .25em 0; }

/* button_to はボタンをフォームで包むので、横並びの見た目を保つための調整 */
.jsba-seg form, .jsba-row form { display: inline-flex; margin: 0; }
.jsba-row form { flex: 0 0 auto; }
.jsba-modes form { display: flex; }
.jsba-modes form, .jsba-modes .jsba-btn { width: 100%; }

/* 選択肢はラジオボタンをラベルで包んでいる(JSなしで選べるようにするため)。
   ラジオ自体は隠し、選択状態はラベル側の見た目で示す。 */
.jsba-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jsba-choice:has(input:checked) { border-color: var(--jsba-accent); background: var(--jsba-accent-soft); }
.jsba-choice:has(input:checked) .jsba-k { border-color: var(--jsba-accent); background: var(--jsba-accent); color: #fff; }
.jsba-choice.jsba-right, .jsba-choice.jsba-wrong { cursor: default; }
.jsba-choice.jsba-right:has(input:checked), .jsba-choice.jsba-right { border-color: var(--jsba-ok); background: var(--jsba-ok-soft); }
.jsba-choice.jsba-right:has(input:checked) .jsba-k, .jsba-choice.jsba-right .jsba-k { border-color: var(--jsba-ok); background: var(--jsba-ok); color: #fff; }
.jsba-choice.jsba-wrong:has(input:checked), .jsba-choice.jsba-wrong { border-color: var(--jsba-ng); background: var(--jsba-ng-soft); }
.jsba-choice.jsba-wrong:has(input:checked) .jsba-k, .jsba-choice.jsba-wrong .jsba-k { border-color: var(--jsba-ng); background: var(--jsba-ng); color: #fff; }
.jsba-choice:has(input:focus-visible) { outline: 2px solid var(--jsba-accent); outline-offset: 1px; }
/*
 * 古着ブランド判定ツール (/vintage) のスタイル。corporate.cssと同じ考え方で
 * .vintage-siteの下だけに効くようにしてあるので、同じapplication.cssの
 * バンドルに入っていてもポータル本体やコーポレートサイトには影響しない。
 */

/* 判定結果は運営管理画面(admin/vintage_judgements)でも同じ見た目で出すので、
   body限定ではなく .vintage-site を付けた要素の中で効くようにしてある。 */
.vintage-site {
  /* 古着屋の紙タグ・生成りの生地をイメージした色。 */
  --vtg-ink: #2b2620;
  --vtg-muted: #6f6459;
  --vtg-primary: #8a5a2b;
  --vtg-primary-dark: #63401d;
  --vtg-bg: #faf6ef;
  --vtg-panel: #fffdf9;
  --vtg-border: #e0d6c6;
  background: var(--vtg-bg);
  color: var(--vtg-ink);
}

.vintage-site a { color: var(--vtg-primary-dark); }

.vintage-header { background: var(--vtg-panel); border-bottom: 1px solid var(--vtg-border); }
.vintage-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 10px; padding: 16px;
}
.vintage-logo { display: flex; align-items: center; gap: 10px; color: var(--vtg-ink); }
.vintage-logo:hover { text-decoration: none; }
.vintage-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--vtg-primary); color: #fff; font-weight: bold;
}
.vintage-logo-text { font-weight: bold; letter-spacing: .04em; }
.vintage-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.vintage-nav a { color: var(--vtg-ink); font-size: .92rem; }
.vintage-nav a:hover { color: var(--vtg-primary); text-decoration: none; }

.vintage-hero {
  background: linear-gradient(180deg, #f3ead9, var(--vtg-bg));
  border-bottom: 1px solid var(--vtg-border);
  padding: 48px 16px; text-align: center;
}
.vintage-hero h1 { margin: 0 0 12px; font-size: 1.6rem; }
.vintage-hero-lead { margin: 0 auto; max-width: 640px; color: var(--vtg-muted); }

.vintage-main { padding-bottom: 40px; }
.vintage-section { padding: 36px 16px; }
.vintage-section-narrow { max-width: 720px; }
.vintage-section h1 { font-size: 1.5rem; margin-top: 0; }
.vintage-section h2 { font-size: 1.15rem; margin: 28px 0 8px; color: var(--vtg-primary-dark); }

.vintage-site form.form input[type=file],
.vintage-site form.form select,
.vintage-site form.form textarea {
  background: var(--vtg-panel); border: 1px solid var(--vtg-border); border-radius: 6px;
  padding: 8px 10px; width: 100%; max-width: 100%; font-size: .95rem;
}
/* リンクとしての.btn(a要素)は、上のa側の文字色指定に負けて
   茶色の地に茶文字になってしまうので、ここで白へ戻す。 */
.vintage-site .btn, .vintage-site a.btn { background: var(--vtg-primary); color: #fff; }
.vintage-site .btn:hover, .vintage-site a.btn:hover { background: var(--vtg-primary-dark); }
.vintage-field-hint { color: var(--vtg-muted); font-size: .85rem; margin: 4px 0 6px; }
.vintage-note { color: var(--vtg-muted); font-size: .85rem; }
/* 値のうしろに小さく添える補足(サイズをどこから読んだか、など)。 */
.vintage-note-inline { color: var(--vtg-muted); font-size: .8rem; }
.vintage-link { color: var(--vtg-primary-dark); font-weight: bold; }

.vintage-result-summary {
  background: var(--vtg-panel); border-left: 4px solid var(--vtg-primary);
  padding: 14px 16px; border-radius: 0 6px 6px 0; margin: 0 0 20px;
}
.vintage-result-facts { display: grid; gap: 8px; margin-bottom: 8px; }
.vintage-result-facts > div { display: flex; gap: 12px; align-items: baseline; }
.vintage-result-label {
  min-width: 88px; color: var(--vtg-muted); font-size: .8rem; font-weight: bold;
}
.vintage-result-empty {
  background: var(--vtg-panel); border: 1px dashed var(--vtg-border);
  border-radius: 8px; padding: 16px;
}

.vintage-candidates { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.vintage-candidate {
  border: 1px solid var(--vtg-border); border-radius: 8px;
  background: var(--vtg-panel); padding: 16px;
}
.vintage-candidate-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px;
}
.vintage-candidate-name { font-weight: bold; font-size: 1.05rem; }
.vintage-candidate p { margin: 0 0 8px; color: var(--vtg-muted); }
.vintage-candidate p:last-child { margin-bottom: 0; }
.vintage-confidence {
  font-size: .75rem; border-radius: 12px; padding: 2px 10px; border: 1px solid var(--vtg-border);
  color: var(--vtg-muted); background: #fff;
}
.vintage-confidence-high { color: #1a7a3f; border-color: #b7e4c7; background: #e6f6ec; }
.vintage-confidence-medium { color: #8a5a2b; border-color: #e3cfae; background: #f8efe0; }
.vintage-confidence-low { color: #8a4a4a; border-color: #eccccc; background: #f9eded; }

.vintage-price {
  border: 1px solid var(--vtg-border); border-radius: 8px;
  background: var(--vtg-panel); padding: 16px;
}
.vintage-price-range {
  margin: 0 0 6px; font-size: 1.45rem; font-weight: bold; color: var(--vtg-primary-dark);
  letter-spacing: .01em;
}
.vintage-price-note { margin: 0 0 8px; color: var(--vtg-muted); }
/* 新品時の定価は参考値なので、中古相場より控えめに見せる。 */
.vintage-price-secondary .vintage-price-range { font-size: 1.15rem; }
.vintage-price .vintage-list { margin: 0 0 10px; }
.vintage-price-search { margin: 8px 0 0; font-size: .9rem; }

.vintage-history { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.vintage-history-item {
  border: 1px solid var(--vtg-border); border-radius: 8px;
  background: var(--vtg-panel); padding: 14px 16px;
}
.vintage-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vintage-history-brand { font-weight: bold; font-size: 1.02rem; }
.vintage-history-date { color: var(--vtg-muted); font-size: .8rem; white-space: nowrap; }
.vintage-history-meta { margin: 4px 0 0; color: var(--vtg-muted); font-size: .9rem; }
.vintage-history-price { color: var(--vtg-primary-dark); font-weight: bold; margin-left: 8px; }
.vintage-history-input {
  border-left: 3px solid var(--vtg-border); padding: 2px 0 2px 12px; margin-bottom: 18px;
}
.vintage-history-input p { margin: 2px 0 0; color: var(--vtg-muted); }

.vintage-list { padding-left: 1.2em; color: var(--vtg-muted); }
.vintage-list li { margin-bottom: 6px; }

.vintage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.vintage-card {
  border: 1px solid var(--vtg-border); border-radius: 8px; background: var(--vtg-panel); padding: 16px;
}
.vintage-card h3 { margin: 0 0 6px; font-size: 1rem; color: var(--vtg-primary-dark); }
.vintage-card p { margin: 0; color: var(--vtg-muted); font-size: .9rem; }

.vintage-brand {
  border-top: 1px solid var(--vtg-border); padding-top: 20px; margin-top: 24px;
  /* アンカーで飛んだときに見出しがヘッダーの下に隠れないように。 */
  scroll-margin-top: 20px;
}
.vintage-brand h3 { margin: 0 0 6px; font-size: 1.05rem; }
.vintage-brand > p { color: var(--vtg-muted); }
.vintage-era-table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.vintage-era-table th, .vintage-era-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--vtg-border);
  vertical-align: top; font-size: .9rem;
}
.vintage-era-table th { width: 200px; white-space: nowrap; color: var(--vtg-primary-dark); }

/* 出品用の商品紹介文(app/views/vintage/_listing.html.erb)。
   フリマアプリの説明欄にそのまま貼るものなので、改行をそのまま見せる。 */
.vintage-listing {
  border: 1px solid var(--vtg-border); border-radius: 8px;
  background: var(--vtg-panel); padding: 16px; margin-top: 28px;
  /* 作成後にアンカーで戻ってきたとき、見出しが画面の上に隠れないように。 */
  scroll-margin-top: 20px;
}
.vintage-listing h2 { margin-top: 0; }
.vintage-listing-lead { color: var(--vtg-muted); font-size: .92rem; }
.vintage-listing-field { margin-bottom: 18px; }
.vintage-listing-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.vintage-listing-title { margin: 0; font-weight: bold; }
.vintage-listing-body {
  margin: 0; padding: 12px; border: 1px solid var(--vtg-border); border-radius: 6px;
  background: var(--vtg-bg); font-family: inherit; font-size: .92rem; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
.vintage-listing-hashtags { margin: 8px 0 0; color: var(--vtg-primary-dark); font-size: .9rem; }
.vintage-listing-todo { margin-bottom: 18px; }
.vintage-copy {
  border: 1px solid var(--vtg-border); border-radius: 4px; background: var(--vtg-bg);
  color: var(--vtg-primary-dark); font-size: .8rem; padding: 4px 10px; cursor: pointer;
  white-space: nowrap;
}
.vintage-copy:hover { background: #f3ead9; }
/* コピー用の控え(画面には出さないが、選択できる必要があるので隠さない)。 */
.vintage-copy-source { position: absolute; left: -9999px; width: 1px; height: 1px; }
.vintage-site .btn.secondary { background: var(--vtg-muted); }

.vintage-footer {
  border-top: 1px solid var(--vtg-border); padding: 24px 16px;
  color: var(--vtg-muted); font-size: .85rem; text-align: center;
}
.vintage-footer-note { margin: 0 auto 8px; max-width: 720px; }
.vintage-footer-copyright { margin: 0; }

@media (max-width: 640px) {
  .vintage-era-table th { width: auto; white-space: normal; }
  .vintage-era-table th, .vintage-era-table td { display: block; border-bottom: none; padding: 4px 0; }
  .vintage-era-table tr { display: block; border-bottom: 1px solid var(--vtg-border); padding: 8px 0; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
  --brand: #e0356b;
  --brand-dark: #b5204f;
  --brand-light: #ff8fb3;
  --bg: #faf7f8;
  --text: #2a2a2a;
  --muted: #767676;
  --border: #e4dde0;
  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(40, 12, 22, .07);
  --shadow-md: 0 10px 24px rgba(40, 12, 22, .10);
  --shadow-lg: 0 20px 48px rgba(40, 12, 22, .16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Sans", "Yu Gothic", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-dark); text-decoration: none; transition: color .15s ease; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

header.site-header {
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 10;
}

/* Row 1: thin utility bar (inquiry link + account/login links). */
header.site-header .site-header-utility {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 4px;
  background: #fff8f9; border-bottom: 1px solid var(--border);
  padding: 6px 16px; font-size: .78rem;
}
header.site-header .site-header-utility a, header.site-header .site-header-utility button.link-button {
  color: var(--text); margin-left: 14px; background: none; border: none; font: inherit; cursor: pointer; padding: 0;
}
header.site-header .site-header-utility > a:first-child { margin-left: 0; }
header.site-header .site-header-utility-right { display: flex; flex-wrap: wrap; }
header.site-header .site-header-utility-right > *:first-child { margin-left: 0; }

/* Row 2: logo + quick search + primary nav. */
header.site-header .site-header-main {
  background: linear-gradient(120deg, var(--brand), var(--brand-dark));
  color: #fff;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; row-gap: 10px;
}
header.site-header .logo { font-size: 1.4rem; font-weight: bold; color: #fff; display: flex; align-items: baseline; gap: 8px; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .12); flex-shrink: 0; }
header.site-header .logo .site-logo-img { display: block; height: 36px; width: auto; }

header.site-header .site-header-search { display: flex; flex: 1 1 220px; max-width: 360px; }
header.site-header .site-header-search-input {
  flex: 1; border: none; border-radius: 20px 0 0 20px; padding: 8px 14px; font-size: .85rem;
}
header.site-header .site-header-search-btn {
  border: none; border-radius: 0 20px 20px 0; background: var(--brand-dark); color: #fff;
  padding: 8px 14px; cursor: pointer; font-size: .95rem;
}

header.site-header .site-header-nav { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; margin-left: auto; }
header.site-header .site-header-nav a {
  position: relative;
  color: #fff; margin-left: 16px;
  padding: 4px 0;
  font-size: .92rem;
  white-space: nowrap;
}
header.site-header .site-header-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: #fff; border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
header.site-header .site-header-nav a:hover::after { transform: scaleX(1); }
header.site-header .site-header-nav a:hover { text-decoration: none; }
header.site-header .site-header-nav a:first-child { margin-left: 0; }

/* Row 3: horizontally-scrollable prefecture quick-nav (mirrors .weekly-tabs). */
header.site-header .site-header-prefectures { background: var(--brand-dark); }
header.site-header .site-header-prefectures-inner {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px; white-space: nowrap;
}
header.site-header .prefecture-tab {
  color: #fff; background: rgba(255, 255, 255, .12); border-radius: 14px;
  padding: 4px 12px; font-size: .8rem; flex-shrink: 0;
}
header.site-header .prefecture-tab:hover { background: rgba(255, 255, 255, .24); text-decoration: none; }
header.site-header .prefecture-tab-more { background: rgba(0, 0, 0, .18); }

.flash { max-width: 1100px; margin: 12px auto; padding: 0 16px; }
.flash .notice, .flash .alert {
  padding: 10px 14px; border-radius: 4px; margin-bottom: 8px;
}
.flash .notice { background: #e6f6ec; color: #1a7a3f; border: 1px solid #b7e4c7; }
.flash .alert { background: #fdecec; color: #b5204f; border: 1px solid #f5b8c4; }

main { padding: 24px 0 60px; }

.card {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.present-ticket-item { padding: 14px 0; border-top: 1px solid var(--border); }
.present-ticket-item:first-child { border-top: none; padding-top: 0; }
.present-ticket-banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 14px 0;
  border-radius: var(--radius);
}
.present-ticket-item:first-child .present-ticket-banner {
  width: calc(100% + 28px);
  margin: -14px -14px 14px -14px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.shop-review-item { padding: 14px 0; border-top: 1px solid var(--border); }
.shop-review-item:first-child { border-top: none; padding-top: 0; }

.shop-reply { background: #faf6f7; border-radius: 6px; padding: 10px 12px; margin-top: 10px; }
.shop-reply-label { font-weight: bold; color: var(--brand); font-size: .85rem; margin-bottom: 4px; }

.review-body summary { cursor: pointer; list-style: none; }
.review-body summary::-webkit-details-marker { display: none; }
.review-body summary::after { content: " ▼続きを読む"; color: var(--brand); font-size: .85em; white-space: nowrap; }
.review-body[open] summary { display: none; }

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

.photo-with-status { position: relative; display: inline-block; }
.photo-with-status .badge { position: absolute; bottom: 6px; left: 6px; }
/* Inside a diary thumbnail, the caption <span> must sit on its own line
   below the photo/video box rather than wrapping beside it — the box's
   own display:inline-block otherwise lets a line box form alongside it. */
.girl-diary-thumb .photo-with-status { display: block; }

.moderation-group { margin-bottom: 24px; }
.moderation-group-header { font-size: .95rem; margin-bottom: 8px; }
.moderation-group-header .badge { margin-left: 6px; }
.moderation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.moderation-item { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 8px; text-align: center; }
.moderation-item img, .moderation-item video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; display: block; margin-bottom: 6px; background: #000; }
.moderation-item .badge { margin-bottom: 6px; }
.moderation-item .btn { width: 100%; margin-top: 0; }

/* Cast card listings are a fixed 5-across on desktop (rather than the
   auto-fill `.grid`) so 在籍キャスト matches the 週間出勤 grid below it. */
.cast-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 900px) {
  .cast-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .cast-grid { grid-template-columns: repeat(2, 1fr); }
}

.cast-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: #eee; }
.cast-card h3 { margin: 8px 0 4px; font-size: 1rem; }
.badge { display: inline-block; background: var(--brand); color: #fff; font-size: .75rem; padding: 2px 8px; border-radius: 10px; box-shadow: var(--shadow-sm); }
.badge.muted { background: var(--muted); }
.badge.warning { background: #e8b923; }

/* --- Shop listing card (店舗一覧) --------------------------------------- */

.shop-listing { display: flex; flex-direction: column; gap: 16px; }
.shop-listing-card {
  padding: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.shop-listing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.shop-listing-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.shop-listing-name { font-size: 1.3rem; font-weight: bold; color: var(--text); }
.shop-listing-name:hover { color: var(--brand-dark); text-decoration: none; }
.shop-listing-chain { font-size: .85rem; font-weight: normal; color: var(--muted); margin-left: 6px; }
.shop-listing-subtitle { margin-top: 6px; }
.shop-listing-head-right { text-align: right; flex: 0 0 auto; }
.shop-listing-updated { display: block; font-size: .75rem; color: var(--muted); margin-bottom: 6px; }
.shop-keep-btn { margin-top: 0; padding: 6px 12px; font-size: .8rem; }

.shop-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.tag-badge {
  display: inline-block; background: #fff3f6; color: var(--brand-dark); border: 1px solid var(--brand);
  font-size: .75rem; padding: 3px 10px; border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.tag-badge.highlight { background: #b5204f; color: #fff; border-color: #b5204f; }
.tag-badge.recruit { background: #fff8e1; color: #9a6b00; border-color: #e0b23a; }
.tag-badge.zero-recommend { background: #e8b923; color: #fff; border-color: #e8b923; font-weight: bold; }
.tag-badge.pr-badge { background: #607d8b; color: #fff; border-color: #607d8b; font-weight: bold; }

.shop-listing-body { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.shop-listing-photos { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; width: 240px; flex: 0 0 auto; }
.shop-listing-photos img, .shop-listing-photo-placeholder {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: #eee; display: block;
  transition: transform .25s ease;
}
.shop-listing-photos a:hover img { transform: scale(1.05); }
.shop-listing-recruit { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 4px; flex-wrap: wrap; }

.shop-listing-info { flex: 1; min-width: 240px; }
.shop-listing-facts { margin: 0 0 10px; }
.shop-listing-facts dt { float: left; clear: left; width: 84px; font-size: .8rem; color: var(--muted); font-weight: bold; margin-bottom: 6px; }
.shop-listing-facts dd { margin: 0 0 6px 90px; font-size: .85rem; }
.shop-listing-review-link { font-size: .85rem; }
.shop-listing-catch { margin: 8px 0 0; font-size: .9rem; color: var(--text); }

.shop-listing-coupon {
  margin-top: 12px; background: #fff0f4; border: 2px solid var(--brand); border-radius: 6px;
  padding: 10px 14px; font-size: .95rem; font-weight: bold; color: var(--brand-dark);
}
.coupon-flag {
  display: inline-block; background: var(--brand); color: #fff; font-size: .7rem;
  padding: 2px 8px; border-radius: 3px; margin-right: 8px; font-weight: bold;
}

.editor-review-card { background: #fdf7ee; border-color: #e6d3a8; }

@media (max-width: 640px) {
  .shop-listing-body { flex-direction: column; }
  .shop-listing-photos { width: 100%; }
  .shop-listing-facts dt { width: 70px; }
  .shop-listing-facts dd { margin-left: 76px; }
}

table.admin-table { width: 100%; border-collapse: collapse; background: #fff; }
table.admin-table th, table.admin-table td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; font-size: .9rem; }
table.admin-table th { background: #f4f0f1; }

.prospect-group { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.prospect-group summary { cursor: pointer; padding: 10px 14px; font-weight: bold; background: #f4f0f1; list-style: none; }
.prospect-group summary::-webkit-details-marker { display: none; }
.prospect-group summary::before { content: "▶ "; }
.prospect-group[open] summary::before { content: "▼ "; }
.prospect-group table.admin-table { border-top: 1px solid var(--border); }

.account-setup-box { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin: 16px 0; }
.account-setup-box label { display: block; font-weight: bold; margin: 12px 0 4px; font-size: .9rem; }
.account-setup-box label:first-child { margin-top: 0; }
.copy-row { display: flex; gap: 8px; align-items: flex-start; }
.copy-row input, .copy-row textarea {
  flex: 1; padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-size: .9rem; background: #faf6f7;
}
.copy-row .btn { margin-top: 0; flex-shrink: 0; }

form.form label { display: block; font-weight: bold; margin: 12px 0 4px; font-size: .9rem; }
form.form input[type=text], form.form input[type=email], form.form input[type=password],
form.form input[type=number], form.form input[type=date], form.form input[type=time],
form.form select, form.form textarea {
  width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-size: .95rem;
}
form.form textarea { min-height: 120px; }
.analytics-chart { display: flex; align-items: flex-end; gap: 2px; height: 160px; border-bottom: 1px solid var(--border); padding: 8px 4px 0; margin-bottom: 8px; background: #fff; border-radius: var(--radius); }
.analytics-bar-col { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.analytics-bar { width: 100%; background: var(--brand); border-radius: 2px 2px 0 0; min-height: 1px; }
.checkbox-row { display: flex; flex-wrap: wrap; gap: 12px; }
.checkbox-inline { display: inline-flex !important; align-items: center; gap: 4px; font-weight: normal !important; margin: 0 !important; }
.image-setting-preview { margin-bottom: 8px; }
.image-setting-preview img { max-width: 200px; max-height: 200px; border-radius: 6px; border: 1px solid var(--border); display: block; }
.membership-card-image { max-width: 340px; width: 100%; border-radius: 10px; box-shadow: var(--shadow-sm); display: block; margin: 8px 0; }
.member-rank-card-thumb { max-width: 100px; max-height: 63px; border-radius: 6px; border: 1px solid var(--border); display: block; object-fit: cover; }

.shop-member-rank-badge {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff3f6; border: 1px solid var(--brand); border-radius: 8px;
  padding: 8px 14px; margin-bottom: 12px; font-size: .85rem;
}
.shop-member-rank-badge-label { color: var(--muted); }
.shop-member-rank-badge-rank { font-weight: bold; color: var(--brand-dark); }
.shop-member-rank-badge-link { font-weight: bold; }

.shop-theme-page { padding: 20px; border-radius: 12px; }

.member-card-visual {
  position: relative; max-width: 340px; width: 100%; min-height: 180px;
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  margin: 8px 0;
}
.member-card-visual-bg { width: 100%; display: block; }
.member-card-visual-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 10px 14px 12px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .78) 48%, rgba(0, 0, 0, 0) 100%);
}
.member-card-visual-shop { font-size: .75rem; opacity: .9; margin: 0 0 4px; }
.member-card-visual-name { font-size: 1.1rem; font-weight: bold; margin: 0 0 6px; }
.member-card-visual-meta { font-size: .72rem; margin: 0; line-height: 1.5; }
/* hidden属性を付けた要素は必ず隠す。.btn などが display を上書きしてしまうと、
   JSで出し入れするつもりのボタン(「中止する」など)が最初から見えてしまう。 */
[hidden] { display: none !important; }
.btn {
  display: inline-block; background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; border: none;
  padding: 9px 20px; border-radius: 6px; cursor: pointer; font-size: .95rem; margin-top: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.06); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn.secondary { background: var(--muted); }
.btn.danger { background: #b5204f; }
.btn.disabled { background: #c7c9cc; color: #6b6f76; cursor: not-allowed; box-shadow: none; }
.present-ticket-sms-warning { color: #b5204f; font-size: .82rem; margin-left: 8px; }
.text-danger { color: #b5204f; font-weight: bold; }

.admin-shell { display: flex; min-height: 100vh; }
.admin-shell .sidebar { width: 220px; background: #22252b; color: #fff; padding: 20px 0; }
.admin-shell .sidebar a { display: block; color: #cfd3da; padding: 8px 20px; }
.admin-shell .sidebar a:hover, .admin-shell .sidebar a.active { background: #2f333b; color: #fff; text-decoration: none; }
.admin-shell .sidebar .brand { color: #fff; font-weight: bold; padding: 0 20px 16px; font-size: 1.1rem; }
.admin-shell .content { flex: 1; padding: 24px; }
.build-version {
  position: fixed; bottom: 6px; right: 10px; z-index: 10;
  font-size: .7rem; color: var(--muted); opacity: .7;
  background: rgba(255, 255, 255, 0.8); padding: 2px 6px; border-radius: 4px;
}

.errors { background: #fdecec; border: 1px solid #f5b8c4; color: #b5204f; padding: 10px 14px; border-radius: 4px; margin-bottom: 12px; }

/* Bot honeypot field: moved off-screen rather than display:none, since
   some bots specifically skip hidden/display:none fields when auto-filling. */
.honeypot-field { position: absolute; left: -9999px; top: -9999px; }

/* AI drafting assistant on the cast's diary form */
.ai-assist {
  margin: 16px 0; padding: 14px; border: 1px dashed var(--brand);
  border-radius: 8px; background: #fff7f9;
}
.ai-assist-head { margin-bottom: 8px; }
.ai-assist-title { font-weight: bold; color: var(--brand-dark); margin-right: 8px; }
.ai-assist-head small { color: var(--muted); font-size: .8rem; }
.ai-assist-input {
  width: 100%; min-height: 60px; padding: 8px; border: 1px solid var(--border);
  border-radius: 4px; font-size: .95rem; font-family: inherit;
}
.ai-assist .btn { margin-top: 8px; }
.ai-assist-status { display: block; margin-top: 6px; font-size: .85rem; color: var(--muted); }
.stars { color: #f5a623; }

/* --- Home page --------------------------------------------------------- */

.hero {
  background:
    radial-gradient(circle at 85% -10%, rgba(255, 255, 255, .18), transparent 55%),
    radial-gradient(circle at 0% 120%, rgba(255, 255, 255, .12), transparent 50%),
    linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-radius: 14px;
  padding: 32px 28px;
  margin-bottom: 8px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.hero-title { margin: 0 0 16px; font-size: 1.55rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.hero-search-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 18px;
  backdrop-filter: blur(4px);
}
.hero-search-field { flex: 1; min-width: 160px; }
.hero-search-field label { display: block; font-size: .8rem; margin-bottom: 4px; color: #fff; }
.hero-search-field select {
  width: 100%; padding: 10px; border-radius: 4px; border: none; font-size: .95rem;
}
.hero-search-btn { margin-top: 0; white-space: nowrap; background: #fff; color: var(--brand-dark); font-weight: bold; }
.hero-search-btn:hover { background: #f4f0f1; }

.home-section { margin-top: 36px; }
.home-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.home-section-head h2 { margin: 0; font-size: 1.15rem; border-left: 5px solid var(--brand); padding-left: 10px; }
.home-section-more { font-size: .85rem; color: var(--muted); }

.region-note { color: var(--muted); font-size: .85rem; margin: 0 0 14px; }

/* Illustrated prefecture map with clickable overlays positioned by
   percentage so they track the image at any render width. Map and area
   list sit side by side, with the map capped so it doesn't dominate the
   page now that only one region's map is shown per page. */
.region-explorer { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.illust-map-block {
  flex: 0 1 380px; max-width: 380px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm);
}
.illust-map { position: relative; width: 100%; margin-top: 4px; }
.illust-map-img { display: block; width: 100%; height: auto; border-radius: 6px; }
.illust-map-zone { position: absolute; display: block; border-radius: 6px; }
.illust-map-zone.active {
  background: rgba(224, 53, 107, 0); border: 2px solid transparent; transition: background .15s, border-color .15s;
}
.illust-map-zone.active:hover {
  background: rgba(224, 53, 107, 0.25); border-color: var(--brand-dark);
}
.illust-map-zone.inactive { cursor: not-allowed; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.region-block {
  flex: 1; min-width: 240px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm);
}
.region-name {
  margin: 0 0 12px; font-size: 1rem; font-weight: bold; color: var(--brand-dark);
  border-bottom: 2px solid var(--brand); padding-bottom: 8px;
}

.region-switch { margin: 0 0 16px; }
.region-switch a { color: rgba(255, 255, 255, 0.85); }
.region-switch a:hover { color: #fff; }

/* --- Index gate / splash page ------------------------------------------- */

.top-gate {
  max-width: 640px; margin: 32px auto; text-align: center;
}
.top-gate-eyecatch { margin-bottom: 24px; }
.top-gate-eyecatch img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.top-gate-heading { font-size: 1.3rem; margin: 0 0 20px; }
.top-gate-map { position: relative; margin-bottom: 28px; }
.top-gate-map-img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.top-gate-region-buttons {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 20px;
}
.top-gate-region-btn { font-size: 1.05rem; padding: 14px 32px; }
.top-gate-age-check { margin-top: 12px; }
.top-gate-age-link { color: var(--muted); font-size: .85rem; text-decoration: underline; }

.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.area-block { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }
.area-block h4 { margin: 0 0 6px; font-size: .95rem; }
.area-children { list-style: none; margin: 0; padding: 0; columns: 2; }
.area-children li { font-size: .82rem; margin-bottom: 4px; }

.genre-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.genre-pill {
  display: inline-block; background: #fff; border: 1px solid var(--brand);
  color: var(--brand-dark); padding: 8px 18px; border-radius: 999px; font-size: .9rem;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.genre-pill:hover { background: var(--brand); color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); }

.ranking-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ranking-item {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ranking-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ranking-thumb img { transition: transform .25s ease; }
.ranking-thumb:hover img { transform: scale(1.06); }
.ranking-rank {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--muted); color: #fff; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
}
.ranking-rank.rank-1 { background: #e8b923; }
.ranking-rank.rank-2 { background: #adb0b5; }
.ranking-rank.rank-3 { background: #c07a3e; }
.ranking-thumb { flex: 0 0 auto; }
.ranking-thumb img, .ranking-thumb-placeholder { width: 88px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: #eee; display: block; }
.ranking-body { flex: 1; min-width: 0; }
.ranking-body h3 { margin: 0 0 4px; font-size: .95rem; }
.ranking-body p { margin: 4px 0 0; font-size: .85rem; color: var(--muted); }

.diary-card .diary-meta { font-size: .8rem; color: var(--muted); margin: 4px 0; }
.diary-card-thumb { display: block; margin-bottom: 10px; }
.diary-card-thumb .photo-with-status { display: block; }
.diary-card-thumb img, .diary-card-thumb video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: #eee; display: block; }

/* --- Favorites (お気に入り) ---------------------------------------------- */

.favorite-btn { margin-top: 10px; }
.favorite-btn.favorited { background: var(--brand); color: #fff; border-color: var(--brand); }
.favorite-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; display: block; }
.favorite-card h3 { margin: 10px 0 2px; font-size: 1rem; }
.favorite-shift-status { font-size: .85rem; font-weight: bold; margin: 6px 0 2px; }
.favorite-shift-status.on-duty { color: var(--brand-dark); }
.favorite-shift-status.off-duty { color: var(--muted); font-weight: normal; }
.favorite-diary-update { font-size: .85rem; margin: 6px 0; }

@media (max-width: 640px) {
  .hero-search-row { flex-direction: column; align-items: stretch; }
  .area-children { columns: 1; }
  .region-explorer { flex-direction: column; }
  .illust-map-block { max-width: none; }
}

/* --- Girl detail page (女の子詳細) --------------------------------------- */

.girl-detail-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; margin-top: 16px; }
@media (min-width: 1440px) {
  .girl-detail-layout { grid-template-columns: 1.8fr 1fr; }
}
@media (max-width: 900px) {
  .girl-detail-layout { grid-template-columns: 1fr; }
}

.girl-main-image-row { display: flex; align-items: center; gap: 8px; }
.girl-main-image { flex: 1; min-width: 0; }
.girl-main-image img { width: 100%; max-height: 80vh; object-fit: contain; background: #111; border-radius: 8px; display: block; }
.girl-gallery-arrow {
  flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.girl-gallery-arrow:hover { background: rgba(0, 0, 0, 0.75); }
.girl-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.girl-thumbs img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; cursor: pointer; background: #eee;
  transition: transform .15s ease, outline-color .15s ease;
}
.girl-thumbs img:hover { outline: 2px solid var(--brand); transform: translateY(-2px); }
@media (max-width: 640px) {
  .girl-thumbs { grid-template-columns: repeat(3, 1fr); }
}

.obi-block { margin-bottom: 16px; box-shadow: var(--shadow-sm); border-radius: var(--radius); }
.obi-header { background: linear-gradient(120deg, var(--brand), var(--brand-dark)); color: #fff; font-weight: bold; padding: 9px 16px; border-radius: var(--radius) var(--radius) 0 0; font-size: .95rem; }
.obi-body { background: #fff; color: var(--text); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); padding: 14px; font-size: .9rem; }
/* 「タイトル帯・枠を非表示にする」チェック時: タイトル帯だけでなく、白い
   枠(背景・ボーダー・影・余白)も取り払い、コンテンツをページの背景に
   直接馴染ませる。ブロックの表示/非表示そのもの(visible)とは別の設定。 */
.obi-block.no-header { box-shadow: none; }
.obi-body.no-header { background: none; border: none; border-radius: 0; padding: 0; }

.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: .9rem; text-align: left; }
.price-table th { width: 40%; color: var(--muted); font-weight: bold; background: #faf6f7; }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: none; }

.price-table-row-input { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.price-table-row-input input { flex: 1; }
.price-table-row-input .btn.secondary { margin-top: 0; flex-shrink: 0; }

.profile-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.profile-table th { text-align: left; width: 90px; color: var(--muted); font-size: .8rem; padding: 4px 0; vertical-align: top; }
.profile-table td { padding: 4px 0; font-size: .88rem; }

.girl-shift-row { display: flex; gap: 6px; overflow-x: auto; }
.girl-shift-day {
  flex: 1 0 72px; min-width: 72px; text-align: center; border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 4px; background: var(--bg);
}
.girl-shift-day .date { font-weight: bold; font-size: .78rem; margin-bottom: 4px; }
.girl-shift-day .time { font-size: .68rem; color: var(--muted); line-height: 1.3; }

.girl-diary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.girl-diary-thumb { display: block; text-align: center; font-size: .72rem; color: var(--text); }
.girl-diary-thumb img, .girl-diary-thumb video { width: 140px; max-width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: #eee; display: block; margin-bottom: 4px; }
@media (max-width: 900px) {
  .girl-diary-grid { grid-template-columns: repeat(2, 1fr); }
}

.cast-review-item { padding: 8px 0; border-top: 1px solid var(--border); }
.cast-review-item:first-child { border-top: none; padding-top: 0; }

/* --- Shop page blocks (Block CMS) --------------------------------------- */

.block-photo-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.block-photo-grid img { max-width: 100%; height: auto; border-radius: 6px; background: #eee; }

.weekly-tabs { display: flex; justify-content: center; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.weekly-tab {
  flex: 0 0 auto; min-width: 60px; padding: 8px 10px; border: none; border-radius: 20px;
  background: #f2f2f2; color: var(--text); font-size: .78rem; text-align: center;
  line-height: 1.3; cursor: pointer;
}
.weekly-tab.active { background: var(--brand); color: #fff; font-weight: bold; }
.weekly-tab-date { font-size: .7rem; }

.weekly-day-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.weekly-cast-card {
  position: relative; display: block; border-radius: 8px; overflow: hidden; background: #eee;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.weekly-cast-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.weekly-cast-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform .3s ease; }
.weekly-cast-card:hover img { transform: scale(1.06); }
.weekly-cast-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 100%);
  color: #fff;
}
.weekly-cast-time { font-size: .7rem; }
.weekly-cast-name { font-size: .8rem; font-weight: bold; margin-top: 2px; }
.weekly-cast-size { font-size: .62rem; opacity: .9; margin-top: 1px; }
.weekly-cast-shop { font-size: .68rem; opacity: .95; margin-top: 1px; }
.weekly-cast-catch { font-size: .65rem; opacity: .95; margin-top: 3px; }
.weekly-cast-badge {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  background: #b5204f; color: #fff; font-size: .65rem;
  padding: 2px 6px; border-radius: 3px;
}
.weekly-schedule-empty { text-align: center; color: var(--muted); font-size: .85rem; padding: 20px 0; }

@media (max-width: 900px) {
  .weekly-day-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .weekly-day-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Full-page listing of today's shifts across every shop: wider than the
   shop page's own 週間出勤 grid, so it gets its own column count instead
   of the fixed 5-column .weekly-day-grid default. */
.today-shifts-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* Cross-shop cast search results, reusing the same card look. */
.cast-listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-top: 16px; }

.block-video-wrapper { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 6px; overflow: hidden; }
.block-video-wrapper iframe, .block-video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 6px; object-fit: contain; }

/* --- Video gallery (体験動画一覧 / TOPページのプレビュー) --------------- */

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.video-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.video-card-head h3 { margin: 0; font-size: 1rem; }
.video-card-date { font-size: .78rem; color: var(--muted); }

/* TOPページの体験動画プレビュー: 横5列のサムネイル並び */
.video-thumb-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.video-thumb { display: block; color: inherit; }
.video-thumb:hover { text-decoration: none; }
.video-thumb-media { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.video-thumb-media img, .video-thumb-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb-shop { margin-top: 6px; font-size: .8rem; text-align: center; }
@media (max-width: 900px) {
  .video-thumb-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .video-thumb-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Auth pages (Devise: login / password reset) ----------------------- */

.auth-page { display: flex; justify-content: center; padding: 48px 0 60px; }
.auth-card {
  width: 100%; max-width: 400px; background: #fff;
  border-radius: 16px; border-top: 4px solid var(--brand);
  padding: 36px 32px; box-shadow: var(--shadow-lg);
}
.auth-title { margin: 0 0 24px; font-size: 1.3rem; text-align: center; color: var(--brand-dark); }
.auth-card .form-field { margin-bottom: 18px; }
.auth-card .form-field.checkbox-field { display: flex; align-items: center; gap: 8px; }
.auth-card label { display: block; font-weight: bold; font-size: .85rem; margin-bottom: 6px; color: var(--text); }
.auth-card .checkbox-field label { display: inline; margin: 0; font-weight: normal; }
.auth-card input[type="email"], .auth-card input[type="password"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: .95rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-card input[type="email"]:focus, .auth-card input[type="password"]:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(224, 53, 107, .15);
}
.auth-card .hint { color: var(--muted); font-size: .8rem; margin: -10px 0 12px; }
.auth-submit { width: 100%; text-align: center; }
.auth-links { margin-top: 22px; text-align: center; font-size: .85rem; }
.auth-links p { margin: 6px 0; }
#error_explanation {
  background: #fdecec; border: 1px solid #f5b8c4; color: var(--brand-dark);
  padding: 10px 14px; border-radius: 8px; margin-bottom: 18px;
}
#error_explanation h2 { margin: 0 0 6px; font-size: .9rem; }
#error_explanation ul { margin: 0; padding-left: 18px; font-size: .85rem; }

/* --- Site-wide responsive layer ----------------------------------------
   Kept last so these overrides win over the component rules above. Most
   components already collapse via their own breakpoints; this section
   covers the chrome (header nav, admin sidebar) and the elements that
   otherwise force horizontal page scroll on a phone (wide tables, media). */

/* Never let a stray wide child scroll the whole page sideways. */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

/* Wide data tables scroll inside their own box rather than the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  /* Admin screens: sidebar becomes a horizontal strip above the content. */
  .admin-shell { flex-direction: column; min-height: 0; }
  .admin-shell .sidebar {
    width: 100%; padding: 12px 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  }
  .admin-shell .sidebar .brand { padding: 0 12px; font-size: 1rem; width: 100%; }
  .admin-shell .sidebar a { padding: 6px 12px; font-size: .9rem; }
  .admin-shell .content { padding: 16px; }

  table.admin-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 768px) {
  /* Header: logo/search/nav stack instead of overflowing. */
  header.site-header .site-header-main { flex-direction: column; align-items: flex-start; gap: 10px; }
  header.site-header .logo { font-size: 1.15rem; flex-wrap: wrap; gap: 4px; }
  header.site-header .site-header-search { flex: 0 0 auto; max-width: none; width: 100%; }
  header.site-header .site-header-nav { margin-left: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
  header.site-header .site-header-nav a { margin-left: 0; font-size: .9rem; }
  header.site-header .site-header-utility { font-size: .72rem; }
  header.site-header .site-header-utility a, header.site-header .site-header-utility button.link-button { margin-left: 10px; }

  main { padding: 16px 0 40px; }
  .card { padding: 12px; }

  .shop-listing-head-right { text-align: left; }
  .girl-main-image img { max-height: 60vh; }
  .obi-body { padding: 12px; }

  /* Section headings (home page): the "…を見る >" link drops below the
     title instead of being squeezed against it and forcing the title to
     wrap mid-word. */
  .home-section-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .home-section { margin-top: 24px; }
}

@media (max-width: 560px) {
  .container, .flash { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.15rem; }
  .hero { padding: 20px 16px; }
  .hero-title { font-size: 1.2rem; }

  /* Photo strip on shop cards: a compact 4-across thumbnail row rather
     than a full-width 2x2 block, which otherwise ate ~500px of vertical
     space before any of the shop's actual details were visible. */
  .shop-listing-photos { width: 100%; grid-template-columns: repeat(4, 1fr); }
  .shop-listing-recruit { position: static; margin-top: 4px; grid-column: 1 / -1; }

  /* Detail rows stack label-over-value; the 70px floated label column
     left too little room for values like the 対応エリア list. */
  .shop-listing-facts dt { float: none; width: auto; margin-bottom: 0; }
  .shop-listing-facts dd { margin: 0 0 8px; }

  .shop-listing-name { font-size: 1.1rem; }
  .shop-listing-coupon { font-size: .85rem; padding: 8px 10px; }

  /* Full-width tap targets for form submits (not the inline buttons that
     live inside admin table rows, which must stay compact). */
  form.form .btn { width: 100%; text-align: center; }

  /* Tabs start at the left edge once they overflow, so the first (本日)
     tab is visible instead of being centered out of view. */
  .weekly-tabs { justify-content: flex-start; }

  /* Label/value inputs side-by-side get too cramped on narrow phones;
     stack them so each field keeps a usable width. */
  .price-table-row-input { flex-wrap: wrap; }
  .price-table-row-input input { flex-basis: 100%; }

  /* Same reasoning for the account-setup link/message + copy button row. */
  .copy-row { flex-wrap: wrap; }
  .copy-row input, .copy-row textarea { flex-basis: 100%; }
  .copy-row .btn { width: 100%; }

  .auth-page { padding: 24px 0 40px; }
  .auth-card { padding: 28px 20px; }
}

/* --- Coupons page (/coupons) --------------------------------------------- */
.coupon-page-count { font-weight: bold; margin: 4px 0 16px; }
.coupon-filter-bar { padding: 18px; }
.coupon-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; }
.coupon-filter-field { display: flex; flex-direction: column; gap: 4px; }
.coupon-filter-field label { font-weight: bold; font-size: .85rem; margin: 0; }
.coupon-filter-field select { padding: 7px; border: 1px solid var(--border); border-radius: 4px; }
.coupon-filter-checkboxes { flex-direction: row; align-items: center; gap: 14px; }
.coupon-sort-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coupon-sort-label { font-weight: bold; font-size: .85rem; color: var(--muted); }
.coupon-sort-link { padding: 5px 14px; border-radius: 16px; border: 1px solid var(--border); font-size: .85rem; color: var(--text); }
.coupon-sort-link.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.coupon-note { background: #fff8e1; border: 1px solid #e0c987; border-radius: 6px; padding: 10px 14px; font-size: .85rem; color: #8a6d1f; margin: 18px 0; }
.coupon-page-info { font-size: .85rem; color: var(--muted); margin-bottom: 10px; }

.coupon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px 20px; margin: 16px 0; }

.coupon-card { background: #fff; color: var(--text); border-radius: 10px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-top: 10px; overflow: hidden; display: flex; flex-direction: column; }
.coupon-card-header {
  position: relative;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  padding: 14px 16px 18px;
}
.coupon-card-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 12px;
  background: var(--brand-dark);
  -webkit-mask-image: radial-gradient(circle 8px at 8px 0, transparent 99%, black 100%);
  mask-image: radial-gradient(circle 8px at 8px 0, transparent 99%, black 100%);
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.coupon-card-title { font-weight: bold; font-size: 1.05rem; display: block; }
.coupon-card-body { padding: 18px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.coupon-card-validity { font-size: .8rem; color: var(--muted); margin: 0 0 12px; }

.coupon-card-price-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.coupon-card-discount-badge {
  flex: 0 0 auto;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--brand-dark);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.1;
  box-shadow: var(--shadow-sm);
}
.coupon-card-discount-pct { font-size: 1.25rem; font-weight: bold; }
.coupon-card-discount-off { font-size: .6rem; }
.coupon-card-price-info { flex: 1; min-width: 0; }
.coupon-card-course { font-size: .85rem; font-weight: bold; color: var(--text); margin: 0 0 2px; }
.coupon-card-regular-price { font-size: .8rem; color: var(--muted); margin: 0; }
.coupon-card-strike { text-decoration: line-through; }
.coupon-card-final-price { font-size: 1.9rem; font-weight: bold; color: var(--brand-dark); margin: 2px 0 0; line-height: 1; }
.coupon-card-final-price-unit { font-size: 1rem; margin-left: 2px; }
.coupon-card-cheapest {
  flex: 0 0 auto; align-self: flex-start;
  background: #fff3f6; color: var(--brand-dark); border: 1px solid var(--brand);
  border-radius: 6px; padding: 4px 8px; font-size: .72rem; font-weight: bold; white-space: nowrap;
}

.coupon-card-conditions { background: #faf6f7; border-radius: 6px; padding: 10px 12px; margin: 10px 0; font-size: .78rem; color: var(--muted); }
.coupon-card-conditions-label { font-weight: bold; color: var(--text); margin: 0 0 4px; }
.coupon-card-more { display: inline-block; margin-top: auto; padding-top: 6px; font-size: .85rem; font-weight: bold; }

.coupon-card-shop { display: flex; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border); background: #fafafa; }
.coupon-card-shop-photo { flex: 0 0 auto; display: block; }
.coupon-card-shop-photo img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; display: block; }
.coupon-card-shop-info { min-width: 0; }
.coupon-card-shop-name { font-weight: bold; }
.coupon-card-shop-phone, .coupon-card-shop-hours { font-size: .78rem; color: var(--muted); margin: 2px 0 0; }

@media (max-width: 700px) {
  .coupon-filter-row { flex-direction: column; align-items: stretch; }
  .coupon-grid { grid-template-columns: 1fr; }
}

/* --- Coupon detail (shop page's own クーポン section) --------------------- */
.coupon-detail-actions { display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.coupon-detail-warning { font-size: .8rem; color: var(--muted); margin-bottom: 12px; }

.coupon-detail { position: relative; margin: 44px 0 0; }
.coupon-detail-ribbon {
  position: absolute; top: -34px; left: 14px; z-index: 2;
  background: #1a1a1a; color: #ffd54a; padding: 6px 14px; border: 2px solid #ffd54a; border-radius: 4px;
  display: inline-flex; flex-direction: column; line-height: 1.15; transform: rotate(-3deg);
  box-shadow: var(--shadow-sm); white-space: nowrap;
}
.coupon-detail-ribbon-main { font-weight: bold; font-size: .82rem; }
.coupon-detail-ribbon-sub { font-size: .58rem; color: #fff; }

.coupon-detail-header { border-radius: 10px 10px 0 0; }
.coupon-detail-body { display: flex; gap: 20px; padding: 20px 18px; background: #fff; color: var(--text); border: 1px solid var(--border); border-top: none; flex-wrap: wrap; }
.coupon-detail-cast { flex: 0 0 140px; text-align: center; }
.coupon-detail-cast img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; display: block; }
.coupon-detail-cast-name { font-weight: bold; margin: 6px 0 2px; font-size: .9rem; }
.coupon-detail-cast-size { font-size: .78rem; color: var(--muted); margin: 0; }
.coupon-detail-info { flex: 1; min-width: 240px; }
.coupon-detail-number { display: inline-block; margin-left: 10px; font-size: .78rem; color: var(--brand-dark); font-weight: bold; }
.coupon-detail-conditions-list { margin: 0; padding-left: 0; list-style: none; font-size: .78rem; color: var(--muted); }
.coupon-detail-conditions-list li { margin-bottom: 3px; }
.coupon-detail-reserve-btn { background: linear-gradient(135deg, #ffb648, #ff8f1f); margin-top: 10px; }

.coupon-detail-table { width: 100%; border-collapse: collapse; }
.coupon-detail-table th, .coupon-detail-table td { border: 1px solid var(--border); padding: 8px 12px; text-align: center; font-size: .85rem; }
.coupon-detail-table thead th { background: #faf6f7; font-weight: bold; }
.coupon-detail-table-arrow { color: var(--brand-dark); font-weight: bold; }
.coupon-detail-table-total td { background: #fafafa; font-weight: bold; }

@media print {
  .site-header, .site-footer, .coupon-detail-actions, .favorite-btn, .btn.secondary { display: none !important; }
}

/* --- Simple coupon highlights row on the region top page ------------------ */
.coupon-simple-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.coupon-simple-item a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.coupon-simple-item a:hover { border-color: var(--brand); }
.coupon-simple-pct { flex: 0 0 auto; background: var(--brand-dark); color: #fff; font-weight: bold; font-size: .8rem; padding: 4px 8px; border-radius: 4px; }
.coupon-simple-title { flex: 1; min-width: 0; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coupon-simple-shop { flex: 0 0 auto; color: var(--muted); font-size: .82rem; }
.coupon-simple-price { flex: 0 0 auto; font-weight: bold; color: var(--brand-dark); }

@media (max-width: 560px) {
  .coupon-simple-item a { flex-wrap: wrap; }
  .coupon-simple-shop { order: 4; width: 100%; }
}

/* --- メールアドレス管理画面 (/mailadmin) ---------------------------------- */
/* Its own site rather than a section of the portal's back office: a plain
   full-width shell with a single header, no portal sidebar or branding. */
.mail-admin-shell { min-height: 100vh; background: #f6f2f3; }
.mail-admin-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; background: #2f3542; color: #fff;
}
.mail-admin-brand { color: #fff; font-weight: bold; font-size: 1.05rem; text-decoration: none; }
.mail-admin-brand:hover { color: #fff; text-decoration: none; }
.mail-admin-header form { margin: 0; }
.mail-admin-header .link-button {
  background: transparent; border: 1px solid rgba(255, 255, 255, .5); color: #fff;
  padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: .85rem;
}
.mail-admin-header .link-button:hover { background: rgba(255, 255, 255, .14); }
.mail-admin-content { max-width: 1100px; margin: 0 auto; padding: 24px; }
.mail-admin-public { max-width: 520px; }

.mail-server-warning { background: #fff8e1; border: 1px solid #e0b23a; color: #9a6b00; padding: 10px 14px; border-radius: 4px; }
.mail-test-error { color: #b5204f; font-size: .8rem; }
/* The per-row 送信テスト form: keep the address field and its button on one
   line inside the table cell instead of stacking like a full-width form. */
.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form input[type=email] { padding: 6px; border: 1px solid var(--border); border-radius: 4px; font-size: .85rem; min-width: 180px; }
.inline-form .btn { margin-top: 0; flex-shrink: 0; padding: 6px 12px; font-size: .85rem; }
.mail-local-part-row { display: flex; gap: 8px; align-items: center; }
.mail-local-part-row input[type=text] { flex: 1; }
.mail-domain-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.mail-domain-actions .btn { margin-top: 0; }
.mail-account-table td .btn { margin-top: 0; white-space: nowrap; }
.mail-account-table td { vertical-align: top; }
.mail-inbox-link { margin-top: 6px !important; }
.mail-message-body { line-height: 1.6; word-break: break-word; }
/* The per-address "メールソフトの設定" drawer, opened from its own table row. */
.mail-settings-row > td { background: #faf6f7; }
.mail-client-settings summary { cursor: pointer; font-weight: bold; font-size: .9rem; color: var(--brand-dark); }
.mail-client-settings-body { margin-top: 12px; }
.mail-settings-table { width: 100%; border-collapse: collapse; }
.mail-settings-table th, .mail-settings-table td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; font-size: .85rem; vertical-align: top; }
.mail-settings-table th { width: 220px; white-space: nowrap; }
.mail-settings-table code { background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; }
.mail-settings-hint { font-size: .8rem; color: var(--muted); margin: 6px 0 0; }
.mail-password-form { max-width: 420px; }

/* --- Site footer ---------------------------------------------------------- */
.site-footer { background: #2a2226; color: #e9dfe2; margin-top: 40px; padding: 32px 0 20px; }
.site-footer h3 { color: #fff; font-size: .95rem; margin: 0 0 10px; }
.site-footer a { color: #e9dfe2; }
.site-footer a:hover { color: #fff; }
.site-footer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.site-footer-column ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.site-footer-region-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .85rem; }
.site-footer-region-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.site-footer-region-name { font-weight: bold; color: #fff; margin-right: 4px; }
.site-footer-region-name.muted { color: #a89ba0; font-weight: normal; }
.site-footer-copyright { text-align: center; font-size: .78rem; color: #a89ba0; margin: 28px 0 0; padding-top: 16px; border-top: 1px solid #453a3f; }

@media (max-width: 768px) {
  .site-footer-columns { grid-template-columns: 1fr; gap: 20px; }
}

/* --- Shop page quick-jump nav block (mirrors CityHeaven-style anchor bar) - */
.obi-block-quick_nav { margin-bottom: 0; }
.quick-nav-bar {
  display: flex; flex-wrap: wrap; gap: 4px 8px; overflow-x: auto;
  background: #2a2226; border-radius: var(--radius); padding: 10px 14px;
}
.quick-nav-item {
  color: #fff; font-size: .85rem; font-weight: bold; white-space: nowrap;
  padding: 4px 10px; border-radius: 4px; display: flex; align-items: center; gap: 4px;
}
.quick-nav-item:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.quick-nav-badge {
  background: var(--brand); color: #fff; font-size: .65rem; font-weight: bold;
  padding: 1px 5px; border-radius: 8px; white-space: nowrap;
}

/* 古着判定の履歴(運営管理画面) -- スキャン画像と総合点の見せ方 */
.admin-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.admin-filter input[type=text], .admin-filter input[type=date], .admin-filter select {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px;
}
.admin-filter input[type=text] { min-width: 260px; }
.admin-filter .btn { margin-top: 0; }
.vintage-scan-cell { white-space: nowrap; }
.vintage-scan-thumb {
  width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border);
  vertical-align: middle;
}
.vintage-scan-count { font-size: .75rem; color: var(--muted); margin-left: 4px; }
.vintage-scan-none { font-size: .75rem; color: var(--muted); }
.vintage-scan-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.vintage-scan-large {
  max-width: 220px; max-height: 220px; border-radius: 6px; border: 1px solid var(--border);
}
.vintage-score {
  display: inline-block; min-width: 62px; text-align: center; font-weight: bold;
  border-radius: 12px; padding: 2px 8px; font-size: .9rem;
}
.vintage-score small { font-weight: normal; font-size: .7rem; opacity: .7; }
.vintage-score-high { background: #e6f6ec; color: #1a7a3f; }
.vintage-score-mid { background: #fdf3e0; color: #8a5a2b; }
.vintage-score-low { background: #fdecec; color: #b5204f; }
.vintage-score-unknown { background: #f1f2f4; color: #6b6f76; }

/* --- 衣料在庫管理システム (/inv) ---------------------------------------
   社内のラズベリーパイ上で動かす在庫管理画面。現場ではiPhoneで開くのが
   前提なので、指で押せる大きさと写真の見やすさを優先した作りにしている
   (ポータルサイト側のレイアウトとは独立。layouts/inventory.html.erb)。 */
.inv-shell { min-height: 100vh; background: #f4f6f8; }
.inv-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; background: #1f6f5c; color: #fff;
}
.inv-brand { color: #fff; font-weight: bold; font-size: 1.05rem; text-decoration: none; }
.inv-brand:hover { color: #fff; text-decoration: none; }
.inv-nav { display: flex; gap: 14px; }
.inv-nav a { color: #d7ece5; font-size: .9rem; }
.inv-nav a:hover { color: #fff; }
/* 衣料在庫と回収BOX部材の切り替え。同じ土台の別システムなので、
   いまどちらを開いているかが一目で分かるようにする。 */
.inv-switch { display: flex; gap: 0; border: 1px solid #4b9a86; border-radius: 6px; overflow: hidden; }
.inv-switch a {
  padding: 5px 12px; font-size: .82rem; color: #d7ece5; text-decoration: none; white-space: nowrap;
}
.inv-switch a:hover { background: #2b8570; color: #fff; }
.inv-switch .inv-switch-current { background: #fff; color: #1f6f5c; font-weight: bold; }
.inv-content { max-width: 1100px; margin: 0 auto; padding: 18px 16px 60px; }
.inv-content .notice, .inv-content .alert { padding: 10px 14px; border-radius: 4px; margin-bottom: 12px; }
.inv-content .notice { background: #e6f6ec; color: #1a7a3f; border: 1px solid #b7e4c7; }
.inv-content .alert { background: #fdecec; color: #b5204f; border: 1px solid #f5b8c4; }
.inv-content h1 { font-size: 1.3rem; margin-bottom: 12px; }
.inv-content h2 { font-size: 1.05rem; margin-bottom: 10px; }
.inv-lead { color: #5b6672; font-size: .88rem; line-height: 1.7; }

.inv-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: bold; letter-spacing: .04em; }
.inv-code-lg { font-size: 1.6rem; }
.inv-badge-origin { background: #1f6f5c; }

.inv-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 0; }
.inv-filter input[type=text], .inv-filter select {
  padding: 9px; border: 1px solid var(--border); border-radius: 4px; font-size: .95rem; min-width: 150px;
}
.inv-filter .btn { margin-top: 0; }
.inv-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inv-actions .btn, .inv-actions form { margin-top: 0; }

.inv-container-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.inv-container-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.inv-container-card:hover { box-shadow: var(--shadow-md); text-decoration: none; }
/* カードの中身のリンク。チェックボックスをリンクの外に出したので、
   写真から下だけをリンクにしている(押しても画面が移らない場所を作るため)。 */
.inv-container-link { display: flex; flex-direction: column; gap: 6px; }
.inv-container-link:hover { text-decoration: none; }
/* 「ラベルを選ぶ」。カードの上に小さく置く(写真を隠さないように)。 */
.inv-card-select { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: #5b6672; }
.inv-container-card img, .inv-thumb-empty {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #e8ecef; display: block;
}
.inv-thumb-empty { display: flex; align-items: center; justify-content: center; color: #97a3ae; font-size: .8rem; }
.inv-container-meta { font-size: .82rem; color: #5b6672; line-height: 1.6; }
.inv-container-activity { font-size: .72rem; color: #97a3ae; }

.inv-qr-box { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.inv-qr-box img { width: 160px; height: 160px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 6px; }
.inv-qr-url { font-size: .75rem; color: #5b6672; word-break: break-all; }

.inv-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.inv-item-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
/* 写真は切り取らずに全体を出す(object-fit: contain)。在庫の写真は
   縦・横・正方形が混ざるので、枠に合わせて切ると横長の写真が大きく
   欠けて「サイズがおかしい」状態に見えるため。枠の大きさは揃える。 */
.inv-item-card img, .inv-item-card .inv-thumb-empty {
  width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 6px; background: #eef1f4; display: block;
}
.inv-item-name { font-weight: bold; font-size: .95rem; margin: 8px 0 4px; }
/* 写真中心の表示。1つの箱に20件近く並ぶので、カードの文字を最小限にして
   写真が埋もれないようにする(全項目は「詳しく」で見る)。 */
.inv-item-compact { padding: 8px; }
.inv-item-compact .inv-item-name { margin: 6px 0 2px; }
.inv-item-compact .inv-item-meta { font-size: .78rem; margin: 0; }
.inv-item-compact .inv-item-actions { margin-top: 6px; }
.inv-item-flags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
/* 分割アップロードの途中経過。 */
.inv-upload-progress {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 6px;
  background: #eef4fb; border: 1px solid #b9d2ec; font-size: .85rem; line-height: 1.6;
}

/* 画面の使い方の説明。毎回読むものではないので畳んでおく。 */
.inv-help { margin: 0 0 10px; }
.inv-help > summary { cursor: pointer; font-size: .85rem; color: #41505f; }
.inv-help > summary:hover { color: var(--brand, #14624c); }
.inv-item-flag {
  display: inline-block; background: #eef1f4; color: #41505f; border-radius: 4px;
  padding: 1px 6px; font-size: .72rem;
}
.inv-item-meta { font-size: .8rem; color: #5b6672; line-height: 1.6; margin: 0 0 6px; }
.inv-item-comment { font-size: .82rem; background: #f4f6f8; border-radius: 4px; padding: 6px 8px; margin: 0 0 8px; white-space: pre-wrap; }
.inv-item-select { display: flex; align-items: center; gap: 6px; font-size: .82rem; margin-bottom: 6px; }
.inv-item-card .btn { margin-top: 0; padding: 7px 14px; font-size: .85rem; }
.inv-item-photo-count { font-size: .75rem; color: #97a3ae; }

/* 撮影・アップロードの入口。iPhoneでは「カメラで撮る」がその場の撮影、
   「写真から選ぶ」が撮りだめた写真の複数選択になる。 */
.inv-upload { background: #fff; border: 1px dashed #9fb3ab; border-radius: 8px; padding: 14px; margin-bottom: 12px; }
/* :not(.inv-file-input) が要る。ボタンに見せるために隠してある入力
   (_file_button.html.erb)は position: absolute なので、ここで width: 100% を
   当ててしまうと画面幅いっぱいの見えない箱が画面の外へはみ出し、
   写真を選ぶ画面に横スクロールが出る。 */
.inv-upload input[type=file]:not(.inv-file-input) { display: block; width: 100%; font-size: .9rem; margin-bottom: 10px; }
.inv-upload-hint { font-size: .8rem; color: #5b6672; line-height: 1.6; }
.inv-upload-modes { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; margin-bottom: 10px; }
/* 未仕分け写真の並び替え。いま選んでいるものは太字にして、リンクにしない。 */
.inv-upload-sort { font-size: .85rem; color: #5b6672; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.inv-upload-sort strong { color: var(--text, #1b2733); }
/* 未仕分けが空のときに出す「写真の行き先」。 */
.inv-folder-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.inv-folder-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: .9rem;
}
.inv-folder-count { color: #5b6672; font-size: .82rem; }
.inv-upload-modes label { display: flex; align-items: center; gap: 6px; font-weight: normal; margin: 0; }

/* 訂正画面の写真。1件に何枚もある運用になったので、見分けられる大きさにする。 */
.inv-photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.inv-photo-strip figure { margin: 0; }
.inv-photo-strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 6px; display: block; background: #eef1f4; }
.inv-photo-strip .btn { width: 100%; margin-top: 6px; padding: 6px; font-size: .8rem; }

.inv-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.inv-empty { color: #5b6672; font-size: .9rem; padding: 14px 0; }

@media (max-width: 560px) {
  .inv-content { padding: 14px 12px 60px; }
  .inv-filter input[type=text], .inv-filter select { min-width: 0; flex: 1 1 120px; }
  .inv-item-grid, .inv-container-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .inv-qr-box img { width: 130px; height: 130px; }
}

/* --- 在庫管理: TOP画像の選択 -------------------------------------------
   コンテナ一覧のサムネイルに使われる写真(TOP画像)を赤枠で示す
   (Inventory::ContainersController#cover_photo)。在庫カードの中に
   「TOP画像にする」を置いているので、どれが今のTOP画像かを写真側で
   はっきり分かるようにしている。 */
.inv-cover-thumb { width: 160px; height: 160px; object-fit: contain; border-radius: 6px; background: #eef1f4; }
.inv-item-card.inv-cover-current { border: 2px solid #d32f2f; }
.inv-item-card.inv-cover-current img { outline: 3px solid #d32f2f; outline-offset: 2px; }
.inv-photo-strip .inv-cover-current img { outline: 3px solid #d32f2f; outline-offset: 2px; }
.inv-photo-strip .inv-item-cover-current img { outline: 3px solid #2e7d32; outline-offset: 2px; }
.inv-photo-strip .inv-item-cover-current figcaption { color: #2e7d32; }
.inv-photo-strip figcaption {
  text-align: center; font-size: .78rem; font-weight: bold; color: #d32f2f; margin-top: 8px;
}
.inv-cover-flag {
  display: inline-block; background: #d32f2f; color: #fff; font-size: .75rem; font-weight: bold;
  padding: 5px 10px; border-radius: 4px;
}
/* 「訂正・写真追加」と「TOP画像にする」を横に並べる。button_to が作る form の
   既定マージンを消して、リンクのボタンと高さをそろえる。 */
.inv-item-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inv-item-actions form { margin: 0; }
.inv-item-actions .btn { margin-top: 0; }

/* --- 在庫管理: セット品 -------------------------------------------------
   インナーの上下・水着の上下など、2点以上でひと組の在庫
   (InventoryItemSet)。セットの仲間はグリッドの1行を丸ごと使う箱に入れて
   並べるので、必ず隣どうし(狭い画面では上下)に並び、青い太線で
   「ここまでがひと組」が分かるようにしている。 */
.inv-item-set {
  grid-column: 1 / -1;
  border: 3px solid #1565c0;
  border-radius: 10px;
  padding: 10px;
  background: #f3f8fe;
}
.inv-item-set-head {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: .9rem; color: #0d47a1; margin-bottom: 8px;
}
.inv-item-set-flag {
  background: #1565c0; color: #fff; font-size: .75rem; font-weight: bold;
  padding: 4px 9px; border-radius: 4px;
}
.inv-item-set-count { color: #5b6672; font-size: .82rem; }
.inv-item-set-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.inv-item-set-actions form { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inv-item-set-actions input[type=text] {
  padding: 7px 9px; border: 1px solid #c3ccd4; border-radius: 6px; font-size: .85rem; min-width: 160px;
}
.inv-item-set-actions .btn { margin-top: 0; padding: 7px 12px; font-size: .8rem; }
/* 箱の中のカードは、外側と同じ並べ方(自動折り返し)にそろえる。 */
.inv-item-set .inv-item-grid { gap: 10px; }

/* --- 在庫管理: アップロードフォルダとAI設定 ---------------------------
   コンテナごとの一時置き場(InventoryUpload)。AIが「この在庫の写真だろう」
   と判定できた写真は枠の色を変えて、確認すべきカードが一目で分かるように
   している(判定が付いていない写真は灰色のまま)。 */
.inv-upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
/* min-width: 0 が要る。グリッド/フレックスの子は既定で「中身より狭くならない」
   (min-width: auto)ので、カードの中にある「在庫を選んで移す」のプルダウン
   -- 選択肢が「品名 / メーカー / 品目 / サイズ / 色」と長い -- の幅に
   引きずられて列が600px近くまで広がり、写真が巨大になって列も崩れる。 */
.inv-upload-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.inv-upload-card.inv-upload-matched { border: 2px solid #2e7d32; }
.inv-upload-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 6px; display: block; background: #eef1f4; }
.inv-upload-name { font-size: .75rem; color: #5b6672; word-break: break-all; margin: 0; }
.inv-upload-suggestion { background: #f1f8f2; border-radius: 6px; padding: 8px; }
.inv-upload-suggestion-head { font-size: .85rem; margin: 0 0 6px; line-height: 1.5; }
.inv-upload-confidence { display: block; font-size: .78rem; color: #2e7d32; font-weight: bold; }
.inv-upload-card img.inv-upload-ref { width: 72px; aspect-ratio: 1 / 1; object-fit: contain; float: right; margin: 0 0 6px 8px; }
.inv-upload-reason { font-size: .78rem; color: #5b6672; line-height: 1.6; margin: 0; }
.inv-upload-manual { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; min-width: 0; }
/* min-width: 0 の理由は .inv-upload-card と同じ。選択肢の文字数ぶんの幅を
   要求させず、カードの幅に合わせて縮める(選択中の文字はブラウザが省略する)。 */
.inv-upload-manual select {
  flex: 1 1 140px; min-width: 0; max-width: 100%;
  padding: 7px 9px; border: 1px solid #c3ccd4; border-radius: 6px; font-size: .85rem;
}
.inv-upload-manual .btn { margin-top: 0; padding: 7px 12px; font-size: .8rem; }
.inv-upload-card .inv-item-actions .btn { padding: 7px 10px; font-size: .8rem; }
.inv-upload-card form { margin: 0; }

/* --- 在庫管理: コンテナを項目ごとに探す画面 ----------------------------
   結果は箱ごとに1枚。中身の項目で絞ったときは、その箱で当たったものを
   下にぶら下げる(箱を開ける前に、どれが当たったのかが分かるように)。 */
.inv-search-results { display: grid; gap: 12px; }
.inv-search-result { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: #fff; }
.inv-search-result-head .inv-container-link { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; }
.inv-search-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.inv-search-hit-head { font-size: .8rem; color: #5b6672; font-weight: bold; margin: 10px 0 4px; }
.inv-search-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.inv-search-hits li { border-top: 1px dotted var(--border); padding-top: 4px; line-height: 1.6; }
.inv-search-hits .inv-item-meta { color: #5b6672; font-size: .8rem; margin-left: 6px; }

/* --- 在庫管理: 商品の区切り(「ここから次の商品」) --------------------
   撮りだめた写真は「商品Aを3枚 → 商品Bを2枚 → …」と続けて並ぶので、
   商品の変わり目にだけ印を付けてもらい、1回の操作で何件でも登録する。
   印が付いたカードは左端に青い帯を出す -- 区切りの位置を、写真を見ながら
   流し見で確かめられるようにするため(枠線の色は「AIの判定あり(緑)」
   「同じ写真あり(オレンジ)」で使っているので、帯で分ける)。 */
.inv-split-mark-label {
  display: flex; align-items: center; gap: 6px; font-size: .8rem; cursor: pointer;
  background: #eef4fb; border: 1px dashed #1565c0; border-radius: 6px; padding: 4px 7px; margin: 0;
}
/* 1枚目は区切りを付けようがないので、印の代わりに同じ高さの帯を出す
   (ここだけ帯が無いと、1枚目の写真の位置が他の列とずれる)。 */
.inv-split-first { color: #7a8592; border-style: dotted; background: #f5f7f9; }
.inv-upload-card.inv-split-start { box-shadow: inset 7px 0 0 #1565c0; }

/* 「ここまでを選ぶ」。途中まで区切って、そこまでを先に箱にする使い方
   (残りはあとで続ける)のためのボタン。写真の枚数だけ並ぶので、
   「選択」のチェックより目立たない見た目にしておく。 */
.inv-check-through {
  appearance: none; background: #f5f7f9; border: 1px solid #c3ccd4; border-radius: 6px;
  color: #43505c; font-size: .75rem; padding: 3px 8px; cursor: pointer; white-space: nowrap;
}
.inv-check-through:hover { background: #e8edf2; }
/* 「選択」と「ここまでを選ぶ」は同じ列に並べる(カードの上に帯が増えると
   写真が小さくなるため)。 */
.inv-upload-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.inv-upload-pick .inv-item-select { margin-bottom: 0; }
.inv-upload-card.inv-split-start .inv-split-mark-label {
  background: #1565c0; color: #fff; border-style: solid; font-weight: bold;
}

/* --- 在庫管理: AIの商品判定(ブランド・年代・相場) --------------------
   台帳の値ではなく「売るかどうかを決めるための材料」。金額だけが目立つと
   そのまま値付けに使われてしまうので、根拠を必ず並べて出す。 */
.inv-appraisal {
  background: #f7f9fb; border: 1px solid var(--border); border-left: 6px solid #6a1b9a;
  border-radius: 8px; padding: 12px; margin-top: 12px;
}
.inv-appraisal-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; font-size: .8rem; color: #5b6672; }
.inv-appraisal-badge {
  display: inline-block; background: #6a1b9a; color: #fff; font-size: .7rem; font-weight: bold;
  padding: 2px 7px; border-radius: 4px;
}
.inv-appraisal-score { background: #e8eaf6; border-radius: 4px; padding: 2px 7px; }
.inv-appraisal-label { font-size: .75rem; color: #5b6672; margin: 10px 0 2px; font-weight: bold; }
.inv-appraisal-value { margin: 0; font-size: .9rem; line-height: 1.7; }
.inv-appraisal-brands { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; line-height: 1.7; }
.inv-appraisal-confidence { font-size: .75rem; color: #6a1b9a; font-weight: bold; }
.inv-appraisal-reason { font-size: .78rem; color: #5b6672; line-height: 1.6; }
.inv-appraisal-summary { font-size: .85rem; line-height: 1.7; margin: 10px 0 0; }
.inv-appraisal-line {
  font-size: .78rem; line-height: 1.6; margin: 0; color: #5b6672;
  background: #f7f9fb; border-radius: 6px; padding: 6px 8px;
}

/* --- 在庫管理: 写真を回す --------------------------------------------
   横向きに撮れてしまった写真を、撮り直さずに90度ずつ直す。カードの中に
   2つ並ぶので、他のボタンより小さくしておく。 */
.inv-rotate-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-rotate-buttons form { margin: 0; }
.inv-rotate-button { margin-top: 0; padding: 6px 10px; font-size: .78rem; }

/* --- 在庫管理: 出品用の商品紹介文 --------------------------------------
   そのままフリマアプリに貼る文章。AIが書いた下書きであることと、
   出品前に自分で埋めるところを、文章と一緒に必ず出す。 */
.inv-listing { background: #f7f9fb; border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-top: 12px; }
.inv-listing-badge {
  display: inline-block; background: #00695c; color: #fff; font-size: .7rem; font-weight: bold;
  padding: 2px 7px; border-radius: 4px;
}
.inv-listing textarea, .inv-listing-title { width: 100%; font-size: .85rem; line-height: 1.7; }
.inv-listing-to-fill { margin: 4px 0 0; padding-left: 20px; font-size: .82rem; line-height: 1.8; }

/* --- 在庫管理: 売却の記録 ----------------------------------------------
   区分「売却候補」は予定、こちらは結果。AIの見立てと突き合わせて、
   次の仕入れの判断材料にする。 */
.inv-sold-badge {
  display: inline-block; background: #2e7d32; color: #fff; font-size: .68rem; font-weight: bold;
  padding: 2px 6px; border-radius: 4px; margin-left: 4px; vertical-align: middle;
}
.inv-sale-compare { background: #f3f6f9; border-radius: 6px; padding: 8px 10px; }

/* --- 在庫管理: バックアップの状況 --------------------------------------
   取れていないことに「壊れてから」気づくのがいちばん困るので、毎日開く
   コンテナ一覧に出す。取れているときは目立たせない。 */
.inv-backup-alert { border-left: 6px solid #c62828; background: #fdf3f3; }
.inv-label-url-alert { border-left: 6px solid #c62828; background: #fdf3f3; }
.inv-backup-note { font-size: .78rem; color: #97a3ae; text-align: right; margin: 12px 0 0; }

/* --- 在庫管理: コンテナ一覧の畳んである見出し ---------------------------
   この画面は「箱の写真を目で探す」ために開くことがいちばん多い。説明・
   登録・印刷・凡例をそのまま並べるとスマホでは写真が画面の何枚分も下へ
   押し下げられてしまうので、タイトルから下は見出し1行に畳んでおく。
   畳んでいても見出しは残るので、どこに何があるかは分かる。 */
.inv-panels { display: grid; gap: 6px; margin-bottom: 14px; }
.inv-panel { margin: 0; padding: 0 0 2px; box-shadow: none; }
.inv-panel > summary {
  cursor: pointer; list-style: none; padding: 9px 14px;
  font-size: .9rem; font-weight: bold; color: #2f3c49;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.inv-panel > summary::-webkit-details-marker { display: none; }
.inv-panel > summary::before { content: "＋"; color: #7d8c99; font-weight: normal; }
.inv-panel[open] > summary::before { content: "−"; }
.inv-panel[open] > summary { border-bottom: 1px solid var(--border); }
.inv-panel[open] { padding-bottom: 14px; }
/* 中身は summary と同じだけ左右を空ける(枠には padding を持たせていない)。 */
.inv-panel > *:not(summary) { margin-left: 14px; margin-right: 14px; }
/* 見出しの右に出す補足(いま効いている絞り込みなど)。畳んだままでも
   「なぜ箱が少ないのか」が分かるようにするため。 */
.inv-panel-note { font-size: .78rem; font-weight: normal; color: #7d8c99; }
/* 警告は畳んでいても赤い見出しで気づけるようにする。 */
.inv-panel.inv-backup-alert > summary, .inv-panel.inv-label-url-alert > summary { color: #b71c1c; }

/* --- 在庫管理: サブコンテナ(箱の中の小箱) ----------------------------
   撮影の途中で中から出てきた小箱を、写真1枚と枝番だけで登録する。
   箱を開けるまで中の小箱には気づけないので、一覧では「サブ有」を出す。 */
.inv-badge-sub { background: #6a4caf; }
/* 通常衣類(下着類以外)の箱。番号の末尾Nと同じことを、一覧でも読めるようにする。 */
.inv-badge-kind { background: #0277bd; }
/* まだQRラベルを刷っていない箱。貼り忘れに気づけるように、
   刷っていないものにだけ印を出す(刷ったものには何も出さない)。 */
.inv-badge-unprinted { background: #ef6c00; }
.inv-sub-list {
  list-style: none; margin: 8px 0 12px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.inv-sub-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.inv-sub-card img, .inv-sub-card .inv-thumb-empty {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #e8ecef; display: block;
}
.inv-sub-card .btn { margin-top: 0; padding: 7px 12px; font-size: .82rem; }

/* --- 在庫管理: コンテナ自体の写真(箱の外観) ---------------------------
   未整理の衣類を詰めただけの箱は中身の写真がまだ無いので、箱そのものを
   撮って一覧のサムネイルにする。 */
.inv-box-photo-thumb {
  width: 100%; max-width: 260px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 6px; background: #e8ecef; display: block; margin: 8px 0;
}

/* --- 在庫管理: コンテナの丸シール(作業の進み具合) ----------------------
   箱を開けなくても「写真を撮ったか」「仕分けが済んだか」が分かるように、
   コンテナに色の丸シールを貼る。画面にも同じ色の丸を出して、貼る色を
   間違えないようにする(白は背景と同じなので、枠線で見えるようにする)。 */
.inv-status-dot {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #5b6672; vertical-align: middle; flex: none;
}
.inv-status-packed { background: #fff; }
.inv-status-shooting { background: #fdd835; }
.inv-status-shot { background: #2e7d32; }
.inv-status-sorting { background: #c62828; }
.inv-status-done { background: #1565c0; }
.inv-container-card { position: relative; }
.inv-container-card .inv-status-dot { position: absolute; right: 10px; bottom: 10px; }
.inv-container-card .inv-container-meta { padding-right: 24px; }
.inv-status-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.inv-status-legend li { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; line-height: 1.6; }
.inv-status-legend .inv-status-dot { margin-top: 2px; }
.inv-status-current { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .9rem; margin: 0 0 8px; }
.inv-status-name { font-weight: bold; }
.inv-status-fixed {
  font-size: .72rem; background: #5b6672; color: #fff; border-radius: 4px; padding: 2px 7px;
}
.inv-status-fixed.inv-status-auto { background: #97a3ae; }
.inv-status-choices { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inv-status-choices form { margin: 0; }
.inv-status-choice { display: inline-flex; align-items: center; gap: 6px; }
.inv-status-choice.inv-status-chosen { outline: 3px solid #1565c0; outline-offset: 2px; }

/* --- 在庫管理: ラベル用紙の見取り図 ------------------------------------
   使いかけのシート(何枚か剥がしたあとの残り)に刷るための位置選び。
   「次に貼れるのは何枚目か」を数えるのは間違えやすいので、シートの形に
   並べて目で指せるようにする。 */
.inv-label-start { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.inv-label-start input { width: 70px; padding: 7px 9px; border: 1px solid #c3ccd4; border-radius: 6px; }
.inv-label-sheet {
  display: grid; gap: 3px; width: 100%; max-width: 260px; margin-top: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 6px;
}
.inv-label-cell {
  aspect-ratio: 1 / 1; border: 1px solid #c3ccd4; border-radius: 3px; background: #fff;
  color: #5b6672; font-size: .6rem; line-height: 1; padding: 0; cursor: pointer;
}
.inv-label-cell.inv-label-used { background: #e6eaee; color: #9aa5b1; border-style: dashed; }
.inv-label-cell.inv-label-from { background: #1565c0; border-color: #1565c0; color: #fff; font-weight: bold; }

/* --- 在庫管理: まとめてAI判定 ------------------------------------------
   AIが入れた値は、人が現物と見比べるまで「未確認」の印を付けておく
   (1件ずつの判定と違い、画面で見る前に保存されるため)。台帳の値が
   人の入力なのかAIの読み取りなのか、一覧で見分けられるようにする。 */
.inv-ai-batch { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 4px; }
.inv-ai-log { margin: 8px 0 0; padding-left: 20px; font-size: .82rem; line-height: 1.8; }
.inv-ai-log-ok { color: #2e7d32; }
.inv-ai-log-ng { color: #c62828; }
.inv-item-card.inv-item-ai-filled { border-left: 6px solid #ef6c00; }
.inv-ai-filled-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  background: #fff6ee; border-radius: 6px; padding: 6px 8px; margin: 0;
  font-size: .78rem; line-height: 1.6; color: #5b6672;
}
.inv-ai-filled-note .btn { margin-top: 0; padding: 5px 9px; font-size: .75rem; }
.inv-ai-filled-note form { margin: 0; }
.inv-ai-badge {
  display: inline-block; background: #ef6c00; color: #fff; font-size: .7rem; font-weight: bold;
  padding: 2px 7px; border-radius: 4px;
}

/* --- 在庫管理: 登録した直後の案内 --------------------------------------
   写真を在庫にしたあとも、続けて振り分けられるようフォルダに留まる。
   代わりに「いま何を登録したか」と品名入力への入口をここに出す。 */
.inv-registered { border-left: 6px solid #2e7d32; background: #f1f8f2; }
.inv-registered-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inv-registered-list li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .9rem;
}
.inv-registered-list .btn { margin-top: 0; padding: 6px 10px; font-size: .8rem; }
.inv-registered-thumb {
  width: 56px; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 4px; background: #eef1f4; display: block;
}

table.inv-table { width: 100%; border-collapse: collapse; }
table.inv-table th, table.inv-table td {
  border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; font-size: .9rem; line-height: 1.7;
}
table.inv-table th { background: #f2f5f7; width: 30%; white-space: nowrap; }
.inv-note-list { font-size: .85rem; color: #3c4650; line-height: 1.8; padding-left: 1.2em; }
.inv-checkbox { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; margin: 4px 0 0; }

@media (max-width: 560px) {
  .inv-upload-grid { grid-template-columns: 1fr; }
  table.inv-table th { width: auto; }
}

/* 手で振り分けるための在庫一覧。在庫の写真そのものをボタンにしているので、
   ボタンの見た目を在庫カードに寄せている(押せることが分かるよう、
   ホバーとフォーカスで枠の色を変える)。 */
.inv-upload-target-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.inv-upload-target {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  background: #fff; border: 2px solid var(--border); border-radius: 8px; padding: 8px;
  font: inherit; color: inherit;
}
.inv-upload-target:hover, .inv-upload-target:focus-visible { border-color: #1565c0; background: #f3f8fe; }
.inv-upload-target img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 6px; display: block; background: #eef1f4; }
.inv-upload-target-name { font-size: .85rem; font-weight: bold; line-height: 1.4; }
.inv-upload-target-meta { font-size: .75rem; color: #5b6672; line-height: 1.5; }
.inv-upload-card .inv-item-select { font-size: .85rem; }

/* PCでの振り分け作業(スマホで撮ってPCで仕分ける運用)では、写真を
   大きく並べた方が見分けやすい。 */
@media (min-width: 900px) {
  /* PCでは横4列に固定する。振り分けは「並べて見比べる」作業なので、
     幅に応じて3列になったり5列になったりするより、枚数が揃っている方が
     目で追いやすい。 */
  /* minmax(0, 1fr) にしておく。ただの 1fr は「中身より狭くならない」列なので、
     カードの中のプルダウンの幅で列が広がってしまう。 */
  .inv-upload-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inv-upload-target-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* --- 在庫管理: 未入力の在庫 -------------------------------------------
   写真だけ放り込んで品名もサイズも入れていない在庫(InventoryItem#
   information_blank?)は、カードの背景を薄いグレーにする。写真を撮って
   放り込む運用では「まだ入力していないもの」が一覧に混ざるので、
   どれが入力待ちなのかを一目で分かるようにするため。
   写真そのものは元の色のまま(グレーにすると品物の色を見誤る)。 */
.inv-item-card.inv-item-blank, .inv-upload-target.inv-item-blank { background: #e6eaed; }
.inv-item-card.inv-item-blank .inv-item-name { color: #5b6672; }

/* 写真を選ぶボタン。既定のファイル入力(英語の Choose File)は小さくて
   スマホで押しづらいので、ラベルをボタンに見せて入力自体は隠している。
   入力は残してあるので、JSが無くても押せば選べる。 */
.inv-file-picker { margin-bottom: 10px; }
.inv-file-button { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; cursor: pointer; font-weight: normal; margin: 0; }
.inv-file-button .btn { margin-top: 0; }
.inv-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.inv-file-button:focus-within .btn { outline: 3px solid #1565c0; outline-offset: 2px; }
.inv-file-chosen { font-size: .82rem; color: #5b6672; }
.inv-subhead { font-size: .95rem; margin: 16px 0 6px; }

/* --- 在庫管理: 同じ写真(重複)の確認 ----------------------------------
   バイト単位で同じ写真に印を付け、確認画面で並べて見せてから消す。
   削除は取り消せないので、押す前に必ず現物(写真)を見せる。 */
.inv-upload-card.inv-upload-duplicate { border: 2px solid #ef6c00; }
.inv-duplicate-badge {
  display: inline-block; background: #ef6c00; color: #fff; font-size: .7rem; font-weight: bold;
  padding: 2px 7px; border-radius: 4px; margin-left: 4px;
}
.inv-duplicate-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.inv-duplicate-photo { margin: 0; background: #fff; border: 2px solid var(--border); border-radius: 8px; padding: 8px; }
.inv-duplicate-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 6px; display: block; background: #eef1f4; }
.inv-duplicate-photo.inv-duplicate-keep { border-color: #2e7d32; }
.inv-duplicate-photo.inv-duplicate-remove { border-color: #c62828; background: #fdf3f3; }
.inv-duplicate-photo figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.inv-duplicate-flag { font-size: .78rem; font-weight: bold; }
.inv-duplicate-keep .inv-duplicate-flag { color: #2e7d32; }
.inv-duplicate-remove .inv-duplicate-flag { color: #c62828; }
.inv-duplicate-file { font-size: .75rem; color: #3c4650; word-break: break-all; }
.inv-duplicate-meta { font-size: .72rem; color: #5b6672; line-height: 1.5; }
.inv-duplicate-photo figcaption form { margin: 0; }
.inv-duplicate-photo figcaption .btn { margin-top: 4px; width: 100%; padding: 7px 10px; font-size: .8rem; }
/* カードから「その写真の相手」を見に行くボタン。オレンジの枠が付いた
   写真にだけ出す。 */
.inv-duplicate-link { display: block; text-align: center; margin-top: 0; padding: 7px 10px; font-size: .8rem; }
/* 在庫に付いた写真の重複。訂正画面の注意書きと、コンテナ画面の一覧。 */
.inv-duplicate-notice {
  background: #fff3e0; border: 1px solid #ef6c00; border-radius: 6px;
  padding: 10px 12px; margin: 0 0 12px; font-size: .9rem; line-height: 1.7;
}
.inv-duplicate-notice .inv-duplicate-link { display: inline-block; width: auto; margin-left: 8px; }
.inv-duplicate-item-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inv-duplicate-item-list li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
}
.inv-duplicate-item-list .btn { margin: 0; padding: 6px 12px; font-size: .8rem; }
/* 重複があることを画面の一番上で知らせるカード。写真が多いと下まで
   スクロールしないと気づけないため。 */
.card.inv-duplicate-alert { border: 2px solid #ef6c00; background: #fff8f2; }
/* 組ごとの見出しと「この組を片付ける」を横に並べる(上から順に押していける)。 */
.inv-duplicate-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.inv-duplicate-head h2, .inv-duplicate-head h3 { margin: 0; }
.inv-duplicate-head form { margin: 0; }
.inv-duplicate-head .btn { margin-top: 0; }