/* ============================================================
   CROSS FIELD by Luna AI — Cosmic design system v2 (宇宙図書館)
   全会員ページ共通。Apple/Linear級の質感を狙った刷新版。
   ============================================================ */
:root{
  --bg:#070912; --bg2:#0b0e22;
  /* テキスト階層はrgba白で（フラット色より品よく沈む） */
  --ink:rgba(255,255,255,.98); --dim:rgba(255,255,255,.86); --faint:rgba(255,255,255,.68);
  --blue:#6f9bff; --violet:#b184ff; --cyan:#5fe6dc; --gold:#f3cd78; --line-green:#06c755;
  --grad:linear-gradient(120deg,#6f9bff,#b184ff 52%,#5fe6dc);
  --grad-text:linear-gradient(120deg,#a9c2ff,#c9adff 55%,#8ff0e8);
  --grad-soft:linear-gradient(135deg,rgba(111,155,255,.16),rgba(177,132,255,.14) 55%,rgba(95,230,220,.14));
  --panel:rgba(255,255,255,.04); --panel-2:rgba(255,255,255,.065);
  --border:rgba(155,172,255,.30); --border-str:rgba(170,185,255,.52);
  --hair:linear-gradient(135deg,rgba(160,180,255,.5),rgba(150,120,255,.18) 45%,rgba(95,230,220,.35));
  --danger:#ff7a88; --danger-bg:rgba(255,122,136,.12); --ok:#67e6ae;
  --radius:14px; --r-lg:20px;
  --shadow:0 24px 60px -28px rgba(0,0,0,.85);
  --glow:0 0 0 1px rgba(130,150,255,.16), 0 0 24px -6px rgba(120,120,255,.38);
  --shadow-glow:0 0 0 1px rgba(140,155,255,.18), 0 18px 46px -22px rgba(0,0,0,.8), 0 0 30px -10px rgba(120,120,255,.42);
  --sp:8px;
  --sans:'Zen Kaku Gothic New','Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --ui:'Inter','Zen Kaku Gothic New',sans-serif;
  /* 互換エイリアス */
  --ink-soft:var(--dim); --teal:var(--cyan); --teal-dark:var(--blue); --teal-tint:rgba(95,230,220,.14); --line:var(--border);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; color:var(--ink); font-family:var(--sans); font-size:16px; font-weight:500; letter-spacing:.01em;
  background:var(--bg); line-height:1.85; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; position:relative; overflow-x:hidden;
}
/* latin/数字はInter + 等幅数字 */
.num,.latin{ font-family:var(--ui); font-variant-numeric:tabular-nums; }

/* 宇宙背景：多層ネビュラ＋星（ゆっくり漂う） */
body::before{
  content:""; position:fixed; inset:-10% -10% -10% -10%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(46% 34% at 84% -6%, rgba(177,132,255,.22), transparent 60%),
    radial-gradient(42% 32% at 6% 4%, rgba(111,155,255,.18), transparent 62%),
    radial-gradient(60% 46% at 50% 112%, rgba(95,230,220,.10), transparent 60%),
    var(--bg);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.1px 1.1px at 78% 14%, rgba(200,220,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 34% 68%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 62% 46%, rgba(210,190,255,.85), transparent),
    radial-gradient(1.3px 1.3px at 88% 74%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 22% 88%, rgba(190,210,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 50% 30%, rgba(255,255,255,.6), transparent);
  background-repeat:no-repeat;
  animation:drift 120s linear infinite;
}
@keyframes drift{ from{transform:translY(0)} to{transform:translateY(-40px)} }
@media(prefers-reduced-motion:reduce){ body::after{ animation:none } }

a{color:inherit;text-decoration:none}
::selection{background:rgba(177,132,255,.35);color:#fff}

/* ---- nav ---- */
nav{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  padding:16px 28px; background:rgba(7,9,18,.66); backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--border);
}
nav .brand{
  font-family:var(--ui); font-weight:700; font-size:15px; letter-spacing:.0em; margin-right:auto;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
nav a{ color:var(--dim); font-size:14px; font-weight:600; padding:6px 0; position:relative; transition:color .18s; }
nav a:hover{ color:var(--ink); }
nav a.active{ color:var(--ink); font-weight:600; }
nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-17px; height:2px; background:var(--grad); border-radius:2px; }
nav a#logoutLink{ cursor:pointer; }

/* ---- layout ---- */
.wrap{ max-width:1200px; margin:0 auto; padding:44px 24px 110px; }
h1{ font-family:var(--ui); font-size:clamp(24px,3.2vw,34px); font-weight:700; letter-spacing:-.01em; line-height:1.28; margin:0 0 8px; }
h2{ font-family:var(--ui); font-size:19px; font-weight:600; letter-spacing:-.005em; margin:0 0 16px; }
h3{ font-family:var(--ui); font-weight:600; }
.eyebrow{ font-family:var(--ui); font-size:11px; letter-spacing:.32em; font-weight:600; text-transform:uppercase;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0 0 14px; }
.lead,.sub{ color:var(--dim); font-size:15.5px; margin:0; line-height:1.9; }
.divider{ height:1px; background:var(--border); margin:20px 0; border:0; }

/* ---- panels / cards（グラデ極細ボーダー） ---- */
/* カード類は落ち着いた不透明パネル＋通常ヘアライン（メタリックな透け・虹色枠を避ける） */
.card,.step,.done-card{
  position:relative; background:rgba(15,18,36,.72); border:1.5px solid var(--border-str);
  border-radius:var(--r-lg); backdrop-filter:blur(10px); box-shadow:var(--glow);
}
/* モーダルだけはグラデ極細ボーダーを残す（背景が濃く浮かないため） */
.modal,.detail-dialog,.form-dialog{
  position:relative; background:
    linear-gradient(var(--panel),var(--panel)) padding-box,
    var(--hair) border-box;
  border:1px solid transparent; border-radius:var(--r-lg); backdrop-filter:blur(10px);
}
.card{ padding:26px; margin-bottom:18px; box-shadow:var(--shadow-glow); }
.card h2{ color:var(--ink); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border:1px solid transparent; border-radius:12px; cursor:pointer;
  font-family:var(--ui); font-weight:600; font-size:13.5px; letter-spacing:.01em; color:#0a0d1c;
  background:var(--grad); position:relative; overflow:hidden;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, filter .16s;
  box-shadow:0 10px 26px -12px rgba(111,155,255,.75), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 16px 34px -12px rgba(177,132,255,.8), inset 0 1px 0 rgba(255,255,255,.5); filter:brightness(1.04); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn.ghost{ background:var(--panel-2); color:var(--ink); border-color:var(--border-str); box-shadow:none; }
.btn.ghost:hover{ background:rgba(255,255,255,.11); border-color:var(--violet); }
.btn.block{ width:100%; padding:15px; font-size:14.5px; }
.line-button,.btn.line{ background:var(--line-green); color:#fff; box-shadow:0 10px 24px -12px rgba(6,199,85,.8); }

/* ---- chips ---- */
.filter-row,.chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.chip{ padding:8px 16px; border-radius:999px; border:1px solid var(--border-str); background:var(--panel);
  color:var(--dim); font-size:13.5px; font-weight:600; cursor:pointer; transition:.18s; }
.chip:hover{ color:var(--ink); border-color:var(--violet); background:var(--panel-2); }
.chip.active,.chip.chosen{ background:var(--grad); color:#0a0d1c; font-weight:600; border-color:transparent; box-shadow:0 8px 20px -12px rgba(111,155,255,.7); }

/* ---- forms ---- */
label{ display:block; font-size:13px; color:var(--dim); margin:16px 0 7px; font-weight:700; letter-spacing:.02em; }
label:first-child{ margin-top:0; }
label .opt{ font-weight:400; color:var(--faint); }
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  width:100%; padding:13px 15px; border:1px solid var(--border-str); border-radius:12px;
  font-size:15.5px; font-family:var(--sans); background:rgba(4,6,16,.55); color:var(--ink); outline:none;
  transition:border .18s, box-shadow .18s, background .18s;
}
input:focus,textarea:focus,select:focus{ border-color:var(--blue); background:rgba(4,6,16,.75);
  box-shadow:0 0 0 3px rgba(111,155,255,.22), 0 0 24px -6px rgba(111,155,255,.4); }
textarea{ min-height:84px; resize:vertical; line-height:1.7; }
select option{ background:#0b0e22; color:var(--ink); }
input::placeholder,textarea::placeholder{ color:var(--faint); }

/* ---- messages / notes ---- */
.msg{ font-size:13px; margin-top:10px; line-height:1.7; color:var(--dim); }
.msg.error,.msg.err,.error{ color:var(--danger); }
.msg.ok{ color:var(--ok); }
.note{ font-size:12.5px; color:var(--gold); background:rgba(243,205,120,.09); border:1px solid rgba(243,205,120,.26);
  border-radius:12px; padding:12px 14px; margin-top:14px; line-height:1.7; }
.note.ok-note{ color:var(--ok); background:rgba(103,230,174,.09); border-color:rgba(103,230,174,.28); }
.empty{ text-align:center; padding:60px 20px; color:var(--faint); font-size:14px; }
.hidden{ display:none !important; }

/* ---- head row / quick links ---- */
.head-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.quick-links{ display:flex; gap:14px; flex-wrap:wrap; }
.quick-links a{ display:inline-flex; align-items:center; gap:9px; padding:14px 20px; border-radius:14px;
  background:var(--panel); border:1px solid var(--border); color:var(--ink); font-size:13.5px; font-weight:600; transition:.18s; }
.quick-links a:hover{ background:var(--panel-2); border-color:var(--violet); transform:translateY(-2px); }
.quick-links a:first-child{ background:var(--grad-soft); border-color:var(--border-str); }

/* ---- ナビカード（各ページへ飛ぶ強調ボタン） ---- */
.navcards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
@media(max-width:720px){ .navcards{ grid-template-columns:1fr; } }
.navcard{ display:flex; align-items:center; gap:12px; padding:16px 16px; border-radius:16px;
  background:rgba(15,18,36,.72); border:1.5px solid var(--border-str); transition:transform .18s, border-color .18s, box-shadow .18s; }
.navcard:hover{ transform:translateY(-3px); border-color:var(--violet); box-shadow:var(--shadow-glow); }
.navcard.primary{ background:var(--grad-soft); border-color:transparent; box-shadow:0 0 0 1px var(--border-str) inset; }
.nc-ic{ width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--border-str); color:var(--cyan); }
.navcard.primary .nc-ic{ background:var(--grad); border-color:transparent; color:#0a0d1c; box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.nc-ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.nc-txt{ flex:1; min-width:0; }
.nc-txt b{ display:block; font-family:var(--ui); font-weight:700; font-size:13.5px; color:var(--ink); white-space:nowrap; }
.nc-txt small{ display:block; font-size:11px; color:var(--dim); margin-top:3px; line-height:1.45; }
.nc-arrow{ margin-left:2px; }
.nc-arrow{ flex:0 0 auto; color:var(--cyan); font-size:18px; font-weight:700; transition:transform .18s; }
.navcard.primary .nc-arrow{ color:#0a0d1c; }
.navcard:hover .nc-arrow{ transform:translateX(4px); }

/* ---- key-value rows ---- */
.kv-row{ display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--border); font-size:14.5px; }
.kv-row:last-child{ border-bottom:0; }
.kv-key{ color:var(--faint); min-width:132px; flex:0 0 auto; font-size:13px; }

/* ---- badges ---- */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.02em;
  padding:5px 12px; border-radius:999px; background:var(--grad-soft); border:1px solid var(--border-str); color:var(--ink); }
.badge-launch{ background:linear-gradient(120deg,rgba(243,205,120,.2),rgba(255,217,138,.16)); border-color:rgba(243,205,120,.4); color:var(--gold); }

/* ---- modal ---- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(3,4,10,.74); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; z-index:60; padding:20px; animation:fade .2s ease; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.modal,.detail-dialog,.form-dialog{ background:
    linear-gradient(180deg,rgba(22,26,54,.97),rgba(11,14,34,.98)) padding-box, var(--hair) border-box;
  padding:28px; max-width:560px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow); }
.modal h2{ color:var(--ink); }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* ---- radio / plan ---- */
.radio-row,.plan-grid{ display:grid; gap:12px; }
.plan-grid{ grid-template-columns:1fr 1fr; }
.radio-opt,.plan-opt{ display:block; border:1px solid var(--border-str); border-radius:14px; padding:15px 17px; cursor:pointer; background:var(--panel); transition:.18s; }
.radio-opt:hover,.plan-opt:hover{ border-color:var(--violet); background:var(--panel-2); }
.radio-opt.active,.plan-opt.active,.radio-opt:has(input:checked),.plan-opt:has(input:checked){
  border-color:transparent; background:var(--grad-soft); box-shadow:0 0 0 1px var(--border-str) inset; }
.toggle-row,.radio-row{ align-items:center; }

/* ---- price preview ---- */
.price-preview{ background:var(--grad-soft); border:1px solid var(--border-str); border-radius:16px; padding:20px; margin-top:16px; }
.price-label-small{ font-size:12px; color:var(--dim); }
.price-breakdown .old{ text-decoration:line-through; color:var(--faint); }
.price-preview .new,.price-breakdown .new{ font-family:var(--ui); font-size:28px; font-weight:700; font-variant-numeric:tabular-nums;
  line-height:1.15; display:inline-block; margin:4px 0;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* plan/radio 選択肢の階層 */
.plan-opt .t,.radio-opt .t{ font-weight:700; font-size:14.5px; }
.plan-opt .p,.radio-opt .p{ color:var(--dim); font-size:12.5px; margin-top:3px; line-height:1.6; }

/* ---- steps (deliver) ---- */
.step{ padding:22px; margin-bottom:18px; }
.step-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.step-no{ width:30px; height:30px; border-radius:50%; background:var(--grad); color:#0a0d1c; font-weight:700; font-family:var(--ui);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.step-title{ font-size:16px; font-weight:600; margin:0; color:var(--ink); }
.step-hint{ font-size:12.5px; color:var(--dim); margin:2px 0 15px 42px; line-height:1.7; }
.prompt-box{ background:rgba(3,5,14,.72); border:1px solid var(--border-str); color:#dfe6ff; border-radius:12px;
  padding:15px; font-size:12.5px; line-height:1.75; white-space:pre-wrap; word-break:break-word; max-height:260px; overflow-y:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.copy-row{ display:flex; justify-content:flex-end; margin-top:11px; }
.preview-head{ font-size:12.5px; color:var(--faint); margin:0 0 12px; }
.done-card{ padding:44px 28px; text-align:center; box-shadow:var(--shadow); }
.done-card h2{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:21px; }

/* ---- directory ---- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; }
/* 会員カードはメタリックなグラデ枠を使わず、落ち着いたフラット面に */
.member-card{ padding:22px; transition:transform .18s, border-color .18s, background .18s;
  background:rgba(255,255,255,.045); border:1.5px solid var(--border-str); box-shadow:var(--glow); }
.member-card:hover{ transform:translateY(-3px); border-color:var(--border-str); background:rgba(255,255,255,.055); }
.member-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.avatar{ width:40px; height:40px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--ui); font-weight:700; font-size:15px; color:#eaf0ff; background:rgba(120,140,220,.22); border:1px solid var(--border-str); }
.member-name{ font-size:17px; font-weight:700; font-family:var(--ui); margin:0; color:var(--ink); }
.member-role{ font-size:13px; font-weight:600; color:var(--cyan); margin:0 0 12px; }
.member-bio{ font-size:14px; color:var(--dim); line-height:1.8; }
.member-contact{ font-size:13px; color:var(--faint); margin-top:12px; }

/* ---- generic post-card fallback ---- */
.post-card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:12px; }
.post-title{ font-size:15.5px; font-weight:600; margin:0; }
.post-cat{ font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--grad-soft); border:1px solid var(--border-str); color:var(--ink); white-space:nowrap; }
.post-desc{ font-size:13.5px; color:var(--dim); margin:8px 0; line-height:1.7; }
.post-owner{ font-size:12px; color:var(--faint); }
.post-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.post-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

/* ---- checkmark badge ---- */
.mk{ display:inline-flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:50%;
  background:var(--grad); color:#0a0d1c; font-size:32px; font-weight:800; margin:0 auto 20px;
  box-shadow:0 14px 36px -12px rgba(120,90,255,.8), inset 0 1px 0 rgba(255,255,255,.5); }

/* ---- toast ---- */
.cf-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:linear-gradient(120deg,#1c2450,#261a4c) padding-box, var(--hair) border-box; border:1px solid transparent;
  color:#fff; padding:12px 22px; border-radius:12px; font-size:13px; z-index:100; box-shadow:var(--shadow); }

@media(max-width:640px){
  nav{ padding:13px 16px; gap:16px; }
  .wrap{ padding:30px 16px 90px; }
  .plan-grid{ grid-template-columns:1fr; }
}