@charset "utf-8";
/* ==================================================================
   서부경남광고센터 — 디자인 시스템
   ------------------------------------------------------------------
   기존 테마는 같은 색상 토큰을 6개 섹션에서 각각 재선언하고,
   섹션 세로 패딩도 제각각(42~104px)이라 스크롤 리듬이 흔들렸다.
   여기서 토큰을 한 곳에 모으고 리듬을 통일한다.

   로드 순서: design-system.css → korean-ui.css → mobile-tune.css
   (뒤의 파일이 필요할 때 덮어쓸 수 있도록 이 파일을 가장 앞에 둔다)

   index.php / tail.php 의 인라인 <style> 이 문서상 더 뒤에 오므로,
   그것을 이겨야 하는 선언에만 !important 를 쓴다.
================================================================== */

:root {
    /* ── 브랜드 ── */
    --c-blue:        #1166da;
    --c-blue-dark:   #0d55bc;
    --c-blue-soft:   #4d9bff;
    --c-yellow:      #ffde01;
    --c-navy:        #071a38;
    --c-navy-deep:   #040e1f;
    --c-green:       #03c75a;

    /* ── 중립 ── */
    --c-ink:         #111827;
    --c-ink-2:       #45556c;
    --c-ink-3:       #738096;
    --c-line:        #e3e9f2;
    --c-surface:     #f5f8fc;
    --c-surface-2:   #eef3fa;

    /* ── 섹션 리듬 ── */
    --sec-py:        clamp(58px, 6vw, 92px);
    --sec-px:        clamp(18px, 3vw, 24px);
    --sec-gap:       clamp(30px, 3.6vw, 48px);   /* 헤더 ↔ 본문 */
    --wrap:          1364px;

    /* ── 형태 ── */
    --r-sm:          10px;
    --r-md:          14px;
    --r-lg:          20px;
    --r-pill:        999px;

    /* ── 그림자 ── */
    --sh-1:          0 2px 8px rgba(7,26,56,.06);
    --sh-2:          0 14px 34px rgba(7,26,56,.10);
    --sh-3:          0 24px 56px rgba(7,26,56,.16);
    --sh-dark:       0 26px 64px rgba(0,0,0,.40);

    /* ── 모션 ── */
    --ease:          cubic-bezier(.22, 1, .36, 1);
    --ease-out:      cubic-bezier(.16, 1, .3, 1);
    --dur:           .55s;

    /* ── 타이포 스케일 ── */
    --fs-display:    clamp(30px, 3.6vw, 46px);
    --fs-h2:         clamp(26px, 3.1vw, 40px);
    --fs-h3:         clamp(17px, 1.4vw, 20px);
    --fs-lead:       clamp(15px, 1.15vw, 17px);
    --fs-body:       15px;
    --fs-sm:         13px;
    --fs-label:      12px;
}

/* ==================================================================
   1. 섹션 리듬 통일
   기존: 42~56 / 44~62 / 56~84 / 64~104 / 60~84px 로 제각각
   ================================================================== */
.ai_scan,
.region_zones,
.iso_story,
.main_visual_bottom,
.mb_section {
    padding-top:    var(--sec-py) !important;
    padding-bottom: var(--sec-py) !important;
    padding-right:  var(--sec-px) !important;
    padding-left:   var(--sec-px) !important;
}

/* 섹션 내부 최대 폭 통일 */
.scan_inner,
.pub_inner,
.iso_story_inner,
.cap_inner,
.mb_inner {
    max-width: var(--wrap);
    margin-right: auto;
    margin-left: auto;
}

/* 헤더 ↔ 본문 간격 통일 */
.scan_head,
.pub_header,
.iso_story_head,
.cap_header {
    margin-bottom: var(--sec-gap) !important;
}

/* ==================================================================
   2. 배경 교차 리듬
   #mb_services 와 #mb_area 가 둘 다 배경이 없어 한 덩어리로 보였다.
   밝은 섹션 → 은은한 서피스 → 밝은 섹션 순으로 교차시킨다.
   ================================================================== */
#mb_area {
    position: relative;
    background: linear-gradient(180deg, #fff 0%, var(--c-surface) 22%, var(--c-surface) 78%, #fff 100%) !important;
}
#mb_area::before,
#mb_area::after {
    content: '';
    position: absolute;
    left: 50%;
    width: min(100% - 48px, var(--wrap));
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-line), transparent);
    transform: translateX(-50%);
}
#mb_area::before { top: 0; }
#mb_area::after  { bottom: 0; }

/* 어두운 섹션끼리 맞닿는 경계를 부드럽게 */
.iso_story { border-top: 1px solid rgba(255,255,255,.06); }

/* ==================================================================
   3. 스크롤 리빌
   AOS(외부 CDN) 는 로드만 되고 실제로는 쓰이지 않아 제거했다.
   JS 가 data-rv 를 자동으로 붙이고, 여기서 표현만 담당한다.
   ================================================================== */
[data-rv] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity   var(--dur) var(--ease-out) var(--rv-d, 0ms),
        transform var(--dur) var(--ease-out) var(--rv-d, 0ms);
    will-change: opacity, transform;
}
[data-rv].rv-in {
    opacity: 1;
    transform: none;
}
/* 애니메이션이 끝나면 will-change 해제 (스크롤 성능) */
[data-rv].rv-done { will-change: auto; }

/* ==================================================================
   4. 컴포넌트 폴리시
   ================================================================== */

/* 카드 공통 — 부드러운 상승 + 그림자 단계 */
.pub_card,
.cap_card,
.mb_service,
.mb_press_card,
.res_card,
.iso_cert {
    transition:
        transform   .38s var(--ease),
        box-shadow  .38s var(--ease),
        border-color .38s var(--ease) !important;
}
.pub_card:hover,
.cap_card:hover,
.mb_service:hover,
.mb_press_card:hover {
    transform: translateY(-5px) !important;
}
.mb_service:hover,
.mb_press_card:hover {
    border-color: rgba(17,102,218,.30) !important;
    box-shadow: var(--sh-2) !important;
}
.pub_card:hover { box-shadow: var(--sh-3) !important; }

/* 어두운 배경 위 카드 */
.res_card:hover,
.iso_cert:hover {
    border-color: rgba(255,255,255,.26) !important;
    background: rgba(255,255,255,.07) !important;
}

/* 버튼 — 눌림 피드백 통일 */
.mb_cta,
.pub_link,
.mb_press_more,
.footer_wrap #btn_submit {
    transition:
        transform  .25s var(--ease),
        background .25s var(--ease),
        box-shadow .25s var(--ease),
        color      .25s var(--ease) !important;
}
.mb_cta:active,
.mb_press_more:active,
.footer_wrap #btn_submit:active {
    transform: translateY(0) scale(.985) !important;
}

/* 포커스 링 — 키보드 사용자 접근성 (기존 테마에 없었음) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--c-yellow);
    outline-offset: 3px;
    border-radius: 4px;
}
/* 어두운 섹션에서는 파란 링이 안 보이므로 옐로우 유지, 밝은 섹션은 블루 */
.region_zones a:focus-visible,
.main_visual_bottom a:focus-visible,
#mb_services a:focus-visible,
#mb_area a:focus-visible {
    outline-color: var(--c-blue);
}

/* 본문 링크 밑줄 위치 정리 */
.res_desc a,
.mb_press_tit a,
.scan_lead a {
    text-underline-offset: 3px;
}

/* 이미지 로딩 중 레이아웃 흔들림 방지 */
.cap_frame,
.pub_cover {
    background: var(--c-surface-2);
}

/* 선택 영역 색 */
::selection {
    color: var(--c-navy);
    background: var(--c-yellow);
}

/* ==================================================================
   5. 타이포 계층 정리
   섹션마다 제목 크기가 달라 위계가 흐릿했다.
   ================================================================== */
.scan_title,
.pub_title,
.iso_story_title,
.cap_title,
.mb_heading {
    font-size: var(--fs-h2) !important;
    line-height: 1.18 !important;
    letter-spacing: -.045em !important;
    word-break: keep-all;
}
.scan_lead,
.pub_intro,
.iso_story_lead,
.cap_intro {
    font-size: var(--fs-lead) !important;
    line-height: 1.74 !important;
    word-break: keep-all;
}
/* 섹션 상단 라벨 — 위아래 여백 통일 */
.scan_kicker,
.cap_eyebrow,
.mb_kicker,
.iso_story_kicker,
.footer_contact_kicker {
    margin-bottom: 14px;
}

@media (prefers-reduced-motion: reduce) {
    [data-rv] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .pub_card, .cap_card, .mb_service, .mb_press_card, .res_card, .iso_cert,
    .mb_cta, .pub_link, .mb_press_more, .footer_wrap #btn_submit {
        transition: none !important;
    }
    .pub_card:hover, .cap_card:hover, .mb_service:hover, .mb_press_card:hover {
        transform: none !important;
    }
}