/* =====================================================================
 * 자바코치 — 가로폭 꽉 채우기 · 글자 키우기 (디자인 개편 위에 덮어쓴다)
 * ---------------------------------------------------------------------
 * [2026-11-09] 사장님: "가로폭이 쪼그라들어서 이상하게 줄바꿈된다. 꽉 채워야지.
 *   노안인 학생이 많은데 글자를 이렇게 작게 하면 어쩌자는 거냐. 원래 크기로 키워 달라.
 *   메뉴 안 글자는 너무 작고 흐릿해서 보이지도 않는다. 여백 진짜 싫으니 꽉꽉 채워라."
 *
 *   디자인 개편(PR #703)은
 *     · 본문을 1400px(결제·약관 1040~1104px)로 묶어 화면 가운데로 모았고,
 *     · 본문 기본 글자를 14px(예전 16px)로, 메뉴 보조 글자를 10~12px 옅은 회색으로 고정했다.
 *   글자 크기가 수백 군데에 px·!important 로 박혀 있어 하나하나 고치면 놓친다.
 *   그래서 본문 상자 전체를 예전 크기(16/14 ≈ 1.14배)로 키우고(zoom), 폭 제한은 모두 푼다.
 *
 *   ★ 이 파일은 디자인 CSS 들보다 뒤에 싣는다.
 *   ★ page-details.css 의 규칙은 @layer 안의 !important 라 바깥 규칙이 이기지 못한다.
 *     같은 이름의 층 안에 뒤따라 적어서 덮는다.
 * ===================================================================== */

/* ── 1. 가로폭: 최대 폭을 모두 푼다 (메뉴 옆을 끝까지 쓴다) ───────────────── */
html body.zc-prototype:not(.village-body):not(.zc-legacy) :is(.portal-page,.dashboard-page.dashboard-executive,.mypage-page,.unlock-page,.sparta-page-shell),
html body.zc-prototype:not(.village-body):not(.zc-legacy) .app-footer {
  max-width: none !important;
}
html body #prototypePage#prototypePage#prototypePage#prototypePage,
html body #prototypePage#prototypePage.pr-wrap:not([hidden]),
html body #prototypePage#prototypePage .pr-wrap:not([hidden]),
html body #prototypePage#prototypePage.pr-doc:not([hidden]),
html body #prototypePage#prototypePage .pr-bare-main > .pr-wrap:not([hidden]),
html body #prototypePage#prototypePage#prototypePage#prototypePage[data-prototype-page="payment"] .checkout-card-v2,
html body:has(#prototypePage .pr-doc-layout) main {
  max-width: none !important;
}
/* 요금 안내(메뉴 없는 화면)는 예전부터 1040px 로 묶여 있었다 — 이것도 푼다 */
html body.zc-prototype main.pricing-shell {
  max-width: none !important;
  width: auto !important;
  margin-inline: 0 !important;
}
@layer prototype-page-details {
  body.zc-prototype:has(#prototypePage) .pay-topbar,
  #prototypePage[data-prototype-page="payment"] .auth-shell,
  body:has(#prototypePage .prototype-doc-layout) main,
  body:has(#prototypePage[data-prototype-page="credit-charge"]) .cc-wrap {
    max-width: none !important;
  }
}

/* ── 2. 본문 글자: 예전 크기로 (본문 상자 전체를 1.14배) ─────────────────── */
html body.zc-prototype:not(.village-body):not(.zc-legacy) #prototypePage,
html body.zc-prototype:not(.village-body):not(.zc-legacy) .dashboard-page.dashboard-executive {
  zoom: 1.14;
}
/* 휴대폰은 화면이 좁아 조금만 키운다(가로로 넘치지 않게) */
@media (max-width: 600px) {
  html body.zc-prototype:not(.village-body):not(.zc-legacy) #prototypePage,
  html body.zc-prototype:not(.village-body):not(.zc-legacy) .dashboard-page.dashboard-executive {
    zoom: 1.06;
  }
}

/* ── 3. 왼쪽 메뉴: 작고 흐린 글자를 크고 진하게 ──────────────────────────── */
html body nav.sidebar#zcSidebar .nav-item,
html body nav.sidebar#zcSidebar .nav-item :is(.nav-text,.nav-text b,.nav-text strong) {
  font-size: 16px !important;
  line-height: 22px !important;
}
html body nav.sidebar#zcSidebar .nav-item { height: 44px !important; min-height: 44px !important; }
html body nav.sidebar#zcSidebar .nav-section-title,
html body nav.sidebar#zcSidebar .nav-section-title > span {
  font-size: 16px !important;
  line-height: 22px !important;
}
html body nav.sidebar#zcSidebar .nav-section-title { height: 44px !important; min-height: 44px !important; color: #33443D !important; }
html body nav.sidebar#zcSidebar .nav-subheader {
  font-size: 13px !important;
  line-height: 18px !important;
  height: auto !important;
}
html body nav.sidebar#zcSidebar #navSearchInput { font-size: 15px !important; }

/* 메뉴 이름 옆 꼬리표(Beta·선공개 등): 흰 글자가 민트 바탕에 묻혀 안 보였다 → 진한 글자 */
html body nav.sidebar#zcSidebar .nav-item .nav-text em,
html body nav.sidebar#zcSidebar .nav-item em {
  font-size: 13px !important;
  line-height: 18px !important;
  color: #053B30 !important;
  font-weight: 800 !important;
}

/* 공부 시간 카드 */
html body nav.sidebar#zcSidebar .sidebar-study-time-card,
html body nav.sidebar#zcSidebar .study-time-card-head,
html body nav.sidebar#zcSidebar .study-time-card-head :is(span,b,strong) {
  font-size: 14px !important;
  line-height: 20px !important;
  height: auto !important;
  color: #33443D !important;
}
html body nav.sidebar#zcSidebar .study-time-card-head em {
  font-size: 12px !important;
  line-height: 16px !important;
  height: auto !important;
  color: #23332D !important;
}
html body nav.sidebar#zcSidebar .sidebar-study-time-card small,
html body nav.sidebar#zcSidebar .sidebar-study-time-card small b {
  font-size: 13px !important;
  line-height: 19px !important;
  color: #33443D !important;
  word-break: keep-all !important;   /* '12분' 이 '12 / 분' 으로 갈라지지 않게 */
}
html body nav.sidebar#zcSidebar [data-study-time="today-clock"] { font-size: 26px !important; line-height: 32px !important; height: auto !important; }

/* 크레딧 · 내 이름 · 로그아웃 */
html body nav.sidebar#zcSidebar .sidebar-credit-label { font-size: 14px !important; color: #33443D !important; }
html body nav.sidebar#zcSidebar .sidebar-credit-value { font-size: 15px !important; }
html body nav.sidebar#zcSidebar .sidebar-credit-charge { font-size: 13px !important; }
html body nav.sidebar#zcSidebar :is(.profile-name) { font-size: 15px !important; }
/* 원래 규칙이 :is(.profile-action,#userPlanSide) 라 # 하나만큼 세다 — 같은 모양으로 맞춘다 */
html body nav.sidebar#zcSidebar :is(.profile-action,#userPlanSide) { font-size: 13px !important; line-height: 18px !important; color: #33443D !important; }
/* '선공개' 꼬리표 */
html body nav.sidebar#zcSidebar .nav-prerelease { font-size: 13px !important; height: 26px !important; min-height: 26px !important; }

/* ── 4. 스크롤: 화면 아래로 내려가지 않던 것 ([2026-11-09]) ─────────────────
 *  예전 틀은 #app-wrapper 를 화면 높이(100vh)로 두고 body 는 스크롤을 막은 채(overflow:hidden)
 *  본문(.main-content)이 안에서 스크롤했다. 디자인 개편이 #app-wrapper 를 display:block 으로,
 *  본문 높이를 auto 로 바꾸면서 본문이 화면보다 길게 늘어나기만 하고 스크롤 상자가 없어졌다.
 *  body 는 여전히 막혀 있어 화면 밖 내용에 닿을 수 없었다(사장님: "메뉴가 거의 다 안 내려간다").
 *  → 페이지 전체가 스크롤하게 연다. 왼쪽 메뉴는 position:fixed 라 그대로 붙어 있다. */
html body.zc-prototype:not(.village-body):not(.zc-legacy) {
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: visible !important;
}
html body.zc-prototype:not(.village-body):not(.zc-legacy) #app-wrapper {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

/* ── 5. 탭 화면(타자왕 등)이 가운데로 쪼그라들던 것 ([2026-11-09]) ─────────
 *  디자인 개편은 탭 칸(.kg-tab-panel 등)에 .pr-wrap 을 붙이는데, .pr-wrap 은 margin:0 auto 라
 *  격자(#prototypePage) 안에서 내용 폭만큼 줄어든다(1200px 중 893px). 폭을 꽉 채운다. */
html body #prototypePage#prototypePage .pr-wrap:not([hidden]) {
  width: 100% !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
}

/* ── 6. sparta 화면: 글을 불러오면 한 글자씩 세로로 나오던 것 ([2026-11-09]) ─────
 *  디자인이 지문 상자(.pr-sp-tbox)를 세로 flex 로 바꿨는데, 지문은 글자마다 <span class="char"> 다.
 *  flex 안의 글자 하나하나가 한 줄씩 차지해 '최 / 근 / 동 / 네' 로 세로로 늘어섰다.
 *  지문 상자는 보통 글 흐름(block)으로 되돌린다. */
html body #prototypePage#prototypePage#prototypePage#prototypePage .pr-sp-tbox:not([hidden]) {
  display: block !important;
}
html body #prototypePage#prototypePage#prototypePage#prototypePage .pr-sp-tbox > span.char {
  display: inline !important;
}

/* ── 7. 오타 히트맵: 키보드 칸 안에 스크롤이 생기던 것 ([2026-11-09]) ──────
 *  디자인이 키보드 칸(.th-kb-stage)을 430px 로 막고 넘치면 스크롤하게 했다. 글자를 키운 뒤
 *  키보드가 그보다 길어(486px) 칸 안에 스크롤바가 생겼다. 키보드는 잘리지 않고 다 보여야 한다. */
html body #prototypePage#prototypePage#prototypePage#prototypePage .th-kb-stage {
  max-height: none !important;
  overflow: visible !important;
}