/* Judges' page: the dashboard's light tokens and type scale; plain CSS for older Edge, Chrome and Whale */
:root{
  color-scheme:light;
  --bg:#F7F7F7; --card:#FFFFFF; --border:rgba(0,0,0,.10); --divider:#F0F0F0;
  --fg:#1C1C1C; --fg2:#3D3D3D; --muted:#6B6B6B; --chip:#F0F0F0;
  --accent:#03C75A; --accent-bg:#04873F; --accent-fg:#FFFFFF; --accent-ink:#007A3D; --link:#0147B5;
  --shadow:0 1px 2px rgba(0,0,0,.06);
}
*{box-sizing:border-box;}
html{background:#F7F7F7; background:var(--bg);}
body{margin:0; background:#F7F7F7; background:var(--bg); color:#1C1C1C; color:var(--fg);
  font-family:Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  font-size:18px; line-height:28px; letter-spacing:-0.3px; word-break:keep-all; overflow-wrap:break-word;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
h1{font-size:30px; line-height:40px; font-weight:800; letter-spacing:-0.6px; margin:0 0 10px;}
h2{font-size:24px; line-height:32px; font-weight:800; letter-spacing:-0.5px; margin:0 0 16px;}
h3{font-size:19px; line-height:27px; font-weight:700; margin:0 0 10px;}
h4{font-size:18px; line-height:26px; font-weight:700; margin:0 0 6px;}
p{margin:0 0 12px;}
a{color:#0147B5; color:var(--link);}
ul{margin:0 0 12px; padding-left:22px;}
li{margin:0 0 6px;}
img,video{display:block; max-width:100%; height:auto;}
video{width:100%; background:#1C1C1C;}

.hero{background:#FFFFFF; background:var(--card); border-bottom:1px solid rgba(0,0,0,.10); padding:32px 0 28px;}
.kicker{font-size:15px; line-height:20px; font-weight:600; color:#007A3D; color:var(--accent-ink); margin:0 0 8px;}
.lead{font-size:20px; line-height:30px; font-weight:700; color:#007A3D; color:var(--accent-ink); margin:0 0 8px;}
.place{color:#3D3D3D; color:var(--fg2); max-width:860px;}
.player{margin-top:18px; border-radius:8px; overflow:hidden; border:1px solid rgba(0,0,0,.10);}

.toc{position:-webkit-sticky; position:sticky; top:0; z-index:5; background:#FFFFFF; border-bottom:1px solid rgba(0,0,0,.10);}
.toc .wrap{display:-webkit-box; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.toc a{display:inline-block; padding:12px 14px 12px 0; margin-right:14px; font-size:17px; line-height:24px; font-weight:600;
  color:#3D3D3D; text-decoration:none;}
.toc a:hover, .toc a:focus{color:#007A3D; text-decoration:underline;}

.sec{padding:36px 0 24px;}
.sec.alt{background:#FFFFFF; border-top:1px solid rgba(0,0,0,.10); border-bottom:1px solid rgba(0,0,0,.10);}
.card{background:#FFFFFF; border:1px solid rgba(0,0,0,.10); border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.06); padding:16px 18px;}
.sec.alt .card{background:#F7F7F7;}
.chip{display:inline-block; font-size:15px; line-height:20px; font-weight:600; padding:4px 10px; border-radius:4px;
  background:#F0F0F0; color:#3D3D3D; margin:4px 0 14px;}

/* grid with a flex fallback */
.grid{display:-webkit-box; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0 -8px;}
.grid > *{margin:0 8px 16px; -webkit-box-flex:1; flex:1 1 300px;}
@supports (display:grid){
  .grid{display:grid; grid-gap:16px; gap:16px; margin:0 0 16px;}
  .grid > *{margin:0;}
  .grid.two{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .grid.three{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
.scene video{border-radius:6px; margin:0 0 10px; cursor:pointer;}
.scene p{color:#3D3D3D; margin:0;}
.tile .num{font-size:30px; line-height:38px; font-weight:800; color:#007A3D; margin:0 0 6px; letter-spacing:-0.5px;}
.tile p{font-size:17px; line-height:26px;}
.tile .src{font-size:14px; line-height:20px; color:#6B6B6B; margin:8px 0 0;}
.intro{max-width:860px;}
.stage{margin:0 0 18px;}
.stage img{border-radius:6px; border:1px solid #F0F0F0; width:100%;}
.stage figcaption{font-size:17px; line-height:26px; color:#3D3D3D; margin-top:10px;}
.sub{margin-top:26px;}
.who ul{list-style:none; padding:0; margin:0;}
.who li{padding:8px 0; border-top:1px solid #F0F0F0; font-size:17px; line-height:26px;}
.who li b{display:block; font-weight:700; color:#1C1C1C;}
.lead2{color:#3D3D3D; font-size:17px; line-height:26px;}
.links a{margin-right:14px; font-weight:600;}
.econ li{color:#3D3D3D;}
.doc{margin-top:18px;}
.btn{display:inline-block; padding:10px 18px; border-radius:6px; background:#04873F; background:var(--accent-bg); color:#FFFFFF;
  font-weight:700; text-decoration:none; font-size:18px; line-height:24px;}
.btn:hover, .btn:focus{background:#036D33; color:#FFFFFF;}
.meta{color:#6B6B6B; font-size:16px; margin-left:8px;}
.dl{list-style:none; margin:0; padding:0;}
.dl li{padding:10px 0; border-top:1px solid #F0F0F0;}
.dl li:first-child{border-top:0;}
.dl a{font-weight:600;}
.dl .meta{font-size:15px;}
.credits{margin-top:18px; padding-top:14px; border-top:1px solid rgba(0,0,0,.10);}
.credits h3{font-size:15px; line-height:22px; margin:0 0 6px; color:#3D3D3D;}
.credits ul{list-style:none; margin:0; padding:0; font-size:14px; line-height:21px;}
.credits li{margin:0 0 3px; overflow-wrap:anywhere;}
.foot{padding:28px 0 40px; color:#6B6B6B; font-size:16px; line-height:24px;}
.foot p{margin:0 0 4px;}
.foot .lead{font-size:18px; line-height:26px;}
a:focus-visible, video:focus-visible{outline:3px solid #0147B5; outline-offset:2px;}

@media (max-width:860px){
  @supports (display:grid){ .grid.three{grid-template-columns:repeat(2, minmax(0, 1fr));} }
}
@media (max-width:640px){
  .wrap{padding:0 16px;}
  h1{font-size:24px; line-height:33px;}
  h2{font-size:21px; line-height:29px;}
  .lead{font-size:18px; line-height:27px;}
  @supports (display:grid){ .grid.two, .grid.three{grid-template-columns:minmax(0, 1fr);} }
  .grid > *{-webkit-flex-basis:100%; flex-basis:100%;}
}
@media (prefers-reduced-motion:reduce){ .scene video{cursor:default;} }
