/* css/common.css */
:root {
    /* 사용자 제공 변수 */
    --primary-color: #1a5f7a;        /* 주요 테마 색상 (짙은 청록색 계열) */
    --secondary-color: #6c757d;      /* 보조 색상 (회색 계열) */
    --light-grey: #f8f9fa;          /* 밝은 회색 (배경 등) */
    --dark-grey: #212529;           /* 어두운 회색 (기본 텍스트 등) */
    --accent-color: #00838f;         /* 강조 색상 (청록색 계열) */
    --toc-width: 125px;             /* 목차 너비 */

    /* 추가된 일관성 위한 색상 변수 */
    --body-bg-color: #eef1f5;       /* 전체 페이지 배경 */
    --container-bg-color: #ffffff;  /* 주 콘텐츠 영역 배경 */
    --container-shadow-color: rgba(0, 0, 0, 0.07); /* 컨테이너 그림자 */

    --cover-text-color: white;
    --cover-text-shadow-color: rgba(0,0,0,0.3);
    --cover-subtitle-color: rgba(255,255,255,0.9);
    --cover-meta-color: rgba(255,255,255,0.8);
    --cover-scroll-border-color: white;

    --h1-main-title-color: var(--dark-grey);
    --h1-main-border-color: #57c5b6; /* 사용자 지정 유지 (연한 민트색 계열) */
    --h2-border-color: #dee2e6;      /* 섹션 제목 하단선 */
    --h4-color: #28a745;             /* h4 제목 색상 (녹색 계열) */

    --pre-bg-color: #f1f3f5;         /* 코드 블록 배경 */
    --pre-border-color: #ced4da;     /* 코드 블록 테두리 */
    --pre-border-left-color: var(--primary-color); /* 코드 블록 왼쪽 강조선 */
    --code-example-pre-bg: var(--light-grey);
    --code-example-pre-border-left: var(--accent-color);
    --output-example-pre-bg: var(--light-grey);
    --output-example-pre-border-left: var(--secondary-color);
    --output-example-text-color: #495057;

    --function-block-bg: #fdfdfd;
    --function-block-border: #e0e0e0;
    --function-block-shadow: rgba(0,0,0,0.06);

    --overview-chapter-bg: var(--light-grey);
    --overview-chapter-border: #e9ecef;
    --overview-chapter-border-left: var(--accent-color);
    --overview-link-hover-color: var(--primary-color);

    --toc-bg-color: rgba(255, 255, 255, 0.65);
    --toc-border-color: #d1d8e0;
    --toc-shadow-color: rgba(0, 0, 0, 0.15);
    --toc-link-color: var(--secondary-color);
    --toc-link-hover-bg: #e9ecef;
    --toc-link-hover-color: var(--primary-color);
    --toc-link-active-color: var(--primary-color);
    --toc-link-active-bg: #e7f1ff;
    --toc-link-active-border: var(--primary-color);
    --toc-scrollbar-track-bg: rgba(230,230,230,0.5);
    --toc-scrollbar-thumb-bg: #adb5bd;
    --toc-scrollbar-thumb-hover-bg: #868e96;

    --exercise-details-bg: #f1f3f5;
    --exercise-details-border: #ced4da;
    --exercise-summary-color: #00695c;
    --exercise-summary-hover-color: var(--primary-color);
    --exercise-solution-pre-bg: #e6fffa;
    --exercise-solution-pre-border: #00796b;

    --footer-border-color: #ced4da;
    --footer-text-color: var(--secondary-color);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.8;
    margin: 0px;
    padding: 0px;
    background-color: var(--body-bg-color);
    color: var(--dark-grey);
    width: 100%;
    box-sizing: border-box;
}