style.css

/* COMMON */
.flex-space {
  flex-grow: 1;
}

/* HEADER */
header {
  display: flex;
  align-items: center;  
  /* 수직축 가운데 정렬 */
  text-decoration: none;
  font-size: 14px;
  font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
  padding: 5px;
  height: 60px;
  /* margin: 0 5px 0 5px; */
}

.info, .actions {
  display: flex;
  /* align-items: center; */
}

a {
    text-decoration: inherit;
    color: black;
    display: inline-flex;
    align-items: center;
    margin-right: 40px; /* 간격 조절 */
}
a:hover {
  text-decoration: underline;
  color: black;
}
a:last-child {
  margin-right: 0; /* 마지막 아이템의 간격 제거 */
}
header .info {
  padding: 5px;
  margin: 0 5px 0 5px;
}
header .actions {
  padding: 15px;
  margin: 0 5px 0 5px;
}
.account-wrapper {
  position: relative;
  display: inline-block;
}

.account-image {
  width: 40px;
  height: 40px;
}

.svg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}


main {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
}
main .main_image {
  margin-top: -330px;
}
.google-logo {
  width: 272px;
  height: 92px;
}
/* SEARCH */
.search {
  display: flex;
  align-items: center;
  background-color: white;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  padding: 0 16px;
  margin-top: 25px;
  width: 200%; /* 너비를 두 배로 늘림 */
  max-width: 690px; /* 최대 너비 제한 */
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); /* 초기 그림자 효과 없음 */
  transition: box-shadow 0.2s ease-in-out; /* 그림자 효과 전환 */
  height: 42px;
  position: relative;
}

.search:hover {
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); /* 마우스 오버 시 그림자 효과 추가 */
}

.search-icon {
  font-size: 20px;
  color: #9aa0a6; /* 돋보기 이미지 색상 변경 */
}

.search-input {
  border: none;
  outline: none;
  font-size: 16px;
  width: 100%;
  padding: 12px 0;
  margin-left: 10px;
  padding-left: 40px; /* search 아이콘의 공간 확보 */
  padding-right: 120px; /* 다른 아이콘들의 공간 확보 */
}
.search-input::placeholder {
  color: transparent;
}

.search-input:focus::placeholder {
  color: #5f6368;
}
.search-btn {
  display: none;
}
.material-symbols-outlined {
  position: absolute;
  font-family: "Material Symbols Outlined";
  font-size: 24px;
  opacity: 0.54; /* 아이콘 색을 흐리게 변경 */
}
.search .material-symbols-outlined:nth-child(1) {
  left: 10px;
  top: 50%;
  transform: translateY(-50%); /* 아이콘을 수직 가운데 정렬 */
}

.search .material-symbols-outlined:nth-child(3) {
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
}

.search .material-symbols-outlined:nth-child(4) {
  right: 45px;
  top: 50%;
  transform: translateY(-50%);
}

.search .material-symbols-outlined:nth-child(5) {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
button {
  background-color: #f5f5f5;
  border: none;
  border-radius: 4px;
  color: #5f6368;
  cursor: pointer;
  font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
  font-size: 14px;
  padding: 8px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease-in-out; /* 그림자 효과 전환 */
}

button:hover {
  background-color: #f5f5f5; /* 마우스 오버 시 배경색 변경 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 마우스 오버 시 그림자 효과 추가 */
}

/* FOOTER */
footer {
  background-color: #f5f5f5; /* 연한 회색 배경색 */
  padding: 10px 25px; /* 좌우 여백을 15px로 변경 */
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box; /* 박스 크기 계산 방식 변경 */
  display: flex; /* 추가: 풋터 레이아웃을 flex로 변경 */
  flex-direction: column;
  /* align-items: center;  */
}
footer a {
  color: #5f6368;
}
.first-row, .second-row {
  display: flex;
  justify-content: space-between; /* 왼쪽과 오른쪽에 각각 배치 */
  font-size: 14px;
  padding: 5px;
  color: #5f6368; /* 글자색 변경 */
  align-items: center; /* 수직축 가운데 정렬 */
  width: 100%; /* 추가: 너비를 100%로 설정 */
}

.first-row {
  border-bottom: 1px solid #e0e0e0; /* 연한 회색 실선 추가 */
}

.left_bar, .right_bar {
  display: flex;
  align-items: center; /* 수직축 가운데 정렬 */
  flex-wrap: nowrap; /* 줄 바꿈 방지 */
}