/* A quiet departure board: data first, touch-friendly controls, both themes. */
:root { --font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif; }
:root:lang(ja) { --font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", "Pretendard Variable", sans-serif; }
:root:lang(zh) { --font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Pretendard Variable", sans-serif; }
body { transition: background .2s, color .2s; }
.theme-light { --bg-color: #f7f8fa; --surface-color: #fff; --surface-color-solid:#fff; --surface-border: #e5e7eb; --text-primary:#22252a; --text-secondary:#626974; --text-tertiary:#777f8b; --color-primary:#326be6; --color-success:#326be6; --shadow-md:0 2px 6px #18243804; --shadow-lg:0 8px 28px #18243806; }
.theme-dark { --bg-color:#12151b; --surface-color:#1b2029; --surface-color-solid:#1b2029; --surface-border:#323a47; --text-primary:#f4f6fa; --text-secondary:#b1bac8; --text-tertiary:#95a0b2; --color-primary:#8ab1ff; --color-success:#8ab1ff; background:#12151b; }
.app-container { max-width: 780px; padding: 24px 28px 48px; gap:18px; }
.app-controls { margin-bottom: 0; }
.header { text-align:left; margin-bottom:0; }
.wordmark { display:flex; align-items:center; gap:9px; color:var(--text-secondary); text-decoration:none; font-size:11px; font-weight:750; letter-spacing:.12em; margin-bottom:26px; }
.wordmark__icon { display:block; width:32px; height:32px; border-radius:9px; }
.terminal-label { margin-left:auto; border:1px solid var(--surface-border); padding:5px 8px; border-radius:5px; font-size:9px; letter-spacing:.06em; }
.header__title { font-size:clamp(28px,5vw,42px); letter-spacing:-.055em; line-height:1.3; display:flex; flex-wrap:wrap; gap:0 10px; }
.text-gradient { background:none; color:var(--text-primary); -webkit-text-fill-color:currentColor; }
.header__subtitle { color:var(--text-secondary); line-height:1.8; margin-top:12px; font-size:14px; }
.main-content { gap:20px; }
.data-status { color:var(--text-secondary); font-size:12px; padding:0 2px; line-height:1.8; }
.action-banner { border:1px solid var(--surface-border); border-radius:18px; background:var(--surface-color-solid); padding:26px; text-align:left; box-shadow:none; }
.action-banner::before { display:none; }
.action-banner__badge { font-size:11px; padding:4px 9px; margin-bottom:12px; }
.action-banner__badge { background:#eef3ff; border-color:#dbe5ff; color:#326be6; }
.action-banner__title { font-size:15px; font-weight:550; line-height:1.7; color:var(--text-secondary); }
.action-banner__gate { font-size:clamp(23px,4vw,32px); margin-top:10px; letter-spacing:-.04em; line-height:1.4; font-weight:750; }
.action-banner__desc { margin-top:12px; font-size:13px; line-height:1.8; color:var(--text-secondary); }
.affiliate-banner { order:5; background:var(--surface-color-solid); border:1px solid var(--surface-border); box-shadow:none; border-radius:12px; }
.section-header { margin:16px 0 14px; }
.section-title { font-size:18px; letter-spacing:-.035em; }
.icon-button,.lang-select { min-height:44px; min-width:44px; }
.gates-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.gate-card { border:1px solid var(--surface-border); border-radius:12px; padding:18px; box-shadow:none; min-height:86px; gap:12px; background:var(--surface-color-solid); }
.gate-card:hover { transform:none; border-color:var(--text-tertiary); }
.gate-card__name { font-size:14px; line-height:1.6; }
.gate-card__status-text { font-size:11px; }
.gate-card__status-text { color:var(--text-secondary); }
.gate-card__time-min { font-size:25px; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.gate-card__time-label { font-size:10px; }
.seo-guide { margin-top:32px; padding:26px; border:1px solid var(--surface-border); border-radius:16px; background:var(--surface-color-solid); box-shadow:none; }
.seo-guide__title { font-size:19px; line-height:1.6; letter-spacing:-.03em; }
.seo-guide p { font-size:13px; line-height:1.95; }
.seo-guide h3 { font-size:15px; }
.btn-primary { background:#22252a; border:1px solid #22252a; color:#fff; box-shadow:none; border-radius:10px; font-size:14px; }
.btn-primary:hover { background:#353b46; box-shadow:none; transform:none; }
.footer { margin-top:28px; }
.footer__notice { line-height:1.8; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; margin-top:16px; font-size:11px; }
.footer-links a,.footer-links button { color:var(--text-secondary); font:inherit; background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.footer-links a,.footer-links button { min-height:36px; display:inline-flex; align-items:center; }
:focus-visible { outline:3px solid #5c86d6; outline-offset:4px; }
.analytics-consent { position:fixed; left:16px; right:16px; bottom:16px; z-index:100; max-width:660px; margin:auto; padding:20px; border:1px solid var(--surface-border); border-radius:14px; background:var(--surface-color-solid); color:var(--text-primary); box-shadow:0 10px 50px #0002; font-size:13px; line-height:1.8; }
.analytics-consent[hidden] { display:none; }
.analytics-consent p { margin:0 0 12px; }
.analytics-consent a { color:inherit; }
.analytics-consent__actions { display:flex; gap:10px; flex-wrap:wrap; }
.analytics-consent button { padding:9px 16px; border:1px solid var(--text-secondary); border-radius:8px; font:inherit; cursor:pointer; background:var(--surface-color-solid); color:var(--text-primary); }
.analytics-consent button:last-child { background:#22252a; color:white; border-color:#22252a; }
.recommendation-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:12px 0 20px; }
.recommendation-name { font-size:clamp(21px,4vw,29px); font-weight:750; letter-spacing:-.045em; line-height:1.5; }
.recommendation-stat { display:flex; align-items:baseline; gap:3px; color:var(--color-primary); white-space:nowrap; font-size:14px; }
.recommendation-stat strong { font-size:64px; line-height:1; letter-spacing:-.065em; font-weight:650; font-variant-numeric:tabular-nums; }
@media(max-width:520px) { .app-container{padding:20px 18px 40px}.app-controls{margin-bottom:18px}.gates-list{grid-template-columns:1fr}.action-banner{padding:22px}.gate-card{min-height:76px}.seo-guide{padding:21px}.wordmark{font-size:9px}.terminal-label{font-size:8px}.header__title{font-size:30px} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important} }