body {
  margin: 0;
  padding: 0;
  background: #F4F5F6;
  word-break: keep-all;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.container {
  width: auto !important;
  display: flex;
  flex-direction: row !important;
  flex: 1;
  margin: 100px clamp(64px, 4.2vw, 96px) 80px;
  gap: clamp(20px, 2vw, 40px);
}

/* 왼쪽 메뉴 */
.qna-menu {
  height: fit-content;
  flex-shrink: 0;
  padding: clamp(24px, 1.6vw, 36px) clamp(36px, 2.4vw, 54px);
  background: #fff;
  border-radius: clamp(28px, 1.9vw, 42px);
  box-shadow: 0 4px 20px rgba(1, 46, 162, 0.08);
}

.qna-menu h2 {
  font-weight: 600;
  color: #012EA2;
  margin: 0 0 clamp(20px, 1.5vw, 30px) 0;
}

.qna-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qna-menu li {
  padding: clamp(14px, 1.2vw, 18px) clamp(18px, 1.5vw, 24px);
  cursor: pointer;
  border-radius: clamp(8px, 0.6vw, 12px);
  font-weight: 500;
  transition: all 0.3s ease;
  background: #F8F9FA;
  color: #555;
  /* border: 2px solid transparent; */
  user-select: none;
}
.qna-menu li:hover {
  background: #E4EAFE;
  color: #012EA2;
  border-color: #C1CDEF;
}
.qna-menu li.menuActive {
  background: linear-gradient(135deg, #196FB7 0%, #262261 100%);
  color: #fff;
  font-weight: 600;
  border-color: transparent;
}

/* 데스크톱에서 br 태그 숨기기 */
.qna-menu li br {
  display: none;
}

/* 오른쪽 컨텐츠 */
.board-view {
  padding: clamp(24px, 1.6vw, 36px) clamp(36px, 2.4vw, 54px);
  flex: 1;
  background: #fff;
  border-radius: clamp(28px, 1.9vw, 42px);
  box-shadow: 0 4px 20px rgba(1, 46, 162, 0.08);
  min-width: 0;
}

.board-view h1 {
  font-weight: 600;
  margin: 0 0 clamp(35px, 2vw, 45px) 0;
  color: #012EA2;
  padding-bottom: clamp(19px, 1.3vw, 29px);
  border-bottom: 3px solid #012EA2;
}

/* Q&A 아이템 */
.board-item {
  border-bottom: 1px solid #E2E4EA;
  margin-bottom: clamp(16px, 1.1vw, 24px);
  border-radius: clamp(12px, 0.8vw, 18px);
  overflow: hidden;
  transition: all 0.3s ease;
}

.board-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.board-item:hover {
  box-shadow: 0 2px 12px rgba(1, 46, 162, 0.1);
}

.board-title {
  cursor: pointer;
  padding: clamp(21px, 1.4vw, 31px);
  font-weight: 600;
  font-size: clamp(17px, 1.1vw, 25px);
  background: #F8F9FA;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  color: #212121;
  user-select: none;
  word-break: keep-all;
  padding-right: clamp(48px, 3.5vw, 72px);
}

.board-title::before {
  content: 'Q';
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 2.1vw, 48px);
  height: clamp(32px, 2.1vw, 48px);
  background: #6F88CA;
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: clamp(16px, 1.3vw, 20px);
  flex-shrink: 0;
  line-height: 1;
}

.board-title::after {
  content: '';
  position: absolute;
  right: clamp(24px, 1.6vw, 36px);
  width: 10px;
  height: 10px;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.board-title.active {
  background: #E4EAFE;
  color: #012EA2;
}

.board-title.active::before {
  background: #012EA2;
}

.board-title.active::after {
  transform: rotate(-135deg);
  border-color: #012EA2;
}

.board-title:hover {
  background: #E4EAFE;
  color: #012EA2;
}

.board-title:hover::before {
  background: #012EA2;
}

.board-title:hover::after {
  border-color: #012EA2;
}

.board-content {
  display: none;
  padding: clamp(24px, 1.6vw, 36px);
  background: #fff;
  font-size: clamp(15px, 1vw, 23px);
  line-height: 1.7;
  color: #555;
  border-left: 4px solid #6F88CA;
  margin: 0 clamp(12px, 1vw, 20px) clamp(12px, 1vw, 20px);
  word-break: keep-all;
}

.board-content::before {
  content: 'A';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 2.1vw, 48px);
  height: clamp(32px, 2.1vw, 48px);
  background: #C1CDEF;
  color: #012EA2;
  border-radius: 50%;
  font-weight: 700;
  font-size: clamp(15px, 1vw, 23px);
  float: left;
  margin-right: clamp(14px, 1vw, 20px);
  flex-shrink: 0;
}

.board-content p {
  margin: 0 0 0 clamp(46px, 3vw, 68px);
  overflow-wrap: break-word;
}

/* 돌아가기 버튼 */
.button_area {
  margin: clamp(30px, 2.5vw, 50px) 0;
  text-align: center;
}

#back_btn {
  padding: clamp(14px, 1.2vw, 18px) clamp(36px, 3vw, 48px);
  font-weight: 600;
  color: #012EA2;
  background: #fff;
  border: 2px solid #012EA2;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(1, 46, 162, 0.15);
}

#back_btn:hover {
  background: #012EA2;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(1, 46, 162, 0.25);
}

#back_btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(1, 46, 162, 0.15);
}

/* 로딩 애니메이션 */
.loading {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.loading::after {
  content: '...';
  animation: dots 1.5s steps(3, end) infinite;
}

@keyframes dots {
  0%, 20% {
    content: '.';
  }
  40% {
    content: '..';
  }
  60%, 100% {
    content: '...';
  }
}

/* 접근성 향상 */
*:focus-visible {
  outline: 2px solid #012EA2;
  outline-offset: 2px;
}

/* 모바일 환경 최적화 */
body.mobile .wrapper,
body[data-mobile="true"] .wrapper {
  width: 88vw;
}

body.mobile .container,
body[data-mobile="true"] .container {
  margin: 100px 0 80px;
  flex-direction: column !important;
}

body.mobile .qna-menu,
body[data-mobile="true"] .qna-menu {
  width: 100%;
  max-width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

body.mobile .qna-menu h2,
body[data-mobile="true"] .qna-menu h2 {
  margin: 0 0 15px 0;
}

body.mobile .qna-menu ul,
body[data-mobile="true"] .qna-menu ul {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

body.mobile .qna-menu li,
body[data-mobile="true"] .qna-menu li {
  padding: 10px 6px;
  font-size: clamp(15px, 1vw, 23px) !important;
  flex: 0 0 calc((100% - 12px) / 3); /* (전체 - gap 2개 * 6px) / 3개 */
  min-width: 0;
  text-align: center;
  line-height: 1.2;
  box-sizing: border-box;
}

body.mobile .qna-menu li br,
body[data-mobile="true"] .qna-menu li br {
  display: block;
}

body.mobile .board-view,
body[data-mobile="true"] .board-view {
  padding: 20px;
}