/* v56.03.03 CCTV 저장용량 시뮬레이터 - 모바일 독립 스타일
   CCTV 시뮬레이터 모바일 전용 범위만 관리한다. */
@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  #cctv-simulator.page.active {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - 82px) !important;
    overflow: visible !important;
  }

  #cctv-simulator .cctv-sim-topbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 48px !important;
    margin: 0 0 9px !important;
  }
  #cctv-simulator .cctv-sim-heading { flex: 1 1 auto !important; min-width: 0 !important; }
  #cctv-simulator .cctv-sim-kicker,
  #cctv-simulator .cctv-sim-heading p { display: none !important; }
  #cctv-simulator .cctv-sim-heading h1 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #cctv-simulator .cctv-sim-top-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 5px !important;
  }
  #cctv-simulator .cctv-sim-action {
    min-height: 32px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  #cctv-simulator .cctv-sim-top-actions > .cctv-sim-action:not(.cctv-sim-mobile-action) { display: none !important; }
  #cctv-simulator .cctv-sim-mobile-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; }
  #cctv-simulator .cctv-sim-mobile-action span {
    min-width: 15px !important;
    padding: 1px 4px !important;
    border-radius: 99px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 8px !important;
  }

  #cctv-simulator .cctv-sim-shell {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #cctv-simulator .cctv-sim-workspace {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    gap: 8px !important;
    border-radius: 15px !important;
    overflow: visible !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.07) !important;
  }

  #cctv-simulator .cctv-sim-profile-row {
    flex: 0 0 auto !important;
    height: 64px !important;
    gap: 5px !important;
  }
  #cctv-simulator .cctv-sim-profile-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0 !important;
    min-width: 0 !important;
    height: 64px !important;
    padding: 7px 8px !important;
    border-radius: 11px !important;
  }
  #cctv-simulator .cctv-sim-profile-card > span { font-size: 6.5px !important; }
  #cctv-simulator .cctv-sim-profile-card > strong { font-size: 10px !important; }
  #cctv-simulator .cctv-sim-profile-card > em {
    display: block !important;
    margin-top: 3px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
  /* v56.03.11: 모바일 상단 프로필의 중복 Bitrate 문구는 숨기고 결과 카드에만 표시 */
  #cctv-simulator .cctv-sim-profile-card > small { display: none !important; }

  #cctv-simulator .cctv-sim-result-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  #cctv-simulator .cctv-sim-result-grid > section { min-height: 0 !important; border-radius: 12px !important; }

  #cctv-simulator .cctv-sim-hero-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 84px !important;
    grid-template-rows: auto auto !important;
    min-height: 166px !important;
    padding: 13px 12px 10px !important;
  }
  #cctv-simulator .cctv-sim-hero-copy > strong b { font-size: 38px !important; }
  #cctv-simulator .cctv-sim-drive-visual { width: 72px !important; height: 72px !important; }
  #cctv-simulator .cctv-sim-drive-ring { --sim-drive-ring-width: 5px; }
  #cctv-simulator .cctv-sim-drive-ring span { font-size: 14px !important; }
  #cctv-simulator .cctv-sim-drive-ring::after { bottom: 14px !important; font-size: 6.5px !important; }
  #cctv-simulator .cctv-sim-hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; }
  #cctv-simulator .cctv-sim-hero-meta > span { padding: 6px 7px !important; }

  #cctv-simulator .cctv-sim-gauge-card,
  #cctv-simulator .cctv-sim-codec-card,
  #cctv-simulator .cctv-sim-tech-card,
  #cctv-simulator .cctv-sim-retention-card,
  #cctv-simulator .cctv-sim-compare-card { padding: 10px !important; }

  #cctv-simulator .cctv-sim-tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #cctv-simulator .cctv-sim-retention-row { grid-template-columns: 34px minmax(0, 1fr) 60px !important; }
  #cctv-simulator .cctv-sim-footnote {
    white-space: normal !important;
    text-align: left !important;
    padding: 2px 2px 5px !important;
    font-size: 8px !important;
  }

  #cctv-simulator .cctv-sim-settings,
  #cctv-simulator .cctv-sim-history {
    position: fixed !important;
    z-index: 12020 !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: auto !important;
    max-height: min(78dvh, 640px) !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(148,163,184,.35) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.34) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 26px)) !important;
    transition: transform .28s cubic-bezier(.2,.82,.25,1), opacity .2s ease, visibility .2s ease !important;
  }
  #cctv-simulator .cctv-sim-settings.is-open,
  #cctv-simulator .cctv-sim-history.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  #cctv-simulator .cctv-sim-sheet-head {
    position: sticky !important;
    top: -14px !important;
    z-index: 2 !important;
    margin: -14px -14px 10px !important;
    padding: 13px 14px 10px !important;
    border-bottom: 1px solid #edf0f4 !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(10px) !important;
  }
  #cctv-simulator .cctv-sim-sheet-close {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }
  #cctv-simulator .cctv-sim-field { padding: 12px 0 !important; }
  #cctv-simulator .cctv-sim-number-row button,
  #cctv-simulator .cctv-sim-number-row input { height: 39px !important; }
  #cctv-simulator .cctv-sim-segment button { height: 38px !important; font-size: 11px !important; }
  #cctv-simulator .cctv-sim-input-summary { margin-bottom: 2px !important; }

  #cctv-simulator .cctv-sim-history { max-height: 72dvh !important; }
  #cctv-simulator .cctv-sim-history-head { align-items: center !important; }
  #cctv-simulator .cctv-sim-history-actions { display: flex !important; gap: 4px !important; }
  #cctv-simulator .cctv-sim-history-actions > button:not(.cctv-sim-sheet-close) { height: 29px !important; }
  #cctv-simulator .cctv-sim-history-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    height: auto !important;
    max-height: 48dvh !important;
    padding: 0 1px 2px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #cctv-simulator .cctv-sim-history-card {
    flex: none !important;
    width: 100% !important;
    min-height: 68px !important;
  }
  #cctv-simulator .cctv-sim-history-empty { min-height: 100px !important; }

  #cctv-simulator .cctv-sim-sheet-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 12010 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(15,23,42,.42) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease, visibility .2s ease !important;
  }
  #cctv-simulator .cctv-sim-sheet-backdrop.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #cctv-simulator .cctv-sim-toast {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 10px !important;
  }
}

@media (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  #cctv-simulator .cctv-sim-profile-row { height: 54px !important; }
  #cctv-simulator .cctv-sim-profile-card { height: 54px !important; padding: 5px 7px !important; }
  #cctv-simulator .cctv-sim-hero-card { min-height: 144px !important; }
  #cctv-simulator .cctv-sim-settings,
  #cctv-simulator .cctv-sim-history { max-height: 88dvh !important; }
}

/* v56.03.04 - 시뮬레이터 모바일 전용 신규 입력영역 */
@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  #cctv-simulator .cctv-sim-field-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }
  #cctv-simulator .cctv-sim-pair-help {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }
  #cctv-simulator .cctv-sim-encoding-box {
    margin-top: 10px !important;
    padding: 11px !important;
    border-radius: 14px !important;
  }
  #cctv-simulator .cctv-sim-encoding-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }
  #cctv-simulator .cctv-sim-encoding-grid .cctv-sim-segment button {
    height: 34px !important;
    font-size: 9.5px !important;
  }
  #cctv-simulator .cctv-sim-bitrate-row {
    grid-template-columns: minmax(0, 1fr) 92px 52px !important;
    margin-top: 10px !important;
  }
  #cctv-simulator .cctv-sim-bitrate-row input,
  #cctv-simulator .cctv-sim-bitrate-row button { height: 36px !important; }
  #cctv-simulator .cctv-sim-range-scale { height: 16px !important; }
  #cctv-simulator .cctv-sim-profile-card > em { font-size: 12.5px !important; }
}

/* v56.03.05 - 모바일 독립 입력 컨트롤 보정 */
@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  #cctv-simulator .cctv-sim-resolution-row select { height: 40px !important; font-size: 11px !important; }
  #cctv-simulator .cctv-sim-range-wrap { padding-top: 22px !important; }
  #cctv-simulator .cctv-sim-range { height: 18px !important; }
  #cctv-simulator .cctv-sim-range-bubble { font-size: 8.5px !important; }
  #cctv-simulator .cctv-sim-range-scale { height: auto !important; font-size: 9px !important; }
  #cctv-simulator .cctv-sim-number-row-small button,
  #cctv-simulator .cctv-sim-number-row-small input { height: 38px !important; }
  #cctv-simulator .cctv-sim-bitrate-row { grid-template-columns: minmax(0, 1fr) 104px 54px !important; }
  #cctv-simulator .cctv-sim-bitrate-row input { font-size: 11px !important; }
  #cctv-simulator .cctv-sim-profile-card > strong { font-size: 10.5px !important; }
  #cctv-simulator .cctv-sim-profile-card > em { font-size: 12px !important; }
  #cctv-simulator .cctv-sim-card-head strong { font-size: 12px !important; }
  #cctv-simulator .cctv-sim-card-head span { font-size: 8.8px !important; }
  #cctv-simulator .cctv-sim-gauge span,
  #cctv-simulator .cctv-sim-gauge strong { font-size: 10px !important; }
  #cctv-simulator .cctv-sim-codec-bars span,
  #cctv-simulator .cctv-sim-codec-bars strong { font-size: 9.5px !important; }
}


/* v56.03.06 - 모바일 시뮬레이터 독립 보정 */
@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  #cctv-simulator .cctv-sim-input-summary {
    min-height: 52px !important;
    padding: 9px 10px !important;
  }
  #cctv-simulator .cctv-sim-input-summary strong {
    white-space: normal !important;
    line-height: 1.35 !important;
  }
  #cctv-simulator .cctv-sim-history-title {
    display: block !important;
  }
  #cctv-simulator .cctv-sim-history-title strong,
  #cctv-simulator .cctv-sim-history-title span { display: block !important; }
  #cctv-simulator .cctv-sim-history-title span { margin-top: 2px !important; }
  #cctv-simulator .cctv-sim-history-card {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) 24px !important;
    min-height: 58px !important;
    height: auto !important;
    padding: 7px 5px 7px 10px !important;
  }
  #cctv-simulator .cctv-sim-history-card > .cctv-sim-history-time {
    font-size: 8.5px !important;
  }
  #cctv-simulator .cctv-sim-history-copy strong { font-size: 10px !important; }
  #cctv-simulator .cctv-sim-history-copy em { font-size: 9.5px !important; }
  #cctv-simulator .cctv-sim-history-delete { position: static !important; }
  #cctv-simulator .cctv-sim-codec-bars > div {
    grid-template-columns: 48px minmax(0, 1fr) 105px !important;
  }
}


/* v56.03.07 - 모바일 시뮬레이터 고정 해상도/2단 요약 */
@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  #cctv-simulator .cctv-sim-input-summary {
    min-height: 76px !important;
    padding: 9px 10px !important;
  }
  #cctv-simulator .cctv-sim-input-summary-title {
    margin-bottom: 6px !important;
  }
  #cctv-simulator .cctv-sim-input-summary-lines {
    gap: 5px !important;
  }
  #cctv-simulator .cctv-sim-input-summary-lines > div {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 6px !important;
  }
  #cctv-simulator .cctv-sim-input-summary-lines small {
    font-size: 8.5px !important;
  }
  #cctv-simulator .cctv-sim-input-summary-lines strong {
    font-size: 9.6px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
}

/* v56.03.14 모바일 상단 3단계 카드: 제목과 용량을 한 줄에 배치해 높이 축소 */
@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  #cctv-simulator .cctv-sim-profile-row {
    height: 44px !important;
    gap: 5px !important;
  }
  #cctv-simulator .cctv-sim-profile-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 3px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 5px 7px !important;
  }
  #cctv-simulator .cctv-sim-profile-card > span,
  #cctv-simulator .cctv-sim-profile-card > small {
    display: none !important;
  }
  #cctv-simulator .cctv-sim-profile-card > strong {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #cctv-simulator .cctv-sim-profile-card > em {
    display: block !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
}
@media (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  #cctv-simulator .cctv-sim-profile-row,
  #cctv-simulator .cctv-sim-profile-card {
    height: 40px !important;
    min-height: 40px !important;
  }
}

@media (max-width:760px) {
  #cctv-simulator .cctv-sim-field-compare { white-space: normal; align-items:flex-start; }
  #cctv-simulator .cctv-sim-field-compare span { font-size: 8.5px; line-height: 1.35; }
}
/* JH 모바일 공통 UI (v56.03.38)
   메뉴별 전용 규칙은 runtime/domains/<기능>/mobile.css에서 관리한다.
   이 파일에는 여러 화면이 실제로 함께 사용하는 모바일 셸/상단바/목록/팝업 규칙만 둔다.
   - 실제 검색 입력창을 상단에 직접 이동
   - 공통 목록은 원래 table 구조를 유지
   - 기능별 레이아웃/보정 규칙 신규 추가 금지 */

.mobile-context-action,
.mobile-header-search-wrap,
.jh-mobile-only {
  display: none;
}

@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  html,
  body,
  .layout,
  .main,
  .page,
  .page.active {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* 상단 공통영역 ------------------------------------------------------- */
  .layout {
    display: block !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: calc(7px + env(safe-area-inset-top, 0px)) 9px 7px !important;
    border-radius: 0 0 14px 14px !important;
    overflow: visible !important;
    z-index: 9000 !important;
    background: #111827 !important;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .18) !important;
  }

  .sidebar-topline {
    position: relative !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .sidebar-topline .brand-logo {
    order: 1 !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 38px !important;
    padding: 5px 2px !important;
    overflow: hidden !important;
  }

  .sidebar-topline .brand-logo img {
    width: 100% !important;
    height: 100% !important;
    max-height: 27px !important;
    object-fit: contain !important;
  }

  .mobile-context-action {
    order: 2 !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
  }

  .mobile-context-action:not([hidden]) { display: inline-flex !important; }
  .mobile-context-action svg { width: 21px; height: 21px; fill: currentColor; }
  .mobile-context-action .mobile-context-icon-close { display: none; }
  .mobile-context-action.is-close .mobile-context-icon-back { display: none; }
  .mobile-context-action.is-close .mobile-context-icon-close { display: block; }

  .mobile-header-search-wrap {
    order: 3 !important;
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 70px !important;
    height: 38px !important;
  }

  .mobile-header-search-wrap:not([hidden]) { display: flex !important; }
  .mobile-header-search-host {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mobile-header-search-host > input,
  .jh-mobile-header-search-input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 33px 0 10px !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    border-radius: 10px !important;
    outline: 0 !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }

  .mobile-header-search-host > input:focus {
    border-color: #fca5a5 !important;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, .18) !important;
  }

  .mobile-header-search-clear {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    width: 28px !important;
    height: 28px !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  .mobile-header-search-clear[hidden] { display: none !important; }

  .sidebar-topline .mobile-account-toggle,
  .sidebar-topline .sidebar-toggle {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  /* 계정 + 메뉴는 검색 유무와 관계없이 항상 우측에 붙인다.
     검색이 없는 화면에서도 계정 버튼이 로고 옆으로 당겨지지 않도록
     account 버튼이 남는 공간을 흡수하고 메뉴 버튼은 바로 뒤를 따른다. */
  .sidebar-topline .mobile-account-toggle { order: 4 !important; margin-left: auto !important; }
  .sidebar-topline .sidebar-toggle { order: 5 !important; margin-left: 0 !important; }

  .sidebar .menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 9px !important;
    left: auto !important;
    width: min(286px, calc(100vw - 18px)) !important;
    max-height: calc(100dvh - 76px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .main {
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    padding: calc(65px + env(safe-area-inset-top, 0px)) 9px 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }

  /* 목록 화면의 원래 검색/필터 영역은 상단 실제 입력창 이동 후 비움 */
  .page.active .jh-list-search-actions,
  .page.active .site-list-search-actions,
  .page.active .expense-list-search-actions,
  .page.active .revenue-list-search-actions,
  .page.active .money-list-search-actions {
    display: none !important;
  }

  /* 페이지/상세 상단: 왼쪽 제목, 오른쪽 동작 --------------------------- */
  .page > .topbar,
  .page > .detail-header,
  #site-detail > .detail-header,
  #site-register > .topbar,
  .modal-header,
  .modal-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  .page > .topbar,
  .page > .detail-header,
  #site-detail > .detail-header,
  #site-register > .topbar {
    min-height: 40px !important;
    margin: 0 0 10px !important;
    padding: 0 1px !important;
  }

  .page > .topbar > :first-child,
  .page > .detail-header > :first-child,
  .modal-header > :first-child,
  .modal-head > :first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .page h1,
  .page > .topbar h1,
  .page > .detail-header h1 {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  .page > .topbar .device-actions,
  .page > .topbar .detail-actions,
  .page > .detail-header .detail-actions,
  .modal-header-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: auto !important;
    max-width: 62% !important;
    min-width: 0 !important;
  }

  .page > .topbar .btn,
  .page > .detail-header .btn,
  .modal-header .btn,
  .modal-header .modal-close {
    min-height: 32px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .page > .topbar .sub,
  .page > .topbar p,
  .page > .detail-header .sub,
  .section-title .small,
  .modal-header .small,
  .card-sub {
    display: none !important;
  }

  .section-title,
  .jh-list-title-row,
  .jh-list-title-heading {
    min-width: 0 !important;
  }

  .jh-list-title-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-bottom: 7px !important;
  }

  .jh-list-title-heading {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .jh-list-title-row h2,
  .section-title h2 {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  .jh-title-action,
  .small-btn {
    min-height: 28px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* 목록 공통 ----------------------------------------------------------- */
  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page .card {
    min-width: 0 !important;
  }

  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page .jh-mobile-unified-list-wrap,
  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
  }

  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table th,
  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table td {
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    padding: 7px 6px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1f5 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
  }

  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table th {
    height: 34px !important;
    background: #f6f8fb !important;
    color: #475569 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table tbody tr:last-child > td {
    border-bottom: 0 !important;
  }

  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table tbody tr:not(.empty-row):active > td {
    background: #f8fafc !important;
  }

  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table td > *,
  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table td strong,
  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table td a,
  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table td span {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table tr.empty-row > td,
  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table tr.site-search-empty-row > td,
  :is(#site,#schedule,#estimate,#report,#company,#material,#expense,#revenue,#money,#public-library).page table.jh-mobile-unified-list-table tr.worklog-empty-row > td {
    display: table-cell !important;
    width: auto !important;
    padding: 16px 8px !important;
    text-align: center !important;
    white-space: normal !important;
  }


  /* 팝업/상세 ----------------------------------------------------------- */
  .modal-backdrop {
    padding: calc(61px + env(safe-area-inset-top, 0px)) 5px 5px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }

  .modal-backdrop > .modal,
  .modal-backdrop > .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 66px - env(safe-area-inset-top, 0px)) !important;
    max-height: calc(100dvh - 66px - env(safe-area-inset-top, 0px)) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .modal-backdrop > .modal > .modal-header,
  .modal-backdrop > .modal > .modal-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    margin: 0 0 8px !important;
    padding: 8px 9px !important;
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  .jh-mobile-native-dismiss,
  .jh-mobile-page-return-source,
  .jh-mobile-modal-close,
  .jh-mobile-list-return,
  .jh-mobile-duplicate-return {
    display: none !important;
  }

  .form-grid,
  .form-grid.two-col,
  .form-grid.three-col,
  .grid-2,
  .grid-3,
  .grid-4 {
    min-width: 0 !important;
  }

  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .modal input,
  .modal select,
  .modal textarea {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.mobile-menu-open .sidebar { z-index: 10000 !important; }
  body.mobile-menu-open .mobile-header-search-wrap { visibility: hidden !important; }
}

@media (max-width: 390px) {
  .sidebar-topline .brand-logo { flex-basis: 40px !important; width: 40px !important; min-width: 40px !important; }
  .mobile-context-action,
  .sidebar-topline .mobile-account-toggle,
  .sidebar-topline .sidebar-toggle { flex-basis: 36px !important; width: 36px !important; min-width: 36px !important; height: 36px !important; }
  .mobile-header-search-wrap,
  .mobile-header-search-host > input,
  .jh-mobile-header-search-input { height: 36px !important; }
}

/* 펼친 모바일 메뉴는 화면 가로폭을 전부 사용하고 항목을 2열로 정렬합니다. */
@media (max-width: 760px) and (orientation: portrait) {
  body.mobile-menu-open .sidebar .menu {
    right: 9px !important;
    left: 9px !important;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    align-items: stretch !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  body.mobile-menu-open .sidebar .menu .sidebar-menu-section {
    display: contents !important;
  }
  body.mobile-menu-open .sidebar .menu .menu-section-title {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-height: 18px !important;
    margin: 5px 0 0 !important;
    padding: 2px 5px !important;
    border: 0 !important;
    color: #aeb8c7 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }
  body.mobile-menu-open .sidebar .menu .sidebar-menu-section:first-child .menu-section-title {
    margin-top: 0 !important;
  }
  body.mobile-menu-open .sidebar .menu a,
  body.mobile-menu-open .sidebar .menu .mobile-logout-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 39px !important;
    margin: 0 !important;
    padding: 8px 9px !important;
    gap: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 11px !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  body.mobile-menu-open .sidebar .menu a::before,
  body.mobile-menu-open .sidebar .menu .mobile-logout-link::before {
    flex: 0 0 18px !important;
    width: 18px !important;
  }
  body.mobile-menu-open .sidebar .menu .menu-text {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.mobile-menu-open .sidebar .menu > .mobile-logout-link {
    grid-column: 1 / -1 !important;
  }
}
/* v56.03.37 대시보드 모바일 전용 규칙
   - 대시보드 모바일 전용 규칙
   - UI 값/동작 변경 없이 기존 cascade 순서를 유지 */

@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  /* 모바일에서 불필요한 PC 보조 동작 */
  #dashboard .dashboard-card-sub,
  #dashboard .dashboard-panel-head p,
  #dashboard .dashboard-block-head > span,
  #dashboard .dashboard-distribution-head span,
  #dashboard .dashboard-metric small,
  #dashboard .dashboard-metric-chart-hint {
    display: none !important;
  }
}
/* JH 업무관리 모바일 전용 CSS
   v56.03.28 CSS 분할 2차
   - 업무관리 모바일 전용 규칙
   - 목록/카드의 공통 기반 규칙은 공통 CSS에 유지
   - 화면 디자인, 수치, 기능은 변경하지 않음 */

.worklog-mobile-detail-btn {
  display: none;
}

@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  /* 업무관리의 원래 검색/필터 영역은 상단 실제 입력창 이동 후 비움 */
  .page.active .worklog-list-search-actions {
    display: none !important;
  }

  /* 업무관리: 접수일 · 상태 · 현장명 */
  #schedule .worklog-table th:nth-child(n+4),
  #schedule .worklog-table td:nth-child(n+4) { display: none !important; }
  #schedule .worklog-table th:nth-child(1), #schedule .worklog-table td:nth-child(1) { width: 72px !important; }
  #schedule .worklog-table th:nth-child(2), #schedule .worklog-table td:nth-child(2) { width: 68px !important; text-align: center !important; }
  #schedule .worklog-table th:nth-child(3), #schedule .worklog-table td:nth-child(3) { width: auto !important; }
  #schedule .worklog-site-cell-main { display: flex !important; align-items: center !important; gap: 5px !important; min-width: 0 !important; }
  #schedule .worklog-site-link {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    /* 모바일 업무목록의 행 클릭은 업무상세가 기준. 현장 이동은 업무상세의 현장보기에서 처리한다. */
    pointer-events: none !important;
    cursor: default !important;
  }
  #schedule .worklog-mobile-detail-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    min-height: 26px !important;
    padding: 3px 6px !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 7px !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 9px !important;
  }
}

@media (max-width: 680px) {
  /* 업무관리: 제목 오른쪽에 기간과 등록을 나란히 두고 6개 카드는 3열 × 2행 */
  #schedule .topbar {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #schedule .worklog-top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  #schedule .worklog-period-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 9px !important;
    color: #35527d !important;
    border: 1px solid #ccd9ed !important;
    border-radius: 999px !important;
    background: #f4f8ff !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }
  #schedule .worklog-period-inline > span { font-size: 8px !important; font-weight: 750 !important; opacity: .75; }
  #schedule .worklog-period-inline > strong { font-size: 9px !important; font-weight: 900 !important; }
  #schedule .worklog-top-actions > .btn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
  }

  /* 공통 요약카드의 기존 수치를 업무관리 전용 파일에서도 동일하게 유지 */
  #schedule .worklog-dashboard {
    display: grid !important;
    flex-wrap: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 7px !important;
    margin: 0 0 11px !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }
  #schedule .worklog-dashboard { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  #schedule .worklog-dashboard > .card {
    display: grid !important;
    align-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 62px !important;
    padding: 8px 8px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.055) !important;
    scroll-snap-align: none !important;
  }
  #schedule .worklog-dashboard .card-title {
    margin: 0 0 3px !important;
    overflow: hidden !important;
    color: #536071 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #schedule .worklog-dashboard .card-value {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #schedule .worklog-dashboard .card-sub { display: none !important; }

  /* 업무관리 색상은 기존 계열을 유지하고 선택선만 또렷하게 표시 */
  #schedule .worklog-dashboard > .card:nth-child(1) { background: #eff6ff !important; }
  #schedule .worklog-dashboard > .card:nth-child(2) { background: #fff7ed !important; }
  #schedule .worklog-dashboard > .card:nth-child(3) { background: #f0fdf4 !important; }
  #schedule .worklog-dashboard > .card:nth-child(4) { background: #eef2ff !important; }
  #schedule .worklog-dashboard > .card:nth-child(5) { background: #fff1f2 !important; }
  #schedule .worklog-dashboard > .card:nth-child(6) { background: #f8fafc !important; }
  #schedule .worklog-dashboard > .card.active,
  #schedule .worklog-dashboard > .card[aria-pressed="true"] {
    border-color: #4f6688 !important;
    box-shadow: inset 0 0 0 1px rgba(51,65,85,.13), 0 5px 14px rgba(15,23,42,.07) !important;
  }
}

@media (max-width: 360px) {
  #schedule .worklog-period-inline { padding-inline: 7px !important; }
  #schedule .worklog-period-inline > span { display: none !important; }
}
/* v56.03.29 · 현장관리 모바일 전용 CSS
   현장관리 모바일 전용 규칙.
   공통 모바일 상단바·목록 컴포넌트는 runtime/common/mobile.css가 담당한다. */

@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  /* 현장관리: 접수일 · 상태 · 현장명 */
  #site .site-list-card th:nth-child(n+4),
  #site .site-list-card .site-row td:nth-child(n+4) { display: none !important; }
  #site .site-list-card th:nth-child(1), #site .site-list-card .site-row td:nth-child(1) { width: 72px !important; }
  #site .site-list-card th:nth-child(2), #site .site-list-card .site-row td:nth-child(2) { width: 68px !important; text-align: center !important; }
  #site .site-list-card th:nth-child(3), #site .site-list-card .site-row td:nth-child(3) { width: auto !important; }
  #site .site-row td:nth-child(3) { font-weight: 750 !important; }

  #site .detail-expand-row { display: none; }
  #site .detail-expand-row.is-open { display: table-row !important; }
  #site .detail-expand-row > .site-quick-detail-cell {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    padding: 8px !important;
    white-space: normal !important;
    overflow: visible !important;
    background: #f8fafc !important;
  }
  #site .site-note-rows { display: grid !important; gap: 5px !important; }
  #site .site-note-row {
    display: grid !important;
    grid-template-columns: 56px minmax(0,1fr) !important;
    gap: 6px !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  #site .site-note-label { font-size: 10px !important; font-weight: 800 !important; color: #64748b !important; }
  #site .site-note-value {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }
  #site .site-quick-detail-actions { display: flex !important; justify-content: flex-end !important; margin-top: 7px !important; }
  #site .site-quick-detail-actions .btn { min-height: 29px !important; padding: 4px 8px !important; font-size: 10px !important; }
}
/* v56.03.30 · 문서관리 모바일 전용 CSS
   문서관리 모바일 전용 규칙.
   공통 상단바·목록 테이블·공통 팝업은 runtime/common/mobile.css 및 common source가 담당한다. */

@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  /* 문서관리의 원래 검색/필터 영역은 상단 실제 입력창 이동 후 비움 */
  .page.active .quote-list-search-actions {
    display: none !important;
  }

  /* 문서관리: 구분 · 상태 · 현장/거래처 */
  #estimate .quote-list-table th:nth-child(3), #estimate .quote-list-table td:nth-child(3),
  #estimate .quote-list-table th:nth-child(4), #estimate .quote-list-table td:nth-child(4),
  #estimate .quote-list-table th:nth-child(n+6), #estimate .quote-list-table td:nth-child(n+6) { display: none !important; }
  #estimate .quote-list-table th:nth-child(1), #estimate .quote-list-table td:nth-child(1) { width: 68px !important; }
  #estimate .quote-list-table th:nth-child(2), #estimate .quote-list-table td:nth-child(2) { width: 66px !important; text-align: center !important; }
  #estimate .quote-list-table th:nth-child(5), #estimate .quote-list-table td:nth-child(5) { width: auto !important; }
}

@media (max-width: 680px) {
  /* 문서목록 요약카드의 기존 모바일 값을 그대로 독립 보존 */
  .quote-document-dashboard {
    display: grid !important;
    flex-wrap: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 7px !important;
    margin: 0 0 11px !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }
  .quote-document-dashboard > .card {
    display: grid !important;
    align-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 62px !important;
    padding: 8px 8px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.055) !important;
    scroll-snap-align: none !important;
  }
  .quote-document-dashboard .card-title {
    margin: 0 0 3px !important;
    overflow: hidden !important;
    color: #536071 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .quote-document-dashboard .card-value {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .quote-document-dashboard .card-sub { display: none !important; }

  /* 기존 문서카드 압축값 */
  .quote-document-dashboard > .card { min-height: 57px !important; padding-inline: 5px !important; }
  .quote-document-dashboard .card-title { font-size: 8px !important; }
  .quote-document-dashboard .card-value { font-size: 13px !important; }

  /* v56.03.25에서 확정된 문서카드 비율/정렬 */
  .quote-document-dashboard {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    overflow-x: hidden !important;
  }
  .quote-document-dashboard > [data-summary-kind="money"] {
    grid-column: span 2 !important;
  }
  .quote-document-dashboard > .card {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    align-content: center !important;
    min-height: 52px !important;
    padding: 7px 9px !important;
    gap: 5px !important;
  }
  .quote-document-dashboard .card-title {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    color: #536071 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
  .quote-document-dashboard .card-value {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }
  .quote-document-dashboard [data-summary-kind="money"] .card-value {
    font-size: 12px !important;
    letter-spacing: -.045em !important;
  }
}

@media (max-width: 360px) {
  /* 기존 최종 규칙: 작은 화면에서도 문서 요약카드는 4열 유지 */
  .quote-document-dashboard { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
/* v56.03.31 · 자재관리 모바일 전용 CSS
   자재관리 모바일 전용 규칙.
   공통 상단바·목록 스킨은 runtime/common/mobile.css가 담당하고, 자재 요약카드는 이 파일에서 완결한다. */

@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  /* 자재관리의 원래 검색/필터 영역은 상단 실제 입력창 이동 후 비움 */
  .page.active .material-list-search-actions {
    display: none !important;
  }

  /* 자재: 모델명 · 규격 · 마지막 입고가 */
  #material .material-main-card th:not(:nth-child(4)):not(:nth-child(5)):not(:nth-child(9)),
  #material .material-main-card td:not(:nth-child(4)):not(:nth-child(5)):not(:nth-child(9)) { display: none !important; }
  #material .material-main-card th:nth-child(4), #material .material-main-card td:nth-child(4) { width: 42% !important; }
  #material .material-main-card th:nth-child(5), #material .material-main-card td:nth-child(5) { width: 36% !important; }
  #material .material-main-card th:nth-child(9), #material .material-main-card td:nth-child(9) { width: 22% !important; text-align: right !important; }

  /* colspan 안내행은 열 숨김 규칙보다 우선한다. */
  #material .material-main-card tbody tr:not(.material-row) > td {
    display: table-cell !important;
    width: auto !important;
    padding: 16px 8px !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

@media (max-width: 680px) {
  /* v56.03.24~25 자재 요약카드 — 기존 통합 모바일 CSS의 선언값을 그대로 이관 */
  #material .material-dashboard {
    display: grid !important;
    flex-wrap: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 7px !important;
    margin: 0 0 11px !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    grid-template-columns: minmax(0,.82fr) minmax(0,.82fr) minmax(0,.82fr) minmax(0,1.42fr) !important;
  }

  #material .material-dashboard > .card {
    display: grid !important;
    align-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.055) !important;
    scroll-snap-align: none !important;

    /* v56.03.25 최종 배치 */
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 7px 9px !important;
    gap: 5px !important;
  }

  #material .material-dashboard .card-title {
    color: #536071 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;

    /* v56.03.25 최종 배치 */
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #material .material-dashboard .card-value {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    /* v56.03.25 최종 배치 */
    font-size: 16px !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
  }

  #material .material-dashboard .card-sub { display: none !important; }

  #material .material-dashboard [data-summary-kind="money"] .card-value {
    font-size: 12px !important;
    letter-spacing: -.045em !important;
  }
}
/* v56.03.33 · 자료실 모바일 전용 CSS
   자료실 모바일 전용 목록/요약카드/제품군 필터 규칙.
   공통 상단바·목록 테이블 스킨은 runtime/common/mobile.css가 담당한다. */

@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  /* 원래 검색/필터 영역은 상단 실제 입력창 이동 후 비움 */
  .page.active .library-list-search-actions {
    display: none !important;
  }

  /* 모바일 상단에서는 자료실 안내 문구를 숨김 */
  #libraryListHelp {
    display: none !important;
  }

  /* 자료실: 제목(버전) · 다운로드 */
  #public-library .library-table th:nth-child(-n+4),
  #public-library .library-table td:nth-child(-n+4) { display: none !important; }
  #public-library .library-table th:nth-child(5), #public-library .library-table td:nth-child(5) { width: auto !important; text-align: left !important; }
  #public-library .library-table th:nth-child(6), #public-library .library-table td:nth-child(6) { width: 88px !important; text-align: center !important; }

  #public-library .library-download-link {
    min-width: 68px !important;
    min-height: 28px !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }
  #public-library .library-download-link.is-available { background: #dcfce7 !important; color: #15803d !important; }
  #public-library .library-download-link.is-locked { background: #fee2e2 !important; color: #b91c1c !important; }

  /* colspan 안내행은 열 숨김 규칙보다 우선 */
  #public-library .library-table tbody tr.empty-row > td {
    display: table-cell !important;
    width: auto !important;
    padding: 16px 8px !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

@media (max-width: 680px) {
  /* v56.03.24~25 자료실 요약카드 — 기존 통합 모바일 CSS 선언값 그대로 이관 */
  #public-library .library-dashboard {
    display: grid !important;
    flex-wrap: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 7px !important;
    margin: 0 0 11px !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }

  #public-library .library-dashboard > .card {
    display: grid !important;
    align-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.055) !important;
    scroll-snap-align: none !important;

    /* v56.03.25 최종 배치 */
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 7px 9px !important;
    gap: 5px !important;
  }

  #public-library .library-dashboard .card-title {
    color: #536071 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;

    /* v56.03.25 최종 배치 */
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #public-library .library-dashboard .card-value {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    /* v56.03.25 최종 배치 */
    font-size: 16px !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
  }

  #public-library .library-dashboard .card-sub { display: none !important; }

  /* 자료실 제품군은 화살표/가로 스크롤 없이 화면 폭을 4등분 */
  #libraryManufacturerPager.library-sub-filter-pager {
    display: block !important;
    width: 100% !important;
    padding: 7px !important;
    box-sizing: border-box !important;
  }
  #libraryManufacturerPager .library-sub-filter-pager-side { display: none !important; }

  #libraryManufacturerFilterBar.library-sub-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #libraryManufacturerFilterBar .library-mini-filter {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 5px 3px !important;
    overflow: visible !important;
    border-radius: 11px !important;
    font-size: 8.5px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  #libraryManufacturerFilterBar .library-mini-filter > span {
    min-width: 0 !important;
    overflow: visible !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #libraryManufacturerFilterBar .library-mini-filter > em {
    flex: 0 0 auto !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    font-size: 8px !important;
  }
}
/* v56.03.34 · 주소록 모바일 전용 CSS
   주소록 모바일 전용 검색/목록 열 규칙.
   공통 상단바·공통 목록 테이블 스킨은 runtime/common/mobile.css가 담당한다. */

@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  /* 주소록의 원래 검색 입력은 모바일 공통 헤더 검색창으로 이동 후 비움 */
  #company.page.active .device-actions > .top-search-input {
    display: none !important;
  }

  /* 주소록: 모바일 목록은 회사명만 표시 */
  #company .company-address-wrap th:nth-child(n+2),
  #company .company-address-wrap td:nth-child(n+2) {
    display: none !important;
  }

  #company .company-address-wrap th:nth-child(1),
  #company .company-address-wrap td:nth-child(1) {
    width: 100% !important;
    text-align: left !important;
  }
}
/* v56.03.32 · 매입/매출/입출금 모바일 전용 CSS
   금액관리 3개 메뉴 모바일 전용 규칙.
   세 메뉴가 같은 목록/요약카드 패턴을 공유하므로 finance 도메인 파일 하나에서 관리한다.
   공통 상단바·목록 테이블 구조는 runtime/common/mobile.css가 담당한다. */

@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  /* 매입 · 매출 · 입출금: 모바일 목록은 앞 3열만 표시 */
  #expense .expense-table th:nth-child(n+4), #expense .expense-table td:nth-child(n+4),
  #revenue .revenue-table th:nth-child(n+4), #revenue .revenue-table td:nth-child(n+4),
  #money .ledger-table th:nth-child(n+4), #money .ledger-table td:nth-child(n+4) {
    display: none !important;
  }

  #expense .expense-table th:nth-child(1), #expense .expense-table td:nth-child(1),
  #revenue .revenue-table th:nth-child(1), #revenue .revenue-table td:nth-child(1),
  #money .ledger-table th:nth-child(1), #money .ledger-table td:nth-child(1) {
    width: 72px !important;
  }

  #expense .expense-table th:nth-child(2), #expense .expense-table td:nth-child(2),
  #revenue .revenue-table th:nth-child(2), #revenue .revenue-table td:nth-child(2),
  #money .ledger-table th:nth-child(2), #money .ledger-table td:nth-child(2) {
    width: 31% !important;
  }

  #expense .expense-table th:nth-child(3), #expense .expense-table td:nth-child(3),
  #revenue .revenue-table th:nth-child(3), #revenue .revenue-table td:nth-child(3),
  #money .ledger-table th:nth-child(3), #money .ledger-table td:nth-child(3) {
    width: auto !important;
  }

  /* 모바일에서 불필요한 PC 전용 보조 동작 */
  #expense .expense-pc-import-action,
  #revenue .revenue-hometax-action {
    display: none !important;
  }
}

@media (max-width: 680px) {
  /* 금액관리 요약카드 공통 프레임 */
  #expense .expense-dashboard,
  #revenue .revenue-dashboard,
  #money .money-dashboard {
    display: grid !important;
    flex-wrap: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 7px !important;
    margin: 0 0 11px !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  #expense .expense-dashboard,
  #revenue .revenue-dashboard {
    grid-template-columns: minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,.7fr) !important;
  }

  #money .money-dashboard {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  #expense .expense-dashboard > .card,
  #revenue .revenue-dashboard > .card {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    align-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 52px !important;
    /* v56.03.24의 중간 보정값을 보존하되, 바로 다음 최종 padding 선언이 우선한다. */
    padding-inline: 6px !important;
    padding: 7px 9px !important;
    gap: 5px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.055) !important;
    scroll-snap-align: none !important;
  }

  #expense .expense-dashboard .card-title,
  #revenue .revenue-dashboard .card-title {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    color: #536071 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #expense .expense-dashboard .card-value,
  #revenue .revenue-dashboard .card-value {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }

  #expense .expense-dashboard [data-summary-kind="money"] .card-value,
  #revenue .revenue-dashboard [data-summary-kind="money"] .card-value {
    font-size: 12px !important;
    letter-spacing: -.045em !important;
  }

  #expense .expense-dashboard .card-sub,
  #revenue .revenue-dashboard .card-sub {
    display: none !important;
  }

  /* 입출금은 기존 2열 카드형을 그대로 유지 */
  #money .money-dashboard > .card {
    display: grid !important;
    align-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 62px !important;
    padding: 8px 8px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.055) !important;
    scroll-snap-align: none !important;
  }

  #money .money-dashboard .card-title {
    margin: 0 0 3px !important;
    overflow: hidden !important;
    color: #536071 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #money .money-dashboard .card-value {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #money .money-dashboard .card-sub {
    display: none !important;
  }
}
/* JH 교육·학습/CBT 모바일 전용 CSS
   교육·학습/CBT 모바일 전용 규칙.
   화면 디자인/수치/기능은 변경하지 않는다. */

/* v56.03.23 · 교육·학습 모바일 상단과 학습기록 압축 */
@media (max-width: 680px) {
  #cbt .cbt-account-actions #cbtIdentityBadge,
  #cbt .cbt-account-actions #cbtLoginButton,
  #cbt .cbt-account-actions #cbtLogoutButton {
    display: none !important;
  }
  #cbt .cbt-topbar {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
  }
  #cbt .cbt-account-actions {
    align-items: start !important;
    justify-content: flex-end !important;
  }
  #cbt .cbt-account-actions > button:not(#cbtLoginButton):not(#cbtLogoutButton) {
    min-height: 34px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
  }

  #cbtViewRecords > .card { min-width: 0 !important; padding: 12px 10px !important; overflow: hidden !important; }
  #cbt .cbt-record-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 6px !important;
    margin: 10px 0 !important;
  }
  #cbt .cbt-record-summary .jh-summary-card {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px 9px !important;
    border-radius: 11px !important;
  }
  #cbt .cbt-record-summary .card-title { font-size: 9px !important; }
  #cbt .cbt-record-summary .card-value { margin-top: 1px !important; font-size: 16px !important; line-height: 1.15 !important; }
  #cbt .cbt-record-summary .card-sub { display: none !important; }
  #cbtViewRecords .table-wrap { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
  #cbt .cbt-record-table { width: 100% !important; min-width: 0 !important; table-layout: fixed !important; }
  #cbt .cbt-record-table th:nth-child(1),
  #cbt .cbt-record-table th:nth-child(2),
  #cbt .cbt-record-table th:nth-child(3),
  #cbt .cbt-record-table th:nth-child(5),
  #cbt .cbt-record-table td:nth-child(1):not([colspan]),
  #cbt .cbt-record-table td:nth-child(2):not([colspan]),
  #cbt .cbt-record-table td:nth-child(3):not([colspan]),
  #cbt .cbt-record-table td:nth-child(5):not([colspan]) { display: none !important; }
  #cbt .cbt-record-table th:nth-child(4), #cbt .cbt-record-table td:nth-child(4) { width: 43% !important; }
  #cbt .cbt-record-table th:nth-child(6), #cbt .cbt-record-table td:nth-child(6) { width: 18% !important; text-align: center !important; }
  #cbt .cbt-record-table th:nth-child(7), #cbt .cbt-record-table td:nth-child(7) { width: 20% !important; text-align: center !important; }
  #cbt .cbt-record-table th:nth-child(8), #cbt .cbt-record-table td:nth-child(8) { width: 19% !important; text-align: center !important; }
  #cbt .cbt-record-table th,
  #cbt .cbt-record-table td { padding: 7px 3px !important; overflow: hidden !important; font-size: 10px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  #cbt .cbt-record-table td[colspan] { display: table-cell !important; width: auto !important; padding: 16px 6px !important; text-align: center !important; white-space: normal !important; }
  #cbt .cbt-record-table td:nth-child(4) strong { display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  #cbt .cbt-record-table .status { max-width: 100% !important; padding: 3px 4px !important; font-size: 8px !important; }
  #cbt .cbt-record-table .btn { min-width: 0 !important; min-height: 27px !important; padding: 3px 5px !important; font-size: 8px !important; border-radius: 999px !important; }
}

/* v56.03.24 · 모바일 상단 배지 재배치 및 학습기록 JH 카드 통일 */
@media (max-width: 680px) {
  /* 학습 홈은 진입 시 자동 조회하므로 모바일의 중복 새로고침만 감춥니다. */
  #cbt .cbt-learning-refresh-button { display: none !important; }

  #cbt .cbt-record-summary {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  #cbt .cbt-record-summary .cbt-record-stat-card {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    align-content: center !important;
    min-height: 76px !important;
    padding: 11px 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    border-radius: 17px !important;
    box-shadow: 0 7px 18px rgba(15,23,42,.065) !important;
  }
  #cbt .cbt-record-summary .cbt-record-stat-card::before {
    content: "";
    position: absolute;
    background: var(--cbt-record-accent, #64748b);
  }
  #cbt .cbt-record-summary .cbt-record-stat-card[data-record-stat="attempt"] { --cbt-record-accent: #2563eb; background: #f3f7ff !important; }
  #cbt .cbt-record-summary .cbt-record-stat-card[data-record-stat="pass"] { --cbt-record-accent: #16a34a; background: #f1fbf4 !important; }
  #cbt .cbt-record-summary .cbt-record-stat-card[data-record-stat="best"] { --cbt-record-accent: #ea580c; background: #fff7ed !important; }
  #cbt .cbt-record-summary .cbt-record-stat-card[data-record-stat="average"] { --cbt-record-accent: #7c3aed; background: #f7f4ff !important; }
  #cbt .cbt-record-summary .cbt-record-stat-card .card-title {
    padding-right: 14px !important;
    color: #5b6471 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }
  #cbt .cbt-record-summary .cbt-record-stat-card .card-value {
    align-self: end !important;
    margin: 5px 0 0 !important;
    color: var(--cbt-record-accent, #334155) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
  }
}

/* v56.03.25 · 모바일 카드 비율/제품군 필터/교육 메뉴/사이드 메뉴 마감 */
@media (max-width: 680px) {
  /* 교육·학습 제목 옆에 화면 메뉴를 밀착해 첫 화면의 세로 여백을 줄입니다. */
  #cbt .cbt-heading-block { min-width: 0 !important; }
  #cbt .cbt-title-nav-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  #cbt .cbt-title-nav-row > h1 {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  #cbt .cbt-title-nav-row > #cbtInternalNav {
    display: flex !important;
    flex: 1 1 205px !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }
  #cbt .cbt-title-nav-row > #cbtInternalNav button {
    flex: 0 1 auto !important;
    min-height: 29px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
  #cbt .cbt-top-sub { margin: 4px 0 0 !important; }

  /* 학습기록 2×2 카드를 가로형으로 바꿔 제목과 수치의 비율을 균일하게 합니다. */
  #cbt .cbt-record-summary .cbt-record-stat-card {
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    align-content: center !important;
    min-height: 54px !important;
    padding: 9px 11px 9px 15px !important;
    gap: 6px !important;
  }
  #cbt .cbt-record-summary .cbt-record-stat-card::before {
    top: 9px !important;
    right: auto !important;
    bottom: 9px !important;
    left: 0 !important;
    width: 4px !important;
    height: auto !important;
    border-radius: 0 999px 999px 0 !important;
    box-shadow: none !important;
  }
  #cbt .cbt-record-summary .cbt-record-stat-card .card-title {
    min-width: 0 !important;
    padding: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
  }
  #cbt .cbt-record-summary .cbt-record-stat-card .card-value {
    align-self: center !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* v57.01.25~27 · CBT 시험 응시화면 모바일 셸 연동.
   사이트 상단 툴바는 유지하고 runner는 실제 툴바 하단부터 남은 뷰포트를 사용한다.
   시험 runner가 열린 동안만 root overscroll을 차단해 모바일 pull-to-refresh로 시험화면이 사라지는 것을 방지한다. */
@media (max-width: 760px),
       (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  html.cbt-exam-overlay-open,
  html.cbt-exam-overlay-open body {
    overflow: hidden !important;
    overscroll-behavior-y: none !important;
  }
  body.cbt-exam-running:not(.cbt-exam-minimized) .sidebar {
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 12000 !important;
  }
  body.cbt-exam-running:not(.cbt-exam-minimized) .mobile-context-action {
    pointer-events: auto !important;
  }
  body.cbt-exam-minimized .mobile-context-action:not([hidden]) {
    border-color: rgba(248,113,113,.48) !important;
    background: rgba(127,29,29,.42) !important;
  }
  #cbt #cbtRunnerModal.cbt-runner-backdrop {
    z-index: 11050 !important;
    inset: var(--cbt-mobile-shell-offset, calc(65px + env(safe-area-inset-top, 0px))) 0 0 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  #cbt #cbtRunnerModal.cbt-runner-backdrop > .cbt-runner-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }
  #cbt #cbtRunnerModal .cbt-runner-layout {
    grid-template-rows: auto minmax(0,1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #cbt #cbtRunnerModal .cbt-question-stage {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
  }
  #cbt #cbtRunnerModal .cbt-question-navigator {
    overscroll-behavior-y: contain !important;
  }
}

/* 휴대폰 세로: 문제풀이 공간을 우선하고 필기 도구는 한 개의 버튼으로 접어 둔다.
   펼친 도구는 헤더 아래 오버레이로 표시되어 문제영역 높이를 계속 차지하지 않는다. */
@media (max-width: 680px) and (orientation: portrait) {
  #cbt #cbtRunnerModal .cbt-runner-header {
    position: relative !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 7px 8px !important;
    padding: 9px 10px 8px !important;
    overflow: visible !important;
  }
  #cbt #cbtRunnerModal .cbt-runner-heading {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  #cbt #cbtRunnerModal .cbt-runner-heading h2 {
    overflow: hidden !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #cbt #cbtRunnerModal .cbt-runner-heading .small {
    margin-top: 2px !important;
    overflow: hidden !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #cbt #cbtRunnerModal .cbt-annotation-mobile-toggle:not([hidden]) {
    display: inline-flex !important;
    grid-column: 2 !important;
  }
  #cbt #cbtRunnerModal .cbt-runner-status {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }
  #cbt #cbtRunnerModal .cbt-runner-status span {
    padding: 5px 8px !important;
    font-size: 10px !important;
  }
  #cbt #cbtRunnerModal .cbt-runner-status strong {
    justify-self: center !important;
    font-size: 13px !important;
  }
  #cbt #cbtRunnerModal .cbt-runner-status .btn {
    min-height: 30px !important;
    padding: 4px 9px !important;
    font-size: 10px !important;
  }
  #cbt #cbtRunnerModal .cbt-runner-annotation-toolbar {
    position: absolute !important;
    z-index: 45 !important;
    top: calc(100% - 1px) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 7px !important;
    overflow: visible !important;
    border-color: #cbd5e1 !important;
    background: rgba(248,250,252,.98) !important;
    box-shadow: 0 12px 24px rgba(15,23,42,.16) !important;
  }
  #cbt #cbtRunnerModal .cbt-runner-annotation-toolbar.is-mobile-collapsed {
    display: none !important;
  }
  #cbt #cbtRunnerModal .cbt-annotation-tool-button {
    min-height: 29px !important;
    padding: 3px 6px !important;
    font-size: 9px !important;
  }
  #cbt #cbtRunnerModal .cbt-annotation-color-trigger {
    height: 29px !important;
  }
  #cbt #cbtRunnerModal .cbt-annotation-status {
    min-width: 0 !important;
    margin-left: auto !important;
    font-size: 8px !important;
  }
  #cbt #cbtRunnerModal .cbt-question-navigator {
    flex: 0 0 auto !important;
    max-height: 112px !important;
  }
  #cbt #cbtRunnerModal .cbt-question-stage {
    padding: 12px 10px !important;
  }
}

/* 휴대폰 가로: 필기 기능은 유지하되 툴바를 한 줄에 가깝게 압축한다. */
@media (orientation: landscape) and (max-height: 620px) and (hover: none) and (pointer: coarse) {
  #cbt #cbtRunnerModal .cbt-runner-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 7px 10px !important;
    gap: 6px 8px !important;
  }
  #cbt #cbtRunnerModal .cbt-runner-heading {
    flex: 0 1 190px !important;
    min-width: 120px !important;
  }
  #cbt #cbtRunnerModal .cbt-runner-heading h2 { font-size: 14px !important; }
  #cbt #cbtRunnerModal .cbt-runner-heading .small { font-size: 8px !important; }
  #cbt #cbtRunnerModal .cbt-runner-annotation-toolbar {
    flex-wrap: nowrap !important;
    padding: 3px 5px !important;
  }
  #cbt #cbtRunnerModal .cbt-annotation-tool-button {
    min-height: 27px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
  }
  #cbt #cbtRunnerModal .cbt-annotation-color-trigger { height: 27px !important; }
  #cbt #cbtRunnerModal .cbt-annotation-status { display: none !important; }
  #cbt #cbtRunnerModal .cbt-question-stage { padding: 10px 12px !important; }
}