/* =====================================================================
   MEDISTORY — 포트폴리오 쇼케이스 공용 레이어 (/portfolio/<hospital>/)
   style.css 위에 얹는다. 페이지 전용 클래스는 전부 .ep-* 로 스코프.
   병원별 브랜드 컬러는 아래 :root 기본 토큰을 showcase-<key>.css 에서 덮어쓴다
   (은평연세병원은 eunpyeong.css).

   방향: 산출물을 단일 타일 벽(.ep-wall)으로 촘촘하게 나열한다.
   확대 장치(라이트박스·캐러셀·목업)는 두지 않는다 — 타일 크기 자체가
   세부 카피 비노출 장치다. 퀄리티는 그리드의 리듬·정렬·여백에서 나온다.
   ===================================================================== */

/* ---------- Showcase tokens (기본값 — 병원별 파일이 덮어쓴다) ----------
   --ep-navy        어두운 브랜드 바탕(히어로·네이비 섹션)
   --ep-navy-deep   더 어두운 바탕(히어로·아웃트로)
   --ep-navy-soft   어두운 섹션 위의 카드 바탕
   --ep-pink        액센트(버튼·구분선)
   --ep-pink-bright 어두운 바탕 위 액센트 텍스트 (대비 4.5:1 이상)
   --ep-pink-ink    밝은 바탕 위 액센트 텍스트 (대비 4.5:1 이상)
   --ep-rose-bg     액센트 틴트 배경(슬로건 박스)
   --ep-on-dark     어두운 바탕 위 본문 / --ep-on-dark-2 보조 텍스트
   --ep-line-dark   어두운 바탕 위 경계선 */
/* ---------- Showcase tokens ---------- */
:root {
  --ep-navy:       #12173d;   /* hospital deep navy */
  --ep-navy-deep:  #0b0f2b;
  --ep-navy-soft:  #1c2452;
  --ep-pink:       #e5548f;   /* hospital pink/magenta */
  --ep-pink-bright:#f684b6;   /* pink for text on dark */
  --ep-pink-ink:   #b13a70;   /* pink for text on light (4.5:1+) */
  --ep-rose-bg:    #fdf4f8;   /* tinted light section */
  --ep-on-dark:    #d7dcf2;   /* body text on navy (>10:1) */
  --ep-on-dark-2:  #a3abd4;   /* secondary text on navy (>5:1) */
  --ep-line-dark:  rgba(255,255,255,.14);
}

/* ---------- Section shells ---------- */
.ep-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.ep-section--navy { background: var(--ep-navy); color: var(--ep-on-dark); }
.ep-section--tail { padding-top: 0; }
.ep-eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ep-pink-ink); margin-bottom: .9rem;
}
.ep-section--navy .ep-eyebrow { color: var(--ep-pink-bright); }
.ep-title { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
.ep-lead { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--muted); max-width: 62ch; }
.ep-section--navy .ep-lead { color: var(--ep-on-dark-2); }
.ep-head { max-width: 760px; }
.ep-mt-1 { margin-top: 1rem; }
.ep-mt-2 { margin-top: 2rem; }
.ep-mt-3 { margin-top: 3rem; }
.ep-note { font-size: .85rem; color: var(--muted); }

/* ---------- Wide canvas ----------
   공유 style.css의 --container(1160px)를 이 페이지 main 안에서만 넓힌다.
   타일 벽이 촘촘하게 깔리도록 1680px. 헤더/푸터는 다른 페이지와 같은 폭. */
.ep-page main { --container: 1680px; }

/* ---------- Hero — 콤팩트. 긴 스크롤 연출은 두지 않는다 ---------- */
.ep-hero {
  position: relative; overflow: hidden; background: var(--ep-navy-deep); color: #fff;
  min-height: min(62vh, 640px); display: grid; place-items: center; text-align: center;
}
.ep-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.ep-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 480px at 82% 8%, color-mix(in srgb, var(--ep-pink) 28%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(11,15,43,.55) 0%, rgba(11,15,43,.35) 45%, rgba(11,15,43,.94) 100%);
}
.ep-hero-inner { position: relative; z-index: 1; padding-block: clamp(3.5rem, 8vw, 5.5rem); max-width: 880px; }
.ep-hero-kicker {
  font-size: .82rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ep-pink-bright);
}
.ep-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.035em; line-height: 1.18; margin-top: 1rem; }
.ep-hero-sub { margin-top: 1.2rem; color: #b9c1e6; font-size: clamp(1rem, 1.7vw, 1.16rem); max-width: 46ch; margin-inline: auto; }
.ep-hero-chips { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.ep-hero-chips span {
  font-size: .82rem; font-weight: 600; color: #dfe4fb; padding: .4rem .9rem;
  border: 1px solid var(--ep-line-dark); border-radius: 99px; background: rgba(255,255,255,.06);
}

/* ---------- Client overview ---------- */
.ep-overview { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 1160px; margin-inline: auto; }
.ep-client-badge { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.ep-client-badge img { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: .35rem; width: 68px; height: auto; }
.ep-client-badge .since { font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--ep-pink-ink); }
.ep-overview-copy p + p { margin-top: .9rem; }
.ep-overview-copy p { color: var(--ink-soft); }
.ep-slogan {
  margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-left: 3px solid var(--ep-pink);
  background: var(--ep-rose-bg); border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 700; color: var(--ep-navy); font-size: 1.08rem;
}
.ep-overview-media { display: grid; gap: 1rem; }
.ep-overview-media figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.ep-overview-media img { width: 100%; height: auto; display: block; }

/* ---------- Scope — 컴팩트 정의 목록 ---------- */
.ep-scope-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ep-line-dark); border: 1px solid var(--ep-line-dark); border-radius: 10px; overflow: hidden; margin: 0; }
.ep-scope-list .item { background: var(--ep-navy-soft); padding: 1.35rem 1.4rem; }
.ep-scope-list dt { display: flex; align-items: baseline; gap: .65rem; font-weight: 700; color: #fff; font-size: 1.04rem; }
.ep-scope-list dt .no { font-size: .76rem; font-weight: 800; letter-spacing: .1em; color: var(--ep-pink-bright); }
.ep-scope-list dd { margin: .55rem 0 0; font-size: .88rem; line-height: 1.65; color: var(--ep-on-dark-2); }

/* ---------- Deliverables wall — 단일 타일 벽 ----------
   CSS columns masonry: 원본 비율 그대로, 크기·거터·모서리를 전 타일 동일 적용.
   저장폭 200px = 최대 표시폭. 아래 구간별 컬럼 수는 어떤 뷰포트에서도
   타일 표시폭이 200px(CSS)을 넘지 않도록 계산된 값 — 업스케일이 없어야
   레티나에서도 화면에 보이는 이상의 글자가 파일에 존재하지 않는다.
   데스크톱 1680 캔버스에서 8열 ≈ 190px. */
.ep-wall { columns: 170px; column-gap: 12px; }
@media (max-width: 1324px) { .ep-wall { columns: 6; } }
@media (max-width: 1112px) { .ep-wall { columns: 5; } }
@media (max-width: 863px)  { .ep-wall { columns: 4; } }
@media (max-width: 647px)  { .ep-wall { columns: 3; } }
.ep-wall img {
  display: block; width: 100%; height: auto; margin-bottom: 12px;
  break-inside: avoid; border-radius: 6px; border: 1px solid var(--line);
  background: #fff; box-shadow: 0 1px 2px rgba(18,23,61,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ep-wall img:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(18,23,61,.14); }

/* 모바일 접기 — 페이지 스크립트가 .is-collapsed를 붙였을 때만 동작한다.
   JS가 없으면 클래스가 없어 전부 펼쳐진 채 유지(fail-open), 버튼도 숨김. */
.ep-more-row { display: none; text-align: center; margin-top: 1.4rem; }
.ep-more-btn {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: .8rem 1.7rem; border-radius: 99px; font-weight: 700; font-size: .95rem;
  border: 1.5px solid var(--ep-pink-ink); color: var(--ep-pink-ink); background: transparent;
  transition: background .2s ease, color .2s ease;
}
.ep-more-btn:hover { background: var(--ep-pink-ink); color: #fff; }
@media (max-width: 647px) {
  .ep-wall.is-collapsed img:nth-child(n+19) { display: none; }
  .ep-wall.is-collapsed + .ep-more-row { display: block; }
}

/* ---------- Outro CTA ---------- */
.ep-outro {
  position: relative; overflow: hidden; border-radius: 10px; padding: clamp(2.5rem, 6vw, 4rem);
  background: var(--ep-navy-deep); color: #fff; text-align: center;
}
.ep-outro::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(700px 360px at 85% -20%, color-mix(in srgb, var(--ep-pink) 40%, transparent), transparent 60%),
    radial-gradient(700px 360px at 8% 120%, color-mix(in srgb, var(--ep-navy-soft) 90%, transparent), transparent 60%);
}
.ep-outro > * { position: relative; }
.ep-outro h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.ep-outro p { color: #b9c1e6; margin-top: .8rem; max-width: 52ch; margin-inline: auto; }
.ep-outro .cta-row { margin-top: 1.8rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.ep-btn-pink { background: var(--ep-pink); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--ep-pink) 35%, transparent); }
.ep-btn-pink:hover { background: color-mix(in srgb, var(--ep-pink) 88%, #000); box-shadow: 0 10px 26px color-mix(in srgb, var(--ep-pink) 40%, transparent); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ep-wall img { transition: none; }
  .ep-wall img:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .ep-overview { grid-template-columns: 1fr; }
  .ep-scope-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ep-scope-list { grid-template-columns: 1fr; }
}
@media (max-width: 431px) {
  /* 좁은 폭에서도 3열 유지 — 타일은 항상 작아야 하고 바둑판 밀도를 지킨다. */
  .ep-wall { columns: 3; column-gap: 8px; }
  .ep-wall img { margin-bottom: 8px; }
}

/* ---------- Hero variant — 사진이 없는 병원용 타이포 히어로 ----------
   <img class="ep-hero-bg"> 없이 쓴다. 브랜드 바탕 + 액센트 글로우만으로 채운다. */
.ep-hero--plain { min-height: min(48vh, 520px); }
.ep-hero--plain::after {
  background:
    radial-gradient(760px 420px at 85% 10%, color-mix(in srgb, var(--ep-pink) 34%, transparent), transparent 62%),
    radial-gradient(640px 380px at 10% 95%, color-mix(in srgb, var(--ep-navy-soft) 85%, transparent), transparent 60%),
    linear-gradient(180deg, var(--ep-navy-deep) 0%, var(--ep-navy) 100%);
}

/* ---------- Overview variant — 사진이 없는 병원용 단일 컬럼 ---------- */
.ep-overview--solo { grid-template-columns: 1fr; max-width: 860px; }

/* ---------- Client badge — 가로 워드마크 로고 ----------
   기본 68px 정사각 슬롯은 세로형 마크용. 가로로 긴 워드마크는 높이 기준으로 맞춘다. */
.ep-client-badge img.ep-logo--wide { width: auto; height: 40px; max-width: 220px; padding: .3rem .5rem; }