/* =============================================================
   NEOPHARM — editorial-interactive theme (v2)
   Pretendard sans · cool-gray · compact · center tab nav · full width
   ============================================================= */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  --bg:#F4F5F6;--bg2:#EAECEE;--paper:#FFFFFF;--soft:#EDEFF1;
  --ink:#1B1E22;--ink-soft:#5A626B;--sub:#666C75;--line:#DCE0E4;
  --accent:#3B4654;--accent-soft:#6B7686;--dark:#1B1E22;--red:#3B4654;
  --sans:'Pretendard',-apple-system,BlinkMacSystemFont,'Helvetica Neue','Apple SD Gothic Neo',sans-serif;
  --serif:var(--sans);--font:var(--sans);--eng:var(--sans);
  --brand:#3B4654;--brand-dark:#1B1E22;--brand-light:#EDEFF1;--brand-soft:#DCE0E4;
  --black:#1B1E22;--light-gray:#EDEFF1;--white:#FFFFFF;--border-subtle:#E2E5E8;--footer:#1B1E22;
}

*{cursor:none!important}
@media(hover:none){*{cursor:auto!important}}
html{scroll-behavior:smooth}
body{font-family:var(--sans)!important;background:var(--bg)!important;color:var(--ink);font-weight:400;letter-spacing:-.01em;line-height:1.65;font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}

/* === GLOBAL FONT: force Pretendard on every element ===
   Overrides all hard-coded families (Outfit / Noto Sans KR in the header & inline
   styles, Playfair Display via --display on brand pages). None of those use
   !important, so this single universal rule wins everywhere. */
*,*::before,*::after{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Helvetica Neue',sans-serif!important}
::selection{background:var(--ink);color:var(--bg)}

/* NATURAL KOREAN LINE-BREAKING
   Break Korean lines at word (어절) boundaries instead of mid-word, which
   removes the "forced / choppy" wrapping feel. overflow-wrap keeps long
   English words / URLs from overflowing their container. */
body,p,h1,h2,h3,h4,h5,h6,li,dt,dd,td,th,figcaption,blockquote,
.hero-title,.hero-desc,.hero-eyebrow,.sec-title,.section-title,.sec-lead,
.philosophy-title,.philosophy-desc,.join-cta-title,.join-cta-desc,
.sub-banner-txt h1,.brand-hero-content h1,.brand-intro,.brand-intro-text,
.about-text,.desc,.eyebrow,.product-card,.brand-card,.news-card,.vision-card,
.ethics-card,.talent-card,.lab-card,.region-card,.gdji-card,.benefit-box,
.feature-item,.number-card,.loc-card,.bcol-card,.bal-card{
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
}
img{filter:none}

/* CURTAIN */
body:not(.ds-stage) .ds-cover{display:none}
.ds-cover{position:fixed;inset:0;z-index:9800;background:var(--ink);transform:translateY(0);pointer-events:none;display:flex;align-items:center;justify-content:center;will-change:transform}
.ds-cover-word{font-family:var(--sans);font-weight:600;color:var(--bg);font-size:clamp(22px,3.4vw,40px);letter-spacing:.04em;opacity:0;transition:opacity .28s ease}
.ds-cover.is-shown .ds-cover-word{opacity:1}
.ds-cover--out{transition:transform .62s cubic-bezier(.7,0,.2,1);transform:translateY(-101%)}
.ds-cover--in{transition:transform .5s cubic-bezier(.7,0,.2,1);transform:translateY(0)}
.ds-cover--reset{transition:none;transform:translateY(101%)}
/* curved leading/trailing edge for the curtain (dennissnellenberg-style).
   Same-colour caps ride just outside the panel; shown only while sweeping. */
.ds-cover::before,.ds-cover::after{content:"";position:absolute;left:-2%;width:104%;height:8vh;background:var(--ink);pointer-events:none;display:none}
.ds-cover::before{top:0;transform:translateY(-99%);border-radius:50% 50% 0 0/100% 100% 0 0}
.ds-cover::after{bottom:0;transform:translateY(99%);border-radius:0 0 50% 50%/0 0 100% 100%}
.ds-cover--in::before{display:block}   /* incoming: rounded top edge leads up */
.ds-cover--out::after{display:block}   /* revealing: rounded bottom edge trails up */
@media (prefers-reduced-motion:reduce){
  .ds-cover--out,.ds-cover--in{transition-duration:.001s}
  .ds-cover::before,.ds-cover::after{display:none!important}
}
.ds-stage{opacity:0;transition:opacity .6s ease .15s}
.ds-stage.is-ready{opacity:1}

/* CURSOR */
.ds-cursor,.ds-cursor-ring{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.ds-cursor{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%)}
.ds-cursor-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.6);transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s,border-color .3s;display:flex;align-items:center;justify-content:center}
.ds-cursor-ring::after{content:"\2197";font-family:var(--sans);font-size:20px;font-weight:500;line-height:1;color:#fff;opacity:0;transform:scale(.4) rotate(-10deg);transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1)}
.ds-cursor-ring.is-hover{width:52px;height:52px;background:var(--accent);border-color:transparent;mix-blend-mode:normal}
.ds-cursor-ring.is-hover::after{opacity:1;transform:scale(1) rotate(0)}
.ds-cursor.is-hover{opacity:0}
@media(hover:none){.ds-cursor,.ds-cursor-ring{display:none}}

/* HEADER */
body.ds-stage .hd,body.ds-stage .header{position:fixed!important;top:0;left:0;right:0;height:auto!important;background:transparent!important;backdrop-filter:none!important;border:0!important;padding:22px clamp(20px,4vw,52px)!important;z-index:9500}
body.ds-stage .hd-inner,body.ds-stage .header-inner{max-width:none!important;height:auto!important;padding:0!important}
body.ds-stage .hd-nav,body.ds-stage .gnb,body.ds-stage .hd-mega,body.ds-stage .depth2,body.ds-stage .hd-hamburger,body.ds-stage .menu-toggle,body.ds-stage .hd-right a,body.ds-stage .header-right a,body.ds-stage .lang{display:none!important}
body.ds-stage .hd-logo .logo-b,body.ds-stage .header-left img.logo-b{display:none!important}
body.ds-stage .hd-logo .logo-w,body.ds-stage .header-left img.logo-w{display:inline-block!important;height:20px!important;width:auto!important}
body.ds-stage .hd-logo,body.ds-stage .header-left a,body.ds-stage .header-left{position:relative;display:inline-flex;align-items:center}
body.ds-stage .hd-logo::after,body.ds-stage .header-left>a::after{content:none!important;display:none!important}

/* FULLSCREEN MENU */
.ds-menu{position:fixed;inset:0;z-index:9000;background:var(--ink);color:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:120px clamp(20px,5vw,80px) 56px;clip-path:inset(0 0 100% 0);transition:clip-path .85s cubic-bezier(.76,0,.24,1);pointer-events:none}
.ds-menu.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.ds-menu-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.08);transition:opacity .9s ease .15s,transform 1.6s cubic-bezier(.16,1,.3,1) .15s;pointer-events:none}
.ds-menu-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(27,30,34,.82),rgba(27,30,34,.68) 50%,rgba(27,30,34,.88))}
.ds-menu.open .ds-menu-bg{opacity:1;transform:scale(1)}
.ds-menu-list,.ds-menu-foot{position:relative;z-index:1}
.ds-menu-list{list-style:none;margin:0;padding:0;max-width:1100px}
.ds-menu-list li{overflow:hidden}
.ds-menu-link{display:inline-block;font-family:var(--sans);font-weight:600;font-size:clamp(34px,5.6vw,88px);line-height:1.12;letter-spacing:-.03em;color:var(--bg);padding:.05em 0;position:relative;transform:translateY(110%);transition:transform .8s cubic-bezier(.16,1,.3,1),color .3s}
.ds-menu.open .ds-menu-link{transform:translateY(0)}
.ds-menu-link .idx{font-family:var(--sans);font-size:12px;font-weight:500;vertical-align:super;color:var(--accent-soft);margin-right:13px;letter-spacing:.05em}
.ds-menu-link:hover{color:var(--accent-soft)}
.ds-menu-foot{margin-top:auto;padding-top:36px;display:flex;flex-wrap:wrap;gap:30px;font-family:var(--sans);font-size:12px;color:rgba(244,245,246,.55);letter-spacing:.02em}
.ds-menu-foot a{color:rgba(244,245,246,.55)}.ds-menu-foot a:hover{color:var(--bg)}
.ds-menu.open .ds-menu-list li:nth-child(1) .ds-menu-link{transition-delay:.10s}
.ds-menu.open .ds-menu-list li:nth-child(2) .ds-menu-link{transition-delay:.15s}
.ds-menu.open .ds-menu-list li:nth-child(3) .ds-menu-link{transition-delay:.20s}
.ds-menu.open .ds-menu-list li:nth-child(4) .ds-menu-link{transition-delay:.25s}
.ds-menu.open .ds-menu-list li:nth-child(5) .ds-menu-link{transition-delay:.30s}
.ds-menu.open .ds-menu-list li:nth-child(6) .ds-menu-link{transition-delay:.35s}

/* Fullscreen menu: allow scroll + start from top if content is tall
   (Brands now expands to 5 sub-links, so the list can exceed the viewport) */
.ds-menu{overflow-y:auto;justify-content:flex-start}
.ds-menu-list{margin-top:auto;margin-bottom:auto}

/* Brands sub-links shown under the Brands item */
/* [2026-08 디자인팀 피드백] 서브 메뉴 마진: 상위 메뉴 텍스트 시작점에 맞춰 들여쓰기 */
.ds-submenu{list-style:none;margin:6px 0 10px clamp(26px,2.6vw,46px);padding:0;display:flex;flex-wrap:wrap;
  gap:8px 26px;position:relative;z-index:1;max-width:1100px;
  opacity:0;transform:translateY(10px);transition:opacity .5s ease .35s,transform .6s cubic-bezier(.16,1,.3,1) .35s}
.ds-menu.open .ds-submenu{opacity:1;transform:translateY(0)}
.ds-submenu-link{font-family:var(--sans);font-weight:500;font-size:clamp(14px,1.7vw,19px);
  letter-spacing:.01em;color:rgba(244,245,246,.6);transition:color .25s}
.ds-submenu-link:hover{color:var(--accent-soft)}
@media(max-width:768px){
  .ds-menu-link{font-size:clamp(26px,8vw,40px)!important}
  .ds-submenu{gap:6px 18px;margin:4px 0 8px}
  .ds-submenu-link{font-size:14px}
}

/* ============================ MOBILE OPTIMISATION ============================ */
/* The header hamburger has no JS handler — the floating "Menu" trigger is the
   real (and only working) control on mobile. Hide the dead button so the two
   don't sit on top of each other. */
body.ds-stage .hd-hamburger,body.ds-stage #menuBtn{display:none!important}
/* Brand heroes used 100vh → clipped under the iOS Safari toolbar. dvh tracks the
   visible viewport (vh kept as a fallback for older engines). */
.xshero{height:100vh;height:100dvh}
@media(max-width:768px){
  /* iOS zooms the page when focusing an input whose font-size < 16px. Pin to 16. */
  input,select,textarea,.search-input{font-size:16px!important}
}

/* Top scrim behind the difference-blend floating header so the logo,
   Menu trigger and language toggle stay legible over hero media
   (e.g. brand hero videos) on first paint, before any scroll. */
body::after{content:"";position:fixed;top:0;left:0;right:0;height:128px;z-index:8900;
  pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.26) 45%,transparent 100%)}

/* HERO */
.hero-slider{margin-top:0!important;height:100vh!important;height:100dvh!important;background:var(--ink)}
.hero-slide img{opacity:.5!important;filter:grayscale(.35) contrast(1.04)}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,30,34,.38),rgba(27,30,34,.6))}
.hero-overlay{align-items:flex-end!important;padding-bottom:9vh}
.hero-eyebrow{font-family:var(--sans)!important;letter-spacing:.18em!important;text-transform:uppercase;color:rgba(244,245,246,.7)!important;font-weight:500!important;font-size:11px!important;margin-bottom:18px!important}
.hero-title{font-family:var(--sans)!important;font-weight:600!important;font-size:clamp(34px,5.6vw,76px)!important;line-height:1.06!important;letter-spacing:-.035em!important;color:var(--bg)!important}
.hero-title strong{font-weight:700!important}
.hero-desc{color:rgba(244,245,246,.72)!important;font-weight:400;font-size:15px!important;max-width:430px}
.hero-btns{margin-top:28px!important}
.hero-dots{bottom:30px!important}
.hero-dot{background:rgba(244,245,246,.3)!important}.hero-dot.active{background:var(--bg)!important}

/* BUTTONS */
.btn-hero,.btn,.btn-line,.btn-white,.btn-cta,.join-cta-button,.btn-map,.search-btn,.view-all,.read-more{font-family:var(--sans)!important;font-weight:500!important;letter-spacing:.06em!important;text-transform:uppercase;font-size:11px!important;border-radius:999px!important}
.btn-hero{padding:13px 26px!important;border:1px solid rgba(244,245,246,.5)!important;color:var(--bg)!important;background:transparent!important;transition:.4s}
.btn-hero:hover{background:var(--bg)!important;color:var(--ink)!important}
.btn-hero.solid,.join-cta-button{background:var(--bg)!important;border:1px solid var(--bg)!important;color:var(--ink)!important}
.btn-hero.solid:hover,.join-cta-button:hover{background:transparent!important;color:var(--bg)!important;border-color:var(--bg)!important}

/* HEADINGS */
.eyebrow,.philosophy-label,.section-title-small,.eng-label,.t-label,.join-cta-label{font-family:var(--sans)!important;font-weight:600!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--accent)!important;font-size:11px!important}
.sec-title,.section-title,.philosophy-title,.join-cta-title,.cta-join h3,.sub-banner-txt h1,.brand-intro h2,.brand-intro-text h2{font-family:var(--sans)!important;font-weight:700!important;letter-spacing:-.035em!important;line-height:1.08!important;font-size:clamp(26px,3.4vw,46px)!important;color:var(--ink)!important}
.sec-title strong,.section-title strong,.philosophy-title strong,.join-cta-title strong,.cta-join h3 strong,.sub-banner-txt h1 strong,.brand-intro h2 strong{font-weight:700!important;color:var(--ink)!important;font-style:normal}
.sec-dark .sec-title,.sec-dark .sec-title strong,.cta-join h3,.cta-join h3 strong,.philosophy-title,.join-cta-title,.philosophy-title strong,.join-cta-title strong{color:var(--bg)!important}
.sec-lead,.about-text,.desc,.philosophy-desc,.join-cta-desc{font-weight:400!important;color:var(--ink-soft)!important;line-height:1.6;font-size:clamp(15px,1.3vw,18px)!important}
.view-all,.read-more,.more{color:var(--ink)!important;border:0!important;border-bottom:1px solid var(--ink)!important;padding-bottom:3px!important}
.view-all::after{content:" →"}

/* SECTIONS */
.sec{padding:clamp(56px,8vw,108px) 0!important}
.sec-white{background:var(--paper)!important}.sec-light{background:var(--bg)!important}
.sec-dark{background:var(--ink)!important;color:rgba(244,245,246,.78)!important}
.stats-marquee{background:transparent!important;border-color:var(--line)!important}

/* HERO VIDEO (About/Careers) — pull to very top like other heroes */
.hero-video{margin-top:0!important;height:clamp(432px,calc(56vh + 72px),712px)!important}

/* SUB-BANNER */
.sub-banner{margin-top:0!important;height:40vh!important;min-height:300px;background:var(--ink)!important;align-items:flex-end!important}
.sub-banner-img{opacity:.42!important;filter:grayscale(.5) contrast(1.05)}
.sub-banner::after{content:""!important;position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,30,34,.4),rgba(27,30,34,.7))}
.sub-banner-txt{padding-bottom:6vh!important;z-index:2}
.sub-banner-txt small{font-family:var(--sans)!important;letter-spacing:.18em!important;text-transform:uppercase;color:rgba(244,245,246,.7)!important;font-weight:500!important;font-size:11px!important}
.sub-banner-txt h1{color:var(--bg)!important;font-size:clamp(34px,5vw,64px)!important;line-height:1.04!important;font-weight:700!important}
.sub-banner-txt h1 strong{color:var(--bg)!important;font-style:normal;font-weight:700!important}

/* SUB-PAGE LAYOUT: no sidebar, center tab nav, full width */
.page-wrap{display:block!important;max-width:1180px!important;margin:0 auto!important;padding:0 clamp(20px,5vw,56px) 96px!important}
.side{display:none!important}
.pg{min-width:0;width:100%}
.mob-sub{display:block!important;position:sticky;top:72px;z-index:120;background:rgba(244,245,246,.86)!important;backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)!important;margin-bottom:8px}
.mob-sub-inner{display:flex!important;justify-content:center;flex-wrap:wrap;gap:4px;max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,56px)!important;overflow:visible!important}
.mob-sub a{font-family:var(--sans)!important;font-size:14px!important;font-weight:500!important;color:var(--ink-soft)!important;padding:18px 18px!important;border:0!important;border-bottom:2px solid transparent!important;white-space:nowrap;transition:.2s}
.mob-sub a:hover{color:var(--ink)!important}
.mob-sub a.on,.mob-sub a.active{color:var(--ink)!important;font-weight:600!important;border-bottom-color:var(--ink)!important}
.page-wrap .sec{padding:clamp(30px,3.5vw,48px) 0!important;border-top:1px solid var(--line)}
.page-wrap .sec:first-child{padding-top:clamp(40px,5vw,64px)!important;border-top:0}
.page-wrap .sec-head{margin-bottom:36px!important}

/* GRIDS */
.product-grid{grid-template-columns:repeat(3,1fr)!important;gap:28px!important}
.vision-grid,.ethics-grid,.safety-grid,.lab-grid,.talent-grid,.benefit-grid,.gdji-grid,.region-grid{gap:24px!important}
.bcol-grid{display:grid;grid-template-columns:1fr 1fr;gap:0!important}
.bal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0!important}
.brand-intro{gap:clamp(32px,5vw,72px)!important;align-items:center}

/* CARDS */
.brand-card,.product-card,.brand-img,.rnd-img,.lab-card,.news-card,.vision-card,.ethics-card,.talent-card,.region-card,.gdji-card,.benefit-box,.feature-item,.number-card,.loc-card,.milestone,.mle-box,.mle-step{border-radius:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.product-card img,.brand-card img{border-radius:0!important;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.product-card{overflow:hidden}
.product-card:hover img,.brand-card:hover img{transform:scale(1.05)}
.brand-card-overlay{background:linear-gradient(transparent,rgba(27,30,34,.62))!important}
.brand-card h4,.product-card h4,.p-info h4,.brand-info h3{font-family:var(--sans)!important;font-weight:600!important;letter-spacing:-.01em!important;font-size:17px!important;color:var(--ink)!important}
.p-info p,.product-card p{color:var(--ink-soft)!important;font-size:14px!important}
.news-card,.vision-card,.ethics-card,.talent-card,.lab-card,.region-card,.gdji-card,.benefit-box,.feature-item,.number-card,.loc-card{border-top:1px solid var(--line)!important;padding-top:24px!important}
.vision-card h4,.ethics-card h4,.talent-card h4,.lab-card h4,.region-card h4,.gdji-card h4,.benefit-box h4,.feature-item h4,.news-card h4,.news-title{font-family:var(--sans)!important;font-weight:600!important;font-size:18px!important;color:var(--ink)!important;letter-spacing:-.01em}
.e-num,.s-num,.f-num,.list-count,.m-year,.r-num{font-family:var(--sans)!important;color:var(--accent)!important;font-weight:600!important}

/* brand story/balance blocks */
.bcol-card,.bal-card{background:transparent!important;border:0!important;border-left:1px solid var(--line)!important;border-radius:0!important;padding:0 0 0 28px!important;margin-left:-1px}
.bcol-card:hover,.bal-card:hover{transform:none!important;box-shadow:none!important}
.bcol-card h4,.bal-card h4{font-family:var(--sans)!important;font-weight:600!important;font-size:19px!important;color:var(--ink)!important;letter-spacing:-.01em;margin-bottom:10px}
.bcol-card p,.bal-card p{color:var(--ink-soft)!important;font-size:15px!important}
.bcol-label{font-family:var(--sans)!important;letter-spacing:.1em!important;text-transform:uppercase;color:var(--accent)!important;font-size:11px!important;font-weight:600!important;display:inline-block;margin-bottom:10px}

/* brand intro */
.brand-intro-text h3{font-family:var(--sans)!important;font-weight:700!important;font-size:clamp(20px,2.4vw,30px)!important;letter-spacing:-.03em;color:var(--ink)!important;margin-bottom:14px}
.brand-intro-text p{font-size:16px!important;color:var(--ink-soft)!important;line-height:1.65!important}

/* stats */
.stat-val,.stat-num,.number-card .num,.f-num{font-family:var(--sans)!important;font-weight:700!important;color:var(--ink)!important;letter-spacing:-.03em}
.stat-lbl,.stat-label{font-family:var(--sans)!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--sub)!important;font-size:11px!important}

/* tables / timeline */
.info-table,.brand-table,table{border-color:var(--line)!important}
.info-table th,.brand-table th,table th{font-family:var(--sans)!important;font-weight:600!important;color:var(--ink)!important;background:var(--soft)!important}
.info-table td,.brand-table td,table td{color:var(--ink-soft)!important;border-color:var(--line)!important}
.tl-era-label,.tl-year,.m-year{font-family:var(--sans)!important;color:var(--accent)!important;font-weight:600!important}
.tl-content h5,.milestone h5{font-family:var(--sans)!important;font-weight:600!important;color:var(--ink)!important}
.tl-item::before,.timeline::before{background:var(--accent)!important}

/* CTA / dark */
.cta-join,.join-cta{background:var(--ink)!important}
.cta-join p,.join-cta-desc{color:rgba(244,245,246,.55)!important}
.btn-cta{border:1px solid rgba(244,245,246,.5)!important;color:var(--bg)!important}
.btn-cta:hover{background:var(--bg)!important;color:var(--ink)!important}

/* search */
.search-input{border:1px solid var(--line)!important;background:var(--paper)!important;border-radius:0!important;font-family:var(--sans)!important}
.search-btn{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--bg)!important}
.search-btn:hover{background:var(--accent)!important;border-color:var(--accent)!important}

/* FOOTER */
footer,.footer{background:var(--ink)!important;color:rgba(244,245,246,.5)!important;border:0!important}
.ft-top img{display:inline-block!important;height:26px!important;width:auto!important}
.ft-top{position:relative}
.ft-top::after{content:none!important;display:none!important}
.ft-desc,.footer-address{color:rgba(244,245,246,.58)!important}
.ft-grid,.footer-menu{border-color:rgba(244,245,246,.12)!important}
.ft-grid h4,.gnb-title,.footer-menu h4{font-family:var(--sans)!important;letter-spacing:.13em!important;text-transform:uppercase;color:rgba(244,245,246,.72)!important;font-size:11px!important;font-weight:600!important}
.ft-grid a,.footer-menu a{color:rgba(244,245,246,.5)!important;font-family:var(--sans)!important;font-size:14px!important;font-weight:400}
.ft-grid a:hover,.footer-menu a:hover{color:var(--bg)!important}
.ft-bottom a,.ft-bottom a.privacy{color:rgba(244,245,246,.5)!important}
.ft-corp,.ft-copy{color:rgba(244,245,246,.55)!important}
.ft-bottom span{color:rgba(244,245,246,.5)!important}

/* tels brand-hero */
.brand-hero{margin-top:0!important;min-height:64vh!important;background:var(--ink)!important}
.brand-hero::after{content:""!important;position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,30,34,.35),rgba(27,30,34,.65))}
.brand-hero::before{display:none!important}
.brand-hero-content .brand-label{color:rgba(244,245,246,.7)!important;letter-spacing:.16em!important;text-transform:uppercase;font-weight:500!important;font-size:11px!important}
.brand-hero-content h1{font-family:var(--sans)!important;color:var(--bg)!important;font-weight:700!important;font-size:clamp(36px,5.2vw,68px)!important;letter-spacing:-.035em!important;line-height:1.05!important}
.brand-hero-content h1 strong{color:var(--bg)!important;font-style:normal;font-weight:700!important}
.brand-hero-content .hero-def,.brand-hero-content p{color:rgba(244,245,246,.75)!important}

/* REVEALS */
.ds-reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.ds-reveal.in{opacity:1;transform:none}
.ds-mask{clip-path:inset(0 -10% 102% -10%);transition:clip-path .8s cubic-bezier(.16,1,.3,1)}
.ds-mask.in{clip-path:inset(0 -10% -10% -10%)}
.fade-up{opacity:1!important;transform:none!important}

/* Floating header items (injected by ds.js) — optically center against the logo */
/* 로고 박스(헤더 padding 22px + 로고 20px)와 같은 높이·위치로 맞춰 세로 중앙 정렬 */
.ds-menu-trigger,.ds-lang-switch{top:22px!important;height:20px!important;padding:0!important;line-height:1!important;display:flex!important;align-items:center!important}

/* Tablet: sticky sub-tabs duck under the floating header text */
@media(max-width:1024px){
  .mob-sub{top:72px}
}

@media(max-width:768px){
  /* frosted strip behind the floating header — scrolling text blurs out
     underneath it instead of visually colliding with the logo/menu */
  body::before{content:"";position:fixed;top:0;left:0;right:0;height:72px;z-index:9400;pointer-events:none;
    backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
    mask-image:linear-gradient(180deg,#000 55%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent)}
  /* 로고는 모바일에서도 22px 위치(body.ds-stage .hd padding 22px)에 놓이므로 top은 데스크톱 값(22px)을 그대로 쓰고 글자 크기만 통일 */
  .ds-menu-trigger,.ds-lang-switch{font-size:14px!important}
  .ds-menu{padding:92px 22px 36px}
  /* sticky sub-tabs stick BELOW the floating header so the two never overlap */
  .mob-sub{top:60px}
  /* 5+ tabs: keep ONE line — horizontal swipe instead of wrapping */
  .mob-sub-inner{justify-content:flex-start;flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mob-sub-inner::-webkit-scrollbar{display:none}
  .mob-sub a{flex:0 0 auto;padding:15px 12px!important;font-size:13px!important}
  /* center when they fit, scroll when they overflow */
  .mob-sub-inner>a:first-child{margin-left:auto}
  .mob-sub-inner>a:last-child{margin-right:auto}
  .product-grid{grid-template-columns:1fr 1fr!important}
  .bcol-grid,.bal-grid{grid-template-columns:1fr!important}
  .bcol-card,.bal-card{border-left:0!important;border-top:1px solid var(--line)!important;padding:24px 0 0 0!important;margin:0}
}

/* =============================================================
   MERGED-PAGE NORMALIZER — bring boxed cards from merged sources
   (recruit-guide / global / location / financial / ir) into the
   flat hairline ds aesthetic.
   ============================================================= */
.merge-block .step,.merge-block .type-card,.merge-block .region-card,
.merge-block .loc-card,.merge-block .lg-hq,.merge-block .lg-export,
.merge-block .gdji-card,.merge-block .doc-card,.merge-block .process .step{
  background:transparent!important;border-radius:0!important;
}
.merge-block .type-card,.merge-block .gdji-card,.merge-block .doc-card,
.merge-block .lg-hq,.merge-block .lg-export{
  border:0!important;border-top:1px solid var(--line)!important;padding-left:0!important;padding-right:0!important;
}
.merge-block .process{border:1px solid var(--line)!important}
.merge-block .step{border-color:var(--line)!important}
.merge-block .step-num{font-family:var(--sans)!important;color:var(--accent)!important;font-weight:700!important}
.merge-block .loc-tabs{border-bottom:1px solid var(--line)!important}
.merge-block .loc-tab{font-family:var(--sans)!important;color:var(--ink-soft)!important;border-radius:0!important}
.merge-block .loc-tab.active,.merge-block .loc-tab.on{color:var(--ink)!important;border-color:var(--ink)!important;background:transparent!important}
.merge-block .map-wrap{background:var(--ink)!important;border-radius:0!important}
.merge-block .region-card{border-top:1px solid var(--line)!important;padding-top:22px!important}
.merge-block .r-label,.merge-block .region-tags span{color:var(--ink-soft)!important}

/* =============================================================
   NEWS&IR — two-row centered tab nav (group tabs + sub tabs)
   Scoped: only when .ds-tabrow rows exist (News pages). Other
   pages keep the normal single horizontal row.
   ============================================================= */
.mob-sub-inner.news-nav{flex-direction:column!important;align-items:center;gap:0!important;padding-top:0!important;padding-bottom:0!important}
.ds-tabrow{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;width:100%}
.ds-tabrow-top a{font-family:var(--sans)!important;font-size:14px!important;font-weight:500!important;color:var(--ink-soft)!important;padding:18px 18px!important;border:0!important;border-bottom:2px solid transparent!important;white-space:nowrap;transition:.2s}
.ds-tabrow-top a:hover{color:var(--ink)!important}
.ds-tabrow-top a.on{color:var(--ink)!important;font-weight:600!important;border-bottom-color:var(--ink)!important}
.ds-tabrow-sub{border-top:1px solid var(--line);padding:10px 0 12px}
.ds-tabrow-sub a{font-family:var(--sans)!important;font-size:13px!important;font-weight:500!important;color:var(--sub)!important;padding:6px 14px!important;border:1px solid var(--line)!important;border-radius:999px!important;margin:0 3px;transition:.2s}
.ds-tabrow-sub a:hover{color:var(--ink)!important;border-color:var(--ink-soft)!important}
.ds-tabrow-sub a.on{color:var(--paper)!important;background:var(--ink)!important;border-color:var(--ink)!important}

/* anchored sections must clear the sticky tab bar when scrolled to */
.merge-block{scroll-margin-top:120px}
#top{scroll-margin-top:0}

/* =============================================================
   LANGUAGE TOGGLE — injected by ds.js on every page, sits just
   left of the Menu trigger. Inherits the header's difference blend.
   ============================================================= */
.ds-lang-switch{transition:opacity .3s}
.ds-lang-switch:hover{opacity:.55}
.ds-lang-switch::after{content:"";position:absolute;right:-18px;top:50%;transform:translateY(-50%);width:1px;height:12px;background:#fff;opacity:.4}

/* =============================================================
   MOBILE — News&IR two-row tab nav: keep each row on ONE line,
   horizontal swipe on overflow. (Placed last so it wins over the
   .ds-tabrow base rules above.)
   ============================================================= */
@media(max-width:768px){
  .mob-sub-inner.news-nav{overflow:visible!important}
  .ds-tabrow{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ds-tabrow::-webkit-scrollbar{display:none}
  .ds-tabrow a{flex:0 0 auto}
  .ds-tabrow-top a{padding:15px 12px!important;font-size:13px!important}
  /* center when they fit, scroll when they overflow */
  .ds-tabrow>a:first-child{margin-left:auto}
  .ds-tabrow>a:last-child{margin-right:auto}
}

/* timeline */ .tl-content h3,.milestone h3{font-family:var(--sans)!important;font-weight:600!important;color:var(--ink)!important}
/* === heading demotion compat (h4→h3, h5→h4) === */
/* NATURAL KOREAN LINE-BREAKING
   Break Korean lines at word (어절) boundaries instead of mid-word, which
   removes the "forced / choppy" wrapping feel. overflow-wrap keeps long
   English words / URLs from overflowing their container. */
body,p,h1,h2,h3,h3,h4,h6,li,dt,dd,td,th,figcaption,blockquote,
.hero-title,.hero-desc,.hero-eyebrow,.sec-title,.section-title,.sec-lead,
.philosophy-title,.philosophy-desc,.join-cta-title,.join-cta-desc,
.sub-banner-txt h1,.brand-hero-content h1,.brand-intro,.brand-intro-text,
.about-text,.desc,.eyebrow,.product-card,.brand-card,.news-card,.vision-card,
.ethics-card,.talent-card,.lab-card,.region-card,.gdji-card,.benefit-box,
.feature-item,.number-card,.loc-card,.bcol-card,.bal-card{
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
}
.brand-card h3,.product-card h3,.p-info h3,.brand-info h3{font-family:var(--sans)!important;font-weight:600!important;letter-spacing:-.01em!important;font-size:17px!important;color:var(--ink)!important}
.vision-card h3,.ethics-card h3,.talent-card h3,.lab-card h3,.region-card h3,.gdji-card h3,.benefit-box h3,.feature-item h3,.news-card h3,.news-title{font-family:var(--sans)!important;font-weight:600!important;font-size:18px!important;color:var(--ink)!important;letter-spacing:-.01em}
.bcol-card h3,.bal-card h3{font-family:var(--sans)!important;font-weight:600!important;font-size:19px!important;color:var(--ink)!important;letter-spacing:-.01em;margin-bottom:10px}
.tl-content h4,.milestone h4{font-family:var(--sans)!important;font-weight:600!important;color:var(--ink)!important}
.ft-grid h3,.gnb-title,.footer-menu h3{font-family:var(--sans)!important;letter-spacing:.13em!important;text-transform:uppercase;color:var(--accent-soft)!important;font-size:11px!important;font-weight:600!important}

/* ==========================================================================
   [수정] 히어로 영역 텍스트 화면 정중앙 정렬 — 전 페이지 공통
   메인(.hero-overlay) / 브랜드(.xshero) / company·recruit(.hero-video) / 서브배너(.sub-banner)
   ========================================================================== */
/* 메인 히어로 */
.hero-overlay{align-items:center!important;justify-content:center!important;padding-bottom:0!important}
.hero-overlay .hero-text{max-width:760px!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}
.hero-overlay .hero-desc{margin-left:auto!important;margin-right:auto!important}
.hero-overlay .hero-btns{justify-content:center!important}
/* 브랜드 히어로 (.xshero) — 이미 가운데 정렬이나 위로 밀린 transform 제거해 정중앙 */
.xshero-content{transform:none!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.xshero-content p{margin-left:auto!important;margin-right:auto!important}
/* company · recruit 히어로 (.hero-video) */
.hero-video__txt{justify-content:center!important;align-items:center!important;text-align:center!important;padding-bottom:0!important}
/* 서브배너 (.sub-banner) */
.sub-banner{align-items:center!important}
.sub-banner-txt{text-align:center!important;padding-bottom:0!important}

/* ============ [2026-08 디자인팀 피드백] 공통 반영 ============ */
/* 풋터: 메뉴 타이틀 색상 흰색 */
footer .ft-grid h3{color:#fff!important}

/* ===== APR 스타일 라운드 버튼 (2026-08-28) ===== */
.btn-brand,.join-btn{border-radius:999px!important}
.paging a,.paging span.cur{border-radius:999px!important}
.chart-tabs button{border-radius:999px!important}
.n-files a{border-radius:999px!important;min-width:24px!important}
.nlb button{border-radius:999px!important}
.merge-block .loc-tab{border-radius:999px!important}
/* ===== v2 로고: 히어로를 지나 밝은 헤더가 되면 검은 로고 표시 (2026-08-28) ===== */
body.ds-stage.past-hero .hd-logo .logo-b,body.ds-stage.past-hero .header-left img.logo-b{display:inline-block!important;height:20px!important;width:auto!important}
body.ds-stage.past-hero .hd-logo .logo-w,body.ds-stage.past-hero .header-left img.logo-w{display:none!important}
/* 밑줄형 텍스트 링크는 라운딩 제외 (바로가기 류) */
.view-all,.read-more,.more{border-radius:0!important}
/* ===== PRELOADER — 네오팜 로고 로딩 화면 (2026-08-28) ===== */
.ds-preload{position:fixed;inset:0;z-index:11000;background:var(--ink,#1B1E22);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .35s ease,visibility .35s}
.ds-preload.is-done{opacity:0;visibility:hidden}
.ds-preload-logo{display:grid;grid-template-columns:26px 26px;grid-template-rows:26px 26px;gap:6px}
.ds-preload-logo i{background:#E30613;border-radius:40%;animation:dsPetal 1.2s ease-in-out infinite}
.ds-preload-logo i:nth-child(2){animation-delay:.15s}
.ds-preload-logo i:nth-child(4){animation-delay:.3s}
.ds-preload-logo i:nth-child(3){animation-delay:.45s}
@keyframes dsPetal{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.55}}
.ds-preload-word{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.42em;text-indent:.42em;color:rgba(244,245,246,.85)}
.ds-preload-bar{width:180px;height:2px;background:rgba(244,245,246,.15);border-radius:999px;overflow:hidden}
.ds-preload-bar b{display:block;height:100%;width:0;background:#E30613;border-radius:999px;transition:width .3s ease}
@media(prefers-reduced-motion:reduce){.ds-preload-logo i{animation:none}}
/* ===== 풀스크린 메뉴 열림 시: 다크 오버레이 위 흰 로고 표시 (2026-08-28) ===== */
body.ds-stage.ds-menu-open .hd-logo .logo-b,body.ds-stage.ds-menu-open .header-left img.logo-b{display:none!important}
body.ds-stage.ds-menu-open .hd-logo .logo-w,body.ds-stage.ds-menu-open .header-left img.logo-w{display:inline-block!important;height:20px!important;width:auto!important}
/* ===== 다크 배경 섹션의 영문 라벨(eyebrow) 가독성 — 밝은 브랜드 레드 (2026-08-29) ===== */
.sec-dark .eyebrow,.sci .eyebrow,.xsdark .eyebrow,.sec-dark .xseyebrow,.xsdark .xseyebrow{color:#A6ADB8!important}
/* ===== 풀스크린 메뉴: 낮은 뷰포트에서 스크롤 방지 (높이 기준 축소, 2026-08-29) ===== */
@media(max-height:1160px){
  .ds-menu{padding:92px clamp(20px,5vw,80px) 32px}
  .ds-menu-link{font-size:clamp(32px,5.2vw,84px)}
  .ds-menu-foot{padding-top:22px}
  .ds-submenu{margin:4px 0 8px clamp(26px,2.6vw,46px)}
}
@media(max-height:960px){
  .ds-menu{padding:84px clamp(20px,5vw,80px) 24px}
  .ds-menu-link{font-size:clamp(30px,4.6vw,72px)}
  .ds-submenu-link{font-size:clamp(13px,1.6vw,17px)}
  .ds-menu-foot{padding-top:16px;font-size:11px}
}
@media(max-height:820px){
  .ds-menu-link{font-size:clamp(26px,3.8vw,54px)}
  .ds-submenu{margin:2px 0 6px clamp(26px,2.6vw,46px)}
}
/* 메뉴 배경 확대 연출이 스크롤 영역을 만들지 않도록 fixed 처리 (닫힘 상태는 opacity:0로 가려짐) */
.ds-menu-bg{position:fixed}
/* ===== prefers-reduced-motion: 모든 CSS 애니메이션/전환 중지 (2026-09-01) ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}