:root { --paper:#f4efe5; --card:#fffdf8; --ink:#25231f; --muted:#777064; --line:#ded5c5; --accent:#e86e16; --dark:#171612; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:var(--paper); color:var(--ink); font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif; }
button,input { font:inherit; }
.access-page { min-height:100dvh; display:grid; place-items:center; padding:24px 16px; background:radial-gradient(circle at 12% 10%,rgba(232,110,22,.12),transparent 27%),linear-gradient(145deg,#f8f1e4 0%,#eee4d3 100%); }
.access-card { position:relative; width:min(100%,430px); padding:38px 30px 28px; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:0 20px 60px rgba(56,43,25,.15); overflow:hidden; }
.access-card::before { content:""; position:absolute; inset:0 auto 0 0; width:7px; background:var(--accent); }
.brand-mark { position:absolute; top:22px; right:24px; color:rgba(232,110,22,.14); font:900 66px/1 Arial,sans-serif; }
.eyebrow { margin:0 0 12px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.18em; }
h1 { margin:0; font-family:"Yu Mincho","Noto Serif SC",serif; font-size:clamp(34px,10vw,46px); line-height:1.12; letter-spacing:.04em; }
.brand-hanyu { display:inline-block; font-family:Georgia,"Times New Roman",serif; font-size:1.2em; font-weight:900; font-style:italic; letter-spacing:.015em; color:var(--dark); text-shadow:3px 3px 0 rgba(232,110,22,.2); }
.subtitle { margin:8px 0 0; color:var(--muted); font-size:14px; font-weight:700; letter-spacing:.15em; }
.rule { width:46px; height:4px; margin:22px 0; border-radius:4px; background:var(--accent); }
.guide { margin:0 0 22px; color:#514b42; font-size:14px; line-height:1.8; }
label { display:block; margin-bottom:8px; font-size:12px; font-weight:800; }
input { width:100%; min-height:52px; padding:12px 14px; border:1px solid #cfc4b3; border-radius:12px; background:#fff; color:var(--ink); font-size:18px; font-weight:800; letter-spacing:.08em; outline:none; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(232,110,22,.13); }
button { width:100%; min-height:52px; margin-top:12px; border:0; border-radius:12px; background:var(--dark); color:#fff; font-weight:800; cursor:pointer; }
button:hover { background:var(--accent); }
button:focus-visible { outline:3px solid rgba(232,110,22,.35); outline-offset:3px; }
button:disabled { cursor:wait; opacity:.68; }
.error { margin:9px 0 0; color:#a12e25; font-size:12px; line-height:1.55; }
.note { margin:18px 0 0; color:var(--muted); font-size:11px; line-height:1.7; }
@media (max-width:480px) { .access-page { place-items:stretch; padding:0; background:var(--card); } .access-card { width:100%; min-height:100dvh; padding:58px 26px 28px; border:0; border-radius:0; box-shadow:none; } .brand-mark { top:38px; } }