@charset "UTF-8";

/* ==========================================================================
   Profile Page Styles (css/prof.css)
   - Harmonized with def.css (v11.0 Modern Dark Slate Theme)
   - Refined Glass & Card Architecture
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザインシステム＆ローカル変数定義
   - def.css のデザインテーマ（ダークスレート＆アクセントゴールド）を継承
   -------------------------------------------------------------------------- */
:root {
  /* 背景・カードカラー */
  --pf-card-bg: #ffffff;
  --pf-card-bg-sub: #f8f9fa;
  
  /* def.css のグローバル変数から色・影を読み込み */
  --pf-border: var(--border-color, #e9ecef);
  --pf-primary: var(--primary-color, #3d3b4e);     /* メインカラー（ダークスレート） */
  --pf-accent: var(--accent-color, #d4a373);       /* アクセント（ゴールド・ベージュ系） */
  --pf-accent-light: var(--accent-light, rgba(212, 163, 115, 0.15));
  --pf-text-main: var(--text-main, #2b2d42);        /* 主要テキスト */
  --pf-text-sub: var(--text-sub, #6c757d);          /* サブテキスト */
  
  /* 影（Shadow） */
  --pf-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03);
  --pf-shadow-md: var(--card-shadow, 0 10px 30px rgba(0, 0, 0, 0.05));
  --pf-shadow-hover: var(--card-shadow-hover, 0 15px 35px rgba(0, 0, 0, 0.08));

  /* 角丸（Radius）＆アニメーション */
  --pf-radius-lg: 16px;
  --pf-radius-md: 10px;
  --pf-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. メインレイアウト（全体の2カラム構築）
   -------------------------------------------------------------------------- */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
  text-align: left;
  width: 100%;
}

/* PCサイズ（992px以上）での2カラム指定 */
@media (min-width: 992px) {
  .profile-grid {
    grid-template-columns: 320px 1fr; /* 左: ビジュアル(320px) / 右: 情報(可変) */
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   3. 画像ガード＆共通コンテナ（右クリック・ドラッグ防止対策）
   -------------------------------------------------------------------------- */
.image-container {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
}

/* 透明なオーバーレイ膜 */
.image-guard {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;
  cursor: default;
}

/* 保護対象画像スタイル */
.protected-img {
  pointer-events: none !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   4. 左カラム：ビジュアルエリア（立ち絵＆SDイラスト）
   -------------------------------------------------------------------------- */
.visual-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.standing-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

/* --- 4-1. 立ち絵カードフレーム --- */
.standing-frame {
  width: 100%;
  height: 500px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  background: var(--pf-card-bg);
  box-shadow: var(--pf-shadow-md);
  padding: 12px;
  transition: var(--pf-transition);
}

.standing-frame:hover {
  transform: translateY(-4px);
  box-shadow: var(--pf-shadow-hover);
  border-color: var(--pf-accent);
}

.standing-frame .image-container {
  border-radius: 10px;
  background: linear-gradient(180deg, var(--pf-card-bg-sub) 0%, #e9ecef 100%);
}

.standing-frame:hover .protected-img {
  transform: scale(1.02); /* ホバー時の画像微拡大 */
}

/* --- 4-2. SDイラストスライドショー枠 --- */
.sd-frame-overlap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: 12px;
  background: var(--pf-card-bg);
  box-shadow: var(--pf-shadow-md);
  transition: var(--pf-transition);
}

.sd-frame-overlap:hover {
  transform: translateY(-3px);
  box-shadow: var(--pf-shadow-hover);
}

.sd-frame-overlap .image-container {
  border-radius: 10px;
  background: var(--pf-card-bg-sub);
}

/* スライドフェード処理 */
.sd-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.sd-slide.active {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   5. 右カラム：プロフィール情報エリア
   -------------------------------------------------------------------------- */
.info-column {
  background: var(--pf-card-bg);
  border-radius: 20px;
  padding: 2.5rem;
  border: 1px solid var(--pf-border);
  box-shadow: var(--pf-shadow-md);
}

/* --- 5-1. ヘッダー（アイコン・名前） --- */
.profile-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--pf-border);
}

/* アイコンリング（グラデーション枠） */
.icon-frame {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pf-accent), var(--pf-primary));
  padding: 3px;
  box-shadow: 0 4px 15px rgba(212, 163, 115, 0.2);
  flex-shrink: 0;
  transition: var(--pf-transition);
}

.icon-frame:hover {
  transform: scale(1.05);
}

.icon-frame .image-container {
  border-radius: 50%;
  background: #ffffff;
}

.profile-name {
  font-size: 2rem;
  color: var(--pf-text-main);
  margin-bottom: 0.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.profile-subname {
  font-size: 0.9rem;
  color: var(--pf-accent);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* --- 5-2. 自己紹介文（カードボックス風） --- */
.profile-intro {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--pf-text-main);
  margin-bottom: 2rem;
  background: var(--pf-card-bg-sub);
  padding: 1.25rem 1.5rem;
  border-radius: var(--pf-radius-md);
  border-left: 4px solid var(--pf-accent); /* アクセントカラーの左ライン */
}

/* --------------------------------------------------------------------------
   6. 基本情報テーブル
   -------------------------------------------------------------------------- */
.info-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 2rem;
}

.info-table th, 
.info-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--pf-border);
}

.info-table th {
  width: 120px;
  color: var(--pf-primary);
  font-weight: 700;
  text-align: left;
  font-size: 0.88rem;
}

.info-table td {
  color: var(--pf-text-main);
  font-size: 0.92rem;
}

.info-table tr:last-child th,
.info-table tr:last-child td {
  border-bottom: none;
}

/* 2カラム並列用サブグリッド（活動詳細・タグなど） */
.info-sub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .info-sub-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   7. モダン SNS リンクボタンエリア
   -------------------------------------------------------------------------- */
/* --- 7-1. セクションタイトル --- */
.sns-section-title {
  font-size: 1.1rem;
  color: var(--pf-text-main);
  margin-bottom: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sns-section-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--pf-accent);
  border-radius: 2px;
}

/* --- 7-2. ボタンコンテナ＆共通ボタン構造 --- */
.sns-btn-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.9rem;
}

.sns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ホバー時の上部光沢オーバーレイ */
.sns-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

/* ボタンホバーアクション */
.sns-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--btn-glow, 0 8px 20px rgba(0, 0, 0, 0.2));
}

.sns-btn:hover::before {
  opacity: 1;
}

/* アイコンアニメーション */
.sns-btn i {
  font-size: 1.05rem;
  transition: transform 0.3s ease;
}

.sns-btn:hover i {
  transform: scale(1.15);
}

/* --- 7-3. ブランド固有グラデーション＆発光（Glow）設計 --- */
/* YouTube: ディープネオンレッド */
.sns-youtube {
  background: linear-gradient(135deg, #ff0000 0%, #b30000 100%);
  --btn-glow: 0 8px 20px rgba(255, 0, 0, 0.35);
}

/* Twitch: ディープパープル */
.sns-twitch {
  background: linear-gradient(135deg, #9146ff 0%, #5c16c5 100%);
  --btn-glow: 0 8px 20px rgba(145, 70, 255, 0.35);
}

/* X (旧Twitter): ダークグラデーション */
.sns-x {
  background: linear-gradient(135deg, #2c2c2e 0%, #0f0f10 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  --btn-glow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* TikTok: ダーク基調 ＋ ネオンカラー（シアン＆ピンク drop-shadow） */
.sns-tiktok {
  background: linear-gradient(135deg, #121212 0%, #212121 100%);
  border: 1px solid rgba(37, 244, 238, 0.3);
  --btn-glow: 0 8px 20px rgba(37, 244, 238, 0.25);
}
.sns-tiktok i {
  color: #25f4ee;
  filter: drop-shadow(1px 1px 0px #fe2c55);
}

/* Bluesky: スカイブルーグラデーション */
.sns-bluesky {
  background: linear-gradient(135deg, #1285fe 0%, #0056b3 100%);
  --btn-glow: 0 8px 20px rgba(18, 133, 254, 0.35);
}

/* Mirrativ: オレンジグラデーション */
.sns-mirrativ {
  background: linear-gradient(135deg, #ff7a00 0%, #e05300 100%);
  --btn-glow: 0 8px 20px rgba(255, 122, 0, 0.35);
}

/* --------------------------------------------------------------------------
   8. 外部フォント（FontAwesome）文字化け保護
   -------------------------------------------------------------------------- */
.fa, .fa-brands, .fa-regular, .fa-solid, .fab, .far, .fas {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif !important;
}

/* --------------------------------------------------------------------------
   9. レスポンシブ対応（スマートフォン表示調整）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* 立ち絵カードの高さ調整 */
  .standing-frame {
    height: 420px;
  }
  
  /* カード余白調整 */
  .info-column {
    padding: 1.5rem;
  }
  
  /* ヘッダーの中央寄せ配置 */
  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  /* 1列ボタン表示 */
  .sns-btn-container {
    grid-template-columns: 1fr;
  }
}