/* 콩나물마켓 - 시세 페이지 전용 스타일 (등급 선택 / 3종 시세 / 열람권 잠금 오버레이) */

.grade-select { display: flex; gap: 6px; margin: 14px 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grade-select button {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 18px;
  font-size: 0.86rem; font-weight: 700; cursor: pointer; font-family: inherit; flex-shrink: 0;
  min-height: 40px; transition: background .13s, color .13s, border-color .13s;
}
.grade-select button:hover { background: var(--green-soft); }
.grade-select button.active { background: var(--green); color: #fff; border-color: var(--green); }

.chart-lockwrap, .price-type-lockwrap { position: relative; }
/* 잠금 오버레이는 절대배치(inset:0)라서 컨테이너 높이를 넘어서는 내용을 담으면 아래 형제 요소
   (#unlockStatus의 구매 버튼들) 위로 그대로 넘쳐 겹쳐 보입니다. 잠긴 동안에는 컨테이너가
   오버레이 내용을 담을 만큼 자라도록 최소높이를 확보해 겹침을 구조적으로 차단합니다. */
.chart-lockwrap.locked, .price-type-lockwrap.locked { min-height: 200px; }
.lock-overlay {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(250, 249, 243, 0.92); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 20px; border-radius: var(--radius);
  overflow: auto;
}
.lock-overlay .lock-ico { font-size: 1.6rem; }
.lock-overlay p { margin: 0; color: var(--ink-soft); font-size: 0.86rem; max-width: 320px; line-height: 1.6; }
.lock-overlay .lock-hint { font-size: 0.8rem; font-weight: 700; color: var(--green-dark, #1b7a30); }
.lock-overlay .acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.chart-empty-notice {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 6px; padding: 16px; color: var(--ink-soft);
  font-size: 0.84rem; line-height: 1.6; background: rgba(255, 255, 255, 0.65); pointer-events: none;
}
.chart-status-line { font-size: 0.76rem; color: var(--ink-soft); margin-top: 6px; }
.chart-status-line.stale { color: var(--amber-ink, #92400e); }
.price-type-intro { font-size: 0.8rem; color: var(--ink-soft); margin: 16px 0 0; }

.price-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; min-height: 80px; }
.price-type-card { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 16px; background: #fff; }
.price-type-card.static { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.price-type-card .pt-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.price-type-card .pt-amount { font-size: 1.2rem; font-weight: 800; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.price-type-card .pt-diff { font-size: 0.76rem; font-weight: 700; }
.price-type-card .pt-diff.up { color: var(--green-dark); }
.price-type-card .pt-diff.down { color: var(--red); }
.price-type-card .pt-desc { font-size: 0.76rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.55; }
.price-type-card .pt-meta { font-size: 0.7rem; color: var(--ink-soft); margin-top: 6px; opacity: 0.8; }

/* 열람권 CTA 영역. 절대배치·음수마진을 쓰지 않고 flex + gap만으로 배치합니다(겹침 방지).
   높이는 내용에 따라 자동으로 늘어나며(고정높이 없음), 긴 문구는 잘리지 않고 줄바꿈됩니다. */
.unlock-status {
  margin-top: 14px; font-size: 0.82rem; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
}
.unlock-status .unlock-info { display: flex; flex-direction: column; gap: 3px; }
.unlock-status .unlock-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.unlock-status .unlock-acts .btn {
  flex: 1 1 240px; min-width: 0; min-height: 44px;
  font-size: 0.82rem; padding: 10px 14px;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35; text-align: center;
}
.unlock-status .btn:disabled, .unlock-status .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; box-shadow: none;
}
.unlock-status .btn:focus-visible { outline: 3px solid var(--green-dark, #1b7a30); outline-offset: 2px; }
.unlock-status .unlock-active {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--green-soft, #eaf7ec); border: 1px solid var(--green, #2E9E44);
  border-radius: var(--radius-s); padding: 12px 14px; color: var(--ink, #222);
}
.unlock-status .unlock-active strong { font-size: 0.9rem; overflow-wrap: anywhere; }
.unlock-status .unlock-src { font-size: 0.76rem; color: var(--ink-soft); }

/* 좁은 화면에서는 버튼을 세로로 쌓습니다(가로 스크롤/겹침 방지). */
@media (max-width: 480px) {
  .unlock-status .unlock-acts { flex-direction: column; }
  .unlock-status .unlock-acts .btn { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 640px) {
  .price-type-grid { grid-template-columns: 1fr; }
  /* 카카오톡 문의 플로팅 버튼(하단 고정)이 마지막 시세 카드를 가리지 않도록 여유 공간을 둡니다. */
  .market-panel { padding-bottom: 76px; }
}