/* ============================================================
   TOOLBIT — 서브앱 페이지 공용 스타일
   앱 컬러를 계승한 라이트 에디토리얼.
   각 도구 페이지는 :root 에 --app 하나만 지정하면 된다.
   ============================================================ */

/* ============================================================
   SUB-APP PAGE — 앱 컬러를 계승한 라이트 에디토리얼
   배경 = 앱 컬러 + 크림 화이트 / 타이포·UI·도식 = 다크
   ============================================================ */
:root {
  /* --app 은 각 도구 페이지가 자기 파일에서 지정한다 */
  --paper:   #F8F3EC;   /* Creamy Milk — 지면 */
  --paper-2: #F0E8DC;   /* 한 단계 깊은 미색 — 묶음 컨테이너 */
  --dark:    #101010;
  --line:    rgba(16,16,16,.22);
  --line-2:  rgba(16,16,16,.55);
  --dim:     rgba(16,16,16,.56);
}

body { background: var(--paper); color: var(--dark); }

/* 헤더 — 앱 컬러 위 다크 타이포 */
.head { background: var(--app); border-bottom: var(--w-cmp) solid var(--dark); }
.head .logo { color: var(--dark); }
.head .logo b { color: var(--dark); }
.head .nav a { color: rgba(16,16,16,.6); }
.head .nav a:hover { color: var(--dark); }
/* 언어 전환은 공용 토글이다 — 눌린 쪽을 칠하는 건 썸의 일이다.
   여기서는 밝은 헤더에 맞게 색만 바꾼다 */
.head--light .lang.toggle { border-color: rgba(16,16,16,.26); }
.head--light .lang.toggle:hover { border-color: rgba(16,16,16,.5); }
.head--light .lang.toggle .toggle__thumb { background: var(--dark); }
.head--light .lang.toggle .toggle__o { color: rgba(16,16,16,.6); }
.head--light .lang.toggle .toggle__o:hover { color: var(--dark); }
.head--light .lang.toggle .toggle__o[aria-pressed="true"] { color: var(--app); }

/* 밝은 헤더의 계정 버튼 */
.head--light .acctbtn { border-color: rgba(16,16,16,.26); color: rgba(16,16,16,.62); }
.head--light .acctbtn:hover { border-color: var(--dark); color: var(--dark); }
/* 프로필 테두리는 밝은 헤더에서 다크로. 호버 규칙까지 덮어야 한다 —
   기본 시트의 호버가 미색이라, 안 막으면 컬러 패널 위에서 선이 사라진다 */
.head--light .acctbtn__av,
.head--light .acctbtn.is-user:hover .acctbtn__av { border-color: var(--dark); }
.head .btn { border-color: var(--line-2); color: var(--dark); }
.head .btn:hover { background: var(--dark); color: var(--app); border-color: var(--dark); }

.label { color: var(--dim); }
.idx   { color: var(--dim); }

/* ============ 1. 컬러 패널 ============ */
.panel-color { background: var(--app); border-radius: 0 0 var(--r-l) var(--r-l); --knock: var(--app); }

.spectable {
  display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 24px;
  border-bottom: var(--w-sec) solid var(--dark);
}
@media (max-width: 860px) { .spectable { grid-template-columns: repeat(3, 1fr); row-gap: 4px; } }
@media (max-width: 460px) { .spectable { grid-template-columns: repeat(2, 1fr); } }
.spec-cell { padding: 12px 0 14px; }   /* 칸 사이 간격은 그리드 갭이 만든다 */
.spec-cell__k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .17em; text-transform: uppercase; color: var(--dim); }
.spec-cell__v { font-family: var(--mono); font-size: var(--t-body); letter-spacing: .02em; text-transform: uppercase; margin-top: 6px; }

.hero { display: grid; grid-template-columns: 1fr auto; gap: 30px; padding: 40px 0 0; align-items: start; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 18px; } }

.hero h1 {
  font-family: var(--grotesk); font-weight: 800;
  font-size: clamp(46px, 10vw, 148px); line-height: .86;
  letter-spacing: -0.055em; text-transform: uppercase;
}
html[lang="ko"] .hero h1 { font-family: var(--kr); text-transform: none; letter-spacing: -0.05em; line-height: .98; font-size: clamp(38px, 8vw, 116px); }

.hero__num {
  font-family: var(--grotesk); font-weight: 800;
  font-size: clamp(74px, 15vw, 210px); line-height: .78;
  letter-spacing: -0.07em; color: rgba(16,16,16,.16);
  align-self: end;
}
.hero__mark { width: clamp(56px, 8vw, 92px); }
.hero__mark svg { width: 100%; height: auto; display: block; }

.hero__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 34px 0 42px; border-top: var(--w-sec) solid var(--line-2); margin-top: 34px; }
@media (max-width: 760px) { .hero__foot { grid-template-columns: 1fr; gap: 16px; } }
.hero__lead { font-size: clamp(16px, 1.7vw, 22px); line-height: 1.42; letter-spacing: -0.022em; font-weight: 500; }
.hero__runs { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .15em; text-transform: uppercase; color: var(--dim); line-height: 2; }

/* ============ 2. 도구 ============ */
.layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; }
@media (max-width: 1040px) { .layout { grid-template-columns: 1fr; } .rail { display: none; } }
.main-col { padding-right: 60px; }   /* 세로 구분선 없이 여백만으로 */
@media (max-width: 1040px) { .main-col { padding-right: 0; } }

.tool { padding-bottom: 6px; }
/* 섹션 헤더 — 번호 · 제목 · 메타, 아래 2px 규칙선 */
.sec-head {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: baseline; column-gap: 20px;
  padding: 46px 0 0; margin-bottom: 26px;
}
.sec-head__n {
  font-family: var(--grotesk); font-weight: 800;
  font-size: var(--t-num-l); line-height: .86;
  letter-spacing: -.055em; color: rgba(16,16,16,.3);
  font-variant-numeric: tabular-nums;
}
.sec-head__t {
  font-family: var(--grotesk); font-weight: 800;
  font-size: var(--t-h2); line-height: 1;
  letter-spacing: -.045em; text-transform: uppercase;
}
html[lang="ko"] .sec-head__t { font-family: var(--kr); text-transform: none; letter-spacing: -.04em; }
.sec-head__m {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .17em;
  text-transform: uppercase; color: var(--dim); text-align: right;
}
html[lang="ko"] .sec-head__m { font-family: var(--kr); letter-spacing: .02em; font-size: 12px; text-transform: none; }
@media (max-width: 560px) { .sec-head { grid-template-columns: auto minmax(0,1fr); } .sec-head__m { display: none; } }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 4px; }
.tab {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: .15em;
  padding: 12px 18px; border: var(--w-cmp) solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--dim); cursor: pointer;
}
.tab:hover { color: var(--dark); }
.tab:focus-visible { outline: none; border-color: var(--dark); }
.tab[aria-selected="true"] { background: var(--dark); color: var(--paper); border-color: var(--dark); }
.tab.is-on { background: var(--dark); color: var(--paper); border-color: var(--dark); }
.tab.is-on:hover { color: var(--paper); }

html[lang="ko"] .tab { font-family: var(--kr); letter-spacing: -0.01em; font-size: 12.5px; text-transform: none; }

.fields { display: grid; grid-template-columns: 1fr 46px 1fr; }   /* 입력 밑줄이 이미 블록을 닫는다 — 아래 구분선은 중복 */
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } .op { display: none; } }
.field { padding: 22px 0 24px; }
.field:last-child { padding-left: 44px; }
@media (max-width: 560px) { .field:last-child { padding-left: 0; } }
.field input {
  width: 100%; background: transparent; border: 0; outline: 0;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(28px, 4.4vw, 44px); letter-spacing: -0.045em;
  color: var(--dark); font-variant-numeric: tabular-nums;
  padding: 10px 0 8px; border-bottom: var(--w-cmp) solid var(--dark);
}
.field input:focus { border-bottom-color: var(--app); }
.op { display: grid; place-items: center; font-family: var(--mono); font-size: 17px; color: var(--dim); }

/* 결과 — 색이 칠해진 하나의 컨테이너. 숫자와 도식을 함께 담는다 */
.result {
  background: var(--app); border-radius: var(--r-l);
  padding: 32px 34px 36px;
}
.result__k {
  display: block; font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .18em; text-transform: uppercase; color: rgba(16,16,16,.62);
}
html[lang="ko"] .result__k { font-family: var(--kr); letter-spacing: .04em; font-size: 12px; text-transform: none; }
.result__v {
  font-family: var(--grotesk); font-weight: 800;
  font-size: clamp(48px, 9.5vw, 132px); line-height: .88;
  letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
  margin-top: 12px; color: var(--dark);
}
.result__s { font-size: var(--t-lead); margin-top: 16px; letter-spacing: -0.015em; color: rgba(16,16,16,.72); max-width: 560px; }

.result__bar { margin-top: 36px; padding-top: 26px; border-top: var(--w-sec) solid rgba(16,16,16,.3); }
.bar {
  display: flex; height: 66px; margin-top: 14px;
  border: var(--w-cmp) solid var(--dark); border-radius: var(--r-m); overflow: hidden;
}
.bar__seg {
  display: grid; place-items: center; min-width: 0;
  font-family: var(--grotesk); font-weight: 800;
  font-size: clamp(15px, 2vw, 27px); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--dark);
  transition: flex .25s ease;
}
.bar__seg--fill { background: var(--dark); color: var(--app); border-right: var(--w-cmp) solid var(--dark); }
.bar__cap {
  display: flex; justify-content: space-between; gap: 18px; margin-top: 13px;
  font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .14em;
  text-transform: uppercase; color: rgba(16,16,16,.62);
}
html[lang="ko"] .bar__cap { font-family: var(--kr); letter-spacing: .01em; font-size: 12.5px; text-transform: none; }

/* ============ 4. 본문 ============ */
/* 03 설명 — 항목마다 미색 카드 */
.ex-lead { font-size: var(--t-lead); line-height: 1.5; letter-spacing: -.02em; max-width: 640px; color: rgba(16,16,16,.72); margin-bottom: 26px; }

.explain { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
@media (max-width: 760px) { .explain { grid-template-columns: 1fr; } }

.ex {
  background: var(--paper-2); border-radius: var(--r-l);
  padding: 28px 28px 26px;
  display: grid; grid-template-columns: 46px minmax(0,1fr) auto;
  column-gap: 20px; row-gap: 0; align-content: start;
  --knock: var(--paper-2);
}
.ex__i { grid-column: 1; grid-row: 1; color: var(--dark); align-self: center; }
.ex__n { grid-column: 3; grid-row: 1; align-self: center; }
.ex__i svg { width: 46px; height: 46px; display: block; }
.ex__n {
  font-family: var(--grotesk); font-weight: 800; font-size: var(--t-num-s);
  line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  color: rgba(16,16,16,.3);
}
.ex__t { grid-column: 2; grid-row: 1; align-self: center; font-weight: 800; font-size: var(--t-h3); letter-spacing: -.035em; line-height: 1.15; align-self: start; }
.ex__d { grid-column: 1 / -1; grid-row: 2; font-size: var(--t-body); line-height: 1.58; letter-spacing: -.012em; color: rgba(16,16,16,.68); margin-top: 16px; }
.ex__f {
  grid-column: 1 / -1; grid-row: 3; margin-top: 16px; padding-top: 14px;
  border-top: var(--w-cmp) solid rgba(16,16,16,.16);
  font-family: var(--mono); font-size: 15px; letter-spacing: -.01em;
  color: rgba(16,16,16,.6); font-variant-numeric: tabular-nums;
}
.ex__f b { color: var(--dark); font-weight: 600; }

.faq { border-bottom: var(--w-cmp) solid var(--line); padding: 20px 0; display: grid; grid-template-columns: 34px 1fr; gap: 16px; }
.faq:last-of-type { border-bottom: var(--w-cmp) solid var(--line); }   /* 목록을 닫는 선도 항목 구분선과 동일 */
.faq__n { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em; color: var(--dim); padding-top: 3px; }
.faq h3 { margin: 0 0 7px; font-weight: 700; font-size: calc(var(--t-h3) - 3px); letter-spacing: -.03em; }
.faq p { margin: 0; font-size: var(--t-body); line-height: 1.55; color: rgba(16,16,16,.7); }

/* ============ 레일 · 광고 ============ */
.rail { padding: 30px 0 0 0; position: sticky; top: 90px; align-self: start; }
.rail .ad { height: 600px; }
.ad { border: var(--w-cmp) solid var(--line-2); color: var(--dim); }
.ad--inline { height: 110px; margin: 40px 0 0; }

.rail__list { margin-top: 22px; border-top: var(--w-cmp) solid var(--dark); --knock: var(--paper); }
.rail__list a {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: var(--w-cmp) solid var(--line);
  text-decoration: none; font-size: var(--t-body); letter-spacing: -0.025em; color: var(--dark);
}
.rail__list a:hover { color: var(--app); }
.rail__list svg { width: 22px; height: 22px; display: block; }
.rail__list em { font-style: normal; font-family: var(--mono); font-size: var(--t-micro); color: var(--dim); letter-spacing: .13em; }

/* ============ 푸터 ============ */
.foot { margin-top: 46px; background: var(--dark); color: var(--paper); border-radius: var(--r-l) var(--r-l) 0 0; border-top: 0; }
.foot .logo { color: var(--paper); }
.foot .logo b { color: var(--app); }
.foot .idx { color: rgba(248,243,236,.55); }

/* ============================================================
   도구 공용 패턴 — 여러 도구가 함께 쓴다
   ============================================================ */

/* 큰 텍스트 입력 */
.ta {
  width: 100%; min-height: 240px; resize: vertical;
  background: transparent; border: 0; outline: 0;
  border-bottom: var(--w-cmp) solid var(--dark);
  font-family: var(--kr), var(--grotesk); font-size: 18px; line-height: 1.7;
  letter-spacing: -.015em; color: var(--dark); padding: 18px 0;
}
.ta::placeholder { color: var(--dim); }
.ta:focus { border-bottom-color: var(--app); }

/* 통계 그리드 — 라벨 위, 큰 숫자 아래 */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: 24px; row-gap: 22px; margin-top: 26px; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stat__k { display: block; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .17em; text-transform: uppercase; color: var(--dim); }
html[lang="ko"] .stat__k { font-family: var(--kr); letter-spacing: .02em; text-transform: none; font-size: 13px; }
.stat__v {
  font-family: var(--grotesk); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1; letter-spacing: -.05em; margin-top: 8px;
}

/* 남은 글자수 · 한도 목록 */
.limits { margin-top: 30px; }
.limit {
  display: grid; grid-template-columns: minmax(0,1fr) 92px 120px;
  align-items: center; column-gap: 18px;
  padding: 14px 0; border-bottom: var(--w-cmp) solid rgba(16,16,16,.18);
}
@media (max-width: 620px) { .limit { grid-template-columns: minmax(0,1fr) 88px; } .limit__track { display: none; } }
.limit__n { font-weight: 700; font-size: var(--t-body); letter-spacing: -.025em; }
.limit__v { font-family: var(--mono); font-size: var(--t-body); text-align: right; font-variant-numeric: tabular-nums; }
.limit__track { height: 10px; border-radius: var(--r-pill); background: rgba(16,16,16,.14); overflow: hidden; }
.limit__fill { height: 100%; background: var(--dark); border-radius: var(--r-pill); transition: width .2s ease; }
.limit.is-over .limit__v { color: #B3261E; }
.limit.is-over .limit__fill { background: #B3261E; }

/* 표 — 상환표 등 */
.tbl { width: 100%; border-collapse: collapse; margin-top: 18px; }
.tbl th, .tbl td {
  padding: 11px 14px 11px 0; text-align: right;
  font-family: var(--mono); font-size: var(--t-meta); font-variant-numeric: tabular-nums;
  border-bottom: var(--w-cmp) solid rgba(16,16,16,.16);
}
.tbl th {
  font-size: var(--t-micro); letter-spacing: .15em; text-transform: uppercase;
  color: var(--dim); font-weight: 500;
}
html[lang="ko"] .tbl th { font-family: var(--kr); letter-spacing: .02em; text-transform: none; font-size: 13px; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl__wrap { overflow-x: auto; }

/* 선택 버튼 묶음 (탭과 같은 문법, 여러 줄) */
.seg { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }

/* 보조 입력 줄 — 라벨 + 좁은 입력 */
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 34px; }
.row4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: 26px; }
@media (max-width: 860px) { .row4 { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 4px; } }
@media (max-width: 520px) { .row4 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .row3 { grid-template-columns: 1fr; row-gap: 6px; } }
.field--sm input { font-size: clamp(22px, 3vw, 32px); }
.field input[type="date"] { font-family: var(--mono); }

/* 셀렉트 — 입력 필드와 같은 문법 */
.sel {
  width: 100%; background: transparent; border: 0; outline: 0;
  border-bottom: var(--w-cmp) solid var(--dark); border-radius: 0;
  font-family: var(--grotesk); font-weight: 700;
  font-size: clamp(22px, 3vw, 34px); letter-spacing: -.04em;
  color: var(--dark); padding: 12px 0 10px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
html[lang="ko"] .sel { font-family: var(--kr); }
.sel:focus { border-bottom-color: var(--app); }

/* 좌우 교환 버튼 */
.swap {
  display: grid; place-items: center; align-self: end; margin-bottom: 14px;
  width: 46px; height: 46px; border-radius: 50%;
  border: var(--w-cmp) solid var(--line-2); background: transparent;
  color: var(--dark); cursor: pointer; font-size: 17px;
}
.swap:hover { background: var(--dark); color: var(--paper); border-color: var(--dark); }

/* 결과 알약 목록 (팀 나누기 등) */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* 결과 이름 — 당첨자 추첨기의 슬롯과 같은 컴포넌트. 확정된 값은 채워진 면이다 */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 20px; border: 0; border-radius: var(--r-m);
  background: var(--dark); color: var(--app);
  font-weight: 800; font-size: clamp(16px, 1.9vw, 22px); letter-spacing: -.02em;
}
.result.is-stage .pill { padding: clamp(9px, 1.6vh, 16px) clamp(14px, 1.8vw, 24px); font-size: clamp(15px, 2.2vh, 26px); }
.group { margin-top: 24px; }
.group:first-child { margin-top: 0; }
.group__k {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .17em;
  text-transform: uppercase; color: rgba(16,16,16,.6);
}
html[lang="ko"] .group__k { font-family: var(--kr); letter-spacing: .02em; text-transform: none; font-size: 13px; }

/* 출처 한 줄 */
.source {
  margin-top: 18px; font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
html[lang="ko"] .source { font-family: var(--kr); letter-spacing: .02em; text-transform: none; font-size: 13px; }

/* ============================================================
   칩 입력 — 엔터로 추가, ×로 삭제
   ============================================================ */
.chipbox {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  padding: 16px 0 18px; border-bottom: var(--w-cmp) solid var(--dark);
  min-height: 92px; align-content: flex-start; cursor: text;
}
.chipbox:focus-within { border-bottom-color: var(--app); }
.chipbox input {
  flex: 1; min-width: 180px; border: 0; background: transparent; outline: 0;
  font-family: var(--kr), var(--grotesk); font-size: 19px; letter-spacing: -.02em;
  color: var(--dark); padding: 8px 0;
}
.chipbox input::placeholder { color: var(--dim); }

.nchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 17px; border-radius: var(--r-pill);
  border: var(--w-cmp) solid rgba(16,16,16,.34);
  font-weight: 600; font-size: var(--t-body); letter-spacing: -.02em;
  animation: chipIn .14s var(--ease);
}
@keyframes chipIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.nchip__x {
  width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(16,16,16,.1); color: var(--dark);
  display: grid; place-items: center; cursor: pointer;
}
.nchip__x:hover { background: var(--dark); color: var(--paper); }
.nchip__x svg { width: 12px; height: 12px; display: block; }
.nchip.is-dupe { border-color: #B3261E; color: #B3261E; }

/* ============================================================
   입력 밑줄 정렬
   칸마다 글자 크기가 달라 밑줄 높이가 어긋나던 것을 맞춘다.
   간격은 마지막 칸 패딩이 아니라 그리드 갭이 만든다.
   ============================================================ */
.fields, .fields.row3 { align-items: stretch; column-gap: 44px; }
@media (max-width: 700px) { .fields, .fields.row3 { column-gap: 0; row-gap: 4px; } }

.field { display: flex; flex-direction: column; padding: 22px 0 24px; }
.field:last-child { padding-left: 0; }          /* 마지막 칸만 들여쓰던 것 제거 */
.field input, .field .sel { margin-top: auto; } /* 밑줄을 칸 아래에 붙여 정렬 */
.op { align-self: end; padding-bottom: 26px; }

/* ============================================================
   금액 입력 — 단위 표시와 프리셋
   ============================================================ */
.amount { display: flex; align-items: baseline; gap: 12px; margin-top: auto; }
.amount input { flex: 1; min-width: 0; margin-top: 0; }
.unit {
  font-family: var(--kr), var(--grotesk); font-weight: 700;
  font-size: clamp(16px, 1.8vw, 22px); letter-spacing: -.02em;
  color: rgba(16,16,16,.5); white-space: nowrap; padding-bottom: 8px;
  border-bottom: var(--w-cmp) solid var(--dark);
}

.presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.preset {
  font-family: var(--kr), var(--mono); font-size: 13.5px; font-weight: 600;
  letter-spacing: -.01em; padding: 8px 15px; border-radius: var(--r-pill);
  border: var(--w-cmp) solid rgba(16,16,16,.26);
  background: transparent; color: rgba(16,16,16,.66); cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
.preset:hover, .preset:focus-visible {
  background: var(--dark); color: var(--paper); border-color: var(--dark); outline: none;
}
.preset.is-on { background: var(--dark); color: var(--paper); border-color: var(--dark); }

/* ============================================================
   단위 표시에서만 밑줄 제거 — 입력 필드의 밑줄은 그대로 둔다
   ============================================================ */
.unit { border-bottom: 0; }

/* 프리셋은 더하는 버튼 — 누를 때마다 금액이 쌓인다 */
.preset { position: relative; }
.preset--reset {
  margin-left: auto; border-style: dashed;
  color: rgba(16,16,16,.5);
}
.preset--reset:hover { border-style: solid; }
@media (max-width: 560px) { .preset--reset { margin-left: 0; } }

/* 큰 숫자 뒤에 붙는 단위 — 숫자보다 작고 흐리게 */
.u { font-size: .38em; font-weight: 700; letter-spacing: -.01em; margin-left: .2em; opacity: .55; }
.stat__v .u { font-size: .5em; margin-left: .16em; }

/* ============================================================
   뽑기 연출 — 결과가 즉시 나오면 뽑았다는 느낌이 없다
   섞는 동안 이름이 실제로 자리를 바꾸고, 멈춘 뒤 팀이 차례로 드러난다.
   ============================================================ */
@keyframes drawIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes pillIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* 확정 후: 팀이 위에서부터 하나씩 */
.is-reveal .group {
  animation: drawIn .24s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.is-reveal .pill {
  animation: pillIn .18s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms + var(--j, 0) * 24ms + 40ms);
}

/* 섞는 동안: 애니메이션 없이 이름만 빠르게 갈린다 */
.is-churn .group, .is-churn .pill { animation: none; }
.is-churn .pill { opacity: .62; }
.is-churn { transform: translateZ(0); }

/* 섞는 중 버튼 */
.tab:disabled { opacity: .45; cursor: default; }

/* 결과 숫자가 확정될 때 한 번 튄다 */
@keyframes landNum { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
.is-land { animation: landNum .3s var(--ease); }

/* ============================================================
   사다리타기
   ============================================================ */
.ladder { margin-top: 22px; }
.lad-row {
  display: grid; gap: 6px;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
}
.lad-cell {
  text-align: center; font-weight: 700; font-size: var(--t-body);
  letter-spacing: -.025em; padding: 10px 4px;
  border-radius: var(--r-pill); cursor: pointer;
  border: var(--w-cmp) solid transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .14s, color .14s;
}
.lad-cell--head { border-color: rgba(16,16,16,.3); }
.lad-cell--head:hover { background: rgba(16,16,16,.1); }
.lad-cell.is-on { background: var(--dark); color: var(--app); border-color: var(--dark); }
.lad-cell--foot { color: rgba(16,16,16,.55); border-color: transparent; cursor: default; }
.lad-cell--foot.is-on { color: var(--app); background: var(--dark); }

.lad-svg { width: 100%; height: auto; display: block; margin: 6px 0; }
.lad-svg .rail, .lad-svg .rung {
  stroke: var(--dark); stroke-width: 2; fill: none;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
}
.lad-svg .trace {
  stroke: var(--app); stroke-width: 6; fill: none;
  vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
}
.lad-svg .trace-shadow {
  stroke: var(--dark); stroke-width: 10; fill: none;
  vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   주 액션 — 보조 버튼과 떼어 우측에 다크로 세운다
   ============================================================ */
.tab--primary {
  margin-left: auto;
  background: var(--dark); color: var(--paper); border-color: var(--dark);
}
.tab--primary:hover { background: var(--app); color: #000; border-color: var(--app); }
.tab--primary:disabled { opacity: .45; }
@media (max-width: 560px) { .tab--primary { margin-left: 0; width: 100%; margin-top: 6px; } }

/* 주 액션은 폭과 굵기로 한 번 더 앞선다 */
.tab--primary {
  padding: 15px 40px; min-width: 190px;
  font-weight: 700; font-size: calc(var(--t-micro) + 1px);
  letter-spacing: .14em;
}
html[lang="ko"] .tab--primary {
  font-family: var(--kr); font-weight: 800;
  font-size: 16px; letter-spacing: -.02em;
}
@media (max-width: 560px) { .tab--primary { min-width: 0; padding: 16px 24px; } }

/* ============================================================
   이미지 도구 공용 — 업로드 · 미리보기
   ============================================================ */
.drop {
  display: block; text-align: center; cursor: pointer;
  border: var(--w-sec) dashed rgba(16,16,16,.32); border-radius: var(--r-l);
  padding: 46px 24px; margin-top: 20px;
  transition: background .14s, border-color .14s;
}
.drop:hover, .drop.is-over { background: rgba(16,16,16,.07); border-color: var(--dark); }
.drop__t { font-weight: 800; font-size: var(--t-h3); letter-spacing: -.035em; }
.drop__s { font-size: var(--t-body); color: rgba(16,16,16,.6); margin-top: 8px; }
.drop input[type=file] { display: none; }

.filebar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; font-size: var(--t-body);
}
.filebar__n { font-weight: 700; letter-spacing: -.025em; }
.filebar__d { font-family: var(--mono); font-size: var(--t-meta); color: rgba(16,16,16,.6); }

/* 미리보기 판 — 체커보드로 투명 영역을 보인다 */
.canvaswrap {
  margin-top: 18px; border-radius: var(--r-m); overflow: hidden;
  background-color: rgba(16,16,16,.06);
  background-image:
    linear-gradient(45deg, rgba(16,16,16,.06) 25%, transparent 25%, transparent 75%, rgba(16,16,16,.06) 75%),
    linear-gradient(45deg, rgba(16,16,16,.06) 25%, transparent 25%, transparent 75%, rgba(16,16,16,.06) 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
  display: grid; place-items: center; padding: 18px;
}
.canvaswrap img, .canvaswrap canvas { max-width: 100%; height: auto; display: block; border-radius: 4px; }

/* 슬라이더 */
.slider { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.slider input[type=range] { flex: 1; accent-color: var(--dark); height: 22px; }
.slider__v { font-family: var(--mono); font-size: var(--t-body); min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; }

/* 세이프존 · 썸네일 프레임 */
.frames { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 20px; align-items: flex-start; }
.frame { position: relative; border-radius: 14px; overflow: hidden; background: #111; flex: none; }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame__cap {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em;
  text-transform: uppercase; color: rgba(16,16,16,.55); margin-top: 10px; text-align: center;
}
html[lang="ko"] .frame__cap { font-family: var(--kr); letter-spacing: .02em; text-transform: none; font-size: 13px; }
.frame__unit { display: flex; flex-direction: column; align-items: center; }


.hero h1 { max-width: 15ch; }

/* 리스트에서 이어받는 제목이라 조판을 맞춘다.
   밴드는 Archivo 700 · 소문자, 히어로만 800 대문자면 같은 글자가 아니라
   다른 제목으로 갈아끼워지는 것처럼 보인다. */
.hero h1 {
  font-weight: 700; text-transform: none; letter-spacing: -0.048em;
  font-size: clamp(42px, 8.4vw, 116px); line-height: .94;
}
html[lang="ko"] .hero h1 { font-weight: 800; letter-spacing: -0.045em; }



/* ============================================================
   전환 — 이 페이지가 맡는 몫
   A(홈 리스트) · C(앱 간)는 아래 두 이름으로 모프된다.
   B(그 외 첫 진입)는 모프할 상대가 없으므로 등장 연출을 쓴다.
   ============================================================ */
.panel-color { view-transition-name: tool-panel; }
.hero h1     { view-transition-name: tool-title; max-width: 15ch; }

/* --- 첫 진입: 테마 헤더가 위에서 아래로 드러난다 ---
   패널 자체를 잘라내면 애니메이션이 한 프레임만 늦어도 그 자리에 지면색이
   그대로 노출된다. 패널은 처음부터 칠해두고, 지면색 덮개를 위에서부터 걷는다. */
@keyframes wipeDown {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(100% 0 0 0); }
}
@keyframes headRise {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
html.nav-menu .panel-color::after, html.nav-direct .panel-color::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--paper);
  animation: wipeDown .24s var(--ease) both;
}
html.nav-menu   .panel-color .wrap > *,
html.nav-direct .panel-color .wrap > * {
  animation: headRise .22s var(--ease) both;
}
html.nav-menu   .spectable,  html.nav-direct .spectable  { animation-delay: .04s; }
html.nav-menu   .hero,       html.nav-direct .hero       { animation-delay: .08s; }
html.nav-menu   .hero__foot, html.nav-direct .hero__foot { animation-delay: .12s; }

/* --- 대표 심볼: 첫 진입에서만, 짧게 --- */
@keyframes markPop {
  from { opacity: 0; transform: scale(.72); }
  to   { opacity: 1; transform: none; }
}
.hero__mark { transform-origin: left center; animation: markPop .2s var(--ease) .1s both; }
html.nav-tool .hero__mark { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__mark, .panel-color::after, .panel-color .wrap > * { animation: none !important; }
}

/* ============================================================
   C · 앱 → 앱 : 이전 색을 위에 덮고 걷어낸다
   두 색 사이를 직접 건너므로 중간에 지면색이 비치지 않는다.
   ============================================================ */
.panel-color, .head--light { position: relative; }
/* 헤더 안쪽 컨테이너만 올린다 — `> *` 로 잡으면 절대배치인 .mega 까지
   relative 로 덮어써서 메가 패널이 콘텐츠를 밀어낸다. */
.panel-color > *, .head--light > .wrap { position: relative; z-index: 1; }

@keyframes colorHandoff { to { opacity: 0; } }

/* 패널: 앱 간 이동에서만 (홈에서 올 때는 색이 같아 필요 없다) */
html.nav-tool .panel-color::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--app-from, transparent);
  animation: colorHandoff .24s var(--ease) both;
  pointer-events: none;
}
/* 헤더: 모든 경로에서 — 홈(검정)에서 앱(컬러)으로 올 때도 흰빛이 뜨지 않는다 */
html.has-from .head--light::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--head-from, transparent);
  animation: colorHandoff .22s var(--ease) both;
  pointer-events: none;
}


/* ============================================================
   이미지 트레이 — 붙인 이미지가 쌓이고, 골라서 비교한다
   ============================================================ */
.tray {
  display: flex; gap: 8px; overflow-x: auto; align-items: flex-start;
  padding: 4px 2px 14px; margin-top: 18px; scrollbar-width: thin;
}
.tray::-webkit-scrollbar { height: 6px; }
.tray::-webkit-scrollbar-thumb { background: rgba(16,16,16,.22); border-radius: 3px; }

.trayadd {
  flex: none; width: 190px; aspect-ratio: 16/10; border-radius: var(--r-m); cursor: pointer;
  border: var(--w-sec) dashed rgba(16,16,16,.3); background: transparent;
  display: grid; place-items: center; gap: 4px; color: rgba(16,16,16,.55);
  font-family: var(--kr), var(--mono); font-size: 14px; font-weight: 600; text-align: center;
  transition: background .14s, border-color .14s, color .14s;
}
.trayadd:hover, .trayadd.is-over { background: rgba(16,16,16,.07); border-color: var(--dark); color: var(--dark); }
.trayadd b { display: block; font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: 4px; }

.trayitem {
  position: relative; flex: none; width: 190px; border-radius: var(--r-m); overflow: hidden;
  cursor: pointer; background: #111; border: var(--w-sec) solid transparent;
  transition: border-color .14s, transform .14s;
}
.trayitem img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.trayitem:hover { transform: translateY(-2px); }
.trayitem.is-on { border-color: var(--dark); }
.trayitem.is-on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--app);
}
.trayitem__x {
  position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(16,16,16,.78); color: #F8F3EC;
  display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .14s;
}
.trayitem:hover .trayitem__x, .trayitem__x:focus-visible { opacity: 1; }
.trayitem__x svg { width: 11px; height: 11px; }
.trayitem__n {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em;
  color: rgba(248,243,236,.78); padding: 7px 10px 9px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.trayitem__i {
  position: absolute; top: 7px; left: 7px; min-width: 24px; height: 24px; padding: 0 8px;
  border-radius: var(--r-pill); background: var(--app); color: #101010;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  display: grid; place-items: center;
}
.traybar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--kr), var(--mono); font-size: 13.5px; color: rgba(16,16,16,.6);
}
.traybar b { color: var(--dark); font-weight: 700; }

/* 포커스된 한 장 — 하단 샘플이 이걸 따른다 */
.trayitem.is-focus { border-color: var(--dark); }
.trayitem.is-focus .trayitem__n { color: #F8F3EC; }

/* ============================================================
   결과 액션 — 공유 · 이미지 저장 (모든 도구 공통)
   ============================================================ */
/* 아이콘 버튼 */
.iconbtn {
  width: 40px; height: 40px; flex: none; padding: 0;
  border: var(--w-cmp) solid rgba(16,16,16,.3); border-radius: 50%;
  background: transparent; color: var(--dark); cursor: pointer;
  display: grid; place-items: center; position: relative;
  transition: background .13s, color .13s, border-color .13s;
}
.iconbtn:hover { background: var(--dark); color: var(--app); border-color: var(--dark); }
.iconbtn svg { width: 18px; height: 18px; display: block; }
.iconbtn[data-ok="1"] { background: var(--dark); color: var(--app); border-color: var(--dark); }

/* 툴팁 */
.iconbtn::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: var(--dark); color: var(--paper); border-radius: var(--r-pill);
  font-family: var(--kr), var(--mono); font-size: 12px; font-weight: 600;
  padding: 6px 12px; opacity: 0; pointer-events: none; transition: opacity .13s;
}
.iconbtn:hover::after { opacity: 1; }
.sharewrap:has(.sheet[data-open="1"]) .iconbtn::after { opacity: 0; }

/* 공유 시트 */
.sharewrap { position: relative; }
.sheet {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  background: var(--paper); border-radius: var(--r-l);
  box-shadow: 0 18px 46px rgba(16,16,16,.28);
  padding: 10px; min-width: 232px; display: none;
}
.sheet[data-open="1"] { display: block; }
.sheet__k {
  font-family: var(--kr), var(--mono); font-size: 12px; font-weight: 600;
  color: rgba(16,16,16,.5); padding: 6px 12px 8px;
}
.sheet a, .sheet button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: 0; border-radius: var(--r-m);
  background: transparent; color: var(--dark); cursor: pointer;
  font-family: var(--kr), var(--grotesk); font-size: 15px; font-weight: 600;
  letter-spacing: -.02em; text-align: left; text-decoration: none;
}
.sheet a:hover, .sheet button:hover { background: rgba(16,16,16,.09); }
.sheet svg { width: 19px; height: 19px; flex: none; }
.sheet hr { border: 0; height: var(--w-cmp); background: rgba(16,16,16,.14); margin: 8px 12px; }

.result { position: relative; }
.result__acts { position: absolute; top: 22px; right: 24px; display: flex; gap: 8px; z-index: 3; }
@media (max-width: 560px) { .result__acts { position: static; margin-bottom: 16px; } }

/* ============================================================
   룰렛
   ============================================================ */
.wheelwrap { position: relative; display: grid; place-items: center; margin-top: 6px; }
.wheel { width: min(100%, 420px); height: auto; display: block; }
.wheel__pin {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-top: 26px solid var(--dark); z-index: 2;
}

/* ============================================================
   경주
   ============================================================ */
.track { display: grid; gap: 8px; margin-top: 6px; }
.lane {
  position: relative; height: var(--lane, 60px); border-radius: var(--r-m);
  background: rgba(16,16,16,.09); overflow: hidden;
}
/* 게이트 — 번호와 이름은 출발선 왼쪽 구역에 고정된다 */
.lane__n {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px; z-index: 1;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em;
  color: rgba(16,16,16,.5);
}
html[lang="ko"] .lane__n { font-family: var(--kr); letter-spacing: .01em; font-size: 13px; }
.lane__n b {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0;
  min-width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(16,16,16,.15); color: rgba(16,16,16,.6); flex: none;
}
.lane__n i {
  font-style: normal; display: block; max-width: 64px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.start, .finish {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 1;
  background: repeating-linear-gradient(180deg, #fff 0 7px, transparent 7px 14px);
}
.start { left: 112px; }

/* 주자는 말 하나뿐이다 — 배경도 테두리도 없이 실루엣만 달린다 */
.runner {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 2; will-change: left;
}
.lane.is-win { background: var(--dark); }
.lane.is-win .lane__n { color: rgba(248,243,236,.62); }
.lane.is-win .lane__n b { background: rgba(248,243,236,.18); color: var(--app); }
.finish { right: 12px; }
@media (max-width: 560px) {
  .start { left: 84px; }
  .lane__n { left: 10px; gap: 6px; }
  .lane__n i { max-width: 42px; }
  .horse { --hw: 48px; }
  .lane { height: 50px; }
}

/* ============================================================
   숫자 · 당첨자 슬롯
   ============================================================ */
.slots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.slot {
  min-width: var(--sw, 96px); padding: 18px 22px; border-radius: var(--r-m);
  background: var(--dark); color: var(--app);
  font-family: var(--grotesk); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 4vw, 44px); letter-spacing: -.05em; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; transition: transform .16s var(--ease);
}
html[lang="ko"] .slot { font-family: var(--kr); }
.slot.is-roll { opacity: .78; }
.slot.is-land { transform: scale(1.07); }
.slot--name { font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -.03em; padding: 20px 24px; min-width: 148px; }

/* ============================================================
   전체화면 무대 — 뽑기·랜덤 (data-stage="on")
   결과 패널 하나만 남기고, 도식을 화면 높이에 맞춰 키운다
   ============================================================ */
.result.is-stage {
  width: 100vw; height: 100vh; border-radius: 0;
  padding: clamp(22px, 3.2vw, 60px);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(6px, 1.4vh, 20px); overflow: hidden;
}
.result.is-stage .result__acts { top: clamp(16px, 2.4vh, 28px); right: clamp(18px, 2.4vw, 32px); }
.result.is-stage .result__k { font-size: clamp(11px, 1.3vh, 15px); }
.result.is-stage .result__v {
  font-size: clamp(38px, 6.6vh, 92px); line-height: .94; margin-top: clamp(4px, 1vh, 12px);
}
.result.is-stage .result__s {
  font-size: clamp(13px, 1.7vh, 18px); margin-top: clamp(6px, 1.1vh, 14px); max-width: none;
}
.result.is-stage .result__bar {
  flex: 1; min-height: 0; margin-top: clamp(10px, 2vh, 28px);
  padding-top: clamp(10px, 2vh, 22px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.result.is-stage .stats {
  margin-top: clamp(8px, 1.5vh, 18px); row-gap: clamp(6px, 1.2vh, 16px);
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  max-height: 24vh; overflow: auto; flex: none;
}
.result.is-stage .stat__v { font-size: clamp(16px, 2.2vh, 26px); }
.result.is-stage::after {
  content: 'toolbit.kr'; position: absolute; left: clamp(22px, 3.2vw, 60px);
  bottom: clamp(14px, 2vh, 24px);
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .22em;
  text-transform: uppercase; color: rgba(16,16,16,.4);
}

/* 무대 위 도식 — 화면 높이 기준으로 다시 잡는다 */
.result.is-stage .wheelwrap { width: 100%; height: 100%; }
.result.is-stage .wheel { width: min(58vh, 68vw); }
.result.is-stage .wheel__pin { border-left-width: 17px; border-right-width: 17px; border-top-width: 29px; }

/* 경주는 위로 키우지 않고 가로로 길게 — 높이는 JS 가 계산한 --lane 을 따른다 */
.result.is-stage .result__bar { align-items: stretch; }
.result.is-stage .track {
  width: 100%; gap: clamp(4px, .9vh, 12px); align-content: center; margin: auto 0;
}

.result.is-stage .lane__n { font-size: clamp(12px, 1.7vh, 19px); left: clamp(14px, 2vw, 26px); }
.result.is-stage .lane__n i { max-width: clamp(64px, 9vw, 150px); }
.result.is-stage .lane__n b { min-width: clamp(20px, 2.6vh, 30px); height: clamp(20px, 2.6vh, 30px); font-size: clamp(11px, 1.4vh, 15px); }
.result.is-stage .start { left: clamp(112px, 14vw, 250px); }


.result.is-stage .slots { gap: clamp(8px, 1.6vh, 18px); justify-content: center; }
.result.is-stage .slot {
  font-size: clamp(34px, 7.6vh, 96px); padding: clamp(10px, 2vh, 24px) clamp(14px, 2.2vw, 30px);
  min-width: var(--sw, clamp(92px, 10vh, 140px));
}
.result.is-stage .slot--name { font-size: clamp(22px, 5vh, 60px); }

/* 팀 나누기 — 무대에서는 팀 카드가 가로로 벌어진다 */
.result.is-stage #out { width: 100%; }
.result.is-stage .teams { width: 100%; }

/* ============================================================
   경주마 — 모노톤 실루엣, 네 다리 갤럽
   ============================================================ */
/* 9프레임 스프라이트 스트립 — 창 하나만 열어두고 가로로 밀어 넘긴다.
   0번은 정지 자세라 출발 전에는 네 다리로 곧게 선다. */
.horse {
  --hh: 50px;                      /* 말 키가 기준 — 레인 높이를 따라가야 하므로 */
  --hw: calc(var(--hh) * 1.16);    /* 프레임 비율 116:100 */
  display: block;                  /* span은 인라인이라 width·overflow가 먹지 않는다 */
  width: var(--hw); height: var(--hh);
  overflow: hidden; flex: none;
}
.horse svg { width: calc(var(--hw) * 10); height: 100%; display: block; color: var(--dark); }
/* 레인을 컨테이너로 삼아 말이 레인 높이에 맞춰 따라간다 — 전체화면에서 레인이
   높이를 나눠 가져도 말이 레인을 뚫고 나가지 않는다 */
@supports (container-type: size) {
  .lane  { container-type: size; }
  .horse { --hh: 84cqh; }
}
.track.is-run .horse svg { animation: gallopStrip .72s steps(8) infinite; }

@keyframes gallopStrip {
  from { transform: translateX(calc(var(--hw) * -1)); }   /* 1번 프레임 */
  to   { transform: translateX(calc(var(--hw) * -9)); }   /* 8번 프레임까지 여덟 칸 */
}
@keyframes rearUp { 0% { transform: rotate(0); } 45% { transform: rotate(-15deg); } 100% { transform: rotate(0); } }

.lane.is-win .horse { animation: rearUp .7s var(--ease) 1; transform-origin: 22% 88%; }
.lane.is-win .horse svg { color: var(--app); }

@media (prefers-reduced-motion: reduce) {
  .track.is-run .horse svg, .lane.is-win .horse { animation: none; }
}

/* ============================================================
   실행 바 — 주 액션은 결과 컨테이너 안에 둔다 (사다리의 board 규칙)
   ============================================================ */
.result__run {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap;
  margin-top: clamp(20px, 3vh, 32px); padding-top: clamp(14px, 2vh, 22px);
  border-top: var(--w-sec) solid rgba(16,16,16,.3);
}
/* 보조 동작은 한 덩어리로 붙이고, 주 동작만 떼어 놓는다 */
.result__run .tab:not(.tab--primary) {
  padding: 10px 14px; font-size: calc(var(--t-micro) - .5px); letter-spacing: .1em;
}
html[lang="ko"] .result__run .tab:not(.tab--primary) { font-size: 12.5px; letter-spacing: -.01em; }
.result__run .tab--primary {
  margin-left: 8px; min-width: 128px; padding: 12px 26px;
}
html[lang="ko"] .result__run .tab--primary { font-size: 15px; }
.result__run .iconbtn { width: 38px; height: 38px; }
@media (max-width: 560px) {
  .result__run { gap: 6px; }
  .result__run .tab--primary { margin-left: 0; min-width: 0; flex: 1 1 100%; }
}
.result__run .tab { border-color: rgba(16,16,16,.38); color: rgba(16,16,16,.7); }
.result__run .tab:hover { color: var(--dark); border-color: var(--dark); }
.result__run .tab--primary {
  margin-left: 0; background: var(--dark); color: var(--paper); border-color: var(--dark);
}
.result__run .tab--primary:hover { background: var(--paper); color: var(--dark); border-color: var(--dark); }
.result__run .iconbtn { border-color: rgba(16,16,16,.38); }
.result.is-stage .result__run { margin-top: clamp(10px, 1.6vh, 20px); padding-top: clamp(10px, 1.6vh, 18px); }
@media (max-width: 560px) { .result__run { justify-content: stretch; } }

/* ============================================================
   설정 · 무대 · 결과를 한 컨테이너로 (사다리의 board 규칙)
   위에 설정, 가운데 무대, 아래에 결과와 실행 버튼
   ============================================================ */
.opts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 26px; }
.opt {
  font-family: var(--kr), var(--mono); font-size: 13.5px; font-weight: 600;
  padding: 8px 15px; border-radius: var(--r-pill);
  border: var(--w-cmp) solid rgba(16,16,16,.3); background: transparent;
  color: rgba(16,16,16,.65); cursor: pointer; transition: background .13s, color .13s;
}
.opt:hover { background: rgba(16,16,16,.12); color: var(--dark); }
.opt[aria-pressed="true"] { background: var(--dark); color: var(--app); border-color: var(--dark); }
.opts__k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: rgba(16,16,16,.5); margin-right: 4px; }
html[lang="ko"] .opts__k { font-family: var(--kr); letter-spacing: .02em; text-transform: none; font-size: 13px; }

.opts { margin: 0; }

.stageset { display: grid; gap: 4px; }
.stageset .chipbox { padding: 12px 0 14px; min-height: 74px; }
.stageset .field { padding: 14px 0 16px; }
.stageset .field input { font-size: clamp(22px, 3.2vw, 34px); }
.stageset .row4 .field input { font-size: clamp(20px, 2.4vw, 28px); }
.stageset .opts { margin-top: 14px; }

.result__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  margin-top: clamp(18px, 2.6vh, 28px); padding-top: clamp(14px, 2vh, 20px);
  border-top: var(--w-sec) solid rgba(16,16,16,.3);
}
.result__info { min-width: 0; flex: 1 1 260px; }
.result__foot .result__v { font-size: clamp(30px, 5vw, 66px); margin-top: 10px; }
.result__foot .result__s { margin-top: 10px; font-size: var(--t-body); }
.result__foot .result__run { margin-top: 0; padding-top: 0; border-top: 0; flex: none; }

.result.is-stage .stageset { margin-bottom: clamp(4px, 1vh, 12px); }
.result.is-stage .stageset .chipbox { min-height: 0; padding: 8px 0 10px; }
.result.is-stage .stageset .field { padding: 8px 0 10px; }
.result.is-stage .stageset .field input { font-size: clamp(18px, 2.6vh, 28px); }
.result.is-stage .result__foot { margin-top: clamp(10px, 1.6vh, 18px); padding-top: clamp(10px, 1.6vh, 16px); }
.result.is-stage .result__foot .result__v { font-size: clamp(28px, 5vh, 70px); }
@media (max-width: 560px) {
  .result__foot { flex-direction: column; align-items: stretch; }
  .result__foot .result__run { width: 100%; }
}

/* 설정이 맨 위로 오면서 우상단 아이콘 버튼과 겹친다 — 그만큼 위를 비운다 */
body[data-stage="on"] .result { padding-top: 76px; }
body[data-stage="on"] .result.is-stage { padding-top: clamp(58px, 8vh, 86px); }
@media (max-width: 560px) { body[data-stage="on"] .result { padding-top: 32px; } }

/* ============================================================
   컬러 패널 위의 스트로크 규칙
   중립은 연하게 물러나고, 포커스·선택된 것만 진해진다.
   앱 컬러 배경 위에서는 --app 스트로크가 보이지 않으므로 다크로 바꾼다.
   ============================================================ */
.result, .board {
  --edge:    rgba(16,16,16,.2);    /* 중립 */
  --edge-mid:rgba(16,16,16,.42);   /* 호버 */
  --edge-on: var(--dark);          /* 포커스 · 선택 */
}

:is(.result, .board) :is(.result__bar, .result__foot, .result__run, .board__foot) { border-top-color: var(--edge-mid); }

/* 입력 — 밑줄 하나가 상태를 다 말한다 */
:is(.result, .board) .chipbox { border-bottom-color: var(--edge); }
:is(.result, .board) .chipbox:hover { border-bottom-color: var(--edge-mid); }
:is(.result, .board) .chipbox:focus-within { border-bottom-color: var(--edge-on); }
:is(.result, .board) .field input { border-bottom-color: var(--edge); }
:is(.result, .board) .field input:hover { border-bottom-color: var(--edge-mid); }
:is(.result, .board) .field input:focus { border-bottom-color: var(--edge-on); }
:is(.result, .board) .field input[readonly] { border-bottom-color: var(--edge); color: rgba(16,16,16,.6); }

/* 이름 칩 — 입력의 칩과 결과의 이름은 같은 컴포넌트다 */
:is(.result, .board) .nchip { border-color: var(--edge); }
:is(.result, .board) .nchip:hover { border-color: var(--edge-mid); }
:is(.result, .board) .nchip:focus-within { border-color: var(--edge-on); }
:is(.result, .board) .nchip__x { background: rgba(16,16,16,.08); }
:is(.result, .board) .nchip__x:hover { background: var(--edge-on); color: var(--paper); }

/* 옵션 필 — 중립만 연하게. 선택된 것은 채워지고 라벨은 앱 컬러로 남는다 */
:is(.result, .board) .opt:not([aria-pressed="true"]) {
  border-color: var(--edge); color: rgba(16,16,16,.62); background: transparent;
}
:is(.result, .board) .opt:not([aria-pressed="true"]):hover {
  border-color: var(--edge-mid); background: rgba(16,16,16,.08); color: var(--dark);
}
:is(.result, .board) .opt:focus-visible { outline: none; border-color: var(--edge-on); }
:is(.result, .board) .opt[aria-pressed="true"] {
  background: var(--dark); color: var(--app); border-color: var(--edge-on);
}

/* 실행 바 — 주 액션은 채워진 채로 둔다 */
:is(.result, .board) .result__run .tab:not(.tab--primary) {
  border-color: var(--edge); color: rgba(16,16,16,.66);
}
:is(.result, .board) .result__run .tab:not(.tab--primary):hover {
  border-color: var(--edge-mid); color: var(--dark);
}
:is(.result, .board) .result__run .tab:focus-visible { outline: none; border-color: var(--edge-on); }
:is(.result, .board) .result__run .tab--primary {
  background: var(--dark); color: var(--paper); border-color: var(--edge-on);
}
:is(.result, .board) .result__run .tab--primary:hover {
  background: var(--paper); color: var(--dark); border-color: var(--edge-on);
}
:is(.result, .board) .result__run .tab--primary:disabled { opacity: .45; }
:is(.result, .board) .iconbtn { border-color: var(--edge); }
:is(.result, .board) .iconbtn:hover, :is(.result, .board) .iconbtn:focus-visible { border-color: var(--edge-on); outline: none; }

/* 트랙 · 눈금 같은 중립 표식 */


/* ============================================================
   스태퍼 — 컬러 패널 위 숫자 입력
   네이티브 스피너는 OS 테마를 그대로 가져와 컬러 위에서 튄다.
   ============================================================ */
:is(.result, .board) input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
:is(.result, .board) input[type="number"]::-webkit-outer-spin-button,
:is(.result, .board) input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0;
}

/* 입력과 화살표가 한 줄을 이루고, 밑줄은 그 줄 아래로 간다 */
.field__ctl {
  display: flex; align-items: center; gap: 10px; margin-top: auto;
  border-bottom: var(--w-cmp) solid var(--edge);
}
.field__ctl input { flex: 1; min-width: 0; border-bottom: 0; padding-right: 0; }
:is(.result, .board) .field__ctl:hover { border-bottom-color: var(--edge-mid); }
:is(.result, .board) .field__ctl:focus-within { border-bottom-color: var(--edge-on); }

/* 수직 화살표 — 상자 없이 화살표만 */
.stepper { display: flex; flex-direction: column; gap: 3px; flex: none; padding-bottom: 4px; }
.stepper button {
  width: 26px; height: 15px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; cursor: pointer; color: rgba(16,16,16,.45);
  display: grid; place-items: center; transition: color .12s, background .12s;
}
.stepper button svg { width: 10px; height: 6px; display: block; fill: currentColor; }
.stepper button:hover { color: var(--dark); background: rgba(16,16,16,.1); }
.stepper button:focus-visible { outline: none; color: var(--dark); background: rgba(16,16,16,.14); }
.stepper button:disabled { opacity: .28; cursor: default; background: transparent; color: rgba(16,16,16,.45); }
.result.is-stage .stepper button { height: 13px; }
@media (max-width: 560px) { .stepper button { width: 24px; height: 14px; } }
}

/* 표시 전용 필드 — 고쳐 쓰는 값이 아니므로 밑줄을 두지 않는다 */
.field--plain input, :is(.result, .board) .field--plain input { border-bottom: 0; }

/* 대기 상태의 슬롯 — 결과와 같은 크기의 빈 칸.
   뽑기 전후로 무대 높이가 변하지 않아야 버튼 위치가 흔들리지 않는다 */
.slot.is-idle { background: rgba(16,16,16,.13); color: transparent; }
/* 결과 문장이 비어도 자리는 남는다 — 연출 중 하단이 들썩이지 않게 */
.result__foot .result__s { min-height: 1.55em; }
.result__foot .result__v { min-height: .9em; }


/* ============================================================
   경주 중 사건 — 가속 별 · 넘어짐 · 침
   ============================================================ */
.track { position: relative; }

/* 치고 나갈 때 뒤로 튀는 별 */
.spark {
  position: absolute; z-index: 1; pointer-events: none;
  top: 50%; width: var(--sz, 11px); height: var(--sz, 11px);
  animation: sparkOut .54s var(--ease) forwards;
}
.spark svg { width: 100%; height: 100%; display: block; fill: rgba(16,16,16,.55); }
.lane.is-win .spark svg { fill: rgba(248,243,236,.6); }
@keyframes sparkOut {
  from { opacity: .85; transform: translate(0, -50%) scale(1) rotate(0); }
  to   { opacity: 0; transform: translate(var(--dx), calc(-50% + var(--dy))) scale(.3) rotate(var(--rt)); }
}

/* 넘어졌다 일어나기 — 스프라이트의 마지막 프레임(9번)을 세운다 */
.lane.is-down .horse svg {
  animation: none;
  transform: translateX(calc(var(--hw) * -9));
}
.lane.is-up .horse { animation: riseUp .32s var(--ease) 1; }
@keyframes riseUp {
  from { transform: translateY(4px) rotate(-7deg); }
  to   { transform: none; }
}

/* 침 — 날아가서 맞은 말이 휘청인다 */
.spit {
  position: absolute; z-index: 4; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(16,16,16,.7); pointer-events: none;
  animation: spitFly .44s cubic-bezier(.35,0,.7,1) forwards;
}
@keyframes spitFly {
  from { transform: translate(0, 0) scale(.55); opacity: .9; }
  70%  { opacity: .9; }
  to   { transform: translate(var(--tx), var(--ty)) scale(1.25); opacity: 0; }
}
.lane.is-hit .horse { animation: stagger .5s var(--ease) 1; }
@keyframes stagger {
  0%, 100% { transform: none; }
  30% { transform: rotate(7deg) translateY(2px); }
  65% { transform: rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spark, .spit { display: none; }
  .lane.is-up .horse, .lane.is-hit .horse { animation: none; }
}

/* 침에 맞은 동안 — 레인에 빗금, 말은 흐려지고, 배지가 따라다닌다 */
.lane.is-hit::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(16,16,16,.14) 0 6px, transparent 6px 12px);
  animation: hitIn .14s var(--ease) both;
}
@keyframes hitIn { from { opacity: 0; } to { opacity: 1; } }
.lane.is-hit .horse svg { color: rgba(16,16,16,.4); }
.lane.is-win.is-hit .horse svg { color: rgba(248,243,236,.45); }

.debuff {
  position: absolute; top: -3px; right: -8px; z-index: 5;
  display: flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px 0 5px; border-radius: var(--r-pill);
  background: var(--dark); color: var(--app); white-space: nowrap;
  animation: debuffIn .16s var(--ease) both, debuffOut .18s var(--ease) .52s both;
}
.debuff svg { width: 12px; height: 12px; display: block; fill: currentColor; flex: none; }
.debuff i {
  font-style: normal; font-family: var(--mono); font-size: 10px;
  font-weight: 700; letter-spacing: -.02em;
}
@keyframes debuffIn  { from { opacity: 0; transform: translateY(4px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes debuffOut { to { opacity: 0; transform: translateY(-5px) scale(.92); } }
@media (max-width: 560px) { .debuff i { display: none; } .debuff { padding: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .debuff { animation: none; } }

/* ============================================================
   콘페티 — 결과가 확정될 때 패널 양쪽 아래에서.
   가벼운 재질이라 사출력으로 빠르게 솟았다가, 최고점에서 힘을 잃고
   천천히 돌며 조금 내려오다 사라진다. 축마다 이징이 달라야 하므로
   가로(i) · 세로(u) · 회전(span)을 따로 둔다.
   ============================================================ */
.confetti {
  position: absolute; inset: 0; z-index: 6; overflow: hidden;
  pointer-events: none; border-radius: inherit;
  perspective: 760px; perspective-origin: 50% 100%;
}
/* 가로 — 사출 직후 빠르고, 공기에 밀려 계속 느려진다 */
.confetti i {
  position: absolute; bottom: -10px; display: block;
  animation: cfDrift 2.4s cubic-bezier(.08,.78,.24,1) var(--d, 0ms) forwards;
}
/* 세로 — 빠른 상승, 최고점, 그리고 아주 느린 하강 */
.confetti u {
  display: block; width: var(--w, 12px); height: var(--h, 14px);
  transform-style: preserve-3d;
  animation: cfRise 2.4s cubic-bezier(.05,.86,.24,1) var(--d, 0ms) forwards;
}
.confetti span {
  position: absolute; inset: 0; border-radius: 2px;
  transform-style: preserve-3d;
  animation: cfSpin var(--sp, 1.4s) linear var(--d, 0ms) infinite;
}
.confetti span::before, .confetti span::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  backface-visibility: hidden;
}
.confetti span::before { background: #101010; }
.confetti span::after  { background: rgba(16,16,16,.42); transform: rotateY(180deg); }

@keyframes cfDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--x)); }
}
@keyframes cfRise {
  0%   { transform: translate3d(0, 0, 0); opacity: 1; }
  /* 최고점 — 여기서 이징을 바꿔 낙하를 따로 굴린다 */
  30%  { transform: translate3d(0, var(--y), 90px); opacity: 1;
         animation-timing-function: cubic-bezier(.36,.1,.72,.86); }
  62%  { opacity: .85; }
  100% { transform: translate3d(0, calc(var(--y) + var(--drop)), -10px); opacity: 0; }
}
@keyframes cfSpin {
  from { transform: rotate3d(var(--ax, 1), var(--ay, 1), var(--az, .3), 0deg); }
  to   { transform: rotate3d(var(--ax, 1), var(--ay, 1), var(--az, .3), 360deg); }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* ============================================================
   팝업 타이머 — Document PiP 창 안의 문서.
   좁은 창이므로 가운데로 쌓는다. 원판이 주인공이고, 주 버튼은
   한 줄을 다 쓰며, 보조는 그 아래 작게 모인다.
   ============================================================ */
.pipbody {
  margin: 0; padding: 14px 16px 30px; min-height: 100vh; box-sizing: border-box;
  background: var(--app); color: var(--dark);
  display: grid; align-content: center; justify-items: center; gap: 12px;
  overflow: hidden; font-family: var(--kr), var(--grotesk);
}
.pipbody .clock {
  margin: 0; width: 100%; gap: 8px;
  grid-template-columns: 1fr; justify-items: center;
}
.pipbody .clock__dial { width: min(100%, min(72vw, 56vh)); max-width: 260px; }
.pipbody .clock__side { justify-items: center; text-align: center; gap: 4px; }
.pipbody .clock__t {
  font-size: clamp(32px, min(13vw, 12vh), 50px); line-height: 1;
}
.pipbody .clock__p { font-size: 11px; letter-spacing: .1em; }
.pipbody .dots { display: flex; gap: 6px; margin-top: 4px; }
.pipbody .dot { width: 9px; height: 9px; border-width: 2px; }

/* 버튼 — 주 동작이 한 줄, 보조는 그 아래 한 줄 */
/* 2단 — 첫 단은 주 버튼 하나, 둘째 단에 보조 셋.
   flex-wrap 으로는 max-width 를 준 순간 같은 줄에 다시 붙어버려서
   단을 나누려면 그리드로 자리를 지정해야 한다. */
/* 바가 창 폭을 따라가고 상한을 갖는다. 주 버튼은 그 폭을 다 쓰므로
   자연히 한 줄을 차지하고, 보조 셋은 다음 줄에 붙어 모인다. */
.pipbody .result__run {
  width: 100%; max-width: 300px; margin: 0 auto; padding: 0; border-top: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; row-gap: 12px; column-gap: 6px;
}
.pipbody .result__run .tab--primary {
  order: -1; flex: 0 0 100%; width: 100%;
  min-width: 0; margin: 0; padding: 12px 20px; font-size: 13px;
}
.pipbody .result__run .tab:not(.tab--primary) { padding: 7px 11px; font-size: 11.5px; }
.pipbody .result__run .iconbtn { width: 30px; height: 30px; }

/* 전체화면 무대에서의 시계 */
.result.is-stage .clock { gap: clamp(30px, 6vw, 90px); }
.result.is-stage .clock__dial { width: clamp(220px, 34vh, 460px); }
.result.is-stage .clock__t { font-size: clamp(64px, 17vh, 210px); }
.result.is-stage .clock__p { font-size: clamp(13px, 1.8vh, 20px); }
.result.is-stage .dot { width: clamp(12px, 1.8vh, 20px); height: clamp(12px, 1.8vh, 20px); }

/* 좌측 칼럼 — 리드 문단 아래에 저장 버튼. 자기 단을 차지하지 않는다 */
.hero__side { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }

/* 저장 버튼 — 리드 아래에 서므로 문단 무게에 맞춘다 */
.savebtn {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 12px 22px 12px 17px; border-radius: var(--r-pill); cursor: pointer;
  border: var(--w-cmp) solid rgba(16,16,16,.3); background: transparent; color: rgba(16,16,16,.72);
  font-family: var(--kr), var(--mono); font-weight: 700; font-size: 15px; letter-spacing: -.015em;
  transition: background .14s, color .14s, border-color .14s;
}
.savebtn svg { width: 17px; height: 17px; display: block; }
.savebtn:hover { border-color: var(--dark); color: var(--dark); }
.savebtn[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--app); }
.savebtn[aria-pressed="true"]:hover { background: var(--dark); color: var(--app); }