/* 기본적으로 모든 페이지 요소에 margin을 0으로 설정 */
body {
    margin: 0;
}

/* header 요소는 화면 상단에 위치하며, 100% 너비와 58px 높이를 설정 */
header {
    width: 100%;
    height: 58px;
}

/* 다크/라이트 모드 토글 버튼 */
header .dark-light-btn {
    padding: 7px 15px; /* 버튼의 패딩 */
    margin: 15px; /* 버튼 주변 간격 */
    background-color: rgb(248,249,250); /* 버튼의 배경 색 */
    border: 0; /* 버튼의 테두리 제거 */
    border-radius: 5%; /* 버튼의 테두리 둥글게 설정 */
    font-weight: bold; /* 글자 굵게 설정 */
    margin-top: 60px; /* 기존 margin-top보다 크게 설정해서 아래로 내림 */
}

/* 다크/라이트 모드 토글 버튼에 마우스를 올렸을 때 테두리를 추가 */
header .dark-light-btn:hover {
    border: 1px solid rgb(225, 225, 226);
}

/* header 내의 리스트 설정 */
header ul {
    position: absolute; /* 리스트를 절대 위치로 설정 */
    top: 0;
    right: 0;
    margin: 0;
    display: flex; /* 리스트 항목을 가로로 배치 */
    align-items: center; /* 항목들을 세로로 중앙 정렬 */
    list-style: none; /* 기본 리스트 스타일 제거 */
}

/* 좌측 메뉴 (Google 정보, 스토어) */
header .left-menu {
    position: absolute;
    top: 0;
    left: 0; /* 좌측 정렬 */
    margin: 0;
    display: flex;
    align-items: center;
    list-style: none;
    margin-top: 11px; /* 위쪽 여백 맞추기 */
    padding: 7px 15px; /* 버튼의 패딩 */
}

/* header 내의 링크 스타일 */
header a {
    text-decoration: none; /* 링크 밑줄 제거 */
    color: black; /* 링크 색상 검정색 */
    font-size: 13px; /* 링크 글자 크기 설정 */
    margin: 10px; /* 링크 간 간격 설정 */
}

/* 링크에 마우스를 올렸을 때 밑줄 추가 */
header a:hover {
    text-decoration: underline;
}

/* header 내의 버튼 스타일 */
header button {
    border: 0; /* 버튼의 테두리 제거 */
    background-color: transparent; /* 버튼 배경 투명 */
    margin-top: 10px; /* 위쪽 여백 */
}

/* 구글 앱 아이콘 스타일 */
header .google-app {
    font-size: 17px; /* 아이콘 크기 설정 */
    color: rgb(95,99,104); /* 아이콘 색 */
    padding: 10px 11px; /* 아이콘의 padding 크기 설정 */
    border-radius: 50%; /* 아이콘을 원형으로 설정 */
}

/* 프로필 이미지 설정 */
header .profile-image {
    border-radius: 50%; /* 이미지 원형 처리 */
    width: 35px; /* 이미지 너비 */
    padding: 4px; /* 이미지 주변 여백 */
    margin-right: 10px; /* 오른쪽 여백 */
}

/* 구글 앱 아이콘에 마우스를 올렸을 때 배경 색 변경 */
header .google-app:hover {
    background-color: rgb(240,240,240);
}

/* 프로필 이미지에 마우스를 올렸을 때 배경 색 변경 */
header .profile-image:hover {
    background-color: rgb(240,240,240);
}

/* 로고 이미지 설정 */
.middle .logo-image {
    width: 273px; /* 로고 너비 */
    height: auto; /* 비율에 맞게 높이 자동 설정 */
    margin: 200px 65px 23px; /* 로고와 다른 요소 간 간격 설정 */
}

/* 구글 로고 스타일 */
.middle .google-logo {
    max-width: 400px; /* 로고의 최대 너비 설정 */
    margin: auto; /* 로고를 수평 중앙 정렬 */
}

/* 검색 박스 설정 */
.middle .search-box {
    max-width: 580px; /* 검색 박스의 최대 너비 설정 */
    margin: auto; /* 검색 박스를 수평 중앙 정렬 */
}

/* 검색창 스타일 */
.middle .search-bar {
    width: 390px; /* 검색창 너비 */
    height: 44px; /* 검색창 높이 */
    border-radius: 30px; /* 검색창 둥근 모서리 */
    border: 1px solid rgb(225, 225, 226); /* 검색창 테두리 색 */
    outline: none; /* 검색창 선택시 아웃라인 제거 */
    padding: 0 140px 0 48px; /* 내부 패딩 설정 */
    font-size: 16px; /* 글자 크기 설정 */
}

/* 검색창에 마우스를 올렸을 때 그림자 효과 */
.middle .search-bar:hover {
    box-shadow: 0 0 5px 1px rgb(225, 225, 226);
}

/* 검색창에 포커스가 갔을 때 그림자 효과 */
.middle .search-bar:focus {
    box-shadow: 0 0 1px 1px rgb(225, 225, 226);
}

/* 검색 아이콘 스타일 */
.middle .search-icon {
    position: absolute; /* 아이콘을 절대 위치로 설정 */
    margin: 13px 17px; /* 아이콘의 위치 설정 */
    color: rgb(154,160,166); /* 아이콘 색 */
    font-size: 14px; /* 아이콘 크기 */
}

/* 키보드 아이콘 스타일 */
.middle .keyboard-icon {
    position: absolute; /* 아이콘을 절대 위치로 설정 */
    margin: 13px 460px; /* 아이콘의 위치 설정 */
    font-size: 16px; /* 아이콘 크기 */
    color: rgb(32,33,36); /* 아이콘 색 */
}

/* 마이크 아이콘 스타일 */
.middle .microphone-icon {
    position: absolute; /* 아이콘을 절대 위치로 설정 */
    margin: 10px 500px; /* 아이콘의 위치 설정 */
    font-size: 18px; /* 아이콘 크기 */
    color: rgb(32,33,36); /* 아이콘 색 */
}

/* 이미지 검색 아이콘 스타일 */
.middle .expand-icon {
    position: absolute; /* 아이콘을 절대 위치로 설정 */
    margin: 10px 535px; /* 아이콘의 위치 설정 */
    font-size: 20px; /* 아이콘 크기 */
    color: rgb(32,33,36); /* 아이콘 색 */
}

/* 검색어 지우기 버튼 스타일 */
.middle .clear-btn {
    visibility: hidden; /* 버튼을 처음에 숨김 */
    border: 0;
    border-right: 1px solid rgb(32,33,36); /* 버튼 오른쪽에 테두리 설정 */
    padding-right: 10px; /* 버튼 오른쪽 여백 */
    background-color: transparent; /* 배경 투명 */
    position: absolute; /* 절대 위치 설정 */
    margin: 12px 420px; /* 버튼 위치 설정 */
    font-size: 20px; /* 글자 크기 설정 */
    color: rgb(32,33,36); /* 글자 색 설정 */
}

/* 추가 검색 박스 스타일 */
.additional-box {
    max-width: 400px; /* 최대 너비 설정 */
    margin: 33px auto; /* 박스를 중앙 정렬하고 위 아래 간격 설정 */
}

/* 추가 검색 박스 내 링크 스타일 */
.additional-box a {
    background-color: rgb(248,249,250); /* 배경 색 */
    text-decoration: none; /* 밑줄 제거 */
    color: black; /* 글자 색 */
    border-radius: 5%; /* 둥근 테두리 */
    padding: 9px 17px; /* 패딩 설정 */
    font-size: 14px; /* 글자 크기 설정 */
}

/* 추가 검색 박스 내 "검색" 버튼의 위치 조정 */
.additional-box .additional-search {
    margin: auto 5px auto 65px; /* 위치 설정 */
}

/* 추가 검색 박스 내 링크에 마우스를 올렸을 때 테두리 효과 */
.additional-box a:hover {
    border: 1px solid rgb(225, 225, 226);
}

/* 푸터 영역 설정 */
footer {
    position: absolute; /* 푸터를 화면 하단에 고정 */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgb(242,242,242); /* 배경 색 */
    height: 100px; /* 높이 설정 */
    display: grid; /* grid 레이아웃 사용 */
    grid-template-rows: 1fr 1fr; /* 두 행으로 나누기 */
}

/* 푸터 내 국가 정보 */
footer .country-info {
    margin: 15px 30px; /* 위치 설정 */
    color: rgb(138,138,138); /* 글자 색 */
    font-size: 15px; /* 글자 크기 설정 */
}

/* 푸터 내 링크 영역 */
footer .instruction {
    border-top: 1px solid rgb(225, 225, 226); /* 위쪽 테두리 설정 */
}

/* 푸터 내 링크 항목 */
footer .instruction li {
    list-style: none; /* 기본 리스트 스타일 제거 */
}

/* 푸터 내 링크 목록 설정 */
footer .instruction ul {
    display: flex; /* 항목을 가로로 배치 */
    flex-wrap: wrap; /* 화면 크기 줄어들면 항목이 줄 바꿈 */
    margin: 14px 0px; /* 여백 설정 */
}

/* 푸터 내 왼쪽 영역 */
footer .left-side {
    position: absolute; /* 위치를 절대값으로 설정 */
    left: 33px; /* 왼쪽 여백 설정 */
}

/* 푸터 내 오른쪽 영역 */
footer .right-side {
    position: absolute; /* 위치를 절대값으로 설정 */
    right: 10px; /* 오른쪽 여백 설정 */
}

/* 푸터 내 링크 스타일 */
footer .instruction a {
    margin-right: 25px; /* 오른쪽 여백 설정 */
    text-decoration: none; /* 밑줄 제거 */
    color: rgb(138,138,138); /* 글자 색 */
    font-size: 14px; /* 글자 크기 설정 */
}

/* 푸터 내 링크에 마우스를 올렸을 때 밑줄 추가 */
footer .instruction a:hover {
    text-decoration: underline;
}

/* 화면 너비가 1200px 이하일 때 푸터 좌측, 우측 위치 조정 */
@media(max-width:1200px) {
    footer .left-side {
        left: 190px;
    }
    
    footer .right-side {
        right: 135px;
    }
}

/* 화면 너비가 640px 이하일 때 푸터 스타일 조정 */
@media(max-width:640px) {
    footer {
        height: 130px; /* 푸터 높이 증가 */
        grid-template-rows: 1fr 2fr; /* 두 번째 행의 비율을 2로 설정 */
    }

    footer .left-side {
        position: static; /* 절대 위치를 상대 위치로 변경 */
        margin: auto; /* 중앙 정렬 */
    }

    footer .right-side {
        position: static; /* 절대 위치를 상대 위치로 변경 */
        margin: 10px auto auto; /* 중앙 정렬 */
    }
}