/* Base · reset · typography · layout primitives */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss06", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: clip;
}
:lang(ja) body { word-break: normal; line-break: strict; }
@supports (word-break: auto-phrase) { :lang(ja) body { word-break: auto-phrase; } }
img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: var(--tracking-heading); line-height: var(--lh-snug); text-wrap: balance; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.nw { white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Layout */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--wide { max-width: calc(1600px + var(--gutter) * 2); }
.section { padding-block: var(--section); position: relative; }
.section--sm { padding-block: var(--section-sm); }
.section--flush-top { padding-top: 0; }
.section--night { background: var(--night); color: #fff; }
.section--surface { background: var(--surface); }
.section--paper-2 { background: var(--paper-2); }
.stack > * + * { margin-top: var(--stack, 1rem); }

/* Type scale */
.t-display { font-size: var(--fs-display); line-height: 1.0; letter-spacing: var(--tracking-display); font-weight: 700; }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: 700; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: var(--tracking-heading); font-weight: 700; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 650; }
.t-h4 { font-size: var(--fs-h4); line-height: 1.4; font-weight: 650; letter-spacing: -0.015em; }
.t-lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--muted); letter-spacing: -0.01em; }
.section--night .t-lead, .on-dark .t-lead { color: rgb(255 255 255 / 0.68); }
.t-small { font-size: var(--fs-small); }
.t-caption { font-size: var(--fs-caption); color: var(--subtle); letter-spacing: 0.01em; }
.t-foot { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); line-height: 1.7; }
.t-muted { color: var(--muted); }
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand);
}
/* 한국어·일본어 문장은 대문자·넓은 자간을 쓰지 않는다 */
:lang(ko) .t-foot, :lang(ja) .t-foot { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: var(--fs-caption); }
.t-mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; opacity: 0.6; }
.section--night .eyebrow, .on-dark .eyebrow { color: #8fb6ff; }
.grad-text { background: var(--temp-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.br-desktop { display: none; }
@media (min-width: 900px) { .br-desktop { display: inline; } }

/* Section heading pattern */
.heading { display: grid; gap: var(--s-5); max-width: 860px; }
.heading--center { margin-inline: auto; text-align: center; justify-items: center; }
.heading--split { max-width: none; grid-template-columns: 1fr; align-items: end; gap: var(--s-6); }
@media (min-width: 960px) { .heading--split { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-16); } }
.heading .t-lead { max-width: 620px; margin: 0; }

/* Media */
.media { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--paper-2); isolation: isolate; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media--ratio-wide { aspect-ratio: 16 / 9; }
.media--ratio-photo { aspect-ratio: 3 / 2; }
.media--ratio-tall { aspect-ratio: 4 / 5; }
.media--ratio-square { aspect-ratio: 1; }

/* Reveal (JS가 켜졌을 때만 숨김 → JS가 없어도 내용은 보인다) */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(0.96); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--delay, 0s); }
.split-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-line > span { display: block; will-change: transform; }
.js [data-split] .split-line > span { transform: translate3d(0, 110%, 0); }
.js [data-split].is-in .split-line > span { transform: none; transition: transform 1.15s var(--ease-out); transition-delay: calc(var(--i, 0) * 0.09s + var(--delay, 0s)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-split] .split-line > span { opacity: 1 !important; transform: none !important; }
}

/* 페이지 전환: 공개 페이지는 일반 페이지 이동(채널톡 상담 창 유지 때문, lib/channel_talk.js)이라
   브라우저의 문서 간 전환을 켠다(크롬·사파리 최신판, 안 되는 브라우저는 그냥 이동) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 260ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }