/* 웹페이지의 모든 요소(태그)에 적용되는 기본 규칙입니다. */
* {
    /* 여백을 0으로 만들어 브라우저의 잡다한 기본 여백을 없앱니다. */
    margin: 0;
    /* 안쪽 여백도 0으로 만듭니다. */
    padding: 0;
    /* 테두리와 안쪽 여백을 포함해서 상자 크기를 계산하도록 합니다. (크기를 조절하기 훨씬 쉬워집니다) */
    box-sizing: border-box;
    /* 글씨체를 구글에서 가져온 'Noto Sans KR'로 설정합니다. 만약 폰트 로드에 실패하면 기본 돋움체(sans-serif)를 씁니다. */
    font-family: 'Noto Sans KR', sans-serif;
}

/* 화면 전체의 배경과 뼈대를 설정하는 body 태그 규칙입니다. */
body {
    /* 배경을 어두운 남색에서 푸른빛 보라색으로 대각선(135deg)으로 부드럽게 변하는 예쁜 그라데이션으로 칠합니다. */
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    /* 기본 글씨 색상을 하얀색(#ffffff)으로 만듭니다. */
    color: #ffffff;
    /* 화면의 최소 높이를 사용자가 보는 화면 전체 높이(100vh)로 꽉 채웁니다. */
    min-height: 100vh;
    /* 안의 내용들을 예쁘게 정렬하기 위해 플렉스(flex)라는 마법의 배치 방식을 씁니다. */
    display: flex;
    /* 내용들을 수직 방향(위아래)으로 하나씩 배치되게 만듭니다. */
    flex-direction: column;
    /* 내용들을 화면 정가운데로 예쁘게 모읍니다. */
    align-items: center;
    /* 위아래로 50픽셀, 양옆으로 20픽셀의 안쪽 여백을 줘서 숨통을 틔워줍니다. */
    padding: 50px 20px;
}

/* 모든 내용물(제목, 입력칸, 카드 등)을 감싸주는 가장 큰 뼈대 상자입니다. */
.container {
    /* 상자가 너무 끝없이 넓어지는 것을 막기 위해 최대 넓이를 800픽셀로 딱 제한합니다. */
    max-width: 800px;
    /* 넓이는 기본적으로 화면 크기에 꽉 차게 100%로 설정합니다. (핸드폰에서 보기 좋습니다) */
    width: 100%;
}

/* 머리말(제목과 설명이 있는 윗부분)을 꾸미는 규칙입니다. */
header {
    /* 글씨들을 가운데로 예쁘게 정렬합니다. */
    text-align: center;
    /* 아래쪽에 여백을 40픽셀 줘서 입력창이랑 공간을 조금 띄웁니다. */
    margin-bottom: 40px;
}

/* 가장 크고 화려한 메인 제목(h1)을 꾸미는 규칙입니다. */
header h1 {
    /* 글씨 크기를 기본 크기의 3.5배(3.5rem)로 아주 크게 만듭니다. */
    font-size: 3.5rem;
    /* 아래쪽 여백을 조금(10픽셀) 줘서 설명 글씨와 살짝 띱니다. */
    margin-bottom: 10px;
    /* 글씨 색상 대신 반짝이는 듯한 네온 민트색 파노라마(그라데이션)를 배경으로 입힙니다. */
    background: linear-gradient(to right, #00f2fe, #4facfe);
    /* 신기한 마법! 배경색을 글씨 모양에 맞춰서 오려냅니다. (글씨 안에 색이 칠해진 효과) */
    -webkit-background-clip: text;
    /* 원래 있던 글씨 색깔을 투명하게 만들어서 방금 입힌 배경 그라데이션이 보이게 합니다. */
    -webkit-text-fill-color: transparent;
    /* 글씨 뒤에 은은한 옥색 그림자를 넣어서 빔을 쏘는 듯한 입체감을 줍니다. */
    text-shadow: 0px 5px 15px rgba(0, 242, 254, 0.3);
}

/* 제목 바로 아래에 있는 부제목 설명 글(p)을 꾸미는 규칙입니다. */
header p {
    /* 글씨 크기를 기본보다 조금 큰 1.2배(1.2rem)로 조절합니다. */
    font-size: 1.2rem;
    /* 글씨 색상을 약간 서늘하고 밝은 회파란색(#b0c4de)으로 바꿉니다. */
    color: #b0c4de;
}

/* 글씨를 적는 칸과 버튼을 하나로 묶어둔 상자의 규칙입니다. */
.input-section {
    /* 이 상자 안의 요소들(입력칸과 버튼)을 가로로 나란히 두기 위해 플렉스(flex)를 씁니다. */
    display: flex;
    /* 입력칸과 버튼 사이의 간격을 15픽셀 줍니다. */
    gap: 15px;
    /* 아래쪽에 40픽셀 여백을 둬서 카드들이 놓일 곳과 멀리 떨어뜨립니다. */
    margin-bottom: 40px;
}

/* 사용자가 글씨를 실제로 입력하는 빈 칸(input)을 꾸밉니다. */
input {
    /* 남는 공간을 모두 이 입력칸이 차지하도록 유연하게 늘려줍니다(flex: 1). */
    flex: 1;
    /* 위아래로 15픽셀, 양옆으로 20픽셀 안쪽 여백을 줘서 뚱뚱하게(쓰기 쉽게) 만듭니다. */
    padding: 15px 20px;
    /* 글씨 크기를 사람이 보기 적당한 1rem으로 설정합니다. */
    font-size: 1rem;
    /* 촌스러운 기본 까만 테두리를 없애버립니다. */
    border: none;
    /* 모서리를 둥글둥글하게 30픽셀만큼 깎아줍니다. */
    border-radius: 30px;
    /* 배경을 아주아주 옅고 반투명한 하얀색으로 칠합니다. (마치 유리구슬 같은 느낌을 냅니다) */
    background: rgba(255, 255, 255, 0.1);
    /* 입력칸 안에 쓰여진 글씨의 색상을 순백색으로 만듭니다. */
    color: white;
    /* 입력칸 바깥으로 옅은 검은색 그림자를 만들어 입체감을 더합니다. */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* 입력칸을 클릭했을 때 기본적으로 생기는 못생긴 외곽선을 안 보이게 합니다. */
    outline: none;
    /* 모양이나 색이 바뀔 때 0.3초 동안 부드럽게 쓰윽- 하고 변하도록 애니메이션을 세팅합니다. */
    transition: all 0.3s ease;
}

/* 입력칸 안에 연하게 적혀있는 안내문구(placeholder)를 꾸밉니다. */
input::placeholder {
    /* 글씨 색상을 반투명한 흰색으로 만들어서 희미하게 보이게 합니다. */
    color: rgba(255, 255, 255, 0.5);
}

/* 마우스로 클릭해서 이 입력칸을 실제로 사용중일 때(focus)의 모습을 꾸밉니다. */
input:focus {
    /* 투명도를 아까보다 낮춰서(0.2) 입력칸 배경을 조금 더 밝게 눈에 띄게 해줍니다. */
    background: rgba(255, 255, 255, 0.2);
    /* 민트색(0, 242, 254)의 부드러운 빛을 뿜는 것처럼 그림자 색을 바꿉니다. */
    box-shadow: 0 4px 20px rgba(0, 242, 254, 0.3);
}

/* 퀘스트를 만들어내는 중요한 버튼(button)을 멋지게 꾸밉니다. */
button {
    /* 위아래 15픽셀, 양옆 30픽셀의 여백을 줘서 버튼을 넓적하고 누르기 좋게 만듭니다. */
    padding: 15px 30px;
    /* 글씨 크기를 1rem으로 지정합니다. */
    font-size: 1rem;
    /* 글씨를 두껍고(bold) 힘차게 만듭니다. */
    font-weight: bold;
    /* 글씨 색깔은 하얀색을 씁니다. */
    color: white;
    /* 촌스러운 회색 테두리를 완전히 없앱니다. */
    border: none;
    /* 입력칸처럼 모서리를 30픽셀 둥글게 깎아서 조화를 이룹니다. */
    border-radius: 30px;
    /* 진한 파랑에서 민트색으로 왼쪽에서 오른쪽으로 흐르는 그라데이션으로 멋지게 칠합니다. */
    background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    /* 마우스를 위에 올렸을 때 누를 수 있다는 표시로 커서를 손가락(pointer) 모양으로 바꿉니다. */
    cursor: pointer;
    /* 버튼 밖으로 민트색 그림자를 쏴서 떠있는 느낌을 줍니다. */
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.4);
    /* 마우스를 올리거나 내릴 때 위치(transform)와 그림자(box-shadow)가 0.2초에 걸쳐 부드럽게 변하게 합니다. */
    transition: transform 0.2s, box-shadow 0.2s;
}

/* 마우스를 버튼 위에 살포시 올려놓았을 때(hover)의 모습을 꾸밉니다. */
button:hover {
    /* 버튼이 공중으로 살짝(-3픽셀) 위로 둥실 떠오르는 효과를 줍니다! 진짜 게임 버튼 같아요. */
    transform: translateY(-3px);
    /* 떠오른 만큼 그림자를 더 크고 강하게 만들어서 사실감을 더합니다. */
    box-shadow: 0 8px 25px rgba(0, 242, 254, 0.6);
}

/* 마우스로 버튼을 꾹 누르고 있을 때(active)의 모습을 꾸밉니다. */
button:active {
    /* 떠오르던 버튼이 꾹 눌리면서 원래 자리에서 1픽셀 정도 아래로 쏙 들어갑니다. (타격감 상승) */
    transform: translateY(1px);
}

/* 버튼을 잠시 누르지 못하게 껐을 때(비활성화)의 모양입니다. */
button:disabled {
    /* 배경을 칙칙한 단색 회색으로 만들어버립니다. */
    background: #555;
    /* 그림자도 아예 없애버립니다. */
    box-shadow: none;
    /* 마우스 커서를 올렸을 때 금지 모양(not-allowed)이 뜨게 합니다. */
    cursor: not-allowed;
    /* 더 이상 위로 떠오르는 효과가 안 생기게 원래 위치로 고정합니다. */
    transform: none;
}

/* 빙글빙글 도는 로딩 화면 상자의 규칙입니다. */
#loading {
    /* 안의 글씨와 로딩 아이콘을 정렬하기 위해 플렉스를 씁니다. */
    display: flex;
    /* 둘을 위 아래(세로)로 배치합니다. */
    flex-direction: column;
    /* 세로로 배치된 뒤, 화면 가운데로 예쁘게 모읍니다. */
    align-items: center;
    /* 윗쪽과의 간격을 30픽셀 냅니다. */
    margin-top: 30px;
}

/* 어떤 것을 화면에서 아예 안 보이게 숨기고 싶을 때 쓰는 마법의 이름표(클래스)입니다. */
.hidden {
    /* display 속성을 none으로 꺼버려서 투명인간으로 만들고 화면 공간도 뺏어갑니다! (!important로 제일 쎄게 적용해요) */
    display: none !important;
}

/* 빙글빙글 돌아가는 로딩 애니메이션 동그라미입니다. */
.spinner {
    /* 너비를 50픽셀 크기로 정합니다. */
    width: 50px;
    /* 높이도 똑같이 50픽셀로 정해 정사각형을 만듭니다. */
    height: 50px;
    /* 두께 5픽셀의 반투명한 흰색 테두리를 두릅니다. */
    border: 5px solid rgba(255, 255, 255, 0.3);
    /* 마술 타임! 윗부분 테두리(border-top)만 아주 밝은 민트색으로 칠합니다. */
    border-top: 5px solid #00f2fe;
    /* 직사각형의 모서리들을 완전히 깎아서(50%) 완벽한 동그라미로 만듭니다. */
    border-radius: 50%;
    /* 아래 글씨와의 공간을 15픽셀 띄웁니다. */
    margin-bottom: 15px;
    /* spin 이라는 이름의 애니메이션을 1초 간격으로 일정한 속도(linear)로, 영원히(infinite) 반복시킵니다. */
    animation: spin 1s linear infinite;
}

/* 방금 설정한 'spin' 애니메이션이 어떤 동작을 할지 정확히 알려줍니다. */
@keyframes spin {
    /* 시작할 때(0%)는 각도가 0도입니다. */
    0% { transform: rotate(0deg); }
    /* 끝날 때(100%)는 360도로 팽이처럼 한 바퀴를 돕니다. 이게 1초에 한 번씩 반복됩니다. */
    100% { transform: rotate(360deg); }
}

/* 반짝이는 퀘스트 카드들이 나란히 놓일 큰 틀(바둑판)의 규칙입니다. */
.quest-container {
    /* 카드들을 바둑판(grid) 모양으로 가지런히 배치한다고 선언합니다. */
    display: grid;
    /* 매우 신기한 최신 기술! 화면 크기에 따라 알아서 카드 한 줄 개수를 조절해줍니다! (카드는 최소 250px, 남으면 1fr비율로 커짐) */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* 카드와 카드 사이의 좌우상하 거리를 20픽셀로 띄웁니다. */
    gap: 20px;
}

/* 결과로 나오는 퀘스트 카드 한 장 한 장을 멋지게 꾸밉니다. */
.quest-card {
    /* 카드의 뒷배경을 약간 투명한 검은색으로 칠합니다. */
    background: rgba(0, 0, 0, 0.4);
    /* 요새 유행하는 '글래스모피즘'! 카드 뒤쪽의 배경 화면을 10픽셀만큼 뿌옇게 흐리게 만들어서 진짜 예쁜 유리처럼 보이게 합니다. */
    backdrop-filter: blur(10px);
    /* 카드 테두리에 아주 얇은 반투명 하얀색 선을 예쁘게 그어줍니다. */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 카드 모서리를 20픽셀만큼 둥글려서 부드럽게 합니다. */
    border-radius: 20px;
    /* 글씨들이 카드 벽에 안 붙고 떨어지도록 안쪽 빈 공간을 25픽셀 줍니다. */
    padding: 25px;
    /* 배지, 제목, 설명이 카드 안에서 정렬되도록 플렉스(flex)를 씁니다. */
    display: flex;
    /* 내용물들을 위에서 아래 방향으로 순서대로 놓습니다. */
    flex-direction: column;
    /* 내용물(제목, 설명 등) 사이에 15픽셀씩 틈을 똑같이 줍니다. */
    gap: 15px;
    /* 바깥쪽으로 짙은 먹색 그림자를 내뿜어 공중에 떠있는 느낌을 줍니다. */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* 카드가 짜짠!!! 하고 등장할 때 밑에서 밀려 올라오는 'fadeUp' 마법 애니메이션을 0.5초 동안 실행합니다. */
    animation: fadeUp 0.5s ease backwards;
    /* 마우스 올릴 때 0.3초간 부드럽게 붕~ 뜨도록 트랜지션 애니메이션 설정을 켜둡니다. */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 퀘스트 카드에 마우스를 올렸을 때(hover)의 재미난 반응입니다. */
.quest-card:hover {
    /* 카드가 10픽셀이나 위로 쏙! 떠오릅니다. 내가 마우스 올렸다는 걸 확실히 알 수 있어요. */
    transform: translateY(-10px);
    /* 그림자 색을 민트색으로 바꾸고 더 크고 넓게 퍼트려서 눈에 띄게 합니다. */
    box-shadow: 0 15px 40px rgba(0, 242, 254, 0.3);
    /* 카드 테두리 선도 민트색으로 살짝 밝힙니다. */
    border-color: rgba(0, 242, 254, 0.5);
}

/* 카드가 짠! 나타날 때 쓰는 'fadeUp' 애니메이션의 마법 구문입니다. */
@keyframes fadeUp {
    /* 처음에(0%)는 원래 위치보다 아래쪽(20픽셀)에 가라앉아있고, 투명도 0으로 완전히 투명해서 안 보입니다. */
    0% { opacity: 0; transform: translateY(20px); }
    /* 끝날 때(100%)는 원래 정상 위치로 솟아오르고, 투명도 1로 완전히 또렷하게 보입니다. */
    100% { opacity: 1; transform: translateY(0); }
}

/* 퀘스트 카드의 제목(h3) 글씨를 꾸미는 규칙입니다. */
.quest-card h3 {
    /* 글씨 크기를 1.4배(1.4rem)로 적당하게 조절합니다. */
    font-size: 1.4rem;
    /* 글자 색상을 예쁘고 튀는 하늘색(#4facfe)으로 칠합니다. */
    color: #4facfe;
    /* 제목이 길어서 두 줄이 될 때, 줄 사이 공간을 살짝 벌려(1.3배) 읽기 편하게 합니다. */
    line-height: 1.3;
}

/* 퀘스트에 대한 자세한 설명 글(p)을 꾸미는 규칙입니다. */
.quest-card p {
    /* 눈이 덜 아프게 글씨 색을 아주 약간 회색빛이 도는 흰색(#e0e0e0)으로 설정합니다. */
    color: #e0e0e0;
    /* 글씨 크기를 일반적인 크기(1rem)로 맞춥니다. */
    font-size: 1rem;
    /* 글 설명이 길 때 읽기 매우 좋으라고 줄 간격을 1.5배로 넓힙니다. (디자인 꿀팁!) */
    line-height: 1.5;
}

/* 카드의 난이도를 알려주는 조그만 스티커(배지) 모양입니다. */
.badge {
    /* 플렉스 공간에서 나 혼자서만 자기 몸 크기만큼만 넓이를 차지하며 왼쪽 끝에 붙도록 명령합니다! */
    align-self: flex-start;
    /* 위아래 5픽셀, 양옆 12픽셀의 조그만 공간을 덧대어 앙증맞은 스티커 모양 비를을 만듭니다. */
    padding: 5px 12px;
    /* 완전히 동그랗게 알약 모양처럼 모서리를 둥글게 깎습니다. */
    border-radius: 20px;
    /* 글씨 크기를 아주 조금 작게 0.85배로 줄입니다. */
    font-size: 0.85rem;
    /* 글씨 굵기는 한 눈에 팍 들어오게 두껍게(bold) 칠합니다. */
    font-weight: bold;
}

/* 난이도 시스템! '쉬움' 스티커일 경우의 컬러링 규칙입니다. */
.badge.easy {
    /* 배경을 약간 투명한 초록색으로 바릅니다. */
    background: rgba(46, 204, 113, 0.2);
    /* 글자와 얇은 테두리 선은 아주 쨍한 민트 초록색에 가깝게(#2ecc71) 바릅니다. */
    color: #2ecc71; border: 1px solid #2ecc71;
}

/* '보통' 스티커일 경우의 컬러링 규칙입니다. */
.badge.normal {
    /* 배경을 투명한 노란-주황색으로, 펜과 선은 선명한 노란빛(#f1c40f)으로 칠합니다. */
    background: rgba(241, 196, 15, 0.2); 
    color: #f1c40f; border: 1px solid #f1c40f; 
}

/* '어려움' 스티커일 경우의 컬러링 규칙(경고의 레드!) 입니다. */
.badge.hard {
    /* 배경은 투명한 붉은색, 선과 글자는 강력한 빨간색(#e74c3c)으로 물들입니다! */
    background: rgba(231, 76, 60, 0.2); 
    color: #e74c3c; border: 1px solid #e74c3c; 
}

/* 핸드폰이나 화면이 600픽셀 이하로 매우 작아졌을 때만 작동하는 반응형 마법(media query)입니다. */
@media (max-width: 600px) {
    /* 가로로 나란히 있던 목표 입력칸과 버튼을 세로(column) 배치로 착! 바꿉니다 (핸드폰 공간 확보용). */
    .input-section {
        flex-direction: column;
    }
    
    /* 화면이 좁으니까 엄청 컸던 대제목 h1 글씨도 조금 줄여줘서 예쁘게 맞춥니다. */
    header h1 {
        font-size: 2.5rem;
    }
}