/*
  eurekax.co 공통 스타일 (MVP-beta)
  값은 tokens.css의 변수만 쓴다. 색·글꼴을 바꿀 때는 tokens.css만 고친다.
*/

/* ================================================================ 기본 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--body-leading);
  font-feature-settings: "ss06" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:lang(ko) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--accent-strong);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul[class],
ol[class],
nav ul,
.site-footer ul {
  list-style: none;
  padding: 0;
}

/* 그리드 칸이 내용 때문에 화면 밖으로 벌어지지 않게 */
.hero__grid,
.split,
.biz-grid,
.cellmark,
.steps,
.ltem,
.doors,
.site-footer__grid {
  grid-template-columns: minmax(0, 1fr);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--ink);
  color: var(--paper);
}

.skip-link:focus {
  top: var(--space-2xs);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ================================================================ 글자 */

.display,
.title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  font-optical-sizing: auto;
  text-wrap: balance;
}

.display {
  font-size: var(--step-4);
}

.title {
  font-size: var(--step-3);
}

/* 영어 제목의 이탤릭 강조 단어 (Liquid식) */
.display em,
.title em {
  font-style: italic;
  color: var(--accent);
}

:lang(ko) .display em,
:lang(ko) .title em {
  font-style: normal;
}

.title + .lede {
  margin-top: var(--space-m);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
}

:lang(ko) .lede {
  line-height: 1.7;
}

/* 섹션 왼쪽의 작은 색 라벨 (Sakana식) */
.eyebrow {
  font-size: var(--eyebrow-size);
  font-weight: 650;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.4;
}

.eyebrow::after {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  margin-top: var(--space-2xs);
  background: currentColor;
}

.eyebrow--plain::after {
  display: none;
}

/* ================================================================ 버튼, 링크 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 2.875rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--accent-strong);
  color: var(--paper);
}

.btn--outline {
  border-color: var(--line-strong);
  color: var(--ink);
  background: transparent;
}

.btn--outline:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn--small {
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
}

.btn[aria-disabled="true"] {
  background: var(--paper-band);
  border-color: var(--line);
  color: var(--ink-3);
  cursor: not-allowed;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  text-decoration: none;
}

.link-arrow::after {
  content: "→";
  transition: transform 0.15s ease;
}

.link-arrow:hover::after {
  transform: translateX(3px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-l);
}

/* 공개 전 채울 자리 */
mark.todo {
  background: #fff0a0;
  color: #1a1a1a;
  padding: 0 0.25em;
  font-size: 0.875em;
  font-weight: 600;
}

/* ================================================================ 소식 띠 */

.newsbar {
  background: var(--forest);
  color: var(--forest-ink);
  font-size: var(--step--1);
}

.newsbar__inner {
  padding-block: 0.5rem;
}

.newsbar__text {
  color: var(--forest-ink);
}

.newsbar__tag {
  margin-right: 0.75em;
  font-size: var(--eyebrow-size);   /* 작은 라벨은 eyebrow 크기(DS 33판): EN 12px, KO 13px */
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-accent);
}

:lang(ko) .newsbar__tag {
  letter-spacing: var(--eyebrow-tracking);
  text-transform: none;
}

.newsbar__link {
  margin-left: 0.5em;
  color: var(--forest-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.newsbar :focus-visible,
.page-hero--dark :focus-visible {
  outline-color: var(--forest-accent);
}

.newsbar__link:hover {
  color: var(--forest-accent);
}

/* ================================================================ 머리글 */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.brand:hover {
  color: var(--ink);
}

/* 누르는 영역 24px 이상(WCAG 2.5.8): 워드마크 22px 위아래에 여백 */
.brand {
  padding-block: 0.25rem;
}

.brand__mark {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--accent);
}

.site-nav {
  display: none;
  margin-inline-start: auto;
}

.site-nav ul {
  display: flex;
  gap: var(--space-l);
}

.site-nav a,
.menu__panel a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-inline-start: auto;
}

.site-header__contact {
  display: none;
}

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.8125rem;
}

.lang-switch a {
  padding: 0.3rem 0.6rem;
  color: var(--ink-3);
  text-decoration: none;
}

.lang-switch a + a {
  border-left: 1px solid var(--line);
}

.lang-switch a[aria-current="true"] {
  color: var(--ink);
  font-weight: 650;
}

.lang-switch a:hover {
  color: var(--ink);
}

.lang-switch--quiet {
  border-color: var(--line);
}

/* 휴대폰 머리글(총괄 점검 2026-10-21): 360px 갤럭시 등에서 로고·언어·메뉴가 한 줄에 들어가게 한다.
   64rem 미만은 간격을 줄이고, 24rem(384px) 미만은 언어 전환에 '다른 언어' 하나만 둔다(지금 언어는 이미 보고 있으므로) */
@media (max-width: 63.99rem) {
  .site-header__inner {
    gap: var(--space-s);
  }
}

@media (max-width: 23.99rem) {
  .site-header .lang-switch a[aria-current="true"] {
    display: none;
  }

  .site-header .lang-switch a + a {
    border-left: 0;
  }
}

/* 메뉴 펼침: Cellmark Editor 아래 내려받기·설치 방법 */
.site-nav__item--sub {
  position: relative;
}

.site-nav__item--sub > a::after {
  content: "";
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  margin-left: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.22em) rotate(45deg);
}

.site-nav .site-nav__sub {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: -1rem;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 0;
  min-width: 15rem;
  padding: var(--space-xs) 0;
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-window);
}

/* 링크와 펼침 사이 빈틈을 이어 마우스가 지나가도 닫히지 않게 */
.site-nav__sub::before {
  content: "";
  position: absolute;
  inset: -0.8rem 0 auto;
  height: 0.8rem;
}

.site-nav__item--sub:hover .site-nav__sub,
.site-nav__item--sub:focus-within .site-nav__sub {
  display: flex;
}

.site-nav__sub a {
  display: block;
  padding: 0.55rem 1rem;
  white-space: nowrap;
}

.site-nav__sub a:hover {
  background: var(--paper-band);
}

.menu__panel .menu__sub a {
  padding-left: 2.25rem;
  font-size: 0.9375rem;
  color: var(--ink-3);
}

/* 오프라인 꼬리표: 외부 LLM 없이 PC 안에서 */
/* 초록 원 점은 로고의 씨앗에만 쓴다(DS). 꼬리표에는 점을 달지 않는다 */
.badge-offline {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.6em;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* 한글 라벨은 13px(eyebrow 규칙과 같음) */
:lang(ko) .badge-offline {
  font-size: 0.8125rem;
  letter-spacing: 0;
}

.tech-card figcaption .badge-offline {
  justify-self: start;
}

/* 메뉴 묶음: 제품군 | 제품·공개 표준 | 회사 (사장님 2026-10-21) */
.site-nav .site-nav__group-start {
  position: relative;
  margin-left: calc(var(--space-s) * -0.25);
  padding-left: var(--space-l);
}

.site-nav .site-nav__group-start::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1.1em;
  transform: translateY(-50%);
  background: var(--line-strong);
}

.nav-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
}

.menu__panel .menu__group {
  padding: var(--space-xs) 1.125rem 0.125rem;
  font-size: var(--eyebrow-size);   /* 작은 라벨은 eyebrow 크기(DS 33판): EN 12px, KO 13px */
  font-weight: 650;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-3);
}

:lang(ko) .menu__panel .menu__group {
  letter-spacing: var(--eyebrow-tracking);
  text-transform: none;
}

.menu__panel .menu__group-start {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--line);
}

/* 휴대폰 메뉴 */
.menu {
  position: relative;
}

.menu__button {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.menu__button::-webkit-details-marker {
  display: none;
}

.menu[open] .menu__button {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 14rem;
  max-width: calc(100vw - 2rem);   /* 좁은 화면에서도 화면 안에 */
  padding: var(--space-xs) 0;
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
}

.menu__panel a {
  display: block;
  padding: 0.625rem 1.125rem;
  font-size: 1rem;
}

.menu__panel a[aria-current="page"] {
  color: var(--accent);
  font-weight: 650;
}

/* 메뉴 이름과 문의 단추는 꺾지 않고, 로고와 메뉴 칸은 줄어들지 않는다.
   64–80rem에서는 간격을, 64–75rem에서는 글자 크기도 줄여 한 줄에 둔다(1024px에서 영문 머리글이 들어맞는 값) */
.site-nav a,
.site-header__contact {
  white-space: nowrap;
}

.brand,
.site-nav ul > li {
  flex: none;
}

@media (min-width: 64rem) and (max-width: 79.99rem) {
  .site-header__inner {
    gap: var(--space-m);
  }

  .site-nav ul {
    gap: var(--space-s);
  }

  .site-nav .site-nav__group-start {
    padding-left: var(--space-s);
  }
}

@media (min-width: 64rem) and (max-width: 74.99rem) {
  .site-nav a {
    font-size: 0.875rem;
  }
}

@media (min-width: 64rem) {
  .site-nav {
    display: block;
  }

  .site-header__contact {
    display: inline-flex;
  }

  .site-header__tools {
    margin-inline-start: var(--space-s);
  }

  .menu {
    display: none;
  }
}

/* ================================================================ 섹션 틀 */

.section {
  padding-block: var(--space-section);
}

.section + .section {
  border-top: 1px solid var(--line);
}

.band {
  padding-block: var(--space-section);
  background: var(--paper-band);
}

/* 왼쪽 라벨 / 오른쪽 내용 (Sakana식) */
.split {
  display: grid;
  gap: var(--space-m);
}

.split__body > .title + * {
  margin-top: var(--space-m);
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: minmax(11rem, 3fr) 9fr;
    gap: var(--space-l);
  }

  .split > .eyebrow {
    padding-top: 0.9rem;
  }
}

/* ================================================================ 첫 화면 */

.hero {
  position: relative;
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
}

.hero__grid {
  display: grid;
  gap: var(--space-xl);
}

.hero__main .display {
  max-width: 21ch;
}

:lang(ko) .hero__main .display {
  max-width: 16em;
}

.hero__lede {
  margin-top: var(--space-m);
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: var(--space-m);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  max-width: 44rem;
}

.hero__facts dt {
  font-size: var(--eyebrow-size);   /* 작은 라벨은 eyebrow 크기(DS 33판): EN 12px, KO 13px */
  font-weight: 650;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-2xs);
}

.hero__facts dd {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.hero__news {
  border-top: 1px solid var(--line);
  padding-top: var(--space-s);
}

.hero__news-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--space-xs);
}

.hero__news-head h2 {
  font-size: var(--eyebrow-size);   /* 작은 라벨은 eyebrow 크기(DS 33판): EN 12px, KO 13px */
  font-weight: 650;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-3);
}

.news-list li {
  border-top: 1px solid var(--line);
}

.news-list a {
  display: block;
  padding: var(--space-s) 0;
  color: var(--ink);
  text-decoration: none;
}

.news-list a:hover .news-list__title {
  color: var(--accent);
}

.news-list__meta {
  display: flex;
  gap: var(--space-xs);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.news-list__meta .tag {
  color: var(--accent);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

:lang(ko) .news-list__meta .tag {
  text-transform: none;
  letter-spacing: 0.02em;
}

.news-list__title {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.1875rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

:lang(ko) .news-list__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
}

.hero__art {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  color: var(--line-strong);
}

.hero__art .sym {
  min-height: 4.5rem;
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 8fr) minmax(18rem, 4fr);
    gap: clamp(2rem, 4vw, 5rem);
    align-items: start;
  }

  .hero__news {
    border-top: 0;
    border-left: 1px solid var(--line);
    padding-top: 0;
    padding-left: var(--space-l);
  }
}

/* ================================================================ 씨앗 → 숲 (디자인팀 상징 키트)
   키트 그림의 색은 var(--sym-*, var(--토큰))이다. 어두운 띠에서만 역할 색을 바꿔 준다(키트 README). */

.sym {
  display: block;
  width: 100%;
  height: auto;
}

.band--forest {
  --sym-line: var(--forest-ink-2);
  --sym-ink: var(--forest-ink);
  --sym-faint: var(--forest-line);
  --sym-ground: var(--forest-line);
  --sym-seed: var(--forest-seed, var(--forest-accent));
  --sym-paper: var(--forest);
}

/* ================================================================ 사업군 두 칸 */

.biz-grid {
  display: grid;
  margin-top: var(--space-xl);
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

.biz-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-l) var(--space-m) var(--space-m);
}

.biz-card + .biz-card {
  border-top: 1px solid var(--line);
}

.biz-card__art {
  margin: calc(-1 * var(--space-l)) calc(-1 * var(--space-m)) var(--space-m);
  background: var(--paper-band);
  border-bottom: 1px solid var(--line);
}

.biz-card__art .art {
  width: 100%;
  height: auto;
}

.biz-card__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.biz-card h3 {
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  letter-spacing: var(--display-tracking);
  line-height: 1.2;
}

.biz-card__desc {
  margin-top: var(--space-xs);
  color: var(--ink-2);
}

.tech-list {
  margin-block: var(--space-m);
  border-top: 1px solid var(--line);
}

.tech-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2xs);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 550;
}

.tech-list .chip,
.tech-list .status {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tech-list .chip {
  color: var(--accent);
}

.tech-list .status {
  color: var(--ink-3);
}

.tech-list .status::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.4rem;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  vertical-align: 0.05em;
}

.biz-card__note {
  font-size: var(--step--1);
  color: var(--ink-3);
}

.biz-card .link-arrow {
  margin-top: auto;
  padding-top: var(--space-m);
}

@media (min-width: 48rem) {
  .biz-grid {
    grid-template-columns: 1fr 1fr;
  }

  .biz-card + .biz-card {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .biz-card {
    padding: var(--space-l);
  }

  .biz-card__art {
    margin: calc(-1 * var(--space-l)) calc(-1 * var(--space-l)) var(--space-l);
  }
}

/* ================================================================ 설명 그림 공통 */

.art text {
  font-family: var(--font-sans);
}

.a-paper {
  fill: var(--paper-raised);
  stroke: var(--line-strong);
}

.a-ink {
  fill: var(--line-strong);
}

.a-ink-strong {
  fill: var(--ink-3);
}

.a-grid {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 0.8;
}

.a-cell-head {
  fill: var(--paper-band);
}

.a-stroke {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.a-box {
  fill: color-mix(in srgb, var(--accent) 6%, transparent);
  stroke: var(--accent);
  stroke-width: 1.3;
}

.a-lead {
  stroke: var(--accent);
  stroke-width: 1;
}

.a-tag rect {
  fill: var(--accent);
}

/* 그림 속 뜻을 담은 라벨은 320px 화면에서 8px 이상(디자인팀 DS 34판). 그림 380 단위가 286px로 그려지므로 11 단위 */
.a-tag text {
  fill: var(--paper);
  font-size: 11px;   /* tools/gen_art.py TAG_PX와 같게 */
  font-weight: 650;
}

.art--scholar .s-bg {
  fill: var(--forest);
}

.art--scholar .s-edge {
  stroke: var(--forest-ink-2);
  stroke-width: 0.9;
}

.art--scholar .s-node {
  fill: var(--forest-ink);
}

.art--scholar .s-node--new {
  fill: var(--forest-accent);
}

.art--scholar .s-axis {
  stroke: var(--forest-line);
}

.art--scholar .s-label {
  fill: var(--forest-ink-2);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* /scholar 첫머리의 넓은 그림(1200 단위)은 좁은 화면에서 '과거·현재'가 8px보다 작아진다(320px에서 2.6px).
   60rem 미만에서는 라벨을 뺀다. 뜻은 대체 글이 전한다(DS 34판: 라벨을 뺀 단순판) */
@media (max-width: 59.99rem) {
  .art--wide .s-label {
    display: none;
  }
}

.t-cell {
  fill: var(--paper-raised);
  stroke: var(--line-strong);
}

.t-head {
  fill: var(--paper-band);
  stroke: var(--line-strong);
}

.t-merged {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1.2;
}

.t-legend {
  fill: var(--ink-2);
  font-size: 11px;
}

/* ================================================================ Cellmark 띠 */

/* Cursor식: 글은 위에 두 칸으로, 앱 화면은 그 아래 크게 */
.cellmark {
  display: grid;
  gap: var(--space-xl);
}

.cellmark__text {
  display: grid;
  gap: var(--space-l);
}

.cellmark__text .check-list {
  margin-top: 0;
}

.check-list {
  margin-top: var(--space-l);
  border-top: 1px solid var(--line-strong);
}

.check-list li {
  padding: var(--space-s) 0 var(--space-s) 1.75rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: var(--ink-2);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.45rem;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.check-list strong {
  color: var(--ink);
  font-weight: 650;
}

.app-shot {
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  box-shadow: var(--shadow-window);
}

.app-shot img {
  width: 100%;
  height: auto;
}

.app-shot__caption {
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  color: var(--ink-3);
}

@media (min-width: 64rem) {
  .cellmark__text {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
}

/* ================================================================ 우리가 가는 길 (어두운 숲 띠) */

.band--forest {
  --art-bg: var(--forest);
  background: var(--forest);
  color: var(--forest-ink);
}

.band--forest .eyebrow {
  color: var(--forest-accent);
}

.band--forest .title em {
  color: var(--forest-accent);
}

.band--forest a {
  color: var(--forest-accent);
}

.band--forest :focus-visible {
  outline-color: var(--forest-accent);
}

.steps {
  display: grid;
  margin-top: var(--space-xl);
  border-top: 1px solid var(--forest-line);
}

.step {
  padding: var(--space-l) 0;
  border-bottom: 1px solid var(--forest-line);
}

.step__art {
  width: 8rem;
  margin-bottom: var(--space-s);
}


.step__meta {
  display: flex;
  gap: var(--space-xs);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-ink-2);
}

.step__meta .step__num {
  color: var(--forest-accent);
}

.step h3 {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  letter-spacing: var(--display-tracking);
  line-height: 1.2;
}

.step p:not(.step__meta) {
  margin-top: var(--space-xs);
  color: var(--forest-ink-2);
  max-width: 34rem;
}

.step .step__tech {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--forest-ink);
}

@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--forest-line);
  }

  .step {
    padding: var(--space-l) var(--space-l) var(--space-l) 0;
    border-bottom: 0;
  }

  .step + .step {
    padding-left: var(--space-l);
    border-left: 1px solid var(--forest-line);
  }
}

/* ================================================================ LTEM */

.ltem {
  display: grid;
  gap: var(--space-xl);
}

.ltem__art {
  border: 1px solid var(--line);
  background: var(--paper-raised);
  padding: var(--space-m);
}

.ltem__art .art {
  width: 100%;
  height: auto;
}

.placeholder-link {
  font-size: var(--step--1);
  color: var(--ink-3);
}

@media (min-width: 64rem) {
  .ltem {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: center;
  }
}

/* ================================================================ 세 입구 (Liquid식) */

.doors-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-m);
}

.doors {
  display: grid;
  margin-top: var(--space-xl);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.door {
  display: flex;
  flex-direction: column;
  padding: var(--space-l) 0;
}

.door + .door {
  border-top: 1px solid var(--line);
}

.door__label {
  font-size: var(--eyebrow-size);   /* 작은 라벨은 eyebrow 크기(DS 33판): EN 12px, KO 13px */
  font-weight: 650;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-3);
}

.door h3 {
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  letter-spacing: var(--display-tracking);
  line-height: 1.2;
}

.door p:not(.door__label) {
  margin-top: var(--space-xs);
  color: var(--ink-2);
  max-width: 26rem;
}

.door .link-arrow {
  margin-top: auto;
  padding-top: var(--space-l);
}

@media (min-width: 64rem) {
  .doors {
    grid-template-columns: repeat(3, 1fr);
  }

  .door {
    padding: var(--space-l) var(--space-l) var(--space-l) 0;
  }

  .door + .door {
    border-top: 0;
    border-left: 1px solid var(--line);
    padding-left: var(--space-l);
  }
}

/* ================================================================ 바닥글 */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.9375rem;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-l);
  padding-block: var(--space-2xl) var(--space-xl);
}

.site-footer__brand p {
  margin-top: var(--space-s);
  max-width: 20rem;
  color: var(--ink-2);
}

.site-footer__head {
  font-size: var(--eyebrow-size);   /* 작은 라벨은 eyebrow 크기(DS 33판): EN 12px, KO 13px */
  font-weight: 650;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-xs);
}

/* 한국어 작은 라벨: 대문자 변환 없이 자간 0.02em(eyebrow-tracking, DS 33판) */
:lang(ko) .site-footer__head,
:lang(ko) .door__label,
:lang(ko) .pillar__sol-label,
:lang(ko) .hero__facts dt,
:lang(ko) .hero__news-head h2 {
  letter-spacing: var(--eyebrow-tracking);
  text-transform: none;
}

.site-footer__col li + li {
  margin-top: 0.4rem;
}

.site-footer__col a {
  color: var(--ink);
  text-decoration: none;
}

.site-footer__col a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.site-footer__mail li {
  display: flex;
  flex-direction: column;
}

.site-footer__mail span {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  padding-block: var(--space-m) var(--space-l);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-3);
}

.site-footer__bottom span {
  margin-left: 0.5em;
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
  }
}

/* 기술 다섯 칸: 윗줄 두 칸(문서 레이아웃 분석 → 읽기 순서 인식), 아랫줄 세 칸(한국어 OCR, 수식, 표) */
@media (min-width: 64rem) {
  .tiles.tiles--5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .tiles.tiles--5 > .tile:nth-child(-n + 2) {
    grid-column: span 3;
  }

  .tiles.tiles--5 > .tile:nth-child(n + 3) {
    grid-column: span 2;
  }
}

/* 읽기 순서 그림: 영역은 옅은 점선, 순서 번호는 ink, 흐름선은 accent 한 줄 */
.a-region {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.a-flow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.a-num circle {
  fill: var(--ink);
}

.a-num text {
  fill: var(--paper);
  font-size: 11px;   /* 320px 화면에서 8px 이상(DS 34판) */
  font-weight: 700;
  text-anchor: middle;
}

/* ================================================================ 칸 높이 맞춤
   기술 칸의 그림 틀을 같은 비율로 두어, 칸마다 제목과 설명이 같은 높이에서 시작한다 */
.tile__art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 380 / 228;
  min-height: 0;            /* 그림 비율이 조금 달라도 틀은 늘어나지 않는다 */
  overflow: hidden;
}

.tile__art .art,
.tile__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 제목 줄 옆 꼬리표(표 인식의 '오프라인'). 제목 높이는 다른 칸과 같다 */
.tile__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs, 0.25rem) var(--space-s);
}

/* 아직 열지 않은 것: 링크 자리에 '곧 제공' */
.door__soon {
  margin-top: auto;
  padding-top: var(--space-l);
  font-weight: 600;
  color: var(--ink-3);
}

/* 2등급 느린 배경의 멈춤 단추(Scholar 첫머리 숲) */
.page-hero__media[data-ambient] {
  position: relative;
}

.page-hero__media[data-ambient] .sym-pause {
  position: absolute;
  top: 0;
  right: 0;
}

.page-hero--dark .sym-pause {
  background: transparent;
  color: var(--forest-ink-2);
  border-color: var(--forest-line);
}

.page-hero--dark .sym-pause:hover {
  color: var(--forest-ink);
  border-color: var(--forest-ink-2);
}

/* 시연 그림의 멈춤/재생 단추: 오른쪽 아래, 캐러셀 멈춤 단추와 같은 모양(.sym-pause) */
.media-frame {
  position: relative;
}

.media-frame .anim-toggle,
.gif-frame .anim-toggle,
.lightbox__media .anim-toggle {
  position: absolute;
  right: var(--space-s);
  bottom: var(--space-s);
}

/* 휴대폰: GIF가 낮아 멈춤 단추를 모서리에 더 붙인다 */
@media (max-width: 47.99rem) {
  .gif-frame .anim-toggle,
  .lightbox__media .anim-toggle {
    right: var(--space-2xs);
    bottom: var(--space-2xs);
  }
}

/* ================================================================ 떠오름
   마우스를 올리면 살짝 떠오른다(사장님 2026-10-20: "여기저기 다"). 칸·카드 모양 영역은 뒤에 흰 카드가 깔리며 떠오르고,
   테두리 있는 상자는 상자째 떠오른다. 값은 디자인 토큰(--lift-y, --lift-y-small, --dur-lift, --shadow-lift, --ease-out),
   잔잔한 모드 값은 tokens.css가 바꾼다. */
.door,
.tile,
.facts-row > div,
.feature,
.gif-grid figure,
.news-list--wide li,
.release,
.biz-card,
.step,
.pillar__solution,
.callout,
.btn {
  transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out),
              border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* 칸·카드 모양 영역: 바탕이 없으므로 떠오를 때 뒤에 카드가 깔린다 */
.door,
.tile,
.facts-row > div,
.feature,
.gif-grid figure,
.news-list--wide li,
.release,
.biz-card,
.step {
  position: relative;
  isolation: isolate;
}

@media (hover: hover) {
  .pillar__solution:hover,
  .callout:hover {
    transform: translateY(var(--lift-y));
    box-shadow: var(--shadow-lift);
  }

  .btn:not([aria-disabled="true"]):hover {
    transform: translateY(var(--lift-y-small));
    box-shadow: var(--shadow-lift-small);
  }
}

@media (hover: hover) and (min-width: 48rem) {
  .door::before,
  .tile::before,
  .facts-row > div::before,
  .feature::before,
  .gif-grid figure::before,
  .news-list--wide li::before,
  .release::before,
  .biz-card::before,
  .step::before {
    content: "";
    position: absolute;
    inset: 0 calc(var(--space-s) * -1);
    z-index: -1;
    background: var(--paper-raised);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    transition: opacity var(--dur-lift) var(--ease-out);
    pointer-events: none;
  }

  /* 내용이 칸 끝까지 붙은 것은 위아래에도 여백을 둔다 */
  .gif-grid figure::before,
  .release::before,
  .feature::before {
    inset: calc(var(--space-s) * -1);
  }

  /* 남색 띠 위(우리가 가는 길)는 조금 밝은 남색 카드 */
  .band--forest .step::before {
    background: var(--forest-line);
    box-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.55);
  }

  .door:hover, .door:focus-within,
  .tile:hover,
  .facts-row > div:hover,
  .feature:hover,
  .gif-grid figure:hover, .gif-grid figure:focus-within,
  .news-list--wide li:hover, .news-list--wide li:focus-within,
  .release:hover,
  .biz-card:hover, .biz-card:focus-within,
  .step:hover {
    transform: translateY(var(--lift-y));
  }

  .door:hover::before, .door:focus-within::before,
  .tile:hover::before,
  .facts-row > div:hover::before,
  .feature:hover::before,
  .gif-grid figure:hover::before, .gif-grid figure:focus-within::before,
  .news-list--wide li:hover::before, .news-list--wide li:focus-within::before,
  .release:hover::before,
  .biz-card:hover::before, .biz-card:focus-within::before,
  .step:hover::before {
    opacity: 1;
  }
}

/* 캐러셀: 잔잔한 모드에서는 옆으로 밀지 않고 서서히 바꾼다(site.js가 is-fading을 붙인다) */
.carousel__track {
  transition: opacity var(--dur-base) var(--ease-out);
}

.carousel__track.is-fading {
  opacity: 0;
}

/* 키트 기호를 제품 이름 앞에(32px, LTEM 32px 기호와 같은 크기) */
/* 첫 무대 칸의 기술 근거(기술 칸으로 이어짐) */
.facts-row a.facts-row__tech {
  display: inline-block;
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  min-height: 1.5rem;   /* 누르는 영역 24px 이상 */
  padding-block: 0.0625rem;
}

/* 줄이 바뀌면 안 되는 말 덩어리(제목) */
.nowrap {
  white-space: nowrap;
}

/* ================================================================ 섹션 바탕 구분(사장님 2026-10-20: 섹션마다 바탕으로 구분)
   첫머리 다음부터 흰색·라벤더를 번갈아 칠한다(어두운 남색 섹션은 그대로). 바닥글은 남색 띠로 마지막 섹션과 구분한다. */
.band--plain {
  background: var(--paper);
}

/* 라벤더 섹션 안의 그림 틀은 흰 바탕으로 띄운다 */
.section--band .tile__art,
.section--band .facts-row__art {
  background: var(--paper-raised);
}

/* '곧 제공' 표시: 설명 밖, 칸 머리말 옆 */
.badge-soon {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.2em 0.6em;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  vertical-align: 0.05em;
  white-space: nowrap;
}

/* 오프라인 꼬리표와 한 짝: 한글 13px, 자간 0 */
:lang(ko) .badge-soon {
  font-size: 0.8125rem;
  letter-spacing: 0;
}

/* 바깥 링크(새 탭): 화살표 대신 ↗ */
.link-arrow[target="_blank"]::after {
  content: "↗";
}

.link-arrow[target="_blank"]:hover::after {
  transform: translate(2px, -2px);
}

.ext-mark {
  display: inline-block;
  margin-left: 0.25em;
  font-size: 0.9em;
}

/* 바닥글: 남색 띠(맨 위 알림 띠와 짝) */
.site-footer {
  border-top: 0;
  background: var(--forest);
  color: var(--forest-ink);
  --logo-seed: var(--forest-accent);
}

.site-footer .brand .wordmark {
  color: var(--forest-ink);
}

.site-footer .site-footer__brand p,
.site-footer .site-footer__head,
.site-footer .site-footer__mail span,
.site-footer .site-footer__bottom,
.site-footer .site-footer__legal {
  color: var(--forest-ink-2);
}

.site-footer__col a {
  color: var(--forest-ink);
}

.site-footer__col a:hover {
  color: var(--forest-accent);
}

.site-footer__bottom {
  border-top-color: var(--forest-line);
}

.site-footer .lang-switch {
  border-color: var(--forest-line);
}

.site-footer .lang-switch a {
  color: var(--forest-ink-2);
}

.site-footer .lang-switch a + a {
  border-left-color: var(--forest-line);
}

.site-footer .lang-switch a[aria-current="true"],
.site-footer .lang-switch a:hover {
  color: var(--forest-ink);
}

.site-footer :focus-visible {
  outline-color: var(--forest-accent);
}

/* ================================================================ 움직임 줄이기 → 잔잔한 모드
   사장님 결정(2026-10-20): 움직임 줄이기 설정이어도 움직임을 멈추지 않고 더 느리고 작게 보여 준다.
   길이·거리는 tokens.css(잔잔한 모드 값)와 symbol-grow.js 4판이 바꾼다. 자동 움직임에는 모두 멈춤 단추가 있다(WCAG 2.2.2). */

/* ================================================================ 회사 워드마크 (디자인팀 자산, currentColor) */

.brand .wordmark {
  display: block;
  height: 1.375rem;  /* 22px. 디자인팀 규칙(b안): 머리글 20–24px, 16px보다 작게 쓰지 않는다 */
  width: auto;
  color: var(--ink);
}

.site-footer .brand .wordmark {
  height: 1.25rem;
}

/* ================================================================ 2차 페이지 공통 */

.page-hero {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3rem, 2rem + 3vw, 5rem);
  border-bottom: 1px solid var(--line);
}

.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.page-hero .eyebrow {
  margin-bottom: var(--space-m);
}

.page-hero .display {
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  max-width: 20ch;
}

:lang(ko) .page-hero .display {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  max-width: 18em;
}

.page-hero .lede {
  margin-top: var(--space-m);
}

.page-hero__media .art,
.page-hero__media img {
  width: 100%;
  height: auto;
}

@media (min-width: 64rem) {
  .page-hero__grid--media {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(2rem, 4vw, 4.5rem);
  }
}

/* 한 칸 첫머리(LTEM): 확정 제목이 길어 제목을 위에 넓게, 그림은 아래 */
.page-hero--stack .display {
  max-width: 32ch;
}

:lang(ko) .page-hero--stack .display {
  max-width: 24em;
}

.page-hero--stack .lede,
.page-hero--stack .note {
  max-width: 46rem;
}

.page-hero--stack .page-hero__media {
  max-width: 60rem;
}

/* 긴 제목의 뜻 단위 묶기(디자인팀 DS 26판): .nw는 모든 폭, .u는 48rem 이상에서만 한 줄로 */
.page-hero--stack .nw,
.door h3 .nw {
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .page-hero--stack .u {
    white-space: nowrap;
  }
}

/* 어두운 첫 화면 (/scholar, FutureHouse식) */
.page-hero--dark {
  --art-bg: var(--forest);
  background: var(--forest);
  color: var(--forest-ink);
  border-bottom: 0;
}

.page-hero--dark .eyebrow,
.page-hero--dark .display em {
  color: var(--forest-accent);
}

.page-hero--dark .lede {
  color: var(--forest-ink-2);
}

.page-hero--dark .page-hero__media {
  margin-top: var(--space-xl);
}

.page-hero--dark .btn--primary {
  background: var(--forest-ink);
  color: var(--forest);
}

.page-hero--dark .btn--outline {
  border-color: var(--forest-line);
  color: var(--forest-ink);
}

.page-hero--dark a:not(.btn) {
  color: var(--forest-accent);
}

/* 섹션 머리 (제목 + 짧은 글) */
.section-head {
  max-width: 46rem;
}

.section-head .lede {
  margin-top: var(--space-s);
}

.section--band {
  background: var(--paper-band);
}

.section + .section--band,
.section--band + .section {
  border-top: 0;
}

/* 2×2 기술 칸 */
.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-xl);
  border-top: 1px solid var(--line);
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-l) 0;
  border-bottom: 1px solid var(--line);
}

.tile__art {
  margin-bottom: var(--space-s);
  background: var(--paper-band);
  border: 1px solid var(--line);
}

.tile__art .art,
.tile__art img {
  width: 100%;
  height: auto;
}

.tile h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  letter-spacing: var(--display-tracking);
  line-height: 1.2;
}

.tile p {
  color: var(--ink-2);
  max-width: 34rem;
}

.tile__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.5rem;   /* 누르는 영역 24px 이상 */
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
}

.tile__tag img {
  width: 16px;
  height: 16px;
}

@media (min-width: 48rem) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }
}

/* 글과 그림을 번갈아 놓는 기능 줄 (Cursor식) */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  align-items: center;
  padding-block: var(--space-2xl);
}

.feature + .feature {
  border-top: 1px solid var(--line);
}

.feature__num {
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.feature h3 {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-3);
  letter-spacing: var(--display-tracking);
  line-height: 1.15;
  text-wrap: balance;
}

.feature p {
  margin-top: var(--space-s);
  color: var(--ink-2);
  max-width: 30rem;
}

@media (min-width: 64rem) {
  .feature {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-2xl);
  }

  .feature--flip {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }

  .feature--flip > :first-child {
    order: 2;
  }
}

/* 앱 화면·영상 틀 */
.media-frame {
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  box-shadow: var(--shadow-window);
}

.media-frame img,
.media-frame video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-band);
}

.media-caption {
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* 짧은 사실 세 칸 */
.facts-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-xl);
  border-top: 1px solid var(--line-strong);
}

.facts-row > div {
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--line);
}

.facts-row strong {
  display: block;
  font-weight: 650;
}

.facts-row span {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

@media (min-width: 48rem) {
  .facts-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-l);
  }
}

/* 분야 그림: 디자인팀 정식판(글자 없음, 한·영 공용). 초록 점선 상자 = Eureka-Vision이 알아본 구조 */
.facts-row__art {
  margin-bottom: var(--space-s);
  background: var(--paper-band);
}

.facts-row__art svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 제품 표시: 알림 띠, 링크, 소식, LTEM 띠 */
.newsbar__icon {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  margin-right: 0.4em;
  vertical-align: -0.3em;
}

.link-arrow .product-icon-inline {
  margin-right: 0;
}

.eyebrow .product-icon-inline {
  width: 1.6em;
  height: 1.6em;
  vertical-align: -0.5em;
}

.news-list__icon {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-xs);
}

.ltem-mark {
  display: block;
  width: auto;
  height: 3.25rem;
  margin-bottom: var(--space-m);
}

/* LTEM 기호 작은 판: 16·32px 픽셀판을 px로 고정(LTEM CI 66행). 이름과 간격은 4px 이상 */
.ltem-icon-16,
.ltem-icon-32 {
  display: inline-block;
  flex: none;
}

.ltem-icon-16 {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -2px;
}

.ltem-icon-32 {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  vertical-align: -5px;
}

.link-arrow .ltem-icon-16 {
  margin-right: 0;
}

/* 제품 이름 머리 (아이콘 + 이름) */
.product-head {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.product-head img {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
}

.product-icon-inline {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  margin-right: 0.35em;
}

/* 번호 매긴 순서 (설치 안내) */
.steps-list {
  counter-reset: step;
  margin-top: var(--space-m);
  max-width: 40rem;
}

.steps-list li {
  counter-increment: step;
  position: relative;
  padding: var(--space-s) 0 var(--space-s) 2.75rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}

.steps-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--space-s);
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.steps-list strong {
  color: var(--ink);
}

/* 메일 주소를 크게 */
.callout {
  margin-top: var(--space-l);
  padding: var(--space-l);
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
}

.callout__label {
  font-size: var(--step--1);
  color: var(--ink-3);
}

.callout__value {
  display: inline-block;
  margin-top: var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.2;
  word-break: break-all;
}

:lang(ko) .callout__value {
  font-family: var(--font-sans);
  font-weight: 650;
}

/* 이름–값 목록 (회사 정보) */
.kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-l);
  border-top: 1px solid var(--line-strong);
}

.kv > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-l);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--line);
}

.kv dt {
  font-size: var(--step--1);
  color: var(--ink-3);
}

.kv dd {
  color: var(--ink);
}

@media (min-width: 48rem) {
  .kv > div {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}

/* LTEM GIF 칸 */
.gif-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl) var(--space-l);
  margin-top: var(--space-xl);
}

.gif-grid figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

.gif-grid figcaption {
  margin-top: var(--space-xs);
  font-weight: 600;
}

.gif-grid figcaption span {
  display: block;
  font-weight: 400;
  color: var(--ink-3);
  font-size: var(--step--1);
}

.gif-grid code,
.lightbox code,
.prose code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.05em 0.3em;
  background: var(--paper-band);
  border: 1px solid var(--line);
}

@media (min-width: 64rem) {
  .gif-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* LTEM 예제 크게 보기: 디자인 시스템 Lightbox 부품(DS 29판). site.js가 그림을 단추로 감싸고 <dialog>를 만든다 */
.gif-frame {
  position: relative;
}

.lightbox-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}

.lightbox-trigger img {
  display: block;
}

/* ⤢ 표시: 마우스를 올리거나 초점이 들어오면 나온다. 오른쪽 아래는 멈춤 단추 자리라 오른쪽 위에 둔다 */
.lightbox-trigger__mark {
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-2xs);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}

.lightbox-trigger:hover .lightbox-trigger__mark,
.lightbox-trigger:focus-visible .lightbox-trigger__mark {
  opacity: 1;
}

/* 손가락 화면에는 마우스 올리기가 없어 늘 보인다 */
@media (hover: none) {
  .lightbox-trigger__mark {
    opacity: 1;
  }
}

/* 열려 있는 동안 뒤 페이지는 스크롤하지 않는다. 스크롤 막대 자리는 남겨 화면이 옆으로 밀리지 않게 한다 */
html.has-modal {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-xl) max(var(--space-l), env(safe-area-inset-right, 0px)) var(--space-xl) max(var(--space-l), env(safe-area-inset-left, 0px));
  border: 0;
  background: rgb(16 20 58 / 0.96);   /* ink 96%: 뒤 페이지 글이 캡션과 겹쳐 보이지 않게(DS 32판) */
  color: var(--forest-ink);
  overflow: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.lightbox[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-m);
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox::backdrop {
  background: transparent;
}

/* 잔잔한 모드: 더 천천히 나타나고 사라진다 */
@media (prefers-reduced-motion: reduce) {
  .lightbox {
    transition-duration: var(--dur-base);
  }
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
  min-width: 0;
  margin: 0;
}

/* 원본(1160×510)보다 크게 늘리지 않는다. 2배 판이 없어 늘리면 흐려진다 */
.lightbox__media {
  position: relative;
  max-width: min(1160px, 92vw, 100%);
}

.lightbox__media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
  background: var(--paper-raised);
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-window);
}

.lightbox__caption {
  display: flex;
  gap: var(--space-m);
  align-items: baseline;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--forest-ink);
}

.lightbox__title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 650;
}

.lightbox__count {
  color: var(--forest-ink-2);
  font-size: 0.9375rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lightbox__count--pager {
  display: none;
}

.lightbox__close,
.lightbox__nav {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--forest-line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--forest-ink);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close {
  position: absolute;
  top: max(var(--space-s), env(safe-area-inset-top, 0px));
  right: max(var(--space-s), env(safe-area-inset-right, 0px));
}

.lightbox__close:hover,
.lightbox__nav:hover {
  border-color: var(--forest-ink-2);
}

.lightbox :focus-visible {
  outline: 2px solid var(--forest-accent);
  outline-offset: 3px;
}

/* 흰 그림 위의 멈춤 단추는 페이지와 같은 초점 테두리 */
.lightbox__media :focus-visible {
  outline-color: var(--accent);
}

.lightbox code {
  background: var(--forest-line);
  border-color: var(--forest-line);
  color: var(--forest-ink);
}

/* 휴대폰: 창이 화면을 꽉 채운다. 이전·다음은 그림 아래 한 줄에 번호와 함께(‹ 3 / 7 ›). 손가락 확대는 막지 않는다 */
@media (max-width: 47.99rem) {
  .lightbox {
    padding: var(--space-2xl) max(var(--space-s), env(safe-area-inset-right, 0px)) max(var(--space-l), env(safe-area-inset-bottom, 0px)) max(var(--space-s), env(safe-area-inset-left, 0px));
    background: var(--forest);   /* 휴대폰은 불투명(DS 32판) */
  }

  .lightbox[open] {
    grid-template-columns: 1fr auto auto auto 1fr;
    grid-template-areas:
      "fig fig fig fig fig"
      ". prev count next .";
    align-content: center;
    gap: var(--space-m) var(--space-s);
  }

  .lightbox__figure {
    grid-area: fig;
  }

  .lightbox__media {
    max-width: calc(100vw - 32px);
  }

  .lightbox__nav--prev {
    grid-area: prev;
  }

  .lightbox__nav--next {
    grid-area: next;
  }

  .lightbox__caption .lightbox__count {
    display: none;
  }

  .lightbox__count--pager {
    display: block;
    grid-area: count;
    align-self: center;
  }
}

/* 제품군 아이콘(디자인팀 DS 30판, 남색 판): 픽셀판을 그 크기 그대로 쓴다. 이름과의 간격은 크기의 0.3배, 장식이다(alt="")
   세로 가운데를 글자 줄 가운데(기준선 위 (ascent − descent) / 2)에 맞춘다. Pretendard 0.35em, Newsreader 0.233em(실측) */
.family-icon {
  display: inline-block;
  flex: none;
}

.family-icon--32 {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  vertical-align: calc(var(--icon-mid, 0.35em) - 16px);
}

.family-icon--20 {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: calc(var(--icon-mid, 0.35em) - 10px);
}

:lang(en) .pillar__brand,
:lang(en) .tile h3,
:lang(en) .door h3 {
  --icon-mid: 0.233em;
}

/* /vision 제품·API·표준 세 칸: Cellmark·LTEM 아이콘도 같은 규칙으로 맞춰 한 줄에서 높이가 같게 한다 */
.door h3 .product-icon-inline {
  vertical-align: calc(var(--icon-mid, 0.35em) - 0.55em);
}

.door h3 .ltem-icon-32 {
  vertical-align: calc(var(--icon-mid, 0.35em) - 16px);
}

.ltem-lockup {
  width: min(22rem, 100%);
  height: auto;
}

/* 긴 글 (처리방침, 고객 지원) */
.prose {
  max-width: 44rem;
}

/* 문단 사이 기본 간격. :where로 무게를 0으로 두어 아래 제목 간격이 이긴다 */
:where(.prose, .prose .lang-section, .prose .summary, .prose .case) > * + * {
  margin-top: var(--space-s);
}

.prose .lang-section > h2:first-child {
  margin-top: 0;
}

.prose h2 {
  margin-top: var(--space-xl);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.prose h3 {
  margin-top: var(--space-l);
  font-size: var(--step-1);
  font-weight: 650;
}

.prose ul {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: 0.35rem;
}

.prose .meta {
  color: var(--ink-3);
}

.prose .summary {
  padding: var(--space-m) var(--space-l);
  background: var(--paper-band);
  border-left: 3px solid var(--accent);
}

.prose .summary h3 {
  margin-top: 0;
}

.prose .case {
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

.prose .case h4 {
  margin-top: 0;
  font-size: var(--step-0);
  font-weight: 650;
}

.prose .case dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem 1rem;
  margin-top: var(--space-xs);
}

.prose .case dt {
  font-weight: 650;
  font-size: var(--step--1);
  color: var(--ink-3);
}

.prose .case dd + dt {
  margin-top: var(--space-2xs);
}

@media (min-width: 48rem) {
  .prose .case dl {
    grid-template-columns: 9rem minmax(0, 1fr);
  }

  .prose .case dd + dt {
    margin-top: 0;
  }
}

.lang-section + .lang-section {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 2px solid var(--line-strong);
}

.lang-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  margin-top: var(--space-m);
  font-size: var(--step--1);
  font-weight: 600;
}

.lang-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;   /* 누르는 영역 24px 이상 */
}

.note {
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* ================================================================ 2차 설명 그림 */

.art--wide {
  width: 100%;
  height: auto;
}

.a-blur {
  fill: var(--line-strong);
  opacity: 0.55;
}

.a-glyph {
  fill: var(--ink);
  font-size: 15px;
  font-weight: 650;
}

.art--ocr .a-glyph {
  font-size: 14px;   /* 초록 상자(132px) 안에 대체 글꼴이어도 여백이 남게 */
}

.a-glyph--blur {
  fill: var(--ink-3);
  opacity: 0.6;
  filter: blur(0.6px);
}

.a-arrow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.a-caption {
  fill: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
}

.a-formula text {
  fill: var(--ink);
  font-family: var(--font-serif);
  font-size: 15px;
}

.a-formula path {
  stroke: var(--ink);
  stroke-width: 1.2;
}

.a-formula--blur {
  opacity: 0.5;
  filter: blur(0.7px);
}

.a-caret {
  stroke: var(--accent);
  stroke-width: 1.6;
}

.a-card {
  fill: var(--paper-raised);
  stroke: var(--accent);
  stroke-width: 1.3;
}

.a-dot {
  fill: var(--accent);
}

.a-ink--hi {
  fill: var(--accent);
  opacity: 0.55;
}

.a-dash {
  fill: none;
  stroke: var(--line-strong);
  stroke-dasharray: 4 3;
}

.a-bar {
  fill: var(--line-strong);
}

.a-bar--hi {
  fill: var(--accent);
}

/* ================================================================ 2차 페이지 보충 */

@media (min-width: 64rem) {
  .tiles--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tile__status {
  font-size: var(--step--1);
}

h1.product-head {
  gap: var(--space-m);
}

h1.product-head img {
  width: clamp(2.75rem, 2rem + 2.5vw, 4rem);
  height: auto;
  aspect-ratio: 1;
}

.page-hero .note {
  margin-top: var(--space-s);
}

.product-shot {
  margin-top: var(--space-xl);
}

.subhead {
  margin-top: var(--space-2xl);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  letter-spacing: var(--display-tracking);
  line-height: 1.2;
}

.subhead + .lede {
  margin-top: var(--space-s);
}

.ltem-eyebrow {
  margin-top: var(--space-l);
}

.ltem-gif {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

.split__body > .lede + .actions,
.split__body > .lede + .callout {
  margin-top: var(--space-l);
}

/* 밝은 바탕용 / 어두운 바탕용 로고를 둘 다 두고 하나만 보인다 */
.on-dark {
  display: none;
}

/* ================================================================ 공개 전 빈칸 표시 (미리보기에서만 보인다)
   ✍️ 초안: 옅은 초록 밑줄 / ⚠️ 꼭 확인: 주황 물결 밑줄. 공개용 빌드는 이 표시를 남기지 않는다. */

[data-build="beta"] [data-fill="draft"] {
  text-decoration: underline 2px color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 0.25em;
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

[data-build="beta"] [data-fill="check"] {
  text-decoration: underline wavy 1.5px #c2410c;
  text-underline-offset: 0.25em;
  background: #fff3e0;
  outline: 1px dashed #c2410c;
  outline-offset: 2px;
}

[data-build="beta"] [data-fill="check"]::before {
  content: "⚠️ ";
}

[data-build="beta"] [data-fill="alt"] {
  display: none;
}

/* dl 안에서 dt·dd 묶음을 감싼 div는 격자에 끼어들지 않게 */
.prose .case dl > div {
  display: contents;
}

/* 그 묶음이 ⚠️ 칸이면 기호 대신 dt·dd에 직접 표시한다(기호가 격자 칸을 차지하지 않게) */
[data-build="beta"] .case dl > [data-fill="check"]::before {
  content: none;
}

[data-build="beta"] .case dl > [data-fill="check"] > * {
  background: #fff3e0;
  text-decoration: underline wavy 1.5px #c2410c;
  text-underline-offset: 0.25em;
}

[data-build="beta"] .case dl > [data-fill="check"] > dt::before {
  content: "⚠️ ";
}

/* ================================================================ 내려받기, 릴리스 */

.dl-meta {
  font-size: var(--step--1);
  color: var(--ink-3);
}

.dl-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;   /* 누르는 영역 24px 이상 */
}

.release + .release {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--line);
}

/* 다운로드 페이지: 최근 정식 3개, Windows만(사장님 결정 2026-10-21). 버전마다 GitHub 파일(기본)과 eurekax.co 사본(보조) */
.release__platform {
  margin-top: var(--space-3xs);
  color: var(--ink-3);
  font-size: var(--step--1);
}

.release__actions {
  margin-top: var(--space-m);
  align-items: center;
}

.release__more {
  margin-top: var(--space-s);
}

.release-older {
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
}

/* /cellmark-editor 첫머리: GitHub이 막힌 조직용 eurekax.co 사본 링크와 문의 줄 */
.dl-fallback {
  display: grid;
  justify-items: start;
  gap: var(--space-3xs);
  margin-top: var(--space-xs);
}

.releases > .note + .release {
  margin-top: var(--space-xl);
}

.release__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-3);
  letter-spacing: var(--display-tracking);
  line-height: 1.15;
}

.release__sub {
  margin-top: var(--space-l);
  font-size: var(--step-1);
  font-weight: 650;
}

.release__notes {
  margin-top: var(--space-xs);
  padding-left: 1.25rem;
  color: var(--ink-2);
}

code.hash {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.875rem;
  word-break: break-all;
}

pre.code {
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  overflow-x: auto;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.875rem;
}

.site-footer__legal {
  flex-basis: 100%;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.site-footer__legal p + p {
  margin-top: 0.15rem;
}

/* 상징 키트 2등급(느린 배경)의 멈춤 단추. grow.js의 EurekaSymbol.ambient()가 만든다 */
.sym-pause {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
}

.sym-pause:hover {
  border-color: var(--ink-2);
  color: var(--ink);
}

/* ================================================================ 첫 화면: 큰 비전 하나 (2026-10-20 사장님 지시)
   위계: 회사 비전(히어로) > 두 기둥과 미션(A | B) > 솔루션(Eureka-Vision, Eureka-Scholar) */

.hero--vision {
  padding-top: clamp(3rem, 1.5rem + 5vw, 6.5rem);
}

.hero__title {
  font-size: clamp(2.75rem, 1.5rem + 5vw, 5.75rem);
  line-height: 1.04;
  max-width: 18ch;
}

:lang(ko) .hero__title {
  font-size: clamp(2.25rem, 1.3rem + 4vw, 4.5rem);
  line-height: 1.22;
  max-width: 15em;
}

.hero--vision .hero__lede {
  margin-top: var(--space-m);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  max-width: 42rem;
}

/* 미리보기에서만: 제목 안 비교. 공개 판에는 고른 안 하나만 남는다 */
[data-build="beta"] .hero-title-variant {
  display: none;
}

[data-build="beta"][data-hero-title="A"] .hero-title-variant[data-variant="A"],
[data-build="beta"][data-hero-title="B"] .hero-title-variant[data-variant="B"],
[data-build="beta"][data-hero-title="C"] .hero-title-variant[data-variant="C"] {
  display: inline;
}

/* 씨앗 → 숲이 히어로의 주인공. 화면 가로 끝까지 */
.hero__stage {
  margin-top: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
  padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
}

.hero__stage .sym {
  width: 100%;
  height: auto;
  max-height: 44vh;
  margin-inline: auto;
}

.hero__next {
  display: inline-flex;
  gap: 0.25rem;
  margin-block: var(--space-s) var(--space-l);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
}

.hero__next:hover {
  color: var(--accent);
}

/* 두 기둥 A | B: 같은 무게로 나란히, 휴대폰에서는 위아래로 */
.pillars {
  padding-block: var(--space-section);
  border-top: 1px solid var(--line);
}

.pillars__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}

.pillar {
  display: flex;
  flex-direction: column;
}

.pillar__head {
  flex: 1;
}

.pillar__glyph {
  width: 3.5rem;
  height: 3.5rem;
}

.pillar__glyph svg {
  width: 100%;
  height: 100%;
}

.pillar__label {
  margin-top: var(--space-m);
  font-size: var(--eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
}

.pillar__mission {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-3);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  text-wrap: balance;
}

/* 두 기둥 미션의 핵심 낱말: 빨간 강조(사장님 2026-10-21). 색은 디자인 토큰 --emphasis-red(DS 28판) */

.pillar__mission em {
  font-style: italic;
  color: var(--emphasis-red);
}

:lang(ko) .pillar__mission em {
  font-style: normal;
}

.pillar__solution {
  margin-top: var(--space-xl);
  padding: var(--space-l);
  background: var(--paper-band);
  border: 1px solid var(--line);
}

/* 휴대폰(30rem 미만): 안쪽 여백을 줄여 캐러셀 그림을 넓게(320px 화면에서 220 → 260px, 디자인팀 DS 34판 권고) */
@media (max-width: 29.99rem) {
  .pillar__solution {
    padding: var(--space-m) var(--space-xs);
  }
}

.pillar__sol-label {
  font-size: var(--eyebrow-size);   /* 작은 라벨은 eyebrow 크기(DS 33판): EN 12px, KO 13px */
  font-weight: 650;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-3);
}

.pillar__brand {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  letter-spacing: var(--display-tracking);
  line-height: 1.2;
}

.pillar__brand a {
  color: var(--ink);
  text-decoration: none;
}

.pillar__brand a:hover {
  color: var(--accent);
}

.pillar__brand span {
  font-size: 0.7em;
  color: var(--ink-3);
}

.pillar__solution .tech-list {
  margin-block: var(--space-m) var(--space-s);
}

.pillar__note {
  font-size: var(--step--1);
  color: var(--ink-3);
}

.pillar__solution .link-arrow {
  margin-top: var(--space-m);
}

@media (min-width: 64rem) {
  .pillars__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .pillar {
    padding-right: var(--space-2xl);
  }

  .pillar + .pillar {
    padding-left: var(--space-2xl);
    padding-right: 0;
    border-left: 1px solid var(--line);
  }
}

/* /vision, /scholar 첫 화면 위의 기둥 라벨과 미션 */
.pillar-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-bottom: var(--space-l);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}

.pillar-line__label {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.pillar-line__mission {
  color: var(--ink-2);
}

.page-hero--dark .pillar-line {
  border-color: var(--forest-line);
}

.page-hero--dark .pillar-line__label {
  color: var(--forest-accent);
}

.page-hero--dark .pillar-line__mission {
  color: var(--forest-ink-2);
}

/* 새 소식: 첫 화면 아래쪽에 세 항목을 가로로 */
.news-list--wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line-strong);
}

@media (min-width: 48rem) {
  .news-list--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .news-list--wide li {
    border-top: 0;
    padding-right: var(--space-m);
  }

  .news-list--wide li + li {
    padding-left: var(--space-m);
    border-left: 1px solid var(--line);
  }
}

/* 휴대폰: 숲 그림을 키우고 씨앗에서 숲이 시작되는 왼쪽 부분을 보인다 */
@media (max-width: 47.99rem) {
  .hero__stage {
    overflow: hidden;
  }

  .hero__stage .sym {
    width: 230%;
    max-width: none;
    max-height: none;
  }
}

/* 두 기둥의 미션 줄과 솔루션 상자를 좌우로 맞춘다(같은 무게) */
@media (min-width: 64rem) {
  .pillars__grid {
    grid-template-rows: auto auto;
  }

  .pillar {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

/* ================================================================ 두 기둥 2판: 넓은 그림, 상자 전체 링크, 기술 카드 캐러셀 */

.pillar__art {
  aspect-ratio: 2 / 1;
  max-width: 600px;
}

.pillar__art .sym {
  width: 100%;
  height: 100%;
}

.pillar__art + .pillar__label {
  margin-top: var(--space-l);
}

/* 상자 전체가 링크: 솔루션 이름의 링크를 상자 크기로 펼치고, 따로 눌려야 하는 것(.raise)만 위로 올린다 */
.pillar__solution {
  position: relative;
  transition: border-color 0.15s ease;
}

.pillar__solution:hover {
  border-color: var(--accent);
}

.pillar__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pillar__link:focus-visible {
  outline: none;
}

.pillar__link:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.raise {
  position: relative;
  z-index: 2;
}

.pillar__cta {
  margin-top: var(--space-m);
}

/* 기술 카드 캐러셀 */
.carousel {
  margin-top: var(--space-m);
}

.carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.tech-card {
  margin: 0;
  background: var(--paper-raised);
  border: 1px solid var(--line);
}

.tech-card__art {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.tech-card__art > svg,
.tech-card__art > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tech-card figcaption {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-s) var(--space-m) var(--space-m);
}

.tech-card figcaption b {
  font-weight: 650;
}

.tech-card figcaption .status {
  justify-self: start;
  font-size: 0.75rem;
  color: var(--ink-3);
}

.tech-card figcaption > span:last-child {
  font-size: var(--step--1);
  color: var(--ink-2);
}

.carousel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
}

.carousel__pause {
  flex: none;
  white-space: nowrap;
}

.carousel__arrow,
.carousel__pause {
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
}

.carousel__arrow:hover,
.carousel__pause:hover {
  border-color: var(--ink-2);
}

.carousel__pause {
  margin-left: auto;
}

.carousel__dots {
  display: flex;
  gap: 0.15rem;
}

.carousel__dot {
  width: 1.75rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.carousel__dot::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin: auto;
  border-radius: 50%;
  border: 1.5px solid var(--ink-3);
}

.carousel__dot[aria-current="true"]::before {
  background: var(--accent);
  border-color: var(--accent);
}

/* 기둥 안의 캐러셀이 칸 폭을 밀어내지 않게(두 기둥 폭을 같게) */
.pillar,
.pillar__head,
.pillar__solution,
.carousel {
  min-width: 0;
}

@media (min-width: 64rem) {
  .pillar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 두 기둥 영역은 바탕색을 달리해 첫 화면 아래에서 바로 보이게 한다(내려가라는 글 대신) */
.pillars {
  background: var(--paper-band);
  border-top: 0;
}

.pillars .pillar__solution {
  background: var(--paper-raised);
}

.pillars .pillar + .pillar {
  border-left-color: var(--line-strong);
}

.hero--vision .hero__stage {
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* 1440×900 첫 화면에서 두 기둥 영역의 윗부분이 보이도록 히어로 높이를 맞춘다 */
.hero--vision {
  padding-top: clamp(2.5rem, 1.25rem + 4vw, 4.5rem);
}

.hero--vision .hero__stage {
  margin-top: clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem);
  margin-bottom: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
}

@media (min-width: 48rem) {
  .hero__stage .sym {
    max-height: 32vh;
  }
}

.pillars {
  padding-top: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}