/* ============================================================
   bph_treatment.css — 전립선비대증 치료 페이지 전용
   공통 스타일: common.css 참조
   ============================================================ */

/* ── 컬러 오버라이드 (그린민트) ── */
:root {
  --primary:        #0a7a5a;
  --primary-dark:   #065c43;
  --primary-light:  #e6f7f2;
  --accent:         #1ab88a;
  --accent-light:   #d0f2e8;
  --border:         #c8ece3;
  --bg-light:       #f2fbf8;
  --bg-section:     #f7f7f7;
  --shadow:         0 8px 32px rgba(10,122,90,0.10);
  --shadow-lg:      0 20px 56px rgba(10,122,90,0.14);
  /* TURP·유로리프트 전용 컬러 — 요로결석 블루 기준 */
  --turp:           #0a4fa8;
  --turp-dark:      #073a7c;
  --turp-mid:       #0a2a5e;
  --turp-accent:    #1e90d8;
  --turp-light:     #e8f0fb;
  --turp-pale:      #d6eef9;
  --urolift:        #0a7a5a;
  --urolift-dark:   #065c43;
}

/* ── 그라디언트 오버라이드 ── */
.hero-section { background: linear-gradient(135deg, #063d2a 0%, #0a7a5a 55%, #1ab88a 100%); }
.hero-overlay {
  background: linear-gradient(
    105deg, rgba(6,61,42,0.92) 0%, rgba(10,122,90,0.70) 42%,
    rgba(10,122,90,0.18) 75%, transparent 100%
  );
}
.cta-section { background: linear-gradient(135deg, #063d2a 0%, #0a7a5a 100%); }
.diag-photo-badge { background: rgba(10,122,90,0.88); }

/* ── 01. 치료 과정 플로우 ── */
.flow-section { background: var(--white); padding-bottom: 80px; }
.flow-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
.flow-steps::before { content: ''; position: absolute; top: 36px; left: 12%; right: 12%; height: 2px; background: var(--border); z-index: 0; }
.flow-step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; padding: 0 12px; }
.flow-circle { width: 72px; height: 72px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; line-height: 1.3; margin-bottom: 18px; box-shadow: 0 4px 16px rgba(10,122,90,0.25); }
.flow-step:nth-child(1) .flow-circle { background: #0a7a5a; }
.flow-step:nth-child(2) .flow-circle { background: #1ab88a; }
.flow-step:nth-child(3) .flow-circle { background: #065c43; }
.flow-step:nth-child(4) .flow-circle { background: #1a9e5f; }
.flow-step h4 { font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.flow-step p  { color: var(--text-muted); line-height: 1.65; }

/* ── 02. TURP 히어로 ── */
.turp-section { background: var(--white); padding-bottom: 80px; }

/* ── 03. 유로리프트 히어로 ── */
.urolift-section { background: var(--bg-section); padding-bottom: 80px; }

/* 수술 히어로 공통 */
.op-hero {
  position: relative; width: 100%; min-height: 500px;
  border-radius: var(--radius); overflow: hidden; margin-bottom: 48px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}
/* TURP — 요로결석 블루 계열 */
.op-hero.turp-bg {
  background: linear-gradient(135deg, #0a2a5e 0%, #0a4fa8 55%, #1e90d8 100%);
}
/* 유로리프트 — 그린민트 계열 */
.op-hero.urolift-bg {
  background: linear-gradient(135deg, #063d2a 0%, #0a7a5a 55%, #1ab88a 100%);
}
.op-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; opacity: 0; transition: opacity 0.35s; }
.op-hero-img.loaded { opacity: 1; }
.op-hero-overlay { position: absolute; inset: 0; }
.turp-bg .op-hero-overlay {
  background: linear-gradient(110deg, rgba(10,42,94,0.92) 0%, rgba(10,79,168,0.65) 44%, rgba(10,79,168,0.15) 72%, transparent 100%);
}
.urolift-bg .op-hero-overlay {
  background: linear-gradient(110deg, rgba(6,61,42,0.90) 0%, rgba(10,122,90,0.65) 44%, rgba(10,122,90,0.15) 72%, transparent 100%);
}
.op-hero-content { position: relative; z-index: 2; padding: 56px 64px; max-width: 640px; color: #fff; }
.op-kicker { font-weight: 700; letter-spacing: 4px; color: rgba(255,255,255,0.55); text-transform: uppercase; margin-bottom: 14px; }
.op-hero-content h3 { font-size: clamp(24px,3.2vw,40px); font-weight: 900; line-height: 1.22; margin-bottom: 18px; letter-spacing: -0.5px; }
.op-hero-content h3 em { font-style: normal; }
.turp-bg    .op-hero-content h3 em { color: #7fd4ff; }
.urolift-bg .op-hero-content h3 em { color: #a8f5d0; }
.op-hero-content p { opacity: 0.88; line-height: 1.85; margin-bottom: 28px; }
.op-points { display: flex; flex-wrap: wrap; gap: 10px; }
.op-point { border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.9); font-weight: 600; padding: 8px 18px; border-radius: 2px; }
.op-callouts { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 3; }
.op-callout { background: rgba(255,255,255,0.96); border-radius: var(--radius); padding: 16px 22px; min-width: 190px; box-shadow: 0 6px 20px rgba(0,0,0,0.16); }
.turp-bg    .op-callout strong { color: #073a7c; }
.urolift-bg .op-callout strong { color: var(--primary-dark); }
.op-callout strong { display: block; margin-bottom: 4px; }
.op-callout span   { color: var(--text-muted); }

/* 시술 단계 */
.procedure-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.procedure-step { background: var(--bg-section); border-radius: var(--radius); padding: 26px 20px; text-align: center; }
.turp-section .procedure-step    { border-bottom: 3px solid #0a4fa8; }
.urolift-section .procedure-step { border-bottom: 3px solid var(--primary); }
.procedure-step-num { width: 44px; height: 44px; border-radius: 50%; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.turp-section    .procedure-step-num { background: #0a4fa8; }
.urolift-section .procedure-step-num { background: var(--primary); }
.procedure-step h4 { font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.procedure-step p  { color: var(--text-muted); line-height: 1.7; }

/* ── 04. TURP vs 유로리프트 비교표 ── */
.compare-section { background: var(--white); padding-bottom: 80px; }
.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th { padding: 15px 20px; text-align: left; font-weight: 700; }
.compare-table th:first-child { background: var(--bg-section); color: var(--text-dark); border-radius: 4px 0 0 0; }
.compare-table th.turp-head    { background: #0a4fa8; color: #fff; }
.compare-table th.urolift-head { background: var(--primary); color: #fff; border-radius: 0 4px 0 0; }
.compare-table td { padding: 14px 20px; border-bottom: 1px solid var(--border); color: var(--text-mid); line-height: 1.65; vertical-align: top; }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:nth-child(even) td { background: var(--bg-light); }
.compare-table td:first-child { font-weight: 700; color: var(--text-dark); background: var(--bg-section) !important; }
.c-good { color: var(--green); font-weight: 700; }
.c-mid  { color: var(--orange); font-weight: 700; }
.c-note { color: var(--text-muted); }

/* ── 05. 약물치료 ── */
.medicine-section { background: var(--bg-section); padding-bottom: 80px; }
.medicine-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.medicine-card { background: var(--white); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); border-top: 3px solid var(--accent); }
.medicine-card-num { font-weight: 700; letter-spacing: 2px; color: var(--accent); margin-bottom: 8px; }
.medicine-card h4 { font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.medicine-card p  { color: var(--text-mid); line-height: 1.75; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── 반응형 ── */
@media (max-width: 1100px) {
  .op-callouts { display: none; }
  .medicine-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .flow-steps { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .flow-steps::before { display: none; }
  .procedure-steps { grid-template-columns: repeat(2,1fr); }
  .op-hero-content { padding: 40px 32px; }
}
@media (max-width: 768px) {
  .procedure-steps { grid-template-columns: 1fr 1fr; }
  .medicine-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .procedure-steps { grid-template-columns: 1fr; }
}