@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,600,600italic");

/* base.css - 변수 정의, 리셋, 타이포그래피 */

:root {
    /* --- [테마 색상 변수] --- */

    /* 1. 브랜드 컬러 (강조색) */
    --color-primary: #FFA500;       /* 기존 --point-color */
    --color-primary-hover: #FFC04C; /* 기존 --point-hover-color */
    --color-primary-light: #FFD17E; /* 기존 --point-hover-color2 */

    /* 2. 배경색 */
    --bg-page: #f7f7f7;             /* 전체 페이지 배경 (기존 --almost-white) */
    --bg-element: #ffffff;          /* 카드, 박스, 팝업 배경 (기존 --pure-white) */
    --bg-element-alt: #f0f0f0;      /* 입력창, 버튼(Alt), 옅은 회색 배경 */
    --bg-header: #ffffff;           /* 헤더 배경 */
    --bg-nav: #333333;              /* 네비게이션바 배경 */
    --bg-footer: transparent;

    /* 3. 텍스트 색상 */
    --text-main: #474747;           /* 기본 본문 (기존 --font-color_default) */
    --text-sub: #999999;            /* 날짜, 부가설명, 플레이스홀더 */
    --text-invert: #ffffff;         /* 어두운 배경 위 텍스트 (버튼 등) */
    --text-nav: #c0c0c0;            /* 네비게이션 링크 색상 */

    /* 4. 테두리 및 라인 */
    --border-color: #e0e0e0;        /* 기본 테두리 색상 */
    --border-focus: #FFA500;        /* 입력창 포커스 시 색상 */

    /* 5. 버튼 색상 */
    --btn-alt-bg: #555555;          /* 보조 버튼 배경 */
    --btn-alt-hover: #626262;       /* 보조 버튼 호버 */
    --btn-danger: #ff5c5c;          /* 삭제/위험 버튼 */

    /* 6. 기타 */
    --shadow-default: 0 4px 10px rgba(0,0,0,0.08); /* 기본 그림자 */
    --bg-image-pattern: url("images/bg01.png");    /* 배경 패턴 이미지 */

    /* 폰트 설정 */
    --font-main: 'Source Sans Pro', sans-serif;
}

/* [다크 모드 예시 - 나중에 활성화 시 이 값들이 덮어씌워짐] */
[data-theme="dark"] {
    --color-primary: #FFB74D;
    --color-primary-hover: #FFD180;
    --bg-page: #121212;
    --bg-element: #1E1E1E;
    --bg-element-alt: #2C2C2C;
    --bg-header: #1E1E1E;
    --bg-nav: #000000;
    --text-main: #E0E0E0;
    --text-sub: #A0A0A0;
    --text-invert: #121212;
    --border-color: #333333;
    --bg-image-pattern: none; /* 다크모드에선 패턴 제거 추천 */
}

/* --- Reset & Basic Styles --- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, 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 {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; -webkit-text-size-adjust: none; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
mark { background-color: transparent; color: inherit; }
input::-moz-focus-inner { border: 0; padding: 0; }
input, select, textarea { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; }

/* Global Settings */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
    background: var(--bg-page) var(--bg-image-pattern);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 16pt;
    font-weight: 300;
    line-height: 1.65em;
}

/* Mobile Text Overflow Fix */
body, p, h1, h2, h3, h4, h5, h6, li, span, div {
    overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;
}

body.is-preload *, body.is-preload *:before, body.is-preload *:after {
    animation: none !important; transition: none !important;
}

/* Typography */
a {
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    color: var(--color-primary); text-decoration: none; border-bottom: dotted 1px;
    -webkit-tap-highlight-color: transparent;
}
a:hover { color: var(--color-primary); border-bottom-color: transparent; }
strong, b { font-weight: 600; }
em, i { font-style: italic; }
p, ul, ol, dl, table, blockquote { margin: 0 0 2em 0; }
h1, h2, h3, h4, h5, h6 { color: inherit; font-weight: 600; line-height: 1.75em; margin-bottom: 1em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; }
h2 { font-size: 1.75em; letter-spacing: -0.025em; }
h3 { font-size: 1.2em; letter-spacing: -0.025em; }
hr { border-top: solid 1px var(--border-color); border: 0; margin-bottom: 1.5em; }
blockquote { border-left: solid 0.5em var(--border-color); font-style: italic; padding: 1em 0 1em 2em; }

/* Utilities */
.hidden { display: none !important; }
.ellipsis { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0.2em 0.2em; }

/* Responsive Fonts */
@media screen and (max-width: 1680px) { body, input, select, textarea { font-size: 14pt; line-height: 1.5em; } }
@media screen and (max-width: 1280px) { body, input, select, textarea { font-size: 13pt; line-height: 1.5em; } }
@media screen and (max-width: 980px) { body, input, select, textarea { font-size: 12pt; line-height: 1.5em; } }
@media screen and (max-width: 736px) {
    body, input, select, textarea { font-size: 11pt; line-height: 1.35em; }
    h2 { font-size: 1.25em; letter-spacing: 0; line-height: 1.35em; }
    h3 { font-size: 1em; letter-spacing: 0; line-height: 1.35em; }
}