/* =============================================================
   Base — Design Tokens · Reset · App Shell · Layout
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap");

/* [hidden] を CSS display ルールより確実に非表示にする */
[hidden] { display: none !important; }

/* --- Design Tokens ----------------------------------------- */
:root {
  /* Surface */
  --osh-bg:           #fffdf9;
  --osh-bg-subtle:    rgba(var(--_ot_r,139),var(--_ot_g,92),var(--_ot_b,246),.08);
  --osh-surface:      #ffffff;

  /* Typography */
  --osh-text:         #2f2a3a;
  --osh-text-muted:   #6a6278;
  --osh-text-light:   #9e94ad;

  /* Accent */
  --osh-accent:       #ff7f96;
  --osh-accent-light: #ffe8ed;

  /* Semantic */
  --osh-success:      #42c77a;
  --osh-warning:      #f5a623;
  --osh-error:        #ff4d6d;

  /* Border */
  --osh-border:       rgba(var(--_ot_r,139),var(--_ot_g,92),var(--_ot_b,246),.18);
  --osh-border-light: rgba(var(--_ot_r,139),var(--_ot_g,92),var(--_ot_b,246),.10);

  /* Oshi colors — overridden per-event via JS */
  --oshi-1: #ff7f96;
  --oshi-2: #c97dff;
  /* Contrast text on oshi backgrounds — computed by JS; safe defaults */
  --oshi-1-text:    #ffffff;
  --oshi-2-text:    #ffffff;
  --oshi-grad-text: #ffffff;

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* Layout */
  --app-max:     480px;
  --sub-rail-w:  200px;
  --header-h:    56px;
  --bnav-h:      64px;

  /* Shape */
  --r-card: 16px;
  --r-btn:  12px;
  --r-chip: 999px;

  /* Shadow */
  --shadow-card: 0 4px 20px rgba(var(--_ot_r,82),var(--_ot_g,65),var(--_ot_b,117),.08);
  --shadow-lift: 0 8px 32px rgba(var(--_ot_r,82),var(--_ot_g,65),var(--_ot_b,117),.14);
  --shadow-nav:  0 -2px 16px rgba(var(--_ot_r,82),var(--_ot_g,65),var(--_ot_b,117),.10);
}

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
h1,h2,h3,h4,h5,h6,p,ul,ol,figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }

/* --- Base typography --------------------------------------- */
body {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--osh-text);
  background: var(--osh-bg);
  min-height: 100dvh;
}

/* Typography exceptions:
 * - legal pages keep formal readability
 * - auth page input controls keep practical input-legibility style
 */
.legal-screen {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}
.auth-screen input,
.auth-screen textarea,
.auth-screen select {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

/* --- App shell (≤480 px centred) --------------------------- */
.app-shell {
  width: 100%;                /* flex 内でコンテンツ幅依存にしない */
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--osh-bg);
  box-shadow: 0 0 0 1px var(--osh-border-light);
  position: relative;
}
.app-body {
  padding-top: var(--header-h);
  padding-bottom: calc(var(--bnav-h) + 12px);
}
.app-content { padding: var(--sp-4); }

/* --- Fixed app header -------------------------------------- */
.app-header {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--app-max);
  height: var(--header-h);
  z-index: 200;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--osh-tint-bg, rgba(245,238,255,0.97));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(var(--_ot_r,139),var(--_ot_g,92),var(--_ot_b,246),0.18);
}
.app-header__back {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  min-width: 68px; height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(var(--_ot_r,139),var(--_ot_g,92),var(--_ot_b,246),0.2);
  color: var(--osh-text);
  box-shadow: 0 2px 8px rgba(var(--_ot_r,139),var(--_ot_g,92),var(--_ot_b,246),0.08);
  flex-shrink: 0;
  font-weight: 700;
}
.app-header__back:hover { background: #fff; }
.app-header__back svg { flex-shrink: 0; }
.app-header__back-label {
  font-size: .67rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--osh-text-muted);
}
.app-header__title {
  flex: 1;
  font-size: .95rem; font-weight: 700;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.app-header__sub {
  font-size: .72rem; font-weight: 400;
  color: var(--osh-text-muted); display: block;
}
.app-header__action {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-chip);
  color: var(--osh-text-muted); flex-shrink: 0;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(var(--_ot_r,139),var(--_ot_g,92),var(--_ot_b,246),0.12);
}
.app-header__action:hover { background: #fff; }

.app-header__avatar {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  flex-shrink: 0; position: relative; overflow: hidden;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(var(--_ot_r,139),var(--_ot_g,92),var(--_ot_b,246),0.18);
  box-shadow: 0 4px 12px rgba(var(--_ot_r,82),var(--_ot_g,65),var(--_ot_b,117),.08);
}
.app-header__avatar-shell {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,127,150,0.14), rgba(201,125,255,0.22));
}
.app-header__avatar-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.app-header__avatar-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; color: var(--osh-accent);
}
.app-header__avatar-modal {
  position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center; padding: 20px;
}
.app-header__avatar-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82);
}
.app-header__avatar-panel {
  position: relative; z-index: 1; width: min(82vw, 340px); max-height: 82vh;
  aspect-ratio: 1; padding: 10px; border-radius: 24px;
  background: rgba(255,255,255,0.96); box-shadow: 0 18px 44px rgba(30,20,38,0.2);
}
.app-header__avatar-panel-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block;
}

/* --- Bottom navigation ------------------------------------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--app-max);
  height: var(--bnav-h);
  z-index: 200;
  display: flex;
  background: var(--osh-tint-bg, rgba(245,238,255,0.97));
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(var(--_ot_r,139),var(--_ot_g,92),var(--_ot_b,246),0.18);
  box-shadow: var(--shadow-nav);
}
.bottom-nav__item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; padding: 8px 10px;
  font-size: .7rem; color: var(--osh-text-muted);
  transition: color .15s; text-decoration: none;
  margin: 6px 6px 8px;
  border-radius: 16px;
}
.bottom-nav__item:hover {
  background: rgba(255,255,255,0.5);
}
.bottom-nav__item.is-active {
  background: rgba(255,255,255,0.92);
  color: var(--osh-accent);
  border: 1px solid rgba(var(--_ot_r,139),var(--_ot_g,92),var(--_ot_b,246),0.2);
  box-shadow: 0 3px 10px rgba(var(--_ot_r,139),var(--_ot_g,92),var(--_ot_b,246),0.08);
}
.bottom-nav__icon {
  width: 20px !important;
  height: 20px !important;
  display: block;
  overflow: visible;
  stroke-width: 2.0;
}

/* --- Site header (landing pages) --------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,253,249,.93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--osh-border-light);
}
.site-header-inner {
  max-width: 960px; margin: 0 auto;
  padding: 0 var(--sp-5); height: 60px;
  display: flex; align-items: center; gap: var(--sp-4);
}
.site-logo {
  font-size: 1.1rem; font-weight: 800;
  color: var(--osh-accent); letter-spacing: -.02em; flex: 1;
}
.site-logo a { color: inherit; }
.site-header-actions { display: flex; gap: var(--sp-2); }

/* --- Landing layout ---------------------------------------- */
.site-wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--sp-5); }
.site-main  { min-height: 60vh; }
.site-footer {
  border-top: 1px solid var(--osh-border-light);
  padding: var(--sp-8) var(--sp-5);
  text-align: center; font-size: .82rem; color: var(--osh-text-muted);
}
.site-footer a { text-decoration: underline; }

/* --- Utilities --------------------------------------------- */
.text-muted   { color: var(--osh-text-muted); }
.text-light   { color: var(--osh-text-light); }
.text-small   { font-size: .82rem; }
.text-center  { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }

/* --- 3-Column page layout (PC) ------------------------------ */
.page-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100dvh;
  background:
    radial-gradient(140% 60% at 12% 0%, rgba(255,127,150,0.14) 0%, rgba(255,127,150,0) 55%),
    radial-gradient(120% 50% at 88% 8%, rgba(201,125,255,0.18) 0%, rgba(201,125,255,0) 60%),
    linear-gradient(180deg, #fff8fb 0%, #fef9ff 56%, #eaf4ff 100%);
}

/* App pages: app-shell is the center column */
.page-layout .app-shell {
  flex-shrink: 0;
  flex-basis: var(--app-max); /* 常に480px幅を保証 */
  width: var(--app-max);
  margin: 0;                  /* flex レイアウトが中央配置を担う */
}

/* Landing pages: use .lp-center wrapper */
.lp-center {
  flex: 1;
  min-width: 0;
  max-width: 720px;
}

/* Sub-rails (hidden on mobile) */
.sub-rail {
  display: none;
  width: var(--sub-rail-w);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-5) var(--sp-3);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--osh-text);
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  isolation: isolate;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sub-rail::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.sub-rail > :not(.sub-rail__motif) {
  position: relative;
  z-index: 2;
}

@media (min-width: 900px) {
  .sub-rail { display: flex; flex-direction: column; gap: var(--sp-3); }
}

/* モバイルではapp-shellを全幅にリセット */
@media (max-width: 899px) {
  .page-layout .app-shell {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}

.sub-rail__logo {
  font-size: 1.55rem;
  font-weight: 800;
  color: #4b2668;
  letter-spacing: -.02em;
  font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.85),
    0 8px 18px rgba(88, 45, 122, 0.22);
  line-height: 1.15;
}
.sub-rail__tagline {
  font-size: .76rem;
  color: #544766;
  margin-top: var(--sp-1);
  line-height: 1.58;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: rgba(179, 63, 155, 0.42);
  text-underline-offset: 3px;
}
.sub-rail__catch {
  margin-top: var(--sp-2);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: #673382;
  background: linear-gradient(120deg, rgba(255,127,150,0.16), rgba(201,125,255,0.2));
  border: 1px solid rgba(152, 88, 185, 0.28);
  border-radius: 999px;
  padding: 5px 10px;
  width: fit-content;
  box-shadow: 0 6px 16px rgba(113, 59, 136, 0.16);
}
.sub-rail__motif {
  position: relative;
  height: 48px;
  margin-top: var(--sp-1);
  z-index: 0;
  pointer-events: none;
}
.sub-rail__motif--right { margin-bottom: var(--sp-1); }
.sub-rail__float {
  position: absolute;
  filter: drop-shadow(0 8px 12px rgba(75, 46, 115, 0.16));
  opacity: .9;
}
.sub-rail__float--a { left: 4px; top: 4px; animation: railFloatA 6.7s cubic-bezier(.43,.02,.21,.98) infinite; }
.sub-rail__float--b { left: 40px; top: 16px; animation: railFloatB 7.2s cubic-bezier(.43,.02,.21,.98) infinite; }
.sub-rail__float--c { left: 70px; top: -1px; animation: railFloatC 7.8s cubic-bezier(.43,.02,.21,.98) infinite; }
.sub-rail__float--d { right: 40px; top: 3px; animation: railFloatB 6.8s cubic-bezier(.43,.02,.21,.98) infinite; }
.sub-rail__float--e { right: 8px; top: 14px; animation: railFloatA 7.6s cubic-bezier(.43,.02,.21,.98) infinite; }
.sub-rail__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.sub-rail__nav a {
  font-size: .8rem;
  color: #332c43;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(123, 86, 168, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,245,250,0.92) 100%);
  box-shadow: 0 4px 14px rgba(83, 54, 123, 0.08);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sub-rail__nav a strong {
  display: block;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .01em;
  color: #2f2242;
}
.sub-rail__nav a small {
  display: block;
  font-size: .72rem;
  line-height: 1.35;
  color: #655679;
  margin-top: 2px;
}
.sub-rail__nav a:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 127, 150, 0.5);
  box-shadow: 0 10px 22px rgba(255, 127, 150, 0.18);
}
.sub-rail__section-title {
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  color: #7e5a9f;
  margin-top: var(--sp-2);
  margin-bottom: 10px;
  padding: 4px 10px;
  border: 1px dashed rgba(123, 86, 168, 0.34);
  border-radius: 999px;
  width: fit-content;
  background: rgba(255,255,255,0.78);
  text-transform: uppercase;
}
.sub-rail__tip {
  font-size: .77rem;
  color: #483f5e;
  line-height: 1.72;
  font-weight: 600;
}
.sub-rail__tip-card {
  padding: 10px 12px 10px 20px;
  border-radius: 14px;
  border: 1px solid rgba(123, 86, 168, 0.16);
  background: rgba(255,255,255,0.8);
  position: relative;
}
.sub-rail__tip-card::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 9px;
  width: 4px;
  height: calc(100% - 18px);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff96ab 0%, #b78cff 100%);
}
.sub-rail__cta {
  margin-top: var(--sp-2);
  display: block;
  padding: 11px 12px;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #ff7f96 0%, #cc57cc 100%);
  box-shadow: 0 12px 24px rgba(204, 87, 204, 0.22);
}
.sub-rail__cta span {
  display: block;
  font-size: .64rem;
  opacity: .95;
  letter-spacing: .05em;
}
.sub-rail__cta strong {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  line-height: 1.35;
}
.sub-rail__policy-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-rail__policy-links a {
  display: block;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(123, 86, 168, 0.2);
  background: rgba(255,255,255,0.82);
  font-size: .72rem;
  color: #4a3e61;
  text-decoration: underline;
  text-decoration-color: rgba(85,74,103,0.45);
  text-underline-offset: 2px;
  font-weight: 700;
}
.sub-rail__policy-links a:hover {
  border-color: rgba(255,127,150,0.5);
  color: #3f3650;
}

/* Right rail: keep heading visually attached to TIPS cards */
.sub-rail--right .sub-rail__section-title {
  margin-bottom: 4px;
}

/* Left rail: tune spacing between nav / concept / CTA */
.sub-rail--left .sub-rail__nav {
  margin-bottom: 12px;
}
.sub-rail--left .sub-rail__nav + .sub-rail__section-title {
  margin-top: 34px;
  margin-bottom: 0;
}
.sub-rail--left .sub-rail__tip {
  margin-top: 2px;
  margin-bottom: 18px;
}
.sub-rail--left .sub-rail__tip + .sub-rail__cta {
  margin-top: 34px;
}

.sub-rail--right .sub-rail__motif--right {
  margin-top: 2px;
  margin-bottom: 2px;
}
.sub-rail__oshi-orb-wrap {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}
.sub-rail__oshi-orb {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.85) 0 14%, rgba(255,255,255,0) 42%),
    var(--oshi-image-url),
    linear-gradient(135deg, #ff8fac 0%, #b389ff 50%, #87b1ff 100%);
  background-size: 100% 100%, cover, 100% 100%;
  background-position: center;
  border: 3px solid rgba(255,255,255,0.88);
  box-shadow:
    0 16px 28px rgba(79, 46, 115, 0.24),
    inset 0 0 0 2px rgba(255,255,255,0.45);
  position: relative;
  animation: railOrbSpin 30s linear infinite, railOrbFloat 8s ease-in-out infinite;
}
.sub-rail__oshi-orb::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px dashed rgba(132, 85, 201, 0.45);
  animation: railOrbSpinRev 18s linear infinite;
}
.sub-rail__oshi-orb-label {
  font-size: .68rem;
  font-weight: 800;
  color: #5d3a7d;
  letter-spacing: .06em;
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(132, 85, 201, 0.22);
  border-radius: 999px;
  padding: 3px 10px;
}
.sub-rail__footer {
  margin-top: 12px;
  font-size: .72rem;
  color: #8f7ea8;
  font-weight: 600;
}
.sub-rail__footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(123,86,168,0.35);
}

@keyframes railFloatA {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: .92; }
  50% { transform: translateY(-8px) rotate(-6deg) scale(1.08); opacity: 1; }
}
@keyframes railFloatB {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: .9; }
  50% { transform: translateY(7px) rotate(6deg) scale(1.07); opacity: 1; }
}
@keyframes railFloatC {
  0%, 100% { transform: translateY(0) scale(1); opacity: .88; }
  50% { transform: translateY(-7px) scale(1.12); opacity: 1; }
}
@keyframes railOrbSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes railOrbSpinRev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes railOrbFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}