/* Rejoyce® balloon — 会員ページ共通スタイル
   本体サイト（style.css）のフォント・角丸・余白の思想は踏襲しつつ、
   会員ページは「白・アイボリー・淡いベージュ・淡いピンク」を基調にした
   独自パレットを使う。 */

:root {
  --mem-bg:      #FBF8F3;
  --mem-card:    #FFFFFF;
  --mem-ivory:   #F7F2EA;
  --mem-beige:   #F1E6D8;
  --mem-pink:    #F7E4E1;
  --mem-pink-dp: #C99089;
  --mem-pink-dk: #B87971;
  --mem-line:    rgba(196,158,138,.28);
  --mem-text:    #362E28;
  --mem-textm:   #6E6157;
  --mem-textl:   #A79A8C;
  --mem-shadow:  0 10px 34px rgba(150,110,90,.10);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.mem-body {
  margin:0;
  font-family:'Noto Sans JP',sans-serif;
  font-size:15px;
  line-height:1.85;
  color:var(--mem-text);
  background:var(--mem-bg);
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--mem-pink-dk); text-decoration:none; }

.mem-wrap { width:100%; max-width:860px; margin-inline:auto; padding-inline:20px; }
.mem-wrap-wide { width:100%; max-width:1080px; margin-inline:auto; padding-inline:20px; }

/* ── ヘッダー ── */
.mem-header {
  background:var(--mem-card);
  border-bottom:1px solid var(--mem-line);
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky; top:0; z-index:20;
}
.mem-logo {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:19px;
  color:var(--mem-pink-dk);
  letter-spacing:.02em;
}
.mem-logo span {
  display:block;
  font-family:'Noto Sans JP',sans-serif;
  font-style:normal;
  font-size:10px;
  letter-spacing:.18em;
  color:var(--mem-textl);
  margin-top:2px;
}
.mem-logout {
  font-size:12px;
  color:var(--mem-textm);
  border:1px solid var(--mem-line);
  border-radius:50px;
  padding:8px 18px;
  background:var(--mem-card);
  cursor:pointer;
}
.mem-logout:hover { background:var(--mem-ivory); }

/* ── 見出し ── */
.mem-eyebrow {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:13px;
  color:var(--mem-pink-dk);
  letter-spacing:.08em;
  margin-bottom:8px;
}
.mem-h1 {
  font-family:'Noto Serif JP',serif;
  font-weight:400;
  font-size:clamp(22px,5vw,30px);
  color:var(--mem-text);
  line-height:1.6;
  margin:0 0 6px;
}
.mem-lead { color:var(--mem-textm); font-size:14px; margin:0 0 32px; }

/* ── カード ── */
.mem-card {
  background:var(--mem-card);
  border:1px solid var(--mem-line);
  border-radius:26px;
  box-shadow:var(--mem-shadow);
  padding:36px 30px;
}
.mem-card + .mem-card { margin-top:20px; }

/* ── フォーム ── */
.mem-field { margin-bottom:18px; }
.mem-field label {
  display:block;
  font-size:12px;
  color:var(--mem-textm);
  letter-spacing:.05em;
  margin-bottom:8px;
}
.mem-field input {
  width:100%;
  font-size:15px;
  padding:13px 16px;
  border:1px solid var(--mem-line);
  border-radius:12px;
  background:var(--mem-ivory);
  color:var(--mem-text);
  font-family:inherit;
}
.mem-field input:focus {
  outline:none;
  border-color:var(--mem-pink-dp);
  background:var(--mem-card);
}

/* ── ボタン ── */
.mem-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.03em;
  padding:14px 28px;
  border-radius:50px;
  border:1px solid transparent;
  cursor:pointer;
  text-align:center;
  width:100%;
  transition:background .2s,opacity .2s;
}
.mem-btn-primary { background:var(--mem-pink-dp); color:#fff; }
.mem-btn-primary:hover { background:var(--mem-pink-dk); }
.mem-btn-primary:disabled { opacity:.5; cursor:default; }
.mem-btn-outline { background:var(--mem-card); color:var(--mem-pink-dk); border-color:var(--mem-pink-dp); }
.mem-btn-outline:hover { background:var(--mem-pink); }

.mem-msg { font-size:13px; margin-top:14px; line-height:1.7; }
.mem-msg-error { color:#B0453B; }
.mem-msg-success { color:#4E8A6E; }

.mem-links { margin-top:22px; text-align:center; font-size:13px; }
.mem-links a { color:var(--mem-textm); text-decoration:underline; }

/* ── レッスンカード（会員トップ） ── */
.mem-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
@media (min-width:640px) { .mem-grid { grid-template-columns:1fr 1fr; } }

.mem-lesson-card {
  background:var(--mem-card);
  border:1px solid var(--mem-line);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--mem-shadow);
  display:block;
}
.mem-lesson-photo {
  aspect-ratio:4/3;
  background:linear-gradient(160deg,var(--mem-beige),var(--mem-pink));
  overflow:hidden;
}
.mem-lesson-photo img { width:100%; height:100%; object-fit:cover; }
.mem-lesson-body { padding:20px 22px 24px; }
.mem-lesson-title {
  font-family:'Noto Serif JP',serif;
  font-size:17px;
  font-weight:400;
  color:var(--mem-text);
  margin:0 0 6px;
}
.mem-lesson-tag {
  display:inline-block;
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--mem-pink-dk);
  background:var(--mem-pink);
  border-radius:50px;
  padding:4px 14px;
  margin-bottom:10px;
}

.mem-empty {
  text-align:center;
  color:var(--mem-textm);
  font-size:14px;
  padding:60px 20px;
  background:var(--mem-card);
  border:1px dashed var(--mem-line);
  border-radius:24px;
}

/* ── 作品詳細ページ ── */
.mem-work-photo {
  width:100%;
  aspect-ratio:4/3;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(160deg,var(--mem-beige),var(--mem-pink));
  margin-bottom:28px;
}
.mem-work-photo img { width:100%; height:100%; object-fit:cover; }
.mem-section-title {
  font-family:'Noto Serif JP',serif;
  font-size:14px;
  font-weight:600;
  color:var(--mem-pink-dk);
  letter-spacing:.06em;
  margin:0 0 10px;
}
.mem-section { margin-bottom:30px; }
.mem-section p { color:var(--mem-textm); white-space:pre-wrap; margin:0; }
.mem-video-slot, .mem-doc-slot {
  display:flex; align-items:center; gap:14px;
  background:var(--mem-ivory);
  border:1px solid var(--mem-line);
  border-radius:16px;
  padding:16px 18px;
  margin-bottom:10px;
  font-size:13.5px;
  color:var(--mem-textm);
}
.mem-video-slot .mem-dot, .mem-doc-slot .mem-dot {
  width:8px;height:8px;border-radius:50%;
  background:var(--mem-pink-dp); flex-shrink:0;
}
.mem-video-title {
  font-size:13.5px; font-weight:500; color:var(--mem-textm); margin:0 0 8px;
}
.mem-video-frame { margin-bottom:20px; }
.mem-video-embed { position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#000; }

/* ── 管理画面：テーブル ── */
.mem-table-wrap { overflow-x:auto; background:var(--mem-card); border:1px solid var(--mem-line); border-radius:20px; }
table.mem-table { width:100%; border-collapse:collapse; font-size:13.5px; white-space:nowrap; }
table.mem-table th, table.mem-table td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--mem-line); }
table.mem-table th { color:var(--mem-textm); font-weight:600; font-size:12px; letter-spacing:.04em; background:var(--mem-ivory); }
table.mem-table tr:last-child td { border-bottom:none; }
table.mem-table tr:hover td { background:var(--mem-ivory); }
table.mem-table a { color:var(--mem-pink-dk); font-weight:600; }

.mem-badge { display:inline-block; font-size:11px; padding:3px 12px; border-radius:50px; }
.mem-badge-active { background:#E7F1E9; color:#4E8A6E; }
.mem-badge-suspended { background:#F6E4E1; color:#B0453B; }

/* ── 管理画面：ライセンス編集リスト ── */
.mem-license-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border:1px solid var(--mem-line);
  border-radius:16px;
  margin-bottom:10px;
  background:var(--mem-ivory);
}
.mem-license-name { font-size:14px; color:var(--mem-text); font-weight:600; }
.mem-license-code { font-size:11.5px; color:var(--mem-textl); }
.mem-checks { display:flex; gap:18px; flex-wrap:wrap; }
.mem-check { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--mem-textm); }
.mem-check input { width:17px; height:17px; accent-color:var(--mem-pink-dp); }

.mem-loading { text-align:center; color:var(--mem-textl); padding:40px 0; font-size:13px; }

@media (max-width:640px) {
  .mem-card { padding:28px 20px; }
  .mem-license-row { flex-direction:column; align-items:flex-start; }
}