/* ============================================================
   비치안의원 | 진료과목 피부과 — 메인(원페이지) 전용 스타일
   기반: css/bichian-base.css (반응형 골격 · 터치 규격 · 타이포 스케일)

   디자인 방향
   · 시술 페이지와 같은 남색·연보라 팔레트, 명조 제목을 씁니다.
   · 사진 없이 자체 제작 도형만 씁니다.
   · 장비 자랑이 아니라 「어떤 고민에 어떤 진료가 있는지」를 먼저 보여 줍니다.
   ============================================================ */

/* ── 팔레트 재정의 ────────────────────────────
   병원 정문 랩핑의 청록색을 사진에서 뽑아 기준색으로 삼았습니다.
   로고 심볼의 보라색은 포인트로만 남깁니다 — 실제 정문도 청록 바탕에
   보라 꽃 로고입니다. base.css 의 토큰을 덮어씁니다. */
:root{
  --bc-sign:       #26809E;  /* 간판 판 — 흰 글자 4.5:1 */
  --bc-teal:       #2E92B6;  /* 포인트 */
  --bc-teal-bright:#A5E2F5;  /* 하늘 밝은 쪽 */
  --bc-teal-mid2:  #8FD9F1;  /* 하늘 가운데 */
  --bc-teal-deep:  #125061;  /* 흰 글자 대비 9.0:1 */
  --bc-teal-mid:   #1E6E8A;
  --bc-peri:      #8A81BD;   /* 로고 심볼색 — 포인트 */
  --bc-lav-pale:  #D3EDF7;

  --bc-ground:      #EAF7FC;  /* 여백 — 흰색 대신 옅은 하늘색 */
  --bc-surface:     #D5EEF7;
  --bc-ink:         #0C262E;  /* 배경 대비 14.5:1 */
  --bc-ink-2:       #33545C;
  --bc-muted:       #4A6A71;
  --bc-rule:        #C3E4F0;
  --bc-rule-2:      #9DD3E6;

  --bc-primary:      var(--bc-teal);
  --bc-primary-ink:  #0F5F73;  /* 배경 대비 6.6:1 */
  --bc-primary-btn:  #125061;  /* 흰 글자 대비 9.0:1 */
  --bc-primary-soft: #D8EFF8;

  --bc-notice: #7A5310;
  --radius: 14px;

  --hair: 1px solid var(--bc-rule);
  --lift: 0 1px 2px rgba(18,38,43,.04), 0 8px 24px -12px rgba(18,38,43,.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bc-ground:  #0D1A1D;
    --bc-surface: #142428;
    --bc-ink:     #E8F2F3;
    --bc-ink-2:   #C6D9DC;
    --bc-muted:   #94AAAE;
    --bc-rule:    #24383D;
    --bc-rule-2:  #355057;
    --bc-lav-pale:#172C31;

    --bc-primary-ink:  #8FC6CF;
    --bc-primary-btn:  #2F7E8A;
    --bc-primary-soft: #16292E;
    --bc-notice: #DCA94A;
    --lift: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bc-ground:#0D1A1D; --bc-surface:#142428; --bc-ink:#E8F2F3; --bc-ink-2:#C6D9DC;
  --bc-muted:#94AAAE; --bc-rule:#24383D; --bc-rule-2:#355057; --bc-lav-pale:#172C31;
  --bc-primary-ink:#8FC6CF; --bc-primary-btn:#2F7E8A; --bc-primary-soft:#16292E;
  --bc-notice:#DCA94A;
  --lift: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
}

/* 고정 헤더에 가려지지 않도록 본문 내 링크의 도착 위치를 내립니다.
   실제 값은 스크립트가 헤더 높이를 재서 다시 넣습니다. 아래는 대비책입니다. */
html{ scroll-padding-top:5.5rem; }
@media(min-width:900px){ html{ scroll-padding-top:8.5rem; } }

/* ── 타이포 ───────────────────────────────────
   제목과 본문 모두 Pretendard 한 가지로 통일합니다. 제목은 자간을 좁히고
   굵기를 올려 구분하되, 글꼴은 바꾸지 않습니다. */
h1, h2, .display{
  font-family:var(--ff-base);
  font-weight:var(--fw-strong);
  letter-spacing:-.025em;
}
body{ letter-spacing:-.005em; }

/* 라벨 — 섹션 위에 얹는 작은 글자 */
.eyebrow{
  display:block; margin:0 0 var(--sp-2);
  font-size:var(--fs-xs); font-weight:var(--fw-strong); letter-spacing:.16em;
  color:var(--bc-primary-ink); text-transform:uppercase;
}
[aria-disabled="true"]{ opacity:.7; cursor:not-allowed; }

/* ── 헤더 ─────────────────────────────────── */
.header{ background:color-mix(in srgb, var(--bc-ground) 88%, transparent); backdrop-filter:saturate(140%) blur(8px); }
.header__bar{ padding-block:var(--sp-2); gap:var(--sp-3); }
.header__logo{ display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); min-width:var(--tap-min); text-decoration:none; }
/* 상단은 심볼만 둡니다 — 병원 이름 글자는 히어로의 큰 로고 하나뿐입니다 */
.header__logo img.header__mark{ width:auto; height:38px; display:block; }
@media(min-width:900px){ .header__logo img.header__mark{ height:46px; } }
.header__id .sub{
  font-size:.75rem; letter-spacing:.06em; color:var(--bc-muted); font-weight:500; white-space:nowrap;
}
.header__actions{ display:none; }
@media(min-width:900px){
  .header__actions{ display:flex; gap:var(--sp-2); align-items:center; }
  .header__actions .btn{ min-height:var(--tap-min); padding-inline:var(--sp-4); font-size:var(--fs-sm); }
}
.nav ul{ margin:0; padding:0; list-style:none; }
.nav a{ letter-spacing:-.01em; }
@media(min-width:900px){ .nav a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--bc-primary); } }

/* ══ 히어로 — 병원 간판 ═══════════════════════
   정문 랩핑을 그대로 옮긴 화면입니다. 밝은 청록 바탕에 로고(글자 포함)를
   크게 하나만 두어, 문 앞에서 보시는 것과 같게 했습니다. */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:var(--sp-6) var(--sp-7);
  background:linear-gradient(155deg, var(--bc-teal-bright), var(--bc-teal-mid2) 55%, var(--bc-teal));
  /* 히어로는 어두운 화면에서도 밝은 하늘색이므로 글자색을 고정합니다 */
  color:#0C262E;
}
.hero__field{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.30; }
.hero__field img{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:180%; max-width:none; height:100%; object-fit:cover;
}
@media(min-width:900px){ .hero__field img{ width:100%; } }

/* 간판 — 건물 간판을 옮긴 판. 청록 판에 흰 글자와 꽃 로고입니다 */
.signboard{
  display:flex; align-items:center; gap:var(--sp-4);
  background:var(--bc-sign); border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-5); margin:0 0 var(--sp-5);
  box-shadow:0 10px 30px -18px rgba(12,38,46,.55);
}
.signboard__flower{ width:clamp(54px, 14vw, 104px); height:auto; flex:none; }
.signboard__text{ min-width:0; }
.hero h1{
  font-family:var(--ff-base); font-weight:var(--fw-strong);
  font-size:clamp(1.9rem, 8vw, 3.6rem); line-height:1.12; letter-spacing:-.02em;
  margin:0 0 .2rem; color:#FFFFFF;
}
.signboard__dept{
  margin:0; max-width:none; color:#FFFFFF;
  font-size:clamp(.8rem, 3vw, 1.05rem); font-weight:500; letter-spacing:.08em;
}

.hero .tagline{
  font-family:var(--ff-base); font-weight:var(--fw-strong);
  font-size:var(--fs-h2); line-height:1.35; letter-spacing:-.025em;
  margin:0 0 var(--sp-3); color:#0C262E;
}
.hero .lead{ color:#0C262E; margin-bottom:var(--sp-5); }
.hero .lead strong{ font-weight:var(--fw-strong); }

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 var(--sp-5); padding:0; list-style:none; }
.tags li{
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.02em;
  color:#0C262E;
  border:1px solid rgba(12,38,46,.34);
  background:rgba(255,255,255,.42);
  border-radius:999px; padding:.3rem .8rem;
}

/* 밝은 청록 위에서 읽히도록 */
.hero .btn--primary{
  background:#125061; color:#FFFFFF; border-color:#125061;
}
.hero .btn--outline{
  background:rgba(255,255,255,.5); color:#0C262E; border-color:rgba(12,38,46,.45);
}
@media(min-width:900px){ .hero{ padding-block:var(--sp-7) var(--sp-8); } }

/* ══ 섹션 ════════════════════════════════════
   구분선을 없애고 여백으로 나눕니다. */
.sec{ padding-block:var(--sp-7); }
@media(min-width:900px){ .sec{ padding-block:var(--sp-8); } }
.sec > h2{ font-size:var(--fs-h2); margin-bottom:var(--sp-5); }
.sec > h3{ font-size:var(--fs-h3); margin:var(--sp-6) 0 var(--sp-3); }
.sec--tint{ background:var(--bc-surface); }
.sec--tint .wrap{ padding-inline:var(--sp-4); }

/* 섹션 사이 얇은 호 */
.rule{ display:block; width:100%; height:16px; opacity:.9; }

/* ── FAQ ─────────────────────────────────── */
.faq details{ border-bottom:var(--hair); }
.faq details:last-child{ border-bottom:0; }
.faq summary{ font-size:var(--fs-body); }
.faq summary::after{ content:"＋"; color:var(--bc-primary-ink); font-weight:400; }
.faq details[open] summary::after{ content:"－"; }
.faq details > div p{ font-size:var(--fs-sm); color:var(--bc-ink-2); margin-bottom:0; }

/* ── 고지 ────────────────────────────────── */
.notice{
  background:var(--bc-lav-pale); border-radius:var(--radius);
  padding:var(--sp-5); border:0;
}
.notice h2{
  display:flex; align-items:center; gap:.5rem; font-size:var(--fs-body);
  margin-bottom:var(--sp-3); color:var(--bc-ink); font-family:var(--ff-base); letter-spacing:0;
}
/* 부작용 항목을 나열하기 전에, 확인 전이라는 사실을 먼저 밝힙니다. */
.notice__lead{
  margin:0 0 var(--sp-4); padding-bottom:var(--sp-4);
  border-bottom:1px solid color-mix(in srgb, var(--bc-ink) 12%, transparent);
  font-size:var(--fs-sm); color:var(--bc-ink-2); max-width:none;
}
.notice ul{ margin:0; padding:0; list-style:none; }
.notice li strong{ color:var(--bc-ink); }
.notice li{
  margin-bottom:.55rem; font-size:var(--fs-sm); color:var(--bc-ink-2);
  padding-left:.9rem; position:relative;
}
.notice li::before{ content:"·"; position:absolute; left:.1rem; color:var(--bc-primary-ink); font-weight:var(--fw-strong); }
.notice li:last-child{ margin-bottom:0; }

/* ── 상담 — 남색 면 ──────────────────────── */
.contact{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--bc-teal-deep), var(--bc-teal-mid) 62%, var(--bc-teal));
  color:#F2FAFB; border-radius:var(--radius); padding:var(--sp-6) var(--sp-5);
}
.contact::after{
  content:""; position:absolute; right:-70px; top:-90px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(177,168,211,.32), rgba(177,168,211,0) 70%);
}
.contact > *{ position:relative; }
.contact .eyebrow{ color:#B6C0E8; }
.contact h2{ font-size:var(--fs-h3); margin-bottom:var(--sp-2); color:#fff; }
.contact > p{ color:#CFCEE6; margin-bottom:var(--sp-5); }
.contact dl{ margin:0 0 var(--sp-5); }
.contact dt{
  font-size:var(--fs-xs); color:#A9AECF; font-weight:500; letter-spacing:.08em;
  margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid rgba(237,235,246,.16);
}
.contact dl > dt:first-child{ margin-top:0; padding-top:0; border-top:0; }
.contact dd{ margin:.2rem 0 0; font-size:var(--fs-body); color:#F3F2FA; }
.contact dd .tap{ padding-inline:0; margin-inline:0; }
.footer .tap{ padding-inline:0; }
.contact dd a{ color:#FFFFFF; text-underline-offset:.2em; }
.contact dd a:hover{ color:#E7E4F1; }
.contact .btn--primary{ background:#FFFFFF; color:var(--bc-teal-deep); }
.contact .btn--primary:hover{ background:#E7E4F1; }
.contact .btn--outline{ color:#EDEBF6; border-color:rgba(237,235,246,.42); }
.contact .btn--outline:hover{ background:rgba(237,235,246,.1); border-color:rgba(237,235,246,.7); }

/* ── 관련 시술 ───────────────────────────── */
.related{ display:grid; gap:var(--sp-3); grid-template-columns:1fr; padding:0; margin:0; list-style:none; }
@media(min-width:600px){ .related{ grid-template-columns:repeat(2,1fr); } }
.related a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  min-height:var(--tap); padding:var(--sp-4) var(--sp-5);
  background:var(--bc-surface); border-radius:var(--radius);
  text-decoration:none; color:var(--bc-ink); font-weight:500;
  transition:background-color .15s, transform .15s;
}
.related a:hover{ background:var(--bc-primary-soft); transform:translateY(-1px); }
.related a::after{ content:"→"; color:var(--bc-primary-ink); }

/* ── 푸터 ────────────────────────────────── */
.footer{ background:var(--bc-surface); padding-block:var(--sp-6) var(--sp-7); border-top:var(--hair); }
.footer img{ width:132px; margin-bottom:var(--sp-3); }
.footer .name{ font-size:var(--fs-sm); color:var(--bc-ink); font-weight:500; margin-bottom:.5rem; letter-spacing:.01em; }
.footer p{ font-size:var(--fs-xs); color:var(--bc-muted); margin-bottom:.4rem; }

/* 로고 테마 전환 */
.logo--dark{ display:none; }
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo--light{ display:none; }
  :root:not([data-theme="light"]) .logo--dark{ display:block; }
}
:root[data-theme="dark"] .logo--light{ display:none; }
:root[data-theme="dark"] .logo--dark{ display:block; }

/* 하단 액션바 */
.actionbar{ background:color-mix(in srgb, var(--bc-ground) 94%, transparent); backdrop-filter:blur(8px); }
.actionbar a{ letter-spacing:.02em; }
.actionbar a.is-primary{ background:var(--bc-teal-deep); color:#fff; }

/* ============================================================
   메인 전용 컴포넌트
   ============================================================ */

/* ── 보험 진료 — 항목을 알약 모양으로 나열 ── */
.dept{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0 0 var(--sp-4); list-style:none; }
.dept li{
  font-size:var(--fs-sm); color:var(--bc-ink-2); font-weight:500;
  background:var(--bc-surface); border:var(--hair);
  border-radius:999px; padding:.45rem .95rem;
}
.dept-note{ font-size:var(--fs-sm); color:var(--bc-muted); max-width:none; margin:0; }

/* ── 질환·상태 카드 ───────────────────────── */
.cond{ display:grid; gap:var(--sp-4); grid-template-columns:1fr; padding:0; margin:0; list-style:none; }
@media(min-width:600px){ .cond{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .cond{ grid-template-columns:repeat(3,1fr); } }
.cond > li{
  background:var(--bc-ground); border:var(--hair); border-radius:var(--radius);
  padding:var(--sp-5); box-shadow:var(--lift);
}
.cond h3{
  display:flex; align-items:center; gap:.55rem;
  font-size:var(--fs-h3); margin:0 0 var(--sp-2); color:var(--bc-ink);
}
.cond h3 svg{ flex:0 0 auto; color:var(--bc-primary-ink); }
.cond p{ font-size:var(--fs-sm); color:var(--bc-ink-2); margin:0 0 var(--sp-3); max-width:none; }
.cond ul{ margin:0; padding:0; list-style:none; }
.cond ul li{
  font-size:var(--fs-xs); color:var(--bc-muted);
  padding-left:.85rem; position:relative; margin-bottom:.3rem;
}
.cond ul li::before{ content:"·"; position:absolute; left:.1rem; color:var(--bc-primary-ink); font-weight:var(--fw-strong); }
.cond ul li:last-child{ margin-bottom:0; }

/* ── 진료 방법 — 번호 없는 가로 목록 ───────── */
.method{ display:grid; gap:var(--sp-4); grid-template-columns:1fr; padding:0; margin:0; list-style:none; }
@media(min-width:600px){ .method{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .method{ grid-template-columns:repeat(3,1fr); } }
.method li{ padding:var(--sp-4) 0; border-top:2px solid var(--bc-primary-soft); }
.method h3{ font-size:var(--fs-body); margin:0 0 .35rem; color:var(--bc-ink); }
.method p{ font-size:var(--fs-sm); color:var(--bc-ink-2); margin:0; max-width:none; }

/* ── 보유 장비 — 분류별 ───────────────────── */
.equip{ display:grid; gap:var(--sp-5); grid-template-columns:1fr; padding:0; margin:0 0 var(--sp-4); list-style:none; }
@media(min-width:700px){ .equip{ grid-template-columns:repeat(2,1fr); } }
.equip > li{ border-top:var(--hair); padding-top:var(--sp-4); }
.equip h3{
  font-size:var(--fs-sm); font-weight:var(--fw-strong); letter-spacing:.06em;
  color:var(--bc-primary-ink); margin:0 0 var(--sp-3);
}
.equip ul{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; }
.equip ul li{
  font-size:var(--fs-sm); color:var(--bc-ink-2);
  border:1px solid var(--bc-rule-2); border-radius:var(--radius);
  padding:.4rem .8rem; background:var(--bc-ground);
}
.equip ul li .equip-alt{ color:var(--bc-muted); font-size:var(--fs-xs); }
.devices{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,1fr); padding:0; margin:var(--sp-5) 0 var(--sp-4); list-style:none; }
@media(min-width:700px){ .devices{ grid-template-columns:repeat(4,1fr); } }
.devices img{
  display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--radius); background:var(--bc-surface);
}
.devices p{ margin:var(--sp-2) 0 0; font-size:var(--fs-xs); color:var(--bc-muted); max-width:none; }
.equip-note{ font-size:var(--fs-sm); color:var(--bc-muted); max-width:none; margin:0; }

/* ── 병원 공간 사진 ──────────────────────── */
.space{ display:grid; gap:var(--sp-4); grid-template-columns:1fr; padding:0; margin:0 0 var(--sp-4); list-style:none; }
@media(min-width:700px){ .space{ grid-template-columns:repeat(2,1fr); } }
.space img{
  display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--radius); background:var(--bc-surface);
}
.space p{ margin:var(--sp-2) 0 0; font-size:var(--fs-xs); color:var(--bc-muted); max-width:none; }
.space-note{ font-size:var(--fs-sm); color:var(--bc-muted); max-width:none; margin:0; }

/* ── 진료시간 ─────────────────────────────── */
.hours{ width:100%; border-collapse:collapse; margin-bottom:var(--sp-4); }
.hours th, .hours td{ text-align:left; padding:var(--sp-3) 0; border-bottom:var(--hair); }
.hours th{ color:var(--bc-muted); font-weight:500; font-size:var(--fs-sm); width:38%; }
.hours td{ color:var(--bc-ink); font-size:var(--fs-body); }
.hours tr:last-child th, .hours tr:last-child td{ border-bottom:0; }
.hours-note{ font-size:var(--fs-sm); color:var(--bc-muted); max-width:none; margin:0; }

/* ── 오시는 길 ────────────────────────────── */
.place-photo{ margin:0 0 var(--sp-4); }
.place-photo img{
  /* 건물 사진은 위쪽 간판이 핵심이라 잘라내지 않고 사진 비율 그대로 둡니다. */
  display:block; width:100%; height:auto;
  border-radius:var(--radius); background:var(--bc-surface);
}
.place-photo figcaption{ margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--bc-muted); }
.place dl{ margin:0 0 var(--sp-4); }
.place dt{
  font-size:var(--fs-xs); color:var(--bc-muted); font-weight:500; letter-spacing:.06em;
  margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:var(--hair);
}
.place dl > dt:first-child{ margin-top:0; padding-top:0; border-top:0; }
.place dd{ margin:.2rem 0 0; font-size:var(--fs-body); color:var(--bc-ink); }
.place dd .tap{ padding-inline:0; }

/* ── 메인 2단 배치 (넓은 화면) ─────────────── */
@media(min-width:900px){
  .split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7); align-items:start; }
}

/* ── 질환 카드 — 진료 후 선택할 수 있는 방법 ── */
.cond-tx{
  margin:var(--sp-4) 0 0; padding-top:var(--sp-3);
  border-top:var(--hair); max-width:none;
}
.cond-tx b{
  display:block; font-size:var(--fs-xs); font-weight:var(--fw-strong); letter-spacing:.06em;
  color:var(--bc-primary-ink); margin-bottom:.3rem;
}
.cond-tx span{ display:block; font-size:var(--fs-sm); color:var(--bc-ink-2); }

/* ══ 언어 선택 ════════════════════════════════════════════════════════════
   고정 헤더 맨 위의 얇은 줄입니다. 높이가 늘어난 만큼 앵커 위치가 달라지지만,
   스크립트가 헤더의 실제 높이를 재므로 따로 보정하지 않습니다. */
.langbar{
  background:var(--bc-primary-soft);
  border-bottom:1px solid var(--bc-rule);
}
.langbar .wrap{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:0;
}
.langbar ul{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:0; margin:0; padding:0; list-style:none;
}
.langbar li{ margin:0; padding:0; }
.langbar li::before{ content:none; }
.langbar a,
.langbar span[aria-current]{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap-min); min-width:var(--tap-min);
  padding:0 .6rem;
  font-size:.86rem; line-height:1.2; white-space:nowrap;
}
.langbar a{ color:var(--bc-primary-ink); text-decoration:none; }
.langbar a:hover,
.langbar a:focus-visible{ text-decoration:underline; }
.langbar span[aria-current]{
  color:var(--bc-ink); font-weight:var(--fw-strong);
  box-shadow:inset 0 -2px 0 var(--bc-teal);
}

/* 번역 페이지 안내 문구 */
.lang-note{
  max-width:46rem; margin:var(--sp-3) 0 0;
  padding:var(--sp-2) var(--sp-3);
  border-left:3px solid var(--bc-teal);
  background:rgba(255,255,255,.72);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.9rem; line-height:1.7; color:#33545C;
}

/* 길찾기용 한국어 원문 */
.addr-ko{
  display:inline-block; margin-top:.4rem;
  font-size:.86rem; line-height:1.6; color:var(--bc-muted);
}
.addr-ko b{ font-weight:500; }
.name--ko{ font-size:.9rem; opacity:.85; }

/* 번역 페이지의 기본 서체 — 한국어 글자도 함께 담긴 순서로 둡니다. */
html[lang="ja"]{
  --ff-base:"Pretendard Variable","Noto Sans JP",-apple-system,BlinkMacSystemFont,
    "Hiragino Sans","Yu Gothic",sans-serif;
}
html[lang="zh"]{
  --ff-base:"Pretendard Variable","Noto Sans SC",-apple-system,BlinkMacSystemFont,
    "PingFang SC","Microsoft YaHei",sans-serif;
}
html[lang="en"]{
  --ff-base:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,
    "Segoe UI",Helvetica,Arial,sans-serif;
}

/* 직접 그린 약도 */
.place-map{ margin:var(--sp-4) 0 0; }
.place-map img{
  display:block; width:100%; height:auto;
  border:1px solid var(--bc-rule); border-radius:var(--radius);
  background:#F4FBFE;
}
.place-map figcaption{
  margin-top:var(--sp-2); font-size:.9rem; color:var(--bc-muted);
}

/* 여러 대가 한 장에 담긴 사진은 가로로 두 칸을 쓰고, 넓은 화면에서는
   세로로도 두 칸을 써서 정사각형 사진이 잘리지 않게 합니다. */
.devices li.is-wide{ grid-column:span 2; }
.devices li.is-wide img{ aspect-ratio:1/1; }
@media(min-width:700px){
  .devices li.is-wide{ grid-row:span 2; }
  .devices li.is-wide img{
    height:calc(100% - 2.1rem);
    object-fit:contain;              /* 네 대가 모두 보이도록 잘라내지 않습니다. */
  }
}

/* 메뉴 버튼은 아이콘만 둡니다 — 글자가 없어도 세 줄이면 메뉴로 읽힙니다.
   이름은 aria-label 로 남아 화면 낭독기에서는 그대로 「메뉴」로 읽힙니다. */
.nav-toggle{ justify-content:center; padding-inline:var(--sp-2); }
.nav-toggle span{ font-size:1.5rem; line-height:1; }

/* 보험 진료 항목 중 아래 카드로 이어지는 것은 눌리는 칩으로 보이게 합니다. */
.dept li.is-link{ padding:0; }
.dept li a{
  display:inline-flex; align-items:center; gap:.35rem;
  min-height:var(--tap-min);
  padding:.45rem .95rem;
  color:var(--bc-primary-ink); text-decoration:none;
  border-radius:999px;
}
.dept li a::after{
  content:"↓"; font-size:.85em; opacity:.75;
}
.dept li a:hover,
.dept li a:focus-visible{ background:var(--bc-primary-soft); text-decoration:underline; }