/* =====================================================
   skin/content/basic/mobile.css
   - 내용관리(co_id) 페이지 전용 반응형 통합 파일
   - style.css 안에 흩어져 있던 @media 블록들을 전부 여기로 이동.
   - PC 기준(style.css의 non-media 규칙)은 절대 건드리지 않음.
   ===================================================== */

/* =========================================================
   공통: 타이틀 언더라인 여백 고정 (모든 co_id 페이지 공통)
   ========================================================= */
   @media (max-width: 768px) {
    .biz-promo-scope > p::before { top: 10px; }
    .sp-wrap:has(.page-greeting) .sp-title-line,
    .sp-wrap:has(.biz-vision-page) .sp-title-line,
    .sp-wrap:has(.history-wrap) .sp-title-line,
    .sp-wrap:has(.org-wrap) .sp-title-line,
    .sp-wrap:has(.branch-wrap) .sp-title-line,
    .sp-wrap:has(.biz-info-page) .sp-title-line,
    .sp-wrap:has(.work-brand-page) .sp-title-line,
    .sp-wrap:has(.town-brand-page) .sp-title-line,
    .sp-wrap:has(.biz-carwash-page) .sp-title-line,
    .sp-wrap:has(.biz-promo-page) .sp-title-line,
    .sp-wrap:has(.biz-volunteer-page) .sp-title-line,
    .sp-wrap:has(.biz-support-page) .sp-title-line,
    .sp-wrap:has(.legal-page) .sp-title-line {
        margin-bottom: 40px; /* 기본값(40px)과 동일하지만 명시적으로 고정 */
    }
}

/* =========================================================
   사업안내 탭 (biz-tab / biz-tab-table) - 사업소개 페이지 상단 탭
   ========================================================= */
@media (max-width: 480px) {
    .biz-tab {
        height: auto;
        min-height: 56px;
        padding: 14px 6px;
        font-size: 15px;
    }
}

/* =========================================================
   biz-img-list (의류/안전용품 등 이미지 목록)
   ========================================================= */
@media (max-width: 768px) {
    .biz-img-list li {
        display: block;
        width: 100%;
        padding: 0 0 10px 0;
    }
    .biz-check {
        margin-top: 60px;
        font-size: 20px;
    }
}

/* =========================================================
   biz-map / biz-mapBox (찾아오시는길)
   ========================================================= */
@media (max-width: 768px) {
    .biz-map {
        display: none;
    }
    .biz-mapM {
        display: block;
    }
    .biz-mapBox {
        padding: 1rem 1.5rem 1rem 1rem;
    }
    .biz-mapBox ul {
        font-size: 0.8rem;
        line-height: 1.4rem;
    }
    .biz-mapBox ul li:last-child {
        position: static;
        width: 100%;
        height: auto;
        margin-top: 16px;
        border-radius: 0px;
        background: #000;
        padding: 14px 0;
        text-align: center;
    }
    .biz-mapBox ul li:last-child a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding-top: 0;
        font-size: 15px;
    }
    .biz-mapIcon {
        display: inline-block;
        margin: 0 0.5rem 0;
        vertical-align: middle;
        height: 43px;
    }
}

/* =========================================================
   biz-hero (일부 페이지 상단 히어로)
   ========================================================= */
@media (max-width: 768px) {
    .biz-hero {
        margin-top: 2rem;
    }
    .biz-hero-inner {
        padding-bottom: 5rem;
    }
    .biz-hero-people {
        width: 72%;
        filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.25));
    }
    .biz-hero-content {
        margin-top: 2.5rem;
    }
    .biz-hero-content table,
    .biz-hero-content tbody,
    .biz-hero-content tr,
    .biz-hero-content td {
        display: block;
        width: 100% !important;
    }
    .biz-hero-content td {
        text-align: left !important;
        border-left: none !important;
        padding: 20px 0 !important;
    }
}

/* =========================================================
   장성군 브랜드 (work-brand-page)
   ========================================================= */
@media (max-width: 1024px) and (min-width: 769px) {
    .work-brand-wrap { flex-wrap: wrap; }
    .work-brand-card { width: calc(50% - 10px); margin-bottom: 20px; }
}
@media screen and (max-width: 768px) {
    .work-brand-hero { padding: 60px 24px 40px; }
    .work-brand-lead { font-size: 20px; line-height: 30px; }
    .work-brand-desc { font-size: 16px; line-height: 24px; }
    .work-brand-wrap { flex-wrap: wrap; }
    .work-brand-card { width: 100%; height: auto; margin-bottom: 20px; }
}

/* =========================================================
   타운 브랜드 (town-brand-page)
   ========================================================= */
@media (max-width: 900px) {
    .town-brand-page { padding: 50px 0; }
    .town-brand-lead { font-size: 20px; line-height: 30px; }
}
@media (max-width: 770px) {
    .town-brand-page { padding: 40px 0; }
    .town-brand-logo { padding: 16px; margin-bottom: 24px; }
    .town-brand-lead { font-size: 17px; line-height: 26px; margin-bottom: 24px; text-align: center; }
    .town-brand-table,
    .town-brand-table tbody,
    .town-brand-table tr,
    .town-brand-table td {
        display: block;
        width: 100%;
    }
    .town-brand-table td {
        padding: 20px 0 !important;
        border-right: none !important;
        text-align: center; /* 좌측정렬이었던 걸 타겟처럼 중앙정렬로 */
    }
}

/* =========================================================
   연혁 타임라인 (history-wrap / timeline)
   ========================================================= */
@media (max-width: 768px) {
    .timeline-track,
    .timeline-fill {
        left: 20px;
        margin-left: -1px; /* 트랙 두께(2px) 절반만큼 보정 - left는 왼쪽 끝 기준이라 살짝 우측으로 치우쳐 보이던 문제 */
        transform: none;
    }
    .timeline-dot {
        left: 20px;
        margin-left: -7px;
    }
    .timeline-start {
        justify-content: flex-start;
        padding-left: 20px;
    }
    .timeline-start img {
        margin-left: -12px; /* 아이콘 24px의 절반 - 트랙/닷과 동일한 left+margin-left 방식으로 통일 */
    }
    .timeline-content,
    .timeline-item[data-side="right"] .timeline-content,
    .timeline-item[data-side="left"] .timeline-content {
        position: static; /* absolute였을 때 부모(li)의 min-height:90px가 실제 내용 높이를
                              반영 못해서 다음 항목이랑 겹치던 문제 - static으로 바꿔서 자연스럽게 흐르게 */
        left: auto !important;
        right: auto !important;
        width: 100%;
        text-align: left !important;
        padding-left: 45px;
        box-sizing: border-box;
    }
    .timeline-item {
        min-height: 0;
    }
    .timeline-item[data-side="right"],
    .timeline-item[data-side="left"] {
        transform: translateX(0);
    }
}

/* =========================================================
   조직도 (org-wrap)
   ========================================================= */
@media (max-width: 768px) {
    .org-inner { padding: 40px 0; }
    .org-chart-img { width: 92%; }
}

/* =========================================================
   산하시설 명단 (branch-wrap)
   ========================================================= */
@media (max-width: 768px) {
    .branch-table { font-size: 13px; }
    .branch-table thead th,
    .branch-table tbody td { padding: 10px 6px; }
    .branch-table tbody td:nth-child(4) { word-break: keep-all; }
}

/* =========================================================
   인사말 (page-greeting) + 재단 연혁 배너
   ========================================================= */
@media (max-width: 768px) {
    .greeting-table {
        margin-top: 40px; /* PC 100px → 모바일은 좁게 */
    }
    .greeting-table,
    .greeting-table tbody,
    .greeting-table tr,
    .greeting-welcome,
    .greeting-text {
        display: block;
        width: 100% !important;
    }
    .greeting-welcome {
        padding: 0 0 20px 0;
        text-align: left;
        font-size: 22px;
    }
    .greeting-welcome br {
        display: none; /* 줄바꿈용 <br>이 좁은 화면에서 억지로 끊어보이지 않게, 한 줄로 자연스럽게 */
    }
    .greeting-text {
        padding: 20px 0 0 0;
        border-left: none;
        border-top: none; /* welcome 밑으로 배치만 하고 구분선은 없앰 */
        font-size: 16px;
    }
    .greeting-signature {
        padding: 20px 0 0 0;
        font-size: 20px;
        text-align: right; /* 좁아져도 우측 정렬 유지 */
    }

    .history-banner-bg { display: none; }
    .history-banner-bg-m { display: block; width: 100%; height: auto; }
    .history-banner-text {
        left: 0;
        right: 0;
        text-align: center;
    }
    .history-banner-text strong { font-size: 22px; }
    .history-banner-text p { font-size: 14px; }
    .timeline { margin-top: 60px; }
    .timeline-year { font-size: 19px; }
    .timeline-desc p {
        flex-direction: column !important;
        align-items: flex-start !important;
        font-size: 14px;
    }
    .timeline-item[data-side="right"] .month,
    .timeline-item[data-side="left"] .month,
    .timeline-item:nth-child(odd) .month,
    .timeline-item:nth-child(even) .month {
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 4px;
        font-size: 14px;
        flex: none; /* flex:0 0 40px가 column 방향에선 세로축(높이) 최소값으로 작동해서 아래에 여백을 만들던 문제 */
    }
    .month-empty { display: none; } /* &nbsp;만 있는 자리표시용 month는 모바일에서 숨김 */
}

/* ★ 2026-07: 위 .timeline-desc 줄바꿈 규칙이 768px까지만 있어서 769~1100px 구간(예: 1034px)에서
   월-내용이 맞으면 한 줄, 안 맞으면 줄바꿈 하는 예전 방식이 남아있어 들쭉날쭉해 보이던 문제.
   범위를 넓혀서 이 구간도 항상 줄바꿈되게 통일 */
@media (max-width: 1100px) {
    .timeline-desc p {
        flex-direction: column !important;
        line-height: 1.3; /* PC 1.7이 월/내용 사이 여백을 과하게 벌려서 축소 */
        margin-bottom: 16px; /* 같은 연도 안 여러 항목(p) 사이 간격 - 기존엔 0이라 붙어보였음 */
    }
    .timeline-desc p:last-child { margin-bottom: 0; }
    .timeline-desc p { text-indent: 0 !important; } /* PC 전용 정렬용 인라인 text-indent:3em - 모바일 세로배치에선 의미없는 여백이 되어 무효화 */
}
@media (max-width: 1100px) and (min-width: 769px) {
    /* 769~1100px: 아직 좌우 지그재그 유지되는 구간 - 우측은 좌측정렬, 좌측은 우측정렬 유지
       (min-width로 범위 좁혀서 768px 이하 완전스택 구간의 좌측정렬 규칙과 안 부딪히게) */
    .timeline-item[data-side="right"] .timeline-desc p,
    .timeline-item:nth-child(odd) .timeline-desc p {
        align-items: flex-start !important;
    }
    .timeline-item[data-side="left"] .timeline-desc p,
    .timeline-item:nth-child(even) .timeline-desc p {
        align-items: flex-end !important;
    }
    .timeline-item[data-side="right"] .month,
    .timeline-item[data-side="left"] .month,
    .timeline-item:nth-child(odd) .month,
    .timeline-item:nth-child(even) .month {
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 4px;
        flex: none; /* flex:0 0 40px가 column 방향에선 세로축(높이) 최소값으로 작동해서 아래에 여백을 만들던 문제 */
    }
    .month-empty { display: none; } /* &nbsp;만 있는 자리표시용 month는 모바일에서 숨김 */
}

/* =========================================================
   비전및연혁 (biz-vision-page, 회사 3사 공통)
   ========================================================= */
@media (max-width: 1024px) and (min-width: 769px) {
    .biz-vision-icons td { width: 50%; }
}
@media (max-width: 768px) {
    .biz-mission-table,
    .biz-mission-table tbody,
    .biz-mission-table tr,
    .biz-mission-cell,
    .biz-mission-img {
        display: block;
        width: 100% !important;
    }
    .biz-mission-cell { padding: 88px 0; margin-bottom: 8px; } /* 타겟 기준: 5.5rem 0, li margin-bottom:.5rem */
    .biz-mission-cell p { font-size: 22px; } /* PC 35px는 모바일엔 너무 커서 축소 유지 */
    .biz-mission-img { height: 220px; }
    .biz-mission-gap { display: none; }

    .biz-vision-box { height: 220px; padding: 24px 20px; box-sizing: border-box; } /* 텍스트 침범 방지 - 아이콘 겹침(115px) 빼고도 105px 여유 확보 */
    .biz-vision-box p { font-size: 18px; }

    .biz-vision-icons { width: 100%; margin: -115px auto 40px; } /* 아이콘(229px) 절반만큼 회색배경 위로 겹치게 */
    .biz-vision-icons,
    .biz-vision-icons tbody,
    .biz-vision-icons tr,
    .biz-vision-icons td {
        display: block;
        width: 100% !important;
    }
    .biz-vision-icons td { margin-bottom: 30px; }

    .biz-facility-box { margin-top: 24px; margin-bottom: 50px; padding: 32px 40px; } /* 타겟 기준: 2rem 2.5rem */
    .biz-facility-list li { font-size: 15px; }
    .biz-facility-list li::before { width: 15px; height: 15px; }

    .biz-org-wrap { margin-top: 24px; margin-bottom: 50px; padding: 30px 0; }

    .biz-history-table,
    .biz-history-table tbody,
    .biz-history-table tr {
        display: block;
        width: 100%;
    }
    .biz-history-year {
        display: block; /* 타겟 기준: float만 없애고 width는 PC와 동일하게 고정 유지 */
        width: 100px;
        text-align: center;
        padding: 20px 0; /* 위아래 대칭 - 타겟도 padding:1.25rem 0 그대로 유지, 위쪽만 남기던 거 수정 */
        font-size: 22px;
    }
    .biz-history-content {
        display: block;
        width: 100%;
        padding-left: 0;
    }
    .biz-history-inner,
    .biz-history-inner tbody,
    .biz-history-inner tr {
        display: block;
        width: 100%;
    }
    .biz-history-inner td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 16px 0;
    }
    .biz-history-month,
    .biz-history-desc { font-size: 15px; } /* 타겟은 모바일에서도 월/내용 한 줄 2칸 유지(display 안 바꿈) - 그대로 유지 */
    .biz-history-spacer td { height: 68px; }

    /* 이용안내 (biz-info-page) */
    .biz-panel { margin-top: 50px; }
    .biz-intro-img,
    .biz-panel h4.biz-program-title { margin-top: 35px; }
    .biz-program { margin-top: 30px; }
    /* ★ 2026-07: 타겟처럼 좁은 화면에서도 계속 좌측 아이콘/우측 텍스트 2칸 유지
       (예전엔 아이콘 위/텍스트 아래로 쌓는 방식이었는데, 타겟은 그렇게 안 함) */
    .biz-program dl {
        min-height: 110px;
        padding: 22px 0 22px 130px; /* 아이콘+간격만큼만 좌측 여백, 아이콘 크기 축소에 맞춰 줄임 */
    }
    .biz-program dt { margin: 0; }
    .biz-program dl::before {
        left: 16px;
        width: 70px;
        height: 82px;
    }
    .biz-program dl::after { left: 130px; } /* 줄어든 padding-left(130px)에 맞춰 구분선 시작점도 같이 이동 */
}

@media (max-width: 1024px) {
    .biz-apply ul {
        flex-direction: column;
        align-items: stretch;
        background-position: center top 30px; /* 타겟 사이트 기준 - 사이즈는 강제로 안 줄임(원본 그대로) */
    }
    .biz-apply li:first-child {
        width: 100%;
        box-sizing: border-box;
        padding: 165px 0 25px; /* 좌측 아이콘용 265px 안 쓰고, 위쪽에 아이콘 자리 확보 */
        text-align: center;
    }
    .biz-apply li:first-child::after {
        top: 100%;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
    } /* 세로 분리선(2칸용) -> 스택 상태에선 가로선(li 사이 구분선)으로 전환 */
    .biz-apply li:last-child {
        width: 100%;
        box-sizing: border-box;
        padding: 20px 0;
    }
    .biz-apply-flow { max-width: 100%; }
    .biz-apply-flow img { height: auto; }
}

@media (max-width: 768px) {
    .biz-employ ul { flex-direction: column; gap: 20px; }
    .biz-employ li { width: 100%; }
    .biz-employ .conts img { display: none; } /* 타겟 사이트도 모바일에선 아예 숨김 - 좁은 화면에서 float라도 글자 줄이 너무 짧아지는 것 방지 */
}

/* =========================================================
   새로e 출장세차 (biz-carwash-page)
   ========================================================= */
@media (max-width: 1024px) and (min-width: 769px) {
    .biz-carwash-products table,
    .biz-carwash-products tbody,
    .biz-carwash-products tr { display: block; width: 100%; }
    .biz-carwash-products td { display: inline-block; width: 50%; box-sizing: border-box; }
}
@media (max-width: 768px) {
    .biz-carwash-hero { height: auto; padding: 24px 16px; }
    .biz-carwash-hero h2 { font-size: 28px; }
    .biz-carwash-products { margin-top: 24px; }
    .biz-carwash-products table,
    .biz-carwash-products tbody,
    .biz-carwash-products tr,
    .biz-carwash-products td {
        display: block;
        width: 100%;
    }
    .biz-carwash-price { margin-top: 24px; }
}

/* =========================================================
   인증서 및 특허 (biz-promo-page)
   ========================================================= */
@media (max-width: 768px) {
    .biz-cert-list {
        margin-top: 20px;
        margin-bottom: 60px;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .biz-cert-list li img {
        width: 100%;
        height: auto;
        max-width: 140px;
    }
    .biz-promo-intro { margin-top: 20px; margin-bottom: 30px; }
    .biz-promo-intro,
    .biz-promo-intro tbody,
    .biz-promo-intro tr,
    .biz-promo-intro td {
        display: block;
        width: 100%;
    }
    .biz-promo-intro td { padding: 0 20px 20px; }
    .biz-promo-intro .icon-col { margin: 0 auto; padding: 20px 0; } /* 220px 고정폭 박스 자체를 가운데로 - width:100% 못 먹혀서 좌측에 붙어있던 문제 */
    .biz-promo-intro .icon-col img { margin: 12px auto; }
}

/* ★ biz-promo-scope는 계속 넓은 범위(1024px)에서 여백 문제 있었음 */
@media (max-width: 1024px) {
    .biz-promo-scope { padding-left: 0; margin-bottom: 30px; }
    .biz-promo-scope > p { padding-left: 20px; } /* 0으로 하면 ::before 원이 글자랑 겹침 - 원 하나 들어갈 여백은 남김 */
    .biz-promo-scope-list { padding-left: 16px; }
}

/* ★ biz-promo-banner: 770px 이하 = 완전 스택(위/아래), 771~1024px = 2칸 유지하되
   고정폭(margin-left 95px, img-col 415px, text-col padding-right 240px)을 줄여서
   실제로 들어갈 공간을 확보 - 원래 폭 그대로면 이 구간에서 글자가 세로로 쪼개지던 문제 */
@media (max-width: 1024px) and (min-width: 771px) {
    .biz-promo-banner { margin-left: 24px; margin-right: 24px; }
    .biz-promo-banner .img-col { width: 280px; padding: 30px 24px 30px 24px; }
    .biz-promo-banner .img-col img { max-width: 100%; }
    .biz-promo-banner .text-col { padding: 30px 30px 30px 24px; }
}

@media (max-width: 770px) {
    .biz-promo-banner { margin-left: 0; }
    .biz-promo-banner,
    .biz-promo-banner tbody,
    .biz-promo-banner tr,
    .biz-promo-banner .img-col,
    .biz-promo-banner .text-col {
        display: block;
        width: 100%;
    }
    .biz-promo-banner .img-col { padding: 30px 24px; }
    .biz-promo-banner .img-col img { width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
    .biz-promo-banner .text-col { padding: 0 24px 30px; }
}

/* =========================================================
   자원봉사안내 (biz-volunteer-page)
   ========================================================= */
@media (max-width: 768px) {
    .biz-volunteer-procedure { margin-top: 20px; margin-bottom: 40px; }
    .biz-volunteer-contact { margin-top: 20px; margin-bottom: 30px; height: auto; padding: 20px; }
    .biz-volunteer-contact p {
        font-size: 15px;
        padding-left: 16px;
        text-indent: -16px; /* 2줄로 줄바꿈될 때 "-" 다음 내용 시작점에 맞춰 정렬되게 (매달린 들여쓰기) */
    }
    .biz-volunteer-issue { margin-top: 20px; }
}

/* =========================================================
   후원안내 (biz-support-page)
   ========================================================= */
@media (max-width: 1024px) and (min-width: 769px) {
    /* 타겟 tablet.css 기준: 폭은 mobilelarge와 동일(7.5rem), 아이콘 위치만 다름(.75rem) */
    .biz-support-methods dt { width: 120px; background-position: center top 12px; }
    .biz-support-methods dd { width: calc(100% - 120px); }
}
@media (max-width: 768px) {
    .biz-support-page h4 { margin: 30px 0 16px; }
    .biz-support-types .label { width: 90px; height: 56px; font-size: 15px; }
    .biz-support-types .desc { padding: 16px; font-size: 14px; }
    /* 후원방법 dl/dt/dd - 타겟 기준: 폭만 좁아지고(11.3rem→7.5rem), 아이콘 위치만 살짝 아래로(center top .5rem) */
    .biz-support-methods dt {
        width: 120px; /* 타겟 기준: 7.5rem */
        background-position: center top 8px; /* 타겟 기준: center top .5rem */
    }
    .biz-support-methods dd { width: calc(100% - 120px); }
    .biz-support-note { margin-top: 30px; font-size: 18px; }
}

/* =========================================================
   법적고지 (legal-page) - 이메일무단수집거부 / 개인정보처리방침 / 이용자권리
   ★ 폰트사이즈는 그대로 두고(사이트 기본 18px 유지 방침),
   좁은 화면에서 좌측 여백만 단계적으로 줄임
   ========================================================= */
@media (max-width: 480px) {
    .legal-page p { margin-left: 12px; }
    .legal-page .detail-group { margin-left: 12px; }
    .legal-page p.detail-sub-sub {
        margin-left: 22px;  /* 세부 p 좌측(12px) + 0.5rem(10px) */
        text-indent: -8px;
    }
    /* 후원방법 - 타겟 mobilesmall.css 기준 */
    .biz-support-methods dt { width: 144px; } /* 타겟 기준: 9rem */
    .biz-support-methods dd { width: calc(100% - 144px); }
}

/* =========================================================
   e-브로슈어 다운로드 버튼 (biz-brochure-btn-table)
   ★ width:30%가 좁은 화면에서 너무 좁아져서 버튼 글자가 3줄로 쪼개지던 문제
   ========================================================= */
@media (max-width: 768px) {
    .biz-brochure-btn-table { width: 80% !important; }
}
@media (max-width: 400px) {
    .biz-brochure-btn-table { width: 95% !important; }
}

/* 장애인직업재활이란? (biz-rehab-plan) 모바일 - 좌우 2칸 -> 위아래 스택 */
@media (max-width: 768px) {
    .biz-rehab-plan ul { display: block; }
    .biz-rehab-plan li {
        width: 100% !important;
        margin-bottom: 8px;
    }
    .biz-rehab-plan li p { padding: 88px 0; font-size: 22px; }
    .biz-rehab-plan-img { height: 220px; }
}