/* =====================================================
   MyBro — Frontend Stylesheet
   ===================================================== */

/* === Variables ========================================= */
:root {
    --brand:        #003153;
    --brand-light:  #1a4e70;
    --accent:       #f6b93b;
    --accent-dark:  #d4991a;
    --ink:          #0f1923;
    --ink-2:        #1e293b;
    --ink-3:        #374151;
    --ink-4:        #64748b;
    --ink-5:        #94a3b8;
    --bg:           #f5f6f8;
    --surface:      #ffffff;
    --border:       #dde4ec;
    --link:         #2563eb;
    --border-light: #eef2f7;
    --header-h:     56px;
    --sidebar-w:    240px;
}

/* === Base Reset ========================================= */
*, *::before, *::after { box-sizing: border-box; }
/* アンカーで該当箇所へ飛ぶときはアニメーションさせない（auto = 一気に飛ぶ） */
html { scroll-behavior: auto; }
body {
    font-family: 'Noto Sans JP', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    margin: 0;
}
a { text-decoration: none; color: inherit; }
/* 白系背景のコンテンツエリア内の「本文リンク」は青色。
   クラスの付いたリンク（ユーザー名・女の子名・タブ・ボタン等）は
   コンポーネント側の色指定を優先するため対象外にする。
   ここを a:not([class*="btn"]) にすると詳細度 0,2,1 が
   a.クラス（0,1,1）や .クラス（0,1,0）に勝ってしまい、
   color:inherit の指定まで青く塗り潰される */
.site-main a:not([class]) { color: var(--link); }
button { font-family: inherit; cursor: pointer; }
.material-icons { font-size: inherit; vertical-align: middle; line-height: 1; }

/* === Site Header ======================================== */
.page-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.site-header {
    background: var(--brand);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    height: var(--header-h);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-logo {
    display: flex;
    align-items: center;
}
.site-logo img {
    height: 44px;
    width: auto;
    display: block;
}
.site-nav { display: flex; align-items: center; gap: 0; }
.site-nav a {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    padding: 7px 12px;
    border-radius: 8px;
}
.site-nav__signup {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    background: var(--accent);
    padding: 8px 18px;
    border-radius: 50px;
}
/* アプリ一覧。見出しに乗せている間だけ下にアプリを並べる（一覧ページは持たない） */
.site-nav__drop { position: relative; }
.site-nav__drop-btn {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    padding: 7px 12px;
    border-radius: 8px;
    background: none;
    border: none;
    font-family: inherit;
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.site-nav__drop-caret { font-size: 18px; }
.site-nav__drop-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 168px;
    padding: 6px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 25, 35, 0.18);
}
/* マウスを乗せている間と、キーボードで中に入っている間だけ出す */
.site-nav__drop:hover .site-nav__drop-menu,
.site-nav__drop:focus-within .site-nav__drop-menu { display: block; }
.site-nav .site-nav__drop-menu a {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--ink-2);
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
}
.site-nav .site-nav__drop-menu a:hover { background: #f1f5f9; }
.site-nav__drop-item-arrow { font-size: 16px; color: var(--ink-3, #94a3b8); }

/* === Hamburger Button =================================== */
/* ヘッダー右端のまとまり（通知ベル＋ハンバーガー）。
   space-between が効くよう1つの箱にして、ロゴ／ナビ／ここ の3分割にする */
.site-header__actions { display: flex; align-items: center; gap: 2px; }
/* 通知ベル。件数は右上に赤丸で重ねる */
.site-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.9);
    padding: 4px;
    border-radius: 8px;
    line-height: 1;
}
.site-bell .material-icons { font-size: 24px; }
/* 検索の虫眼鏡はスマホのみ（PCはナビの「女の子を探す」で足りる）。
   表示の切り替えはファイル内のスマホ用メディアクエリで行う */
.site-search-btn {
    display: none;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.9);
    padding: 4px;
    border-radius: 8px;
    line-height: 1;
}
.site-search-btn .material-icons { font-size: 24px; }
.site-bell__badge {
    position: absolute;
    top: -1px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    /* 濃紺のヘッダーから浮かせるため、同色の縁で切り抜いたように見せる */
    border: 1.5px solid var(--brand);
    background: #e0362c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    color: rgba(255,255,255,0.9);
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
}
.hamburger-btn .material-icons { font-size: 26px; }

/* === Mobile Nav Drawer ================================== */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mobile-nav-overlay--show {
    display: block;
    opacity: 1;
}
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    background: var(--brand);
    z-index: 201;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.mobile-nav--open {
    transform: translateX(0);
}
.mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    height: var(--header-h);
    flex-shrink: 0;
}
.mobile-nav__close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.9);
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
}
.mobile-nav__close .material-icons { font-size: 24px; }
.mobile-nav__links {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    overflow-y: auto;
    flex: 1;
}
.mobile-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.88);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: background 0.15s;
}
.mobile-nav__link:active { background: rgba(255,255,255,0.08); }
.mobile-nav__link .material-icons { font-size: 20px; color: rgba(255,255,255,0.6); }
/* 引き出しの中では唯一のボタンなので、左右の余白を広げて
   メニュー項目より一回り細くする（幅いっぱいだと重く見える） */
.mobile-nav__link--signup {
    margin: 16px 40px 0;
    border-radius: 50px;
    background: var(--accent);
    color: #fff;
    justify-content: center;
    border-bottom: none;
    font-weight: 700;
    padding: 12px 20px;
}
.mobile-nav__link--signup .material-icons { color: rgba(255,255,255,0.8); }
/* アプリ一覧トグル */
.mobile-nav__toggle {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.mobile-nav__caret {
    margin-left: auto;
    transition: transform 0.2s;
}
.mobile-nav__toggle.is-open .mobile-nav__caret { transform: rotate(180deg); }
.mobile-nav__submenu {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.18);
}
.mobile-nav__sublink {
    padding: 12px 20px 12px 52px;
    font-size: 14px;
    color: rgba(255,255,255,0.82);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.15s;
}
.mobile-nav__sublink:active { background: rgba(255,255,255,0.08); }

@media (max-width: 640px) {
    .site-header__inner { padding: 0 8px 0 6px; }
    .site-nav { display: none; }
    .hamburger-btn { display: flex; align-items: center; }
    .site-search-btn { display: inline-flex; }
}

/* === Page Layout ======================================== */
.page-blue {
    flex: 1;
    background: var(--bg);
    padding: 40px 24px 64px;
}
.page-light {
    flex: 1;
    background: var(--bg);
}
.page-padded {
    min-height: 100%;
    background: var(--bg);
    padding: 40px 24px;
}
.page-center {
    min-height: 100%;
    background: var(--bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 24px;
}

/* === Containers ========================================= */
.container    { max-width: 720px; margin: 0 auto; }
.detail-container { max-width: 800px; margin: 0 auto; }
.container-sm { max-width: 560px; margin: 0 auto; }
.container-md { max-width: 760px; margin: 0 auto; }

/* === Hero Slider (Top Page) ============================= */
.hero-slider {
    position: relative;
    overflow: hidden;
}
.hero-slides {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.hero-slide {
    min-width: 100%;
    min-height: 320px;
    /* 下側は固定配置の検索フォーム（.hero-search）とドットの分を空ける */
    padding: 48px 24px 124px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-slide--1 { background: linear-gradient(rgba(0,49,83,0.65), rgba(0,49,83,0.78)), url('/common/img/hero/01.jpg') center/cover no-repeat; }
.hero-slide--2 { background: linear-gradient(rgba(0,31,61,0.62), rgba(0,49,83,0.75)), url('/common/img/hero/02.jpg') center/cover no-repeat; }
.hero-slide--3 { background: linear-gradient(rgba(0,49,83,0.60), rgba(26,78,112,0.72)), url('/common/img/hero/03.jpg') center/cover no-repeat; }
.hero-slide__inner {
    max-width: 580px;
    text-align: center;
}
.hero-slide__icon {
    font-size: 48px;
    color: rgba(255,255,255,0.25);
    margin-bottom: 16px;
    display: block;
    line-height: 1;
}
.hero-slide__title {
    font-size: 28px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.3;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}
.hero-slide__desc {
    font-size: 14px;
    color: rgba(255,255,255,0.82);
    line-height: 1.75;
    margin: 0;
}

/* メインビジュアル上の検索フォーム。スライドの外に置き、切り替わっても動かさない */
.hero-search {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 44px;
    z-index: 3;
    padding: 0 20px;
}
.hero-search__bar {
    display: flex;
    align-items: stretch;
    max-width: 560px;
    margin: 0 auto;
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.30);
}
.hero-search__select {
    flex: 0 0 auto;
    width: 160px;
    padding: 13px 34px 13px 16px;
    background: var(--surface);
    border: none;
    border-right: 1.5px solid var(--border);
    border-radius: 0;
    font-size: 15px;
    color: var(--ink);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* セレクトの矢印（外部画像を使わずインラインSVG） */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px 7px;
}
.hero-search__select:focus { outline: none; }
.hero-search__input {
    flex: 1;
    padding: 13px 18px;
    background: var(--surface);
    border: none;
    border-radius: 0;
    font-size: 15px;
    color: var(--ink);
    font-family: inherit;
    min-width: 0;
}
.hero-search__input:focus { outline: none; }
.hero-search__input::placeholder { color: var(--ink-5); }
.hero-search__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 60px;
    padding: 0;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s;
}
.hero-search__btn:hover { background: var(--accent-dark); }
.hero-search__btn .material-icons { font-size: 22px; }
.hero-dots {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.hero-dot--active {
    background: #ffffff;
    transform: scale(1.25);
}
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: none;
    color: #ffffff;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s;
    line-height: 1;
}
.hero-arrow:hover { background: rgba(255,255,255,0.28); }
.hero-arrow--prev { left: 16px; }
.hero-arrow--next { right: 16px; }
@media (max-width: 640px) {
    .hero-slide { min-height: 280px; padding: 36px 20px 112px; }
    .hero-slide__title { font-size: 22px; }
    .hero-slide__icon { font-size: 36px; margin-bottom: 10px; }
    .hero-arrow { display: none; }
    .hero-search { bottom: 40px; padding: 0 14px; }
}
@media (max-width: 480px) {
    .hero-search__select { width: 130px; padding-right: 28px; font-size: 14px; }
    .hero-search__input { font-size: 14px; padding: 13px 12px; }
    .hero-search__btn { width: 48px; }
}

/* === Badges ============================================= */
.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}
.badge--recommended { background: #fef3c7; color: #92400e; }
.badge--premium     { background: #fef9c3; color: #854d0e; font-weight: 700; border: 1px solid #fde047; }
.badge--app         { background: #e6eff7; color: #003153; font-weight: 600; }
.badge--count       { background: #f1f5f9; color: var(--ink-3); font-weight: 600; font-size: 12px; padding: 3px 10px; }
/* プレチケのアイコン。マイページの表示（confirmation_number / #8b5cf6）に合わせる */
.qa-ticket-icon { font-size: 15px; color: #8b5cf6; vertical-align: -3px; margin-right: 3px; }
.badge--qa-resolved { background: #dcfce7; color: #166534; font-weight: 600; font-size: 12px; padding: 3px 10px; }

/* === Buttons ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}
.btn--primary {
    background: var(--accent);
    color: #fff !important;
}
.btn--primary-lg {
    background: var(--accent);
    color: #fff;
    padding: 11px 28px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50px;
}
.btn--outline {
    background: transparent;
    border: 1.5px solid var(--accent);
    color: var(--ink-2);
}
.btn--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.4);
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
}

.btn--submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    letter-spacing: 0.02em;
    font-family: inherit;
}
/* 入力が揃うまで押せない送信ボタン（質問フォームなど） */
.btn--submit:disabled {
    background: var(--border);
    color: var(--ink-5);
    cursor: not-allowed;
}
.btn--search {
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 0;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
}
.btn--search .material-icons { font-size: 20px; }

/* === Avatar ============================================= */
.avatar {
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.avatar--sm  { width: 48px; height: 48px; }

.avatar--lg  { width: 64px; height: 64px; }

.avatar--56  { width: 56px; height: 56px; }

.avatar-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 8px;
    flex-shrink: 0;
}
.avatar-ph .material-icons { color: #94a3b8; }

.avatar-ph--sm  { width: 48px; height: 48px; }

.avatar-ph--56  { width: 56px; height: 56px; }
.avatar-ph--lg  { width: 64px; height: 64px; }
.avatar-ph--xl  { width: 72px; height: 72px; border: 1px solid var(--border); }

/* === Breadcrumb ========================================= */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 24px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox: スクロールバー非表示 */
}
.breadcrumb::-webkit-scrollbar { display: none; } /* WebKit: スクロールバー非表示 */
.breadcrumb > * { flex-shrink: 0; }
/* パンくずのリンクはサイト共通の名前リンクと同じ青＋下線にそろえる */
.breadcrumb a       { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb__sep    { color: var(--ink-5); }
/* パンくずと文章の中で使う女の子名リスト（横型）。カード類の identity-tag は
   アプリ名が上・活動名が下の積み型だが、1行に収めたい所ではこちらを使う。
   マークアップは includes/girl_name.php（$_gnBase = 'girl-name-inline'） */
.girl-name-inline-list { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: 4px 12px; }
.girl-name-inline      { color: var(--ink-2); }
.girl-name-inline__app { font-size: 10px; margin-right: 2px; }
/* 活動名は本文と同じ濃さの平文にする（「〇〇さんの口コミ」の
   .review-card__footer-author と同じ見た目）。パンくずでは現在地そのものなので
   リンクにせず、アプリ名の側だけ .breadcrumb a の青＋下線が乗る */
.girl-name-inline__nick { color: var(--ink); font-weight: 400; }
/* 女の子詳細はパンくずのすぐ下にプロフィールカードが来るので、共通の余白（24px）を詰める */
.detail-container:has(.profile-card) > .breadcrumb { margin-bottom: 12px; }

/* === Page Heading (Blue pages) ========================== */
.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
    flex-wrap: wrap;
}
.page-heading h1 { font-size: 24px; font-weight: 800; color: var(--ink); margin: 0; }

.page-heading__sub { font-size: 13px; color: var(--ink-4); }
.page-heading__actions { display: flex; gap: 8px; }

/* === Search Form ======================================== */
.search-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
/* 各行は折り返さない。検索行は幅が足りなければアプリ・名前が縮んでボタンを同じ行に収める */
.search-form__row {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
}
/* アプリ・名前は行幅を等分（ボタン列を除いた残りを2分割）。フィルタ行は下段右端のスペーサーで右端を揃える */
.search-form__input {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ink);
    font-family: inherit;
}
.search-form__select {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--ink);
}
/* エリア・年齢・身長: 3等分で行幅いっぱいに */
.search-form__select--fixed {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
}
/* フォーム下・中央の検索ボタン */
.search-form__submit { text-align: center; margin-top: 6px; }
.btn--search-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 32px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-family: inherit;
}
.btn--search-lg .material-icons { font-size: 18px; }
/* プレースホルダと、未選択（プレースホルダ相当）のセレクトを同じグレーで揃える */
.search-form__input::placeholder { color: var(--ink-5); }
.search-form__select:has(option[value=""]:checked) { color: var(--ink-5); }
.search-form__select option { color: var(--ink); }

/* === AI Search Banner ================================== */
/* 検索ボタン直下に置く顔写真AI検索への導線バナー */
.ai-search-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 18px;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
    border: 1px solid rgba(246,185,59,0.45);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,49,83,0.18);
    transition: filter .15s;
}
.ai-search-banner:hover { filter: brightness(1.08); }
.ai-search-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(246,185,59,0.18);
    color: var(--accent);
}
.ai-search-banner__icon .material-icons { font-size: 22px; }
.ai-search-banner__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.ai-search-banner__title { font-size: 15px; font-weight: 800; color: var(--accent); }
.ai-search-banner__lead { font-size: 12px; font-weight: 600; color: #fff; }
.ai-search-banner__chevron { flex-shrink: 0; font-size: 22px; color: rgba(255,255,255,0.7); }

/* === Girl List ========================================== */
.girl-list { display: flex; flex-direction: column; gap: 4px; }

.girl-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    /* 写真を大きく見せるため上下と左は詰め、右（矢印側）だけ余白を残す */
    padding: 4px 12px 4px 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    position: relative;
}
/* カード全面のリンク。中にもリンク（アプリ名）を置くため a の入れ子にできず、重ねている */
.girl-card__overlay { position: absolute; inset: 0; border-radius: 12px; z-index: 1; }
/* 全面リンクより上に出す要素。写真は拡大、アプリ名はそのアプリの口コミ一覧へ */
.girl-card__photo[data-lightbox],
.girl-card__identity-list a.identity-tag__app { position: relative; z-index: 2; }
.girl-card--recommended {
    border: 2px solid #fbbf24;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
    box-shadow: 0 2px 12px rgba(251,191,36,0.2);
}
.girl-card__info    { flex: 1; min-width: 0; }
.girl-card__header  { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.girl-card__name    { font-size: 18px; font-weight: 700; color: var(--ink); }
.girl-card__name--rec { font-size: 18px; font-weight: 700; color: var(--ink); }
.girl-card__area    { font-size: 12px; color: var(--ink-4); margin-bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.girl-card__reviews { color: #0369a1; font-weight: 700; font-size: 12px; white-space: nowrap; }
.girl-card__tags    { display: flex; flex-wrap: wrap; gap: 4px; }
/* min-width:0 が無いと flex の既定（min-width:auto）でタグの合計幅まで広がり、
   折り返さずにカードからはみ出す。畳む幅を測るためにも親の幅に収める必要がある */
.girl-card__identity-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; min-width: 0; }
.identity-tag--more { justify-content: center; font-weight: 700; color: var(--ink-4); }
/* 件数ではなく実測の幅で畳む。1行に入らないタグを identity-fold.js が隠して「+N」にまとめる。
   JS が動かなかったときは折り返して全件見える（消えるより崩れるほうが安全） */
.identity-tag.identity-tag--hidden { display: none; }
.girl-card__chevron { font-size: 18px; color: #94a3b8; flex-shrink: 0; }
/* 一覧では写真を主役にするため、他ページの avatar--lg（64px）より大きくする */
.girl-card .avatar--lg,
.girl-card .avatar-ph--lg { width: 76px; height: 76px; }

/* === 教えてマイブロ (Q&A) =============================== */
/* 質問作成ページの機能説明。見出し直下に置くので上の余白を詰める */
.qa-intro {
    margin: -14px 0 20px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ink-3);
}
/* 説明ポップアップを開く「もっと詳しく」（includes/qa_intro.php）。文の続きに置くのでリンクの見た目にする */
.qa-intro__more {
    margin-left: 6px;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}
.qa-step-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 12px;
}
/* 質問作成の最初の2択（登録済みから探す / 新規登録して質問する）。
   どちらも同格の選択肢なので、大きさを揃えて縦に並べる */
.qa-choose { display: flex; flex-direction: column; gap: 12px; }
.qa-choose__btn {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 14px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.qa-choose__icon {
    grid-row: 1 / 3;
    font-size: 32px;
    color: var(--brand);
    justify-self: center;
}
.qa-choose__label { font-size: 16px; font-weight: 800; color: var(--ink); }
.qa-choose__note  { font-size: 12px; color: var(--ink-4); line-height: 1.6; }
/* 検索画面から2択へ戻る導線 */
/* 質問作成の最後に置く「一覧へ戻る」。上のパンくずだけだと画面を戻らないと押せない */
.qa-back-to-list { margin: 28px 0 8px; text-align: center; }
.btn--back-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 700;
}
.btn--back-lg .material-icons { font-size: 18px; }
/* 機能説明ポップアップ（includes/qa_guide_modal.php）。3枚のスライドを切り替える */
.qa-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 1900;
    background: rgba(0, 0, 0, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    overflow-y: auto;
}
.qa-guide-modal {
    position: relative;
    background: var(--surface);
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    max-height: 100%;
    overflow-y: auto;
    padding: 28px 22px 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
}
.qa-guide__close {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px;
    border: none;
    background: none;
    color: var(--ink-5);
    cursor: pointer;
    line-height: 1;
}
.qa-guide__close .material-icons { font-size: 22px; }
/* 高さは1枚目に合わせて JS が固定する（JS が動かないときの下限だけここで持つ） */
/* touch-action: pan-y で縦スクロールは残したまま、横スワイプだけ JS が拾う。
   スワイプ中に横へずらした分でモーダルに横スクロールが出ないよう clip する
   （clip は hidden と違い、縦の visible を auto に変えないので中身を切らない） */
.qa-guide__slides {
    min-height: 250px;
    overflow-x: clip;
    touch-action: pan-y;
}
.qa-guide__slide {
    display: none;
    text-align: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
/* 中身が短いスライドでも上に寄らないよう、固定した高さの中で上下中央に置く */
.qa-guide__slide.is-active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}
.qa-guide__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    margin-bottom: 14px;
}
.qa-guide__icon { font-size: 64px; color: var(--accent); }
/* 2枚目: 一覧での見え方。プレチケが多い質問ほど大きく上に出ることを2枚のカードで示す */
.qa-guide__visual--cards {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
/* 素の指定が中位（3枚）。--big が最上位（5枚）、--small が最下位（1枚） */
.qa-guide__qcard {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 94%;
    margin: 0 auto;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(15, 25, 35, 0.06);
    text-align: left;
}
.qa-guide__qcard-body {
    font-size: 12px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qa-guide__qcard .badge--count { flex-shrink: 0; font-size: 11px; padding: 2px 8px; }
.qa-guide__qcard .qa-ticket-icon { font-size: 13px; }
/* プレチケが多いほうは一回り大きく、影も強くして目立たせる */
.qa-guide__qcard--big {
    width: 100%;
    padding: 12px;
    border-color: #fcd34d;
    box-shadow: 0 3px 12px rgba(246, 185, 59, 0.35);
}
.qa-guide__qcard--big .qa-guide__qcard-body { font-size: 14px; font-weight: 700; color: var(--ink); }
.qa-guide__qcard--big .badge--count { font-size: 12px; padding: 3px 10px; }
.qa-guide__qcard--big .qa-ticket-icon { font-size: 15px; }
/* 少ないほうは一覧の下に沈んでいる見立てで、さらに縮めて薄く */
.qa-guide__qcard--small {
    width: 88%;
    padding: 6px 10px;
    opacity: 0.7;
}
.qa-guide__qcard--small .qa-guide__qcard-body { font-size: 10px; }
.qa-guide__qcard--small .badge--count { font-size: 10px; padding: 2px 7px; }
.qa-guide__qcard--small .qa-ticket-icon { font-size: 12px; }
/* 2枚目: 「女の子を探す」一覧と同じ女の子カード（.girl-card、includes/girl_card.php）を
   そのまま再現。ボタンは最初から表示しておき、複数の候補が並ぶ中で1件だけヒットする
   （枠が光ってチェックが出る）流れだけを自動で繰り返す（6sループ）:
   0-16% idle / 16-30% 候補の枠が光ってチェックが出る / 30-88% 保持 / 88-96% 元に戻る */
.qa-guide__visual--hit { height: auto; flex-direction: column; align-items: stretch; gap: 14px; }
.qa-guide__hit-list { width: 100%; max-width: 320px; margin: 0 auto; text-align: left; }
.qa-guide__hit-list .girl-card { pointer-events: none; }
/* ヒットした候補だけ、枠と背景を光らせて目立たせる */
.qa-guide__girl-card--match { animation: qa-guide-hit-highlight 8s infinite; }
/* ヒットした子を一番上・現サイズのまま、下の候補は少しだけ幅を狭めて薄くし目立たなくする。
   アバターサイズは揃えたまま（縮めるとカードの縦幅が「ゆい」とズレてしまうため） */
/* #review-guide では下にいくほど段階的に小さくするので、一律の幅・濃さは使わない */
.qa-guide__hit-check {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    font-size: 20px;
    color: var(--accent);
    background: var(--surface);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.4);
    animation: qa-guide-hit-check 8s infinite;
}
.qa-guide__hit-btn {
    position: relative;
    align-self: center;
    font-size: 13px;
    padding: 10px 24px;
    animation: qa-guide-hit-btn-press 8s infinite;
}
/* ボタン自体も、チェックマークがポップする瞬間（26%）に合わせて1枚目の検索ボタンと
   同じ押し込み＋波紋（box-shadow）を出す */
@keyframes qa-guide-hit-btn-press {
    0%, 55%   { transform: scale(1);    box-shadow: none; }
    58%       { transform: scale(0.92); box-shadow: 0 0 0 6px rgba(246, 185, 59, 0.25); }
    62%, 88%  { transform: scale(1);    box-shadow: none; }
    94%, 100% { transform: scale(1);    box-shadow: none; }
}
@keyframes qa-guide-hit-highlight {
    0%, 40%   { background-color: var(--surface); border-color: var(--border); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
    46%       { background-color: #fffbeb; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(246, 185, 59, 0.35); }
    50%, 88%  { background-color: #fffbeb; border-color: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
    94%, 100% { background-color: var(--surface); border-color: var(--border); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
}
@keyframes qa-guide-hit-check {
    0%, 44%   { opacity: 0; transform: scale(0.4); }
    50%       { opacity: 1; transform: scale(1.15); }
    54%, 88%  { opacity: 1; transform: scale(1); }
    94%, 100% { opacity: 0; transform: scale(0.4); }
}
/* ②のカーソルは、ヒット（46%）→チェック（50%）を見せたあとに現れ、
   「この女性の口コミを書く」を押す（58%）。①のカーソルが消えてから出す */
@keyframes qa-guide-hit-cursor {
    0%, 50%   { opacity: 0; transform: translate(10px, 10px) scale(1); }
    54%       { opacity: 1; transform: translate(0, 0) scale(1); }
    58%       { opacity: 1; transform: translate(0, 0) scale(0.85); }
    62%, 88%  { opacity: 1; transform: translate(0, 0) scale(1); }
    94%, 100% { opacity: 0; transform: translate(10px, 10px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .qa-guide__girl-card--match,
    .qa-guide__hit-check,
    .qa-guide__hit-btn { animation: none; }
    .qa-guide__girl-card--match { background-color: #fffbeb; border-color: var(--accent); }
    .qa-guide__hit-check { opacity: 1; transform: scale(1); }
}
/* 3枚目: /girls/ の「見つからない」ときの実際の見た目（.empty-state + .girl-search-register）を
   簡略化して再現。文言は改行させたくないので nowrap、2要素の間もぎゅっと詰める。
   「この女の子の登録をお願いします」ボタンだけ、タップしているカーソルで軽く目を引かせる */
.qa-guide__visual--empty { height: auto; flex-direction: column; align-items: center; gap: 8px; }
/* .empty-state 本体の padding: 48px 32px（後方の定義）に詳細度で負けないよう複合セレクタにする */
.empty-state.qa-guide__empty-mock { padding: 22px 24px; margin: 0; }
.qa-guide__empty-mock p { margin: 0; white-space: nowrap; }
.girl-search-register.qa-guide__empty-register { margin-top: 0; padding-bottom: 0; }
.qa-guide__empty-btn { position: relative; animation: qa-guide-empty-btn-press 8s infinite; }
.qa-guide__empty-btn .qa-guide__cursor { animation: qa-guide-empty-cursor 8s infinite; }
/* 検索の結果。検索ボタンを押した直後（周期の30%すぎ）に現れる。
   出る前も場所は取っておき、切り替わりで高さが動かないようにする */
.qa-guide__miss-result {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 5px;
    animation: qa-guide-miss-result 8s infinite;
}
@keyframes qa-guide-miss-result {
    0%, 30%   { opacity: 0; transform: translateY(-6px); }
    38%, 88%  { opacity: 1; transform: translateY(0); }
    94%, 100% { opacity: 0; transform: translateY(-6px); }
}
/* ボタン自体も、カーソルがタップする瞬間（52%）に合わせて1枚目の検索ボタンと同じ
   押し込み＋波紋（box-shadow）を出す */
@keyframes qa-guide-empty-btn-press {
    0%, 55%   { transform: scale(1);    box-shadow: none; }
    58%       { transform: scale(0.92); box-shadow: 0 0 0 6px rgba(246, 185, 59, 0.25); }
    62%, 88%  { transform: scale(1);    box-shadow: none; }
    94%, 100% { transform: scale(1);    box-shadow: none; }
}
@keyframes qa-guide-empty-cursor {
    0%, 50%   { opacity: 0; transform: translate(10px, 10px) scale(1); }
    54%       { opacity: 1; transform: translate(0, 0) scale(1); }
    58%       { opacity: 1; transform: translate(0, 0) scale(0.85); }
    62%, 88%  { opacity: 1; transform: translate(0, 0) scale(1); }
    94%, 100% { opacity: 0; transform: translate(10px, 10px) scale(1); }
}
/* 「通常よりも多くの閲覧日数」だけ、文字を少し大きくして目立たせる（動きなし） */
.qa-guide__emphasis {
    font-size: 1.2em;
    color: var(--ink);
}

.qa-guide__grant {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: 13px;
    font-weight: 800;
    color: #92400e;
}
.qa-guide__grant .material-icons { font-size: 16px; }
/* 4〜5枚目: 口コミカードに実際に付くバッジ（includes/review_badges.php）を、
   説明用に少しだけ大きくして見せる */
.qa-guide__visual--badge .review-badge { font-size: 15px; padding: 7px 16px; }
.qa-guide__visual--badge .review-badge__icon { font-size: 17px; }
/* 1枚目: 女の子ページのプロフィールカードを簡略化して再現する */
.qa-guide__visual--sample { height: auto; }
.qa-guide__card {
    width: 100%;
    max-width: 300px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 25, 35, 0.1);
    text-align: left;
}
.qa-guide__card-head {
    /* 実際のプロフィールカードと同じグラデーション。中身は identity-tag をそのまま使う */
    background: linear-gradient(135deg, #0a3d62 0%, #38ada9 100%);
    padding: 7px 12px;
}
.qa-guide__card-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--surface);
}
.qa-guide__card-meta { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
.qa-guide__card-attrs { font-size: 11px; color: var(--ink-3); }
.qa-guide__card-chip {
    align-self: flex-start;
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 10px;
    color: var(--ink-4);
}
.qa-guide__card-feature { font-size: 11px; line-height: 1.6; color: var(--ink-3); }
.qa-guide__sample {
    position: relative;
    flex: none;
    width: 112px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
}
/* 実物と同じく写真は切らずに収める（NO PHOTO の文字が欠けないように） */
.qa-guide__sample-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #eef1f4;
}
.qa-guide__sample-ask {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 32px;
    line-height: 0;
    filter: drop-shadow(0 2px 6px rgba(15, 25, 35, 0.25));
}
.qa-guide__sample-ask img { display: block; width: 100%; height: auto; }
/* ボタンの外側で広がる輪。「ここ」を指し示す */
.qa-guide__sample-ring {
    position: absolute;
    inset: -5px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    animation: qa-guide-ring 1.6s ease-out infinite;
}
@keyframes qa-guide-ring {
    0%   { transform: scale(1);    opacity: 1; }
    100% { transform: scale(1.55); opacity: 0; }
}

.qa-guide__mock-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}
.qa-guide__mock-row {
    display: flex;
    gap: 6px;
    width: 100%;
}
.qa-guide__mock-select,
.qa-guide__mock-input {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--ink);
    overflow: hidden;
}
.qa-guide__mock-row--filters .qa-guide__mock-select { padding: 0 8px; font-size: 11px; }
.qa-guide__mock-select--app,
.qa-guide__mock-select--age,
.qa-guide__mock-select--height,
.qa-guide__mock-select--area,
.qa-guide__mock-input { animation: qa-guide-search-box-pulse 8s infinite; }
.qa-guide__mock-select-placeholder,
.qa-guide__mock-select-value {
    position: absolute;
    left: 10px;
    white-space: nowrap;
}
.qa-guide__mock-row--filters .qa-guide__mock-select-placeholder,
.qa-guide__mock-row--filters .qa-guide__mock-select-value { left: 8px; }
.qa-guide__mock-select-placeholder { color: var(--ink-5); animation: qa-guide-search-fade-out 8s infinite; }
.qa-guide__mock-select-value { color: var(--ink); font-weight: 700; opacity: 0; animation: qa-guide-search-fade-in 8s infinite; }
.qa-guide__mock-select-caret { position: absolute; right: 4px; font-size: 18px; color: var(--ink-5); }
.qa-guide__mock-row--filters .qa-guide__mock-select-caret { font-size: 16px; }
/* 他の項目（アプリ・年齢・身長・エリア）と同じクロスフェードで一斉に浮かび上がらせる。
   タイプライター風に文字だけ先に埋まると他の項目とタイミングがずれて見えるため、
   見た目を合わせて opacity のフェードインに統一している */
.qa-guide__mock-input-text {
    display: inline-block;
    font-weight: 700;
    opacity: 0;
    animation: qa-guide-search-fade-in 8s infinite;
}
.qa-guide__mock-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 26px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 50px;
    animation: qa-guide-search-btn-press 8s infinite;
}
.qa-guide__mock-btn .material-icons { font-size: 16px; }
/* OS標準のマウスポインタ矢印を clip-path で描いたもの（アイコンフォントは使わない）。
   ボタン自体の押し込み/出現モーションに合わせてフェードイン→タップ（少し縮む）→
   フェードアウトを繰り返す */
.qa-guide__cursor {
    position: absolute;
    right: -8px;
    bottom: -12px;
    width: 15px;
    height: 19px;
    background: #1f2937;
    clip-path: polygon(0% 0%, 0% 82%, 30% 65%, 46% 100%, 62% 93%, 47% 60%, 82% 58%);
    filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 1.2px #fff) drop-shadow(0 1px 2px rgba(15, 25, 35, 0.4));
    pointer-events: none;
}
.qa-guide__mock-btn .qa-guide__cursor { animation: qa-guide-search-cursor 8s infinite; }
.qa-guide__hit-btn .qa-guide__cursor { animation: qa-guide-hit-cursor 8s infinite; }
/* 選択ボックスの枠が一瞬光る「選んだ」演出。4項目とも同じタイミングで一斉に光る */
@keyframes qa-guide-search-box-pulse {
    0%, 8%    { box-shadow: none; border-color: var(--border); }
    11%       { box-shadow: 0 0 0 3px rgba(246, 185, 59, 0.35); border-color: var(--accent); }
    16%, 100% { box-shadow: none; border-color: var(--border); }
}
/* プレースホルダ→入力値のクロスフェード。4項目・名前欄とも同じタイミングで一斉に埋まる */
@keyframes qa-guide-search-fade-out {
    0%, 8%    { opacity: 1; }
    14%, 88%  { opacity: 0; }
    94%, 100% { opacity: 1; }
}
@keyframes qa-guide-search-fade-in {
    0%, 8%    { opacity: 0; }
    14%, 88%  { opacity: 1; }
    94%, 100% { opacity: 0; }
}
/* ボタンは全項目が埋まった直後（25%）に押し込む。以前は58〜64%だったが、
   項目を一斉に埋めるようにしたので押すタイミングも早めた */
@keyframes qa-guide-search-btn-press {
    0%, 22%   { transform: scale(1);    box-shadow: none; }
    25%       { transform: scale(0.92); box-shadow: 0 0 0 6px rgba(246, 185, 59, 0.25); }
    28%, 88%  { transform: scale(1);    box-shadow: none; }
    94%, 100% { transform: scale(1);    box-shadow: none; }
}
/* カーソルはボタンの押し込み（25%）に合わせて滑り込み、タップして、押し終わったら留まる */
@keyframes qa-guide-search-cursor {
    0%, 17%   { opacity: 0; transform: translate(10px, 10px) scale(1); }
    20%       { opacity: 1; transform: translate(0, 0) scale(1); }
    25%       { opacity: 1; transform: translate(0, 0) scale(0.85); }
    30%, 34%  { opacity: 1; transform: translate(0, 0) scale(1); }
    40%, 100% { opacity: 0; transform: translate(10px, 10px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .qa-guide__sample-ring,
    #review-guide .qa-guide__badge-point .review-badge { animation: none; }
    .qa-guide__slide { transition: none; }
    .qa-guide__mock-select--app,
    .qa-guide__mock-select--age,
    .qa-guide__mock-select--height,
    .qa-guide__mock-select--area,
    .qa-guide__mock-select-placeholder,
    .qa-guide__mock-select-value,
    .qa-guide__mock-input-text,
    .qa-guide__mock-btn,
    .qa-guide__empty-btn { animation: none; }
    .qa-guide__miss-result { animation: none; opacity: 1; transform: none; }
    #review-guide .qa-guide__mypage-mock .mp-profile-card__meta strong { animation: none; }
    .qa-guide__mock-select-placeholder { opacity: 0; }
    .qa-guide__mock-select-value { opacity: 1; }
    .qa-guide__mock-input-text { opacity: 1; }
    /* カーソル演出は .qa-guide__mock-btn .qa-guide__cursor 等（2クラス）で animation を
       付けているため、無効化する側も同じ詳細度で書かないと負けて動き続けてしまう */
    .qa-guide__mock-btn .qa-guide__cursor,
    .qa-guide__hit-btn .qa-guide__cursor,
    .qa-guide__empty-btn .qa-guide__cursor { animation: none; opacity: 0; }
}
.qa-guide__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.5;
    margin: 0 0 10px;
}
/* 説明は中央揃えだと読みにくいので、左寄せの箇条書きにする */
.qa-guide__list {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.qa-guide__list li {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ink-3);
}
.qa-guide__list li + li { margin-top: 8px; }
.qa-guide__list li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 2px;
    /* ▶ の三角。フォントの絵文字に頼らず枠線で描く */
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent var(--accent);
}
.qa-guide__dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 18px 0 14px;
}
.qa-guide__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
}
.qa-guide__dot.is-active { background: var(--accent); }
.qa-guide__actions { display: flex; gap: 10px; }
.qa-guide__prev,
.qa-guide__next {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.qa-guide__prev {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-3);
}
.qa-guide__prev:disabled { opacity: 0.4; cursor: default; }
.qa-guide__next {
    border: none;
    border-bottom: 3px solid #1e7a77;
    background: #38ada9;
    color: #fff;
}
.qa-guide__next:active { transform: translateY(2px); border-bottom-width: 1px; }
/* 口コミ投稿ガイド（#review-guide）だけ、全体的に縦の余白を詰める。
   #qa-guide（教えて！マイブロ）は同じ qa-guide-* クラスを共有しているので、
   ここに影響しないよう #review-guide の中だけを上書きするスコープにしている */
#review-guide .qa-guide-modal { padding: 26px 22px 16px; }
/* 1枚目に検索フォームと候補カード4枚を収めるので、他のポップアップより横幅を広く取る */
#review-guide .qa-guide-modal { max-width: 560px; }
/* 上段＝女の子を探すページ、下段＝女の子ページ。どちらの画面の話かが分かるよう、
   それぞれを薄い枠で囲って名前を付ける */
#review-guide .qa-guide__step,
.usage-guide-scope .qa-guide__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}
#review-guide .qa-guide__step-label,
.usage-guide-scope .qa-guide__step-label {
    /* ①②の見出しは左揃え（中の要素は中央のままなので、見出しだけ左端に寄せる） */
    align-self: flex-start;
    text-align: left;
    margin: 0;
    /* タイトル（.qa-guide__title 17px/800）より一段小さく細くして、見出しの階層を分ける */
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
/* 2つのステップの境目に置く下向き矢印。別の段であることを示すだけなので、
   動きは付けず、横長のバーで区切りらしく見せる */
#review-guide .qa-guide__flow-arrow,
.usage-guide-scope .qa-guide__flow-arrow {
    align-self: center;
    width: 120px;
    height: 16px;
    margin: 4px 0;
    background: #dbe3ec;
    /* 横に広い下向きの三角。アイコンフォントではなく clip-path で描く */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* 1枚目は要素が多いので、検索フォームは1行だけにして縦を詰める */
#review-guide .qa-guide__mock-form--compact { gap: 8px; }
/* 候補は4枚並ぶ。写真と余白を少し詰めて、全部が画面に収まるようにする */
#review-guide .qa-guide__hit-list { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: 6px; }
#review-guide .qa-guide__hit-list .girl-card { padding: 2px 9px 2px 4px; gap: 8px; }
#review-guide .qa-guide__hit-list .avatar--lg { width: 40px; height: 40px; }
#review-guide .qa-guide__hit-list .identity-tag__nick { font-size: 14px; }
#review-guide .qa-guide__hit-list .identity-tag__app { font-size: 10px; padding: 1px 6px; }
#review-guide .qa-guide__hit-list .girl-card__area,
#review-guide .qa-guide__hit-list .girl-card__reviews { font-size: 11px; }
/* 候補は実際の一覧と同じく全部同じ大きさで並べる。
   ヒットした1枚目は色と check_circle で示すので、大きさで差を付ける必要はない */
#review-guide .qa-guide__visual--hit { gap: 8px; }
/* 画面の縦が短い端末（iPhone SE など）では、1枚目の中身を詰めて
   「戻る／次へ」まで一画面に収める */
@media (max-height: 720px) {
    #review-guide .qa-guide-modal { padding: 16px 18px 12px; }
    #review-guide .qa-guide__hit-list { gap: 5px; }
    #review-guide .qa-guide__hit-list .avatar--lg { width: 42px; height: 42px; }
    #review-guide .qa-guide__hit-list .girl-card { padding: 3px 8px 3px 4px; gap: 8px; }
    #review-guide .qa-guide__visual--hit { gap: 6px; }
    #review-guide .qa-guide__hit-btn { padding: 8px 20px; }
    #review-guide .qa-guide__step { gap: 6px; }
    #review-guide .qa-guide__step-label { font-size: 12px; }
    #review-guide .qa-guide__flow-arrow { width: 100px; height: 14px; margin: 2px 0; }
    #review-guide .qa-guide__title { font-size: 16px; margin-bottom: 4px; }
    #review-guide .qa-guide__mock-select,
    #review-guide .qa-guide__mock-input { height: 30px; }
    #review-guide .qa-guide__mock-btn { padding: 7px 18px; }
    #review-guide .qa-guide__list { margin-top: 6px; }
    #review-guide .qa-guide__actions { margin-top: 8px; }
    #review-guide .qa-guide__skip { margin-top: 8px; font-size: 12px; }
    #review-guide .qa-guide__skip + .qa-guide__actions { margin-top: 6px; }
    /* カード1枚あたりの高さを詰める（名前・アプリ名・プロフィール行の文字を一段小さく） */
    #review-guide .qa-guide__hit-list .identity-tag__nick { font-size: 14px; }
    #review-guide .qa-guide__hit-list .identity-tag__app { font-size: 10px; padding: 1px 6px; }
    #review-guide .qa-guide__hit-list .girl-card__area { font-size: 11px; }
    #review-guide .qa-guide__hit-list .avatar--lg { width: 38px; height: 38px; }
    #review-guide .qa-guide__list li { font-size: 12px; }
}
/* タイトルの位置を3枚で揃えたいので、上下中央寄せ（qa-guide__slide.is-active の
   justify-content:center）をやめて上詰めにする。ただし中央寄せにしたいのはタイトル
   より下の中身（.qa-guide__body、includes/review_guide_modal.php で新設）だけなので、
   タイトルは上詰め・中身はその中でさらに残りの高さを使って中央寄せ、の二段構えにする */
#review-guide .qa-guide__slide.is-active { justify-content: flex-start; }
#review-guide .qa-guide__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}
#review-guide .qa-guide__title { margin-bottom: 6px; }
#review-guide .qa-guide__visual { margin-bottom: 10px; }
/* 3枚目の説明文だけ、もう8pxほど下に離す */
#review-guide .qa-guide__visual--empty + .qa-guide__list { margin-top: 8px; }
#review-guide .qa-guide__list li { padding-left: 15px; font-size: 15px; line-height: 1.7; }
/* 目印は ▶ ではなく「・」で統一する */
#review-guide .qa-guide__list li::before {
    content: "・";
    top: 0;
    left: 0;
    border: none;
    color: var(--ink-3);
    font-weight: 700;
    line-height: inherit;
}
/* 枚数のインジケータを外したので、スライドと「戻る／次へ」の間だけ余白を持たせる */
#review-guide .qa-guide__actions { margin-top: 12px; }
/* 「次回から表示しない」。ボタンの上に、控えめな文字で置く */
#review-guide .qa-guide__skip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    color: var(--ink-3);
    font-size: 13px;
    cursor: pointer;
}
#review-guide .qa-guide__skip input { width: 15px; height: 15px; accent-color: #38ada9; cursor: pointer; }
#review-guide .qa-guide__skip + .qa-guide__actions { margin-top: 8px; }
/* 4枚目: 要注意PJ。女の子カードに付いた【要注意】バッジを輪で指し示す */
#review-guide .qa-guide__visual--caution { height: auto; flex-direction: column; align-items: stretch; }
#review-guide .qa-guide__visual--caution .girl-card { pointer-events: none; }
#review-guide .qa-guide__badge-point {
    position: relative;
    display: inline-flex;
    margin-top: 6px;
}
/* 指し示し方は輪ではなく、バッジのまわりの影をゆっくり明滅させる */
#review-guide .qa-guide__badge-point .review-badge {
    animation: qa-guide-badge-glow 2.4s ease-in-out infinite;
}
@keyframes qa-guide-badge-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.00); }
    50%      { box-shadow: 0 0 14px 5px rgba(220, 38, 38, 0.30); }
}
/* 事実認証のバッジは黄色寄りなので、影もバッジの色に合わせる */
#review-guide .qa-guide__badge-point--fact .review-badge {
    animation-name: qa-guide-badge-glow-fact;
}
@keyframes qa-guide-badge-glow-fact {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.00); }
    50%      { box-shadow: 0 0 14px 5px rgba(217, 119, 6, 0.35); }
}
/* 平文が2つ続くときの間隔 */
#review-guide .qa-guide__text + .qa-guide__text { margin-top: 8px; }
/* カードの下に置く箇条書き（5枚目）。カードとの間隔だけ空ける */
#review-guide .qa-guide__list--wide { margin-top: 12px; }
/* 4枚目の説明（箇条書きではない平文） */
#review-guide .qa-guide__text {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-2);
    text-align: left;
}
/* 例の列挙。縦2列で並べる */
#review-guide .qa-guide__tags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
#review-guide .qa-guide__tags li {
    position: relative;
    padding-left: 15px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-2);
}
#review-guide .qa-guide__tags li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: var(--ink-3);
    font-weight: 700;
}
/* 3枚目: マイページのプロフィールカードをそのまま再現する（.mp-profile-card を流用）。
   下の説明がこのカードの「閲覧日数残り」「プレチケ」の数字のことだと分かればよいので、
   数字はカード本来の見え方（オレンジの太字）のままにして、囲みは足さない */
#review-guide .qa-guide__mypage-mock { margin-bottom: 14px; text-align: left; }
#review-guide .qa-guide__mypage-mock .mp-profile-card { margin: 0; padding: 10px 12px; }
/* 操作リンクを外したぶん、カードの縦を詰める */
#review-guide .qa-guide__mypage-mock .mp-profile-card__head { align-items: center; }

/* 説明用なので、この行だけ実物より少し大きくする。折り返すと2行になって
   カードの見た目が変わるので、1行に収める */
#review-guide .qa-guide__mypage-mock .mp-profile-card__meta {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 8px;
    font-size: 14px;
}
#review-guide .qa-guide__mypage-mock .mp-profile-card__meta strong { font-size: 19px; }
/* カードの数字（閲覧日数残り・プレチケ）を、ときどき小さく跳ねさせて目を向けさせる */
#review-guide .qa-guide__mypage-mock .mp-profile-card__meta strong {
    display: inline-block;
    animation: qa-guide-number-wiggle 1.3s ease-in-out infinite;
}
@keyframes qa-guide-number-wiggle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    18%      { transform: translateY(-3px) rotate(-5deg); }
    36%      { transform: translateY(0) rotate(4deg); }
    52%      { transform: translateY(-2px) rotate(-3deg); }
    70%      { transform: translateY(0) rotate(0deg); }
}
/* 3枚目: 閲覧日数とプレチケを分けて、それぞれ増える条件を箇条書きで並べる */
#review-guide .qa-guide__grants {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}
#review-guide .qa-guide__grant-block { padding: 0; }
#review-guide .qa-guide__grant-block .qa-guide__grant {
    margin-bottom: 6px;
    padding: 0;
    border: none;
    background: none;
    font-size: 15px;
    color: var(--ink);
}
#review-guide .qa-guide__grant-block .qa-guide__grant .material-icons { color: var(--accent); font-size: 18px; }
#review-guide .qa-guide__list--grant li { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
#review-guide .qa-guide__list--grant li + li { margin-top: 4px; }
#review-guide .qa-guide__grants + .qa-guide__list--lead { margin-top: 14px; }
/* 3枚目は結論の一文がカードと箇条書きの間に入るので、その下を空ける */
#review-guide .qa-guide__list--lead + .qa-guide__grants { margin-top: 12px; }
#review-guide .qa-guide__list li + li { margin-top: 6px; }
/* 2枚目の一番読ませたい一行。文字だけ大きくして、肝の部分に色を敷く。
   ▶ の目印と字下げは付けない（1行だけなので箇条書きに見せる必要がない） */
#review-guide .qa-guide__list--lead li { padding-left: 0; font-size: 15px; line-height: 1.9; }
#review-guide .qa-guide__list--lead li::before { content: none; }
#review-guide .qa-guide__list--lead .qa-guide__emphasis { font-size: 1.15em; }
/* 画面が狭いと「が付与されます！」が3行目に落ちるので、一段だけ小さくして2行に収める */
@media (max-width: 400px) {
    #review-guide .qa-guide__list--lead li { font-size: 14px; }
    /* カードの幅が足りないので、数字の行だけ一段小さくして1行を保つ */
    #review-guide .qa-guide__mypage-mock .mp-profile-card__meta { gap: 6px; font-size: 12px; }
    #review-guide .qa-guide__mypage-mock .mp-profile-card__meta strong { font-size: 17px; }
}
/* 語の途中で改行させたくないところ（「が付与されます！」など） */
.qa-guide__nowrap { white-space: nowrap; }
/* 蛍光ペンで引いたようなハイライト。角の丸みを四隅バラバラにして少し傾け、
   一筆で塗ったような形にする（背景は文字の後ろに敷く） */
.qa-guide__emphasis--marker {
    position: relative;
    z-index: 0;
}
.qa-guide__emphasis--marker::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -5px;
    right: -6px;
    bottom: 0.02em;
    height: 0.66em;
    background: var(--accent);
    opacity: 0.55;
    border-radius: 6px 14px 8px 16px / 10px 6px 12px 8px;
    transform: rotate(-0.8deg);
}
#review-guide .qa-guide__dots { margin: 12px 0 10px; }
/* マイブロの活用方法ポップアップ（#usage-guide）と、会員登録前向けの
   「会員になるとできること」ポップアップ（#member-benefits）。中身を共有しているので
   .usage-guide-scope を付けた側にまとめて効かせる。7枚とも「タイトル＋アイコン＋説明文」の
   同じ構成なので、口コミ投稿ガイド（#review-guide）と同じくタイトルを上詰めにして、
   中身だけを残りの高さで中央寄せにする */
.usage-guide-scope .qa-guide-modal { padding: 20px 22px 16px; }
.usage-guide-scope .qa-guide__slide.is-active { justify-content: flex-start; }
.usage-guide-scope .qa-guide__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}
.usage-guide-scope .qa-guide__title { margin-bottom: 6px; }
/* 説明文が長いので、口コミ投稿ガイド（#review-guide）と同じ横幅まで広げる */
.usage-guide-scope .qa-guide-modal { max-width: 560px; }
/* どの枚も実際の画面を再現した図を置くので、アイコン1個ぶんの高さ固定はやめる */
.usage-guide-scope .qa-guide__visual {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
}
.usage-guide-scope .qa-guide__list li { line-height: 1.6; font-size: 14px; }
.usage-guide-scope .qa-guide__list li + li { margin-top: 5px; }
/* 枚数のインジケータは外したので、スライドと「戻る／次へ」の間だけ余白を持たせる */
.usage-guide-scope .qa-guide__actions { margin-top: 12px; }

/* 1枚目: 投稿した口コミ（実際の口コミカード）と、その結果もらえるものを上下に並べる */
.usage-guide-scope .usage-guide__visual--post .review-card { width: 100%; text-align: left; pointer-events: none; }
.usage-guide-scope .usage-guide__visual--post .review-card__footer-stats { pointer-events: none; }
/* もらえるものは、囲まずに文字だけで並べる */
.usage-guide-scope .usage-guide__grants { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.usage-guide-scope .usage-guide__grant {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-2);
}
.usage-guide-scope .usage-guide__grant .material-icons { font-size: 18px; color: var(--ink-4); }
.usage-guide-scope .usage-guide__grant strong { font-size: 18px; color: var(--accent); margin: 0 1px; }

/* 4枚目: 実際の質問カード（includes/qa_card.php）と、それに付いた回答 */
.usage-guide-scope .usage-guide__qa-card { text-align: left; margin: 0; pointer-events: none; }
.usage-guide-scope .usage-guide__qa-card .recent-reviews__body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
}
.usage-guide-scope .usage-guide__qa-card .qa-item__girl-head .avatar--lg { width: 40px; height: 40px; }
/* 回答は、質問詳細の回答ボックス（includes/qa_answer_item.php）と同じ見た目で1件だけ添える */
.usage-guide-scope .usage-guide__answer { text-align: left; }
.usage-guide-scope .usage-guide__answer .qa-answer__body { font-size: 13px; line-height: 1.6; }

/* 5枚目: 写真を1枚入れる → 別アプリの同じ子がヒットする、という流れ */
.usage-guide-scope .usage-guide__drop { width: 100%; padding: 14px 12px; pointer-events: none; }
.usage-guide-scope .usage-guide__drop .drop-zone__icon { font-size: 28px; }
.usage-guide-scope .usage-guide__drop .drop-zone__text { font-size: 12px; }
.usage-guide-scope .usage-guide__hit-list { width: 100%; text-align: left; }
.usage-guide-scope .usage-guide__hit-list .girl-card { pointer-events: none; padding: 4px 9px 4px 4px; gap: 8px; }
.usage-guide-scope .usage-guide__hit-list .avatar--lg { width: 44px; height: 44px; }

/* 6枚目: DM画面（/mypage/user-dm.php）の吹き出しをそのまま並べる。
   このスライドだけ縦に伸びてポップアップ全体の高さを決めてしまうので、
   吹き出しを目一杯横に使わせて（max-width と余白を詰めて）行数を減らす */
.usage-guide-scope .usage-guide__visual--dm { gap: 6px; text-align: left; }
.usage-guide-scope .usage-guide__visual--dm .msg-bubble-body {
    font-size: 13px;
    padding: 7px 10px;
    line-height: 1.5;
}
.usage-guide-scope .usage-guide__visual--dm .msg-avatar { width: 26px; height: 26px; }
.usage-guide-scope .usage-guide__visual--dm .msg-avatar--empty .material-icons { font-size: 19px; }
.usage-guide-scope .usage-guide__visual--dm .msg-wrap { gap: 6px; }
/* 実画面は 85% で余白を残すが、ここは説明図なので横幅を使い切る */
.usage-guide-scope .usage-guide__visual--dm .msg-line { max-width: 100%; gap: 4px; }
.usage-guide-scope .usage-guide__visual--dm .msg-stamp { font-size: 9px; }

/* 7枚目: 自分だけメモ。マイページの1件（女の子カード＋メモ本体）と、口コミが入ったときの
   アラート通知。実物と同じクラスをそのまま使い、ポップアップに収まるよう寸法だけ詰める */
.usage-guide-scope .usage-guide__visual--memo { gap: 6px; }
.usage-guide-scope .usage-guide__memo { text-align: left; }
/* 女の子カード。帯・余白・文字を一回り小さくして高さを抑える */
.usage-guide-scope .usage-guide__memo .profile-card { box-shadow: none; border-radius: 12px; }
.usage-guide-scope .usage-guide__memo .profile-card__top { padding: 5px 10px; }
.usage-guide-scope .usage-guide__memo .profile-card__columns { padding: 8px 10px; gap: 10px; }
.usage-guide-scope .usage-guide__memo .profile-gallery { width: 22%; }
.usage-guide-scope .usage-guide__memo .profile-card__toplink { padding: 2px 8px; font-size: 10px; }
.usage-guide-scope .usage-guide__memo .profile-card__identity-list .identity-tag__app { padding: 1px 6px; font-size: 10px; }
.usage-guide-scope .usage-guide__memo .identity-tag__nick { font-size: 14px; }
.usage-guide-scope .usage-guide__memo .profile-card__attrs { gap: 8px; font-size: 10px; }
.usage-guide-scope .usage-guide__memo .profile-card__features-heading { font-size: 10px; margin-bottom: 2px; }
.usage-guide-scope .usage-guide__memo .profile-card__intro-block { margin-bottom: 0; }
.usage-guide-scope .usage-guide__memo .profile-card__intro { font-size: 10px; line-height: 1.6; }
/* 実物では profile-card-compact.js が is-truncated を付けて「…」とフェードを出すが、
   隠れているポップアップの中では高さが測れず付かないので、説明図では常に出しておく */
.usage-guide-scope .usage-guide__memo .profile-card__features {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
}
.usage-guide-scope .usage-guide__memo .profile-card__right::after {
    content: '…';
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 24px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-3);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 60%);
}
/* メモ本体 */
.usage-guide-scope .usage-guide__memo .memo-entry__note { margin: 0; padding: 7px 10px; }
.usage-guide-scope .usage-guide__memo .memo-entry__body { font-size: 12px; line-height: 1.5; }
.usage-guide-scope .usage-guide__memo .memo-entry__tools .material-icons { font-size: 16px; color: var(--ink-5); }
.usage-guide-scope .usage-guide__memo .memo-entry__flags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
/* 口コミ通知の設定行。ポップアップの説明文（.qa-guide__list）と地続きに見えると
   本文の一部だと思われてしまうので、実画面（.memo-notifycheck）と同じ小さめ・薄めの
   文字にしたうえで、メモの枠の中に敷いた1行の設定欄として見せる */
.usage-guide-scope .usage-guide__memo-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--border-light);
    font-size: 11px;
    line-height: 1.4;
    color: var(--ink-4);
}
.usage-guide-scope .usage-guide__memo-alert-text { flex: 1; }
.usage-guide-scope .usage-guide__memo-check {
    font-size: 18px;
    flex-shrink: 0;
    color: var(--ink-5);
    transition: color .2s;
}
/* チェックが入る瞬間だけ跳ねさせて、操作できる項目だと分かるようにする */
.usage-guide-scope .usage-guide__memo-check.is-checked {
    color: var(--link);
    animation: memo-check-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes memo-check-pop {
    0%   { transform: scale(.7); }
    55%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* 2〜3枚目: マイページのプロフィールカード（public/mypage.php の .mp-profile-card）を
   そのまま再現し、その回で説明している数字（閲覧日数／プレチケ）だけを目立たせる。
   #review-guide の3枚目と同じ作りだが、あちらは両方の数字を跳ねさせるのに対し、
   こちらは片方だけを跳ねさせ、もう片方は薄くして視線が散らないようにする */
.usage-guide-scope .qa-guide__mypage-mock { margin-bottom: 14px; text-align: left; }
.usage-guide-scope .qa-guide__mypage-mock .mp-profile-card { margin: 0; padding: 10px 12px; }
/* 操作リンクを外したぶん、カードの縦を詰める */
.usage-guide-scope .qa-guide__mypage-mock .mp-profile-card__head { align-items: center; }
/* 説明用なので、この行だけ実物より少し大きくする。折り返すと2行になって
   カードの見た目が変わるので、1行に収める */
.usage-guide-scope .qa-guide__mypage-mock .mp-profile-card__meta {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 8px;
    font-size: 14px;
}
.usage-guide-scope .qa-guide__mypage-mock .mp-profile-card__meta strong { font-size: 19px; }
/* 主役でない方（と、閲覧日数の話でないときの期限）は薄くする */
.usage-guide-scope .qa-guide__meta-days,
.usage-guide-scope .qa-guide__meta-tickets { opacity: 0.4; }
/* 指し示し方は濃淡だけ。動きは付けない */
.usage-guide-scope .qa-guide__mypage-mock--days .qa-guide__meta-days,
.usage-guide-scope .qa-guide__mypage-mock--tickets .qa-guide__meta-tickets { opacity: 1; }
.usage-guide-scope .qa-guide__mypage-mock--tickets .mp-profile-card__until { opacity: 0.4; }
/* 画面が狭いときはカードの文字を一段小さくして、1行に収まるようにする */
@media (max-width: 420px) {
    .usage-guide-scope .qa-guide__mypage-mock .mp-profile-card__meta { gap: 6px; font-size: 12px; }
    .usage-guide-scope .qa-guide__mypage-mock .mp-profile-card__meta strong { font-size: 17px; }
}
.qa-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.qa-tabs__link {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-4);
    border-bottom: 2px solid transparent;
}
.qa-tabs__link--active {
    color: var(--brand);
    border-bottom-color: var(--accent);
}
.qa-list { display: flex; flex-direction: column; gap: 8px; }
/* 質問詳細の質問カード（一覧側はトップと共通の recent-reviews__card を使う） */
.qa-item__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
/* 質問詳細だけは、プレチケ枚数と質問者を左に寄せて並べる（一覧カードと同じ並び） */
.qa-item__head--left { justify-content: flex-start; flex-wrap: wrap; }
/* 質問カードの女の子ブロック（写真＋名前＋プロフィール。「女の子を探す」のカードと同じ並び） */
.qa-item__girl-head { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.recent-reviews__card .qa-item__girl-head { margin: 6px 0; }
/* プレチケ枚数のバッジ行と本文の間が女の子ブロックぶん離れて見えるので、上下の余白を詰める */
.qa-card .recent-reviews__meta { margin-bottom: 4px; }
.qa-card .recent-reviews__body { margin-top: 2px; }
/* 回答者名のリンク（教えて！マイブロの回答）。色・下線はファイル末尾の名前リンク統一ルールで指定 */
.qa-card__asker { font-size: 11px; color: var(--ink-5); }
/* 質問カード下段。左に質問者、右に回答期限（回答済みは期限が無いので質問者だけ残る） */
.qa-card__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--ink-5);
}
.qa-card__foot-deadline { margin-left: auto; }
.qa-card__foot-asker { display: inline-flex; align-items: center; gap: 4px; }
/* カード全面を覆うリンク。質問者名だけは別リンクとして上に重ねる */
.qa-card { position: relative; transition: border-color 0.15s, box-shadow 0.15s; }
.qa-card:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(0,49,83,0.12); }
.qa-card__overlay { position: absolute; inset: 0; border-radius: 14px; z-index: 1; }
/* プレチケの多い順に並ぶ一覧の上位3件を目立たせる。枚数の絶対値ではなく順位で決まる
   （1位＝金の枠＋光の走り / 2〜3位＝金の枠 / 4位以降は通常）。
   大きさの差は控えめにして、装飾で差をつける */
.qa-card.qa-card--rank1 {
    padding: 22px 22px;
    /* 順位は枠線の太さでも示す（1位3px / 2〜3位2px / 4位以降1px） */
    border: 3px solid var(--accent);
    overflow: hidden;
    /* 影がゆっくり強弱して、止まっていても目に入る */
    animation: qa-card-glow 3s ease-in-out infinite;
}
@keyframes qa-card-glow {
    0%, 100% { box-shadow: 0 4px 16px rgba(246, 185, 59, 0.35); }
    50%      { box-shadow: 0 8px 28px rgba(246, 185, 59, 0.65); }
}
/* 斜めの光が一定間隔で横切る。装飾なのでクリックは拾わない */
.qa-card--rank1::after {
    content: "";
    position: absolute;
    top: -60%;
    left: 0;
    width: 55%;
    height: 220%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-160%) rotate(18deg);
    animation: qa-card-shine 4.5s ease-in-out infinite;
}
@keyframes qa-card-shine {
    0%   { transform: translateX(-160%) rotate(18deg); }
    /* 走るのは前半だけ。残りは待ち時間 */
    35%  { transform: translateX(330%) rotate(18deg); }
    100% { transform: translateX(330%) rotate(18deg); }
}
.qa-card.qa-card--rank2 {
    padding: 20px 20px;
    border: 2px solid #fcd34d;
    box-shadow: 0 3px 12px rgba(246, 185, 59, 0.25);
}
/* 大きさの差は写真と本文だけ、控えめに（通常は avatar--lg の64px） */
.qa-card--rank1 .avatar--lg,
.qa-card--rank1 .avatar-ph--lg { width: 84px; height: 84px; }
.qa-card--rank2 .avatar--lg,
.qa-card--rank2 .avatar-ph--lg { width: 72px; height: 72px; }
.qa-card--rank1 .identity-tag__nick { font-size: 16px; }
.qa-card--rank2 .identity-tag__nick { font-size: 15px; }
/* 本文プレビューの基本サイズは口コミカード本文（.review-card__body-text）と同じフォント・
   サイズに揃える。ランク1・2（プレチケ上位）だけ、このすぐ下の2行で拡大・太字にして目立たせる
   （後ろに書くことでここより優先させている）。
   常に2行ぶんの高さにする。文字数で切ると幅次第で1〜3行と変わり、カードの高さが
   本文の量で動いてしまうため */
.qa-card .recent-reviews__body {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-3);
    line-height: 1.8;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    height: calc(1.8em * 2);
    overflow-wrap: anywhere;
}
.qa-card--rank1 .recent-reviews__body { font-size: 15px; font-weight: 700; }
.qa-card--rank2 .recent-reviews__body { font-size: 14px; font-weight: 700; }
/* プレチケのバッジは大きさを変えず、色だけ金に寄せる */
.qa-card--rank1 .badge--count {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    color: #92400e;
    font-weight: 700;
}
.qa-card--rank2 .badge--count { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
@media (prefers-reduced-motion: reduce) {
    .qa-card.qa-card--rank1 { animation: none; box-shadow: 0 6px 22px rgba(246, 185, 59, 0.42); }
    .qa-card--rank1::after { animation: none; opacity: 0; }
}
@media (max-width: 640px) {
    .qa-card.qa-card--rank1 { padding: 18px 16px; }
    .qa-card.qa-card--rank2 { padding: 16px 16px; }
    .qa-card--rank1 .avatar--lg,
    .qa-card--rank1 .avatar-ph--lg { width: 76px; height: 76px; }
    .qa-card--rank2 .avatar--lg,
    .qa-card--rank2 .avatar-ph--lg { width: 68px; height: 68px; }
}
/* 質問カード・回答カードの下段（左に補足、右に日付） */
.qa-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-4);
}
.qa-card-foot__date { margin-left: auto; color: var(--ink-5); }
/* 質問カード下段の質問者（左）と回答期限（右）。期限は日付と同じ位置に出す */
.qa-card-foot__asker { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-4); }
.qa-card-foot__deadline { margin-left: auto; }

/* 質問カード（回答カードと並べても埋もれないよう、左に色帯を入れる）。
   .form-card は同じ詳細度の gap:16px を後方で定義しているため、.form-card.qa-question-card
   の2クラス指定で詳細度を上げて確実に上書きする（そうしないとアイコンと本文の間が空きすぎる） */
.form-card.qa-question-card {
    border-left: 4px solid var(--accent);
    box-shadow: 0 2px 10px rgba(0,49,83,0.08);
    padding: 14px 16px;
    gap: 0;
}
.qa-question-card__body {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ink-3);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* === 教えて！マイブロ: 回答カード ====================== */
.qa-answer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
/* 回答カードの間隔（口コミのコメント一覧 .cm-list とは別に詰める） */
.qa-answer-list { display: flex; flex-direction: column; gap: 8px; }
/* マイページ「投稿した質問」。フロントと同じ質問カードの下に、その質問への回答をぶら下げる。
   質問どうしの間は広めに取って、どの回答がどの質問のものか分かるようにする */
.mypage-qa-list { display: flex; flex-direction: column; gap: 24px; }
/* 質問と、その質問への回答は1つの箱に入れる。バラバラに置くと、
   質問がいくつも並んでいるように見えて対応関係が読めなくなるため */
.mypage-qa-entry {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
/* 中の質問カードは外側の箱に溶かす（枠の二重線をなくす） */
.mypage-qa-entry .qa-card,
.mypage-qa-entry .qa-card:hover {
    border: none;
    border-radius: 0;
    box-shadow: none;
}
/* 回答側は地色を変えて、同じ箱の中の続きであることを示す */
.mypage-qa-entry .qa-answer-list--best,
.mypage-qa-entry .qa-answers-fold {
    margin: 0;
    background: #f8fafc;
    border: none;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
}
.mypage-qa-entry .qa-answer-list--best { padding: 14px 16px 6px; }
.mypage-qa-entry .qa-answers-fold { padding: 8px 16px; }
/* ベストアンサーの下に出す「他の回答を見る」。回答と同じ地色の上に置いて箱の一部にする */
.mypage-qa-entry .qa-other-answers {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0 16px 14px;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    color: var(--link);
}
.mypage-qa-entry .qa-other-answers .material-icons { font-size: 16px; }
/* 回答のしまい方は口コミカードのコメント欄に合わせる（白い箱＋「回答（N件）」＋キャレット） */
.qa-answers-fold {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
}
.qa-answers-fold[open] { padding-bottom: 12px; }
.qa-answers-fold__btn {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.qa-answers-fold__btn::-webkit-details-marker { display: none; }
.qa-answers-fold__caret {
    /* 全角カッコ「）」の右の字間ぶん左へ寄せて、見出しと一体に見せる */
    margin-left: -6px;
    font-size: 24px;
    line-height: 1;
    color: var(--accent);
    transform: rotate(-90deg);
    transition: transform 0.15s;
}
.qa-answers-fold[open] .qa-answers-fold__caret { transform: none; }
.qa-answers-fold .qa-answer-list { margin-top: 8px; }
/* 回答ごと畳むページでは返信を開いたままにし、見出しは件数のラベルとして残す */
.qa-reply-thread--flat > .qa-reply-thread__btn { pointer-events: none; }
.qa-reply-thread--flat > .qa-reply-thread__btn .qa-reply-thread__chevron { display: none; }
/* 女の子カードと質問カードの間 */
.qa-girl-card-wrap { margin-bottom: 8px; }
/* 回答フォーム・ベストアンサー選定などのカード */
.qa-form-card { margin-top: 12px; padding: 16px; gap: 10px; }
.qa-answer--best {
    border-color: #fcd34d;
    background: linear-gradient(180deg, #fffbeb 0%, var(--surface) 60%);
}
.qa-answer__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.qa-answer__who {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    color: var(--ink-4);
    overflow-wrap: anywhere;
}
.qa-answer__best {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    color: #92400e;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}
.qa-answer__best .material-icons { font-size: 14px; }
.qa-answer__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-2);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* 回答への返信スレッド（1段のみ。回答カードの中に左罫線でぶら下げる） */
/* 溜まったときのために details で折りたためる。開閉ボタンは件数表示を兼ねる */
.qa-reply-thread { margin-top: 8px; }
.qa-reply-thread__btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: fit-content;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-4);
    cursor: pointer;
    list-style: none;
}
.qa-reply-thread__btn::-webkit-details-marker { display: none; }
.qa-reply-thread__btn:hover { color: var(--brand); }
.qa-reply-thread__chevron {
    font-size: 16px;
    transition: transform 0.15s;
}
.qa-reply-thread[open] .qa-reply-thread__chevron { transform: rotate(180deg); }
.qa-reply-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-left: 10px;
    border-left: 2px solid var(--border);
}
.qa-reply__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    font-size: 11px;
    color: var(--ink-4);
    overflow-wrap: anywhere;
}
.qa-reply__body {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-2);
    overflow-wrap: anywhere;
}
/* 返信フォームの開閉（details/summary。JSなし）。ボタンは右寄せ */
.qa-reply-toggle { margin-top: 8px; text-align: right; }
.qa-reply-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
}
.qa-reply-toggle__btn::-webkit-details-marker { display: none; }
.qa-reply-toggle__btn:hover { color: var(--brand); border-color: var(--brand-light); }
.qa-reply-toggle__btn .material-icons { font-size: 14px; }
.qa-reply-toggle[open] .qa-reply-toggle__btn { margin-bottom: 8px; }
/* フォーム側は右寄せを解除して通常の左揃えに戻す */
.qa-reply-form { margin: 0; text-align: left; }

/* 質問詳細: 女の子カードと質問カードの間に出す「この子の特徴」
   （見出し・本文は女の子詳細の profile-card__features-* をそのまま使う） */
.qa-features {
    margin-bottom: 8px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}
/* 質問詳細では本文を読ませたいので、女の子詳細（10px）より大きくする */
.qa-features .profile-card__features-body { margin-top: 4px; font-size: 13px; }

/* お問い合わせ・削除依頼フォーム。
   クラスは以前から書かれていたが定義が無く、「必須」バッジが
   ラベルに食い込んだままになっていたので、ここでまとめて定義する */
.contact-form .form-label { display: flex; align-items: center; gap: 6px; }
.form-badge-required {
    display: inline-block;
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 3px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
}
.contact-notice {
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--ink-4);
    line-height: 1.7;
}
.contact-notice p { margin: 0; }
.contact-form__alert {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 13px;
}
.contact-form__error { margin: 4px 0 0; font-size: 12px; color: #dc2626; }
.contact-complete__back { margin-top: 24px; text-align: center; }

/* ラジオボタンの横並び（削除依頼フォームの申告者区分） */
.form-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 4px;
}
.form-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--ink-2);
    cursor: pointer;
}
.form-radio input { flex-shrink: 0; margin: 0; }

/* 入力欄の補足説明 */
.form-note {
    margin: 2px 0 6px;
    font-size: 12px;
    color: var(--ink-4);
    line-height: 1.6;
}

/* 「いない場合はこちら」等の導線。検索ボタンと同じ見た目にするため、
   .qa-register-hint a の色指定を受けないよう別のラッパーにしている */
.qa-register-action {
    margin-top: 16px;
    text-align: center;
}
/* .empty-state 内に置くと `.empty-state a`（アクセント色・13px）に負けて
   オレンジ地にオレンジ文字＝文字が消えるので、ここで打ち消す */
.qa-register-action .btn--search-lg { text-decoration: none; color: #fff; font-size: 14px; }

/* === 「この女性ではないですか？」の候補ボックス ====================
   女の子の新規登録（/girls/register.php）と同じ見た目。
   質問作成（/qa/new.php）では候補を押すとその子への質問へ進む */
.dup-box {
    margin-top: 16px;
    padding: 16px;
    border-radius: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
}
.dup-box__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 10px;
}
.dup-box__title-icon { font-size: 16px; }
.dup-box__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
/* 候補は「女の子を探す」と同じ girl-card を使う。黄色い枠の中に置くので枠線だけ寄せる */
.dup-box .girl-card {
    border-color: #fde68a;
    box-shadow: none;
}
.dup-box a.girl-card:hover { background: #fef9c3; }
.dup-box__dismiss {
    font-size: 13px;
    color: var(--ink-4);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

/* 見た目を変えずにクリックできるようにするリンク（色・装飾は親から継承） */
a.plain-link { color: inherit; text-decoration: none; }

/* 質問カード内の女の子名リンク（全面リンクより上に置く）。
   ホバーでの下線は出さない（リンクであることが分かれば十分という方針） */
a.qa-item__girl-link { position: relative; z-index: 2; color: inherit; text-decoration: none; }
/* 質問者名のリンク（全面リンクより上に置く。色・下線はファイル末尾の名前リンク統一ルールで指定） */
a.qa-card__asker-link { position: relative; z-index: 2; }
/* 質問カード内の女の子写真。クリックで拡大するため、カード全面リンクより上に置く */
img.qa-item__girl-photo { position: relative; z-index: 2; }
/* 質問作成の対象の女の子。見出しを外したぶん、誰宛かが一目で分かるよう写真を大きくする
   （一覧カードの76pxより一段大きい96px） */
.qa-target-girl .avatar--lg,
.qa-target-girl .avatar-ph--lg { width: 96px; height: 96px; }

.app-card__actions .btn { flex: 1; padding: 10px 0; }

/* === Profile Card ======================================= */
.profile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.profile-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 24px;
    background: linear-gradient(135deg, #0a3d62 0%, #38ada9 100%);
    color: #fff;
}
.profile-card__top .profile-card__header { flex: 1; min-width: 0; margin-left: -8px; }
.profile-card__memo {
    flex: 0 0 auto;
    align-self: center;
    margin-right: -8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.8);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.profile-card__memo:hover { background: rgba(255,255,255,0.28); border-color: #fff; }
/* 帯の右端に置く女の子ページへの導線。ボタンと同じ見た目にするためクラスを共用する。
   一覧のカードでは名前・おすすめと同じ行に収めたいので、本体より小さくする */
.profile-card__toplink {
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 10px;
    font-size: 11px;
}
.profile-card__toplink:hover { color: #fff; }
/* アプリ名のピルが名前より広いとき、名前を左に寄せると間が空いて見えるので中央に置く */
.profile-card--compact .profile-card__identity-list .identity-tag,
.profile-card--compact .profile-card__identity-list .identity-tag--single { align-items: center; }
/* 帯の左右とも、本体が持っている負のマージンは打ち消して端との余白を揃える */
.profile-card--compact .profile-card__top .profile-card__header { margin-left: 0; }
.profile-card--compact .profile-card__toplink { margin-right: 0; }
/* カードの中身の余白。一覧なので本体より詰める */
.profile-card--compact .profile-card__columns { padding: 14px 16px 12px; gap: 14px; }
/* 3アプリ分の名前＋おすすめが折り返さないよう、帯の中身を詰める */
.profile-card--compact .profile-card__top { gap: 8px; }
.profile-card--compact .profile-card__header { gap: 6px; }
@media (max-width: 640px) {
    .profile-card__toplink { padding: 3px 6px; font-size: 10px; }
    .profile-card--compact .profile-card__top { gap: 5px; padding: 8px 12px; }
    .profile-card--compact .profile-card__columns { padding: 10px 12px 10px; gap: 12px; }
    .profile-card--compact .profile-card__header { gap: 3px; }
    .profile-card--compact .badge--recommended { padding: 1px 4px; font-size: 10px; }
    /* 名前の組も詰める。3アプリ＋おすすめ＋ボタンを1行に載せるため */
    .profile-card--compact .profile-card__identity-list { gap: 4px; }
    .profile-card--compact .profile-card__identity-list .identity-tag__app { padding: 1px 5px; }
    .profile-card--compact .profile-card__identity-list .identity-tag__nick { font-size: 14px; }
}
.profile-card__top .profile-card__attrs {
    color: rgba(255,255,255,0.92);
    font-size: 17px;
}
.profile-card__intro-block {
    margin: 0 0 14px;
}
.profile-card__intro {
    font-size: 10px;
    color: var(--ink-2);
    line-height: 1.8;
    margin: 0;
    white-space: normal;
    word-break: break-word;
}
.profile-card__intro.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}
.profile-card__intro-more {
    margin-top: 3px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
}
.profile-card__columns {
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding: 20px 24px 16px 24px;
}
.profile-card__right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.profile-card__features {
    min-width: 0;
}
/* 一覧なので写真は小さめ。写真枠の高さ＝カードの高さなので、幅を絞ると縦も縮む */
.profile-card--compact .profile-gallery { width: 28%; }
/* 本体は 9:14 の縦長だが、一覧では縦を詰めたいので正方形の枠にして写真は切り抜いて収める。
   overflow を切らないと中の画像の実寸が枠を押し広げて aspect-ratio が効かない */
.profile-card--compact .profile-gallery__main { aspect-ratio: 1 / 1; overflow: hidden; }
/* 枠いっぱいに敷いて、中の写真が枠の高さを決めないようにする（正方形を保つため） */
.profile-card--compact .profile-gallery__fit { position: absolute; inset: 0; width: 100%; height: 100%; }
.profile-card--compact .profile-gallery__main .profile-card__photo {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 10px;
}
@media (max-width: 640px) {
    .profile-card--compact .profile-gallery { width: 30%; }
}
/* 自分だけメモ一覧（mypage/memos.php）のカード。
   右カラムを絶対配置にして高さの計算から外し、行の高さを写真1枚ぶんに固定する。
   はみ出したぶんは切り、JS が is-truncated を付けたときだけ末尾に「…」を出す */
.profile-card--compact .profile-card__right {
    position: relative;
}
.profile-card--compact .profile-card__features {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
/* 切れた行が下端に半端に残るので、あふれているカードだけ下端をフェードさせて隠す */
.profile-card--compact .profile-card__right.is-truncated .profile-card__features {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}
/* 畳まれているカードは押せる。押している間だけ手のひらカーソルにする */
.profile-card--compact .profile-card__right.is-truncated,
.profile-card--compact .profile-card__right.is-expanded {
    cursor: pointer;
}
.profile-card--compact .profile-card__right.is-truncated::after {
    content: '…';
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 28px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-3);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 60%);
}
/* 開いた状態。絶対配置をやめて高さの計算に戻すと、カードが本文の分だけ伸びる */
.profile-card--compact .profile-card__right.is-expanded .profile-card__features {
    position: static;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}
.profile-card--compact .profile-card__right.is-expanded::after { content: none; }
.profile-card__features-heading {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    padding: 2px 3px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    margin-bottom: 0;
}
.profile-card__features-body {
    font-size: 10px;
    color: var(--ink-2);
    line-height: 1.7;
    white-space: normal;
    word-break: break-word;
}

.profile-card__features-foot {
    display: flex;
    justify-content: center;
    margin-top: 0;
}
.profile-card__features-body + .profile-card__features-foot { margin-top: 2px; }
/* 「追記する」の直後に自己紹介の見出しが続く場合は、ブロックの切れ目として余白を空ける */
.profile-card__features-foot + .profile-card__features-heading { margin-top: 16px; }
.profile-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 12px;
}
.profile-card__append {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    background: var(--accent);
    border: 1.5px solid var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    font-family: inherit;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.profile-card__append:hover { background: #fff; color: var(--accent); }
.profile-card__photo {
    width: 200px;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    flex-shrink: 0;
}

.profile-card__photo-ph .material-icons { color: #94a3b8; }
.profile-gallery {
    width: 56%;
    max-width: 100%;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* 矢印を画像に重ねるため相対配置。画像は列幅いっぱい */
.profile-gallery__stage {
    position: relative;
}
.profile-gallery--solo { padding-left: 0; }
/* メイン画像は固定比率の枠にして、切らず・伸ばさず中央に収める（画像切替でも枠サイズ＝矢印/サムネ位置は不変） */
.profile-gallery__main { position: relative; width: 100%; min-width: 0; aspect-ratio: 9 / 14; display: grid; place-items: center; }
/* 枠は固定比率のままだが、バッジは実際に描画された画像の端に付けたいので
   画像サイズにぴったり縮む入れ子を挟み、そこを配置基準にする */
.profile-gallery__fit { position: relative; max-width: 100%; max-height: 100%; line-height: 0; }

/* メイン画像の右下に重ねる「教えて！マイブロ」導線。バッジの塗り・枠・文字は SVG 側に含まれる */
.profile-gallery__ask {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    display: block;
    width: 36px;
    line-height: 0;
    filter: drop-shadow(0 2px 6px rgba(15, 25, 35, 0.25));
    transition: opacity 0.15s;
}
.profile-gallery__ask img {
    display: block;
    width: 100%;
    height: auto;
}
/* PCは表示領域に余裕があるのでバッジを2割大きくする */
@media (min-width: 641px) {
    .profile-gallery__ask { width: 42px; bottom: 10px; right: 10px; }
}
.profile-gallery__ask:hover { opacity: 0.85; }

.profile-gallery__main .profile-card__photo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
}
/* 前後ナビ: 画像の上に半透明（約50%）でオーバーレイ */
.profile-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: #fff;
    font-size: 17px;
    line-height: 1;
    -webkit-text-stroke: 1px rgba(0,0,0,0.4);
    text-shadow: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity .15s;
}
.profile-gallery__nav--prev { left: -6px; }
.profile-gallery__nav--next { right: -6px; }
.profile-gallery__nav:hover { opacity: 0.8; }
.profile-gallery__nav[hidden] { display: flex; visibility: hidden; }
.profile-gallery__thumbs {
    display: grid;
    /* 3列固定。最大6枚なので2行に収まる */
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 4px;
    padding-bottom: 2px;
}
.profile-gallery__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: none;
    opacity: 0.7;
    transition: opacity .15s, border-color .15s;
}
.profile-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-gallery__thumb:hover { opacity: 1; }
.profile-gallery__thumb.is-active { opacity: 1; border-color: var(--brand); }
.profile-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.profile-card__name {
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.profile-card__attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 8px;
}
.profile-card__desc { font-size: 13px; color: var(--ink-3); line-height: 1.7; margin-top: 8px; }

.profile-card__identity-list { display: flex; flex-wrap: wrap; gap: 8px; }
.identity-tag {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 16px;
    background: #e5f0f8;
    border: 1px solid #b0ccdf;
    border-radius: 12px;
    font-size: 13px;
    color: #003153;
    line-height: 1.3;
    flex-shrink: 0;
}
.identity-tag__app  { font-weight: 700; font-size: 9px; color: var(--ink-5); }
.identity-tag__nick { color: var(--brand); font-weight: 700; }
/* プロフィールカードヘッダー帯内（濃色グラデーション上）: アプリ名は半透明ピル、名前は白テキスト */
.profile-card__identity-list .identity-tag {
    background: transparent;
    border: none;
    padding: 0;
    gap: 3px;
    align-items: flex-start;
}
.profile-card__identity-list .identity-tag__app {
    background: transparent;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.45);
    padding: 1px 9px;
    border-radius: 8px;
    font-size: 9px;
}
.profile-card__identity-list .identity-tag--single { align-items: flex-start; }
.profile-card__identity-list .identity-tag--single .identity-tag__app { font-size: 11px; }
.profile-card__identity-list .identity-tag__nick { color: #ffffff; font-size: 15px; }
/* 一覧カード: 詳細ヘッダーと同じ構成（枠線ピル＋大きめニックネーム）を白背景向けの濃色で */
.girl-card__identity-list .identity-tag {
    background: transparent;
    border: none;
    padding: 0;
    gap: 3px;
    align-items: flex-start;
}
.girl-card__identity-list .identity-tag__app {
    background: transparent;
    color: var(--ink-5);
    border: 1px solid var(--border);
    padding: 1px 9px;
    border-radius: 8px;
    font-size: 9px;
}
.girl-card__identity-list .identity-tag__nick { color: var(--ink); font-size: 17px; }
.girl-card__identity-list .identity-tag--more {
    align-self: center;
    color: var(--ink-4);
    font-size: 11px;
    font-weight: 700;
}

/* === Review List ======================================== */
.review-list { display: flex; flex-direction: column; gap: 12px; }
/* 投票バー付きのカード（アプリ詳細）。カード・投票バー・コメント欄を1つの塊にして、
   一覧の gap が口コミの内側に入らないようにする（女の子ページの .rvblock と同じ詰め方） */
.review-cardgroup { display: flex; flex-direction: column; }

/* === Review Card ======================================== */
.review-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
/* アプリ詳細のカード下に置くコメント欄（.rvblock__cmarea を女の子ページと共有している）。
   .review-list の gap では口コミ同士の区切りと見分けが付かないので、カードに寄せて置く */
.review-card__cmarea {
    margin-top: -6px;
    padding: 0 4px;
}
/* 畳んだ状態は「コメント（N件）＋キャレット」の1行しか出ないので、そのぶん縦を詰める。
   女の子ページ（review_card_girl.php）は投稿フォームを常に出すので対象外 */
.review-card__cmarea .rvblock__cmarea { padding: 8px 12px; }
.review-card__cmarea .rvblock__comments { padding: 0 4px; }
.review-card__cmarea .rvblock__comments-title { margin: 0; }
.review-card__cmarea .cm-head-toggle__caret { font-size: 24px; }
/* 開いたときだけ見出しと中身（入力欄＋一覧）の間を空ける */
.review-card__cmarea .rvblock__cmfold:not([hidden]) { margin-top: 8px; }
/* 入力欄の下に一覧が続くときの間隔。見出しとの間は上の cmfold 側で確保している */
.review-card__cmarea .rvblock__compose + .rvblock__comments .cm-list:not([hidden]) { margin-top: 8px; }

.review-card__body {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.85;
    white-space: pre-wrap;
    margin: 0;
    padding: 16px 20px;
}
.review-card__photos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 20px 16px;
}
.review-card__photo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

/* === apps/detail ヘッダー周り ===========================
   アプリ名〜説明文〜下の要素の余白は、女の子を探す（.page-heading + .qa-intro）と
   同じ見え方に揃える。.qa-intro（includes/review_intro.php）は margin-top:-14px の
   前提で作られているため、.apps-detail-header 側も .page-heading と同じ
   margin-bottom:24px にして、正味の余白（24-14=10px）を一致させている */
.page-padded.apps-detail-page { padding: 12px 24px 40px; }
.apps-detail-header { margin-bottom: 24px; }
.apps-detail-title {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.apps-detail-desc { font-size: 13px; color: #1e293b; line-height: 1.6; }
.apps-detail-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

/* Review card (list view - apps/detail style)
   PC/スマホで別デザイン。DOMは2枚（.review-card--pc / .review-card--mobile）を
   両方出力し、画面幅で display 切り替え。共有クラス名は誤爆しないよう
   それぞれ .review-card--pc / .review-card--mobile を祖先に付けてスコープする */
.review-card--mobile { display: none; }
.review-card--pc { display: block; }
@media (max-width: 640px) {
    .review-card--mobile { display: block; }
    .review-card--pc { display: none; }
    /* スマホではボタン行の余白を詰めてスクロール量を減らす */
    .apps-detail-actions { margin-bottom: 8px; gap: 8px; }
    .page-padded.apps-detail-page { padding: 8px 8px 24px; }
}
.review-card__footer-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--ink-4);
}
.review-card__footer-stat .material-icons { font-size: 15px; }

/* 投稿日はフッター罫線のすぐ上、カード右端に置く（PC/スマホ共通） */
.review-card__date-row {
    text-align: right;
    color: var(--ink-5);
}

/* --- PC版: スマホ版と同じ構成のまま、画像・文字・余白だけ PC 用に広げる --- */
.review-card--pc .review-card__top {
    display: flex;
    gap: 16px;
    padding: 16px 20px 4px;
}
.review-card--pc .review-card__thumb-link { display: block; flex-shrink: 0; }
.review-card--pc .review-card__thumb-lg {
    display: block;
    width: 118px;
    height: 118px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
.review-card--pc .review-card__thumb-lg-ph {
    width: 118px;
    height: 118px;
    border-radius: 10px;
    flex-shrink: 0;
    background: #f1f5f9;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-card--pc .review-card__thumb-lg-ph .material-icons { color: #cbd5e1; }
/* 名前群・年齢身長は画像の高さに対して上下中央に置く */
.review-card--pc .review-card__top-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.review-card--pc .girl-card__area { margin-top: 2px; font-size: 13px; }
.review-card--pc .review-card__top-right .identity-tag__nick { font-size: 20px; }
.review-card--pc .review-card__top-right .girl-card__name { font-size: 22px; }
/* タイトルは画像行の下に全幅で置く（本文と左端を揃える） */
.review-card--pc .review-card__title-row {
    padding: 8px 20px 4px;
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.4;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.review-card--pc .review-card__body-row {
    display: block;
    padding: 0 20px 8px;
}
.review-card--pc .review-card__body-text { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-3); line-height: 1.8; margin: 0; }
.review-card--pc a.review-card__body-row--link { text-decoration: none; color: inherit; transition: background 0.15s; }
.review-card--pc a.review-card__body-row--link:hover { background: #f8fafc; }

/* アプリ名・女の子名は行き先が別なので個別の a にしてある。文字色と下線は元の見た目のまま */
.review-card__top-right a.identity-tag__app,
.review-card__top-right a.identity-tag__nick,
.review-card__top-right a.girl-card__name { color: inherit; text-decoration: none; }

/* 本文を切り詰めたときの「続きを読む」（モザイクを出さないカード用） */
.review-card__readmore-row { padding: 0 20px 8px; text-align: right; }
.review-card__readmore { font-size: 12px; font-weight: 600; color: var(--accent); }
.review-card--mobile .review-card__readmore-row { padding: 0 12px 6px; }

/* モザイク時に出す「続きを読む」（トップページ用）。カットした本文の末尾にそのまま
   続けて出すので、固定位置ではなく行の折り返しに合わせて自然に流れる */
.review-card__readmore-inline { margin-left: 4px; font-weight: 600; color: var(--accent); white-space: nowrap; }

/* タイトル行は flex（右端に点数）。既定の min-width:auto のままだと長いタイトルが縮まず、
   スマホ幅で点数を押し出して横スクロールが出るので縮めるようにしておく */
.review-card__title-text,
.rv2__title { min-width: 0; overflow: hidden; }

/* 女の子の「特徴」を隠すモザイク。本文の長さ（未記入かどうかも）に関わらず常に3行分出す。
   .profile-card__features-body の中に置くので、高さの em は特徴本文の文字サイズに追従する */
.girl-feature-mask {
    display: block;
    width: 100%;
    /* 素材の幅（700px）を超えると横に繰り返して継ぎ目が見えるので、そこで止める */
    max-width: 700px;
    height: 5.1em; /* line-height 1.7 × 3行 */
    background-image: url('/common/img/mosaic01_pc.png');
    background-repeat: repeat-x;
    /* 元画像は5行組み。高さの5/3倍に拡大すると3行分がちょうど収まる */
    background-size: auto 166.667%;
    background-position: center;
    border-radius: 3px;
}

/* 本文の続きを隠すモザイク画像（一番小さい mosaic01 を全カード共通で使う） */
.review-card__mosaic-wrap {
    position: relative;
    margin-top: 4px;
}
.review-card__mosaic {
    display: block;
    max-width: 100%;
    height: auto;
}
/* ボタン周りだけ白を重ねて明るくし、文字が読みやすくなるようにする */
.review-card__mosaic-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}
.review-card__unlock-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 10px 14px 10px 22px;
    border-radius: 999px;
    background: #ffffff;
    border: 1.5px solid var(--brand);
    color: var(--brand);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(15, 25, 35, 0.18);
    transition: background 0.15s, color 0.15s;
}
/* <a> と <button> の両方で使う（未ログインはログインへのリンク、ログイン済みは案内を開くボタン） */
.review-card__unlock-btn { font-family: inherit; cursor: pointer; }
.review-card__unlock-btn:hover { background: var(--brand); color: #ffffff; }
.review-card__unlock-btn .material-icons { font-size: 18px; }
.review-card--pc .review-card__mosaic-wrap { padding: 0 20px 8px; }
.review-card--pc .review-card__photos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 20px 8px;
}
.review-card--pc .review-card__photo {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.review-card--pc .review-card__date-row { padding: 0 20px 8px; font-size: 12px; }
.review-card--pc .review-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 20px 12px;
    border-top: 1px solid var(--border-light);
    background: #fafafa;
}
.review-card--pc .review-card__footer-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.review-card--pc .review-card__footer-author {
    font-size: 13px;
    color: var(--ink-3);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-card--pc .review-card__footer-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.review-card--pc .review-card__footer-flag {
    background: none;
    border: none;
    padding: 0 0 0 2px;
    cursor: pointer;
    color: var(--ink-5);
    line-height: 1;
    flex-shrink: 0;
}
.review-card--pc .review-card__footer-flag .material-icons { font-size: 18px; }

/* --- スマホ版（新デザイン） ---
   写真は右カラムと同じflex行。名前群はタイトルと年齢身長の間に挟み、
   本文はこのflex行のすぐ下から全幅で始まる */
.review-card--mobile .review-card__top {
    display: flex;
    gap: 8px;
    padding: 10px 12px 2px 10px;
}
.review-card--mobile .review-card__thumb-link { display: block; flex-shrink: 0; }
.review-card--mobile .review-card__thumb-lg {
    display: block;
    width: 78px;
    height: 78px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
.review-card--mobile .review-card__thumb-lg-ph {
    width: 78px;
    height: 78px;
    border-radius: 10px;
    flex-shrink: 0;
    background: #f1f5f9;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-card--mobile .review-card__top-right { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; justify-content: center; }
/* タイトルは画像行の下に全幅で置く（本文と左端を揃える） */
.review-card--mobile .review-card__title-row {
    padding: 6px 12px 2px;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.4;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
/* 名前群はタイトルと同じ列にあるので、写真幅ではなく列の残り幅で1行に収める */
.review-card--mobile .review-card__top-right .girl-card__identity-list { flex-wrap: wrap; }
.review-card--mobile .review-card__top-right .identity-tag__app { font-size: 9px; padding: 1px 6px; }
.review-card--mobile .review-card__top-right .identity-tag__nick { font-size: 16px; }
.review-card--mobile .review-card__top-right .girl-card__name { font-size: 19px; }
/* <p>タグのデフォルトmargin-topを打ち消す */
.review-card--mobile .girl-card__area { margin-top: 2px; }
.review-card--mobile .review-card__body-row {
    display: block;
    padding: 0 12px 4px 12px;
}
.review-card--mobile .review-card__body-text { flex: 1; font-size: 13px; color: var(--ink-3); line-height: 1.6; margin: 0; }
.review-card--mobile a.review-card__body-row--link { text-decoration: none; color: inherit; transition: background 0.15s; }
.review-card--mobile a.review-card__body-row--link:hover { background: #f8fafc; }
.review-card--mobile .review-card__mosaic-wrap { padding: 0 12px 6px; }
.review-card--mobile .review-card__unlock-btn { padding: 8px 12px 8px 18px; font-size: 13px; }
.review-card--mobile .review-card__photos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 12px 6px 12px;
}
.review-card--mobile .review-card__photo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.review-card--mobile .review-card__date-row { padding: 0 12px 5px; font-size: 11px; }
.review-card--mobile .review-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px 7px;
    border-top: 1px solid var(--border-light);
    background: #fafafa;
}
.review-card--mobile .review-card__footer-author-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.review-card--mobile .review-card__footer-author {
    font-size: 11px;
    color: var(--ink-3);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-card--mobile .review-card__footer-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.review-card--mobile .review-card__footer-flag {
    background: none;
    border: none;
    padding: 0 0 0 2px;
    cursor: pointer;
    color: var(--ink-5);
    line-height: 1;
    flex-shrink: 0;
}
.review-card--mobile .review-card__footer-flag .material-icons { font-size: 16px; }
.review-card--mobile .review-card__footer-stat {
    font-size: 11px;
    gap: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}
.review-card--mobile .review-card__footer-stat .material-icons { font-size: 14px; }

/* === Review Card v2 (wireframe layout) ================== */
.rv2 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    /* 固定ヘッダー分だけ余白をとり、#review-<ID> アンカー遷移時に隠れないように */
    scroll-margin-top: calc(var(--header-h) + 16px);
}
.rv2__inner {
    display: flex;
    gap: 16px;
    padding: 20px;
}

.rv2__thumb-ph .material-icons { font-size: 32px; color: #cbd5e1; }

.rv2__right {
    flex: 1;
    min-width: 0;
}
.rv2__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.rv2__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
}
/* 評価（100点満点）。投稿者本人の採点なので、運営のランクとは別物として控えめに置く。
   タイトルが長いときに点数のほうが折り返して潰れないよう縮小させない */
.review-score {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-4);
    white-space: nowrap;
}
/* 数字だけ色とサイズを変えて拾いやすくする。「評価」「点」は周りに馴染ませたままにする */
.review-score__value {
    margin: 0 3px;
    font-size: 18px;
    color: #e05c5c;
    font-variant-numeric: tabular-nums;
}
.rv2__date {
    font-size: 12px;
    color: var(--ink-5);
    white-space: nowrap;
    flex-shrink: 0;
}

.rv2__body {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.8;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.rv2__mosaic {
    display: block;
    margin-top: 8px;
    line-height: 0;
}
.rv2__mosaic-img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* === 口コミカードのバッジ行（includes/review_badges.php） ==========
   要注意・事実認証・プレミアムをタイトルの上に1行で並べる。
   トップ／アプリページ／女の子ページの3種類のカードで共有する */
.review-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
/* トップ・アプリページのカードは各行が自前で左右余白を持つ作りなので、
   バッジ行もタイトル行と同じ位置に揃える */
.review-card--pc .review-badges {
    padding: 8px 20px 0;
    margin-bottom: 0;
}
.review-card--mobile .review-badges {
    padding: 6px 12px 0;
    margin-bottom: 0;
}
.review-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.review-badge__icon { font-size: 12px; vertical-align: -1px; }
.review-badge--caution {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
}
.review-badge--fact {
    background: #fde68a;
    border: 1px solid #d97706;
    color: #78350f;
}
.review-badge--premium {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    color: #92400e;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
    gap: 3px;
    padding: 2px 9px;
}

/* モザイク画像と解除ボタンの重ね合わせ用 */
.rv2__mosaic-wrap {
    position: relative;
}
.rv2__premium-lock {
    margin-top: 12px;
    text-align: center;
}
/* モザイクがあるときはその中央にボタンを重ねる */
.rv2__premium-lock--over {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    z-index: 1;
    width: max-content;
    max-width: 100%;
}
.rv2__premium-lock-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f59e0b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 8px;
    border: none;
    border-bottom: 3px solid #b45309;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s, transform 0.1s, border-bottom-width 0.1s;
}
.rv2__premium-lock-btn:hover { background: #d97706; color: #fff; }
.rv2__premium-lock-btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.rv2__photos {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 12px 20px 0 112px;
}
.rv2__photo {
    width: 66px;
    height: 66px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}
/* 女の子ページのカード（左サムネ廃止）: 写真を本文と左端で揃え、やや大きく表示 */
.rv2--girl .rv2__photos {
    padding-left: 20px;
}
.rv2--girl .rv2__photo {
    width: 96px;
    height: 96px;
}
/* 女の子ページのカード: コメントは折りたたまずスレッド表示のため見出しは非クリック */
.rv2--girl .comment-toggle {
    cursor: default;
}
.rv2__actions .review-card__footer-author { font-size: 13px; }
.rv2__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #fafafa;
    margin-top: 14px;
    padding: 10px 20px 14px;
    border-top: 1px solid var(--border);
}
/* 投稿者（左下）: 四角いプロフィール画像 + 2行テキスト */
.rv2__author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rv2__author-name { font-size: 12px; font-weight: 700; color: var(--ink-5); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* 女の子ページのカードのみ投稿者名を濃く（アプリ側カードには影響させない） */
.rv2--girl .rv2__author-name { color: var(--ink-3); }
.rv2--girl .rv2__author-suffix { color: var(--ink-4); }
/* 投稿者名（未ログイン時はログインモーダルを開くボタン）。名前リンクと同じ見た目にそろえる */
/* 未ログイン時の投稿者名（押すとログイン案内）。ログイン時のリンクと同じ見た目にそろえる */
button.rv2__author-name--modal { background: none; border: none; padding: 0; cursor: pointer; color: var(--link); text-decoration: none; font-size: inherit; font-family: inherit; }
button.rv2__author-name--modal:hover { opacity: 0.8; }

.rv2__action-btn .material-icons { font-size: 14px; }

/* === ログインモーダル ================================== */
.login-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.login-modal-overlay--show {
    display: flex;
}
.login-modal {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px 24px;
    width: 100%;
    max-width: 360px;
    margin: 0 16px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.login-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--ink-4);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.login-modal__close:hover { color: var(--ink); }
.login-modal__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 6px;
}
.login-modal__sub {
    font-size: 13px;
    color: var(--ink-4);
    margin: 0 0 18px;
}
/* モーダル内でログインに失敗したときの文言（ページを移動しないので、ここに出す） */
.login-modal__error {
    font-size: 13px;
    font-weight: 700;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 0 14px;
}
.login-modal__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.login-modal__input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    box-sizing: border-box;
    outline: none;
}
.login-modal__input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(29,161,242,0.2); }
.login-modal__btn {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 11px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin-top: 16px;
}
.login-modal__btn:hover { background: var(--accent-dark); }
.login-modal__divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 18px 0;
}
.login-modal__signup {
    text-align: center;
    font-size: 13px;
    color: var(--ink-4);
}
/* .site-main a:not([class]) の青（0,2,1）に負けるので、リンク自体のクラスまで含めて指定する */
.login-modal__signup a.login-modal__signup-link { color: var(--accent-dark); font-weight: 600; text-decoration: none; }

/* 「会員になるとできることまとめ」。新規登録の案内に添える補足なので、
   その右下に小さめの枠線ボタンとして置く。塗りにするとログインボタンと
   主従が分からなくなるため、枠線と薄い背景だけにとどめる */
.login-modal__guide {
    margin: 6px 0 0;
    text-align: right;
}
.login-modal__guide-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    max-width: 100%;
    background: rgba(246,185,59,0.12);
    color: var(--accent-dark);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.login-modal__guide-link .material-icons { font-size: 14px; }
.login-modal__guide-link:hover {
    background: rgba(246,185,59,0.22);
    border-color: var(--accent-dark);
}

/* === 転生・他アプリ報告モーダル ================================== */
.report-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.report-modal-overlay--show {
    display: flex;
}
.report-modal {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px 24px;
    width: 100%;
    max-width: 440px;
    margin: 0 16px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.report-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--ink-4);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.report-modal__close:hover { color: var(--ink); }
.report-modal__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 6px;
}
.report-modal__sub {
    font-size: 13px;
    color: var(--ink-4);
    margin: 0 0 18px;
}
.report-modal__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.report-modal__textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    box-sizing: border-box;
    outline: none;
}
.report-modal__textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(29,161,242,0.2); }
.report-modal__file {
    width: 100%;
    font-size: 13px;
    color: var(--ink-3);
}
.report-modal__note {
    font-size: 11px;
    color: var(--ink-4);
    margin: 4px 0 0;
}
.report-modal__btn {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 11px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin-top: 16px;
}
.report-modal__btn:hover { background: var(--accent-dark); }
#supplementModalOverlay .report-modal { padding: 20px 20px; }
#supplementModalOverlay .report-modal__title { margin: 0 0 10px; }
#supplementModalOverlay .report-modal__textarea { min-height: 180px; }
#supplementModalOverlay .report-modal__btn {
    width: auto;
    display: block;
    margin: 10px auto 0;
    padding: 8px 28px;
    border-radius: 999px;
}

/* 報告ボタン（プロフィールカード右下） */
.report-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ink-4);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3px 12px;
    background: none;
    cursor: pointer;
    white-space: nowrap;
}
.report-btn:hover { color: var(--accent); border-color: var(--accent); }

/* 報告送信結果の告知。帯にせず文字だけで出す（枠付きだと目立ちすぎて画面が騒がしくなるため） */
.report-alert {
    margin: 16px 0 0;
    font-size: 13px;
    font-weight: 600;
}
.report-alert--ok {
    color: #0f7b4d;
}
.report-alert--ng {
    color: #d32f2f;
}

@media (max-width: 640px) {
    .rv2__inner { gap: 12px; padding: 16px; }
    
    
    .rv2__photos { padding-left: 16px; padding-right: 16px; }
    .rv2__title { font-size: 18px; }
}

/* === Vote Buttons ======================================= */
.vote-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--border);
    background: none;
    cursor: pointer;
    color: var(--ink-3);
    font-family: inherit;
}
.vote-btn .material-icons { font-size: 16px; }

.vote-stat .material-icons { font-size: 16px; }

/* === Comments =========================================== */
.comment-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 10px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-4);
    list-style: none;
    font-family: inherit;
}
.comment-toggle .material-icons { font-size: 15px; }
.comment-list { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 12px; }

.comment-form { display: flex; flex-direction: column; gap: 8px; }
.comment-form textarea {
    width: 100%;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ink);
    resize: none;
    box-sizing: border-box;
}
.comment-form__submit {
    align-self: flex-end;
    padding: 5px 20px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
}

/* === 口コミブロック（女の子ページ）===============================
   カード（.rv2--girl）→ 投票バー → コメント投稿フォーム → コメント一覧 の縦積み */
/* #review-<slug> のアンカーは .rvblock に付くため、固定ヘッダー分の余白もここで確保する */
.rvblock { display: flex; flex-direction: column; margin-bottom: 12px; scroll-margin-top: calc(var(--header-h) + 16px); }

/* 投票バー（Good / Bad の大ボタン＋通報） */
.rvblock__vote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
}
.rvblock__vote-btns { display: flex; align-items: center; gap: 4px; }
.vote-circle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 72px;
    height: 30px;
    border-radius: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--ink-4);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}
.vote-circle .material-icons { font-size: 18px; }
.vote-circle__label { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
.vote-circle--good.is-active { background: #cce0ef; border-color: #003153; color: #003153; }
.vote-circle--bad.is-active  { background: #fee2e2; border-color: #991b1b; color: #991b1b; }
.rvblock__vote-count {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-2);
    margin-right: 4px;
}
.rvblock__vote-count:last-child { margin-right: 0; }
.rvblock__flag {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--ink-5);
    line-height: 1;
}
.rvblock__flag .material-icons { font-size: 20px; }

/* コメント関連エリア（投稿フォーム＋一覧）を白地でひとまとめにする。
   濃紺の背景から切り出して「ここはコメントの領域」と分かるようにするため */
.rvblock__cmarea {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
}

/* コメント投稿フォーム（一覧より上・パネル表示）。
   Xと同じく塗りつぶさず、線だけで区切る。
   投票済みのときは吹き出しのしっぽ（△）が Good / Bad ボタンの真下を指す */
.rvblock__compose {
    position: relative;
    padding: 8px 16px;
}
.rvblock__compose-tail {
    position: absolute;
    top: -9px;
    left: 24px; /* JSが投票済みボタンの中心に合わせて上書きする */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
}

/* コメント一覧 */
.rvblock__comments { padding: 8px 4px 4px; }
.rvblock__comments-title {
    display: inline-block;
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
}
.rvblock__comments .comment-list { padding: 0; }

/* 見出し兼コメント開閉トグル。見出しの文字組みをそのまま引き継ぐ */
.cm-head-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
/* inline-flex 指定が UA の [hidden] より強いため、0件時に隠せるよう明示する */
.cm-head-toggle[hidden] { display: none; }
.cm-head-toggle__caret {
    /* 全角カッコ「）」の右にある字間の分だけ左へ寄せて、見出しと一体に見せる */
    margin-left: -6px;
    font-size: 30px;
    line-height: 1;
    color: var(--accent);
    transition: transform 0.15s;
}
.cm-head-toggle[aria-expanded="false"] .cm-head-toggle__caret { transform: rotate(-90deg); }

/* コメント1件 */
/* コメントは件数が多くなりやすいので、1件あたりの縦幅を詰めてスクロール量を減らす
   （ユーザーアイコンは出さず、名前だけの1行ヘッダーにしている） */
.cm-list { display: flex; flex-direction: column; gap: 4px; }
.cm-list[hidden] { display: none; }
/* Xと同じ構造。1スレッド（本体＋直下の返信）を2列グリッドで描く。
   左列はアバター、右列は名前・本文・アクション。返信はインデントせず、
   アバター列を縦の線でつないで「続き」を示す（行の高さは右列の内容に自動で合わせる） */
.cm-thread { display: grid; grid-template-columns: 38px 1fr; column-gap: 8px; row-gap: 4px; }
.cm-thread__avatar-col { display: flex; flex-direction: column; align-items: center; }
.cm-thread__avatar { margin-top: 5px; flex-shrink: 0; }
/* 次の行（このスレッドの続き）があるときだけ出す線。残りの高さいっぱいに伸ばす */
.cm-thread__line { flex: 1 1 auto; width: 2px; min-height: 8px; margin-top: 4px; background: var(--border); border-radius: 1px; }
.cm-thread__content-col { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm__head { display: flex; align-items: center; gap: 8px; margin-bottom: 1px; line-height: 1.2; }
.cm__user {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* 吹き出し。Xと同じく塗りつぶさず、線だけで区切る。
   本文の下にGood・返信を埋め込むので、ここは枠・角丸だけ持つ入れ物にする */
.cm__bubble {
    padding: 5px 11px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    border-top-left-radius: 2px;
}
.cm__bubble-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-3);
    white-space: normal;
}
/* Good・返信は吹き出しの中、本文の下に続けて置く。吹き出しの背景に溶け込ませるため
   ボタン自体の背景・枠線は持たせず、区切りの線だけ薄く入れる */
.cm__foot { display: flex; justify-content: space-between; align-items: center; gap: 2px; margin-top: 2px; padding-top: 2px; border-top: 1px solid rgba(0,0,0,0.06); }
/* Good・返信は右端に寄せる。通報ボタンを出さない画面（管理画面）でも位置が変わらないよう、
   space-between ではなく margin で右へ送る */
.cm__foot-actions { display: flex; align-items: center; gap: 0; margin-left: auto; }
.cm__like,
.cm__reply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ink-4);
    cursor: pointer;
}
.cm__like .material-icons { font-size: 14px; color: var(--ink-4); }
.cm__like--liked .material-icons,
.cm__like--liked .cm__like-count { font-weight: 700; color: #e0245e; }
.cm__reply .material-icons { font-size: 16px; color: var(--ink-4); }

/* スマホはコメントが縦に伸びやすいので、段差をさらに詰める */
@media (max-width: 640px) {
    .cm-list { gap: 4px; }
    .cm-thread { row-gap: 4px; }
}

/* 返信入力ボックス（返信ボタンで開閉、元コメントより少しインデント） */
.cm__reply-box {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cm__reply-box[hidden] { display: none; }
.cm__reply-box-target {
    margin: 0;
    font-size: 12px;
    color: var(--ink-4);
}

/* 返信への返信で本文先頭に出す「#ユーザー名さん」 */
.cm__mention { color: var(--link); font-weight: 700; }

/* === Forms ============================================== */
.form-group  { display: flex; flex-direction: column; gap: 6px; }
.form-row    { display: flex; gap: 12px; }
.form-row > * { flex: 1; }
.form-label  { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.form-label--dark { font-size: 16px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 6px; }
.form-required { color: #f87171; font-size: 11px; margin-left: 2px; }

.form-input {
    width: 100%;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ink);
    box-sizing: border-box;
    font-family: inherit;
}
.form-input--lg {
    padding: 12px 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.form-input--locked {
    background: #f1f5f9;
    color: var(--ink-3);
    cursor: default;
    pointer-events: none;
}
/* 確定モード：女の子プロフィールカード */
.review-girl-card {
    background: linear-gradient(135deg, #0a3d62 0%, #38ada9 100%);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 20px;
}
.review-girl-card__top {
    display: flex;
    align-items: center;
    gap: 14px;
}
.review-girl-card__avatar {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-girl-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.review-girl-card__info { flex: 1; min-width: 0; }
/* 紐付けが1つも無い子だけ出る名前（女の子名リストのフォールバック）。
   カードが濃色グラデーションなので白で出す */
.review-girl-card__name {
    font-size: 17px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
}
/* 濃色の上に載るので、プロフィールカードのヘッダー帯と同じ配色にする */
.review-girl-card .girl-card__identity-list .identity-tag {
    background: transparent;
    border: none;
    padding: 0;
    gap: 3px;
    align-items: flex-start;
}
.review-girl-card .girl-card__identity-list .identity-tag__app {
    background: transparent;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.45);
}
.review-girl-card .girl-card__identity-list .identity-tag__nick {
    color: #ffffff;
    font-size: 17px;
}
.review-girl-card__attrs {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin-top: 8px;
}
.form-select {
    width: 100%;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ink);
    box-sizing: border-box;
}
.form-select--lg {
    padding: 12px 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}
.form-textarea {
    width: 100%;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    resize: none;
    line-height: 1.7;
    box-sizing: border-box;
}
.form-textarea--lg {
    padding: 12px 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    resize: none;
    line-height: 1.8;
    box-sizing: border-box;
    width: 100%;
}

/* White card sections (girls/register) */
.form-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-card__title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.form-card__note  { font-size: 12px; color: var(--ink-4); margin-top: -8px; }

/* Grey section cards (review/new) */
.form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: #f1f5f9;
    border-radius: 12px;
    border: 1px solid var(--border);
}
.form-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-2);
}
.form-section__header .material-icons { font-size: 18px; color: var(--accent); }
/* 口コミ投稿フォームは、セクション見出し（16px/700）と各項目のラベルが同じ大きさで
   階層が読み取れないので、ラベル側を一段落とす */
.review-form .form-label--dark { font-size: 13px; font-weight: 600; color: var(--ink-3); }

/* Form wrap (review/new.php, login, signup) */
.form-wrap {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 36px 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.form-error {
    color: #fecaca;
    font-size: 13px;
    background: rgba(220,38,38,0.35);
    border-radius: 10px;
    padding: 10px 16px;
}
/* 非同期送信のエラー（common/js/async-form.js が出す）。白いカードの上に置くので赤文字だけ */
.async-form-error {
    margin: 10px 0 0;
    color: #d32f2f;
    font-size: 13px;
    font-weight: 600;
}
.async-form-error[hidden] { display: none; }
/* 失敗ではない知らせ（再ログインできた等）。赤いままだと不安にさせるので色を変える */
.async-form-error--ok { color: #1b7f4b; }

/* === Filter Form (apps/users) ========================== */
.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.filter-input {
    padding: 7px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink);
    font-family: inherit;
}

.user-card__end .material-icons { font-size: 16px; color: #9ca3af; }

/* === Empty States ======================================= */
.empty-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 48px 32px;
    text-align: center;
    color: var(--ink-4);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.empty-state a { color: var(--accent); font-size: 13px; }

.empty-state--white {
    text-align: center;
    color: var(--ink-4);
    padding: 60px 0;
}

.girl-search-register {
    text-align: center;
    margin-top: 28px;
    padding-bottom: 8px;
}

/* === Top Search (Top Page) ==============================
   検索フォームはメインビジュアル内（.hero-search）へ移動。
   ここはアプリ別の口コミ導線ボタンを載せる帯として残している */
.top-search {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 16px 16px 18px;
}
.top-search__inner {
    max-width: 640px;
    margin: 0 auto;
}
/* アプリ別の口コミ導線ボタン */
.app-buttons {
    display: grid;
    /* 文字幅に合わせた固定幅。PCは横1列、狭い画面では2×2に折り返す */
    grid-template-columns: repeat(4, minmax(0, 128px));
    justify-content: center;
    gap: 6px;
}
@media (max-width: 640px) {
    .app-buttons { grid-template-columns: repeat(2, minmax(0, 128px)); }
}
.app-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    /* ブランド紺より明るめのトーン（白文字とのコントラストは 5.2:1 で確保） */
    background: #3b6f96;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    transition: background 0.15s;
}
.app-btn:hover { background: var(--brand-light); color: #fff; }
.app-btn__label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
}
/* === Recent Reviews (Top Page) ========================== */
.recent-reviews {
    max-width: 800px;
    margin: 0 auto;
    /* トップは縦のスクロール量を抑えるため余白を詰める */
    padding: 20px 16px 0;
}
/* 最後のセクションだけは、サイトフッターに貼り付かないよう下余白を取る
   （以前は末尾のボタン用 .recent-reviews__footer が下余白を兼ねていた） */
.recent-reviews:last-of-type {
    padding-bottom: 32px;
}
/* セクション内のカード間隔（アプリ詳細の .review-list には影響させない） */
.recent-reviews .review-list { gap: 8px; }
.recent-reviews__heading {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.recent-reviews__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.recent-reviews__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
}

.recent-reviews__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.recent-reviews__app {
    font-size: 11px;
    font-weight: 600;
    background: var(--border-light);
    color: var(--ink-4);
    padding: 2px 8px;
    border-radius: 6px;
}

.recent-reviews__date {
    font-size: 11px;
    color: var(--ink-5);
    margin-left: auto;
}

.recent-reviews__body {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.8;
    margin-bottom: 10px;
}

.recent-reviews__footer {
    text-align: center;
    /* ボタンの上下に余白を取る。下は次のセクションの padding-top と合わせて見た目を揃える */
    margin-top: 24px;
    padding-bottom: 8px;
}

@media (max-width: 640px) {
    .recent-reviews { padding: 14px 10px 0; }
    .recent-reviews:last-of-type { padding-bottom: 24px; }
    .recent-reviews__heading { font-size: 16px; margin-bottom: 8px; }
    .recent-reviews .review-list { gap: 6px; }
    .recent-reviews__list { gap: 6px; }
}

/* === Lightbox =========================================== */
img[data-lightbox] { cursor: zoom-in; }
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    cursor: zoom-out;
    justify-content: center;
    align-items: center;
}
#lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    transition: background 0.15s;
    z-index: 1;
}
.lightbox-arrow:hover { background: rgba(255,255,255,0.3); }
.lightbox-arrow--prev { left: 16px; }
.lightbox-arrow--next { right: 16px; }
.lightbox-memo-link {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 18px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
    z-index: 1;
    cursor: pointer;
}
.lightbox-memo-link:hover { background: rgba(255,255,255,0.28); }

/* === Pagination ========================================= */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 28px 0 0;
    padding: 0 8px;
}
.pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-4);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
@media (max-width: 480px) {
    .pagination li a { width: 32px; height: 32px; font-size: 12px; border-radius: 6px; }
}
.pagination li a:hover {
    background: var(--border-light);
    color: var(--ink);
}
.pagination li.current a,
.pagination li a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    pointer-events: none;
}

/* === Site Footer ======================================== */
.site-footer {
    background: var(--ink-2);
    color: rgba(255,255,255,0.75);
    margin-top: auto;
}
.site-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.site-footer__nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.site-footer__nav a {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    transition: color 0.15s;
}
.site-footer__nav a:hover { color: #fff; }
.site-footer__copy {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    margin: 0;
}

@media (max-width: 640px) {
    .site-footer__inner {
        flex-direction: column;
        gap: 6px;
        padding: 10px 20px;
    }
    .site-footer__nav { gap: 14px; justify-content: center; }
}

/* === Static Pages (規約・運営者情報等) ================== */
.static-page {
    flex: 1;
    background: var(--bg);
    padding: 48px 24px 80px;
}
.static-page__inner {
    max-width: 760px;
    margin: 0 auto;
}
.static-page__title {
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 40px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
    letter-spacing: -0.01em;
}
.static-page__lead {
    font-size: 15px;
    color: var(--ink-3);
    line-height: 1.8;
    margin: 0 0 32px;
}
.static-page__date {
    font-size: 13px;
    color: var(--ink-5);
    margin-top: 48px;
    text-align: right;
}
.static-section {
    margin-bottom: 36px;
}
.static-section h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
    padding-left: 10px;
    border-left: 3px solid var(--brand);
}
.static-section p {
    font-size: 14px;
    color: var(--ink-3);
    line-height: 1.85;
    margin: 0 0 8px;
}
.static-section ul {
    margin: 8px 0 0;
    padding-left: 20px;
}
.static-section li {
    font-size: 14px;
    color: var(--ink-3);
    line-height: 1.8;
    margin-bottom: 4px;
}
.static-section a { color: var(--accent); }

/* 運営者情報テーブル */
.info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.info-table th,
.info-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    line-height: 1.7;
}
.info-table th {
    width: 160px;
    font-weight: 600;
    color: var(--ink-3);
    background: var(--border-light);
    white-space: nowrap;
}
.info-table td { color: var(--ink-2); }
.info-table a { color: var(--accent); }

/* お問い合わせ */
.contact-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 36px;
}
.contact-box__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.contact-box__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

@media (max-width: 640px) {
    .static-page { padding: 32px 20px 64px; }
    .static-page__title { font-size: 22px; }
    .info-table th { width: 100px; }
}

/* === Responsive: General Mobile Adjustments ============= */
/* PC（641px以上）はプロフィールカードの本文フォントを少し大きく（スマホ＝基準サイズはそのまま） */
@media (min-width: 641px) {
    .profile-card__attrs            { font-size: 13px; }
    .profile-card__features-heading { font-size: 13px; }
    .profile-card__intro            { font-size: 13px; }
    .profile-card__features-body    { font-size: 13px; }
    .profile-card__intro-more       { font-size: 12px; }

    /* PCバランス調整: 女の子の詳細・一覧はコンテナを狭め、メイン画像は巨大化しないよう上限を設ける */
    /* 教えて！マイブロも同じ幅に揃える（検索フォーム・質問カード・質問詳細） */
    .detail-container:has(.profile-card),
    .detail-container:has(.girl-list),
    .detail-container:has(.search-form),
    .detail-container:has(.qa-list),
    .detail-container:has(.qa-tabs),
    .detail-container:has(.qa-item__head) { max-width: 720px; }
    .profile-gallery,
    .profile-card__photo-ph { width: 42%; max-width: 340px; }
}

@media (max-width: 640px) {
    /* ページ余白（カードが画面端ギリギリまで来るよう横幅を詰める） */
    .page-padded { padding: 24px 8px; }
    .page-center  { padding: 28px 8px; }
    .page-blue    { padding: 24px 8px 48px; }

    /* フォーム */
    .form-wrap { padding: 24px 18px; }
    .form-row  { flex-direction: column; }

    /* プロフィールカード */
    .profile-card__top        { padding: 8px 20px; }
    .profile-card__columns    { gap: 14px; padding: 16px 16px 14px 16px; }
    .profile-card__actions    { padding-top: 10px; }
    
    .profile-gallery          { width: 48%; }
    .profile-gallery__thumbs  { grid-template-columns: repeat(3, 1fr); }
    .profile-card__identity-list .identity-tag__nick { font-size: 13px; }
    
    .profile-card__name       { font-size: 20px; }
    
    
    

    /* 口コミカードリスト表示（PCと同じ、タイトル横の小さな正方形サムネイルのまま） */

    
    
    
    

    /* ページ見出し */
    .page-heading h1 { font-size: 20px; }
    

    /* 顔写真AI検索バナー */
    .ai-search-banner { gap: 10px; padding: 11px 12px; }
    .ai-search-banner__icon { width: 36px; height: 36px; }
    .ai-search-banner__icon .material-icons { font-size: 20px; }
    .ai-search-banner__title { font-size: 14px; }
    .ai-search-banner__lead { font-size: 11px; }
}

/* メール未確認バナー */
.verify-email-banner {
    background: #fef3c7;
    border-bottom: 1px solid #f59e0b;
    color: #92400e;
    font-size: 13px;
    padding: 10px 16px;
    text-align: center;
}
.verify-email-banner a {
    color: #b45309;
    font-weight: 600;
    text-decoration: underline;
    margin-left: 8px;
}

/* =====================================================
   ベストアンサー選定の催促モーダル（閉じられない）
   ===================================================== */
.qa-select-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    overflow-y: auto;
}
.qa-select-modal {
    background: var(--surface);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    overflow-y: auto;
    padding: 24px 22px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
}
.qa-select-modal__head { text-align: center; margin-bottom: 18px; }
.qa-select-modal__icon { font-size: 40px; color: var(--accent); }
.qa-select-modal__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    margin: 6px 0 8px;
}
.qa-select-modal__lead {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.7;
    margin: 0 0 4px;
}
.qa-select-modal__question {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.qa-select-modal__girl { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.qa-select-modal__body { font-size: 14px; color: var(--ink); line-height: 1.7; margin: 0; }
.qa-select-modal__ticket {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 3px 10px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 20px;
    color: #92400e;
    font-size: 12px;
    font-weight: 700;
}
.qa-select-modal__ticket .material-icons { font-size: 15px; }
/* モーダルからは選定ページ（/qa/select.php）へ送るだけにして、選定UIはページ側に置く */
.qa-select-modal__go {
    display: block;
    margin-top: 18px;
    padding: 13px;
    border: none;
    border-bottom: 3px solid #1e7a77;
    border-radius: 8px;
    background: #38ada9;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}
.qa-select-modal__go:hover { color: #fff; }
.qa-select-modal__go:active { transform: translateY(2px); border-bottom-width: 1px; }

/* =====================================================
   選定中に回答者のマイページを開いているときの案内バー
   ===================================================== */
.qa-select-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 16px;
    background: #fef3c7;
    border-bottom: 1px solid #fcd34d;
    color: #92400e;
    font-size: 13px;
    font-weight: 700;
}
.qa-select-bar__text { display: inline-flex; align-items: center; gap: 4px; }
.qa-select-bar__text .material-icons { font-size: 18px; }
.qa-select-bar__link {
    padding: 5px 14px;
    border-radius: 20px;
    background: #92400e;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.qa-select-bar__link:hover { color: #fff; }

/* =====================================================
   ベストアンサー選定ページ (qa/select.php)
   ===================================================== */
.qa-select-page__head { text-align: center; margin-bottom: 20px; }
.qa-select-page__icon { font-size: 40px; color: var(--accent); }
.qa-select-page__title { font-size: 20px; font-weight: 800; color: var(--ink); margin: 4px 0 8px; }
.qa-select-page__lead { font-size: 13px; color: var(--ink-4); line-height: 1.8; margin: 0; }
.qa-select-answer { margin-bottom: 8px; }
.qa-select-pick {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: none;
    border-bottom: 3px solid #1e7a77;
    border-radius: 8px;
    background: #38ada9;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.qa-select-pick:active { transform: translateY(2px); border-bottom-width: 1px; }
.qa-select-none-form { margin-top: 24px; }
.qa-select-none {
    width: 100%;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--ink-4);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.qa-select-none:hover { background: #f8fafc; }
/* ===== 口コミ投稿フォーム (review/new.php) ===== */
.form-wrap--lg { max-width: 720px; }

.review-form-head {
    background: linear-gradient(135deg, #0a3d62 0%, #38ada9 100%);
    border-radius: 14px;
    padding: 20px 24px;
    /* すぐ下の「口コミの書き方を見る」リンクと離れすぎないよう詰める */
    margin-bottom: 12px;
}
.review-form-head h1 {
    /* 画面が狭いときは文字を縮めて1行に収める（途中で折り返すと見出しが読みにくいため） */
    font-size: clamp(15px, 5.2vw, 22px);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    margin: 0;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .review-form-head { padding: 16px 16px; }
}
.review-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.review-form-notice {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-3);
    line-height: 1.75;
    margin: 0;
}
.review-photo-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.girl-photo-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.girl-photo-dropzone:hover,
.girl-photo-dropzone--over {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 14,165,233), 0.04);
}
.girl-photo-dropzone__text {
    font-size: 13px;
    color: var(--ink-4);
    margin: 0;
    text-align: center;
}
.review-photo-preview__thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}
/* 添付プレビューの1枚。右上に取り消しボタンを重ねる（includes/photo_upload_field.php） */
.review-photo-preview { position: relative; display: inline-flex; }
.review-photo-preview__remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(15,25,35,0.75);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.review-photo-preview__remove:hover { background: rgba(15,25,35,0.9); }
/* 添付済み画像の一覧（質問・回答・返信の表示側） */
.qa-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.qa-photos__thumb {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #f1f5f9;
}
.qa-photos--sm .qa-photos__thumb { width: 72px; height: 72px; }
.qa-photo-field { margin-top: 12px; }
/* 回答・返信の添付。任意の機能なので、クリップ1つに畳んで送信ボタンの左に置く。
   プレビューはクリップの右へ横並びにして、行の高さが増えないようにする */
.qa-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
/* 添付欄の入れ物は枠として存在させず、中身（プレビューとクリップ）を
   この行に直接並べる。そうしないと「ボタンの右にクリップ」の順にできない */
.qa-photo-field--compact { display: contents; }
/* 並びは プレビュー（上の行に全幅） → 送信ボタン → クリップ */
.qa-form-actions .review-photo-previews { order: 1; width: 100%; margin-top: 0; }
.qa-form-actions .review-photo-previews:empty { display: none; }
.qa-form-actions .comment-form__submit { order: 2; margin-top: 0; align-self: center; }
.qa-form-actions .qa-clip { order: 3; }
/* 囲みは付けずアイコンだけ置く。押しやすさのため周囲に余白は残す */
.qa-clip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 6px;
    color: var(--ink-4);
    cursor: pointer;
}
.qa-clip .material-icons { font-size: 22px; }
.qa-clip.dragover { color: #38ada9; }
/* 画面のどこにドロップしても受け取るので、どのフォームに入るのかを枠で示す
   （image-shrink.js が受け取り先のフォームに付ける） */
form.is-drop-target {
    outline: 2px dashed #38ada9;
    outline-offset: 6px;
    border-radius: 8px;
}
/* 縮小処理中（image-shrink.js が付ける） */
.qa-clip.is-processing { opacity: 0.5; cursor: progress; }
/* プレビューは送信ボタンの行の上に置く。大きさは他の添付欄（質問・口コミ）と同じ80px */
.qa-form-actions .review-photo-previews { flex-wrap: wrap; }
.review-form-notice--box {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 14px;
}
.review-form-notice__link {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.caution-notice {
    margin-top: 14px;
    margin-bottom: 20px;
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    line-height: 1.7;
}

.caution-notice__text {
    font-size: 12px;
    color: #7f1d1d;
}
.form-field--relative { position: relative; }
.suggest-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
}
.confirm-card {
    margin-top: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}
.confirm-card__inner { padding: 16px; }
.confirm-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
/* 女の子名リストが入る。中の見た目は girl-card__identity-list 側が持つ */
.confirm-card__identities {
    font-size: 12px;
    color: #64748b;
}
.confirm-card__loading {
    color: #94a3b8;
    animation: spin 1s linear infinite;
}
.confirm-card__photos {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-bottom: 12px;
    padding-bottom: 4px;
}
.confirm-card__attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #475569;
}
.confirm-card__intro {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
}
.confirm-card__actions {
    display: flex;
    border-top: 1px solid #e2e8f0;
}
.confirm-btn--reject {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #ef4444;
    border-right: 1px solid #e2e8f0;
    transition: background 0.15s;
}
.confirm-btn--reject:hover { background: #fef2f2; }
.confirm-btn--accept {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #22c55e;
    transition: background 0.15s;
}
.confirm-btn--accept:hover { background: #f0fdf4; }
.girl-status {
    margin-top: 10px;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}
.review-photo-upload { font-size: 13px; }
.evidence-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    margin-top: 12px;
    border: 2px dashed #38ada9;
    border-radius: 10px;
    background: rgba(56,173,169,0.05);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.evidence-drop-zone:hover {
    background: rgba(56,173,169,0.12);
}
/* 添付欄の案内文の出し分け。PCは「クリック・ドラッグ＆ドロップ・ペースト」、
   スマホは「タップ」だけを見せる（スマホに無い操作を案内しないため） */
@media (max-width: 640px) {
    .drop-hint--pc { display: none; }
    /* 教えて！マイブロの質問投稿（.qa-photo-field 経由）は、スマホでは
       ドラッグ&ドロップができないので、PC然とした大きな箱ではなく
       クリップ的な細いチップに縮めて「タップして選ぶ」だけ見せる */
    .qa-photo-field:not(.qa-photo-field--compact) .evidence-drop-zone {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        padding: 10px 16px;
    }
    .qa-photo-field:not(.qa-photo-field--compact) .evidence-drop-zone .material-icons {
        font-size: 20px !important;
    }
    .qa-photo-field:not(.qa-photo-field--compact) .evidence-drop-zone__sub {
        display: none;
    }
}
@media (min-width: 641px) {
    .drop-hint--sp { display: none; }
}
.evidence-drop-zone.dragover {
    background: rgba(56,173,169,0.18);
    border-color: #0a3d62;
}
/* 送信前の自動縮小の最中。重い写真だと数秒かかるので、待ちだと分かるようにする。
   女の子登録（.girl-photo-dropzone）は別スタイルの添付欄だが、処理中の見せ方は揃える */
.evidence-drop-zone.is-processing,
.girl-photo-dropzone.is-processing {
    position: relative;
    pointer-events: none;
}
.evidence-drop-zone.is-processing > *,
.girl-photo-dropzone.is-processing > * { opacity: 0.25; }
.evidence-drop-zone.is-processing::after,
.girl-photo-dropzone.is-processing::after {
    content: '画像を処理しています…';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #0a3d62;
}
.evidence-drop-zone__main {
    font-size: 15px;
    font-weight: 700;
    color: #0a3d62;
}
.evidence-drop-zone__sub {
    font-size: 12px;
    color: #666;
}
.review-form-error {
    color: #f87171;
    font-size: 13px;
    text-align: center;
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* =====================================================
   フロントページ共通コンポーネント（インラインスタイル抽出）
   ===================================================== */

/* --- レイアウト幅 --- */
.form-wrap--sm { max-width: 480px; }

/* Tailwind CDN の .container ユーティリティは実行時に後から差し込まれ、単一クラスの
   .container--md を上書きしてしまう。2クラス重ねで詳細度を上げて打ち勝つ */
.container.container--md { max-width: 680px; }

.icon-inline-xs { font-size: 12px; vertical-align: -1px; }
.icon-area { font-size: 13px; vertical-align: middle; }

/* --- girls/recommended.php --- */
.girl-rec-inner { display: flex; align-items: center; gap: 14px; }

/* --- ボタン追加スタイル --- */
.btn--login { background: #f6b93b; }

/* --- ログインページ フッターリンク --- */
.login-foot-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-size: 13px; }

/* --- フォームスタック --- */
.form-stack { display: flex; flex-direction: column; gap: 20px; }

/* --- ページヘッダー --- */
.page-header { margin-bottom: 24px; }
.page-header--mb28 { margin-bottom: 28px; }
.page-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

.page-title--xl {
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 6px;
}

/* --- 戻りリンク --- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--ink-4);
    margin-bottom: 14px;
    transition: color 0.15s;
}
.back-link:hover { color: var(--ink); }
.back-link .material-icons { font-size: 16px; }
.back-link--mb16 { margin-bottom: 16px; }

/* --- アラート --- */
.alert--success {
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: #166534;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}
.alert--success .material-icons { font-size: 16px; }

.alert--error {
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #991b1b;
}

/* --- セクション見出し行 --- */
.section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.section-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}
.section-count { font-size: 12px; color: var(--ink-5); }

/* --- マイページ：縦に要素が多く、スマホのスクロールが伸びやすいので上下を詰める --- */
.mypage-top.page-padded { padding-top: 20px; padding-bottom: 24px; }
.mypage-top .mp-profile-card { margin-bottom: 12px; }
/* マイページ：プロフィールカードの上（ヘッダーとの間）に置く「Mybroの使い方」。
   口コミ投稿ページの「口コミの書き方を見る」（.review-guide-link）も同じ見た目にする */
.mp-profile-card__name-row {
    display: flex;
    align-items: baseline;
    /* 折り返して下段に落とさない。入らないときはカードの右上に逃がす（下のメディアクエリ） */
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
}
/* 名前は伸ばさない。伸ばすとリンクが行の右端まで飛んでしまい「真横」に見えないため。
   長い名前はここで三点リーダーに切り、リンクは名前のすぐ隣に残す */
.mp-profile-card__name-row .mp-profile-card__name {
    flex: 0 1 auto;
    min-width: 0;
}
.mypage-guide-link { flex-shrink: 0; white-space: nowrap; }
/* 名前の幅がここまで削られると読めなくなるので、リンクはカードの右上へ逃がす。
   （名前に使える幅 = 行幅 - リンク約85px - gap8px。行幅190px を切るとこの状態になる） */
@media (max-width: 340px) {
    .mp-profile-card__head { position: relative; }
    .mp-profile-card__name-row .mypage-guide-link {
        position: absolute;
        top: 0;
        right: 0;
    }
}
.mypage-guide-link,
.review-guide-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: underline;
}
/* 口コミ投稿ページ：フォームのカードの外（左上）に置く「口コミの書き方を見る」 */
.review-page-col { width: 100%; max-width: 720px; }
.review-guide-row { display: flex; margin-bottom: 10px; }
.mypage-top .section-row { margin-bottom: 8px; }
.mypage-top .dm-conv-list { margin-bottom: 12px; }
.mypage-top .dm-conv-list:has(+ .section-more-row) { margin-bottom: 6px; }
.mypage-top .section-more-row { margin-bottom: 12px; }
.mypage-top .menu-list { margin-bottom: 16px; }
.mypage-top .menu-list__item { padding: 12px 18px; }
.mypage-top .action-btns-row { margin-bottom: 0; }
@media (max-width: 640px) {
    .mypage-top.page-padded { padding: 16px 8px 20px; }
}

/* --- マイページ：プロフィールカード --- */
.mp-profile-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    /* 3段が入るので、縦は詰めて横だけゆったり取る */
    padding: 16px 24px;
    margin-bottom: 16px;
    /* 上から「アイコン＋名前」「数値」「編集・他人から見たプロフィール」の3段 */
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.mp-profile-card__avatar {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.mp-profile-card__head {
    display: flex;
    align-items: center;
    gap: 16px;
}
/* 名前と、その下の閲覧日数・プレチケ。横に並べず縦に積む */
.mp-profile-card__idrow {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.mp-profile-card__name {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 名前の下に置く、その日の行動に効く2つ（閲覧日数残り・プレチケ） */
.mp-profile-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ink-4);
}
.mp-profile-card__meta strong { font-size: 15px; font-weight: 800; color: var(--accent); margin: 0 1px; }
.mp-profile-card__until { font-size: 11px; color: var(--ink-5); margin: 2px 0 0; }
/* 編集は右上、プレビューは右下。カードの高さいっぱいに広げて上下に振り分ける */
/* カードの一番下。右端に「編集」「他人から見たプロフィール」を横並びで置く */
.mp-profile-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}
.mp-profile-card__edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
}

.mp-app-tag .material-icons { font-size: 12px; color: #94a3b8; }
@media (max-width: 640px) {
    .mp-profile-card { padding: 14px 16px; }
    .mp-profile-card__actions { gap: 12px; }
}

/* 他の人から見た自分のページへの導線（名前のリンクを外した代わり） */
.mp-profile-card__public {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}

/* ログアウト。「他人から見たプロフィール」の真上に来るよう、専用の行で右端に寄せる */
.mp-profile-card__logoutrow {
    display: flex;
    justify-content: flex-end;
    /* カードの gap（12px）だと下の「他人から見たプロフィール」と離れて見えるので、負のマージンで詰める */
    margin-bottom: -8px;
}
.mp-profile-card__logout { flex-shrink: 0; }

/* --- メニューリスト（マイページ） --- */
.menu-list { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.menu-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
    color: var(--ink);
    transition: background 0.15s;
    text-decoration: none;
}
.menu-list__item:last-child { border-bottom: none; }
.menu-list__item:hover { background: #f8fafc; }
.menu-list__icon { font-size: 18px; color: var(--ink-4); }
.menu-list__label { font-size: 14px; font-weight: 600; }
.menu-list__arrow { font-size: 16px; color: #cbd5e1; margin-left: auto; }

.menu-list__badge ~ .menu-list__arrow { margin-left: 8px; }
/* 件数（お知らせ・ユーザーとのDM・投稿した質問）。赤い丸に数字だけを出す。
   2桁3桁でも潰れないよう、正円は min-width で作って横は padding で伸ばす */
.menu-list__count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.menu-list__count + .menu-list__badge { margin-left: 8px; }
.menu-list__count ~ .menu-list__arrow { margin-left: 8px; }

/* --- マイページ：見出し右の「すべて見る」 --- */
.section-more { font-size: 12px; font-weight: 600; color: var(--accent); }
/* 一覧の下に置く「すべて見る」。右端に寄せる。
   直前の一覧が持っている下余白は詰めて、一覧との距離を近づける
   （:has に対応していないブラウザでは、少し離れて出るだけ） */
.section-more-row { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.dm-conv-list:has(+ .section-more-row) { margin-bottom: 8px; }

/* プロフィールの数値（マイページ・他人から見たプロフィール・口コミ／質問の各ページで共通）。
   枠線は付けず、数字の下に見出しを置いた組を横に並べる */
.pstats {
    display: grid;
    /* 列数は項目数（--pstats-cols）そのまま。PCでは1行に並ぶ */
    grid-template-columns: repeat(var(--pstats-cols, 4), 1fr);
    gap: 10px 8px;
    margin: 16px 0 20px;
}
/* プロフィールでは白い箱に載せて、前後の塊と分ける */
.pstats--profile {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
}
/* マイページでは通知の下に置く。上下の間隔はこのページ側（mypage-top）で詰める */
.mypage-top .pstats { margin: 0 0 16px; }
/* 他人から見たプロフィールでは数値がカードの最後。下はカードの余白だけで足りる */
.u-profile-head .pstats { margin-bottom: 0; }

/* 他人から見たプロフィールの「口コミ／ベストアンサー」切り替えタブ（public/user.php）。
   どちらも多いときだけ出る。押した方だけを下に並べる */
.u-listtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.u-listtabs__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-3);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.u-listtabs__btn:hover { color: var(--ink); }
.u-listtabs__btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.u-listtabs__count { font-size: 12px; font-weight: 700; opacity: 0.8; }
.pstats__item { min-width: 0; text-align: center; }
.pstats__value {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
}
.pstats__label {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ink-4);
}
/* 狭い画面では見出しが折れるので、1行に収まるところまで詰める。
   プロフィールは項目が多い（5〜6個）ので3列で折り返す */
@media (max-width: 640px) {
    .pstats { gap: 10px 6px; grid-template-columns: repeat(var(--pstats-cols-sp, var(--pstats-cols, 4)), 1fr); }
    .pstats--profile { padding: 12px 8px; }
    .pstats__value { font-size: 17px; }
    .pstats__label { font-size: 10px; letter-spacing: -0.02em; }
    /* 他人から見たプロフィール（user.php）はカードの中に数値を置くぶん幅が足りず、
       「もらったコメント」だけ2行に折れる。カード側の左右余白を詰め、
       数値の箱は左右いっぱいに広げて1行に収める */
    .u-profile-head { padding: 20px 14px !important; }
    .u-profile-head .pstats--profile { padding-left: 0; padding-right: 0; }
}

/* 通知種別のピル。管理画面から種別を増やす想定で、色は種別ごとに足していく */
.notice-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    padding: 1px 8px;
    border-radius: 999px;
}
.notice-pill--info { background: #e0f2fe; color: #075985; }

/* 遷移先の無い通知の全文ポップアップ */
.notice-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.notice-modal[hidden] { display: none; }
/* 本文が長くても「閉じる」が隠れないように、縦積みにして本文だけスクロールさせる */
.notice-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}
.notice-modal__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.notice-modal__date { font-size: 11px; color: var(--ink-5); }
/* お知らせの見出し。タイトルが入っているものだけ出す（未入力なら本文だけ） */
.notice-modal__title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.6;
    word-break: break-word;
}
.notice-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
}
/* 閉じる操作は右下の文言ボタンに集約する（×アイコンは置かない） */
.notice-modal__foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
.notice-modal__close-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.notice-modal__close-btn:hover { background: var(--accent-dark); }

/* --- マイページのサブページ共通 --- */
.mypage-back-link {
    display: inline-block;
    font-size: 13px;
    color: var(--ink-4);
    margin-bottom: 16px;
}
.mypage-back-link:hover { color: var(--ink-2); }

/* --- アクションボタン行 --- */
.action-btns-row { display: flex; gap: 10px; margin-bottom: 32px; }
.btn--action-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 12px;
    border-radius: 10px;
    transition: background 0.15s;
}
.btn--action-primary:hover { background: var(--accent-dark); }
.btn--action-primary .material-icons { font-size: 16px; }
.btn--action-secondary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #dde3ec;
    color: var(--ink-2);
    font-weight: 600;
    font-size: 13px;
    padding: 12px;
    border-radius: 10px;
    transition: background 0.15s;
}
.btn--action-secondary:hover { background: #c8d1de; }
.btn--action-secondary .material-icons { font-size: 16px; }

/* 未読の数。文言は付けず数字だけを丸で出す */
.badge--unread {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 11px; font-weight: 700; line-height: 1;
    color: #fff; background: #dc2626; border-radius: 999px;
}

/* --- エンプティステート --- */
.empty-state {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 48px;
    text-align: center;
    color: var(--ink-4);
}

.empty-state__icon { font-size: 36px; display: block; margin-bottom: 8px; color: #cbd5e1; }

.empty-state__text { font-size: 14px; margin: 0; }

/* --- アバター画像 --- */
.avatar-img--sm { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.avatar-img--lg { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }

.avatar-ph--sm { width: 40px; height: 40px; border-radius: 8px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar-ph--sm .material-icons { font-size: 20px; color: #94a3b8; }

.icon-avatar .material-icons { color: #fff; }
.icon-avatar--sm .material-icons { font-size: 16px; }
.icon-avatar--md .material-icons { font-size: 18px; }
.icon-avatar--gray .material-icons { color: #64748b; }

/* --- DMリスト（mypage/dms.php） --- */
.dm-list { display: flex; flex-direction: column; gap: 12px; }

.dm-item__reply-note .material-icons { font-size: 12px; }

/* --- メッセージスレッド（dm-thread.php, user-dm.php） --- */
.msg-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.msg-empty { text-align: center; color: var(--ink-4); font-size: 13px; padding: 32px 0; }

/* DMスレッド（user-dm.php / dm-thread.php）は縦に長くなりやすいので、
   1画面に会話が多く入るよう上下の余白を詰める */
.dm-page.page-padded { padding-top: 20px; padding-bottom: 20px; }
.dm-page .conv-bar { margin-bottom: 10px; }
.dm-page .msg-list { gap: 10px; margin-bottom: 12px; }
.dm-page .msg-bubble-body { padding: 9px 12px; }
.dm-page .msg-stamp { margin-top: 2px; }
.dm-page .dm-input-card { padding: 12px; }
.dm-page .dm-textarea { margin-bottom: 6px; }
.dm-page .dm-attach-row { margin-bottom: 6px; }
.dm-page .dm-send-row-flex { margin-top: 8px; }

/* --- DMの入力バー（user-dm.php）---
   LINE のように「クリップ＋1行の入力欄＋送信」を1行に収める。
   送信ボタンは文章か画像が入ったときだけ出す（.dm-compose--ready） */
.dm-compose { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 6px 8px; }
.dm-compose__row { display: flex; align-items: flex-end; gap: 6px; }
.dm-compose__attach,
.dm-compose__send {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	padding: 0;
}
.dm-compose__attach { color: var(--ink-4); }
.dm-compose__attach:hover { background: var(--bg); }
.dm-compose__attach .material-icons { font-size: 22px; }
.dm-compose__input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	resize: none;
	overflow-y: auto;
	max-height: 120px;
	padding: 8px 4px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink);
	background: none;
}
.dm-compose__input::placeholder { color: var(--ink-5); }
/* 送信は中身があるときだけ。押せる状態が色で分かるようにする */
.dm-compose__send { display: none; background: var(--accent); color: #fff; }
.dm-compose--ready .dm-compose__send { display: flex; }
.dm-compose__send .material-icons { font-size: 20px; }
.dm-compose__send:disabled { opacity: 0.5; cursor: default; }
/* アップロード中の文言とPC用のヒントを置く行。中身が無いときは高さを持たせない
   （flex にしておくと、子が全部消えたときに行ボックスが残らない） */
.dm-compose__meta { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.dm-upload-status:empty { display: none; }
/* メール未確認で入力欄を出せないときの案内。入力欄と同じ位置に置く */
.dm-verify-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 12px 14px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; }
.dm-verify-note .material-icons { font-size: 18px; color: #ea580c; flex-shrink: 0; }
.dm-verify-note p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.dm-verify-note a { font-weight: 700; color: var(--link); }
.dm-compose .dm-thumbs { margin: 4px 6px 6px; }
/* 添付が無いときはサムネ欄で高さを取らない（空のバーを細く保つ） */
.dm-compose .dm-thumbs:empty { margin: 0; }

/* 会話が短くても、入力欄は画面の一番下に置く（他のチャットアプリと同じ）。
   メッセージの領域を伸ばして、その下に入力欄を押し出す。
   引く値は サイトヘッダー＋.dm-page.page-padded の上下padding（20px×2） */
.dm-page .container--md {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--header-h) - 40px);
	/* アドレスバーの分を差し引いた実際の高さ。対応していないブラウザは上の 100vh を使う */
	min-height: calc(100dvh - var(--header-h) - 40px);
}
.dm-page .msg-list { flex: 1 1 auto; }

/* PCは送信ボタンを最初から出しておく（スマホは中身があるときだけ出す） */
@media (min-width: 769px) {
	.dm-compose__send { display: flex; }
	.dm-compose__send:disabled { display: flex; }
}

.dm-input-heading .material-icons { font-size: 16px; color: var(--ink-4); }

.dm-drop-zone { border: 2px dashed transparent; border-radius: 10px; transition: border-color 0.15s, background 0.15s; }
.dm-drop-zone--over { border-color: var(--accent); background: rgba(29,161,242,0.05); }

.dm-attach-btn .material-icons { font-size: 15px; }
.dm-upload-status { font-size: 12px; color: var(--ink-4); margin-left: 8px; }
.dm-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.btn--send .material-icons { font-size: 15px; }

/* --- 画像ビューアモーダル --- */
.img-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.88); align-items: center; justify-content: center; }
.img-modal__close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 36px; cursor: pointer; line-height: 1; padding: 0; }
.img-modal__img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 8px; }
.img-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 24px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.img-modal__nav--prev { left: 12px; }
.img-modal__nav--next { right: 12px; }

/* --- DM作成モーダル（user.php） --- */
.dm-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; align-items: center; justify-content: center; }

.dm-modal__close .material-icons { font-size: 22px; }

.user-card__tag--count .material-icons { font-size: 13px; color: #64748b; }

.user-card__tag--app .material-icons { font-size: 12px; color: #94a3b8; }

.btn--dm .material-icons { font-size: 15px; }

.btn--dm-login .material-icons { font-size: 15px; }

/* --- 口コミミニカード（mypage.php, user.php） --- */
.review-list { display: flex; flex-direction: column; gap: 10px; }

.review-mini-card__girl .identity-tag__nick { font-size: 15px; }

/* --- 自分だけメモ（mypage/memos.php） ---
   「女の子を探す」と同じ女の子カードの下に、自分のメモをぶら下げる */
/* 絞り込み（キーワード・アプリ・フラグ）。囲みは作らず、フラグ／検索の2行で置く */
.memo-hint { font-size: 12px; color: #6b7280; margin-bottom: 8px; }
/* 文中に出す写真アイコン。ツールバーのものと同じ絵で、文字の高さに合わせる */
.memo-hint__icon { font-size: 15px; vertical-align: -3px; }

.memo-search { margin-bottom: 12px; }

/* === 自分だけメモのライブラリ（includes/memo_library_modal.php） === */
/* 検索の下に置く導線。一覧の邪魔をしないよう小さめのピルにする */
.memo-library-row { display: flex; margin-bottom: 12px; }
.memo-library-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}
.memo-library-btn:hover { opacity: 0.85; }
.memo-library-btn .material-icons { font-size: 18px; }

.memo-library {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.5);
}
.memo-library[hidden] { display: none; }
.memo-library__dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 82vh;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.memo-library__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.memo-library__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
}
.memo-library__title .material-icons { font-size: 20px; color: var(--brand); }
.memo-library__count { font-size: 12px; font-weight: 700; color: var(--ink-5); }
.memo-library__close {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 26px;
    line-height: 1;
    color: var(--ink-4);
    cursor: pointer;
}
/* 枚数が多くなるのでここだけスクロールさせる */
.memo-library__body { overflow-y: auto; padding: 14px 16px 18px; }
.memo-library__empty { margin: 24px 0; text-align: center; font-size: 13px; color: var(--ink-4); }

/* 一覧のカードと同じ正方形。タップで原本の大きさに拡大する */
.memo-library__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.memo-library__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    background: #f1f5f9;
}
@media (max-width: 640px) {
    .memo-library__grid { grid-template-columns: repeat(3, 1fr); }
}
/* フラグは常に1行。折り返さず、幅が足りないときは横スクロールで逃がす */
.memo-search__flags {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.memo-search__flags::-webkit-scrollbar { display: none; }
.memo-search__row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.memo-search__input,
.memo-search__select {
    min-width: 0;
    height: 31px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    color: var(--ink-2);
}
.memo-search__input { flex: 1 1 auto; min-width: 0; }
.memo-search__select { flex: 0 1 auto; max-width: 40%; }
.memo-search__clear { display: none; }
/* 女の子ページの検索ボタンと同じ色・丸みで、アイコンだけの小さいものにする */
.memo-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
.memo-search__submit .material-icons { font-size: 17px; }
/* チェックボックスと文字の大きさを揃える（小さくしすぎるとチェックだけ大きく見える） */
.memo-search__flags .memo-flagcheck { font-size: 12px; gap: 4px; }
/* 絞り込みのフラグだけは背景を白にする（一覧のカード内・メモ編集中のものはグレーのまま） */
.memo-search__flags .memo-flagcheck:not(:has(input:checked)) { background: #fff; }
.memo-search__flags .memo-flagcheck input { width: 13px; height: 13px; }
@media (max-width: 640px) {
    .memo-search__flags { gap: 5px; }
    .memo-search__flags .memo-flagcheck { gap: 3px; }
    .memo-search__row { gap: 5px; }
}
.memo-list { display: flex; flex-direction: column; gap: 20px; }
/* ライブラリからアンカーで飛ぶので、固定ヘッダーの分だけ余白を確保する */
.memo-entry { display: flex; flex-direction: column; gap: 4px; scroll-margin-top: calc(var(--header-h) + 16px); }
/* 女の子カードの下マージン（20px）はメモと離れて見えるので、この一覧では消す */
.memo-entry .profile-card { margin-bottom: 0; }
/* 100件単位で並ぶ一覧なので高さを抑える。サムネ列は出さず、
   写真の切り替えはメイン画像のスワイプ（マウスのドラッグでも可）で行う */
.memo-entry .profile-gallery__thumbs { display: none; }
/* 女の子が削除済みでメモだけ残っている場合 */
.memo-entry__gone { padding: 12px 16px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.memo-entry__gone-text { font-size: 12px; color: var(--ink-4); margin: 0; }
.memo-entry__note {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
}
.memo-entry__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.memo-entry__body { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.7; word-break: break-all; }
.memo-entry__body-wrap {
    position: relative;
    cursor: pointer;
}
.memo-entry__body-wrap .memo-entry__body {
    overflow: hidden;
    max-height: calc(1.7em * 5);
}
.memo-entry__body-wrap::after {
    content: '…';
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 28px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-3);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 60%);
}
/* 溢れていないメモ、または展開済みのメモ */
.memo-entry__body-wrap.no-clamp,
.memo-entry__body-wrap.is-expanded {
    cursor: default;
}
.memo-entry__body-wrap.no-clamp .memo-entry__body,
.memo-entry__body-wrap.is-expanded .memo-entry__body {
    max-height: none;
    overflow: visible;
}
.memo-entry__body-wrap.no-clamp::after,
.memo-entry__body-wrap.is-expanded::after { content: none; }
/* 保存済みのフラグ。本文の上に並べる。5つ全部でも1行に収まるよう詰めている */
.memo-entry__flags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.memo-flag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid var(--border-light);
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}
/* 編集中に出すチェック。日付と本文の間に置く */
.memo-entry__flagrow { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 7px; }
.memo-entry__flagpicker { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.memo-photo-add-inline {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; padding: 4px; color: var(--ink-4); cursor: pointer; line-height: 0;
}
.memo-photo-add-inline:hover { color: var(--accent-dark); }
.memo-photo-add-inline .material-icons { font-size: 22px; }
.memo-flagcheck {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}
.memo-flagcheck input { display: none; }
.memo-flagcheck:has(input:checked) {
    background: #1a6fc4;
    color: #fff;
    border-color: #1a6fc4;
    font-weight: 600;
}
/* スマホは幅が足りないので、5つ選んでも折り返さないところまで文字と余白を落とす */
@media (max-width: 640px) {
    .memo-entry__flags { gap: 3px; }
    .memo-flag { padding: 1px 6px; font-size: 10px; }
    .memo-entry__flagpicker { gap: 4px; }
    .memo-flagcheck { font-size: 12px; padding: 3px 8px; }
}
/* 口コミ投稿のお知らせのチェック */
.memo-notifycheck {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ink-4);
    cursor: pointer;
}
.memo-notifycheck input { margin: 2px 0 0; flex-shrink: 0; }
/* ラベル全体が写真選択の当たり判定だが見た目でわからないので、文末をリンク風にする
   （色は .memo-modal__list-link と同じ） */
.memo-notifycheck__link { color: #1a6fc4; font-weight: 700; white-space: nowrap; }
.memo-entry__date { font-size: 11px; color: var(--ink-5); flex-shrink: 0; }
/* 「自分だけメモ」のラベル。マイページの一覧では出していないが、
   管理画面のユーザー詳細（admin/users/edit.php）が同じ枠を使っている */
.memo-entry__label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.memo-entry__label .material-icons { font-size: 15px; }
/* 鉛筆とゴミ箱は行の右端に並べる */
.memo-entry__tools { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.memo-entry__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: none;
    border: none;
    color: var(--ink-5);
    cursor: pointer;
    line-height: 0;
}
.memo-entry__edit:hover { color: var(--accent-dark); }
.memo-entry__edit .material-icons { font-size: 16px; }
/* スマホは指で押すので、写真・鉛筆・ゴミ箱のアイコンを一回り大きくする。
   基本の指定と詳細度が同じなので、必ずこの位置（後ろ）に置くこと */
@media (max-width: 640px) {
    .memo-entry__edit .material-icons { font-size: 20px; }
}
.memo-entry__photo-count { font-size: 11px; color: var(--ink-4); margin-left: 1px; }
/* 鉛筆を押したときにだけ出す編集欄 */
.memo-entry__textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-2);
    resize: vertical;
}
.memo-entry__editor-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.memo-entry__msg { font-size: 12px; margin-right: auto; }
.memo-entry__btn {
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-3);
    cursor: pointer;
}
.memo-entry__btn--save { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- DM会話の上部バー（mypage/user-dm.php） ---
   LINEと同じく「戻る＋相手の名前」だけを画面の上に貼り付ける。
   サイトヘッダー（56px・sticky）のすぐ下に重ねるので top は --header-h。
   コンテナの左右padding（24px）を打ち消して、画面の端まで伸ばす */
.conv-bar {
    position: sticky;
    top: var(--header-h);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -20px -24px 12px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid var(--border);
}
/* PCはコンテナが画面幅より狭く中央寄せなので、上の負のmarginで
   画面端まで伸ばす手が効かず、白い箱だけが浮いて見える。
   PCではLINE風の固定バーをやめ、ページ本文と同じ地続きの見た目にする */
@media (min-width: 641px) {
    .conv-bar {
        position: static;
        margin: 0 0 12px;
        padding: 0;
        background: transparent;
        border-bottom: none;
    }
}
.conv-bar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--ink-3);
}
.conv-bar__back:hover { background: #f1f5f9; }
.conv-bar__back .material-icons { font-size: 18px; }
/* バーには相手のアイコンを出さない（LINEと同じ。誰との会話かは名前で足りる） */
.conv-bar__name {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 名前のリンク色は、ファイル末尾の「名前のハイパーリンク（サイト共通）」でまとめて指定する */

/* --- チケットボックス（photo-search） --- */
.ticket-box { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; }
.ticket-box__row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #92400e; }
.ticket-box__count { font-size: 16px; font-weight: bold; }
.ticket-box__divider { border-top: 1px solid #fcd34d; margin: 8px 0; }
.ticket-box__note { font-size: 12px; color: #92400e; margin: 8px 0 0; }
.ticket-box__count--after { color: #dc2626; }

/* --- ドロップゾーン（photo-search） --- */
.drop-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 20px 16px; text-align: center; cursor: pointer; background: #fafafa; transition: border-color 0.15s, background 0.15s; }
.drop-zone__icon { font-size: 32px; color: var(--ink-4); }
.drop-zone__text { font-size: 13px; color: var(--ink-3); margin: 6px 0 0; }
.drop-zone--active__icon { font-size: 32px; color: #2563eb; }
.drop-zone--active__text { font-size: 14px; font-weight: 700; color: #2563eb; margin: 6px 0 0; }
.drop-preview__img { max-width: 160px; max-height: 160px; border-radius: 8px; border: 1px solid var(--border); object-fit: contain; display: inline-block; }
.drop-preview__name { font-size: 12px; color: var(--ink-3); margin: 8px 0 0; word-break: break-all; }
.drop-note { font-size: 12px; color: var(--ink-4); margin: 6px 0 0; }

/* --- 写真検索確認モーダル --- */
.photo-search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
.photo-search-modal { background: #fff; border-radius: 16px; padding: 28px 24px; max-width: 340px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.18); }
.photo-search-modal__icon-wrap { text-align: center; margin-bottom: 16px; }
.photo-search-modal__icon { font-size: 40px; color: #f59e0b; }
.photo-search-modal__title { font-size: 17px; font-weight: 800; color: var(--ink); margin: 8px 0 4px; }
.photo-search-modal__sub { font-size: 13px; color: var(--ink-4); margin: 0; }
.photo-search-modal__note { font-size: 12px; color: var(--ink-4); margin: 0 0 20px; }
.photo-search-modal__btns { display: flex; gap: 10px; }
.btn--modal-cancel { flex: 1; padding: 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-3); background: #fff; cursor: pointer; }
.btn--modal-search { flex: 1; padding: 11px; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; color: #fff; background: #f59e0b; cursor: pointer; }

.vote-form { display: inline; }

/* --- mypage/edit.php --- */
.edit-section { background: #f8fafc; border: 1px solid var(--border-light); border-radius: 12px; padding: 20px; margin-bottom: 24px; }
.edit-section__label { font-size: 13px; font-weight: 700; color: var(--ink-3); margin: 0 0 14px; }
.edit-section__row { display: flex; align-items: center; gap: 16px; }
.edit-section__btn-col { display: flex; flex-direction: column; gap: 8px; }
.edit-section__hint { font-size: 11px; color: var(--ink-5); margin: 0; }
.edit-divider { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.edit-link--page { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-4); transition: color 0.15s; }
.edit-link--page:hover { color: var(--ink); }
.edit-link--page .material-icons { font-size: 16px; }
.edit-apps-empty { font-size: 13px; color: var(--ink-4); }
.edit-apps-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--upload { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--accent); border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: background 0.15s; }
.btn--upload:hover { background: #fff8ec; }
.btn--upload .material-icons { font-size: 14px; }
.btn--delete-icon { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #dc2626; background: none; border: none; padding: 0; cursor: pointer; }
.btn--delete-icon .material-icons { font-size: 14px; }

/* --- review/kuchikomi-complete.php --- */
.complete-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.complete-icon-circle { width: 72px; height: 72px; border-radius: 50%; background: #dcfce7; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.complete-icon-circle .material-icons { font-size: 40px; color: #16a34a; }
.complete-title { font-size: 22px; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.complete-text { font-size: 14px; color: #475569; line-height: 1.8; margin-bottom: 8px; }
.complete-text--last { margin-bottom: 32px; }
.complete-actions { display: flex; flex-direction: column; gap: 12px; }
.btn--complete-primary { display: block; background: #0f172a; color: #fff; font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 10px; text-decoration: none; transition: background 0.15s; text-align: center; }
.btn--complete-primary:hover { background: #1e293b; }
/* ボタン内の女の子名（.girl-name-inline）は地の色（黒系）を強制してくるので、紺背景では白文字を継承させる */
.btn--complete-primary .girl-name-inline,
.btn--complete-primary .girl-name-inline__app,
.btn--complete-primary .girl-name-inline__nick { color: inherit; }
.btn--complete-secondary { display: block; background: #f1f5f9; color: #0f172a; font-weight: 600; font-size: 15px; padding: 14px 24px; border-radius: 10px; text-decoration: none; transition: background 0.15s; text-align: center; }
.btn--complete-secondary:hover { background: #e2e8f0; }
.btn--complete-text { display: block; color: #64748b; font-size: 14px; padding: 8px; text-decoration: none; transition: color 0.15s; text-align: center; }
.btn--complete-text:hover { color: var(--ink-3); }

/* --- 投稿完了の知らせ（includes/post_complete_modal.php）---
   口コミの完了ページと同じ .complete-* をそのまま使い、置き場所だけモーダルにする。
   表示は JS が display:flex にする（JSが動かない環境では出さない） */
.complete-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 950; display: none; align-items: center; justify-content: center; padding: 16px; }
.complete-modal__dialog { background: #fff; border-radius: 16px; padding: 32px 24px 24px; width: min(420px,92vw); box-shadow: 0 8px 32px rgba(0,0,0,.18); text-align: center; }
.complete-modal .complete-title { font-size: 20px; }
.complete-modal .btn--complete-primary { width: 100%; border: none; cursor: pointer; font-family: inherit; }

/* --- girls/detail.php メモモーダル --- */
.memo-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 900; align-items: center; justify-content: center; }
.memo-modal__dialog { background: #fff; border-radius: 16px; padding: 24px; width: min(480px,92vw); box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.memo-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.memo-modal__title { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0; }
.memo-modal__close { background: none; border: none; cursor: pointer; color: var(--ink-4); padding: 2px; }
.memo-modal__hint { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; color: var(--ink-4); line-height: 1.4; margin: 0 0 2px; }

/* 自分だけメモ モーダルのフラグ。ピル型トグルボタン */
.memo-modal__flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.memo-modal__flags .memo-flagcheck { font-size: 11px; padding: 3px 7px; }
.memo-modal__textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; resize: vertical; font-family: inherit; line-height: 1.6; }
.memo-modal__actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; align-items: center; }
.memo-modal__delete { font-size: 13px; color: #dc2626; background: #fff; border: 1px solid #fecaca; border-radius: 8px; cursor: pointer; padding: 8px 18px; font-weight: 600; }
.memo-modal__cancel { font-size: 13px; color: var(--ink-4); background: #f1f5f9; border: none; border-radius: 8px; cursor: pointer; padding: 8px 18px; font-weight: 600; }
.memo-modal__save { font-size: 13px; color: #fff; background: var(--accent); border: none; border-radius: 8px; cursor: pointer; padding: 8px 22px; font-weight: 700; }
.memo-modal__msg { font-size: 12px; margin: 2px 0 0; text-align: right; min-height: 0; }
.memo-modal__msg:empty { display: none; }
.memo-modal__list-link { display: block; text-align: right; font-size: 12px; color: #1a6fc4; margin-top: 4px; }

/* メモ写真 */
.memo-photos { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.memo-photo-item { position: relative; width: 56px; height: 56px; }
.memo-photo-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: #f3f4f6; }
.memo-photo-delete { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.memo-photo-delete .material-icons { font-size: 14px; }
/* 追加ボタン。マイページのメモ一覧のツールアイコン（.memo-entry__edit）と同じ見た目にそろえる */
.memo-photo-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    color: var(--ink-5);
    cursor: pointer;
    line-height: 0;
    margin-bottom: 4px;
}
.memo-photo-add:hover { color: var(--accent-dark); }
.memo-photo-add .material-icons { font-size: 16px; }

/* --- email-unverified.php --- */
.verify-page { text-align: center; padding: 60px 16px; }
.verify-page__icon { font-size: 56px; color: #f59e0b; }
.verify-page__title { font-size: 22px; font-weight: 800; color: var(--ink); margin: 20px 0 12px; }
.verify-page__desc { color: #64748b; line-height: 1.7; margin-bottom: 32px; }
.verify-page__note { color: #64748b; font-size: 13px; margin-bottom: 32px; }

/* --- photo-search/result.php --- */
.search-result-success { background: #dcfce7; border: 1px solid #86efac; border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; font-size: 14px; color: #166534; }
.search-result-success .material-icons { font-size: 18px; vertical-align: middle; margin-right: 4px; }
.search-result__more { font-size: 13px; color: var(--ink-3); margin: 16px 0 0; text-align: center; }
.search-result__more a { font-weight: 600; }
.search-result-empty { text-align: center; }
.search-result-empty__icon { font-size: 40px; color: var(--ink-4); }
.search-result-empty__title { margin: 8px 0 4px; font-weight: 600; }
.search-result-empty__sub { font-size: 13px; color: var(--ink-3); margin: 0; }
.search-another { text-align: center; margin-top: 24px; }
.search-another a { font-size: 14px; color: var(--ink-3); }

/* --- qa各ページ --- */
.qa-new-form { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }

.qa-answers-heading { margin: 14px 0 8px; font-weight: 700; color: var(--ink); }

/* --- girls/register.php --- */
.register-heading { font-size: 24px; font-weight: 800; color: var(--ink); margin-bottom: 24px; }
.register-form { display: flex; flex-direction: column; gap: 20px; }

.form-label--block { display: block; margin-bottom: 6px; }
.reg-confirm-heading { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 20px; }
.reg-confirm-list { display: flex; flex-direction: column; gap: 0; }
.reg-confirm-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.reg-confirm-row:first-child { border-top: 1px solid var(--border); }
.reg-confirm-row__label { width: 120px; flex-shrink: 0; font-size: 13px; color: var(--ink-3); padding-top: 2px; }
.reg-confirm-row__value { flex: 1; font-size: 14px; color: var(--ink); word-break: break-all; line-height: 1.7; margin: 0; }
.reg-confirm-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.reg-confirm-actions .btn--submit { flex: 1; }
.reg-confirm-actions .btn--outline { flex-shrink: 0; }

/* --- girls/detail.php アクションリンク行 --- */
.girl-actions-row { margin: 20px 0; text-align: center; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.girl-actions-row--center { margin: 20px 0; text-align: center; }

/* --- apps/detail.php --- */
.apps-detail-btn-row { display: flex; gap: 8px; }
.apps-detail-btn-outline { padding: 9px 16px; }
.apps-detail-btn-icon { font-size: 15px; margin-right: 5px; }
.apps-detail-btn-primary { padding: 9px 20px; }

/* --- mypage/user-dm.php メッセージbubble --- */
/* 1通ぶん。相手のメッセージは「アイコン＋吹き出し」の横並び（LINEと同じ）。
   名前は出さない（誰との会話かは上のバーで分かる） */
.msg-wrap { display: flex; align-items: flex-start; gap: 8px; }
.msg-wrap--me { flex-direction: row-reverse; }
.msg-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.msg-wrap--me .msg-body { align-items: flex-end; }
/* 続けて送られたぶんはアイコンを出さないので、そのぶん字下げして左端をそろえる */
.msg-wrap--indent .msg-body { margin-left: 46px; }
.msg-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.msg-avatar--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
}
.msg-avatar--empty .material-icons { font-size: 23px; color: #94a3b8; }
.msg-bubble-body { max-width: 100%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.65; word-break: break-word; }
/* ユーザー名の横に出す丸プロフィール画像。DMの吹き出し（.msg-avatar）と同じサイズ感で、
   口コミカード・コメント・教えて！マイブロなど複数箇所で共通して使う */
.user-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.user-avatar--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
}
.user-avatar--empty .material-icons { font-size: 23px; color: #94a3b8; }
/* 教えて！マイブロなど小さいテキスト行に添える縮小版 */
.user-avatar--sm { width: 18px; height: 18px; }
.user-avatar--sm.user-avatar--empty .material-icons { font-size: 12px; }
/* 相手の吹き出しは白＋枠線。ページ背景（--bg）とほぼ同じ灰色だと沈んで見えないため */
.msg-bubble-body--them { background: var(--surface); border: 1px solid #cbd5e1; color: var(--ink); border-bottom-left-radius: 4px; }
/* 自分の吹き出しは黄色のまま。白文字はコントラストが足りずぼやけるので文字は濃色にする */
.msg-bubble-body--me { background: var(--accent); color: var(--ink); border-bottom-right-radius: 4px; }
.msg-img--single { max-width: 220px; max-height: 220px; width: auto; height: auto; border-radius: 8px; cursor: pointer; display: block; }
.msg-img--multi { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; cursor: pointer; display: block; }
/* 吹き出しと時刻を横に並べる（時刻は吹き出しの下端に合わせる） */
.msg-line { display: flex; align-items: flex-end; gap: 6px; max-width: 85%; }
.msg-wrap--me .msg-line { flex-direction: row-reverse; }
/* 文章と画像が両方あるメッセージは、吹き出しの下に画像を続けて置く */
.msg-line + .msg-line { margin-top: 4px; }
.msg-imgs { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-wrap--me .msg-imgs { justify-content: flex-end; }
.msg-stamp { font-size: 10px; color: var(--ink-5); white-space: nowrap; flex-shrink: 0; padding-bottom: 2px; }
/* 開いた時点で未読だったところに出す区切り。左右に線を引いて日付の区切りと見分ける */
.msg-unread-sep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    color: #dc2626;
    font-size: 11px;
    font-weight: 700;
}
.msg-unread-sep::before,
.msg-unread-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #f3b0b0;
}
/* 日付の変わり目に出す区切り */
.msg-date-sep { align-self: center; margin: 4px 0; }
.msg-date-sep span {
    display: inline-block;
    font-size: 11px; color: var(--ink-4);
    background: rgba(15, 25, 35, 0.06);
    padding: 3px 12px; border-radius: 999px;
}
/* 同じ人が続けて送ったぶんは間隔を詰める（.msg-list の gap 14px を 8px にする）。
   1通の中（文章と画像）は 4px なので、詰まり方に段階がつく */
.msg-wrap--follow { margin-top: -6px; }
/* 吹き出しの角。続きは前の吹き出しに寄せる */
.msg-wrap--follow .msg-bubble-body--them { border-top-left-radius: 4px; }
.msg-wrap--follow .msg-bubble-body--me { border-top-right-radius: 4px; }

/* --- mypage/edit.php --- */
.form-label-note { font-size: 11px; font-weight: 400; color: var(--ink-5); }
.app-check-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.app-check-label--checked { border-color: var(--accent); background: #eff6ff; }
.app-check-input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }

/* --- photo-search/index.php --- */
.search-lead { font-size: 13px; color: var(--ink-3); margin: 0 0 12px; }
.ticket-box--modal { margin-bottom: 12px; }
.btn--search-lg:disabled { opacity: 0.5; cursor: not-allowed; }

.avatar-ph--56 { width: 56px; height: 56px; border-radius: 8px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar-ph--56 .material-icons { font-size: 28px; color: #94a3b8; }

/* LINEのように1行ずつ隙間なく並べる。会話ごとの余白は付けず、区切りは間の細い線だけ */
.dm-conv-list {
    display: flex; flex-direction: column; gap: 0;
    margin-bottom: 24px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}
.dm-conv-item {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 0;
    border-radius: 0; padding: 14px 12px;
    color: inherit; text-decoration: none; transition: background 0.15s;
}
/* 会話の区切り。1件目の上と最終件の下には引かないよう、隣り合うときだけ上罫線を出す */
.dm-conv-item + .dm-conv-item { border-top: 1px solid var(--border-light); }
.dm-conv-item:hover { background: #f0f9ff; }
.dm-conv-item--unread { background: #eff6ff; }
.dm-conv-item--unread:hover { background: #dbeafe; }
.dm-conv-item__meta { flex: 1; min-width: 0; }
.dm-conv-item__row { display: flex; align-items: center; gap: 3px; margin-bottom: 2px; min-width: 0; }
.dm-conv-item__name { font-size: 13px; font-weight: 700; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-conv-item__preview { font-size: 12px; color: var(--ink-4); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 運営DMは本文を2行まで見せる（1行に詰めず折り返す） */
.dm-conv-item__preview--wrap {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5;
}
.dm-conv-item__self-label { color: var(--ink-5); }
/* 右側は上に受信日、その下に未読の数 */
.dm-conv-item__time { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; align-self: flex-start; }
.dm-conv-item__time > span:first-child { font-size: 11px; color: var(--ink-5); }
.dm-desk-icon {
    flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff;
}
.dm-desk-icon .material-icons { font-size: 20px; }
.badge--official {
    flex-shrink: 0;
    font-size: 10px; font-weight: 700; color: #fff; background: #2f8f63;
    padding: 2px 5px; border-radius: 999px; letter-spacing: 0.02em;
}
/* 通知が指している口コミ・質問への行き先。吹き出しの中の最後に出す */
.msg-subject-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 2px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--link);
}
.msg-subject-link .material-icons { font-size: 16px; }
/* お知らせの見出し。本文の上に太字で出す */
.msg-title { display: block; font-weight: 700; margin-bottom: 4px; }
/* === 確認モーダル（ブラウザの confirm() の置き換え） ===============
   includes/confirm_modal.php を参照。重ね順は他モーダルより上に置く */
.confirm-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1100;
    align-items: center;
    justify-content: center;
}
.confirm-modal-overlay--show { display: flex; }
.confirm-modal {
    background: #fff;
    border-radius: 12px;
    padding: 24px 24px 20px;
    width: 100%;
    max-width: 400px;
    margin: 0 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.confirm-modal__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 8px;
}
.confirm-modal__body {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.7;
    margin: 0 0 20px;
    white-space: pre-wrap;
}
.confirm-modal__body--center { text-align: center; }
.confirm-modal__actions { display: flex; gap: 10px; }
.confirm-modal__btn {
    flex: 1;
    border-radius: 8px;
    padding: 11px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.confirm-modal__btn--cancel {
    background: #fff;
    color: var(--ink-3);
    border: 1px solid var(--border);
}
.confirm-modal__btn--cancel:hover { background: var(--bg); }
.confirm-modal__btn--ok {
    background: var(--accent);
    color: #fff;
    border: none;
}
.confirm-modal__btn--ok:hover { background: var(--accent-dark); }

/* === 名前のハイパーリンク（サイト共通） ===================
   投稿者名・ユーザー名・女の子名のリンクは、サイト全体で青文字・下線なしに統一する。
   各コンポーネント側では色・下線を指定せず、名前リンクを増やすときはここに追記すること。
   パンくずやカード側の色指定（同じ詳細度）に負けないよう、意図的にファイル末尾に置いている */
a.name-link,
a.cm__user--link,
a.qa-card__asker-link,
a.rv2__author-name--link,
a.review-card__footer-author-link,
a.flagged-card__author-link,
a.conv-bar__name--link {
    color: var(--link);
    text-decoration: none;
}

/* === 閲覧日数が足りないときの案内モーダル（includes/viewing_days_modal.php） === */
.vdays-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vdays-modal[hidden] { display: none; }
.vdays-modal__dialog {
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 340px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    text-align: center;
}
.vdays-modal__icon { font-size: 40px; color: var(--accent); display: block; margin-bottom: 8px; }
.vdays-modal__title { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.vdays-modal__text { font-size: 13px; color: var(--ink-3); line-height: 1.7; margin: 0 0 20px; }
.vdays-modal__go {
    display: block;
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px;
    margin-bottom: 10px;
}
.vdays-modal__close {
    width: 100%;
    padding: 10px;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink-3);
    cursor: pointer;
    font-family: inherit;
}