* { box-sizing: border-box; }

/* 색은 여기서만 정한다 (첫 화면과 같은 어두운 디자인: 짙은 보라 바탕, 보라 = 선택·주요 버튼, 주황 = 강조) */
:root {
  color-scheme: dark;   /* 선택 상자·체크박스·스크롤바도 어둡게 */
  --bar: 44px;
  --list-w: 88px;            /* 왼쪽 계정 목록 폭 (상단바 가운데를 미리보기 칸에 맞출 때도 씀) */
  --bg: #130b2e;
  --panel: #170f36;          /* 상단바·목록 */
  --modal: #1c1440;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #e6e9f2;
  --muted: #8f98b3;
  --brand: #7c5cff;
  --brand-hover: #6a48f5;
  --brand-soft: #b9a8ff;
  --accent: #ff9900;
  --danger: #ff7b7b;
  --danger-fill: #e5484d;
  --ok: #3ddc84;
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}
a { color: var(--brand-soft); }

button, .button {
  font: inherit;
  font-size: 14px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
button:not(.active):hover:not(:disabled), .button:hover { background: var(--surface-hover); }   /* 선택된 버튼은 그대로 */
button:disabled { opacity: 0.4; cursor: not-allowed; }
.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
/* 위 공통 hover 보다 우선하도록 button. 을 붙인다 */
button.primary:hover:not(:disabled), .button.primary:hover { background: var(--brand-hover); }
/* 지우기·끄기처럼 되돌리기 어려운 작업 */
.danger { color: var(--danger); border-color: rgba(255, 123, 123, 0.4); }
button.danger:hover:not(:disabled) { background: rgba(255, 123, 123, 0.12); }
.primary.danger { background: var(--danger-fill); border-color: var(--danger-fill); color: #fff; }
button.primary.danger:hover:not(:disabled) { background: #c93a3f; }
input, select { font: inherit; color: inherit; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; min-width: 0; }
input:focus, select:focus { outline: none; border-color: var(--accent); }
select option { background: var(--modal); }
input[type="checkbox"] { width: 16px; height: 16px; padding: 0; accent-color: var(--brand); }
.muted { color: var(--muted); font-size: 13px; }
.rules { margin: 8px 0 0; padding-left: 18px; line-height: 1.8; }
.error { color: var(--danger); }

/* 상단바: [AI League  DEV·APP] | [폰·태블릿·PC] [새로고침·새 탭] (가운데) | 설정
   왼쪽·오른쪽 칸 폭이 같아서 가운데 묶음이 정확히 가운데 (왼쪽 내용이 넘치면 가운데가 비켜나서 겹치지 않는다).
   왼쪽에 계정 목록이 있는 화면(관리자·앱 구경하기)은 화면 가운데가 아니라 아래 미리보기 칸의 가운데에 맞춘다 (.with-list).
   좁은 화면은 가운데에 둘 자리가 없어서 크기 버튼은 숨기고 새로고침·새 탭을 설정과 함께 오른쪽 끝으로 (아래 @media) */
.bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  height: var(--bar);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
/* 이름: 첫 화면 제목처럼 흰색 → 보라 그라데이션 글자 */
.brand {
  font-weight: 800; letter-spacing: -0.02em; text-decoration: none;
  background: linear-gradient(180deg, #ffffff 20%, #c9d0ff 60%, #8b6dff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand { font-size: 18px; padding-bottom: 2px; }
.bar-start { grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: 16px; }
.bar-center { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 8px; }
.bar-end { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 6px; }
.bar-end:not(:has(*)) { display: none; }   /* 설정이 없는 화면(앱 구경하기): 빈 칸이 간격을 만들지 않게 */
.app-tools { display: flex; align-items: center; }
.app-tools.off { display: none; }   /* 크기 버튼은 APP 화면에서만 (가운데 칸이라 숨겨도 왼쪽·오른쪽은 안 움직인다) */
/* 목록이 있으면 맨 앞에 (목록 폭 − 칸 간격) 칸을 더 둔다 → 가운데 칸이 미리보기 칸 가운데에 온다 */
.bar.with-list { grid-template-columns: calc(var(--list-w) - 12px) 1fr auto 1fr; }
.bar.with-list .bar-start { grid-column: 1 / 3; }
.bar.with-list .bar-center { grid-column: 3; }
.bar.with-list .bar-end { grid-column: 4; }
/* 새로고침·새 탭 묶음 (상단바, 리더보드 미리보기): 크기 버튼 묶음(.devices)과 같은 모양 */
.icon-group { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; }
.icon-group .icon { padding: 2px 6px; border: 0; border-radius: 6px; }   /* 크기 버튼(.device)과 같은 크기 → 두 묶음 높이가 같다 */
.icon-group .icon svg { width: 18px; height: 18px; }
.icon-group .icon[hidden] { display: none; }
.icon-group:not(:has(.icon:not([hidden]))) { display: none; }   /* 버튼이 다 숨겨지면(DEV 화면, 계정 고르기 전) 빈 테두리도 숨긴다 */
.icon { display: inline-flex; padding: 5px; background: transparent; border-color: transparent; color: var(--muted); }
.icon:hover:not(:disabled) { color: var(--text); }
.icon.active { background: var(--brand); border-color: var(--brand); color: #fff; }   /* 교육자료(학사모)를 보고 있을 때 */
.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.devices { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; }
.device { display: inline-flex; padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); }
.device svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.device.active { background: var(--brand); color: #fff; }
.tabs { display: flex; gap: 4px; flex: none; }
.tab { padding: 3px 16px; font-weight: 600; }
.tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 본문: 왼쪽 목록 + 오른쪽 화면 */
.layout { height: calc(100vh - var(--bar)); height: calc(100dvh - var(--bar)); display: grid; grid-template-columns: 1fr; }
.layout.with-list { grid-template-columns: var(--list-w) 1fr; }
.list { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding: 8px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.list button { flex-shrink: 0; text-align: center; padding: 6px 4px; line-height: 1.4; background: transparent; border-color: transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* flex-shrink 0: 계정이 많아도 버튼이 눌려 글자가 잘리지 않고 목록이 스크롤된다 */
.list button.active { background: var(--brand); color: #fff; }
.list button.off:not(.active) { color: var(--muted); text-decoration: line-through; }
.stage { position: relative; min-width: 0; min-height: 0; }
.view { position: absolute; inset: 0; display: flex; justify-content: center; overflow: hidden; }
.view[hidden] { display: none; }
#learn-view iframe, #rules-view iframe { background: var(--bg); }   /* 교육자료·대회 규정이 뜨기 전 흰 화면이 번쩍이지 않게 */
#app-view { background: #0c0620; }   /* 미리보기 바깥 → 폰·태블릿 폭일 때 경계가 보이게 */
#app-view iframe { box-shadow: 0 0 0 1px var(--line-strong); transform-origin: 0 0; }   /* 줄여 보일 때 왼쪽 위 기준 (portal.js fitPreview) */
.view iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.frame-wrap { position: relative; width: 100%; max-width: 100%; height: 100%; transition: width 0.2s; }
.empty { margin: 48px 16px; text-align: center; color: var(--muted); }
.loading { position: relative; }
.loading iframe { visibility: hidden; }   /* 이전 화면은 바로 감춘다 */
.loading::after { content: "불러오는 중…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; background: #0c0620; }

/* 저장·복원 진행 표시: 작업 중 APP·DEV 위를 덮는다 */
.busy { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(19, 11, 46, 0.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.busy[hidden] { display: none; }
.busy-box { width: min(360px, calc(100% - 32px)); display: grid; gap: 10px; text-align: center; }
.progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #a48bff); transition: width 0.4s; }
.progress.warn span { background: var(--danger-fill); }   /* 사용 용량 90% 넘음 */
.job p { margin: 6px 0 0; }
/* 사용 용량(저장공간·메모리·CPU): 이름과 값 한 줄, 그 아래 막대 */
.gauge { margin: 10px 0; }
.gauge-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 14px; }
.gauge-head .muted { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
/* 관리자 설정 맨 위 서버 상태: 폭이 되면 막대를 옆으로 나란히 */
.host { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.host h3 { margin-top: 8px; }
.host .usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); column-gap: 24px; }
.host .gauge { margin: 6px 0; }

/* 모달 */
.modal { border: 1px solid var(--line); border-radius: 16px; padding: 20px; width: min(420px, calc(100vw - 32px)); color: var(--text); background: var(--modal); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); }
.modal.wide { width: min(760px, calc(100vw - 32px)); }
.modal.wide.admin { width: min(1240px, calc(100vw - 32px)); }   /* 관리자 설정: 계정 표 칸이 많다 (좁으면 표만 가로로 밀림) */
.modal::backdrop { background: rgba(4, 7, 16, 0.7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ask p { margin: 4px 0 20px; line-height: 1.6; white-space: pre-line; }   /* 확인 창 문구의 줄바꿈 */
.ask .row.end { margin: 0; }
.ask .modal-head { margin-bottom: 8px; }
.modal { word-break: keep-all; overflow-wrap: anywhere; }   /* 한글은 단어 중간에서 줄바꿈하지 않는다 */
.modal h2 { margin: 0 0 12px; font-size: 20px; }
.modal h3 { margin: 16px 0 6px; font-size: 15px; }
.modal section + section { border-top: 1px solid var(--line); margin-top: 12px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal .modal-head h2 { margin: 0; }   /* 리더보드 본문 제목 여백(.board h2)이 창 머리줄 제목에 걸리지 않게 */
.account { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-weight: 600; }
.account form { margin: 0; }
.stack { display: grid; gap: 12px; }
.stack label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.stack label input { color: var(--text); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.row.end { justify-content: flex-end; }
.file-name { min-width: 0; overflow-wrap: anywhere; }   /* 제출한 앱 소개 자료 파일 이름 (길어도 창 안에서 줄바꿈) */
.check { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.check:has(input:disabled) { opacity: 0.45; }
.msg { min-height: 1.5em; font-size: 14px; }
/* 복원 시점 목록: 다 보이게, 길면 목록 안에서 스크롤 */
.saves { list-style: none; margin: 8px 0; padding: 0; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.saves li { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-top: 1px solid var(--line); font-size: 14px; }
.saves li:first-child { border-top: 0; }
.saves .when { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saves .note { margin-left: 10px; color: var(--brand-soft); }   /* 저장 메모 (길면 … 으로, 마우스를 올리면 전체) */
@media (max-width: 640px) {   /* 폰: 메모는 시각 아래 줄에 */
  .saves .when { white-space: normal; }
  .saves .note { display: block; margin: 2px 0 0; font-size: 12px; }
}
.note-field { display: grid; gap: 6px; margin: 4px 0 14px; font-size: 13px; color: var(--muted); }
.note-field input { width: 100%; box-sizing: border-box; color: var(--text); }
.table-wrap { overflow-x: auto; margin-top: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th { color: var(--muted); font-weight: 600; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3a4258; margin-right: 6px; }
.dot.on { background: var(--ok); box-shadow: 0 0 6px rgba(61, 220, 132, 0.6); }
.cell { display: flex; align-items: center; gap: 6px; }
/* 관리자 표: 상태만 보여 주고, 줄을 누르면 선택된다 (바꾸는 일은 표 위 버튼으로) */
.accounts tbody tr { cursor: pointer; }
.accounts tbody tr.picked > * { background: rgba(124, 92, 255, 0.14); }
.accounts input[type="checkbox"] { display: block; }
.accounts td.online { color: var(--ok); white-space: nowrap; }   /* 접속 중 */
.accounts td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }   /* 저장공간·메모리·CPU·Kiro 크레딧 "몇 % (쓴 양 / 한도)" */
/* 저장 시점 삭제 창: 계정 줄(굵게) 아래에 그 계정의 저장 시점들 */
.pick-all { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.picks { max-height: min(320px, 45vh); }
.picks li { padding: 0; }
.picks label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; }
.picks li:not(.head) label { padding-left: 32px; }
.picks .head { background: var(--surface); font-weight: 600; }
.note { max-width: 260px; margin-top: 4px; font-size: 12px; white-space: normal; }
select.blocked { color: var(--danger); border-color: rgba(255, 123, 123, 0.4); }   /* 개발 막음 */

/* 첫 화면과 단독 화면(로그인·준비 중·권한 없음)의 공통 배경: 보라·주황·파랑 빛 번짐 + 가운데 옅은 격자
   빛 번짐은 화면에 고정된 층(::after)에 그린다. body 배경에 그리면 확대해서 내용이 화면보다 길어질 때 화면 높이마다 반복돼 가로 이음새가 생긴다 */
.landing-page, .page { min-height: 100vh; margin: 0; display: flex; flex-direction: column; background: var(--bg); }
.landing-page { overflow-x: clip; }   /* 제목 뒤 번짐(::before)이 폰 화면 밖으로 1px 나가 가로 스크롤이 생기지 않게 */
.landing-page::after, .page::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(124, 92, 255, 0.42), transparent 62%),
    radial-gradient(900px 700px at 100% 55%, rgba(200, 40, 140, 0.22), transparent 65%),
    radial-gradient(700px 480px at 0% 100%, rgba(70, 60, 220, 0.22), transparent 62%),
    linear-gradient(120deg, #120a2e 0%, #1a0e3c 55%, #2a0f40 100%);
}
.landing-page::before, .page::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}
/* 유리 카드 (첫 화면 카드·로그인 카드 공통) */
.card {
  position: relative; border-radius: 16px; padding: 24px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* 단독 화면(로그인·권한 없음): 상단바 + 가운데 카드 */
.page-main { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px 16px 12vh; }
.card.narrow { width: min(380px, 100%); }
.card h1 { margin: 0 0 12px; font-size: 22px; }
.card .button { display: inline-block; }
.card .primary { width: 100%; padding: 9px 12px; font-weight: 600; }
.card p .button.primary { width: auto; }
.stack label.agree { display: flex; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }   /* 로그인 화면 대회 규정 동의 (로그인할 때마다) */
.agree input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }

/* 첫 화면: 큰 제목 + 카드 3개, 맨 아래 작은 링크 */
.hero { position: relative; z-index: 0; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 56px; padding: 48px 16px; }
.hero .title { position: relative; text-align: center; }
.hero .title::before {   /* 제목 뒤 보랏빛 번짐 */
  content: ""; position: absolute; inset: -30% -15%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.32), transparent);
}
.hero .eyebrow { margin: 0 0 12px; font-size: clamp(18px, 2.4vw, 26px); font-weight: 700; letter-spacing: 0.45em; padding-left: 0.45em; color: var(--accent); }
.hero h1 {
  margin: 0 0 -0.2em; padding: 0 0.06em 0.25em; font-size: clamp(56px, 11vw, 132px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 10%, #c9d0ff 55%, #8b6dff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;   /* g 아랫부분이 잘리지 않게 아래 여백 */
}
.landing-page .cards { width: min(960px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.landing-page .card.big {
  display: grid; justify-items: center; gap: 10px; padding: 36px 20px; text-align: center;
  color: inherit; text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
}
.landing-page .card.big:hover {
  transform: translateY(-3px); background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 153, 0, 0.65);
  box-shadow: 0 0 0 1px rgba(255, 153, 0, 0.25), 0 16px 48px rgba(124, 92, 255, 0.28);
}
.landing-page .card.big svg { width: 42px; height: 42px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.landing-page .card.big strong { font-size: 20px; font-weight: 700; color: #fff; }
.landing-page .card.big span { font-size: 14px; color: var(--muted); }
/* 대회 이름: 둥근 굵은 글꼴(구글 폰트 Jua = 배민 주아체) + 분홍 그림자를 오른쪽 아래로 한 칸 */
.landing-page .intro {
  max-width: 900px; margin: -16px 0 0; text-align: center; word-break: keep-all;
  font-family: "Jua", system-ui, sans-serif; font-weight: 400; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.25; letter-spacing: 0.01em;
  color: #fff; text-shadow: 0.07em 0.07em 0 #ff3d8b;
}
.landing-page .intro br { display: none; }   /* PC 는 한 줄, 좁은 화면은 site.json 의 줄대로 두 줄 */
/* 주최·주관·후원 로고 한 장 (footer-logos.png, 투명 배경·어두운 배경용) */
.landing-page .partners { display: block; width: min(560px, 92vw); height: auto; margin-top: -24px; }   /* 대회 이름 바로 아래 */
.landing-page .rules-link { margin-top: -40px; font-size: 13px; color: var(--muted); text-decoration: none; }   /* 로고 아래 작은 링크 */
.landing-page .rules-link:hover { color: var(--text); text-decoration: underline; }

/* 좁은 화면: 상단바는 새로고침 | APP·DEV | 새 탭·설정 3칸. 계정 목록은 왼쪽에 그대로 두고 폭만 줄인다 */
/* 앱 리더보드 (/leaderboard): 순위표·항목별 순위·교차표 */
.board { position: relative; width: min(1100px, 100%); margin: 0 auto; padding: 20px 16px 64px; display: flex; flex-direction: column; gap: 14px; }
.board-bar, .page-bar { flex: none; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }   /* 리더보드·첫 화면·로그인 상단바: AI League | 화면 이름(가운데) | 오른쪽 */
.bar-title { grid-column: 2; margin: 0; font-size: 16px; font-weight: 700; }
.board-bar select { grid-column: 3; justify-self: end; padding: 4px 8px; font-size: 13px; }
.board h2 { margin: 18px 0 0; font-size: 18px; }
.board .muted { margin: 6px 0 0; }
.board section > .rules { margin: 0 0 12px; }   /* 탭별 설명은 표 위 (앱이 많으면 표가 길어서) */
.board .table-wrap { margin: 0; background: #1a1238; border: 1px solid var(--line); border-radius: 12px; }   /* 불투명: 뒤 격자선이 비치지 않게 */
.board-tabs { flex-wrap: wrap; justify-content: center; }
.standings th, .standings td { text-align: right; }
.standings th:nth-child(-n+2), .standings td.rank, .standings td.app { text-align: left; }
.standings td.rank { font-weight: 700; }
.standings td.points { font-weight: 700; color: #fff; }
.move { margin-left: 4px; font-size: 12px; font-weight: 600; }
.move.up { color: var(--ok); }
.move.down { color: var(--danger); }
.move.same, .move.new { color: var(--muted); }
.cross-wrap { max-height: 75vh; overflow: auto; }   /* 앱이 많으면 표 안에서만 가로·세로로 넘긴다 (머리줄·첫 칸 고정) */
.cross { width: auto; font-size: 12px; }
.cross th, .cross td { padding: 4px 6px; text-align: center; border: 1px solid var(--line); }
.cross thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); color: var(--muted); }
.cross tbody th { position: sticky; left: 0; background: var(--panel); text-align: left; font-weight: 600; }
.cross thead th:first-child { left: 0; z-index: 2; }
/* 가로줄로 읽는다: 한 줄은 같은 배경(줄마다 번갈아), 승·무·패는 글자 색. 고정된 첫 칸이 겹쳐도 비치지 않게 불투명한 색 */
.cross td { min-width: 40px; cursor: pointer; font-weight: 700; }
.cross tbody tr:nth-child(odd) > * { background: #231a4c; }
.cross tbody tr:nth-child(even) > * { background: #19123a; }
.cross tbody tr:hover > * { background: #34286f; }   /* 읽고 있는 줄 */
.cross td.win { color: var(--ok); }
.cross td.draw { color: var(--muted); font-weight: 400; }
.cross td.loss { color: var(--danger); }
.cross td.self { cursor: default; }   /* 자기 자신: 비워 두고 그 줄 색 그대로 */
.cross td[data-a]:hover, .cross td[data-a]:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: -2px; }
#match-body p { margin: 4px 0; line-height: 1.6; }
#match-body .verdict { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--accent); }
/* 경기 창 표: 항목 | 배점 | 두 앱의 승·무·패, 마지막 줄 득점 */
.match-table th, .match-table td { text-align: center; padding: 8px; font-variant-numeric: tabular-nums; }
.match-table th:first-child, .match-table td:first-child { text-align: left; }
.match-table td.win { color: var(--ok); font-weight: 700; }
.match-table td.loss { color: var(--danger); }
.match-table td.draw { color: var(--muted); }
.match-table tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; font-weight: 700; color: #fff; }
.standings th.sortable { cursor: pointer; user-select: none; }   /* 순위·앱: 눌러서 오름·내림차순 */
.standings th.sortable::after { content: " ↕"; color: var(--line-strong); }
.standings th.sortable.asc::after { content: " ▲"; color: var(--brand-soft); }
.standings th.sortable.desc::after { content: " ▼"; color: var(--brand-soft); }
.standings th.sortable:hover { color: var(--text); }
/* 앱 미리보기 창 (리더보드에서 앱 이름을 누르면): 앱 구경하기와 같은 크기 전환 */
.modal.preview { width: min(1200px, calc(100vw - 32px)); height: calc(100vh - 48px); height: calc(100dvh - 48px); max-width: none; max-height: none; padding: 12px 16px 16px; }
.modal.preview[open] { display: flex; flex-direction: column; gap: 10px; }
/* 머리줄: 앱 뷰어 상단바와 같은 배치 — 앱 이름 | [폰·태블릿·PC] [새로고침·새 탭] (가운데) | 닫기 */
.preview .modal-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
.preview .modal-head h2 { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.preview-tools { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 8px; }
.preview [data-close] { grid-column: 3; grid-row: 1; justify-self: end; }
.preview-view { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; overflow: hidden; background: #0c0620; border-radius: 10px; }
.preview-view iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; transform-origin: 0 0; box-shadow: 0 0 0 1px var(--line-strong); }
@media (max-width: 640px) {   /* 폰: 칸을 좁힌다. 미리보기는 화면 전체·폰 크기만 */
  .board { padding: 14px 12px 48px; }
  .standings th, .standings td { padding: 8px 5px; }
  .modal.preview { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; padding: 8px; }
  .preview .devices { display: none; }
  /* 앱 이름 | [새로고침·새 탭] 닫기: 크기 버튼은 숨기고 새로고침·새 탭은 닫기 옆(오른쪽 끝)으로 */
  .preview .modal-head { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
}

/* 대회 규정 (/rules): 저장소의 대회 규정.md 를 읽기 좋은 글로 */
.doc { position: relative; width: min(760px, 100%); margin: 0 auto; padding: 28px 16px 64px; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; }
.doc h1 { margin: 0 0 8px; font-size: 24px; line-height: 1.4; text-wrap: balance; }
.doc h2 { margin: 36px 0 4px; padding-bottom: 6px; font-size: 18px; border-bottom: 1px solid var(--line); }
.doc p { margin: 16px 0 4px; }
.doc ol, .doc ul { margin: 4px 0; padding-left: 22px; }
.doc li { margin: 2px 0; }
.doc strong { color: #fff; }

/* 교육자료 (/learn, 상단바 없음 → /dev 학사모 버튼 안 iframe): 왼쪽 목차 + 오른쪽 자료(Canva) */
.learn { flex: 1; min-height: 0; height: 100vh; height: 100dvh; display: grid; grid-template-columns: 260px 1fr; }
.learn-nav { overflow-y: auto; padding: 16px 10px; display: flex; flex-direction: column; gap: 18px; background: var(--panel); border-right: 1px solid var(--line); }
.learn-nav h2 { margin: 0 0 6px; padding: 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--muted); }
.learn-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.learn-nav a { display: flex; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; }
.learn-nav a:hover { background: var(--surface-hover); }
.learn-nav a.active { background: var(--brand); color: #fff; }
.learn-nav .num { color: var(--muted); font-variant-numeric: tabular-nums; }
.learn-nav a.active .num { color: rgba(255, 255, 255, 0.75); }
.learn-view { min-width: 0; min-height: 0; background: #0c0620; }
.learn-view iframe { width: 100%; height: 100%; border: 0; display: block; }
/* 교육자료 문서 화면 (/learn/<이름>): 왼쪽 마크다운 원문 | 오른쪽 랜더링 (좁으면 위아래) */
.lesson { position: relative; width: min(1280px, 100%); margin: 0 auto; padding: 24px 16px 48px; }   /* relative: 배경 격자(.page::before) 위에 그려 칸 안에 격자가 비치지 않게 */
.lesson h1 { margin: 0 0 16px; font-size: 22px; line-height: 1.4; }
.lesson-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.lesson-tabs [role="tab"] { margin-bottom: -1px; padding: 8px 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; background: none; color: var(--muted); font-weight: 600; }
.lesson-tabs [role="tab"][aria-selected="true"] { color: var(--text); background: var(--panel); border-color: var(--line); }
.lesson-guide { margin: 14px 0; font-size: 14px; color: var(--muted); }
.lesson-guide code { color: var(--text); }
.md-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.learn-page::before, .lesson-page::before { content: none; }   /* 교육자료(목차 화면·문서 화면)는 배경 격자 없이 (격자 층이 iframe 위에 덧그려져 칸이 비쳐 보였다) */
.md-pane { border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.md-pane.md-raw { background: #0e0a20; }   /* 원문: 어두운 편집기 색 (불투명) */
.md-pane.md-shown { background: #fff; color: #1f2330; }   /* 랜더링: 흰 문서 (불투명) */
.md-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 4px 8px 4px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); background: var(--panel); }
.md-head .copy { padding: 4px 10px; font-size: 13px; }
.md-source { margin: 0; padding: 14px 16px; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.md-view { padding: 4px 18px 16px; font-size: 14px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
.md-view h1 { margin: 14px 0 6px; font-size: 22px; }
.md-view h2 { margin: 22px 0 6px; padding-bottom: 4px; font-size: 17px; border-bottom: 1px solid #e3e5ec; }
.md-view h3 { margin: 18px 0 4px; font-size: 15px; }
.md-view p { margin: 8px 0; }
.md-view ul, .md-view ol { margin: 6px 0; padding-left: 22px; }
.md-view table { display: block; max-width: 100%; margin: 8px 0; overflow-x: auto; font-size: 13px; }   /* 좁으면 표만 가로로 밀림 */
.md-view th, .md-view td { padding: 6px 8px; border: 1px solid #d9dce5; white-space: normal; vertical-align: top; }
.md-view th { color: #1f2330; background: #f2f3f7; white-space: nowrap; }
.md-view code { padding: 1px 5px; border-radius: 5px; background: #f0f1f5; font-size: 0.92em; }
.md-view blockquote { margin: 8px 0; padding: 2px 12px; border-left: 3px solid #d0d3de; color: #5a6072; }
@media (max-width: 760px) {
  .md-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {   /* 폰: 목차는 위에 가로로 밀어서 고르는 한 줄, 자료는 그 아래 전체 */
  .learn { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .learn-nav { flex-direction: row; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .learn-nav h2 { display: none; }
  .learn-nav ol { flex-direction: row; gap: 4px; }
  .learn-nav a { white-space: nowrap; padding: 6px 10px; font-size: 13px; }
}

@media (max-width: 359px) {   /* 아주 좁은 폰(폴드 바깥 화면 등): 학생·관리자 상단바는 "AI League" 를 숨겨 DEV·APP·버튼이 겹치지 않게 */
  .bar:has(#open-rules) .brand { display: none; }
}

@media (max-width: 640px) {
  .landing-page .cards { grid-template-columns: 1fr; gap: 12px; }
  .landing-page .card.big { grid-template-columns: auto 1fr; justify-items: start; text-align: left; padding: 18px 20px; column-gap: 16px; row-gap: 2px; }
  .landing-page .card.big svg { grid-row: span 2; width: 34px; height: 34px; }
  .hero { gap: 36px; }
  .landing-page .intro { margin-top: -8px; }
  .landing-page .intro br { display: inline; }
  .ask .row.end { flex-direction: column-reverse; align-items: stretch; }   /* 확인 창 버튼: 주 버튼이 위, 가로 꽉 차게 */
  /* [AI League DEV·APP] ... [새로고침·새 탭] 설정: 가운데에 둘 자리가 없어서 크기 버튼은 숨기고 새로고침·새 탭은 설정과 함께 오른쪽 끝으로 */
  :root { --list-w: 52px; }   /* 계정 이름이 짧아서 목록은 좁게 */
  .bar, .bar.with-list { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; padding: 0 8px; }
  .bar.with-list .bar-start { grid-column: 1; }
  .bar.with-list .bar-center { grid-column: 2; }
  .bar.with-list .bar-end { grid-column: 3; }
  .bar-start { gap: 6px; }
  .bar-end { gap: 2px; }   /* 학사모·규정·설정 세 개 (360px 폰 APP 화면에서도 한 줄) */
  .bar:not(:has(#open-settings)) { grid-template-columns: minmax(0, 1fr) auto; }   /* 설정이 없는 화면(앱 구경하기): 새로고침·새 탭이 바로 오른쪽 끝 */
  .app-tools { display: none; }
  .brand { font-size: 15px; white-space: nowrap; }   /* 좁아도 "AI League" 가 두 줄로 깨지지 않게 */
  .tab { padding: 3px 10px; }
  .bar .tab { padding: 3px 8px; }
  .bar .icon { padding: 3px; }
  .list { padding: 4px; gap: 2px; }
  .list button { padding: 6px 0; font-size: 12px; }
}