.app-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}

.home-frame {
  width: 1280px;
  height: 832px;
  display: flex;
  gap: 0;
  background-color: #ffffff;
}

.sidebar-left {
  width: 130px;
  height: 832px;
  background-color: #E5A000;
  border-radius: 20px;
  flex-shrink: 0;
}

.sidebar-right {
  width: 130px;
  height: 832px;
  background-color: #E5A000;
  border-radius: 20px;
  flex-shrink: 0;
}

.main-content {
  flex: 1;
  height: 832px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 20px;
}

.post-simple {
  padding: 25px 27px;
  background-color: #E5A000;
}

.loading,
.error-message,
.empty-message {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  font-size: 24px;
  color: #333;
}

.error-message {
  color: #dc2626;
}

.search-container {
  padding: 59px 25px 30px 25px;
  background-color: #E5A000;
}

.search-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 614px;
  height: 56px;
}

.search-input {
  width: 100%;
  height: 56px;
  background-color: #D9D9D9;
  border: none;
  border-radius: 10px;
  padding: 14px 80px 14px 17px;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.098;
  color: #000000;
  outline: none;
}

.search-input::placeholder {
  color: #878787;
}

.search-button {
  position: absolute;
  right: 0;
  width: 61px;
  height: 56px;
  background-color: #00B7FF;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.search-button:hover {
  background-color: #0096CC;
}

.search-button:active {
  background-color: #007BA3;
}

/* Post Detail Styles */
.post-detail-container {
  padding: 25px 27px;
  background-color: #E5A000;
  border-bottom: 2px solid #ffffff;
}

/* Comment Styles */
.comments-section {
  background-color: #E5A000;
}

.comment-item {
  display: flex;
  gap: 22px;
  padding: 15px 22px;
  background-color: #E5A000;
  align-items: flex-start;
}

.comment-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Comment Input Styles */
.comment-input-container {
  padding: 17px 27px;
  background-color: #E5A000;
  position: sticky;
  bottom: 0;
}

.comment-input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 642px;
  height: 56px;
}

.comment-input {
  width: 100%;
  height: 56px;
  background-color: #D9D9D9;
  border: none;
  border-radius: 10px;
  padding: 14px 80px 14px 17px;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.098;
  color: #000000;
  outline: none;
}

.comment-input::placeholder {
  color: #878787;
}

.comment-submit-button {
  position: absolute;
  right: 0;
  width: 61px;
  height: 56px;
  background-color: #00B7FF;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.comment-submit-button:hover {
  background-color: #0096CC;
}

.comment-submit-button:active {
  background-color: #007BA3;
}