/* ========================================
   GLOBAL BASE & RESPONSIVE FOUNDATION
   ======================================== */

/* ── CSS variables ── */
:root {
    /* Color palette */
    --gold:        rgba(212, 169, 64, 1);
    --white:       #ffffff;
    --white-ghost: rgba(255, 255, 255, 0.20);
    --black:       #111111;
    --orange:      #e07830;
    --red:         #ff0000;

    /* Font families */
    --ff-sans:  'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
    --ff-serif: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;

    /* Font weight ── ここ1行で全体のベースを変更 ── */
    --fw-base: 400;

    /* Fluid spacing */
    --gap-xs:  clamp(8px,  2vw,  12px);
    --gap-sm:  clamp(16px, 3vw,  24px);
    --gap-md:  clamp(24px, 4vw,  36px);
    --gap-lg:  clamp(32px, 5vw,  52px);

    /* Fluid font sizes */
    --fs-micro:  clamp(0.52rem, 1.2vw, 0.62rem);
    --fs-small:  clamp(0.72rem, 1.6vw, 0.88rem);
    --fs-body:   clamp(0.88rem, 2vw,   1.05rem);
    --fs-title:  clamp(1.4rem,  4vw,   2rem);
}

/* ── reset ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── base ── */
html {
    font-size: 13px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
    font-weight: var(--fw-base);
}

/* ── images ── */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── interactive elements ── */
button, input, textarea, select {
    font-family: inherit;
    font-weight: inherit;
    -webkit-tap-highlight-color: transparent;
}

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

/* ── scrollbar (desktop) ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold); }

/* ========================================
   SHARED TEXT COMPONENTS
   各ページ CSS はレイアウト差分のみ記述
   ======================================== */

/* ── Gold uppercase micro label ──
   index: .label-members / login: .card-label */
.label-members,
.card-label {
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);

    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ── Italic serif tagline ── */
.label-tagline {
    font-family: var(--ff-serif);
    font-size: var(--fs-body);

    font-style: italic;
    letter-spacing: 0.12em;
    color: var(--white);
}

/* ── Gold border button (base) ──
   index / login 共通。padding/display は各ページ CSS でオーバーライド */
.btn-login {
    font-family: var(--ff-sans);

    text-transform: uppercase;
    color: var(--white);
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.btn-login:active {
    background: var(--gold);
}

/* ── Error / alert text ── */
.error-msg {
    font-family: var(--ff-sans);
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    color: var(--black);
}

/* ========================================
   RESPONSIVE BREAKPOINTS (mobile-first)

   xs  : ~ 0px      (default styles)
   sm  : >= 480px
   md  : >= 768px
   lg  : >= 1024px
   xl  : >= 1280px
   ======================================== */