/* =========================================================
   custom.css — 이번 세션에서 추가된 페이지 전용 스타일 통합
   ========================================================= */


/* =========================================================
   /deal — 뷰픽딜 리스트
   ========================================================= */
.deal-page-wrap { width: 100%; max-width: 1440px; margin: 0 auto; }
/* 헤더 ↔ 브레드크럼 간격 (뷰픽딜 리스트 전용) */
.deal-list-wrap { width: 100%; padding: 45px 0 80px; }
.deal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; }
.deal-card a { display: block; text-decoration: none; color: inherit; }
.deal-card-img { width: 100%; border-radius: 12px; overflow: hidden; background: #f5f5f5; }
.deal-card-img img { width: 100%; object-fit: cover; display: block; }
.deal-card-name { margin-top: 5px; font-size: 18px; color: #222; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; height:100px;font-weight:600}
/* 이벤트 기간 + 마감뱃지 — 제목 '위'에 한 줄로 배치.
   이전에는 기간이 제목 아래 블록, 뱃지가 카드 하단에 absolute 로 따로 떨어져
   서로 다른 줄에 놓였다. 둘을 .deal-card-meta 한 줄(flex)로 묶고 제목 앞으로 올린다. */
.deal-card{position:relative;padding-bottom:0}
.deal-card-meta{
	display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
	margin-top:14px;min-width:0;
}
.deal-card-date{
	margin-top:0;font-size:13px;color:#8E8E96;letter-spacing:-.01em;line-height:1.4;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.deal-card-meta.is-closed .deal-card-date{color:#C4C9D2;text-decoration:line-through}
/* 마감 뱃지 — 날짜와 같은 줄, 오른쪽 끝으로 밀어 붙인다 */
.deal-card-badge{
	position:static;flex:0 0 auto;display:inline-block;margin:0 0 0 auto;padding:2px 9px;
	border-radius:999px;background:#F1F3F6;color:#8E8E96;font-size:12px;font-weight:600;
	line-height:1.5;white-space:nowrap;
}

@media (max-width: 1024px) {
	.deal-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 16px; }
}
@media (max-width: 720px) {
	.deal-card{width:auto;}
	.deal-page-wrap { padding-top: 16px; }
	.deal-list-wrap { padding: 16px 16px 60px; }
	.deal-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 10px; }
	.deal-card-img { border-radius: 8px; width: 100%; height: auto; padding-top: 0; position: static; background: transparent; }
	.deal-card-img img { position: static; width: 100%; height: auto; object-fit: contain; display: block; }
	.deal-card-name { margin-top: 5px; font-size: 16px; -webkit-line-clamp: 2;height:auto !important;min-height:44px; }
	.deal-card{padding-bottom:0}
	.deal-card-meta{margin-top:11px;gap:6px}
	.deal-card-date{margin-top:0;font-size:12px}

	/* ── 딜 목록 카드 (모바일 수정안: 딜 목록 카드 — 모바일 수정안.html) ──
	   목록에서 필요한 정보는 '지금 신청할 수 있는가' 뿐이다. 기간은 상세에서 본다.
	   기간 줄에 뱃지까지 놓이면 그 줄이 카드 폭을 넘어 그리드가 화면 밖으로 밀렸다. */

	/* 밀림의 직접 원인 — 그리드 칸 기본값이 min-width:auto 라
	   칸 안의 긴 줄이 칸을 밀어낸다. */
	.deal-grid > .deal-card{min-width:0;}

	/* 기간 줄 제거 (모바일만) */
	.deal-card .deal-card-meta{display:none;}

	/* 마감 뱃지를 썸네일 위로 — 줄에서 빼내면 폭 문제도 함께 사라진다.
	   .deal-card-meta 를 숨겨도 뱃지는 보이도록 카드 기준으로 절대배치한다. */
	.deal-card .deal-card-img{position:relative;overflow:hidden;}
	.deal-card.is-closed .deal-card-meta{display:block;position:absolute;left:8px;top:8px;margin:0;z-index:2;}
	.deal-card.is-closed .deal-card-meta .deal-card-date{display:none;}
	.deal-card.is-closed .deal-card-badge{
		position:static;margin:0;padding:4px 8px;
		font-size:10.5px;font-weight:700;line-height:1.2;
		color:#fff;background:rgba(20,22,26,.72);border-radius:99px;
	}
	/* 마감 카드는 썸네일까지 어둡게 — 뱃지 하나로는 훑을 때 놓치기 쉽다 */
	.deal-card.is-closed .deal-card-img::after{
		content:'';position:absolute;inset:0;background:rgba(20,22,26,.44);
	}
	.deal-card.is-closed .deal-card-name{color:#868C96;}
}


/* =========================================================
   /medical?tab=event — 의료뷰티 이벤트 리스트
   ========================================================= */
.peak-list._medical { max-width: 1440px; margin: 0 auto; padding: 0px; }
.peak-list._medical .trend-category-tabs .trend-tab-item a { text-decoration: none; color: inherit; display: block; }

.event-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 20px; list-style: none; margin: 0; padding: 0; }
.event-card a { display: block; text-decoration: none; color: inherit; }
.event-card-img { width: 100%; border-radius: 12px; overflow: hidden; background: #f5f5f5; }
.event-card-img img { width: 100%; display: block; object-fit: cover; }
.event-card-info { padding: 18px 4px 0; }
.event-card-title { font-size: 18px; font-weight: 600; color: #222; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }
.event-card-hospital { margin-top: 6px; font-size: 13px; color: #888; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.event-card-hospital .dot { margin: 0 4px; }
.event-card-price { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.event-rate { color: #FF779A; font-weight: 700; font-size: 16px; }
.event-price-val { color: #222; font-weight: 700; font-size: 16px; }
.event-price-val::after { content: '원'; font-size: 13px; color: #888; font-weight: 400; margin-left: 2px; }

@media (max-width: 1024px) {
	.event-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 16px; }
}
@media (max-width: 720px) {
	.peak-list._medical { padding: 0 0px; }
	.event-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 10px; padding:0 20px}
	.event-card-title { font-size: 16px; min-height: 40px; }
	.event-card-info { padding-top:12px; }
	.event-card-hospital { font-size: 12px; }
	.event-rate, .event-price-val { font-size: 14px; }
}


/* =========================================================
   /medical/event/{seq} — 이벤트 상세
   ========================================================= */
.event-view-wrap { width: 100%; max-width: 100%; margin: 0; padding: 0 0 80px; }

/* 헤더 */
.ev-header { padding: 40px 20px 30px; text-align: center; background: #fff; box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.04); position: sticky; top: 140px; z-index: 50; transition: transform 0.3s ease; will-change: transform; }
.ev-header.is-hidden { transform: translateY(-120%); }
@media (max-width: 720px) {
	.ev-header { top: 80px; }
}
.ev-hospital { font-size: 14px; color: #888; margin-bottom: 10px; }
.ev-hospital .dot { margin: 0 4px; }
.ev-title { font-size: 24px; font-weight: 700; color: #111; margin: 0 0 24px; }
.btn-consult { display: block; width: 280px; max-width: 90%; margin: 0 auto; padding: 14px 0; background: #FF779A; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; }
.btn-consult:hover { background: #ff5c87; }

/* 하단 고정 상담신청 풋터 */
.ev-footer-bar { position: fixed;width:100%; left: 0; right: 0; bottom: 0; z-index: 100; background: #fff; box-shadow: 0 -4px 12px rgba(0,0,0,0.06); }
.ev-footer-inner { max-width: 1920px; margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; gap: 24px; width:100%;}
.ev-footer-info { flex: 1; min-width: 0; }
.ev-footer-title { font-size: 16px; font-weight: 700; color: #1c1c1c; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-footer-hospital { margin-top: 4px; font-size: 13px; color: #888; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-footer-hospital .dot { margin: 0 4px; }
.ev-footer-btn { width: 280px; max-width: 40%; margin: 0; padding: 14px 0; flex-shrink: 0; }
.event-view-wrap { padding-bottom: 120px; }
@media (max-width: 720px) {
	/* 모바일: 풋터 전체가 상담신청 버튼 (병원명/이벤트명 숨김) */
	.ev-footer-bar { background: #FF779A; box-shadow: none; }
	.ev-footer-inner { padding: 0; gap: 0; }
	.ev-footer-info { display: none; }
	.ev-footer-btn { width: 100%; max-width: 100%; flex: 1 1 auto; padding: 18px 0; font-size: 16px; font-weight: 700; border-radius: 0; }
	.event-view-wrap { padding-bottom: 70px; }
}

/* 본문 */
.ev-content { max-width: 1440px; margin: 0 auto; padding: 0 0 20px; line-height: 1.6; }
.ev-content img { max-width: 840px; width: 100%; height: auto; display: block; margin: 0 auto; }

/* 상담 모달 */
.ev-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.ev-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.ev-modal-box { position: relative; z-index: 1; background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); width: 90%; max-width: 460px; padding: 36px 32px; box-sizing: border-box; }
.ev-modal-hospital { text-align: center; font-size: 13px; color: #888; margin-bottom: 8px; }
.ev-modal-title { text-align: center; font-size: 18px; font-weight: 700; color: #111; margin-bottom: 24px; }
.ev-modal-field { margin-bottom: 16px; }
.ev-modal-label { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 8px; }
.ev-modal-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; color: #333; box-sizing: border-box; }
.ev-modal-input::placeholder { color: #ccc; }

.ev-time-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ev-time-btn { height: 44px; border: 1px solid #e0e0e0; background: #fff; color: #555; border-radius: 8px; font-size: 14px; cursor: pointer; }
.ev-time-btn.active { background: #FF779A; color: #fff; border-color: #FF779A; }

.ev-modal-agree { margin: 20px 0 18px; display: flex; flex-direction: column; gap: 8px; }
.ev-modal-agree label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; cursor: pointer; }
.ev-modal-agree label > span { flex: 1; }
.ev-modal-agree input { width: 16px; height: 16px; accent-color: #FF779A; }
.ev-modal-agree button{background:transparent;border:0;}
.ev-agree-view { background: none; border: none; padding: 0; margin-left: auto; font-size: 12px; color: #BBB; cursor: pointer; text-decoration: underline; }
.ev-agree-view:hover { color: #888; }

.btn-consult-submit { width: 100%; height: 52px; background: #FF779A; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; }
.btn-consult-submit:hover { background: #ff5c87; }

.ev-modal-done { max-width: 380px; text-align: center; padding: 36px 28px 24px; }
.ev-done-title { font-size: 20px; font-weight: 700; color: #111; margin-bottom: 12px; }
.ev-done-desc { font-size: 14px; color: #777; line-height: 1.6; margin-bottom: 24px; }
.btn-consult-done-close { width: 100%; height: 52px; background: #FF779A; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; }
.btn-consult-done-close:hover { background: #ff5c87; }

@media (max-width: 720px) {
	.event-view-wrap { padding: 0 16px 60px; }
	.ev-title { font-size: 20px; }
}


/* =========================================================
   post.php — medical 페이지 병원/이벤트 탭 (재사용)
   기존 trend-category-tabs / trend-tab-item / trend-tab-text 사용
   별도 스타일 없음
   ========================================================= */

/* 의료뷰티(medical) 모바일 리스트 — 2열 카드 (시안: 의료뷰피_페이지_필터_칩_모바일_수정_요청.html)
   이전에는 리얼리뷰와 같은 1열 풀너비로 강제했는데, 2열 그리드로 되돌린다.
   (peak.css 의 .peak-list._medical 2열 규칙을 살리고 여기서는 세부 치수만 잡는다) */
@media (max-width: 720px) {
	.peak-list._medical .trend-row { gap: 10px !important; justify-content: flex-start !important; flex-direction: row; flex-wrap: wrap; }
	.peak-list._medical .trend-card { width: calc(50% - 5px) !important; max-width: calc(50% - 5px) !important; margin-bottom: 22px; vertical-align: top; }
	.peak-list._medical .card-image { height: auto !important; aspect-ratio: 16 / 11; border-radius: 8px; overflow: hidden; }
	.peak-list._medical .card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
	/* 모바일 전용 썸네일이 등록된 병원만 _pc/_mobile 두 장이 출력된다.
	   등록이 없으면 클래스 자체가 안 붙으므로 PC 이미지가 그대로 노출된다.
	   위 .card-image img 규칙(display:block)을 이겨야 해서 같은 자리에 둔다. */
	.peak-list._medical .card-image img._pc { display: none; }
	.peak-list._medical .card-image img._mobile { display: block; }
	.peak-list._medical .card-title { font-size: 13px; font-weight: 600; line-height: 1.35; }
	.peak-list._medical .card-author { font-size: 11.5px; color: #868C96; }
}


/* =========================================================
   /my/buy/order, /my/buy/event — 신청/주문 내역 리스트
   ========================================================= */
/* 상품 주문 내역 (board_seq=8) */
.order-table-wrap { margin-top: 16px; }
.order-table-head { display: flex; align-items: center; padding: 18px 16px; background: #fafafa; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-weight: 600; font-size: 16px; color: #1C1C1C; }
.order-table-row { display: flex; align-items: center; padding: 26px 16px; border-bottom: 1px solid #eee; text-decoration: none; color: inherit; }
.order-table-row:hover { background: #fafafa; }
.ot-col { padding: 0; box-sizing: border-box; }
.ot-title { flex: 1; }
.ot-price { width: 180px; font-size: 16px; color: #222; }
.ot-status { width: 140px; font-size: 16px; color: #222; }
.ot-status.status0, .ot-status.status4, .ot-status.status5 { color: #FF779A; font-weight: 600; }
.ot-status.status1 { color: #4caf50; font-weight: 600; }
.ot-date { width: 140px; text-align: left; font-size: 16px; color: #222; }
.ot-name { font-size: 16px; color: #222; margin-bottom: 4px; }
.ot-memo { font-size: 13px; color: #aaa; }
.order-empty { text-align: center; padding: 60px 0; color: #bbb; font-size: 15px; }

/* 데스크탑: 모바일 카드는 숨김 */
.ot-mobile-card { display: none; }

@media (max-width: 768px) {
	.order-table-head { display: none; }
	.order-table-wrap { margin-top: 0; padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 12px; background: transparent; }
	.order-table-row { display: block; padding: 0; border: none; }
	.order-table-row:hover { background: transparent; }
	.ot-desktop { display: none !important; }

	/* 모바일 카드 (event 카드와 동일 레이아웃) */
	.ot-mobile-card { display: block; background: #fff; border-radius: 12px; padding: 18px 18px; box-shadow: 0 0 12px 0 rgba(0,0,0,0.06); }
	.ot-mobile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
	.ot-mobile-status { display: flex; align-items: center; gap: 8px; font-size: 14px; }
	.ot-mobile-status-label { color: #888; font-weight: 400; }
	.ot-mobile-status-val { color: #1c1c1c; font-weight: 700; }
	.ot-mobile-status-val.status0, .ot-mobile-status-val.status1 { color: #FF779A; }
	.ot-mobile-status-val.status2, .ot-mobile-status-val.status3 { color: #999; }
	.ot-mobile-status-val.status4, .ot-mobile-status-val.status5, .ot-mobile-status-val.status7 { color: #FF779A; }
	.ot-mobile-date { font-size: 13px; color: #888; }

	.ot-mobile-body { display: flex; gap: 14px; align-items: flex-start; }
	.ot-mobile-thumb { flex-shrink: 0; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: #f0f0f0; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; }
	.ot-mobile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.ot-mobile-info { flex: 1; min-width: 0; padding-top: 2px; }
	.ot-mobile-name { font-size: 16px; font-weight: 700; color: #1c1c1c; margin-bottom: 6px; line-height: 1.3; word-break: break-word; }
	.ot-mobile-memo { font-size: 13px; color: #888; line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
	.ot-mobile-price { font-size: 14px; color: #1c1c1c; font-weight: 600; }
}

/* 이벤트 신청 내역 (board_seq=9) */
.event-apply-wrap { margin-top: 16px; }
.event-apply-head { display: flex; align-items: center; padding: 18px 16px; background: #fafafa; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-weight: 600; font-size: 16px; color: #1C1C1C; }
.event-apply-row { display: flex; align-items: center; padding: 26px 16px; border-bottom: 1px solid #eee; text-decoration: none; color: inherit; }
.event-apply-row:hover { background: #fafafa; }
.ea-col { padding: 0; box-sizing: border-box; }
.ea-title { flex: 1; font-size: 16px; color: #222; }
.ea-title .ea-title-name { font-size: 16px; color: #222; line-height: 1.4; }
.ea-title .ea-title-memo { font-size: 14px; color: #888; line-height: 1.4; margin-top: 4px; }
.ea-hospital { width: 180px; font-size: 16px; color: #222; }
.ea-status { width: 140px; font-size: 16px; color: #222; }
.ea-date { width: 140px; text-align: left; font-size: 16px; color: #222; }
.event-apply-empty { text-align: center; padding: 60px 0; color: #bbb; font-size: 15px; }

/* 데스크탑: 모바일 카드는 숨김 */
.ea-mobile-card { display: none; }

/* my/buy 페이지 모바일: search-text 영역만 margin-top */
@media (max-width: 768px) {
	.main-area.peak-event .search-section { margin-top: 40px; }
	.main-area.peak-event .event-apply-wrap{margin-top:30px;}
}

@media (max-width: 768px) {
	/* 모바일에서는 데스크탑 컬럼 숨기고 카드 노출 */
	.event-apply-head { display: none; }
	.event-apply-wrap { margin-top: 0; padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 12px; background: transparent; }
	.event-apply-row { display: block; padding: 0; border: none; }
	.event-apply-row:hover { background: transparent; }
	.ea-desktop { display: none !important; }

	/* 모바일 카드 */
	.ea-mobile-card { display: block; background: #fff; border-radius: 12px; padding: 18px 18px; box-shadow: 0 0 12px 0 rgba(0,0,0,0.06); }
	.ea-mobile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
	.ea-mobile-status { display: flex; align-items: center; gap: 8px; font-size: 14px; }
	.ea-mobile-status-label { color: #888; font-weight: 400; }
	.ea-mobile-status-val { color: #1c1c1c; font-weight: 700; }
	.ea-mobile-status-val.status0, .ea-mobile-status-val.status1 { color: #FF779A; }
	.ea-mobile-status-val.status2, .ea-mobile-status-val.status3 { color: #999; }
	.ea-mobile-status-val.status4, .ea-mobile-status-val.status5, .ea-mobile-status-val.status7 { color: #FF779A; }
	.ea-mobile-date { font-size: 13px; color: #888; }

	.ea-mobile-body { display: flex; gap: 14px; align-items: flex-start; }
	.ea-mobile-thumb { flex-shrink: 0; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: #f0f0f0; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; }
	.ea-mobile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.ea-mobile-info { flex: 1; min-width: 0; padding-top: 2px; }
	.ea-mobile-hospital { font-size: 16px; font-weight: 700; color: #1c1c1c; margin-bottom: 6px; line-height: 1.3; }
	.ea-mobile-title { font-size: 13px; color: #888; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
	.ea-mobile-memo { font-size: 13px; color: #888; line-height: 1.4; margin-top: 4px; word-break: break-word; }
}


/* =========================================================
   /my/buy/detail/{seq} — 구매 상세
   ========================================================= */
.buy-detail-wrap { width: 100%; padding: 0 0 60px; }

/* 주문상태 */
.bd-status-bar { display: flex; align-items: center; gap: 16px; padding: 20px 24px; margin-bottom: 12px; background: #fff; border-radius: 20px; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05); }
.bd-status-label { font-size: 16px; color: #888; font-weight: 400; }
.bd-status-val { font-size: 18px; font-weight: 700; }
.bd-status-val.status0 { color: #FF779A; }
.bd-status-val.status1 { color: #FF779A; }
.bd-status-val.status2, .bd-status-val.status3 { color: #999; }
.bd-status-val.status4, .bd-status-val.status5 { color: #FF779A; }
.bd-status-val.status7 { color: #FF779A; }

/* event_apply_detail — 취소 사유 행 (status-bar 안에서 stacked) */
.bd-status-bar.has-reason { flex-direction: column; align-items: stretch; gap: 12px; }
.bd-status-bar .bd-status-row { display: flex; align-items: center; gap: 16px; }
.bd-status-reason-val { font-size: 16px; color: #1c1c1c; font-weight: 400; line-height: 1.5; word-break: break-word; }

/* 섹션 공통 */
.bd-section { background: #fff; border-radius: 20px; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05); padding: 24px 28px; margin-bottom: 12px; }
.bd-section-detail { border: none; box-shadow: none; padding: 0; padding-top: 20px; }
.bd-section-title { font-size: 18px; font-weight: 700; color: #111; margin-bottom: 20px; }

/* 정보 행 */
.bd-info-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 0; margin-bottom: 4px; }
.bd-info-row:last-child { margin-bottom: 0; }
.bd-info-col .bd-info-row { margin-bottom: 12px; }
.bd-info-col .bd-info-row:last-child { margin-bottom: 0; }
.bd-info-key { font-size: 16px; color: #888; flex-shrink: 0; margin-right: 15px; }
.bd-info-val { font-size: 16px; color: #222; margin-right: 32px; }

/* 결제 정보 그리드 */
.bd-pay-grid { display: flex; gap: 20px; }
.bd-pay-left { flex: 1; padding: 20px 24px; border-radius: 20px; background: #fff; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05); }
.bd-pay-right { flex: 1; padding: 20px 24px; border-radius: 20px; background: #fff; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05); }
.bd-pay-block-title { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 14px; }
.bd-pay-row { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: #888; margin-bottom: 10px; }
.bd-pay-row:last-child { margin-bottom: 0; }
.bd-pay-row span:first-child { color: #888; }
.bd-pay-row span:last-child { color: #222; text-align: right; }
.bd-pay-divider { border: none; border-top: 1px solid #eee; margin: 14px 0; }
.bd-pay-total { font-weight: 700; font-size: 16px; margin-top: 4px; }
.bd-pay-total span:first-child { color: #333; font-weight: 700; }
.bd-pay-total-val { color: #FF779A !important; font-weight: 700; font-size: 17px; }

/* 상세 내역 */
.bd-goods-name-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; font-size: 16px; }
.bd-goods-label { color: #888; flex-shrink: 0; }
.bd-goods-val { color: #222; font-weight: 500; }

.bd-table-wrap { border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; }
.bd-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.bd-table thead tr { background: #F9F9F9; }
.bd-table th { padding: 13px 16px; font-weight: 600; color: #444; border-bottom: 1px solid #e8e8e8; }
.bd-table .th-name { text-align: left; }
.bd-table .th-qty { text-align: center; width: 80px; }
.bd-table .th-price { text-align: right; width: 130px; }
.bd-table td { padding: 16px 16px; color: #555; border-bottom: 1px solid #f2f2f2; }
.bd-table tbody tr:last-child td { border-bottom: none; }
.bd-table .td-name { text-align: left; color: #555; }
.bd-table .td-qty { text-align: center; color: #555; }
.bd-table .td-price { text-align: right; color: #555; }
.bd-table-total { display: flex; justify-content: flex-end; align-items: center; gap: 20px; padding: 16px 20px; border-top: 1px solid #e8e8e8; }
.bd-table-total span { font-size: 15px; color: #888; }
.bd-table-total strong { font-size: 24px; font-weight: 700; color: #111; }

/* 취소 버튼 */
.bd-btn-wrap { display: flex; justify-content: flex-end; margin-top: 20px; }
.btn-buy-cancl,
.btn-buy-list { padding: 10px 28px; border: 1px solid #ccc; background: #fff; border-radius: 6px; font-size: 16px; color: #444; cursor: pointer; font-weight: 500; }
.btn-buy-cancl:hover,
.btn-buy-list:hover { background: #f5f5f5; border-color: #bbb; }
.btn-buy-list { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* 날짜 */
.bd-dates { display: flex; flex-direction: column; align-items: flex-end; margin-top: 8px; gap: 4px; padding-bottom: 20px; }
.bd-dates span { font-size: 14px; color: #bbb; }

/* 반품 신청 버튼 */
.btn-buy-return { padding: 10px 28px; border: 1px solid #FF779A; background: #fff; border-radius: 6px; font-size: 16px; color: #FF779A; cursor: pointer; font-weight: 500; }
.btn-buy-return:hover { background: #fff5f8; }

/* 취소/반품 모달 */
.bd-modal-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.btn-modal-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); }
.bd-modal-box { position: relative; background: #fff; border-radius: 16px; width: 90%; max-width: 480px; padding: 36px 32px 28px; z-index: 1; display: flex; flex-direction: column; gap: 0; }
.bd-modal-title { font-size: 20px; font-weight: 700; color: #111; text-align: center; margin-bottom: 10px; }
.bd-modal-desc { font-size: 14px; color: #777; text-align: center; line-height: 1.6; margin-bottom: 24px; }
.bd-modal-field { margin-bottom: 16px; }
.bd-modal-label { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 8px; }
.bd-modal-select { width: 100%; height: 48px; border: 1px solid #e0e0e0; border-radius: 10px; padding: 0 14px; font-size: 15px; color: #333; background: #fff; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6'%3E%3Cpath d='M1 1l4.5 4 4.5-4' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
.bd-modal-textarea { width: 100%; height: 110px; border: 1px solid #e0e0e0; border-radius: 10px; padding: 14px 16px; font-size: 15px; color: #333; resize: none; box-sizing: border-box; }
.bd-modal-textarea::placeholder { color: #ccc; }

/* 커스텀 드롭다운 (반품 사유 / 취소 사유 등) */
.rtn-dropdown { position: relative; width: 100%; }
.rtn-dropdown-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0 16px; font-size: 15px; color: #999; background: #fff; cursor: pointer; box-sizing: border-box; }
.rtn-dropdown-trigger.selected { color: #1c1c1c; }
.rtn-dropdown-trigger.open { border-color: #FF779A; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rtn-arrow { flex-shrink: 0; transition: transform 0.2s; }
.rtn-dropdown-trigger.open .rtn-arrow { transform: rotate(180deg); }
.rtn-dropdown-list { position: absolute; top: 100%; left: 0; width: 100%; border: 1px solid #FF779A; border-top: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background: #fff; z-index: 100; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.rtn-dropdown-list li { padding: 13px 16px; font-size: 15px; color: #1c1c1c; cursor: pointer; }
.rtn-dropdown-list li:hover { background: #fff0f4; }
.rtn-dropdown-list li.active { background: #ffe6ee; color: #1c1c1c; }

.return-reason-notice { margin-top: 8px; font-size: 13px; color: #FF779A; }
.btn-modal-submit { width: 100%; height: 52px; background: #FF779A; color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 8px; }
.btn-modal-submit:hover { background: #ff5c87; }
.btn-modal-cancel-close { width: 100%; height: 52px; background: #fff; color: #555; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 16px; cursor: pointer; margin-top: 8px; }
.btn-modal-cancel-close:hover { background: #f5f5f5; }
.bd-modal-dimmed { background: rgba(0, 0, 0, 0.4); }
.bd-modal-done { text-align: center; border-radius: 16px; background: #FFF; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08); }
.bd-modal-notice { background: #f7f7f7; border-radius: 10px; padding: 14px 18px; font-size: 13px; color: #777; line-height: 1.7; margin: 0 0 20px; }
.btn-modal-confirm { width: 100%; height: 52px; background: #FF779A; color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; }
.btn-modal-confirm:hover { background: #ff5c87; }

/* 배송 조회 (구매자) */
.btn-tracking-buyer { padding: 8px 20px; border: 1px solid #FF779A; background: #fff; border-radius: 6px; font-size: 14px; color: #FF779A; cursor: pointer; font-weight: 500; }
.btn-tracking-buyer:hover { background: #fff5f8; }

.tracking-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.tracking-modal-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); }
.tracking-modal-box { position: relative; background: #fff; border-radius: 16px; width: 90%; max-width: 560px; max-height: 80vh; overflow-y: auto; z-index: 1; }
.tracking-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #eee; }
.tracking-modal-head h3 { font-size: 17px; font-weight: 700; margin: 0; }
.btn-tracking-close { background: none; border: none; font-size: 22px; cursor: pointer; color: #888; }
.tracking-modal-body { padding: 20px 24px; }
.tracking-summary { margin-bottom: 16px; font-size: 14px; line-height: 1.7; color: #444; }
.tracking-loading { text-align: center; color: #888; font-size: 14px; padding: 20px 0; }
.tracking-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tracking-table th, .tracking-table td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; text-align: left; color: #444; }
.tracking-table th { font-weight: 600; color: #333; background: #fafafa; }

/* 데스크탑: 모바일 전용 요소 숨김 */
.bd-mobile-title { display: none; }
.bd-mobile-options { display: none; }

@media (max-width: 768px) {
	.bd-pay-grid { flex-direction: column; }
	.bd-pay-left { border-right: none; border-bottom: 1px solid #e8e8e8; }
	.bd-info-row { gap: 4px; }
	.bd-info-key { min-width: 64px; }
	.buy-detail-wrap { padding: 16px 16px 40px; }
	.bd-table .th-price, .bd-table .td-price { width: 100px; }

	/* 페이지 타이틀 */
	.bd-mobile-title { display: block; text-align: center; font-size: 16px; font-weight: 500; color: #1c1c1c; margin: 8px 0 24px; }

	/* 상태바 카드 */
	.bd-status-bar { padding: 18px 20px; border:0;border-radius: 12px; box-shadow: 0 0 12px 0 rgba(0,0,0,0.05); margin-bottom: 24px; }
	.bd-status-label { font-size: 14px; color: #888; }
	.bd-status-val { font-size: 14px; font-weight: 700; }
	.bd-status-bar.has-reason { gap: 10px; }
	.bd-status-bar .bd-status-row { gap: 12px; }
	.bd-status-reason-val { font-size: 14px; color: #1c1c1c; font-weight: 400; line-height: 1.5; }

	/* 섹션 — 모바일은 카드형 (제목은 카드 밖, 정보 행만 카드 안) */
	.bd-section { background: transparent; box-shadow: none; padding: 0; margin-bottom: 24px; }
	.bd-section-title { font-size: 18px; font-weight: 700; color: #1c1c1c; padding: 0 4px; margin-bottom: 12px; }

	/* 정보 카드 (이름/연락처 등) */
	.bd-section .bd-info-row,
	.bd-section .bd-info-col { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 0 12px 0 rgba(0,0,0,0.05); }
	.bd-section .bd-info-row { flex-direction: column; align-items: flex-start; }
	.bd-section .bd-info-col .bd-info-row { background: transparent; padding: 0; box-shadow: none; margin-bottom: 10px; flex-direction: row; align-items: baseline; }
	.bd-info-key { font-size: 14px; color: #888; min-width: 70px; margin-right: 16px; }
	.bd-info-val { font-size: 14px; color: #1c1c1c; margin-right: 0; }
	/* 단일 행 카드 내부에서 key/val 가로 배치 */
	.bd-section > .bd-info-row { display: grid; grid-template-columns: 70px 1fr; row-gap: 8px; align-items: baseline; }

	/* 상세내역 영역 */
	.bd-section-detail { padding-top: 0; }
	.bd-goods-name-row { background: transparent; padding: 0 4px; margin-bottom: 14px; font-size: 14px; }
	.bd-goods-label { color: #9D9D9D; font-weight: 700; font-size: 16px; }
	.bd-goods-val { color: #1c1c1c; font-weight: 400; font-size: 16px; }

	/* 모바일 옵션 카드 — PC bd-table 대체 */
	.bd-table-wrap { border: none; }
	.bd-table { display: none; }
	.bd-mobile-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
	.bd-mobile-option-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 0 12px 0 rgba(0,0,0,0.05); }
	.bd-mobile-option-name { flex: 1; font-size: 14px; color: #1c1c1c; line-height: 1.4; word-break: break-word; }
	.bd-mobile-option-price { flex-shrink: 0; font-size: 14px; color: #1c1c1c; font-weight: 500; }

	/* 금액 합계 */
	.bd-table-total { background: transparent; border: none; padding: 20px 4px 4px; justify-content: end; gap: 0; }
	.bd-table-total span { font-size: 14px; color: #888; margin-right:22px}
	.bd-table-total strong { font-size: 28px; font-weight: 700; color: #1c1c1c; }

	/* 취소/반품 버튼 */
	.bd-btn-wrap { margin-top: 32px; justify-content: stretch; }
	.bd-btn-wrap .btn-buy-cancl,
	.bd-btn-wrap .btn-buy-list,
	.bd-btn-wrap .btn-buy-return { border-color:#DFE1E3;width: 100%; padding: 15px 0; font-size: 15px; border-radius: 8px; }

	/* 날짜 */
	.bd-dates { margin-top: 16px; padding-bottom: 0; align-items: flex-end; }
	.bd-dates span { font-size: 13px; color: #aaa; }
}


/* =========================================================
   /my/order/view/{seq} — 판매자 주문 상세
   ========================================================= */
/* 택배 발송 정보 */
.bd-delivery-status-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.bd-delivery-status-row .bd-info-key { font-size: 15px; color: #888; font-weight: 400; flex-shrink: 0; min-width: auto; }
.bd-delivery-status-val { font-size: 15px; color: #222; font-weight: 700; margin-right: 40px; }
.bd-delivery-form { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.bd-delivery-form select { display: flex; padding: 13px 17px; align-items: center; gap: 52.922px; border-radius: 8px; border: 1px solid #ECECEC; background: #FFF; font-size: 15px; color: #555; flex-shrink: 0; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6'%3E%3Cpath d='M1 1l4.5 4 4.5-4' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; box-sizing: border-box; }
.bd-delivery-form input[type="text"] { display: flex; width: 350px; padding: 13px 40px 13px 17px; align-items: center; gap: 52.922px; border-radius: 8px; border: 1px solid #ECECEC; background: #FFF; font-size: 15px; color: #333; box-sizing: border-box; flex-shrink: 0; }
.bd-delivery-form input[type="text"]::placeholder { color: #bbb; }
.btn-delivery-reg { display: flex; width: 130px; padding: 13px 20px; justify-content: center; align-items: center; border-radius: 8px; background: #FF779A; color: #fff; border: none; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; box-sizing: border-box; }
.btn-delivery-reg:hover { background: #ff5c87; }
.btn-delivery-save { display: flex; width: 130px; padding: 13px 20px; justify-content: center; align-items: center; border-radius: 8px; border: 1px solid #ECECEC; background: #FFF; color: #555; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; flex-shrink: 0; box-sizing: border-box; }
.btn-delivery-save:hover { background: #f5f5f5; }
.btn-tracking { height: 36px; padding: 0 16px; background: #fff; color: #555; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn-tracking:hover { background: #f5f5f5; }

/* 반품 접수 / 반품 완료 버튼 */
.btn-return-accept { padding: 10px 28px; border: none; background: #FF779A; border-radius: 6px; font-size: 16px; color: #fff; cursor: pointer; font-weight: 600; }
.btn-return-accept:hover { background: #ff5c87; }
.btn-return-complete { padding: 10px 28px; border: 1px solid #FF779A; background: #fff; border-radius: 6px; font-size: 16px; color: #FF779A; cursor: pointer; font-weight: 600; }
.btn-return-complete:hover { background: #fff5f8; }

@media (max-width: 768px) {
	.bd-delivery-form { gap: 8px; }
	.bd-delivery-form select { width: 100%; }
	.bd-delivery-form input[type="text"] { width: 100%; }
}


/* =========================================================
   /my/profile — 공통 (커스텀 드롭다운 직책 등)
   ========================================================= */
.profile-form .input-wrapper:has(input[readonly]) { background-color: #F5F5F5; }
.profile-form .form-input[readonly] { cursor: default; }


/* =========================================================
   /my/profile (일반회원 profile2.php)
   ========================================================= */
.profile2-form .input-wrapper.readonly-bg { background-color: #F5F5F5; }
.profile2-form .form-input[readonly] { cursor: default; }
.profile2-form .input-row-with-btn { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.profile2-form .input-row-with-btn .input-wrapper { flex: 1; margin-top: 0; }
.btn-inline-confirm { flex-shrink: 0; min-width: 80px; padding: 0 22px; background: #FF779A; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn-inline-confirm:hover { background: #ff5c87; }

.button-section.profile2 { display: block; padding: 24px 0; margin-top: -30px; }
.button-section.profile2 .btn-change-pw { width: 100%; height: 48px; background: #fff; border: 1px solid #E5E5E5; border-radius: 8px; color: #FF779A; font-size: 15px; font-weight: 600; cursor: pointer; }
.button-section.profile2 .btn-change-pw:hover { background: #fff5f8; }
.button-section.profile2 .profile2-bottom { display: flex; justify-content: flex-end; margin-top: 20px; }
.button-section.profile2 .btn-danger { background: transparent; border: none; color: #999; font-size: 14px; padding: 0; cursor: pointer; margin-top:20px;}
.button-section.profile2 .btn-danger:hover { color: #FF779A; }


/* =========================================================
   /my/hospital — 병원정보
   ========================================================= */
.peak-hospital-page .hospital-tabs .tab-btn { width: auto; max-width: 126px; padding-left: 10px; padding-right: 10px; }
.peak-hospital-page .tab-doctor,
.peak-hospital-page .tab-special,
.peak-hospital-page .tab-hours { max-width: 525px; }
.peak-hospital-page .uploaded-files .delete-btn { width: 52px; height: 52px; }


/* =========================================================
   메인 페이지 전용 (Home, body.main-page)
   ========================================================= */
@media (max-width: 720px) {
	/* 헤더(.top-nav)가 position:fixed 높이 80px 이라 그만큼 본문을 내려야 한다.
	   36px 이던 값은 .home-page 에 margin-top:84px 이 있던 시절 그걸 감안한 값이었는데,
	   그 마진을 0 으로 바꾸면서 배너가 헤더 뒤로 44px 들어가 가려졌다. */
	body.main-page { padding-top: 80px; }
}

/* 메인 페이지 — 뷰티 FLEX 특가 deal 카드 이미지 정사각형 (review-section 영향 없음) */
.home-page .deal-section .deal-card > a > .card-image { width: 100%; height: 0 !important; padding-top: 100%; overflow: hidden; border-radius: 12px; background: #f5f5f5; position: relative; }
.home-page .deal-section .deal-card > a > .card-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* 모바일에서 deal-section swiper 비정상 width 계산 차단 + 두 번째 이미지 같은 가로 스크롤 패턴 */
@media (max-width: 720px) {
	.home-page .deal-section { padding:5px 0 0 0; box-sizing: border-box; overflow: hidden; }
	.home-page .deal-section .section-container { padding: 0; }
	.home-page .deal-section .section-title { padding: 0 20px; }
	.home-page .deal-section .deal-grid { width: 100% !important; max-width: 100% !important; overflow: hidden; padding: 0; }
	/* 이 스크롤러는 부모보다 넓어야 카드가 가로로 흐른다.
	   .swiper_main 의 max-width:100%(데스크톱 넘침 방지용)가 여기까지 걸리면
	   폭이 부모 크기로 눌려 overflow:hidden 에 카드가 잘린다 → 해제한다. */
	.home-page .deal-section .swiper_main._02 { margin: 0 !important; overflow: hidden; width:calc(200% + 10px); max-width:none;}
	.home-page .deal-section .swiper_main._02 .swiper-wrapper { transform: none !important; display: flex !important; flex-wrap: nowrap; overflow-x: auto; padding: 0 30px; gap: 10px; scroll-snap-type: x mandatory;  -webkit-overflow-scrolling: touch; scrollbar-width: none; box-sizing: border-box; }
	.home-page .deal-section .swiper_main._02 .swiper-wrapper::-webkit-scrollbar { display: none; }
	.home-page .deal-section .swiper_main._02 .swiper-slide { width: 100% !important; flex-shrink: 0 !important; scroll-snap-align: center; transform: none !important; margin: 0 !important; }
	/* 카드 이미지 영역 — 원본 비율 자연스럽게 유지 (정사각형 강제 해제) */
	.home-page .deal-section .deal-card > a > .card-image { width: 100%; height: auto !important; padding-top: 0 !important; aspect-ratio: 1; position: relative; overflow: hidden; border-radius: 12px; background: #f5f5f5; }
	.home-page .deal-section .deal-card > a > .card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
}


.peak-list._medical .card-image{height:180px;}


/* /my/partner/sell 정산 페이지 — 모바일에서 filter-section 숨김 */
@media (max-width: 768px) {
	.page-partner-sell .filter-section { display: none !important; }
	/* 결제금액(price-line)과 줄바꿈은 숨기고 전환금액(bill-line)만 표시 */
	.page-partner-sell .category-col .category-text .price-line,
	.page-partner-sell .category-col .category-text br { display: none !important; }
}

/* /review 리얼리뷰 — 모바일 2열 (PC는 기본 4열 유지) */
@media (max-width: 720px) {
	.peak-list._review .trend-row { gap: 10px !important; justify-content: flex-start !important; flex-wrap: wrap; }
	.peak-list._review .trend-card { width: calc(50% - 5px) !important; max-width: calc(50% - 5px) !important; margin-bottom: 24px; }
	.peak-list._review .trend-card .card-image { height: 160px; }
	.peak-list._review .trend-card .card-image img { width: 100%; height: 160px; display: block; }
}


/* =========================================================
   /my/hospital — 특화분야 드래그앤드롭 정렬
   ========================================================= */
/* hospital-dirty 모달 — 이동/취소 버튼 가로 1열 50% */
#hospital-dirty-modal .bd-modal-box { display: flex; flex-direction: column; }
#hospital-dirty-modal .hospital-dirty-btns { display: flex; gap: 8px; margin-top: 8px; }
#hospital-dirty-modal .hospital-dirty-btns .btn-modal-submit,
#hospital-dirty-modal .hospital-dirty-btns .btn-modal-cancel-close { width: 50%; margin: 0; flex: 1; }

/* 특화분야 등록된 태그 — 줄바꿈 시 세로 간격 + 드래그 커서 */
.peak-special .spe-list > span { margin-bottom: 10px; cursor: grab; user-select: none; }
.peak-special .spe-list-guide { margin-top: 16px; font-size: 13px; color: #999; line-height: 1.5; margin-bottom:80px;}
.peak-special .spe-list > span:active { cursor: grabbing; }
.peak-special .spe-list .ui-sortable-helper { opacity: 0.85; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.peak-special .spe-list .spe-placeholder { display: inline-block; height: 30px; width: 80px; margin-right: 6px; background: #ffe4ec; border: 1px dashed #FF779A; border-radius: 24.54px; vertical-align: top; }


/* =========================================================
   /my/hospital — 진료시간 기타안내
   ========================================================= */
.peak-etc-section { margin-top: 40px; padding-bottom:100px;}
.peak-etc-section .peak-event-banner { margin-bottom: 0px; }
textarea.peak-etc { width: 100%; min-height: 50px; padding: 14px 16px; border: 1px solid #DCDEE3; border-radius: 8px; font-size: 14px; line-height: 1.5; color: #1c1c1c; resize: none; box-sizing: border-box; overflow: hidden; font-family: inherit; }
textarea.peak-etc::placeholder { color: #bbb; }
textarea.peak-etc:focus { outline: none; border-color: #FF779A; }

/* medical_view 진료시간 기타안내 */
.abo-hours-etc { margin-top: 25px; font-size: 14px; color: #999; line-height: 1.6; word-break: break-word; margin-left:auto;margin-right:auto;max-width:780px;}


/* =========================================================
   /my/hospital — 의료진 카드 삭제 버튼 / 이미지 삭제 라벨
   ========================================================= */
.peak-image-wrap { position: relative; }
.peak-image-wrap .btn-card-del { position: absolute !important; top: 0 !important; right: 0 !important; width: 36px !important; height: 36px !important; padding: 0 !important; border: 1px solid #DFE1E3 !important; background: #fff !important; border-radius: 8px !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; z-index: 200 !important; }
.peak-image-wrap .btn-card-del:hover { background: #f8f8f8; border-color: #bbb; }
.peak-image-wrap .btn-card-del img { width: 18px; height: 18px; display: block; }
.peak-image-wrap .img-box { position: relative; }
.peak-image-wrap .img-box .img-del-badge { position: absolute; top: 8px; right: 8px; background: #FF779A; color: #fff; border: 0; border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1.4; display: none; }
.peak-image-wrap .img-box.active .img-del-badge { display: inline-block; }
.peak-image-wrap .img-box .img-del-badge:hover { background: #ff5c87; }
/* =========================================================
   홈 — 닥터 칼럼 섹션
   시안: home_column_section_web.html / home_column_section_mobile.html
   구조는 clinic-grid(PC) · deal-grid._small(모바일) 과 같은 swiper 를 쓴다.
   ========================================================= */
.column-section{margin-bottom:60px}
/* 캐러셀은 화면 밖 카드가 옆으로 이어져 있어, 감싸는 쪽에서 잘라주지 않으면
   문서 전체에 가로 스크롤이 생긴다 (clinic-grid 도 같은 이유로 overflow:hidden) */
.column-section .column-grid{overflow:hidden}
.column-section .swiper_main._03{width:1425px;max-width:100%;overflow:hidden}

/* 카드 — 썸네일(1:1) → 작성자 → 제목 2줄 */
.column-section .col-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.column-section .col-thumb{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#EEF0F3}
.column-section .col-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.column-section .col-card:hover .col-thumb img{transform:scale(1.03)}

/* 작성자 줄 — 이 섹션의 핵심 구분자 */
.column-section .col-author{display:flex;align-items:center;gap:8px;margin:14px 0 8px}
.column-section .col-avatar{
	width:24px;height:24px;border-radius:50%;object-fit:cover;
	border:1px solid #E9EBEF;background:#fff;flex:0 0 auto;
}
/* 프로필 사진이 없을 때 — 닉네임 첫 글자 이니셜 원형 */
.column-section .col-initial{
	display:inline-flex;align-items:center;justify-content:center;
	background:#EEF0F3;color:#6B7280;font-size:12px;font-weight:700;line-height:1;
}
.column-section .col-author-name{
	font-size:13px;font-weight:600;color:#17181C;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.column-section .col-title{
	font-size:16px;font-weight:600;line-height:1.45;letter-spacing:-.01em;margin:0;color:#17181C;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

@media (max-width: 720px){
	/* 모바일 — 홈 '뷰티 FLEX 특가'(deal-section) 와 완전히 같은 방식.
	   Swiper 의 transform 을 끄고 브라우저 기본 가로 스크롤로 넘긴다.
	   (transform 이 살아 있으면 스크롤과 겹쳐 위치가 어긋난다) */
	.column-section{margin-bottom:40px;padding:5px 0 0 0;box-sizing:border-box;overflow:hidden}
	.column-section .section-container{padding:0}
	.column-section .section-title{font-size:19px;padding:0 20px}
	.column-section .column-grid{width:100% !important;max-width:100% !important;overflow:hidden;padding:0}
	/* .swiper_main 기본값(1425px / 270%)을 덮어 화면 폭에 맞춘다.
	   가로 넘김은 아래 .swiper-wrapper 의 overflow-x:auto 가 담당하므로
	   이 요소까지 넓힐 필요가 없다(넓히면 카드가 화면 밖으로 커진다). */
	.column-section .swiper_main._03{margin:0 !important;overflow:hidden;width:100% !important;max-width:100% !important}
	.column-section .swiper_main._03 .swiper-wrapper{
		transform:none !important;display:flex !important;flex-wrap:nowrap;overflow-x:auto;
		padding:0 30px;gap:10px;scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch;scrollbar-width:none;box-sizing:border-box;
	}
	.column-section .swiper_main._03 .swiper-wrapper::-webkit-scrollbar{display:none}
	.column-section .swiper_main._03 .swiper-slide{
		width:100% !important;flex-shrink:0 !important;scroll-snap-align:center;
		transform:none !important;margin:0 !important;
	}
	.column-section .col-thumb{border-radius:12px}
	.column-section .col-author{gap:7px;margin:12px 0 7px}
	.column-section .col-avatar{width:22px;height:22px}
	.column-section .col-initial{font-size:11px}
	.column-section .col-author-name{font-size:12.5px}
	.column-section .col-title{font-size:14.5px}
}

/* 병원 리스트 카드: PC 화면에서는 모바일 전용 썸네일을 감춘다.
   (모바일 규칙은 위 max-width:720px 블록에 있고, 여기는 721px 이상에만 적용) */
@media (min-width:721px){
	.peak-list._medical .card-image img._mobile { display: none; }
}