@charset "utf-8";
/* ==========================================================================
   SEM — Sustainable ESG Management
   Global stylesheet
   ========================================================================== */

@import url('pretendard.css');

:root{
  /* palette */
  --black:#0a1729;
  --section-dark:#0e2338;
  --footer-dark:#111418;
  --cta-dark:#102b49;
  --light:#f4f7fa;
  --white:#ffffff;

  /* brand */
  --brand:#0f6cb4;
  --brand-deep:#16467f;
  --brand-light:#4c9bd8;
  --brand-tint:#eaf1f8;

  --ink:#10233c;
  --ink-soft:#33455c;
  --mute:#61748a;
  --dim:#8496a9;
  --faint:#7d8fa3;

  --line:#dde5ee;
  --line-soft:#e9eff5;
  --line-dark:rgba(255,255,255,.18);
  --line-dark-soft:rgba(255,255,255,.1);

  /* metrics */
  --header-h:88px;
  /* 서브페이지 히어로: 헤더 아래로 보이는 높이 (it-solution 기준) */
  --sub-hero-h:clamp(312px, calc(32vw - 88px), 342px);
  --section-pad:clamp(46px,4.8vw,68px);   /* 모든 섹션 공통 상하 여백 */
  --head-gap:clamp(26px,2.6vw,34px);      /* 섹션 제목 -> 콘텐츠 간격 */
  --iso-h:340px;                          /* ISO 카드 높이(폭과 무관하게 고정) */
  --gutter:clamp(20px,4.7vw,68px);
  --radius:8px;
  --radius-sm:5px;

  --ease:cubic-bezier(.16,1,.3,1);
  --font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",
         "Malgun Gothic","맑은 고딕",system-ui,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden!important;max-width:100%;position:relative}
/* 이메일 등 긴 영문 문자열이 좁은 화면에서 컨테이너를 넘지 않도록 */
body{overflow-wrap:break-word}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.nav-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
:focus-visible{outline:2px solid var(--brand-light);outline-offset:3px}

.container{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   Shared type
   ========================================================================== */
.eyebrow{
  display:block;
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:14px;
}
.eyebrow--light{color:var(--brand-light)}

.section-title{
  font-size:clamp(25px,2.42vw,35px);
  font-weight:700;
  line-height:1.44;
  letter-spacing:-.02em;
  color:var(--ink);
}
.section-title--light{color:#fff}

.section-desc{
  margin-top:20px;
  font-size:15px;
  line-height:1.85;
  color:var(--mute);
}
.section-desc--light{color:rgba(255,255,255,.62)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:34px;
  min-height:52px;padding:0 26px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn .arw{flex:none;transition:transform .35s var(--ease)}
.btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn:hover .arw{transform:translateX(4px)}

.btn--sm{min-height:44px;padding:0 20px;gap:22px;font-size:13px}

.btn--ghost-rect{
  background:transparent;border-color:rgba(255,255,255,.3);color:#fff;border-radius:var(--radius);
}
.btn--ghost-rect:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--primary{
  justify-content:center;gap:10px;
  background:var(--brand);border-color:var(--brand);color:#fff;
}
.btn--primary:hover{background:#0b4f96;border-color:#0b4f96;color:#fff}

/* ==========================================================================
   Header & GNB
   ========================================================================== */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  background:transparent;
  border-bottom:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),-webkit-backdrop-filter .35s var(--ease),backdrop-filter .35s var(--ease);
}

/* 홈 화면 헤더 스크롤 상태 — 서브페이지와 동일한 화이트 네브바 */
body.home .header.is-scrolled{
  background:#ffffff;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom:1px solid #eef2f6;
  box-shadow:0 4px 16px rgba(0,0,0,.03);
}
body.home .header.is-scrolled .logo__symbol{filter:none !important}
body.home .header.is-scrolled .logo__mark{color:#0f172a !important;text-shadow:none !important}
body.home .header.is-scrolled .logo__sub{color:#64748b}
body.home .header.is-scrolled .gnb__link{color:#334155}
body.home .header.is-scrolled .gnb__item:hover .gnb__link,
body.home .header.is-scrolled .gnb__link.is-current{color:var(--brand)}
body.home .header.is-scrolled .gnb__link::after{background:var(--brand)}
body.home .header.is-scrolled .navbtn{color:#0f172a}
body.home .header.is-scrolled .header__cta{
  background:transparent;
  border:1.5px solid #0f172a;
  color:#0f172a;
  font-weight:600;
  box-shadow:none;
}
body.home .header.is-scrolled .header__cta:hover{
  background:#0f172a;
  border-color:#0f172a;
  color:#ffffff;
  box-shadow:0 4px 12px rgba(15,23,42,.15);
}

/* 히어로 위 투명 상태에서만 올화이트 로고 (스크롤/메가메뉴 시 해제) */
body.home .header:not(.mega-open):not(.is-scrolled) .logo__symbol{
  filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
body.home .header:not(.mega-open):not(.is-scrolled) .logo__mark{
  color:#ffffff !important;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}

/* ==========================================================================
   서브페이지 공통 헤더: 홈 화면(body.home) 제외 모든 페이지는 항상 화이트 네브바
   ========================================================================== */
body:not(.home) .header{
  background:#ffffff !important;
  border-bottom:1px solid #eef2f6 !important;
  box-shadow:0 4px 16px rgba(0,0,0,.03) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body:not(.home) .header .logo__mark{
  color:#0f172a !important;
  text-shadow:none !important;
}
body:not(.home) .header .logo__symbol{
  filter:none !important;
}
body:not(.home) .header .logo__sub{
  color:#64748b !important;
}
body:not(.home) .header .gnb__link{
  color:#334155 !important;
}
body:not(.home) .header .gnb__item:hover .gnb__link,
body:not(.home) .header .gnb__link.is-current{
  color:var(--brand) !important;
}
body:not(.home) .header .gnb__link::after{
  background:var(--brand) !important;
}
body:not(.home) .header .navbtn{
  color:#0f172a !important;
}
body:not(.home) .header .header__cta{
  background:transparent !important;
  border:1.5px solid #0f172a !important;
  color:#0f172a !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
body:not(.home) .header .header__cta:hover{
  background:#0f172a !important;
  border-color:#0f172a !important;
  color:#ffffff !important;
  box-shadow:0 4px 12px rgba(15,23,42,.15) !important;
}

/* 메가 드롭다운 오픈 시 (모든 페이지 공통) */
.header.mega-open{
  background:#ffffff !important;
  border-bottom:1px solid #e2e8f0 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.06) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.header.mega-open .logo__symbol{
  filter:none !important;
}
.header.mega-open .logo__mark{
  color:#0f172a !important;
  text-shadow:none !important;
}
.header.mega-open .logo__sub{
  color:#64748b !important;
}
.header.mega-open .gnb__link{
  color:#1e293b !important;
}
.header.mega-open .gnb__item:hover .gnb__link,
.header.mega-open .gnb__link.is-current{
  color:var(--brand) !important;
}
.header.mega-open .gnb__link::after{
  background:var(--brand) !important;
}
.header.mega-open .navbtn{
  color:#0f172a !important;
}
.header.mega-open .header__cta{
  border:1.5px solid #0f172a !important;
  color:#0f172a !important;
  background:transparent !important;
  box-shadow:none !important;
}
.header.mega-open .header__cta:hover{
  background:#0f172a !important;
  border-color:#0f172a !important;
  color:#ffffff !important;
}
.header__inner{display:flex;align-items:center;height:100%;gap:40px}

.logo{display:flex;align-items:center;gap:14px;flex:none}
.logo__symbol{
  flex:none;width:auto;height:42px;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.35));
  transition:filter .3s var(--ease);
}
.logo__mark{font-size:35px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1;margin-right:4px;transition:color .3s var(--ease)}
.logo__sub{
  font-size:12px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.65);
  text-transform:uppercase;white-space:nowrap;
  align-self:center;transition:color .25s var(--ease);
}

.gnb{margin-left:auto}
.gnb__list{display:flex;align-items:center;gap:clamp(28px,3.2vw,56px)}
.gnb__item{position:relative}
.gnb__link{
  position:relative;display:flex;align-items:center;height:var(--header-h);
  font-size:17px;font-weight:700;letter-spacing:-.015em;color:rgba(255,255,255,.94);
  white-space:nowrap;transition:color .25s var(--ease);
}
.gnb__item:hover .gnb__link,.gnb__link.is-current{color:#fff}
.gnb__link::after{
  content:"";position:absolute;left:0;right:0;bottom:28px;height:3px;background:var(--brand-light);
  border-radius:2px;
  transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease),background .25s;
}
.gnb__item:hover .gnb__link::after,.gnb__link.is-current::after{transform:scaleX(1)}

/* Full-width Mega Dropdown Menu (White Background) */
.header__mega{
  position:absolute;top:100%;left:0;right:0;
  background:#ffffff;
  border-top:1px solid #f1f5f9;
  border-bottom:1px solid #e2e8f0;
  box-shadow:0 24px 48px -6px rgba(15,23,42,.12);
  padding:28px 0 34px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.header.mega-open .header__mega{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0);
}
.mega__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
.mega__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:44px;
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}
.mega__col{
  display:flex;flex-direction:column;
}
.mega__col-title{
  font-size:16px;font-weight:700;letter-spacing:-.015em;
  color:#0f172a;padding-bottom:12px;margin-bottom:14px;
  border-bottom:2px solid #e2e8f0;
  transition:border-color .2s;
}
.mega__col-title a{color:#0f172a;transition:color .2s}
.mega__col:hover .mega__col-title{
  border-bottom-color:var(--brand);
}
.mega__col:hover .mega__col-title a{
  color:var(--brand);
}
.mega__list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:10px;
}
.mega__list a{
  font-size:14.5px;font-weight:500;
  color:#64748b;
  transition:all .18s var(--ease);
  display:inline-block;
}
.mega__list a:hover{
  color:var(--brand);transform:translateX(4px);
}

@media (max-width:960px){
  .header__mega{display:none !important;}
}

.header__cta{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 16px;
  border-radius:6px;background:transparent;
  border:1.5px solid rgba(255,255,255,.85);
  color:#ffffff;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .2s var(--ease);
}
.header__cta:hover{
  background:rgba(255,255,255,.14);
  border-color:#ffffff;
  color:#ffffff;
  transform:translateY(-1px);
}

.navbtn{
  display:none;flex:none;place-items:center;
  width:48px;height:48px;margin-right:0;
  border-radius:var(--radius);color:#fff;
  background:transparent;border:0;outline:none;
  cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
@media (hover:hover){ .navbtn:hover{background:rgba(255,255,255,.12)} }
.navbtn svg{
  grid-area:1/1;
  width:36px;
  height:36px;
  stroke-width:2.2;
}
.navbtn__close{display:none}
body.nav-open .navbtn__open{display:none}
body.nav-open .navbtn__close{display:block}

/* mobile drawer */
.mnav{
  position:fixed;inset:0;z-index:99;
  background:rgba(10,14,23,.96);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  padding:calc(var(--header-h) + 16px) var(--gutter) 40px;overflow-y:auto;
  display:flex;flex-direction:column;
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
body.nav-open .mnav{opacity:1;visibility:visible;transform:none}
.mnav__list{display:grid}
.mnav__group{border-bottom:1px solid rgba(255,255,255,.1)}

/* 카테고리 헤더 (탭하면 펼침) */
.mnav__head{
  appearance:none;background:none;border:0;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 4px;cursor:pointer;text-align:left;
  font-size:18px;font-weight:700;letter-spacing:-.02em;color:#fff;
  transition:color .25s var(--ease);
}
.mnav__head:hover,.mnav__head:active{color:var(--brand-light)}
.mnav__chev{flex:none;color:rgba(255,255,255,.5);transition:transform .3s var(--ease),color .25s var(--ease)}
.mnav__head[aria-expanded="true"]{color:var(--brand-light)}
.mnav__head[aria-expanded="true"] .mnav__chev{transform:rotate(180deg);color:var(--brand-light)}

/* 하위 항목 패널 */
.mnav__panel{
  max-height:0;overflow:hidden;
  transition:max-height .34s var(--ease);
}
.mnav__head[aria-expanded="true"] + .mnav__panel{max-height:340px}
.mnav__panel-inner{
  padding:4px 4px 16px;
  display:grid;gap:2px;
  background:rgba(255,255,255,.035);
  border-radius:10px;
  margin-bottom:12px;
}
.mnav__panel-inner a{
  display:block;padding:12px 14px;border-radius:8px;
  font-size:15.5px;font-weight:500;letter-spacing:-.015em;
  color:rgba(255,255,255,.72);
  transition:color .22s var(--ease),background .22s var(--ease),padding-left .22s var(--ease);
}
.mnav__panel-inner a:hover,.mnav__panel-inner a:active{
  color:#fff;background:rgba(255,255,255,.07);padding-left:20px;
}
/* 드로어 하단 연락처 */
.mnav__contact{
  margin-top:auto;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.1);
  display:grid;gap:12px;
}
.mnav__contact a,.mnav__contact p{
  display:flex;align-items:baseline;gap:10px;margin:0;
  font-size:14.5px;font-weight:600;letter-spacing:-.015em;
  color:rgba(255,255,255,.88);line-height:1.55;
  transition:color .22s var(--ease);
}
.mnav__contact p{font-weight:500;color:rgba(255,255,255,.6);font-size:13.5px}
.mnav__contact span{
  flex:none;min-width:40px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.mnav__contact a:hover,.mnav__contact a:active{color:var(--brand-light)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;margin-top:var(--header-h);
  min-height:min(594px,calc(100vh - var(--header-h)));
  display:flex;align-items:center;
  background:var(--black);overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 44%;
  filter:brightness(.82) contrast(1.05);
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,#081426 0%,#081426 26%,rgba(8,20,38,.88) 42%,rgba(8,20,38,.34) 62%,rgba(8,20,38,.14) 100%),
    linear-gradient(180deg,rgba(8,20,38,.6) 0%,rgba(8,20,38,.06) 34%,rgba(8,20,38,.58) 100%);
}
.hero__inner{position:relative;z-index:1;width:100%;padding-block:70px}
.hero__title{
  font-size:clamp(30px,3.6vw,52px);font-weight:700;line-height:1.38;
  letter-spacing:-.03em;color:#fff;
}
.hero__text{
  margin-top:26px;font-size:clamp(15px,1.25vw,18px);line-height:1.78;
  color:rgba(255,255,255,.7);
}

.hero__contact{
  margin-top:40px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:14px 40px;
}
.hero__contact>*{
  display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;
  font-size:13.5px;color:rgba(255,255,255,.6);
  transition:color .25s var(--ease);
}
.hero__contact svg{flex:none;color:#ffffff !important}
.hero__contact b{font-weight:500;color:rgba(255,255,255,.92);letter-spacing:-.01em;overflow-wrap:anywhere}
.hero__contact a:hover{color:rgba(255,255,255,.85)}
.hero__contact a:hover b{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   Section chrome
   ========================================================================== */
.section{padding-block:var(--section-pad)}
.section--light{background:var(--light)}
.section--dark{background:var(--section-dark)}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.section-head__action{flex:none;padding-bottom:6px}

/* ==========================================================================
   Services
   ========================================================================== */
.services{margin-top:var(--head-gap);display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.svc:hover{transform:translateY(-8px) scale(1.01);border-color:var(--brand-light);box-shadow:0 20px 48px -20px rgba(15,108,180,.26),0 0 0 1px rgba(76,155,216,.25)}
.svc__media{aspect-ratio:16/7;overflow:hidden;background:#111}
.svc__media img{
  width:100%;height:100%;object-fit:cover;
  filter:none;
  transition:transform 1.1s var(--ease);
}
.svc:hover .svc__media img{transform:scale(1.08) rotate(0.4deg)}
.svc__body{flex:1;display:flex;flex-direction:column;padding:22px 26px 16px}
.svc__title{font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--ink);transition:color .3s var(--ease)}
.svc:hover .svc__title{color:var(--brand)}
.svc__text{margin-top:14px;font-size:14px;line-height:1.82;color:var(--mute)}
.svc__arrow{margin-top:auto;padding-top:20px;display:flex;justify-content:flex-end;color:var(--brand)}
.svc__arrow svg{transition:transform .4s var(--ease),color .4s var(--ease)}
.svc:hover .svc__arrow svg{transform:translateX(8px);color:var(--brand-light)}

/* ==========================================================================
   Standards (ISO)
   ========================================================================== */
.standards__grid{display:grid;grid-template-columns:minmax(260px,1fr) 2.28fr;gap:clamp(40px,5.5vw,80px);align-items:center}
.standards__intro .btn{margin-top:30px}

.slider{position:relative}
.slider__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/5);
  gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.slider__track::-webkit-scrollbar{display:none}
.slider__track:focus-visible{outline:2px solid var(--brand-light);outline-offset:4px}

.iso{position:relative;scroll-snap-align:start;height:var(--iso-h);overflow:hidden;background:#0a1729;border-radius:var(--radius-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.iso:hover{transform:translateY(-6px);box-shadow:0 16px 36px -16px rgba(0,0,0,.6)}
.iso img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.95);
  transition:transform 1.4s var(--ease),filter .6s var(--ease);
}
.iso:hover img{transform:scale(1.08);filter:brightness(1.1)}
.iso::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,20,38,.18) 0%,rgba(8,20,38,0) 34%,rgba(8,20,38,.74) 74%,rgba(8,20,38,.95) 100%);
}
.iso>a{position:absolute;inset:0;z-index:2;display:block}
.iso>a:focus-visible{outline:2px solid var(--brand-light);outline-offset:-4px}
.iso__cap{position:absolute;left:16px;right:12px;bottom:16px;z-index:1}
.iso__code{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em}
.iso__name{margin-top:5px;font-size:12px;color:rgba(255,255,255,.62);letter-spacing:-.02em}

.slider__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;
  color:rgba(255,255,255,.85);background:rgba(10,10,10,.5);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease),transform .3s var(--ease);
}
.slider__nav:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-50%) scale(1.08)}
.slider__nav[hidden]{display:none}
.slider__nav[disabled]{opacity:.28;cursor:default}
.slider__nav[disabled]:hover{background:rgba(10,10,10,.5);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.3);transform:translateY(-50%)}
.slider__nav--prev{left:-19px}
.slider__nav--next{right:-19px}

/* ==========================================================================
   Process
   ========================================================================== */
.process__grid{display:grid;grid-template-columns:minmax(240px,1fr) 2.55fr;gap:clamp(36px,4.4vw,60px);align-items:center}
.steps{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;gap:0}
.steps__item{display:flex;align-items:center}
@keyframes stepArrowFlow{
  0%,100%{opacity:.65;transform:translateX(0)}
  50%{opacity:1;transform:translateX(4px)}
}
.steps__item:not(:last-child)::after{
  content:"";flex:none;width:22px;height:12px;margin-inline:2px;
  background:var(--brand-light);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/12px no-repeat;
  animation:stepArrowFlow 2.6s infinite var(--ease);
}
.step{
  flex:1;height:100%;min-height:220px;display:flex;flex-direction:column;padding:30px 24px 28px;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease);
}
.step:hover{border-color:var(--brand-light);transform:translateY(-6px);box-shadow:0 16px 38px -18px rgba(15,108,180,.24)}
.step__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.step__num{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--brand);line-height:1}
.step__icon{flex:none;color:var(--brand-light);transition:transform .35s var(--ease),color .35s var(--ease)}
.step:hover .step__icon{transform:translateY(-4px) scale(1.12);color:var(--brand)}
.step__title{margin-top:18px;font-size:14.5px;font-weight:700;color:var(--ink)}
.step__text{margin-top:10px;padding-bottom:2px;font-size:12.5px;line-height:1.78;color:var(--faint)}

/* ==========================================================================
   Solution band
   ========================================================================== */
.solution{position:relative;overflow:hidden;background:var(--black);padding-block:var(--section-pad)}
.solution__media{position:absolute;inset:0;z-index:0}
.solution__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  filter:brightness(.85) contrast(1.05);
}
.solution__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#081426 0%,#081426 22%,rgba(8,20,38,.86) 40%,rgba(8,20,38,.32) 62%,rgba(8,20,38,.1) 100%);
}
.solution__inner{position:relative;z-index:1;max-width:640px}
.solution .btn{margin-top:30px}

/* ==========================================================================
   Insights
   ========================================================================== */
.insights{margin-top:var(--head-gap);display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.post:hover{transform:translateY(-8px);border-color:var(--brand-light);box-shadow:0 20px 46px -22px rgba(15,108,180,.28)}
.post__media{position:relative;aspect-ratio:16/4.6;overflow:hidden;background:#111}
.post__media img{
  width:100%;height:100%;object-fit:cover;filter:none;
  transition:transform 1.1s var(--ease);
}
.post:hover .post__media img{transform:scale(1.08)}
.post__tag{
  position:absolute;left:16px;top:16px;z-index:1;
  display:inline-flex;align-items:center;height:26px;padding:0 11px;
  border:1px solid rgba(255,255,255,.55);border-radius:var(--radius-sm);
  background:rgba(8,20,38,.5);
  font-size:11.5px;font-weight:500;letter-spacing:-.01em;color:#fff;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.post:hover .post__tag{background:var(--brand);border-color:var(--brand-light)}
.post__body{flex:1;display:flex;flex-direction:column;padding:20px 24px 0}
.post__title{font-size:15px;font-weight:700;line-height:1.55;letter-spacing:-.02em;color:var(--ink);transition:color .3s var(--ease)}
.post:hover .post__title{color:var(--brand)}
.post__meta{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 24px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--dim);
}
.post__meta .arw{color:var(--brand);transition:transform .4s var(--ease)}
.post:hover .post__meta .arw{transform:translateX(6px)}

/* ==========================================================================
   CTA band
   ========================================================================== */
@keyframes ctaLightBeam{
  0%{left:-100%}
  35%,100%{left:160%}
}
.cta{
  position:relative;overflow:hidden;
  margin-top:var(--head-gap);
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding:clamp(30px,3.4vw,46px) clamp(26px,3.4vw,48px);
  background:var(--cta-dark);border-radius:var(--radius);
}
.cta::before{
  content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-25deg);pointer-events:none;
}
.cta.is-in::before{
  animation:ctaLightBeam 4.5s infinite 1.2s var(--ease);
}
.cta__title{font-size:clamp(19px,1.6vw,23px);font-weight:700;letter-spacing:-.02em;color:#fff}
.cta__text{margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.55)}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--footer-dark);color:#fff;padding-top:clamp(46px,4.6vw,62px)}
.footer__grid{
  display:grid;grid-template-columns:minmax(280px,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,2.6vw,40px);
}
.footer__brand .logo{margin-bottom:20px}
.footer__tagline{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.6);max-width:24em}
/* 라벨 길이가 제각각이라(Tel. / 사업자등록번호) 두 칸 표로 잡아 세로를 맞춘다.
   display:contents 를 지원하지 않는 환경에서는 min-width 로 대략 정렬된다. */
.footer__contact{
  margin-top:22px;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:11px 14px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.7);
}
.footer__contact > div{display:contents}
.footer__contact span{
  display:inline-block;min-width:44px;white-space:nowrap;
  color:rgba(255,255,255,.45);font-weight:500;
}
.footer__contact a{transition:color .25s var(--ease)}
.footer__contact a:hover{color:var(--brand-light);text-decoration:underline;text-underline-offset:3px}
.footer__col h2{margin-bottom:18px;font-size:14px;font-weight:700;color:#fff;letter-spacing:-.01em}
.footer__col li+li{margin-top:11px}
.footer__col a{font-size:13px;color:rgba(255,255,255,.55);transition:color .25s var(--ease)}
.footer__col a:hover{color:var(--brand-light)}
.footer__bottom{
  margin-top:clamp(34px,3.4vw,46px);padding-block:22px;
  border-top:1px solid var(--line-dark-soft);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.42);
}
.footer__legal{display:flex;gap:26px}
.footer__legal a{transition:color .25s var(--ease)}
.footer__legal a:hover{color:var(--brand-light)}

.table-hint{display:none;margin-top:10px;font-size:12px;color:var(--dim)}

table{width:100%;border-collapse:collapse;min-width:520px}
th,td{padding:15px 20px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line-soft)}
th{background:var(--brand-tint);font-weight:700;color:var(--ink);white-space:nowrap}
td{color:var(--mute)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* ==========================================================================
   Form
   ========================================================================== */
.form{margin-top:38px;display:grid;gap:20px;max-width:900px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:9px}
.field>span{font-size:13px;font-weight:600;color:rgba(255,255,255,.78);letter-spacing:-.01em}
.field>span em{font-style:normal;color:#e2707a}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);
  color:#fff;font:inherit;font-size:14px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field textarea{resize:vertical;line-height:1.7}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.32)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-light);background:rgba(76,155,216,.14);
}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px;
}
.field select option{background:#12293f;color:#fff}
.check{display:flex;align-items:flex-start;gap:11px;margin-top:4px}
.check input{flex:none;width:17px;height:17px;margin-top:2px;accent-color:var(--brand-light)}
.check span{font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.55)}
.form__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.form__status{
  flex:1 1 260px;min-width:0;
  font-size:12.5px;line-height:1.6;color:var(--brand-light);
}
.form__note{margin-top:-6px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.45)}
.form__note a{color:var(--brand-light);text-decoration:underline;text-underline-offset:3px}
.form__status.is-ok{color:#3fb37a}
.form__status.is-error{color:#d9534f}
/* 스팸 방지 필드 - 화면과 스크린리더 모두에서 감춘다 */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button[type="submit"][disabled]{opacity:.55;cursor:progress}
@media (max-width:700px){.form__row{grid-template-columns:1fr}.form .btn{width:100%}}

/* ==========================================================================
   Skip link / back to top
   ========================================================================== */
.skip{
  position:fixed;left:16px;top:-70px;z-index:200;
  padding:13px 22px;border-radius:0 0 var(--radius) var(--radius);
  background:var(--brand);color:#fff;font-size:14px;font-weight:600;
  transition:top .25s var(--ease);
}
.skip:focus{top:0}

/* ==========================================================================
   Reveal on scroll (Advanced GPU-Accelerated Animations)
   ========================================================================== */
.js .reveal{opacity:0;transform:translate3d(0,34px,0);transition:opacity 1.6s var(--ease),transform 1.6s var(--ease);will-change:opacity,transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.js .reveal-fade{opacity:0;transform:none;transition:opacity 1.6s var(--ease);will-change:opacity}
.js .reveal-left{opacity:0;transform:translate3d(-38px,0,0);transition:opacity 1.6s var(--ease),transform 1.6s var(--ease);will-change:opacity,transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.js .reveal-right{opacity:0;transform:translate3d(38px,0,0);transition:opacity 1.6s var(--ease),transform 1.6s var(--ease);will-change:opacity,transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.js .reveal-scale{opacity:0;transform:scale(.94) translate3d(0,24px,0);transition:opacity 1.6s var(--ease),transform 1.6s var(--ease);will-change:opacity,transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.js .reveal-stagger > *{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease);will-change:opacity,transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}

.js .reveal.is-in,
.js .reveal-fade.is-in,
.js .reveal-left.is-in,
.js .reveal-right.is-in,
.js .reveal-scale.is-in{opacity:1;transform:translate3d(0,0,0)}

.js .reveal-stagger.is-in > *{opacity:1;transform:translate3d(0,0,0)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1200px){
  .footer__grid{grid-template-columns:repeat(3,1fr);row-gap:36px}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:1080px){
  :root{--header-h:72px}
  .gnb,.header__cta{display:none}
  .navbtn{display:grid;margin-left:auto;margin-right:0}
  .header__inner{gap:16px}
  .standards__grid,.process__grid{grid-template-columns:1fr;gap:36px}
  .slider__track{grid-auto-columns:calc((100% - 24px)/3.4)}
  :root{--iso-h:300px}
  .slider__nav--prev{left:-8px}
  .slider__nav--next{right:-8px}
  .steps{grid-template-columns:repeat(2,1fr);gap:14px}
  .steps__item:not(:last-child)::after{display:none}
}
@media (max-width:860px){
  .services,.insights{grid-template-columns:1fr;gap:18px}
  .svc__media{aspect-ratio:16/8}
  .post__media{aspect-ratio:16/6}
  .section-head{flex-direction:column;align-items:flex-start;gap:24px}
  .section-head__action{padding-bottom:0}
  .hero{min-height:520px}
  .hero__media img{object-position:72% 50%}
  .hero__media::after{
    background:linear-gradient(180deg,rgba(8,20,38,.92) 0%,rgba(8,20,38,.76) 55%,rgba(8,20,38,.88) 100%);
  }
  .hero__contact{gap:12px 24px}
  .logo__sub{display:none}
  .table-hint{display:block}
  
  /* 모바일에서는 좌우 이동을 쓰지 않는다. 화면 밖으로 밀리면 가로 스크롤이 생긴다.
     대신 세로로만 짧게 올라오게 해서 움직임이 보이도록 한다. */
  .js .reveal:not(.is-in),
  .js .reveal-left:not(.is-in),
  .js .reveal-right:not(.is-in),
  .js .reveal-scale:not(.is-in),
  .js .reveal-stagger:not(.is-in) > *{
    transform:translate3d(0,22px,0)!important;
  }
  .js .reveal,
  .js .reveal-left,
  .js .reveal-right,
  .js .reveal-scale,
  .js .reveal-stagger > *{
    transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)!important;
  }
}
@media (max-width:600px){
  .slider__track{grid-auto-columns:calc((100% - 8px)/1.9)}
  :root{--iso-h:280px}
  .steps{grid-template-columns:1fr}
  /* ── 모바일 푸터 ─────────────────────────────────────────────
     링크 그룹이 3개라 2열 그리드에서 마지막 칸이 비어 어색하던 문제 해결.
     [제목 | 항목 가로 나열] 한 줄 구조로 바꿔 세로 길이를 크게 줄임. */
  .footer__grid{grid-template-columns:1fr;row-gap:22px}
  .footer__col{
    display:grid;grid-template-columns:64px minmax(0,1fr);
    column-gap:14px;align-items:baseline;
    padding-top:14px;border-top:1px solid rgba(255,255,255,.08);
  }
  .footer__col h2{margin-bottom:0;font-size:12.5px;letter-spacing:-.02em}
  .footer__col ul{display:flex;flex-wrap:wrap;gap:8px 0}
  .footer__col li{display:inline-flex;align-items:center}
  .footer__col li + li::before{
    content:"";width:3px;height:3px;border-radius:50%;
    background:rgba(255,255,255,.25);margin:0 10px;
  }
  .footer__col a{font-size:12.5px}

  /* 연락처 : 라벨 폭 축소 · 주소 줄바꿈 정리 */
  .footer__contact{margin-top:18px;gap:8px 11px;font-size:12.6px}
  .footer__contact span{min-width:0}
  .footer__contact div > :last-child{word-break:keep-all}
  .footer__tagline{font-size:13px;max-width:none}

  /* 하단 바 */
  .footer__bottom{margin-top:24px;padding-block:18px;display:grid;gap:10px}
  .footer__bottom p{font-size:12px}
  .footer__legal{gap:18px}
  .footer__legal a{font-size:12px}
  .cta{flex-direction:column;align-items:flex-start}
  .btn{width:100%}
  .section-head__action .btn{width:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,
  .js .reveal-fade,
  .js .reveal-left,
  .js .reveal-right,
  .js .reveal-scale,
  .js .reveal-stagger > *{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   공용 서브페이지 히어로 (.phero) — 전 페이지 동일 형식 · 동일 디자인
   배경 사진은 .phero__bg 안의 <img> 로 페이지마다 지정합니다.
   ========================================================================== */
.phero{
  --phero-h:var(--sub-hero-h);
  --phero-title:clamp(36px,5vw,76px);
  position:relative;
  min-height:calc(var(--phero-h) + var(--header-h));
  padding:calc(var(--header-h) + 8px) 0 34px;
  display:flex;align-items:center;
  background:#060e1e;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
/* 사진 위 필터 : 상단 스크림(네비 가독성) + 균일 톤다운 */
.phero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.14) 15%,transparent 30%),
    linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.20) 40%,transparent 68%),
    linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.30));
}
/* 하단 페이드 */
.phero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.26) 100%);
}
.phero__inner{position:relative;z-index:2;width:100%}
.phero__body{max-width:1040px}

/* 브레드크럼 */
.phero__crumb{margin-bottom:clamp(18px,1.9vw,26px)}
.phero__crumb ol{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(10px,1vw,15px);list-style:none;margin:0;padding:0;
}
.phero__crumb li{
  display:flex;align-items:center;gap:clamp(10px,1vw,15px);
  font-size:clamp(13px,1.05vw,14.5px);font-weight:600;letter-spacing:-.01em;
  color:rgba(255,255,255,.74);
}
.phero__crumb li + li::before{
  content:"";width:7px;height:7px;flex-shrink:0;
  border-top:1.6px solid rgba(255,255,255,.45);
  border-right:1.6px solid rgba(255,255,255,.45);
  transform:rotate(45deg);
}
.phero__crumb a{display:inline-flex;align-items:center;color:inherit;transition:color .2s}
.phero__crumb a:hover{color:#fff}
.phero__crumb li[aria-current="page"]{font-weight:700;color:#fff}

/* 제목 · 액센트 바 · 부제 */
.phero__title{
  font-size:var(--phero-title);
  font-weight:800;line-height:1.08;letter-spacing:-.038em;
  color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.35);
  margin:0 0 24px;word-break:keep-all;
}
.phero__text{
  margin:0;max-width:760px;
  font-size:clamp(15px,1.35vw,18.5px);font-weight:500;line-height:1.65;
  letter-spacing:.005em;color:rgba(255,255,255,.88);word-break:keep-all;
}

/* --------------------------------------------------------------------------
   히어로 위에서는 헤더 투명 (홈 화면과 동일 동작)
   스크롤 · 메가메뉴 · 모바일 메뉴 상태에서는 화이트 네브바로 복귀
   -------------------------------------------------------------------------- */
body.phero-page:not(.nav-open) .header:not(.is-scrolled):not(.mega-open){
  background:transparent !important;border-bottom:0 !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
body.phero-page:not(.nav-open) .header:not(.is-scrolled):not(.mega-open) .logo__symbol{
  filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.45)) !important;
}
body.phero-page:not(.nav-open) .header:not(.is-scrolled):not(.mega-open) .logo__mark{
  color:#fff !important;text-shadow:0 1px 4px rgba(0,0,0,.45) !important;
}
body.phero-page:not(.nav-open) .header:not(.is-scrolled):not(.mega-open) .logo__sub{
  color:rgba(255,255,255,.72) !important;
}
body.phero-page:not(.nav-open) .header:not(.is-scrolled):not(.mega-open) .gnb__link{
  color:rgba(255,255,255,.9) !important;text-shadow:0 1px 4px rgba(0,0,0,.4);
}
body.phero-page:not(.nav-open) .header:not(.is-scrolled):not(.mega-open) .gnb__item:hover .gnb__link,
body.phero-page:not(.nav-open) .header:not(.is-scrolled):not(.mega-open) .gnb__link.is-current{
  color:#fff !important;
}
body.phero-page:not(.nav-open) .header:not(.is-scrolled):not(.mega-open) .gnb__link::after{background:#fff !important}
body.phero-page:not(.nav-open) .header:not(.is-scrolled):not(.mega-open) .navbtn{color:#fff !important}
body.phero-page:not(.nav-open) .header:not(.is-scrolled):not(.mega-open) .header__cta{
  background:transparent !important;border:1.5px solid rgba(255,255,255,.7) !important;
  color:#fff !important;box-shadow:none !important;
}
body.phero-page:not(.nav-open) .header:not(.is-scrolled):not(.mega-open) .header__cta:hover{
  background:#fff !important;border-color:#fff !important;color:#0f172a !important;
}

/* 히어로 내 보조 링크 (iso-detail) */
.phero__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  padding:10px 22px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.45);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
.phero__link:hover{background:#fff;border-color:#fff;color:#0f172a}

/* 주요 이해관계자 히어로는 기존 높이 유지 */
body.partners .phero{--phero-h:clamp(380px,30vw,420px)}

/* ──────────────────────────────────────────────────────────────
   모바일 메뉴 열림 상태 : 헤더를 투명하게 두어 어두운 드로어와 하나로 보이게.
   (흰 배경 + 흰 로고 조합이라 로고와 닫기 버튼이 보이지 않던 문제)
   ────────────────────────────────────────────────────────────── */
/* .is-scrolled / .mega-open 상태 규칙(클래스 4개)보다 특정성이 높아야 하므로
   두 상태를 명시적으로 함께 지정한다. */
html body.nav-open .header,
html body.nav-open .header.is-scrolled,
html body.nav-open .header.mega-open{
  background:transparent !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
html body.nav-open .header .logo__symbol,
html body.nav-open .header.is-scrolled .logo__symbol,
html body.nav-open .header.mega-open .logo__symbol{
  filter:brightness(0) invert(1) !important;
}
html body.nav-open .header .logo__mark,
html body.nav-open .header.is-scrolled .logo__mark,
html body.nav-open .header.mega-open .logo__mark{
  color:#ffffff !important;text-shadow:none !important;
}
html body.nav-open .header .logo__sub,
html body.nav-open .header.is-scrolled .logo__sub,
html body.nav-open .header.mega-open .logo__sub{
  color:rgba(255,255,255,.7) !important;
}
html body.nav-open .header .navbtn,
html body.nav-open .header.is-scrolled .navbtn,
html body.nav-open .header.mega-open .navbtn{
  color:#ffffff !important;background:transparent !important;
}
/* 터치 기기에서 탭 후 hover 배경이 남아 X 버튼에 회색 박스가 보이던 문제 */
@media (hover:hover){
  html body.nav-open .header .navbtn:hover{background:rgba(255,255,255,.12) !important}
}

/* ──────────────────────────────────────────────────────────────
   동작 최소화 설정(prefers-reduced-motion)을 켠 사용자를 위한 대응.
   등장 애니메이션과 전환을 끄되, 콘텐츠는 그대로 보이게 한다.
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-fade,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-stagger,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   키보드 포커스 : 마우스 클릭에는 나타나지 않고 Tab 이동에만 표시된다.
   페이지별 CSS 에 개별 포커스 스타일이 없어 전역으로 한 번 정의한다.
   ────────────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
/* 어두운 배경 위에서는 밝은 색으로 */
:where(.footer, .mnav, .it-value-sec, .ct-sec--dark, .ptn-philo__dark, .phero)
  :where(a, button):focus-visible {
  outline-color: #7cc0ff;
}
/* 카드·행 전체가 링크인 경우 모서리를 컴포넌트에 맞춘다 */
.std-card:focus-visible, .ct-card:focus-visible,
.client-logo-card:focus-visible, .partner-card:focus-visible {
  outline-offset: 2px;
  border-radius: 14px;
}