/* 사다리 게임 — 토큰과 스타일 */

:root {
  /* 색 */
  --bg:         #f4f4f2;
  --surface:    #ffffff;
  --surface-2:  #efeeeb;
  --surface-3:  #e6e5e1;
  --ink:        #1b1a18;
  --ink-2:      #6c6a65;
  --ink-3:      #9b9892;
  --line:       #e2e0dc;
  --accent:     #2f6df6;
  --accent-ink: #ffffff;
  --accent-weak:#e7efff;

  /* 간격 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* 모서리 */
  --r-s: 8px; --r-m: 12px; --r-l: 18px;

  /* 글자 */
  --fs-1: 13px; --fs-2: 15px; --fs-3: 17px; --fs-4: 22px;

  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.05);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #141413;
    --surface:    #1e1e1c;
    --surface-2:  #272724;
    --surface-3:  #32312d;
    --ink:        #f2f1ee;
    --ink-2:      #a8a59e;
    --ink-3:      #7a7770;
    --line:       #35342f;
    --accent:     #6b9bff;
    --accent-ink: #10142a;
    --accent-weak:#243149;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo",
               "Malgun Gothic", system-ui, sans-serif;
  font-size: var(--fs-2);
  line-height: 1.5;
  word-break: keep-all;        /* 한국어 어절 중간 끊김 방지 */
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
  padding-block: var(--sp-5) var(--sp-6);
  padding-top: calc(var(--sp-5) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.app-header { padding: var(--sp-1) 0 0; }
.app-title { margin: 0; font-size: var(--fs-4); font-weight: 700; letter-spacing: -.01em; }

/* ── 패널 ───────────────────────────────── */
.panel {
  background: var(--surface);
  border-radius: var(--r-l);
  box-shadow: var(--shadow);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.panel-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.panel-title { margin: 0; font-size: var(--fs-3); font-weight: 700; }
.panel-status { margin: 0; font-size: var(--fs-1); color: var(--ink-2); }

/* ── 인원 스테퍼 ────────────────────────── */
.count-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.field-label {
  margin: 0;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--ink-2);
}
.hint { font-size: var(--fs-1); color: var(--ink-3); }

.stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--surface-2);
  border-radius: var(--r-m);
  padding: var(--sp-1);
  flex-shrink: 0;
}
.stepper-btn {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-3);
  line-height: 1;
  cursor: pointer;
}
.stepper-btn:hover:not(:disabled) { background: var(--surface-3); }
.stepper-btn:disabled { color: var(--ink-3); cursor: not-allowed; }
.stepper-value {
  min-width: 40px;
  text-align: center;
  font-size: var(--fs-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── 입력 ──────────────────────────────── */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 520px) {
  .field-grid { grid-template-columns: minmax(0, 1fr); }
}
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.input-list { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }

.text-input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 var(--sp-3);
  border: 0;                       /* 입력칸 기본형: 면을 채우고 테두리를 없앤다 */
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
}
.text-input::placeholder { color: var(--ink-3); }
.text-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── 버튼 ──────────────────────────────── */
.btn {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-m);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { filter: brightness(.94); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover:not(:disabled) { background: var(--surface-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.btn-row .btn-primary { flex: 1 1 auto; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 사다리 판 ─────────────────────────── */
.board-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 calc(var(--sp-5) * -1);   /* 스크롤 영역만 패널 폭을 다 쓴다 */
  padding: 0 var(--sp-5);
}
.board-inner {
  min-width: calc(var(--cols, 4) * 64px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.lane-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));  /* 1fr 아님 — 내용이 열을 밀지 못하게 */
  gap: 0;
}

.lane {
  min-width: 0;                      /* 없으면 말줄임(…)이 안 나온다 */
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-1);
  border-radius: var(--r-m);
  font-size: var(--fs-1);
  font-weight: 600;
}

.lane-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lane-dot {
  width: 8px; height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink-3);
}

/* 참가자 버튼 */
.lane-player {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  margin: 0 2px;
}
.lane-player:hover:not(:disabled) { background: var(--surface-2); }
.lane-player:disabled { cursor: default; }
.lane-player.is-done { background: var(--surface-2); border-color: transparent; }

/* 결과 칸 — 공개 전에는 결과를 결과처럼 보여 주지 않는다 */
.lane-prize {
  margin: 0 2px;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px dashed var(--line);
}
.lane-prize.is-revealed {
  background: var(--surface);
  color: var(--ink);
  border-style: solid;
  border-color: var(--line);
  border-top-width: 3px;
}

.ladder-wrap { width: 100%; }
.ladder { display: block; width: 100%; }
.ladder .rail { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.ladder .rung { stroke: var(--surface-3); stroke-width: 3; stroke-linecap: round; }
.ladder .trace { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── 결과 요약 ─────────────────────────── */
.summary {
  list-style: none;
  margin: 0;
  padding: var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--r-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}
.summary li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: var(--fs-1);
}
.summary .name { font-weight: 700; }
.summary .arrow { color: var(--ink-3); }
.summary .name, .summary .prize {
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ladder .trace { transition: none !important; }
}