/* ============================================================
   YPM | Unified stylesheet
   Structure:
     1. :root variables (merged superset)
     2. Global base / reset / typography / language / reveal
     3. @keyframes (shared)
     4. Shell for index/technology/products/quality  -> body.modern
     5. Shell for company/esg/global/... (Group A)   -> body.classic
     6. Page-specific blocks                          -> body.page-*
   ============================================================ */

/* ===== 1. Variables ===== */
:root{
  /* Primary brand palette (unified orange / warm) */
  --blue:#FA7D21; --blue-light:#EA530D; --blue-pale:#FEF2E9; --accent:#FA9450;
  --white:#ffffff;
  --gray-50:#F8F8FA; --gray-100:#F5F5F7; --gray-200:#E5E5E8; --gray-300:#D4D4D8;
  --gray-400:#BABABA; --gray-500:#888888; --gray-600:#666666; --gray-700:#444444; --gray-900:#222222;
  --green:#1a7a4a; --green-light:#e8f5ee; --purple:#5b21b6; --purple-light:#ede9fe;
  --red-accent:#C0392B;
  /* Brand aliases (used by technology / products / quality / index) */
  --brand-main:#FA7D21; --brand-deep:#2B2C2F; --brand-dark:#C4400A; --brand-mid:#EA530D;
  --brand-bright:#FA9450; --brand-light:#FEF2E9; --brand-pale:#FEF8F3;
  --blue-main:#FA7D21; --blue-deep:#2B2C2F; --blue-dark:#C4400A; --blue-mid:#EA530D; --blue-bright:#FA9450;
  /* Effects / layout tokens */
  --shadow-sm:0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:0 6px 24px rgba(0,0,0,0.10);
  --shadow-lg:0 16px 48px rgba(0,0,0,0.14);
  --radius:3px; --radius-lg:4px;
  --transition:all 0.28s cubic-bezier(0.4,0,0.2,1);
  --max-w:1560px;
  /* Fonts — 전 페이지 맑은 고딕 통일.
     기존에는 Pretendard/Inter/Noto Sans KR 을 지정했지만 웹폰트를 불러오는 링크가
     어디에도 없어서, 그 폰트가 설치되지 않은 PC에서는 브라우저 기본 sans-serif(굴림 등)로
     떨어져 투박하게 보였다. 세 변수 모두 맑은 고딕으로 맞춘다.
     뒤쪽은 맑은 고딕이 없는 환경(mac/모바일)용 대체. */
  --font:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",AppleGothic,sans-serif;
  --font-en:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",AppleGothic,sans-serif;
  --font-ko:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",AppleGothic,sans-serif;
}
/* ===== 2. Global base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x는 html에도 걸어야 한다. body에만 주면 고정 요소(.nav/.mobile-nav)가
   스크롤바 폭까지 포함한 크기로 잡혀(예: 화면 393px인데 402px) 9px짜리 가로 스크롤이 남는다.
   text-size-adjust는 iOS 사파리가 일부 문단의 글씨를 제멋대로 키워 레이아웃을 밀어내는 것을 막는다. */
html{scroll-behavior:smooth;font-size:17px;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font-en);font-weight:600;background:var(--white);color:var(--gray-900);line-height:1.75;overflow-x:hidden;width:100%;max-width:100%}
body.lang-ko{font-family:var(--font-ko)}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
h1,h2,h3,h4,h5{font-weight:700;line-height:1.25}
h1{font-size:clamp(2rem,4vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:clamp(1.1rem,2vw,1.35rem)}
p{color:var(--gray-500);line-height:1.8}
/* language visibility - supports both html[lang] and body.lang-* toggling */
html[lang="ko"] .en{display:none}
html[lang="en"] .ko{display:none}
body.lang-ko .en{display:none}
body.lang-en .ko{display:none}
/* scroll reveal (shared) */
.reveal,.reveal-left,.reveal-right,.reveal-up{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(0.25,0.46,0.45,0.94)}
.reveal{transform:translateY(30px)}
.reveal-left{transform:translateX(-40px)}
.reveal-right{transform:translateX(40px)}
.reveal-up{transform:translateY(20px)}
.revealed{opacity:1;transform:none}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.3s}
.delay-4{transition-delay:.4s}
.icon{display:inline-block;vertical-align:middle}
/* per-shell font family */
body.classic{font-family:var(--font)}
body.page-recruit{font-family:var(--font);color:var(--gray-900);background:#fff}
/* classic/recruit page-hero paragraph + heading stay light on the orange hero */
body.classic .page-hero p,body.page-recruit .page-hero p{color:rgba(255,255,255,.9)}
body.classic .page-hero h1,body.page-recruit .page-hero h1{color:#fff}

/* ===== 3. Keyframes (shared) ===== */
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.3)} }
@keyframes scrollAnim { 0%{opacity:1;transform:scaleY(1) translateY(0)} 100%{opacity:0;transform:scaleY(0.5) translateY(16px)} }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(44px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tagGlow {
  0%,100% { box-shadow: 0 0 4px rgba(255,192,96,0.5); transform: scale(1); }
  50%     { box-shadow: 0 0 14px rgba(255,192,96,1); transform: scale(1.3); }
}
@keyframes pdRing{0%{transform:translate(-50%,-50%) scale(1);opacity:.75}100%{transform:translate(-50%,-50%) scale(4.2);opacity:0}}

/* ===== 4. Shell: index / technology / products / quality (body.modern) ===== */
body.modern .container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
body.modern .section { padding: 96px 0; }
body.modern .section-sm { padding: 64px 0; }
body.modern .section-bg { background: var(--brand-pale); }
body.modern .lang-toggle { display: flex; gap: 2px; background: var(--gray-200); border-radius:3px; padding: 3px; }
body.modern .lang-btn { padding: 5px 14px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: var(--gray-500); transition: var(--transition); }
body.modern .lang-btn.active { background: var(--white); color: var(--brand-dark); box-shadow: var(--shadow-sm); }
body.modern .nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,0.98); border-bottom: 1px solid var(--gray-200);
  transition: var(--transition);
}
body.modern .nav.scrolled { box-shadow: var(--shadow-md); }
body.modern .nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 32px;
  height: 72px; display: flex; align-items: center; gap: 40px;
}
body.modern .nav-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
body.modern .nav-logo img { height: 40px; width: auto; }
body.modern .nav-logo-text { display: flex; flex-direction: column; }
body.modern .nav-logo-name { font-size: 1.25rem; font-weight: 800; color: var(--brand-main); letter-spacing: -0.02em; line-height: 1; }
body.modern .nav-logo-sub { font-size: 0.65rem; font-weight:600; color: var(--gray-500); letter-spacing: 0.08em; text-transform: uppercase; }
body.modern .nav-menu { display: flex; align-items: center; gap: 48px; margin-left: 44px; }
body.modern .nav-item { position: relative; }
body.modern .nav-link {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 14px; border-radius:3px;
  font-size: 0.875rem; font-weight:600; color: var(--gray-900);
  transition: var(--transition); white-space: nowrap;
}
body.modern .nav-link:hover, body.modern .nav-item:hover .nav-link { color: var(--gray-900); background: transparent; box-shadow: inset 0 -2px 0 var(--brand-main); }
body.modern .nav-link svg { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.2s; }
body.modern .nav-item:hover .nav-link svg { transform: rotate(180deg); }
body.modern .nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  min-width: 220px; padding: 8px; opacity: 0; pointer-events: none;
  transform: translateY(-8px); transition: var(--transition);
}
body.modern .nav-dropdown::before {
  content: ''; position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}
body.modern .nav-item:hover .nav-dropdown { opacity: 1; pointer-events: all; transform: translateY(0); }
body.modern .nav-dropdown a {
  display: block; padding: 9px 14px; border-radius:3px;
  font-size: 0.84rem; color: var(--gray-700);
  transition: var(--transition);
}
body.modern .nav-dropdown a:hover { background: var(--brand-light); color: var(--brand-main); }
body.modern .nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
body.modern .nav-cta {
  padding: 9px 22px; background: var(--brand-main); color: var(--white);
  border-radius:3px; font-size: 0.84rem; font-weight: 600;
  transition: var(--transition); white-space: nowrap;
}
body.modern .nav-cta:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
body.modern .hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
body.modern .hamburger span { display: block; width: 22px; height: 2px; background: var(--brand-deep); border-radius: 2px; transition: var(--transition); }
body.modern .mobile-nav {
  display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
  background: var(--white); z-index: 999; padding: 24px 32px;
  flex-direction: column; gap: 4px; overflow-y: auto;
  border-top: 1px solid var(--gray-200);
}
body.modern .mobile-nav.open { display: flex; }
body.modern .mobile-nav a { padding: 13px 0; font-size: 1rem; font-weight:600; color: var(--gray-700); border-bottom: 1px solid var(--gray-200); }
body.modern .hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  padding-top: 72px; overflow: hidden;
}
body.modern .hero-photo {
  position: absolute; inset: 0;
  background-image: url('../images/hero/main.jpg?v=20260807i');
  background-size: cover; background-position: center;
  animation: heroZoom 18s ease-in-out infinite alternate;
}
body.modern .hero-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(28,10,0,0.90) 0%, rgba(122,40,0,0.75) 60%, rgba(244,112,40,0.45) 100%); }
body.modern .hero-overlay2 { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,10,0,0.65) 0%, transparent 50%); }
body.modern .hero-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--max-w); margin: 0 auto; padding: 80px 32px 100px;
}
body.modern .hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  border-radius:3px; padding: 6px 18px; margin-bottom: 28px;
  font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.85);
  letter-spacing: 0.1em; text-transform: uppercase;
}
body.modern .hero-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: #FFC060; flex-shrink: 0; animation: pulse-dot 2s infinite; }
body.modern .hero h1 { color: var(--white); font-size: clamp(2.2rem,4.5vw,3.8rem); font-weight: 800; margin-bottom: 20px; max-width: 720px; line-height: 1.15; }
body.modern .hero h1 strong { color: #FFC060; font-weight: 800; }
body.modern .hero-sub { color: rgba(255,255,255,0.75); font-size: 1.05rem; max-width: 580px; margin-bottom: 40px; font-weight:600; }
body.modern .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }
body.modern .btn-hero-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; background: var(--brand-main); color: var(--white);
  border-radius:3px; font-weight: 600; font-size: 0.94rem;
  transition: var(--transition); box-shadow: 0 4px 20px rgba(244,112,40,0.45);
}
body.modern .btn-hero-primary:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(244,112,40,0.55); }
body.modern .btn-hero-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.4); color: var(--white);
  border-radius:3px; font-weight:600; font-size: 0.94rem;
  transition: var(--transition); backdrop-filter: blur(4px);
}
body.modern .btn-hero-outline:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.7); }
body.modern .hero-kpi {
  display: flex; gap: 40px; flex-wrap: wrap;
  padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.15);
}
body.modern .hero-kpi-item {}
body.modern .hero-kpi-num { font-size: 2.2rem; font-weight: 800; color: var(--white); line-height: 1; }
body.modern .hero-kpi-num sup { font-size: 1rem; font-weight: 600; }
body.modern .hero-kpi-lbl { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-top: 4px; font-weight:600; letter-spacing: 0.04em; }
body.modern .hero-scroll {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.45); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
}
body.modern .hero-scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0.45), transparent); animation: scrollAnim 1.8s ease-in-out infinite; }
body.modern .clients-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  background: rgba(28,10,0,0.88); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 14px 0; overflow: hidden;
}
body.modern .clients-bar-label {
  position: absolute; left: 32px; top: 50%; transform: translateY(-50%);
  font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.4);
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; z-index: 1;
  background: linear-gradient(to right, rgba(28,10,0,0.92) 70%, transparent);
  padding-right: 24px;
}
body.modern .clients-track-wrap { overflow: hidden; padding: 0 140px; }
body.modern .clients-track {
  display: flex; gap: 48px; animation: ticker 28s linear infinite;
  width: max-content;
}
body.modern .clients-track span {
  font-size: 0.82rem; font-weight:600; color: rgba(255,255,255,0.55);
  white-space: nowrap; letter-spacing: 0.04em;
}
body.modern .sec-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; color: var(--brand-main);
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px;
}
body.modern .sec-label::before { content: ''; display: block; width: 20px; height: 2px; background: var(--brand-main); border-radius: 2px; }
body.modern .sec-header { margin-bottom: 56px; }
body.modern .sec-header h2 { margin-bottom: 14px; }
body.modern .sec-header p { max-width: 1000px; font-size: 1rem; }
body.modern .sec-header.center { text-align: center; }
body.modern .sec-header.center p { margin: 0 auto; }
body.modern .btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; background: var(--brand-main); color: var(--white);
  border-radius:3px; font-weight: 600; font-size: 0.9rem;
  transition: var(--transition);
}
body.modern .btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
body.modern .btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border: 1.5px solid var(--brand-main); color: var(--brand-main);
  border-radius:3px; font-weight: 600; font-size: 0.9rem;
  transition: var(--transition);
}
body.modern .btn-outline:hover { background: var(--brand-light); transform: translateY(-1px); }
body.modern .btn-text {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.88rem; font-weight: 600; color: var(--brand-main);
  transition: var(--transition);
}
body.modern .btn-text:hover { gap: 10px; }
body.modern .btn-text svg { transition: transform 0.2s; }
body.modern .btn-text:hover svg { transform: translateX(3px); }
body.modern .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
body.modern .about-img-wrap { position: relative; }
body.modern .about-img-main { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
body.modern .about-logo-overlay { position: absolute; top: 18px; left: 18px; height: 42px; width: auto; pointer-events: none; }
body.modern .about-img-main img { width: 100%; height: 480px; object-fit: cover; }
body.modern .about-img-badge {
  position: absolute; bottom: -24px; right: -24px;
  background: var(--brand-dark); color: var(--white);
  border-radius: var(--radius-lg); padding: 24px 28px;
  box-shadow: var(--shadow-lg); text-align: center;
}
body.modern .about-img-badge .badge-num { font-size: 2.4rem; font-weight: 800; line-height: 1; color: #FFC060; }
body.modern .about-img-badge .badge-txt { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin-top: 4px; font-weight:600; }
body.modern .about-small-img {
  position: absolute; top: -28px; left: -28px;
  width: 160px; height: 160px; border-radius: var(--radius-lg);
  overflow: hidden; border: 4px solid var(--white); box-shadow: var(--shadow-md);
}
body.modern .about-small-img img { width: 100%; height: 100%; object-fit: cover; }
body.modern .about-content {}
body.modern .about-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 32px; }
body.modern .about-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; background: var(--brand-light); border-radius:3px;
  font-size: 0.82rem; font-weight:600; color: var(--brand-dark);
}
body.modern .about-pill svg { width: 15px; height: 15px; color: var(--brand-main); flex-shrink: 0; }
body.modern .about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0 36px; }
body.modern .about-fact { background: var(--gray-100); border-radius: var(--radius); padding: 18px 20px; border-left: 3px solid var(--brand-main); }
body.modern .about-fact .fact-num { font-size: 1.8rem; font-weight: 800; color: var(--brand-dark); line-height: 1; }
body.modern .about-fact .fact-lbl { font-size: 0.78rem; color: var(--gray-500); margin-top: 4px; }
body.modern .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
body.modern .product-card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: var(--transition); box-shadow: var(--shadow-sm);
}
body.modern .product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand-main); }
body.modern .product-card-img { position: relative; height: 200px; overflow: hidden; }
body.modern .product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
body.modern .product-card:hover .product-card-img img { transform: scale(1.07); }
body.modern .product-card-badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--brand-dark); color: var(--white);
  border-radius:3px; padding: 5px 12px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
}
body.modern .product-formula {
  position: absolute; bottom: 14px; right: 14px;
  font-size: 1.6rem; font-weight: 800; color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5); line-height: 1;
}
body.modern .product-card-body { padding: 24px; }
body.modern .product-card-cat { font-size: 0.72rem; font-weight: 700; color: var(--brand-main); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
body.modern .product-card-body h3 { margin-bottom: 10px; font-size: 1.15rem; }
body.modern .product-card-body p { font-size: 0.875rem; line-height: 1.7; margin-bottom: 18px; }
body.modern .product-specs { display: flex; gap: 0; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
body.modern .product-spec-item { flex: 1; padding: 10px 12px; text-align: center; border-right: 1px solid var(--gray-200); }
body.modern .product-spec-item:last-child { border-right: none; }
body.modern .spec-val { font-size: 0.9rem; font-weight: 700; color: var(--brand-dark); }
body.modern .spec-key { font-size: 0.68rem; color: var(--gray-400); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
body.modern .tech-strip { background: linear-gradient(135deg, #C84010 0%, #FA7D21 55%, #FA9450 100%); padding: 72px 0; }
body.modern .tech-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.22); }
body.modern .tech-strip-item { background: transparent; padding: 40px 32px; text-align: center; transition: var(--transition); }
body.modern .tech-strip-item:hover { background: rgba(255,255,255,0.14); }
body.modern .tech-strip-icon { width: 52px; height: 52px; margin: 0 auto 18px; color: #fff; }
body.modern .tech-strip-item h4 { color: var(--white); font-size: 1rem; margin-bottom: 8px; }
body.modern .tech-strip-item p { color: rgba(255,255,255,0.82); font-size: 0.84rem; line-height: 1.65; }
body.modern .facility-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
body.modern .facility-photo-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
body.modern .facility-photo { border-radius: var(--radius); overflow: hidden; }
body.modern .facility-photo.main { grid-column: 1 / 3; }
body.modern .facility-photo img { width: 100%; height: 100%; object-fit: cover; }
body.modern .facility-photo.main img { height: 280px; }
body.modern .facility-photo:not(.main) img { height: 180px; }
body.modern .facility-item { display: flex; gap: 18px; padding: 20px; border-radius: var(--radius); border: 1px solid var(--gray-200); margin-bottom: 14px; transition: var(--transition); }
body.modern .facility-item:hover { border-color: var(--brand-main); background: var(--brand-light); }
body.modern .facility-item-icon { width: 44px; height: 44px; background: var(--brand-light); border-radius:3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand-main); }
body.modern .facility-item-icon svg { width: 22px; height: 22px; }
body.modern .facility-item h4 { font-size: 0.95rem; margin-bottom: 4px; }
body.modern .facility-item p { font-size: 0.84rem; }
body.modern .global-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
body.modern .region-cards { display: flex; flex-direction: column; gap: 12px; }
body.modern .region-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); transition: var(--transition);
}
body.modern .region-card:hover { border-color: var(--brand-main); box-shadow: var(--shadow-sm); }
body.modern .region-flag { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
body.modern .region-info { flex: 1; }
body.modern .region-info h4 { font-size: 0.95rem; margin-bottom: 3px; }
body.modern .region-info p { font-size: 0.8rem; }
body.modern .region-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.modern .region-tag {
  padding: 3px 10px; background: var(--brand-light); border-radius:3px;
  font-size: 0.7rem; font-weight: 600; color: var(--brand-dark);
}
body.modern .region-hq { border-left: 3px solid var(--brand-main); }
body.modern .esg-tabs { display: flex; gap: 4px; background: var(--gray-100); border-radius:3px; padding: 4px; margin-bottom: 48px; }
body.modern .esg-tab { flex: 1; padding: 11px 16px; border-radius:3px; font-size: 0.88rem; font-weight: 600; color: var(--gray-500); transition: var(--transition); text-align: center; cursor: pointer; }
body.modern .esg-tab.active { background: var(--white); color: var(--brand-dark); box-shadow: var(--shadow-sm); }
body.modern .esg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
body.modern .esg-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }
body.modern .esg-card-img { height: 180px; overflow: hidden; }
body.modern .esg-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
body.modern .esg-card:hover .esg-card-img img { transform: scale(1.06); }
body.modern .esg-card-body { padding: 24px; }
body.modern .esg-card-icon { width: 44px; height: 44px; border-radius:3px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
body.modern .esg-card-icon.green { background: #E8F5E9; color: #2E7D32; }
body.modern .esg-card-icon.blue { background: var(--brand-light); color: var(--brand-main); }
body.modern .esg-card-icon.purple { background: #EDE7F6; color: #5E35B1; }
body.modern .esg-card-icon svg { width: 22px; height: 22px; }
body.modern .esg-card-body h3 { margin-bottom: 8px; font-size: 1.05rem; }
body.modern .esg-card-body p { font-size: 0.875rem; }
body.modern .quality-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
body.modern .quality-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 32px; transition: var(--transition); }
body.modern .quality-card:hover { border-color: var(--brand-main); box-shadow: var(--shadow-md); }
body.modern .quality-icon { width: 52px; height: 52px; background: var(--brand-light); border-radius:3px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--brand-main); }
body.modern .quality-icon svg { width: 26px; height: 26px; }
body.modern .quality-card h3 { margin-bottom: 10px; }
body.modern .quality-card p { font-size: 0.88rem; line-height: 1.75; }
body.modern .cert-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
body.modern .cert-item { background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 120px; }
body.modern .cert-item img { height: 48px; width: auto; object-fit: contain; }
body.modern .cert-item span { font-size: 0.75rem; font-weight: 600; color: var(--gray-700); text-align: center; }
body.modern .cta-section { background: var(--brand-deep); padding: 80px 0; }
body.modern .cta-inner { text-align: center; }
body.modern .cta-inner h2 { color: var(--white); margin-bottom: 14px; }
body.modern .cta-inner p { color: rgba(255,255,255,0.65); max-width: 900px; margin: 0 auto 36px; }
body.modern .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
body.modern .btn-cta-white {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; background: var(--white); color: var(--brand-dark);
  border-radius:3px; font-weight: 700; font-size: 0.9rem; transition: var(--transition);
}
body.modern .btn-cta-white:hover { background: var(--brand-light); transform: translateY(-1px); }
body.modern .btn-cta-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border: 1.5px solid rgba(255,255,255,0.35); color: var(--white);
  border-radius:3px; font-weight:600; font-size: 0.9rem; transition: var(--transition);
}
body.modern .btn-cta-outline:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); }
body.modern .ceo-wrap {
  display: grid; grid-template-columns: auto 1fr; gap: 52px; align-items: center;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 48px 52px; box-shadow: var(--shadow-sm);
}
body.modern .ceo-photo { width: 130px; height: 130px; border-radius: 50%; overflow: hidden; border: 4px solid var(--brand-light); flex-shrink: 0; }
body.modern .ceo-photo img { width: 100%; height: 100%; object-fit: cover; }
body.modern blockquote { font-size: 1.05rem; color: var(--gray-700); line-height: 1.8; font-style: italic; margin-bottom: 20px; position: relative; padding-left: 24px; }
body.modern blockquote::before { content: '"'; position: absolute; left: 0; top: -8px; font-size: 3rem; color: var(--brand-light); font-style: normal; line-height: 1; }
body.modern .ceo-name { font-size: 1rem; font-weight: 700; color: var(--brand-deep); }
body.modern .ceo-role { font-size: 0.82rem; color: var(--gray-500); }
body.modern .stats-band { background: var(--brand-main); padding: 56px 0; }
body.modern .stats-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
body.modern .stats-band-item { text-align: center; padding: 16px; border-right: 1px solid rgba(255,255,255,0.15); }
body.modern .stats-band-item:last-child { border-right: none; }
body.modern .stats-band-num { font-size: 2.6rem; font-weight: 800; color: var(--white); line-height: 1; }
body.modern .stats-band-lbl { font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 6px; font-weight:600; }
body.modern .divider-line { border: none; border-top: 1px solid var(--gray-200); }
body.modern .footer { background: var(--brand-deep); color: rgba(255,255,255,0.7); padding: 72px 0 0; }
body.modern .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
body.modern .footer-brand {}
body.modern .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
body.modern .footer-logo-mark { width: 40px; height: 40px; background: var(--brand-main); border-radius:3px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; color: var(--white); letter-spacing: -0.03em; }
body.modern .footer-logo-name { font-size: 1.1rem; font-weight: 800; color: var(--white); line-height: 1; }
body.modern .footer-logo-sub { font-size: 0.62rem; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; text-transform: uppercase; }
body.modern .footer-brand p { font-size:15px; color: rgba(255,255,255,0.85); line-height: 1.8; margin-bottom: 20px; word-break: keep-all; }
body.modern .footer-contact-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; font-size:15px; color: rgba(255,255,255,0.6); word-break: keep-all; }
body.modern .footer-contact-row svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; opacity: .7; }
body.modern .footer-col h5 { color: rgba(255,255,255,0.9); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; }
body.modern .footer-col a { display: block; font-size: 0.84rem; color: rgba(255,255,255,0.55); margin-bottom: 10px; transition: var(--transition); }
body.modern .footer-col a:hover { color: var(--white); }
body.modern .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0;
  text-align: center; font-size: 0.78rem; color: rgba(255,255,255,0.35);
}
body.modern .footer-bottom-links { display: flex; gap: 24px; }
body.modern .footer-bottom-links a { color: rgba(255,255,255,0.45); transition: var(--transition); }
body.modern .footer-bottom-links a:hover { color: var(--white); }
body.modern .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; }
body.modern .contact-info-item { display: flex; gap: 18px; margin-bottom: 28px; }
body.modern .contact-icon { width: 44px; height: 44px; background: var(--brand-light); border-radius:3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand-main); }
body.modern .contact-icon svg { width: 20px; height: 20px; }
body.modern .contact-form { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); }
body.modern .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.modern .form-group { margin-bottom: 16px; }
body.modern .form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
body.modern .form-group input, body.modern .form-group select, body.modern .form-group textarea {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--gray-300);
  border-radius:3px; font-size: 0.9rem; font-family: inherit;
  color: var(--gray-900); transition: var(--transition); background: var(--white);
}
body.modern .form-group input:focus, body.modern .form-group select:focus, body.modern .form-group textarea:focus { outline: none; border-color: var(--brand-main); box-shadow: 0 0 0 3px rgba(244,112,40,0.12); }
body.modern .form-group textarea { resize: vertical; min-height: 120px; }
body.modern .map-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); height: 300px; background: var(--gray-100); position: relative; }
body.modern .map-wrap iframe { width: 100%; height: 100%; border: none; }
body.modern .page-hero {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-dark) 100%);
  padding: 120px 0 72px; margin-top: 72px;
  position: relative; overflow: hidden;
}
body.modern .page-hero::after {
  content: ''; position: absolute; right: -10%; top: -20%; width: 60%; height: 140%;
  background:none;
  opacity: 0.06; transform: skewX(-5deg);
}
body.modern .page-hero h1 { color: var(--white); }
body.modern .page-hero .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-bottom: 18px; }
body.modern .page-hero .breadcrumb a { color: rgba(255,255,255,0.5); transition: var(--transition); }
body.modern .page-hero .breadcrumb a:hover { color: var(--white); }
body.modern .page-hero p { color: rgba(255,255,255,0.65); max-width: 1100px; margin-top: 14px; }
@media (max-width: 1024px) {
  body.modern .about-grid, body.modern .facility-grid, body.modern .global-layout, body.modern .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  body.modern .products-grid { grid-template-columns: 1fr 1fr; }
  body.modern .tech-strip-grid { grid-template-columns: 1fr 1fr; }
  body.modern .footer-grid { grid-template-columns: 1fr 1fr; }
  body.modern .stats-band-grid { grid-template-columns: 1fr 1fr; }
  body.modern .about-img-badge { right: 0; bottom: -16px; }
  body.modern .about-small-img { left: 0; top: -16px; }
}
@media (max-width: 768px) {
  body.modern .nav-menu, body.modern .nav-right { display: none; }
  body.modern .hamburger { display: flex; }
  body.modern .hero h1 { font-size: 2rem; }
  body.modern .hero-kpi { gap: 24px; }
  body.modern .products-grid, body.modern .esg-cards, body.modern .quality-grid { grid-template-columns: 1fr; }
  body.modern .tech-strip-grid { grid-template-columns: 1fr; }
  body.modern .footer-grid { grid-template-columns: 1fr; }
  body.modern .stats-band-grid { grid-template-columns: 1fr 1fr; }
  body.modern .ceo-wrap { grid-template-columns: 1fr; text-align: center; padding: 32px; }
  body.modern .ceo-photo { margin: 0 auto; }
  body.modern blockquote { padding-left: 0; }
  body.modern blockquote::before { position: static; }
  body.modern .form-row { grid-template-columns: 1fr; }
  body.modern .about-img-badge, body.modern .about-small-img { display: none; }
  body.modern .clients-bar-label { display: none; }
  body.modern .clients-track-wrap { padding: 0 16px; }
}

/* ===== 5. Shell: Group A pages (body.classic) ===== */
body.classic .container {max-width:var(--max-w);margin:0 auto;padding:0 24px}
body.classic .nav {position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--gray-200);transition:box-shadow .3s}
body.classic .nav.scrolled {box-shadow:0 2px 20px rgba(244,112,40,0.1)}
body.classic .nav-inner {max-width:var(--max-w);margin:0 auto;padding:0 24px;display:flex;align-items:center;height:68px;gap:32px}
body.classic .nav-logo {display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
body.classic .nav-logo img {height:36px;width:auto}
body.classic .nav-logo-name {font-size:21px;font-weight:800;color:var(--blue);letter-spacing:-.5px}
body.classic .nav-logo-sub {font-size:11px;color:var(--gray-600);letter-spacing:.5px;text-transform:uppercase}
body.classic .nav-menu {display:flex;list-style:none;gap:48px;margin:0 0 0 44px;padding:0}
body.classic .nav-item {position:relative}
body.classic .nav-link {display:flex;align-items:center;gap:4px;padding:8px 14px;border-radius:3px;text-decoration:none;font-size:16px;font-weight:600;color:var(--gray-900);transition:all .2s;white-space:nowrap}
body.classic .nav-link:hover, body.classic .nav-link.active {color:var(--gray-900);background:transparent;box-shadow:inset 0 -2px 0 var(--blue)}
body.classic .nav-link svg {width:12px;height:12px;transition:transform .2s}
body.classic .nav-item:hover .nav-link svg {transform:rotate(180deg)}
body.classic .nav-dropdown {display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:8px;min-width:160px;box-shadow:0 8px 32px rgba(244,112,40,0.12);z-index:100}
body.classic .nav-item:hover .nav-dropdown {display:block}
body.classic .nav-dropdown a {display:block;padding:8px 12px;font-size:15px;color:var(--gray-700);text-decoration:none;border-radius:3px;transition:all .2s;white-space:nowrap}
body.classic .nav-dropdown a:hover {background:var(--blue-pale);color:var(--blue)}
body.classic .nav-right {display:flex;align-items:center;gap:12px;margin-left:auto}
body.classic .lang-toggle {display:flex;background:var(--gray-100);border-radius:3px;padding:3px}
body.classic .lang-btn {border:none;background:none;padding:4px 12px;border-radius:3px;font-size:14px;font-weight:600;color:var(--gray-600);cursor:pointer;transition:all .2s}
body.classic .lang-btn.active {background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(0,0,0,0.1)}
body.classic .nav-cta {padding:8px 18px;background:var(--blue);color:#fff;border-radius:3px;text-decoration:none;font-size:15px;font-weight:700;transition:all .2s;white-space:nowrap}
body.classic .nav-cta:hover {background:var(--blue-light);transform:translateY(-1px)}
body.classic .hamburger {display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
body.classic .hamburger span {display:block;width:22px;height:2px;background:var(--gray-700);border-radius:2px;transition:all .3s}
body.classic .hamburger.open span:nth-child(1) {transform:translateY(7px) rotate(45deg)}
body.classic .hamburger.open span:nth-child(2) {opacity:0}
body.classic .hamburger.open span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)}
body.classic .mobile-nav {display:none;position:fixed;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--gray-200);padding:16px 24px;z-index:999;box-shadow:0 8px 24px rgba(0,0,0,0.08)}
body.classic .mobile-nav.open {display:block}
body.classic .mobile-nav a {display:block;padding:12px 0;font-size:17px;font-weight:600;color:var(--gray-700);text-decoration:none;border-bottom:1px solid var(--gray-100)}
body.classic .mobile-nav a:last-child {border-bottom:none}
body.classic .page-hero {background:linear-gradient(135deg,var(--blue) 0%,#EA530D 60%,#FA9450 100%);color:#fff;padding:120px 0 64px;position:relative;overflow:hidden}
body.classic .page-hero::before {content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
body.classic .page-hero-inner {position:relative;z-index:1}
body.classic .breadcrumb {display:flex;align-items:center;gap:8px;font-size:15px;opacity:.7;margin-bottom:16px}
body.classic .breadcrumb a {color:#fff;text-decoration:none}
body.classic .breadcrumb svg {width:12px;height:12px}
body.classic .page-hero h1 {font-size:clamp(28px,5vw,48px);font-weight:800;letter-spacing:-1px;margin-bottom:16px}
body.classic .page-hero p {font-size:18px;opacity:.85;max-width:1100px;line-height:1.7}
body.classic .section {padding:80px 0}
body.classic .section-alt {background:var(--gray-50)}
body.classic .section-header {text-align:center;margin-bottom:56px}
body.classic .section-label {display:inline-block;background:transparent;color:var(--blue);font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 0;margin-bottom:12px}
body.classic .section-title {font-size:clamp(22px,4vw,36px);font-weight:800;color:var(--gray-900);letter-spacing:-0.5px}
body.classic .section-sub {margin-top:12px;color:var(--gray-600);font-size:18px;line-height:1.7;max-width:1000px;margin-left:auto;margin-right:auto}
body.classic .footer {background:var(--gray-900);color:#fff;padding:64px 0 0}
body.classic .footer-grid {display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.1)}
body.classic .footer-logo {display:flex;align-items:center;gap:12px;margin-bottom:16px}
body.classic .footer-logo-mark {width:44px;height:44px;background:var(--blue-light);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#fff}
body.classic .footer-logo-name {font-size:18px;font-weight:800;color:#fff}
body.classic .footer-logo-sub {font-size:12px;color:rgba(255,255,255,0.5);letter-spacing:.5px}
body.classic .footer-brand p {font-size:15px;color:rgba(255,255,255,0.85);line-height:1.8;margin-bottom:20px;word-break:keep-all}
body.classic .footer-contact-row {display:flex;align-items:flex-start;gap:8px;font-size:15px;color:rgba(255,255,255,0.6);margin-bottom:8px;word-break:keep-all}
body.classic .footer-contact-row svg {width:14px;height:14px;flex-shrink:0;margin-top:2px;opacity:.7}
body.classic .footer-col h5 {font-size:15px;font-weight:700;color:rgba(255,255,255,0.9);margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px}
body.classic .footer-col a {display:block;font-size:15px;color:rgba(255,255,255,0.55);text-decoration:none;margin-bottom:10px;transition:color .2s}
body.classic .footer-col a:hover {color:#fff}
body.classic .footer-bottom {padding:20px 0;text-align:center;font-size:14px;color:rgba(255,255,255,0.35)}
body.classic .btn {display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:3px;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;border:none;transition:all .2s}
body.classic .btn-primary {background:var(--blue);color:#fff}
body.classic .btn-primary:hover {background:var(--blue-light);transform:translateY(-2px);box-shadow:0 4px 16px rgba(244,112,40,0.3)}
body.classic .btn-outline {background:transparent;color:var(--blue);border:2px solid var(--blue)}
body.classic .btn-outline:hover {background:var(--blue-pale)}
body.classic .tag {display:inline-block;padding:3px 10px;border-radius:3px;font-size:13px;font-weight:700;letter-spacing:.5px}
body.classic .tag-blue {background:var(--blue-pale);color:var(--blue)}
body.classic .tag-green {background:var(--green-light);color:var(--green)}
@media(max-width:1024px) {
  body.classic .nav-menu, body.classic .nav-cta {display:none}
  body.classic .hamburger {display:flex}
  body.classic .footer-grid {grid-template-columns:1fr 1fr}
}
@media(max-width:640px) {
  body.classic .footer-grid {grid-template-columns:1fr}
  body.classic .section {padding:60px 0}
}

/* ===== 6. Page-specific ===== */
/* --- company --- */
/* 2026-08-07: .stats-grid/.stat-card·.overview-badge-row 은 company.html 에서
   숫자 카드 4개와 인증 태그 4개를 걷어내면서 쓰는 곳이 없어진 사문이다.
   되살릴 일이 없으면 다음 정리 때 지워도 된다. */
body.page-company .stats-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:64px}
body.page-company .stat-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:32px 24px;text-align:center;transition:all .3s;box-shadow:0 2px 8px rgba(244,112,40,0.04)}
body.page-company .stat-card:hover {border-color:var(--blue);box-shadow:0 8px 32px rgba(244,112,40,0.12);transform:translateY(-4px)}
body.page-company .stat-card-number {font-size:36px;font-weight:900;color:var(--blue);letter-spacing:-1px;line-height:1}
body.page-company .stat-card-label {margin-top:8px;font-size:15px;color:var(--gray-600);font-weight:600}
body.page-company .overview-grid {display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
body.page-company .overview-img {border-radius:3px;overflow:hidden;box-shadow:0 16px 48px rgba(244,112,40,0.15)}
body.page-company .overview-img img {width:100%;height:400px;object-fit:cover;display:block}
body.page-company .overview-text h3 {font-size:26px;font-weight:800;color:var(--gray-900);margin-bottom:16px;letter-spacing:-.5px}
body.page-company .overview-text p {color:var(--gray-600);line-height:1.85;font-size:17px;margin-bottom:14px}
body.page-company .overview-badge-row {display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
body.page-company .ceo-section {background:var(--gray-50)}
body.page-company .ceo-grid {display:grid;grid-template-columns:1fr 2fr;gap:56px;align-items:start}
body.page-company .ceo-photo {text-align:center}
body.page-company .ceo-photo img {width:220px;height:280px;object-fit:cover;border-radius:3px;box-shadow:0 12px 40px rgba(244,112,40,0.15)}
body.page-company .ceo-photo-name {margin-top:14px;font-weight:800;font-size:18px;color:var(--gray-900)}
body.page-company .ceo-photo-title {font-size:14px;color:var(--gray-600);margin-top:4px}
body.page-company .ceo-message h3 {font-size:23px;font-weight:800;color:var(--gray-900);margin-bottom:20px;line-height:1.4}
body.page-company .ceo-message p {font-size:17px;color:var(--gray-700);line-height:1.9;margin-bottom:16px}
body.page-company .ceo-sig {margin-top:24px;font-size:16px;color:var(--gray-700)}
body.page-company .ceo-sig strong {display:block;font-size:18px;font-weight:800;color:var(--blue);margin-top:6px}
body.page-company .timeline {position:relative;padding-left:32px}
body.page-company .timeline::before {content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--gray-200)}
body.page-company .timeline-item {position:relative;margin-bottom:40px}
body.page-company .timeline-item::before {content:'';position:absolute;left:-28px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 2px var(--blue)}
body.page-company .timeline-year {font-size:15px;font-weight:800;color:var(--blue);letter-spacing:1px;margin-bottom:6px}
body.page-company .timeline-content h4 {font-size:17px;font-weight:700;color:var(--gray-900);margin-bottom:4px}
body.page-company .timeline-content p {font-size:15px;color:var(--gray-600);line-height:1.6}
body.page-company .vision-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:32px 24px;text-align:center;transition:all .3s}
body.page-company .vision-card:hover {border-color:var(--blue);box-shadow:0 8px 32px rgba(244,112,40,0.1);transform:translateY(-4px)}
body.page-company .vision-icon {width:56px;height:56px;background:var(--blue-pale);border-radius:3px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
body.page-company .vision-icon svg {width:28px;height:28px;stroke:var(--blue)}
body.page-company .vision-card h4 {font-size:18px;font-weight:800;color:var(--gray-900);margin-bottom:8px}
body.page-company .vision-card p {font-size:15px;color:var(--gray-600);line-height:1.7}
body.page-company .related-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:28px 24px;transition:all .3s;display:flex;flex-direction:column;gap:12px}
body.page-company .related-card:hover {border-color:var(--accent);box-shadow:0 8px 32px rgba(248,144,80,0.12);transform:translateY(-4px)}
body.page-company .related-card h4 {font-size:18px;font-weight:800;color:var(--gray-900)}
body.page-company .related-card p {font-size:15px;color:var(--gray-600);line-height:1.7}
body.page-company .related-card a {display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--blue);text-decoration:none}
body.page-company .related-card a svg {width:14px;height:14px}
@media(max-width:768px) {
  body.page-company .stats-grid {grid-template-columns:1fr 1fr}
  body.page-company .overview-grid {grid-template-columns:1fr}
  body.page-company .ceo-grid {grid-template-columns:1fr}
}

/* --- esg --- */
body.page-esg .esg-highlights {display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:0}
body.page-esg .esg-highlight {text-align:center;padding:40px 24px;border-radius:3px}
body.page-esg .esg-highlight.env {background:var(--green-light)}
body.page-esg .esg-highlight.soc {background:var(--blue-pale)}
body.page-esg .esg-highlight.gov {background:var(--purple-light)}
body.page-esg .esg-hl-num {font-size:42px;font-weight:900;letter-spacing:-1px;line-height:1}
body.page-esg .esg-hl-num.env {color:var(--green)}
body.page-esg .esg-hl-num.soc {color:var(--blue)}
body.page-esg .esg-hl-num.gov {color:var(--purple)}
body.page-esg .esg-hl-label {margin-top:8px;font-size:16px;font-weight:700;color:var(--gray-700)}
body.page-esg .esg-hl-sub {margin-top:4px;font-size:14px;color:var(--gray-600)}
body.page-esg .esg-section-stripe {border-left:5px solid;padding:0 0 0 24px;margin-bottom:48px}
body.page-esg .esg-section-stripe.env {border-color:var(--green)}
body.page-esg .esg-section-stripe.soc {border-color:var(--blue-light)}
body.page-esg .esg-section-stripe.gov {border-color:var(--purple)}
body.page-esg .esg-section-stripe h2 {font-size:28px;font-weight:800;margin-bottom:6px}
body.page-esg .esg-section-stripe p {font-size:16px;color:var(--gray-600)}
body.page-esg .esg-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:28px 24px;transition:all .3s}
body.page-esg .esg-card:hover {box-shadow:0 8px 32px rgba(0,0,0,0.08);transform:translateY(-3px)}
body.page-esg .esg-card-icon {width:48px;height:48px;border-radius:3px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
body.page-esg .esg-card-icon svg {width:24px;height:24px;fill:none;stroke-width:2}
body.page-esg .esg-card-icon.env {background:var(--green-light)}
body.page-esg .esg-card-icon.env svg {stroke:var(--green)}
body.page-esg .esg-card-icon.soc {background:var(--blue-pale)}
body.page-esg .esg-card-icon.soc svg {stroke:var(--blue)}
body.page-esg .esg-card-icon.gov {background:var(--purple-light)}
body.page-esg .esg-card-icon.gov svg {stroke:var(--purple)}
body.page-esg .esg-card h4 {font-size:18px;font-weight:800;color:var(--gray-900);margin-bottom:8px}
body.page-esg .esg-card p {font-size:15px;color:var(--gray-600);line-height:1.75}
body.page-esg .esg-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
body.page-esg .esg-two-col {display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
body.page-esg .esg-photo {border-radius:3px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,0.12)}
body.page-esg .esg-photo img {width:100%;height:320px;object-fit:cover;display:block}
body.page-esg .progress-item {margin-bottom:20px}
body.page-esg .progress-label {display:flex;justify-content:space-between;margin-bottom:6px;font-size:15px;font-weight:600;color:var(--gray-700)}
body.page-esg .progress-bar {height:10px;background:var(--gray-100);border-radius:3px;overflow:hidden}
body.page-esg .progress-fill {height:100%;border-radius:3px}
body.page-esg .progress-fill.env {background:linear-gradient(90deg,var(--green),#4ade80)}
body.page-esg .progress-fill.soc {background:linear-gradient(90deg,var(--blue),var(--accent))}
body.page-esg .progress-fill.gov {background:linear-gradient(90deg,var(--purple),#a78bfa)}
body.page-esg .target-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:24px;text-align:center}
body.page-esg .target-year {font-size:14px;font-weight:700;color:var(--accent);letter-spacing:1px;margin-bottom:4px}
body.page-esg .target-pct {font-size:21px;font-weight:900;color:var(--blue)}
@media(max-width:768px) {
  body.page-esg .esg-highlights {grid-template-columns:1fr}
  body.page-esg .esg-grid {grid-template-columns:1fr}
  body.page-esg .esg-two-col {grid-template-columns:1fr}
}

/* --- global --- */
body.page-global .map-img-wrap {position:relative;width:100%;border-radius:3px;overflow:hidden;box-shadow:0 20px 60px rgba(28,10,0,0.22);margin-bottom:24px;line-height:0;background:#222222}
body.page-global .map-img-wrap img {width:100%;height:auto;display:block;clip-path:inset(0 0 2px 0);border-radius:3px}
body.page-global .ping-dot {position:absolute;width:13px;height:13px;transform:translate(-50%,-50%);border-radius:50%;background:var(--blue);border:2px solid rgba(255,255,255,0.85);cursor:default;z-index:5}
body.page-global .ping-dot.ping-hq {width:18px;height:18px;background:#de2905;border-color:#fff;box-shadow:0 0 0 4px rgba(222,41,5,0.28),0 2px 14px rgba(222,41,5,0.45)}
body.page-global .ping-dot.ping-future {background:rgba(180,200,240,0.55);border-color:rgba(255,255,255,0.45)}
body.page-global .pd-ring {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;background:inherit;animation:pdRing 2.2s ease-out infinite}
body.page-global .ping-label {position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);background:rgba(20,8,0,.92);color:#fff;font-size:13px;font-weight:700;padding:5px 11px;border-radius:3px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s;font-family:var(--font);border:1px solid rgba(244,112,40,.35);letter-spacing:.2px;z-index:10}
body.page-global .ping-dot:hover {z-index:20}
body.page-global .ping-dot:hover .ping-label {opacity:1}
body.page-global .map-info-bar {display:flex;align-items:center;gap:24px;background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:16px 24px;margin-bottom:48px;flex-wrap:wrap}
body.page-global .map-legend {display:flex;gap:18px;flex-shrink:0;flex-wrap:wrap}
body.page-global .legend-item {display:flex;align-items:center;gap:7px;font-size:14px;color:var(--gray-700);font-weight:600}
body.page-global .legend-dot {width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.7)}
body.page-global .legend-dot.hq {background:#de2905;border-color:#fff;width:14px;height:14px;box-shadow:0 0 0 2px rgba(222,41,5,.2)}
body.page-global .legend-dot.dest {background:var(--blue)}
body.page-global .legend-dot.fut {background:rgba(180,200,240,0.55);border-color:rgba(150,170,220,0.5)}
body.page-global .map-bar-divider {width:1px;height:36px;background:var(--gray-200);flex-shrink:0}
body.page-global .map-table-info {flex:1;min-width:200px}
body.page-global .mti-row {display:flex;gap:12px;font-size:14px;padding:3px 0}
body.page-global .mti-row+.mti-row {border-top:1px solid var(--gray-100);margin-top:5px;padding-top:8px}
body.page-global .mti-label {font-weight:700;color:var(--gray-700);flex-shrink:0;min-width:80px}
body.page-global .mti-value {color:var(--gray-600)}
body.page-global .country-cards {display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
body.page-global .country-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:24px 20px;transition:all .3s}
body.page-global .country-card:hover {border-color:var(--blue);box-shadow:0 8px 32px rgba(244,112,40,0.12);transform:translateY(-4px)}
body.page-global .country-flag {font-size:32px;margin-bottom:12px;line-height:1}
body.page-global .country-name {font-size:18px;font-weight:800;color:var(--gray-900);margin-bottom:4px}
body.page-global .country-region {font-size:14px;color:var(--accent);font-weight:700;margin-bottom:10px}
body.page-global .country-info {font-size:14px;color:var(--gray-600);line-height:1.7}
body.page-global .process-steps {display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
body.page-global .process-steps::before {content:'';position:absolute;top:36px;left:calc(100%/12);right:calc(100%/12);height:2px;background:linear-gradient(90deg,var(--blue),var(--accent));z-index:0}
body.page-global .step {text-align:center;position:relative;z-index:1}
body.page-global .step-num {width:72px;height:72px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 4px 16px rgba(244,112,40,0.25)}
body.page-global .step-num svg {width:32px;height:32px;stroke:#fff;fill:none;stroke-width:2}
body.page-global .step h4 {font-size:15px;font-weight:700;color:var(--gray-900);margin-bottom:4px}
body.page-global .step p {font-size:13px;color:var(--gray-600)}
body.page-global .photo-banner {height:360px;overflow:hidden;border-radius:3px;position:relative}
body.page-global .photo-banner img {width:100%;height:100%;object-fit:cover}
body.page-global .photo-banner-overlay {position:absolute;inset:0;background:linear-gradient(135deg,rgba(28,10,0,0.75),rgba(248,144,80,0.4));display:flex;align-items:center;justify-content:center;color:#fff;text-align:center}
body.page-global .photo-banner-overlay h3 {font-size:clamp(20px,3vw,36px);font-weight:800;letter-spacing:-0.5px;margin-bottom:8px}
body.page-global .photo-banner-overlay p {font-size:17px;opacity:.85}
@media(max-width:900px) {
  body.page-global .country-cards {grid-template-columns:repeat(3,1fr)}
  body.page-global .process-steps {grid-template-columns:repeat(3,1fr);gap:24px}
  body.page-global .process-steps::before {display:none}
  body.page-global .map-bar-divider {display:none}
}
@media(max-width:600px) {
  body.page-global .country-cards {grid-template-columns:1fr 1fr}
  body.page-global .process-steps {grid-template-columns:1fr 1fr}
}

/* --- contact --- */
body.page-contact .contact-layout {display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:start}
body.page-contact .contact-info-card {background:var(--gray-50);border-radius:3px;padding:32px;margin-bottom:20px}
body.page-contact .contact-info-card h3 {font-size:19px;font-weight:800;color:var(--gray-900);margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--blue-pale)}
body.page-contact .contact-row {display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
body.page-contact .contact-row:last-child {margin-bottom:0}
body.page-contact .contact-icon {width:38px;height:38px;background:var(--blue-pale);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
body.page-contact .contact-icon svg {width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:2}
body.page-contact .contact-label {font-size:13px;font-weight:700;color:var(--gray-600);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
body.page-contact .contact-value {font-size:16px;font-weight:600;color:var(--gray-900);line-height:1.5}
body.page-contact .contact-value a {color:var(--blue);text-decoration:none}
body.page-contact .contact-value a:hover {text-decoration:underline}
body.page-contact .form-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:36px;box-shadow:0 4px 24px rgba(244,112,40,0.06)}
body.page-contact .form-card h3 {font-size:19px;font-weight:800;color:var(--gray-900);margin-bottom:24px;padding-bottom:14px;border-bottom:2px solid var(--blue-pale)}
body.page-contact .form-group {margin-bottom:18px}
body.page-contact .form-row {display:grid;grid-template-columns:1fr 1fr;gap:16px}
body.page-contact label {display:block;font-size:14px;font-weight:700;color:var(--gray-700);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
body.page-contact label .req {color:#e53e3e;margin-left:2px}
body.page-contact input, body.page-contact select, body.page-contact textarea {width:100%;padding:10px 14px;border:1.5px solid var(--gray-200);border-radius:3px;font-size:16px;color:var(--gray-900);font-family:var(--font);background:#fff;transition:border-color .2s}
body.page-contact input:focus, body.page-contact select:focus, body.page-contact textarea:focus {outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(244,112,40,0.08)}
body.page-contact textarea {resize:vertical;min-height:120px}
body.page-contact .privacy-row {display:flex;align-items:flex-start;gap:10px;margin-top:4px}
body.page-contact .privacy-row input[type=checkbox] {width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--blue)}
body.page-contact .privacy-row p {font-size:14px;color:var(--gray-600);line-height:1.6}
body.page-contact .submit-btn {width:100%;padding:14px;background:var(--blue);color:#fff;border:none;border-radius:3px;font-size:17px;font-weight:700;cursor:pointer;margin-top:8px;transition:all .2s;font-family:var(--font)}
body.page-contact .submit-btn:hover {background:var(--blue-light);transform:translateY(-1px);box-shadow:0 4px 16px rgba(244,112,40,0.3)}
body.page-contact .map-section {margin-top:0}
body.page-contact .map-wrap {border-radius:3px;overflow:hidden;box-shadow:0 8px 32px rgba(244,112,40,0.1)}
body.page-contact .map-wrap iframe {width:100%;height:420px;border:none;display:block}
body.page-contact .directions-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
body.page-contact .direction-card {background:var(--gray-50);border-radius:3px;padding:24px}
body.page-contact .direction-card h4 {display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;color:var(--gray-900);margin-bottom:12px}
body.page-contact .direction-card h4 svg {width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:2}
body.page-contact .direction-card p {font-size:15px;color:var(--gray-600);line-height:1.8}
body.page-contact .recruit-card {background:linear-gradient(135deg,var(--blue) 0%,var(--blue-light) 100%);border-radius:3px;padding:48px 40px;color:#fff;text-align:center}
body.page-contact .recruit-card h3 {font-size:26px;font-weight:800;margin-bottom:12px;letter-spacing:-.5px}
body.page-contact .recruit-card p {font-size:17px;opacity:.85;line-height:1.7;max-width:760px;margin:0 auto 24px}
body.page-contact .recruit-card a {display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--blue);padding:12px 28px;border-radius:3px;font-size:16px;font-weight:800;text-decoration:none;transition:all .2s}
body.page-contact .recruit-card a:hover {transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
@media(max-width:900px) {
  body.page-contact .contact-layout {grid-template-columns:1fr}
  body.page-contact .form-row {grid-template-columns:1fr}
  body.page-contact .directions-grid {grid-template-columns:1fr}
}

/* --- management --- */
body.page-management .tab-nav {display:flex;border-bottom:2px solid var(--gray-200);margin-bottom:56px;gap:0}
body.page-management .tab-btn {padding:14px 28px;font-size:16px;font-weight:700;color:var(--gray-600);background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;transition:all .2s;font-family:var(--font)}
body.page-management .tab-btn.active {color:var(--gray-900);border-bottom-color:var(--gray-900)}
body.page-management .tab-btn:hover {color:var(--gray-900)}
body.page-management .tab-panel {display:none}
body.page-management .tab-panel.active {display:block}
body.page-management .oc {overflow-x:auto;padding:8px 0 32px}
body.page-management .oc ul {display:flex;list-style:none;padding:0;margin:0;position:relative;padding-top:20px;justify-content:center}
body.page-management .oc ul::before {content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:20px;background:var(--gray-300)}
body.page-management .oc>ul {padding-top:0}
body.page-management .oc>ul::before {display:none}
body.page-management .oc li {flex:none;display:flex;flex-direction:column;align-items:center;position:relative;padding:20px 8px 0}
body.page-management .oc>ul>li {padding:0}
body.page-management .oc li::before {content:'';position:absolute;top:0;left:0;right:0;border-top:2px solid var(--gray-300)}
body.page-management .oc li:first-child::before {left:50%}
body.page-management .oc li:last-child::before {right:50%}
body.page-management .oc li:only-child::before {display:none}
body.page-management .oc>ul>li::before {display:none}
body.page-management .oc li::after {content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:20px;background:var(--gray-300)}
body.page-management .oc>ul>li::after {display:none}
body.page-management .oc-node {padding:10px 16px;border-radius:3px;font-size:15px;font-weight:700;text-align:center;line-height:1.4}
body.page-management .oc-ceo {background:var(--blue);color:#fff;padding:14px 40px;font-size:17px;border-radius:3px}
body.page-management .oc-group {background:var(--blue-pale);color:var(--blue);border:1.5px solid rgba(244,112,40,0.4);min-width:120px;white-space:nowrap}
body.page-management .oc-team {background:#fff;color:var(--gray-700);border:1px solid var(--gray-200);font-size:14px;font-weight:600;min-width:90px;white-space:nowrap}
body.page-management .ethics-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
body.page-management .ethics-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:32px 24px;text-align:center;transition:all .25s}
body.page-management .ethics-card:hover {border-color:var(--blue);box-shadow:0 8px 32px rgba(244,112,40,0.10);transform:translateY(-4px)}
body.page-management .ethics-icon {width:60px;height:60px;background:var(--blue-pale);border-radius:3px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
body.page-management .ethics-icon svg {width:28px;height:28px;stroke:var(--blue);fill:none;stroke-width:1.8}
body.page-management .ethics-card h4 {font-size:18px;font-weight:800;color:var(--gray-900);margin-bottom:10px}
body.page-management .ethics-card p {font-size:15px;color:var(--gray-600);line-height:1.75}
body.page-management .finance-coming {background:var(--gray-50);border:2px dashed var(--gray-300);border-radius:3px;padding:72px 40px;text-align:center}
body.page-management .finance-coming svg {width:48px;height:48px;stroke:var(--gray-300);fill:none;stroke-width:1.5;margin:0 auto 20px;display:block}
body.page-management .finance-coming h3 {font-size:21px;font-weight:800;color:var(--gray-700);margin-bottom:10px}
body.page-management .finance-coming p {font-size:16px;color:var(--gray-600);line-height:1.7}
body.page-management .finance-kpi {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px}
body.page-management .kpi-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:28px 20px;text-align:center}
body.page-management .kpi-card .num {font-size:28px;font-weight:800;color:var(--blue);letter-spacing:-1px}
body.page-management .kpi-card .unit {font-size:15px;color:var(--gray-600);margin-top:4px}
body.page-management .kpi-card .lbl {font-size:14px;font-weight:600;color:var(--gray-600);margin-top:6px;text-transform:uppercase;letter-spacing:.5px}
@media(max-width:900px) {
  body.page-management .ethics-grid {grid-template-columns:1fr 1fr}
  body.page-management .finance-kpi {grid-template-columns:1fr 1fr}
}
@media(max-width:600px) {
  body.page-management .ethics-grid {grid-template-columns:1fr}
  body.page-management .tab-btn {padding:12px 16px;font-size:15px}
  body.page-management .finance-kpi {grid-template-columns:1fr 1fr}
}

/* --- location --- */
body.page-location .loc-layout {display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
body.page-location .map-placeholder {width:100%;aspect-ratio:4/3;background:var(--gray-100);border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1px solid var(--gray-200)}
body.page-location .map-placeholder::before {content:'';position:absolute;inset:0;background:linear-gradient(135deg,#f0f4ff 0%,#e8ecf8 100%)}
body.page-location .map-bg-grid {position:absolute;inset:0;background-image:linear-gradient(var(--gray-200) 1px,transparent 1px),linear-gradient(90deg,var(--gray-200) 1px,transparent 1px);background-size:32px 32px;opacity:.5}
body.page-location .map-pin-wrap {position:relative;z-index:2;text-align:center}
body.page-location .map-pin {width:56px;height:56px;background:var(--blue);border-radius:50% 50% 50% 4px;transform:rotate(-45deg);margin:0 auto 16px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(244,112,40,0.4)}
body.page-location .map-pin svg {transform:rotate(45deg);width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}
body.page-location .map-addr {font-size:15px;font-weight:700;color:var(--gray-700);margin-bottom:8px}
body.page-location .map-btn {display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:var(--blue);color:#fff;border-radius:3px;font-size:15px;font-weight:700;text-decoration:none;transition:background .2s}
body.page-location .map-btn:hover {background:var(--blue-light)}
body.page-location .map-btn svg {width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
body.page-location .info-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:32px}
body.page-location .info-card+.info-card {margin-top:20px}
body.page-location .info-card-header {display:flex;align-items:center;gap:12px;margin-bottom:20px}
body.page-location .info-card-icon {width:44px;height:44px;background:var(--blue-pale);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
body.page-location .info-card-icon svg {width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.8}
body.page-location .info-card h3 {font-size:18px;font-weight:800;color:var(--gray-900)}
body.page-location .info-row {display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--gray-100);font-size:16px}
body.page-location .info-row:last-child {border-bottom:none;padding-bottom:0}
body.page-location .info-row dt {width:80px;flex-shrink:0;color:var(--gray-600);font-weight:600}
body.page-location .info-row dd {color:var(--gray-900);line-height:1.6}
body.page-location .transport-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:0}
body.page-location .t-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:24px;text-align:center;transition:all .25s}
body.page-location .t-card:hover {border-color:var(--blue);box-shadow:0 4px 20px rgba(244,112,40,0.1)}
body.page-location .t-icon {width:52px;height:52px;background:var(--blue-pale);border-radius:3px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
body.page-location .t-icon svg {width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.8}
body.page-location .t-card h4 {font-size:16px;font-weight:800;color:var(--gray-900);margin-bottom:8px}
body.page-location .t-card p {font-size:14px;color:var(--gray-600);line-height:1.7}
body.page-location .facility-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
body.page-location .fac-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:24px 16px;text-align:center}
body.page-location .fac-num {font-size:28px;font-weight:800;color:var(--blue);letter-spacing:-1px}
body.page-location .fac-unit {font-size:14px;color:var(--gray-600);margin-top:2px}
body.page-location .fac-lbl {font-size:14px;font-weight:600;color:var(--gray-700);margin-top:8px}
body.page-location .cta-banner {background:linear-gradient(135deg,var(--blue) 0%,#EA530D 100%);border-radius:3px;padding:48px 40px;display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:0}
body.page-location .cta-banner h3 {font-size:23px;font-weight:800;color:#fff}
body.page-location .cta-banner p {font-size:16px;color:rgba(255,255,255,0.82);margin-top:6px}
body.page-location .cta-banner a {flex-shrink:0;padding:14px 32px;background:#fff;color:var(--blue);border-radius:3px;font-size:16px;font-weight:800;text-decoration:none;transition:all .2s;white-space:nowrap}
body.page-location .cta-banner a:hover {background:var(--blue-pale)}
@media(max-width:900px) {
  body.page-location .loc-layout {grid-template-columns:1fr}
  body.page-location .transport-grid {grid-template-columns:1fr 1fr}
  body.page-location .facility-grid {grid-template-columns:1fr 1fr}
  body.page-location .cta-banner {flex-direction:column;text-align:center}
}
@media(max-width:600px) {
  body.page-location .transport-grid {grid-template-columns:1fr}
  body.page-location .facility-grid {grid-template-columns:1fr 1fr}
}

/* --- visit --- */
body.page-visit .visit-layout {display:grid;grid-template-columns:1fr 1.8fr;gap:48px;align-items:start}
body.page-visit .info-panel {display:flex;flex-direction:column;gap:16px}
body.page-visit .info-card {background:var(--gray-50);border-radius:3px;padding:28px}
body.page-visit .info-card h3 {font-size:17px;font-weight:800;color:var(--gray-900);margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--blue-pale);display:flex;align-items:center;gap:8px}
body.page-visit .info-card h3 svg {width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:2}
body.page-visit .info-row {display:flex;gap:12px;margin-bottom:12px;align-items:flex-start}
body.page-visit .info-row:last-child {margin-bottom:0}
body.page-visit .info-dot {width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:7px}
body.page-visit .info-row p {font-size:15px;color:var(--gray-600);line-height:1.7}
body.page-visit .info-row strong {color:var(--gray-900)}
body.page-visit .notice-badge {display:inline-flex;align-items:center;gap:6px;background:#FEF2E9;color:#B45309;font-size:13px;font-weight:700;padding:4px 10px;border-radius:3px;margin-bottom:12px}
body.page-visit .notice-badge svg {width:12px;height:12px}
body.page-visit .form-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:36px;box-shadow:0 4px 24px rgba(244,112,40,0.06)}
body.page-visit .form-card h3 {font-size:19px;font-weight:800;color:var(--gray-900);margin-bottom:24px;padding-bottom:14px;border-bottom:2px solid var(--blue-pale)}
body.page-visit .form-group {margin-bottom:18px}
body.page-visit .form-row {display:grid;grid-template-columns:1fr 1fr;gap:16px}
body.page-visit label {display:block;font-size:14px;font-weight:700;color:var(--gray-700);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
body.page-visit label .req {color:#e53e3e;margin-left:2px}
body.page-visit input, body.page-visit select, body.page-visit textarea {width:100%;padding:10px 14px;border:1.5px solid var(--gray-200);border-radius:3px;font-size:16px;color:var(--gray-900);font-family:var(--font);background:#fff;transition:border-color .2s}
body.page-visit input:focus, body.page-visit select:focus, body.page-visit textarea:focus {outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(244,112,40,0.08)}
body.page-visit textarea {resize:vertical;min-height:90px}
body.page-visit .privacy-row {display:flex;align-items:flex-start;gap:10px;margin-top:4px}
body.page-visit .privacy-row input[type=checkbox] {width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--blue)}
body.page-visit .privacy-row p {font-size:14px;color:var(--gray-600);line-height:1.6}
body.page-visit .submit-btn {width:100%;padding:14px;background:var(--blue);color:#fff;border:none;border-radius:3px;font-size:17px;font-weight:700;cursor:pointer;margin-top:8px;transition:all .2s;font-family:var(--font)}
body.page-visit .submit-btn:hover {background:var(--blue-light);transform:translateY(-1px);box-shadow:0 4px 16px rgba(244,112,40,0.3)}
body.page-visit .step-bar {display:flex;gap:0;margin-bottom:48px}
body.page-visit .step-item {flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
body.page-visit .step-item:not(:last-child)::after {content:'';position:absolute;top:18px;left:50%;width:100%;height:2px;background:var(--gray-200);z-index:0}
body.page-visit .step-num {width:36px;height:36px;border-radius:50%;background:var(--gray-200);color:var(--gray-600);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;position:relative;z-index:1;margin-bottom:8px}
body.page-visit .step-num.active {background:var(--blue);color:#fff}
body.page-visit .step-lbl {font-size:14px;font-weight:600;color:var(--gray-600);text-align:center}
body.page-visit .step-lbl.active {color:var(--blue)}
@media(max-width:860px) {
  body.page-visit .visit-layout {grid-template-columns:1fr}
  body.page-visit .form-row {grid-template-columns:1fr}
}

/* --- notice --- */
body.page-notice .notice-toolbar {display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:16px;flex-wrap:wrap}
body.page-notice .notice-filter {display:flex;gap:8px;flex-wrap:wrap}
body.page-notice .filter-btn {padding:6px 16px;border-radius:3px;border:1.5px solid var(--gray-200);background:#fff;font-size:15px;font-weight:600;color:var(--gray-600);cursor:pointer;transition:all .2s;font-family:var(--font)}
body.page-notice .filter-btn.active, body.page-notice .filter-btn:hover {background:var(--blue);border-color:var(--blue);color:#fff}
body.page-notice .notice-search {display:flex;gap:8px}
body.page-notice .notice-search input {padding:8px 14px;border:1.5px solid var(--gray-200);border-radius:3px;font-size:15px;font-family:var(--font);color:var(--gray-900);width:220px}
body.page-notice .notice-search input:focus {outline:none;border-color:var(--blue)}
body.page-notice .notice-search button {padding:8px 16px;background:var(--blue);color:#fff;border:none;border-radius:3px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font)}
body.page-notice .notice-table {width:100%;border-collapse:collapse}
body.page-notice .notice-table thead tr {border-bottom:2px solid var(--gray-900)}
body.page-notice .notice-table th {padding:12px 16px;font-size:14px;font-weight:700;color:var(--gray-700);text-transform:uppercase;letter-spacing:.5px;text-align:left}
body.page-notice .notice-table th:last-child, body.page-notice .notice-table td:last-child {text-align:right}
body.page-notice .notice-table tbody tr {border-bottom:1px solid var(--gray-200);cursor:pointer;transition:background .15s}
body.page-notice .notice-table tbody tr:hover {background:var(--gray-50)}
body.page-notice .notice-table td {padding:18px 16px;font-size:16px;vertical-align:middle}
body.page-notice .badge {display:inline-block;padding:3px 10px;border-radius:3px;font-size:13px;font-weight:700;letter-spacing:.3px}
body.page-notice .badge-general {background:var(--gray-100);color:var(--gray-600)}
body.page-notice .badge-important {background:#FEF2E9;color:#B45309}
body.page-notice .badge-recruit {background:#EDE9FE;color:#5B21B6}
body.page-notice .badge-update {background:#DCFCE7;color:#15803D}
body.page-notice .notice-title {font-weight:600;color:var(--gray-900);display:flex;align-items:center;gap:8px}
body.page-notice .notice-title .new {display:inline-block;background:var(--blue);color:#fff;font-size:12px;font-weight:800;padding:1px 6px;border-radius:4px}
body.page-notice .notice-date {font-size:15px;color:var(--gray-600);white-space:nowrap}
body.page-notice .notice-views {font-size:15px;color:var(--gray-600)}
body.page-notice .pinned-row {background:var(--blue-pale)!important}
body.page-notice .pinned-row:hover {background:#fde8d8!important}
body.page-notice .pin-icon {width:14px;height:14px;color:var(--blue);flex-shrink:0}
body.page-notice .pagination {display:flex;justify-content:center;align-items:center;gap:6px;margin-top:40px}
body.page-notice .page-btn {width:36px;height:36px;border-radius:3px;border:1.5px solid var(--gray-200);background:#fff;font-size:16px;font-weight:600;color:var(--gray-600);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:var(--font)}
body.page-notice .page-btn.active, body.page-notice .page-btn:hover {background:var(--blue);border-color:var(--blue);color:#fff}
body.page-notice .notice-count {font-size:15px;color:var(--gray-600)}
body.page-notice .notice-count strong {color:var(--blue)}
@media(max-width:700px) {
  body.page-notice .notice-toolbar {flex-direction:column;align-items:flex-start}
  body.page-notice .th-views, body.page-notice .td-views {display:none}
  body.page-notice .notice-search input {width:160px}
}

/* --- recruit --- */
body.page-recruit .container {max-width:var(--max-w);margin:0 auto;padding:0 24px}
body.page-recruit .nav {position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--gray-200);transition:box-shadow .3s}
body.page-recruit .nav.scrolled {box-shadow:0 2px 20px rgba(244,112,40,0.1)}
body.page-recruit .nav-inner {max-width:var(--max-w);margin:0 auto;padding:0 24px;display:flex;align-items:center;height:68px;gap:32px}
body.page-recruit .nav-logo {display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
body.page-recruit .nav-logo img {height:36px;width:auto}
body.page-recruit .nav-menu {display:flex;list-style:none;gap:48px;margin:0 0 0 44px;padding:0}
body.page-recruit .nav-item {position:relative}
body.page-recruit .nav-link {display:flex;align-items:center;gap:4px;padding:8px 14px;border-radius:3px;text-decoration:none;font-size:16px;font-weight:600;color:var(--gray-900);transition:all .2s;white-space:nowrap}
body.page-recruit .nav-link:hover, body.page-recruit .nav-link.active {color:var(--gray-900);background:transparent;box-shadow:inset 0 -2px 0 var(--blue)}
body.page-recruit .nav-link svg {width:12px;height:12px;transition:transform .2s}
body.page-recruit .nav-item:hover .nav-link svg {transform:rotate(180deg)}
body.page-recruit .nav-dropdown {display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:8px;min-width:160px;box-shadow:0 8px 32px rgba(244,112,40,0.12);z-index:100}
body.page-recruit .nav-item:hover .nav-dropdown {display:block}
body.page-recruit .nav-dropdown a {display:block;padding:8px 12px;font-size:15px;color:var(--gray-700);text-decoration:none;border-radius:3px;transition:all .2s;white-space:nowrap}
body.page-recruit .nav-dropdown a:hover {background:var(--blue-pale);color:var(--blue)}
body.page-recruit .nav-right {display:flex;align-items:center;gap:12px;margin-left:auto}
body.page-recruit .lang-toggle {display:flex;background:var(--gray-100);border-radius:3px;padding:3px}
body.page-recruit .lang-btn {border:none;background:none;padding:4px 12px;border-radius:3px;font-size:14px;font-weight:600;color:var(--gray-600);cursor:pointer;transition:all .2s}
body.page-recruit .lang-btn.active {background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(0,0,0,0.1)}
body.page-recruit .nav-cta {padding:8px 18px;background:var(--blue);color:#fff;border-radius:3px;text-decoration:none;font-size:15px;font-weight:700;transition:all .2s;white-space:nowrap}
body.page-recruit .nav-cta:hover {background:var(--blue-light);transform:translateY(-1px)}
body.page-recruit .hamburger {display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
body.page-recruit .hamburger span {display:block;width:22px;height:2px;background:var(--gray-700);border-radius:2px;transition:all .3s}
body.page-recruit .hamburger.open span:nth-child(1) {transform:translateY(7px) rotate(45deg)}
body.page-recruit .hamburger.open span:nth-child(2) {opacity:0}
body.page-recruit .hamburger.open span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)}
body.page-recruit .mobile-nav {display:none;position:fixed;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--gray-200);padding:16px 24px;z-index:999;box-shadow:0 8px 24px rgba(0,0,0,0.08)}
body.page-recruit .mobile-nav.open {display:block}
body.page-recruit .mobile-nav a {display:block;padding:12px 0;font-size:17px;font-weight:600;color:var(--gray-700);text-decoration:none;border-bottom:1px solid var(--gray-100)}
body.page-recruit .mobile-nav a:last-child {border-bottom:none}
body.page-recruit .page-hero {background:linear-gradient(135deg,var(--blue) 0%,#EA530D 60%,#FA9450 100%);color:#fff;padding:120px 0 64px;position:relative;overflow:hidden}
body.page-recruit .page-hero::before {content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
body.page-recruit .page-hero-inner {position:relative;z-index:1}
body.page-recruit .breadcrumb {display:flex;align-items:center;gap:8px;font-size:15px;opacity:.7;margin-bottom:16px}
body.page-recruit .breadcrumb a {color:#fff;text-decoration:none}
body.page-recruit .breadcrumb svg {width:12px;height:12px}
body.page-recruit .page-hero h1 {font-size:clamp(28px,5vw,48px);font-weight:800;letter-spacing:-1px;margin-bottom:16px}
body.page-recruit .page-hero p {font-size:18px;opacity:.85;max-width:1100px;line-height:1.7}
body.page-recruit .section-tabs {position:sticky;top:68px;z-index:50;background:#fff;border-bottom:1px solid var(--gray-200);padding:0 24px}
body.page-recruit .section-tabs-inner {max-width:var(--max-w);margin:0 auto;display:flex;gap:0;overflow-x:auto}
body.page-recruit .section-tab {display:flex;align-items:center;gap:8px;padding:16px 20px;font-size:15px;font-weight:600;color:var(--gray-600);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s}
body.page-recruit .section-tab:hover {color:var(--blue)}
body.page-recruit .section-tab.active {color:var(--blue);border-bottom-color:var(--blue)}
body.page-recruit .section-tab svg {width:16px;height:16px}
body.page-recruit .section {padding:80px 0}
body.page-recruit .section-alt {background:var(--gray-50)}
body.page-recruit .sec-header {text-align:center;margin-bottom:56px}
body.page-recruit .sec-label {display:inline-block;background:transparent;color:var(--blue);font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 0;margin-bottom:12px}
body.page-recruit .sec-title {font-size:clamp(22px,4vw,36px);font-weight:800;color:var(--gray-900);letter-spacing:-0.5px;margin-bottom:16px}
body.page-recruit .sec-desc {font-size:18px;color:var(--gray-600);line-height:1.7;max-width:1000px;margin:0 auto}
body.page-recruit .talent-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
body.page-recruit .talent-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:40px 32px;text-align:center;transition:all .3s;position:relative;overflow:hidden}
body.page-recruit .talent-card::before {content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--accent))}
body.page-recruit .talent-card:hover {transform:translateY(-4px);box-shadow:0 12px 40px rgba(244,112,40,0.12);border-color:var(--blue-pale)}
body.page-recruit .talent-icon {width:72px;height:72px;background:var(--blue-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:var(--blue)}
body.page-recruit .talent-icon svg {width:32px;height:32px}
body.page-recruit .talent-card h3 {font-size:1.2rem;font-weight:800;color:var(--gray-900);margin-bottom:12px}
body.page-recruit .talent-card p {font-size:.9rem;color:var(--gray-600);line-height:1.75}
body.page-recruit .talent-values {display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
body.page-recruit .talent-tag {background:var(--blue-pale);color:var(--blue);font-size:14px;font-weight:600;padding:4px 12px;border-radius:3px}
body.page-recruit .jobs-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
body.page-recruit .job-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:32px;transition:all .3s}
body.page-recruit .job-card:hover {box-shadow:0 8px 32px rgba(244,112,40,0.1);border-color:var(--accent)}
body.page-recruit .job-card-top {display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
body.page-recruit .job-icon {width:52px;height:52px;border-radius:3px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blue)}
body.page-recruit .job-icon svg {width:24px;height:24px}
body.page-recruit .job-card h3 {font-size:1.05rem;font-weight:800;color:var(--gray-900);margin-bottom:4px}
body.page-recruit .job-dept {font-size:14px;color:var(--blue);font-weight:600;background:var(--blue-pale);padding:2px 10px;border-radius:3px;display:inline-block}
body.page-recruit .job-card p {font-size:.875rem;color:var(--gray-600);line-height:1.75;margin-bottom:16px}
body.page-recruit .job-tasks {list-style:none;display:flex;flex-direction:column;gap:6px}
body.page-recruit .job-tasks li {font-size:.84rem;color:var(--gray-700);display:flex;align-items:flex-start;gap:8px}
body.page-recruit .job-tasks li::before {content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-top:6px;flex-shrink:0}
body.page-recruit .benefits-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
body.page-recruit .benefit-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:28px 20px;text-align:center;transition:all .3s}
body.page-recruit .benefit-card:hover {transform:translateY(-4px);box-shadow:0 8px 32px rgba(244,112,40,0.1);border-color:var(--accent)}
body.page-recruit .benefit-num {font-size:28px;font-weight:800;color:var(--gray-200);margin-bottom:12px}
body.page-recruit .benefit-icon {width:56px;height:56px;background:var(--blue-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--blue)}
body.page-recruit .benefit-icon svg {width:26px;height:26px}
body.page-recruit .benefit-card h4 {font-size:.95rem;font-weight:800;color:var(--gray-900);margin-bottom:8px}
body.page-recruit .benefit-card p {font-size:.82rem;color:var(--gray-600);line-height:1.6}
body.page-recruit .hiring-steps {display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-bottom:64px}
body.page-recruit .hiring-steps::before {content:'';position:absolute;top:48px;left:calc(12.5%);right:calc(12.5%);height:2px;background:linear-gradient(90deg,var(--blue),var(--accent));z-index:0}
body.page-recruit .step-item {text-align:center;position:relative;z-index:1}
body.page-recruit .step-num {width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--accent));color:#fff;font-size:1.6rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 4px 20px rgba(244,112,40,0.3)}
body.page-recruit .step-label {font-size:.75rem;font-weight:700;color:var(--blue);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
body.page-recruit .step-title {font-size:1rem;font-weight:800;color:var(--gray-900);margin-bottom:8px}
body.page-recruit .step-desc {font-size:.82rem;color:var(--gray-600);line-height:1.6;padding:0 8px}
body.page-recruit .hiring-info-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
body.page-recruit .info-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:28px}
body.page-recruit .info-card h4 {font-size:1rem;font-weight:800;color:var(--gray-900);margin-bottom:12px;display:flex;align-items:center;gap:8px}
body.page-recruit .info-card h4 svg {width:18px;height:18px;color:var(--blue)}
body.page-recruit .info-card ul {list-style:none;display:flex;flex-direction:column;gap:8px}
body.page-recruit .info-card ul li {font-size:.875rem;color:var(--gray-600);line-height:1.6;padding-left:14px;position:relative}
body.page-recruit .info-card ul li::before {content:'–';position:absolute;left:0;color:var(--blue);font-weight:700}
body.page-recruit .contact-box {background:linear-gradient(135deg,var(--blue),#EA530D);border-radius:3px;padding:40px;color:#fff;text-align:center}
body.page-recruit .contact-box h3 {font-size:1.5rem;font-weight:800;margin-bottom:12px}
body.page-recruit .contact-box p {font-size:.95rem;opacity:.85;margin-bottom:24px;color:#fff}
body.page-recruit .contact-box a {display:inline-block;background:#fff;color:var(--blue);font-weight:800;font-size:16px;padding:12px 32px;border-radius:3px;text-decoration:none;transition:all .2s}
body.page-recruit .contact-box a:hover {transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
body.page-recruit .footer {background:var(--gray-900);color:#fff;padding:60px 0 0}
body.page-recruit .footer-grid {display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.08)}
body.page-recruit .footer-brand p {font-size:15px;color:rgba(255,255,255,0.85);line-height:1.8;margin-bottom:20px;word-break:keep-all}
body.page-recruit .footer-contact-row {display:flex;align-items:flex-start;gap:8px;font-size:15px;color:rgba(255,255,255,0.6);margin-bottom:8px;word-break:keep-all}
body.page-recruit .footer-contact-row svg {width:14px;height:14px;flex-shrink:0;margin-top:2px;opacity:.7}
body.page-recruit .footer-col h5 {font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.9);margin-bottom:16px}
body.page-recruit .footer-col a {display:block;font-size:15px;color:rgba(255,255,255,0.55);text-decoration:none;margin-bottom:8px;transition:color .2s}
body.page-recruit .footer-col a:hover {color:#fff}
body.page-recruit .footer-bottom {padding:20px 0;font-size:14px;color:rgba(255,255,255,0.35);text-align:center}
body.page-recruit .reveal.visible {opacity:1;transform:none}
@media(max-width:1024px) {
  body.page-recruit .nav-menu, body.page-recruit .nav-cta {display:none}
  body.page-recruit .hamburger {display:flex}
  body.page-recruit .footer-grid {grid-template-columns:1fr 1fr}
  body.page-recruit .talent-grid {grid-template-columns:1fr 1fr}
  body.page-recruit .benefits-grid {grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px) {
  body.page-recruit .talent-grid, body.page-recruit .jobs-grid {grid-template-columns:1fr}
  body.page-recruit .hiring-steps {grid-template-columns:repeat(2,1fr)}
  body.page-recruit .hiring-steps::before {display:none}
  body.page-recruit .hiring-info-grid {grid-template-columns:1fr}
  body.page-recruit .section {padding:60px 0}
}
@media(max-width:480px) {
  body.page-recruit .benefits-grid {grid-template-columns:repeat(2,1fr)}
  body.page-recruit .hiring-steps {grid-template-columns:1fr}
}

/* --- technology --- */
body.page-technology .active-link { color: var(--blue-main) !important; }
body.page-technology .section-tabs {
  background: var(--white);
  border-bottom: 2px solid var(--gray-200);
  position: sticky;
  top: 72px;
  z-index: 90;
}
body.page-technology .section-tabs-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  gap: 0;
}
body.page-technology .section-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 26px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-500);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
  white-space: nowrap;
}
body.page-technology .section-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
body.page-technology .section-tab:hover { color: var(--blue-main); }
body.page-technology .section-tab.active { color: var(--blue-main); border-bottom-color: var(--blue-main); }
body.page-technology .process-flow-wrap {
  background: var(--blue-pale);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  margin-top: 56px;
  overflow-x: auto;
}
body.page-technology .process-flow-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue-main);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.page-technology .process-flow-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--blue-main);
  border-radius: 2px;
}
body.page-technology .process-flow {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: max-content;
}
body.page-technology .process-step {
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius:3px;
  padding: 14px 18px;
  text-align: center;
  min-width: 110px;
  transition: var(--transition);
}
body.page-technology .process-step:hover {
  border-color: var(--blue-main);
  background: var(--blue-light);
}
body.page-technology .process-step-num {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--blue-bright);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
body.page-technology .process-step-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue-deep);
  line-height: 1.35;
}
body.page-technology .process-step-sub {
  font-size: 0.7rem;
  color: var(--gray-400);
  margin-top: 3px;
}
body.page-technology .process-arrow {
  color: var(--blue-main);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0 10px;
  flex-shrink: 0;
  opacity: 0.6;
}
body.page-technology .cert-table-wrap { overflow-x: auto; margin-top: 40px; }
body.page-technology .cert-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
body.page-technology .cert-table thead tr {
  background: var(--blue-deep);
  color: var(--white);
}
body.page-technology .cert-table thead th {
  padding: 13px 18px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.page-technology .cert-table tbody tr {
  border-bottom: 1px solid var(--gray-200);
  transition: var(--transition);
}
body.page-technology .cert-table tbody tr:hover { background: var(--blue-pale); }
body.page-technology .cert-table tbody td {
  padding: 14px 18px;
  color: var(--gray-700);
  vertical-align: middle;
}
body.page-technology .cert-table tbody td:first-child { font-weight: 600; color: var(--blue-deep); }
body.page-technology .cert-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #E8F5E9;
  color: #1B5E20;
  border-radius:3px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
}
body.page-technology .cert-status-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #43A047;
  flex-shrink: 0;
}
body.page-technology .quality-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
body.page-technology .quality-card {background:#fff;border:1px solid var(--gray-200);border-radius:3px;padding:32px;transition:all .28s}
body.page-technology .quality-card:hover {border-color:var(--blue);box-shadow:0 6px 24px rgba(244,112,40,0.12)}
body.page-technology .quality-icon {width:52px;height:52px;background:var(--blue-pale);border-radius:3px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--blue)}
body.page-technology .quality-icon svg {width:26px;height:26px}
body.page-technology .quality-card h3 {font-size:1rem;font-weight:700;margin-bottom:10px;color:var(--gray-900)}
body.page-technology .quality-card p {font-size:.875rem;line-height:1.75;color:var(--gray-700)}
body.page-technology .policy-callout {background:var(--gray-900);border-radius:3px;padding:36px 42px;position:relative;overflow:hidden;margin-bottom:48px}
body.page-technology .policy-callout::after {content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(244,112,40,0.12);pointer-events:none}
body.page-technology .policy-callout-label {font-size:.72rem;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
body.page-technology .policy-callout p {font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.88);line-height:1.8;max-width:1000px;font-style:italic;margin:0}
body.page-technology .policy-callout-cite {display:flex;align-items:center;gap:10px;margin-top:20px}
body.page-technology .policy-callout-cite-line {width:24px;height:2px;background:var(--accent);border-radius:2px}
body.page-technology .policy-callout-cite span {font-size:.78rem;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.04em}
body.page-technology .env-list {display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
body.page-technology .env-item {display:flex;align-items:flex-start;gap:16px;padding:22px 24px;background:#fff;border:1px solid var(--gray-200);border-radius:3px;transition:all .28s}
body.page-technology .env-item:hover {border-color:var(--blue);box-shadow:0 2px 8px rgba(28,10,0,.08)}
body.page-technology .env-item-icon {width:46px;height:46px;flex-shrink:0;background:var(--blue-pale);border-radius:3px;display:flex;align-items:center;justify-content:center;color:var(--blue)}
body.page-technology .env-item-icon svg {width:22px;height:22px}
body.page-technology .env-item h4 {font-size:.95rem;font-weight:700;color:var(--gray-900);margin-bottom:5px}
body.page-technology .env-item p {font-size:.84rem;line-height:1.7;color:var(--gray-700)}
body.page-technology .envsafety-sub {font-size:1.2rem;font-weight:800;color:var(--gray-900);margin:48px 0 24px;padding-bottom:10px;border-bottom:2px solid var(--blue-pale)}
@media(max-width:768px) {
  body.page-technology .quality-grid, body.page-technology .env-list {grid-template-columns:1fr}
}
body.page-technology .rnd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
body.page-technology .rnd-photo-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
body.page-technology .rnd-photo-wrap img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
body.page-technology .rnd-photo-wrap .photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(11,42,74,0.8));
  padding: 32px 24px 20px;
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  font-weight:600;
}
body.page-technology .rnd-focus-list { list-style: none; padding: 0; margin: 0 0 32px; }
body.page-technology .rnd-focus-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--gray-200);
}
body.page-technology .rnd-focus-item:last-child { border-bottom: none; }
body.page-technology .rnd-focus-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: var(--blue-light);
  border-radius:3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-main);
}
body.page-technology .rnd-focus-icon svg { width: 20px; height: 20px; }
body.page-technology .rnd-focus-text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue-deep);
  margin-bottom: 3px;
}
body.page-technology .rnd-focus-text span { font-size: 0.82rem; color: var(--gray-500); line-height: 1.6; }
body.page-technology .rnd-patent-box {
  background: var(--blue-pale);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
}
body.page-technology .rnd-patent-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
body.page-technology .rnd-patent-box-header svg { color: var(--blue-main); }
body.page-technology .rnd-patent-box-header strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-deep);
}
body.page-technology .rnd-patent-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}
body.page-technology .rnd-patent-stat-num {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--blue-main);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
body.page-technology .rnd-patent-stat-lbl {
  font-size: 0.72rem;
  color: var(--gray-500);
  margin-top: 5px;
  line-height: 1.4;
}
body.page-technology .cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
body.page-technology .cert-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  transition: var(--transition);
}
body.page-technology .cert-item:hover { border-color: var(--blue-main); box-shadow: var(--shadow-md); transform: translateY(-3px); }
body.page-technology .cert-item-badge {
  width: 56px; height: 56px;
  border-radius:3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: center;
}
body.page-technology .cert-item h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue-deep);
  margin-bottom: 6px;
}
body.page-technology .cert-item p { font-size: 0.78rem; line-height: 1.5; }
@media (max-width: 1024px) {
  body.page-technology .rnd-grid { grid-template-columns: 1fr; gap: 40px; }
  body.page-technology .cert-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  body.page-technology .cert-grid { grid-template-columns: 1fr 1fr; }
  body.page-technology .section-tabs-inner { padding: 0 16px; gap: 0; overflow-x: auto; }
  body.page-technology .section-tab { padding: 14px 16px; font-size: 0.8rem; }
  body.page-technology .process-flow-wrap { padding: 24px 16px; }
}

/* --- products --- */
body.page-products .active-link { color: var(--blue-main) !important; }
body.page-products .page-hero {
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #222222 0%, #C4400A 60%, #FA7D21 100%);
  overflow: hidden;
}
body.page-products .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('images/slider-pages/top_rd.jpg') center/cover no-repeat;
  opacity: 0.18;
}
body.page-products .page-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 40px;
}
body.page-products .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size:15px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 14px;
}
body.page-products .breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color .2s; }
body.page-products .breadcrumb a:hover { color: #fff; }
body.page-products .breadcrumb svg { width: 12px; height: 12px; }
body.page-products .page-hero h1 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 10px;
}
body.page-products .page-hero p {
  font-size:18px;
  color: rgba(255,255,255,0.75);
  margin: 0;
}
body.page-products .product-tabs {
  background: #fff;
  border-bottom: 2px solid #F5F5F7;
  position: sticky;
  top: 70px;
  z-index: 90;
}
body.page-products .product-tabs-inner {
  max-width:var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 0;
}
body.page-products .product-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 28px;
  font-size:17px;
  font-weight: 600;
  color: #666;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all .2s;
}
body.page-products .product-tab:hover { color: var(--blue-main); }
body.page-products .product-tab.active { color: var(--blue-main); border-bottom-color: var(--blue-main); }
body.page-products .product-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
body.page-products .gas-section {
  padding: 100px 0;
  border-bottom: 1px solid #edf0f7;
}
body.page-products .gas-section:nth-child(even) { background: #f7f9fd; }
body.page-products .container { max-width:var(--max-w); margin: 0 auto; padding: 0 40px; }
body.page-products .gas-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 56px;
}
body.page-products .gas-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-main, #FA7D21);
  color: #fff;
  padding: 6px 16px;
  border-radius:3px;
  font-size:14px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 4px;
}
body.page-products .gas-title-block h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: #222222;
  margin: 0 0 6px;
  line-height: 1.15;
}
body.page-products .gas-title-block .gas-sub {
  font-size:17px;
  color: #5a6a84;
  font-weight:600;
}
body.page-products .gas-cas {
  font-size:14px;
  color: #888888;
  font-family: var(--font);
  margin-top: 4px;
}
body.page-products .gas-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) {
  body.page-products .gas-layout { grid-template-columns: 1fr; gap: 36px; }
  body.page-products .product-tabs-inner { padding: 0 16px; }
  body.page-products .product-tab { padding: 14px 16px; font-size:15px; }
  body.page-products .container { padding: 0 20px; }
  body.page-products .gas-section { padding: 60px 0; }
}
body.page-products .gas-image-wrap {
  position: relative;
  border-radius:3px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8edf8, #d0daf0);
  aspect-ratio: 4/3;
  box-shadow: 0 12px 40px rgba(244,112,40,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-products .gas-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 24px;
}
body.page-products .gas-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #888888;
}
body.page-products .gas-image-placeholder svg { width: 64px; height: 64px; opacity: .45; }
body.page-products .gas-image-placeholder span { font-size:16px; }
body.page-products .spec-table-wrap { margin-bottom: 32px; }
body.page-products .spec-table-wrap h3 {
  font-size:16px;
  font-weight: 700;
  color: #222222;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.page-products .spec-table-wrap h3 svg { width: 16px; height: 16px; color: var(--blue-main, #FA7D21); }
body.page-products .spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size:16px;
  border-radius:3px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
body.page-products .spec-table thead th {
  background: var(--blue-main, #FA7D21);
  color: #fff;
  padding: 11px 16px;
  text-align: left;
  font-weight: 600;
  font-size:14px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
body.page-products .spec-table tbody tr:nth-child(even) td { background: #f4f7fc; }
body.page-products .spec-table tbody tr:nth-child(odd) td { background: #fff; }
body.page-products .spec-table tbody tr:hover td { background: #eaf0fb; }
body.page-products .spec-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #F5F5F7;
  vertical-align: middle;
  color: #2d3a4f;
}
body.page-products .spec-table td:first-child { font-weight: 600; color: #FA7D21; white-space: nowrap; }
body.page-products .spec-value { font-family: var(--font); font-size:15px; }
body.page-products .spec-highlight { color: #0a8a3c; font-weight: 700; }
body.page-products .app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
body.page-products .app-card {
  background: #fff;
  border: 1px solid #d8e4f5;
  border-radius:3px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: box-shadow .2s, border-color .2s;
}
body.page-products .app-card:hover { box-shadow: 0 4px 16px rgba(244,112,40,.1); border-color: var(--blue-main, #FA7D21); }
body.page-products .app-card svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--blue-main, #FA7D21); margin-top: 1px; }
body.page-products .app-card-text strong { display: block; font-size:15px; font-weight: 700; color: #222222; margin-bottom: 2px; }
body.page-products .app-card-text span { font-size:14px; color: #666666; line-height: 1.4; }
body.page-products .packaging-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
body.page-products .pkg-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F8F8FA;
  border-radius:3px;
  padding: 8px 14px;
  font-size:15px;
  color: #444444;
  font-weight:600;
}
body.page-products .pkg-tag svg { width: 15px; height: 15px; color: #FA7D21; }
body.page-products .cta-section {
  background: linear-gradient(135deg, #222222 0%, #FA7D21 100%);
  padding: 80px 40px;
  text-align: center;
}
body.page-products .cta-section h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
}
body.page-products .cta-section p {
  font-size:18px;
  color: rgba(255,255,255,.75);
  margin: 0 0 32px;
}
body.page-products .btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #FA7D21;
  font-size:17px;
  font-weight: 700;
  padding: 16px 36px;
  border-radius:3px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
body.page-products .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
body.page-products .btn-cta svg { width: 18px; height: 18px; }

/* --- quality --- */
body.page-quality .active-link { color: var(--blue-main) !important; }
body.page-quality .section-tabs {
  background: var(--white);
  border-bottom: 2px solid var(--gray-200);
  position: sticky;
  top: 72px;
  z-index: 90;
}
body.page-quality .section-tabs-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  gap: 0;
  overflow-x: auto;
}
body.page-quality .section-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 26px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-500);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
  white-space: nowrap;
}
body.page-quality .section-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
body.page-quality .section-tab:hover { color: var(--blue-main); }
body.page-quality .section-tab.active { color: var(--blue-main); border-bottom-color: var(--blue-main); }
body.page-quality .policy-callout {
  background: var(--blue-deep);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  margin-bottom: 48px;
  position: relative;
  overflow: hidden;
}
body.page-quality .policy-callout::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(30,111,191,0.15);
  pointer-events: none;
}
body.page-quality .policy-callout-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
body.page-quality .policy-callout p {
  font-size: 1.05rem;
  font-weight:600;
  color: rgba(255,255,255,0.88);
  line-height: 1.8;
  max-width: 1000px;
  font-style: italic;
  margin: 0;
}
body.page-quality .policy-callout-cite {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
body.page-quality .policy-callout-cite-line { width: 24px; height: 2px; background: var(--blue-bright); border-radius: 2px; }
body.page-quality .policy-callout-cite span { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; }
body.page-quality .quality-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
body.page-quality .env-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
body.page-quality .env-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
body.page-quality .env-item:hover { border-color: var(--blue-main); box-shadow: var(--shadow-sm); }
body.page-quality .env-item-icon {
  width: 46px; height: 46px;
  flex-shrink: 0;
  background: var(--blue-light);
  border-radius:3px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-main);
}
body.page-quality .env-item-icon svg { width: 22px; height: 22px; }
body.page-quality .env-item h4 { font-size: 0.95rem; font-weight: 700; color: var(--blue-deep); margin-bottom: 5px; }
body.page-quality .env-item p { font-size: 0.84rem; line-height: 1.7; }
body.page-quality .cert-table-wrap { overflow-x: auto; }
body.page-quality .cert-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
body.page-quality .cert-table thead tr { background: var(--blue-deep); color: var(--white); }
body.page-quality .cert-table thead th {
  padding: 13px 18px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.page-quality .cert-table tbody tr { border-bottom: 1px solid var(--gray-200); transition: var(--transition); }
body.page-quality .cert-table tbody tr:hover { background: var(--blue-pale); }
body.page-quality .cert-table tbody td { padding: 14px 18px; color: var(--gray-700); vertical-align: middle; }
body.page-quality .cert-table tbody td:first-child { font-weight: 600; color: var(--blue-deep); }
body.page-quality .cert-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #E8F5E9; color: #1B5E20;
  border-radius:3px; padding: 3px 10px;
  font-size: 0.72rem; font-weight: 700;
}
body.page-quality .cert-status-badge::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: #43A047; flex-shrink: 0;
}
@media (max-width: 768px) {
  body.page-quality .quality-grid, body.page-quality .env-list { grid-template-columns: 1fr; }
  body.page-quality .section-tabs-inner { padding: 0 16px; }
  body.page-quality .section-tab { padding: 14px 16px; font-size: 0.8rem; }
  body.page-quality .policy-callout { padding: 24px 22px; }
  body.page-quality .policy-callout p { font-size: 0.95rem; }
}

/* --- index --- */
body.page-index .active-link { color: var(--brand-main) !important; }
body.page-index .nav-link svg { opacity: 0.5; }

/* ══════════════ POPUP (관리자 등록 팝업) ══════════════ */
#ypm-popup-root { position: fixed; inset: 0; pointer-events: none; z-index: 9000; }
/* 크기는 내용에 맞춰 자동으로 잡는다 (2026-08-07)
   예전에는 관리자에서 너비를 픽셀로 직접 넣었는데 번거로워 없앴다.
   width:max-content 는 '내용이 원하는 폭'이다 — 이미지 팝업은 이미지 원래
   폭을, 글만 있는 팝업은 줄이 접히지 않는 폭을 쓴다. 여기에 최소·최대만
   씌우면 작은 이미지는 너무 작지 않게, 큰 이미지는 화면을 안 넘게 정리된다.
   (.ypm-popup__img 의 width:100% 는 폭을 계산할 때는 무시되고, 계산이 끝난
    뒤 그 폭을 채우는 데만 쓰인다. 그래서 둘이 서로 물리지 않는다) */
.ypm-popup {
  position: fixed; pointer-events: auto; background: #fff; border-radius:3px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28); overflow: hidden;
  display: flex; flex-direction: column; animation: ypmPopIn .25s ease;
  width: max-content;
  min-width: 300px;
  max-width: min(560px, 92vw);
}
/* 예전 애니메이션은 from 에 transform 을 넣어 가운데 정렬을 덮어썼다.
   그래서 팝업이 화면 한가운데가 아니라 왼쪽 위에서 미끄러져 들어왔다.
   투명도만 바꾸면 위치는 건드리지 않는다. */
@keyframes ypmPopIn { from { opacity: 0; } to { opacity: 1; } }
.ypm-popup__img { display: block; width: 100%; height: auto; }
.ypm-popup__text { padding: 18px 20px; font-size:16px; line-height: 1.7; color: #222; }
.ypm-popup__text strong { display: block; font-size:18px; color: #111; margin-bottom: 10px; }
.ypm-popup__more { margin-top: 12px; }
.ypm-popup__more a { color: var(--brand-main, #FA7D21); font-weight: 600; text-decoration: none; }
.ypm-popup__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; background: #f4f5f6; border-top: 1px solid #e5e7eb; font-size:15px; color: #555;
}
.ypm-popup__bar label { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.ypm-popup__close { cursor: pointer; font-weight: 600; color: #333; }
.ypm-popup__close:hover { color: #000; }
@media (max-width: 520px) {
  .ypm-popup {
    left: 50% !important; top: auto !important; bottom: 0 !important;
    transform: translateX(-50%) !important; width: 100% !important; max-width: 100% !important;
    border-radius:3px 12px 0 0;
  }
}


/* ============================================================
   장식용 아이콘 정리 (2026-08-06 수정)
   방침: "네모 박스(카드) 안"에 들어가는 아이콘은 그대로 두고,
        본문·푸터·태그처럼 박스 밖에 흩어져 화면을 번잡하게 만드는 것만 감춘다.
   되돌리려면 이 블록만 지우면 된다.
   ============================================================ */

/* 1) 푸터 주소·전화 아이콘 — 전 페이지에서 33번 반복되던 가장 큰 군더더기 */
.footer-contact-row svg{display:none !important}

/* 2) 알약·태그 안의 미니 아이콘 (글자만으로 충분히 읽힘) */
.about-pill svg,
.pkg-tag svg,
.gas-badge svg{display:none !important}
/* ============================================================
   섹션 큰 제목·설명문 제거 (2026-08-06 요청)
   recruit.html 의 .sec-title(h2) 와 .sec-desc(설명 문단).
   라벨(인재상/직무소개/복리제도/채용정보)과 카드만 남긴다. 4개 섹션에 적용.
   되살리려면 이 두 줄만 지우면 된다.
   ============================================================ */
body.page-recruit .sec-title,
body.page-recruit .sec-desc,
.section-title,
.section-sub,
.section-desc{display:none !important}
/* ============================================================
   SK스페셜티 방식 서브페이지 UI (2026-08-06)
     1) 서브 상단 위치 드롭다운 바   2) 박스형 탭
     3) 표·페이징                    4) 메가메뉴(전체 펼침)
   위치 바 생성과 메가메뉴 열림/닫힘은 js/main.js 가 담당한다.
   SK의 강조색은 레드(#D81F2F)지만 레드는 제외 요청이라 오렌지(--brand-main)로 대체했다.
   ============================================================ */

/* ---------- 1) 서브 상단 위치 드롭다운 바 ---------- */
.page-hero{position:relative}
/* body.classic/.modern .page-hero 의 padding 지정을 이기려면 같은 등급(0,0,2,1)이 필요하다 */
body .page-hero.has-locbar{padding-bottom:114px}
.page-hero .breadcrumb{display:none !important}
/* z-index 는 아래 고정 탭 바(.section-tabs, z-index:60)보다 높아야 한다.
   낮으면 펼친 하위 메뉴가 탭 바에 가려서 안 보인다. */
.loc-bar{position:absolute;left:0;right:0;bottom:0;height:50px;background:rgba(0,0,0,.5);z-index:70}
.loc-inner{max-width:var(--max-w);margin:0 auto;padding:0 32px;display:flex;height:100%}
.loc-item{position:relative;display:flex;align-items:center;height:100%;border-left:1px solid rgba(225,225,225,.2);color:#fff;font-size:15px;font-weight:600}
.loc-inner > .loc-item:last-child{border-right:1px solid rgba(225,225,225,.2)}
.loc-home{width:64px;justify-content:center;text-decoration:none;color:#fff}
.loc-sel{width:230px}
.loc-cur{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:100%;padding:0 20px 0 24px;color:#fff;text-decoration:none;background:none;border:none;font:inherit;cursor:pointer}
.loc-cur::after{content:'';width:7px;height:7px;border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(45deg) translateY(-2px);transition:transform .2s;flex-shrink:0}
.loc-sel.open .loc-cur::after{transform:rotate(-135deg) translateY(2px)}
.loc-list{display:none;position:absolute;top:100%;left:-1px;right:0;min-width:230px;background:#fff;border:1px solid var(--gray-200);border-top:none;z-index:20;box-shadow:0 10px 24px rgba(0,0,0,.14);max-height:60vh;overflow-y:auto}
.loc-sel.open .loc-list{display:block}
.loc-list a{display:block;padding:11px 24px;font-size:15px;color:var(--gray-700);text-decoration:none;white-space:nowrap}
.loc-list a:hover{background:var(--gray-50);color:var(--brand-main)}
.loc-list a.on{color:var(--brand-main)}
@media(max-width:768px){
  body .page-hero.has-locbar{padding-bottom:64px}
  .loc-bar{height:46px}
  .loc-inner{padding:0 16px}
  .loc-home{display:none}
  .loc-sel{flex:1;width:auto}
  .loc-cur{padding:0 12px;font-size:14px}
}

/* ---------- 2) 박스형 탭 ---------- */
body.page-recruit .section-tabs-inner,
body.page-technology .section-tabs-inner,
body.page-quality .section-tabs-inner,
body.page-products .product-tabs-inner{display:flex;gap:0;overflow-x:auto}
body.page-recruit .section-tab,
body.page-technology .section-tab,
body.page-quality .section-tab,
body.page-products .product-tab,
body.page-management .tab-btn{
  flex:1 0 auto;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:62px;padding:0 16px;font-size:18px;font-weight:700;
  color:#999;background:#fff;border:none;border-bottom:1px solid #D9D9D9;border-right:1px solid #EDEDF0;
  text-decoration:none;white-space:nowrap;transition:background .18s,color .18s;margin-bottom:0}
body.page-recruit .section-tab:last-child,
body.page-technology .section-tab:last-child,
body.page-quality .section-tab:last-child,
body.page-products .product-tab:last-child,
body.page-management .tab-btn:last-child{border-right:none}
body.page-recruit .section-tab.active, body.page-recruit .section-tab:hover,
body.page-technology .section-tab.active, body.page-technology .section-tab:hover,
body.page-quality .section-tab.active, body.page-quality .section-tab:hover,
body.page-products .product-tab.active, body.page-products .product-tab:hover,
body.page-management .tab-btn.active, body.page-management .tab-btn:hover{
  /* 페이지별로 먼저 선언된 .section-tab.active 규칙들이 끈질기게 남아 활성 탭 색이
     적용되지 않았다. 탭 종류가 페이지마다 제각각이라 확정 적용으로 못박는다. */
  background:var(--brand-main) !important;color:#fff !important;border-bottom-color:var(--brand-main) !important}

/* ---------- 3) 표 · 페이징 ---------- */
body.page-notice .notice-table,
body.page-technology .cert-table,
body.page-quality .cert-table,
body.page-products .spec-table{width:100%;border-collapse:collapse;border-top:2px solid var(--gray-900)}
body.page-notice .notice-table thead tr,
body.page-technology .cert-table thead tr,
body.page-quality .cert-table thead tr,
body.page-products .spec-table thead tr{background:#F5F5F7;border-bottom:1px solid #E6E6E6}
body.page-notice .notice-table th,
body.page-technology .cert-table thead th,
body.page-quality .cert-table thead th,
body.page-products .spec-table thead th{
  padding:14px 12px;font-size:15px;font-weight:700;color:var(--gray-900);
  text-align:center;text-transform:none;letter-spacing:0;background:#F5F5F7;border:none}
body.page-notice .notice-table td,
body.page-technology .cert-table tbody td,
body.page-quality .cert-table tbody td,
body.page-products .spec-table tbody td{
  padding:14px 12px;font-size:15px;color:#444;text-align:center;border:none;vertical-align:middle}
body.page-notice .notice-table tbody tr,
body.page-technology .cert-table tbody tr,
body.page-quality .cert-table tbody tr,
body.page-products .spec-table tbody tr{border-bottom:1px solid #E6E6E6}
body.page-notice .notice-table tbody tr:hover,
body.page-technology .cert-table tbody tr:hover,
body.page-quality .cert-table tbody tr:hover,
body.page-products .spec-table tbody tr:hover{background:#FAFAFB}
/* 제목 칸만 왼쪽 정렬 */
body.page-notice .notice-table td:last-child,
body.page-notice .notice-table th:last-child{text-align:center}
body.page-notice .notice-table .notice-title{text-align:left}
body.page-products .spec-table td:first-child{text-align:left}

body.page-notice .pagination{display:flex;justify-content:center;align-items:center;gap:0;margin-top:36px}
body.page-notice .page-btn{width:40px;height:40px;border-radius:0;border:1px solid #E6E6E6;
  margin-left:-1px;background:#fff;color:#444;font-size:15px;font-weight:600}
body.page-notice .page-btn.active, body.page-notice .page-btn:hover{
  background:var(--brand-main);border-color:var(--brand-main);color:#fff;position:relative;z-index:1}

/* ---------- 4) 메가메뉴 (메인 메뉴에 올리면 전체가 한 번에 펼쳐짐) ---------- */
.nav{position:relative}
.nav .mega-bg{position:absolute;left:0;right:0;top:100%;height:0;background:#fff;
  border-top:1px solid var(--gray-200);box-shadow:0 12px 28px rgba(0,0,0,.08);
  opacity:0;transition:opacity .18s;pointer-events:none;z-index:1}
.nav.mega-open .mega-bg{height:var(--mega-h,280px);opacity:1}
/* 메뉴 하나만이 아니라 전부 표시 */
body.modern .nav-menu.mega .nav-dropdown{opacity:1;pointer-events:all;transform:translateY(0)}
body.classic .nav-menu.mega .nav-dropdown,
body.page-recruit .nav-menu.mega .nav-dropdown{display:block}
/* 펼쳐진 상태에서는 각 칸의 테두리·그림자를 없애 한 판처럼 보이게 */
.nav-menu.mega .nav-dropdown{background:transparent;border:none;box-shadow:none;
  top:100%;padding:22px 0 26px;min-width:0;width:max-content;max-width:260px}
.nav-menu.mega .nav-dropdown a{padding:6px 14px;color:var(--gray-600);background:none}
.nav-menu.mega .nav-dropdown a:hover{background:none;color:var(--brand-main)}
.nav-menu.mega .nav-item > .nav-link{position:relative;z-index:2}
@media(max-width:1024px){ .nav .mega-bg{display:none} }
/* ---------- 서브페이지 히어로 배경 사진 ----------
   Unsplash 무료 이미지를 내려받아 /images/hero/ 에 저장했다(외부 CDN 링크 없음).
   사진 위에 어두운 막을 덮어 흰 제목과 위치 바가 항상 읽히게 한다. */
body[class] .page-hero{
  background-color:#2B2C2F;background-repeat:no-repeat;background-size:cover;background-position:center center;
  position:relative}
body[class] .page-hero::before{
  content:'';position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:0;background-image:none}
body[class] .page-hero::after{display:none}
body[class] .page-hero > .container,
body[class] .page-hero .page-hero-inner{position:relative;z-index:1}

body.page-company    .page-hero{background-image:url('../images/hero/company.jpg?v=20260807i')}
body.page-management .page-hero{background-image:url('../images/hero/management.jpg?v=20260807i')}
body.page-location   .page-hero{background-image:url('../images/hero/location.jpg?v=20260807i')}
body.page-products   .page-hero{background-image:url('../images/hero/products.jpg?v=20260807i')}
body.page-technology .page-hero{background-image:url('../images/hero/technology.jpg?v=20260807i')}
body.page-quality    .page-hero{background-image:url('../images/hero/quality.jpg?v=20260807i')}
body.page-recruit    .page-hero{background-image:url('../images/hero/recruit.jpg?v=20260807q')}
body.page-global     .page-hero{background-image:url('../images/hero/global.jpg?v=20260807i')}
body.page-esg        .page-hero{background-image:url('../images/hero/esg.jpg?v=20260807i')}
body.page-contact    .page-hero{background-image:url('../images/hero/contact.jpg?v=20260807i')}
body.page-visit      .page-hero{background-image:url('../images/hero/visit.jpg?v=20260807i')}
body.page-notice     .page-hero{background-image:url('../images/hero/notice.jpg?v=20260807i')}
body.page-privacy    .page-hero{background-image:url('../images/hero/privacy.jpg?v=20260807i')}
/* ============================================================
   2026-08-06 (2) 배너 아래 탭 고정 · (3) 메가메뉴 겹침 수정 · company 탭 스타일
   ============================================================ */

/* (2) 탭 바를 상단 메뉴 바로 아래에 고정한다. 스크롤을 내려도 남아 있어
       다른 페이지로 바로 이동할 수 있다. */
body[class] .section-tabs,
body[class] .product-tabs{
  position:sticky;top:72px;z-index:60;background:#fff;
  border-bottom:1px solid #D9D9D9;padding:0;margin:0}
body[class] .section-tabs-inner,
body[class] .product-tabs-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 32px;display:flex;gap:0;overflow-x:auto}
@media(max-width:1024px){
  body[class] .section-tabs, body[class] .product-tabs{top:64px}
  body[class] .section-tabs-inner, body[class] .product-tabs-inner{padding:0 16px}
}

/* company 페이지는 이번에 탭이 새로 생겼으므로 박스형 탭 스타일 대상에 추가.
   2026-08-07: 회사소개 탭이 4개 → 6개(경영정보·사업장 안내 포함)로 늘면서
   body class 가 page-management / page-location 인 두 페이지도 같이 걸어 준다.
   6칸이라 글자 크기는 18px → 17px, 좌우 여백은 16px → 12px 로 줄였다. */
body.page-company .section-tab,
body.page-management .section-tab,
body.page-location .section-tab{
  flex:1 0 auto;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:62px;padding:0 12px;font-size:17px;font-weight:700;
  color:#999;background:#fff;border:none;border-bottom:1px solid #D9D9D9;border-right:1px solid #EDEDF0;
  text-decoration:none;white-space:nowrap;transition:background .18s,color .18s}
body.page-company .section-tab:last-child,
body.page-management .section-tab:last-child,
body.page-location .section-tab:last-child{border-right:none}
body.page-company .section-tab.active,
body.page-company .section-tab:hover,
body.page-management .section-tab.active,
body.page-management .section-tab:hover,
body.page-location .section-tab.active,
body.page-location .section-tab:hover{
  background:var(--brand-main) !important;color:#fff !important;border-bottom-color:var(--brand-main) !important}
@media(max-width:768px){
  body.page-company .section-tab,
  body.page-management .section-tab,
  body.page-location .section-tab{min-height:52px;font-size:15px;padding:0 14px}
}

/* (3) 메가메뉴가 열릴 때 흰 배경 판이 메뉴 글씨 위를 덮어 아무것도 안 보이던 문제.
       배경 판을 아래 층(z-index:1)에, 메뉴 내용을 위 층(z-index:2)에 둔다. */
.nav .mega-bg{z-index:1}
.nav .nav-inner{position:relative;z-index:2}
/* ---------- 인사말 페이지 (company_ceo.html) ----------
   와이드 사진 배너 + 왼쪽 큰 제목 / 오른쪽 여유 있는 본문 2단 구성 */
body.page-company .ceo-hero{margin:0 0 60px}
body.page-company .ceo-hero img{width:100%;height:420px;object-fit:cover;display:block;border-radius:3px}
body.page-company .ceo-intro{display:grid;grid-template-columns:minmax(260px,28%) 1fr;gap:64px;align-items:start}
body.page-company .ceo-intro__title h2{font-size:34px;line-height:1.45;font-weight:800;color:#222;word-break:keep-all}
body.page-company .ceo-intro__title h2 b{color:var(--brand-main);font-weight:800}
body.page-company .ceo-intro__body{max-width:980px}
body.page-company .ceo-intro__body .ceo-lead{font-size:20px;font-weight:800;color:#222;line-height:1.7;margin-bottom:30px}
body.page-company .ceo-intro__body p{font-size:17px;line-height:2;color:#555;margin-bottom:26px;word-break:keep-all}
body.page-company .ceo-sig{margin-top:38px;font-size:17px;font-weight:700;color:#222}
@media(max-width:900px){
  body.page-company .ceo-intro{grid-template-columns:1fr;gap:28px}
  body.page-company .ceo-hero img{height:230px}
  body.page-company .ceo-hero{margin-bottom:34px}
  body.page-company .ceo-intro__title h2{font-size:26px}
}
/* ---------- 사업장 안내 (location.html) — 본사 / 천안지사 2블록 ---------- */
body.page-location .site-block{display:grid;grid-template-columns:1.35fr 1fr;gap:32px;align-items:stretch;margin-top:22px}
body.page-location .site-map{position:relative;min-height:420px;background:#F5F5F7;border:1px solid var(--gray-200)}
body.page-location .site-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
body.page-location .site-info .info-card{height:100%}
body.page-location .info-card-header h3{font-size:19px;font-weight:800;color:#222}
/* 카드 개수에 맞춰 칸이 자동으로 나뉜다(본사 2칸 / 천안지사 3칸) */
body.page-location .transport-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
body.page-location .t-card{border:1px solid var(--gray-200);padding:22px 24px;background:#fff}
body.page-location .t-card h4{font-size:17px;font-weight:800;color:#222;margin-bottom:10px}
body.page-location .t-card p{font-size:15px;line-height:1.85;color:#555;word-break:keep-all}
@media(max-width:1024px){
  body.page-location .site-block{grid-template-columns:1fr}
  body.page-location .site-map{min-height:320px}
  body.page-location .transport-grid{grid-template-columns:1fr}
}
/* ---------- 중간 제목(섹션 라벨) 확대 ----------
   섹션 제목(h2)을 모두 걷어내면서 이 라벨이 사실상 유일한 중간 제목이 되었다.
   작은 태그 크기(14px)로는 제목 구실을 못 해 3배(42px)로 키우고,
   그에 맞춰 자간·여백·앞머리 장식 크기를 다시 잡는다. 전 페이지 공통. */
body[class] .section-label,
body[class] .sec-label{
  font-size:42px;line-height:1.3;font-weight:800;letter-spacing:-0.01em;
  text-transform:none;margin-bottom:26px;display:block;padding:0}
body.modern .sec-label{display:flex;align-items:center;gap:14px}
body.modern .sec-label::before{width:44px;height:4px;border-radius:2px}
@media(max-width:768px){
  body[class] .section-label, body[class] .sec-label{font-size:28px;margin-bottom:18px}
  body.modern .sec-label::before{width:28px;height:3px}
}
/* ---------- ESG 환경 성과 지표 ----------
   (1) 사진이 왼쪽 칸(마지막 지표까지)과 같은 높이로 늘어나도록 stretch.
   (2) 막대는 0에서 시작해 화면에 들어올 때 채워진다(js/main.js 의 initProgressBars). */
body.page-esg .esg-two-col{align-items:stretch}
body.page-esg .esg-two-col > div{display:flex;flex-direction:column}
body.page-esg .esg-photo{height:100%;min-height:320px}
body.page-esg .esg-photo img{width:100%;height:100%;min-height:320px;object-fit:cover;display:block}
body.page-esg .progress-bar{height:12px}
body.page-esg .progress-fill{width:0;transition:width 1.25s cubic-bezier(.22,.9,.3,1)}
body.page-esg .progress-label span:last-child{font-variant-numeric:tabular-nums}
@media(max-width:900px){ body.page-esg .esg-photo, body.page-esg .esg-photo img{min-height:240px} }
/* ---------- 레이어 순서 정리 (2026-08-06) ----------
   위치 바 드롭다운이 고정 탭 바에 가려 안 보이던 문제.
   탭 바는 본문 위에만 있으면 되므로 층을 낮추고, 위치 바를 확실히 위로 올린다. */
body[class] .section-tabs,
body[class] .product-tabs{z-index:30}
.loc-bar{z-index:120}
.loc-sel.open{z-index:5}
.loc-list{z-index:130}

/* ============================================================
   위치 바 드롭다운이 안 펼쳐지던 진짜 원인 (2026-08-06)
   위의 z-index 정리로는 해결되지 않았다. .loc-list 는 .loc-bar 아래쪽
   (top:100%)으로 펼쳐지는데, .loc-bar 를 품은 .page-hero 가 overflow:hidden
   이라 히어로 밖으로 나가는 부분이 통째로 잘려나갔다. z-index 를 아무리
   올려도 잘린 것은 보이지 않는다.
   히어로의 장식은 ::before 가 inset:0(박스 안)이거나 ::after 가
   background:none 이라 잘라낼 것이 없으므로, 위치 바가 붙은 히어로에
   한해 넘침을 허용한다.
   ============================================================ */
body .page-hero.has-locbar{overflow:visible}

/* ============================================================
   상단 메뉴 간격 통일 (2026-08-06)
   modern / classic / page-recruit 세 벌이 nav 높이(72 vs 68px)와 글자
   크기(0.875rem vs 16px), 좌우 여백(32 vs 24px)을 각각 따로 정해 두어
   페이지를 옮길 때마다 메뉴 간격이 달라 보였다.
   modern 값으로 통일한다 — 이미 section-tabs 의 sticky 오프셋과
   .page-hero 의 margin-top 이 72px 기준으로 잡혀 있기 때문이다.
   ============================================================ */
body.modern .nav-inner,
body.classic .nav-inner,
body.page-recruit .nav-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 32px;
  height:72px;display:flex;align-items:center;gap:40px}
body.modern .nav-menu,
body.classic .nav-menu,
body.page-recruit .nav-menu{
  display:flex;align-items:center;list-style:none;gap:48px;margin:0 0 0 44px;padding:0}
body.modern .nav-item,
body.classic .nav-item,
body.page-recruit .nav-item{position:relative}
body.modern .nav-link,
body.classic .nav-link,
body.page-recruit .nav-link{
  display:flex;align-items:center;gap:4px;padding:8px 14px;border-radius:3px;
  text-decoration:none;font-size:0.875rem;font-weight:600;color:var(--gray-900);
  white-space:nowrap;transition:all .2s}
/* nav 높이를 72px 로 맞췄으니 68px 를 기준으로 삼던 것들도 함께 내린다 */
body.classic .mobile-nav,
body.page-recruit .mobile-nav{top:72px}
body.page-recruit .section-tabs{top:72px}
/* 로고도 통일한다 — modern 40px / classic·recruit 36px 로 갈려 있어
   페이지를 옮길 때마다 로고가 커졌다 작아졌다 했다 */
body.modern .nav-logo img,
body.classic .nav-logo img,
body.page-recruit .nav-logo img{height:40px;width:auto}

/* ============================================================
   지속가능경영 상단 배너 통일 (2026-08-07)
   esg.html 과 global.html 만 classic 이라 배너가 주황 그라데이션이었고
   나머지 6개는 modern 의 짙은 배경이라 같은 메뉴인데 색과 높이가 달랐다.
   그룹 전체를 modern 쪽 배너로 맞춘다.
   ============================================================ */
/* 배경 사진은 body[class] .page-hero 규칙이 이미 넣어 준다. 여기서 배경을
   다시 지정하면 사진이 덮이므로 건드리지 않는다. 높이는 아래 '배너·탭 높이
   통일' 블록이 사이트 전체를 한꺼번에 맞춘다. */
body.page-sustainability .page-hero h1{color:#fff}
body.page-sustainability .page-hero p{color:rgba(255,255,255,.72)}

/* ============================================================
   서브페이지 배너·탭 높이 통일 (2026-08-07)
   배너에 설명 문단이 있는 페이지(ESG·문의하기 등)와 제목만 있는 페이지의
   높이가 달랐고, 제품 페이지만 안쪽 상자에 max-width 가 없어 제목이 왼쪽으로
   쏠렸다. 탭 바도 62px 과 58px 로 갈려 있었다. 전부 하나로 못박는다.

   선택자를 body[class][class] 로 쓴 이유 — 페이지별 규칙이
   body.page-products .page-hero (0,2,1) 처럼 잡혀 있어 body[class] (0,2,0)
   로는 못 이긴다. [class] 를 하나 더 붙여 (0,3,1) 로 올린다.
   ============================================================ */
body[class][class] .page-hero{
  height:auto;min-height:360px;
  padding-top:120px;padding-bottom:64px;
  display:flex;align-items:center}
/* 위치 바가 붙은 배너는 바 높이만큼 아래를 비워 둔다 */
body[class][class] .page-hero.has-locbar{padding-bottom:114px}
/* 안쪽 상자는 이름이 페이지마다 다르다 — 셋 다 같은 폭·여백으로 맞춘다 */
body[class][class] .page-hero > .container,
body[class][class] .page-hero > .page-hero-inner,
body[class][class] .page-hero > .page-hero-content{
  width:100%;max-width:var(--max-w);margin:0 auto;
  padding-left:32px;padding-right:32px;
  position:relative;z-index:1}

/* 탭 바 높이 통일 (글자 크기는 항목 수에 따라 다르게 두되 높이는 같게) */
body[class][class] .section-tab,
body[class][class] .product-tab,
body[class][class] .tab-btn{min-height:62px}

/* ============================================================
   언어 선택기 + 사이트맵 (2026-08-07)
   기존 한국어/EN 두 버튼과 '문의하기' CTA 를 걷어내고, 그 자리에
   KO·EN·CN·JP 를 고르는 드롭다운과 햄버거(사이트맵)를 둔다.
   CN·JP 는 페이지가 아직 없어 disabled 로 두고 '준비 중' 을 붙였다.
   페이지가 생기면 HTML 에서 disabled 만 떼고 class="lang-btn" data-lang 을
   달아 주면 그대로 동작한다.
   ============================================================ */
body[class] .nav-cta{display:none}          /* 문의하기 CTA 제거 */
body[class] .mobile-nav{display:none !important}  /* 사이트맵이 대신한다 */

/* ============================================================
   페이지별 배너 사진 — 같은 body 클래스를 쓰는 하위 페이지 구분 (2026-08-07)
   sus_* 6개는 모두 page-technology, recruit_* 4개는 모두 page-recruit 라
   배너가 한 장으로 공유됐다. 페이지마다 hero-* 클래스를 하나씩 더 달아
   자기 사진을 갖게 한다. 위쪽 기본 규칙과 우선순위가 같으므로
   반드시 이 블록이 뒤에 있어야 한다.
   ============================================================ */
body.hero-sus-env      .page-hero{background-image:url('../images/hero/sus_environment.jpg?v=20260807j')}
body.hero-sus-climate  .page-hero{background-image:url('../images/hero/sus_climate.jpg?v=20260807j')}
body.hero-sus-quality  .page-hero{background-image:url('../images/hero/sus_quality.jpg?v=20260807j')}
body.hero-sus-human    .page-hero{background-image:url('../images/hero/sus_humanright.jpg?v=20260807j')}
body.hero-sus-social   .page-hero{background-image:url('../images/hero/sus_social.jpg?v=20260807j')}
/* 공급망관리는 hero-* 가 없어 technology.jpg(피펫 실험실)를 쓰고 있었다 (2026-08-07). */
body.hero-sus-supply   .page-hero{background-image:url('../images/hero/sus_supplychain.jpg?v=20260807q')}
body.hero-rec-jobs     .page-hero{background-image:url('../images/hero/recruit_jobs.jpg?v=20260807q')}
body.hero-rec-benefits .page-hero{background-image:url('../images/hero/recruit_benefits.jpg?v=20260807j')}
body.hero-rec-hiring   .page-hero{background-image:url('../images/hero/recruit_hiring.jpg?v=20260807j')}
/* 인재상(recruit.html) 사진은 인물이 위쪽에 서 있어 가운데로 자르면 얼굴이 잘린다.
   recruit_* 하위 페이지까지 밀리지 않도록 hero-rec-main 을 따로 달아 이 페이지에만 적용한다. */
body.hero-rec-main     .page-hero{background-position:center 30%}

.lang-pick{position:relative}
.lang-cur{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:800;letter-spacing:.06em;color:var(--gray-900);
  padding:8px 6px}
.lang-cur svg{width:11px;height:11px;transition:transform .2s}
.lang-pick.open .lang-cur svg{transform:rotate(180deg)}
.lang-list{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:168px;
  background:#fff;border:1px solid var(--gray-200);box-shadow:0 12px 30px rgba(0,0,0,.14);
  padding:6px 0;z-index:1200}
.lang-pick.open .lang-list{display:block}
.lang-list button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;
  cursor:pointer;font:inherit;font-size:.86rem;font-weight:800;letter-spacing:.06em;
  color:var(--gray-900);padding:11px 18px;text-align:left}
.lang-list button i{font-style:normal;font-size:.76rem;font-weight:600;color:var(--gray-500);
  letter-spacing:0;margin-left:auto}
.lang-list button:hover:not(:disabled){background:var(--gray-50)}
.lang-list .lang-btn.active{color:var(--brand-main)}
.lang-list button:disabled{color:var(--gray-300);cursor:not-allowed}
.lang-list button:disabled i{color:var(--gray-300)}

/* 햄버거는 이제 모든 화면에서 보인다 */
body[class] .hamburger{display:flex !important;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:0 8px;background:none;border:none;cursor:pointer}
body[class] .hamburger span{display:block;height:2px;width:100%;background:var(--gray-900);
  transition:transform .25s,opacity .2s}
body[class] .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body[class] .hamburger.open span:nth-child(2){opacity:0}
body[class] .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 사이트맵 : 햄버거를 누르면 전체 메뉴가 한 판으로 펼쳐진다 */
.sitemap{position:fixed;inset:0;z-index:1100;display:none}
.sitemap.open{display:block}
.sitemap-dim{position:absolute;inset:0;background:rgba(10,12,18,.55);opacity:0;transition:opacity .28s}
.sitemap.open .sitemap-dim{opacity:1}
.sitemap-panel{position:absolute;left:0;right:0;top:72px;background:#fff;
  border-top:1px solid var(--gray-200);box-shadow:0 20px 44px rgba(0,0,0,.16);
  max-height:calc(100vh - 72px);overflow-y:auto;
  transform:translateY(-14px);opacity:0;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .28s}
.sitemap.open .sitemap-panel{transform:none;opacity:1}
.sitemap-inner{max-width:var(--max-w);margin:0 auto;padding:48px 32px 56px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:32px}
.sitemap-col > a{display:block;font-size:1.05rem;font-weight:800;color:var(--gray-900);
  text-decoration:none;padding-bottom:14px;margin-bottom:14px;border-bottom:2px solid var(--gray-900)}
.sitemap-col > a:hover{color:var(--brand-main);border-bottom-color:var(--brand-main)}
.sitemap-col ul{list-style:none;margin:0;padding:0}
.sitemap-col li a{display:block;padding:7px 0;font-size:.9rem;color:var(--gray-600);
  text-decoration:none;transition:color .18s,padding-left .18s}
.sitemap-col li a:hover{color:var(--brand-main);padding-left:5px}
@media(max-width:900px){
  .sitemap-inner{grid-template-columns:1fr 1fr;gap:24px;padding:32px 20px 40px}
}
@media(max-width:560px){
  .sitemap-inner{grid-template-columns:1fr}
}

@media(max-width:768px){
  body[class][class] .page-hero{min-height:280px;padding-top:100px;padding-bottom:48px}
  body[class][class] .page-hero.has-locbar{padding-bottom:78px}
  body[class][class] .page-hero > .container,
  body[class][class] .page-hero > .page-hero-inner,
  body[class][class] .page-hero > .page-hero-content{padding-left:20px;padding-right:20px}
  body[class][class] .section-tab,
  body[class][class] .product-tab,
  body[class][class] .tab-btn{min-height:52px}
}

/* ============================================================
   고객지원 탭 바 (2026-08-07)
   내방등록·문의등록·공지사항 세 페이지에만 붙는다. 지속가능경영 탭과
   같은 생김새를 쓰되 항목이 3개뿐이라 별도로 둔다.
   ============================================================ */
body.page-support .section-tabs{
  position:sticky;top:72px;z-index:30;background:#fff;border-bottom:2px solid var(--gray-200)}
body.page-support .section-tabs-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 32px;display:flex;gap:0;overflow-x:auto}
body.page-support .section-tab{
  flex:1 0 auto;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:58px;padding:0 20px;font-size:16px;font-weight:700;
  color:#999;background:#fff;border:none;border-bottom:1px solid #D9D9D9;border-right:1px solid #EDEDF0;
  text-decoration:none;white-space:nowrap;transition:background .18s,color .18s;margin-bottom:0}
body.page-support .section-tab:last-child{border-right:none}
body.page-support .section-tab.active,
body.page-support .section-tab:hover{
  background:var(--brand-main) !important;color:#fff !important;border-bottom-color:var(--brand-main) !important}
/* 문의 페이지의 오시는 길은 사업장이 둘이라 제목을 따로 단다 */
body.page-contact .site-head{
  font-size:19px;font-weight:800;color:var(--gray-900);
  margin:0 0 18px;padding-bottom:12px;border-bottom:2px solid var(--gray-200)}

/* ============================================================
   오시는 길 : 사업장 둘을 좌우로 나란히 (2026-08-07)
   위아래로 쌓으니 지도가 화면 폭을 다 먹으면서 세로로만 길어졌다.
   왼쪽 본사 / 오른쪽 천안공장으로 갈라 화면을 넓게 쓴다.
   칸이 좁아졌으니 안쪽 경로 카드는 2열에서 1열로 바꾼다.
   ============================================================ */
.sites-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.site-block{min-width:0}
body[class] .site-block .map-wrap iframe{height:300px}
body[class] .site-block .directions-grid{
  grid-template-columns:1fr;gap:16px;margin-top:22px}
body[class] .site-block .direction-card{padding:20px 22px}
body[class] .site-block .direction-card p{font-size:14px;line-height:1.75}
@media(max-width:1024px){
  .sites-grid{grid-template-columns:1fr;gap:52px}
  body[class] .site-block .map-wrap iframe{height:260px}
}
@media(max-width:768px){
  body.page-support .section-tabs-inner{padding:0 16px}
  body.page-support .section-tab{min-height:50px;padding:0 12px;font-size:14px}
}

/* ============================================================
   지속가능경영 탭 바 (2026-08-06)
   sus_*.html 은 body 에 page-technology 를 함께 달아 카드·표 부품을
   그대로 물려받는다. 다만 이 그룹은 esg.html(classic)·global.html(classic)
   까지 8개 탭을 한 줄에 담아야 해서 탭만 따로 정의한다.
   ============================================================ */
body.page-sustainability .section-tabs{
  position:sticky;top:72px;z-index:30;background:#fff;border-bottom:2px solid var(--gray-200)}
body.page-sustainability .section-tabs-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 32px;display:flex;gap:0;overflow-x:auto}
body.page-sustainability .section-tab{
  flex:1 0 auto;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:58px;padding:0 14px;font-size:15px;font-weight:700;
  color:#999;background:#fff;border:none;border-bottom:1px solid #D9D9D9;border-right:1px solid #EDEDF0;
  text-decoration:none;white-space:nowrap;transition:background .18s,color .18s;margin-bottom:0}
body.page-sustainability .section-tab:last-child{border-right:none}
body.page-sustainability .section-tab.active,
body.page-sustainability .section-tab:hover{
  background:var(--brand-main) !important;color:#fff !important;border-bottom-color:var(--brand-main) !important}
@media(max-width:768px){
  body.page-sustainability .section-tabs-inner{padding:0 16px}
  body.page-sustainability .section-tab{min-height:50px;padding:0 12px;font-size:13px}
}

/* ============================================================
   문의하기 폼 1단 개편 (2026-08-06)
   기존에는 좌 연락처 / 우 폼의 2단이었다. 폼을 페이지의 주인공으로 올리고
   한 항목씩 세로로 쌓는 형태로 바꾼다. 마크업 순서(연락처 → 폼)는 그대로
   두고 flex order 로만 뒤집어, 자바스크립트가 꺼져도 내용은 다 보인다.
   ============================================================ */
body.page-contact .contact-layout{
  display:block;max-width:1120px;margin:0 auto}
body.page-contact .form-card{padding:26px 38px 24px}
/* 폼이 배너 바로 아래 한 화면에 들어오도록 이 구간의 위아래 여백만 줄인다
   (아래 "오시는 길" 섹션의 80px 여백은 그대로 둔다) */
body.page-contact .section-tabs + .section{padding:28px 0 40px}

/* 2단 격자 (2026-08-07). 연락처 카드를 빼고 폭을 넓힌 뒤,
   짧은 항목은 두 개씩 나란히 놓아 폼 전체가 한 화면에 들어오게 한다.
   문의 내용·동의 박스·버튼은 .form-group-full / 자기 클래스로 한 줄을 다 쓴다.
   허니팟(name="website")은 position:absolute 라 격자 칸을 차지하지 않는다. */
body.page-contact #inquiryForm{
  display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start}
body.page-contact .form-group-full,
body.page-contact .privacy-box,
body.page-contact .form-submit{grid-column:1 / -1}

/* 기존 .form-row 2단 격자는 쓰지 않는다 (격자를 폼 자체가 만든다) */
body.page-contact .form-row{display:block}
body.page-contact .form-group{margin-bottom:13px}
body.page-contact label{text-transform:none;letter-spacing:0;font-size:15px;margin-bottom:7px}
body.page-contact input,
body.page-contact select,
body.page-contact textarea{padding:12px 14px;border-radius:2px}
body.page-contact textarea{min-height:96px}
body.page-contact .char-count{
  margin-top:6px;text-align:right;font-size:13px;color:var(--gray-500);font-variant-numeric:tabular-nums}

/* 개인정보 동의 박스 */
body.page-contact .privacy-box{
  background:var(--gray-50);border:1px solid var(--gray-200);border-radius:2px;padding:18px 22px;margin:4px 0 22px}
body.page-contact .privacy-box h4{
  font-size:15px;font-weight:800;color:var(--gray-900);margin:0 0 10px}
/* 수집 항목·목적·기간을 3열로 늘어놓아 동의 박스 높이를 줄인다 */
body.page-contact .privacy-terms{
  display:grid;grid-template-columns:repeat(3,auto 1fr);gap:6px 12px;margin:0 0 10px}
body.page-contact .privacy-terms dt{font-size:14px;font-weight:700;color:var(--gray-700)}
body.page-contact .privacy-terms dd{margin:0;font-size:14px;color:var(--gray-600);line-height:1.6}
body.page-contact .privacy-note{
  font-size:13px;color:var(--gray-500);line-height:1.7;margin:0 0 16px;
  padding-top:12px;border-top:1px solid var(--gray-200)}
body.page-contact .privacy-note a{color:var(--brand-main);font-weight:600}
body.page-contact .privacy-row{
  display:flex;align-items:flex-start;gap:10px;margin:0;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--gray-900);line-height:1.6;text-transform:none;letter-spacing:0}

body.page-contact .form-submit{display:flex;justify-content:center}
body.page-contact .form-submit .submit-btn{width:auto;min-width:260px;padding:15px 48px;margin-top:0}
/* 개인정보 동의 전에는 눌리지 않는다 (내방등록과 같은 방식) */
body.page-contact .submit-btn:disabled{
  background:var(--gray-200);color:var(--gray-500);cursor:not-allowed;opacity:1}
body.page-contact .submit-btn:disabled:hover{
  background:var(--gray-200);transform:none;box-shadow:none}

@media(max-width:900px){
  /* 좁아지면 다시 한 줄에 한 항목 */
  body.page-contact #inquiryForm{grid-template-columns:1fr}
  body.page-contact .privacy-terms{grid-template-columns:110px 1fr}
}
@media(max-width:768px){
  body.page-contact .form-card{padding:26px 20px}
  body.page-contact .privacy-terms{grid-template-columns:1fr;gap:2px 0}
  body.page-contact .privacy-terms dd{margin-bottom:8px}
  body.page-contact .form-submit .submit-btn{width:100%;min-width:0}
}

/* ============================================================
   메가메뉴 닫힐 때 생기던 검은 줄 (2026-08-06)
   .mega-bg 는 닫히면 height 가 0 으로 즉시 줄어드는데 opacity 만 0.18s 에
   걸쳐 사라진다. 그 0.18s 동안 '높이 0 짜리 상자'에 border-top 1px 과
   0 12px 28px 그림자가 겹쳐 가느다란 검은 줄로 보였다. 메뉴 위를 대각선으로
   지나면 열림/닫힘이 연달아 일어나 줄이 깜빡이는 것처럼 보인다.
   테두리와 그림자를 '열린 상태'에만 준다 — 닫는 순간 같이 사라지므로
   남는 줄이 없다. 흰 배경만 페이드되는데 높이가 0 이라 보이지 않는다.
   ============================================================ */
.nav .mega-bg{border-top:0;box-shadow:none}
.nav.mega-open .mega-bg{
  border-top:1px solid var(--gray-200);box-shadow:0 12px 28px rgba(0,0,0,.08)}

/* ============================================================
   대각선으로 움직이면 메뉴가 닫히던 문제 (2026-08-07)
   위 2026-08-06 수정은 '닫힐 때 줄이 남는 것'만 없앴을 뿐, 애초에 왜 자꾸
   닫히는지는 그대로였다. 원인은 펼쳐진 흰 판이 pointer-events:none 이라
   마우스를 전혀 받지 못한 것. 각 칸(.nav-dropdown)은 글자 폭만큼만 넓어서
   칸 사이 48px 틈과 마지막 칸 오른쪽 빈 자리는 판이 깔려 있어도 커서 입장에선
   nav 바깥이다. 대각선 이동은 이 빈 자리를 반드시 지나므로 mouseleave 가
   터지고, 열림/닫힘이 반복되며 위쪽 테두리가 검은 줄처럼 깜빡였다.
   열려 있는 동안만 판이 마우스를 받게 해 빈 자리를 없앤다. 판은 z-index:1,
   메뉴 내용은 .nav-inner 의 z-index:2 라 링크 클릭은 그대로 된다.
   닫힌 상태(height:0)에서는 pointer-events 를 되돌려 본문 클릭을 막지 않는다.
   js/main.js 의 initMegaMenu 에 닫기 지연(180ms)이 함께 들어가 있다.
   ============================================================ */
.nav.mega-open .mega-bg{pointer-events:auto}

/* ============================================================
   본문 가로폭 넓히기 (2026-08-06)
   컨테이너는 1560px 인데 리드 문단만 900~1100px 로 묶여 있어, 아래 카드·표는
   끝까지 가는데 문단만 중간에서 끊겨 보였다. 문단류의 폭 제한을 풀어
   컨테이너 폭을 그대로 쓰게 한다.
   메인 슬라이더의 대제목·부제(.slide-title/.slide-sub/.hero h1)와 문의 폼은
   사진 위 카피와 입력 폼이라 좁은 편이 맞아서 그대로 둔다.
   ============================================================ */
body.modern .sec-header p,
body.modern .cta-inner p,
body.modern .page-hero p,
body.classic .page-hero p,
body.classic .section-sub,
body.page-contact .recruit-card p,
body.page-recruit .page-hero p,
body.page-recruit .sec-desc,
body.page-technology .policy-callout p,
body.page-quality .policy-callout p,
body.page-company .ceo-intro__body{max-width:none}

/* ============================================================
   홈 메인 비주얼 + 사업분야 (2026-08-07)
   index.html 전용. 클래스는 mk- 접두사라 다른 페이지와 겹치지 않는다.
   움직임 수치는 참고 사이트와 같게 잡았다.
     · 배경 확대  scale(1.2) -> scale(1)  5s ease-in-out
     · 글씨 등장  translate3d(0,150%,0) -> 0
                  1.5s cubic-bezier(.4,0,.2,1), 지연 0 / .3 / .5 / .8s
     · 밑줄       2s forwards
     · 사업 섹션  4칸 가로, 올린 칸이 flex:0 1 70% 로 벌어지고 사진 scale(1.1)
   배경은 이미지가 아니라 js/home.js 가 캔버스로 그린다.
   상단 메뉴는 흰 고정 바 그대로 둔다 — 로고의 YPM 글자가 검정이라
   투명하게 만들면 어두운 히어로 위에서 읽히지 않는다.
   ============================================================ */
.mk-hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:#0a1830}

/* 배경 사진 — 슬라이드마다 한 장, 서서히 교차하며 천천히 확대된다.

   2026-08-07 : 넘어갈 때 한순간 어두워지던 것을 고쳤다.
   예전에는 나가는 사진과 들어오는 사진이 동시에 반대 방향으로 페이드했다.
   중간 지점에서 둘 다 반투명이라 뒤의 검은 배경(#0a1830)이 비쳐 화면이
   푹 꺼졌다 다시 밝아졌다. 지금은 나가는 사진(.is-under)을 불투명한 채로
   아래에 두고, 들어오는 사진(.is-on)만 그 위에서 0→1 로 밝아진다.
   덮이는 동안 빈틈이 없으니 밝기가 흔들리지 않는다.
   다 덮은 뒤 js/home.js 가 .is-under 를 떼는데, 이때 opacity 가 0 으로
   튀지만 이미 위 장에 완전히 가려 보이지 않는다(그래서 transition:none).

   층 순서 : 사진(0~2) < 막·별빛·빛무리(3) < 글씨(5).
   사진에 z-index 를 준 순간, 뒤에 오지만 z-index 가 없던 .mk-scrim /
   .mk-canvas / .mk-bloom 이 사진 밑으로 깔린다. 그래서 아래 넷에 3을 준다. */
.mk-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;z-index:0;transition:opacity 1.6s cubic-bezier(.4,0,.2,1);
  transform-origin:center;will-change:opacity,transform;backface-visibility:hidden}
.mk-bg.is-under{opacity:1;z-index:1;transition:none}
.mk-bg.is-on{opacity:1;z-index:2;animation:mkZoom 9s ease-out forwards}
@keyframes mkZoom{from{transform:scale(1.14)}to{transform:scale(1) rotate(.003deg)}}

/* 글씨 쪽만 덮는다 — 오른쪽은 사진이 밝게 살아 있어야 한다 */
.mk-scrim,.mk-scrim2,.mk-canvas,.mk-bloom{z-index:3}
.mk-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(5,14,32,.90) 0%, rgba(5,14,32,.74) 30%,
    rgba(5,14,32,.40) 58%, rgba(5,14,32,.12) 82%, rgba(5,14,32,.04) 100%)}
/* 아래쪽만 살짝 눌러 슬라이드 표시가 읽히게 */
.mk-scrim2{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,14,32,.30) 0%,transparent 26%,transparent 62%,rgba(5,14,32,.55) 100%)}

/* 별빛(원자망)은 사진 위에 얹되 screen 으로 합성해 어둡게 만들지 않고 빛만 더한다 */
.mk-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  mix-blend-mode:screen;pointer-events:none}
/* 오른편에서 은은하게 밝아지는 빛무리 */
.mk-bloom{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at 74% 44%,
    rgba(190,232,255,.40) 0%, rgba(96,180,255,.16) 30%, transparent 62%);
  animation:mkBloom 4.5s ease-in-out infinite alternate}
@keyframes mkBloom{from{opacity:.62}to{opacity:1}}

/* 글씨는 왼쪽 정렬 */
.mk-copy{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);z-index:5;
  max-width:var(--max-w);margin:0 auto;padding:0 32px;text-align:left}
.mk-slide{display:none}
.mk-slide.is-on{display:block}

/* 줄마다 가림막을 씌우고 아래에서 밀어 올린다 */
.mk-line{overflow:hidden;padding-bottom:.08em}
.mk-up{display:block;transform:translate3d(0,150%,0)}
.mk-slide.is-on .mk-up{transform:translate3d(0,0,0);transition:transform 1.5s cubic-bezier(.4,0,.2,1)}
.mk-slide.is-on .mk-d1 .mk-up{transition-delay:0s}
.mk-slide.is-on .mk-d2 .mk-up{transition-delay:.3s}
.mk-slide.is-on .mk-d3 .mk-up{transition-delay:.5s}
.mk-slide.is-on .mk-d4 .mk-up{transition-delay:.8s}

.mk-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.mk-bar{width:0;height:2px;margin:16px 0 24px;background:var(--brand-main)}
.mk-slide.is-on .mk-bar{animation:mkLine 2s cubic-bezier(.4,0,.2,1) forwards}
@keyframes mkLine{to{width:58px}}
.mk-copy h2{font-size:clamp(34px,5.6vw,78px);line-height:1.14;font-weight:800;
  letter-spacing:-.035em;color:#fff;margin:0}
.mk-copy h2 em{font-style:normal;color:var(--brand-main)}
.mk-copy h2{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.mk-copy .mk-sub{font-size:clamp(15px,1.15vw,18px);line-height:1.85;
  color:rgba(255,255,255,.82);max-width:660px;margin:26px 0 0;
  text-shadow:0 1px 12px rgba(0,0,0,.5)}
.mk-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-top:38px}
.mk-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 32px;border-radius:2px;
  font-size:.92rem;font-weight:700;text-decoration:none;transition:all .22s}
/* 히어로 주황 버튼(제품 라인업·반도체 공구·연구개발)은 글자 수가 달라 폭이 제각각이었다.
   min-width 는 하한선일 뿐이라 긴 라벨이 그 값을 넘으면 버튼마다 폭이 미세하게 달라진다.
   그래서 고정 width 로 세 버튼을 완전히 같은 크기로 맞추고 가운데 정렬한다(넘침 없음 확인).
   한글은 180px, 영문은 가장 긴 'Semiconductor Tools'(241px)를 담는 250px. */
.mk-acts .mk-btn-solid{box-sizing:border-box;width:180px;justify-content:center}
html[lang="en"] .mk-acts .mk-btn-solid,
body.lang-en .mk-acts .mk-btn-solid{width:250px}
/* 고스트(테두리) 버튼(문의하기·연구소 소개·오시는 길)도 폭을 통일한다.
   '연구소 소개'가 한 글자 더 길어 넓었던 것(138px)을 나머지 두 버튼 크기(≈124px)로 줄인다.
   고정폭 126px + 가운데 정렬. 한/영 모든 라벨이 넘치지 않음을 확인함. */
.mk-acts .mk-btn-ghost{box-sizing:border-box;width:126px;padding:15px 12px;justify-content:center}
.mk-btn-solid{background:var(--brand-main);color:#fff}
.mk-btn-solid:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(244,112,40,.42)}
.mk-btn-ghost{border:1px solid rgba(255,255,255,.36);color:#fff}
.mk-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

.mk-nav{position:absolute;left:0;right:0;bottom:8%;z-index:6;
  max-width:var(--max-w);margin:0 auto;padding:0 32px;display:flex;gap:30px}
.mk-tab{flex:0 0 158px;background:none;border:none;padding:0;cursor:pointer;text-align:left;
  color:rgba(255,255,255,.4);font:inherit}
.mk-tab-n{display:block;font-size:.7rem;font-weight:800;letter-spacing:.18em;margin-bottom:8px}
.mk-tab-l{display:block;font-size:.88rem;font-weight:700;margin-bottom:12px;
  white-space:nowrap;transition:color .3s}
.mk-tab-b{display:block;height:2px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.mk-tab-b::after{content:'';position:absolute;inset:0 auto 0 0;width:0;background:var(--brand-main)}
.mk-tab.is-on{color:#fff}
.mk-tab.is-on .mk-tab-l{color:#fff}
.mk-tab.is-on .mk-tab-b::after{width:100%;transition:width 7s linear}

/* 사업분야 : 4칸 가로 */
.mk-biz{display:flex;height:100vh;min-height:620px;background:#05070d}
.mk-col{position:relative;flex:1 1 0;overflow:hidden;text-decoration:none;
  border-right:1px solid rgba(255,255,255,.08);transition:flex .75s cubic-bezier(.4,0,.2,1)}
.mk-col:last-child{border-right:none}
.mk-biz:hover .mk-col{flex:0 1 10%}
.mk-biz .mk-col:hover{flex:0 1 70%}
.mk-col-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.42;transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .5s}
.mk-col:hover .mk-col-bg{transform:scale(1.1);opacity:.62}
/* 글씨를 아래에 붙여 두니 화면 맨 밑으로 몰려 읽기 불편했다.
   가운데로 올리고, 덮개도 아래만 어둡던 것을 가운데가 가장 진하도록 바꾼다. */
.mk-col::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(4,7,14,.30) 0%, rgba(4,7,14,.62) 38%,
    rgba(4,7,14,.72) 62%, rgba(4,7,14,.45) 100%)}
.mk-col-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:48px 40px}
.mk-col-n{font-size:.72rem;font-weight:800;letter-spacing:.2em;color:var(--brand-main);margin-bottom:14px}
.mk-col-t{font-size:1.6rem;font-weight:800;color:#fff;letter-spacing:-.02em;margin:0 0 4px;white-space:nowrap}
.mk-col-e{font-size:.78rem;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.42);text-transform:uppercase}
.mk-col-d{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s cubic-bezier(.4,0,.2,1),opacity .4s ease,margin .6s}
.mk-col:hover .mk-col-d{max-height:280px;opacity:1;margin-top:20px}
.mk-col-d p{font-size:.92rem;line-height:1.85;color:rgba(255,255,255,.68);margin:0 0 20px;max-width:560px}
.mk-tags{display:flex;flex-wrap:wrap;gap:8px}
.mk-tag{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.26);border-radius:100px;padding:7px 16px;white-space:nowrap}
.mk-col-go{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-size:.86rem;font-weight:700;color:#fff}
.mk-col-go svg{transition:transform .25s}
.mk-col:hover .mk-col-go svg{transform:translateX(5px)}

@media(max-width:1024px){
  .mk-nav{gap:12px;padding:0 20px}
  .mk-tab{flex:1 1 0}
  .mk-tab-l{font-size:.74rem;white-space:normal}
  .mk-copy{padding:0 20px}
  .mk-biz{flex-direction:column;height:auto}
  .mk-col{flex:1 1 auto !important;min-height:340px;border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08)}
  .mk-col-d{max-height:none;opacity:1;margin-top:18px}
  .mk-col-in{padding:36px 22px}
  .mk-col-t{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .mk-hero.zoom .mk-canvas{animation:none}
  .mk-up{transform:none !important}
  .mk-slide.is-on .mk-bar{animation:none;width:58px}
  .mk-tab.is-on .mk-tab-b::after{transition:none}
  .mk-col-bg{transition:none}
  /* 사진은 페이드도 확대도 없이 바로 바뀐다 */
  .mk-bg{transition:none}
  .mk-bg.is-on{animation:none;transform:none}
}

/* ============================================================
   내방등록 페이지 손질 (2026-08-06)
   ============================================================ */
/* 1) 진행 단계의 현재 동그라미가 은은하게 숨쉬듯 페이드된다.
      화면 낭독기나 '동작 줄이기' 설정에서는 끈다. */
@keyframes ypmStepFade{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(244,112,40,.45)}
  50%    {opacity:.62;box-shadow:0 0 0 9px rgba(244,112,40,0)}
}
body.page-visit .step-num.active{animation:ypmStepFade 2.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  body.page-visit .step-num.active{animation:none}
}

/* 채용정보(page-recruit)의 1·2·3·4 동그라미는 순서대로 이어서 깜빡인다.
   한 주기(2.4s)를 넷으로 나눠 0/0.6/1.2/1.8s 씩 늦춘다. */
body.page-recruit .step-num{animation:ypmStepFade 2.4s ease-in-out infinite}
body.page-recruit .step-item:nth-child(1) .step-num{animation-delay:0s}
body.page-recruit .step-item:nth-child(2) .step-num{animation-delay:.6s}
body.page-recruit .step-item:nth-child(3) .step-num{animation-delay:1.2s}
body.page-recruit .step-item:nth-child(4) .step-num{animation-delay:1.8s}
@media (prefers-reduced-motion:reduce){
  body.page-recruit .step-num{animation:none}
}

/* 2) 개인정보 동의 전에는 제출 버튼을 흐리게 잠근다 */
body.page-visit .submit-btn:disabled{
  background:var(--gray-200);color:var(--gray-500);cursor:not-allowed;opacity:1}
body.page-visit .submit-btn:disabled:hover{
  background:var(--gray-200);transform:none;box-shadow:none}

/* 3) 오시는 길 — 문의 페이지와 같은 형태를 내방등록에도 쓴다 */
body.page-visit .map-section{margin-top:0}
body.page-visit .site-head{
  font-size:19px;font-weight:800;color:var(--gray-900);
  margin:0 0 18px;padding-bottom:12px;border-bottom:2px solid var(--gray-200)}
body.page-visit .map-wrap{
  border-radius:3px;overflow:hidden;box-shadow:0 8px 32px rgba(244,112,40,.1)}
body.page-visit .map-wrap iframe{width:100%;height:380px;border:none;display:block}
body.page-visit .directions-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
body.page-visit .direction-card{background:var(--gray-50);border-radius:3px;padding:24px}
body.page-visit .direction-card h4{
  display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;
  color:var(--gray-900);margin-bottom:12px}
body.page-visit .direction-card h4 svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:2}
body.page-visit .direction-card p{font-size:15px;color:var(--gray-600);line-height:1.8}
@media(max-width:900px){
  body.page-visit .directions-grid{grid-template-columns:1fr}
  body.page-visit .map-wrap iframe{height:280px}
}
.loc-list{z-index:130}

/* ============================================================
   서브 배너 높이 통일 (2026-08-07)
   body.modern 계열(제품 products_*, 지속가능경영 sus_*, technology)만
   .page-hero 에 margin-top:72px 가 붙어 있어 배너 영역이 432px 이었다.
   회사소개·인재채용·고객지원 계열은 360px 이다. 상단 네비게이션은
   position:fixed 이고 배너의 padding-top(120px)이 네비 높이(73px)를
   이미 덮으므로 이 여백은 없어도 글자가 가리지 않는다.
   ============================================================ */
body[class] .page-hero{margin-top:0}

/* ============================================================
   스크롤에 따라 상단 메뉴 접기 + 위치 바 상단 고정 (2026-08-07)
   요청: SK스페셜티처럼 아래로 내리면 흰 메인 메뉴가 위로 접히고 그 자리에
        어두운 위치 바(홈·대분류·소분류)가 붙고, 위로 올리면 메인 메뉴가
        다시 내려오는 동작.

   고정되는 막대가 셋이라 서로 겹치지 않게 한 줄로 세워야 한다.
     .nav(72px) → .loc-bar(50px) → .section-tabs/.product-tabs(62px)
   각자 top 을 따로 박아 두면 메뉴가 접힐 때마다 어긋나므로, 아래 두 변수를
   js/main.js 의 스크롤 핸들러가 실제 높이를 재서 채운다.
     --loc-top   : 위치 바가 붙을 높이 (메뉴가 보이면 nav 높이, 접히면 0)
     --stick-top : 탭 바가 붙을 높이 (--loc-top + 위치 바 높이)
   JS 가 못 도는 상황을 대비해 기본값은 지금까지 쓰던 값 그대로 둔다.

   transform 으로 접는 이유 : top 이나 height 를 건드리면 본문이 밀려
   레이아웃이 다시 계산된다. transform 은 합성만 하므로 스크롤 중에도 끊기지
   않는다. 위치 바·탭 바는 fixed/sticky 라 본문을 밀지 않으니 top 을 준다.
   ============================================================ */
:root{--nav-h:72px;--loc-top:72px;--stick-top:72px}
@media(max-width:1024px){ :root{--nav-h:64px;--loc-top:64px;--stick-top:64px} }

body[class] .nav{
  transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .3s;
  will-change:transform}
body.nav-hidden .nav{transform:translateY(-100%)}
/* 메가메뉴가 펼쳐져 있는 동안에는 접지 않는다(펼친 판만 남고 메뉴가 사라진다) */
body.nav-hidden .nav.mega-open{transform:none}

/* 위치 바 — 히어로 바닥에서 화면 위로 올라오면 그 자리에 고정한다.
   히어로 위에서는 사진이 비쳐야 해서 반투명이지만, 본문 위로 올라오면
   흰 배경이 비쳐 글씨가 안 읽히므로 불투명한 검정으로 바꾼다. */
.loc-bar.is-stuck{
  position:fixed;top:var(--loc-top);bottom:auto;
  background:rgba(18,18,20,.96);
  box-shadow:0 2px 14px rgba(0,0,0,.22);
  transition:top .28s cubic-bezier(.4,0,.2,1)}

/* 오렌지 탭 바는 위치 바 바로 아래에 선다 */
body[class] .section-tabs,
body[class] .product-tabs{
  top:var(--stick-top);
  transition:top .28s cubic-bezier(.4,0,.2,1)}

/* 모션 줄이기를 켜 둔 사용자에게는 미끄러지는 연출을 빼고 즉시 바꾼다 */
@media(prefers-reduced-motion:reduce){
  body[class] .nav,
  .loc-bar.is-stuck,
  body[class] .section-tabs,
  body[class] .product-tabs{transition:none}
}

/* ============================================================
   협력사 프로세스 도식 (2026-08-07)
   sus_supplychain.html 의 '등록·평가 5단계'가 3열 표였는데, 표는 항목을
   나열할 뿐 단계가 순서대로 이어진다는 걸 보여주지 못했다. 칸을 가로로 세우고
   사이를 화살표로 잇는다. 화살표는 ::after 라 마크업에 없다 — 칸을 더하거나
   빼도 HTML 만 고치면 되고, 마지막 칸의 화살표는 자동으로 사라진다.
   칸 높이는 flex 로 맞춰(.proc-act 에 flex:1) 확인 항목 줄이 아래에 정렬된다.
   ============================================================ */
.proc-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:44px;margin-top:44px}
.proc-step{
  position:relative;background:#fff;border:1px solid var(--gray-200);
  border-top:3px solid var(--brand-main);
  padding:26px 22px 24px;display:flex;flex-direction:column;gap:11px}
/* 칸과 칸 사이 틈 한가운데 놓이는 꺾쇠 화살표 */
.proc-step::after{
  content:'';position:absolute;top:50%;right:-29px;width:13px;height:13px;
  border-top:2.5px solid var(--brand-main);border-right:2.5px solid var(--brand-main);
  transform:translateY(-50%) rotate(45deg)}
.proc-step:last-child::after{display:none}
.proc-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--brand-main);color:#fff;font-size:14px;font-weight:800}
.proc-title{font-size:18px;font-weight:800;color:var(--gray-900);margin:0;letter-spacing:-.01em}
.proc-act{font-size:14.5px;line-height:1.75;color:var(--gray-600);margin:0;flex:1;word-break:keep-all}
.proc-chk{display:flex;flex-wrap:wrap;gap:6px}
/* 자식만 골라야 한다 — 안에 언어 전환용 .ko/.en span 이 한 겹 더 있다 */
.proc-chk > span{
  display:inline-block;padding:4px 11px;border-radius:2px;
  background:var(--brand-light);color:var(--brand-dark);
  font-size:12.5px;font-weight:700;white-space:nowrap}
@media(max-width:1280px){
  .proc-flow{grid-template-columns:repeat(3,1fr);gap:34px}
  .proc-step::after{right:-24px}
  /* 3열로 접히면 줄 끝 화살표는 갈 곳이 없다 */
  .proc-step:nth-child(3n)::after{display:none}
}
@media(max-width:860px){
  .proc-flow{grid-template-columns:1fr;gap:30px}
  .proc-step{padding:22px 20px 20px}
  /* 세로로 세우면 화살표도 아래를 향한다 */
  .proc-step::after,
  .proc-step:nth-child(3n)::after{
    display:block;top:auto;right:auto;bottom:-22px;left:50%;
    transform:translateX(-50%) rotate(135deg)}
  .proc-step:last-child::after{display:none}
}

/* ============================================================
   사회공헌 추진 체계 도식 (2026-08-07)
   sus_social.html 전용. 비전 → 추진 방향 3 → 세부 활동 → 운영 원칙 순으로
   내려가는 계통도다.

   왼쪽 104px 는 '추진 방향' '운영 원칙' 같은 행 이름표 자리다. 이름표가
   없는 행에도 빈 칸(.sc-side)을 하나씩 넣어야 그리드 자동 배치가 밀리지
   않는다 — 마크업에 빈 div 가 보이는 건 그 때문이다.

   점선은 전부 CSS다. 세로 연결선은 각 상자의 ::before 가 위쪽 여백을
   가로지르고, 갈래(┌─┬─┐)는 .sc-fork 하나가 가로선 + 세로선 3개를 그린다.
   색은 열마다 .c1/.c2/.c3 이 --c 를 정해 두고 알약·머리띠·연결선이 함께 쓴다.
   ============================================================ */
.sc-chart{margin:0 0 56px}
.sc-chart .c1{--c:#C4400A}
.sc-chart .c2{--c:#FA7D21}
.sc-chart .c3{--c:#4A4B50}
.sc-chart-title{
  text-align:center;font-size:26px;font-weight:800;color:var(--gray-900);
  letter-spacing:-.02em;margin:0 0 34px}

.sc-grid{
  display:grid;grid-template-columns:104px repeat(3,1fr);
  column-gap:26px;row-gap:0;align-items:stretch}
/* 행 이름표 — 그 행의 세로 가운데에 맞춘다 */
.sc-side{
  display:flex;align-items:center;justify-content:flex-start;
  font-size:15px;font-weight:800;color:var(--gray-700)}

/* 비전 — 바깥에 연한 테를 한 겹 두른 알약 */
.sc-vision{grid-column:2/5;display:flex;justify-content:center}
.sc-vision-in{
  min-width:min(560px,100%);text-align:center;
  padding:26px 44px;border-radius:999px;background:#fff;
  border:1px solid var(--gray-200);
  box-shadow:0 0 0 12px rgba(250,125,33,.10);
  font-size:19px;font-weight:800;color:var(--gray-900);word-break:keep-all}
.sc-vision-in b{color:var(--brand-main);font-weight:800}

/* 비전에서 갈래로 내려가는 점선 + 화살촉 */
.sc-arrow{grid-column:2/5;position:relative;height:46px;margin-top:12px}
.sc-arrow::before{
  content:'';position:absolute;left:50%;top:0;height:30px;
  border-left:2px dotted var(--gray-400)}
.sc-arrow::after{
  content:'';position:absolute;left:50%;top:28px;width:11px;height:11px;
  border-right:2px solid var(--gray-500);border-bottom:2px solid var(--gray-500);
  transform:translateX(-50%) rotate(45deg)}

/* 갈래 — 가로 점선 하나와 각 열로 내려가는 세로 점선 셋 */
.sc-fork{
  grid-column:2/5;position:relative;height:30px;
  display:grid;grid-template-columns:repeat(3,1fr);column-gap:26px}
.sc-fork::before{
  content:'';position:absolute;top:0;left:16.6%;right:16.6%;
  border-top:2px dotted var(--brand-main)}
.sc-fork > span{position:relative}
.sc-fork > span::after{
  content:'';position:absolute;top:0;bottom:0;left:50%;
  border-left:2px dotted var(--brand-main)}

/* 추진 방향 — 색 알약 */
.sc-pill{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:62px;padding:0 18px;border-radius:999px;
  background:var(--c);color:#fff;font-size:18px;font-weight:800;
  letter-spacing:-.01em;word-break:keep-all}

/* 세부 활동 — 점선 테두리 상자, 위로 연결선이 뻗는다 */
.sc-box{
  position:relative;margin-top:40px;padding:24px 24px 22px;
  border:1.5px dashed var(--gray-300);border-radius:10px;background:#fff}
.sc-box::before{
  content:'';position:absolute;left:50%;top:-40px;height:40px;
  border-left:2px dotted var(--c)}
.sc-box ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sc-box li{
  position:relative;padding-left:13px;
  font-size:15px;line-height:1.7;color:var(--gray-700);word-break:keep-all}
.sc-box li::before{
  content:'';position:absolute;left:0;top:11px;width:4px;height:4px;
  border-radius:50%;background:var(--c)}

/* 운영 원칙 — 색 머리띠가 붙은 상자 */
.sc-card{
  margin-top:30px;border:1.5px dashed var(--gray-300);border-radius:10px;
  background:#fff;overflow:hidden}
.sc-card h5{
  margin:0;padding:15px 18px;background:var(--c);color:#fff;
  font-size:16px;font-weight:800;text-align:center;line-height:1.5;word-break:keep-all}
.sc-card ul{list-style:none;margin:0;padding:20px 22px}
.sc-card li{font-size:14.5px;line-height:1.75;color:var(--gray-600);word-break:keep-all}

@media(max-width:1100px){
  .sc-grid{grid-template-columns:78px repeat(3,1fr);column-gap:16px}
  .sc-fork{column-gap:16px}
  .sc-side{font-size:13.5px}
  .sc-pill{font-size:16px;min-height:56px}
  .sc-vision-in{font-size:17px;padding:22px 30px}
}
/* 좁은 화면에서는 세 갈래가 성립하지 않으므로 한 줄로 세운다.
   행 단위(알약 3 → 상자 3 → 카드 3)로 그냥 쌓으면 어느 상자가 어느 방향에
   딸린 것인지 알 수 없다. order 로 열 단위(알약→상자→카드)로 묶어 준다.
   이름표와 연결선은 세로로 세운 순간 뜻이 없어지므로 감춘다. */
@media(max-width:860px){
  .sc-grid{grid-template-columns:1fr;row-gap:0}
  .sc-side,.sc-arrow,.sc-fork{display:none}
  .sc-vision{grid-column:1}
  .sc-pill.c1{order:1} .sc-box.c1{order:2} .sc-card.c1{order:3}
  .sc-pill.c2{order:4} .sc-box.c2{order:5} .sc-card.c2{order:6}
  .sc-pill.c3{order:7} .sc-box.c3{order:8} .sc-card.c3{order:9}
  .sc-pill{margin-top:34px;min-height:54px;font-size:16px}
  .sc-box{margin-top:14px}
  .sc-box::before{display:none}
  .sc-card{margin-top:14px}
  .sc-vision-in{min-width:0;width:100%;padding:20px 24px;font-size:16.5px;box-shadow:0 0 0 8px rgba(250,125,33,.10)}
}

/* ============================================================
   푸터 개편 (2026-08-07)
   요청: 케이씨인더스트리얼 푸터를 따라 로고 → 본사·천안공장 주소 →
        구분선(밑줄) → 하단에 정책 링크 4개(좌) / 저작권(우) + 위로 올리기 버튼.
   푸터 스타일이 body.modern / body.classic / body.page-recruit 세 갈래로
   갈라져 있어 여기서는 body[class] 로 한 번에 덮어쓴다. 이 블록이 파일
   맨 뒤에 있어야 우선순위가 유지되니 아래에 새 규칙을 덧붙이지 말 것.
   ============================================================ */
body[class] .footer{background:var(--brand-deep);color:rgba(255,255,255,.7);padding:68px 0 0}
/* 2026-08-07: 메뉴 3열을 걷어내고 그 자리에 사업장 정보를 옮겼다.
   이제 왼쪽은 로고·소개, 오른쪽은 본사/천안공장 주소·연락처 두 칸이다. */
body[class] .footer-grid{
  display:grid;grid-template-columns:minmax(280px,1fr) 1.55fr;gap:64px;
  padding-bottom:40px;margin-bottom:0;
  border-bottom:1px solid rgba(255,255,255,.14)}
body[class] .footer-logo{display:block;margin:0 0 18px}
body[class] .footer-logo img{height:38px;width:auto;display:block}
body[class] .footer-brand p{font-size:15px;color:rgba(255,255,255,.72);line-height:1.8;margin:0 0 18px;word-break:keep-all}

/* 본사 · 천안공장 — 라벨에 밑줄을 그어 두 사업장을 구분한다.
   라벨을 왼쪽에 붙이고 그 옆에 주소·전화·팩스를 세로 막대로 이어, 사업장마다
   한 줄씩 딱 두 줄로 끝낸다(라벨을 윗줄에 두면 네 줄이 된다).
   라벨 칸은 '천안공장' 네 글자가 안 깨지는 최소 폭이다. */
.footer-info{display:grid;align-content:start;gap:18px;padding-top:4px}
.footer-addr{margin:0;display:grid;gap:13px}
.footer-addr-row{display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:baseline}
.footer-addr-label{
  justify-self:start;margin:0;padding-bottom:2px;white-space:nowrap;
  font-size:14px;font-weight:700;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.5)}
.footer-addr-text{font-size:15px;line-height:1.8;color:rgba(255,255,255,.66);word-break:keep-all}
/* 전화·팩스 번호는 가운데서 줄이 바뀌면 못 읽는다 */
.footer-nb{white-space:nowrap}
.footer-sep{margin:0 12px;color:rgba(255,255,255,.28)}
.footer-mail{font-size:15px;color:rgba(255,255,255,.66)}

/* 하단 바 — 왼쪽 정책 링크, 오른쪽 저작권 */
body[class] .footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 28px;padding:20px 0 26px;text-align:left;
  font-size:14px;color:rgba(255,255,255,.4)}
.footer-policy{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.footer-policy a{font-size:14px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s}
.footer-policy a:hover{color:#fff;text-decoration:underline}
.footer-policy a.is-strong{color:#fff;font-weight:700}
.footer-copy{margin:0 0 0 auto;font-size:13.5px;color:rgba(255,255,255,.38)}

/* 위로 올리기 버튼 — 스크롤을 조금 내리면 나타난다 (js/main.js 가 .show 를 붙인다) */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:80;
  width:48px;height:48px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:var(--brand-mid);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,visibility .25s,transform .25s,background .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brand-dark)}
.to-top svg{width:20px;height:20px;display:block}

@media(max-width:900px){
  body[class] .footer-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:640px){
  body[class] .footer-grid{gap:28px}
  body[class] .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-copy{margin-left:0}
  /* 폭이 모자라면 주소 뒤 전화·팩스가 알아서 아랫줄로 넘어간다 */
  .footer-addr-row{grid-template-columns:66px 1fr;gap:12px}
  .footer-addr-label{font-size:13.5px}
  .footer-addr-text{font-size:14.5px}
  .footer-sep{margin:0 9px}
  .to-top{right:14px;bottom:14px;width:42px;height:42px}
}

/* ============================================================
   카카오맵 (2026-08-07)
   구글 지도 iframe 자리에 js/kakaomap.js 가 끼워 넣는 지도 상자.
   KAKAO_JS_KEY 가 비어 있으면 .kakao-map 은 아예 생기지 않고
   구글 iframe 이 그대로 남으므로, 아래 규칙은 그때는 아무 일도 안 한다.
   ============================================================ */
body[class] .map-wrap,
body[class] .site-map{position:relative}
body[class] .kakao-map{
  position:absolute;inset:0;width:100%;height:100%;
  background:#F5F5F7}
/* 카카오 로고·저작권 표시가 링크에 가리지 않도록 오른쪽 위에 둔다 */
body[class] .kakao-map-link{
  position:absolute;top:12px;left:12px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:3px;
  background:#FEE500;color:#191600;
  font-size:14px;font-weight:800;text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
body[class] .kakao-map-link:hover{background:#FFD900}
@media(max-width:768px){
  body[class] .kakao-map-link{top:8px;left:8px;padding:6px 11px;font-size:13px}
}

/* ============================================================
   찾아오시는 길 지도 테두리 (2026-08-07)
   요청: 지도에 테두리와 살짝 둥근 모서리. visit.html / contact.html 의
   '찾아오시는 길'은 같은 .site-block 마크업이라 한 규칙으로 함께 걸린다.
   overflow:hidden 이 있어야 안에 든 iframe(또는 카카오 지도)의 네 귀퉁이가
   같이 깎인다. body[class] .site-block 으로 잡아 page-contact 의 옛
   border-radius:3px 규칙보다 뒤에 오게 한다.
   ============================================================ */
body[class] .site-block .map-wrap{
  border:1px solid var(--gray-200);border-radius:8px;overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.05)}