/* stagePAN 사다리타기 전용 스타일 — common.css 토큰(var(--kt-…))만 쓴다 */

/* ---- 인원·난이도 ---- */
.ladder-settings { gap: var(--kt-space-3) var(--kt-space-4); }
.ladder-level {
  display: inline-flex;
  align-items: center;
  gap: var(--kt-space-2);
}

/* ---- 사다리 판 ---- */
.ladder-board {
  width: 100%;
  padding: var(--kt-space-4);
}
@media (max-width: 479px) {
  .ladder-board { padding: var(--kt-space-3) var(--kt-space-2); }
}

/* 이름·결과 열: 판 폭 ÷ 인원, SVG 세로줄과 같은 가운데를 쓴다 */
.ladder-cols {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
}
.ladder-cell {
  position: relative;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0 2px;
}

.ladder-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--kt-space-1) 0;
  overflow: visible;
}
.ladder-rails line {
  stroke: var(--kt-line-strong);
  stroke-width: 3;
  stroke-linecap: round;
}
.ladder-walk {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 준비: 입력칸. 좁은 열에서는 누르는 동안만 넓어진다 */
.ladder-input {
  min-height: 48px;
  padding: var(--kt-space-1) 2px;
  text-align: center;
  font-size: var(--kt-fs-s);
  font-weight: 700;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .ladder-input { font-size: var(--kt-fs-m); }
}
.ladder-input:focus {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: max(100%, 7.5em);
  transform: translateX(-50%);
  background: var(--kt-surface);   /* 이웃 칸 글자가 비치지 않게 */
  box-shadow: 0 0 0 2px var(--kt-ui-line);
}
.ladder-input:focus-visible { box-shadow: none; }  /* 키보드 초점은 common.css 테두리 하나만 */
.ladder-cell:first-child .ladder-input:focus { left: 0; transform: none; }
.ladder-cell:last-child .ladder-input:focus { left: auto; right: 0; transform: none; }
.ladder-cell:first-child:last-child .ladder-input:focus { left: 0; right: auto; }

/* 진행·결과: 이름 버튼(열 폭 × 44px 이상, 2줄까지) */
.ladder-name.kt-btn {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 2px;
  font-size: var(--kt-fs-s);
}
@media (min-width: 768px) {
  .ladder-name.kt-btn { font-size: var(--kt-fs-m); padding: 2px var(--kt-space-1); }
}
.ladder-name__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
  word-break: break-all;
}
.ladder-name.is-done {
  border-color: var(--path);
  box-shadow: inset 0 -5px 0 var(--path);
}
.ladder-name.is-busy {
  border-color: var(--path);
  border-style: dashed;
}

/* 결과 칸: 가림 = 작은 점수판(먹남색 + 노랑 "?"), 열림 = 흰 바탕 + 길 색 테두리 */
.ladder-prize {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 3px solid var(--kt-ui-line);
  border-radius: var(--kt-radius-s);
  background: var(--kt-surface);
  font-size: var(--kt-fs-s);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
@media (min-width: 768px) {
  .ladder-prize { font-size: var(--kt-fs-m); }
}
.ladder-prize.is-covered {
  background: var(--kt-board);
  border-color: var(--kt-board);
  color: var(--kt-board-ink);
  font-family: var(--kt-font-display);
  font-size: var(--kt-fs-l);
}
.ladder-prize.is-revealed {
  border-color: var(--path);
  color: var(--kt-ink);
}
.ladder-prize__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.ladder-prize.is-open {
  animation: ladder-pop 0.4s cubic-bezier(.2, .9, .3, 1.15) both;
}
@keyframes ladder-pop {   /* 공통 결과 연출(kt-pop)과 같은 "한 번 커지기" */
  0%   { transform: scale(0.88); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- 결과 띠 ---- */
.ladder-strip .kt-board__result {
  font-size: clamp(28px, 6.5vw, 64px);
}
.ladder-strip .kt-board__result[hidden] + .kt-board__sub { margin-top: 0; }
.kt-is-fullscreen .ladder-strip .kt-board__result { font-size: min(7vw, 10vh); }

/* ---- 전체 결과 표 ---- */
.ladder-table { max-width: 480px; }
.ladder-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: var(--kt-space-2);
  border-radius: 50%;
  background: var(--path);
  vertical-align: -1px;
}

/* 좁은 열(약 30px): 알약 끝에 글자가 닿지 않게 위아래 여백을 두고 4줄까지 보인다 */
.ladder-board.is-narrow .ladder-name.kt-btn { padding: var(--kt-space-2) 0; }
.ladder-board.is-narrow .ladder-prize { padding: var(--kt-space-2) 0; border-width: 2px; }
.ladder-board.is-narrow .ladder-name__text,
.ladder-board.is-narrow .ladder-prize__text { -webkit-line-clamp: 4; line-height: 1.15; }

.ladder-edit[hidden],
.ladder-actions [hidden] { display: none; }
#edit-hint:empty { display: none; }