/* =========================================================
   SAMJIN C&I — PREMIUM THEME (loads LAST, after styles.css + sub.css)
   "Warm editorial premium" — Pretendard 고딕 제목 + Satoshi + Pretendard,
   warm bone canvas, single deep-blue accent, no gradients, editorial space.
   Grounded in: leonxlnx/taste-skill (gpt-tasteskill · redesign-skill · minimalist),
   After Hours Studio, Emil Kowalski motion. Sentence rules shared with ThingsOne.
   ========================================================= */

:root{
  /* fonts — Inter is BANNED by taste-skill */
  --font-en: 'Satoshi', 'Pretendard Variable', system-ui, sans-serif;
  --font: 'Pretendard Variable', 'Satoshi', system-ui, -apple-system, sans-serif;
  /* 제목 서체 — 2026-08-13 (v013 No.4 "바탕체 키워드 고딕체로 (맑은 고딕체) 변경").
     예전 값: 'Newsreader','Noto Serif KR','Pretendard Variable',serif
       → 영문은 Newsreader 세리프, 한글은 Noto Serif KR(명조=바탕체)로 떨어졌다. 그 바탕체를 걷어낸다.
     사장님 확정: B안(영문 제목도 전부 고딕) — 한 문장에 한글·영문이 섞였을 때 서체가 둘로 갈리지 않게.
     'Malgun Gothic' 은 윈도우 전용 시스템 폰트라 대표로 쓰지 않고 폴백에만 둔다.
     Pretendard 가 이미 본문에서 쓰는 현대 한글 고딕이고 맥·안드로이드까지 같은 모양으로 나온다. */
  --font-display: 'Pretendard Variable', 'Satoshi', 'Malgun Gothic', system-ui, sans-serif;
  --font-ko: 'Pretendard Variable', sans-serif;

  /* warm editorial palette */
  --bone: #FBFAF7;
  --bone-2: #F3EFE7;
  --bg: #FBFAF7;
  --white: #FBFAF7;
  --ink: #1B1712;
  --fg: #1B1712;
  --gray-50: #F3EFE7;      /* tint sections -> warm bone-2 */
  --gray-100: #EDE8DE;
  --gray-150: #E6E0D4;
  --gray-500: #6A6258;
  --gray-600: #544C42;
  --muted: #544C42;
  --line: rgba(27,23,18,.12);

  /* single deep-blue accent (scarce). brand blues kept for legacy but body accent = deep */
  --accent: #12678F;
  --primary: #12678F;

  --r-card: 20px;
  --r-med: 14px;
}

/* warm canvas with a soft top-right warmth */
html, body{ background: var(--bone); color: var(--ink); }
body{
  font-family: var(--font-ko);
  background-image: radial-gradient(125% 90% at 100% -2%, #F6F1E8 0%, transparent 46%);
  background-attachment: fixed;
  /* word-break / overflow-wrap intentionally absent — styles.css owns wrapping */
}

/* ---------- display headings -> Pretendard 고딕 (2026-08-13 v013 No.4) ---------- */
.hero__title, .subhero__title, .section-title, .foot h2,
h1, h2{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.018em;
}
/* serif needs a descender-safe line-height (no g/y/p clipping). Line-height only —
   text-wrap:balance for these is already declared by the system in styles.css. */
h1, h2, .section-title, .subhero__title{
  line-height: 1.14;
}
.hero__title{ line-height: 1.04; }
/* eyebrows / small labels -> clean sans (Satoshi) */
.eyebrow, .subhero__eyebrow, .hero__eyebrow, .pcard__cat{
  font-family: var(--font-en);
}

/* ---------- KILL the blue-gradient text (the "AI fingerprint") -> ink, accent word = deep-blue italic serif ---------- */
.grad, .section-title .grad, .subhero__title .grad,
.hero__title .line.grad{
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
  background-clip: initial !important;
}
.section-title .grad, .subhero__title .grad,
.section-title .accent{
  color: var(--accent);
  font-weight: 600;
}
/* italic accent — 실사용 0건(.it 마크업 없음). 세리프를 걷어낸 뒤로는 합성 이탤릭이 되니 쓰지 말 것 */
.foot h2 .it, .hero__h .it{ font-style: italic; font-weight: 500; color: var(--accent); }
.sub-section--dark .section-title .grad, .subhero .subhero__title .grad{ color: var(--brand-300); }

/* ---------- warm surfaces: kill the navy product plates -> light warm plate ---------- */
.pcard__plate{
  background: radial-gradient(92% 82% at 50% 28%, #ffffff, var(--bone-2)) !important;
}
.pcard__plate::after{ display: none !important; }         /* remove blueprint grid */
.pcard__plate img{
  filter: drop-shadow(0 22px 28px rgba(27,23,18,.16)) !important;
}
.pcard__cat{ color: var(--accent); }
.sub-section--tint{ background: var(--bone-2); }

/* ---------- tint the icard / cards to warm, soften borders ---------- */
.icard, .pcard, .addr-card, .step, .qc, .frow__media--stage{
  border-color: var(--line);
}
.icard:hover, .pcard:hover{ border-color: rgba(18,103,143,.32); box-shadow: 0 20px 44px -24px rgba(27,23,18,.28); }
.icard__ico{ background: rgba(18,103,143,.09); color: var(--accent); }
.icard ul li::before{ background: var(--accent); }
.em-blue{ color: var(--accent); }

/* ---------- pills / lnb / buttons -> warm+accent ---------- */
.pills a.is-active{ background: var(--ink); border-color: var(--ink); }
.lnb a.is-active{ color: var(--accent); }
.lnb{ background: rgba(250,246,239,.92); }

/* ---------- sentence rules: see the TYPOGRAPHY / LINE-BREAK SYSTEM in styles.css.
   Every selector this block used to re-declare is already covered there, so the
   duplicate is gone. Add new components to that system, not here. ---------- */

/* ---------- eyebrow: clean leading hairline + accent (numbering already removed) ---------- */
.eyebrow{ color: var(--accent); }

/* ---------- HEADER -> always light on non-home pages (all bg light). Home keeps
   its dark-hero transparent header (original) via body.home exclusion. ---------- */
body:not(.home) .site-header{ background: rgba(251,250,247,.84) !important; border-bottom: 1px solid var(--line); }
body:not(.home) .site-header .nav__toplink,
body:not(.home) .site-header:not(.is-scrolled) .nav__toplink{ color: var(--ink) !important; }
body:not(.home) .site-header .nav__toplink:hover,
body:not(.home) .site-header:not(.is-scrolled) .nav__toplink:hover,
body:not(.home) .site-header .nav__list li:hover > .nav__toplink{ color: var(--accent) !important; }
body:not(.home) .site-header .hdr-drop__btn,
body:not(.home) .site-header:not(.is-scrolled) .hdr-drop__btn{ color: var(--ink) !important; border-color: var(--line) !important; background: #fff !important; }
body:not(.home) .site-header .nav-toggle,
body:not(.home) .site-header:not(.is-scrolled) .nav-toggle{ color: var(--ink) !important; }
/* (구 .lang-btn/.lang__btn 규칙 삭제 2026-07-21 — 현행 언어 UI 는 .hdr-drop/.lang-select) */
.nav__toplink.is-current{ color: var(--accent) !important; }
.nav__toplink::after{ background: var(--accent); }
.nav__panel{ background: #fff; border: 1px solid var(--line); }
.nav__panel a{ color: var(--gray-600); }
.nav__panel a:hover{ color: var(--accent); }
/* home: warm the scrolled header + keep dark-hero transparent top intact */
.home .site-header.is-scrolled{ background: rgba(251,250,247,.9) !important; }

/* ---------- SUBHERO -> light warm editorial (was dark navy) ---------- */
.subhero{ background: var(--bone) !important; color: var(--ink); padding-bottom: clamp(40px,6vw,72px); }
.subhero::before{
  background: radial-gradient(120% 100% at 100% -10%, #F1E7D6 0%, transparent 48%),
              radial-gradient(90% 80% at -5% 0%, rgba(18,103,143,.06), transparent 55%) !important;
}
.subhero::after{ display: none !important; }               /* remove dark blueprint grid */
/* ---- SUBHERO PHOTO — restored 2026-07-17 (was `display:none`) --------------
   The markup + 11 webp files were never removed, so every sub page was still
   downloading a hidden photo eager (~1MB across the 15 pages) for nothing.
   It cannot simply be un-hidden: sub.css's overlay is a near-black scrim
   (rgba(5,8,14,.94)) built for the ORIGINAL dark navy subhero + white text,
   while this file has since turned the subhero light with near-black ink
   (#1B1712). Photo + dark scrim + dark ink = unreadable. So the scrim is
   re-tinted to the warm bone canvas: the copy side stays essentially solid
   bone (ink keeps its contrast) and the photo surfaces toward the right. */
.subhero__photo{ display: block !important; }
.subhero__photo::after{
  background:
    linear-gradient(90deg, rgba(251,250,247,.88) 0%, rgba(251,250,247,.62) 46%, rgba(251,250,247,.05) 100%),
    linear-gradient(0deg, rgba(251,250,247,.84) 0%, rgba(251,250,247,.06) 62%, rgba(251,250,247,0) 100%) !important;
}
.subhero__photo img{ opacity: 1 !important; }
@media (max-width: 900px){
  /* phone: copy runs the full width, so the photo has to sit further back */
  .subhero__photo::after{
    background: linear-gradient(0deg, rgba(251,250,247,.95) 0%, rgba(251,250,247,.72) 55%, rgba(251,250,247,.5) 100%) !important;
  }
}
.subhero__eyebrow{ color: var(--accent); }
.subhero__title{ color: var(--ink); }
.subhero__lead{ color: var(--gray-600); }
.crumb, .crumb a{ color: var(--gray-500); }
.crumb a:hover{ color: var(--ink); }
.crumb > * + *::before{ color: var(--gray-300); }
.crumb strong{ color: var(--accent); }
/* pills that were tuned for dark subhero */
.subhero .pills a, .subhero + * .pills a{ background: #fff; }

/* ---------- HOMEPAGE redesign-layer (.rx-*) -> premium editorial ---------- */
/* serif titles (redesign layer forced Pretendard sans for KO) */
.home .rx-title, .home .rx-row__name, .home .rx-stat strong, .home .rx-media__body strong,
.home .rx-tile__cap strong, .home .rx-sup strong, .home .rx-famcell strong, .home .rx-feature strong{
  font-family: var(--font-display) !important; font-weight: 600 !important;
}
.home .rx-title{ letter-spacing: -.02em !important; line-height: 1.12 !important; }
.home .rx-title .accent, .home .rx-row:hover .rx-row__name, .home .rx-eyebrow,
.home .rx-more, .home .rx-feature time, .home .rx-sideitem time, .home .rx-famcell__url,
.home .rx-colinks a:hover, .home .rx-row:hover .rx-row__arw{ color: var(--accent) !important; }
/* warm product plates instead of cool blue gradient tiles */
.home .rx-tile,
.home .rx-tile:nth-child(2), .home .rx-tile:nth-child(3), .home .rx-tile:nth-child(4){
  background: radial-gradient(94% 84% at 50% 26%, #ffffff, var(--bone-2)) !important;
}
.home .rx-co__photo figcaption{ background: rgba(27,23,18,.6); }

/* hero: commanding display size (mobile min held at 1.9rem — QA-safe at 360/390 — but a much
   steeper slope + higher ceiling so the make-or-break fold owns the top of the type scale) */
/* 히어로 제목 크기 축소(2026-08-13 사장님 지시 "글자 포인트좀 줄여라").
   예전 값 clamp(1.9rem, 4.7vw, 5.4rem) → 1440px 에서 67.7px, 1920px 에서 86.4px 였다.
   문구에 쉼표와 느낌표가 붙어 길어진 데다 서체가 세리프에서 고딕(Pretendard)으로 바뀌며
   글자폭이 늘어 제목이 화면을 지나치게 눌렀다. 약 15% 줄인다(1440px 59px / 1920px 73.6px). */
.home .hero__title{ font-size: clamp(1.75rem, 4.1vw, 4.6rem) !important; line-height: 1.04 !important; letter-spacing: -.028em !important; max-width: none !important; }
/* 히어로 CTA 2개(i18n hero.cta1/cta2). 둘 다 유리(.btn--ghost) 로 통일한다 —
   2026-07-29 사장님 지시로 '제품 보기'를 '문의하기'와 같은 테마로 맞췄다.
   그 전에는 '제품 보기'만 흰색 솔리드(.btn--hero-primary)로 위계를 줬으나,
   따뜻한 황혼 사진 위에서 흰 덩어리가 튀는 쪽보다 유리 2개가 낫다는 판단이다. */
.home .hero__cta{ display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(24px, 3vw, 32px) 0 0; }
/* 테두리를 순백(rgba(255,255,255,.55))으로 두면 따뜻한 황혼 배경(R>G>B) 위에서 무채색으로 떠 보인다
   (2026-07-28 사장님 지적, 실측: 배경 rgb(41,32,24) 대비 테두리 rgb(126,123,116) = 채도 0).
   히어로의 다른 유리 요소(신뢰 칩 .3 / 프로토콜 배지 .25)와 같은 골드 계열로 맞추되,
   주 CTA 다음가는 위계라 불투명도만 조금 높인다. */
.home .hero__cta .btn--ghost{
  background: rgba(28,18,10,.34); border: 1px solid rgba(235,192,140,.5); color: var(--xp-cream);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.home .hero__cta .btn--ghost:hover{ background: rgba(235,192,140,.14); border-color: var(--xp-gold-hi); color: #fff; }
/* .btn--hero-primary(다크 히어로 위 화이트 솔리드)는 2026-07-29 자로 쓰는 곳이 없어 제거했다.
   되돌리려면 git 이력에서 꺼내 index.php 히어로 CTA 의 클래스를 바꾸면 된다. */

/* ---- Korean display harmony (premium.css loads last → wins) ----------------------
   Latin-grade negative tracking (-.03 to -.042em) jams Hangul syllable blocks, which sit on a
   fixed advance and are not meant to be optically tightened. Relax it for KO display; keep the
   tight values on the EN path. Eyebrows: uppercase + wide tracking degrades Hangul, so tighten. */
html[lang="ko"] .hero__title, html[lang="ko"] .section-title, html[lang="ko"] .rx-title,
html[lang="ko"] .rx-row__name, html[lang="ko"] .subhero__title,
html[lang="ko"] .rx-tile__cap strong{
  letter-spacing: -.006em !important;
}
html[lang="ko"] .hero__eyebrow, html[lang="ko"] .rx-eyebrow,
html[lang="ko"] .eyebrow, html[lang="ko"] .subhero__eyebrow{
  letter-spacing: .06em !important;
}
/* .home .hero__title .line{display:block} removed — styles.css already sets it */
.home .hero__desc, .home .hero__lead{ font-size: clamp(1rem, 1.3vw, 1.12rem) !important; }
.home .prod[data-key="camera"]{ z-index: 6 !important; }
/* hero background: warm dusk living-room scene (clean — no products, atmospheric editorial) */
.home .hero{
  background:
    linear-gradient(100deg, rgba(14,10,6,.92) 0%, rgba(14,10,6,.66) 28%, rgba(14,10,6,.2) 52%, rgba(14,10,6,.08) 70%, rgba(14,10,6,.34) 100%),
    url("../img/hero/hero1-hub.webp") center 44% / cover no-repeat, #17110b !important;
}
.home .hero__bg, .home .stage__cove, .home .stage__pool, .home .stage__dust, .home .stage__metric{ opacity: 0 !important; }
.home .depth{ display: none !important; }        /* products removed — clean atmospheric room */
/* cinematic depth: vignette (::before) + film grain (::after) over the dusk room */
.home .hero::before{
  content: "" !important; position: absolute !important; inset: 0 !important; opacity: 1 !important;
  background: radial-gradient(135% 125% at 34% 44%, transparent 40%, rgba(9,6,3,.55) 100%) !important;
  z-index: 1 !important; pointer-events: none !important; mix-blend-mode: normal !important;
}
.home .hero::after{
  content: "" !important; position: absolute !important; inset: 0 !important; opacity: .5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 150px 150px !important; mix-blend-mode: overlay !important;
  z-index: 2 !important; pointer-events: none !important;
}
.home .stage__copy{ z-index: 5 !important; }

/* eyebrow: warm amber with a thin gold hairline */
.home .hero__eyebrow{ color: #EBC08C !important; letter-spacing: .22em !important; }
.home .hero__eyebrow::before{ background: linear-gradient(90deg, #C9922E, rgba(201,146,46,0)) !important; }
/* constrain the product cast to the site container width (dark stage bg stays full-bleed) */
.home .depth{ left: max(0px, calc((100% - var(--container)) / 2)) !important; right: max(0px, calc((100% - var(--container)) / 2)) !important; }
.home .stage__metric{ left: max(0px, calc((100% - var(--container)) / 2)) !important; }
/* align hero title/copy to the same container as the body + product cast */
.home .stage__copy{ left: max(0px, calc((100% - var(--container)) / 2)) !important; right: max(0px, calc((100% - var(--container)) / 2)) !important; width: auto !important; }

/* motion: honor reduced-motion (Emil) already handled globally */
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior: auto; } }

/* ============================================================
   DENSITY MOCKUP (2026-07-14) — #company : warm cinematic photo bg + glass + glow
   (sample for approval before rolling to all body sections)
   ============================================================ */
.home #company{
  /* CNI-original cinematic bokeh backdrop (rendered image — distinct from ThingsOne) */
  background:
    linear-gradient(92deg, rgba(12,9,6,.93) 0%, rgba(12,9,6,.74) 40%, rgba(12,9,6,.3) 100%),
     url("../img/bg/bg-company-v2.webp") center / cover no-repeat, #0f0b07 !important;
  color:#F2EADD !important;
  position:relative !important;
}
.home #company .rx-eyebrow{ color:#EBC08C !important; }
.home #company .rx-eyebrow::before{ background:linear-gradient(90deg,#C9922E,rgba(201,146,46,0)) !important; }
.home #company .rx-title{ color:#F7F0E5 !important; }
.home #company .rx-title .accent{ color:#EBC08C !important; }
.home #company .rx-lead{ color:rgba(242,234,221,.8) !important; }
/* glass-framed photo */
.home #company .rx-co__photo{
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:0 44px 100px -46px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.home #company .rx-co__photo figcaption{ background:rgba(12,9,6,.5) !important; backdrop-filter:blur(8px); }
/* glass stat strip */
.home #company .rx-stats{
  border:1px solid rgba(255,255,255,.14) !important; border-radius:16px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  padding:26px 22px !important; margin-top:34px !important;
}
/* Column divider — desktop only. Same trap as `.home #capa .rx-row` above: an
   ID-specificity !important rule with no min-width guard beat index.php's
   `@media (max-width:768px){ .rx-stat{ border-left:none } }`, so once the stats
   stacked vertically each row still drew a stray vertical rule down its left. */
@media (min-width: 769px){
  .home #company .rx-stat+.rx-stat{ border-left:1px solid rgba(255,255,255,.15) !important; }
}
.home #company .rx-stat strong{ color:#F7F0E5 !important; }
.home #company .rx-stat span{ color:rgba(242,234,221,.66) !important; }
.home #company .rx-colinks{ border-top:1px solid rgba(255,255,255,.14) !important; }
.home #company .rx-colinks a{ color:#F2EADD !important; border-bottom-color:rgba(255,255,255,.12) !important; }
.home #company .rx-colinks a em{ color:rgba(242,234,221,.5) !important; }
.home #company .rx-colinks a:hover, .home #company .rx-colinks a:hover em{ color:#EBC08C !important; }

/* ============================================================
   DENSITY ROLLOUT (2026-07-14) — #capa #products #ai #news
   CNI-original cinematic bokeh bg + glass surfaces + gold accents
   ============================================================ */
.home #capa, .home #products, .home #ai, .home #news{ color:#F2EADD !important; position:relative !important; }
.home #capa{ background: linear-gradient(92deg, rgba(12,9,6,.93) 0%, rgba(12,9,6,.75) 40%, rgba(12,9,6,.33) 100%), url("../img/bg/bg-capa-v2.webp") center/cover no-repeat, #0f0b07 !important; }
.home #products{ background: linear-gradient(92deg, rgba(11,8,5,.92) 0%, rgba(11,8,5,.7) 42%, rgba(11,8,5,.34) 100%), url("../img/bg/bg-products-v2.webp") center/cover no-repeat, #0e0a06 !important; }
.home #ai{ background: linear-gradient(92deg, rgba(10,8,5,.93) 0%, rgba(10,8,5,.72) 40%, rgba(10,8,5,.3) 100%), url("../img/bg/bg-ai-v2.webp") center/cover no-repeat, #0c0805 !important; }
.home #news{ background: linear-gradient(92deg, rgba(13,10,7,.93) 0%, rgba(13,10,7,.75) 42%, rgba(13,10,7,.35) 100%), url("../img/bg/bg-news-v2.webp") center/cover no-repeat, #100b07 !important; }
/* shared: eyebrow / title / lead / more */
.home #capa .rx-eyebrow, .home #products .rx-eyebrow, .home #ai .rx-eyebrow, .home #news .rx-eyebrow{ color:#EBC08C !important; }
.home #capa .rx-eyebrow::before, .home #products .rx-eyebrow::before, .home #ai .rx-eyebrow::before, .home #news .rx-eyebrow::before{ background:linear-gradient(90deg,#C9922E,rgba(201,146,46,0)) !important; }
.home #capa .rx-title, .home #products .rx-title, .home #ai .rx-title, .home #news .rx-title{ color:#F7F0E5 !important; }
.home #capa .rx-title .accent, .home #products .rx-title .accent, .home #ai .rx-title .accent, .home #news .rx-title .accent{ color:#EBC08C !important; }
.home #capa .rx-lead, .home #products .rx-lead, .home #ai .rx-lead, .home #news .rx-lead{ color:rgba(242,234,221,.8) !important; }
.home #capa .rx-more, .home #products .rx-more, .home #ai .rx-more, .home #news .rx-more{ color:#EBC08C !important; }
/* CAPA — index rows */
.home #capa .rx-index{ border-top-color:rgba(255,255,255,.3) !important; }
.home #capa .rx-row{ border-bottom-color:rgba(255,255,255,.13) !important; }
.home #capa .rx-row__name{ color:#F7F0E5 !important; }
.home #capa .rx-row:hover .rx-row__name{ color:#EBC08C !important; }
.home #capa .rx-row__desc{ color:rgba(242,234,221,.66) !important; }
.home #capa .rx-row__arw{ color:rgba(255,255,255,.42) !important; }
.home #capa .rx-row:hover .rx-row__arw{ color:#EBC08C !important; }
/* PRODUCTS — glass bento tiles */
.home #products .rx-tile,
.home #products .rx-tile:nth-child(2), .home #products .rx-tile:nth-child(3), .home #products .rx-tile:nth-child(4){
  background:linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  box-shadow:0 30px 66px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.home #products .rx-tile__cap strong{ color:#F7F0E5 !important; }
.home #products .rx-tile__cap span{ color:rgba(242,234,221,.64) !important; }
/* AI — media duo */
.home #ai .rx-media{ border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 40px 90px -44px rgba(0,0,0,.8) !important; }
.home #ai .rx-media__body strong{ color:#F7F0E5 !important; }
.home #ai .rx-media__desc{ color:rgba(242,234,221,.82) !important; }
.home #ai .rx-media__cta{ color:#EBC08C !important; }
/* NEWS — feature + side list + support band */
.home #news .rx-feature{ border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 40px 90px -44px rgba(0,0,0,.8) !important; }
.home #news .rx-feature__tag{ color:#EBC08C !important; }
.home #news .rx-sideitem{ border-bottom-color:rgba(255,255,255,.13) !important; }
.home #news .rx-sideitem time, .home #news .rx-sidelink{ color:#EBC08C !important; }
.home #news .rx-sideitem strong, .home #news .rx-sideitem a, .home #news .rx-sideitem h3{ color:#F2EADD !important; }
.home #news .rx-side__foot{ border-top-color:rgba(255,255,255,.13) !important; }
.home #news .rx-support__band{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important; border:1px solid rgba(255,255,255,.12) !important; }
.home #news .rx-support__label{ color:rgba(242,234,221,.72) !important; }
.home #news .rx-support__head, .home #news .rx-sup{ color:#F7F0E5 !important; }
.home #news time{ color:#EBC08C !important; }   /* feature + side dates -> gold (was deep blue) */

/* FAMILY — align to warm cinematic + glass cells */
.home #family{ background: linear-gradient(92deg, rgba(12,9,6,.94) 0%, rgba(12,9,6,.8) 45%, rgba(12,9,6,.5) 100%), url("../img/bg/bg-news-v2.webp") center/cover no-repeat, #0f0b07 !important; color:#F2EADD !important; }
.home #family .rx-eyebrow{ color:#EBC08C !important; }
.home #family .rx-eyebrow::before{ background:linear-gradient(90deg,#C9922E,rgba(201,146,46,0)) !important; }
.home #family .rx-title{ color:#F7F0E5 !important; }
.home #family .rx-title .accent{ color:#EBC08C !important; }
.home #family .rx-lead{ color:rgba(242,234,221,.8) !important; }
.home #family .rx-fam{   /* the white container -> dark glass panel */
  background:linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 34px 74px -38px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.home #family .rx-famcell{ background:transparent !important; border-color:rgba(255,255,255,.13) !important; }
.home #family .rx-famcell__logo{ background:transparent !important; box-shadow:none !important; padding:0 !important; }
.home #family .rx-famcell__logo img{ filter:none !important; opacity:1 !important; }   /* always full color (was grayscale until hover) */

/* ============================================================
   FEEDBACK PASS (2026-07-14) — title/nav redundancy, hero trust chips, family inline
   ============================================================ */
/* 1) unified section-title size across ALL home sections (was inconsistent) */
.home .rx-title{ font-size:clamp(1.7rem,2.9vw,2.4rem) !important; line-height:1.2 !important; letter-spacing:-.025em !important; }
.home #company .rx-title{ line-height:1.28 !important; }   /* company stays 2 lines */
/* 2) company colinks -> arrow sits right after the label (was pushed far right) */
.home #company .rx-colinks a{ justify-content:flex-start !important; gap:8px !important; }
.home #company .rx-colinks a span{ flex:0 0 auto !important; }
/* 3) capability rows -> drop redundant per-row arrows (single "보유 역량 →" remains) */
.home #capa .rx-row__arw{ display:none !important; }
/* Desktop-only: this 2-column split is an ID-specificity !important rule, so
   without the min-width guard it also beat index.php's `@media (max-width:768px)
   { .rx-row{grid-template-columns:1fr auto} }` and squeezed the name column to
   120px on a phone — "B2B · B2C 역량" then wrapped to 2 lines while its sibling
   rows stayed at 1, breaking the index alignment. */
@media (min-width: 769px){
  .home #capa .rx-row{ grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) !important; }
}
/* 6) hero trust -> premium chips below the copy (bottom bar removed) */
.home .hero__trust{ list-style:none; display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 0; padding:0; }
.home .hero__trust li{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-en); font-size:.79rem; font-weight:600; color:rgba(246,239,229,.92);
  padding:8px 15px; border:1px solid rgba(235,192,140,.3); border-radius:999px;
  background:rgba(255,255,255,.05); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.home .hero__trust li::before{ content:""; width:6px; height:6px; border-radius:50%; background:#EBC08C; box-shadow:0 0 9px rgba(235,192,140,.75); }
/* 7) family -> logo inline before the title, uniform baseline */
.home #family .rx-famcell__head{ display:flex; align-items:center; gap:11px; min-height:26px; }
.home #family .rx-famcell__logo{ min-height:0 !important; justify-content:flex-start !important; }
.home #family .rx-famcell__logo img{ height:22px !important; width:auto !important; transform:translateY(-2px) !important; }
/* ★ NAVER 셀만 예외 — 여기만 마크 옆에 워드마크(글자)가 붙는다.
   위의 translateY(-2px) 는 '로고만 있는 셀'(삼진·씽즈원) 기준이라, 글자와 나란히 놓이면
   마크가 글자보다 2px 떠오른다. 2026-08-14 실측: 마크 중심 403.09 / "NAVER" 글자 잉크 중심 405.09.
   보정을 풀면 두 중심이 405.09 로 정확히 맞는다. */
.home #family .rx-famcell__logo img.naver-mark{ transform:none !important; }
/* footer corp: index 전용이던 .footer__corp-name/-addr/-contact(<p> 구조) 규칙은
   inc/footer.php 가 전 페이지를 <dl>+footer.corp.* 구조로 통합하면서 대상 요소가
   사라져 삭제했다. dl 스타일은 styles.css 의 .footer__corp dl 규칙이 담당한다. */
.footer__corp dd a:hover{ color:#EBC08C !important; }
.home #family .rx-famcell strong{ font-size:1.06rem !important; }
/* 4) tracker tile — dark card pops via warm glow + more room (front-facing card) */
.home #products .rx-tile--wide{
  background:
    radial-gradient(50% 96% at 50% 42%, rgba(247,226,192,.2), transparent 66%),
    linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
}
.home #products .rx-tile--wide .rx-tile__media{ padding:14px 40px 52px !important; }
.home #products .rx-tile--wide .rx-tile__media img{ filter:drop-shadow(0 16px 30px rgba(0,0,0,.55)) !important; }
/* hero copy -> vertically centered so the bottom isn't empty (desktop only; mobile keeps flow layout) */
@media (min-width:769px){
  .home .stage__copy{ top:50% !important; bottom:auto !important; transform:translateY(-50%) !important; }
}
.home #family .rx-famcell strong{ color:#F7F0E5 !important; }
.home #family .rx-famcell__desc{ color:rgba(242,234,221,.68) !important; }
.home #family .rx-famcell__url{ color:#EBC08C !important; }

/* ============================================================
   DARK-THEME CONTRAST FIXES (2026-07-14) — text that stayed in the old
   light-theme ink/gray colors (invisible on the dark sections; only showed on hover)
   ============================================================ */
/* defensive: titles across all dark sections -> cream (default state, no hover needed) */
.home #company strong, .home #capa strong, .home #products strong, .home #ai strong, .home #news strong, .home #family strong,
.home #company h3, .home #capa h3, .home #products h3, .home #ai h3, .home #news h3, .home #family h3,
.home #company h4, .home #news h4,
.home #news .rx-feature a, .home #news .rx-feature h2{ color:#F7F0E5 !important; }
/* company "더보기" link (was deep blue span + arrow) */
.home #company .rx-more, .home #company .rx-more span, .home #company .rx-more em{ color:#EBC08C !important; }
/* NEWS support quick-links band (FAQ / 1:1 문의 / 자료실 / A/S 안내) */
.home #news .rx-sup{ border-color:rgba(255,255,255,.13) !important; }
.home #news .rx-sup strong{ color:#F7F0E5 !important; }
.home #news .rx-sup span{ color:rgba(242,234,221,.66) !important; }
.home #news .rx-sup em{ color:#EBC08C !important; }
.home #news .rx-sup:hover strong{ color:#EBC08C !important; }   /* hover = subtle emphasis only */

/* ============================================================
   FOOTER — warm-align with the cinematic system (site-wide, replaces cool navy)
   ============================================================ */
.site-footer{ background:linear-gradient(180deg,#131009 0%, #0c0906 100%) !important; }
.footer__cta-eyebrow{ color:#EBC08C !important; }
/* footer CTA + 서브페이지 .cta-band 의 1:1 문의하기 = 히어로 문의하기와 같은 글래스 고스트
   (owner request 2026-07-21 "버튼 색상 통일") — 둘 다 다크 스테이지 위라 같은 규칙을 공유 */
.site-footer .btn--ghost, .cta-band .btn--ghost{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.55); color:#F6F0E6;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.site-footer .btn--ghost:hover, .cta-band .btn--ghost:hover{
  background:rgba(255,255,255,.16); border-color:#fff; color:#fff; transform:translateY(-2px);
}

/* footer Family: 전폭 가로 로고 스트립 — [로고 + 캡션] × 3 을 한 줄에 (owner 2026-07-21 "다 로고 넣고 가로로") */
.footer__family{ padding: 0 var(--gutter) 30px; }
/* 패밀리 링크가 .footer__top 안으로 들어와 브랜드와 한 줄이 됐다 — 오른쪽 정렬로 마감.
   한 줄이 아닌 폭(줄바꿈되는 시점)에서는 브랜드와 같은 왼쪽 정렬이라야 어긋나 보이지 않는다. */
.footer__top .footer__family-row{ justify-content: flex-end; gap: 12px clamp(20px, 3vw, 40px); }
@media (max-width: 900px){
  .footer__top{ flex-direction: column; align-items: flex-start; }
  .footer__top .footer__family-row{ justify-content: flex-start; }
}
.footer__family h3{
  font-family:var(--font-en); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.55); font-weight:700; margin:0 0 16px;
}
.footer__family-row{ display:flex; flex-wrap:wrap; align-items:center; gap: 14px clamp(24px,4vw,56px); }
.footer__family-row a{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.9rem; color:rgba(255,255,255,.66); transition:color .25s;
}
.footer__family-row a:hover{ color:#fff; }
.footer__family-row img{ display:block; width:auto; }
.footer__family-row a[href*="naver"] img{ border-radius:3px; }
.ft-naver{ display:inline-flex; align-items:center; gap:6px; }
.ft-naver b{ font-family:var(--font-en); font-weight:800; font-size:.92rem; letter-spacing:.04em; color:#03C75A; line-height:1; }

/* back-to-top: 스크롤 후 우하단에 뜨는 원형 버튼 (owner request 2026-07-21 "상단 화살표 없음") */
.to-top{
  position:fixed; right:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px); z-index:80;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(28,22,12,.72); color:#F6F0E6;
  border:1px solid rgba(235,192,140,.45);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 10px 28px -10px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, background .2s, border-color .2s;
  cursor:pointer;
}
.to-top svg{ width:20px; height:20px; }
.to-top.is-show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:rgba(201,146,46,.9); border-color:#EBC08C; color:#fff; }
.to-top:active{ transform:scale(.96); }
@media (prefers-reduced-motion: reduce){ .to-top{ transition:opacity .2s; transform:none; } }
/* family logo plates -> cleaner uniform chips */
.home #family .rx-famcell__logo{ min-height:40px !important; justify-content:center !important; }

/* ============================================================
   GLASS ELEVATION (2026-07-14, approved) — motionsites "edge-light" glass,
   re-toned to brand gold. Applied to dark-stage glass surfaces only.
   Border ring is a masked ::before (no overflow needed → never clips product art).
   ============================================================ */
.home #products .rx-tile,
.home #company .rx-stats,
.home #family .rx-fam,
.home #news .rx-support__band{ position:relative !important; }
/* gold-tinted gradient hairline that only lights the top/bottom edges (real glass catches light there) */
.home #products .rx-tile::after,
.home #company .rx-stats::after,
.home #family .rx-fam::after,
.home #news .rx-support__band::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.2px; z-index:3; pointer-events:none;
  background:linear-gradient(150deg,
    rgba(247,226,192,.55) 0%, rgba(235,192,140,.18) 22%,
    rgba(255,255,255,0) 46%, rgba(255,255,255,0) 60%,
    rgba(235,192,140,.15) 80%, rgba(247,226,192,.5) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* product tiles: refined lift + warm glow bloom on hover */
.home #products .rx-tile{ transition:transform .5s cubic-bezier(.2,.72,.2,1), box-shadow .5s cubic-bezier(.2,.72,.2,1) !important; }
.home #products .rx-tile:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 48px 90px -38px rgba(0,0,0,.86), inset 0 1px 0 rgba(255,255,255,.18), 0 0 44px -8px rgba(235,192,140,.28) !important;
}
/* company stat numbers: cream → gold vertical gradient */
.home #company .rx-stat strong{
  background:linear-gradient(180deg,#FFFDF9 0%, #EBC08C 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}

/* ============================================================
   MOTIONSITES PASS (2026-07-15) — cursor spotlight · CTA sheen sweep
   ============================================================ */
/* cursor-follow warm glow inside product tiles (main.js sets --mx/--my; screen-blend = light only) */
.home #products .rx-tile::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .4s ease; mix-blend-mode:screen;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(235,192,140,.16), transparent 62%);
}
.home #products .rx-tile:hover::before{ opacity:1; }

/* support band became a boxed glass panel → the flush-left first cell (.rx-sup:first-child
   {padding-left:0}, meant for the old borderless row) now sticks to the box edge. Restore padding. */
.home #news .rx-sup:first-child{ padding-left:clamp(16px,2vw,26px); }
@media (max-width:768px){
  .home #news .rx-sup{ padding-left:clamp(16px,4vw,26px); }   /* stacked cells: keep text off the box border */
}

/* (2026-07-21) the specular-sheen sweep on primary CTAs was removed on owner feedback
   ("버튼 효과가 이상합니다") — buttons now hover like the plain ghost buttons. */

/* HOME #products: transparent product cutouts float on the dark-glass tiles (no white box).
   Soft warm halo behind each product so any product — incl. the black card tag — pops on the dark stage
   (the old --wide tile did this with a gold radial; restored uniformly for the 2×2). */
.home #products .rx-tile__media::before{
  content:""; position:absolute; left:50%; top:42%; width:74%; height:64%; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(247,226,192,.16), transparent 72%);
  filter:blur(22px);
}
.home #products .rx-tile__media img{
  position:relative; z-index:1;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55)) !important;   /* deeper shadow = premium hardware on dark */
}
/* 카드태그 타일 — 나머지 3개는 상한이 없는데(100%/100%) 여기만 묶여 있었다.
   원래 44%/62% 는 예전의 1.9:1 짜리 넓적한 컷을 기준으로 "너무 커 보이지 않게" 잡은 값인데,
   그 뒤 이미지가 974x614(1.59:1)로 교체되면서 상한이 과하게 작동해
   "다른 것에 비해 너무 작아 잘 안 보인다"(2026-07-29 사장님)가 됐다.
   상한은 유지하되(넓은 타일이라 꽉 채우면 캡션을 침범한다) 눈에 보이게 키운다. */
.home #products .rx-tile--wide .rx-tile__media img{ max-height:70% !important; max-width:78% !important; }

/* ============================================================================
   WARM CINEMATIC UNIFICATION — subpages adopt the homepage's warm grade (2026-07-18)
   Owner-approved direction: kill the cool-blue/bone "different site" look so every
   subpage reads as one family with the home hero. Scoped to body:not(.home) for the
   few selectors shared with the homepage; subhero/.sub-section/.icard etc. are
   subpage-only so they need no scope. Explicit overrides (not token surgery) to keep
   the blue LOGO and functional focus rings untouched.
   ============================================================================ */
/* --w-gold 는 '밝은 배경 위' 골드다(어두운 곳은 --w-gold-hi 를 쓴다). #C9922E 는 LNB 활성 탭·칩·번호 등
   14~16px 텍스트에 쓰이는데 흰 배경 대비 2.64:1 로 WCAG 4.5:1 에 크게 못 미쳤다(2026-07-28 실측,
   사장님 "가시성 좋게" 지시). 같은 색상각의 더 진한 브론즈로 내려 세 배경(LNB #FBFAF7 / tint #F1E9DC /
   기본 #F7F2EA) 모두 4.7:1 이상을 확보한다. 어두운 배경용 --w-gold-hi 는 그대로 둔다. */
body:not(.home){ --w-gold:#8A5E12; --w-gold-hi:#EBC08C; --w-stage:#0F0B07; }

/* ---- Subhero: warm dark stage, full-presence graded photo, white ink, gold accent ---- */
.subhero{ background:#100b07 !important; }
.subhero::before{
  background:
    radial-gradient(120% 120% at 88% -10%, rgba(235,192,140,.16) 0%, transparent 52%),
    radial-gradient(90% 90% at -5% 0%, rgba(20,12,6,.4), transparent 60%) !important;
}
.subhero__photo img{
  opacity:1 !important;
  filter:saturate(1.05) brightness(.86) sepia(.22) hue-rotate(-12deg) contrast(1.03) !important;
}
.subhero__photo::after{
  background:
    linear-gradient(96deg, rgba(16,11,7,.95) 0%, rgba(16,11,7,.72) 38%, rgba(16,11,7,.22) 66%, rgba(16,11,7,.12) 82%, rgba(16,11,7,.5) 100%),
    linear-gradient(0deg,  rgba(16,11,7,.7) 0%, rgba(16,11,7,.06) 60%, rgba(16,11,7,0) 100%) !important;
}
@media (max-width:900px){
  .subhero__photo::after{
    background:linear-gradient(0deg, rgba(16,11,7,.95) 0%, rgba(16,11,7,.68) 55%, rgba(16,11,7,.42) 100%) !important;
  }
}
.subhero__title{ color:#F6F0E6 !important; }
.subhero__lead{ color:rgba(246,240,230,.84) !important; }
.subhero__eyebrow{ color:var(--w-gold-hi) !important; }
.crumb, .crumb a, .crumb span{ color:rgba(246,240,230,.6) !important; }
.crumb strong, .crumb a:hover{ color:var(--w-gold-hi) !important; }
.subhero .subhero__title .grad, .subhero__title .grad{ color:var(--w-gold-hi) !important; -webkit-text-fill-color:var(--w-gold-hi) !important; }
/* pills tuned for the (now dark) subhero */
.subhero .pills a{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.28) !important; color:#F1E9DC !important; }

/* ---- Accent: cool blue -> warm gold across subpage chrome ---- */
body:not(.home) .eyebrow,
body:not(.home) .section-title .grad, body:not(.home) .section-title .accent,
body:not(.home) .frow__title .grad, body:not(.home) .frow__title .accent,
body:not(.home) .grad,
.em-blue, .rx-eyebrow, .addr-card h3 svg,
.frow h2 .grad, .frow h3 .grad, .lede-body strong a{ color:var(--w-gold) !important; }
.lnb a.is-active{ color:var(--w-gold) !important; }

.icard ul li::before{ background:var(--w-gold) !important; }
.icard:hover{ border-color:rgba(201,146,46,.5) !important; }
/* icon plates: cool-blue tint -> warm gold tint */
.icard__ico, .qc__ico{
  background:linear-gradient(135deg, rgba(201,146,46,.16), rgba(201,146,46,.05)) !important;
  color:var(--w-gold) !important;
}

/* ---- Light sections: warm bone canvas + REAL card elevation (kills flat-white look) ---- */
.sub-section{ background:#F7F2EA !important; }
.sub-section--tint{ background:#F1E9DC !important; }
.icard, .addr-card, .pcard, .map-frame{
  background:#FFFDFA !important;
  border:1px solid rgba(27,20,12,.08) !important;
  box-shadow:0 1px 2px rgba(27,20,12,.05), 0 14px 34px -18px rgba(27,20,12,.22), inset 0 1px 0 #fff !important;
}
.icard:hover, .addr-card:hover, .pcard:hover{
  box-shadow:0 2px 4px rgba(27,20,12,.06), 0 26px 54px -22px rgba(27,20,12,.32), inset 0 1px 0 #fff !important;
}

/* ---- Dark sub bands (stat strips, CTA, media stage): cool navy -> warm stage black ---- */
.sub-section--dark, .cta-band, .frow__media--stage{ background:var(--w-stage) !important; }
.sub-section--dark .icard{ background:rgba(255,255,255,.05) !important; border-color:rgba(235,192,140,.18) !important; }
.sub-section--dark .eyebrow, .sub-section--dark .em-blue,
.sub-section--dark .section-title .grad, .sub-section--dark .section-title .accent,
.subhero .em-blue{ color:var(--w-gold-hi) !important; }

/* warm unification — mop up remaining blue leaks in subpage bodies (primary buttons stay
   brand-blue on purpose: blue = the brand action color, matches the logo + home hero CTA) */
.step::before{ color:var(--w-gold) !important; }
/* FAQ 'Q.' 는 서브 골드 전환에서 누락돼 옛 브랜드 블루가 남아 있었다(대비 3.63:1). 골드로 통일. */
.acc summary .q{ color:var(--w-gold) !important; }
/* FAQ 답변 안 링크도 골드 전환에서 누락돼 옛 브랜드 블루였다(tint 위 4.46:1). 골드로 통일. */
.acc .acc__a a{ color:var(--w-gold) !important; }
.step:not(:last-child)::after{ color:rgba(201,146,46,.55) !important; }
/* 배경 틴트가 .1 이면 tint 섹션 위에서 글자 대비가 4.38:1 로 떨어진다(2026-07-28 실측) → .05 로 옅게. */
.chip--blue{ background:rgba(201,146,46,.05) !important; border-color:rgba(201,146,46,.42) !important; color:var(--w-gold) !important; }
.pills a:hover{ border-color:var(--w-gold) !important; color:var(--w-gold) !important; }
.pills a.is-active{ background:var(--w-stage) !important; border-color:var(--w-stage) !important; }

/* Header persistent CTA — high-contrast "문의" pinned in the nav at all scroll depths.
   Hidden at <=900px where the hamburger takes over (matches .hdr-drop hide). */
/* (2026-07-21) header 문의하기 CTA 버튼 제거 — .hdr-cta 규칙도 함께 정리 */

/* ===== FINAL-QA blue-leak sweep (2026-07-18): warm the shared .sband stat band =====
   sub.css .sband was a cool-navy island with icy-blue gradient numbers on 4 subpages
   (quality/business/greeting/partnership/tracking). premium.css loads after sub.css so this wins. */
.sband{ background:linear-gradient(150deg, #14100b, var(--w-stage,#0F0B07)) !important;
        border-color:rgba(235,192,140,.18) !important; }
.sband__item strong{ background:linear-gradient(180deg, #FFFDF9 4%, #EBC08C 120%) !important;
        -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; }
.sband__item span{ color:rgba(245,238,228,.7) !important; }

/* FINAL-QA: subpage nav wayfinding/hover accent -> gold (was --accent deep-blue) */
body:not(.home) .nav__toplink.is-current,
body:not(.home) .site-header .nav__toplink:hover,
body:not(.home) .site-header .nav__list li:hover > .nav__toplink{ color: var(--w-gold) !important; }
body:not(.home) .nav__toplink.is-current::after,
body:not(.home) .nav__toplink::after{ background: var(--w-gold) !important; }
/* FINAL-QA: warm-grade the two blue-glow section images (worldmap + BLE ripple) toward amber */
img[src*="find-worldmap"], img[src*="sol-csg"]{
  filter: sepia(.55) saturate(1.5) hue-rotate(-18deg) brightness(.96) contrast(1.03);
}

/* ============================================================================
   EXPERIENCE LAYER v47 (2026-07-20)
   A single coherent motion system: page progress, a living AIoT signal field,
   restrained depth on hardware, and warm ambient continuity across every route.
   No library, no layout dependency, and all motion has a reduced-motion state.
   ============================================================================ */
:root{
  --page-progress: 0;
  --xp-gold: #EBC08C;
  --xp-gold-hi: #F7E2C0;
  --xp-cream: #F7F0E5;
}

/* Page progress is structural feedback, not decoration. It is driven by one
   requestAnimationFrame scroll loop in main.js and never captures input. */
.site-progress{
  position:absolute; inset:auto 0 -1px; block-size:2px; overflow:hidden;
  pointer-events:none; opacity:.84; z-index:3;
}
.site-progress span{
  display:block; inline-size:100%; block-size:100%; transform-origin:0 50%;
  transform:scaleX(var(--page-progress));
  background:linear-gradient(90deg, #A96A20 0%, var(--xp-gold) 48%, #FFF3D9 100%);
  box-shadow:0 0 14px rgba(235,192,140,.52);
}
body:not(.home) .site-progress{ opacity:.68; }

/* Make keyboard position unmistakable on both warm and dark surfaces. */
:where(a,button,input,textarea,select,summary):focus-visible{
  /* 밝은 표면에서 창백한 금색(#EBC08C)은 1.40~1.69:1 밖에 안 나와 링이 사실상 안 보였다.
     WCAG 1.4.11 이 요구하는 3:1 을 넘기려고 이 저장소가 이미 쓰는 짙은 금색으로 내린다
     (흰 5.69 / #F7F2EA 5.11 / #F1E9DC 4.72). */
  outline:2px solid #8A5E12 !important;
  outline-offset:4px;
}
/* 어두운 밴드에서는 반대로 짙은 금색이 안 보이므로 원래의 밝은 금색으로 되돌린다. */
.site-footer :focus-visible,
.sub-section--dark :focus-visible,
.subhero :focus-visible,
.cta-band :focus-visible{ outline-color:var(--xp-gold) !important; }

/* Hero: the dusk photograph stays the source of truth. The code-native signal
   field explains what the small hub does without adding another stock image. */
.home .hero{
  --hero-pan-x:0px; --hero-pan-y:0px; --hero-scroll:0;
  background-position:calc(50% + var(--hero-pan-x)) calc(44% + var(--hero-pan-y)) !important;
  transition:background-position .45s cubic-bezier(.2,.72,.2,1);
}
.home .hero::before{
  transform:translate3d(0, calc(var(--hero-scroll) * -10px), 0) scale(calc(1 + var(--hero-scroll) * .025));
  transform-origin:50% 55%;
}
.hero__intelligence{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  transform:translate3d(var(--hero-look-x,0px),var(--hero-look-y,0px),0);
  transition:transform .65s cubic-bezier(.2,.72,.2,1), opacity .3s ease;
  opacity:calc(1 - var(--hero-scroll) * .72);
}
/* left:64% 였을 때 원의 왼쪽 절반이 카피 영역까지 밀고 들어와, 큰 화면에서 왼쪽 배지(MATTER·ZIGBEE)가
   제목 글자·신뢰 칩과 겹쳤다(2026-07-24 실측: 1920×960에서 Matter↔제목 74×23, Zigbee↔칩 70×12).
   70% 부터 전 구간 0건이며, 1100px 이하 규칙(69%)과도 자연스럽게 이어진다. */
.hero__signal{
  position:absolute; left:70%; top:68%; width:clamp(310px,34vw,580px); aspect-ratio:1;
  transform:translate(-50%,-50%); filter:drop-shadow(0 24px 50px rgba(0,0,0,.34));
}
.hero__orbit{
  position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%);
  border:1px solid rgba(235,192,140,.26); box-shadow:inset 0 0 30px rgba(235,192,140,.025);
}
.hero__orbit::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background:conic-gradient(from 18deg, transparent 0 15%, rgba(247,226,192,.9) 18%, transparent 21% 47%, rgba(235,192,140,.58) 50%, transparent 53% 78%, rgba(247,226,192,.72) 81%, transparent 84%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - 1px));
  animation:xpOrbit 18s linear infinite;
}
.hero__orbit--outer{ width:100%; height:100%; opacity:.62; animation:xpBreathe 5.6s ease-in-out infinite; }
.hero__orbit--middle{ width:71%; height:71%; opacity:.82; animation:xpBreathe 5.6s ease-in-out -1.8s infinite; }
.hero__orbit--middle::after{ animation-direction:reverse; animation-duration:14s; }
.hero__orbit--inner{ width:43%; height:43%; opacity:.9; animation:xpBreathe 5.6s ease-in-out -3.4s infinite; }
.hero__orbit--inner::after{ animation-duration:10s; }
.hero__core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:9px;
  align-items:center; padding:10px 14px 10px 11px; border-radius:999px;
  border:1px solid rgba(247,226,192,.38); color:var(--xp-cream);
  background:rgba(16,10,5,.66); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 12px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  font-family:var(--font-en); letter-spacing:.06em;
}
.hero__core i{
  grid-row:1/3; width:8px; height:8px; border-radius:50%; background:#F6D39F;
  box-shadow:0 0 0 5px rgba(235,192,140,.1),0 0 20px rgba(235,192,140,.86);
  animation:xpCore 2.4s ease-in-out infinite;
}
.hero__core b{ font-size:.69rem; line-height:1; }
.hero__core small{ font-size:.48rem; line-height:1; color:rgba(247,240,229,.62); letter-spacing:.16em; }
.hero__protocol{
  position:absolute; display:inline-flex; align-items:center; gap:7px; padding:6px 10px;
  border:1px solid rgba(235,192,140,.25); border-radius:999px;
  background:rgba(13,9,5,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:rgba(247,240,229,.82); font:600 .58rem/1 var(--font-en); letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap;
}
.hero__protocol::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--xp-gold); box-shadow:0 0 8px rgba(235,192,140,.8); }
/* .stage__copy 가 컨테이너 폭(1240px)을 거의 다 쓰므로 원의 "왼쪽 절반"은 항상 카피 위에 포개진다.
   그래서 MATTER·ZIGBEE 를 왼쪽(left:9%/5%)에 두면 1024~1680 전 구간에서 제목 글자·신뢰 칩과 겹쳤다
   (2026-07-24 실측: 60개 폭×높이 조합 중 38개 충돌). 네 배지를 모두 보이는 오른쪽 호(12·2·5·7시)로
   옮겨 60/60 조합 충돌 0 을 확인했다. 위치를 바꿀 땐 반드시 이 매트릭스를 다시 돌릴 것. */
.hero__protocol--matter{ right:30%; top:2%; }
.hero__protocol--thread{ right:5%; top:32%; }
.hero__protocol--zigbee{ right:32%; bottom:2%; }
/* bottom:16% 였을 땐 영문에서만 1024폭 신뢰 칩과 겹쳤다(2026-07-28 실측: 영문 칩이 길어 2줄이 되며
   칩 줄이 위로 확장 → Edge AI 배지와 38×23 겹침). 16~36% 는 전부 잔존, 40% 에서 국문·영문 모두 0. */
.hero__protocol--edge{ right:9%; bottom:40%; }

.hero__scroll{
  position:absolute; z-index:7; left:max(var(--gutter),calc((100% - var(--container))/2)); bottom:clamp(18px,3vh,32px);
  display:flex; align-items:center; gap:12px; color:rgba(247,240,229,.68);
  font:700 .62rem/1 var(--font-en); letter-spacing:.18em; text-transform:uppercase;
}
.hero__scroll i{ position:relative; width:42px; height:1px; overflow:hidden; background:rgba(247,240,229,.24); }
.hero__scroll i::after{ content:""; position:absolute; inset:0; transform:translateX(-110%); background:var(--xp-gold); animation:xpExplore 2.2s cubic-bezier(.2,.72,.2,1) infinite; }
.hero__scroll:hover{ color:var(--xp-cream); }

/* The dark acts share one slowly travelling warm light. The active section gets
   a little more energy, but content always remains the focus. */
.home #capa,.home #products,.home #ai,.home #news{ overflow:hidden; isolation:isolate; }
.home #capa::after,.home #products::after,.home #ai::after,.home #news::after{
  content:""; position:absolute; z-index:0; pointer-events:none; width:min(52vw,760px); aspect-ratio:1;
  right:-16%; top:-32%; border-radius:50%; opacity:.16;
  background:radial-gradient(circle,rgba(235,192,140,.46) 0,rgba(201,146,46,.14) 26%,transparent 68%);
  filter:blur(18px); transform:translate3d(6%,0,0) scale(.88);
  transition:opacity 1s ease,transform 1.4s cubic-bezier(.2,.72,.2,1);
  animation:xpAmbient 16s ease-in-out infinite alternate;
}
.home #products::after,.home #news::after{ right:auto; left:-18%; top:auto; bottom:-38%; animation-delay:-7s; }
.home #capa.is-story-active::after,.home #products.is-story-active::after,.home #ai.is-story-active::after,.home #news.is-story-active::after{
  opacity:.28; transform:translate3d(0,0,0) scale(1);
}

/* Hardware tilt is deliberately capped at 2.6deg. The card remains a card; only
   the reflected light and product plane acknowledge the pointer. */
.home #products .rx-tile{
  --tile-lift:0px; --tilt-x:0deg; --tilt-y:0deg;
  transform:perspective(1100px) translateY(var(--tile-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) !important;
  transform-style:preserve-3d; will-change:transform;
}
.home #products .rx-tile:hover,.home #products .rx-tile:focus-visible{ --tile-lift:-6px; }
.home #products .rx-tile__media{ transform:translateZ(20px); }
.home #products .rx-tile__cap{ transform:translateZ(28px); }

/* Shared subpage depth: the photo drifts only a few pixels, while the content and
   breadcrumb stay perfectly still. */
body:not(.home) .subhero{ --subhero-drift:0px; }
body:not(.home) .subhero__photo img{
  transform:translate3d(0,var(--subhero-drift),0) scale(1.065);
  transform-origin:50% 45%; will-change:transform;
}
.loc-panel .btn{ margin-top:20px; width:fit-content; }
body.nav-open{ overflow:hidden; }

/* Defer off-screen homepage paint (and its large photographic backgrounds) while
   preserving a stable estimated scroll range. Unsupported browsers ignore it. */
@supports (content-visibility:auto){
  .home main > .section{
    content-visibility:auto;
    contain-intrinsic-block-size:auto 940px;
  }
}

@keyframes xpOrbit{ to{ transform:rotate(360deg); } }
@keyframes xpBreathe{ 0%,100%{ opacity:.48; } 50%{ opacity:1; } }
@keyframes xpCore{ 0%,100%{ transform:scale(.84); opacity:.68; } 50%{ transform:scale(1); opacity:1; } }
@keyframes xpExplore{ 0%{ transform:translateX(-110%); } 55%,100%{ transform:translateX(110%); } }
@keyframes xpAmbient{ 0%{ translate:-4% -3%; } 100%{ translate:5% 4%; } }

@media (max-width:1100px){
  .hero__signal{ left:69%; width:clamp(280px,39vw,450px); }
}
@media (max-width:900px){
  .hero__intelligence{ display:none; }
  .mobile-nav{ inset:var(--header-h) 0 0; padding:24px var(--gutter) 34px; background:rgba(16,11,7,.97); color:var(--xp-cream); border-color:rgba(235,192,140,.2); }
  .mobile-nav > nav > a{ color:var(--xp-cream); border-color:rgba(235,192,140,.16); }
  .mobile-nav__lang{ border-color:rgba(235,192,140,.16); }
  .mobile-nav__lang button{ color:rgba(247,240,229,.76); border-color:rgba(235,192,140,.22); }
  .mobile-nav__lang button.is-active{ background:var(--xp-gold); color:#17100A; border-color:var(--xp-gold); }
}
@media (max-width:768px){
  .home .hero{ background-position:62% 50% !important; }
  .home .stage__copy{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-bottom:104px !important; }
  .home .hero__trust{ gap:7px; }
  .home .hero__trust li{ padding:7px 10px; font-size:.68rem; }
  .hero__scroll{ bottom:20px; }
  .home #products .rx-tile{ will-change:auto; }
  .home #products .rx-tile__media,.home #products .rx-tile__cap{ transform:none; }
  body:not(.home) .subhero__photo img{ transform:scale(1.03); will-change:auto; }
}
@media (max-width:420px){
  .hero__scroll span{ display:none; }
  .hero__scroll i{ width:52px; }
}
@media (prefers-reduced-motion:reduce){
  .site-progress span{ transition:none; }
  .home .hero{ background-position:center 44% !important; transition:none; }
  .home .hero::before,.hero__intelligence{ transform:none; }
  .hero__orbit,.hero__orbit::after,.hero__core i,.hero__scroll i::after,
  .home #capa::after,.home #products::after,.home #ai::after,.home #news::after{ animation:none !important; }
  .home #products .rx-tile{ --tile-lift:0px !important; --tilt-x:0deg !important; --tilt-y:0deg !important; will-change:auto; }
  body:not(.home) .subhero__photo img{ transform:scale(1.03); will-change:auto; }
}
@media (forced-colors:active){
  .site-progress span,.hero__orbit,.hero__core,.hero__protocol{ forced-color-adjust:auto; }
  .hero__intelligence{ display:none; }
}
@media print{
  .site-progress,.hero__intelligence,.hero__scroll,
  .site-header,.mobile-nav,.to-top,.footer__cta,.lnb,.cta-band,.pills{ display:none !important; }
  body{ background:#fff !important; color:#111 !important; }
  .subhero,.site-footer{ background:#fff !important; color:#111 !important; }
  .subhero__photo{ display:none !important; }
  .subhero__title,.subhero__lead,.site-footer *{ color:#111 !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; color:#555; }
}

/* 라이트 전용 사이트임을 UA에 명시 — 폼 컨트롤·스크롤바가 다크모드 OS에서 뒤집히지 않게 */
:root{ color-scheme: light; }

/* 다크 푸터의 이메일·전화 링크: 정지 상태에서도 클릭 가능함이 보이게 (터치엔 hover가 없다) */
.footer__corp dd a{
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(235,192,140,.55);
}
.footer__corp dd a:hover{ text-decoration-color: #EBC08C; }

/* ── 폰 전용 섹션 배경(2026-08-12) ──────────────────────────────────────
   background-size:cover + center 라, 세로로 긴 폰 섹션에서는 1600px 원본 중 가운데
   304~695px 만 화면에 나오고 나머지는 받기만 하고 버려진다(폰 첫 화면 전송량의 절반,
   1,083KB). 같은 픽셀을 같은 배율로 보여주는 '가운데만 잘라 둔' 변형으로 바꾼다 —
   화면은 그대로고 바이트만 688KB 준다. 431px 이상은 원본 그대로.
   ※ 크롭 폭은 430px 뷰포트 ko/en 중 넓은 쪽 + 15% 여유로 잡았다(실측). */
@media (max-width: 430px){
  .home #company{ background:
    linear-gradient(92deg, rgba(12,9,6,.93) 0%, rgba(12,9,6,.74) 40%, rgba(12,9,6,.3) 100%),
    url("../img/bg/bg-company-v2-m.webp") center / cover no-repeat, #0f0b07 !important; }
  .home #capa{ background: linear-gradient(92deg, rgba(12,9,6,.93) 0%, rgba(12,9,6,.75) 40%, rgba(12,9,6,.33) 100%), url("../img/bg/bg-capa-v2-m.webp") center/cover no-repeat, #0f0b07 !important; }
  .home #products{ background: linear-gradient(92deg, rgba(11,8,5,.92) 0%, rgba(11,8,5,.7) 42%, rgba(11,8,5,.34) 100%), url("../img/bg/bg-products-v2-m.webp") center/cover no-repeat, #0e0a06 !important; }
  .home #ai{ background: linear-gradient(92deg, rgba(10,8,5,.93) 0%, rgba(10,8,5,.72) 40%, rgba(10,8,5,.3) 100%), url("../img/bg/bg-ai-v2-m.webp") center/cover no-repeat, #0c0805 !important; }
  .home #news{ background: linear-gradient(92deg, rgba(13,10,7,.93) 0%, rgba(13,10,7,.75) 42%, rgba(13,10,7,.35) 100%), url("../img/bg/bg-news-v2-m.webp") center/cover no-repeat, #100b07 !important; }
  .home #family{ background: linear-gradient(92deg, rgba(12,9,6,.94) 0%, rgba(12,9,6,.8) 45%, rgba(12,9,6,.5) 100%), url("../img/bg/bg-news-v2-m.webp") center/cover no-repeat, #0f0b07 !important; }
}