/* =========================================================
   테마: 인쇄물 디자인 — 메인 페이지
   인쇄물의 원칙을 웹으로: 종이 바탕, 상자 대신 가는 블루 선, 명조 제목,
   오른쪽 미스트 블루 세로 띠, 사진은 차분하게 + 아래쪽이 종이로 밝아짐.
   ========================================================= */

/* ---------- 바탕과 오른쪽 세로 띠 자리 ---------- */
html.rl-print body { background: var(--rl-print-paper); }
html.rl-print #app { padding-right: var(--rl-print-band-w); background: var(--rl-print-paper); }

/* 세로 띠 (band.js가 넣음) */
.rl-band { display: none; }
html.rl-print .rl-band {
  position: fixed; z-index: 44; top: 0; right: 0; bottom: 0; width: var(--rl-print-band-w);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 58px 0 52px; background: var(--rl-print-mist); color: var(--rl-print-blue);
}
html.rl-print .rl-band::before { content: ""; position: absolute; left: 0; top: 42px; bottom: 42px; width: 1px; background: var(--rl-print-line); }
html.rl-print .rl-band > span { writing-mode: vertical-rl; text-orientation: sideways; white-space: nowrap; }
html.rl-print .rl-band-top, html.rl-print .rl-band-bottom { font: 500 12px/1 var(--rl-font); letter-spacing: .02em; }
html.rl-print .rl-band-mid { display: flex; flex-direction: column; align-items: center; gap: 30px; }
html.rl-print .rl-band-mid > i { display: block; width: 30px; height: 1px; background: var(--rl-print-line); }
html.rl-print .rl-band-word { position: relative; display: block; overflow: hidden; writing-mode: vertical-rl; text-orientation: sideways; font: 300 30px/1 var(--rl-font-latin-light); letter-spacing: .06em; min-height: 220px; text-align: center; }
/* 글자 바뀜: 세로로 누운 글자의 '위'는 화면 오른쪽 — 새 글자는 아래(왼쪽)에서 올라오고, 옛 글자는 위(오른쪽)로 빠짐 */
html.rl-print .rl-band-word .rl-bw { display: block; }
html.rl-print .rl-band-word .rl-bw rl-bl { display: inline-block; font-style: normal; transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .7s ease; }
html.rl-print .rl-band-word .rl-bw.is-enter rl-bl { transform: translateX(-115%); opacity: 0; transition: none; }
html.rl-print .rl-band-word .rl-bw.is-leave { position: absolute; inset: 0; }
html.rl-print .rl-band-word .rl-bw.is-leave rl-bl { transform: translateX(115%); opacity: 0; }
@media (max-width: 1099px) { html.rl-print .rl-band { display: none; } }

/* ---------- 머리글: 종이 위 납작한 막대 + 가는 블루 선 ---------- */
html.rl-print #app .header { background: rgba(246, 248, 250, .96); border-bottom: 1px solid var(--rl-print-line-soft); box-shadow: none; }
html.rl-print #app .header [data-slot="navigation-menu-trigger"] { color: var(--rl-print-charcoal); background: transparent; }
html.rl-print #app .header .mega-panel { background: var(--rl-print-paper); border-bottom: 1px solid var(--rl-print-line-soft); border-radius: 0 !important; }
html.rl-print #app .desktop-mega .mega-feature[data-slot="navigation-menu-link"] { background: var(--rl-print-mist); color: var(--rl-print-blue); }
html.rl-print #app .desktop-mega .mega-feature * { color: var(--rl-print-blue) !important; }
.rl-print-tel { display: none; }
html.rl-print .rl-print-tel {
  display: flex; align-items: baseline; gap: 10px; position: fixed; z-index: 46; top: 22px;
  right: calc(var(--rl-print-band-w) + var(--gutter, 39px)); text-decoration: none; color: var(--rl-print-blue);
}
html.rl-print .rl-print-tel small { font: 500 12px/1 var(--rl-font); color: var(--rl-print-charcoal); }
html.rl-print .rl-print-tel b { font: 300 19px/1 var(--rl-font-latin-light); letter-spacing: .02em; }
@media (min-width: 1100px) { html.rl-print #app .header { padding-right: calc(var(--gutter, 39px) + 232px); } }
@media (min-width: 1100px) and (max-width: 1360px) {
  html.rl-print .rl-print-tel small { display: none; }
  html.rl-print #app .header { padding-right: calc(var(--gutter, 39px) + 172px); }
  html.rl-print #app .desktop-mega button { font-size: 14px; padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 1099px) { html.rl-print .rl-print-tel { display: none; } }

/* ---------- 공통 글자: 라벨 · 명조 제목 · 영문 ---------- */
html.rl-print #app .section-label { color: var(--rl-print-blue); font-weight: 500; font-size: 13px; letter-spacing: 0; }
html.rl-print #app .section-label > span { background: transparent !important; color: var(--rl-print-blue) !important; width: auto; height: auto; font-weight: 300; }
html.rl-print #app .intro-statement, html.rl-print #app .section-title, html.rl-print #app .promise-film-copy h2,
html.rl-print #app .team-editorial h2, html.rl-print #app .column-preview-intro h2, html.rl-print #app .journal-heading h2,
html.rl-print #app .visit-copy h3, html.rl-print #app .hero-bottom h1 {
  font-family: var(--rl-font-serif); font-weight: 700; letter-spacing: -0.02em; color: var(--rl-print-blue);
}
html.rl-print #app .intro-statement span, html.rl-print #app .section-title span, html.rl-print #app .promise-film-copy h2 span,
html.rl-print #app .team-editorial h2 span, html.rl-print #app .column-preview-intro h2 span, html.rl-print #app .journal-heading h2 span { color: var(--rl-print-blue-2); }
html.rl-print #app .display, html.rl-print #app .image-word, html.rl-print #app .journal-cover h3 {
  font-family: var(--rl-font-latin-light); font-weight: 300; letter-spacing: -0.02em; color: var(--rl-print-blue);
}
html.rl-print #app .side-note, html.rl-print #app .editorial-note, html.rl-print #app p { color: var(--rl-print-charcoal); }
html.rl-print #app .editorial-count { font-family: var(--rl-font-latin-light); font-weight: 300; color: var(--rl-print-blue); }

/* 버튼: 테두리만 있는 블루 알약 */
html.rl-print #app .pill { background: transparent !important; color: var(--rl-print-blue) !important; border: 1px solid var(--rl-print-blue); box-shadow: none; }
html.rl-print #app .pill:hover { background: var(--rl-print-blue) !important; color: #fff !important; }
html.rl-print #app .pill svg { color: currentColor; }

/* 사진: 인쇄물처럼 차분한 톤, 모서리는 각지게 */
html.rl-print #app .care-picture img, html.rl-print #app .team-tile img, html.rl-print #app .column-card-top img,
html.rl-print #app .journal-card-top img, html.rl-print #app .journal-cover img, html.rl-print #app .promise-photo img,
html.rl-print #app .mini-doctor img, html.rl-print #app .service-content img { filter: var(--rl-print-photo); }

/* ---------- 첫 화면: 사진 아래쪽이 종이로 밝아지고, 명조 제목이 그 위에 ---------- */
html.rl-print #app .home-hero { background: var(--rl-print-paper); border-radius: 0; margin-inline: 0; }
html.rl-print #app .hero-image { filter: var(--rl-print-hero); }
html.rl-print #app .hero-shade { background: linear-gradient(180deg, rgba(246, 248, 250, .1) 0%, rgba(246, 248, 250, 0) 30%, rgba(246, 248, 250, .55) 58%, rgba(246, 248, 250, .94) 78%, #f6f8fa 100%); }
html.rl-print #app .hero-word span { font-family: var(--rl-font-latin-light); font-weight: 300; letter-spacing: -0.045em; color: var(--rl-print-blue); }
html.rl-print #app .hero-word em { font-family: var(--rl-font-latin-light); font-weight: 300; font-style: normal; letter-spacing: -0.02em; color: var(--rl-print-blue); }
html.rl-print #app .hero-word sup { color: var(--rl-print-blue); }
html.rl-print #app .hero-services a { color: var(--rl-print-charcoal); }
html.rl-print #app .hero-services span { font-family: var(--rl-font-latin-light); font-weight: 300; color: var(--rl-print-blue); opacity: 1; }
html.rl-print #app .hero-crosses { color: var(--rl-print-blue); opacity: .55; }
html.rl-print #app .hero-kicker { color: var(--rl-print-blue); opacity: 1; font-size: 14px; }
html.rl-print #app .hero-bottom h1 { font-size: clamp(30px, 2.7vw, 44px); line-height: 1.32; }
html.rl-print #app .hero-scroll { color: var(--rl-print-charcoal); }
html.rl-print #app .hero-copyright { font-family: var(--rl-font-latin-light); font-weight: 300; color: var(--rl-print-blue); opacity: 1; }
html.rl-print #app .mini-doctor { background: transparent; border: 0; border-top: 1px solid var(--rl-print-line); border-radius: 0; padding: 14px 0 0; }
html.rl-print #app .mini-doctor img { border-radius: var(--rl-print-r-thumb); }
html.rl-print #app .mini-doctor small { color: var(--rl-print-blue); }
html.rl-print #app .mini-doctor strong { font-family: var(--rl-font-serif); font-weight: 700; color: var(--rl-print-blue); letter-spacing: -0.02em; }
html.rl-print #app .mini-cta { background: transparent; color: var(--rl-print-blue); border: 1px solid var(--rl-print-blue); }

/* ---------- 진료 분야: 사진 + 캡션, 상자 없이 ---------- */
html.rl-print #app .care-card { background: transparent; }
html.rl-print #app .care-caption h3 { color: var(--rl-print-charcoal); }
html.rl-print #app .care-caption span { color: var(--rl-print-muted); }
html.rl-print #app .care-picture { border-radius: var(--rl-print-r-photo); }
/* 청록 연출 이미지는 인쇄물 팔레트에 맞춰 푸른 회색으로 */
html.rl-print #app .care-wide .care-picture img,
html.rl-print #app .column-preview .column-card:nth-of-type(2) .column-card-top img { filter: var(--rl-print-concept) !important; }
html.rl-print #app .care-wide .care-picture { background: var(--rl-print-mist); }
html.rl-print #app .image-word { color: #fff; text-shadow: 0 1px 24px rgba(10, 40, 80, .18); }
html.rl-print #app .care-image-note { color: #fff; }
html.rl-print #app .round-arrow, html.rl-print #app .column-card-top > span, html.rl-print #app .journal-card-top > svg,
html.rl-print #app .journal-cover > svg, html.rl-print #app .film-link > span {
  background: rgba(246, 248, 250, .9) !important; color: var(--rl-print-blue) !important; border: 1px solid var(--rl-print-blue) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
}
html.rl-print #app .care-card:hover .round-arrow, html.rl-print #app .film-link:hover > span,
html.rl-print #app .column-card:hover .column-card-top > span, html.rl-print #app .journal-text-card:hover .journal-card-top > svg,
html.rl-print #app .journal-cover:hover > svg { background: var(--rl-print-blue) !important; color: #fff !important; transform: rotate(45deg); }

/* ---------- 진료 설명: 남색 패널 → 미스트 블루 면 ---------- */
html.rl-print #app .principles { background: var(--rl-print-mist); color: var(--rl-print-charcoal); border-radius: 0; margin-inline: 0; }
html.rl-print #app .principles .section-label, html.rl-print #app .principles .editorial-note { color: var(--rl-print-blue); }
html.rl-print #app .principles .service-title { font-family: var(--rl-font-serif); font-weight: 700; letter-spacing: -0.02em; color: var(--rl-print-blue); }
html.rl-print #app .principles .service-index { color: var(--rl-print-blue); font-family: var(--rl-font-latin-light); font-weight: 300; }
html.rl-print #app .principles .service-symbol { border-color: var(--rl-print-line-soft); color: var(--rl-print-blue); }
html.rl-print #app .principles .service-symbol::before, html.rl-print #app .principles .service-symbol::after { background: var(--rl-print-blue); }
html.rl-print #app .principles .service-description p, html.rl-print #app .principles .service-tags span { color: var(--rl-print-charcoal); }
html.rl-print #app .principles .tags span { background: transparent; color: var(--rl-print-blue); border: 1px solid var(--rl-print-line-soft); }
html.rl-print #app .principles [data-slot="accordion-item"] { border-color: var(--rl-print-line-soft); }
html.rl-print #app .principles .service-content img { border-radius: var(--rl-print-r-thumb); }

/* ---------- 네 가지 약속: 상자 → 위쪽 가는 선 ---------- */
html.rl-print #app .signal-card { background: transparent; border-radius: 0; border-top: 1px solid var(--rl-print-line); box-shadow: none; }
html.rl-print #app .signal-card h3 { color: var(--rl-print-charcoal); }
html.rl-print #app .signal-card .dot-index i { background: var(--rl-print-line-soft); }
html.rl-print #app .signal-card .dot-index i.is-filled { background: var(--rl-print-blue); }

/* 큰 진료 사진: 왼쪽이 종이로 밝아지고 글은 블루 */
html.rl-print #app .promise-film { background: var(--rl-print-paper); border-radius: var(--rl-print-r-photo); }
html.rl-print #app .promise-shade { background: linear-gradient(90deg, #f6f8fa 0%, rgba(246, 248, 250, .92) 30%, rgba(246, 248, 250, .35) 55%, rgba(246, 248, 250, 0) 72%); }
html.rl-print #app .promise-film-top span { color: var(--rl-print-blue); }
html.rl-print #app .film-link, html.rl-print #app .film-link small { color: var(--rl-print-blue); }
html.rl-print #app .film-link > div { font-family: var(--rl-font-latin-light); font-weight: 300; }

/* ---------- 의료진 ---------- */
html.rl-print #app .team-panel { background: transparent; border-radius: 0; border-top: 1px solid var(--rl-print-line); }
html.rl-print #app .team-eyebrow { color: var(--rl-print-blue); }
html.rl-print #app .team-tile { border-radius: var(--rl-print-r-tile); }
html.rl-print #app .tile-caption h3 { font-family: var(--rl-font-serif); font-weight: 700; letter-spacing: -0.02em; }
html.rl-print #app .team-note { background: var(--rl-print-mist); border-radius: var(--rl-print-r-tile); color: var(--rl-print-blue); }
html.rl-print #app .team-note p { font-family: var(--rl-font-serif); color: var(--rl-print-blue); }
html.rl-print #app .team-manifesto, html.rl-print #app .team-manifesto strong { color: var(--rl-print-blue); }

/* ---------- 원장 칼럼 · 운정 이야기: 카드 상자 → 가는 선 ---------- */
html.rl-print #app .column-card, html.rl-print #app .journal-text-card { background: transparent; border-radius: 0; border-top: 1px solid var(--rl-print-line); box-shadow: none; padding-left: 0; padding-right: 0; }
html.rl-print #app .column-card h3, html.rl-print #app .journal-text-card h3 { font-family: var(--rl-font-serif); font-weight: 700; letter-spacing: -0.02em; color: var(--rl-print-blue); }
html.rl-print #app .column-card-top img, html.rl-print #app .journal-card-top > img { border-radius: var(--rl-print-r-thumb); }
html.rl-print #app .journal-cover { border-radius: var(--rl-print-r-photo); background: var(--rl-print-mist); }
html.rl-print #app .journal-cover > span { color: var(--rl-print-blue); }
html.rl-print #app .journal-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246, 248, 250, 0) 40%, rgba(246, 248, 250, .9) 88%); pointer-events: none; }
html.rl-print #app .journal-cover h3, html.rl-print #app .journal-cover > span, html.rl-print #app .journal-cover > svg { z-index: 1; }

/* ---------- 자주 묻는 질문: 흰 상자 → 선 목록 ---------- */
html.rl-print #app .questions [data-slot="accordion-item"] { background: transparent; border-radius: 0; border-top: 1px solid var(--rl-print-line-soft); box-shadow: none; }
html.rl-print #app .questions [data-slot="accordion-item"]:last-child { border-bottom: 1px solid var(--rl-print-line-soft); }
/* 첫 질문 위 시작선은 없음 — 섹션 머리선이 이미 위에 있으므로 */
html.rl-print #app .questions [data-slot="accordion-item"]:first-child { border-top: 0; }
html.rl-print #app .questions button { color: var(--rl-print-charcoal); }
html.rl-print #app .questions .q-number { color: var(--rl-print-blue); font-family: var(--rl-font-latin-light); font-weight: 300; }

/* ---------- 처음 오시는 분: 남색 → 미스트 블루 면 ---------- */
html.rl-print #app .visit { background: var(--rl-print-mist); border-radius: 0; margin-inline: 0; color: var(--rl-print-charcoal); }
html.rl-print #app .visit::before, html.rl-print #app .visit::after { opacity: 0 !important; }
html.rl-print #app .visit .section-label { color: var(--rl-print-blue); }
html.rl-print #app .visit-list { background: transparent; border-radius: 0; box-shadow: none; border-top: 0; }   /* 같은 원칙: 시작선 없음 */
html.rl-print #app .visit-list * { color: var(--rl-print-charcoal); }
html.rl-print #app .visit-list h3, html.rl-print #app .visit-list strong { color: var(--rl-print-blue); }

/* ---------- 바닥글: 남색 → 종이 + 가는 선, 전화번호는 인쇄물처럼 ---------- */
html.rl-print #app .site-footer { background: var(--rl-print-mist); color: var(--rl-print-charcoal); border-radius: 0; margin-inline: 0; }
html.rl-print #app .site-footer * { color: var(--rl-print-charcoal); border-color: var(--rl-print-line-soft) !important; }
html.rl-print #app .site-footer h2, html.rl-print #app .site-footer h3, html.rl-print #app .site-footer strong { color: var(--rl-print-blue); }
html.rl-print #app .site-footer a[href^="tel"] { font-family: var(--rl-font-latin-light); font-weight: 300; color: var(--rl-print-blue); }

/* ---------- 모바일: 사진 위 글이 잘 읽히도록 종이 막을 조금 더 ---------- */
@media (max-width: 700px) {

  html.rl-print #app .care-wide .image-word { font-size: min(46px, 10.8vw); }
  html.rl-print #app .image-word { letter-spacing: -0.03em; }
  html.rl-print #app .promise-shade { background: linear-gradient(180deg, rgba(246, 248, 250, .5) 0%, rgba(246, 248, 250, .62) 30%, rgba(246, 248, 250, .88) 56%, #f6f8fa 80%); }
}

/* 사진이 열리는 움직임도 같은 모서리로 (원래 값보다 우선) */
html.rl-print #app .care-picture[data-rl], html.rl-print #app .promise-film[data-rl], html.rl-print #app .journal-cover[data-rl] { --rl-r: var(--rl-print-r-photo) !important; }
html.rl-print #app .team-tile[data-rl] { --rl-r: var(--rl-print-r-tile) !important; }
html.rl-print #app .column-card-top[data-rl], html.rl-print #app .journal-card-top[data-rl], html.rl-print #app .mini-doctor[data-rl] { --rl-r: var(--rl-print-r-thumb) !important; }

/* =========================================================
   작은 요소 통일 (인쇄물 테마)
   번호 = Inter Light 블루 · 점 = 블루(빈 점 35%) · 펼침/더하기 = 가는 테두리 원 · 카드 제목 = 명조 굵게 블루
   ========================================================= */
/* 점 표시: 어디서나 같은 블루 */
html.rl-print #app .dot-index i { background: var(--rl-print-line-soft) !important; opacity: 1 !important; }
html.rl-print #app .dot-index i.is-filled { background: var(--rl-print-blue) !important; }
html.rl-print #app .dot-number { font-family: var(--rl-font-latin-light); font-weight: 300; color: var(--rl-print-blue); }

/* 번호: 가는 영문 블루 */
html.rl-print #app .team-eyebrow span, html.rl-print #app .visit-list > div > span,
html.rl-print #app .questions .q-number, html.rl-print #app .principles .service-index,
html.rl-print #app .editorial-count { font-family: var(--rl-font-latin-light); font-weight: 300; color: var(--rl-print-blue); }

/* 펼침·더하기 아이콘: 가는 테두리 원 하나로 */
html.rl-print #app .questions [data-slot="accordion-trigger"]::after {
  background: transparent; color: var(--rl-print-blue); border: 1px solid var(--rl-print-line-soft);
  width: 28px; height: 28px; font: 300 17px/1 var(--rl-font-latin-light);
}
html.rl-print #app .visit-list svg, html.rl-print #app .visit-list svg * { color: var(--rl-print-blue) !important; }
html.rl-print #app .visit-list svg { width: 28px; height: 28px; padding: 6px; box-sizing: border-box; border: 1px solid var(--rl-print-line-soft); border-radius: 50%; flex: none; }
html.rl-print #app .tile-plus { background: transparent !important; border: 1px solid rgba(255, 255, 255, .85); color: #fff; }

/* 카드·항목 제목: 명조 굵게 블루 (본문 같은 목록 문장은 Pretendard 그대로) */
html.rl-print #app .care-caption h3, html.rl-print #app .team-editorial-bottom h3, html.rl-print #app .visit-list h3 {
  font-family: var(--rl-font-serif); font-weight: 700; letter-spacing: -0.02em; color: var(--rl-print-blue);
}

/* 의료진 아래 줄: 왼쪽 묶음과 오른쪽 문장의 윗선을 맞추고, 문장은 다른 큰 문장처럼 명조로 */
html.rl-print #app .team-editorial-bottom { align-items: flex-start; }
html.rl-print #app .team-manifesto { font-family: var(--rl-font-serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.45; color: var(--rl-print-blue-2); }
html.rl-print #app .team-manifesto strong { font-weight: 700; color: var(--rl-print-blue); }


/* =========================================================
   이미지 · 글 관계 규칙 — 인쇄물(COMFORT · IMPLANT · NEWS · 명함)에서 가져옴
   ① 겹침: 글이 사진 위에 놓이면, 사진은 글이 있는 쪽에서 종이로 녹아들고
          글은 녹아든 자리(종이)에만 둔다. 글색은 블루·차콜 — 사진 위 흰 글씨는 쓰지 않는다.
   ② 나란히: 글이 사진 옆에 있으면 사진은 온전한 사각형으로 두고, 글 쪽 가장자리만 종이로 살짝.
   ③ 목록: 목록 속 작은 사진은 그대로의 사각형, 설명은 사진 아래 종이 위.
   ========================================================= */
html.rl-print {
  --rl-print-fade-top: linear-gradient(180deg, #f6f8fa 0%, rgba(246, 248, 250, .9) 13%, rgba(246, 248, 250, .5) 27%, rgba(246, 248, 250, 0) 44%);
  --rl-print-fade-bottom: linear-gradient(0deg, #f6f8fa 0%, rgba(246, 248, 250, .88) 16%, rgba(246, 248, 250, .4) 30%, rgba(246, 248, 250, 0) 46%);
}

/* ① 진료 분야 사진: 영문 문구가 있는 위쪽이 종이로 녹아듦 (COMFORT처럼) */
html.rl-print #app .care-picture::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--rl-print-fade-top); }
html.rl-print #app .care-picture > .image-word, html.rl-print #app .care-picture > .care-image-note,
html.rl-print #app .care-picture > .round-arrow { z-index: 2; }
html.rl-print #app .image-word { color: var(--rl-print-blue); text-shadow: none; }
/* 넓은 카드는 아래 설명 글도 있으므로 위·아래 모두 */
html.rl-print #app .care-wide .care-picture::after { background: var(--rl-print-fade-top), var(--rl-print-fade-bottom); }
html.rl-print #app .care-image-note { color: var(--rl-print-charcoal); }
html.rl-print #app .care-image-note small, html.rl-print #app .care-image-note span { color: var(--rl-print-muted); }

/* ① 의료진 사진: 명함 앞면처럼 아래가 종이로 밝아지고, 직함과 이름은 그 위에 블루로 */
html.rl-print #app .team-tile::after { background: linear-gradient(180deg, rgba(246, 248, 250, 0) 46%, rgba(246, 248, 250, .8) 74%, #f6f8fa 94%); }
html.rl-print #app .tile-caption h3 { color: var(--rl-print-blue); }
html.rl-print #app .tile-role { top: auto; right: auto; left: 20px; bottom: 60px; color: var(--rl-print-blue); font-weight: 500; }

/* ① 운정 이야기 표지: 위쪽 작은 라벨 자리도 종이로 */
html.rl-print #app .journal-cover::after { background: linear-gradient(180deg, rgba(246, 248, 250, .85) 0%, rgba(246, 248, 250, 0) 20%), linear-gradient(180deg, rgba(246, 248, 250, 0) 40%, rgba(246, 248, 250, .9) 88%); }

/* ① 첫 화면(데스크톱): 로고·메뉴가 있는 위쪽도 종이로 살짝 녹아듦 (아래쪽 제목 부분은 기존대로) */
@media (min-width: 701px) {
  html.rl-print #app .hero-shade { background: linear-gradient(180deg, rgba(246, 248, 250, .78) 0%, rgba(246, 248, 250, .35) 16%, rgba(246, 248, 250, 0) 32%, rgba(246, 248, 250, 0) 46%, rgba(246, 248, 250, .55) 60%, rgba(246, 248, 250, .94) 78%, #f6f8fa 100%); }
}

/* ① 첫 화면(모바일): COMFORT 안내문과 같은 구성 — 글은 위·아래 종이에, 사진은 가운데에 또렷하게 */
@media (max-width: 700px) {
  html.rl-print #app .hero-image { inset: auto 0 auto 0; top: 24%; height: 70%; object-position: 62% 30%; }
  html.rl-print #app .hero-shade { background: linear-gradient(180deg, #f6f8fa 0%, #f6f8fa 36%, rgba(246, 248, 250, .5) 41%, rgba(246, 248, 250, 0) 46%, rgba(246, 248, 250, 0) 63%, rgba(246, 248, 250, .7) 69%, #f6f8fa 75%, #f6f8fa 100%); }
  html.rl-print #app .hero-word span, html.rl-print #app .hero-word em, html.rl-print #app .hero-word sup { color: var(--rl-print-blue); }
  html.rl-print #app .hero-services a { color: var(--rl-print-charcoal); font-weight: 500; }
  html.rl-print #app .hero-services span { color: var(--rl-print-blue); }
}

/* =========================================================
   글자 위계 (인쇄물): 가장 큰 글자는 한글 명조 제목. 영문은 가는 글씨로, 한글 제목보다 크지 않게.
   사진이 주인공 — 사진 위에 영문 장식 문구를 올리지 않는다 (영문 키워드는 오른쪽 세로 띠가 맡음).
   ========================================================= */
/* 섹션 영문 제목(Our Care. · FAQ. · Let's Meet.): 한글 제목 크기 안쪽으로 */
html.rl-print #app .display { font-size: clamp(34px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; }
/* 진료 분야 사진 위 영문(Clear Smile. 등)은 빼고, 사진은 온전히 — 글이 없으니 종이 번짐도 없음 */
html.rl-print #app .image-word { display: none; }
html.rl-print #app .care-picture::after { background: none; }
/* 넓은 카드는 아래 짧은 설명만 남으므로 아래쪽만 살짝 */
html.rl-print #app .care-wide .care-picture::after { background: linear-gradient(0deg, #f6f8fa 0%, rgba(246, 248, 250, .82) 14%, rgba(246, 248, 250, 0) 34%); }
/* 운정 이야기 표지 영문도 작게 */
html.rl-print #app .journal-cover h3 { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.12; }
/* 첫 화면 rootlove: 브랜드 표시라 제목보다 조금 크게, 사진을 가리지 않을 만큼만 */
html.rl-print #app .hero-word span { font-size: clamp(60px, 6.6vw, 100px); }
html.rl-print #app .hero-word em { font-size: clamp(22px, 2.3vw, 34px); }
@media (min-width: 701px) {
  html.rl-print #app .hero-shade { background: linear-gradient(180deg, rgba(246, 248, 250, .55) 0%, rgba(246, 248, 250, .2) 12%, rgba(246, 248, 250, 0) 24%, rgba(246, 248, 250, 0) 46%, rgba(246, 248, 250, .55) 60%, rgba(246, 248, 250, .94) 78%, #f6f8fa 100%); }
}
/* rootlove가 작아진 만큼, 감싸는 상자도 글자 폭에 맞춰 'Dental'이 rootlove 끝에 붙도록 */
html.rl-print #app .hero-word { width: max-content; max-width: 100%; justify-self: start; }
html.rl-print #app .hero-word em { margin-right: 0; margin-top: .1em; }

/* =========================================================
   첫 화면: 사진 위쪽은 깨끗하게 (NEWS 안내문 구성)
   rootlove 표시와 사진 위 바로가기 글은 빼고, 글은 아래 종이 부분(제목·대표원장)에만.
   글이 없으니 위쪽 종이 번짐도 없음 — 사진은 위에서부터 그대로, 아래만 종이로 녹아듦.
   (바로가기 세 항목은 머리글 메뉴에 그대로 있음)
   ========================================================= */
html.rl-print #app .hero-word, html.rl-print #app .hero-services { display: none !important; }
html.rl-print #app .hero-shade { background: linear-gradient(180deg, rgba(246, 248, 250, 0) 0%, rgba(246, 248, 250, 0) 46%, rgba(246, 248, 250, .55) 60%, rgba(246, 248, 250, .94) 78%, #f6f8fa 100%) !important; }
@media (max-width: 700px) {
  html.rl-print #app .hero-image { inset: 0 0 auto 0 !important; top: 0 !important; height: 80% !important; object-position: 62% 30% !important; }
  html.rl-print #app .hero-shade { background: linear-gradient(180deg, rgba(246, 248, 250, 0) 0%, rgba(246, 248, 250, 0) 50%, rgba(246, 248, 250, .6) 62%, rgba(246, 248, 250, .95) 72%, #f6f8fa 78%, #f6f8fa 100%) !important; }
}
/* 넓은 카드도 그라데이션 없이 — 사진의 밝은 아래쪽 위에 짧은 설명을 차콜로 */
html.rl-print #app .care-wide .care-picture::after { background: none !important; }
html.rl-print #app .care-image-note, html.rl-print #app .care-image-note small, html.rl-print #app .care-image-note span { color: var(--rl-print-charcoal) !important; }
@media (max-width: 700px) {
  /* 모바일: 사진이 작아 아래 설명이 임플란트를 가림 → 사진의 밝은 왼쪽 위로 옮김 */
  html.rl-print #app .care-wide .care-image-note { top: 16px; bottom: auto; left: 16px; right: auto; }
}
/* 운정 이야기 표지도 그라데이션 없이 */
html.rl-print #app .journal-cover::after { background: none !important; }
/* 사진 위 둥근 화살표: 인쇄물 테마에서도 원형 유지 (마우스를 올려 45도 돌아도 마름모가 되지 않게) */
html.rl-print #app .journal-cover > svg { width: 44px; height: 44px; padding: 12px; box-sizing: border-box; border-radius: 50%; }
html.rl-print #app .journal-card-top > svg { width: 36px; height: 36px; padding: 10px; box-sizing: border-box; border-radius: 50%; }
html.rl-print #app .column-card-top > span { width: 38px; height: 38px; border-radius: 50%; }
/* 같은 규칙: 사진 위 영문 장식 문구(Rootlove Journal · Around Unjeong.)는 빼고 사진만 — 위에 한글 섹션 제목이 있음 */
html.rl-print #app .journal-cover > span { display: none !important; }
/* 'Around Unjeong.'은 지우지 않고 알약 태그로 — 사진 위 둥근 화살표 버튼과 같은 재료(종이 바탕 + 가는 블루 테두리)
   왼쪽 위 알약과 오른쪽 위 화살표가 한 줄에 놓임 */
html.rl-print #app .journal-cover h3 {
  top: 24px; left: 24px; right: auto; bottom: auto; z-index: 2;
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px;
  background: rgba(246, 248, 250, .92); border: 1px solid var(--rl-print-blue); color: var(--rl-print-blue);
  font: 400 15px/1 var(--rl-font-latin-light) !important; letter-spacing: 0 !important; white-space: nowrap;
}
html.rl-print #app .journal-cover h3 br { display: none; }
html.rl-print #app .journal-cover h3 rl-l ~ rl-l { margin-left: .3em; }
html.rl-print #app .journal-cover > svg { top: 24px; right: 24px; }

/* =========================================================
   바닥글: 인쇄물 하단처럼 글자 대신 로고 (원본 블루)
   글자는 화면 읽기용으로 남기고 눈에는 로고만 보이게
   ========================================================= */
html.rl-print #app .site-footer-brand {
  display: block; width: 236px; height: 34px; overflow: hidden;
  font-size: 0 !important; color: transparent !important; line-height: 0;
  background: url(/assets/f/7bdfbfa6cd.webp) no-repeat left center / contain;
}
@media (max-width: 700px) { html.rl-print #app .site-footer-brand { width: 196px; height: 28px; } }

/* 글자 위계 규칙을 끝까지: 영문 제목(Our Care. · FAQ. · Let's Meet.)은 한글 명조 제목보다 크지 않게 */
html.rl-print #app .display { font-size: clamp(26px, 2.5vw, 36px) !important; }
/* 첫 방문 패널은 한글 제목이 주인공 — 다른 섹션의 명조 제목과 같은 크기로 */
html.rl-print #app .visit-copy h3 { font-size: clamp(28px, 2.65vw, 38px); line-height: 1.34; }

/* =========================================================
   인쇄물 형태로 재구성 (원본 구조보다 인쇄물 문법 우선)
   섹션 머리: 작은 라벨 → 한글 명조 제목 → 본문 / 영문 큰 제목 없음 (세로 띠가 맡음)
   면: 큰 미스트·남색 패널 대신 종이 + 가는 선 (미스트는 세로 띠와 작은 타일에만)
   사진: 온전히, 글은 사진 옆이나 아래 종이 위 (IMPLANT 안내문처럼)
   원본 장식(점 표시, + 격자 표시, 영문 카피 라벨) 제거
   ========================================================= */

/* --- 섹션 머리: 영문 큰 제목을 빼고 한글을 제목으로 --- */
/* 진료 분야: 라벨(지금 어떤 고민이…) + 제목(불편한 점과 원하는 변화에서 필요한 진료를 찾아보세요.) */
html.rl-print #app .care-section .editorial-title { display: none; }
html.rl-print #app .care-section .editorial-note {
  font-family: var(--rl-font-serif); font-weight: 700; color: var(--rl-print-blue) !important;
  font-size: clamp(28px, 2.65vw, 38px) !important; line-height: 1.34 !important; letter-spacing: -0.02em;
}
@media (min-width: 701px) { html.rl-print #app .care-section .editorial-note { grid-column: 2; grid-row: 1; } }
/* 자주 묻는 질문: 'FAQ.' 대신 라벨 '방문 전에 궁금한 점'을 명조 제목으로 */
html.rl-print #app #guide .display { display: none; }
html.rl-print #app #guide .section-label {
  font-family: var(--rl-font-serif); font-weight: 700; font-size: clamp(28px, 2.65vw, 38px); line-height: 1.34; letter-spacing: -0.02em;
}
html.rl-print #app #guide .section-label > span { display: none; }
/* 처음 오시는 분: 'Let's Meet.'을 빼고 라벨 + 명조 제목(처음 오셔도, 차근차근 안내합니다.) */
html.rl-print #app .visit .display { display: none; }
html.rl-print #app .visit-copy h3 { margin-top: 18px; }

/* --- 면: 큰 패널을 종이로 --- */
html.rl-print #app .principles, html.rl-print #app .visit, html.rl-print #app .site-footer { background: var(--rl-print-paper) !important; }
html.rl-print #app .site-footer { border-top: 1px solid var(--rl-print-line); }

/* --- 원본 장식 제거 --- */
html.rl-print #app .dot-track { display: none !important; }                    /* 점 표시 (번호는 남김) */
html.rl-print #app .hero-crosses svg, html.rl-print #app .team-crosses svg { display: none; }  /* + 격자 표시 (가는 선만 남김) */
html.rl-print #app .hero-copyright { visibility: hidden; }                     /* Rooted In Care. (격자 칸은 유지) */
html.rl-print #app .promise-film-top { display: none; }                        /* ROOT LOVE DENTAL · Rooted In Care. */

/* --- 넓은 진료 카드: 사진 위 문장은 빼고, '연출 이미지' 표시만 알약 태그로 --- */
html.rl-print #app .care-wide .care-image-note { font-size: 0 !important; top: auto !important; bottom: 24px !important; left: 24px !important; right: auto !important; }
html.rl-print #app .care-wide .care-image-note br { display: none; }
html.rl-print #app .care-concept-note {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; margin: 0;
  background: rgba(246, 248, 250, .92); border: 1px solid var(--rl-print-blue); color: var(--rl-print-blue) !important;
  font: 400 13px/1 var(--rl-font) !important; letter-spacing: -0.01em; opacity: 1;
}

/* --- 큰 진료 사진: IMPLANT 안내문처럼 글은 왼쪽 종이 위, 사진은 오른쪽에 온전히 --- */
html.rl-print #app .promise-film { background: transparent !important; overflow: visible; }
html.rl-print #app .promise-shade { display: none; }
html.rl-print #app .promise-photo { position: absolute; inset: 0 0 0 auto; width: 50%; border-radius: var(--rl-print-r-photo); overflow: hidden; -webkit-mask-image: none; mask-image: none; }
html.rl-print #app .promise-film-copy { left: 0 !important; max-width: 46%; }
html.rl-print #app .film-link { left: 0 !important; }
html.rl-print #app .film-link > div { font-size: 0 !important; }               /* 'Meet Our People.'은 빼고 한글 안내만 */
html.rl-print #app .film-link > div small { font-size: 15px !important; color: var(--rl-print-charcoal); margin: 0; }
@media (max-width: 700px) {
  /* 모바일: 사진 → 문장 → 버튼 순서로 자연스럽게 쌓기 */
  html.rl-print #app .promise-film { height: auto !important; min-height: 0 !important; display: flex; flex-direction: column; gap: 28px; }
  html.rl-print #app .promise-photo { position: relative !important; inset: auto !important; width: 100%; height: auto; aspect-ratio: 4 / 3.6; }
  html.rl-print #app .promise-film-copy { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important; max-width: 100%; }
}
/* 카드 속 작은 사진: 나타나기 전 살짝 확대된 상태가 화면 밖으로 넘치지 않도록 상자에서 자름 */
html.rl-print #app .column-card-top, html.rl-print #app .journal-card-top { overflow: hidden; border-radius: var(--rl-print-r-thumb); }

/* 큰 진료 사진: 같은 곳(의료진 소개)으로 가는 링크가 둘 → 인쇄물처럼 행동 하나만 (버튼 유지) */
html.rl-print #app .film-link { display: none !important; }
/* 데스크톱: 문장과 버튼을 사진 높이의 가운데에 */
@media (min-width: 701px) {
  html.rl-print #app .promise-film-copy { top: 50% !important; bottom: auto !important; transform: translateY(-50%); }
}

/* =========================================================
   디벨롭 1차 — 인쇄물의 고유 부품을 웹으로
   ========================================================= */

/* ① 모바일·태블릿 세로 띠: 명함처럼 좁은 띠에 섹션 영문만 (머리글 아래부터) */
@media (max-width: 1099px) {
  html.rl-print { --rl-print-band-w: 30px; }
  html.rl-print .rl-band { display: flex !important; top: 64px; padding: 24px 0; justify-content: center; }
  html.rl-print .rl-band::before { top: 16px; bottom: 16px; }
  html.rl-print .rl-band-top, html.rl-print .rl-band-bottom, html.rl-print .rl-band-mid > i { display: none; }
  html.rl-print .rl-band-word { font-size: 14px; letter-spacing: .16em; min-height: 0; }
}

/* ② 큰 따옴표 (IMPLANT · RESPECT 안내문): 의료진의 말에 */
html.rl-print #app .team-manifesto { position: relative; width: fit-content; padding-top: 52px; }
html.rl-print #app .team-manifesto::before,
html.rl-print #app .team-manifesto::after { position: absolute; font: 400 72px/1 var(--rl-font-serif); color: var(--rl-print-blue); }
html.rl-print #app .team-manifesto::before { content: "\201C"; left: -4px; top: 0; }
html.rl-print #app .team-manifesto::after { content: "\201D"; right: -10px; bottom: -46px; }

/* ③ 네 가지 약속: 2단 목록 + 가운데 세로 구분선 (NEWS · IMPLANT 안내문) */
html.rl-print #app .signal-card { display: grid; grid-template-columns: 76px 1fr; align-items: baseline; padding: 26px 0 30px; min-height: 0; }
html.rl-print #app .signal-card .dot-index { display: block; }
html.rl-print #app .signal-card .dot-number { font: 300 34px/1 var(--rl-font-latin-light); letter-spacing: -0.02em; color: var(--rl-print-blue); }
html.rl-print #app .signal-card .signal-content { margin: 0; }
html.rl-print #app .signal-card h3 { margin: 0; }
@media (min-width: 701px) {
  html.rl-print #app .signal-grid { grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: 0; }
  html.rl-print #app .signal-card:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--rl-print-line-soft); }
  html.rl-print #app .signal-card:nth-child(even) { padding-left: 40px; }
}
@media (max-width: 700px) {
  html.rl-print #app .signal-grid { grid-template-columns: 1fr; gap: 0; }
  html.rl-print #app .signal-card { grid-template-columns: 58px 1fr; padding: 20px 0 22px; }
  html.rl-print #app .signal-card .dot-number { font-size: 28px; }
}

/* ④ 첫 방문 단계: 큰 가는 숫자 (보험 서류 · 리뷰 안내문) */
html.rl-print #app .visit-list > div > span { min-width: 64px; font: 300 34px/1 var(--rl-font-latin-light) !important; letter-spacing: -0.02em; color: var(--rl-print-blue) !important; }
@media (max-width: 700px) { html.rl-print #app .visit-list > div > span { min-width: 48px; font-size: 28px !important; } }
/* 첫 방문 목록: 원본 흰 상자의 안쪽 여백은 필요 없음 — 글이 가는 선과 같은 세로선에서 시작 */
html.rl-print #app .visit-list { padding-left: 0 !important; padding-right: 0 !important; }

/* 섹션 라벨의 + 표시 삭제 (모든 섹션 같게) — 라벨 글자가 가는 선의 시작점에서 바로 시작 */
html.rl-print #app .section-label > span { display: none !important; }
html.rl-print #app .section-label { gap: 0; }

/* =========================================================
   번호 목록 공통 규칙 (네 가지 약속 · 첫 방문 단계)
   큰 숫자와 글의 '윗선'을 맞춤 — 아랫선(기준선) 정렬은 글이 내려앉아 보임
   ========================================================= */
html.rl-print #app .signal-card { align-items: start; }
html.rl-print #app .signal-card .dot-number { display: block; line-height: 1; margin-top: 1px; }
html.rl-print #app .signal-card h3 { line-height: 1.45; }
html.rl-print #app .signal-grid { margin-bottom: clamp(48px, 5.5vw, 88px); }   /* 세로 구분선이 아래 사진에 닿지 않게 */
@media (min-width: 701px) and (max-width: 1099px) {
  html.rl-print #app .signal-card { grid-template-columns: 62px 1fr; }
  html.rl-print #app .signal-card .dot-number { font-size: 30px; }
  html.rl-print #app .signal-card:nth-child(odd) { padding-right: 28px; }
  html.rl-print #app .signal-card:nth-child(even) { padding-left: 28px; }
}
@media (max-width: 700px) {
  html.rl-print #app .signal-card .dot-number { margin-top: 1.5px; }
  html.rl-print #app .visit-list > div > span { margin-top: .5px; }
  html.rl-print #app .signal-grid { margin-bottom: 44px; }
}
html.rl-print #app .visit-list > div { align-items: flex-start; }
@media (min-width: 701px) { html.rl-print #app .visit-list > div > span { margin-top: -1px; } }


/* 모바일·태블릿 머리글과 세로 띠 만나는 곳: 띠를 화면 맨 위부터 — 머리글 아래 선이 띠의 세로선에 정확히 닿음 */
@media (max-width: 1099px) {
  html.rl-print .rl-band { top: 0 !important; }
  html.rl-print .rl-band::before { top: 0 !important; bottom: 0 !important; }
}
/* 메뉴(햄버거)·닫기 아이콘: 가는 블루 선 */
html.rl-print #app .site-menu-toggle { color: var(--rl-print-blue); }
html.rl-print #app .site-menu-toggle svg { width: 28px; height: 28px; stroke-width: 1.15; color: var(--rl-print-blue); }
html.rl-print [data-slot="sheet-content"] [data-slot="sheet-close"] svg,
html.rl-print [data-slot="sheet-content"] button[aria-label*="닫기"] svg { stroke-width: 1.15; color: var(--rl-print-blue); }
/* 펼친 메뉴 안의 화살표·번호도 같은 결 — 가는 블루 선, 가는 영문 숫자 */
html.rl-print [data-slot="sheet-content"] [data-slot="accordion-trigger"] svg { stroke-width: 1.15; color: var(--rl-print-blue); }
html.rl-print [data-slot="sheet-content"] [data-slot="accordion-trigger"] > span:first-child,
html.rl-print [data-slot="sheet-content"] [data-slot="accordion-trigger"] small:first-child { font-family: var(--rl-font-latin-light); font-weight: 300; color: var(--rl-print-blue); }
html.rl-print [data-slot="sheet-content"] [data-slot="accordion-item"] { border-color: var(--rl-print-line-soft) !important; }

/* =========================================================
   진료 분야 영역: 사진은 조금 작게(가로로 긴 비율), 사진 사이는 인쇄물 격자 간격
   캡션은 제목 아래 줄에 설명 (교정심미센터 / 내 치아에 맞는 투명교정)
   ========================================================= */
html.rl-print #app .care-grid { column-gap: 28px !important; row-gap: 56px !important; }
html.rl-print #app .care-picture { aspect-ratio: 4 / 3 !important; height: auto !important; }
html.rl-print #app .care-wide .care-picture { aspect-ratio: 2.6 / 1 !important; }
html.rl-print #app .care-caption {
  display: grid !important; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 6px; align-items: end;
}
html.rl-print #app .care-caption h3 { grid-column: 1; grid-row: 1; margin: 0; line-height: 1.3; }
html.rl-print #app .care-caption > span { grid-column: 1; grid-row: 2; margin: 0; line-height: 1.5; }
html.rl-print #app .care-caption .dot-index { grid-column: 2; grid-row: 1 / 3; align-self: end; }
@media (max-width: 1099px) { html.rl-print #app .care-grid { column-gap: 20px !important; row-gap: 48px !important; } }
@media (max-width: 700px) {
  html.rl-print #app .care-grid { row-gap: 40px !important; }
  html.rl-print #app .care-picture, html.rl-print #app .care-wide .care-picture { aspect-ratio: 4 / 3 !important; }
}

/* =========================================================
   진료 분야 = 목차형 목록 (잡지 목차처럼 글이 이끌고, 사진은 작게)
   한 줄 = [번호] [제목 + 설명] [작은 사진] — 위 섹션 머리의 칸(라벨 · 제목 · 설명)과 같은 격자
   ========================================================= */
html.rl-print #app .care-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; }
html.rl-print #app .care-card {
  display: grid !important; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto 1fr; column-gap: 4px;
  align-items: start; padding: 32px 0 34px; border-top: 1px solid var(--rl-print-line-soft); background: transparent;
}
html.rl-print #app .care-card:last-child { border-bottom: 1px solid var(--rl-print-line-soft); }
html.rl-print #app .care-card .care-caption { display: contents !important; }
html.rl-print #app .care-card .dot-index { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
html.rl-print #app .care-card .dot-number { display: block; font: 300 34px/1 var(--rl-font-latin-light) !important; color: var(--rl-print-blue) !important; margin-top: 2px; }
html.rl-print #app .care-card .care-caption h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(24px, 2.2vw, 32px) !important; line-height: 1.3; }
html.rl-print #app .care-card .care-caption > span { grid-column: 2; grid-row: 2; margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--rl-print-muted); }
html.rl-print #app .care-card .care-picture { grid-column: 3; grid-row: 1 / span 2; width: 100%; aspect-ratio: 4 / 3 !important; height: auto !important; margin: 0; }
html.rl-print #app .care-card .care-picture img { transform: none !important; }        /* 작은 사진은 스크롤 확대 없이 */
html.rl-print #app .care-card .round-arrow { width: 34px; height: 34px; right: 12px; bottom: 12px; }
html.rl-print #app .care-card:hover .care-picture img { scale: 1.04; }
/* 넓은 카드의 '연출 이미지' 표시: 작은 사진에 맞춰 작게 */
html.rl-print #app .care-wide .care-image-note { left: 12px !important; bottom: 12px !important; }
html.rl-print #app .care-concept-note { height: 28px; padding: 0 12px; font-size: 11.5px !important; }

/* 태블릿: 머리글 격자(1 : 3)에 맞춤 — 번호 | 제목·설명 | 사진 */
@media (max-width: 1099px) {
  html.rl-print #app .care-card { grid-template-columns: 1fr 1.8fr 1.2fr; }
  html.rl-print #app .care-card .dot-number { font-size: 30px !important; }
}
/* 모바일: [번호 · 제목 · 설명] | [작은 사진] */
@media (max-width: 700px) {
  html.rl-print #app .care-card { grid-template-columns: 1fr 128px; grid-template-rows: auto auto 1fr; column-gap: 16px; padding: 24px 0 26px; }
  html.rl-print #app .care-card .dot-index { grid-column: 1; grid-row: 1; }
  html.rl-print #app .care-card .dot-number { font-size: 22px !important; margin: 0 0 10px; }
  html.rl-print #app .care-card .care-caption h3 { grid-column: 1; grid-row: 2; font-size: 22px !important; }
  html.rl-print #app .care-card .care-caption > span { grid-column: 1; grid-row: 3; margin-top: 6px; font-size: 14px; }
  html.rl-print #app .care-card .care-picture { grid-column: 2; grid-row: 1 / span 3; aspect-ratio: 4 / 3 !important; }
  html.rl-print #app .care-card .round-arrow { width: 28px; height: 28px; right: 8px; bottom: 8px; }
  html.rl-print #app .care-wide .care-image-note { display: none; }   /* 아주 작은 사진에는 표시를 올리지 않음 */
}

/* =========================================================
   네 가지 약속 = 첫 방문 단계와 같은 목록
   1단 · [큰 가는 숫자 | 명조 블루 제목] · 줄 사이와 끝에 가는 선 · 시작은 섹션 제목과 같은 세로선
   ========================================================= */
html.rl-print #app .signal-grid { grid-template-columns: 1fr !important; gap: 0 !important; margin-left: calc((100% - 8px) / 4 + 4px); }
html.rl-print #app .signal-card {
  grid-template-columns: 86px 1fr !important; align-items: start;
  padding: 28px 0 !important; border: 0 !important; border-top: 1px solid var(--rl-print-line-soft) !important;
}
html.rl-print #app .signal-card:first-child { border-top: 0 !important; padding-top: 4px !important; }
html.rl-print #app .signal-card:last-child { border-bottom: 1px solid var(--rl-print-line-soft) !important; }
html.rl-print #app .signal-card .dot-number { font-size: 34px !important; margin-top: -1px; }
html.rl-print #app .signal-card h3 {
  font-family: var(--rl-font-serif) !important; font-weight: 700 !important; color: var(--rl-print-blue) !important;
  font-size: 18px !important; line-height: 27px !important; letter-spacing: -0.02em !important;
}
@media (max-width: 1099px) {
  html.rl-print #app .signal-grid { margin-left: calc((100% - 4px) / 4 + 4px); }
  html.rl-print #app .signal-card .dot-number { font-size: 34px !important; }
}
@media (max-width: 700px) {
  html.rl-print #app .signal-grid { margin-left: 0; }
  html.rl-print #app .signal-card { grid-template-columns: 64px 1fr !important; }
  html.rl-print #app .signal-card .dot-number { font-size: 28px !important; margin-top: .5px; }
  html.rl-print #app .signal-card h3 { font-size: 17px !important; line-height: 25.5px !important; }
}
/* 원본의 약속 문장 폭 제한(180px)을 풀어 첫 방문 목록처럼 한 줄로 */
html.rl-print #app .signal-card h3 { max-width: none !important; }

/* =========================================================
   진료 분야 = 원장 칼럼(Doctor's Notes)과 같은 형식
   데스크톱: 왼쪽 2칸 = 머리(라벨 · 명조 제목), 오른쪽 2칸 = 카드 [1][2] / [3 넓게]
   카드: 위 가는 블루 선 · 16:10 사진(화살표 오른쪽 위) · 번호 · 명조 제목 · 설명
   ========================================================= */
html.rl-print #app .care-card {
  display: flex !important; flex-direction: column; padding: 15px 0 0 !important;
  border: 0 !important; border-top: 1px solid var(--rl-print-line) !important; background: transparent;
}
html.rl-print #app .care-card .care-picture { order: 1; width: 100%; aspect-ratio: 16 / 10 !important; height: auto !important; grid-column: auto; grid-row: auto; }
html.rl-print #app .care-card .care-caption { order: 2; display: grid !important; grid-template-columns: 1fr; row-gap: 8px; margin-top: 22px; }
html.rl-print #app .care-card .dot-index { order: -1; grid-column: auto; grid-row: auto; }
html.rl-print #app .care-card .dot-number { font: 300 15px/1 var(--rl-font-latin-light) !important; margin: 0 0 4px !important; }
html.rl-print #app .care-card .care-caption h3 { grid-column: auto; grid-row: auto; font-size: 22px !important; line-height: 31px; }
html.rl-print #app .care-card .care-caption > span { grid-column: auto; grid-row: auto; margin: 0; font-size: 15px; }
html.rl-print #app .care-card .round-arrow { top: 12px; right: 12px; bottom: auto; width: 38px; height: 38px; }
html.rl-print #app .care-wide .care-picture { aspect-ratio: 16 / 7.2 !important; }
html.rl-print #app .care-grid { grid-template-columns: 1fr 1fr !important; column-gap: 5px !important; row-gap: 56px !important; }
html.rl-print #app .care-wide { grid-column: 1 / -1; }

@media (min-width: 1101px) {
  html.rl-print #app .care-section { display: grid; grid-template-columns: 2fr 1fr 1fr; column-gap: 5px; align-items: start; }   /* 원장 칼럼과 같은 칸 (2 : 1 : 1) */
  html.rl-print #app .care-section .editorial-heading { grid-column: 1; display: flex !important; flex-direction: column; align-items: flex-start; margin-bottom: 0 !important; }
  html.rl-print #app .care-section .editorial-note { margin-top: 52px !important; }
  html.rl-print #app .care-section .care-grid { grid-column: 2 / span 2; }
}
@media (max-width: 700px) {
  html.rl-print #app .care-grid { grid-template-columns: 1fr !important; row-gap: 44px !important; }
  html.rl-print #app .care-card .care-picture, html.rl-print #app .care-wide .care-picture { aspect-ratio: 16 / 10 !important; }
  html.rl-print #app .care-card .round-arrow { width: 34px; height: 34px; }
  html.rl-print #app .care-wide .care-image-note { display: block !important; }
}

/* 사진 카드 위에는 선을 두지 않음 — 사진의 가장자리가 이미 경계, 섹션의 가는 선과 겹쳐 끊긴 선처럼 보이지 않게
   (진료 분야 · 원장 칼럼 · 운정 이야기 카드 공통) */
html.rl-print #app .care-card, html.rl-print #app .column-card, html.rl-print #app .journal-text-card { border-top: 0 !important; padding-top: 0 !important; }

/* =========================================================
   '처음 오시는 분' · '자주 묻는 질문' = 같은 형식
   왼쪽 반: 라벨 → 명조 제목 → 설명 → 버튼 / 오른쪽 반: 번호 목록 (진료 분야·원장 칼럼 카드와 같은 세로선에서 시작)
   ========================================================= */
html.rl-print #app .visit { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
@media (min-width: 1101px) {
  html.rl-print #app .visit, html.rl-print #app #guide { grid-template-columns: 2fr 1fr 1fr !important; column-gap: 5px !important; }
  html.rl-print #app .visit-copy, html.rl-print #app #guide > div:first-child { grid-column: 1; }
  html.rl-print #app .visit-list, html.rl-print #app #guide .questions { grid-column: 2 / span 2; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  html.rl-print #app .visit, html.rl-print #app #guide { grid-template-columns: 1fr 1fr !important; column-gap: 5px !important; }
}
/* 자주 묻는 질문 왼쪽 */
html.rl-print #app #guide .section-label { font-family: var(--rl-font) !important; font-weight: 500 !important; font-size: 13px !important; line-height: normal !important; letter-spacing: 0 !important; }
html.rl-print #app .rl-faq-title { margin: 18px 0 0; font-family: var(--rl-font-serif); font-weight: 700; color: var(--rl-print-blue); font-size: clamp(28px, 2.65vw, 38px); line-height: 1.34; letter-spacing: -0.02em; }
html.rl-print #app .rl-faq-desc { margin: 24px 0 0; font-size: 15px; line-height: 1.7; color: var(--rl-print-charcoal); }
html.rl-print #app .rl-faq-actions { margin-top: 30px; }
.rl-faq-title, .rl-faq-desc, .rl-faq-actions { display: none; }
html.rl-print #app .rl-faq-title, html.rl-print #app .rl-faq-desc { display: block; }
html.rl-print #app .rl-faq-actions { display: flex; }
/* 처음 오시는 분 왼쪽 제목·설명·버튼 간격을 위와 같은 값으로 */
html.rl-print #app .visit-copy h3 { margin-top: 18px !important; }
html.rl-print #app .visit-copy > p { margin-top: 24px; font-size: 15px; line-height: 1.7; }
html.rl-print #app .visit-copy .visit-actions { margin-top: 30px; }

/* 자주 묻는 질문 목록 = 첫 방문 목록과 같은 모양 */
html.rl-print #app .questions { counter-reset: rlq; }
html.rl-print #app .questions [data-slot="accordion-item"] { counter-increment: rlq; }
html.rl-print #app .questions [data-slot="accordion-trigger"] { gap: 22px !important; padding: 28px 0 !important; align-items: flex-start !important; text-decoration: none !important; }
html.rl-print #app .questions [data-slot="accordion-trigger"]:hover { text-decoration: none !important; }
html.rl-print #app .questions .q-number { font-size: 0 !important; min-width: 64px; flex: none; margin-top: -1px; }
html.rl-print #app .questions .q-number::before { content: counter(rlq, decimal-leading-zero); font: 300 34px/1 var(--rl-font-latin-light); letter-spacing: -0.02em; color: var(--rl-print-blue); }
html.rl-print #app .questions [data-slot="accordion-trigger"] > span:nth-child(2) {
  flex: 1; font-family: var(--rl-font-serif) !important; font-weight: 700 !important; font-size: 18px !important; line-height: 27px !important;
  letter-spacing: -0.02em; color: var(--rl-print-blue) !important;
}
html.rl-print #app .questions [data-slot="accordion-content"] { padding-left: 86px; font-size: 15px; line-height: 1.7; color: var(--rl-print-charcoal); }
@media (max-width: 700px) {
  html.rl-print #app .questions .q-number { min-width: 48px; margin-top: .5px; }
  html.rl-print #app .questions .q-number::before { font-size: 28px; }
  html.rl-print #app .questions [data-slot="accordion-trigger"] { gap: 16px !important; }
  html.rl-print #app .questions [data-slot="accordion-trigger"] > span:nth-child(2) { font-size: 17px !important; line-height: 25.5px !important; }
  html.rl-print #app .questions [data-slot="accordion-content"] { padding-left: 64px; }
}

/* =========================================================
   What Matters → Our Promise: 가로 줄만 이어지지 않게 지그재그 배치 (데스크톱)
   진료 설명: 왼쪽 반 = 머리(라벨 · 명조 제목 · 설명) / 오른쪽 반 = 펼침 목록
   약속: 왼쪽 반 = 세로로 긴 진료 사진 / 오른쪽 반 = 머리 → 네 가지 약속 → 맺음 문장·버튼  (잡지 펼침면)
   ========================================================= */
@media (min-width: 1101px) {
  html.rl-print #app section.principles { display: grid !important; grid-template-columns: 2fr 1fr 1fr; column-gap: 5px; align-items: start; }
  html.rl-print #app section.principles .editorial-heading { grid-column: 1; display: flex !important; flex-direction: column; align-items: flex-start; margin-bottom: 0 !important; padding-right: 56px; }
  html.rl-print #app section.principles .editorial-heading h2 { margin-top: 52px; }
  html.rl-print #app section.principles .editorial-note { margin-top: 24px !important; }
  html.rl-print #app section.principles .care-details { grid-column: 2 / span 2; }

  html.rl-print #app section.promise-section { display: grid !important; grid-template-columns: 2fr 1fr 1fr; column-gap: 5px; align-items: start; }
  html.rl-print #app section.promise-section .editorial-heading { grid-column: 2 / span 2; grid-row: 1; display: flex !important; flex-direction: column; align-items: flex-start; margin-bottom: 44px !important; }
  html.rl-print #app section.promise-section .editorial-heading h2 { margin-top: 52px; }
  html.rl-print #app section.promise-section .editorial-note { margin-top: 24px !important; }
  html.rl-print #app section.promise-section .signal-grid { grid-column: 2 / span 2; grid-row: 2; margin-left: 0 !important; margin-bottom: 0 !important; }
  html.rl-print #app .promise-film { display: contents !important; }
  html.rl-print #app .promise-photo {
    grid-column: 1; grid-row: 1 / span 3; align-self: stretch; position: relative !important; inset: auto !important;
    width: auto !important; height: auto !important; min-height: 640px; margin-right: 51px;
  }
  html.rl-print #app .promise-film-copy {
    grid-column: 2 / span 2; grid-row: 3; position: relative !important; inset: auto !important; top: auto !important; left: auto !important; bottom: auto !important;
    transform: none !important; max-width: none !important; margin-top: 56px;
  }
  html.rl-print #app .promise-film-copy h2 { font-size: clamp(24px, 2.1vw, 30px) !important; line-height: 1.4 !important; }
  html.rl-print #app .promise-film img { scale: 1 !important; }
}
/* 진료 설명 섹션 폭을 다른 섹션과 같게 (원본 패널 폭 보정) */
html.rl-print #app section.principles { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
@media (min-width: 1101px) {
  /* 약속 사진: 원본의 뒤로 보내기(z-index -3) 해제 — 종이 바탕 뒤로 숨지 않게 */
  html.rl-print #app .promise-photo { z-index: 0 !important; }
  /* 진료 설명 목록(오른쪽 반): 제목 크기를 반 폭에 맞추고, 펼친 내용은 [사진 | 설명 + 함께 확인할 내용] */
  html.rl-print #app section.principles .service-title { font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.35 !important; }
  html.rl-print #app section.principles .service-content { grid-template-columns: 132px 1fr !important; column-gap: 24px !important; row-gap: 18px !important; align-items: start; }
  html.rl-print #app section.principles .service-content img { grid-column: 1; grid-row: 1 / span 2; width: 132px !important; height: auto !important; aspect-ratio: 6 / 5; object-fit: cover; }
  html.rl-print #app section.principles .service-description { grid-column: 2; grid-row: 1; }
  html.rl-print #app section.principles .service-tags { grid-column: 2; grid-row: 2; }
}
/* 진료 설명 목록: 첫 항목 위 시작선 없음 (섹션 머리 선 바로 아래에서 시작 — 자주 묻는 질문 목록과 같은 규칙) */
html.rl-print #app section.principles [data-slot="accordion-item"]:first-child { border-top: 0 !important; }

/* 진료 설명(머리 왼쪽 · 목록 오른쪽): 진한 섹션 선은 왼쪽 머리 칸 위에만 — 목록 글 위로 지나가지 않게.
   목록은 자기 첫 선(연한 선)으로 시작하고, 그 선을 왼쪽 진한 선과 같은 높이에 맞춤 (인쇄물 2단 목록의 단별 선) */
@media (min-width: 1101px) {
  html.rl-print #app section.principles .editorial-heading { position: relative; }
  html.rl-print #app section.principles .editorial-heading .section-label { position: static; }
  html.rl-print #app section.principles .editorial-heading .section-label::before { left: 0; width: calc(100% - 56px) !important; }
  html.rl-print #app section.principles .care-details { margin-top: calc(-1 * var(--rl-head-line-gap, 36px)); }
}

/* =========================================================
   세로 여백 규칙 (모든 섹션 공통)
   ① 섹션 선 → 모든 칸의 첫 내용: 36px (머리 라벨과 같은 간격)
   ② 앞 섹션의 마지막 내용 → 다음 섹션 선: --rl-sec-g 하나로 (데스크톱 120px)
   섹션 안쪽의 제각각이던 위아래 여백(패널 여백 포함)은 걷어내고 이 두 값만 씀
   ========================================================= */
html.rl-print { --rl-sec-g: clamp(72px, 8.4vw, 120px); --rl-line-gap: 36px; }
html.rl-print #app main > section:not(.hero-stage) { padding-top: calc(var(--rl-sec-g) + var(--rl-line-gap)) !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
html.rl-print #app main > section > :last-child { margin-bottom: 0 !important; }
/* 의료진: 선은 패널 위 테두리 — 섹션 위 여백은 선까지만, 패널 안쪽은 36px부터 */
html.rl-print #app main > section.team-section { padding-top: var(--rl-sec-g) !important; }
html.rl-print #app .team-panel { padding-top: var(--rl-line-gap) !important; padding-bottom: 0 !important; }
html.rl-print #app .team-editorial { padding-top: 0 !important; padding-bottom: 0 !important; }
/* 처음 오시는 분 · 자주 묻는 질문 · 진료 설명: 안쪽 패널 여백 걷기 */
html.rl-print #app .visit, html.rl-print #app section.principles { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }   /* 다른 섹션과 같은 좌우 여백 */
/* 바닥글: 마지막 섹션 내용 → 바닥글 선도 같은 간격 */
html.rl-print #app .site-footer { margin-top: var(--rl-sec-g) !important; }
html.rl-print #app main > section .section-label { margin-top: 0 !important; }      /* 라벨 위 여백 없음 — 선 아래 36px 규칙만 */
html.rl-print #app .site-footer { padding-top: var(--rl-line-gap) !important; }    /* 바닥글도 선 → 내용 36px */
/* 의료진: 원본 패널의 좌우 안쪽 여백 걷기 — 글은 선의 시작점에서, 사진 타일은 선의 끝점까지 */
html.rl-print #app .team-panel { padding-left: 0 !important; padding-right: 0 !important; }
html.rl-print #app .team-editorial { padding-left: 0 !important; }

/* 자주 묻는 질문 항목: 원본 흰 상자 시절의 좌우 안쪽 여백(26px) 걷기 — 첫 방문 목록과 같은 세로선에서 시작 · 끝 */
html.rl-print #app #guide .questions [data-slot="accordion-item"] { padding-left: 0 !important; padding-right: 0 !important; }

/* =========================================================
   제목 위치의 리듬: 좌 · 좌 · 우 (3박자 반복, 좌우 교대 아님)
   진료 분야 좌 · 진료 설명 좌 · 약속 우 | 의료진 좌 · 원장 칼럼 좌 · 운정 이야기 우 | 자주 묻는 질문 좌 · 처음 오시는 분 좌
   '우' 섹션: 제목 묶음이 오른쪽 반, 섹션 선도 제목 위(오른쪽 반)에서 시작 · 큰 사진은 왼쪽 (약속과 같은 짜임)
   ========================================================= */


/* 진료 설명 · 처음 오시는 분: 넓은 화면에서도 다른 섹션과 같은 최대 폭(1900px) · 가운데 정렬
   (앞서 원본 패널 폭을 걷으며 함께 풀렸던 최대 폭을 되돌림) */
html.rl-print #app section.principles, html.rl-print #app .visit {
  width: 100% !important; max-width: 1900px !important; margin-left: auto !important; margin-right: auto !important;
}
/* 머리글 · 바닥글 · 머리글 전화번호도 섹션과 같은 좌우 끝선 — 끝선 값 하나(--rl-edge)로
   (넓은 화면의 최대 폭 1900px 가운데 정렬 포함, 머리글 오른쪽은 전화번호 자리만큼 비움) */
html.rl-print { --rl-edge: max(var(--gutter, 39px), calc((100vw - var(--rl-print-band-w) - 1900px) / 2 + var(--gutter, 39px))); }
html.rl-print #app .site-footer { padding-left: var(--rl-edge) !important; padding-right: var(--rl-edge) !important; }
html.rl-print #app .header { padding-left: var(--rl-edge) !important; padding-right: var(--rl-edge) !important; }
html.rl-print .rl-print-tel { right: calc(var(--rl-print-band-w) + var(--rl-edge)) !important; }
@media (min-width: 1361px) { html.rl-print #app .header { padding-right: calc(var(--rl-edge) + 232px) !important; } }
@media (min-width: 1100px) and (max-width: 1360px) { html.rl-print #app .header { padding-right: calc(var(--rl-edge) + 172px) !important; } }



/* 사진 위 표시 한 가지 규격: 화살표 원 40px · 알약 높이 40px · 모서리에서 16px (모바일 34px · 12px)
   (진료 분야 · 원장 칼럼 · 운정 이야기 카드 · 표지 공통) */
html.rl-print #app .care-card .round-arrow, html.rl-print #app .column-card-top > span,
html.rl-print #app .journal-card-top > svg, html.rl-print #app .journal-cover > svg {
  width: 40px !important; height: 40px !important; top: 16px !important; right: 16px !important; bottom: auto !important; left: auto !important;
}
html.rl-print #app .journal-card-top > svg, html.rl-print #app .journal-cover > svg { padding: 12px !important; }
html.rl-print #app .journal-cover h3 { top: 16px !important; left: 16px !important; height: 40px !important; }
html.rl-print #app .care-wide .care-image-note { left: 16px !important; bottom: 16px !important; }
html.rl-print #app .care-concept-note { height: 40px !important; }
@media (max-width: 700px) {
  html.rl-print #app .care-card .round-arrow, html.rl-print #app .column-card-top > span,
  html.rl-print #app .journal-card-top > svg, html.rl-print #app .journal-cover > svg { width: 34px !important; height: 34px !important; top: 12px !important; right: 12px !important; }
  html.rl-print #app .journal-card-top > svg, html.rl-print #app .journal-cover > svg { padding: 10px !important; }
  html.rl-print #app .journal-cover h3 { top: 12px !important; left: 12px !important; height: 34px !important; }
  html.rl-print #app .care-wide .care-image-note { left: 12px !important; bottom: 12px !important; }
  html.rl-print #app .care-concept-note { height: 34px !important; }
}
html.rl-print #app .care-card .round-arrow, html.rl-print #app .column-card-top > span,
html.rl-print #app .journal-card-top > svg, html.rl-print #app .journal-cover > svg { margin: 0 !important; }   /* 원본의 7·8px 바깥 여백 제거 — 모서리 16px 규격 그대로 */

/* =========================================================
   네 가지 약속 = 포스터형 2×2 (리뷰 이벤트 안내의 번호 구성)
   펼침 목록처럼 보이지 않게: 줄마다 긴 가로선 · 오른쪽 기호 없음
   칸마다 위 가는 선 + 큰 가는 숫자 + 명조 문장, 두 단 사이 가는 세로선
   ========================================================= */
html.rl-print #app .signal-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 0 !important; row-gap: 0 !important; margin-left: 0 !important; }
html.rl-print #app .signal-card,
html.rl-print #app .signal-card:first-child,
html.rl-print #app .signal-card:last-child {
  display: block !important; min-height: 0; padding: 22px 32px 40px 0 !important;
  border: 0 !important; border-top: 1px solid var(--rl-print-line-soft) !important;
}
html.rl-print #app .signal-card:nth-child(even) { padding: 22px 0 40px 32px !important; }
html.rl-print #app .signal-card:nth-child(odd) { border-right: 1px solid var(--rl-print-line-soft) !important; }
html.rl-print #app .signal-card .dot-index { display: block; margin: 0; }
html.rl-print #app .signal-card .dot-number { display: block; font: 300 56px/1 var(--rl-font-latin-light) !important; letter-spacing: -0.03em; color: var(--rl-print-blue) !important; margin: 0 0 26px !important; }
html.rl-print #app .signal-card h3 { font-family: var(--rl-font-serif) !important; font-weight: 700 !important; font-size: 21px !important; line-height: 1.5 !important; color: var(--rl-print-blue) !important; max-width: 11em !important; }
@media (max-width: 700px) {
  html.rl-print #app .signal-card, html.rl-print #app .signal-card:first-child, html.rl-print #app .signal-card:last-child { padding: 18px 16px 30px 0 !important; }
  html.rl-print #app .signal-card:nth-child(even) { padding: 18px 0 30px 16px !important; }
  html.rl-print #app .signal-card .dot-number { font-size: 40px !important; margin-bottom: 18px !important; }
  html.rl-print #app .signal-card h3 { font-size: 17px !important; }
}
/* 처음 오시는 분: 펼쳐지지 않는 단계 목록 — 펼침처럼 보이는 + 기호 없음 (보험 서류 안내의 단계 구성)
   + 원은 실제로 펼쳐지는 목록(자주 묻는 질문 · 진료 설명)에만 */
html.rl-print #app .visit-list svg { display: none !important; }

/* =========================================================
   모바일 제목 크기 하나로 (25~40px로 제각각이던 것 정리)
   설계한 한 줄이 한 줄에 들어가는 크기 — 넘칠 때는 한 낱말만 남지 않게 두 줄을 고르게
   ========================================================= */
@media (max-width: 700px) {
  html.rl-print { --rl-m-title: clamp(22px, 6.3vw, 26px); }
  html.rl-print #app #about .intro-statement,
  html.rl-print #app #care .editorial-note,
  html.rl-print #app main section h2.section-title,
  html.rl-print #app .promise-film-copy h2,
  html.rl-print #app .team-section h2,
  html.rl-print #app .column-preview h2,
  html.rl-print #app #local-stories h2,
  html.rl-print #app .rl-faq-title,
  html.rl-print #app .visit-copy h3 { font-size: var(--rl-m-title) !important; line-height: 1.42 !important; }
  html.rl-print #app .hero-bottom h1 { font-size: clamp(23px, 6.6vw, 28px) !important; line-height: 1.4 !important; }
  html.rl-print #app main :is(h1, h2, h3, .intro-statement, .editorial-note, .rl-faq-title),
  html.rl-print #app main :is(h1, h2, h3, .intro-statement, .editorial-note, .rl-faq-title) rl-i { text-wrap: balance; }
}
/* 바닥글 '진심, 편안한 치과': 로고의 글자(운정뿌리사랑치과) 시작점에 맞추고 로고에 조금 더 붙임
   로고 그림 속 글자 시작 = 로고 폭의 19.62% */
html.rl-print #app .site-footer-brand + p { margin-left: calc(236px * .1962) !important; margin-top: 6px !important; }
@media (max-width: 700px) { html.rl-print #app .site-footer-brand + p { margin-left: calc(196px * .1962) !important; margin-top: 4px !important; } }
/* 바닥글 두 줄 맞춤 (좌우 나란할 때): 로고 ↔ 전화번호 · '진심, 편안한 치과' ↔ 주소 첫 줄 */
@media (min-width: 701px) { html.rl-print #app .site-footer-brand + p { margin-top: 13px !important; } }

/* =========================================================
   메인 내용 개편 (원내 게시물 IMPLANT · NEWS + 감염관리 · 시설)
   리듬: 진료 분야 좌 · 교정 소식 좌 · 임플란트 우 | 의료진 좌 · 감염관리 좌 · 원장 칼럼 우 | 운정 이야기 좌 · 자주 묻는 질문 좌 · 처음 오시는 분 우
   ========================================================= */
html.rl-print #app main > section.rl-facts, html.rl-print #app main > section.rl-news, html.rl-print #app main > section.rl-safety {
  max-width: 1900px; margin-left: auto !important; margin-right: auto !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; box-sizing: border-box; width: 100%;
}
/* 공통 글 */
html.rl-print #app .rl-body { margin-top: 24px; font-size: 15.5px; line-height: 1.85; color: var(--rl-print-charcoal); max-width: 34em; }
html.rl-print #app .rl-body b { font-weight: 600; color: var(--rl-print-blue); }
html.rl-print #app .rl-sub-title { font: 700 18px/1.5 var(--rl-font-serif); color: var(--rl-print-blue); letter-spacing: -0.02em; }
html.rl-print #app .rl-sub { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rl-print-line-soft); }
html.rl-print #app .rl-sub .rl-sub-title { margin-bottom: 14px; }
html.rl-print #app .rl-two { display: grid; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 0; }
html.rl-print #app .rl-two > li { display: flex; flex-direction: column; gap: 6px; padding-right: 24px; }
html.rl-print #app .rl-two > li + li { padding: 0 0 0 24px; border-left: 1px solid var(--rl-print-line-soft); }
html.rl-print #app .rl-two b { font: 600 15px/1.5 var(--rl-font); color: var(--rl-print-charcoal); }
html.rl-print #app .rl-two span { font-size: 14px; line-height: 1.7; color: var(--rl-print-muted, #56697a); }
html.rl-print #app .rl-cta { margin-top: 40px; font: 400 clamp(20px, 1.7vw, 25px)/1.55 var(--rl-font-serif); color: var(--rl-print-blue); letter-spacing: -0.02em; }
html.rl-print #app .rl-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
html.rl-print #app .rl-num { display: block; font: 300 13px/1 var(--rl-font-latin-light); color: var(--rl-print-blue); letter-spacing: .02em; }
html.rl-print #app .rl-eng { display: block; margin: 10px 0 14px; font: 300 clamp(24px, 2.1vw, 30px)/1.05 var(--rl-font-latin-light); color: var(--rl-print-blue); letter-spacing: -0.02em; }
html.rl-print #app .rl-fact { display: block; font: 700 18px/1.45 var(--rl-font-serif); color: var(--rl-print-blue); letter-spacing: -0.02em; }
html.rl-print #app .rl-desc { display: block; margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--rl-print-charcoal); }

/* ② 한눈에 보기 띠: 선(섹션 선) → 36px → 네 칸, 칸 사이 가는 세로선 */
html.rl-print #app main > section.rl-facts { padding-top: var(--rl-sec-g) !important; }
html.rl-print #app .rl-facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rl-print-line); }
html.rl-print #app .rl-facts-grid > li { padding: var(--rl-line-gap) 24px 0; }
html.rl-print #app .rl-facts-grid > li:first-child { padding-left: 0; }
html.rl-print #app .rl-facts-grid > li:last-child { padding-right: 0; }
html.rl-print #app .rl-facts-grid > li + li { border-left: 1px solid var(--rl-print-line-soft); }
html.rl-print #app .rl-facts-grid a { display: block; text-decoration: none; color: inherit; }
html.rl-print #app .rl-facts-grid a:hover .rl-fact { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ③ 교정 소식: 좌 = 글, 우 = 세로 사진 */
html.rl-print #app .rl-news-photo { margin: 0; overflow: hidden; border-radius: var(--rl-print-r-photo, 10px); background: var(--rl-print-mist); }
html.rl-print #app .rl-news-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: saturate(.86) brightness(1.04) contrast(.97); display: block; }
@media (min-width: 1101px) {
  html.rl-print #app .rl-news-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; column-gap: 5px; align-items: stretch; }
  html.rl-print #app .rl-news-copy { grid-column: 1; padding-right: 56px; }
  html.rl-print #app .rl-news-photo { grid-column: 2 / span 2; min-height: 640px; }
}
@media (max-width: 1100px) { html.rl-print #app .rl-news-photo { margin-top: 44px; aspect-ratio: 4 / 4.6; } }

/* ④ 오래 쓰는 임플란트 (약속 섹션을 고쳐 씀) */
html.rl-print #app .rl-implant-body p + p { margin-top: 14px; }
html.rl-print #app .rl-implant-sub { margin: 0 0 18px; }
html.rl-print #app .signal-card .rl-card-desc { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--rl-print-charcoal); max-width: 22em; }
html.rl-print #app .signal-card .rl-card-desc b { font-weight: 600; color: var(--rl-print-blue); }
html.rl-print #app .signal-card .dot-number { font-size: 44px !important; margin-bottom: 20px !important; }
html.rl-print #app .signal-card h3 { font-size: 19px !important; max-width: none !important; }
html.rl-print #app .promise-film-copy h2.rl-quote, html.rl-print #app .promise-film-copy h2.rl-quote * { font-weight: 400 !important; color: var(--rl-print-blue) !important; }
html.rl-print #app .promise-photo img.rl-implant-photo { object-position: 50% 18% !important; }
html.rl-print #app .rl-photo-tag { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border: 1px solid var(--rl-print-blue); border-radius: 999px; background: rgba(246, 248, 250, .92); color: var(--rl-print-blue); font-size: 12.5px; line-height: 1.4; }
@media (max-width: 700px) {
  html.rl-print #app .signal-card .dot-number { font-size: 34px !important; margin-bottom: 14px !important; }
  html.rl-print #app .signal-card h3 { font-size: 16px !important; }
  html.rl-print #app .signal-card .rl-card-desc { font-size: 13px; }
  html.rl-print #app .rl-photo-tag { left: 12px; bottom: 12px; right: 12px; font-size: 11.5px; }
}

/* ⑤ 감염관리 · 시설 */
html.rl-print #app .rl-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rl-print-line-soft); }
html.rl-print #app .rl-flow > li { padding: 16px 12px 0; }
html.rl-print #app .rl-flow > li:first-child { padding-left: 0; }
html.rl-print #app .rl-flow > li + li { border-left: 1px solid var(--rl-print-line-soft); }
html.rl-print #app .rl-flow b { display: block; margin-top: 10px; font: 700 15px/1.45 var(--rl-font-serif); color: var(--rl-print-blue); letter-spacing: -0.02em; }
html.rl-print #app .rl-quad { display: grid; grid-template-columns: 1fr 1fr; list-style: none; margin: 44px 0 0; padding: 0; }
html.rl-print #app .rl-quad > li { padding: 20px 28px 34px 0; border-top: 1px solid var(--rl-print-line-soft); }
html.rl-print #app .rl-quad > li:nth-child(even) { padding: 20px 0 34px 28px; }
html.rl-print #app .rl-quad > li:nth-child(odd) { border-right: 1px solid var(--rl-print-line-soft); }
html.rl-print #app .rl-big-num { display: block; margin-bottom: 18px; font: 300 44px/1 var(--rl-font-latin-light); color: var(--rl-print-blue); letter-spacing: -0.03em; }
html.rl-print #app .rl-facility { margin-top: 72px; }
html.rl-print #app .rl-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rl-print-line-soft); }
html.rl-print #app .rl-tri > li { padding: 22px 28px 0; }
html.rl-print #app .rl-tri > li:first-child { padding-left: 0; }
html.rl-print #app .rl-tri > li:last-child { padding-right: 0; }
html.rl-print #app .rl-tri > li + li { border-left: 1px solid var(--rl-print-line-soft); }
@media (min-width: 1101px) {
  html.rl-print #app .rl-safety-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; column-gap: 5px; align-items: start; }
  html.rl-print #app .rl-safety-copy { grid-column: 1; padding-right: 56px; }
  html.rl-print #app .rl-safety-main { grid-column: 2 / span 2; }
}
@media (max-width: 1100px) { html.rl-print #app .rl-safety-main { margin-top: 48px; } }

/* 리듬 뒤집기 (데스크톱): 원장 칼럼 = 우, 운정 이야기 = 좌(설명·버튼은 제목 아래), 처음 오시는 분 = 우 */
@media (min-width: 1101px) {
  html.rl-print #app .column-preview { grid-template-columns: 1fr 1fr 2fr !important; }
  html.rl-print #app .column-preview > .column-preview-intro { grid-column: 3 !important; grid-row: 1 !important; }
  html.rl-print #app .column-preview > .column-card:nth-child(2) { grid-column: 1 !important; grid-row: 1 !important; }
  html.rl-print #app .column-preview > .column-card:nth-child(3) { grid-column: 2 !important; grid-row: 1 !important; }
  html.rl-print #app .journal-heading { grid-template-columns: 2fr 1fr 1fr !important; grid-template-rows: auto auto auto; column-gap: 5px; }
  html.rl-print #app .journal-heading > div:first-child { grid-column: 1; grid-row: 1; }
  html.rl-print #app .journal-heading > p { grid-column: 1; grid-row: 2; margin-top: 24px !important; max-width: 30em; }
  html.rl-print #app .journal-heading > a.pill { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 30px !important; }
  html.rl-print[data-page="index"] #app .visit-copy { grid-column: 2 / span 2 !important; grid-row: 1 !important; }   /* '우'는 메인에서만 */
  html.rl-print[data-page="index"] #app .visit-list { grid-column: 1 !important; grid-row: 1 !important; }
}

/* 모바일 · 태블릿 */
@media (max-width: 900px) {
  html.rl-print #app .rl-facts-grid { grid-template-columns: 1fr 1fr; }
  html.rl-print #app .rl-facts-grid > li { padding: var(--rl-line-gap) 16px 28px; }
  html.rl-print #app .rl-facts-grid > li:nth-child(odd) { padding-left: 0; border-left: 0; }
  html.rl-print #app .rl-facts-grid > li:nth-child(even) { padding-right: 0; }
  html.rl-print #app .rl-facts-grid > li:nth-child(n+3) { border-top: 1px solid var(--rl-print-line-soft); }
  html.rl-print #app .rl-tri { grid-template-columns: 1fr; }
  html.rl-print #app .rl-tri > li, html.rl-print #app .rl-tri > li:first-child, html.rl-print #app .rl-tri > li:last-child { padding: 20px 0 24px; border-left: 0 !important; }
  html.rl-print #app .rl-tri > li + li { border-top: 1px solid var(--rl-print-line-soft); }
}
@media (max-width: 700px) {
  html.rl-print #app .rl-eng { font-size: 22px; margin: 8px 0 10px; }
  html.rl-print #app .rl-fact { font-size: 16px; }
  html.rl-print #app .rl-desc { font-size: 13px; }
  html.rl-print #app .rl-two { grid-template-columns: 1fr; }
  html.rl-print #app .rl-two > li + li { padding: 16px 0 0; margin-top: 16px; border-left: 0; border-top: 1px solid var(--rl-print-line-soft); }
  html.rl-print #app .rl-cta { font-size: 20px; }
  html.rl-print #app .rl-flow { grid-template-columns: 1fr; }
  html.rl-print #app .rl-flow > li, html.rl-print #app .rl-flow > li:first-child { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-left: 0 !important; }
  html.rl-print #app .rl-flow > li + li { border-top: 1px solid var(--rl-print-line-soft); }
  html.rl-print #app .rl-flow b { margin-top: 0; }
  html.rl-print #app .rl-quad > li, html.rl-print #app .rl-quad > li:nth-child(even) { padding: 16px 12px 24px 0; }
  html.rl-print #app .rl-quad > li:nth-child(even) { padding: 16px 0 24px 12px; }
  html.rl-print #app .rl-big-num { font-size: 32px; margin-bottom: 12px; }
  html.rl-print #app .rl-facility { margin-top: 56px; }
}

/* =========================================================
   섹션 제목 크기 하나로 (데스크톱 · 태블릿) — 인쇄물 게시물의 제목 크기가 모두 같듯이
   30~60px로 제각각이던 것을 clamp(28px, 2.65vw, 38px) 하나로. 둘째 줄은 연한 블루
   ========================================================= */
@media (min-width: 701px) {
  html.rl-print { --rl-title: clamp(28px, 2.65vw, 38px); }
  html.rl-print #app #about .intro-statement,
  html.rl-print #app #care .editorial-note,
  html.rl-print #app #rl-ortho h2.section-title,
  html.rl-print #app #rl-implant .editorial-heading h2,
  html.rl-print #app .team-section h2,
  html.rl-print #app #rl-safety h2.section-title,
  html.rl-print #app .column-preview h2,
  html.rl-print #app #local-stories h2,
  html.rl-print #app .rl-faq-title,
  html.rl-print #app .visit-copy h3 { font-family: var(--rl-font-serif) !important; font-weight: 700 !important; font-size: var(--rl-title) !important; line-height: 1.34 !important; letter-spacing: -0.02em !important; color: var(--rl-print-blue); }
  html.rl-print #app .promise-film-copy h2.rl-quote { font-size: clamp(22px, 1.9vw, 28px) !important; line-height: 1.5 !important; }
}
html.rl-print #app #rl-ortho h2.section-title, html.rl-print #app #rl-safety h2.section-title { margin: 18px 0 0; font-family: var(--rl-font-serif); font-weight: 700; color: var(--rl-print-blue); letter-spacing: -0.02em; }
html.rl-print #app #rl-ortho h2.section-title span, html.rl-print #app #rl-safety h2.section-title span { color: rgba(6, 98, 217, .55); }
@media (max-width: 700px) {
  html.rl-print #app #rl-ortho h2.section-title, html.rl-print #app #rl-safety h2.section-title { font-size: var(--rl-m-title) !important; line-height: 1.42 !important; }
  html.rl-print #app .promise-film-copy h2.rl-quote { font-size: 20px !important; line-height: 1.55 !important; }
}
/* 임플란트: '우리의 원칙' 소제목을 본문과 2×2 사이 자리에 (데스크톱 격자 줄 지정) */
@media (min-width: 1101px) {
  html.rl-print #app section.promise-section .editorial-heading { grid-row: 1 !important; }
  html.rl-print #app section.promise-section .rl-implant-sub { grid-column: 2 / span 2; grid-row: 2; margin: 0 0 18px !important; }
  html.rl-print #app section.promise-section .signal-grid { grid-row: 3 !important; }
  html.rl-print #app section.promise-section .promise-film-copy { grid-row: 4 !important; }
  html.rl-print #app section.promise-section .promise-photo { grid-row: 1 / span 4 !important; }
}
@media (min-width: 1101px) {
  /* 사진이 더 길 때 남는 높이는 마지막 줄(인용 아래)이 받도록 — 제목·원칙 사이 간격은 늘 같게 */
  html.rl-print #app section.promise-section { grid-template-rows: auto auto auto 1fr !important; }
  html.rl-print #app section.promise-section .rl-implant-sub { margin: 0 !important; padding: 0 0 18px; align-self: start; }   /* 위 간격은 머리의 아래 여백(44px)이 맡음 */
  html.rl-print #app section.promise-section .signal-grid, html.rl-print #app section.promise-section .promise-film-copy { align-self: start; }
}

/* =========================================================
   첫 화면 다시 짜기: 사진을 줄이고(화면 높이의 약 54%) 표지처럼
   사진(아래가 종이로 녹아듦) → 가는 선 → [제목 | 대표원장 카드] → 56px → 한눈에 보기 4칸
   한 화면에 사진 · 제목 · 의료진 · 핵심 사실이 함께 보이도록 (휑하지 않게)
   ========================================================= */
html.rl-print { --hero-ph: clamp(360px, 54vh, 600px); --hero-overlap: 72px; }
html.rl-print #app .hero-stage { height: auto !important; min-height: 0 !important; padding-bottom: 0 !important; }
html.rl-print #app .home-hero {
  position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; overflow: hidden;
  padding: calc(var(--hero-ph) - var(--hero-overlap)) var(--rl-edge, var(--gutter)) 0 !important;
}
html.rl-print #app .hero-image { inset: 0 0 auto 0 !important; top: 0 !important; height: var(--hero-ph) !important; }
html.rl-print #app .hero-image img { object-position: 58% 32% !important; }
html.rl-print #app .hero-shade {
  inset: 0 0 auto 0 !important; height: calc(var(--hero-ph) + 120px) !important;
  background: linear-gradient(180deg, rgba(246, 248, 250, 0) 0%, rgba(246, 248, 250, 0) 52%, rgba(246, 248, 250, .6) 68%, rgba(246, 248, 250, .95) 80%, #f6f8fa 84%, #f6f8fa 100%) !important;
}
html.rl-print #app .hero-crosses { top: calc(var(--hero-ph) - var(--hero-overlap)) !important; bottom: auto !important; left: var(--rl-edge, var(--gutter)) !important; right: var(--rl-edge, var(--gutter)) !important; width: auto !important; }
html.rl-print #app .hero-bottom { position: relative !important; inset: auto !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; padding: 28px 0 0 !important; margin: 0 !important; align-items: end !important; }
html.rl-print #app main > section.rl-facts { padding-top: 56px !important; }   /* 한눈에 보기는 첫 화면의 아랫단 */
@media (max-width: 700px) {
  html.rl-print { --hero-ph: clamp(280px, 50svh, 440px); --hero-overlap: 56px; }
  html.rl-print #app .hero-image img { object-position: 64% 30% !important; }
  html.rl-print #app .hero-bottom { padding-top: 22px !important; }
  html.rl-print #app main > section.rl-facts { padding-top: 44px !important; }
}
/* 첫 화면 다듬기: 사진 52% · 간격 촘촘히, 한눈에 보기는 첫 화면과 함께 나타남(스크롤을 기다리지 않음) */
html.rl-print { --hero-ph: clamp(340px, 52vh, 580px); }
html.rl-print #app .hero-bottom { padding-top: 24px !important; }
html.rl-print #app main > section.rl-facts { padding-top: 44px !important; }
@keyframes rlFactsIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
html.rl-print #app .rl-facts-grid > li { animation: rlFactsIn 1.1s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(1100ms + var(--i, 0) * 110ms); }
@media (prefers-reduced-motion: reduce) { html.rl-print #app .rl-facts-grid > li { animation: none; } }
@media (max-width: 700px) {
  html.rl-print { --hero-ph: clamp(260px, 46svh, 420px); }
  html.rl-print #app main > section.rl-facts { padding-top: 36px !important; }
}
/* 첫 화면 대표원장 카드: 사진 위 선 삭제 (사진 카드 위에는 선을 두지 않는 규칙) */
html.rl-print #app .mini-doctor { border-top: 0 !important; padding-top: 0 !important; }
/* '우' 섹션(임플란트 · 원장 칼럼 · 처음 오시는 분)도 섹션 선은 좌우 끝까지 — 가운데서 잘려 시작하지 않게
   선을 라벨이 아니라 섹션에 그림 (같은 높이 · 색 · 그어지는 움직임) */
@media (min-width: 1101px) {
  html.rl-print #app section.promise-section, html.rl-print #app section.column-preview, html.rl-print[data-page="index"] #app section.visit { position: relative; }
  html.rl-print #app section.promise-section .section-label::before,
  html.rl-print #app section.column-preview .section-label::before,
  html.rl-print[data-page="index"] #app section.visit .section-label::before { display: none !important; }
  html.rl-print #app section.promise-section::before,
  html.rl-print #app section.column-preview::before,
  html.rl-print[data-page="index"] #app section.visit::before {
    content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: var(--rl-sec-g); height: 1px; z-index: 1;
    background: var(--rl-print-blue); opacity: var(--rl-head-line-opacity, .8); pointer-events: none;
    transform: scaleX(0); transform-origin: 0 50%;
  }
  html.rl-print #app section.promise-section:has(.section-label[data-rl-in])::before,
  html.rl-print #app section.column-preview:has(.section-label[data-rl-in])::before,
  html.rl-print[data-page="index"] #app section.visit:has(.section-label[data-rl-in])::before { transform: scaleX(1); transition: transform var(--rl-dur-draw, 1.4s) var(--rl-ease-io, cubic-bezier(.65, 0, .35, 1)); }
}
@media (min-width: 1101px) and (prefers-reduced-motion: reduce) {
  html.rl-print #app section.promise-section::before, html.rl-print #app section.column-preview::before, html.rl-print[data-page="index"] #app section.visit::before { transform: none; }
}
/* '우' 섹션: 왼쪽 내용(사진 · 카드 · 목록)은 오른쪽 글 칸보다 56px 앞에서 끝냄 — '좌' 섹션의 글 칸 오른쪽 여백(56px)과 같은 간격
   오른쪽 글 칸은 그대로 가운데 세로선(내용 폭의 50%)에서 시작 */
@media (min-width: 1101px) {
  html.rl-print[data-page="index"] #app section.visit .visit-list { margin-right: 51px !important; }
  html.rl-print #app .column-preview {
    grid-template-columns: calc((50% - 61px) / 2) calc((50% - 61px) / 2) 46px minmax(0, 1fr) !important; column-gap: 5px !important;   /* 46 + 간격 5·5 = 56px */
  }
  html.rl-print #app .column-preview > .column-preview-intro { grid-column: 4 !important; }
}
/* 처음 오시는 분 목록: 세로 가운데 정렬·위 여백을 없애 라벨과 같은 높이에서 시작 (선 아래 36px 규칙) */
html.rl-print #app section.visit .visit-list { align-self: start !important; padding-top: 0 !important; margin-top: 0 !important; }
html.rl-print #app section.visit .visit-list > div:first-child { padding-top: 0 !important; }
/* 가는 선 → 그 아래 글 시작: 목록·칸 공통 28px (모바일 20px) — 첫 방문·자주 묻는 질문 줄 간격과 같게 */
html.rl-print { --rl-inner-gap: 28px; }
@media (max-width: 700px) { html.rl-print { --rl-inner-gap: 20px; } }
html.rl-print #app .rl-flow { margin-top: 18px !important; }
html.rl-print #app .rl-flow > li { padding-top: var(--rl-inner-gap) !important; }
html.rl-print #app .rl-quad > li, html.rl-print #app .rl-quad > li:nth-child(even) { padding-top: var(--rl-inner-gap) !important; }
html.rl-print #app .rl-tri { margin-top: 18px !important; }
html.rl-print #app .rl-tri > li, html.rl-print #app .rl-tri > li:first-child, html.rl-print #app .rl-tri > li:last-child { padding-top: var(--rl-inner-gap) !important; }
html.rl-print #app .signal-card, html.rl-print #app .signal-card:first-child, html.rl-print #app .signal-card:last-child, html.rl-print #app .signal-card:nth-child(even) { padding-top: var(--rl-inner-gap) !important; }
html.rl-print #app .rl-sub { padding-top: var(--rl-inner-gap) !important; }
@media (max-width: 700px) {
  html.rl-print #app .rl-flow > li, html.rl-print #app .rl-flow > li:first-child { padding-top: 12px !important; padding-bottom: 12px !important; }   /* 모바일 다섯 단계는 한 줄 목록 */
}
html.rl-print #app .rl-sub { padding-top: 22px !important; }   /* 소제목은 줄 높이가 있어 22px이면 글자 위가 다른 목록과 같은 높이 */
/* 모바일: 움직임 시작을 화면 높이의 10% 더 일찍 (글·선 67% → 77% 지점, 사진 아래 18% → 8% 제외) */
@media (max-width: 700px) { html.rl-print, html.rl-print:root { --rl-trigger-text: 23%; --rl-trigger-img: 8%; } }

/* 교정 소식 사진: 와이프 전환 — 왼쪽에서 오른쪽으로 열리고, 여는 가장자리를 가는 블루 선이 따라감. 사진은 살짝 큰 데서 제자리로
   (틀 자체를 다 잘라 두면 브라우저가 '보이지 않는 요소'로 보고 시작 신호를 주지 않음 → 틀은 열어 두고 속 사진에 와이프) */
html.rl-print #app .rl-news-photo { position: relative; background: transparent !important; }
html.rl-print #app .rl-news-photo::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 2; background: var(--rl-print-blue); opacity: 0; pointer-events: none; }
html.rl-print.rl-motion #app .rl-news-photo:not([data-rl-in]) img { clip-path: inset(0 100% 0 0); }
html.rl-print.rl-motion #app .rl-news-photo[data-rl-in] img { clip-path: inset(0 0 0 0); transition: clip-path 1.5s cubic-bezier(.77, 0, .175, 1), scale 2.1s cubic-bezier(.16, 1, .3, 1) !important; }
html.rl-print.rl-motion #app .rl-news-photo[data-rl-in]::after { animation: rlWipeEdge 1.5s cubic-bezier(.77, 0, .175, 1) both; }
@keyframes rlWipeEdge { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.rl-print #app .rl-news-photo::after { animation: none !important; opacity: 0 !important; }
  html.rl-print.rl-motion #app .rl-news-photo img { clip-path: none !important; }
}

/* =========================================================
   '스르륵' 움직임
   목록 줄(row): 한 줄씩 살짝 떠오르며 천천히 나타남 — 1.6~1.8s, 부드러운 곡선, 줄마다 0.12~0.13s 차이
   사진(img): 아래 10%에서 · 확대 1.08 · 2.1s · 부드러운 시작 + 함께 페이드 (교정 소식 사진은 와이프 유지)
   ========================================================= */
html.rl-print { --rl-ease-soft: cubic-bezier(.33, 0, .2, 1); --rl-dur-img: 2.1s; --rl-dur-img-zoom: 2.5s; --rl-img-zoom: 1.08; }
html.rl-print.rl-motion #app [data-rl="row"]:not([data-rl-in]) { opacity: 0 !important; transform: translate3d(0, 22px, 0) !important; transition: none !important; }
html.rl-print.rl-motion #app [data-rl="row"][data-rl-in] { opacity: 1; transform: none; transition: opacity 1.6s var(--rl-ease-soft) var(--d, 0ms), transform 1.8s cubic-bezier(.22, .8, .3, 1) var(--d, 0ms); }
html.rl-print.rl-motion #app [data-rl="img"]:not(.rl-news-photo):not(.rl-wipe):not([data-rl-in]) { opacity: 0 !important; clip-path: inset(10% 0 0 0 round var(--rl-r, 10px)) !important; }
html.rl-print.rl-motion #app [data-rl="img"]:not(.rl-news-photo):not(.rl-wipe)[data-rl-in] { opacity: 1; transition: clip-path var(--rl-dur-img) var(--rl-ease-soft) var(--d, 0ms), opacity 1.5s var(--rl-ease-soft) var(--d, 0ms) !important; }
html.rl-print.rl-motion #app [data-rl="img"]:not(.rl-news-photo):not(.rl-wipe)[data-rl-in]:not([data-rl-done]) img { transition: scale var(--rl-dur-img-zoom) cubic-bezier(.22, .61, .36, 1) var(--d, 0ms), filter .6s !important; }
@media (prefers-reduced-motion: reduce) {
  html.rl-print.rl-motion #app [data-rl="row"], html.rl-print.rl-motion #app [data-rl="img"] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* =========================================================
   필요 이미지 자리(더미) — 미스트 바탕 + 가는 사선 + 블루 점선 테두리, 안에 '무엇을 찍을지 · 비율 · 권장'
   실제 사진이 오면 같은 자리(같은 비율)에 교체. 인포그래픽 자리는 모눈 무늬
   ========================================================= */
html.rl-print #app .rl-dummy { position: relative; overflow: hidden; border-radius: 10px; box-sizing: border-box; border: 1px dashed rgba(6, 98, 217, .45);
  background: repeating-linear-gradient(135deg, rgba(6, 98, 217, .055) 0 1px, transparent 1px 13px), var(--rl-print-mist, #e6eef5); }
html.rl-print #app .rl-dummy--info { background: linear-gradient(rgba(6, 98, 217, .06) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(6, 98, 217, .06) 1px, transparent 1px) 0 0 / 24px 24px, var(--rl-print-mist, #e6eef5); }
html.rl-print #app .rl-dummy-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 24px clamp(18px, 4%, 40px); text-align: left; }
html.rl-print #app .rl-dummy-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--rl-print-blue); border-radius: 999px; background: rgba(246, 248, 250, .9); font: 500 12px/1 var(--rl-font); color: var(--rl-print-blue); }
html.rl-print #app .rl-dummy-in b { margin-top: 4px; font: 700 clamp(16px, 1.4vw, 20px)/1.4 var(--rl-font-serif); letter-spacing: -0.02em; color: var(--rl-print-blue); }
html.rl-print #app .rl-dummy-in em { font-style: normal; font-size: 13.5px; line-height: 1.65; color: var(--rl-print-charcoal); max-width: 34em; }
html.rl-print #app .rl-dummy-in small { font: 300 12px/1.4 var(--rl-font-latin-light), var(--rl-font); color: var(--rl-print-muted, #56697a); letter-spacing: .01em; }
html.rl-print #app .rl-story-aside .rl-dummy-in, html.rl-print #app .rl-fac-photo .rl-dummy-in { padding: 16px; gap: 6px; }
html.rl-print #app .rl-story-aside .rl-dummy-in em, html.rl-print #app .rl-fac-photo .rl-dummy-in em { font-size: 12.5px; }
/* 메인 감염관리: 멸균소독실 사진 자리 · 시설 칸 사진 자리 */
html.rl-print #app .rl-safety-photo { margin: 40px 0 0; }
html.rl-print #app .rl-fac-photo { margin: 0 0 20px; }
html.rl-print #app .rl-story-figure.rl-safety-photo, html.rl-print #app .rl-story-figure.rl-fac-photo { margin-left: 0; margin-right: 0; }
@media (max-width: 700px) {   /* 모바일: 자리 높이는 안의 설명이 다 들어가게 (비율보다 내용 우선) */
  html.rl-print #app .rl-dummy { aspect-ratio: auto !important; min-height: 200px; }
  html.rl-print #app .rl-dummy-in { position: relative; inset: auto; min-height: 200px; box-sizing: border-box; }
}
html.rl-print #app .rl-story-figure.rl-safety-photo { margin-top: 44px !important; }   /* 다섯 단계와 사진 자리 사이 */
/* 진료 공간과 장비 세 칸: 칸 안쪽 여백 대신 칸 사이 간격 56px(세로선은 간격 한가운데) → 세 칸 폭이 같아 사진 자리 높이·글 시작이 나란히 */
@media (min-width: 901px) {
  html.rl-print #app .rl-tri { column-gap: 56px; }
  html.rl-print #app .rl-tri > li, html.rl-print #app .rl-tri > li:first-child, html.rl-print #app .rl-tri > li:last-child { padding: var(--rl-inner-gap, 28px) 0 0 !important; border-left: 0 !important; position: relative; }
  html.rl-print #app .rl-tri > li + li::before { content: ""; position: absolute; top: 0; bottom: 0; left: -28px; width: 1px; background: var(--rl-print-line-soft); }
}
html.rl-print #app .rl-story-figure.rl-fac-photo { margin: 0 0 22px !important; }   /* 사진 자리 ↔ 번호 */
@media (min-width: 701px) and (max-width: 900px) { html.rl-print #app .rl-fac-photo .rl-dummy { aspect-ratio: 16 / 9 !important; } }   /* 태블릿 한 줄일 때 너무 길지 않게 */
/* 원장 칼럼 오른쪽 칸: 설명 → 칼럼에 담는 생각(인용) → 버튼 (버튼을 바닥으로 밀지 않음) */
html.rl-print #app .column-preview-intro > a.pill { margin-top: 32px !important; align-self: flex-start; }
html.rl-print #app .rl-notes-quote { margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rl-print-line-soft); max-width: 26em; }
html.rl-print #app .rl-notes-quote span { display: block; font: 500 13px/1.6 var(--rl-font); color: var(--rl-print-blue); }
html.rl-print #app .rl-notes-quote p { margin: 10px 0 0; font: 400 clamp(19px, 1.6vw, 23px)/1.6 var(--rl-font-serif); letter-spacing: -0.02em; color: var(--rl-print-blue); }
@media (max-width: 700px) { html.rl-print #app .rl-notes-quote p { font-size: 18px; } }
/* 바닥글 배경 = 오른쪽 세로 띠와 같은 미스트 블루 (띠와 바닥글이 하나의 ㄴ자 면으로) · 위쪽 가는 블루 선은 유지 */
html.rl-print #app .site-footer { background: var(--rl-print-mist) !important; }
/* 열린 메뉴 이름: 다시 누르면 소개 페이지로 간다는 표시(마우스를 올리면 밑줄) */
/* (열린 메뉴 이름의 밑줄 표시는 아래 파란 열림 표시와 겹쳐 제거) */

/* =========================================================
   머리글 드롭다운(메가 메뉴) = 인쇄물 규칙: 흰 상자 · 둥근 판 없이, 가는 선 · 명조 제목
   ========================================================= */
html.rl-print #app header .mega-intro > span { font: 300 13px/1.4 var(--rl-font-latin-light) !important; color: var(--rl-print-blue) !important; letter-spacing: .02em; }
html.rl-print #app header .mega-intro h2 { margin-top: 14px !important; font: 700 30px/1.3 var(--rl-font-serif) !important; letter-spacing: -0.02em; color: var(--rl-print-blue) !important; }
html.rl-print #app header .mega-intro p { margin-top: 14px !important; font-size: 15px !important; line-height: 1.75 !important; color: var(--rl-print-charcoal) !important; }
html.rl-print #app header ul.mega-links { column-gap: 32px !important; row-gap: 0 !important; align-content: start; }
html.rl-print #app header ul.mega-links > li > a { position: relative; height: 100%; box-sizing: border-box; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 44px 18px 0 !important; border-top: 1px solid var(--rl-print-line-soft); }
html.rl-print #app header ul.mega-links > li:nth-child(-n+2) > a { border-top-color: var(--rl-print-line); }
html.rl-print #app header ul.mega-links > li > a > *:first-child { font: 700 17px/1.5 var(--rl-font-serif) !important; letter-spacing: -0.02em; color: var(--rl-print-blue) !important; }
html.rl-print #app header ul.mega-links > li > a > *:not(:first-child) { font-size: 13.5px !important; line-height: 1.65 !important; color: var(--rl-print-charcoal) !important; }
html.rl-print #app header ul.mega-links > li > a svg { color: var(--rl-print-blue) !important; }
html.rl-print #app header ul.mega-links > li > a:hover > *:first-child { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
html.rl-print #app header .mega-inner > a[data-slot="navigation-menu-link"] { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; }
html.rl-print #app header .mega-inner > a[data-slot="navigation-menu-link"] img { border-radius: 8px !important; object-fit: cover; filter: saturate(.86) brightness(1.04) contrast(.97); }
html.rl-print #app header .mega-inner > a[data-slot="navigation-menu-link"] > div { padding: 14px 0 0 !important; background: transparent !important; }
html.rl-print #app header .mega-inner > a[data-slot="navigation-menu-link"] h3 { font: 700 18px/1.45 var(--rl-font-serif) !important; color: var(--rl-print-blue) !important; }
html.rl-print #app header .mega-inner > a[data-slot="navigation-menu-link"] span { font-size: 13px !important; color: var(--rl-print-charcoal) !important; }
html.rl-print #app header .mega-bottom { border-top: 1px solid var(--rl-print-line-soft) !important; padding-top: 14px !important; }
/* 페이지를 옮길 때: 새 글이 들어오기 전까지 원본 레이아웃은 숨김 (자리만 유지 — 순간적으로 이전 레이아웃이 보이지 않게) */
html.rl-print[data-rl-pending] #app main > :not(#rl-story) { visibility: hidden !important; }
/* 페이지 맨 아래: 바닥글 아래로 흰(페이퍼) 띠가 보이지 않게 — 바닥글을 바닥까지, 페이지 바깥 바탕(아이폰 바운스 · 홈 표시 영역)은 미스트 */
html.rl-print { background-color: var(--rl-print-mist); }
html.rl-print body { background-color: var(--rl-print-paper); }
html.rl-print #app .site-footer { margin-bottom: 0 !important; padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)) !important; }

/* 운정 이야기 미리보기 — '명소 · 산책' 카드를 지워(2026-10-27) 글 카드 하나 + 표지 하나 */
html.rl-print #app .journal-preview-grid { grid-template-columns: 1fr 1fr; }
@media (min-width: 701px) and (max-width: 1100px) { html.rl-print #app .journal-preview-grid .journal-cover { grid-column: auto; } }
@media (max-width: 700px) { html.rl-print #app .journal-preview-grid > .journal-text-card { grid-column: 1 / -1; } }

/* ===== UX 개선 시안 (2026-10-27) — rebuild.py --ux 로 만들 때만 붙음. 항목별로 html[data-ux~="…"] 에서만 켜짐 ===== */
.rl-mbar, .rl-dquick { display: none; }

/* mbar — 모바일·태블릿 아래 고정 바: 오른쪽 세로 띠와 같은 미스트 면이 아래로 이어져 ㄴ자 (바닥글과 같은 재료) */
@media (max-width: 1099px) {
  html.rl-print[data-ux~="mbar"] .rl-mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    height: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 0 var(--rl-print-band-w, 30px) env(safe-area-inset-bottom, 0px) 0; box-sizing: border-box;
    background: var(--rl-print-mist, #e6eef5); border-top: 1px solid var(--rl-print-line, rgba(6, 98, 217, .8));
  }
  html.rl-print[data-ux~="mbar"] .rl-mbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0;
    color: var(--rl-print-blue, #0662d9); text-decoration: none; font: 500 12px/1 var(--rl-font); letter-spacing: -0.01em; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  html.rl-print[data-ux~="mbar"] .rl-mbar a + a { border-left: 1px solid var(--rl-print-line-soft, rgba(6, 98, 217, .35)); }
  html.rl-print[data-ux~="mbar"] .rl-mbar a:active { background: rgba(6, 98, 217, .08); }
  html.rl-print[data-ux~="mbar"] .rl-mbar svg { width: 22px; height: 22px; }
  html.rl-print[data-ux~="mbar"] #app .site-footer { padding-bottom: calc(26px + 60px + env(safe-area-inset-bottom, 0px)) !important; }
  html.rl-print[data-ux~="mbar"] .rl-stamp { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
  html.rl-print[data-ux~="mbar"]:has(.site-menu-toggle[aria-expanded="true"]) .rl-mbar { display: none; }
  /* 아래로 내리면 바가 아래로 살짝 빠지고(rl-mbar-hide), 위로 올리면 다시 올라옴. 바 안에 키보드 초점이 있으면 그대로 */
  html.rl-print[data-ux~="mbar"] .rl-mbar { transition: transform .34s cubic-bezier(.33, 0, .2, 1); will-change: transform; }
  html.rl-print[data-ux~="mbar"].rl-mbar-hide .rl-mbar:not(:focus-within) { transform: translateY(calc(100% + 2px)); }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  html.rl-print[data-ux~="mbar"] .rl-mbar { transition: none; }
}

/* dquick — 데스크톱: 세로 띠 아래쪽 이름 자리에 바로가기 세 칸 (띠 폭 그대로, 칸 사이 가는 선) */
@media (min-width: 1100px) {
  html.rl-print[data-ux~="dquick"] .rl-band-bottom { visibility: hidden; }
  html.rl-print[data-ux~="dquick"] .rl-dquick {
    position: fixed; right: 0; bottom: 0; z-index: 45; display: grid; width: var(--rl-print-band-w, 72px);
    border-top: 1px solid var(--rl-print-line, rgba(6, 98, 217, .8)); border-left: 1px solid var(--rl-print-line, rgba(6, 98, 217, .8));
    background: var(--rl-print-mist, #e6eef5); box-sizing: border-box;
  }
  html.rl-print[data-ux~="dquick"] .rl-dquick a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; height: 76px;
    color: var(--rl-print-blue, #0662d9); text-decoration: none; text-align: center; font: 500 11.5px/1.25 var(--rl-font); letter-spacing: -0.01em;
    transition: background .25s ease, color .25s ease;
  }
  html.rl-print[data-ux~="dquick"] .rl-dquick a + a { border-top: 1px solid var(--rl-print-line-soft, rgba(6, 98, 217, .35)); }
  html.rl-print[data-ux~="dquick"] .rl-dquick a:hover { background: var(--rl-print-blue, #0662d9); color: #fff; }
  html.rl-print[data-ux~="dquick"] .rl-dquick svg { width: 21px; height: 21px; }
}

/* subnav — 묶음 이름은 왼쪽에 고정, 항목이 더 있으면 오른쪽 끝을 흐리게 */
html.rl-print[data-ux~="subnav"] #app .rl-subnav-label { position: sticky; left: 0; z-index: 2; align-self: stretch; display: flex; align-items: center; background: var(--rl-print-paper, #f6f8fa); }
html.rl-print[data-ux~="subnav"] #app .rl-subnav-in.is-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }

html.rl-print[data-ux~="subnav"] #app .rl-subnav-label::after { content: ""; position: absolute; top: 0; bottom: 0; right: -30px; width: 30px; background: linear-gradient(90deg, var(--rl-print-paper, #f6f8fa), rgba(246, 248, 250, 0)); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
html.rl-print[data-ux~="subnav"] #app .rl-subnav-in.is-less .rl-subnav-label::after { opacity: 1; }

/* links — 버튼 안 전화번호와 '전화하기' 사이 띄움(플렉스에서 공백이 사라지던 것) */
html.rl-print[data-ux~="links"] #app .rl-channels a .rl-nw { margin-right: .3em; }

/* symptom — 메인 '지금 어떤 고민이 있으신가요?' 왼쪽 칸: 증상 목록 (목록 선 · 명조 이름 · 진료 이름 · 화살표) */
html.rl-print[data-ux~="symptom"] #app #care .rl-symptoms { margin-top: 44px; max-width: 470px; }
html.rl-print[data-ux~="symptom"] #app .rl-symptoms-label { margin: 0 0 12px; font: 500 13px/1.4 var(--rl-font); color: var(--rl-print-blue); }
html.rl-print[data-ux~="symptom"] #app .rl-symptoms ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rl-print-line, rgba(6, 98, 217, .8)); }
html.rl-print[data-ux~="symptom"] #app .rl-symptoms li { border-bottom: 1px solid var(--rl-print-line-soft, rgba(6, 98, 217, .35)); }
html.rl-print[data-ux~="symptom"] #app .rl-symptoms li a { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; gap: 14px; min-height: 56px; padding: 6px 0; color: var(--rl-print-blue); text-decoration: none; }
html.rl-print[data-ux~="symptom"] #app .rl-symptoms li b { font: 700 16.5px/1.4 var(--rl-font-serif); letter-spacing: -0.02em; word-break: keep-all; }
html.rl-print[data-ux~="symptom"] #app .rl-symptoms li span { font: 400 12.5px/1.3 var(--rl-font); color: var(--rl-print-charcoal); opacity: .75; white-space: nowrap; }
html.rl-print[data-ux~="symptom"] #app .rl-symptoms i { display: block; width: 18px; height: 18px; transition: transform .3s ease; }
html.rl-print[data-ux~="symptom"] #app .rl-symptoms i svg { width: 100%; height: 100%; }
html.rl-print[data-ux~="symptom"] #app .rl-symptoms li a:hover i { transform: rotate(45deg); }
html.rl-print[data-ux~="symptom"] #app .rl-symptoms li a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
html.rl-print[data-ux~="symptom"] #app .rl-symptoms-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font: 500 13.5px/1.4 var(--rl-font); color: var(--rl-print-blue); text-decoration: none; }
html.rl-print[data-ux~="symptom"] #app .rl-symptoms-all i { width: 15px; height: 15px; }
@media (max-width: 700px) {
  html.rl-print[data-ux~="symptom"] #app #care .rl-symptoms { margin-top: 28px; max-width: none; }
  html.rl-print[data-ux~="symptom"] #app .rl-symptoms li a { grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto auto; row-gap: 2px; column-gap: 10px; min-height: 60px; padding: 10px 0; }
  html.rl-print[data-ux~="symptom"] #app .rl-symptoms li b { grid-column: 1; grid-row: 1; font-size: 16px; }
  html.rl-print[data-ux~="symptom"] #app .rl-symptoms li span { grid-column: 1; grid-row: 2; }
  html.rl-print[data-ux~="symptom"] #app .rl-symptoms li i { grid-column: 2; grid-row: 1 / span 2; }
}

/* excol — 칼럼 목록의 '대표원장 에세이(예시 원고)' 장 숨김 */
html.rl-print[data-ux~="excol"] #app #rl-cl3[hidden] { display: none !important; }

/* stamp — 작업본 표시 빼기 */
html.rl-print[data-ux~="stamp"] .rl-stamp { display: none !important; }