/*
Theme Name: LitLink Profile
Author: Your Name
Version: 1.0
Description: シンプルに LitLink のプロフィールページ風デザインを再現する最小テーマ
*/

:root{
  --tail: 12px;          /* くちばしの半径。高さでもあり、幅でもある */
}


/* -------- Reset（超ライト版） -------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  font-family:"Noto Sans JP", sans-serif;
  font-weight:700;          /* 700 = Bold */
  color:#6a6480;
}

/* -------- 共通背景 -------- */
body{
  background:linear-gradient(135deg,#FDE8FF 0%,#D8F3FF 100%) fixed;
  display:flex;justify-content:center;align-items:flex-start;
  padding:6vh 4vw;
}

/* -------- プロフィールページ用 -------- */
.profile{
  width:100%;max-width:480px;text-align:center;
}

/* アイコン */
.profile__avatar{
  width:140px;height:140px;border-radius:50%;object-fit:cover;
  border:5px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* 名前 */
.profile__name{font-size:1.6rem;font-weight:700;margin:1rem 0 .35rem}

/* 自己紹介 */
.profile__bio{margin-bottom:1.7rem;font-size:1.2rem;line-height:1.6}

/* リンクボタン */
.profile__links a{
  display:block;width:100%;max-width:360px;margin:.6rem auto;
  padding:1rem 1.2rem;border-radius:12px;
  background:#fff;text-decoration:none;color:#333;font-weight:600;
  box-shadow:0 3px 8px rgba(0,0,0,.06);
  transition:.15s;
}
.profile__links a:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.1)}

/* ---- 画像リンクボタン ---- */
.profile__links{
  display:flex;         /* 横並びも縦並びもOKにするため */
  flex-direction:column;
  align-items:center;
}
.profile__links a{
  display:block;
  margin:0.6rem auto;
  text-decoration:none;
}
.profile__links img.link-btn{
  width:100%;
  max-width:360px;      /* 同じ幅で整える */
  border-radius:12px;
  box-shadow:0 3px 8px rgba(0,0,0,.06);
  transition:transform .15s,box-shadow .15s;
}
.profile__links img.link-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.1);
}

/* ── 画像リンクを中央揃え ──────────────────── */
.profile__links {
  text-align: center;               /* 親要素で中央寄せ */
}
.profile__links a {
  display: inline-block;            /* 画像の実寸幅で中央化 */
}
.profile__links img.link-btn {
  display: block;                   /* 画像自体をブロック化 */
  margin: 0.6rem auto;              /* 上下 0.6rem・左右自動で中央 */
}

/* ── 白い縁（枠線）を消す ─────────────────── */
.profile__avatar,
.profile__links img.link-btn {
  border: none;                     /* もともとの白枠を打ち消し */
}

/* ── 画像リンクの余白＆白背景を完全にオフ ─────────── */
.profile__links a{
  background: none !important;   /* ← 背景色を透明化 */
  padding: 0 !important;         /* ← 余白もゼロに */
  box-shadow: none !important;   /* ← ドロップシャドウも要らなければ */
}

/* ── 共通ロゴ ───────────────── */
.site-logo{
  width: 120px;              /* ← アバターより小さめ。数値は調整可 */
  height:auto;
  margin:0 auto 1.2rem;    /* 中央揃え ＋ 下だけ余白 */
  display:block;
}
@media(min-width:768px){
  .site-logo{ width:220px; } /* PC では少し大きく */
}


/* ── 補足テキスト用吹き出し ─────────────────── */
.supplement-bubble {
    font-weight: 500;
    font-size: 1.2em;
    padding: .5rem .8rem calc(.5rem);
    display: inline-block;
    max-width: 360px;
    margin: 1.2rem auto 0;
    background: #fff;
    color: #6a6480;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0,0,0,.06);
    position: relative;
}

.supplement-bubble::after {
    content: "";
    position: absolute;
    bottom: calc(-1.8 * var(--tail));
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: var(--tail) solid transparent;
    border-top-color: #fff;
}

/* ── ロックブロック ─────────────────── */
.video-lock{
  width:360px;             /* 既存レイアウトと同幅 */
  margin:1.5rem auto;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}

/* ぼかしサムネ */
.video-thumb{
  width:100%;
  display:block;
  filter:blur(8px) brightness(.5);
  transform:scale(1.1);    /* 端のぼかし切れを防ぐ */
}

/* フォームを中央に固定 */
.lock-form{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.6rem;
}

.lock-form input{
  padding:.5rem .8rem;
  border:none;
  border-radius:6px;
  font-size:1rem;
}

.lock-form button{
  padding:.45rem 1.2rem;
  border:none;
  border-radius:6px;
  background:#6a6480;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
}
.lock-form button:hover{opacity:.85}

/* エラーメッセージ */
.lock-form .err{
  color:#ff6666;
  font-size:.85rem;
}

/* レスポンシブ（PC は少し広げる例） */
@media(min-width:768px){
  .video-lock{width:480px;}
}

/* ── ロック解除後の動画（<video> や <iframe>）に影を付けない ── */
.video-lock video,
.video-lock iframe{
  box-shadow:none !important;
}

.video-lock{ box-shadow:none; }