@charset "utf-8";
/* reset */
html, body, div, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, sup, sub, address, cite, img, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, select, input, textarea, button, a{margin:0; padding:0; border:0; box-sizing:border-box; font-size:12px; font-family:var(--font-default);}
html, body{width:100%; height:100%;}
ol, ul{list-style:none;}
b, em, span{box-sizing:border-box;}
table{border-collapse:collapse;}
a img{border:0;}
input{outline:0;}
*::before,
*::after{margin:0; padding:0; border:0; box-sizing:border-box; font-family:var(--font-default); line-height:inherit;}
/* basic-alink */
a:link{color:var(--blue-normal);text-decoration:none;}
a:visited{color:var(--blue-normal);text-decoration:none;}
a:active{color:#555;text-decoration:none;}
a:hover{text-decoration:none;}

:root{

   /* var color */
   --pastel-orange:#ffb93f; --laser-lemon:#f8ff67; --bluish-green:#05a971; --orange-peel:#f59f00; --supernova:#ffc600; --fun-blue:#0452a8; --bluish-purple:#5a3ba2; --cinder:#13171C; --black-pearl:#070f23;
   --bgcolor-bluish-green:linear-gradient(to bottom, #16e089, #05a971);
   --bgcolor-orange-peel:linear-gradient(to bottom, #ffd20e, #f59f00);
   --bgcolor-fun-blue:linear-gradient(to bottom, #1771c6, #0452a8);
   --bgcolor-bluish-purple:linear-gradient(to bottom, #7449b9, #5a3ba2);
   --bgcolor-transline:linear-gradient(to bottom, rgb(255 255 255 / 0%), rgb(255 255 255 / 25%), rgb(255 255 255 / 0%));
   --bgcolor-transparent-w:linear-gradient(to bottom, rgb(255 255 255 / 8%), rgb(255 255 255 / 5%));
   --bgcolor-transparent-b:linear-gradient(to bottom, rgb(0 0 0 / 20%), rgb(0 0 0 / 60%));
   --bgcolor-gray:linear-gradient(to bottom, #555, #444);
   --bgcolor-bluejay:linear-gradient(to bottom, #617e97, #4b6282, #3c5371);
   --bgcolor-darkblue:linear-gradient(to bottom, #24313d, #1b2630);

}

/* form basic */
select, input[type=number], input[type=text], input[type=password]{margin:0; padding:8px; width:100%; line-height:1.1; border:1px solid rgb(255 255 255 / 20%); color:rgb(255 255 255 / 80%); background-color:transparent; font-size:15px; vertical-align:middle; overflow:hidden; outline:0;}
select:focus, input[type=tel]:focus, input[type=text]:focus, input[type=password]:focus{border-color:#fff;}
input::-ms-clear,
input::-ms-reveal,
select::-ms-expand{display:none;}
select{position:relative; padding-right:20px !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%23ffffff'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: center right; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;}
option{background-color:#fff; color:#000;}

label{cursor:pointer;}
.hide{display:none !important;}

/* placeholder */
::-webkit-input-placeholder{color:#999; font-size:inherit; font-style:italic;}
::placeholder{color:#999; font-size:inherit; font-style:italic;}

/* scroll style */
::-webkit-scrollbar-track{background-color:transparent;}
::-webkit-scrollbar{width:5px; height:5px; background-color:transparent;}
::-webkit-scrollbar-thumb{background-color:rgb(255 255 255 / 20%);}


/*######################
Google Material Symbols
########################*/
.material-symbols-rounded{display:flex; justify-content:center; align-items:center; width:24px; min-width:24px; height:24px; min-height:24px; font-variation-settings:var(--symbols-basic); overflow:hidden;}


/*#######################################
jQuery UI Datepicker : customize for LOD
#########################################*/
.ui-datepicker .match-date>a::after{top:-6px;}
.ui-datepicker .match-date:hover>a::after{top:-10px; opacity:1;}
.ui-datepicker .match-date::after{content:''; position:absolute; left:50%; bottom:7px; margin-left:-2px; width:4px; height:4px; border-radius:50%;}
.ui-datepicker-calendar .match-date::after{background-color:var(--lavender-normal);}
/* match admin */
#create-match .ui-datepicker{background-color:rgb(0 0 0 / 40%); border:0; box-shadow:none; color:#fff;}
#create-match :is(.ui-datepicker-prev, .ui-datepicker-next) .ui-icon{border-color:rgb(255 255 255 / 50%);}
#create-match .ui-datepicker-calendar td:not(.ui-datepicker-week-end)>:is(a, span){color:rgb(255 255 255 / 50%);}


/*###############
Select2
#################*/
.form-item{position:relative;}
.form-item~.form-item{margin-left:-1px;}
.select2-container ::-webkit-scrollbar-thumb{background-color:rgb(0 0 0 / 20%);}
.select2-container :is(.select2-selection--single, .select2-selection--multiple) .select2-selection__arrow{bottom:1px; height:auto;}
.select2-container .select2-selection--multiple .select2-selection__choice{margin:2px 3px 1px 0; padding:3px 10px 4px 6px; border:0; background-color:var(--lavender-normal); color:rgb(255 255 255 / 80%); font-size:13px;}
.select2-container .select2-selection--multiple .select2-selection__choice__remove{width:14px; line-height:1; color:#fff; font-family:inherit !important; font-size:14px !important; font-weight:normal; text-align:center;}
.select2-dropdown{border:0; border-radius:0; box-shadow:0 0 8px rgb(0 0 0 / 20%);}
.select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--lavender-light); color:#fff;}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:var(--supernova);}
.select2-search, .select2-results__option{font-size: 13px;}
.select2-container .select2-selection--multiple .select2-selection__choice+.select2-search--inline{width:0; height:0; overflow:hidden;}


/*####################
Tooltips Customize
######################*/
#tooltips-container.emblem .tooltips-component{width:0;}
#tooltips-container.emblem .tooltips-component>p{white-space:nowrap;}

/*###############
Layout
#################*/
body{display:flex; flex-direction:column; align-items:center; background-color:#000; background-size:contain; background-repeat:no-repeat; background-position:top center;}
body::before{content:''; position:absolute; z-index:1; top:0; left:0; width:100%; aspect-ratio:1920 / 1080; background-image:url(../../img/lod/hero-top-image.jpg); background-size:contain; background-repeat:no-repeat; background-position:top center;}
#wrap{display:flex; flex-direction:column; gap:24px; position:relative; z-index:10; max-width:1920px; width:100%; height:100%;}
#header{display:flex; flex-direction:column;}
#container{display:flex; flex-direction:column; align-items:center;}

/* user setting */
.user-setting{flex-shrink:0; display:none; align-items:center; position:relative; z-index:10; padding:0 32px 0 8px; height:40px; border-radius:8px; background-color:#fff; box-shadow:0 0 8px rgb(0 0 0 / 5%); cursor:pointer;}
.user-setting>.user-thumb{margin:0; width:32px; height:32px; border-radius:50%; overflow:hidden;}
.user-setting>.user-thumb>img{width:100%; height:100%;}
.user-setting>span{margin-left:8px; font-family:'NanumSquareRound'; font-size:13px;}
.user-setting::after{content:''; position:absolute; top:50%; right:10px; margin-top:-10px; width:8px; height:8px; border-left:2px solid rgb(0 0 0 / 20%); border-bottom:2px solid rgb(0 0 0 / 20%); transform:rotate(-45deg); transform-origin:right bottom;}
.user-setting.selected::after{border-color:var(--bluejeans-normal);}

/* button wrapper */
.btn-area{display:flex; align-items:center; gap:8px;}


/*###############
Hero Stage
#################*/
.hero-stage{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2vw; position:relative; padding:7.1vw 24px 15vw 24px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s;}
.hero-stage>h3{width:33.34vw; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s;}
.hero-stage>h3>img{display:block; width:100%;}


/*###################
Header : Navigation
#####################*/
.nav{display:flex; justify-content:center; position:fixed; top:0; left:0; right:0;}
.nav-logo{display:flex; align-items:flex-start; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s;}
.nav-logo>h3{display:flex; width:0; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s;}
.nav-logo>h3>img{width:100%;}
.nav-wrapper{display:flex; justify-content:center; align-items:center; gap:24px; padding:0 16px; max-width:1240px; width:100%; height:100%; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s;}
.nav-item{padding:0 32px;}
.nav-item>a{display:flex; justify-content:center; align-items:center; height:80px; color:#fff; font-family:var(--font-poppins); font-size:24px; font-weight:400; white-space:nowrap; text-shadow:0 0 4px rgb(0 0 0 / 50%);}
.nav-item.selected>a{color:var(--pastel-orange); font-weight:500;}
.nav>button.action-set-match{position:absolute; top:8px; right:8px;}


/*###################
Sticky Layout
#####################*/
body.sticky{background-image:url(../../img/lod/hero-top-image.jpg); background-position:center -14vw; background-attachment:fixed;}
body.sticky::before{content:none;}
body.sticky::after{content:''; position:fixed; z-index:2; top:0; left:0; width:100%; height:100%; background-color:rgb(0 0 0 / 50%);}
body.sticky .nav{z-index:11; background-color:rgb(0 0 0 / 80%);}
body.sticky .nav-logo{flex-grow:1;}
body.sticky .nav-logo>h3{width:160px;}
body.sticky .hero-stage{padding:6vw; opacity:0;}
body.sticky .header-title{flex-direction:column; gap:8px; position:relative; z-index:10;}
body.sticky .header-title>h3{order:1; padding-left:0; border-left:0;}
body.sticky .header-title>.today-date{order:2;}


/*###############
Contents Page
#################*/
.contents-page{display:flex; flex-direction:column; padding:0 40px; max-width:1240px; width:100%;}
/* detail contents */
.detail-page{flex-grow:1; display:flex; flex-direction:column; position:relative; padding-bottom:40px; width:100%; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;}
.detail-page-wrapper{display:flex; flex-direction:column; gap:24px; position:relative; width:100%; height:100%;}
.detail-page-header{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px;}
.detail-page-component{flex-grow:1; display:flex; flex-direction:column; align-items:center; gap:40px; position:relative; overflow:auto;}
/* detail contents : header component */
.header-title{display:flex; justify-content:center; align-items:center; gap:16px; width:100%; color:#fff;}
.header-title>.today-date{display:flex; align-items:center; gap:8px; position:relative; color:var(--laser-lemon); font-family:var(--font-poppins); font-size:16.5px;}
.header-title>.today-date::before{content:''; display:block; position:absolute; right:4px; margin:0 0 2px 2px; width:10px; height:10px; border-left:2px solid var(--laser-lemon); border-bottom:2px solid var(--laser-lemon); transform:rotate(-45deg);}
.header-title>.today-date>i.material-symbols-rounded{position:absolute;}
.header-title>.today-date>input{position:relative; padding:0 16px 0 1.75em; min-height:32px; border-color:transparent; color:inherit; font-family:inherit; font-size:inherit; cursor:pointer;}
.header-title :is(h2, h3, h4){font-family:var(--font-poppins); font-weight:500; white-space:nowrap;}
.header-title h2{font-size:26px;}
.header-title h3{font-size:20px;}
.header-title>.today-date+h3{padding-left:24px; border-left:1px solid rgb(255 255 255 / 50%);}

/* detail contents : section */
.section{display:flex; flex-direction:column; gap:56px; width:100%;}
.section:empty::before{content:attr(data-empty); display:flex; justify-content:center; padding-top:40px; color:var(--sunflower-light); font-family:var(--font-nanumsquare); font-size:24px;}
.section-header{display:flex; align-items:center; gap:16px; font-family:var(--font-poppins);}
.section-header>h4{color:#333; font-size:20px; font-weight:500; white-space:nowrap; text-indent:4px;}
.section-header>span{padding-left:16px; border-left:1px solid #ccc; color:#777; font-size:13px;}
.section-items{display:flex; flex-direction:column; gap:24px;}



/*###############
Contents Module
#################*/
/* category filter */
.category-filter{display:flex; gap:8px;}
.category-filter-item{position:relative; min-width:104px;}
.category-filter-item::before{content:attr(data-title); position:absolute; left:14px; top:12px; line-height:1; color:rgb(255 255 255 / 64%); font-size:10px; font-weight:300;}
.category-filter-item>select{padding:28px 24px 12px 14px !important; background-position:bottom 8px right 6px;}
/* category tag */
.category-tag{display:flex; flex-wrap:wrap; gap:8px; color:#fff;}
.category-tag-item{flex-grow:0; padding:8px 12px; border-radius:24px; border:1px solid rgb(255 255 255 / 25%); background-color:rgb(0 0 0 / 50%); font-family:var(--font-nanumsquareR); font-size:15px; letter-spacing:-0.5px; cursor:pointer;}
.category-tag-item.selected{border-color:var(--pastel-orange); background-color:var(--pastel-orange);}
/* sort tag */
.sort-tag{display:flex; flex-wrap:wrap; gap:8px; color:#fff;}
.sort-tag-item{flex-grow:0; padding:8px 12px; border:1px solid rgb(255 255 255 / 25%); background-color:rgb(0 0 0 / 50%); font-family:var(--font-nanumsquareR); font-size:15px; letter-spacing:-0.5px; cursor:pointer;}
.sort-tag-item.selected{border-color:var(--lavender-normal); background-color:var(--lavender-normal);}


/*###############
Match Board
#################*/
.match-board{display:flex; flex-direction:column; position:relative;}
.match-board-header{display:flex; flex-direction:column; position:relative; padding-bottom:4px; overflow:hidden;}
.match-board-header::before{content:''; position:absolute; z-index:2; left:-58px; top:0; bottom:0; width:92px; background:var(--bgcolor-orange-peel); transform:skew(32deg);}
.match-board-header::after{content:''; position:absolute; z-index:4; left:0; right:0; bottom:0; height:5px; background-color:var(--orange-peel);}
:is(.match-board-header, .match-board-body) :is(strong, b, em, span){position:relative; line-height:1.2; font-family:var(--font-nanumsquare); font-size:16.5px; font-weight:500; font-style:normal;}
.match-board-body{position:relative; overflow:hidden;}
.match-board-body :is(strong, b, em, span){color:#555;}
.match-board-footer{display:flex; justify-content:center; gap:8px; padding:8px; border-radius:0 0 8px 8px; background-color:rgb(255 255 255 / 32%);}
/* match board : header component */
.match-status{display:flex; align-items:center; gap:24px; position:relative; z-index:1; padding:0 64px 0 40px; min-height:43px;}
.match-status::before{content:''; position:absolute; left:0; right:50px; top:0; bottom:0; border-top:1px solid rgb(255 255 255 / 10%); background:var(--bgcolor-transparent-w); transform:skew(32deg);}
.match-status>:is(b, span){color:rgb(255 255 255 / 100%); font-size:19px;}
.match-status>b>span{font-size:inherit;}
.match-status>.function{flex-grow:1; display:flex; justify-content:flex-end; align-items:center; gap:8px;}
.match-title{display:flex; gap:16px; position:relative; padding:12px 40px 0 56px;}
.match-title::before{content:''; position:absolute; left:0; right:18px; top:0; bottom:0; border-top:1px solid rgb(255 255 255 / 40%); background:var(--bgcolor-gray); box-shadow:0 5px 5px rgb(255 255 255 / 10%) inset; transform:skew(32deg);}
.match-title::after{content:''; position:absolute; z-index:3; left:36px; top:12px; bottom:0; width:20px; background:var(--bgcolor-orange-peel); box-shadow:-5px 5px 5px rgb(0 0 0 / 10%); transform:skew(32deg);}
.match-title>:is(strong, b, em, span){display:flex; align-items:center; margin-bottom:8px; padding-left:16px; height:40px; color:#fff; white-space:nowrap;}
.match-title>:is(b, em, span)::before{content:''; position:absolute; left:0; top:0; bottom:6px; width:1px; background:var(--bgcolor-transline);}
.match-title>span{flex-grow:1; white-space:normal;}
/* match board : header tabmenu */
.match-tabmenu{flex-shrink:0; display:flex; justify-content:flex-end; gap:8px; position:relative;}
.match-tabmenu>li{display:flex; align-items:center; position:relative; padding:0 40px; color:#fff; font-family:var(--font-nanumsquare); font-size:18px; cursor:pointer;}
.match-tabmenu>li.selected::before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; background:var(--bgcolor-orange-peel); transform:skew(32deg);}
.match-tabmenu>li>span{text-shadow:-1px -1px 0 rgb(0 0 0 / 20%);}
/* match board : info */
.match-info{display:flex; flex-wrap:wrap; justify-content:center; position:absolute; z-index:2; left:0; right:0; top:0; bottom:0; padding:16px 24px; padding-top:24px !important; background-color:#fff;}
.match-board[data-match-count="2"] .match-info{grid-template-columns:0.7fr 1fr;}
.match-league{display:flex; align-items:center; position:absolute; top:0; width:100%;}
.match-league-info{display:flex; padding-bottom:2px; border-radius:0 0 4px 0; background-color:var(--orange-peel);}
.end .match-league-info{background-color:var(--bluish-green);}
:is(.match-club, .match-team){display:flex; align-items:center; gap:8px; position:relative; padding:0 10px;}
:is(.match-club, .match-team)>:is(b, em){color:#fff; font-family:var(--font-nanumsquareR); font-size:13px !important;}
:is(.match-club, .match-team)>b{font-weight:600;}
.match-team::before{content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--bgcolor-transline);}
.match-class{display:flex; justify-content:center; align-items:center;}
.match-class:first-of-type .match-vs{display:none;}
.match-class-name{flex-grow:1; display:flex; flex-direction:column; align-items:center; gap:4px; width:160px;}
.match-class-name b{flex-shrink:0; font-size:24px;}
.match-class-name em{flex-shrink:0; display:flex; width:96px;}
.match-class-name em>img{width:100%;}
.match-class-name span{flex-grow:1; font-size:18px; text-align:center; white-space:pre-wrap;}
:is(.match-info, .match-class){gap:8px;}
[data-match-num="2"] :is(.match-info, .match-class){column-gap:120px;}
[data-match-num="3"] :is(.match-info, .match-class){column-gap:80px;}
[data-match-num="4"] :is(.match-info, .match-class){column-gap:40px;}
.match-vs{position:relative;}
.match-vs>sup{position:absolute; top:0; left:20%; right:0; height:16px; overflow:hidden;}
.match-vs>sub{position:absolute; bottom:-16px; left:0; right:20%; height:16px; overflow:hidden;}
.match-vs>:is(sup, sub)::before{content:''; position:absolute; left:8px; right:8px; top:-8px; height:8px; box-shadow:0 -8px 16px rgb(0 0 0 / 70%);}
.match-vs>em{display:flex; justify-content:center; align-items:center; position:relative; margin-bottom:16px; width:48px; height:48px;}
.match-vs>em::after{content:'VS'; position:relative; color:var(--supernova); font-family:var(--font-nanumsquareN); font-size:32px; font-weight:700; font-style:normal;}
/* match board : score */
.match-score{display:flex; flex-direction:column; position:relative; z-index:1; padding-bottom:32px; min-height:224px; background:var(--cinder);}
.match-score::after{content:''; position:absolute; left:0; right:0; bottom:-20px; height:20px; box-shadow:0 0 16px rgb(255 255 255 / 10%);}
.match-board-body.view-score .match-info{display:none;}
:is(.match-score-head, .match-score-row){display:grid; grid-template-columns:1fr 1.5fr; position:relative; padding:0 24px; min-height:40px;}
[data-match-type="total"] :is(.match-score-head, .match-score-row){grid-template-columns:1fr;}
.match-score-head{background:var(--bgcolor-bluejay);}
.match-score-row:nth-child(odd)::before{content:''; position:absolute; left:-32px; right:0; top:0; bottom:0; background:var(--bgcolor-darkblue);}
.match-score-class{display:grid; grid-template-columns:0.75fr 1fr 0.5fr; justify-items:center; align-items:center; position:relative;}
[data-match-type="total"] .match-score-class{grid-template-columns:1fr 1fr 1.5fr;}
.match-score-class>:is(b, span, em){display:-webkit-box; line-clamp:1; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; word-break:break-all; line-height:1.1; color:#fff; font-family:var(--font-nanumsquare); font-size:17px; font-weight:400; text-align:center;}
.match-score-head .match-score-class>:is(b, span),
.match-score-head .match-score-round>li{color:rgb(255 255 255 / 50%);}
.match-score-class>em{color:var(--orange-peel); font-style:normal;}
.match-score-round{display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; justify-items:center; align-items:center; position:relative;}
.match-score-round>li{justify-self:stretch; display:flex; justify-content:center; align-items:center; color:#fff; font-family:var(--font-nanumsquare); font-size:18px;}
:is(.match-score-class>em, .match-score-round>li):empty::before{content:'-';}
/* match board : status color */
.end .match-board-header::after{background-color:var(--bluish-green);}
.end .match-board-header::before,
.end .match-title::after,
.end .match-tabmenu>li.selected::before{background:var(--bgcolor-bluish-green);}
.end .match-status>:is(b, span){color:#999;}
.end .match-vs>em::after{color:var(--mediumgray-light);}
.ongoing .match-title::before{background:var(--bgcolor-fun-blue);}
.ongoing .match-status>span{color:var(--orange-peel);}
.upcoming .match-title::before{background:var(--bgcolor-bluish-purple);}
/* match board : in modal layer */
.modal-layer::before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; background-image:url(../../img/lod/hero-top-image.jpg); background-size:cover; background-repeat:no-repeat; background-position:center; opacity:0.5;}
.modal-layer .match-board{margin:0 24px; max-width:1160px; width:calc(100% - 48px);}
.modal-layer .match-board select{padding:4px 8px; min-height:36px; border-radius:0; color:inherit; font-size:inherit; text-align:center;}
.modal-layer .match-info{position:relative;}
.modal-layer .match-info::before{border-bottom:0;}
.modal-layer .match-score-round{gap:4px; padding:2px 0;}
/* match board : in modal layer (view mode) */
select.no-access{border-color:transparent; appearance:none; pointer-events:none;}


/*###############
Scoring Board
#################*/
#scoring-board .modalwrap-header h1{flex-basis:0; flex-grow:1;}
#scoring-board .modalwrap-header .mode{opacity:0.85;}
#scoring-board .modalwrap-header .function{flex-basis:0;}
#scoring-board label.mode>span{min-width:72px; border-color:var(--mint-normal); color:var(--mint-normal); font-family:var(--font-poppins);}
#scoring-board label.mode>input[type=radio]:checked+span{border-color:var(--mint-normal); background-color:var(--mint-normal); color:#fff;}
#scoring-board .modalwrap-container{justify-content:center; align-items:center;}


/*###############
Create Match
#################*/
#create-match.modal-layer::before{background-color:var(--black-pearl); background-image:url(../../img/lod/poster-image.jpg); opacity:0.4;}
#create-match .modalwrap-container{flex-direction:row; gap:24px; align-items:flex-start;}
#create-match #match-calendar{flex-basis:0; flex-grow:1; display:flex; justify-content:flex-end; padding-top:72px;}
#create-match .match-list{flex-basis:0; flex-grow:3; display:flex; flex-direction:column; gap:24px; height:100%;}
#create-match .match-list-header{flex-shrink:0; display:grid; grid-template-columns:1fr auto auto; gap:4px 8px; margin:0 24px; max-width:calc(880px - 48px);}
#create-match .match-list-header .group-item-course{grid-row:1 / 2; grid-column:1 / 3; display:flex;}
#create-match .match-list-header .group-item-story{grid-row:2 / 3; grid-column:1 / 2; display:flex;}
#create-match .match-list-header .group-item-time{grid-row:2 / 3; grid-column:2 / 3; display:flex;}
#create-match .match-list-header [class*="group-item"]>.form-item{flex-grow:1;}
#create-match .match-list-header button{grid-row:2 / 3; grid-column:3 / 4;}
#create-match .match-list-header select{width:auto; background-color:rgb(0 0 0 / 30%);}
#create-match .match-list-header select#lod-story{width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
#create-match .match-list-body{flex-grow:1; display:flex; flex-direction:column; position:relative; overflow:auto;}
#create-match .match-list-body>.section{gap:40px;}
#create-match .match-list-body>.section>.match-board{max-width:832px;}
#create-match .match-list-footer{flex-shrink:0; display:flex; justify-content:center; margin:0 24px; padding-bottom:24px; max-width:calc(880px - 48px);}
#create-match .match-info{padding-top:40px !important;}
#create-match :is(.match-info, .match-class){gap:16px 0;}
#create-match .match-vs>em::after{font-size:17px;}
#create-match .match-class-name{align-self:flex-start; align-items:normal; gap:4px;}
#create-match .match-board.new::after{content:'Creating'; position:absolute; z-index:5; top:12px; right:64px; padding:2px 4px; border-radius:2px; background-color:var(--bittersweet-light); color:#fff; font-size:10px;}
#create-match .action-remove{position:absolute; z-index:10; top:0; right:0; color:var(--bittersweet-light); font-size:32px; opacity:0.3; cursor:pointer;}
#create-match .action-remove:hover{opacity:1;}
#create-match .action-more-menu{position:absolute; z-index:10; top:0; right:0; width:32px; height:32px; border-radius:4px; color:#fff; font-size:32px; cursor:pointer;}
#create-match .action-more-menu:hover{background-color:rgb(255 255 255 / 10%);}
#create-match .action-more-menu.selected{background-color:rgb(255 255 255 / 20%);}
#create-match :is(.new, .update) .action-more-menu{display:none;}
/* create match : select2 */
#create-match .match-list-header .select2{min-width:64px;}
#create-match .match-list-header :is(.select2-selection--single, .select2-selection--multiple){display:flex; padding:4px; height:auto; border:1px solid rgb(255 255 255 /20%); border-radius:0; background-color:rgb(0 0 0 / 30%);}
#create-match .match-list-header .select2-container--focus :is(.select2-selection--single, .select2-selection--multiple){border:1px solid #fff;}
#create-match .match-list-header .select2-selection--single .select2-selection__rendered{color:rgb(255 255 255 / 80%); font-size:13px;}
#create-match .match-list-header .select2-search__field{margin-top:2px; padding:4px; color:rgb(255 255 255 / 80%);}
#create-match .match-list-body .select2-selection--multiple{min-height:30px; font-size:0;}
#create-match .match-list-body .select2-selection{border:1px dashed var(--supernova); background-color:#f5f5f5; color:#333;}
#create-match .match-list-body input[type=text]{padding:4px 8px; min-height:30px; border-radius:4px; border:1px dashed var(--supernova); background-color:#f5f5f5; color:#333; text-align:center;}


/*###############
Teaser Movie
#################*/
#teaser{background-color:transparent;}
#teaser .modal-wrapper{align-items:flex-start;}
#teaser .modalwrap-panel{margin:0; max-width:1920px; width:100%; height:100%; border-radius:0;}
#teaser .modalwrap-panel::before{content:none;}
#teaser::before, #teaser-movie .modalwrap-panel::before{content:none;}
#teaser i.material-symbols-rounded{position:absolute; left:50%; top:50%; margin:-40px 0 0 -40px; color:#fff; font-size:80px; cursor:pointer;}
#teaser i.action-close{position:absolute; left:auto; right:16px; top:16px; margin:0; width:40px; height:40px; color:rgb(255 255 255 / 50%); font-size:40px; cursor:pointer;}
/* highlight movie */
#ytplayer{aspect-ratio:16 / 9;}


/*###############
More Menu
#################*/
#more-menu-container{position:absolute; z-index:10000; left:0; right:0; top:0;}
.more-menu-wrapper{display:flex; justify-content:center; align-items:flex-start; position:absolute; right:0; top:36px; height:0;}
.more-menu-component{display:flex; flex-direction:column; padding:8px; border-radius:4px; background-color:#fff; box-shadow:0 0 8px rgb(0 0 0 / 25%);}
.more-menu-item{display:flex; align-items:center; gap:2px; padding:5px 16px 5px 4px; line-height:1; border-radius:4px; color:#333; font-size:14px; cursor:pointer;}
.more-menu-item:hover{background-color:rgb(0 0 0 / 8%);}
.more-menu-item>i{font-variation-settings:var(--symbols-line);}


/*###################
Stats Layout
#####################*/
/* body.stats #container{background-color:#fff;} */
body.stats .detail-page-header{align-items:flex-start;}
body.stats .section{gap:8px;}
body.stats .header-title{flex-direction:column; align-items:flex-start;}
body.stats .season-title+.tabmenu{margin-top:16px;}
body.stats .sort-tag{align-self:flex-start;}
/* stats menu area */
.season-title{display:flex; align-items:center; gap:32px;}
.season-title select{padding:0 0 0 12px; border:10px solid transparent !important; border-radius:24px; border:0; background-color:rgb(0 0 0 / 40%); color:#fff; font-family:var(--font-poppins); font-size:24px;}
/* tab menu */
.stats-tabmenu{display:flex; width:100%; color:#fff;}
.stats-tabmenu>li{display:flex; justify-content:center; padding:12px; width:100%; border:1px solid rgb(255 255 255 / 25%); background-color:rgb(255 255 255 / 10%); font-size:20px; text-shadow:0 0 4px #000; white-space:nowrap; overflow:hidden; cursor:pointer;}
.stats-tabmenu>li.selected{border-bottom:0; background:linear-gradient(to top, rgb(0 0 0 / 0%), rgb(0 0 0 / 40%)); font-weight:600;}
/* stats table */
.stats-table-caption{display:flex; justify-content:flex-end; align-items:center; color:#fff;}
.stats-table-caption .update-date{display:flex; align-items:center; gap:4px; color:rgb(255 255 255 / 60%); font-family:var(--font-nanumsquareR); font-size:14px;}
.stats-table-caption .sort-tag{gap:0;}
.stats-table{display:flex; flex-direction:column; width:100%; color:#fff;}
.stats-table-header{border-top:1px solid rgb(255 255 255 / 80%); border-bottom:1px solid rgb(255 255 255 / 80%);}
.stats-table-body{display:flex; flex-direction:column; padding-bottom:8px; border-bottom:1px solid rgb(255 255 255 / 80%);}
.stats-table-body:empty::before{content:attr(data-empty); display:flex; justify-content:center; padding:40px 0; color:var(--sunflower-light); font-family:var(--font-nanumsquare); font-size:24px;}
.stats-table-row{display:grid; align-items:center; gap:8px; padding:8px;}
.stats-table:not([data-stats="player"]) .stats-table-row{grid-template-columns:80px 2fr 4fr 1fr;}
.stats-table[data-stats="player"] .stats-table-row{grid-template-columns:80px 2fr 2fr 2fr 1fr}
.stats-table-row>div{display:flex; align-items:center; gap:8px; font-family:var(--font-nanumsquareR); font-size:16px;}
.stats-table-header .stats-table-row{padding:24px 8px;}
.stats-table-header .stats-table-row>div{color:rgb(255 255 255 / 80%); font-weight:300;}
.stats-table-body .stats-table-row{border-top:1px dotted rgb(255 255 255 / 25%);}
.stats-table-body .stats-rank{font-size:16px !important; font-weight:600;}
.stats-rank{justify-content:center; margin-right:32px;}
.stats-table-header .stats-clubs{text-indent:40px;}
.stats-clubs>b{flex-shrink:0; display:flex; width:40px;}
.stats-clubs>b>img{width:100%;}
.stats-clubs>span{display:flex; flex-direction:column; font-weight:600;}
.stats-clubs>span>em{color:rgb(255 255 255 / 64%); font-size:12px; font-weight:300; font-style:normal;}
.stats-table-body .stats-teams{flex-wrap:wrap; gap:4px 24px;}
.stats-coach{justify-content:center;}
.stats-score{justify-content:flex-end;}
.stats-table-body .stats-score{color:var(--pastel-orange); font-weight:600;}


/*###################
News Layout
#####################*/
/* body.news .hero-stage{padding-bottom:0;} */
body.news .header-title{flex-direction:column;}
/* news list */
.news-list{display:flex; flex-direction:column;}
.news-list .news-list-item{display:flex;}
.news-list .news-list-item~.news-list-item{border-top:1px dashed rgb(255 255 255 / 20%);}
.news-list .news-list-item:hover{background-color:rgb(255 255 255 / 10%);}
.news-list .news-list-item>a{display:grid; grid-template-columns:200px 1fr; grid-template-rows:auto auto 1fr; gap:0 32px; padding:24px 0; width:100%; min-height:136px;}
.news-list .news-list-item img{grid-row:1 / 4; width:200px; height:150px;}
.news-list .news-list-item h3{padding:8px 0; color:#fff; font-family:var(--font-nanumsquare); font-size:26px; font-weight:400; letter-spacing:-1px;}
.news-list .news-list-item>a:hover h3{color:var(--pastel-orange);}
.news-list .news-list-item p{padding:8px 0; color:#ccc; font-size:13px;}
.news-list .news-list-item .info{position:relative; padding:8px 0;}
.news-list .news-list-item .info>span{color:#ccc;}
.news-list .news-list-item .info>span.category{display:none; font-size:11px;}
.news-list .news-list-item .info>span.date{color:#707070; font-family:'Open Sans'; font-weight:500; font-size:14px;}
.news-list .news-list-item.nothumb>a{grid-template-columns:1fr; min-height:auto;}
.news-list .more_btn{position:relative; margin-top:30px; text-align:center; overflow:hidden; padding:0px 0; border:1px dashed transparent; border-top-color:#e5e5e5; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
.news-list .more_btn:hover{border-color:#e5e5e5; background-color:#fafafa;}
.news-list .more_btn:before{content:''; position:absolute; top:0; bottom:0; left:0; right:0; border:1px solid transparent; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
.news-list .more_btn>a{display:block; position:relative; z-index:3; padding:15px; white-space:nowrap;}
.news-list .more_btn>a>span{display:inline-block; color:#333; font-family:var(--font-nanumsquare); font-size:20px; font-weight:400; letter-spacing:-1px; vertical-align:middle;}
.news-list .more_btn:hover>a>span{color:#fbb103;}
/* news view */
.news-view{display:flex; flex-direction:column; width:100%; border:1px solid rgb(255 255 255 / 25%); background-color:rgb(255 255 255 / 10%); overflow:hidden;}
.news-view i.material-symbols-rounded{border-radius:4px; border:1px solid rgb(255 255 255 / 20%); background-color:rgb(0 0 0 / 10%);}
.news-view h4{display:flex; align-items:center; gap:24px; padding:16px; line-height:1.2; border-bottom:1px solid rgb(255 255 255 / 25%); color:#fff; font-family:var(--font-poppins); font-size:20px; font-weight:400;}
.news-view h4>i.material-symbols-rounded{width:40px; height:40px; cursor:pointer;}
.news-view-info{display:flex; justify-content:space-between; align-items:center; padding:16px;}
.news-view-info .date{color:rgb(255 255 255 / 80%); font-size:15px;}
.news-view-info .sns{display:flex; align-items:center; color:#fff;}
.news-view-info .sns>i.material-symbols-rounded{width:32px; height:32px; cursor:pointer;}
.news-view-page{padding:24px 0;}
.news-view .latest{position:relative; margin:25px 0;}
.news-view .latest:after{content:''; clear:both; display:block;}
.news-view .latest h5{float:left; color:#1278bc; font-family:var(--font-nanumsquare); font-size:26px; font-weight:400; letter-spacing:-1px;}


/* Reset for quill */
.ql-container.ql-snow.ql-disabled{border:0;}
.quill-better-table-wrapper .quill-better-table{margin:0 auto;}
.qlbt-col-tool{justify-content:center;}
.ql-editor .ql-video{margin:0 auto; width:1000px; aspect-ratio:16 /9;}


/*###############
Screen Size
#################*/

@media (hover: none) {

   li:hover {transform:none !important; }
   
}

/* ##Device = Desktops, ##Screen = 769px to higher resolution desktops */
@media (min-width: 769px) {

   /* create match */
   #create-match :is(.match-board-header, .match-board-body) :is(strong, b, em, span){font-family:var(--font-nanumsquareR); font-size:15px;}
   #create-match .match-title{gap:16px; padding-top:8px;}
   #create-match .match-title>:is(strong, b, em, span){padding-left:16px;}
   #create-match .match-info{padding:16px;}
   #create-match .match-vs>em{width:32px; height:32px;}
   
}
   
/* ##Device = Desktops, ##Screen = 1025px to higher resolution desktops */
@media (min-width: 1025px) {

   /* stats layout */
   body.stats::before,
   body.stats::after{content:''; position:fixed; z-index:1; top:-200px; left:0; width:100%; height:1080px; aspect-ratio:auto; background-size:cover;}
   body.stats::after{background:linear-gradient(to bottom, rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 100%) 72%);}
   body.stats .hero-stage{padding-top:120px; padding-bottom:120px;}
   body.stats .hero-stage>h3{width:360px;}
   
}
   
/* ##Device = Desktops, ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {

   /* container layout */
   .header-title>.today-date{font-size:1.25vw;}
   .header-title>h3{font-size:1.65vw;}
   
}

/* ##Device = Desktops, ##Screen = 1921px to higher resolution desktops */
@media (min-width: 1921px) {

   /* hero stage */
   .hero-stage{padding-top:136px;}
   .hero-stage>h3{width:640px;}

   /* container layout */
   .header-title>h3{font-size:32px;}
   .header-title>.today-date{font-size:24px;}

   /* background image */
   body::before{left:50%; margin-left:-960px; width:1920px; aspect-ratio:1920 / 1080;}
   body.stats::before, body.stats::after{left:50%; margin-left:-960px; width:1920px; aspect-ratio:1920 / 1080; background-size:contain;}

   /* sticky layout */
   body.sticky{background-size:1920px 1080px; background-position:center -269px;}
   body.sticky .hero-stage{padding-top:72px;}
   body.sticky .detail-page-header{top:134px}
   body.sticky .detail-page-header::before{left:50%; right:auto; margin-left:-960px; width:1920px; height:358px; background-position:center -269px;}

}

/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 1280px */
@media (max-width: 1534px) {

   /* sticky layout */
   body.sticky{background-size:1534px 863px; background-position-y:-248px;}
   body.sticky .detail-page-header{top:104px}
   body.sticky .detail-page-header::before{left:50%; right:auto; margin-left:-767px; width:1534px; height:288px; background-image: url(../../img/lod/hero-top-image-rolldown.png); background-position-y:-248px;}

}

/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 1280px */
@media (max-width: 1280px) {

   /* container layout */
   .nav-item>a{height:72px; font-size:21px;}

   /* sticky layout */
   body.sticky{background-size:1280px 720px; background-position-y:-184px;}
   body.sticky .detail-page-header::before{margin-left:-640px; width:1280px; height:272px; background-position-y:-184px;}

}

/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 1160px */
@media (max-width: 1200px) {

   /* match board */
   .match-status{min-height:41px;}
   :is(.match-board-header, .match-board-body) :is(strong, b, em, span), .match-score-round>li{font-size:16.5px;}
   [data-match-num="3"] :is(.match-info, .match-class){column-gap:56px;}
   [data-match-num="4"] :is(.match-info, .match-class){column-gap:4px;}
   [data-match-num="5"] :is(.match-info, .match-class){column-gap:48px;}
   [data-match-num="3"] :is(.match-score-head, .match-score-row){min-height:48px;}
   [data-match-num="5"] :is(.match-score-head, .match-score-row){min-height:48px;}
   .match-class-name b{font-size:20px;}

}

/* ##Device = Desktops, ##Screen = 1080px to higher resolution desktops */
@media (max-width: 1024px) {

   /* stats layout */
   body.stats::before{top:-32px;}
   body.stats::after{content:''; position:absolute; z-index:1; top:-32px; left:0; width:100%; aspect-ratio:1920 / 1080; background:linear-gradient(to bottom, rgb(0 0 0 / 0%) 48%, rgb(0 0 0 / 100%) 72%);}
   body.stats .hero-stage{padding-bottom:8vw;}

}

/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 960px */
@media (max-width: 960px) {

   /* container layout */
   .contents-page{padding:0 32px;}
   .nav-item>a{height:64px; font-size:18px;}

   /* match board */
   .match-board-header::before{left:-62px;}
   .match-status{padding-right:56px;}
   .match-status::before{right:42px;}
   .match-title::before{right:14px;}
   .match-title::after{left:32px; top:10px;}
   :is(.match-board-header, .match-board-body) :is(strong, b, em, span),
   .match-score-round>li{font-family:var(--font-nanumsquareR); font-size:15px;}
   .match-title{gap:8px; padding-top:8px;}
   .match-title>:is(strong, b, em, span){padding-left:16px; height:32px;}
   .match-tabmenu>li{padding:0 24px;}
   .match-info{padding:16px;}
   [data-match-num="3"] :is(.match-info, .match-class),
   [data-match-num="5"] :is(.match-info, .match-class){column-gap:32px;}
   .match-class-name{width:136px;}
   .match-class-name b{font-size:17px;}
   .match-vs>em{width:32px; height:32px;}
   .match-vs>em::after{font-size:24px;}

   /* create match */
   #create-match .modalwrap-container{flex-direction:column; justify-content:flex-start; align-items:center; overflow:auto;}
   #create-match #match-calendar{padding-top:0;}
   #create-match .ui-datepicker{background-color:rgb(0 0 0 / 70%);}
   #create-match .match-list-body{overflow:visible;}

   /* news list */
   .news-list .news-list-item>a{grid-template-columns:146px 1fr; gap:0 24px;}
   .news-list .news-list-item img{width:146px; height:110px;}
   .news-list .news-list-item h3{font-size:18px; letter-spacing:-0.5px;}

}

/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 768px */
@media (max-width: 768px) {

   /* hero stage */
   .hero-stage{padding:64px 0 96px 0;}
   .hero-stage>h3{width:256px;}

   /* container layout */
   .contents-page{padding:0 24px;}
   .section{gap:40px;}
   .nav-wrapper{gap:8px;}
   .nav-item{padding:0 16px; width:auto;}
   .nav-item>a{height:56px; font-size:16px;}

   /* sticky layout */
   body{background-image: url(../../img/lod/hero-top-image.jpg); background-size:768px 432px !important;}
   body::before{content:none;}
   body.stats::after{height:432px; aspect-ratio:auto;}
   body.stats.sticky::after{position:fixed; background-color:rgb(0 0 0 / 50%);}
   body.sticky{background-position-y:-40px;}
   body.sticky .detail-page-header{top:88px;}
   body.sticky .detail-page-header::before{margin-left:-384px; width:768px; height:240px; background-position-y:-40px;}
   body.sticky .nav-logo>h3{width:120px;}

   /* category tag */
   .category-tag-item{font-size:13px;}
   /* sort tag */
   .sort-tag{gap:4px;}
   .sort-tag-item{padding:8px; font-size:13px;}

   /* match board */
   .match-board-header{flex-direction:row;}
   :is(.match-board-header, .match-board-body) :is(strong, b, em, span),
   .match-score-round>li{font-size:14px;}
   .match-status{gap:16px; position:absolute; z-index:2; left:40px; bottom:4px; padding:0 56px 0 24px;}
   .match-status>b>span{display:none;}
   .match-title{flex-grow:1; display:grid; grid-template-columns:auto auto auto 1fr; gap:0 16px; padding:8px 24px 0 16px;}
   .match-title::before{left:0; right:26px;}
   .match-title::after{left:30px; top:47px;}
   .match-title>span{padding-right:32px;}
   .match-tabmenu{grid-column:1 / 5; height:40px;}
   [data-match-num="2"] :is(.match-info, .match-class){column-gap:80px;}
   [data-match-num="3"] :is(.match-info, .match-class){column-gap:16px;}
   .match-score :is(strong, b, em, span){font-size:13px;}
   .match-class-name{width:112px;}
   .match-class-name>em{width:80px;}
   .match-vs>em{width:28px; height:28px;}
   :is(.match-score-class, .match-score-round){padding:8px 0;}
   :is(.match-score-head, .match-score-row){padding:0 16px; min-height:40px;}
   [data-match-num="4"] :is(.match-score-head, .match-score-row){min-height:48px;}
   [data-match-num="5"] :is(.match-score-head, .match-score-row){min-height:40px;}

   /* match board - in modal-layer */
   #scoring-board.modal-layer .match-info{display:none;}
   .modal-layer .match-score{flex-direction:row; margin:0; padding:0;}
   .modal-layer :is(.match-score-head, .match-score-row, .match-score-class, .match-score-round){display:flex; flex-direction:column; gap:4px;}
   .modal-layer :is(.match-score-head, .match-score-row){flex-basis:0; flex-grow:1; padding:8px 0 16px 0;}
   .modal-layer .match-score-head{flex-grow:0.5;}
   .modal-layer .match-score-row:nth-child(odd)::before{left:0;}
   .modal-layer .match-score-class>em{display:flex; align-items:center; height:32px; font-size:18px;}
   .modal-layer .match-score-head .match-score-class>em{font-size:inherit;}
   .modal-layer .match-score-round{flex-grow:1; justify-content:space-around;}
   .modal-layer .match-score-round select{font-size:18px;}

   /* stats season title */
   .season-title{display:flex; align-items:center; gap:32px;}
   .season-title select{padding:0 0 0 8px; border-width:9px !important; font-size:14.5px;}
   /* tab menu */
   .stats-tabmenu>li{padding:8px; font-size:16px;}
   /* stats table */
   .stats-table-caption .update-date{font-size:12px;}
   .stats-table-caption .update-date .material-symbols-rounded{width:18px; height:18px; font-size:18px;}
   .stats-table-row>div{font-size:12px; letter-spacing:-0.5px;}
   .stats-table-header .stats-table-row{padding:16px 8px;}
   .stats-table:not([data-stats="player"]) .stats-table-row{grid-template-columns:40px 120px 1fr 56px;}
   .stats-table[data-stats="player"] .stats-table-row{grid-template-columns:40px 120px 1fr 1fr 56px;}
   .stats-rank{margin-right:16px;}
   .stats-table-body .stats-teams{gap:4px 16px;}

   /* news list */
   .news-list .news-list-item>a{grid-template-columns:120px 1fr; gap:0 16px;}
   .news-list .news-list-item img{width:120px; height:90px;}
   .news-list .news-list-item h3{font-size:16.5px;}
   /* news view */
   .news-view h4{font-size:16px;}
   
}

/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 640px */
@media (max-width: 640px) {

   /* hero stage */
   .hero-stage>.btn-area button>span{font-size:0.93em;}

   /* container layout */
   .header-title{gap:16px;}
   .header-title>:is(.today-date, h3){font-size:inherit;}
   span.clamp.line2{line-clamp:1; -webkit-line-clamp:1;}

   /* match board */
   :is(.match-board-header, .match-board-body) :is(strong, b, em, span){font-size:13px;}
   .match-board-header::before{left:-67px;}
   .match-status{gap:8px; left:28px; padding:0 32px;}
   .match-status::before{right:16px;}
   .match-title{gap:0 8px;}
   .match-title::before{right:22px;}
   .match-title::after{left:24px; top:33px;}
   .match-title>:is(strong, b, em, span){padding-left:8px; height:18px;}
   [data-match-num="5"] :is(.match-info, .match-class){column-gap:16px;}
   .match-class-name{width:96px;}
   [data-match-num="2"] .match-class-name{width:104px;}
   .match-class-name b{font-size:14px;}
   .match-class-name>em{width:64px;}
   .match-vs>em{width:24px; height:24px;}
   .match-vs>em::after{font-size:18px;}
   .match-score{padding-bottom:8px;}
   :is(.match-score-head, .match-score-row){grid-template-columns:1fr 2fr;}
   .match-score-class{grid-template-columns:1fr 0.5fr !important; padding:4px 8px;}
   .match-score-class>b{grid-column:1 / 2; justify-self:flex-start; font-size:11px;}
   .match-score-class>span{grid-column:1 / 2; justify-self:flex-start; font-size:11px;}
   .match-score-class>em{grid-column:2 / 3; grid-row:1 / 3;}
   .match-score-round{padding:6px 0;}

   /* stats table */
   .stats-table-body .stats-clubs>b{width:32px;}

   /* modal layer */
   .modalwrap-panel{min-width:auto;}

   /* create match */
   #create-match .match-list-header .group-item-course{grid-column:1 / 4;}
   
}

/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = B/w 320px to 479px */
@media (max-width: 480px) {

   /* container layout */
   .contents-page{padding:0 8px;}
   .section{gap:32px;}
   .header-title>:is(.today-date, h3){font-size:initial;}
   .header-title>h3{padding-left:0; border-left:0;}

   /* sticky layout */
   body{background-size:768px 432px;}
   body.sticky{background-size:768px 432px; background-position-y:-80px;}
   body.sticky .detail-page-header{top:72px;}
   body.sticky .detail-page-header::before{margin-left:-384px; width:768px; height:192px; background-position-y:-80px;}
   body.sticky .nav-logo>h3{width:96px;}
   .nav-item{padding:0 8px; width:auto;}
   .nav-item>a{height:56px; font-size:14px;}

   /* category filter */
   .category-filter-item.curriculum{min-width:96px;}
   .category-filter-item::before{left:10px; top:10px;}
   .category-filter-item>select{padding:24px 20px 10px 10px !important; background-position:bottom 8px right 4px; font-size:12px;}
   /* category tag */
   .category-tag{gap:4px;}
   .category-tag-item{padding:8px 10px; font-size:11px;}
   /* sort tag */
   .sort-tag-item{padding-bottom:6px; font-size:12px;}

   /* match board */
   :is(.match-board-header, .match-board-body) :is(strong, b, em, span){font-size:12px;}
   .match-status{padding:0 24px;}
   .match-tabmenu>li{padding:0 16px;}
   :is(.match-info, .match-class){column-gap:0 !important;}
   [data-match-num="2"] :is(.match-info, .match-class){column-gap:32px !important;}
   .match-info{padding:16px 8px;}
   .match-class-name{width:88px;}
   :is(.match-score-head, .match-score-row){padding:0 8px;}

   /* match board - in modal-layer */
   .modal-layer .match-board{margin:0 8px; width:calc(100% - 16px);}
   .modalwrap-header{grid-template-columns:auto 1fr auto; padding:8px;}

   /* create match */
   #create-match :is(.match-list-header, .match-list-footer){margin:0 8px; width:calc(100% - 16px);}

   /* tab menu */
   .stats-tabmenu>li{font-size:14px;}
   /* stats table */
   .stats-table:not([data-stats="player"]) .stats-table-row{grid-template-columns:32px 104px 1fr 56px;}
   .stats-table[data-stats="player"] .stats-table-row{grid-template-columns:32px 104px 1fr 1fr 56px;}
   .stats-rank{margin-right:0;}

   /* news list */
   .news-list .news-list-item>a{grid-template-columns:80px 1fr; gap:0 16px; padding:16px 0;}
   .news-list .news-list-item img{width:80px; height:60px;}
   .news-list .news-list-item h3{padding:0; font-size:15px;}
   .news-list .news-list-item .info{padding:0;}

}

/* ##Device = Galaxy Fold (Portrait), ##Screen = B/w Less than 319px */
@media (max-width: 319px) {


}