/* RTL 자동 반전본 — 원본: /en/assets/css/subpage.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=65eb51b96c06f77218dfab2d2982aec1 */
/* ─────────────────────────────────────────────────────────────
   서브페이지 공용 프리미티브.
   J컬 서브페이지(시안 확정본)의 패턴을 일반화한 것이다.
   메인·J컬 두 페이지는 이 파일을 쓰지 않는다 — 그쪽은 섹션 CSS 가 시안 전용.
   ───────────────────────────────────────────────────────────── */

/* ── 페이지 히어로 ────────────────────────────────────────────
   J컬 Sec_1 과 같은 구성. 배경 사진은 인라인으로
   style="--hero-img:url('https://channel-static.rebeauty.co.kr/kowonps/renewal/en/assets/img/site/...')" 를 준다.
   높이는 전 서브페이지 통일 요청으로 메인 히어로(main-sec_1, 시안 1920×980)와
   같은 980 / 640 / 603 을 쓴다. 서브 아트보드의 650 / 460 / 400 은 더 쓰지 않는다.
   (폰 603 = 메인 히어로가 콘텐츠 480 + 패딩 63/60 으로 실제 그려지는 높이) */
.page-hero{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  min-height:980px;
  padding-block:calc(var(--header-h) + 4px) var(--header-h);
  overflow:hidden;
  color:var(--text-inverse);
  text-align:center;
  background-color:var(--surface-dark);
  background-image:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.68)),var(--hero-img,none);
  background-size:100% 100%,cover;
  background-position:100% 0,var(--hero-pos,center);   /* 사진마다 인물이 보이도록 --hero-pos 로 초점 지정(기본 가운데) */
  background-repeat:no-repeat,no-repeat;
}
/* C안 헤더 배너(.page-hero--c, 서브페이지 31곳) — 딤은 Nasal-tip 과 같은 68% 로 통일한다.
   페이지별 76~82% 덮어쓰기(.about-hero 등, 클래스 하나)보다 특정도가 높아 순서와 무관하게 이긴다. */
.page-hero.page-hero--c,.jcurl-sec_1.page-hero--c{background-image:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.68)),var(--hero-img,none)}
/* 코 성형 유형 8쪽은 J컬 Sec_1 배너 틀(.jcurl-sec_1)을 쓴다. J-Curl 페이지는 이 파일을 읽지 않고 클래스도 없어 영향이 없다. */
.jcurl-sec_1.page-hero--c{background-position:100% 0,var(--hero-pos,center)}
@media (max-width:767px){.jcurl-sec_1.page-hero--c{background-position:100% 0,var(--hero-pos-m,var(--hero-pos,center))}}
.page-hero__inner{display:flex;flex-direction:column;align-items:center}
.page-hero__eyebrow{font-size:var(--fs-22);line-height:1.0909;text-transform:none}
.page-hero__title{
  margin-top:25px;
  font-weight:700;font-size:var(--fs-60);line-height:1.2;letter-spacing:var(--ls-tight);
  -webkit-text-stroke:.8px currentColor;paint-order:stroke fill;
  word-break:keep-all;
}
.page-hero__lead{
  margin-top:25px;max-width:900px;
  color:rgb(173 173 173);
  font-weight:500;font-size:var(--fs-18);line-height:1.4;letter-spacing:var(--ls-tight);
  word-break:keep-all;
}
/* 사진이 없는 페이지(법적고지 등)용 축소 히어로 — 배경 사진이 없어 980 으로
   키우면 빈 화면만 남으므로 높이는 올리지 않는다. 쓰는 페이지 네 곳은 모두
   page-*.css 에서 .pv-hero 440 / .terms-hero 440 / .loc-hero 480 /
   .cons-hero 460 으로 덮어쓰므로 아래 값은 그 폴백이다. */
.page-hero--compact{min-height:420px}
.page-hero--plain{
  min-height:360px;color:var(--text-primary);background:var(--brand-tint-1);background-image:none;
}
.page-hero--plain .page-hero__lead{color:var(--text-secondary)}
@media (max-width:1023px){ .page-hero{min-height:640px} .page-hero--compact,.page-hero--plain{min-height:320px} }
@media (max-width:767px){ .page-hero{min-height:603px;background-position:100% 0,var(--hero-pos-m,var(--hero-pos,center))} .page-hero--compact,.page-hero--plain{min-height:280px} }

/* 빵부스러기 */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--fs-14);color:var(--text-tertiary)}
.crumbs a:hover{color:var(--brand)}
.crumbs li+li::before{content:"/";margin-left:6px;color:var(--line-mid)}
.crumbs li{display:flex;align-items:center}

/* ── 본문 (article 아키타입) ──────────────────────────────────
   .prose 안에서는 자식 요소에 클래스를 달지 않아도 되게 한다. */
.prose{max-width:900px;margin-inline:auto;color:var(--text-secondary);word-break:keep-all}
.prose--wide{max-width:none}
.prose>*+*{margin-top:20px}
.prose h3{
  margin-top:var(--sp-stack);
  font-weight:700;font-size:var(--fs-24);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-primary);
}
.prose h4{
  margin-top:28px;
  font-weight:700;font-size:var(--fs-20);line-height:1.4;color:var(--text-primary);
}
.prose p{font-size:var(--fs-18);line-height:1.8}
.prose strong{color:var(--text-primary);font-weight:700}
.prose ul{display:flex;flex-direction:column;gap:10px}
.prose ul li{position:relative;padding-right:18px;font-size:var(--fs-18);line-height:1.7}
.prose ul li::before{content:"";position:absolute;right:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--brand)}
.prose ol{counter-reset:n;display:flex;flex-direction:column;gap:10px}
.prose ol li{counter-increment:n;position:relative;padding-right:28px;font-size:var(--fs-18);line-height:1.7}
.prose ol li::before{content:counter(n) ".";position:absolute;right:0;color:var(--brand);font-weight:700}
.prose blockquote{
  margin-block:var(--sp-stack);padding:28px 32px;
  background:var(--brand-tint-1);border-radius:var(--radius-card);
  font-weight:700;font-size:var(--fs-24);line-height:1.5;color:var(--text-primary);
}
.prose figure{margin-block:var(--sp-stack)}
.prose figure img{width:100%;border-radius:var(--radius-card)}
.prose figcaption{margin-top:12px;font-size:var(--fs-14);color:var(--text-tertiary);text-align:center}
.prose a:not(.btn){color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* 번호 붙은 원칙/약속 블록 (About 류) */
.numbered{display:grid;gap:var(--sp-gap);grid-template-columns:repeat(3,1fr)}
.numbered__item{padding:32px 28px;background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.numbered__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--brand);color:var(--text-inverse);
  font-weight:700;font-size:var(--fs-18);line-height:1;
}
.numbered__title{margin-top:20px;font-weight:700;font-size:var(--fs-20);line-height:1.4;color:var(--text-primary);word-break:keep-all}
.numbered__text{margin-top:12px;font-size:var(--fs-16);line-height:1.7;color:var(--text-secondary);word-break:keep-all}
@media (max-width:1023px){ .numbered{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){ .numbered{grid-template-columns:1fr} }

/* ── 갤러리 (before/after · 후기 스캔) ───────────────────────── */
.gallery{display:grid;gap:var(--sp-gap);grid-template-columns:repeat(4,1fr)}
.gallery--3{grid-template-columns:repeat(3,1fr)}
.gallery__item{margin:0}
.gallery__item img{width:100%;border-radius:var(--radius-card);background:var(--surface-muted)}
.gallery__cap{margin-top:12px;font-size:var(--fs-16);line-height:1.5;color:var(--text-secondary);word-break:keep-all}
@media (max-width:1023px){ .gallery,.gallery--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){ .gallery,.gallery--3{grid-template-columns:repeat(2,1fr);gap:12px} }
/* 사진+캡션 카드(.gallery__item.lift) 호버 — 사진·캡션을 감싸는 둥근 바탕판이 뜬다.
   판은 카드보다 사방으로 조금 크게(::before) 깔려 글자가 판 가장자리에 붙지 않고,
   모서리는 사진 모서리와 같은 중심의 둥근 꼴(사진 반경 + 여백)이다.
   카드 자리·크기는 그대로 — 판은 opacity·transform 만 바뀐다.
   Clinic Tour 타일은 이미 흰 카드(바탕·라운드·그림자)라 빼 둔다. */
@media (hover:hover){
  .gallery:not(.about-tour-spaces__gallery) .gallery__item.lift{position:relative;isolation:isolate}
  .gallery:not(.about-tour-spaces__gallery) .gallery__item.lift::before{
    content:"";position:absolute;inset:-16px -16px -20px;z-index:-1;
    border-radius:calc(var(--radius-card) + 16px);
    background:var(--surface);
    box-shadow:0 30px 60px -34px rgba(196,0,78,.5),0 1px 3px rgba(0,0,0,.05);
    opacity:0;transform:scale(.97);
    transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);
    pointer-events:none;
  }
  .gallery:not(.about-tour-spaces__gallery) .gallery__item.lift:hover::before,
  .gallery:not(.about-tour-spaces__gallery) a:focus-visible > .gallery__item.lift::before,
  .gallery:not(.about-tour-spaces__gallery) .gallery__item.lift:focus-within::before{opacity:1;transform:none}
  /* 카드 자체의 네모난 그림자는 끈다 — 그림자는 판이 맡는다 */
  .gallery:not(.about-tour-spaces__gallery) .gallery__item.lift:hover{box-shadow:none}
}

/* 더 보기 — JS 없이 details 로 접는다 */
.more{margin-top:var(--sp-stack);text-align:center}
.more>summary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding-inline:35px;cursor:pointer;list-style:none;
  border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--brand);
  color:var(--brand);font-weight:700;font-size:var(--fs-18);
}
.more>summary::-webkit-details-marker{display:none}
.more[open]>summary{display:none}
.more__body{margin-top:var(--sp-gap);text-align:right}

/* ── 글 목록 (Q&A · 교과서 · 공지) ───────────────────────────── */
.postlist{display:grid;gap:var(--sp-gap);grid-template-columns:repeat(3,1fr)}
.postlist--2{grid-template-columns:repeat(2,1fr)}
.postlist__item{
  display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.postlist__media{background:var(--surface-muted)}
.postlist__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.postlist__body{display:flex;flex-direction:column;flex:1;padding:24px}
.postlist__title{
  font-weight:700;font-size:var(--fs-20);line-height:1.5;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
.postlist__text{margin-top:12px;font-size:var(--fs-16);line-height:1.7;color:var(--text-secondary);word-break:keep-all}
.postlist__meta{margin-top:auto;padding-top:20px;font-size:var(--fs-14);color:var(--text-tertiary)}
@media (max-width:1023px){ .postlist{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){ .postlist,.postlist--2{grid-template-columns:1fr} }

/* 텍스트 전용 목록 (제목 + 요약, 이미지 없음) */
.qlist{border-top:1px solid var(--line-soft)}
.qlist__item{padding-block:28px;border-bottom:1px solid var(--line-soft)}
.qlist__q{
  display:flex;gap:8px;
  font-weight:700;font-size:var(--fs-20);line-height:1.5;color:var(--text-primary);word-break:keep-all;
}
.qlist__q::before{content:"Q.";color:var(--brand);flex:none}
.qlist__a{margin-top:12px;padding-right:26px;font-size:var(--fs-16);line-height:1.8;color:var(--text-secondary);word-break:keep-all}
@media (max-width:767px){ .qlist__a{padding-right:0} }

/* ── 허브 카드 (시술·토픽·카테고리) ─────────────────────────── */
.hubgrid{display:grid;gap:var(--sp-gap);grid-template-columns:repeat(3,1fr)}
.hubgrid--2{grid-template-columns:repeat(2,1fr)}
.hubcard{
  display:flex;flex-direction:column;height:100%;padding:36px 32px;
  background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  transition:box-shadow .18s ease,transform .18s ease;
}
.hubcard:hover{box-shadow:0 8px 40px rgba(0,0,0,.14);transform:translateY(-2px)}
.hubcard__eyebrow{font-weight:700;font-size:var(--fs-16);color:var(--brand);letter-spacing:var(--ls-tight)}
.hubcard__title{
  margin-top:12px;font-weight:700;font-size:var(--fs-24);line-height:1.4;
  letter-spacing:var(--ls-tight);color:var(--text-primary);word-break:keep-all;
}
.hubcard__text{margin-top:14px;font-size:var(--fs-16);line-height:1.7;color:var(--text-secondary);word-break:keep-all}
.hubcard__list{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.hubcard__list li{position:relative;padding-right:16px;font-size:var(--fs-16);line-height:1.6;color:var(--text-secondary)}
.hubcard__list li::before{content:"";position:absolute;right:0;top:.6em;width:4px;height:4px;border-radius:50%;background:var(--brand)}
.hubcard__more{margin-top:auto;padding-top:24px}
@media (max-width:1023px){ .hubgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){ .hubgrid,.hubgrid--2{grid-template-columns:1fr} }

/* ── 정보 표 (진료시간 · 비급여) ─────────────────────────────── */
.infotable{width:100%;border-top:1px solid var(--line-strong)}
.infotable th,.infotable td{
  padding:18px 16px;text-align:right;vertical-align:top;
  border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-16);line-height:1.6;
}
.infotable th{width:220px;font-weight:500;color:var(--text-tertiary)}
.infotable td{color:var(--text-primary)}
@media (max-width:767px){
  .infotable th{width:120px;padding:14px 10px}
  .infotable td{padding:14px 10px}
}

/* ── 상담 CTA 밴드 (J컬 Sec_10 일반화) ──────────────────────── */
.cta-band{
  position:relative;overflow:hidden;
  padding-block:var(--sp-section);
  color:var(--text-inverse);text-align:center;
  background-color:var(--brand);
  background-image:linear-gradient(rgba(196,0,78,.8),rgba(196,0,78,.8)),var(--cta-img,none);
  background-size:100% 100%,cover;
  background-position:100% 0,center;
  background-repeat:no-repeat,no-repeat;
}
.cta-band__title{
  margin-top:var(--sp-tight);
  font-weight:700;font-size:var(--fs-50);line-height:1.3;letter-spacing:var(--ls-tight);
  word-break:keep-all;
}
.cta-band__lead{margin-top:var(--sp-tight);font-size:var(--fs-18);line-height:1.6;color:rgba(255,255,255,.9);word-break:keep-all}
.cta-band__actions{margin-top:var(--sp-stack);display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
@media (max-width:767px){ .cta-band__actions .btn{width:100%} }

/* ── 형제 페이지 이동 ────────────────────────────────────────── */
.siblings{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.siblings a{
  display:inline-flex;align-items:center;min-height:48px;padding-inline:22px;
  border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--line-soft);
  font-weight:500;font-size:var(--fs-16);color:var(--text-secondary);
}
.siblings a:hover,.siblings a[aria-current="page"]{
  box-shadow:inset 0 0 0 1px var(--brand);color:var(--brand);background:var(--brand-tint-1);
}

/* ── 속도: 가벼운 배경 이미지 (QA 9/30) ─────────────────────────
   배너는 페이지 인라인에 --hero-img(PC 1920 WebP)와 --hero-img-m(모바일 1080 WebP)을 둔다.
   인라인 값보다 이겨야 하므로 !important. */
@media (max-width:767px){
  [style*="--hero-img-m"]{--hero-img:var(--hero-img-m)!important}
}
/* 상담 배너 사진(모든 페이지 같은 사진) — 인라인 jpg 대신 WebP */
.cta-band[style*="jcurl-sec_10-1.jpg"]{--cta-img:url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/0d00f554d53e838f-w1920.webp')!important}
body .jcurl-sec_3{background-image:url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/0e68e6456d365c00-w1920.webp')}
body .jcurl-sec_5{background-image:url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/794b2c00aa49e52d-w1920.webp')}
body .jcurl-sec_9{background-image:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/51559cac2670cf94-w1920.webp')}
body .jcurl-sec_10{background-image:url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/0d00f554d53e838f-w1920.webp')}
@media (max-width:767px){
  .cta-band[style*="jcurl-sec_10-1.jpg"]{--cta-img:url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/0d00f554d53e838f-w1080.webp')!important}
  body .jcurl-sec_3{background-image:url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/0e68e6456d365c00-w1080.webp')}
  body .jcurl-sec_5{background-image:url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/794b2c00aa49e52d-w1080.webp')}
  body .jcurl-sec_9{background-image:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/51559cac2670cf94-w1080.webp')}
  body .jcurl-sec_10{background-image:url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/0d00f554d53e838f-w1080.webp')}
}