@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); /* font-family: 'Inter', sans-serif; */

/* #content */
section .main_title {letter-spacing: -0.02em; line-height: 56px; margin-bottom: 20px;}
section .main_title.on {display: none;}
section .sub_text {letter-spacing: -0.02em;}

.warning_text {color: #E65E64;}

.compare_top {background: #EAF2FF; margin-bottom: 110px;}
.compare_top .inner {padding: 110px 0; box-sizing: border-box; text-align: center;}
.compare_top .inner h3 {font-size: 70px; font-weight: 700; line-height: 1em; letter-spacing: -1px; margin-bottom: .5em;}
.compare_top .inner p {font-size: 28px; line-height: 1em; letter-spacing: -1px; color: #161718;}


.tab_area .inner {padding: 0 16.66%; position: relative;}
.tab_area .inner .btn_area {display: flex; gap: 80px; justify-content: center; margin-bottom: 40px;}
.tab_area .inner .btn_area li.mo_ver {display: none;}
.tab_area .inner .btn_area li a {display: block; padding: 20px 0; font-size: 32px; font-weight: 500; line-height: 30px; letter-spacing: -1px; color: #161718;}
.tab_area .inner .btn_area li a.on {border-bottom: 4px solid #0C82FE; color: #0C82FE;}

.btn_write {padding: 10px 36px; box-sizing: border-box; white-space: nowrap;
    font-size: 24px; font-weight: 500; letter-spacing: -1px; line-height: 40px; color: #161718;
    border-radius: 75px; border: 1px solid #777C81; outline: none; background: #FFF; position: absolute; right: calc(16% + 20px); top: 20px;}
.btn_write::after {display: none !important;}
.btn_write:hover {border: 1px solid #0C82FE; background: #0C82FE; color: #fff;}

.tab_area .inner .tab_con .con {padding: 60px 5%; box-sizing: border-box; border-radius: 20px; background: #FAFAFA;}
.tab_area .inner .tab_con .con ul {display: flex; gap: 20px; align-items: center; flex-wrap: wrap;}
.tab_area .inner .tab_con .con ul li input[type="radio"] {display: none;}
.tab_area .inner .tab_con .con ul li label {display: block; border-radius: 999px; padding: 0 30px; line-height: 60px; box-sizing: border-box;
    border: 1px solid #0C82FE; background: #fff; font-size: 24px; font-weight: 700; letter-spacing: -1px; white-space: nowrap;}
.tab_area .inner .tab_con .con ul li input[type="radio"]:checked + label {background: #0C82FE; color: #fff;}

.tab_area .inner .tab_con .tab_all {width: 100%; display: grid; grid-template-columns: 25% 75%; gap: 40px; align-items: center; justify-content: center; color: #161718;}
.tab_area .inner .tab_con .tab_all .banner_text {display: flex; gap: 16px; align-items: center; justify-content: flex-end;}
.tab_area .inner .tab_con .tab_all .banner_text .badge_new {display: inline-block; width: 63px; height: 63px; line-height: 63px; font-family: 'Inter', sans-serif;
    background: url(../images/icon_new_bg.png) center no-repeat; background-size: contain; font-size: 18px; font-weight: 600; letter-spacing: -1px; text-align: center;}
.tab_area .inner .tab_con .tab_all .banner_text p {font-size: 28px; font-weight: 500; line-height: 1em; letter-spacing: -1px;}
.tab_area .inner .tab_con .tab_all .banner_text p .warning_text {display: block; font-size: .6em;}
.tab_area .inner .tab_con .tab_all .banner_text p label {cursor: default; white-space: nowrap;}

.tab_area .inner .tab_con .tab_detail .details {display: grid; grid-template-columns: 130px auto; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 20px;}
.tab_area .inner .tab_con .tab_detail .details > label {font-size: 28px; font-weight: 500; line-height: 130%; letter-spacing: -1px; white-space: nowrap; cursor: default;}
.tab_area .inner .tab_con .tab_detail .sch_btn {display: inline-block; font-size: 26px; font-weight: 700; line-height: 60px; letter-spacing: -1px; color: #fff;
    padding: 0 50px; border-radius: 999px; background: #001E3D; position: relative; left: 50%; transform: translateX(-50%); margin-top: 20px;}


.list_box {padding: 60px 16.66% 80px;}
.list_box > ul {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; row-gap: 80px;}
.list_box > ul > li .img_box {position: relative;}
.list_box > ul > li .img_box ul {display: flex; border-radius: 20px; overflow: hidden; height: 230px;}
.list_box > ul > li .img_box ul .before_box {width: 50%;}
.list_box > ul > li .img_box ul .after_box {width: 50%;}
.list_box > ul > li .img_box ul li img {width: 100%; height: 137%; object-fit: cover; object-position: center top;}
.list_box > ul > li .img_box .subject_box {width: 103px; height: 103px; border-radius: 100px; background: rgba(12, 130, 254, .8); 
    display: flex; justify-content: center; align-items: center; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20;}
.list_box > ul > li .img_box .subject_box p {font-weight: 700; font-size: 18px; line-height: 120%; color: #FFF;}
.list_box > ul > li .text_box {margin: 12px 0; color: #161718;}
.list_box > ul > li .text_box .total_duration {display: block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; line-height: 130%; letter-spacing: -1px; margin-bottom: 4px;}
.list_box > ul > li .text_box > p a {font-weight: 500; font-size: 28px; line-height: 130%; letter-spacing: -1px; color: #474A4D;}

.more_btn {display: none;}

.btn-edit {display: inline-block; font-weight: 500; font-size: 14px; line-height: 18px; color: #fff; padding: 6px 12px; border-radius: 4px;
    background: #001E3D; position: absolute; top: 14px; right: 14px;}


/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .tab_area .inner {padding: 0 12%;}
    .list_box {padding: 60px 12% 80px;}
    .btn_write {right: calc(12% + 20px);}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .tab_area .inner {padding: 0 8%;}
    .list_box {padding: 60px 8% 80px;}
    .btn_write {right: calc(8% + 20px);}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .tab_area .inner {padding: 0 6%;}
    .list_box {padding: 60px 6% 80px;}
    .btn_write {right: calc(6% + 20px);}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    section .main_title {font-size: 28px; margin-bottom: 12px; line-height: 36px;}
    section .main_title i {display: block;}

    .compare_top {margin-bottom: 40px;}
    .compare_top .inner {padding: 80px 0;}
    .compare_top .inner h3 {font-size: 42px;}
    .compare_top .inner p {font-size: 14px;}


    .tab_area .inner {padding: 0 5%;}
    .tab_area .inner .btn_area {gap: 60px; margin-bottom: 20px;}
    .tab_area .inner .btn_area li a {font-size: 30px;}
    
    .tab_area .inner .tab_con .con {padding: 50px 5%; border-radius: 10px;}
    .tab_area .inner .tab_con .con form ul li label {padding: 0 25px;}
    
    .tab_area .inner .tab_con .tab_all {grid-template-columns: 1fr; gap: 20px;}
    .tab_area .inner .tab_con .tab_all ul {justify-content: center;}
    .tab_area .inner .tab_con .tab_all .banner_text {justify-content: center;}
    
    .tab_area .inner .tab_con .tab_detail .details {grid-template-columns: 1fr;}


    .list_box {padding: 40px 5% 60px;}
    .list_box > ul {grid-template-columns: 1fr; gap: 60px;}
    .list_box > ul > li .img_box ul {border-radius: 10px; height: 252px;}

    .btn_write {display: none;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */
    .compare_top {margin-bottom: 0;}
    .compare_top .inner {padding: 50px 0;}
    .compare_top .inner h3 {font-size: 36px;}


    .tab_area .inner .btn_area {gap: 32px; margin: 20px 0;}
    /* .tab_area .inner .btn_area li.pc_ver {display: none;}
    .tab_area .inner .btn_area li.mo_ver {display: block; width: 100%;}
    .tab_area .inner .btn_area li.mo_ver a {width: 100%; box-sizing: border-box; padding: 0 5%; font-size: 18px; font-weight: 700; line-height: 40px; color: #0C82FE;
        border-radius: 190px; border: 1px solid #0C82FE; background-color: #fff; 
        background-image: url(../images/icon_arrow_down.png); background-repeat: no-repeat; background-position: center right 3%; background-size: 24px;}
    .tab_area .inner .btn_area li.mo_ver a.on {border-bottom: 1px solid #0C82FE; background-image: url(../images/icon_arrow_up.png);} */
    .tab_area .inner .btn_area li a {font-size: 24px; padding: 10px 0;}

    .tab_area .inner .tab_con .con {padding: 20px 5%; background: #fff; border-radius: 10px; border: 1px solid #0C82FE;}
    .tab_area .inner .tab_con .con ul {gap: 6px;}
    .tab_area .inner .tab_con .con ul li label {padding: 0 16px; line-height: 30px; border: none; background: #F2F2F2; font-size: 12px; font-weight: 400; letter-spacing: normal;}
    .tab_area .inner .tab_con .con ul li input[type="radio"]:checked + label {font-weight: 700;}
    
    .tab_area .inner .tab_con .tab_all {/* display: none; */ gap: 12px;}
    .tab_area .inner .tab_con .tab_all .banner_text {gap: 8px;}
    .tab_area .inner .tab_con .tab_all .banner_text .badge_new {width: 52px; height: 52px; line-height: 52px;}
    .tab_area .inner .tab_con .tab_all .banner_text p {font-size: 20px;}

    .tab_area .inner .tab_con .tab_detail .details {gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;}
    .tab_area .inner .tab_con .tab_detail .details > label {font-size: 18px; font-weight: 700; line-height: normal;}
    .tab_area .inner .tab_con .tab_detail .sch_btn {font-size: 16px; line-height: 40px; padding: 0 32px; margin-top: 6px;}


    .list_box {padding: 20px 5% 60px;}
    .list_box > ul {gap: 40px;}
    .list_box > ul > li .img_box {position: relative;}
    .list_box > ul > li .img_box ul {flex-direction: column; height: auto;}
    .list_box > ul > li .img_box ul .before_box {width: 100%; height: 248px;}
    .list_box > ul > li .img_box ul .after_box {width: 100%; height: 248px;}
    .list_box > ul > li .text_box .total_duration {font-size: 15px;}
    .list_box > ul > li .text_box > p a {font-size: 24px;}
    .list_box > ul > li .text_box > p a .m_color {display: block;}
}



/* =========================================================
   전후사진 개편 (2026.07.14): 성별/연령/치료부위 드롭다운 + 4장 카드
   ========================================================= */
.form_box {padding: 0 16.66%; position: relative; margin-bottom: 30px;}
/* 드롭다운: ▼ 좌측, 3개 중앙 정렬 (목업 기준) */
.form_box .select_area {width: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin: 0 auto 10px; list-style: none; padding: 0;}
.form_box .select_area li {display: flex; margin: 0;}
.form_box form .select_area select {min-width: 210px; padding: 12px 26px 12px 78px; box-sizing: border-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; outline: none;
    border-radius: 190px; border: 1px solid #0C82FE; font-family: 'Noto Sans KR', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -1px; line-height: normal; color: #0C82FE; cursor: pointer;
    background-color: #fff; background-repeat: no-repeat; background-position: left 28px center; background-size: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%230C82FE'%3E%3Cpath d='M6 9l6 7 6-7z'/%3E%3C/svg%3E");}
.form_box form .select_area .btn_submit {display: block; padding: 12px 40px; box-sizing: border-box; background: #0C82FE; border-radius: 190px;
    font-size: 18px; font-weight: 700; line-height: normal; letter-spacing: -1px; color: #fff; border: none; outline: none; cursor: pointer;}

/* 카드 제목 (이미지 위, 가운데 정렬) */
.list_box > ul > li .card_title {text-align: center; font-weight: 500; font-size: 26px; line-height: 1.3; letter-spacing: -1px; color: #161718; margin-bottom: 16px;}
.list_box > ul > li .card_title .m_color {color: #0C82FE; font-weight: 700;}

/* 치료 전/후 그룹 (개구기+X-RAY 상하 묶음) — 그룹 사이 공백, 그룹 내부 붙임, 테두리 */
/* 2026.08.25 — 한 종류(2장)만 등록된 카드가 같은 줄의 4장 카드보다 짧아지므로,
   이미지 영역을 카드 내 남는 공간의 세로 중앙에 배치해 제목선·날짜선을 맞춘다. */
.list_box > ul > li {display: flex; flex-direction: column;}
.list_box > ul > li .img_box {position: relative; flex: 1 1 auto; display: flex; align-items: center;}
.list_box > ul > li .img_box .photo_groups {width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center;}
.list_box > ul > li .img_box .photo_group {display: flex; flex-direction: column; border-radius: 30px; overflow: hidden; background: #eee;}
.list_box > ul > li .img_box .photo_group .photo_slot {position: relative; aspect-ratio: 29 / 17; overflow: hidden;}
.list_box > ul > li .img_box .photo_group .photo_slot img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
.list_box > ul > li .img_box .badge {position: absolute; top: 10px; right: 10px; z-index: 2;}

/* 치료 전 / 치료 후 날짜 (이미지 아래, 2분할) */
.list_box > ul > li .card_dates {display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 14px; font-family: 'Inter', 'Noto Sans KR', sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -1px; text-align: center;}
.list_box > ul > li .card_dates .d_before {color: #161718;}
.list_box > ul > li .card_dates .d_after {color: #0C82FE;}
.list_box > ul > li .admin_meta {margin-top: 6px; font-size: 13px; color: red; font-weight: 500;}

@media screen and (max-width:1024px) {
    .form_box {padding: 0 5%;}
    .form_box .btn_write {display: none;}
    .list_box > ul > li .img_box .photo_groups {gap: 12px;}
    .list_box > ul > li .img_box .photo_group {border-radius: 8px;}
    .list_box > ul > li .card_title {font-size: 24px;}
}
@media screen and (max-width:768px) {
    .form_box .select_area {gap: 10px;}
    .form_box form .select_area select {min-width: 0; flex: 1; font-size: 15px; padding: 9px 14px 9px 52px; background-position: left 20px center; background-size: 22px;}
    .list_box > ul > li .card_dates {font-size: 15px;}
}


/* 하단 주의사항 (2026.07.14) */
.compare_notice {padding: 40px 16.66% 80px;}
.compare_notice ul {border-top: 1px solid #e5e8ec; padding-top: 24px;}
.compare_notice li {font-size: 15px; line-height: 1.7; letter-spacing: -0.5px; color: #8c9096;}
@media screen and (max-width:1024px) { .compare_notice {padding: 30px 5% 60px;} }
@media screen and (max-width:768px) { .compare_notice li {font-size: 13px; line-height: 1.6;} }