/* ===========================================================
   가슴성형.com 디자인 시스템
   컨셉: 인쇄된 의료 안내 책자. 아이보리 지면 + 브라운 잉크.
   그림자·그라데이션·둥근 덩어리 없이 지면·괘선·활자로만 구성한다.
   =========================================================== */

/* ---------- 1. 폰트 ---------- */
/* 서브셋은 scripts/fonts.mjs 가 이 사이트가 실제로 쓰는 글자만 잘라 만든다. */
/* 명조는 제목 계열에만 쓰고 전부 700 이다. 400 은 한 곳도 쓰지 않아 싣지 않는다.
   (design.css 의 var(--serif) 사용처 6곳 전부 font-weight:700 임을 확인) */
@font-face{
  font-family:"Myeongjo";
  src:url("/assets/fonts/myeongjo-700.woff2?v=32856690be") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Figure";
  src:url("/assets/fonts/figure.woff2?v=32856690be") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bon";
  src:url("/assets/fonts/bon-400.woff2?v=32856690be") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bon";
  src:url("/assets/fonts/bon-600.woff2?v=32856690be") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

/* ---------- 2. 토큰 ---------- */
:root{
  /* 지면 */
  --paper:      #faf7f1;
  --paper-warm: #f4efe5;
  --paper-card: #fffdf9;

  /* 잉크. 대비는 scripts/verify.mjs 가 계산해 게이트한다. */
  --ink:   #22201c;   /* 본문·제목 */
  --ink-2: #4e4740;   /* 부제·캡션 */
  --ink-3: #6b6359;   /* 최소 크기 메타 */

  /* 괘선. 값은 scripts/verify.mjs 의 대비 게이트를 통과한 것이다.
     --rule 1.85:1 (장식 헤어라인), --rule-strong 3.03:1 (UI 경계·표 구조),
     --fig-ink 4.66:1 (여백 숫자·리스트 마커는 장식이 아니라 텍스트다). */
  --rule:        #c1b7a6;
  --rule-strong: #968e81;
  --fig-ink:     #756f65;

  /* 강조 */
  --clay:      #8a4a2a;   /* 링크·마크 */
  --clay-deep: #6d3920;
  --clay-tint: #f0e6dc;

  /* 활자 */
  --serif: "Myeongjo", "Nanum Myeongjo", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  --sans:  "Bon", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --fig:   "Figure", "Cormorant Garamond", Georgia, serif;

  /* 리듬 */
  --measure: 37rem;      /* 본문 단 너비 */
  --gut:     1.5rem;
  --rhythm:  1.6rem;
  /* 지면 폭. 본문 단 + 좌우 여백단(4.6rem x2).
     이 값으로 구획 괘선이 본문과 정확히 같은 폭이 된다.
     넓게 두면 괘선만 본문보다 한참 길어져 본문이 왼쪽으로 밀린 것처럼 보인다. */
  /* 폼 오류 문구. 대비 검사에 넣으려면 토큰이어야 한다. */
  --err:     #8a2323;

  --page:    46.2rem;
  --margin:  4.6rem;
}

/* ---------- 3. 리셋 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;      /* 17px */
  line-height:1.85;
  font-feature-settings:"kern" 1;
  text-rendering:optimizeLegibility;
  /* 한글 줄바꿈: 이게 없으면 단어 중간에서 잘린다. 필수. */
  word-break:keep-all;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--clay);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{color:var(--clay-deep)}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
/* 앵커로 뛴 자리가 따라 내려온 머리말 뒤로 숨지 않게 한다.
   머리말 높이는 좁은 화면 57px, 넓은 화면 62px 이라 4.5rem(76px)이면 넉넉하다. */
[id]{scroll-margin-top:4.5rem}

/* 지면 결. 아주 옅게. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:.5;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

/* ---------- 4. 레이아웃 ---------- */
.shell{max-width:var(--page);margin:0 auto;padding:0 var(--gut)}
.col{max-width:var(--measure)}

/* ---------- 5. 머리말 ---------- */
/* 머리말은 따라 내려온다. 문서 한 편이 1,900~2,500자라 중간에서 마음을 정한 사람이
   접수하려면 맨 위나 맨 아래까지 되돌아가야 했다. 목차 띠까지 붙이면 좁은 화면에서
   두 줄이 되어 첫 화면의 3할을 먹으므로 머리말만 붙인다.
   z-index 가 필요하다. body>* 가 전부 z-index:1 이라 그대로 두면 문서 순서상
   뒤에 오는 도판이 따라 내려온 머리말 위로 지나간다(실측). */
.mast{position:sticky;top:0;z-index:10;
  border-bottom:1px solid var(--rule);background:var(--paper)}
.mast-in{
  max-width:var(--page);margin:0 auto;padding:.95rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.wordmark{display:flex;align-items:baseline;gap:.55rem;text-decoration:none;color:var(--ink)}
.wordmark b{font-family:var(--serif);font-weight:700;font-size:1.075rem;letter-spacing:-.02em}
.wordmark span{font-size:.72rem;color:var(--ink-3);letter-spacing:.02em}
.mast-acts{display:flex;align-items:center;gap:.7rem}
.mast-link{font-size:.78rem;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.mast-link:hover{color:var(--clay-deep)}
.mast-cta{
  font-size:.8rem;letter-spacing:-.01em;text-decoration:none;
  color:var(--clay-deep);border:1px solid var(--clay);
  padding:.4rem .85rem;white-space:nowrap;background:var(--clay-tint);
}
.mast-cta:hover{color:var(--paper);background:var(--clay)}

/* 목차 띠. 책의 러닝 목차처럼 줄바꿈한다.
   가로 스크롤로 두면 넘친 항목이 있다는 사실 자체가 보이지 않아 그대로 사라진다. */
.nav{border-bottom:1px solid var(--rule);background:var(--paper-warm)}
.nav-in{max-width:var(--page);margin:0 auto;padding:0 var(--gut)}
/* max-width:none 을 반드시 되돌려야 한다. 위의 ul,ol 전역 규칙이 본문 단 폭(--measure)
   을 걸어 두는데, 그것이 목차에까지 적용되어 지면을 아무리 넓혀도 목차만 592px 에
   갇힌다. 1280px 에서 마지막 한 개가 둘째 줄로 떨어지던 진짜 원인이 이것이었다.
   .hero 가 figure 전역 규칙에 갇혔던 것과 같은 함정이다. */
.nav ol{display:flex;flex-wrap:wrap;gap:0 1.2rem;margin:0;padding:.5rem 0;
  list-style:none;max-width:none}
.nav li{margin:0}
.nav a{
  display:block;padding:.2rem 0;font-size:.8rem;letter-spacing:-.01em;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--clay-deep);border-bottom-color:var(--rule-strong)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--clay)}

/* ---------- 6. 표제부 ---------- */
.head{padding:3.4rem 0 0}
.kicker{
  font-family:var(--fig);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1rem;
}
h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.85rem,1.35rem + 2.1vw,2.85rem);
  line-height:1.32;letter-spacing:-.03em;margin:0 0 .9rem;
}
.lede{
  font-size:1.125rem;line-height:1.8;color:var(--ink-2);margin:0 0 1.6rem;
  max-width:var(--measure);
}
/* 인쇄물 판권 줄 */
.docline{
  display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.7rem 0;margin:0 0 2.6rem;
  font-size:.775rem;color:var(--ink-3);letter-spacing:-.005em;
}
.docline b{font-weight:600;color:var(--ink-2)}
/* 숫자는 본문 서체가 아니라 숫자 전용 서체로 낸다. time 도 같이 잡는다.
   날짜만 라이닝 숫자로 남으면 같은 줄의 분량 숫자와 높이가 어긋나 보인다. */
.docline i,.docline time{font-family:var(--fig);font-style:normal;font-size:.9rem}

/* ---------- 7. 본문 ---------- */
main{padding-bottom:4rem}
.sec{position:relative;padding-top:2.5rem;margin-top:2.5rem;border-top:1px solid var(--rule)}
.sec:first-of-type{border-top:0;margin-top:0;padding-top:0}
/* 여백 숫자. 인쇄 안내서의 장 표시. */
.sec>.num{
  font-family:var(--fig);font-size:1.05rem;color:var(--fig-ink);
  letter-spacing:.06em;display:block;margin:0 0 .5rem;
}
h2{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.3rem,1.16rem + .6vw,1.6rem);
  line-height:1.45;letter-spacing:-.025em;margin:0 0 .85rem;
}
h3{
  font-family:var(--serif);font-weight:700;font-size:1.075rem;line-height:1.55;
  letter-spacing:-.02em;margin:2.1rem 0 .5rem;color:var(--ink);
  position:relative;padding-top:.85rem;
}
/* 짧은 괘선은 제목 '위' 에 둔다. 글자 앞에 인라인으로 놓으면 한글 앞에서
   em 대시처럼 읽힌다(한국어 문장부호가 아닌 인상을 준다). */
h3::before{content:"";position:absolute;top:0;left:0;width:1.5rem;height:2px;background:var(--clay)}
p{margin:0 0 1.05rem;max-width:var(--measure)}
ul,ol{margin:0 0 1.15rem;padding-left:1.25rem;max-width:var(--measure)}
li{margin:.42rem 0;padding-left:.15rem}
li::marker{color:var(--fig-ink)}
strong{font-weight:600}
em{font-style:normal;background:linear-gradient(transparent 62%,var(--clay-tint) 0)}

/* 인쇄 사이드바 */
.note{
  border-left:2px solid var(--clay);padding:.15rem 0 .15rem 1.15rem;
  margin:1.6rem 0;max-width:var(--measure);
}
.note p{margin:0 0 .55rem}
.note p:last-child{margin-bottom:0}
/* 라벨은 한글이 들어오므로 반드시 --sans 다.
   --fig(Cormorant)는 라틴 전용이라 한글을 넣으면 조용히 폴백한다. */
.note .label{
  display:block;font-family:var(--sans);font-weight:600;font-size:.775rem;
  letter-spacing:.02em;color:var(--clay);margin:0 0 .45rem;
}

/* 요약 카드 */
.card{
  background:var(--paper-card);border:1px solid var(--rule);
  padding:1.35rem 1.5rem;margin:1.7rem 0;max-width:var(--measure);
}
.card p:last-child,.card ul:last-child,.card ol:last-child{margin-bottom:0}

/* 이 문서에서 다루는 것 */
.toc{border:1px solid var(--rule);background:var(--paper-card);
  padding:1.25rem 1.5rem;margin:0 0 2.8rem;max-width:var(--measure)}
.toc h2{font-size:.8rem;font-family:var(--sans);font-weight:600;letter-spacing:.06em;
  text-transform:none;color:var(--ink-3);margin:0 0 .7rem}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:t}
.toc li{margin:.3rem 0;counter-increment:t;display:flex;gap:.65rem;align-items:baseline}
.toc li::before{content:counter(t,decimal-leading-zero);font-family:var(--fig);
  font-size:.85rem;color:var(--fig-ink);flex:none}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--clay-deep);text-decoration:underline}

/* ---------- 8. 표 ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6rem 0;max-width:var(--measure)}
table{border-collapse:collapse;width:100%;min-width:29rem;font-size:.925rem;line-height:1.7}
caption{caption-side:top;text-align:left;font-size:.78rem;color:var(--ink-3);
  padding:0 0 .5rem;letter-spacing:-.005em}
th,td{padding:.6rem .8rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule)}
thead th{border-bottom:1px solid var(--rule-strong);font-weight:600;
  font-size:.8rem;letter-spacing:.02em;color:var(--ink-2);white-space:nowrap}
tbody th{font-weight:600;white-space:nowrap;color:var(--ink)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:1px solid var(--rule-strong)}

/* ---------- 9. 도판 ---------- */
figure{margin:1.9rem 0;max-width:var(--measure)}
figure img{border:1px solid var(--rule);background:var(--paper-card)}
figcaption{font-size:.795rem;line-height:1.65;color:var(--ink-3);
  margin-top:.6rem;padding-left:.75rem;border-left:1px solid var(--rule-strong)}
figcaption b{font-weight:600;color:var(--ink-2)}

/* 표제 도판. 가로 도해는 본문 폭까지, 세로 사진은 좁게 잡는다.
   세로 사진을 본문 폭으로 늘리면 원본 해상도를 넘어서고 화면도 다 잡아먹는다. */
/* ---------- 도판 ----------
   전면 띠. .shell 밖에 있으므로 지면 폭에 갇히지 않는다.
   높이를 고정하고 object-fit:cover 로 잘라 어느 화면에서나 같은 리듬을 만든다.
   그래서 여기에는 사진만 들어간다. 도해를 넣으면 설명이 잘려 나간다. */
/* 전역 figure 규칙(max-width:--measure, img 에 테두리)을 반드시 되돌려야 한다.
   안 그러면 전면 띠가 본문 단 폭(592px)에 갇히고 사진에 테두리가 생긴다. 실측으로 물렸다. */
.hero{margin:0;max-width:none;background:var(--paper-warm);border-bottom:1px solid var(--rule);overflow:hidden}
.hero img{
  display:block;width:100%;
  height:clamp(9.5rem,26vw,16rem);
  /* 초점은 편마다 다르다. 481x482 같은 정사각 원본을 가로 띠로 자르면 20% 만 남으므로
     어디를 남길지가 결과를 좌우한다. PLAN 의 heroPos 로 준다. */
  object-fit:cover;object-position:var(--hp,center 38%);
  border:0;
}
.hero--tall img{height:clamp(13rem,38vw,24rem)}

/* 본문 도판. 문단을 읽은 뒤에 오도록 섹션 끝에 붙인다. */
.fig{margin:2rem 0 .4rem;max-width:min(var(--measure),var(--pw,100%))}
.fig img{display:block;width:100%;border:1px solid var(--rule);background:var(--paper-card)}
/* 여백이 이미 넉넉한 렌더·도해는 테두리 대신 지면색 판 위에 얹는다. */
.fig--pad img{border:0;background:var(--paper-warm);padding:1.1rem}
figcaption{
  font-size:.79rem;line-height:1.65;color:var(--ink-3);
  margin:.55rem 0 0;padding-left:.7rem;border-left:1px solid var(--rule);
  max-width:var(--measure);
}

/* 여백단까지 밀어내는 도판. 음수 여백은 그 구간의 .shell 패딩과 같아야 한다.
   ( <50rem 은 --gut, >=50rem 은 --margin. 아래 미디어쿼리에서 맞춘다. ) */
.fig--wide{max-width:none;margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1)}
.fig--wide img{margin:0 auto;max-width:var(--pw,100%)}
.fig--wide figcaption{margin-left:var(--gut)}

/* 격자. auto-fit 이라 항목이 둘이면 2열, 셋이면 3열이 된다.
   최소 폭을 8.5rem 으로 둬야 360px 화면에서도 2열이 유지된다. */
.figgrid{
  display:grid;gap:1rem .9rem;margin:2rem 0 .4rem;
  grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  max-width:var(--measure);
}
.figgrid figure{margin:0}
/* 칸 높이를 맞춘다. 비율이 제각각인 사진을 그대로 두면 칸마다 높이가 달라지고
   캡션이 층진다(실측: 인물 두 장이 668px 대 737px 이라 두 번째 캡션만 아래로 밀렸다).
   --ar 은 가장 납작한 항목의 비율이라 다른 것은 아래쪽만 잘린다. 인물은 머리가
   위에 있으므로 object-position 을 위로 붙여 얼굴이 잘리지 않게 한다. */
.figgrid img{display:block;width:100%;border:1px solid var(--rule);background:var(--paper-card);
  aspect-ratio:var(--ar,auto);object-fit:cover;object-position:center top}
/* 제품 렌더는 잘리면 안 된다. 칸 비율은 유지하되 안에서 축소해 넣는다.
   cover 로 두면 보형물 아래쪽이 잘려 나간다. */
.figgrid--pad img{border:1px solid var(--rule);background:var(--paper-warm);object-fit:contain}
.figgrid figcaption{font-size:.75rem;margin-top:.4rem;padding-left:.55rem}

/* 문서 카드 격자. 홈에서만 쓴다.
   본문 단을 넘어 여백단까지 밀어내야 카드가 셋씩 들어간다. */
.docgrid{
  list-style:none;margin:2rem 0 .5rem;padding:0;
  display:grid;gap:1.6rem 1.3rem;
  grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));
  max-width:none;
  margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
}
.docgrid li{margin:0}
.docgrid a{display:block;text-decoration:none;color:var(--ink)}
.docgrid img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--rule);margin-bottom:.6rem;
  filter:saturate(.88);transition:filter .2s ease;
}
.docgrid a:hover img{filter:saturate(1)}
.docgrid b{
  display:block;font-family:var(--serif);font-weight:700;
  font-size:1.02rem;line-height:1.45;letter-spacing:-.02em;margin-bottom:.25rem;
}
.docgrid a:hover b{color:var(--clay-deep);text-decoration:underline;text-underline-offset:.18em}
.docgrid span{display:block;font-size:.79rem;line-height:1.6;color:var(--ink-3)}

/* ---------- 10. 질문 목록 ---------- */
.qa{border-top:1px solid var(--rule);max-width:var(--measure);margin:1.7rem 0 0}
.qa>div{border-bottom:1px solid var(--rule);padding:1.15rem 0}
.qa h3{margin:0 0 .5rem;font-size:1.02rem;padding-top:0}
.qa h3::before{display:none}
.qa p:last-child{margin-bottom:0}

/* ---------- 11. 다음 문서 ---------- */
/* ---------- 11.5 상담 신청 ----------
 *
 * 문서 끝에서 바로 접수한다. 지면 폭을 넘어 여백단까지 밀어내고 바탕을 한 단계
 * 어둡게 두어, 읽던 문서가 끝나고 다른 것이 시작됐다는 것이 먼저 보이게 한다.
 */
.consult{
  margin:3.4rem calc(var(--gut) * -1) 0;
  padding:2.1rem var(--gut) 1.9rem;
  background:var(--paper-warm);
  border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule);
}
.consult h2{font-size:.8rem;font-family:var(--sans);font-weight:600;letter-spacing:.06em;
  color:var(--ink-3);margin:0 0 .9rem}
.consult-lede{max-width:var(--measure);margin:0 0 1.5rem;color:var(--ink-2);
  font-size:.95rem;line-height:1.75}

/* 허니팟.
   ⛔ display:none 이나 visibility:hidden 으로 감추지 말 것. 그 속성을 읽고 건너뛰는
      봇이 있고, 무엇보다 일부 브라우저 자동완성이 보이지 않는 칸을 채워 **사람의
      신청을 스팸으로 만든다**. 화면 밖으로 밀어내기만 한다. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.cform{max-width:var(--measure)}
.cform-grid{display:grid;gap:.9rem 1rem;grid-template-columns:1fr 1.25fr}
.cform-grid p{margin:0;max-width:none}
.cform label{display:block;font-size:.8rem;color:var(--ink-2);margin:0 0 .32rem}
.cform label i{font-style:normal;color:var(--ink-3)}
.cform input[type=text],.cform input[type=tel]{
  width:100%;font:inherit;font-size:.95rem;padding:.62rem .7rem;
  color:var(--ink);background:var(--paper-card);
  border:1px solid var(--rule-strong);border-radius:2px;
}
.cform input::placeholder{color:var(--ink-3);opacity:1}
.cform-agree{margin:1.05rem 0 0;max-width:none}
.cform-agree label{display:flex;gap:.5rem;align-items:flex-start;font-size:.82rem;margin:0}
.cform-agree input{flex:none;width:1rem;height:1rem;margin:.2rem 0 0;accent-color:var(--clay)}
.cform-agree a{color:var(--clay-deep)}
.cform-go{margin:1.15rem 0 0;max-width:none}
.cform-go button{
  font:inherit;font-size:.9rem;font-weight:600;letter-spacing:.02em;
  color:var(--paper);background:var(--clay);
  border:0;border-radius:2px;padding:.72rem 1.7rem;cursor:pointer;
}
.cform-go button:hover{background:var(--clay-deep)}
.cform-go button:disabled{background:var(--rule-strong);cursor:default}
.cform-msg{margin:.8rem 0 0;font-size:.85rem;min-height:1.25em;max-width:none}
.cform-msg--ok{color:var(--clay-deep)}
.cform-msg--err{color:var(--err)}
/* 접수된 뒤에는 입력 칸을 걷어 낸다. 남겨 두면 한 번 더 눌러 같은 건이 두 줄 생긴다. */
.cform--done .cform-grid,.cform--done .cform-agree,.cform--done .cform-go{display:none}

/* 즉시 닿는 창구. 폼을 남기고 기다리는 것 말고도 길이 있다는 것을 같이 보여 준다. */
.cways{list-style:none;margin:1.5rem 0 0;padding:0;max-width:none;
  display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.cways li{margin:0}
.cways a{display:block;padding:.75rem .85rem;text-decoration:none;
  background:var(--paper-card);border:1px solid var(--rule)}
.cways a:hover{border-color:var(--clay)}
.cways b{display:block;font-size:.88rem;font-weight:600;color:var(--ink)}
.cways span{display:block;font-size:.76rem;color:var(--ink-3);margin-top:.15rem}
.cways-note{margin:.75rem 0 0;font-size:.76rem;color:var(--ink-3);max-width:none}

.onward{border-top:1px solid var(--rule-strong);margin-top:3.2rem;padding-top:1.6rem}
.onward h2{font-size:.8rem;font-family:var(--sans);font-weight:600;letter-spacing:.06em;
  color:var(--ink-3);margin:0 0 1rem}
/* 괘선은 가로만 긋는다. 세로 괘선과 왼쪽 테두리로 액자를 만들면 항목 수가 열 수로
   나누어지지 않을 때 마지막 줄의 빈 칸에 테두리가 없어 사각형이 끊긴다(실측: 항목 3개가
   2열에 떨어져 오른쪽 아래가 잘려 보였다. 12편 전부에 있던 하자다).
   가로 괘선만 쓰면 어떤 개수에서도 깨지지 않고, 인쇄물의 색인처럼 읽힌다. */
.onward ul{display:grid;gap:0 1.7rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  list-style:none;padding:0;margin:0;max-width:none;
  border-top:1px solid var(--rule)}
.onward li{margin:0;padding:0;border-bottom:1px solid var(--rule)}
.onward a{display:block;padding:.9rem .1rem;text-decoration:none;height:100%}
.onward a:hover{background:var(--paper-card)}
.onward b{display:block;font-family:var(--serif);font-weight:700;font-size:1rem;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:.2rem}
.onward span{display:block;font-size:.815rem;line-height:1.6;color:var(--ink-3)}

/* ---------- 12. 고지 ---------- */
.disclaim{
  margin:3rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--rule);
  font-size:.79rem;line-height:1.75;color:var(--ink-3);max-width:var(--measure);
}

/* ---------- 13. 꼬리말 ---------- */
.foot{border-top:1px solid var(--rule-strong);background:var(--paper-warm);margin-top:0}
.foot-in{max-width:var(--page);margin:0 auto;padding:2.4rem var(--gut) 3rem;
  display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.foot h2{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.07em;
  color:var(--ink-3);margin:0 0 .7rem}
/* 문서 링크는 한 줄을 통째로 쓰고 가로로 흘린다. 예전에는 두 칸으로 쪼개 넣었는데
   폭이 좁아 격자가 2열로 접히면 '문서' 제목이 두 번 보여 오류처럼 읽혔다(실측). */
.foot-docs{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:1.4rem}
/* 여기도 ul,ol 전역의 본문 단 폭을 풀어야 한다. 안 그러면 발문 지면이 아무리 넓어도
   목록만 592px 에 갇혀 마지막 두 개가 둘째 줄로 떨어진다(.nav ol 과 같은 함정). */
.foot-docs ul{display:flex;flex-wrap:wrap;gap:.35rem .9rem;max-width:none}
.foot-docs li{margin:0}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:.3rem 0}
.foot a{color:var(--ink-2);text-decoration:none;font-size:.87rem}
.foot a:hover{color:var(--clay-deep);text-decoration:underline}
.foot address{font-style:normal;font-size:.87rem;line-height:1.8;color:var(--ink-2)}
.foot .mark{font-family:var(--serif);font-weight:700;font-size:1rem;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 .45rem}
.colophon{border-top:1px solid var(--rule);background:var(--paper-warm)}
.colophon p{max-width:var(--page);margin:0 auto;padding:1rem var(--gut) 1.6rem;
  font-size:.75rem;color:var(--ink-3);line-height:1.7}

/* ---------- 14. 좁은 화면 ---------- */
@media (max-width:50rem){
  /* 여백단이 없는 구간에서는 지면 자체를 본문 단 폭으로 좁힌다. */
  .shell,.mast-in,.nav-in,.foot-in,.colophon p{max-width:calc(var(--measure) + var(--gut) * 2)}
}
@media (max-width:40rem){
  body{font-size:1.0625rem;line-height:1.82}
  :root{--gut:1.15rem;--rhythm:1.35rem}
  .head{padding-top:2.3rem}
  .lede{font-size:1.06rem}
  .sec{padding-top:2rem;margin-top:2rem}
  .docline{gap:.4rem 1rem;font-size:.75rem}
  table{min-width:24rem;font-size:.885rem}
  .foot-in{gap:1.5rem}
  .figgrid{gap:.8rem .7rem}
  .fig--pad img{padding:.7rem}
  /* 이름 칸과 번호 칸을 나란히 두면 각각 8rem 남짓이 되어 번호가 잘려 보인다. */
  .cform-grid{grid-template-columns:1fr}
  /* 따라 내려오는 띠는 얇을수록 좋다. 좁은 화면에서 69px 는 첫 화면을 너무 먹는다. */
  .mast-in{padding-top:.7rem;padding-bottom:.7rem}
  /* 엄지로 누르는 화면에서는 단추를 지면 폭으로 편다. 글자 폭에 맞춰 두면
     390px 에서 220px 짜리가 되어 왼쪽으로 쏠린 채 작게 앉는다(실측). */
  .cform-go button{width:100%;padding-left:0;padding-right:0}
  /* 창구 셋이 auto-fit 2열에 떨어져 마지막 하나만 아랫줄에 남는다. 셋을 한 줄에
     넣기에는 "날짜를 골라 예약" 이 111px 에 아슬아슬해 접힐 위험이 있다.
     한 줄에 하나씩 쌓는 편이 어느 폭에서도 깨지지 않고 탭 면적도 넓다. */
  .cways{grid-template-columns:1fr}
  .mast-link{display:none}
}

/* ---------- 15. 넓은 화면: 여백단을 만들고 숫자를 그리로 내보낸다 ---------- */
@media (min-width:50rem){
  /* 머리와 발은 본문 단보다 넓은 지면을 쓴다.
     여백단(4.6rem x 2)을 빼고 나면 본문 단 안쪽이 592px 인데, 목차 열한 개는 686px 를
     차지한다. 그래서 1280px 에서 마지막 "병원 소개" 하나만 둘째 줄로 떨어졌다(실측).
     글자와 간격을 줄여 욱여넣으면 여유가 6px 라 폰트 렌더링이 조금만 달라져도 다시
     깨진다. 읽는 폭(.shell 46.2rem)은 그대로 두고 머리·발 폭만 분리하는 편이 안전하다.
     이 지면에서는 이미 섹션 번호와 전면 도판이 여백단을 넘나들므로 규칙과도 어긋나지 않는다. */
  .mast-in,.nav-in,.foot-in,.colophon p{max-width:54rem}

  /* 좌우를 같은 여백단으로 잡아야 본문 단이 지면 가운데에 온다.
     한쪽만 주면 본문이 왼쪽으로 쏠린 것처럼 보인다. */
  .shell{padding-left:var(--margin);padding-right:var(--margin)}
  .mast-in,.nav-in,.foot-in{padding-left:var(--margin);padding-right:var(--margin)}
  .colophon p{padding-left:var(--margin);padding-right:var(--margin)}
  .sec>.num{position:absolute;left:calc(var(--margin) * -1 + 1rem);top:2.5rem;
    margin:0;text-align:right;width:2.6rem}
  .fig--wide{margin-left:calc(var(--margin) * -1);margin-right:calc(var(--margin) * -1)}
  /* 상담 바탕도 여백단까지 편다. gut 만큼만 나가면 본문과 같은 폭이라 색만 바뀐
     문단처럼 보인다. 지면 끝까지 차야 읽기가 끝나고 다른 것이 시작된 것으로 읽힌다.
     폼 자체는 .cform 의 measure 가 잡고 있어 넓어지지 않는다. */
  .consult{margin-left:calc(var(--margin) * -1);margin-right:calc(var(--margin) * -1);
    padding-left:var(--margin);padding-right:var(--margin)}
  .docgrid{margin-left:calc(var(--margin) * -1);margin-right:calc(var(--margin) * -1)}
  .fig--wide figcaption{margin-left:var(--margin)}
  .sec:first-of-type>.num{top:0}
}

/* ---------- 16. 진입 연출 ---------- */
/* 기본은 '보이는 상태'다. 동작을 켜는 쪽에서만 애니메이션이 붙는다.
   JS 없이도, 애니메이션이 죽어도 본문은 항상 보인다. */
@media (prefers-reduced-motion:no-preference){
  .head>*{animation:rise .62s cubic-bezier(.2,.7,.3,1) backwards}
  .head>*:nth-child(1){animation-delay:.02s}
  .head>*:nth-child(2){animation-delay:.09s}
  .head>*:nth-child(3){animation-delay:.16s}
  .head>*:nth-child(4){animation-delay:.23s}
  @keyframes rise{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
}

/* ---------- 17. 인쇄 ---------- */
@media print{
  body::before,.nav,.mast-cta,.onward{display:none}
  body{background:#fff;font-size:10.5pt}
  .shell{max-width:none;padding:0}
  a{color:inherit;text-decoration:none}
}

/* 건너뛰기 링크. 목차 띠가 12항목이라 키보드로 읽는 사람은 본문에 닿기까지 매번 그것을 지나야 한다.
   화면에서 숨기되 display:none 은 쓰지 않는다. 그러면 포커스도 못 받아 존재하지 않는 것과 같다.
   지면색 글자를 clay 바탕에 올린 조합은 6.32:1 이다. */
.skip{position:absolute;left:.75rem;top:-4rem;z-index:20;
  background:var(--clay);color:var(--paper);font-family:var(--sans);font-weight:600;
  font-size:.9rem;padding:.7rem 1.1rem;text-decoration:none;
  transition:top .16s ease}
.skip:focus{top:.75rem;outline:2px solid var(--ink);outline-offset:2px}

/* 404 의 문서 목록. onward 와 같은 격자를 쓰되 부제가 없어 한 줄이다. */
.onward-list{list-style:none;margin:1.4rem 0 2rem;padding:0;
  display:grid;gap:0 1.7rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  border-top:1px solid var(--rule)}
.onward-list li{margin:0;padding:0;border-bottom:1px solid var(--rule)}
.onward-list a{display:block;padding:.85rem .1rem;text-decoration:none;height:100%;
  font-family:var(--serif);font-weight:700;font-size:1rem}
.onward-list a:hover{background:var(--paper-card)}