/* ============================================================
   투빅스 리더보드
   brand #0E2841 · Pretendard
   ============================================================ */

:root{
  --brand:#0E2841;
  --brand-strong:#0A1E31;
  --brand-soft:#EBF0F6;
  --brand-ink:#FFFFFF;

  --bg:#F7F8FA;
  --card:#FFFFFF;
  --card-2:#F9FAFB;

  --ink:#0E2841;
  --ink-2:#4E5968;
  --muted:#8B95A1;
  --line:#E8EBEE;
  --line-soft:#F1F3F5;

  --pos:#0F7B4F;
  --warn:#C2410C;
  --warn-soft:#FDF2EC;
  --gold:#B47B12;

  --c25:#2A5C99;   --c25-soft:#E4EDF9;
  --c26:#6B45B5;   --c26-soft:#F0E9FA;

  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --sh-1:0 1px 2px rgba(14,40,65,.04), 0 4px 14px rgba(14,40,65,.04);
  --sh-2:0 4px 14px rgba(14,40,65,.07), 0 18px 46px rgba(14,40,65,.10);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#5B92CC;
    --brand-strong:#7BAAE0;
    --brand-soft:#152A3D;
    --brand-ink:#08141F;

    --bg:#0A121B;
    --card:#101C28;
    --card-2:#14212E;

    --ink:#E9EEF4;
    --ink-2:#AFBECC;
    --muted:#7B8794;
    --line:#1D2C3A;
    --line-soft:#182533;

    --pos:#4BB98A;
    --warn:#E38055;
    --warn-soft:#2A1A12;
    --gold:#D7A54A;

    --c25:#7FB0E6;   --c25-soft:#16293C;
    --c26:#B39BEB;   --c26-soft:#241C3A;

    --sh-1:0 1px 2px rgba(0,0,0,.24), 0 4px 14px rgba(0,0,0,.20);
    --sh-2:0 6px 18px rgba(0,0,0,.34), 0 20px 50px rgba(0,0,0,.34);
  }
}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
    "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:15px; line-height:1.65; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}

/* ---------------- header ---------------- */
header{position:relative;overflow:hidden;background:#0E2841;color:#fff;padding:38px 0 0}
/* hello_cut.webp = hello.mp4 배경 제거 + 상반신 크롭 (투명 애니메이션) → 헤더 하단에서 올라온 모습 */
.mascot-head{
  position:absolute;right:max(24px,calc(50% - 530px + 24px));bottom:0;
  height:168px;width:auto;pointer-events:none;user-select:none;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.28));
}
/* z-index를 두지 않아야 로고의 screen 블렌딩이 헤더 배경과 섞임 (DOM 순서상 마스코트보다 위) */
header .wrap{position:relative}
/* logo_left.png는 검은 배경 + 흰 글자 → screen으로 검은색을 헤더 색에 녹이고, 여백은 음수 마진으로 잘라냄 */
header h1.logo{margin:0;line-height:0}
header h1.logo img{
  display:block;height:124px;width:auto;max-width:none;
  margin:-29px -12px -34px -12px;mix-blend-mode:screen;
}

.brandmark{
  font-size:11px;font-weight:700;letter-spacing:.18em;
  color:rgba(255,255,255,.40);margin-bottom:13px;
}
header h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.04em;color:#fff}

.facts{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.fact{
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.70);
  padding:4.5px 11px;border-radius:7px;
  font-size:12.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;
}

.tabs{display:flex;gap:28px;margin-top:28px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;background:none;border:0;padding:0 0 15px;
  font:inherit;font-size:15px;font-weight:600;letter-spacing:-.02em;
  color:rgba(255,255,255,.52);cursor:pointer;white-space:nowrap;transition:color .16s;
}
.tab::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;
  background:#fff;border-radius:2px 2px 0 0;transform:scaleX(0);
  transition:transform .24s cubic-bezier(.2,.8,.3,1);
}
.tab:hover{color:rgba(255,255,255,.84)}
.tab.active{color:#fff}
.tab.active::after{transform:scaleX(1)}

main.wrap{padding:44px 24px 110px}
/* 탭 전환: 패널의 블록들이 위에서부터 차례로 페이드인 */
.panel{display:none}
.panel.active{display:block}
.panel.active > *{animation:rise .5s cubic-bezier(.2,.8,.3,1) both}
.panel.active > :nth-child(2){animation-delay:.05s}
.panel.active > :nth-child(3){animation-delay:.10s}
.panel.active > :nth-child(4){animation-delay:.15s}
.panel.active > :nth-child(5){animation-delay:.20s}
.panel.active > :nth-child(6){animation-delay:.25s}
.panel.active > :nth-child(n+7){animation-delay:.30s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel.active > *{animation:none}}

/* ---------------- typography ---------------- */
h2{font-size:19px;font-weight:700;letter-spacing:-.03em;margin:56px 0 14px}
h2:first-child{margin-top:0}
h3{font-size:16px;font-weight:700;letter-spacing:-.025em;margin:32px 0 10px}
p{margin:10px 0;color:var(--ink-2)}
b,strong{font-weight:700;color:var(--ink)}
.note{color:var(--muted);font-size:13.5px;line-height:1.6}
.hint{color:var(--muted);font-weight:500;font-size:13px;letter-spacing:-.01em}
code{
  background:var(--card-2);border:1px solid var(--line-soft);
  padding:1.5px 6px;border-radius:6px;font-size:12.5px;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  color:var(--ink);
}
ol,ul{padding-left:20px;margin:10px 0;color:var(--ink-2)}
li{margin:6px 0}

/* ---------------- table ---------------- */
table{
  width:100%;border-collapse:separate;border-spacing:0;margin:12px 0;
  font-size:14px;background:var(--card);border-radius:var(--r-md);
  box-shadow:var(--sh-1);overflow:hidden;
}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft)}
th{
  background:var(--card-2);font-weight:600;font-size:12.5px;color:var(--muted);
  letter-spacing:.01em;white-space:nowrap;
}
td{color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .14s}
tbody tr:hover{background:var(--card-2)}
td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.table-scroll{overflow-x:auto;margin:12px 0;border-radius:var(--r-md)}
.table-scroll table{margin:0}

pre.box{
  background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh-1);
  padding:18px 20px;overflow-x:auto;font-size:13px;line-height:1.75;margin:12px 0;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;color:var(--ink-2);
}

/* ---------------- form ---------------- */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:26px 28px;margin:12px 0}
label{display:block;font-weight:600;font-size:14px;letter-spacing:-.02em;margin:18px 0 7px;color:var(--ink)}
label:first-child{margin-top:0}

input[type=text]{
  width:100%;max-width:340px;padding:13px 15px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font:inherit;font-size:15px;
  transition:border-color .16s, box-shadow .16s;
}
input[type=text]::placeholder{color:var(--muted)}
input[type=text]:focus{
  outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brand) 14%,transparent);
}
input[type=file]{
  width:100%;font-size:13px;color:var(--muted);
  padding:11px;border:1.5px dashed var(--line);border-radius:var(--r-sm);
  background:var(--card-2);cursor:pointer;transition:border-color .16s;
}
input[type=file]:hover{border-color:var(--brand)}
input[type=file]::file-selector-button{
  border:0;background:var(--brand-soft);color:var(--brand);
  padding:6px 13px;border-radius:7px;margin-right:11px;
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}
button.primary{
  margin-top:22px;background:var(--brand);color:var(--brand-ink);border:0;
  padding:14px 30px;border-radius:var(--r-sm);
  font:inherit;font-size:15px;font-weight:700;letter-spacing:-.02em;cursor:pointer;
  transition:transform .12s, box-shadow .18s, opacity .16s;
}
button.primary:hover{box-shadow:0 5px 18px color-mix(in srgb,var(--brand) 28%,transparent);transform:translateY(-1px)}
button.primary:active{transform:translateY(0)}
button.primary:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}

button.ghost{
  background:var(--card);border:1px solid var(--line);color:var(--ink-2);
  padding:8px 15px;border-radius:9px;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:border-color .16s,color .16s;
}
button.ghost:hover{border-color:var(--brand);color:var(--brand)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:14px 0}
.row-between h2{margin:0}

/* ---------------- message ---------------- */
.msg{border-radius:var(--r-md);padding:17px 20px;margin:18px 0;font-size:14px;line-height:1.7}
.msg.ok{background:var(--card);box-shadow:var(--sh-1);color:var(--ink-2)}
.msg.err{background:var(--warn-soft);color:var(--warn)}
.msg b{font-variant-numeric:tabular-nums;color:var(--ink)}
.msg.err b{color:var(--warn)}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:8px 0 22px}
.stat{background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:18px 20px}
.stat .k{font-size:12.5px;color:var(--muted);font-weight:500;letter-spacing:-.01em}
.stat .v{font-size:27px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:5px;color:var(--ink)}

/* ---------------- leaderboard ---------------- */
.rk{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 7px;border-radius:9px;
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--card-2);color:var(--muted);
}
.rank-1 .rk{background:var(--gold);color:#fff}
.rank-2 .rk{background:#98A5B3;color:#fff}
.rank-3 .rk{background:#C08A5E;color:#fff}
.rank-1 td,.rank-2 td,.rank-3 td{font-weight:600}
.tname{color:var(--ink);font-weight:600}
.cohort{
  display:inline-block;padding:2px 8px;border-radius:999px;
  background:var(--brand-soft);color:var(--muted);
  font-size:.82em;font-weight:600;white-space:nowrap;
}
/* 기수별 배지 색 */
.cohort.c25{background:var(--c25-soft);color:var(--c25)}
.cohort.c26{background:var(--c26-soft);color:var(--c26)}

.badge{
  display:inline-block;padding:3px 10px;border-radius:20px;
  font-size:11.5px;font-weight:600;letter-spacing:-.01em;
  background:var(--card-2);color:var(--muted);
}
.badge.scored{background:color-mix(in srgb,var(--pos) 12%,transparent);color:var(--pos)}
.badge.invalid,.badge.error{background:var(--warn-soft);color:var(--warn)}

/* ---------------- modal ---------------- */
.overlay{
  position:fixed;inset:0;background:color-mix(in srgb,var(--brand) 42%,transparent);
  backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;
  z-index:60;animation:fade .18s ease;
}
.overlay[hidden]{display:none!important}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--card);border-radius:24px;padding:30px 34px 30px;text-align:center;
  width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow-y:auto;
  box-shadow:var(--sh-2);animation:pop .26s cubic-bezier(.2,.9,.3,1);
}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.modal h3{margin:18px 0 8px;font-size:17px;font-weight:700;letter-spacing:-.03em}
.modal p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.65}
.loading{width:240px;max-width:100%;height:auto;display:block;margin:-6px auto 0}
.loading[hidden]{display:none}

.empty{
  color:var(--muted);font-size:14px;padding:40px 20px 34px;text-align:center;
  background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh-1);
}
.empty img{height:96px;width:auto;opacity:.85;margin-bottom:4px}
.empty p{margin:0;color:var(--muted);font-size:14px}

.demo-banner{
  margin-top:20px;background:var(--warn-soft);color:var(--warn);
  border-radius:var(--r-md);padding:14px 18px;font-size:13.5px;font-weight:500;
}

/* ---------------- story ---------------- */
.story{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:34px 38px;margin-bottom:0}
.story-h{margin:0 0 6px;font-size:22px;font-weight:800;letter-spacing:-.04em}
.story h3{color:var(--brand);margin:32px 0 10px}
.story p{font-size:15px;line-height:1.8}
.story .closing{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft);font-weight:700;color:var(--ink)}

.story .hint{display:inline-block;margin-top:4px;line-height:1.7}

/* ---------------- responsive ---------------- */
@media (max-width:640px){
  .wrap{padding:0 18px}
  main.wrap{padding:30px 18px 80px}
  header{padding-top:28px}
  header h1{font-size:22px}
  .facts{gap:6px;margin-top:13px}
  .fact{font-size:11.5px;padding:4px 10px}
  .tabs{gap:20px;margin-top:22px}
  .tab{font-size:14px}
  .story{padding:24px 22px}
  .card{padding:22px 20px}
  .modal{padding:26px 22px 30px;margin:0 20px}
  .mascot-head{height:88px;right:4px}
  header .facts{padding-right:92px}   /* 마스코트 자리 비우기 */
  header h1.logo img{height:84px;margin:-20px -8px -23px -8px}
  h2{font-size:17.5px;margin-top:44px}
}

/* ============================================================
   대회 소개 · 규칙
   ============================================================ */
.fact.closed{border-color:rgba(255,160,120,.6);color:#FFC2A6}
.story-img{display:block;width:100%;max-height:300px;object-fit:cover;object-position:center top;
  border-radius:var(--r-md);margin:0 0 24px}
a{color:var(--brand);font-weight:600;text-underline-offset:3px}
.mono{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}

/* ---------------- 한눈에 보기 ---------------- */
/* 하나의 카드를 1px 헤어라인으로 나눈 스펙 시트 형태 */
.glance{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:16px 0;
  background:var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
}
.glance-item{
  position:relative;background:var(--card);padding:22px 24px 24px;
  display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;align-content:start;
  transition:background .2s;
}
.glance-item::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;
  background:var(--tint);transform:scaleY(0);transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.glance-item:hover{background:var(--card-2)}
.glance-item:hover::before{transform:scaleY(1)}
.g-ico{
  grid-column:1;grid-row:1;width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  background:color-mix(in srgb,var(--tint,#3B82F6) 12%,transparent);
}
.glance-item:nth-child(1){--tint:#EF4444}
.glance-item:nth-child(2){--tint:#3B82F6}
.glance-item:nth-child(3){--tint:#10B981}
.glance-item:nth-child(4){--tint:#F59E0B}
.glance-item:nth-child(5){--tint:#8B5CF6}
.glance-item:nth-child(6){--tint:#EAB308}
.g-k{grid-column:2;grid-row:1;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:-.01em}
.g-v{grid-column:1 / -1;font-size:19px;font-weight:800;letter-spacing:-.035em;color:var(--ink);margin-top:14px;
  font-variant-numeric:tabular-nums;line-height:1.35}
.g-s{grid-column:1 / -1;font-size:13px;color:var(--muted);margin-top:5px;line-height:1.55}
.g-s code{font-size:11.5px}

/* ---------------- 일정 (스텝) ---------------- */
.steps{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step{position:relative;margin:0;display:flex;flex-direction:column}
.step-rail{position:relative;height:36px;display:flex;align-items:center;margin-bottom:14px}
/* 선은 점 중심에서 다음 점까지 (점이 위에 덮임). 마지막 단계는 카드 끝까지 이어지며 흐려짐 */
.step-rail::after{content:"";position:absolute;left:18px;right:-16px;top:50%;height:2px;border-radius:2px;background:var(--line)}
.step:last-child .step-rail::after{right:0;background:linear-gradient(to right,var(--line) 60%,transparent)}
.step-dot{
  position:relative;z-index:1;width:36px;height:36px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
  background:var(--card);border:2px solid var(--line);color:var(--muted);
}
.step.now .step-dot{border-color:var(--brand);color:var(--brand);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 13%,transparent)}
.step.done .step-dot{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.step.done .step-rail::after{background:var(--brand)}
.step-card{
  flex:1;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:18px 20px 20px;
  transition:box-shadow .2s;
}
.step.now .step-card{box-shadow:var(--sh-2)}
.step.done .step-card{opacity:.72}
.step-head{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:22px}
.step-date{font-size:12.5px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.step-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.step-badge:empty{display:none}
.step.now .step-badge{background:var(--brand);color:var(--brand-ink)}
.step.done .step-badge{background:var(--card-2);color:var(--muted)}
.step-title{font-size:16px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-top:8px}
.step-card p{font-size:13.5px;margin:6px 0 0;line-height:1.65}

/* ---------------- 콜아웃 ---------------- */
.note-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-top:56px}
.note-box{
  --tone:var(--brand);
  display:flex;gap:16px;align-items:flex-start;border-radius:var(--r-lg);padding:20px 22px;
  background:var(--card);box-shadow:var(--sh-1);
}
.note-box.danger{background:var(--warn-soft);box-shadow:none}
.note-box.contact{--tone:var(--c26)}
.note-box.danger{--tone:var(--warn)}
.nb-ico{
  flex:none;width:42px;height:42px;border-radius:12px;font-size:21px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--tone) 14%,transparent);
}
.nb-main{min-width:0}
.nb-title{font-weight:800;font-size:15.5px;letter-spacing:-.025em;color:var(--ink);margin-top:2px}
.note-box.danger .nb-title{color:var(--warn)}
.nb-main p{margin:6px 0 0;font-size:14px;line-height:1.7}
.contact-row{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14.5px}
.contact-k{
  font-size:12px;font-weight:600;color:var(--tone);min-width:78px;text-align:center;
  background:color-mix(in srgb,var(--tone) 12%,transparent);padding:3px 10px;border-radius:999px;
}

/* ---------------- 흰색 텍스트 박스 ---------------- */
.tbox{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:24px 28px;margin:14px 0}
.tbox > :first-child{margin-top:0}
.tbox > :last-child{margin-bottom:0}
.tbox h3{margin:26px 0 10px;font-size:15.5px}
.tbox h3 .hint{font-size:12.5px;margin-left:6px;font-weight:500}
.tbox ul,.tbox ol{margin:8px 0}
.tbox ul.rule-list{margin:0}
.tbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0}
.tbox-grid .tbox{margin:0}
/* 박스 안에 들어간 구성요소는 그림자 없이 평평하게 */
.tbox pre.box{box-shadow:none;background:var(--card-2);margin:12px 0}
.tbox .formula-img{box-shadow:none;background:var(--card-2);margin:16px 0 10px}
.tbox .spec{box-shadow:none;margin:14px 0 4px;gap:8px;background:transparent;border-radius:0;overflow:visible}
.tbox .spec-cell{background:var(--card-2);border-radius:var(--r-md)}
.tbox .formula-img figcaption span{background:var(--card)}
.board-note{margin-top:18px}
.board-note ul{font-size:13.5px}
.board-note .note{margin:10px 0 0}

/* ---------------- 규칙 공통 ---------------- */
.sec{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:6px;
  border-radius:8px;background:var(--brand);color:var(--brand-ink);font-size:14px;vertical-align:2px}

ul.rule-list{list-style:none;padding:0}
.rule-list li{position:relative;padding-left:28px}
.rule-list li::before{position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.rule-list li.no::before{content:"✕";background:var(--warn-soft);color:var(--warn)}
.rule-list li.ok::before{content:"✓";background:color-mix(in srgb,var(--pos) 13%,transparent);color:var(--pos)}

/* ---------------- 모델 · 외부 리소스 ---------------- */
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
.res-panel{--tone:var(--pos);background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
}
.res-panel.no{--tone:var(--warn)}
.res-head{padding:14px 20px;background:color-mix(in srgb,var(--tone) 8%,var(--card));border-bottom:1px solid var(--line-soft)}
.res-tag{font-weight:800;font-size:14.5px;letter-spacing:-.02em;color:var(--tone)}
.res-item{display:flex;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.res-item:last-child{border-bottom:0}
.ri-ico{flex:none;width:38px;height:38px;border-radius:11px;font-size:19px;
  display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--tone) 10%,transparent)}
.res-item > div:last-child{min-width:0}
.res-item b{color:var(--ink);font-size:14.5px;letter-spacing:-.02em}
.res-item p{margin:3px 0 0;font-size:13.5px;line-height:1.6}
.res-item p b{font-size:inherit}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chips span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--tone) 11%,transparent);color:var(--tone)}

/* ---------------- 평가 수식 (이미지) ---------------- */
.formula-img{margin:16px 0 8px;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:28px 24px 18px;text-align:center}
.formula-img img{display:block;margin:0 auto;width:100%;max-width:620px;height:auto}
.formula-img figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft)}
.formula-img figcaption span{font-size:12.5px;color:var(--muted);background:var(--card-2);padding:4px 11px;border-radius:8px}
.formula-img figcaption b{color:var(--ink);margin-right:5px}

/* ---------------- 평가 환경 ---------------- */
.spec{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:16px 0 22px;
  background:var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.spec-cell{background:var(--card);padding:22px 14px 20px;text-align:center}
.sp-ico{font-size:26px;line-height:1}
.sp-k{font-size:12px;font-weight:600;color:var(--muted);margin-top:12px}
.sp-v{font-size:18px;font-weight:800;letter-spacing:-.035em;color:var(--ink);margin-top:1px}
.sp-s{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
.sp-s code{font-size:10.5px;padding:1px 5px;word-break:break-all}

/* ---------------- 실격 사유 ---------------- */
.dq{margin:24px 0 0;border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--sh-1);
}
.dq-head{display:flex;align-items:center;gap:14px;padding:18px 22px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--warn) 17%,var(--card)),color-mix(in srgb,var(--warn) 5%,var(--card)))}
.dq-ico{font-size:28px;line-height:1}
.dq-title{font-size:17px;font-weight:800;color:var(--warn);letter-spacing:-.03em}
.dq-sub{font-size:13px;color:var(--ink-2)}
.dq-list{list-style:none;margin:0;padding:0;counter-reset:dq}
.dq-list li{counter-increment:dq;display:flex;align-items:center;gap:12px;margin:0;padding:13px 22px;
  color:var(--ink);font-weight:600;font-size:14.5px;border-top:1px solid var(--line-soft)}
.dq-list li::before{content:counter(dq);flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--warn);color:#fff;font-size:11.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.dq-emo{font-size:17px;width:22px;text-align:center;flex:none}

@media (max-width:860px){
  .glance{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec{grid-template-columns:repeat(3,minmax(0,1fr))}
  .note-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .glance-item{padding:18px 16px 20px}
  .g-ico{width:26px;height:26px;font-size:14px}
  .g-v{font-size:16px;margin-top:12px}
  .steps{grid-template-columns:1fr;gap:0}
  .step{display:grid;grid-template-columns:36px 1fr;gap:14px;padding-bottom:14px}
  .step-rail{height:auto;margin:0;flex-direction:column;align-items:center}
  .step-rail::after{left:50%;right:auto;top:18px;bottom:-14px;width:2px;height:auto;transform:translateX(-50%)}
  .step:last-child .step-rail::after{right:auto;bottom:0;background:linear-gradient(to bottom,var(--line) 60%,transparent)}
  .res-grid{grid-template-columns:1fr}
  .tbox-grid{grid-template-columns:1fr}
  .tbox{padding:20px 18px}
  .spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-cell:last-child{grid-column:1 / -1}
  .formula-img{padding:20px 14px 14px}
  .note-box{padding:18px 16px;gap:12px}
}

/* ============================================================
   제출 폼 · 팝업
   ============================================================ */
label.agree{display:flex;align-items:flex-start;gap:10px;margin-top:22px;font-weight:500;font-size:14px;
  color:var(--ink-2);cursor:pointer;padding:12px 14px;border-radius:var(--r-sm);background:var(--card-2);
  border:1.5px solid var(--line-soft)}
label.agree:has(input:checked){border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
label.agree input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--brand);flex:none;cursor:pointer}
.submit-note{margin:10px 0 0}

.modal-icon{height:92px;width:auto;display:block;margin:0 auto}
.modal-icon[hidden]{display:none}
.modal-body{color:var(--ink-2);font-size:14px}
.modal-body p{margin:8px 0;color:var(--ink-2);font-size:14px}
.modal.bad h3{color:var(--warn)}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:20px}
.modal-actions:empty{display:none}
.modal-actions button{margin:0;min-width:110px;padding:12px 20px;font-size:14.5px}
.modal-actions button.ghost{border-radius:var(--r-sm)}

.quota{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px}
.quota .q{background:var(--card-2);border-radius:var(--r-sm);padding:12px 10px}
.quota .qk{font-size:12px;color:var(--muted);font-weight:600}
.quota .qv{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.quota .qv b{font-size:24px;font-weight:800;letter-spacing:-.03em}
.modal-body .warn-line{color:var(--warn);font-size:13px;font-weight:600}
.score-big{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:10px 0 0}
.score-big span{font-size:13px;font-weight:700;color:var(--muted)}
.score-big b{font-size:38px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
ul.reasons{text-align:left;margin:12px 0;padding:12px 14px 12px 32px;background:var(--warn-soft);
  border-radius:var(--r-sm);color:var(--warn);font-size:13.5px;word-break:break-all}
ul.reasons li{margin:4px 0}

/* ---------------- leaderboard 추가 ---------------- */
table.board th.r{text-align:right}
td.tname,table.board th{white-space:nowrap}
.cnt{color:var(--muted);font-size:13px}
.cnt b{color:var(--ink);font-size:14px}
.cnt.full b{color:var(--warn)}

/* ============================================================
   입장(인증) 화면
   ============================================================ */
.gate-body{min-height:100vh;background:#0E2841;display:flex;align-items:center;justify-content:center;transition:background .45s ease}
.gate-body.launching{background:#091B2E}   /* 다음 화면(인트로) 색으로 미리 맞춰 이어지게 */
.gate{position:relative;width:min(420px,calc(100vw - 32px));padding:110px 0 40px}
.gate-mascot{position:absolute;left:50%;top:0;transform:translateX(-50%);height:130px;width:auto;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.3))}
.gate-card{background:var(--card);border-radius:24px;box-shadow:var(--sh-2);padding:40px 30px 26px;text-align:center}
.gate-card h1{margin:0 0 6px;font-size:23px;letter-spacing:-.04em;color:var(--ink)}
.gate-card p{font-size:14px}

/* 8칸 코드 입력 — 투명 input 이 칸 전체를 덮고, 칸은 값을 보여주기만 한다 */
.otp{position:relative;margin-top:20px}
.otp input{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;
  border:0;padding:0;font-size:16px;cursor:text;  /* 16px: iOS 확대 방지 */
}
.otp-boxes{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.otp-boxes span{
  aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);border-radius:10px;background:var(--card-2);
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-size:22px;font-weight:700;color:var(--ink);
  transition:border-color .14s, box-shadow .14s, background .14s;
}
.otp-boxes span.filled{background:var(--card);border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.otp-boxes span.active{border-color:var(--brand);background:var(--card);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brand) 14%,transparent)}
.otp-boxes span.active:empty::after{content:"";width:2px;height:24px;background:var(--brand);
  animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.otp.error .otp-boxes span{border-color:var(--warn)}
.gate-card .otp-hint{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.gate-card button.primary{width:100%;margin-top:16px}
.gate-msg{min-height:22px;margin-top:12px;color:var(--warn);font-size:13.5px;font-weight:600}
.shake{animation:shake .38s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

@media (max-width:640px){
  .story-img{max-height:200px}
  .quota .qv b{font-size:21px}
  .modal-actions button{min-width:0;flex:1}
  .gate-card{padding:36px 18px 22px}
  .otp-boxes{gap:5px}
  .otp-boxes span{font-size:19px;border-radius:8px}
}

/* ============================================================
   입장 인트로 — 인증 성공 직후 워프 → 로켓 투빅이 → 로고 · 카운트다운 → 메인
   배경은 브랜드 남색 그대로, 로고는 검은 배경이라 screen 으로 녹인다
   ============================================================ */
.gate{transition:opacity .45s ease, transform .6s cubic-bezier(.5,0,.75,0), filter .45s}
.gate-body.launching .gate{opacity:0;transform:scale(.86) translateY(-14px);filter:blur(6px);pointer-events:none}

.intro{display:none}
html.intro-pending{background:#050E19}
html.intro-pending body{overflow:hidden}
html.intro-pending .intro{
  display:block;position:fixed;inset:0;z-index:1000;overflow:hidden;cursor:pointer;color:#fff;
  background:radial-gradient(120% 90% at 50% 50%, #0F2C48 0%, #091B2E 50%, #040B15 100%);
  -webkit-tap-highlight-color:transparent;
}
html.intro-pending .intro.leave{opacity:0;transform:scale(1.04);pointer-events:none;
  transition:opacity .55s ease, transform .55s ease}
.intro-stars{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-flash{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(214,232,255,.95) 0%, rgba(120,170,230,.45) 28%, transparent 62%)}
.intro.flash .intro-flash{animation:intro-flash .75s ease-out forwards}
@keyframes intro-flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* 로켓 탄 투빅이 — 이동 경로와 기울기는 JS 가 화면 크기에 맞춰 --x0/--y0/--x1/--y1/--a 로 넣는다 */
.rocket{position:absolute;left:0;top:0;width:240px;height:100px;pointer-events:none;opacity:0;
  transform:translate(var(--x0),var(--y0)) rotate(var(--a)) scale(var(--s,1))}
.intro.fly .rocket{animation:rocket-fly 1.65s cubic-bezier(.42,.05,.6,.95) forwards}
@keyframes rocket-fly{
  0%  {opacity:1;transform:translate(var(--x0),var(--y0)) rotate(var(--a)) scale(var(--s,1))}
  100%{opacity:1;transform:translate(var(--x1),var(--y1)) rotate(var(--a)) scale(var(--s,1))}
}
.rocket::before{  /* 꼬리 빛줄기 */
  content:"";position:absolute;right:212px;top:43px;width:70vmax;height:14px;border-radius:7px;
  background:linear-gradient(90deg,transparent,rgba(130,180,240,.18) 40%,rgba(255,214,150,.75));
  filter:blur(3px);
}
.rocket svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rocket-bear{position:absolute;left:58px;bottom:47px;height:100px;width:auto;
  transform-origin:50% 100%;animation:bear-bob .32s ease-in-out infinite alternate}
@keyframes bear-bob{from{transform:rotate(-4deg) translateY(0)}to{transform:rotate(3deg) translateY(-3px)}}
.rocket .flame{transform-box:fill-box;transform-origin:100% 50%;animation:flame .09s linear infinite alternate}
@keyframes flame{from{transform:scaleX(1) scaleY(1)}to{transform:scaleX(1.45) scaleY(.82)}}

/* 가운데 로고 · 초대 문구 · 카운트다운 */
.intro-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 16px;text-align:center;pointer-events:none}
.intro-glow{position:absolute;left:50%;top:50%;width:min(760px,120vw);aspect-ratio:2/1;translate:-50% -62%;
  border-radius:50%;background:radial-gradient(closest-side,rgba(91,146,204,.3),transparent);
  opacity:0;transition:opacity 1s ease}
.intro.reveal .intro-glow{opacity:1}
.intro-logo{width:min(600px,88vw);height:auto;   /* logo-center-alpha.png = 검은 배경 제거 + 여백 크롭본 */
  opacity:0;transform:scale(.55);filter:blur(12px)}
.intro.reveal .intro-logo{animation:logo-in .9s cubic-bezier(.2,1.25,.35,1) forwards}
@keyframes logo-in{
  0%{opacity:0;transform:scale(.55);filter:blur(12px) drop-shadow(0 0 0 rgba(160,200,255,0))}
  60%{opacity:1;filter:blur(0) drop-shadow(0 0 26px rgba(160,200,255,.7))}
  100%{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 0 14px rgba(160,200,255,.35))}
}
.intro-title{margin:clamp(14px,3vw,22px) 0 0;color:#fff;font-size:clamp(19px,4.4vw,30px);font-weight:800;letter-spacing:-.035em;line-height:1.35;
  opacity:0;transform:translateY(12px);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.intro-title em{font-style:normal;background:linear-gradient(90deg,#9CC8FF,#FFE1A8);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.intro.invite .intro-title{animation:rise-in .6s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes rise-in{to{opacity:1;transform:none}}

/* 스킵 — 화면 아래 유리 알약. 테두리가 카운트다운만큼 차오르고, 숫자는 바뀔 때 올라온다 */
@property --p{syntax:"<percentage>";inherits:false;initial-value:0%}
.intro-skip{
  position:absolute;left:50%;bottom:max(7vh,calc(env(safe-area-inset-bottom) + 28px));
  display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 7px 0 22px;
  border:0;border-radius:999px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.9);
  font:inherit;font-size:14px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;transform:translate(-50%,10px);transition:background .25s, color .25s, opacity .3s;
}
.intro-skip::before{          /* 진행 테두리 */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from 0deg, rgba(200,224,255,.95) var(--p), rgba(255,255,255,.14) var(--p));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.intro.count .intro-skip{animation:skip-in .6s cubic-bezier(.2,.8,.3,1) forwards}
.intro.count .intro-skip::before{animation:skip-fill 3s linear forwards}
@keyframes skip-in{to{opacity:1;transform:translate(-50%,0)}}
@keyframes skip-fill{to{--p:100%}}
.intro-skip:hover,.intro-skip:focus-visible{background:rgba(255,255,255,.1);color:#fff;outline:none}
.skip-arrow{width:15px;height:15px;transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.intro-skip:hover .skip-arrow,.intro-skip:focus-visible .skip-arrow{transform:translateX(3px)}
.skip-num{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:4px;
  border-radius:50%;background:rgba(255,255,255,.1);overflow:hidden;
  font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;
}
.skip-num span{display:block}
.skip-num span.tick{animation:num-up .38s cubic-bezier(.2,.8,.3,1)}
@keyframes num-up{from{opacity:0;transform:translateY(70%)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .intro-skip{height:44px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .rocket,.rocket::before{display:none}
  .intro-logo{transform:none;filter:none}
  .intro.reveal .intro-logo{animation:fade .5s forwards}
  .intro-title{transform:none}
  .intro-skip{transform:translateX(-50%)}
  .intro.invite .intro-title,.intro.count .intro-skip{animation:fade .5s forwards}
  .skip-num span.tick{animation:none}
  .gate-body.launching .gate{transform:none;filter:none}
}