@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Shippori+Mincho:wght@400;500;600&display=swap');

:root { color-scheme: dark; background: #080808; color: #f2eee9; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
main { width: 100%; }
input, button, .button { border-radius: 0; }
input:focus-visible, button:focus-visible, .button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #bd706f; outline-offset: 3px; }
.message { border-left: 2px solid #a62b2b; padding: 12px 15px; background: #261719; line-height: 1.7; }
.muted { color: #bcb7b2; font-size: .85rem; line-height: 1.7; }

/* Krone.jpに合わせた、外向きのログイン画面 */
.mode-public { font-family: 'Shippori Mincho', 'Yu Mincho', serif; background: radial-gradient(ellipse at 50% 22%, #321518 0%, #120b0c 42%, #060606 78%); }
.mode-public main { position: relative; width: min(100%, 510px); padding: clamp(36px, 7vw, 68px); background: linear-gradient(155deg, #1a1213, #100d0d 72%); border: 1px solid #4d3435; box-shadow: 0 30px 90px #000b; }
.mode-public main::before { content: ''; position: absolute; inset: 8px; border: 1px solid #ffffff12; pointer-events: none; }
.brand-lockup { text-align: center; margin: 0 0 42px; }
.brand-lockup span { display: block; font: 400 clamp(2.7rem, 9vw, 3.7rem)/1.1 Georgia, 'Times New Roman', serif; letter-spacing: .035em; }
.brand-lockup small { display: block; margin-top: 12px; font: 400 .57rem/1.5 Montserrat, sans-serif; letter-spacing: .42em; color: #cbb9b3; }
.mode-public .eyebrow { font: 400 .63rem/1.5 Montserrat, sans-serif; letter-spacing: .28em; color: #bea9a2; text-align: center; }
.mode-public .eyebrow span { color: #b2444a; padding: 0 .4em; }
.mode-public h1 { margin: 18px 0 37px; font-size: clamp(1.5rem, 5vw, 1.95rem); font-weight: 400; letter-spacing: .16em; text-align: center; }
.mode-public label { display: block; margin: 18px 0 8px; font-size: .83rem; letter-spacing: .1em; }
.mode-public input { display: block; width: 100%; min-height: 50px; padding: 12px 14px; color: #fff; background: #0e0c0c; border: 1px solid #5a4848; font: 400 1rem 'Shippori Mincho', serif; }
.mode-public input::placeholder { color: #a39692; }
.mode-public button, .mode-public .button { display: block; width: 100%; margin-top: 29px; padding: 15px 12px; color: #fff; background: #76262d; border: 1px solid #a44950; font: 500 .91rem 'Shippori Mincho', serif; letter-spacing: .16em; text-align: center; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s; }
.mode-public button:hover, .mode-public .button:hover { background: #96323a; border-color: #c0676d; }
.mode-public .secondary { margin-top: 13px; background: transparent; border-color: #675356; color: #e9dbd6; }
.mode-public .secondary:hover { background: #271b1e; }
.site-return { display: block; margin-top: 31px; color: #b6a6a2; font: 400 .68rem Montserrat, sans-serif; letter-spacing: .08em; text-align: center; text-decoration: none; }
.site-return:hover { color: #fff; }

/* ログイン後と新規登録: 簡素な端末UI */
.mode-system { font-family: 'Courier New', Courier, monospace; background: #080a09; color: #e8ede9; }
.mode-system main { width: min(100%, 640px); padding: clamp(23px, 5vw, 42px); background: #101411; border: 1px solid #3c5543; box-shadow: 5px 5px 0 #000; }
.system-status { display: flex; justify-content: space-between; gap: 12px; margin: -1px -1px 26px; padding: 8px 10px; background: #1b2b20; border: 1px solid #42664b; color: #a1d8a9; font-size: .63rem; letter-spacing: .06em; }
.mode-system .eyebrow { color: #8aaa90; font-size: .68rem; letter-spacing: .11em; }
.mode-system .eyebrow span { color: #b85050; }
.mode-system h1 { margin: 11px 0 24px; font-size: clamp(1.25rem, 4vw, 1.65rem); font-weight: 400; letter-spacing: .025em; }
.mode-system h2 { font-size: 1.02rem; font-weight: 400; }
.mode-system label { display: block; margin: 13px 0 6px; font-size: .78rem; letter-spacing: .03em; }
.mode-system input { display: block; width: 100%; min-height: 44px; padding: 10px 12px; color: #f1f5f1; background: #0a100c; border: 1px solid #48624e; font: 400 .93rem 'Courier New', Courier, monospace; }
.mode-system input::placeholder { color: #8caa93; }
.mode-system button, .mode-system .button { display: block; width: 100%; margin-top: 20px; padding: 11px 12px; color: #eef8ef; background: #244c30; border: 1px solid #578565; font: 400 .84rem 'Courier New', Courier, monospace; letter-spacing: .05em; text-align: center; text-decoration: none; cursor: pointer; }
.mode-system button:hover, .mode-system .button:hover { background: #32673f; }
.mode-system .secondary { margin-top: 10px; color: #c4dcc8; background: transparent; border-color: #4a6850; }
.mode-system .secondary:hover { background: #17251b; }
.mode-system .message { background: #211719; }
.staff-name { font-size: 1.08rem; }
.staff-email { color: #a6b9a9; font-size: .83rem; overflow-wrap: anywhere; }
.code-list { list-style: none; padding: 0; }
.code-list li, .statement { border: 1px solid #3c5543; padding: 13px; margin: 10px 0; }
.system-panel { border-top: 1px solid #3c5543; margin: 24px 0; padding-top: 20px; }
.system-panel h2 { color: #e8ede9; }
.system-panel p { color: #becabf; line-height: 1.7; font-size: .84rem; }
.statement summary { cursor: pointer; color: #e6f1e8; }
.statement summary span { float: right; color: #a0bda5; font-size: .77rem; }
.ack { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.ack input { width: 18px; min-height: 18px; flex: 0 0 18px; margin: 3px 0 0; accent-color: #438b56; }
#signature-canvas { width: 100%; height: 160px; background: #f5f3ed; border: 1px solid #7a887d; touch-action: none; }
.verify-name { color: #c4d9c8; margin: -10px 0 25px; }
.verify-stage { color: #61d17f; min-height: 1.5em; font-size: .9rem; }
.progress { height: 13px; padding: 2px; border: 1px solid #477354; background: #071009; margin: 14px 0 24px; }
.progress span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #3ba864 0 13px, #234f35 13px 16px); transition: width .18s linear; }
.verify-steps { padding-left: 1.5em; color: #a5bca9; font-size: .77rem; line-height: 1.85; }
.verify-welcome { margin: 22px 0 0; font-size: 1.2rem; color: #e8f5e9; }
.verify-skip { display: inline-block; margin-top: 24px; color: #a6c5ad; font-size: .77rem; }
@media (max-width: 600px) { body { padding: 14px; } .mode-public main { padding: 42px 29px; } .mode-system main { padding: 22px 18px; } .system-status { font-size: .55rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }