/* client/dojo.css — 수련(道場) 온보딩 + 오프닝 서브타이틀
   팔레트 5색 엄수(철칙 3): 종이 #F5EFE0 · 먹 #1A1A1A · 담묵 #8A8578 · 혈홍 #B3271E · 금 #C9A227
   대사는 세리프·담묵 톤(§3). 목표 달성만 혈홍 강조. */

/* ── 오프닝 서브타이틀 (로고 하단, 문구세트 §2) ──────────────
   로고 이미지와 분리된 텍스트. 담묵·넓은 자간·修羅場 한자와 비슷한 시각 무게. */
#brandSubtitle {
  margin: -2px 0 2px;
  font-family: 'Noto Serif KR', 'Songti SC', 'Times New Roman', serif;
  font-size: clamp(12px, 3.2vw, 17px);
  letter-spacing: 0.42em;
  text-indent: 0.42em;            /* 자간 보정 — 마지막 글자 우측 여백 상쇄해 중앙정렬 유지 */
  font-weight: 500;
  color: #8A8578;                 /* 담묵 */
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.92;
}

/* ── 수련 오버레이 ─────────────────────────────────────────
   캔버스 위 투명 레이어. 컨테이너는 pointer-events:none(캔버스 베기 통과) — 건너뛰기 버튼만 auto,
   졸업 순간에만 JS가 컨테이너 전체를 auto로 켜 탭-닫기를 받는다. z는 HUD 위·오프닝(9000) 아래. */
#dojo {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  font-family: 'Noto Serif KR', 'Songti SC', 'Times New Roman', serif;
  color: #1A1A1A;
}

/* 修練 배지 — 상단 중앙. 튜토리얼임을 숨기지 않는다(§0). 스킵은 짧게(Skip)라 겹치지 않는다. */
#dojoBadge {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: #8A8578;                 /* 담묵 */
  background: rgba(245, 239, 224, 0.72);   /* 종이 반투명 — 배경 위 가독 */
  padding: 4px 14px;
  border-radius: 2px;
  white-space: nowrap;
}
#dojoBadge span { font-size: 13px; }

/* 건너뛰기 — 우상단, 배지보다 살짝 아래. 상시·유일하게 클릭 가능. */
#dojoSkip {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 44px);   /* 修練 배지보다 한 칸 아래 */
  right: max(12px, env(safe-area-inset-right));
  pointer-events: auto;
  font-family: inherit;
  font-size: 13px;
  color: #8A8578;                 /* 담묵 */
  background: rgba(245, 239, 224, 0.6);
  border: 1px solid rgba(138, 133, 120, 0.5);
  border-radius: 3px;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#dojoSkip:hover { color: #1A1A1A; border-color: #8A8578; }

/* 인트로 영상 건너뛰기 — 영상 위 우상단(태현 2026-08-09).
   ★fixed다: #dojoSkip은 #dojo 안이라 absolute면 되지만, 이건 영상(fixed, inset:0) 위에
   따로 떠 있어야 한다. 부모가 없어서 absolute로 두면 문서 기준으로 밀려 화면 밖에 눕는다.
   ★색은 담묵 계열로 어두운 영상 위에서 읽히게 뒤집는다 — 종이색 바탕(#dojoSkip)과 반대 상황이다. */
#dojoIntroSkip {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 17;                     /* 영상 z-index 16 바로 위 */
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(245, 239, 224, .82);            /* 종이색 글씨 — 검은 영상 위 */
  background: rgba(26, 26, 26, .42);
  border: 1px solid rgba(245, 239, 224, .38);
  border-radius: 3px;
  padding: 7px 14px;
  cursor: pointer;
  pointer-events: auto;
  transition: color .15s, border-color .15s, background .15s;
}
#dojoIntroSkip:hover { color: #F5EFE0; border-color: rgba(245, 239, 224, .7); background: rgba(26, 26, 26, .6); }
#dojoIntroSkip:focus-visible { outline: 2px solid #F5EFE0; outline-offset: 2px; }

/* 스승 대사 + 목표 — 화면 중앙 하단(§3) */
#dojoStage {
  position: absolute;
  left: 50%;
  bottom: clamp(64px, 16vh, 140px);
  transform: translateX(-50%);
  width: min(92vw, 640px);
  text-align: center;
}
/* 스승 대사 — 한 번에 1줄, 페이드 인 */
#dojoSay {
  font-size: clamp(17px, 4.4vw, 25px);
  line-height: 1.5;
  color: #1A1A1A;                 /* 먹 — 가독 우선(담묵 톤의 절제된 세리프) */
  text-shadow: 0 1px 10px rgba(245, 239, 224, 0.9), 0 0 2px rgba(245, 239, 224, 0.9);
  animation: dojoSayIn 0.4s ease;
  min-height: 1.5em;
  /* ★한국어 줄바꿈: 단어 중간에서 끊기지 않게(친절→친/절 방지). 띄어쓰기 단위로만 줄바꿈. */
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;      /* 한 단어가 폭을 넘으면(긴 URL 등) 그때만 강제 줄바꿈 */
  white-space: pre-line;          /* 대사 문자열의 \n을 줄바꿈으로(요청) — 공백은 접고 줄바꿈만 보존, 자동 워드랩 유지 */
}
@keyframes dojoSayIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 목표 카운터 — 담묵. 달성 시 혈홍으로 짧게 강조 후 소멸(§3) */
#dojoGoal {
  margin-top: 12px;
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: 0.06em;
  color: #8A8578;                 /* 담묵 */
  min-height: 1.2em;
  transition: color 0.15s, transform 0.15s;
  word-break: keep-all; line-break: strict;   /* 목표 문구도 단어 단위 줄바꿈 */
}
#dojoGoal.hit { color: #B3271E; transform: scale(1.08); font-weight: 600; }   /* 혈홍 강조 */

/* 졸업 오버레이 — 3줄(§3의 유일한 다줄 예외) + 탭 안내 */
#dojoSay .dj-end { font-size: clamp(16px, 4vw, 22px); line-height: 1.9; }
#dojoSay .dj-strong { color: #1A1A1A; font-weight: 600; margin-top: 4px; }

/* 모바일: 대사를 조금 위로(조이스틱·공격 버튼과 겹치지 않게) */
@media (max-width: 560px) {
  #dojoStage { bottom: clamp(96px, 22vh, 180px); }
}
@media (prefers-reduced-motion: reduce) {
  #dojoSay, #dojoSay .dj-tap { animation: none; }
  #dojoLearn.show { animation: none; opacity: 1; }
}

/* ── 단계 습득 인장(獲得): 각 단계 완료 시 화면 중앙에 도장 찍히듯 팝인 후 사라진다 ── */
#dojoLearn {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
}
#dojoLearn.show { animation: dojoLearnPop 1.9s cubic-bezier(.2,.8,.2,1) forwards; }
/* 習得 인장 — 혈홍 도장(팔레트 준수, 금색 대신). 살짝 기울여 눌러 찍은 느낌 */
#dojoLearn .dl-seal {
  display: inline-block;
  font-family: 'Noto Serif KR', serif;
  font-size: 15px; font-weight: 700; letter-spacing: 0.12em;
  color: #F5EFE0;
  background: #B3271E;
  padding: 3px 12px;
  border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.18);
}
/* 기술명 — 크게, 먹 세리프 */
#dojoLearn .dl-name {
  margin-top: 10px;
  font-family: 'Noto Serif KR', serif;
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 800;
  color: #1A1A1A;
  line-height: 1.05;
  text-shadow: 0 1px 0 rgba(245, 239, 224, 0.8);
}
/* 익혔다 — 작은 담묵 캡션 */
#dojoLearn .dl-cap {
  margin-top: 4px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.26em; text-indent: 0.26em;
  color: #8A8578;
  text-transform: uppercase;
}
@keyframes dojoLearnPop {
  0%   { opacity: 0; visibility: visible; transform: translate(-50%, -50%) scale(1.5); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(0.94); }   /* 도장 눌림(오버슈트) */
  24%  { transform: translate(-50%, -50%) scale(1); }
  72%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; visibility: visible; transform: translate(-50%, -52%) scale(1.02); }
}

/* ── 수련 완료(졸업) 인장 — 대사 3줄 위에 큼직하게. 완주 성취 + 명성 보상 ── */
#dojoSay .dj-complete {
  margin-bottom: 16px;
  animation: dojoCompletePop 0.6s cubic-bezier(.2,.8,.2,1) both;
}
#dojoSay .dc-seal {
  display: inline-block;
  font-family: 'Noto Serif KR', serif;
  font-size: 17px; font-weight: 700; letter-spacing: 0.14em;
  color: #F5EFE0; background: #B3271E;
  padding: 4px 14px; border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.2);
}
#dojoSay .dc-title {
  display: block;
  margin-top: 10px;
  font-family: 'Noto Serif KR', serif;
  font-size: clamp(24px, 7vw, 36px); font-weight: 800;
  letter-spacing: 0.06em; color: #1A1A1A; line-height: 1.1;
}
#dojoSay .dc-merit {
  display: block; margin-top: 5px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  color: #B3271E;
}
@keyframes dojoCompletePop {
  0%   { opacity: 0; transform: scale(1.35); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* ── 수련장(修練場) — 모드 칩 + 점수판 (2026-08-11) ─────────────────────────
   "자유수련 너무 정적이여서 지루하다"(태현)의 답. 화면에 늘 세 가지가 보인다:
   지금 뭘 하는 중인지(칩) · 지금 얼마인지(점수판) · 방금 뭐가 됐는지(판정).
   전부 담묵·먹·혈홍 안 — 팔레트 5색을 넘지 않는다(철칙 3). */
#dojoModes {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 12; display: flex; gap: 6px; pointer-events: auto;
  padding: 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  box-shadow: 0 1px 10px rgba(26,26,26,.10);
}
#dojoModes .dm {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 54px; padding: 6px 8px; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 2px;
  font-family: "Noto Serif KR", serif; color: var(--gray);
  transition: color .15s, background .15s, border-color .15s;
}
#dojoModes .dm .dm-h { font-size: 16px; line-height: 1; }
#dojoModes .dm .dm-t { font-size: 9.5px; letter-spacing: .06em; }
#dojoModes .dm.on {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-color: color-mix(in srgb, var(--ink) 26%, transparent);
}
@media (hover: hover) { #dojoModes .dm:hover { color: var(--ink); } }

/* 점수판 — 화면 위쪽. 숫자가 커야 '기록'으로 읽힌다. */
#dojoTrial {
  position: fixed; left: 50%; top: 84px; transform: translateX(-50%);
  z-index: 11; pointer-events: none; text-align: center;
  font-family: "Noto Serif KR", serif; white-space: nowrap;
}
#dojoTrial .dt-main { display: block; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
#dojoTrial .dt-best { display: block; margin-top: 2px; font-size: 11.5px; color: var(--gray); letter-spacing: .08em; }
#dojoTrial .dt-combo { display: block; font-size: 13px; color: var(--gray); letter-spacing: .08em; }

@media (max-width: 600px) {
  #dojoModes { bottom: 12px; gap: 4px; padding: 4px; }
  #dojoModes .dm { min-width: 46px; padding: 5px 6px; }
  #dojoModes .dm .dm-h { font-size: 14px; }
  #dojoModes .dm .dm-t { font-size: 8.5px; }
  #dojoTrial { top: 64px; }
  #dojoTrial .dt-main { font-size: 18px; }
}

/* ── 수련장 순위표(試練 榜) — 2026-08-11 태현 "수련장 안에서 보여주고 싶습니다" ─────
   기록을 세운 자리에서 바로 순위가 보여야 "한 판 더"가 나온다. 로비까지 갔다 오면 식는다.
   판 위에 얹히되 마당을 다 가리지 않는다(오른쪽에 붙고 폭도 좁게). */
#dojoRank {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
  z-index: 13; width: min(300px, 82vw); max-height: 74vh; overflow-y: auto;
  padding: 12px 12px 10px; border-radius: 3px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 2px 18px rgba(26,26,26,.14);
  font-family: "Noto Serif KR", serif;
}
#dojoRank .dr-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
#dojoRank .dr-han { font-size: 17px; color: color-mix(in srgb, var(--ink) 45%, transparent); }
#dojoRank .dr-t { flex: 1; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
#dojoRank .dr-x { background: none; border: none; font-size: 15px; color: var(--gray); cursor: pointer; padding: 0 2px; }
#dojoRank .dr-rows { display: flex; flex-direction: column; }
#dojoRank .dr-r {
  display: grid; grid-template-columns: 26px 18px 1fr auto; align-items: center; gap: 6px;
  padding: 4px 2px; font-size: 12.5px; color: var(--gray);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
}
#dojoRank .dr-rk { text-align: right; font-variant-numeric: tabular-nums; }
#dojoRank .dr-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dojoRank .dr-v { font-variant-numeric: tabular-nums; color: var(--ink); }
#dojoRank .dr-r.p1 .dr-nm, #dojoRank .dr-r.p1 .dr-v, #dojoRank .dr-r.p1 .dr-rk { color: var(--gold); font-weight: 700; }
#dojoRank .dr-r.p2 .dr-nm, #dojoRank .dr-r.p3 .dr-nm { color: var(--ink); }
/* 내 줄만 혈홍 — 순위표에서 눈이 먼저 가야 할 단 한 줄이다 */
#dojoRank .dr-r.me { background: color-mix(in srgb, var(--blood) 8%, transparent); }
#dojoRank .dr-r.me .dr-nm, #dojoRank .dr-r.me .dr-v { color: var(--blood); font-weight: 700; }
#dojoRank .dr-gap { text-align: center; color: var(--gray); font-size: 11px; line-height: 1.4; }
#dojoRank .dr-empty { padding: 10px 2px 2px; font-size: 11.5px; color: var(--gray); line-height: 1.5; }
/* ★순위가 오르는 중인 내 줄 — 숫자는 JS가 굴리고(paintRank), 여기선 '달리는 몸'만 준다.
   금(칭호·성취의 색)으로 잠깐 물들었다가 제자리에 앉는다. */
#dojoRank .dr-r.me.climbing { animation: drClimb .34s ease-in-out infinite; }
#dojoRank .dr-r.me.climbing .dr-rk,
#dojoRank .dr-r.me.climbing .dr-nm { color: var(--gold); }
@keyframes drClimb {
  0%   { transform: translateY(3px); }
  100% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  #dojoRank .dr-r.me.climbing { animation: none; }
}

/* 榜 버튼은 종목 칩과 살짝 갈라 둔다 — 종목을 고르는 게 아니라 창을 여는 것이다 */
#dojoModes .dm-rank { margin-left: 6px; border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
#dojoTrial .dt-rank { display: block; margin-top: 1px; font-size: 11.5px; color: var(--blood); letter-spacing: .06em; }

@media (max-width: 600px) {
  #dojoRank { right: 8px; width: min(272px, 84vw); max-height: 62vh; padding: 10px; }
  #dojoRank .dr-r { font-size: 12px; }
}

/* ── 결과판 — 판이 끝난 뒤 (2026-08-13 태현) ─────────────────────────────
   "내가 이번판에 세운 기록 중앙에 보여주고 다시 도전하기 버튼… 그 옆에 순위도"
   ★화면 정중앙이 아니라 **조금 위**다: 카메라가 나를 따라오므로 정중앙엔 내가 서 있다.
     기록으로 나를 덮으면 '가운데로 걸어 돌아온' 연출이 마지막 순간에 가려진다. */
#dojoResult {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
  pointer-events: auto;                 /* 이 판만 입력을 받는다(#dojo는 none) */
  width: min(86vw, 324px);
  padding: 13px 16px 14px; border-radius: 3px; text-align: center;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 4px 20px rgba(26,26,26,.14);
  font-family: "Noto Serif KR", serif;
  animation: dojoResIn .42s cubic-bezier(.2,.8,.2,1);
}
@keyframes dojoResIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } }
#dojoResult .dq-mode {
  font-size: 12px; letter-spacing: .12em; color: var(--gray); margin-bottom: 9px;
}
#dojoResult .dq-mode .dq-han { font-size: 14px; margin-right: 5px; }
/* 이번 판 | 순위 — 나란히. 가운데 실선 하나로 둘을 가른다(태현: "그 옆에 순위도") */
#dojoResult .dq-row { display: flex; align-items: stretch; }
#dojoResult .dq-cell { flex: 1; min-width: 0; }
#dojoResult .dq-cell + .dq-cell { border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
#dojoResult .dq-k { display: block; font-size: 10.5px; letter-spacing: .1em; color: var(--gray); }
#dojoResult .dq-v {
  display: block; margin-top: 2px; font-size: 27px; font-weight: 700; line-height: 1.15;
  color: var(--ink); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 순위는 숫자가 아니라 **문장**이다('제329위 / 602' · 'Rank 329 of 602'). 한 줄로 못 박으면
   언어와 자릿수에 따라 잘린다(실측: '제329위 / 6⋯') — 접히게 두고 단어 단위로만 끊는다. */
#dojoResult .dq-v.dq-rank {
  font-size: 17px; color: var(--gray); white-space: normal; overflow: visible;
  line-height: 1.25; word-break: keep-all; font-weight: 600;
}
#dojoResult .dq-v .dq-u { font-size: 15px; font-weight: 400; margin-left: 1px; }   /* 초 단위 */
/* 최고 기록 한 줄 — 갱신했으면 금(칭호·성취의 색). 아니면 담묵. */
#dojoResult .dq-best { margin-top: 9px; font-size: 11.5px; letter-spacing: .06em; color: var(--gray); }
#dojoResult .dq-best.isnew { color: var(--gold); font-weight: 700; }
#dojoResult .dq-go {
  margin-top: 11px; width: 100%; font-family: inherit; font-size: 14px; letter-spacing: .06em;
  color: var(--ink); background: none; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ink) 34%, transparent); border-radius: 3px;
  padding: 8px 10px; transition: background .15s, border-color .15s;
}
#dojoResult .dq-go:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); border-color: var(--ink); }
#dojoResult .dq-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 순위표가 열려 있으면 결과판이 왼쪽으로 비킨다 — 안 비키면 '다시 도전'이 가린다(실측 78px).
   좁은 화면(<760px)에선 애초에 순위표를 자동으로 열지 않으므로 이 규칙도 필요 없다. */
@media (min-width: 760px) {
  #dojoResult.boardopen { left: calc(50% - 96px); }
}

@media (max-width: 600px) {
  #dojoResult { top: 27%; width: min(80vw, 258px); padding: 11px 13px 12px; }
  #dojoResult .dq-v { font-size: 23px; }
  #dojoResult .dq-v.dq-rank { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  #dojoResult { animation: none; }
}