@charset "utf-8";

/* ==========================================================================
   GLTV 레이아웃 (I안: 경기 찾기 + 바로 시청 + 커뮤니티)
   - 색은 color.css 의 변수만 사용합니다.
   ========================================================================== */

/* ---------- 공용 부품 ---------- */
.gl-in {width:1200px;margin:0 auto}
.gl-logo {display:inline-block;font-size:22px;font-weight:900;letter-spacing:-.5px;color:var(--chrome-text);white-space:nowrap;line-height:1}
.gl-logo em {font-style:normal;color:var(--highlight)}
.gl-logo:hover {color:var(--chrome-text);text-decoration:none}

.gl-btn {display:inline-block;height:32px;padding:0 14px;border:0;border-radius:6px;background:var(--primary);color:var(--on-accent);font-size:13px;font-weight:700;line-height:32px;white-space:nowrap;cursor:pointer}
.gl-btn:hover {background:var(--primary-hover);color:var(--on-accent);text-decoration:none}

.gl-live {display:inline-block;height:18px;padding:0 6px 0 14px;border-radius:3px;background:var(--live) ;color:#fff;font-size:10px;font-weight:800;font-style:normal;line-height:18px;letter-spacing:.3px;position:relative}
.gl-live:before {content:"";position:absolute;left:6px;top:7px;width:5px;height:5px;border-radius:50%;background:#fff}

.gl-card {border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden}
.gl-card-hd {display:flex;justify-content:space-between;align-items:center;margin:0;padding:13px 16px;border-bottom:1px solid var(--border-soft);font-size:14px;line-height:1.4;color:var(--text-strong)}
.gl-card-hd a {color:var(--text-strong)}
.gl-card-hd .gl-more {font-size:12px;font-weight:400;color:var(--text-faint)}
.gl-card-hd .gl-more:hover {color:var(--primary-text)}

.gl-posts {margin:0;padding:0;list-style:none}
.gl-posts li {display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border-soft);font-size:13px;line-height:1.5}
.gl-posts li:last-child {border-bottom:0}
.gl-posts .fa-lock {color:var(--text-faint)}
.gl-post-t {flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text)}
.gl-post-t:hover {color:var(--primary-text)}
.gl-post-c {flex:none;color:var(--primary-text);font-size:12px;font-weight:700}
.gl-post-d {flex:none;color:var(--text-faint);font-size:12px}
.gl-new {flex:none;width:15px;height:15px;border-radius:3px;background:var(--primary);color:var(--on-accent);font-size:10px;font-weight:700;line-height:15px;text-align:center}
.gl-rank li > b {flex:none;width:16px;color:var(--primary-text);font-weight:800;text-align:center}
.gl-posts .gl-empty, .gl-empty {display:block;padding:36px 16px;color:var(--text-faint);font-size:13px;text-align:center}
.gl-write {display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border-soft)}
.gl-write-in {flex:1;height:32px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text-faint);font-size:12px;line-height:30px}
.gl-write-in:hover {border-color:var(--primary);color:var(--text-muted);text-decoration:none}

/* 팀 표시 */
.gl-team {display:flex;align-items:center;gap:8px;min-width:0;color:var(--text-strong);font-size:13px;font-weight:600;line-height:24px}
.gl-team > span {overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gl-crest {flex:none;width:20px;height:20px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;font-style:normal;line-height:20px;text-align:center}

/* ---------- 플레이어 + 경기 목록 ---------- */
.gl-stage {display:grid;grid-template-columns:1fr 340px;grid-template-areas:"player panel" "under under";gap:0 16px}
.gl-player {grid-area:player;position:relative;height:475px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#0a172a,#3d5670)}
.gl-poster {position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 59px,rgba(255,255,255,.05) 59px,rgba(255,255,255,.05) 60px)}
.gl-poster .gl-live {position:absolute;top:14px;left:14px}
.gl-scoreboard {position:absolute;top:14px;left:50%;display:flex;align-items:center;gap:14px;max-width:70%;padding:7px 16px;border-radius:8px;background:rgba(0,0,0,.6);color:#fff;font-size:14px;font-weight:700;white-space:nowrap;transform:translateX(-50%)}
.gl-scoreboard b {font-size:16px;font-weight:800}
.gl-scoreboard i {color:var(--highlight);font-size:11px;font-style:normal;font-weight:600}
.gl-scoreboard i:empty, .gl-scoreboard b:empty {display:none}
.gl-play {position:absolute;top:50%;left:50%;width:70px;height:70px;margin:-35px 0 0 -35px;border:2px solid rgba(255,255,255,.8);border-radius:50%;background:rgba(0,0,0,.45)}
.gl-play:after {content:"";position:absolute;top:19px;left:27px;border:14px solid transparent;border-right:0;border-left:22px solid #fff}
.gl-poster-msg {position:absolute;right:0;bottom:16px;left:0;margin:0;color:rgba(255,255,255,.8);font-size:13px;text-align:center}
.gl-frame {position:absolute;top:0;right:0;bottom:0;left:0;display:none;background:#000}
.gl-frame iframe {width:100%;height:100%;border:0}
.gl-player.is-playing .gl-frame {display:block}

.gl-panel {grid-area:panel;display:flex;flex-direction:column;height:475px;border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden}
.gl-panel-hd {flex:none;display:flex;justify-content:space-between;align-items:center;padding:13px 14px 8px}
.gl-panel-hd h2 {margin:0;font-size:14px;color:var(--text-strong)}
.gl-panel-hd h2 b {color:var(--primary-text)}
.gl-panel-hd h2 span {margin-left:6px;font-size:12px;font-weight:400;color:var(--text-muted)}
.gl-sample {padding:1px 6px;border:1px solid var(--border);border-radius:3px;color:var(--text-faint);font-size:11px}
.gl-chips {flex:none;display:flex;gap:5px;padding:0 14px 10px;border-bottom:1px solid var(--border-soft);overflow-x:auto}
.gl-chips button {flex:none;height:26px;padding:0 11px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text-muted);font-size:12px;cursor:pointer}
.gl-chips button.is-on {border-color:var(--primary);background:var(--primary);color:var(--on-accent);font-weight:700}
.gl-list {flex:1;overflow-y:auto}
.gl-m {display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:10px;width:100%;padding:9px 14px;border:0;border-bottom:1px solid var(--border-soft);background:none;color:var(--text);text-align:left;cursor:pointer}
.gl-m:hover {background:var(--tint)}
.gl-m.is-sel {background:var(--primary-soft);box-shadow:inset 3px 0 0 var(--primary)}
.gl-m[hidden] {display:none}
.gl-m-time {color:var(--text-muted);font-size:12px;font-weight:700}
.gl-m-teams {min-width:0}
.gl-m-score {color:var(--text-strong);font-size:13px;font-weight:800;line-height:24px;text-align:right}
.gl-m-league {max-width:86px;overflow:hidden;color:var(--text-faint);font-size:11px;white-space:nowrap;text-overflow:ellipsis}

.gl-under {grid-area:under;display:flex;align-items:center;gap:16px;min-height:44px;padding:14px 2px 0}
.gl-now {flex:1;min-width:0}
.gl-now b {display:block;color:var(--text-strong);font-size:17px;line-height:1.3}
.gl-now span {color:var(--text-muted);font-size:12px}
.gl-channels {display:flex;gap:6px}
.gl-channels button {height:32px;padding:0 14px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text-muted);font-size:12px;font-weight:700;cursor:pointer}
.gl-channels button.is-on {border-color:var(--primary);color:var(--primary-text)}

/* ---------- PC 헤더 ---------- */
#gl_hd {min-width:1200px;background:var(--chrome-bg)}
#gl_hd #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.gl-hd-top .gl-in {display:flex;align-items:center;gap:28px;height:64px}
.gl-search {display:flex;width:380px;height:36px;border-radius:18px;background:var(--chrome-field);overflow:hidden}
.gl-search input[type="text"] {flex:1;min-width:0;height:36px;padding:0 0 0 16px;border:0;background:transparent;color:var(--chrome-text);font-size:13px;outline:0}
.gl-search input[type="text"]::placeholder {color:var(--chrome-text-muted)}
.gl-search button {width:44px;height:36px;border:0;background:transparent;color:var(--chrome-text-muted);font-size:14px;cursor:pointer}
.gl-search button:hover {color:var(--chrome-text)}
.gl-user {display:flex;align-items:center;gap:16px;margin:0 0 0 auto;padding:0;list-style:none;font-size:13px}
.gl-user a {color:var(--chrome-text-muted)}
.gl-user a:hover {color:var(--chrome-text);text-decoration:none}

.gl-nav {background:var(--surface);border-bottom:1px solid var(--border)}
.gl-nav .gl-in {display:flex;align-items:stretch;justify-content:space-between}
.gl-nav ul {margin:0;padding:0;list-style:none}
.gl-nav-main {display:flex}
.gl-nav-main > li {position:relative}
.gl-nav-main > li > a {display:block;padding:0 16px;border-bottom:3px solid transparent;color:var(--text-muted);font-size:14px;font-weight:700;line-height:45px}
.gl-nav-main > li > a:hover {color:var(--text-strong);text-decoration:none}
.gl-nav-main > li.is-on > a {border-color:var(--primary);color:var(--primary-text)}
.gl-nav-sub {display:none;position:absolute;top:100%;left:0;z-index:100;min-width:160px;padding:6px 0 !important;border:1px solid var(--border);border-radius:0 0 8px 8px;background:var(--surface);box-shadow:var(--shadow)}
.gl-nav-main > li:hover .gl-nav-sub, .gl-nav-main > li:focus-within .gl-nav-sub {display:block}
.gl-nav-sub a {display:block;padding:8px 16px;color:var(--text);font-size:13px;white-space:nowrap}
.gl-nav-sub a:hover {background:var(--tint);color:var(--primary-text);text-decoration:none}
.gl-nav-util {display:flex;align-items:center;gap:16px;font-size:12px}
.gl-nav-util a {color:var(--text-muted)}
.gl-nav-util a:hover {color:var(--text-strong)}
.gl-nav-util b {color:var(--primary-text)}

/* ---------- PC 메인 ---------- */
.gl-home #container {float:none;width:1200px;margin:18px auto 30px}
.gl-bottom {display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start;margin-top:18px}
.gl-boards {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gl-side {display:grid;gap:16px}
.gl-side .ol {margin:0}

/* ---------- 모바일 ---------- */
#hd #logo .gl-logo {font-size:19px;line-height:40px}
.gl-mo .gl-stage {display:flex;flex-direction:column}
.gl-mo .gl-under {order:1}
.gl-mo .gl-seg {order:2}
.gl-mo .gl-panel, .gl-mo .gl-comm {order:3}
.gl-mo .gl-player {position:sticky;top:0;z-index:20;height:auto;padding-top:56.25%;border-radius:0}
.gl-mo .gl-scoreboard {top:10px;gap:8px;max-width:calc(100% - 90px);padding:5px 10px;font-size:12px;transform:none;left:auto;right:10px}
.gl-mo .gl-scoreboard b {font-size:13px}
.gl-mo .gl-poster .gl-live {top:10px;left:10px}
.gl-mo .gl-play {width:54px;height:54px;margin:-27px 0 0 -27px}
.gl-mo .gl-play:after {top:14px;left:21px;border-width:11px;border-left-width:17px}
.gl-mo .gl-poster-msg {bottom:8px;font-size:11px}
.gl-mo .gl-under {padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border-soft)}
.gl-mo .gl-now b {font-size:15px}
.gl-mo .gl-channels button {height:28px;padding:0 10px}
.gl-mo .gl-panel {height:auto;border:0;border-radius:0;background:transparent}
.gl-mo .gl-panel[hidden] {display:none}
.gl-mo .gl-list {overflow:visible;background:var(--surface)}
.gl-mo .gl-panel-hd {padding:12px 14px 8px}
.gl-mo .gl-chips {border-bottom:1px solid var(--border)}
.gl-seg {display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border-bottom:1px solid var(--border)}
.gl-seg button {height:42px;border:0;border-bottom:2px solid transparent;background:none;color:var(--text-muted);font-size:13px;font-weight:700;cursor:pointer}
.gl-seg button.is-on {border-color:var(--primary);color:var(--primary-text)}
.gl-comm {display:grid;gap:12px;padding:12px}
.gl-comm[hidden] {display:none}

#gl_tabbar {position:fixed;right:0;bottom:0;left:0;z-index:95;display:grid;grid-template-columns:repeat(4,1fr);height:56px;border-top:1px solid var(--border);background:var(--surface);padding-bottom:env(safe-area-inset-bottom)}
#gl_tabbar a {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-faint);font-size:10px;font-weight:700}
#gl_tabbar a i {font-size:18px}
#gl_tabbar a.is-on {color:var(--primary-text)}
#gl_tabbar ~ #top_btn, #ft #top_btn {bottom:68px}