/* ─────────────────────────────────────────────────────────────────────────
   mobile.css — INID-K 전역 모바일 레이아웃
   - 적용 범위: base.html 을 상속하는 모든 사용자 페이지 (관리자 제외)
   - 적용 조건: @media (max-width: 1024px) — 데스크탑(>1024px) 100% 무영향
   - 정책: PC 콘텐츠 자체는 건드리지 않음. 헤더/푸터/래퍼만 모바일화.
   - 색상 토큰: navy #143a85, gray #959595, accent #00b1e1
   ───────────────────────────────────────────────────────────────────────── */

/* ── 데스크탑: 모바일 전용 요소 완전 숨김 ─────────────────────────── */
.btn-mobile-menu,
.mobile-menu-overlay,
.mobile-menu-panel,
.m-country-list {
  display: none;
}

@media (max-width: 1024px) {

  /* ── 전역 가로 스크롤 차단 + 본문 줌 방지 ──────────────────────── */
  /* overflow-x:hidden 은 html 에만 적용 — body 에 적용 시 iOS Safari 에서
     position:fixed 요소가 뷰포트 기준이 아닌 문서 흐름 기준으로 렌더링됨 */
  html {
    overflow-x: hidden !important;
  }
  html, body {
    max-width: 100% !important;
    -webkit-text-size-adjust: 100%;
  }

  /* ── 고정폭 컨테이너 잠금 해제 (.inr / .container) ────────────── */
  .inr {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box;
  }
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 0 40px !important;
    box-sizing: border-box;
  }

  /* ── 헤더: 네이비/고정 높이 해제, 로고 + 햄버거만 노출 ─────────── */
  .header {
    height: auto !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e5e5;
    overflow: visible !important;
  }
  .header.active { height: auto !important; }
  .header .gnb {
    height: 56px !important;
    background: #fff !important;
  }
  .header .gnb .inr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 56px !important;
  }
  .header h1 {
    position: static !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .header h1 a,
  .header h1 img {
    height: 32px !important;
    width: auto !important;
    max-height: 32px !important;
    display: block !important;
  }
  /* 데스크탑 GNB 메뉴/언어 토글/close 버튼 숨김 → 햄버거 패널에서 대체 */
  .header .gnb > .inr > .nav,
  .header .gnb .nav,
  .header .btn-close,
  .header .btn-area,
  .header.active .nav-2depth,
  .gnb .nav-2depth {
    display: none !important;
  }

  /* ── 햄버거 버튼 (헤더 우측) ────────────────────────────────── */
  .btn-mobile-menu {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    z-index: 200;
  }
  .btn-mobile-menu span {
    display: block;
    width: 24px;
    height: 2px;
    background: #143a85;
    transition: transform .25s, opacity .25s;
  }
  .btn-mobile-menu[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .btn-mobile-menu[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .btn-mobile-menu[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ── 오버레이 (패널 외 영역 dimming) ──────────────────────────── */
  .mobile-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    z-index: 998;
  }
  .mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── 슬라이드 패널 (우측 → 좌측 슬라이드인) ───────────────────── */
  .mobile-menu-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 84%;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform .25s ease-out;
    z-index: 999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu-panel.active {
    transform: translateX(0);
  }
  .mobile-menu-panel .m-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
  }
  .mobile-menu-panel .m-title {
    font-size: 14px;
    font-weight: 600;
    color: #143a85;
  }
  .mobile-menu-panel .m-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #555;
    cursor: pointer;
    padding: 4px 8px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  /* ── 패널 안의 nav (gnb_sub.html / gnb_flat.html 재사용) ──────── */
  .mobile-menu-panel .nav {
    list-style: none;
    padding: 0 !important;
    margin: 0;
    flex: 1;
  }
  .mobile-menu-panel .nav > li {
    float: none !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0;
  }
  .mobile-menu-panel .nav > li > button {
    display: block !important;
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #143a85 !important;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .mobile-menu-panel .nav > li > button::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 400;
    color: #959595;
    line-height: 1;
  }
  .mobile-menu-panel .nav > li.m-open > button::after {
    content: "−";
  }
  .mobile-menu-panel .nav > li.m-open > button {
    background: #f7f8fa;
  }
  /* 2-depth: 데스크탑은 absolute 였지만 모바일은 inline 아코디언 */
  .mobile-menu-panel .nav-2depth {
    display: none !important;
    position: static !important;
    background: #f7f8fa;
    padding: 4px 0 8px !important;
  }
  .mobile-menu-panel .nav > li.m-open .nav-2depth {
    display: block !important;
  }
  .mobile-menu-panel .nav-2depth li {
    border: 0 !important;
    margin: 0 !important;
    float: none !important;
  }
  .mobile-menu-panel .nav-2depth li.en-hide {
    display: none !important;
  }
  .mobile-menu-panel .nav-2depth a {
    display: block !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 11px 20px 11px 32px !important;
    text-align: left !important;
    color: #555 !important;
    font-size: 14px !important;
    box-sizing: border-box;
    background: transparent !important;
  }
  .mobile-menu-panel .nav-2depth a:hover,
  .mobile-menu-panel .nav-2depth a.active {
    background: #ebeff5 !important;
    color: #143a85 !important;
  }
  /* 패널 내부의 데스크탑용 close/btn-area 정리 */
  .mobile-menu-panel .btn-close {
    display: none !important;
  }
  .mobile-menu-panel .btn-area {
    position: static !important;
    padding: 18px 20px !important;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
  }
  .mobile-menu-panel .btn-area:after { display: none !important; }
  .mobile-menu-panel .btn-area .btn-eng {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    padding: 10px 22px !important;
    background: #143a85 !important;
    color: #fff !important;
    border-radius: 4px;
    font-size: 14px !important;
    font-weight: 500 !important;
  }
  .mobile-menu-panel .btn-area .btn-search {
    display: none !important;
  }

  /* ── body 스크롤 락 (패널 열렸을 때) ─────────────────────────── */
  body.m-menu-open {
    overflow: hidden !important;
  }

  /* ── 본문 콘텐츠 (게시판 외 페이지에도 적용) ────────────────── */
  /* pages.css 의 .container/.inr height:100% 무력화 + 가시성 보장 */
  .container,
  .inr {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .container > *,
  .inr > * {
    display: revert;
    visibility: visible !important;
  }
  /* 모든 컨테이너 이미지 반응형 강제 — pages.css 의 고정 width(.article .img-wrap 310×180 등) 무력화 */
  .container img,
  .container .inr img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  /* .img-wrap 박스 자체도 고정 width/height 해제 */
  .container .img-wrap,
  .container .inr .img-wrap {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    border: 0 !important;
    margin: 0 0 16px !important;
    display: block !important;
  }
  /* article 내부 img-wrap (네트워크 페이지 카드) — 풀폭 */
  .container article > .img-wrap,
  .container article.article > .img-wrap {
    width: 100% !important;
  }
  .container article > .img-wrap img,
  .container article.article > .img-wrap img {
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* ── 주소복사 박스 (base.html JS 가 모든 비-홈 페이지에 주입) ─── */
  .copyurl-box {
    position: static !important;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 8px;
    padding: 8px 10px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 12px;
  }
  .copyurl-box .txt-copyurl {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #7d7d7d;
  }
  .copyurl-box #copyurl-text {
    color: #143a85;
  }
  .copyurl-box .btn-copyurl {
    flex-shrink: 0;
    padding: 6px 12px;
    background: #143a85;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }
  .copyurl-box .btn-copyurl span { color: #fff; }

  /* ── 메인 타이틀 ───────────────────────────────────────────── */
  .main-tit {
    margin: 24px 0 20px !important;
    font-size: 22px !important;
  }
  .main-tit:after {
    width: 40px;
    height: 3px;
    margin-top: 14px;
  }

  /* ── 푸터 ─────────────────────────────────────────────────── */
  .footer .inr {
    padding: 18px 16px 22px !important;
    text-align: center;
  }
  .footer .logo {
    height: 32px;
    width: auto;
    margin: 0 auto 12px;
  }
  .footer .select-box {
    display: none;
  }
  .footer .copyright {
    font-size: 11px;
    line-height: 1.5;
    color: #959595;
  }

  /* ─────────────────────────────────────────────────────────────────
     게시판 상세 (notice/detail.html, research/detail.html 등) 전용
     ───────────────────────────────────────────────────────────────── */
  .board-view .title-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 14px;
  }
  .board-view .title-wrap .title {
    font-size: 18px;
    line-height: 1.4;
    word-break: keep-all;
  }
  .board-view .title-wrap .date {
    font-size: 12px;
  }
  .board-view .category {
    padding: 12px 14px;
    font-size: 13px;
  }
  .board-view .board-content {
    padding: 20px 14px 18px;
    font-size: 14px;
    line-height: 1.6;
  }
  .board-view .board-content :is(p, div, span, li) {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .board-view .board-content img,
  .board-view .board-content table {
    max-width: 100%;
    height: auto;
  }
  .board-view .board-content table {
    display: block;
    overflow-x: auto;
  }
  .pdf-preview-wrap {
    margin-bottom: 16px;
  }
  .pdf-thumb,
  .board-view .board-content img[data-pdf-thumb] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 12px !important;
  }
  .btn-pdf-view {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 14px 0 0 !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 6px !important;
    line-height: 1.2 !important;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
  }
  .pdf-view-btn-wrap {
    margin-top: 0 !important;
    text-align: center !important;
  }
  .board-view .file-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 28px;
    padding: 14px;
    background: #f7f8fa;
    border-radius: 4px;
  }
  .board-view .file-box .file-tit {
    margin-right: 0;
    font-size: 13px;
  }
  .board-view .file-box .file-list {
    width: 100%;
  }
  .board-view .file-box .file-list li {
    margin-bottom: 8px;
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
  }
  .board-view .file-box .file-list a {
    color: #143a85;
  }
  .board-view .navigation li {
    padding: 12px 14px;
    font-size: 13px;
  }
  .board-view .navigation .tit {
    margin-right: 10px;
    color: #143a85;
  }
  .board-view .navigation .txt {
    margin-left: 10px;
    word-break: break-all;
  }
  .board-view .navigation .tit:after,
  .board-view .navigation .txt:after {
    margin-left: 8px;
  }
  .btn-wrap.right {
    display: flex !important;
    justify-content: center !important;
    margin-top: 20px;
  }
  .board-btn {
    display: block !important;
    width: calc(100% - 32px) !important;
    max-width: 480px;
    padding: 14px 0 !important;
    font-size: 15px;
    text-align: center;
    box-sizing: border-box;
  }
  .attach-inline-imgs img {
    width: 100%;
    max-width: 100%;
    margin-bottom: 12px;
  }

  /* ─────────────────────────────────────────────────────────────────
     about/members (구성) + network/* 페이지 — article 카드 모바일 정렬
     순서: [기관(.institution)] → [사진(.img-wrap)] → [텍스트(.desc)]
     ───────────────────────────────────────────────────────────────── */
  .container article:not(.ng-card) {
    flex-direction: column !important;
    margin-bottom: 32px !important;
    padding-bottom: 32px !important;
    border-bottom: 1px solid #ebebeb;
  }
  .container article:not(.ng-card):last-child {
    margin-bottom: 60px !important;
    padding-bottom: 0 !important;
    border-bottom: 0;
  }
  .container article:not(.ng-card) > .institution { order: 1; }
  .container article:not(.ng-card) > .img-wrap    { order: 2; }
  .container article:not(.ng-card) > .desc        { order: 3; }
  .container article:not(.ng-card) > .content     { order: 3; }

  /* 1) .institution — 로고 + 기관명 (가로 정렬, 풀폭) */
  .institution {
    width: 100% !important;
    height: auto !important;
    padding: 16px !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px;
    box-sizing: border-box;
  }
  .institution .txt {
    margin-bottom: 0 !important;
    font-size: 14px !important;
    text-align: left;
    line-height: 1.5;
  }
  .institution > div { flex-shrink: 0; }
  .institution img {
    max-height: 60px !important;
    width: auto !important;
    display: block;
  }

  /* 2) article > .img-wrap — 인물/조직 사진 (풀폭 반응형) */
  .container article > .img-wrap,
  .container article.article > .img-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 16px 0 0 !important;
    border: none !important;
    display: block !important;
  }
  .container article > .img-wrap img,
  .container article.article > .img-wrap img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* 3) .desc — 연구책임자 + Affiliation + Field of Study (좌측 마진 제거) */
  .desc {
    flex: none !important;
    margin: 16px 0 0 !important;
    width: 100%;
  }
  .desc strong {
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 14px !important;
  }
  .desc .txt {
    margin-bottom: 8px !important;
    font-weight: 600;
    color: #143a85;
  }
  .desc section {
    margin: 0 0 18px !important;
  }
  .desc section:last-child { margin-bottom: 0 !important; }

  /* bul-list — 항목 폰트 축소 */
  .bul-list {
    margin-bottom: 14px !important;
  }
  .bul-list li {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  /* network/* — article.article > .content */
  .container article.article > .content {
    flex: none !important;
    width: 100%;
    margin: 16px 0 0 !important;
  }
  .container article.article .title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
    color: #143a85;
  }
  .container article.article .desc {
    line-height: 1.55 !important;
    font-size: 13px !important;
  }

  /* 단독 .img-wrap (article 밖, 큰 단일 이미지) */
  .container > .inr > div > .img-wrap,
  .container .inr > .status-wrap > div > .img-wrap {
    width: 100% !important;
    margin: 0 0 20px !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     network/sites, network/map, network/sample_local 의 연구자 카드
     (.article--people) — 모바일 세로 스택
     순서: [국가] → [기관명] → [사진] → [이름] → [Affiliation] → [설명]
     (HTML 자연 순서 그대로 — flex-direction: column 로 세로 정렬만)
     ───────────────────────────────────────────────────────────────── */
  .article--people {
    flex-direction: column !important;
  }
  .article--people .article-header {
    width: 100% !important;
    margin-bottom: 16px !important;
  }
  .article--people .country {
    font-size: 20px !important;
    margin-bottom: 6px !important;
  }
  .article--people .subtitle {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .article--people .article-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    gap: 16px;
  }
  /* 사진: 적당한 크기로 중앙 정렬 (풀폭은 과해서 220px 제한) */
  .article--people .article-body .img-wrap {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
    margin: 0 auto !important;
    border: none !important;
    flex-shrink: initial !important;
    display: block !important;
  }
  .article--people .article-body .img-wrap img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain;
    display: block;
  }
  /* 콘텐츠 (이름 + Affiliation + 설명) */
  .article--people .article-body .content {
    display: block !important;
    width: 100% !important;
    padding-top: 0 !important;
  }
  .article--people .people-name {
    font-size: 17px !important;
    margin-bottom: 12px !important;
  }
  .article--people .people-info-list {
    padding-left: 16px !important;
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
  }
  .article--people .people-info-list li {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .article--people .people-desc-list {
    padding-left: 16px !important;
    margin-bottom: 0 !important;
  }
  .article--people .people-desc-list li {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     biobank/information — 임상자원 정보 (검색 영역 + 테이블)
     검색: 날짜·드롭다운·버튼을 모바일 그리드로 압축
     테이블: 비핵심 컬럼(기관명/시료번호/성별/연령/IRB) 숨김 + 가로 스크롤
     ───────────────────────────────────────────────────────────────── */

  /* 1) 자원 등록일 영역 (.info-search) — 날짜 2개를 한 줄에 50:50 */
  .info-search {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
  }
  .info-search > span:first-child {
    flex: 0 0 100%;
    font-size: 13px;
    color: #143a85;
    font-weight: 600;
  }
  .info-search > span:not(:first-child) {
    flex: 0 0 auto;
    padding: 0 2px;
    color: #888;
  }
  .info-search .info-date-inp {
    flex: 1 1 0;
    min-width: 0 !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    font-size: 13px;
  }

  /* 2) 안내 문구 ".col-red.fs20" 폰트 축소 */
  .col-red.fs20 {
    font-size: 13px !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
  }

  /* 3) 멀티셀렉트 드롭다운 그리드 (.info-selc-area) — 2열 */
  .info-selc-area {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  .info-selc-area .ms-wrap {
    width: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
  .info-selc-area .ms-ctrl {
    height: 38px !important;
    padding: 0 8px !important;
  }
  .info-selc-area .ms-label {
    font-size: 13px !important;
  }
  /* 검색/초기화 버튼: 그리드 끝에 풀폭으로 배치 (50:50) */
  .info-selc-area .search-box {
    grid-column: 1 / -1;
    display: flex !important;
    justify-content: stretch !important;
    gap: 8px !important;
    margin: 8px 0 18px !important;
  }
  .info-selc-area .search-box .btn {
    flex: 1 1 50%;
    height: 40px !important;
    margin: 0 !important;
    font-size: 14px !important;
    border-radius: 4px;
  }
  .info-selc-area .search-box .btn span {
    color: #fff;
  }

  /* 4) 결과 테이블 — 비핵심 컬럼 숨김 + 가로 스크롤 + 폰트 축소 */
  .tbl-resources-info {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px 16px !important;   /* 좌우 패딩 깨고 풀폭 사용 */
    padding: 0 16px !important;
  }
  .tbl-resources-info table {
    table-layout: auto !important;
    min-width: 480px;
    width: 100%;
    font-size: 12px;
  }
  .tbl-resources-info thead th {
    height: 38px !important;
    padding: 4px 3px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    word-break: keep-all;
  }
  .tbl-resources-info tbody td {
    height: 36px !important;
    padding: 4px 3px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  /* 모바일에서 숨길 컬럼:
       7=자원확보국·8=기관명·9=시료번호·10=성별·11=연령·12=IRB승인
     남기는 컬럼: 1=No, 2=등록번호, 3=감염병자원명, 4=자원유형,
                 5=보관량, 6=보관일, 13=분주 (=7개) */
  .tbl-resources-info colgroup col:nth-child(7),
  .tbl-resources-info colgroup col:nth-child(8),
  .tbl-resources-info colgroup col:nth-child(9),
  .tbl-resources-info colgroup col:nth-child(10),
  .tbl-resources-info colgroup col:nth-child(11),
  .tbl-resources-info colgroup col:nth-child(12),
  .tbl-resources-info thead th:nth-child(7),
  .tbl-resources-info thead th:nth-child(8),
  .tbl-resources-info thead th:nth-child(9),
  .tbl-resources-info thead th:nth-child(10),
  .tbl-resources-info thead th:nth-child(11),
  .tbl-resources-info thead th:nth-child(12),
  .tbl-resources-info tbody td:nth-child(7),
  .tbl-resources-info tbody td:nth-child(8),
  .tbl-resources-info tbody td:nth-child(9),
  .tbl-resources-info tbody td:nth-child(10),
  .tbl-resources-info tbody td:nth-child(11),
  .tbl-resources-info tbody td:nth-child(12) {
    display: none !important;
  }

  /* ─── 페이지네이션 모바일 정리 ─── */
  /* "전체 N건 중 X" 라벨은 데스크탑에선 position:absolute right:20px (버튼 우측 부유)
     모바일에선 별도 줄로 빼서 가운데 정렬 */
  .pagination-wrap {
    margin-top: 18px !important;
    padding-bottom: 8px !important;
    text-align: center;
  }
  .pagination-wrap .pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
  }
  .pagination-wrap .btn {
    width: 28px !important;
    height: 28px !important;
    background-size: 12px auto !important;
  }
  .pagination-wrap .prev-all { margin-right: 4px !important; }
  .pagination-wrap .next-all { margin-left: 4px !important; }
  .pagination-wrap .num-box {
    margin: 0 6px !important;
    display: inline-flex;
    gap: 2px;
  }
  .pagination-wrap .num {
    min-width: 24px !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
  }
  /* 전체 라벨 — position:absolute 해제하고 별도 줄에 작게 */
  .pagination-wrap .txt {
    position: static !important;
    display: block !important;
    margin: 10px 0 0 !important;
    font-size: 11px !important;
    color: #959595 !important;
    text-align: center !important;
    top: auto !important;
    right: auto !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     boards 목록 (notice/list.html) — 상단 영역 압축
     ───────────────────────────────────────────────────────────────── */
  .board-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .category-wrap {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px;
  }
  .category-wrap .txt {
    margin: 0 8px 0 0 !important;
    font-size: 13px !important;
    color: #555 !important;
  }
  .category-wrap .category-btn-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: 1 1 100%;
  }
  .category-wrap .category-btn {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    font-size: 13px !important;
  }
  .board-top-right {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .view-toggle {
    flex: 0 0 auto;
  }
  .board-top-right .search-box {
    flex: 1 1 auto;
    display: flex !important;
    gap: 6px;
    margin-bottom: 0 !important;
    min-width: 0;
  }
  .board-top-right .search-box form {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }
  .board-top-right .search-box .inp-text.search {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 13px;
  }
  .board-top-right .search-box .btn.search,
  .board-top-right .search-box .btn.cancel {
    flex: 0 0 auto;
    height: 36px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    font-size: 13px !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     boards 리스트뷰 (.tbl-board) — 표 → 카드 형식
     형식: [카테고리 뱃지] 제목(2줄 max) — 등록일
     숨김: 번호, 조회수
     ───────────────────────────────────────────────────────────────── */
  .tbl-board,
  .tbl-board thead,
  .tbl-board tbody,
  .tbl-board tr,
  .tbl-board td {
    display: block !important;
    height: auto !important;
    width: auto !important;
  }
  .tbl-board {
    border-top: 1px solid #143a85;
  }
  .tbl-board thead {
    display: none !important;
  }
  .tbl-board tr {
    padding: 12px 4px 14px !important;
    border-bottom: 1px solid #ebebeb !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  /* 데이터 없음 안내 td[colspan] 처리 */
  .tbl-board td[colspan] {
    padding: 30px 10px !important;
    text-align: center !important;
    color: #959595;
  }
  .tbl-board td {
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  /* 1번째: 번호 / 5번째: 조회수 → 숨김 */
  .tbl-board tbody tr > td:nth-child(1),
  .tbl-board tbody tr > td:nth-child(5) {
    display: none !important;
  }
  /* 2번째: 카테고리 (인라인 배지) */
  .tbl-board tbody tr > td:nth-child(2) {
    display: inline-block !important;
    padding: 3px 8px !important;
    margin: 0 0 8px !important;
    background: #eef2ff !important;
    color: #143a85 !important;
    border-radius: 3px;
    font-size: 11px !important;
    font-weight: 600;
    line-height: 1.3;
  }
  /* 3번째: 제목 (메인, 2줄 ellipsis) */
  .tbl-board tbody tr > td:nth-child(3) {
    display: block !important;
    margin: 0 0 6px !important;
  }
  .tbl-board tbody tr > td:nth-child(3) a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
    color: #0f2547 !important;
    font-size: 15px !important;
    font-weight: 500;
    line-height: 1.4 !important;
    text-decoration: none;
  }
  /* 본문 내 board-tag (예: "중요") — 카테고리 배지와 구분되게 인라인 표시 */
  .tbl-board tbody tr > td:nth-child(3) .board-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    background: #c8483a;
    color: #fff !important;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
    vertical-align: 1px;
  }
  /* 4번째: 등록일 (작게, 회색) */
  .tbl-board tbody tr > td:nth-child(4) {
    display: block !important;
    font-size: 12px !important;
    color: #959595 !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     boards 그리드뷰 (.ng-masonry) — JS masonry 무력화
     모바일에서는 CSS Grid 대신 단순 block flow + flexbox (2열)로 전환
     ───────────────────────────────────────────────────────────────── */
  .ng-masonry {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 24px !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
  }
  /* JS 가 남긴 인라인 style 모두 무력화 + flex 자연 배치 */
  .ng-masonry .ng-item {
    position: static !important;
    width: calc(50% - 6px) !important;   /* 2열 (50% - half of gap) */
    flex: 0 0 calc(50% - 6px) !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    align-self: flex-start !important;
  }
  .ng-img {
    height: 130px !important;
  }
  .ng-card-body {
    padding: 10px 12px 12px !important;
  }
  .ng-img-card .ng-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 3 !important;
  }
  .ng-card-inner {
    padding: 14px 14px 12px !important;
  }
  .ng-cat-label,
  .ng-cat-label-txt {
    font-size: 10px !important;
    letter-spacing: .12em !important;
    margin-bottom: 6px !important;
  }
  .ng-date {
    font-size: 10px !important;
    padding-top: 8px !important;
  }
  /* 텍스트 카드 제목 */
  .ng-title-txt {
    font-size: 14px !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 4 !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     application/apply.html — 분양신청 폼 모바일 (표 → 세로 스택 카드)
     <table>/thead/tbody/tr/th/td 모두 display:block 으로 변환.
     th = 라벨 (위), td = 입력 (아래). 모든 입력 100% 폭.
     ───────────────────────────────────────────────────────────────── */
  .apply-wrap .tbl-wrap {
    margin-bottom: 24px !important;
  }
  .apply-wrap .tbl-wrap table {
    display: block !important;
    width: 100% !important;
    border-top: 2px solid #143a85 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    table-layout: auto !important;
  }
  .apply-wrap .tbl-wrap colgroup,
  .apply-wrap .tbl-wrap col {
    display: none !important;
  }
  .apply-wrap .tbl-wrap thead,
  .apply-wrap .tbl-wrap tbody {
    display: block !important;
    width: 100% !important;
  }
  .apply-wrap .tbl-wrap tr {
    display: block !important;
    width: 100% !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #ebebeb !important;
    border-top: 0 !important;
    border-right: 0 !important;
  }
  .apply-wrap .tbl-wrap tr:last-child {
    border-bottom: 0 !important;
  }
  .apply-wrap .tbl-wrap th,
  .apply-wrap .tbl-wrap td {
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
    border: 0 !important;
    text-align: left !important;
    box-sizing: border-box;
  }
  /* 라벨 (th) — 작고 진한 navy */
  .apply-wrap .tbl-wrap th[scope="row"] {
    padding: 4px 0 6px !important;
    color: #143a85 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  /* 빈 th (라디오 라벨 등) 숨김 */
  .apply-wrap .tbl-wrap th[scope="row"]:empty {
    display: none !important;
  }
  /* 필수 표시(*) col-red 보존 */
  .apply-wrap .tbl-wrap th.col-red {
    color: #c8483a !important;
  }
  /* 입력 셀 (td) */
  .apply-wrap .tbl-wrap td {
    padding: 0 0 6px !important;
  }
  .apply-wrap .tbl-wrap td.right {
    text-align: left !important;
  }
  /* td colspan="3" 등도 동일 처리 (display: block 으로 colspan 무의미) */

  /* 입력 요소 — 모두 풀폭 */
  .apply-wrap .tbl-wrap input[type="text"],
  .apply-wrap .tbl-wrap input[type="email"],
  .apply-wrap .tbl-wrap input[type="tel"],
  .apply-wrap .tbl-wrap input[type="number"],
  .apply-wrap .tbl-wrap input[type="date"],
  .apply-wrap .tbl-wrap select,
  .apply-wrap .tbl-wrap textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    box-sizing: border-box;
  }
  .apply-wrap .tbl-wrap textarea {
    height: auto !important;
    min-height: 100px !important;
    padding: 10px !important;
    resize: vertical;
  }
  .apply-wrap .apply-textarea {
    width: 100% !important;
    height: auto !important;
    min-height: 120px !important;
  }

  /* flex-area — 모바일에서 wrap 허용 */
  .apply-wrap .flex-area {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    margin-bottom: 6px !important;
  }
  .apply-wrap .flex-area .area {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* 이메일 @ 분리자 */
  .apply-wrap .flex-area .txt-at {
    flex: 0 0 auto !important;
    padding: 0 2px !important;
    font-weight: 600;
    color: #555;
  }
  /* 이메일 select.sel-mail — 한 줄 채움 */
  .apply-wrap .tbl-wrap .sel-mail {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  /* 전화번호 입력 — 한 줄 3분할 */
  .apply-wrap .tbl-wrap input[type="text"].apply-contact,
  .apply-wrap .tbl-wrap select.apply-contact {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 60px !important;
    margin: 0 !important;
  }
  /* 전화번호 영역 — apply.html inline style 에서 별도 처리 */

  /* 우편번호 / 주소 버튼 — 풀폭 */
  .apply-wrap .apply-btn {
    display: inline-block !important;
    width: auto !important;
    min-width: 100px !important;
    margin-left: 0 !important;
    padding: 0 16px !important;
    height: 40px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    line-height: 40px !important;
    background: #143a85 !important;
    color: #fff !important;
  }
  .apply-wrap .apply-btn span {
    color: #fff;
  }

  /* 체크박스/라디오 (.lb-box) — 모바일 적정 크기 */
  .apply-wrap .tbl-wrap .lb-box {
    display: inline-flex !important;
    align-items: center;
    margin-right: 12px !important;
    margin-bottom: 4px;
    padding-left: 26px !important;
    min-height: 24px;
  }
  .apply-wrap .tbl-wrap .lb-box .mark {
    top: 50% !important;
    transform: translateY(-50%);
    width: 18px !important;
    height: 18px !important;
  }
  .apply-wrap .tbl-wrap .lb-box .txt-label {
    margin-left: 0 !important;
    font-size: 13px;
    line-height: 1;
  }

  /* 섹션 제목 (.apply-title) */
  .apply-wrap .apply-title {
    margin: 18px 0 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #143a85 !important;
    line-height: 1.4 !important;
  }

  /* 안내 문구 .apply-comt / col-red — 폰트 축소 */
  .apply-wrap .apply-comt,
  .apply-wrap .col-red,
  .apply-wrap .col-gray {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .apply-wrap .col-red.mb20 {
    margin-bottom: 12px !important;
  }

  /* 하단 큰 버튼 (apply-btn-next/cancel/mody) — 풀폭 세로 스택 */
  .apply-wrap .btn-wrap.center {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 24px 0 30px !important;
  }
  .apply-wrap .btn-wrap.center .apply-btn-next,
  .apply-wrap .btn-wrap.center .apply-btn-cancel,
  .apply-wrap .btn-wrap.center .apply-btn-mody {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 48px !important;
    font-size: 15px !important;
    border-radius: 4px !important;
  }
  .apply-wrap .btn-wrap.center .apply-btn-next .txt,
  .apply-wrap .btn-wrap.center .apply-btn-cancel .txt,
  .apply-wrap .btn-wrap.center .apply-btn-mody .txt {
    font-size: 15px !important;
  }
  .apply-wrap .apply-btn-next {
    width: auto !important;
    max-width: none !important;
  }

  /* 진행 단계 (.process-list) — 한 줄 컴팩트 */
  .apply-wrap .process-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    font-size: 12px !important;
  }

  /* 약관 동의 (.agree-section) */
  .apply-wrap .agree-section {
    margin: 16px 0 !important;
    padding: 12px !important;
  }
  .apply-wrap .agree-section .agree-title {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  .apply-wrap .agree-section .agree-list {
    font-size: 12px !important;
  }
  .apply-wrap .agree-comt {
    font-size: 12px !important;
  }

  /* 자원 검색·선택 영역 */
  .apply-wrap .apply-sel-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .apply-wrap .btn-apply-sel,
  .apply-wrap .btn-del-item {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    border-radius: 4px !important;
  }
  /* 선택된 자원 헤더/타이틀 */
  .apply-wrap .apply-rsrc-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin-bottom: 12px !important;
  }
  .apply-wrap .apply-rsrc-tit {
    font-size: 14px !important;
  }

  /* 수량 입력 (.apply-num, .qty-input) */
  .apply-wrap .apply-num,
  .apply-wrap .qty-input {
    width: 90px !important;
    height: 36px !important;
    margin: 0 4px !important;
    padding: 0 8px !important;
    font-size: 14px !important;
    text-align: center;
  }
}

/* 매우 좁은 화면 (≤480px) — 그리드뷰 1열 */
@media (max-width: 480px) {
  .ng-masonry .ng-item {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  .ng-img {
    height: 180px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   pages/home.html — 메인 모바일 전용
   구조: [히어로 이미지] → [국가 카드 그리드] → [확보현황·검색·자원은행] →
         [참여기관 가로 스크롤] → [footer · 관련사이트]
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 모바일: .main-wrap 폭 강제 + 가로 overflow 차단 (자식 패딩 이중 적용 방지) */
  .main-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  /* 모바일: 지도 히어로 이미지 제거 — 국가 카드 그리드로 대체 */
  .main-wrap .main-img {
    display: none !important;
  }

  /* 국가 카드 그리드 — 3열 (≤480px 2열) */
  .m-country-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 20px 16px 24px !important;
    padding: 0 !important;
    list-style: none;
  }
  .m-country-list li {
    margin: 0 !important;
  }
  .m-country-list a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: background .15s, border-color .15s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    min-height: 72px;
    justify-content: center;
    box-sizing: border-box;
  }
  .m-country-list a:hover,
  .m-country-list a:active {
    background: #eef2ff;
    border-color: #c7d2fe;
  }
  /* 국기+기관로고 crop — 원본 지도(1600×740) 스케일 0.735, 표시 영역 80×38 (안쪽 가운데만) */
  .m-country-list .m-flag-img {
    display: block;
    width: 80px;
    height: 38px;
    background-image: url('/static/_nuxt/img/map4.bcd3efb.png');
    background-size: 1176px 544px;
    background-repeat: no-repeat;
    background-color: transparent;
    margin: 0 auto 4px;
  }
  /* 대한민국 카드 — 한국 국기 + SNUH 로고 합성 이미지 (다른 카드와 톤앤매너 동일) */
  .m-country-list .m-flag-img--kr {
    background-image: url('/static/_nuxt/img/flag-kr-snuh.png') !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  .m-country-list .m-cname {
    color: #143a85;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
    line-height: 1.25;
    word-break: keep-all;
  }

  /* status-wrap — 가로 3섹션 → 세로 스택 (.inr 의 padding 사용, 자체 좌우 padding 제거) */
  .main-wrap .status-wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 0 8px !important;
    gap: 0;
    box-sizing: border-box;
  }
  .main-wrap .status-box,
  .main-wrap .status-search-box,
  .main-wrap .bank-box {
    flex: none !important;
    width: 100% !important;
    padding: 18px 0 !important;
    border-left: 0 !important;
    border-top: 1px solid #ebebeb !important;
    box-sizing: border-box;
  }
  .main-wrap .status-box {
    border-top: 0 !important;
  }
  .main-wrap .status-wrap .title {
    font-size: 15px !important;
  }
  .main-wrap .status-wrap .desc {
    margin-top: 4px !important;
    font-size: 13px !important;
  }

  /* 확보현황 그리드 */
  .main-wrap .status-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 14px !important;
    justify-content: stretch !important;
  }
  .main-wrap .status-list li {
    width: auto !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
  }
  .main-wrap .status-box img {
    width: 36px;
    height: auto;
    flex-shrink: 0;
  }
  .main-wrap .status-box .txt-wrap {
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: column;
  }
  .main-wrap .status-box .name {
    color: #555 !important;
    font-size: 12px !important;
    text-align: left !important;
  }
  .main-wrap .status-box .count {
    margin-top: 2px !important;
    font-size: 20px !important;
    color: #00b1e1 !important;
  }
  .main-wrap .status-list li:nth-child(3) .txt-wrap,
  .main-wrap .status-list li:nth-child(4) .txt-wrap {
    margin-left: 0 !important;
  }

  /* 감염병 자원 검색 박스 */
  .main-wrap .status-search-box .search {
    width: 100% !important;
    margin-top: 12px !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .main-wrap .status-search-box form {
    display: flex !important;
    width: 100%;
    gap: 8px;
  }
  .main-wrap .status-search-box .ms-wrap {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    margin-right: 0 !important;
  }
  .main-wrap .status-search-box #ms-main-bct {
    width: auto !important;
  }
  .main-wrap .status-search-box .ms-ctrl {
    width: 100% !important;
    height: 40px !important;
    background: #f4f4f4 !important;
  }
  .main-wrap .status-search-box .btn-search {
    flex: 0 0 auto !important;
    position: static !important;
    width: 64px !important;
    height: 40px !important;
    background: #143a85 !important;
    color: #fff !important;
    border-radius: 4px;
  }

  /* 감염병 자원은행 박스 */
  .main-wrap .bank-box .link-apply {
    display: block !important;
    width: 100% !important;
    max-width: 320px;
    margin: 12px auto 0 !important;
    padding: 12px 36px 12px 20px !important;
    background-position: calc(100% - 16px) 50% !important;
    text-align: left;
    font-size: 14px;
  }

  /* 참여기관 로고 — 가로 스와이프 (.inr padding 16 외에 추가 padding 없음, 좌우 자연 끝까지) */
  .main-wrap .sites {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 18px 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    box-sizing: border-box;
    width: 100%;
  }
  .main-wrap .sites li {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .main-wrap .sites li a {
    display: block;
  }
  .main-wrap .sites li a img {
    width: 90px !important;
    height: auto !important;
    max-width: none !important;
  }

  /* footer 관련사이트 (.select-box) — 데스크탑은 우측 absolute 드롭다운,
     모바일은 풀폭 + 아코디언 형식 (select-list 도 static 으로 변경, z-index 충돌 해소) */
  .footer .select-box {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    top: auto !important;
    right: auto !important;
    margin: 4px 0 14px !important;
    padding: 12px 16px !important;
    background: #fff !important;
    border: 1px solid #d8dde3 !important;
    border-radius: 4px !important;
    box-sizing: border-box;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    z-index: 1;
  }
  .footer .select-box .tit {
    display: block !important;
    font-weight: 600;
    color: #143a85 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    position: relative;
    padding-right: 18px;
  }
  .footer .select-box .tit::after {
    content: "▾";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 11px;
    transition: transform .2s;
  }
  /* 펼친 상태 화살표 회전 */
  .footer .select-box .select-list.active ~ .tit::after,
  .footer .select-box:has(.select-list.active) .tit::after {
    transform: translateY(-50%) rotate(180deg);
  }
  /* select-list — absolute 해제, 풀폭 아코디언 */
  .footer .select-list,
  .footer .select-box .select-list {
    display: none !important;
    position: static !important;
    width: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    margin: 10px -16px -12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid #ebebeb !important;
    border-radius: 0 0 4px 4px !important;
    background: #fafbfc !important;
    list-style: none;
    box-shadow: none !important;
  }
  .footer .select-list.active,
  .footer .select-box .select-list.active {
    display: block !important;
  }
  .footer .select-box .select-list li {
    padding: 0 !important;
    margin: 0 !important;
  }
  .footer .select-box .select-list li:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
  }
  .footer .select-box .select-list a {
    display: block !important;
    padding: 10px 16px !important;
    color: #555 !important;
    font-size: 13px !important;
    background: transparent !important;
    border: 0 !important;
  }
  .footer .select-box .select-list a:hover,
  .footer .select-box .select-list a:active {
    background: #eef2ff !important;
    color: #143a85 !important;
  }
}

/* 매우 좁은 화면 (≤480px) — 국가 그리드 2열 */
@media (max-width: 480px) {
  .m-country-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 매우 좁은 화면 (≤480px) — 드롭다운 1열 */
@media (max-width: 480px) {
  .info-selc-area {
    grid-template-columns: 1fr !important;
  }
}