/* components.css — 앱 공통 컴포넌트 (냥볼카드 톤 리팩토링)
   디자인 토큰은 tokens.css 에서 관리한다.
   ─────────────────────────────────────────── */

/* ═══ 리셋 ═══ */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--color-bg);color:var(--color-text);
  font-family:var(--ff-app);font-size:var(--fs-14);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;overscroll-behavior:none;
}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
svg{display:block}

/* ═══ 유틸 ═══ */
.is-hidden,.hide{display:none!important}

/* ═══ 앱 셸 ═══ */
.app-shell{height:100vh;height:100dvh;display:flex;flex-direction:column}

.viewport{flex:1;overflow:hidden;position:relative}
.pages{height:100%;position:relative}

.page{
  position:absolute;top:0;left:0;width:100%;height:100%;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--color-bg);
  overscroll-behavior:contain;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.page::-webkit-scrollbar{width:0;height:0}
.page[hidden]{display:none}

.app_pageInner{
  min-height:100%;
  width:min(920px,100%);margin:0 auto;box-sizing:border-box;
  padding:0 var(--pad-x) calc(var(--h-bnav) + var(--g16) + env(safe-area-inset-bottom));
  background:var(--color-bg);
}
.app_topbar{
  height:var(--h-topbar);min-height:var(--h-topbar);max-height:var(--h-topbar);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--g12);background:var(--color-card);
  border-bottom:1px solid var(--color-line);border-radius:0;
  position:sticky;top:0;z-index:10;
}
.app_topbar-gear{
  width:var(--g36);height:var(--g36);border:0;border-radius:var(--r-sm);
  background:transparent;display:flex;align-items:center;justify-content:center;
  color:var(--color-text);cursor:pointer;
}
.app_topbar-gear:active{transform:scale(.98)}
.app_topbar-title{
  flex:1;text-align:center;font-weight:var(--fw-black);
  font-size:var(--fs-16);letter-spacing:var(--ls-snug);color:var(--color-text);
}
.app_topbar-spacer{width:var(--g36);height:var(--g36)}

/* ═══ 드로어 메뉴 ═══ */
.drawer-backdrop{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.35);
  opacity:0;transition:opacity .25s ease;
}
.drawer-backdrop.open{opacity:1}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(280px,80vw);
  z-index:901;background:var(--color-bg);
  transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;
  box-shadow:-4px 0 20px rgba(0,0,0,.08);
}
.drawer.open{transform:translateX(0)}
.drawer-header{
  height:var(--h-topbar);display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--g12);
  border-bottom:1px solid var(--color-line);flex-shrink:0;
}
.drawer-header-title{
  font-size:var(--fs-16);font-weight:var(--fw-black);
  letter-spacing:var(--ls-snug);
}
.drawer-close{
  width:var(--g36);height:var(--g36);border:0;background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-text);cursor:pointer;
}
.drawer-close .material-symbols-outlined{font-size:22px}
.drawer-nav{
  flex:1;overflow-y:auto;padding:var(--g8) 0;
}
.drawer-item{
  width:100%;display:flex;align-items:center;gap:var(--g12);
  padding:var(--g12) var(--g16);border:none;background:transparent;
  font-size:var(--fs-14);font-weight:var(--fw-bold);
  color:var(--color-text);cursor:pointer;text-align:left;
  font-family:inherit;letter-spacing:var(--ls-snug);
}
.drawer-item:active{background:rgba(0,0,0,.04)}
.drawer-item .material-symbols-outlined{font-size:22px;color:var(--color-muted)}
.drawer-footer{
  padding:var(--g16);border-top:1px solid var(--color-line);flex-shrink:0;
}
.drawer-legal{
  display:flex;align-items:center;justify-content:center;
  gap:var(--g8);margin-bottom:var(--g8);
}
.drawer-legal-link{
  font-size:var(--fs-12);font-weight:var(--fw-bold);
  color:var(--color-muted);text-decoration:none;cursor:pointer;
}
.drawer-legal-link:active{color:var(--color-text)}
.drawer-legal-sep{color:var(--color-line);font-size:var(--fs-12)}
.drawer-version{
  text-align:center;font-size:var(--fs-11);
  color:var(--color-muted2);margin-bottom:var(--g4);
}
.drawer-disclaimer{
  text-align:center;font-size:var(--fs-10);
  color:var(--color-muted2);line-height:1.3;
}

/* ═══ 하단바 ═══ */
.app_bottombar{
  height:calc(var(--h-bnav) + env(safe-area-inset-bottom));
  padding:var(--g8) var(--g8) calc(var(--g8) + env(safe-area-inset-bottom));
  border-top:1px solid rgba(0,0,0,.05);
  display:flex;gap:var(--g4);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.2) blur(var(--g16));
  position:fixed;left:0;right:0;bottom:0;z-index:10;
}
.app_bottombar-item{
  flex:1;border:0;background:transparent;border-radius:var(--r-md);
  padding:var(--g8) var(--g4);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--g4);color:var(--color-muted);
  text-decoration:none;font-size:var(--fs-12);line-height:1;
  letter-spacing:var(--ls-snug);font-weight:var(--fw-bold);
}
.app_bottombar-item.active{color:var(--color-accent);font-weight:var(--fw-black)}
.app_bottombar-item.active .app_bottombar-icon{transform:translateY(-.5px)}
.app_bottombar-item:active{transform:scale(.985)}
.app_bottombar-icon{width:var(--g24);height:var(--g24);display:grid;place-items:center}
.app_bottombar-icon svg{width:var(--g24);height:var(--g24);stroke:currentColor}

/* ── 가운데 메인 탭 (FAB 원형) ── */
.app_bottombar-main{position:relative;overflow:visible}
.app_bottombar-fab{
  width:48px;height:48px;aspect-ratio:1;flex-shrink:0;
  border-radius:50%;
  background:var(--color-muted2,#9CA3AF);color:#fff;
  display:grid;place-items:center;
  margin-top:-24px;
  box-shadow:none;
  transition:transform .15s ease,background .15s ease;
}
.app_bottombar-main .material-symbols-outlined{font-size:26px;color:#fff}
.app_bottombar-main>span:last-child{margin-top:auto}
.app_bottombar-main.active .app_bottombar-fab{
  background:var(--color-teamc);
  transform:scale(1.08);
  box-shadow:none;
}
.app_bottombar-main:active .app_bottombar-fab{transform:scale(.95)}

/* ═══ 공통 pill 배지 ═══ */
.app-pill{
  display:inline-block;
  padding:var(--g4) var(--g16);
  border-radius:9999px;
  border:1.5px solid var(--color-line);
  font-size:var(--fs-12);font-weight:var(--fw-black);
  color:var(--color-text);background:none;
  cursor:pointer;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.app-pill:active{opacity:.5}

/* ═══ 페이지 inner ═══ */
.app_pageInner--flushTop{padding-top:0}
.app_pageInner--spacedTop{padding-top:var(--g8)}

/* ═══ Sticky ═══ */
/* 페이지별 sticky — background는 각 요소 고유 색상 유지 */
/* 경기리스트: 날짜바만 고정 */
.page[data-page="games"] .app_date.js-sticky{position:sticky;top:0;z-index:30}

/* 라인업: 팀바 > 날짜바 > 선발플레이바 고정, 교체플레이바는 스크롤 */
.page[data-page="lineup"] .app_teambar.js-sticky{position:sticky;top:0;z-index:30}
.page[data-page="lineup"] .app_date.js-sticky{position:sticky;top:var(--h-control);z-index:30}
.page[data-page="lineup"] .app_allplaybar.js-sticky{position:sticky;top:calc(var(--h-control) * 2);z-index:30}

/* 응원가: 탭+컨트롤바 고정 */
.page[data-page="cheerlist"] .cheer-tabs{position:sticky;top:0;z-index:30;background:var(--color-bg)}
.page[data-page="cheerlist"] .cheer-control-bar{position:sticky;top:42px;z-index:29;background:var(--color-bg)}

/* 마이라인업: 팀바 > 플레이바 고정 */
.page[data-page="mylineup"] .app_teambar.js-sticky{position:sticky;top:0;z-index:30}
.page[data-page="mylineup"] .app_allplaybar.js-sticky{position:sticky;top:var(--h-control);z-index:30}

/* 응원설정: 팀바 고정 */
.page[data-page="settings"] .app_teambar.js-sticky{position:sticky;top:0;z-index:30}

/* ═══ 컨트롤바 ═══ */
.app_controlBar{position:relative;justify-content:space-between;
  height:var(--h-control);min-height:var(--h-control);
  border-radius:var(--r-md);background:var(--color-bg);
  padding-left:var(--pad-x);padding-right:var(--pad-x);
  display:flex;align-items:center;box-shadow:var(--shadow-card);
}
.app_controlBar--bleed{
  margin-left:calc(var(--pad-x) * -1);margin-right:calc(var(--pad-x) * -1);
  border-radius:0;box-shadow:none;
}

/* ═══ 날짜바 ═══ */
.app_date{
  background:var(--color-bg);border-radius:0;
  padding:var(--g12) var(--g8);display:flex;align-items:center;
  border-bottom:1px solid var(--color-line);
}
.app_date-btn{
  width:var(--g32);height:var(--g32);border:0;background:transparent;
  border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  color:var(--color-text);
}
.app_date-btn .material-symbols-outlined{font-size:var(--g20)}
.app_date-btn:active{background:var(--color-line)}
.app_date-display{flex:1;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.app_date-text{font-weight:var(--fw-black);font-size:var(--fs-16);letter-spacing:var(--ls-tight);text-decoration:none}
.app_date-sub{font-size:var(--fs-12);color:var(--color-muted);font-weight:var(--fw-bold);margin-top:2px}

/* ═══ 팀바 ═══ */
.app_teambar{
  height:var(--h-control);min-height:var(--h-control);
  display:flex;align-items:center;
  border-radius:0;padding:0 var(--pad-x);color:#fff;
}
.app_teambar:not(.app_teambar--custom){
  background:var(--color-teamc,#fff);
  border-color:var(--color-teamc,var(--color-line));color:#fff;
}
.app_teambar--custom{
  background:var(--color-myteam);color:var(--color-myteam-text);
  border-color:var(--color-myteam);
}
.app_teambar-dummy{display:none}
.app_teambar .app_text-title{
  position:absolute;left:50%;transform:translateX(-50%);
  color:currentColor;text-align:center;pointer-events:none;white-space:nowrap;
}
.app_teambar-icon{
  width:var(--g32);height:var(--g32);border:0;background:transparent;border-radius:0;
  display:flex;align-items:center;justify-content:center;color:currentColor;
  flex-shrink:0;margin-left:auto;
}
.app_teambar-select{position:absolute;opacity:0;pointer-events:none}
.app_teambar--notice{justify-content:center}
.app_teambar--notice .app_text-title{flex:0 1 auto}

/* ═══ 올플레이바 / 섹션 제목바 ═══ */
.app_allplaybar{
  height:var(--h-control);min-height:var(--h-control);
  display:flex;align-items:center;position:relative;
  justify-content:space-between;background:var(--color-bg);border-bottom:1px solid var(--color-line);
  padding:0 var(--pad-x);
}
.app_allplaybar-cell--tabs{display:flex;align-items:center;gap:var(--g20);position:absolute;left:50%;transform:translateX(-50%)}
.app_allplaybar-cell{display:flex;align-items:center}
.app_allplaybar-cell--end{justify-content:flex-end;margin-left:auto}

/* 마이라인업 allplaybar */
#my-all-play-bar{--color-teamc:var(--myteamc,var(--color-myteam))}

.app_allplaybar-label,
.app_allplaybar-tab{
  font-weight:var(--fw-black);font-size:var(--fs-14);letter-spacing:var(--ls-snug);
  color:var(--color-text);
}
.app_allplaybar-label{position:absolute;left:50%;transform:translateX(-50%);line-height:1;white-space:nowrap}
.app_allplaybar-label.is-underlined{padding-bottom:var(--g4);border-bottom:1px solid var(--color-teamc)}

.app_allplaybar-tab{
  border:0;background:transparent;padding:0;padding-bottom:var(--g4);
  border-bottom:1px solid transparent;text-align:left;cursor:pointer;
  color:var(--color-muted);display:inline-block;line-height:1;
  font-weight:var(--fw-black);letter-spacing:var(--ls-snug);
}
.app_allplaybar-tab.active{color:var(--color-text);border-bottom-color:var(--color-teamc)}

/* 전체▶ 버튼 — 원형 아이콘 */
.app_allplaybar-viewall{
  border:0;background:var(--color-teamc);color:#fff;
  width:var(--g28);height:var(--g28);border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;flex-shrink:0;margin-left:auto;
}
.app_allplaybar-viewall .material-symbols-outlined{
  font-size:var(--fs-14);line-height:1;
}
.app_allplaybar--my .app_allplaybar-viewall{
  background:var(--color-myteam);color:var(--color-myteam-text);
}
#my-all-play-bar .app_allplaybar-viewall{
  background:var(--myteamc,var(--color-myteam));
  color:var(--myteamnamec,var(--color-myteam-text));
}

/* ═══ 텍스트 유틸 ═══ */
.app_text-title{
  font-weight:var(--fw-black);font-size:var(--fs-16);
  letter-spacing:var(--ls-tight);line-height:1.15;text-align:center;
  color:var(--color-text);
}
.app_text-body{
  font-weight:var(--fw-bold);font-size:var(--fs-14);
  letter-spacing:var(--ls-snug);line-height:1.25;text-align:left;
  color:var(--color-text);
}
.app_text-accent{color:var(--color-cherry);font-weight:var(--fw-black)}

/* ═══ 야옹ON 안내바 ═══ */
.info-bar{
  background:var(--color-accent);border:none;border-radius:var(--r-full);
  padding:10px 20px;font-size:var(--fs-12);
  font-weight:var(--fw-bold);text-align:left;
  display:flex;align-items:center;justify-content:space-between;
}
.info-bar .app_text-accent{color:#fff;font-weight:var(--fw-black)}

/* ═══ 빈 상태 (공통) ═══ */
.app-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--g24) var(--pad-x) var(--g64);gap:var(--g4);
}
.app-empty-icon{width:256px;max-width:80vw;height:auto;object-fit:contain;opacity:.5}
.app-empty-text{
  font-size:var(--fs-14);font-weight:var(--fw-bold);
  color:var(--color-muted);text-align:center;
}

/* ═══ 경기 카드 (냥볼) ═══ */
.gameBlock{margin-bottom:var(--g12);cursor:default}
.gameCard{
  background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--r-xl);
  overflow:hidden;position:relative;
  box-shadow:var(--shadow-card);transition:transform .15s;
  isolation:isolate;
}
.gameCard .side:active{transform:scale(.95)}
.gameCard.ended{opacity:.75}

/* 설정팀 경기 — 골드 테두리 */
.gameBlock.is-myteam .gameCard{border:2px solid #fbbf24}

/* 비설정팀 경기 투명 처리 */
.gameBlock .gameCard{opacity:.45}
.gameBlock.is-myteam .gameCard{opacity:1}

.gameCard .sides{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:var(--g100);position:relative;gap:0;align-items:stretch;
}
.gameCard .side{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--g4);padding:var(--g12);
  overflow:hidden;transition:transform .15s ease-out;
}
.gameCard .side.left{border-right:0}
.gameCard .side.right{border-left:0}

/* 설정팀 경기: 상대팀 쪽 연한 처리 */
.gameCard .side.is-opponent{opacity:.4}

.teamStack{display:flex;flex-direction:column;align-items:center;gap:var(--g4)}
.gameCard .teamStack{min-height:var(--g44);justify-content:center}
.gameCard .teamStack.noCheer{justify-content:center;gap:0}
.teamStack.rightAlign{align-items:center}

.teamName{
  font-weight:var(--fw-black);font-size:var(--fs-20);
  letter-spacing:var(--ls-snug);min-width:44px;text-align:center;
  color:#fff;text-shadow:0 1px var(--g4) rgba(0,0,0,.12);
}

/* 홈/어웨이 라벨 */
.ha-label{font-size:var(--fs-12);font-weight:var(--fw-black);color:rgba(255,255,255,.5);letter-spacing:0.5px}

/* 야옹ON 뱃지 */
.teamTagText{
  display:inline-block;width:fit-content;
  font-size:var(--fs-14);font-weight:var(--fw-black);
  letter-spacing:var(--ls-snug);padding:var(--g4) var(--g12);border-radius:var(--g8);
  background:rgba(255,255,255,.25);color:#fff;
  align-self:center;line-height:1.15;
}
.side.right .teamTagText{align-self:center}
.teamTagText.shimmerText{position:relative;overflow:hidden}
.teamTagText.shimmerText::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(110deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 60%);
  background-size:300% 100%;background-position:150% 0;
  animation:shimmerTextSweep 4s ease-in-out infinite;
}
@keyframes shimmerTextSweep{
  0%{background-position:150% 0}75%{background-position:-150% 0}100%{background-position:-150% 0}
}

/* 스코어 원형 */
.gameCard .scorePill{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--g64);height:var(--g64);background:#fff;border-radius:50%;
  z-index:10;
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;font-weight:var(--fw-black);
  font-size:var(--fs-16);letter-spacing:var(--ls-tight);color:var(--color-text);
}
.gameCard .scorePill .sp-home{text-align:left;min-width:2ch}
.gameCard .scorePill .sp-sep{text-align:center;color:var(--color-muted2);font-weight:var(--fw-normal);margin:0 1px;flex-shrink:0}
.gameCard .scorePill .sp-away{text-align:right;min-width:2ch}

/* ═══ 전광판 (라인스코어) — 경기정보 패널 ═══ */
.sb-panel{
  margin:var(--g8) 0;
  background:var(--color-card);
  border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
  overflow:hidden;
}
.sb-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.sb-scroll::-webkit-scrollbar{display:none}
.sb-table{
  width:100%;border-collapse:collapse;
  font-size:var(--fs-11);font-weight:var(--fw-bold);
  white-space:nowrap;table-layout:fixed;
  min-width:max-content;
  color:var(--color-text);
}
.sb-table thead{background:#f8f9fa}
.sb-table th,.sb-table td{
  padding:6px 0;text-align:center;
}
.sb-table tbody tr{border-top:1px solid var(--color-line)}
/* 팀명 열: sticky */
.sb-th-team,.sb-td-team{
  position:sticky;left:0;z-index:2;
  min-width:52px;width:52px;max-width:52px;
  text-align:left;padding-left:8px;padding-right:4px;
  font-weight:var(--fw-black);letter-spacing:var(--ls-tight);
}
.sb-th-team{background:#f8f9fa}
.sb-td-team{background:var(--color-card)}
.sb-team-dot{display:inline-block;width:6px;height:6px;border-radius:50%;vertical-align:middle;margin-right:3px}
/* 이닝 열 */
.sb-th-inn,.sb-td-inn{min-width:22px;width:22px;color:var(--color-muted2)}
.sb-th-inn{color:var(--color-muted);font-weight:var(--fw-mid)}
/* 현재 이닝 하이라이트 */
.sb-th-inn.sb-cur{color:#d97706;font-weight:var(--fw-black)}
.sb-td-inn.sb-cur{color:var(--color-text);background:rgba(251,191,36,.1)}
.sb-td-inn.sb-active{color:#d97706;font-weight:var(--fw-black);background:rgba(251,191,36,.15)}
/* 득점 이닝 강조 */
.sb-td-inn.sb-scored{color:var(--color-text);font-weight:var(--fw-black)}
/* R·H·E·B 열 */
.sb-th-rhe,.sb-td-rhe{
  min-width:26px;width:26px;
  font-weight:var(--fw-black);
}
.sb-th-rhe{color:var(--color-muted)}
.sb-td-rhe{color:var(--color-text)}
.sb-td-rhe.sb-r{font-size:var(--fs-12)}

/* 메타라인 (이닝 뱃지 + 장소 + BSO 도트) — 카드 안 하단 */
.metaLine{
  display:flex;align-items:center;gap:var(--g8);
  padding:var(--g8) var(--g16);background:var(--color-card);
  border-top:1px solid rgba(0,0,0,.04);
}
/* BSO 도트 */
.g-bso{display:flex;gap:var(--g8);align-items:center;margin-left:auto;flex-shrink:0}
.bso-g{display:flex;align-items:center;gap:var(--g4)}
.bso-l{font-size:var(--fs-10);font-weight:var(--fw-black);color:var(--color-muted)}
.bso-d{width:var(--g8);height:var(--g8);border-radius:50%;background:var(--color-line)}
.bso-d.b{background:#22C55E}
.bso-d.s{background:#FBBF24}
.bso-d.o{background:#EF4444}

/* 타석/투수 표시 */
.g-atbat{
  font-size:var(--fs-12);font-weight:var(--fw-black);
  color:rgba(255,255,255,.85);background:transparent;
  padding:0;border-radius:0;margin-top:var(--g4);
  display:flex;align-items:center;gap:3px;
}
.g-atbat .tri{font-size:7px;color:rgba(255,255,255,.6);margin-right:var(--g4)}
.g-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);
  font-size:8px;font-weight:900;color:rgba(255,255,255,.9);
  flex-shrink:0;line-height:1;
  padding-top:0.5px;
}
.g-sub{
  font-size:10px;font-weight:700;color:rgba(255,255,255,.6);
}
.statusPill{
  display:inline-flex;align-items:center;
  padding:var(--g4) var(--g8);border-radius:var(--g8);
  font-size:var(--fs-12);font-weight:var(--fw-black);
  letter-spacing:var(--ls-snug);
  background:var(--color-live);color:#000;
  flex-shrink:0;
}
.statusPill.isGray{background:var(--color-line);color:var(--color-status-gray-text)}
.metaText{
  flex:1;min-width:0;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;
  font-size:var(--fs-12);color:var(--color-muted);font-weight:var(--fw-bold);
}

/* ═══ 리스트 행 (라인업 / 응원가 / 공통) ═══ */
.app_list{min-height:var(--h-row)}
.app_listRow{
  display:flex;align-items:center;gap:var(--g12);
  padding:var(--g12) var(--g16);border:0;border-radius:0;
  background:var(--color-bg);min-height:var(--h-row);
  margin-bottom:0;box-shadow:none;
  border-bottom:1px solid var(--color-line);
  transition:transform .1s;
}
.app_listRow.is-clickable{cursor:pointer}
.app_listRow.is-clickable:active{transform:scale(.99)}

.app_list-left{display:flex;align-items:center;gap:var(--g12);flex:1;min-width:0}

/* 번호 — 동그라미 없이 숫자만 */
.app_list-number{
  width:var(--g20);
  display:grid;place-items:center;
  font-size:var(--fs-14);font-weight:var(--fw-bold);
  color:var(--color-muted);flex-shrink:0;
  background:none;border-radius:0;
}
.app_list-number.seqnum{color:var(--color-muted2);background:none}
.app_list-number.bordernum{color:var(--color-muted)}

.app_list-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--fs-16);font-weight:var(--fw-heavy);
}

/* 플레이 버튼 (세모) — 팀컬러 유지 */
.app_playMark{
  width:var(--g28);height:var(--g28);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:color-mix(in srgb,var(--color-teamc) 10%,white);
  color:var(--color-teamc);font-size:0;line-height:0;
  margin-left:auto;
}
.app_playMark::after{
  content:'';display:block;
  width:0;height:0;
  border-left:var(--g8) solid var(--color-teamc);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  margin-left:2px;
}

/* ═══ 마이라인업 행 ═══ */
.ml-row{display:flex;align-items:center;gap:var(--g12);padding:0}
.ml-row.app_listRow{
  padding:var(--g12) var(--g16);
  background:var(--color-bg);
  border-radius:0;border-bottom:1px solid var(--color-line);
  margin-bottom:0;box-shadow:none;
}
.ml-row.is-pressed{background:var(--color-line)}

.ml-zone{
  border:0;background:transparent;padding:0;border-radius:0;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  align-self:stretch;display:flex;align-items:center;
}
.ml-grip{
  flex:0 0 auto;opacity:.9;cursor:grab;
  color:rgba(15,23,42,.18);touch-action:none;user-select:none;
}
.ml-grip .material-symbols-outlined{font-size:var(--fs-14);line-height:1;font-variation-settings:'wght' 200}

/* 마이라인업 번호 — 동그라미 없이 숫자만 */
.ml-order{
  width:var(--g20);
  display:grid;place-items:center;
  font-size:var(--fs-14);font-weight:var(--fw-bold);
  color:var(--color-muted2);flex-shrink:0;
  background:none;border-radius:0;
}

.ml-main{
  margin-left:0;flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:var(--g12);
  text-align:left;padding:0;
}

/* 이름+팀명 세로 배치 */
.ml-left{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.ml-left .ml-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ml-name{
  margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;font-size:var(--fs-16);font-weight:var(--fw-heavy);
}
.ml-team{margin:0;color:var(--ml-accent,var(--color-accent));flex:0 0 auto;font-weight:var(--fw-black);font-size:var(--fs-12)}

/* 마이라인업 세모 — 팀컬러 유지 */
.ml-tri{
  width:var(--g28);height:var(--g28);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:color-mix(in srgb,var(--ml-accent,var(--color-accent)) 10%,white);
}
.ml-tri::after{
  content:'';display:block;
  width:0;height:0;
  border-left:var(--g8) solid var(--ml-accent,var(--color-accent));
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  margin-left:2px;
}
.ml-main .ml-tri{margin-left:auto}

.ml-del{
  display:flex;align-items:center;justify-content:center;
  color:rgba(15,23,42,.25);padding-left:0;padding-right:0;
}
.ml-del .material-symbols-outlined{font-size:var(--fs-14);line-height:1;font-variation-settings:'wght' 200}
#my-lineup-list .ml-del{color:rgba(15,23,42,.25)}

/* ═══ 칩 / 선택 ═══ */
.sel-chip{
  height:var(--g40);border:1.5px solid var(--color-line);border-radius:var(--r-sm);
  background:transparent;font-size:var(--fs-14);font-weight:var(--fw-heavy);
  letter-spacing:var(--ls-snug);color:var(--color-text);
  display:flex;align-items:center;justify-content:center;
  padding:0 var(--g12);cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:all .15s;
}
.sel-chip:active{transform:translateY(1px)}
.sel-chip.active,
.sel-chip-length.active,
[data-defense].active{
  border-color:var(--chipc,var(--color-teamc))!important;
  background:color-mix(in srgb,var(--chipc,var(--color-teamc)) 8%,white)!important;
  color:var(--color-text)!important;
}

.sel-chip-length{
  height:var(--g40);border:1.5px solid var(--color-line);border-radius:var(--r-md);
  background:transparent;font-size:var(--fs-14);font-weight:var(--fw-heavy);
  letter-spacing:var(--ls-snug);color:var(--color-text);
  display:flex;align-items:center;justify-content:flex-start;
  padding:0 var(--g16);width:100%;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .15s;
}
.sel-chip-length:active{transform:translateY(1px)}

/* ═══ 설정 ═══ */
.page.is-loading-team{position:relative}
.settings-spinner{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.8);z-index:10;
}
.settings-wrap{
  width:min(560px,100%);margin:0 auto;
  display:flex;flex-direction:column;
}
.setting-section-header{
  font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--color-muted);
  letter-spacing:.5px;padding:var(--g20) 0 var(--g8);
  display:flex;align-items:baseline;gap:var(--g8);
}
.setting-section-sub{
  font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--color-muted);
}
.setting-list{display:flex;flex-direction:column;}
.setting-block{
  padding:var(--g20);border-radius:var(--r-lg);
  background:var(--color-card);box-shadow:var(--shadow-card);
}
.setting-title{font-weight:var(--fw-black);letter-spacing:var(--ls-snug);font-size:var(--fs-16);margin:0;flex:1}
.setting-sub{color:var(--color-muted);font-weight:var(--fw-bold);font-size:var(--fs-12);margin:calc(var(--g8) * -1) 0 var(--g12);line-height:1.35}
.setting-arrow{color:var(--color-muted);font-size:var(--fs-16);flex-shrink:0;transition:transform .2s}
.setting-row.open .setting-arrow,
.cheer-team-group.open > .setting-row .setting-arrow{transform:rotate(90deg)}

.team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g8)}
.team-tile{
  border:1.5px solid var(--color-line);background:transparent;
  border-radius:var(--r-md);height:var(--g40);
  font-size:var(--fs-14);font-weight:var(--fw-heavy);letter-spacing:var(--ls-snug);
  transition:all .15s;
}
.team-tile.active{
  border-color:var(--chipc,var(--color-teamc));
  background:color-mix(in srgb,var(--chipc,var(--color-teamc)) 8%,white);
}
.team-tile:active{transform:translateY(1px)}

.setting-row{
  display:flex;align-items:center;min-height:var(--h-control);
  border-bottom:1px solid var(--color-line);gap:var(--g12);cursor:pointer;overflow:hidden;
}
.setting-list > .setting-row:last-of-type{border-bottom:none}
.setting-value{font-size:var(--fs-14);font-weight:var(--fw-black);letter-spacing:var(--ls-snug);transition:opacity .15s;flex-shrink:0}
.setting-value:active{opacity:.6}
.setting-value--muted{color:var(--color-muted)}
.setting-dropdown{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s ease,padding .3s ease;padding:0 var(--g16)}
.setting-dropdown.show{max-height:300px;opacity:1;padding:var(--g12) var(--g16)}
.cheer-team-group{border-bottom:1px solid var(--color-line)}
.cheer-team-group:last-child{border-bottom:none}
.cheer-team-body{overflow:hidden;max-height:0;transition:max-height .25s ease-out}
.cheer-team-group.open .cheer-team-body{max-height:500px}
.cheer-divider{display:none}
#cheer-all-teams{padding:0 var(--g16)}
.other-teams-toggle{display:flex;align-items:center;justify-content:center;padding:var(--g12) 0 var(--g4);font-size:var(--fs-12);color:var(--color-muted);font-weight:var(--fw-bold);cursor:pointer;gap:4px;user-select:none}
.other-teams-toggle .arrow-sm{font-size:10px;transition:transform .2s}
.other-teams-section{overflow:hidden;max-height:0;transition:max-height .3s ease-out}
.other-teams-section.show{max-height:2000px}
.chl-wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g8);padding:var(--g12) 0}
.vbtns{display:flex;flex-direction:column;gap:var(--g8)}

.app_card{background:var(--color-card);border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-card)}

/* ═══ 바텀 시트 ═══ */
.sheet{
  position:fixed;inset:0;z-index:100;
  pointer-events:none;transition:opacity .3s;opacity:0;
}
.sheet[aria-hidden="false"]{opacity:1;pointer-events:auto}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);cursor:pointer}
.sheet-panel{
  position:absolute;bottom:0;left:0;right:0;
  max-height:min(85vh,calc(100vh - var(--g24)));
  background:var(--color-card);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--g16);padding-bottom:calc(var(--g16) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.sheet[aria-hidden="false"] .sheet-panel{transform:translateY(0)}
.sheet-handle{width:var(--g40);height:var(--g4);background:var(--color-line);border-radius:2px;margin:0 auto var(--g12)}
.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--g16)}
.sheet-title{font-weight:var(--fw-black);font-size:var(--fs-16);letter-spacing:var(--ls-snug)}
.sheet-view{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet-list{display:flex;flex-direction:column;gap:var(--g4)}

/* ═══ 마이라인업 피커 ═══ */
.mypicker-body{display:flex;flex-direction:column;gap:var(--g12);padding:0}
.myteam-toggles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g8)}
.myteam-divider{height:1px;background:var(--color-line)}
.picker-list{display:block;height:45vh;overflow-y:auto}
.picker-chipgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g8)}

/* ═══ 버튼 ═══ */
.btn{flex:1;height:var(--g44);border:0;border-radius:var(--r-md);font-weight:var(--fw-black);font-size:var(--fs-14);letter-spacing:var(--ls-snug)}
.iconbtn{
  width:var(--g32);height:var(--g32);border:0;background:var(--color-line);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-18);color:var(--color-muted);cursor:pointer;
}
.iconbtn:active{background:var(--color-line)}

/* ═══ 빈 상태 / 로딩 ═══ */
.loadingWrap{display:flex;align-items:center;justify-content:center;padding:var(--g40) var(--g20)}
.spinner{
  width:var(--g24);height:var(--g24);border:3px solid var(--color-line);
  border-top-color:var(--color-accent);border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ Pull-to-refresh ═══ */
.ptr-indicator{position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(0);z-index:9998;pointer-events:none;transition:opacity .2s,transform .15s;opacity:0}
.ptr-spinner{width:28px;height:28px;border:3px solid var(--color-line);border-top-color:var(--color-accent);border-radius:50%;margin:10px auto;animation:spin .8s linear infinite}
.ptr-ready .ptr-spinner{border-top-color:var(--color-text)}

.empty{padding:var(--g40) var(--g20);text-align:center;color:var(--color-muted);font-size:var(--fs-14);font-weight:var(--fw-bold)}

/* ═══ 토스트 ═══ */
.toast{
  position:fixed;left:50%;
  bottom:calc(var(--h-bnav) + 34px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  background:rgba(0,0,0,.28);color:#fff;
  padding:10px 24px;border-radius:var(--r-full);
  font-size:var(--fs-14);font-weight:var(--fw-mid);
  white-space:nowrap;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:10000;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.toast.show{opacity:1}

/* ═══ Material Icons ═══ */
.material-symbols-outlined{
  font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;
  font-size:var(--g24);line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;width:1em;height:1em;
}

/* ═══ 섹션 ═══ */
.section{padding:0}
.section:first-child{margin-top:0}

.app_text{
  padding:0 var(--pad-x);height:var(--h-row);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-12);color:var(--color-muted);font-weight:var(--fw-bold);
  background:var(--color-bg);border:none;text-align:center;
}

@media(max-width:380px){.team-grid{grid-template-columns:repeat(4,1fr)}}

/* ═══ 스켈레톤 ═══ */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel-row{
  height:var(--h-row);padding:0 var(--pad-x);
  display:flex;align-items:center;gap:var(--g12);
}
.skel-bar{
  border-radius:6px;
  background:linear-gradient(90deg,var(--color-line) 25%,#eee 50%,var(--color-line) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}
.skel-row .skel-bar{height:14px}
.skel-row .skel-bar:first-child{width:60%}
.skel-row .skel-bar:last-child{width:20%}
.skel-card{
  height:var(--g100);margin-bottom:var(--g12);border-radius:var(--r-xl);
  border:1px solid var(--color-line);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;position:relative;
}
.skel-card::before,.skel-card::after{
  content:'';display:block;
  background:linear-gradient(90deg,var(--color-line) 25%,#eee 50%,var(--color-line) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;
}
.skel-card::before{border-radius:0}
.skel-card::after{border-radius:0;opacity:.7}

/* ═══ 달력 (바텀시트 내) ═══ */
.cal-nav{display:flex;align-items:center;justify-content:center;gap:4px;margin:var(--g8) 0;padding:0}
.cal-nav-btn{width:36px;height:36px;border:0;background:transparent;color:var(--color-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;-webkit-tap-highlight-color:transparent}
.cal-nav-btn:active{background:var(--color-line)}
.cal-nav-btn.disabled{color:var(--color-line);pointer-events:none}
.cal-nav-btn svg{width:20px;height:20px}
.cal-nav-title{font-weight:var(--fw-black);font-size:var(--fs-16);letter-spacing:var(--ls-snug);color:var(--color-muted);min-width:100px;text-align:center;line-height:36px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.cal-grid--dates{min-height:calc(var(--g44) * 6);align-content:start}
.cal-dow{font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--color-muted);padding:var(--g4) 0}
.cal-cell{height:var(--g44);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cal-cell--clickable{cursor:pointer}
.cal-cell--clickable:active .cal-num{transform:scale(.92)}
.cal-num{width:var(--g28);height:var(--g28);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-14);font-weight:var(--fw-heavy);letter-spacing:var(--ls-snug);transition:transform .1s;box-sizing:border-box}
.cal-dot{width:5px;height:5px;border-radius:50%}
.cal-legend{display:flex;align-items:center;gap:var(--g12);margin-top:var(--g12);padding:var(--g8) var(--g4) 0;border-top:1px solid var(--color-line)}
.cal-legend-item{display:flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--color-muted);font-weight:var(--fw-bold)}
.cal-legend-dot{width:6px;height:6px;border-radius:50%}
.cal-legend-sel{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-11);color:#fff;font-weight:var(--fw-black)}
.cal-legend-today{width:20px;height:20px;border-radius:50%;border:1.5px solid;display:flex;align-items:center;justify-content:center;font-size:var(--fs-11);font-weight:var(--fw-black);background:transparent;box-sizing:border-box}

/* ═══ 유틸리티 클래스 ═══ */
.d-flex-center{display:flex;align-items:center}
.gap-6{gap:6px}
.centered-pad{text-align:center;padding:16px}