@charset "utf-8";
/* Maker : H.J Jeon // E-Mail : jinia21@naver.com */

@import "./basic-setting.css";

/* ------------------------------------------------------------
   base.css — 리셋 · 기본값만
   브라우저 기본 모양을 지우고 글꼴 · 색 기본값을 정함

   여백 · 폭 · 위치 · 글자 크기 같은 유틸리티 클래스는 두지 않음
   - 모두 !important 라 부품 · 섹션 CSS 를 덮어써 고치기 어려움
   - 작업은 토큰 + 부품 클래스 + 섹션 CSS 로 함
   - 예전 유틸리티는 ~/_kit/extras/utilities.css 에 보관
     (기본 틀은 안 불러옴)
   화면 스타일은 common.css(공용) · main.css · sub.css 에 이름 붙여 씀
------------------------------------------------------------ */


/* CSS RESET */
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, strike, strong, sub, tt, var, b, u, center, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button,
ul, ol, li, dl, dt, dd {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/* 목록 점은 부품이 필요할 때만 그림 (.notice 등) */
ul, ol { list-style: none; }

body { line-height: 1; }
*, *::before, *::after { box-sizing: border-box; }

/* hidden 속성은 부품의 display 보다 먼저 */
[hidden] { display: none !important; }

/* 화면에는 안 보이고 화면 낭독기만 읽음 */
legend, .sound-only, .skip, .none, table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: none; }

table { table-layout: auto; width: 100%; border-collapse: collapse; border-spacing: 0; }
table th, table td { vertical-align: middle; }
table.table-fixed { table-layout: fixed; }

/* 이미지 아래 틈을 없애고 칸을 넘지 않게 */
img, svg, video, canvas { max-width: 100%; vertical-align: middle; }


/* Input, Select, Textarea */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], textarea, select {
    background-color: var(--color-surface);
    -webkit-appearance: none;
    appearance: none;
}

input::placeholder,
textarea::placeholder { color: var(--color-text-weak); font-weight: var(--font-weight-regular); font-size: 100%; opacity: 1; }


/* Base Setting */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; font-size: 100%; }
body, textarea, select, td, th, input, button { font: 1rem/1.5 var(--font-basic), "Apple SD Gothic Neo", "Malgun Gothic"; color: var(--color-text); }
b, strong { font-weight: var(--font-weight-bold); }
b.semi, strong.semi { font-weight: var(--font-weight-semibold); }


/* Link & Button */
a { color: inherit; text-decoration: none; }
button { background: none; cursor: pointer; }
button:disabled { cursor: default; }

/* 키보드로 움직일 때만 초점 테두리. 부품이 따로 정하면 그쪽이 이김 */
:focus-visible { outline: 2px solid var(--focus-color, var(--color-point)); outline-offset: 2px; }


/* 말줄임 — 한 줄 / 여러 줄 */
.oneline { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; }
.line-cut { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; }
.line-cut.line-cut-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-cut.line-cut-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.line-cut.line-cut-4 { -webkit-line-clamp: 4; line-clamp: 4; }
.line-cut.line-cut-5 { -webkit-line-clamp: 5; line-clamp: 5; }
.line-cut.line-cut-7 { -webkit-line-clamp: 7; line-clamp: 7; }
.line-cut.line-cut-10 { -webkit-line-clamp: 10; line-clamp: 10; }


/* 움직임 줄이기를 켠 기기 — 애니메이션 · 전환을 끔 */
@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;
    }
}