/* ═══════════════════════════════════════════════════════════
   서울에스마취통증의학과의원 방배이수점 — Sub CSS
   서브페이지 공통(서브 히어로·브레드크럼) + 각 서브페이지 섹션 스타일
   토큰은 common.css :root 사용 (--blue / --ink / --bg-soft / --r-lg …)
   Pretendard / 액센트 1개(메디컬 블루) / 순흑(#000) 금지 / 안티슬롭 준수
   ═══════════════════════════════════════════════════════════ */

/* ════════════ 서브 히어로 (모든 서브페이지 공통) ════════════ */
.sub-hero{
  position:relative;min-height:300px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--header-h) + 52px) 24px 56px;
  background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue-strong) 100%);
  color:#fff;overflow:hidden;
}
.sub-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% 18%,rgba(92,143,214,.36),transparent 56%);
}
.sub-hero__eyebrow{
  position:relative;z-index:1;font-family:var(--font-en);font-size:15px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);
  font-weight:600;margin-bottom:14px;
}
.sub-hero h1{position:relative;z-index:1;font-size:var(--fs-h2);color:#fff;line-height:1.25}
.sub-hero__sub{
  position:relative;z-index:1;margin-top:18px;font-size:17px;
  color:rgba(255,255,255,.84);line-height:1.7;max-width:680px;letter-spacing:-.01em;
}
/* 브레드크럼 */
.breadcrumb{
  position:relative;z-index:1;margin-top:26px;display:flex;align-items:center;
  gap:8px;font-size:13.5px;color:rgba(255,255,255,.7);flex-wrap:wrap;justify-content:center;
}
.breadcrumb a{color:rgba(255,255,255,.8);transition:color var(--t-fast)}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{color:rgba(255,255,255,.45)}
.breadcrumb .cur{color:#fff;font-weight:600}

/* ════════════ 섹션 헤더 (서브 공통) ════════════ */
.sub-head{margin-bottom:44px}
.sub-head.center{text-align:center}
.sub-head .eyebrow{margin-bottom:12px}
.sub-head h2{font-size:var(--fs-h2);line-height:1.3}
.sub-head h2 .accent{color:var(--blue)}
.sub-head .sub-lead{margin-top:14px;font-size:17px;color:var(--ink-2);line-height:1.75;max-width:720px}
.sub-head.center .sub-lead{margin-left:auto;margin-right:auto}

/* 섹션 앵커 스크롤 보정(고정 헤더만큼) */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ════════════ ABOUT: 인사말 ════════════ */
.greeting{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.greeting__media{position:relative}
.greeting__media img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-3);aspect-ratio:3/4;object-fit:cover;object-position:top}
.greeting__media .crest{
  position:absolute;right:-20px;bottom:-20px;width:128px;height:128px;border-radius:var(--r-md);
  object-fit:cover;border:6px solid #fff;box-shadow:var(--sh-2);aspect-ratio:auto;
}
.greeting__body .slogan{
  font-family:var(--font-en);font-size:clamp(22px,3vw,30px);font-weight:600;
  color:var(--blue);margin:6px 0 18px;letter-spacing:.01em;
}
.greeting__body .slogan small{display:block;font-family:var(--font-kr);font-size:14px;color:var(--ink-3);font-weight:500;margin-top:4px;letter-spacing:0}
.greeting__body p{color:var(--ink-2);margin-bottom:16px;line-height:1.85}
.greeting__body .sign{margin-top:26px;font-weight:700;color:var(--ink)}
.greeting__body .sign small{display:block;font-weight:500;color:var(--ink-3);font-size:14px;margin-top:2px}

/* ════════════ ABOUT: 핵심 경쟁력 (4 카드) ════════════ */
.strength-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.strength-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 26px;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base);
}
.strength-card:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.strength-card__ico{
  width:60px;height:60px;border-radius:var(--r-md);background:var(--bg-tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.strength-card__ico svg{width:32px;height:32px}
.strength-card__num{font-family:var(--font-en);font-size:14px;color:var(--blue-soft);letter-spacing:.1em;margin-bottom:6px}
.strength-card h3{font-size:18px;margin-bottom:10px;line-height:1.35}
.strength-card p{font-size:14.5px;color:var(--ink-3);line-height:1.65}

/* ════════════ ABOUT: 의료진 ════════════ */
.doc-detail{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.doc-detail__photo{position:relative}
.doc-detail__photo::before{content:'';position:absolute;inset:18px -18px -18px 18px;background:var(--bg-tint);border-radius:var(--r-lg);z-index:0}
.doc-detail__photo img{position:relative;z-index:1;width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-3);aspect-ratio:3/4;object-fit:cover;object-position:top}
.doc-detail__body h3{font-size:var(--fs-h3);margin-bottom:6px}
.doc-detail__body h3 small{font-size:.62em;color:var(--ink-3);font-weight:600;margin-left:8px}
.doc-detail__body .role{color:var(--blue);font-weight:600;margin-bottom:22px}
.doc-detail__body .quote{
  font-size:18px;line-height:1.7;color:var(--ink);font-weight:600;margin-bottom:24px;
  padding-left:18px;border-left:3px solid var(--blue);
}
.doc-cv{display:flex;flex-direction:column;gap:10px}
.doc-cv li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);font-size:15.5px}
.doc-cv li svg{flex:none;margin-top:3px;color:var(--blue)}

/* ════════════ ABOUT/공통: 언론·공지 자리 (placeholder) ════════════ */
.placeholder-box{
  text-align:center;background:var(--bg-soft);border:1px dashed var(--line);
  border-radius:var(--r-lg);padding:56px 28px;color:var(--ink-3);
}
.placeholder-box svg{width:46px;height:46px;color:var(--blue-soft);margin:0 auto 16px}
.placeholder-box h3{font-size:18px;color:var(--ink-2);margin-bottom:8px}
.placeholder-box p{font-size:15px;line-height:1.7}

/* ════════════ ABOUT: 시설 갤러리 ════════════ */
.facility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fac-item{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh-1)}
.fac-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.fac-item:hover img{transform:scale(1.06)}
.fac-item .cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff;font-weight:600;font-size:14.5px;
  background:linear-gradient(transparent,rgba(10,24,52,.82));
}

/* ════════════ ABOUT: 보유 치료 장비 (3 카드) ════════════ */
.equip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.equip-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px 28px;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base);
}
.equip-card:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.equip-card__ico{
  width:62px;height:62px;border-radius:var(--r-md);background:var(--bg-tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.equip-card__ico svg{width:34px;height:34px}
.equip-card__cat{font-size:12.5px;font-weight:600;color:var(--blue-soft);letter-spacing:.04em;margin-bottom:6px}
.equip-card h3{font-size:19px;margin-bottom:4px;line-height:1.3}
.equip-card .model{font-family:var(--font-en);font-size:14px;color:var(--ink-3);font-weight:500;margin-bottom:14px;letter-spacing:.02em}
.equip-card p{color:var(--ink-2);font-size:15px;line-height:1.7;margin-bottom:16px}
.equip-card .equip-for{margin-top:auto;display:flex;flex-wrap:wrap;gap:7px}
.equip-card .equip-for span{
  font-size:12.5px;color:var(--blue-strong);background:var(--bg-tint);
  padding:5px 12px;border-radius:var(--r-pill);font-weight:500;
}

/* ════════════ PROCEDURE 카드 (pain / joint / nutrition 공통) ════════════ */
.proc-list{display:flex;flex-direction:column;gap:24px}
.proc-card{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);
  transition:box-shadow var(--t-base);
}
.proc-card:hover{box-shadow:var(--sh-2)}
.proc-card:nth-child(even){grid-template-columns:1.1fr .9fr}
.proc-card:nth-child(even) .proc-card__media{order:2}
.proc-card:nth-child(even) .proc-card__body{order:1}
.proc-card__media{position:relative;min-height:260px;overflow:hidden}
.proc-card__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.proc-card__media .tag{
  position:absolute;left:18px;top:18px;z-index:1;background:rgba(30,95,191,.92);color:#fff;
  font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:var(--r-pill);letter-spacing:.02em;
}
.proc-card__body{padding:36px 36px;display:flex;flex-direction:column;justify-content:center}
.proc-card__body .num{font-family:var(--font-en);font-size:15px;color:var(--blue-soft);letter-spacing:.1em;margin-bottom:8px}
.proc-card__body h3{font-size:var(--fs-h3);margin-bottom:6px;line-height:1.3}
.proc-card__body .en{font-size:13px;color:var(--ink-3);font-weight:500;margin-bottom:16px;letter-spacing:.02em}
.proc-card__body p{color:var(--ink-2);line-height:1.8;margin-bottom:18px}
.proc-card__symptoms{display:flex;flex-wrap:wrap;gap:8px}
.proc-card__symptoms span{
  font-size:13px;color:var(--blue-strong);background:var(--bg-tint);
  padding:6px 14px;border-radius:var(--r-pill);font-weight:500;
}

/* 무료 텍스트(초음파/유도주사처럼 짧은 항목) — 2열 정보 카드 */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.feature-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base);
}
.feature-card:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.feature-card__ico{width:54px;height:54px;border-radius:var(--r-md);background:var(--bg-tint);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.feature-card__ico svg{width:30px;height:30px}
.feature-card h3{font-size:19px;margin-bottom:10px}
.feature-card p{color:var(--ink-2);line-height:1.75;font-size:15.5px}

/* ════════════ NUTRITION: 요법 리스트 ════════════ */
.therapy-list{display:flex;flex-direction:column;gap:14px}
.therapy-row{
  display:flex;align-items:flex-start;gap:18px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:22px 26px;transition:box-shadow var(--t-base);
}
.therapy-row:hover{box-shadow:var(--sh-1)}
.therapy-row__ico{flex:none;width:46px;height:46px;border-radius:var(--r-pill);background:var(--bg-tint);display:flex;align-items:center;justify-content:center;color:var(--blue)}
.therapy-row__ico svg{width:24px;height:24px}
.therapy-row h3{font-size:17px;margin-bottom:5px}
.therapy-row p{font-size:14.5px;color:var(--ink-3);line-height:1.65}

/* 안내 노트 박스 */
.note-box{
  margin-top:28px;display:flex;gap:14px;align-items:flex-start;
  background:var(--bg-tint);border-radius:var(--r-md);padding:20px 24px;
  font-size:14.5px;color:var(--ink-2);line-height:1.7;
}
.note-box svg{flex:none;width:22px;height:22px;color:var(--blue);margin-top:2px}

/* ════════════ LOCATION: 진료시간 표 (확장형) ════════════ */
.hours-block{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.hours-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 32px;box-shadow:var(--sh-1)}
.hours-card h3{font-size:var(--fs-h3);margin-bottom:6px}
.hours-card .lead{color:var(--ink-3);font-size:15px;margin-bottom:20px}
.hours-card .hours-table{font-size:16px}
.hours-card .hours-table td{padding:11px 0}
.hours-card .hours-table td:first-child{width:120px}
.hours-info{display:flex;flex-direction:column;gap:0}
.hours-info .info-row:first-child{padding-top:0}

/* ════════════ LOCATION: 비급여 안내 ════════════ */
.nonbenefit-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.nonbenefit-table th,.nonbenefit-table td{padding:16px 22px;text-align:left;font-size:15px;border-bottom:1px solid var(--line)}
.nonbenefit-table thead th{background:var(--bg-soft);color:var(--ink-2);font-weight:700;font-size:14px;letter-spacing:.02em}
.nonbenefit-table tbody tr:last-child td{border-bottom:none}
.nonbenefit-table td:first-child{font-weight:600;color:var(--ink)}
.nonbenefit-table td:last-child{color:var(--blue-strong);font-weight:600;text-align:right}
.nonbenefit-table .desc{color:var(--ink-3);font-weight:400;font-size:14px}

/* ════════════ LOCATION: 약도 (메인 .yakdo 재사용, 래퍼만) ════════════ */
.map-wrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#EAEFF5;display:flex;flex-direction:column}
.map-wrap .yakdo{width:100%;height:auto;display:block}
.map-detail{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start;margin-top:8px}
.map-detail .access-info{display:flex;flex-direction:column}
.map-detail .access-info h3{font-size:var(--fs-h3);margin-bottom:18px}

/* ════════════ 증상 키워드 밴드 (SEO/안내) ════════════ */
.symptom-band{background:var(--bg-tint);border-radius:var(--r-lg);padding:40px 36px;text-align:center}
.symptom-band h3{font-size:20px;margin-bottom:8px}
.symptom-band p{color:var(--ink-3);font-size:15px;margin-bottom:22px}
.symptom-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.symptom-chips span{
  font-size:14px;color:var(--ink-2);background:#fff;border:1px solid var(--line);
  padding:9px 18px;border-radius:var(--r-pill);font-weight:500;transition:all var(--t-fast);
}
.symptom-chips span:hover{border-color:var(--blue-soft);color:var(--blue)}

/* ════════════ 협력병원 밴드 ════════════ */
.partner-band{text-align:center}
.partner-list{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:24px}
.partner-list .partner{
  display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);padding:16px 26px;border-radius:var(--r-md);box-shadow:var(--sh-1);
}
.partner-list .partner svg{width:22px;height:22px;color:var(--blue)}

/* ════════════ RESPONSIVE ════════════ */
@media (max-width:980px){
  .greeting,.doc-detail,.hours-block,.map-detail{grid-template-columns:1fr;gap:40px}
  .strength-grid{grid-template-columns:repeat(2,1fr)}
  .facility-grid{grid-template-columns:repeat(2,1fr)}
  .equip-grid{grid-template-columns:1fr}
  .proc-card,.proc-card:nth-child(even){grid-template-columns:1fr}
  .proc-card__media,.proc-card:nth-child(even) .proc-card__media{order:1;min-height:240px;position:relative}
  .proc-card__media img{position:absolute}
  .proc-card__body,.proc-card:nth-child(even) .proc-card__body{order:2}
  .greeting__media,.doc-detail__photo{max-width:420px;margin:0 auto}
}
@media (max-width:560px){
  .sub-hero{min-height:240px;padding:calc(var(--header-h) + 32px) 20px 40px}
  .strength-grid,.facility-grid,.feature-grid{grid-template-columns:1fr}
  .proc-card__body{padding:28px 24px}
  .symptom-band,.nonbenefit-table th,.nonbenefit-table td{padding-left:18px;padding-right:18px}
}

/* ═══════════════ FAQ 아코디언 ═══════════════ */
.faq-list{max-width:840px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px;background:#fff;overflow:hidden}
.faq-item[open]{border-color:var(--blue-soft)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;padding:20px 26px;font-weight:600;font-size:17px;color:var(--ink);list-style:none;transition:color .2s var(--ease-out)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--blue)}
.faq-chevron{flex-shrink:0;color:var(--blue);transition:transform .35s var(--ease-out)}
.faq-item[open] .faq-chevron{transform:rotate(180deg)}
.faq-ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-out)}
.faq-item[open] .faq-ans{grid-template-rows:1fr}
.faq-ans>div{overflow:hidden}
.faq-ans p{margin:0;padding:0 26px 22px;color:var(--ink-2);line-height:1.78;font-size:15.5px}
@media (max-width:680px){.faq-item summary{padding:17px 20px;font-size:15.5px}.faq-ans p{padding:0 20px 18px}}