/*
 * UI 에디터로 맞춘 미세조정 값 (2026-09-11, 발주처/작업자 튜닝).
 *
 * 에디터가 내보낸 선택자 중 `#app > div:nth-of-type(...)` 형태의 구조 경로는
 * 화면마다 다른 요소를 가리켜 엉뚱한 곳에 적용될 수 있으므로, 실제 요소를 확인해
 * 전부 클래스 기준으로 바꿔 적었다(무엇이 무엇인지 주석으로 남긴다).
 *
 * 이 파일은 다른 css 뒤에 읽히고 !important 를 유지해, 기존 규칙을 확실히 덮는다.
 * 값을 더 손보려면 에디터로 다시 조정해 내보낸 뒤 이 파일에 반영하면 된다.
 */

/* ── 메인 화면 ── */
.main-btn { height: 96px !important; }                    /* 시작하기 포함 메뉴 버튼 높이 */
.main-btn__text b { font-size: 24px !important; }
.main-btn__text small { font-size: 16px !important; font-weight: 400 !important; }
.main-btn--start .main-btn__text b { font-size: 28px !important; }
.main-menu { width: 704px !important; height: 355px !important; }
.game-logo { width: 567px !important; height: auto !important; }
.user-card { line-height: 1.45 !important; height: 99px !important; }
.user-card span { font-weight: 400 !important; }
.main-screen__admin { width: 177px !important; transform: translate(54px, 0) !important; }
/* 버튼별 높이(개별 조정) */
#main-start { height: 99px !important; }

/* 전체화면 권장 팝업 버튼 */
#fsreco-close, #fsreco-apply { font-size: 20px !important; }

/* ── 게임 방법(MAIN-002) ── */
.howto__tab { font-size: 22px !important; }
.howto__text { font-size: 20px !important; font-weight: 800 !important; }
.howto__panel-desc { font-weight: 500 !important; }
/* 1차에 200x55 로 넣었는데 버튼이 팝업 오른쪽 밖으로 20px 나갔다(측정).
   5차에서 받은 177x50 이 그걸 맞춰 준다. 글자도 '튜토리얼' 로 줄였다(howto.js). */
.howto__btn.howto__tutorial { font-size: 20px !important; width: 177px !important; height: 50px !important; }
.howto__btn.howto__close { font-size: 20px !important; width: 200px !important; height: 55px !important; }

/* ── 명예 뱃지(BADGE-001/002) ── */
.bg-pop__close { font-size: 20px !important; }
.badge-card__diff { font-weight: 500 !important; }
.badge-detail__cond { line-height: 2.6 !important; font-weight: 500 !important; }
.badge-detail__progress i { line-height: 1.65 !important; }
.badge-detail__progress-num { line-height: 2.6 !important; }
.badge-detail__ok { font-size: 24px !important; width: 110px !important; height: 52px !important; }

/* ── 보안 등급(GRADE-001) ── */
.grade-cols { font-size: 28px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.15 !important; }
.grade-col { font-weight: 500 !important; }
.grade-col__level { font-size: 20px !important; line-height: 1.5 !important; }
.grade-col__name { font-size: 20px !important; font-weight: 500 !important; line-height: 1.5 !important; }
.grade-col__req { font-weight: 500 !important; }
.grade-now { font-size: 28px !important; font-weight: 600 !important; }
.grade-now__hint { font-size: 20px !important; font-weight: 500 !important; line-height: 2.6 !important; }

/* ── HUD(인게임 상단) ── */
.hud { font-weight: 500 !important; }
.hud-avatar { width: 87px !important; }
.hud-user small { font-weight: 500 !important; }
.hud-user b { font-size: 30px !important; font-weight: 600 !important; }
.hud-actions button span { font-size: 18px !important; font-weight: 500 !important; }   /* 홈으로 · 환경설정 글자 */

/* ── 맵 상호작용 버튼(이름표) · 미션 아이콘 ── */
.obj__label { font-size: 14px !important; padding: 6px 25px !important; font-weight: 500 !important; }
.obj__icon { width: 75px !important; height: 75px !important; }

/* ── 좌측 미션 가이드 / 조작법 ── */
.mission-guide .mg__title { font-size: 26px !important; }          /* '미션 가이드' */
.mg-ctrl .mg__title { font-size: 24px !important; }                /* '조작법' */
.mg__sub { font-weight: 500 !important; font-size: 18px !important; }
.mg__note { font-weight: 500 !important; font-size: 16px !important; line-height: 1.5 !important; }
.mg__tag { font-size: 20px !important; height: 55px !important; width: 150px !important; }
.mg__list .mg__tag:nth-of-type(4) { width: 190px !important; }     /* '신고·보고형' 만 넓게 */
.mg__timer-row span { font-size: 20px !important; line-height: 1.7 !important; }  /* '미션 교체' */
.mg-ctrl__row { font-size: 20px !important; font-weight: 500 !important; }

/* ── 튜토리얼 ── */
.tutorial__skip { font-weight: 500 !important; }
.tutorial__text { font-weight: 500 !important; font-size: 24px !important; line-height: 1.4 !important;
                  white-space: pre-line !important; }   /* 대사에 줄바꿈(\n)을 살린다 */
.tutorial__btn { font-size: 20px !important; }
.tutorial__npc { line-height: 0.8 !important; }
.tutorial__name { line-height: 1.55 !important; }
.tutorial__foot { line-height: 1.7 !important; letter-spacing: -0.015em !important; }
.tutorial__card { width: 430px !important; height: 690px !important;
                  transform: translate(-230px, -350px) !important; }

/* ── 미션창 공통/조치형/순서형 ── */
.panel__head { font-size: 32px !important; }
.panel__situation { font-weight: 500 !important; font-size: 16px !important; }
.panel__count-hint { font-weight: 400 !important; }
.panel__submit { font-weight: 500 !important; }
.tray__head b { font-size: 20px !important; line-height: 1.95 !important; }   /* '조치 카드' · '배치할 위치' */
.tray__head span { font-weight: 500 !important; }
.zones__arrow { line-height: 1.35 !important; }
.zone__title { font-size: 24px !important; font-weight: 600 !important; }
/* 9차에 받은 20px 이 여기(클래스 2개)에 눌려 반영되지 않았다. 이쪽을 고친다. */
.card.card--word { font-size: 20px !important; }
.card.card--placed { font-weight: 500 !important; }
.card__no { font-size: 16px !important; }
.slot__hint { font-weight: 400 !important; }
.tab.tab--on { height: 50px !important; }
/* 탐색형 선택지: 전체를 10px 내린다(에디터 조정).
   transform 을 !important 로 덮으면 누르는 반응이 사라지므로 :active 도 함께 다시 준다. */
.choice { transform: translate(0, 10px) !important; }
.choice:active { transform: translate(0, 10px) translateY(1px) scale(.985) !important; }
.choice__label { font-size: 18px !important; font-weight: 500 !important; }
.choice__no { font-size: 16px !important; width: 30px !important; height: 30px !important; line-height: 1.7 !important; }

/* ── 미션 포기 확인 팝업(미션창 전용) ──
   에디터가 내보낸 .dlg__title / .dlg__cancel 은 모든 팝업에 걸리므로 이 팝업으로 한정한다. */
.dlg--abandon { width: 435px !important; height: 179px !important; }
.dlg--abandon .dlg__title { transform: translate(0, 13px) !important; }
.dlg--abandon .dlg__cancel,
.dlg--abandon .dlg__ok { font-size: 16px !important; transform: translate(0, 20px) !important; }

/* 낮은 화면(노트북) 보정.
   위 튜닝값은 1080 기준이라 !important 로 기존 반응형 축소를 덮어 768 에서 넘쳤다(스크롤).
   높이가 낮으면 메인 화면 값만 한 단계 낮춰 한 화면에 담는다. */
/* 창모드 1080 모니터의 실제 높이(브라우저 크롬 제외 ~900)를 위한 중간 단계.
   이 구간이 비어 있어 로고·메뉴를 키운 뒤 45px 넘쳤다(발주처 스샷). */
@media (max-height: 900px) {
  .game-logo { width: 440px !important; }
  .main-menu { width: 672px !important; height: auto !important; }
  .user-card { height: auto !important; }
  #main-start { height: 84px !important; }
  .main-btn { height: 80px !important; }
}
@media (max-height: 820px) {
  .main-btn { height: 72px !important; }
  .game-logo { width: 390px !important; }
  .main-btn__text b { font-size: 20px !important; }
  .main-btn__text small { font-size: 14px !important; }
  .main-btn--start .main-btn__text b { font-size: 22px !important; }
  .main-menu { width: 620px !important; height: auto !important; }
  .user-card { line-height: 1.35 !important; height: auto !important; }
  #main-start, #main-howto, #main-settings { height: 72px !important; }
}
@media (max-height: 745px) {
  .main-btn { height: 62px !important; }
  .game-logo { width: 330px !important; }
  .main-menu { width: 580px !important; height: auto !important; }
  #main-start, #main-howto, #main-settings { height: 62px !important; }
}

/* ── 5차(2026-09-11) ─────────────────────────────────────────
   내보낸 선택자를 그대로 쓰면 어긋나는 것들이 있어 아래처럼 고쳤다.
   무엇을 왜 바꿨는지는 각 줄 주석에 남긴다. */

/* 보안 등급: 등급·이름 굵기.
   내보낸 값은 :nth-of-type(1)/(2) 였는데, '나의 등급' 칸에는 '나의 등급' 표시가
   한 줄 더 들어가 순서가 밀린다. 그 칸만 빠져 혼자 얇게 남으므로 순서를 뗐다. */
.grade-col__level, .grade-col__name { font-weight: 600 !important; }

/* 환경설정 팝업: ON/OFF·적용·로그아웃 글자.
   내보낸 값에는 .dlg__toggle--on 이 붙어 있었다. 그건 켜짐 상태에서만 붙는 클래스라
   끄는 순간 글자 크기가 도로 작아진다. 상태 클래스를 빼고 팝업으로 묶었다. */
.dlg--set .dlg__toggle--bgm,
.dlg--set .dlg__toggle--sfx,
.dlg--set .dlg__apply,
.dlg--set .dlg__logout { font-size: 24px !important; }

/* 홈으로 팝업(인게임 홈 버튼) — 6차에서 다시 잡았다(5차의 412px 은 대체됨).
   .dlg--home 은 튜토리얼 진행·건너뛰기·관리자 인증도 함께 쓰므로 .dlg--quit 로만 묶는다.
   상자 안 요소는 전부 position:absolute + % 배치라, 상자 높이를 바꾸면 안쪽도 같이 움직인다.
   그래서 버튼·본문의 translate 는 그 움직임을 되돌리는 값이다(원본 그대로 둔다). */
.dlg--quit { width: 435px !important; height: 219px !important; }
.dlg--quit .dlg__title {
  font-size: 21px !important; line-height: 1.4 !important;
  width: 279.938px !important; height: 29.3906px !important;
  transform: translate(54px, 3px) !important;
}
.dlg--quit .dlg__body { transform: translate(0, -10px) !important; font-size: 14px !important; }
.dlg--quit .dlg__body > div:nth-of-type(1) {
  font-size: 16px !important; line-height: 1.4 !important; font-weight: 500 !important;
  height: 29.3906px !important;
}
.dlg--quit .dlg__cancel,
.dlg--quit .dlg__ok { font-size: 16px !important; width: 120px !important; height: 47px !important; }
.dlg--quit .dlg__cancel { transform: translate(15px, -20px) !important; }
.dlg--quit .dlg__ok     { transform: translate(5px, -20px) !important; }
/* 내보낸 값에는 본문 안쪽 줄의 width:581px 도 있었으나 상자 폭(435)보다 넓어 뺐다.
   상자를 줄이기 전(689px)에 잡힌 값으로 보인다. 글자는 가운데 정렬이라 폭을 비워 두면
   상자 안에서 알아서 접힌다. */

/* ── 7차(2026-09-11) 판단형·신고형 보기 목록 ──────────────────
   내보낸 값은 `.panel-back:nth-of-type(15~20) > ...` 처럼 '몇 번째 미션창' 에 묶여 있었다.
   확인 페이지에서 미션창을 닫지 않고 계속 열어 20개가 쌓인 탓이다(그 버그는 고쳤다).
   실제 게임에는 미션창이 하나뿐이라 그대로는 하나도 안 걸린다.
   여섯 미션에 똑같이 걸어 둔 값이라 뜻은 분명하다 — 보기 전체를 50px 내리고 글자 굵기 500. */
.list__item { transform: translate(0, 50px) !important; }
/* !important 로 덮으면 마우스 올렸을 때 살짝 뜨는 반응(translateY(-1px))이 사라진다. 같이 다시 준다. */
.list__item:hover { transform: translate(0, 50px) translateY(-1px) !important; }
.list__text { font-weight: 500 !important; }

/* ── 8차(2026-09-11) 조치형 카드·영역 ─────────────────────────
   카드 4장·영역 4칸에 똑같이 걸어 둔 값이라 개별 순번을 떼고 클래스로 옮겼다. */
/* 그림 카드 높이. 원본은 min-height:300px 인데 그건 그림이 165px 이던 때 값이다.
   그림을 45px 로 줄인 뒤에도 카드는 300px 그대로라 빈 공간만 남고, C-01·C-02 에서
   본문이 119px·95px 넘쳐 오른쪽 스크롤이 생겼다(사용자 지적).
   165 로 낮추면 둘 다 스크롤이 사라지고 카드 높이도 142 로 같아진다.
   더 낮추면 C-01 만 129 로 짜부라져 두 문항이 달라 보인다. */
.card--img { min-height: 165px !important; }
.card--img .card__img { width: 45px !important; height: auto !important; }
.card--img .card__label { font-size: 18px !important; font-weight: 500 !important; }
/* 카드칸·영역칸 머리글 오른쪽 안내문을 왼쪽으로 15px. */
.tray__head span { transform: translate(-15px, 0) !important; }
.zone__title { font-weight: 500 !important; font-size: 20px !important; }
/* 긴 영역 이름은 원래도 따로 줄여 쓴다(.zone__title--long). 그 비율을 유지한다. */
.zone__title--long { font-size: 18px !important; }
/* 내보낸 값에는 `.card:nth-of-type(2)` 식으로 특정 칸에만 자간을 좁힌 것들이 있었으나
   넣지 않았다. 위치 기준이라 문항이 달라지면 엉뚱한 카드가 좁아진다.
   대신 전 문항의 글자 넘침을 재서 따로 보고한다. */

/* 선택지 문구에 넣은 줄바꿈이 화면에 실제로 보이게 한다.
   textContent 로 넣은 
 은 기본값(white-space:normal)에서 공백으로 합쳐진다.
   pre-line 은 연속 공백은 그대로 합치고 줄바꿈만 살린다. */
.choice__label { white-space: pre-line !important; }

/* ── 10차(2026-09-11) 자간 다듬기 ─────────────────────────────
   긴 이름이 카드·영역 안에서 자연스럽게 앉도록 좁힌다. 전부 클래스 단위라 그대로 넣었다. */
.card { font-weight: 500 !important; letter-spacing: -0.08em !important; }
.card__label { letter-spacing: -0.06em !important; }
.zone__title--long { letter-spacing: -0.04em !important; }
.panel__situation { letter-spacing: -0.025em !important; }

/* ── 11차(2026-09-11) ─────────────────────────────────────────
   판단형·신고형 보기 글자 크기를 20px 로 맞춘다(판단형은 24px 이었다). */
.list__text { font-size: 20px !important; }
/* 낱말 카드 이름에 넣은 줄바꿈이 보이게 한다. 카드 본문은 textContent 로 들어가
   기본값(white-space:normal)에서는 줄바꿈이 공백으로 합쳐진다. */
.card { white-space: pre-line !important; }

/* 이름이 긴 카드만 줄인다(24자 이상). 내보낸 값은 `.card:nth-of-type(3)` 이었는데
   카드 순서가 열 때마다 섞여 매번 다른 카드가 작아진다. 길이로 거는 쪽이 맞다.
   .card.card--word 와 같은 2클래스라 그보다 뒤에 있어야 이긴다. */
.card.card--long { font-size: 18px !important; letter-spacing: -0.1em !important; }

/* ── 12차(2026-09-14) 자간 ────────────────────────────────────
   .ov__text 는 시작 안내·정답 해설·60초 경고 셋이 함께 쓴다. 셋 다 .ov__title 다음
   자리라 내보낸 :nth-of-type(2) 도 어차피 셋 모두에 걸린다. 순서 조건만 뗐다. */
.ov__text { letter-spacing: -0.06em !important; }
.choice__label { letter-spacing: -0.04em !important; }

/* ── 13차(2026-09-14) ── */
.tutorial__skip { transform: translate(-15px, 15px) !important; }