/* ============================================================
   1024px 이하
   - 태블릿에서는 sidebar-fixed.css / sidebar-fixed.js의 접힘 상태를 방해하지 않음
   - 공통 CSS에서 .right-sidebar / #side 관련 강제 너비 설정 없음
============================================================ */
@media (max-width: 1024px) {
  .court-item { width: calc(50% - 16px); }
  .header-inner { position: relative; }
  .header-visitor { position: absolute; right: 20px !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: inherit; }
  .mypage-edit-portal { max-width: 760px; }
  .mypage-edit-grid.grid-3, .mypage-detail-grid.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mypage-detail-grid.grid-3 .mypage-detail-item { border-right: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; }
  .mypage-detail-grid.grid-3 .mypage-detail-item:nth-child(2n) { border-right: 0; }
  .mypage-detail-grid.grid-3 .mypage-detail-item:last-child { border-bottom: 0; }
  body > .modal { align-items: flex-start !important; justify-content: center !important; padding: max(18px, env(safe-area-inset-top)) 14px max(80px, env(safe-area-inset-bottom)) !important; }
  body > .modal .modal-box { width: 100% !important; max-width: 560px !important; max-height: none !important; margin: 0 auto !important; box-sizing: border-box !important; }
}

@media (max-width: 900px) {
  .apply-status-grid-5x { display: flex !important; overflow-x: auto !important; gap: 14px !important; padding-bottom: 10px !important; scroll-snap-type: x mandatory; }
  .apply-status-grid-5x::-webkit-scrollbar { display: none; }
  .apply-box { flex: 0 0 80% !important; scroll-snap-align: start; }
}

/* ============================================================
   768px 이하: 모바일에서는 사이드바 완전 숨김
============================================================ */
@media (max-width: 768px) {
  #side, .right-sidebar { display: none !important; }
  .layout-2col { display: block !important; width: 100% !important; max-width: 100% !important; }
  .center-content { width: 100% !important; max-width: 100% !important; margin-right: 0 !important; }
  .court-item { width: 100%; }

  .two-col-banner { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; padding: 16px 10px; }
  .banner-left { flex: 0 0 30%; display: flex; justify-content: flex-start; }
  .banner-left img, .banner-character { width: 100%; max-width: 130px; height: auto; }
  .banner-right { flex: 0 0 70%; text-align: left; }
  .banner-title { margin-bottom: 6px; font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .banner-desc { margin-bottom: 10px; font-size: 13px; line-height: 1.45; }
  .banner-btn { display: block; width: 100%; max-width: 180px; padding: 10px 14px; box-sizing: border-box; text-align: center; font-size: 14px; }
  .calc-consult-section { margin: 20px 0; }
  .main-top-banner { margin-bottom: 6px !important; }

  .video-view-iframe { height: 300px; }
  .video-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .video-player { aspect-ratio: 16 / 9; }
  .video-btn-row { flex-direction: column; }
  .video-btn-item { width: 100%; }
  .video-layout { display: block !important; width: 100% !important; padding: 0 !important; }
  .main-video-box { position: relative !important; width: 100% !important; background: #000; overflow: visible !important; }
  .video-main-iframe { display: block; width: 100% !important; height: 280px !important; object-fit: contain !important; background: #000; }
  .main-video-category, .main-video-duration { position: absolute !important; bottom: 10px !important; padding: 4px 8px; background: rgba(0,0,0,.6); color: #fff; border-radius: 6px; font-size: 12px; }
  .main-video-category { left: 10px !important; }
  .main-video-duration { right: 10px !important; }
  #mainVideoTitle { margin-top: 10px; font-size: 16px !important; white-space: normal !important; }
  .video-scroll { width: 100% !important; padding-right: 0 !important; overflow-x: auto !important; }
  .related-video-item, .video-item { flex: 0 0 100%; width: 100% !important; min-width: 100% !important; }
  .video-thumb-box { width: 100%; height: auto; }
  .video-thumb-box img { width: 100% !important; height: auto !important; object-fit: contain !important; }
  .video-play-icon { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%); background: rgba(0,0,0,.6); border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: transform .25s ease; z-index: 3; }
  .video-play-icon::before { content: ""; margin-left: 3px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
  .video-thumb-box:hover .video-play-icon { transform: translate(-50%, -50%) scale(1.15); }
  .video-item-row { flex-direction: column; align-items: flex-start; }
  .video-info-top { margin-top: 10px; font-size: 12px; }
  .video-meta { margin-top: 4px; font-size: 12px; }
  .video-share-btn { display: none; }

  .board-search-wrap { flex-direction: column; align-items: stretch; gap: 8px; margin: 16px 0; }
  .board-search-input, .board-search-btn { width: 100%; padding: 10px 12px; box-sizing: border-box; font-size: 14px; }

  #calcCardContainer { display: flex !important; overflow-x: auto !important; gap: 14px !important; padding-bottom: 10px !important; scroll-snap-type: x mandatory; }
  #calcCardContainer::-webkit-scrollbar { display: none; }
  .calc-card { flex: 0 0 85% !important; min-width: 85% !important; scroll-snap-align: start; }

  .related-header { width: 100%; min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; }
  .related-header .video-consult-title { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1.3; white-space: nowrap; }
  .related-header .video-consult-title > span:first-child { min-width: 0; white-space: nowrap; word-break: keep-all; }
  .related-header .realtime-badge { flex: 0 0 auto; padding: 3px 6px; font-size: 10px; white-space: nowrap; }
  .related-header .board-more-btn { flex: 0 0 auto; margin-left: auto; padding: 4px 0; font-size: 12px; line-height: 1.3; white-space: nowrap; word-break: keep-all; }

  .back-list-btn { padding: 8px 14px; font-size: 13px; }
  .consult-layout { flex-direction: column; }
  .consult-side-btn { width: 100%; height: 56px; }
  #faqGrid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }

  .court-board-header { align-items: stretch; flex-direction: column; }
  .court-search-wrap { grid-template-columns: 1fr 1fr; }
  .court-search-wrap .board-search-input { grid-column: 1 / -1; }
  .court-info-row { grid-template-columns: 70px minmax(0,1fr); }
  .court-address-row .copy-btn { grid-column: 2; width: fit-content; }
  .court-phone { max-width: 100%; box-sizing: border-box; }
  .court-board-section { padding-left: 6px !important; padding-right: 6px !important; }
  #courtList { width: 100%; margin: 12px 0 0; }
  #courtList .court-list-item, #courtList .board-item { width: calc(100% - 12px) !important; max-width: calc(100% - 12px) !important; margin: 0 6px !important; box-sizing: border-box; }

  .apply-item-meta { gap: 6px; font-size: 11px; }
  .calc-live-banner { margin: 14px 0 20px; border-radius: 12px; }
  .calc-live-header { padding: 11px 12px; }
  .calc-live-title { font-size: 13px; }
  .calc-live-title strong { font-size: 15px; }
  .calc-live-track { padding: 10px 0; }
  .calc-live-item { gap: 3px; margin: 0 10px; font-size: 12px; }
  .calc-live-time { font-size: 11px; }
  .calc-live-divider { margin: 0 2px; }

  .form-grid { grid-template-columns: 1fr; }
  .full-row { grid-column: auto; }
  .button-row { flex-direction: column; }
  .button-row button { width: 100%; }

  .case-guide-grid { grid-template-columns: 1fr; gap: 12px; }
  .case-guide-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
  .case-name { flex: 0 0 48px; font-weight: 600; }
  .case-court { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
  .case-number { flex: 0 0 auto; text-align: right; white-space: nowrap; font-size: 12px; font-weight: 700; }

  .search-end-section { margin-top: 26px; }
  .search-end-line { margin-bottom: 18px; }
  .search-end-banner { padding: 20px 18px; border-radius: 12px; }
  .search-end-desc { margin-bottom: 15px; font-size: 13px; }
  .search-end-guide { font-size: 12px; }
  .search-bottom-grid { grid-template-columns: 1fr; gap: 16px; }
  .search-service-banner { padding: 21px 18px; }
  .search-end-title { font-size: 18px; }
  .search-end-btn { align-self: stretch; width: 100%; box-sizing: border-box; }
  .search-ad-phone { flex-direction: column; align-items: flex-start; gap: 3px; }
  .search-ad-phone strong { font-size: 18px; }
  .search-box { grid-template-columns: 1fr 1fr; }
  .search-box input { grid-column: 1 / -1; }

  .list-card-header { align-items: flex-start; }
  .notice-table th, .notice-table td { padding: 9px 7px; font-size: 12px; }
  .stage-badge, .visible-badge { padding: 4px 7px; font-size: 11px; }
  .detail-card { padding: 18px !important; }
  .detail-row { gap: 12px !important; }
  .detail-value { font-size: 16px !important; }
  .memo-box { width: 100% !important; box-sizing: border-box !important; }
  .detail-footer { width: 100% !important; }
  .detail-btn-back, .detail-btn-red { flex: 1 !important; }

  .center-content { padding-top: 18px !important; }
  .mypage-portal { padding: 18px 16px 28px; }

  .fsm-left { width: 38%; }
  .fsm-left li { padding: 14px 12px; font-size: 13px; }
  .fsm-left li:hover, .fsm-left li.active { padding-left: 16px; }
  .fsm-right { padding: 14px 12px; }
  .fsm-item { min-height: 42px; padding: 0 34px 0 12px; font-size: 13px; }
  .fsm-doc-consult { padding: 13px 42px 13px 14px; }
  .fsm-doc-consult strong { font-size: 16px; }

  .site-footer .footer-inner { padding: 0 16px 60px; text-align: left; }
  .footer-top { min-height: 48px; display: flex; align-items: center; }
  .footer-links { display: flex; align-items: center; justify-content: flex-start; gap: 10px; font-size: 12px; }
  .footer-main { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 0 20px; }
  .footer-info-wrap { flex: 1; min-width: 0; }
  .footer-company { margin-bottom: 10px; font-size: 14px; text-align: left; }
  .footer-info { font-size: 11px; line-height: 1.7; text-align: left; }
  .footer-info-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0 14px; }
  .footer-info-line span { display: inline-block; }
  .footer-side { flex: 0 0 auto; width: auto; display: flex; justify-content: flex-end; }
  .footer-social { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
  .footer-social a { width: 34px; height: 34px; }
  .footer-social svg { width: 28px; height: 28px; }
  .footer-bottom { padding: 14px 0 16px; }
  .footer-copy { font-size: 10px; text-align: left; }
}

@media (max-width: 640px) {
  .video-admin-list-header { align-items: flex-start; }
  .video-admin-search { grid-template-columns: 1fr 1fr; }
  .video-search-input { grid-column: 1 / -1; }
  .video-item-app { align-items: flex-start; }
}

@media (max-width: 600px) {
  .apply-status-grid-5x { gap: 12px !important; padding-bottom: 10px !important; }
  .apply-box { flex: 0 0 90% !important; }
  .video-view-iframe, .video-main-iframe { height: 240px !important; }
  .video-layout { grid-template-columns: 1fr; }
  .video-item img { width: 100px; height: 60px; }
  .notice-wrapper { grid-template-columns: 1fr !important; gap: 16px !important; }
  .notice-left, .notice-right { padding: 14px !important; }
  .notice-left { min-height: 250px !important; max-height: 250px !important; overflow: hidden !important; }
  .notice-rolling { max-height: none !important; overflow: visible !important; }
  .notice-rolling li { min-height: 44px; padding: 3px 0 !important; }
  .court-grid { grid-template-columns: 1fr; }
  .center-content { padding-top: 12px !important; }

  .mypage-edit-portal { padding: 14px 12px 24px; }
  .mypage-edit-header { margin-bottom: 15px; }
  .mypage-edit-header h2 { font-size: 21px; }
  .mypage-edit-header p { font-size: 13px; }
  .mypage-edit-section { padding: 18px 15px; border-radius: 14px; }
  .mypage-edit-section-title { margin-bottom: 16px; padding-bottom: 14px; }
  .mypage-edit-grid.grid-2, .mypage-edit-grid.grid-3, .mypage-detail-grid.grid-2, .mypage-detail-grid.grid-3 { grid-template-columns: 1fr; }
  .mypage-edit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mypage-edit-cancel, .mypage-edit-save { width: 100%; min-width: 0; }
  .mypage-detail-grid.grid-2 .mypage-detail-item, .mypage-detail-grid.grid-3 .mypage-detail-item { padding: 15px 16px; border-right: 0; border-bottom: 1px solid #edf0f2; }
  .mypage-detail-grid.grid-2 .mypage-detail-item:last-child, .mypage-detail-grid.grid-3 .mypage-detail-item:last-child { border-bottom: 0; }
}

@media (max-width: 480px) {
  html, body { width: 100% !important; max-width: 100% !important; min-height: 100%; overflow-x: hidden !important; position: relative; }
  body.homepage { padding-left: 0 !important; padding-right: 0 !important; }

  .layout-2col, .center-content { width: 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box; }
  .board-search-wrap { flex-direction: column; }
  .board-search-btn { width: 100%; }
  .court-card { padding: 16px; }
  .top-info-box { padding: 18px; border-radius: 10px; }
  .top-info-box h2 { font-size: 18px; }
  .top-info-box p { font-size: 15px; line-height: 1.55; }
  .ios-field { margin-bottom: 20px; }
  .ios-slider-value { font-size: 17px; }
  .summary-card { padding: 18px; }
  .center-content { padding-top: 12px !important; }

  .related-header { gap: 5px; }
  .related-header .video-consult-title { flex: 1 1 auto; min-width: 0; gap: 5px; font-size: 15px; font-weight: 700; letter-spacing: -.6px; white-space: nowrap; }
  .related-header .video-consult-title > span:first-child { min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; word-break: keep-all; }
  .related-header .realtime-badge { flex: 0 0 auto; height: 24px; padding: 0 6px; gap: 3px; font-size: 10px; white-space: nowrap; }
  .related-header .realtime-icon { width: 12px; height: 12px; flex-shrink: 0; }
  .related-header .board-more-btn { flex: 0 0 auto; margin-left: auto; padding: 3px 0; font-size: 11px; letter-spacing: -.4px; line-height: 1.2; white-space: nowrap; word-break: keep-all; }

  .mypage-portal { padding: 14px 12px 24px; }
  .mypage-header { margin-bottom: 15px; }
  .mypage-header h2 { font-size: 21px; }
  .mypage-header p { font-size: 13px; }
  .mypage-profile-top { padding: 18px 16px; }
  .mypage-avatar { width: 46px; height: 46px; }
  .mypage-profile-name strong { font-size: 17px; }
  .mypage-profile-edit { padding: 8px 11px; font-size: 12px; }
  .mypage-profile-info { grid-template-columns: 1fr; }
  .mypage-info-item { padding: 14px 16px; }
  .mypage-info-item + .mypage-info-item { border-left: 0; border-top: 1px solid #edf0f2; }
  .mypage-section { margin-top: 22px; }
  .mypage-menu-grid { grid-template-columns: 1fr; gap: 9px; }
  .mypage-menu-card { padding: 15px; }
  .mypage-menu-icon { width: 40px; height: 40px; }
  .mypage-account-item { padding: 16px; }

  .consult-fixed-bar { position: fixed !important; left: 0 !important; bottom: 0 !important; width: 100% !important; height: 60px !important; overflow: visible !important; transform: none !important; will-change: auto !important; z-index: 10000 !important; }
  .consult-bar-inner { padding: 0 4px; }
  .consult-btn-center > .consult-nav-item, .consult-btn-center > .login-area { min-width: 0; flex: 1 1 20%; padding: 0 2px; }
  .login-area > .consult-nav-item { min-width: 0; }
  .consult-nav-item svg { width: 21px; height: 21px; }
  .consult-nav-item span { font-size: 10px; }
  .login-area { flex-direction: column !important; align-items: center !important; gap: 6px !important; }
  .login-area .consult-nav-item { flex-direction: column !important; align-items: center !important; gap: 4px !important; }
  .login-area .consult-nav-item svg { margin-bottom: 4px !important; }

  .footer-slide-menu { height: calc(100dvh - 60px) !important; bottom: -100% !important; z-index: 20000 !important; transition: bottom .45s cubic-bezier(.25,.1,.25,1), opacity .3s ease; }
  .footer-slide-menu.active { bottom: 60px !important; opacity: 1 !important; }
  .fsm-header { padding-top: env(safe-area-inset-top, 12px) !important; }
  .fsm-left { width: 40%; }
  .fsm-right { padding: 10px; }
  .fsm-item { font-size: 12px; }
  .fsm-doc-consult { padding: 12px 38px 12px 12px; }
  .fsm-doc-consult::after { right: 12px; font-size: 19px; }

  .site-footer .footer-inner { padding: 0 14px 60px; text-align: left; }
  .footer-top { min-height: 46px; }
  .footer-links { justify-content: flex-start; gap: 8px; font-size: 11px; }
  .footer-main { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 0 18px; }
  .footer-info-wrap { flex: 1; min-width: 0; }
  .footer-company { margin-bottom: 9px; font-size: 14px; text-align: left; }
  .footer-info { font-size: 10px; line-height: 1.75; text-align: left; }
  .footer-info-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; }
  .footer-info-line span { display: inline-block; }
  .footer-side { flex: 0 0 auto; width: auto; display: flex; justify-content: flex-end; }
  .footer-social { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
  .footer-social a { width: 30px; height: 30px; }
  .footer-social svg { width: 25px; height: 25px; }
  .footer-bottom { padding: 13px 0 15px; }
  .footer-copy { font-size: 9px; text-align: left; }

  body > .modal { padding: max(10px, env(safe-area-inset-top)) 8px max(72px, env(safe-area-inset-bottom)) !important; }
  body > .modal .modal-box { width: 100% !important; max-width: none !important; border-radius: 14px !important; }

  .calc-pay-box { min-width: 0; padding-left: 8px; padding-right: 8px; }
  .calc-pay-box .calc-label { font-size: 12px; white-space: nowrap; }
  .calc-pay-box .calc-value { min-width: 0; font-size: 17px !important; line-height: 1.25; letter-spacing: -1px; white-space: nowrap !important; word-break: keep-all; }
  .calc-pay-box .calc-status-value { font-size: 12px !important; letter-spacing: -.5px; white-space: nowrap !important; }
  .apply-box .apply-content { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; word-break: keep-all; }
}

@media (max-width: 380px) {
  .related-header { gap: 3px; }
  .related-header .video-consult-title { gap: 3px; font-size: 13px; letter-spacing: -.8px; }
  .related-header .video-consult-title > span:first-child { font-size: 13px; }
  .related-header .realtime-badge { height: 21px; padding: 0 5px; gap: 2px; font-size: 9px; }
  .related-header .realtime-icon { width: 10px; height: 10px; }
  .related-header .board-more-btn { font-size: 10px; letter-spacing: -.6px; }
  .calc-pay-box { padding-left: 5px; padding-right: 5px; }
  .calc-pay-box .calc-label { font-size: 11px; }
  .calc-pay-box .calc-value { font-size: 15px !important; line-height: 1.2; letter-spacing: -1px; white-space: nowrap !important; }
  .calc-pay-box .calc-status-value { font-size: 11px !important; letter-spacing: -.7px; white-space: nowrap !important; }
  .apply-box .apply-content { font-size: 12px; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
}

/* ============================================================
   사이드바 표시 기준
   - PC 1025px 이상: 표시 + 접기/펼치기
   - 태블릿/모바일 1024px 이하: 사이드바와 토글 완전 숨김
============================================================ */

@media (min-width: 1025px) {
  #side {
    display: block;
  }

  #rightSidebar,
  .right-sidebar,
  #tabletSidebarToggle,
  .tablet-sidebar-toggle {
    visibility: visible;
  }
}

@media (max-width: 1024px) {
  #side,
  #rightSidebar,
  .right-sidebar,
  #tabletSidebarToggle,
  .tablet-sidebar-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .layout-2col {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .center-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
}