/* =========================================================================
   SAMJIN — design system
   ========================================================================= */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  /* brand — dark surfaces are neutral charcoal; blue/cyan kept only as accents */
  --ink:      #1a1d25;
  --navy:     #232733;
  /* brand accent — a muted steel blue, not the electric royal blue (S84→S46). The calmer
     tone keeps the interface confident and industrial across links, eyebrows, chips
     and section accents. */
  --brand:    #35568e;
  /* primary-button tokens — neutral high-contrast, no saturated blue glow. Buttons on
     dark bands use the ivory fill, buttons on light sections use the ink fill.
     One height across the whole site. */
  --btn-h:    52px;
  --btn-ivory:  #efece6; --btn-ivory-h:#ffffff;
  --btn-ink:    #1c2028; --btn-ink-h:  #2b313c;
  --brand-050:#eef1f6;
  --brand-100:#dbe3ef;
  --brand-600:#2a4675;
  --brand-700:#223a63;
  --cyan:     #00b4d8;
  --grad:     linear-gradient(120deg, #35568e 0%, #4a89b8 100%);
  --grad-ink: linear-gradient(135deg, #1c1f29 0%, #15171f 55%, #0e0f15 100%);

  /* neutrals (cool gray, no navy tint) */
  --c0:#ffffff; --c50:#f6f7f9; --c100:#eef0f3; --c200:#e3e6ea;
  --c300:#cdd1d8; --c400:#9aa0ab; --c500:#6c7280; --c600:#4a4f5b;
  --c700:#343943; --c800:#23262e; --c900:#16181f;

  --text:#191b22; --muted:#5d626d; --line:#e6e8ec;

  /* type */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* radius + shadow */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  /* layered elevation ramps (natural light falloff) — reads premium vs a single blurry drop */
  --sh-xs:0 1px 1px rgba(16,33,58,.05), 0 2px 4px -1px rgba(16,33,58,.05);
  --sh-sm:0 1px 1px rgba(16,33,58,.05), 0 2px 4px -.5px rgba(16,33,58,.05), 0 4px 8px -2px rgba(16,33,58,.05);
  --sh:0 1px 1px -.5px rgba(16,33,58,.05), 0 3px 5px -1.5px rgba(16,33,58,.06), 0 8px 11px -4px rgba(16,33,58,.06), 0 17px 22px -8px rgba(16,33,58,.05);
  --sh-md:0 1px 1px -.5px rgba(16,33,58,.06), 0 4px 6px -2px rgba(16,33,58,.07), 0 10px 15px -5px rgba(16,33,58,.07), 0 24px 30px -12px rgba(16,33,58,.08);
  --sh-lg:0 2px 4px -1px rgba(16,33,58,.07), 0 8px 16px -4px rgba(16,33,58,.09), 0 22px 34px -10px rgba(16,33,58,.11), 0 44px 64px -22px rgba(13,28,56,.15);

  /* layout */
  --container:1200px;
  --header-h:76px;
  --header-safe-h:calc(var(--header-h) + env(safe-area-inset-top, 0px));
  --subnav-h:61px;   /* sticky sub-tab bar; sticky elements below must clear header + this */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* spacing scale — 8px base, 4 as the only half-step */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-14:56px; --sp-16:64px; --sp-18:72px;

  /* type scale (~1.25 modular) */
  --fs-xs:12px; --fs-sm:13.5px; --fs-base:15.5px; --fs-md:17px; --fs-lg:20px;
  --fs-h4:clamp(18px,1.6vw,22px); --fs-h3:clamp(22px,2.2vw,29px);
  --fs-h2:clamp(28px,3.4vw,44px); --fs-h1:clamp(32px,4.4vw,56px); --fs-display:clamp(38px,5vw,64px);
  /* uppercase micro-label (Latin) — one size / weight / tracking */
  --fs-eyebrow:12px; --fw-eyebrow:700; --ls-eyebrow:.16em;

  /* cyan accent scale (on-dark highlights) — one hue, five deliberate steps */
  --cyan-100:#d9f6ff; --cyan-200:#bfeffc; --cyan-300:#9fe7f6; --cyan-400:#7fd7ee; --cyan-500:#00b4d8;

  /* hairline dividers, readable meta text (AA), neutral dark surfaces */
  --hair:#e6e8ec; --hair-strong:#cdd1d8; --meta:#6c7280;
  --ink-950:#0d0f15; --ink-1000:#171a21;

  /* one product-media surface — soft studio vignette (white where the product sits), framed by a hairline; no multiply hack */
  --surface-media:radial-gradient(125% 125% at 30% 18%, #ffffff 0%, #eaeef3 100%);

  /* motion scale — three durations, all bound to --ease; two hover-lift depths */
  --t-fast:.15s; --t:.22s; --t-slow:.4s; --lift:-4px; --lift-lg:-6px;
}

/* --------------------------------------------------------------- reset --- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body {
  font-family:var(--font); color:var(--text); background:var(--c0);
  line-height:1.65; font-size:16px; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing:-.01em; word-break:keep-all; overflow-wrap:break-word;
  overflow-x:clip;
}
img,svg,video { display:block; max-width:100%; height:auto; }
/* ---- Korean typography baseline (shared system; see body word-break/overflow-wrap above)
   headings balance so a title never strands its last word on a line of its own;
   body text uses pretty so paragraphs avoid orphan lines. Both are progressive —
   browsers without support just wrap normally. */
/* pretty (not balance): balance equalises lines and breaks Korean sentences at odd mid-phrase
   points (CEO 2026-07-21, 줄바꿈 지적 다수) — pretty fills lines naturally, only avoids orphans. */
h1,h2,h3,h4 { text-wrap:pretty; }
p, dd, figcaption { text-wrap:pretty; }
/* text-wrap is inherited — declare the default once on the root rather than enumerating tags.
   Enumerating always misses something (the footer identity line is a <div>). Headings override
   to balance above; single-line UI (nav, buttons, stats) is unaffected either way. */
body { text-wrap:pretty; }
/* 🚨 다크 페이지의 body 배경 — 이게 없으면 내용이 짧은 페이지에서 푸터 아래로 흰 바탕이 드러난다.
   실측(2026-08-03): /email-policy 는 본문 452px + 푸터 385px = 837px 라 1440×900 에서 아래 140px 이
   흰색이었다. 다른 다크 페이지는 길어서 증상이 안 보였을 뿐 원인은 같다.
   푸터와 같은 색(--ink)으로 채워 페이지가 아래로 이어져 보이게 한다. */
body.is-dark, body.is-home { background:var(--ink); }
/* 내용이 짧은 페이지(/email-policy 등)에서 푸터가 화면 중간에 떠 보이지 않도록,
   본문을 최소한 뷰포트에서 헤더를 뺀 높이만큼 잡아 푸터를 바닥으로 민다. */
body.is-dark { display:flex; flex-direction:column; min-height:100svh; }
body.is-dark > main { flex:1 0 auto; }
body.is-dark > footer { flex:none; }
/* numbers must never split from their unit, and a product/model code must never break
   mid-token — both read as broken text in Korean copy. */
.num,.hc-stat .num,.rnd-stats b,.pbn-cell b,.nums b,.stat-v,.cl-item .clv { white-space:nowrap; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
ul,ol { list-style:none; padding:0; }
h1,h2,h3,h4,h5 { line-height:1.2; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
:focus-visible { outline:3px solid color-mix(in srgb, var(--brand) 55%, white); outline-offset:2px; border-radius:4px; }

/* --------------------------------------------------------- helpers --- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
/* architectural container rails — faint vertical guides at the content column edges */
.section { padding:clamp(76px,9vw,150px) 0; }
.section--tight { padding:clamp(52px,6vw,90px) 0; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:var(--fs-eyebrow); font-weight:var(--fw-eyebrow);
  letter-spacing:.01em; color:var(--brand); margin-bottom:var(--sp-5); }
/* Latin labels get the mono/uppercase/wide-tracked treatment; Korean stays in Pretendard at near-zero tracking */
.eyebrow:lang(en) { font-family:var(--font-mono); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; }
.eyebrow::before { content:""; width:22px; height:1px; background:currentColor; opacity:.5; }
.section-head { max-width:800px; margin-bottom:clamp(32px,4vw,52px); }
.section-head h2 { font-size:clamp(26px,3.1vw,40px); line-height:1.12; letter-spacing:-.032em; font-weight:800; }
.section-head p { margin-top:16px; color:var(--muted); font-size:clamp(15.5px,1.35vw,17.5px); line-height:1.65; }
.lead { font-size:clamp(17px,1.5vw,20px); color:var(--c700); line-height:1.75; }
.muted { color:var(--muted); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* dark cinematic photo backgrounds (capabilities-style) for these home sections */
.photobg { position:relative; overflow:hidden; background:var(--grad-ink); color:#fff; isolation:isolate; }
.photobg > .container { position:relative; z-index:1; }
.photobg-img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center; filter:grayscale(.2) brightness(.56) contrast(1.04); }
.photobg-scrim { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(17,20,30,.72) 0%, rgba(17,20,30,.5) 46%, rgba(17,20,30,.36) 100%),
    radial-gradient(120% 90% at 15% 15%, rgba(26,167,214,.14), transparent 55%); }
/* Mobile: the section backgrounds are PC-wide (2.5:1). Cover-filling a tall narrow section zooms into one
   strip ("특정 부분만 크게"). Instead, show the WHOLE image at natural aspect as a top banner, then fade it
   into the section's solid dark base so stacked content reads on clean dark below. */
@media (max-width:640px){
  .photobg-img, .esg-bg, .cpx-bg{ top:0; bottom:auto; height:auto; object-fit:contain; }
  .photobg-img{ filter:grayscale(.18) brightness(.66) contrast(1.03); }
  .section--products .photobg-img{ filter:grayscale(.22) brightness(.6) contrast(1.04); transform:none; }
  .cpx-bg, .cpx-bg--campaign{ filter:saturate(.85) brightness(.66); object-position:center top; }
  .esg-bg{ filter:brightness(.72) saturate(.95); }
  .photobg-scrim{ background:linear-gradient(180deg, rgba(17,20,30,.42) 0%, rgba(17,20,30,.74) 44%, rgb(16,19,28) 70%); }
  .esg-scrim{ background:linear-gradient(180deg, rgba(21,28,44,.42) 0%, rgba(21,28,44,.76) 44%, rgb(21,28,44) 70%) !important; }
  .cpx-scrim{ background:linear-gradient(180deg, rgba(16,20,30,.44) 0%, rgba(16,20,30,.78) 46%, rgb(22,27,38) 72%); }
}
/* light content on the dark photo sections */
.photobg .section-head h2, .photobg h2, .photobg h3 { color:#fff; text-shadow:0 2px 18px rgba(6,9,14,.55); }
.photobg .section-head p, .photobg .lead { color:rgba(255,255,255,.86); text-shadow:0 1px 12px rgba(6,9,14,.5); }
.photobg .eyebrow { color:#7fd7ee; text-shadow:0 1px 10px rgba(6,9,14,.5); }
/* secondary text over photos (labels, meta, list values) — keep legible on brighter spots */
.photobg dt, .photobg .meta, .photobg small, .photobg li, .photobg .muted { text-shadow:0 1px 8px rgba(6,9,14,.5); }
.photobg .eyebrow::before { background:#7fd7ee; }
/* intro feature cards: subtle border for separation on the dark bg */
.section--intro .feature-card { border:1px solid rgba(255,255,255,.12); }
/* products: light unified card (gray tile = product-photo gray, so no 'double box'); dark text kept */
/* light section variant — breaks the run of dark home bands (used by R&D + Products) */
.section--light { background:var(--c50); }

/* top scroll-progress bar — thin gradient line reflecting page scroll (JS sets scaleX) */
.scroll-prog { position:fixed; top:0; left:0; width:100%; height:3px; z-index:200; background:var(--grad);
  transform:scaleX(0); transform-origin:0 50%; will-change:transform; }

/* Home capability-to-product editorial instrument: theme 1 stays dark end to end. */
.capability-showcase{position:relative;background:#161b26;color:#fff;overflow:hidden;isolation:isolate}
.cpx-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;filter:saturate(.68) contrast(1.08)}
.cpx-bg--campaign{object-position:center right;filter:saturate(.82) contrast(1.08) brightness(.82)}
.cpx-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(15,18,27,.8) 0%,rgba(16,20,30,.64) 48%,rgba(16,20,30,.5) 100%),linear-gradient(180deg,rgba(15,18,27,.4),rgba(15,18,27,.74))}
.capability-showcase>.container{position:relative;z-index:1}
.capability-showcase .section-head h2{color:#fff}.capability-showcase .section-head p{color:rgba(255,255,255,.78)}.capability-showcase .eyebrow{color:#7fd7ee}.capability-showcase .eyebrow::before{background:#7fd7ee}
.cpx{display:block;border-top:1px solid rgba(255,255,255,.34);border-bottom:1px solid rgba(255,255,255,.14);background:transparent}
.cpx-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(255,255,255,.14)}
.cpx-tabs button{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;min-height:70px;padding:14px 18px;text-align:left;border-right:1px solid rgba(255,255,255,.11);color:rgba(255,255,255,.74);font-size:15px;font-weight:700;line-height:1.35;transition:color .2s,box-shadow .2s}
.cpx-tabs button:last-child{border-right:0}
.cpx-tabs button>span{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.32)}
.cpx-tabs button[aria-selected="true"]{background:transparent;color:#fff;box-shadow:inset 0 -2px 0 #7fd7ee}.cpx-tabs button[aria-selected="true"]>span{color:#7fd7ee}
.cpx-panel{display:grid;grid-template-columns:minmax(0,.7fr) minmax(360px,1.3fr);gap:clamp(36px,6vw,84px);min-height:390px;padding:clamp(34px,4vw,54px) 0}
.cpx-panel[hidden]{display:none}.cpx-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.cpx-key{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#7fd7ee}
.cpx-copy h3{margin-top:13px;color:#fff;font-size:clamp(24px,2.5vw,36px);line-height:1.18;letter-spacing:-.032em}.cpx-copy p{margin:18px 0 28px;max-width:38ch;color:rgba(255,255,255,.78);line-height:1.72}.cpx-copy .btn-text{color:#7fd7ee}
.cpx-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;align-self:center}.cpx-products:has(.cpx-product:only-child){grid-template-columns:minmax(0,1fr)}
.cpx-product{display:flex;flex-direction:column;min-width:0;border:1px solid rgba(255,255,255,.14);background:#1e2534;transition:border-color .2s}.cpx-product:hover,.cpx-product:focus-visible{transform:none;border-color:rgba(127,215,238,.55);box-shadow:none}
.cpx-media{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;background:#eef0f3}.cpx-media img{width:100%;height:100%;object-fit:contain;padding:clamp(12px,2vw,26px)}.cpx-media img[role="presentation"]{object-fit:cover;padding:0}
.cpx-product-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:#1e2534}.cpx-product-meta strong{font-size:14px;color:#fff}.cpx-product-meta em{font-style:normal;font-size:11px;font-weight:700;color:#7fd7ee;white-space:nowrap}
@media(max-width:860px){.cpx-tabs{display:flex;overflow-x:auto;border-bottom:1px solid rgba(255,255,255,.14);scrollbar-width:none}.cpx-tabs::-webkit-scrollbar{display:none}.cpx-tabs button{flex:0 0 auto;min-width:190px;min-height:64px}.cpx-panel{grid-template-columns:1fr;min-height:0}}
@media(max-width:560px){.cpx-panel{padding:26px 0}.cpx-products{grid-template-columns:1fr 1fr}.cpx-copy h3{font-size:27px}}
@media(max-width:360px){.cpx-products{grid-template-columns:1fr}}

.support-bridge-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(40px,8vw,120px);align-items:end}
.contact-faq-link .support-bridge-grid h2{font-size:clamp(26px,3vw,40px)}
.contact-faq-link .support-bridge-grid p{max-width:58ch;color:var(--muted);line-height:1.75}.contact-faq-link .support-bridge-grid .btn-text{margin-top:22px}
@media(max-width:860px){.support-bridge-grid{grid-template-columns:1fr;align-items:start}}

/* FAQ / family directory share the editorial system instead of using generic dashboard cards. */
.family-grid--directory{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px}.family-grid--directory .family-card{min-height:280px}.family-name{display:block;margin-top:22px;font-size:clamp(20px,2vw,28px);color:var(--ink)}
.cat-status,.prod-status,.pd-status{display:inline-flex;align-items:center;width:max-content;border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line));border-radius:var(--r-pill);background:color-mix(in srgb,var(--brand) 5%,#fff);color:var(--brand);font-size:10.5px;font-weight:800;letter-spacing:.045em}
.cat-status{margin:12px 0 0;padding:5px 10px}.prod-status{margin-top:8px;padding:4px 9px}.pd-status{margin:10px 0 0;padding:5px 10px}
.prod-caps{display:block;margin-top:10px;color:var(--c500);font-family:var(--font-mono);font-size:10px;line-height:1.55;letter-spacing:.035em}
.pd-capability{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.pd-capability span{padding:6px 11px;border-radius:var(--r-pill);background:var(--c50);border:1px solid var(--line);font-family:var(--font-mono);font-size:10.5px;color:var(--c700)}
@media(max-width:760px){.family-grid--directory{grid-template-columns:1fr}.family-grid--directory .family-card{min-height:230px}}

/* Browser-native rendering deferral: content remains available without JavaScript and is
   promoted automatically when scrolled, focused, searched or targeted by a hash link. */
@supports (content-visibility:auto){
  .home-defer { content-visibility:auto; contain-intrinsic-size:auto 100vh; }
}
/* product search filter — matching cards fade + rise back in with a stagger */
@keyframes prodIn { from { opacity:0; transform:translateY(12px) scale(.96); } to { opacity:1; transform:none; } }
/* news (dark section): featured card = dark glass (not glaring white); side list light text */
.section--news .news-feature { background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); }
.section--news .nf-thumb { background:rgba(255,255,255,.9); border-bottom-color:rgba(255,255,255,.12); }
/* on the dark news band an image-less feature (a disclosure) must sit IN the band, not punch a
   bright hole: dark elevated surface + a faint document glyph instead of the light empty state */
.section--news .nf-thumb.empty { background:linear-gradient(150deg,#1c1f2a,#111319);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05); border-bottom-color:rgba(255,255,255,.08); }
.section--news .nf-thumb.empty .doc { color:rgba(255,255,255,.17); }
.section--news .nf-body h3 { color:#fff; }
.section--news .nf-body .date { color:rgba(255,255,255,.71); }
.section--news .nf-body .badge { background:rgba(127,215,238,.18); color:#7fd7ee; }
.section--news .news-home-list { border-top-color:rgba(255,255,255,.32); }
.section--news .nh-row { border-bottom-color:rgba(255,255,255,.12); }
.section--news .nh-row h3 { color:#fff; }
.section--news .nh-row .date { color:rgba(255,255,255,.66); }
.section--news .nh-row .badge { background:rgba(255,255,255,.1); color:rgba(255,255,255,.8); }
.section--news .nh-row:hover { background:rgba(255,255,255,.05); }
.section--news .btn-outline { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.section--news .btn-outline:hover { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.71); }
.center { text-align:center; }
.center .eyebrow,.center .section-head { margin-inline:auto; }

/* --------------------------------------------------------------- buttons --- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:52px; padding:0 28px; border-radius:var(--r-pill); font-weight:600; font-size:15.5px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  white-space:nowrap; }
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--btn-ink); color:#fff; }
.btn-primary:hover { background:var(--btn-ink-h); transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(20,24,30,.5); }
.btn-outline { background:#fff; color:var(--ink); border:1px solid var(--c200); box-shadow:var(--sh-sm); }
.btn-outline:hover { border-color:var(--brand); color:var(--brand); transform:translateY(-2px); box-shadow:var(--sh); }
.btn-sm { height:44px; padding:0 20px; font-size:14.5px; }
.btn-text { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--brand); }
.btn-text svg { width:16px; height:16px; transition:transform .25s var(--ease); }
.btn-text:hover svg { transform:translateX(4px); }

/* =======================================================================
   HEADER / NAV
   ======================================================================= */
.header { position:fixed; inset:0 0 auto 0; height:var(--header-safe-h); padding-top:env(safe-area-inset-top, 0px); z-index:100;
  display:flex; align-items:center; transition:background .3s, box-shadow .3s, border-color .3s;
  border-bottom:1px solid transparent; }
.header .container { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px;
  letter-spacing:-.04em; color:#fff; transition:color .3s; flex-shrink:0; }
.brand img { height:30px; width:auto; display:block; }
.brand .logo-dark { display:none; }   /* blue logo: shown on light/solid header */

.header > .container > nav { flex:1; display:flex; justify-content:center; }
.gnb { display:flex; justify-content:center; gap:clamp(24px,3vw,52px); margin:0; }
.gnb > li > a { display:flex; align-items:center; height:var(--header-h); padding:0 12px; white-space:nowrap;
  font-weight:600; font-size:16px; color:rgba(255,255,255,.92); transition:color .25s; position:relative; }
/* squeeze tier: EN labels (About Us … With Us) must never wrap before the drawer takes over */
@media (max-width:1150px){ .gnb { gap:14px; } .gnb > li > a { padding:0 9px; font-size:15px; } }
.gnb > li > a::after { content:""; position:absolute; left:12px; right:12px; bottom:22px; height:2px;
  background:var(--cyan); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); }
.gnb > li:hover > a::after, .gnb > li.active > a::after { transform:scaleX(1); }
.gnb .submenu { position:absolute; top:100%; left:0; min-width:210px; background:#fff;
  border-radius:0 0 var(--r-sm) var(--r-sm); box-shadow:var(--sh-md); padding:10px;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.25s var(--ease); }
/* on the dark home header the dropdown matches the header: dark glass, not a white slab */
/* Safari 는 18.0 이전까지 -webkit-backdrop-filter 가 필수다. 파일 내 다른 26곳은 붙어 있는데
   이 블록들만 빠져 있어 iOS 17 이하에서 블러가 전혀 걸리지 않았다(적대검증). 전수로 보강. */
body.is-home .gnb .submenu { background:rgba(13,16,25,.86); -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px);
  border:1px solid rgba(255,255,255,.1); border-top:0; box-shadow:0 26px 50px -22px rgba(0,0,0,.6); }
body.is-home .gnb .submenu a { color:rgba(255,255,255,.82); }
body.is-home .gnb .submenu a:hover { background:rgba(255,255,255,.1); color:#fff; }
/* language dropdown gets the same dark-glass treatment on the home header */
body.is-home .lang-menu { background:rgba(13,16,25,.86); -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px);
  border-color:rgba(255,255,255,.12); box-shadow:0 26px 50px -22px rgba(0,0,0,.6); }
body.is-home .lang-menu a { color:rgba(255,255,255,.82); }
body.is-home .lang-menu a span { color:rgba(255,255,255,.61); }
body.is-home .lang-menu a:hover { background:rgba(255,255,255,.1); }
body.is-home .lang-menu a.on, body.is-home .lang-menu a.on span { color:#7fd7ee; }
.gnb > li { position:relative; }
.gnb > li:hover .submenu, .gnb > li:focus-within .submenu { opacity:1; visibility:visible; transform:translateY(0); }
.gnb > li.submenu-suppressed .submenu { opacity:0 !important; visibility:hidden !important; transform:translateY(8px) !important; }
.gnb .submenu a { display:block; padding:11px 14px; border-radius:8px; font-size:15px; font-weight:500;
  color:var(--c700); transition:.2s; }
.gnb .submenu a:hover { background:var(--c50); color:var(--brand); }
/* Family Site dropdown — external affiliate sites, logo + name */
.gnb .submenu-family { min-width:238px; padding:8px; }
.gnb .submenu-family a { display:flex; align-items:center; gap:12px; padding:9px 11px; }
.submenu-family .fs-logo { flex:0 0 auto; display:grid; place-items:center; width:52px; height:26px; }
.submenu-family .fs-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.submenu-family .fs-name { flex:1; font-size:14.5px; font-weight:650; white-space:nowrap; }
.submenu-family .fs-ext { flex:0 0 auto; width:15px; height:15px; opacity:.45; }
.submenu-family a:hover .fs-ext { opacity:.9; }
/* mobile drawer family sub */
.drawer-sub-family a { display:flex; align-items:center; gap:12px; }
.drawer-sub-family .fs-logo { flex:0 0 auto; display:grid; place-items:center; width:54px; height:26px; }
.drawer-sub-family .fs-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.drawer-sub-family .fs-name { font-weight:600; }

.header-actions { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.lang-switch { position:relative; }
.lang-btn { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 12px; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.28); color:#fff; font-size:13.5px; font-weight:600; transition:.2s; }
.lang-btn > svg:first-child { width:16px; height:16px; }
.lang-btn .chev { width:13px; height:13px; opacity:.7; transition:transform .2s; }
.lang-btn:hover { background:rgba(255,255,255,.12); }
.lang-switch.open .lang-btn .chev { transform:rotate(180deg); }
.lang-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:168px; background:#fff; border-radius:var(--r-sm);
  box-shadow:var(--sh-md); border:1px solid var(--line); padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.22s var(--ease); z-index:60; }
.lang-switch.open .lang-menu { opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu a { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:8px; font-size:14.5px; color:var(--c700); transition:.18s; }
.lang-menu a span { font-size:11px; font-weight:700; color:var(--c400); letter-spacing:.04em; }
.lang-menu a:hover { background:var(--c50); }
.lang-menu a.on, .lang-menu a.on span { color:var(--brand); font-weight:700; }
.nav-toggle { display:none; width:44px; height:44px; border-radius:10px; color:#fff; }
.nav-toggle svg { width:26px; height:26px; margin-inline:auto; }

/* solid header — DARK on the (dark) home page (keeps light logo + white nav), LIGHT on sub pages */
body.is-home .header.solid {
  background:rgba(11,13,20,.74); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:rgba(255,255,255,.08); box-shadow:0 1px 0 rgba(0,0,0,.25); }
body:not(.is-home) .header {
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(16,33,58,.04); }
body:not(.is-home) .brand { color:var(--ink); }
body:not(.is-home) .brand .logo-light { display:none; }
body:not(.is-home) .brand .logo-dark  { display:block; }
body:not(.is-home) .gnb > li > a { color:var(--c800); }
body:not(.is-home) .lang-btn { color:var(--c700); border-color:var(--c200); }
body:not(.is-home) .lang-btn:hover { background:var(--c50); }
body:not(.is-home) .nav-toggle { color:var(--ink); }

/* dark editorial subpages (is-dark): header matches the home's dark header — white logo + white nav on translucent dark. Applies without reload when pjax swaps the body class. */
body.is-dark .header { background:rgba(11,13,20,.74); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:rgba(255,255,255,.08); box-shadow:0 1px 0 rgba(0,0,0,.25); }
body.is-dark .brand { color:#fff; }
body.is-dark .brand .logo-light { display:block; }
body.is-dark .brand .logo-dark  { display:none; }
body.is-dark .gnb > li > a { color:rgba(255,255,255,.86); }
body.is-dark .lang-btn { color:#fff; border-color:rgba(255,255,255,.28); }
body.is-dark .lang-btn:hover { background:rgba(255,255,255,.12); }
body.is-dark .nav-toggle { color:#fff; }
body.is-dark .gnb .submenu { background:rgba(13,16,25,.86); -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px); border-color:rgba(255,255,255,.12); }
body.is-dark .gnb .submenu a { color:rgba(255,255,255,.82); }
body.is-dark .gnb .submenu a:hover { background:rgba(255,255,255,.1); color:#fff; }
/* current-page item in a dark dropdown must not use the light --c50 slab */
body.is-home .gnb .submenu a[aria-current="page"],
body.is-dark .gnb .submenu a[aria-current="page"] { background:rgba(127,215,238,.14); color:#7fd7ee; }
body.is-dark .lang-menu { background:rgba(13,16,25,.86); border-color:rgba(255,255,255,.12); }
body.is-dark .lang-menu a { color:rgba(255,255,255,.82); }
body.is-dark .lang-menu a span { color:rgba(255,255,255,.61); }
body.is-dark .lang-menu a:hover { background:rgba(255,255,255,.1); }
body.is-dark .lang-menu a.on, body.is-dark .lang-menu a.on span { color:#7fd7ee; }

/* mobile drawer */
.drawer-backdrop { position:fixed; inset:0; background:rgba(8,18,33,.5); z-index:110;
  opacity:0; visibility:hidden; transition:.3s; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(86vw,380px); background:#fff; z-index:111;
  transform:translateX(100%); transition:transform .35s var(--ease); display:flex; flex-direction:column;
  box-shadow:var(--sh-lg); }
.drawer.open { transform:translateX(0); }
.drawer.open ~ .drawer-backdrop, .drawer-backdrop.open { opacity:1; visibility:visible; }
.drawer-top { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.drawer-top .brand { color:var(--ink); }
.drawer > nav { display:flex; flex:1; min-height:0; }
.drawer-nav { overflow-y:auto; padding:10px 8px 30px; flex:1; }
.drawer-nav > li { border-bottom:1px solid var(--c100); }
.drawer-nav > li > a, .drawer-nav > li > .drawer-row > a { display:block; padding:16px 16px; font-weight:700; font-size:17px; color:var(--ink); }

/* ── 하위 메뉴 접기 (대표님 지시 2026-08-13) ──────────────────────────────
   상위 줄을 '이동 링크'와 '펼치기 버튼' 둘로 나눈다. 상위를 눌러도 그 페이지로 갈 수 있어야
   해서 화살표를 따로 뒀다. 접는 것은 클래스로만 하고 마크업에는 숨김을 박지 않는다 —
   JS 가 죽어도 링크가 살아 있어야 하기 때문(그때는 전부 펼쳐진 예전 모습이 된다). */
.drawer-row { display:flex; align-items:center; }
.drawer-row > a { flex:1 1 auto; min-width:0; }
.drawer-exp { flex:0 0 auto; display:grid; place-items:center; width:52px; height:52px;
  margin-right:4px; border:0; background:transparent; color:var(--c500); cursor:pointer;
  border-radius:10px; transition:color .18s, background .18s; }
.drawer-exp svg { width:20px; height:20px; transition:transform .22s; }
.drawer-exp:hover { color:var(--brand); background:var(--c50); }
.drawer-exp:focus-visible { outline:2px solid var(--brand); outline-offset:-3px; }
.drawer-exp[aria-expanded="true"] svg { transform:rotate(180deg); }
/* JS 가 붙은 뒤에만 접는다. drawer-nav.is-collapsible 은 main.js 가 단다 —
   스크립트가 없거나 실패한 환경에서 메뉴가 통째로 사라지는 사고를 막는다. */
.drawer-nav.is-collapsible > li.has-sub > .drawer-sub { display:none; }
.drawer-nav.is-collapsible > li.has-sub.is-open > .drawer-sub { display:flex; }
.drawer-sub { padding:0 12px 12px; display:flex; flex-direction:column; gap:2px; }
.drawer-sub a { display:block; padding:10px 16px; border-radius:8px; color:var(--c600); font-size:15px; }
.drawer-sub a:hover { background:var(--c50); color:var(--brand); }
/* drawer contact shortcuts — one-tap call / inquiry from the mobile menu */
.drawer-cta { padding:14px 22px 16px; border-top:1px solid var(--line); display:flex; gap:10px; }
.drawer-cta a { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 8px; border-radius:11px; font-weight:700; font-size:14.5px; }
/* 드로어 CTA 안의 <a> 는 '문의하기' 하나뿐이다(inc/header.php). 예전 두 번째 링크(전화) 잔재인
   :first-child 규칙이 남아 같은 요소에 :last-child 와 함께 걸렸고, color-mix 를 모르는 브라우저
   (iOS 15~16.1 · Chrome 110 이하 · 삼성인터넷 21 이하)는 background 선언만 버리고 color 는 살려
   글자색=배경색(대비 1:1)으로 CTA 가 사라졌다. → 선택자를 하나로 합치고 color-mix 앞에 정적
   폴백 색을 먼저 선언해 미지원 브라우저가 그 줄을 쓰게 한다. 값은 color-mix 결과와 동일. */
.drawer-cta a { background:#eff2f6; background:color-mix(in srgb, var(--brand) 8%, white); color:var(--brand); }
.drawer-cta a svg { width:17px; height:17px; flex:none; }
/* JS 비활성 폴백 내비(.nsnav) — 드로어는 main.js 로만 열리는데 .gnb 는 터치 기기에서 폭과
   무관하게 숨는다. 그래서 JS 가 꺼지면 폰·태블릿에 사이트 이동 수단이 전무했다(적대검증).
   마크업은 inc/header.php 의 <noscript> 안에만 있어 JS 가 켜져 있으면 DOM 에 아예 없다.
   해제 스위치는 <head> 의 documentElement.classList.add('js') — .nav-toggle 은 JS 없이는
   아무 동작도 못 하므로 그때만 감춘다(명시도 0,2,1 이라 아래 미디어쿼리보다 항상 이긴다). */
html:not(.js) .nav-toggle { display:none; }
.nsnav { display:none; margin-top:var(--header-safe-h); background:#fff;
  border-bottom:1px solid var(--line); padding:6px 0 14px; }
.nsnav ul { list-style:none; margin:0; padding:0; }
.nsnav > .container > ul > li { border-bottom:1px solid var(--c100); padding:2px 0; }
.nsnav-lbl, .nsnav > .container > ul > li > a { display:block; padding:11px 2px;
  font-weight:700; font-size:16px; color:var(--ink); }
.nsnav-sub { display:flex; flex-wrap:wrap; gap:0 16px; padding:0 2px 8px; }
.nsnav-sub a { display:block; padding:5px 0; font-size:14.5px; font-weight:500; color:var(--c600); }
.nsnav-lang { display:flex; gap:14px; padding:14px 2px 0; }
.nsnav-lang a { font-size:14px; font-weight:700; color:var(--c600); }
.nsnav-lang a.on { color:var(--brand); }
@media (max-width:960px) { .nsnav { display:block; } }
@media (hover:none) and (pointer:coarse) { .nsnav { display:block; } }

.drawer-foot { padding:14px 22px 18px; display:flex; gap:10px; }
.drawer-foot a { flex:1; text-align:center; padding:11px; border-radius:9px; border:1px solid var(--c200); font-weight:700; font-size:14px; }
.drawer-foot a.on { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ======================================================================
   HERO (home)
   ====================================================================== */
/* ===== HERO (cinematic full-bleed) ===== */
.hero-cine { position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(620px,94vh,1000px); overflow:hidden; background:#171a21; isolation:isolate; }
.hero-cine-media { position:absolute; inset:-6%; z-index:0; }
.hero-cine-media img { width:100%; height:100%; object-fit:cover; object-position:center right;
  filter:contrast(1.06) saturate(1.05) brightness(1.06); }
.hero-cine-media img[src*="/campaign/"]{object-position:center right;filter:contrast(1.08) saturate(.92) brightness(.9)}
/* Hero rotation: the frames are stacked, only one is opaque. Each frame is a different competency
   (line → precision → metal), so the headline stays and the evidence behind it changes.
   Stacking absolutely means the container has no in-flow child to give it height — but
   .hero-cine-media is already inset-positioned, so its box comes from `inset`, not content. */
.hero-rot .hero-frame { position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease); }
.hero-rot .hero-frame.is-on { opacity:1; }
/* No JS (or JS not yet run): the first frame must still be visible. */
html:not(.js) .hero-rot .hero-frame:first-child { opacity:1; }
/* left-anchored scrim: keep the headline column readable, let the real line/precision frame
   breathe on the right so the cinematic imagery is actually legible (it was a flat dark panel) */
.hero-cine::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,10,18,.93) 0%, rgba(8,10,18,.8) 34%, rgba(8,10,18,.4) 66%, rgba(8,10,18,.15) 100%),
    linear-gradient(180deg, rgba(8,10,18,.42) 0%, transparent 26%, transparent 58%, rgba(8,10,18,.72) 100%); }
.hero-cine::after{content:"";position:absolute;inset:auto 0 0 0;z-index:1;height:42%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(5,7,12,.92))}
/* Restrained editorial motion: the photography leads, without synthetic glow or blur. */
@media (prefers-reduced-motion:no-preference){
  .hero-cine-eyebrow { animation:heroRise .55s .06s var(--ease) both; }
  .hero-cine h1      { animation:heroRise .68s .14s var(--ease) both; }
  .hero-cine p       { animation:heroRise .68s .22s var(--ease) both; }
  .hero-cine .hero-cta { animation:heroRise .68s .3s var(--ease) both; }
  @keyframes heroRise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
  /* Ken Burns — the held frame drifts slowly so the hero reads as film, not a slideshow */
  .hero-rot .hero-frame.is-on { animation:heroKen 6.8s var(--ease) both; }
  @keyframes heroKen { from { transform:scale(1.04); } to { transform:scale(1.11) translateY(-1.3%); } }
}
/* (cursor spotlight removed — CEO 2026-07-21: no mouse-follow light effect) */
.hero-cine-inner { position:relative; z-index:2; flex:1; display:flex; align-items:center;
  padding-block:calc(var(--header-safe-h) + clamp(40px,7vw,90px)) clamp(36px,5vw,60px); }
.hero-cine-text { max-width:790px; }
.hero-cine-eyebrow { display:inline-flex; align-items:center; gap:14px; color:#7fd7ee;
  font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin-bottom:26px; }
.hero-cine-eyebrow::before { content:""; width:32px; height:2px; background:currentColor; opacity:.9; }
/* HERO H1 — the one deliberate line break on the site. The data string carries a \n, and
   pre-line honours it so the headline breaks where the copy intends. That break is only
   right while the line has room: below 760px it would strand a fragment, so the newline is
   collapsed back to a space and the headline wraps naturally (keep-all + balance). */
.hero-cine h1 { font-size:clamp(32px,4.1vw,56px); line-height:1.1; letter-spacing:-.03em;
  font-weight:800; color:#fff; white-space:pre-line; text-wrap:balance;
  text-shadow:0 1px 3px rgba(0,0,0,.6), 0 4px 40px rgba(0,0,0,.55); }
/* A single calm brand accent is enough on the dark photographic field. */
.hero-cine h1 .hero-hl { color:#8fd8ea; text-shadow:0 1px 3px rgba(0,0,0,.5); }
@media (max-width:760px){ .hero-cine h1 { white-space:normal; } }
.hero-cine p { margin-top:20px; max-width:520px; font-size:clamp(15px,1.3vw,17.5px); line-height:1.7;
  color:rgba(255,255,255,.82); }
.hero-cine .hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.btn-glass { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.btn-glass:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.66); transform:translateY(-2px); }
/* hero secondary CTA — dark-surface ghost (the light .btn-ghost is invisible on the dark hero) */
.hero-cine .hero-cta-ghost { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:46px; padding:0 22px;
  border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.28); color:#fff; font-weight:600; font-size:14.5px;
  letter-spacing:-.01em; white-space:nowrap; transition:border-color .22s var(--ease), background .22s var(--ease); }
.hero-cine .hero-cta-ghost:hover { border-color:rgba(255,255,255,.78); background:rgba(255,255,255,.07); }
/* 화살표 크기 지정 — 예전엔 채움 버튼(.btn-fill.brand svg)에만 있었다. '제품 살펴보기'를 고스트로
   바꾸면서(2026-08-12 지시) 크기 없는 svg 가 218px 로 늘어났다. */
.hero-cine .hero-cta-ghost svg { width:17px; height:17px; flex:none; }
.hero-cine .hero-cta .btn-fill.brand svg { width:17px; height:17px; }
/* heritage mark — "50년+" stated as an owned fact */
.hc-heritage sup { font-size:.5em; font-weight:800; color:#7fd7ee; vertical-align:super; margin-left:1px; }
.hc-heritage-sub { flex-basis:100%; margin-top:7px; font-size:13px; color:rgba(255,255,255,.76); letter-spacing:-.01em; }
/* hero stats strip — anchored to image base */
.hero-cine-stats { position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(10,11,16,0), rgba(10,11,16,.4)); }
.hcs-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px 48px; padding-block:clamp(22px,2.4vw,30px); }
.hc-counter-lab { display:block; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#7fd7ee; margin-bottom:9px; }
.hc-counter-val { display:flex; align-items:baseline; flex-wrap:wrap; gap:16px; }
.hc-counter-val .u { display:inline-flex; align-items:baseline; gap:4px; }
.hc-counter-val b { font-size:clamp(30px,3.7vw,48px); font-weight:800; letter-spacing:-.03em; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }
.hc-counter-val i { font-style:normal; font-size:15px; font-weight:600; color:rgba(255,255,255,.78); }
.hc-stats { display:flex; }
.hc-stat { padding:0 clamp(16px,2vw,30px); border-left:1px solid rgba(255,255,255,.14); }
.hc-stat:first-child { padding-left:0; border-left:0; }
.hc-stat .num { font-size:clamp(24px,2.6vw,34px); font-weight:800; letter-spacing:-.03em; color:#fff; }
.hc-stat .lab { color:rgba(255,255,255,.78); font-size:13px; margin-top:4px; }
@media (max-width:680px){
  .hcs-row { gap:20px 24px; }
  .hc-counter-val b { font-size:34px; }
}
@media (max-width:360px){
  .hero-cine h1 { font-size:29px; }
  .hc-stats { flex-wrap:wrap; row-gap:12px; }
  .hc-stat { padding:0 12px 0 0; border-left:0; }   /* wrapped rows: no stray dividers */
  .hero-cine-eyebrow { font-size:11px; letter-spacing:.12em; gap:10px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-cine-media{ inset:0; }
  /* Rotation is decorative motion: hold the first frame, never cross-fade. */
  .hero-rot .hero-frame{ transition:none; }
  .hero-rot .hero-frame:not(:first-child){ display:none; }
  .hero-rot .hero-frame:first-child{ opacity:1; }
}

/* hero customer-logo band — a dark well continuous with the cinematic field (a full-white strip
   punched a 0→100→0 luminance hole between the near-black hero and CAPIX); logos are knocked out
   to monochrome so the baked-white source art reads on the dark surface */
.hero-cine-logos { position:relative; z-index:2; background:rgba(255,255,255,.025);
  border-top:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09); }
.hcl-inner { display:flex; align-items:center; gap:clamp(20px,3vw,46px); padding-block:16px; min-width:0; }
.hcl-lab { flex:0 0 auto; max-width:180px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.66); line-height:1.45; }
.marquee-hero { flex:1 1 auto; min-width:0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-hero .marquee-track { gap:clamp(38px,4vw,58px); animation-duration:42s; }
/* logos ship as white-background .jpgs, so a monochrome-knockout turns them into solid white
   blocks and multiply only works on a white strip. Frame each in a small white chip instead —
   legible logos, and only tiny white pills (not a full band) puncture the dark field. */
.marquee-hero img { height:46px; width:auto; padding:8px 16px; background:#fff; border-radius:8px;
  object-fit:contain; opacity:.92; box-shadow:0 6px 16px -10px rgba(0,0,0,.7); transition:opacity .25s var(--ease); }
.marquee-hero img:hover { opacity:1; }
@media (max-width:680px){ .hcl-lab { display:none; } .hcl-inner { padding:13px 0; } }

/* ======================================================================
   HOME sections
   ====================================================================== */
.eyebrow--light { color:#7fd7ee; }
.eyebrow--light::before { background:#7fd7ee; }
/* Home editorial bands — dated proof, engineering scope and product note. */
.company-proof-band .photobg-scrim{background:linear-gradient(90deg,rgba(16,20,30,.78) 0%,rgba(16,20,30,.56) 52%,rgba(16,20,30,.38) 100%)}
.company-proof-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.72fr);gap:clamp(48px,8vw,112px);align-items:end}
.company-proof-grid .section-head{max-width:720px}
.company-proof-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px}
.company-proof-links a,.engineering-links a{display:inline-flex;align-items:center;gap:8px;color:#d9f6ff;font-size:13.5px;font-weight:700}
.company-proof-links svg,.engineering-links svg{width:15px;height:15px}
.company-facts{border-top:1px solid rgba(255,255,255,.22)}
.company-facts>div{display:grid;grid-template-columns:94px 1fr;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.company-facts dt{font-family:var(--font-mono);font-size:clamp(25px,2.4vw,35px);font-weight:700;letter-spacing:-.04em;color:#fff}
.company-facts dd{font-size:14px;line-height:1.55;color:rgba(255,255,255,.88)}
.company-scope{list-style:none;margin:clamp(46px,6vw,74px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.company-scope li+li{border-left:1px solid rgba(255,255,255,.14)}
.company-scope a{position:relative;display:grid;grid-template-columns:32px 1fr auto;gap:7px 10px;min-height:128px;padding:22px 20px;color:#fff}
.company-scope-no{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:#7fd7ee}
.company-scope strong{font-size:17px;line-height:1.35}
.company-scope a>span:nth-of-type(2){grid-column:2/4;color:rgba(255,255,255,.78);font-size:13px;line-height:1.55}
.company-scope svg{width:15px;height:15px;color:#7fd7ee}

.engineering-band .photobg-scrim{background:linear-gradient(90deg,rgba(15,19,29,.76),rgba(15,19,29,.54) 58%,rgba(15,19,29,.44))}
.engineering-head{max-width:780px}
.engineering-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(42px,6vw,76px);border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
.engineering-column{min-width:0;padding:clamp(28px,3vw,42px) clamp(24px,3.4vw,48px) clamp(30px,3.4vw,48px) 0;color:#fff}
.engineering-column+ .engineering-column{border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(24px,3.4vw,48px);padding-right:0}
.engineering-index{display:block;margin-bottom:13px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:#7fd7ee}
.engineering-column h3{font-size:clamp(22px,2vw,29px);line-height:1.25;color:#fff}
.engineering-note{margin-top:9px;color:rgba(255,255,255,.76);font-size:13px}
.engineering-list{list-style:none;margin:28px 0 24px;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.engineering-list li{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(0,1fr);gap:18px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14)}
/* text-wrap:pretty keeps "…design and development" from dropping "development" onto its own line */
.engineering-list strong{font-size:14px;color:#fff;text-wrap:pretty}
.engineering-list span{font-size:13px;line-height:1.55;color:rgba(255,255,255,.82)}
.engineering-links{display:flex;flex-wrap:wrap;gap:10px 22px}
/* 같은 섹션의 '연구개발 자세히 보기'는 .btn-text 기본색(var(--brand) #35568e)이라 어두운 사진 배경에서
   거의 안 보였다(실측 rgb(53,86,142)). 우측 제조 인프라·품질 경영·사업 네트워크와 같은 색으로 맞춘다. */
.engineering-band .btn-text{color:#d9f6ff}
.product-feature-note{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-top:clamp(34px,4.5vw,54px);padding:24px 0;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);color:#fff}
.product-feature-note>div{max-width:720px}.product-feature-label{display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:#7fd7ee}
.product-feature-note h3{font-size:clamp(19px,1.8vw,25px);color:#fff}.product-feature-note p{margin-top:7px;color:rgba(255,255,255,.82);font-size:14px}
@media(max-width:960px){.company-proof-grid{grid-template-columns:1fr}.company-scope{grid-template-columns:1fr 1fr}.company-scope li:nth-child(3){border-left:0}.company-scope li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}.engineering-grid{grid-template-columns:1fr}.engineering-column{padding-right:0}.engineering-column+ .engineering-column{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding-left:0}.product-feature-note{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.company-facts>div{grid-template-columns:76px 1fr}.company-scope{grid-template-columns:1fr}.company-scope li+li,.company-scope li:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.14)}.company-scope a{min-height:0;padding-inline:0}.engineering-list li{grid-template-columns:1fr;gap:5px}}

/* SUSTAINABILITY (ESG) — one ruled editorial field, not floating cards. */
.esgband { background:#151c2c; color:#fff; position:relative; overflow:hidden; }
.esg-bg { position:absolute; inset:0; z-index:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; }
.esg-scrim { position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(16,20,32,.74) 0%, rgba(16,20,32,.5) 44%, rgba(16,20,32,.26) 100%),
             linear-gradient(0deg, rgba(16,20,32,.42), transparent 46%); }
.esgband > .container { position:relative; z-index:1; }
.esgband .section-head h2 { color:#fff; }
.esgband .esg-lead { margin-top:14px; color:rgba(255,255,255,.88); font-size:clamp(15px,1.3vw,17px); line-height:1.7; max-width:660px; display:block; }
.esg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(34px,4vw,52px); border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); }
.esg-card { display:flex; flex-direction:column; padding:clamp(26px,3vw,38px); border:0; border-radius:0; color:#fff; background:transparent; }
.esg-card + .esg-card { border-left:1px solid rgba(255,255,255,.16); }
.esg-card:hover { transform:none; background:rgba(255,255,255,.025); }
.esg-letter { display:block; margin-bottom:14px; font-family:var(--font-mono); font-size:clamp(24px,2.4vw,30px); font-weight:800;
  letter-spacing:.18em; line-height:1; color:#7fd7ee; }
.esg-card h3 { font-size:clamp(18px,1.5vw,22px); font-weight:800; letter-spacing:-.02em; color:#fff; }
.esg-card p { margin-top:10px; color:rgba(255,255,255,.84); font-size:14.5px; line-height:1.6; flex:1; }
.esg-more { margin-top:22px; display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:#7fd7ee; }
.esg-more svg { width:15px; height:15px; transition:transform .3s var(--ease); }
.esg-card:hover .esg-more svg { transform:translateX(4px); }
@media (max-width:860px){ .esg-grid { grid-template-columns:1fr; } .esg-card + .esg-card{border-left:0;border-top:1px solid rgba(255,255,255,.16)} }

/* final CTA — full-bleed dark contact band */
.cta-band { position:relative; overflow:hidden; color:#fff; isolation:isolate;
  background:linear-gradient(180deg, #1c1f29 0%, #17191f 55%, var(--ink) 100%); }
.cta-band-bg { position:absolute; inset:0; z-index:-2; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; opacity:.16; filter:saturate(.9); }
.cta-band::after { content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 15% 20%, rgba(26,167,214,.16), transparent 60%); }
.cta-band-inner { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,4.5vw,64px); align-items:center; position:relative; z-index:1; }
/* 404 "signal lost" constellation */
.fx-404 { display:block; width:min(460px,100%); height:clamp(150px,24vw,220px); margin:0 auto clamp(6px,1.5vw,16px); }
@media (prefers-reduced-motion:reduce){ .fx-404 { display:none; } }
.cta-band-lead h2 { font-size:clamp(26px,2.9vw,38px); letter-spacing:-.032em; line-height:1.17; color:#fff; }
.cta-band-lead p { margin-top:16px; max-width:440px; color:rgba(255,255,255,.8); font-size:clamp(15px,1.3vw,16.5px); line-height:1.65; }
.cta-band-actions { display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px; }
.cta-band-link{display:inline-flex;align-items:center;gap:8px;color:#d9f6ff;font-size:13.5px;font-weight:700}.cta-band-link svg{width:15px;height:15px}
.cta-band-info { display:grid; gap:0; border-top:1px solid rgba(255,255,255,.18); }
.cta-info { display:flex; flex-direction:column; gap:4px; padding:16px 0; border-radius:0;
  background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.18); }
a.cta-info:hover { background:transparent; transform:none; }
.cta-info .cti-lab { font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#7fd7ee; }
.cta-info strong { font-size:clamp(15px,1.3vw,17px); font-weight:600; color:#fff; letter-spacing:-.01em; }
@media (max-width:860px){ .cta-band-inner { grid-template-columns:1fr; gap:36px; } }
.btn-lg { height:54px; padding:0 30px; font-size:16px; }

/* family sites — premium brand-family showcase: white cards float on the dark glow backdrop */
/* ============================================================
   FAMILY — typographic brand index (dark). REPLACES the white cards + bokeh.
   REPLACES style.css .family / .family::before / .family-grid / .family-card /
   .family-logo / .family-name / .family-desc / .family-url
   and their @media blocks (~769–811). Also delete the stray
   `.family-card{ padding:30px 16px 24px; }` inside @media (max-width:340px) (~2031),
   since the card is now a hairline index cell, not a padded box.
   Hairline-ruled rows · mono numerals · small light logo chips that echo the
   product studio plates, so PRODUCTS and FAMILY read as two movements of one score.
   ============================================================ */
.family{ position:relative; overflow:hidden; color:#fff; background:var(--grad-ink); }
/* kill the dated bokeh photo → cinematic cyan/blue glow */
.family::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 12% 8%, rgba(26,167,214,.14), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(53,86,142,.12), transparent 60%); }
/* faint engineering grid masked to a corner — same vocabulary as the page's .band glow */
.family::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(120,200,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,200,255,.05) 1px,transparent 1px); background-size:54px 54px;
  -webkit-mask-image:radial-gradient(circle at 88% 8%,#000,transparent 68%);
  mask-image:radial-gradient(circle at 88% 8%,#000,transparent 68%); }
.family > .container{ position:relative; z-index:1; }
.family .eyebrow{ color:#7fd7ee; } .family .eyebrow::before{ background:#7fd7ee; }
.family .section-head h2{ color:#fff; text-shadow:none; }
.family .section-head .family-sub{ margin-top:12px; color:rgba(255,255,255,.88); font-weight:500;
  font-size:clamp(14.5px,1.1vw,16px); text-shadow:none; }

.family-grid{ margin-top:clamp(30px,3.6vw,48px); display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); }
.family-card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  padding:clamp(26px,2.6vw,34px) clamp(20px,1.9vw,26px) clamp(26px,2.6vw,30px);
  border-radius:0; border-top:1px solid rgba(255,255,255,.16); border-left:1px solid rgba(255,255,255,.10);
  color:#fff; text-decoration:none; background:transparent; box-shadow:none; overflow:visible; isolation:isolate;
  transition:background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease); }
.family-card:nth-child(3n+1){ border-left-color:transparent; }
.family-card:hover{ transform:none; background:rgba(255,255,255,.035); box-shadow:none;
  border-top-color:rgba(127,215,238,.55); }

.family-no{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.22em;
  color:#7fd7ee; font-variant-numeric:tabular-nums; line-height:1; margin-bottom:clamp(18px,2vw,24px); }

/* dark-native brand logos — 삼진C&I(colour) reads on dark as-is; ThingsOne uses a white-wordmark
   variant (thingsone-dark.png). No white chip — logos sit directly on the dark index. */
.family-logo{ min-height:0; display:inline-flex; align-items:center; justify-content:flex-start; flex-wrap:wrap;
  gap:8px 12px; margin-bottom:clamp(20px,2.2vw,26px);
  transition:transform var(--t-slow) var(--ease); }
.family-card:hover .family-logo{ transform:translateY(-3px); }
.family-logo img{ max-height:33px; max-width:200px; width:auto; object-fit:contain; display:block; }

.family-name{ font-size:clamp(21px,1.9vw,26px); font-weight:800; letter-spacing:-.02em; color:#fff; line-height:1.1; }
.family-desc{ margin-top:8px; font-size:14px; color:rgba(255,255,255,.78); line-height:1.55; }
/* mono url + arrow, pinned to card bottom for equal-height alignment across the row */
.family-url{ margin-top:auto; padding-top:clamp(20px,2.2vw,26px); display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.02em; color:#7fd7ee;
  background:none; border:none; white-space:nowrap; transition:color var(--t) var(--ease); }
.family-url svg{ width:15px; height:15px; flex-shrink:0; transition:transform var(--t) var(--ease); }
.family-card:hover .family-url{ color:#a8e6f6; }
.family-card:hover .family-url svg{ transform:translateX(4px); }

/* responsive: 3-up → 1-up (<=760); url wrap-safe on narrow tablets */
@media (max-width:900px){ .family-url{ white-space:normal; overflow-wrap:anywhere; } }
@media (max-width:760px){ .family-grid{ grid-template-columns:1fr; }
  .family-card{ border-left-color:transparent !important; } }

@media (prefers-reduced-motion:reduce){
  .family-logo,.family-url svg{ transition:none; }
  .family-card:hover .family-logo{ transform:none; } .family-card:hover .family-url svg{ transform:none; } }

/* asymmetric editorial feature grid (big company "highlights" layout) — initial concept */
.feature-grid { display:grid; grid-template-columns:1.55fr 1fr; grid-template-rows:1fr 1fr; gap:20px; }
.feature-card { position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:230px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:32px; color:#fff; isolation:isolate;
  box-shadow:var(--sh); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.feature-card:first-child { grid-row:span 2; min-height:480px; padding:30px 38px 38px; justify-content:flex-start; }
/* the history artwork carries a timeline along its bottom edge — anchor it there so
   taller cards (longer EN copy) crop only the empty navy sky at the top */
.feature-card:first-child::before { background-position:center bottom; }
/* history card: image has an empty top-left + logo top-right + timeline at the bottom, so text sits at the top */
.feature-card:first-child::after { background:linear-gradient(to bottom, rgba(9,14,26,.66) 0%, rgba(9,14,26,.16) 40%, transparent 62%); }
.feature-card::before { content:""; position:absolute; inset:0; z-index:-2; background-color:var(--ink); background-image:var(--bg,none); background-size:cover; background-position:center; transition:transform .7s var(--ease); }
.feature-card::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(12,13,18,.9) 4%, rgba(12,13,18,.32) 58%, rgba(12,13,18,.04)); }
.feature-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.feature-card:hover::before { transform:scale(1.06); }
.feature-card .tag { font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#7fd7ee; margin-bottom:12px; }
.feature-card h3 { color:#fff; font-size:22px; line-height:1.18; letter-spacing:-.01em; text-wrap:pretty; }
/* headlines: keep art-directed <br> on desktop, let Korean reflow on mobile */
@media (max-width:860px){ .cta-band-lead h2 br { display:none; } }
/* history card text must sit in the empty area LEFT of the SAMJIN logo → cap width + size to fit,
   and keep the whole block compact so "자세히 보기" stays ABOVE the timeline line/1975 dot */
.feature-card:first-child h3 { font-size:clamp(22px,2.2vw,31px); line-height:1.14; max-width:54%; text-wrap:pretty; }
.feature-card p { margin-top:11px; color:rgba(255,255,255,.84); font-size:15px; line-height:1.6; }
.feature-card:first-child p { margin-top:8px; font-size:14px; line-height:1.5; max-width:52%; }
.feature-card:first-child .more { margin-top:12px; }
.feature-card:first-child .tag { max-width:54%; }
.feature-card .more { margin-top:20px; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; }
.feature-card .more svg { width:16px; height:16px; transition:transform .25s var(--ease); }
.feature-card:hover .more svg { transform:translateX(5px); }
@media (max-width:860px){ .feature-grid { grid-template-columns:1fr; grid-template-rows:none; }
  .feature-card:first-child { grid-row:auto; min-height:360px; padding:32px; }
  .feature-card:first-child h3, .feature-card:first-child p, .feature-card:first-child .tag { max-width:none; }
  .feature-card:first-child h3 { font-size:clamp(23px,6vw,30px); }
  .feature-card:first-child::after { background:linear-gradient(to bottom, rgba(9,14,26,.9) 0%, rgba(9,14,26,.66) 45%, rgba(9,14,26,.82) 100%); } }

/* ============================================================
   PRODUCTS — Editorial Specimen Index (dark).
   REPLACES .cat-grid / .cat-card / .cat-photo / .cat-meta / .cat-sub
   and the .section--products .cat-* + .cat-photo:empty rules (style.css ~851–873).
   New .pidx* classes; the old .cat-* home rules become unused. Leave .cat-intro*
   (product-detail pages) untouched.
   ============================================================ */

/* Deepen the section photo so the dark field stays dominant and the hairline
   index + small light specimen plates are the only lit objects on screen. */
.section--products .photobg-img{ filter:grayscale(.25) brightness(.5) contrast(1.05); transform:scale(1.02); }
.section--products .photobg-scrim{
  background:
    linear-gradient(180deg, rgba(9,11,17,.9) 0%, rgba(8,10,15,.94) 100%),
    radial-gradient(120% 85% at 85% 0%, rgba(26,167,214,.12), transparent 55%); }

.pidx{ margin-top:clamp(26px,3.4vw,44px); display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); }
.pidx-item{ position:relative; isolation:isolate; display:grid; grid-template-rows:auto 1fr auto;
  gap:clamp(16px,1.7vw,22px);
  padding:clamp(24px,2.5vw,34px) clamp(20px,1.9vw,26px) clamp(26px,2.6vw,32px);
  border-top:1px solid rgba(255,255,255,.16); border-left:1px solid rgba(255,255,255,.10);
  color:#fff; text-decoration:none;
  transition:background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease); }
.pidx-item:nth-child(3n+1){ border-left-color:transparent; }
.pidx-item:hover{ background:rgba(255,255,255,.035); }
.pidx-item:hover, .pidx-item:focus-visible{ border-top-color:rgba(127,215,238,.55); }

/* top row: mono index numeral (left) + small light studio plate (right) */
.pidx-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.pidx-no{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.22em;
  color:#7fd7ee; font-variant-numeric:tabular-nums; line-height:1; padding-top:7px; }

/* the spotlight stage — background-removed transparent products float on the dark field,
   lifted by a soft luminous pool (dark products get rim-light, white products a halo). No white box. */
.pidx-plate{ flex:none; width:clamp(94px,9.4vw,118px); aspect-ratio:1/1; border-radius:16px;
  display:flex; align-items:center; justify-content:center; padding:10px; overflow:visible;
  /* backlit spotlight pool — bright enough that a BLACK product (speaker/soundbar) is defined as a
     silhouette against the lit pool instead of dying into the dark field; white products still read */
  background:radial-gradient(circle at 50% 45%, rgba(206,222,244,.38), rgba(150,186,226,.11) 48%, transparent 74%);
  transition:transform var(--t-slow) var(--ease), background var(--t-slow) var(--ease); }
.pidx-plate img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  /* dark ground shadow grounds white products; a light rim-glow hugs the alpha edge so BLACK products
     get a luminous outline and pop on the dark theme (barely affects light products) */
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)) drop-shadow(0 0 7px rgba(208,224,244,.55));
  transition:transform var(--t-slow) var(--ease); }
.pidx-item:hover .pidx-plate{ transform:translateY(-3px);
  background:radial-gradient(circle at 50% 45%, rgba(198,218,245,.40), rgba(150,186,226,.11) 49%, transparent 75%); }
.pidx-item:hover .pidx-plate img{ transform:scale(1.05); }

/* AOC/OCM (no photo) — deliberate cyan connection schematic on the same spotlight stage,
   so the photoless lines read as designed peers of the photographed ones. */
.pidx-plate.is-diagram{ padding:14px; }
.pidx-diagram{ display:flex; align-items:center; justify-content:center; width:86%; height:86%; }
.pidx-diagram svg{ width:100%; height:100%; }
.pidx-diagram svg *{ vector-effect:non-scaling-stroke; }

/* body: large typographic product name + sub (baseline-aligned across a row via the 1fr track) */
.pidx-body{ align-self:end; }
.pidx-name{ display:block; font-size:clamp(21px,2vw,27px); font-weight:800; letter-spacing:-.035em;
  line-height:1.08; color:#fff; }
.pidx-sub{ display:block; margin-top:9px; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.78); }

/* index affordance */
.pidx-go{ justify-self:start; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.18); color:#7fd7ee;
  transition:transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease); }
.pidx-go svg{ width:16px; height:16px; }
.pidx-item:hover .pidx-go{ background:rgba(127,215,238,.12); border-color:rgba(127,215,238,.5); transform:translateX(4px); }

/* responsive: 3-up → 2-up (<=1080) → 1-up (<=520); border-left recalculated each step */
@media (max-width:1080px){ .pidx{ grid-template-columns:repeat(2,1fr); }
  .pidx-item:nth-child(3n+1){ border-left-color:rgba(255,255,255,.10); }
  .pidx-item:nth-child(2n+1){ border-left-color:transparent; } }
@media (max-width:520px){ .pidx{ grid-template-columns:1fr; }
  .pidx-item{ border-left-color:transparent !important; } .pidx-plate{ width:84px; } }

@media (prefers-reduced-motion:reduce){
  .pidx-item,.pidx-plate,.pidx-plate img,.pidx-go{ transition:none; }
  .pidx-item:hover .pidx-plate,.pidx-item:hover .pidx-plate img,.pidx-item:hover .pidx-go{ transform:none; } }
.eyebrow svg, .badge svg { width:15px; height:15px; }

/* split band (R&D / CTA) */
.band { background:radial-gradient(120% 140% at 85% -10%, #24272f 0%, #181a21 45%, #101117 100%); color:#fff; border-radius:var(--r-xl); overflow:hidden;
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center; position:relative;
  border:1px solid rgba(120,200,255,.08); }
.band::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.25; z-index:0;
  background-image:linear-gradient(rgba(120,200,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,200,255,.05) 1px,transparent 1px);
  background-size:50px 50px; mask-image:radial-gradient(circle at 86% 14%,#000,transparent 70%); -webkit-mask-image:radial-gradient(circle at 86% 14%,#000,transparent 70%); }
.band::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(560px 380px at 92% 6%, rgba(0,190,225,.2), transparent 60%),
    radial-gradient(420px 320px at 4% 104%, rgba(53,86,142,.14), transparent 62%); }
.band .pad { padding:clamp(40px,5vw,72px); position:relative; z-index:1; }
.band h2 { color:#fff; font-size:clamp(26px,3vw,40px); }
.band p { margin-top:18px; color:rgba(255,255,255,.8); }
.band .steps { display:flex; gap:10px; margin-top:30px; flex-wrap:wrap; }
.band .steps span { padding:9px 16px; border-radius:var(--r-pill); background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); font-size:14px; font-weight:600; }
.band-visual { align-self:stretch; min-height:320px; background:var(--navy); background-size:cover; background-position:center; position:relative; z-index:1; }

/* ======================================================================
   SUB-PAGE shell
   ====================================================================== */
/* page-hero: cinematic dark header with section photo */
.page-hero { position:relative; display:flex; align-items:center;
  min-height:clamp(380px,42vw,560px);                                  /* unified hero height across all sub-pages */
  padding:calc(var(--header-safe-h) + 36px) 0 46px;
  color:#fff; overflow:hidden; background:var(--grad-ink); isolation:isolate; }
.page-hero > .container { width:100%; }
.page-hero-photo { display:block; position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  opacity:.44; filter:saturate(.92) contrast(1.02); transform:scale(1.04); }
.page-hero-photo[style*="campaign"]{background-position:center right;opacity:.88;filter:saturate(.86) brightness(.74) contrast(1.1);transform:scale(1.012)}
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(5,7,12,.94) 0%, rgba(6,9,15,.84) 40%, rgba(6,9,15,.42) 70%, rgba(6,9,15,.18) 100%),
    radial-gradient(80% 70% at 80% 42%, rgba(127,215,238,.16), transparent 60%),
    linear-gradient(180deg, rgba(8,10,15,.18) 0%, rgba(8,10,15,.68) 100%); }
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { max-width:12ch; font-size:clamp(34px,4.2vw,62px); color:#fff; letter-spacing:-.045em; line-height:1.04; text-shadow:0 2px 30px rgba(0,0,0,.4); text-wrap:balance; }
.pd-detail-hero h1{max-width:18ch;overflow-wrap:anywhere}
.page-hero p { margin-top:16px; color:rgba(255,255,255,.8); max-width:680px; font-size:clamp(15px,1.35vw,17.5px); line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.page-hero-proof{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3.4vw,42px);padding:0;max-width:820px}
.page-hero-proof div{min-width:min(190px,100%);padding:13px 16px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.075);box-shadow:0 24px 70px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.page-hero-proof dt{font-family:var(--font-mono);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7fd7ee}
.page-hero-proof dd{margin-top:7px;color:#fff;font-size:15px;font-weight:800;letter-spacing:-.01em}
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.78); margin-bottom:clamp(24px,4vw,42px); flex-wrap:wrap; letter-spacing:.01em; }
.page-hero .breadcrumb a { color:rgba(255,255,255,.78); }
.page-hero .breadcrumb a:hover { color:#fff; }
.page-hero .breadcrumb .sep { color:rgba(255,255,255,.32); }
.page-hero .breadcrumb .cur { color:#fff; font-weight:600; }
@media (max-width:640px){
  .page-hero p { display:block; -webkit-line-clamp:unset; overflow:visible; }
  .page-hero-proof{display:grid;grid-template-columns:1fr;gap:8px;margin-top:24px}
  .page-hero-proof div{min-width:0;padding:11px 13px;border-radius:15px}
  .page-hero-proof dd{font-size:14px}
}
/* fallback for breadcrumbs outside the hero */
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--brand); }
.breadcrumb .cur { color:var(--ink); font-weight:600; }

/* sub local nav (tabs) */
.subnav { position:sticky; top:var(--header-safe-h); z-index:50; background:#fff;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.subnav .container { display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; }
.subnav .container::-webkit-scrollbar { display:none; }
.subnav a { display:flex; align-items:center; height:60px; padding:0 18px; font-weight:600; font-size:15px;
  color:var(--c500); border-bottom:2px solid transparent; white-space:nowrap; transition:.2s; }
.subnav a:hover { color:var(--ink); }
.subnav a.on { color:var(--brand); border-bottom-color:var(--brand); }
/* contextual mode — a deep (level-3) page: a pinned "‹ parent" back link, a hairline, then the
   sibling tabs in the same underline language. One row, one system — not a second stacked bar.
   The back link and divider are fixed; only .sn-tabs scrolls, so "‹ 연구개발" is always in reach. */
.subnav-ctx .container { overflow:visible; }
.subnav-ctx .sn-up { flex:none; gap:3px; color:var(--c500); font-weight:600; font-size:15px; padding-right:14px; }
.subnav-ctx .sn-up:hover { color:var(--ink); }
.subnav-ctx .sn-up .sn-chev { width:19px; height:19px; margin-right:-2px; opacity:.85; }
.subnav-ctx .sn-up span { border-bottom:2px solid transparent; } /* keep baseline aligned with the tabs */
.subnav-ctx .sn-div { flex:none; align-self:center; width:1px; height:20px; background:var(--line); margin-right:4px; }
.subnav-ctx .sn-tabs { position:relative; flex:1 1 auto; min-width:0; display:flex; gap:6px;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; }
.subnav-ctx .sn-tabs::-webkit-scrollbar { display:none; }
/* tighten the gap between the sub-page header/subnav and first content */
.subnav + .section, .page-hero + .section, .page-hero + .subnav + .section { padding-top:clamp(44px,5vw,76px); }

/* ======================================================================
   PRODUCTS
   ====================================================================== */
/* product family context rail — keeps category switching inside one portfolio experience */
.product-switch{position:sticky;top:calc(var(--header-safe-h) + var(--subnav-h));z-index:45;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.product-switch .container{padding-top:10px;padding-bottom:10px}
.product-switch-track{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.product-switch-track::-webkit-scrollbar{display:none}
.product-switch-card{flex:0 0 clamp(168px,18vw,232px);display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:64px;padding:12px 15px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(15,23,42,.04);transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease)}
.product-switch-card span{font-size:14px;font-weight:850;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-switch-card em{font-style:normal;font-size:11px;font-weight:750;color:var(--meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-switch-card:hover,.product-switch-card:focus-visible{border-color:color-mix(in srgb,var(--brand) 42%,white);transform:translateY(-2px)}
.product-switch-card.on{background:var(--ink);border-color:var(--ink);color:#fff}
.product-switch-card.on em{color:rgba(255,255,255,.84)}
/* category intro band */
.cat-intro { display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(28px,5vw,56px); align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,4vw,46px); box-shadow:var(--sh-sm); }
.cat-intro-text h2 { font-size:clamp(24px,3vw,34px); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cat-intro-n { font-size:15px; font-weight:700; color:var(--brand); background:color-mix(in srgb,var(--brand) 10%,white); padding:4px 13px; border-radius:var(--r-pill); }
.cat-intro-text .lead { margin-top:16px; }
.cat-ledger { display:flex; flex-wrap:wrap; gap:clamp(26px,3.4vw,48px); margin-top:30px; }
.cl-item { position:relative; padding-top:15px; }
.cl-item::before { content:""; position:absolute; top:0; left:0; width:28px; height:2px; background:var(--brand); }
.clv { display:block; font-size:clamp(17px,1.7vw,21px); font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.2; font-variant-numeric:tabular-nums; }
.cll { display:block; margin-top:7px; font-size:12.5px; color:var(--muted); letter-spacing:.02em; }
.prod-count { margin:-6px 0 22px; font-size:14px; color:var(--muted); }
.prod-count strong { color:var(--ink); font-weight:800; font-size:15.5px; }
.cat-point { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--c700);
  background:var(--c50); border:1px solid var(--line); padding:8px 14px; border-radius:var(--r-pill); }
.cat-point svg { width:16px; height:16px; color:var(--brand); }
/* the photo is absolutely pinned to the frame so it can never outgrow it —
   percentage max-height is unreliable inside a grid area (mobile crop bug) */
.cat-intro-media { position:relative; aspect-ratio:1; background:var(--surface-media); box-shadow:inset 0 0 0 1px var(--hair); border-radius:var(--r); overflow:hidden; }
.cat-intro-media img { position:absolute; inset:0; width:100%; height:100%; padding:clamp(15px,2.5vw,30px); object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(15,23,42,.16)); }
@media (max-width:860px){ .cat-intro{ grid-template-columns:1fr; } .cat-intro-media{ aspect-ratio:16/10; } }

.prod-toolbar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.chip { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border-radius:var(--r-pill);
  border:1px solid var(--c200); background:#fff; font-weight:600; font-size:14.5px; color:var(--c600); transition:.2s var(--ease); }
.chip .n { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--r-pill); background:var(--c100); font-size:11.5px; line-height:1; color:var(--c600);
  font-variant-numeric:tabular-nums; }
.chip:hover { border-color:var(--brand); color:var(--brand); }
.chip.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.chip.on .n { background:rgba(255,255,255,.16); color:rgba(255,255,255,.85); }

.prod-search { display:flex; align-items:center; gap:8px; height:42px; padding:0 14px; border-radius:var(--r-pill);
  border:1px solid var(--c200); background:#fff; min-width:230px; transition:.2s; }
.prod-search:focus-within { border-color:var(--brand); box-shadow:0 0 0 4px rgba(53,86,142,.1); }
.prod-search svg { width:17px; height:17px; color:var(--c400); flex:none; }
.prod-search input { border:0; outline:0; font:inherit; font-size:14.5px; width:100%; background:transparent; color:var(--text); }
.prod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
/* slim enquiry rail after the catalog — a B2B buyer often won't find their exact model among
   dozens of SKUs, so the list is a natural place to offer 제품 문의 (empty categories already do). */
.prod-enquiry { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px;
  margin-top:clamp(30px,4vw,52px); padding:clamp(22px,2.6vw,30px) clamp(22px,2.6vw,32px);
  border:1px solid var(--line); border-radius:var(--r); background:var(--c50); }
.prod-enquiry p { color:var(--c700); font-size:15.5px; font-weight:500; }
.prod-card { background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--sh-sm); transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.prod-card:hover { box-shadow:var(--sh-md); transform:translateY(-6px); border-color:transparent; }
.prod-thumb { aspect-ratio:1/1; background:var(--surface-media); box-shadow:inset 0 -1px 0 var(--hair); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:clamp(12px,1.4vw,20px) clamp(12px,1.4vw,20px) clamp(8px,1vw,14px); }
.prod-thumb img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; transition:transform var(--t-slow) var(--ease);
  /* background-removed transparent products: a soft ground shadow lifts them off the card (white products too) */
  filter:drop-shadow(0 5px 11px rgba(15,23,42,.16)); }
.prod-card:hover .prod-thumb img { transform:scale(1.05); }
.prod-card.is-cardtag .prod-thumb{aspect-ratio:16/10}.prod-card.is-cardtag .prod-thumb img{max-width:100%;max-height:100%}.pd-media.is-cardtag{aspect-ratio:16/10}.pd-media.is-cardtag img{width:100%;height:100%;object-fit:contain;margin:auto}
.prod-body { padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.prod-body .cat { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); }
.prod-body h3 { font-size:18px; letter-spacing:-.02em; }
.prod-body .prod-name { font-size:13.5px; font-weight:600; color:var(--c700); margin-top:3px; }
.prod-body .spec { color:var(--muted); font-size:13.5px; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prod-body .go { margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px; color:var(--ink); }
.prod-body .go svg { width:15px; height:15px; transition:transform .25s var(--ease); }
.prod-card:hover .go { color:var(--brand); }
.prod-card:hover .go svg { transform:translateX(4px); }

/* product detail */
.pd { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
.pd-media { position:sticky; top:calc(var(--header-safe-h) + var(--subnav-h) + 24px);
  background:var(--surface-media); border:0;
  box-shadow:inset 0 0 0 1px var(--hair), var(--sh-md);
  border-radius:var(--r-lg); padding:clamp(16px,2.5vw,32px); display:flex; align-items:center; justify-content:center; aspect-ratio:1/1;
  width:100%; font:inherit; -webkit-appearance:none; appearance:none; }
.pd-media img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.pd-cat { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand); margin-bottom:12px; }
.pd-info { min-width:0; }
.pd-info h1,.pd-display-title { font-size:clamp(28px,3.4vw,42px); letter-spacing:-.03em; overflow-wrap:anywhere; word-break:normal; color:var(--ink); font-weight:800; line-height:1.12; }
.pd-crumb { padding-top:var(--header-safe-h); background:#fff; }
.pd-crumb .container { padding-top:16px; padding-bottom:14px; }
.pd-crumb-row { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.pd-tools { display:flex; align-items:center; gap:8px; }
.pd-tool { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--c200); color:var(--c600); background:#fff; transition:border-color .2s, color .2s, background .2s; }
.pd-tool.wide { width:auto; padding:0 16px; font-size:13.5px; font-weight:600; }
.pd-tool svg { width:17px; height:17px; }
.pd-tool:hover { border-color:var(--ink); color:var(--ink); background:var(--c50); }
.pd-tool.off { opacity:.3; pointer-events:none; }
.pd-crumb .breadcrumb { margin-bottom:0; color:var(--muted); }
.pd-crumb .breadcrumb a { color:var(--muted); }
.pd-crumb .breadcrumb a:hover { color:var(--brand); }
.pd-crumb .breadcrumb .sep { color:var(--c300); }
.pd-crumb .breadcrumb .cur { color:var(--ink); font-weight:600; }
.pd-spec-cap { margin-top:32px; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-bottom:11px; }
.pd-spec { border-top:2px solid var(--ink); }
.pd-spec dl { display:grid; grid-template-columns:minmax(110px,27%) 1fr; border-bottom:1px solid var(--line); }
.pd-spec dt { padding:13px 8px 13px 14px; font-weight:600; color:var(--c600); font-size:14px; background:var(--c50); }
.pd-spec dd { padding:13px 16px; color:var(--text); font-size:14.5px; line-height:1.6; }
/* text action link — same voice as the related-rail "전체 보기" link */
.tlink { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--brand); white-space:nowrap; }
.tlink svg { width:15px; height:15px; flex:none; transition:transform .25s var(--ease); }
.tlink:hover svg { transform:translateX(4px); }
.tlink.back:hover svg { transform:translateX(-4px); }
.tlink.quiet { color:var(--c600); transition:color .2s; }
.tlink.quiet:hover { color:var(--ink); }
/* prev/next — quiet round icon buttons */
.pd-navset { display:inline-flex; gap:8px; }
.pd-navbtn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  background:var(--c100); color:var(--c600); transition:background .2s, color .2s; }
.pd-navbtn svg { width:17px; height:17px; }
.pd-navbtn:hover { background:var(--c200); color:var(--ink); }

/* filled button system — solid fills, no outlines (current trend) */
.btn-fill { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:var(--btn-h); padding:0 26px;
  border-radius:var(--r-pill); border:0; font-weight:700; font-size:15.5px; letter-spacing:-.01em; white-space:nowrap;
  transition:background .22s var(--ease), transform .15s; }
.btn-fill:active { transform:scale(.97); }
/* hero / dark-band primary — ivory on the dark cinematic surface (replaces electric blue) */
.btn-fill.brand { background:var(--btn-ivory); color:var(--ink); }
.btn-fill.brand:hover { background:var(--btn-ivory-h); }
/* tonal secondary on light sections — quiet neutral, hover commits to ink */
.btn-fill.soft { background:#f1efeb; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.btn-fill.soft:hover { background:var(--btn-ink); color:#fff; box-shadow:inset 0 0 0 1px var(--btn-ink); }
.btn-fill.sq { width:var(--btn-h); padding:0; }
.btn-fill.sm { height:40px; padding:0 20px; font-size:13.5px; }
.btn-fill svg { width:17px; height:17px; }
.pd-title-row { display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap; margin-top:2px; }
.pd-title-row h1 { min-width:0; }
.pd-title { flex:1 1 260px; min-width:0; max-width:100%; }
.pd-name { margin-top:6px; font-size:clamp(15px,1.5vw,18px); font-weight:600; color:var(--c600); letter-spacing:-.01em; }
.pd-cta { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.btn-solid { display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 36px; border-radius:10px;
  background:var(--ink); color:#fff; font-weight:700; font-size:15.5px; letter-spacing:-.01em;
  transition:background .25s var(--ease), transform .15s; }
.btn-solid:hover { background:#26314a; }
.btn-solid:active { transform:scale(.99); }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 28px; border-radius:10px;
  border:1px solid var(--c300); color:var(--c700); font-weight:600; font-size:15px;
  transition:border-color .25s, color .25s, background .25s; }
.btn-ghost:hover { border-color:var(--ink); color:var(--ink); background:var(--c50); }
.pd-media { overflow:hidden; cursor:zoom-in; transition:box-shadow .3s var(--ease); }
.pd-media img { transition:transform .45s var(--ease); }
.pd-media:hover { box-shadow:inset 0 0 0 1px var(--c300), 0 40px 74px -44px rgba(20,40,80,.5); }
.pd-media:hover img { transform:scale(1.03); }
.pd-zoom-hint { position:absolute; right:16px; bottom:16px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:grid; place-items:center; color:var(--c600);
  box-shadow:var(--sh-sm); transition:.3s var(--ease); }
.pd-zoom-hint svg { width:18px; height:18px; }
.pd-media:hover .pd-zoom-hint { background:var(--brand); color:#fff; transform:scale(1.08); }

/* lightbox — full product photo, never cropped */
.lightbox { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,5vw,64px); background:rgba(10,14,22,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), visibility .28s; }
.lightbox.open { opacity:1; visibility:visible; }
.lightbox-img { max-width:min(680px,92vw); max-height:88vh; width:auto; height:auto; object-fit:contain;
  border-radius:var(--r); background:#fff; padding:clamp(20px,3vw,44px); box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  transform:scale(.94); transition:transform .3s var(--ease); }
.lightbox.open .lightbox-img { transform:scale(1); }
.lightbox-close { position:absolute; top:clamp(16px,3vw,28px); right:clamp(16px,3vw,28px); width:46px; height:46px;
  border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center;
  cursor:pointer; transition:.25s var(--ease); }
.lightbox-close:hover { background:rgba(255,255,255,.26); transform:rotate(90deg); }
.lightbox-close svg { width:22px; height:22px; }
.pd-actions { margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; }
.pd-nav { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:clamp(40px,5vw,60px);
  padding-top:clamp(22px,3vw,30px); border-top:1px solid var(--line); }
.pd-nav-item { display:inline-flex; align-items:center; gap:13px; padding:4px 0; }
.pd-nav-item.next { text-align:right; }
.pd-nav-item svg { width:20px; height:20px; color:var(--c400); flex:none; transition:color .2s, transform .25s var(--ease); }
.pd-nav-item small { display:block; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pd-nav-item strong { display:block; font-size:15.5px; color:var(--ink); margin-top:3px; transition:color .2s; }
.pd-nav-item:hover strong, .pd-nav-item:hover svg { color:var(--brand); }
.pd-nav-item.prev:hover svg { transform:translateX(-4px); }
.pd-nav-item.next:hover svg { transform:translateX(4px); }

.pd-nav.one { grid-template-columns:1fr; }
.pd-nav.one .pd-nav-item.next { grid-column:1; }

/* related models — spec-teaser cards */
.rel-block { margin-top:clamp(52px,6vw,80px); }
.rel-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:24px; }
.rel-head h2 { font-size:clamp(20px,2.1vw,26px); letter-spacing:-.025em; }
.rel-all { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--brand); flex:none; }
.rel-all svg { width:15px; height:15px; transition:transform .25s var(--ease); }
.rel-all:hover svg { transform:translateX(4px); }
.rel-rail { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rel-item { display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff; padding:14px 18px 14px 14px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); }
.rel-item:hover { box-shadow:var(--sh); border-color:var(--c300); }
.rel-item .t { flex:none; width:74px; height:74px; background:var(--c50); border-radius:var(--r-sm); padding:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.rel-item .t img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.rel-meta { min-width:0; }
/* related-product name/spec: clamp to a consistent line budget instead of nowrap+ellipsis.
   A single forced line cut model codes like "ThingsOne Smart Card Tag" mid-name; two lines
   show the whole name in the space the card already has, and every card clamps the same. */
.rel-item .n { font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rel-spec { margin-top:5px; font-size:13px; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:900px){ .rel-rail { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .rel-rail { grid-template-columns:1fr; } }

/* ======================================================================
   HISTORY timeline
   ====================================================================== */
.timeline { max-width:940px; margin:0 auto; }
.tl-era { display:grid; grid-template-columns:172px 1fr; gap:0; padding-bottom:clamp(36px,4.5vw,64px); }
.tl-era-side { padding-right:30px; }
.tl-era-side .tl-decade { display:block; white-space:nowrap; font-size:clamp(30px,3vw,44px); font-weight:800; letter-spacing:-.04em; line-height:1;
  background:linear-gradient(158deg,var(--ink),#565e6c); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tl-era-side .tl-count { display:inline-flex; align-items:center; margin-top:12px; font-size:12px; font-weight:700; color:var(--brand);
  background:color-mix(in srgb,var(--brand) 10%,white); padding:4px 12px; border-radius:var(--r-pill); }
@media (min-width:781px){ .tl-era-side { position:sticky; top:calc(var(--header-safe-h) + var(--subnav-h) + 26px); align-self:start; } }
.tl-items { position:relative; padding:4px 0 clamp(44px,5vw,68px) 40px; }
.tl-items::before { content:""; position:absolute; left:0; top:12px; bottom:0; width:2px; border-radius:2px;
  background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 22%,var(--line)) 55%,transparent); }
.tl-era:last-child .tl-items { padding-bottom:0; }
.tl-era:last-child .tl-items::before { bottom:auto; height:66px; }
.tl-row { position:relative; display:grid; grid-template-columns:92px 1fr; gap:20px; align-items:center;
  padding:15px 18px; border-radius:14px; transition:transform .28s var(--ease), background .28s, box-shadow .28s; }
.tl-row:hover { background:color-mix(in srgb,var(--brand) 4%,white); box-shadow:0 20px 44px -30px rgba(53,86,142,.55); transform:translateX(4px); }
.tl-row::before { content:""; position:absolute; left:-46px; top:50%; transform:translateY(-50%); width:13px; height:13px; border-radius:50%;
  background:#fff; border:3px solid var(--brand); box-shadow:0 0 0 5px var(--c0),0 4px 12px -3px rgba(53,86,142,.55); transition:.28s var(--ease); z-index:1; }
.tl-row:hover::before { transform:translateY(-50%) scale(1.22); box-shadow:0 0 0 5px var(--c0),0 0 16px 2px rgba(53,86,142,.55); }
.tl-date { justify-self:start; align-self:center; font-weight:700; color:var(--brand); font-size:13px; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  background:color-mix(in srgb,var(--brand) 8%,white); padding:5px 11px; border-radius:8px; white-space:nowrap; }
.tl-text { color:var(--c800); font-size:15.5px; line-height:1.55; font-weight:500; }
@media (max-width:780px){
  .tl-era { grid-template-columns:1fr; }
  .tl-era-side { padding-right:0; margin-bottom:16px; display:flex; align-items:baseline; gap:12px; }
  .tl-era-side .tl-count { margin-top:0; }
  .tl-items { padding-left:30px; }
  .tl-row::before { left:-36px; }
}
@media (max-width:520px){ .tl-row{ grid-template-columns:1fr; gap:8px; padding:14px 16px; } .tl-date{ justify-self:start; } }

/* ======================================================================
   GENERIC content blocks
   ====================================================================== */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cards-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px; box-shadow:var(--sh-sm); transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.card:hover { box-shadow:var(--sh-md); transform:translateY(-4px); border-color:transparent; }
.card .ico { width:50px; height:50px; border-radius:13px; background:color-mix(in srgb,var(--brand) 8%,white); color:var(--brand);
  display:grid; place-items:center; margin-bottom:18px; border:1px solid color-mix(in srgb,var(--brand) 15%,white); transition:.3s var(--ease); }
.card:hover .ico { background:color-mix(in srgb,var(--brand) 13%,white); }
.card .ico svg { width:25px; height:25px; }
.card h3 { font-size:20px; }
.card p { margin-top:10px; color:var(--muted); font-size:15px; }
/* philosophy vision/mission editorial spread */
/* philosophy statement — clean light editorial centerpiece */
.philo-statement { position:relative; overflow:hidden; background:#fff; isolation:isolate;
  padding:clamp(60px,9vw,120px) 0; text-align:center; }
.philo-statement::before { content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 85% at 50% -8%, color-mix(in srgb,var(--brand) 7%,white), transparent 62%); }
.philo-statement .eyebrow { justify-content:center; }
.philo-lead { margin:20px auto 0; max-width:820px; font-size:clamp(25px,3.2vw,42px); font-weight:800; letter-spacing:-.036em; line-height:1.24; color:var(--ink); }
.philo-lead br { display:block; }
.philo-sub { margin:22px auto 0; max-width:600px; color:var(--muted); font-size:clamp(15px,1.3vw,17px); line-height:1.7; }

/* philosophy — VISION/MISSION full-bleed bands with ghost watermark */
.pv-band { position:relative; overflow:hidden; isolation:isolate; padding:clamp(66px,9vw,132px) 0; }
.pv-band.dark { background:var(--grad-ink); color:#fff; }
.pv-band.light { background:linear-gradient(180deg,#fff,var(--c50)); border-bottom:1px solid var(--line); }
.pv-ghost { position:absolute; z-index:-1; right:-2%; bottom:-4%; font-size:clamp(88px,16vw,230px); font-weight:800;
  letter-spacing:-.04em; line-height:.8; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.08);
  pointer-events:none; user-select:none; }
.pv-band.light .pv-ghost { -webkit-text-stroke-color:rgba(16,33,58,.06); right:auto; left:-2%; }
.pv-inner { display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,5vw,80px); align-items:end; }
.pv-inner.flip .pv-head { order:2; } .pv-inner.flip .pv-desc { order:1; }
.pv-kick { display:block; font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#7fd7ee; margin-bottom:18px; }
.pv-band.light .pv-kick { color:var(--brand); }
.pv-head h2 { font-size:clamp(28px,3.5vw,48px); letter-spacing:-.033em; line-height:1.17; text-wrap:balance; }
.pv-band.dark .pv-head h2 { color:#fff; }
.pv-desc { font-size:clamp(15px,1.4vw,17px); line-height:1.9; color:rgba(255,255,255,.78); }
.pv-band.light .pv-desc { color:var(--muted); }
@media (max-width:820px){ .pv-inner { grid-template-columns:1fr; gap:20px; align-items:start; }
  .pv-inner.flip .pv-head { order:1; } .pv-inner.flip .pv-desc { order:2; } }

/* philosophy — core values as hairline-divided columns */
.pval-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--ink); }
.pval { padding:clamp(30px,3.4vw,48px) clamp(20px,2.4vw,40px) clamp(34px,4vw,58px) 0; }
.pval + .pval { border-left:1px solid var(--line); padding-left:clamp(20px,2.4vw,40px); }
.pval-num { font-size:clamp(38px,4.4vw,60px); font-weight:800; letter-spacing:-.04em; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--c300); font-variant-numeric:tabular-nums; transition:.35s var(--ease); }
.pval:hover .pval-num { -webkit-text-stroke-color:var(--brand); }
.pval h3 { margin-top:clamp(44px,6vw,84px); font-size:clamp(21px,2.2vw,29px); letter-spacing:-.03em; line-height:1.25; text-wrap:balance; }
.pval p { margin-top:15px; color:var(--muted); font-size:15px; line-height:1.75; text-wrap:pretty; }
@media (max-width:760px){ .pval-grid { grid-template-columns:1fr; }
  .pval { padding:26px 0; } .pval + .pval { border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .pval h3 { margin-top:18px; } }

.vm-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,40px); margin-top:clamp(24px,3vw,40px); }
.vm-card { position:relative; padding:clamp(32px,3.4vw,48px); border:1px solid var(--line); border-radius:var(--r-lg);
  background:#fff; overflow:hidden; transition:.35s var(--ease); }
.vm-card::before { content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--grad); }
.vm-card:hover { box-shadow:0 24px 52px -30px rgba(20,40,80,.4); transform:translateY(-4px); }
.vm-card .vm-idx { position:absolute; top:clamp(24px,3vw,40px); right:clamp(28px,3vw,44px); font-size:clamp(34px,3.4vw,52px);
  font-weight:800; letter-spacing:-.04em; line-height:1; color:transparent; -webkit-text-stroke:1.4px var(--c200); font-variant-numeric:tabular-nums; }
.vm-card .vm-tag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); margin-bottom:18px; }
.vm-card h3 { font-size:clamp(23px,2.6vw,34px); letter-spacing:-.03em; line-height:1.2; max-width:14ch; }
.vm-card p { margin-top:18px; color:var(--muted); font-size:clamp(15.5px,1.3vw,17.5px); line-height:1.7; }
@media (max-width:760px){ .vm-grid { grid-template-columns:1fr; } }

.value-card { position:relative; padding:clamp(30px,3vw,40px) clamp(28px,2.6vw,34px) clamp(32px,3vw,40px);
  border:1px solid var(--line); border-top:3px solid var(--brand); border-radius:0 0 var(--r-lg) var(--r-lg);
  background:#fff; transition:.35s var(--ease); }
.value-card:hover { box-shadow:0 24px 52px -30px rgba(20,40,80,.4); transform:translateY(-4px); }
.value-card .value-ico { display:grid; place-items:center; width:56px; height:56px; border-radius:15px; margin-bottom:22px;
  background:linear-gradient(150deg, rgba(53,86,142,.1), rgba(26,167,214,.08)); color:var(--brand); border:1px solid rgba(53,86,142,.14); }
.value-card .value-ico svg { width:27px; height:27px; }
.value-card .value-num { display:inline-block; font-size:15px; font-weight:800; letter-spacing:.08em;
  line-height:1; color:var(--c400); margin-bottom:10px; font-variant-numeric:tabular-nums; }
.value-card h3 { font-size:21px; letter-spacing:-.02em; }
.num-badge { width:46px; height:46px; border-radius:12px; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:800; font-size:19px; flex-shrink:0; box-shadow:0 8px 18px rgba(53,86,142,.3); }

/* philosophy 2026 — from abstract slogan to operational editorial system */
.philo-command{padding:clamp(58px,8vw,112px) 0;background:#fff}
.philo-command-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(30px,5vw,76px);align-items:end}
.philo-command-copy h2{margin-top:14px;font-size:clamp(32px,4.8vw,66px);line-height:1.02;letter-spacing:-.06em;max-width:15ch}
.philo-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.philo-proof div{min-height:132px;padding:19px 18px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#fff,var(--c50));box-shadow:var(--sh-sm)}
.philo-proof dt{font-size:11px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--meta)}
.philo-proof dd{margin-top:20px;font-size:clamp(23px,2.6vw,36px);font-weight:850;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.philo-split{position:relative;isolation:isolate;overflow:hidden;padding:clamp(62px,8vw,118px) 0}
.philo-split-dark{background:var(--grad-ink);color:#fff}
.philo-split-dark::before{content:"";position:absolute;inset:auto -10% -48% 42%;height:70%;z-index:-1;background:radial-gradient(circle,rgba(127,215,238,.22),transparent 62%)}
.philo-split-light{background:linear-gradient(180deg,#fff,var(--c50));border-bottom:1px solid var(--line)}
.philo-split-inner{display:grid;grid-template-columns:minmax(180px,.42fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.philo-split-label{position:sticky;top:calc(var(--header-safe-h) + var(--subnav-h) + 28px);display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-top:2px solid currentColor;padding-top:18px;color:rgba(255,255,255,.88)}
.philo-split-light .philo-split-label{color:var(--ink)}
.philo-split-label span{font-family:var(--font-mono);font-size:12px;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
.philo-split-label b{font-size:clamp(34px,4vw,58px);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.philo-split-copy h2{font-size:clamp(34px,5.2vw,72px);line-height:1.02;letter-spacing:-.06em;max-width:13ch;color:inherit}
.philo-split-copy p{margin-top:clamp(20px,2.5vw,34px);max-width:760px;font-size:clamp(16px,1.5vw,19px);line-height:1.86;color:rgba(255,255,255,.88)}
.philo-split-light .philo-split-copy p{color:var(--muted)}
.philo-principles{background:#19202e;color:#fff}
.philo-principles .section-head h2{color:#fff}
.philo-principles .section-head p,.philo-principles .eyebrow{color:rgba(255,255,255,.84)}
.philo-principle-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.philo-principle{position:relative;min-height:360px;padding:clamp(26px,3vw,42px);border-left:1px solid rgba(255,255,255,.14)}
.philo-principle:first-child{border-left:0}
.philo-principle-no{display:block;font-family:var(--font-mono);font-size:12px;font-weight:850;letter-spacing:.18em;color:#7fd7ee}
.philo-principle-k{position:absolute;right:clamp(22px,2.6vw,38px);top:clamp(22px,2.8vw,38px);font-family:var(--font-mono);font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.34)}
.philo-principle h3{margin-top:clamp(90px,9vw,138px);font-size:clamp(21px,2.3vw,31px);line-height:1.14;letter-spacing:-.04em;color:#fff}
.philo-principle p{margin-top:15px;color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.72}
.philo-values{background:#fff}

/* family sites — official external-channel directory */
.family-stage{padding:clamp(58px,8vw,112px) 0;background:linear-gradient(180deg,#fff,#f6f8fb)}
.family-stage-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.64fr);gap:clamp(24px,4.5vw,66px);align-items:end;margin-bottom:clamp(28px,4vw,54px)}
.family-stage-head h2{font-size:clamp(32px,4.8vw,64px);line-height:1.02;letter-spacing:-.06em;max-width:12ch}
.family-stage-head p{color:var(--muted);font-size:15.5px;line-height:1.74;max-width:46ch}
.family-directory-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.family-directory-card{position:relative;display:grid;grid-template-columns:auto minmax(120px,160px) minmax(0,1fr);grid-template-areas:"no logo body" "no logo meta";gap:18px 24px;align-items:center;min-height:260px;padding:clamp(24px,3vw,38px);border:1px solid rgba(15,23,42,.1);border-radius:30px;background:#192233;color:#fff;overflow:hidden;text-decoration:none;box-shadow:0 28px 82px rgba(15,23,42,.14);transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.family-directory-card::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 80% 12%,rgba(127,215,238,.22),transparent 36%),linear-gradient(150deg,#151f31,#161b26 68%)}
.family-directory-card>*{position:relative;z-index:1}
.family-directory-card:hover,.family-directory-card:focus-visible{transform:translateY(-6px);border-color:rgba(127,215,238,.48);box-shadow:0 36px 96px rgba(15,23,42,.24)}
.family-directory-no{grid-area:no;align-self:start;font-family:var(--font-mono);font-size:12px;font-weight:850;letter-spacing:.18em;color:#7fd7ee}
.family-directory-logo{grid-area:logo;display:flex;align-items:center;justify-content:center;min-height:132px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:22px}
.family-directory-logo img{max-width:100%;max-height:86px;width:auto;height:auto;object-fit:contain}
.family-directory-body{grid-area:body;align-self:end}
.family-directory-body strong{display:block;font-size:clamp(25px,2.8vw,38px);letter-spacing:-.045em;color:#fff}
.family-directory-body em{display:block;margin-top:10px;font-style:normal;color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.55}
.family-directory-meta{grid-area:meta;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.82);font-size:13px}
.family-directory-meta b{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:13px;white-space:nowrap}
.family-directory-meta svg{width:15px;height:15px}
.family-note-section{background:#fff}
.family-note{display:grid;grid-template-columns:minmax(120px,.22fr) minmax(0,1fr);gap:clamp(18px,3vw,42px);padding:clamp(24px,3vw,36px);border:1px solid var(--line);border-radius:22px;background:var(--c50)}
.family-note span{font-family:var(--font-mono);font-size:12px;font-weight:850;letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.family-note p{color:var(--c700);font-size:15.5px;line-height:1.75}
@media (max-width:900px){
  .philo-command-grid,.family-stage-head{grid-template-columns:1fr}
  .philo-split-inner{grid-template-columns:1fr}
  .philo-split-label{position:static}
  .philo-principle-grid,.family-directory-board{grid-template-columns:1fr}
  .philo-principle{min-height:0;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .philo-principle:first-child{border-top:0}
  .philo-principle h3{margin-top:70px}
}
@media (max-width:640px){
  .philo-proof{grid-template-columns:1fr}
  .philo-proof div{min-height:0}
  .family-directory-card{grid-template-columns:1fr;grid-template-areas:"no" "logo" "body" "meta";min-height:0;border-radius:24px}
  .family-directory-logo{min-height:104px}
  .family-directory-meta{align-items:flex-start;flex-direction:column}
  .family-note{grid-template-columns:1fr}
}

/* ESG pillar */
/* ESG — editorial lead + pillar bands */
.esg-lead { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(28px,5vw,64px); align-items:start; }
.esg-lead-head h2 { font-size:clamp(26px,3vw,40px); letter-spacing:-.032em; line-height:1.14; margin-top:14px; }
.esg-lead-body p { color:var(--muted); font-size:clamp(15px,1.35vw,17px); line-height:1.78; }
.esg-facts { display:flex; flex-wrap:wrap; gap:clamp(26px,3.4vw,50px); margin-top:clamp(26px,3vw,36px); }
.esg-facts > div { position:relative; padding-top:15px; }
.esg-facts > div::before { content:""; position:absolute; top:0; left:0; width:28px; height:2px; background:var(--brand); }
.esg-facts b { display:block; font-size:clamp(22px,2.4vw,30px); font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.esg-facts span { display:block; margin-top:7px; font-size:13px; color:var(--muted); }

@media (max-width:820px){ .esg-lead { grid-template-columns:1fr; gap:24px; } }
/* ESG commitment band */
.esg-commit { position:relative; overflow:hidden; isolation:isolate; background:var(--grad-ink); color:#fff; padding:clamp(56px,7vw,104px) 0; }
.ecommit { max-width:920px; }
.ecommit-eyebrow { display:block; font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#7fd7ee; margin-bottom:22px; }
.ecommit-lead { font-size:clamp(22px,3vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.32; color:#fff; }
.ecommit-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(28px,3.4vw,42px); }
.ecommit-tags span { font-size:13.5px; font-weight:600; color:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.22); border-radius:var(--r-pill); padding:9px 16px; }

/* declarations / list rows */
.decl { display:flex; gap:22px; padding:26px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.decl:last-child { border-bottom:0; }
.decl p { color:var(--c700); font-size:16.5px; line-height:1.7; padding-top:8px; }

/* ── Ethics: Charter (기업윤리헌장) + Code (윤리강령) ─────────────────── */
.section-tight { padding-bottom:clamp(40px,5vw,72px); }



.info-block { border:1px solid var(--line); border-radius:var(--r); padding:30px; margin-bottom:18px; }
.info-block h3 { font-size:19px; display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.info-block h3 .b { width:30px; height:30px; border-radius:9px; background:var(--c50); color:var(--brand); display:grid; place-items:center; }
.info-block h3 .b svg{ width:17px;height:17px; }
.bullet { display:flex; flex-direction:column; gap:11px; }
.bullet li { position:relative; padding-left:24px; color:var(--c700); font-size:15.5px; line-height:1.6; }
.bullet li::before { content:""; position:absolute; left:4px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--brand); }


/* world map (global presence) — light */
.netmap { background:linear-gradient(180deg,#f7f9fc 0%,#eef2f8 100%); }
/* ONE inline SVG map — land, lines, dots and labels share a single coordinate system.
   Land geometry: Natural Earth, projected in inc/map-asia.php (equirectangular, phi1=20N).
   viewBox spans lon ~84..150E / lat ~48N..12S so Japan, eastern India and Timor stay in frame. */
.netmap-svg { display:block; width:100%; max-width:640px; margin:0 auto; overflow:hidden; }
.wm-land { fill:#c8d1e0; stroke:#f3f6fa; stroke-width:.8; filter:drop-shadow(0 16px 32px rgba(16,33,58,.10)); }
.wm-lines-g path { fill:none; stroke:var(--brand); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:4 5; opacity:.5; }
.wm-comets path { fill:none; stroke:none; }
.wm-pt { fill:var(--brand); }
.wm-dotg.hq .wm-pt { filter:drop-shadow(0 0 6px rgba(53,86,142,.55)); }
.wm-ring { fill:none; stroke:var(--brand); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; }
.wm-lbl rect { fill:#fff; }
.wm-lbl text { text-anchor:middle; font-family:inherit; }
.wm-lbl .t1 { font-size:14px; font-weight:700; fill:var(--ink); letter-spacing:-.01em; }
.wm-lbl .t2 { font-size:11.5px; font-weight:600; fill:var(--brand); }
/* small screens: scale label groups up, anchored at the dot-facing edge so the
   dot gap stays constant (above/left/below = label position relative to its dot) */
@media (max-width:680px){
  .wm-lbl { transform-box:fill-box; }
  .wm-lbl.above { transform-origin:50% 115%;  transform:scale(1.3); }
  .wm-lbl.left  { transform-origin:108% 50%;  transform:scale(1.3); }
  .wm-lbl.below { transform-origin:50% -15%;  transform:scale(1.3); }
}
@media (max-width:520px){
  .wm-lbl.above { transform:scale(1.6); }
  .wm-lbl.left  { transform:scale(1.6); }
  .wm-lbl.below { transform:scale(1.6); }
}
@media (prefers-reduced-motion:no-preference){
  .wm-lines-g path { animation:wmflow 1.15s linear infinite; }
  @keyframes wmflow { to { stroke-dashoffset:-9; } }
  /* comet tail — a bright segment sweeps the arc; the dot packet rides as its head */
  .wm-comets path { fill:none; stroke:var(--brand); stroke-width:2.6; stroke-linecap:round;
    stroke-dasharray:16 84; stroke-dashoffset:100; opacity:0;
    animation:wmcomet 3.2s linear infinite; }
  @keyframes wmcomet {
    0%   { stroke-dashoffset:100; opacity:0; }
    6%   { opacity:.7; }
    80%  { opacity:.7; }
    96%,100% { stroke-dashoffset:-16; opacity:0; } }
  .wm-pkts circle { fill:var(--brand); opacity:0;
    animation:wmpkt 3.2s linear infinite; }
  .wm-pkts circle:nth-child(2){ animation-delay:1.05s; }
  .wm-pkts circle:nth-child(3){ animation-delay:2.1s; }
  @keyframes wmpkt { 0%{opacity:0} 7%{opacity:1} 80%{opacity:1} 93%,100%{opacity:0} }
  .wm-ring { animation:wmring 2.4s ease-out infinite; animation-delay:calc(var(--i,0) * .3s); }
  .wm-ring.d2 { animation-delay:calc(var(--i,0) * .3s - 1.2s); }
  @keyframes wmring { 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(3); opacity:0; } }
  /* entrance: dots then labels pop in sequence */
  .netmap-svg[data-reveal]:not(.in) .wm-dotg,
  .netmap-svg[data-reveal]:not(.in) .wm-lbl,
  .netmap-svg[data-reveal]:not(.in) .wm-lines-g { opacity:0; }
  .netmap-svg[data-reveal].in .wm-lines-g { animation:wmfade .9s ease .2s both; }
  .netmap-svg[data-reveal].in .wm-dotg { transform-box:fill-box; transform-origin:center;
    animation:wmpop .55s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(.25s + var(--i,0) * .15s); }
  .netmap-svg[data-reveal].in .wm-lbl { animation:wmfade .5s ease both; animation-delay:calc(.4s + var(--i,0) * .15s); }
  @keyframes wmpop { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } }
  @keyframes wmfade { from { opacity:0; } to { opacity:1; } }
}
@media (prefers-reduced-motion:reduce){
  .wm-pkts, .wm-radar-g { display:none; }   /* SMIL ignores reduced-motion — hide the moving groups */
  .wm-ring { opacity:0; }
}

/* network sites */
.net-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,2.6vw,32px); }
.net-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:.3s var(--ease); display:flex; flex-direction:column; }
.net-card:hover { box-shadow:var(--sh-lg); transform:translateY(-6px); border-color:transparent; }
.net-photo { aspect-ratio:16/9; overflow:hidden; background:var(--c100); }
.net-photo img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.net-card:hover .net-photo img { transform:scale(1.05); }
.net-body { padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,32px) clamp(22px,2.4vw,30px); display:flex; flex-direction:column; flex:1; }
.net-card .net-flag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-bottom:8px; }
.net-card h3 { font-size:20px; letter-spacing:-.02em; }
.net-meta { margin:18px 0 0; display:grid; grid-template-columns:90px 1fr; gap:8px 16px; color:var(--c700); font-size:14px; line-height:1.5; }
.net-meta dt { color:var(--muted); font-weight:500; font-size:13px; padding-top:1px; }
.net-meta dd { color:var(--c800); margin:0; }
.net-meta dd a { color:var(--brand); }
.net-strength { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; line-height:1.6; }
@media (max-width:760px){
  .net-grid { grid-template-columns:1fr; }
  .net-meta { grid-template-columns:80px 1fr; gap:6px 12px; font-size:13.5px; }
}

/* logo marquee (home trust strip) */
/* customer-logo strip embedded in the company introduction */
.intro-logos { margin:0 0 clamp(32px,4vw,52px); padding:clamp(20px,2.6vw,32px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.intro-logos-lab { display:block; text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c500); margin-bottom:14px; }
.trust-strip { padding:38px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.trust-strip .lab { text-align:center; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--meta); margin-bottom:24px; }
.marquee { overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee-track { display:flex; align-items:center; gap:60px; width:max-content; animation:marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee img { height:30px; width:auto; opacity:.95; transition:.3s var(--ease); }
.marquee img:hover { opacity:1; transform:scale(1.06); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* logo wall (partners / customers) — logo absolutely pinned to the cell so it can
   never outgrow it (percentage max-height is unreliable inside a grid area) */
.logo-wall { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.logo-cell { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); aspect-ratio:16/7;
  overflow:hidden; transition:.3s var(--ease); }
.logo-cell img { position:absolute; inset:0; width:100%; height:100%; padding:20px 22px;
  object-fit:contain; opacity:.95; transition:.35s var(--ease); }
.logo-cell:hover { box-shadow:var(--sh-md); transform:translateY(-4px); border-color:transparent; }
.logo-cell:hover img { opacity:1; transform:scale(1.04); }
.partner-logo-wall { margin-top:6px; }
.solution-group { margin-top:clamp(28px,4vw,44px); }
.solution-group h3 { display:flex; align-items:center; gap:12px; font-size:18px; margin-bottom:18px; }
.solution-group h3 .tag { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand);
  background:color-mix(in srgb,var(--brand) 10%,white); padding:4px 11px; border-radius:var(--r-pill); }
.sg-count { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.sg-desc { color:var(--muted); font-size:14.5px; line-height:1.62; margin:-4px 0 20px; max-width:74ch; }
/* solution partners — field matrix (label/desc left, logos right) */
.sol-matrix { border-top:1px solid var(--ink); }
.sol-row { display:grid; grid-template-columns:clamp(200px,24%,272px) 1fr; gap:clamp(24px,3vw,52px); align-items:start; padding:clamp(26px,3vw,40px) 0; border-bottom:1px solid var(--line); }
.sol-field-head { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.sol-field .sg-count { margin-left:0; }
.sol-field .sg-desc { margin:0; font-size:14px; max-width:34ch; }
.sol-logos { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:980px){ .sol-logos { grid-template-columns:repeat(4,1fr); } .sol-logos .logo-cell img { padding:12px 14px; } }
@media (max-width:860px){ .sol-row { grid-template-columns:1fr; gap:16px; } .sol-logos { grid-template-columns:repeat(3,1fr); } .sol-field .sg-desc { max-width:none; } }
@media (max-width:460px){ .sol-logos { grid-template-columns:repeat(2,1fr); } }
@media (max-width:1080px){ .logo-wall{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:860px){ .logo-wall{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .logo-wall{ grid-template-columns:repeat(2,1fr); } }

/* history heritage photos */
.history-gallery { margin-top:clamp(64px,8vw,112px); padding-top:clamp(42px,5vw,72px); border-top:1px solid var(--line); }
.heritage { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:clamp(32px,4vw,52px); }
.heritage figure { margin:0; }
.heritage .ph { aspect-ratio:4/3; border-radius:var(--r-sm); overflow:hidden; background:var(--c100); box-shadow:var(--sh-sm); }
.heritage .ph img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.heritage figure:hover .ph img { transform:scale(1.06); }
.heritage figcaption { margin-top:10px; font-size:13px; color:var(--muted); line-height:1.5; text-align:center; }
@media (max-width:860px){ .heritage{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .heritage{ grid-template-columns:1fr; } }

/* news cards */
/* news detail article */

/* news (legacy list, kept for home preview) */
.news-list { border-top:2px solid var(--ink); }
.news-row { display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; padding:24px 8px;
  border-bottom:1px solid var(--line); transition:.2s; }
.news-row:hover { background:var(--c50); }
.news-row .badge { font-size:12px; font-weight:700; padding:5px 11px; border-radius:var(--r-pill); background:var(--c100); color:var(--c600); white-space:nowrap; }
.news-row .badge.pin { background:color-mix(in srgb,var(--brand) 12%,white); color:var(--brand); }
.news-row h3 { font-size:17.5px; font-weight:600; }
.news-row h3 small { display:block; color:var(--muted); font-size:14px; font-weight:400; margin-top:5px; }
.news-row .date { color:var(--meta); font-size:14px; white-space:nowrap; }

/* home news: featured card + compact list */
.news-home-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,3vw,40px); margin-top:clamp(28px,3.4vw,44px); align-items:stretch; }
/* two-board layout (뉴스 | 공고) — CEO 2026-07-21 */
.news-home-cols { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); margin-top:clamp(28px,3.4vw,44px); align-items:start; }
.nh-col-t { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:10px; }
.nh-col-t span { font-size:19px; font-weight:800; letter-spacing:-.02em; }
.nh-col-t a { font-size:13px; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
.nh-col-t a svg { width:14px; height:14px; }
.section--news .nh-col-t span { color:#fff; }
.section--news .nh-col-t a { color:rgba(255,255,255,.71); }
.section--news .nh-col-t a:hover { color:#fff; }
@media (max-width:860px){ .news-home-cols { grid-template-columns:1fr; gap:28px; } }
.news-feature { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:.35s var(--ease); }
.news-feature:hover { box-shadow:0 26px 56px -30px rgba(20,40,80,.42); transform:translateY(-4px); border-color:transparent; }
.nf-thumb { aspect-ratio:16/9; background:var(--c50); display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--line); }
.nf-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.news-feature:hover .nf-thumb img { transform:scale(1.05); }
.nf-thumb.empty { background:linear-gradient(140deg,var(--c50),var(--c100)); }
.nf-thumb.empty .doc { width:64px; height:64px; color:var(--c300); }
.nf-body { padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:14px; flex:1; }
.nf-meta { display:flex; align-items:center; gap:12px; }
.nf-body .badge { font-size:12px; font-weight:700; padding:5px 12px; border-radius:var(--r-pill); background:color-mix(in srgb,var(--brand) 12%,white); color:var(--brand); white-space:nowrap; }
.nf-body .date { color:var(--meta); font-size:13.5px; }
.nf-body h3 { font-size:clamp(19px,1.8vw,24px); font-weight:700; line-height:1.35; color:var(--ink); letter-spacing:-.02em; flex:1; }
.nf-more { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--brand); }
.nf-more svg { width:17px; height:17px; }
.news-home-list { display:flex; flex-direction:column; border-top:2px solid var(--ink); }
.nh-row { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:clamp(16px,1.9vw,22px) 6px;
  border-bottom:1px solid var(--line); transition:.2s var(--ease); }
.nh-row:last-child { border-bottom:0; }
.nh-row:hover { padding-left:14px; }
.nh-row .badge { font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:var(--r-pill); background:var(--c100); color:var(--c600); white-space:nowrap; }
.nh-row .badge.pin { background:color-mix(in srgb,var(--brand) 12%,white); color:var(--brand); }
/* 2 lines, not 1: longer English headlines lost their final word to the clamp
   (e.g. "…Two-Stage Centrifugal…" dropped "Compressor"). */
.nh-row h3 { font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nh-row .date { color:var(--meta); font-size:13px; white-space:nowrap; }
/* phones: show whole headlines — wrap instead of clamping to one line */
@media (max-width:640px){
  .nh-row h3 { -webkit-line-clamp:unset; display:block; }
  .rel-item .n, .rel-spec { white-space:normal; overflow:visible; text-overflow:clip; }
}
/* fold: badge+date ride the first row, the headline gets the full width below */
@media (max-width:400px){
  .nh-row { grid-template-columns:auto 1fr; grid-template-areas:"badge date" "title title"; row-gap:6px; }
  .nh-row .badge { grid-area:badge; justify-self:start; }
  .nh-row h3 { grid-area:title; }
  .nh-row .date { grid-area:date; justify-self:end; }
}
@media (max-width:860px){ .news-home-grid { grid-template-columns:1fr; } }

/* forms */
.form-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,38px); box-shadow:0 30px 70px -46px rgba(20,40,80,.4); }
.form-card-head { margin-bottom:clamp(18px,2vw,24px); padding-bottom:16px; border-bottom:1px solid var(--line); }
.form-card-head h2 { font-size:clamp(19px,2vw,24px); letter-spacing:-.02em; }
.form-card-head p { margin-top:8px; color:var(--muted); font-size:14.5px; line-height:1.6; }
.field { margin-bottom:15px; }
.field label { display:block; font-weight:600; font-size:13.5px; margin-bottom:7px; color:var(--c800); letter-spacing:-.01em; }
.field label .req { color:#e04848; margin-left:3px; }
.input, .textarea, select.input { width:100%; border:1px solid var(--c200); border-radius:var(--r-sm);
  padding:11px 14px; font:inherit; font-size:15px; background:var(--c50); transition:border-color .2s, box-shadow .2s, background .2s; color:var(--text); }
.form-row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:640px){ .form-row3 { grid-template-columns:1fr; gap:0; } }
.form-foot { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:end; margin-top:4px; }
@media (max-width:640px){ .form-foot { grid-template-columns:1fr; gap:0; } }
.cf-captcha-row { display:flex; align-items:center; gap:10px; }
.cf-captcha-row .cf-q { font-size:15.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cf-captcha-row .input { width:86px; text-align:center; }
.form-foot .check { padding-bottom:12px; }
.input:hover, .textarea:hover { border-color:var(--c300); }
.input:focus, .textarea:focus { border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(53,86,142,.14); outline:none; }
.input::placeholder, .textarea::placeholder { color:var(--c400); }
a:focus-visible, .btn:focus-visible, .lang-btn:focus-visible, .gnb > li > a:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }
@media (forced-colors:active){ .input:focus, .textarea:focus { outline:2px solid Highlight; } }
.textarea { min-height:128px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.check, .field label.check { display:flex; align-items:center; gap:10px; margin-bottom:0; font-size:15px; font-weight:500; color:var(--c700); cursor:pointer; user-select:none; line-height:1.4; }
.check input { flex:none; width:19px; height:19px; margin:0; accent-color:var(--brand); cursor:pointer; }
/* hero scroll cue — chevron drifting down; anchored inside .hero-cine-inner so it
   always sits above the stats/logo bands instead of colliding with the white strip */
.hero-scrollcue { position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:6;
  width:44px; height:52px; display:flex; align-items:flex-start; justify-content:center; opacity:.85;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.5)); }
.hero-scrollcue span { display:block; width:12px; height:12px; margin-top:8px;
  border-right:2px solid rgba(255,255,255,.9); border-bottom:2px solid rgba(255,255,255,.9); transform:rotate(45deg); }
@media (prefers-reduced-motion:no-preference){
  .hero-scrollcue span { animation:scrollcue 2.1s cubic-bezier(.45,0,.4,1) infinite; }
  @keyframes scrollcue { 0%{ transform:translateY(0) rotate(45deg); opacity:0; } 35%{ opacity:1; }
    70%,100%{ transform:translateY(16px) rotate(45deg); opacity:0; } }
}
/* marquee pauses while inspected */
.marquee:hover .marquee-track { animation-play-state:paused; }

/* skip-to-content — hidden off-screen until keyboard focus lands on it */
.skip { position:absolute; left:-9999px; top:0; z-index:999; background:#fff; color:var(--ink);
  padding:12px 18px; border-radius:0 0 10px 0; font-weight:700; box-shadow:var(--sh-md); }
.skip:focus { left:0; }

/* back-to-top — glassy disc with a scroll-progress ring (--sp: 0..100, set by main.js) */
.backtop { position:fixed; right:calc(24px + env(safe-area-inset-right,0px)); bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:80; width:52px; height:52px; border:0; padding:0;
  border-radius:50%; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--brand); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 8px 26px -8px rgba(16,33,58,.35), inset 0 0 0 1px rgba(16,33,58,.06);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s, visibility .3s, transform .3s var(--ease), background .25s, color .25s; }
.backtop.show { opacity:1; visibility:visible; transform:none; }
.backtop:hover { background:var(--brand); color:#fff; transform:translateY(-3px); }
.backtop:active { transform:scale(.95); }
.backtop .bt-ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none; }
.backtop .bt-ring circle { fill:none; stroke-width:2.5; }
.backtop .bt-ring .bg { stroke:color-mix(in srgb, var(--brand) 13%, transparent); }
.backtop .bt-ring .bar { stroke:currentColor; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--sp, 0)); }
.backtop .bt-arrow { width:20px; height:20px; }
/* on phones the quick-action bar owns the bottom edge — the disc floats above it */
@media (max-width:640px){ .backtop { right:calc(14px + env(safe-area-inset-right,0px)); bottom:calc(72px + env(safe-area-inset-bottom,0px)); width:46px; height:46px; }
  /* the opaque disc overlaps the text column on phones — hide it while scrolling down (reading),
     bring it back on scroll-up. Desktop keeps it always visible (wide margins, no overlap). */
  .backtop.hide { opacity:0; visibility:hidden; transform:translateY(10px); pointer-events:none; } }

/* ===== mobile quick-action bar — phone-only UI (inquiry / directions) ===== */
.mquick { position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  grid-auto-flow:column; grid-auto-columns:1fr;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border-top:1px solid var(--line); box-shadow:0 -10px 30px -18px rgba(16,33,58,.3);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transition:transform .3s var(--ease); }
.mquick a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:56px; padding:8px 4px 7px; font-size:11px; font-weight:700; color:var(--c600); letter-spacing:-.01em; }
.mquick a svg { width:21px; height:21px; color:var(--brand); }
.mquick a:active { background:var(--c50); }
.mquick a + a { border-left:1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.mquick.hide { transform:translateY(110%); }
@media (max-width:640px){
  .mquick { display:grid; }
}
/* keep the disc clear of the footer's right-aligned links on narrow laptops */
@media (max-width:1320px) and (min-width:641px){ .footer-bottom { padding-right:84px; } }

/* white corporate CTA on dark bands */
.btn-cta { display:inline-flex; align-items:center; justify-content:center; height:var(--btn-h); padding:0 38px;
  border-radius:var(--r-pill); background:var(--btn-ivory); color:var(--ink); font-weight:700; font-size:15.5px; letter-spacing:-.01em;
  transition:transform .2s var(--ease), background .2s; }
.btn-cta:hover { transform:translateY(-2px); background:var(--btn-ivory-h); }
.btn-cta:active { transform:translateY(0) scale(.99); }

/* Keyboard parity for interactive surfaces whose visual affordance was previously hover-only. */
.gnb > li:focus-within > a::after, .gnb > li > a[aria-current="page"]::after { transform:scaleX(1); }
.gnb .submenu a[aria-current="page"] { background:var(--c50); color:var(--brand); font-weight:700; }
.gnb .submenu a:focus-visible, .lang-menu a:focus-visible,
.drawer-nav a:focus-visible, .drawer-foot a:focus-visible { background:var(--c50); color:var(--brand); }
body.is-home .gnb .submenu a:focus-visible { background:rgba(255,255,255,.1); color:#fff; }
body.is-home .lang-menu a:focus-visible { background:rgba(255,255,255,.1); }
.lang-btn:focus-visible { background:rgba(255,255,255,.12); }
body:not(.is-home) .lang-btn:focus-visible { background:var(--c50); }
.drawer-nav > li.active > a, .drawer-nav > li.active > .drawer-row > a, .drawer-sub a[aria-current="page"] { color:var(--brand); }
.btn-primary:focus-visible { background:var(--btn-ink-h); transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(20,24,30,.5); }
.btn-outline:focus-visible { border-color:var(--brand); color:var(--brand); transform:translateY(-2px); box-shadow:var(--sh); }
.section--news .btn-outline:focus-visible { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.71); }
.btn-text:focus-visible svg { transform:translateX(4px); }
.hero-cine .hero-cta-ghost:focus-visible { border-color:rgba(255,255,255,.78); background:rgba(255,255,255,.07); }
.btn-fill.brand:focus-visible { background:var(--btn-ivory-h); }
.btn-fill.soft:focus-visible { background:var(--btn-ink); color:#fff; box-shadow:inset 0 0 0 1px var(--btn-ink); }
.feature-card:focus-visible { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.feature-card:focus-visible::before { transform:scale(1.06); }
.feature-card:focus-visible .more svg { transform:translateX(5px); }
.pidx-item:focus-visible { background:rgba(255,255,255,.035); }
.pidx-item:focus-visible .pidx-plate { transform:translateY(-3px); background:radial-gradient(circle at 50% 45%, rgba(198,218,245,.40), rgba(150,186,226,.11) 49%, transparent 75%); }
.pidx-item:focus-visible .pidx-plate img { transform:scale(1.05); }
.pidx-item:focus-visible .pidx-go { background:rgba(127,215,238,.12); border-color:rgba(127,215,238,.5); transform:translateX(4px); }
.esg-card:focus-visible { transform:none; background:rgba(255,255,255,.04); }
.esg-card:focus-visible .esg-more svg { transform:translateX(4px); }
.family-card:focus-visible { background:rgba(255,255,255,.035); border-top-color:rgba(127,215,238,.55); }
.family-card:focus-visible .family-logo { transform:translateY(-3px); }
.family-card:focus-visible .family-url { color:#a8e6f6; }
.family-card:focus-visible .family-url svg { transform:translateX(4px); }
.news-feature:focus-visible { box-shadow:0 26px 56px -30px rgba(20,40,80,.42); transform:translateY(-4px); border-color:transparent; }
.news-feature:focus-visible .nf-thumb img { transform:scale(1.05); }
.nh-row:focus-visible { padding-left:14px; background:rgba(255,255,255,.05); }
a.cta-info:focus-visible { background:rgba(255,255,255,.09); border-color:rgba(127,215,238,.4); transform:translateX(4px); }
.btn-cta:focus-visible { transform:translateY(-2px); background:#eef2f8; }
.backtop:focus-visible { background:var(--brand); color:#fff; transform:translateY(-3px); }
.footer-col a:focus-visible, .footer-legal a:focus-visible, .footer-bottom .links a:focus-visible { color:#fff; }
/* submit — muted navy-slate, soft top light, arrow nudges on hover (calm, not loud) */
.btn-submit { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; height:var(--btn-h); border:0; border-radius:var(--r-pill);
  background:var(--btn-ink); color:#fff;
  font:inherit; font-size:15.5px; font-weight:700; letter-spacing:-.01em; cursor:pointer;
  box-shadow:0 14px 28px -18px rgba(20,24,30,.5);
  transition:background .25s var(--ease), box-shadow .25s, transform .15s; }
.btn-submit svg { width:17px; height:17px; flex:none; transition:transform .25s var(--ease); }
.btn-submit:hover { background:var(--btn-ink-h);
  box-shadow:0 16px 32px -18px rgba(20,24,30,.6); }
.btn-submit:hover svg { transform:translateX(4px); }
.btn-submit:active { transform:scale(.99); }
/* 이중 제출 방지로 main.js 가 제출 직후 버튼을 잠근다 — 잠긴 상태가 눈에 보여야 사용자가
   '안 눌렸나' 하고 다시 누르지 않는다. hover 효과도 함께 끈다.
   ※ 문의·신고 폼이 있는 contact.php·hotline.php 는 페이지 <style> 에서
     `.compx .btn-submit{cursor:pointer}`(0,2,0) 와 `.compx .btn-submit:hover{transform;box-shadow}`(0,3,0) 를
     style.css 보다 뒤에 선언한다. 명시도가 같으면 뒤가 이기므로 아래 규칙이 죽어 있었다
     (자기검증에서 발견 — opacity 만 우연히 살아 있었다). form 을 한 단계 얹어 (0,2,1)/(0,3,1) 로 올린다.
     배경색은 페이지마다 달라(그 두 폼은 시안) 덮지 않는다 — 잠금 표시는 opacity 로만. */
.btn-submit:disabled, form .btn-submit:disabled { opacity:.62; cursor:progress; }
.btn-submit:disabled:hover, form .btn-submit:disabled:hover { transform:none; box-shadow:none; }
.btn-submit:disabled:hover svg, form .btn-submit:disabled:hover svg { transform:none; }
.form-note { font-size:13px; color:var(--muted); background:var(--c50); border-radius:var(--r-sm); padding:16px 18px; line-height:1.7; }

/* Long model names, e-mail addresses and English compounds must wrap before they can force a page wider. */
.page-hero h1,.news-article h1,.news-article h2,.hlc-ch-value,.cta-info strong,.ci-addr,
.prod-body h3,.pr-info h3,.pd-spec dd { overflow-wrap:break-word; word-break:keep-all; }

.ci-rows dd a { color:var(--brand); }
.ci-rows dd a:hover { text-decoration:underline; }
.ci-map { margin-top:clamp(22px,2.6vw,30px); border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 24px 50px -36px rgba(20,40,80,.4); height:clamp(240px,26vw,320px); }
.ci-map iframe { display:block; width:100%; height:100%; border:0; }
.ci-map-actions { display:flex; align-items:center; gap:22px; margin-top:13px; }
@media (max-width:360px){ .ci-rows > div { grid-template-columns:72px 1fr; gap:10px; } .ci-rows dd { font-size:15px; } }
.contact-item { display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-item .ico { width:46px; height:46px; border-radius:12px; background:var(--c50); color:var(--brand); display:grid; place-items:center; flex-shrink:0; }
.contact-item .ico svg{width:22px;height:22px;}
.contact-item .l { font-size:13px; color:var(--muted); }
.contact-item .v { font-weight:600; font-size:16px; color:var(--ink); margin-top:2px; }

/* global sites directory (contact) */
.gsite-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px); }
.gsite { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.2vw,28px); background:#fff; transition:box-shadow .3s var(--ease), border-color .3s; }
.gsite:hover { box-shadow:var(--sh); border-color:var(--c300); }
.gsite-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.gsite-country { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); }
.gsite-since { font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.gsite h3 { font-size:17px; letter-spacing:-.01em; color:var(--ink); }
.gsite-addr { margin-top:10px; color:var(--muted); font-size:13.5px; line-height:1.6; flex:1; }
.gsite-tel { margin-top:12px; font-size:13.5px; color:var(--c700); font-weight:600; }
@media (max-width:900px){ .gsite-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .gsite-grid { grid-template-columns:1fr; } }

.alert { padding:16px 20px; border-radius:var(--r-sm); font-size:15px; margin-bottom:22px; }
.alert.ok { background:color-mix(in srgb,#12a150 12%,white); color:#0c7a3c; border:1px solid color-mix(in srgb,#12a150 30%,white); }
.alert.err { background:color-mix(in srgb,#e04848 10%,white); color:#c0392b; border:1px solid color-mix(in srgb,#e04848 30%,white); }

/* legal / policy prose — cap the measure at a readable line length (~45 Korean chars);
   full-bleed prose at the 1160px container width was unreadable and looked unfinished. */
.legal { max-width:760px; }
.legal p { color:var(--c700); line-height:1.8; margin-bottom:14px; font-size:15.5px; }
.legal h2 { font-size:19px; margin:34px 0 12px; padding-top:24px; border-top:1px solid var(--line); color:var(--ink); }
.legal h2:first-of-type { border-top:0; padding-top:0; margin-top:0; }
.legal ul { display:flex; flex-direction:column; gap:8px; margin:8px 0 16px; }
.legal ul li { position:relative; padding-left:18px; color:var(--c600); font-size:14.5px; line-height:1.7; }
.legal ul li::before { content:""; position:absolute; left:2px; top:11px; width:5px; height:5px; border-radius:50%; background:var(--c400); }
.legal .contact-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
.legal .contact-cards .c { border:1px solid var(--line); border-radius:var(--r-sm); padding:18px 20px; background:var(--c50); }
.legal .contact-cards .c strong { display:block; color:var(--ink); margin-bottom:8px; font-size:15px; }
.legal .contact-cards .c span { display:block; color:var(--c600); font-size:14px; line-height:1.7; }
.legal .eff { font-size:14px; color:var(--muted); background:var(--c50); border-radius:var(--r-sm); padding:12px 16px; display:inline-block; }
/* 법적 고지 페이지의 라이트 레이아웃(policy- 계열, pemail- 계열)은 다크 독립 문서로 전환하며 제거됨.
   현재 스타일은 pages/_partials/legalx_style.php 의 .legalx 에 있다.
   주의: 주석 안에 별표+슬래시 조합을 쓰면 주석이 조기 종료되어 다음 규칙이 통째로 사라진다. */

/* ======================================================================
   FOOTER
   ====================================================================== */
.footer { background:var(--ink); color:rgba(255,255,255,.76); padding:70px 0 36px; margin-top:0; }
.footer-top { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:28px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
/* 하단 메뉴 반복을 걷어낸 뒤의 브랜드 전용 상단(검토5-6-1). 로고는 왼쪽에 고정하고
   문구는 남은 폭을 가로로 길게 쓴다 — 좁은 칸에 갇혀 세로로 쌓이던 문제도 같이 없어진다. */
.footer-top--brand { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:clamp(24px,4vw,56px); }
.footer-top--brand .brand { margin-bottom:0; flex:none; }
.footer-lede { display:flex; flex-direction:column; gap:6px; }
/* 🚨 명시도를 반드시 .footer .desc 보다 높게 잡을 것. 둘 다 (0,2,0) 이면 소스 순서로 뒤에 있는
   `.footer .desc{max-width:300px}` 가 이겨서, 폭이 1008px 남는데도 문구가 300px 에 갇혀 2줄이 된다.
   (2026-08-05 대표님 지적 "이 부분 줄바꿈 되어있는데 한줄로 처리" — 실측: 한 줄에 349px 필요) */
.footer .footer-top--brand .desc { max-width:none; }
.footer .brand { color:#fff; margin-bottom:18px; }
.footer .desc { font-size:14px; line-height:1.7; max-width:300px; }
.footer h2 { color:#fff; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; font-weight:700; }
.footer-col a, .footer-col p { display:block; font-size:14.5px; color:rgba(255,255,255,.76); padding:6px 0; transition:.2s; }
.footer-col a:hover { color:#fff; }
/* credentials strip — corporate trust facts, framed as its own band */
.footer-creds { list-style:none; display:flex; flex-wrap:wrap; align-items:center;
  gap:14px 26px; margin:0; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-creds li { position:relative; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em;
  color:rgba(255,255,255,.88); word-break:keep-all; }
.footer-creds li:lang(en) { text-transform:uppercase; letter-spacing:.05em; font-size:11.5px; }
.footer-creds li::before { content:""; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 0 3px color-mix(in srgb, var(--cyan) 18%, transparent); }
.footer-creds li:not(:last-child)::after { content:""; position:absolute; right:-13px; top:50%;
  transform:translateY(-50%); width:1px; height:13px; background:rgba(255,255,255,.16); }

/* legal / official identity zone */
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 40px; padding-top:30px; font-size:13.5px; }
/* min-width:0 is required: a flex item defaults to min-width:auto and so refuses to shrink
   below its min-content, which the nowrap Tel/Fax/E-mail segments make wide. Without it this
   line stayed 469px inside a 360px screen and html{overflow-x:clip} silently cut the address
   and e-mail off with no scrollbar. */
.footer-legal { flex:1 1 480px; min-width:0; max-width:820px; font-size:13px; line-height:2.05;
  letter-spacing:.01em; color:rgba(255,255,255,.76); word-break:keep-all;
  font-variant-numeric:tabular-nums; }
.footer-legal .fl-name { color:rgba(255,255,255,.9); font-weight:700; letter-spacing:.01em; }
/* each identity segment stays whole; the line only ever breaks at the spaces between segments */
.footer-legal .fl-seg { white-space:nowrap; }
/* Tel·Fax·E-mail 을 한 줄로 모으기 위한 강제 줄바꿈(대표님 지시 2026-08-05).
   flex 로 바꾸면 세그먼트 사이 공백이 사라지므로 column-gap 으로 같은 간격을 복원한다. */
.footer-legal { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.28em; row-gap:0; }
.footer-legal .fl-br { flex-basis:100%; height:0; margin:0; }
.footer-legal .fl-sep { margin:0 .5em 0 .25em; color:rgba(255,255,255,.26); }
.footer-legal .fl-mono { font-family:var(--font-mono); font-size:.94em; letter-spacing:0; white-space:nowrap; }
/* 주소 한 번 클릭 복사 */
.footer-legal .fl-addr { white-space:nowrap; }
/* 아이콘만 — 라벨은 sr-only 로 보조기기에만 전달. 완료는 아이콘이 체크로 바뀌어 알린다. */
.footer-legal .fl-copy { display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-left:7px; padding:0;
  border:1px solid rgba(255,255,255,.22); border-radius:6px; background:transparent;
  color:rgba(255,255,255,.6); cursor:pointer; vertical-align:-4px;
  transition:color .2s, border-color .2s, background .2s; }
.footer-legal .fl-copy svg { width:13px; height:13px; flex:none; }
.footer-legal .fl-copy .ic-done { display:none; }
.footer-legal .fl-copy:hover { color:#fff; border-color:rgba(127,215,238,.55); background:rgba(127,215,238,.12); }
.footer-legal .fl-copy:focus-visible { outline:2px solid var(--brand); outline-offset:2px; color:#fff; }
.footer-legal .fl-copy.is-done { color:#9ee7ff; border-color:rgba(127,215,238,.6); background:rgba(127,215,238,.14); }
.footer-legal .fl-copy.is-done .ic-copy { display:none; }
.footer-legal .fl-copy.is-done .ic-done { display:block; }
@media (max-width:520px){
  /* 좁은 화면에서는 세그먼트 통짜 nowrap 을 풀어 준다 — 영문 주소는 320px 에 한 줄로 들어가지
     않아 nowrap 을 유지하면 반드시 화면 밖으로 넘친다. 원래 막으려던 "…만안구 / 안양천서로 81"
     식의 번지 분리는 sj_addr_nb() 가 넣는 U+00A0 이 그대로 막아 준다. */
  .footer-legal .fl-seg, .footer-legal .fl-addr { white-space:normal; }
}
.footer-legal a { color:inherit; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.25); transition:color .2s; }
.footer-legal a:hover { color:#fff; }
.footer-bottom .fb-right { display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
@media (max-width:600px){ .footer-bottom .fb-right { align-items:flex-start; } }
.footer-bottom .links { display:flex; flex-wrap:wrap; gap:8px 20px; }
.footer-bottom .links a { font-weight:700; color:rgba(255,255,255,.88); }
.footer-bottom .links a:hover { color:#fff; }
.fb-copy { font-variant-numeric:tabular-nums; }

/* ======================================================================
   motion system — reveals, wipes, page transitions
   ====================================================================== */
@keyframes sjSafeIn { to { opacity:1; transform:none; } }
/* safety net: if the reveal observer ever fails to fire, content still appears at 2.2s */
[data-reveal] { opacity:0; transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease;
  animation:sjSafeIn 0s 2.2s forwards; }
[data-reveal="left"], [data-reveal="right"], [data-reveal="zoom"] { transform:translateY(6px); }
[data-reveal].in { opacity:1; transform:none; animation:none; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }
[data-reveal][data-delay="1"]{transition-delay:.08s} [data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s} [data-reveal][data-delay="4"]{transition-delay:.32s}
/* once revealed, drop any stagger delay so hover transitions stay instant */
[data-reveal].done { transition-delay:0s !important; }

/* editorial image wipe — clip sweep + scale settle */
[data-wipe] { clip-path:inset(0 100% 0 0); transition:clip-path 1.05s cubic-bezier(.16,1,.3,1); overflow:hidden; }
[data-wipe] img { transform:scale(1.07); transition:transform 1.35s cubic-bezier(.16,1,.3,1); }
[data-wipe].in { clip-path:inset(0 0 0 0); }
[data-wipe].in img { transform:none; }
/* product photos are never cropped — even transiently: no scale settle on product frames */
.cat-intro-media[data-wipe] img { transform:none; }

/* sub-page hero load sequence */
@media (prefers-reduced-motion:no-preference){
  .page-hero .breadcrumb { animation:heroUp .65s cubic-bezier(.16,1,.3,1) both; }
  .page-hero h1 { animation:heroUp .85s .1s cubic-bezier(.16,1,.3,1) both; }
  .page-hero p  { animation:heroUp .85s .22s cubic-bezier(.16,1,.3,1) both; }
  @keyframes heroUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
}

/* cross-document view transitions — app-like page changes; header stays put */
@view-transition { navigation:auto; }
.header { view-transition-name:site-header; }
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:vtOut .22s ease both; }
  ::view-transition-new(root){ animation:vtIn .38s .04s cubic-bezier(.16,1,.3,1) both; }
  @keyframes vtOut { to { opacity:0; } }
  @keyframes vtIn  { from { opacity:0; transform:translateY(12px); } }
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}

::selection { background:var(--brand); color:#fff; }
.btn:active { transform:translateY(0) scale(.98); }

@media (max-width:1080px){
  .cards-3{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .band{grid-template-columns:1fr} .band-visual{min-height:220px}
}
/* the drawer takes over at 960 (EN menu labels need the room), and on every
   touch device regardless of width — the gnb dropdowns are hover-only */
@media (max-width:960px){
  .gnb{display:none}
  .nav-toggle{display:block}
  .header .brand,.drawer-top .brand,.lang-btn,.nav-toggle{min-height:44px}
  .lang-btn,.nav-toggle{min-width:44px}
}
@media (hover:none) and (pointer:coarse){
  .gnb{display:none}
  .nav-toggle{display:block}
}
@media (max-width:860px){
  :root{--header-h:64px}
  /* wider right fade + a persistent cyan chevron so a tab sliced at the edge reads as
     "scrollable", not "broken" — English tab labels are long enough to always overflow. */
  .subnav{position:sticky}
  .subnav .container{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 42px),transparent);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 42px),transparent);scroll-snap-type:x proximity}
  .subnav .container > a{scroll-snap-align:start}
  .subnav:not(.subnav-ctx){position:sticky}
  .subnav:not(.subnav-ctx)::after{content:"";position:absolute;right:7px;top:50%;width:7px;height:7px;
    border-top:2px solid var(--cy,#7fd7ee);border-right:2px solid var(--cy,#7fd7ee);
    transform:translateY(-50%) rotate(45deg);pointer-events:none;z-index:2}
  /* contextual bar: the container no longer scrolls (back link is pinned), so clear its fade and
     hint scrollability on the sibling rail only, right edge */
  .subnav-ctx .container{-webkit-mask-image:none;mask-image:none;position:relative}
  /* stronger scroll hint: wider right fade so the cut-off sibling clearly fades out */
  .subnav-ctx .sn-tabs{-webkit-mask-image:linear-gradient(90deg,#000,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(90deg,#000,#000 calc(100% - 46px),transparent);scroll-snap-type:x proximity}
  .subnav-ctx .sn-tabs a{scroll-snap-align:start}
  /* free horizontal room so 2+ sibling tabs are visible = obviously a scrollable strip */
  .subnav-ctx .sn-up span{display:none}
  .subnav-ctx .sn-up{padding-right:6px}
  .subnav-ctx .sn-up .sn-chev{width:22px;height:22px;margin-right:0}
  .subnav-ctx .sn-div{display:none}
  /* persistent ">" cue at the right edge (container doesn't scroll) */
  .subnav-ctx .container::after{content:"";position:absolute;right:7px;top:50%;width:7px;height:7px;
    border-top:2px solid var(--cy,#7fd7ee);border-right:2px solid var(--cy,#7fd7ee);
    transform:translateY(-50%) rotate(45deg);pointer-events:none}
  .net-grid,.contact-grid,.form-row,.cards-2{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
  .smart-split{grid-template-columns:1fr!important}
  /* product detail: stack here (not at 1080) and keep the photo a sane size.
     relative (not static!) — the zoom hint is absolutely anchored to this frame */
  .pd{grid-template-columns:1fr}
  .pd-media{position:relative; top:auto; max-width:520px; width:100%; margin-inline:auto}
  .chip,.prod-search,.pager .pg,.pd-tool,.pd-navbtn,.tlink{min-height:44px}
  .input,.textarea,select.input,.prod-search input{font-size:16px}
}
@media (max-width:520px){
  .container{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
  /* Component catalogs (speaker/SCU/AIoT) have dozens of near-identical SKUs — a 1-up hero-card
     stack ran to ~27,000px (30+ phone screens). Keep the grid 2-up and compact the card so a
     buyer can scan a screen at a time, matching the light theme. */
  .cards-3{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .prod-thumb{padding:12px 12px 8px}
  .prod-body{padding:12px 13px 15px; gap:4px}
  .prod-body h3{font-size:15.5px; text-wrap:wrap}
  .prod-body .prod-name,.prod-body .spec{font-size:12.5px}
  .prod-body .go{padding-top:9px; font-size:12.5px}
  .footer-top{grid-template-columns:1fr}
  .pd-spec dl{grid-template-columns:1fr} .pd-spec dt{background:transparent;padding-bottom:2px}
  .pd-spec dd{padding-top:4px}
  .pd-title{flex-basis:100%}
  .pd-cta{width:100%;gap:12px 14px}
  .btn{width:100%}
  .hero-cta{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  [data-reveal]{opacity:1; transform:none}
  [data-wipe]{clip-path:none!important}
  [data-wipe] img{transform:none!important}
}

/* ===== ultra-narrow phones: Galaxy Fold folded (~280px) & small legacy ===== */
@media (max-width:400px){
  .header .container { gap:8px; }
  .lang-btn { padding:0 10px; gap:6px; }
}
@media (max-width:340px){
  .container { padding-left:max(13px,env(safe-area-inset-left,0px)); padding-right:max(13px,env(safe-area-inset-right,0px)); }
  .lang-btn > span { display:none; }        /* icon-only language switch to keep the menu button visible */
  .lang-btn { padding:0 8px; }
  .nav-toggle { width:44px; }
  .brand img { height:26px; }
  .hc-stat { padding:0 10px; }
  /* card paddings scale down so inner text keeps a usable measure at 280 */
  .feature-card, .feature-card:first-child { padding:22px 18px; }
  .form-card { padding:20px 14px; }
  .charter-preamble { padding:24px 18px; }
}
@media (max-width:300px){
  .hero-cine h1 { font-size:25px; }
  .hc-counter-val { gap:10px; }
  .hc-stat { padding:0 8px; }
}

/* ===== comfortable touch targets on phones (links are otherwise ~22px tall) ===== */
@media (hover:none) and (pointer:coarse){
  .header .brand,.drawer-top .brand,.lang-btn,.nav-toggle,.chip,.prod-search,.pager .pg,
  .pd-tool,.pd-navbtn,.tlink { min-height:44px; }
  .lang-btn,.nav-toggle,.pd-tool,.pd-navbtn,.tlink { min-width:44px; }
  .check { min-height:44px; padding-block:7px; }
  .input,.textarea,select.input,.prod-search input { font-size:16px; }
  .fb-right .links a { display:inline-block; padding:8px 6px; margin:-4px 0; }
  .footer-col a { padding:9px 0; }
  .tlink { padding:8px 4px; }
  .gnb > li:hover .submenu { opacity:0; visibility:hidden; } /* belt & braces: no hover menus on touch */
  /* 2026-08-11 모바일 전수감사: 22px 높이 텍스트 링크 계열 전부 44px 터치 타깃으로
     (home-05·idx-4·pd-11·com-6·part-04·rndsw-04 — 본문 more/전체보기/CTA 링크가 전 페이지에서 미달) */
  .company-proof-links a,.engineering-links a,.cta-band-link,.nh-col-t a,
  .btn-text,.cx-morelink,.px-fam-cta,.px-rel-all { min-height:44px; align-items:center; }
  /* 실측(768px): 패딩만으로는 37px 이었다 — 전화 걸기·메일 보내기는 모바일 최중요 액션이라 44 로 맞춘다 */
  .footer-legal a { display:inline-flex; align-items:center; min-height:44px; padding:0 2px; margin:-6px 0; }
  /* 🚨 복사 버튼은 '보이는 크기'와 '누르는 크기'를 나눈다.
     44px 를 버튼 자체에 주면 테두리까지 커져 주소 옆에 빈 사각형이 덩그러니 남는다
     (대표님 지적 2026-08-13). 아이콘 버튼은 26px 로 두고, 가상요소로 손가락 영역만 넓힌다 —
     화면에는 안 보이지만 44x44 로 눌린다. 줄 높이도 밀지 않는다. */
  .footer-legal .fl-copy { width:26px; height:26px; position:relative; vertical-align:-6px; }
  .footer-legal .fl-copy::after { content:""; position:absolute; top:50%; left:50%;
    width:44px; height:44px; transform:translate(-50%,-50%); }
  /* 푸터 로고도 탭 가능한 홈 링크다(실측 34px) */
  .footer .brand { min-height:44px; }
}
/* phones: the fixed quick bar owns the bottom edge — the footer needs clearance.
   (must live AFTER the base .footer rule to win the cascade) */
@media (max-width:640px){
  .footer { padding-bottom:calc(36px + 62px + env(safe-area-inset-bottom,0px)); }
}
/* footer contact anchors read as tappable */
.footer-legal a { text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.25); transition:color .2s; }
.footer-legal a:hover { color:#fff; }

/* ===== dynamic-viewport heights: keep full-screen bands honest under mobile
   browser toolbars (100vh overshoots while the toolbar is visible) ===== */
@supports (height:100dvh){
  .hero-cine { min-height:clamp(620px,94dvh,1000px); }
}

/* iOS landscape notch: keep the fixed header's content out of the inset */
@media (orientation:landscape){
  .header .container { padding-inline:max(24px, env(safe-area-inset-left,0px)) max(24px, env(safe-area-inset-right,0px)); }
}
.drawer { padding-bottom:env(safe-area-inset-bottom,0px); }
.drawer-top { padding-top:calc(18px + env(safe-area-inset-top,0px)); }
.mquick { padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px); }

@media (max-height:500px) and (max-width:960px){
  .hero-cine { min-height:auto; }
  .hero-cine-inner { padding-top:calc(var(--header-safe-h) + 34px); padding-bottom:30px; }
  .hero-scrollcue { display:none; }
}

/* ======================================================================
   R&D page — rich intro + stat band / bold dark strategy / one-stop flow
   ====================================================================== */
.rnd-lead { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:stretch; }
.rnd-lead-text { align-self:center; }
.rnd-lead-text h2 { margin-top:16px; font-size:clamp(26px,3vw,40px); letter-spacing:-.032em; line-height:1.17; color:var(--ink); }
.rnd-lead-text p { margin-top:20px; color:var(--muted); font-size:clamp(15.5px,1.3vw,17.5px); line-height:1.78; max-width:52ch; }
.rnd-lead-media { position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 40px 82px -46px rgba(20,40,80,.6); min-height:320px; }
.rnd-lead-media img { width:100%; height:100%; object-fit:cover; display:block; }
.rlm-cap { position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:9px;
  padding:8px 15px; border-radius:var(--r-pill); background:rgba(10,14,22,.46); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.01em; border:1px solid rgba(255,255,255,.16); }
.rlm-dot { width:7px; height:7px; border-radius:50%; background:#7fd7ee; animation:rlm-pulse 2.2s ease-in-out infinite; }
@keyframes rlm-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(127,215,238,.55); } 55%{ box-shadow:0 0 0 6px rgba(127,215,238,0); } }
@media (max-width:860px){ .rnd-lead { grid-template-columns:1fr; gap:26px; } .rnd-lead-media { aspect-ratio:16/10; min-height:0; } }

.rnd-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,44px); margin-top:clamp(48px,6vw,84px); }
.rst { position:relative; padding-top:clamp(24px,2.6vw,32px); border-top:2px solid var(--line); }
.rst::before { content:""; position:absolute; top:-2px; left:0; width:46px; height:2px; background:var(--brand); }
.rst b { display:block; font-size:clamp(34px,4.6vw,60px); font-weight:800; letter-spacing:-.045em; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.rst span { display:block; margin-top:14px; color:var(--muted); font-size:13.5px; line-height:1.5; }
@media (max-width:720px){ .rnd-stats { grid-template-columns:repeat(2,1fr); gap:34px 22px; } }

/* strategy — bold dark band */
.rnd-strategy-sec { position:relative; background:var(--grad-ink); color:#fff; overflow:hidden; isolation:isolate; }
.rss-bg { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; opacity:.12; filter:saturate(.9); }
.rnd-strategy-sec::after { content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(90% 90% at 12% 12%, rgba(26,167,214,.16), transparent 58%); }
.rnd-strategy-sec .section-head h2 { color:#fff; }
.rnd-strategy-sec .section-head p { color:rgba(255,255,255,.88); }
.rss-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); margin-top:clamp(30px,3.6vw,52px); }
.rss-item { padding-top:26px; border-top:2px solid rgba(255,255,255,.2); }
.rss-num { display:block; font-size:clamp(38px,3.8vw,58px); font-weight:800; letter-spacing:-.04em; line-height:1;
  color:#7fd7ee; font-variant-numeric:tabular-nums; }
.rss-item h3 { margin-top:20px; font-size:clamp(20px,1.85vw,26px); letter-spacing:-.02em; color:#fff; line-height:1.28; }
.rss-item p { margin-top:13px; color:rgba(255,255,255,.88); font-size:clamp(14.5px,1.2vw,16px); line-height:1.72; }
@media (max-width:760px){ .rss-grid { grid-template-columns:1fr; gap:0; }
  .rss-item { padding:24px 0; border-top:1px solid rgba(255,255,255,.16); } }

/* one-stop — connected flow with ghost numerals */
.onestop { list-style:none; margin:clamp(28px,3.4vw,48px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,40px); }
.os-step { position:relative; overflow:hidden; padding:clamp(30px,3vw,44px) clamp(26px,2.6vw,34px); border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fff,#f4f7fc); border:1px solid var(--line); box-shadow:0 20px 46px -34px rgba(20,40,80,.4);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.os-step::before { content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--grad);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.os-step:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--brand) 30%,white); box-shadow:var(--sh-lg); }
.os-step:hover::before { transform:scaleX(1); }
.os-bignum { position:absolute; top:16px; right:18px; font-size:clamp(48px,5vw,68px); font-weight:800; line-height:1;
  color:rgba(53,86,142,.07); letter-spacing:-.05em; pointer-events:none; }
/* triple-chevron signal flowing to the next stage */
.os-step:not(:last-child)::after { content:""; position:absolute; top:50%; right:-27px; width:24px; height:15px; transform:translateY(-50%); z-index:2;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 15'><path d='M2.5 2.5l5 5-5 5M10 2.5l5 5-5 5M17.5 2.5l5 5-5 5' fill='none' stroke='%231456e6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  animation:os-arrow 2s ease-in-out infinite; }
.onestop .os-step:nth-of-type(2)::after { animation-delay:.5s; }
@keyframes os-arrow { 0%,100%{ opacity:.25; transform:translateY(-50%) translateX(-3px); } 50%{ opacity:1; transform:translateY(-50%) translateX(3px); } }
.os-idx { position:relative; display:block; font-size:12.5px; font-weight:800; letter-spacing:.16em; color:var(--brand); }
.os-step h3 { position:relative; margin-top:16px; font-size:clamp(23px,2.2vw,32px); letter-spacing:-.02em; color:var(--ink); }
.os-step p { position:relative; margin-top:12px; color:var(--muted); font-size:15px; line-height:1.65; }
@media (max-width:760px){ .onestop { grid-template-columns:1fr; gap:34px; }
  .os-step:not(:last-child)::after { top:auto; right:auto; bottom:-26px; left:50%; transform:translateX(-50%) rotate(90deg); animation:none; opacity:.55; } }

/* HQ workplace amenity gallery */
.wp-sec { background:linear-gradient(180deg,#fff,var(--c50)); }
.wp-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(140px,14.5vw,208px); gap:clamp(10px,1vw,14px); margin-top:clamp(24px,3vw,40px); }
.wp-cell { position:relative; overflow:hidden; border-radius:var(--r); background:var(--c100); margin:0; }
.wp-cell:first-child { grid-column:span 2; grid-row:span 2; }
.wp-cell img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.wp-cell:hover img { transform:scale(1.06); }
@media (max-width:760px){ .wp-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(120px,30vw,168px); }
  .wp-cell:first-child { grid-column:span 2; grid-row:span 1; } }
@media (max-width:460px){ .wp-grid { grid-template-columns:1fr; grid-auto-rows:44vw; } .wp-cell:first-child { grid-column:span 1; } }

/* ======================================================================
   Products index — editorial header + numbered category rows
   ====================================================================== */
.pidx-head { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); gap:clamp(28px,4vw,64px); align-items:baseline;
  padding-bottom:var(--sp-6); margin-bottom:0; border-bottom:2px solid var(--ink); }
.pidx-head h2 { font-size:var(--fs-h2); letter-spacing:-.02em; line-height:1.06; }
.pidx-meta { display:flex; flex-direction:column; align-items:flex-start; }
.pidx-meta p { color:var(--muted); font-size:var(--fs-base); line-height:1.62; max-width:42ch; }
.pidx-count { display:block; margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--meta); font-weight:500; }
.pidx-count b { color:var(--ink); font-weight:800; font-size:var(--fs-md); font-variant-numeric:tabular-nums; }
@media (max-width:760px){ .pidx-head { grid-template-columns:1fr; align-items:start; gap:var(--sp-4); } }

.pcat-rows { border-top:0; }
.pcat-row { display:grid; grid-template-columns:auto clamp(150px,16vw,196px) minmax(0,1fr) minmax(140px,auto) auto; align-items:center;
  gap:clamp(18px,2.4vw,32px); padding:clamp(22px,2.8vw,34px) 6px; border-bottom:1px solid var(--hair);
  transition:background var(--t-slow) var(--ease); }
.pcat-row:hover { background:var(--c50); }
.pr-idx { font-size:clamp(19px,2.1vw,27px); font-weight:800; color:var(--c300); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.pcat-row:hover .pr-idx { color:var(--brand); }
.pr-media { aspect-ratio:1/1; background:var(--surface-media); border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--hair), var(--sh-xs);
  display:flex; align-items:center; justify-content:center; padding:clamp(16px,1.6vw,24px); overflow:hidden; }
.pr-media img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; transition:transform var(--t-slow) var(--ease); }
.pcat-row:hover .pr-media img { transform:scale(1.05); }
.pr-info { min-width:0; }
.pr-info h3 { font-size:var(--fs-h3); letter-spacing:-.02em; color:var(--ink); }
.pr-ko { display:block; margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--c600); font-weight:600; }
.pr-info p { margin-top:var(--sp-3); color:var(--muted); font-size:var(--fs-sm); line-height:1.6; max-width:46ch; }
.pr-meta { display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-3); text-align:right; }
.pr-count { font-size:var(--fs-sm); color:var(--meta); font-variant-numeric:tabular-nums; }
.pr-count b { color:var(--brand); font-weight:800; font-size:var(--fs-md); }
.pr-tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.pr-tags em { font-style:normal; font-size:var(--fs-xs); font-weight:600; letter-spacing:.01em; color:var(--c600);
  background:var(--c100); border-radius:var(--r-pill); padding:4px 11px; }
.pr-arrow { width:46px; height:46px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--hair); display:grid; place-items:center;
  color:var(--c400); flex:none; transition:transform var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.pr-arrow svg { width:22px; height:22px; }
.pcat-row:hover .pr-arrow { background:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); color:#fff; transform:translateX(4px); }
@media (max-width:960px){ .pcat-row { grid-template-columns:auto clamp(120px,18vw,160px) minmax(0,1fr) auto; } .pr-meta { display:none; } }
@media (max-width:560px){ .pcat-row { grid-template-columns:auto 1fr; padding:22px 4px; gap:16px; } .pr-media, .pr-arrow { display:none; } }

/* clause unit — ebr() 이 절마다 씌우는 상자. (CEO 2026-07-23 줄바꿈 표준)
   inline-block 은 줄에 걸쳐 쪼개지지 않는 원자 박스이고, 폭은 max-content 와 컨테이너 폭 중
   작은 쪽으로 정해진다. 그래서 ①절이 남은 자리에 안 들어가면 '통째로' 다음 줄로 내려가고
   ②절 자체가 컨테이너보다 길 때만 그 안에서 접힌다 — 절 경계 우선이 저절로 지켜진다.
   ⚠ white-space:nowrap 을 주면 안 된다. 절이 컨테이너보다 길 때 접히지 못하고 그대로 삐져나가
   .legalx 의 overflow 에 잘렸다(실측: email-policy 768px 에서 354px 넘침, .legal 은 가독 폭
   제한이 있어 1920px 에서도 202px 넘쳤다). max-width:100% 때문에 '박스'는 정상으로 보이므로
   getBoundingClientRect 로는 안 잡힌다 — scrollWidth 로 재야 한다.
   ⚠ display:inline 으로 되돌려도 안 된다. 절 개념이 사라져 '제한될 / 수 있습니다' 처럼
   의미 단위 중간에서 끊긴다(모바일이 이 상태였다). */
.sline{ display:inline-block; max-width:100%; }

/* ===== pro details (2026-07-21) ===== */
:target{ scroll-margin-top:calc(var(--header-safe-h, 90px) + 16px); }
a,button,select,label{ -webkit-tap-highlight-color:transparent; }
a,button{ touch-action:manipulation; }
body.is-home{ color-scheme:dark; }   /* dark scrollbar/native UI on the dark home */
@media print{
  /* .nsnav = JS 비활성 폴백 내비. 인쇄 목록에서 빠져 있어, JS 를 끈 브라우저로 인쇄하면
     본문 앞에 링크 31개짜리 내비가 통째로 찍혔다(자기검증에서 발견). 헤더와 같이 감춘다. */
  .header,.gnb,.nsnav,.mquick,#backTop,.drawer,canvas,.scroll-prog,.subnav,.hero-scrollcue,.marquee,.gx-band .gx-map{ display:none !important; }
  body{ background:#fff !important; color:#000 !important; }
  .photobg,.capix,.gx-band,.section--news,.hero-cine{ background:#fff !important; }
  .photobg *,.capix *,.gx-band *,.section--news *,.hero-cine *{ color:#000 !important; text-shadow:none !important; }
  .photobg-img,.photobg-scrim,.hero-cine-media,.hero-spot{ display:none !important; }
  a{ color:#000; text-decoration:none; }
  figure,img,.gx-site{ break-inside:avoid; }
}

/* ======================================================================
   MOBILE APPLICATION LAYOUT
   Phones are a dedicated surface, not a compressed desktop composition.
   The rules live last so every page inherits the same device contract.
   ====================================================================== */
@media (max-width:640px){
  :root{
    --header-h:60px;
    --section-pad:clamp(56px,15vw,76px);
  }
  html{scroll-padding-top:var(--header-safe-h);}
  body{min-width:0;}
  main{min-width:0;}
  img,video,iframe,svg{max-width:100%;}

  /* Compact, stable mobile app bar. Language selection remains in the drawer. */
  .header{height:var(--header-safe-h);}
  .header > .container{height:var(--header-h); gap:8px;}
  .header > .container > nav,.header .lang-switch{display:none;}
  .header-actions{margin-left:auto; gap:4px;}
  .header .brand img{height:27px; width:auto;}
  .nav-toggle{display:grid; place-items:center; width:44px; height:44px; padding:0;}
  /* 🚨 :not(.is-home) 만으로 쓰면 안 된다. body.is-dark .header(357행)와 명시도가 (0,2,1) 로 같아서
     뒤에 있는 이 규칙이 이기고, 다크 서브페이지 헤더가 흰색이 된다. 그런데 햄버거 stroke 는
     body.is-dark 계열 규칙 때문에 흰색으로 남아 흰 배경에 흰 아이콘 = 대비 1:1 로 사라진다.
     ≤960px 에선 .gnb 가 display:none 이라 이 햄버거가 유일한 내비 진입점이다. (2026-08-05 실측 확인) */
  body.is-home .header{background:rgba(13,16,25,.82); border-bottom:1px solid rgba(255,255,255,.1); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
  body.is-dark .header{background:rgba(13,16,25,.82); border-bottom:1px solid rgba(255,255,255,.1); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
  body:not(.is-home):not(.is-dark) .header{background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}

  /* Full-screen navigation is intentionally independent from desktop GNB. */
  .drawer{left:0; width:100%; max-width:none; border-radius:0;}
  .drawer-top{min-height:var(--header-safe-h); padding:calc(8px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) 8px max(18px,env(safe-area-inset-left,0px));}
  .drawer-nav{padding:6px max(10px,env(safe-area-inset-right,0px)) 24px max(10px,env(safe-area-inset-left,0px)); overscroll-behavior:contain;}
  /* 대표님 지시(08-06): 드로어 간격이 넓고 역량 쪽이 벌어져 보임 → 세로 간격을 조인다. */
  .drawer-nav > li > a, .drawer-nav > li > .drawer-row > a{min-height:46px; display:flex; align-items:center; padding:10px 10px; font-size:17px;}
  .drawer-sub{padding:0 10px 8px; gap:2px;}
  .drawer-sub a{min-height:40px; display:flex; align-items:center; padding:7px 12px; border-radius:10px;}
  .drawer-cta,.drawer-foot{padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px));}

  /* Mobile hero: content follows the visible viewport and all actions stay tappable. */
  .hero-cine{min-height:max(620px,100svh);}
  .hero-cine-inner{width:100%; padding-top:calc(var(--header-safe-h) + 56px); padding-bottom:88px;}
  .hero-cine h1{font-size:clamp(30px,9.2vw,44px); line-height:1.12; text-wrap:balance;}
  .hero-cine .hero-cta{display:grid; grid-template-columns:1fr; gap:10px; width:min(100%,360px); margin-top:28px;}
  .hero-cine .hero-cta > *{width:100%; min-height:48px; white-space:nowrap; padding-inline:18px;}
  .hc-counter{margin-top:30px;}
  .hc-counter-val{gap:10px 14px;}
  .hc-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:0;}
  .hc-stat{min-width:0; padding:0 8px; text-align:center; border-left:1px solid rgba(255,255,255,.14);}
  .hc-stat:first-child{padding-left:0; border-left:0;}
  .hc-stat:last-child{padding-right:0;}
  .hc-stat .lab{font-size:11.5px; overflow-wrap:anywhere;}

  /* One-column reading rhythm across corporate pages. */
  .section{padding-top:var(--section-pad); padding-bottom:var(--section-pad);}
  .section-head{margin-bottom:clamp(26px,8vw,40px);}
  .section-head h2,.page-hero h1{overflow-wrap:anywhere; text-wrap:balance;}
  .page-hero{padding-top:calc(var(--header-safe-h) + 44px); padding-bottom:42px; min-height:0;}
  .subnav a{height:52px; min-height:52px; padding-inline:14px; white-space:nowrap;}
  .subnav-ctx .sn-up{padding-inline:10px;}
  /* Mobile footer is an identity/legal close, not a second sitemap. */
  .footer{padding-top:38px;}
  .footer-top{display:block; gap:0; padding-bottom:24px;}
  .footer-top--brand{display:block;}
  .footer-top--brand .brand{margin-bottom:14px;}
  .footer .brand{margin-bottom:14px;}
  .footer .desc{max-width:30em; font-size:13px; line-height:1.65;}
  /* 대표님 확인(2026-08-12): 이 문구는 모바일에서도 보여야 한다 — 예전 '모바일 푸터 축약'
     결정으로 숨겨져 있었다. 폭에 맞춰 줄만 조인다. */
  .footer .desc-sub{display:block; font-size:12.5px; line-height:1.6; margin-top:6px;}
  .footer-creds{display:grid; grid-template-columns:1fr 1fr; gap:0 16px; margin:0; padding:16px 0;}
  .footer-creds li{padding:7px 0; font-size:11.5px; line-height:1.45;}
  /* 대표님 지적(2026-08-12): '통합 설계·개발'·'글로벌 생산·사업 네트워크' 두 지표가
     모바일에서 통째로 숨겨져 있었다(예전 푸터 축약 결정). 4개 전부 보이게 한다 — 2×2 그리드라
     세로 두 줄만 늘어난다. */
  .footer-creds li:nth-child(n+3){display:inline-flex;}
  .footer-creds li::after{display:none;}
  .footer-bottom{flex-direction:column; gap:18px; padding-top:20px;}
  .footer-bottom,.footer-bottom .fb-right{align-items:flex-start;}
  .footer-legal{flex:0 1 auto; width:100%; font-size:11.5px; line-height:1.75; word-break:keep-all; overflow-wrap:anywhere;}
  .footer-legal .fl-seg{display:block; margin-top:3px; white-space:normal;}
  .footer-legal .fl-seg:first-child{margin-top:0;}
  .footer-legal .fl-sep{display:none;}
  .footer-bottom .fb-right{width:100%; gap:10px;}
  .footer-bottom .links{gap:8px 18px; font-size:12px;}
  .footer-bottom .fb-copy{font-size:11.5px;}

  /* Fixed mobile commands: safe-area aware and consistently thumb sized. */
  .mquick{height:calc(58px + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);}
  .mquick a{min-width:0; min-height:58px; font-size:11.5px;}
  .backtop{bottom:calc(72px + env(safe-area-inset-bottom,0px));}
}

/* Unfolded foldables are still mobile devices even when their CSS viewport is tablet-wide.
   Coarse-pointer detection keeps this app shell off narrow desktop windows. */
/* 상한을 900 → 1023 으로 넓힌다(2026-08-12 전 해상도 감사).
   드로어는 '터치면 폭 무관'으로 켜지는데(1916행) 이 앱셸 블록만 900 에서 끊겨,
   901~1023 터치 태블릿(아이패드 세로 1024 등)은 드로어는 있는데 헤더 높이·퀵바가 없는
   반쪽 상태였다. 경계를 드로어와 맞춘다. */
@media (min-width:641px) and (max-width:1023px) and (hover:none) and (pointer:coarse){
  :root{--header-h:64px;--section-pad:clamp(66px,10vw,92px);}
  html{scroll-padding-top:var(--header-safe-h);}
  body{min-width:0;}
  main{min-width:0;}
  img,video,iframe,svg{max-width:100%;}

  .header{height:var(--header-safe-h);}
  .header > .container{height:var(--header-h);gap:10px;}
  .header > .container > nav,.header .lang-switch{display:none;}
  .header-actions{margin-left:auto;gap:4px;}
  .nav-toggle{display:grid;place-items:center;width:46px;height:46px;padding:0;}
  /* 2170행대와 같은 이유로 :not(.is-dark) 를 반드시 붙인다. 여긴 641~900px 터치기기 블록이라
     폴드 언폴드 구간에서 같은 '흰 헤더 + 흰 햄버거' 가 재현된다. */
  body.is-home .header{background:rgba(13,16,25,.82);border-bottom:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}
  body.is-dark .header{background:rgba(13,16,25,.82);border-bottom:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}
  body:not(.is-home):not(.is-dark) .header{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}

  .drawer{left:0;width:100%;max-width:none;border-radius:0;}
  .drawer-top{min-height:var(--header-safe-h);padding:calc(10px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 10px max(24px,env(safe-area-inset-left,0px));}
  .drawer-nav{padding:8px max(18px,env(safe-area-inset-right,0px)) 28px max(18px,env(safe-area-inset-left,0px));overscroll-behavior:contain;}
  .drawer-nav > li > a, .drawer-nav > li > .drawer-row > a{min-height:54px;display:flex;align-items:center;padding:12px 10px;font-size:19px;}
  .drawer-sub{padding:0 10px 14px;gap:4px;}
  .drawer-sub a{min-height:46px;display:flex;align-items:center;padding:9px 12px;border-radius:10px;}

  .hero-cine{min-height:max(680px,100svh);}
  .hero-cine-inner{width:100%;padding-top:calc(var(--header-safe-h) + 62px);padding-bottom:96px;}
  .hero-cine h1{font-size:clamp(36px,6vw,44px);line-height:1.1;text-wrap:balance;}
  .hero-cine .hero-cta > *{min-height:50px;}
  .page-hero{padding-top:calc(var(--header-safe-h) + 52px);padding-bottom:48px;}
  .page-hero p{display:block;-webkit-line-clamp:unset;overflow:visible;}

  .mquick{display:grid;height:calc(60px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:rgba(255,255,255,.96);}
  .mquick a{min-width:0;min-height:60px;font-size:12px;}
  .backtop{bottom:calc(76px + env(safe-area-inset-bottom,0px));}
  .footer{padding-top:42px;padding-bottom:calc(38px + 64px + env(safe-area-inset-bottom,0px));}
  .footer-top{display:block;gap:0;padding-bottom:24px;}
  .footer-top--brand{display:block;}
  .footer-top--brand .brand{margin-bottom:14px;}
  .footer .brand{margin-bottom:14px;}
  .footer .desc{max-width:34em;font-size:13px;line-height:1.65;}
  /* 대표님 확인(2026-08-12): 이 문구는 모바일에서도 보여야 한다 — 예전 '모바일 푸터 축약'
     결정으로 숨겨져 있었다. 폭에 맞춰 줄만 조인다. */
  .footer .desc-sub{display:block; font-size:12.5px; line-height:1.6; margin-top:6px;}
  .footer-creds{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:0;padding:16px 0;}
  .footer-creds li{padding:7px 0;font-size:11.5px;line-height:1.45;}
  /* 대표님 지적(2026-08-12): '통합 설계·개발'·'글로벌 생산·사업 네트워크' 두 지표가
     모바일에서 통째로 숨겨져 있었다(예전 푸터 축약 결정). 4개 전부 보이게 한다 — 2×2 그리드라
     세로 두 줄만 늘어난다. */
  .footer-creds li:nth-child(n+3){display:inline-flex;}
  .footer-creds li::after{display:none;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:18px;padding-top:20px;}
  .footer-bottom .fb-right{width:100%;align-items:flex-start;gap:10px;}
  .footer-legal{flex:0 1 auto;width:100%;font-size:11.5px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere;}
  .footer-legal .fl-seg{display:block;margin-top:3px;white-space:normal;}
  .footer-legal .fl-seg:first-child{margin-top:0;}
  .footer-legal .fl-sep{display:none;}
  .footer-bottom .links{gap:8px 18px;font-size:12px;}
  .footer-bottom .fb-copy{font-size:11.5px;}
}

/* Folded phones and embedded webviews down to 280 CSS px. */
@media (max-width:319px){
  .container{padding-left:max(12px,env(safe-area-inset-left,0px)); padding-right:max(12px,env(safe-area-inset-right,0px));}
  .header .brand img{height:24px;}
  .hero-cine h1{font-size:27px;}
  .hero-cine .hero-cta{width:100%;}
  .hc-stats{grid-template-columns:1fr; gap:10px;}
  .hc-stat,.hc-stat:first-child,.hc-stat:last-child{padding:0; border:0; text-align:left;}
  .hc-stat .lab{display:inline; margin-left:6px;}
  .prod-grid{grid-template-columns:1fr;}
  .footer-creds{grid-template-columns:1fr;}
}

/* Narrow phones need a readable single-column product catalogue. */
@media (max-width:380px){
  .prod-grid{grid-template-columns:1fr;}
}

/* Short landscape phones: avoid forcing portrait-style full-screen sections. */
@media (max-width:960px) and (max-height:520px) and (orientation:landscape){
  :root{--header-h:60px;}
  body{padding-bottom:0;}
  .header > .container{height:var(--header-h);}
  body.is-home #main > section.hero-cine{min-height:100svh; padding:0;}
  .hero-cine-inner{padding-top:calc(var(--header-safe-h) + 20px); padding-bottom:24px;}
  .hero-cine h1{font-size:clamp(32px,5.3vw,46px);}
  .hero-cine p{font-size:15px; line-height:1.65; max-width:58ch;}
  .hero-cine .hero-cta{grid-template-columns:repeat(2,minmax(0,190px)); width:auto;}
  .hero-cine .hero-cta{margin-top:20px;}
  .hero-cine-stats,.hc-counter,.hero-scrollcue{display:none;}
  .mquick{display:none;}
  .footer{padding-bottom:36px;}
}

/* ===== 홈 풀페이지 스냅 — 휠 한 번에 한 덩어리씩 (CEO 2026-07-30, www.samjin.com 과 같은 느낌)
   ⚠ CSS scroll-snap 만으로는 못 한다. scroll-snap-type:y mandatory 를 걸면 마우스 휠 한 칸(120px)이
   900px 뷰포트의 스냅 임계점을 못 넘어 제자리로 되돌아온다 — 실측: 휠 12번에 0px, 완전히 멈춘다.
   (트랙패드는 관성 델타가 커서 되지만 휠은 안 된다. 공식 사이트가 fullPage.js 를 쓰는 이유다.)
   그래서 이동은 JS(main.js snapGo)가 하고, CSS 는 '한 덩어리'로 보이게 하는 것만 담당한다.
   좁거나 낮은 화면·모션 감소 설정에서는 아무것도 걸지 않는다(공식 사이트도 작은 화면에선 끈다). */
/* 마우스 조건 추가(2026-08-12): 스냅 이동은 wheel·PageUp/PageDown 만 잡는다 —
   터치 기기(iPad Pro 1024 세로)에서 켜지면 이득은 0 인데 섹션이 100svh 로 강제 확대되고
   content-visibility 해제 비용만 든다. */
@media (min-width:1024px) and (min-height:620px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.is-home.snap-ready body.is-home #main > section{ min-height:100svh; }
  /* 한 덩어리 안에서 내용을 가운데로 — 짧은 섹션에서 아래가 텅 비어 보이는 것 방지.
     홈 섹션은 in-flow 자식이 .container 하나뿐이고 배경·스크림은 전부 position:absolute 라(실측)
     flex 로 바꿔도 겹침 구조가 깨지지 않는다. 히어로는 자체 배치가 있어 제외한다.
     좌우 정렬은 건드리지 않는다 — .container 의 max-width + margin:0 auto 가 그대로 작동한다. */
  html.is-home.snap-ready body.is-home #main > section:not(.hero-cine){
    display:flex; flex-direction:column; justify-content:center;
  }
  /* 스냅이 켜진 동안만 content-visibility 를 해제한다.
     멈춤 위치를 정확히 재려면 화면 밖 섹션의 실제 높이가 필요하다. 켜 둔 채로 해 보려고
     ①옆 섹션 rect 를 그때그때 읽기 → 화면 밖 섹션이 skip 되어 오착지(2093·3181, 정답 2758·3699)
     ②잴 때만 잠깐 풀기 → 그 리플로우로 스크롤이 흔들려 1981↔2499 진동
     둘 다 실패했다. 로딩은 같은 조건 A/B 에서 FCP +360ms 정도인데, 스냅에서는 한 화면씩만 보므로
     그 최적화의 이득이 작고 오착지는 눈에 바로 보이는 결함이다 — 정확도를 택한다. */
  html.is-home.snap-ready .home-defer{ content-visibility:visible; contain-intrinsic-size:none; }
}

/* ═══ 한국어 제목 자(尺) 보정 ═══════════════════════════════════════════
   문제: 제목 폭을 `ch` 로 잠가 뒀는데 `ch` 는 라틴 '0' 의 폭(이 폰트에서 ≈0.65em)이다.
        한글은 1자가 ≈1em 이라 "20자"를 의도한 20ch 에 실제로는 13자밖에 안 들어간다.
        그래서 /competency/rnd 제목이 부모 폭 1200px 를 두고도 674px 에서 잘려
        320~1920 전 폭에서 2줄이 됐다(2026-08-05 실측: 한 줄에 745px 필요).
   해법: 한국어 문서에서만 같은 '글자 수'를 em 으로 다시 잰다. 영문은 손대지 않는다.
        값은 "한 줄에 몇 자까지 허용할 것인가" 이고, 기존 ch 값과 같은 글자 수로 맞췄다.
   ⚠ 이 블록은 각 규칙보다 뒤에 와야 이긴다. 명시도도 html[lang] 로 한 단계 높여 뒀다. */
html[lang="ko"] .page-hero h1        { max-width:12em; }
html[lang="ko"] .pd-detail-hero h1   { max-width:18em; }
html[lang="ko"] .cx-hero h1          { max-width:20em; }
html[lang="ko"] .cx-hero-wide h1     { max-width:19em; }
html[lang="ko"] .px-hero h1          { max-width:22em; }
html[lang="ko"] .net-hero h1         { max-width:20em; }
html[lang="ko"] .phil-hero h1        { max-width:28em; }
html[lang="ko"] .hist-hero h1        { max-width:18em; }

/* `balance` 는 줄 길이를 '균등'하게 맞추려고 의미와 무관한 자리에서 자른다.
   프로젝트 표준은 `pretty`(고아줄만 방지) 다 — memory/samjin-ceo-facts 에 명문화돼 있다. */
html[lang="ko"] .page-hero h1,
html[lang="ko"] .cx-hero h1,
html[lang="ko"] .px-hero h1,
html[lang="ko"] .cx-secthead h2,
html[lang="ko"] .cx-lead h2,
html[lang="ko"] .px-secthead h2,
html[lang="ko"] .cx-card h3,
html[lang="ko"] .section-head h2    { text-wrap:pretty; }

/* ═══ PC 히어로 리드 한 줄 ══════════════════════════════════════════════
   대표님 지시(2026-08-06): "사람과 사물을 연결하는 기술. 반세기 개발·제조 노하우로,
   아이디어를 시장 경쟁력을 갖춘 제품으로 완성  pc에서 이거 한줄로".
   원인은 `.hero-cine p{max-width:520px}` 였다 — 컨테이너가 1200px 남는데 520px 에서 잘려
   전 PC 폭에서 2줄이 됐다(실측: 한 줄에 1440px 에서 692px, 1920px 에서 811px 필요).
   ≥1200px 에서만 푼다. 태블릿·모바일은 두 줄이 정상이라 손대지 않는다.
   em 으로 잡아 글씨 크기가 clamp 로 변해도 같은 글자 수를 유지한다. */
@media (min-width:1200px) {
  html[lang="ko"] .hero-cine-text p { max-width:58em; }
}

/* ═══ GNB 3레벨 플라이아웃 ══════════════════════════════════════════════
   대표님 지시(2026-08-06): "상단카테고리에 이전제품 마우스올리면 우측에 3개제품 나오게".
   2레벨 항목에 children 이 있으면 마우스를 올렸을 때 우측으로 펼친다.
   ⚠ 부모 .submenu 에 overflow:hidden 이 걸리면 잘리므로 건드리지 말 것. */
.submenu li.has-flyout { position:relative; }
.submenu li.has-flyout > a { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.submenu li.has-flyout > a .fly-chev { width:14px; height:14px; flex:none; opacity:.5; transition:opacity .18s, transform .18s; }
.submenu li.has-flyout:hover > a .fly-chev,
.submenu li.has-flyout:focus-within > a .fly-chev { opacity:1; transform:translateX(2px); }

.submenu .flyout {
  position:absolute; top:-8px; left:calc(100% + 6px); min-width:224px; z-index:5;
  padding:8px; margin:0; list-style:none; border-radius:12px;
  background:rgba(13,16,22,.96); border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(0,0,0,.42);
  opacity:0; visibility:hidden; transform:translateX(-6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.submenu li.has-flyout:hover > .flyout,
.submenu li.has-flyout:focus-within > .flyout { opacity:1; visibility:visible; transform:none; }
/* 정지 상태 글자색을 명시한다. 안 주면 밝은 헤더(404 페이지)에서 어두운 배경 위 어두운 글자로 안 읽힌다
   — 플라이아웃 배경은 항상 다크(rgba(13,16,22,.96))라 밝은 회색 고정. (2026-08-06 감사) */
.submenu .flyout a { display:block; padding:9px 12px; border-radius:8px; font-size:14px; white-space:nowrap; color:rgba(255,255,255,.82); }
.submenu .flyout a:hover, .submenu .flyout a:focus-visible { background:rgba(255,255,255,.06); color:#fff; }
/* 화면 오른쪽 끝에서는 왼쪽으로 펼친다 */
@media (max-width:1320px) {
  .submenu .flyout { left:auto; right:calc(100% + 6px); transform:translateX(6px); }
}

/* 모바일 드로어는 마우스 오버가 없으므로 3레벨을 펼쳐 둔다 */
.drawer-sub3 { list-style:none; margin:2px 0 4px; padding:0 0 2px 12px; border-left:1px solid var(--c200); }
/* 🚨 모바일 드로어는 라이트(흰 배경)다. 예전엔 흰 글자(rgba(255,255,255,.62))라 R&D 3레벨
   (S/W·H/W·기구·음향)이 흰 배경에 묻혀 안 보였다 — '역량쪽이 이상하다'의 정체. 어두운 글자로. */
.drawer-sub3 a { display:block; min-height:40px; display:flex; align-items:center; padding:7px 12px; border-radius:9px; font-size:14px; color:var(--c600); }
.drawer-sub3 a:hover, .drawer-sub3 a:focus-visible { background:var(--c50); color:var(--brand); }

/* ══════════════════════════════════════════════════════════════════════
   모바일 특화 레이어 (2026-08-11 전수 감사, 128건 확정 반영)
   원칙: "해상도별 축소"가 아니라 모바일 전용 레이아웃/컴포넌트.
   전 페이지가 다크 에디토리얼(is-dark / is-home)이므로 고정 크롬(퀵바·드로어·백탑)도
   다크로 통일한다 — 라이트 잔재는 T2(탈락) 시절 공용 컴포넌트였다.
   ══════════════════════════════════════════════════════════════════ */

/* ── ① 다크 크롬: 하단 퀵바 ──────────────────────────────────────────
   흰 유리(rgba 255,.94)가 전면 다크 화면 하단에 상시 떠 있던 문제(11개 그룹 공통 지적).
   body.is-dark(0,2,1)가 2277·2316행의 .mquick 배경 재선언을 명시도로 이긴다. */
body.is-dark .mquick, body.is-home .mquick {
  background:rgba(15,20,28,.92);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.6);
}
body.is-dark .mquick a, body.is-home .mquick a { color:rgba(255,255,255,.8); }
body.is-dark .mquick a svg, body.is-home .mquick a svg { color:#7fd7ee; }
body.is-dark .mquick a:active, body.is-home .mquick a:active { background:rgba(255,255,255,.07); }
body.is-dark .mquick a + a, body.is-home .mquick a + a { border-left-color:rgba(255,255,255,.1); }

/* ── ① 다크 크롬: 맨위로 원반 (다크 페이지에서 흰 원반이던 것) */
body.is-dark .backtop, body.is-home .backtop {
  background:rgba(23,29,39,.9); color:#9ee7ff;
  box-shadow:0 8px 26px -8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.14);
}
body.is-dark .backtop:hover, body.is-home .backtop:hover { background:#7fd7ee; color:#0a0e16; }
body.is-dark .backtop .bt-ring .bg, body.is-home .backtop .bt-ring .bg { stroke:rgba(127,215,238,.2); }

/* ── ① 다크 크롬: 드로어 — 어두운 페이지에서 햄버거를 열면 순백 풀스크린이 번쩍이던 문제.
   드로어는 ≤960 터치 전용 UI라 데스크톱 제약 없음. (drawer-1) */
body.is-dark .drawer, body.is-home .drawer { background:#10151d; box-shadow:-20px 0 60px rgba(0,0,0,.55); }
body.is-dark .drawer-top, body.is-home .drawer-top { border-bottom-color:rgba(255,255,255,.1); }
body.is-dark .drawer-top .brand, body.is-home .drawer-top .brand { color:#eef0f4; }
body.is-dark .drawer-top button, body.is-home .drawer-top button { color:#dfe6ee; }
body.is-dark .drawer-nav > li, body.is-home .drawer-nav > li { border-bottom-color:rgba(255,255,255,.08); }
body.is-dark .drawer-nav > li > a, body.is-home .drawer-nav > li > a,
body.is-dark .drawer-nav > li > .drawer-row > a, body.is-home .drawer-nav > li > .drawer-row > a { color:#eef0f4; }
/* 화살표도 다크 드로어에서 묻히지 않게 */
body.is-dark .drawer-exp, body.is-home .drawer-exp { color:rgba(238,240,244,.55); }
body.is-dark .drawer-exp:hover, body.is-home .drawer-exp:hover { color:#eef0f4; background:rgba(255,255,255,.07); }
body.is-dark .drawer-sub a, body.is-home .drawer-sub a { color:rgba(255,255,255,.66); }
body.is-dark .drawer-sub a:hover, body.is-home .drawer-sub a:hover,
body.is-dark .drawer-sub a:focus-visible, body.is-home .drawer-sub a:focus-visible {
  background:rgba(255,255,255,.06); color:#9ee7ff; }
body.is-dark .drawer-sub3, body.is-home .drawer-sub3 { border-left-color:rgba(255,255,255,.14); }
body.is-dark .drawer-sub3 a, body.is-home .drawer-sub3 a { color:rgba(255,255,255,.55); }
body.is-dark .drawer-sub3 a:hover, body.is-home .drawer-sub3 a:hover,
body.is-dark .drawer-sub3 a:focus-visible, body.is-home .drawer-sub3 a:focus-visible {
  background:rgba(255,255,255,.06); color:#9ee7ff; }
body.is-dark .drawer-cta, body.is-home .drawer-cta { border-top-color:rgba(255,255,255,.1); }
/* color-mix 정적 폴백 패턴 유지(401행 함정 이력) — 폴백을 먼저, color-mix 를 나중에 */
body.is-dark .drawer-cta a, body.is-home .drawer-cta a {
  background:rgba(127,215,238,.13);
  background:color-mix(in srgb, #7fd7ee 13%, transparent);
  color:#9ee7ff; }
body.is-dark .drawer-foot a, body.is-home .drawer-foot a {
  border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.78); }
body.is-dark .drawer-foot a.on, body.is-home .drawer-foot a.on {
  background:#7fd7ee; color:#0a0e16; border-color:#7fd7ee; }
/* 흰 판은 걷어낸다(2026-08-12 대표님 지시) — 실측해 보니 두 로고 다 다크에서 잘 보인다:
   cni.png 는 브랜드 블루(0,120,192)+흰 글자, thingsone-dark.png 는 애초에 다크 배경용 밝은 변형이다.
   처음에 '어두운 로고'로 오판해 흰 판을 깔았던 것이고, 그게 다크 드로어에서 흰 딱지로 튀었다. */
body.is-dark .drawer-sub-family .fs-logo, body.is-home .drawer-sub-family .fs-logo {
  background:none; padding:0; }
/* JS 꺼짐 폴백 내비도 같은 톤으로 */
body.is-dark .nsnav, body.is-home .nsnav { background:#10151d; border-bottom-color:rgba(255,255,255,.12); }
body.is-dark .nsnav-lbl, body.is-home .nsnav-lbl,
body.is-dark .nsnav > .container > ul > li > a, body.is-home .nsnav > .container > ul > li > a { color:#eef0f4; }
body.is-dark .nsnav > .container > ul > li, body.is-home .nsnav > .container > ul > li { border-bottom-color:rgba(255,255,255,.08); }
body.is-dark .nsnav-sub a, body.is-home .nsnav-sub a,
body.is-dark .nsnav-lang a, body.is-home .nsnav-lang a { color:rgba(255,255,255,.66); }
body.is-dark .nsnav-lang a.on, body.is-home .nsnav-lang a.on { color:#9ee7ff; }

/* 다크 페이지의 본문 텍스트 링크(.btn-text)가 라이트 남색 그대로 → 대비 2.4:1 (infra-1) */
body.is-dark .btn-text { color:#9ee7ff; }

/* ── ② 한글 자간: 라틴 대문자용 트래킹(.14~.18em)이 한글에 적용되어
   '스 마 트 컨 트 롤 러'처럼 벌어지던 문제(5개 그룹 지적). 한국어 문서에서만 해제. */
/* 자간만이 아니라 모노스페이스 글꼴 자체가 더 큰 원인이다 — 한글은 모노 폰트에서 글자마다
   고정 폭 칸을 차지해 letter-spacing 이 0 이어도 '리 모 컨' 처럼 벌어져 보인다.
   한국어 라벨은 본문 글꼴로 되돌리고 자간도 푼다(영문 라벨은 mono 유지 — 원래 그 용도다). */
:lang(ko) .px-grouphd, :lang(ko) .px-dt-cat, :lang(ko) .px-spectable .cap,
:lang(ko) .cx-chip, :lang(ko) .px-fam-kick,
:lang(ko) .px-hero-proof dt, :lang(ko) .cx-hero-proof dt,
:lang(ko) .hl-ch-label, :lang(ko) .hl-consent dt, :lang(ko) .ci-rows dt, :lang(ko) .ci-kicker,
:lang(ko) .net-loc-tag, :lang(ko) .net-fam-eyebrow,
:lang(ko) .net-world-cap, :lang(ko) .net-specs dt, :lang(ko) .faq-item button em,
:lang(ko) .cx-rail .t, :lang(ko) .cx-kw, :lang(ko) .cx-tl .idx, :lang(ko) .hwx-tag,
:lang(ko) .pt-country, :lang(ko) .npin-meta, :lang(ko) .esx-kicker
  { font-family:inherit; letter-spacing:.01em; }
:lang(ko) .prodx .eyebrow, :lang(ko) .compx .eyebrow, :lang(ko) .hist .eyebrow
  { font-family:inherit; letter-spacing:.04em; }
/* 라벨 안에 라틴 토큰이 섞이면(예: "TV 리모컨") 그 부분만 mono 로 되돌린다 */
:lang(ko) .px-grouphd [lang="en"], :lang(ko) .cx-chip [lang="en"]
  { font-family:var(--font-mono); letter-spacing:.1em; }

/* ── ③ iOS 입력 강제 줌 방지: 16px 미만 입력 폰트는 포커스 때 사파리가 페이지를
   확대해 버린다(px-05·hl-3·faq-02·ct-01). 페이지 인라인 스타일보다 뒤+!important 로 확정. */
@media (max-width:860px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select, textarea { font-size:16px !important; }
}

/* ── ④ 스크롤 레일 힌트 정비 (com-3·rnd-08·ct-07·common-2·part-05·nav-01·nav-02·rndsw-01)
   셰브런은 '실제로 오른쪽에 더 있을 때만'(JS가 .can-r 부여) 표시.
   좌측 페이드 18→34px(잘린 글자가 좌측에서도 명확히 사라지게).
   JS 꺼짐(html:not(.js))에서는 기존 상시 표시 유지. */
@media (max-width:860px){
  .subnav .container{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 42px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 42px),transparent);}
  html.js .subnav:not(.subnav-ctx)::after{opacity:0;transition:opacity .25s}
  html.js .subnav:not(.subnav-ctx).can-r::after{opacity:1}
  html.js .subnav-ctx .container::after{opacity:0;transition:opacity .25s}
  html.js .subnav-ctx.can-r .container::after{opacity:1}
  /* 스크롤할 것이 없으면 페이드도 걷는다(마지막 탭이 공연히 흐려지던 문제) */
  html.js .subnav:not(.subnav-ctx):not(.can-l):not(.can-r) .container{-webkit-mask-image:none;mask-image:none}
  html.js .subnav-ctx:not(.can-l):not(.can-r) .sn-tabs{-webkit-mask-image:none;mask-image:none}
  /* 3뎁스 백링크: 셰브런만 남기지 말고 라벨을 되살린다 — 홑화살표만으로는 의미 불명 (rndsw-01) */
  .subnav-ctx .sn-up span{display:inline;font-size:12.5px;max-width:8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .subnav-ctx .sn-up .sn-chev{width:18px;height:18px}
}

/* ── ⑤ 홈 모바일 (home-01·02·05·07·09) ─────────────────────────── */
/* content-visibility 지연 렌더가 모바일(<1024px)에서 항상 켜져 있는데 플레이스홀더가
   일괄 100vh 라 실높이(586~1309px)와 최대 ±350px 어긋남 — 스크롤바가 출렁이고
   저사양 기기 빠른 플릭에서 빈 화면 플래시. 섹션별 실측 근사값으로 교체(390px 기준,
   auto 키워드 유지 → 한 번 렌더된 뒤에는 실측값 기억). 데스크톱(≥1024)은 snap-ready 가 해제. */
@supports (content-visibility:auto){
  @media (max-width:1023px){
    #main-below.home-defer{contain-intrinsic-size:auto 1160px}
    #home-rnd.home-defer{contain-intrinsic-size:auto 1310px}
    #home-products.home-defer{contain-intrinsic-size:auto 900px}
    #home-sustainability.home-defer{contain-intrinsic-size:auto 890px}
    .section--news.home-defer{contain-intrinsic-size:auto 950px}
    #home-family.home-defer{contain-intrinsic-size:auto 590px}
    #home-contact.home-defer{contain-intrinsic-size:auto 630px}
  }
}
@media (max-width:640px){
  /* 히어로 스크롤 큐가 흰 퀵바(z-index 90)에 깔려 안 보이던 문제 — 퀵바 위로 (home-02) */
  .hero-cine .hero-scrollcue{bottom:calc(58px + env(safe-area-inset-bottom,0px) + 12px)}
  /* 푸터 연락처(tel/mailto)가 10.8px — 사이트에서 가장 작은 글자가 최중요 터치 액션 (home-07) */
  .footer-legal .fl-mono{font-size:12.5px; white-space:normal}
}
@media (max-width:560px){
  /* 한 줄 3링크(22px 높이 밀집) → 세로 리스트 — 각 링크가 풀행 터치 타깃 (home-05) */
  .company-proof-links,.engineering-links{flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid rgba(255,255,255,.1)}
  .company-proof-links a,.engineering-links a{min-height:48px;justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.1)}
  /* 연혁 dl 마지막 헤어라인과 역량 ol 상단 헤어라인 사이 46px 빈 띠 (home-09) */
  .company-scope{margin-top:0}
}

/* ══════════════════════════════════════════════════════════════════════
   태블릿·데스크톱 레이어 (2026-08-12 전 해상도 특화)
   전제: 어제 만든 모바일 레이어는 ≤640/≤560/≤720 스코프였다. 그런데 터치 앱셸
   (드로어·퀵바)은 hover:none + pointer:coarse 로 **폭 제한 없이** 켜진다 —
   즉 768·834·1024 태블릿은 "손가락으로 쓰는데 모바일 개선은 하나도 안 닿는" 구간이었다.
   여기서 갈라 놓는다: **터치 인체공학·타이포는 폭과 무관하게(coarse), 레이아웃 치환은
   폭 기준으로**. 768px 에 1열 리스트 카드를 밀어 넣지 않는다(3열이 이미 잘 맞는다).
   ══════════════════════════════════════════════════════════════════ */

/* ── ① 터치 인체공학: 폭이 아니라 입력 방식으로 판단한다 ─────────────────
   어제 ≤640px 로 좁혀 고쳤던 것들이 태블릿에서 그대로 22px 로 남아 있었다.
   실측(768px /contact): tel·mailto 링크 높이 21px. */
@media (hover:none) and (pointer:coarse){
  /* 전화·이메일은 태블릿에서도 '탭하면 걸린다'가 보여야 한다 */
  .ci-rows dd a[href^="tel:"], .ci-rows dd a[href^="mailto:"],
  .hl-ch-value, .net-fam-card, .px-fam-cta, .px-rel-all, .cx-morelink,
  .faq-item button, .nl-title, .npin-title{
    min-height:44px; display:inline-flex; align-items:center;
  }
  .nl-title, .npin-title, .faq-item button{ display:flex; }
  /* 헤더 로고: min-height 가 걸려 있어도 inline 이면 무효였다 */
  .header .brand, .drawer-top .brand{ display:inline-flex; align-items:center; }
  /* 목록 행 자체를 손가락 크기로 */
  .nlist a{ min-height:52px; }
  .footer-col a, .fb-right .links a{ min-height:40px; display:inline-flex; align-items:center; }
}

/* ── ② 태블릿 세로(641~1023) — 터치인데 폭은 넉넉한 구간.
   레이아웃은 데스크톱 쪽을 쓰되, 밀도·활자·간격만 손에 맞춘다. */
@media (min-width:641px) and (max-width:1023px){
  /* ⚠ compx/prodx 소유 규칙은 여기 두면 안 된다 — 페이지 인라인 <style> 이 같은 명시도로
     소스 순서에서 이긴다(2026-08-11 기록된 함정). 각 파셜의 태블릿 블록에 넣었다.
     여기에는 전역 컴포넌트만 남긴다. */
  .eth-clauses li, .esx-bul li, .hl-step p{ font-size:15.5px; line-height:1.72; }
  /* 실측에서 남아 있던 14px 미만 본문(공용 컴포넌트만 — 푸터 법적표기는 의도된 작은 활자라 제외) */
  .hl-catalog li, .hl-consent dd, .nexcerpt, .pd-spec dd, .legal li{ font-size:15px; line-height:1.7; }
}

/* ── ③ 초대형(≥1600) — 컨테이너 1200px 고정이라 2560 에서 양옆 680px 씩이 빈다.
   무한정 늘리지 않고 한 단계만 넓혀 화면을 쓰되, 본문 줄길이는 지킨다. */
@media (min-width:1600px){
  .container{ max-width:1360px; }
  .prodx .container, .compx .container, .hist .container{ max-width:1360px; }
  /* 읽는 텍스트는 넓어진 만큼 늘어나면 안 된다 — 줄길이 상한 유지 */
  .cx-secthead, .px-secthead{ max-width:820px; }
  .cx-lead p, .cx-card p{ max-width:52ch; }
}
@media (min-width:2000px){
  .container{ max-width:1520px; }
  .prodx .container, .compx .container, .hist .container{ max-width:1520px; }
  /* 제품 그리드는 열을 늘려 카드가 비대해지지 않게 */
  .px-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .px-rel-rail{ grid-template-columns:repeat(7,1fr); }
  /* 히어로 배경 사진이 2560 에서 늘어나 뭉개지는 것 완화 */
  .hero-cine-media img, .px-hero-bg, .cx-hero-bg{ image-rendering:auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   태블릿 밀도 회복 (2026-08-12, 전 해상도 워크플로 확정분)
   근본 원인 하나: **폰용 1열 축약 규칙(≤860 / ≤960)이 641~1080 태블릿까지 내려온다.**
   768px 는 폰의 두 배 폭인데 ESG·CONTACT·뉴스·핵심가치가 전부 1열로 늘어져
   행마다 좌측 1/3만 채우고 나머지가 비었다. 이 구간만 2열로 되돌린다.
   ⚠ 이 블록은 위의 ≤860/≤960 규칙보다 **뒤**에 있어야 이긴다(같은 명시도).
   ══════════════════════════════════════════════════════════════════ */
@media (min-width:641px) and (max-width:1080px){
  /* 홈 ESG 3장이 1열 전폭으로 늘어져 한 장이 720px 를 쓰면서 내용은 좌측 40% 만 채웠다 */
  .esg-grid{ grid-template-columns:repeat(3,1fr); }
  .esg-card + .esg-card{ border-left:1px solid rgba(255,255,255,.16); border-top:0; }
  /* 문의 CTA 밴드 — 좌우 2열 복원 */
  .cta-band-inner{ grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; }
  /* 뉴스·공고 두 게시판이 세로로 쌓여 섹션 높이가 두 배가 됐다 */
  .news-home-cols{ grid-template-columns:1fr 1fr; gap:30px; }
  /* 회사 증명 사실 목록(1975/1995/1997)이 전폭 행 3개로 늘어져 행당 460px 가 비었다 */
  .company-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 24px; }
  .company-scope{ grid-template-columns:repeat(3,1fr); }
  /* 경영이념 핵심가치 3개 — 78px 배지가 단독 행을 먹던 1열 스택 해제 */
  .phil-vals{ grid-template-columns:repeat(3,1fr); }
  /* 역량 카드류도 2열 이상 유지(전역 컴포넌트) */
  .cards-3{ grid-template-columns:repeat(2,1fr); }
  .cards-2{ grid-template-columns:repeat(2,1fr); }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  /* 푸터 신뢰지표 4개 중 2개가 폰 축약(nth-child(n+3):none)으로 잘려 나갔다 —
     폭이 남는 태블릿에서는 4개 전부 보여 준다 */
  .footer-creds li:nth-child(n+3){ display:inline-flex; }
  .footer-creds{ grid-template-columns:repeat(2,1fr); }
  /* 푸터 상단도 폰처럼 세로 스택이었다 — 로고|문구 2열 복원 */
  .footer-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 32px; }
}

/* 제목 스케일: clamp 의 vw 중간항이 작아 768px 에서 전부 하한값(=390px 폰과 동일)에 붙었다.
   폭이 두 배인데 활자 위계가 그대로면 화면이 헐거워 보인다. 이 구간만 한 단계 올린다. */
@media (min-width:641px) and (max-width:1080px){
  .section-head h2{ font-size:clamp(26px,3.4vw,34px); }
  .hero-cine h1{ font-size:clamp(40px,5.6vw,52px); }
  .page-hero h1{ font-size:clamp(32px,4.4vw,44px); }
}

/* ══════════════════════════════════════════════════════════════════════
   전 해상도 감사 확정분 반영 (2026-08-12, 확정 197 중 전역 컴포넌트 소관)
   ══════════════════════════════════════════════════════════════════ */

/* ── 폼: 모바일 풀폭 버튼 패턴이 데스크톱까지 올라와 1,218px 짜리 시안 막대가 됐다.
   입력 폭도 데이터 성격과 무관하게 늘어나 textarea 한 줄이 78자까지 갔다. (hotline-1920-2·3) */
@media (min-width:861px){
  .btn-submit{ width:auto; min-width:200px; padding-inline:34px; }
  /* 폼 카드가 컨테이너 풀폭이라 넓어질수록 폼만 커졌다 — 읽고 쓰기 좋은 폭으로 묶는다 */
  .form-card form, .compx form[data-inquiry], .compx .form-card form{ max-width:760px; }
}

/* ── 뉴스 썸네일: 세로형 문서 스캔이 16:10 cover 로 잘려 한글 문장 중간이 끊긴다.
   모바일(≤620)에서만 고쳤던 것을 전 폭으로 올린다. (news-768-01·news-1920-02) */
.nthumb{ aspect-ratio:16/9; }
.nthumb img{ object-fit:contain; background:#0f151d; }

/* ── 초대형 활자: 컨테이너만 1200→1360→1520 으로 두 번 넓혔는데 글자는 그대로라
   2560 에서 화면이 헐거웠다. clamp 상한이 이미 1366px 에서 닿아 1366 과 2560 의
   헤드라인 크기가 완전히 같았다. (home-2560-01·07) */
@media (min-width:1600px){
  .hero-cine h1{ font-size:clamp(44px,3.6vw,68px); }
  .section-head h2{ font-size:clamp(30px,2.4vw,42px); }
  .section-head p, .footer .desc{ font-size:15px; }
  .company-proof-links a, .engineering-links a, .cta-band-link{ font-size:14.5px; }
}

/* ── 고객지원 탭바가 페이지마다 다른 높이에서 시작해 탭을 옮길 때마다 최대 61px 튀었다.
   페이지 히어로 높이를 고정해 기준선을 맞춘다. (support-1920-01) */
@media (min-width:861px){
  .page-hero{ min-height:268px; display:flex; flex-direction:column; justify-content:center; }
}