/*
  style.css
  - 이 파일은 화면의 '디자인(모양, 색, 크기, 간격)'을 담당합니다.
  - HTML 의 요소들을 골라서 꾸며줍니다.
  - 초보자 팁: 중괄호 { } 안에 "어떻게 보일지"를 적습니다.
*/

/* ===== 모든 요소 공통 설정 ===== */
* {
  box-sizing: border-box; /* 크기 계산을 편하게 해주는 표준 설정 */
  margin: 0;              /* 기본 바깥 여백 제거 */
  padding: 0;             /* 기본 안쪽 여백 제거 */
}

/* ===== 전체 페이지(body) 기본 스타일 ===== */
body {
  font-family: "맑은 고딕", "Malgun Gothic", sans-serif; /* 한글이 잘 보이는 글꼴 */
  background-color: #f4f6f9; /* 연한 회색 배경 */
  color: #333;               /* 글자색: 진한 회색 */
  line-height: 1.6;          /* 줄 간격 */
  padding: 20px;
}

/* ===== 상단 제목 영역 ===== */
.app-header {
  text-align: center;
  margin-bottom: 20px;
}

.app-header h1 {
  color: #2c6e9b; /* 파란 계열 제목색 */
  font-size: 28px;
}

.subtitle {
  color: #777;
  font-size: 14px;
  margin-top: 6px;
}

/* ===== 검색창 영역 ===== */
.search-area {
  max-width: 1000px;          /* 너무 넓어지지 않게 제한 */
  margin: 0 auto 20px auto;   /* 가운데 정렬 + 아래 여백 */
}

#searchInput {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border: 2px solid #cdd6e0;
  border-radius: 10px;
  outline: none; /* 클릭했을 때 생기는 기본 테두리 제거 */
}

/* 검색창을 클릭(포커스)했을 때 테두리 색 변경 */
#searchInput:focus {
  border-color: #2c6e9b;
}

/* ===== 카테고리 필터 버튼 영역 ===== */
.filter-area {
  max-width: 1000px;
  margin: 0 auto 20px auto; /* 가운데 정렬 + 아래 여백 */
  display: flex;
  flex-wrap: wrap;          /* 버튼이 많아지면 다음 줄로 넘김 */
  gap: 8px;                 /* 버튼 사이 간격 */
}

/* 필터 버튼 한 개의 모양 */
.filter-btn {
  /* 아래 button 공통 스타일을 덮어쓰기 위해 따로 지정합니다 */
  flex: none;               /* 버튼이 늘어나지 않고 글자 크기만큼만 */
  padding: 8px 14px;
  font-size: 14px;
  border: 1px solid #cdd6e0;
  border-radius: 20px;      /* 둥근 알약 모양 */
  background-color: #fff;
  color: #555;
  cursor: pointer;
}

.filter-btn:hover {
  border-color: #2c6e9b;
  background-color: #f0f7fc;
}

/* 현재 선택된 필터 버튼 강조 (script.js 가 'active' 표시를 붙여줍니다) */
.filter-btn.active {
  background-color: #2c6e9b;
  color: #fff;
  border-color: #2c6e9b;
}

/* ===== 전문 참고(접이식) 영역 ===== */
.pro-note {
  background-color: #f3f8fb;
  border: 1px solid #cfe2ef;
  border-radius: 8px;
  padding: 10px 12px;
}
.pro-note > summary {
  cursor: pointer;
  font-weight: bold;
  color: #1f4e6b;
  list-style: none;       /* 기본 삼각형 마커 제거 */
}
.pro-note > summary::-webkit-details-marker {
  display: none;          /* 사파리 기본 마커 제거 */
}
.pro-note .pro-hint {
  font-weight: normal;
  font-size: 12px;
  color: #7a93a5;
}
.pro-note[open] > summary .pro-hint::after {
  content: " ▲";
}
.pro-note:not([open]) > summary .pro-hint::after {
  content: " ▼";
}
.pro-note #detailProNote {
  white-space: pre-line;  /* 줄바꿈(\n) 그대로 표시 */
  margin-top: 8px;
  font-size: 14px;
  color: #34475a;
  line-height: 1.6;
}

/* ===== 화면을 좌우 두 칸으로 나누는 레이아웃 ===== */
.layout {
  display: flex;        /* 가로로 나란히 배치 */
  gap: 20px;            /* 두 칸 사이 간격 */
  max-width: 1000px;
  margin: 0 auto;       /* 가운데 정렬 */
  align-items: flex-start;
}

/* 왼쪽(목록)과 오른쪽(상세) 공통 박스 모양 */
.card-list-area,
.card-detail-area {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 살짝 그림자 */
  flex: 1; /* 두 칸이 같은 너비를 갖도록 */
}

.card-list-area h2,
.card-detail-area h2 {
  font-size: 18px;
  margin-bottom: 16px;
  color: #2c6e9b;
  border-bottom: 2px solid #eef2f6;
  padding-bottom: 8px;
}

/* ===== 카드 한 개의 모양 ===== */
.card {
  border: 1px solid #e0e6ec;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer; /* 마우스를 올리면 '클릭 가능'한 손모양으로 */
  transition: all 0.15s ease; /* 색이 부드럽게 바뀌도록 */
}

/* 카드에 마우스를 올렸을 때 */
.card:hover {
  border-color: #2c6e9b;
  background-color: #f0f7fc;
}

/* 현재 선택된 카드 표시 (script.js 가 'active' 라는 표시를 붙여줍니다) */
.card.active {
  border-color: #2c6e9b;
  background-color: #e3f0fa;
}

.card-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 4px;
}

/* 카드 안의 카테고리 작은 표시(배지) */
.card-category {
  display: inline-block;
  font-size: 12px;
  color: #2c6e9b;
  background-color: #e3f0fa;
  padding: 2px 8px;
  border-radius: 20px;
}

/* 검색 결과가 없을 때 보여주는 문구 */
.no-result {
  color: #999;
  text-align: center;
  padding: 20px 0;
}

/* ===== 오른쪽 상세 영역 ===== */

/* 카드를 선택하기 전 안내 문구 */
.placeholder {
  color: #999;
  text-align: center;
  padding: 40px 10px;
}

#detailTitle {
  font-size: 22px;
  color: #1f4e6b;
  margin-bottom: 12px;
}

/* 상세 내용 한 묶음(블록)마다 간격 주기 */
.detail-block {
  margin-top: 16px;
}

.detail-block strong {
  display: block;
  color: #2c6e9b;
  margin-bottom: 6px;
}

.detail-row {
  margin-bottom: 8px;
}

/* 상담 포인트 목록 */
#detailPoints {
  padding-left: 20px; /* 글머리 기호가 잘리지 않게 안쪽 여백 */
}

#detailPoints li {
  margin-bottom: 4px;
}

/* 메모 입력칸 */
#memoInput {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 2px solid #cdd6e0;
  border-radius: 8px;
  font-family: inherit; /* 위에서 정한 글꼴 그대로 사용 */
  resize: vertical;     /* 세로로만 크기 조절 가능 */
}

#memoInput:focus {
  outline: none;
  border-color: #2c6e9b;
}

/* ===== 버튼 영역 ===== */
.button-row {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

button {
  flex: 1;
  padding: 12px;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  background-color: #2c6e9b;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

button:hover {
  background-color: #21577c; /* 마우스를 올리면 조금 더 진하게 */
}

/* ===== 화면이 좁을 때(휴대폰 등) 위아래로 배치 ===== */
@media (max-width: 700px) {
  .layout {
    flex-direction: column; /* 좌우 → 위아래로 변경 */
  }
}

/* ===== 인쇄할 때 적용되는 스타일 =====
   인쇄 버튼을 누르면, 상세 내용만 깔끔하게 인쇄되도록
   불필요한 부분(검색창, 목록, 버튼)을 숨깁니다. */
@media print {
  .search-area,
  .filter-area,
  .card-list-area,
  .button-row,
  .drug-api-area,
  .app-header .subtitle {
    display: none; /* 인쇄 시 숨김 */
  }

  body {
    background-color: #fff;
    padding: 0;
  }

  .card-detail-area {
    box-shadow: none;
  }
}

/* ===== 의약품 정보 검색 영역 (공공데이터 API) ===== */
.drug-api-area {
  max-width: 1000px;
  margin: 30px auto 0 auto; /* 위 여백 + 가운데 정렬 */
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.drug-api-area h2 {
  font-size: 20px;
  color: #2c6e9b;
  margin-bottom: 6px;
}

/* "식약처 공공데이터" 작은 표시(배지) */
.drug-api-area .badge {
  font-size: 12px;
  font-weight: normal;
  color: #2c6e9b;
  background-color: #e3f0fa;
  padding: 2px 8px;
  border-radius: 20px;
  vertical-align: middle;
}

.api-help {
  color: #777;
  font-size: 14px;
  margin-bottom: 16px;
}

/* 약품명 입력칸 + 검색 버튼을 한 줄로 */
.drug-search-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

#drugInput {
  flex: 1; /* 남는 공간을 모두 차지 */
  padding: 12px 14px;
  font-size: 16px;
  border: 2px solid #cdd6e0;
  border-radius: 10px;
  outline: none;
}

#drugInput:focus {
  border-color: #2c6e9b;
}

/* 검색 버튼 (전체 button 공통 스타일을 일부 덮어씀) */
#drugSearchBtn {
  flex: none;
  padding: 12px 24px;
}

/* 상태 메시지 (불러오는 중 / 결과 없음 등) */
.drug-status {
  font-size: 14px;
  color: #555;
  margin-bottom: 14px;
  min-height: 20px;
}

/* 오류일 때 빨간색 */
.drug-status.error {
  color: #c0392b;
}

/* 약 정보 카드 한 개 */
.drug-card {
  border: 1px solid #e0e6ec;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.drug-card h3 {
  font-size: 18px;
  color: #1f4e6b;
  margin-bottom: 4px;
}

/* 노인 위험 태그 (요약 위, 보라색 박스) */
.risk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.risk-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background-color: #7e3ff2;          /* 보라색 = 노인 위험 태그 */
  padding: 4px 10px;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(126, 63, 242, 0.3);
}

/* 일반 위험 태그(부작용 다빈도) = 핑크색 */
.risk-tag.risk-tag-general {
  background-color: #ec4899;
  box-shadow: 0 1px 3px rgba(236, 72, 153, 0.3);
}

/* 요약 영역(처음 보이는 부분) - 클릭하면 상세가 펼쳐짐 */
.drug-summary {
  border-radius: 8px;
}

/* 마우스를 올리면 클릭 가능함을 살짝 표시 */
.drug-summary:hover .drug-toggle-hint {
  background-color: #d6e8f5;
}

/* '자세히 보기 ▼ / 접기 ▲' 안내 */
.drug-toggle-hint {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #2c6e9b;
  background-color: #e3f0fa;
  padding: 8px;
  border-radius: 8px;
}

/* 상세 영역 - 기본은 숨김, 'open' 이 붙으면 보임 */
.drug-detail {
  display: none;
  margin-top: 12px;
  border-top: 1px dashed #d5dde5;
  padding-top: 4px;
}

.drug-detail.open {
  display: block;
}

.drug-entp {
  font-size: 13px;
  color: #888;
  margin-bottom: 12px;
}

/* 이미지 + 낱알 식별 정보를 가로로 나란히 배치 */
.drug-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;     /* 화면이 좁으면(아이패드 세로 등) 자동으로 위아래로 */
  margin: 8px 0 12px 0;
}

/* 왼쪽 칸: 이미지 + 그 아래 낱알 식별 정보 (세로로 쌓고 고정 너비) */
.drug-leftcol {
  flex: none;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drug-leftcol .drug-image {
  margin: 0;
}

/* 낱알 식별 정보: 이미지 아래에 '작게' 표시
   (.drug-leftcol 를 앞에 붙여 기본 .drug-block 스타일보다 우선 적용) */
.drug-leftcol .drug-id-small {
  margin: 0;
  padding: 8px 10px;
}
.drug-leftcol .drug-id-small strong {
  font-size: 12px;
  margin-bottom: 4px;
}
.drug-leftcol .drug-id-small p {
  font-size: 11px;
  line-height: 1.4;
}

/* 식별정보는 평소 숨김, 'show' 가 붙으면 보임 (이미지 클릭으로 토글) */
.drug-id-collapsed {
  display: none;
}
.drug-id-collapsed.show {
  display: block;
}

/* '식별정보 보기' 안내 (이미지 아래, 클릭 가능) */
.drug-id-hint {
  font-size: 12px;
  color: #2c6e9b;
  background-color: #e3f0fa;
  text-align: center;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.drug-id-hint:hover {
  background-color: #d6e8f5;
}

/* 오른쪽 칸(이미지와 같은 라인): 요약은 남는 공간을 차지 */
.drug-top > .drug-block {
  flex: 1;
  min-width: 220px;   /* 좁아지면 자동으로 아래로 줄바꿈 */
  margin: 0;
}

/* 제품 이미지 */
.drug-image {
  display: block;
  max-width: 220px;     /* 너무 커지지 않게 제한 */
  width: 100%;
  height: auto;         /* 가로세로 비율 유지 */
  border: 1px solid #e0e6ec;
  border-radius: 8px;
  margin-bottom: 12px;
  background-color: #fff;
}

/* 정보 한 묶음(효능, 사용법 등) */
.drug-block {
  margin-top: 12px;
  padding: 10px 12px;
  background-color: #f7f9fb;
  border-radius: 8px;
}

.drug-block strong {
  display: block;
  color: #2c6e9b;
  margin-bottom: 6px;
}

/* 글에 들어 있는 줄바꿈을 그대로 표시 */
.drug-block p {
  white-space: pre-line;
  font-size: 14px;
  color: #444;
}

/* 주의사항·경고·부작용 강조 (노란 배경 + 빨간 왼쪽 띠) */
.drug-block.warning {
  background-color: #fff6f5;
  border-left: 4px solid #e07a6f;
}

.drug-block.warning strong {
  color: #c0392b;
}