/* Temporary PRD structure. Existing header and hero styles stay in styles.css. */
/* 의료진의 마지막 화면 위로 개인 소개와 이후 섹션이 올라온다. */
#wf-page-main > #wf-main-doctor-profile { position: relative; z-index: 1; }
#wf-page-main > #wf-main-2 { position: relative; z-index: 0; }
#wf-page-main > :is(#wf-main-3, #wf-main-4) { position: relative; z-index: 1; background: #fff; }
@media (max-width: 768px) {
  #wf-page-main > #wf-main-2 { position: relative; top: auto; }
}
.wf-section.wf-route-section { height: auto; max-height: none; min-height: 640px; padding: 90px 5% 90px 350px; color: #454b3d; }
.wf-route-body { max-width: 1080px; margin: auto; min-width: 0; }
.wf-route-eyebrow { font-size: 11px; letter-spacing: .08em; color: #74796b; }
.wf-route-title { margin: 12px 0 30px; font-size: clamp(24px, 2.3vw, 36px); font-weight: 500; }
/* Hwacheon sub.css .page-tab.product-tab: original values, scoped to this bar. */
@font-face { font-family: 'Hwacheon Tab Pretendard'; src: url('./public/minish-reviews/PretendardVariable.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
.wf-section.wf-route-section--tabs { padding-top: 0; }
.wf-route-section--tabs > .wf-route-body { padding-top: 90px; }
.wf-route-tabs-anchor { height: 0; }
.wf-route-tabs { position: sticky; top: clamp(80px,5.208vw,100px); display: flex; justify-content: center; align-items: center; padding: 0 5vw; margin: 0 calc(-1 * var(--wf-tab-right-inset, 5vw)) 0 calc(-1 * var(--wf-tab-left-inset, 350px)); background: rgba(255,255,255,0.8); border-bottom: 1px solid #E4E6E8; gap: clamp(20px,2.083vw,40px); backdrop-filter: blur(48px); z-index: 4; transition: background-color .35s ease, border-color .35s ease; font-family: 'Hwacheon Tab Pretendard', 'Pretendard Variable', Pretendard, sans-serif; }
.wf-route-tab { position: relative; display: flex; align-items: center; flex: 0 0 auto; padding: 0 0 0 30px; margin: 0; border: 0; border-radius: 0; background: none; font: inherit; font-size: clamp(15px,0.938vw,18px); font-weight: 600; line-height: 1.5; letter-spacing: calc(clamp(14px,0.833vw,16px) * -0.03); color: #aaa; height: clamp(59px,3.594vw,69px); white-space: nowrap; cursor: pointer; }
.wf-route-tab::before { content: ''; position: absolute; left: 0; top: 50%; width: 18px; aspect-ratio: 1; border: 1px solid #ddd; border-radius: 50%; background: #fff; transform: translateY(-50%); }
.wf-route-tab[aria-selected="true"] { color: #005BAC; }
.wf-route-tab[aria-selected="true"]::before { background: #005BAC; border-color: #005BAC; }
.wf-route-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 5px; top: 50%; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-65%) rotate(-45deg); }
/* Preserve long existing labels without clipping the first tab. */
.wf-route-tabs { overflow-x: auto; justify-content: safe center; }
@media (max-width: 1024px) {
  .wf-route-tabs { flex-wrap: nowrap; justify-content: flex-start; }
}
.wf-route-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 26px; border: 1px solid #cfcec4; }
.wf-route-visual { display: grid; place-items: center; min-height: 260px; border: 1px solid #d1d0c7; background: #e3e3dc; color: #74796b; font-size: 12px; }
.wf-route-copy { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.wf-route-copy h3 { font-size: 24px; line-height: 1.5; font-weight: 500; margin: 0 0 20px; }
.wf-route-copy p, .wf-route-step p, .wf-route-faq p { font-size: 14px; line-height: 1.8; }
.wf-route-description { color: #74796b; }
.wf-procedure-info { margin: 24px 0 0; font-size: 13px; line-height: 1.6; }
.wf-procedure-info__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px solid #cfcec4; }
.wf-procedure-info__row dt { font-weight: 500; }
.wf-procedure-info__row dd { margin: 0; color: #74796b; }
.wf-route-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; }
.wf-route-step { min-width: 0; padding: 24px 18px; border: 1px solid #cfcec4; }
.wf-route-step h3 { margin: 28px 0 14px; font-size: 19px; font-weight: 500; }
.wf-route-faq { border-bottom: 1px solid #cfcec4; }
.wf-route-faq summary { padding: 22px 8px; cursor: pointer; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.wf-route-faq p { padding: 0 8px 24px; color: #74796b; }
.wf-route-draft { margin-top: 28px; font-size: 11px; color: #74796b; }
.wf-route-section :focus-visible { outline: 2px solid #60674e; outline-offset: 4px; }
@media (max-width: 1100px) {
  .wf-section.wf-route-section { padding: 50px 24px 90px; }
  .wf-route-section > .wf-label { position: static; transform: none; width: auto; max-width: 480px; margin-bottom: 36px; }
  .wf-section.wf-route-section--tabs { padding-top: 0; display: flex; flex-direction: column; }
  .wf-route-section--tabs > .wf-route-tabs-anchor { order: -3; }
  .wf-route-section--tabs > .wf-route-tabs { order: -2; margin: 0 -24px 50px; }
  .wf-route-section--tabs > .wf-route-body { padding-top: 0; width: 100%; }
}
@media (max-width: 600px) {
  .wf-section.wf-route-section { height: auto; min-height: 0; padding: 36px 20px 80px; }
  .wf-route-panel { grid-template-columns: 1fr; padding: 18px; gap: 20px; }
  .wf-route-steps { grid-template-columns: 1fr; }
  .wf-section.wf-route-section--tabs { padding-top: 0; }
  .wf-route-section--tabs > .wf-route-tabs { margin: 0 -20px 36px; }
  .wf-route-copy h3 { font-size: 20px; }
  .wf-route-visual { min-height: 180px; }
}
.consult-reference-frame { display: block; width: 100%; height: 100dvh; border: 0; background: #fff; }
body.consult-page-active.consult-modal-open { overflow: hidden; }
.consult-page-active main { padding-top: 0; }
.consult-page-active .wf-content { padding-bottom: 0; }
.consult-page-active .wf-toolbar { display: none; }
.consult-page-active.consult-modal-open .site-header::after { content: ''; position: absolute; inset: 0; background: #0008; }
.site-common-footer { display: block; }
/* 편집용 도구가 모바일 공통 플로팅바를 가리지 않도록 위로 배치. */
@media (max-width: 768px) { body .wf-toolbar { bottom: 82px; } }
.wf-content { padding-bottom: 0; background: #f3f2ee; }
/* 히어로 전환은 유지하고 미션부터 본문을 이어 붙인다. */
#wf-page-psoriasis > poscoflow-hero[history-covered] { position: relative; z-index: 0; }
#wf-page-psoriasis > #wf-psoriasis-mission { position: relative; z-index: 1; margin-top: -100vh; }
#wf-page-psoriasis > hhi-history { position: relative; z-index: 1; }
/* 미션의 마지막 고정 화면 위로 연혁이 올라오는 겹침 구간. */
@media (min-width: 769px) {
  #wf-page-psoriasis > hhi-history { z-index: 2; margin-top: -100vh; }
}
/* 연혁 마지막 화면 위로 배경 영상 섹션이 올라온다. */
#wf-page-psoriasis > kakkai-visual { position: relative; z-index: 2; margin-top: -100vh; }
@media (min-width: 769px) { #wf-page-psoriasis > kakkai-visual { z-index: 3; } }
/* 진료 원칙 섹션이 고정된 영상 화면 위로 올라온다. */
#wf-page-psoriasis > kakkai-difference {position:relative;z-index:4;margin-top:-100vh;}
.wf-section {
  position: relative;
  min-height: 620px;
  height: 78vh;
  max-height: 900px;
  border-top: 1px solid #d3d2cb;
  background: #f3f2ee;
  scroll-margin-top: 100px;
}
.wf-section:nth-child(even) { background: #eae9e3; }
/* 히어로 삽입으로 기존 본문 섹션의 교차 배경 순서가 바뀌지 않도록 보존. */
.wf-page:has(> poscoflow-hero) > .wf-section:nth-child(even) { background: #f3f2ee; }
.wf-page:has(> poscoflow-hero) > .wf-section:nth-child(odd) { background: #eae9e3; }
.wf-label {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  width: 272px;
  padding: 18px 20px;
  border: 1px solid #ceccc2;
  border-left: 3px solid #7c7767;
  background: #fffef9;
  color: #35362e;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 14px #28271608;
}
.wf-label__page, .wf-label__order, .wf-label__name { display: block; }
.wf-label__page { font-size: 12px; color: #6c6b61; }
.wf-label__order { margin: 10px 0 4px; font-size: 10px; letter-spacing: .12em; }
.wf-label__name { font-size: 16px; font-weight: 550; line-height: 1.55; }
.wf-label__notes { margin-top: 12px; padding-top: 10px; border-top: 1px solid #dedcd2; }
.wf-label__notes-title { display: block; margin-bottom: 7px; font-size: 10px; color: #827b65; }
.wf-label__note { margin: 0; font-size: 12px; line-height: 1.6; color: #5a5b50; word-break: keep-all; }
.wf-label__note + .wf-label__note { margin-top: 6px; }
.wf-label__note-key { margin-right: 6px; font-weight: 600; color: #35362e; }
.wf-placeholder {
  position: absolute;
  inset: 22% 8% 22% 35%;
  display: grid;
  gap: 18px;
  pointer-events: none;
}
.wf-placeholder__block {
  border: 1px solid #d1d0c7;
  background: linear-gradient(to top right, transparent calc(50% - .5px), #d1d0c7 50%, transparent calc(50% + .5px)), linear-gradient(to bottom right, transparent calc(50% - .5px), #d1d0c7 50%, transparent calc(50% + .5px));
}
.wf-status { position: absolute; left: 35%; bottom: 15%; color: #8c8b80; font-size: 12px; }
.wf-page-heading { padding: 44px 5%; border-top: 1px solid #cac9c0; background: #dedfd6; color: #454b3d; scroll-margin-top: 100px; }
.wf-page-heading > span { font-size: 11px; letter-spacing: .14em; }
.wf-page-heading h2 { margin-top: 6px; font-size: 28px; font-weight: 500; }
.wf-subpage main { padding-top: clamp(80px, 5.208vw, 100px); }
.wf-subpage .site-header.transparent:not(:hover):not(.scrolled) { color: #0d1015; background: #fff; border-bottom: 1px solid #e4e6e8; }
.wf-subpage .site-header.transparent:not(:hover):not(.scrolled) .site-logo,
.wf-subpage .site-header.transparent:not(:hover):not(.scrolled) .site-util__search a,
.wf-subpage .site-header.transparent:not(:hover):not(.scrolled) .site-lang__button::before { filter: none; }
.wf-subpage .site-header.transparent:not(:hover):not(.scrolled) .site-menu-button span { background: #111; }
.wf-toolbar { position: fixed; z-index: 110; right: 20px; bottom: 16px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 40px); padding: 10px 14px; background: #fffef9; border: 1px solid #cfcec4; box-shadow: 0 4px 20px #25271e12; color: #454b3d; }
.wf-toolbar__label, .wf-toolbar__count, .wf-toolbar__top { font-size: 12px; white-space: nowrap; }
.wf-toolbar__select { min-width: 150px; max-width: 265px; min-height: 34px; padding: 5px 26px 5px 10px; border: 1px solid #d5d5cb; background: #f6f6f1; font: inherit; color: inherit; }
.wf-toolbar__top { color: inherit; text-decoration: none; }
.wf-toolbar :focus-visible { outline: 2px solid #60674e; outline-offset: 3px; }
.labels-hidden .wf-label { display: none; }
.wf-toolbar__toggle { font: inherit; font-size: 12px; color: inherit; background: none; border: 0; cursor: pointer; white-space: nowrap; padding: 8px 0; }
@media (max-width: 900px) {
  .wf-label { left: 16px; width: 220px; padding: 14px; }
  .wf-placeholder { left: 43%; right: 5%; }
  .wf-status { left: 43%; }
  .wf-toolbar__count { display: none; }
  .wf-toolbar { gap: 8px; }
}
@media (max-width: 600px) {
  .wf-toolbar { flex-wrap: wrap; }
  .wf-toolbar__select { flex: 1; width: auto; }
  .wf-toolbar__label { display: none; }
  .wf-toolbar__toggle { margin-left: auto; }
}
@media (max-width: 520px) {
  .wf-section { height: 72vh; min-height: 500px; }
  .wf-label { left: 12px; width: 180px; padding: 12px; }
  .wf-label__name { font-size: 13px; }
  .wf-label__page { font-size: 10px; }
  .wf-label__note { font-size: 11px; line-height: 1.5; }
  .wf-label__notes { margin-top: 9px; padding-top: 8px; }
  .wf-placeholder { left: 55%; right: 5%; gap: 7px; }
  .wf-status { left: 55%; bottom: 17%; font-size: 10px; }
  .wf-toolbar { left: 10px; right: 10px; bottom: 10px; max-width: none; gap: 8px; padding: 8px 10px; }
  .wf-toolbar__select { flex: 1; min-width: 0; width: 100%; }
  .wf-toolbar__count { display: none; }
  .wf-page-heading { padding: 30px 20px; }
  .wf-page-heading h2 { font-size: 22px; }
}

/* Match the original bar offset when the existing header hides on scroll. */
body:has(.site-header.is-scroll-hidden) .wf-route-tabs { top: 0; }
/* Keep the bar over the entire route, including process and FAQ sections. */
.wf-route-section--tabs > .wf-route-tabs.is-following {
  position: fixed;
  margin: 0;
  z-index: 90;
  transition: none;
}

.wf-section.wf-route-section--original-intro { padding: 0; min-height: 0; }
.wf-route-section--original-intro > .wf-label,
.wf-route-section--original-intro > .wf-route-body > .wf-route-eyebrow,
.wf-route-section--original-intro > .wf-route-body > .wf-route-title,
.wf-route-section--original-intro > .wf-route-body > .wf-route-draft { display: none; }
.wf-route-section--original-intro > .wf-route-body { padding: 0; margin: 0; max-width: none; width: 100%; }
.wf-route-section--original-intro > .wf-route-tabs { margin: 0; }
.wf-route-section--original-intro .wf-route-panel { display: block; padding: 0; border: 0; }
/* 리프팅·보톡스 소개 위로 다음 섹션이 올라와 덮인다. */
#wf-page-lifting > #wf-lifting-2:is([data-content-key="lifting:1"], [data-content-key="lifting:3"]) {
  position: sticky;
  top: 0;
  z-index: 0;
}
#wf-page-lifting:has(> #wf-lifting-2:is([data-content-key="lifting:1"], [data-content-key="lifting:3"])) > #wf-lifting-2 ~ div {
  position: relative;
  z-index: 1;
  background: #fff;
}
.wf-route-tabs[hidden] { display: none; }