:root {
    --bg-main: #FFF8E7;
    --bg-card: #FFFFFF;
    --text-main: #FFFFFF;
    --text-secondary: #6B6B6B;
    --accent-primary: #FF6B35;
    --accent-secondary: #F7931E;
    --border-main: #FFFFFF;
    --shadow: #FF6B35;
}

body {
    font-family: 'Courier New', Courier, monospace; 
    /*background-color: var(--bg-main);;*/
    color: var(--text-main);
    /* --text-main 변수의 값(#2B2B2B)을 텍스트 색상으로 사용합니다. */
    
    /*max-width: 900px; */
    
    margin: auto; 
    /* 좌우 margin을 auto로 설정하여 콘텐츠를 화면 중앙에 배치합니다. */
    
    /*padding: 20px; */
}

header {
    text-align: center;
    border-bottom: 2px solid var(--border-main);
    margin-bottom: 40px;
    padding-bottom: 20px;
}

h1 {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-main);
}

h2 {
    color: var(--text-main);
}

header img {
    max-width: 100%;
    width: 600px;
    height: auto; 
    display: block;
    margin: 0 auto 20px auto;
}

nav {
    text-align: center; 
    margin-bottom: 30px; 
    padding: 15px 0;
}

nav a {
    color: var(--text-main);
    text-decoration: none; 
    font-weight: bold; 
    padding: 0 10px;
}

nav a:hover {
    color: var(--accent-primary);
    /* 마우스를 올리면 강조 색상(주황색)으로 변합니다.
       var() 덕분에 모든 호버 색상을 한 번에 관리할 수 있습니다. */
    
    text-decoration: underline;
}

.grid-container {
    display: grid; 
    /* CSS Grid 레이아웃을 활성화합니다. 
       이것은 요소들을 격자 형태로 배치하는 강력한 도구입니다. */
    
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    /* 복잡해 보이지만 이해하면 간단합니다:
       - repeat(): 열(column)을 반복해서 만듭니다
       - auto-fill: 화면 크기에 맞춰 자동으로 열 개수를 조정합니다
       - minmax(300px, 1fr): 각 열은 최소 300px, 최대 1fr(남은 공간을 균등 분배)
       
       결과: 화면이 크면 여러 개의 카드가 나란히 보이고,
            화면이 작으면 카드가 세로로 쌓입니다. */
    
    gap: 40px; 
    /* 각 그리드 항목(카드) 사이의 간격을 40픽셀로 설정합니다. */
    
    margin-bottom: 50px; 
    /* 그리드 아래에 50px의 여백을 줍니다. */
}

.item-card {
    background: var(--bg-card);; 
    border: 1px solid var(--border-main);
    padding: 15px;
    box-shadow: 4px 4px 0px var(--shadow); 
    transition: transform 0.2s; 
}

.item-card:hover {
    transform: translateY(-5px); 
}

.item-card img {
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 0 auto 10px; 
    border: 1px solid var(--border-main);
}

.item-card h3 {
    margin: 10px 0; 
    font-size: 1.2em; 
    color: var(--text-main);
}

.item-card p {
    margin: 8px 0; 
    line-height: 1.5; 
    color: var(--text-main);
}

.author-credit {
    font-size: 0.85em; 
    margin-top: -10px; 
    margin-bottom: 15px; 
    font-style: italic; 
    color: var(--text-secondary);
}

.author-credit a {
    color: var(--text-main);
    text-decoration: none; 
    font-weight: bold; 
    transition: color 0.3s; 
}

.author-credit a:hover {
    color: var(--accent-primary);
    text-decoration: underline; 
}

.video-wrapper {
    position: relative; 
    /* 자식 요소(iframe)의 위치 기준점이 됩니다. */
    
    padding-bottom: 56.25%; 
    /* 이것이 마법입니다! 
       16:9 비율 = 9 ÷ 16 × 100 = 56.25%
       높이를 너비의 56.25%로 설정하여 16:9 비율을 유지합니다. */
    
    height: 0; 
    /* 높이를 0으로 설정합니다. 
       실제 높이는 padding-bottom으로 만들어집니다. */
    
    overflow: hidden; 
    /* 넘치는 내용을 숨깁니다. */
    
    margin-bottom: 15px; 
    /* 비디오 아래에 15px 여백을 줍니다. */
    
    background: var(--text-main);
    /* 비디오 로딩 중 배경을 메인 텍스트 색상(진한 회색)으로 설정 */
}

.video-wrapper iframe {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border: none; 
}

.button {
    display: inline-block;
    background: var(--accent-primary);
    color: white;
    padding: 10px 20px; 
    text-decoration: none; 
    font-weight: bold; 
    margin-top: 10px; 
    transition: background 0.3s;
    cursor: pointer; 
    /* 마우스를 올리면 손가락 모양 커서로 변합니다. */
}

.button:hover {
    background: var(--accent-secondary);
}

hr {
    border: none;
    border-top: 2px solid #FFFFFF; 
    /* 위쪽에만 2픽셀 두께의 실선을 만듭니다. */
    /* 구분선 색상을 변수로 지정
       테두리와 동일한 색상을 사용하여 통일감을 줍니다. */
    
    margin: 40px 0;
}

footer {
    margin-top: 50px; 
    padding-top: 20px; 
    text-align: center; 
    font-size: 0.9em; 
    border-top: 1px solid var(--border-main);
    color: var(--text-secondary);
}

footer a {
    color: var(--accent-primary);
    text-decoration: none; 
    transition: color 0.3s;

}

footer a:hover {
    color: var(--accent-secondary);
    text-decoration: underline; 
}

@media (max-width: 768px) {
    body {
        padding: 10px; 
    }
    
    .grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    header img {
        width: 100%; 
        max-width: 400px; 
    }
    
    h1 {
        font-size: 1.5em; 
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.2em; 
        letter-spacing: 1px;
    }
    
    .button {
        display: block; 
        width: 100%; 
        text-align: center; 
    }
}
.bg-container {
  background-image: url('https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXR2cHUxNTJmeGRpNGMzdjFuZTV3d3oxZGZpM2YzbGJsejltMDZqMCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/pj6kX3c8bRijBrl6yR/giphy.gif');
    background-repeat: repeat;
    background-size: 15% auto;
    background-position: center;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}