/* === 전체 레이아웃 기반 === */
* {
    box-sizing: border-box;
}

body {
    background-color: aliceblue;
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 30px;
    font-family: "맑은 고딕", "Malgun Gothic", sans-serif;
    color: #222;
}

/* === h1 : 갈색 글자, 가운데 정렬 === */
h1 {
    color: brown;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(139, 69, 19, 0.3);
    padding: 10px 0;
}

/* === h2 : 파란 글자, 텍스트 그림자 === */
h2 {
    color: blue;
    text-shadow: 1px 1px 3px skyblue;
    border-left: 5px solid blue;
    padding-left: 10px;
    margin-top: 0;
}

/* === h3 === */
h3 {
    color: steelblue;
}

/* === header : 아래쪽만 1픽셀 직선 테두리 === */
header {
    border-bottom: 1px solid #999999;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* ================================================
   CSS3 핵심 배치 : #main-layout
   nav(좌, 고정폭 220px) + section(우, 나머지)을
   display:flex 로 나란히 배치
   ================================================ */
#main-layout {
    display: flex;
    gap: 22px;
    align-items: flex-start;   /* 각 컬럼이 내용 높이만큼만 */
}

/* === nav : 왼쪽 고정 컬럼 === */
nav {
    flex: 0 0 210px;           /* 너비 고정 */
    background-color: #dce9f5;
    padding: 15px 18px;
    border-radius: 8px;
    position: sticky;          /* position:sticky — 스크롤 시 고정 */
    top: 20px;
}

/* === section : 오른쪽 가변 컬럼 === */
section {
    flex: 1;                   /* 남은 공간 전부 */
    min-width: 0;
    margin-bottom: 20px;
}

/* === ul : 1픽셀 점선 테두리 === */
ul {
    border: 1px dotted #5588bb;
    padding: 10px 10px 10px 30px;
    margin: 5px 0;
    border-radius: 4px;
}

li {
    margin: 5px 0;
    line-height: 1.7;
}

/* === a : 밑줄 없애기 === */
a {
    text-decoration: none;
    color: #1a4a8a;
}

a:hover {
    color: #2980b9;
    text-decoration: underline;
}

a:visited {
    color: #6c3483;
}

/* === p : font-size 1em, 들여쓰기 1em === */
p {
    font-size: 1em;
    text-indent: 1em;
    line-height: 1.85;
}

/* === article === */
article {
    background-color: white;
    border: 1px solid #c0d8ee;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 6px rgba(0, 0, 100, 0.07);
}

/* === aside : section 아래 전체 폭으로 배치 === */
aside {
    background-color: #fffbe6;
    border: 1px solid #f0c040;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
    /* display:block 기본값 → 2단 레이아웃 아래 자연스럽게 위치 */
}

/* === table === */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
    font-size: 0.95em;
}

caption {
    font-weight: bold;
    margin-bottom: 6px;
    color: #333;
}

th {
    background-color: #2e6da4;
    color: white;
    padding: 9px 13px;
    border: 1px solid #1a4a8a;
}

td {
    padding: 8px 13px;
    border: 1px solid #aec8e0;
    vertical-align: top;
}

tr:nth-child(even) {
    background-color: #eaf2fb;
}

tr:hover {
    background-color: #d0e8f8;
}

tfoot th {
    background-color: #d0d8e0;
    color: #333;
}

/* === img === */
img {
    border: 3px solid #aec8e0;
    border-radius: 6px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
    max-width: 100%;
}

figure {
    text-align: center;
    margin: 10px;
}

figcaption {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
}

/* === iframe === */
iframe {
    border: 2px solid #2e6da4;
    border-radius: 6px;
    max-width: 100%;
}

/* === audio === */
audio {
    display: block;
    margin: 10px 0;
}

/* === footer : orange 배경, 둥근 모서리 테두리 === */
footer {
    background-color: orange;
    border-radius: 15px;
    padding: 15px 25px;
    margin-top: 10px;
    text-align: center;
    color: white;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    /* float 해제 불필요 — flex 컨테이너 바깥에 위치 */
}

footer p {
    color: white;
    margin: 5px 0;
    text-indent: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

footer h2 {
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    border-left: 5px solid white;
}

footer a {
    color: white;
    font-weight: bold;
}

footer a:visited {
    color: #ffe0a0;
}

footer ul {
    border: 1px dotted white;
    text-align: left;
    display: inline-block;
}