@charset "utf-8";
/* ============================================================
   content-1.css
   대상: parts/content-1.html (컨텐츠-1) 전용
   - content-1.html에서 사용되는 모든 클래스 정의 포함
   - 다른 body 페이지에 영향 없음 (독립)
   - studio.js가 컨텐츠-1 선택 시 동적으로 로드
   ============================================================ */

/* ============================================================
   content.css
   대상: content-1.html ~ content-4.html (컨텐츠 1~4)
   포함 영역:
   - 컨텐츠 영역의 모든 모듈 (mt1~mt4 모듈, freight-*, mod-* 등)
   - BODY 4종 시안 변형 (body-type1 ~ body-type4)
   - 컨텐츠 관련 반응형
   ============================================================ */

/* === BODY 4종 시안 변형 === */

/* ============================================================
   BODY 4종 (메인 콘텐츠 영역의 톤 차이)
   ============================================================ */
/* Type 1 — 현재 (정보 우선) */
.body-type1 .main-content {background: #fff;}
/* Type 2 — 컴팩트 (카드 라운드 작게, 컴팩트 패딩) */
.body-type2 .main-content > .main-section {padding: 56px 0;}
.body-type2 .main-content > .main-section--narrow {padding: 28px 0;}
/* 메인 페이지 좌우 스크롤 원천 차단 — 롤링배너/마퀴/등장애니메이션 등 잠재 오버플로우가 새어나와도 가로 스크롤 안 생김
   html+body 둘 다 필요(하나만으론 안 막힘). clip 은 스크롤 컨테이너를 안 만들어 세로 스크롤/ fixed 플로팅 버튼에 영향 없음 */
html, body {overflow-x: clip;}
.body-type2 .mod-event .event-card,
.body-type2 .mod-bank,
.body-type2 .mod-cs,
.body-type2 .mod-center-status .center-card,
.body-type2 .mod-channels .channels-item,
.body-type2 .mod-clearance .clearance-table,
.body-type2 .mod-nodata .nodata-card,
.body-type2 .promo-banner {border-radius: 6px;}
.body-type2 .sec-head {margin-bottom: 24px;}
.body-type2 .sec-head .sec-title {font-size: 24px;}
/* Type 3 — 부드러운 톤 (라운드 크게, 그림자 강조) */
.body-type3 .mod-event .event-card,
.body-type3 .mod-bank,
.body-type3 .mod-cs,
.body-type3 .mod-center-status .center-card,
.body-type3 .mod-channels .channels-item,
.body-type3 .mod-clearance .clearance-table,
.body-type3 .mod-nodata .nodata-card,
.body-type3 .promo-banner {border-radius: 22px; box-shadow: 0 6px 20px rgba(0, 0, 0, .06); border-color: transparent;}
.body-type3 .main-section--soft {background: #f3f4f6;}
/* Type 4 — 다크 톤 */
.body-type4 .main-content {background: #0f172a; color: #e5e7eb;}
.body-type4 .main-section--soft {background: #1e293b;}
.body-type4 .sec-head .sec-title,
.body-type4 .notice-title,
.body-type4 .center-name,
.body-type4 .channels-name,
.body-type4 .event-title,
.body-type4 .bank-title,
.body-type4 .cs-title,
.body-type4 .faq-q-text,
.body-type4 .clearance-table tbody td,
.body-type4 .schedule-cal-event-title,
.body-type4 .promo-title {color: #fff;}
.body-type4 .sec-desc,
.body-type4 .notice-tag,
.body-type4 .schedule-cal-event-desc,
.body-type4 .center-flag,
.body-type4 .channels-desc {color: rgba(255, 255, 255, .65);}
.body-type4 .mod-event .event-card,
.body-type4 .mod-bank,
.body-type4 .mod-cs,
.body-type4 .mod-center-status .center-card,
.body-type4 .mod-channels .channels-item,
.body-type4 .mod-clearance .clearance-table,
.body-type4 .mod-nodata .nodata-card,
.body-type4 .quicklink-item,
.body-type4 .mod-rate--compact {background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08);}
.body-type4 .mod-clearance .clearance-table thead th {background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .08);}
.body-type4 .mod-clearance .clearance-table tbody td {border-color: rgba(255, 255, 255, .08);}
.body-type4 .faq-item {border-color: rgba(255, 255, 255, .12);}
/* === 컨텐츠 모듈 (구 module.css 통합) === */
/* ============================================================
   module.css
   메인 공통 모듈 12종 스타일
   ============================================================ */

/* ----- 섹션 헤더 변형 (좌우 분할: 제목 / 더보기) ----- */
.sec-head--row {display: flex; justify-content: space-between; align-items: center; text-align: left;}
.sec-head--row .sec-title {font-size: 22px; display: inline-flex; align-items: center; gap: 8px;}
.sec-head--row .sec-title i {color: var(--c-primary);}
.sec-more {font-size: 14px; color: var(--c-text-sub); display: inline-flex; align-items: center; gap: 4px;}
.sec-more:hover {color: var(--c-primary);}
/* ============================================================
   ① 이용절차 (mod-process) — 6단계
   ============================================================ */
.mod-process .process-list {display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;}
.mod-process .process-item {position: relative; padding: 28px 16px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); text-align: center; transition: transform .2s, box-shadow .2s, border-color .2s;}
.mod-process .process-item:hover {transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--c-primary);}
.mod-process .process-item:not(:last-child)::after {content: ""; position: absolute; right: -12px; top: 50%; width: 10px; height: 10px; border-top: 2px solid var(--c-line); border-right: 2px solid var(--c-line); transform: translateY(-50%) rotate(45deg); z-index: 2;}
.mod-process .process-num {display: block; font-size: 12px; font-weight: 700; color: var(--c-primary); letter-spacing: 1px; margin-bottom: 12px;}
.mod-process .process-icon {width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; background: rgba(39, 79, 166, .08); display: flex; align-items: center; justify-content: center; font-size: 24px;}
.mod-process .process-title {font-size: 16px; font-weight: 700; color: var(--c-text); margin-bottom: 6px;}
.mod-process .process-desc {font-size: 13px; color: var(--c-text-sub); line-height: 1.55;}
/* ============================================================
   ② 창고주소 (mod-warehouse)
   ============================================================ */
.mod-warehouse .warehouse-card {background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); padding: 28px; transition: transform .2s, box-shadow .2s, border-color .2s;}
.mod-warehouse .warehouse-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--c-primary);}
.mod-warehouse .warehouse-flag {display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 700; border-radius: 99px; margin-bottom: 14px;}
.mod-warehouse .warehouse-name {font-size: 18px; font-weight: 700; margin-bottom: 12px;}
.mod-warehouse .warehouse-addr {font-style: normal; font-size: 14px; line-height: 1.65; color: var(--c-text); padding: 14px; background: var(--c-bg-soft); border-radius: var(--radius-m); margin-bottom: 14px;}
.mod-warehouse .warehouse-meta {display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--c-text-sub); margin-bottom: 18px;}
.mod-warehouse .warehouse-meta b {color: var(--c-text); margin-right: 6px;}
.mod-warehouse .warehouse-copy {width: 100%;}
/* ----- 변형 — 단일 창고 (가로 분할 히어로 카드) ----- */
.mod-warehouse--single .col-3 {grid-template-columns: 1fr;}
.mod-warehouse--single .warehouse-card {display: grid; grid-template-columns: 1.3fr 1fr; padding: 0; overflow: hidden; min-height: 340px;}
.mod-warehouse--single .warehouse-card:hover {transform: none; box-shadow: var(--shadow-l);}
.mod-warehouse--single .warehouse-visual {position: relative; background: linear-gradient(135deg, #1e3a8a 0%, #5a35d1 50%, #2962ff 100%); display: flex; align-items: center; justify-content: center; padding: 40px; overflow: hidden;}
.mod-warehouse--single .warehouse-visual::before {content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .08);}
.mod-warehouse--single .warehouse-visual::after {content: ""; position: absolute; left: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .05);}
.mod-warehouse--single .warehouse-visual-content {position: relative; z-index: 2; text-align: center; color: #fff;}
.mod-warehouse--single .warehouse-visual-code {font-size: 72px; font-weight: 900; letter-spacing: 4px; line-height: 1; margin-bottom: 8px;}
.mod-warehouse--single .warehouse-visual-label {font-size: 14px; font-weight: 600; letter-spacing: 6px; opacity: .85;}
.mod-warehouse--single .warehouse-visual-icon {display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .15); font-size: 28px; margin-bottom: 18px;}
.mod-warehouse--single .warehouse-content {padding: 36px 40px; display: flex; flex-direction: column;}
.mod-warehouse--single .warehouse-flag {align-self: flex-start;}
.mod-warehouse--single .warehouse-name {font-size: 22px;}
.mod-warehouse--single .warehouse-addr {font-size: 15px;}
.mod-warehouse--single .warehouse-meta {gap: 8px;}
.mod-warehouse--single .warehouse-copy {margin-top: auto;}
/* ----- 변형 — 2개 창고 (.mod-warehouse--double) ----- */
.mod-warehouse--double .col-3 {grid-template-columns: repeat(2, 1fr);}
/* ----- 변형 — 4개 이상 (.mod-warehouse--multi) ----- */
.mod-warehouse--multi .col-3 {grid-template-columns: repeat(4, 1fr);}
.mod-warehouse--multi .warehouse-card {padding: 22px;}
.mod-warehouse--multi .warehouse-name {font-size: 16px; margin-bottom: 10px;}
.mod-warehouse--multi .warehouse-addr {font-size: 13px; padding: 12px;}
.mod-warehouse--multi .warehouse-meta {font-size: 12px;}
/* ============================================================
   ③ 실시간 환율 (mod-rate)
   ============================================================ */
.mod-rate .rate-list {display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;}
.mod-rate .rate-item {background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-m); padding: 20px;}
.mod-rate .rate-flag {display: inline-block; padding: 3px 10px; border-radius: 4px; background: var(--c-bg-soft); color: var(--c-text); font-size: 12px; font-weight: 700; letter-spacing: .5px; margin-bottom: 12px;}
.mod-rate .rate-info .rate-currency {display: block; font-size: 13px; color: var(--c-text-sub);}
.mod-rate .rate-info .rate-unit {display: block; font-style: normal; font-size: 12px; color: var(--c-text-mute); margin-top: 2px;}
.mod-rate .rate-value {margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--c-line);}
.mod-rate .rate-value b {display: block; font-size: 22px; font-weight: 700; color: var(--c-text); letter-spacing: -.3px;}
.mod-rate .rate-change {display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600;}
.mod-rate .rate-change--up {color: var(--c-error);}
.mod-rate .rate-change--down {color: var(--c-primary);}
/* ----- 변형 — 단일 통화 (관세청 + 구매적용 분리 표시 히어로 카드) ----- */
.mod-rate--single .rate-list {grid-template-columns: 1fr; gap: 0;}
.mod-rate--single .rate-item {display: grid; grid-template-columns: 0.85fr 1fr 1fr; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--c-line); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-s);}
.mod-rate--single .rate-side {background: linear-gradient(135deg, #2962ff 0%, #5a35d1 100%); color: #fff; padding: 36px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden;}
.mod-rate--single .rate-side::before {content: ""; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .08);}
.mod-rate--single .rate-side-icon {position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .15); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 14px;}
.mod-rate--single .rate-side-flag {position: relative; z-index: 1; font-size: 32px; font-weight: 800; letter-spacing: 4px; line-height: 1; margin-bottom: 8px;}
.mod-rate--single .rate-side-name {position: relative; z-index: 1; font-size: 15px; font-weight: 600; opacity: .9;}
.mod-rate--single .rate-side-unit {position: relative; z-index: 1; font-size: 12px; opacity: .7; margin-top: 4px;}
.mod-rate--single .rate-block {padding: 36px 28px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 8px; border-right: 1px solid var(--c-line); background: #fff;}
.mod-rate--single .rate-block:last-child {border-right: 0;}
.mod-rate--single .rate-block--accent {background: var(--c-bg-soft);}
.mod-rate--single .rate-block-label {font-size: 13px; color: var(--c-text-sub); font-weight: 600;}
.mod-rate--single .rate-block-value {font-size: 32px; font-weight: 800; color: var(--c-text); letter-spacing: -.5px;}
.mod-rate--single .rate-block--accent .rate-block-value {color: var(--c-primary);}
.mod-rate--single .rate-block-meta {font-size: 12px; color: var(--c-text-mute);}
.mod-rate--single .rate-block .rate-change {margin-top: 2px;}
/* ----- 변형 — 2개 통화 (.mod-rate--double) ----- */
.mod-rate--double .rate-list {grid-template-columns: repeat(2, 1fr);}
.mod-rate--double .rate-item {padding: 24px 26px;}
.mod-rate--double .rate-value b {font-size: 26px;}
/* ----- 변형 — 3개 통화 (.mod-rate--col-3) ----- */
.mod-rate--col-3 .rate-list {grid-template-columns: repeat(3, 1fr);}
/* ----- 변형 — 4개 통화 (.mod-rate--col-4) ----- */
.mod-rate--col-4 .rate-list {grid-template-columns: repeat(4, 1fr);}
/* ============================================================
   ④ 요금계산기 (mod-calc)
   ============================================================ */
.mod-calc {max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); padding: 36px;}
.mod-calc .calc-form {display: flex; flex-direction: column; gap: 18px;}
.mod-calc .calc-row {display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 16px;}
.mod-calc .calc-row label {font-size: 14px; font-weight: 600; color: var(--c-text);}
.mod-calc .calc-dim {display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: center;}
.mod-calc .calc-dim span {color: var(--c-text-mute);}
.mod-calc .calc-btn {margin-top: 10px;}
.mod-calc .calc-result {margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--c-line);}
.mod-calc .calc-result-row {display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 14px; color: var(--c-text-sub);}
.mod-calc .calc-result-row b {color: var(--c-text); font-weight: 600;}
.mod-calc .calc-result-total {margin-top: 8px; padding: 16px 20px; background: var(--c-bg-soft); border-radius: var(--radius-m); font-size: 16px;}
.mod-calc .calc-result-total span {color: var(--c-text); font-weight: 600;}
.mod-calc .calc-result-total b {color: var(--c-primary); font-size: 24px; font-weight: 800;}
/* ============================================================
   ⑤ 배송조회 (mod-tracking)
   ============================================================ */
.mod-tracking {max-width: 880px; margin: 0 auto;}
.mod-tracking .tracking-form {display: flex; gap: 10px;}
.mod-tracking .tracking-input {height: 56px; font-size: 16px; flex: 1;}
.mod-tracking .tracking-states {margin-top: 36px; padding: 28px; background: var(--c-bg-soft); border-radius: var(--radius-l);}
.mod-tracking .tracking-step-list {display: flex; justify-content: space-between; position: relative; counter-reset: step;}
.mod-tracking .tracking-step-list::before {content: ""; position: absolute; left: 5%; right: 5%; top: 18px; height: 2px; background: var(--c-line); z-index: 1;}
.mod-tracking .tracking-step {position: relative; flex: 1; text-align: center; font-size: 13px; color: var(--c-text-mute); z-index: 2;}
.mod-tracking .tracking-step::before {counter-increment: step; content: counter(step); display: block; width: 36px; height: 36px; line-height: 36px; margin: 0 auto 10px; background: #fff; border: 2px solid var(--c-line); border-radius: 50%; font-weight: 700;}
.mod-tracking .tracking-step.is-done {color: var(--c-text);}
.mod-tracking .tracking-step.is-done::before {background: var(--c-primary); border-color: var(--c-primary); color: #fff;}
.mod-tracking .tracking-step.is-current {color: var(--c-primary); font-weight: 700;}
.mod-tracking .tracking-step.is-current::before {background: #fff; border-color: var(--c-primary); color: var(--c-primary); box-shadow: 0 0 0 4px rgba(39, 79, 166, .15);}
/* ============================================================
   ⑥ 공지 (mod-notice)
   ============================================================ */
.mod-notice .notice-list {border-top: 1px solid var(--c-text);}
.mod-notice .notice-item {position: relative; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 14px; padding: 12px 8px; border-bottom: 1px solid var(--c-line); transition: background .2s ease;}
.mod-notice .notice-item:hover {background: var(--c-bg-soft);}
.mod-notice .notice-tag {display: inline-flex; justify-content: center; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 99px; background: transparent; color: var(--c-text-sub); font-size: 12px; font-weight: 600; letter-spacing: -.2px;}
.mod-notice .notice-tag--important {background: var(--c-error); border-color: var(--c-error); color: #fff;}
.mod-notice .notice-tag--notice {border-color: rgba(39, 79, 166, .35); color: var(--c-primary); background: rgba(39, 79, 166, .06);}
.mod-notice .notice-tag--guide {border-color: rgba(0, 200, 83, .35); color: #15803d; background: rgba(0, 200, 83, .06);}
.mod-notice .notice-title {font-size: 15px; font-weight: 500; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.2px;}
.mod-notice .notice-title:hover {color: var(--c-primary);}
.mod-notice .notice-item time {font-size: 13px; color: var(--c-text-mute); font-variant-numeric: tabular-nums; letter-spacing: -.3px;}
/* ----- 변형 — 단독 바 형태 (.mod-notice--bar) — Hero 직후 풀폭 공지바 ----- */
.mod-notice--bar {background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); padding: 8px 28px; box-shadow: var(--shadow-s);}
.mod-notice--bar .notice-bar-head {display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 2px solid var(--c-text);}
.mod-notice--bar .notice-bar-title {font-size: 18px; font-weight: 700; color: var(--c-text); letter-spacing: -.3px;}
.mod-notice--bar .notice-list {border-top: 0;}
.mod-notice--bar .notice-item {grid-template-columns: 70px 1fr auto; padding: 14px 0; gap: 14px;}
.mod-notice--bar .notice-item:last-child {border-bottom: 0;}
.mod-notice--bar .notice-tag {height: 22px; font-size: 11px;}
.mod-notice--bar .notice-title {font-size: 14px;}
/* ============================================================
   ⑥-1 피처 영상 (mod-feature) — 좌우 2단 (텍스트 + 유튜브 카드)
   ============================================================ */
.main-section--feature {position: relative; overflow: hidden;}
.mod-feature {display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center;}
.mod-feature .feature-title {font-size: 36px; font-weight: 800; line-height: 1.3; letter-spacing: -.6px; color: var(--c-text); margin-bottom: 28px;}
.mod-feature .feature-title em {color: var(--c-primary); font-style: normal;}
.mod-feature .feature-desc {display: flex; flex-direction: column; gap: 14px;}
.mod-feature .feature-desc p {font-size: 15px; line-height: 1.85; color: var(--c-text-sub); margin: 0;}
.mod-feature .feature-lead b {font-weight: 800; color: var(--c-text);}
.mod-feature .feature-tagline {margin-top: 6px; font-size: 14px; color: var(--c-text-mute);}
.mod-feature .feature-video {position: relative; display: block; aspect-ratio: 16 / 9; max-width: 540px; margin-left: auto; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 28px rgba(15, 23, 42, .15); transition: transform .25s ease, box-shadow .25s ease;}
.mod-feature .feature-video:hover {transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 23, 42, .22);}
.mod-feature .feature-video-img {width: 100%; height: 100%; object-fit: cover; display: block;}
.mod-feature .feature-video-play {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; background: rgba(229, 9, 20, .92); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; padding-left: 4px; box-shadow: 0 6px 18px rgba(229, 9, 20, .4); transition: transform .25s ease, background .25s ease;}
.mod-feature .feature-video:hover .feature-video-play {transform: translate(-50%, -50%) scale(1.08); background: #ff0a16;}
/* 소셜 아이콘 영역 */
.mod-feature .feature-social {display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--c-line);}
.mod-feature .feature-social-label {font-size: 12px; font-weight: 800; color: var(--c-text-mute); letter-spacing: 2px; margin-right: 6px;}
.mod-feature .feature-social-link {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--c-line); color: var(--c-text-sub); font-size: 16px; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;}
.mod-feature .feature-social-link:hover {transform: translateY(-3px); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(15, 23, 42, .18);}
.mod-feature .feature-social-link--youtube:hover {background: #ff0000;}
.mod-feature .feature-social-link--instagram:hover {background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);}
.mod-feature .feature-social-link--facebook:hover {background: #1877f2;}
.mod-feature .feature-social-link--blog:hover {background: #03c75a;}
.mod-feature .feature-social-link--kakao:hover {background: #fee500; color: #3c1e1e;}
/* ============================================================
   ⑦ 이벤트 (mod-event) — 섹션 배경: 글로우 블러 + 컨페티 패턴
   ============================================================ */
.main-section--event {position: relative; overflow: hidden; background: linear-gradient(135deg, #fffbf3 0%, #fdfcfa 35%, #f5f8ff 100%);}
.main-section--event .sec-title i {color: #2b3445; margin-right: 4px;}
.main-section--event::before {content: ""; position: absolute; left: -160px; top: -140px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 112, 67, .14) 0%, rgba(255, 112, 67, 0) 70%); filter: blur(40px); pointer-events: none; z-index: 0;}
.main-section--event::after {content: ""; position: absolute; right: -180px; bottom: -160px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(39, 79, 166, .11) 0%, rgba(39, 79, 166, 0) 70%); filter: blur(50px); pointer-events: none; z-index: 0;}
.main-section--event .inner {position: relative; z-index: 1;}
.main-section--event .inner::before {content: ""; position: absolute; inset: -40px -20px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><circle cx='28' cy='34' r='4' fill='%23ff7043' opacity='.2'/><rect x='70' y='18' width='10' height='3' rx='1' fill='%232962ff' opacity='.18' transform='rotate(40 75 19)'/><circle cx='160' cy='42' r='3' fill='%237c4dff' opacity='.18'/><rect x='190' y='80' width='8' height='3' rx='1' fill='%23ffab00' opacity='.22' transform='rotate(-30 194 82)'/><circle cx='40' cy='120' r='3' fill='%232962ff' opacity='.16'/><rect x='110' y='140' width='10' height='3' rx='1' fill='%23ff7043' opacity='.22' transform='rotate(20 115 141)'/><circle cx='180' cy='170' r='4' fill='%237c4dff' opacity='.18'/><rect x='30' y='180' width='8' height='3' rx='1' fill='%23ffab00' opacity='.2' transform='rotate(-50 34 181)'/><circle cx='95' cy='90' r='2.5' fill='%23ff7043' opacity='.18'/></svg>"); background-repeat: repeat; background-size: 220px 220px; pointer-events: none; opacity: .65; z-index: -1;}
.mod-event .event-card {position: relative; display: block; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); overflow: hidden; transition: transform .2s, box-shadow .2s; z-index: 2;}
.mod-event .event-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-m);}
.mod-event .event-thumb {position: relative; aspect-ratio: 430 / 242; background: var(--c-bg-soft); display: flex; align-items: center; justify-content: center; overflow: hidden;}
.mod-event .event-thumb-img {flex: none; width: 100%; height: auto; display: block;}
.mod-event .event-thumb-text {color: rgba(255, 255, 255, .9); font-size: 32px; font-weight: 800; letter-spacing: 4px;}
.mod-event .event-info {padding: 22px 24px;}
.mod-event .event-flag {display: inline-block; padding: 3px 10px; border-radius: 4px; background: rgba(0, 200, 83, .12); color: var(--c-success); font-size: 11px; font-weight: 700; margin-bottom: 10px;}
.mod-event .event-title {font-size: 17px; font-weight: 700; color: var(--c-text); margin-bottom: 8px; line-height: 1.4; height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.mod-event .event-desc {font-size: 14px; color: var(--c-text-sub); line-height: 1.55; margin-bottom: 10px;}
.mod-event .event-card time {font-size: 13px; color: var(--c-text-mute);}
/* ----- 변형 — 단일 이벤트 (가로 분할 히어로 배너) ----- */
.mod-event--single .col-2 {grid-template-columns: 1fr;}
.mod-event--single .event-card {display: grid; grid-template-columns: 1.2fr 1fr; min-height: 280px;}
.mod-event--single .event-thumb {aspect-ratio: auto; height: 100%;}
.mod-event--single .event-thumb-text {font-size: 40px; letter-spacing: 6px;}
.mod-event--single .event-info {padding: 40px 44px; display: flex; flex-direction: column; justify-content: center;}
.mod-event--single .event-title {font-size: 26px; line-height: 1.3; margin-bottom: 12px;}
.mod-event--single .event-desc {font-size: 15px; margin-bottom: 16px;}
.mod-event--single .event-cta {margin-top: 20px; align-self: flex-start;}
/* ----- 변형 — 3개 이벤트 (.mod-event--col-3) ----- */
.mod-event--col-3 .col-2 {grid-template-columns: repeat(3, 1fr);}
.mod-event--col-3 .event-thumb-text {font-size: 24px; letter-spacing: 3px;}
/* ----- 변형 — 4개 이상 이벤트 (.mod-event--col-4) ----- */
.mod-event--col-4 .col-2 {grid-template-columns: repeat(4, 1fr);}
.mod-event--col-4 .event-info {padding: 16px 18px;}
.mod-event--col-4 .event-title {font-size: 14px; margin-bottom: 6px; line-height: 1.4; height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.mod-event--col-4 .event-flag {font-size: 10px; padding: 2px 8px; margin-bottom: 8px;}
.mod-event--col-4 .event-card time {font-size: 12px;}
.mod-event--col-4 .event-thumb-text {font-size: 18px; letter-spacing: 2px;}
/* ============================================================
   ⑧ 후기 (mod-review)
   ============================================================ */
.mod-review .review-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.mod-review .review-card {background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); padding: 28px; display: flex; flex-direction: column; gap: 16px;}
.main-section--dark .mod-review .review-card {background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #fff;}
.mod-review .review-rate {color: var(--c-warn); font-size: 16px; letter-spacing: 2px;}
.mod-review .review-text {font-size: 15px; line-height: 1.7; color: var(--c-text); flex: 1;}
.main-section--dark .mod-review .review-text {color: rgba(255, 255, 255, .9);}
.mod-review .review-meta {display: flex; flex-direction: column; gap: 2px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 13px;}
.main-section--dark .mod-review .review-meta {border-top-color: rgba(255, 255, 255, .12);}
.mod-review .review-meta strong {font-weight: 600; color: var(--c-text);}
.main-section--dark .mod-review .review-meta strong {color: #fff;}
.mod-review .review-meta span {color: var(--c-text-mute);}
.main-section--dark .mod-review .review-meta span {color: rgba(255, 255, 255, .55);}
/* ============================================================
   고객 후기 (신규 디자인) — 컨텐츠-1 페이지용
   ============================================================ */
.main-section--review .sec-head {text-align: center; margin-bottom: 36px;}
.main-section--review .sec-title em {color: var(--c-primary); font-style: normal;}
.review-summary {display: flex; align-items: center; justify-content: center; gap: 0; max-width: 920px; margin: 0 auto 48px; padding: 28px 24px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: 0 6px 20px rgba(39, 79, 166, .08);}
.review-summary-item {flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 16px;}
.review-summary-num {font-family: "Times New Roman", Georgia, serif; font-size: 44px; font-weight: 800; color: var(--c-primary); line-height: 1; letter-spacing: -1px;}
.review-summary-num em {font-size: 26px; font-style: normal; margin-left: 2px;}
.review-summary-stars {font-size: 14px; color: #f59e0b; letter-spacing: 2px;}
.review-summary-label {font-size: 13px; color: var(--c-text-sub); font-weight: 600; letter-spacing: -.2px;}
.review-summary-divider {width: 1px; height: 56px; background: var(--c-line);}
.main-section--review .review-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0;}
.main-section--review .review-card {position: relative; padding: 26px 26px 22px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); display: flex; flex-direction: column; gap: 16px; box-shadow: 0 4px 16px rgba(15, 23, 42, .04); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.main-section--review .review-card:hover {transform: translateY(-6px); box-shadow: 0 18px 36px rgba(39, 79, 166, .15); border-color: var(--c-primary);}
.review-card-head {display: flex; align-items: center; justify-content: space-between;}
.main-section--review .review-rate {color: #f59e0b; font-size: 16px; letter-spacing: 2px;}
.review-date {font-size: 12px; color: var(--c-text-mute); font-variant-numeric: tabular-nums;}
.main-section--review .review-text {font-size: 15px; line-height: 1.7; color: var(--c-text); margin: 0; flex: 1; font-weight: 500;}
.main-section--review .review-text::before {content: "“"; display: inline; margin-right: 2px; color: var(--c-primary); font-weight: 700;}
.main-section--review .review-text::after {content: "”"; display: inline; margin-left: 2px; color: var(--c-primary); font-weight: 700;}
.main-section--review .review-meta {display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--c-line);}
.review-avatar {flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #2962ff 0%, #5b89ff 100%); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 4px 10px rgba(39, 79, 166, .25);}
.review-author-info {flex: 1; display: flex; flex-direction: column; gap: 2px;}
.review-author-info strong {font-size: 14px; font-weight: 700; color: var(--c-text);}
.review-author-info span {font-size: 12px; color: var(--c-text-mute);}
/* ============================================================
   ⑨ FAQ (mod-faq)
   ============================================================ */
.mod-faq .faq-list {max-width: 920px; margin: 0 auto; border-top: 2px solid var(--c-text);}
.mod-faq .faq-item {border-bottom: 1px solid var(--c-line);}
.mod-faq .faq-q {width: 100%; display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: 16px; padding: 22px 12px; text-align: left; font-size: 16px; font-weight: 600;}
.mod-faq .faq-mark {display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: #fff; font-weight: 700; font-size: 14px;}
.mod-faq .faq-mark--a {background: var(--c-secondary);}
.mod-faq .faq-q-text {color: var(--c-text);}
.mod-faq .faq-toggle {color: var(--c-text-mute); font-size: 22px; transition: transform .2s;}
.mod-faq .faq-item.is-open .faq-toggle {transform: rotate(45deg); color: var(--c-primary);}
.mod-faq .faq-a {display: none; padding: 0 12px 24px; grid-template-columns: 40px 1fr; gap: 16px;}
.mod-faq .faq-item.is-open .faq-a {display: grid;}
.mod-faq .faq-a p {font-size: 15px; line-height: 1.7; color: var(--c-text-sub); padding-top: 4px;}
/* ============================================================
   ⑩ 출항스케줄 (mod-schedule)
   ============================================================ */
.mod-schedule .schedule-tabs {display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap;}
.mod-schedule .schedule-tab {height: 36px; padding: 0 18px; border-radius: 99px; background: var(--c-bg-soft); color: var(--c-text-sub); font-size: 13px; font-weight: 600;}
.mod-schedule .schedule-tab.is-active {background: var(--c-primary); color: #fff;}
.mod-schedule .schedule-table {background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-m); overflow: hidden;}
.mod-schedule .schedule-table th, .mod-schedule .schedule-table td {padding: 14px 16px; text-align: center; font-size: 14px;}
.mod-schedule .schedule-table thead th {background: var(--c-bg-soft); color: var(--c-text); font-weight: 700;}
.mod-schedule .schedule-table tbody tr {border-top: 1px solid var(--c-line);}
.mod-schedule .schedule-table tbody td {color: var(--c-text-sub);}
.mod-schedule .schedule-table tbody td:first-child {color: var(--c-text); font-weight: 600;}
.mod-schedule .status {display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 4px; font-size: 12px; font-weight: 600;}
.mod-schedule .status--ready {background: rgba(0, 200, 83, .12); color: var(--c-success);}
.mod-schedule .status--going {background: rgba(39, 79, 166, .12); color: var(--c-primary);}
.mod-schedule .status--arrived {background: var(--c-bg-soft); color: var(--c-text-sub);}
/* ============================================================
   ⑫ 간략 진행스탭 (mod-quickstep)
   ============================================================ */
.mod-quickstep {background: var(--c-bg-soft); border-radius: var(--radius-l); padding: 28px;}
.mod-quickstep .quickstep-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;}
.mod-quickstep .quickstep-item {position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; background: #fff; border-radius: var(--radius-m);}
.mod-quickstep .quickstep-item:not(:last-child)::after {content: "›"; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); color: var(--c-text-mute); font-size: 22px; font-weight: 300; z-index: 2;}
.mod-quickstep .quickstep-num {display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 13px; font-weight: 700;}
.mod-quickstep .quickstep-text {font-size: 15px; font-weight: 600; color: var(--c-text);}
/* ============================================================
   구매/배송대행 6단계 절차 (mod-procedure)
   ============================================================ */
.main-section--procedure .sec-head {text-align: center; margin-bottom: 48px;}
.main-section--procedure .sec-title em {color: var(--c-primary); font-style: normal;}
.mod-procedure {display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 20px; list-style: none; margin: 0; padding: 0;}
.procedure-card {position: relative; padding: 32px 20px 24px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: 0 2px 12px rgba(15, 23, 42, .05); text-align: center; transform-origin: center; animation: procedurePulse 12.5s linear infinite; transition: box-shadow .3s ease, border-color .3s ease;}
.procedure-card:nth-child(1) {animation-delay: 0s;}
.procedure-card:nth-child(2) {animation-delay: 2.5s;}
.procedure-card:nth-child(3) {animation-delay: 5s;}
.procedure-card:nth-child(4) {animation-delay: 7.5s;}
.procedure-card:nth-child(5) {animation-delay: 10s;}
.procedure-card:not(:last-child)::after {content: "›"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--c-primary); font-size: 30px; font-weight: 300; line-height: 1; z-index: 2; opacity: .55;}
.procedure-num {position: absolute; top: -18px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: var(--c-primary); color: #fff; font-family: "Times New Roman", Georgia, serif; font-style: italic; font-weight: 700; font-size: 18px; border-radius: 50%; box-shadow: 0 6px 16px rgba(39, 79, 166, .32); border: 3px solid #fff;}
.procedure-icon {display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; font-size: 36px; background: linear-gradient(135deg, #eef2ff 0%, #dbeafe 100%); border-radius: 50%; margin: 12px auto 18px;}
.procedure-title {font-size: 19px; font-weight: 800; color: var(--c-text); margin: 0 0 10px; letter-spacing: -.3px;}
.procedure-desc {font-size: 14px; color: var(--c-text-sub); line-height: 1.6; margin: 0;}
@keyframes procedurePulse {
	0%, 20%, 100% {transform: translateY(0); box-shadow: 0 2px 12px rgba(15, 23, 42, .05); border-color: var(--c-line);}
	6% {transform: translateY(-8px); box-shadow: 0 18px 40px rgba(39, 79, 166, .22); border-color: var(--c-primary);}
	13% {transform: translateY(-6px); box-shadow: 0 14px 32px rgba(39, 79, 166, .15); border-color: var(--c-primary);}
}
@media (prefers-reduced-motion: reduce) {
	.procedure-card {animation: none;}
}
/* ============================================================
   ⑬ 빠른메뉴 (mod-quicklink)
   ============================================================ */
.mod-quicklink .quicklink-list {flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 0; border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); background: #fff;}
.mod-quicklink .quicklink-item {position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); color: var(--c-text); transition: background .2s ease; height: 100%; box-sizing: border-box;}
.mod-quicklink .quicklink-item::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c-primary); transform: scaleY(0); transform-origin: center; transition: transform .25s ease;}
.mod-quicklink .quicklink-item:hover {background: var(--c-bg-soft);}
.mod-quicklink .quicklink-item:hover::before {transform: scaleY(1);}
.mod-quicklink .quicklink-item:hover .quicklink-text {color: var(--c-primary);}
.mod-quicklink .quicklink-icon {width: 28px; flex: 0 0 28px; text-align: center; font-size: 20px; color: var(--c-primary); background: transparent; border-radius: 0; height: auto; display: inline-flex; align-items: center; justify-content: center;}
.mod-quicklink .quicklink-body {flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.mod-quicklink .quicklink-text {font-size: 15px; font-weight: 600; color: var(--c-text); letter-spacing: -.2px; transition: color .2s ease;}
.mod-quicklink .quicklink-desc {font-size: 12px; color: var(--c-text-mute); letter-spacing: -.2px;}
/* ============================================================
   ⑬-2 우리 센터 갤러리 (mod-center-roll) — 무한 마키
   ============================================================ */
.main-section--center-roll {position: relative; overflow: hidden; background-image: url("../image/module/centerBG.png"); background-position: center; background-size: cover; background-repeat: no-repeat;}
.main-section--center-roll::before {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 22, 38, .55) 0%, rgba(11, 22, 38, .82) 100%); pointer-events: none; z-index: 0;}
.main-section--center-roll .inner {position: relative; z-index: 1;}
.main-section.main-section--center-roll .sec-head {text-align: center; margin-bottom: 36px;}
.main-section.main-section--center-roll .sec-head .sec-title {font-size: 52px; font-weight: 800; letter-spacing: -1px; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .4);}
.main-section.main-section--center-roll .sec-head .sec-desc {margin-top: 16px; font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, .95); text-shadow: 0 1px 6px rgba(0, 0, 0, .35);}
.mod-center-roll {--per-view: 4; --gap: 20px; position: relative;}
.mod-center-roll .center-roll-viewport {position: relative; overflow: hidden; padding: 10px 0;}
.mod-center-roll .center-roll-list {display: flex; gap: var(--gap); transition: transform .55s ease; will-change: transform;}
.mod-center-roll .center-roll-item {flex: 0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view)); aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(15, 23, 42, .12); transition: transform .3s ease, box-shadow .3s ease;}
.mod-center-roll .center-roll-item:hover {transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15, 23, 42, .18);}
.mod-center-roll .center-roll-item img {width: 100%; height: 100%; object-fit: cover; display: block;}
.mod-center-roll .center-roll-controls {display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px;}
.mod-center-roll .center-roll-arrow {display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 4px 12px rgba(15, 23, 42, .12); color: var(--c-text); font-size: 12px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;}
.mod-center-roll .center-roll-arrow:hover {background: #2b3445; color: #fff; border-color: #2b3445; box-shadow: 0 6px 18px rgba(15, 23, 42, .25);}
.mod-center-roll .center-roll-dots {display: flex; align-items: center; justify-content: center; gap: 10px;}
.mod-center-roll .center-roll-dot {width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .3); border: 0; padding: 0; cursor: pointer; transition: background .25s ease, width .25s ease, border-radius .25s ease;}
.mod-center-roll .center-roll-dot:hover {background: rgba(255, 255, 255, .55);}
.mod-center-roll .center-roll-dot.is-active {background: #fff; width: 40px; border-radius: 99px;}
/* ============================================================
   ⑭ 노데이터 (mod-nodata) — 리뉴얼: 검색 + 카운터 + 호버 CTA
   ============================================================ */
/* sec-head 옆 카운터 */
.main-section--nodata .sec-head {display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap;}
.main-section--nodata .sec-head-text {min-width: 0;}
.main-section--nodata .nodata-count {flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: linear-gradient(135deg, rgba(255, 112, 67, .08) 0%, rgba(255, 112, 67, .02) 100%); border: 1px solid rgba(255, 112, 67, .25); border-radius: 10px;}
.main-section--nodata .nodata-count-label {font-size: 13px; font-weight: 600; color: var(--c-text-sub); letter-spacing: -.2px;}
.main-section--nodata .nodata-count-num {font-size: 22px; font-weight: 800; color: var(--c-secondary); letter-spacing: -.5px; line-height: 1; font-variant-numeric: tabular-nums;}
.main-section--nodata .nodata-count-num em {font-size: 13px; font-weight: 700; font-style: normal; margin-left: 2px;}
/* 헤더: 안내 + 검색 통합 */
.mod-nodata .nodata-head {display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: center; padding: 18px 22px; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 10px; margin-bottom: 18px;}
.mod-nodata .nodata-head-info {display: flex; gap: 14px; align-items: center; min-width: 0;}
.mod-nodata .nodata-head-icon {flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 112, 67, .14); color: var(--c-secondary); display: flex; align-items: center; justify-content: center; font-size: 16px;}
.mod-nodata .nodata-head-text {font-size: 14px; color: var(--c-text-sub); line-height: 1.55;}
.mod-nodata .nodata-head-text b {color: var(--c-secondary); font-weight: 700;}
/* 검색 인풋 */
.mod-nodata .nodata-search {position: relative; display: flex; align-items: center; height: 42px; background: #fff; border: 1px solid var(--c-line); border-radius: 8px; transition: border-color .2s ease, box-shadow .2s ease;}
.mod-nodata .nodata-search:focus-within {border-color: var(--c-secondary); box-shadow: 0 0 0 3px rgba(255, 112, 67, .15);}
.mod-nodata .nodata-search-icon {flex-shrink: 0; padding: 0 12px; color: var(--c-text-mute); font-size: 13px;}
.mod-nodata .nodata-search-input {flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 13px; color: var(--c-text); outline: 0;}
.mod-nodata .nodata-search-input::placeholder {color: var(--c-text-mute);}
.mod-nodata .nodata-search-btn {flex-shrink: 0; height: 32px; margin-right: 5px; padding: 0 14px; border-radius: 6px; background: var(--c-secondary); color: #fff; font-size: 12px; font-weight: 700; transition: background .2s ease;}
.mod-nodata .nodata-search-btn:hover {background: #e85a2b;}
/* 검색폼 대체 — 노데이터 전체보기 링크 버튼 (.nodata-search-btn 기본형 위에 크기만 조정) */
.mod-nodata .nodata-head--link {grid-template-columns: 1fr auto;}
.mod-nodata .nodata-more-btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin-right: 0; padding: 0 20px; border-radius: 8px; font-size: 13px; text-decoration: none; white-space: nowrap;}
.mod-nodata .nodata-more-btn:hover {background: #e85a2b; color: #fff;}
.mod-nodata .nodata-more-btn i {font-size: 11px;}
/* 카드 슬라이드 (무한 롤링) */
.mod-nodata {--per-view: 6; --gap: 14px;}
.mod-nodata .nodata-viewport {position: relative; overflow: hidden; padding: 10px 0; margin: -10px 0;}
.mod-nodata .nodata-arrow {position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 4px 14px rgba(15, 23, 42, .15); color: var(--c-text); font-size: 13px; z-index: 5; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;}
.mod-nodata .nodata-arrow:hover {background: var(--c-secondary); color: #fff; border-color: var(--c-secondary); box-shadow: 0 6px 20px rgba(255, 112, 67, .35);}
.mod-nodata .nodata-arrow--prev {left: 8px;}
.mod-nodata .nodata-arrow--next {right: 8px;}
.mod-nodata.is-searching .nodata-arrow {display: none;}
.mod-nodata .nodata-list {display: flex; gap: var(--gap); transition: transform .55s ease; will-change: transform;}
.mod-nodata .nodata-card {position: relative; flex: 0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view)); background: #fff; border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.mod-nodata .nodata-card:hover {transform: translateY(-4px); border-color: var(--c-secondary); box-shadow: 0 12px 28px rgba(15, 23, 42, .15);}
.mod-nodata .nodata-card:hover .nodata-tracking {color: var(--c-secondary);}
.mod-nodata .nodata-thumb {position: relative; aspect-ratio: 1 / 1; background: var(--c-bg-soft); overflow: hidden;}
.mod-nodata .nodata-thumb::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 112, 67, 0) 60%, rgba(255, 112, 67, .2) 100%); opacity: 0; transition: opacity .25s ease; pointer-events: none;}
.mod-nodata .nodata-card:hover .nodata-thumb::after {opacity: 1;}
.mod-nodata .nodata-thumb-img {width: 100%; height: 100%; object-fit: cover; display: block;}
/* 카드 정보 영역 */
.mod-nodata .nodata-info {padding: 10px 12px 12px;}
.mod-nodata .nodata-tracking {font-size: 14px; font-weight: 700; color: var(--c-text); text-align: center; font-family: "Courier New", monospace; letter-spacing: -.2px; word-break: break-all;}
.mod-nodata .nodata-meta {display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--c-line); font-size: 12px; color: var(--c-text-mute);}
.mod-nodata .nodata-meta span {display: inline-flex; align-items: center; gap: 4px;}
.mod-nodata .nodata-meta i {font-size: 11px; color: var(--c-text-sub);}
/* 검색 매칭 상태 (JS 로 .is-matched / .is-dim 토글) — 검색 중에는 그리드로 펼침 */
.mod-nodata.is-searching .nodata-list {display: grid; grid-template-columns: repeat(var(--per-view), 1fr); transform: none !important; transition: none;}
.mod-nodata.is-searching .nodata-card.is-clone {display: none;}
.mod-nodata.is-searching .nodata-card {transition: opacity .25s ease, filter .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.mod-nodata .nodata-card.is-matched {border-color: var(--c-secondary); box-shadow: inset 0 0 0 2px var(--c-secondary), 0 8px 22px rgba(255, 112, 67, .25); z-index: 2;}
.mod-nodata .nodata-card.is-matched .nodata-tracking {color: var(--c-secondary);}
.mod-nodata .nodata-card.is-dim {opacity: .35; filter: grayscale(.6); pointer-events: none;}
.mod-nodata .nodata-card.is-dim:hover {transform: none; box-shadow: none; border-color: var(--c-line);}
.mod-nodata .nodata-card.is-dim:hover .nodata-thumb-img {transform: none;}
/* 등록 건수가 한 화면 노출수(--per-view)보다 적을 때 — 카드가 좌측에 몰리고 롤링 시 빈 칸이 흘러들어옴
   JS 가 .is-static 부여 → 자동롤링/화살표/복제카드 끄고 가운데 정렬, 카드는 적당한 폭까지만 확대 */
.mod-nodata.is-static .nodata-list {display: flex; justify-content: center; transform: none; transition: none;}
.mod-nodata.is-static .nodata-card {flex: 0 1 240px;}
.mod-nodata.is-static .nodata-card.is-clone {display: none;}
.mod-nodata.is-static .nodata-arrow {display: none;}
/* 등록 건수 0 — 카드 없이 화살표만 남는 빈 캐러셀 + 검색할 대상 없는 검색폼 숨김 */
.mod-nodata.is-empty .nodata-viewport {display: none;}
.mod-nodata.is-empty .nodata-search {display: none;}
.mod-nodata.is-empty .nodata-more-btn {display: none;}
.mod-nodata.is-empty .nodata-head {grid-template-columns: 1fr; margin-bottom: 0;}
/* ============================================================
   ⑮ 입금계좌 (mod-bank)
   ============================================================ */
.mod-bank {background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); padding: 28px;}
.mod-bank .bank-head {display: flex; align-items: center; gap: 12px; margin-bottom: 20px;}
.mod-bank .bank-icon {width: 48px; height: 48px; border-radius: 50%; background: rgba(39, 79, 166, .08); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--c-primary);}
.mod-bank .bank-title {font-size: 22px; font-weight: 700; color: var(--c-text);}
.mod-bank .bank-account {padding: 18px 20px; background: var(--c-bg-soft); border-radius: var(--radius-m); margin-bottom: 14px;}
.mod-bank .bank-num {font-size: 22px; font-weight: 800; color: var(--c-primary); letter-spacing: 1px; margin-bottom: 6px;}
.mod-bank .bank-info {font-size: 13px; color: var(--c-text-sub);}
.mod-bank .bank-notice {font-size: 13px; color: var(--c-text-sub); line-height: 1.65; padding-left: 16px; position: relative;}
.mod-bank .bank-notice::before {content: "※"; position: absolute; left: 0; top: 0; color: var(--c-warn);}
.mod-bank .bank-copy {width: 100%; margin-top: 16px;}
/* ============================================================
   ⑯ 고객센터 (mod-cs)
   ============================================================ */
.mod-cs {background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); padding: 28px;}
.mod-cs .cs-head {display: flex; align-items: center; gap: 12px; margin-bottom: 18px;}
.mod-cs .cs-icon {width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 112, 67, .12); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--c-secondary);}
.mod-cs .cs-title {font-size: 22px; font-weight: 700; color: var(--c-text);}
.mod-cs .cs-tels {display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;}
.mod-cs .cs-tel {display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; background: var(--c-bg-soft); border-radius: var(--radius-s);}
.mod-cs .cs-tel-label {font-size: 12px; color: var(--c-text-sub); flex: 0 0 80px;}
.mod-cs .cs-tel-num {font-size: 17px; font-weight: 700; color: var(--c-text); letter-spacing: .5px;}
.mod-cs .cs-hours {font-size: 13px; color: var(--c-text-sub); line-height: 1.7; padding: 12px 14px; background: var(--c-bg-soft); border-radius: var(--radius-s); margin-bottom: 16px;}
.mod-cs .cs-hours b {color: var(--c-text);}
.mod-cs .cs-actions {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
/* ============================================================
   ⑰ 프로모 배너 (mod-promo)
   ============================================================ */
.mod-promo {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.mod-promo .promo-banner {position: relative; display: block; aspect-ratio: 16 / 5; border-radius: var(--radius-l); overflow: hidden; transition: transform .2s, box-shadow .2s;}
.mod-promo .promo-banner:hover {transform: translateY(-3px); box-shadow: var(--shadow-m);}
.mod-promo .promo-banner--blue {background: url(../image/hero/banner1.png) center / cover no-repeat #1e3a8a;}
.mod-promo .promo-banner--orange {background: url(../image/hero/banner2.png) center / cover no-repeat #c2410c;}
.mod-promo .promo-banner--green {background: linear-gradient(135deg, #14532d 0%, #22c55e 100%);}
.mod-promo .promo-banner--purple {background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 100%);}
.mod-promo .promo-content {position: absolute; inset: 0; padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; color: #fff;}
.mod-promo .promo-tag {display: inline-block; align-self: flex-start; padding: 4px 10px; background: rgba(255, 255, 255, .2); border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px; margin-bottom: 10px;}
.mod-promo .promo-title {font-size: 24px; font-weight: 800; line-height: 1.25; margin-bottom: 6px;}
.mod-promo .promo-desc {font-size: 14px; opacity: .9;}
/* ============================================================
   변형 — 배송조회 듀얼 (.mod-tracking--dual)
   ============================================================ */
.mod-tracking--dual {max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;}
.mod-tracking--dual .tracking-form {display: flex; align-items: center; gap: 0; height: 80px; padding: 0 28px; border: 2px solid var(--c-line); border-radius: 999px; background: #fff;}
.mod-tracking--dual .tracking-form--cn {border-color: color-mix(in srgb, var(--c-error) 70%, #fff);}
.mod-tracking--dual .tracking-form--kr {border-color: color-mix(in srgb, var(--c-primary) 70%, #fff);}
.mod-tracking--dual .tracking-label {display: inline-flex; align-items: center; gap: 6px; padding-right: 20px; margin-right: 20px; border-right: 1px solid var(--c-line); font-size: 18px; font-weight: 700; white-space: nowrap;}
.mod-tracking--dual .tracking-form--cn .tracking-label {color: color-mix(in srgb, var(--c-error) 70%, #fff);}
.mod-tracking--dual .tracking-form--kr .tracking-label {color: color-mix(in srgb, var(--c-primary) 70%, #fff);}
.mod-tracking--dual .tracking-input {flex: 1; height: 56px; padding: 0; border: 0; font-size: 15px; background: transparent;}
.mod-tracking--dual .tracking-input:focus {outline: 0;}
.mod-tracking--dual .tracking-submit {width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; color: var(--c-text-sub); font-size: 20px;}
.mod-tracking--dual .tracking-states {display: none;}
/* 태블릿 — 듀얼 송장조회 폼이 나란히 들어가지 않으므로 세로로 쌓음 */
@media (max-width: 1023px) {
	.mod-tracking--dual {grid-template-columns: 1fr; gap: 12px;}
	/* 폼 내부(라벨+입력+버튼)는 가로 배열 유지 (공용 .mod-tracking .tracking-form 세로 규칙 무력화) */
	body.page-mt1 .main-content > .main-section--tracking-dual .mod-tracking--dual .tracking-form {flex-direction: row; align-items: center;}
}
/* ============================================================
   변형 — 출항스케줄 캘린더 (.mod-schedule--calendar)
   ============================================================ */
.mod-schedule--calendar .schedule-cal {background: #fff; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-s);}
.mod-schedule--calendar .schedule-cal-head {display: grid; grid-template-columns: repeat(5, 1fr); background: var(--c-bg-dark); color: #fff;}
.mod-schedule--calendar .schedule-cal-day {padding: 14px 12px; text-align: center; font-size: 14px; font-weight: 700; border-right: 1px solid rgba(255, 255, 255, .08);}
.mod-schedule--calendar .schedule-cal-day:last-child {border-right: 0;}
.mod-schedule--calendar .schedule-cal-day .schedule-cal-dow {display: block; font-size: 12px; opacity: .7; margin-top: 2px; font-weight: 500;}
.mod-schedule--calendar .schedule-cal-body {display: grid; grid-template-columns: repeat(5, 1fr); min-height: 240px;}
.mod-schedule--calendar .schedule-cal-cell {padding: 16px 14px; border-right: 1px solid var(--c-line); font-size: 13px; line-height: 1.7;}
.mod-schedule--calendar .schedule-cal-cell:last-child {border-right: 0;}
.mod-schedule--calendar .schedule-cal-event {margin-bottom: 12px; padding-left: 12px; position: relative; color: var(--c-text);}
.mod-schedule--calendar .schedule-cal-event::before {content: "■"; position: absolute; left: 0; top: 0; color: var(--c-primary); font-size: 8px; line-height: 22px;}
.mod-schedule--calendar .schedule-cal-event-title {font-weight: 600; color: var(--c-text);}
.mod-schedule--calendar .schedule-cal-event-desc {color: var(--c-text-sub); font-size: 12px;}
.mod-schedule--calendar .schedule-cal-foot {padding: 14px 20px; background: var(--c-bg-soft); font-size: 13px; color: var(--c-text-sub);}
.mod-schedule--calendar .schedule-cal-foot p {margin-bottom: 4px;}
/* ----- 통관스케줄 섹션 — 출렁이는 오션 웨이브 (인라인 SVG SMIL 모핑 + CSS 가로 흐름) ----- */
.main-section--schedule-cal {position: relative; background: #f3f8fc; overflow: hidden;}
.main-section--schedule-cal .sec-title i {color: #374151;}
.main-section--schedule-cal::after {content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><path d='M-50,140 Q360,40 720,140 T1490,140' stroke='%231e3a5f' stroke-width='1.5' stroke-dasharray='6 8' fill='none' opacity='0.25'/><path d='M-50,210 Q360,140 720,210 T1490,210' stroke='%231e3a5f' stroke-width='1.5' stroke-dasharray='4 10' fill='none' opacity='0.20'/><circle cx='180' cy='110' r='4' fill='%231e3a5f' opacity='0.35'/><circle cx='720' cy='130' r='4' fill='%231e3a5f' opacity='0.35'/><circle cx='1260' cy='150' r='4' fill='%231e3a5f' opacity='0.35'/></svg>"); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; z-index: 1;}
.main-section--schedule-cal .inner {position: relative; z-index: 2;}
/* 웨이브 데코 컨테이너 */
.main-section--schedule-cal .schedule-cal-decor {position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;}
/* 인라인 SVG 웨이브 — 200% 폭 (가로 흐름 시 심리스 타일) */
.schedule-cal-decor .schedule-cal-wave {position: absolute; bottom: 0; left: 0; width: 200%; pointer-events: none; will-change: transform;}
.schedule-cal-decor .schedule-cal-wave--1 {height: 60%; z-index: 0; animation: schedule-wave-flow-1 28s linear infinite;}
.schedule-cal-decor .schedule-cal-wave--2 {height: 50%; z-index: 1; animation: schedule-wave-flow-2 18s linear infinite;}
@keyframes schedule-wave-flow-1 {from {transform: translateX(0);} to {transform: translateX(-50%);}}
@keyframes schedule-wave-flow-2 {from {transform: translateX(0);} to {transform: translateX(-50%);}}
@media (prefers-reduced-motion: reduce) {.schedule-cal-decor .schedule-cal-wave {animation: none;}}
/* ============================================================
   ⑯ 통관스케줄 대시보드 (mod-schedule--dashboard) — 신규
   메인 컬러 무관 / 고정 컬러 시스템
   ============================================================ */
.mod-schedule--dashboard .schedule-dash-list {display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;}
.mod-schedule--dashboard .schedule-dash-card {position: relative; background: #fff; border: 2px solid #94a3b8; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-s); transition: transform .25s ease, box-shadow .25s ease;}
.mod-schedule--dashboard .schedule-dash-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-m);}
@property --schedule-spin-angle {syntax: "<angle>"; initial-value: 0deg; inherits: false;}
.mod-schedule--dashboard .schedule-dash-card--active {border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--schedule-spin-angle), #047857 0deg, #10b981 90deg, #6ee7b7 180deg, #10b981 270deg, #047857 360deg) border-box; box-shadow: 0 0 0 1px rgba(16, 185, 129, .25), 0 6px 22px rgba(16, 185, 129, .35); animation: schedule-card-spin 3s linear infinite;}
@keyframes schedule-card-spin {to {--schedule-spin-angle: 360deg;}}
.mod-schedule--dashboard .schedule-dash-card--upcoming {border-color: #f59e0b;}
.mod-schedule--dashboard .schedule-dash-card--empty {opacity: .85; border-color: #cbd5e1;}
/* 지난 날짜 — 종료 카드 (무채색으로 가라앉힘) */
.mod-schedule--dashboard .schedule-dash-card--done {opacity: .9; border-color: #cbd5e1; box-shadow: none;}
.mod-schedule--dashboard .schedule-dash-card--done .schedule-dash-head {background: #f1f5f9;}
.mod-schedule--dashboard .schedule-dash-card--done .schedule-dash-date strong {color: #64748b;}
/* 카드 헤더 — 상태 뱃지 + 날짜 */
.mod-schedule--dashboard .schedule-dash-head {padding: 16px 18px 14px; background: #fafbfc; border-bottom: 1px solid var(--c-line);}
.mod-schedule--dashboard .schedule-dash-status {display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: -.2px;}
.mod-schedule--dashboard .schedule-dash-status--active {background: #10b981;}
.mod-schedule--dashboard .schedule-dash-status--upcoming {background: #f59e0b;}
.mod-schedule--dashboard .schedule-dash-status--empty {background: #94a3b8;}
.mod-schedule--dashboard .schedule-dash-status--done {background: #64748b;}
.mod-schedule--dashboard .schedule-dash-date {display: flex; align-items: baseline; gap: 8px;}
.mod-schedule--dashboard .schedule-dash-date strong {font-size: 24px; font-weight: 800; color: #1e293b; letter-spacing: -.5px; line-height: 1; font-variant-numeric: tabular-nums;}
.mod-schedule--dashboard .schedule-dash-dow {font-size: 13px; color: #64748b; font-weight: 500;}
/* 카드 본문 — 이벤트 리스트 */
.mod-schedule--dashboard .schedule-dash-events {padding: 12px 18px; min-height: 160px; max-height: 240px; overflow-y: auto; scrollbar-width: thin;}
.mod-schedule--dashboard .schedule-dash-events::-webkit-scrollbar {width: 6px;}
.mod-schedule--dashboard .schedule-dash-events::-webkit-scrollbar-track {background: rgba(15, 23, 42, .04); border-radius: 99px; margin: 4px 0;}
.mod-schedule--dashboard .schedule-dash-events::-webkit-scrollbar-thumb {border-radius: 99px; transition: background .2s ease;}
/* 진행중 카드 — 그린 스크롤바 (테두리 #10b981/#047857 매칭) */
.mod-schedule--dashboard .schedule-dash-card--active .schedule-dash-events {scrollbar-color: rgba(16, 185, 129, .5) rgba(15, 23, 42, .05);}
.mod-schedule--dashboard .schedule-dash-card--active .schedule-dash-events::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #10b981 0%, #047857 100%);}
.mod-schedule--dashboard .schedule-dash-card--active .schedule-dash-events::-webkit-scrollbar-thumb:hover {background: linear-gradient(180deg, #34d399 0%, #059669 100%);}
/* 예정 카드 — 앰버 스크롤바 (테두리 #f59e0b 매칭) */
.mod-schedule--dashboard .schedule-dash-card--upcoming .schedule-dash-events {scrollbar-color: rgba(245, 158, 11, .55) rgba(15, 23, 42, .05);}
.mod-schedule--dashboard .schedule-dash-card--upcoming .schedule-dash-events::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);}
.mod-schedule--dashboard .schedule-dash-card--upcoming .schedule-dash-events::-webkit-scrollbar-thumb:hover {background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%);}
/* 미정 카드 — 그레이 스크롤바 (테두리 #cbd5e1 매칭, 거의 사용 안 됨) */
.mod-schedule--dashboard .schedule-dash-card--empty .schedule-dash-events {scrollbar-color: rgba(148, 163, 184, .5) rgba(15, 23, 42, .05);}
.mod-schedule--dashboard .schedule-dash-card--empty .schedule-dash-events::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);}
/* 종료 카드 — 그레이 스크롤바 */
.mod-schedule--dashboard .schedule-dash-card--done .schedule-dash-events {scrollbar-color: rgba(100, 116, 139, .5) rgba(15, 23, 42, .05);}
.mod-schedule--dashboard .schedule-dash-card--done .schedule-dash-events::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #cbd5e1 0%, #64748b 100%);}
.mod-schedule--dashboard .schedule-dash-event {display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9;}
.mod-schedule--dashboard .schedule-dash-event:last-child {border-bottom: 0;}
.mod-schedule--dashboard .schedule-dash-event-type {flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 12px;}
.mod-schedule--dashboard .schedule-dash-event-type--sea {background: #06b6d4;}
.mod-schedule--dashboard .schedule-dash-event-type--air {background: #8b5cf6;}
.mod-schedule--dashboard .schedule-dash-event-info {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;}
.mod-schedule--dashboard .schedule-dash-event-name {font-size: 13px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mod-schedule--dashboard .schedule-dash-event-meta {font-size: 11px; color: #64748b;}
/* 빈 카드 — 일정 없음 표시 */
.mod-schedule--dashboard .schedule-dash-empty {padding: 50px 18px; text-align: center; color: #94a3b8; font-size: 12px; font-weight: 500; min-height: 160px; display: flex; align-items: center; justify-content: center;}
/* 푸터 — 안내 문구 */
.mod-schedule--dashboard .schedule-dash-foot {margin-top: 18px; padding: 16px 22px; background: rgba(255, 255, 255, .85); border-radius: var(--radius-m); border: 1px solid var(--c-line); font-size: 15px; color: #334155; backdrop-filter: blur(4px); line-height: 1.6;}
.mod-schedule--dashboard .schedule-dash-foot p {margin-bottom: 4px;}
.mod-schedule--dashboard .schedule-dash-foot p:last-child {margin-bottom: 0;}
@media (max-width: 1023px) {
	.mod-schedule--dashboard .schedule-dash-list {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 767px) {
	.mod-schedule--dashboard .schedule-dash-list {grid-template-columns: 1fr; gap: 12px;}
	.mod-schedule--dashboard .schedule-dash-events {min-height: auto;}
	.mod-schedule--dashboard .schedule-dash-empty {padding: 30px 18px; min-height: auto;}
	.mod-schedule--dashboard .schedule-dash-date strong {font-size: 22px;}
}
/* ============================================================
   변형 — 환율 컴팩트 (.mod-rate--compact)
   인포패널 우측에 들어가는 작은 카드형
   ============================================================ */
.mod-rate--compact {background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-m); overflow: hidden; display: flex; flex-direction: column;}
.mod-rate--compact .rate-c-head {padding: 11px 16px; background: var(--c-primary); color: #fff; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -.2px;}
.mod-rate--compact .rate-c-head .rate-c-currency {margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 8px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; letter-spacing: 1px;}
.mod-rate--compact .rate-c-body {padding: 0 14px; flex: 1; display: flex; flex-direction: column;}
.mod-rate--compact .rate-c-row {flex: 1; display: flex; align-items: center; gap: 12px; padding: 0; border-bottom: 1px solid var(--c-line); min-height: 60px;}
.mod-rate--compact .rate-c-row:last-child {border-bottom: 0;}
.mod-rate--compact .rate-c-icon {flex: 0 0 28px; width: 28px; height: 28px; border-radius: 0; background: transparent; color: var(--c-primary); display: flex; align-items: center; justify-content: center; font-size: 16px;}
.mod-rate--compact .rate-c-info {flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;}
.mod-rate--compact .rate-c-label {font-size: 12px; color: var(--c-text-sub); line-height: 1.2; letter-spacing: -.2px;}
.mod-rate--compact .rate-c-value {font-size: 19px; font-weight: 800; color: var(--c-text); letter-spacing: -.5px; line-height: 1; font-variant-numeric: tabular-nums;}
.mod-rate--compact .rate-c-trend {font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px;}
.mod-rate--compact .rate-c-trend--up {color: #ef4444;}
.mod-rate--compact .rate-c-trend--down {color: #2563eb;}
.mod-rate--compact .rate-c-foot {padding: 9px 14px; background: var(--c-bg-soft); font-size: 11px; color: var(--c-text-mute); letter-spacing: -.2px; display: flex; align-items: center; gap: 5px; border-top: 1px solid var(--c-line);}
/* ============================================================
   인포패널 (3분할 — 공지+빠른메뉴+환율 일체형 컨테이너)
   .info-panel 은 모듈이 아닌 레이아웃 컨테이너 (Layout 1/2 표준 패턴)
   - 기본: 3분할 (공지+빠른메뉴+환율)
   - --col2: 2분할 (빠른메뉴+환율, 공지 분리 시)
   ============================================================ */
.info-panel {display: grid; grid-template-columns: 1.6fr 1.5fr 0.7fr; gap: 20px; align-items: stretch;}
/* info-panel 안에 있는 sec-more — 컴팩트 알약 버튼 */
.info-panel .sec-more {padding: 7px 16px; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 99px; font-size: 15px; color: var(--c-text-sub); gap: 6px; transition: background .2s ease, color .2s ease, border-color .2s ease;}
.info-panel .sec-more:hover {background: var(--c-primary); color: #fff; border-color: var(--c-primary);}
.info-panel .sec-more i {font-size: 11px;}
.info-panel > * {min-width: 0;}
.info-panel--col2 {grid-template-columns: 2fr 1fr;}
.info-panel--notice-cal {grid-template-columns: 1fr 1.4fr;}
/* 공지(좌) + 통관스케줄 캘린더(우) */
/* 인포패널 자식 모듈 — 부모 셀 높이를 채우고 내부도 균등 분배 (공지/빠른메뉴/환율 균일 높이) */
.info-panel .mod-notice,
.info-panel .mod-quicklink {display: flex; flex-direction: column;}
.info-panel .mod-notice .notice-list {flex: 1; display: flex; flex-direction: column;}
.info-panel .mod-notice .notice-item {flex: 1;}
.info-panel .mod-quicklink .quicklink-list {flex: 1; grid-auto-rows: 1fr;}
/* 인포패널 안의 빠른메뉴 — 2열 × 4행으로 자동 전환 */
.info-panel .mod-quicklink .quicklink-list {grid-template-columns: repeat(2, 1fr); gap: 10px;}
.info-panel .mod-quicklink .quicklink-item {padding: 14px 16px; gap: 10px;}
.info-panel .mod-quicklink .quicklink-icon {width: 34px; height: 34px; flex: 0 0 34px; font-size: 15px;}
.info-panel .mod-quicklink .quicklink-text {font-size: 13px;}
/* 인포패널 안의 공지/통관스케줄 헤더 — 컴팩트 통일 (높이·타이틀·더보기) */
.info-panel .mod-notice .sec-head,
.info-panel .mod-schedule .sec-head {margin-bottom: 14px; padding: 0;}
/* 공지사항 — 환율 카드와 통일된 디자인 (컬러 헤더 + 카드 보더) */
.info-panel .mod-notice {background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-m); overflow: hidden; display: flex; flex-direction: column;}
.info-panel .mod-notice .sec-head--row {padding: 12px 16px; background: var(--c-primary); color: #fff; margin: 0; border-bottom: 0;}
.info-panel .mod-notice .sec-head .sec-title,
.info-panel .mod-schedule .sec-head .sec-title {font-size: 14px; font-weight: 600; letter-spacing: -.2px; color: #fff;}
.info-panel .mod-notice .sec-head--row .sec-title i {color: #fff;}
.info-panel .mod-notice .sec-head--row .sec-more {padding: 4px 10px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); border-radius: 99px; color: #fff; font-size: 12px;}
.info-panel .mod-notice .sec-head--row .sec-more:hover {background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .5); color: #fff;}
.info-panel .mod-notice .sec-head--row .sec-more i {font-size: 10px;}
.info-panel .mod-notice .notice-body {flex: 1; padding: 0 14px; display: flex; flex-direction: column;}
.info-panel .mod-notice .notice-list {flex: 1; display: flex; flex-direction: column; border-top: 0;}
.info-panel .mod-notice .notice-item {flex: 1; grid-template-columns: 56px 1fr auto; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--c-line); min-height: 0;}
.info-panel .mod-notice .notice-item:last-child {border-bottom: 0;}
.info-panel .mod-notice .notice-tag {height: 22px; padding: 0 9px; font-size: 11px;}
.info-panel .mod-notice .notice-title {font-size: 14px;}
.info-panel .mod-notice .notice-item time {font-size: 13px;}
/* ============================================================
   ⑬ 통관스케줄 (mod-clearance) — 신규
   ============================================================ */
.mod-clearance .clearance-tabs {display: flex; gap: 6px; margin-bottom: 18px;}
.mod-clearance .clearance-tab {height: 36px; padding: 0 18px; border: 1px solid var(--c-line); border-radius: 99px; background: #fff; color: var(--c-text-sub); font-size: 13px; font-weight: 600; transition: all .2s;}
.mod-clearance .clearance-tab:hover {border-color: var(--c-primary); color: var(--c-primary);}
.mod-clearance .clearance-tab.is-active {background: var(--c-primary); border-color: var(--c-primary); color: #fff;}
.mod-clearance .clearance-table {width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); overflow: hidden; border-collapse: separate; border-spacing: 0;}
.mod-clearance .clearance-table thead th {padding: 16px 14px; background: var(--c-bg-soft); font-size: 13px; font-weight: 700; color: var(--c-text); text-align: center; border-bottom: 1px solid var(--c-line);}
.mod-clearance .clearance-table tbody td {padding: 16px 14px; font-size: 14px; color: var(--c-text); text-align: center; border-bottom: 1px solid var(--c-line);}
.mod-clearance .clearance-table tbody tr:last-child td {border-bottom: 0;}
.mod-clearance .clearance-table tbody tr:hover td {background: var(--c-bg-soft);}
.mod-clearance .clearance-th-type, .mod-clearance .clearance-th-state {width: 100px;}
.mod-clearance .clearance-th-route {width: 130px;}
.mod-clearance .clearance-tag {display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700;}
.mod-clearance .clearance-tag--air {background: rgba(39, 79, 166, .1); color: var(--c-primary);}
.mod-clearance .clearance-tag--sea {background: rgba(255, 112, 67, .1); color: var(--c-secondary);}
.mod-clearance .clearance-status {display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 12px; border-radius: 4px; font-size: 12px; font-weight: 700;}
.mod-clearance .clearance-status--done {background: rgba(0, 200, 83, .12); color: var(--c-success);}
.mod-clearance .clearance-status--ing {background: rgba(255, 171, 0, .14); color: var(--c-warn);}
.mod-clearance .clearance-status--ready {background: var(--c-bg-soft); color: var(--c-text-sub);}
.mod-clearance .clearance-foot {margin-top: 14px; font-size: 13px; color: var(--c-text-mute);}
/* ============================================================
   ⑬-1 출항스케줄 (mod-departure) — 신규
   센터별 카드 / 운송수단별 행(1~3개) / 월~금 O·X 표시
   ============================================================ */
.main-section--departure .sec-title i {color: #2b3445; margin-right: 4px;}
.mod-departure .departure-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;}
/* 센터 카드 1~2개일 때 좌측 여백을 채우는 안내 이미지 (센터 3개 이상이면 미노출) */
.mod-departure .departure-photo {display: none; min-height: 240px; border: 1px solid var(--c-line); border-radius: 12px; background-color: var(--c-bg-soft); background-image: url('../image/module/mod-departure.png'); background-repeat: no-repeat; background-size: auto 110%; background-position: right center;}
/* 카드 1~2개 (이미지 포함 자식 3개 이하) → 노출 — 1칸 배치일 땐 우측 정렬 + 110% 확대 */
.mod-departure .departure-list:has(> .departure-card):not(:has(> :nth-child(4))) > .departure-photo {display: block;}
/* 카드 1개 (이미지 포함 자식 2개) → 2칸 차지 + 배너 전체 노출 */
.mod-departure .departure-list:has(> .departure-card):not(:has(> :nth-child(3))) > .departure-photo {grid-column: span 2; background-size: cover; background-position: center;}
.mod-departure .departure-card {display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s;}
.mod-departure .departure-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--c-primary);}
.mod-departure .departure-card-head {display: flex; align-items: center; gap: 10px; padding: 16px 22px; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); color: #fff;}
.mod-departure .departure-card-flag {display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 99px; background: rgba(255, 255, 255, .22); font-size: 12px; font-weight: 700; letter-spacing: .2px; backdrop-filter: blur(4px);}
.mod-departure .departure-card-name {font-size: 18px; font-weight: 800; letter-spacing: -.4px;}
.mod-departure .departure-table-wrap {flex: 1; padding: 4px 16px;}
.mod-departure .departure-table {width: 100%; border-collapse: separate; border-spacing: 0;}
.mod-departure .departure-table thead th {padding: 12px 4px; font-size: 13px; font-weight: 700; color: var(--c-text-sub); text-align: center; border-bottom: 1px solid var(--c-line);}
.mod-departure .departure-table thead th.departure-th-route {text-align: left; padding-left: 8px;}
.mod-departure .departure-table tbody td {padding: 14px 4px; text-align: center; border-bottom: 1px dashed var(--c-line);}
.mod-departure .departure-table tbody tr:last-child td, .mod-departure .departure-table tbody tr:last-child .departure-route {border-bottom: 0;}
.mod-departure .departure-route {display: flex; align-items: center; gap: 8px; padding: 12px 4px 12px 8px; text-align: left; border-bottom: 1px dashed var(--c-line); white-space: nowrap; min-width: 130px;}
.mod-departure .departure-route-icon {display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; flex-shrink: 0;}
.mod-departure .departure-route-icon--air {background: rgba(39, 79, 166, .1); color: var(--c-primary);}
.mod-departure .departure-route-icon--sea {background: rgba(255, 112, 67, .1); color: var(--c-secondary);}
.mod-departure .departure-route-name {font-size: 14px; font-weight: 700; color: var(--c-text);}
.mod-departure .departure-route-time {margin-left: auto; padding-left: 6px; font-size: 12px; font-weight: 600; color: var(--c-text-mute); letter-spacing: -.2px;}
.mod-departure .departure-mark {display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 800;}
.mod-departure .departure-mark--o {background: rgba(0, 200, 83, .12); color: var(--c-success);}
.mod-departure .departure-mark--x {background: var(--c-bg-soft); color: var(--c-text-mute);}
.mod-departure .departure-card-foot {padding: 12px 22px 16px; font-size: 13px; color: var(--c-text-mute); border-top: 1px solid var(--c-line); background: var(--c-bg-soft);}
.mod-departure .departure-foot {margin-top: 16px; padding: 14px 18px; background: var(--c-bg-soft); border-left: 3px solid var(--c-primary); border-radius: 6px; font-size: 14px; color: var(--c-text-sub); line-height: 1.55;}
/* ============================================================
   ⑭ 지금 우리 센터는 (mod-center-status) — 신규
   기본형: 카드 그리드 / 변형형: --slider 이미지 슬라이더
   ============================================================ */
/* ----- 슬라이더형 (.mod-center-status--slider) ----- */
.mod-center-status--slider .center-slider {position: relative; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-m); background: #1a1f2e;}
.mod-center-status--slider .center-slider-track {position: relative; aspect-ratio: 21 / 9; min-height: 360px; max-height: 540px;}
.mod-center-status--slider .center-slide {position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;}
.mod-center-status--slider .center-slide.is-active {opacity: 1; z-index: 2;}
.mod-center-status--slider .center-slide-figure {position: relative; width: 100%; height: 100%; margin: 0;}
.mod-center-status--slider .center-slide-img {width: 100%; height: 100%; object-fit: cover; display: block; background: linear-gradient(135deg, #2962ff 0%, #5a35d1 100%);}
.mod-center-status--slider .center-slide-caption {position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 40px; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .4) 60%, rgba(0, 0, 0, 0) 100%);}
.mod-center-status--slider .center-slide-flag {display: inline-block; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .2); backdrop-filter: blur(6px); font-size: 12px; font-weight: 600; letter-spacing: .3px; margin-bottom: 12px;}
.mod-center-status--slider .center-slide-name {font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 10px;}
.mod-center-status--slider .center-slide-desc {font-size: 14px; line-height: 1.6; opacity: .9;}
/* 화살표 */
.mod-center-status--slider .center-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .2); backdrop-filter: blur(6px); color: #fff; font-size: 24px; line-height: 44px; z-index: 3; transition: background .2s;}
.mod-center-status--slider .center-arrow:hover {background: rgba(255, 255, 255, .35);}
.mod-center-status--slider .center-arrow--prev {left: 18px;}
.mod-center-status--slider .center-arrow--next {right: 18px;}
/* 인디케이터 */
.mod-center-status--slider .center-indicator {position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; display: flex; gap: 8px; z-index: 3;}
.mod-center-status--slider .center-indicator button {width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: background .2s, width .2s;}
.mod-center-status--slider .center-indicator button.is-active {background: #fff; width: 22px; border-radius: 99px;}
/* 썸네일 네비 */
.mod-center-status--slider .center-thumb-list {display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px;}
.mod-center-status--slider .center-thumb-item .center-thumb-btn {width: 100%; padding: 14px 10px; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all .2s;}
.mod-center-status--slider .center-thumb-item .center-thumb-btn:hover {border-color: var(--c-primary);}
.mod-center-status--slider .center-thumb-item.is-active .center-thumb-btn {border-color: var(--c-primary); background: var(--c-primary); color: #fff; box-shadow: var(--shadow-s);}
.mod-center-status--slider .center-thumb-flag {font-size: 16px;}
.mod-center-status--slider .center-thumb-name {font-size: 12px; font-weight: 700;}
/* ----- 기본형 (카드 그리드 — --slider 미적용 시) ----- */
.mod-center-status .center-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
.mod-center-status .center-card {background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); padding: 24px; transition: transform .2s, box-shadow .2s, border-color .2s;}
.mod-center-status .center-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--c-primary);}
.mod-center-status .center-card-head {display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;}
.mod-center-status .center-flag {font-size: 12px; font-weight: 600; color: var(--c-text-sub); letter-spacing: .2px;}
.mod-center-status .center-state {display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11px; font-weight: 700;}
.mod-center-status .center-state--open {background: rgba(0, 200, 83, .12); color: var(--c-success);}
.mod-center-status .center-state--busy {background: rgba(255, 171, 0, .14); color: var(--c-warn);}
.mod-center-status .center-state--closed {background: var(--c-bg-soft); color: var(--c-text-mute);}
.mod-center-status .center-name {font-size: 18px; font-weight: 700; color: var(--c-text); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--c-line);}
.mod-center-status .center-meta {display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;}
.mod-center-status .center-meta li {display: flex; justify-content: space-between; align-items: center; font-size: 13px;}
.mod-center-status .center-meta li b {color: var(--c-text-sub); font-weight: 500;}
.mod-center-status .center-meta li span {color: var(--c-text); font-weight: 700;}
.mod-center-status .center-card-foot {display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--c-line);}
.mod-center-status .center-update {font-size: 11px; color: var(--c-text-mute);}
.mod-center-status .center-more {font-size: 13px; font-weight: 600; color: var(--c-primary);}
.mod-center-status .center-more:hover {text-decoration: underline;}
.mod-center-status .center-card--closed {opacity: .85;}
/* ============================================================
   ⑮ 채널 홍보 (mod-channels) — 신규 (YouTube · SNS · Blog)
   ============================================================ */
.mod-channels .channels-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
.mod-channels .channels-item {background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-l); transition: transform .2s, box-shadow .2s, border-color .2s;}
.mod-channels .channels-item:hover {transform: translateY(-4px); box-shadow: var(--shadow-m);}
.mod-channels .channels-link {display: grid; grid-template-columns: 56px 1fr 20px; align-items: center; gap: 16px; padding: 22px 24px;}
.mod-channels .channels-icon {width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700;}
.mod-channels .channels-body {display: flex; flex-direction: column; gap: 4px; min-width: 0;}
.mod-channels .channels-name {font-size: 15px; font-weight: 700; color: var(--c-text);}
.mod-channels .channels-desc {font-size: 13px; color: var(--c-text-sub); line-height: 1.45;}
.mod-channels .channels-meta {font-size: 11px; color: var(--c-text-mute); margin-top: 2px;}
.mod-channels .channels-arrow {font-size: 20px; color: var(--c-text-mute); text-align: right;}
.mod-channels .channels-item:hover .channels-arrow {color: var(--c-primary);}
/* 브랜드별 컬러 */
.mod-channels .channels-item--youtube .channels-icon {background: #ff0033;}
.mod-channels .channels-item--instagram .channels-icon {background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);}
.mod-channels .channels-item--facebook .channels-icon {background: #1877f2;}
.mod-channels .channels-item--blog .channels-icon {background: #03c75a;}
.mod-channels .channels-item--youtube:hover {border-color: #ff0033;}
.mod-channels .channels-item--instagram:hover {border-color: #dd2a7b;}
.mod-channels .channels-item--facebook:hover {border-color: #1877f2;}
.mod-channels .channels-item--blog:hover {border-color: #03c75a;}
@media (max-width: 1279px) {
	.mod-rate .rate-list {grid-template-columns: repeat(3, 1fr);}
	.mod-rate--col-4 .rate-list {grid-template-columns: repeat(4, 1fr);}
	.mod-quicklink .quicklink-list {grid-template-columns: repeat(2, 1fr);}
	.mod-nodata {--per-view: 4;}
	/* 출항스케줄 채움 이미지 — 2단 그리드에서는 1칸만 차지 / 카드 2개면 미노출 */
	.mod-departure .departure-list:has(> .departure-card):not(:has(> :nth-child(3))) > .departure-photo {grid-column: auto; background-size: auto 110%; background-position: right center;}
	.mod-departure .departure-list:has(> .departure-card):has(> :nth-child(3)) > .departure-photo {display: none;}
	.info-panel {grid-template-columns: 1fr 1fr; gap: 16px;}
	.info-panel > .mod-rate--compact {grid-column: 1 / -1;}
	.mod-departure .departure-list {grid-template-columns: repeat(2, 1fr);}
	.mod-feature {gap: 40px;}
	.mod-feature .feature-title {font-size: 30px;}
	.mod-center-roll {--per-view: 3;}
	.main-section.main-section--center-roll .sec-head .sec-title {font-size: 42px;}
	.main-section.main-section--center-roll .sec-head .sec-desc {font-size: 17px;}
}
@media (max-width: 1023px) {
	.mod-process .process-list {grid-template-columns: repeat(3, 1fr);}
	.mod-process .process-item:not(:last-child)::after {display: block;}
	.mod-process .process-item:nth-child(3)::after {display: none;}
	.mod-warehouse .warehouse-card {padding: 24px;}
	.mod-warehouse--single .warehouse-card {grid-template-columns: 1fr; min-height: auto;}
	.mod-warehouse--single .warehouse-visual {padding: 36px;}
	.mod-warehouse--single .warehouse-visual-code {font-size: 56px;}
	.mod-warehouse--single .warehouse-content {padding: 28px 30px;}
	.mod-warehouse--multi .col-3 {grid-template-columns: repeat(3, 1fr);}
	.mod-rate--single .rate-item {grid-template-columns: 1fr 1fr; gap: 0;}
	.mod-rate--single .rate-side {grid-column: 1 / -1; padding: 28px;}
	.mod-rate--single .rate-side-flag {font-size: 28px;}
	.mod-rate--single .rate-block {padding: 28px 24px;}
	.mod-rate--single .rate-block-value {font-size: 28px;}
	.mod-rate--col-4 .rate-list {grid-template-columns: repeat(2, 1fr);}
	.mod-rate--col-3 .rate-list {grid-template-columns: repeat(3, 1fr);}
	.mod-event--single .event-card {grid-template-columns: 1fr; min-height: auto;}
	.mod-event--single .event-thumb {aspect-ratio: 16 / 7; height: auto;}
	.mod-event--single .event-info {padding: 30px 32px;}
	.mod-event--single .event-title {font-size: 22px;}
	.mod-event--col-3 .col-2 {grid-template-columns: repeat(2, 1fr);}
	.mod-event--col-4 .col-2 {grid-template-columns: repeat(2, 1fr);}
	.mod-rate .rate-list {grid-template-columns: repeat(2, 1fr);}
	.mod-review .review-list {grid-template-columns: repeat(2, 1fr);}
	.main-section--review .review-list {grid-template-columns: repeat(2, 1fr); gap: 18px;}
	.review-summary {padding: 22px 16px;}
	.review-summary-num {font-size: 36px;}
	.mod-quickstep .quickstep-list {grid-template-columns: repeat(2, 1fr);}
	.mod-quickstep .quickstep-item:nth-child(2)::after {display: none;}
	.main-section--procedure .sec-head {margin-bottom: 38px;}
	.mod-procedure {grid-template-columns: repeat(3, 1fr); gap: 36px 18px;}
	.procedure-card:nth-child(3)::after {display: none;}
	.procedure-card:nth-child(5) {grid-column: 2 / 3;}
	.mod-tracking .tracking-states {padding: 22px 18px;}
	.mod-tracking .tracking-step {font-size: 12px;}
	.mod-tracking .tracking-step::before {width: 32px; height: 32px; line-height: 32px;}
	.mod-nodata {--per-view: 3;}
	.mod-nodata .nodata-head {grid-template-columns: 1fr; gap: 14px;}
	.mod-feature {grid-template-columns: 1fr; gap: 32px;}
	.mod-feature .feature-title {font-size: 26px; margin-bottom: 18px;}
	.mod-feature .feature-desc p {font-size: 14px;}
	.mod-center-roll {--per-view: 2; --gap: 14px;}
	.mod-center-roll .center-roll-arrow {width: 32px; height: 32px; font-size: 11px;}
	.mod-center-roll .center-roll-controls {gap: 12px; margin-top: 18px;}
	.main-section.main-section--center-roll .sec-head .sec-title {font-size: 30px; letter-spacing: -.6px;}
	.main-section.main-section--center-roll .sec-head .sec-desc {font-size: 15px; line-height: 1.55;}
	.mod-feature .feature-video {margin: 0 auto;}
	/* 소셜버튼 — 영문 타이틀(FOLLOW US)을 한 줄로 올리고 버튼은 그 아래 가로 배열 */
	.mod-feature .feature-social {flex-wrap: wrap; row-gap: 12px;}
	.mod-feature .feature-social-label {flex: 0 0 100%; margin: 0;}
	.mod-feature .feature-social-link {width: 36px; height: 36px; font-size: 14px;}
	.main-section--nodata .sec-head {flex-wrap: wrap;}
	.main-section--nodata .nodata-count {padding: 8px 14px;}
	.main-section--nodata .nodata-count-num {font-size: 20px;}
	.mod-promo .promo-title {font-size: 20px;}
	.mod-schedule--calendar .schedule-cal-head, .mod-schedule--calendar .schedule-cal-body {grid-template-columns: repeat(3, 1fr);}
	.mod-schedule--calendar .schedule-cal-day:nth-child(n+4), .mod-schedule--calendar .schedule-cal-cell:nth-child(n+4) {display: none;}
	.info-panel {grid-template-columns: 1fr;}
	.info-panel > .mod-rate--compact {grid-column: auto;}
	.mod-center-status .center-list {grid-template-columns: repeat(2, 1fr);}
	.mod-channels .channels-list {grid-template-columns: repeat(2, 1fr);}
	.mod-clearance .clearance-table {display: block; overflow-x: auto; white-space: nowrap;}
	.mod-clearance .clearance-table thead th, .mod-clearance .clearance-table tbody td {padding: 14px 12px; font-size: 13px;}
	.mod-departure .departure-list {grid-template-columns: repeat(2, 1fr);}
	.mod-departure .departure-route-time {display: none;}
	.mod-departure .departure-route {min-width: 110px;}
	.mod-center-status--slider .center-slider-track {min-height: 320px; aspect-ratio: 16 / 9;}
	.mod-center-status--slider .center-slide-caption {padding: 26px 30px;}
	.mod-center-status--slider .center-slide-name {font-size: 24px;}
	.mod-center-status--slider .center-thumb-list {grid-template-columns: repeat(6, 1fr);}
	.info-panel--col2 {grid-template-columns: 1fr;}
}
@media (max-width: 767px) {
	.sec-head--row {flex-direction: row; align-items: center;}
	.sec-head--row .sec-title {font-size: 20px;}
	.mod-process .process-list {grid-template-columns: repeat(2, 1fr); gap: 12px;}
	.mod-process .process-item {padding: 22px 16px;}
	.mod-process .process-item::after {display: none !important;}
	.mod-process .process-icon {width: 48px; height: 48px; margin-bottom: 12px; font-size: 22px;}
	.mod-process .process-title {font-size: 15px;}
	.mod-process .process-desc {font-size: 12px;}
	.mod-warehouse .warehouse-card {padding: 22px;}
	.mod-warehouse--single .warehouse-visual {padding: 28px;}
	.mod-warehouse--single .warehouse-visual-code {font-size: 44px; letter-spacing: 2px;}
	.mod-warehouse--single .warehouse-visual-icon {width: 52px; height: 52px; font-size: 22px; margin-bottom: 12px;}
	.mod-warehouse--single .warehouse-content {padding: 24px;}
	.mod-warehouse--single .warehouse-name {font-size: 18px;}
	.mod-warehouse--double .col-3 {grid-template-columns: 1fr;}
	.mod-warehouse--multi .col-3 {grid-template-columns: repeat(2, 1fr);}
	.mod-rate .rate-list {grid-template-columns: 1fr;}
	.mod-rate--col-3 .rate-list, .mod-rate--col-4 .rate-list, .mod-rate--double .rate-list {grid-template-columns: 1fr;}
	.mod-rate .rate-item {display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;}
	.mod-rate .rate-flag {margin-bottom: 0;}
	.mod-rate .rate-value {margin-top: 0; padding-top: 0; border-top: 0; text-align: right;}
	.mod-rate .rate-value b {font-size: 18px;}
	.mod-rate--single .rate-item {grid-template-columns: 1fr;}
	.mod-rate--single .rate-block {padding: 22px 18px; border-right: 0; border-bottom: 1px solid var(--c-line);}
	.mod-rate--single .rate-block:last-child {border-bottom: 0;}
	.mod-rate--single .rate-block-value {font-size: 24px;}
	.mod-calc {padding: 24px 20px;}
	.mod-calc .calc-row {grid-template-columns: 1fr; gap: 8px;}
	.mod-calc .calc-result-total b {font-size: 20px;}
	.mod-tracking .tracking-form {flex-direction: column;}
	.mod-tracking .tracking-states {padding: 18px 14px; overflow-x: auto;}
	.mod-tracking .tracking-step-list {min-width: 480px;}
	.mod-notice .notice-item {grid-template-columns: 60px 1fr; row-gap: 4px;}
	.mod-notice .notice-item time {grid-column: 2; font-size: 12px;}
	.mod-event .event-thumb-text {font-size: 22px; letter-spacing: 2px;}
	.mod-event .event-info {padding: 18px 20px;}
	.mod-event--single .event-card {grid-template-columns: 1fr; min-height: auto;}
	.mod-event--single .event-thumb {aspect-ratio: 16 / 9; height: auto;}
	.mod-event--single .event-info {padding: 24px 22px;}
	.mod-event--single .event-title {font-size: 18px;}
	.mod-event--single .event-desc {font-size: 13px;}
	.mod-event--col-3 .col-2 {grid-template-columns: 1fr;}
	.mod-event--col-4 .col-2 {grid-template-columns: repeat(2, 1fr);}
	.mod-event--col-4 .event-info {padding: 14px 14px;}
	.mod-review .review-list {grid-template-columns: 1fr;}
	.mod-review .review-card {padding: 22px;}
	.main-section--review .review-list {grid-template-columns: 1fr; gap: 14px;}
	.review-summary {flex-wrap: wrap; padding: 20px 12px; gap: 12px; margin-bottom: 32px;}
	.review-summary-item {flex: 1 1 100%; padding: 8px 0;}
	.review-summary-divider {display: none;}
	.review-summary-num {font-size: 32px;}
	.mod-faq .faq-q {padding: 18px 4px; font-size: 14px; grid-template-columns: 32px 1fr 24px; gap: 12px;}
	.mod-faq .faq-mark {width: 28px; height: 28px; font-size: 12px;}
	.mod-faq .faq-a {grid-template-columns: 32px 1fr; gap: 12px;}
	.mod-schedule .schedule-table {display: block; overflow-x: auto; white-space: nowrap;}
	.mod-schedule .schedule-table th, .mod-schedule .schedule-table td {padding: 12px;}
	.mod-quickstep {padding: 18px;}
	.mod-quickstep .quickstep-list {grid-template-columns: 1fr; gap: 10px;}
	.mod-quickstep .quickstep-item::after {display: none !important;}
	.main-section--procedure .sec-head {margin-bottom: 30px;}
	.mod-procedure {grid-template-columns: 1fr; gap: 28px;}
	.procedure-card {padding: 32px 22px 22px;}
	.procedure-card::after {display: none !important;}
	.procedure-icon {width: 60px; height: 60px; font-size: 30px;}
	.procedure-title {font-size: 18px;}
	.mod-quicklink .quicklink-list {grid-template-columns: repeat(2, 1fr); gap: 8px;}
	.mod-quicklink .quicklink-item {padding: 14px 16px; gap: 10px;}
	.mod-quicklink .quicklink-text {font-size: 13px;}
	.mod-nodata {--per-view: 3; --gap: 10px;}
	.mod-nodata .nodata-head {grid-template-columns: 1fr; gap: 12px; padding: 14px 16px;}
	.mod-nodata .nodata-head-text {font-size: 13px;}
	.mod-nodata .nodata-search {height: 38px;}
	.mod-nodata .nodata-search-btn {height: 30px; font-size: 11px; padding: 0 12px;}
	.mod-nodata .nodata-more-btn {height: 38px; font-size: 12px; padding: 0 16px;}
	.mod-nodata .nodata-info {padding: 8px 10px 10px;}
	.mod-nodata .nodata-tracking {font-size: 13px;}
	.mod-nodata .nodata-meta {gap: 6px; font-size: 11px;}
	.main-section--nodata .nodata-count {align-self: flex-start; flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px;}
	.main-section--nodata .nodata-count-num {font-size: 18px;}
	.mod-nodata .nodata-arrow {width: 32px; height: 32px; font-size: 11px;}
	.mod-nodata .nodata-arrow--prev {left: 4px;}
	.mod-nodata .nodata-arrow--next {right: 4px;}
	.mod-bank, .mod-cs {padding: 22px;}
	.mod-bank .bank-num {font-size: 18px;}
	.mod-cs .cs-actions {grid-template-columns: 1fr; gap: 6px;}
	.mod-promo {grid-template-columns: 1fr; gap: 12px;}
	.mod-promo .promo-banner {aspect-ratio: 16 / 6;}
	.mod-promo .promo-content {padding: 22px 24px;}
	.mod-promo .promo-title {font-size: 18px;}
	.mod-tracking--dual {grid-template-columns: 1fr; gap: 10px;}
	/* 모바일 — 타이틀(라벨) 위, 입력폼+버튼은 그 아래 가로 배열 */
	.mod-tracking--dual .tracking-form {flex-wrap: wrap; height: auto; padding: 12px 18px; border-radius: 16px; row-gap: 10px;}
	.mod-tracking--dual .tracking-label {flex: 0 0 100%; font-size: 15px; padding-right: 0; margin-right: 0; border-right: 0;}
	.mod-tracking--dual .tracking-input {height: 48px; font-size: 14px;}
	.mod-tracking--dual .tracking-submit {width: 42px; height: 42px; flex: 0 0 42px; font-size: 18px;}
	.mod-schedule--calendar .schedule-cal-head, .mod-schedule--calendar .schedule-cal-body {grid-template-columns: repeat(2, 1fr);}
	.mod-schedule--calendar .schedule-cal-day:nth-child(n+3), .mod-schedule--calendar .schedule-cal-cell:nth-child(n+3) {display: none;}
	.mod-schedule--calendar .schedule-cal-cell {padding: 12px;}
	.mod-rate--compact .rate-c-value {font-size: 18px;}
	.mod-center-status .center-list {grid-template-columns: repeat(2, 1fr); gap: 12px;}
	.mod-center-status .center-card {padding: 18px;}
	.mod-center-status .center-name {font-size: 16px; margin-bottom: 12px; padding-bottom: 10px;}
	.mod-center-status .center-meta {gap: 6px; margin-bottom: 12px;}
	.mod-center-status .center-meta li {font-size: 12px;}
	.mod-channels .channels-list {grid-template-columns: 1fr; gap: 10px;}
	.mod-channels .channels-link {grid-template-columns: 48px 1fr 16px; gap: 14px; padding: 18px 20px;}
	.mod-channels .channels-icon {width: 48px; height: 48px; font-size: 18px;}
	.mod-channels .channels-name {font-size: 14px;}
	.mod-channels .channels-desc {font-size: 12px;}
	.mod-clearance .clearance-tabs {gap: 4px; margin-bottom: 14px;}
	.mod-clearance .clearance-tab {height: 32px; padding: 0 14px; font-size: 12px;}
	.mod-clearance .clearance-table thead th, .mod-clearance .clearance-table tbody td {padding: 12px 10px; font-size: 12px;}
	.mod-clearance .clearance-tag, .mod-clearance .clearance-status {height: 22px; padding: 0 8px; font-size: 11px;}
	.mod-clearance .clearance-foot {font-size: 12px;}
	.mod-departure .departure-list {grid-template-columns: 1fr; gap: 12px;}
	/* 출항스케줄 채움 이미지 — 1단 그리드는 여백이 없으므로 미노출 */
	.mod-departure .departure-list:has(> .departure-card):not(:has(> :nth-child(4))) > .departure-photo {display: none;}
	/* 표가 좁은 화면에서 페이지를 밀지 않도록 카드 내부에서만 가로 스크롤 */
	.mod-departure .departure-table-wrap {overflow-x: auto;}
	.mod-departure .departure-card-head {padding: 14px 16px;}
	.mod-departure .departure-card-name {font-size: 16px;}
	.mod-departure .departure-card-flag {font-size: 11px; height: 20px; padding: 0 8px;}
	.mod-departure .departure-table-wrap {padding: 2px 12px;}
	.mod-departure .departure-table thead th {padding: 10px 2px; font-size: 12px;}
	.mod-departure .departure-table thead th.departure-th-route {padding-left: 6px;}
	.mod-departure .departure-table tbody td {padding: 12px 2px;}
	.mod-departure .departure-route {gap: 6px; padding: 10px 2px 10px 6px; min-width: 100px;}
	.mod-departure .departure-route-icon {width: 24px; height: 24px; font-size: 12px;}
	.mod-departure .departure-route-name {font-size: 13px;}
	.mod-departure .departure-route-time {display: none;}
	.mod-departure .departure-mark {width: 22px; height: 22px; font-size: 12px;}
	.mod-departure .departure-card-foot {padding: 10px 16px 14px; font-size: 12px;}
	.mod-departure .departure-foot {font-size: 12px;}
	.mod-notice--bar {padding: 6px 18px;}
	.mod-notice--bar .notice-bar-title {font-size: 16px;}
	.mod-notice--bar .notice-bar-head {padding: 12px 0;}
	.mod-notice--bar .notice-item {grid-template-columns: 60px 1fr; row-gap: 4px; padding: 12px 0;}
	.mod-notice--bar .notice-item time {grid-column: 2; font-size: 11px;}
	.mod-center-status--slider .center-slider-track {min-height: 260px; aspect-ratio: 4 / 3;}
	.mod-center-status--slider .center-slide-caption {padding: 18px 22px;}
	.mod-center-status--slider .center-slide-flag {font-size: 11px; padding: 3px 10px; margin-bottom: 8px;}
	.mod-center-status--slider .center-slide-name {font-size: 19px; margin-bottom: 6px;}
	.mod-center-status--slider .center-slide-desc {font-size: 12px; line-height: 1.5;}
	.mod-center-status--slider .center-arrow {width: 38px; height: 38px; font-size: 20px; line-height: 34px;}
	.mod-center-status--slider .center-arrow--prev {left: 10px;}
	.mod-center-status--slider .center-arrow--next {right: 10px;}
	.mod-center-status--slider .center-thumb-list {grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px;}
	.mod-center-status--slider .center-thumb-item .center-thumb-btn {padding: 10px 6px;}
	.mod-center-status--slider .center-thumb-name {font-size: 11px;}
}
@media (max-width: 479px) {
	.mod-process .process-list {grid-template-columns: 1fr;}
	.mod-warehouse .warehouse-card {padding: 20px;}
	.mod-calc {padding: 20px 16px;}
	.mod-calc .calc-dim {grid-template-columns: 1fr; gap: 8px;}
	.mod-calc .calc-dim span {display: none;}
	.mod-tracking .tracking-step-list {min-width: 360px;}
	.mod-nodata {--per-view: 2;}
	.mod-quicklink .quicklink-list {grid-template-columns: 1fr;}
	.mod-promo .promo-banner {aspect-ratio: 16 / 7;}
	.mod-center-status .center-list {grid-template-columns: 1fr;}
	.mod-clearance .clearance-table {min-width: 560px;}
}
/* ============================================================
   ⑮ 메인 서비스 (mod-service) — 공지 + 구매대행 + 배송대행
   ※ 컨텐츠 1 전용 위치/여백은 파일 끝의 .mt1-main 블록에서 통합 관리
   ============================================================ */
.mod-service {display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 20px;}
/* ----- 공지사항 카드 ----- */
.mod-service .service-notice {display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: var(--shadow-m); overflow: hidden;}
.mod-service .service-notice-head {display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);}
.mod-service .service-notice-title {font-size: 20px; font-weight: 700; color: #fff;}
.mod-service .service-notice-more {font-size: 14px; font-weight: 600; color: #fff;}
.mod-service .service-notice-more:hover {opacity: .85;}
.mod-service .service-notice-list {flex: 1; padding: 8px 28px;}
.mod-service .service-notice-item {display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--c-line);}
.mod-service .service-notice-item:last-child {border-bottom: 0;}
.mod-service .service-notice-tag {flex-shrink: 0; display: inline-flex; justify-content: center; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 99px; background: transparent; color: var(--c-text-sub); font-size: 12px; font-weight: 600; letter-spacing: -.2px;}
.mod-service .service-notice-tag--important {background: var(--c-error); border-color: var(--c-error); color: #fff;}
.mod-service .service-notice-link {flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease;}
.mod-service .service-notice-link:hover {color: var(--c-primary);}
.mod-service .service-notice-date {flex-shrink: 0; font-size: 13px; color: var(--c-text-mute); font-variant-numeric: tabular-nums; letter-spacing: -.3px;}
/* ----- 구매/배송대행 카드 ----- */
.mod-service .service-apply {display: flex; flex-direction: column; align-items: center; padding: 22px 24px 22px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-m); transition: transform .25s ease, box-shadow .25s ease;}
.mod-service .service-apply:hover {transform: translateY(-4px); box-shadow: var(--shadow-l);}
.mod-service .service-apply-title {font-size: 24px; font-weight: 800; color: var(--c-text); letter-spacing: -.3px;}
.mod-service .service-apply-img {flex: 1; display: flex; align-items: center; justify-content: center; margin: 12px 0; min-height: 140px;}
.mod-service .service-apply-img img {max-width: 100%; max-height: 160px; object-fit: contain;}
.mod-service .service-apply-foot {display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-line);}
.mod-service .service-apply-desc {flex: 1; min-width: 0; font-size: 14px; line-height: 1.55; color: var(--c-text-sub); text-align: left;}
.mod-service .service-apply-arrow {flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 14px;}
/* ----- 구매대행 (buy) — 베이지 그라데이션 + 오렌지 화살표 ----- */
.mod-service .service-apply--buy {background: linear-gradient(135deg, #fff 0%, #fffcf7 100%);}
.mod-service .service-apply--buy .service-apply-arrow {background: var(--c-secondary);}
/* ----- 배송대행 (ship) — 민트 그라데이션 + 그린 화살표 ----- */
.mod-service .service-apply--ship {background: linear-gradient(135deg, #fff 0%, #f7fdf9 100%);}
.mod-service .service-apply--ship .service-apply-arrow {background: var(--c-success);}
@media (max-width: 1023px) {
	.mod-service {grid-template-columns: 1fr 1fr; gap: 16px;}
	.mod-service .service-notice {grid-column: 1 / -1;}
}
@media (max-width: 767px) {
	.mod-service {grid-template-columns: 1fr; gap: 14px;}
	.mod-service .service-notice-head {padding: 18px 22px;}
	.mod-service .service-notice-title {font-size: 18px;}
	.mod-service .service-notice-list {padding: 6px 22px;}
	.mod-service .service-notice-item {gap: 10px;}
	.mod-service .service-notice-link {font-size: 13px;}
	.mod-service .service-notice-date {font-size: 12px;}
	.mod-service .service-apply {padding: 22px 20px 24px;}
	.mod-service .service-apply-title {font-size: 22px;}
	.mod-service .service-apply-img {margin: 14px 0; min-height: 120px;}
	.mod-service .service-apply-img img {max-height: 130px;}
	.mod-service .service-apply-foot {gap: 12px;}
	.mod-service .service-apply-arrow {width: 36px; height: 36px; font-size: 13px;}
}
@media (max-width: 479px) {
	.mod-service .service-notice-head {padding: 16px 18px;}
	.mod-service .service-notice-list {padding: 4px 18px;}
	.mod-service .service-notice-item {padding: 10px 0; gap: 8px;}
	.mod-service .service-notice-tag {height: 22px; padding: 0 8px; font-size: 11px;}
	.mod-service .service-notice-date {font-size: 11px;}
	.mod-service .service-apply-title {font-size: 20px;}
	.mod-service .service-apply-foot {gap: 10px;}
	.mod-service .service-apply-arrow {width: 32px; height: 32px; font-size: 11px;}
}
/* ============================================================
   ⑮-2 content-1 침범 보전 — Hero 하단 높이 자동 확장
   .main-section--service 가 존재할 때 (= content-1 활성 시)
   각 hero type별 침범량만큼 자체 높이 확장 (콘텐츠 가림 방지)
   ※ 모든 hero가 box-sizing: border-box 이므로 type별 height/padding 동시 조정
   ============================================================ */

/* ----- PC 기본 (침범 80px) ----- */
body.page-mt1 .main-hero--type1 {height: 800px;}
body.page-mt1 .main-hero--type2 {height: calc(100vh + 80px); max-height: 1080px; min-height: 840px;}
body.page-mt1 .main-hero--type3 {padding-bottom: 210px;}
body.page-mt1 .main-hero--type4 {height: 620px; padding-bottom: 160px;}
@media (max-width: 1279px) {
	body.page-mt1 .main-hero--type1 {height: 720px;}
	body.page-mt1 .main-hero--type2 {max-height: 940px; min-height: 760px;}
	body.page-mt1 .main-hero--type4 {height: 570px; padding-bottom: 150px;}
}
@media (max-width: 1023px) {
	body.page-mt1 .main-hero--type1 {height: 620px;}
	body.page-mt1 .main-hero--type2 {height: calc(90vh + 60px); max-height: 820px; min-height: 660px;}
	body.page-mt1 .main-hero--type3 {padding-bottom: 210px;}
	body.page-mt1 .main-hero--type4 {height: 500px; padding-bottom: 120px;}
}
@media (max-width: 767px) {
	body.page-mt1 .main-hero--type1 {height: 480px;}
	body.page-mt1 .main-hero--type2 {height: calc(80vh + 20px); max-height: 680px; min-height: 540px;}
	body.page-mt1 .main-hero--type3 {padding-bottom: 40px;}
	body.page-mt1 .main-hero--type4 {height: 400px; padding-bottom: 70px;}
}
@media (max-width: 479px) {
	body.page-mt1 .main-hero--type1 {height: 380px;}
	body.page-mt1 .main-hero--type2 {height: 70vh; max-height: 560px; min-height: 460px;}
	body.page-mt1 .main-hero--type3 {padding-bottom: 20px;}
	body.page-mt1 .main-hero--type4 {height: 330px; padding-bottom: 45px;}
}
/* ============================================================
   ⑮-3 content-1 — Hero 내부 요소 위치 자동 보정
   → 카드 침범 영역(--mt1-service-overlap)을 피해 가시 영역 기준으로 재배치
   ※ hero.css 는 건드리지 않고 body.page-mt1 스코프로만 오버라이드
   ============================================================ */

/* type1 — dot 인디케이터 : 침범 높이 + 원래 32px 만큼 위로 (카드 위에 표시) */
body.page-mt1 .main-hero--type1 .hero-indicator {bottom: calc(32px + var(--mt1-service-overlap, 74px));}
/* type1 — 카피/좌우 화살표 : 가시 영역(전체 - 침범) 시각 중앙으로 (침범의 절반만큼 위로) */
body.page-mt1 .main-hero--type1 .hero-copy,
body.page-mt1 .main-hero--type1 .hero-arrow {top: calc(50% - var(--mt1-service-overlap, 74px) / 2);}
/* type2 — 카피(inset:0 flex 중앙 정렬) : bottom 을 침범 높이만큼 잡아 가시 영역 중앙 정렬 */
body.page-mt1 .main-hero--type2 .hero-copy {bottom: var(--mt1-service-overlap, 74px);}
@keyframes mt2procPulse {
	0%, 20%, 100% {transform: translateY(0); box-shadow: 0 4px 16px rgba(234, 88, 12, .06); border-color: var(--mt2-line);}
	6% {transform: translateY(-8px); box-shadow: 0 18px 36px rgba(234, 88, 12, .22); border-color: var(--mt2-accent);}
	13% {transform: translateY(-4px); box-shadow: 0 12px 28px rgba(234, 88, 12, .14); border-color: var(--mt2-accent);}
}
.mt2-section-num {display: inline-block; font-family: "Pretendard", sans-serif; font-style: italic; font-size: 14px; font-weight: 500; color: var(--mt2-text-mute); letter-spacing: 1px; margin-bottom: 14px;}
.mt2-eyebrow {display: inline-block; font-size: 12px; font-weight: 700; color: var(--mt2-accent); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 14px;}
@keyframes mt2-routeFlow1 {to {stroke-dashoffset: -320;}}
@keyframes mt2-routeFlow2 {to {stroke-dashoffset: -400;}}
@keyframes mt2-routeFlow3 {to {stroke-dashoffset: -260;}}
@keyframes mt2-routeFlow4 {to {stroke-dashoffset: -340;}}
@keyframes mt2-routeFlow5 {to {stroke-dashoffset: -290;}}
@keyframes mt2-routeFlow6 {to {stroke-dashoffset: -220;}}
@keyframes mt2-portPulse {0%, 100% {opacity: .55; transform: scale(1);} 50% {opacity: 1; transform: scale(1.4);}}
@keyframes mt2-stepCardPulse {
	0%, 7.14%, 100% {transform: scale(1);}
	1.19% {transform: scale(1.1);}
	2.38% {transform: scale(1);}
	3.57% {transform: scale(1.1);}
	4.76% {transform: scale(1);}
	5.95% {transform: scale(1.1);}
}
@keyframes mt2NodataCountPulse {
	0%, 100% {box-shadow: 0 0 0 0 rgba(234, 88, 12, .4);}
	50% {box-shadow: 0 0 0 10px rgba(234, 88, 12, 0);}
}
@keyframes mt3-nodata-scroll {from {transform: translateX(0);} to {transform: translateX(calc(-50% - 10px));}}
/* 공통 inner */
body.page-mt4 .mt4-main .inner, .mt4-intro-inner, .mt4-stats-inner, .mt4-bigcta-inner {width: 1320px; max-width: 100%; margin: 0 auto; padding: 0 40px;}
/* 공통 eyebrow 라벨 */
.mt4-eyebrow {display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--mt4-text); margin-bottom: 28px;}
.mt4-eyebrow-dot {width: 10px; height: 10px; border-radius: 50%; background: var(--mt4-accent); box-shadow: 0 0 0 3px rgba(255, 77, 36, .18); display: inline-block;}
.mt4-eyebrow--light {color: var(--mt4-text-light);}
/* ====== 0. INTRO HERO ====== */
.mt4-intro {position: relative; padding: 110px 0 60px; min-height: 80vh; display: flex; align-items: center;}
.mt4-intro::before {content: ""; position: absolute; top: 30%; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, var(--mt4-accent) 0%, transparent 65%); opacity: .08; pointer-events: none;}
.mt4-intro-inner {position: relative; z-index: 1;}
.mt4-intro-headline {font-family: var(--mt4-serif); font-size: clamp(60px, 11vw, 158px); font-weight: 700; line-height: .95; letter-spacing: -4px; color: var(--mt4-text); margin: 0; max-width: 100%;}
.mt4-intro-line {display: block;}
.mt4-intro-line:nth-child(2) {padding-left: 8vw;}
.mt4-intro-line em {font-style: italic; color: var(--mt4-accent); position: relative;}
.mt4-intro-line sup {color: var(--mt4-accent); font-size: 0.55em; vertical-align: text-top;}
.mt4-intro-sub {margin: 44px 0 36px; font-size: 22px; line-height: 1.6; color: var(--mt4-text-sub); max-width: 640px; font-weight: 400;}
.mt4-intro-sub strong {color: var(--mt4-text); font-weight: 800;}
.mt4-intro-cta {display: flex; gap: 16px; flex-wrap: wrap;}
.mt4-cta-primary {display: inline-flex; align-items: center; gap: 12px; padding: 22px 38px; background: var(--mt4-text); color: var(--mt4-paper); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; border-radius: 999px; transition: all .3s ease;}
.mt4-cta-primary:hover {background: var(--mt4-accent); transform: translateY(-2px);}
.mt4-cta-arrow {display: inline-block; transition: transform .3s ease; font-size: 18px;}
.mt4-cta-primary:hover .mt4-cta-arrow {transform: translateX(6px);}
.mt4-cta-line {display: inline-flex; align-items: center; gap: 10px; padding: 22px 38px; background: transparent; color: var(--mt4-text); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; border-radius: 999px; border: 1.5px solid var(--mt4-text); transition: all .3s ease;}
.mt4-cta-line:hover {background: var(--mt4-text); color: var(--mt4-paper);}
.mt4-cta-line--light {color: var(--mt4-text-light); border-color: var(--mt4-text-light);}
.mt4-cta-line--light:hover {background: var(--mt4-text-light); color: var(--mt4-text);}
.mt4-cta-primary--lg {padding: 28px 50px; font-size: 16px;}
.mt4-scroll-hint {position: absolute; right: 60px; bottom: 60px; display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--mt4-text-mute); font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;}
.mt4-scroll-line {width: 1px; height: 60px; background: var(--mt4-text-mute); position: relative; overflow: hidden;}
.mt4-scroll-line::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 30%; background: var(--mt4-accent); animation: mt4-scroll-pulse 2s ease-in-out infinite;}
@keyframes mt4-scroll-pulse {0%, 100% {transform: translateY(-100%);} 50% {transform: translateY(300%);}}
/* ====== 0-1. MARQUEE ====== */
.mt4-marquee {background: var(--mt4-dark); color: var(--mt4-text-light); padding: 28px 0; overflow: hidden; border-top: 1px solid var(--mt4-line-dark); border-bottom: 1px solid var(--mt4-line-dark);}
.mt4-marquee-track {display: flex; gap: 64px; animation: mt4-marquee 28s linear infinite; width: max-content; font-family: var(--mt4-serif); font-size: 28px; font-weight: 700; font-style: italic; letter-spacing: -.4px; white-space: nowrap;}
.mt4-marquee-track span {display: inline-block; padding-right: 64px;}
@keyframes mt4-marquee {from {transform: translateX(0);} to {transform: translateX(-50%);}}
/* ====== 0-2. STATS COUNTER ====== */
.mt4-stats {padding: 110px 0; background: var(--mt4-paper);}
.mt4-stats-inner {display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--mt4-line); border-bottom: 1px solid var(--mt4-line);}
.mt4-stat {padding: 48px 36px; border-right: 1px solid var(--mt4-line); position: relative; transition: background .3s ease;}
.mt4-stat:last-child {border-right: 0;}
.mt4-stat:hover {background: var(--mt4-bg);}
.mt4-stat-num {font-family: var(--mt4-serif); font-size: 92px; font-weight: 700; line-height: 1; letter-spacing: -3px; color: var(--mt4-text); margin-bottom: 18px;}
.mt4-stat-num em {font-style: italic; color: var(--mt4-accent); font-size: 0.65em;}
.mt4-stat-label {font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 2.5px; color: var(--mt4-accent); margin-bottom: 10px;}
.mt4-stat-desc {font-size: 16px; color: var(--mt4-text-sub); font-weight: 500; line-height: 1.5;}
/* ====== 기본 섹션 ====== */
body.page-mt4 .mt4-main .main-section {position: relative; padding: 120px 0; background: transparent; margin: 0;}
body.page-mt4 .mt4-main .main-section--soft {background: var(--mt4-paper);}
body.page-mt4 .mt4-main .main-section--service {margin-top: 0; padding: 100px 0;}
/* 섹션 헤더 — 매거진 톤 */
body.page-mt4 .mt4-main .sec-head {margin-bottom: 72px; position: relative;}
body.page-mt4 .mt4-main .sec-head--center {text-align: center;}
body.page-mt4 .mt4-main .sec-head--row {display: flex; justify-content: space-between; align-items: flex-end;}
body.page-mt4 .mt4-main .sec-title {font-family: var(--mt4-serif); font-size: 76px; font-weight: 700; line-height: 1.05; letter-spacing: -2.5px; color: var(--mt4-text);}
body.page-mt4 .mt4-main .sec-title em {font-style: italic; color: var(--mt4-accent);}
body.page-mt4 .mt4-main .sec-desc {margin-top: 22px; font-size: 20px; color: var(--mt4-text-sub); line-height: 1.7; max-width: 720px; font-weight: 400;}
body.page-mt4 .mt4-main .sec-head--center .sec-desc {margin-left: auto; margin-right: auto;}
body.page-mt4 .mt4-main .sec-more {font-size: 14px; font-weight: 800; color: var(--mt4-text); text-transform: uppercase; letter-spacing: 2px; padding: 16px 28px; border: 1.5px solid var(--mt4-text); border-radius: 999px; transition: all .3s ease;}
body.page-mt4 .mt4-main .sec-more:hover {background: var(--mt4-text); color: var(--mt4-paper);}
/* ====== 1. 서비스 신청 ====== */
body.page-mt4 .mt4-main .main-section--service {background: var(--mt4-bg);}
body.page-mt4 .mt4-main .mod-service {display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px;}
body.page-mt4 .mt4-main .service-notice {background: var(--mt4-paper); padding: 44px 40px; border-radius: 24px;}
body.page-mt4 .mt4-main .service-notice-head {display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 24px; margin-bottom: 20px; border-bottom: 1px solid var(--mt4-line);}
body.page-mt4 .mt4-main .service-notice-title {font-family: var(--mt4-serif); font-size: 30px; font-weight: 700; color: var(--mt4-text); letter-spacing: -.8px;}
body.page-mt4 .mt4-main .service-notice-more {font-size: 13px; font-weight: 700; color: var(--mt4-accent); text-transform: uppercase; letter-spacing: 2px;}
body.page-mt4 .mt4-main .service-notice-list {list-style: none; margin: 0; padding: 0;}
body.page-mt4 .mt4-main .service-notice-item {display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--mt4-line);}
body.page-mt4 .mt4-main .service-notice-item:last-child {border-bottom: 0;}
body.page-mt4 .mt4-main .service-notice-tag {flex-shrink: 0; padding: 4px 12px; background: var(--mt4-bg); color: var(--mt4-text-sub); font-size: 11px; font-weight: 800; letter-spacing: 1px; border-radius: 999px; text-transform: uppercase;}
body.page-mt4 .mt4-main .service-notice-tag--important {background: var(--mt4-accent); color: var(--mt4-paper);}
body.page-mt4 .mt4-main .service-notice-link {flex: 1; font-size: 15px; font-weight: 500; color: var(--mt4-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
body.page-mt4 .mt4-main .service-notice-link:hover {color: var(--mt4-accent);}
body.page-mt4 .mt4-main .service-notice-date {font-size: 13px; color: var(--mt4-text-mute); font-weight: 600;}
body.page-mt4 .mt4-main .service-apply {position: relative; padding: 44px 40px; background: var(--mt4-paper); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; min-height: 380px; transition: all .4s ease; text-decoration: none;}
body.page-mt4 .mt4-main .service-apply:hover {background: var(--mt4-dark); transform: translateY(-6px);}
body.page-mt4 .mt4-main .service-apply:hover * {color: var(--mt4-text-light);}
body.page-mt4 .mt4-main .service-apply-title {font-family: var(--mt4-serif); font-size: 36px; font-weight: 700; color: var(--mt4-text); letter-spacing: -1px; margin-bottom: 20px; transition: color .4s ease;}
body.page-mt4 .mt4-main .service-apply-img {flex: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 22px;}
body.page-mt4 .mt4-main .service-apply-img img {max-width: 160px; max-height: 160px; transition: transform .4s ease;}
body.page-mt4 .mt4-main .service-apply:hover .service-apply-img img {transform: scale(1.08);}
body.page-mt4 .mt4-main .service-apply-foot {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid var(--mt4-line); transition: border-color .4s ease;}
body.page-mt4 .mt4-main .service-apply:hover .service-apply-foot {border-top-color: rgba(255, 255, 255, .18);}
body.page-mt4 .mt4-main .service-apply-desc {font-size: 14px; line-height: 1.55; color: var(--mt4-text-sub); flex: 1; transition: color .4s ease;}
body.page-mt4 .mt4-main .service-apply-arrow {width: 52px; height: 52px; border: 1.5px solid var(--mt4-text); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; background: transparent; color: var(--mt4-text); transition: all .4s ease;}
body.page-mt4 .mt4-main .service-apply:hover .service-apply-arrow {background: var(--mt4-accent); border-color: var(--mt4-accent); color: var(--mt4-paper);}
/* ====== 2. 배송조회 ====== */
body.page-mt4 .mt4-main .main-section--tracking-dual {padding: 80px 0; background: var(--mt4-paper);}
body.page-mt4 .mt4-main .mod-tracking--dual {display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1100px; margin: 0 auto;}
body.page-mt4 .mt4-main .tracking-form {display: flex; align-items: center; gap: 18px; padding: 30px 36px; background: var(--mt4-bg); border-radius: 16px; border: 0;}
body.page-mt4 .mt4-main .tracking-label {font-family: var(--mt4-serif); font-size: 22px; font-weight: 700; color: var(--mt4-text); white-space: nowrap; letter-spacing: -.4px;}
body.page-mt4 .mt4-main .tracking-input {flex: 1; min-width: 0; height: 50px; padding: 0 22px; background: var(--mt4-paper); border: 0; border-radius: 999px; color: var(--mt4-text); font-size: 15px;}
body.page-mt4 .mt4-main .tracking-input:focus {outline: 2px solid var(--mt4-accent); outline-offset: 2px;}
body.page-mt4 .mt4-main .tracking-submit {width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--mt4-text); color: var(--mt4-paper); cursor: pointer; font-size: 18px;}
body.page-mt4 .mt4-main .tracking-submit:hover {background: var(--mt4-accent);}
/* ====== 2-1. 구매/배송대행 절차 - 매거진 zigzag ====== */
body.page-mt4 .mt4-main .main-section--procedure {padding: 120px 0; background: var(--mt4-bg);}
body.page-mt4 .mt4-main .mod-procedure {display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; counter-reset: proc;}
body.page-mt4 .mt4-main .procedure-card {position: relative; padding: 44px 28px 36px; background: var(--mt4-paper); border-radius: 16px; border: 0; box-shadow: none; text-align: center; transition: transform .35s ease, box-shadow .35s ease;}
body.page-mt4 .mt4-main .procedure-card:hover {transform: translateY(-10px); box-shadow: 0 24px 48px rgba(13, 13, 15, .08);}
body.page-mt4 .mt4-main .procedure-card::after {display: none;}
body.page-mt4 .mt4-main .procedure-num {position: relative; top: auto; left: auto; transform: none; width: auto; height: auto; background: transparent; color: var(--mt4-accent); border: 0; border-radius: 0; box-shadow: none; font-family: var(--mt4-serif); font-style: italic; font-size: 56px; font-weight: 700; margin: 0 0 12px; display: block; line-height: 1;}
body.page-mt4 .mt4-main .procedure-icon {display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; font-size: 32px; background: var(--mt4-bg); border-radius: 50%; margin: 8px auto 24px;}
body.page-mt4 .mt4-main .procedure-title {font-family: var(--mt4-serif); font-size: 22px; font-weight: 700; color: var(--mt4-text); margin: 0 0 12px; letter-spacing: -.5px;}
body.page-mt4 .mt4-main .procedure-desc {font-size: 15px; color: var(--mt4-text-sub); line-height: 1.65; margin: 0;}
/* ====== 2-2, 2-3. 스케줄 ====== */
body.page-mt4 .mt4-main .main-section--schedule-cal, body.page-mt4 .mt4-main .main-section--departure {padding: 100px 0; background: var(--mt4-paper);}
body.page-mt4 .mt4-main .schedule-cal-decor {display: none;}
body.page-mt4 .mt4-main .mod-schedule-cal, body.page-mt4 .mt4-main .mod-departure {background: var(--mt4-bg); border-radius: 20px; padding: 44px; border: 0;}
/* ====== 3. 빠른메뉴 ====== */
body.page-mt4 .mt4-main .main-section--quicklink {padding: 100px 0; background: var(--mt4-bg);}
body.page-mt4 .mt4-main .mod-quicklink .quicklink-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
body.page-mt4 .mt4-main .quicklink-item {padding: 36px 24px; background: var(--mt4-paper); border: 0; border-radius: 16px; text-align: center; transition: all .35s ease;}
body.page-mt4 .mt4-main .quicklink-item:hover {background: var(--mt4-dark); transform: translateY(-6px);}
body.page-mt4 .mt4-main .quicklink-item:hover .quicklink-text {color: var(--mt4-text-light);}
body.page-mt4 .mt4-main .quicklink-icon {font-size: 38px; margin-bottom: 14px; transition: transform .25s ease;}
body.page-mt4 .mt4-main .quicklink-item:hover .quicklink-icon {transform: scale(1.18);}
body.page-mt4 .mt4-main .quicklink-text {font-family: var(--mt4-serif); font-size: 17px; font-weight: 700; color: var(--mt4-text); letter-spacing: -.3px;}
body.page-mt4 .mt4-main .main-section--review.main-section--soft {background: var(--mt4-bg);}
/* ====== WHY US ====== */
.mt4-why {padding: 130px 0; background: var(--mt4-dark); color: var(--mt4-text-light);}
.mt4-why .inner {position: relative;}
.mt4-why-head {text-align: center; margin-bottom: 84px; max-width: 800px; margin-left: auto; margin-right: auto;}
.mt4-why-head .mt4-eyebrow {color: var(--mt4-text-light);}
.mt4-why-title {font-family: var(--mt4-serif); font-size: 76px; font-weight: 700; line-height: 1.05; letter-spacing: -2.5px; color: var(--mt4-text-light);}
.mt4-why-title em {font-style: italic; color: var(--mt4-accent);}
.mt4-why-desc {margin-top: 22px; font-size: 20px; color: var(--mt4-text-light-mute); line-height: 1.65;}
.mt4-why-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--mt4-line-dark); border-bottom: 1px solid var(--mt4-line-dark);}
.mt4-why-card {padding: 64px 56px; border-right: 1px solid var(--mt4-line-dark); position: relative; transition: background .3s ease;}
.mt4-why-card:nth-child(2n) {border-right: 0;}
.mt4-why-card:nth-child(-n+2) {border-bottom: 1px solid var(--mt4-line-dark);}
.mt4-why-card:hover {background: rgba(255, 255, 255, .03);}
.mt4-why-num {font-family: var(--mt4-serif); font-style: italic; font-size: 22px; font-weight: 700; color: var(--mt4-accent); letter-spacing: 3px; margin-bottom: 28px;}
.mt4-why-name {font-family: var(--mt4-serif); font-size: 38px; font-weight: 700; color: var(--mt4-text-light); letter-spacing: -1px; margin: 0 0 18px;}
.mt4-why-text {font-size: 17px; line-height: 1.75; color: var(--mt4-text-light-mute); margin: 0; max-width: 460px;}
/* ====== 8. 노데이터 ====== */
body.page-mt4 .mt4-main .main-section--nodata {padding: 100px 0;}
body.page-mt4 .mt4-main .mod-nodata {background: var(--mt4-paper); border-radius: 20px; padding: 56px;}
body.page-mt4 .mt4-main .nodata-head {background: var(--mt4-bg); padding: 28px 32px; border-radius: 16px; margin-bottom: 32px; display: flex; align-items: center; gap: 18px; border-left: 4px solid var(--mt4-accent);}
body.page-mt4 .mt4-main .nodata-head-icon {width: 48px; height: 48px; background: var(--mt4-accent); color: var(--mt4-paper); border-radius: 50%; font-size: 22px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center;}
body.page-mt4 .mt4-main .nodata-head-text {font-size: 16px; color: var(--mt4-text); line-height: 1.6; font-weight: 500;}
body.page-mt4 .mt4-main .nodata-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
body.page-mt4 .mt4-main .nodata-card {background: var(--mt4-bg); border: 0; border-radius: 14px; overflow: hidden;}
body.page-mt4 .mt4-main .nodata-thumb {aspect-ratio: 16 / 10; overflow: hidden; background: var(--mt4-paper);}
body.page-mt4 .mt4-main .nodata-thumb img {width: 100%; height: 100%; object-fit: cover;}
body.page-mt4 .mt4-main .nodata-tracking {padding: 16px 20px; font-family: "SF Mono", monospace; font-size: 17px; font-weight: 800; color: var(--mt4-text); background: var(--mt4-paper);}
/* ====== 10. 입금 + 고객센터 ====== */
body.page-mt4 .mt4-main .main-section--bank-cs {padding: 100px 0; background: var(--mt4-bg);}
body.page-mt4 .mt4-main .col-2 {display: grid; grid-template-columns: 1fr 1fr; gap: 28px;}
body.page-mt4 .mt4-main .mod-bank, body.page-mt4 .mt4-main .mod-cs {padding: 52px 44px; background: var(--mt4-paper); border-radius: 20px; border: 0;}
body.page-mt4 .mt4-main .bank-head, body.page-mt4 .mt4-main .cs-head {display: flex; align-items: center; gap: 18px; margin-bottom: 32px;}
body.page-mt4 .mt4-main .bank-icon, body.page-mt4 .mt4-main .cs-icon {font-size: 32px; width: 60px; height: 60px; background: var(--mt4-bg); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;}
body.page-mt4 .mt4-main .bank-title, body.page-mt4 .mt4-main .cs-title {font-family: var(--mt4-serif); font-size: 30px; font-weight: 700; color: var(--mt4-text); margin: 0; letter-spacing: -.8px;}
body.page-mt4 .mt4-main .bank-account {background: var(--mt4-bg); padding: 28px 32px; border-radius: 14px; border-left: 4px solid var(--mt4-accent); margin-bottom: 22px;}
body.page-mt4 .mt4-main .bank-num {font-family: "SF Mono", monospace; font-size: 26px; font-weight: 900; color: var(--mt4-text); letter-spacing: -.5px;}
body.page-mt4 .mt4-main .bank-info {font-size: 15px; color: var(--mt4-text-sub); margin-top: 8px;}
body.page-mt4 .mt4-main .bank-notice {font-size: 14px; color: var(--mt4-text-mute); margin-bottom: 22px; line-height: 1.6;}
body.page-mt4 .mt4-main .bank-copy {background: var(--mt4-text); color: var(--mt4-paper); border: 0; padding: 14px 32px; border-radius: 999px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; transition: all .25s ease;}
body.page-mt4 .mt4-main .bank-copy:hover {background: var(--mt4-accent);}
body.page-mt4 .mt4-main .cs-tels {display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px;}
body.page-mt4 .mt4-main .cs-tel {background: var(--mt4-bg); padding: 22px 24px; border-radius: 14px; border-left: 4px solid var(--mt4-accent);}
body.page-mt4 .mt4-main .cs-tel-label {font-size: 12px; color: var(--mt4-text-sub); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px;}
body.page-mt4 .mt4-main .cs-tel-num {font-family: "SF Mono", monospace; font-size: 22px; font-weight: 900; color: var(--mt4-text); margin-top: 8px; display: block;}
body.page-mt4 .mt4-main .cs-hours {font-size: 15px; color: var(--mt4-text-sub); line-height: 1.7; margin-bottom: 24px;}
body.page-mt4 .mt4-main .cs-actions {display: flex; gap: 12px;}
/* ====== BIG CTA ====== */
.mt4-bigcta {position: relative; padding: 140px 0; background: var(--mt4-dark); color: var(--mt4-text-light); overflow: hidden;}
.mt4-bigcta-bg {position: absolute; top: -100px; right: -150px; width: 700px; height: 700px; background: radial-gradient(circle, var(--mt4-accent) 0%, transparent 65%); opacity: .25; pointer-events: none;}
.mt4-bigcta-inner {position: relative; z-index: 1;}
.mt4-bigcta-title {font-family: var(--mt4-serif); font-size: clamp(56px, 10vw, 132px); font-weight: 700; line-height: .98; letter-spacing: -4px; color: var(--mt4-text-light); margin: 18px 0 0;}
.mt4-bigcta-title span {display: block;}
.mt4-bigcta-title span:nth-child(2) {padding-left: 8vw;}
.mt4-bigcta-title em {font-style: italic; color: var(--mt4-accent);}
.mt4-bigcta-desc {margin-top: 36px; font-size: 22px; color: var(--mt4-text-light-mute); line-height: 1.6; max-width: 640px;}
.mt4-bigcta-actions {margin-top: 44px; display: flex; gap: 16px; flex-wrap: wrap;}
.mt4-bigcta-actions .mt4-cta-primary {background: var(--mt4-accent); color: var(--mt4-paper);}
.mt4-bigcta-actions .mt4-cta-primary:hover {background: var(--mt4-paper); color: var(--mt4-text);}
/* ====== 버튼 공통 ====== */
body.page-mt4 .mt4-main .btn {height: 52px; padding: 0 32px; border-radius: 999px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; transition: all .25s ease;}
body.page-mt4 .mt4-main .btn-primary {background: var(--mt4-accent); color: var(--mt4-paper); border: 0;}
body.page-mt4 .mt4-main .btn-primary:hover {background: var(--mt4-text); transform: translateY(-2px);}
body.page-mt4 .mt4-main .btn-line {background: transparent; color: var(--mt4-text); border: 1.5px solid var(--mt4-text);}
body.page-mt4 .mt4-main .btn-line:hover {background: var(--mt4-text); color: var(--mt4-paper);}
@media (max-width: 1279px) {
	body.page-mt4 .mt4-main .sec-title, .mt4-why-title {font-size: 56px;}
	.mt4-stat-num {font-size: 72px;}
	body.page-mt4 .mt4-main .service-apply-title {font-size: 30px;}
}
@media (max-width: 1023px) {
	.mt4-intro {min-height: 60vh; padding: 80px 0 40px;}
	.mt4-scroll-hint {display: none;}
	.mt4-intro-headline {font-size: clamp(48px, 9vw, 84px);}
	.mt4-intro-line:nth-child(2) {padding-left: 6vw;}
	.mt4-intro-sub {font-size: 18px; margin: 32px 0 26px;}
	.mt4-marquee-track {font-size: 22px;}
	.mt4-stats-inner {grid-template-columns: repeat(2, 1fr);}
	.mt4-stat:nth-child(2n) {border-right: 0;}
	.mt4-stat:nth-child(-n+2) {border-bottom: 1px solid var(--mt4-line);}
	.mt4-stat-num {font-size: 64px;}
	body.page-mt4 .mt4-main .main-section {padding: 90px 0;}
	body.page-mt4 .mt4-main .sec-title, .mt4-why-title {font-size: 44px;}
	body.page-mt4 .mt4-main .mod-service {grid-template-columns: 1fr;}
	body.page-mt4 .mt4-main .mod-tracking--dual {grid-template-columns: 1fr;}
	body.page-mt4 .mt4-main .mod-procedure {grid-template-columns: repeat(3, 1fr);}
	body.page-mt4 .mt4-main .mod-quicklink .quicklink-list {grid-template-columns: repeat(2, 1fr);}
	body.page-mt4 .mt4-main .mod-quickstep .quickstep-list {grid-template-columns: 1fr 1fr;}
	.mt4-why-grid {grid-template-columns: 1fr;}
	.mt4-why-card {border-right: 0 !important; border-bottom: 1px solid var(--mt4-line-dark) !important;}
	.mt4-why-card:last-child {border-bottom: 0 !important;}
	body.page-mt4 .mt4-main .main-section--review .review-list {grid-template-columns: 1fr 1fr;}
	body.page-mt4 .mt4-main .main-section--review .review-list .review-card:nth-child(1) {grid-column: 1 / -1;}
	body.page-mt4 .mt4-main .nodata-list {grid-template-columns: 1fr 1fr;}
	body.page-mt4 .mt4-main .col-2 {grid-template-columns: 1fr;}
	.mt4-bigcta {padding: 100px 0;}
}
@media (max-width: 767px) {
	body.page-mt4 .mt4-main .inner, .mt4-intro-inner, .mt4-stats-inner, .mt4-bigcta-inner {padding: 0 20px;}
	.mt4-intro {min-height: 50vh; padding: 60px 0 30px;}
	.mt4-intro-headline {font-size: clamp(40px, 12vw, 64px); letter-spacing: -2px;}
	.mt4-intro-sub {font-size: 16px;}
	.mt4-intro-cta {flex-direction: column; align-items: stretch;}
	.mt4-cta-primary, .mt4-cta-line {padding: 18px 28px; justify-content: center;}
	.mt4-marquee-track {font-size: 18px; gap: 36px;}
	.mt4-stats {padding: 60px 0;}
	.mt4-stat {padding: 32px 24px;}
	.mt4-stat-num {font-size: 52px;}
	body.page-mt4 .mt4-main .main-section {padding: 70px 0;}
	body.page-mt4 .mt4-main .sec-title, .mt4-why-title, .mt4-bigcta-title {font-size: 32px; letter-spacing: -1.2px;}
	body.page-mt4 .mt4-main .service-apply, body.page-mt4 .mt4-main .mod-nodata, body.page-mt4 .mt4-main .mod-bank, body.page-mt4 .mt4-main .mod-cs {padding: 32px 24px;}
	body.page-mt4 .mt4-main .mod-procedure, body.page-mt4 .mt4-main .nodata-list, body.page-mt4 .mt4-main .mod-quicklink .quicklink-list {grid-template-columns: 1fr;}
	body.page-mt4 .mt4-main .review-summary {flex-direction: column;}
	body.page-mt4 .mt4-main .review-summary-item {border-right: 0; border-bottom: 1px solid var(--mt4-line); width: 100%;}
	body.page-mt4 .mt4-main .review-summary-item:last-child {border-bottom: 0;}
	body.page-mt4 .mt4-main .main-section--review .review-list {grid-template-columns: 1fr;}
	body.page-mt4 .mt4-main .cs-tels {grid-template-columns: 1fr;}
	.mt4-why-card {padding: 44px 28px;}
	.mt4-why-name {font-size: 28px;}
}
/* ============================================================
   BEST 이용후기 (.mod-bestreview)
   - 좌측 정렬 헤더 (민트 리본 BEST 배지 + 이용후기 타이틀)
   - 카드 4열: 원형 썸네일 + 별점 + 상품명 + 마스킹 ID + 점선 + 후기 본문
   ============================================================ */
.main-section--bestreview {padding: 80px 0;}
/* ----- 헤더 (좌측 정렬: 리본 + 텍스트) ----- */
.bestreview-head {display: flex; align-items: center; gap: 28px; margin-bottom: 48px; flex-wrap: wrap;}
.bestreview-title-wrap {display: flex; flex-direction: column; gap: 10px;}
.bestreview-title {font-size: 38px; font-weight: 900; color: #1a1d3e; letter-spacing: -1px; line-height: 1;}
.bestreview-desc {font-size: 15px; color: #6b7280; line-height: 1.5;}
/* ----- BEST 민트 리본 배지 ----- */
.bestreview-badge {position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 132px; padding: 18px 26px; background: linear-gradient(180deg, #8fdcc9 0%, #5dbfa8 100%); border-radius: 16px; box-shadow: 0 14px 24px rgba(93, 191, 168, .4), inset 0 -4px 0 rgba(0, 0, 0, .1), inset 0 2px 2px rgba(255, 255, 255, .35); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .06));}
.bestreview-badge::before, .bestreview-badge::after {content: ""; position: absolute; top: 50%; width: 26px; height: 36px; background: linear-gradient(180deg, #5dbfa8 0%, #4ba991 100%); transform: translateY(-50%); z-index: -1; box-shadow: 0 6px 10px rgba(75, 169, 145, .35);}
.bestreview-badge::before {left: -14px; clip-path: polygon(100% 0, 100% 100%, 0 50%);}
.bestreview-badge::after {right: -14px; clip-path: polygon(0 0, 0 100%, 100% 50%);}
.bestreview-badge-inner {font-size: 28px; font-weight: 900; color: #1a1d3e; letter-spacing: 1.5px;}
/* ----- 카드 리스트 (4열 그리드) ----- */
.bestreview-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0;}
/* ----- 카드 ----- */
.bestreview-card {display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 24px 28px; background: #fff; border-radius: 18px; box-shadow: 0 8px 20px rgba(15, 23, 42, .06); text-align: center; transition: transform .2s ease, box-shadow .2s ease;}
.bestreview-card:hover {transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15, 23, 42, .1);}
/* 원형 썸네일 */
.bestreview-thumb {width: 78px; height: 78px; border-radius: 50%; overflow: hidden; margin: 0; background: #f3f4f6; flex-shrink: 0;}
.bestreview-thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
/* 별점 */
.bestreview-rate {font-size: 22px; color: #ff5b3b; letter-spacing: 2px; line-height: 1; margin-top: 4px;}
.bestreview-rate-off {color: #d1d5db;}
/* 상품명 / 작성자 */
.bestreview-product {font-size: 14px; font-weight: 500; color: #6b7280; line-height: 1.4; margin: 0;}
.bestreview-author {font-size: 14px; font-weight: 700; color: #374151; margin: 0; letter-spacing: .5px;}
/* 점선 구분 + 후기 본문 */
.bestreview-text {width: 100%; padding-top: 18px; margin-top: 4px; border-top: 1px dashed #e5e7eb; font-size: 14px; line-height: 1.7; color: #374151; text-align: left; font-weight: 500;}
@media (max-width: 1023px) {
	.main-section--bestreview {padding: 60px 0;}
	.bestreview-head {gap: 22px; margin-bottom: 36px;}
	.bestreview-title {font-size: 32px;}
	.bestreview-list {grid-template-columns: repeat(2, 1fr); gap: 20px;}
	.bestreview-badge {min-width: 120px; padding: 16px 22px;}
	.bestreview-badge-inner {font-size: 24px;}
}
@media (max-width: 767px) {
	.main-section--bestreview {padding: 48px 0;}
	.bestreview-head {gap: 18px; margin-bottom: 28px;}
	.bestreview-title {font-size: 26px;}
	.bestreview-desc {font-size: 14px;}
	.bestreview-list {grid-template-columns: 1fr; gap: 16px;}
	.bestreview-card {padding: 28px 22px 24px;}
	.bestreview-badge {min-width: 100px; padding: 14px 18px; border-radius: 12px;}
	.bestreview-badge::before, .bestreview-badge::after {width: 20px; height: 28px;}
	.bestreview-badge::before {left: -10px;}
	.bestreview-badge::after {right: -10px;}
	.bestreview-badge-inner {font-size: 20px; letter-spacing: 1px;}
	.bestreview-thumb {width: 70px; height: 70px;}
}
@media (max-width: 479px) {
	.bestreview-head {flex-direction: row; align-items: center;}
	.bestreview-title {font-size: 22px;}
	.bestreview-text {font-size: 13px;}
}
/* ============================================================
   컨텐츠 1 전용 (.mt1-main) — service / tracking-dual / quicklink
   ----------------------------------------------------------------
   ※ 다른 페이지(컨텐츠 2/3/4)에 영향 없음. 본 블록만 수정하면 됨.
   - service     : 공지 + 구매대행 + 배송대행 (hero 영역 위로 48px 침범)
   - tracking-dual: 컴팩트 입력 박스 (위아래 28px)
   - quicklink   : 빠른메뉴 버튼 그리드 (위 16 / 아래 72)
   ============================================================ */

/* service ─ hero 침범량(공지헤더 높이) JS 실측 + 하단 여백 컴팩트
   └ margin-top  : JS(modules.js > syncMt1ServiceOverlap)가 --mt1-service-overlap 변수 주입
   └ JS 미실행/초기 렌더 fallback : 74px (PC 공지헤더 추정 높이)
   └ padding-top : 0 — layout.css(.type-a .main-content > .main-section padding 80px) 무력화
   └ 셀렉터 specificity (0,3,1) : body.page-mt1 .main-content > 패턴으로 layout.css(0,3,0) 오버라이드 */
body.page-mt1 .main-content > .main-section--service {position: relative; z-index: 10; margin-top: calc(var(--mt1-service-overlap, 74px) * -1); padding-top: 0; padding-bottom: 48px;}
/* tracking-dual ─ 입력 박스 컴팩트 (sec-head 없는 섹션이라 padding 축소)
   └ specificity (0,3,1) : body.page-mt1 .main-content > 패턴으로 layout.css(.type-a 0,3,0) 오버라이드
   └ margin-bottom: 0 : layout.css의 .type-a tracking-dual margin-bottom(40/32/24px) 제거 */
body.page-mt1 .main-content > .main-section--tracking-dual {padding: 28px 0; margin-bottom: 0;}
/* quicklink ─ 위는 가깝게 / 아래는 여유
   └ specificity (0,3,1) : body.page-mt1 .main-content > 패턴으로 layout.css(.type-a 0,3,0) 오버라이드 */
body.page-mt1 .main-content > .main-section--quicklink {padding: 16px 0 72px;}
@media (max-width: 1023px) {
	body.page-mt1 .main-content > .main-section--service {padding-bottom: 36px;}
	body.page-mt1 .main-content > .main-section--tracking-dual {padding: 22px 0; margin-bottom: 0;}
	body.page-mt1 .main-content > .main-section--quicklink {padding: 12px 0 56px;}
}
@media (max-width: 767px) {
	/* 모바일 — 히어로와 겹치는 음수 마진 해제하고 공지 위 여백 확보 */
	body.page-mt1 .main-content > .main-section--service {margin-top: 0; padding-top: 24px; padding-bottom: 28px;}
	body.page-mt1 .main-content > .main-section--tracking-dual {padding: 18px 0; margin-bottom: 0;}
	body.page-mt1 .main-content > .main-section--quicklink {padding: 8px 0 40px;}
}
/* ============================================================
   ⑮-4 컨텐츠-1 전용 — 빠른메뉴 split-button 디자인
   - 참고 디자인: 좌측 컬러 블록(아이콘 영역) + 우측 흰색 블록(텍스트 영역) 2분할 버튼
   - 8개 항목 각각 좌측 블록 컬러만 다름 (vibrant 8색)
   - §7-2 정교화 규칙: 기능적 컨텐츠 구역 분할이므로 허용 (장식 accent가 아님)
   - body.page-mt1 스코프 (다른 컨텐츠 영향 없음)
   - 베이스 .mod-quicklink (module.css 391~)는 그대로 유지
   ============================================================ */

/* 그리드 */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-list {grid-template-columns: repeat(4, 1fr); gap: 14px; border: 0; background: transparent;}
/* 버튼 베이스 — 흰색 본문 + 옅은 테두리 + 라운드 + overflow hidden (좌측 컬러 블록을 라운드 안으로 클립) */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-item {
	display: flex;
	align-items: stretch;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* 베이스 .mod-quicklink 의 hover ::before 무력화 (§7-2 — 얇은 세로 accent 지양) */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-item::before {content: none;}
/* hover — lift + 그림자 강화 + 테두리 살짝 진해짐 */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-item:hover {transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .06); border-color: rgba(0, 0, 0, .14);}
/* 좌측 컬러 블록 — 흰색 아이콘 (배경색은 nth-child 분기) */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-icon {
	flex: 0 0 auto;
	width: 52px;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	font-size: 20px;
	color: #fff;
	background: transparent;
	border: 0;
	border-radius: 0;
}
/* 우측 텍스트 블록 — 다크 컬러 텍스트 (화살표 공간 확보 위해 right padding 축소) */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-text {flex: 1; min-width: 0; padding: 14px 8px 14px 16px; font-size: 14px; font-weight: 700; color: var(--c-text); letter-spacing: -.2px;}
/* 화살표(›) — 우측 끝 옅은 회색, hover 시 진해지고 미세 우측 이동 */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-arrow {display: flex; align-items: center; padding-right: 14px; font-size: 18px; color: rgba(0, 0, 0, .28); transition: color .25s ease, transform .25s ease;}
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-item:hover .quicklink-arrow {color: rgba(0, 0, 0, .55); transform: translateX(2px);}
/* ─── 8개 좌측 아이콘 블록 컬러 ─── */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-list > li:nth-child(1) .quicklink-icon {background: #4A7BC8;}
/* 배송운임요금 — 코너플라워 블루 */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-list > li:nth-child(2) .quicklink-icon {background: #E55B6F;}
/* 재고관리안내 — 코랄 핑크 */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-list > li:nth-child(3) .quicklink-icon {background: #2DD4A8;}
/* 노데이터 — 민트 그린 */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-list > li:nth-child(4) .quicklink-icon {background: #F59E0B;}
/* 교환/반품안내 — 앰버 오렌지 */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-list > li:nth-child(5) .quicklink-icon {background: #8B5CF6;}
/* 1:1 문의 — 퍼플 */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-list > li:nth-child(6) .quicklink-icon {background: #06B6D4;}
/* 자주하는질문 — 시안 */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-list > li:nth-child(7) .quicklink-icon {background: #EC4899;}
/* 관세청 통관조회 — 핑크 로즈 */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-list > li:nth-child(8) .quicklink-icon {background: #10B981;}
@media (max-width: 767px) {
	body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-list {grid-template-columns: repeat(2, 1fr); gap: 10px;}
	/* 모바일 — 아이콘(위) + 텍스트(아래) 세로 구조로 전환 (텍스트 줄바꿈 깨짐 방지) */
	body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-item {flex-direction: column; align-items: stretch; text-align: center;}
	body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-icon {width: auto; height: 44px; font-size: 18px;}
	body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-text {flex: none; padding: 10px 10px 12px; font-size: 13px; text-align: center; line-height: 1.35;}
	body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-arrow {display: none;}
}
@media (max-width: 479px) {
	body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-list {grid-template-columns: repeat(2, 1fr);}
}
/* ============================================================
   ⑮-5 컨텐츠-1 전용 — 구매/배송대행 절차 카드 디자인
   - 참고 디자인: STEP 리본 + 큰 회색 번호 + 컬러 아이콘 블록(리본 꼬리)
   - 5단계 카드 가로 배치 (PC 5칸)
   - §7-2 규칙: 컬러 아이콘 블록은 아이콘 표시 기능 → 허용
   - body.page-mt1 스코프 (다른 컨텐츠 영향 없음)
   - 베이스 .mod-procedure (module.css 364~)는 그대로 유지
   ============================================================ */

/* 섹션 head — 카드와의 여백 확보 (베이스 .type-a 32px → 56px) */
body.page-mt1 .main-content > .main-section--procedure .sec-head {margin-bottom: 56px;}
/* 섹션 타이틀 — 잘난체 (§7-3: 컨텐츠 페이지 섹션 대표 타이틀은 자유 선택 가능) + 폰트 확대 */
body.page-mt1 .main-content > .main-section--procedure .sec-title {font-family: "JalnanGo", "Pretendard", sans-serif; font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: -1px;}
/* 섹션 설명 — 프리텐다드 명시 (§7-3: 컨텐츠 본문은 프리텐다드만) + 폰트 확대 */
body.page-mt1 .main-content > .main-section--procedure .sec-desc {font-family: "Pretendard", sans-serif; font-size: 17px; margin-top: 14px;}
/* 그리드 — PC 5칸 유지 */
body.page-mt1 .main-content > .main-section--procedure .mod-procedure {grid-template-columns: repeat(5, 1fr); gap: 16px;}
/* 카드 베이스 — 흰색 + 옅은 테두리 + 그림자, 좌측 정렬, 펄스 애니메이션 제거
   flex column + margin-top:auto 로 아이콘 블록을 카드 하단 테두리에 flush 정렬
   padding-bottom: 0 → 아이콘 블록이 카드 바닥에 딱 붙음 */
body.page-mt1 .main-content > .main-section--procedure .procedure-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px 18px 0;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
	text-align: left;
	animation: none;
	overflow: visible;
	transition: transform .3s ease, box-shadow .3s ease;
}
/* 카드 hover — 살짝 lift */
body.page-mt1 .main-content > .main-section--procedure .procedure-card:hover {transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .10);}
/* 카드 간 chevron(›) 제거 */
body.page-mt1 .main-content > .main-section--procedure .procedure-card::after {content: none;}
/* STEP 리본 — 좌상단 (카드 위로 튀어나옴, 종이 리본 효과) */
body.page-mt1 .main-content > .main-section--procedure .procedure-tab {
	position: absolute;
	top: -22px;
	left: 18px;
	display: inline-block;
	padding: 7px 24px 8px;
	background: var(--proc-color, #88B8B2);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	border-radius: 3px 3px 0 0;
	line-height: 1.2;
	font-family: var(--ff-base);
}
/* STEP 리본 좌측 아래 fold — 어두운 삼각형 (down-left 방향, 종이 접힘 효과) */
body.page-mt1 .main-content > .main-section--procedure .procedure-tab::after {content: ""; position: absolute; left: 0; top: 100%; width: 7px; height: 5px; background: var(--proc-color, #88B8B2); filter: brightness(.65); clip-path: polygon(0 0, 100% 0, 0 100%);}
/* 헤드 영역 — 번호 + 타이틀 가로 배치 (세로 중앙 정렬) + 하단 가는 구분선 */
body.page-mt1 .main-content > .main-section--procedure .procedure-head {display: flex; align-items: center; gap: 14px; margin: 12px 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, .08);}
/* 번호 — 큰 옅은 회색 (베이스 .procedure-num의 절대위치/원형 배경/Times New Roman italic 무력화)
   §7-3 폰트 정책: 프리텐다드만 사용 (var(--ff-base)) */
body.page-mt1 .main-content > .main-section--procedure .procedure-num {
	position: static;
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: transparent;
	color: #B0BEC5;
	font-family: var(--ff-base);
	font-style: normal;
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	letter-spacing: -1.5px;
	border-radius: 0;
	box-shadow: none;
	border: 0;
	transform: none;
	left: auto;
	top: auto;
}
/* 타이틀 — 번호 우측 배치, 최대 2줄 자연 wrap (nowrap 제거), 구분선 제거(헤드 블록 하단으로 이동) */
body.page-mt1 .main-content > .main-section--procedure .procedure-title {flex: 1; min-width: 0; font-size: 20px; font-weight: 800; color: var(--c-text); margin: 0; padding: 0; border: 0; line-height: 1.3; word-break: keep-all;}
/* 본문 설명 — 좌측 정렬, 2줄 클램프 (-webkit-line-clamp) */
body.page-mt1 .main-content > .main-section--procedure .procedure-desc {
	font-size: 14px;
	color: var(--c-text-sub);
	line-height: 1.55;
	margin: 0 0 18px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
/* 컬러 아이콘 블록 — 단순 사각형, 카드 하단 테두리에 flush 정렬
   - margin-top: auto → flex column에 의해 카드 하단으로 밀려남
   - border-radius 4px 4px 0 0 → 상단만 라운드, 하단 sharp로 카드 바닥에 딱 붙음 */
body.page-mt1 .main-content > .main-section--procedure .procedure-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 80px;
	margin: 0;
	margin-top: auto;
	background: var(--proc-color, #88B8B2);
	color: #fff;
	font-size: 34px;
	border-radius: 4px 4px 0 0;
}
/* 하단 어두운 톤 오버레이 ::after 제거 (사각형 단일 톤) */
body.page-mt1 .main-content > .main-section--procedure .procedure-icon::after {content: none;}
/* ─── 5단계별 컬러 (CSS 변수 분기) ─── */
body.page-mt1 .main-content > .main-section--procedure .procedure-card:nth-child(1) {--proc-color: #88B8B2;}
/* 세이지 틸 */
body.page-mt1 .main-content > .main-section--procedure .procedure-card:nth-child(2) {--proc-color: #3DADAB;}
/* 비비드 틸 */
body.page-mt1 .main-content > .main-section--procedure .procedure-card:nth-child(3) {--proc-color: #3F4E5F;}
/* 다크 네이비 */
body.page-mt1 .main-content > .main-section--procedure .procedure-card:nth-child(4) {--proc-color: #EE6F5C;}
/* 코랄 레드 */
body.page-mt1 .main-content > .main-section--procedure .procedure-card:nth-child(5) {--proc-color: #E8A23D;}
@media (max-width: 1023px) {
	body.page-mt1 .main-content > .main-section--procedure .sec-head {margin-bottom: 40px;}
	body.page-mt1 .main-content > .main-section--procedure .sec-title {font-size: 32px;}
	body.page-mt1 .main-content > .main-section--procedure .sec-desc {font-size: 15px; margin-top: 12px;}
	body.page-mt1 .main-content > .main-section--procedure .mod-procedure {grid-template-columns: repeat(3, 1fr); gap: 18px 14px;}
}
@media (max-width: 767px) {
	body.page-mt1 .main-content > .main-section--procedure .sec-head {margin-bottom: 28px;}
	body.page-mt1 .main-content > .main-section--procedure .sec-title {font-size: 26px;}
	body.page-mt1 .main-content > .main-section--procedure .sec-desc {font-size: 14px; margin-top: 10px;}
	/* 2열 배치 + 행 간격 확보(STEP 리본이 위 카드에 겹치지 않도록) + 5번 스텝 가로 1열 */
	body.page-mt1 .main-content > .main-section--procedure .mod-procedure {grid-template-columns: repeat(2, 1fr); gap: 32px 12px;}
	body.page-mt1 .main-content > .main-section--procedure .procedure-card {padding: 24px 16px 0;}
	body.page-mt1 .main-content > .main-section--procedure .procedure-card:nth-child(5) {grid-column: 1 / -1;}
	body.page-mt1 .main-content > .main-section--procedure .procedure-head {gap: 10px; margin: 10px 0 12px; padding-bottom: 10px;}
	body.page-mt1 .main-content > .main-section--procedure .procedure-num {font-size: 30px;}
	body.page-mt1 .main-content > .main-section--procedure .procedure-title {font-size: 16px;}
	body.page-mt1 .main-content > .main-section--procedure .procedure-desc {font-size: 13px;}
	body.page-mt1 .main-content > .main-section--procedure .procedure-icon {width: 68px; height: 62px; font-size: 26px; margin: 0; margin-top: auto;}
	body.page-mt1 .main-content > .main-section--procedure .procedure-tab {padding: 7px 20px 8px;}
}
@media (max-width: 479px) {
	/* 작은 모바일 — 2열 유지, 5번 스텝만 가로 1열 */
	body.page-mt1 .main-content > .main-section--procedure .mod-procedure {grid-template-columns: repeat(2, 1fr); gap: 32px 10px;}
	body.page-mt1 .main-content > .main-section--procedure .procedure-card:nth-child(5) {grid-column: 1 / -1;}
}
/* ============================================================
   ⑮-6 컨텐츠-1 전용 — 이용후기(bestreview) 섹션
   - BEST 배지의 좌우 삼각형(::before/::after)만 제거, 박스 본체는 유지
   - 헤드 레이아웃 : 세로 스택 + 가로 중앙 정렬 (배지 위, 타이틀/설명 아래)
   - 타이틀 잘난체 (§7-3 컨텐츠 페이지 섹션 대표 타이틀 자유) — procedure 섹션과 동일 사이즈
   - 설명 프리텐다드 명시 — procedure 섹션과 동일 사이즈
   - body.page-mt1 스코프 (다른 컨텐츠 영향 없음)
   ============================================================ */

/* BEST 배지 좌우 삼각형(::before/::after)만 숨김 — 박스 본체는 그대로 표시 */
body.page-mt1 .main-content > .main-section--bestreview .bestreview-badge::before,
body.page-mt1 .main-content > .main-section--bestreview .bestreview-badge::after {content: none;}
/* 헤드 레이아웃 — 가로 row (베이스 그대로) + 그룹 가로 중앙 정렬
   → 배지(좌) + 타이틀+설명(우) 가로 배치, 전체 그룹이 가로 중앙 */
body.page-mt1 .main-content > .main-section--bestreview .bestreview-head {justify-content: center;}
/* 타이틀 — 잘난체 + procedure 섹션과 동일 사이즈 (PC 40px) */
body.page-mt1 .main-content > .main-section--bestreview .bestreview-title {font-family: "JalnanGo", "Pretendard", sans-serif; font-size: 40px; font-weight: 400; letter-spacing: -1px; line-height: 1.2;}
/* 설명 — 프리텐다드 명시 + procedure 섹션과 동일 사이즈 (PC 17px) */
body.page-mt1 .main-content > .main-section--bestreview .bestreview-desc {font-family: "Pretendard", sans-serif; font-size: 17px;}
@media (max-width: 1023px) {
	body.page-mt1 .main-content > .main-section--bestreview .bestreview-title {font-size: 32px;}
	body.page-mt1 .main-content > .main-section--bestreview .bestreview-desc {font-size: 15px;}
}
@media (max-width: 767px) {
	body.page-mt1 .main-content > .main-section--bestreview .bestreview-title {font-size: 26px;}
	body.page-mt1 .main-content > .main-section--bestreview .bestreview-desc {font-size: 14px;}
}
/* ============================================================
   ⑮-7 컨텐츠-1 전용 — 출항스케줄(departure) 섹션 배경 구분
   - 섹션에 .main-section--soft (#f7f8fa) 추가됨에 따라
     베이스의 동일 배경 요소(휴무 X 마크, 카드 푸터, 섹션 푸터)가 묻혀 보임 → 구분 처리
   - .departure-foot 의 border-left primary 컬러 accent 는 §7-2 지양 대상 → 제거
   - body.page-mt1 스코프 (다른 컨텐츠 영향 없음)
   ============================================================ */

/* 휴무(X) 마크 배경 — 섹션 bg(#f7f8fa)보다 살짝 진하게 */
body.page-mt1 .main-content > .main-section--departure .departure-mark--x {background: rgba(0, 0, 0, .08);}
/* 카드 푸터 ("휴무 : 토 / 공휴일") — 카드 본체와 동일하게 흰색 */
body.page-mt1 .main-content > .main-section--departure .departure-card-foot {background: #fff;}
/* 섹션 푸터 ("※ 출항 스케줄...") — 흰색 정보 박스 + 사방 옅은 테두리 (§7-2: border-left primary 컬러 accent 제거) */
body.page-mt1 .main-content > .main-section--departure .departure-foot {background: #fff; border: 1px solid rgba(0, 0, 0, .08);}
/* 섹션 푸터 내부 강조 ("마이페이지 → 출항조회") — 굵게만 (강조색 제거) */
body.page-mt1 .main-content > .main-section--departure .departure-foot b {font-weight: 700;}
/* ============================================================
   ⑮-8 컨텐츠-1 전용 — 전체 폰트 가독성 상향 (작은 폰트 +1~2px)
   - 베이스 .mod-* 의 11~14px 작은 폰트를 body.page-mt1 스코프에서 살짝 상향
   - body.page-mt1 스코프 (다른 컨텐츠 영향 없음)
   ============================================================ */

/* 공지/구매/배송 (mod-service) */
body.page-mt1 .main-content > .main-section--service .service-notice-tag {font-size: 14px;}
body.page-mt1 .main-content > .main-section--service .service-notice-link {font-size: 17px;}
body.page-mt1 .main-content > .main-section--service .service-notice-date {font-size: 15px;}
body.page-mt1 .main-content > .main-section--service .service-notice-more {font-size: 16px;}
body.page-mt1 .main-content > .main-section--service .service-apply-desc {font-size: 15px;}
/* 통관스케줄 대시보드 (mod-schedule--dashboard) */
body.page-mt1 .main-content > .main-section--schedule-cal .schedule-dash-status {font-size: 13px;}
body.page-mt1 .main-content > .main-section--schedule-cal .schedule-dash-dow {font-size: 15px;}
body.page-mt1 .main-content > .main-section--schedule-cal .schedule-dash-event-name {font-size: 15px;}
body.page-mt1 .main-content > .main-section--schedule-cal .schedule-dash-event-meta {font-size: 13px;}
body.page-mt1 .main-content > .main-section--schedule-cal .schedule-dash-empty {font-size: 14px;}
body.page-mt1 .main-content > .main-section--schedule-cal .schedule-dash-foot {font-size: 14px;}
/* 출항스케줄 (mod-departure) */
body.page-mt1 .main-content > .main-section--departure .departure-card-flag {font-size: 14px;}
body.page-mt1 .main-content > .main-section--departure .departure-table thead th {font-size: 15px;}
body.page-mt1 .main-content > .main-section--departure .departure-route-name {font-size: 16px;}
body.page-mt1 .main-content > .main-section--departure .departure-route-time {font-size: 13px;}
body.page-mt1 .main-content > .main-section--departure .departure-mark {font-size: 15px;}
body.page-mt1 .main-content > .main-section--departure .departure-card-foot {font-size: 15px;}
body.page-mt1 .main-content > .main-section--departure .departure-foot {font-size: 15px;}
/* 노데이터 (mod-nodata) */
body.page-mt1 .main-content > .main-section--nodata .nodata-count-label {font-size: 15px;}
body.page-mt1 .main-content > .main-section--nodata .nodata-count-num em {font-size: 15px;}
body.page-mt1 .main-content > .main-section--nodata .nodata-head-text {font-size: 16px;}
body.page-mt1 .main-content > .main-section--nodata .nodata-search-input {font-size: 15px;}
body.page-mt1 .main-content > .main-section--nodata .nodata-search-btn {font-size: 14px;}
body.page-mt1 .main-content > .main-section--nodata .nodata-tracking {font-size: 16px;}
body.page-mt1 .main-content > .main-section--nodata .nodata-meta {font-size: 14px;}
/* 이벤트 (mod-event) */
body.page-mt1 .main-content > .main-section--event .event-flag {font-size: 13px;}
body.page-mt1 .main-content > .main-section--event .event-desc {font-size: 16px;}
body.page-mt1 .main-content > .main-section--event .event-card time {font-size: 15px;}
/* 이용후기 카드 본문 (bestreview-card 내부) */
body.page-mt1 .main-content > .main-section--bestreview .bestreview-author {font-size: 15px;}
body.page-mt1 .main-content > .main-section--bestreview .bestreview-text {font-size: 16px;}
/* 입금계좌/고객센터 (mod-bank, mod-cs) */
body.page-mt1 .main-content > .main-section--bank-cs .bank-info {font-size: 15px;}
body.page-mt1 .main-content > .main-section--bank-cs .bank-notice {font-size: 15px;}
body.page-mt1 .main-content > .main-section--bank-cs .cs-tel-label {font-size: 14px;}
body.page-mt1 .main-content > .main-section--bank-cs .cs-hours {font-size: 15px;}
/* 빠른메뉴 (⑮-4 후속, 텍스트 +1px) */
body.page-mt1 .main-content > .main-section--quicklink .mod-quicklink .quicklink-text {font-size: 16px;}
/* 구매/배송대행 절차 STEP 탭 (⑮-5 후속, +1px) */
body.page-mt1 .main-content > .main-section--procedure .procedure-tab {font-size: 13px;}
@keyframes mt3-feature-particle-drift {from {background-position: 0 0, 9px 9px;} to {background-position: -36px 36px, -27px 45px;}}
@keyframes mt3-feature-particle-twinkle {0%, 100% {opacity: 0.55;} 50% {opacity: 1;}}
/* inner 폭 (다른 페이지와 동일 1240/1480) */
body.page-mt4 .mt4-main .inner {width: 1240px; max-width: 100%; margin: 0 auto; padding: 0 20px;}
@media (min-width: 1600px) {body.page-mt4 .mt4-main .inner {width: 1480px;}}
@keyframes freightPulse {0%, 100% {opacity: 1; transform: scale(1);} 50% {opacity: .35; transform: scale(.7);}}
@keyframes freightVoiceScroll {0% {transform: translateX(0);} 100% {transform: translateX(-50%);}}
@keyframes freightSpotPulse {0% {transform: scale(.85); opacity: .8;} 100% {transform: scale(1.3); opacity: 0;}}
@keyframes freightEventPulse {0%, 100% {opacity: 1;} 50% {opacity: .35;}}

/* ============================================================
   카드 스크롤 모션 framework + 섹션 모션 약화
   - JS가 .card-anim + .card-anim-{타입} 클래스를 동적 부여
   - IntersectionObserver 가 .is-visible 토글
   - 섹션 모션은 단순 fade 만 (디테일은 카드 stagger 가 주연)
   ============================================================ */

/* 섹션 모션 — 약하게 fade 만 */
body.page-mt1 .mt1-main .main-section.scroll-anim {opacity: 0; transform: none; filter: none; transition: opacity .35s ease-out;}
body.page-mt1 .mt1-main .main-section.scroll-anim.is-visible {opacity: 1;}

/* 카드 단위 모션 — 12가지 방향/효과 */
body.page-mt1 .card-anim {opacity: 0; transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1); will-change: transform, opacity;}
body.page-mt1 .card-anim-up    {transform: translateY(-20px);}
body.page-mt1 .card-anim-down  {transform: translateY(20px);}
body.page-mt1 .card-anim-left  {transform: translateX(-24px);}
body.page-mt1 .card-anim-right {transform: translateX(24px);}
body.page-mt1 .card-anim-diag-ul {transform: translate(-16px, -16px);}
body.page-mt1 .card-anim-diag-ur {transform: translate(16px, -16px);}
body.page-mt1 .card-anim-diag-dl {transform: translate(-16px, 16px);}
body.page-mt1 .card-anim-diag-dr {transform: translate(16px, 16px);}
body.page-mt1 .card-anim-scale {transform: scale(.88);}
body.page-mt1 .card-anim-rise  {transform: translateY(22px) scale(.96);}
body.page-mt1 .card-anim-pop   {transform: scale(.78);}
body.page-mt1 .card-anim-flip  {transform: perspective(800px) rotateY(14deg);}
body.page-mt1 .card-anim.is-visible {opacity: 1; transform: none;}

/* nth-child 기반 stagger delay (8개 단위 wrap) */
body.page-mt1 .card-anim:nth-child(8n+1) {transition-delay: 0ms;}
body.page-mt1 .card-anim:nth-child(8n+2) {transition-delay: 60ms;}
body.page-mt1 .card-anim:nth-child(8n+3) {transition-delay: 120ms;}
body.page-mt1 .card-anim:nth-child(8n+4) {transition-delay: 180ms;}
body.page-mt1 .card-anim:nth-child(8n+5) {transition-delay: 240ms;}
body.page-mt1 .card-anim:nth-child(8n+6) {transition-delay: 300ms;}
body.page-mt1 .card-anim:nth-child(8n+7) {transition-delay: 360ms;}
body.page-mt1 .card-anim:nth-child(8n)   {transition-delay: 420ms;}

/* 반응형 — 모바일 모션 강도 약화 */
@media (max-width: 767px) {
	body.page-mt1 .card-anim-up, body.page-mt1 .card-anim-down {transform: translateY(12px);}
	body.page-mt1 .card-anim-left, body.page-mt1 .card-anim-right {transform: translateX(14px);}
	body.page-mt1 .card-anim-diag-ul {transform: translate(-10px, -10px);}
	body.page-mt1 .card-anim-diag-ur {transform: translate(10px, -10px);}
	body.page-mt1 .card-anim-diag-dl {transform: translate(-10px, 10px);}
	body.page-mt1 .card-anim-diag-dr {transform: translate(10px, 10px);}
	body.page-mt1 .card-anim-scale {transform: scale(.94);}
	body.page-mt1 .card-anim-rise  {transform: translateY(14px) scale(.97);}
	body.page-mt1 .card-anim-pop   {transform: scale(.88);}
	body.page-mt1 .card-anim-flip  {transform: perspective(800px) rotateY(8deg);}
}

/* 접근성 — prefers-reduced-motion: reduce */
@media (prefers-reduced-motion: reduce) {
	body.page-mt1 .card-anim {opacity: 1 !important; transform: none !important; transition: none !important;}
}


/* ============================================================
   통관스케줄 레이어 팝업 (csched-modal)
   ============================================================ */
.csched-modal {position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;}
.csched-modal[hidden] {display: none;}
.csched-modal-dim {position: absolute; inset: 0; background: rgba(0,0,0,0.5);}
.csched-modal-panel {position: relative; width: 92%; max-width: 720px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.18);}
.csched-modal-head {display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #eee;}
.csched-modal-title {font-size: 16px; font-weight: 700; color: #111; display: inline-flex; align-items: center; gap: 8px;}
.csched-modal-title i {color: #555;}
.csched-modal-close {background: none; border: 0; width: 32px; height: 32px; font-size: 18px; color: #555; cursor: pointer;}
.csched-modal-body {padding: 18px 20px;}
.csched-nav {display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 16px;}
.csched-nav-btn {background: none; border: 0; width: 32px; height: 32px; font-size: 14px; color: #555; cursor: pointer;}
.csched-nav-label {font-size: 16px; font-weight: 700; color: #111;}
.csched-calendar {width: 100%; border-collapse: collapse; table-layout: fixed;}
.csched-calendar th, .csched-calendar td {border: 1px solid #eee; padding: 10px 0; text-align: center; vertical-align: top; height: 70px; font-size: 14px; color: #333;}
.csched-dow {height: 36px; padding: 8px 0; background: #fafafa; font-weight: 600;}
.csched-dow--sun {color: #e74c3c;}
.csched-dow--sat {color: #3498db;}
.csched-day {position: relative;}
.csched-day--other {color: #ccc;}
.csched-day--sun {color: #e74c3c;}
.csched-day--sat {color: #3498db;}
.csched-day--today {background: #eaf3fc;}
.csched-day--has::after {content: ''; display: block; width: 7px; height: 7px; margin: 6px auto 0; border-radius: 50%; background: #3498db;}
.csched-info {margin-top: 16px; padding: 12px 14px; background: #f7f9fc; border-radius: 8px;}
.csched-info-row {font-size: 13px; line-height: 1.6; color: #444;}
.csched-info-row--muted {color: #888;}
.csched-info-label {font-weight: 600;}
.csched-modal-foot {padding: 12px 20px 18px; border-top: 1px solid #eee; font-size: 12px; line-height: 1.7; color: #777;}
.csched-modal-foot p {margin: 0;}

@media (max-width: 768px) {
	.csched-modal-panel {width: 96%;}
	.csched-calendar th, .csched-calendar td {height: 56px; font-size: 13px;}
}
@media (max-width: 480px) {
	.csched-modal-head {padding: 14px;}
	.csched-modal-body {padding: 14px;}
	.csched-modal-foot {padding: 10px 14px 14px;}
	.csched-calendar th, .csched-calendar td {height: 48px; font-size: 12px;}
	.csched-day--has::after {width: 6px; height: 6px;}
}

/* ============================================================
   이벤트 무한 롤링 (CSS-only marquee) — content-1 전용
   ============================================================ */
.mod-event--marquee {position: relative;}
.event-marquee-viewport {overflow: hidden;}
.event-marquee-track {display: flex; gap: 20px; width: max-content; padding: 8px 0; animation: eventMarquee 50s linear infinite;}
.event-marquee-track > .event-card {flex: 0 0 380px;}
.event-marquee-viewport:hover .event-marquee-track {animation-play-state: paused;}
@keyframes eventMarquee {
	0%, 25% {transform: translateX(0);}
	33%, 58% {transform: translateX(-16.666%);}
	66%, 91% {transform: translateX(-33.333%);}
	100% {transform: translateX(-50%);}
}
@media (max-width: 1024px) {
	.event-marquee-track > .event-card {flex: 0 0 320px;}
}
@media (max-width: 768px) {
	.event-marquee-track {gap: 16px; animation-duration: 35s;}
	.event-marquee-track > .event-card {flex: 0 0 260px;}
}
@media (max-width: 480px) {
	.event-marquee-track > .event-card {flex: 0 0 220px;}
}

/* ============================================================
   주인없는 화물 — 내화물 신고 버튼 + 기간 표시
   ============================================================ */
.nodata-period {display: inline-block; margin-left: 8px; padding: 3px 10px; background: #f0f4f9; color: #5a6b7e; font-size: 13px; font-weight: 500; border-radius: 12px; vertical-align: middle;}
.nodata-claim-btn {display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px; background: var(--c-primary, #3d8eb5); color: #fff; border: 0; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, opacity .2s;}
.nodata-claim-btn:hover:not(:disabled) {background: var(--c-primary-dark, #0a3d63);}
.nodata-claim-btn--disabled, .nodata-claim-btn:disabled {background: #d0d5dc; color: #8a8f97; cursor: not-allowed; opacity: 0.65;}
.nodata-claim-btn--disabled:hover, .nodata-claim-btn:disabled:hover {background: #d0d5dc;}

/* === 네이버 블로그·카페 (SVG 통일, 컬러로 구분) === */
.feature-social-svg {width: 60%; height: 60%; display: block; margin: auto;}
.feature-social-link--naver-blog {background: #03c75a; color: #fff;}
.feature-social-link--naver-blog:hover {background: #02a14a;}
.feature-social-link--naver-cafe {background: #2db400; color: #fff;}
.feature-social-link--naver-cafe:hover {background: #259200;}

/* ============================================================
   통관스케줄 팝업 — mt1 Aero Blue 디자인
   ============================================================ */
.csched-modal-panel {border-radius: 16px;}
.csched-modal-head {background: linear-gradient(135deg, #3d8eb5 0%, #0a3d63 100%); border-bottom: 0; color: #fff;}
.csched-modal-title {color: #fff;}
.csched-modal-title i {color: #fff;}
.csched-modal-close {color: #fff;}
.csched-modal-close:hover {color: #cfe7f5;}
.csched-modal-body {padding: 22px 24px;}
.csched-nav-label {color: #0a3d63;}
.csched-nav-btn {color: #3d8eb5; border-radius: 50%; width: 36px; height: 36px;}
.csched-nav-btn:hover {background: rgba(61, 142, 181, 0.1);}
.csched-calendar th, .csched-calendar td {border-color: #e3eef7;}
.csched-dow {background: #f4f9fc; color: #455d72;}
.csched-day {cursor: pointer; transition: background .15s ease, transform .12s ease;}
.csched-day:hover:not(.csched-day--other) {background: #eaf3fc;}
.csched-day--today {background: transparent; position: relative;}
.csched-day--today::before {content: ''; position: absolute; top: 6px; left: 50%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: rgba(61, 142, 181, 0.18); z-index: 0;}
.csched-day--today {color: #0a3d63; font-weight: 700;}
.csched-day--has::after {background: linear-gradient(135deg, #3d8eb5, #0a3d63); width: 8px; height: 8px;}
.csched-day--selected {background: #3d8eb5 !important; color: #fff !important; font-weight: 700;}
.csched-day--selected::after {background: #fff !important;}

/* mt1 디테일 카드 */
.csched-detail--mt1 {margin-top: 18px; padding: 16px 18px; background: #fff; border: 1px solid #e3eef7; border-radius: 12px; box-shadow: 0 4px 12px rgba(10, 61, 99, 0.06);}
.csched-detail-head {display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #eef4f9; margin-bottom: 12px;}
.csched-detail-date {font-size: 15px; font-weight: 700; color: #0a3d63;}
.csched-detail-count {font-size: 12px; padding: 3px 10px; background: #eaf3fc; color: #3d8eb5; border-radius: 12px; font-weight: 600;}
.csched-detail-list {list-style: none; padding: 0; margin: 0;}
.csched-detail-item {display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed #eef4f9;}
.csched-detail-item:last-child {border-bottom: 0;}
.csched-detail-icon {width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; flex-shrink: 0;}
.csched-detail-item--sea .csched-detail-icon {background: #eaf3fc; color: #3d8eb5;}
.csched-detail-item--air .csched-detail-icon {background: #fff4e6; color: #f97316;}
.csched-detail-info {display: flex; flex-direction: column; gap: 2px;}
.csched-detail-name {font-size: 14px; font-weight: 600; color: #0a3d63;}
.csched-detail-meta {font-size: 12px; color: #7a8fa3;}
.csched-detail-empty {text-align: center; padding: 24px 0; color: #97a8b9; font-size: 13px;}
@media (max-width: 480px) {
	.csched-detail-name {font-size: 13px;}
	.csched-detail-meta {font-size: 11px;}
}

/* ============================================================
   이벤트 마퀴 좌우 화살표 — mt1 Blue Fade Style
   ============================================================ */
.mod-event--marquee {position: relative;}
.event-marquee-arrow {position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 16px rgba(10, 61, 99, 0.18); color: #0a3d63; font-size: 14px; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s;}
.event-marquee-arrow:hover {background: linear-gradient(135deg, #3d8eb5, #0a3d63); color: #fff; transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 20px rgba(10, 61, 99, 0.3);}
.event-marquee-arrow--prev {left: 8px;}
.event-marquee-arrow--next {right: 8px;}
.mod-event--marquee:hover .event-marquee-track {animation-play-state: paused;}
@media (max-width: 768px) {
	.event-marquee-arrow {width: 36px; height: 36px; font-size: 12px;}
}

/* === [업데이트] 달력 셀 높이 축소 + 디테일 5개 스크롤 — mt1 === */
.csched-calendar th, .csched-calendar td {height: 58px;}
.csched-detail-list {max-height: 280px; overflow-y: auto; padding-right: 4px;}
.csched-detail-list::-webkit-scrollbar {width: 6px;}
.csched-detail-list::-webkit-scrollbar-track {background: #f0f5f9; border-radius: 3px;}
.csched-detail-list::-webkit-scrollbar-thumb {background: #3d8eb5; border-radius: 3px;}
.csched-detail-list::-webkit-scrollbar-thumb:hover {background: #0a3d63;}
@media (max-width: 768px) {
	.csched-calendar th, .csched-calendar td {height: 48px;}
}
@media (max-width: 480px) {
	.csched-calendar th, .csched-calendar td {height: 42px;}
	.csched-detail-list {max-height: 240px;}
}

/* === [업데이트] mt1 통관스케줄 팝업 — 가로 배열 (좌:달력 / 우:디테일) === */
.csched-modal-panel {max-width: 1040px;}
.csched-modal-body {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); grid-template-areas: "nav detail" "cal detail"; column-gap: 24px; row-gap: 14px;}
.csched-nav {grid-area: nav; padding: 0;}
.csched-calendar {grid-area: cal;}
.csched-detail--mt1 {grid-area: detail; align-self: start; margin-top: 0;}
@media (max-width: 1024px) {
	.csched-modal-panel {max-width: 720px;}
	.csched-modal-body {grid-template-columns: 1fr; grid-template-areas: "nav" "cal" "detail";}
	.csched-detail--mt1 {margin-top: 18px;}
}

/* === [업데이트] mt1 디테일 영역 = 달력 높이 (PC) === */
@media (min-width: 1025px) {
	.csched-detail--mt1 {align-self: stretch; display: flex; flex-direction: column; min-height: 0; max-height: none;}
	.csched-detail--mt1 .csched-detail-head {flex: 0 0 auto;}
	.csched-detail--mt1 .csched-detail-list {flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto;}
	.csched-detail--mt1 .csched-detail-empty {flex: 1 1 auto;}
}

/* === [업데이트] 통관스케줄 팝업 푸터 폰트 13px === */
.csched-modal-foot p {font-size: 13px;}

/* === [업데이트] mt1 전체보기/더보기 버튼화 (sec-more--btn) === */
.sec-more.sec-more--btn {display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 14px; font-weight: 600; color: #3d8eb5; background: #fff; border: 1.5px solid #3d8eb5; border-radius: 8px; transition: all .2s ease; line-height: 1;}
.sec-more.sec-more--btn:hover {background: linear-gradient(135deg, #3d8eb5, #0a3d63); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(61, 142, 181, 0.3);}
.sec-more.sec-more--btn i {font-size: 11px;}

/* === [수정] 디테일 영역이 콘텐츠로 늘어나지 않게 부모 체인 제한 (mt1) === */
.csched-modal-panel {display: flex; flex-direction: column;}
.csched-modal-head, .csched-modal-foot {flex: 0 0 auto;}
.csched-modal-body {flex: 1 1 auto; min-height: 0;}
@media (min-width: 1025px) {
	.csched-modal-body {overflow: hidden;}
	.csched-detail--mt1 {overflow: hidden;}
}

/* === [업데이트] 틱톡 hover 색상 명시 (mt1) === */
.mod-feature .feature-social-link--tiktok:hover {background: #000; color: #fff;}

/* === [업데이트] mt1 소셜 아이콘 — 컬러/크기/툴팁 === */
.feature-social-link {width: 44px; height: 44px; background: #fff; color: #3d8eb5; border: 1.5px solid #cfe3ef; font-size: 16px; transition: all .25s ease; position: relative;}
.feature-social-link::after {content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 5px 10px; background: #0a3d63; color: #fff; font-size: 12px; font-weight: 500; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;}
.feature-social-link::before {content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0a3d63; opacity: 0; pointer-events: none; transition: opacity .2s ease;}
.feature-social-link:hover::after, .feature-social-link:hover::before {opacity: 1;}
.feature-social-link:hover {border-color: transparent;}

/* === [재설계] mt1 이벤트 마퀴 — viewport 4장 + 끊김없는 무한 롤링 === */
.mod-event--marquee {position: relative; padding: 0 56px;}
.event-marquee-viewport {container-type: inline-size; overflow: hidden; width: 100%;}
.event-marquee-track {display: flex; gap: 16px; width: max-content; padding: 4px 0; animation: eventMarquee 24s infinite;}
.event-marquee-track > .event-card {flex: 0 0 calc((100cqi - 48px) / 4); width: calc((100cqi - 48px) / 4);}
.event-marquee-arrow {top: 50%; transform: translateY(-50%);}
.event-marquee-arrow--prev {left: 4px;}
.event-marquee-arrow--next {right: 4px;}
@media (max-width: 1024px) {
	.mod-event--marquee {padding: 0 48px;}
	.event-marquee-track > .event-card {flex: 0 0 calc((100cqi - 32px) / 3); width: calc((100cqi - 32px) / 3);}
}
@media (max-width: 768px) {
	.mod-event--marquee {padding: 0 40px;}
	.event-marquee-track > .event-card {flex: 0 0 calc((100cqi - 16px) / 2); width: calc((100cqi - 16px) / 2);}
}
@media (max-width: 480px) {
	.event-marquee-track > .event-card {flex: 0 0 calc(100cqi - 8px); width: calc(100cqi - 8px);}
}

/* === [수정] mt1 이벤트 카드 — visible 3장 + 정확한 계산 === */
.mod-event--marquee .event-marquee-viewport .event-marquee-track > .event-card {flex: 0 0 calc((100cqi - 32px) / 3); width: calc((100cqi - 32px) / 3);}
@media (max-width: 1024px) {
	.mod-event--marquee .event-marquee-viewport .event-marquee-track > .event-card {flex: 0 0 calc((100cqi - 16px) / 2); width: calc((100cqi - 16px) / 2);}
}
@media (max-width: 768px) {
	.mod-event--marquee .event-marquee-viewport .event-marquee-track > .event-card {flex: 0 0 calc((100cqi - 16px) / 2); width: calc((100cqi - 16px) / 2);}
}
@media (max-width: 480px) {
	.mod-event--marquee .event-marquee-viewport .event-marquee-track > .event-card {flex: 0 0 100cqi; width: 100cqi;}
}

/* === 이벤트 롤링 — 등록수가 한 화면 노출수보다 적을 때 (JS 가 .is-static / .is-single 부여) === */
/* 롤링해도 빈 칸만 흘러가므로 자동롤링·화살표·복제카드를 끄고 가운데 정렬 */
.mod-event--marquee.is-static {padding: 0;}
.mod-event--marquee.is-static .event-marquee-track {width: 100%; justify-content: center; transform: none;}
.mod-event--marquee.is-static .event-marquee-viewport .event-marquee-track > .event-card {flex: 0 1 420px; width: auto;}
.mod-event--marquee.is-static .event-marquee-viewport .event-marquee-track > .event-card.is-clone {display: none;}
.mod-event--marquee.is-static .event-marquee-arrow {display: none;}
/* 1건 — 기본 카드 구성(상단 썸네일 → 하단 설명/기간) 그대로, 폭만 넉넉하게 */
.mod-event--marquee.is-single .event-marquee-viewport .event-marquee-track > .event-card {flex: 0 1 460px; display: block; min-height: 0;}
.mod-event--marquee.is-single .event-thumb {height: auto;}
.mod-event--marquee.is-single .event-info {display: block; padding: 24px 26px;}
.mod-event--marquee.is-single .event-title {font-size: 20px; line-height: 1.35;}
/* 등록건 0 — 카드 없이 화살표만 남는 빈 롤링 숨김 */
.mod-event--marquee.is-empty {padding: 0;}
.mod-event--marquee.is-empty .event-marquee-viewport, .mod-event--marquee.is-empty .event-marquee-arrow {display: none;}
@media (max-width: 768px) {
	/* 좁은 화면 — 카드가 폭을 가득 채우도록만 조정 */
	.mod-event--marquee.is-single .event-marquee-viewport .event-marquee-track > .event-card {flex: 0 1 100%;}
	.mod-event--marquee.is-single .event-info {padding: 20px 22px;}
	.mod-event--marquee.is-single .event-title {font-size: 18px;}
}

/* === [수정] mt1 1개월 뱃지 — 크게 + 파란 그라데이션 알약 === */
.nodata-period {display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 7px 16px; background: linear-gradient(135deg, #3d8eb5 0%, #0a3d63 100%); color: #fff; font-size: 14px; font-weight: 600; border-radius: 999px; vertical-align: middle; box-shadow: 0 4px 12px rgba(10, 61, 99, 0.25); letter-spacing: 0.2px;}
.nodata-period i {font-size: 12px;}

/* === [수정] mt1 — 최근 1개월 | 현재 미확인 화물 6건 (한 줄, 폰트 동일) === */
.nodata-count {display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #0a3d63;}
.nodata-count .nodata-period {display: inline-flex; align-items: center; gap: 6px; margin-left: 0; padding: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; box-shadow: none; border-radius: 0;}
.nodata-count .nodata-period i {font-size: inherit; color: #3d8eb5;}
.nodata-count .nodata-divider {color: #c8d2dc; font-weight: 400;}
.nodata-count .nodata-count-label {font-size: inherit; font-weight: 500;}
.nodata-count .nodata-count-num {font-size: inherit; font-weight: 700; color: #0a3d63;}
.nodata-count .nodata-count-num em {font-size: inherit; font-style: normal; font-weight: 500;}

/* === [추가] mt1 비활성 카드 — 이미지 블러 + 글자 비활성 + 트래킹 마스크 === */
.nodata-card:has(button:disabled) .nodata-thumb {filter: blur(4px) grayscale(0.4); opacity: 0.6;}
.nodata-card:has(button:disabled) .nodata-info {opacity: 0.55;}
.nodata-card:has(button:disabled) .nodata-tracking {color: #94a3b8;}
.nodata-tracking .tracking-mask {filter: blur(3px); letter-spacing: 1.5px; user-select: none; font-weight: 700;}

/* === [수정] mt1 비활성 카드 — figure 선명, 이미지만 블러 === */
.nodata-card:has(button:disabled) .nodata-thumb {filter: none; opacity: 1; overflow: hidden;}
.nodata-card:has(button:disabled) .nodata-thumb img {filter: blur(4px) grayscale(0.4); opacity: 0.6;}

/* ============================================================
   커스텀 스크롤 등장 애니 (JS: content-1.js initScrollReveal)
   - body.reveal-ready 있을 때만 초기 숨김 → JS 미동작/모션감소 시 전부 표시
   - .rv + 방향(.rv-l/r/u/d) → .main-section.is-visible 시 등장
   ============================================================ */
body.reveal-ready .mt1-main .rv {opacity: 0; transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);}
body.reveal-ready .mt1-main .rv-l {transform: translateX(-42px);}
body.reveal-ready .mt1-main .rv-r {transform: translateX(42px);}
body.reveal-ready .mt1-main .rv-u {transform: translateY(-34px);}
body.reveal-ready .mt1-main .rv-d {transform: translateY(34px);}
body.reveal-ready .mt1-main .main-section.is-visible .rv {opacity: 1; transform: none;}
/* 빠른 속도 섹션 (빠른메뉴/절차/노데이터/센터) */
body.reveal-ready .mt1-main .main-section--quicklink .rv,
body.reveal-ready .mt1-main .main-section--procedure .rv,
body.reveal-ready .mt1-main .main-section--nodata .rv,
body.reveal-ready .mt1-main .main-section--center-roll .rv {transition-duration: .4s;}