/* --- 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;
}
/*
 * 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 {
  background: linear-gradient(120deg, var(--brand), var(--brand-dark));
  color: #fff;
  padding: 14px 0;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 10;
}
header.site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 8px; }
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 nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; row-gap: 6px; }
header.site-header nav a, header.site-header nav button.link-button {
  position: relative;
  color: #fff; margin-left: 16px;
  padding: 4px 0;
  font-size: .92rem;
  white-space: nowrap;
}
header.site-header nav a::after, header.site-header nav button.link-button::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 nav a:hover::after, header.site-header nav button.link-button:hover::after { transform: scaleX(1); }
header.site-header nav a:hover, header.site-header nav button.link-button:hover { text-decoration: none; }
header.site-header nav button.link-button {
  background: none; border: none; font: inherit; cursor: pointer; margin-left: 16px; padding: 4px 0;
}

.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);
}

.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; }

.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; }

.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; }
.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; }
.obi-body.no-header { border-top: 1px solid var(--border); border-radius: var(--radius); }

.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: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.block-photo-grid img { width: 100%; height: 120px; object-fit: cover; 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 stacks above a wrapping nav instead of overflowing. */
  header.site-header .container { flex-direction: column; align-items: flex-start; gap: 8px; }
  header.site-header .logo { font-size: 1.15rem; flex-wrap: wrap; gap: 4px; }
  header.site-header nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  header.site-header nav a { margin-left: 0; font-size: .9rem; }

  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, .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; }