/* 세현 하위 페이지(site/sub/*.html). scripts/sehyun-sub-pages.mjs 가 만든 #sh_sub 안의 블록을
   리뉴업 하위 페이지(renewupps.com/nose_01_01.php 등)의 구역 모양으로 그린다: 첫 화면(인물 + 좌우 문구),
   큰 세리프 영문 제목, 흐린 사진 위 가운데 문구(motto), 수술정보 띠, 번호 붙은 포인트, 재료 카드, WHO 목록,
   어두운 마무리 띠, FAQ.
   글자 크기는 메인과 같은 rem(1920px 10px, 1279px 9px, 1023px 8px, 767px 7px)이다.
   1920px보다 넓은 화면은 html 전체를 확대하므로(index 의 #sehyun-wide) 여기서는 vh·vw 를 쓰지 않는다. */

.sh-sub { --sh-line:rgba(0,0,0,.1); --sh-gray:#f6f5f3; --sh-pad:var(--box-padding,3rem); --sh-space:var(--box-space-TB,16rem);
 color:var(--color-primary); background:#fff; word-break:keep-all; overflow-wrap:break-word; }
.sh-sub * { box-sizing:border-box; }
/* 공통 CSS 는 p 에만 줄 높이를 주고 제목·링크는 1 에 가깝게 둔다. 큰 글자와 작은 글자가 겹치지 않게 기본값을 준다 */
.sh-sub :is(h1,h2,h3,a,dt,dd,li,span,summary,button) { line-height:1.5; }
.sh-sub .sh-in { position:relative; width:min(100%, calc(1200px + var(--sh-pad) * 2)); margin:0 auto; padding:0 var(--sh-pad); }
.sh-sub .sh-center { text-align:center; display:flex; flex-direction:column; align-items:center; }
.sh-sub img.sh-img { display:block; width:100%; height:100%; object-fit:cover; }
.sh-sub .sh-img-empty { width:100%; height:100%; min-height:20rem; background:linear-gradient(135deg,#efe9df,#faf7f0 60%,#ece6dc); }

/* ---------- 글자 ---------- */
.sh-sub .sh-kicker { font-size:calc(1.25rem * var(--fs-767)); font-weight:400; letter-spacing:.1rem; text-transform:uppercase; color:var(--color-primary); opacity:.8; }
.sh-sub .sh-title { margin-top:2rem; font-size:4rem; font-weight:700; line-height:1.4; letter-spacing:-.02em; color:var(--color-primary); }
.sh-sub .sh-subtitle { font-size:2.4rem; font-weight:700; line-height:1.45; letter-spacing:-.02em; color:var(--color-primary); }
.sh-sub .sh-lead { margin-top:3rem; font-size:2.4rem; font-weight:700; line-height:1.55; color:var(--color-primary); }
.sh-sub .sh-body { margin-top:2.4rem; display:flex; flex-direction:column; gap:1.6rem; }
.sh-sub .sh-p { font-size:calc(1.6rem * var(--fs-767)); line-height:1.9; color:var(--color-primary); }
.sh-sub .sh-note { margin-top:3rem; font-size:calc(1.3rem * var(--fs-767)); line-height:1.6; opacity:.6; text-align:center; }
.sh-sub .sh-head { margin-bottom:6rem; }
.sh-sub .sh-num { display:inline-flex; justify-content:center; align-items:center; width:4.6rem; height:4.6rem; border-radius:50%; background:var(--color-primary); color:#fff; font-size:calc(1.2rem * var(--fs-767)); font-weight:700; letter-spacing:.05rem; }
.sh-sub .sh-btns { margin-top:4rem; display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem; }
.sh-sub .sh-btn { display:inline-flex; justify-content:center; align-items:center; min-width:22rem; height:6rem; padding:0 3rem; border:1px solid rgba(0,0,0,.2); border-radius:3rem; background:#fff;
 font-size:calc(1.4rem * var(--fs-767)); font-weight:500; color:var(--color-primary); transition:background .3s, color .3s, border-color .3s; }
.sh-sub .sh-btn:hover { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.sh-sub .sh-btn.is-dark { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.sh-sub .sh-btn.is-dark:hover { background:var(--color-key); border-color:var(--color-key); }

/* ---------- 첫 화면: 가운데 인물, 왼쪽 문구, 오른쪽 이름 ---------- */
/* width 를 정해 두어야 좁은 화면에서 min-height 가 aspect-ratio 를 거쳐 폭을 넓히지 않는다(768~900px 에서 922px 로 넘쳤음) */
.sh-sub .sh-hero { position:relative; width:100%; aspect-ratio:1920/1000; min-height:60rem; max-height:1080px; background:var(--color-key-bright); overflow:hidden; }
/* 사진은 머리말(PC 100px, 1279px 이하 60px) 아래에서 시작해 머리가 가려지지 않게 한다 */
.sh-sub .sh-hero-bg { position:absolute; inset:100px 0 0; }
.sh-sub .sh-hero-bg img.sh-img { object-position:50% 0%; }
/* 개편 전 페이지의 사진을 다시 쓰는 첫 화면(병원 로비 사진 포함)은 가운데를 기준으로 자른다 */
.sh-sub .sh-hero.is-scene .sh-hero-bg img.sh-img { object-position:50% 50%; }
/* 모든 첫 화면 사진은 좌우 문구가 읽히고 톤이 고르게 양옆을 밝게, 가운데를 옅게 덮는다(쌍꺼풀 매몰법 첫 화면과 같은 처리) */
.sh-sub .sh-hero .sh-hero-bg:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(250,247,240,.94) 0%, rgba(250,247,240,.6) 36%, rgba(250,247,240,.35) 50%, rgba(250,247,240,.6) 64%, rgba(250,247,240,.94) 100%); }
.sh-sub .sh-hero-txt { position:absolute; inset:0; padding-top:100px; }
.sh-sub .sh-hero-txt .sh-in { width:min(100%, calc(1500px + var(--sh-pad) * 2)); height:100%; display:flex; justify-content:space-between; align-items:center; padding:0 calc(var(--sh-pad) + 6rem); }
.sh-sub .sh-hero .box-L { max-width:34%; }
.sh-sub .sh-hero .box-R { max-width:34%; display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
/* 좁은 칸(태블릿)에서 한 줄이 넘치면 마지막 낱말만 떨어지지 않게 줄 길이를 고르게 */
.sh-sub .sh-hero-lead { font-size:2.5rem; line-height:1.5; text-wrap:balance; }
.sh-sub .sh-hero-kicker { font-size:calc(1.0rem * var(--fs-767)); font-weight:500; letter-spacing:.1rem; }
.sh-sub .sh-hero-title { margin-top:1rem; font-size:3.5rem; font-weight:700; line-height:1.3; letter-spacing:-.02em; }

/* ---------- 큰 영문 제목 ---------- */
.sh-sub .sh-etitle { container-type:inline-size; padding:0 var(--sh-pad) 10rem; display:flex; flex-direction:column; align-items:center; text-align:center; }
.sh-sub .sh-e1 { margin-top:-4.6rem; position:relative; max-width:1300px; font-size:min(12rem, calc(100cqi / (var(--len,12) * .66))); line-height:.82; letter-spacing:-.02em; text-transform:uppercase; color:var(--color-primary); text-wrap:balance; }
.sh-sub .sh-e2 { margin-top:2.4rem; font-size:calc(1.0rem * var(--fs-767)); font-weight:500; letter-spacing:.1rem; }
.sh-sub .sh-e3 { margin-top:.5rem; font-size:calc(1.4rem * var(--fs-767)); font-weight:500; letter-spacing:.2rem; }

/* ---------- 같은 메뉴의 다른 페이지 ---------- */
.sh-sub .sh-tabs { border-top:1px solid var(--sh-line); border-bottom:1px solid var(--sh-line); background:#fff; }
.sh-sub .sh-tabs .sh-in { display:flex; align-items:center; gap:4rem; }
.sh-sub .sh-tabs-menu { flex:none; font-size:calc(1.4rem * var(--fs-767)); font-weight:700; }
.sh-sub .sh-tabs ul { display:flex; flex-wrap:wrap; }
.sh-sub .sh-tabs li a { position:relative; display:block; padding:2.4rem 2rem; font-size:calc(1.5rem * var(--fs-767)); color:var(--color-primary); opacity:.55; transition:opacity .3s; }
.sh-sub .sh-tabs li a:hover { opacity:1; }
.sh-sub .sh-tabs li.on a { opacity:1; font-weight:700; }
.sh-sub .sh-tabs li.on a:after { content:''; position:absolute; left:2rem; right:2rem; bottom:-1px; height:2px; background:var(--color-primary); }

/* ---------- 흐린 사진 위 가운데 문구(answer, statement) ---------- */
.sh-sub .sh-answer, .sh-sub .sh-statement { position:relative; padding:var(--sh-space) 0; background:var(--sh-gray); overflow:hidden; }
.sh-sub .sh-statement { background:var(--color-key-bright); }
.sh-sub .sh-answer-bg, .sh-sub .sh-statement-bg { position:absolute; inset:0; }
.sh-sub .sh-answer.has-img:after, .sh-sub .sh-statement.has-img:after { content:''; position:absolute; inset:0; background:rgba(246,245,243,.8); }
.sh-sub .sh-answer .sh-in, .sh-sub .sh-statement .sh-in { z-index:1; max-width:calc(1100px + var(--sh-pad) * 2); }
.sh-sub .sh-question { margin-top:4rem; font-size:4rem; font-weight:700; line-height:1.45; letter-spacing:-.02em; }
.sh-sub .sh-no { margin-top:3.2rem; display:inline-block; padding:1.4rem 3.4rem; border-radius:4rem; background:var(--color-primary); color:#fff; font-size:2.2rem; font-weight:700; line-height:1.5; }
.sh-sub .sh-statement .sh-title { margin-top:3rem; }
.sh-sub .sh-statement .sh-kicker + .sh-lead, .sh-sub .sh-statement .sh-lead:first-child { margin-top:3rem; }

/* ---------- 수술정보 띠 ---------- */
.sh-sub .sh-info { padding:6rem 0; background:var(--color-key-bright); }
.sh-sub .sh-info .sh-kicker { text-align:center; margin-bottom:4rem; }
.sh-sub .sh-info-list { display:grid; grid-template-columns:repeat(var(--n),1fr); max-width:1200px; margin:0 auto; }
.sh-sub .sh-info-list li { position:relative; padding:1.2rem 1.6rem; text-align:center; border-left:1px solid var(--sh-line); }
.sh-sub .sh-info-list li:last-child { border-right:1px solid var(--sh-line); }
.sh-sub .sh-info-list .label { font-size:calc(1.5rem * var(--fs-767)); font-weight:700; }
.sh-sub .sh-info-list .value { margin-top:.8rem; font-size:calc(1.5rem * var(--fs-767)); line-height:1.5; }

/* ---------- 포인트·카드·케이스 ---------- */
.sh-sub .sh-points, .sh-sub .sh-cards, .sh-sub .sh-cases, .sh-sub .sh-steps, .sh-sub .sh-faq, .sh-sub .sh-gallery { padding:var(--sh-space) 0; }
.sh-sub .sh-points .sh-head .sh-title, .sh-sub .sh-cards .sh-head .sh-title { max-width:1100px; }
.sh-sub .sh-grid { display:grid; gap:2.4rem; }
.sh-sub .sh-grid-1 { grid-template-columns:1fr; }
.sh-sub .sh-grid-2 { grid-template-columns:repeat(2,1fr); }
.sh-sub .sh-grid-3 { grid-template-columns:repeat(3,1fr); }
.sh-sub .sh-card, .sh-sub .sh-case { padding:4.4rem 4rem 4.8rem; border-radius:2.4rem; background:var(--color-key-bright); }
.sh-sub .sh-card .sh-num + .sh-subtitle { margin-top:2.4rem; }
.sh-sub .sh-card .sh-body, .sh-sub .sh-case .sh-body { margin-top:1.8rem; }
.sh-sub .sh-cards .sh-card { background:var(--sh-gray); }
.sh-sub .sh-case-label { font-size:2.4rem; color:var(--color-key); letter-spacing:.02em; }
.sh-sub .sh-case .sh-subtitle { margin-top:1.4rem; font-size:2.1rem; }
.sh-sub .sh-case .sh-btn { margin-top:2.8rem; min-width:0; height:4.8rem; }
.sh-sub .sh-cases .sh-center .sh-btn { margin-top:4rem; }
/* 사진이 있는 포인트: 글과 사진이 번갈아 */
.sh-sub .sh-points.is-rows { padding-bottom:0; }
.sh-sub .sh-row { display:flex; align-items:stretch; min-height:44rem; margin:0 calc(var(--sh-pad) * -1); background:var(--sh-gray); }
.sh-sub .sh-row:nth-of-type(odd) { background:#fff; }
.sh-sub .sh-row.rev { flex-direction:row-reverse; }
.sh-sub .sh-row-txt { width:50%; padding:8rem calc(var(--sh-pad) + 6rem); display:flex; flex-direction:column; justify-content:center; }
.sh-sub .sh-row-txt .sh-subtitle { margin-top:2.4rem; }
.sh-sub .sh-row-img { width:50%; min-height:44rem; overflow:hidden; }
.sh-sub .sh-row-img:empty { background:var(--color-key-bright); }

/* ---------- 수술 과정 ---------- */
.sh-sub .sh-steps { background:#fff; }
.sh-sub .sh-step-list { display:grid; grid-template-columns:repeat(min(var(--n),4),1fr); gap:2.4rem; counter-reset:step; }
.sh-sub .sh-step-list li { padding-top:2.4rem; border-top:2px solid var(--color-primary); }
.sh-sub .sh-step-list .sh-num { width:auto; height:auto; border-radius:0; background:none; color:var(--color-key); font-size:calc(1.3rem * var(--fs-767)); letter-spacing:.15rem; }
.sh-sub .sh-step-list .sh-subtitle { margin-top:1.4rem; font-size:2rem; }
.sh-sub .sh-step-list .sh-body { margin-top:1.4rem; }

/* ---------- WHO 목록 ---------- */
.sh-sub .sh-checklist { display:flex; align-items:stretch; background:#e9eef2; }
/* 사진 없는 목록도 리뉴업 WHO 구역의 옅은 청회색을 써서 앞뒤 베이지 구역(수술정보 등)과 섞이지 않게 한다 */
.sh-sub .sh-checklist:not(.has-img) { justify-content:center; }
.sh-sub .sh-check-img { width:50%; min-height:62rem; overflow:hidden; }
.sh-sub .sh-check-txt { width:50%; padding:var(--sh-space) var(--sh-pad) var(--sh-space) 8rem; display:flex; flex-direction:column; justify-content:center; }
.sh-sub .sh-checklist:not(.has-img) .sh-check-txt { width:min(100%, calc(1100px + var(--sh-pad) * 2)); padding:var(--sh-space) var(--sh-pad); }
.sh-sub .sh-check-list { margin-top:4.4rem; display:flex; flex-direction:column; gap:1.8rem; }
.sh-sub .sh-check-list li { display:flex; gap:2rem; font-size:calc(1.6rem * var(--fs-767)); line-height:1.7; }
.sh-sub .sh-check-list .n { flex:none; font-weight:700; opacity:.7; }

/* ---------- 설명·비교 ---------- */
.sh-sub .sh-text { padding:var(--sh-space) 0; }
.sh-sub .sh-text.has-img .sh-in { display:flex; align-items:center; gap:8rem; }
.sh-sub .sh-text.has-img .sh-text-txt { width:50%; }
.sh-sub .sh-text-img { width:50%; aspect-ratio:4/3; border-radius:3rem; overflow:hidden; }
.sh-sub .sh-text.is-center .sh-text-txt { max-width:1100px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.sh-sub .sh-text .sh-btn { margin-top:4rem; align-self:flex-start; }
.sh-sub .sh-text.is-center .sh-btn { align-self:center; }
.sh-sub :is(.sh-text,.sh-points:not(.is-rows),.sh-cards,.sh-cases,.sh-steps,.sh-faq,.sh-gallery,.sh-location) + :is(.sh-text,.sh-points,.sh-cards,.sh-cases,.sh-steps,.sh-faq,.sh-gallery,.sh-location) { padding-top:0; }
.sh-sub .sh-compare { padding:var(--sh-space) 0; background:var(--sh-gray); }
.sh-sub .sh-compare .sh-in { max-width:calc(1100px + var(--sh-pad) * 2); }

/* ---------- 어두운 마무리 띠 ---------- */
.sh-sub .sh-banner { position:relative; padding:var(--sh-space) 0; background:linear-gradient(160deg,#6b6862 0%,#4f4c48 100%); color:#fff; overflow:hidden; }
.sh-sub .sh-banner .sh-in { max-width:calc(1100px + var(--sh-pad) * 2); }
.sh-sub .sh-banner .sh-kicker, .sh-sub .sh-banner .sh-title, .sh-sub .sh-banner .sh-p { color:#fff; }
.sh-sub .sh-banner .sh-kicker { opacity:.7; }
.sh-sub .sh-banner .sh-p { opacity:.85; }

/* ---------- 묻고 답하기 ---------- */
.sh-sub .sh-faq-title { font-size:4.4rem; line-height:1; }
.sh-sub .sh-faq .sh-head { margin-bottom:4rem; }
.sh-sub .sh-faq-list { border-top:1px solid rgba(0,0,0,.35); }
.sh-sub .sh-faq-item { border-bottom:1px solid var(--sh-line); }
.sh-sub .sh-faq-item summary { position:relative; display:flex; gap:1.4rem; align-items:flex-start; padding:2.8rem 6rem 2.8rem 1rem; cursor:pointer; list-style:none; font-size:calc(1.6rem * var(--fs-767)); line-height:1.6; font-weight:500; }
.sh-sub .sh-faq-item summary::-webkit-details-marker { display:none; }
.sh-sub .sh-faq-item .q, .sh-sub .sh-faq-a .a { flex:none; font-weight:700; color:var(--color-key); }
.sh-sub .sh-faq-item .icon { position:absolute; right:1.6rem; top:50%; width:1.2rem; height:1.2rem; margin-top:-.9rem; border-right:1.5px solid var(--color-primary); border-bottom:1.5px solid var(--color-primary); transform:rotate(45deg); transition:transform .3s; }
.sh-sub .sh-faq-item[open] .icon { transform:rotate(-135deg); margin-top:-.3rem; }
.sh-sub .sh-faq-a { display:flex; gap:1.4rem; padding:0 6rem 3.2rem 1rem; font-size:calc(1.6rem * var(--fs-767)); }
.sh-sub .sh-faq-a .a { line-height:1.9; }
.sh-sub .sh-faq-a .sh-body { margin-top:0; }

/* ---------- 의료진 ---------- */
.sh-sub .sh-doctor { padding:var(--sh-space) 0; background:var(--color-key-bright); }
.sh-sub .sh-doctor .sh-in { display:flex; align-items:center; gap:10rem; }
.sh-sub .sh-doctor-img { width:42%; aspect-ratio:4/5; border-radius:3rem; overflow:hidden; background:#ece6dc; }
.sh-sub .sh-doctor-img img.sh-img { object-position:50% 15%; }
.sh-sub .sh-doctor-txt { flex:1; }
.sh-sub .sh-doctor-role { margin-top:3rem; font-size:calc(1.6rem * var(--fs-767)); font-weight:500; line-height:1.5; }
.sh-sub .sh-doctor-name { margin-top:.6rem; font-size:5rem; font-weight:700; line-height:1.2; letter-spacing:.4rem; }
.sh-sub .sh-doctor-career { margin-top:3.6rem; padding:3rem 0; border-top:1px solid var(--sh-line); border-bottom:1px solid var(--sh-line); display:flex; flex-direction:column; gap:1rem; }
.sh-sub .sh-doctor-career li { position:relative; padding-left:1.8rem; font-size:calc(1.5rem * var(--fs-767)); line-height:1.6; }
.sh-sub .sh-doctor-career li:before { content:''; position:absolute; left:0; top:.8em; width:.5rem; height:.5rem; border-radius:50%; background:var(--color-key); }
.sh-sub .sh-doctor .sh-body { margin-top:3.6rem; }

/* ---------- 시설 ---------- */
.sh-sub .sh-gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4rem 2.4rem; }
.sh-sub .sh-gallery figure { margin:0; }
.sh-sub .sh-gallery figure > .sh-img { aspect-ratio:3/2; height:auto; border-radius:2.4rem; }
/* ---------- 리얼수술후기 목록(수술 전후사진). 원본 게시판 썸네일(202x150)이 흐려지지 않게 한 칸을 그 폭 근처로 둔다 ---------- */
.sh-sub .sh-reviews { padding:var(--sh-space) 0; }
.sh-sub .sh-reviews .sh-body { margin-top:2.4rem; }
.sh-sub .sh-review-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:3.6rem 2rem; margin:0; padding:0; list-style:none; }
.sh-sub .sh-review-open { display:block; width:100%; margin:0; padding:0; border:0; background:none; color:var(--color-primary); font:inherit; text-align:left; cursor:pointer; }
.sh-sub .sh-review-open:focus-visible { outline:2px solid var(--color-primary); outline-offset:.6rem; border-radius:1.6rem; }
.sh-sub .sh-review-img { display:block; aspect-ratio:4/3; overflow:hidden; border-radius:1.6rem; background:var(--sh-gray); }
.sh-sub .sh-review-img img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out-1,ease-out); }
.sh-sub .sh-review-open:hover .sh-review-img img { transform:scale(1.04); }
.sh-sub .sh-review-t { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:1.2rem; font-size:calc(1.4rem * var(--fs-767)); line-height:1.5; word-break:break-all; }
.sh-js .sh-sub .sh-review.is-more { display:none; }
.sh-sub button.sh-btn { font:inherit; font-size:inherit; cursor:pointer; }
.sh-sub .sh-review-more span { margin-left:.8rem; opacity:.6; }
.sh-sub .sh-reviews .sh-note { margin-top:4rem; }
.sh-sub .sh-gallery figcaption { margin-top:1.8rem; text-align:center; font-size:calc(1.5rem * var(--fs-767)); font-weight:500; }

/* ---------- 오시는 길 ---------- */
.sh-sub .sh-location { padding:var(--sh-space) 0; }
.sh-sub .sh-location-head { padding-bottom:6rem; border-bottom:1px solid rgba(0,0,0,.35); }
.sh-sub .sh-location-head .sh-btns { justify-content:flex-start; }
.sh-sub .sh-transit { display:grid; grid-template-columns:repeat(2,1fr); }
.sh-sub .sh-transit-item { padding:4rem 0; border-bottom:1px solid var(--sh-line); display:flex; gap:4rem; }
.sh-sub .sh-transit-item:nth-child(odd) { padding-right:4rem; }
.sh-sub .sh-transit-item .sh-subtitle { flex:none; width:14rem; font-size:1.9rem; }
.sh-sub .sh-transit-item ul { display:flex; flex-direction:column; gap:.8rem; }
.sh-sub .sh-transit-item li { font-size:calc(1.5rem * var(--fs-767)); line-height:1.7; }
.sh-sub .sh-location .sh-note { text-align:left; }

/* ---------- 진료시간 ---------- */
.sh-sub .sh-hours { padding:var(--sh-space) 0; background:var(--color-key-bright); }
.sh-sub .sh-hours .sh-in { display:flex; gap:8rem; align-items:stretch; }
.sh-sub .sh-hours-call { width:42%; padding:5rem; border-radius:3rem; background:#fff; display:flex; flex-direction:column; align-items:flex-start; }
.sh-sub .sh-hours-label { margin-top:3rem; font-size:calc(1.6rem * var(--fs-767)); font-weight:500; line-height:1.5; }
.sh-sub .sh-hours-phone { display:block; margin-top:.6rem; font-size:5rem; line-height:1.2; font-weight:700; letter-spacing:.05rem; color:var(--color-primary); }
.sh-sub .sh-kakao { margin-top:3rem; display:inline-flex; align-items:center; gap:1.2rem; height:5.2rem; padding:0 2.6rem; border:0; border-radius:3rem; background:#fee500; color:#3c1e1e; font-size:calc(1.4rem * var(--fs-767)); font-weight:700; cursor:pointer; }
.sh-sub .sh-kakao span { font-size:calc(1.1rem * var(--fs-767)); letter-spacing:.05rem; }
.sh-sub .sh-hours-time { flex:1; display:flex; flex-direction:column; justify-content:center; }
.sh-sub .sh-hours-time dl { margin-top:3rem; border-top:1px solid rgba(0,0,0,.35); }
.sh-sub .sh-hours-time dl > div { display:flex; gap:4rem; padding:2.4rem 0; border-bottom:1px solid var(--sh-line); font-size:calc(1.7rem * var(--fs-767)); }
.sh-sub .sh-hours-time dt { width:12rem; font-weight:700; }
.sh-sub .sh-hours-notes { margin-top:2.4rem; display:flex; flex-direction:column; gap:.8rem; }
.sh-sub .sh-hours-notes li { font-size:calc(1.4rem * var(--fs-767)); line-height:1.6; opacity:.75; }

/* ---------- 상담 버튼 ---------- */
.sh-sub .sh-cta { padding:10rem 0; border-top:1px solid var(--sh-line); }

/* ---------- 나타나기 ---------- */
.sh-js .sh-sub .sh-reveal { opacity:0; transform:translateY(4rem); transition:opacity 1.2s var(--ease-out-1,ease-out), transform 1.2s var(--ease-out-1,ease-out); }
.sh-js .sh-sub .sh-reveal.on { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .sh-js .sh-sub .sh-reveal { opacity:1; transform:none; transition:none; } }

/* ================= 오른쪽 빠른 메뉴 ================= */
/* 빠른 메뉴(#quick, 70px)는 768px 이상에서 늘 떠 있다. 본문이 1200px 틀을 꽉 채우는 폭에서는
   좌우 여백을 메뉴 폭 이상으로 둬 글이 그 밑으로 들어가지 않게 한다. 첫 화면은 아래에서 따로 맞춘다 */
@media only screen and (min-width:768px) and (max-width:1379px) {
 .sh-sub { --sh-pad:calc(70px + 2rem); }
 .sh-sub .sh-hero { --sh-pad:var(--box-padding,3rem); }
}
@media only screen and (min-width:768px) {
 /* 화면 끝까지 닿는 반쪽 칸(사진 옆 체크리스트)은 넓은 화면에서도 오른쪽을 비운다 */
 .sh-sub .sh-checklist.has-img .sh-check-txt { padding-right:max(var(--sh-pad), calc(70px + 2rem)); }
}
/* 줄을 나눠 둔 긴 체크리스트 제목(style 의 --len 은 가장 긴 줄의 글자 수)은 그 줄이 칸에 들어가도록 글자를 줄인다.
   휴대폰에서도 줄을 그대로 둬야 말이 어색하게 끊기지 않는다 */
.sh-sub .sh-check-txt { container-type:inline-size; }
.sh-sub .sh-check-txt .sh-title[style*="--len"] { font-size:min(4rem, calc(100cqi / (var(--len) * .78))); }
@media only screen and (max-width:767px) {
 .sh-sub .sh-check-txt .sh-title[style*="--len"] { font-size:min(3.2rem, calc(100cqi / (var(--len) * .78))); }
 .sh-sub .sh-check-txt .sh-title[style*="--len"] .sh-br { display:inline; }
}

/* ================= 노트북·태블릿 ================= */
@media only screen and (max-width:1279px) {
 .sh-sub .sh-hero-bg { top:60px; }
 .sh-sub .sh-hero-txt { padding-top:60px; }
 /* 오른쪽에 고정된 빠른 메뉴(#quick, 70px)가 이 폭에서는 제목 상자 위에 겹친다. 그 폭만큼 비운다 */
 .sh-sub .sh-hero-txt .sh-in { padding:0 calc(70px + 2rem) 0 var(--sh-pad); }
 .sh-sub .sh-e1 { font-size:min(10rem, calc(100cqi / (var(--len,12) * .66))); }
 .sh-sub .sh-doctor .sh-in, .sh-sub .sh-hours .sh-in, .sh-sub .sh-text.has-img .sh-in { gap:5rem; }
 .sh-sub .sh-check-txt { padding-left:5rem; }
 .sh-sub .sh-row-txt { padding:6rem 5rem; }
 .sh-sub .sh-review-grid { grid-template-columns:repeat(4,1fr); }
 /* 빠른 메뉴 폭만큼 여백이 늘어난 대신 탭 사이를 좁혀 코성형 탭 11개가 900px 까지 한 줄에 들어가게 한다 */
 .sh-sub .sh-tabs li a { padding-left:1.3rem; padding-right:1.3rem; }
 .sh-sub .sh-tabs li.on a:after { left:1.3rem; right:1.3rem; }
}
@media only screen and (min-width:768px) and (max-width:1279px) {
 /* 사진 포인트에서 글이 오른쪽에 오는 줄은 빠른 메뉴 폭만큼 비운다 */
 .sh-sub .sh-row.rev .sh-row-txt { padding-right:calc(70px + 2rem); }
}
@media only screen and (max-width:1023px) {
 .sh-sub .sh-grid-3, .sh-sub .sh-gallery-grid { grid-template-columns:repeat(2,1fr); }
 .sh-sub .sh-review-grid { grid-template-columns:repeat(3,1fr); }
 .sh-sub .sh-step-list { grid-template-columns:repeat(2,1fr); }
 .sh-sub .sh-tabs .sh-in { gap:2rem; }
 .sh-sub .sh-transit { grid-template-columns:1fr; }
 .sh-sub .sh-transit-item:nth-child(odd) { padding-right:0; }
 /* 사진 옆 체크리스트는 반쪽 칸이 너무 좁아져 사진 위, 글 아래로 쌓는다 */
 .sh-sub .sh-checklist { flex-direction:column; }
 .sh-sub .sh-check-img { width:100%; min-height:0; aspect-ratio:16/9; }
 .sh-sub .sh-check-txt { width:100%; padding:10rem var(--sh-pad); }
}

/* ================= 휴대폰 ================= */
@media only screen and (max-width:767px) {
 .sh-sub .sh-br { display:none; }
 .sh-sub :is(.sh-title,.sh-lead,.sh-question,.sh-subtitle) { text-wrap:balance; }
 .sh-sub .sh-p { font-size:calc(1.8rem * var(--fs-767)); }
 .sh-sub .sh-title { font-size:3.2rem; }
 .sh-sub .sh-lead { font-size:2.2rem; }
 .sh-sub .sh-head { margin-bottom:4rem; }
 /* 첫 화면: 문구가 위, 사진이 아래(리뉴업 모바일과 같다) */
 .sh-sub .sh-hero { aspect-ratio:auto; min-height:0; max-height:none; display:flex; flex-direction:column; }
 .sh-sub .sh-hero-txt { position:relative; order:1; padding:calc(60px + 4rem) 0 3rem; }
 .sh-sub .sh-hero-txt .sh-in { padding:0 var(--sh-pad); flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:1.5rem; }
 .sh-sub .sh-hero .box-L, .sh-sub .sh-hero .box-R { max-width:none; }
 .sh-sub .sh-hero .box-R { align-items:flex-start; text-align:left; }
 .sh-sub .sh-hero-lead { font-size:2.3rem; line-height:1.4; }
 .sh-sub .sh-hero-title { margin-top:.5rem; font-size:3.4rem; }
 .sh-sub .sh-hero-bg { position:relative; top:0; order:2; aspect-ratio:4/5; }
 .sh-sub .sh-hero-bg img.sh-img { object-position:50% 15%; }
 .sh-sub .sh-hero.is-scene .sh-hero-bg { aspect-ratio:4/3; }
 .sh-sub .sh-hero .sh-hero-bg:after { display:none; }
 .sh-sub .sh-etitle { padding-bottom:7rem; }
 .sh-sub .sh-e1 { margin-top:-2.4rem; font-size:min(6.4rem, calc(100cqi / (var(--len,12) * .66))); }
 .sh-sub .sh-tabs .sh-in { flex-direction:column; align-items:stretch; gap:0; padding:0; }
 .sh-sub .sh-tabs-menu { display:none; }
 .sh-sub .sh-tabs ul { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:0 1rem; }
 .sh-sub .sh-tabs ul::-webkit-scrollbar { display:none; }
 .sh-sub .sh-tabs li { flex:none; }
 .sh-sub .sh-tabs li a { padding:2rem 1.6rem; }
 .sh-sub .sh-tabs li.on a:after { left:1.6rem; right:1.6rem; }
 .sh-sub .sh-question { margin-top:3rem; font-size:3rem; }
 .sh-sub .sh-no { font-size:1.9rem; padding:1.2rem 2.6rem; }
 .sh-sub .sh-info-list { grid-template-columns:repeat(3,1fr); row-gap:3rem; }
 .sh-sub .sh-info-list li { border-left:0; border-right:1px solid var(--sh-line); padding:.4rem 1rem; }
 .sh-sub .sh-info-list li:nth-child(3n), .sh-sub .sh-info-list li:last-child { border-right:0; }
 .sh-sub .sh-grid-2, .sh-sub .sh-grid-3, .sh-sub .sh-step-list { grid-template-columns:1fr; }
 .sh-sub .sh-grid { gap:1.6rem; }
 .sh-sub .sh-card, .sh-sub .sh-case { padding:3.6rem 3rem 4rem; border-radius:2rem; }
 /* 사진 포인트: 사진 위, 글 아래의 둥근 베이지 카드 */
 .sh-sub .sh-points.is-rows { padding-bottom:var(--sh-space); }
 .sh-sub .sh-row, .sh-sub .sh-row.rev { flex-direction:column; margin:0 0 2rem; min-height:0; border-radius:2rem; overflow:hidden; background:var(--color-key-bright); }
 .sh-sub .sh-row:nth-of-type(odd) { background:var(--color-key-bright); }
 .sh-sub .sh-row-img { order:-1; width:100%; min-height:0; aspect-ratio:1/1; }
 .sh-sub .sh-row-img:empty { display:none; }
 .sh-sub .sh-row-txt { width:100%; padding:4rem 3rem 4.4rem; }
 .sh-sub .sh-checklist { flex-direction:column; }
 .sh-sub .sh-check-img { width:100%; min-height:0; aspect-ratio:1/1; }
 .sh-sub .sh-check-txt, .sh-sub .sh-checklist:not(.has-img) .sh-check-txt { width:100%; padding:8rem var(--sh-pad); }
 .sh-sub .sh-text.has-img .sh-in { flex-direction:column; align-items:stretch; }
 .sh-sub .sh-text.has-img .sh-text-txt, .sh-sub .sh-text-img { width:100%; }
 .sh-sub .sh-text-img { border-radius:2rem; }
 .sh-sub .sh-faq-title { font-size:3.6rem; }
 .sh-sub .sh-faq-item summary { padding:2.4rem 4.6rem 2.4rem 0; }
 .sh-sub .sh-faq-a { padding:0 0 2.8rem; }
 .sh-sub .sh-doctor .sh-in { flex-direction:column; align-items:stretch; }
 .sh-sub .sh-doctor-img { width:100%; }
 .sh-sub .sh-doctor-name { font-size:4.2rem; }
 .sh-sub .sh-gallery-grid { grid-template-columns:1fr; gap:3rem; }
 .sh-sub .sh-review-grid { grid-template-columns:repeat(2,1fr); gap:2.4rem 1.2rem; }
 .sh-sub .sh-review-img { border-radius:1.2rem; }
 .sh-sub .sh-gallery figure > .sh-img { border-radius:2rem; }
 .sh-sub .sh-transit-item { flex-direction:column; gap:1.4rem; padding:3rem 0; }
 .sh-sub .sh-hours .sh-in { flex-direction:column; gap:5rem; }
 .sh-sub .sh-hours-call { width:100%; padding:4rem 3rem; border-radius:2rem; }
 .sh-sub .sh-hours-phone { font-size:4.4rem; }
 .sh-sub .sh-hours-time dl > div { gap:2rem; }
 .sh-sub .sh-hours-time dt { width:9rem; }
 .sh-sub .sh-btn { min-width:0; width:100%; max-width:32rem; }
 .sh-sub .sh-cta { padding:7rem 0; }
}

/* ---------- 후기 보기 창(수술 전후사진 카드를 누르면 회원에게 열린다. sehyun-sub.js 가 body 끝에 붙인다) ----------
   1920px 보다 넓은 화면은 html 전체를 zoom 으로 키우므로(sehyun-clone-text.mjs 의 롱와이드) vh·vw 대신 inset 과 % 로 화면을 채운다 */
html.sh-rv-lock { overflow:hidden; }
.sh-rv { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:4rem 2rem; }
.sh-rv[hidden] { display:none; }
.sh-rv-dim { position:absolute; inset:0; background:rgba(62,58,54,.72); }
.sh-rv-panel { position:relative; display:flex; flex-direction:column; width:min(88rem,100%); max-height:100%; overflow:hidden; border-radius:2rem; background:#fff; box-shadow:0 2rem 6rem rgba(0,0,0,.2); }
.sh-rv-close { position:absolute; top:1.6rem; right:1.6rem; z-index:2; width:4.4rem; height:4.4rem; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.94); cursor:pointer; }
.sh-rv-close:before,.sh-rv-close:after { content:''; position:absolute; top:50%; left:50%; width:2rem; height:2px; margin:-1px 0 0 -1rem; background:var(--color-primary); transform:rotate(45deg); }
.sh-rv-close:after { transform:rotate(-45deg); }
.sh-rv-close:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.sh-rv-scroll { overflow-y:auto; overscroll-behavior:contain; padding:5.6rem 6rem 4.8rem; color:var(--color-primary); }
.sh-rv-cat { font-size:1.3rem; letter-spacing:.1em; color:#8a8580; }
.sh-rv-title { margin-top:1rem; padding-right:4rem; font-size:2.8rem; font-weight:500; line-height:1.4; letter-spacing:-.04em; word-break:keep-all; overflow-wrap:anywhere; }
.sh-rv-date { margin-top:.8rem; font-size:1.4rem; color:#8a8580; }
.sh-rv-date:empty { display:none; }
.sh-rv-body { margin-top:3.2rem; padding-top:3.2rem; border-top:1px solid #e6e2dc; }
.sh-rv-body img { display:block; max-width:100%; height:auto; margin:0 auto 2.4rem; border-radius:1.2rem; }
.sh-rv-text { margin-bottom:2.4rem; white-space:pre-line; font-size:1.6rem; line-height:1.8; letter-spacing:-.03em; word-break:keep-all; overflow-wrap:anywhere; }
.sh-rv-msg { padding:6rem 0; text-align:center; font-size:1.5rem; color:#8a8580; }
.sh-rv-cmts { margin-top:1.6rem; padding-top:2.4rem; border-top:1px solid #e6e2dc; }
.sh-rv-cmts-t { margin-bottom:1.6rem; font-size:1.5rem; font-weight:600; }
.sh-rv-cmt { padding:1.6rem 2rem .2rem; margin-bottom:1.2rem; border-radius:1.2rem; background:#f6f5f3; }
.sh-rv-cmt-h { margin-bottom:.6rem; font-size:1.3rem; color:#8a8580; }
.sh-rv-cmt .sh-rv-text { margin-bottom:1.4rem; font-size:1.5rem; }
.sh-rv-note { margin-top:2.4rem; font-size:1.3rem; color:#8a8580; }
@media only screen and (max-width:767px) {
 .sh-rv { padding:0; }
 .sh-rv-panel { width:100%; height:100%; max-height:none; border-radius:0; }
 /* 휴대폰은 html 글자 크기가 7px 이라 본문(.sh-p)처럼 --fs-767 을 곱해 키운다 */
 .sh-rv-close { top:1.2rem; right:1.2rem; width:5.6rem; height:5.6rem; }
 .sh-rv-close:before,.sh-rv-close:after { width:2.6rem; margin-left:-1.3rem; }
 .sh-rv-scroll { flex:1; padding:7.2rem 2.4rem 5rem; }
 .sh-rv-cat,.sh-rv-date,.sh-rv-cmt-h,.sh-rv-note { font-size:calc(1.4rem * var(--fs-767)); }
 .sh-rv-title { margin-top:1.2rem; padding-right:0; font-size:calc(2.6rem * var(--fs-767)); }
 .sh-rv-text,.sh-rv-cmt .sh-rv-text,.sh-rv-msg,.sh-rv-cmts-t { font-size:calc(1.8rem * var(--fs-767)); }
}
