@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* 🔴 상호의 알파벳 e 가 한글보다 작아 보이는 문제 (광고주 지적 2026-08-19).
   "e클린치과" 처럼 라틴과 한글이 붙으면, 라틴 글자는 x-높이 기준이라 한글 네모틀보다 작게 렌더된다.
   글자마다 span 을 씌우면 상호가 100군데 넘게 쓰여 관리가 안 되고 JSON-LD·title 에 마크업이 샌다.

   그래서 **라틴 구간 폰트만 살짝 키운다.** Pretendard 동적 서브셋에서 알파벳은 subset.91 에 있고,
   같은 파일을 size-adjust 로 다시 선언해 폰트 스택 맨 앞에 둔다. 한글은 손대지 않는다.
   ⚠️ Pretendard 버전을 올리면 서브셋 번호가 바뀔 수 있다. 그때 e 가 다시 작아지면 여기를 볼 것. */
@font-face{
  font-family:'PretendardLatinUp';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/variable/woff2-dynamic-subset/PretendardVariable.subset.91.woff2") format("woff2-variations");
  unicode-range:U+41-5A, U+61-7A;   /* A–Z, a–z 만 */
  size-adjust:108%;
}

/* 제목·리드의 「e클린」 e 한 글자 (src/ui.mjs 의 brandE). 소문자 e 가 한글보다 낮아 보이는 것을 맞춘다.
   line-height:0 이라 줄 높이는 그대로 두고 글자만 커진다. <i> 라서 기울임을 꺼야 한다. */
.be{font-style:normal; font-size:1.34em; line-height:0; letter-spacing:-.01em}

/* 토큰
   색은 e클린 로고(남색/초록/주황/하늘)와 원내 인테리어(화이트+연민트+웜그레이)에서 뽑았다.
   광고주 요청: 어두운 색을 넓은 면적에 쓰지 않는다. 남색은 글자와 로고에만. */
:root{
  --navy:#21297a; --navy-70:#4a5199; --navy-12:#e3e5f1;
  --blue:#1b8fd0; --blue-08:#eaf4fb; --blue-16:#d3e8f6;
  --green:#009241; --orange:#e77918;
  --mint:#dfeced; --mint-soft:#f0f7f7;

  --ink:#232a31; --ink-2:#4b555f; --ink-3:#78838d;
  --line:#e6eaee; --line-2:#f0f3f5;
  --bg:#ffffff; --bg-2:#f7fafb;

  --wrap:1180px; --gut:24px;
  --r:14px; --r-lg:20px;
  --sh:0 1px 2px rgba(35,42,49,.04), 0 8px 24px rgba(35,42,49,.06);

  --fs-hero:clamp(28px,4.6vw,52px);
  --fs-h2:clamp(24px,3.1vw,38px);
  --fs-h3:clamp(19px,2.1vw,24px);
  --fs-lead:clamp(16px,1.55vw,19px);
  --fs-body:clamp(15.5px,1.25vw,17px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  /* PretendardLatinUp 이 맨 앞 — 알파벳만 여기서 가져오고 나머지는 뒤로 넘어간다 */
  font-family:'PretendardLatinUp',"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic",sans-serif;
  font-size:var(--fs-body); line-height:1.75; letter-spacing:-.011em;
  word-break:keep-all; overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; line-height:1.35; letter-spacing:-.025em; font-weight:700; color:var(--navy)}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:2px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* 헤더 */
.hd{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hd__in{display:flex; align-items:center; gap:16px; min-height:74px}
/* 로고는 기존 사이트의 투명 PNG 원본(820x180). 높이 기준으로 맞춘다. */
.hd__logo{display:flex; align-items:center; flex:0 0 auto}
.hd__logo img{width:auto; height:36px}
.hd__nav{margin-left:auto; display:flex; align-items:center; gap:2px}
.hd__nav>li{position:relative}
.hd__nav>li>a,.hd__nav>li>button{
  /* 🔴 white-space:nowrap 을 반드시 둔다 — 예약 버튼이 생기며 메뉴 폭이 12px 모자라
     「치과소/개」처럼 글자가 쪼개졌다(2026-08-27 실측). 여백도 15 → 11px 로 줄여 자리를 만들었다. */
  display:block; padding:10px 11px; font-size:15.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;
  background:none; border:0; font-family:inherit; cursor:pointer; letter-spacing:-.02em; border-radius:9px;
}
.hd__nav>li>a:hover,.hd__nav>li>button:hover{color:var(--navy); background:var(--blue-08)}
.hd__nav>li>a[aria-current]{color:var(--navy)}
.hd__sub{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:212px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh);
  padding:8px; opacity:0; visibility:hidden;
  /* 🔴 닫힐 때 visibility 를 .12s 늦춘다 — 커서가 항목 사이를 비스듬히 지날 때 깜빡이며 닫히지 않게.
     열릴 때는 지연 없음(아래 hover 규칙이 0s 로 덮는다). */
  transition:opacity .16s,transform .16s,visibility 0s .12s;
}
/* 🔴 버튼과 메뉴 사이 8px 틈을 투명 다리로 잇는다 (D:/Claude/CLAUDE.md 「드롭다운은 틈을 두지 않는다」).
   top:calc(100% + 8px) 로 띄워 두면 커서가 그 8px 를 지나는 순간 li 의 :hover 가 끊겨
   **메뉴가 커서보다 먼저 닫힌다** — 광고주 지적 2026-09-09. 시각적 여백은 그대로 두고 hover 영역만 잇는다. */
.hd__sub::before{content:''; position:absolute; left:0; right:0; top:-9px; height:9px}
.hd__nav>li:hover .hd__sub,.hd__nav>li:focus-within .hd__sub{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); transition-delay:0s}
.hd__sub a{display:block; padding:9px 13px; border-radius:8px; font-size:15px; font-weight:500; color:var(--ink-2)}
.hd__sub a:hover{background:var(--blue-08); color:var(--navy)}
.hd__tel{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:11px 19px; border-radius:999px;
  background:var(--navy); color:#fff; font-weight:700; font-size:15.5px; letter-spacing:-.01em; white-space:nowrap;
}
.hd__tel:hover{background:#1a2062}
/* 네이버 예약 — 전화 옆 보조 버튼(2026-08-27). 채운 버튼은 전화 하나만 둔다 */
.hd__book{
  flex:0 0 auto; display:inline-flex; align-items:center; padding:10px 17px; border-radius:999px;
  border:1.5px solid var(--navy); color:var(--navy); background:#fff;
  font-weight:700; font-size:15px; letter-spacing:-.01em; white-space:nowrap; transition:.15s;
}
.hd__book:hover{background:var(--blue-08)}
.hd__burger{display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--line); border-radius:11px; background:#fff; cursor:pointer; align-items:center; justify-content:center}
/* 좁은 화면에서 버튼이 시각적으로 38px 로 줄어도 **누르는 영역은 44px 이상**을 지킨다.
   보이는 크기를 안 건드리고 투명한 테두리만 넓힌다 — 2026-08-24 터치 영역 실측 보완 */
.hd__burger,.hd__tel,.hd__book{position:relative}
.hd__burger::after,.hd__tel::after,.hd__book::after{content:''; position:absolute; inset:-5px}
.hd__burger span{display:block; width:19px; height:1.8px; background:var(--ink); position:relative; transition:.2s}
.hd__burger span::before,.hd__burger span::after{content:""; position:absolute; left:0; width:19px; height:1.8px; background:var(--ink); transition:.2s}
.hd__burger span::before{top:-6px} .hd__burger span::after{top:6px}
.hd__burger[aria-expanded="true"] span{background:transparent}
.hd__burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.hd__burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

/* 히어로 */
.hero{position:relative; background:var(--mint-soft)}
.hero__media{position:relative; aspect-ratio:16/7; min-height:340px; overflow:hidden}
.hero__media img{width:100%; height:100%; object-fit:cover}
.hero__media::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 38%,rgba(255,255,255,.42) 62%,rgba(255,255,255,.1) 100%)}
.hero__txt{position:absolute; inset:0; z-index:2; display:flex; align-items:center}
.hero__eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:var(--blue); letter-spacing:.02em; margin-bottom:16px}
.hero__eyebrow::before{content:""; width:22px; height:2px; background:var(--blue); border-radius:2px}
.hero h1{font-size:var(--fs-hero); letter-spacing:-.035em; line-height:1.28}
.hero__lead{margin-top:18px; max-width:34em; font-size:var(--fs-lead); color:var(--ink-2); line-height:1.72}
.hero__cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}

/* 하위 페이지용 얕은 히어로 */
.phero{background:linear-gradient(180deg,var(--mint-soft),#fff); border-bottom:1px solid var(--line-2); padding:52px 0 46px}
.phero h1{font-size:clamp(26px,3.5vw,42px); margin-top:12px}
.phero__lead{margin-top:16px; max-width:44em; font-size:var(--fs-lead); color:var(--ink-2)}
/* 진료 페이지끼리 바로 오가는 줄 (광고주 요청 2026-09-08). 진료안내 9개 페이지 머리에만 있다.
   내용을 숨겼다 보였다 하는 탭이 아니라 전부 실제 링크다 — 검색·AI 가 내부 링크로 읽는다. */
.subnav{margin-top:26px}
.subnav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.subnav a{display:inline-flex; align-items:center; min-height:40px; padding:0 15px; border-radius:999px;
 border:1px solid var(--line); background:#fff; color:var(--ink-2); font-size:14.5px; font-weight:600;
 letter-spacing:-.01em; white-space:nowrap; transition:border-color .15s, color .15s}
.subnav a:hover{border-color:var(--navy); color:var(--navy)}
.subnav a[aria-current="page"]{background:var(--navy); border-color:var(--navy); color:#fff}
@media (max-width:600px){
  /* 좁은 화면에서는 한 줄로 두고 옆으로 민다 — 9개가 세 줄로 쌓이면 머리가 너무 길어진다 */
  .subnav{margin-left:calc(-1 * var(--gut)); margin-right:calc(-1 * var(--gut)); padding:0 var(--gut)}
  .subnav ul{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:none}
  .subnav ul::-webkit-scrollbar{display:none}
  .subnav a{min-height:44px}
}

/* 버튼 */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:999px; font-weight:700; font-size:16px; letter-spacing:-.015em; border:1.5px solid transparent; transition:.16s}
.btn--nav{background:var(--navy); color:#fff} .btn--nav:hover{background:#1a2062}
.btn--out{background:#fff; color:var(--navy); border-color:var(--navy-12)} .btn--out:hover{border-color:var(--navy); background:var(--blue-08)}

/* 섹션 */
.sec{padding:clamp(58px,7vw,104px) 0}
.sec--tint{background:var(--bg-2)}
.sec--mint{background:var(--mint-soft)}
.sec__head{max-width:52em; margin-bottom:clamp(32px,4vw,52px)}
.sec__head--mid{margin-inline:auto; text-align:center}
/* 크기는 광고주 요청(2026-08-25 "진료원칙 글씨가 더 커도 좋겠다")으로 14 → 16.5px */
.eyebrow{display:block; font-size:16.5px; font-weight:700; color:var(--blue); letter-spacing:.04em; margin-bottom:11px}
.sec h2{font-size:var(--fs-h2)}
.sec__lead{margin-top:16px; font-size:var(--fs-lead); color:var(--ink-2)}

/* 좌우 교차 배치 (균일 카드 반복 회피) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4.5vw,68px); align-items:center}
.split+.split{margin-top:clamp(48px,6vw,90px)}
.split--flip .split__media{order:2}
.split__media{border-radius:var(--r-lg); overflow:hidden; background:var(--mint); aspect-ratio:4/3}
.split__media img{width:100%; height:100%; object-fit:cover}
.split__body h3{font-size:var(--fs-h3); margin-bottom:14px}
.split__body p{color:var(--ink-2)}
.split__body p+p{margin-top:13px}
.split__body ul{margin-top:16px}

/* 구분선 기반 목록 */
.rows{border-top:1px solid var(--line)}
.rows>li{display:grid; grid-template-columns:minmax(150px,.32fr) 1fr; gap:clamp(16px,3vw,44px); padding:26px 0; border-bottom:1px solid var(--line)}
.rows__k{font-weight:700; color:var(--navy); font-size:17px; letter-spacing:-.02em}
.rows__v{color:var(--ink-2)}
.rows__v strong{color:var(--ink); font-weight:600}

/* 원칙 목록 */
.tenets{display:grid; gap:0; border-top:1px solid var(--navy-12)}
.tenets>li{display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,38px); padding:clamp(26px,3.4vw,40px) 0; border-bottom:1px solid var(--navy-12); align-items:start}
.tenets__no{font-size:clamp(30px,4vw,48px); font-weight:800; color:var(--blue-16); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.tenets__label{display:block; font-size:13.5px; font-weight:800; color:var(--blue); letter-spacing:.02em; margin-bottom:6px}
.tenets h3{font-size:var(--fs-h3); margin-bottom:10px; letter-spacing:-.03em; word-break:keep-all}
.tenets p{color:var(--ink-2); max-width:46em}

/* 진료과목 목록 */
.subjects{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.subjects>li>a,.subjects>li>span{display:block; background:#fff; padding:20px 22px; height:100%; transition:.15s}
.subjects>li>a:hover{background:var(--blue-08)}
.subjects__ko{display:block; font-weight:700; color:var(--navy); font-size:17px; letter-spacing:-.02em}
.subjects__en{display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px; letter-spacing:.01em}

/* 진료 절차 */
.steps{counter-reset:s; display:grid; gap:2px}
.steps>li{counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:20px; padding:22px 24px; background:var(--bg-2); border-radius:var(--r); align-items:start}
.steps>li::before{content:counter(s); display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff; font-size:14.5px; font-weight:700}
.steps h3{font-size:17.5px; margin-bottom:5px}
.steps p{color:var(--ink-2); font-size:15.5px}

/* 체크 목록 */
.checks{display:grid; gap:11px}
.checks>li{display:grid; grid-template-columns:auto 1fr; gap:11px; color:var(--ink-2)}
.checks>li::before{content:""; width:19px; height:19px; margin-top:4px; border-radius:50%; background:var(--blue-08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231b8fd0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center/13px no-repeat}

/* FAQ — details라 JS 없이도 본문이 DOM에 있다 */
.faq{border-top:1px solid var(--line)}
.faq>details{border-bottom:1px solid var(--line)}
.faq>details>summary{
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:start; cursor:pointer; list-style:none;
  padding:24px 4px; font-weight:700; font-size:17.5px; color:var(--navy); letter-spacing:-.022em; line-height:1.55;
}
.faq>details>summary::-webkit-details-marker{display:none}
.faq>details>summary::after{
  content:""; width:22px; height:22px; margin-top:3px; flex:0 0 auto; transition:transform .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321297a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center/20px no-repeat;
}
.faq>details[open]>summary::after{transform:rotate(180deg)}
.faq__a{padding:0 4px 26px; color:var(--ink-2); max-width:60em}
.faq__a p+p,.faq__a ul{margin-top:12px}
.faq__a strong{color:var(--ink); font-weight:600}

/* 진료시간 표 */
.hours{width:100%; border-collapse:collapse; font-size:16px}
.hours th,.hours td{text-align:left; padding:15px 6px; border-bottom:1px solid var(--line)}
.hours th{font-weight:700; color:var(--navy); width:44%}
.hours td{color:var(--ink-2); font-variant-numeric:tabular-nums}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours .is-off td{color:var(--orange)}
.hours__note{margin-top:14px; font-size:14.5px; color:var(--ink-3)}

/* 비급여 진료비 표 — 30개 항목이라 .rows(한 줄 70px) 로는 페이지가 한없이 길어진다.
   촘촘한 2열 표(항목|금액)로 줄이고, 작은 구분 4개는 좌우 2단으로 나란히 둔다. */
.fee-groups{display:grid; grid-template-columns:1fr 1fr; gap:10px 56px; align-items:start}
.fee-groups>section{min-width:0}
.fee-groups>.fee-full{grid-column:1/-1}
.fee-h{font-size:17px; font-weight:800; color:var(--navy); letter-spacing:-.02em; margin:30px 0 6px}
.fee{width:100%; border-collapse:collapse; font-size:15.5px}
.fee td{padding:11px 6px; border-bottom:1px solid var(--line); vertical-align:top}
.fee td:first-child{color:var(--ink)}
.fee td:last-child{text-align:right; white-space:nowrap; color:var(--ink-2); font-variant-numeric:tabular-nums; padding-left:18px}
/* 제증명서 16종은 표 하나면 세로가 길어서 안쪽을 다시 2단으로 */
.fee-wrap{display:grid; grid-template-columns:1fr 1fr; gap:0 56px}
.fee-note{margin:12px 0 0; padding-left:17px; color:var(--ink-3); font-size:14px; line-height:1.7}
@media (max-width:768px){
  .fee-groups,.fee-wrap{grid-template-columns:1fr}
  .fee-groups{gap:0}
  /* 나뉜 두 표가 세로로 이어지면 첫 표의 마지막 선과 둘째 표 사이가 뜬다 — 이어진 한 표처럼 보이게 */
  .fee-wrap>table:first-child tr:last-child td{border-bottom:1px solid var(--line)}
}
@media (max-width:480px){
  /* 좁은 화면에서 긴 항목명(뼈이식 · 상악동 거상술 …)이 한 어절씩 떨어져 8줄(213px)이 됐다
     — 2026-08-24 실측. 금액 칸의 nowrap 을 풀어 항목명에 폭을 돌려주고,
     전역 keep-all 대신 어절 중간에서도 줄을 바꿀 수 있게 한다. */
  .fee{font-size:14.5px}
  .fee td:last-child{white-space:normal; min-width:86px}
  .fee td:first-child{overflow-wrap:anywhere}
}

/* 갤러리 */
.gal{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
/* 🔴 한 줄에 놓인 사진은 높이를 맞춘다.
   칸마다 비율이 달라(g-8 은 16:9, g-4 는 1:1) 그대로 두면 오른쪽이 짧아 계단처럼 보인다
   — 광고주 지적 2026-08-19. aspect-ratio 는 그 칸의 **최소 높이**로만 쓰이게 하고,
   실제 높이는 그 줄에서 가장 큰 칸이 정한다. 짧은 칸은 늘어나며 사진이 cover 로 채운다. */
.gal>figure{margin:0; border-radius:var(--r); overflow:hidden; background:var(--mint); position:relative;
/* ⚠️ height:100% 만 주면 aspect-ratio 가 **늘어난 높이에서 폭을 거꾸로 계산**해 칸 밖으로 나간다
   (1024px 에서 23px 넘쳤다). 폭은 격자가 정하도록 못 박고 min-width 로 축소도 허용한다. */
width:100%; min-width:0; height:100%}
.gal>figure img{width:100%; height:100%; object-fit:cover}
.gal>figure figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 18px 13px; color:#fff; font-size:14.5px; font-weight:600; letter-spacing:-.02em; background:linear-gradient(transparent,rgba(20,26,32,.62))}
.gal .g-6{grid-column:span 6; aspect-ratio:4/3}
.gal .g-4{grid-column:span 4; aspect-ratio:1/1}
.gal .g-8{grid-column:span 8; aspect-ratio:16/9}
.gal .g-12{grid-column:span 12; aspect-ratio:21/9}

/* 정보 글 목록 */
.posts{border-top:1px solid var(--line)}
.posts>li{border-bottom:1px solid var(--line)}
.posts>li>a{display:grid; grid-template-columns:210px 1fr; gap:clamp(20px,3vw,36px); padding:26px 0; align-items:center}
.posts>li>a:hover .posts__t{color:var(--blue)}
.posts__media{border-radius:var(--r); overflow:hidden; background:var(--mint); aspect-ratio:4/3}
.posts__media img{width:100%; height:100%; object-fit:cover}
.posts__cat{display:inline-block; font-size:13px; font-weight:700; color:var(--blue); letter-spacing:.02em; margin-bottom:8px}
.posts__t{font-size:clamp(18px,2vw,21px); font-weight:700; color:var(--navy); letter-spacing:-.025em; line-height:1.45; transition:.15s}
.posts__d{margin-top:9px; color:var(--ink-2); font-size:15.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* 정보 글 본문 */
.article{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:clamp(32px,5vw,64px); align-items:start}
.prose{max-width:44em; font-size:clamp(16px,1.35vw,17.5px); line-height:1.85; color:var(--ink-2)}
.prose>h2{font-size:clamp(21px,2.3vw,27px); margin:clamp(38px,4vw,54px) 0 16px; padding-top:4px}
.prose>h2:first-child{margin-top:0}
.prose>h3{font-size:clamp(18px,1.9vw,21px); margin:32px 0 12px; color:var(--ink)}
.prose>p{margin:0 0 16px}
.prose>ul,.prose>ol{margin:0 0 18px; padding-left:2px}
.prose>ul>li,.prose>ol>li{position:relative; padding-left:20px; margin-bottom:9px}
.prose>ul>li::before{content:""; position:absolute; left:2px; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--blue)}
.prose>ol{counter-reset:p}
.prose>ol>li{counter-increment:p; padding-left:26px}
.prose>ol>li::before{content:counter(p) "."; position:absolute; left:0; top:0; font-weight:700; color:var(--blue)}
.prose strong{color:var(--ink); font-weight:600}
.prose a{color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.prose blockquote{margin:22px 0; padding:18px 22px; background:var(--blue-08); border-radius:var(--r); color:var(--ink-2)}
.prose blockquote>p:last-child{margin-bottom:0}
.prose table{width:100%; border-collapse:collapse; margin:22px 0; font-size:15.5px}
.prose table th,.prose table td{padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.prose table th{background:var(--bg-2); font-weight:700; color:var(--navy); white-space:nowrap}
.prose__scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.prose img{border-radius:var(--r); margin:22px 0}
.prose hr{border:0; border-top:1px solid var(--line); margin:38px 0}

/* 본문 옆 목차 */
.toc{position:sticky; top:96px; padding:22px 24px; background:var(--bg-2); border-radius:var(--r); font-size:14.8px}
.toc h2{font-size:14px; color:var(--ink); margin-bottom:13px; letter-spacing:.01em}
.toc ol{counter-reset:t; display:grid; gap:9px}
.toc li{counter-increment:t; position:relative; padding-left:20px; line-height:1.55}
.toc li::before{content:counter(t); position:absolute; left:0; top:0; font-size:12.5px; font-weight:700; color:var(--blue-16)}
.toc a{color:var(--ink-2)}
.toc a:hover{color:var(--navy)}

.article__meta{margin-top:44px; padding-top:22px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-3)}
.article__next{display:grid; gap:10px; margin-top:14px}

/* 정보 박스 */
.note{padding:22px 24px; background:var(--blue-08); border-radius:var(--r); color:var(--ink-2); font-size:15.5px}
.note strong{color:var(--navy)}
.callout{border-left:3px solid var(--blue); padding:4px 0 4px 20px; color:var(--ink-2)}

/* 하단 진료 문의 */
.cta{background:var(--mint-soft); border-top:1px solid var(--line-2)}
.cta__in{padding:clamp(48px,6vw,80px) 0; display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(28px,4vw,60px); align-items:center}
.cta h2{font-size:var(--fs-h2)}
.cta p{margin-top:14px; color:var(--ink-2); font-size:var(--fs-lead)}
.cta__tel{display:inline-flex; align-items:baseline; gap:12px; margin-top:22px; font-size:clamp(26px,3.4vw,38px); font-weight:800; color:var(--navy); letter-spacing:-.03em; font-variant-numeric:tabular-nums}

/* 주차 안내 사진 — 병원 블로그에서 가져온 안내 사진이라 **원본이 685px 이하**다.
   크게 늘리면 뭉개지므로 묶음 폭을 760px 로 묶고 자르지 않는다(화살표·라벨이 잘리면 안내가 안 된다). */
.pk{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:640px; margin:0 0 26px}   /* 640 = 만들어 둔 가장 큰 폭. 넘기면 늘어나 흐려진다 */
.pk>figure{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.pk>.pk--wide{grid-column:1/-1}
.pk img{width:100%; height:auto}
.pk figcaption{padding:11px 14px 13px; font-size:14.5px; font-weight:600; color:var(--ink-2); text-align:center}
.pk figcaption b{color:var(--navy)}
@media (max-width:640px){ .pk{grid-template-columns:1fr; gap:14px} }

/* 약도 — 지도 API 를 쓰지 않고 직접 그린 SVG.
   폭을 440px 로 묶는다. 이보다 넓히면 글자가 같이 커져 도면이 성겨 보이고,
   좁히면 SVG 가 통째로 줄어들어 11px 글자가 못 읽을 크기가 된다. */
/* 제목·주소와 본문 사이에 가로선을 둔다(광고주 요청 2026-08-27).
   선이 없으면 주소 줄과 안내 목록 사이가 그냥 빈 공간으로 보인다. */
.amap__wrap{max-width:440px; margin:clamp(-30px,-2.3vw,-12px) auto 0; border-top:1px solid var(--navy-12); padding-top:clamp(26px,3vw,38px)}
.amap{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff}
/* 약도는 판이 둘이다(src/map.mjs) — 넓은 화면은 가로판, 600px 이하는 세로판만 보인다 */
.amap[data-v="tall"]{display:none}

/* 넓은 화면 — 왼쪽 안내 / 오른쪽 약도.
   세로로 쌓으면 PC 에서 한 화면에 안 들어와 스크롤이 길어진다.
   약도 폭은 440px 로 고정한다(도면 좌표 공간과 같은 값이라 글자가 1:1 로 선명하다).
   DOM 은 약도가 먼저지만, 여기서는 자리만 오른쪽으로 옮긴다 — 좁은 화면 순서는 그대로 둔다. */
@media (min-width:960px){
  .amap__wrap{
    /* 1180 을 다 쓰면 왼쪽 칸이 630px 이 되어 안내 세 줄이 허전해진다.
       약도 440 + 여백 + 안내 480 정도로 묶어 가운데 세운다. */
    max-width:1000px; margin-inline:auto;   /* margin-top 은 기본 규칙(음수)을 살린다 */
    display:grid; align-items:center;
    grid-template-columns:1fr 440px; gap:clamp(32px,3.4vw,48px);
  }
  .amap__map{grid-column:2; grid-row:1}
  .amap__side{grid-column:1; grid-row:1}
  .amap__legend{margin-top:0}
  .amap__legend b{font-size:16.5px}
  .amap__btns .btn{flex:0 1 auto}
}

/* 🔴 좁은 화면에서는 좌우 여백을 걷어내고 화면 폭을 다 쓴다.
   SVG 는 통째로 같은 비율로 줄어들기 때문에, 폭이 줄면 글자도 같이 줄어든다.
   320px 화면에서 여백을 두면 도면이 0.61배가 되어 12.5px 라벨이 7.6px 로 렌더된다 — 못 읽는다.
   여백을 없애면 0.73배까지 올라간다. `100vw` 는 스크롤바를 포함하므로 쓰지 않고
   거터 변수만큼 음수 마진을 준다. */
@media (max-width:600px){
  .amap[data-v="wide"]{display:none}
  .amap[data-v="tall"]{display:block}
  .amap__wrap{margin-inline:calc(var(--gut) * -1)}
  .amap{border-radius:0; border-left:0; border-right:0}
  .amap__legend, .amap__btns{margin-inline:var(--gut)}
}

.amap__legend{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px}
.amap__legend li{display:flex; gap:13px; align-items:flex-start}
.amap__legend b{display:block; font-size:15.5px; font-weight:700; color:var(--ink); letter-spacing:-.015em}
.amap__legend span:not([class]){display:block; margin-top:2px; font-size:14px; color:var(--ink-2)}
.amap__no{flex:0 0 auto; width:26px; height:26px; border-radius:50%; margin-top:2px;
display:grid; place-items:center; font-size:13px; font-weight:800; color:#fff; letter-spacing:0}
.amap__no--bus{background:var(--blue)}
.amap__no--mark{background:var(--navy)}
.amap__no--park{background:var(--ink-2)}

.amap__btns{margin-top:24px; display:flex; flex-wrap:wrap; gap:9px}
.amap__btns .btn{flex:1 1 auto; justify-content:center; text-align:center}

/* 진료시간 — 표가 아니라 줄 나눔 텍스트.
   요일과 시간을 세로로 맞춰 훑기 쉽게만 하고, 격자선은 넣지 않는다.
   격자선을 넣으면 안내판처럼 딱딱해진다 — 요청은 "깔끔하게" 였다. */
.hrs{margin-top:18px; display:grid; grid-template-columns:auto 1fr; gap:10px 18px; align-items:baseline}
.hrs__k{font-weight:700; color:var(--ink); white-space:nowrap}
.hrs__v{color:var(--ink-2); font-variant-numeric:tabular-nums; letter-spacing:.01em}
.hrs__v.is-off{color:var(--orange); font-weight:700}
/* 부가 설명은 시간 아래 한 칸 내려 붙인다 */
.hrs__n{grid-column:2; margin-top:-6px; font-size:13.5px; color:var(--ink-3)}
/* 좁은 화면에서도 요일·시간을 **나란히** 둔다. 세로로 쪼개면 9줄이 되어 오히려 지저분하다
   — 320px 에서도 "월요일 ~ 금요일  09:30 - 18:30" 이 한 줄에 들어가는 것을 실측했다. */
@media (max-width:520px){
  .hrs{gap:9px 12px}
  .hrs__k{font-size:15px}
  .hrs__v{font-size:15px}
}

/* 버스 노선 — 번호가 한눈에 들어오게 */
.buses{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.buses li{padding:8px 14px; border:1px solid var(--line-2); border-radius:8px;
background:#fff; font-size:15px; font-weight:700; color:var(--navy); letter-spacing:-.01em}

/* 푸터 */
.ft{background:#fff; border-top:1px solid var(--line); padding:52px 0 40px; font-size:14.8px; color:var(--ink-3)}
.ft__top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; padding-bottom:34px; border-bottom:1px solid var(--line-2)}
.ft__logo{display:flex; align-items:center; margin-bottom:16px}
.ft__logo img{width:auto; height:38px}
.ft h2{font-size:14.5px; color:var(--ink); margin-bottom:13px; letter-spacing:-.01em}
.ft ul{display:grid; gap:9px}
.ft a:hover{color:var(--navy)}
/* 공식 채널 — 터치 영역을 44px 로 잡는다 */
.ft__ch{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px}
.ft__ch a{display:inline-flex; align-items:center; min-height:44px; padding:0 15px;
border:1px solid var(--line-2); border-radius:999px; font-size:14px; font-weight:600; color:var(--ink-2)}
.ft__ch a:hover{border-color:var(--navy); color:var(--navy)}
.ft__bot{padding-top:26px; display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center}
.ft__bot p{line-height:1.85}
.ft__legal{margin-left:auto; display:flex; gap:16px}
.ft__upd{margin-top:14px; font-size:13.5px; color:var(--ink-3)}
/* 관리자 링크는 있되 눈에 띄지 않게 둔다 */
.ft__admin{color:#b9c2ca}
.ft__admin:hover{color:var(--navy)}

/* 로그인해 두면 어느 페이지에서든 뜨는 관리 바.
   site.js 가 표시용 쿠키를 보고 넣는다 (권한은 서명된 HttpOnly 쿠키가 따로 갖고 있다) */
/* 스크롤하면 그냥 지나가게 둔다(static).
   sticky 로 두면 그 아래 붙는 헤더의 top 값을 바 높이에 맞춰야 하는데,
   폭에 따라 바가 두 줄이 되어 높이가 달라진다. 고정값으로는 맞출 수 없다. */
.adminbar{position:relative; z-index:70; background:var(--navy); color:#fff; font-size:14px}
.adminbar__in{max-width:var(--wrap); margin-inline:auto; padding:8px var(--gut); display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px}
.adminbar a{color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.adminbar span{opacity:.82}
.adminbar button{margin-left:auto; background:none; border:0; color:#fff; opacity:.75; cursor:pointer; font:inherit; padding:2px 6px}
.adminbar button:hover{opacity:1}
@media (max-width:560px){
  .adminbar{font-size:13px}
  .adminbar span{width:100%; margin-bottom:-2px}
}

/* 빵부스러기 */
.bc{display:flex; flex-wrap:wrap; gap:7px; font-size:13.8px; color:var(--ink-3)}
.bc li+li::before{content:"\203A"; margin-right:7px; color:var(--line)}
.bc a:hover{color:var(--navy)}

/* 반응형 */
/* 🔴 메뉴를 접는 기준이 1024 → 1119px 이다 (2026-08-27).
   예약 버튼이 늘면서 1025~1119px 구간에서 메뉴가 화면을 넘었다 — 그 폭에서는 버거로 접는다.
   ⚠️ 아래 .hd__nav 의 inset(74px) 은 헤더 높이와 짝이다. 헤더 높이를 바꾸면 함께 고칠 것. */
@media (max-width:1119px){
  .hd__nav{position:fixed; inset:74px 0 auto; display:none; flex-direction:column; align-items:stretch; gap:0; background:#fff; border-bottom:1px solid var(--line); padding:8px 16px 20px; max-height:calc(100dvh - 74px); overflow-y:auto}
  .hd__nav.is-open{display:flex}
  .hd__nav>li>a,.hd__nav>li>button{width:100%; text-align:left; padding:15px 12px; font-size:16.5px}
  .hd__sub{position:static; transform:none; opacity:1; visibility:visible; min-width:0; border:0; box-shadow:none; padding:0 0 8px 12px; display:none}
  .hd__sub.is-open{display:block}
  .hd__burger{display:flex}
  .hd__logo img{height:32px}
  .hd__tel{order:3; padding:9px 15px; font-size:14.5px}
  .hd__book{order:4; padding:8px 14px; font-size:14px}   /* 전화 오른쪽(광고주 요청 2026-08-27) */
  .split{grid-template-columns:1fr; gap:26px}
  .split--flip .split__media{order:0}
  .cta__in{grid-template-columns:1fr}
  /* 진료 문의 구역은 전화번호가 커서 화면 끝에 붙으면 특히 답답하다. 여백을 더 준다 */
  .cta .wrap{padding-inline:calc(var(--gut) + 8px)}
  .ft__top{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width:768px){
  /* 🔴 좌우 여백을 줄이지 않는다. 예전에는 18px 로 좁혔는데,
     좁은 화면일수록 글자가 화면 끝에 붙어 답답해 보인다는 지적을 받았다(2026-08-19).
     약도만 예외로 여백을 걷어낸다(.amap__wrap) — 도면은 넓을수록 글자가 커진다. */
  :root{--gut:22px}
  .hero__media{aspect-ratio:auto; min-height:0; height:auto}
  .hero__media img{aspect-ratio:16/11}
  .hero__media::after{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.7) 46%,rgba(255,255,255,.94) 100%)}
  .hero__txt{position:static; padding:34px 0 44px; background:linear-gradient(180deg,#fff,var(--mint-soft))}
  .hero__cta{gap:9px}
  .rows>li{grid-template-columns:1fr; gap:7px; padding:20px 0}
  .tenets>li{grid-template-columns:1fr; gap:8px}
  .gal{gap:10px}
  .gal .g-6,.gal .g-4,.gal .g-8{grid-column:span 12}
  .gal .g-4{aspect-ratio:4/3}
  .gal .g-12{aspect-ratio:16/10}
  .ft__top{grid-template-columns:1fr}
  .ft__legal{margin-left:0; width:100%}
  /* 🔴 푸터 링크 터치 영역 — 휴대폰에서 높이 18px · 간격 17px 이라 옆 줄을 잘못 누르기 쉬웠다
     (2026-08-31 실측). 세로 여백을 줘 **줄 간 간격을 44px 이상**으로 벌린다.
     헤더처럼 투명 ::after 로 넓히면 옆 링크와 영역이 겹쳐 오탭이 더 는다 — 실제로 벌려야 한다. */
  .ft ul{gap:0}
  .ft nav a{display:block; padding:9px 0}
  .ft__legal{gap:0 20px; flex-wrap:wrap}
  .ft__legal a{display:inline-block; padding:8px 0}
  .ft__bot p a{display:inline-block; padding:6px 0}
  .btn{padding:13px 22px; font-size:15.5px}
}
/* 헤더는 로고 + 햄버거 + 전화번호가 한 줄에 들어가야 한다.
   로고가 가로형(820:180)이라 폭을 많이 먹으므로 단계적으로 줄인다. */
@media (max-width:560px){
  .hd__in{gap:10px}
  .hd__logo img{height:28px}
  .hd__tel span{display:none}       /* "진료문의" 라벨을 감추고 번호만 남긴다 */
  .hd__book span{display:none}      /* "네이버" 를 감추고 "예약" 만 남긴다 */
  .hd__tel{padding:9px 14px; font-size:14px}
}
/* 🔴 예약 버튼이 늘어난 만큼 좁은 화면 기준을 400 → 430px 으로 넓혔다(2026-08-27).
   412px(갤럭시) 에서 로고+메뉴+예약+전화 합이 화면을 9px 넘었다 — 실측으로 잡았다. */
@media (max-width:430px){
  .hd__in{gap:7px; min-height:64px}
  .hd__logo img{height:23px}
  .hd__burger{width:38px; height:38px; border-radius:10px}
  .hd__tel{padding:7px 10px; font-size:12.5px}
  .hd__book{padding:6px 9px; font-size:12.5px; border-width:1.2px}
  .hd__nav{inset-block-start:64px; max-height:calc(100dvh - 64px)}
}
/* 320px 급 화면에서는 로고·메뉴·전화만으로도 꽉 찬다. 예약 버튼은 여기서만 감춘다 —
   푸터와 페이지 하단 「진료 예약 · 문의」 에 같은 링크가 있어 접근 경로는 남는다. */
@media (max-width:359px){ .hd__book{display:none} }

@media (max-width:420px){
  .subjects{grid-template-columns:1fr 1fr}
}
/* ── 모션 ───────────────────────────────────────────────────────────────
   광고주가 **화려한 애니메이션을 명시적으로 거부**했고, 스크롤 등장 애니메이션도 쓰지 않는다
   (CLAUDE.md 디자인 원칙). 그렇다고 움직임이 0 이면 화면이 굳어 보인다.

   그래서 **사용자가 건드렸을 때만** 반응하는 움직임으로 제한한다.
   저절로 움직이는 것은 약도의 도보 경로 하나뿐이고, 그것도 길 방향을 알려 주는 기능이다.

   ❌ 쓰지 않는 것 — 스크롤 등장, 패럴랙스, 자동 넘김, 큰 이동, 튀는 이징
   ✅ 쓰는 것   — hover·focus 전환, 사진 살짝 확대, 아코디언 열림, 도보 경로 흐름

   전부 아래 prefers-reduced-motion 에서 꺼진다. */

/* ── 첫 화면 등장 ──
   🔴 **스크롤 등장이 아니라 페이지 로드 시 1회**다. 둘은 다르다.
     · 광고주가 거부한 것은 "스크롤 등장 애니메이션"이다
     · IntersectionObserver 를 쓰지 않으므로 목록이 비어 보이는 사고가 없다
     · CSS 애니메이션은 반드시 끝나므로 요소가 숨겨진 채 남을 수 없다
     · CSS 가 아예 안 실리면 규칙도 없어서 그냥 보인다 — 어느 쪽으로도 안전하다

   위로 10px, 0.55s. 더 크게·길게 잡으면 "화려한 연출"이 된다. */
@keyframes riseIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* ⚠️ 브라우저 패널에서는 이 글자들이 `opacity:0` 으로 잡힌다. 버그가 아니다 —
   패널이 렌더를 안 해서 애니메이션이 시작되지 않고, `fill:both` 가 시작 상태를 붙들고 있을 뿐이다.
   실제 브라우저에서는 바로 재생된다. 스크롤 등장과 달리 **조건 없이 즉시 시작**하므로
   중간에 멈출 일이 없고, 감속 선호에서는 아래 블록이 애니메이션을 없애 글자가 그대로 보인다. */

.hero__eyebrow,.hero h1,.hero__lead,.hero__cta,
.phero .bc,.phero h1,.phero__lead{animation:riseIn .55s cubic-bezier(.22,1,.36,1) both}
.hero__eyebrow,.phero .bc{animation-delay:.05s}
.hero h1,.phero h1{animation-delay:.13s}
.hero__lead,.phero__lead{animation-delay:.21s}
.phero .subnav{animation:riseIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay:.29s}
.hero__cta{animation-delay:.29s}

/* eyebrow 앞의 짧은 선이 그려진다 */
.hero__eyebrow::before{animation:lineDraw .5s cubic-bezier(.22,1,.36,1) .3s both}
@keyframes lineDraw{from{width:0}to{width:22px}}

/* 🔴 본문 스크롤 등장은 넣지 않는다 — 광고주가 명시적으로 거부한 항목이다.
   한 번 만들었다가 되돌렸다(2026-08-18). 글자를 숨겨 두는 규칙을 여기에 만들지 말 것.
   본문에 움직임이 필요하면 **광고주 동의를 먼저 받는다.** */

/* 갤러리 설명글만 — 사진은 안 움직이고 글자 자리만 살짝 벌어진다 */
@media (hover:hover){
  .gal>figure figcaption{transition:padding-bottom .3s ease}
  .gal>figure:hover figcaption{padding-bottom:17px}
}

/* 헤더 — 스크롤해 내려가면 그림자가 생겨 본문 위에 떠 있다는 것을 보여 준다 */
.hd{transition:box-shadow .25s ease, background-color .25s ease}
.hd.is-stuck{box-shadow:0 1px 0 rgba(35,42,49,.04), 0 6px 20px rgba(35,42,49,.07)}

/* 자주 묻는 질문 — 답이 펼쳐질 때 딸깍 나타나지 않게 */
.faq details[open] .faq__a{animation:faqIn .28s cubic-bezier(.22,1,.36,1)}
@keyframes faqIn{from{opacity:0; transform:translateY(-5px)}to{opacity:1; transform:none}}

/* 버튼 — 누를 수 있다는 느낌을 준다. 뜨는 정도는 1px 로 아주 얕게 */
@media (hover:hover){
  .btn{transition:background-color .16s, border-color .16s, transform .16s, box-shadow .16s}
  .btn--nav:hover{transform:translateY(-1px); box-shadow:0 4px 14px rgba(33,41,122,.22)}
  .btn--out:hover{transform:translateY(-1px)}
}
.btn:active{transform:translateY(0)}

/* 진료과목 목록 — hover 한 칸이 살짝 앞으로 */
@media (hover:hover){
  .subjects>li>a:hover{transform:translateY(-2px); box-shadow:var(--sh)}
}

/* 버스 노선 칩 */
.buses li{transition:border-color .15s, color .15s, transform .15s}
@media (hover:hover){ .buses li:hover{border-color:var(--navy); transform:translateY(-1px)} }

/* 약도의 도보 경로 — 정류장에서 병원 쪽으로 점선이 흐른다.
   장식이 아니라 **어느 방향으로 걷는지**를 알려 주는 표시다. 느리게 둔다. */
.amap__walk{animation:walk 2.4s linear infinite}
@keyframes walk{to{stroke-dashoffset:-20}}

/* 🔴 여기서 애니메이션을 끄므로, **글자를 숨겨 두는 규칙을 만들면 안 된다.**
   `opacity:0` 으로 숨긴 뒤 애니메이션으로 나타내는 방식은 이 블록 때문에
   애니메이션만 죽고 글자는 숨은 채로 남는다 — 실측으로 확인한 구멍이다.
   히어로 등장은 숨김 없이 `animation` 만 쓰므로 여기서 꺼져도 글자가 그대로 보인다. */
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
@media print{.hd,.cta,.hd__burger{display:none}}

/* 정보 글 반응형 */
@media (max-width:1024px){
  .article{grid-template-columns:1fr}
  .toc{position:static; order:-1}
}
@media (max-width:768px){
  .posts>li>a{grid-template-columns:1fr; gap:14px; padding:22px 0}
  .posts__media{aspect-ratio:16/9}
}