/**********************************************************
* 서브 페이지 공용 스타일
* 폰트 크기·여백·색은 메인(main.css)과 같은 기준을 씁니다.
* 구성: 1 기본 · 2 페이지 상단 · 3 공용 부품 · 4 페이지별 · 5 반응형
***********************************************************/

/* ==========================================================
   1. 기본
   ========================================================== */
.sub {
    --sub-pad: 120px;
    color: #342d29;
}

.sub .section {
    position: relative;
    padding: var(--sub-pad) 0;
    background: #f3f2e9;
}

.section_sage {
    background: #e4e4d7 !important;
}

.section_dark {
    background: #342d29 !important;
    color: #f3f2e9;
}

.sub .section > .inner > * + * {
    margin-top: 48px;
}

/* 좌우 2단 안에서는 오른쪽 열에 위 여백을 주지 않습니다 */
.sub .section > .inner.split > * + *,
.sub .section > .inner.device > * + *,
.sub .section > .inner.notice > * + *,
.sub .section > .inner.process > * + *,
.sub .section > .inner.post_head_inner > * + *,
.page_case .case_head > .inner > * + *,
.sub .section > .inner.post_body_inner > * + * {
    margin-top: 0;
}

.desc_narrow {
    max-width: 720px;
}

.sub .btn_small {
    height: 44px;
    padding: 0 22px;
    font-size: var(--fz-small);
}

/* 밝은 배경 페이지: 고정 헤더 높이만큼 비움 */
.sub_light {
    padding-top: 96px;
}

/* ==========================================================
   2. 페이지 상단
   ========================================================== */

/* 어두운 큰 배너 (소개 · 시술 안내 페이지) */
.page_hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 680px;
    padding-top: 0; /* 헤더는 위에 고정되어 있으므로, 글자는 배너 전체의 정중앙에 둡니다 */
    box-sizing: border-box;
    overflow: hidden;
    /* background: #3a3826 url('../images/main/hero-poster.jpg') center / cover no-repeat; */
}

.page_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(72, 73, 63, 0.82) 0%, rgba(106, 107, 92, 0.62) 100%);
}

/* 이미지 없는 히어로 (레이저·콜라겐): 시안의 그라데이션만 */
.page_hero_plain {
    background: linear-gradient(180deg, #48493f 0%, #6a6b5c 100%);
}

.page_hero_plain::before {
    display: none;
}


/* 스크롤을 내려도 메인처럼 헤더가 위에 고정됩니다 (내리면 밝은 헤더로 바뀝니다) */
.page_hero .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
}

.page_hero_copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    width: min(916px, calc(100% - 48px));
    text-align: center;
}

.page_hero_title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 56px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f3f2e9;
}

.page_hero_lead {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 22px;
    line-height: 1.6;
    color: #fdfbf6;
}

/* 밝은 제목 띠 (스토리 · 전후사진 · 상담 · 로그인) */
.page_top {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: #e4e4d7;
    text-align: center;
}

.page_top .section_head {
    gap: 14px;
}

.page_top_title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 56px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #342d29;
}

/* ==========================================================
   3. 공용 부품
   ========================================================== */

/* 이미지 자리 */
.sub .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 16px;
    background: #d8d8ca;
    text-align: center;
}

.sub .placeholder span {
    font-family: var(--font-kr);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #5e5a50;
}

.placeholder_dark {
    background: #565a4c !important;
}

.placeholder_dark span {
    color: #efede3 !important;
}

/* 좌우 2단 */
.split {
    display: flex;
    align-items: center;
    gap: 96px;
}

.split_top {
    align-items: flex-start;
    gap: 80px;
}

.split_media {
    flex: none;
    width: 480px;
}

.split_media .placeholder {
    aspect-ratio: 3 / 4;
}

/* 실제 사진이 들어가는 칸 */
.split_media_photo {
    width: 550px;
}

.split_media_photo img {
    display: block;
    width: 100%;
    height: 640px;
    object-fit: cover;
}

.split_media_doctor img {
    height: 560px;
    object-position: 60% 50%;
}

.split_text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.split_text_narrow {
    flex: none;
    width: 380px;
}

.split_text_note {
    flex: none;
    width: 450px;
    gap: 24px;
}

.note_photo {
    position: relative;
    width: 100%;
    margin-top: 12px;
}

.note_photo img {
    display: block;
    width: 100%;
    height: 539px;
    object-fit: cover;
    object-position: 38% 50%;
}

.note_photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
}

.sub .split_text .desc {
    line-height: 1.9;
}

.sub_title_light {
    color: #f3f2e9;
}

.sub_title_regular {
    font-size: calc(var(--fz-h) - 6px);
    font-weight: 400;
    line-height: 1.5;
}

.display_title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 56px;
    font-weight: 400;
    line-height: 1.08;
    color: #342d29;
}

.display_title em {
    font-style: italic;
    color: #545c48;
}

.signature {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0;
    padding-top: 12px;
}

.signature span {
    font-size: var(--fz-small);
    color: #5e5a50;
}

.signature em {
    font-family: 'Nanum Brush Script', 'Cormorant Garamond', cursive;
    font-size: 40px;
    font-style: normal;
    line-height: 1;
}

/* 번호 있는 설명 카드 3열 */
.point_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.point {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 28px 32px;
    border-top: 1px solid #8b9280;
    border-bottom: 1px solid #8b9280;
}

.point_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.point_num {
    font-family: var(--font-serif);
    font-size: 40px;
    line-height: 1;
    color: #545c48;
}

.point h3 {
    margin: 0;
    font-family: var(--font-kr);
    font-size: var(--fz-h3);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.5;
}

.point p {
    margin: 0;
    font-size: var(--fz-small);
    line-height: 1.9;
    color: #5e5a50;
}

.section_dark .point {
    border-top-color: rgba(243, 242, 233, 0.35);
    border-bottom-color: rgba(243, 242, 233, 0.35);
}

.section_dark .point_num {
    color: #eef0e2;
}

.section_dark .point h3 {
    color: #f3f2e9;
}

.section_dark .point p {
    color: #efede3;
}

/* 이름 · 약력 목록 */
.more summary {
    list-style: none;
    cursor: pointer;
}

/* 약력 펼침 버튼: 시안 기준 (테두리 연한 베이지, 46px) */
.more summary.btn_more {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 22px;
    border: 1px solid #d5d4c6;
    border-radius: 999px;
    color: #342d29;
    font-size: var(--fz-small);
    font-weight: 400;
    transition: background-color 0.3s, border-color 0.3s;
}

.more summary.btn_more:hover {
    border-color: #342d29;
    background: rgba(52, 45, 41, 0.04);
}

.more summary::-webkit-details-marker {
    display: none;
}

.more summary img {
    margin-left: 10px;
    transition: transform 0.3s;
}

.more[open] summary img {
    transform: rotate(180deg);
}

.more_body {
    margin: 16px 0 0;
}

.doctor_name {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0;
    padding-top: 6px;
}

.doctor_name strong {
    font-family: var(--font-kr);
    font-size: var(--fz-h);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.doctor_name span {
    font-size: var(--fz-small);
    color: #5e5a50;
}

/* 항목 · 내용 표 (약력, 시술 정보, 사례 정보) */
.spec_list {
    width: 100%;
    margin: 0;
    border-top: 1px solid #545c48;
}

.spec_row {
    display: flex;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid #d5d4c6;
}

.spec_row dt {
    flex: none;
    width: 150px;
    font-size: var(--fz-small);
    color: #5e5a50;
}

.spec_row dd {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: var(--fz-small);
    line-height: 1.7;
    color: #342d29;
}

/* 체크 아이콘 목록 (어두운 배경) */
.check_list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.check_list li {
    display: flex;
    gap: 20px;
    padding: 18px 0;
    border-top: 1px solid rgba(243, 242, 233, 0.3);
}

/* 맨 아래에도 선 */
.check_list li:last-child {
    border-bottom: 1px solid rgba(243, 242, 233, 0.3);
}

.check_list img {
    flex: none;
    width: auto;
    min-width: 29px;
    height: 36px;
}

.check_list h3 {
    margin: 0 0 6px;
    font-family: var(--font-kr);
    font-size: var(--fz-h3);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #f3f2e9;
}

.check_list p {
    margin: 0;
    font-size: var(--fz-small);
    line-height: 1.9;
    color: #efede3;
}

/* 질문과 답 (펼쳐진 형태) */
.qa_list {
    flex: 1 1 0;
    min-width: 0;
    border-top: 1px solid #545c48;
}

.qa {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 0;
    border-bottom: 1px solid #d5d4c6;
}

.qa_q,
.qa_a {
    display: flex;
    gap: 18px;
    margin: 0;
}

.qa_q {
    font-family: var(--font-kr);
    font-size: var(--fz-h3);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.5;
}

.qa_a {
    font-size: var(--fz-body);
    line-height: 1.9;
}

.qa_q span,
.qa_a span {
    flex: none;
    font-family: var(--font-serif);
    font-size: var(--fz-eyebrow);
    letter-spacing: 0.2em;
    line-height: 1.9;
    color: #545c48;
}

.qa_a span {
    width: 38px;
    color: #8b9280;
}

/* 신뢰 카드 */
.trust_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.trust {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 28px;
    border: 1px solid #d5d4c6;
    background: #f3f2e9;
}

.trust h3 {
    margin: 0;
    font-family: var(--font-kr);
    font-size: var(--fz-h3);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.trust p {
    margin: 0;
    font-size: var(--fz-small);
    line-height: 1.7;
    color: #5e5a50;
}

/* 원형 도식 변형 (main.css 의 standard_art 를 크기만 바꿔 씁니다) */
/* 서브 페이지는 도식 배경 없이 섹션 색만 씁니다 */
.sub .standard_art {
    background: none;
}

.standard_art_sm {
    flex: none;
    width: 500px;
}

.standard_core {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif);
    font-size: 22px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: #eef0e2;
}

/* ==========================================================
   4. 페이지별
   ========================================================== */

/* ---- 공용: 보조 글 · 알약 · 탭 ---- */
.footnote {
    margin: 0;
    font-size: var(--fz-cap);
    line-height: 1.7;
    color: #5e5a50;
    text-align: center;
}

.section_title_light {
    color: #f3f2e9;
}

.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.back_link {
    font-size: var(--fz-cap);
    color: #5e5a50;
    text-decoration: none;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

a.chip {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border: 1px solid #d5d4c6;
    border-radius: 999px;
    font-size: var(--fz-small);
    color: #342d29;
    text-decoration: none;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

a.chip:hover {
    border-color: #545c48;
}

a.chip.is-on {
    border-color: #545c48;
    background: #545c48;
    color: #f3f2e9;
}

/* 막대 모양 탭 (스킨부스터 제품 선택) */
.booster_tabs,
.section .chips {
    margin-top: 0;
}

.empty {
    padding: 80px 0;
    text-align: center;
    color: #5e5a50;
}

/* ---- 소개 / 시술 안내 공통: 박스 안내 ---- */
.callout {
    margin: 0;
    padding: 24px 28px;
    border-left: 2px solid #545c48;
    background: rgba(139, 146, 128, 0.16);
    font-size: var(--fz-small);
    line-height: 1.9;
    color: #342d29;
}

.callout b {
    font-size: calc(var(--fz-small) + 2px);
    font-weight: 700;
}

.split_media_wide {
    width: 520px;
}

.split_media_wide .placeholder {
    aspect-ratio: 520 / 400;
}

/* 시술 안내 박스 구간: 위아래 여백을 같게 */
.notice_section {
    padding-top: min(80px, var(--sub-pad)) !important;
    padding-bottom: min(80px, var(--sub-pad)) !important;
}

.notice {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 36px 44px;
    border-radius: 16px;
    background: #e4e4d7;
}

.section_sage .notice {
    background: #f3f2e9;
}

.notice_title {
    margin: 0 0 4px;
    font-family: var(--font-kr);
    font-size: var(--fz-h3);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.notice p {
    margin: 0;
    font-size: var(--fz-small);
    line-height: 1.9;
    color: #5e5a50;
}

.notice_card {
    margin-top: 32px;
}

/* ---- 실리프팅 ---- */
.step_list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step_list li {
    display: flex;
    gap: 24px;
    padding: 20px 0;
    border-top: 1px solid rgba(243, 242, 233, 0.3);
}

.step_list li > span {
    flex: none;
    width: 44px;
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1.2;
    color: #eef0e2;
}

.step_list h3 {
    margin: 0 0 6px;
    font-family: var(--font-kr);
    font-size: var(--fz-h3);
    font-weight: 500;
    color: #f3f2e9;
}

.step_list p {
    margin: 0;
    font-size: var(--fz-small);
    line-height: 1.9;
    color: #efede3;
}

/* 부위별 얼굴 지도 */
.face_map {
    display: flex;
    align-items: center;
    gap: 80px;
}

.face_map_art {
    position: relative;
    flex: none;
    width: 520px;
    max-width: 100%;
    aspect-ratio: 520 / 600;
    overflow: hidden;
    background: #f3f2e9;
}

.face_map_photo,
.face_map_svg {
    position: absolute;
    left: 0;
    width: 100%;
    display: block;
}

.area_list {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #d5d4c6;
}

.area_list li {
    display: flex;
    gap: 22px;
    padding: 28px 0;
    border-top: 1px solid #545c48;
}

.area_list li + li {
    border-top-color: #d5d4c6;
}

.area_num {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #545c48;
    font-family: var(--font-serif);
    font-size: 17px;
    color: #f3f2e9;
}

.area_list h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-family: var(--font-kr);
    font-size: var(--fz-h3);
    font-weight: 500;
}

.area_list em {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border: 1px solid #8b9280;
    border-radius: 999px;
    font-size: var(--fz-cap);
    font-style: normal;
    font-weight: 400;
    color: #545c48;
}

.area_list p {
    margin: 0;
    font-size: var(--fz-small);
    line-height: 1.9;
    color: #5e5a50;
}

/* 실 종류 카드 */
.method_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.method {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    box-sizing: border-box;
}

.method_dark {
    background: #626a55;
    color: #f3f2e9;
}

.method_light {
    background: #e4e4d7;
}

.method .placeholder {
    height: 200px;
}

.method .placeholder_dark {
    background: rgba(243, 242, 233, 0.12) !important;
}

.method_no {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--fz-eyebrow);
    letter-spacing: 0.16em;
    color: #5e5a50;
}

.method_dark .method_no {
    color: #eef0e2;
}

.method h3 {
    margin: 0;
    font-family: var(--font-kr);
    font-size: var(--fz-h);
    font-weight: 500;
}

.method_desc {
    min-height: 76px;
    margin: 0;
    font-size: var(--fz-small);
    line-height: 1.8;
    color: #5e5a50;
}

.method_dark .method_desc {
    color: #efede3;
}

.spec_list_card {
    border-top: 0;
}

.spec_list_card .spec_row {
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid #d5d4c6;
    border-bottom: 0;
}

.spec_list_card .spec_row dt {
    width: 88px;
    font-size: calc(var(--fz-cap) + 1px);
}

.spec_list_card .spec_row dd {
    font-size: calc(var(--fz-cap) + 1px);
}

.method_dark .spec_row {
    border-top-color: rgba(243, 242, 233, 0.3);
}

.method_dark .spec_row dt,
.method_dark .spec_row dd {
    color: #f3f2e9;
}

/* 진행 과정 (숲 배경) */
.section_forest {
    background: #3a3826 url('../images/main/hero-poster.jpg') center / cover no-repeat !important;
    color: #f3f2e9;
}

.section_forest::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(62, 65, 54, 0.88) 0%, rgba(74, 76, 64, 0.8) 100%);
}

.section_forest > .inner {
    position: relative;
}

.process {
    display: flex;
    align-items: center;
    gap: 96px;
}

.process_head {
    flex: none;
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.process_list {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 48px;
    list-style: none;
}

.process_list::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: rgba(243, 242, 233, 0.6);
}

.process_list li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 0;
}

.process_list li::before {
    content: '';
    position: absolute;
    left: -48px;
    top: 24px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #f3f2e9;
}

.process_list strong {
    font-size: var(--fz-h3);
    font-weight: 500;
}

.process_list span {
    font-size: var(--fz-small);
    line-height: 1.7;
    color: #e8e6dc;
}

/* 회복 개념도 */
.recovery {
    flex: none;
    width: 540px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 40px;
    box-sizing: border-box;
    background: #e4e4d7;
}

.recovery_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.recovery_chart {
    width: 100%;
    height: auto;
    border-left: 1px solid #d5d4c6;
    border-bottom: 1px solid #d5d4c6;
    overflow: visible;
}

.recovery_steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.recovery_steps p {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.recovery_steps strong {
    font-size: var(--fz-small);
    font-weight: 500;
}

.recovery_steps span {
    font-size: var(--fz-cap);
    line-height: 1.6;
    color: #5e5a50;
}

.recovery .footnote {
    text-align: left;
}

/* 자주 묻는 질문 (펼침) */
.faq {
    border-top: 1px solid #545c48;
}

.faq_item {
    border-bottom: 1px solid #d5d4c6;
}

.faq_item[open] {
    background: rgba(139, 146, 128, 0.18);
}

.faq_item summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 72px;
    padding: 0 64px 0 24px;
    font-family: var(--font-kr);
    font-size: var(--fz-body);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.faq_item summary::-webkit-details-marker {
    display: none;
}

.faq_item summary span {
    flex: none;
    width: 12px;
    font-family: var(--font-serif);
    font-size: 22px;
    color: #545c48;
}

.faq_item summary::after {
    content: '+';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 300;
    color: #342d29;
}

.faq_item[open] summary::after {
    content: '−';
}

.faq_item p {
    margin: 0;
    padding: 0 56px 26px;
    font-size: var(--fz-small);
    line-height: 1.9;
    color: #5e5a50;
}

/* ---- 스킨 에너지 ---- */
.product_pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.product {
    display: flex;
    gap: 28px;
    align-items: center;
}

.product .placeholder {
    flex: none;
    width: 200px;
    height: 260px;
}

.product_body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product_no {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--fz-eyebrow);
    letter-spacing: 0.16em;
    color: #545c48;
}

.product h3 {
    margin: 0;
    font-family: var(--font-kr);
    font-size: var(--fz-h);
    font-weight: 500;
}

.product_body p {
    margin: 0;
    font-size: var(--fz-small);
    line-height: 1.9;
    color: #5e5a50;
}

.product_body .product_use {
    color: #342d29;
}

.product_use b {
    font-weight: 700;
}

.chips_bar,
.chips[role='tablist'] {
    gap: 0;
    border-bottom: 1px solid #d5d4c6;
}

.chips[role='tablist'] a.chip {
    flex: 1 1 0;
    justify-content: center;
    height: 56px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    font-size: var(--fz-body);
    color: #342d29;
    opacity: 0.6;
}

.chips[role='tablist'] a.chip.is-on {
    border-bottom-color: #545c48;
    background: none;
    color: #342d29;
    font-weight: 500;
    opacity: 1;
}

.booster {
    display: flex;
    gap: 64px;
    align-items: flex-start;
}

.booster .placeholder {
    flex: none;
    width: 420px;
    height: 420px;
}

.booster_body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.booster_body h3 {
    margin: 0;
    font-family: var(--font-kr);
    font-size: var(--fz-h);
    font-weight: 500;
}

/* 세 개의 원이 겹친 병행 계획 도식 */
.venn {
    position: relative;
    flex: none;
    width: 560px;
    max-width: 100%;
    aspect-ratio: 560 / 540;
}

.venn_circle {
    position: absolute;
    width: 60.7%;
    aspect-ratio: 1;
    border: 1px solid #8b9280;
    border-radius: 999px;
    box-sizing: border-box;
}

.venn_a { left: 0; top: 0; }
.venn_b { left: 37.7%; top: 0; }
.venn_c { left: 18.75%; top: 34.1%; }

.venn_label {
    position: absolute;
    width: 32%;
    margin: 0;
    text-align: center;
    font-size: var(--fz-lead);
    line-height: 1.5;
    color: #342d29;
}

.venn_label small {
    display: block;
    font-size: var(--fz-cap);
    color: #5e5a50;
}

.venn_label_a { left: 5.9%; top: 21.7%; }
.venn_label_b { left: 60.4%; top: 21.7%; }
.venn_label_c { left: 33%; top: 70.7%; }

.venn_core {
    position: absolute;
    left: 43%;
    top: 36.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12.1%;
    aspect-ratio: 1;
    border-radius: 999px;
    background: #342d29;
    font-family: var(--font-serif);
    font-size: 20px;
    letter-spacing: 0.08em;
    color: #f3f2e9;
}

/* ---- 레이저·콜라겐 ---- */
.subnav_section {
    padding: 24px 0;
    background: #f3f2e9;
    border-bottom: 1px solid #d5d4c6;
}

.device {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.device_media {
    flex: none;
    width: 480px;
}

.device_media .placeholder {
    aspect-ratio: 1;
}

.device_body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.package {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px 44px;
    background: #f3f2e9;
}

.package_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.package_head h3 {
    margin: 0;
    font-family: var(--font-kr);
    font-size: var(--fz-h);
    font-weight: 500;
}

/* ---- 스토리 / 전후사진 / 상담 / 로그인 ---- */
.page_top_short {
    min-height: 240px;
}

.list_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 48px;
}

.search {
    position: relative;
    width: 360px;
    max-width: 100%;
}

.search input {
    width: 100%;
    height: 44px;
    padding: 0 48px 0 20px;
    border: 1px solid #d5d4c6;
    border-radius: 999px;
    background: #f3f2e9;
    font-family: var(--font-kr);
    font-size: var(--fz-small);
    color: #342d29;
    box-sizing: border-box;
}

.search input:focus {
    border-color: #545c48;
    outline: 0;
}

.search button {
    position: absolute;
    right: 6px;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: none;
    color: #342d29;
    transform: translateY(-50%);
    cursor: pointer;
}

.post_grid,
.case_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
}

a.post,
a.case {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

.post .placeholder {
    width: 100%;
    height: 260px;
    transition: opacity 0.3s;
}

.post:hover .placeholder {
    opacity: 0.8;
}

.post_cat {
    margin: 0;
    font-size: var(--fz-cap);
    color: #545c48;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 64px;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--fz-small);
    color: #342d29;
    text-decoration: none;
}

.pagination a:hover {
    border-color: #d5d4c6;
}

.pagination a.is-on {
    background: #545c48;
    color: #f3f2e9;
}

/* 칼럼 상세 */
.post_head {
    padding-bottom: 40px !important;
}

.post_head_inner,
.post_body_inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 860px;
}

.post_title {
    margin: 0;
    font-family: var(--font-kr);
    font-size: var(--fz-h);
    font-weight: 500;
    line-height: 1.4;
}

.post_meta {
    margin: 0;
    font-size: var(--fz-small);
    color: #5e5a50;
}

.post_cover {
    height: 440px;
}

.post_figure {
    height: 320px;
}

.post_nav_section {
    padding: 0 0 80px;
    background: #f3f2e9;
}

.post_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 860px;
    padding-top: 32px;
    border-top: 1px solid #d5d4c6;
}

.post_nav_link {
    font-size: var(--fz-small);
    color: #342d29;
    text-decoration: none;
}

/* 전후사진 */
.locked {
    position: relative;
}

.locked_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    filter: blur(6px);
    opacity: 0.7;
}

.locked_grid .placeholder {
    height: 320px;
}

.locked_card {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: min(520px, calc(100% - 32px));
    padding: 48px 40px;
    box-sizing: border-box;
    background: rgba(243, 242, 233, 0.96);
    box-shadow: 0 24px 60px -30px rgba(52, 45, 41, 0.45);
    text-align: center;
    transform: translate(-50%, -50%);
}

.case_photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.case_photos .placeholder {
    height: 260px;
}

.case_photos_large .placeholder {
    height: 520px;
}

.case_title,
.case_meta {
    margin: 0;
    font-size: var(--fz-body);
    line-height: 1.7;
}

.case_meta {
    font-size: var(--fz-small);
    color: #5e5a50;
}

.case_more {
    font-size: var(--fz-small);
    color: #545c48;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.case_head > .inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.split_title {
    flex: none;
    width: 380px;
    margin: 0;
}

.split > .spec_list {
    flex: 1 1 0;
    min-width: 0;
}

/* 상담 신청 폼 */
.form_inner {
    max-width: 760px;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.form_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form_field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.form_label {
    padding: 0;
    font-size: var(--fz-small);
    font-weight: 500;
    color: #342d29;
}

.req {
    color: #b0432a;
}

.form_input {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border: 1px solid #d5d4c6;
    border-radius: 4px;
    background: #f3f2e9;
    font-family: var(--font-kr);
    font-size: var(--fz-body);
    color: #342d29;
    box-sizing: border-box;
}

.form_input:focus {
    border-color: #545c48;
    outline: 0;
}

.form_textarea {
    height: 160px;
    padding: 14px 18px;
    resize: vertical;
    line-height: 1.7;
}

.form_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.form_chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form_chip span {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border: 1px solid #d5d4c6;
    border-radius: 999px;
    background: #f3f2e9;
    font-size: var(--fz-small);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.form_chip input:checked + span {
    border-color: #545c48;
    background: #545c48;
    color: #f3f2e9;
}

.form_chip input:focus-visible + span {
    outline: 2px solid #545c48;
    outline-offset: 2px;
}

.form_agree {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fz-small);
    color: #5e5a50;
}

.form_agree input {
    width: 18px;
    height: 18px;
    accent-color: #545c48;
}

.form_agree_link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.form_error {
    margin: 0;
    font-size: var(--fz-small);
    color: #b0432a;
}

.form_submit {
    align-self: center;
}

.form_result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 56px 24px;
    text-align: center;
}

.form[hidden],
.form_result[hidden],
.form_error[hidden] {
    display: none;
}

/* 로그인 */
.login_section {
    display: flex;
    align-items: center;
    min-height: 640px;
}

.login_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: min(520px, 100%);
    margin: 0 auto;
    padding: 56px 40px;
    box-sizing: border-box;
    background: #f3f2e9;
    text-align: center;
}

.login_logo img {
    display: block;
    width: auto;
    height: 96px;
}

/* ==========================================================
   5. 반응형 — main.css 와 같은 구간(≤1080 태블릿 · ≤720 모바일)
   ========================================================== */
@media (max-width: 1080px) {
    .sub {
        --sub-pad: 88px;
    }

    .page_hero {
        height: auto;
        min-height: 560px;
        padding: 0;
    }

    .page_hero_title,
    .page_top_title {
        font-size: clamp(40px, 7.5vw, 56px);
    }

    .page_hero_lead {
        font-size: 18px;
    }

    .sub_light {
        padding-top: 72px;
    }

    .page_top {
        min-height: 240px;
        padding: 56px 0;
    }

    .display_title {
        font-size: clamp(40px, 8vw, 56px);
    }

    .sub .section > .inner > * + * {
        margin-top: 36px;
    }

    .sub .section > .inner.split > * + *,
    .sub .section > .inner.device > * + * {
        margin-top: 0;
    }

    /* 좌우 2단 → 위아래 */
    .split,
    .split_top,
    .face_map,
    .process,
    .device,
    .booster {
        flex-direction: column;
        align-items: stretch;
        gap: 44px;
    }

    .split_media,
    .split_media_photo,
    .split_media_wide,
    .device_media,
    .recovery,
    .booster .placeholder {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    .split_text,
    .split_text_narrow,
    .split_text_note,
    .process_head,
    .split_title {
        flex: none;
        width: 100%;
    }

    .standard_art_sm,
    .venn {
        width: min(520px, 100%);
        margin: 0 auto;
    }

    .booster .placeholder {
        height: auto;
        aspect-ratio: 1;
    }

    .device_reverse {
        flex-direction: column-reverse;
    }

    .point_grid,
    .trust_grid,
    .method_grid,
    .product_pair {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .split_media_photo img,
    .split_media_doctor img {
        height: auto;
        aspect-ratio: 550 / 600;
    }

    .note_photo img {
        height: auto;
        aspect-ratio: 450 / 539;
    }

    .face_map_art {
        width: min(520px, 100%);
        margin: 0 auto;
    }

    .process_list {
        padding-left: 44px;
    }

    .process_list li::before {
        left: -44px;
    }

    .package_head {
        flex-direction: column;
        align-items: flex-start;
    }

    .post_grid,
    .case_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
    }

    .list_bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search {
        width: 100%;
    }

    .locked_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .locked_grid .placeholder {
        height: 240px;
    }

    .case_photos_large .placeholder {
        height: 360px;
    }

}

@media (max-width: 720px) {
    .sub {
        --sub-pad: 64px;
    }

    .page_hero {
        min-height: 480px;
        padding-top: 0;
    }

    .sub_light {
        padding-top: 64px;
    }

    .page_hero_copy {
        gap: 18px;
    }

    .page_hero_title,
    .page_top_title {
        font-size: clamp(32px, 10vw, 42px);
    }

    .page_hero_lead {
        font-size: 16px;
    }

    .page_top {
        min-height: 200px;
        padding: 40px 0;
    }

    .page_top .section_head {
        padding: 0 20px;
    }

    .display_title {
        font-size: clamp(34px, 11vw, 44px);
    }

    .split,
    .split_top,
    .face_map,
    .process,
    .device,
    .booster {
        gap: 32px;
    }

    .split_text {
        gap: 16px;
    }

    .signature em {
        font-size: 24px;
    }

    .point {
        padding: 24px 20px 24px;
    }

    .point_num {
        font-size: 32px;
    }

    .qa {
        padding: 24px 0;
    }

    .qa_q,
    .qa_a {
        gap: 12px;
    }

    .qa_a span {
        width: 30px;
    }

    .trust {
        padding: 24px 20px;
    }

    .spec_row {
        flex-direction: column;
        gap: 6px;
        padding: 14px 0;
    }

    .spec_row dt,
    .spec_list_card .spec_row dt {
        width: auto;
    }

    .area_list li {
        gap: 16px;
        padding: 22px 0;
    }

    .area_num {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .method {
        padding: 22px;
    }

    .method_desc {
        min-height: 0;
    }

    .recovery {
        padding: 24px 20px;
    }

    .recovery_head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .faq_item summary {
        min-height: 64px;
        gap: 14px;
        padding: 14px 52px 14px 16px;
        line-height: 1.5;
    }

    .faq_item summary::after {
        right: 16px;
    }

    .faq_item p {
        padding: 0 16px 22px 42px;
    }

    .notice {
        padding: 24px 20px;
    }

    .product {
        flex-direction: column;
        align-items: stretch;
    }

    .product .placeholder {
        width: 100%;
        height: 220px;
    }

    .chips[role='tablist'] a.chip {
        height: 48px;
        padding: 0 6px;
        font-size: var(--fz-small);
        text-align: center;
    }

    .package {
        padding: 28px 20px;
    }

    .post_grid,
    .case_grid {
        grid-template-columns: 1fr;
    }

    .post .placeholder {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .case_photos .placeholder {
        height: 200px;
    }

    .case_photos_large {
        grid-template-columns: 1fr;
    }

    .case_photos_large .placeholder {
        height: 280px;
    }

    .post_cover {
        height: 260px;
    }

    .post_figure {
        height: 200px;
    }

    .post_nav {
        gap: 12px;
    }

    .locked_grid {
        grid-template-columns: 1fr 1fr;
    }

    .locked_grid .placeholder {
        height: 160px;
    }

    .locked_card {
        padding: 32px 20px;
    }

    .form_row {
        grid-template-columns: 1fr;
    }

    .form_result {
        padding: 40px 0;
    }

    .login_section {
        min-height: 0;
    }

    .login_card {
        padding: 40px 20px;
    }

}

/* ---- 레이저·콜라겐: 시안 기준 보정 ---- */
.subnav_section .chips {
    justify-content: center;
    gap: 16px;
}

.subnav_section a.chip {
    height: 50px;
    padding: 0 28px;
}

.subnav_section a.chip.is-on {
    height: 48px;
    margin-top: 1px;
}

.device {
    gap: 96px;
    align-items: center;
}

.device_media {
    width: 520px;
}

.device_photo {
    position: relative;
    height: 640px;
    overflow: hidden;
}

.device_photo img {
    position: absolute;
    display: block;
    max-width: none;
}

.device_photo_coolphase img {
    left: 6.54%;
    top: 0;
    width: 86.98%;
    height: 100%;
}

.device_photo_liftera img {
    left: 28.5%;
    top: 11.56%;
    width: 43.02%;
    height: 76.72%;
}

.device_media .placeholder {
    aspect-ratio: auto;
    height: 640px;
    background: #d8d8ca;
}

.device_body .sub_title {
    font-size: 34px;
    letter-spacing: -0.01em;
}

.section_dark .section_head .eyebrow,
.section_dark .section_head .desc {
    color: #eef0e2;
}

.section_dark .section_title {
    color: #f3f2e9;
}

.package_wide {
    gap: 28px;
    padding: 48px 56px;
    border-radius: 24px;
}

.package_wide .package_head h3 {
    font-size: 24px;
    letter-spacing: -0.01em;
}

.package_wide .footnote {
    text-align: left;
    font-size: 13px;
}

.spec_list_2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
}

.notice_plain .notice {
    background: transparent;
}

@media (max-width: 1080px) {
    .device_media {
        width: 100%;
    }

    .device_media .placeholder {
        height: auto;
        aspect-ratio: 520 / 560;
    }

    .device_photo {
        height: auto;
        aspect-ratio: 520 / 640;
    }

    .spec_list_2col {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 720px) {
    .package_wide {
        padding: 32px 22px;
    }

    .subnav_section .chips {
        gap: 8px;
    }

    .subnav_section a.chip,
    .subnav_section a.chip.is-on {
        height: 44px;
        margin-top: 0;
        padding: 0 18px;
    }

    .device_body .sub_title {
        font-size: 28px;
    }
}

/* ---- 소개 페이지: 시안(Figma 1-47) 섹션 높이 · 열 너비 ---- */
.page_about .section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    box-sizing: border-box;
}

.page_about .section > .inner {
    width: min(1200px, calc(100% - 40px));
}

.page_about #greeting {
    min-height: 900px;
}

.page_about #greeting > .inner {
    width: min(1270px, calc(100% - 40px));
}

.page_about #greeting .split_text {
    flex: none;
    width: 624px;
}

.page_about .signature {
    position: relative;
    display: block;
    width: 624px;
    height: 72px;
    padding: 0;
}

.page_about .signature span {
    position: absolute;
    left: 0;
    top: 31px;
}

.page_about .signature em {
    position: absolute;
    left: 128px;
    top: 7px;
}

.page_about .section:nth-of-type(3) {
    min-height: 680px;
}

.page_about .section_head {
    margin-bottom: 0;
}

.page_about #doctor {
    min-height: 900px;
}

.page_about #doctor > .inner {
    width: min(1330px, calc(100% - 40px));
}

.page_about #doctor .split_text {
    flex: none;
    width: 700px;
    gap: 22px;
}

.page_about .section_dark {
    min-height: 760px;
}

.page_about .section_dark .split_text {
    flex: none;
    width: 620px;
    gap: 26px;
}

.page_about .section_dark .split {
    gap: 80px;
    justify-content: center;
}

.page_about .check_list li {
    padding: 30px 0;
}

.page_about .check_list h3 {
    margin-bottom: 6px;
}

.page_about .section_sage:nth-of-type(6) {
    min-height: 1012px;
}

.page_about .section_sage:nth-of-type(6) > .inner {
    width: min(1317px, calc(100% - 40px));
}

.page_about .section_sage:nth-of-type(6) .split {
    gap: 127px;
}

.page_about .split_text_note {
    width: 450px;
    gap: 38px;
}

/* 사진 아래끝과 마지막 답변 아래 선이 딱 맞도록 사진이 남는 높이를 채웁니다 */
.page_about .section:nth-of-type(6) .split {
    align-items: stretch;
}

.page_about .note_photo {
    flex: 1 1 auto;
    min-height: 539px;
    margin-top: 0;
}

.page_about .note_photo img {
    position: absolute;
    inset: 0;
    height: 100%;
}

.page_about .qa_list {
    flex: none;
    width: 740px;
}

.page_about .section:nth-of-type(7) {
    min-height: 500px;
}

.page_about .section:nth-of-type(7) > .inner {
    width: min(1206px, calc(100% - 40px));
}

.page_about .section:nth-of-type(8) {
    min-height: 664px;
}

@media (max-width: 1080px) {
    .page_about .section {
        min-height: 0 !important;
        padding: var(--sub-pad) 0;
    }

    .page_about .section > .inner,
    .page_about #greeting > .inner,
    .page_about #doctor > .inner,
    .page_about .section_sage:nth-of-type(6) > .inner {
        width: calc(100% - 40px);
    }

    .page_about #greeting .split_text,
    .page_about #doctor .split_text,
    .page_about .section_dark .split_text,
    .page_about .qa_list,
    .page_about .split_text_note,
    .page_about .signature {
        width: 100%;
    }

    .page_about .split_text_note {
        gap: 24px;
    }

    .page_about .note_photo {
        flex: none;
        min-height: 0;
    }

    .page_about .note_photo img {
        position: static;
        height: auto;
    }

}

/* ---- 레이저·콜라겐: 시안(Figma 1-1252) 섹션 높이 ---- */
.page_laser .section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    box-sizing: border-box;
}

.page_laser .subnav_section {
    display: flex;
    align-items: center;
    min-height: 140px;
    padding: 0;
    box-sizing: border-box;
}

.page_laser .subnav_section .inner {
    width: min(1680px, calc(100% - 40px));
}

.page_laser .section:nth-of-type(3),
.page_laser .section:nth-of-type(4) {
    min-height: 900px;
}

.page_laser .section:nth-of-type(5) {
    min-height: 1080px;
}

.page_laser .section:nth-of-type(6) {
    min-height: 1000px;
}

.page_laser .section:nth-of-type(7) {
    min-height: 820px;
}

.page_laser .section:nth-of-type(8) {
    min-height: 560px;
    padding: 80px 0;
}

.page_laser .reservation {
    box-sizing: border-box;
    justify-content: center;
    min-height: 460px;
    padding-top: 60px;
    padding-bottom: 60px;
}

.page_laser .device_body {
    flex: none;
    width: 584px;
}

.page_laser .package_wide {
    width: 100%;
}

@media (max-width: 1080px) {
    .page_laser .section,
    .page_laser .subnav_section {
        min-height: 0 !important;
        padding: var(--sub-pad) 0;
    }

    .page_laser .subnav_section {
        padding: 24px 0;
    }

    .page_laser .device_body {
        width: 100%;
    }

    .page_laser .reservation {
        min-height: 0;
        padding: 88px 32px;
    }
}

/* ---- 칼럼 상세: 시안(Figma 1-1583) ---- */
.page_post .post_head {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0 40px !important;
    box-sizing: border-box;
}

.page_post .post_head_inner,
.page_post .post_body_inner {
    width: min(860px, calc(100% - 40px));
    max-width: 860px;
    gap: 20px;
}

.page_post .post_body {
    min-height: 1400px;
    padding: 0;
    align-items: flex-start;
    justify-content: center;
}

.page_post .post_body_inner {
    gap: 36px;
    padding-top: 30px;
    border-top: 1px solid #d5d4c6;
}

.page_post .post_cover {
    height: 480px;
}

.page_post .post_figure {
    height: 360px;
}

.skeleton {
    height: 14px;
    border-radius: 4px;
    background: #efebe1;
}

.page_post .post_nav_section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 0;
}

.page_post .post_nav {
    width: min(860px, calc(100% - 40px));
    padding: 28px 0;
    border-bottom: 1px solid #342d29;
    border-top-color: #342d29;
}

@media (max-width: 1080px) {
    .page_post .post_head,
    .page_post .post_body,
    .page_post .post_nav_section {
        min-height: 0;
    }

    .page_post .post_body {
        padding-bottom: 64px;
    }

    .page_post .post_cover {
        height: 300px;
    }

    .page_post .post_figure {
        height: 240px;
    }
}

/* ---- 전후사진 상세 · 목록 (Figma 1-361, 1-463) ---- */
.page_case .case_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 72px 0 40px;
    box-sizing: border-box;
}

.page_case .case_head > .inner {
    gap: 28px;
}

.page_case .case_photos_large {
    width: 1208px;
    max-width: calc(100% + 8px);
    margin: 0 -4px;
    grid-template-columns: repeat(2, minmax(0, 600px));
}

.page_case .case_photos_large .placeholder {
    height: 620px;
}

.page_case .case_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 715px;
    padding: 40px 0 80px;
    box-sizing: border-box;
    background: #f3f2e9;
}

.page_case .case_info .split {
    gap: 80px;
}

.page_case .case_info .split_title {
    width: 360px;
}

.page_case .case_info .notice_card {
    margin-top: 48px;
}

.page_top_tall {
    min-height: 420px;
}

.page_case_list .chips {
    justify-content: center;
    gap: 10px;
    scroll-margin-top: 120px; /* #caseList 이동 시 고정 헤더에 가리지 않게 */
}

.page_case_list a.chip {
    height: 42px;
    padding: 0 22px;
}

.page_case_list .section {
    min-height: 1260px;
    padding: 72px 0;
    box-sizing: border-box;
}

.page_case_list .case_grid {
    gap: 56px 32px;
}

.page_case_list .case_photos {
    gap: 4px;
}

.page_case .case_more {
    border-bottom: 1px solid #342d29;
    color: #342d29;
    text-decoration: none;
}

.empty_note {
    margin: 0;
    padding: 24px;
    border: 1px dashed #d5d4c6;
    border-radius: 16px;
    font-size: var(--fz-small);
    color: #5e5a50;
    text-align: center;
}

/* ---- 전후사진 (로그인 전) Figma 1-308 ---- */
.page_locked .page_top_short {
    min-height: 300px;
}

.page_locked .section {
    align-items: flex-start;
    min-height: 900px;
    padding: 0;
}

.page_locked .locked_grid {
    gap: 28px;
    padding: 80px 0;
    filter: none;
    opacity: 0.55;
}

.page_locked .locked_grid .placeholder {
    height: 300px;
    border-radius: 12px;
}

.page_locked .locked_card {
    top: 247px;
    gap: 18px;
    width: min(632px, calc(100% - 32px));
    padding: 56px 56px 48px;
    border-radius: 28px;
    background: #f3f2e9;
    box-shadow: 0 24px 30px rgba(52, 45, 41, 0.16);
    transform: translateX(-50%);
}

@media (max-width: 1080px) {
    .page_case .case_head,
    .page_case .case_info,
    .page_case_list .section,
    .page_locked .section {
        min-height: 0;
    }

    .page_case .case_photos_large {
        width: 100%;
        margin: 0;
    }

    .page_case .case_photos_large .placeholder {
        height: 360px;
    }

    .page_case .case_info .split_title {
        width: 100%;
    }

    .page_locked .section {
        padding: 64px 0;
    }

    .page_locked .locked_card {
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 40px 28px;
    }
}

/* ---- 상담 신청 (Figma 1-650) ---- */
.page_contact .page_top {
    min-height: 300px;
}

.page_contact .form_section {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 917px;
    padding: 0 0 50px;
    box-sizing: border-box;
}

.page_contact .form_inner {
    width: min(732px, calc(100% - 40px));
    max-width: 732px;
}

.page_contact .form {
    gap: 24px;
    padding: 56px;
    border-radius: 28px;
    background: #f3f2e9;
}

.page_contact .form_row {
    gap: 20px;
}

.page_contact .form_field {
    gap: 8px;
}

.page_contact .form_label {
    font-size: 13px;
    font-weight: 400;
}

.page_contact .req {
    color: #8a5a44;
}

.page_contact .form_input {
    height: 54px;
    border-radius: 10px;
}

.page_contact .form_input::placeholder {
    color: #757575;
}

.page_contact .form_textarea {
    height: 174px;
    padding: 16px 18px;
}

.page_contact .form_chips {
    gap: 10px 10px;
}

.page_contact .form_chip span {
    height: 42px;
    padding: 0 18px;
    font-size: 13px;
}

.page_contact .form_chip input:checked + span {
    border-color: #545c48;
    background: #545c48;
    color: #f3f2e9;
}

.page_contact .form_error {
    font-size: 12px;
    color: #8a5a44;
}

.page_contact .form_submit {
    align-self: stretch;
    width: 100%;
}

.page_contact .form_agree {
    font-size: 13px;
    color: #342d29;
}

.page_contact .form_agree_link {
    color: #5e5a50;
}

.page_contact .form_result {
    gap: 18px;
    padding: 56px 48px;
    border: 1px solid #d5d4c6;
    border-radius: 28px;
    background: #f3f2e9;
}

.page_contact .form_result .sub_title {
    font-size: 22px;
    line-height: 1.5;
}

.page_contact .form_result_error {
    border-style: dashed;
    border-radius: 16px;
    padding: 24px;
}

@media (max-width: 720px) {
    .page_contact .form {
        padding: 32px 22px;
        border-radius: 20px;
    }

    .page_contact .form_row {
        grid-template-columns: 1fr;
    }

    .page_contact .form_section {
        min-height: 0;
    }
}

/* ---- 스킨 에너지 (Figma 1-1663) ---- */
.page_skin .section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    box-sizing: border-box;
}

/* 섹션별 최소 높이: 섹션 순서(nth-of-type)가 아니라 이름(data-screen-label) 기준 → 섹션을 넣고 빼도 엉뚱한 곳에 높이가 붙지 않음 */
.page_skin .section[data-screen-label="Petit"] { min-height: 900px; }
.page_skin .section[data-screen-label="PetitStandard"] { min-height: 620px; }
.page_skin .section[data-screen-label="Booster"] { min-height: 1180px; }
.page_skin .section[data-screen-label="Combined"] { min-height: 780px; }
.page_skin .section[data-screen-label="FAQ"] { min-height: 820px; }
.page_skin .section[data-screen-label="Notice"] { min-height: 380px; }

/* FILLER & BOTOX 는 아래 OL CLINIC Standard 와 같은 배경이라 한 덩어리처럼: 사이 여백을 줄임 */
.page_skin .fb_section {
    padding: 120px 0 56px;
}

.page_skin .fb_section + .section_dark {
    min-height: 0;
    padding-top: 160px; /* 부위 사진과 "OL CLINIC Standard" 제목 사이 여백 */
    padding-bottom: 120px;
}

.page_skin .reservation {
    box-sizing: border-box;
    justify-content: center;
    min-height: 460px;
    padding-top: 60px;
    padding-bottom: 60px;
}

.inner_wide {
    width: min(1816px, calc(100% - 40px));
}

.page_skin .product_pair {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page_skin .product {
    gap: 32px;
    padding: 28px;
    border-radius: 4px;
    background: #f3f2e9;
}

.page_skin .product .placeholder {
    width: 240px;
    height: 280px;
    border-radius: 2px;
}

.page_skin .product_dark {
    background: #626a55;
}

.page_skin .product_dark .product_no {
    color: #eef0e2;
}

.page_skin .product_dark h3 {
    color: #f3f2e9;
}

.page_skin .product_dark .product_body p {
    color: #efede3;
}

.page_skin .product_dark .product_use {
    color: #f3f2e9;
}

.page_skin .product_body {
    gap: 14px;
}

.booster[hidden] {
    display: none;
}

.page_skin .booster {
    justify-content: center;
}

.page_skin .booster_body {
    flex: 1 1 716px;
    gap: 20px;
}

.page_skin .section_dark .point {
    border-top-color: #eef0e2;
    border-bottom-color: #eef0e2;
}

@media (max-width: 1080px) {
    .page_skin .section,
    .page_skin .reservation {
        min-height: 0 !important;
    }

    .page_skin .section {
        padding: var(--sub-pad) 0;
    }

    .page_skin .reservation {
        padding: 88px 32px;
    }

    .page_skin .product_pair {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .page_skin .product {
        flex-direction: column;
        align-items: stretch;
    }

    .page_skin .product .placeholder {
        width: 100%;
    }
}

/* ---- 실리프팅 (Figma 1-1908) ---- */
.page_thread .section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    box-sizing: border-box;
}

.page_thread .section[data-screen-label="Understanding"] { min-height: 820px; }
.page_thread .section[data-screen-label="Standard"] { min-height: 860px; }
.page_thread .section[data-screen-label="ByArea"] { min-height: 1163px; }
.page_thread .section[data-screen-label="Method"] { min-height: 1080px; }
.page_thread .section[data-screen-label="Process"] { min-height: 680px; padding: 0; }
.page_thread .section[data-screen-label="Recovery"] { min-height: 820px; }
.page_thread .section[data-screen-label="FAQ"] { min-height: 900px; }
.page_thread .section[data-screen-label="Notice"] { min-height: 420px; }

.page_thread .reservation {
    box-sizing: border-box;
    justify-content: center;
    min-height: 460px;
    padding-top: 60px;
    padding-bottom: 60px;
}

.page_thread .section:nth-of-type(2) .split {
    gap: 96px;
}

.page_thread .section:nth-of-type(2) .split_text {
    flex: none;
    width: 520px;
}

.page_thread .split_media_wide {
    width: 560px;
}

.page_thread .split_media_wide .placeholder {
    aspect-ratio: 560 / 600;
}

.page_thread .callout {
    padding: 24px 28px;
    border-left: 0;
    border-radius: 12px;
    background: #e4e4d7;
}

/* 세 개의 큰 원 (구조 · 방향 · 균형) */
.page_thread .section_dark .split {
    gap: 74px;
}

.venn_lg {
    width: 540px;
    aspect-ratio: 600 / 570;
}

.venn_lg .venn_circle {
    width: 61.67%;
    border-color: rgba(243, 242, 233, 0.75);
}

.venn_lg .venn_a { left: 0; top: 0; }
.venn_lg .venn_b { left: 38.17%; top: 0; }
.venn_lg .venn_c { left: 19.17%; top: 35.09%; }

.venn_lg .venn_label {
    color: #f3f2e9;
    font-size: 17px;
}

.venn_lg .venn_label_a { left: 6.3%; top: 22.6%; }
.venn_lg .venn_label_b { left: 61.7%; top: 22.6%; }
.venn_lg .venn_label_c { left: 34%; top: 73.3%; }

.venn_lg .venn_core {
    left: 44.33%;
    top: 38.25%;
    width: 11.33%;
    background: #f3f2e9;
    color: #342d29;
}

.page_thread .section_dark .split_text {
    flex: none;
    width: 528px;
}

/* 부위별 얼굴 지도 */
.page_thread .face_map {
    gap: 72px;
}

.page_thread .face_map_art {
    width: 520px;
    aspect-ratio: 520 / 660;
}

.page_thread .area_list {
    flex: none;
    width: 608px;
}

.page_thread .area_list li:first-child {
    border-top-color: #8b9280;
}

.page_thread .footnote {
    margin-top: 48px;
}

/* 실 종류 카드 */
.page_thread .method_grid {
    gap: 20px;
}

.page_thread .method {
    min-height: 650px;
}

.page_thread .spec_list_card .spec_row dt {
    width: 88px;
}

/* 진행 과정: 단색 배경 위에 큰 원호 */
.page_thread .section_forest {
    position: relative;
    overflow: hidden;
    background: #363b2e !important;
}

.page_thread .section_forest::before {
    inset: auto;
    left: calc(50% - 1712px);
    top: -560px;
    width: 1800px;
    height: 1800px;
    border: 1px solid rgba(243, 242, 233, 0.75);
    border-radius: 999px;
    background: none;
    box-sizing: border-box;
}

.page_thread .section_forest > .inner {
    position: static;
    width: 100%;
}

.page_thread .process {
    display: block;
}

.page_thread .process_head {
    position: absolute;
    left: calc(50% - 586px);
    top: 244px;
    width: 360px;
}

.page_thread .process_list {
    position: static;
    padding: 0;
}

.page_thread .process_list::before {
    display: none;
}

.page_thread .process_list li {
    position: absolute;
    width: 520px;
    padding: 0;
}

.page_thread .process_list li::before {
    left: -49px;
    top: 15px;
}

.page_thread .process_list li:nth-child(1) { left: calc(50% + 85px); top: 49px; }
.page_thread .process_list li:nth-child(2) { left: calc(50% + 119px); top: 218px; }
.page_thread .process_list li:nth-child(3) { left: calc(50% + 119px); top: 406px; }
.page_thread .process_list li:nth-child(4) { left: calc(50% + 85px); top: 575px; }

/* 회복 개념도 */
.page_thread .recovery {
    background: #f3f2e9;
}

@media (max-width: 1080px) {
    .page_thread .section,
    .page_thread .reservation {
        min-height: 0 !important;
    }

    .page_thread .section {
        padding: var(--sub-pad) 0;
    }

    .page_thread .reservation {
        padding: 88px 32px;
    }

    .page_thread .section:nth-of-type(2) .split_text,
    .page_thread .section_dark .split_text,
    .page_thread .split_media_wide,
    .page_thread .area_list {
        width: 100%;
    }

    .venn_lg {
        width: min(470px, 100%);
        margin: 0 auto;
    }

    .page_thread .method {
        min-height: 0;
    }

    .page_thread .section_forest::before {
        display: none;
    }

    .page_thread .section_forest > .inner {
        position: relative;
        width: calc(100% - 40px);
    }

    .page_thread .process {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .page_thread .process_head {
        position: static;
        width: 100%;
    }

    .page_thread .process_list {
        position: relative;
        padding: 0 0 0 48px;
    }

    .page_thread .process_list::before {
        display: block;
    }

    .page_thread .process_list li {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: auto;
        padding: 18px 0;
    }

    .page_thread .process_list li::before {
        left: -48px;
        top: 24px;
    }

    /* PC 에서 [data-screen-label="Process"] { padding: 0 } 로 잡아 둔 값이 모바일 여백을 덮어쓰지 않도록 같은 우선순위로 지정 */
    .page_thread .section.section_forest[data-screen-label="Process"] {
        padding: var(--sub-pad) 0;
    }
}

.page_post .reservation {
    box-sizing: border-box;
    justify-content: center;
    min-height: 460px;
    padding-top: 60px;
    padding-bottom: 60px;
}

@media (max-width: 1080px) {
    .page_post .reservation {
        min-height: 0;
        padding: 88px 32px;
    }
}

/* ---- 카카오 로그인 (Figma 1-1542): 안내 창을 화면 정가운데에 ---- */
.page_login .login_section {
    justify-content: center;
    min-height: max(calc(100svh - 96px), 700px);
    padding: 40px 0;
    box-sizing: border-box;
}

.page_login .login_section > .inner {
    display: flex;
    justify-content: center;
}

.page_login .login_card {
    width: min(558px, 100%);
    margin: 0;
    padding: 56px 48px;
    border: 1px solid #d5d4c6;
    border-radius: 28px;
    box-shadow: 0 24px 60px -30px rgba(52, 45, 41, 0.35);
}

.page_login .login_card_error {
    gap: 18px;
    opacity: 0.9;
}

.page_login .login_card .sub_title {
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.page_login .login_logo img {
    height: 59px;
}

@media (max-width: 720px) {
    .page_login .login_card {
        padding: 40px 24px;
        border-radius: 20px;
    }
}

/* 안내 창이 화면(헤더 포함) 정가운데에 오도록 헤더 높이만큼 비우지 않습니다 */
.page_login.sub_light {
    padding-top: 0;
}

.page_login .login_section {
    min-height: max(100svh, 760px);
    padding: 0;
}

/* ---- 칼럼 (관리자에서 올린 글) ---- */
img.post_thumb {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.post_name {
    font-family: var(--font-kr);
    font-size: var(--fz-body);
    font-weight: 500;
    line-height: 1.5;
}

.post_desc {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--fz-small);
    line-height: 1.7;
    color: #5e5a50;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.post_date {
    font-size: 12px;
    color: #8b9280;
}

.page_post img.post_cover {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
}

.page_post .post_body_live {
    min-height: 0;
    padding: 0 0 100px;
}

.post_content {
    font-size: var(--fz-body);
    line-height: 1.9;
    color: #342d29;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.post_content > * + * {
    margin-top: 1.1em;
}

.post_content h1,
.post_content h2,
.post_content h3,
.post_content h4 {
    margin: 1.8em 0 0.6em;
    font-family: var(--font-kr);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.post_content h1 { font-size: 28px; }
.post_content h2 { font-size: 24px; }
.post_content h3 { font-size: 20px; }
.post_content h4 { font-size: 18px; }

.post_content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.4em auto;
}

.post_content a {
    color: #545c48;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.post_content ul,
.post_content ol {
    padding-left: 1.4em;
}

/* 핵심요약 · 왼쪽 바(인용): 배경 없이 회색 바만 */
.post_content blockquote {
    padding: 4px 0 4px 20px;
    border-left: 4px solid #cfcfcf;
    background: none;
    color: #6b6760;
    font-style: italic;
}

.post_content table {
    width: 100%;
    border-collapse: collapse;
}

.post_content th,
.post_content td {
    padding: 10px 12px;
    border: 1px solid #d5d4c6;
    text-align: left;
}

.post_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.post_tags span {
    font-size: var(--fz-cap);
    color: #545c48;
}

.post_nav_link.is-off {
    opacity: 0.35;
}

@media (max-width: 1080px) {
    .page_post img.post_cover {
        height: 300px;
    }

    img.post_thumb {
        height: 220px;
    }
}

/* ---- 전후사진 (관리자에서 올린 사진) ---- */
/* 전후 사진은 사진마다 비율이 달라서, 같은 크기 틀에 맞춰 나란히 보이게 한다 */
.case_photos > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* 전후사진 목록: 사진 칸은 모두 같은 크기로 꽉 채움.
   칸 비율(11:8 ≈ 1.37)은 실제 사례 사진들의 가운데값에 맞춰 잘리는 양을 최소로 했습니다.
   어느 쪽을 남길지(왼쪽/가운데/오른쪽 기준)는 관리자 사례 수정에서 사진마다 고릅니다. */
.case_photos.case_photos_fit {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.case_photos_fit .case_ph {
    display: block;
    overflow: hidden;
    aspect-ratio: 11 / 8;
    background: #e8e6dc;
}

.case_photos_fit .case_ph > img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.case_photos_fit > .placeholder {
    aspect-ratio: 11 / 8;
}

.case_photos:not(.case_photos_large) .placeholder {
    height: auto;
    aspect-ratio: 4 / 3;
}

.case_photo {
    position: relative;
    margin: 0;
}

.case_photo img {
    display: block;
    width: 100%;
    height: 620px;
    object-fit: cover;
}

.case_photo figcaption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(52, 45, 41, 0.7);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #f3f2e9;
}

@media (max-width: 1080px) {
    .case_photo img {
        height: 360px;
    }
}

/* 사례 상세: 사진은 자르지 않고 여백 없이 원본 비율 그대로 보여 줍니다.
   PC 에서는 main.js 가 사진 비율만큼 칸 너비를 나눠 BEFORE/AFTER 높이를 똑같이 맞춥니다 */
.page_case .case_photo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (min-width: 1081px) {
    .page_case .case_photos_large {
        display: flex;
        align-items: flex-start;
    }

    .page_case .case_photos_large > * {
        flex: 1.5 1 0;
        min-width: 0;
    }
}

/* 관심 시술: fieldset 의 legend 는 flex 간격이 적용되지 않아 직접 띄웁니다 */
.page_contact legend.form_label {
    display: block;
    margin-bottom: 10px;
}

/* 개인정보 수집·이용 내용 보기: 가운데 팝업 */
button.form_agree_link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal[hidden] {
    display: none;
}

.modal_overlay {
    position: absolute;
    inset: 0;
    background: rgba(52, 45, 41, 0.45);
}

.modal_card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: min(520px, 100%);
    max-height: 86vh;
    padding: 40px 36px 32px;
    box-sizing: border-box;
    border-radius: 24px;
    background: #f3f2e9;
    box-shadow: 0 24px 60px -20px rgba(52, 45, 41, 0.5);
}

.modal_title {
    margin: 0;
    font-family: var(--font-kr);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #342d29;
}

.modal_body {
    overflow-y: auto;
    font-size: var(--fz-small);
    line-height: 1.8;
    color: #5e5a50;
}

.modal_body p {
    margin: 0;
}

.modal_body dl {
    margin: 16px 0;
    border-top: 1px solid #545c48;
}

.modal_body dl > div {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #d5d4c6;
}

.modal_body dt {
    flex: none;
    width: 72px;
    color: #342d29;
    font-weight: 500;
}

.modal_body dd {
    margin: 0;
}

.modal_note {
    font-size: var(--fz-cap);
}

.modal_ok {
    align-self: center;
    min-width: 140px;
}

@media (max-width: 720px) {
    .modal_card {
        padding: 32px 22px 24px;
        border-radius: 20px;
    }
}

/* 상담 신청 버튼: 이름·연락처·동의를 모두 채우면 #545C48 로 바뀝니다 */
.page_contact .form_submit {
    --btn-fill: #d5d4c6;
    --btn-hover-color: #8b9280;
    border-color: #d5d4c6;
    background-color: #d5d4c6;
    color: #8b9280;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.page_contact .form_submit.is-ready {
    --btn-fill: #3f4636;
    --btn-hover-color: #f3f2e9;
    border-color: #545c48;
    background-color: #545c48;
    color: #f3f2e9;
}

/* 개인정보 팝업 확인 버튼 · 상담 신청 버튼(채웠을 때): #545C48 배경 + 흰색 글자 */
.modal_ok {
    --btn-fill: #3f4636;
    --btn-hover-color: #ffffff;
    border-color: #545c48;
    background-color: #545c48;
    color: #ffffff;
}

.page_contact .form_submit.is-ready {
    color: #ffffff;
}

/* 문의 내용: 높이 고정 (길어지면 안에서 스크롤) */
.page_contact .form_textarea {
    height: 174px;
    min-height: 174px;
    max-height: 174px;
    resize: none;
    overflow-y: auto;
}

.recovery_note {
    font-size: var(--fz-cap);
    color: #5e5a50;
}

/* 패키지: 확인 전 표를 없앴으므로 상담 버튼만 가운데에 둡니다 */
.package_wide .package_head {
    justify-content: center;
}

/* ---- 실리프팅: 시안(Figma 1-1908) 레이아웃 보정 ---- */
.page_thread .section:nth-of-type(2) .split {
    justify-content: center;
}

.page_thread .venn_lg {
    aspect-ratio: 600 / 590;
}

.page_thread .venn_lg .venn_c {
    top: 33.9%;
}

.page_thread .venn_lg .venn_label_a,
.page_thread .venn_lg .venn_label_b {
    top: 21.9%;
}

.page_thread .venn_lg .venn_label_c {
    top: 70.8%;
}

.page_thread .venn_lg .venn_core {
    top: 36.95%;
}

.page_thread .step_list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.page_thread .step_list li {
    gap: 20px;
    padding: 18px 0;
}

.page_thread .step_list li > span {
    width: auto;
}

.page_thread .recovery .footnote {
    margin-top: 0;
}

.page_thread .recovery_steps {
    margin-top: 10px;
}

.page_thread .area_list li {
    min-height: 124px;
    box-sizing: border-box;
}


/* 사례가 하나도 없을 때: 높이를 줄이고 안내 문구를 칸 정중앙에 */
.page_case_list .section.list_empty {
    min-height: 0;
    padding: 72px 0 96px;
}

.page_case_list .list_empty .inner {
    display: flex;
    flex-direction: column;
    min-height: 360px;
}

.page_case_list .list_empty .empty_note {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* 시술 후 주의사항: 소제목과 장비별 그룹 제목 */
.notice_sub {
    margin: -4px 0 6px;
    font-size: var(--fz-body);
    color: #342d29;
}

.notice .notice_group {
    margin: 18px 0 0;
    font-family: var(--font-kr);
    font-size: var(--fz-body);
    font-weight: 500;
    color: #342d29;
}

/* 시술 후 주의사항 (시안): 회색 굵은 제목 + 큰 소제목, 그룹 제목 + 점 목록 */
.notice .notice_title {
    margin: 0;
    font-weight: 700;
    color: #959a8c;
}

.notice .notice_sub {
    margin: -16px 0 0;
    font-family: var(--font-kr);
    font-size: var(--fz-h3);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: #342d29;
}

.notice .notice_group {
    font-weight: 900;
    font-size: var(--fz-small);
    color: #5e5a50;
}

.notice_list {
    margin: 0;
    padding-left: 21px;
    list-style: disc;
}

.notice_list li {
    font-size: var(--fz-small);
    line-height: 1.9;
    color: #5e5a50;
}

/* 패키지 구간: 버튼 · 표 · 안내 문구를 한 단계 키움 */
.package_wide .package_head .btn {
    font-size: 15px;
}

.package_wide .footnote {
    font-size: var(--fz-small);
}

.device_photo_co2 img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 주의사항 제목: 시안 28px / 줄높이 41px */
.notice .notice_title,
.notice .notice_sub {
    font-size: 28px;
    line-height: 41px;
    letter-spacing: -0.18px;
}

.notice .notice_sub {
    margin: -8px 0 0 !important;
}

.notice .notice_group,
.notice_list li {
    line-height: 26.6px;
}

/* 레이저 페이지 예약 띠 (시안 1-1509) */
.sub .reservation {
    gap: 22px;
}

.sub .reservation .eyebrow {
    font-size: 14px;
    letter-spacing: 4.48px;
}

.sub .reservation .reservation_title {
    font-size: 32px;
    line-height: 48px;
    letter-spacing: -0.32px;
}

.sub .reservation .desc {
    font-size: 15px;
    line-height: 28.5px;
}

.sub .reservation .btn {
    height: 52px;
    padding: 0 34px;
    font-size: 14px;
}

@media (max-width: 720px) {
    .notice .notice_title,
    .notice .notice_sub {
        font-size: 20px;
        line-height: 30px;
        letter-spacing: -0.2px;
    }

    .notice .notice_sub {
        margin-top: -6px !important;
    }

    .sub .reservation .reservation_title {
        font-size: 24px;
        line-height: 36px;
        letter-spacing: -0.24px;
    }

    .sub .reservation .eyebrow {
        letter-spacing: 3.2px;
    }

    .sub .reservation .desc {
        font-size: 14px;
        line-height: 24px;
    }

    .notice_list {
        padding-left: 18px;
    }
}

/* 맨 아래 예약 배너: 모든 서브페이지 공통 높이 */
.sub .reservation {
    box-sizing: border-box;
    justify-content: center;
    min-height: 460px;
    padding-top: 60px;
    padding-bottom: 60px;
}

@media (max-width: 1080px) {
    .sub .reservation {
        min-height: 0;
        padding: 88px 32px;
    }
}

/* 소개 하단 (Space & Reservation): 다른 서브페이지 예약 배너와 같은 높이 */
.page_about .about_reserve {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.page_about .about_reserve .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.page_about .about_reserve .inner > * + * {
    margin-top: 0;
}

.page_about .about_reserve .section_head {
    gap: 14px;
}

.page_about .about_reserve .section_title {
    font-size: 28px;
    line-height: 42px;
    letter-spacing: -0.28px;
}

.page_about .about_reserve .desc {
    max-width: 720px;
    font-size: 15px;
    line-height: 28.5px;
}

@media (max-width: 1080px) {
    .page_about .about_reserve {
        min-height: 0 !important;
        padding-top: 88px !important;
        padding-bottom: 88px !important;
    }

    .page_about .about_reserve .section_title {
        font-size: 22px;
        line-height: 33px;
    }
}

.page_about .about_reserve .inner,
.page_about .about_reserve .section_head {
    width: 100%;
    box-sizing: border-box;
}

.page_about .about_reserve .desc {
    width: min(720px, 100%);
}

/* 레이저 패키지 구간 (시안 1-1398) */
.page_laser #package .section_head {
    gap: 14px;
}

.page_laser #package .package_title {
    font-size: 28px;
    line-height: 42px;
    letter-spacing: -0.28px;
}

.page_laser #package .package_title strong {
    font-weight: 700;
}

.page_laser #package .desc {
    max-width: 720px;
    font-size: 15px;
    line-height: 28.5px;
}

.page_laser #package .package_wide {
    gap: 28px;
    padding: 48px 56px;
    border-radius: 24px;
}

.package_name {
    margin: 0;
    font-family: var(--font-kr);
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.26px;
    color: #342d29;
}

.page_laser #package .spec_row dt {
    font-size: 15px;
}

.page_laser #package .footnote {
    font-size: 13px;
    line-height: normal;
}

@media (max-width: 720px) {
    .page_laser #package .package_title {
        font-size: 22px;
        line-height: 33px;
    }

    .page_laser #package .desc {
        font-size: 14px;
        line-height: 24px;
    }

    .page_laser #package .package_wide {
        padding: 32px 22px;
    }

    .package_name {
        font-size: 20px;
        line-height: 30px;
    }
}

.page_laser #package .desc {
    width: min(720px, 100%);
}

/* ---- 스킨 에너지: 제품 사진 묶음 (태블릿 위에 병을 얹은 구성) ---- */
.product_photo,
.booster_photo {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    background: #d8d8ca;
    border-radius: 2px;
}

.product_photo {
    width: 240px;
    height: 280px;
}

.booster_photo {
    width: 420px;
    height: 420px;
}

.skin_art {
    position: relative;
    flex: none;
    width: 240px;
    height: 251.7px;
}

.skin_art_lg {
    width: 300px;
    height: 314.6px;
}

.skin_art_in {
    position: relative;
    width: 240px;
    height: 251.7px;
}

.skin_art_lg .skin_art_in {
    transform: scale(1.25);
    transform-origin: 0 0;
}

.skin_art_in > span {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skin_art_in img {
    display: block;
    max-width: none;
}

.skin_art .art_tablet {
    inset: 0;
    display: block;
    overflow: hidden;
}

.art_tablet img {
    position: absolute;
    top: 6.11%;
    left: 9.76%;
    width: 80.49%;
    height: 92.4%;
}

.skin_art .art_a1 { left: 66.73px; top: 36.88px; width: 118.99px; height: 177.08px; }
.skin_art .art_a2 { left: 42.73px; top: 74.93px; width: 104.58px; height: 151.03px; }
.skin_art .art_b1 { left: 50.93px; top: 18.15px; width: 150.89px; height: 220.27px; }
.skin_art .art_c1 { left: 59.12px; top: 28.1px; width: 121.76px; height: 223.61px; }

.art_c1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.art_a1 > span,
.art_a2 > span,
.art_b1 > span {
    position: relative;
    display: block;
    flex: none;
}

.art_a1 > span { width: 88.73px; height: 162.82px; }
.art_a2 > span { width: 74.91px; height: 137.46px; transform: rotate(13.33deg);overflow: hidden; }
.art_b1 > span { width: 109.64px; height: 201.2px; transform: rotate(12.6deg);}

.art_a1 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art_b1 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.art_a2 img { position: absolute; top: 0.09%; left: 14.55%; width: 72.17%; height: 102.36%; }

@media (max-width: 1080px) {
    .booster_photo {
        width: 100%;
        height: auto;
        padding: 24px 0;
    }

    .page_skin .booster {
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .product_photo {
        width: 100%;
    }
}

/* 1920 시안보다 좁은 화면: 제품 카드는 사진 위, 글 아래로 */
@media (max-width: 1700px) {
    .page_skin .product {
        flex-direction: column;
        align-items: stretch;
        height: auto;
    }

    .product_photo {
        width: 100%;
    }

    .product_body p {
        width: auto;
    }
}

/* 스킨부스터 큰 사진 (리투오 · 레빅스): 300 폭 기준 좌표 */
.skin_art_xl {
    width: 300px;
    height: 314.6px;
}

.skin_art_xl .skin_art_in {
    width: 300px;
    height: 314.6px;
}

.skin_art .art_l1 { left: 35.82px; top: 60.25px; width: 227.72px; height: 193.33px; }
.skin_art .art_r1 { left: 41px; top: 25.32px; width: 235.55px; height: 276.6px; }

.art_l1 > span,
.art_r1 > span {
    position: relative;
    display: block;
    flex: none;
}

.art_l1 > span { width: 200.8px; height: 156.93px; transform: rotate(-11.33deg); overflow: hidden; }
.art_r1 > span { width: 242.85px; height: 189.8px; transform: rotate(78.17deg); }

.art_l1 img { position: absolute; top: -32.84%; left: 0; width: 100%; height: 177.17%; }
.art_r1 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* 리쥬란 · 연어주사(PDRN): 시안 260:57 · 260:66 좌표 (300 폭 기준) */
.skin_art .art_rj { left: 70px; top: 72.32px; width: 154px; height: 184px; }
.skin_art .art_pd { left: 64px; top: 115.32px; width: 166px; height: 101px; }
/* PDLLA(쥬브룩 볼륨) · 바이리즌: 시안 317:33 · 317:40 좌표 (300 폭 기준) */
.skin_art .art_pl { left: 55px; top: 58.32px; width: 189px; height: 217px; }
.skin_art .art_by { left: 51px; top: 52.32px; width: 197px; height: 210px; }
.art_rj img,
.art_pd img,
.art_pl img,
.art_by img { width: 100%; height: 100%; object-fit: contain; }

/* 실리프팅 시술 후 안내 (시안 1-2285): 한 줄 제목 + 점 문장 */
.page_thread .notice .notice_title {
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: -0.18px;
    color: #342d29;
}

.page_thread .notice p {
    font-size: 14px;
    line-height: 26.6px;
}

@media (max-width: 720px) {
    .page_thread .notice .notice_title {
        font-size: 16px;
        line-height: 24px;
    }
}

/* ---- 실리프팅 (시안 1-1908 반영) ---- */
/* 이해 구간 사진 */
.page_thread .split_media_photo {
    width: 560px;
}

.page_thread .split_media_photo img {
    height: 600px;
    object-position: 30% 50%;
}

/* 시술 소개: 3개만 보이고 스크롤하면 더 보임 */
.page_thread .area_list {
    max-height: 520px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #8b9280 transparent;
}

.page_thread .area_list::-webkit-scrollbar {
    width: 6px;
}

.page_thread .area_list::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #8b9280;
}

.page_thread .area_list li.area_sig h3 {
    display: block;
    margin: 0 0 8px;
    line-height: 1.45;
}

.page_thread .area_list .area_em {
    margin: 0 0 10px;
}

/* 실 종류: 4열 카드 */
.page_thread .method_grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.page_thread .method {
    min-height: 0;
}

.method_photo {
    height: 200px;
    overflow: hidden;
}

.method_photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 시술 방법: 접어 두고, 누르면 펼침 */
.method_more {
    margin-top: -6px;
    border-top: 1px solid #d5d4c6;
}

.method_dark .method_more {
    border-top-color: rgba(243, 242, 233, 0.3);
}

.method_more summary {
    position: relative;
    padding: 12px 24px 12px 0;
    font-size: var(--fz-cap);
    cursor: pointer;
    list-style: none;
    color: #5e5a50;
}

.method_dark .method_more summary {
    color: #f3f2e9;
}

.method_more summary::-webkit-details-marker {
    display: none;
}

.method_more summary::after {
    content: '+';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.method_more[open] summary::after {
    content: '−';
}

.method_more p {
    margin: 0 0 6px;
    font-size: var(--fz-cap);
    line-height: 1.6;
    color: #342d29;
}

.method_dark .method_more p {
    color: #f3f2e9;
}

/* 회복 개념도 */
.recovery_plot {
    position: relative;
    width: 461px;
    max-width: 100%;
    height: 301px;
    border-left: 1px solid #d5d4c6;
    border-bottom: 1px solid #d5d4c6;
    box-sizing: border-box;
}

.recovery_plot .recovery_chart {
    position: absolute;
    left: 0;
    top: 0;
    width: 460px;
    height: 300px;
    border: 0;
}

.recovery_label {
    position: absolute;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: #342d29;
    white-space: nowrap;
}

.recovery_label_a { left: 10px; top: 6px; }
.recovery_label_b { left: 51.3%; top: 54.33%; }
.recovery_label_c { left: 82.39%; top: 75.33%; }

@media (max-width: 1500px) {
    .page_thread .method_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page_thread .method_grid {
        grid-template-columns: 1fr;
    }

    .page_thread .area_list {
        max-height: 460px;
    }

    .recovery_plot {
        height: auto;
        aspect-ratio: 461 / 301;
    }

    .recovery_plot .recovery_chart {
        width: 100%;
        height: 100%;
    }

    .recovery_label {
        font-size: 11px;
    }
}

/* 실 종류 구간은 시안처럼 넓게 (4열 · 약 1634px) */
.page_thread .inner_method {
    width: min(1634px, calc(100% - 40px));
}

@media (max-width: 720px) {
    .page_thread .inner_method {
        width: calc(100% - 40px);
    }
}

/* ---- 실리프팅 시안 글자 크기 · 배치 맞춤 ---- */
.page_thread .area_list {
    width: 655px;
    max-height: none;
    overflow: visible;
}

.page_thread .area_list li {
    min-height: 0;
}

.page_thread .area_head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.page_thread .area_list h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
}

.page_thread .area_list .area_em {
    flex: none;
    height: 30px;
    margin: 0;
    font-size: 12px;
}

.page_thread .area_list p {
    font-size: 14px;
    line-height: 26.6px;
}

.page_thread .method h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
}

.page_thread .method_no {
    font-size: 15px;
    letter-spacing: 2.4px;
}

.page_thread .method_desc {
    min-height: 76px;
    font-size: 14px;
    line-height: 25.2px;
}

.page_thread .spec_list_card .spec_row dt,
.page_thread .spec_list_card .spec_row dd {
    font-size: 11.96px;
    line-height: 19.136px;
}

.page_thread .process_head .sub_title {
    font-size: 30px;
    font-weight: 400;
    line-height: 45px;
    letter-spacing: -0.3px;
}

@media (max-width: 1080px) {
    .page_thread .area_list {
        width: 100%;
    }

    .page_thread .process_head .sub_title {
        font-size: 24px;
        line-height: 36px;
    }
}

@media (max-width: 720px) {
    .page_thread .area_head {
        flex-wrap: wrap;
    }

    .page_thread .area_list h3 {
        font-size: 18px;
    }
}

/* 진행 과정 (시안 1-2153): 위치 · 원 색 */
.page_thread .process_list li:nth-child(1) { left: calc(50% + 108px); top: 127px; }
.page_thread .process_list li:nth-child(2) { left: calc(50% + 123px); top: 286px; }
.page_thread .process_list li:nth-child(3) { left: calc(50% + 122px); top: 410px; }
.page_thread .process_list li:nth-child(4) { left: calc(50% + 95px); top: 537px; }

.page_thread .process_list li::before {
    background: rgba(243, 242, 233, 0.2);
}

.page_thread .process_list li:nth-child(1)::before { left: -54px; top: 4px; }
.page_thread .process_list li:nth-child(2)::before { left: -48px; top: 1px; }
.page_thread .process_list li:nth-child(3)::before { left: -47px; top: 4px; }
.page_thread .process_list li:nth-child(4)::before { left: -46px; top: 0; }

.page_thread .process_list span {
    font-size: 14px;
    line-height: 23.8px;
}

.page_thread .process_list strong {
    font-size: 18px;
    font-weight: 500;
}

@media (max-width: 1080px) {
    .page_thread .process_list li:nth-child(n)::before { left: -48px; top: 24px; }
}

.page_thread .process_head .sub_title {
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .page_thread .process_head .sub_title {
        white-space: normal;
    }
}

/* 진행 과정 원: 제공받은 이미지 사용 (off 기본 · on 강조) */
.page_thread .process_list li::before {
    background: url('../images/icon/image_curcle_off.png') center / 100% 100% no-repeat;
}


/* 켜진 원(on)이 부드럽게 나타났다 사라짐 */
.page_thread .process_list li::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: url('../images/icon/image_curcle_on.png') center / 100% 100% no-repeat;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.page_thread .process_list li.is-on::after {
    opacity: 1;
}

.page_thread .process_list li:nth-child(1)::after { left: -54px; top: 4px; }
.page_thread .process_list li:nth-child(2)::after { left: -48px; top: 1px; }
.page_thread .process_list li:nth-child(3)::after { left: -47px; top: 4px; }
.page_thread .process_list li:nth-child(4)::after { left: -46px; top: 0; }

@media (max-width: 1080px) {
    .page_thread .process_list li:nth-child(n)::after { left: -48px; top: 24px; }
}


/* 콜아웃 카드: 사이 구분선 · 포인터 */
.page_thread .callout {
    cursor: pointer;
}

.page_thread .callout + .callout {
    position: relative;
}

/* 두 카드 사이 빈 공간 한가운데에 구분선 */
.page_thread .callout + .callout::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--callout-gap, 20px) / -2);
    height: 1px;
    background: #d5d4c6;
}

.page_thread .split_text {
    --callout-gap: 20px;
    gap: var(--callout-gap);
}

@media (max-width: 720px) {
    .page_thread .split_text {
        --callout-gap: 16px;
    }
}

/* 소개 · 원장 구간 간격 정리 */
.page_about #doctor .doctor_name {
    margin-top: 30px;
}

.page_about #doctor .spec_row {
    padding: 24px 0;
}

.page_about #doctor .spec_row dd {
    line-height: 2;
}

/* 점 목록 (주요 약력) */
.bullet_list {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: disc;
}

.bullet_list li::marker {
    color: #545c48;
}

.bullet_list li + li {
    margin-top: 4px;
}

/* 소개 · 원장: Doctor 와 제목 사이 간격 줄임 */
.page_about #doctor .eyebrow + .sub_title {
    margin-top: -10px;
}

/* 소개 · Why OL Doctor: 그림 칸(500px)은 그대로 두고, 원형을 칸 안에서 더 크게 (메인 비율 x 1.17) */
.page_about .standard_art_sm .standard_ring {
    left: 6%;
    top: 6%;
    width: 88%;
    height: 88%;
}

.page_about .standard_art_sm .standard_ring_in {
    left: 11.97%;
    top: 11.97%;
    width: 76.06%;
}

.page_about .standard_art_sm .standard_hub {
    width: 43.57%;
}

.page_about .standard_art_sm .standard_label_t { left: 50%; top: 26.75%; }
.page_about .standard_art_sm .standard_label_r { left: 68.96%; top: 59.43%; }
.page_about .standard_art_sm .standard_label_l { left: 32.3%; top: 59.22%; }

@supports (width: 1cqw) {
    .page_about .standard_art_sm .standard_dot {
        transform: rotate(var(--start)) translateY(-38.03cqw);
    }
}

@keyframes standard_orbit_sm {
    to {
        transform: rotate(calc(var(--start) + 360deg)) translateY(-38.03cqw);
    }
}

@supports (width: 1cqw) {
    .page_about .standard_art_sm .standard_dot {
        animation-name: standard_orbit_sm;
    }
}

/* 원장 Q&A 아코디언 (클릭하면 답이 열림) */
details.qa {
    display: block;
    padding: 0;
    border-bottom: 1px solid #d5d4c6;
}

details.qa > summary.qa_q {
    position: relative;
    padding: 26px 44px 26px 0;
    cursor: pointer;
    list-style: none;
}

details.qa > summary.qa_q::-webkit-details-marker {
    display: none;
}

details.qa > summary.qa_q::after {
    content: '+';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    color: #8b8672;
}

details.qa[open] > summary.qa_q::after {
    content: '−';
}

details.qa > .qa_a {
    padding: 0 44px 28px 0;
}

details.qa:hover > summary.qa_q {
    color: #545c48;
}

/* 원장 Q&A: 왼쪽 사진 블록 기준으로 아코디언을 세로 중앙에 */
.page_about [data-screen-label="DoctorNote"] .split_top {
    align-items: center;
}

.page_about [data-screen-label="DoctorNote"] .qa_list {
    align-self: center;
    height: auto;
}

/* 원장 Q&A: 제목을 오른쪽 열로 옮기고, 좌우 열 높이를 같게 */
.page_about [data-screen-label="DoctorNote"] .split_top {
    align-items: stretch;
}

.page_about .qa_wrap {
    flex: none;
    width: 740px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.page_about .qa_wrap .qa_list {
    width: 100%;
    align-self: auto;
}

.page_about .qa_wrap .sub_title {
    margin-bottom: 22px;
}

/* 원장 Q&A: 태블릿 · 모바일 */
@media (max-width: 1080px) {
    .page_about .qa_wrap {
        width: 100%;
        gap: 18px;
    }

    .page_about [data-screen-label="DoctorNote"] .split_top {
        align-items: stretch;
    }

    .page_about .qa_wrap .sub_title {
        margin-bottom: 14px;
    }
}

@media (max-width: 720px) {
    .page_about .qa_wrap {
        gap: 14px;
    }

    .page_about .qa_wrap .sub_title {
        margin-bottom: 10px;
    }

    details.qa > summary.qa_q {
        gap: 10px;
        padding: 20px 34px 20px 0;
    }

    details.qa > summary.qa_q::after {
        right: 2px;
        font-size: 22px;
    }

    details.qa > .qa_a {
        gap: 10px;
        padding: 0 8px 22px 0;
    }

    details.qa > .qa_a span,
    details.qa > summary.qa_q span {
        flex: none;
    }

    details.qa > .qa_a,
    details.qa > summary.qa_q {
        min-width: 0;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 720px) {
    details.qa > .qa_a span,
    details.qa > summary.qa_q span {
        width: 42px;
    }
}

/* 소개 · Doctor's Note: 모바일에서만 위아래 열 사이 간격 */
@media (max-width: 720px) {
    .page_about .section_sage:nth-of-type(6) .split {
        gap: 55px;
    }
}


/* 모바일: 원장 이름 · 직함은 두 줄로 */
@media (max-width: 720px) {
    .doctor_name {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .page_about #doctor .doctor_name {
        margin-top: 8px;
        margin-bottom: 4px;
    }
}

/* 모바일: 세로로 쌓인 카드는 선을 하나만 (사이 선 겹침 제거), 위아래 여백 동일 */
@media (max-width: 720px) {
    .point {
        padding: 28px 20px;
    }

    .point:not(:last-child) {
        border-bottom: 0;
    }
}

/* 소개 · 인사말 서명: 태블릿 · 모바일에서는 직함과 서명을 한 줄로 */
@media (max-width: 1080px) {
    .page_about .signature {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px 16px;
        width: auto;
        height: auto;
        padding-top: 12px;
    }

    .page_about .signature span,
    .page_about .signature em {
        position: static;
    }
}

/* 서브 배너 큰 제목: 모바일에서 한 줄에 들어가도록 화면 폭에 맞춰 줄임 */
@media (max-width: 720px) {
    .page_hero_title {
        font-size: min(37.5px, 8.2vw);
        letter-spacing: 0.04em;
        white-space: nowrap;
    }
}

/* 모바일 넘침 보정 */
@media (max-width: 1080px) {
    .page_thread .split_media_photo {
        width: 100%;
    }

    .page_thread .split_media_photo img {
        height: auto;
        aspect-ratio: 560 / 600;
    }
}

@media (max-width: 720px) {
    .page_thread .area_head {
        align-items: flex-start;
    }

    .page_thread .area_list .area_em {
        height: auto;
        padding: 5px 12px;
        line-height: 1.4;
        white-space: normal;
    }

    .page_skin .product,
    .page_skin .product_photo {
        min-width: 0;
    }

    .product_photo,
    .booster_photo {
        overflow: hidden;
    }
}

@media (max-width: 380px) {
    .skin_art {
        transform: scale(0.88);
    }

    .skin_art_lg,
    .skin_art_xl {
        transform: scale(0.8);
    }
}

@media (max-width: 720px) {
    .page_thread .area_list .area_em {
        max-width: 100%;
    }
}

/* 모바일: 세로로 쌓인 두 덩어리 사이 간격을 36px 로 통일 (Doctor's Note 는 따로 55px) */
@media (max-width: 720px) {
    .sub .section:not([data-screen-label="DoctorNote"]) > .inner.split,
    .sub .section > .inner.device,
    .sub .face_map {
        gap: 36px;
    }
}

/* 시술 소개 목록: 스크롤바는 숨기고, 목록 끝까지 내리면 그다음 페이지가 이어서 스크롤됨 */
.page_thread .area_list {
    overscroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.page_thread .area_list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ---- 실리프팅 · 이해 구간 콜아웃 아코디언 ---- */
.page_thread details.callout {
    display: block;
    padding: 0;
    background: transparent;
    border-radius: 12px;
    transition: background-color 0.35s ease;
}

.page_thread details.callout[open] {
    background: #e4e4d7;
}

.page_thread details.callout > summary {
    position: relative;
    padding: 22px 56px 22px 28px;
    font-size: var(--fz-body);
    font-weight: 700;
    line-height: 1.6;
    color: #342d29;
    cursor: pointer;
    list-style: none;
}

.page_thread details.callout > summary::-webkit-details-marker {
    display: none;
}

.page_thread details.callout > summary::after {
    content: '+';
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 300;
    color: #8b8672;
}

.page_thread details.callout[open] > summary::after {
    content: '−';
}

.page_thread details.callout > p {
    margin: 0;
    padding: 0 28px 24px;
    font-size: var(--fz-small);
    line-height: 1.9;
    color: #5e5a50;
}

/* ---- 실리프팅 · Design Standard ---- */
.page_thread .venn_lg .venn_label {
    font-size: 20px;
}

.page_thread .section_dark .split_text .sub_title + .step_list {
    margin-top: 28px;
}

.page_thread .step_list li {
    align-items: center;
}

.page_thread .step_list li:last-child {
    border-bottom: 1px solid rgba(243, 242, 233, 0.3);
}

/* ---- 실리프팅 · 회복 개념도 ---- */
.page_thread .recovery_steps {
    margin-top: 28px;
    gap: 12px;
}

.page_thread .recovery,
.page_thread .recovery_label,
.page_thread .recovery_steps,
.page_thread .recovery_steps span,
.page_thread .recovery_steps strong,
.page_thread .recovery .footnote,
.page_thread .recovery_note {
    font-family: var(--font-sans);
}

/* 콜아웃 아코디언: 칸을 가로 100% 로 잡아서 + 가 오른쪽 끝에 붙고, 사이 선도 꽉 차게 */
.page_thread details.callout {
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

/* Design Standard 목록: 칸 사이 빈 간격(gap)이 선 아래에만 쌓여 아래 여백이 더 커 보이던 것을 없애고, 안쪽 여백으로 위아래 똑같이 */
.page_thread .step_list {
    gap: 0;
}

.page_thread .step_list li {
    padding: 28px 0;
}

/* 회복 개념도 하단: 칸 간격은 원래대로, 제목(시술 직후 …) 아래만 여백 추가 / 안내 문구는 조금 더 아래로 */
.page_thread .recovery_steps p {
    gap: 8px;
}

.page_thread .recovery .footnote {
    margin-top: 16px;
}

/* 시술 소개 줄: 부모에 transform 이 있으면 position:fixed 고정이 어긋나므로, 이 줄은 위로 떠오르는 효과 대신 투명도만 사용 */
.page_thread .face_map.reveal,
.page_thread .face_map.reveal.active {
    transform: none !important;
    will-change: auto;
}

/* 스킨부스터 설명 표: 한 줄만 보이고, 누르면 전체 (오른쪽 끝 + / −) */
.booster .spec_row {
    position: relative;
    padding-right: 44px;
    cursor: pointer;
}

.booster .spec_row dd {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

.booster .spec_row.is-open dd {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.booster .spec_row::after {
    content: '+';
    position: absolute;
    right: 8px;
    top: 14px;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.2;
    color: #8b8672;
}

.booster .spec_row.is-open::after {
    content: '−';
}

.booster .spec_row:hover dt {
    color: #545c48;
}

/* 시술 소개: 제목과 얼굴 지도 · 목록 사이, 안내 문구 위 간격 */
.page_thread [data-screen-label="ByArea"] .section_head {
    margin-bottom: 36px;
}

.page_thread [data-screen-label="ByArea"] .footnote {
    margin-top: 12px;
}

/* 시술 소개 안내 문구: 지도 · 목록 줄 바로 아래에 오도록 간격을 일정하게 */
.page_thread [data-screen-label="ByArea"] .footnote {
    margin-top: 50px;
}

.pin_zone {
    position: relative;
}

/* 시술 후 주의사항 박스: 앞 구간과 색이 달라서 위에도 아래와 같은 여백을 둡니다 (여백이 없으면 박스가 앞 구간에 붙어 보임) */
.notice_section:not(.section_sage) {
    padding-top: min(80px, var(--sub-pad)) !important;
}

/* ---- 실리프팅 · 오엘의원 시그니처 (올림코 실리프팅) ---- */
.page_thread .signature_section {
    min-height: 0;
    padding-top: 0;
}

.page_thread .signature_section .split {
    gap: 96px;
}

.page_thread .signature_section .split_text {
    flex: none;
    width: 520px;
    gap: 22px;
}

.signature_section .sub_title strong {
    font-weight: 700;
}

.sig_media {
    flex: none;
    width: 560px;
    height: 600px;
    background: #fdfcfa;
}

.sig_media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 1080px) {
    .page_thread .signature_section .split_text {
        width: 100%;
    }

    .sig_media {
        width: 100%;
        height: auto;
        aspect-ratio: 560 / 600;
    }
}

@media (max-width: 720px) {
    .page_thread .signature_section .split {
        gap: 40px;
    }

}

/* 메인 "자세히 보기"로 바로 들어올 때: 고정 헤더 아래에 제목이 오도록 */
#nose,
#doctor {
    scroll-margin-top: 96px;
}

/* ==========================================================
   공지사항 (게시판 목록 · 상세)
   ========================================================== */
.board {
    max-width: 1100px;
    margin: 0 auto;
}

.board_head,
.board_row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 140px;
    align-items: center;
}

.board_head {
    padding: 16px 0;
    border-top: 2px solid #342d29;
    border-bottom: 1px solid #d5d4c6;
    font-family: var(--font-kr);
    font-size: var(--fz-small);
    font-weight: 500;
    color: #5e5a50;
    text-align: center;
}

.board_head .board_subject {
    text-align: center;
}

.board_row {
    border-bottom: 1px solid #d5d4c6;
    transition: background-color 0.25s ease;
}

.board_row:hover {
    background: rgba(228, 228, 215, 0.55);
}

.board_row.is-pinned {
    background: rgba(228, 228, 215, 0.4);
}

.board_no,
.board_date {
    font-family: var(--font-kr);
    font-size: var(--fz-small);
    color: #5e5a50;
    text-align: center;
}

.board_subject {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 22px 12px;
    color: #342d29;
    text-decoration: none;
}

.board_thumb {
    flex: none;
    width: 88px;
    height: 60px;
    overflow: hidden;
    background: #e4e4d7;
}

.board_thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.board_title {
    min-width: 0;
    font-family: var(--font-kr);
    font-size: var(--fz-body);
    font-weight: 500;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board_row.is-pinned .board_title {
    font-weight: 700;
}

.board_badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #545c48;
    color: #f3f2e9;
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

/* 상세 */
.board_view {
    max-width: 1100px;
    margin: 0 auto;
}

.board_view_title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin: 0;
    padding: 28px 12px;
    border-top: 2px solid #342d29;
    border-bottom: 1px solid #d5d4c6;
    font-family: var(--font-kr);
}

.board_view_tit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-size: var(--fz-h3);
    font-weight: 500;
    line-height: 1.5;
    color: #342d29;
    word-break: keep-all;
}

.board_view_date {
    flex: none;
    font-size: var(--fz-small);
    color: #5e5a50;
}

.board_view_con {
    padding: 48px 12px 56px;
    border-bottom: 1px solid #d5d4c6;
}

.board_view_con img {
    max-width: 100%;
    height: auto;
}

.board_view_btns {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

@media (max-width: 720px) {
    .board_head {
        display: none;
    }

    .board {
        border-top: 2px solid #342d29;
    }

    .board_row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "subject subject"
            "no date";
        padding-bottom: 14px;
    }

    .board_row .board_subject {
        grid-area: subject;
        padding: 18px 4px 8px;
        gap: 12px;
    }

    .board_row .board_no {
        grid-area: no;
        padding-left: 4px;
        text-align: left;
    }

    .board_row .board_date {
        grid-area: date;
        padding-right: 4px;
    }

    .board_thumb {
        width: 64px;
        height: 48px;
    }

    .board_title {
        font-size: var(--fz-small);
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .board_view_title {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 22px 4px;
    }

    .board_view_con {
        padding: 32px 4px 40px;
    }
}

/* 부위별 시술 목록: 제목(h3)과 설명 태그(em)가 어떤 항목은 한 줄, 어떤 항목은 두 줄로 제각각이던 것을
   모바일에서는 항상 "제목 위 · 태그 아래" 두 줄로 통일 */
@media (max-width: 720px) {
    .page_thread .area_head {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 8px;
    }
    .page_thread .area_list .area_em {
        max-width: 100%;
        margin: 0;
    }
}

/* 전후사진 (로그인 전): 빈 카드 없이 로그인 안내 카드만 가운데에 보여 줍니다 */
.page_locked .section {
    align-items: center;
    min-height: 0;
    padding: 100px 0 120px;
}
.page_locked .locked {
    display: flex;
    justify-content: center;
}
.page_locked .locked_card {
    position: static;
    top: auto;
    left: auto;
    margin: 0 auto;
    transform: none;
}
@media (max-width: 720px) {
    .page_locked .section { padding: 56px 0 72px; }
    .page_locked .locked_card { padding: 40px 24px 36px; border-radius: 22px; }
}

/* 스킨부스터: 세로로 쌓이는 화면(태블릿·모바일)에서는 PC 가로 배치용 기준 크기(flex-basis 716px)가
   그대로 "높이 716px"이 되어 항목 아래에 큰 빈 공간이 생기던 것을 없앤다 */
@media (max-width: 1080px) {
    .page_skin .booster_body {
        flex: none;
        width: 100%;
    }
}

/* 모바일: 칼럼 목록을 가로 리스트(왼쪽 사진 + 오른쪽 글)로 */
@media (max-width: 720px) {
    .post_grid { gap: 0; }
    .post_grid > a.post {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        align-content: start;
        column-gap: 16px;
        row-gap: 4px;
        align-items: start;
        padding: 18px 0;
        border-bottom: 1px solid #d5d4c6;
    }
    .post_grid > a.post:first-child { padding-top: 0; }
    .post_grid > a.post:last-child { border-bottom: 0; }
    .post_grid > a.post img.post_thumb {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: 108px;
        height: 108px;
        border-radius: 10px;
    }
    .post_grid > a.post > *:not(.post_thumb) { grid-column: 2; min-width: 0; }
    .post_grid > a.post .post_cat { font-size: 12px; }
    .post_grid > a.post .post_name {
        display: -webkit-box;
        overflow: hidden;
        font-size: 15px;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .post_grid > a.post .post_desc { font-size: 13px; line-height: 1.55; -webkit-line-clamp: 2; }
    .post_grid > a.post .post_date { margin-top: 4px; }
}

/* ==========================================================
   노트북 폭(1081~1440px) 유동 보정
   좌우 2단의 사진·글 칸이 PC 시안의 고정 px(480·520·550·624·700 …)이라, 화면이 줄면
   안쪽 영역(최대 1200~1317px)보다 커져서 글이 화면 밖으로 잘리던 것을 막는다.
   → 글 칸은 남는 폭을 채우며 줄어들고, 사진 칸은 원래 크기를 넘지 않는 선에서 줄어든다.
   (1080px 이하는 기존의 세로 쌓기 레이아웃 그대로)
   ========================================================== */
@media (min-width: 1081px) and (max-width: 1440px) {
    .split,
    .device,
    .page_about .section_sage:nth-of-type(6) .split {
        gap: clamp(32px, 5.5vw, 96px) !important;
    }

    .split > *,
    .device > * {
        min-width: 0;
    }

    .split_text,
    .split_text_narrow,
    .split_text_note,
    .device_body,
    .split > .spec_list,
    .page_thread .area_list {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .split_media,
    .split_media_photo,
    .split_media_wide,
    .device_media {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 48% !important;
    }

    .split_text *,
    .device_body *,
    .spec_list * {
        max-width: 100%;
    }
}

/* 진행 과정(PROCESS): 글이 화면 가운데 기준 절대 위치(왼쪽 -586px · 오른쪽 +643px)라 약 1300px 아래에서는 잘린다.
   1081~1300px 에서도 태블릿(≤1080px)과 같은 세로 배치를 쓴다. */
@media (min-width: 1081px) and (max-width: 1300px) {
    .page_thread .section_forest::before {
        display: none;
    }

    .page_thread .section_forest > .inner {
        position: relative;
        width: min(1200px, calc(100% - 40px));
    }

    .page_thread .process {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .page_thread .process_head {
        position: static;
        width: 100%;
    }

    .page_thread .process_head .sub_title {
        font-size: 24px;
        line-height: 36px;
    }

    .page_thread .process_list {
        position: relative;
        padding: 0 0 0 48px;
    }

    .page_thread .process_list::before {
        display: block;
    }

    .page_thread .process_list li {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: auto;
        padding: 18px 0;
    }

    .page_thread .process_list li::before {
        left: -48px;
        top: 24px;
    }

    .page_thread .section.section_forest[data-screen-label="Process"] {
        padding: 88px 0;
    }
}

/* 전후 사진 상세 (모바일·태블릿): 사진이 잘리지 않게 위(BEFORE)·아래(AFTER)로 한 장씩 원본 비율 그대로 */
@media (max-width: 1080px) {
    .page_case .case_photos_large {
        grid-template-columns: minmax(0, 640px);
        justify-content: center;
        gap: 12px;
    }

    .page_case .case_photo img {
        height: auto;
        object-fit: contain;
    }
}

/* 더보기 / 접기: 접힌 상태에서는 .is-extra 항목을 숨기고, 버튼은 목록 맨 아래에 둔다 */
.more:not(.is-open) .is-extra {
    display: none;
}

.more button.btn_more {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 22px;
    border: 1px solid #d5d4c6;
    border-radius: 999px;
    background: transparent;
    color: #342d29;
    font-family: inherit;
    font-size: var(--fz-small);
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.more button.btn_more:hover {
    border-color: #342d29;
    background: rgba(52, 45, 41, 0.04);
}

.more button.btn_more img {
    margin-left: 10px;
    transition: transform 0.3s;
}

.more.is-open button.btn_more img {
    transform: rotate(180deg);
}

.more .more_close {
    display: none;
}

.more.is-open .more_open {
    display: none;
}

.more.is-open .more_close {
    display: inline;
}

.page_about #doctor .more > .btn_more {
    margin-top: 24px;
}

/* 의료진 소개(PC): 처음 보이는 약력이 왼쪽 사진 아래선에서 끝나도록 간격을 촘촘하게 */
@media (min-width: 1081px) {
    .page_about #doctor .split_text {
        gap: 12px;
    }

    .page_about #doctor .doctor_name {
        margin-top: 14px;
    }

    .page_about #doctor .spec_row {
        padding: 14px 0;
    }

    .page_about #doctor .spec_row dd {
        line-height: 1.8;
    }

    .page_about #doctor .more > .btn_more {
        margin-top: 18px;
    }
}

/* 좁은 PC(1081~1279px)는 사진이 더 낮아서 간격을 한 번 더 줄인다 */
@media (min-width: 1081px) and (max-width: 1279px) {
    .page_about #doctor .split_text {
        gap: 6px;
    }

    .page_about #doctor .spec_row {
        padding: 10px 0;
    }

    .page_about #doctor .more > .btn_more {
        margin-top: 14px;
    }
}

/* 약력 영역은 글 영역 가로를 100% 채운다 (모바일에서 안쪽으로 줄어들던 문제) */
.page_about #doctor .more,
.page_about #doctor .more .spec_list {
    width: 100%;
}

/* ---------------------------------------------------------- 레이저·콜라겐 패키지: 가격표 */
.package_wide {
    gap: 56px;
}

.pkg_group {
    display: flex;
    flex-direction: column;
}

.pkg_group_title {
    margin: 0 0 14px;
    font-family: var(--font-kr);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-align: center;
    color: #342d29;
}

.pkg_list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #545c48;
}

.pkg_item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: 28px 8px;
    border-bottom: 1px solid #d5d4c6;
}

.pkg_info {
    flex: 1 1 0;
    min-width: 0;
}

.pkg_name {
    display: block;
    font-family: var(--font-kr);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #342d29;
}

.pkg_name + .pkg_desc {
    margin-top: 8px;
}

.pkg_desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #5e5a50;
}

.pkg_item:not(:has(.pkg_name)) .pkg_desc {
    font-size: 18px;
    font-weight: 600;
    color: #342d29;
}

.pkg_price {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 150px;
    text-align: right;
}

.pkg_price_main {
    font-family: var(--font-kr);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    color: #545c48;
}

.pkg_price_sub {
    font-size: 14px;
    color: #5e5a50;
}

.pkg_price_ask {
    font-size: 14px;
    line-height: 1.8;
    color: #8b9280;
}

@media (max-width: 720px) {
    .package_wide {
        gap: 40px;
    }

    .pkg_group_title {
        font-size: 19px;
    }

    .pkg_item {
        flex-direction: column;
        gap: 12px;
        padding: 22px 2px;
    }

    .pkg_name {
        font-size: 17px;
    }

    .pkg_desc {
        font-size: 15px;
    }

    .pkg_item:not(:has(.pkg_name)) .pkg_desc {
        font-size: 16px;
    }

    .pkg_price {
        align-items: flex-start;
        min-width: 0;
        text-align: left;
    }
}

/* ---- 전후사진 목록: 분류 탭 (누르면 그 분류 사례만) ---- */
.page_case_list .case_tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 48px; /* 탭 아래 사진 목록과의 간격 */
    padding: 6px;
    border: 1px solid #dcdbcf;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    box-sizing: border-box;
}

.page_case_list .case_tabs a.chip {
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 0;
    background: transparent;
    color: #5e5a50;
    font-weight: 500;
    white-space: nowrap;
}

.page_case_list .case_tabs a.chip:hover {
    background: rgba(84, 92, 72, 0.08);
    color: #342d29;
}

.page_case_list .case_tabs a.chip.is-on {
    background: #545c48;
    color: #f3f2e9;
    box-shadow: 0 6px 14px -8px rgba(52, 45, 41, 0.6);
}

.page_case_list .chip_count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(84, 92, 72, 0.1);
    color: #545c48;
    font-size: 12px;
    font-weight: 600;
    box-sizing: border-box;
}

.page_case_list .case_tabs a.chip.is-on .chip_count {
    background: rgba(243, 242, 233, 0.2);
    color: #f3f2e9;
}

/* "전체 사례 N건": 탭 아래 오른쪽 (사진 목록 바로 위 오른쪽 끝) */
.page_case_list .case_tabs_note {
    margin: 28px 0 16px;
    text-align: right;
    font-size: 14px;
    color: #8a867d;
}

.page_case_list .case_tabs_note strong {
    color: #342d29;
    font-weight: 600;
}

/* 모바일: 한 줄로 두고 옆으로 밀어서 보기 */
@media (max-width: 720px) {
    .page_case_list .case_tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        margin-bottom: 32px;
        overflow-x: auto;
        border-radius: 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .page_case_list .case_tabs::-webkit-scrollbar {
        display: none;
    }

    .page_case_list .case_tabs a.chip {
        flex: none;
        height: 40px;
        padding: 0 16px;
        border-radius: 12px;
    }

    .page_case_list .case_tabs_note {
        margin: 18px 0 12px;
    }
}

/* ---------------------------------------------------------- PROGRAMS (리뉴아 Our Programs 구조, 오엘 색감) */
.page_programs .programs_section {
    padding: 96px 0 120px;
}

.page_programs .programs_inner {
    max-width: 1000px;
}

.page_programs .programs_intro {
    margin: 0 auto 56px;
    padding-bottom: 44px;
    border-bottom: 1px solid #c9ccbd;
    text-align: center;
    font-size: 16px;
    line-height: 1.85;
    color: #5e5a50;
}

.page_programs .programs_block {
    margin-bottom: 32px;
    padding: 44px 52px 40px;
    border-radius: 18px;
}

.page_programs .programs_tone_1 { background: rgba(139, 146, 128, 0.14); }
.page_programs .programs_tone_2 { background: rgba(139, 146, 128, 0.22); }
.page_programs .programs_tone_3 { background: rgba(139, 146, 128, 0.32); }
.page_programs .programs_tone_4 { background: rgba(84, 92, 72, 0.22); }

.page_programs .programs_block_title {
    margin: 0;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: #342d29;
}

.page_programs .programs_block_sub {
    margin: 8px 0 34px;
    text-align: center;
    font-size: 15px;
    color: #5e5a50;
}

.page_programs .programs_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page_programs .programs_item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    border-top: 1px solid rgba(84, 92, 72, 0.18);
}

.page_programs .programs_item:first-child {
    border-top: 0;
    padding-top: 0;
}

.page_programs .programs_item:last-child {
    padding-bottom: 0;
}

.page_programs .programs_item_info {
    flex: 1;
    min-width: 0;
}

.page_programs .programs_item_name {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: #2b291d;
    word-break: keep-all;
}

.page_programs .programs_item_time {
    font-size: 14px;
    font-weight: 400;
    color: #5e5a50;
}

.page_programs .programs_item_desc {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: #4a463c;
    word-break: keep-all;
}

.page_programs .programs_item_price {
    flex: none;
    padding-top: 2px;
    font-size: 15px;
    font-weight: 600;
    color: #545c48;
    white-space: nowrap;
}

.page_programs .programs_cta {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 56px;
}

@media (max-width: 720px) {
    .page_programs .programs_section {
        padding: 64px 0 80px;
    }

    .page_programs .programs_intro {
        margin-bottom: 36px;
        padding-bottom: 30px;
        font-size: 14px;
    }

    .page_programs .programs_block {
        margin-bottom: 20px;
        padding: 30px 22px 26px;
        border-radius: 14px;
    }

    .page_programs .programs_block_title {
        font-size: 17px;
        letter-spacing: 0.14em;
    }

    .page_programs .programs_block_sub {
        margin-bottom: 22px;
        font-size: 14px;
    }

    .page_programs .programs_item {
        flex-direction: column;
        gap: 8px;
        padding: 18px 0;
    }

    .page_programs .programs_item_name {
        font-size: 16px;
    }

    .page_programs .programs_item_desc {
        font-size: 14px;
    }

    .page_programs .programs_item_price {
        align-self: flex-end;
        font-size: 14px;
    }

    .page_programs .programs_cta {
        flex-direction: column;
        margin-top: 36px;
    }
}

.page_programs .programs_head {
    margin-bottom: 56px;
    padding-bottom: 44px;
    border-bottom: 1px solid #c9ccbd;
}

@media (max-width: 720px) {
    .page_programs .programs_head {
        margin-bottom: 36px;
        padding-bottom: 30px;
    }
}

/* 쁘띠 시술 카드: 시술 부위 (필러·보톡스) — 사용 제품 줄과 같은 모양, 굵기만 살짝 낮춤 */
.product_area_text b {
    font-weight: 700; /* 사용 제품과 같은 굵기 */
}

/* 넓은 화면(사진 왼쪽·글 오른쪽): 카드마다 글 길이가 달라도 사진·제목 높이가 나란하도록 위쪽 정렬 */
.page_skin .product_pair .product {
    align-items: flex-start;
}

/* 세 카드의 "사용 제품" 줄을 카드 아래쪽에 나란히 (시술 부위 길이가 달라도 줄이 어긋나지 않게) */
.page_skin .product_pair .product_body {
    flex: 1 1 auto;
    align-self: stretch;
}

.page_skin .product_pair .product_body > .product_foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
}

/* 시술 부위: 항목 하나는 한 줄로 붙여 둠 (줄바꿈은 항목 사이에서만) */
.product_area_text .nw {
    white-space: nowrap;
}

/* 사진 왼쪽·글 오른쪽 배치는 1920px 이상에서만 (그보다 좁으면 글이 사진 높이를 넘어서 아래 규칙으로 사진 위·글 아래 배치) */
@media (min-width: 1701px) and (max-width: 1919px) {
    .page_skin .product {
        flex-direction: column;
        align-items: stretch;
        height: auto;
    }

    .page_skin .product_photo {
        width: 100%;
    }

    .page_skin .product_body p {
        width: auto;
    }
}

/* 넓은 화면(사진 왼쪽·글 오른쪽): 글이 왼쪽 사진(280px) 높이를 넘지 않게 간격·글자 크기를 살짝 줄임 */
@media (min-width: 1920px) {
    .page_skin .product_pair .product_body {
        gap: 8px;
    }

    .page_skin .product_pair .product_body > .product_foot {
        gap: 4px;
        padding-top: 6px;
    }

    .page_skin .product_pair .product_foot .product_use {
        font-size: 13px;
        line-height: 1.6;
    }
}

/* ---------------------------------------------------------- FILLER & BOTOX 부위 안내 (피그마 node 301-43) */
.fb_section {
    background: #342d29 !important;
    color: #f3f2e9;
    padding: 120px 0 80px;
}

.fb_section + .section_dark {
    padding-top: 40px;
}

.fb_sub {
    margin: 0;
    font-size: 17px;
    color: #f3f2e9;
}

.fb_maps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px;
    max-width: 1468px;
    margin: 72px auto 0;
}

.fb_map {
    position: relative;
    margin: 0;
    padding-top: 20px;
}

.fb_badge {
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 122px;
    height: 40px;
    padding: 0 22px;
    border-radius: 999px;
    background: #626a55;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.fb_photo {
    position: relative;
    aspect-ratio: 709 / 583;
    overflow: hidden;
    background: #b5b5b5;
}

.fb_photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 마커: 이름 ─── ● (또는 ● ─── 이름) */
.fb_mark {
    position: absolute;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
    color: #fff;
    pointer-events: none;
}

.fb_mark em {
    flex: none;
    font-style: normal;
    font-size: clamp(11px, 0.95vw, 16px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.fb_mark i {
    flex: 1 1 auto;
    height: 1.5px;
    background: #fff;
}

.fb_mark b {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

.fb_mark_l em {
    margin-right: 14px;
}

/* 오른쪽 이름: 선 끝 바로 뒤에 이름 */
.fb_mark_r em {
    position: absolute;
    left: 100%;
    margin-left: 12px;
}

@media (max-width: 1200px) {
    .fb_maps {
        gap: 28px;
    }
}

@media (max-width: 720px) {
    .fb_section {
        padding: 72px 0 48px;
    }

    .fb_sub {
        font-size: 14px;
    }

    .fb_maps {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        margin-top: 40px;
    }

    .fb_badge {
        min-width: 92px;
        height: 34px;
        font-size: 14px;
    }

    .fb_mark em {
        font-size: 11px;
    }

    .fb_mark_l em {
        margin-right: 8px;
    }

    .fb_mark_r em {
        margin-left: 7px;
    }

    .fb_mark b {
        width: 7px;
        height: 7px;
    }

    .fb_mark i {
        height: 1px;
    }
}

/* 모바일·태블릿: "OL CLINIC Standard" 위 여백은 다른 섹션과 같은 수준으로 */
@media (max-width: 1080px) {
    .page_skin .fb_section + .section_dark {
        padding-top: 64px;
        padding-bottom: var(--sub-pad);
    }
}

@media (max-width: 720px) {
    .page_skin .fb_section + .section_dark {
        padding-top: 48px;
    }
}

/* 헤더 하위 메뉴로 이동했을 때 고정 헤더에 가리지 않게 */
.page_skin [role="tablist"],
.page_skin .fb_map {
    scroll-margin-top: 120px;
}

/* 스킨 에너지 쁘띠 카드: 모델 사진이 칸을 꽉 채움 (좁은 화면에서 잘려도 얼굴 쪽이 보이게) */
.page_skin .product_photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

/* ==========================================================
   스킨 에너지: 피부보습영양주사(OL Signature) · 영양수액(IV)
   ========================================================== */
.sig_card,
.iv_card {
    scroll-margin-top: 120px; /* 헤더 하위 메뉴(#sig-… · #iv-…)로 이동할 때 고정 헤더에 가리지 않게 */
}

.sig_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; /* 한쪽 카드의 추천 목록을 펼쳐도 옆 카드 높이는 그대로 */
    gap: 32px;
}

.sig_card {
    display: flex;
    flex-direction: column;
    padding: 48px 44px 36px;
    background: #e4e4d7;
}

.sig_no {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--fz-cap);
    letter-spacing: 0.24em;
    color: #545c48;
}

.sig_en {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 44px;
    font-style: italic;
    line-height: 1;
    color: #545c48;
}

.sig_card h3 {
    margin: 14px 0 0;
    font-family: var(--font-kr);
    font-size: calc(var(--fz-h3) + 4px);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #342d29;
}

.sig_lead {
    margin: 6px 0 0;
    font-size: var(--fz-small);
    color: #545c48;
}

.sig_text {
    margin: 20px 0 0;
    font-size: var(--fz-small);
    line-height: 1.9;
    color: #5e5a50;
}

.sig_for {
    margin-top: auto;
    padding-top: 28px;
}

/* 이런 분께 추천합니다: + 를 누르면 펼쳐지는 아코디언 */
.sig_for > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #c7c8b6;
    font-size: var(--fz-small);
    font-weight: 500;
    line-height: 1.5;
    color: #342d29;
    list-style: none;
    cursor: pointer;
}

.sig_for > summary::-webkit-details-marker {
    display: none;
}

.sig_for_icon {
    position: relative;
    flex: none;
    width: 10px;
    height: 10px;
}

.sig_for_icon::before,
.sig_for_icon::after {
    content: '';
    position: absolute;
    top: 4.5px;
    left: 0;
    width: 10px;
    height: 1px;
    background: #545c48;
    transition: transform 0.25s;
}

.sig_for_icon::after {
    transform: rotate(90deg);
}

.sig_for[open] .sig_for_icon::after {
    transform: rotate(0deg);
}

.sig_for .bullet_list {
    padding-left: 0;
    list-style: none;
}

.sig_for .bullet_list li::before {
    content: '- ';
}

.sig_for .bullet_list {
    margin-top: 12px;
    font-size: var(--fz-small);
    line-height: 1.8;
    color: #5e5a50;
}

.iv_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.iv_card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 24px;
    border-top: 2px solid rgba(243, 242, 233, 0.35);
    border-bottom: 2px solid rgba(243, 242, 233, 0.35);
}

.iv_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.iv_num {
    font-family: var(--font-serif);
    font-size: 40px;
    line-height: 1;
    color: #eef0e2;
}

.iv_en {
    font-family: var(--font-serif);
    font-size: var(--fz-cap);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #c9d19a;
}

.iv_card h3 {
    margin: 0;
    font-family: var(--font-kr);
    font-size: var(--fz-h3);
    font-weight: 500;
    color: #f3f2e9;
}

.iv_card p {
    margin: 0;
    font-size: var(--fz-small);
    line-height: 1.9;
    color: rgba(243, 242, 233, 0.75);
}

.iv_card .iv_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: auto;
    padding-top: 6px;
    font-size: var(--fz-cap);
    color: #c9d19a;
}

.sub .section > .inner > .iv_note {
    margin-top: 28px;
    font-size: var(--fz-cap);
    color: rgba(243, 242, 233, 0.6);
}

@media (max-width: 1024px) {
    .iv_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .sig_grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sig_card {
        padding: 32px 24px 24px;
    }

    .sig_en {
        font-size: 34px;
    }

    /* 스킨부스터 제품 탭이 7개 → 모바일에서는 한 줄로 두고 옆으로 밀어서 봅니다 */
    .page_skin .chips[role='tablist'] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .page_skin .chips[role='tablist']::-webkit-scrollbar {
        display: none;
    }

    .page_skin .chips[role='tablist'] a.chip {
        flex: 0 0 auto;
        padding: 0 14px;
        white-space: nowrap;
    }
}

@media (max-width: 560px) {
    .iv_grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .iv_card + .iv_card {
        border-top: 0;
    }
}

/* 헤더 하위 메뉴(실리프팅 실 종류 카드 · 레이저 장비)로 이동할 때 고정 헤더에 가리지 않게 */
.page_thread .method,
.page_laser #coolphase,
.page_laser #liftera,
.page_laser #co2 {
    scroll-margin-top: 120px;
}

/* 부위별 메뉴로 이동하면 얼굴 그림 + 부위 목록 전체가 한 화면에 보이게 */
.page_thread #area {
    scroll-margin-top: 140px;
}

/* 실리프팅 By Area: 얼굴 그림은 원래 크기(520×660) 그대로, 오른쪽 1~7 목록을 그림 높이 안에 정돈 (안쪽 스크롤 없음) */
@media (min-width: 1081px) {
    .page_thread .face_map {
        align-items: center;
        gap: 64px;
    }

    .page_thread .area_list {
        flex: 1 1 0;
        width: auto;
        max-height: none;
        overflow: visible;
    }

    .page_thread .area_list li {
        gap: 18px;
        min-height: 0;
        padding: 10px 0;
    }

    .page_thread .area_num {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    /* 01 · 03 처럼 두 줄이던 제목도 한 줄로 */
    .page_thread .area_list h3,
    .page_thread .area_list li.area_sig h3 {
        display: flex;
        margin: 0 0 4px;
        font-size: 17px;
        line-height: 1.4;
    }

    .page_thread .area_list h3 br {
        display: none;
    }

    .page_thread .area_head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        margin-bottom: 4px;
    }

    .page_thread .area_head h3 {
        margin: 0;
    }

    .page_thread .area_list .area_em {
        height: 22px;
        margin: 0;
        padding: 0 9px;
        font-size: 12px;
    }

    .page_thread .area_list p {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* 태블릿 · 모바일: 목록은 모두 펼쳐서 */
@media (max-width: 1080px) {
    .page_thread .area_list {
        max-height: none;
        overflow: visible;
    }
}