/* =============================================================================
   app-custom.css
   バックエンド構築で新規追加したクラスのスタイル補助
   （既存 common.css / contents.css / mypage.css を補完。SSR公開ページ・会員ページ共通）
   ============================================================================= */

:root{
  --tk-accent:#dc503c;
  --tk-ink:#222;
  --tk-sub:#666;
  --tk-line:#e5e5e5;
  --tk-bg:#fff;
}


/* 空表示 */
.salon-list-empty,.review-list-empty,.tokoest-list-empty,.mypage-empty,.mypage-loading,
.salon-detail-reviews-empty,.tokoest-detail-reviews-empty{padding:40px 0;text-align:center;color:var(--tk-sub)}



/* ---- 認証ページ（auth-*） ---- */
.auth-page{max-width:760px;margin:30px auto;padding:0 20px}
.auth-box{max-width:440px;margin:0 auto;background:#fff;border:1px solid var(--tk-line);border-radius:12px;padding:28px}
.auth-box--wide{max-width:760px}
.auth-box__ttl{font-size:22px;font-weight:700;text-align:center;margin-bottom:8px}
.auth-logo{display:block;text-align:center;margin-bottom:14px}
.auth-logo img{height:26px}
.auth-box__lead{font-size:13px;color:var(--tk-sub);text-align:center;margin-bottom:16px}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tk-sub)}
.auth-field--full{grid-column:1 / -1}
.auth-field input,.auth-field select,.auth-field textarea{padding:10px 12px;border:1px solid #ccc;border-radius:8px;font-size:15px;color:var(--tk-ink)}
.auth-field input:focus,.auth-field select:focus,.auth-field textarea:focus{outline:none;border-color:var(--tk-accent)}
.req{color:var(--tk-accent)}
/* .auth-agree のチェックボックス（利用規約同意・退会確認等で共通利用）。
   2026-09-03時点では、common.cssのグローバルリセット（input{appearance:none;border:none;
   background:none;...}）に加えmypage.css側のinput{width:100%;height:30px;...}が
   チェックボックスにもそのまま適用され、幅100%・高さ30pxの空欄ボックスに見えてしまう不具合を
   ネイティブ表示への強制（appearance:auto）で回避していたが、2026-09-05に mypage.css が
   提供する正式なチェックボックス部品（`input.visibility-hidden` + `span.checkbox-text`。
   独自デザインのチェックマークを::before/::afterで描画）に統一したため、この場当たり的な
   ネイティブ表示強制は不要になり削除した（`.mypage-payment` の支払い設定チェックボックス等、
   mypage.cssを使う全ページで同じ部品に統一済み）。 */
.auth-agree{display:flex;align-items:flex-start;gap:6px;font-size:13px;color:var(--tk-sub)}
.auth-agree a{color:var(--tk-accent)}
.auth-submit{margin-top:8px;padding:13px;background:var(--tk-accent);color:#fff;border:none;border-radius:999px;font-size:16px;cursor:pointer}
.auth-submit:hover{opacity:.9}
.auth-links{margin-top:16px;display:flex;flex-direction:column;gap:8px;text-align:center;font-size:13px}
.auth-links a{color:var(--tk-accent);text-decoration:none}
.auth-error{background:#fdecea;color:#c0392b;border:1px solid #f5c6cb;border-radius:8px;padding:12px;font-size:14px;margin-bottom:14px}
.auth-success{background:#eafaf1;color:#1e7e46;border:1px solid #b7e4c7;border-radius:8px;padding:12px;font-size:14px;margin-bottom:14px}

/* ---- マイページ（mypage-*） ---- */
.mypage{max-width:1080px;margin:20px auto;padding:0 20px}
.mypage-layout{display:grid;grid-template-columns:220px 1fr;gap:24px}
.mypage-nav ul{list-style:none;padding:0;margin:0;border:1px solid var(--tk-line);border-radius:10px;overflow:hidden;background:#fff}
.mypage-nav li+li{border-top:1px solid var(--tk-line)}
.mypage-nav a{display:block;padding:12px 16px;text-decoration:none;color:var(--tk-ink);font-size:14px}
.mypage-nav a:hover{background:var(--tk-bg)}
.mypage-nav a.current{background:var(--tk-accent);color:#fff}
.mypage-main{min-width:0}
.mypage-ttl{font-size:20px;font-weight:700;margin:0 0 16px}
.mypage-profile-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--tk-line);border-radius:12px;padding:16px}
.mypage-profile-card__img img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.mypage-profile-card__name{font-size:18px;font-weight:700}
.mypage-profile-card__badge{font-size:12px;color:var(--tk-accent)}
.mypage-stats{display:flex;gap:12px;margin:16px 0}
.mypage-stat{flex:1;text-align:center;background:#fff;border:1px solid var(--tk-line);border-radius:10px;padding:14px}
.mypage-stat em{display:block;font-size:22px;font-weight:700;color:var(--tk-accent);font-style:normal}
.mypage-stat span{font-size:12px;color:var(--tk-sub)}
.mypage-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mypage-shortcuts a{display:block;padding:14px;text-align:center;background:#fff;border:1px solid var(--tk-line);border-radius:10px;text-decoration:none;color:var(--tk-ink)}
.mypage-shortcuts a:hover{border-color:var(--tk-accent);color:var(--tk-accent)}
.mypage-review-item,.mypage-point-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--tk-line);font-size:14px}
.mypage-review-item__shop{font-weight:700;color:var(--tk-ink);text-decoration:none}
.mypage-review-item__score{color:var(--tk-accent);font-weight:700}
.mypage-review-item__comment{flex:1;color:var(--tk-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mypage-review-item__date,.mypage-point-item__date{color:#aaa;font-size:12px}
.mypage-review-item__edit{color:var(--tk-accent);text-decoration:underline;white-space:nowrap;font-size:12px;flex-shrink:0}
.mypage-point-balance{font-size:16px;margin-bottom:16px}
.mypage-point-balance em{font-size:24px;font-weight:700;color:var(--tk-accent);font-style:normal}
.mypage-point-item__note{flex:1}
.mypage-point-item__amt.plus{color:#1e7e46;font-weight:700}
.mypage-point-item__amt.minus{color:#c0392b;font-weight:700}

/* ---- クチコミ投稿フォーム（post-review / rating / tech4） ---- */
.post-review-box{max-width:760px;margin:16px auto;background:#fff;border:1px solid var(--tk-line);border-radius:12px;padding:24px}
.post-review-type{display:flex;flex-direction:column;gap:8px;margin:12px 0 20px;font-size:14px}
.post-review-type label{padding:10px 12px;border:1px solid var(--tk-line);border-radius:8px;cursor:pointer}
.rating-item{padding:14px 0;border-bottom:1px solid var(--tk-line)}
.rating-item__label{font-size:14px;font-weight:600;margin-bottom:8px}
.na-hint{font-size:11px;color:var(--tk-sub);font-weight:400;margin-left:6px}
.rating-stars{display:flex;gap:6px;flex-wrap:wrap}
.star input{display:none}
.star span{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid #ccc;border-radius:8px;cursor:pointer;font-size:14px}
.star input:checked+span{background:var(--tk-accent);color:#fff;border-color:var(--tk-accent)}
.star-na{font-size:12px;color:var(--tk-sub);display:inline-flex;align-items:center;gap:4px;margin-left:6px}
.tech4-list{display:flex;flex-direction:column;gap:8px}
.tech4-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tech4-check{font-size:13px;min-width:150px}
.tech4-stars{display:inline-flex;gap:4px}
.tech4-stars .star span{width:30px;height:30px;font-size:12px}

/* レスポンシブ */
@media (max-width:768px){
  .mypage-layout{grid-template-columns:1fr}
  .auth-grid{grid-template-columns:1fr}
  .mypage-shortcuts{grid-template-columns:1fr}
  .salon-detail-info-list{grid-template-columns:90px 1fr}
}

/* =============================================================================
   会員ページ追加（会員種別・支払い・アカウント・マイメモ）
   ============================================================================= */
.mypage-subttl{font-size:15px;font-weight:700;margin:20px 0 10px;padding-left:8px;border-left:3px solid var(--tk-accent)}
.membership-current,.account-current{background:#fff;border:1px solid var(--tk-line);border-radius:8px;padding:14px;margin-bottom:16px}
.membership-current em,.account-current em{color:var(--tk-accent);font-style:normal;font-weight:700}
.membership-note{font-size:13px;color:var(--tk-sub);line-height:1.7;margin:6px 0 12px}
.membership-plan-buttons{display:flex;gap:12px;flex-wrap:wrap}
.membership-yearly{background:#fff;color:var(--tk-accent);border:1px solid var(--tk-accent)}
.membership-cancel-btn,.account-withdraw-btn{background:#fff;color:#c0392b;border:1px solid #c0392b}
.account-block{background:#fff;border:1px solid var(--tk-line);border-radius:10px;padding:18px;margin-bottom:16px}
.account-withdraw{border-color:#f2c4bd}
.payment-toggle{display:flex;align-items:center;gap:8px;font-size:14px;background:#fff;border:1px solid var(--tk-line);border-radius:8px;padding:14px}
.memo-upgrade,.premium-lock,.shopadmin-upgrade{background:#fff;border:1px dashed var(--tk-accent);border-radius:10px;padding:20px;text-align:center;margin:16px 0}
.memo-upgrade a,.premium-lock a{display:inline-block;margin-top:10px}
.memo-form{margin-bottom:16px}

/* =============================================================================
   加盟店管理（shopadmin-*）
   ============================================================================= */
.shopadmin-body{background:var(--tk-bg)}
.shopadmin-header{display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--tk-line);padding:12px 20px}
.shopadmin-header__logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tk-ink)}
.shopadmin-header__logo img{height:22px}
.shopadmin-header__logo span{font-weight:700;font-size:14px}
.shopadmin-header__right{display:flex;align-items:center;gap:12px;font-size:13px}
.shopadmin-header__shop{font-weight:700}
.shopadmin-header__badge{font-size:11px;color:#fff;background:var(--tk-accent);border-radius:999px;padding:2px 10px}
.shopadmin-header__logout{color:var(--tk-sub);text-decoration:none}
.shopadmin-header__logout:hover{color:var(--tk-accent)}
.shopadmin{max-width:1080px;margin:20px auto;padding:0 20px}
.shopadmin--plain{max-width:520px}
.shopadmin-layout{display:grid;grid-template-columns:220px 1fr;gap:24px}
.shopadmin-nav ul{list-style:none;padding:0;margin:0;border:1px solid var(--tk-line);border-radius:10px;overflow:hidden;background:#fff}
.shopadmin-nav li+li{border-top:1px solid var(--tk-line)}
.shopadmin-nav a{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;text-decoration:none;color:var(--tk-ink);font-size:14px}
.shopadmin-nav a:hover{background:var(--tk-bg)}
.shopadmin-nav a.current{background:var(--tk-accent);color:#fff}
.nav-premium{font-size:10px;background:#f4b400;color:#fff;border-radius:3px;padding:1px 5px;margin-left:6px}
.shopadmin-nav a.current .nav-premium{background:#fff;color:var(--tk-accent)}
.shopadmin-main{min-width:0}
.shopadmin-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.shopadmin-summary .mypage-stat{flex:1;min-width:120px}
.ttl-premium{font-size:11px;color:#fff;background:#f4b400;border-radius:999px;padding:2px 10px;vertical-align:middle;margin-left:8px}
.menu-cat{background:#fff;border:1px solid var(--tk-line);border-radius:8px;padding:14px;margin-bottom:12px}
.menu-cat-name{width:100%;font-weight:700;margin-bottom:8px;padding:8px;border:1px solid #ccc;border-radius:6px}
.menu-item-row{display:flex;gap:8px;margin-bottom:6px}
.menu-item-row input{flex:1;padding:8px;border:1px solid #ccc;border-radius:6px}
.menu-item-row input:last-of-type{flex:0 0 100px}
.review-reply{background:var(--tk-bg);border-left:3px solid var(--tk-accent);padding:8px 12px;margin:8px 0;font-size:13px}
.reply-box{margin-top:10px}
.reply-box textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;font-size:14px;margin-bottom:6px}
@media (max-width:768px){
  .shopadmin-layout{grid-template-columns:1fr}
}

/* =============================================================================
   画像アップロードUI（アイコン・サムネ・店舗写真）
   ============================================================================= */
.photo-upload-btn{display:inline-block;padding:9px 16px;border:1px solid var(--tk-accent);color:var(--tk-accent);
  background:#fff;border-radius:999px;font-size:13px;cursor:pointer;transition:.15s}
.photo-upload-btn:hover{background:var(--tk-accent);color:#fff}

/* アイコン（会員プロフィール） */
.avatar-upload{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.avatar-preview{width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--tk-line)}

/* 店舗サムネイル */
.thumb-upload{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--tk-line);
  border-radius:10px;padding:14px;margin-bottom:16px}
.thumb-upload__label{font-size:13px;color:var(--tk-sub)}
.thumb-preview img,.photo-header-preview img{border-radius:8px;object-fit:cover}
.thumb-preview img{width:120px;height:120px}

/* 店舗写真管理 */
.photo-block{background:#fff;border:1px solid var(--tk-line);border-radius:10px;padding:18px;margin-bottom:16px}
.photo-header-preview{margin-bottom:10px;position:relative}
.photo-header-preview img{width:100%;max-width:600px;aspect-ratio:1500/520}
.photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:12px}
.photo-thumb{position:relative}
.photo-thumb img{width:100%;aspect-ratio:800/600;object-fit:cover;border-radius:8px;border:1px solid var(--tk-line)}
.photo-thumb .photo-del,.photo-header-preview .photo-del{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);
  color:#fff;border:none}
.photo-del{cursor:pointer}

/* =============================================================================
   営業日カレンダー
   ============================================================================= */
.cal-legend{display:flex;gap:18px;margin-bottom:14px;font-size:13px;color:var(--tk-sub)}
.cal-legend__item{display:inline-flex;align-items:center;gap:6px}
.cal-dot{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--tk-line)}
.cal-dot.cal-open{background:#fff}
.cal-dot.cal-regular{background:#e4e7eb}
.cal-dot.cal-irregular{background:#f7c4bc}
.cal-months{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:20px}
.cal-month{background:#fff;border:1px solid var(--tk-line);border-radius:10px;padding:14px}
.cal-month__ttl{font-weight:700;text-align:center;margin-bottom:10px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-wd{text-align:center;font-size:11px;color:var(--tk-sub);padding:2px 0}
.cal-wd.sun{color:#d0453b}.cal-wd.sat{color:#3b73d0}
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:13px;
  border:1px solid var(--tk-line);border-radius:6px;cursor:pointer;user-select:none;transition:.1s;background:#fff}
.cal-cell.cal-empty{border:none;background:transparent;cursor:default}
.cal-cell.cal-open{background:#fff}
.cal-cell.cal-regular{background:#e4e7eb;color:var(--tk-sub)}
.cal-cell.cal-irregular{background:#f7c4bc;color:#a3271b;font-weight:700}
.cal-cell[data-d]:hover{border-color:var(--tk-accent)}
.cal--readonly .cal-cell{cursor:default}
.salon-detail-calendar{margin-top:28px}
@media (max-width:768px){
  .cal-months{grid-template-columns:1fr}
}

/* 事務局管理（/admin/）用のCSSは public_html/assets/css/admin.css に分離済み。
   admin配下のページのみ head_open.php で追加読み込みする。 */

/* マイページ・サロン管理画面（2026-09-03）
   ヘッダー・フッターはフロントと共通（front.partials.header/footer）だが、
   footer-pickup-nav（SEARCH/POSTED SALON/MAGAGINE/RANKING/KUCHIKOMI/TOKOESTの6枠バナー）のみ非表示にする。
   body に mypage-body（マイページ）/ shopadmin-body（加盟店管理・既存）を付与して判定する。 */
/* =============================================================================
   系列店舗登録（/shopadmin/group-shops）§14 2026-09-06新規
   ============================================================================= */
.group-shop-add{background:#fff;border:1px solid var(--tk-line);border-radius:10px;padding:18px;margin-bottom:8px}
.group-shop-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.group-shop-row__input{flex:1;min-width:220px;padding:8px 12px;border:1px solid #ccc;border-radius:8px;font-size:14px}
.group-shop-row__remove{background:none;border:1px solid var(--tk-line);border-radius:50%;width:28px;height:28px;
  line-height:1;cursor:pointer;color:var(--tk-sub)}
.group-shop-row__result{width:100%;font-size:13px;padding-left:2px;color:var(--tk-sub)}
.group-shop-row__result.ok{color:#1e7e46}
.group-shop-row__result.ng{color:#c0392b}
.group-shop-highlight{outline:2px solid var(--tk-accent);outline-offset:4px;border-radius:6px}

/* 事務局管理（/admin/shops）の系列店舗セクション§14 2026-09-06新規 */
.admin-group-shop-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.admin-group-shop-list__item{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 10px;background:#f7f7f7;border-radius:6px;font-size:13px}

body.mypage-body .footer-pickup-nav,
body.shopadmin-body .footer-pickup-nav {
  display: none;
}

/* /shopadmin/reviews のクチコミカード内の間隔調整（既存デザインには無い返信欄のため最小限追加。2026-09-06） */
.mypage-reviews-list .review-list .tokoest-review-list-contents-salon,
.mypage-reviews-list .review-list .reply-box {
  margin-top: 20px;
}
.mypage-reviews-list .review-list .reply-box textarea {
  min-height: 70px;
  margin-bottom: 10px;
}