/* ==========================================================================
   UroLink — Main(홈) Stylesheet
   원본: D:\프로젝트\유로링크\ROOT\css\main.css 이식.
   .dropdown → .has-dropdown > ul 로만 selector 교체(레이아웃 스킨 style.css와 동일 이유).
   ========================================================================== */

:root{
  --ink:#12161F;
  --blue:#2E8FEF;
  --blue-deep:#123B7A;
  --ds-blue-500:#2e66bf;
  --paper:#F7F7F4;
  --paper-deep:#EFEFEA;
  --line:#E2E2DC;
  --mist:#767A82;
  --nav-h:80px;
  --pad:clamp(24px, 6vw, 100px);
  --ease: cubic-bezier(.65,0,.15,1);
  --page-ms: 900ms;
  --card-pad-x: clamp(25px, 3vw, 30px);
}

/* box-sizing 리셋, ONE-Mobile-Title, body.resize-no-transition, body.nav-scroll-lock는
   레이아웃 스킨 style.css(공용)에 이미 있음 — 아래 scroll-snap 관련 html 규칙만 홈 전용 */

html{
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
html::-webkit-scrollbar{ display:none; }

@media (max-height: 720px), (max-width: 400px) and (max-height: 800px){
  html{ scroll-snap-type:none; }
  .page{
    height:auto;
    min-height:600px;
    overflow:visible;
    scroll-snap-align:none;
    scroll-snap-stop:normal;
  }
  .page#products{ min-height:650px; }
  .product-card-body{ padding-bottom:clamp(56px, 6vw, 64px); }
}

/* 720px 이하 높이(PC 포함, 너비 무관) 또는 가로 400px 이하이면서 세로 800px 이하일 때는
   섹션이 스냅 없이 자유 스크롤되므로, 고정 헤더가 섹션별 dark/light 테마에 의존할 수 없어
   스크롤이 발생하면 강제로 불투명 처리(main.html JS의 isFreeScrollViewport와 동일 조건 유지). */
.site-header.force-opaque{ background:#fff !important; border-bottom-color:var(--line) !important; }
.site-header.force-opaque .logo-color{ display:block !important; }
.site-header.force-opaque .logo-white{ display:none !important; }
.site-header.force-opaque .gnb > ul > li > a,
.site-header.force-opaque .gnb > ul > li > span{ color:var(--ink) !important; }
.site-header.force-opaque .burger span{ background:var(--ink) !important; }

h1,h2,h3,p{ margin:0; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-deep);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:currentColor;
}
.eyebrow.on-dark{ color:rgba(255,255,255,.82); }

/* ==========================================================================
   Full-page sections (네이티브 CSS scroll-snap — #products 내부의 휠/터치로
   제품 탭을 먼저 순환시키는 것 외에는 커스텀 스크롤 가로채기 없음;
   위 free-scroll 구간(720px 이하 높이, 또는 가로 400px 이하이면서 세로 800px 이하)에서는 비활성화됨)
   ========================================================================== */
.page{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  flex-direction:column;
}

.page-inner{
  width:100%;
  max-width:1480px;
  margin:0 auto;
}

.bg-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.bg-media img{
  position:absolute;
  top:40%; left:50%;
  width:100%;
  max-width:2000px;
  height:auto;
}
.bg-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

/* ==========================================================================
   Header / Nav — 레이아웃(position/크기/정렬/dropdown 구조 등)은 레이아웃 스킨
   style.css(공용)에 이미 있음. 여기 남은 건 홈만의 상태 전환(is-light/is-dark/
   on-products/on-footer, 로고 스왑)과 값이 실제로 다른 것(dropdown 그림자,
   호버 배경색 — 홈은 --paper-deep, 서브페이지는 --paper-soft)뿐.
   ========================================================================== */
.site-header.is-light{
  background:rgba(247,247,244,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.site-header.is-dark{
  /* ⚠ 레이아웃 스킨(css_images/style.css)의 .site-header 기본값은 서브페이지용 밝은
     글래스 배경을 무조건 깔고 있다(원본 content.css의 라이트 테마를 이식). 원본은
     .site-header 자체에 배경이 없어 is-dark가 곧 투명이었지만, 이 프로젝트 구조에서는
     명시적으로 transparent 로 되돌려야 히어로 위에서 검정 배경이 그대로 비친다.
     빠뜨리면 흰 글자가 밝은 배경과 겹쳐 흐릿하게 보이는 버그가 생긴다. */
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:rgba(255,255,255,.16);
}
.site-header.on-products{
  background:rgba(0, 0, 0, 0.10);
}
.site-header.on-footer{
  background:#0A0D13;
  border-bottom-color:rgba(255,255,255,.14);
}
/* 기본 표시 상태(display:block/none)는 레이아웃 스킨 style.css가 전 페이지 공통으로 정의 —
   여기는 홈 전용 .is-dark 상태의 오버라이드만 담당 */
.site-header.is-dark .logo-color{ display:none; }
.site-header.is-dark .logo-white{ display:block; }

.site-header.is-dark .gnb > ul > li > a,
.site-header.is-dark .gnb > ul > li > span{ color:#fff; }

/* dropdown 그림자/애니메이션 훅만 홈 자체 값으로 덮어씀 (⚠ .gnb 로 스코프 —
   .has-dropdown 는 콘텐츠 서브페이지의 hero-location 칩도 재사용하는 클래스).
   ⚠ 반드시 데스크톱 전용(min-width:901px)으로 감쌀 것 — 이 <link>가 main.html의 fragment
   안에 있어 layout.html <head>의 style.css보다 문서상 뒤에 와서, 미디어쿼리 없이 두면
   동일 우선순위 캐스케이드에서 style.css의 모바일 transform:none 리셋을 홈 화면에서만
   덮어써버려 모바일 드롭다운이 옆으로 밀리는 버그가 난다(서브페이지는 main.css를 안
   불러오니 멀쩡했음). */
@media (min-width: 901px){
  .gnb .has-dropdown > ul{
    transform:translateX(-50%) translateY(0);
    box-shadow:0 30px 60px -16px rgba(10,15,25,.22);
  }
}
.gnb .has-dropdown > ul li a:hover{ background:var(--paper-deep); color:var(--blue-deep); }

.site-header.is-dark .burger span{ background:#fff; }

@media (max-width: 900px){
  /* is-dark 상태의 흰 글자색을 모바일 패널 안에서는 강제로 눌러야 해서 !important 필요 */
  .gnb > ul > li > a,
  .gnb > ul > li > span{ padding:18px 0; font-size:18px; width:100%; justify-content:space-between; color:var(--ink) !important; }
  .gnb .has-dropdown > ul{
    background:var(--paper-deep);
    padding:8px 12px 12px;
  }

  .site-header.nav-open{ background:#fff; border-bottom-color:var(--line); }
  .site-header.nav-open .logo-color{ display:block; }
  .site-header.nav-open .logo-white{ display:none; }
  .site-header.nav-open .burger span{ background:var(--ink); }
}

/* vertical page indicator (square markers + connecting line) */
.page-dots{
  position:fixed;
  right:28px;
  top:50%;
  transform:translateY(-50%);
  z-index:150;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:60px;
}
.page-dots::before{
  content:"";
  position:absolute;
  left:50%;
  top:3.5px;
  bottom:3.5px;
  width:1px;
  background:rgba(255,255,255,.3);
  transform:translateX(-50%);
  z-index:0;
}
.page-dot{
  position:relative;
  z-index:1;
  width:7px;
  height:7px;
  border:1.5px solid rgba(255,255,255,.55);
  background:transparent;
  padding:0;
  cursor:pointer;
  flex:none;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.page-dot.active{
  background:#fff;
  border-color:#fff;
  transform:scale(1.3);
}
.page-dots.on-light .page-dot{ border-color:rgba(18,22,31,.35); }
.page-dots.on-light::before{ background:rgba(18,22,31,.18); }
.page-dots.on-light .page-dot.active{ background:var(--ink); border-color:var(--ink); }

@media (max-width: 900px){
  .page-dots{ display:none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
#hero{
  color:#fff;
  background:
    radial-gradient(1100px 700px at 82% 20%, rgba(46,143,239,.22), transparent 60%),
    radial-gradient(900px 620px at 10% 95%, rgba(18,59,122,.45), transparent 55%),
    linear-gradient(160deg, #070C16 0%, #0B1B3A 55%, #0E2350 100%);
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  animation:hero-bg-pulse 10s ease-in-out infinite;
}
@keyframes hero-bg-pulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}
#hero::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(5,7,10,.78);
}
.hero-content{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:var(--nav-h) var(--pad) 0;
}
.hero-content .eyebrow{ margin-bottom:26px; }
.hero-title{
  font-family:'ONE-Mobile-Title', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:clamp(30px, 4.4vw, 58px);
  line-height:1.4;
  font-weight:800;
  letter-spacing:-0.02em;
  margin-bottom:38px;
  white-space:pre-line;
  text-align:center;
}
.hero-title .hw{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
}
.hero-title .hw span{
  display:inline-block;
  transform:translateY(115%);
  opacity:0;
}
#hero.is-revealed .hero-title .hw span{
  animation:hw-rise .8s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(var(--i) * 0.09s + 0.15s);
}
@keyframes hw-rise{
  to{ transform:translateY(0); opacity:1; }
}
.hero-desc{
  font-size:clamp(14.5px, 1.3vw, 17px);
  line-height:1.65;
  color:rgba(255,255,255,.8);
  max-width:580px;
  font-weight:400;
  opacity:0;
  transform:translateY(16px);
}
#hero.is-revealed .hero-desc{
  animation:hero-desc-in .8s cubic-bezier(.22,1,.36,1) .85s forwards;
}
@keyframes hero-desc-in{
  to{ opacity:1; transform:translateY(0); }
}

.scroll-cue{
  position:absolute;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.6);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  z-index:2;
}
.scroll-cue svg{ width:13px; height:13px; animation:bob 1.7s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }

@media (max-width: 900px){
  .hero-title{ max-width:none; }
}

/* ==========================================================================
   Products section
   ========================================================================== */
#products{ color:var(--ink); }
.product-stage{
  position:relative;
  flex:1;
  min-height:0;
}
.product-track-wrap{ position:absolute; inset:0; overflow:hidden; background:#0A0F18; }
.product-track{ position:relative; height:100%; width:100%; }
.product-slide{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.product-slide.is-active{ pointer-events:auto; }
.product-slide .bg-media img{
  top:0; left:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  opacity:0;
  transform:none;
  transition:opacity .7s;
  pointer-events:none;
}
.product-slide.is-active .bg-media img{ opacity:1; }
.product-slide .bg-scrim{
  background:none;
}

.product-card{
  position:absolute;
  z-index:2;
  top:50%;
  left:max(32px, calc((100% - 1480px) / 2));
  transform:translateY(-50%) translateX(-200px);
  width:480px;
  height:520px;
  opacity:0;
  transition:opacity .7s, transform 1s;
}
.product-card-body{
  height:100%;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.9);
  border-radius:18px;
  box-shadow:0 40px 80px -20px rgba(6,9,15,.45);
  padding:clamp(40px, 4vw, 48px) var(--card-pad-x);
}
.product-card-body .product-more{ margin-top:auto; align-self:flex-start; }
.product-slide.is-active .product-card{ opacity:1; transform:translateY(-50%) translateX(0); }

.product-disclaimer{
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  color:var(--ds-gray-700);
  text-shadow:-1px 0px #ffffff, 0px 1px #ffffff, 1px 0px #ffffff, 0px -1px #ffffff;
}
.product-card .product-disclaimer{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  margin-top:12px;
  text-align:left;
}
/* PC(901px~)에서는 main.html의 JS가 이 요소를 .product-card 밖으로 옮겨
   .product-slide 바로 아래 자식으로 만든다 — 카드 폭이 아니라 화면 전체 폭 기준으로
   오른쪽 정렬하기 위함(카드가 containing block이면 카드 폭 안으로만 붙는다). */
.product-slide > .product-disclaimer{
  position:absolute;
  right:70px;
  bottom:125px;
  text-align:right;
  opacity:0;
  transition:opacity .7s;
}
.product-slide.is-active > .product-disclaimer{ opacity:1; }
/*
.product-slide[data-index="1"] > .product-disclaimer,
.product-slide[data-index="2"] > .product-disclaimer{
  color:#fff;
  text-shadow:-1px 0px #000000, 0px 1px #000000, 1px 0px #000000, 0px -1px #000000;
}
*/

.product-tag{
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:16px;
}
.product-card h3{
  font-size:clamp(22px, 2.6vw, 30px);
  font-weight:800;
  line-height:1.35;
  letter-spacing:-0.02em;
  white-space:pre-line;
  color:var(--ink);
  margin-bottom:18px;
}
.product-slide[data-index="0"] .product-card h3{ white-space:normal; }
.product-card p.desc{
  font-size:14.5px;
  line-height:1.65;
  color:var(--mist);
  margin-bottom:32px;
}
.product-card p.desc.desc--tight{ margin-bottom:14px; }

.product-purpose{
  box-sizing:border-box;
  font-size:12px;
  line-height:1.6;
  color:var(--mist);
  border:1px solid var(--ds-gray-200);
  padding:15px;
}
.product-purpose .pp-label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
}
.product-purpose ol{ margin:0; padding:0; list-style:none; }
.product-purpose li{
  position:relative;
  padding-left:8px;
  margin-bottom:5px;
  line-height:1.4;
}
.product-purpose li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:2px;
  height:2px;
  background:var(--ds-gray-400);
}

.product-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:700;
  color:var(--blue-deep);
  background:none;
  border:1px solid var(--blue-deep);
  border-radius:999px;
  padding:12px 22px;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s, color .2s;
}
.product-more:hover{ background:var(--blue-deep); color:#fff; }
.pm-arrow{
  display:inline-block;
  transition:transform .2s;
}
.product-more:hover .pm-arrow{ transform:translateX(4px); }

.product-selector{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
}
.selector-row{
  display:flex;
  align-items:stretch;
  width:100%;
}
.selector-item{
  flex:1;
  background:rgba(6,9,16,.65);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:none;
  border-top:1px solid rgba(255,255,255,.16);
  padding:20px 22px;
  cursor:pointer;
  text-align:center;
  transition:background .25s ease;
}
.selector-item:hover{ background:rgba(8,10,14,.48); }
.selector-item.active{
  background:#fff;
  border-top-color:#fff;
}
.selector-item .nm{
  font-size:22px;
  font-weight:700;
  color:#fff;
  transition:color .25s ease;
  display:block;
}
.selector-item .kd{
  display:block;
  font-size:14.5px;
  color:rgba(255,255,255,.6);
  margin-top:10px;
  transition:color .25s ease;
}
.selector-item.active .nm{ color:var(--ink); }
.selector-item.active .kd{ color:var(--mist); }

@media (max-width: 900px){
  .product-card{
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:88vw;
    height:auto;
  }
  .product-card-body{
    height:auto;
    max-height:none;
    overflow-y:visible;
  }
  .product-slide.is-active .product-card{ transform:translate(-50%, -50%); }
  .product-tag{ font-size:12px; }
  .product-card h3{ white-space:normal; }
  .product-card p.desc{
    font-size:13px;
    line-height:1.5;
  }
  .product-card-body .product-more{ margin-top:20px; }
  .product-card .product-disclaimer{
    position:static;
    margin-top:15px;
    line-height:1.4;
    color:#fff;
    text-shadow:0 1px 4px rgba(0, 0, 0, .6);
    opacity:0.9;
  }
  .selector-item .nm{ font-size:16px; }
  .selector-item .kd{ display:none; }
}

/* .product-slide.is-active .product-card 는 위 @media (max-width: 900px) 블록에서도
   transform:translate(-50%, -50%) 로 선언되어(줄 491) 동일 우선순위라 소스 순서로 캐스케이드가
   결정된다. 이 600px 이하 오버라이드가 이겨야 하므로 반드시 그 블록보다 뒤에 위치할 것. */
@media (max-height: 720px), (max-width: 400px) and (max-height: 800px){
  .product-slide.is-active .product-card{ top:40px; transform:translate(-50%, 0); }
  .product-card p.desc{ margin-bottom:0; }
}

/* ==========================================================================
   Core Values (dark photo background)
   ========================================================================== */
#values{ background:#05070C; color:#fff; }
#values .bg-scrim{
  background:linear-gradient(160deg, rgba(4,6,12,.5) 0%, rgba(4,6,12,.32) 45%, rgba(4,6,12,.56) 100%);
}

.float-dots{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.fd{
  position:absolute;
  border-radius:50%;
  filter:blur(1px);
  opacity:.55;
  animation:fd-float 14s ease-in-out infinite;
}
.fd-1{ width:34px; height:34px; left:8%;  top:22%; background:radial-gradient(circle, rgba(93,222,229,.85), transparent 70%); animation-duration:16s; animation-delay:0s; }
.fd-2{ width:18px; height:18px; left:22%; top:62%; background:radial-gradient(circle, rgba(255,183,94,.8), transparent 70%);  animation-duration:12s; animation-delay:1.5s; }
.fd-3{ width:50px; height:50px; left:38%; top:14%; background:radial-gradient(circle, rgba(93,222,229,.6), transparent 70%);  animation-duration:19s; animation-delay:.8s; }
.fd-4{ width:14px; height:14px; left:52%; top:70%; background:radial-gradient(circle, rgba(255,183,94,.75), transparent 70%); animation-duration:11s; animation-delay:2.4s; }
.fd-5{ width:26px; height:26px; left:68%; top:34%; background:radial-gradient(circle, rgba(93,222,229,.75), transparent 70%); animation-duration:15s; animation-delay:.4s; }
.fd-6{ width:40px; height:40px; left:82%; top:58%; background:radial-gradient(circle, rgba(93,222,229,.55), transparent 70%); animation-duration:18s; animation-delay:1s; }
.fd-7{ width:16px; height:16px; left:90%; top:20%; background:radial-gradient(circle, rgba(255,183,94,.7), transparent 70%);  animation-duration:13s; animation-delay:2s; }

@keyframes fd-float{
  0%, 100%{ transform:translate(0, 0); }
  25%{ transform:translate(36px, -54px); }
  50%{ transform:translate(-24px, -96px); }
  75%{ transform:translate(-48px, -36px); }
}

@media (max-width: 900px){
  .fd-1{ width:24px; height:24px; }
  .fd-2{ width:13px; height:13px; }
  .fd-3{ width:35px; height:35px; }
  .fd-4{ width:10px; height:10px; }
  .fd-5{ width:18px; height:18px; }
  .fd-6{ width:28px; height:28px; }
  .fd-7{ width:11px; height:11px; }
}

.values-inner{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:var(--nav-h);
}
.values-head{ margin-bottom:clamp(64px, 12vh, 116px); max-width:760px; margin-left:auto; margin-right:auto; text-align:center; }
.values-head .eyebrow{ margin-bottom:22px; }
.values-head h2{
  font-family:'ONE-Mobile-Title', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:clamp(32px, 4.6vw, 54px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:-0.02em;
  color:#fff;
  margin-bottom:22px;
}
.values-head p{
  font-size:16px;
  line-height:1.85;
  color:rgba(255,255,255,.68);
}

.values-cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}

@media (max-width: 1600px){
  .values-cols{ padding-left:var(--card-pad-x); padding-right:var(--card-pad-x); }
  .contact-grid{ padding-left:var(--card-pad-x); padding-right:var(--card-pad-x); }
}
.values-col{
  padding:0 clamp(20px, 2.4vw, 44px);
  border-left:1px solid rgba(255,255,255,.22);
  opacity:0;
  transform:translateY(40px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.values-col:first-child{ padding-left:0; border-left:none; }
.values-col:nth-child(1){ transition-delay:0s; }
.values-col:nth-child(2){ transition-delay:.15s; }
.values-col:nth-child(3){ transition-delay:.3s; }
#values.is-revealed .values-col{ opacity:1; transform:translateY(0); }
.vc-label{
  display:block;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue-soft, #6DB4FF);
  margin-bottom:18px;
}
.values-col h3{
  font-size:clamp(19px, 2vw, 24px);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.4;
  color:#fff;
  margin-bottom:28px;
}
.values-col p{
  font-size:15px;
  line-height:1.5;
  color:rgba(255,255,255,.68);
}

@media (max-width: 900px){
  .values-cols{ grid-template-columns:1fr; gap:30px; padding-left:var(--card-pad-x); padding-right:var(--card-pad-x); }
  .values-col p{ display:none; }
  .values-head p{ display:none; }
  .values-col{ padding:26px 0 0; border-left:none; border-top:1px solid rgba(255,255,255,.22); text-align:center; }
  .values-col h3{ margin-bottom:0; font-size:17px; }
  .vc-label{ font-size:11px; }
  .values-head{ margin-bottom:36px; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
#contact{ background:var(--ink); color:#fff; }
.contact-bg{ z-index:0; }
.contact-bg img{
  top:auto;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:2400px;
  height:auto;
  animation:rim-glow 7s ease-in-out infinite;
}
@keyframes rim-glow{
  0%, 100%{ filter:brightness(1) saturate(1); }
  50%{ filter:brightness(1.55) saturate(1.35); }
}
.contact-bg-scrim{
  background:linear-gradient(to top, rgba(5,7,10,.25) 0%, rgba(5,7,10,.8) 55%, rgba(5,7,10,.95) 100%);
}
.contact-main{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center; padding-top:var(--nav-h); overflow-y:auto; overflow-x:hidden; }
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; }
.contact-side .eyebrow{ margin-bottom:22px; }
.contact-side h2{ font-family:'ONE-Mobile-Title', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; font-size:clamp(30px, 4vw, 48px); font-weight:800; letter-spacing:-0.02em; margin-bottom:64px; }
.contact-card{ border-top:1px solid rgba(255,255,255,.18); }
.contact-row{ padding:32px 0; border-bottom:1px solid rgba(255,255,255,.18); }
.ct-label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:9px; display:block; }
.ct-val{ font-size:18px; line-height:1.75; color:#fff; }
.ct-val .en{ display:block; font-size:13.5px; color:rgba(255,255,255,.52); margin-top:5px; }

.map-wrap{ position:relative; width:820px; max-width:100%; height:500px; border:1px solid rgba(255,255,255,.18); overflow:hidden; }
.map-wrap > *{ max-width:100%; }
.map-wrap iframe{ width:100%; height:100%; border:0; filter:grayscale(.2) contrast(1.02); }
.map-wrap .root_daum_roughmap{ width:100% !important; }
.map-wrap .root_daum_roughmap .wrap_map{ height:500px !important; }

@media (max-width: 1300px){
  .contact-grid{ grid-template-columns:minmax(320px, .85fr) minmax(0, 1.15fr); }
  .map-wrap{ min-width:0; }
}

@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; gap:26px; min-width:0; }
  .contact-grid > *{ min-width:0; }
  .map-wrap{ width:100%; height:220px; }
  .map-wrap .root_daum_roughmap .wrap_map{ height:220px !important; }
  .ct-label{ display:none; }
  .ct-val .en{ display:none; }
  .ct-val .ct-fax{ display:none; }
  .contact-side .eyebrow{ display:none; }
  .contact-side h2{ text-align:center; margin-bottom:40px; }
  .contact-card{ display:flex; flex-direction:row; justify-content:space-between; align-items:center; border-top:none; gap:16px; }
  .contact-row{ padding:0; border-bottom:none; width:auto; }
  .ct-val{ font-size:13px; }
}

/* Footer — 완전히 레이아웃 스킨 style.css(공용)의 .site-footer/.footer-bottom-bar/.footer-top
   구조로 통일됨, 홈 전용 규칙 없음 */

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}