/* U18 / Seoul street-poster edition. Shared by the preview and VPS frontend. */
:root {
  --bg: #10141d;
  --surface: #191f2c;
  --surface-2: #232d42;
  --line: #3c4961;
  --text: #f2ecdf;
  --muted: #b5bbca;
  --accent: #ff923e;
  --action: #ff923e;
  --accent-text: #151b29;
  --accent-soft: #ff923e18;
  --blue: #8ba9ff;
  --blue-solid: #375bb0;
  --paper: #f2ecdf;
  --ink: #10141d;
  --radius: 3px;
  --shadow: 7px 8px 0 #080b124d;
}
:root[data-theme=light] {
  --bg: #eee9de;
  --surface: #faf6ed;
  --surface-2: #e1e4ed;
  --line: #b6bbc8;
  --text: #182039;
  --muted: #565d70;
  --accent: #a4430c;
  --blue: #3456a0;
  --shadow: 6px 7px 0 #19223a16;
}
body {
  background-image: radial-gradient(circle, #8c9cc014 .6px, transparent .9px);
  background-size: 5px 5px;
}
.container, .site-footer { max-width: 1380px; }
.site-header { height: 92px; border-bottom: 2px solid var(--line); }
.brand { font-family: Display, Impact, sans-serif; font-size: 29px; letter-spacing: -.025em; font-style: italic; }
.brand i { font: 600 7px Inter, sans-serif; letter-spacing: .22em; margin-top: 8px; }
.brand-avatar { width: 47px; height: 47px; border-radius: 3px; border: 2px solid var(--blue); transform: rotate(-5deg); box-shadow: 3px 3px 0 var(--ink); }
nav a { font-weight: 650; }
nav a.active { color: var(--text); }
nav a.active:after { height: 5px; bottom: 20px; transform: skew(-25deg) rotate(-3deg); }
.nav-dot { background: var(--blue); }
.icon-button, .button, .filter-tab, .chip, .search-input, .field input, .field select, .field textarea, .admin-tabs button, .notice, .toast { border-radius: 3px; }
.button { border: 1px solid #0d1528; box-shadow: 3px 4px 0 #080d1938; font-weight: 750; }
.button:hover { transform: translate(-1px,-2px); box-shadow: 5px 6px 0 #080d1940; }
.button-outline { border-color: var(--line); box-shadow: none; }
.button-outline:hover { border-color: var(--blue); }
.button-dark { background: var(--ink); color: var(--paper); border-color: var(--line); }
.eyebrow { font-size: 10px; letter-spacing: .19em; }
.welcome-line { padding: 25px 0 22px; }
.welcome-line .eyebrow { color: var(--blue); }
.welcome-line .right { font-size: 10px; letter-spacing: .04em; }
.hero-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
.hero {
  min-height: 590px; border: 0; border-radius: 0; color: var(--paper);
  background: #101722; overflow: hidden;
  clip-path: polygon(0 1.8%, 32% 0, 66% 1%, 100% 0, 99.5% 97.9%, 72% 100%, 32% 99%, 0 100%);
}
.hero-image { object-position: center top; }
.hero:before {
  background: linear-gradient(90deg,#0c1422eb, #0c1422a8 26%,#0c14221a 52%,transparent 72%),linear-gradient(0deg,#0b111dcc,transparent 26%);
}
.hero-copy { padding: 58px 48px 32px; max-width: 620px; }
.hero .eyebrow { color: var(--paper); font-size: 10px; letter-spacing: .21em; }
.hero .eyebrow .dot { background: var(--action); }
.hero h1 { font-size: clamp(85px,7.3vw,112px); font-weight: 800; line-height: .9; letter-spacing: -.035em; font-style: italic; transform: rotate(-3deg); transform-origin: left center; margin: 25px 0 29px; text-shadow: 3px 4px 0 #101722; }
.hero h1 em { display: inline-block; position: relative; color: var(--action); font-style: inherit; z-index: 0; }
.hero h1 em:after { content: ''; position: absolute; left: -3%; right: -5%; height: 12px; bottom: -12px; background: var(--blue-solid); z-index: -1; transform: rotate(-2deg); clip-path: polygon(3% 23%,100% 0,96% 45%,100% 55%,2% 100%,7% 64%,0 74%); }
.hero p { color: #d2d5df; font-size: 14px; line-height: 1.85; max-width: 365px; }
.hero-buttons { gap: 25px; margin-top: 30px; }
.hero .button { background: var(--action); color: var(--ink); padding: 16px 23px; transform: rotate(-2deg); border-color: var(--action); box-shadow: 5px 5px 0 #080b1280; }
.hero .button:hover { transform: rotate(0) translateY(-2px); }
.hero .text-link { color: var(--paper); font-size: 12px; }
.hero-bottom { color: #d1d8e9; padding: 22px 48px 30px; }
.hero-latest { color: #d1d8e9; }
.hero-coordinate { display: block; font-size: 9px; letter-spacing: .18em; }
.hero-art-label { top: auto; bottom: 75px; right: 35px; color: #e6e6e7aa; }
.hero-stamp { position: absolute; right: 28px; top: 30px; display: grid; place-items: center; width: 75px; height: 75px; border: 2px solid var(--action); color: var(--action); transform: rotate(8deg); font-family: Display,Impact,sans-serif; font-size: 34px; font-weight: 800; line-height: .8; }
.hero-stamp small { font: 700 8px Inter,sans-serif; letter-spacing: .13em; margin-top: -12px; }
.stream-panel { display: grid; grid-template-columns: 1.15fr 1fr 1.25fr .8fr; padding: 26px 28px; gap: 25px; align-items: center; border: 1px solid var(--line); border-top: 4px solid var(--blue-solid); background: var(--surface); box-shadow: var(--shadow); }
.stream-heading { margin: 0 0 15px; }
.stream-heading .eyebrow { font-size: 8px; color: var(--blue); }
.stream-heading>svg { display: none; }
.channel-avatar { height: 42px; width: 42px; border-radius: 3px; border-color: var(--line); }
.channel-ident h3 { font-family: Display,Impact,sans-serif; font-size: 26px; letter-spacing: -.02em; }
.channel-ident p { font-size: 9px; }
.stream-actions { display: flex; flex-direction: column; gap: 13px; }
.stream-actions .button { margin: 0; font-size: 11px; width: 100%; }
.stream-actions .player-link { margin: 0; padding: 0; font-size: 9px; text-align: center; }
.stream-plan { padding-left: 24px; border-left: 1px solid var(--line); }
.stream-plan .schedule-top { padding: 0; border: 0; }
.stream-plan .schedule-top h4 { font-size: 12px; }
.stream-plan .calendar-card { padding: 12px 0 0; }
.stream-plan .calendar-card h4 { font-size: 12px; margin-bottom: 4px; }
.stream-plan .calendar-card p { font-size: 10px; margin-bottom: 7px; }
.stream-plan .calendar-card .text-link { font-size: 9px; }
.stream-plan .schedule-row { padding: 9px 0; }
.stream-panel .channel-stat { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; margin: 0; padding: 0 0 0 24px; border: 0; border-left: 1px solid var(--line); }
.channel-stat strong { color: var(--blue); font-size: 38px; font-style: italic; }
.channel-stat span { font-size: 9px; }
.live-details { margin: 10px 0 0; font-size: 11px; }
.home-content .stream-panel { display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 0; padding: 24px; }
.home-content .stream-panel .stream-plan { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; }
.home-content .stream-panel .channel-stat { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; flex-direction: row; align-items: center; }
.stream-identity, .stream-actions, .stream-plan { min-width: 0; }
.pillars { margin-top: 32px; padding-bottom: 26px; border-bottom: 2px solid var(--line); }
.pillar>svg { color: var(--blue); transform: rotate(-7deg); }
.pillar strong { font-size: 12px; }
.pillar span { display: block; margin: 3px 0 0; font-size: 10px; }
.pillar+.pillar { border-left-style: dashed; }
.section { margin-top: 64px; }
.home-content { margin-top: 46px; gap: 30px; grid-template-columns: minmax(0,1fr) 330px; }
.section-header { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
h2, .display { font-weight: 750; }
.section-header h2, .home-content h2 { font-size: 37px; text-transform: uppercase; font-style: italic; letter-spacing: -.02em; }
.section-header h2 small { display: block; width: fit-content; font: 600 8px Inter,sans-serif; letter-spacing: .18em; margin: 9px 0 0; padding: 0; border: 0; background: none; color: var(--blue); }
.section-header .text-link { font-size: 10px; }
.post-feature, .post-card, .volley-teaser, .poll, .clip-card, .panel, .game-invite { border-radius: 3px; box-shadow: var(--shadow); }
.post-feature, .post-card, .clip-card { border-top: 3px solid var(--blue-solid); }
.post-content h3, .volley-teaser h3, .poll h3, .clip-card h3 { font-family: Display,Impact,sans-serif; font-weight: 650; letter-spacing: -.01em; font-size: 29px; }
.post-card h3 { font-size: 25px; }
.post-feature .post-image img { object-position: 75% center; }
.post-image:after { pointer-events: none; }
.post-content .text-link, .volley-teaser .text-link { color: var(--accent); }
.post-meta .chip { border: 1px solid var(--line); }
.card-graphic { background: var(--blue-solid); color: var(--paper); background-image: repeating-linear-gradient(-20deg, transparent 0 20px, #10141d18 20px 21px); }
.card-graphic .big-type { font-style: italic; font-size: 78px; }
.card-graphic>svg { opacity: .8; color: var(--action); }
.poll { border-top: 3px solid var(--action); }
.poll h3 { font-size: 26px; }
.poll-option { border-radius: 2px; }
.poll-option.selected { background: var(--accent-soft); }
.filter-tab.active { box-shadow: 2px 3px 0 #080b1229; }
.game-cover { border-radius: 2px; border: 1px solid var(--line); box-shadow: 5px 6px 0 #080b1230; }
.game-card h3 { font-family: Display,Impact,sans-serif; font-size: 25px; font-weight: 650; letter-spacing: -.01em; }
.game-invite { border: 2px dashed var(--blue); background: var(--surface); }
.game-invite h3 { font-style: italic; text-transform: uppercase; }
.game-invite>svg { color: var(--blue); }
.community-invite { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 35px; margin-top: 62px; border-top: 2px solid var(--blue-solid); border-bottom: 1px solid var(--line); padding: 27px 0; }
.community-invite h2 { margin: 10px 0 12px; font-size: 44px; font-style: italic; text-transform: uppercase; }
.community-invite p { font-size: 12px; max-width: 430px; margin-bottom: 18px; }
.community-invite .eyebrow { color: var(--blue); }
.discord-art { display: block; border: 1px solid var(--line); transform: rotate(-2deg); transition: transform .2s; box-shadow: var(--shadow); }
.discord-art:hover { transform: rotate(0); }
.discord-art img { width: 100%; }
.split-section { border-top: 0; gap: 40px; }
.cooperation-card { background: var(--blue-solid); color: var(--paper); border-radius: 2px; padding: 32px; border: 1px solid #6f8ddd; box-shadow: 7px 8px 0 #080b1240; }
.cooperation-card h2 { font-size: 46px; font-style: italic; text-transform: uppercase; max-width: 380px; }
.cooperation-card p { color: var(--paper); opacity: 1; }
.cooperation-card .button { background: var(--action); color: var(--ink); }
.cooperation-card .spark { color: var(--action); opacity: .6; }
.page-head { position: relative; overflow: hidden; padding: 35px 32px 35px; margin: 26px 0 32px; border-left: 5px solid var(--blue-solid); border-bottom: 1px solid var(--line); background: linear-gradient(110deg,var(--surface),var(--surface-2)); isolation: isolate; }
.page-head:after { content: 'U18'; position: absolute; right: 20px; bottom: -35px; font: italic 900 190px Display,Impact,sans-serif; color: var(--blue); opacity: .08; z-index: -1; pointer-events: none; }
.page-head .eyebrow { color: var(--accent); font-size: 9px; }
.page-head h1 { font-size: clamp(48px,5.6vw,78px); line-height: 1.02; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.025em; max-width: 940px; }
.page-head p { max-width: 650px; font-size: 13px; }
.page-head-row>.button { flex-shrink: 0; }
.breadcrumb { font-size: 9px; margin-bottom: 22px; }
.page-toolbar { margin-bottom: 28px; }
.volley-banner { height: 390px; border-radius: 2px; border: 2px solid var(--line); }
.volley-banner h2 { font-style: italic; text-transform: uppercase; font-size: 56px; }
.volley-banner:after { background: linear-gradient(90deg,#0c1422ed,#0c142299 38%,transparent 70%); }
.volley-banner img { object-position: center top; }
.volley-banner p { color: #d2d5df; }
.volley-teaser .eyebrow, .volley-banner .eyebrow { color: var(--action); }
.league-table th { color: var(--blue); font-weight: 650; }
.panel { border-top: 3px solid var(--blue-solid); }
.panel>h2, .panel>h3 { font-family: Display,Impact,sans-serif; text-transform: uppercase; font-size: 30px; letter-spacing: -.01em; }
.day-badge { border-radius: 2px; color: var(--blue); }
.schedule-page-list .schedule-row { padding: 22px 0; }
.schedule-page-list time { color: var(--accent); }
.about-art { min-height: 460px; border-radius: 0; background: #111722; padding: 28px; color: var(--paper); border: 2px solid var(--line); transform: rotate(-2deg); isolation: isolate; }
.about-art-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 86% center; z-index: -2; }
.about-art:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#101722ee,transparent 60%); z-index: -1; }
.about-art .eyebrow { font-size: 8px; }
.about-art .u18 { font-size: 92px; color: var(--action); left: 25px; bottom: 38px; transform: rotate(-4deg); font-style: italic; }
.about-art-caption { position: absolute; bottom: 20px; left: 28px; color: #d2d5df; font-size: 8px; letter-spacing: .08em; }
.about-copy h2 { font-size: 58px; font-style: italic; text-transform: uppercase; }
.contact-copy h2 { font-size: 50px; font-style: italic; text-transform: uppercase; }
.field input:focus, .field select:focus, .field textarea:focus, .search-input:focus { border-color: var(--blue); }
dialog { border-radius: 3px; border: 1px solid var(--line); border-top: 5px solid var(--blue-solid); box-shadow: 10px 12px 0 #080b1260; }
dialog h2 { font-style: italic; }
.admin-tabs button.active { border-color: var(--action); }
.site-footer { border-top: 3px solid var(--blue-solid); margin-top: 75px; }
.footer-wordmark { font-family: Display,Impact,sans-serif; font-style: italic; font-size: 35px; letter-spacing: -.02em; }
.footer-top { padding: 32px 0; }
.little-star { color: var(--blue); }

@media (min-width:1500px) {
  .hero-grid { grid-template-columns: minmax(0,1fr); }
  .hero { min-height: 630px; }
  .hero-copy { padding: 68px 55px 30px; }
  .hero h1 { font-size: 124px; }
}
@media (max-width:1100px) {
  .stream-panel { grid-template-columns: 1fr 1fr 1.25fr; gap: 22px; padding: 24px; }
  .stream-panel .channel-stat { grid-column: 1/-1; flex-direction: row; align-items: center; gap: 16px; border-left: 0; border-top: 1px dashed var(--line); padding: 16px 0 0; }
  .channel-stat strong { font-size: 28px; }
  .channel-stat span { display: flex; gap: 12px; align-items: center; }
  .channel-stat span br { display: none; }
  .hero-copy { padding-left: 38px; }
  .hero { min-height: 550px; }
  .hero h1 { font-size: 96px; }
  .home-content { grid-template-columns: minmax(0,1fr) 290px; }
  .section-header h2, .home-content h2 { font-size: 32px; }
  .hero-stamp { width: 60px; height: 60px; font-size: 28px; }
}
@media (max-width:760px) {
  .site-header { height: 76px; }
  .brand { font-size: 26px; }
  .brand-avatar { height: 40px; width: 40px; }
  nav { top: 75px; }
  nav a.active:after { bottom: 3px; height: 3px; }
  .welcome-line { padding: 21px 0 18px; }
  .welcome-line .eyebrow { font-size: 8px; }
  .hero { min-height: 0; }
  .hero-copy { padding: 325px 28px 25px; max-width: 540px; }
  .hero-image { height: 350px; object-position: right top; }
  .hero:before { background: linear-gradient(0deg,#101722 0%,#101722 calc(100% - 335px),#10172200 calc(100% - 220px)); }
  .hero h1 { font-size: 85px; margin: 27px 0 34px; }
  .hero p { max-width: 320px; font-size: 13px; }
  .hero-buttons { flex-wrap: wrap; gap: 18px; }
  .hero-bottom { padding: 20px 28px 28px; }
  .hero-stamp { top: 25px; right: 22px; height: 48px; width: 48px; font-size: 23px; }
  .hero-stamp small { font-size: 6px; margin-top: -7px; }
  .hero-art-label { right: 20px; bottom: 72px; font-size: 6px; }
  .hero-coordinate { display: none; }
  .stream-panel { grid-template-columns: 1fr 1fr; padding: 23px; gap: 24px 20px; }
  .stream-heading { grid-column: auto; }
  .stream-plan { grid-column: 1/-1; border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; }
  .stream-plan .calendar-card p { max-width: 100%; font-size: 11px; }
  .stream-plan .calendar-card .text-link { font-size: 10px; }
  .stream-plan .schedule-top { grid-column: auto; }
  .stream-plan .mini-schedule { display: block; }
  .stream-plan .mini-schedule .schedule-row { display: grid; grid-template-columns: 32px 1fr auto; }
  .stream-plan .mini-schedule .schedule-row>div:nth-child(2) { order: initial; }
  .stream-panel .channel-ident { margin: 0; }
  .stream-panel .channel-stat { padding-top: 15px; }
  .channel-stat span { display: block; }
  .channel-stat span br { display: inline; }
  .pillars { gap: 12px; margin-top: 27px; padding-bottom: 24px; }
  .pillar { display: block; }
  .pillar>svg { margin-bottom: 8px; width: 22px; height: 22px; }
  .pillar strong { font-size: 10px; display: block; }
  .pillar span { display: none; }
  .home-content { display: flex; flex-direction: column; margin-top: 34px; gap: 34px; }
  .home-aside { gap: 18px; }
  .home-aside>.section-header { margin-bottom: 0; }
  .section-header h2, .home-content h2 { font-size: 32px; }
  .section-header h2 small { display: block; font-size: 7px; }
  .section-header .text-link { font-size: 9px; }
  .post-content h3 { font-size: 27px; }
  .post-card h3 { font-size: 24px; }
  .post-card .big-type { font-size: 66px; }
  .poll h3 { font-size: 26px; }
  .game-card h3 { font-size: 22px; }
  .section { margin-top: 45px; }
  .community-invite { grid-template-columns: 1fr; gap: 25px; margin-top: 45px; padding: 25px 0 32px; }
  .community-invite h2 { font-size: 38px; }
  .discord-art { max-width: 600px; }
  .split-section { gap: 35px; }
  .cooperation-card { padding: 28px; }
  .cooperation-card h2 { font-size: 42px; }
  .page-head { padding: 25px 22px 28px; margin: 22px 0 26px; }
  .page-head h1 { font-size: 52px; }
  .page-head p { font-size: 12px; }
  .page-head:after { font-size: 150px; right: 8px; }
  .breadcrumb { margin-bottom: 22px; }
  .volley-banner { height: 380px; }
  .volley-banner h2 { font-size: 47px; }
  .about-art { min-height: 430px; max-width: 500px; }
  .about-copy h2 { font-size: 48px; }
  .contact-copy h2 { font-size: 43px; }
  .site-footer { margin-top: 52px; }
}
@media (max-width:440px) {
  .hero { min-height: 0; }
  .hero-image { height: 290px; object-position: right top; opacity: 1; }
  .hero:before { background: linear-gradient(0deg,#101722 0%,#101722 calc(100% - 275px),#10172200 calc(100% - 195px)); }
  .hero-copy { padding: 280px 24px 22px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .14em; max-width: 210px; }
  .hero h1 { font-size: 72px; margin-top: 23px; }
  .hero p { font-size: 12px; max-width: 255px; }
  .hero-buttons { flex-direction: row; align-items: center; gap: 17px; margin-top: 26px; }
  .hero .button { padding: 15px 14px; font-size: 10px; }
  .hero .text-link { font-size: 10px; }
  .hero-stamp { top: 28px; right: 19px; height: 38px; width: 38px; font-size: 19px; border-width: 1px; }
  .hero-stamp small { font-size: 5px; }
  .hero-bottom { padding: 20px 24px 30px; }
  .hero-latest { font-size: 9px; line-height: 1.5; }
  .stream-panel { grid-template-columns: 1fr; padding: 23px; gap: 22px; }
  .stream-panel .stream-plan, .stream-panel .channel-stat { grid-column: 1; }
  .stream-actions .player-link { font-size: 10px; }
  .channel-ident h3 { font-size: 29px; }
  .channel-ident p { font-size: 10px; }
  .stream-panel .channel-stat { flex-direction: row; }
  .post-card h3 { font-size: 21px; }
  .game-card h3 { font-size: 21px; }
  .game-invite h3 { font-size: 35px; }
  .page-head h1 { font-size: 44px; overflow-wrap: anywhere; }
  .page-head .eyebrow { font-size: 8px; }
  .page-head .breadcrumb { font-size: 8px; }
  .volley-banner h2 { font-size: 44px; }
  .about-art { min-height: 390px; }
  .clip-card h3 { font-size: 28px; }
  .footer-bottom { line-height: 1.8; }
}