/* BLOOMOON MY PAGE — 透明感・ガラス・シャボン・水晶・プリズム・オーガンジー
   管理室（BLOOMOON管理室）と同じ書体を継承し、色だけを光の側へ振る。 */
:root{
  --ink:#1b1d27;
  --ink-soft:#4a4e5c;
  --muted:#7d8190;
  --line:rgba(255,255,255,.72);
  --glass:rgba(255,255,255,.52);
  --glass-strong:rgba(255,255,255,.72);
  --paper:#f4f2f8;
  --accent:#2a3b5e;          /* 管理室の紺を淡く */
  --accent-soft:#6f83ad;
  --line-green:#06c755;      /* LINE ブランド */
  --prism-a:#dcd3ff;
  --prism-b:#cfe9ff;
  --prism-c:#ffe1ee;
  --prism-d:#e2fff5;
  --shadow:0 18px 50px rgba(52,60,110,.12), 0 2px 6px rgba(52,60,110,.06);
  --mono:"DM Mono",ui-monospace,monospace;
  --sans:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  --display:"Playfair Display",Georgia,serif;
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(1200px 700px at 8% -10%, var(--prism-a) 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, var(--prism-b) 0%, transparent 60%),
    radial-gradient(800px 600px at 50% 120%, var(--prism-c) 0%, transparent 60%);
  background-attachment:fixed;
  font:15px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* ---- 背景の光 ---- */
.prism{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.prism-band{
  position:absolute;left:-30%;width:160%;height:26vh;
  background:linear-gradient(90deg,transparent 0%,var(--prism-a) 20%,var(--prism-b) 40%,var(--prism-d) 60%,var(--prism-c) 80%,transparent 100%);
  filter:blur(46px);opacity:.55;transform:rotate(-12deg);
  animation:drift 26s ease-in-out infinite alternate;
}
.prism-band.b1{top:6%}
.prism-band.b2{top:44%;animation-duration:34s;opacity:.4}
.prism-band.b3{top:78%;animation-duration:30s;opacity:.35}
.bubble{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.25) 55%, rgba(255,255,255,0) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 0 30px rgba(255,255,255,.4);
  opacity:.75;animation:float 18s ease-in-out infinite alternate;
}
.bubble.u1{width:140px;height:140px;right:8%;top:14%}
.bubble.u2{width:70px;height:70px;left:10%;top:62%;animation-duration:22s}
.bubble.u3{width:44px;height:44px;right:22%;bottom:10%;animation-duration:15s}
@keyframes drift{from{transform:rotate(-12deg) translateX(-4%)}to{transform:rotate(-10deg) translateX(4%)}}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-18px)}}
@media (prefers-reduced-motion: reduce){.prism-band,.bubble{animation:none}}

/* ---- レイアウト ---- */
.shell{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:28px 18px 60px;min-height:100%;display:flex;flex-direction:column;gap:16px}
.masthead{display:flex;align-items:center;gap:12px;padding:6px 4px 10px}
.mark{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font:600 20px var(--display);color:var(--accent);
  background:var(--glass-strong);border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(52,60,110,.12);
}
.wordmark{display:flex;flex-direction:column;line-height:1.1}
.wordmark strong{font:700 15px var(--sans);letter-spacing:.22em;color:var(--accent)}
.wordmark small{font:400 9px var(--mono);letter-spacing:.3em;color:var(--muted)}

.glass{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  position:relative;overflow:hidden;
}
.glass::before{ /* プリズムのハイライト */
  content:"";position:absolute;inset:-40% -20% auto -20%;height:70%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.view{padding:30px 26px}
.view[hidden]{display:none}

.eyebrow{margin:0 0 10px;font:500 10px var(--mono);letter-spacing:.32em;color:var(--accent-soft)}
h1,h2{margin:0 0 12px;line-height:1.25;text-wrap:balance}
h2{font:700 20px var(--sans)}
.display{font:500 30px/1.2 var(--display);color:var(--ink)}
.display em{font-style:italic;color:var(--accent)}
.lead{margin:0 0 20px;color:var(--ink-soft)}
.muted{color:var(--muted)}
.who{margin:-8px 0 16px;font:400 12px var(--mono);color:var(--muted)}
.fine{margin:16px 0 0;font-size:11px;color:var(--muted)}
.error{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:rgba(255,222,230,.75);color:#8a2a3f;font-size:13px}
.error[hidden]{display:none}

.actions{display:flex;flex-direction:column;gap:10px}
.actions.right{flex-direction:row;justify-content:flex-end;padding:6px 4px 0}
.btn{
  appearance:none;border:1px solid var(--line);border-radius:999px;
  padding:14px 20px;font:500 14px var(--sans);letter-spacing:.04em;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--glass-strong);color:var(--ink);
  box-shadow:0 8px 22px rgba(52,60,110,.10);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(52,60,110,.16)}
.btn:focus-visible{outline:3px solid rgba(111,131,173,.5);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.btn-line{background:var(--line-green);color:#fff;border-color:transparent}
.btn-line .btn-icon{font:700 10px var(--mono);letter-spacing:.1em;padding:3px 7px;border-radius:6px;background:rgba(255,255,255,.22)}
.btn-primary{background:var(--accent);color:#fff;border-color:transparent}
.btn-ghost{background:rgba(255,255,255,.35)}
.btn[hidden]{display:none}

/* ---- マイページ ---- */
.profile{display:flex;align-items:center;gap:16px;padding:20px}
.avatar{
  width:72px;height:72px;border-radius:50%;flex:none;overflow:hidden;
  display:grid;place-items:center;font:500 26px var(--display);color:var(--accent);
  background:radial-gradient(circle at 30% 30%, #fff, var(--prism-b));
  border:1px solid var(--line);box-shadow:0 8px 20px rgba(52,60,110,.14);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-text{min-width:0}
.profile-text .display{font-size:24px;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig{font:400 11px var(--mono);letter-spacing:.08em;color:var(--accent-soft);text-decoration:none}
.ig[hidden]{display:none}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  min-height:96px;padding:16px 16px 14px;text-decoration:none;color:var(--ink);
  font:500 15px var(--sans);
}
.tile small{font:400 10px var(--mono);letter-spacing:.14em;color:var(--muted)}
.tile[data-soon]{opacity:.7}

.foot{margin-top:auto;text-align:center;color:var(--muted);font:400 10px var(--mono);letter-spacing:.2em;padding-top:10px}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:5;
  padding:10px 16px;border-radius:999px;font-size:13px;color:var(--ink);
  background:var(--glass-strong);border:1px solid var(--line);box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.toast[hidden]{display:none}

@media (min-width: 720px){
  .shell{max-width:640px;padding-top:44px}
  .view{padding:38px 40px}
  .display{font-size:36px}
}

/* ---- マイページ: パネル・出番・掲載履歴 ---- */
.panel{padding:22px 22px 20px}
.panel h3{margin:0 0 12px;font:700 17px var(--sans)}
.stack{display:flex;flex-direction:column;gap:10px}
.fact{margin:2px 0 4px;font:400 12px var(--mono);color:var(--muted)}
.fact[hidden]{display:none}
.links{display:flex;flex-wrap:wrap;gap:10px}
.links a{font:400 11px var(--mono);letter-spacing:.08em;color:var(--accent-soft);text-decoration:none}
.empty{margin:0;color:var(--muted);font-size:13px}
.shoot{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:rgba(255,255,255,.45)}
.shoot-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:8px}
.shoot-head b{font:700 15px var(--sans)}
.shoot-head small{font:400 11px var(--mono);color:var(--muted)}
.shoot-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12px;margin:0 0 10px}
.shoot-meta dt{color:var(--muted);font:400 10px var(--mono);letter-spacing:.1em;align-self:center}
.shoot-meta dd{margin:0}
.shoot-meta .call{font:500 16px var(--mono);color:var(--accent)}
.rows{display:flex;flex-direction:column;gap:6px;border-top:1px dashed var(--line);padding-top:10px}
.row{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:baseline;font-size:13px}
.row time{font:500 13px var(--mono);color:var(--accent)}
.row time small{display:block;font-size:9px;color:var(--muted)}
.row .row-title{font-weight:500}
.row .row-sub{display:block;font-size:11px;color:var(--muted)}
.hist{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.45);border:1px solid var(--line)}
.hist b{font:500 12px var(--mono);color:var(--accent)}
.hist span{font-size:13px}
.hist small{grid-column:2;font-size:11px;color:var(--muted)}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font:400 10px var(--mono);background:rgba(255,255,255,.6);border:1px solid var(--line);color:var(--ink-soft)}