@charset "utf-8";

/* =============================================================================
   공통 셸 — 리셋, GNB, 푸터
   색·타이포는 디자인 시스템(foundations.css / components.css)의 `--ka-*` 토큰과
   `.ka-typo--*` 유틸리티를 따른다. 타이포는 마크업에서 클래스로 붙이므로 이 파일에는
   대응 클래스가 없는 값(시안 전용 크기/굵기)만 남긴다.
   페이지 본문 스타일은 각 페이지 CSS 에 둔다.
   ========================================================================== */

:root {
    /* 디자인 시스템에 대응 토큰이 없는 값만 셸 변수로 둔다 */
    --shell-footer-surface: #111;
    /* 푸터 전용 배경 (gray-1000 보다 어두움) */
    /* 어두운 배경 위 2차 텍스트(#EAEAEA). text 그룹에 같은 값이 없다 —
       --ka-text-white 는 #FFFFFF, 그다음이 --ka-text-disabled #C1C1C1 이라
       시안 톤을 유지하려면 원시 팔레트를 쓸 수밖에 없다. */
    --shell-footer-text: var(--ka-color-gray-200);

    /* 폰트 패밀리 — 디자인 시스템에 토큰이 없어 셸에서 선언한다 */
    --ka-typo-font-family-default: "Pretendard", "Pretendard Variable", system-ui, sans-serif;
    --ka-typo-font-family-en: "Montserrat";
}

/* ---- 기본 ---------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

body {
    /* 모바일 시안이 나오기 전이라도 폭이 줄면 레이아웃이 같이 줄어야 한다.
       예전 값(1920px)은 뷰포트가 좁아져도 축소를 막아 가로 스크롤만 만들었다.
       How To 세 화면의 축소 규칙은 css/howto/ka.howto.css 의 `④ 반응형` 에 있다. */
    /* min-width: 320px; */
    margin: 0;
    background: var(--ka-surface-white);
    color: var(--ka-text-default);
    font-family: var(--ka-typo-font-family-default);
}

/* 디자인 시스템 스코프 진입점.
   이 클래스가 붙은 서브트리는 레거시 ka.reset.css 의 `.windows` 타이포 보정에서
   제외된다(그쪽 셀렉터의 `:where(:not(.ka-ds *))`). 레거시 화면 중간에 부분
   이식해도 부모의 폰트를 물려받지 않도록 기준값을 여기서 다시 잡는다.
   페이지 전체 전환이든 섹션·모달 하나든 붙이는 단위는 자유다. */
.ka-ds {
    font-family: var(--ka-typo-font-family-default);
    font-size: 15px;
    line-height: 23px;
    letter-spacing: -0.12px;
    color: var(--ka-text-default);
}

h1,
h2,
h3,
p,
ul,
ol,
li,
figure {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img {
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--ka-text-default);
}

button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--ka-border-primary);
    outline-offset: 3px;
}