/*
 * fx base — reset·타입 스케일·면 규칙·포커스 링·최소 글자 13px.
 * 리셋은 :where() 로 우선순위 0 — 외부 부품 클래스·부품 클래스를 덮지 않는다. [data-fx-surface] 가 있는 화면에서만 작동.
 */

/* ===== 면 (서버가 <html data-fx-surface="dark|light"> 를 출력, 구획은 같은 속성을 섹션에 붙여 뒤집는다) ===== */
[data-fx-surface]{
  --fx-bg:var(--fx-s0);
  --fx-bg-2:var(--fx-s1);
  --fx-card:var(--fx-s2);
  --fx-card-2:var(--fx-s3);
  --fx-fg:var(--fx-t1);
  --fx-fg-2:var(--fx-t2);
  --fx-fg-3:var(--fx-t3);
  --fx-edge:var(--fx-edge-ink);
  --fx-edge-strong:var(--fx-edge-ink-strong);
  --fx-tint:rgba(255,255,255,.035);
  --fx-ring:var(--fx-brand);
  --fx-on-brand:var(--fx-brand-ink);
  --fx-danger:var(--fx-alert);
  background:var(--fx-bg);
  color:var(--fx-fg);
}
[data-fx-surface="dark"]{color-scheme:dark}
[data-fx-surface="light"]{
  --fx-bg:var(--fx-paper);
  --fx-bg-2:var(--fx-paper-2);
  --fx-card:#fff;
  --fx-card-2:var(--fx-paper-2);
  --fx-fg:var(--fx-k1);
  --fx-fg-2:var(--fx-k2);
  --fx-fg-3:var(--fx-k3);
  --fx-edge:var(--fx-edge-paper);
  --fx-edge-strong:var(--fx-edge-paper-strong);
  --fx-tint:rgba(17,17,17,.04);
  --fx-ring:var(--fx-k1);
  --fx-danger:var(--fx-alert-paper);
  color-scheme:light;
}
/* 구획(섹션)에 붙이는 단계: 잉크 면 안에서 깊이를 만든다 */
[data-fx-surface="dark"] [data-fx-step="1"],[data-fx-surface="dark"][data-fx-step="1"]{--fx-bg:var(--fx-s1);--fx-card:var(--fx-s2);--fx-card-2:var(--fx-s3)}
[data-fx-surface="dark"] [data-fx-step="2"],[data-fx-surface="dark"][data-fx-step="2"]{--fx-bg:var(--fx-s2);--fx-card:var(--fx-s1);--fx-card-2:var(--fx-s3)}
[data-fx-surface="dark"] [data-fx-step="3"],[data-fx-surface="dark"][data-fx-step="3"]{--fx-bg:var(--fx-s3);--fx-card:var(--fx-s2);--fx-card-2:var(--fx-s1)}

/* ===== Reset (우선순위 0) ===== */
:where([data-fx-surface]) :where(*,*::before,*::after){box-sizing:border-box}
:where([data-fx-surface]) :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,button,input,textarea,select){margin:0;padding:0}
:where([data-fx-surface]) :where(ul,ol){list-style:none}
:where([data-fx-surface]) :where(img,svg,video){max-width:100%;display:block}
:where([data-fx-surface]) :where(a){color:inherit;text-decoration:none}
:where([data-fx-surface]) :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where([data-fx-surface]) :where(input,textarea,select){font:inherit;color:inherit}

html[data-fx-surface]{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
html[data-fx-surface] body{
  margin:0;
  background:var(--fx-bg);
  color:var(--fx-fg);
  font-family:var(--fx-face);
  font-size:var(--fx-size-body);
  line-height:1.7;
  word-break:keep-all;
  overflow-wrap:break-word;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* ===== 타입 스케일 (제목은 대비를 크게, 본문은 17px 이상) ===== */
.fx-display,.fx-h2,.fx-h3{font-weight:700;letter-spacing:-.025em;word-break:keep-all}
.fx-display{font-size:var(--fx-size-display);line-height:1.1;letter-spacing:-.03em}
.fx-h2{font-size:var(--fx-size-h2);line-height:1.2}
.fx-h3{font-size:var(--fx-size-h3);line-height:1.3}
.fx-lead{font-size:var(--fx-size-lead);line-height:1.7;color:var(--fx-fg-2)}
.fx-body{font-size:var(--fx-size-body);line-height:1.7}
.fx-note{font-size:var(--fx-size-small);line-height:1.6;color:var(--fx-fg-3)}
.fx-note a{display:inline-block;padding:14px 4px;margin:-14px -4px;color:var(--fx-fg-2);text-decoration:underline;text-underline-offset:3px}
.fx-note a:hover{color:var(--fx-fg)}
.fx-tnum{font-variant-numeric:tabular-nums}
/* 라임은 어두운 면 위 글자색으로만 — 라이트 면에서는 쓰지 않는다 */
[data-fx-surface="dark"] .fx-brand-text{color:var(--fx-brand)}
[data-fx-surface="light"] .fx-brand-text{color:inherit;text-decoration:underline;text-decoration-color:var(--fx-brand-deep);text-decoration-thickness:.12em;text-underline-offset:.14em}

/* 최소 글자 13px — 작은 글자 태그도 13 밑으로 내려가지 않는다 */
:where([data-fx-surface]) :where(small,figcaption,sub,sup,caption,legend){font-size:max(var(--fx-size-min),.875em)}

/* ===== 포커스 링 — 제거 금지 ===== */
[data-fx-surface] :focus-visible{outline:2px solid var(--fx-ring);outline-offset:3px;border-radius:4px}
[data-fx-surface] :focus:not(:focus-visible){outline:0}

/* ===== 접근성 보조 ===== */
.fx-sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fx-skip{position:absolute;left:16px;top:-80px;z-index:200;background:var(--fx-brand);color:var(--fx-brand-ink);padding:12px 18px;border-radius:var(--fx-radius-s);font-weight:700}
.fx-skip:focus{top:12px}

@media (prefers-reduced-motion:reduce){
  html[data-fx-surface]{scroll-behavior:auto}
}