/* ===========================================================
   guide.html — 이용안내 (figma 3943:5070)
   =========================================================== */


/* === 3-tab 메뉴 === */
#guide-tabs {
  display: flex;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.guide-tab {
  flex: 1;
  padding: 14px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--hint);
  border-bottom: 2px solid transparent;
  background: transparent;
  border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
}
.guide-tab--active {
  color: var(--title);
  border-bottom-color: var(--primary);
}


/* === 패널 === */
.guide-panel { padding-bottom: 30px; }
.guide-panel[hidden] { display: none; }


/* === 가이드 섹션 === */
.guide-section {
  padding: 16px 20px;
  border-bottom: 6px solid var(--bg);
}
.guide-section:last-child { border-bottom: 0; }


/* === 섹션 제목 === */
.section-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--title);
  margin-bottom: 12px;
}
.section-h__icon { color: var(--primary); }


/* === 불릿 리스트 === */
.bullet-list {
  list-style: none;
  padding: 0;
  font-size: 12px;
  color: var(--body);
  line-height: 1.7;
}
.bullet-list li {
  padding-left: 14px;
  position: relative;
  margin-bottom: 6px;
}
.bullet-list li::before {
  content: '•';
  position: absolute;
  left: 2px;
  color: var(--primary);
}
.bullet-list__tiny {
  font-size: 10px;
  color: var(--caption);
}
.bullet-list__tiny::before { display: none; }


/* === 당첨금 안내 표 === */
.prize-list {
  list-style: none;
  padding: 0;
}
.prize-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface);
  font-size: 12px;
  color: var(--body);
}
.prize-row:last-child { border-bottom: 0; }

.prize-rank {
  width: 36px; height: 24px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.prize-rank--c1 { background: #FF8800; }
.prize-rank--c2 { background: #FFA500; }
.prize-rank--c3 { background: #FFC940; color: #664500; }
.prize-rank--c4 { background: var(--primary); }
.prize-rank--c5 { background: var(--primary); }

.prize-desc {
  flex: 1;
  font-size: 11px;
  color: var(--caption);
}
.prize-val {
  font-size: 12px;
  font-weight: 800;
  color: var(--title);
}


/* === 노트 박스 === */
.guide-note {
  background: var(--primary-l);
  color: var(--primary-d);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 11px;
  margin-top: 10px;
}
.guide-note--small {
  background: transparent;
  color: var(--caption);
  margin-top: 14px;
  padding: 0;
  font-size: 11px;
}


/* === "더 궁금한 것이 있나요?" CTA === */
#guide-cta {
  padding: 8px 20px 20px;
}
.guide-cta-btn {
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--caption);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.guide-cta-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}


/* === 적립내역 === */
.ph-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ph-card__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--title);
  margin-bottom: 4px;
}
.ph-card__sub {
  font-size: 11px;
  color: var(--caption);
}
.ph-list { list-style: none; padding: 0; }
.ph-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--surface);
}
.ph-row__info { display: flex; flex-direction: column; gap: 3px; }
.ph-row__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--title);
}
.ph-row__meta {
  font-size: 11px;
  color: var(--caption);
}
.ph-row__amount {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
}


/* === 문의하기 === */
.contact-textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--title);
  font-family: inherit;
  margin-bottom: 18px;
}
.contact-textarea:focus { outline: 0; border-color: var(--primary); }

.contact-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--title);
  margin-bottom: 6px;
}

.contact-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--title);
  font-family: inherit;
}
.contact-input:focus { outline: 0; border-color: var(--primary); }

.contact-error {
  color: #FF6B6B;
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}

.contact-bottom { padding: 16px 20px 30px; }

.guide-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}
.guide-submit-btn:hover { background: var(--primary-d); }