/* ==========================================================================
   APS 공개 사이트 추가 스타일 기준 파일
   로드 순서: font.css → setting.css → colors.css → custom.css
   규칙: 인라인 CSS 금지, 모든 추가 스타일은 출처 주석과 함께 이 파일에 기록합니다.
   ========================================================================== */

/* ==========================================================================
   APS 통합 원본: css/index.css
   목적: 원본 추적과 되돌리기를 위한 구역 표식. 이 주석을 삭제하지 마세요.
   ========================================================================== */
@media screen and (max-width: 992px) {
    .ba_desc {
        white-space: pre-line;
    }
    strong {
        font-weight: 700;
    }
}

/* ############################################################
   메인 슬라이드 섹션
############################################################
*/

.main #sect01 {
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 72px);
}

.main #sect01 .swiper-slide {
    background-size: cover !important;
    background-position: center;
}

.main #sect01 .spinner {
    bottom: 2.6042vw;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('/images/spinLogo.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.main #sect01 .swiper-custom-nav {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 60%;
    max-width: 400px;
    background: rgba(0, 0, 0, 0.22);
    padding: 10px 40px;
    border-radius: 999px;
}
.main #sect01 .swiper-custom-current,
.main #sect01 .swiper-custom-total {
    color: var(--text-inverse, #fff);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    line-height: 1;
}
.main #sect01 .swiper-progress-bar {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    overflow: hidden;
}
.main #sect01 .swiper-progress-fill {
    height: 100%;
    background: var(--surface-color, #fff);
    border-radius: 2px;
    transition: width 0.4s ease;
    width: 0%;
}
.main #sect01 .swiper-custom-prev,
.main #sect01 .swiper-custom-next {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-inverse, #fff);
    font-size: 28px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: opacity 0.2s;
}
.main #sect01 .swiper-custom-prev:hover,
.main #sect01 .swiper-custom-next:hover {
    opacity: 0.6;
}

.swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin-bottom: 100px;
}

.pagi-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.6);
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color 0.3s;
}

.pagi-item.is-active {
    color: var(--dark, #2c2c2c);
    font-size: 1.4rem;
}

.pagi-circle {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

@media screen and (max-width: 992px) {
    /* .main:not(.main-index) {
    padding-top: var(--header-height);
  } */
    .main #sect01 {
        aspect-ratio: 9 / 16;
        /* vh/svh max-height 제거 — iOS 주소창 토글 시 배너 높이·아래 섹션 위치가 밀리지 않음 */
        max-height: none;
    }
    #swiper-main .swiper-pagination {
        position: absolute;
        bottom: 0vh;
        left: 50vw;
        transform: translateX(-50%);
        width: auto;
        text-align: left;
        margin-bottom: 40px;
    }
    .pagi-circle {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.8);
        pointer-events: none;
        box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
    }
    .main #sect01 .swiper-custom-nav {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 16px;
        width: 80%;
        max-width: 400px;
        background: rgba(0, 0, 0, 0.22);
        padding: 10px 40px;
        border-radius: 999px;
    }
    .pagi-item {
        font-size: 1rem;
    }
    .pagi-item.is-active {
        color: var(--text-inverse, #fff);
        font-size: 1.2rem;
    }
    .main #sect01 .swiper-custom-current,
    .main #sect01 .swiper-custom-total {
        font-size: 14px;
    }
}

.imgFlow {
    overflow: hidden;
}
.imgFlow .img-slider {
    overflow: hidden;
}
.imgFlow .img-slider-track {
    animation: scroll 20s linear infinite;
}
.imgFlow .img-slider-track img {
    height: 120px;
    flex-shrink: 0;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.main #subject {
    background-color: var(--sub-color2);
}

@media screen and (max-width: 992px) {
    .imgFlow {
        display: none;
    }

    .imgFlow .img-slider-track {
        animation: scroll 5s linear infinite;
    }
    .imgFlow .img-slider-track img {
        height: 90px;
        flex-shrink: 0;
    }
}

/* ############################################################
   의사
############################################################
*/

.career-wrap {
    overflow: hidden;
    transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.career-wrap.open {
    max-height: 2000px; /* 충분히 큰 값 */
}

/* ── 버튼 회전 ── */
.career-toggle img {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.career-toggle.open img {
    transform: rotate(45deg);
}

/* ############################################################
   책 표지
############################################################
*/

#books {
    height: 847px;
    padding-top: 110px;
    background: url('/images/book_bg_pc.png') repeat-x top center / auto;
}

.book-list {
    margin-top: 80px;
    max-width: 1620px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* PC: FHD(1920) 기준 80px → 화면 줄어들수록 margin 증가 (책 이미지 축소 보정) */
@media screen and (min-width: 993px) {
    .book-list {
        margin-top: clamp(80px, calc(80px + (1920px - 100vw) * 0.055), 155px);
    }
}

@media screen and (max-width: 993px) {
    #books {
        width: 100%;
        height: auto;
        aspect-ratio: 390 / 1178;
        background: url('/images/book_bg_mo.png') no-repeat top center / cover;
        padding-top: 20vw;
    }
    .book_wrap {
        width: clamp(100px, 33vw, 216px);
    }
    .book_wrap::after {
        content: none;
    }
    .book-list {
        gap: 5.13cqw;
    }
}

.book_wrap {
    display: inline-block;
    z-index: 2;
}

.book_wrap::after {
    content: '';
    position: absolute;
    width: 338px;
    width: 16vw;
    height: 154px;
    height: 8vw;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(25px);
    background: url('/images/book_shadow.svg') no-repeat center center / auto;
    filter: blur(5px);
}

.book-head-txt {
    position: relative;
    z-index: 1;
    display: inline-flex;
    text-align: center;
    padding: 40px 0;
}
.book-head-txt::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    background: url('/images/book_top_pyosik.svg') no-repeat center center / auto;
}

.book-head-txt::after {
    content: '';
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16px;
    background: url('/images/book_bot_pyosik.svg') no-repeat center center / auto;
}

.book-title-txt {
    position: relative;
}
.book-title-txt::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 12px;
    background: url('/images/book_name_pyosik.svg') no-repeat left center / auto;
}

.book-reflection-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: clamp(56px, 12vw, 108px);
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
}

.book-reflection {
    display: block;
    width: 100%;
    transform: scaleY(-1);
    filter: blur(3px);
    opacity: 0.4;
    pointer-events: none;
}

.book-img {
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.2));
}

/* ############################################################
   블로그
############################################################
*/

.masonry-grid {
    columns: 4;
}
.masonry-item {
    break-inside: avoid;
}
.masonry-item img {
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}
.masonry-item a:hover img {
    transform: scale(1.02);
    opacity: 0.85;
}
.masonry-item.is-hidden {
    display: none;
}
#masonryBtn {
    transition: background 0.2s;
    letter-spacing: 0.05em;
}
#masonryBtn:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 992px) {
    .masonry-grid {
        columns: 2;
    }
}
@media (max-width: 576px) {
    .masonry-grid {
        columns: 1;
    }
}

/* ############################################################
   약속
############################################################
*/

#promise .boxWrap .box:nth-child(odd) {
    transform: translateY(calc(0px + var(--sp-52)));
}
#promise .boxWrap .box:nth-child(even) {
    transform: translateY(calc(0px - var(--sp-52)));
}

#promise .box {
    background-color: var(--light);
    width: 35%;
    max-width: calc(35% - var(--sp-40));
    max-height: 610px;
    aspect-ratio: 601 / 611;
    transition: all 0.5s;
}
#promise .box span {
    color: var(--sub-color);
}
#promise .box h3 {
    color: var(--dark);
}
#promise .box p {
    color: var(--gray-700);
}

#promise .box:hover {
    background-color: var(--main-color);
}
#promise .box:hover span {
    color: var(--point);
}
#promise .box:hover h3 {
    color: var(--white);
}
#promise .box:hover p {
    color: var(--gray-100);
    z-index: 2;
}
#promise .box:hover img {
    filter: brightness(1000);
    z-index: 1;
    transform: scale(0.5);
    transition: all 1s;
}

#promise .box.nofilter:hover {
    background-color: var(--light);
}

#promise .box.nofilter:hover img {
    filter: none !important;
    transform: none !important;
    transition: all 1s;
}

/* #promise .box:last-child:hover {
 background-color: var(--light);;
}

#promise .box:last-child:hover img {
  filter: none!important
} */

@media screen and (max-width: 992px) {
    #promise .boxWrap .box:nth-child(odd) {
        transform: translateY(0);
    }
    #promise .boxWrap .box:nth-child(even) {
        transform: translateY(0);
    }

    #promise .box {
        width: 100% !important;
        max-width: 100% !important;
    }
    .w-25-sm {
        width: 25% !important;
    }
}

/* ############################################################
  리뷰
############################################################
*/

@keyframes rv-ltr {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@keyframes rv-rtl {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

.rv-track--ltr {
    animation: rv-ltr 20s linear infinite;
}
.rv-track--rtl {
    animation: rv-rtl 20s linear infinite;
}

@media (max-width: 992px) {
    .rv-track--ltr {
        animation: rv-ltr 20s linear infinite -10s;
    }
    .rv-track--rtl {
        animation: rv-rtl 20s linear infinite -10s;
    }
}
/* ############################################################
  임상 증례
############################################################
*/

main .content article {
    width: 100%;
    max-width: calc(50% - 30px);
}

.ba-lbl {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    z-index: 15;
    color: var(--point);
    border: 1.5px solid var(--point);
    padding: 2px 8px;
}

.ba-card.dm-logged .ba-overlay {
    display: none !important;
}

.ba-slider {
    max-height: 460px;
}

/* APS 정리: 정적 CSS 안에서 실행되지 않던 PHP 조건 블록 제거 */
#baJoinModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#baJoinModal.active {
    display: flex;
}

@keyframes baModalIn {
    from {
        transform: translateY(-16px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.ba-modal-box {
    animation: baModalIn 0.25s ease;
}

@media screen and (max-width: 992px) {
    #imsang .box {
        max-width: calc(50% - 14px);
    }
    main .content article {
        width: 100%;
        max-width: calc(50% - 15px);
    }
}

/* ############################################################
 지도
############################################################
*/

.root_daum_roughmap {
    width: 100% !important;
    height: 100% !important;
}
.wrap_map {
    height: 100% !important;
}
@media screen and (max-width: 992px) {
    .wrap_map {
        height: 360px !important;
    }
}
.cont {
    display: none;
}
.wrap_controllers {
    display: none;
}
/* ############################################################
 임상케이스 오버레이 모달a
############################################################
*/

.ba-overlay {
    padding: var(--sp-24) !important;
    cursor: pointer !important;
    /* border-radius: var(--sp-20)!important; */
}
.position-relative.flex-1.w-100.overflow-hidden {
    cursor: pointer !important;
    border-radius: var(--sp-20) !important;
}

#baJoinModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#baJoinModal.active {
    display: flex;
}
/* 로그인 후 오버레이/블러 제거 */
.dm-logged .ba-overlay {
    display: none !important;
}
.dm-logged .ba-after {
    filter: none !important;
    transform: none !important;
}

/* ==========================================================================
   APS 통합 원본: css/header.css
   목적: 원본 추적과 되돌리기를 위한 구역 표식. 이 주석을 삭제하지 마세요.
   ========================================================================== */
/* ── 헤더 바 높이 ── */
.hd-bar {
    height: 101px;
}
/* 로고 이미지가 없을 때 병원명 글자 로고 (사이트 기본설정 › 로고) */
.hd-text-logo {
    display: inline-block;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--main-color, #1f3a5f);
    white-space: nowrap;
}
.position-sticky {
    top: 0;
}
#site-header {
    transition: transform 0.3s ease;
    top: 0;
}

/* ── 양쪽 사이드: 평소엔 크게 → nav 좁게 모임 ── */
.hd-side {
    width: 28vw;
    flex-shrink: 0;
    transition: width 0.35s ease-in-out;
    overflow: hidden;
}

/* 메가 오픈 시: 사이드 줄고 → nav/mega 확장 ── */
#site-header.is-mega-open .hd-side {
    width: 16vw;
}

/* ── GNB nav ── */
.hd-nav {
    flex: 1;
    min-width: 0;
}

/* ── GNB ul ── */
.gnb {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* ── GNB li: 균등 분배 ── */
.gnb-item {
    /* flex: 1; */
    display: flex;
}

/* ── GNB a ── */
.gnb-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-muted, #59504a);
    transition:
        background 0.25s,
        color 0.25s;
    padding: 0 10px;
}

/* .gnb-item.is-hover .gnb-link,
.gnb-item.is-page-active .gnb-link {
    font-weight: 700;
} */

/* ============================================================
   메가메뉴 - hd-side transition이 동일하게 적용됨
============================================================ */
.mega-menu {
    top: 0;
    left: 0;
    z-index: 999;
    /* box-shadow: 0 8px 24px rgba(0,0,0,.10); */
    /* border-top: 1px solid var(--gray-200); */
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
    pointer-events: none;
}
.mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-inner {
    flex: 1;
    min-width: 0;
    display: flex;
}

.mega-col {
    /* flex: 1; */
    min-width: 0;
    /* padding: 28px 0; */
    border-right: 1px solid var(--gray-100);
    transition: background 0.2s;
    text-align: center;
}
.mega-col:last-child {
    border-right: none;
}

.mega-sub-link {
    display: block;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 400;
    color: var(--gray-700);
    letter-spacing: var(--ls-10);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s;
}
.mega-sub-link:hover {
    color: var(--sub-color);
}
.mega-col.is-active .mega-sub-link {
    color: rgba(255, 255, 255, 0.7);
}
.mega-col.is-active .mega-sub-link:hover,
.mega-col.is-active .mega-sub-link.is-active {
    color: var(--text-inverse, #fff);
}

/* ── 오버레이 ── */
.header-overlay {
    position: fixed;
    inset: 0;
    top: 72px;
    background: rgba(0, 0, 0, 0.25);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        visibility 0.2s;
}
.header-overlay.is-show {
    opacity: 1;
    visibility: visible;
}

/* ── 구글 번역 숨김 ── */
.skiptranslate,
.goog-te-banner-frame {
    display: none !important;
}
body {
    top: 0px !important;
}

.promo-slider {
    width: max-content;
    min-width: 230px;
    height: 2.5vw;
    background: var(--sub);
    border-radius: 0 !important;
    overflow: hidden;
}
.promo-content {
    animation: slideUp6 10s infinite;
}
.promo-item {
    height: 2.5vw;
    padding: 0 1.0417vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4단 */
@keyframes slideUp4 {
    0%,
    23% {
        transform: translateY(0);
    }
    25%,
    48% {
        transform: translateY(-2.5vw);
    }
    50%,
    73% {
        transform: translateY(-5vw);
    }
    75%,
    98% {
        transform: translateY(-7.5vw);
    }
    100% {
        transform: translateY(0);
    }
}
/* 5단 */
@keyframes slideUp5 {
    0%,
    18% {
        transform: translateY(0);
    }
    20%,
    38% {
        transform: translateY(-2.5vw);
    }
    40%,
    58% {
        transform: translateY(-5vw);
    }
    60%,
    78% {
        transform: translateY(-7.5vw);
    }
    80%,
    98% {
        transform: translateY(-10vw);
    }
    100% {
        transform: translateY(0);
    }
}
/* 6단 */
@keyframes slideUp6 {
    0%,
    14% {
        transform: translateY(0);
    }
    16%,
    30% {
        transform: translateY(-2.5vw);
    }
    33%,
    47% {
        transform: translateY(-5vw);
    }
    50%,
    64% {
        transform: translateY(-7.5vw);
    }
    66%,
    80% {
        transform: translateY(-10vw);
    }
    83%,
    97% {
        transform: translateY(-12.5vw);
    }
    100% {
        transform: translateY(0);
    }
}
@media screen and (max-width: 1200px) {
    .hd-side a img {
        max-height: 25px !important;
    }
}

/* ############################################################
     헤더
############################################################
*/

.demo-header {
    box-shadow: 0 0.1042vw 0.4167vw rgba(0, 0, 0, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 9999;
}
.header-container {
    height: 4.1667vw;
    min-height: 60px;
}
.logo {
    font-weight: 700;
    color: var(--main-color);
    min-width: 175px;
}

.header-flyout .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 62.5vw;
}
.header-flyout.sticky {
    background-color: var(--surface-color, #fff);
}
.header-flyout .menu > li {
    position: relative;
    padding: 0.5208vw 0;
}
.header-flyout .menu > li > a {
    text-decoration: none;
    color: var(--dark);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.2083vw;
    transition: color 0.3s;
    white-space: nowrap;
    justify-content: center;
}
.header-flyout .menu > li > a:hover {
    color: var(--sub-color) !important;
}
.header-flyout.sticky .menu > li > a {
    color: var(--dark) !important;
}

.header-flyout .submenu {
    position: absolute;
    top: 150%;
    left: 0;
    box-shadow: 0 0.4167vw 1.25vw rgba(0, 0, 0, 0.12);
    list-style: none;
    padding: 0.625vw 0;
    margin: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.header-flyout .menu > li:hover .submenu {
    opacity: 1;
    visibility: visible;
}
.header-flyout .submenu li {
    background-color: transparent;
    border-radius: 4px;
    transition: all 0.5s;
}
.header-flyout .submenu li:hover {
    background-color: var(--surface-color, #fff);
}
.header-flyout .submenu li a {
    display: block;
    padding: 0.625vw 1.0417vw;
    color: var(--white);
    text-decoration: none;
    transition: all 0.5s;
}
.header-flyout .submenu li:hover a {
    color: var(--sub-color);
    padding-left: 1.25vw;
}

.promo-slider {
    width: max-content;
    height: 2.5vw;
    background: var(--sub);
    border-radius: 0.625vw;
    overflow: hidden;
}
.promo-content {
    animation: slideUp 10s infinite;
}
.promo-item {
    height: 2.5vw;
    padding: 0 1.0417vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse, #fff);
}

@keyframes slideUp {
    /* 1번 아이템 정지 */
    0%,
    20% {
        transform: translateY(0);
    }
    /* 2번 아이템으로 이동 및 정지 */
    25%,
    45% {
        transform: translateY(-2.5vw);
    }
    /* 3번 아이템으로 이동 및 정지 */
    50%,
    70% {
        transform: translateY(-5vw);
    }
    /* 4번 아이템으로 이동 및 정지 */
    75%,
    95% {
        transform: translateY(-7.5vw);
    }
    /* 다시 1번으로 복귀 */
    100% {
        transform: translateY(0);
    }
}

.header-dark-flyout {
    background: var(--dark);
    box-shadow: 0 0.1042vw 0.625vw rgba(0, 0, 0, 0.3);
}
.hdf-logo__link {
    gap: 0.625vw;
}
.hdf-logo__img {
    height: 2.0833vw;
}
.hdf-logo__name {
    font-size: clamp(1rem, 0.2vw + 0.9rem, 1.125rem);
}
.hdf-logo__sub {
    font-size: 0.5208vw;
    letter-spacing: 0.08em;
}
.hdf-menu {
    gap: 0.4167vw;
}
.hdf-menu__link {
    gap: 0.2083vw;
    padding: 0.5208vw 0.7292vw;
    border-radius: 0.3125vw;
}
.hdf-submenu {
    top: calc(100% + 1.875vw);
    box-shadow: 0 0.4167vw 1.25vw rgba(0, 0, 0, 0.4);
    border-radius: 0.4167vw;
    padding: 0.3125vw 0 0.5208vw;
    min-width: 8.3333vw;
}
.hdf-submenu li a {
    padding: 0.3125vw 1.0417vw;
    border-radius: 0.3125vw;
    width: calc(100% - 1.0417vw);
}
.hdf-promo {
    gap: 0.5208vw;
    padding: 0.5208vw 1.0417vw;
    border: 1.5px solid var(--gray-500);
}

/* ############################################################
     모바일 헤더
############################################################
*/
#mobileMenu5 {
    width: 80% !important;
}
#mobileMenu5 .mobile-menu-link {
    padding: 1.25vw 1.4583vw 1.25vw 0;
    font-size: 1.5625vw;
}
.mobile-menu-item > a {
    min-height: 3.125vw;
}
.mobile-menu-list li {
    min-height: 3.125vw;
}

#mobileMenu1 .offcanvas-menu .menu li a {
    padding: 0.8333vw 1.0417vw;
    font-size: 1.3542vw;
}
#mobileMenu2 .offcanvas-menu .menu li a {
    padding: 0.8333vw 1.0417vw;
    font-size: 1.3542vw;
    gap: 0.7292vw;
}

.mobile-header .logo {
    font-size: 1.25rem;
}
.mobile-header .phone-link {
    color: var(--sub-color);
    text-decoration: none;
    font-size: 1.5rem;
}
.hamburger-btn {
    background: none;
    border: none;
    color: var(--t-color);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
}

.offcanvas-menu .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.offcanvas-menu .menu li {
    border-bottom: 1px solid var(--gray-200);
}
.offcanvas-menu .menu li a {
    display: block;
    padding: var(--sp-16) var(--sp-20);
    color: var(--t-color);
    text-decoration: none;
    transition: all 0.3s;
}
.offcanvas-menu .menu li a:hover {
    background: var(--gray-100);
    color: var(--sub-color);
}
.offcanvas-menu .submenu {
    list-style: none;
    padding-left: var(--sp-20);
    background: var(--gray-100);
}
.offcanvas-menu .submenu li a {
    padding: var(--sp-12) var(--sp-20);
}
.btn-close-white {
    filter: none !important;
}

.mob-arrow {
    transition: transform 0.3s ease;
}
.mob-arrow.is-rotated {
    transform: rotate(180deg);
}

/* ==========================================================================
   APS 통합 원본: css/legal.css
   목적: 원본 추적과 되돌리기를 위한 구역 표식. 이 주석을 삭제하지 마세요.
   ========================================================================== */
/* ===================================================================
   legal.css — 이용약관 / 개인정보처리방침 문서 스타일
   -------------------------------------------------------------------
   사용법: 문서 본문 전체를 <div class="legal-doc"> 로 감싸기만 하면 됨.
   관리자가 저장한 raw HTML(h2/h3/p/ul/ol/table 등)에 클래스를 일일이
   안 붙여도, 이 래퍼 하위 선택자가 자동으로 타이포·간격을 적용한다.
   색·값은 setting.css 토큰(var(--...)) 재사용. 하드코딩 없음.
   =================================================================== */

/* ── 래퍼: 문서 가독 폭·기본 본문 타이포 ── */
.legal-doc {
    max-width: 860px;
    margin: 0 auto;
    color: var(--gray-800);
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

/* ── 문서 헤더(제목 + 시행일) ── */
.legal-doc .legal-head {
    padding-bottom: 24px;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--main-color);
}
.legal-doc .legal-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--main-color);
    line-height: 1.3;
    margin: 0 0 10px;
}
.legal-doc .legal-date {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0;
}

/* ── 대제목 h2: 조항 구분 ── */
.legal-doc h2 {
    position: relative;
    font-size: 21px;
    font-weight: 800;
    color: var(--main-color);
    line-height: 1.4;
    margin: 48px 0 18px;
    padding-left: 16px;
}
.legal-doc h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    border-radius: 3px;
    background: var(--point);
}
.legal-doc h2:first-child {
    margin-top: 0;
}

/* ── 중제목 h3 ── */
.legal-doc h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.5;
    margin: 32px 0 12px;
}

/* ── 본문 문단 ── */
.legal-doc p {
    margin: 0 0 16px;
}
.legal-doc strong,
.legal-doc b {
    font-weight: 700;
    color: var(--gray-900);
}

/* ── 목록 ── */
.legal-doc ul,
.legal-doc ol {
    margin: 0 0 20px;
    padding-left: 4px;
    list-style: none;
}
.legal-doc ul > li,
.legal-doc ol > li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    line-height: 1.75;
}
/* 순서 없는 목록: 포인트 컬러 점 */
.legal-doc ul > li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sub-color);
}
/* 순서 있는 목록: 카운터 번호 */
.legal-doc ol {
    counter-reset: legal-ol;
}
.legal-doc ol > li {
    counter-increment: legal-ol;
    padding-left: 26px;
}
.legal-doc ol > li::before {
    content: counter(legal-ol);
    position: absolute;
    left: 0;
    top: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 5px;
    background: var(--main-color);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
/* 중첩 목록 */
.legal-doc li ul,
.legal-doc li ol {
    margin: 10px 0 0;
}

/* ── 강조 박스: 관리자가 <blockquote>로 감싼 중요 고지 ── */
.legal-doc blockquote {
    margin: 0 0 20px;
    padding: 16px 20px;
    background: var(--light);
    border-left: 4px solid var(--sub-color);
    border-radius: 8px;
    color: var(--gray-700);
    font-size: 15px;
}
.legal-doc blockquote p:last-child {
    margin-bottom: 0;
}

/* ── 표: 개인정보 수집항목·보유기간 등 ── */
.legal-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 14px;
}
.legal-doc thead th {
    background: var(--main-color);
    color: var(--white);
    font-weight: 700;
    padding: 12px 14px;
    text-align: left;
    border: 1px solid var(--main-color);
}
.legal-doc tbody td,
.legal-doc tbody th {
    padding: 11px 14px;
    border: 1px solid var(--gray-300);
    line-height: 1.6;
    vertical-align: top;
}
.legal-doc tbody tr:nth-child(even) {
    background: var(--light2);
}

/* ── 링크 ── */
.legal-doc a {
    color: var(--main-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}
.legal-doc a:hover {
    color: var(--point);
}

/* ── 구분선 ── */
.legal-doc hr {
    border: 0;
    border-top: 1px solid var(--gray-200);
    margin: 40px 0;
}

/* ── 모바일 ── */
@media (max-width: 768px) {
    .legal-doc {
        font-size: 15px;
        line-height: 1.75;
    }
    .legal-doc .legal-title {
        font-size: 24px;
    }
    .legal-doc h2 {
        font-size: 18px;
        margin: 36px 0 14px;
    }
    .legal-doc h3 {
        font-size: 16px;
        margin: 26px 0 10px;
    }
    .legal-doc table {
        font-size: 13px;
    }
    .legal-doc thead th,
    .legal-doc tbody td,
    .legal-doc tbody th {
        padding: 9px 10px;
    }
}

/* ===================================================================
   모달 안에서 쓸 때 (tail.php 약관/개인정보 모달)
   모달 본문 div에 legal-doc 을 추가로 걸면 적용된다.
   =================================================================== */
.modal-body.legal-doc {
    max-width: none; /* 모달 폭에 꽉 차게 */
    font-size: 15px;
}
.modal-body.legal-doc > :first-child {
    margin-top: 0;
}
.modal-body.legal-doc h2 {
    font-size: 18px;
    margin: 32px 0 14px;
}
.modal-body.legal-doc h2:first-child {
    margin-top: 0;
}
.modal-body.legal-doc h3 {
    font-size: 16px;
}

/* 순수 텍스트(HTML 태그 없이 nl2br)로 저장된 약관용:
   .legal-plain 을 함께 걸면 <br> 기반 텍스트의 줄간격만 확보 */
.legal-plain {
    line-height: 1.9;
    color: var(--gray-800);
    word-break: keep-all;
}

/* ==========================================================================
   APS 통합 원본: layout/consult.css
   목적: 원본 추적과 되돌리기를 위한 구역 표식. 이 주석을 삭제하지 마세요.
   ========================================================================== */
/* ============================================================
 * consult.css
 * 원본 PHP 구조 유지 + 킹덤치과 디자인
 * ============================================================ */

/* ============================================================
   기본 PC
============================================================ */

.consult-bar {
    position: fixed;
    top: calc(100vh - 100px);

    width: 100%;
    height: 100px;

    z-index: 98;

    margin-bottom: -100px;
    padding: 0 !important;

    border-radius: 0 !important;

    background: var(--main-color) !important;
}

/* 모바일 토글은 기본 숨김 */
.consult-bar .cb-mobile-toggle {
    display: none;
}

.cb-mobile-toggle {
    gap: 6px;
}
.cb-mobile-toggle-icon {
    display: inline-flex;
    transition: transform 0.25s ease;
}
.consult-bar.is-collapsed .cb-mobile-toggle-icon {
    transform: rotate(180deg);
}

/* ============================================================
   FORM
============================================================ */

.consult-bar #consultBarForm {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-left: var(--sp-100);

    /* padding: 0 clamp(30px, 5vw, 100px); */
}

/* PC에서는 제목 숨김 */
.consult-bar .cb-title {
    display: none;
}

/* ============================================================
   INPUT 묶음
============================================================ */

.consult-bar #consultBarForm > div:has(.cb-f) {
    width: auto !important;
    flex: 1 1 auto;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;

    gap: clamp(8px, 1vw, 20px) !important;
}

.consult-bar .cb-f {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 320px;
    margin: 0 !important;
}

.consult-bar .cb-input {
    width: 100%;
    height: 55px;

    padding: 0 16px;

    border: 1px solid transparent;
    border-radius: 8px;

    background: #e5eef5;

    color: #5e6873;

    font-family: inherit;
    font-size: 16px;
    font-weight: 400;

    box-sizing: border-box;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.consult-bar .cb-input::placeholder {
    color: #75818e;
}

.consult-bar .cb-input:focus {
    outline: none;

    border-color: #fff;

    background: #fff;

    box-shadow: none;
}

/* ============================================================
   SELECT
============================================================ */

.consult-bar .cb-sel {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding-right: 36px;

    background-color: #e5eef5;
    background-image: url('/images/select-arrow-img.svg');
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px;

    cursor: pointer;
}

/* ============================================================
   개인정보 동의
============================================================ */

.consult-bar #consultBarForm > div:has(#cbAgreePrivacy) {
    width: auto;

    flex: 0 0 auto;

    display: flex !important;
    align-items: center !important;

    gap: var(--sp-20) !important;

    margin: 0 !important;

    position: relative;
}

.consult-bar .u-check {
    display: flex;
    align-items: center;

    gap: 5px !important;

    margin: 0 !important;

    color: #fff !important;

    font-size: 14px;

    white-space: nowrap;

    cursor: pointer;
}

.consult-bar .u-check input[type='checkbox'] {
    appearance: none;
    -webkit-appearance: none;

    display: grid;
    place-content: center;

    width: 14px;
    height: 14px;

    flex: 0 0 14px;

    margin: 0;
    padding: 0;

    border: 1px solid #fff;
    border-radius: 3px;

    background: transparent;

    cursor: pointer;
}

.consult-bar .u-check input[type='checkbox']::before {
    content: '✓';

    color: #fff;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    transform: scale(0);

    transition: transform 0.15s ease;
}

.consult-bar .u-check input[type='checkbox']:checked::before {
    transform: scale(1);
}

/* 자세히 보기 */

.consult-bar .cb-agree-toggle {
    padding: 0;

    border: 0;

    background: transparent;

    color: rgba(255, 255, 255, 0.7) !important;

    font-size: 12px;

    text-decoration: underline;

    white-space: nowrap;

    cursor: pointer;
}

/* ============================================================
   개인정보 체크박스
============================================================ */

.cb-agree-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.cb-agree-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cb-check-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55);

    transition: all 0.2s ease;
}

.cb-check-icon svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: transparent;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: stroke 0.2s ease;
}

.cb-check-text {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

/* 체크됐을 때 */
.cb-agree-check input:checked + .cb-check-icon {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
}

.cb-agree-check input:checked + .cb-check-icon svg {
    stroke: #fff;
}

/* hover */
.cb-agree-check:hover .cb-check-icon {
    border-color: #fff;
}

/* 키보드 포커스 */
.cb-agree-check input:focus-visible + .cb-check-icon {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 3px;
}

/* ============================================================
   개인정보 팝업
============================================================ */

.consult-bar .cb-agree-box {
    display: block;

    position: absolute;

    right: 0;
    bottom: calc(100% + 15px);

    z-index: 100;

    width: min(360px, 88vw);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    pointer-events: none;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

.consult-bar .cb-agree-box.open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}

/* ============================================================
   문의하기
============================================================ */

.consult-bar .cb-submit {
    flex: 0 0 clamp(160px, 12vw, 240px);

    align-self: stretch;

    height: 100%;

    margin: 0;

    padding: 0 25px;

    border: 0;
    border-radius: 0 !important;

    background: var(--sub-color) !important;

    color: #fff;

    font-size: clamp(22px, 1.7vw, 34px);
    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;
}

.consult-bar .cb-submit:disabled {
    opacity: 0.6;
}

/* ============================================================
   ERROR
============================================================ */

.consult-bar .cb-msg {
    position: absolute;

    left: 50%;
    bottom: 3px;

    margin: 0;

    color: #fff;

    font-size: 11px;

    transform: translateX(-50%);
    display: none;
}

.msg_sound_only {
    display: none;
}

/* ============================================================
   DONE
   d-flex가 !important일 수 있으므로 반드시 !important
============================================================ */

.consult-bar .cb-done {
    display: none !important;

    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;

    color: #fff !important;
}

.consult-bar .cb-done.show {
    display: flex !important;
}

.consult-bar .cb-done-ico {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border-radius: 50%;

    color: #fff;
}

/* ============================================================
   DVH
============================================================ */

@supports (height: 100dvh) {
    .consult-bar {
        top: calc(100dvh - 100px);
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 1240px) {
    .consult-bar {
        position: fixed;

        top: calc(100vh - 320px);
        bottom: auto;

        display: block !important;

        width: 100%;
        height: 320px;

        margin-bottom: -320px;

        padding: 16px !important;

        visibility: visible !important;
        opacity: 1 !important;

        background: var(--main-color) !important;
        transition: all 0.5s ease-in;
    }

    .consult-bar #consultBarForm {
        position: relative;

        display: flex !important;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        height: 100%;

        padding: 0;
        margin: 0;

        gap: 10px;
    }

    /* 로고 */
    .consult-bar #consultBarForm > img {
        display: block;

        width: 120px;
        height: auto;

        margin: 0 auto 5px;
    }

    /* 이름/연락처/질환명 + 개인정보를 감싼 부모 */
    .consult-bar #consultBarForm > div {
        display: flex !important;

        width: 100%;

        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch !important;

        gap: 8px !important;

        margin: 0 !important;
    }

    /* 이름 / 연락처 / 질환명 */
    .consult-bar #consultBarForm > div > div:first-child {
        display: flex !important;

        width: 100%;

        flex-direction: row;
        flex-wrap: wrap !important;

        gap: 8px !important;
    }

    .consult-bar .cb-f {
        flex: 1 1 calc(50% - 4px);

        width: calc(50% - 4px);
        max-width: none;

        margin: 0 !important;
    }

    /* 질환명은 한 줄 전체 */
    .consult-bar .cb-f:nth-child(3) {
        flex: 1 1 100%;

        width: 100%;
    }

    .consult-bar .cb-input {
        width: 100%;
        height: 42px;

        padding: 0 12px;

        border-radius: 6px;

        font-size: 14px;
    }

    /* 개인정보 */
    .consult-bar #consultBarForm > div > div:nth-child(2) {
        position: relative;

        display: flex !important;
        align-items: center !important;

        width: 100%;

        margin: 0 !important;

        color: #fff;
    }

    .consult-bar #consultBarForm > div > div:nth-child(2) label {
        color: #fff !important;
    }

    /* 문의하기 */
    .consult-bar .cb-submit {
        position: static;

        display: block;

        flex: 0 0 48px;

        width: 100%;
        height: 48px;

        margin: 0;

        padding: 0;

        border-radius: 6px !important;

        font-size: 17px;
    }

    .consult-bar .cb-msg {
        position: static;

        width: 100%;

        margin: 0;

        text-align: center;

        transform: none;
    }

    .consult-bar .cb-done {
        display: none !important;
    }

    .consult-bar .cb-done.show {
        display: flex !important;

        height: 100%;

        justify-content: center;

        color: #fff !important;
    }

    @supports (height: 100dvh) {
        .consult-bar {
            top: calc(100dvh - 320px);
        }
    }
}

@media (max-width: 1240px) {
    .consult-bar .cb-mobile-toggle {
        position: absolute;
        top: -25px;
        right: 8px;
        z-index: 4;

        display: flex !important;

        align-items: center;
        justify-content: center;

        gap: 5px;

        min-width: 108px;
        height: 26px;

        padding: 0 13px;

        border: 0;
        border-radius: 10px 10px 0 0;

        background: var(--main-color);
        color: #fff !important;

        box-shadow: 0 -5px 14px rgba(0, 0, 0, 0.16);
        font-size: 12px;
        cursor: pointer;
    }

    .consult-bar .cb-mobile-toggle-icon {
        display: inline-block;

        font-size: 18px;
        line-height: 1;

        transition: transform 0.05s ease;
    }

    /* 접었을 때 상담바 전체가 화면 아래로 내려감 */
    .consult-bar.is-collapsed {
        transform: translateY(100%);
    }

    /* 접으면 화살표 반전 */
    .consult-bar.is-collapsed .cb-mobile-toggle-icon {
        transform: rotate(180deg);
    }

    /* 접으면 상담바 때문에 확보했던 하단 여백 제거 */
    body:has(.consult-bar.is-collapsed) {
        padding-bottom: 0;
    }
}

/* ==========================================================================
   APS 통합 원본: css/smartsearch.css
   목적: 원본 추적과 되돌리기를 위한 구역 표식. 이 주석을 삭제하지 마세요.
   ========================================================================== */
/* ============================================================
   smartsearch.css — 스마트서치 결과 페이지 전용 (hover·애니메이션 = 3순위 별도 CSS)
   배치: /sub/smartsearch/smartsearch.css
   규칙: 색은 setting.css 루트 토큰(var) 사용 · 하드코딩 금지
         간격/라운드는 setting.css의 --sp-* clamp 변수 사용 (짝수 2단위)
         보더 1~3px·포커스링만 px 리터럴 허용 (setting.css 관례)
   ============================================================ */

#smartSearch {
    background: radial-gradient(70rem 32rem at 50% -9rem, var(--white, #fff) 0%, rgba(255, 255, 255, 0) 70%), var(--light2, #f6f4ec);
    color: var(--dark, #2c2c2c);
}

#smartSearch .ss-wrap {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--sp-24, 1.5rem);
}

/* ── 상단 브랜드 + 리드 ── */
#smartSearch .ss-brand {
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--point, #d7ac7a);
    text-transform: uppercase;
}
#smartSearch .ss-lead {
    text-align: center;
    font-size: clamp(1.5rem, 3.4vw, 2.125rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: var(--sp-10, 0.625rem) 0 var(--sp-26, 1.625rem);
    color: var(--main-color, #304f4e);
}

/* ── 검색폼 (알약형) ── */
#smartSearch .ss-form {
    display: flex;
    align-items: center;
    gap: var(--sp-6, 0.375rem);
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #e9e3d6);
    border-radius: 22px;
    padding: var(--sp-10, 0.625rem) var(--sp-10, 0.625rem) var(--sp-10, 0.625rem) var(--sp-26, 1.625rem);
    max-width: 55rem;
    margin: 0 auto var(--sp-30, 1.875rem);
    box-shadow: 0 var(--sp-14, 0.875rem) var(--sp-40, 2.5rem) rgba(48, 79, 78, 0.1);
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
#smartSearch .ss-form:focus-within {
    border-color: var(--point, #d7ac7a);
    box-shadow: 0 var(--sp-8, 0.5rem) var(--sp-26, 1.625rem) rgba(215, 172, 122, 0.18);
}
#smartSearch .ss-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    color: var(--dark, #2c2c2c);
    min-height: 48px;
}
#smartSearch .ss-form button {
    flex: none;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    background: var(--main-color, #304f4e);
    color: var(--white, #fff);
    font-size: 0.875rem;
    font-weight: 800;
    padding: var(--sp-14, 0.875rem) var(--sp-28, 1.75rem);
    transition: filter 0.15s;
}
#smartSearch .ss-form button:hover {
    filter: brightness(1.12);
}

/* ── 인기 검색어 칩 ── */
#smartSearch .ss-pop {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8, 0.5rem);
    justify-content: center;
    margin-top: var(--sp-6, 0.375rem);
}
#smartSearch .ss-chip {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #e9e3d6);
    border-radius: 999px;
    padding: var(--sp-6, 0.375rem) var(--sp-14, 0.875rem);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--dark, #2c2c2c);
    transition:
        border-color 0.2s,
        color 0.2s,
        transform 0.2s;
}
#smartSearch .ss-chip:hover {
    border-color: var(--point, #d7ac7a);
    color: var(--main-color, #304f4e);
    transform: translateY(-2px);
}

/* ── 매크로 답변 (타이핑) ── */
#smartSearch .ss-answer {
    text-align: center;
    font-size: clamp(1.06rem, 2.4vw, 1.31rem);
    font-weight: 700;
    line-height: 1.55;
    color: var(--main-color, #304f4e);
    margin: var(--sp-6, 0.375rem) auto var(--sp-24, 1.5rem);
    max-width: 37.5rem;
    min-height: 1.6em;
}
#smartSearch .ss-cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: var(--point, #d7ac7a);
    vertical-align: -0.15em;
    margin-left: 2px;
    animation: ssBlink 0.85s steps(1) infinite;
}
@keyframes ssBlink {
    50% {
        opacity: 0;
    }
}

/* ── 등장 시퀀스 ── */
#smartSearch .ss-seq {
    animation: ssUp 0.5s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}
@keyframes ssUp {
    from {
        opacity: 0;
        transform: translateY(var(--sp-14, 0.875rem));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ── 공통 카드 (위키/용어풀이) ── */
#smartSearch .ss-card {
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #e9e3d6);
    border-radius: var(--sp-16, 1rem);
    padding: var(--sp-20, 1.25rem) var(--sp-22, 1.375rem);
    margin: 0 0 var(--sp-14, 0.875rem);
    line-height: 1.75;
    font-size: 0.9rem;
}
#smartSearch .ss-tag {
    display: inline-block;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--point, #d7ac7a);
    background: color-mix(in srgb, var(--point) 14%, #fff);
    border-radius: 999px;
    padding: var(--sp-4, 0.25rem) var(--sp-12, 0.75rem);
    margin-bottom: var(--sp-10, 0.625rem);
    text-transform: uppercase;
}
#smartSearch .ss-src {
    margin-top: var(--sp-10, 0.625rem);
    font-size: 0.75rem;
    color: var(--gray-500, #8a8a8a);
}
#smartSearch .ss-src a {
    color: var(--main-color, #304f4e);
}

/* 용어 풀이 */
#smartSearch .ss-dict-row {
    display: flex;
    gap: var(--sp-12, 0.75rem);
    padding: var(--sp-6, 0.375rem) 0;
    border-bottom: 1px dashed var(--gray-200, #e9e3d6);
}
#smartSearch .ss-dict-row:last-child {
    border-bottom: 0;
}
#smartSearch .ss-dict-term {
    flex: none;
    min-width: 5.375rem;
    color: var(--main-color, #304f4e);
    font-size: 0.875rem;
}
#smartSearch .ss-dict-def {
    color: var(--gray-500, #8a8a8a);
    font-size: 0.84rem;
    line-height: 1.65;
}

/* ── 진료 링크박스 (정확 매칭) ── */
#smartSearch .ss-proc {
    display: flex;
    align-items: center;
    gap: var(--sp-16, 1rem);
    text-decoration: none;
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #e9e3d6);
    border-radius: var(--sp-16, 1rem);
    padding: var(--sp-20, 1.25rem) var(--sp-22, 1.375rem);
    margin: var(--sp-4, 0.25rem) 0 var(--sp-10, 0.625rem);
    color: var(--dark, #2c2c2c);
    transition:
        border-color 0.25s,
        box-shadow 0.25s,
        transform 0.25s;
}
#smartSearch .ss-proc:hover {
    border-color: var(--point, #d7ac7a);
    background: color-mix(in srgb, var(--point) 5%, #fff);
    box-shadow: 0 var(--sp-12, 0.75rem) var(--sp-30, 1.875rem) rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
#smartSearch .ss-ic {
    flex: none;
    width: var(--sp-52, 3.25rem);
    height: var(--sp-52, 3.25rem);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: var(--light2, #f6f4ec);
}
#smartSearch .ss-k {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--point, #d7ac7a);
    letter-spacing: 0.04em;
}
#smartSearch .ss-t {
    font-size: 1.19rem;
    font-weight: 800;
    color: var(--main-color, #304f4e);
}
#smartSearch .ss-arrow {
    margin-left: auto;
    flex: none;
    font-size: 1.25rem;
    color: var(--point, #d7ac7a);
    transition: transform 0.25s;
}
#smartSearch .ss-proc:hover .ss-arrow {
    transform: translateX(var(--sp-6, 0.375rem));
}
#smartSearch .ss-summary {
    font-size: 0.875rem;
    color: var(--gray-500, #8a8a8a);
    line-height: 1.7;
    margin: 0 var(--sp-4, 0.25rem) var(--sp-22, 1.375rem);
}

/* ── FAQ ── */
#smartSearch .ss-faqhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: var(--sp-8, 0.5rem) var(--sp-4, 0.25rem) var(--sp-10, 0.625rem);
}
#smartSearch .ss-faqhead h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--main-color, #304f4e);
    margin: 0;
}
#smartSearch .ss-faqhead a {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--point, #d7ac7a);
    text-decoration: none;
}
#smartSearch .ss-faq {
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #e9e3d6);
    border-radius: var(--sp-12, 0.75rem);
    margin-bottom: var(--sp-8, 0.5rem);
    overflow: hidden;
    transition: border-color 0.2s;
}
#smartSearch .ss-faq.open {
    border-color: var(--point, #d7ac7a);
}
#smartSearch .ss-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12, 0.75rem);
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark, #2c2c2c);
    padding: var(--sp-14, 0.875rem) var(--sp-18, 1.125rem);
}
#smartSearch .ss-pm {
    flex: none;
    width: var(--sp-24, 1.5rem);
    height: var(--sp-24, 1.5rem);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: var(--light2, #f6f4ec);
    color: var(--main-color, #304f4e);
    transition:
        transform 0.25s,
        background 0.25s,
        color 0.25s;
}
#smartSearch .ss-faq.open .ss-pm {
    transform: rotate(45deg);
    background: var(--point, #d7ac7a);
    color: var(--white, #fff);
}
#smartSearch .ss-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
#smartSearch .ss-a p {
    margin: 0;
    padding: 0 var(--sp-18, 1.125rem) var(--sp-16, 1rem);
    font-size: 0.84rem;
    color: var(--gray-500, #8a8a8a);
    line-height: 1.75;
}

/* ── 연관진료 ── */
#smartSearch .ss-related {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8, 0.5rem);
}

/* ── 추론 제안 카드 그리드 ── */
#smartSearch .ss-suggest {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12, 0.75rem);
    margin-top: var(--sp-6, 0.375rem);
}
@media (max-width: 768px) {
    #smartSearch .ss-suggest {
        grid-template-columns: 1fr;
    }
}

#smartSearch .ss-sug-card {
    display: flex;
    align-items: center;
    gap: var(--sp-14, 0.875rem);
    text-decoration: none;
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #e9e3d6);
    border-radius: var(--sp-14, 0.875rem);
    padding: var(--sp-18, 1.125rem);
    min-height: 6.5rem;
    color: var(--dark, #2c2c2c);
    animation: ssUp 0.5s cubic-bezier(0.22, 0.7, 0.3, 1) both;
    transition:
        border-color 0.25s,
        box-shadow 0.25s,
        transform 0.25s;
}
#smartSearch .ss-sug-card:hover {
    border-color: var(--point, #d7ac7a);
    background: color-mix(in srgb, var(--point) 5%, #fff);
    box-shadow: 0 var(--sp-12, 0.75rem) var(--sp-28, 1.75rem) rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}
#smartSearch .ss-sug-ic {
    flex: none;
    width: var(--sp-44, 2.75rem);
    height: var(--sp-44, 2.75rem);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.31rem;
    background: var(--light2, #f6f4ec);
}
#smartSearch .ss-sug-body {
    flex: 1;
    min-width: 0;
}
#smartSearch .ss-sug-eyebrow {
    display: block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--point, #d7ac7a);
    margin-bottom: var(--sp-4, 0.25rem);
}
#smartSearch .ss-sug-name {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: var(--main-color, #304f4e);
}
#smartSearch .ss-sug-desc {
    display: block;
    font-size: 0.78rem;
    color: var(--gray-500, #8a8a8a);
    line-height: 1.55;
    margin-top: var(--sp-4, 0.25rem);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#smartSearch .ss-sug-card .ss-arrow {
    font-size: 1.06rem;
}

/* ── hover 툴팁 (ss-tip: 카드 위에 규격 크기로 뜨는 영상+설명 말풍선) ──
   상태변화(hover)라 유틸로 표현 불가 → 별도 CSS (스킬 지침 3순위) */
#smartSearch .ss-hv {
    position: relative;
    overflow: visible;
}
#smartSearch .ss-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--sp-12, 0.75rem));
    transform: translateX(-50%) translateY(var(--sp-6, 0.375rem)) scale(0.96);
    width: 17.5rem;
    z-index: 40;
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #e9e3d6);
    border-radius: var(--sp-14, 0.875rem);
    box-shadow: 0 var(--sp-18, 1.125rem) var(--sp-44, 2.75rem) rgba(0, 0, 0, 0.18);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}
/* 말풍선 꼬리 */
#smartSearch .ss-tip::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 9px solid transparent;
    border-top-color: var(--white, #fff);
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.06));
}
#smartSearch .ss-hv.play .ss-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
#smartSearch .ss-tip-media {
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    background: var(--dark, #111);
}
#smartSearch .ss-tip-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#smartSearch .ss-tip-body {
    display: block;
    padding: var(--sp-10, 0.625rem) var(--sp-14, 0.875rem) var(--sp-12, 0.75rem);
}
#smartSearch .ss-tip-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--main-color, #304f4e);
    margin-bottom: var(--sp-4, 0.25rem);
}
#smartSearch .ss-tip-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500, #8a8a8a);
    line-height: 1.55;
}
/* 카드 자체는 hover 시 강조만 (배경 영상 없음) */
#smartSearch .ss-hv.play {
    border-color: var(--point, #d7ac7a);
    box-shadow: 0 var(--sp-10, 0.625rem) var(--sp-26, 1.625rem) rgba(0, 0, 0, 0.09);
}

/* 좁은 화면: 툴팁을 카드 폭에 맞춤 */
@media (max-width: 768px) {
    #smartSearch .ss-tip {
        width: min(17.5rem, 86vw);
    }
}

/* ── 결과 없음 ── */
#smartSearch .ss-empty {
    background: var(--white, #fff);
    border: 1px dashed var(--gray-200, #e9e3d6);
    border-radius: var(--sp-16, 1rem);
    padding: var(--sp-34, 2.125rem) var(--sp-24, 1.5rem);
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--gray-500, #8a8a8a);
}
#smartSearch .ss-empty b {
    color: var(--main-color, #304f4e);
}
#smartSearch .ss-empty .ss-pop {
    margin-top: var(--sp-16, 1rem);
}

/* ── 모션 최소화 ── */
@media (prefers-reduced-motion: reduce) {
    #smartSearch .ss-seq,
    #smartSearch .ss-sug-card {
        animation: none;
    }
    #smartSearch .ss-tip,
    #smartSearch .ss-sug-card,
    #smartSearch .ss-proc,
    #smartSearch .ss-chip {
        transition: none;
    }
    #smartSearch .ss-cursor {
        animation: none;
    }
}

/* ========================================
   [Common] START
   ======================================== */

/* ========================================
   [Pill-cta] pill + icon circle CTA START
   ======================================== */

.pill-cta {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px 7px 24px;
    border: 1px solid var(--point);
    border-radius: 40px;
    /* background: var(--sub-color); */
    color: #232220;
    text-decoration: none;
    overflow: hidden;
    transition:
        border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pill-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.1) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.pill-cta__text {
    position: relative;
    z-index: 1;
    color: inherit;
}

.pill-cta__icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--point);
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.4s ease,
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pill-cta__icon img {
    display: block;
    width: 18px;
    height: 18px;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .pill-cta:hover {
        border-color: rgba(255, 252, 243, 0.38);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
        transform: translateY(-1px);
    }

    .pill-cta:hover::before {
        opacity: 1;
    }

    .pill-cta:hover .pill-cta__icon {
        transform: scale(1.05);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }

    .pill-cta:hover .pill-cta__icon img {
        transform: rotate(90deg);
    }
}

.pill-cta:focus-visible {
    outline: 2px solid rgba(255, 252, 243, 0.55);
    outline-offset: 3px;
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {
    .pill-cta {
        width: 200px;
        height: 50px;
        padding-left: 20px;
    }
}

/* ========================================
   [Pill-cta] END
   ======================================== */

/* ========================================
   [Ba-join-modal] 임상증례 간편 로그인 모달 START
   ======================================== */

.before-after-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
}

.before-after-modal[hidden] {
    display: none;
}

.before-after-modal__box {
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    background: var(--bg-color);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.before-after-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-200);
}

.before-after-modal__title {
    margin: 0 0 4px;
    color: var(--main-color);
}

.before-after-modal__desc {
    margin: 0;
    color: var(--gray-500);
}

.before-after-modal__close {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.before-after-modal__close::before,
.before-after-modal__close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    background: var(--gray-700);
    transform-origin: center;
}

.before-after-modal__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.before-after-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.before-after-modal__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 24px;
}

.before-after-modal__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.before-after-modal__label {
    color: var(--gray-500);
}

.before-after-modal__field input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font: inherit;
    color: var(--main-color);
    background: var(--gray-100);
}

.before-after-modal__notice {
    margin: 0;
    padding: 10px 14px;
    color: var(--gray-500);
    background: var(--gray-100);
    border-radius: 8px;
}

.before-after-modal__foot {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--gray-200);
}

.before-after-modal__cancel,
.before-after-modal__submit {
    height: 44px;
    border: none;
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
}

.before-after-modal__cancel {
    color: var(--gray-700);
    background: var(--gray-100);
}

.before-after-modal__submit {
    color: var(--white);
    background: var(--sub-color);
}

/* ========================================
   [Ba-join-modal] END
   ======================================== */

/* ========================================
   [Common] END
   ======================================== */

/* 공통 이너: 최대 1680px / 좌우 최소 40px */
.u-fluid {
    width: calc(100% - 80px);
    max-width: 1680px;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* 기존 setting.css의 모바일 기준에 맞춤 */
@media (max-width: 992px) {
    .u-fluid.u-fluid-xl-sm {
        width: 100%;
    }
}