/* ===================
     상품 상세 날짜 계산기 (wib/js/wib-trip-calc.js 가 그림)
     상세설명 .mtv 안의 .mtv-calc 에 들어감 — 제목(h2)·.sub 는 .mtv 스타일을 따름
   =================== */
.mtv-calc{ margin: 0; }
.mtv-calc .mc-form{ border: 2px solid #1b1b1f; border-radius: 18px; padding: 6px 16px; background: #fafafc; }
.mtv-calc .mc-row{ display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; padding: 10px 0; }
.mtv-calc .mc-row + .mc-row{ border-top: 1px solid #ececf2; }
.mtv-calc .mc-label{ font-weight: 800; font-size: 14px; }
.mtv-calc input, .mtv-calc select{ width: 100%; max-width: 260px; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #d9d9e1; border-radius: 10px; background: #fff; font-size: 15px; color: #1b1b1f; }
.mtv-calc input:focus, .mtv-calc select:focus{ outline: none; border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,.15); }

/* 머무는 기간: − 4박 5일 + */
.mtv-calc .mc-stay{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.mtv-calc .mc-step{ width: 42px; height: 42px; border: 1px solid #d9d9e1; border-radius: 50%; background: #fff; font-size: 22px; line-height: 1; color: #1b1b1f; cursor: pointer; }
.mtv-calc .mc-step:hover{ border-color: #6d28d9; color: #6d28d9; }
.mtv-calc .mc-nights{ min-width: 76px; text-align: center; font-size: 18px; }
.mtv-calc .mc-dep{ font-size: 13px; color: #6b6b76; }

/* 도착·출국 시각: 시·분 선택 상자 (시가 '모름'이면 분 칸은 꺼짐). 스킨 모바일 CSS 가 선택 상자 화살표를 지워도 보이게 직접 그림 */
.mtv-calc .mc-time{ display: flex; gap: 8px; max-width: 260px; }
.mtv-calc .mc-time select{ flex: 1; padding-right: 30px; -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2355555f' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: pointer; }
.mtv-calc .mc-time select:disabled{ background-color: #f4f4f7; color: #b0b0ba; cursor: default; }
/* 터치 기기: 기본 시간 칸 + [모름] (비어 있으면 모름 버튼이 켜진 것처럼) */
.mtv-calc .mc-native{ align-items: center; }
.mtv-calc .mc-native input{ flex: 1; }
.mtv-calc .mc-clear{ flex: none; height: 42px; padding: 0 14px; border: 1px solid #d9d9e1; border-radius: 10px; background: #fff; font-size: 14px; color: #55555f; cursor: pointer; }
.mtv-calc .mc-clear.on{ border-color: #6d28d9; background: #f1ebff; color: #6d28d9; font-weight: 700; }

.mtv-calc .mc-hint{ margin: 8px 2px 0; font-size: 12px; color: #7a7a85; text-align: left; }
.mtv-calc .mc-err{ margin: 12px 0 0; color: #dc2626; font-weight: 700; }

/* 결과 */
.mtv-calc .mc-table{ margin-top: 14px; border: 2px solid #1b1b1f; border-radius: 18px; overflow: hidden; font-size: 14px; }
.mtv-calc .mc-table th, .mtv-calc .mc-table td{ padding: 12px 14px; border-bottom: 1px solid #e6e6ec; text-align: left; vertical-align: top; }
.mtv-calc .mc-table thead th{ background: #1b1b1f; color: #fff; font-size: 13px; }
.mtv-calc .mc-table tbody tr:last-child th, .mtv-calc .mc-table tbody tr:last-child td{ border-bottom: 0; }
.mtv-calc .mc-table th[scope="col"]:nth-child(1){ width: 30%; }
.mtv-calc .mc-table th[scope="col"]:nth-child(2){ width: 24%; }
.mtv-calc .mc-table tbody th a{ font-weight: 800; color: #6d28d9; text-decoration: none; }
.mtv-calc .mc-ans b{ font-size: 18px; color: #1b1b1f; white-space: nowrap; }
.mtv-calc .mc-no{ color: #dc2626; font-weight: 800; }
.mtv-calc .mc-why{ color: #55555f; font-size: 13px; line-height: 1.55; }

@media (max-width: 600px){
	.mtv-calc .mc-form{ padding: 4px 12px; }
	.mtv-calc .mc-row{ grid-template-columns: 1fr; gap: 6px; }
	.mtv-calc input, .mtv-calc select{ max-width: none; }
	.mtv-calc .mc-time{ max-width: none; }
	.mtv-calc .mc-dep{ flex-basis: 100%; }  /* "− 4박 5일 +" 한 줄, 출국일은 그 아래 */
	/* 결과 표는 줄마다 카드처럼 (가로 스크롤 없음) */
	.mtv-calc .mc-table thead{ display: none; }
	.mtv-calc .mc-table tr{ display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid #e6e6ec; }
	.mtv-calc .mc-table tbody tr:last-child{ border-bottom: 0; }
	.mtv-calc .mc-table th, .mtv-calc .mc-table td{ display: block; padding: 0; border: 0 !important; }
	.mtv-calc .mc-table .mc-ans{ text-align: right; }
	.mtv-calc .mc-table .mc-why{ grid-column: 1 / -1; }
}