/* ============================
   CSS Variables
============================ */
:root {
    /* ── Morning / Sunrise ── */
    --orange:        #FF8A24;
    --orange-mid:    #FFB547;
    --orange-light:  #FFE29A;
    --orange-pale:   #FFF4D9;
    --orange-hover:  #F4681E;

    /* Moonlight */
    --moon:          #B9CCFF;
    --moon-light:    #DCE7FF;
    --moon-white:    #F7FAFF;
    --moon-glow:     #8DAEFF;

    /* Sky */
    --sky-blue:      #568BFF;
    --sky-light:     #9FD7FF;
    --sky-deep:      #194DAB;

    /* ── Night / Dusk ── */
    --night:         #050B1C;
    --night-deep:    #081633;
    --night-mid:     #102A5A;
    --night-accent:  var(--sky-blue);
    --night-soft:    var(--sky-light);

    /* ── Base ── */
    --white:         #FFFFFF;
    --dark:          #11192B;
    --gray:          #5D687D;
    --gray-light:    #0B1630;
    --border:        #23385F;
    --surface-night: rgba(8, 23, 52, 0.82);
    --surface-glass: rgba(16, 39, 82, 0.5);
    --glass-border:  rgba(192, 216, 255, 0.14);
    --glass-panel:   linear-gradient(145deg, rgba(28, 61, 120, .4), rgba(5, 15, 38, .56));
    --glass-panel-strong: linear-gradient(145deg, rgba(24, 55, 110, .56), rgba(4, 12, 31, .72));
    --glass-shadow:  0 18px 46px rgba(0, 5, 22, .2), inset 0 1px 0 rgba(255, 255, 255, .05);
    --text-bright:   rgba(255, 255, 255, 0.96);
    --text-soft:     rgba(255, 255, 255, 0.7);
    --text-muted:    rgba(255, 255, 255, 0.55);
    --radius-sm:     12px;
    --radius-md:     16px;
    --radius:        20px;
    --radius-lg:     28px;
    --shadow:        0 18px 48px rgba(6, 24, 62, 0.12);
    --shadow-sm:     0 8px 20px rgba(7, 25, 60, 0.1);
    --shadow-night:  0 16px 48px rgba(37, 92, 194, 0.2);
    --shadow-sun:    0 16px 48px rgba(255, 126, 32, 0.2);
    --ease-out:      cubic-bezier(.22, 1, .36, 1);
}

/* ============================
   Reset & Base
============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-bright);
    background: var(--night);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--orange-mid); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--orange-light); }
img { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus,
.skip-link:focus { z-index: 1000; top: 12px; left: 12px; width: auto; height: auto; padding: 10px 16px; margin: 0; overflow: visible; clip: auto; border-radius: 10px; background: var(--white); color: var(--night); font-weight: 700; }
:focus-visible { outline: 3px solid var(--moon-light); outline-offset: 4px; }
#main[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--orange-light); color: var(--night); }
.home { background: var(--night); }