@charset "UTF-8";
/* =========================================================
 * Lucilla Member System - 共通スタイル (修正版)
 * ========================================================= */

/*
=========================================================
 📑 style.css (プラグイン側) 目次（メニュー）
=========================================================
 1. 全体変数（テーマカラー）と基本設定
 2. コンテナ・共通ボタンUI
 3. 画像関連（グリッド・写真アイテム・Lightboxリンク）
 4. コピーボタン・アコーディオン（カレンダー開閉など）
 5. タブ切り替えUI
 6. テーブルUI（PC版と各種フォーム部品）
 7. 履歴追加カード・その他グリッドレイアウト
 8. 固定フッターナビゲーション＆固定保存ボタン
 9. スライドアップ式 ドロワーメニュー（設定パネル）
 10. モーダル群（ポップアップ全般・トリミング画面）
 11. カレンダーUI（グリッド＆リスト形式）
 12. スマホ用レスポンシブ上書き（モバイル特化CSS）
 13. その他フォーム部品・細かい調整クラス
=========================================================
*/

/* =========================================================
   1. 全体変数（テーマカラー）と基本設定
   ========================================================= */
:root { --main-pink: #f48fb1; --deep-pink: #d81b60; --light-pink: #fce4ec; --text-color: #555; }
body { color: var(--text-color); padding-bottom: 120px; overscroll-behavior-x: none; background: #fffafb; margin: 0; }
body > footer, .site-footer, #colophon, footer { display: none !important; }

/* =========================================================
   2. コンテナ・共通ボタンUI
   ========================================================= */
/* コンテナ・ボタン */
.mypage-container, .memberlist-container { max-width: 900px; margin: 30px auto; padding: 25px; background: #fff; border-radius: 15px; box-shadow: 0 4px 15px rgba(244,143,177,0.15); box-sizing: border-box; }
.memberlist-container { max-width: 1000px; }
.btn { display: inline-block; padding: 10px 15px; border-radius: 25px; cursor: pointer; font-size: 14px; text-decoration: none; text-align: center; transition: 0.3s; box-sizing: border-box; outline: none; }
.btn-select { background: #fff !important; color: var(--deep-pink) !important; border: 1px solid var(--main-pink) !important; font-weight: bold; width: 100%; cursor: pointer;} 
.btn-pink { background: var(--main-pink) !important; color: #fff !important; border: none !important; font-weight: bold; width: 100%; max-width: 300px; margin: 0 auto; display: block; box-shadow: 0 2px 6px rgba(244,143,177,0.3); }
.btn-delete { background: #fff !important; color: #ff5252 !important; border: 1px solid #ff5252 !important; font-weight: normal; width: 100%; }

/* =========================================================
   3. 画像関連（グリッド・写真アイテム・Lightboxリンク）
   ========================================================= */
/* 画像関連 */
.photo-wrap { width: 100% !important; aspect-ratio: 1/1 !important; background: var(--light-pink); border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; z-index: 1; } 
.photo-wrap a.gallery-link { display: block; width: 100%; height: 100%; position: relative; z-index: 2; }
.zoom-img { width: 100%; height: 100%; object-fit: cover !important; display: block; position: absolute; max-width: none !important; top:0; left:0; }
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; }
.photo-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 15px; margin-bottom: 20px; }
.photo-item { background: #fff; border: 1px solid #f0f0f0; box-shadow: 0 2px 8px rgba(0,0,0,0.03); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; transition: .3s; }
.empty-photo-slot { display: none !important; }
.item-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 5px; }
.item-btns .btn { width: 100% !important; padding: 8px 0; font-size: 13px; }
.no-photo-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff5f8; color:#f48fb1; }

/* プロフィール写真グリッド */
.profile-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.photo-item-wrapper { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; box-shadow: 0 2px 8px rgba(0,0,0,0.1); background: #f9f9f9; }
.dl-overlay-btn { position: absolute; bottom: 8px; right: 8px; background: rgba(255,255,255,0.85); color: var(--deep-pink); padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: 0.2s; text-decoration: none; z-index: 10; }
.dl-overlay-btn:active { background: var(--main-pink); color: #fff; transform: scale(0.9); }

/* =========================================================
   4. コピーボタン・アコーディオン（カレンダー開閉など）
   ========================================================= */
/* コピーボタン・アコーディオン */
.copy-btn-ui { background:#fff; border:1px solid #ccc; color:#555; padding:8px 12px; font-size:11px; border-radius:6px; font-weight:bold; display:inline-flex; align-items:center; gap:5px; box-shadow:0 1px 3px rgba(0,0,0,0.1); cursor:pointer; transition:0.2s; outline:none; }
.copy-btn-ui:active { background:#f5f5f5; transform:scale(0.98); }
.acc-cal-details { background:#fff; border:1px solid #f0f0f0; border-radius:12px; margin-bottom:20px; overflow:hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.acc-cal-summary { padding:15px; font-weight:bold; color:var(--deep-pink); cursor:pointer; outline:none; list-style:none; display:flex; justify-content:space-between; align-items:center; user-select:none; background:#fffafb; border-bottom: 1px solid transparent; transition: 0.2s; }
.acc-cal-summary::-webkit-details-marker { display:none; }
.acc-cal-details[open] .acc-cal-summary { border-bottom-color: #fce4ec; }
.admin-profile-accordion { border-bottom: 1px solid #f0f0f0; margin-bottom: 20px; padding-bottom: 10px; }
.admin-profile-accordion summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; outline: none; user-select: none; }
.admin-profile-accordion summary::-webkit-details-marker { display: none; }

/* =========================================================
   5. タブ切り替えUI
   ========================================================= */
/* タブ切り替え */
.tabs-nav { display: flex !important; border-bottom: 2px solid #f0f0f0; margin-bottom: 25px; overflow-x: auto; white-space: nowrap; gap: 5px; scrollbar-width: none; position: sticky; top: 0; z-index: 100; background: #fff; padding-top: 10px;} 
.tabs-nav::-webkit-scrollbar { display: none; } 
.tab-btn { flex: 1 0 auto; min-width: max-content; padding: 12px 15px; cursor: pointer; background: transparent; border: none; text-align: center; font-weight: bold; color: #aaa; border-radius: 10px 10px 0 0; transition: 0.3s; font-size: 14px; outline:none; } 
.tab-btn.active { background: var(--main-pink); color: #fff; box-shadow: 0 -2px 10px rgba(244,143,177,0.2); }
.tab-panel { display: none !important; animation: fadeIn 0.4s ease; min-height: 450px; } 
.tab-panel.active { display: block !important; }
.swipe-container { position: relative; width: 100%; display: grid; grid-template-columns: 1fr; align-items: start; overflow: hidden; }

/* =========================================================
   6. テーブルUI（PC版と各種フォーム部品）
   ========================================================= */
/* テーブル（PC版） */
@media (min-width: 601px) {
    .table-ui { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; border: 1px solid #f0f0f0; box-shadow: 0 2px 8px rgba(0,0,0,0.02); overflow: hidden; margin-bottom: 20px; }
    .table-ui tr { border-bottom: 1px solid #f0f0f0; display: table-row; }
    .table-ui tr:last-child { border-bottom: none; }
    .table-ui th { background: var(--light-pink); color: var(--deep-pink); padding: 15px; width: 30%; text-align: left; font-size: 14px; font-weight: bold; vertical-align: middle; display: table-cell; border-right: 1px solid #fff; }
    .table-ui td { padding: 15px; font-size: 14px; vertical-align: middle; color: var(--text-color); display: table-cell; }
}
.table-ui input[type="text"], .table-ui input[type="number"], .table-ui select, .table-ui textarea { width: 100%; box-sizing: border-box; border: 1px solid #f0f0f0; border-radius: 8px; padding: 12px; background: #fffafb; font-size:14px; outline:none; transition:0.2s; }
.table-ui input[type="text"]:focus, .table-ui input[type="number"]:focus, .table-ui select:focus, .table-ui textarea:focus { border-color: var(--main-pink); background: #fff; }
.table-ui textarea { min-height:80px; }

/* =========================================================
   7. 履歴追加カード・その他グリッドレイアウト
   ========================================================= */
/* 履歴・アコーディオン・その他 */
.stats-grid-row1{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:10px;}.stats-grid-row2{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}.stats-col{display:flex;flex-direction:column;gap:5px;}.stats-col label{font-size:12px;font-weight:bold;color:var(--deep-pink);}.history-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;align-items:end;}.edit-flex{display:flex!important;gap:30px;align-items:flex-start;}.avatar-edit-part{width:180px!important;flex-shrink:0;}
.history-card { background:#fff; border:1px solid #f0f0f0; box-shadow: 0 2px 8px rgba(0,0,0,0.03); border-radius:12px; padding:20px; margin-bottom:15px; width: 100%; box-sizing: border-box; } 
.history-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; cursor: pointer; list-style: none; outline: none; } 
details[open] .h-icon::before { content: "－"; } details:not([open]) .h-icon::before { content: "＋"; } 
.h-title { font-size:20px; font-weight:bold; color:var(--deep-pink); } 
.h-meta { font-size:12px; color:#555; background:#fffafb; padding:6px 12px; border-radius:20px; display: inline-flex; gap: 5px; margin-left: 10px; border: 1px solid #fce4ec; }

/* =========================================================
   8. 固定フッターナビゲーション＆固定保存ボタン
   ========================================================= */
/* フッターナビゲーション */
.fixed-bottom-nav { position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; background: rgba(255, 255, 255, 0.98) !important; border-top: 1px solid #e0e0e0 !important; display: flex !important; justify-content: space-around !important; align-items: center !important; padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)) !important; z-index: 10000 !important; box-sizing: border-box; gap: 8px; }
.fixed-bottom-nav a, .fixed-bottom-nav .menu-wrapper, .fixed-bottom-nav button { flex: 1 !important; text-align: center !important; font-weight: bold !important; text-decoration: none !important; font-size: 11px !important; color: var(--deep-pink) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; transition:0.2s; background: transparent !important; border: none !important; border-radius: 8px !important; padding: 5px !important; outline:none; cursor:pointer; }
.fixed-bottom-nav a.active, .fixed-bottom-nav button.active { color: var(--main-pink) !important; background: #fff5f8 !important; } 
.fixed-bottom-nav svg { width: 24px !important; height: 24px !important; display: block !important; margin: 0 auto !important; }
.badge-count { position:absolute; top:-6px; right:-8px; background:#ff3b30; color:#fff; font-size:10px; font-weight:bold; padding:2px 5px; border-radius:10px; line-height:1; border:1px solid #fff; z-index:10; }

/* 固定保存ボタン */
.fixed-save-nav { position: fixed !important; bottom: calc(55px + env(safe-area-inset-bottom, 0px)) !important; left: 0 !important; width: 100% !important; z-index: 9999 !important; background: #fff; padding-bottom: 5px; box-shadow: 0 -4px 15px rgba(0,0,0,0.1); }
.fixed-save-btn { width: 100% !important; display: block !important; background: var(--main-pink) !important; color: #fff !important; border: none !important; font-size: 16px !important; font-weight: bold !important; padding: 18px 10px !important; cursor: pointer !important; margin: 0 !important; text-align: center !important; outline: none; position: relative; z-index: 9999; }

/* =========================================================
   9. スライドアップ式 ドロワーメニュー（設定パネル）
   ========================================================= */
/* ドロワーメニュー */
.new-drawer-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 20000; display: none; opacity: 0; transition: opacity 0.3s ease; }
.new-drawer-overlay.active { display: block; opacity: 1; }
.new-drawer-menu { position: fixed; bottom: -100%; left: 0; width: 100%; background: #fff; z-index: 20001; transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); border-radius: 20px 20px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -5px 20px rgba(0,0,0,0.15); box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.new-drawer-menu.active { bottom: 0; }
.new-drawer-menu a, .new-drawer-menu div.btn, .new-drawer-menu button { display: block; width: 100%; padding: 15px; text-align: center; font-size: 15px; font-weight: bold; color: var(--deep-pink); background: #fffafb; border: 1px solid #fce4ec; border-radius: 12px; text-decoration: none; box-sizing: border-box; outline: none; cursor: pointer; margin:0; }

/* =========================================================
   10. モーダル群（ポップアップ全般・トリミング画面）
   ========================================================= */
/* モーダル群 */
.crop-modal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0,0,0,0.6) !important; z-index: 9999999 !important; display: none; align-items: center !important; justify-content: center !important; overscroll-behavior-y: none; backdrop-filter: blur(3px) !important; padding: 20px !important; box-sizing: border-box !important; } 
.crop-modal.active { display: flex !important; }
.modal-box { background:#fff !important; width:100% !important; max-width:420px !important; border-radius:15px !important; padding:20px !important; position:relative !important; max-height:85vh !important; overflow-y:auto !important; box-shadow:0 10px 30px rgba(0,0,0,0.2) !important; box-sizing:border-box !important; margin: auto !important; z-index: 9999999 !important; display: block !important; }

#cal-delete-confirm-modal { z-index: 2147483646 !important; }
#cal-delete-confirm-modal .modal-box { z-index: 2147483647 !important; }

.cal-edit-label { display: block; text-align: left; font-size: 12px; font-weight: bold; color: var(--deep-pink); margin-top: 10px; margin-bottom: 5px; } 
.cal-edit-input, .cal-edit-select, .cal-edit-textarea { width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 8px; padding: 10px; font-size: 14px; background: #fffafb; outline:none; }

/* =========================================================
   11. カレンダーUI（グリッド＆リスト形式）
   ========================================================= */
/* カレンダーUI */
.cal-cell{background:#fff;min-height:80px;padding:5px;cursor:pointer;border:1px solid #f0f0f0;display:flex;flex-direction:column;box-sizing:border-box;} .cal-cell:active{background:#fff5f8;} .cal-list-container{display:flex;flex-direction:column;background:#fff;border:1px solid #f0f0f0; box-shadow:0 2px 8px rgba(0,0,0,0.03); border-radius:8px;max-height:600px;overflow-y:auto;-webkit-overflow-scrolling:touch;} .cal-list-row{display:flex;align-items:flex-start;border-bottom:1px solid #f0f0f0;padding:15px 10px;cursor:pointer;} .cal-list-row:active{background:#fff5f8;} .cal-list-date{width:60px;flex-shrink:0;text-align:center;font-weight:bold;font-size:16px;} .cal-list-date span{display:block;font-size:10px;font-weight:normal;} .cal-list-content{flex:1;min-width:0;padding-left:15px;border-left:3px solid var(--light-pink);display:flex;flex-direction:column;gap:5px;}
.taikai-reason-btn { display: block !important; width: 100% !important; padding: 12px !important; background: #fff !important; border: 1px solid #ddd !important; border-radius: 8px !important; color: #555 !important; font-size: 14px !important; cursor: pointer !important; text-align: center !important; margin: 0 !important; outline: none !important; appearance: none !important; box-sizing: border-box !important; transition:0.2s; }
.taikai-reason-btn.active { background: #fff5f8 !important; border: 2px solid var(--deep-pink) !important; color: var(--deep-pink) !important; font-weight: bold !important; }
#custom-ptr { position: fixed; top: -60px; left: 0; width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--light-pink); color: var(--deep-pink); font-weight: bold; font-size: 14px; z-index: 999999; transition: transform 0.2s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

/* =========================================================
   12. スマホ用レスポンシブ上書き（モバイル特化CSS）
   ========================================================= */
/* スマホ用レスポンシブ */
@media (max-width: 600px) { 
    .mypage-container, .memberlist-container { padding: 15px !important; margin: 15px auto !important; border-radius: 8px; } 
    .photo-grid, .photo-gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } 
    .edit-flex { flex-direction: column; gap: 20px; } 
    .avatar-edit-part { width: 100% !important; margin: 0 auto; } 
    .avatar-item-mobile { flex-direction: column !important; padding: 25px 15px !important; background: #fff !important; border: 1px solid #f0f0f0 !important; box-shadow:0 2px 8px rgba(0,0,0,0.03); border-radius: 15px !important; align-items: center !important; margin-bottom: 20px; position: relative; } 
    .avatar-img-box { width: 100%; display: flex; justify-content: center; margin-bottom: 15px; } 
    .avatar-img-box .photo-wrap { border-radius: 50%; width: 160px !important; height: 160px !important; } 
    .item-btns { flex-direction: row !important; flex-wrap: wrap !important; gap: 5px !important; margin-top: 5px !important; } 
    .item-btns .btn { flex: 1 1 45% !important; padding: 6px 2px !important; font-size: 11px !important; margin: 0 !important; } 
    .avatar-item-mobile .item-btns { width: 100%; display: flex; flex-direction: row; justify-content: center; gap: 10px; margin: 0; } 
    .avatar-item-mobile .item-btns .btn { flex: 1; padding: 8px 5px !important; font-size: 12px !important; border-radius: 20px; white-space: nowrap; } 
    .stats-grid-row1, .stats-grid-row2, .history-grid-3 { display: flex !important; flex-direction: column !important; gap: 10px !important; } 
    .stats-col { width: 100% !important; box-sizing: border-box !important; }
    .history-item { width: 100% !important; box-sizing: border-box !important; padding: 15px 10px !important; overflow: hidden !important; }
    .history-item input, .history-item select, .history-item textarea { width: 100% !important; box-sizing: border-box !important; max-width: 100% !important; }

    table.table-ui, table.table-ui tbody, table.table-ui tr, table.table-ui th, table.table-ui td { display: flex !important; flex-direction: column !important; width: 100% !important; box-sizing: border-box !important; }
    table.table-ui { border: none !important; background: transparent !important; box-shadow: none !important; }
    table.table-ui tr { margin-bottom: 15px !important; border: none !important; border-bottom: 1px solid #f0f0f0 !important; border-radius: 0 !important; overflow: hidden !important; padding: 0 0 15px 0 !important; background: transparent !important; align-items: flex-start !important; }
    table.table-ui th { background: var(--main-pink) !important; color: #fff !important; padding: 4px 12px !important; border-bottom: none !important; border-radius: 15px !important; font-size: 11px !important; margin-bottom: 10px !important; width: fit-content !important; max-width: 100% !important; text-align: left !important; align-self: flex-start !important; border: none !important; }
    table.table-ui td { padding: 0 5px !important; border-bottom: none !important; background: transparent !important; align-self: stretch !important; width: 100% !important; border: none !important; }
    table.table-ui input[type="text"], table.table-ui input[type="number"], table.table-ui select { background: #fff !important; border: 1px solid #ddd !important; height: 38px !important; padding: 5px 10px !important; font-size: 14px !important; } 
    table.table-ui textarea { background: #fff !important; border: 1px solid #ddd !important; min-height: 60px !important; padding: 8px 10px !important; font-size: 14px !important; } 
    .birth-select-wrap { justify-content: flex-start !important; } 

    .profile-photo-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
    .dl-overlay-btn { bottom: 5px !important; right: 5px !important; padding: 6px !important; }
    .dl-overlay-btn svg { width: 14px !important; height: 14px !important; }
}

/* =========================================================
   13. その他フォーム部品・細かい調整クラス
   ========================================================= */
.birth-select-wrap { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .birth-select-wrap select { width: auto; padding: 10px; flex: 1; min-width: 60px; } .choice-group { display: flex; flex-wrap: wrap; gap: 15px; padding: 5px 0; } .choice-group label { cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 15px; } .choice-group input { width: auto !important; margin: 0; }
.crop-container { width: 100%; max-height: 60vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #333; border-radius: 8px; margin-bottom: 15px; } #crop-img { max-width: 100%; max-height: 60vh; display: block; } .cropper-view-box, .cropper-face { border-radius: 50%; } .cropper-line, .cropper-point.point-se { display: none !important; }

.label-badge { background: #f48fb1; color: #fff; padding: 4px 12px; border-radius: 15px; font-size: 12px; font-weight: bold; display: inline-block; margin-bottom: 8px; }
.req-mark { color: #d81b60; font-size: 11px; margin-left: 5px; font-weight:bold; }
.form-control { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; background: #fff; box-sizing: border-box; outline:none; transition:0.2s; }
.form-control:focus { border-color: #f48fb1; box-shadow: 0 0 5px rgba(244,143,177,0.3); }

/* ボタンスタイル上書き */
.btn-select { background: #fff !important; color: #d81b60 !important; border: 1px solid #d81b60 !important; font-weight: bold; cursor: pointer; text-align: center; }
.btn-pink { background: #f48fb1 !important; color: #fff !important; border: none !important; font-weight: bold; text-align: center; box-shadow: 0 2px 6px rgba(244,143,177,0.3); }
.btn-delete { background: #fff !important; color: #ff5252 !important; border: 1px solid #ff5252 !important; font-weight: bold; text-align: center; }