/**********************************************************
* 메인 페이지 (Figma 최종 시안 1:740)
***********************************************************/
.main {
    /* 폰트 스케일: 섹션 전체가 이 값만 씁니다 (메인 배너 제외). 반응형은 값만 바꿉니다. */
    --fz-eyebrow: 15px;
    --fz-h: 32px;
    --fz-lead: 18px;
    --fz-h3: 18px;
    --fz-body: 16px;
    --fz-small: 15px;
    --fz-cap: 13px;
    --fz-tel: 30px;
    --font-khmer: 'Khmer MN', 'Khmer Sangam MN', 'Preahvihear', 'Cormorant Garamond', serif;
    background: #f3f2e9;
}


.hero .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
}

.inner {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.eyebrow {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0.32em;
    line-height: normal;
    text-transform: uppercase;
    color: #545c48;
    font-size: var(--fz-eyebrow);
}

.eyebrow_light {
    color: #eef0e2;
}

.section_title {
    margin: 0;
    font-family: var(--font-kr);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #342d29;
    font-size: var(--fz-h);
    line-height: 1.4;
}

.sub_title {
    margin: 0;
    font-family: var(--font-kr);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #342d29;
    font-size: var(--fz-h);
    line-height: 1.4;
}

.desc {
    margin: 0;
    font-family: var(--font-kr);
    font-weight: 400;
    color: #5e5a50;
    font-size: var(--fz-body);
    line-height: 1.8;
}

.desc b {
    font-weight: 700;
}

.desc_soft {
    color: #efede3;
}

.section_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

/* ---- 버튼: 시안(높이 52 · 좌우 34 · 라운드 999 · 14px/500) + 호버 시 채움 모션 ---- */
.btn {
    --btn-fill: #f3f2e9;
    --btn-hover-color: #342d29;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 34px;
    border: 1px solid transparent;
    border-radius: 999px;
    background-image: linear-gradient(var(--btn-fill), var(--btn-fill));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    font-family: var(--font-kr);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.3s, border-color 0.3s,
        background-color 0.3s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s;
}

a.btn:hover,
a.btn:focus-visible {
    background-size: 100% 100%;
    color: var(--btn-hover-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(20, 16, 12, 0.45);
}

a.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

a.btn_ghost {
    --btn-fill: #f3f2e9;
    --btn-hover-color: #342d29;
    border-color: rgba(243, 242, 233, 0.7);
    color: #f3f2e9;
}

a.btn_ink {
    --btn-fill: #342d29;
    --btn-hover-color: #f3f2e9;
    border-color: #342d29;
    color: #342d29;
}

a.btn_olive {
    --btn-fill: #3f4636;
    --btn-hover-color: #f3f2e9;
    background-color: #545c48;
    border-color: #545c48;
    color: #f3f2e9;
}

a.btn_kakao {
    --btn-fill: #f5d800;
    --btn-hover-color: #191600;
    background-color: #fee500;
    border-color: #fee500;
    color: #191600;
}

a.btn_cream {
    --btn-fill: #ffffff;
    --btn-hover-color: #342d29;
    background-color: #f3f2e9;
    border-color: #f3f2e9;
    color: #342d29;
}

.btn_group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn_group_center {
    justify-content: center;
}

/**********************************************************
* Hero
***********************************************************/
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 900px;
    padding-top: 96px;
    box-sizing: border-box;
    overflow: hidden;
    background: #3a3826;
}

.hero_bg {
    position: absolute;
    inset: 0;
    /* 영상이 준비되기 전에는 같은 장면의 정지 이미지가 보이므로 어두운 빈 화면이 깜빡이지 않습니다 */
    background: #3a3826 url('../images/main/hero-poster.jpg') center / cover no-repeat;
}

.hero_bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(75, 77, 61, 0.44);
    pointer-events: none;
}

.hero_video,
.hero_bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero_video {
    display: block;
    opacity: 0;
    transition: opacity 0.7s ease;
}

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

.hero_title {
    margin: 0;
    font-family: var(--font-banner);
    font-size: 80px;
    font-weight: 400;
    line-height: 85px;
    letter-spacing: -0.03em;
    color: #fdfbf6;
    font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.hero_lead {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    color: #fdfbf6;
}

.hero_lead strong {
    font-weight: 800;
}

.hero_mark {
    display: block;
    width: 40px;
    height: 47px;
}

/**********************************************************
* Philosophy
***********************************************************/
.philosophy {
    background: #f3f2e9;
    padding: 120px 0;
}

.philosophy_inner {
    display: flex;
    align-items: center;
    gap: 72px;
}

.philosophy_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    width: 540px;
    flex: none;
}

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

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

.divider {
    display: block;
    width: 64px;
    height: 1px;
    background: #8b9280;
}

.philosophy_desc {
    width: 100%;
}

.philosophy_keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #d5d4c6;
    border-bottom: 1px solid #d5d4c6;
}

.philosophy_keys li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 0 22px 20px;
    border-left: 1px solid #d5d4c6;
}

.philosophy_keys li:first-child {
    padding-left: 0;
    border-left: 0;
}

.philosophy_keys em {
    font-family: var(--font-serif);
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    color: #342d29;
}

.philosophy_keys span {
    font-family: var(--font-kr);
    color: #5e5a50;
    font-size: var(--fz-cap);
}

.philosophy_art {
    position: relative;
    flex: 1 1 588px;
    max-width: 588px;
    aspect-ratio: 588 / 760;
}


.philosophy_portrait {
    position: absolute;
    top: 0;
    right: 0;
    width: 71.43%;
    height: 78.95%;
    overflow: hidden;
}


.philosophy_portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.philosophy_drop {
    position: absolute;
    left: 0;
    top: 56.84%;
    width: 47.28%;
    height: 43.16%;
    padding: 5%;
    background: #f3f2e9;
}


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


.philosophy_years {
    position: absolute;
    left: 6.8%;
    top: 9.2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 29.25%;
    aspect-ratio: 1;
    border: 1px solid #8b9280;
    border-radius: 999px;
    background: #f3f2e9;
}


.philosophy_years strong {
    font-family: var(--font-infant);
    font-weight: 400;
    color: #545c48;
    font-size: clamp(40px, 3.75vw, 72px);
    line-height: 1;
}

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

.philosophy_vert {
    position: absolute;
    right: -52px;
    top: 0;
    margin: 0;
    writing-mode: vertical-rl;
    font-family: var(--font-serif);
    font-size: 13px;
    letter-spacing: 0.36em;
    color: #5e5a50;
    white-space: nowrap;
}

/**********************************************************
* Difference
***********************************************************/
.difference {
    background: #342d29;
    padding: 100px 0;
}

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

.difference_photo {
    width: 480px;
    height: 600px;
    flex: none;
    overflow: hidden;
}

.difference_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.difference_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.difference_title {
    margin: 0;
    font-family: var(--font-kr);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #f3f2e9;
    font-size: var(--fz-h);
    line-height: 1.4;
}

.difference_name {
    color: #f3f2e9;
}

/* 원장 서명: 직함 + 손글씨 이름 + (서명) */
.difference_sign {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 12px;
    margin-bottom: 24px;
}

.difference_sign .role {
    margin: 0;
    font-family: var(--font-kr);
    font-size: var(--fz-body);
    font-weight: 500;
    color: #eef0e2;
}

.difference_sign .name {
    margin: 0;
    font-family: 'InkLipquid', var(--font-kr), cursive;
    font-size: 35px;
    line-height: 1;
    color: #f3f2e9;
}

.difference_sign .name span {
    font-family: var(--font-kr);
    font-size: 17px;
    font-weight: 400;
    color: rgba(243, 242, 233, 0.5);
}

/**********************************************************
* Programs
***********************************************************/
.program {
    background: #e4e4d7;
    padding: 154px 0 154px;
}

.program .section_head {
    margin-bottom: 48px;
}

.program_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: min(1600px, calc(100% - 40px));
    margin: 0 auto;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 28px;
    border-radius: 4px;
}

.card_dark {
    background: #565a4c;
    color: #f3f2e9;
}

.card_light {
    background: #f3f2e9;
    color: #342d29;
}

.card_img {
    position: relative;
    height: 320px;
    overflow: hidden;
    border-radius: 2px;
}


.card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.card h3 b {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
}

.card p {
    margin: 0;
    min-height: 56px;
    font-family: var(--font-kr);
    line-height: 26.6px;
    font-size: var(--fz-small);
}

.card_dark p {
    color: #efede3;
}

.card_light p {
    color: #5e5a50;
}

.card_light.card:nth-child(2) p {
    color: #342d29;
}

/**********************************************************
* Standard
***********************************************************/
.standard {
    background: #f3f2e9;
    padding: 110px 0;
}

.standard_inner {
    display: flex;
    align-items: center;
    gap: 88px;
}

.standard_art {
    position: relative;
    flex: 1 1 560px;
    max-width: 560px;
    aspect-ratio: 1;
    background: linear-gradient(160deg, #3e4136 8%, #5e6252 54%, #4a4c40 92%);
}


.standard_ring {
    position: absolute;
    left: 12.5%;
    top: 12.5%;
    width: 75%;
    height: 75%;
    border: 1px solid rgba(243, 242, 233, 0.75);
    border-radius: 999px;
}


.standard_hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 37.14%;
    aspect-ratio: 1;
    border: 1px solid rgba(243, 242, 233, 0.1);
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.standard_ring_in {
    position: absolute;
    left: 17.58%;
    top: 17.66%;
    width: 64.83%;
    aspect-ratio: 1;
    border: 1px solid rgba(243, 242, 233, 0.75);
    border-radius: 999px;
}

.standard_dot {
    position: absolute;
    width: 13.832px;
    height: 13.832px;
    border: 3px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: #f3f2e9;
    box-sizing: border-box;
}

.standard_dot_t {
    left: 48.76%;
    top: 16.43%;
}


.standard_dot_r {
    left: 76.86%;
    top: 65.06%;
}


.standard_dot_l {
    left: 20.67%;
    top: 65.06%;
}


.standard_label {
    position: absolute;
    margin: 0;
    font-family: var(--font-kr);
    line-height: 21px;
    text-align: center;
    color: #f3f2e9;
    font-size: 14px;
}

.standard_label_t {
    left: 50.27%;
    top: 30.18%;
    width: auto;
    transform: translateX(-50%);
    white-space: nowrap;
}


.standard_label_r {
    left: 66.16%;
    top: 58.04%;
    width: auto;
    transform: translateX(-50%);
    white-space: nowrap;
}


.standard_label_l {
    left: 34.91%;
    top: 57.86%;
    width: auto;
    transform: translateX(-50%);
    white-space: nowrap;
}


.standard_text {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

.standard_list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.standard_list li {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid #d5d4c6;
}

.standard_list img {
    flex: none;
    width: 36px;
    height: 36px;
}

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

.standard_list p {
    margin: 0;
    font-family: var(--font-kr);
    line-height: 26.6px;
    color: #5e5a50;
    font-size: var(--fz-small);
}

/**********************************************************
* Consultation
***********************************************************/
.consult {
    background: #f3f2e9;
    padding: 120px 0 120px 206px;
    overflow: hidden;
}

.consult_inner {
    display: flex;
    align-items: center;
    gap: 40px;
}

.consult_text {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 440px;
    flex: none;
}

.consult_text .desc {
    max-width: 379px;
}

/* 사진 영역: 이 영역 안에서만 드래그/스와이프로 넘어가고, 자동으로도 넘어갑니다 */
.consult_inner {
    align-items: center;
}

.consult_photos {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.consult_photos.is-drag {
    cursor: grabbing;
}

.consult_track {
    display: flex;
    gap: 16px;
    width: max-content;
    will-change: transform;
    transition: transform 0.8s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.consult_photos.is-drag .consult_track {
    transition: none;
}

.consult_photos .placeholder {
    flex: 0 0 650px;
    width: 650px;
    height: 480px;
    overflow: hidden;
    background: #d8d8ca;
}

.consult_photos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/**********************************************************
* Blog / BA
***********************************************************/
.blog {
    background: #e4e4d7;
    padding: 136px 0;
}

.blog_head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
}

.blog_head .eyebrow {
    margin-bottom: 14px;
}

.blog_more {
    font-family: var(--font-kr);
    color: #342d29;
    text-decoration: underline;
    font-size: var(--fz-cap);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border: 1px dashed #545c48;
    border-radius: 4px;
    background: rgba(139, 146, 128, 0.22);
    color: #342d29;
    font-family: var(--font-kr);
    width: fit-content;
}

.tag_title {
    font-weight: 500;
    font-size: var(--fz-body);
}

.tag_date {
    font-size: 12px;
}

.before_after {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    background: #f3f2e9;
    padding: 98px 0;
}

.before_after_grid {
    display: grid;
    grid-template-columns: repeat(4, 285px);
    gap: 20px;
    justify-content: center;
}

.before_after_item img,
.before_after_item .ba_empty {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
}

.before_after_item .ba_empty {
    background: #d8d8ca;
}

.before_after_item img + img,
.before_after_item img + .ba_empty,
.before_after_item .ba_empty + img {
    border-left: 2px solid #f3f2e9;
}

.before_after_item {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    border-radius: 8px;
    background: #d8d8ca;
    opacity: 0.8;
    font-family: var(--font-kr);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #5e5a50;
}

/**********************************************************
* YouTube story
***********************************************************/
.youtube {
    background: #e4e4d7;
    padding: 147px 0;
}

.youtube_inner {
    display: flex;
    gap: 70px;
    width: min(1651px, calc(100% - 40px));
    margin: 0 auto;
    align-items: flex-start;
}

.youtube_main {
    position: relative;
    flex: none;
    width: 800px;
    height: 756px;
    overflow: hidden;
}

.youtube_main > img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 칸 비율이 바뀌어도 사진이 늘어나지 않고 잘리도록 */
}

.youtube_side {
    flex: 1 1 780px;
    min-width: 0;
}

.youtube_head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 3px solid rgba(84, 92, 72, 0.24);
}

.youtube_head h2 {
    margin: 0;
    font-family: var(--font-khmer);
    font-size: 50px;
    font-weight: 400;
    line-height: 45px;
    color: #443a35;
}

.youtube_head p {
    margin: 30px 0 0;
    font-family: var(--font-sans);
    color: #443a35;
    font-size: var(--fz-body);
}

.youtube_head_btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 27px;
}

.youtube_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 129px;
    height: 45px;
    margin-top: 0;
    border: 1px solid #c5b49d;
    border-radius: 20px;
    font-family: var(--font-sans);
    color: #443a35;
    text-decoration: none;
    font-size: var(--fz-small);
}

.youtube_track {
    display: contents;
}
.youtube_cards {
    display: flex;
    gap: 10px;
    margin-top: 40px;
}

.youtube_card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 253px;
    height: 350px;
    padding: 27px 33px 26px 34px;
    overflow: hidden;
    text-decoration: none;
}

.youtube_card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.youtube_card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(68, 58, 53, 0.7);
}

.youtube_badge,
.youtube_card > div {
    position: relative;
    z-index: 1;
}

.youtube_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 120px;
    height: 30px;
    border-radius: 52px;
    background: #fcf9ea;
    font-family: var(--font-sans);
    font-weight: 200;
    color: #443a35;
    font-size: var(--fz-cap);
}

.youtube_badge img {
    width: 25px;
    height: 17px;
}

.youtube_card h3 {
    margin: 0 0 17px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.3;
    color: #fcf9ea;
    font-size: var(--fz-body);
}

.youtube_date {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    color: rgba(252, 249, 234, 0.5);
    font-size: var(--fz-small);
}

.youtube_list {
    margin-top: 64px;
}

.youtube_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(84, 92, 72, 0.24);
    font-family: var(--font-sans);
    color: #342d29;
    text-decoration: none;
    font-size: var(--fz-body);
}

.youtube_row span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fz-small);
    font-weight: 500;
    color: #545c48;
}

/**********************************************************
* Reservation / Visit
***********************************************************/
.reservation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 124px 40px;
    background: #626a55;
    text-align: center;
}

.reservation .sub_title {
    color: #f3f2e9;
}

.visit {
    background: #342d29;
    padding: 117px 0 159px;
}

.visit_inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 80px;
    width: min(1650px, calc(100% - 160px));
    margin: 0 auto;
}

.visit_info {
    display: flex;
    flex-direction: column;
    width: 660px;
    color: #fff;
}

.visit_info > h2 {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fz-h);
    line-height: 1.3;
}

.visit_lead {
    font-family: var(--font-sans);
    font-size: var(--fz-lead);
    line-height: 1.7;
    margin: 18px 0 38px;
}

.visit_block {
    padding: 30px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.7);
}

.visit_block_top {
    border-top-width: 3px;
}

.visit_tel {
    border-bottom: 3px solid rgba(255, 255, 255, 0.7);
}

.visit_block h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 28px;
    font-size: var(--fz-h3);
    margin: 0 0 14px;
}

.visit_block p,
.visit_block li {
    margin: 0;
    font-family: var(--font-sans);
    font-size: calc(var(--fz-body) + 1px);
    line-height: 1.7;
}

.visit_block em {
    font-style: normal;
}

.visit_block ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.visit_block li {
    display: flex;
    justify-content: space-between;
}

.visit_block li span {
    letter-spacing: 0.43em;
}

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

.visit_block li.visit_note,
.visit_block p.visit_note {
    margin-top: 16px;
    font-size: calc(var(--fz-small) + 1px);
}

.visit_block li.visit_note.visit_note_sub {
    /* 목록 간격(gap 20px)을 줄여 위의 휴진 문구 바로 아래에 붙입니다 (실제 간격 약 4px) */
    margin-top: -16px;
    font-size: var(--fz-small);
    line-height: 1.5;
    opacity: 0.75;
    word-break: keep-all;
}

.visit_tel h3 {
    margin-bottom: 18px;
}

.visit_tel a {
    display: block;
    margin-left: 34px;
    font-family: var(--font-sans);
    line-height: 1;
    color: #fff;
    text-decoration: none;
    font-size: var(--fz-tel);
}

.visit_map {
    width: 750px;
    min-height: 774px;
    flex: none;
    overflow: hidden;
}

.visit_map img,
.visit_map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    border: 0;
    object-fit: cover;
}

/**********************************************************
* 호버 · 퀵메뉴
***********************************************************/
.card_img img,
.youtube_card > img {
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card:hover .card_img img {
    transform: scale(1.05);
}

.card {
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 40px -28px rgba(20, 16, 12, 0.55);
}

a.blog_more {
    background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    transition: color 0.3s;
}

a.blog_more:hover {
    color: #545c48;
}

a.youtube_btn {
    font-weight: 500;
    color: #fff;
    border-color: transparent;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s, filter 0.3s;
}

/* 유튜브 버튼: 검정, 호버 시 다른 버튼처럼 밝은 색이 차오르며 위로 뜬다 */
a.youtube_btn_yt {
    --btn-fill: #f3f2e9;
    background-color: #111;
    border-color: #111;
    background-image: linear-gradient(var(--btn-fill), var(--btn-fill));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.45s, border-color 0.3s, color 0.3s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s;
}

a.youtube_btn_yt:hover,
a.youtube_btn_yt:focus-visible {
    background-size: 100% 100%;
    border-color: #111;
    color: #111;
    filter: none;
}

a.youtube_btn_ig {
    background: linear-gradient(45deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
}

a.youtube_btn:hover,
a.youtube_btn:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 10px 22px -10px rgba(20, 16, 12, 0.45);
}

a.youtube_btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.quick_menu {
    position: fixed;
    /* 화면 높이가 낮은 노트북에서도 아래 버튼이 잘리지 않게 위로 당긴다 (버튼 8개 ≈ 580px) */
    top: clamp(104px, calc(100vh - 720px), 260px); /* 전후사진 추가로 길어져서 낮은 화면에선 위로 (헤더 아래까지만) */
    right: 56px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.quick_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.quick_menu .quick_toggle {
    display: none;
    border: 0;
    cursor: pointer;
    color: #fff;
}

.quick_menu .quick_toggle .quick_toggle_close {
    display: none;
}

.quick_menu.is-open .quick_toggle .quick_toggle_open {
    display: none;
}

.quick_menu.is-open .quick_toggle .quick_toggle_close {
    display: block;
}

.quick_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0 4px;
    border-radius: 50%;
    box-shadow: 0 6px 9px rgba(52, 45, 41, 0.18);
    font-family: var(--font-kr);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow 0.3s;
}

.quick_btn span {
    display: block;
}

.quick_btn:hover {
    box-shadow: 0 10px 18px -8px rgba(52, 45, 41, 0.4);
}

.quick_btn_olive {
    background: #545c48;
    color: #fff;
}

.quick_btn_olive span {
    color: #fff;
}

a.quick_btn_kakao {
    background: #f0d35a;
    color: #2f2a12;
}

a.quick_btn_yt {
    background: #c4453c;
    color: #ffffff;
}

a.quick_btn_ig {
    background: linear-gradient(45deg, #e5a45f 0%, #cc5f86 52%, #7d65b5 100%);
    color: #ffffff;
}

a.quick_btn_cream {
    background: #f3f2e9;
    color: #342d29;
}

a.quick_btn_line {
    background: #6aae8b;
    color: #ffffff;
}

a.quick_btn_wechat {
    background: #3b7c7a;
    color: #ffffff;
}

a.quick_btn_ink {
    background: #342d29;
    color: #f3f2e9;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.quick_menu.is-on-map a.quick_btn_ink,
a.quick_btn_ink.is-on-dark {
    background: #8b9280;
    color: #f3f2e9;
}

@media (max-width: 1080px) {
    .quick_menu {
        top: auto;
        right: 14px;
        bottom: 16px;
        gap: 8px;
    }

    .quick_list {
        gap: 8px;
    }

    .quick_btn {
        width: 56px;
        height: 56px;
        font-size: 10px;
        line-height: 1.2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .quick_btn,
    .card {
        transition: none;
    }
}

/**********************************************************
* Responsive
* 1441↑ 시안 기준 데스크톱 / ≤1440 노트북 / ≤1200 헤더 햄버거 / ≤1080 태블릿 / ≤720 모바일 / ≤420 소형 모바일
***********************************************************/

/* ---- ≤1440 : 고정폭 영역을 비율로 줄입니다 ---- */
@media (max-width: 1440px) {
    .philosophy_vert {
        right: -30px;
    }

    .philosophy_text {
        width: 46%;
    }

    .difference_inner {
        gap: 64px;
    }

    .difference_photo {
        width: 42%;
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .standard_inner {
        gap: 64px;
    }

    .consult {
        padding-left: 80px;
    }

    .youtube_inner {
        gap: 48px;
    }

    .youtube_main {
        width: 48%;
        height: auto;
        aspect-ratio: 800 / 756;
    }

    .youtube_card {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: 24px 22px 22px;
    }

    .before_after_grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: calc(100% - 40px);
    }

    .visit_inner {
        gap: 48px;
        width: calc(100% - 160px);
    }

    .visit_info {
        flex: 1 1 0;
        width: auto;
        max-width: 600px;
    }

    .visit_map {
        flex: 1 1 0;
        width: auto;
        max-width: 750px;
    }
}

/* ---- ≤1200 : 헤더는 햄버거 메뉴로 ---- */
@media (max-width: 1200px) {
    .philosophy_vert {
        right: -8px;
        top: 0;
    }

    .header_nav {
        display: none;
    }

    .hamberger {
        display: flex;
        color: inherit;
    }

    .hero_title {
        font-size: 64px;
        line-height: 1.1;
    }
}

/* ---- ≤1080 : 태블릿 — 한 단 레이아웃으로 정리 ---- */
@media (max-width: 1080px) {
    .section_head {
        padding: 0 32px;
        box-sizing: border-box;
    }

    .main {
        --fz-h: 28px;
        --fz-lead: 17px;
    }

    .header_wrap {
        min-height: 72px;
        width: calc(100% - 64px);
    }

    .header_brand img {
        height: 44px;
    }

    .hero {
        height: 100vh;               /* svh 미지원 브라우저용 */
        height: 100svh;
        min-height: 600px;
        max-height: 900px;
        padding-top: 72px;
    }

    .hero_copy {
        gap: 36px;
    }

    .hero_title {
        font-size: clamp(44px, 8vw, 64px);
    }

    .hero_lead {
        font-size: 18px;
        line-height: 1.7;
    }

    .inner,
    .youtube_inner,
    .visit_inner,
    .program_grid,
    .before_after_grid {
        width: calc(100% - 64px);
    }

    .philosophy,
    .difference,
    .standard,
    .blog,
    .before_after,
    .youtube,
    .program,
    .consult,
    .visit {
        padding: 88px 0;
    }

    .program .section_head {
        margin-bottom: 36px;
    }

    .reservation {
        padding: 88px 32px;
    }

    /* 철학 */
    .philosophy_inner {
        flex-direction: column;
        align-items: stretch;
        gap: 56px;
    }

    .philosophy_text {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        gap: 24px;
    }

    .philosophy_title {
        font-size: clamp(48px, 9vw, 64px);
        line-height: 1.1;
    }

    .philosophy_art {
        flex: none;
        width: min(560px, 100%);
        margin: 0 auto;
    }

    .philosophy_vert {
        display: none;
    }

    /* 원장 */
    .difference_inner {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .difference_photo {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        aspect-ratio: 4 / 3.4;
    }

    .difference_text {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }

    /* 프로그램 */
    .program_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .card {
        padding: 22px;
        gap: 18px;
    }

    .card_img {
        height: auto;
        aspect-ratio: 1 / 0.96;
    }

    .card h3 {
        font-size: 26px;
    }

    .card h3 b {
        font-size: 15px;
    }

    .card p {
        min-height: 0;
    }

    .card .btn {
        align-self: flex-start;
    }

    /* 기준 */
    .standard_inner {
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
    }

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

    .standard_text {
        flex: none;
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }

    /* 상담 */
    .consult_inner {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .consult_text {
        width: auto;
        padding: 0 32px;
    }

    .consult_text .desc {
        max-width: 560px;
    }

    .consult_photos {
        flex: none;
        width: 100%;
    }

    .consult_track {
        gap: 14px;
    }

    .consult_photos .placeholder {
        flex: 0 0 min(560px, 68vw);
        width: min(560px, 68vw);
        height: auto;
        aspect-ratio: 650 / 480;
    }

    /* 블로그 · 전후 */
    .blog_head {
        margin-bottom: 36px;
    }

    .before_after {
        gap: 36px;
    }

    .before_after_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .before_after_item {
        height: 200px;
    }

    /* 유튜브 */
    .youtube_inner {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .youtube_main {
        width: min(100%, 640px);   /* 태블릿에서 가로로 퍼져 뚱뚱해 보이지 않게 PC와 같은 비율로 */
        margin: 0 auto;
        aspect-ratio: 800 / 756;
    }

    .youtube_side {
        flex: none;
        width: 100%;
    }

    .youtube_head h2 {
        font-size: 40px;
        line-height: 1.1;
    }

    .youtube_head p {
        margin-top: 14px;
    }

    .youtube_head_btns {
        margin-top: 4px;
    }

    .youtube_cards {
        margin-top: 28px;
    }

    .youtube_card {
        height: 320px;
    }

    .youtube_list {
        margin-top: 36px;
    }

    /* 오시는 길 */
    .visit_inner {
        flex-direction: column;
        gap: 48px;
    }

    .visit_info {
        flex: none;
        width: 100%;
        max-width: none;
        min-height: 0;
    }

    .visit_block {
        padding-left: 0;
        padding-right: 0;
    }

    .visit_tel {
        margin-top: 0;
    }

    .visit_map {
        flex: none;
        width: 100%;
        max-width: none;
        min-height: 0;
        aspect-ratio: 750 / 600;
    }
}

/* ---- ≤720 : 모바일 ---- */
@media (max-width: 720px) {
    .section_head {
        padding: 0 20px;
    }

    /* 마크업의 수동 줄바꿈은 데스크톱 기준이라 모바일에서는 자연스럽게 이어 씁니다 */
    .desc br,
    .youtube_head p br {
        display: none;
    }

    .main {
        --fz-eyebrow: 13px;
        --fz-h: 24px;
        --fz-lead: 16px;
        --fz-h3: 16px;
        --fz-body: 15px;
        --fz-small: 14px;
        --fz-cap: 12px;
        --fz-tel: 26px;
    }

    .header_wrap {
        min-height: 64px;
        width: calc(100% - 40px);
    }

    .header_brand img {
        height: 38px;
    }

    /* 모바일 헤더에도 LOGIN / LOGOUT 버튼을 작게 보여 줌 */
    .header_cta {
        height: 30px;
        padding: 0 11px;
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    .hero {
        min-height: 520px;
        padding-top: 64px;
    }

    .hero_copy {
        gap: 28px;
        width: calc(100% - 40px);
    }

    .hero_title {
        font-size: clamp(34px, 10.4vw, 46px);
        letter-spacing: -0.02em;
    }

    .hero_lead {
        font-size: 16px;
        line-height: 1.7;
    }

    .inner,
    .youtube_inner,
    .visit_inner,
    .program_grid,
    .before_after_grid {
        width: calc(100% - 40px);
    }

    .philosophy,
    .difference,
    .standard,
    .blog,
    .before_after,
    .youtube,
    .program,
    .consult,
    .visit {
        padding: 64px 0;
    }

    .reservation {
        padding: 64px 20px;
        gap: 16px;
    }

    .eyebrow {
        letter-spacing: 0.24em;
    }

    .section_head {
        gap: 10px;
    }

    .btn {
        height: 48px;
        padding: 0 28px;
    }

    .philosophy_inner {
        gap: 44px;
    }

    .philosophy_title {
        font-size: clamp(40px, 12vw, 52px);
    }

    .philosophy_keys li {
        padding: 18px 0 18px 14px;
    }

    .philosophy_keys em {
        font-size: 18px;
    }

    .philosophy_years strong {
        font-size: clamp(34px, 11.5vw, 52px);
    }

    .philosophy_years span {
        font-size: 11px;
    }

    .difference_photo {
        aspect-ratio: 4 / 4.6;
    }

    .difference_text {
        gap: 18px;
    }

    .difference_text .btn {
        align-self: flex-start;
    }

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

    .card_img {
        aspect-ratio: 4 / 3.4;
    }

    .standard_art {
        width: 100%;
    }

    .standard_list li {
        gap: 16px;
        padding: 18px 0;
    }

    .standard_list img {
        width: 30px;
        height: 30px;
    }

    .standard_label {
        font-size: 12px;
        line-height: 1.5;
    }

    .consult_inner {
        gap: 32px;
    }

    .consult_text {
        padding: 0 20px;
        gap: 18px;
    }

    .consult_track {
        gap: 10px;
    }

    .consult_photos .placeholder {
        flex-basis: 78vw;
        width: 78vw;
    }

    .blog_head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 28px;
    }

    .before_after {
        gap: 28px;
    }

    .before_after_item {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .youtube_main {
        aspect-ratio: 1 / 1;
    }

    .youtube_head {
        flex-wrap: wrap;
        gap: 14px;
        padding-bottom: 18px;
    }

    .youtube_head h2 {
        font-size: 32px;
    }

    .youtube_head_btns {
        margin-top: 0;
    }

    .youtube_btn {
        width: 104px;
        height: 38px;
    }

    /* 유튜브 카드: 상담 사진과 같은 슬라이더 — 가운데 한 장, 앞·뒤가 같은 폭으로 살짝 */
    .youtube_cards {
        margin: 24px -20px 0;
        overflow: hidden;
        cursor: grab;
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
    }

    .youtube_cards.is-drag {
        cursor: grabbing;
    }

    .youtube_track {
        display: flex;
        gap: 10px;
        width: max-content;
        will-change: transform;
        transition: transform 0.8s cubic-bezier(0.22, 0.8, 0.24, 1);
    }

    .youtube_cards.is-drag .youtube_track {
        transition: none;
    }

    .youtube_card {
        flex: 0 0 72vw;
        width: 72vw;
        height: 300px;
    }

    .youtube_row {
        gap: 14px;
        padding: 6px 0 16px;
    }

    .youtube_row span {
        flex: none;
        white-space: nowrap;
    }

    .youtube_row span img {
        width: 40px;
    }

    .reservation .btn_group {
        flex-direction: column;
        align-items: stretch;
        width: min(320px, 100%);
    }

    .visit_info > h2 {
        margin-bottom: 4px;
    }

    .visit_lead {
        margin: 10px 0 28px;
    }

    .visit_block {
        padding: 30px 0;
    }

    .visit_block li span {
        letter-spacing: 0.3em;
    }

    .visit_map {
        aspect-ratio: 1 / 1;
    }
}

/* ---- ≤420 : 소형 모바일 ---- */
@media (max-width: 420px) {
    .philosophy_keys em {
        font-size: 16px;
    }

    .philosophy_keys span {
        font-size: 12px;
    }

    .youtube_head h2 {
        font-size: 28px;
    }

    .youtube_card {
        flex-basis: 76vw;
        width: 76vw;
    }

    .visit_block li {
        gap: 8px;
    }

    .visit_block li span {
        letter-spacing: 0.15em;
    }
}

/* 모바일: 웹과 같이 오른쪽 세로 정렬, 크기만 축소 */
@media (max-width: 720px) {
    .quick_menu {
        right: 10px;
        bottom: calc(28px + env(safe-area-inset-bottom));
        gap: 6px;
    }

    .quick_list {
        gap: 6px;
    }

    .quick_btn {
        width: 48px;
        height: 48px;
        font-size: 9px;
        line-height: 1.2;
    }
}

/* 예약 띠 아래 안내 문구 */
.reservation_note {
    margin: 0;
    font-size: 13px;
    color: #ffffff;
}

/* 하단 사업자 정보 */
.footer {
    background: #342d29;
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

.footer a {
    color: inherit;
    text-decoration: none;
}

.footer_inner {
    width: min(1680px, calc(100% - 120px));
    margin: 0 auto;
    padding: 56px 0 44px;
    font-size: 15px;
    line-height: 1.6;
}

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

.footer_brand img {
    display: block;
    width: auto;
    height: 56px;
}

.footer_links {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 항목 사이 구분선: 아래 사업자 정보와 같은 | 스타일 */
.footer_links a:not(:last-child)::after {
    content: '|';
    margin-left: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.footer_info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 44px 0 0;
}

.footer_info > div {
    display: flex;
    gap: 6px;
}

/* 항목 사이 구분선 | */
.footer_info > div:not(:last-child)::after {
    content: '|';
    margin-left: 14px;
    color: rgba(255, 255, 255, 0.45);
}

.footer_info dt,
.footer_info dd {
    margin: 0;
}

.footer_copy {
    margin: 36px 0 0;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    font-size: 14px;
}

@media (max-width: 1080px) {
    .footer_inner {
        width: calc(100% - 64px);
        padding: 44px 0 36px;
    }
}

@media (max-width: 720px) {
    .footer_top {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer_info {
        flex-direction: column;
        gap: 8px;
        margin-top: 28px;
    }

    .footer_info > div {
        flex-wrap: wrap;
    }

    .footer_info > div::after {
        display: none;
    }

    .footer_inner {
        width: calc(100% - 40px);
        padding-bottom: 96px;
    }

    .footer_copy {
        margin-top: 28px;
        padding-top: 24px;
        font-size: 12px;
    }
}

/* 개인정보처리방침 · 이용약관 팝업 (푸터 링크) */
.policy_modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    box-sizing: border-box;
}

.policy_modal[hidden] {
    display: none;
}

.policy_modal_dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.policy_modal_box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: min(80vh, 780px);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.policy_modal_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 1.05rem 1.35rem 1.05rem 1.6rem;
    background: #545c48;
}

.policy_modal_title {
    margin: 0;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.policy_modal_close {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.policy_modal_close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 1.5px;
    background: #fff;
}

.policy_modal_close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.policy_modal_close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.policy_modal_body {
    background: #fff;
    overflow-y: auto;
    padding: 1.6rem 1.7rem 2rem;
    color: #333;
    font-size: 0.875rem;
    line-height: 1.75;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

.policy_modal_body h3 {
    margin: 1.6rem 0 0.7rem;
    font-size: 0.938rem;
    font-weight: 700;
    color: #222;
}

.policy_modal_body h3:first-child {
    margin-top: 0;
}

.policy_modal_body p {
    margin: 0 0 0.7rem;
}

.policy_modal_body ul {
    margin: 0 0 0.7rem;
    padding: 0 0 0 1.1rem;
    list-style: disc;
}

.policy_modal_body li {
    margin: 0.15rem 0;
}

.policy_modal_body .policy_note {
    color: #555;
}

body.policy_lock {
    overflow: hidden;
}

@media (max-width: 720px) {
    .policy_modal {
        padding: 1.25rem 0.85rem;
    }

    .policy_modal_box {
        max-height: min(86vh, 820px);
        border-radius: 14px;
    }

    .policy_modal_head {
        padding: 0.95rem 1rem 0.95rem 1.15rem;
    }

    .policy_modal_title {
        font-size: 1rem;
    }

    .policy_modal_body {
        padding: 1.25rem 1.15rem 1.6rem;
        font-size: 0.813rem;
    }
}


/* Standard 구간: 링 위의 점 3개가 120° 간격을 지키며 천천히 돕니다 */
@supports (width: 1cqw) {
    .standard_art {
        container-type: inline-size;
    }

    .standard_dot {
        left: 50%;
        top: 50%;
        margin: -6.916px 0 0 -6.916px;
        transform: rotate(var(--start)) translateY(-32.42cqw);
        animation: standard_orbit 26s linear infinite;
        will-change: transform;
    }

    .standard_dot_t { --start: 0deg; left: 50%; top: 50%; }
    .standard_dot_r { --start: 120deg; left: 50%; top: 50%; }
    .standard_dot_l { --start: 240deg; left: 50%; top: 50%; }
}

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

@media (prefers-reduced-motion: reduce) {
    .standard_dot {
        animation: none;
    }
}

/* 모바일: 문장 중간 <br> 줄바꿈은 무시하고 화면 폭에 맞춰 자연스럽게 (표 · 주소 · 라벨처럼 줄이 의미 있는 곳은 제외) */
@media (max-width: 720px) {
    .desc br,
    .section_title br,
    .sub_title br,
    .difference_title br,
    .philosophy_desc br,
    .visit_lead br,
    .trust p br,
    .point p br,
    .step_list p br,
    .standard_list p br,
    .check_list p br,
    .method_desc br,
    .process_list span br,
    .qa_a br,
    .callout br,
    .split_text > p br,
    .section_head br,
    .reservation br,
    .notice br,
    .faq p br,
    .footnote br {
        display: none;
    }
}

/* 모바일에서만 줄을 나누고 싶은 곳: <br class="br_m"> / 항상 유지: <br class="keep_br"> */
.br_m {
    display: none;
}

@media (max-width: 720px) {
    br.br_m,
    br.keep_br {
        display: inline;
    }
}

/* 서브 배너: 모바일에서도 준비한 줄바꿈을 지키고, 줄이 어색하게 꺾이지 않게 */
@media (max-width: 720px) {
    .page_hero_lead,
    .hero_lead {
        font-size: 15px;
        line-height: 1.7;
        word-break: keep-all;
        text-wrap: balance;
    }

    .page_hero_lead br,
    .hero_lead br {
        display: inline;
    }
}

/* 메인 블로그: 리스트형 (썸네일 · 카테고리/날짜 · 제목 · 요약 · 화살표) */
.blog_list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid rgba(52, 45, 41, 0.18);
}

.blog_list li {
    border-top: 1px solid rgba(52, 45, 41, 0.18);
}

.blog_row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 40px;
    padding: 28px 8px;
    color: #342d29;
    text-decoration: none;
    transition: background-color 0.3s;
}

.blog_row:hover {
    background-color: rgba(243, 242, 233, 0.55);
}

.blog_row_thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 8 / 5;
    border-radius: 8px;
    background: #d8d8ca;
}

.blog_row_thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.blog_row:hover .blog_row_thumb img {
    transform: scale(1.05);
}

.blog_row_body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.blog_row_meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blog_cat {
    display: inline-block;
    padding: 3px 11px;
    border: 1px solid #545c48;
    border-radius: 999px;
    font-family: var(--font-kr);
    font-style: normal;
    font-size: 12px;
    line-height: 1.4;
    color: #545c48;
}

.blog_date {
    font-family: var(--font-kr);
    font-size: 13px;
    color: #5e5a50;
}

.blog_title {
    font-family: var(--font-kr);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.45;
    color: #342d29;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s;
}

.blog_row:hover .blog_title {
    color: #545c48;
}

.blog_sub {
    font-family: var(--font-kr);
    font-size: 15px;
    line-height: 1.65;
    color: #5e5a50;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog_row_arrow {
    position: relative;
    justify-self: end;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(52, 45, 41, 0.3);
    border-radius: 50%;
    transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}

.blog_row_arrow::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border: solid #342d29;
    border-width: 1.5px 1.5px 0 0;
    transform: translate(-65%, -50%) rotate(45deg);
    transition: border-color 0.3s;
}

.blog_row:hover .blog_row_arrow {
    background: #342d29;
    border-color: #342d29;
    transform: translateX(6px);
}

.blog_row:hover .blog_row_arrow::before {
    border-color: #f3f2e9;
}

@media (max-width: 1080px) {
    .blog_row {
        grid-template-columns: 200px minmax(0, 1fr) 44px;
        gap: 28px;
    }

    .blog_title {
        font-size: 20px;
    }
}

@media (max-width: 720px) {
    .blog_row {
        grid-template-columns: 104px minmax(0, 1fr);
        align-items: start;
        gap: 16px;
        padding: 20px 0;
    }

    .blog_row:hover {
        background-color: transparent;
    }

    .blog_row_thumb {
        aspect-ratio: 1;
        border-radius: 6px;
    }

    .blog_row_body {
        gap: 6px;
    }

    .blog_title {
        font-size: 16px;
        line-height: 1.45;
    }

    .blog_sub {
        font-size: 13px;
        line-height: 1.55;
        -webkit-line-clamp: 2;
    }

    .blog_row_arrow {
        display: none;
    }
}

.blog_title,
.blog_sub {
    text-wrap: balance;
}

/* 아주 좁은 화면(아이폰 SE 등): 썸네일을 줄여 글 칸을 확보 */
@media (max-width: 420px) {
    .blog_row {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 14px;
    }
}

/* "블로그 전체 보기": 모든 화면에서 오른쪽 끝에 정렬 (모바일은 제목 아래 오른쪽) */
.blog_head .blog_more {
    flex: none;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .blog_head {
        align-items: stretch;
    }

    .blog_head .blog_more {
        align-self: flex-end;
    }
}

/* ---- 메인 OL Story: 웹은 카드 3열 (시안), 모바일은 위 리스트 그대로 ---- */
@media (min-width: 721px) {
    .blog_list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
        border-bottom: 0;
    }

    .blog_list li {
        border-top: 0;
    }

    .blog_list li:nth-child(n + 4) {
        display: none;
    }

    .blog_row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 0;
    }

    .blog_row:hover {
        background: none;
    }

    .blog_row_thumb {
        aspect-ratio: auto;
        height: 260px;
        border-radius: 0;
    }

    .blog_row_body {
        gap: 14px;
    }

    .blog_row_meta {
        display: contents;
    }

    .blog_cat {
        order: 1;
        padding: 0;
        border: 0;
        border-radius: 0;
        font-size: 12px;
        line-height: normal;
    }

    .blog_title {
        order: 2;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.4;
        -webkit-line-clamp: 2;
    }

    .blog_date {
        order: 3;
        font-size: 12px;
        line-height: 1;
    }

    .blog_sub,
    .blog_row_arrow {
        display: none;
    }
}

/* 높이가 낮은 화면(노트북): 화면 높이에 맞춰 퀵메뉴 버튼 크기를 줄여 7개가 전부 보이게 한다 */
@media (min-width: 1081px) and (max-height: 820px) {
    .quick_menu {
        --q: clamp(36px, calc((100vh - 96px) / 8.6), 64px);
        top: 70px;
        gap: 6px;
    }

    .quick_list {
        gap: 6px;
    }

    .quick_btn {
        width: var(--q);
        height: var(--q);
        padding: 0;
        font-size: clamp(8px, calc(var(--q) * 0.2), 11px);
        line-height: 1.15;
    }
}

/* 메뉴/닫기 토글은 모바일에서만 쓴다 (웹·태블릿은 버튼이 항상 펼쳐져 있음) */
@media (max-width: 720px) {
    .quick_list {
        max-height: min(70vh, 520px);
        overflow-y: auto;
        padding: 2px;
    }

    .quick_menu:not(.is-open) .quick_list {
        display: none;
    }

    .quick_menu .quick_toggle {
        display: flex;
    }
}

/* ---- 메인 전후사진: 한 줄 3개, 사진이 잘리지 않게 원본 비율 그대로 ---- */
.before_after_grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: min(1200px, calc(100% - 80px));
}

.before_after_item {
    height: auto;
    aspect-ratio: auto;
    align-items: stretch;
}

/* 사진 높이를 원본 비율대로 (전·후 높이가 다르면 높은 쪽에 맞춤) */
.before_after_item img {
    height: auto;
}

@media (max-width: 900px) {
    .before_after_grid {
        grid-template-columns: minmax(0, 520px);
        justify-content: center;
        width: calc(100% - 40px);
    }
}

/* ---- 퀵메뉴: 피그마 SNS 아이콘 (둥근 사각 칸 + 아래 이름, 흰 패널 안에 세로 배치) ----
   위쪽 .quick_btn(동그라미) 규칙을 .quick_menu .quick_sns 로 덮어씁니다. */
.quick_menu .quick_list {
    gap: 15px;
    padding: 14px 4px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(52, 45, 41, 0.14);
}

.quick_menu .quick_sns {
    gap: 4px;
    width: 56px;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #342d29;
    font-size: 11px;
    line-height: 1.2;
}

.quick_menu .quick_sns:hover {
    box-shadow: none;
}

.quick_menu .quick_ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.25s;
}

.quick_sns:hover .quick_ico {
    transform: translateY(-2px);
}

.quick_ico img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.quick_label {
    color: #342d29;
    letter-spacing: -0.03em;
}

/* 칸 색 */
.quick_sns_inquiry .quick_ico { background: #545c48; }
.quick_sns_phone .quick_ico { background: #342d29; }
.quick_sns_kakao .quick_ico { background: #fee500; }
.quick_sns_whatsapp .quick_ico { background: #25d366; }
.quick_sns_instagram .quick_ico { background: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%); }

/* 흰색 아이콘으로 바꿔 쓰는 것 */
.quick_sns_inquiry .quick_ico img,
.quick_sns_instagram .quick_ico img {
    filter: brightness(0) invert(1);
}

.quick_sns_kakao .quick_ico img { width: 24px; }

/* 칸까지 그려진 이미지(Line · WeChat · YouTube)는 칸을 꽉 채움 */
.quick_sns_line .quick_ico img,
.quick_sns_wechat .quick_ico img,
.quick_sns_youtube .quick_ico img {
    width: 100%;
    height: 100%;
}

/* 노트북처럼 화면 높이가 낮을 때: 칸·글자 크기를 줄여 8개가 다 보이게 */
@media (min-width: 1081px) and (max-height: 820px) {
    .quick_menu .quick_list {
        gap: 7px;
        padding: 10px 5px;
    }

    .quick_menu .quick_sns {
        width: 52px;
        height: auto;
        gap: 3px;
        font-size: 10px;
    }

    .quick_menu .quick_ico {
        width: clamp(28px, calc((100vh - 220px) / 15), 40px);
        height: clamp(28px, calc((100vh - 220px) / 15), 40px);
        border-radius: 8px;
    }

    .quick_ico img {
        width: 55%;
        height: 55%;
    }
}

@media (max-width: 1080px) {
    .quick_menu .quick_sns {
        width: 52px;
        height: auto;
        font-size: 10px;
    }

    .quick_menu .quick_ico {
        width: 36px;
        height: 36px;
        border-radius: 9px;
    }

    .quick_ico img {
        width: 20px;
        height: 20px;
    }
}

/* 모바일: 메뉴 버튼도 같은 둥근 사각 형태.
   퀵메뉴 폭을 펼친 목록 폭(칸 52px + 좌우 여백 8px)으로 고정해, 열고 닫을 때 버튼 위치가 움직이지 않게 함 */
@media (max-width: 720px) {
    .quick_menu {
        width: 60px;
    }

    .quick_menu .quick_list {
        box-sizing: border-box;
        width: 100%;
        gap: 10px;
        padding: 10px 4px;
    }

    .quick_menu .quick_toggle {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }
}

/* 모바일: 유튜브 대표 이미지는 숨기고, 로그인 전 흐린 전후사진은 1개만 */
@media (max-width: 720px) {
    .youtube_main {
        display: none !important;
    }

    .before_after_grid[aria-hidden="true"] .before_after_item:nth-child(n+2) {
        display: none;
    }
}

/* ---- 퀵메뉴: 전후사진 바로가기 ---- */
.quick_sns_ba .quick_ico {
    background: #626a55;
}

/* 항목이 늘어 퀵메뉴가 화면보다 길어지면 헤더를 덮지 않도록 높이를 제한하고 안에서 스크롤 */
.quick_menu .quick_list {
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    scrollbar-width: none;
}

.quick_menu .quick_list::-webkit-scrollbar {
    display: none;
}

@media (max-width: 1080px) {
    .quick_menu .quick_list {
        max-height: calc(100vh - 130px);
        max-height: calc(100dvh - 130px);
    }
}

/* ---- 모바일 퀵메뉴: 메뉴 버튼 없이 동그란 아이콘만 작게 세로로
   (카카오 · 전화상담 · WhatsApp · Line · WeChat · Instagram 만. 문의하기 · YouTube · 전후사진은 숨김) ---- */
@media (max-width: 720px) {
    .quick_menu {
        width: auto;
        right: 12px;
        bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .quick_menu .quick_toggle,
    .quick_menu .quick_label,
    .quick_menu .quick_sns_inquiry,
    .quick_menu .quick_sns_youtube,
    .quick_menu .quick_sns_ba {
        display: none;
    }

    .quick_menu .quick_list,
    .quick_menu:not(.is-open) .quick_list {
        display: flex;
        width: auto;
        max-height: none;
        gap: 8px;
        padding: 0;
        overflow: visible;
        border-radius: 0;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }

    .quick_menu .quick_sns {
        width: 40px;
    }

    .quick_menu .quick_ico {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: 0 3px 10px rgba(52, 45, 41, 0.22);
    }

    .quick_menu .quick_ico img {
        width: 20px;
        height: 20px;
    }

    .quick_menu .quick_sns_kakao .quick_ico img {
        width: 22px;
    }

    /* Line · WeChat 은 칸까지 그려진 이미지라 동그라미를 꽉 채움 */
    .quick_menu .quick_sns_line .quick_ico img,
    .quick_menu .quick_sns_wechat .quick_ico img {
        width: 100%;
        height: 100%;
    }
}