@charset "utf-8";
#header {z-index: 90; padding: 2.5rem 5rem 0;}
#header .inner {height: 9.6rem; padding: 0 5rem; background: #fff; border-radius: 5rem; box-shadow: 0 0.2rem 1.5rem rgba(0,0,0,0.25);}

#header .logo {width: 25.2rem; height: 5.2rem; flex-shrink: 0;}
#header .logo a {width: 100%; height: 100%;}
#header .logo img {width: 100%; height: 100%; object-fit: contain;}

#header .gnb {gap: 5rem;}
#header .gnb a {display: block; line-height: 2.4rem;}

#header .moBtn,
#header .menuBtn,
.menuDim,
.mMenu {display: none;}

@media all and (max-width: 880px){
    #header {padding: 0;}
    #header .inner {height: 5.6rem; padding: 0 2rem; border-radius: 0;}
    #header .logo {width: 14.53rem; height: 3rem;}
    #header .gnb {display: none;}

    /* .gnb 가 빠지면서 로고만 남으므로, 오른쪽 두 버튼을 auto 여백으로 몰아 붙입니다 */
    #header .moBtn {display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; height: 3rem; margin-left: auto; padding: 0 1.5rem; background: var(--fcp); border-radius: 2.8rem;}
    #header .moBtn .lb {font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.4rem; white-space: nowrap;}
    /* 화살표는 선(stroke)이 있어 내보낸 SVG 가 벡터보다 살짝 큽니다 */
    #header .moBtn .arr {width: 0.51rem; height: 0.87rem;}
    #header .moBtn .arr img {width: 100%; height: 100%; display: block;}

    /* 햄버거 — 헤더가 항상 흰 바라서 막대 색은 고정입니다 (늘봄과 달리 .act 전환 없음) */
    #header .menuBtn {
        display: block; flex-shrink: 0;
        width: 2.2rem; height: 1.8rem; margin-left: 1.4rem; padding: 0;
        background: none; border: 0; cursor: pointer;
    }
    #header .menuBtn .bar {display: block; width: 100%; height: 0.2rem; background: #222; border-radius: 0.1rem;}
    #header .menuBtn .bar + .bar {margin-top: 0.6rem;}

    /* 딤 : 헤더(90) 아래, 퀵버튼(80) 위 */
    .menuDim {
        display: block; z-index: 85;
        left: 0; top: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.45);
        opacity: 0; visibility: hidden;
        transition: opacity 0.3s ease, visibility 0s 0.3s;
    }
    body.menuOpen .menuDim {
        opacity: 1; visibility: visible;
        transition: opacity 0.3s ease, visibility 0s 0s;
    }

    /* 패널 : 오른쪽에서 밀려 들어옵니다. 헤더는 위에 그대로 떠 있습니다.
       --hdH 는 여는 순간 js 가 헤더 실제 높이를 넣어줍니다. */
    .mMenu {
        display: block; z-index: 88;
        right: 0; top: 0; width: 80%; height: 100%;
        padding: var(--hdH, 5.6rem) 0 4rem;
        background: #fff;
        transform: translateX(100%);
        /* 닫혀 있을 땐 visibility 로 완전히 빼둡니다 (탭 이동으로 들어가지 않게) */
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.35s;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.menuOpen .mMenu {
        transform: none;
        visibility: visible;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0s;
    }

    .mMenu .closeBtn {
        position: relative; display: block;
        width: 2.4rem; height: 2.4rem; margin: 2.4rem 3rem 0 auto; padding: 0;
        background: none; border: 0; cursor: pointer;
    }
    .mMenu .closeBtn::before,
    .mMenu .closeBtn::after {
        content: ''; position: absolute; left: 0; top: 50%;
        width: 100%; height: 0.2rem; margin-top: -0.1rem;
        background: #222; border-radius: 0.1rem;
    }
    .mMenu .closeBtn::before {transform: rotate(45deg);}
    .mMenu .closeBtn::after {transform: rotate(-45deg);}

    .mMenu .mGnb {padding: 3.6rem 3rem 0;}
    .mMenu .mGnb > li + li {margin-top: 3.4rem;}
    .mMenu .mGnb a {display: block; font-size: 1.8rem; font-weight: 700; color: #222; line-height: 2.4rem;}
    .mMenu .mGnb a:active {color: var(--fcp);}

    /* 로그인/회원가입(또는 로그인 후 사용자 메뉴)은 선으로 구분 */
    .mMenu .mUser {display: flex; align-items: center; gap: 1.6rem; padding-top: 3rem; border-top: 1px solid #e5e5e5;}
    .mMenu .mUser .uname {font-size: 1.6rem; font-weight: 600; color: var(--fcp);}
    .mMenu .mUser a {font-size: 1.6rem; font-weight: 500; color: #666;}
}


#apply {z-index: 9999}
#apply .btnArea {background: #013378; bottom: calc(100% - 0.1rem); padding: 1.2rem 0; width: 21.4rem; gap: 1.6rem; border-radius: 2rem 2rem 0 0; cursor: pointer; padding-left: 1rem;}
#apply .btnArea .ico {transition: 0.4s;}
#apply .contArea {background: #013378; max-width: 134rem; margin: 0 auto; border-radius: 5rem 5rem 0 0;}
#apply .contArea .logo {margin-right: 5.3rem;}
#apply .contArea .inner {padding: 3rem 0; align-items: center; justify-content: center;}
#apply .contArea .formArea {}
#apply .contArea .iptArea {gap: 1rem;}
#apply .contArea .iptArea input[type="text"] {width: 17rem; height: 3.6rem; background: #fff; border-radius: 0.5rem; padding: 0 1rem; font-size: 1.4rem; color: inherit; border: 0; box-shadow: none; font-family: inherit;}
#apply .contArea .iptArea select {width: 20rem; height: 3.6rem; background: #fff; border-radius: 0.5rem; padding: 0 1rem; font-size: 1.4rem; color: inherit; border: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url('../img/ic_select_arr.svg') right 2rem center / 1.1rem 0.6rem no-repeat; font-family: inherit;}
#apply .contArea .agrArea {margin-top: 1.1rem; gap: 0.6rem}
#apply .contArea .agrArea input[type="checkbox"] {}
#apply .contArea .agrArea label {cursor: pointer;}
#apply .contArea .submitBtn {background: #fff; width: 10rem; height: 6.8rem; border-radius: 0.8rem; padding: 0; display: grid; place-items: center; color: #013378; font-weight: bold; margin-left: 1rem}
#apply .contArea .submitBtn span {display: none}
#apply .contArea .number {margin-left: 6rem}
#apply .contArea .number .txt {}
#apply .contArea .number .num {}

#apply.on .btnArea .ico {transform: rotate(180deg);}

@media all and (max-width: 880px){
    #apply {}
    #apply .btnArea {width: 18.2rem; font-size: 1.4rem; border-radius: 2rem 2rem 0 0; gap: 1.2rem; padding: 1rem 0;}
    #apply .btnArea .ico {width: 1.3rem}
    #apply .contArea {border-radius: 0}
    #apply .contArea .inner {max-width: 89.23%; flex-direction: column; padding: 2.6rem 0 2.1rem;}
    #apply .contArea .formArea {width: 100%;}
    #apply .contArea .iptArea {flex-direction: column; gap: 0.8rem;}
    #apply .contArea .iptArea input[type="text"] {width: 100%; height: 3.4rem}
    #apply .contArea .iptArea select {width: 100%; height: 3.4rem}
    #apply .contArea .agrArea {font-size: 1rem; gap: 0.6rem; margin-top: 1.4rem;}
    #apply .contArea .agrArea input[type="checkbox"] {}
    #apply .contArea .agrArea label {}
    #apply .contArea .submitBtn {border-radius: 1.4rem; font-size: 1.2rem; padding: 0.6rem 2rem; height: auto; position: absolute; bottom: 1.3rem; width: auto; right: 0%; margin: 0; display: flex;}
    #apply .contArea .submitBtn span {display: inline;}
}

#modal {z-index: 9999; display: none}
#modal .bg {background: rgba(255, 255, 255, 0.5);}
#modal .box {background: #000000; border-radius: 3.6rem; padding: 4rem;}
#modal .box .titArea {}
#modal .box .titArea .tit {}
#modal .box .titArea .closeBtn {right: -2rem; top: -2rem; cursor: pointer;}
#modal .box .contArea {color: #979797; padding-top: 3rem;}

@media all and (max-width: 880px){
    #modal {}
    #modal .bg {}
    #modal .box {width: 100%; max-width: 93.33%; padding: 2.5rem; border-radius: 2.4rem;}
    #modal .box .titArea {}
    #modal .box .titArea .tit {font-size: 2.2rem}
    #modal .box .titArea .closeBtn {width: 3rem; height: 3rem; right: 0; top: 0;}
    #modal .box .contArea {font-size: 1.2rem; max-height: 50vh; overflow-y: auto;}
}

/* S1 — 메인 비주얼 (동영상)
   PC img/s1_vdo.mp4 (1920x910) · MO img/s1_vdo_mo.mp4 (375x668)
   video 의 background 는 로딩 중 흰 화면이 번쩍이지 않게 깔아둔 것입니다. */
#s1 {overflow: hidden;}
#s1 .vdoArea {height: 91rem;}
#s1 .vdoArea .vdo {height: 100%;}
#s1 .vdoArea .vdo video {width: 100%; height: 100%; object-fit: cover; display: block; background: #0b2245;}
#s1 .txtArea {top: 69.8rem;}
#s1 .txtArea .subt {line-height: 5.5rem; text-shadow: 0 0 1rem rgba(0,0,0,0.25);}
/* 시안 좌표 그대로 옮겼습니다. 두 글줄의 상자가 3px 겹치지만 글자끼리는 닿지 않습니다 */
#s1 .txtArea .tit {margin-top: -0.3rem; line-height: 7rem; text-shadow: 0 0 1rem rgba(0,0,0,0.25);}

@media all and (max-width: 880px){
    /* 모바일은 좌측 정렬, 좌여백 3rem */
    #s1 .vdoArea {height: 66.8rem;}
    #s1 .txtArea {top: 38.9rem; left: 3rem; width: auto; text-align: left;}
    #s1 .txtArea .subt {font-size: 2rem; line-height: 2.8rem; white-space: nowrap;}
    #s1 .txtArea .tit {margin-top: 0.6rem; font-size: 3.6rem; line-height: 4.52rem; white-space: nowrap;}
}


/* S2 — 사진 + 네이비 패널
   PC : 화면을 좌우 절반씩 (사진 960 / 패널 960)
   MO : 사진 위, 패널 아래로 쌓임
   연세대 엠블럼(.bgIco)은 패널 밖으로 삐져나간 만큼 overflow 로 잘립니다. */
#s2 .photo {width: 50%; height: 90rem;}
#s2 .photo img {width: 100%; height: 100%; object-fit: cover;}

#s2 .panel {width: 50%; height: 90rem; padding-top: 16.7rem; background: #00214f; overflow: hidden;}
#s2 .panel .bgIco {right: -4.2rem; bottom: -1rem; width: 47.31rem;}

#s2 .txtArea .subt {line-height: 2.8rem;}
#s2 .txtArea .tit {margin-top: 3.5rem; line-height: 7rem;}
#s2 .txtArea .line {margin-top: 4rem; width: 1px; height: 10rem; background: #fff;}
#s2 .txtArea .name {margin-top: 4rem; line-height: 6.5rem;}
/* 영문은 자간이 넓습니다. * 선택자의 -0.03em 을 덮어씁니다 */
#s2 .txtArea .eng {margin-top: 2rem; line-height: 2.8rem; letter-spacing: 0.15em;}

@media all and (max-width: 880px){
    #s2 {flex-direction: column;}
    #s2 .photo {width: 100%; height: 35.2rem;}

    #s2 .panel {width: 100%; height: 51rem; padding-top: 7rem;}
    #s2 .panel .bgIco {right: -1.6rem; bottom: -0.75rem; width: 22.76rem;}

    #s2 .txtArea .subt {font-size: 1.6rem; line-height: 1.6rem;}
    #s2 .txtArea .tit {margin-top: 2rem; font-size: 2.8rem; line-height: 3.8rem;}
    #s2 .txtArea .line {margin-top: 2.5rem;}
    #s2 .txtArea .name {margin-top: 2.5rem; font-size: 4rem; line-height: 4rem;}
    #s2 .txtArea .eng {margin-top: 1.5rem; font-size: 1.5rem; line-height: 1.5rem; letter-spacing: 0.1em;}
}


/* S3 — 의료진 소개
   배경 사진은 아주 옅게(15%) 깔리고, 그 위에 큰 영문 워터마크가 한 번 더 깔립니다. */
#s3 {height: 106.6rem; background: #f6f6f7; overflow: hidden;}
#s3 .bg {left: 0; top: 0; width: 100%; height: 100%; opacity: 0.15;}
#s3 .bg img {width: 100%; height: 100%; object-fit: cover;}
#s3 .watermark {left: 3.5rem; top: 91.6rem; color: #055ab0; opacity: 0.04; line-height: 13rem; letter-spacing: 0.05em; white-space: nowrap;}

#s3 .inner {position: relative; height: 100%; padding-top: 17rem;}

#s3 .label {line-height: 2rem; color: var(--fcp); letter-spacing: 0.1em;}
#s3 .tit {margin-top: 4rem; line-height: 6.5rem;}

/* 이름 + "대표원장" 뱃지 */
#s3 .docArea {margin-top: 10rem;}
#s3 .docArea .name {line-height: 6.5rem;}
#s3 .docArea .badge {left: 21.6rem; top: 2.8rem; display: flex; align-items: center; height: 3.6rem; padding: 0 1rem; background: var(--fcp);}
#s3 .docArea .badge span {line-height: 2.2rem;}

#s3 .line {margin-top: 2.4rem; width: 80rem; height: 1px; background: #d9dde2;}

/* 약력 — PC 는 2단(좌 51.4rem), MO 는 1단 */
#s3 .careers {margin-top: 3.5rem;}
#s3 .careers .col {width: 51.4rem; flex-shrink: 0;}
#s3 .careers .dotList + .dotList {margin-top: 2.5rem;}
#s3 .careers .dotList li {padding-left: 1.6rem; font-size: 1.8rem; font-weight: 400; color: #444; line-height: 3.2rem;}
#s3 .careers .dotList li::before {
    content: ''; position: absolute; left: 0; top: 1.4rem;
    width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--fcp);
}

/* 원장님 사진 — .inner 오른쪽 끝 기준, 섹션 바닥에 붙습니다 */
#s3 .photo {right: 1.9rem; bottom: 0; width: 45.2rem; height: 89.6rem;}
#s3 .photo img {width: 100%;}

@media all and (max-width: 880px){
    #s3 {height: 93.5rem;}
    /* 모바일은 배경 사진을 더 진하게, 가운데를 잘라 씁니다 */
    #s3 .bg {opacity: 0.2;}
    #s3 .bg img {object-position: center;}

    #s3 .inner {max-width: var(--innerMo); padding-top: 8rem;}

    #s3 .label {font-size: 1.3rem; line-height: 1.3rem; letter-spacing: 0.05em;}
    #s3 .tit {margin-top: 2rem; font-size: 2.8rem; line-height: 3.8rem;}

    #s3 .docArea {margin-top: 4rem;}
    #s3 .docArea .name {font-size: 4rem; line-height: 4rem;}
    #s3 .docArea .badge {left: 13rem; top: 1.5rem; height: 2.4rem; padding: 0 0.7rem;}
    #s3 .docArea .badge span {font-size: 1.4rem; line-height: 1.4rem;}

    #s3 .line {margin-top: 1.5rem; width: 100%;}

    #s3 .careers {margin-top: 2.5rem; flex-direction: column;}
    #s3 .careers .col {width: 100%;}
    #s3 .careers .col + .col {margin-top: 1.5rem;}
    #s3 .careers .dotList + .dotList {margin-top: 1.5rem;}
    #s3 .careers .dotList li {padding-left: 1.2rem; font-size: 1.5rem; line-height: 2.5rem;}
    #s3 .careers .dotList li::before {top: 1.05rem;}

    #s3 .photo {right: -2rem; width: 18rem; height: 35.2rem;}
}


/* 진료이야기 바로가기 띠배너 (.bnr) — S4 · S8 · S11 이 같은 형태입니다.
   기본형(S4 · S8) : PC 는 좌우가 밝아지는 대칭 그라데이션, 모바일은 오른쪽만 밝아짐
   S11 은 같은 골격에 코럴 단색 배경 + 노란 강조색 + 다른 화살표만 갈아끼웁니다.
   형태를 고칠 일이 생기면 .bnr 한 곳만 고치면 세 섹션이 같이 따라옵니다. */
.bnr {height: 11rem; background: linear-gradient(90deg, #2067c9 0%, #013378 30.288%, #013378 70.192%, #2067c9 100%);}
.bnr .inner {height: 100%; gap: 2.6rem;}
.bnr .txt {line-height: 3.8rem;}
.bnr .arr {width: 6rem; height: 6rem; flex-shrink: 0; transition: transform 0.3s;}
.bnr .inner:hover .arr {transform: translateX(0.6rem);}

/* S11 · S17 · S21 : 코럴 단색 변형 (문구도 "치료 이야기" 로 다릅니다) */
#s11, #s17, #s21 {background: var(--fcs);}

@media all and (max-width: 880px){
    .bnr {height: 6rem; background: linear-gradient(90deg, #013378 37.019%, #2067c9 100%);}
    .bnr .inner {gap: 1.5rem;}
    .bnr .txt {font-size: 1.8rem; line-height: 1.8rem;}
    .bnr .arr {width: 2.6rem; height: 2.6rem;}

    #s11, #s17, #s21 {background: var(--fcs);}
}


/* S5 — 사진 위에 걸쳐지는 흰 카드
   카드가 사진 아래쪽을 물고 내려옵니다 (PC 12rem / MO 6rem 겹침). */
#s5 {height: 82.1rem;}
#s5 .photo {left: 0; top: 0; width: 100%; height: 60rem;}
#s5 .photo > div {height: 100%;}
#s5 .photo img {width: 100%; height: 100%; object-fit: cover; object-position: bottom;}

/* 카드는 사진 위로 겹쳐야 해서 abs 로 띄우고, 카드 안은 flex 로 흐릅니다 */
#s5 .card {left: 0; right: 0; width: 140rem; height: 34.1rem; top: 48rem; margin: 0 auto;
           display: flex; gap: 8rem; padding: 6rem 0 0 12rem;
           background: #fff; border-radius: 2.5rem; box-shadow: 0 0 1.5rem rgba(0,0,0,0.2);}
#s5 .card .logo {width: 28.9rem; height: 21.4rem; flex-shrink: 0; margin-top: 0.4rem;}
#s5 .card .logo img {width: 100%; height: 100%; object-fit: contain;}
#s5 .card .tit {line-height: 5.5rem;}
#s5 .card .wrt {margin-top: 2rem; line-height: 3.6rem;}

@media all and (max-width: 880px){
    /* 모바일은 카드 안이 세로로 쌓이고 전부 가운데 정렬입니다 */
    #s5 {height: 68.9rem;}
    #s5 .photo {height: 29rem;}
    #s5 .photo img {object-position: center;}

    #s5 .card {width: var(--innerMo); height: 45.9rem; top: 23rem;
               flex-direction: column; align-items: center; gap: 0; padding: 4rem 0 0; text-align: center;
               border-radius: 1.5rem; box-shadow: 0 0 0.8rem rgba(0,0,0,0.2);}
    #s5 .card .logo {width: 16.3rem; height: 12.1rem; margin-top: 0;}
    #s5 .card .tit {margin-top: 3.5rem; font-size: 2.4rem; line-height: 3.4rem;}
    #s5 .card .wrt {margin-top: 2rem; font-size: 1.6rem; line-height: 2.6rem;}
}


/* S6 — 진료과목 (탭 + 스와이퍼)
   탭을 누르면 해당 슬라이드로 이동하고, 슬라이드가 바뀌면 탭이 따라옵니다.
   좌우 화살표는 슬라이드 안에 들어있어 loop 복제본까지 잡히도록
   js/common.js 에서 위임 방식으로 바인딩합니다. (늘봄 #s6 · #s9 와 같은 구조)
   모바일에는 시안상 탭이 없습니다. */
#s6 {padding: 18rem 0;}

#s6 .titArea .label {line-height: 2rem; letter-spacing: 0.1em;}
#s6 .titArea .tit {margin-top: 3rem; line-height: 6.5rem;}
#s6 .titArea .subt {margin-top: 3rem; line-height: 3.6rem;}

/* 탭 */
#s6 .tab {margin-top: 7rem; border-bottom: 1px solid #ddd;}
#s6 .tab li {width: 20rem;}
#s6 .tab li button {
    width: 100%; padding-bottom: 2.2rem; font-family: inherit;
    font-size: 2.2rem; font-weight: 500; color: #222; line-height: 2.2rem; letter-spacing: -0.03em;
    transition: color 0.2s;
}
#s6 .tab li.on button {font-weight: 700; color: var(--fcp);}
/* 활성 표시줄은 아래 1px 선 위에 2rem 겹쳐 올립니다 */
#s6 .tab li.on::after {
    content: ''; position: absolute; left: 0; bottom: -0.1rem;
    width: 100%; height: 0.3rem; background: var(--fcp);
}

/* 슬라이더 — 늘봄처럼 swiper-container 클래스를 붙이지 않으므로 overflow 를 직접 지정합니다 */
#s6 .s6Swiper {margin-top: 4rem; overflow: hidden;}
/* 사진과 글이 나란히 놓입니다. 좌표로 띄우지 않고 flex 로 배치합니다 */
#s6 .card {display: flex; gap: 8rem; height: 45rem;}
#s6 .card .thumb {width: 70rem; flex-shrink: 0; border: 1px solid #ddd; border-radius: 2rem; overflow: hidden;}
#s6 .card .thumb img {width: 100%; height: 100%; object-fit: cover;}

/* 글 묶음 — 위아래 여백만 주면 안쪽은 흐름대로 쌓입니다.
   화살표는 본문 줄 수와 무관하게 카드 아래에 고정돼야 해서 margin-top:auto 로 밀어냅니다 */
#s6 .card .txt {display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 7rem 0;}
#s6 .card .eng {line-height: 2rem; letter-spacing: 0.05em;}
#s6 .card .tit {margin-top: 2rem; line-height: 4rem;}
#s6 .card .wrt {margin-top: 2.5rem; line-height: 3.4rem;}

/* 번호 + 좌우 화살표 */
#s6 .card .navArea {margin-top: auto; height: 4rem;}
#s6 .card .navArea .num {line-height: 2.4rem;}
#s6 .card .navArea .total {margin-left: 0.6rem; color: #a1a1a1; line-height: 1.8rem;}
#s6 .card .navArea .prev {margin-left: 3.2rem;}
#s6 .card .navArea .next {margin-left: 0.8rem;}
#s6 .card .navArea button {width: 4rem; height: 4rem; flex-shrink: 0; transition: opacity 0.2s;}
#s6 .card .navArea button:hover {opacity: 0.7;}
#s6 .card .navArea button img {width: 100%; height: 100%; display: block;}
/* 다음 버튼은 이전 버튼 아이콘을 좌우로 뒤집어 씁니다 (같은 파일) */
#s6 .card .navArea .next img {transform: scaleX(-1);}

@media all and (max-width: 880px){
    #s6 {padding: 8rem 0;}
    #s6 .inner {max-width: var(--innerMo);}

    #s6 .titArea .label {font-size: 1.3rem; line-height: 1.3rem; letter-spacing: 0.05em;}
    #s6 .titArea .tit {margin-top: 2rem; font-size: 2.8rem; line-height: 2.8rem;}
    #s6 .titArea .subt {margin-top: 2rem; font-size: 1.6rem; line-height: 2.6rem;}

    #s6 .tab {display: none;}

    #s6 .s6Swiper {margin-top: 3rem;}
    /* 모바일은 사진이 위, 글이 아래로 쌓입니다 */
    #s6 .card {flex-direction: column; gap: 0; height: 52.1rem;}
    #s6 .card .thumb {width: 100%; height: 21.5rem; flex-shrink: 0; border-radius: 1.5rem;}

    #s6 .card .txt {padding: 3rem 0 0;}
    #s6 .card .eng {font-size: 1.4rem; line-height: 1.4rem;}
    #s6 .card .tit {margin-top: 1.5rem; font-size: 3.2rem; line-height: 3.2rem;}
    #s6 .card .wrt {margin-top: 2rem; font-size: 1.5rem; line-height: 2.5rem;}
}


/* S7 — 임플란트
   위 : 무절개 / 발치 즉시 두 칸을 흰 테두리 상자로 묶습니다.
        오른쪽 칸의 치료기간 비교 도표(시안 레이어 Group 633421)는 통이미지입니다.
   아래 : 왼쪽 문구 + 버튼, 오른쪽에 임플란트 종류 스와이퍼.
          버튼이 곧 탭이라 누르면 해당 슬라이드로 이동합니다. */
#s7 {height: 177.2rem; background: #242a31; overflow: hidden;}
#s7 .inner {padding-top: 15rem;}

/* 연세대 엠블럼 워터마크 · 오른쪽 아래 밝은 패널 (배경 장식이라 abs 로 둡니다) */
#s7 .bgIco {left: 5rem; top: 104.3rem; width: 26.9rem;}
#s7 .panel {left: 50%; right: 0; top: 137.9rem; height: 39.3rem; background: #333941; border-top-left-radius: 5rem;}

/* 위 블록 */
#s7 .badge {
    margin: 0 auto;
    width: 40rem; height: 4.2rem; background: #5886e9;
    display: flex; align-items: center; justify-content: center; line-height: 2.6rem;
}
#s7 .topTit {margin-top: 3.5rem; line-height: 6.5rem;}

#s7 .box {margin-top: 6rem; height: 62.7rem; border: 1px solid #fff;}
#s7 .box .cell {width: 50%; padding: 4rem;}
#s7 .box .cell + .cell {border-left: 1px solid #fff;}
#s7 .box .thumb {height: 34rem; border-radius: 2rem; overflow: hidden;}
#s7 .box .thumb img {width: 100%; height: 100%; object-fit: cover;}
#s7 .box .cTit {margin-top: 4rem; line-height: 3.5rem;}
#s7 .box .cWrt {margin-top: 2rem; line-height: 3.4rem;}

/* 아래 블록 — 왼쪽 글 묶음과 오른쪽 스와이퍼가 나란히 놓입니다.
   스와이퍼가 글보다 4rem 위에서 시작하므로 행은 스와이퍼 기준으로 잡고
   왼쪽 묶음에 padding-top 을 줍니다. */
#s7 .btm {display: flex; justify-content: space-between; margin-top: 15rem;}
#s7 .btmL {padding-top: 4rem;}
#s7 .btmTit {line-height: 6rem;}
#s7 .btmWrt {margin-top: 3rem; line-height: 3.6rem;}

#s7 .btns {margin-top: 6rem; width: 53rem; gap: 1rem;}
#s7 .btns li {width: 17rem;}
#s7 .btns li button {
    width: 100%; height: 5rem; border: 1px solid #cbcbcb; border-radius: 3.2rem; background: #fff;
    font-family: inherit; font-size: 1.8rem; font-weight: 600; color: #111;
    line-height: 1.8rem; letter-spacing: -0.04em; transition: 0.2s;
}
#s7 .btns li.on button {border-color: #5886e9; background: #5886e9; color: #fff;}

#s7 .s7Swiper {width: 60rem; flex-shrink: 0; overflow: hidden;}
#s7 .s7Swiper .swiper-slide {width: 60rem;}
#s7 .s7Swiper .thumb {height: 34rem; border-radius: 2rem; overflow: hidden;}
#s7 .s7Swiper .thumb img {width: 100%; height: 100%; object-fit: cover;}
#s7 .s7Swiper .sTit {margin-top: 4rem; line-height: 3.5rem;}
#s7 .s7Swiper .sWrt {margin-top: 2rem; line-height: 3.4rem;}

@media all and (max-width: 880px){
    /* 본문 줄바꿈에 따라 높이가 변할 수 있어 모바일은 흐름 높이에 맡깁니다 */
    #s7 {height: auto; padding-bottom: 8rem;}
    #s7 .inner {max-width: var(--innerMo); padding-top: 7rem;}

    #s7 .bgIco {left: 20.3rem; top: 103.4rem; width: 16.1rem;}
    /* 패널은 섹션 바닥에 붙습니다 (내용이 늘어나면 같이 내려가도록) */
    #s7 .panel {left: 0; top: auto; bottom: 0; height: 31.9rem;}

    #s7 .badge {width: 24.1rem; height: 2.8rem; font-size: 1.6rem; line-height: 1.6rem;}
    /* 시안상 한 줄이라 줄바꿈을 막습니다 (#s7 의 overflow:hidden 이 넘치는 양끝을 잘라줍니다) */
    #s7 .topTit {margin-top: 2rem; font-size: 3rem; line-height: 3rem; white-space: nowrap; text-align: center;}

    #s7 .box {margin-top: 3.5rem; height: 79.1rem; flex-direction: column;}
    #s7 .box .cell {width: 100%; padding: 3rem 1.5rem;}
    #s7 .box .cell + .cell {border-left: 0; border-top: 1px solid #fff; padding-top: 3.1rem;}
    #s7 .box .thumb {height: 16.7rem; border-radius: 1rem;}
    #s7 .box .cTit {margin-top: 2.5rem; font-size: 2.4rem; line-height: 2.6rem;}
    #s7 .box .cWrt {margin-top: 1.5rem; font-size: 1.5rem; line-height: 2.5rem;}
    /* 두 번째 칸(발치 즉시)만 본문 크기가 한 단계 큽니다 */
    #s7 .box .cell + .cell .cWrt {font-size: 1.6rem; line-height: 2.6rem;}

    /* 모바일은 세로로 쌓입니다 */
    #s7 .btm {flex-direction: column; margin-top: 15rem;}
    #s7 .btmL {padding-top: 0;}
    #s7 .btmTit {font-size: 2.6rem; line-height: 3.6rem;}
    #s7 .btmWrt {margin-top: 2rem; font-size: 1.5rem; line-height: 2.5rem;}

    #s7 .btns {margin-top: 3.5rem; width: 100%; gap: 0.8rem 0.9rem;}
    #s7 .btns li {width: 16.3rem;}
    #s7 .btns li button {height: 4rem; font-size: 1.6rem; line-height: 1.6rem;}

    /* 모바일은 오른쪽으로 2rem 삐져나가 다음 슬라이드가 살짝 보입니다 */
    #s7 .s7Swiper {margin-top: 3rem; width: 35.5rem;}
    #s7 .s7Swiper .swiper-slide {width: 33.5rem;}
    #s7 .s7Swiper .thumb {height: 19rem; border-radius: 1.5rem;}
    #s7 .s7Swiper .sTit {margin-top: 4rem; font-size: 3.2rem; line-height: 3.2rem;}
    #s7 .s7Swiper .sWrt {margin-top: 2rem; font-size: 1.6rem; line-height: 2.6rem;}
}


/* 체크 목록 (.chkList) — S9 · S12 공용
   .two 는 모바일에서만 두 줄이 되어 높이가 70 으로 커지는 항목입니다. */
.chkList li {
    display: flex; align-items: center; gap: 2rem;
    height: 7rem; padding: 0 3.5rem; background: #f1f2f4; border-radius: 3.5rem;
}
.chkList li + li {margin-top: 1.5rem;}
.chkList li .ico {width: 3.4rem; height: 3.4rem; flex-shrink: 0;}
.chkList li .ico img {width: 100%; height: 100%; display: block;}
.chkList li .lb {line-height: 3.6rem;}

/* 사진 공통 (S9 는 오른쪽, S12 는 왼쪽에 붙습니다) */
#s9 .photo img,
#s12 .photo img {width: 100%; height: 100%; object-fit: cover;}

/* 파란 뱃지 공통 */
#s9 .badge,
#s12 .badge {
    margin: 0 auto;
    height: 4.2rem; background: #5886e9;
    display: flex; align-items: center; justify-content: center; line-height: 2.6rem;
}


/* S9 — 건강보험 임플란트 (왼쪽 목록 + 오른쪽 사진)
   사진은 화면 오른쪽 끝까지 붙는 데다 목록과 나란히 겹치는 위치라 abs 로 두고,
   나머지는 위에서 아래로 흐릅니다. */
#s9 {height: 109.7rem; background: #fff; overflow: hidden;}
#s9 .inner {padding-top: 16rem;}
#s9 .photo {right: 0; top: 36.7rem; width: 92rem; height: 55rem; border-bottom-left-radius: 5rem; overflow: hidden;}
#s9 .badge {width: 43.1rem;}
#s9 .tit {margin-top: 3.5rem; line-height: 6rem;}
#s9 .chkList {margin-top: 9.8rem; width: 65rem;}


/* S12 — 사랑니 발치 (왼쪽 사진 + 오른쪽 목록, S9 의 좌우 반전) */
#s12 {height: 107.6rem; background: #fff; overflow: hidden;}
#s12 .inner {padding-top: 16.9rem;}
#s12 .photo {left: 0; top: 35.6rem; width: 92rem; height: 55rem; border-bottom-right-radius: 5rem; overflow: hidden;}
#s12 .badge {width: 42rem;}
#s12 .tit {margin-top: 3rem; line-height: 5.5rem;}
#s12 .chkList {margin-top: 13rem; margin-left: 75rem; width: 65rem;}


@media all and (max-width: 880px){
    .chkList li {gap: 1.2rem; height: 5rem; padding: 0 2rem;}
    .chkList li.two {height: 7rem;}
    .chkList li + li {margin-top: 1rem;}
    .chkList li .ico {width: 2.4rem; height: 2.4rem;}
    .chkList li .lb {font-size: 1.6rem; line-height: 1.6rem;}
    .chkList li.two .lb {line-height: 2rem;}
    /* 괄호 설명은 한 단계 작게 */
    .chkList li .lb .sm {font-size: 1.3rem;}

    /* 모바일은 사진도 본문 폭(좌우 2rem)에 맞춰 들어옵니다 */
    #s9 .photo,
    #s12 .photo {left: 2rem; right: 2rem; width: auto; height: 20rem;}
    #s9 .badge,
    #s12 .badge {height: 3rem; font-size: 1.6rem; line-height: 1.6rem;}

    #s9 {height: 88.2rem;}
    #s9 .inner {max-width: var(--innerMo); padding-top: 7rem;}
    #s9 .photo {top: 18.2rem; border-bottom-left-radius: 2rem;}
    /* S9 만 모바일에서 뱃지·제목이 왼쪽 정렬입니다 */
    #s9 .badge {margin: 0; width: 27.1rem;}
    #s9 .tit {margin-top: 2.2rem; font-size: 3.2rem; line-height: 3.2rem; text-align: left;}
    /* 제목과 목록 사이에 abs 사진(20rem)이 끼어 있어 그만큼 건너뜁니다 */
    #s9 .chkList {margin-top: 26rem; width: 100%;}

    #s12 {height: 80.5rem;}
    #s12 .inner {max-width: var(--innerMo); padding-top: 6.9rem;}
    #s12 .photo {top: 17.5rem; border-bottom-right-radius: 2rem;}
    #s12 .badge {width: 27.1rem;}
    #s12 .tit {margin-top: 2.2rem; font-size: 2.6rem; line-height: 2.6rem;}
    #s12 .chkList {margin-top: 26rem; margin-left: 0; width: 100%;}
}


/* S13 — 사랑니 발치 (사진 + 흰 알약 목록)
   아래쪽 연한 파란 띠(.band)가 사진 하단과 목록 뒤에 깔립니다. */
#s13 {height: 85.4rem; background: #fff; overflow: hidden;}
/* 띠는 화면 폭 전체 · 섹션 바닥까지 */
#s13 .band {left: 0; right: 0; top: 45rem; bottom: 0; background: #f0f4fb;}

#s13 .label {line-height: 2rem; letter-spacing: 0.1em;}
#s13 .tit {margin-top: 3rem; line-height: 6.5rem;}

/* 사진과 글 묶음이 나란히 놓입니다 */
#s13 .row {display: flex; margin-top: 6rem;}
#s13 .photo {width: 70rem; height: 48rem; flex-shrink: 0; border-radius: 2rem; overflow: hidden;}
#s13 .photo img {width: 100%; height: 100%; object-fit: cover;}

#s13 .txtCol {margin-left: 6rem; padding-top: 4rem;}
#s13 .subTit {line-height: 4.2rem;}
#s13 .wrt {margin-top: 2.5rem; line-height: 3.4rem;}

#s13 .pointList {margin-top: 7.5rem; width: 35rem;}
#s13 .pointList li {
    display: flex; align-items: center; gap: 1.5rem;
    height: 6rem; padding: 0 3rem; background: #fff; border-radius: 3.5rem;
}
#s13 .pointList li + li {margin-top: 1rem;}
#s13 .pointList li .ico {width: 2.6rem; height: 2.6rem; flex-shrink: 0;}
#s13 .pointList li .ico img {width: 100%; height: 100%; display: block;}
#s13 .pointList li .lb {line-height: 2.2rem;}

@media all and (max-width: 880px){
    #s13 {height: 81.7rem;}
    #s13 .inner {max-width: var(--innerMo);}
    #s13 .band {top: 27.4rem;}

    #s13 .label {font-size: 1.4rem; line-height: 1.4rem; letter-spacing: 0.05em;}
    #s13 .tit {margin-top: 2.2rem; font-size: 2.6rem; line-height: 3.6rem;}

    /* 모바일은 사진 아래로 글이 내려가고 가운데 정렬 */
    #s13 .row {flex-direction: column; margin-top: 3rem;}
    #s13 .photo {width: 100%; height: 23rem; border-radius: 1.5rem;}

    #s13 .txtCol {margin-left: 0; padding-top: 3.5rem; text-align: center;}
    #s13 .subTit {font-size: 2.5rem; line-height: 2.5rem;}
    #s13 .wrt {margin-top: 1.5rem; font-size: 1.6rem; line-height: 2.6rem;}

    #s13 .pointList {margin: 3rem auto 0; width: 25.5rem; text-align: left;}
    #s13 .pointList li {gap: 1.2rem; height: 5rem; padding: 0 2rem;}
    #s13 .pointList li .ico {width: 2.4rem; height: 2.4rem;}
    #s13 .pointList li .lb {font-size: 1.8rem; line-height: 1.8rem;}
}


/* S14 — 4단계 마취 시스템
   카드 4장이 PC 에서는 한 줄에 딱 맞고(335 x 4 + 20 x 3 = 1400), 모바일에서는 슬라이드가 됩니다.
   카드 내부 치수는 PC · 모바일이 완전히 같아 분기가 없습니다.
   배경색만 단계가 올라갈수록 진해집니다. */
#s14 {height: 105.3rem; background: #fff; overflow: hidden;}
#s14 .inner {padding-top: 15.6rem;}

#s14 .tit {line-height: 6.5rem;}
#s14 .wrt {margin-top: 2.5rem; line-height: 3.6rem;}

#s14 .s14Swiper {margin-top: 6rem;}
/* PC 는 gap 으로 간격을 주고, 모바일은 Swiper 가 margin 으로 처리하므로 gap 을 끕니다 */
#s14 .s14Swiper .swiper-wrapper {gap: 2rem;}
#s14 .swiper-slide {width: 33.5rem; height: auto;}

#s14 .card {height: 46rem; border-radius: 2rem; overflow: hidden;}
/* 카드별 스타일은 nth-child 가 아니라 카드에 붙인 c1~c4 로 잡습니다.
   모바일에서 Swiper loop 가 복제 슬라이드를 앞뒤로 붙이면 자식 순번이 밀려
   nth-child 규칙이 복제본에 적용되지 않습니다 (아이콘·배경이 사라짐). */
#s14 .card.c1 {background: #f0f4fb;}
#s14 .card.c2 {background: #e8f1ff;}
#s14 .card.c3 {background: #dae7ff;}
#s14 .card.c4 {background: #c8dcff;}

/* 카드 안은 위에서 아래로 흐릅니다. 사진(.pic)만 카드마다 위치가 달라 abs 입니다 */
#s14 .card {padding: 5rem 0 0 3rem;}
#s14 .card .step {
    width: 8rem; height: 3rem;
    display: flex; align-items: center; justify-content: center;
    background: #5886e9; border-radius: 1.5rem;
}
#s14 .card .step span {color: #fff; line-height: 1.8rem; letter-spacing: 0;}
#s14 .card .cTit {margin-top: 2rem; line-height: 3rem;}
#s14 .card .cWrt {margin-top: 2rem; line-height: 2.8rem;}

/* 사진은 카드마다 크기·위치가 다릅니다 (시안 좌표 그대로) */
#s14 .card .pic {position: absolute;}
#s14 .card .pic img {width: 100%; height: 100%; object-fit: cover; display: block;}
#s14 .card.c1 .pic {left: 14.2rem; top: 25.8rem; width: 17.5rem; height: 18.9rem;}
#s14 .card.c2 .pic {left: 12.1rem; top: 29.1rem; width: 19.48rem; height: 15.1rem;}
#s14 .card.c3 .pic {left: 18.3rem; top: 27.6rem; width: 11.6rem; height: 15.7rem;}
#s14 .card.c4 .pic {left: 17.7rem; top: 27.6rem; width: 11.7rem; height: 15.7rem;}
/* 2번 사진만 배경이 흰색이라 카드색에 녹여 씁니다 */
#s14 .card.c2 .pic img {mix-blend-mode: darken;}

@media all and (max-width: 880px){
    #s14 {height: 80.3rem;}
    #s14 .inner {max-width: var(--innerMo); padding-top: 6.8rem;}

    #s14 .tit {font-size: 2.6rem; line-height: 3.6rem;}
    #s14 .wrt {margin-top: 1.5rem; font-size: 1.6rem; line-height: 2.6rem;}

    #s14 .s14Swiper {margin-top: 3rem; overflow: hidden;}
    #s14 .s14Swiper .swiper-wrapper {gap: 0;}
}


/* S15 — 라미네이트 소개 (네이비 배경)
   PC 는 왼쪽 글 + 오른쪽 사진, 모바일은 글 아래로 사진이 내려갑니다. */
#s15 {height: 78rem; background: #00214f; overflow: hidden;}
#s15 .inner {padding-top: 17.4rem;}

/* 사진은 왼쪽 글과 나란히 오른쪽 절반을 차지하므로 PC 에서만 abs 로 띄웁니다 */
#s15 .photo {position: absolute; left: 70rem; top: 15rem; width: 70rem; height: 48rem; border-radius: 2rem; overflow: hidden;}
#s15 .photo img {width: 100%; height: 100%; object-fit: cover;}

#s15 .label {line-height: 2rem; letter-spacing: 0.1em;}
/* 두 줄의 글자 크기가 달라 각각 지정합니다 (40 / 60) */
#s15 .tit {margin-top: 2.5rem;}
#s15 .tit .l1 {display: block; font-size: 4rem; line-height: 7rem;}
#s15 .tit .l2 {display: block; font-size: 6rem; line-height: 7rem;}

#s15 .line {margin-top: 2.3rem; width: 70rem; height: 1px; background: #fff;}
#s15 .subTit {margin-top: 4.9rem; line-height: 4.2rem;}
#s15 .wrt {margin-top: 3rem; line-height: 3.4rem;}

@media all and (max-width: 880px){
    #s15 {height: 71.5rem;}
    #s15 .inner {max-width: var(--innerMo); padding-top: 6rem;}

    /* 모바일은 사진이 글 아래로 흐름대로 내려갑니다 */
    #s15 .photo {position: static; margin-top: 3.5rem; width: 100%; height: 23rem; border-radius: 1rem;}

    #s15 .label {font-size: 1.4rem; line-height: 1.4rem; letter-spacing: 0.05em;}
    #s15 .tit {margin-top: 2rem;}
    #s15 .tit .l1 {font-size: 2.2rem; line-height: 3.6rem;}
    #s15 .tit .l2 {font-size: 2.8rem; line-height: 3.6rem;}

    #s15 .line {margin-top: 2.8rem; width: 100%;}
    #s15 .subTit {margin-top: 2.9rem; font-size: 3.2rem; line-height: 3.2rem;}
    #s15 .wrt {margin-top: 2rem; font-size: 1.6rem; line-height: 2.6rem;}
}


/* S16 — 라미네이트 FAQ 아코디언
   답변(.body)은 기본으로 닫혀 있고 질문을 누르면 열립니다 (js/common.js).
   섹션 높이를 고정하지 않는 이유 : 아코디언이 열리고 닫히며 높이가 변합니다. */
#s16 {padding: 14.8rem 0 15rem; background: #fff;}

#s16 .badge {
    margin: 0 auto; width: 23.6rem; height: 5rem; background: #5886e9;
    display: flex; align-items: center; justify-content: center; line-height: 3.2rem;
}
#s16 .tit {margin-top: 3rem; line-height: 6.5rem;}

#s16 .faqList {margin-top: 6rem;}
#s16 .faqList .item {border: 1px solid #d9d9d9; border-radius: 1.5rem; overflow: hidden; background: #fff;}
#s16 .faqList .item + .item {margin-top: 3rem;}

/* min-height 는 테두리 1px 두 줄을 뺀 값입니다 (시안 항목 높이 120 = 118 + 2) */
#s16 .faqList .head {
    display: flex; align-items: center; justify-content: space-between; gap: 3rem;
    min-height: 11.8rem; padding: 0 5rem; cursor: pointer; text-align: left;
    width: 100%; font-family: inherit; background: none;
}
#s16 .faqList .head .q {font-size: 2.9rem; font-weight: 700; color: #222; line-height: 3.3rem; letter-spacing: -0.03em;}
#s16 .faqList .head .arr {width: 2.21rem; height: 1.32rem; flex-shrink: 0; transition: transform 0.3s;}
#s16 .faqList .head .arr img {width: 100%; height: 100%; display: block;}
/* 열리면 화살표가 위를 봅니다 */
#s16 .faqList .item.on .head .arr {transform: scaleY(-1);}

/* 기본은 닫힘. jQuery slideDown/slideUp 이 여닫습니다 */
#s16 .faqList .body {display: none; background: #f4f5fa;}
#s16 .faqList .body .inn {padding: 3rem 5rem;}
#s16 .faqList .body .inn p {line-height: 3.2rem;}

@media all and (max-width: 880px){
    #s16 {padding: 8rem 0 7rem;}
    #s16 .inner {max-width: var(--innerMo);}

    #s16 .badge {width: 11.9rem; height: 3rem; font-size: 1.6rem; line-height: 1.6rem;}
    #s16 .tit {margin-top: 2rem; font-size: 2.6rem; line-height: 3.6rem;}

    #s16 .faqList {margin-top: 3rem;}
    #s16 .faqList .item + .item {margin-top: 1.2rem;}

    #s16 .faqList .head {min-height: 6.8rem; padding: 2.1rem 2rem; gap: 1.5rem;}
    #s16 .faqList .head .q {font-size: 1.8rem; line-height: 2.6rem;}
    #s16 .faqList .head .arr {width: 1.33rem; height: 0.79rem;}

    #s16 .faqList .body .inn {padding: 2rem;}
    #s16 .faqList .body .inn p {font-size: 1.5rem; line-height: 2.5rem;}
}


/* S18 — 턱관절 치료 배너
   배경은 회색 바탕 + 사진(color-burn 합성) + 검은 그라데이션이 겹친 구조라
   CSS 로 재현하지 않고 시안 레이어(Group 633487)를 통이미지로 씁니다.
   PC 와 모바일이 합성·크롭이 서로 달라 이미지를 각각 둡니다. */
#s18 {height: 50rem; overflow: hidden;}
#s18 .bg {left: 0; top: 0; width: 100%; height: 100%;}
#s18 .bg > div {height: 100%;}
#s18 .bg img {width: 100%; height: 100%; object-fit: cover;}

#s18 .inner {padding-top: 13rem;}
#s18 .label {line-height: 2rem; letter-spacing: 0.1em;}
#s18 .tit {margin-top: 4rem; line-height: 5rem;}
#s18 .subTit {margin-top: 2rem; line-height: 6rem;}

@media all and (max-width: 880px){
    /* 모바일은 글이 가운데 정렬입니다 */
    #s18 {height: 55rem;}
    #s18 .inner {max-width: var(--innerMo); padding-top: 9.5rem; text-align: center;}

    #s18 .label {font-size: 1.4rem; line-height: 1.4rem; letter-spacing: 0.05em;}
    #s18 .tit {margin-top: 2.5rem; font-size: 2.4rem; line-height: 3.4rem;}
    #s18 .subTit {margin-top: 1.5rem; font-size: 4.2rem; line-height: 4.2rem;}
}


/* S19 — 턱관절 (한 섹션에 블록 두 개)
   블록A "턱관절 장애 원인" : PC 는 카드 4장 나열 / 모바일은 슬라이드
   블록B "턱관절 장애 증상" : 왼쪽 사진 + 오른쪽 아코디언 (모바일은 위아래)
   아코디언 내용은 기본으로 닫혀 있습니다. */
#s19 {height: 165rem; background: #001f4a; overflow: hidden;}
#s19 .inner {padding-top: 15rem;}

/* ── 블록 A */
#s19 .aTit {line-height: 5.5rem;}

#s19 .s19Swiper {margin-top: 6rem;}
#s19 .s19Swiper .swiper-wrapper {gap: 2rem;}
#s19 .s19Swiper .swiper-slide {width: 33.5rem; height: auto;}

#s19 .card {height: 42.5rem; background: #fff; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 0 1rem rgba(0,0,0,0.1);}
#s19 .card .thumb {height: 28rem;}
#s19 .card .thumb img {width: 100%; height: 100%; object-fit: cover;}
#s19 .card .cap {margin-top: 3.4rem; line-height: 3.8rem;}

#s19 .s19pg {display: none;}

/* ── 블록 B : 사진과 아코디언이 나란히 놓입니다 */
#s19 .bTit {margin-top: 16rem; line-height: 5.5rem;}

#s19 .row {display: flex; justify-content: space-between; margin-top: 6rem;}
#s19 .photo {width: 68rem; height: 50.5rem; flex-shrink: 0; border-radius: 1.5rem; overflow: hidden;}
#s19 .photo img {width: 100%; height: 100%; object-fit: cover;}

#s19 .symList {width: 68rem;}
#s19 .symList .item {padding: 2.85rem 4rem; background: #0f356b; border-radius: 1.5rem;}
#s19 .symList .item + .item {margin-top: 2rem;}

#s19 .symList .head {
    display: flex; align-items: center; justify-content: space-between; gap: 3rem;
    width: 100%; padding: 0; cursor: pointer; text-align: left; font-family: inherit; background: none;
}
#s19 .symList .head .q {font-size: 2.9rem; font-weight: 700; color: #fff; line-height: 3.3rem; letter-spacing: -0.03em;}
#s19 .symList .head .arr {width: 2.21rem; height: 1.32rem; flex-shrink: 0; transition: transform 0.3s;}
#s19 .symList .head .arr img {width: 100%; height: 100%; display: block;}
#s19 .symList .item.on .head .arr {transform: scaleY(-1);}

/* 기본은 닫힘. 마크업에 .on 이 붙어 있으면 처음부터 열린 상태로 그려집니다.
   (JS 가 여닫기 시작하면 slideUp/slideDown 이 인라인 display 를 덮어씁니다) */
#s19 .symList .body {display: none;}
#s19 .symList .item.on .body {display: block;}
#s19 .symList .body .inn {padding-top: 2rem;}
#s19 .symList .body .inn p {line-height: 3.2rem;}

@media all and (max-width: 880px){
    #s19 {height: 150.9rem;}
    #s19 .inner {max-width: var(--innerMo); padding-top: 8rem;}

    #s19 .aTit {font-size: 3rem; line-height: 3rem;}

    /* 모바일은 카드가 슬라이드로 바뀝니다 */
    #s19 .s19Swiper {margin-top: 3.5rem; overflow: hidden;}
    #s19 .s19Swiper .swiper-wrapper {gap: 0;}

    #s19 .s19pg {display: flex; justify-content: center; gap: 0.8rem; margin-top: 2.5rem;}
    #s19 .s19pg .swiper-pagination-bullet {width: 0.8rem; height: 0.8rem; margin: 0; background: #d9d9d9; opacity: 1;}
    #s19 .s19pg .swiper-pagination-bullet-active {background: #84a8f5;}

    #s19 .bTit {margin-top: 7.5rem; font-size: 3rem; line-height: 3rem;}

    /* 모바일은 세로로 쌓입니다 */
    #s19 .row {flex-direction: column; margin-top: 3.5rem;}
    #s19 .photo {width: 100%; height: 24.9rem; border-radius: 1rem;}

    #s19 .symList {margin-top: 3rem; width: 100%;}
    #s19 .symList .item {padding: 2.3rem 2rem; border-radius: 1rem;}
    #s19 .symList .item + .item {margin-top: 1.5rem;}
    #s19 .symList .head {gap: 1.5rem;}
    #s19 .symList .head .q {font-size: 2.4rem; line-height: 2.4rem;}
    #s19 .symList .head .arr {width: 1.77rem; height: 1.06rem;}
    #s19 .symList .body .inn p {font-size: 1.6rem; line-height: 2.6rem;}
}


/* S10 — 맞춤형 치료 4단계
   PC : 왼쪽 문구 + 오른쪽에 카드 4장을 2열로 엇갈리게 나열 (오른쪽 열이 50px 아래로)
   MO : 같은 카드가 슬라이드로 바뀝니다.
        늘봄 s8Init 방식대로 881px 아래에서만 Swiper 를 만들고 위에서는 파괴합니다.
        (PC 배치는 아래 .swiper-slide 절대좌표가 담당하므로 Swiper 가 없어야 합니다)

   카드 호버 : 배경이 흰색 → 파랑으로 반전되고 글자색·뱃지가 함께 뒤집힙니다.
   아이콘은 색을 CSS 로 못 바꾸므로 기본/호버 두 벌(.off/.on)을 겹쳐두고 투명도로 교체합니다. */
#s10 {height: 118rem; background: var(--fcp); overflow: hidden;}
#s10 .inner {height: 100%; padding-top: 20rem;}

#s10 .watermark {left: 5rem; top: 102rem; color: #fff; opacity: 0.06; line-height: 13rem; letter-spacing: 0.05em; white-space: nowrap;}

/* 왼쪽 문구는 흐름대로 쌓입니다 (카드 스와이퍼가 abs 로 오른쪽에 겹칩니다) */
#s10 .label {line-height: 1.8rem; letter-spacing: 0.1em;}
#s10 .tit {margin-top: 2.5rem; line-height: 6.8rem;}
#s10 .wrt1 {margin-top: 5rem; line-height: 3.4rem;}
#s10 .wrt2 {margin-top: 2.5rem; line-height: 3.4rem;}

/* 카드 배치 — 섹션 전체를 덮는 스와이퍼가 왼쪽 문구 위로 겹치므로 abs 를 유지합니다 */
#s10 .s10Swiper {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
/* height:auto — swiper.min.css 의 .swiper-slide{height:100%} 를 막지 않으면
   슬라이드 상자가 섹션 높이만큼 늘어납니다 */
#s10 .swiper-slide {position: absolute; width: 35rem; height: auto;}
#s10 .swiper-slide:nth-child(1) {left: 67rem;  top: 13rem;}
#s10 .swiper-slide:nth-child(2) {left: 105rem; top: 18rem;}
#s10 .swiper-slide:nth-child(3) {left: 67rem;  top: 58rem;}
#s10 .swiper-slide:nth-child(4) {left: 105rem; top: 63rem;}

/* 카드 — 안쪽은 흐름대로 쌓이고, 아이콘만 카드마다 위치가 달라 abs 입니다 */
#s10 .card {height: 42rem; padding: 19.1rem 0 0 3.5rem; background: #fff; border-radius: 2rem; transition: background 0.3s;}
#s10 .card .ico {position: absolute; top: 4rem;}
#s10 .card .ico img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: opacity 0.3s;}
#s10 .card .ico .on {opacity: 0;}

#s10 .card .badge {
    width: 10rem; height: 3rem;
    display: flex; align-items: center; justify-content: center;
    background: #5886e9; border-radius: 1.5rem; transition: background 0.3s;
}
#s10 .card .badge span {color: #fff; line-height: 1.8rem; letter-spacing: 0; transition: color 0.3s;}
#s10 .card .cTit {margin-top: 2rem; color: #222; line-height: 3rem; transition: color 0.3s;}
#s10 .card .cWrt {margin-top: 2rem; color: #444; line-height: 2.8rem; transition: color 0.3s;}
/* 4번 카드만 제목이 길어 자간을 한 단계 좁힙니다 */
#s10 .card.c4 .cTit {letter-spacing: -0.04em;}

/* 아이콘은 카드마다 크기·위치가 다릅니다 (시안 좌표 그대로).
   nth-child 로 잡으면 모바일 loop 복제본에 적용되지 않아 카드 클래스로 잡습니다. */
#s10 .card.c1 .ico {left: 22.8rem; width: 8.7rem; height: 7.8rem;}
#s10 .card.c2 .ico {left: 23.1rem; width: 8.9rem; height: 9.4rem;}
#s10 .card.c3 .ico {left: 22.8rem; width: 8rem;   height: 8.4rem;}
#s10 .card.c4 .ico {left: 23.1rem; width: 7.4rem; height: 9.6rem;}

/* 호버 반전 */
#s10 .card:hover {background: #5886e9;}
#s10 .card:hover .ico .off {opacity: 0;}
#s10 .card:hover .ico .on {opacity: 1;}
#s10 .card:hover .badge {background: #fff;}
#s10 .card:hover .badge span {color: #1e50bb;}
#s10 .card:hover .cTit,
#s10 .card:hover .cWrt {color: #fff;}

/* 페이지네이션은 모바일에서만 */
#s10 .s10pg {display: none;}

@media all and (max-width: 880px){
    #s10 {height: 99.1rem;}
    #s10 .inner {max-width: var(--innerMo); padding-top: 7rem;}
    /* 모바일 시안에는 배경 워터마크가 없습니다 */
    #s10 .watermark {display: none;}

    #s10 .label {font-size: 1.3rem; line-height: 1.3rem; letter-spacing: 0.05em;}
    #s10 .tit {margin-top: 2rem; font-size: 2.6rem; line-height: 3.6rem;}
    #s10 .wrt1 {margin-top: 2rem; font-size: 1.6rem; line-height: 2.6rem;}
    #s10 .wrt2 {margin-top: 1.5rem; font-size: 1.6rem; line-height: 2.6rem;}

    /* 오른쪽으로 2rem 삐져나가 다음 슬라이드가 살짝 보입니다 */
    #s10 .s10Swiper {top: 47.8rem; width: 35.5rem; height: auto; overflow: hidden;}
    #s10 .swiper-slide {position: relative; left: auto; top: auto; width: 33.5rem;}
    #s10 .swiper-slide:nth-child(n) {left: auto; top: auto;}

    #s10 .card {height: 41rem; padding: 19.4rem 0 0 3rem;}
    #s10 .card .cTit {margin-top: 2rem; font-size: 2.8rem; line-height: 2.8rem;}
    #s10 .card .cWrt {margin-top: 2rem; font-size: 1.6rem; line-height: 2.6rem;}

    #s10 .card.c1 .ico {left: 22.3rem; top: 4.5rem;}
    #s10 .card.c2 .ico {left: 22.6rem; top: 3.8rem;}
    #s10 .card.c3 .ico {left: 22.3rem; top: 4.3rem;}
    #s10 .card.c4 .ico {left: 22.6rem; top: 4.3rem;}

    #s10 .s10pg {display: flex; justify-content: center; gap: 0.8rem; left: 0; top: 91.3rem; width: 100%;}
    #s10 .s10pg .swiper-pagination-bullet {width: 0.8rem; height: 0.8rem; margin: 0; background: #d9d9d9; opacity: 1;}
    #s10 .s10pg .swiper-pagination-bullet-active {background: #5886e9;}
}


/* S20 — 턱관절 장애 치료과정
   카드 3장 : PC 나열(사이에 화살표) / 모바일 슬라이드 (늘봄 s8Init 방식)
   카드 사이 화살표는 장식이라 abs 로 띄우고 모바일에서는 숨깁니다. */
#s20 {height: 100rem; background: #f0f4fb; overflow: hidden;}
#s20 .inner {padding-top: 15rem;}

#s20 .tit {line-height: 5.5rem;}

#s20 .s20Swiper {margin-top: 6rem;}
#s20 .s20Swiper .swiper-wrapper {gap: 4rem;}
#s20 .swiper-slide {width: 44rem; height: auto;}

#s20 .card {height: 58.5rem; background: #fff; border-radius: 2rem; overflow: hidden;}
#s20 .card .thumb {height: 30rem;}
#s20 .card .thumb img {width: 100%; height: 100%; object-fit: cover;}
#s20 .card .txt {padding: 3.5rem 4rem 0;}
/* 번호와 구분선이 한 줄에 놓입니다 (선이 남는 폭을 채움) */
#s20 .card .numRow {display: flex; align-items: center; gap: 1.5rem;}
#s20 .card .numRow .bar {flex: 1; height: 2px; background: #d9d9d9;}
#s20 .card .numRow .num {line-height: 3.6rem;}
#s20 .card .cTit {margin-top: 1.3rem; line-height: 3.5rem;}
#s20 .card .cWrt {margin-top: 2rem; line-height: 3.2rem;}

/* 카드 사이 이동 화살표 (inner 기준 x = 시안 685·1165 - 260) */
#s20 .arrow {position: absolute; top: 52.3rem; width: 7rem; height: 7rem;}
#s20 .arrow.a1 {left: 42.5rem;}
#s20 .arrow.a2 {left: 90.5rem;}
#s20 .arrow img {width: 100%; height: 100%; display: block;}

#s20 .s20pg {display: none;}

@media all and (max-width: 880px){
    #s20 {height: 70.9rem;}
    #s20 .inner {max-width: var(--innerMo); padding-top: 7rem;}

    #s20 .tit {font-size: 3rem; line-height: 3rem;}

    #s20 .s20Swiper {margin-top: 3.5rem; overflow: hidden;}
    #s20 .s20Swiper .swiper-wrapper {gap: 0;}
    #s20 .swiper-slide {width: 33.5rem;}

    #s20 .card {height: 46.1rem; border-radius: 1rem;}
    #s20 .card .thumb {height: 22.8rem;}
    #s20 .card .txt {padding: 2.5rem 2.5rem 0;}
    #s20 .card .numRow {gap: 1.5rem;}
    #s20 .card .numRow .num {font-size: 2.4rem; line-height: 2.4rem;}
    #s20 .card .cTit {margin-top: 1.5rem; font-size: 2.6rem; line-height: 2.6rem;}
    #s20 .card .cWrt {margin-top: 1.5rem; font-size: 1.6rem; line-height: 2.6rem;}

    #s20 .arrow {display: none;}

    #s20 .s20pg {display: flex; justify-content: center; gap: 0.8rem; margin-top: 2.5rem;}
    #s20 .s20pg .swiper-pagination-bullet {width: 0.8rem; height: 0.8rem; margin: 0; background: #d9d9d9; opacity: 1;}
    #s20 .s20pg .swiper-pagination-bullet-active {background: #5886e9;}
}


/* S22 — 보존치료
   카드 4장 : PC 2×2 나열 / 모바일 슬라이드. 카드 안은 사진(왼쪽) + 글이 나란히,
   모바일 카드는 사진(위) + 글(아래 가운데 정렬)로 바뀝니다.
   신경치료 사진만 흰 배경이라 회색 바탕 + darken 블렌드로 녹여 씁니다. */
#s22 {height: 111.3rem; overflow: hidden;}
#s22 .inner {padding-top: 17rem;}

#s22 .label {line-height: 2rem; letter-spacing: 0.1em;}
/* 두 줄의 글자 크기가 다릅니다 (40 / 60) */
#s22 .tit {margin-top: 2rem;}
#s22 .tit .l1 {display: block; font-size: 4rem; line-height: 7.5rem;}
#s22 .tit .l2 {display: block; font-size: 6rem; line-height: 7.5rem;}

#s22 .s22Swiper {margin-top: 6.3rem;}
/* PC 는 2×2 로 감쌉니다 */
#s22 .s22Swiper .swiper-wrapper {flex-wrap: wrap; gap: 2rem;}
#s22 .swiper-slide {width: 69rem; height: auto;}

#s22 .card {display: flex; height: 26rem; background: #fff; border: 1px solid #d9d9d9; border-radius: 2rem; overflow: hidden;}
#s22 .card .thumb {width: 30.9rem; flex-shrink: 0;}
#s22 .card .thumb img {width: 100%; height: 100%; object-fit: cover;}
#s22 .card .txt {padding: 6.7rem 0 0 4rem;}
#s22 .card .cTit {line-height: 3.2rem;}
#s22 .card .cWrt {margin-top: 2rem; line-height: 3.6rem;}

/* 신경치료 사진 : 흰 배경 이미지를 회색 바탕에 녹입니다 */
#s22 .card .thumb.blend {background: #f5f5f5;}
#s22 .card .thumb.blend img {mix-blend-mode: darken;}

#s22 .s22pg {display: none;}

@media all and (max-width: 880px){
    #s22 {height: 73.7rem;}
    #s22 .inner {max-width: var(--innerMo); padding-top: 8rem;}

    #s22 .label {font-size: 1.4rem; line-height: 1.4rem; letter-spacing: 0.05em;}
    #s22 .tit {margin-top: 2.2rem;}
    #s22 .tit .l1 {font-size: 1.7rem; line-height: 1.7rem;}
    #s22 .tit .l2 {margin-top: 1rem; font-size: 2.8rem; line-height: 3.8rem;}

    #s22 .s22Swiper {margin-top: 3rem; overflow: hidden;}
    #s22 .s22Swiper .swiper-wrapper {flex-wrap: nowrap; gap: 0;}
    #s22 .swiper-slide {width: 33.5rem;}

    /* 모바일 카드는 세로 구성 + 가운데 정렬 */
    #s22 .card {flex-direction: column; height: 41.3rem; border-radius: 1.5rem; text-align: center;}
    #s22 .card .thumb {width: 100%; height: 24rem;}
    #s22 .card .txt {padding: 4rem 0 0;}
    #s22 .card .cTit {font-size: 2.8rem; line-height: 2.8rem;}
    #s22 .card .cWrt {margin-top: 1.7rem; font-size: 1.6rem; line-height: 2.6rem;}

    #s22 .s22pg {display: flex; justify-content: center; gap: 0.8rem; margin-top: 2.5rem;}
    #s22 .s22pg .swiper-pagination-bullet {width: 0.8rem; height: 0.8rem; margin: 0; background: #d9d9d9; opacity: 1;}
    #s22 .s22pg .swiper-pagination-bullet-active {background: #5886e9;}
}


/* S23 — 일반진료 과목 (카드 아코디언)
   PC : 카드 4장 중 하나만 열립니다. 열린 카드 74rem(파랑) / 닫힌 카드 20rem(흰색).
        열림·닫힘 내용물을 겹쳐 두고 width 전환 + 투명도로 교체합니다.
        열린 내용물은 폭을 74rem 으로 고정해 전환 중 글이 다시 흐르지 않게 합니다.
   MO : 카드 전부 열린(파란) 모습의 슬라이드가 됩니다. */
#s23 {height: 93.6rem; background: #072855; overflow: hidden;}
#s23 .bg {left: 0; top: 0; width: 100%; height: 100%; opacity: 0.7; mix-blend-mode: multiply;}
#s23 .bg img {width: 100%; height: 100%; object-fit: cover;}

#s23 .inner {padding-top: 13rem;}
#s23 .label {line-height: 2rem; letter-spacing: 0.1em;}
#s23 .tit {margin-top: 3rem; line-height: 6.5rem;}
#s23 .wrt {margin-top: 3rem; line-height: 3.6rem;}

/* 카드 목록이 곧 모바일 스와이퍼입니다 (.swiper-wrapper 가 flex 를 담당) */
#s23 .s23Swiper {margin-top: 5.2rem;}
#s23 .s23Swiper .swiper-wrapper {gap: 2rem;}
#s23 .item {
    width: 20rem; height: 38.7rem; flex-shrink: 0; overflow: hidden;
    background: #fff; border-radius: 2rem; cursor: pointer;
    transition: width 0.5s, background 0.5s;
}
#s23 .item.on {width: 74rem; background: #5886e9; cursor: default;}

/* 닫힌 모습 — 번호 · 이름 세로 쌓임, 아이콘은 바닥 기준 */
#s23 .item .closed {height: 100%; padding-top: 7rem; text-align: center; transition: opacity 0.3s;}
#s23 .item .closed .num {line-height: 3.2rem;}
#s23 .item .closed .cTit {margin-top: 2.5rem; line-height: 3.2rem;}
#s23 .item .closed .ico {position: absolute; left: 0; right: 0; bottom: 5rem; display: flex; justify-content: center;}
#s23 .item.on .closed {opacity: 0;}

/* 열린 모습 — 카드 위에 겹쳐 두고 열릴 때만 보입니다 */
#s23 .item .opened {
    position: absolute; left: 0; top: 0; width: 74rem; height: 100%;
    padding: 6.5rem 6rem 0; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
#s23 .item.on .opened {opacity: 1; pointer-events: auto;}

#s23 .opened .tRow {display: flex; align-items: center; gap: 3rem;}
#s23 .opened .tRow .oTit {line-height: 4rem;}
#s23 .opened .tRow .bar {flex: 1; height: 2px; background: rgba(255,255,255,0.3);}
#s23 .opened .tRow .num {line-height: 3.6rem;}
#s23 .opened .oWrt {margin-top: 4rem; line-height: 3.6rem;}
/* 링+흰 아이콘 묶음 (모바일 프레임의 120px 그룹을 150px 로 키워 씁니다) */
#s23 .opened .ring {position: absolute; right: 5rem; top: 19.7rem; width: 15rem; height: 15rem;}
#s23 .opened .ring img {width: 100%; height: 100%; display: block;}

#s23 .s23pg {display: none;}

@media all and (max-width: 880px){
    #s23 {height: 76.7rem;}
    #s23 .inner {max-width: var(--innerMo); padding-top: 7rem;}

    #s23 .label {font-size: 1.4rem; line-height: 1.4rem; letter-spacing: 0.05em;}
    #s23 .tit {margin-top: 2.2rem; font-size: 2.8rem; line-height: 2.8rem;}
    #s23 .wrt {margin-top: 2.5rem; font-size: 1.6rem; line-height: 2.6rem;}

    /* 모바일은 카드 전부 열린 모습의 슬라이드입니다 */
    #s23 .s23Swiper {margin-top: 4rem; overflow: hidden;}
    #s23 .s23Swiper .swiper-wrapper {gap: 0;}
    #s23 .item,
    #s23 .item.on {width: 33.5rem; background: #5886e9; cursor: default; transition: none;}
    #s23 .item .closed {display: none;}
    #s23 .item .opened {position: relative; width: 100%; opacity: 1; pointer-events: auto; padding: 4.5rem 3rem 0;}

    #s23 .opened .tRow {gap: 1.5rem;}
    #s23 .opened .tRow .oTit {font-size: 3rem; line-height: 3rem;}
    /* 모바일 시안에는 제목 옆 구분선이 없습니다 */
    #s23 .opened .tRow .bar {visibility: hidden;}
    #s23 .opened .tRow .num {font-size: 3rem; line-height: 3rem;}
    #s23 .opened .oWrt {margin-top: 2.5rem; font-size: 1.5rem; line-height: 2.5rem;}
    #s23 .opened .ring {right: 3rem; top: 22.7rem; width: 12rem; height: 12rem;}

    #s23 .s23pg {display: flex; justify-content: center; gap: 0.8rem; margin-top: 2.5rem;}
    #s23 .s23pg .swiper-pagination-bullet {width: 0.8rem; height: 0.8rem; margin: 0; background: #d9d9d9; opacity: 1;}
    #s23 .s23pg .swiper-pagination-bullet-active {background: #84a8f5;}
}


/* S24 — 진료 이야기 미리보기
   카드 3장 : PC 나열 / 모바일 슬라이드 (+ 모바일만 좌우 화살표).
   안내 바 양끝의 삼각형은 시안대로 위아래를 뒤집어 씁니다. */
#s24 {height: 111.8rem; background: #fff; overflow: hidden;}
#s24 .inner {padding-top: 17rem;}

#s24 .label {line-height: 2rem; letter-spacing: 0.1em;}
#s24 .tit {margin-top: 3.5rem; line-height: 6rem;}
#s24 .wrt {margin-top: 3.5rem; line-height: 3.2rem;}

/* 안내 바 — 파란 띠 + 양끝 삼각형 */
#s24 .notice {
    width: 69rem; height: 5.4rem; margin: 5rem auto 0;
    display: flex; align-items: center; justify-content: center; gap: 2rem;
    background: var(--fcp);
}
#s24 .notice .tri {width: 2.6rem; height: 2.25rem; flex-shrink: 0; transform: scaleY(-1);}
#s24 .notice .tri img {width: 100%; height: 100%; display: block;}
#s24 .notice .nTxt {line-height: 2.6rem;}

#s24 .s24Swiper {margin-top: 4rem;}
#s24 .s24Swiper .swiper-wrapper {gap: 4rem;}
#s24 .swiper-slide {width: 44rem; height: auto;}

#s24 .card {display: block;}
#s24 .card .thumb {height: 28rem; border: 1px solid #ddd; overflow: hidden;}
#s24 .card .thumb img {width: 100%; height: 100%; object-fit: cover;}
#s24 .card .cTit {margin-top: 2.5rem; line-height: 3.6rem;}
#s24 .card .date {margin-top: 1.5rem; line-height: 1.8rem;}

#s24 .navs {display: none;}

@media all and (max-width: 880px){
    #s24 {height: 84.8rem;}
    #s24 .inner {max-width: var(--innerMo); padding-top: 7.9rem;}

    #s24 .label {font-size: 1.4rem; line-height: 1.4rem; letter-spacing: 0.05em;}
    #s24 .tit {margin-top: 2rem; font-size: 2.8rem; line-height: 2.8rem;}
    /* 안내문은 본문 폭(335)보다 길어 화면 폭(375)까지 펼칩니다 (시안 4줄 유지) */
    #s24 .wrt {margin: 2rem -2rem 0; font-size: 1.5rem; line-height: 2.5rem;}

    #s24 .notice {width: 25.7rem; margin-top: 3rem; gap: 1rem;}
    #s24 .notice .tri {width: 1.6rem; height: 1.35rem;}
    #s24 .notice .nTxt {font-size: 1.4rem; line-height: 1.8rem; text-align: center;}

    #s24 .s24Swiper {margin-top: 3rem; overflow: hidden;}
    #s24 .s24Swiper .swiper-wrapper {gap: 0;}
    #s24 .swiper-slide {width: 33.5rem;}

    #s24 .card .thumb {height: 21.3rem;}
    #s24 .card .cTit {margin-top: 2.5rem; font-size: 2rem; line-height: 3rem;}
    #s24 .card .date {margin-top: 1.5rem; font-size: 1.5rem; line-height: 1.5rem;}

    /* 좌우 화살표 (s6 아이콘 재사용 · next 는 좌우 반전) */
    #s24 .navs {display: flex; justify-content: center; gap: 0.9rem; margin-top: 2.5rem;}
    #s24 .navs button {width: 4rem; height: 4rem; flex-shrink: 0;}
    #s24 .navs button img {width: 100%; height: 100%; display: block;}
    #s24 .navs .next img {transform: scaleX(-1);}
}


/* S25 — 병원 둘러보기
   가운데 정렬 풀블리드 슬라이더 (PC · 모바일 모두 스와이퍼).
   슬라이더는 .inner 밖에 두어 화면 전체를 씁니다. */
#s25 {height: 113rem; background: #fff; overflow: hidden;}
#s25 .inner {padding-top: 0;}

#s25 .badge {
    width: 22rem; height: 5rem; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--fcp); line-height: 3.2rem;
}
#s25 .tit {margin-top: 3rem; line-height: 6.5rem;}

/* 그림자가 잘리지 않게 슬라이더에 위아래 여유를 둡니다 */
#s25 .s25Swiper {margin-top: 2.5rem; padding: 1.5rem 0; overflow: hidden;}
#s25 .swiper-slide {width: 120rem; height: auto;}
#s25 .photo {height: 67rem; border-radius: 2rem; overflow: hidden; box-shadow: 0 0 2rem rgba(0,0,0,0.12);}
#s25 .photo img {width: 100%; height: 100%; object-fit: cover;}

#s25 .navs {display: none;}

@media all and (max-width: 880px){
    #s25 {height: 49.3rem;}

    #s25 .badge {width: 10.3rem; height: 3rem; font-size: 1.6rem; line-height: 1.6rem;}
    #s25 .tit {margin-top: 1.5rem; font-size: 2.8rem; line-height: 3.8rem;}

    #s25 .s25Swiper {margin-top: 3.5rem; padding: 0;}
    #s25 .swiper-slide {width: 33.5rem;}
    #s25 .photo {height: 18.7rem; border-radius: 1rem; box-shadow: none;}

    #s25 .navs {display: flex; justify-content: center; gap: 0.9rem; margin-top: 2rem;}
    #s25 .navs button {width: 4rem; height: 4rem; flex-shrink: 0;}
    #s25 .navs button img {width: 100%; height: 100%; display: block;}
    #s25 .navs .next img {transform: scaleX(-1);}
}


/* contact — 오시는 길 + 푸터 정보 (한 섹션)
   ※ 추후 PHP 전환 시 이 블록이 통째로 footer.php 로 들어갑니다.
   PC : 왼쪽 지도 + 오른쪽 정보 열, MO : 지도 위 / 정보 아래로 쌓입니다.
   배경은 네이비 그라데이션 + 사진(multiply 50%) 합성입니다.
   지도는 지금 이미지이고, 나중에 늘봄처럼 카카오맵 퍼가기로 교체할 자리입니다. */
#contact {height: 80.5rem; background: linear-gradient(to bottom, #042f69, #021939); overflow: hidden;}
#contact .bg {left: 0; top: 0; width: 100%; height: 100%; opacity: 0.5; mix-blend-mode: multiply;}
#contact .bg img {width: 100%; height: 100%; object-fit: cover;}

#contact .inner {display: flex; justify-content: space-between; align-items: flex-start;}

#contact .maps {width: 70rem; height: 58.5rem; margin-top: 11rem; flex-shrink: 0;
                border: 1px solid #d1d1d1; border-radius: 2rem; overflow: hidden;}
#contact .maps img {width: 100%; height: 100%; object-fit: cover; display: block;}

#contact .info {width: 62rem; margin-top: 12.8rem;}
#contact .info .logo {width: 27.1rem; height: 5.6rem;}
#contact .info .logo img {width: 100%; height: 100%; object-fit: contain; display: block;}

#contact .info .addr {margin-top: 4rem; line-height: 2.8rem;}
#contact .info .tel {margin-top: 1.5rem; color: #9ebcff; line-height: 4.6rem;}

#contact .info .tTit {margin-top: 4rem; line-height: 2.4rem;}
#contact .info .timeList {margin-top: 1.6rem;}
#contact .info .timeList li {display: flex; line-height: 3.4rem;}
#contact .info .timeList .lb {width: 14.4rem; flex-shrink: 0;}
#contact .info .note {margin-top: 1.6rem; color: #9ebcff; line-height: 1.6rem;}

/* 하단 링크 · 사업자 정보 (푸터 몫) */
#contact .links {display: flex; align-items: center; gap: 1.2rem; margin-top: 6rem;}
#contact .links a {line-height: 1.6rem;}
#contact .links .dv {width: 1px; height: 1.2rem; background: #fff;}
#contact .links .dv.gray {background: #a4a4a4;}
#contact .links .admin {color: #a4a4a4;}

#contact .biz {display: flex; gap: 2rem; margin-top: 3rem;}
#contact .biz span {line-height: 1.6rem;}
#contact .copy {margin-top: 1.2rem; line-height: 1.6rem;}

@media all and (max-width: 880px){
    #contact {height: 88.3rem;}
    #contact .inner {max-width: var(--innerMo); flex-direction: column;}

    #contact .maps {width: 100%; height: 28rem; margin-top: 6rem; border-radius: 1rem;}

    #contact .info {width: 100%; margin-top: 3.5rem;}
    #contact .info .logo {width: 17.4rem; height: 3.6rem;}

    #contact .info .addr {margin-top: 3rem; font-size: 2rem; line-height: 2rem;}
    #contact .info .tel {margin-top: 1rem; font-size: 3.8rem; line-height: 3.8rem;}

    #contact .info .tTit {margin-top: 3rem; font-size: 1.8rem; line-height: 1.8rem;}
    #contact .info .timeList {margin-top: 1.3rem;}
    #contact .info .timeList li {line-height: 2.6rem;}
    #contact .info .timeList span {font-size: 1.6rem;}
    #contact .info .timeList .lb {width: 9.8rem;}
    #contact .info .note {margin-top: 1.3rem; font-size: 1.4rem; line-height: 1.4rem;}

    #contact .links {margin-top: 4rem; gap: 1.1rem;}
    #contact .links a {font-size: 1.4rem;}

    /* 모바일은 사업자번호가 다음 줄로 내려갑니다 */
    #contact .biz {margin-top: 2rem; flex-wrap: wrap; gap: 1rem 2rem;}
    #contact .biz span {font-size: 1.4rem; line-height: 1.4rem;}
    /* 자간을 한 단계 좁혀야 한 줄에 들어갑니다 (시안 -0.04em) */
    #contact .copy {margin-top: 1rem; font-size: 1.4rem; line-height: 1.4rem; letter-spacing: -0.04em; white-space: nowrap;}
}


/* 푸터 */
#footer {height: 20.8rem; background: #27312b;}
#footer .inner {display: flex; justify-content: space-between; align-items: flex-start; padding-top: 5rem;}

#footer .info .row {gap: 2rem;}
#footer .info .row + .row {margin-top: 1.5rem;}
#footer .info .row span,
#footer .info .row a {line-height: 1.6rem;}
#footer .info .admin {color: #a3a3a3;}
#footer .info .copy {margin-top: 3.5rem; line-height: 1.6rem;}

#footer .logo {width: 25.4rem; margin-top: 1.9rem; flex-shrink: 0;}

@media all and (max-width: 880px){
    #footer {height: 26.7rem;}
    #footer .inner {max-width: var(--innerMo); flex-direction: column; align-items: center; padding-top: 3rem;}

    #footer .logo {order: -1; width: 16.6rem; margin-top: 0;}

    #footer .info {margin-top: 2rem; text-align: center;}
    #footer .info .row {flex-wrap: wrap; justify-content: center; gap: 1.2rem 1.5rem;}
    /* 1행은 PC와 달리 한 줄에 하나씩 */
    #footer .info .row1 {flex-direction: column; align-items: center;}
    #footer .info .row + .row {margin-top: 1.2rem;}
    #footer .info .row span,
    #footer .info .row a {font-size: 1.4rem; line-height: 1.4rem;}
    #footer .info .copy {font-size: 1.3rem; line-height: 1.4rem; margin-top: 2.5rem;}
}


/* 퀵버튼 (플로팅바) */
.quick_btn {z-index: 80; right: 5rem; top: calc(50% + 2.5rem); transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 1.5rem; pointer-events: none;}
.quick_btn .qList a,
.quick_btn .qToggle,
.quick_btn .qTop {pointer-events: auto;}

/* 시안 실측 : 바 90×430 / 안쪽 여백 35 / 항목 48(아이콘26+간격10+글자12) / 항목 사이 30 */
.quick_btn .qList {width: 9rem; padding: 3.5rem 0; background: var(--fcp); border-radius: 4.5rem;}
.quick_btn .qList li + li {margin-top: 3rem;}
.quick_btn .qList a {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; transition: opacity 0.2s;}
.quick_btn .qList a:hover {opacity: 0.75;}
.quick_btn .qList .ico {display: flex; align-items: center; justify-content: center; height: 2.6rem;}
.quick_btn .qList .ico img {width: auto; height: 2.6rem; display: block;}
.quick_btn .qList .lb {font-size: 1.2rem; font-weight: 700; line-height: 1.2rem; color: #fff; white-space: nowrap; letter-spacing: -0.03em;}

.quick_btn .qTop {display: flex; align-items: center; justify-content: center; width: 9rem; height: 9rem; background: #fff; border-radius: 50%; box-shadow: 0 0 0.5rem rgba(0,0,0,0.15); transition: 0.2s;}
.quick_btn .qTop:hover {box-shadow: 0 0 0.5rem rgba(0,0,0,0.25);}
.quick_btn .qTop img {width: auto; height: 3.1rem; display: block;}

/* + 버튼은 모바일에서만 */
.quick_btn .qToggle {display: none;}

@media all and (max-width: 880px){
    /* 모바일은 우측 하단 고정. + 를 누르면 목록이 위로 펼쳐집니다 */
    .quick_btn {right: 2rem; top: auto; bottom: 3rem; transform: none; align-items: flex-end; gap: 0.8rem;}

    /* 평소엔 숨겨 두고 + 를 누르면 아래에서 위로 스르륵 올라옵니다 */
    .quick_btn .qList {
        width: 6rem; padding: 2.4rem 0; border-radius: 4.5rem;
        transform-origin: 50% 100%;
        transform: translateY(2rem) scale(0.92);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, visibility 0s 0.35s;
    }
    .quick_btn.on .qList {
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, visibility 0s 0s;
    }
    /* PC 비율(35 : 30 : 26)을 그대로 줄인 값입니다 */
    .quick_btn .qList li + li {margin-top: 2rem;}
    .quick_btn .qList a {gap: 0.7rem;}
    .quick_btn .qList .ico {height: 2rem;}
    .quick_btn .qList .ico img {height: 2rem;}
    .quick_btn .qList .lb {font-size: 1rem; line-height: 1rem;}

    .quick_btn .qToggle {position: relative; display: block; width: 6rem; height: 6rem; padding: 0; background: var(--fcp); border: 0; border-radius: 50%; cursor: pointer;}
    .quick_btn .qToggle .bar {position: absolute; left: 50%; top: 50%; width: 0.2rem; height: 1.8rem; margin: -0.9rem 0 0 -0.1rem; background: #fff; border-radius: 0.1rem; transition: transform 0.3s;}
    .quick_btn .qToggle .bar:last-child {transform: rotate(90deg);}
    /* 열리면 + 가 × 로 바뀝니다 */
    .quick_btn.on .qToggle .bar {transform: rotate(45deg);}
    .quick_btn.on .qToggle .bar:last-child {transform: rotate(135deg);}

    .quick_btn .qTop {width: 6rem; height: 6rem;}
    .quick_btn .qTop img {height: 2.1rem;}
}


/* ======================== 서브페이지 ======================== */

/* 진료이야기 목록 (list.php)
   시안 : PC con 진료이야기_list 69:4106 / MO 69:4607
   #header 가 fixed 라 #board 는 페이지 맨 위(y=0)에서 시작합니다.
   그래서 시안의 y 좌표를 padding-top 에 그대로 넣으면 맞습니다 (PC 280 / MO 130).

   늘봄과 다른 곳은 네 군데뿐입니다.
     · 타이틀 위 아이콘 없음 (늘봄 #board .tit .icon)
     · padding      28rem  / 16.8rem  (늘봄 25rem / 17rem)
     · btmArea 여백 16.8rem           (늘봄 12.3rem)
     · 글작성 버튼 네이비             (늘봄 초록 #4a8537) */
#board {padding: 28rem 0 16.8rem;}

#board .tit h2 {line-height: 8.5rem;}
#board .tit .subt {margin-top: 3.5rem; line-height: 3.5rem;}

#board .boardList {margin-top: 8rem; gap: 6rem 4rem;}
#board .boardList li {width: calc((100% - 4rem) / 2);}

#board .boardList .thumb {position: relative; height: 40rem; overflow: hidden;}
#board .boardList .thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
/* 회원전용 뱃지 */
#board .boardList .badge {top: 3.1rem; right: 2.3rem; height: 4.5rem; padding: 0 1.9rem; border-radius: 5rem; background: #8b8b8b; line-height: 2.4rem;}

/* 제목은 시안대로 한 줄까지만. 넘치면 … 으로 자릅니다 */
#board .boardList .txt {margin-top: 4rem; line-height: 4.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#board .boardList .date {margin-top: 2rem; line-height: 2.4rem;}

#board .btmArea {margin-top: 16.8rem; height: 4.2rem;}
#board .paging {gap: 2rem;}
#board .paging .arw {width: 0.7rem; height: 1.2rem;}
#board .paging .arw img {width: 100%; height: 100%;}
#board .paging .num {gap: 0.4rem;}
#board .paging .num a {width: 4rem; height: 4rem; border-radius: 50%; line-height: 2.56rem;}
#board .paging .num li.on a {background: #e8ebed;}

#board .writeBtn {right: 0; top: 0; width: 10rem; height: 4.2rem; border-radius: 0.6rem; background: var(--fcp); line-height: 2.7rem; color: #fff;}

@media all and (max-width: 880px){
    #board {padding: 13rem 0 7rem;}
    #board .inner {max-width: var(--innerMo);}

    #board .tit h2 {font-size: 3rem; line-height: 3rem;}
    #board .tit .subt {margin-top: 1.5rem; font-size: 1.6rem; line-height: 2.6rem;}

    #board .boardList {margin-top: 5rem; gap: 4rem 0;}
    #board .boardList li {width: 100%;}

    #board .boardList .thumb {height: 19.7rem;}
    #board .boardList .badge {top: 1.5rem; right: 1.5rem; height: 3rem; padding: 0 1.2rem; font-size: 1.6rem; line-height: 1.6rem;}

    #board .boardList .txt {margin-top: 2rem; font-size: 2.2rem; line-height: 2.2rem;}
    #board .boardList .date {margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.8rem;}

    /* 모바일은 페이징 아래로 글작성 버튼이 내려옵니다 */
    #board .btmArea {flex-direction: column; height: auto; margin-top: 7rem;}
    #board .writeBtn {position: static; margin-top: 2.5rem; width: 6.9rem; height: 2.9rem; border-radius: 0.4rem; font-size: 1.4rem; line-height: 2.1rem;}
}



/* 진료이야기 상세 (view.php)
   시안 : PC con 진료이야기_view 69:4256 / MO 69:4750
   목차 · 본문 · 소제목 · 배너 · 작성자 · 다른칼럼의 간격은 늘봄과 전부 동일했습니다.
   달라진 곳만 적으면 아래 다섯 가지입니다.
     · 타이틀 위 아이콘 없음 (늘봄 #view .titArea .icon)
     · padding        25rem / 20rem      (늘봄 25rem / 22rem)
     · .secTit        #f0f4fb + 네이비 바 (늘봄 #e8f2e4 + 초록)
     · .banner        네이비 바탕 / 전화 버튼 #5886e9 (늘봄 #163e09 / #4a8537)
     · .writer .related  #f0f4fb          (늘봄 #f5f9f3) */
#view {padding: 25rem 0 20rem;}

#view .titArea .label {line-height: 2.6rem;}
#view .titArea .bar {margin-top: 3rem; width: 3.2rem; height: 0.2rem; background: var(--fcp);}
#view .titArea .tit {margin-top: 4rem; line-height: 5.2rem;}
#view .titArea .date {margin-top: 3rem; line-height: 2rem;}

/* 목차 */
#view .toc {margin-top: 8rem; padding: 4rem 6rem; background: #f2f2f2; border-radius: 2rem;}
#view .toc .tocTit {line-height: 2.8rem;}
#view .toc .line {margin-top: 2rem; height: 1px; background: #c9c9c9;}
#view .toc .tocList {margin-top: 3rem;}
#view .toc .tocList > li + li {margin-top: 2rem;}
#view .toc .tocList > li > a {display: block; line-height: 2.4rem;}
#view .toc .tocList .sub {margin-top: 1.5rem; padding-left: 2rem;}
#view .toc .tocList .sub li {line-height: 3.2rem;}

/* 본문 */
#view .cont {margin-top: 4rem;}
#view .cont p {line-height: 3.2rem;}
#view .toc + .cont {margin-top: 6rem;}

/* 소제목 — 시안은 네이비 사각형 위에 #f0f4fb 를 6px 안쪽으로 얹은 구조라
   왼쪽 테두리로 옮겼습니다. 목차 앵커로 이동할 때 헤더에 가리지 않도록 scroll-margin 을 둡니다. */
#view .secTit {display: flex; align-items: center; margin-top: 8rem; min-height: 8rem; padding: 2.6rem 0 2.6rem 4.5rem; background: #f0f4fb; border-left: 0.6rem solid var(--fcp); border-radius: 1rem; line-height: 2.8rem; scroll-margin-top: 12rem;}

/* 본문 이미지 */
#view .figure {margin-top: 4rem; height: 50rem; border-radius: 2rem; overflow: hidden;}
#view .figure img {width: 100%; height: 100%; object-fit: cover; display: block;}

/* 강조 문구 */
#view .point {margin-top: 6rem; padding-left: 1.2rem; border-left: 0.4rem solid var(--fcp); line-height: 2.6rem;}

/* 상담 배너 */
#view .banner {margin-top: 12rem; padding: 6.5rem 0; background: var(--fcp); border-radius: 2rem;}
#view .banner .bTit {line-height: 3rem;}
#view .banner .btns {margin-top: 3rem; gap: 2rem;}
#view .banner .btn {width: 24rem; height: 6rem; border-radius: 3rem; gap: 1.2rem;}
#view .banner .btn .ico {width: 2rem; height: 2rem;}
#view .banner .btn .ico img {width: 100%; height: 100%; object-fit: contain;}
#view .banner .btn span {line-height: 2.2rem;}
#view .banner .btn.reserv {background: #fff; color: var(--fcp);}
#view .banner .btn.call {background: #5886e9;}

/* 작성자 */
#view .writer {margin-top: 4rem; height: 22rem; padding-left: 7rem; background: #f0f4fb; border-radius: 2rem;}
#view .writer .photo {width: 11rem; height: 11rem; border-radius: 50%; overflow: hidden; flex-shrink: 0;}
#view .writer .photo img {width: 100%; height: 100%; object-fit: cover; display: block;}
#view .writer .txt {margin-left: 4rem;}
#view .writer .txt .lb {line-height: 1.5rem;}
#view .writer .txt .name {margin-top: 2rem; line-height: 3.2rem;}
#view .writer .txt .addr {margin-top: 2rem; line-height: 1.8rem;}
#view .writer .txt .addr .pc {display: inline;}

/* 다른 칼럼 */
#view .related {margin-top: 4rem; padding: 5rem 6rem; background: #f0f4fb; border-radius: 2rem;}
#view .related .rTit {line-height: 2.8rem;}
#view .related .rList {margin-top: 3rem;}
#view .related .rList li + li {margin-top: 2rem;}
#view .related .rList a {height: 16rem; padding-left: 3.5rem; background: #fff; border: 1px solid #ddd; border-radius: 1.5rem;}
#view .related .thumb {width: 18.7rem; height: 11rem; border-radius: 1rem; overflow: hidden; flex-shrink: 0;}
#view .related .thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
#view .related .txt {margin-left: 3rem; overflow: hidden;}
#view .related .txt .tit {line-height: 2.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#view .related .txt .meta {margin-top: 1.5rem; line-height: 1.8rem;}

@media all and (max-width: 880px){
    #view {padding: 10.6rem 0 8rem;}
    #view .inner {max-width: var(--innerMo);}

    #view .titArea .label {font-size: 1.5rem; line-height: 1.5rem;}
    #view .titArea .bar {margin-top: 1.5rem; width: 2rem;}
    #view .titArea .tit {margin-top: 2rem; font-size: 2.2rem; line-height: 3rem;}
    #view .titArea .date {margin-top: 2rem; font-size: 1.5rem; line-height: 1.5rem;}

    #view .toc {margin-top: 4rem; padding: 2.5rem 2rem; border-radius: 1rem;}
    #view .toc .tocTit {font-size: 1.8rem; line-height: 1.8rem;}
    #view .toc .line {margin-top: 1.2rem;}
    #view .toc .tocList {margin-top: 2rem;}
    #view .toc .tocList > li + li {margin-top: 1.5rem;}
    #view .toc .tocList > li > a {font-size: 1.6rem; line-height: 1.6rem;}
    #view .toc .tocList .sub {margin-top: 1rem; padding-left: 1rem; font-size: 1.4rem;}
    #view .toc .tocList .sub li {line-height: 2.2rem;}

    #view .cont {margin-top: 3rem;}
    #view .cont p {font-size: 1.5rem; line-height: 2.5rem;}
    #view .toc + .cont {margin-top: 4rem;}
    /* 강조 문구 바로 뒤 본문은 간격을 좁게 */
    #view .point + .cont {margin-top: 2rem;}

    #view .secTit {margin-top: 4rem; min-height: 4.5rem; padding: 1.05rem 0 1.05rem 2rem; border-left-width: 0.4rem; border-radius: 0.8rem; font-size: 1.8rem; line-height: 2.4rem; scroll-margin-top: 8rem;}

    #view .figure {margin-top: 3rem; height: 14rem; border-radius: 1rem;}

    /* 모바일 강조 문구는 자간이 좁아야 한 줄에 들어감 */
    #view .point {margin-top: 4rem; padding-left: 1.2rem; border-left-width: 0.3rem; font-size: 1.7rem; line-height: 1.9rem; letter-spacing: -0.04em;}
    #view .figure + .point {margin-top: 3rem;}

    #view .banner {margin-top: 8rem; padding: 5rem 0; border-radius: 1.5rem;}
    #view .banner .bTit {font-size: 2.2rem; line-height: 2.2rem;}
    #view .banner .btns {flex-direction: column; margin-top: 2.5rem; gap: 0.8rem;}
    #view .banner .btn {width: 20rem; height: 4.2rem; gap: 0.8rem;}
    #view .banner .btn .ico {width: 1.6rem; height: 1.6rem;}
    #view .banner .btn span {font-size: 1.8rem; line-height: 1.8rem;}

    #view .writer {align-items: flex-start; margin-top: 2rem; height: 17.5rem; padding: 3.5rem 2rem; border-radius: 1.5rem;}
    #view .writer .photo {width: 7rem; height: 7rem;}
    #view .writer .txt {margin-left: 1.8rem;}
    #view .writer .txt .lb {font-size: 1.3rem; line-height: 1.3rem;}
    #view .writer .txt .name {margin-top: 1.2rem; font-size: 2.4rem; line-height: 2.4rem;}
    #view .writer .txt .addr {margin-top: 1.2rem; font-size: 1.4rem; line-height: 2.2rem;}
    #view .writer .txt .addr .pc {display: none;}

    #view .related {margin-top: 2rem; padding: 3rem 2rem; border-radius: 1.5rem;}
    #view .related .rTit {font-size: 1.8rem; line-height: 1.8rem;}
    #view .related .rList {margin-top: 2.5rem;}
    #view .related .rList li + li {margin-top: 1rem;}
    /* 모바일은 썸네일 없이 텍스트만 (.thumb 에 .pc 가 붙어 있습니다) */
    #view .related .rList a {height: auto; padding: 2rem 2rem 2.5rem; border-radius: 1rem;}
    #view .related .txt {margin-left: 0;}
    #view .related .txt .tit {font-size: 1.6rem; line-height: 2.4rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
    #view .related .txt .meta {margin-top: 1.2rem; font-size: 1.3rem; line-height: 1.3rem;}
}