/* index.php 의 인라인 <style> 을 그대로 옮긴 것 (2026-08-20 CSP 강화 — style-src self).
   페이지 전용 규칙이라 다른 페이지에 싣지 않는다. 여기 규칙은 sub.css 보다 늦게 로드되어
   기존 인라인과 같은 캐스케이드 순서를 유지한다. */
/* Kill auto section-number eyebrow counter + its hairline (AI tell) */
  .eyebrow::before,.eyebrow::after{content:none!important}
  body{counter-reset:none}

  .rx{--rx-r:14px;--rx-sh:0 24px 60px -28px rgba(10,20,36,.30);--rx-line:var(--gray-200)}
  .rx .container{position:relative;z-index:1}

  /* ---- Section head (vertical stack, no split-header) ---- */
  .rx-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-en);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-600);margin:0 0 18px}
  .rx-eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55}
  .rx-hide{display:none!important}
  /* wrapping (word-break / text-wrap) is owned by the system in styles.css */
  .rx-title{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4.6vw,3.35rem);line-height:1.05;letter-spacing:-.04em;color:var(--ink);margin:0}
  html[lang="ko"] .rx-title{font-family:var(--font);font-weight:800;letter-spacing:-.035em}
  .rx-title .accent{color:var(--brand-600)}
  .rx-lead{font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.72;color:var(--gray-600);max-width:60ch;margin:22px 0 0}
  .rx-more{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--brand-600);margin-top:clamp(28px,4vw,44px)}
  html[lang="ko"] .rx-more{font-family:var(--font)}
  .rx-more em{font-style:normal;transition:transform .3s var(--ease)}
  .rx-more:hover em{transform:translateX(6px)}

  /* ---- COMPANY: asymmetric text + dominant photo + inline stat band ---- */
  .rx-co{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(36px,5vw,56px)}
  .rx-co__photo{position:relative;border-radius:var(--rx-r);overflow:hidden;box-shadow:var(--rx-sh);margin:0}
  .rx-co__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s var(--ease)}
  .rx-co__photo:hover img{transform:scale(1.04)}
  .rx-co__photo figcaption{position:absolute;left:16px;bottom:16px;right:16px;font-size:.78rem;font-weight:600;color:#fff;background:rgba(10,20,36,.62);backdrop-filter:blur(6px);padding:9px 13px;border-radius:10px}
  .rx-stats{display:flex;flex-wrap:wrap;margin:clamp(28px,4vw,40px) 0 0;border-top:1px solid var(--rx-line);padding-top:26px}
  .rx-stat{flex:1;min-width:120px;padding:0 clamp(14px,2vw,26px)}
  .rx-stat+.rx-stat{border-left:1px solid var(--rx-line)}
  .rx-stat:first-child{padding-left:0}
  .rx-stat strong{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.03em;color:var(--ink);line-height:1.05}
  html[lang="ko"] .rx-stat strong{font-family:var(--font);font-weight:800}
  .rx-stat span{display:block;margin-top:8px;font-size:.86rem;color:var(--gray-600);line-height:1.4}
  .rx-colinks{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(28px,4vw,38px);border-top:1px solid var(--rx-line)}
  .rx-colinks a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 4px;font-size:.98rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--rx-line)}
  .rx-colinks a em{font-style:normal;color:var(--gray-400);transition:transform .3s var(--ease),color .2s}
  .rx-colinks a:hover{color:var(--brand-600)}
  .rx-colinks a:hover em{transform:translateX(5px);color:var(--brand-600)}

  /* ---- CAPABILITIES: editorial divider index ---- */
  .rx-index{margin-top:clamp(36px,5vw,56px);border-top:2px solid var(--ink)}
  .rx-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr) auto;align-items:center;gap:clamp(16px,3vw,40px);padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--rx-line);transition:padding-left .35s var(--ease)}
  .rx-row:hover{padding-left:12px}
  .rx-row__name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.9vw,2.25rem);letter-spacing:-.03em;color:var(--ink);line-height:1.12;transition:color .25s}
  html[lang="ko"] .rx-row__name{font-family:var(--font);font-weight:800}
  .rx-row:hover .rx-row__name{color:var(--brand-600)}
  .rx-row__desc{font-size:.95rem;color:var(--gray-600);line-height:1.6}
  .rx-row__arw{font-size:1.4rem;color:var(--gray-300);justify-self:end;transition:transform .3s var(--ease),color .25s}
  .rx-row:hover .rx-row__arw{transform:translateX(8px);color:var(--brand-600)}

  /* ---- PRODUCTS: asymmetric bento showcase ---- */
  .rx-bento{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(230px,25vw,300px);gap:clamp(14px,1.6vw,20px)}
  .rx-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2vw,26px);border-radius:var(--rx-r);overflow:hidden;background:linear-gradient(160deg,#EEF4FA,#DFEBF6);box-shadow:var(--rx-sh);transition:transform .4s var(--ease),box-shadow .4s}
  .rx-tile:nth-child(2){background:linear-gradient(160deg,#F2F5F9,#E6EDF5)}
  .rx-tile:nth-child(3){background:linear-gradient(160deg,#EAF2FA,#D8E8F5)}
  .rx-tile:nth-child(4){background:linear-gradient(160deg,#F0F4F8,#E2ECF5)}
  /* 2×2 uniform grid (ThingsOne-style) — 4 tiles auto-flow into 2 cols × 2 rows, no bento spans */
  .rx-tile__media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(20px,3vw,44px) clamp(20px,3vw,40px) clamp(64px,8vw,96px)}
  .rx-tile__media img{max-width:100%;max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(10,20,36,.22));transition:transform .5s var(--ease)}
  .rx-tile:hover{transform:translateY(-4px);box-shadow:0 32px 70px -30px rgba(10,20,36,.4)}
  .rx-tile:hover .rx-tile__media img{transform:scale(1.05)}
  .rx-tile__cap{position:relative;z-index:1}
  .rx-tile__cap strong{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,1.8vw,1.5rem);letter-spacing:-.01em;color:var(--ink)}
  .rx-tile__cap span{display:block;margin-top:5px;font-size:.82rem;color:var(--gray-600)}

  /* ---- SOLUTIONS: duo full-media cards ---- */
  .rx-duo{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
  .rx-media{position:relative;display:block;border-radius:var(--rx-r);overflow:hidden;min-height:clamp(360px,42vw,500px);box-shadow:var(--rx-sh)}
  .rx-media__img{position:absolute;inset:0}
  .rx-media__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
  .rx-media:hover .rx-media__img img{transform:scale(1.05)}
  .rx-media__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,36,.05) 28%,rgba(10,20,36,.55) 64%,rgba(8,14,26,.9))}
  .rx-media__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,3vw,40px);z-index:1}
  .rx-media__body strong{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.12;letter-spacing:-.03em;color:#fff}
  html[lang="ko"] .rx-media__body strong{font-family:var(--font);font-weight:800}
  /* The accent phrase owns line 2 of the card lock-up. This replaces the literal
     <br /> that used to sit in the copy (and in both i18n dictionaries, which
     re-injected it on every language switch) — the two-line result is the same,
     but each line can now wrap on its own when the card narrows. */
  .rx-media__body .grad{display:block;color:var(--brand-300)}
  .rx-media__desc{display:block;margin-top:12px;font-size:.95rem;color:rgba(255,255,255,.82)}
  .rx-media__cta{display:inline-block;margin-top:16px;font-family:var(--font-display);font-weight:700;font-size:.9rem;color:#fff;transition:transform .3s var(--ease)}
  html[lang="ko"] .rx-media__cta{font-family:var(--font)}
  .rx-media:hover .rx-media__cta{transform:translateX(6px)}

  /* ---- NEWS + SUPPORT: newsroom split + utility band ---- */
  .rx-press{margin-top:clamp(36px,5vw,52px);display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,56px)}
  /* 새소식은 사진 없이 한 칸짜리 목록이다(2026-08-14). 두 칸(대표기사+사이드) 구조를
     쓰던 때는 글이 1건이면 오른쪽에 523px 짜리 빈 칸이 남았다 — 그 구조 자체를 없앴다. */
  .rx-press--list{grid-template-columns:1fr;gap:0}
  .rx-feature a{display:block;color:inherit}
  .rx-feature__media{border-radius:var(--rx-r);overflow:hidden;box-shadow:var(--rx-sh);margin:0 0 22px}
  .rx-feature__media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s var(--ease)}
  .rx-feature a:hover .rx-feature__media img{transform:scale(1.04)}
  .rx-feature time{font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--brand-600);font-variant-numeric:tabular-nums}
  .rx-feature h3{margin:12px 0 0;font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.3;color:var(--ink);letter-spacing:-.02em}
  .rx-feature__tag{margin-top:14px;font-family:var(--font-display);font-size:.82rem;font-weight:600;color:var(--gray-500)}
  .rx-side{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
  .rx-sideitem a{display:block;padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--rx-line);color:inherit;transition:padding-left .3s var(--ease)}
  .rx-sideitem a:hover{padding-left:8px}
  .rx-sideitem time{font-family:var(--font-display);font-size:.76rem;font-weight:700;color:var(--brand-600);font-variant-numeric:tabular-nums}
  .rx-sideitem h3{margin:8px 0 0;font-size:1.02rem;line-height:1.42;color:var(--ink);font-weight:600;transition:color .2s}
  .rx-sideitem a:hover h3{color:var(--brand-600)}
  .rx-side__foot{display:flex;align-items:baseline;gap:20px;margin-top:22px}
  .rx-side__foot .rx-more{margin-top:0}
  .rx-sidelink{font-size:.88rem;font-weight:600;color:var(--gray-500)}
  .rx-sidelink:hover{color:var(--brand-600)}
  .rx-support{margin-top:clamp(48px,7vw,84px);border-top:1px solid var(--rx-line);padding-top:clamp(26px,3vw,36px)}
  .rx-support__label{font-family:var(--font-display);font-size:.9rem;font-weight:700;letter-spacing:.02em;color:var(--gray-500)}
  html[lang="ko"] .rx-support__label{font-family:var(--font)}
  /* 카드 3개(FAQ·1:1 문의·A/S 안내)에 맞춰 3열. 예전에는 자료실이 있어 4열이었는데,
     2026-08-13 에 자료실을 지우면서 열 수를 안 줄여 네 번째 칸이 빈 채로 남아 있었다. */
  .rx-support__band{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr)}
  /* 뉴스가 없어 이 밴드만 남는 날에는 위 구분선이 허공에 뜬다 — 그때만 걷어낸다. */
  .rx-support--alone{margin-top:0;border-top:0;padding-top:0}
  .rx-sup{position:relative;display:flex;flex-direction:column;gap:5px;padding:clamp(16px,2vw,22px) clamp(16px,2vw,26px);color:inherit;transition:background .25s}
  .rx-sup+.rx-sup{border-left:1px solid var(--rx-line)}
  .rx-sup:first-child{padding-left:0}
  .rx-sup:hover{background:rgba(21,142,206,.06)}
  .rx-sup strong{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--ink)}
  html[lang="ko"] .rx-sup strong{font-family:var(--font)}
  .rx-sup span{font-size:.84rem;color:var(--gray-600)}
  .rx-sup em{position:absolute;top:clamp(14px,2vw,20px);right:clamp(10px,1.5vw,16px);font-style:normal;color:var(--gray-300);transition:transform .3s var(--ease),color .2s}
  .rx-sup:hover em{transform:translate(3px,-3px);color:var(--brand-600)}

  /* ---- FAMILY: divided channel columns ---- */
  .rx-fam{margin-top:clamp(36px,5vw,52px);display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rx-line);border-radius:var(--rx-r);overflow:hidden;background:#fff}
  .rx-famcell{display:flex;flex-direction:column;gap:12px;padding:clamp(28px,3.4vw,44px);color:inherit;transition:background .3s}
  .rx-famcell+.rx-famcell{border-left:1px solid var(--rx-line)}
  .rx-famcell:hover{background:var(--gray-50)}
  .rx-famcell__logo{height:30px;display:flex;align-items:center;gap:8px}
  .rx-famcell__logo img{height:26px;width:auto;filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s}
  .rx-famcell:hover .rx-famcell__logo img{filter:none;opacity:1}
  /* NAVER 락업(사진 레퍼런스): 마크·워드마크 모두 항상 풀컬러 — 반쪽만 회색이면 깨져 보인다(2026-07-21 지적) */
  .naver-word{font-family:var(--font-en);font-weight:800;font-size:1.18rem;letter-spacing:.03em;color:#03C75A;line-height:1}
  .rx-famcell__logo img[alt="NAVER"]{filter:none;opacity:1}
  .rx-famcell strong{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
  .rx-famcell__desc{font-size:.9rem;color:var(--gray-600);line-height:1.5}
  .rx-famcell__url{margin-top:auto;font-family:var(--font-display);font-size:.82rem;font-weight:600;color:var(--brand-600);display:inline-flex;align-items:center;gap:6px}
  .rx-famcell__url em{font-style:normal;transition:transform .3s var(--ease)}
  .rx-famcell:hover .rx-famcell__url em{transform:translate(3px,-3px)}

  /* ---- Responsive collapse ---- */
  @media (max-width:900px){
    .rx-co{grid-template-columns:1fr;gap:32px}
    .rx-co__photo{order:-1}
    .rx-co__photo img{aspect-ratio:16/11}
    /* ★ 캡션을 위로 올린다. 16:11 로 잘리면 제품(탁자 위 허브)이 사진 아래쪽 가운데에
       오는데, 하단 고정 캡션이 정확히 그 자리를 덮어 정작 제품이 안 보였다(실측:
       사진 239px 중 아래 38px 을 캡션이 가림). 폭도 글자만큼만 쓰게 오른쪽을 푼다. */
    .rx-co__photo figcaption{top:14px;bottom:auto;right:auto;max-width:calc(100% - 28px)}
    .rx-bento{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(200px,42vw,260px)}   /* 2×2 stays 2×2 on tablet */
    .rx-press{grid-template-columns:1fr;gap:32px}
    .rx-duo{grid-template-columns:1fr}
    /* .rx-fam relaxes here too. It used to hold 3 columns down to 768, which at
       820px squeezed each cell to 245px — "SAMJIN CO., LTD." then wrapped to two
       lines while its siblings stayed at one, dropping that cell's description
       14px below the others and breaking the row. */
    .rx-fam{grid-template-columns:1fr}
    .rx-famcell+.rx-famcell{border-left:none;border-top:1px solid var(--rx-line)}
  }
  @media (max-width:768px){
    .rx-row{grid-template-columns:1fr auto;gap:6px 16px}
    .rx-row__desc{grid-column:1/-1;order:3}
    .rx-row__arw{grid-row:1;grid-column:2}
    .rx-colinks{grid-template-columns:1fr}
    .rx-stats{border-top:none;padding-top:0}
    .rx-stat{flex:1 1 100%;min-width:100%;padding-left:0;padding-block:14px;border-top:1px solid var(--rx-line)}
    /* must match the base rule's specificity: `.rx-stat+.rx-stat` (0,2,0) draws the
       column divider, so plain `.rx-stat{border-left:none}` (0,1,0) never undid it
       and every stacked row kept a stray vertical rule down its left edge. */
    .rx-stat+.rx-stat{border-left:none}
    /* 모바일은 한 줄에 하나씩 세 줄(2026-08-14 지시). 예전 2열에서는 세 번째 칸이
       홀로 남아 아래가 비어 보였다. 1열이 되었으니 짝수칸 왼쪽선 규칙도 없앤다 —
       남겨두면 2·4번째 카드에만 세로선이 그어져 어긋난다. */
    .rx-support__band{grid-template-columns:1fr}
    .rx-sup{padding-left:0;border-left:none!important;border-top:1px solid var(--rx-line)}
    .rx-sup:nth-child(even){padding-left:0;border-left:none!important}
  }
  @media (max-width:560px){
    .rx-bento{grid-template-columns:1fr}
    .rx-tile--feat,.rx-tile:nth-child(2),.rx-tile:nth-child(3),.rx-tile--wide{grid-column:1;grid-row:auto}
    .rx-tile{min-height:210px}
    .rx-side__foot{flex-direction:column;gap:10px}
  }
  @media (prefers-reduced-motion:reduce){
    .rx *,.rx-co__photo img,.rx-media__img img,.rx-feature__media img,.rx-tile__media img{transition:none!important}
  }