/* =====================================================
   FUN CLUB Theme (fc/*)
   - styles.css（サイト共通）を上書きして「会員エリアの特別感」を作る
   - 立体感は控えめ、余白と線で“日本の現代サイト”っぽく
===================================================== */

:root{
  /* ===== FC専用：同じ空気感のまま“少しだけ夜寄り/上質”に ===== */
  --fc-bg-top:    #9A86EA;   /* ラベンダー（濃いめ） */
  --fc-bg-mid:    #C9C1F3;   /* 霧がかった紫 */
  --fc-bg-bottom: #E9FBF6;   /* ほんのりミント */
  --fc-wave1:     #CFCBE4;
  --fc-wave2:     #F2D6C8;   /* ピンク→ピーチ寄り（特別感） */

  --fc-ink:       #201A2D;
  --fc-muted:     rgba(32,26,45,.68);

  --fc-surface:   rgba(255,255,255,.92);
  --fc-surface2:  rgba(255,255,255,.86);
  --fc-border:    rgba(32,26,45,.10);

  /* 影は“ほぼ無し”寄り（薄く） */
  --fc-shadow:    0 8px 24px rgba(22,14,44,.08);

  /* アクセント：ブランド紫を踏襲しつつ、FCは少し深め */
  --fc-primary:   #4A2080;   /* styles.css の nav-purple-deep */
  --fc-primary2:  #5D2AA6;   /* styles.css の nav-purple */
  --fc-accent:    #F0CFA1;   /* シャンパンゴールド */

  --fc-grad:      linear-gradient(90deg, rgba(74,32,128,.98), rgba(93,42,166,.96));
}

/* body の共通背景（styles.css）をFCでは無効化 */
body.fc-page{
  background: transparent !important;
  background-image: none !important;
  color: var(--fc-ink);
}

/* ===== 背景グラデーション（固定） ===== */
.fc-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    to bottom,
    var(--fc-bg-top) 0%,
    var(--fc-bg-mid) 44%,
    var(--fc-bg-bottom) 100%
  );
}

/* うっすらドット（“AIっぽい星”ではなく、規則的な質感） */
.fc-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1.6px);
  background-size: 18px 18px;
  opacity: .30;
  pointer-events:none;
}

/* ===== 波レイヤー ===== */
.fc-waves{
  position: fixed;
  left: 0;
  right: 0;
  bottom: -2vh;
  height: 40vh;
  z-index: -1;
  pointer-events:none;
}

.fc-wave-wrap{
  position:absolute;
  left:0;
  width:200%;
  height:100%;
  will-change: transform;
  animation: fc-driftLoop linear infinite;
}

.fc-wave-svg{
  width:100%;
  height:100%;
  display:block;
  will-change: transform;
  /* ドロップシャドウは強すぎるので無し */
  filter: none;
  animation: fc-bob ease-in-out infinite, fc-swell ease-in-out infinite;
}

@keyframes fc-driftLoop{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@keyframes fc-bob{
  0%{ transform: translateY(0); }
  25%{ transform: translateY(-5px); }
  50%{ transform: translateY(2px); }
  75%{ transform: translateY(-3px); }
  100%{ transform: translateY(0); }
}
@keyframes fc-swell{
  0%{ transform: scaleY(1); }
  40%{ transform: scaleY(1.03); }
  70%{ transform: scaleY(0.99); }
  100%{ transform: scaleY(1); }
}

.fc-wave-back{ bottom: 11vh; opacity:.86; animation-duration: 28s; }
.fc-wave-back .fc-wave-svg{ animation-duration: 9s, 14s; }

.fc-wave-front{ bottom: 0; opacity:1; animation-duration: 18s; }
.fc-wave-front .fc-wave-svg{ animation-duration: 7s, 11s; animation-direction: reverse, normal; }

/* =====================================================
   Header Override (FCだけ少し“会員っぽい”)
===================================================== */

/* ナビを“ガラス強め”→“落ち着いた薄板”に */
body.fc-page .main-nav{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.fc-page .main-nav a{
  color: rgba(32,26,45,.86);
}
body.fc-page .main-nav a:hover{
  background: rgba(74,32,128,.08);
  color: rgba(32,26,45,.92);
}

/* FC pill は“特別枠”：ゴールドの細線＋FCロゴ */
body.fc-page .main-nav .fc-nav-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  padding-right: 14px;
  background: rgba(240,207,161,.22);
  border: 1px solid rgba(240,207,161,.55);
  color: var(--fc-primary);
}
body.fc-page .main-nav .fc-nav-pill::before{
  content:"";
  width: 16px;
  height: 16px;
  background: url("../assets/fclogo.png") center/contain no-repeat;
  display: inline-block;
  opacity: .95;
}

/* =====================================================
   Layout
===================================================== */

.fc-shell{
  max-width: 1080px;
  margin: 0 auto;
  padding: 104px 16px 88px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

@media (max-width: 720px){
  .fc-shell{ padding-top: 92px; gap: 22px; }
}

/* スクロールフェード（控えめ） */
.js-reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.js-reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* =====================================================
   Surface / Cards
===================================================== */

/* “カード感”は線と余白で。影は薄く。 */
.fc-panel,
.fc-gate,
.fc-member-hero,
.fc-card,
.fc-form-card,
.fc-mini,
.fc-member-card{
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: 18px;
  box-shadow: var(--fc-shadow);
}

/* セクション見出し周りとの相性のため、余白は統一 */
.fc-panel{ padding: 20px; }

@media (max-width: 720px){
  .fc-panel,
  .fc-gate,
  .fc-member-hero,
  .fc-card,
  .fc-form-card,
  .fc-mini,
  .fc-member-card{ border-radius: 16px; }
  .fc-panel{ padding: 16px; }
}

/* 上端に“細いアクセントライン”（特別感、でも派手すぎない） */
.fc-gate,
.fc-member-hero{
  position: relative;
  overflow: hidden;
}
.fc-gate::before,
.fc-member-hero::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240,207,161,.9), transparent);
  opacity: .95;
}

/* =====================================================
   Headings / Text
===================================================== */

.fc-kicker{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(32,26,45,.10);
  color: rgba(32,26,45,.76);
  font-weight: 700;
  font-size: 12px;
}

.fc-kicker .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(240,207,161,.95);
}

.fc-headline{
  font-family: 'Poppins', 'Zen Maru Gothic', system-ui, sans-serif;
  letter-spacing: .02em;
  font-weight: 800;
  font-size: 30px;
  margin: 14px 0 0;
}

@media (max-width: 720px){
  .fc-headline{ font-size: 26px; }
}

.fc-gate-lead,
.fc-welcome{
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.95;
  color: rgba(32,26,45,.84);
}

/* 箇条書き（ログインページ） */
.fc-bullets{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}
.fc-bullets li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--fc-surface2);
  border: 1px solid rgba(32,26,45,.08);
  color: rgba(32,26,45,.82);
  line-height: 1.8;
  font-size: 13px;
}
.fc-bullet-icon{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(240,207,161,.30);
  border: 1px solid rgba(240,207,161,.55);
  color: var(--fc-primary);
  font-size: 12px;
  line-height: 1;
}

.fc-note{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.74);
  border: 1px dashed rgba(32,26,45,.18);
  color: rgba(32,26,45,.82);
  font-size: 12.5px;
  line-height: 1.85;
}

/* =====================================================
   Gate (login)
===================================================== */

.fc-gate-inner{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 18px;
  padding: 20px;
}

@media (max-width: 860px){
  .fc-gate-inner{ grid-template-columns: 1fr; padding: 16px; }
}

.fc-gate-left{ padding: 6px 4px; }

.fc-gate-right{
  display: grid;
  gap: 12px;
  align-content: start;
}

/* =====================================================
   Form
===================================================== */

.fc-form-card{
  position: relative;
  padding: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: none; /* 立体感控えめ */
}

/* 右上に薄いFCロゴ（上品に） */
.fc-form-card::after{
  content:"";
  position:absolute;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  background: url("../assets/fclogo.png") center/contain no-repeat;
  opacity: .14;
  pointer-events:none;
}

.fc-form-head{ margin-bottom: 10px; }
.fc-form-title{ font-weight: 800; letter-spacing: .04em; }
.fc-form-sub{ margin-top: 2px; color: var(--fc-muted); font-size: 12px; line-height: 1.7; }

.fc-form{ margin-top: 12px; }

.fc-label{
  display:block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(32,26,45,.74);
  margin: 10px 0 6px;
}

.fc-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(32,26,45,.16);
  background: rgba(255,255,255,.92);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.fc-input:focus{
  border-color: rgba(74,32,128,.38);
  box-shadow: 0 0 0 4px rgba(74,32,128,.12);
}

.fc-alert{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.22);
  color: rgba(130, 20, 20, 0.96);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.7;
}

.fc-form-footer{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
}

.fc-link{ color: var(--fc-primary2); font-weight: 700; text-decoration: none; }
.fc-link:hover{ text-decoration: underline; }
.fc-sep{ color: rgba(32,26,45,.45); }

/* =====================================================
   Buttons
===================================================== */

.fc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(32,26,45,.14);
  background: rgba(255,255,255,.88);
  color: rgba(32,26,45,.86);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.fc-btn:hover{
  background: rgba(255,255,255,.96);
  border-color: rgba(32,26,45,.18);
}

/* 旧名/別名も吸収 */
.fc-btn--primary,
.fc-btn-primary{
  background: var(--fc-grad);
  color: #fff;
  border-color: rgba(255,255,255,.22);
}
.fc-btn--primary:hover,
.fc-btn-primary:hover{
  background: linear-gradient(90deg, rgba(74,32,128,1), rgba(93,42,166,1));
  border-color: rgba(255,255,255,.28);
}

.fc-btn--ghost,
.fc-btn-ghost{
  background: transparent;
  color: rgba(32,26,45,.86);
}
.fc-btn--ghost:hover,
.fc-btn-ghost:hover{
  background: rgba(255,255,255,.56);
}

/* =====================================================
   Mini help card
===================================================== */

.fc-mini{
  padding: 14px 16px;
  background: rgba(255,255,255,.86);
  box-shadow: none;
}

.fc-mini-title{ font-weight: 800; font-size: 13px; margin-bottom: 8px; }

.fc-mini-list{
  margin: 0;
  padding-left: 1.15em;
  color: rgba(32,26,45,.76);
  font-size: 12px;
  line-height: 1.9;
}

/* =====================================================
   Member top (fc.php)
===================================================== */

.fc-member-hero-inner{
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 16px;
  align-items: start;
}

@media (max-width: 860px){
  .fc-member-hero-inner{ grid-template-columns: 1fr; }
}

/* サブナビ：フラットに */
.fc-subnav{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fc-subnav a{
  text-decoration: none;
  color: rgba(32,26,45,.78);
  font-weight: 800;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(32,26,45,.10);
}

.fc-subnav a:hover{
  background: rgba(255,255,255,.92);
}

.fc-member-card{
  padding: 16px;
  background: rgba(255,255,255,.90);
  box-shadow: none;
}

.fc-member-row{ display:flex; align-items:center; gap: 12px; }

.fc-avatar{
  width: 52px; height: 52px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(74,32,128,.70), rgba(240,207,161,.62));
  border: 1px solid rgba(32,26,45,.10);
}

.fc-member-meta b{ display:block; font-size: 14px; }
.fc-member-meta span{ display:block; font-size: 12px; color: rgba(32,26,45,.64); margin-top: 2px; }

.fc-member-actions{ margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap; }

/* =====================================================
   Content grid / cards
===================================================== */

.fc-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.fc-card{
  grid-column: span 4;
  padding: 16px;
  background: rgba(255,255,255,.90);
  box-shadow: none;
}

@media (max-width: 900px){
  .fc-card{ grid-column: span 6; }
}
@media (max-width: 560px){
  .fc-card{ grid-column: span 12; }
}

.fc-card h3{ margin: 0 0 6px; font-size: 15px; }
.fc-card p{ margin: 0; font-size: 12.5px; line-height: 1.85; color: rgba(32,26,45,.74); }

.fc-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(74,32,128,.10), rgba(255,255,255,.70));
  border: 1px solid rgba(32,26,45,.10);
  overflow:hidden;
  margin-bottom: 10px;
  position: relative;
}

/* “画像が来る前提”のプレースホルダー：テキストを邪魔しない */
.fc-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(240px 160px at 20% 20%, rgba(255,255,255,.70), transparent 60%),
    radial-gradient(240px 160px at 80% 20%, rgba(240,207,161,.30), transparent 60%);
  opacity: .55;
}

/* =====================================================
   Logout
===================================================== */

.fc-goodbye{
  text-align:center;
  padding: 10px 0;
}

.fc-goodbye p{ margin: 10px 0 0; color: rgba(32,26,45,.74); line-height: 1.9; }

/* =====================================================
   Entry overlay (3Dドア演出 → フラットなフェード演出)
===================================================== */

.entry-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(32,26,45,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 1;
  visibility: visible;
  transition: opacity .9s ease 1.0s, visibility 0s linear 2.0s;
}

/* 旧ドア要素は使わない */
.entry-door,
.entry-light{ display:none !important; }

.entry-mark{
  position: relative;
  padding: 12px 16px 12px 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(240,207,161,.28);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .08em;
}

.entry-mark::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: url("../assets/fclogo.png") center/contain no-repeat;
  opacity: .95;
}

.entry-overlay.open .entry-mark{ border-color: rgba(240,207,161,.50); }
.entry-overlay.close{ opacity: 0; visibility: hidden; }


/* ----------------------------------------------------
   Login gate container: remove the outer panel background
   (Keep fc-form-card / fc-mini as cards)
----------------------------------------------------- */
.fc-gate{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.fc-gate::before{
  content: none !important;
  display: none !important;
}