@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Sans+JP:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --font-sans:'Inter','Noto Sans JP',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Menlo',monospace;
  --bg-0:#000;--bg-1:#070707;--bg-2:#0E0E0E;
  --border:#2A2A2A;--border-strong:#3A362E;
  --ink-1:#F3F0E9;--ink-2:#A8A296;--ink-3:#847E71;
  --accent:#C9A961;--accent-soft:#B89968;--crown:#E6D29A;
  --accent-glow:rgba(201,169,97,0.14);
  --radius:4px;--nav-h:66px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--font-sans);background:var(--bg-0);color:var(--ink-1);
  background-image:radial-gradient(ellipse at 50% -8%,#201d16 0%,#0b0b0a 46%,#070707 100%);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;
}
#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font-family:inherit;}
.hidden{display:none !important;}
.noise{position:absolute;inset:0;opacity:.045;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---- top brand ---- */
.brandrow{display:flex;align-items:center;justify-content:space-between;padding:18px 26px 16px;}
.brandrow .smk{font-size:13px;letter-spacing:.36em;color:var(--accent);font-weight:500;}
.brandrow .smk sup{font-size:.62em;top:-.5em;letter-spacing:0;}
.avatar{width:30px;height:30px;border-radius:50%;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-2);}

.view{flex:1;overflow-y:auto;padding:0 26px calc(var(--nav-h) + 24px);}
.view.noscroll{overflow:hidden;}

/* ---- generic ---- */
.greet{font-family:'Noto Sans JP';font-weight:300;color:var(--ink-2);font-size:13px;letter-spacing:.14em;}
.greet b{color:var(--ink-1);font-weight:400;}
.hero-line{font-family:'Noto Sans JP';font-weight:300;font-size:18px;line-height:1.9;letter-spacing:.1em;margin:16px 0 26px;}
.sec{font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;color:#9A927F;margin:30px 0 12px;display:flex;align-items:center;gap:10px;}
.sec::after{content:"";flex:1;height:1px;background:var(--border);}

/* ---- card ---- */
.card{position:relative;border:1px solid var(--border-strong);border-radius:var(--radius);
  background:linear-gradient(152deg,#191510 0%,#0d0c0a 58%,#0a0a09 100%);overflow:hidden;}
.card .sheen{position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0%,rgba(230,210,154,.10),transparent 55%);pointer-events:none;}
.card .emboss{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.015) 0 2px,transparent 2px 7px);pointer-events:none;}
.trim{position:absolute;width:13px;height:13px;border:1px solid var(--accent);opacity:.5;pointer-events:none;}
.trim.tl{top:9px;left:9px;border-right:none;border-bottom:none;}
.trim.tr{top:9px;right:9px;border-left:none;border-bottom:none;}
.trim.bl{bottom:9px;left:9px;border-right:none;border-top:none;}
.trim.br{bottom:9px;right:9px;border-left:none;border-top:none;}

.home-card{padding:22px 22px 20px;}
.home-card .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;color:var(--accent-soft);}
.home-card .nm{font-family:'Noto Sans JP';font-weight:400;font-size:21px;letter-spacing:.06em;margin-top:12px;}
.home-card .row{display:flex;align-items:center;justify-content:space-between;margin-top:18px;}
.home-card .show{font-family:'Noto Sans JP';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.qr-mini{width:44px;height:44px;border-radius:var(--radius);padding:4px;background:#efe9db;box-shadow:0 0 0 1px #2a2a2a;}

.rowitem{display:flex;align-items:center;justify-content:space-between;padding:15px 2px;border-bottom:1px solid var(--border);gap:14px;}
.rowitem:last-child{border-bottom:none;}
.rowitem .t{font-family:'Noto Sans JP';font-weight:300;font-size:14px;letter-spacing:.06em;line-height:1.5;}
.rowitem .s{font-family:'Noto Sans JP';font-weight:300;font-size:11px;letter-spacing:.08em;color:var(--ink-3);margin-top:5px;}
.rowitem .meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);letter-spacing:.04em;white-space:nowrap;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:breathe 4.5s ease-in-out infinite;flex:none;}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.85);}50%{opacity:1;transform:scale(1.15);}}

/* ---- member card full ---- */
.cardfull{margin:4px 0 0;padding:26px 24px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.crest{width:46px;height:30px;margin-bottom:14px;}
.crest path,.crest line{stroke:var(--crown);fill:none;stroke-width:1;}
.cardfull .mono{font-size:32px;letter-spacing:.28em;color:var(--crown);font-weight:500;padding-left:.28em;line-height:1;}
.cardfull .mono sup{font-size:.55em;top:-.66em;letter-spacing:0;}
.cardfull .est{font-family:'Noto Sans JP';font-weight:300;font-size:8.5px;letter-spacing:.42em;color:var(--ink-3);margin-top:11px;}
.divider{width:54px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:20px 0 18px;opacity:.7;}
.cardfull .nm{font-family:'Noto Sans JP';font-weight:400;font-size:23px;letter-spacing:.16em;}
.metaline{display:flex;align-items:center;gap:14px;margin-top:15px;}
.cardfull .tier{font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;color:var(--crown);border:1px solid #5A4A2A;background:#221c12;padding:6px 15px;border-radius:2px;}
.cardfull .no{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--ink-3);}
.qrwrap{margin:22px 0 8px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.qr{width:150px;height:150px;border-radius:var(--radius);padding:10px;background:#efe9db;box-shadow:0 0 0 1px #2a2a2a,0 12px 26px -14px rgba(201,169,97,.30);}
.qrcap{font-family:'Noto Sans JP';font-weight:300;font-size:10px;letter-spacing:.2em;color:var(--ink-3);}

/* ---- reservation ---- */
.live{position:relative;display:flex;align-items:center;gap:12px;padding:15px 18px;border:1px solid var(--border-strong);border-radius:var(--radius);background:linear-gradient(150deg,#12140f,#0b0b0b);}
.live .pulse{width:8px;height:8px;border-radius:50%;background:#93C081;box-shadow:0 0 10px #93C081;flex:none;animation:breathe 4.5s ease-in-out infinite;}
.live.full .pulse{background:var(--ink-3);box-shadow:none;}
.live .lt{display:flex;align-items:baseline;gap:10px;font-family:'Noto Sans JP';font-weight:300;font-size:12px;letter-spacing:.1em;color:var(--ink-2);}
.live .lt b{color:var(--ink-1);font-weight:500;font-size:13px;}
.livesub{font-family:'Noto Sans JP';font-weight:300;font-size:11px;letter-spacing:.12em;color:var(--ink-3);margin:9px 2px 0;}
.toggle{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:22px 0 6px;}
.toggle div{flex:1;text-align:center;padding:12px 0;font-family:'Noto Sans JP';font-weight:300;font-size:12px;letter-spacing:.1em;color:var(--ink-3);cursor:pointer;}
.toggle div.on{background:var(--accent-glow);color:var(--accent);}
.caltitle{display:flex;align-items:center;justify-content:space-between;margin:24px 2px 12px;}
.caltitle .m{font-family:'Noto Sans JP';font-weight:400;font-size:14px;letter-spacing:.1em;}
.caltitle .nav2{font-family:var(--font-mono);font-size:16px;color:var(--ink-2);letter-spacing:.1em;display:flex;gap:18px;}
.caltitle .nav2 span{cursor:pointer;padding:2px 4px;}
.slot{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1px solid var(--border);cursor:pointer;}
.slot .tm{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;}
.slot .st{font-family:'Noto Sans JP';font-weight:300;font-size:12px;letter-spacing:.14em;display:flex;align-items:center;gap:9px;color:var(--ink-2);}
.mk{font-size:15px;font-family:var(--font-mono);}
.mk.o{color:#B7C9A6;}.mk.t{color:var(--accent);}.mk.x{color:var(--ink-3);}
.slot.disabled{cursor:not-allowed;}
.slot.disabled .tm{color:var(--ink-3);}
.slot.sel{background:linear-gradient(90deg,var(--accent-glow),transparent);}
.slot.sel .st{color:var(--accent);}

/* companion form */
.field{margin:16px 0;}
.field label{display:block;font-family:'Noto Sans JP';font-weight:300;font-size:12px;letter-spacing:.1em;color:var(--ink-2);margin-bottom:8px;}
.field input,.field textarea{width:100%;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--ink-1);padding:13px 14px;font-size:15px;letter-spacing:.04em;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-soft);}
.field .opt{color:var(--ink-3);font-size:10px;margin-left:8px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* 同伴者カード（複数入力） */
.compcard{border:1px solid var(--border);border-radius:var(--radius);padding:4px 16px 6px;margin:12px 0;background:var(--bg-1);}
.comphead{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:#9A927F;margin:12px 0 2px;}
.compdel{color:var(--ink-3);font-family:'Noto Sans JP';font-weight:300;letter-spacing:.1em;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.compadd{margin-top:4px;}

/* buttons */
.btn{display:block;width:100%;text-align:center;padding:16px;border-radius:var(--radius);background:linear-gradient(180deg,#d8bd7e,#c2a35f);color:#1a140a;font-family:'Noto Sans JP';font-weight:500;font-size:14px;letter-spacing:.18em;}
.btn:disabled{opacity:.4;}
.btn.ghost{background:transparent;border:1px solid var(--border-strong);color:var(--ink-2);}
.note{text-align:center;font-family:'Noto Sans JP';font-weight:300;font-size:10.5px;letter-spacing:.12em;color:var(--ink-3);margin-top:12px;}
.stickycta{position:sticky;bottom:0;padding:14px 0 4px;background:linear-gradient(0deg,var(--bg-0) 70%,transparent);}

/* messages */
.msg{max-width:78%;padding:12px 15px;border-radius:10px;font-family:'Noto Sans JP';font-weight:300;font-size:14px;line-height:1.7;letter-spacing:.04em;margin:10px 0;}
.msg.staff{background:var(--bg-2);border:1px solid var(--border);border-top-left-radius:2px;}
.msg.member{background:linear-gradient(135deg,#2a2214,#211b10);border:1px solid #4a3d22;margin-left:auto;border-top-right-radius:2px;color:var(--crown);}
.msgtime{font-family:var(--font-mono);font-size:9px;color:var(--ink-3);margin:0 4px;}
.msg.member + .msgtime{text-align:right;}
.composer{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 0;background:var(--bg-0);}
.composer input{flex:1;background:var(--bg-2);border:1px solid var(--border);border-radius:20px;color:var(--ink-1);padding:12px 16px;font-size:15px;}
.composer input:focus{outline:none;border-color:var(--accent-soft);}
.composer button{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#1a140a;font-size:18px;flex:none;}

/* announcements */
.anc{padding:18px 2px;border-bottom:1px solid var(--border);}
.anc h3{font-family:'Noto Sans JP';font-weight:400;font-size:15px;letter-spacing:.06em;display:flex;align-items:center;gap:9px;}
.anc .date{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);margin-top:6px;letter-spacing:.06em;}
.anc p{font-family:'Noto Sans JP';font-weight:300;font-size:13px;line-height:1.8;letter-spacing:.04em;color:var(--ink-2);margin-top:12px;}

/* empty */
.empty{text-align:center;color:var(--ink-3);font-family:'Noto Sans JP';font-weight:300;font-size:13px;letter-spacing:.1em;padding:60px 0;}

/* ---- login ---- */
.login{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 34px calc(var(--nav-h));text-align:center;}
.login .lmono{font-size:34px;letter-spacing:.3em;color:var(--crown);font-weight:500;padding-left:.3em;}
.login .lmono sup{font-size:.55em;top:-.66em;letter-spacing:0;}
.login .lsub{font-family:'Noto Sans JP';font-weight:300;font-size:12px;letter-spacing:.28em;color:var(--ink-3);margin-top:12px;}
.login .ltitle{font-family:'Noto Sans JP';font-weight:300;font-size:15px;letter-spacing:.1em;color:var(--ink-1);margin:40px 0 6px;}
.login .ldesc{font-family:'Noto Sans JP';font-weight:300;font-size:12px;line-height:1.9;letter-spacing:.08em;color:var(--ink-3);margin-bottom:24px;}
.login .field{text-align:left;}
.errline{color:#D97070;font-family:'Noto Sans JP';font-weight:300;font-size:12px;letter-spacing:.06em;margin-top:14px;min-height:16px;}
/* ソーシャルログイン（静のトーン：ブランド色はアイコンの印だけに留める） */
.sbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px;border-radius:var(--radius);font-family:'Noto Sans JP';font-weight:400;font-size:13.5px;letter-spacing:.14em;margin:12px 0 0;cursor:pointer;border:1px solid var(--border-strong);background:var(--bg-2);color:var(--ink-1);}
.sbtn:disabled{opacity:.4;}
.sbtn .sic{width:17px;height:17px;flex:none;}
.sbtn-line .sic{fill:#06C755;stroke:none;}
.sbtn-google .sic{fill:var(--ink-2);stroke:none;}
.lhint{font-family:'Noto Sans JP';font-weight:300;font-size:11px;line-height:1.9;letter-spacing:.08em;color:var(--ink-3);margin:26px 0 2px;text-align:left;}
.linkbtn{font-family:'Noto Sans JP';font-weight:300;font-size:12px;letter-spacing:.1em;color:var(--ink-3);margin-top:22px;text-decoration:underline;text-underline-offset:3px;}

/* ---- bottom nav ---- */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:var(--nav-h);border-top:1px solid var(--border);display:flex;background:var(--bg-1);padding-bottom:env(safe-area-inset-bottom,10px);z-index:50;}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative;cursor:pointer;}
.nav .ic{width:20px;height:20px;stroke:var(--ink-3);fill:none;stroke-width:1.4;}
.nav .lb{font-family:'Noto Sans JP';font-weight:300;font-size:9.5px;letter-spacing:.1em;color:var(--ink-3);}
.nav a.on .ic{stroke:var(--accent);}
.nav a.on .lb{color:var(--accent);}
.nav .badge{position:absolute;top:11px;right:calc(50% - 20px);width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);}

/* toast */
.toast{position:fixed;bottom:calc(var(--nav-h) + 20px);left:50%;transform:translateX(-50%);background:#1a1712;border:1px solid var(--border-strong);color:var(--ink-1);font-family:'Noto Sans JP';font-weight:300;font-size:13px;letter-spacing:.06em;padding:13px 22px;border-radius:var(--radius);z-index:100;opacity:0;transition:opacity .25s;max-width:88%;text-align:center;}
.toast.show{opacity:1;}

.spin{width:22px;height:22px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;margin:60px auto;}
@keyframes sp{to{transform:rotate(360deg);}}