/* padding-bottom — 페이징 바로 아래에 풋터가 붙어 답답했다(실측 간격 0px). */
.paging {text-align:center;padding-top:96px;padding-bottom:80px;display: flex;align-items: center;justify-content: center;}
.paging a,.paging span{width:30px;margin:0 10px;height:50px;display: flex;align-items: center;justify-content: center;border:1px solid #fff;border-radius:20px;line-height:48px;font-size:18px;font-weight:600;color:#999;vertical-align:top;}
.paging img{}
.paging img.on{display:none}
.paging a.pn,.paging span.pn{border:1px solid #bcbcbc;width:50px;}
.paging a.on,.paging span.on{color:#ff779a}
button{cursor:pointer;}
.paging a:hover{color:#ff779a}
.paging a:hover img{display:none;}
.paging a:hover img.on{display:inline-block;}
.skiptranslate{display:none !important;}
/* 구글 번역 위젯은 자기 상단 배너(.skiptranslate) 자리를 만들려고
body 에 인라인으로 position:relative; top:40px 을 심는다.
배너는 위에서 숨겼는데 이 40px 만 남아 헤더와 본문 사이가 벌어졌다(한국어는 위젯을 안 띄워 정상).
인라인 스타일이라 !important 로만 되돌릴 수 있다. */
body{top:0 !important;}
#danal{display:none;z-index:1000;background:rgba(30,30,30,0.6);position:fixed;width:100%;height:100%;top:0;left:0;}
#danal.on{display:block}
#danal div{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;max-width:480px;width:100%;height:100%;}
#danal iframe{position:absolute;max-width:480px;width:100%;height:100%;}
#danal button{position:absolute;right:10px;top:8px;z-index: 9;border: 0;background: transparent;padding: 5px;cursor:pointer;}
#map{max-width:720px;width:100%;height:480px;margin:0 auto}
.find{max-width:440px;height:100%;padding:100px 20px 0 20px;margin:0 auto}
.find h1{display:none;}
.find div{display:none;}
.find div.on{display:block;}
.find h2{color:#1a202c;font-size:38px;font-weight:600;}
.find p{color: #888;font-size: 16px;font-weight: 400;letter-spacing: 0.3px;margin-bottom:64px;}
.find label{position:relative;display:block;width:100%;color:#111;font-size:16px;font-weight:600;gap:16px;margin-bottom:16px;cursor:pointer}
.sradio input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}
.sradio span{display:block;border-radius:10px;border:1px solid #E2E8F0;width:100%;height:72px;display:flex;align-items:center;padding-left:74px}
.sradio span:before{content:' ';left:16px;position:absolute;background:#fafafa url('/assets/img/icon-mail.png') no-repeat center center / 20px;border-radius:12px;width:40px;height:40px;line-height:40px;text-align:center}
.sradio img{vertical-align:middle; }
.sradio input:checked + span{border:1px solid #FF779A}
.sradio input:checked + span:before{background-color:#FF779A;background-image:url('/assets/img/icon-mail-on.png')}
.sradio._02 span:before{background-image:url('/assets/img/icon-lock.png')}
.sradio._02 input:checked + span:before{background-image:url('/assets/img/icon-lock-on.png')}
.find button,.find a{line-height:64px;cursor:pointer;border-radius: 10px;background: #FF779A;height: 64px;color:#fff;border:0;font-size:16px;font-weight:700;display:block;width:100%;margin-top:64px;}
.find input[type=text]{outline:none;width:100%;border-radius: 10px;border: 1px solid #FF779A;height:56px;padding: 0 16px 0 15px}
.find .find-phone input{background:url('/assets/img/icon-phone.png') no-repeat 16px center / 20px;padding-left:48px;}
.find .find-idok,.find .find-pwok{text-align:center;}
.find-idok img,.find-pwok img{display:block;margin:0 auto;}
.find-idok strong,.find-pwok strong{display:block;margin:40px auto 0 auto;font-size:38px;font-weight:600;color:#1a202c}
.find-idok p{width:100%;margin-top:40px;border-radius: 10px;background: rgba(234, 234, 234, 0.40);height:93px;line-height:93px;text-align:center;color:#111;font-size:18px;font-weight:400;letter-spacing:0.3px;}
.find-pwchange span{text-align:center;display:block;background:transparent;width:56px;height:56px;position:absolute;right:0;top:0;border-radius:0;margin:0;line-height:62px;cursor:pointer}
.find-pwchange input{outline:none;width:100%;border-radius: 10px;border: 1px solid #E2E8F0;height:56px;padding: 0 16px 0 15px;background:url('/assets/img/icon-lock.png') no-repeat 16px center / 20px;padding-left:48px !important;}
.find-pwchange input:focus{outline:none;border: 1px solid #FF779A;background-image:url('/assets/img/icon-lock-color.png') !important;}
.btn_review_remove{cursor:pointer;}
.login-section{display:flex}
.nav-mobile{display:none;}
.peak-search{text-align:center;font-size:26px;font-weight:600;color:#000;padding-bottom:75px}
.peak-search strong{font-size:26px;font-weight:600;color:#ff668c}
.peak-list{width:100%;}
.login-form-content{gap:38px}
.login-form .form-section{gap:20px;}
.region-text{margin-left:0px;}
.tab-btn{border-radius:35px}
.switcher-knob{top:1px;left:1px;}
.switcher-input:checked + .switcher-label{background: #ffb5c8;border:1px solid #ffb5c8;}
.input-wrapper{min-height:48px;}
.form-group .form-input{height:48px}
.form-group .form-input:disabled{background-color:#E0E0E0;}
.verify-input:read-only{background-color:#f1f1f1}
.verify-btn:disabled{background-color:#ff99b3}
.signup-link{margin-top:-30px;}
.login-container{min-height: calc(100vh - 390px);}
.login-page{min-height:auto;}
.event-list-page{min-height:auto;}
.peak-sign{display:flex;padding-top:50px;}
.peak-sign div{padding:0 55px;text-align:center;margin-bottom:81px;}
.peak-sign strong{color: #000;font-size: 28px;font-weight: 600;letter-spacing: -1.12px;}
.peak-sign p{color: #999;font-size: 18px;font-weight: 500;letter-spacing: -0.72px;margin-top:10px;}
.peak-sign a,.peak-sign button{border:0;margin:55px auto 0 auto;letter-spacing: -0.72px;width:300px;line-height:60px;display:block;text-align:center;height: 60px;font-size: 18px;font-weight: 500;border-radius: 10px;background: #ff779a;color:#fff;}
.peak-sign div:last-child a{background-color:#1b1a32}
.swiper-pagination-bullet-active{background-color:#ff6b8a}
.swiper img{vertical-align:middle}
.main-banner a{display:block}
.main-banner .swiper-slide img{display:block;vertical-align:middle}
.main-banner-section{padding:0;}
.home-page{margin-top:30px}
.home-page .notice-btn{text-align:center;line-height:40px}
.home-page .notice-section{padding:0;}
.home-swiper-box{max-width:1440px;width:100%;position:relative;margin:0 auto}
.home-swiper{position:absolute;border-radius: 40px;width:98px;height:31px;background: #eee;color:#999;font-size: 18px;font-weight:400;margin-top:20px;right:0;}
.home-swiper .swiper-pagination{position:relative;top:7px;z-index:1;font-size:13.245px;}
.home-swiper .swiper-button-next, .home-swiper .swiper-button-prev{color:#999;z-index:2}
.home-swiper .swiper-button-next:after,.home-swiper .swiper-button-prev:after{font-size:10px;font-weight:700}
.home-swiper .swiper-button-next{right: var(--swiper-navigation-sides-offset, 5px);}
.home-swiper .swiper-button-prev{left: var(--swiper-navigation-sides-offset, 5px);}
.home-page .clinic-card .card-content {background-color:transparent;padding:0;}
.home-page .deal-card .card-content{background-color:transparent;padding:0;}
.home-page .section-title{margin-bottom:0px;position:relative;}
.section-title .more{position:absolute;right:0;width:73px;height:32px;text-align:center;line-height:31px;font-size:14px;font-weight:400;color: #FF779A;border:1px solid #ff779a;border-radius:40px;top:0;margin-top:-10px;background:url('/assets/img/add.png') no-repeat 10px center / 9px;padding-left:12px;}
.home-page .new-content-card .card-content{background-color:transparent;padding:0;height:110px;}
.home-page .review-card .card-content{background-color:transparent;padding:0;}
.home-page .trend-item{align-items:start}
.home-page .trend-rank{margin-top:20px;}
.home-page .trend-rank._4{color:#222}
.home-page .trend-rank._5{color:#222}
.home-page .section-container{display: flex;flex-direction: column;gap: 60px;}
.home-page .notice-content{display:block;overflow:hidden;padding:0;}
.swiper_text .swiper-slide{display:flex;align-items:center;padding:0 32px;}
.swiper_text.swiper-horizontal{height:100%;}
.peak-list._medical .card-content{height:auto}
.detail-content.deal {width:1434px;padding-top:40px;}
.detail-content.deal .detail-main{width:1080px;margin:0 auto}
.detail-content.deal .detail-text img{max-width:1080px;width:auto !important;}
.detail-content.deal figure {margin:0 auto !important}
.detail-content.deal figure img{margin:0 auto !important;display:block}
.detail-main._rh{width:100%;}
.detail-main._rh .detail-view{position:relative;}
.detail-main._rh .detail-view-box{width:720px}
.deal-title{display:flex;width:1434px;margin-bottom:120px;justify-content: space-between;}
.deal-title .change{object-fit: cover; object-position: top center;border-radius:20px;}
.deal-option{width:560px;}
.deal-option .btn-deal-pay,.deal-option .btn-deal-pay-off{display:flex;align-items: center;justify-content: center;background: #FF779A;color:#fff;height:72px;font-size:20px;letter-spacing:-0.132px;border:0;width:100%;cursor:pointer;opacity:1;}
.deal-option .btn-deal-pay span,.apply-btn span,.apply-mobile span{display:none;border-radius:23px;width:23px;height:23px;background-color:#fff;color:#000;font-size:15px;align-items:center;justify-content:center;margin-right:13px;padding-top:1px;}
.apply-btn:disabled span{display:none}
.apply-mobile:disabled span{display:none}
.deal-option .btn-deal-pay:disabled{opacity:0.7;cursor:default;}
/* ── 마감된 딜 — 옵션 선택·구매/신청 모두 잠금 (언어 공통) ── */
.deal-option .custom-select.is-closed .selected{
background:#F5F6F8 !important;color:#98A2B3 !important;cursor:not-allowed !important;border-color:#E5E8EE !important
}
.deal-option .btn-deal-pay.is-closed{
background:#D9DDE3 !important;color:#fff !important;cursor:not-allowed !important;opacity:1 !important
}
.deal-option .btn-deal-pay.is-closed:hover{background:#D9DDE3 !important}
.deal-option .btn-deal-pay:disabled span{display:none;}
.deal-select{width:100%;position:relative;}
.deal-select button{right:20px;position:absolute;border:1px solid #d5d3e0;border-radius:6px;background-color:#fff;box-shadow: 0 3.686px 14.743px 0 rgba(0, 0, 0, 0.02);width:25px;height:25px;line-height:10px;}
.deal-select img{vertical-align:middle;}
.deal-select div{height:64px;width:100%;display:flex;align-items:center;padding:0 20px;justify-content: space-between;border-bottom:1px solid #acacac;background-color:#FAFAFA}
.deal-select div:nth-child(1){margin-top:31px;border-top: 2px solid #acacac;}
.deal-select span{font-size:16px;font-weight:500;letter-spacing: -0.096px;width:calc(100% - 220px);white-space: nowrap;display: -webkit-box;word-wrap: break-word;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;margin-right:5px;}
.deal-select strong{font-size:18px;font-weight:700;margin-right:38px;letter-spacing: -0.108px;min-width:100px;text-align:right;}
.deal-total{margin-top:60px;}
.deal-total div{margin-top:87px;width:100%;display:flex;align-items:center;justify-content: space-between;height:38px;margin-bottom:32px;}
.deal-total div.on{display:flex}
.deal-total span{font-size:16px;font-weight:500;}
.deal-total strong{font-size: 22px;font-weight:700;}
.deal-select div a{cursor:pointer;width:20px;height:20px;border-radius:5px;background-color: #fff;text-align: center;border: 1px solid #dadada;line-height: 17px;font-size:16px}
.deal-select div input{background:transparent;border:0;color:#222;font-size:15px;width:30px;text-align:center;padding:0;}
.deal-select div input[type="number"]::-webkit-outer-spin-button,
.deal-select div input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
.deal-select div input[type="number"] { -moz-appearance: textfield; text-align: center;}
.custom-select {position: relative;width: 100%;cursor: pointer;margin-top:38px;font-size:16px;}
.custom-select .selected {padding: 0 45px 0 32px;border: 1px solid #bfbfbf;background:#fff url('/assets/image/option_select_off.png') no-repeat right 20px center / 27px;height:64px;line-height:64px;border-radius:5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.custom-select .selected.on{background:url('/assets/image/option_select_on.png') no-repeat right 20px center / 27px;border-radius:5px 5px 0 0;}
.options {position: relative;top: 100%;left: 0;width: 100%;background: #fff;list-style: none;padding: 0;margin: 0;display: none;max-width:690px;}
.options li {padding: 0 27px;border:1px solid #bfbfbf;border-top:0;color:#262626;font-size:16px;height:64px;line-height:64px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
.options li:hover {background: #ffe7e9;}
.options li:last-child{border-radius:0 0 5px 5px}
.peak-view{padding-top:80px;}
.peak-review ul{list-style-type:none;display:flex;gap:12px;margin-top:5px;position:relative}
.peak-review ul:after{position:absolute;transform:translate(-50%,0);left:50%;top:-52px;width:156px;height:47px;font-size:24px;font-weight:400;text-align:center;line-height:47px;background-color:#fff;border-radius:20px 20px 0 0}
.peak-prev{position:relative;}
.peak-after{position:relative;}
.peak-prev ul:after{content:'BEFORE'}
.peak-after ul:after{content:'AFTER'}
.peak-review{max-width:1200px;margin:0 auto 50px auto;display:flex;gap:40px;}
.peak-review img{object-fit:contain; vertical-align:middle;object-position:center;display: block;z-index:3;cursor:pointer;}
.peak-view-div{overflow:hidden;display:flex;align-items:center;justify-content:right;position:relative;border-radius:20px;border:1px solid #fff;width:580px;height:580px;}
.peak-view-div::before{position:absolute;width:100%;height:100%;content:' ';background-color:#000;z-index:2;border-radius:20px;}
.peak-review img.peak-view-img{margin:-1px 0 0 -1px;}
.peak-review li{overflow:hidden;display:flex;align-items:center;justify-content:right;position:relative;border-radius:10px;border:1px solid #fff;width:136px;height:136px;}
.peak-review li::before{flex-shrink: 0;position:absolute;width:100%;height:100%;content:' ';background-color:#000;z-index:2;border-radius:10px;}
.peak-review li img{margin:-1px 0 0 -1px;}
.peak-review .hori{display:flex;position:relative;}
.peak-review .hori ul{display:block;margin:0 0 0 14px;}
.peak-review .hori li{margin-bottom:12px;}
.peak-review .hori li img{}
.peak-review .hori li:last-child{margin-bottom:0}
.wave-image2{display:none}
.wave-footer{height:auto}
.wave-footer img{width:100%;}
.popular-list{display:none}
.popular-list.on{display:flex}
.peak-view .detail-sidebar{gap:60px}
.insite-list{display:flex;gap:53px;}
.insite-list ul{list-style-type:none;width:25%;}
.insite-list li{display:block;margin-bottom:60px;}
.insite-list li span{color: #666;font-size: 13px;font-weight:400}
.insite-list img{border-radius:10px;width:320px;}
.insite-list video{border-radius:10px;width:320px;}
.insite-list a,.insite-list strong{display:block;color:#383838;font-size:18px;font-weight:500;margin-top:0px;}
.insite-list strong{display: -webkit-box;word-wrap: break-word;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;}
.comment-item:last-child, .comment-reply-item:last-child{border-bottom:0;}
.se-image-container img{max-width:720px !important;height:auto !important}
/* ── 글 상세 (핫트렌드·인사이트·리얼리뷰) — 시안 article_detail_web ──
순서: 브래드크럼 → 제목 → 작성자 줄 → 대표이미지 → 본문
※ 병원 리뷰(.detail-main._rh)는 구성이 달라 건드리지 않는다. */
.detail-h1 {font-size:22px;font-weight:700;margin:24px 0 34px 0;}
.detail-main:not(._rh) .detail-h1{
font-size:28px;font-weight:700;line-height:1.35;letter-spacing:-.025em;
margin:0 0 22px;word-break:keep-all;overflow-wrap:break-word;
}
/* 작성자 줄 — 아바타 44px, 닉네임 왼쪽, 날짜·조회·댓글 오른쪽 */
.detail-main:not(._rh) .write-info{
align-items:center;gap:12px;
padding-bottom:22px;border-bottom:1px solid #E9EBEF;margin-bottom:32px;
}
.detail-main:not(._rh) .write-info img,
.detail-main:not(._rh) .write-info .wi-initial{
width:44px;height:44px;flex:0 0 44px;border-radius:50%;font-size:16px;
}
.detail-main:not(._rh) .write-info strong{font-size:15px;font-weight:600}
.detail-main:not(._rh) .write-info > div:first-child{gap:12px;align-items:center}
/* 날짜는 시안대로 오른쪽 묶음에 있다 — 닉네임 옆의 것은 모바일에서만 쓴다.
칼럼은 날짜·병원명이 .wi-sub 로 묶여 있는데, PC 에서는 병원명만 남긴다. */
.detail-main:not(._rh) .write-info > div:first-child > .wi-date,
.detail-main:not(._rh) .write-info .wi-sub > .wi-date{display:none}
.detail-main:not(._rh) .write-info .wi-sub{display:inline-flex;align-items:center;gap:10px}
.detail-main:not(._rh) .write-info .wi-meta{
margin-left:auto;display:flex;align-items:center;gap:14px;
font-size:13px;color:#9AA1AC;white-space:nowrap;
}
.detail-main:not(._rh) .write-info small{font-size:13px;color:#9AA1AC}
/* 본문 아래 조회·댓글은 모바일에서만 쓴다 */
.detail-footmeta{display:none}
/* 대표이미지 — 원본 비율 그대로 (예전 16:9 잘라내기는 요청으로 제거) */
.detail-main:not(._rh) .peak-trend{margin:0 0 36px}
.detail-main:not(._rh) .peak-trend .view-img{
width:100%;height:auto;border-radius:16px;display:block;
}
/* 리얼리뷰(뷰티·라이프·스팟) 갤러리 — 예전엔 제목 위 전체폭(580px 고정)이었다.
이제 본문 칼럼 안으로 들어오므로 다른 상세의 대표이미지처럼 칼럼 폭에 맞춘다. */
.detail-main:not(._rh) .detail-view-box .peak-review{
max-width:100%;margin:0 0 36px;
}
.detail-main:not(._rh) .detail-view-box .peak-review .hori{
display:flex;gap:14px;align-items:flex-start;
}
/* 큰 이미지는 남는 폭을 다 쓰고 1:1 을 유지한다 */
.detail-main:not(._rh) .detail-view-box .peak-review .peak-view-div{
flex:1 1 auto;width:auto;height:auto;aspect-ratio:1/1;border-radius:16px;
}
.detail-main:not(._rh) .detail-view-box .peak-review .peak-view-div::before{border-radius:16px}
.detail-main:not(._rh) .detail-view-box .peak-review img.peak-view-img{
width:100%;height:100%;object-fit:contain;margin:0;
}
/* 썸네일 줄 */
.detail-main:not(._rh) .detail-view-box .peak-review .hori ul{margin:0;flex:0 0 96px}
.detail-main:not(._rh) .detail-view-box .peak-review .hori li{
width:96px;height:96px;border-radius:10px;
}
.detail-main:not(._rh) .detail-view-box .peak-review .hori li img{width:100%;height:100%;margin:0}
/* 병원 리뷰 — 어느 병원 후기인지 제목 아래에 표시 */
/* 본문 아래에 놓인다 — 예전 제목 밑에 있을 때 쓰던 음수 여백은 걷어낸다 */
.detail-hospital{margin:28px 0 0}
.detail-hospital a,
.detail-hospital span{
display:inline-flex;align-items:center;gap:6px;
height:32px;padding:0 14px;border-radius:16px;
background:#FFF6F8;border:1px solid #FFC2D4;
color:#E1466F;font-size:14px;font-weight:600;text-decoration:none;
}
.detail-hospital a:hover{background:#FFF0F4}
.detail-hospital a::before,
.detail-hospital span::before{
content:"";width:13px;height:13px;flex:0 0 13px;background:#E1466F;
-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask:url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
@media (max-width:720px){
.detail-hospital{margin:22px 0 0}
.detail-hospital a,
.detail-hospital span{height:30px;padding:0 12px;font-size:13px}
}
#classic{width:976px;}
.review {max-width:1440px;margin:0 auto;margin-top:100px;position:relative}
/* sticky 가 동작하려면 부모가 stretch 가 아니어야 한다(가이드) */
.review .write{display:flex;align-items:flex-start}
/* 우측 입력 컬럼 — 본문이 길어져도 제목·병원명·카테고리·작성 버튼이 따라온다.
⚠ overflow 를 걸지 말 것 — 카테고리 드롭다운이 컬럼 경계에서 잘린다(가이드) */
.review .title{margin-left:27px;position:sticky;top:24px;align-self:flex-start;z-index:6;width:437px;flex:0 0 437px}
.title-box{border-radius:10px;width:437px;padding:26px;position:relative;border:1px solid #E2E8F0;margin-bottom:27px;}
.title-box h2{font-size:20px;font-weight:700;line-height:26.69px;letter-spacing:-0.16px;color:#1e293b;margin-bottom:26px;}
.title-box div{position:absolute;font-size:15px;font-weight:500;color:#999;left:26px; left: 26px;background-color: #fff;width: calc(100% - 52px);}
.title-box div#counter,.title-box div#counter_author,.title-box div#counter_author_en,.title-box div#counter_ed_title{left:unset;right:36px;top:unset;bottom:40px;width:auto;}
.hospital_list button,.hospital_list .no-text{display:block;display: block;height:40px;padding: 0 10px;background: transparent;color: #1c1c1c;font-size: 15px;font-weight: 500;border: 0;width: 100%;text-align:left;border: 1px solid #ececec;border-bottom: 0;}
.hospital_list .no-text{border-bottom:1px solid #ececec;line-height:40px;}
.hospital_list button:last-child{border-bottom:1px solid #ececec;}
.hospital_list button:hover{background-color:#FFE7ED}
.title-box input{width:100%;height:54px;padding:0 26px;border-radius:10px;outline:1px solid #CBD5E1;border:0;font-size:15px;font-weight:500}
.title-box input::placeholder{color:#999}
.title-box select{width:100%;height:54px;padding:0 26px;border-radius:10px;appearance: none;-webkit-appearance: none;-moz-appearance: none;border:0;padding:0 26px;font-size: 15px;font-weight:500;background: #fff url('/assets/img/select_eb6390.png') no-repeat right 20px center / 23px;outline:1px solid #CBD5E1;color:#999}
.title-box input:focus {outline:1px solid #EB6390;color:#1E293B}
.title-box select:focus {outline:1px solid #EB6390;color:#1E293B}
.title-box option[value=""] {color: #999;}
.title-box._hospital{display:none;}
.title-box._hospital.on{display:block;}
.write-btn {display:flex;gap:10px;padding:0;margin-top:-7px}
.write-btn button{border-radius:17px;width:50%;background-color:transparent;border:0;height:70px;border:1px solid #CBD5E1;color:#262626;font-size:18px;font-weight:600;letter-spacing:-0.126px;cursor:pointer}
.write-btn button:last-child{border:1px solid #FF779A;color:#fff;background-color:#FF779A}
.write-btn button:disabled{border:1px solid #ff8eab;background-color:#ff8eab}
.column-write .write-btn button.column_write:disabled{border:1px solid #ECECEC;background-color:#ECECEC;color:#999;cursor:default}
.review .file{border-radius: 20px;border: 1px solid #CBD5E1;padding:11px 26px 52px 26px;width:976px;margin-top:40px;}
.review .file h2{font-size: 20px;font-weight: 700;letter-spacing: -0.16px;margin-top:40px;}
.review .file span{color:#EB6390}
.review .file p{color: #8A8A8A;font-size: 14.851px;font-weight: 400;}
.review .file-box{position:relative;margin-top:24px;display:inline-block;display:flex;}
.review .file-img-multi{position:relative;overflow: hidden;}
.file-box input{position:absolute;left:0;top:-50px;width:100%;height:calc(100% + 50px);opacity:0;cursor:pointer;z-index:2;}
.file-img {display:flex;position:relative;z-index:3;}
.file-img div{position:relative;z-index:4;overflow: hidden;margin-right:10px;}
.file-img img{z-index:2;border-radius:5px;width:87px;height:87px;object-fit:cover;}
.file-img button{z-index:3;position:absolute;top:8px;right:7px;background:#fff url('/assets/img/trash.png') no-repeat center center / 15px;width:24px;height:23px;border-radius: 4.622px;border: 0.553px solid #D5D3E0;box-shadow: 0 2.764px 11.058px 0 rgba(0, 0, 0, 0.02);cursor:pointer;}
.review .etc.on h2:before{content:'대표 ';}
.review .hospital{display:none}
.review .hospital.on{display:block}
.review_ok{margin:80px auto;text-align:center;width:508px;display:none;font-size: 32px;}
.review_ok strong{font-size: 32px;font-weight: 800;line-height: 55px;letter-spacing: -0.256px;}
.review_ok a{color:#fff;font-size:20.506px;font-weight: 600;width:100%;letter-spacing: -0.144px;display:block;margin-top:57px;height: 75px;line-height:75px;border-radius: 10px;background-color:#EB6390;}
.peak-trend{margin-bottom:50px;position:relative;}
.peak-trend .swiper-pagination{bottom:-15px !important}
.peak-trend .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{width:6px;height:6px;background:#929292;margin:0 4px;opacity:1;}
.peak-trend .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active{background:#000}
.swiper_view{overflow:hidden;width:100%;padding-bottom:29px;}
.swiper_view .swiper-slide{text-align:center}
.swiper_view .swiper-wrapper{display:flex;align-items:center;}
.swiper_view img{width:100%;max-width:720px;height:auto;object-fit:cover;vertical-align:middle}
.swiper_event{overflow:hidden;width:100%;padding-bottom:0px;height:400px;border-radius:10px}
.status-select-container{max-width:100%;}
.status-select-container select:focus-within{outline:1px solid #eb6390;background-image:url('/assets/img/select_up.png') }
.status-select-container .select-trigger{width:168px;height:39px;border-radius:5px;padding:0 20px;min-height:39px;background:#F7F7F7 url('/assets/img/select_down.png') no-repeat right 20px center / 24px;display:flex}
.status-select-container .select-trigger.on{background-image:url('/assets/img/select_up.png')}
.status-select-container .select-dropdown{position:absolute;left:unset;right:unset;top:unset;width:168px;}
.status-select-container .select-value{display:flex;align-items:center;color:#000}
.status-select-container .select-value._op0{color:#06BF5C;}
.status-select-container .select-value._op1{color:#CD2E3A;}
.top-nav .status-select-container .country-flag{margin-right:8px;height:12px;width:16.8px}
.top-nav .status-select-container .select-value strong{font-weight:500;color:#000;opacity:0.6;font-size:13px;}
.top-nav .status-select-container .select-trigger{background:rgba(0,0,0,0) url('/assets/img/header_down.png') no-repeat right 30px center / 15px;width:105px;height:30px;padding:0 20px 0 10px}
.top-nav .status-select-container .select-dropdown{width:105px;margin-top: -38px; margin-left: -1px;}
.top-nav .select-dropdown{border-radius:5px;}
.top-nav .select-option{padding:10px 30px 10px 10px;gap:0px;}
.top-nav .select-option strong{font-weight:500;color:#000;opacity:0.6;font-size:13px;}
.top-nav .select-option:nth-child(1){background:url('/assets/img/header_up.png') no-repeat right 28px center / 15px;;}
.peak-mypage{position: absolute;right: 0;top: 16px;display: flex;align-items: center;}
.peak-mypage span{display: flex;align-items: center;font-size:15px;color:#000;font-weight: 500;}
.peak-mypage small{font-size:15px;color:#000;font-weight: 500;}
.peak-mypage a{margin-left:20px;font-size:14px;color:#ff779a;font-weight: 500;}
.peak-mypage img{width:36px;height:36px;border-radius:30px;margin-right:10px;object-fit:cover}
.top-nav.on{border-bottom:1px solid #ebebeb}
.peak-address .page-title{color:#000;font-size:16px;font-weight:600;margin-bottom:20px;}
.address-box{display: flex;width: 640px;height: 170px;padding: 30px;flex-direction: column;justify-content: center;align-items: center;gap: 10px;border-radius: 10px;background: #F8F8F8;}
.address-box p{color:#999;font-size:16px;font-weight:500;}
.address-box button{background-color: #FF779A;color:#fff;font-size:16px;font-weight:500;width:200px;height:40px;border:0;border-radius:5px;}
.address-box button:hover{background-color: #e55a7a;}
.peak-address small{color:#999;font-size:15px;font-weight:500;display:block;margin-top:15px}
.peak-address .content-section{gap:0px}
.peak-address li{position:relative;display: block;width: 640px;padding: 30px;border-radius: 10px;background: #F8F8F8;}
.peak-address .btn-addr-modify,.peak-address .btn-bank-modify{position:absolute;right:30px;top:30px;border-radius: 5px;border: 1px solid #DFE1E3;background: #FFF;width:77px;height:32px;line-height:32px;text-align:center;color: #1C1C1C;;font-size:15px;}
.peak-address span{font-size:16px;margin:0;color:#656565;font-weight:500;}
.peak-address span.zip{margin-bottom:3px;display:inline-block}
.peak-address span.phone{font-size:16px;margin:0;color:#656565;font-weight:400;}
.peak-address strong{display:block;margin-bottom:13px;font-size:18px;font-weight:600;color:#000}
.modal-address{display:none;position:fixed;width:100%;height:100%;left:0;top:0;background-color: rgba(30, 30, 30, 0.60);z-index:9999}
.modal-address.on{display:flex;justify-content:center;align-items:center;}
.modal-address button{cursor:pointer;}
.modal-address h2{color:#000;font-size:18px;font-weight:600;margin-bottom:6px;}
.modal-address form{width:560px;padding:30px;border-radius:10px;background-color:#fff;}
.modal-address input{padding:0 23px;border-radius:10px;border:0;outline:1px solid #dfe1e3;height:46px;margin-top:14px;width:100%;font-size:15px;}
.modal-address input::placeholder{color:#bdbebf}
.modal-address input:focus{border:0;outline:1px solid #FF779A;}
.modal-address input.bank-find{border:0;width:100%;border:0;outline:0;margin:0;padding:0;}
.modal-address inputbank-find:focus{border:0;}
.modal-address .addr{position:relative;}
.modal-btn{padding-top:60px;display:flex;justify-content:end;}
.modal-btn button{margin-left:10px;border:1px solid #d8daeb;border-radius:10px;background-color:#fff;color:#262626;font-size:16px;font-weight:600;width:100px;height:50px;cursor:pointer}
.modal-btn .btn-addr-save,.modal-btn .btn-bank-save,.modal-btn .btn-pw-save{background-color:#FF779A;border:1px solid #FF779A;color:#fff;}
#wrap{display:none;margin-top:14px;border:1px solid;width:500px;height:300px;position:relative;border:1px solid #dfe1e3;}
.peak-company #wrap{width:100%;margin-top:-30px;}
#btnFoldWrap{cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1;border-radius:10px;width:20px;height:20px;color:#fff;background-color:#FF779A;border:0;font-size:14px;line-height:18px;}
.btn-addr-search{position:absolute;right:0;bottom:0;width:103px;height:46px;border:0;border-left:1px solid #dfe1e3;border-radius:0 10px 10px 0;background-color:#fff;font-size:15px;color:#1c1c1c;cursor:pointer;}
#layer{display:none;position:fixed;overflow:hidden;z-index:9999;-webkit-overflow-scrolling:touch;}
#layer img{cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:9999}
.mbti-widget {position: fixed;bottom: 24px;right: 24px;;z-index: 100;}.mbti-widget img {width: 65px;}
.btn-review{position:fixed;bottom: 106px;right:24px;width: 65px;height: 65px;z-index: 100;}
.medical-banner .swiper img{height: 540px;object-fit: cover;object-position: top;}
.banner_mobile{display:none;}
.write-info{display:flex;align-items:center;justify-content: space-between;}
.write-info div{display:flex;gap:8px;align-items:center;}
.write-info img{object-fit:cover;border-radius:24px;vertical-align:middle}
.write-info strong{color:#333;font-size:14px;font-weight:600;display:block;}
.write-info span{color:#8c8c8c;font-size:13px;font-weight:400;display:block;margin-top:1px;}
.write-info a,.write-info button{color:#8c8c8c;font-size:13px;font-weight:400;display:block;padding:0;margin:0;line-height: 23px;background:transparent;border:0;}
.write-info small{color:#b3b3b3;font-size:13px;font-weight:400;margin-left:6px;padding-left:16px;}
.write-info small.ic-hit{background:url('/assets/img/icon-hit.png') no-repeat 0 center / 12px}
.write-info small.ic-reply{background:url('/assets/img/icon-review.png') no-repeat 0 center / 12px}
.peak-modal{display:none;position:fixed;width:100%;height:100%;background-color:rgba(30,30,30,0.6);z-index:1000;left:0;top:0;align-items:center;justify-content:center}
.peak-modal.on{display:flex}
.peak-modal div{display:none;background-color:#fff;border-radius:17px;padding:25px 0 0 0;width:267px;height:168px;text-align:center;}
.peak-modal strong{color:#FF779A;font-size:16px;font-weight:600;}
.peak-modal p{color:#85939e;font-size:14px;font-weight:400;height:70px;line-height:17px;padding-top:17px;}
.peak-modal button{cursor:pointer;color:#191C20;font-size:15px;font-weight:600;height:44px;background:transparent;border:0;border-top:1px solid rgba(229,229,229,0.5);width:100%;}
.peak-list._deal{margin-top:0px}
.peak-list._deal li img{border-radius:20px;}
.peak-list._deal li img._mobile{display:none;}
._mymenu{display:none;position: fixed;lefT: 0;top: 80px;width: 100%;background: #fff;height: calc(100% - 80px);padding-top:10px;overflow: hidden;overflow-y: auto;}
._mymenu .sidebar-content{padding:0 20px}
._my .left-sidebar{display:block}
._my ._mobile{display:none}
.left-sidebar{padding-top:20px;}
.main-area.peak-event{padding-top:20px;gap:0px;}
.peak-event .input-wrapper{background-color:#F7F7F7;height:60px;line-height:60px;border:1px solid #f7f7f7;}
.peak-event .input-wrapper:focus-within{background-color:#fff;border:1px solid #ff4e7a}
.peak-event .section-title{font-size:19px;margin-bottom:0;}
.peak-event-title.form-row{gap:22px;}
.peak-event-title.form-row .form-group:nth-child(1){flex:none;width:714px;}
.peak-event-title.form-row .form-group:nth-child(2){flex:none;width:342px}
.peak-event .select-trigger {border: 1px solid #f7f7f7;background-color: #f7f7f7;border-radius: 10px;padding: 10px 30px;min-height: 60px;display: flex;align-items: center;justify-content: space-between;cursor: pointer;}
.peak-event .select-trigger.on{background-color: #f7f7f7;border: 1px solid #FF779A;}
.peak-event .select-trigger:focus-within {background-color: #f7f7f7;border: 1px solid #FF779A;}
.peak-event .select-value {display:flex}
.peak-event .select-value img{margin-right:9px;}
.peak-event .date-range-wrapper{padding-left:30px;}
.peak-event .form-group .form-input.date-range-input{border:0;height:auto;background:transparent;padding:0;}
.peak-event .option-inputs{margin-bottom:0}
.peak-event .option-inputs .input-wrapper{background-color:#fff}
.peak-event .option-inputs .input-wrapper input{padding:0 30px}
.peak-event .option-col{justify-content: start;padding:10px 10px 10px 50px}
.peak-event .table-body .delete-btn{width:40px;height:40px;}
.peak-event .table-body .delete-btn img{width:19px;height:19px;}
.peak-event .upload-icon{margin-bottom:0;}
.peak-event .upload-text{margin-bottom:0;}
.peak-event .form-label{font-size:19px;font-weight:700;}
.peak-event .form-group{gap:23px}
.peak-event .form-group .form-input{height:60px;padding-left:30px;border:0;}
.peak-event .tax-btn{border-color:#f7f7f7}
.peak-event .register-btn{background-color:#FF779A}
.peak-event .file-icon img{object-fit:cover;border-radius:4px;}
.ui-widget{font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;}
.ui-datepicker table{font-size:16px;font-weight:500;width:calc(100% - 40px);margin:0 auto}
.ui-datepicker th{font-size:16px;font-weight:500}
/*#ui-datepicker-div{margin-left:-30px;margin-top:-17px;width:499px;padding-top:30px;z-index:9999 !important}
.ui-widget-content{border:1px solid #ececec;border-radius:10px 10px 0px 0px;}
.peak-event .date-range-wrapper:focus-within{background-color:#fff;border:1px solid #ff4e7a;border-radius:0px 0px 10px 10px}*/
#ui-datepicker-div{margin-left:-30px;margin-top:18px;width:508px;padding-top:30px;z-index:9999 !important;border:1px solid #ececec;border-radius:0 0 10px 10px;}
#ui-datepicker-div._top{margin-top:-18px;border-radius:10px 10px 0px 0px;}
.peak-event .date-range-wrapper:focus-within{background-color:#fff;border:1px solid #ff4e7a;border-radius:10px 10px 0 0}
.peak-event .date-range-wrapper._top:focus-within{border-radius:0px 0px 10px 10px}
.peak-event .status-select-container .select-trigger{padding:0 30px;min-height:39px;}
.ui-datepicker .ui-datepicker-header{background:transparent;border:0;height:50px;}
.ui-datepicker .ui-datepicker-title{position:relative;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{border:0;width:auto;font-size:18px;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.ui-datepicker select::-ms-expand { display: none; }
.ui-datepicker select.ui-datepicker-year{position:absolute;left:50px;}
.ui-datepicker select.ui-datepicker-month{position:absolute;left:0;}
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled{opacity:0.5;background:transparent;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{background:transparent;border:0;font-size:16px;}
.ui-datepicker td span, .ui-datepicker td a{text-align:center;padding:5px 10px;}
.ui-datepicker .ui-datepicker-prev{left:unset;right:70px;width:18px;height:18px;}
.ui-datepicker .ui-datepicker-next{left:unset;right:45px;width:18px;height:18px;}
.ui-datepicker .ui-datepicker-buttonpane{border:0;}
.ui-datepicker td.ui-datepicker-week-end:first-child a{color:#F36A6A}
.ui-datepicker td.ui-datepicker-week-end:last-child a{color:#6A7AF3}
.ui-datepicker th.ui-datepicker-week-end:first-child span{color:#F36A6A}
.ui-datepicker th.ui-datepicker-week-end:last-child span{color:#6A7AF3}
.ui-icon.ui-icon-circle-triangle-w{background:url('/assets/img/prev.png') no-repeat 0 0 / 18px}
.ui-icon.ui-icon-circle-triangle-e{background:url('/assets/img/next.png') no-repeat 0 0 / 18px}
.ui-state-active, .ui-widget-content .ui-state-active{background-color:#ff86a4;border-radius:8px;color:#fff !important}
.ui-state-hover, .ui-widget-content .ui-state-hover{background-color:#ff86a4;border-radius:8px;color:#fff !important}
.ui-corner-all.ui-state-hover{background:transparent;padding:0;border:0;font-weight:normal;top:2px}
.ui-datepicker .ui-datepicker-buttonpane{text-align:right;margin:0;padding:40px 30px 30px 0;}
.ui-datepicker .ui-datepicker-buttonpane button{width:96px;height:42px;color:#fff;background-color:#ff86a4;border:1px solid #ff86a4;border-radius:4px;font-size:14px;font-weight:500;line-height:42px;padding:0;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{color:#ff86a4;border:1px solid #ff86a4;background-color:#fff;float:unset}
.ui-datepicker .ui-datepicker-buttonpane button.ui-state-hover:hover{color:#ff86a4 !important;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close.ui-state-hover:hover{color:#fff !important;}
.file-upload-area {transition: all 0.3s ease;cursor: pointer;}
.file-upload-area.drag-over {background-color: #f0f8ff !important;border-color: #ff668c !important;border-style: dashed !important;transform: scale(1.02);box-shadow: 0 4px 20px rgba(255, 102, 140, 0.3);}
.file-upload-area.drag-over .upload-title {color: #ff668c !important;font-weight: 600;}
.file-upload-area.drag-over .upload-icon img {transform: scale(1.1);filter: hue-rotate(320deg);}
.file-item {animation: slideIn 0.3s ease-out;}
@keyframes slideIn {from {opacity: 0;transform: translateY(-10px);}to {opacity: 1;transform: translateY(0);}}
.file-upload-area:hover {background-color: #fafafa;border-color: #ddd;}
.upload-btn:hover {background-color: #e55a7a;transform: translateY(-1px);}
.file-item:hover {background-color: #f9f9f9;ransform: translateY(-1px);box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
.delete-btn:hover {background-color: #ff4e7a;}
.delete-btn:hover img{filter: invert(1)}
.progress-fill {transition: width 0.3s ease;}
.file-item.upload-success {border-color: #4CAF50;background-color: #f8fff8;}
.file-item.upload-success .progress-fill {background-color: #4CAF50;}
.file-item.upload-error {border-color: #f44336;background-color: #fff8f8;}
.file-item.upload-error .progress-fill {background-color: #f44336;}
.file-item.upload-error .progress-text {color: #f44336;font-weight: 500;}
.file-item.uploading {border-color: #ff9800;background-color: #fff8e1;}
.file-item.uploading .progress-fill {background-color: #ff9800;}
.delete-btn:disabled {opacity: 0.5;cursor: not-allowed;background-color: #ccc;}
.file-item.loading {position: relative;}
.file-item.loading::after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(255, 255, 255, 0.8);display: flex;align-items: center;justify-content: center;z-index: 1;}
.peak-event .search-section{width:auto}
.peak-event .status-select-container select{outline:1px solid #F7F7F7;appearance: none;-webkit-appearance: none; -moz-appearance: none; padding:0 20px;width:168px;height:39px;font-size: 15px;font-weight:500;border:0;border-radius: 5px;background: #F7F7F7 url('/assets/img/select_down.png') no-repeat right 20px center / 24px;}
.status-select option[value="1"] {color: #06BF5C;font-weight: 500;}
.status-select option[value="0"] {color: #CD2E3A;font-weight: 500;}
.peak-event .search-text{padding:0;width:100%;}
.peak-event .search-text input{outline:none;width:100%;height:40px;border:0;background:transparent;font-size: 15.75px;font-weight:500}
.peak-event .search-text input::placeholder{color:rgba(28, 28, 28, 0.30);}
.peak-event .event-name-col{width:300px;justify-content: start;text-align:left;padding-left:30px}
.peak-event .deal-name-col{width:500px;justify-content: start;text-align:left;padding-left:30px}
.peak-event .action-col{width:142px;}
.peak-event .country-col{margin-right:0}
.peak-event .event-name a{color:#1c1c1c;}
.peak-event .table-row{border-bottom:1px solid #F3F3F3}
.peak-event .table-row:hover{background-color:transparent}
.table-row::before{border-bottom:0;}
.peak-event-banner{margin-top:-30px;color: #7D7D7D;font-size: 16px;letter-spacing: 0.16px;}
.user-title-col{width:300px;justify-content: start;}
.table-cell.user-title-col div{font-weight:700;color:#1C1C1C;font-size:16px;}
.header-cell.user-detail-col{width:300px;}
.table-cell.user-detail-col{width:300px;justify-content: start;}
.table-cell.user-detail-col div{color:#8d8d8d;font-size:15px;}
.user-status-col{width:200px;}
.table-cell.user-status-col div{color:#8d8d8d;font-size:15px;}
.user-amount-col{width:200px;}
.table-cell.user-amount-col div{color:#8d8d8d;font-size:15px;}
.user-status-col small{font-size:11px;color:#8d8d8d;display:block}
.name-col1{width:120px;justify-content:start;padding-left:25px;}
.name-col1 .cell-text{color: #1C1C1C;}
.country-col1{width:125px;}
.country-col1 .cell-text{color: #8D8D8D;}
.category-col1{width:130px;}
.category-col1 .cell-text{color: #8D8D8D;}
.event-col1{width:200px;}
.event-col1 .cell-text{color: #8D8D8D;}
.detail-col1{width:300px;}
.detail-col1 .cell-text{color: #8D8D8D;}
.amount-col1{width:175px;}
.amount-col1 .cell-text{color: #8D8D8D;}
.deal-name-col2{width:450px;justify-content:start;padding-left:20px}
.url-col{width:340px;}
.url-col .status-select-container{display:flex;gap:10px;}
.url-col .url-box{color: #999;overflow: hidden;overflow-x:auto;font-size:15px; scrollbar-width: none; -ms-overflow-style: none;border-radius: 5px;background: #F7F7F7;height: 39px;padding: 0 15px;line-height:39px;width:280px;}
.url-col .url-box::-webkit-scrollbar { display: none;}
.peak-buy label{font-size:16px;font-weight:600;color: #8D8D8D;}
.peak-buy .info{border-top:1px solid #E9E9E9;border-bottom:1px solid #E9E9E9;height:80px;display:flex;align-items: center;padding:0 20px;margin:20px 0 30px 0;position:relative;}
.peak-buy strong{color: #9D9D9D;font-size:16px;font-weight:600;margin-right:20px}
.peak-buy span{margin-right:78px;color: #1C1C1C;font-size:16px;font-weight:500;}
.peak-buy table{width:100%;border-spacing:0;border-collapse:collapse;}
.peak-buy th{background-color:#F9F9F9;height:80px;text-align:center}
.peak-buy td{height:80px;border-top:1px solid #DFE1E3;text-align:center}
.peak-buy .title{padding-top:10px;display:block}
.peak-buy .table{margin-top:20px;overflow:hidden;border-radius:10px;border:1px solid #dfe1e3}
.peak-buy .table tfoot td{text-align:right;padding-right:25px;}
.peak-buy .table tfoot span{color: #9D9D9D;font-size:16px;font-weight:600;margin:0 60px 0 0;vertical-align:middle}
.peak-buy .table tfoot strong{color: #1C1C1C;font-size:28px;font-weight:600;margin:0;vertical-align:middle}
.peak-buy .info1{border-top:1px solid #E9E9E9;border-bottom:1px solid #E9E9E9;height:80px;display:flex;align-items: center;padding:0 20px;margin:20px 0 0 0;}
.peak-buy .info2{border-bottom:1px solid #E9E9E9;height:80px;display:flex;align-items: center;padding:0 20px;margin:0 0 30px 0;}
.owner{display:flex;justify-content:end;align-items:center;height:40px;margin-top:30px;padding-right:25px;}
.owner button{border-radius: 10px;border: 1px solid #DFE1E3;background: #FFF;width: 120px;height: 36px;color:#1c1c1c;font-size: 16px;font-weight:500;}
.owner small{color:#9D9D9D;font-size:16px;font-weight:400;margin-left:20px;}
.owner span{color:#9D9D9D;font-size:16px;font-weight:600;margin:0 0 0 40px}
.owner strong{color:#06BF5C;font-size:16px;font-weight:600;margin:0 17px;}
.owner strong.color0{color:#06BF5C;}
.owner strong.color1{color:#06BF5C;}
.owner strong.color2{color:#CD2E3A;}
.owner strong.color3{color:#CD2E3A;}
.owner strong.color4{color:#CD2E3A;}
.owner strong.color5{color:#CD2E3A;}
.table-cell.user-status-col div.color0{color:#06BF5C}
.table-cell.user-status-col div.color1{}
.price_info{display:none;}
/* 칼럼 등록·관리 - 리스트 */
.peak-column .search-section{display:flex;justify-content:space-between;align-items:center;width:auto}
.btn-column-add{display:inline-flex;align-items:center;gap:8px;background-color:#ff779a;color:#fff;border:0;border-radius:8px;padding:0 20px;font-size:16px;font-weight:500;cursor:pointer;text-decoration:none;height:50px;white-space:nowrap}
.btn-column-add:hover{background-color:#e5637f}
.btn-column-add svg{flex-shrink:0}
.peak-column .search-text{padding:0;width:100%}
.peak-column .search-text input{outline:none;width:100%;height:40px;border:0;background:transparent;font-size:15.75px;font-weight:500}
.peak-column .search-text input::placeholder{color:rgba(28,28,28,0.30)}
.peak-column .column-title-col{width:490px;justify-content:start;text-align:left;padding-left:30px}
.peak-column .column-status-col{width:220px}
.peak-column .column-author-col{width:120px}
.peak-column .column-date-col{width:120px}
.peak-column .column-action-col{width:108px}
.peak-column .column-name{font-weight:500;font-size:16px;color:#1c1c1c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:450px}
.peak-column .column-name a{color:#1c1c1c;text-decoration:none}
.peak-column .column-name a:hover{text-decoration:underline}
.peak-column .author-text,.peak-column .date-text{font-weight:400;font-size:16px;color:#8d8d8d}
.peak-column .table-row{border-bottom:1px solid #F3F3F3}
.peak-column .table-row:hover{background-color:transparent}
.peak-column .status-select-container{position:relative}
.peak-column .status-select-container select{outline:1px solid #F7F7F7;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:0 20px;width:168px;height:39px;font-size:15px;font-weight:500;border:0;border-radius:5px;background:#F7F7F7 url('/assets/img/select_down.png') no-repeat right 20px center / 24px}
.peak-column .status-select option[value="0"]{color:#06BF5C;font-weight:500}
.peak-column .status-select option[value="1"]{color:#CD2E3A;font-weight:500}
.column-action-btns{display:flex;gap:8px;align-items:center}
.btn-column-edit{background:#fff;border:1px solid #eee;border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.btn-column-edit:hover{background-color:#f0f4ff;border-color:#a0b4ff}
.btn-column-delete{background:#fff url('/assets/img/trash.png') no-repeat center center / 18px;border:1px solid #eee;border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.btn-column-delete:hover{background-color:#fff0f0;border-color:#ff779a}
/* 칼럼 등록·관리 - 작성 */
.column-write{max-width:1440px;margin:0 auto;margin-top:100px;position:relative}
.column-write .write{display:flex;align-items:flex-start}
.column-write .contents{flex:1;min-width:0}
.column-write .title{width:437px;margin-left:27px;flex-shrink:0}
.column-write .file{border-radius:20px;border:1px solid #CBD5E1;padding:11px 26px 52px 26px;width:976px;margin-top:40px}
.column-write .file h2{font-size:20px;font-weight:700;letter-spacing:-0.16px;margin-top:40px}
.column-write .file span{color:#EB6390}
.column-write .file p{color:#8A8A8A;font-size:14.851px;font-weight:400}
.column-write .file-box{position:relative;margin-top:24px;display:flex}
.column-write .file-img-multi{position:relative;overflow:hidden}
.column-write .etc{display:none}
.column-write .etc.on{display:block}
.column-write .etc.on h2:before{content:''}
/* 칼럼 - 의료뷰티 상세 내 칼럼 섹션 */
.medi-box._column{padding:80px 0;max-width:1440px;margin:0 auto}
/* 정렬 버튼 — 리뷰 목록(.sort-buttons.bp-seg)과 같은 알약형 세그먼트로 통일.
클래스명(column-sort-btn / on)은 JS 가 쓰므로 그대로 두고 디자인만 바꾼다. */
/* 트랙 자체가 인라인이므로, 바깥에서 오른쪽 정렬만 해준다 */
.medi-box._column{text-align:right}
.medi-box._column .column-list,
.medi-box._column .paging{text-align:left}
.column-sort{
margin-bottom:30px;
/* 회색 트랙 */
display:inline-flex;align-items:center;gap:2px;flex-wrap:nowrap;
width:auto;background:#F0F1F3;border-radius:999px;padding:3px;box-sizing:border-box;
}
.column-sort-btn{
position:static;float:none;width:auto;min-width:0;max-width:none;height:auto;margin:0;
display:inline-flex;align-items:center;justify-content:center;
background:none;border:0;border-radius:999px;box-shadow:none;
font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;letter-spacing:0;
color:#4B5563;text-decoration:none;padding:8px 15px;white-space:nowrap;cursor:pointer;
transition:background .13s, color .13s;
}
.column-sort-btn:hover{background:none;color:#111827}
.column-sort-btn.on{
background:#FFFFFF;color:#FF709A;box-shadow:0 1px 2px rgba(17,24,39,.10);
}
.column-sort-btn.on:hover{background:#FFFFFF;color:#FF709A}
.column-sort-btn:focus-visible{outline:2px solid #FF709A;outline-offset:2px}
ul.column-list{display:flex;flex-wrap:wrap;gap:20px;padding:0;margin:0;list-style:none;width:100%}
ul.column-list li{width:calc(50% - 10px);background:#fff;height:auto;display:block;position:relative;border-radius:12px;box-shadow:0 0 8px 0 rgba(0,0,0,0.06);border:0;padding:0;overflow:hidden}
ul.column-list li a{text-decoration:none;color:inherit;display:block;width:100%;height:auto;padding:33px 29px}
.column-card{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.column-text{flex:1;min-width:0}
.column-text label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:18px;font-weight:600;color:#1c1c1c;margin-bottom:12px;line-height:1.4;cursor:pointer}
.column-text p{font-size:14px;font-weight:400;color:#8c8c8c;line-height:1.6;margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.column-text .column-meta{display:flex;align-items:center;position:absolute;bottom:39px}
.column-text .column-meta .column-author{display:flex;gap:8px;align-items:center}
.column-text .column-meta .column-author strong{color:#333;font-size:14px;font-weight:400}
.column-text .column-meta .column-author span{color:#8c8c8c;font-size:14px;font-weight:400}
.column-text .column-meta .column-stats{display:flex;gap:0;align-items:center;margin-left:20px}
.column-text .column-meta .column-stats small{color:#b3b3b3;font-size:13px;font-weight:400;margin-left:6px;padding-left:16px}
.column-text .column-meta .column-stats small.ic-hit{background:url('/assets/img/icon-hit.png') no-repeat 0 center / 12px}
.column-text .column-meta .column-stats small.ic-reply{background:url('/assets/img/icon-review.png') no-repeat 0 center / 12px}
.column-card > img{width:176px;height:176px;object-fit:cover;border-radius:10px;flex-shrink:0;position:static}
.medi-box._column .noevent{padding:60px 0;text-align:center;color:#999}
.medi-box._column .paging{margin-top:30px}
.column_ok{margin:80px auto;text-align:center;width:508px;display:none;font-size:32px}
.column_ok strong{font-size:32px;font-weight:800;line-height:55px;letter-spacing:-0.256px}
.column_ok a{color:#fff;font-size:20.506px;font-weight:600;width:100%;letter-spacing:-0.144px;display:block;margin-top:57px;height:75px;line-height:75px;border-radius:10px;background-color:#EB6390}
.peak-list._deal {max-width:1440px;position:relative}
.peak-list._deal ul{list-style-type:none;margin-top:52px;}
.peak-list._deal li{margin-bottom:55px}
.deal-title-box h1{font-size: 28px;font-weight:600;}
.deal-title-box div{margin-top:12px;font-size:18px;color:#999999;padding-left:28px;font-weight:400;background:url('/assets/img/icon-alarm.png') no-repeat 0 3px / 20px}
.deal-title-box strong{color:#000;font-weight:500;}
.deal-title-box span{color:#FF779A;font-weight:500;margin-right:20px;}
.deal-crew {height: 322px;padding: 39px 36px;flex-direction: column;align-items: flex-start;gap: 0;align-self: stretch;border-radius: 20px;background: #F8F8F8;margin-top:60px;}
.deal-crew strong{color: #FF779A;font-size: 26.323px;font-weight: 600;letter-spacing: -0.158px;}
.deal-crew span{display:block;color: #444;font-size: 21.537px;font-weight: 500;letter-spacing: -0.129px;}
.deal-crew p{color: #888;font-size: 18px;font-weight: 400;line-height: 32px;letter-spacing: -0.108px;margin:19px 0 30px 0;}
.deal-crew a{display:block;width:100%;font-size:18px;font-weight:500;letter-spacing:-0.108px;height: 60px;padding: 0px 20px;color:#fff;flex-direction: column;justify-content: center;align-items: center;gap: 8.051px;align-self: stretch;border-radius: 10px;background: linear-gradient(90deg, #901D3B 0%, #F2006F 50%, #901D3B 100%);line-height:60px;text-align:center}
.deal-crew img{width:22px;vertical-align:middle;margin-top:-1px;margin-right:8px;}
.btn-option-view{display:none;}
.clinic-grid,.deal-grid{overflow:hidden;}
/* 1425px 고정이라 뷰포트가 그보다 좁으면(721~1424px) 항상 오른쪽으로 삐져나왔다.
최대폭은 유지하되 화면이 좁으면 따라 줄어들게 한다. */
.swiper_main{width:1425px;max-width:100%;}
.trend-list .swiper-wrapper{display:block}
.trend-list .trend-item{margin-bottom:25px;}
.new-content-grid{width:auto;}
.new-content-row {overflow:hidden}
.new-content-row .swiper-wrapper .swiper-slide a{margin-bottom:20px}
.review-row .swiper-wrapper{display:grid;grid-template-columns: 2fr 2fr 2fr 2fr;gap:24px}
.review-row .swiper-wrapper .swiper-slide{margin-bottom:20px}
.swiper_adv{width:100%;overflow:hidden}
.trend-image img{object-position:top;}
.swiper_review{width:100%;}
.insite-list._mobile{display:none;}
.peak-mypage._mobile{display:none;}
.peak-mypage ._signup{display:none;}
.swiper_post{width:100%;overflow:hidden;}
.medi-info h1{font-size:28px;color:#333;font-weight:600;text-align:center;padding:80px 0 48px 0}
.medi-info div{display:flex;justify-content:center}
.medi-info button,.medi-info a.tab-link{color:#333;border-radius:20px;width:200px;margin:0 28px;height:60px;background-color:#fff;font-size:17px;font-weight:500;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box;}
.medi-info button img,.medi-info a.tab-link img{vertical-align:middle;margin:-3px 10px 0 0;}
.medi-info button:hover,.medi-info button.on,.medi-info a.tab-link:hover,.medi-info a.tab-link.on{color:#fff;background-color:#FF779A}
.medi-info button:hover img,.medi-info button.on img,.medi-info a.tab-link:hover img,.medi-info a.tab-link.on img{ filter: brightness(0) invert(1);}
.apply-btn,.apply-mobile{display:flex;justify-content:center;align-items:center}
.apply-btn:disabled,.apply-mobile:disabled{background-color: #5b5b5b;}
.apply-btn-off{background-color: #5b5b5b;}
.peak-medi{display:none;}
.peak-medi.on{display:block;}
.medical-box .medi-box{display:none}
.medical-box .medi-box.on{display:block}
.medi-one{display:flex;align-items:center;justify-content:center;margin-top:127px;}
.medi-one button{background:transparent;border:0;border-bottom:2px solid #fff;padding:7.5px 6px;color:#bbb;font-size:16px;font-weight:500;margin:0 20px;}
.medi-one button:hover,.medi-one button.on{border-bottom:2px solid #444;color:#444;cursor:pointer;}
/* 병원정보·의료진소개·About Us 는 모두 펼쳐 둔다(하위탭은 스크롤 이동).
숨기던 규칙은 남겨두되, 실제로 쓰이는 건 .on 이 붙은 것뿐이라 전부 보인다. */
.medi-abo{display:block;}
.abo-box{padding:49px 0;border-bottom:1px solid #ececec;text-align:center}
.abo-box._01{padding:100px 0}
.abo-box:last-child{border-bottom:0;}
/* 영역 사이 구분 — 마지막 영역만 경계선을 지운다 */
.medi-abo:not(:last-child) .abo-box:last-child{border-bottom:1px solid #ececec}
.medi-abo.on{display:block;}
.medi-abo h2{text-align:center;color: #111;font-weight: 600;font-size: 20px;}
.medi-abo ul{list-style-type:none;margin-top:40px;}
.medi-abo .doctor-box{max-width:720px;width:100%;overflow:hidden;margin:0 auto}
.medi-abo .swiper_doctor {width:100%}
.medi-abo .swiper_doctor .swiper-wrapper{width:100%;}
.medi-abo .swiper_doctor .swiper-wrapper._01{justify-content: center;}
.medi-abo .swiper_doctor .swiper-slide{}
.medi-abo .abo-emply img{border-radius:18px;object-fit:cover;object-position:top;}
.medi-abo .abo-emply div{padding-top:12px;}
.medi-abo .abo-emply small{color: #555;font-size:14px;font-weight:400;margin-right:3px;}
.medi-abo .abo-emply span{color:#222;font-size:16px;font-weight:600;}
.medi-abo .abo-spec{margin-top:25px}
.medi-abo .abo-spec li{display:inline-block;border-radius:20px;height:25px;padding:0 10px;line-height:25px;background-color:#F5F6F6;font-size:14px;font-weight:400;margin:15px 4px 0px 4px;color:#333;}
.medi-abo.about,.medical-box .medi-box.ba{text-align:center;padding-top:100px;}
/* about us 탭은 위 여백 없이 붙인다 (.medi-box.ba 는 기존 100px 유지) */
.medi-abo.about{padding-top:0;}
/* ── About Us 전용 ────────────────────────────────────────────
제목(About Us)과 배너 이미지가 붙어 있어 여백을 준다.
위 709행의 img 규칙은 .medical-box .medi-box.ba 와 공용이라 손대지 않고,
About Us 범위(.medi-abo.about)로만 한정해 따로 관리한다. */
.medi-abo.about h2 + img,
.medi-abo.about h2 ~ img:first-of-type{margin-top:30px;}
.medi-abo.about img,.medical-box .medi-box.ba img{vertical-align:middle;display:block;margin:0 auto;max-width:1440px}
.abo-table{display:flex;align-items:center;justify-content:center}
.abo-table div{overflow:hidden;border:1px solid #EAEAEA;border-radius:20px;margin-top:40px;}
.abo-table div.mobile{display:none;}
.abo-table table{border-spacing:0;border-collapse:collapse;}
.abo-table th{width:120px;height:64px;background-color:#fbfbfb;color:#333;font-size:15px;font-weight:400;border-right:1px solid #EAEAEA;border-bottom:1px solid #EAEAEA;}
.abo-table td{width:120px;height:64px;text-align:center;color:#333;font-size:15px;font-weight:400;border-right:1px solid #EAEAEA;}
.abo-table th:last-child{border-right:0;}
.abo-table td:last-child{border-right:0;}
.abo-table td span{color:#C43B3B;font-size:15px;font-weight:400;}
.abo-map span{display:inline-block;text-align:center;margin:40px 0 20px 0;color:#383838;font-size:15px;font-weight:400;background:url('/assets/img/map-icon.png') no-repeat 0 2px / 13px;padding:0 0 0 23px}
/* 구글 지도 말풍선(InfoWindow) — 위쪽 빈 영역 제거.
.gm-style-iw-chr 은 닫기(X) 버튼만 들어 있는 48px 짜리 머리말 줄인데,
병원명만 보여주는 용도라 닫을 일이 없어 빈칸처럼 보인다. 줄 자체를 감춘다. */
.abo-map .gm-style-iw-chr{display:none !important}
/* 머리말을 없앤 만큼 본문 위쪽 여백을 정리한다 */
.abo-map .gm-style-iw-d{overflow:auto !important}
.abo-map .gm-style-iw.gm-style-iw-c{padding-top:12px !important}
.medical-tabs{margin-top:120px;}
.medical-tabs .tab-row:nth-child(1) .tab-item:first-child{border-top-left-radius:20px;}
.medical-tabs .tab-row:nth-child(1) .tab-item:last-child{border-top-right-radius:20px;}
.medical-tabs .tab-row:nth-child(2) .tab-item{border-top:0;}
.medical-banner {max-height:540px}
.medical-banner .swiper_medical{width:100%;}
.medical-banner .swiper_medical img{border-radius:10px}
.apply-mobile,.apply-mobile-off{display:none;}
.summary-item button{position:absolute;right:20px;border:0;}
.btn-deal-close{display:none;}
.medi-box._review{padding-top:80px;}
.medi-box._review ul:not(.hrv-list){width:100%;max-width:1080px;margin:0 auto;display:block;}
.medi-box._review li:not(.hrv-item){display:flex;position:relative;border-bottom:1px solid #eaeaea;padding:20px 16px;height:160px;align-items:center}
.medi-box._review li:not(.hrv-item) a{display:block;width:100%;height:120px;padding-top:25px;}
.medi-box._review li:not(.hrv-item) label{color:#222;font-size:20px;font-weight:600;margin-bottom:16px;display:block}
.medi-box._review li:not(.hrv-item) strong{color:#333;font-size:14px;font-weight:400;margin-right:10px}
.medi-box._review li:not(.hrv-item) span{color:#888;font-size:14px;font-weight:400;}
.medi-box._review li:not(.hrv-item) small{color:#B3B3B3;font-size:13px;font-weight:400;}
.medi-box._review li:not(.hrv-item) img{position:absolute;right:0;top:20px;border-radius:8px}
.medi-box._review .write-info {justify-content: start;}
.medi-box._review .write-info div{margin:0 20px 0 0;gap:0;}
.noevent{text-align:center;padding-top:100px;}
.input-wrapper{background-color:#fff;}
.checkbox-custom{border:1px solid #d9d9d9;}
.checkbox-input:checked + .checkbox-label .checkbox-custom{background-color: #fff;}
.checkbox-input:checked + .checkbox-label .checkbox-custom::after{width: 12px;height: 12px;background-color: #ff779a;}
.peak-company .input-with-button{display:block}
.peak-company .input-with-button .input-wrapper{margin-bottom:12px;}
.section-title{font-size:24px;margin-bottom:0}
.peak-company .add-item-btn{float:right;width:81px}
.form-section._02{gap:20px;}
.form-section._02 .checkbox-group{margin-top:20px;}
.form-section._02 .textarea-wrapper{margin-top:20px;}
.peak-etc{margin-top:-20px}
.input-wrapper.peak-route{border-radius:25px;background-color:#f5f5f5;}
.input-wrapper.peak-route:focus-within{background-color:#fff;}
.form-textarea{border:1px solid transparent}
.peak-deal-status {display:flex;padding:33px 30px;border-radius: 15px;background: #FBFBFB;position:relative;margin-bottom:48px}
.peak-deal-status .price div{display:flex;align-items:center;margin-top:14px;}
.peak-deal-status label{color:#FF779A;font-size:22px;font-weight:600;}
.peak-deal-status strong{color: #111;font-size:30px;font-weight:600;}
.peak-deal-status p{color: #888;font-size: 16px;font-weight: 500;margin-left:30px;}
.peak-deal-status .btns{position:absolute;right:30px;bottom:33px;display:flex}
.peak-deal-status .btns a{text-align:center;border-radius: 10px;border: 1px solid #EAEAEA;background: #FFF;width: 139px;height: 50px;display:block;margin-right:16px;line-height:50px;font-size:16px;font-weight:500;color:#000}
.peak-deal-status .btns button{cursor:pointer;border-radius: 10px;background: #FF779A;width: 139px;height: 50px;color:#fff;font-size:16px;font-weight:500;border:1px solid #FF779A}
.peak-deal-status .btns button:disabled{border:1px solid #ffa8be;background: #ffa8be;}
.bank-box {margin-top:20px;}
.bank-box .select-trigger{width:100%;border:1px solid #dfe1e3;border-radius:10px;background-color:#fff;height:48px;}
.bank-box .select-trigger .select-value{color:#bdbebf;font-size:15px;font-weight:500;width:100%;}
.bank-box .status-select-container .select-dropdown{width:100%}
.bank-box .select-option{height:45px;color:#bdbebf}
.bank-box .select-option:hover{background-color:#FFDADD;color:#000}
.bank-box .select-value.on{color:#000}
.bank-box .select-dropdown{max-height:300px;overflow:hidden;overflow-y:auto}
.bank-auth{text-align:center;display:none;width: 560px;padding: 30px;border-radius: 10px;background-color: #fff;}
.bank-auth strong{color:#000;font-size:18px;font-weight:600;display:block;margin:0 auto 20px auto}
.bank-auth span{color:#FF779A;font-size:18px;font-weight:600;}
.bank-auth img{margin:0 auto 15px auto;display:block}
.bank-auth p{color: #999;font-weight:500;font-size:15px;line-height:20px;}
.bank-auth button{border-radius: 10px;border:0;background: #FF779A;width:296px;height:60px;font-size:16px;color:#fff;letter-spacing:-0.112px;margin-top:50px;}
.delivery-box .bank-box{margin-top:0px;}
.delivery-box {display:flex;gap:20px;position:absolute;right:0;}
.delivery-box .status-select-container{width:220px;}
.delivery-box input{border-radius: 8px;border: 1px solid #ECECEC;background: #FFF;padding:0 17px;width:228px;}
.delivery-box button{border-radius: 8px;background: #FF779A;width:66px;height:46px;color:#fff;font-size:15px;border:0;}
.peak-my{padding-bottom:100px;}
.peak-my .delete-btn img{width:16px;height:16px;display:none;}
.peak-my .btn-primary {font-size: 14px;font-weight:400;background-color: #ff86a4;height: 45px;width: 106px;border-radius: 6px;}
.peak-my .btn-secondary {font-size: 14px;font-weight:400;height: 45px;width: 106px;border-radius: 6px;}
.peak-my .button-section {justify-content: space-between;}
.peak-my .form-row{gap:20px;}
.peak-my .select-field .form-select{height:48px;border-radius: 6px;background:url('/assets/image/select.png') no-repeat right 15px center / 16px}
.peak-my .update-btn{position:relative;cursor:pointer;overflow: hidden;width:50%;}
.peak-my .update-btn input{cursor:pointer;position:absolute;left:-80px;;top:0;width:calc(100% + 80px);height:100%;opacity:0;z-index:2;}
.profile2 {display:block}
.profile2 .action-buttons{display:flex}
.profile2 .action-buttons button{width:50%;;border-radius:6px;border:1px solid #FF779A;}
.profile2 .action-buttons button:last-child{background:transparent;border:1px solid #B2B2B2;color:#FF779A;font-size:14px;}
.profile2 .btn-danger{background:transparent;color:#999;padding:0;width:auto;}
.header-login{cursor:pointer;}
.mt20{margin-top:20px !important;}
.my_tab a{display:inline-block;color: rgba(28, 28, 28, 0.40);font-weight:500;font-size:15px;padding:0 7px;}
.my_tab span{padding:0 12px;border-right:1px solid rgba(28, 28, 28, 0.20);}
.my_tab a:hover{color:#FF4E7A}
.my_tab a.on{color:#FF4E7A;border-bottom:2px solid #FF4E7A}
.my_tab span:last-child{border-right:0;}
.swiper_new_trend.mo{display:none;}
.home-swiper .swiper-pagination-lock{display:block;}
.home-swiper .swiper-button-lock{display:flex;}
@media (max-width: 1440px){
.review .contents{width:calc(100% - 460px);}
.review #classic{width:100%;}
.column-write .contents{flex:1;min-width:0}
.column-write #classic{width:100%}
}
/* 1024px 이하에서는 오른쪽 437px 패널을 위해 460px 을 빼면 본문이 너무 좁아진다.
(768px 에서 에디터 폭이 293px 까지 줄어 툴바가 8줄로 접혔다)
패널을 본문 위로 내리고 에디터는 폭을 다 쓰게 한다. */
@media (max-width: 1024px){
.review .write{display:block}
.review .title{position:static;width:100%;margin-left:0;margin-bottom:24px}
.review .title-box{width:100%}
.review .contents{width:100%}
}
@media (max-width: 720px){
.section-title .more{font-size:13px;right:20px;width:80px;height:30px;padding-left:14px;background: url(/assets/img/add.png) no-repeat 16px center / 7px;line-height:30px;margin-top:-5px}
.home-swiper .swiper-pagination{top:-2px}
.deal-option h1{display:block;position:absolute;top:120px;font-size:22px;}
#danal div{top:0;left:unset;transform:unset;}
#danal iframe{min-height: unset;}
#map{height:240px;}
.review {position:relative;padding:40px 20px;background-color:#fbfbfb;margin:0;}
/* 패널을 절대배치로 본문 위에 얹고 padding-top 335px 으로 자리를 비워 두던 방식은
① 맨 위에 큰 빈 공간이 생기고 ② 높이가 달라지면 버튼이 본문 위에 겹쳤다.
→ 일반 흐름으로 바꾸고, 입력 패널을 본문보다 먼저 그린다(flex order). */
/* .write 도 투명하게 만들어 그 안의 항목이 form 의 항목이 되게 한다.
그래야 .file(이미지 영역)보다 버튼을 뒤로 보낼 수 있다. */
.review .write{display:contents;padding-top:0}
.review .write.on{padding-top:0}
.review .title{position:static;width:100%;left:auto;top:auto !important;margin-left:0;padding:0;order:1}
/* .title-box 는 PC 용 고정폭(437px)을 갖고 있다. 모바일에서는 화면 폭을 다 쓴다. */
.review .title-box{width:100%;box-sizing:border-box}
.review .contents{width:100%;order:2;margin-top:16px}
/* 버튼은 .title 안에 있어 그대로 두면 본문 위에 온다.
폼 전체를 흐름 상자로 만들고, 버튼 묶음만 맨 아래로 내린다.
(절대배치로 빼면 좌우 여백이 어긋나고 푸터와 겹친다 → 일반 흐름으로 둔다) */
.review > form{display:flex;flex-direction:column}
.review > form .file{order:3}
/* .write 안에서 순서: 입력칸(.title) → 본문(.contents) → 버튼
버튼은 .title 안에 있으므로 .title 자체를 흐름 상자로 만들고
버튼 묶음만 .write 의 마지막으로 보낸다. */
/* .title 을 투명하게 만들어 자식들이 .write 의 항목이 되게 한다.
(그래야 입력칸 → 본문 → 버튼 순서를 order 로 정할 수 있다) */
.review .title{display:contents}
.review .title .title-box{order:1}
.review .contents{order:2}
/* 버튼은 맨 마지막. .write 가 flex 라 폭은 자동으로 본문과 같아진다. */
/* .write 가 flex 라 기본은 내용 크기로 줄어든다 → 가로를 꽉 채운다 */
.review .title .write-btn{order:4;margin-top:24px;align-self:stretch;width:100%}
.review .title .write-need{order:5;margin:10px 0 0;text-align:center}
.review_ok{width:calc(100% - 40px);}
.review_ok strong{font-size:20px}
.review_ok a{height: 55px;line-height: 55px;margin-top:10px;font-size:18px;}
.title-box{width:100%;background-color:#fff;margin-bottom:10px;}
.review .file{width:100%;}
.title-box input{height:45px;font-size:13px;}
.title-box select{height:45px;font-size:13px;}
.review .file{margin-top:20px;padding-left:20px;padding-right:20px;}
.review .file h2{margin-top:20px}
.file-img{display:block}
.file-img img{width:67px;height:67px}
.file-img div {margin-right:4px;display:inline-block}
.review .file-img-multi img{width:67px;height:67px}
.column-write{padding:40px 20px;margin:0}
.column-write .write{display:block}
.column-write .title{width:100%;margin-left:0;margin-bottom:20px}
.column-write .contents{width:100%}
.column_ok{width:calc(100% - 40px)}
.column_ok strong{font-size:20px}
.column_ok a{height:55px;line-height:55px;margin-top:10px;font-size:18px}
.column-write .file{width:100%;margin-top:20px;padding-left:20px;padding-right:20px}
.column-write .file h2{margin-top:20px}
.peak-column .table-header{display:none}
.peak-column .table-container{width:calc(100% - 40px);margin:0 auto}
.peak-column .table-row{display:block;height:auto;position:relative;border-radius:5px;border:1px solid #CBD5E1;background:#fff;margin-bottom:20px;padding:20px}
.peak-column .table-cell{height:auto;justify-content:start;padding:0 !important;margin:0 0 9.5px 0;width:100%}
.medi-box._column{padding:40px 20px}
/* 정렬 버튼 — 모바일에서 좌우가 화면에 붙지 않게 여백을 준다(시안 3번).
탭 버튼과 맞닿아 보여 위쪽에 14px 을 띄운다. */
.column-sort{margin-top:14px;margin-bottom:20px}
.column-sort-btn{font-size:12px;padding:8px 14px}
ul.column-list{gap:0}
ul.column-list li{width:100%;background:transparent;border-radius:0;box-shadow:none;border-bottom:1px solid #eee;overflow:visible}
ul.column-list li:last-child{border-bottom:0}
ul.column-list li a{padding:20px 0;position:relative}
.column-card{gap:14px;position:static;align-items:flex-start}
.column-text{min-width:0;min-height:100px;display:flex;flex-direction:column;flex:1}
.column-card > img{width:100px !important;height:100px !important;object-fit:cover;flex-shrink:0}
.column-text label{font-size:15px;-webkit-line-clamp:2;margin-bottom:6px}
.column-text p{font-size:13px;-webkit-line-clamp:2;margin-bottom:0}
/* meta: 작성자/일자는 그대로 flex 흐름, 뷰수/댓글수만 카드 우하단으로 분리 */
.column-text .column-meta{position:static;display:flex;align-items:center;width:100%;margin-top:auto;padding-top:22px}
.column-text .column-meta .column-author{gap:6px}
.column-text .column-meta .column-author strong,.column-text .column-meta .column-author span{font-size:12px}
.column-text .column-meta .column-stats{position:absolute;right:0;bottom:20px;margin-left:0;gap:8px;display:flex;align-items:center}
.column-text .column-meta .column-stats small{font-size:12px;margin-left:0;padding-left:14px;line-height:1}
.peak-column .search-section{flex-direction:column;gap:15px}
.btn-column-add{justify-content:center}
.write-btn {position:fixed;bottom:0;width:100%;left:0;background:#fff;padding:10px 20px;border-top:1px solid #f0f0f0}
.write-btn button{height:53px;font-size:14.4px;border-radius:13px}
/* 리뷰 글쓰기는 버튼을 화면 아래 고정하지 않는다.
고정하면 ① 좌우 여백을 무시해 화면 끝까지 붙고 ② 푸터·안내문구와 겹친다.
(칼럼 글쓰기 등 다른 화면은 위 고정 방식을 그대로 쓴다) */
.review .write-btn{position:static;width:auto;left:auto;background:transparent;padding:0;border-top:0}
#layer{width:calc(100% - 36px) !important;left:18px !important;}
.form-section{gap:20px;}
.company-container{padding:0 20px;}
.form-title{font-size:28px}
.form-subtitle{font-size:13px}
.peak-sign{display:block;padding-top:0;}
.peak-sign div{padding:0 0}
.peak-sign a,.peak-sign button{width:250px;cursor:pointer}
.login-form{width:100%;padding:0 20px;}
.top-nav{width:100%;}
.main-nav{width:100%;height:80px;}
.detail-main._rh .detail-view-box{width:100%;}
.top-bar{height:0;}
.login-section{display:none;}
.region-selector{display:none;position:fixed;top:500px;z-index:10;right:20px;}
.menuon .region-selector{display:flex;animation: fadeIn 0.5s ease-in-out forwards;}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.top-nav .status-select-container .select-trigger {
background: rgba(0, 0, 0, 0) url(/assets/img/header_down.png) no-repeat right 10px center / 15px;
width: 85px;
height: 30px;min-height:30px;
padding: 0 10px 0 10px;
}
.top-nav .status-select-container .select-dropdown{margin-top: -30px;}
.top-nav .status-select-container .select-dropdown{width:85px}
.top-nav .select-option:nth-child(1) {
background: url(/assets/img/header_up.png) no-repeat right 10px center / 15px;
}
.top-nav .select-option {
padding: 8px 10px 8px 10px;
gap: 0px;
}
.status-select-container .select-trigger{border:1px solid #D0D0D0;border-radius:5px;}
.status-select-container .select-trigger.on{border:0}
.nav-content{width:100%;gap:0;display:none}
.nav-mobile{display:block;width:100%;position:relative;text-align:center; margin-top:5px;}
.nav-mobile button{background:transparent;border:0;position:absolute;top:3px;padding:0;}
.nav-mobile button.back_mo{left:28px;}
.nav-mobile button.menu_mo{right:28px;outline:none;}
.nav-mobile a{}
.trend-category-tabs{gap:5px;overflow:hidden;overflow-x:auto;padding:0 21px;margin-bottom:26px;position:absolute;top:250px;width:100%;}
.trend-tab-text{font-size:15.514px;}
.main-content{padding:0;min-height: calc(100vh - 120px);padding-top:244px;}
.main-banner{border-radius:0;margin-bottom:60px}
.swiper{border-radius:0;}
.swiper img{border-radius:0;}
.search-section{position:absolute;top:120px;padding:0 21px;}
.search-btn{display:none;}
.search-input {background-color: #f5f5f5;border-radius: 99px;padding: 0 0;border: none;height: 40px;box-sizing: border-box;}
.search-field{border-radius:99px;height:40px;font-size:14px;font-weight:500;letter-spacing:-0.669px;padding:0 25px}
.controls-section{margin-bottom:35px}
.sort-buttons {justify-content: end;padding:0 21px;margin-left:0;flex-wrap:nowrap;}
/* 고정폭(62.8px)은 한국어 "조회순" 기준이라 영문 "Most Viewed" 가 줄바꿈된다.
최소폭만 유지하고 글자 길이에 따라 늘어나게 둔다. */
.sort-btn{
font-size:14.133px;height:31.406px;min-width:62.813px;width:auto;
padding:0 10px;line-height:29px;text-align:center;white-space:nowrap;
}
.trend-grid{gap:0;padding:0 21px;}
.trend-card{max-width:100%;margin-bottom:45px;}
.trend-row{gap:0}
.peak-list._medical .trend-row{gap:10px;}
.peak-list._medical .trend-card{max-width:auto;width:calc(50% - 5px);vertical-align:top;}
.peak-view{padding-top:27px}
.detail-content{width:100%;padding:0 21px;}
.detail-main{width:100%;}
.detail-body{gap:0px}
/* ── 글 상세 모바일 (시안 article_detail_mobile) ──
제목 19px, 작성자는 닉네임+날짜 두 줄, 조회·댓글은 본문 아래로 내린다.
※ 병원 리뷰(._rh)는 제외 */
.detail-main:not(._rh) .detail-h1{font-size:19px;margin:0 0 16px;letter-spacing:-.02em}
.detail-main:not(._rh) .detail-view-box{display:flex;flex-direction:column}
.detail-main:not(._rh) .detail-h1{order:1}
.detail-main:not(._rh) .write-info{order:2}
.detail-main:not(._rh) .peak-trend{order:3}
.detail-main:not(._rh) .detail-view-box .peak-review{order:3}
.detail-main:not(._rh) .detail-body{order:4}
.detail-main:not(._rh) .write-info{
gap:10px;padding-bottom:18px;margin-bottom:20px;position:relative;
}
/* 아바타 왼쪽, 오른쪽에 닉네임 위·날짜 아래 두 줄 (시안)
작성자가 에디터면 아바타+닉네임이 .wi-author 링크로 묶이고,
아니면 이미지·닉네임이 그냥 나란히 온다. 두 경우 모두 맞도록
날짜만 줄을 바꿔 아바타 너비(38+10)만큼 들여쓴다. */
.detail-main:not(._rh) .write-info > div:first-child{
display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;min-width:0;
}
.detail-main:not(._rh) .write-info img,
.detail-main:not(._rh) .write-info .wi-initial{width:38px;height:38px;flex:0 0 38px;font-size:14px}
.detail-main:not(._rh) .write-info .wi-author{
display:flex;align-items:center;gap:10px;min-width:0;
}
.detail-main:not(._rh) .write-info strong{
font-size:14px;line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
/* 닉네임 아래 줄로 내려오는 날짜.
날짜 뒤에 병원명 링크가 더 붙는 화면(칼럼)도 있어서
날짜·병원명을 .wi-sub 로 묶어 한 줄을 같이 쓰게 한다. */
.detail-main:not(._rh) .write-info > div:first-child > .wi-date,
.detail-main:not(._rh) .write-info > div:first-child > .wi-sub{
display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;
width:100%;margin:3px 0 0 48px;
font-size:12.5px;color:#9AA1AC;line-height:1.3;
}
/* PC 에서 감춰 둔 .wi-sub 안의 날짜를 모바일에서는 다시 보여준다 */
.detail-main:not(._rh) .write-info .wi-sub > .wi-date{
display:inline;width:auto;margin:0;font-size:12.5px;color:#9AA1AC;
}
.detail-main:not(._rh) .write-info .wi-sub a{font-size:12.5px;line-height:1.3}
/* 조회·댓글 — 작성자 줄에서는 감추고, 본문 아래 .detail-footmeta 로 보여준다 */
.detail-main:not(._rh) .write-info .wi-meta{display:none}
/* 본문 끝(댓글 바로 위)에 있다 — .detail-body 안이라 order 는 필요 없다 */
.detail-main:not(._rh) .detail-footmeta{
display:flex;gap:14px;margin-top:28px;padding-top:18px;
border-top:1px solid #E9EBEF;font-size:12.5px;color:#9AA1AC;
}
/* 대표이미지 — 좌우로 꽉 차게 */
.detail-main:not(._rh) .peak-trend{margin:0 -21px 22px}
/* 리얼리뷰 갤러리는 모서리가 둥글어 화면 끝까지 빼지 않는다.
PC 용(가로 2단) 규칙이 선택자가 더 세서 여기서 되돌린다 — 모바일은 세로 1단. */
.detail-main:not(._rh) .detail-view-box .peak-review{margin:0 0 22px}
.detail-main:not(._rh) .detail-view-box .peak-review .hori{display:block;width:100%}
.detail-main:not(._rh) .detail-view-box .peak-review .peak-view-div{
width:100%;height:auto;aspect-ratio:1/1;border-radius:10px;
}
.detail-main:not(._rh) .detail-view-box .peak-review .peak-view-div::before{border-radius:10px}
.detail-main:not(._rh) .detail-view-box .peak-review .hori ul{
display:flex;flex:none;margin:5px 0 0 0;gap:6.89px;width:100%;
}
.detail-main:not(._rh) .detail-view-box .peak-review .hori li{
width:25%;height:78px;margin:0;border-radius:3px;
}
.detail-main:not(._rh) .detail-view-box .peak-review .hori li img{height:78px;border-radius:3px}
.detail-main:not(._rh) .peak-trend .view-img{border-radius:0}
.peak-view .detail-sidebar{display:none;}
.se-image-container {width:100% !important;}
.se-image-container img{max-width:100% !important;width:100% !important;}
.se-image-container figure{width:100% !important;}
.comment-section{padding-top:128px;gap:30px;}
.comment-input-wrapper{display:block;height:auto;border:0;padding:0;text-align:right;}
.comment-input{border:1px solid #eee;border-radius:10px;padding:20px;width:100%;height:97px;}
.comment-submit-btn{width:90px;height:42px;display:inline-block;margin:15px 0 0 0}
.detail-content .login_chk{width:90px;height:42px;display:inline-block;margin:15px 0 0 0}
.deal-option .btn-deal-pay ,.apply-btn,.apply-mobile{background-color:#000}
.deal-option .btn-deal-pay span,.apply-btn span,.apply-mobile span{display:flex;}
.deal-option{width:100%;}
.footer-copyright{left:21px;bottom:21px}
.mbti-widget{}
.mbti-widget img{width:60px}
.scroll-to-top{right:21px;bottom:21px}
.wave-image{display:none}
.wave-image2{display:block}
.peak-review{width:100%;max-width:100%;gap:0;display:block}
.peak-review .peak-prev{margin-bottom:25px;}
.peak-view-div{width:100%;height:100%;min-height:333px;border-radius:10px}
.peak-view-div:before{height:calc(100% - 2px);border-radius:10px}
.peak-review img.peak-view-img{width:calc(100% + 2px);height:100%;}
.review_login{border-radius:10px;}
.peak-review li{width:100%;height:78px;border-radius:3px;}
.peak-review li::before{height:100%;border-radius:3px;}
.peak-review li img{width:100%;height:100%;margin:0}
.peak-review .hori{display:block;position:relative;width:100%;}
.peak-review .hori ul{position:relative;display:flex;margin:5px 0 0 0;gap:6.89px;width:100%;bottom:0;}
.peak-review .hori li{width:25%;margin:0;}
.peak-review .hori li > img{width:100%;height:78px;border-radius:3px;}
.peak-list._deal{padding:0 20px;margin-top:-200px}
.peak-list._deal li{margin-bottom:32px}
.peak-list._deal li img{border-radius:10px;}
.peak-list._deal li img{display:none;}
.peak-list._deal li img._mobile{display:block;width:100%;}
.main-content._my{padding-top:0px;}
._my .left-sidebar{display:none}
.profile-header{flex-direction: unset;align-items:center}
.profile-content{width:100%;}
.profile-actions{justify-content:start;}
._my h2._mobile{display:block;font-weight: 600;text-align:center;font-size:16px;color:#8d8d8d}
.form-section{gap:18px;}
._my .btn-danger{background-color:transparent;color:#999;font-size:10px;width:auto;margin-top:40px;float:right}
._my .button-section{align-items:end;}
.peak-address .page-title{text-align:center;color: #8D8D8D;font-size:16px;font-weight:600;padding-top:20px;}
.peak-event.peak-address{padding:0 20px;width:100%}
.address-box{width:100%;}
.peak-address small{font-size:12px}
.address-box button{width:180px;font-size:15px;font-weight:500;line-height:40px;}
.address-box p{font-size:15px;}
.modal-address form{width:90%;padding:20px;}
.modal-address input{font-size:14px;padding:0 10px;height:40px;margin-top:10px;}
.modal-address .btn-addr-search{height:40px;font-size:14px;}
.modal-btn{padding-top:20px;}
.modal-btn button{height:30px;width:60px;font-size:11px;border-radius:6px;font-weight:600;}
#wrap{width:100%;}
.main-area.peak-event{width:100%;}
.peak-event .page-title{text-align:center;}
.peak-event .table-header{display:none;}
.peak-event .table-container{width:calc(100% - 40px);margin:0 auto}
.peak-event .table-row{display:block;height:auto;position:relative;border-radius: 5px;border: 1px solid #CBD5E1;background: #FFF;margin-bottom:20px;padding:20px;}
.peak-event .table-body{min-width:100%}
._my .table-row ._mobile{display:block;width:100%;position:absolute;width:65px;height:65px;object-fit:cover}
.peak-event .user-title-col{display:block;width:100%;}
.peak-event .table-cell{height:auto;align-items: center; justify-content: start;padding:0 0 0 80px !important;margin:0 0 9.5px 0;width:100%}
.peak-event .table-cell.user-detail-col{margin-bottom:16.5px;}
.table-cell.user-title-col div{font-size:14px;}
.table-cell.user-detail-col div{font-size:14px;font-weight:500;}
.table-cell.user-status-col {margin-bottom:5px;}
.table-cell.user-status-col div{font-size:13px;font-weight:500;}
.table-cell.user-amount-col {margin-bottom:0;}
.table-cell.user-amount-col div{font-size:13px;font-weight:500;}
.tabl-box{display:none;}
.price_info{display:block;}
.peak-buy{width:calc(100% - 40px);margin:0 20px}
.peak-buy .info{display:block;height:auto;padding:0px;margin:0;border:0;width:100%;}
.peak-buy .info-box{display:block;border-radius: 5px;border: 1px solid #CBD5E1;background: #FFF;height:auto;padding:20px 20px 10px 20px;margin-bottom:20px;}
.peak-buy ._mobile{display:inline-block;}
.peak-buy .info-box label{font-size: 14px;font-weight: 600;color: #1C1C1C;margin-bottom:19px;display:inline-block}
.peak-buy .info-box strong{font-size: 14px;font-weight: 500;display:inline-block;width:74px;margin:0;vertical-align:top;margin-bottom:10px;}
.peak-buy .info-box span{display:inline-block;color: #1C1C1C;font-size: 14px;font-weight: 500;vertical-align:top;width:calc(100% - 75px);margin:0 0 10px 0;}
.peak-event .partners .table-row{margin-bottom:95px;padding-bottom:10px;min-height:105px;}
.peak-event .partners .table-cell.url-col{position:absolute;bottom:-70px;padding-left:0 !important;margin-left:-20px;}
.peak-event .partners .table-cell.url-col .url-box._02{width:100%;padding-right:70px;}
.peak-event .partners .table-cell.url-col a{position:absolute;right:6px;top:6px;padding:0;margin:0;width:50px;height:25px;color:#fff;font-size:13px;text-align:center;line-height:25px;border-radius: 5px;background: #FF779A;}
.price_info ul{list-style-type:none}
.price_info div{display:flex;align-items:center;justify-content:end;margin-bottom:20px;}
.price_info div > span{color: #9D9D9D;font-size: 16px;font-weight: 600;margin-right:30px}
.price_info div > strong{color: #1C1C1C;font-size: 28px;font-weight: 600;}
.price_info li{border-radius: 5px;border: 1px solid #CBD5E1;background: #FFF;padding:20px;margin-bottom:20px;}
.price_info li > strong{display:block;color: #1C1C1C;font-size:14px;font-weight:600;margin-bottom:5px;}
.price_info li > small{display:block;color:#8D8D8D;font-size: 14px;margin-bottom:10px;}
.price_info li > span{display:block;text-align:right;margin:0;color: #8D8D8D;font-size: 14px;}
.ing-content{max-width:100%;width:100%;}
.detail-content.deal{width:100%;}
.deal-title{width:100%;display:block;margin-bottom:70px}
.deal-title .change{width:100%;max-height:333px;}
.detail-content.deal .detail-main{width:100%;}
.detail-content.deal{padding-top:30px}
.deal-option{display:block;margin:0;}
.deal-crew{margin:0;height:auto;background:#fff;padding:30px 10px 0 10px}
.deal-crew strong{font-size:16px;}
.deal-crew span{font-size:16px;}
.deal-crew p{font-size:14px;line-height:22px;margin:10px 0 20px 0}
.deal-crew a{font-size:15px;height: 50px;line-height:50px;}
.deal-crew img{width:20px;margin-right:1px;margin-top:-2px}
.deal-opt1{position:fixed;height:64px;overflow:hidden;margin:0;padding:0;width:100%;bottom:0;left:0;z-index:1000;background-color:#fff}
.deal-opt1 .btn-option-view{position:absolute;bottom:0;width:100%;display:block;height:64px;background-color:#000;color:#fff;font-size:15px;font-weight:500;border:0;}
.deal-opt1.on{height:100%;padding:0px 0 0 0px;background:rgba(30,30,30,0.6)}
.deal-opt1.on .btn-option-view{display:none;}
.deal-opt1.on .btn-option-view{display:none;}
.deal-opt1.on .deal-opt2{position:fixed;height:auto;overflow:hidden;margin:0;padding:0;width:100%;bottom:0;left:0;z-index:1000;background-color:#fff;border-radius: 20px 20px 0 0;}
.deal-option .btn-deal-pay, .deal-option .btn-deal-pay-off{height:64px;width:calc(100% - 40px);font-size:15px;margin:0 auto;}
.custom-select{position:relative;padding:30px 20px 0 20px;margin-bottom:34px;}
/* 라벨은 마크업(.bp-sheet-head)에서 t() 로 출력한다 — CSS content 는 번역이 안 된다 */
.custom-select:before,.custom-select:after{content:none;display:none;}
.custom-select .selected{height:40px;color:#999;font-size:14px;line-height:40px;background-size:20px;background-position:right 10px center;padding:0 25px 0 10px;word-break:keep-all;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.custom-select .selected.on{background-size:20px;background-position:right 10px center;border-radius:0;}
.deal-select{padding:0 20px}
.deal-total div{padding:0 20px;border:1px solid #eee;margin:0 20px 60px 20px;width:calc(100% - 40px);}
.deal-total span{font-size:13px;}
.deal-total strong{font-size:13px;color:#cd2e3a}
.options li{border:1px solid #b2b2b2;border-top:0;height:40px;line-height:40px;padding:0 10px;font-size:14px;}
.options li:last-child{border-radius:0;}
.deal-select div{height:42px;font-size:14px;padding:0 10px;border:1px solid #eee;background-color:#F7F7F7;}
.deal-select div:nth-child(1){border-top:1px solid #eee;margin-top:0;}
.deal-select span{font-size:14px;}
.deal-select strong{font-size:14px;margin-right:30px;}
.deal-select button {width:14px;height:14px;background:url('/assets/img/deal_remove.png') no-repeat 0 0 / 12px;border:0;right:32px;}
.deal-select button img{display:none}
.deal-total{margin-top:0;padding-bottom:23px}
body{padding-top:80px;}
.home-page{margin-top:0px;}
.main-banner-section{margin-bottom:40px}
.banner-container{overflow:hidden;padding-bottom:60px;}
.banner-container .swiper{width:160%;margin-left:-30%;}
.main-banner-section .banner-container .swiper{width:100%;margin-left:0;}
.banner-container .swiper img {width: 100%;border-radius:10px;display:none;height: auto;object-fit: cover;}
.main-banner-section .banner-container .swiper img{border-radius:0;}
.banner-container .swiper img.banner_mobile{display:block;min-height:188px}
.home-swiper{transform:translate(-50%,0);left:50%;background-color:transparent;font-size:14px;bottom:0px;}
.home-swiper .swiper-button-next, .home-swiper .swiper-button-prev{background-color:#eee;border-radius:25px;width:25px;height:25px;top:unset;bottom:11px;}
.home-swiper .swiper-button-next:after, .home-swiper .swiper-button-prev:after{font-size:11px}
.home-page .notice-section{padding:0 20px;margin-bottom:40px;}
.notice-title{font-size:13px;margin-right:20px;font-weight:600;line-height:16px;word-break:keep-all}
.notice-section .swiper-slide{font-size:13px;padding:21px 19px;}
.home-page .notice-btn{font-size:13px;padding:0 10px;height:38px;line-height:38px;border-radius:10px;}
.swiper_main{width:270%;margin-left:0%;}
.swiper_main._01{width:100%;}
.swiper_main._01 .card-image img{border-radius:0;}
.swiper_main._01 .clinic-card .card-image{height:auto;background-color:transparent;border-radius:0;}
.swiper_main._01 .clinic-card .card-content{padding:0 16px}
.deal-grid._small .swiper_main{width:calc(100% - 40px);}
.clinic-grid._small .swiper_main{width:calc(100% - 40px);}
.home-page .section-title{font-size:18px;padding:0 20px;}
.home-page .section-container{gap:40px;}
.clinic-card .card-image{height:180px;}
.ad-banner{height:auto;padding:0 20px;margin-bottom:0;}
.ad-banner a{display:block}
.ad-banner img{vertical-align:middle}
.trend-list {width:100%;overflow:hidden;padding-left:20px;}
.trend-list .swiper-wrapper{display:flex}
.trend-content{padding:84px 0 0 0 ;display:block;width:100%}
.trend-left{gap:40px;width:100%;margin-bottom:35px;}
.home-page .trend-rank{font-size: 24.096px;font-weight:600;min-width:auto;margin-top:8px}
.trend-item{gap:25px}
.trend-image{width:96px;height: 54px;}
.trend-category{font-size:10px;}
.trend-info{margin-left:-13px;gap:3px;width: calc(100% - 150px);}
.trend-title{font-size:13px; height:40px;padding-right:10px;word-break:keep-all;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.swiper_mobile{width:86%;}
.new-content-row{overflow:hidden;width:100%;}
.new-content-row .swiper-wrapper{display:flex;gap:0;}
.trend-right{width:100%}
.new-content-card{width:100%;gap:18px;}
.swiper_new_trend {width:260%;margin-left:-80%}
.swiper_new_trend.pc{display:none;}
.swiper_new_trend.mo{display:block;}
.new-content-card .card-title{word-break:keep-all;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;height:50px;}
.new-content-card .card-content{height:100px}
.peak-list._medical .card-image{height:95px}
.peak-list._medical .trend-row{justify-content:start}
.trend-card .ad-icon{right:10px;top:10px;width:34px;}
.review-grid{width:100%;}
.review-card{width:100%;height:300px}
.review-row{width:100%;overflow:hidden;margin-bottom:30px;}
.swiper_review{width:260%;margin-left:-80%}
.review-row .swiper-wrapper{gap:0;display:flex}
.swiper_post{width:100%;overflow:hidden;}
.insight-section{margin-top:80px}
.insite-list{display:none;gap:25px;padding:0 20px}
.insite-list._mobile{display:flex;}
.insite-list img{width:100%;}
.insite-list video{width:100%;}
.insite-list strong{font-size:13px}
.insite-list ul{width:50%;}
.insite-list li{margin-bottom:20px;}
.insite-list li span{font-size: 10px;margin-top:-1px;display:block;}
.nav-content{display:none;position:fixed;width:100%;height:calc(100% - 79px);background-color:#fff;top:79px;}
.nav-content.on{display:block}
.nav-content .logo{display:none;}
.nav-menu{display:block;margin-top:80px;}
.nav-item{display:block}
/* 계정정보(아바타+이름)는 왼쪽, 버튼들은 오른쪽에 나란히.
이전에는 버튼을 position:absolute + right:101px/20px 로 고정 배치했는데,
그 수치가 한국어 "마이페이지/로그아웃" 글자폭 기준이라
다국어(My Page/Log out 등)에서는 폭이 달라져 두 버튼이 겹쳤다.
→ absolute 를 걷어내고 flex 로 흘려보내 겹침을 원천 차단한다. */
.peak-mypage{
display:flex;position:absolute;left:0;width:100%;right:unset;
padding:0 20px;top:20px;box-sizing:border-box;
align-items:center;gap:8px;
}
.peak-mypage._mobile{
display:flex;position:absolute;left:0;width:100%;right:unset;
padding:0 20px;box-sizing:border-box;align-items:center;gap:8px;
}
/* 계정정보 블록이 남는 공간을 모두 차지 → 뒤따르는 버튼들이 오른쪽으로 밀린다 */
.peak-mypage > span{flex:1 1 auto;min-width:0;}
.peak-mypage > span small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.peak-mypage ._signup{display:inline-block;}
.peak-mypage a, .peak-mypage button{
position:static;flex:0 0 auto;margin-left:0;
padding:0 12px;height:32px;border:1px solid #FF779A;color:#FF779A;
border-radius:5px;line-height:31px;display:inline-block;
background-color:transparent;font-size:14px;white-space:nowrap;
}
.peak-mypage a:last-child{border:1px solid #D9D9D9;color:#999;}
.peak-mypage span{font-weight: 500;font-size: 15.75px;color: #1c1c1c;line-height: 22.5px;}
.peak-mypage small{font-weight: 500;font-size: 15.75px;color: #1c1c1c;}
.peak-mypage._mobile a{border-color:#D9D9D9;color:#999;}
.peak-mypage._mobile a:last-child{background-color:#FF779A;border-color:#FF779A;color:#fff;}
.nav-item.active{border-bottom:2px solid #fff}
.nav-item{width:100% !important;background:url('/assets/img/menu_right.png') no-repeat right 40px top 16px / 7px;text-align:left;height:45px;}
.nav-item .nav-text{text-align:left;padding-left:10px}
.nav-item._02{position:relative;right:unset;}
.nav-text{font-size:16px;font-weight:400;color:#383838}
.medical-banner{border-radius:0px}
.medical-banner .swiper_medical img{border-radius:0px}
.medi-abo .swiper_doctor{width:140%;margin-left:-20%}
.medi-abo .swiper_doctor._02{width:100%;margin-left:0%;padding:0 30px}
.medi-abo .swiper_doctor img{width:100%;height:275px}
.medi-abo .swiper_doctor._02 img{width:230px;height:317px;}
.medi-info {gap:0;padding:0}
.medi-info button,.medi-info a.tab-link{width:25%;padding:0;margin:0;height:35px;border-radius:10px;font-size:13px;line-height:33px;}
.medi-info button img,.medi-info a.tab-link img{width:13%;height:auto;margin-right:4px}
.medi-one{margin-top:60px}
.abo-box{border:0}
.abo-box._01{padding:60px 20px;}
.abo-box._no{padding:60px 0px;}
.medi-abo ul{margin-top:25px}
.abo-table table{width:100%}
.abo-table th{height:50px;}
.abo-table td{height:50px;width:calc(100% - 120px);}
.medi-abo .abo-spec li{margin-top:0;margin-bottom:12px}
.abo-table div.mobile{display:block;margin-top:25px;width:calc(100% - 40px)}
.abo-table div.pc{display:none;}
.abo-table td{border-bottom:1px solid #EAEAEA}
.abo-table tr:last-child th{border-bottom:0;}
.abo-table tr:last-child td{border-bottom:0;}
.abo-map span{margin-top:25px}
.medi-info h1{padding:20px 0 20px 0}
.medical-sidebar{display:block;position:fixed;bottom:0;width:100%;height:64px;overflow:hidden;top:unset !important;z-index:1000}
.medical-sidebar.on{display:block;position:fixed;height:100%;background-color:rgba(30,30,30,0.6);}
.medical-sidebar.on .medical-sidebar-box{position:absolute;bottom:0;width:100%;padding:27px 20px 120px 20px;background-color:#fff;border-radius:20px 20px 0 0}
.medical-sidebar.on .apply-mobile{display:none}
.medical-sidebar.on .apply-mobile-off{display:none}
.apply-mobile,apply-mobile-off{z-index:10;display:flex;height:64px;line-height:64px;color:#fff;background-color:#000;font-size:15px;font-weight:500;letter-spacing:-0.09px;position: absolute;bottom: 0;width: 100%;border: 0;}
.medical-left{width:100%;padding:0 20px}
.event-title{font-size:18px}
.event-meta{display:block;position:relative;}
.meta-item{margin-bottom:13px}
.meta-item:last-child{position:absolute;bottom:-13px;right:0}
.medical-tabs{margin-top:60px;overflow:hidden;overflow-x:auto;}
.tab-box{width:max-content;display:flex}
.tab-row{height:50px;width:max-content}
.tab-item{border-radius:0 !important;border:0;border-bottom:2px solid #fff;font-size:15px;color:#bbb;width:auto;border-bottom:2px solid #F5F6F6;flex:unset}
.tab-item:last-child{border-right:0;}
.price-row{justify-content:end}
.price-label{margin-right:29px;}
.treatment-header{margin-bottom:34px}
.tab-item.active{background-color:transparent;border-bottom:2px solid #333;color:#333;}
.treatment-header{}
.treatment-pricing{gap:0px;}
.treatment-item,.treatment-item:last-child{position:relative;padding-bottom:95px;border-bottom:1px solid #e0e0e0}
.treatment-summary{gap:0;display:block;overflow: hidden;max-height: 147px;overflow-y: auto;border-top:1px solid #eee}
.treatment-name{font-size:16px;}
.price-label{font-size:18px}
.price-value.original{font-size:18px}
.price-value.discount{font-size:18px}
.treatment-toggle{border-radius:5px;border:2px solid #111;font-size:14px;position:absolute;bottom:30px;right:0;}
.selected-treatments{border-radius:0;margin-bottom: 0;padding:0;background-color:#fff;}
.btn-deal-close{display:block;position:absolute;right:10px;top:10px;border:0;background-color:transparent}
.payment-summary{padding:0;border:0px solid #eee;background-color:#fff;}
.total-info{border:1px solid #eee;border-top:0;}
.total-label span:first-child{font-color:#000;font-size:13px;}
.vat-note{display:none;}
.total-amount{font-size:13px;color:#cd2e3a;font-weight:500;}
.total-info{padding:0 12px;height:38px;}
.sidebar-title{margin-bottom:23px;}
.summary-item{border:1px solid #eee;border-top:0;padding:0 34px 0 12px;height:42px;background-color:#F7F7F7;position:relative}
.summary-item button{right:12px;margin-top:1px;}
.summary-name{font-size:14px;font-weight:500}
.summary-price{font-size:14px;font-weight:500}
.apply-btn,.apply-btn-off,apply-mobile{font-size:15px;border-radius:0;height:64px;}
.medical-sidebar.on .medical-sidebar-box{padding-bottom:20px}
.signup-form{width:100%;padding:0 20px;}
.detail-content.deal .detail-text img{max-width:100%;width:100%;}
.detail-content.deal figure{max-width:100% !important;width:100% !important;}
.peak-deal-status{margin:0 20px 50px 20px;display:block;padding:36px 39px;text-align:center}
.peak-deal-status .btns{position:relative;gap:11.43px;right:unset;bottom:unset;padding-top:40px;}
.peak-deal-status .btns a{width:50%;height:36px;line-height:36px;font-size:14px;margin-right:0;}
.peak-deal-status .btns button{width:50%;height:36px;font-size:14px}
.peak-deal-status .price div{display:block}
.peak-deal-status strong{display:block;margin:0 auto;font-size: 30px;}
.peak-deal-status p{display:block;margin:0 auto;font-size: 12px;}
.peak-event .partners .event-name a{font-size:14px;font-weight:600;}
.peak-event .partners .table-cell.event-name-col{margin-bottom:0;}
.peak-event .partners .table-cell.amount-col1 .category-text{font-size:14px;font-weight:300;color:#8d8d8d}
.peak-event .partners .table-cell.category-col{position:absolute;bottom:10px;}
.peak-event .partners .table-cell.category-col .category-text{font-size:14px;}
.peak-event .partners .table-cell.name-col1{margin-left:100px;width:auto;}
.peak-event .partners .table-cell.name-col1 .category-text{font-size:14px;font-weight:500;}
.peak-event .partners .table-cell.name-col1 .category-text._c3{color:#06BF5C}
.peak-event .partners .table-cell.url-col .url-box{width:calc(100% - 40px)}
.peak-event .table-cell.country-col{display:none;}
.peak-address li{width:100%;}
.file-item{gap:10px;padding:10px;}
.file-name{overflow:hidden;font-size:12px;white-space: nowrap;text-overflow: ellipsis;}
.progress-text{font-size:12px;}
.peak-event-banner{margin-top:0;}
.search-section._02{top:480px}
._my .button-section{display:block;align-items:center;flex-direction: row;}
.peak-event .table-container{margin-top:30px}
.peak-event .search-section{width:100%;}
.search-box{width:100%;border-radius:99px}
.content-section{gap:0;}
.search-icon{display:none;}
.peak-event .search-text input{padding-left:10px}
.deal-opt1.on .deal-title-box{display:none;}
.medi-abo.about img{width:100%;max-width:100%;}
.peak-review ul:after{font-size:13px;width:90px;height:27px;border-radius:11px 11px 0 0;line-height:27px;top:-32px}
.comment-text{font-size:13px}
.comment-content{gap:10px;}
.medi-one button{font-size:13px}
.medi-abo h2{font-size:16px}
.medi-box._review li:not(.hrv-item) label{font-size:14px}
.medi-box._review ul:not(.hrv-list){width:calc(100% - 40px);margin:0 auto;padding-left:0;padding-right:0;}
.medi-box._review li:not(.hrv-item){padding:0 0;height:auto;}
.medi-box._review li:not(.hrv-item) img{right:10px;width:60px;height:60px;}
.medi-box._review .write-info div{font-size:12px;margin-right:10px}
.medi-box._review li:not(.hrv-item) span{font-size:12px}
.medi-box._review li:not(.hrv-item) strong{font-size:12px}
.medi-box._review li:not(.hrv-item) small{font-size:12px}
.medi-box._review li:not(.hrv-item) label{margin-bottom:20px}
.peak-review ul{gap:5px}
.peak-review ul li{width:25%}
.peak-review ul li img{width:100%;border-radius:3px;min-height:78px;height:100%;}
.medi-box._review li:not(.hrv-item) a{padding:20px 10px 20px 10px;height:100px;}
.medi-box.ba.on img{width:calc(100% - 40px);margin:0 auto;}
.paging{padding-top:20px;padding-bottom:48px;}
.paging a.pn, .paging span.pn{width:35px;height:35px;border-radius:13.9px}
.paging a, .paging span{font-size:12.5px;width:15px;height:35px;}
.paging a img, .paging span img{width:18px;height:18px;}
.my_tab{margin: 40px 10px -20px 10px;}
.peak-event._02 .table-cell{padding-left:0px !important;}
.review-card{height:auto;gap:18px;}
.review-card .card-content{gap:5px}
.review-card .card-title{display: -webkit-box;;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.review-card .card-image {height:320px;background:transparent}
.review-card .card-image img{border-radius:10px;}
}
.popup{position:absolute;z-index:99999;}
.popup img{vertical-align:middle;}
.popup img._mobile{display:none;}
.popup a{display:block;}
.popup div{display:block;width:100%;padding:5px;position:relative}
.popup button{position:absolute;right:10px;bottom:9px;background:transparent;padding:0;border:0;cursor:pointer;}
.checkbox {position:relative;}
.checkbox input {position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;}
.checkbox input + span{background:url('/assets/img/checkbox_off.png') no-repeat 0 0 / 16px;padding-left:20px;font-size:14px;}
.checkbox input:checked + span{background-image:url('/assets/img/checkbox_on.png');}
@media (max-width: 720px){
.popup {left:20px !important;top:80px !important;width:calc(100% - 40px);z-index:999;}
.popup img{width:100%;}
.popup img._pc{display:none;}
.popup img._mobile{display:block;}
}
.btn-list-more{border-radius: 8px;border: 1px solid #E5E5E5;background: #F7F7F7;width:120px;height:40px;line-height:40px;font-size:15px;color:#666;letter-spacing:-0.3px;text-align:center;cursor:pointer}
/* 브레드크럼 — breadcrumb_mockup.html 제안 적용 (0729)
조각 수·문구는 그대로. 디자인만 조정한다.
① 14px → 12.5px ② 마지막 조각의 굵은 검정 제거(회색 한 단계만 진하게)
③ 구분자 한 톤 낮춤 ④ 아래 탭/목록까지 간격 40px → 18px
(브레드크럼은 그 자체가 목적지가 아니라 '지금 어디' 라벨이라 대상에 붙인다) */
.breadcrumb{width: 1200px;margin:0 auto 18px auto}
.breadcrumb a{background:url('/assets/img/chevron-right.png') no-repeat right center / 14px;padding-right:22px;padding-left:7px;font-size:12.5px;font-weight:400;letter-spacing:0.01em;color:#9CA3AF;transition:color .12s;}
.breadcrumb a:first-child{padding-left:0;}
.breadcrumb a:hover{color:#4B5563;text-decoration:underline;}
.breadcrumb span{background:transparent;font-size:12.5px;font-weight:400;color:#6B7280;padding-left:4px;}
.deal-info .breadcrumb{width:1440px}
.deal-list-wrap .breadcrumb{width:1440px}
.company-page .find p{margin-top:40px}
.signup-page .find p{margin-top:40px}
.peak-list .breadcrumb{width: 1440px;margin:0 0 40px 0}
@media (max-width: 720px){
.breadcrumb{width:calc(100% - 40px);margin-bottom:14px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
.breadcrumb a{font-size:12px;padding-right:20px;padding-left:0px;}
.deal-info .breadcrumb{width:100%;}
/* 뷰픽딜 리스트 — 이 선택자만 모바일 재정의가 빠져 있어 1440px 고정이 남았고,
그만큼 가로로 삐져나가 반응형이 깨졌다. */
.deal-list-wrap .breadcrumb{width:100%;}
.peak-list .breadcrumb{width:calc(100% - 40px);padding:0 20px;margin:-120px 0 40px 0;position:absolute;}
.breadcrumb span{font-size:12px;padding-left:0;}
}
.checkbox{position:relative}
.checkbox input{position:absolute;width:100%;height:100%;opacity:0;}
.checkbox span{background:url('/assets/img/check_off.png') no-repeat 0 2px / 16px;height:16px;padding:0 0 0 23px;color: #111;font-size:16px;font-weight:500;letter-spacing:0.16px;}
.checkbox input:checked + span{background-image:url('/assets/img/check_on.png') ;}
.my-hospital{max-width:1080px;}
.peak-image-wrap{position:relative;margin-bottom:40px;}
.peak-image-wrap button{position:absolute;z-index:99;top:0;right:0;display:block}
.peak-image-wrap button.del{background-color:#ff779a;color:#fff;border:0;border-radius:2px;padding:3px 5px;right:5px;top:5px;cursor:pointer;font-size:12px;}
.peak-image-wrap .title{padding-bottom:20px;display:block}
.my-hospital .ex{display:block;border-radius: 5px;border: 1px solid #E0E0E0;background: #FAFAFA;width:515px;line-height:38px;height:38px;padding:0 22px;color:#9e9e9e;font-size:13px;font-weight:400;margin-bottom:40px;}
.peak-image-box{position:relative;display:flex}
.peak-image-box .img-box{width:120px;height:120px;border-radius: 6.897px;background: #F2F3F6;display:flex;align-items:center;justify-content:center;position:relative;}
.peak-image-box .img-box img{object-fit:cover;border-radius: 6.897px;}
.peak-image-box .rod{width:382px;padding:19px 26px;border-radius: 10px;border: 1px solid #DCDEE3;background: #FFF;margin-left:23px;text-align:right}
.peak-image-box .rod strong{margin-bottom:14px;display:inline-block;font-size:15px;font-weight:500;color:#1c1c1c;margin-right:98px;}
.peak-image-box .rod input[type=text]{margin-bottom:14px;display:inline-block;border-radius: 6.283px;border: 0.785px solid #DCDEE3;background: #FFF;padding:0 13px;width:200px;height:35px;color: #999;font-size:12px;font-weight:400}
.peak-image-box .file-box{overflow:hidden;position:relative;width:200px;height:45px;background-color:#ff779a;border-radius:6.283px;display:inline-block;margin-top:6px;}
.peak-image-box .file-box label{color:#fff;font-size:15px;text-align:center;display:block;width:100%;line-height:45px;}
.peak-special{padding-top:40px;}
.peak-special div{position:relative;width:100%;}
.peak-special input[type=text]{vertical-align:top;width:calc(100% - 125px);border-radius: 6.283px;border: 0.785px solid #DCDEE3;background: #FFF;height:45px;padding:0 13px;}
.peak-special .btn-spe-add{vertical-align:top;margin-left:20px;width:105px;height:45px;color:#fff;border-radius: 6.283px;background: #FF779A;font-size:15px;font-weight:500;border:0;}
.peak-special .spe-list{margin-top:26px;padding-bottom:0;}
.spe-list span{display:inline-block;height:30px;line-height:30px;padding:0 32px 0 12px;border-radius: 24.54px;margin-right:6px;background: #F5F6F6;position:relative;font-size:14px;font-weight:400;letter-spacing: -0.084px;}
.spe-list button{position:absolute;right:12px;top:9px;border:0;padding:0;margin:0;background:transparent;cursor:pointer;}
.my-hospital dl{margin-top:40px;}
.my-hospital dt{display:inline-block;width:100px;height:42px;}
.my-hospital dd{position:relative;display:inline-block;height:42px;width:calc(100% - 105px);}
.peak-hours {padding-bottom:0px}
.peak-hours .time{border-radius: 5px;border: 1px solid #DCDEE3;height:40px;width:333px;text-align:center;color:#d1d4db;font-size:15px;line-height:40px;}
.peak-hours .time span{color:#d1d4db;font-size:15px;margin:0 60px}
.peak-hours input[type=text]{width:80px;background:transparent;border:0;letter-spacing:4.2px;font-size:15px;text-align:center;outline:none}
.peak-hours input[type=text]::placeholder{color:#d1d4db}
.peak-hours .checkbox{position:absolute;right:0px;top:8px}
.my-hospital .file-upload-area{margin-top:40px}
.my-hospital .btn-secondary{width:106px;height:45px;border-radius: 6px;background: #fff;color:#b2b2b2;font-size:14px;}
.my-hospital .btn-doctor-save{width:106px;height:45px;border-radius: 6px;background: #FF86A4;color:#ffffff;font-size:14px;}
@media (max-width: 720px){
.my-hospital{width:100%;}
.my-hospital .ex{width:100%;}
.peak-image-box .img-box{width:60px;height:60px;}
.peak-image-box .img-box img{width:60px;height:60px;}
.peak-image-box .rod{width:calc(100% - 70px)}
.peak-image-box .rod strong{display:none;}
.my-hospital dt{width:60px;}
.my-hospital dd{width:calc(100% - 70px);height:auto}
.peak-hours input[type=text] {letter-spacing:2px;width:60px;}
.peak-hours .time{width:calc(100% - 80px);}
.peak-hours .time span{margin:0 10px}
.label-note._02{display:block;margin-top:2px;}
.btn-review{right:20px;bottom:100px}
.btn-review img{width:60px;height:60px;}
.card-title{display: block; -webkit-box-orient: vertical; -webkit-line-clamp: unset; overflow: unset; text-overflow: unset;}
.card-content{height:auto}
body.menuon{overflow:hidden}
}
.jp_view{display:none;}
.en .nav-item{width:auto !important;padding:10px 20px;left:unset !important;position:relative !important}
.jp .form-title{font-size:32px;}
.jp .form-subtitle{font-size:14px;}
.jp .jp_view{display:block !important;}
.jp .peak-company .add-item-btn{width:auto;padding:0 15px}
.jp .note{font-size:14px}
.price-value.original:after{content:' 원';}
.price-value.discount:after{content:' 원';}
.cn .price-value.original:after{content:' 韓元';}
.cn .price-value.discount:after{content:' 韓元';}
.jp .price-value.original:after{content:' ウォン';}
.jp .price-value.discount:after{content:' ウォン';}
.en .price-value.original:after{content:' WON';}
.en .price-value.discount:after{content:' WON';}
.summary-price:after{content:' 원';}
.cn .summary-price:after{content:' 韓元';}
.jp .summary-price:after{content:' ウォン';}
.en .summary-price:after{content:' WON';}
.total-amount:after{content:' 원';}
.cn .total-amount:after{content:' 韓元';}
.jp .total-amount:after{content:' ウォン';}
.en .total-amount:after{content:' WON';}
/* 통화 단위는 CSS 가 아니라 마크업(t('원'))에서 넣는다 — 관리자 UI 번역에서 언어별 수정 가능.
CSS ::after 로 박아두면 관리자에서 못 바꾸고, 언어별 규칙도 여기서만 관리해야 했다. */
.deal-total .deal-total-amt{display:inline-flex;align-items:baseline;gap:4px;}
.deal-total .deal-cur{font-style:normal;font-size:inherit;font-weight:inherit;color:inherit;}
.business-modal.on{display:none;position:fixed;z-index:9998;left:0;top:0;width:100%;height:100%;}
.business-modal.on{display:block;}
.business-modal.on .business-bg{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(34,34,34,0.60);backdrop-filter: blur(15px);}
/* 영문 라벨이 길어 520px 로는 주소가 과하게 접힌다 → 조금 넓힌다 */
.business-box{display:none;width:560px;max-width:calc(100vw - 40px);padding:24px;position:absolute;left:50%;transform:translate(-50%,0);bottom:222px;border-radius: 12px;border: 1px solid #E5E7EB;background: #FFF;box-sizing:border-box;}
.business-box h2{color:#111827;font-size:18px;font-weight:600;border-bottom:1px solid #E5E7EB;padding-bottom:16px;}
.business-box button{position:absolute;right:22px;top:27px;cursor:pointer;background:transparent;border:0;}
/* 라벨(dt) 폭 90px 고정은 한국어 기준이라, 영문 라벨
("E-commerce Registration No." 등)이 두세 줄로 접혔다.
→ 행 단위 flex 로 바꾸고 라벨은 내용만큼만 차지하되 줄바꿈은 막는다. */
.business-box dl{padding-top:10px;display:grid;grid-template-columns:max-content 1fr;column-gap:18px;row-gap:0}
.business-box dt,.business-box dd{color:#6B7280;font-size:14px;font-weight:500;padding-top:15px;width:auto;display:block;margin:0}
.business-box dt{white-space:nowrap}
.business-box dd{color:#111827;margin-left:0;width:auto}
.footer {position: relative;width: 100%;background-color: #F7F9FC;min-width:1440px;margin-top:100px;}
.footer .etc-info {height:380px;width:1440px;margin:0 auto;color:#fff;font-size:16px;font-weight:400;display:flex;align-items: center;justify-content: space-between;}
.etc-info dl{margin:0 0 0 72px}
.etc-info dt{color:rgba(56, 56, 56, 0.80);font-size:15.75px;font-weight:500;padding:10px 0}
.etc-info dd{padding:10px 0;margin:0;}
.etc-info a, .etc-info button{color:#383838;font-size:18px;font-weight:400;background:transparent;border:0;padding:0;margin:0;cursor:pointer;height:27px;line-height:27px;}
.etc-info a img{vertical-align:baseline}
.etc-info .service{display:flex}
.channel p{margin-top:10px;color: #666;font-size: 18px;font-weight: 500;line-height: 30px;margin-bottom:0 !important}
.channel a.ch{margin-top:24px;width:161px;font-size:15px;font-weight:500;letter-spacing:-0.03px;color:#fff;border-radius: 24px;background: #FF779A;display: flex;height: 48px;justify-content: center;align-items: center;}
.channel a.ch img{margin-right:8px;vertical-align:baseline}
/* ── 사이트 점검 안내 모달 ── */
.bp-maint-bg{
display:none;position:fixed;left:0;top:0;width:100%;height:100%;
background:rgba(0,0,0,.55);z-index:10000;align-items:center;justify-content:center;padding:20px;
}
.bp-maint-bg.on{display:flex}
.bp-maint-box{
width:100%;max-width:400px;background:#fff;border-radius:16px;
padding:32px 26px 24px;text-align:center;box-sizing:border-box;
box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.bp-maint-icon{width:46px;height:46px;margin:0 auto 14px;color:#FF779A}
.bp-maint-icon svg{width:100%;height:100%;display:block}
.bp-maint-box strong{display:block;font-size:17px;font-weight:700;color:#1C1C1E;margin-bottom:9px}
.bp-maint-box p{font-size:14px;line-height:1.65;color:#5C6270;margin:0}
.bp-maint-period{
display:inline-block;margin-top:12px;padding:5px 12px;border-radius:8px;
background:#F5F6F8;font-size:12.5px;color:#647287
}
.bp-maint-close{
margin-top:20px;width:100%;height:46px;border:0;border-radius:10px;
background:#FF779A;color:#fff;font-size:15px;font-weight:600;cursor:pointer
}
.bp-maint-close:hover{background:#F85D8B}
@media (max-width:720px){
.bp-maint-box{max-width:none;padding:28px 20px 20px}
.bp-maint-box p{font-size:13.5px}
}
/* ── 의료뷰티 목록 필터 칩 (beaupeak_EN medical.html 시안 기준) ── */
.bp-filter{
background:#FAFAFB;border:1px solid #E8EAEE;border-radius:10px;
padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
/* 위(검색·정렬)는 좁게, 아래(목록)는 넉넉히.
.controls-section 의 margin-bottom 은 데스크톱 80px / 모바일 35px 이라
음수 마진으로 상쇄해 검색박스와의 간격을 12px 안팎으로 맞춘다. */
margin:-68px 0 34px;
}
.bp-filter, .bp-filter *{box-sizing:border-box}
.bp-filter-cap{font-size:12px;color:#9CA3AF;flex:0 0 auto;letter-spacing:.02em}
.bp-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 auto}
.bp-chip{
display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;
border:1px solid #E8EAEE;background:#fff;font-family:inherit;font-size:13px;color:#4B5563;
cursor:pointer;white-space:nowrap;transition:border-color .13s, background .13s, color .13s;
}
.bp-chip:hover{border-color:#C9CDD4}
.bp-chip.is-on{border-color:#FF709A;background:#FFF5F8;color:#B02A55;font-weight:600}
.bp-chip.is-on::before{content:'\2713';font-size:11px;line-height:1}
.bp-chip:focus-visible{outline:2px solid #FF709A;outline-offset:2px}
.bp-chip-clear{
border:0;background:none;font-family:inherit;font-size:12.5px;color:#9CA3AF;
cursor:pointer;padding:8px 2px;text-decoration:underline;flex:0 0 auto;visibility:hidden;
}
.bp-chip-clear.is-on{visibility:visible}
@media (max-width:720px){
/* ── 필터 칩: 한 줄 가로 스크롤 (시안: 의료뷰피_페이지_필터_칩_모바일_수정_요청.html) ──
기존에는 배경 박스 + 'FILTER BY' 라벨 + 줄바꿈 구조라 칩이 두 줄로 접히고
그만큼 카드가 아래로 밀렸다. 박스·라벨을 걷어내고 한 줄로 흘린다.
주의 — 세그먼트(정렬)와 칩 줄 사이 간격을 만드는 건 .bp-filter 의 margin-top 이 아니라
.controls-section 의 margin-bottom(모바일 35px)이다. 인접 형제 마진은 상쇄돼
둘 중 큰 값만 남으므로, margin-top 만 줄이면 화면에서는 변하지 않는다.
범위는 칩 줄이 있는 문서(=메디컬)로만 좁힌다. */
body:has(.bp-filter) .controls-section{margin-bottom:10px}
.bp-filter{
display:block;
background:none;border:0;border-radius:0;
padding:0;
/* 위 0 — 간격은 위 .controls-section 이 만든다 / 아래 22 — 칩 줄과 카드 사이 */
margin:0 0 22px;
width:auto;
}
.bp-filter-cap{display:none} /* '필터' 라벨 제거 */
.bp-chips{
display:flex;flex-wrap:nowrap;gap:6px;
overflow-x:auto;-webkit-overflow-scrolling:touch;
/* 왼쪽 21 — 목록(.trend-grid padding:0 21px)과 축을 맞춘다
오른쪽 16 — 끝까지 밀었을 때 마지막 칩이 모서리에 붙지 않게 */
padding:2px 16px 2px 21px;margin:0;
scrollbar-width:none;
}
.bp-chips::-webkit-scrollbar{display:none}
.bp-chip{flex:0 0 auto;height:34px;padding:0 10px;font-size:12px}
/* 전체 해제 — 박스가 없어졌으니 칩 줄 아래로.
visibility:hidden 은 자리를 계속 차지해 빈 줄이 남는다 → display 로 바꾼다. */
.bp-chip-clear{display:none}
.bp-chip-clear.is-on{
display:inline-block;visibility:visible;
margin:9px 21px 0;padding:2px 0;
}
}
/* 칩 줄 드래그 — 데스크톱에서 세로 휠은 가로 스트립에 먹지 않는다.
끌 때 텍스트가 잡히면 브라우저가 네이티브 드래그로 해석해 차단 커서를 띄우므로
선택 자체를 막아야 커서가 정상으로 뜬다. */
.bp-chips{cursor:grab;-webkit-user-select:none;user-select:none}
.bp-chips.is-dragging{cursor:grabbing}
.bp-chips.is-dragging .bp-chip{pointer-events:none}
/* WhatsApp 문의 버튼 (한국어 외 사이트) — 카카오 버튼과 같은 형태, 아이콘만 브랜드 컬러 */
/* 폭만 글자에 맞게 늘린다. 모바일(720px 이하) 은 기존 .ch 규칙(280px 고정)을 그대로 따른다. */
@media (min-width:721px){
.channel a.ch.ch-wa{width:auto;min-width:161px;padding:0 22px;white-space:nowrap}
}
.channel a.ch.ch-wa .wa-glyph{width:19px;height:19px;flex:0 0 auto;display:block;margin-right:8px;color:#25D366}
.channel a.ch.ch-wa .wa-glyph svg{width:100%;height:100%;display:block}
.footer .copyright{height:55px;line-height:55px;background-color:#222}
.copyright div{width:1440px;margin:0 auto;color:#fff;font-size:16px;font-weight:400;}
.review_login{position:absolute;width:580px;height:580px;background: rgba(0, 0, 0, 0.60);backdrop-filter: blur(25px);display:flex;align-items:center;justify-content:center;border-radius:20px;z-index:9;}
.review_login div{color:#fff;text-align:center;line-height:25px;}
.review_login strong{color:#fff;font-size: 18px;font-weight: 600;}
.review_login span{color:#fff;font-size: 16px;font-weight: 400;}
.review_login button{color:#fff;margin-top:13px;width:228px;border-radius: 20px;height: 40px;font-size: 15px;font-weight: 600;background: var(--GRD---500, linear-gradient(90deg, #901D3B 0%, #F2006F 50%, #901D3B 100%));border:0;}
.btn-user-profile{background: transparent;border: 0px solid #B2B2B2;color: #FF779A;font-size: 13px;border-radius:4px;padding:0 5px;margin-left:0px;vertical-align: top;margin-top:-1px;}
.review-blur{position:absolute;width:calc(100% + 100px);height:calc(100% + 100px);overflow:hidden;top:-35px;left:-50px}
.review-blur div{position:absolute;width:100%;height:100%;background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.30) 100%);backdrop-filter: blur(25px);}
.modal{display:none;}
.modal.on{display:flex;background:rgba(34,34,34,0.30);position:fixed;left:0;top:0;width:100%;height:100%;align-items:center;justify-content:center;z-index:1000;}
.modal div{width:360px;padding:32px 50px;background-color:#fff;border-radius: 16px;border: 1px solid #CBD5E1;text-align:center;}
.modal strong{font-size: 18px;letter-spacing: -0.108px;font-weight: 600;color:#1e293b}
.modal p{font-size: 14px;letter-spacing: -0.084px;font-weight: 500;color:#1e293b;margin-top:12px;line-height: 22px; margin-bottom:18px;}
.modal button{background: #FF779A;color:#fff;margin-top:12px;border:1px solid #FF779A;border-radius: 8px;font-size: 14px;font-weight: 500;letter-spacing: -0.084px;width:100%;height:48px;}
.modal button.btn-modal-back{color:#94A3B8;border:1px solid #94A3B8;background-color:#fff;}
.my-post .pc{display:block}
.my-post .mo{display:none}
.my-post{width:100%;padding-top:25px;}
.my-post h2{font-size:20px;font-weight:700;color:#1e293b}
.my-post .my-post-btn{display:flex;align-items:center;justify-content:space-between;margin-top:24px;}
.my-post-btn .nemo {display:flex;gap:8px}
.my-post-btn .nemo a{height:36px;display:block;border-radius:8px;padding:0 14px;line-height:36px;color:#6B7280;border:1px solid #E5E7EB;font-size:14px;}
.my-post-btn .nemo a.active{color:#fff;background-color:#FF779A;border:1px solid #FF779A}
.my-post-btn .nemo a:hover{color:#FF779A;}
.my-post-btn .nemo a.active:hover{color:#fff;}
.my-post-btn .text{display:flex;gap:12px}
.my-post-btn .text a{font-size:14px;color:#94A3B8}
.my-post-btn .text a.active,.my-post-btn .text a:hover{color:#FF779A}
.my-post ul{padding-top:32px;border-top:1px solid #e2e8f0;margin-top:32px;list-style-type:none;}
.my-post li{border:1px solid #E2E8F0;border-radius:12px;padding:24px 24px 20px 24px;margin-bottom:16px;position:relative;}
.my-post li a{height:28px;line-height:28px;display:inline-block;background:url('/assets/img/post-right.png') no-repeat right center / 15px;padding-right:20px;color:#6b7280;font-size:14px;font-weight:500;word-wrap: break-word;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.my-post li label{vertical-align:top;display:inline-block;height:28px;padding:0 15px;border-radius:5px;background-color:#eef2f6;line-height:28px;color:#E84F76;font-size:12px;margin-right:4px;}
.my-post li span{vertical-align:top;display:inline-block;color:#94A3B8;font-size:14px;position:absolute;right:24px;top:28px;}
.my-post li small{display:block;background:url('/assets/img/arrow-curve-left-right.png') no-repeat 0 2px / 14px;padding-left:20px;margin:13px 0 0 0}
.my-post .warning {text-align:center;margin:0 auto;padding-top:32px;border-top:1px solid #e2e8f0;margin-top:32px; }
.my-post .warning strong{color:#1E293B;font-size: 16px;;font-weight:600;}
.my-post .warning p{color:#6B7280;font-size:14px;font-weight:400;line-height:21px;margin:17px 0 34px 0;}
.my-post .warning a{display:inline-block;border-radius: 10px;background: #FF779A;color:#fff;height:40px;line-height:40px;text-align:center;font-size:14px;font-weight:600;padding:0 20px;}
.my-post .c-review label{color:#E84F76}
.my-post .c-trend label{color:#4F56E8}
.my-post .c-insite label{color:#169A2E}
@media (max-width: 720px){
.footer {min-width:100%;}
.footer .logo img{width:147px}
.footer .etc-info{display:block;width:100%;padding-top:56px;height:auto}
.footer .service{padding:82px 0 88px 0}
.etc-info a, .etc-info button{font-size:16px;background:transparent}
.etc-info dl:first-child{margin-left:20px}
.channel{text-align:center;}
.channel p{font-size:14px;line-height:23px}
.channel a.ch{width:280px;height:44px;font-size:14px;margin:0 auto;position:absolute;bottom:70px;left:50%;transform:translate(-50%,0);}
.footer .copyright{background-color: #F7F9FC;height:auto;line-height:normal}
.copyright div{width:100%;color:#97989A;font-size:14px;font-weight:400;text-align:center;padding:18px 0 35px 0;}
/* 기본 규칙의 max-width:calc(100vw - 40px) 때문에 모바일에서 좌우가 20px씩 떠 보였다 */
.business-box{width:100%;max-width:100%;bottom:0;border-radius:16px 16px 0 0;border:0;left:0px; transform: unset;}
.business-box h2{font-size:16px;padding-bottom:16px;}
.business-box dt,.business-box dd{font-size:14px;padding-top:10px;height:auto;}
/* 모바일은 폭이 좁아 라벨을 한 줄로 강제하면 값이 밀린다 → 라벨/값을 위아래로 쌓는다 */
.business-box dl{grid-template-columns:1fr;column-gap:0;row-gap:0}
.business-box dt{width:auto;white-space:normal;padding-top:12px;font-size:13px}
.business-box dd{font-weight:400;padding-top:2px}
.view-img{width:100%;}
.review_login{width:100%;height:100%;min-height:100%}
.review-blur{width: calc(100% + 44px);height: calc(100% + 40px);overflow: hidden;top: -20px;left: -22px;}
.my-post{width:calc(100% - 40px);margin:0 auto;}
.my-post .text{display:none;}
.my-post .pc{display:none}
.my-post .mo{display:block}
.my-post li{padding:16px 16px 60px 16px}
.my-post li label{padding:0 8px;height:24px;line-height:24px;}
.my-post li span{height:24px;line-height:24px;position:relative;top:unset;right:unset;font-size:12px;}
.my-post li a{position:absolute;left:16px;top:60px;font-size:15px;width:calc(100% - 32px);background-position:right;display: -webkit-box;}
.my-post .type0 li{padding-bottom:80px}
.my-post .type0 li a{top:40px;color:#94a3b8;font-size:14px;}
.my-post li small{position:absolute;bottom:16px;font-size:15px;background-position:0 4px }
.my-post h2{font-size: 18px;font-weight:600}
.my-post h3{font-size: 15px;font-weight:700;margin-bottom:15px;margin-top:30px;}
.my-post ul{border-top:0;margin:0;padding:0;}
.my-post-btn .nemo{width:100%;}
.my-post-btn .nemo a{width:50%;text-align:center;height:32px;line-height:32px;border-radius:8px;font-size:12px;font-weight:600}
.my-post ._count{color:#94A3B8;font-size:13px;font-weight:500;margin-top:10px;}
.my-post ._count span{color:#FF779A;font-size:14px;font-weight:500;margin-left:3px;}
.my-post .warning{border-top:0;padding:0;}
}
.modal-agree.on{display:flex}
.modal-agree{display:none;z-index:9999;background:rgba(34, 34, 34, 0.20);position:fixed;width:100%;height:100%;left:0;top:0;backdrop-filter: blur(7.5px);}
.agree-wrap h2{position:relative;border-bottom:1px solid #e5e7eb;padding-bottom:12px;margin-bottom:31px;width:calc(100% - 37px);}
.agree-wrap h2 strong{display:none;font-size:18px;font-weight:600;color:#111827;}
.agree-wrap h2 strong.on{display:block;}
.agree-wrap button{position:absolute;right:0;top:5px;background:transparent;border:0;cursor:pointer;}
.modal-agree .agree-wrap{padding:31px 20px;background-color:#fff;width:800px;height:calc(100% - 211px);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:12px;}
.modal-agree .agree-box{overflow:hidden;overflow-y:scroll;height: calc(100% - 61px);padding-right:32px}
.modal-agree .agree-box::-webkit-scrollbar { width: 5px; }
.modal-agree .agree-box::-webkit-scrollbar-thumb {background: #FF779A;border-radius: 10px;}
.modal-agree .agree-box::-webkit-scrollbar-track {background: #F2F2F2;border-radius: 10px;}
.agree {display:none;}
.agree.on {display:block;}
.deal-card .pc{display:block;}
.deal-card .mo{display:none;}
@media (max-width: 720px){
.agree-wrap h2{width:calc(100% - 24px);margin-bottom:24px;}
.modal-agree .agree-wrap{top:unset;left:0;bottom:0;transform:unset;border-radius:16px 16px 0 0;width:100%;height:70%;padding:20px 14px 30px 14px}
.modal-agree .agree-box{padding-right:22px}
.modal-agree .agree-box::-webkit-scrollbar { width: 3px; }
.deal-card .pc{display:none;}
.deal-card .mo{display:block;}
.deal-card .card-image{height:100%;}
}
.sign_agree strong{font-size: 20px;font-weight: 600;margin-bottom:10px;display:block}
.sign_agree .check{margin:0 0 10px 0;position:relative;display:flex;justify-content:space-between}
.sign_agree .check label{position:relative;font-size: 14px;color: #1A1A1A;font-weight: 400;cursor:pointer}
.sign_agree .check.all label{font-weight:700;}
.sign_agree .check input{opacity:0;position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer}
.sign_agree .check input + span{background:url('/assets/img/check_off.png') no-repeat 0 0 / 16px;padding:0 0 0 25px;}
.sign_agree .check input:checked + span{background:url('/assets/img/check_on.png') no-repeat 0 0 / 16px;}
.sign_agree .checkwrap{padding: 0 0 0 22px}
.sign_agree button{background:transparent;border:0;color: #9B9B9B;font-size: 14px;font-weight: 400;border-bottom:1px solid #9B9B9B;height:20px;cursor:pointer}
.sun-editor-editable figure {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
max-width: none !important;
text-align: inherit !important;
}
/* 영상(se-video-container)은 위 규칙에서 제외한다.
위 figure 규칙이 suneditor 가 넣는 크기(width:100%, padding-bottom:비율)를
덮어써 figure 가 0x0 이 되고, 그 안의 video(position:absolute)까지 사라졌다.
글쓰기 화면과 저장된 글 읽기 화면 모두 같은 클래스를 쓰므로 여기에 둔다. */
.sun-editor-editable .se-video-container figure,
.se-video-container figure{
/* relative 를 유지해야 한다.
suneditor 기본 CSS 가 video 에 position:absolute 를 걸어두는데,
figure 가 static 이면 영상이 먼 조상 기준으로 배치돼 이미지 위까지 덮어
그 아래 이미지를 클릭할 수 없게 된다. */
position:relative !important;
width:100%; /* 컨테이너(=크기 조절 대상) 폭을 그대로 따른다 */
max-width:100%;
height:auto;
padding:0 !important;
margin:0 !important;
}
/* 정렬은 suneditor 가 붙이는 __se__float-* 클래스를 그대로 따른다.
(text-align:center 를 강제로 걸면 '왼쪽/오른쪽' 을 골라도 가운데로만 보인다) */
.sun-editor-editable .se-video-container.__se__float-center,
.se-video-container.__se__float-center{text-align:center}
.sun-editor-editable .se-video-container.__se__float-left,
.se-video-container.__se__float-left{text-align:left}
.sun-editor-editable .se-video-container.__se__float-right,
.se-video-container.__se__float-right{text-align:right}
.sun-editor-editable .se-video-container.__se__float-none,
.se-video-container.__se__float-none{text-align:left}
/* 영상은 원본 비율 그대로. 위아래 검은 여백이 생기지 않는다.
(position:absolute + 고정 비율을 쓰면 세로 영상에서 상자만 커진다) */
.sun-editor-editable .se-video-container video,
.se-video-container video{
/* suneditor 기본값(position:absolute + width/height:100%)만 되돌린다.
width/height 를 !important 로 고정하면 크기 조절(드래그·100/75/50%)이
인라인 스타일로 들어와도 무시돼 아무 반응이 없다. */
/* suneditor 는 크기(100/75/50%·드래그)를 '컨테이너'의 width 로 기록하고,
영상 자체에는 width:100% 를 넣어 컨테이너를 채우게 한다.
그래서 영상에는 width:auto 를 쓰면 안 된다 — 크기 조절이 무시된다.
높이만 비율대로 따라가게 두면 세로 영상도 그대로 나온다. */
position:static !important;
width:100%; /* 컨테이너 폭(100/75/50%)을 채운다 */
height:auto !important; /* 높이는 원본 비율대로 */
max-width:100%;
display:block;
outline:0 !important;
}
/* 높이 상한은 두지 않는다.
max-height 를 걸면 세로 영상에서 높이가 먼저 걸려 폭 변화가 무시되고
크기 조절(100/75/50%·드래그)이 아무 반응이 없게 된다.
세로 영상이 크면 사용자가 50%/75% 로 줄이면 된다. */
/* iframe(유튜브 등)은 원본 비율을 알 수 없으므로 기존 16:9 상자를 유지한다 */
.sun-editor-editable .se-video-container figure:has(iframe),
.se-video-container figure:has(iframe){
position:relative !important;
width:100% !important;
height:0 !important;
padding:0 0 56.25% 0 !important;
max-height:none;
}
.sun-editor-editable .se-video-container iframe,
.se-video-container iframe{
position:absolute; top:0; left:0;
width:100% !important; height:100% !important;
}
#agreement{padding:0 30px}
.toss-box{z-index:9999;position:fixed;background:rgba(0,0,0,0.5);left:0;top:0;width:100%;height:100%;display:none;justify-content:center;align-items:center;}
.toss-box.on{display:flex}
.toss-warp{max-width:720px;width:100%;background-color:#fff;padding:0 0 30px 0}
.toss-btn {display:flex;gap:10px;width:calc(100% - 60px);margin:0 auto}
.toss-warp #payment-cancel{border-radius:5px;display: flex;align-items: center;justify-content: center;background: #bfbbbb;color: #fff;height: 52px;font-size: 16px;letter-spacing: -0.132px;border: 0;width:30%;}
.toss-warp #payment-button{border-radius:5px;display: flex;align-items: center;justify-content: center;background: #FF779A;color: #fff;height: 52px;font-size: 16px;letter-spacing: -0.132px;border: 0;width:70%;}
/* 뷰픽회원 주문 현황 */
.peak-order .filter-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.peak-order .order-tabs{display:flex;align-items:center;gap:14px}
.peak-order .order-tabs a{font-size:18px;font-weight:500;color:#999;padding:8px 0;text-decoration:none}
.peak-order .order-tabs a.active{color:#FF4E7A;border-bottom:2px solid #FF4E7A;font-weight:700}
.peak-order .order-tabs .tab-divider{color:#E5E5E5}
.peak-order .table-container.orders{width:100%;border-top:1px solid #E5E5E5}
.peak-order .table-header{display:flex;height:56px;align-items:center;background:#FAFAFA;font-weight:700;color:#1C1C1C;border-bottom:1px solid #E5E5E5}
.peak-order .header-cell,.peak-order .table-cell{padding:0 12px;display:flex;align-items:center}
.peak-order .header-cell.country-col,.peak-order .table-cell.country-col{width:80px;justify-content:center}
.peak-order .header-cell.name-col,.peak-order .table-cell.name-col{width:120px}
.peak-order .header-cell.product-col,.peak-order .table-cell.product-col{flex:1;flex-direction:column;align-items:flex-start;justify-content:center}
.peak-order .header-cell.amount-col,.peak-order .table-cell.amount-col{width:160px}
.peak-order .header-cell.status-col,.peak-order .table-cell.status-col{width:140px}
.peak-order .header-cell.date-col,.peak-order .table-cell.date-col{width:140px}
.peak-order .table-row{display:flex;height:80px;border-bottom:1px solid #F3F3F3;align-items:center}
.peak-order .table-row.row-cancel{background:#FFF5F6}
.peak-order .country-flag{border:1px solid #E5E5E5;border-radius:2px;object-fit:cover}
.peak-order .product-name{font-size:15px;font-weight:600;color:#1C1C1C;margin-bottom:4px}
.peak-order .product-option{font-size:13px;color:#8D8D8D}
.peak-order .name-text,.peak-order .amount-text,.peak-order .date-text{font-size:15px;color:#1C1C1C;font-weight:400}
.peak-order .status-text{font-size:15px;font-weight:500}
.peak-order .status-text.status-1{color:#1C1C1C}
.peak-order .status-text.status-2,.peak-order .status-text.status-5{color:#CD2E3A}
.peak-order .status-text.status-4{color:#FF8C00}
.peak-order .status-text.status-3{color:#06BF5C}
@media (max-width:720px){
.peak-order .filter-section{flex-direction:column;align-items:stretch;gap:14px}
.peak-order .table-header{display:none}
.peak-order .table-row{display:block;height:auto;padding:16px;border:1px solid #E5E5E5;border-radius:6px;margin-bottom:12px}
.peak-order .table-cell{width:100% !important;padding:4px 0;display:flex;justify-content:space-between}
.peak-order .table-cell.country-col{justify-content:flex-start}
.peak-order .table-cell.product-col{flex-direction:column;align-items:flex-start}
}
.peak-order .table-empty{padding:60px 20px;text-align:center;color:#8D8D8D;font-size:15px;border-bottom:1px solid #F3F3F3}
/* 뷰픽회원 상품 내역 */
.peak-order-list .table-header,
.peak-order-list .table-row{display:flex;align-items:center}
.peak-order-list .table-header{height:56px;background:#FAFAFA;font-weight:700;color:#1C1C1C;border-bottom:1px solid #E5E5E5}
.peak-order-list .table-row{height:80px;border-bottom:1px solid #F3F3F3}
.peak-order-list .header-cell,.peak-order-list .table-cell{padding:0 12px;display:flex;align-items:center}
.peak-order-list .header-cell.country-col,.peak-order-list .table-cell.country-col{width:120px;justify-content:center}
.peak-order-list .header-cell.product-col,.peak-order-list .table-cell.product-col{flex:1}
.peak-order-list .header-cell.status-col,.peak-order-list .table-cell.status-col{width:200px;justify-content:flex-end}
.peak-order-list .product-name{font-size:15px;color:#1C1C1C;font-weight:400}
.goods-status-select{padding:8px 32px 8px 16px;border-radius:20px;border:1px solid #E5E5E5;background-color:#fff;font-size:14px;font-weight:500;cursor:pointer;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;-webkit-appearance:none;appearance:none}
.goods-status-select.status-0{color:#06BF5C;background-color:#EBFBF1;border-color:#D2F2DD}
.goods-status-select.status-1{color:#CD2E3A;background-color:#FFF5F6;border-color:#F5C9CC}
@media (max-width:720px){
.peak-order-list .table-header{display:none}
.peak-order-list .table-row{display:flex;flex-wrap:wrap;height:auto;padding:14px 16px;border:1px solid #E5E5E5;border-radius:6px;margin-bottom:10px}
.peak-order-list .table-cell{width:auto !important}
.peak-order-list .table-cell.country-col{width:40px !important;padding-left:0}
.peak-order-list .table-cell.product-col{flex:1}
.peak-order-list .table-cell.status-col{width:100% !important;justify-content:flex-start;margin-top:8px}
}
/* 뷰픽회원 주문 상세 */
.peak-order-view{display:flex;flex-direction:column;gap:16px}
.peak-order-view .order-section{background:#fff;border:1px solid #EFEFEF;border-radius:12px;padding:24px 28px}
.peak-order-view .status-section .section-row{display:flex;align-items:center;gap:24px}
.peak-order-view .section-label{font-size:18px;font-weight:700;color:#1C1C1C}
.peak-order-view .section-title{font-size:18px;font-weight:700;color:#1C1C1C;margin:0 0 18px 0}
.peak-order-view .status-text{font-size:16px;font-weight:600}
.peak-order-view .status-text.status-1{color:#FF4E7A}
.peak-order-view .status-text.status-2,.peak-order-view .status-text.status-5{color:#CD2E3A}
.peak-order-view .status-text.status-4{color:#FF8C00}
.peak-order-view .status-text.status-3{color:#06BF5C}
.peak-order-view .info-row{display:flex;gap:48px;align-items:center}
.peak-order-view .info-item{display:flex;align-items:center;gap:14px}
.peak-order-view .info-label{font-size:15px;color:#8D8D8D;font-weight:500;min-width:60px}
.peak-order-view .info-value{font-size:15px;color:#1C1C1C}
.peak-order-view .info-grid{display:flex;flex-direction:column;gap:14px}
.peak-order-view .info-line{display:flex;gap:16px;align-items:flex-start}
.peak-order-view .payment-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.peak-order-view .payment-card{background:#FAFAFA;border:1px solid #F1F1F1;border-radius:10px;padding:22px 24px}
.peak-order-view .card-title{font-size:16px;font-weight:700;margin:0 0 16px 0}
.peak-order-view .payment-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;color:#1C1C1C}
.peak-order-view .payment-row span:first-child{color:#8D8D8D}
.peak-order-view .payment-row.total{margin-top:14px;padding-top:14px;border-top:1px solid #E5E5E5;font-weight:700}
.peak-order-view .payment-row.total .total-amount{color:#FF4E7A;font-size:16px}
.peak-order-view .delivery-status-row{display:flex;gap:24px;align-items:center;margin-bottom:18px}
.peak-order-view .delivery-form{display:flex;gap:10px;align-items:center}
.peak-order-view .delivery-form select,.peak-order-view .delivery-form input{height:46px;padding:0 16px;border:1px solid #E5E5E5;border-radius:8px;font-size:14px;background:#fff}
.peak-order-view .delivery-form select{min-width:160px}
.peak-order-view .delivery-form input{flex:1}
.peak-order-view .btn-delivery-save{height:46px;padding:0 28px;border-radius:8px;background:#FF4E7A;color:#fff;border:0;font-size:14px;font-weight:600;cursor:pointer}
.peak-order-view .btn-delivery-save:hover{background:#E63E68}
.peak-order-view .detail-product{display:flex;align-items:center;gap:16px;padding-bottom:18px}
.peak-order-view .detail-table{border-top:1px solid #E5E5E5}
.peak-order-view .detail-table-header,.peak-order-view .detail-table-row{display:grid;grid-template-columns:1fr 120px 180px;gap:0;padding:14px 16px;border-bottom:1px solid #F3F3F3}
.peak-order-view .detail-table-header{background:#FAFAFA;font-weight:700}
.peak-order-view .detail-table-row.total-row{background:#FAFAFA}
.peak-order-view .detail-table-row.total-row .colspan2{grid-column:1 / span 2;text-align:right}
.peak-order-view .detail-table-row .total-label{color:#8D8D8D;margin-right:8px}
.peak-order-view .detail-table .th{font-size:14px;color:#1C1C1C}
.peak-order-view .detail-table .td{font-size:14px;color:#1C1C1C}
.peak-order-view .detail-table .amount-col,.peak-order-view .detail-table .count-col{text-align:right}
.peak-order-view .order-actions{display:flex;justify-content:flex-end;padding:0 8px}
.peak-order-view .btn-order-cancel{padding:12px 28px;background:#fff;border:1px solid #E5E5E5;border-radius:8px;font-size:14px;color:#1C1C1C;cursor:pointer}
.peak-order-view .btn-order-cancel:hover{background:#FAFAFA}
.peak-order-view .order-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:#8D8D8D;font-size:13px;padding:0 8px 16px}
.peak-order .table-row.clickable{cursor:pointer}
.peak-order .table-row.clickable:hover{background:#FAFAFA}
@media (max-width:720px){
.peak-order-view .order-section{padding:18px 16px}
.peak-order-view .info-row{flex-direction:column;align-items:flex-start;gap:12px}
.peak-order-view .payment-cards{grid-template-columns:1fr}
.peak-order-view .delivery-form{flex-wrap:wrap}
.peak-order-view .delivery-form select,.peak-order-view .delivery-form input{width:100%}
.peak-order-view .detail-table-header,.peak-order-view .detail-table-row{grid-template-columns:1fr 60px 100px;font-size:12px;padding:10px 8px}
}
/* 마이페이지 좌측 메뉴 - 부모/자식 메뉴 */
.left-sidebar .sidebar-tab.tab-parent{cursor:pointer;position:relative}
.left-sidebar .sidebar-tab.tab-parent .tab-arrow{margin-left:auto;font-size:11px;color:#999;transition:transform .2s}
.left-sidebar .sidebar-tab.tab-parent.expanded .tab-arrow{transform:rotate(180deg)}
.left-sidebar .sidebar-tab.tab-parent.active .tab-name{color:#FF779A;font-weight:600}
.left-sidebar .sub-menu{display:none;padding-left:18px;margin:4px 0 4px 16px;border-left:1px solid #F0F0F0}
.left-sidebar .sub-menu.open{display:block}
.left-sidebar .sub-menu .sidebar-tab.sub-tab{padding-left:18px}
.left-sidebar .sub-menu .sidebar-tab.sub-tab .tab-name{font-size:14px;color:#666}
.left-sidebar .sub-menu .sidebar-tab.sub-tab.active .tab-name{color:#FF779A;font-weight:600}
/* 병원 정보 탭 */
.peak-hospital-page .hospital-tabs{display:flex;gap:8px;margin-bottom:32px;flex-wrap:wrap}
.peak-hospital-page .hospital-tabs .tab-btn{height:40px;width:80px;padding:10px 0;border-radius:8px;border:1px solid #F0F0F0;background:#fff;color:#8D8D8D;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s}
.peak-hospital-page .hospital-tabs .tab-btn:hover{background:#FAFAFA}
.peak-hospital-page .hospital-tabs .tab-btn.active{background:#FF4E7A;border-color:#FF4E7A;color:#fff;font-weight:600}
.peak-hospital-page .tab-pane{display:none}
.peak-hospital-page .tab-pane.active{display:block}
/* 이벤트 신청 현황 (병원/이벤트 탭) */
.peak-event-post .event-tab-row{display:flex;gap:8px;margin-bottom:24px}
.peak-event-post .event-tab-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 26px;border-radius:8px;border:1px solid #F0F0F0;background:#fff;color:#8D8D8D;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:all .15s}
.peak-event-post .event-tab-btn:hover{background:#FAFAFA}
.peak-event-post .event-tab-btn.active{background:#FF4E7A;border-color:#FF4E7A;color:#fff;font-weight:600}
.peak-event-post .table-container.event-applies{width:100%;border-top:1px solid #E5E5E5}
.peak-event-post .table-header{display:flex;height:56px;align-items:center;background:#FAFAFA;font-weight:700;color:#1C1C1C;border-bottom:1px solid #E5E5E5}
.peak-event-post .table-row{display:flex;height:80px;align-items:center;border-bottom:1px solid #F3F3F3}
.peak-event-post .table-row.row-cancel{background:#FFF5F6}
.peak-event-post .header-cell,.peak-event-post .table-cell{padding:0 12px;display:flex;align-items:center}
.peak-event-post .header-cell.country-col,.peak-event-post .table-cell.country-col{width:80px;justify-content:center}
.peak-event-post .header-cell.product-col,.peak-event-post .table-cell.product-col{flex:1;flex-direction:column;align-items:flex-start;justify-content:center}
.peak-event-post .header-cell.name-col,.peak-event-post .table-cell.name-col{width:120px}
.peak-event-post .header-cell.phone-col,.peak-event-post .table-cell.phone-col{width:160px}
.peak-event-post .header-cell.status-col,.peak-event-post .table-cell.status-col{width:140px}
.peak-event-post .header-cell.date-col,.peak-event-post .table-cell.date-col{width:140px}
.peak-event-post .product-name{font-size:15px;font-weight:600;color:#1C1C1C;margin-bottom:4px}
.peak-event-post .product-option{font-size:13px;color:#8D8D8D}
.peak-event-post .name-text,.peak-event-post .phone-text,.peak-event-post .date-text{font-size:15px;color:#1C1C1C;font-weight:400}
.peak-event-post .status-text{font-size:15px;font-weight:500}
.peak-event-post .status-text.status-0,.peak-event-post .status-text.status-1{color:#1C1C1C}
.peak-event-post .status-text.status-2,.peak-event-post .status-text.status-5{color:#CD2E3A}
.peak-event-post .status-text.status-4{color:#FF8C00}
.peak-event-post .status-text.status-3{color:#06BF5C}
.peak-event-post .table-empty{padding:60px 20px;text-align:center;color:#8D8D8D;font-size:15px;border-bottom:1px solid #F3F3F3}
@media (max-width:720px){
.peak-event-post .table-header{display:none}
.peak-event-post .table-row{display:flex;flex-wrap:wrap;height:auto;padding:14px 16px;border:1px solid #E5E5E5;border-radius:6px;margin-bottom:10px}
.peak-event-post .table-cell{width:100% !important;justify-content:flex-start;padding:4px 0}
.peak-event-post .table-cell.country-col{width:40px !important}
}
/* 이벤트 신청 현황 - 이벤트(랜딩페이지) 탭 7컬럼 */
.peak-event-post .tab-event-table .header-cell.title-col,.peak-event-post .tab-event-table .table-cell.title-col{flex:1;justify-content:flex-start}
.peak-event-post .tab-event-table .header-cell.name-col,.peak-event-post .tab-event-table .table-cell.name-col{width:110px}
.peak-event-post .tab-event-table .header-cell.phone-col,.peak-event-post .tab-event-table .table-cell.phone-col{width:160px}
.peak-event-post .tab-event-table .header-cell.time-col,.peak-event-post .tab-event-table .table-cell.time-col{width:110px}
.peak-event-post .tab-event-table .header-cell.marketing-col,.peak-event-post .tab-event-table .table-cell.marketing-col{width:130px}
.peak-event-post .tab-event-table .header-cell.date-col,.peak-event-post .tab-event-table .table-cell.date-col{width:130px}
.peak-event-post .marketing-text{font-size:15px;font-weight:500}
.peak-event-post .marketing-text.marketing-1{color:#1C1C1C}
.peak-event-post .marketing-text.marketing-0{color:#8D8D8D}
.peak-event-post .time-text{font-size:15px;color:#1C1C1C}
/* 이벤트 목록 (병원/이벤트 탭 + 활성화 dropdown) */
.peak-event-list .event-tab-row{display:flex;gap:8px;margin-bottom:24px}
.peak-event-list .event-tab-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 26px;border-radius:8px;border:1px solid #F0F0F0;background:#fff;color:#8D8D8D;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:all .15s}
.peak-event-list .event-tab-btn:hover{background:#FAFAFA}
.peak-event-list .event-tab-btn.active{background:#FF4E7A;border-color:#FF4E7A;color:#fff;font-weight:600}
.peak-event-list .table-header,.peak-event-list .table-row{display:flex;align-items:center}
.peak-event-list .table-header{height:56px;background:#FAFAFA;font-weight:700;color:#1C1C1C;border-bottom:1px solid #E5E5E5}
.peak-event-list .table-row{height:80px;border-bottom:1px solid #F3F3F3}
.peak-event-list .header-cell,.peak-event-list .table-cell{padding:0 12px;display:flex;align-items:center}
.peak-event-list .header-cell.country-col,.peak-event-list .table-cell.country-col{width:120px;justify-content:center}
.peak-event-list .header-cell.product-col,.peak-event-list .table-cell.product-col{flex:1}
.peak-event-list .header-cell.status-col,.peak-event-list .table-cell.status-col{width:200px;justify-content:flex-end}
.peak-event-list .product-name{font-size:15px;color:#1C1C1C;font-weight:400}
/* 배송 조회 버튼 + 모달 */
.peak-order-view .btn-tracking{height:36px;padding:0 16px;border-radius:8px;background:#fff;border:1px solid #FF779A;color:#FF779A;font-size:13px;font-weight:600;cursor:pointer;margin-left:auto}
.peak-order-view .btn-tracking:hover{background:#FFF5F8}
.tracking-modal{position:fixed;inset:0;z-index:10000}
.tracking-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.tracking-modal-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:560px;max-width:calc(100vw - 32px);max-height:80vh;background:#fff;border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.tracking-modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid #EFEFEF}
.tracking-modal-head h3{margin:0;font-size:17px;font-weight:700}
.btn-tracking-close{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:#999}
.tracking-modal-body{padding:20px 24px;overflow-y:auto}
.tracking-summary > div{padding:4px 0;font-size:14px;color:#1C1C1C}
.tracking-summary strong{color:#8D8D8D;font-weight:500;margin-right:8px}
.tracking-loading{padding:30px 0;text-align:center;color:#8D8D8D}
.tracking-table{width:100%;border-collapse:collapse;margin-top:14px}
.tracking-table th,.tracking-table td{padding:10px 8px;font-size:13px;text-align:left;border-bottom:1px solid #F3F3F3}
.tracking-table th{background:#FAFAFA;color:#1C1C1C;font-weight:600}
.se-component figure{margin:0 auto;}
@media (max-width: 720px){
._review .card-image{height:auto}
}
/* ═══════════════════════════════════════════════════════════════
상단 헤더 밀도 조정 (데스크톱 전용) — beaupeak_EN/index.html 시안 적용
기존: 헤더 184px(상단 회색바 44 + 네비 140), .nav-item 이 position:absolute +
left 고정폭(130~150px)이라 메뉴 간격이 과하게 벌어져 있었다.
조치: ① 회색 상단바를 숨기고 로그인 버튼을 메뉴 줄 우측으로
② .nav-item 을 relative 로 바꿔 flex gap 이 먹도록
③ 헤더 높이 축소에 맞춰 body padding-top 재계산
모바일(720px 이하)은 기존 레이아웃을 그대로 둔다.
═══════════════════════════════════════════════════════════════ */
@media (min-width: 721px){
/* ── 상단 회색바 제거 ── (마크업은 남기고 숨기기만 — 롤백은 이 블록만 삭제) */
.top-nav .top-bar{display:none !important}
/* ── 헤더 높이 축소 ── */
.main-nav{padding:12px 0 !important}
.nav-content{gap:48px !important;align-items:center !important}
.nav-content .logo,
.nav-content .logo img{width:48px !important;height:48px !important}
/* ── 메뉴: absolute 고정폭 → relative + gap ── */
.main-nav .nav-menu{width:auto !important;justify-content:flex-start !important;gap:6px !important}
.main-nav .nav-item{
position:relative !important;left:unset !important;right:unset !important;
width:auto !important;padding:8px 16px !important;
}
.main-nav .nav-text{font-size:15px !important}
/* ── 로그인 버튼: 메뉴 줄 우측 끝 (아웃라인 필) ── */
.main-nav .nav-content > .login-section{
margin-left:auto !important;display:flex !important;align-items:center !important;flex:0 0 auto !important;
}
.main-nav .nav-content > .login-section .login-text{
-webkit-appearance:none;appearance:none;
background:#fff !important;border:1px solid #D9D9D9 !important;border-radius:999px !important;
height:32px !important;padding:0 16px !important;
display:inline-flex !important;align-items:center !important;justify-content:center !important;
font-family:inherit !important;font-size:12px !important;font-weight:600 !important;
letter-spacing:.04em !important;line-height:1 !important;color:#374151 !important;
cursor:pointer !important;white-space:nowrap !important;text-decoration:none !important;
transition:background .15s, border-color .15s, color .15s;
}
.main-nav .nav-content > .login-section .login-text:hover{
background:#111827 !important;border-color:#111827 !important;color:#fff !important;
}
/* ── 로그인 상태: 계정정보 + 마이페이지를 로그아웃 '왼쪽'에 한 줄로 ──
.peak-mypage 는 position:absolute; right:0 이고,
로그아웃 버튼(.login-section._pc)은 문서 흐름에 있어 둘 다 우측 끝(x1200)에서 끝난다.
→ 서로 89px 겹쳤다(측정값). 두 블록은 별개 레이어라 flex 로는 못 붙인다.
계정정보 블록을 로그아웃 버튼 폭 + 간격만큼 왼쪽으로 밀고,
세로 중심도 버튼(height 32px)에 맞춰 같은 라인으로 만든다. */
.main-nav .nav-content > .login-section{
position:relative !important;z-index:2 !important; /* 겹치더라도 버튼이 위 */
}
.main-nav .nav-content .peak-mypage{
/* 로그아웃 버튼 폭은 언어마다 다르다(측정: EN 89 / KR 77.4 / JP 92.7px).
가장 넓은 JP 기준 + 여유로 잡아 어느 언어에서도 겹치지 않게 한다. */
--bp-logout-w:100px;
--bp-logout-gap:16px;
right:calc(var(--bp-logout-w) + var(--bp-logout-gap)) !important;
top:50% !important;transform:translateY(-50%) !important;
align-items:center !important;
max-width:calc(100% - var(--bp-logout-w) - var(--bp-logout-gap) - 220px) !important;
}
/* 이름이 길면 버튼을 밀지 않고 말줄임 */
.main-nav .nav-content .peak-mypage > span{min-width:0 !important;overflow:hidden !important}
.main-nav .nav-content .peak-mypage small{
overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
}
.main-nav .nav-content .peak-mypage a{white-space:nowrap !important}
/* ── 헤더가 fixed 라 본문을 그만큼 내려준다 (회색바 제거분 반영) ── */
body{padding-top:72px !important}
.home-page{margin-top:0 !important}
}
/* 모바일에서는 데스크톱용 로그인 버튼을 숨긴다 (기존 .peak-mypage 사용) */
@media (max-width: 720px){
.login-section._pc{display:none !important}
}
/* ═══════════════════════════════════════════════════════════════
푸터 — beaupeak_EN/index.html 시안 적용
구조: 1층(로고·이동링크·문의버튼) / 2층(약관·카피라이트, 회색 띠)
기존 .footer 규칙(beau.css)이 남아 있으므로 여기서 덮어쓴다.
═══════════════════════════════════════════════════════════════ */
.bp-footer{
--bp-cw:1440px; --bp-cpad:20px;
background:#FFFFFF;border-top:1px solid #E8EAEE;
/* 기존 .footer 의 배경/여백 무력화 */
padding:0 !important;margin:0 !important;
}
.bp-footer, .bp-footer *, .bp-footer *::before, .bp-footer *::after{box-sizing:border-box}
.bp-footer a{color:inherit;text-decoration:none}
.bp-footer a:focus-visible,
.bp-footer button:focus-visible{outline:2px solid #FF709A;outline-offset:3px;border-radius:3px}
/* ── 1층 ── */
.bp-footer .bp-top{
max-width:calc(var(--bp-cw) + var(--bp-cpad) * 2);
margin:0 auto;padding:30px var(--bp-cpad);
display:flex;align-items:center;gap:40px;
}
.bp-footer .bp-mark{flex:0 0 auto;display:block;line-height:0}
.bp-footer .bp-mark img{width:140px;height:auto;display:block}
.bp-footer .bp-links{display:flex;align-items:center;gap:26px;flex:1 1 auto;flex-wrap:wrap}
.bp-footer .bp-links a{font-size:14px;color:#4B5563}
.bp-footer .bp-links a:hover{color:#111827}
.bp-footer .bp-contact{
display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
height:38px;padding:0 15px;
border:1px solid #E8EAEE;border-radius:999px;
font-size:13px;font-weight:600;color:#111827;background:#FFFFFF;
transition:border-color .15s, background .15s;
}
.bp-footer .bp-contact:hover{border-color:#C9CDD4;background:#FCFCFD}
.bp-footer .bp-glyph{width:17px;height:17px;flex:0 0 auto;display:block;color:#25D366}
.bp-footer .bp-glyph svg{width:100%;height:100%;display:block}
/* 카카오 아이콘은 흰색 도안이라 흰 배경에서 안 보인다 → 브랜드 컬러 칩 위에 올린다 */
.bp-footer .bp-glyph-kakao{
width:18px;height:18px;border-radius:5px;background:#FEE500;
display:flex;align-items:center;justify-content:center;
}
.bp-footer .bp-glyph-kakao img{width:13px;height:13px;display:block}
/* ── 2층 ── */
.bp-footer .bp-bottom{background:#FAFAFB;border-top:1px solid #E8EAEE}
.bp-footer .bp-bottom-in{
max-width:calc(var(--bp-cw) + var(--bp-cpad) * 2);
margin:0 auto;padding:18px var(--bp-cpad);
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.bp-footer .bp-legal{display:flex;align-items:center;flex-wrap:wrap}
.bp-footer .bp-legal button{
border:0;background:none;padding:0;cursor:pointer;
font-family:inherit;font-size:12.5px;color:#4B5563;
}
.bp-footer .bp-legal button:hover{color:#111827;text-decoration:underline}
.bp-footer .bp-legal button.bp-strong{font-weight:600;color:#111827}
.bp-footer .bp-sep{color:#D6DAE0;padding:0 10px;font-size:12px}
.bp-footer .bp-copy{font-size:12.5px;color:#9CA3AF}
@media (max-width:720px){
.bp-footer .bp-top{flex-direction:column;align-items:stretch;gap:20px;padding:26px 20px 24px}
.bp-footer .bp-links{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.bp-footer .bp-contact{width:100%;justify-content:center}
.bp-footer .bp-bottom-in{padding:16px 20px 20px;flex-direction:column;align-items:flex-start;gap:10px}
.bp-footer .bp-legal{row-gap:8px}
}
/* ═══════════════════════════════════════════════════════════════
병원 상세 — 섹션 탭(세그먼트) : beaupeak_EN/goat.html 시안 적용
기존: 아이콘 + 넓게 퍼진 링크, 선택 항목만 채운 핑크 알약
변경: 회색 트랙 위에 흰 알약이 올라가는 세그먼트 컨트롤
※ 활성 클래스는 .active 가 아니라 .on 이다(기존 마크업 유지)
═══════════════════════════════════════════════════════════════ */
/* 병원명(h1)이 가운데라 탭도 가운데로 축을 맞춘다.
.medi-info div{justify-content:center} 는 자식이 flex 아이템일 때만 먹는데
.bp-seg 는 그 자신이 컨테이너라, width:fit-content + auto 마진으로 직접 가운데 정렬한다. */
.medi-info .bp-seg{
display:flex;align-items:center;gap:2px;flex-wrap:nowrap;
width:fit-content;background:#F0F1F3;border-radius:999px;padding:4px;box-sizing:border-box;
margin-left:auto;margin-right:auto;
}
.medi-info .bp-seg a.tab-link.bp-seg-btn,
.medi-info .bp-seg .bp-seg-btn{
position:static;float:none;width:auto;min-width:0;max-width:none;height:auto;margin:0;
display:inline-flex;align-items:center;justify-content:center;
background:none;border:0;border-radius:999px;box-shadow:none;
font-family:inherit;font-size:14.5px;font-weight:600;line-height:1.2;letter-spacing:0;
color:#4B5563;text-decoration:none;padding:12px 24px;white-space:nowrap;cursor:pointer;
transition:background .13s, color .13s;
}
.medi-info .bp-seg .bp-seg-btn::before,
.medi-info .bp-seg .bp-seg-btn::after{content:none;display:none}
.medi-info .bp-seg .bp-seg-btn img{display:none} /* 아이콘 미사용 */
.medi-info .bp-seg .bp-seg-btn:hover{color:#111827}
.medi-info .bp-seg a.tab-link.bp-seg-btn.on,
.medi-info .bp-seg .bp-seg-btn.on{
background:#FFFFFF;color:#FF709A;box-shadow:0 1px 2px rgba(17,24,39,.10);
}
.medi-info .bp-seg a.tab-link.bp-seg-btn:hover{background:none;color:#111827}
.medi-info .bp-seg a.tab-link.bp-seg-btn.on:hover{background:#FFFFFF;color:#FF709A}
.medi-info .bp-seg .bp-seg-btn:focus-visible{outline:2px solid #FF709A;outline-offset:2px}
/* 세그먼트 탭 ↔ 하위 탭(.medi-one) 간격 — 위계가 보이도록 40px 로 좁힌다 */
.medi-info{margin-bottom:0;padding-bottom:0}
.medical-box{margin-top:0;padding-top:0}
.medical-box > .medi-box{margin-top:0;padding-top:0}
.medi-one{margin-top:40px}
/* 하위 탭(.medi-one)이 없는 탭은 위 규칙에 걸려 여백이 0이 된다.
→ 탭 버튼과 목록이 맞붙어 보이므로 같은 40px 을 준다. */
.medical-box > .medi-box._review{padding-top:40px}
@media (max-width: 720px){
/* 탭이 4~5개라 한 줄에 넣으면 라벨이 잘린다 → 2열 격자 */
.medi-info .bp-seg{
display:grid;grid-template-columns:1fr 1fr;gap:2px;width:100%;border-radius:14px;
}
.medi-info .bp-seg a.tab-link.bp-seg-btn,
.medi-info .bp-seg .bp-seg-btn{
flex:none;width:auto;padding:10px 6px;font-size:12.5px;border-radius:12px;height:auto;line-height:1.2;
}
.medi-one{margin-top:28px}
.medical-box > .medi-box._review{padding-top:28px}
}
/* ═══════════════════════════════════════════════════════════════
뷰픽딜 상세 — beaupeak_EN/deal-detail.html 시안 적용
① 썸네일 축소(1434px 2단 → 1120px, 썸네일 480px)
② 썸네일↔제목 간격 축소
③ 셀렉트 박스 재디자인(높이 54px, 라운드 12px, 화살표 CSS 로 그림)
④ 버튼 라운드·그림자 조정
⑤ 상단 블록과 상세내용 사이 구분선 추가
언어 공통이다 — 기존 신청 버튼 CSS 는 apply_mode 안에만 있어 KR 에 안 걸렸다.
═══════════════════════════════════════════════════════════════ */
@media (min-width: 901px){
.detail-content.deal{max-width:1120px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.detail-content.deal .deal-info{width:auto;max-width:none;margin:0;padding:0 20px}
/* 썸네일 480px 고정 + 남는 폭은 옵션 칸 */
.detail-content.deal .deal-title{
display:grid;grid-template-columns:minmax(0,480px) minmax(400px,1fr);
gap:56px;align-items:start;justify-content:start;
width:auto;max-width:100%;margin:0 0 40px;
}
.detail-content.deal .deal-title > div:first-child{width:100%;max-width:480px;min-width:0;margin:0}
.detail-content.deal .deal-option{width:100%;max-width:560px;min-width:0}
}
.detail-content.deal .deal-title img.change{
width:100%;height:auto;display:block;border-radius:14px;background:#F2F4F6;
object-fit:cover;object-position:top center;
}
/* 제목 · 마감 배지 — 썸네일과의 간격을 좁힌다 */
.detail-content.deal .deal-title-box{margin:0 0 26px;padding:0}
.detail-content.deal .deal-title-box h1{
font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.35;margin:0 0 14px;color:#111827;
}
.detail-content.deal .deal-title-box > div{
display:flex;align-items:center;flex-wrap:wrap;gap:8px;
font-size:13.5px;color:#6B7280;margin-top:0;padding-left:28px;font-weight:400;
/* 시계 아이콘(배경) 세로 가운데 정렬.
기존 background-position 이 '0 3px' 로 고정돼 있어, 줄 높이(20.3px)보다
아이콘(20px)이 3px 아래에서 시작 → 하단이 잘리고 글자와도 어긋났다.
center 로 바꾸고 최소 높이를 아이콘 크기 이상으로 확보한다. */
background-position:0 center;
min-height:22px;
}
.detail-content.deal .deal-title-box > div strong{
font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#9CA3AF;
}
.detail-content.deal .deal-title-box > div span{
display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;
background:#FFF0F5;color:#D63C6D;font-size:13px;font-weight:700;letter-spacing:-.1px;margin-right:0;
}
/* 옵션 셀렉트 — 이미지 화살표 대신 CSS 로 그린다 */
.detail-content.deal .custom-select{position:relative;margin:0 0 12px;padding:0;font-size:15px}
.detail-content.deal .custom-select .selected{
display:flex;align-items:center;justify-content:space-between;
height:54px;padding:0 16px;line-height:1.2;cursor:pointer;
border:1px solid #E1E4E9;border-radius:12px;background:#fff;
font-size:15px;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.detail-content.deal .custom-select .selected::after{
content:'';width:8px;height:8px;margin-left:12px;flex:0 0 auto;
border-right:2px solid #9CA3AF;border-bottom:2px solid #9CA3AF;
transform:rotate(45deg) translateY(-2px);transition:transform .15s;
}
.detail-content.deal .custom-select .selected.on{
background:#fff;border-color:#FF709A;border-radius:12px;
}
.detail-content.deal .custom-select .selected.on::after{transform:rotate(-135deg) translateY(2px)}
.detail-content.deal .custom-select .options{
position:absolute;left:0;right:0;top:calc(100% + 6px);width:auto;max-width:none;
z-index:20;list-style:none;margin:0;padding:6px;
background:#fff;border:1px solid #E1E4E9;border-radius:12px;
box-shadow:0 12px 28px -14px rgba(17,24,39,.22);
}
.detail-content.deal .custom-select .options li{
box-sizing:border-box;display:flex;align-items:center;
min-height:44px;height:auto;line-height:1.4;margin:0;padding:0 12px;
border:0;border-radius:8px;background:transparent;
font-size:14.5px;color:#374151;cursor:pointer;
white-space:normal;overflow:visible;text-overflow:clip;
}
.detail-content.deal .custom-select .options li:hover{background:#F6F7F9;color:#111827}
.detail-content.deal .custom-select .options li:last-child{border-radius:8px}
/* ── 선택된 옵션 줄 (beaupeak_EN/deal-detail.html 시안) ──────────
beau.js 가 .deal-select 안에 만들어 넣는 줄이라 마크업을 미리 잡을 수 없다.
태그가 아니라 '자식 순서·역할'로 잡는다:
span=상품명 / a=수량조절 / input=수량 / strong=가격 / button=삭제
기존 스타일은 회색(#FAFAFA) 배경 + 아래 실선 + 삭제버튼 absolute(right:20px)
구조라 시안의 '흰 카드' 형태와 전혀 달랐다. 여기서 전부 덮어쓴다. */
.detail-content.deal .deal-select:empty{display:none}
.detail-content.deal .deal-select{
width:100%;max-width:100%;min-width:0;
margin:14px 0 0;padding:0;background:none;border:0;position:static;
}
/* 줄 하나 = 흰 카드 */
.detail-content.deal .deal-select > div{
box-sizing:border-box;
display:flex;align-items:center;gap:10px;
width:100%;max-width:100%;min-width:0;height:auto;
margin:0 0 8px;padding:12px 12px 12px 14px;
background:#FFFFFF;
border:1px solid #E9EBEF;border-bottom:1px solid #E9EBEF;border-radius:12px;
font-size:13.5px;color:#111827;justify-content:flex-start;
}
/* 첫 줄에 붙던 위쪽 굵은 선·여백 제거 (카드형에는 불필요) */
.detail-content.deal .deal-select > div:nth-child(1){margin-top:0;border-top:1px solid #E9EBEF}
.detail-content.deal .deal-select > div:last-child{margin-bottom:0}
/* 상품명 — 남는 폭을 쓰고 길면 말줄임 */
.detail-content.deal .deal-select > div > span{
flex:1 1 auto;min-width:0;width:auto;margin-right:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:13.5px;color:#4B5563;
}
/* 수량 조절(-/+) */
.detail-content.deal .deal-select > div a{
flex:0 0 auto;
width:30px;height:30px;padding:0;
display:inline-flex;align-items:center;justify-content:center;
border:0;border-radius:8px;
background:#FFFFFF;color:#4B5563;
font-size:15px;line-height:1;cursor:pointer;
}
.detail-content.deal .deal-select > div a:hover{color:#111827}
.detail-content.deal .deal-select > div input{
flex:0 0 auto;width:28px;font-size:14px;color:#111827;
}
/* 가격 — 오른쪽으로 밀어 붙인다 */
.detail-content.deal .deal-select > div strong{
flex:0 0 auto;margin-left:auto;margin-right:0;min-width:0;
font-size:14px;font-weight:700;color:#111827;
font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;
}
/* 삭제 버튼 — absolute 를 걷어내고 줄 끝에 자연스럽게 배치 */
.detail-content.deal .deal-select > div button{
position:static;flex:0 0 auto;
width:30px;height:30px;padding:0;line-height:1;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid #E1E4E9;border-radius:8px;background:#FFFFFF;
box-shadow:none;cursor:pointer;
}
.detail-content.deal .deal-select > div button:hover{border-color:#C9CDD4}
/* 아이콘을 휴지통 → X 로. 이미지는 beau.js 가 넣으므로 CSS 로 감추고 글리프를 그린다
(JS 를 고치면 .deal-select 를 쓰는 다른 화면까지 바뀐다) */
.detail-content.deal .deal-select > div button img{display:none}
.detail-content.deal .deal-select > div button::before{
content:'\00D7';font-size:18px;line-height:1;color:#9CA3AF;font-weight:400;
}
.detail-content.deal .deal-select > div button:hover::before{color:#4B5563}
/* 구매/신청 버튼 — 라운드 + 그림자 (언어 공통) */
/* 기존 .deal-total{margin-top:60px} + .deal-total div{margin-top:87px} 이 겹쳐
셀렉트와 금액줄 사이가 크게 벌어져 있었다 → 시안 간격으로 좁힌다. */
.detail-content.deal .deal-total{margin:20px 0 0;padding:0}
.detail-content.deal .deal-total > div{margin-top:0;margin-bottom:16px;height:auto}
.detail-content.deal .deal-option .btn-deal-pay,
.detail-content.deal .deal-option .btn-deal-pay-off{
width:100%;height:56px;border:0;border-radius:12px;
background:#FF709A;color:#fff;font-size:16px;font-weight:700;letter-spacing:-.1px;
cursor:pointer;box-shadow:0 6px 16px rgba(255,112,154,.28);
transition:background .15s, box-shadow .15s;
}
.detail-content.deal .deal-option .btn-deal-pay:hover:not(:disabled){background:#F85D8B}
.detail-content.deal .deal-option .btn-deal-pay:disabled{
background:#F6C6D5;box-shadow:none;cursor:not-allowed;opacity:1;
}
/* 버튼 안 수량 배지 — beau.js 가 span 에 개수를 넣는데, 모바일 규칙(964~965줄)이
이걸 display:flex 로 되살려 버튼에 "1" 만 크게 찍혔다. 시안은 라벨만 보인다.
→ 언어·화면폭 무관하게 배지를 감춘다. (span 자체는 JS 가 쓰므로 지우지 않는다) */
.detail-content.deal .deal-option .btn-deal-pay span,
.detail-content.deal .deal-option .btn-deal-pay:disabled span{display:none}
/* 모바일에서 버튼이 검정으로 바뀌던 규칙도 시안 핑크로 되돌린다 */
.detail-content.deal .deal-option .btn-deal-pay{background:#FF709A}
/* ⑤ 상단 블록(썸네일·제목·옵션) ↔ 상세내용 사이 구분선
.detail-main 이 .deal-info 안에 있어 .deal-info 에 border 를 주면 맨 아래로 간다.
→ 상세내용 블록의 위쪽에 선을 그어 둘 사이를 가른다. */
.detail-content.deal .detail-main{
border-top:1px solid #E8EAEE;margin-top:50px;padding-top:50px;
}
/* ⑥ 상세내용 ↔ 풋터 사이 여백
상세 이미지가 끝나자마자 바로 풋터가 붙어 답답했다. 시안 간격으로 띄운다. */
.detail-content.deal .detail-main{padding-bottom:80px}
@media (max-width: 900px){
.detail-content.deal .deal-title{margin-bottom:28px}
.detail-content.deal .deal-title-box h1{font-size:21px}
.detail-content.deal .detail-main{margin-top:28px;padding-top:28px;padding-bottom:56px}
.detail-content.deal .deal-option .btn-deal-pay,
.detail-content.deal .deal-option .btn-deal-pay-off{height:54px;font-size:15px}
/* 선택 옵션 줄 — 좁은 폭 보정 */
.detail-content.deal .deal-select > div{padding:11px 10px 11px 12px;gap:8px;font-size:13px;height:auto}
.detail-content.deal .deal-select > div a,
.detail-content.deal .deal-select > div button{width:28px;height:28px}
.detail-content.deal .deal-select > div button{background:#FFFFFF;border:1px solid #E1E4E9}
/* 모바일도 X 글리프 유지 (기존 규칙이 휴지통 이미지를 되살리던 것을 막는다) */
.detail-content.deal .deal-select > div button img{display:none}
.detail-content.deal .deal-select{padding:0}
}
/* ═══════════════════════════════════════════════════════════════
정렬 컨트롤 — beaupeak_EN/sort_control_mockup.html 제안 적용
기존: 활성만 솔리드 핑크 박스, 나머지는 맨 글자 → "버튼 하나 + 링크 둘"로 읽힘
제안: 회색 트랙에 셋을 묶고 활성만 흰 알약 + 핑크 글자
(병원 상세 섹션 탭과 같은 언어 → 화면 전체가 일관됨)
클래스는 병기다. sort-btn/active 는 JS·라우팅용이라 그대로 두고
디자인은 bp-seg / bp-seg-btn 으로만 통제한다.
═══════════════════════════════════════════════════════════════ */
.sort-buttons.bp-seg{
display:inline-flex;align-items:center;gap:2px;flex-wrap:nowrap;
width:auto;background:#F0F1F3;border-radius:999px;padding:3px;box-sizing:border-box;
}
.sort-buttons.bp-seg .bp-seg-btn{
position:static;float:none;width:auto;min-width:0;max-width:none;height:auto;margin:0;
display:inline-flex;align-items:center;justify-content:center;
background:none;border:0;border-radius:999px;box-shadow:none;
font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;letter-spacing:0;
color:#4B5563;text-decoration:none;padding:8px 15px;white-space:nowrap;cursor:pointer;
transition:background .13s, color .13s;
}
.sort-buttons.bp-seg .bp-seg-btn:hover{background:none;color:#111827}
.sort-buttons.bp-seg .bp-seg-btn.active{
background:#FFFFFF;color:#FF709A;box-shadow:0 1px 2px rgba(17,24,39,.10);
}
.sort-buttons.bp-seg .bp-seg-btn.active:hover{background:#FFFFFF;color:#FF709A}
.sort-buttons.bp-seg .bp-seg-btn:focus-visible{outline:2px solid #FF709A;outline-offset:2px}
@media (max-width: 720px){
/* 모바일에서는 회색 트랙이 한 줄을 꽉 채우고 셋을 균등 분할한다.
(영문 라벨 길이가 제각각이라 내용 폭대로 두면 들쭉날쭉해진다.)
주의 — 기존 모바일 규칙과 충돌 지점이 두 군데 있다.
1) .sort-buttons 에 padding:0 21px 이 걸려 있어 그대로 두면
회색 트랙 '안쪽'에 21px 여백이 생긴다. → padding 은 3px 로 되돌리고
좌우 여백은 margin 으로 빼서 목록(21px)과 축을 맞춘다.
2) 부모 .controls-search 가 display:flex 라, 트랙에 width:auto 만 주면
내용 폭으로 줄어들어(shrink-to-fit) 라벨이 잘린다.
→ 트랙을 block 으로 만들어 부모 폭을 그대로 상속받게 한다. */
.controls-search{display:block}
.sort-buttons.bp-seg{
display:flex;box-sizing:border-box;
width:auto;margin:0 21px;padding:3px;
justify-content:space-between;
}
/* 기존 .sort-btn 모바일 규칙(min-width:62.8px, padding:0 10px, height 고정)이
flex 분배와 충돌해 라벨이 서로 붙는다 → 여기서 전부 덮어쓴다. */
.sort-buttons.bp-seg .sort-btn.bp-seg-btn,
.sort-buttons.bp-seg .bp-seg-btn{
flex:1 1 0;min-width:0;width:auto;
display:flex;align-items:center;justify-content:center;
padding:8px 4px;text-align:center;white-space:nowrap;
font-size:12px;height:auto;line-height:1.2;
}
}
/* ═══════════════════════════════════════════════════════════════
리뷰작성 플로팅 버튼 — beaupeak_EN/review.html 시안
기존에는 '리뷰작성' 글자가 review_write.png 안에 박혀 있어 번역이 불가능했다.
이미지를 걷어내고 아이콘(SVG) + 글자를 직접 그린다.
═══════════════════════════════════════════════════════════════ */
.btn-review.bp-rv{
/* 기존 .btn-review 는 width/height 65px 에 bottom:106px(=MBTI 위) 고정.
여기서 크기·모양만 다시 잡고, 세로 위치는 아래 규칙에서 언어별로 정한다. */
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
width:64px;height:64px;border-radius:18px;
background:#FF709A;color:#fff;text-decoration:none;
box-shadow:0 8px 20px -6px rgba(255,112,154,.55);
font-family:inherit;
transition:background .15s, transform .12s;
}
.btn-review.bp-rv:hover{background:#F85D8B}
.btn-review.bp-rv:active{transform:translateY(1px)}
.btn-review.bp-rv:focus-visible{outline:2px solid #FF709A;outline-offset:3px}
/* 아이콘만 (병원상세 시술후기 탭) — 글자가 빠진 만큼 아이콘을 키운다 */
.btn-review.bp-rv.bp-rv-ico-only{gap:0}
.btn-review.bp-rv.bp-rv-ico-only .bp-rv-txt{display:none}
.btn-review.bp-rv.bp-rv-ico-only .bp-rv-ico,
.btn-review.bp-rv.bp-rv-ico-only .bp-rv-ico svg{width:26px;height:26px}
.bp-rv-ico{display:block;width:20px;height:20px;color:#fff}
.bp-rv-ico svg{width:20px;height:20px;display:block}
.bp-rv-txt{
display:block;
font-size:10.5px;font-weight:700;letter-spacing:-.1px;line-height:1;color:#fff;
white-space:nowrap;
}
/* 한국어 외에는 MBTI 위젯이 없다 → 비어 있는 그 자리(우하단 최하단)로 내린다.
(한국어는 기존대로 MBTI 위 106px 을 유지) */
.btn-review.bp-rv.bp-rv-solo{bottom:24px}
@media (max-width: 720px){
.btn-review.bp-rv{
width:58px;height:58px;border-radius:16px;
right:20px;bottom:100px;
}
.btn-review.bp-rv.bp-rv-solo{bottom:20px}
.bp-rv-ico, .bp-rv-ico svg{width:19px;height:19px}
.btn-review.bp-rv.bp-rv-ico-only .bp-rv-ico,
.btn-review.bp-rv.bp-rv-ico-only .bp-rv-ico svg{width:24px;height:24px}
.bp-rv-txt{font-size:10px}
}
/* ═══════════════════════════════════════════════════════════════
딜 상세 — 모바일 옵션 바텀시트
(시안: 딜 상세 바텀시트 — 모바일 수정안.html)
데스크톱은 건드리지 않는다 — 아래 미디어쿼리 안에서만 손댄다.
═══════════════════════════════════════════════════════════════ */
/* 옵션 헤더는 모바일 시트 전용 — 데스크톱에서는 숨긴다 */
.bp-sheet-head{display:none;}
/* 시트 그립도 모바일 전용 */
.bp-sheet-grip{display:none;}
@media (max-width: 720px){
/* 시트를 화면 폭에 맞춘다 + 홈 인디케이터 대응 */
.deal-opt1.on .deal-opt2{
left:0;right:0;width:100%;max-width:none;margin:0;
border-radius:16px 16px 0 0;
padding:0 0 calc(14px + env(safe-area-inset-bottom, 0px));
box-shadow:0 -2px 16px rgba(0,0,0,.10);
}
/* 그립 핸들 — 눌러서 닫는다 */
.deal-opt1.on .bp-sheet-grip::before{
content:'';display:block;
width:34px;height:4px;border-radius:99px;
background:#DDE0E5;margin:9px auto 4px;
}
/* 옵션 헤더 — '옵션선택' + [필수] 배지
닫기(X)가 right:10px/top:10px 에 절대배치돼 있어 배지와 겹친다 →
배지 자리를 X 왼쪽으로 비워둔다. */
.deal-opt1.on .bp-sheet-head{
display:flex;justify-content:space-between;align-items:center;
padding:6px 16px 0;
}
/* 닫기(X) 제거 — 그립 핸들을 눌러서 닫는다 */
.deal-opt1.on .btn-deal-close{display:none;}
/* 그립을 누를 수 있게 클릭 영역을 만든다 (핸들 자체는 ::before 로 그림) */
.deal-opt1.on .bp-sheet-grip{
display:block;width:100%;height:22px;border:0;padding:0;margin:0;
background:transparent;cursor:pointer;
}
.deal-opt1.on .bp-sheet-title{font-size:14px;font-weight:600;color:#16181D;}
.deal-opt1.on .bp-req-badge{
font-size:11px;font-weight:600;color:#E8577F;
background:#FDEEF3;padding:2px 7px;border-radius:99px;
}
/* 내부 좌우 여백을 16px 로 통일 (선택박스·옵션줄·버튼) */
.deal-opt1.on .custom-select{padding:10px 16px 0;margin-bottom:14px;}
.deal-opt1.on .deal-select{padding:0 16px;}
/* .detail-content.deal ... 규칙(width:100%)이 더 구체적이라 같은 수준으로 잡아야 이긴다 */
.detail-content.deal .deal-option .btn-deal-pay,
.detail-content.deal .deal-option .btn-deal-pay-off,
.deal-option .btn-deal-pay,
.deal-option .btn-deal-pay-off{width:calc(100% - 32px);margin:0 auto;}
/* 합계 — 테두리 상자를 걷어내고 구분선 한 줄로.
옵션(입력)과 합계(결과)가 같은 상자 모양이면 위계가 사라진다. */
.deal-total > div{
display:flex;justify-content:space-between;align-items:baseline;
padding:16px 16px 12px;margin:14px 0 0;width:auto;
border:0;border-top:1px solid #F0F1F3;border-radius:0;
}
.deal-total span{font-size:13px;color:#4A4F58;}
.deal-total strong{font-size:18px;font-weight:700;color:#16181D;letter-spacing:-.01em;}
.deal-total .deal-cur{font-size:12px;font-weight:600;color:#868C96;margin-left:3px;}
.deal-option .bp-deal-hint{padding:0 16px;}
}
/* 글 상세의 댓글 작성 박스가 푸터에 붙어 보여 아래 여백을 준다.
모바일은 화면이 좁아 그대로 둔다. */
@media (min-width: 721px){
.comment-form{margin-bottom:50px}
}
/* ══════════════════════════════════════════════════════════
에디터 페이지 (/editor, /editor/{id}) · 마이페이지 에디터 목록
시안 기준: PC 콘텐츠 폭 1200, 모바일 390
══════════════════════════════════════════════════════════ */
.ed-page{max-width:1200px;margin:0 auto;padding:40px 20px 80px}
.ed-head{text-align:center;margin:24px 0 40px}
.ed-h1{font-size:32px;font-weight:700;color:#1c1c1c;margin:0 0 8px}
.ed-sub{font-size:16px;color:#647287;margin:0}
.ed-empty{text-align:center;color:#94A3B8;padding:60px 0}
/* 아바타 — 사진이 없으면 닉네임 첫 글자 (배경/글자색은 가이드 지정값) */
.ed-avatar{display:inline-flex;width:64px;height:64px;border-radius:50%;overflow:hidden;flex:0 0 auto;
align-items:center;justify-content:center;background:#FFF1F5}
.ed-avatar img{width:100%;height:100%;object-fit:cover}
.ed-initial{color:#EC7396;font-weight:700;font-size:24px}
.ed-avatar.lg{width:96px;height:96px}
.ed-avatar.lg .ed-initial{font-size:36px}
/* 목록 — PC 2열, 모바일 1열 */
.ed-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ed-card a{display:flex;gap:16px;align-items:center;padding:20px;border:1px solid #E2E8F0;border-radius:12px;
text-decoration:none;color:inherit;background:#fff;transition:border-color .15s}
.ed-card a:hover{border-color:#EC7396}
.ed-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.ed-name{font-size:18px;font-weight:700;color:#1c1c1c}
.ed-name.lg{font-size:26px;margin:0}
.ed-intro{font-size:14px;line-height:1.6;color:#647287}
.ed-count{font-size:13px;color:#94A3B8}
.ed-count b{color:#EC7396}
/* 목록 카드 — 이름·소개·글수 간격을 좁히고, 소개는 한 줄이어도 두 줄 높이로 고정해 카드 높이를 맞춘다 */
.ed-card .ed-info{gap:2px}
.ed-card .ed-intro{height:44.78px;overflow:hidden;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.ed-initial{line-height:1}
/* 상세 프로필 */
.ed-profile{display:flex;gap:24px;align-items:center;padding:32px 0;border-bottom:1px solid #E2E8F0}
.ed-profile-txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.ed-profile-txt .ed-intro{font-size:15px}
/* 탭 */
/* 게시판 필터 — 시안(editor_page_web.html)의 사이트 공통 세그먼트 .bp-seg 규격.
기존의 검은 알약 버튼(.ed-tabs)은 시안과 달라 세그먼트로 바꿨다. */
.ed-seg-row{margin:24px 0}
.ed-page .bp-seg{
display:inline-flex;gap:2px;padding:3px;
background:#F0F1F3;border-radius:999px;
}
.ed-page .bp-seg-btn{
display:flex;align-items:center;justify-content:center;
min-width:72px;height:32px;padding:8px 15px;
font-size:13px;font-weight:600;font-family:inherit;line-height:1;
color:#4B5563;background:transparent;border:0;border-radius:999px;
text-decoration:none;cursor:pointer;
}
.ed-page .bp-seg-btn:hover{color:#1c1c1c}
.ed-page .bp-seg-btn.on{
background:#fff;color:#FF709A;
box-shadow:0 1px 2px rgba(17,24,39,.1);
}
/* 글 목록 — PC 는 카드 격자(썸네일 16:9) */
.ed-posts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px 20px}
.ed-post a{display:block;text-decoration:none;color:inherit}
.ed-post-thumb{display:block;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#F1F5F9}
.ed-post-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ed-post-txt{display:block;padding-top:12px}
.ed-post-badge{display:inline-block;font-size:12px;color:#EC7396;font-weight:600;margin-bottom:6px}
.ed-post-title{display:block;font-size:16px;font-weight:600;line-height:1.5;color:#1c1c1c;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ed-post-date{display:block;font-size:13px;color:#94A3B8;margin-top:6px}
/* [18] 글 상세 작성자 → 에디터 페이지 링크 */
.write-info .wi-author{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.write-info .wi-author:hover strong{color:#E1466F;text-decoration:underline}
.write-info .wi-author img{border-radius:50%;object-fit:cover}
/* 프로필 사진이 없을 때 — 이름 첫 글자 (요청 색상) */
.write-info .wi-initial{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;flex:0 0 24px;border-radius:50%;
background:#FFF1F5;color:#EC7396;font-size:12px;font-weight:700;line-height:1;
}
/* 선 버튼 — 시안(editor_page_web.html)의 .btn-line 규격.
'글 더 보기'와 '모든 에디터 보기'가 같은 버튼을 쓴다. */
.ed-page .btn-line{
display:inline-flex;align-items:center;height:44px;padding:0 24px;
border:1px solid #E9EBEF;border-radius:999px;
font-size:14px;font-weight:600;color:#4B5563;text-decoration:none;background:#fff;
}
.ed-page .btn-line:hover{border-color:#C9CDD4;color:#1c1c1c}
/* [21] 글 더 보기 */
.ed-page .more-wrap{margin-top:48px;text-align:center}
/* [22] 목록 아래 안내 — 분홍 상자가 아니라 구분선 + 좌우 배치 */
.ed-page .all-editors{
margin-top:56px;padding-top:32px;border-top:1px solid #E9EBEF;
display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.ed-page .all-editors p{margin:0;font-size:15px;font-weight:600;color:#1c1c1c}
.ed-page .all-editors span{
display:block;margin-top:4px;font-size:13px;color:#8C8C8C;font-weight:400;
}
@media (max-width:1024px){
.ed-posts{grid-template-columns:repeat(2,1fr)}
.ed-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
.ed-page{padding:24px 16px 60px}
.ed-h1{font-size:24px}
.ed-sub{font-size:14px}
.ed-grid{grid-template-columns:1fr;gap:12px}
/* 모바일 시안 — 버튼은 가로 전체, 안내는 가운데 정렬 */
.ed-page .btn-line{width:100%;justify-content:center;font-size:13.5px;padding:0 16px}
.ed-page .more-wrap{margin-top:24px}
.ed-page .all-editors{
display:block;margin-top:32px;padding-top:24px;text-align:center;
}
.ed-page .all-editors p{margin:0 0 14px;font-size:14px}
.ed-page .all-editors span{margin-top:4px;font-size:12.5px}
.ed-card a{padding:16px;gap:12px}
.ed-avatar{width:52px;height:52px}
.ed-initial{font-size:20px}
/* 상세 프로필: 아바타를 위에 두고 가운데 정렬 (좁은 폭에서 소개가 계속 꺾인다) */
.ed-profile{flex-direction:column;text-align:center;gap:14px;padding:24px 0}
.ed-profile-txt{align-items:center}
.ed-name.lg{font-size:22px}
/* 모바일 시안(editor_page_mobile.html) — 가로 폭을 꽉 채워 3등분한다 */
.ed-seg-row{margin:20px 0 0}
.ed-page .bp-seg{display:flex;width:100%;margin-bottom:16px}
.ed-page .bp-seg-btn{
flex:1 1 0;min-width:0;height:30px;padding:8px 4px;font-size:12px;
}
/* 글 목록: 격자 대신 좌 텍스트 · 우 썸네일 한 줄
(격자로 깔면 카드 한 장이 화면을 다 먹는다) */
.ed-posts{grid-template-columns:1fr;gap:0}
/* 구분선은 항목 '위'에 둔다(시안과 동일).
아래에 두면 마지막 항목의 선과 그 다음 블록(더 보기·안내)의 선이 겹쳐 두 줄로 보인다. */
.ed-post{border-top:1px solid #F1F5F9}
.ed-post:first-child{border-top:0}
.ed-post a{display:flex;gap:12px;align-items:flex-start;padding:16px 0}
.ed-post-txt{flex:1;min-width:0;padding-top:0;order:1}
.ed-post-thumb{order:2;width:104px;flex:0 0 104px;aspect-ratio:16/9;border-radius:8px}
.ed-post-title{font-size:15px}
}
/* ── 마이페이지 · 내 콘텐츠 ── */
.ed-my-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.ed-my-title{font-size:22px;font-weight:700;margin:0}
.ed-my-count{color:#EC7396}
.ed-my-new{display:inline-block;padding:10px 20px;border-radius:8px;background:#1c1c1c;color:#fff;
text-decoration:none;font-size:14px;font-weight:600}
.ed-my-tabs{display:flex;gap:8px;margin-bottom:16px}
.ed-my-tabs a{padding:7px 16px;border:1px solid #E2E8F0;border-radius:999px;font-size:14px;color:#647287;text-decoration:none}
.ed-my-tabs a.on{background:#1c1c1c;border-color:#1c1c1c;color:#fff;font-weight:600}
.ed-my-list{list-style:none;margin:0;padding:0}
.ed-my-list li{display:flex;align-items:center;gap:12px;border-bottom:1px solid #F1F5F9}
.ed-my-item{flex:1;display:flex;gap:12px;align-items:center;padding:14px 0;text-decoration:none;color:inherit;min-width:0}
.ed-my-txt{flex:1;min-width:0}
.ed-my-badge{display:inline-block;font-size:12px;color:#EC7396;font-weight:600;margin-bottom:4px}
.ed-my-subject{display:block;font-size:15px;font-weight:600;color:#1c1c1c;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-my-meta{display:block;font-size:13px;color:#94A3B8;margin-top:4px}
.ed-my-hide{color:#EF4444;font-style:normal;margin-left:6px}
.ed-my-thumb{flex:0 0 88px;width:88px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#F1F5F9}
.ed-my-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ed-my-del{border:1px solid #E2E8F0;background:#fff;border-radius:6px;padding:6px 12px;font-size:13px;color:#647287;cursor:pointer}
.ed-my-empty{text-align:center;color:#94A3B8;padding:50px 0}
@media (max-width:720px){
.ed-my-title{font-size:19px}
.ed-my-thumb{flex-basis:72px;width:72px}
}
/* ══════════════════════════════════════════════════════════
병원상세 · 이벤트 (목록 / 상세)
시안: PC 카드 폭 700 · 2열 / 모바일 390 카드 348, 썸네일 2:1
══════════════════════════════════════════════════════════ */
/* 목록 — 2열, 가로 40 / 세로 56 */
.hev-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:56px 40px}
.hev-card a{display:block;text-decoration:none;color:inherit}
.hev-thumb{display:block;width:100%;aspect-ratio:2/1;border-radius:10px;overflow:hidden;background:#F1F5F9}
.hev-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hev-title{display:block;margin-top:16px;font-size:19px;font-weight:600;line-height:1.45;color:#1c1c1c;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hev-period{display:block;margin-top:8px;font-size:15px;color:#8C8C8C}
/* 이벤트 없을 때 */
.noevent strong{display:block;font-size:18px;font-weight:600;color:#1c1c1c;margin-bottom:8px}
.noevent p{font-size:14px;color:#8C8C8C;margin:0}
/* 상세 */
.hev-detail{max-width:1480px;margin:0 auto;padding:40px 20px}
.hev-head{text-align:center;margin:24px 0 32px}
.hev-h1{font-size:32px;font-weight:600;color:#1c1c1c;margin:0 0 12px;word-break:keep-all;line-height:1.4}
.hev-head .hev-period{font-size:15px;color:#8C8C8C}
.hev-head .hev-period.ended{color:#EF4444}
/* 상세 이미지 — 폭 720 고정·가운데, 여러 장이면 간격 없이 이어 붙인다 */
.hev-imgs{max-width:720px;margin:0 auto;font-size:0}
.hev-imgs img{width:100%;display:block}
.hev-imgs a{display:block}
.hev-back{text-align:center;margin-top:40px}
.hev-back a{font-size:15px;color:#647287;text-decoration:none}
@media (max-width:720px){
/* 목록 1열, 카드 사이 28px. 좌우 여백 21px 은 병원상세 공통 */
.hev-list{grid-template-columns:1fr;gap:28px}
.hev-title{margin-top:12px;font-size:16px}
.hev-period{font-size:13.5px}
.hev-detail{padding:24px 0}
.hev-head{padding:0 21px;margin:16px 0 24px}
.hev-h1{font-size:20px}
/* 상세 이미지는 좌우 여백 없이 화면 폭 꽉 — 이미지 안 글자가 작아지면 읽기 어렵다 */
.hev-imgs{max-width:100%}
.hev-back{padding:0 21px}
}
/* 병원상세 이벤트 탭 — 시안 간격 (탭 아래 56px, 제목 위 18px) */
.medical-box > .medi-box._hevent{padding-top:56px}
.hev-title{margin:18px 0 8px}
.hev-card:hover .hev-title{color:#FF709A}
.hev-card:hover .hev-thumb img{transform:scale(1.03)}
.hev-thumb img{transition:transform .25s}
@media (max-width:720px){
.medical-box > .medi-box._hevent{padding-top:28px}
.hev-title{margin:12px 0 6px}
/* 모바일 좌우 여백은 21px — 병원상세·글상세와 동일(가이드) */
.medical-detail-content{padding-left:21px;padding-right:21px}
}
/* ══════════════════════════════════════════════════════════
병원상세 · 시술후기 (목록 / 빈 상태) — 시안(review_web) 규격
══════════════════════════════════════════════════════════ */
.hrv-list{list-style:none;max-width:1080px;margin:0 auto;padding:0}
.hrv-item{border-bottom:1px solid #EEF0F3}
.hrv-item a{display:flex;align-items:center;gap:20px;padding:24px 4px;text-decoration:none;color:inherit;transition:background .15s}
.hrv-item a:hover{background:#FAFBFC}
.hrv-txt{flex:1;min-width:0}
/* 제목이 1줄이든 2줄이든 흐르게 두고 위아래 24 로 통일(고정 높이 없음) */
.hrv-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
font-size:19px;font-weight:600;color:#1C1C1C;line-height:1.45;word-break:keep-all}
/* 메타는 한 줄로 통합 — 아이콘 없이 글자로 (아이콘 4개가 반복되면 시선이 분산된다) */
.hrv-meta{display:block;margin-top:10px;font-size:13.5px;color:#9AA0A8}
.hrv-meta em{font-style:normal;color:#6B7280;font-weight:500}
.hrv-dot{color:#D5D9DE;margin:0 6px}
.hrv-thumb{flex:0 0 96px;width:96px;height:96px;border-radius:10px;overflow:hidden;background:#F2F3F5}
.hrv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 빈 상태 */
.hrv-empty{text-align:center;padding:80px 20px}
.hrv-empty strong{display:block;font-size:18px;font-weight:600;color:#1c1c1c;margin-bottom:10px}
.hrv-empty p{font-size:14px;color:#8C8C8C;margin:0 0 24px}
.hrv-write{display:inline-block;padding:13px 28px;border-radius:10px;background:#FF709A;color:#fff;
font-size:15px;font-weight:600;text-decoration:none}
.hrv-write:hover{background:#f55d8b}
@media (max-width:720px){
.hrv-item a{gap:14px;padding:18px 0}
.hrv-title{font-size:16px}
.hrv-meta{margin-top:8px;font-size:12.5px}
.hrv-dot{margin:0 4px}
.hrv-thumb{flex-basis:76px;width:76px;height:76px}
.hrv-empty{padding:56px 20px}
.hrv-empty strong{font-size:16px}
}
/* ══════════════════════════════════════════════════════════
리뷰 작성 — 병원명 · 카테고리 (시안 review_write_web 규격)
══════════════════════════════════════════════════════════ */
.is-hidden{display:none !important}
/* 병원명 — 자동으로 채워진 상태 */
.review .hos-filled{
display:flex;align-items:center;justify-content:space-between;gap:12px;
position:relative;left:auto;width:100%;
height:54px;border:0;outline:1px solid #FFC2D4;background:#FFF6F8;border-radius:10px;padding:0 16px 0 26px;
}
.review .hos-filled .name{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600;min-width:0}
.review .hos-filled .name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review .hos-filled .change{
flex:0 0 auto;height:34px;padding:0 12px;border:1px solid #FFC2D4;border-radius:8px;background:#fff;
font-family:inherit;font-size:13px;font-weight:600;color:#E1466F;cursor:pointer;
}
.review .hos-filled .change:hover{background:#FFF0F4}
/* .title-box div 는 병원 검색 목록용 절대배치 규칙이다. 새로 넣은 래퍼는 제외한다. */
.review .hos-input,
.review .sel{position:relative;left:auto;width:100%;background-color:transparent}
/* 열린 동안에는 이 상자 자체가 툴바(z-index:100)보다 위에 있어야 한다.
(:has() 는 구형 브라우저에서 동작하지 않아 JS 가 붙여주는 클래스를 쓴다) */
.review .title-box.is-open{position:relative;z-index:200}
.review .sel.is-open{z-index:200}
/* 검색 결과 목록 — 이제 .hos-input 이 기준이므로 입력칸에 딱 맞춘다 */
.review .hos-input .hospital_list{
left:0;width:100%;top:calc(100% + 6px);
border-radius:10px;overflow:hidden;background:#fff;
box-shadow:0 12px 28px rgba(17,24,39,.12);
}
.review .hos-input .hospital_list:empty{display:none}
.review .hos-input .hospital_list button,
.review .hos-input .hospital_list .no-text{padding:0 26px;border-left:0;border-right:0}
.review .hos-input .hospital_list button:first-child,
.review .hos-input .hospital_list .no-text:first-child{border-top:0}
/* 카테고리 드롭다운 */
.review .sel{position:relative}
.review .sel-btn{
display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
height:54px;border:0;outline:1px solid #CBD5E1;border-radius:10px;padding:0 26px;background:#fff;
font-family:inherit;font-size:15px;font-weight:500;color:#1c1c1c;cursor:pointer;text-align:left;
}
.review .sel-btn:hover{outline-color:#B6BCC5}
.review .sel-btn:focus{outline:none}
.review .sel.is-open .sel-btn{outline:1px solid #EB6390}
.review .sel-val{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review .sel-val.is-ph{color:#999}
.review .sel-arrow{width:22px;height:22px;flex:0 0 22px;color:#64748B;transition:transform .18s ease}
.review .sel.is-open .sel-arrow{transform:rotate(180deg)}
.review .sel-menu{
/* 에디터 툴바가 z-index:100 이라 30 으로는 메뉴가 툴바 아래로 깔렸다 */
position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:200;
margin:0;padding:8px;list-style:none;
background:#fff;border:1px solid #E2E8F0;border-radius:12px;
box-shadow:0 12px 28px rgba(17,24,39,.12);
}
.review .sel-opt{
display:flex;align-items:center;justify-content:space-between;gap:8px;
height:44px;padding:0 18px;border-radius:8px;
font-size:15px;color:#374151;cursor:pointer;
}
.review .sel-opt:hover{background:#F4F5F7}
.review .sel-opt.is-ph{color:#999}
.review .sel-opt.is-sel{color:#FF779A;font-weight:600}
.review .sel-opt .check{width:15px;flex:0 0 15px;opacity:0;color:#FF779A}
.review .sel-opt.is-sel .check{opacity:1}
/* 작성하기 — 필수 항목이 다 차야 눌린다 */
/* 버튼이 잠긴 이유 안내 */
.review .write-need{margin:10px 0 0;font-size:13px;line-height:1.5;color:#E1466F;text-align:center}
.review .write-btn button.review_write:disabled{
background:#ECECEC;color:#9AA0A8;border-color:#ECECEC;cursor:not-allowed
}
@media (max-width:720px){
.review .title{position:static;width:auto;flex:none;margin-left:0}
.review .hos-filled{height:45px;padding:0 10px 0 26px}
.review .hos-filled .name{font-size:13px}
.review .hos-filled .change{height:32px;padding:0 10px;font-size:12.5px}
.review .sel-btn{height:45px;padding:0 26px;font-size:13px}
.review .sel-opt{height:40px;padding:0 18px;font-size:13px}
}