/* =====================================================
   基本設定・ブラウザー既定スタイルの調整
   ===================================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(20, 87, 217, 0.09), transparent 34rem),
        var(--bg);
}

button,
input,
select {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

[hidden] {
    display: none !important;
}

/* =====================================================
   ヘッダー・アプリ全体のレイアウト
   ===================================================== */

.site-header {
    padding: 42px 24px 28px;
    text-align: center;
}

.site-header h1 {
    margin: 4px 0 8px;
    font-size: clamp(1.65rem, 4vw, 2.55rem);
    letter-spacing: 0.03em;
}

.eyebrow,
.section-kicker,
.muted-label {
    margin: 0;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.header-description {
    margin: 0;
    color: var(--muted);
}

.app-shell,
.login-layout {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 60px;
}

.login-layout {
    display: grid;
    place-items: center;
    min-height: 55vh;
}

.login-box {
    width: min(440px, 100%);
    padding: 32px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(219, 227, 238, 0.9);
    border-radius: 24px;
    box-shadow: var(--shadow);
}