/* 한글 본문 기본 폰트: NanumSquare Neo (Variable) — 로컬 파일 우선, CDN은 폴백 */
@font-face{
  font-family:'NanumSquareNeo';
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
  src:url('../fonts/NanumSquareNeo-Variable.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo@master/NanumSquareNeo-Variable.woff2') format('woff2');
}
/* ============================================================
   온유 디자인 시스템 토큰 (styleguide.html 참조)
   확정 팔레트 — 키블루 #89BDE0 · 텍스트 #fff/#141414/#4A4A4A/#8A8A8A · 배경 #F5F5F5 · 에러 #EF500B · 성공 #009C7B
   팔레트 외 색은 가이드에서 제외 · 아래 레거시 변수는 팔레트로 매핑(기존 참조 호환)
   ※ 서비스카드 테마색·카카오 옐로·히어로 다크 오버레이 등 '포인트 컬러'는 사용처 유지(추후 정식 추가 예정)
   ============================================================ */
:root{
  /* ===== 브랜드 (키컬러) ===== */
  --c-primary:#89BDE0;               /* blue key color */

  /* ===== 텍스트 (무채색) · 짙음 → 옅음 ===== */
  --c-white:#ffffff;                 /* 반전 텍스트(다크 위) */
  --c-ink:#141414;                   /* 가장 짙은 텍스트 (near-black 통일) */
  --c-ink2:#4a4a4a;                  /* 보조 텍스트 */
  --c-ink3:#8a8a8a;                  /* 흐린 텍스트 */

  /* ===== 배경 ===== */
  --c-bg:#f5f5f5;                    /* 연한 그레이 배경 */

  /* ===== 시맨틱 ===== */
  --c-error:#EF500B;
  --c-success:#009C7B;

  /* ----- 레거시 별칭 → 팔레트 매핑(기존 참조 호환, 가이드 비노출) ----- */
  --c-black:var(--c-ink);            /* near-black 서페이스 = #141414 */
  --c-dark:var(--c-ink);             /* 다크 서페이스(푸터·모바일 캔버스) = #141414 */
  --c-ink4:var(--c-ink3);            /* #aeaeae → #8a8a8a */
  --c-primary-soft:var(--c-primary);
  --c-primary-deep:var(--c-primary); /* 삭제된 짙은 블루 → 키블루 */
  --c-primary-tint:var(--c-primary); /* 삭제된 연블루 → 키블루 */
  --c-border:var(--c-bg);            /* 보더 → 연그레이 */
  --c-border-l:var(--c-bg);
  --c-field:var(--c-bg);             /* 필드/버튼 그레이 → 연그레이 */
  --c-cream:var(--c-bg);
  --c-tertiary:var(--c-bg);
  --c-hero:var(--c-ink);             /* 다크 히어로 서페이스 = #141414 (배경 오버레이 rgba는 개별 유지) */
  --c-kakao:#fee500;                 /* 카카오 브랜드(외부) — 버튼 전용, 팔레트 외 */

  /* ===== 타이포 ===== */
  --font-kr:'NanumSquareNeo','Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-en:'Google Sans Flex','Google Sans','Inter',sans-serif;
  /* 타입 스케일(불안정한 개별 사이즈 정리 기준) */
  --fs-display:clamp(40px,5vw,64px);
  --fs-h1:clamp(30px,4vw,52px);
  --fs-h2:clamp(28px,3vw,40px);   /* 최솟값 24→28: 모바일 고정(--fs-h3 28px)보다 작아져 태블릿에서 타이틀이 역전되던 문제 */
  --fs-h3:28px;
  --fs-h4:clamp(17px,1.6vw,22px);
  --fs-lead:18px;
  --fs-body:16px;
  --fs-body-sm:15px;
  --fs-small:14px;
  --fs-caption:12px;

  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* 스크롤바 공간을 항상 예약 — 인트로(스크롤 잠금)↔메인 전환 시 뷰포트 폭이 변해 레이아웃이 움찔하는 현상 방지 */
html{scrollbar-gutter:stable;}
/* Lenis 전역 부드러운 스크롤 — 권장 스타일 (CSS scroll-behavior:smooth와 충돌 방지) */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}
body{font-family:var(--font-kr);color:var(--c-ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);}
.reveal.visible{opacity:1;transform:none;}
/* 그룹/박스 단계별 등장 — 자식 요소가 하나씩 순서대로(스태거) 부드럽게 (hover transform 보존 위해 animation 사용) */
.reveal-group>*{opacity:0;}
/* 각 박스가 화면 진입 시 개별 등장 — 같은 줄은 열 순서(좌→우)로 스태거 */
.reveal-group>*.in-item{opacity:1;animation:riseIn 1.05s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--gi,0)*.15s);}
@keyframes riseIn{from{opacity:0;transform:translateY(56px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
/* ===== INTRO — 로고 중앙 등장 후, 히어로+메인(#site)이 아래에서 위로 슬라이드하며 인트로를 덮음 ===== */
#intro{position:fixed;inset:0;z-index:9000;background:#f5f5f5;display:flex;align-items:center;justify-content:center;}
#introLogo{height:clamp(34px,4.4vw,52px);width:auto;opacity:0;transform:translateY(16px) scale(.98);
  transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1);will-change:opacity,transform;}
#intro.show #introLogo{opacity:1;transform:none;}
body.intro-lock{overflow:hidden;}
/* #site(히어로+메인)가 인트로 위(z 상위)로 슬라이드하며 덮음 */
/* 초기: 화면 아래로 '즉시'(애니메이션 없이) 숨김 → 내려가는 모습이 보이지 않음 */
body.intro-playing #site{position:relative;z-index:9500;transform:translateY(100vh);transition:none;will-change:transform;}
/* 올라오는 것만 애니메이션 — 인트로를 덮으며 슬라이드 업 */
body.intro-playing.intro-rise #site{transform:translateY(0);transition:transform 1.15s cubic-bezier(.7,0,.16,1);}
/* 라인별 스태거 리빌(metierpress식: 블러+슬라이드업, 스르르) — 전 텍스트 공통 */
.sr-line{display:block;opacity:0;transform:translateY(40px);
  transition:opacity 1.3s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0)*.18s);will-change:opacity,transform;}
.sr.in .sr-line,.sr-line.in{opacity:1;transform:none;}
.kicker{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--c-primary);}

/* image placeholder */
.ph{position:relative;background:linear-gradient(135deg,#e9e5dd,#d9d4c8);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ph::after{content:attr(data-ph);position:absolute;font-family:var(--font-en);font-size:12px;letter-spacing:1px;color:#8c867a;opacity:.85;text-align:center;padding:8px;}
.ph i{font-size:28px;color:#b3ab9c;}

/* ===== GNB ===== */
.gnb{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:23px 64px;opacity:0;transform:translateY(-16px);
  transition:background .35s ease,padding .35s ease,box-shadow .35s ease,opacity 1.1s ease .1s,transform 1.1s cubic-bezier(.16,1,.3,1) .1s;}
body.ready .gnb{opacity:1;transform:none;}
.gnb .logo,.gnb-menu a,.gnb-toggle{opacity:0;transform:translateY(-10px);transition:color .35s ease,opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1);}
body.ready .gnb .logo,body.ready .gnb-menu a,body.ready .gnb-toggle{opacity:1;transform:none;}
body.ready .gnb .logo{transition-delay:.25s;}
body.ready .gnb-menu a:nth-child(1){transition-delay:.34s;}
body.ready .gnb-menu a:nth-child(2){transition-delay:.42s;}
body.ready .gnb-menu a:nth-child(3){transition-delay:.50s;}
body.ready .gnb-menu a:nth-child(4){transition-delay:.58s;}
body.ready .gnb-toggle{transition-delay:.34s;}
/* 스크롤 시: 높이 72px(로고26+상하23) + 투명 블러 글래스, 텍스트 흰색 */
.gnb.scrolled{padding:23px 64px;background:rgba(255,255,255,.08);box-shadow:none;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);}
/* 화이트(밝은) 섹션 위에 있을 때만 흰 배경 + 다크 텍스트 */
.gnb.scrolled.on-light{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--c-border-l);}
.logo{display:flex;align-items:center;}
.logo-img{height:26px;width:auto;display:block;filter:brightness(0) invert(1);transition:filter .35s ease,height .35s ease;}
.gnb.scrolled .logo-img{height:26px;}                    /* 글래스: 로고 흰색 유지 */
.gnb.scrolled.on-light .logo-img{filter:none;}           /* 화이트 섹션: 컬러 로고 */
.gnb-menu{display:flex;gap:44px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.gnb-menu a{font-family:var(--font-en);font-size:15px;font-weight:600;color:#fff;transition:color .35s ease,opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1);}
.gnb.scrolled.on-light .gnb-menu a{color:var(--c-ink);}   /* 화이트 섹션에서만 다크 텍스트(그 외엔 흰색 유지) */
/* 1뎁스 hover — ogaki식 라인-마스크 롤업: 텍스트가 위로 롤업되며 동일 복제본이 아래에서 올라와 교체
   (in-flow flex 컬럼 + 고정높이 overflow:hidden — 모든 브라우저에서 복제 라인이 확실히 clip됨) */
.roll{display:inline-flex;flex-direction:column;height:1.25em;line-height:1.25em;overflow:hidden;vertical-align:top;}
.roll span{flex:0 0 auto;display:block;transition:transform .42s cubic-bezier(.7,0,.16,1);}
.gnb-item:hover .roll span{transform:translateY(-100%);}
/* 1뎁스 chevron — 2뎁스(mega)가 있는 메뉴(Company·Service·Insights = data-menu 보유)에만 표시.
   Contact(js-contact, data-menu 없음)는 제외. mask+currentColor로 텍스트 색(흰↔다크) 자동 추종. 메인·서브 GNB 공통 */
.gnb-menu a.gnb-item{display:inline-flex;align-items:center;gap:6px;}
.gnb-item[data-menu]::after{content:"";flex:0 0 auto;width:16px;height:16px;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5a1.993 1.993 0 0 1-1.414-.585L5.293 9.621 6.707 8.207 12 13.5l5.293-5.293 1.414 1.414-5.293 5.293A1.993 1.993 0 0 1 12 15.5Z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5a1.993 1.993 0 0 1-1.414-.585L5.293 9.621 6.707 8.207 12 13.5l5.293-5.293 1.414 1.414-5.293 5.293A1.993 1.993 0 0 1 12 15.5Z'/%3E%3C/svg%3E") no-repeat center/contain;}
.gnb-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;line-height:0;color:#fff;}
.gnb-burger{display:block;}
.gnb-x{display:none;}   /* 메뉴 열림 시 햄버거 대신 노출(동그라미 배경 없이 X 아이콘만) */
.gnb-burger line,.gnb-x line{stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.gnb.scrolled.on-light .gnb-toggle{color:var(--c-ink);}
/* 모바일 메뉴 열림: 로고 숨김, 햄버거는 흰 배경 위에서 다크, 본문 스크롤 잠금 */
body.m-open{overflow:hidden;}
/* 메뉴 열림 시 헤더 배경·1px 라인 완전 제거 — .gnb.scrolled.on-light(특이성 높음)까지 확실히 덮음(메인에서 스크롤 후 열면 1px 라인 남던 문제) */
body.m-open .gnb,body.m-open .gnb.scrolled,body.m-open .gnb.scrolled.on-light{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
body.m-open .gnb .logo{opacity:0;pointer-events:none;transition:opacity .3s ease;}
body.m-open .gnb-toggle{color:var(--c-ink);}
body.m-open .gnb-burger{display:none;}   /* 메뉴 열림: 햄버거 → X 아이콘 스왑 */
body.m-open .gnb-x{display:block;}

/* ===== GNB 2뎁스 메가바 (Figma: 라이트블루 풀폭, hover 시 드롭다운) ===== */
.gnb-mega{position:absolute;top:100%;left:0;right:0;background:var(--c-primary);
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .5s cubic-bezier(.7,0,.16,1),opacity .3s ease;pointer-events:none;box-shadow:0 12px 24px rgba(0,0,0,.08);}
.gnb.mega-open .gnb-mega{max-height:80px;opacity:1;pointer-events:auto;}
.mega-inner{position:relative;height:56px;}
.mega-set{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(22px,3vw,48px);
  opacity:0;visibility:hidden;transition:opacity .3s ease;}
.mega-set.active{opacity:1;visibility:visible;}
.mega-set a{position:relative;font-family:var(--font-kr);font-size:15px;font-weight:500;color:#fff;letter-spacing:-.3px;
  transition:opacity .25s ease,font-weight .2s ease;white-space:nowrap;}
/* 밑줄: 좌→우로 쓰윽 그려지는 모션(모바일 메뉴와 동일 컨셉) — text-decoration 즉시표시 대신 ::after scaleX */
.mega-set a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.7,0,.16,1);pointer-events:none;}
.mega-set a:hover{opacity:.9;font-weight:700;}
.mega-set a:hover::after,.mega-set a.current::after{transform:scaleX(1);} /* hover 및 선택된(현재 페이지) 2뎁스 */
.mega-set a.current{font-weight:700;}

/* ===== 모바일 메뉴 오버레이 (Figma: 흰 배경·가운데 정렬·섹션 구분선·선택 항목 밑줄) ===== */
.m-menu{position:fixed;inset:0;z-index:95;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;
  visibility:hidden;clip-path:inset(0 0 100% 0);   /* 흰 프레임을 위에서 아래로 스크럼(와이프)하며 등장 */
  transition:clip-path .6s cubic-bezier(.7,0,.16,1),visibility .6s;}
.m-menu.open{visibility:visible;clip-path:inset(0 0 0 0);}
.m-menu-inner{max-width:680px;margin:0;padding:64px 32px 72px 52px;text-align:left;}   /* 상단은 헤더(우측 햄버거) 아래부터, 좌측 정렬 / 좌측 padding 52px 고정 */
.m-sec{text-align:left;margin-bottom:20px;
  opacity:0;transform:translateY(28px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.m-sec:last-child{margin-bottom:0;}
.m-menu.open .m-sec{opacity:1;transform:none;}
.m-menu.open .m-sec:nth-child(1){transition-delay:.14s;}
.m-menu.open .m-sec:nth-child(2){transition-delay:.22s;}
.m-menu.open .m-sec:nth-child(3){transition-delay:.30s;}
.m-menu.open .m-sec:nth-child(4){transition-delay:.38s;}
.m-cat{font-family:var(--font-en);font-size:32px;font-weight:500;color:#141414;letter-spacing:-.5px;line-height:1.3;margin-bottom:0;}
/* 아코디언 토글(1뎁스) — 버튼 리셋 + chevron, 텍스트 우측에 아이콘 */
.m-toggle{display:inline-flex;align-items:center;gap:10px;width:auto;background:none;border:0;padding:8px 0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.m-chev{position:relative;display:inline-flex;width:28px;height:28px;flex:0 0 auto;color:#141414;transition:transform .42s cubic-bezier(.7,0,.16,1);}
.m-chev svg{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .32s ease;}   /* 두 아이콘 겹쳐 크로스페이드 */
.m-chev .ic-minus{opacity:0;}   /* 기본(접힘): plus 노출 */
.m-sec.open .m-chev{transform:rotate(180deg);}   /* 펼침/접힘 시 아이콘이 회전하면서 전환 */
.m-sec.open .m-chev .ic-plus{opacity:0;}   /* 펼침: plus 페이드아웃 */
.m-sec.open .m-chev .ic-minus{opacity:1;}   /* 펼침: minus 페이드인 */
/* 2뎁스 펼침/접힘 — grid-rows 0fr↔1fr 로 높이 모션(콘텐츠 높이 자동) */
.m-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.7,0,.16,1);}
.m-sub-in{overflow:hidden;min-height:0;padding-top:4px;}
.m-sec.open .m-sub{grid-template-rows:1fr;}
.m-sec a{display:block;width:max-content;max-width:100%;position:relative;font-family:var(--font-kr);font-size:15px;font-weight:400;color:#141414;letter-spacing:-1.2px;line-height:1.5;padding:7px 0;
  transition:opacity .2s ease;}
.m-sec a:active{opacity:.55;}
/* 2뎁스 메뉴 hover/선택 시 텍스트 하단 밑줄이 좌→우로 그려지는 모션 (PC GNB 2뎁스와 동일 컨셉) */
.m-sec a:not(.m-cat)::after{content:"";position:absolute;left:0;bottom:5px;height:1.5px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:left center;transition:transform .42s cubic-bezier(.7,0,.16,1);pointer-events:none;}
.m-sec a:not(.m-cat):hover::after,.m-sec a:not(.m-cat).current::after{transform:scaleX(1);} /* hover 및 선택된(현재 페이지) 메뉴 */
/* Contact: 하위 없는 단독 타이틀 링크 — 탭 시 컨택 드로어 오픈 */
.m-sec a.m-cat{font-family:var(--font-en);font-size:32px;font-weight:500;color:#141414;letter-spacing:-.5px;line-height:1.3;padding:8px 0;margin-bottom:0;}

/* ===== HERO (fluid.glass-style 스크롤 핀) ===== */
/* contain:paint — 히어로(sticky·300vh 핀)를 자기 박스 안으로 페인트 격리.
   Contact 드로어 닫힘 시 lenis.start()가 스크롤을 재동기화하면서 sticky 히어로가 한두 프레임 엉뚱한 위치에
   리페인트되어(scrollY는 그대로) 아래 섹션 위로 히어로가 번쩍 나타났다 사라지던 버그를 막는다. */
.hero{position:relative;height:300vh;background:#0a1419;contain:paint;}
.hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;color:#fff;}
.hero-media{position:absolute;inset:-3% -1%;z-index:1;}
/* 배경은 스크롤과 무관하게 자동으로 천천히 줌인/아웃(Ken Burns) */
.hero-media img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1);}   /* 시작부터 화면을 꽉 채움(검정 프레임 없음) → 인트로 등장 시 JS가 .hzoom 부여 */
@keyframes heroZoom{from{transform:scale(1.04);}to{transform:scale(1.18);}}
/* 히어로 이미지: 작게 시작해 하나의 모션으로 쭉 스무스하게 확대(.hzoom) → 끝나도 멈추지 않고 계속 서서히 확대(.hdrift) */
@keyframes heroReveal{from{transform:scale(1);}to{transform:scale(1.28);}}
@keyframes heroDrift{from{transform:scale(1.28);}to{transform:scale(1.49);}}
.hero-media img.hzoom{animation:heroReveal 13.3s cubic-bezier(.22,.55,.4,1) forwards;}   /* 등장부터 스무스하게 확대 */
.hero-media img.hdrift{animation:heroDrift 26s ease-in-out infinite alternate;}   /* 리빌 종료(1.28)에서 이어받아 서서히 계속 확대 */
.hero-ov{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(10,18,28,.5),rgba(10,18,28,.22) 40%,rgba(10,18,28,.72));transform:translateZ(0);will-change:transform;}   /* 자체 합성 레이어로 승격 → 이미지 레이어 생성 시 dim이 잠깐 사라지는 번쩍임 방지(모바일) */
.hero-inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
/* 타이틀 A/B를 같은 칸에 겹쳐 스택 — 스크롤에 따라 크로스페이드 */
.hero-titles{display:grid;justify-items:center;align-items:center;padding:0 24px;}
.hero-title{grid-area:1/1;font-size:clamp(30px,4.4vw,52px);font-weight:700;line-height:1.4;letter-spacing:-1px;will-change:transform,opacity;}
.hero-prologue{position:absolute;left:0;right:0;bottom:12vh;z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;}
.hero-prologue .kicker{color:var(--c-primary-soft);margin-bottom:14px;}
.hero-prologue p{font-size:15px;line-height:22px;color:rgba(255,255,255,.92);max-width:780px;padding:0 24px;}
.hero-prologue .em{font-weight:800;}
.hero-br-m{display:none;}   /* Hero 프롤로그 모바일 전용 줄바꿈(기본 숨김, ≤600px에서만 노출) */
.story-br-m{display:none;}   /* ON·U STORY 모바일 전용 줄바꿈(기본 숨김, ≤600px에서만 노출) */
.cta-br-m{display:none;}   /* 상담(CTA) 카피 모바일 전용 줄바꿈(기본 숨김, ≤600px에서만 노출) */
.hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--font-en);font-size:10px;letter-spacing:2.5px;}
.hero-scroll .line{width:1px;height:30px;background:#fff;animation:scrollPulse 2s ease-in-out infinite;}
@keyframes scrollPulse{0%,100%{transform:scaleY(1);opacity:.5;}50%{transform:scaleY(.5);opacity:1;}}

/* ===== section heading ===== */
.sec-head{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px;}
.sec-title{font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.45;letter-spacing:-.5px;}

/* ===== SERVICES ===== */
.services{padding:140px 64px 130px;background:#fff;}
.svc-grid{max-width:1060px;margin:60px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
/* 카드: 상단 컬러밴드(타이틀) + 하단 이미지(약 65%) — Figma 디자인 */
.svc-card{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease;}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.1);}
.svc-card .t{padding:32px;font-size:17px;font-weight:600;letter-spacing:-.3px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.svc-plus{flex:0 0 auto;width:24px;height:24px;display:inline-flex;transition:transform .42s cubic-bezier(.7,0,.16,1);}   /* 모바일 GNB 플러스와 동일한 회전 이징 */
.svc-plus svg{width:100%;height:100%;display:block;}
.svc-card:hover .svc-plus{transform:rotate(180deg);}   /* hover 시 빙글 회전 */
.svc-img{margin-top:auto;width:100%;height:65%;overflow:hidden;}
.svc-img img{width:100%;height:100%;object-fit:cover;display:block;}
.svc-amber{background:#d4a574;color:#4a3318;}
.svc-cream{background:#f0e6dc;color:#4a3826;}
.svc-navy{background:#2c3e50;color:#fff;}
.svc-bluegray{background:#b5c7d3;color:#2b5673;}
.svc-green{background:#87a96b;color:#1e4611;}
.svc-black{background:#141414;color:#fff;}

/* ===== STORY ===== */
.story{padding:150px 64px;background:#fff;text-align:center;}
.story .sec-title{margin-top:24px;}
/* STORY 전용: 6줄(kicker→제목→문단) 연속 스태거로 위→아래 부드러운 캐스케이드 */
.story .sr-line{transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0)*.11s);}
.story-paras{max-width:860px;margin:56px auto 0;display:flex;flex-direction:column;gap:36px;}
.story-paras p{font-size:clamp(16px,1.5vw,19px);line-height:1.9;color:var(--c-ink2);}
.story-paras .hl{color:var(--c-primary);font-weight:600;}

/* ===== STRENGTHS / APPROACH (풀블리드 이미지 위 텍스트 오버레이 핀 스크롤) ===== */
.approach-head{padding:80px 64px 40px;text-align:center;background:#fff;flex:0 0 auto;}
.approach{position:relative;height:auto;background:#fff;}/* 핀 해제 — 일반 페이지 스크롤. 원칙 전환은 좌우 화살표·스와이프로만(PC·태블릿·모바일 공통) */
/* 타이틀(상단 고정) + 이미지 카드(하단 채움)를 한 몸으로 핀 */
.approach-sticky{position:relative;height:auto;overflow:hidden;background:#fff;display:block;}
/* 콘텐츠 영역: 타이틀 아래 남은 높이를 이미지 카드가 채움(좌우 여백 + 라운드) */
.approach-body{position:relative;display:block;padding:0 clamp(20px,6.9vw,100px) 60px;}
/* 이미지 카드 — 단일 배경 이미지 위에 타이틀/카피 오버레이 */
.ap-scene{position:relative;height:70vh;min-height:460px;max-height:680px;width:100%;max-width:1240px;margin:0 auto;border-radius:16px;overflow:hidden;background:#0a1419;
  --ap-x:clamp(40px,6.4vw,80px);}   /* 핀 해제 후 고정 높이 카드. 메뉴 막대기 좌측 기준선(--ap-x) — 메뉴 텍스트/하단 카피 모두 이 값 기준 정렬 */
.ap-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;animation:heroZoom 24s ease-in-out infinite alternate;}
.ap-scrim{position:absolute;inset:0;background:rgba(0,0,0,.3);}
/* 하단 블러 밴드 — 카피가 놓이는 영역 */
.ap-band{position:absolute;left:0;right:0;bottom:0;height:176px;background:rgba(33,35,37,.1);
  -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);}
/* 좌상단 4개 타이틀 리스트 — 스크롤에 따라 하나씩 활성(흰색+파란 세로바), 나머지는 반투명 */
.ap-titles{position:absolute;left:var(--ap-x);top:80px;bottom:auto;z-index:2;
  list-style:none;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;}   /* 상단 80px 고정 — 씬 높이(뷰포트) 변화와 무관하게 위치 고정(PC/태블릿/모바일 동일) */
.ap-title{position:relative;font-family:var(--font-kr);font-size:clamp(22px,2.8vw,36px);font-weight:300;line-height:1.4;cursor:pointer;
  color:#fff;padding-left:11px;transition:color .55s ease,font-weight .55s ease;}   /* 막대기3px + 간격8px = 11px */
.ap-title::before{content:"";position:absolute;left:0;top:50%;width:3px;height:1.05em;background:var(--c-primary);
  transform:translateY(-50%) scaleY(0);transform-origin:center;opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s ease;}
.ap-title.active{color:var(--c-primary);font-weight:600;}
.ap-title.active::before{opacity:1;transform:translateY(-50%) scaleY(1);}
/* 좌하단 활성 카피 — 같은 자리에 겹쳐 크로스페이드 + 줄별 스태거(.sr-line) */
.ap-copies{position:absolute;left:calc(var(--ap-x) + 25px);right:clamp(32px,6vw,80px);bottom:0;height:176px;z-index:2;}   /* 메뉴 텍스트 좌측과 동일선(--ap-x + padding25) */
.ap-copy{position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;visibility:hidden;
  transition:opacity .5s ease,visibility .5s;display:flex;flex-direction:column;justify-content:center;gap:8px;color:#fff;}
.ap-copy.in{opacity:1;visibility:visible;}
.ap-copy-title{display:none;}
/* 강조 22px regular / 설명 18px light — 하단 220px 블러 밴드 안에 들어옴 */
.ap-em{font-size:16px;font-weight:600;color:#fff;line-height:1.6;}
.ap-desc{font-size:14px;font-weight:300;color:#fff;line-height:17.6px;max-width:560px;display:flex;flex-direction:column;gap:8px;word-break:keep-all;}
.ap-dline{display:block;}
/* 좌우 이동 화살표 — 데스크톱(>1024) 숨김, 모바일·태블릿에서만 노출 */
.ap-nav{display:flex;position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:0;
  background:rgba(255,255,255,.12);cursor:pointer;padding:0;
  align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .3s ease;}
.ap-nav img{width:auto;height:22px;display:block;filter:brightness(0) invert(1);}   /* 관세사 팝업과 동일 아이콘 → 흰색 */
.ap-nav:active{background:rgba(255,255,255,.22);}
.ap-prev{left:12px;}
.ap-next{right:12px;}

/* ===== CONCLUSION ===== */
.conclusion{padding:140px 64px 60px;text-align:center;background:#fff;}/* 하단 60 + team 상단 40 = 타이틀↔썸네일 간격 100px */
.conclusion .small{font-size:16px;color:var(--c-ink3);margin-bottom:18px;}
.conclusion .big{font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.5;letter-spacing:-.5px;}

/* ===== TEAM ===== */
.team{padding:40px 0 140px;background:#fff;}
/* coverflow 캐러셀 — 가운데 카드(is-active) 강조, 양옆은 축소·반투명 */
.team-carousel{position:relative;overflow:hidden;padding:0;touch-action:pan-y;}   /* 세로 스크롤은 허용, 가로 제스처는 JS 스와이프로 처리(모바일 손가락 좌우 슬라이드) */   /* 상단 패딩 0 → 텍스트↔썸네일 간격 = conclusion 하단60 + team 상단40 = 100px */
.team-track{position:relative;width:100%;}                 /* 높이는 JS가 카드 높이로 지정 */
/* 카드는 절대배치 후 JS가 거리별 transform(위치·확대)을 계산 → 모든 시각적 간격을 균등하게 유지 */
/* 중심(활성) 카드 = 360×480(최대), 양옆 카드는 중심 기준 0.84로 축소(JS transform) */
.member{position:absolute;left:50%;top:0;z-index:1;width:360px;height:480px;border-radius:16px;overflow:hidden;background:var(--c-black);
  cursor:pointer;transform:translateX(-50%) scale(.84);will-change:transform;
  transition:transform .7s cubic-bezier(.16,1,.3,1);}
.member.is-active{cursor:default;}                          /* 확대·위치는 JS transform으로 처리 */
.team-track.no-anim .member{transition:none;}              /* 무한 루프 재정렬 시 순간 이동 */
/* 7개 인디케이터 — 활성은 진한 알약, 나머지는 회색 점 */
.team-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:40px;}
.team-dot{position:relative;overflow:hidden;width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#d2cfc8;cursor:pointer;
  transition:width .45s cubic-bezier(.16,1,.3,1),background .35s ease;}
.team-dot::after{content:"";position:absolute;left:0;top:0;height:100%;width:0;border-radius:inherit;background:#89BDE0;pointer-events:none;}
.team-dot:hover{background:#b3afa6;}
.team-dot.is-active{width:42px;background:#e0ddd5;}                 /* 활성=밝은 트랙 */
.team-dot.is-active::after{width:calc(var(--p,0)*100%);}           /* 진행 채움 — JS가 --p(0~1) 갱신 */
.member img{-webkit-user-drag:none;user-select:none;}
.member-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 1.1s cubic-bezier(.16,1,.3,1);will-change:transform;}
/* 하단 텍스트 가독성용 dimmed 그라데이션(사진 위·이름/역할 아래). hover 시엔 오버레이가 덮음 */
.member-scrim{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.42) 55%,rgba(0,0,0,0));pointer-events:none;transition:opacity .45s ease;}
.member-info{position:absolute;left:22px;right:22px;bottom:18px;display:flex;flex-direction:column;gap:6px;transition:opacity .45s ease;}
.member .name{font-size:18px;font-weight:800;color:#FFFFFF;line-height:1.6;}
.member .role{font-size:15px;font-weight:400;color:var(--c-ink3);line-height:1.6;}
/* hover 시 #89BDE0 배경 오버레이 + 상세 이력 노출 */
.member-overlay{position:absolute;inset:0;border-radius:16px;background:#89BDE0;backdrop-filter:blur(18.75px);-webkit-backdrop-filter:blur(18.75px);opacity:0;transition:opacity .5s ease;pointer-events:none;}
@media(hover:hover){   /* hover 이력 상세는 마우스 기기에서만 — 모바일/터치는 탭 시 한마디 팝업만 노출 */
.member.is-active:hover .member-overlay{opacity:1;}
.member.is-active:hover .member-info{opacity:0;}
.member.is-active:hover .member-scrim{opacity:0;}
}
.member-detail{position:absolute;inset:0;padding:69px 52px;display:flex;flex-direction:column;justify-content:flex-start;gap:16px;color:#fff;opacity:0;transition:opacity .5s ease .05s;pointer-events:none;}
@media(hover:hover){.member.is-active:hover .member-detail{opacity:1;}}
.member-detail-head{display:flex;flex-direction:column;gap:6px;}
.member-detail .name{font-size:22px;font-weight:800;color:#fff;line-height:1.6;}
.member-detail .role{font-size:14px;font-weight:700;color:#fff;line-height:1.6;}
.member-detail .career{font-size:14px;font-weight:400;line-height:26px;color:#fff;letter-spacing:-0.5px;}
.member-detail .career p{margin:0;}
/* 우측 하단 화살표 링크 아이콘 (hover 시 오른쪽으로 툭툭) */
.member-detail-link{position:absolute;right:24px;bottom:25px;width:36px;height:36px;pointer-events:none;cursor:pointer;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");}
@media(hover:hover){.member.is-active:hover .member-detail-link{pointer-events:auto;}}
.member-detail-link:hover{animation:arrowSpring 1.1s cubic-bezier(.34,1.56,.64,1) infinite;}
@keyframes arrowSpring{0%,100%{transform:translateX(0);}50%{transform:translateX(7px);}}
/* 모바일·태블릿(마우스 없는 기기) 전용 탭 화살표 — '탭하면 한마디가 있다'를 알린다.
   위의 .member-detail-link 를 재사용하지 않는 이유: 그건 .member-detail 안에 있어 닫힘 상태에선 opacity:0 이고,
   PC 에서는 hover 시 맨파워 페이지로 가는 다른 용도다. 건드리면 데스크톱 동작이 바뀐다.
   탭 처리는 캐러셀 pointerup 핸들러가 이미 '활성 카드 → 한마디 팝업'으로 하므로 pointer-events 는 넘긴다(JS 무변경). */
.member-tap-arrow{display:none;}
@media(hover:none){
  .member.is-active .member-tap-arrow{display:block;position:absolute;right:24px;bottom:25px;width:36px;height:36px;z-index:2;pointer-events:none;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");}
}

/* ===== 관세사 한마디 레이어 팝업 (GNB 위 z-index:300 / dimmed = contact 드로어와 동일 rgba(0,0,0,.7)) ===== */
body.mpop-open{overflow:hidden;}
.mpop{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
  /* 카드 폭·화살표 간격을 뷰포트에 대해 '연속'으로 정의 → 어떤 해상도 경계에서도 팝업 크기가 튀지 않음 */
  --mpop-w:min(1136px, calc(100vw - clamp(116px, calc(100vw - 800px), 460px)));   /* 폰 100vw-116 → (중간 800 고정) → PC min(1136,100vw-460) 매끄럽게 연결 */
  --mpop-gap:clamp(6px, calc(6px + (100vw - 916px) * 0.2265), 160px);              /* 카드↔화살표 간격: 폰 6px → PC 160px 연속 증가 */
}
.mpop.open{opacity:1;visibility:visible;}
.mpop-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);}
.mpop-card{position:relative;z-index:1;width:var(--mpop-w);max-height:88vh;overflow:auto;touch-action:pan-y;background:#fff;border-radius:12px;
  padding:clamp(32px,6vw,64px) clamp(24px,5vw,64px) clamp(34px,6vw,66px);display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center;   /* 상단 대비 하단 +2px → quote 글자 상단 여백(7px) 보정, 상/하 시각 여백 일치 */
  transform:translateY(16px);transition:transform .4s cubic-bezier(.16,1,.3,1);}
.mpop.open .mpop-card{transform:none;}
.mpop-quote-wrap{display:flex;flex-direction:column;align-items:center;}
.mpop-qmark{line-height:0;margin-bottom:8px;}
.mpop-qmark img{width:clamp(40px,4vw,52px);height:auto;display:block;}
.mpop-quote{color:#4a4a4a;font-size:clamp(22px,3vw,40px);line-height:1.55;font-weight:400;word-break:keep-all;min-height:calc(1.55em * 2);display:flex;flex-direction:column;justify-content:center;}   /* 항상 2줄 높이 예약 → 팝업 프레임 크기 고정(1줄 문구도 동일 크기) */
.mpop-profile{display:flex;flex-direction:column;align-items:center;gap:20px;}
/* 프로필(사진·이름·역할) 스태거 페이드업 — 서브페이지(.mp-quote-profile)와 동일. 텍스트 .sr-line 다음 순번(--i)으로 이어 등장 */
.mpop-profile>*{opacity:0;transform:translateY(40px);transition:opacity 1.3s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*.18s);will-change:opacity,transform;}
.mpop-profile.in>*{opacity:1;transform:none;}
.mpop-photo{width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--c-black);}
.mpop-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.mpop-name{color:#141414;font-size:clamp(20px,2vw,28px);font-weight:800;letter-spacing:-1.2px;}
.mpop-role{color:#737373;font-size:clamp(15px,1.4vw,18px);letter-spacing:-1.2px;margin-top:-18px;min-height:1.6em;}   /* 이름과의 행간(profile flex-gap 20 상쇄) / 역할 없는 관세사도 한 줄 예약 → 프레임 크기 고정 */
.mpop-close{position:absolute;top:24px;right:24px;width:32px;height:32px;border:0;padding:0;border-radius:50%;background:#f0f0f0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s;}
/* 닫기 버튼: hover/클릭 시 원형 배경 #141414 (X는 흰색으로 대비) — 온유 공통 가이드 */
.mpop-x{width:16px;height:16px;display:block;}
.mpop-x path{fill:#808080;transition:fill .18s;}
.mpop-close:hover,.mpop-close:active{background:#141414;}
.mpop-close:hover .mpop-x path,.mpop-close:active .mpop-x path{fill:#fff;}
/* 화살표 크기도 연속(폰 44 → PC 54) */
.mpop-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:clamp(44px,4.6vw,54px);height:clamp(44px,4.6vw,54px);border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.85;transition:opacity .2s;}
.mpop-nav:hover{opacity:1;}
.mpop-nav img{height:clamp(24px,2.7vw,30px);width:auto;display:block;filter:brightness(0) invert(1);}   /* 검정 화살표 → 흰색(dimmed 위 가독) */
/* 화살표는 카드 바깥으로 --mpop-gap 간격을 두고 배치 → 카드 폭·간격이 함께 연속 변화하므로 경계 점프 없음 */
.mpop-prev{left:auto;right:calc(50% + var(--mpop-w)/2 + var(--mpop-gap));}
.mpop-next{right:auto;left:calc(50% + var(--mpop-w)/2 + var(--mpop-gap));}
/* 모바일·태블릿: 카드를 좌우 풀블리드로 채운다.
   --mpop-w 는 건드리지 않는다 — 화살표 위치식(위 두 줄)이 그 값을 쓰므로, 바꾸면 화살표가 같이 움직인다.
   대신 .mpop-card 의 width 만 100vw 로 덮어 화살표 위치는 지금 그대로 유지한다.
   화살표가 흰 카드 위로 올라오므로 흰색 반전(filter)을 풀어 원본(검정)으로 되돌린다. */
@media(hover:none){
  .mpop{padding:0;}
  .mpop-card{width:100vw;border-radius:0;}
  .mpop-nav{opacity:.45;}
  .mpop-nav img{filter:none;}
  /* 닫기 버튼 x축을 우측 화살표 중심에 정렬 (화살표 중심 = 50vw + --mpop-w/2 + --mpop-gap + 화살표폭/2) */
  .mpop-close{right:calc(50vw - var(--mpop-w)/2 - var(--mpop-gap) - clamp(44px,4.6vw,54px)/2 - 16px);}
}
/* 폰(≤480px)만 문구 높이 예약 + 전용 줄바꿈(data-quote-m). 태블릿↑은 PC와 동일(2줄)이라 PC↔태블릿 경계에서 높이 변화도 없음 */
/* 가장 긴 최종화 문구가 좁은 폰(≤~375px)에서 5줄로 흐르므로 5줄 기준 고정 예약 → 어느 폭에서도 7개 카드 높이 동일 */
@media(max-width:480px){
  .mpop-card{gap:28px;}
  .mpop-quote{min-height:calc(1.55em * 5);}
  .mpop-role{min-height:3.2em;}   /* 긴 직함(최종화 등)이 좁은 폰에서 2줄로 흐르므로 2줄 예약 → 카드 높이 고정 */
}
/* 모바일(폰 세로·가로 포함, 태블릿 768px 미만): 원형 썸네일 약 20% 축소(96→78) · PC/태블릿 유지 */
@media(max-width:767px){
  .mpop-photo{width:78px;height:78px;}
}
/* 481~560px(폰 가로·폴더블 등): PC 문구를 쓰지만 최종화 문구가 이 폭에서만 3줄로 흘러 혼자 커짐 → 3줄 예약으로 높이 고정 */
@media(min-width:481px) and (max-width:560px){
  .mpop-quote{min-height:calc(1.55em * 3);}
}

/* ===== PARTNERS (로고 가로 무한 마퀴) ===== */
.partners{padding:120px 0;background:#fff;text-align:center;overflow:hidden;}
.partners .title{font-family:var(--font-en);font-size:clamp(30px,3.6vw,46px);font-weight:600;letter-spacing:-1px;margin-bottom:56px;padding:0 24px;}
.logo-marquee{width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.logo-marquee + .logo-marquee{margin-top:calc(clamp(20px,2.4vw,36px) - 20px);}
.logo-track{display:flex;width:max-content;animation:logoScroll var(--dur,60s) linear infinite;}
.logo-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 calc(clamp(36px,4.5vw,70px) - 20px);height:72px;}
/* 클라이언트 로고를 그레이스케일로 통일(원본 명암은 유지) */
/* 이미지 원본 규격이 제각각(360x104 / 360x100 / 476x119 / 364x104)이라, 고정 박스에 contain으로 맞춰
   모든 칸의 폭을 동일하게 만든다. 그래야 1~3줄의 세로 열이 어긋나지 않고 같은 격자로 흐른다. */
.logo-item img{width:166px;height:48px;object-fit:contain;filter:grayscale(100%);}
@keyframes logoScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===== CTA ===== */
.cta{padding:110px 64px;text-align:center;background:var(--c-primary);color:#fff;}
.cta p{font-size:clamp(17px,1.8vw,22px);line-height:1.7;letter-spacing:-.3px;max-width:900px;margin:0 auto 40px;}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.cta-btn{display:inline-flex;align-items:center;justify-content:center;width:240px;box-sizing:border-box;text-align:center;background:#fff;color:var(--c-ink);font-weight:700;font-size:18px;padding:13px 40px;border-radius:999px;transition:transform .2s,opacity .2s;}
.cta-btn:hover,.cta-btn:focus,.cta-btn:active{transform:translateY(-2px);opacity:.92;}
/* 두 버튼 동일한 화이트 라운딩 스타일, 가로폭 동일(min-width로 넓은 '메일 상세 문의'에 맞춤). 모바일(≤600)은 세로 스택 + 동일 폭 꽉 채움 */
@media(max-width:600px){
  .cta-actions{flex-direction:column;align-items:center;}
  .cta-btn{width:100%;max-width:340px;min-width:0;}
}

/* ===== FOOTER ===== */
.footer{background:var(--c-dark);color:#fff;padding:64px 100px;}
.footer-inner{max-width:1240px;margin:0 auto;}
.footer-top{display:flex;flex-direction:column;gap:48px;padding-bottom:38px;border-bottom:1px solid #2a2a2a;}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.footer-logo{display:block;height:32px;width:auto;margin-left:0;}
.footer-addr-wrap{display:flex;flex-direction:column;gap:8px;}
.footer-addr{display:grid;grid-template-columns:360px 360px 1fr;gap:38px;}
.footer-addr .addr-col{display:flex;flex-direction:column;gap:12px;}
.footer-addr .label{font-size:16px;font-weight:700;color:#fff;}
.footer-addr .addr{font-size:14px;line-height:1.7;color:#8a8a8a;}
.addr-br-m{display:none;}   /* 주소 콤마 뒤 줄바꿈 — 모바일에서만 노출(768px 이하) */
/* iOS가 전화번호·이메일을 자동링크로 감싸도 밑줄/파란색이 보이지 않도록 색·밑줄 상속 */
.footer-tel a,.footer-addr .addr a,.cloc-detail a{color:inherit !important;text-decoration:none !important;pointer-events:none;}
.footer-tel{font-family:var(--font-en);font-size:14px;color:#8a8a8a;letter-spacing:.3px;margin-top:-10px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:24px;}
.footer-links{display:flex;gap:36px;}
.footer-links a{font-size:12px;color:var(--c-ink2);}
.footer-links a:hover{color:#fff;}
.footer-copy{font-family:var(--font-en);font-size:12px;color:var(--c-ink2);}

/* ===== CLOSING IMAGE ===== */
/* 하단 이미지: 화면 하단에 sticky로 깔리고(뒤), 푸터까지 스크롤하면 콘텐츠가 위로 비키며 드러남 */
.closing{position:sticky;bottom:0;z-index:-1;height:560px;overflow:hidden;}
.closing img{width:100%;height:100%;object-fit:cover;object-position:center 60%;}
.closing::after{content:"";position:absolute;inset:0;background:rgba(10,18,28,.32);}
.closing-copy{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1;text-align:center;padding:0 24px;
  font-family:var(--font-en);font-size:clamp(22px,3.4vw,46px);font-weight:600;letter-spacing:3px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.3);}
.closing-br-m{display:none;}   /* 하단 카피 줄바꿈 — 모바일에서만(768px 이하) */

/* ===== Floating Action Buttons (우측 하단) ===== */
.fab-stack{position:fixed;right:28px;bottom:28px;z-index:90;display:flex;flex-direction:column;gap:14px;}
.fab-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.fab-btn:hover{transform:translateY(-3px);}
.fab-btn img{width:19.6px;height:19.6px;display:block;}
.fab-mail{background:#e8e8e8;}
.fab-mail img{filter:brightness(0);} /* 봉투 아이콘 검정(#000) */
.fab-kakao{background:#FEE500;}
.fab-kakao img{width:23.6px;height:23.6px;} /* 카카오 로고는 비율상 +4px */
@media (max-width:600px){
  .fab-stack{right:18px;bottom:18px;gap:12px;}
  .fab-btn{width:44px;height:44px;}
  .fab-btn img{width:15.9px;height:15.9px;}
  .fab-kakao img{width:19.9px;height:19.9px;}
}

/* ===== CONTACT DRAWER (우측 슬라이드 + 페이지 밀림) ===== */
#site{transition:transform .7s cubic-bezier(.65,0,.35,1);}
body.cdrawer-open{overflow:hidden;}
body.cdrawer-open #site{transform:translateX(-6vw);pointer-events:none;} /* 드로어가 열리면 메인이 좌측으로 밀림 (우측 여백은 드로어가 덮음) */
.cdrawer-backdrop{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.8);opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s;}
.cdrawer-backdrop.open{opacity:1;visibility:visible;}
.cdrawer{position:fixed;top:0;right:0;height:100%;width:calc(100vw - 180px);z-index:200;transform:translateX(100%);   /* 좌측 dimmed 여백 PC 180px 고정 */
  transition:transform .7s cubic-bezier(.65,0,.35,1);overflow-y:auto;background:#141414;}
.cdrawer.open{transform:none;}
/* 스크롤해도 뷰포트 전체를 덮는 고정 배경 — 음수 margin으로 흐름 공간은 차지하지 않음 */
.cdrawer-bg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:0;}
.cdrawer-bg img{width:100%;height:100%;object-fit:cover;display:block;}
.cdrawer-bg::after{content:"";position:absolute;inset:0;background:rgba(10,12,16,.5);}
/* 닫기버튼: 레이어 팝업(mpop-close)과 동일한 아이콘·사이즈 / 우측 끝은 입력폼 프레임 우측 모서리(inner 우측 패딩)에 정렬 */
.cdrawer-close{position:absolute;top:28px;right:22px;z-index:3;width:32px;height:32px;border:0;padding:0;border-radius:50%;background:#f0f0f0;color:#141414;cursor:pointer;display:none;align-items:center;justify-content:center;transition:background .18s;}   /* PC·태블릿 삭제, 모바일에서만 노출 */
.cdrawer-close:hover,.cdrawer-close:active{background:#141414;}
.cdrawer-close:hover .mpop-x path,.cdrawer-close:active .mpop-x path{fill:#fff;}
.cdrawer-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 600px;gap:56px;padding:90px 72px;min-height:100%;align-items:start;}
.cinfo{color:#fff;min-width:0;position:sticky;top:90px;align-self:start;}   /* 2단일 때 정보 컬럼이 콘텐츠 최소폭 이하로도 줄어들도록 → 폼(600px)이 밖으로 밀려 겹치는 현상 방지 / PC: 좌측 정보 고정, 우측 폼(드로어)만 스크롤 (top=inner 상단 패딩 90px) */
.ctitle{font-family:var(--font-en);font-size:clamp(40px,4vw,64px);font-weight:700;letter-spacing:-1px;line-height:1.4;}
.csub{font-family:var(--font-kr);font-size:clamp(20px,2vw,28px);font-weight:400;letter-spacing:-1.2px;line-height:1.5;margin-top:28px;color:#f5f5f5;}   /* PC 2줄(br) · 태블릿 1줄 · 모바일 2줄 */
.cloc-list{margin-top:60px;display:flex;flex-direction:column;gap:16px;}
.cloc-name{display:flex;align-items:center;gap:8px;width:100%;padding:0;border:0;background:none;font-family:inherit;font-size:18px;font-weight:400;letter-spacing:-.72px;color:#fff;cursor:pointer;text-align:left;}
.cloc-icon{width:24px;height:24px;flex-shrink:0;}
.cloc-arrow{width:18px;height:18px;margin-left:4px;flex-shrink:0;color:#fff;transition:transform .45s cubic-bezier(.16,1,.3,1);}
.cloc.open .cloc-arrow{transform:rotate(180deg);}
/* 아코디언: grid-template-rows 0fr→1fr 로 콘텐츠 높이(auto)까지 부드럽게 펼침 — 뚝 끊김 없음 */
.cloc-detail-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1);}
.cloc.open .cloc-detail-wrap{grid-template-rows:1fr;}
.cloc-detail{overflow:hidden;min-height:0;padding-top:12px;padding-left:32px;font-size:14px;line-height:23px;color:rgba(255,255,255,.65);letter-spacing:-.6px;opacity:0;transition:opacity .4s ease .05s;}
.cloc.open .cloc-detail{opacity:1;}
.cloc-sub{display:block;}   /* 전화·이메일 블록(주소 아래 줄) — 모바일에서 주소와의 간격 조절용 */
.cform{background:#fff;border-radius:8px;padding:40px;display:flex;flex-direction:column;gap:18px;}
.cform .row{display:flex;gap:24px;}
.cform .field{display:flex;flex-direction:column;gap:6px;flex:1;}
.cform label{font-size:16px;font-weight:800;color:#4a4a4a;line-height:28px;}
.cform input,.cform textarea{background:var(--c-field);border:0;border-radius:8px;padding:10px 16px;height:42px;box-sizing:border-box;font-family:var(--font-en);font-size:16px;color:var(--c-ink);width:100%;outline:none;}
.cform input:focus,.cform textarea:focus{box-shadow:0 0 0 2px var(--c-primary-soft) inset;}
.cform textarea{height:200px;resize:vertical;font-family:var(--font-kr);line-height:1.6;}
.ctypes{display:flex;justify-content:space-between;gap:12px;}   /* 6개 유형 한 줄 배치 (모바일 ≤600에서만 줄바꿈) */
.ctypes label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:400;color:#4a4a4a;cursor:pointer;white-space:nowrap;}
.cform label.cagree{display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:400;color:#4a4a4a;cursor:pointer;padding-top:16px;}
/* 커스텀 체크박스 — 정사각형 유지, 체크 시 Figma check 아이콘 표시 */
.ctypes input,.cagree input{appearance:none;-webkit-appearance:none;margin:0;box-sizing:border-box;padding:0;width:20px;height:20px;min-width:20px;flex:0 0 20px;border-radius:4px;background-color:rgba(187,187,187,.2);cursor:pointer;background-repeat:no-repeat;background-position:center;background-size:20px 20px;transition:background-color .15s;}
/* 선택 시: 온유 키컬러(#89BDE0)로 채우고 흰색 체크 표시 */
.ctypes input:checked,.cagree input:checked{background-color:var(--c-primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3.3 3.3L15 6.8'/%3E%3C/svg%3E");}
/* 클릭/포커스 시 stroke(box-shadow·outline) 제거 */
.ctypes input:focus,.cagree input:focus{outline:none;box-shadow:none;}
.csubmit{align-self:center;width:224px;height:58px;background:#89BDE0;color:#fff;border:0;border-radius:50px;font-size:18px;font-weight:600;cursor:pointer;font-family:var(--font-kr);transition:transform .2s,opacity .2s;}
.csubmit:hover{transform:translateY(-2px);opacity:.92;}
.csubmit:disabled{opacity:.55;cursor:default;transform:none;}
/* 스팸봇 허니팟: 사람에겐 안 보이게 */
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
/* 전송 상태 메시지 */
.cform-status{margin:0;text-align:center;font-size:15px;font-weight:600;min-height:1.4em;}
.cform-status:empty{display:none;min-height:0;}   /* 기본(빈 상태): 흐름에서 제거 → 동의↔버튼 간격을 폼 공통 18px로 유지(메시지 뜨면 자동 표시) */
.cform-status.ok{color:var(--c-success);}
.cform-status.err{color:var(--c-error);}

/* ===== RESPONSIVE ===== */
/* 푸터 지사 주소: 3열 고정폭(360/360/1fr)이라 폭이 줄면 송도(1fr) 컬럼만 좁아져 주소가 여러 줄로 깨짐 → ≤1300px(태블릿·좁은 PC)에서 모바일처럼 지사별 3줄 세로 스택 */
@media(max-width:1300px){
  .footer-addr{grid-template-columns:1fr;gap:28px;}
}
@media(max-width:1024px){
  .gnb{padding:23px 32px;}
  .gnb.scrolled{padding:23px 32px;}
  .services,.story,.conclusion,.partners,.cta,.footer{padding-left:32px;padding-right:32px;}
  .team-carousel{padding:0;}
  /* 태블릿은 PC와 동일한 썸네일 크기(360px) 유지 — 폰(≤768px)에서만 76vw로 축소 */
  .ap-nav{display:flex;}   /* 모바일·태블릿: 좌우 이동 화살표 노출 */
  /* 태블릿·모바일: APPROACH 핀(스크롤 스크럽) 해제 — 스크롤은 다음/이전 섹션 이동에만 쓰이고, 4가지 원칙은 화살표·스와이프로만 전환 */
  .approach{height:auto;}
  .approach-sticky{position:relative;height:auto;display:block;}
  .approach-body{display:block;}
  .ap-scene{height:70vh;min-height:460px;}
  .ap-copies{right:clamp(40px,6.4vw,80px);}   /* left는 PC와 동일하게 --ap-x 기준 유지(메뉴 텍스트와 정렬), right만 조정 */
  /* 태블릿·모바일: 원칙 전환이 스크롤 스크럽이 아니라 화살표/스와이프(즉시 전환)이므로, 서브카피 라인의 1.3s 스태거 리빌(최대 지연 0.36s+1.3s≈1.66s)을 빠른 동시 페이드로 축소 → 탭 후 카피가 늦게 뜨는 버퍼 제거 */
  .ap-copy .sr-line{transition-duration:.4s;transition-delay:0s;transform:translateY(12px);}
  /* 태블릿(769~1024)은 서브텍스트를 PC와 동일하게 2줄 강제 줄바꿈(.ap-dline=block) 유지 — 모바일(≤768)에서만 한 줄 자연 흐름으로 전환 */
}
/* 상담 드로어 '태블릿 타입' 전환 지점: PC 2단(정보 1fr + 폼 600px)이 태블릿 폭(≈1366px, iPad Pro 가로 등)에서 폼이 우측으로 넘쳐 겹치므로, 그 전에 1단으로 전환 */
@media(max-width:1440px){
  .cdrawer{width:calc(100vw - 180px);}   /* 태블릿: 좌측 dimmed 여백을 PC와 동일하게 180px 고정 */
  .cdrawer-inner{grid-template-columns:1fr;gap:40px;padding:88px 72px 56px;}
  .cinfo{position:static;top:auto;}   /* 태블릿·모바일(1단): 고정 해제 → 전체가 함께 스크롤 */
  .csub{white-space:nowrap;}   /* 태블릿: 한 줄 */
  .csub-br{display:none;}
}
/* ≤920px(모바일·태블릿): 데스크톱 GNB → 햄버거 메뉴로 전환. 로고는 좌측 유지, 햄버거는 우측 배치 */
@media(max-width:920px){
  .gnb-menu{display:none;}
  .gnb-mega{display:none;}
  .gnb-toggle{display:block;position:absolute;right:32px;top:50%;left:auto;transform:translateY(-50%) translateX(16px);}   /* 햄버거·닫기(X) 동일 위치 — 우측 32px에서 16px 더 우측 */
  body.ready .gnb-toggle{transform:translateY(-50%) translateX(16px);}   /* 등장 후에도 동일 위치 유지(로드 시 좌우 튐 방지) */
}
@media(max-width:768px){
  /* 모바일: 서브텍스트 강제 줄바꿈 해제 → 프레임 폭에 맞춰 한 줄로 이어져 자연 줄바꿈(플렉서블). 줄간격은 여유 있게 25.6px */
  .ap-desc{display:block;max-width:none;line-height:25.6px;}
  .ap-desc .ap-dline{display:inline;}
  /* 모바일도 PC와 동일하게 핀 크로스페이드 유지(A→B→프롤로그 스크롤 전환) — 핀/스티키/배경/오버레이 위치는 데스크톱 기본값 상속 */
  .hero-titles{width:100%;grid-template-columns:minmax(0,1fr);}   /* 긴 타이틀이 max-content로 넘치지 않고 뷰포트 폭에서 줄바꿈 */
  .hero-title{font-size:28px;}
  .hero-prologue{gap:0;top:calc(50% + 60px);bottom:auto;}   /* 모바일: flex gap 제거 + 프롤로그 첫 등장 위치를 프레임 세로 중앙에서 60px 아래로(JS transform이 translateY(-50%) 기준 상승) */
  .hero-prologue .kicker{margin-bottom:22px;}   /* gap 제거분 보정 → PROLOGUE 라벨 여백 유지 */
  .hero-prologue p{font-size:13px;line-height:26px;text-align:center;width:100%;max-width:100%;}   /* 모바일: 행간 26px로 균일 */
  .services{padding:130px 20px 90px;}
  .svc-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:40px;}
  .svc-card .t{padding:20px;font-size:15px;}
  .svc-plus{width:20px;height:20px;}
  .story{padding:90px 24px;}
  .story-paras{gap:26px;}
  .approach-head{padding:80px 20px 36px;}
  .approach-body{padding-left:20px;padding-right:20px;}   /* 모바일: 카드 좌우 여백을 services(20px)와 동일하게 */
  /* 모바일: 핀 해제(≤1024 규칙 상속) — 스크롤은 섹션 이동, 원칙 전환은 좌우 화살표(.ap-nav)·스와이프 */
  .conclusion{padding:90px 24px;}
  .team{padding:30px 0 90px;}
  .member{width:min(100vw - 48px,480px);height:auto;aspect-ratio:360/480;}   /* 폰: CTA 버튼 영역(.cta 좌우 패딩 24px)과 좌우 정렬. 480px 초과 금지(태블릿 방어) */
  .partners{padding:80px 0;}
  .logo-item{padding:0 clamp(24px,7vw,40px);height:60px;}
  .logo-item img{width:138px;height:40px;}
  .cta{padding:80px 24px;}
  .footer{padding:48px 24px 28px;}
  .footer-top{gap:32px;}
  .footer-addr{grid-template-columns:1fr;gap:24px;}
  .addr-br-m{display:inline;}   /* 모바일: 주소를 콤마 뒤에서 두 줄로 */
  .cloc-sub{margin-top:12px;}   /* 모바일: Contact 드로어에서 주소↔전화번호 간격 12px */
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  /* 모바일: 메인·서브페이지 공통으로 sticky 리빌 유지(footer가 덮었다가 스크롤하며 'Trade, On You'·배너 드러남) */
  .closing{height:420px;position:sticky;bottom:0;z-index:-1;}
  /* iOS Safari 동적 툴바 + sticky;bottom:0 조합으로 푸터 아래 흰 여백이 생겨도 푸터색(다크)으로 은폐 → 흰 띠 대신 자연스러운 어두운 여백. 모든 섹션이 불투명 배경이라 섹션 사이로 다크 비침 없음. 인트로는 #intro(fixed inset:0)가 덮으므로 무관 */
  body{background:var(--c-dark);}
  .closing-copy{font-size:30px;line-height:40px;}   /* 모바일: 하단 카피 폰트 30px / 행간 40px */
  .closing-br-m{display:inline;}   /* 모바일: 하단 카피 'Trade, On You.' 뒤 줄바꿈(2줄) */
  /* 드로어: 모바일 풀스크린, 페이지 밀림 끔(dim은 백드롭이 처리) */
  body.cdrawer-open #site{transform:none;}
  .cdrawer{width:100vw;}
  .cdrawer-inner{grid-template-columns:1fr;gap:30px;padding:32px 22px 48px;}   /* Contact 타이틀·텍스트 위로 */
  .cdrawer-close{display:flex;top:44px;right:22px;}   /* 모바일만 노출 · Contact 타이틀과 같은 높이 정렬 */
  .csub{white-space:normal;font-size:22px;}   /* 모바일: 다시 2줄 허용 + 폰트 2pt 확대(20→22) */
  .csub-br{display:inline;}
  .hero-br-m{display:inline;}   /* 모바일: Hero 프롤로그 '조사 대응까지,' 뒤 줄바꿈 */
  .story-br-m{display:inline;}   /* 모바일: ON·U STORY '예상치 못한'·'전문성이' 뒤 줄바꿈 */
  .cta-br-m{display:inline;}   /* 모바일: 상담(CTA) 카피 '기업심사,' 뒤 줄바꿈 */
  .cform{padding:40px 28px;}   /* 모바일: 상하 padding을 PC(40px)와 동일하게, 좌우 28px 유지 */
}
/* 모바일(≤600): 이름/연락처 세로 스택 + 상담유형 줄바꿈 (태블릿 601~1024는 PC처럼 한 줄 유지) */
@media(max-width:600px){
  .cform .row{flex-direction:column;gap:18px;}
  .ctypes{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 12px;}   /* 모바일: 상담유형 3개씩 2줄, 행간 축소 */
}

/* ==================================================================
   서브페이지 공통 + 온유맨파워 페이지 전용 스타일
   ================================================================== */
/* --- 서브페이지 헤더: GNB(1뎁스) + 서브 GNB(2뎁스). 로고·폰트·위치는 메인과 동일, 색만 화이트bg+다크텍스트로 고정 --- */
body.subpage{overflow-x:clip;}   /* base의 overflow-x:hidden은 position:sticky를 깨뜨림 → clip으로(가로 넘침 방지 + sticky 유지) */
.subhead{position:sticky;top:0;z-index:100;}
/* 서브페이지 GNB = 메인의 '불투명 화이트 헤더(on-light)'를 상시 적용. 메인 화이트 헤더는 컴팩트(로고26·상하패딩23)이므로 서브도 항상 그 크기로 고정
   → 어느 브라우저 폭에서든 메인 화이트 헤더와 로고 크기·헤더 높이가 100% 동일. (메인엔 상단 투명·로고30 상태가 추가로 있을 뿐 = '투명도 차이')
   1/2뎁스 텍스트 크기·햄버거 위치는 메인 base 상속. 1px 그레이 밑줄(box-shadow)은 PC/모바일 메뉴 공통 제거. 메가(2뎁스)도 메인과 동일하게 hover 작동 */
body.subpage .gnb,
body.subpage .gnb.scrolled{position:relative;padding:23px 64px;background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
/* ≤1024: 좌우 패딩을 메인(32px)과 동일하게 — base(64px) 규칙보다 뒤라 확실히 우선 적용 */
@media(max-width:1024px){ body.subpage .gnb,body.subpage .gnb.scrolled{padding:23px 32px;} }
body.subpage .gnb .logo-img{filter:none;height:26px;}        /* 항상 컬러 로고 + 26px(메인 화이트 헤더와 동일, 스크롤 축소 없이 고정) */
body.subpage .gnb-menu a{color:var(--c-ink);}               /* 1뎁스 항상 다크(크기 15px는 메인 상속) */
body.subpage .gnb-toggle{color:var(--c-ink);}              /* 햄버거 항상 다크(위치·크기는 메인 상속) */
/* (서브내비 제거로) 메가는 메인과 동일한 부드러운 hover 애니메이션을 그대로 사용 — 별도 오버라이드 없음 */
/* 서브 GNB(2뎁스 바): 메인 메가바와 동일 폰트/간격/높이 */
.subnav{display:none;}   /* 메인과 동일하게 상시 2뎁스 바 제거 → 2뎁스는 hover 메가만 담당(Contact hover 시 아무것도 안 뜸 · 태블릿/햄버거 시 미노출). 되돌리려면 display:none 삭제 */
.subnav-inner{max-width:1240px;margin:0 auto;height:56px;display:flex;align-items:center;justify-content:center;gap:clamp(22px,3vw,48px);padding:0 24px;}
.subnav a{position:relative;font-family:var(--font-kr);font-size:15px;font-weight:500;color:#fff;letter-spacing:-.3px;opacity:.9;transition:opacity .2s;white-space:nowrap;}
.subnav a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.7,0,.16,1);pointer-events:none;}
.subnav a:hover{opacity:1;}
.subnav a:hover::after,.subnav a.current::after{transform:scaleX(1);} /* hover 및 현재 페이지 — 좌→우 밑줄 */
.subnav a.current{font-weight:700;opacity:1;}
body.m-open .subnav{display:none;}   /* 햄버거 메뉴 열림 시 서브내비(sticky z100)가 메뉴 오버레이 위로 겹쳐 보이던 것 숨김(태블릿) */
/* 서브페이지: 2뎁스 바 상시 고정 노출 — 흰 GNB 바로 아래에 붙고, .subhead(sticky)에 포함되어 스크롤해도 헤더와 함께 고정됨.
   메인 메가메뉴(.gnb-mega)와 동일하게 키컬러(--c-primary) 배경 + 흰 글씨. 배너 top은 JS가 subhead 높이를 재측정해 자동 보정. */
/* 서브페이지 2뎁스: 고정 subnav(현재 섹션)가 기본 표시.
   1뎁스(Company/Service/Insights) hover 시, 해당 섹션 2뎁스 메가(.gnb-mega)를 subnav 위에 '즉시' 오버레이한다.
   ※ 과거엔 메가의 max-height 슬라이드 애니메이션 때문에 subnav와 겹쳐 '한 겹 더 내려오는' 잔상이 생겼음
     → 서브페이지에선 높이를 subnav와 동일한 56px로 고정하고 애니메이션을 없애(정확히 포개짐) 잔상 제거.
   hover 해제(gnb mouseleave) 시 메가가 사라지고 다시 subnav(현재 섹션)가 보인다. */
body.subpage .subnav{display:block;background:var(--c-primary);}
body.subpage .gnb-mega{display:block;top:100%;max-height:56px;box-shadow:none;transition:none;z-index:2;}
body.subpage .gnb.mega-open .gnb-mega{max-height:56px;}   /* 열림 상태도 56px 고정(기본 80px 슬라이드 무효화) */
body.subpage .gnb.mega-open + .subnav{visibility:hidden;}   /* 메가 오버레이 중엔 아래 고정 subnav 숨김 → 두 겹 겹침(비침) 방지 · subnav는 .gnb의 형제이므로 인접형제(+) 셀렉터 */
@media(max-width:920px){
  body.subpage .subnav{display:none;}    /* 햄버거 구간: 2뎁스는 모바일 메뉴가 담당하므로 서브내비 숨김 */
  body.subpage .gnb-mega{display:none;}  /* 모바일 서브페이지: hover 메가도 숨김(데스크톱 GNB가 햄버거로 전환됨) */
}
/* 서브페이지 메뉴 열림 보정:
   ① overflow:hidden이 sticky를 깨 헤더(X)가 화면 밖으로 밀리던 문제 → 헤더를 상단 고정해 X 항상 노출(스크롤 후 열어도)
   ② 다크 캔버스(닫기 리빌용)가 스크롤바 거터에 검정 띠로 비치던 문제 → 메뉴 열림 동안 캔버스 화이트로 */
body.subpage.m-open .subhead{position:fixed;top:0;left:0;right:0;z-index:100;}
body.subpage.m-open{background:#fff;}

/* --- 페이지 헤더 배너: 헤더 아래 sticky 고정 → 스크롤 시 아래 콘텐츠 패널이 위로 올라와 배너를 완전히 덮음, 역스크롤 시 재등장 --- */
.mp-hero{position:sticky;top:0;z-index:1;height:320px;overflow:hidden;background:#0a1419;}   /* 배너 높이 320px 고정 · top(헤더높이)은 JS가 지정 → GNB와 겹치지 않음 */
/* 콘텐츠 패널: 배너 위(z-index 상위)로 올라오며 덮음. 상단 라운드 + 그림자로 '패널이 차오르는' 느낌 */
.mp-body{position:relative;z-index:2;background:var(--c-bg);border-radius:0;}   /* 서브 콘텐츠 섹션 배경: 은은한 #F5F5F5 공통 */   /* 좌우 라운딩·상단 그림자 제거 · margin-top 0 → 로드 시 배너를 미리 덮지 않음(배너 텍스트 정중앙 유지) */
.mp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.04);animation:mpHeroZoom 20s ease-out forwards;will-change:transform;}
@keyframes mpHeroZoom{from{transform:scale(1.04);}to{transform:scale(1.16);}}
.mp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,28,.45),rgba(10,18,28,.55));}
.mp-hero-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 24px;}
.mp-hero-title{font-size:clamp(30px,4vw,52px);font-weight:800;letter-spacing:-1px;line-height:1.3;}
.mp-hero-sub{margin-top:14px;font-size:clamp(13px,1.4vw,17px);color:rgba(255,255,255,.82);letter-spacing:-.3px;}

/* --- 인트로 카피 --- */
.mp-intro{padding:180px 24px clamp(36px,5vw,60px);text-align:center;}   /* 배너 아래 콘텐츠 top 여백: 데스크톱 180px 통일(모바일 90px) */
.mp-intro .lead{display:block;color:var(--c-ink2);margin-bottom:16px;letter-spacing:-.3px;}   /* size·weight = 공통 서브카피 스케일 */
.mp-intro h2{font-family:var(--font-kr);font-size:var(--fs-h2);font-weight:700;line-height:1.5;letter-spacing:-1px;color:var(--c-ink);word-break:keep-all;}   /* 서브페이지 공통 타이틀 규칙(.sub_tit2와 동일) */

/* --- 관세사 그리드 --- */
.mp-grid-sec{padding:clamp(20px,3vw,44px) clamp(20px,6vw,100px) clamp(80px,10vw,140px);}
.mp-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,340px);justify-content:center;gap:120px 40px;}   /* 썸네일 340px 3열 · 가로 간격 40px, 세로 줄 간격 120px */
.mp-card{position:relative;border-radius:16px;overflow:hidden;background:var(--c-black);aspect-ratio:360/480;cursor:pointer;}
.mp-card .member-photo,.mp-card .member-scrim,.mp-card .member-info,.mp-card .member-overlay,.mp-card .member-detail{border-radius:16px;}
.mp-card .member-detail-link{display:none;}   /* hover 이력 카드 하단 화살표 제거 */
/* 사진 하단 이름/직함 — 메인 프로필과 동일한 흰색/회색(.member 스코프라 mp-card엔 안 먹던 것 보정) */
.mp-card .member-info .name{font-size:18px;font-weight:800;color:#fff;line-height:1.6;}
.mp-card .member-info .role{font-size:15px;font-weight:400;color:var(--c-ink3);line-height:1.6;}
@media(hover:hover){
  .mp-card:hover .member-overlay{opacity:1;}
  .mp-card:hover .member-info{opacity:0;}
  .mp-card:hover .member-scrim{opacity:0;}
  .mp-card:hover .member-detail{opacity:1;}
  .mp-card:hover .member-detail-link{pointer-events:auto;}
}
/* 모바일: 탭하면 이력 노출 */
.mp-card.is-open .member-overlay{opacity:1;}
.mp-card.is-open .member-info{opacity:0;}
.mp-card.is-open .member-scrim{opacity:0;}
.mp-card.is-open .member-detail{opacity:1;}
/* 모바일·태블릿(마우스 없는 기기): 닫힌 카드 우측 하단에 화살표를 노출해 '탭하면 이력이 있다'를 알린다.
   앵커는 마크업에서 .member-detail 밖(카드 직속)으로 뺐다 — 안에 두면 닫힘 상태의 opacity:0 을 같이 받아 안 보인다.
   PC(hover:hover)는 기존대로 hover 로 이력이 뜨므로 화살표를 쓰지 않는다(.mp-card .member-detail-link{display:none} 유지). */
@media(hover:none){
  .mp-card .member-detail-link{display:block;pointer-events:auto;opacity:1;transition:opacity .35s ease;}
  .mp-card.is-open .member-detail-link{opacity:0;pointer-events:none;}   /* 이력이 열리면 경력 텍스트와 겹치지 않게 숨김 */
}
/* 태블릿(769~1240): 관세사 썸네일 2열(한 줄에 2개) — 데스크톱 3열이 넘치는 구간 대응. 카드폭은 최대 340px로 데스크톱과 동일, 좁아지면 줄어들어 넘침 방지 */
@media(min-width:769px) and (max-width:1240px){
  .mp-grid{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;gap:64px 40px;max-width:720px;}
}
@media(max-width:768px){
  /* 섹션 좌우 패딩(clamp 6vw)이 400px 이상에서 그리드보다 먼저 폭을 제한해 메인과 어긋났다 → 24px 고정 */
  .mp-grid-sec{padding-left:24px;padding-right:24px;}
  .mp-grid{grid-template-columns:1fr;justify-content:center;gap:32px;max-width:min(100vw - 48px,480px);}   /* 폰: 메인 관세사 카드(.member)와 동일 사이즈 — CTA 버튼 영역과 좌우 정렬(24px) */
}

/* --- 한마디 슬라이더 섹션 --- */
.mp-quote{position:relative;background:#fff;padding:clamp(64px,8vw,110px) clamp(56px,9vw,120px) 180px;overflow:hidden;}   /* 관세사 한마디 배경: 화이트 · 마지막 콘텐츠 섹션 → closing 하단 여백 180px (서브페이지 가이드) */
.mp-quote-inner{max-width:720px;margin:0 auto;text-align:center;}
.mp-quote-qmark{line-height:0;margin-bottom:14px;}
.mp-quote-qmark img{width:clamp(38px,4vw,52px);height:auto;display:inline-block;}
.mp-quote-msg{color:#4a4a4a;font-size:clamp(22px,3vw,38px);line-height:1.55;font-weight:400;word-break:keep-all;min-height:calc(1.55em * 2);display:flex;flex-direction:column;justify-content:center;transition:opacity .25s ease;}
.mp-quote-profile{margin-top:clamp(28px,4vw,44px);display:flex;flex-direction:column;align-items:center;gap:14px;}
/* 프로필(사진·이름·역할)도 텍스트 .sr-line과 동일한 스태거 페이드업 — 텍스트 줄 다음 순번(--i)으로 이어 등장 */
.mp-quote-profile>*{opacity:0;transform:translateY(40px);transition:opacity 1.3s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*.18s);will-change:opacity,transform;}
.mp-quote-profile.in>*{opacity:1;transform:none;}
.mp-quote-photo{width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--c-black);}
.mp-quote-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.mp-quote-name{color:#141414;font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:-1px;}
.mp-quote-role{color:var(--c-ink3);font-size:clamp(13px,1.3vw,16px);letter-spacing:-.8px;margin-top:-8px;min-height:1.4em;}
.mp-quote-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:clamp(40px,4vw,50px);height:clamp(40px,4vw,50px);border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .2s;}
.mp-quote-nav:hover{opacity:1;}
.mp-quote-nav img{height:clamp(20px,2.4vw,28px);width:auto;display:block;}
.mp-quote-prev{left:clamp(12px,3vw,40px);}
.mp-quote-next{right:clamp(12px,3vw,40px);}
@media(max-width:768px){
  .mp-quote{padding-left:44px;padding-right:44px;padding-bottom:90px;}   /* 모바일 하단 여백 90px (가이드 대칭) */
  .mp-quote-msg{min-height:calc(1.55em * 3);font-size:24px;}
}

/* 선택(현재 페이지) 1뎁스 밑줄 — 2뎁스(.mega-set a::after)와 동일하게 텍스트 아래 bottom:-2px 바.
   (text-decoration 방식은 .gnb-item이 inline-flex(+roll overflow:hidden)라 밑줄이 클리핑/오정렬돼 ::before 바로 교체) */
/* 서브페이지 선택된 1뎁스 = 포인트 블루, 밑줄 제거.
   흰 배경 텍스트라 키컬러(#89BDE0)는 약해 보여, 가독성 위해 한 톤 진한 #7AB3DA 사용 */
body.subpage .gnb-item.current{color:#7AB3DA;}

/* ============================================================
   서브 콘텐츠 — 온유 소개 (company/intro.html)
   원본 사이트 화면 재현: 리드 카피 + 3색 인트로 박스(with ON.U / System / Service)
   + Total Service 카드 + 위치안내. 팔레트/토큰(키블루·NanumSquareNeo·clamp) 준수.
   ============================================================ */

/* 공통 콘텐츠 래퍼 (모든 서브 .sub_contents 공유) */
.sub_contents{padding:180px 0;}   /* 서브페이지 콘텐츠(배너 아래) 상·하단 여백 가이드: 데스크톱 180px 통일(모바일 90px) */
.sub_contents ul{list-style:none;margin:0;padding:0;}
.sub_contents .inbox{max-width:var(--maxw);margin:0 auto;padding:0 clamp(24px,5vw,64px);}

/* 섹션 타이틀 (온유소개) — 원본과 동일하게 굵은 near-black, 마커 미표시 */
.sub_tit{font-family:var(--font-kr);font-size:clamp(30px,4.4vw,54px);font-weight:800;color:var(--c-ink);letter-spacing:-1.6px;line-height:1.2;}
.sub_tit .cir_anim{display:none;}

/* 리드 카피 */
/* ===== 서브페이지 공통 타이틀 규칙 (모든 서브페이지 타이틀 일괄 적용) =====
   family: NanumSquareNeo · size: clamp(26px,3.2vw,40px) · weight: 700
   line-height: 1.5 · letter-spacing: -1px · color: #141414 · word-break: keep-all
   ※ .sub_tit2 / .mp-intro h2 / .cv-slogan-big 세 곳 동일하게 유지할 것 */
.sub_tit2{font-family:var(--font-kr);font-size:var(--fs-h2);font-weight:700;color:var(--c-ink);letter-spacing:-1px;line-height:1.5;word-break:keep-all;}
.sub_tit2.center{text-align:center;}                       /* 리드 카피 가운데 정렬 */

/* ===== 서브페이지 공통 타이포 스케일 (타이틀 / 서브카피 / 본문) =====
   모든 서브페이지(company·service) 콘텐츠 영역 공통 규칙.
     콘텐츠 타이틀 : 40px            · 모바일 --fs-h3(28px)
     서브 카피     : --fs-lead(18px) · 모바일 --fs-body(16px) · weight 400
     그 외 텍스트·표 : --fs-body(16px)
   ※ 타이틀   = .sub_tit2 / .mp-intro h2 / .cv-slogan-big
                (+위치안내 .loc_tit h3는 해당 규칙 옆에서 모바일 오버라이드)
   ※ 서브카피 = .mp-intro .lead / .cv-slogan-lead / .org-lead / .cv-desc / .csr-desc
                / .sub_contents .text (타이틀 바로 아래 설명 문단)
                (색은 각 규칙에서 #4A4A4A=--c-ink2)
   ※ 본문 기본값은 body 에 font-size 선언이 없어 브라우저 기본 16px 에 의존하던 것을 명시화한 것 */
.sub_contents{font-size:var(--fs-body);}
.sub_tit2,.mp-intro h2,.cv-slogan-big,.loc_tit h3{font-size:40px;}
.mp-intro .lead,.cv-slogan-lead,.org-lead,.cv-desc,.csr-desc,
.sub_contents .text{font-size:var(--fs-lead);font-weight:400;text-align:center;}   /* 서브카피는 전 서브페이지 가운데 정렬 */
/* 컨텐츠 타이틀 → 바로 아래 서브카피 간격 : PC 52px · 모바일 40px (전 서브페이지 공통) */
.sub_tit2 + .text,
.sub_tit2 + .org-lead,
.cv-slogan-big + .csr-desc,
.cv-slogan-big + .cv-desc{margin-top:52px;}
@media (max-width:768px){
  .sub_tit2,.mp-intro h2,.cv-slogan-big,.loc_tit h3{font-size:var(--fs-h3);}
  .mp-intro .lead,.cv-slogan-lead,.org-lead,.cv-desc,.csr-desc,
  .sub_contents .text{font-size:var(--fs-body);}
  .sub_tit2 + .text,
  .sub_tit2 + .org-lead,
  .cv-slogan-big + .csr-desc,
  .cv-slogan-big + .cv-desc{margin-top:40px;}
}
.sub_contents .text,.service01 > span{color:var(--c-ink2);}   /* 콘텐츠 타이틀 아래 설명 본문·서브카피 = 보조 텍스트 #4A4A4A */
.sub_tit2 + div{margin-top:88px;}                          /* 리드 카피 → 아래 콘텐츠 간격: 모든 서브페이지 공통 88px */
.sub_tit2 + .table01{margin-top:52px;}                     /* 타이틀 → 표는 서브카피와 같은 52px */
.lead-br-m{display:none;}                                  /* 리드 카피 모바일 전용 줄바꿈(기본 숨김, ≤768px 노출) */
.sub_tit + div{margin-top:clamp(46px,7vw,100px);}          /* 타이틀 → 리드 카피 큰 간격 */
.sub_contents .inbox > div + div{margin-top:180px;}   /* 인트로 블록 → Total Service 블록 간격: 데스크톱 180px (모바일 90px로 축소) */
/* 섹션 사이 간격(앞 섹션 서브카피 끝 → 다음 섹션 타이틀) — 모든 서브페이지 공통 PC 180px · 모바일 90px */
.sub_contents .sb_section + .sb_section{margin-top:180px;}

/* ── 3색 인트로 박스 (with ON.U / System / Service) ── */
.int_list{margin-top:clamp(28px,4vw,52px);}
.int_list ul{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);}   /* 카드 사이 간격: 위치안내(loc_list) 기준 통일 */
.int_list li{position:relative;display:flex;flex-direction:column;min-height:clamp(300px,28vw,380px);
  padding:clamp(24px,2vw,32px);color:#fff;overflow:hidden;border-radius:0 40px 0 40px;}   /* 안쪽 여백 데스크톱 최대 32px(최소 24px) */   /* 고정 비율 대신 min-height + 콘텐츠 자람(그리드 stretch로 3장 높이 균등, 잘림 방지) · 상하 여백 44px · 좌측 하단만 80px 라운딩 */
.int_list li p{order:1;font-family:var(--font-kr);font-size:18px;font-weight:500;
  line-height:1.65;letter-spacing:-.5px;word-break:keep-all;}
.int_list li h6{order:2;margin-top:auto;text-align:right;font-family:var(--font-en);font-weight:300;
  font-size:clamp(30px,4.4vw,44px);line-height:1;letter-spacing:-1px;color:rgba(255,255,255,.92);}   /* 데스크톱 44px, 좁은 폭에서 줄바꿈 방지 위해 반응형 축소 */
.int1{background:#8bb8da;}   /* light sky blue (키블루 계열) */
.int2{background:#7c9ad2;}   /* periwinkle */
.int3{background:#7b73bf;}   /* violet */
/* ≤960px: 좁은 카드에서 하드코딩 <br>이 외톨이 줄을 만들어 → 강제 줄바꿈 무효화, 자연 흐름(keep-all로 단어 유지) */
@media(max-width:960px){ .int_list li p br{display:none;} }

/* ── Total Service 카드 (통관/보관/운송/컨설팅) ── */
.int_list2{margin-top:clamp(28px,4vw,52px);}
.int_list2 ul{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,28px);}   /* 카드 사이 간격: 위치안내(loc_list) 기준 통일 */
.int_list2 li{background:#fff;border:1px solid #ececec;border-radius:14px;padding:clamp(24px,2vw,32px);}   /* #F5F5F5 콘텐츠 배경 위에서 흰 카드로 대비 · 스트로크는 위치안내(loc_list) 카드와 동일 */
.int_list2 li h6{font-family:var(--font-kr);font-size:18px;font-weight:800;color:var(--c-ink);
  letter-spacing:-.6px;line-height:1.4;padding-bottom:16px;margin-bottom:16px;border-bottom:2px solid var(--c-ink);}
.int_list2 li h6 span{font-weight:500;color:var(--c-ink3);font-size:.82em;}
.int_list2 li p{display:flex;flex-direction:column;gap:9px;}
.int_list2 li p span{font-family:var(--font-kr);font-size:14px;font-weight:400;color:var(--c-ink2);
  line-height:1.5;letter-spacing:-.4px;padding-left:13px;text-indent:-13px;}
.int_list2 li p span em{font-style:normal;color:var(--c-primary);font-weight:700;}

/* ── 위치안내 ── */
/* '위치 안내'도 컨텐츠 타이틀 등급 — 크기는 공통 가이드(40px / 모바일 28px)를 따르고,
   앞 섹션과의 간격은 섹션 간 공통값(180px / 모바일 90px), 아래 콘텐츠와는 52px(모바일 40px). */
.loc_tit{max-width:var(--maxw);margin:180px auto 52px;padding:0 clamp(24px,5vw,64px);text-align:center;}
.loc_tit h3{font-family:var(--font-kr);font-weight:700;color:var(--c-ink);letter-spacing:-1px;}
.loc_list ul{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);}   /* 본사·지사 3곳 = 3칼럼(푸터와 동일 구성) */
.loc_list li h5 span{font-weight:500;color:var(--c-ink);font-size:1em;}   /* 지사 부제(수도권총괄본부): 블랙 + 지점명과 동일 16px */
.loc-icon{width:24px;height:24px;margin-right:7px;vertical-align:middle;fill:var(--c-primary);flex-shrink:0;}   /* 지점명 앞 지도 아이콘: 텍스트와 높이 기준 중앙정렬 · 24px 키컬러 #89BDE0 */
.loc-map{display:inline-block;margin-top:14px;padding:4px 14px;font-family:var(--font-kr);font-size:13px;font-weight:600;   /* 전화번호 아래 지도보기 버튼(좌측정렬, 키컬러 stroke 2px) */
  color:var(--c-primary);border:2px solid var(--c-primary);border-radius:999px;letter-spacing:-.3px;line-height:1.5;transition:background .2s,color .2s;}
.loc-map:hover{background:var(--c-primary);color:#fff;}

/* ===== 조직도 (org.html) ===== */
/* 하단 여백은 공통 .sub_contents(180px) 가이드를 그대로 사용 — 개별 override 제거(가이드 일관성) */
.org-intro{text-align:center;max-width:var(--maxw);margin:0 auto;padding:0 clamp(24px,5vw,64px);}
.org-lead{margin-top:18px;font-family:var(--font-kr);color:var(--c-ink2);line-height:1.6;letter-spacing:-.4px;word-break:keep-all;}   /* size·weight = 공통 서브카피 스케일 */
/* 조직도 이미지 (폭 맞춤, 좌우 여유 패딩) */
.org-img-wrap{margin-top:clamp(48px,7vw,90px);max-width:1120px;margin-left:auto;margin-right:auto;text-align:center;padding:0 clamp(24px,5vw,64px);}
.org-img{display:inline-block;max-width:100%;height:auto;vertical-align:top;}
.loc_list li{padding:clamp(24px,2vw,32px);border:1px solid #ececec;border-radius:14px;background:#fff;}
.loc_list li h5{font-family:var(--font-kr);font-size:18px;font-weight:800;color:var(--c-ink);letter-spacing:-.6px;margin-bottom:12px;}
.loc_list li p{font-family:var(--font-kr);font-size:14px;font-weight:400;color:var(--c-ink2);line-height:1.95;letter-spacing:-.4px;}
.loc_list li p a{color:inherit;transition:color .2s;}
.loc_list li p a[href^="tel"],.loc_list li p a[href^="mailto"]{color:var(--c-ink3);}
.loc_list li p a:hover{color:var(--c-primary);}
.loc_list .map_btn{display:inline-block;vertical-align:middle;margin-left:6px;}
.loc_list .map_btn img{display:inline-block;height:22px;width:auto;}

/* ── 반응형 ── */
@media(max-width:900px){
  .int_list2 ul{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .sub_tit2 + .int_list{margin-top:60px;}   /* 모바일: 리드 카피와 3가지 카드 사이 간격 60px (공통 88px 오버라이드) */
  .int_list ul{grid-template-columns:1fr;}
  .int_list ul,.int_list2 ul,.loc_list ul{gap:32px;}   /* 모바일: 카드 섹션 간격 32px 공통 */
  .int_list li{aspect-ratio:auto;min-height:210px;padding:32px 28px;}
  .int_list li p{padding-top:6px;max-width:360px;}   /* 모바일: 넓은 1단 카드에서 카피를 360px 폭 안에서 줄바꿈 */
  .int_list li h6{font-size:44px;margin-top:32px;}
  .lead-br-m{display:inline;}    /* 모바일: 리드 카피 3줄 처리 */
  .lead-br-pc{display:none;}     /* 모바일: 데스크톱 전용 줄바꿈 숨김 */
  /* 모바일 큰 여백 = 메인 섹션 패딩과 공통 90px (상·하단 대칭) */
  .sub_contents{padding-top:90px;padding-bottom:90px;}
  .mp-intro{padding-top:90px;}
  .sub_contents .inbox > div + div{margin-top:90px;}
  .sub_contents .sb_section + .sb_section{margin-top:90px;}   /* 섹션 사이 모바일 90px (공통) */
  /* introduce 전용 모바일 간격 (int_list2 앵커로 스코프) */
  .sub_contents .inbox > div + div:has(.int_list2){margin-top:120px;}   /* 인트로(Service) 블록 → Total Service 블록 120px */
  .sub_tit2 + .int_list2{margin-top:60px;}   /* Total Service 카피 → 통관/보관 썸네일 60px (공통 88px 오버라이드) */
  .loc_tit{margin-top:90px;margin-bottom:40px;}   /* 모바일: 섹션 간 90px · 타이틀→콘텐츠 40px (공통 가이드) */
}
@media(max-width:1024px){
  .loc_list ul{grid-template-columns:1fr;}   /* 태블릿↓: 1칼럼 스택(넓은 카드, 주소 1줄) */
  .loc-addr-br{display:none;}                /* 태블릿↓: PC 전용 주소 줄바꿈 숨김 */
}
@media(max-width:520px){
  .int_list2 ul{grid-template-columns:1fr;}
}

/* 서브페이지 closing: 데스크톱은 메인과 동일한 sticky 리빌(위 mp-body 패널이 스크롤하며 겹쳐있던 배너가 드러남). 모바일(≤768)은 아래 규칙에서 일반 블록(iOS 흰여백 회피) */

@media(max-width:768px){ .subnav{display:none;} }   /* 모바일: 서브 GNB 숨김(햄버거만) */

/* ===================================================================
   핵심 가치 (company/values.html)
   다이어그램은 이미지(corevalue.png, 조직도와 동일 방식)로,
   하단 카피는 메인 ON·U STORY 카피(.story-paras p)와 동일 사이즈·웨이트.
=================================================================== */
/* 상단 여백은 공통 .sub_contents(데스크톱 180px / 모바일 90px)를 그대로 사용 — 별도 padding-top 미추가(이중 적용 방지) */

/* 슬로건/타이틀 — 메인 CONCLUSION .big과 동일 사이즈(clamp(26,3.2vw,40)/700/1.5) */
.cv-slogan{text-align:center;margin-bottom:80px;}   /* 슬로건 → 다이어그램 이미지 간격 80px */
.cv-slogan-lead{font-family:var(--font-kr);
  color:var(--c-ink2);letter-spacing:-.3px;margin-bottom:14px;}   /* size·weight = 공통 서브카피 스케일 */
.cv-slogan-big{font-family:var(--font-kr);font-weight:700;
  line-height:1.5;letter-spacing:-1px;color:var(--c-ink);word-break:keep-all;}   /* size = 공통 타이틀 스케일(.sub_tit2와 동일) */

/* 다이어그램 이미지 (기존 920px에서 18% 축소 = 754px) */
.cv-img-wrap{max-width:754px;margin:0 auto;text-align:center;}
.cv-img{display:inline-block;max-width:100%;height:auto;vertical-align:top;}

/* 핵심 가치 카피 — 소제목 + 본문 (피그마 295:115) */
.cv-copy{display:flex;flex-direction:column;
  gap:clamp(40px,5vw,60px);text-align:center;}
/* 공통 .sub_contents .inbox > div + div{margin-top:180px} 오버라이드 → 이미지 앞뒤 간격 80px 고정 */
.values .inbox > .cv-img-wrap{margin-top:80px;}   /* 슬로건 → 다이어그램 이미지 80px */
.values .inbox > .cv-copy{margin-top:80px;}        /* 다이어그램 이미지 → 카피 80px */
.cv-item{display:flex;flex-direction:column;align-items:center;gap:12px;}
/* 소제목: 36px — 국문 NanumSquare Bold / 영문 Google Sans Flex Medium */
.cv-title{color:var(--c-ink);font-size:clamp(26px,3.6vw,36px);line-height:1.3;}
.cv-title.kr{font-family:var(--font-kr);font-weight:700;letter-spacing:-1px;}
.cv-title.en{font-family:var(--font-en);font-weight:500;letter-spacing:-.5px;}
/* 사전적 의미 주석: 13px #8a8a8a */
.cv-note{font-family:var(--font-kr);font-weight:400;font-size:13px;
  color:var(--c-ink3);line-height:1.6;letter-spacing:-.2px;}
/* 본문: 메인 스토리 카피와 동일 스펙(size clamp(16,1.5vw,19)/#4a4a4a) */
.cv-desc{line-height:1.9;color:var(--c-ink2);
  word-break:keep-all;}   /* size·weight = 공통 서브카피 스케일 */

/* ===== 회사 연혁 (company/history) — 연도 탭 클릭 → 좌우 슬라이드 (모바일: 세로 나열) ===== */
.hist{position:relative;}

/* 슬라이드 뷰포트 (한 번에 한 슬라이드만 노출) */
.hist-viewport{overflow:hidden;}
.hist-track{display:flex;will-change:transform;transition:transform .7s cubic-bezier(.22,1,.36,1);}
.hist-slide{flex:0 0 100%;min-width:100%;display:flex;align-items:stretch;gap:clamp(16px,2vw,24px);
  min-height:clamp(420px,42vw,530px);}   /* 피그마(293:622): 이미지+다크카드, gap 24px, 카드 높이 530 */

/* 좌측 이미지 (라운드 8px, 카드 높이에 맞춰 stretch) */
.hist-media{flex:0 0 auto;width:clamp(320px,33vw,440px);border-radius:8px;overflow:hidden;background:#e9e9e9;}
.hist-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* 우측 콘텐츠 — 다크 카드(#141414) */
.hist-info{flex:1 1 auto;min-width:0;background:#141414;border-radius:8px;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,2.4vw,32px);
  padding:clamp(40px,5vw,60px) clamp(40px,4.4vw,64px) clamp(40px,5vw,60px) clamp(44px,5.7vw,82px);}   /* 피그마: pl 82 / pr 64, 세로 중앙 */
.hist-year{font-family:var(--font-en);font-weight:400;font-size:clamp(40px,5.6vw,72px);
  line-height:1.2;color:#7ab3da;letter-spacing:-1px;}
.hist-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(6px,1vw,12px);}
.hist-list li{position:relative;font-family:var(--font-kr);font-weight:700;
  font-size:clamp(16px,1.5vw,22px);line-height:1.7;letter-spacing:-.4px;color:#fff;
  padding-left:22px;word-break:keep-all;}   /* 피그마: 흰색 22px Bold, line-height 2 */
.hist-list li::before{content:"";position:absolute;left:0;top:.72em;
  width:10px;height:2px;background:#fff;border-radius:1px;}

/* 하단 연도 탭바 */
.hist-tabs{display:flex;gap:6px;margin-top:clamp(28px,6vw,52px);}   /* 인디케이터 20px 위로 */
.hist-tab{flex:1 1 0;min-width:0;background:none;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;gap:18px;}
.hist-tab-line{height:3px;border-radius:2px;background:#dcdcdc;transition:background .45s ease;}
.hist-tab-label{font-family:var(--font-kr);font-weight:700;font-size:clamp(14px,1.4vw,22px);
  color:var(--c-ink3);text-align:center;letter-spacing:-.5px;white-space:nowrap;transition:color .35s ease;}
.hist-tab:hover .hist-tab-label{color:var(--c-ink2);}
.hist-tab.is-active .hist-tab-line{background:#7ab3da;}
.hist-tab.is-active .hist-tab-label{color:var(--c-ink);}
.hist-tab:focus-visible{outline:2px solid #7ab3da;outline-offset:4px;border-radius:4px;}

/* 데스크톱(≥769): 가로 슬라이더라 슬라이드별 리빌은 끔 — 오프스크린 슬라이드가 숨은 채 남는 것 방지 */
@media (min-width:769px){ .hist-slide.reveal-group>*{opacity:1;animation:none;} }

/* 모바일(≤768): 슬라이더 해제 → 연도별 세로 나열, 탭바 숨김 (다크 카드 미적용 — 기존 디자인 유지) */
@media (max-width:768px){
  .hist-lead{text-align:center;}
  .hist.reveal{opacity:1;transform:none;}   /* 통짜 리빌 해제 → 아래 슬라이드별 순차 리빌이 담당 */
  .hist-viewport{overflow:visible;}
  .hist-track{display:block;transform:none !important;transition:none;}
  .hist-slide{flex-direction:column;align-items:stretch;width:100%;opacity:1 !important;
    min-height:0;gap:22px;margin-bottom:80px;}   /* 연도별 간격 80px */
  .hist-slide:last-child{margin-bottom:0;}
  .hist-media{width:100%;aspect-ratio:16/11;border-radius:8px;}   /* 4면 모두 8px 통일 */
  .hist-info{background:none;border-radius:0;padding:0;justify-content:flex-start;gap:16px;}   /* 다크 카드 해제 */
  .hist-year{font-size:clamp(34px,10vw,48px);}
  .hist-list{gap:14px;}
  .hist-list li{font-weight:400;font-size:18px;line-height:1.4;letter-spacing:-.6px;color:var(--c-ink);padding-left:18px;}   /* 카피만 Regular */
  .hist-list li::before{width:8px;top:.66em;background:var(--c-ink);}   /* 대시 다시 다크 */
  .hist-tabs{display:none;}
}

/* ===== 사회공헌 (company/csr) — 첫 화면 풀블리드 옐로우 키비주얼 (Figma 294:61) ===== */
/* 배너 아래 첫 화면: 배경 #fbbe41 전면, 일러스트는 뷰포트 폭 약 68%로 중앙 배치(위아래 옐로우 여백) */
.csr-visual{background:#fbbe41;width:100%;display:flex;justify-content:center;align-items:center;
  padding:clamp(44px,6vw,80px) 24px;}
.csr-visual-img{display:block;width:min(985px,68%);max-width:100%;height:auto;}
/* 카피 영역: 타이틀(공통 cv-slogan-big) + 본문 + 후원 파트너 로고, 전체 중앙 정렬 */
.sub_contents.csr .inbox{text-align:center;}
.csr-tit{margin:0 0 24px;}   /* 타이틀 → 본문 24px (Figma 296:128 gap) */
/* 본문: Figma 22px/1.8, 반응형 축소 */
.csr-desc{line-height:1.8;
  color:var(--c-ink2);word-break:keep-all;}   /* size·weight = 공통 서브카피 스케일 */
/* 후원 파트너 로고 행 (Figma 296:135) — 균일 캔버스(430×156, 여백 포함) 이미지 → 동일 폭 215px */
/* 데스크톱: 4개 1행 / 태블릿: 2×2 / 모바일: 2×2 축소 — 3+1 배치는 없음 */
.csr-partners{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;align-items:center;
  gap:52px;margin-top:clamp(60px,9vw,93px);}
.csr-logo-box{width:215px;}
.csr-logo{display:block;width:100%;height:auto;}
/* 태블릿: 4개가 한 줄에 안 들어가는 폭 → 2열(2×2) */
@media (max-width:1160px){
  .csr-partners{grid-template-columns:repeat(2,auto);gap:clamp(40px,6vw,64px) clamp(48px,8vw,90px);}
}
@media (max-width:768px){
  .csr-visual{padding:clamp(28px,8vw,48px) 20px;}
  .csr-visual-img{width:100%;}
  .csr-tit-br{display:none;}   /* 큰 문장: 모바일에서는 자연 줄바꿈(우측 넘침 방지) */
  .csr-br{display:none;}       /* 본문: 모바일 자연 줄바꿈 */
  /* 모바일: 2열 유지, 로고 축소 */
  .csr-partners{grid-template-columns:repeat(2,1fr);gap:24px 16px;margin-top:56px;}
  .csr-logo-box{width:100%;max-width:170px;justify-self:center;}
}

/* ===================================================================
   서비스 공통 : 플로우 다이어그램 (.svc-flow)
   Figma 297:490 — 카드3 + 화살표2. service 하위 페이지에서 재사용.
   =================================================================== */
/* 타이틀 + 서브카피 묶음 — company/org.html(.org-intro/.org-lead)과 동일 구성 */
.svc-intro{text-align:center;}
/* 타이틀 → 서브카피 32px · 서브카피 28px(--fs-h3) — 공통 서브카피 스케일 대신 지정값 사용 */
.svc-lead{margin-top:32px;font-family:var(--font-kr);font-size:var(--fs-h3);font-weight:600;
  color:#7AB3DA;line-height:1.6;letter-spacing:-.4px;word-break:keep-all;}   /* 색은 Figma 지정값(키컬러 #89BDE0보다 살짝 진한 블루) */

/* 플로우 행: 카드 - 화살표 - 카드 - 화살표 - 카드 (Figma 280/420/280)
   화살표 트랙 64px = 갭16 + 아이콘32 + 갭16 → 카드와 화살표 사이 간격 16px */
.svc-flow{margin-top:60px;   /* 서브카피 → 카드 60px */
  display:grid;grid-template-columns:minmax(0,280fr) 64px minmax(0,420fr) 64px minmax(0,280fr);
  align-items:center;justify-items:stretch;}
.svc-flow-card{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;
  min-height:360px;padding:clamp(28px,3.2vw,52px) clamp(16px,1.8vw,26px);border-radius:8px;overflow:hidden;
  background:#fff;border:1px solid #ececec;   /* 흰 카드 스트로크 = company 위치안내(.loc_list li)와 동일 라인 */
  font-family:var(--font-kr);font-size:clamp(16px,1.6vw,22px);color:var(--c-ink2);
  text-align:center;word-break:keep-all;}
.svc-flow-card p{margin:0;line-height:1.72;font-weight:500;}   /* 본문 400 → 500 (1단계 볼드) */
.svc-flow-card.is-strong p{font-weight:700;line-height:2;}
/* 컬러 카드: 카드1 블루 · 카드3 퍼플 (Figma 297:490 지정값) — 흰 텍스트/테두리 제거 */
.svc-flow-card.is-blue{background:#7C9AD3;color:#fff;border:0;}
.svc-flow-card.is-purple{background:#7B74BF;color:#fff;border:0;}
/* 중앙 사진 카드: 이미지 + 30% 딤, 텍스트 반전 (Figma 298:1051) */
.svc-flow-card.has-photo{background:var(--c-primary);color:var(--c-white);border:0;}
.svc-flow-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:8px;}
.svc-flow-card.has-photo::after{content:"";position:absolute;inset:0;border-radius:8px;
  background:rgba(0,0,0,.3);}
.svc-flow-card.has-photo p{position:relative;z-index:1;}
/* 우측 카드: 이니셜열 + 설명열 2단 (Figma 298:1047) */
.svc-flow-keys{display:flex;gap:16px;justify-content:center;}
.svc-flow-keys .k{font-weight:700;text-align:center;color:var(--c-primary);}   /* 이니셜 SESC = 키블루 (#89BDE0) */
.svc-flow-card.is-purple .svc-flow-keys .k{color:#fff;}   /* 퍼플 카드 위 이니셜은 흰색 */
.svc-flow-keys p{line-height:1.76;}
.svc-flow-keys .v p{line-height:1.74;text-align:left;}
/* 화살표 (Figma 298:1055 · 36px 박스, 배경 없는 라인 아이콘)
   images/icon_right.svg 를 <img>로 사용 — mask+url()은 file:// 로 열면 크롬이 차단해 아이콘이 사라짐.
   검정 패스라 filter 로 리컬러(사이트 .ap-nav img 와 동일한 방식).
   무채색이라 invert 하나로 정확히 떨어짐: 검정 → invert(54%) = rgb(138,138,138) = #8A8A8A(--c-ink3) */
.svc-flow-arrow{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;margin:0 auto;}
.svc-flow-arrow img{display:block;width:32px;height:32px;filter:invert(54%);}

/* 태블릿: 카드 안쪽 여백 축소 (3단 유지 · 화살표 갭 16px는 그대로) */
@media (max-width:1160px){
  .svc-flow-card{min-height:300px;padding:clamp(20px,2.6vw,32px) clamp(14px,1.6vw,22px);
    font-size:18px;}   /* 태블릿 구간부터 카드 본문 18px 통일 */
  .svc-flow-card p{font-weight:700;}   /* 굵기도 18px 구간과 동일하게 (1024~1160만 500이던 불일치 해소) */
}
/* 모바일/좁은 태블릿: 세로 스택 + 화살표 아래 방향 (공통 가이드 ⑤ gap 32px) */
@media (max-width:960px){
  .svc-flow{grid-template-columns:1fr;gap:0;}
  .svc-flow-card{min-height:0;padding:44px 28px;font-size:18px;}   /* 태블릿·모바일 카드 본문 18px */
  .svc-flow-card p{font-weight:700;}                                /* 태블릿·모바일 700 Bold */
  .svc-flow-card.has-photo{min-height:280px;}
  .svc-flow-arrow{transform:rotate(90deg);margin:16px auto;}        /* 세로 스택: 카드 ↔ 화살표 16px */
  /* 카드가 1단 풀폭이 되는 구간(태블릿 포함) → 2줄 처리.
     전역 .lead-br-pc(≤768 숨김)는 건드리지 않고 플로우 카드 안에서만 스코프 */
  .svc-flow-card .lead-br-pc{display:none;}
}
/* 모바일(≤768): 타이틀 → 서브카피 42px (데스크톱 32px) · 서브카피 → 카드 40px (데스크톱 60px) */
@media (max-width:768px){
  .svc-lead{margin-top:42px;font-size:20px;}   /* 모바일 타이틀이 28px 고정이라 서브카피도 28px면 위계가 사라짐 → 20px */
  .svc-flow{margin-top:40px;}
}

/* ===================================================================
   서비스 공통 : 체크리스트(.chk_list) + 3단 썸네일(.service02)
   기존 사이트(sub.css/service.css) 레이아웃 유지 · 폰트/간격만 신규 가이드로 재작성.
   원본값 → 신규: 체크 24px→--fs-lead / 카드 h6 32px→18px·800(가이드 ③)
            / 3단 float 360px+60px gap → grid + clamp(18,2.2vw,28)(가이드 ⑤)
   =================================================================== */
/* ── 체크 리스트 ── 관세환급·AEO 공통. 아이콘 20px(icon_check2.svg) + gap 10px,
   본문 --fs-lead / 400 / #4A4A4A, 항목 간격 12px, 아이콘과 텍스트 가운데 정렬 */
.chk_list{margin-top:0;}
.sub_tit2 + .chk_list{margin-top:60px;}   /* 리드 카피 → 체크리스트 (공통 .sub_tit2 + div 88px 오버라이드) */
.chk_list ul{display:flex;flex-direction:column;align-items:center;gap:12px;}
.chk_list li{display:flex;justify-content:center;align-items:center;gap:10px;
  font-family:var(--font-kr);font-size:var(--fs-lead);font-weight:400;
  line-height:16px;letter-spacing:-.4px;color:var(--c-ink2);
  text-align:center;word-break:keep-all;}
.chk_list li::before{content:"";flex:none;width:20px;height:20px;
  background:url(../images/icon_check2.svg) no-repeat center;background-size:20px 20px;}

/* ── 표(.table01) ── 기존 사이트(css/sub.css) 디자인 이식 + 컬러 조정
   상단 3px 라인 #89BDE0 · 셀 테두리 #DCDCDC · thead 배경 #EBF5FC · 본문(tbody) 전 셀 화이트 · 전 셀 가운데 정렬.
   글자 크기만 공통 가이드(표=16px)를 따른다(원본은 20px).
   모바일은 원본과 동일하게 표를 넓게 두고 가로 스크롤로 처리. */
.table01{border-top:3px solid #89BDE0;}
.table01 table{width:100%;border-collapse:collapse;}
.table01 th,
.table01 td{border:1px solid #DCDCDC;padding:25px;word-break:keep-all;line-height:1.6;text-align:center;
  color:#222;font-size:var(--fs-body);}
.table01 th{font-weight:600;}
.table01 td{font-weight:400;}
.table01 thead th{background-color:#EBF5FC;}
/* 본문 셀 전체 화이트 — td 는 원래 배경이 없어 .mp-body 의 #F5F5F5 가 비쳤다 */
.table01 tbody th,
.table01 tbody td{background-color:#fff;}
/* 상단 3px 라인 바로 아래 겹치던 첫 행의 1px 회색 선 제거 */
.table01 thead tr:first-child > th,
.table01 thead tr:first-child > td{border-top:0;}
/* 본문 데이터 셀(td) 텍스트 — 불릿 목록(.dot)과 동일한 15px / 400 / #4A4A4A.
   구분 칼럼(th: 법인심사·기획심사·종합심사)은 제외되어 기존 16px / 600 / #222 유지 */
.table01 tbody td{font-size:15px;font-weight:400;color:#4A4A4A;}
/* 표 안 불릿 목록 — 관세환급 카드(.service02 li p .dot)와 동일한 크기·컬러로 통일.
   셀이 가운데 정렬이라 불릿 줄만 왼쪽 정렬해야 '·' 가 세로로 맞는다. */
.table01 .dot{position:relative;display:block;padding-left:15px;text-align:left;
  font-family:var(--font-kr);font-size:15px;font-weight:400;color:var(--c-ink2);
  line-height:1.6;letter-spacing:-.3px;word-break:keep-all;}
.table01 .dot + .dot{margin-top:6px;}
.table01 .dot em{position:absolute;left:0;top:0;font-style:normal;
  color:var(--c-primary);font-weight:700;}

/* ── 기업심사 진행절차(.step03) ── 기존 사이트(css/service.css) 그래픽 이식
   원형 6단계 · 4번째만 키블루 배경(#7ab9d8) · 4번째 아래 불릿 목록.
   배치는 3개씩 2줄(PC·태블릿 공통). 원 지름은 태블릿 비율(최대 284px)로 고정하고
   컨테이너가 좁아지면 함께 줄어든다. 화살표는 마크업의 <i> 에 CSS 로 아이콘을 넣어 대체. */
.step03{position:relative;margin-top:70px;padding-bottom:64px;--step-gap:60px;}   /* 원 사이 실제 틈 64px(= +li 좌우 마진 4px) → 화살표 32px 양옆 16px, .svc-flow 와 동일 */   /* 아래 여백 = 4번째 항목의 불릿 목록 자리 */
.step03 ul{display:grid;grid-template-columns:repeat(3,minmax(0,284px));justify-content:center;
  column-gap:var(--step-gap);row-gap:44px;}   /* PC·태블릿 행 간격 */
.step03 li:nth-child(3n) > i{display:none;}   /* 행 끝 화살표는 가리킬 대상이 없다 */
.step03 li{position:relative;min-width:0;aspect-ratio:1;border-radius:50%;
  background-color:#fff;border:1px solid #89BDE0;   /* 흰 면 + 키블루 1px 스트로크 */
  margin:0 2px;               /* 좌우 2px = 지름 4px 축소 (flex·grid 공통) */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:10px;}
.step03 .step_wrap2{color:#222;font-size:20px;font-weight:600;line-height:1.35;word-break:keep-all;}
.step03 .explain{margin-top:8px;color:#222;font-size:16px;font-weight:400;line-height:1.35;word-break:keep-all;}
.step03 .step3_4{background-color:#89BDE0;border-color:#89BDE0;}   /* 키블루 원 — 스트로크도 같은 색 */
.step03 .step3_4 .step_wrap2,
.step03 .step3_4 .explain{color:#fff;}
/* 항목 사이 화살표(꺾쇠) — 원본 컬러 #d5eaf5 */
/* 화살표 = 수출입통관 플로우(.svc-flow-arrow)와 동일한 아이콘·컬러.
   icon_right.svg(검정)에 invert(54%) → #8A8A8A */
/* 크기는 수출입통관 플로우(.svc-flow-arrow)와 동일한 32px 고정(PC·모바일 공통).
   원 사이 간격보다 커서 좌우 translate + 간격 절반만큼 밀어 틈의 정중앙에 놓는다. */
.step03 li > i{position:absolute;top:50%;left:100%;
  transform:translate(-50%,-50%);margin-left:calc(var(--step-gap) / 2 + 2px);   /* +2px = li 좌우 마진 보정 */
  width:32px;height:32px;
  background:url(../images/icon_right.svg) no-repeat center/contain;
  filter:invert(54%);}
/* 4번째 항목 아래 불릿 목록 */
.step03 .dot_list{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:220px;text-align:left;}
.step03 .dot{position:relative;display:block;padding-left:14px;color:#444;
  font-size:16px;line-height:1.5;word-break:keep-all;}
.step03 .dot em{position:absolute;left:0;top:0;font-style:normal;font-weight:700;color:#7ab9d8;}
/* 태블릿 세로~모바일: 3단 배치 유지. 원이 작아지므로 간격·화살표·글자를 함께 축소한다
   (32px 화살표는 좁은 틈에 들어가지 않아 이 구간만 20px).
   601~768px 에서 PC 글자 크기로는 원 밖으로 넘쳐 타원으로 깨지므로 768px 까지 적용. */
@media (max-width:768px){
  .step03{--step-gap:22px;}
  .step03 ul{row-gap:28px;}   /* 모바일 행 간격 */
  .step03 li{padding:6px;}
  .step03 li > i{width:20px;height:20px;}
  .step03 .step_wrap2{font-size:13px;line-height:1.3;}
  .step03 .explain{margin-top:4px;font-size:10px;line-height:1.3;}
  .step03 .dot_list{max-width:min(220px,60vw);}
  .step03 .dot{font-size:13px;padding-left:12px;}
}

/* ── 3단 썸네일 (이미지 → 제목 → 불릿) ── */
/* 체크리스트와 한 섹션이므로 공통 대블록 간격(.inbox > div + div = 180px)을 덮어씀 */
.sub_contents .inbox > .service02{margin-top:clamp(40px,5vw,70px);}
/* 가로 간격은 기존 clamp 유지, 줄바꿈으로 다음 행이 생길 때의 세로 간격만 64px
   (3단 → 2단으로 접혀도 행 간격은 동일하게 64px 유지) */
.service02 ul{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(18px,2.2vw,28px);row-gap:64px;}
.service02 li{min-width:0;}
.service02 li img{display:block;width:100%;height:auto;border-radius:8px;}
.service02 li h6{margin:24px 0 16px;font-family:var(--font-kr);font-size:18px;font-weight:800;
  color:var(--c-ink);letter-spacing:-.6px;line-height:1.4;word-break:keep-all;}   /* 카드 제목 = 가이드 ③ */
/* 카드 본문 = 표 본문 셀(.table01 tbody td)과 동일한 폰트 가이드 : 15px / 400 / #4A4A4A / 1.6.
   불릿(.dot)로 채워진 카드는 아래 규칙이 같은 값을 다시 지정하므로 영향 없음. 정렬은 기존 유지. */
.service02 li p{display:flex;flex-direction:column;gap:9px;
  font-family:var(--font-kr);font-size:15px;font-weight:400;color:#4A4A4A;
  line-height:1.6;letter-spacing:-.3px;word-break:keep-all;}
.service02 li p .dot{position:relative;display:block;padding-left:15px;
  font-family:var(--font-kr);font-size:15px;font-weight:400;color:var(--c-ink2);
  line-height:1.6;letter-spacing:-.3px;word-break:keep-all;}
.service02 li p .dot em{position:absolute;left:0;top:0;font-style:normal;
  color:var(--c-primary);font-weight:700;}   /* 불릿 = 키블루 (.int_list2 li p span em 과 동일) */

/* ── 관세환급 전용(body.refund): 피그마(node 308:95) 간격·구분선 정밀 반영 ──
   체크리스트→카드 100px · 카드 제목 하단 구분선(1px #141414)
   · 이미지→제목 36 / 제목→라인 12 / 라인→불릿 28
   ※ 체크리스트(.chk_list) 자체 스타일은 AEO 와 공통이라 위 공통 블록으로 승격 */
/* 체크리스트 → 3단 썸네일 100px (공통 clamp 70px 오버라이드) */
body.refund .sub_contents .inbox > .service02{margin-top:100px;}
/* 카드 이미지: 피그마 비율(338.664 × 206.961) 고정 */
body.refund .service02 li img{aspect-ratio:338.664 / 206.961;object-fit:cover;}
/* 카드 제목 + 하단 구분선: 이미지→제목 36 / 제목→라인 12 / 라인→불릿 28 */
body.refund .service02 li h6{margin:36px 0 0;padding-bottom:12px;
  border-bottom:2px solid var(--c-ink);font-weight:700;text-align:center;}   /* 제목 = 피그마 Bold(700) · 구분선 2px */
body.refund .service02 li p{margin-top:28px;}

@media (max-width:960px){
  .service02 ul{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  /* 모바일은 항목이 2줄로 접힘 → 고정 16px 유지 시 줄 겹침. 배수로 복구.
     두 줄로 접히면 align-items:center 때문에 체크가 두 줄 사이 중앙에 놓이므로 위쪽 정렬 +
     줄높이(24px)와 아이콘(18px) 차이의 절반(3px)만큼 내려 광학 정렬.
     항목 전체도 좌측 정렬 — 길이가 달라도 체크 아이콘이 같은 세로선에 맞는다. */
  .sub_tit2 + .chk_list{margin-top:48px;}
  .chk_list ul{align-items:flex-start;}   /* 세로 flex의 교차축 — 짧은 항목도 좌측에 맞춤 */
  .chk_list li{justify-content:flex-start;align-items:flex-start;text-align:left;
    font-size:var(--fs-body);line-height:1.5;}
  .chk_list li::before{width:18px;height:18px;background-size:18px 18px;margin-top:3px;}
  .service02 ul{grid-template-columns:1fr;row-gap:64px;}   /* 모바일 1단: 카드 사이 64px (PC 행간과 동일) */
  /* 모바일 표: 원본과 동일하게 폭을 넓게 두고 가로 스크롤(셀 줄바꿈으로 깨지는 것 방지) */
  .table01{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table01 table{width:200%;}
  .table01 th,
  .table01 td{padding:3vw 1vw;}
  /* 관세환급 모바일: 데스크톱 정밀 간격을 모바일 리듬에 맞게 축소 */
  body.refund .sub_contents .inbox > .service02{margin-top:60px;}
}

/* ===================================================================
   품목분류 전용(body.classification): 관세환급과 동일한 리듬·패딩·센터 정렬 정합
   섹션간 180px(모바일 90px) · 제목→본문 60px · 본문/소제목/이미지 가운데 정렬
   + 미정의 스타일(소제목·HS CODE 오류 콜아웃) 정돈
   =================================================================== */
body.classification .inbox{text-align:center;}                     /* 본문·이미지·콜아웃 전부 가운데 정렬 */
body.classification .text{color:var(--c-ink2);line-height:1.9;letter-spacing:-.3px;word-break:keep-all;}
/* 타이틀 → 서브카피 간격은 공통 규칙(PC 52px)을 따른다 — 페이지 전용 오버라이드 없음.
   (.sub_tit3 는 이 페이지에서 제거되어 관련 인접 규칙도 함께 정리) */
/* 소제목(이원화된 품목분류시스템) */
body.classification .sub_tit3{font-family:var(--font-kr);font-weight:700;color:#7AB3DA;
  font-size:28px;letter-spacing:-.6px;line-height:1.4;}
body.classification .sub_tit3 + .text{margin-top:24px;}
/* .wide — 지정 줄바꿈이 컨테이너 폭(1072px)보다 25px 모자라 밀리는 문단만
   .inbox 좌우 패딩(64px)에서 24px씩 회수해 1120px 확보. 데스크톱에서만 적용. */
@media (min-width:1025px){
  body.classification .text.wide{margin-left:-24px;margin-right:-24px;}
}
/* 다이어그램 이미지: 가운데 + 위 간격 60px */
body.classification p.center{margin-top:60px;}
body.classification .hscode{margin-top:38px;}   /* 서브카피 → HS CODE 다이어그램 */
body.classification .hscode img,
body.classification p.center img{display:block;max-width:100%;height:auto;margin:0 auto;}
/* 다이어그램 PC 표시폭 — 두 이미지의 가로 폭을 783px 로 통일(중요성 다이어그램 원본 979px 의 80%).
   위 max-width:100% 규칙 다음에 와야 적용된다(같은 명시도, 나중 규칙 우선).
   min(100%,…) 이어야 컨테이너가 더 좁은 화면에서 넘치지 않는다. */
body.classification .hscode img,
body.classification p.center img{max-width:min(100%,783px);}
/* HS CODE 오류 콜아웃: 다이어그램 아래 가운데 정렬 */
body.classification .hscode .error{margin-top:28px;}
body.classification .hscode .error strong{display:block;font-family:var(--font-kr);font-size:18px;
  font-weight:800;color:#EF500B;letter-spacing:-.4px;margin-bottom:10px;}   /* 팔레트 에러 컬러 */
body.classification .hscode .error p{color:var(--c-ink2);line-height:1.7;letter-spacing:-.3px;word-break:keep-all;}
/* 브레이크포인트별 줄바꿈 헬퍼 — .br-pc 는 PC 전용, .br-m 은 모바일 전용.
   (.err-br-* 는 오류 콜아웃에서 먼저 쓰던 이름으로, 동작이 같아 같은 규칙에 묶는다)
   숨겨진 <br> 자리에서 단어가 붙지 않도록 마크업에서 br 앞에 공백을 둔다(.addr-br-m 과 동일 방식).
   단, PC에서 두 조각이 붙어야 하는 곳(예: '국제협약(The')은 공백 없이 붙여 쓴다. */
.br-pc,.err-br-pc{display:inline;}
.br-m,.err-br-m{display:none;}
/* 3단계 줄바꿈 헬퍼 — PC(>1024) / 태블릿(769~1024) / 모바일(≤768)
   pc=PC만 · t=태블릿만 · m=모바일만 · pt=PC+태블릿 · tm=태블릿+모바일 */
.br3-pc,.br3-pt{display:inline;}
.br3-t,.br3-m,.br3-tm{display:none;}
@media (max-width:1024px){
  .br3-pc{display:none;}
  .br3-t,.br3-tm{display:inline;}
}
@media (max-width:768px){
  .br3-t,.br3-pt{display:none;}
  .br3-m{display:inline;}
}

@media (max-width:768px){
  .br-pc,.err-br-pc{display:none;}
  .br-m,.err-br-m{display:inline;}
  body.classification .sub_tit3{font-size:20px;}   /* 모바일: 컨텐츠 타이틀(28px)과 위계 구분 */
  /* 모바일: HS CODE 오류 콜아웃 — 제목 18px·본문 16px → 둘 다 14px */
  body.classification .hscode .error strong,
  body.classification .hscode .error p{font-size:14px;}
  body.classification .text + .sub_tit3{margin-top:40px;}
  body.classification p.center{margin-top:40px;}
  body.classification .hscode{margin-top:16px;}   /* 모바일: 서브카피 → HS CODE 다이어그램 (40 − 24) */
  body.classification .sub_tit3 + p.center{margin-top:20px;}
}

/* ===================================================================
   FTA 컨설팅 전용(body.fta): 피그마(node 327:1313) STEP 리스트 정밀 반영
   타이틀 → 스텝 100px · 그룹 사이 120px · 리드카피 → 첫 행 54px · 행 사이 44px
   행 = 상단 2px 라인 → 32px → [Step N(126px) + 24px + 제목 | 불릿 277 | 불릿 277]
   가로 합계 1072px = 470 + 24 + 277 + 24 + 277 (.inbox 안쪽 폭과 동일)
   =================================================================== */
body.fta .sub_tit2 + .fta-steps{margin-top:100px;}   /* 공통 88px(.sub_tit2 + div) 오버라이드 */
.fta-steps{display:flex;flex-direction:column;gap:160px;}   /* STEP 1~3 끝 → STEP 4~6 리드 카피 위 여백 */
.fta-group{display:flex;flex-direction:column;gap:54px;}
/* 그룹 리드 카피 — 28px / Bold / -0.6px / #7AB3DA, 가운데 정렬
   (품목분류 .sub_tit3 소제목과 동일 스케일·컬러) */
.fta-lead{font-family:var(--font-kr);font-size:28px;font-weight:700;color:#7AB3DA;
  line-height:1.4;letter-spacing:-.6px;text-align:center;word-break:keep-all;}
/* 리드 카피가 두 문장으로 나뉘는 경우 문장 사이 24px (문장 안 줄바꿈은 <br> 그대로) */
.fta-lead > span{display:block;}
.fta-lead > span + span{margin-top:24px;}
.fta-list{list-style:none;display:flex;flex-direction:column;gap:44px;}
/* 좌측 열은 flex:1(1072px 에서 470px), 불릿 열은 277px 고정 — 피그마와 동일 */
.fta-step{display:grid;grid-template-columns:minmax(0,1fr) 277px 277px;gap:24px;
  align-items:start;padding-top:32px;border-top:2px solid var(--c-ink);}
.fta-step-head{display:flex;align-items:center;gap:24px;height:36px;}
/* 피그마는 Step 40px / 제목 38px — 실제 지면 밸런스에 맞춰 전 스텝 공통 8px 축소 */
/* Step N 은 고정폭 없이 글자폭 그대로 — 제목과의 간격을 전 브레이크포인트 공통 24px 로 통일 */
.fta-step-no{flex:none;font-family:var(--font-en);font-size:32px;font-weight:700;
  color:var(--c-ink);line-height:36px;letter-spacing:-.6px;}
.fta-step-title{font-family:var(--font-kr);font-size:30px;font-weight:700;color:var(--c-ink);
  line-height:36px;letter-spacing:-1px;white-space:nowrap;}
/* 불릿 목록 — 18px / Regular / 보조 텍스트 #4A4A4A / 24px 행높이 · 항목 간격 10px · 불릿 키블루 */
.fta-step-desc{display:flex;flex-direction:column;gap:10px;}
.fta-step-desc .dot{position:relative;display:block;padding-left:15px;
  font-family:var(--font-kr);font-size:18px;font-weight:400;color:var(--c-ink2);
  line-height:24px;letter-spacing:-.3px;word-break:keep-all;}
.fta-step-desc .dot em{position:absolute;left:0;top:0;font-style:normal;font-weight:700;
  font-size:17px;color:var(--c-primary);}
/* 불릿 열이 하나뿐인 행(Step 4·5)은 두 열을 합쳐 긴 문장이 한 줄로 들어가게 — 피그마와 동일한 시작 위치 유지 */
.fta-step-desc.wide{grid-column:2 / -1;}

@media (max-width:1024px){
  /* 태블릿: 스텝 제목은 왼쪽에 그대로 두고, 불릿 2열을 오른쪽 한 열로 합쳐 4개를 이어서 리스트업.
     row-gap 을 불릿 항목 간격(10px)과 맞춰 두 <p> 가 하나의 목록처럼 읽히게 한다. */
  .fta-step{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:24px;row-gap:10px;}
  .fta-step-head{grid-column:1;}
  .fta-step-desc,
  .fta-step-desc.wide{grid-column:2;}   /* 두 번째 <p> 는 같은 열의 다음 행으로 자동 배치 */
  .fta-step-title{white-space:normal;}
}
@media (max-width:768px){
  body.fta .sub_tit2 + .fta-steps{margin-top:60px;}
  .fta-steps{gap:80px;}
  .fta-group{gap:36px;}
  .fta-lead{font-size:20px;line-height:1.5;}   /* 모바일: 컨텐츠 타이틀(28px)과 위계 구분 — .sub_tit3 와 동일 규칙 */
  .fta-list{gap:32px;}
  /* 모바일: Step N / 제목 / 불릿을 같은 그리드에 올려, 제목이 시작하는 지점에 불릿 목록을 맞춘다.
     불릿 <p> 2개의 간격(row-gap)을 항목 간격과 같은 8px 로 둬 4개가 균일한 행간으로 이어진다. */
  .fta-step{grid-template-columns:78px minmax(0,1fr);column-gap:14px;row-gap:8px;padding-top:20px;}
  .fta-step-head{display:contents;}   /* 래퍼를 걷어내 no/제목이 그리드 아이템이 되게 */
  .fta-step-no{grid-column:1;grid-row:1;font-size:26px;line-height:1.2;}   /* 78px = 가장 넓은 'Step 4'(76.3px) 기준 — 전 행 제목 시작선 일치 */
  .fta-step-title{grid-column:2;grid-row:1;font-size:24px;line-height:1.3;}
  .fta-step-desc,
  .fta-step-desc.wide{grid-column:2;gap:8px;}
  .fta-step-desc:first-of-type{margin-top:8px;}   /* 제목 → 첫 불릿 16px(8+8), 불릿끼리는 8px 균일 */
  .fta-step-desc .dot{font-size:15px;line-height:1.6;padding-left:13px;}
  .fta-step-desc .dot em{font-size:15px;}
}

/* ===================================================================
   AEO 컨설팅 전용(body.aeo)
   소제목(.sub_tit3)·설명문(.explain) 가운데 정렬 + 공인대상 9개 부문 카드
   카드는 기존 사이트(css/service.css .icon_list) 디자인 이식 —
   원본 1200px 컨테이너(카드 380px)를 리뉴얼 1072px 에 맞춰 축소 적용
   =================================================================== */
/* 소제목 — 품목분류 .sub_tit3 와 동일 스케일·컬러, 가운데 정렬 */
body.aeo .sub_tit3{font-family:var(--font-kr);font-weight:700;color:#7AB3DA;
  font-size:28px;letter-spacing:-.6px;line-height:1.4;text-align:center;word-break:keep-all;}
body.aeo .explain{font-size:var(--fs-lead);font-weight:400;color:var(--c-ink2);
  line-height:1.7;letter-spacing:-.3px;text-align:center;word-break:keep-all;}
/* 두 줄짜리 긴 문장형 타이틀 — 공통 40px 대신 28px */
body.aeo .sub_tit2.is-sm{font-size:28px;}
body.aeo .text + .sub_tit3{margin-top:80px;}
body.aeo .sub_tit3 + .explain{margin-top:24px;}
body.aeo .sub_tit3 + .icon_list{margin-top:40px;}
body.aeo .icon_list + .sub_tit3{margin-top:80px;}
body.aeo .explain + .table01{margin-top:32px;}
/* 의의 다이어그램 */
body.aeo p.center{margin-top:60px;}
body.aeo p.center img{display:block;max-width:100%;height:auto;margin:0 auto;}

/* 공인대상 9개 부문 — 번호 + 라벨(좌) / 아이콘(우), 홀수 블루·짝수 퍼플 테두리 */
body.aeo .icon_list ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
body.aeo .icon_list li{display:flex;align-items:center;gap:20px;min-height:112px;
  padding:0 116px 0 28px;border-radius:28px;   /* 우측 116px = 아이콘 84px + 여백 */
  font-family:var(--font-kr);font-size:20px;font-weight:600;color:#222;
  letter-spacing:-.5px;line-height:1.3;word-break:keep-all;
  background-repeat:no-repeat;background-position:right 24px center;background-size:84px 84px;}
body.aeo .icon_list li span{flex:none;font-size:20px;font-weight:700;}
body.aeo .icon_list li:nth-child(odd){border:2px solid #77b7d7;}
body.aeo .icon_list li:nth-child(even){border:2px solid #6f72cb;}
body.aeo .icon_list .icon1{background-image:url(../images/sub2/sub6_icon1.png);}
body.aeo .icon_list .icon2{background-image:url(../images/sub2/sub6_icon2.png);}
body.aeo .icon_list .icon3{background-image:url(../images/sub2/sub6_icon3.png);}
body.aeo .icon_list .icon4{background-image:url(../images/sub2/sub6_icon4.png);}
body.aeo .icon_list .icon5{background-image:url(../images/sub2/sub6_icon5.png);}
body.aeo .icon_list .icon6{background-image:url(../images/sub2/sub6_icon6.png);}
body.aeo .icon_list .icon7{background-image:url(../images/sub2/sub6_icon7.png);}
body.aeo .icon_list .icon8{background-image:url(../images/sub2/sub6_icon8.png);}
body.aeo .icon_list .icon9{background-image:url(../images/sub2/sub6_icon9.png);}

/* 위험관리 4단계 카드 — 피그마(node 327:2150)
   카드 280px·간격 28px(총 1204px) → 리뉴얼 1072px 에 맞춰 4열 균등 배분
   헤더 160px(단계별 솔리드 컬러 · 번호 16px / 120×2px 라인 / 제목 22px, 전부 화이트)
   본문 24px 패딩 · 불릿 15px #4A4A4A · 기호 키블루 */
body.aeo .step02{margin-top:80px;}
body.aeo .step02 ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;align-items:stretch;}
body.aeo .step02 li{display:flex;flex-direction:column;
  background:#fff;border-radius:8px;overflow:hidden;}
body.aeo .step02 .step-head{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;height:160px;}
body.aeo .step02 .step-no{font-family:var(--font-kr);font-size:16px;font-weight:700;color:#fff;
  line-height:25.2px;letter-spacing:-.6px;}
body.aeo .step02 .step-line{width:120px;height:2px;background:#fff;}
body.aeo .step02 h6{font-family:var(--font-kr);font-size:22px;font-weight:700;color:#fff;
  line-height:25.2px;letter-spacing:-.6px;text-align:center;word-break:keep-all;}
body.aeo .step02 .step-desc{display:flex;flex-direction:column;gap:6px;flex:1;padding:24px;}
body.aeo .step02 .step-desc .dot{position:relative;display:block;padding-left:15px;
  font-family:var(--font-kr);font-size:15px;font-weight:400;color:var(--c-ink2);
  line-height:24px;letter-spacing:-.3px;word-break:keep-all;}
body.aeo .step02 .step-desc .dot em{position:absolute;left:0;top:0;font-style:normal;font-weight:700;
  color:var(--c-primary);}
body.aeo .step02 .step2_1 .step-head{background:#89BDE0;}
body.aeo .step02 .step2_2 .step-head{background:#85B0E4;}
body.aeo .step02 .step2_3 .step-head{background:#7C9AD3;}
body.aeo .step02 .step2_4 .step-head{background:#7B74BF;}

@media (max-width:1024px){
  /* 3열은 카드 폭이 좁아 라벨이 아이콘과 겹친다 → 2열 */
  body.aeo .icon_list ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
  body.aeo .step02 ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
}
@media (max-width:768px){
  /* 모바일: 기존 사이트 모바일과 같은 세로 배치(번호 위 · 아이콘 가운데 · 라벨 아래) */
  body.aeo .sub_tit3{font-size:20px;}
  body.aeo .explain{font-size:var(--fs-body);}
  body.aeo .text + .sub_tit3{margin-top:48px;}
  body.aeo .sub_tit3 + .icon_list{margin-top:24px;}
  body.aeo .icon_list + .sub_tit3{margin-top:48px;}
  body.aeo p.center{margin-top:40px;}
  /* 의의 다이어그램(1472×242)은 모바일 폭으로 줄이면 라벨이 3px 수준으로 뭉갠다.
     표(.table01)와 같은 방식으로 최소 폭을 확보하고 가로 스크롤 — 세로형 모바일 이미지가 준비되면 교체할 것 */
  body.aeo p.center{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  body.aeo p.center img{min-width:620px;}
  body.aeo .icon_list ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
    grid-auto-rows:1fr;}   /* 세 행 높이 균일 — 라벨이 두 줄로 접히는 카드가 있어도 카드 크기는 같게 */
  body.aeo .icon_list li{flex-direction:column;justify-content:flex-start;gap:0;
    min-height:0;padding:14px 8px 16px;border-radius:14px;
    font-size:14px;line-height:1.35;text-align:center;
    word-break:normal;   /* 좁은 카드에서 긴 라벨(화물운송주선업자)이 넘치지 않도록 한글 문자 단위 줄바꿈 허용 */
    background-position:center 42px;background-size:52px 52px;}
  /* 번호(위) → 아이콘 52px → 라벨(아래). 아이콘이 배경이라 라벨 자리를 margin 으로 확보 */
  body.aeo .icon_list li span{font-size:14px;line-height:1.35;margin-bottom:72px;}
  body.aeo .icon_list li:nth-child(odd) span{color:#77b7d7;}
  body.aeo .icon_list li:nth-child(even) span{color:#6f72cb;}
  /* 위험관리 카드 모바일: 2열 유지 · 헤더/여백/불릿 축소 */
  body.aeo .step02{margin-top:48px;}
  body.aeo .step02 ul{gap:12px;}
  body.aeo .step02 .step-head{height:110px;gap:8px;}
  body.aeo .step02 .step-no{font-size:15px;line-height:1.4;}
  body.aeo .step02 .step-line{width:72px;}
  body.aeo .step02 h6{font-size:18px;line-height:1.35;}
  body.aeo .step02 .step-desc{padding:16px 14px;gap:4px;}
  body.aeo .step02 .step-desc .dot{font-size:13px;line-height:1.5;padding-left:12px;}
}

/* ===== Insights — 게시판 영역 자리(배너 우선 적용 단계) =====
   게시판 마크업을 넣기 전까지 콘텐츠 높이만 확보한다. 게시판 이식 시 이 블록은 제거. */
.board-placeholder{min-height:240px;}