/*
 * 비용 계산기 모바일 컨셉 (mobile 프로젝트 사이클 8, 확정안 「가안」)
 * 대상: /cost-calculator/withparent/ 만 (withparent/index.php 가 이 파일을 불러온다)
 * 범위: 폭 767px 이하에서만 적용. 마크업·JS·calculator.css 는 그대로, 모양만 바꾼다.
 * JS 가 박는 인라인 style 과 calculator.css 를 이기려고 접두 + !important 를 쓴다.
 * 표의 어떤 칸도 숨기지 않는다(thead 의 열 이름만 시각적으로 접고, 값 앞에 라벨을 붙인다).
 */
@media (max-width: 767px) {

/* ---------- 컨테이너·제목 ---------- */
body .calculator-container.calculator-container { padding: 8px 12px 24px !important; counter-reset: c8step; overflow-wrap: anywhere; }
body .calculator-container.calculator-container span[style*="font-size: 24px"] { font-size: 22px !important; line-height: 1.3; }
body .calculator-container.calculator-container p { overflow-wrap: anywhere; }
body .calculator-container.calculator-container ul { padding-left: 20px; }

/* ---------- 가입 안내 배너 (비로그인) / 마이페이지 배너 (로그인) ---------- */
body .calculator-container.calculator-container .calc-login-banner { flex-direction: column !important; align-items: stretch !important; padding: 10px 12px !important; margin-bottom: 8px !important; gap: 6px !important; }
body .calculator-container.calculator-container .calc-login-banner > a { display: flex !important; align-items: center; justify-content: center; min-height: 44px; white-space: normal !important; text-align: center; padding: 8px 14px !important; }
body .calculator-container.calculator-container > div[style*="e8f4fd"] { padding: 8px 12px !important; margin-bottom: 8px !important; }
body .calculator-container.calculator-container > div[style*="e8f4fd"] a { display: inline-flex !important; align-items: center; min-height: 44px; padding: 8px 16px !important; }

/* ---------- 단계 카드 (1 유학 유형 / 2 나의 조건 / 3 추가 비용 옵션) ---------- */
body .calculator-container.calculator-container .selection-box { margin: 8px 0 !important; padding: 12px 14px !important; border-radius: 14px !important; box-shadow: 0 1px 4px rgba(10, 22, 40, .10) !important; }
body .calculator-container.calculator-container .selection-box > p:first-child { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; }
body .calculator-container.calculator-container .selection-box > p:first-child::before { counter-increment: c8step; content: counter(c8step); flex: 0 0 24px; height: 24px; border-radius: 50%; background: #14213d; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
body .calculator-container.calculator-container #with-mom-options .selection-box > p:nth-child(2),
body .calculator-container.calculator-container #child-only-options .selection-box > p:nth-child(2),
body .calculator-container.calculator-container #child-only-options .selection-box > p:last-child { display: none !important; }
body .calculator-container.calculator-container .selection-box > div[style*="display: flex"] { gap: 8px !important; margin-top: 4px !important; }
body .calculator-container.calculator-container .study-type-label { flex: 1 1 100% !important; padding: 8px 14px !important; min-height: 44px; width: 100% !important; box-sizing: border-box; }
body .calculator-container.calculator-container .study-type-label span { font-size: 14px !important; }
body .calculator-container.calculator-container #accompany-type-section { padding: 10px 14px !important; margin-top: 8px !important; }
body .calculator-container.calculator-container #accompany-type-section > div { gap: 8px !important; }
body .calculator-container.calculator-container #accompany-type-section label { min-height: 44px; flex: 1 1 100%; }
body .calculator-container.calculator-container #accompany-type-section label span { font-size: 13px !important; }

/* 환율 줄 */
body .calculator-container.calculator-container .selection-box + div[style*="background: #e3f2fd"] { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 10px !important; padding: 10px 12px !important; }
body .calculator-container.calculator-container .selection-box + div[style*="background: #e3f2fd"] > span { font-size: 13px !important; margin-left: 0 !important; }
body .calculator-container.calculator-container #exchange-rate-input { min-height: 44px; width: 110px !important; font-size: 15px !important; box-sizing: border-box; }

/* 입력 목록: 한 열, 라벨 위·입력 아래 */
body .calculator-container.calculator-container .selection-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
body .calculator-container.calculator-container .selection-item { min-width: 0 !important; width: 100% !important; flex: none !important; }
body .calculator-container.calculator-container .selection-item label { font-size: 13px !important; margin-bottom: 4px !important; }
body .calculator-container.calculator-container .btn-group { display: flex; flex-wrap: wrap; gap: 6px !important; }
body .calculator-container.calculator-container .btn-option { flex: 1 1 0 !important; min-width: 0 !important; min-height: 44px; padding: 8px 6px !important; font-size: 13px !important; white-space: normal; line-height: 1.3; }
body .calculator-container.calculator-container select,
body .calculator-container.calculator-container .select-box { min-height: 44px !important; width: 100% !important; font-size: 14px !important; box-sizing: border-box; }
body .calculator-container.calculator-container .selection-item div[style*="display: flex"],
body .calculator-container.calculator-container #district-options > div,
body .calculator-container.calculator-container #managed-options > div[style*="display: flex"] { flex-direction: column !important; gap: 8px !important; }
body .calculator-container.calculator-container .selection-item div[style*="min-width"] { min-width: 0 !important; flex: 1 1 auto !important; width: 100% !important; }
body .calculator-container.calculator-container #dormitory-options label,
body .calculator-container.calculator-container #child-only-options label[style*="cursor: pointer"] { min-height: 44px; }
body .calculator-container.calculator-container #dormitory-options div[style*="display: flex"] { gap: 6px 14px !important; }

/* 3 추가 비용 옵션 (동반 모드) */
body .calculator-container.calculator-container #with-mom-options .selection-box > div[style*="border-left"] { padding: 12px !important; margin-top: 10px !important; border-radius: 12px !important; background: #f6f8fc !important; }
body .calculator-container.calculator-container #with-mom-options .selection-box > div[style*="border-left"] > p { display: flex; align-items: center; gap: 8px; margin-bottom: 8px !important; }
body .calculator-container.calculator-container #with-mom-options .selection-box > div[style*="border-left"] > p::before { counter-increment: c8step; content: counter(c8step); flex: 0 0 24px; height: 24px; border-radius: 50%; background: #14213d; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
body .calculator-container.calculator-container #with-mom-options .selection-box > div[style*="border-left"] > div { flex-direction: column !important; gap: 8px !important; }
body .calculator-container.calculator-container #with-mom-options .selection-box > div[style*="border-left"] > div > div { min-width: 0 !important; flex: 1 1 auto !important; }

/* 선택 사항 적용 */
body .calculator-container.calculator-container #apply-selection-btn { display: block; width: 100% !important; min-height: 52px; padding: 0 16px !important; font-size: 15px !important; border-radius: 12px !important; box-sizing: border-box; }
body .calculator-container.calculator-container #login-required-notice { padding: 14px !important; }
body .calculator-container.calculator-container #login-required-notice a { display: flex !important; align-items: center; justify-content: center; min-height: 44px; }

/* ---------- 비용 요약 카드 ---------- */
body .calculator-container.calculator-container .cost-summary-box { display: flex; flex-direction: column; padding: 16px !important; border-radius: 16px !important; background: #14213d !important; border: 0 !important; }
body .calculator-container.calculator-container .cost-summary-box::before { display: none !important; }
body .calculator-container.calculator-container .cost-summary-box,
body .calculator-container.calculator-container .cost-summary-box * { color: #dfe6f5 !important; }
body .calculator-container.calculator-container .cost-summary-header { order: 1; font-size: 12px !important; padding: 0 0 6px !important; margin: 0 0 6px !important; border-bottom: 1px solid rgba(255, 255, 255, .18) !important; letter-spacing: .02em; }
body .calculator-container.calculator-container .cost-summary-condition { order: 2; font-size: 12px !important; line-height: 1.6 !important; margin: 0 0 10px !important; }
body .calculator-container.calculator-container .cost-summary-condition span { font-size: 12px !important; }
body .calculator-container.calculator-container .cost-summary-total { order: 3; border-top: 0 !important; padding: 0 0 12px !important; font-size: 13px !important; }
body .calculator-container.calculator-container .cost-summary-total > span:first-child { display: block; font-size: 13px !important; }
body .calculator-container.calculator-container .cost-summary-total b { display: block; font-size: 26px !important; line-height: 1.25; color: #fff !important; letter-spacing: -.02em; }
body .calculator-container.calculator-container .cost-summary-total > br { display: none; }
body .calculator-container.calculator-container .cost-summary-total > span:last-child { display: block; font-size: 12px !important; margin-top: 2px; }
body .calculator-container.calculator-container .cost-summary-cards { order: 4; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin: 0 !important; }
body .calculator-container.calculator-container .cost-summary-card { padding: 12px !important; border-radius: 10px !important; background: rgba(255, 255, 255, .09) !important; border: 1px solid rgba(255, 255, 255, .18) !important; }
body .calculator-container.calculator-container .cost-summary-card::before { display: none !important; }
body .calculator-container.calculator-container .cost-summary-card-label { font-size: 11px !important; margin: 0 0 2px !important; }
body .calculator-container.calculator-container .cost-summary-card-amount { font-size: 15px !important; color: #fff !important; margin: 0 0 2px !important; }
body .calculator-container.calculator-container .cost-summary-card-detail { font-size: 11px !important; line-height: 1.4; }

/* ---------- 비용 내역: 표 → 항목 두 줄 목록 (칸을 숨기지 않는다) ---------- */
body .calculator-container.calculator-container #cost-table-section table { display: block !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; white-space: normal !important; font-size: 13px !important; border: 1px solid #e0e5ee !important; border-radius: 14px; background: #fff; margin-top: 8px; }
body .calculator-container.calculator-container #cost-table-section table thead { display: none !important; }
body .calculator-container.calculator-container #cost-table-section table tbody { display: block !important; }
body .calculator-container.calculator-container #cost-table-section table tr { display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 1px; padding: 6px 12px !important; border-bottom: 1px solid #e8ecf3; }
body .calculator-container.calculator-container #cost-table-section table tr:last-child { border-bottom: 0; }
body .calculator-container.calculator-container #cost-table-section table tr::before { content: ""; order: 3; flex: 0 0 100%; height: 0; }
body .calculator-container.calculator-container #cost-table-section table td { display: block !important; order: 4; padding: 0 !important; border: 0 !important; text-align: left !important; min-width: 0; width: auto !important; font-size: 12px !important; color: #5b6578; margin-right: 12px; overflow-wrap: anywhere; background: transparent; }
/* 구역 제목·주석 줄(한 칸 전체) */
body .calculator-container.calculator-container #cost-table-section table tr > td:only-child { order: 1; flex: 1 1 100% !important; margin-right: 0; font-size: 13px !important; color: inherit; }
/* 항목 이름(첫 칸) = 1줄 왼쪽 */
body .calculator-container.calculator-container #cost-table-section table td:first-child:not(:only-child) { order: 1; flex: 1 1 0 !important; font-size: 13.5px !important; font-weight: 600; color: #161b26; }
/* 항목(6칸): 합계(CAD) = 1줄 오른쪽, 합계(원) = 2줄 오른쪽 */
body .calculator-container.calculator-container #cost-table-section table td:nth-child(5):nth-last-child(2) { order: 2; margin-right: 0; font-size: 14px !important; font-weight: 700; color: #14213d; text-align: right !important; }
body .calculator-container.calculator-container #cost-table-section table td:nth-child(6):last-child { margin-left: auto; margin-right: 0; font-size: 12px !important; text-align: right !important; }
body .calculator-container.calculator-container #cost-table-section table td:nth-child(6):last-child::after { content: " 원"; }
body .calculator-container.calculator-container #cost-table-section table td:nth-child(2):nth-last-child(5)::before,
body .calculator-container.calculator-container #cost-table-section table td:nth-child(2):nth-last-child(3):not([colspan])::before { content: "수량 "; }
body .calculator-container.calculator-container #cost-table-section table td:nth-child(4):nth-last-child(3)::before { content: "단가 "; }
/* 소계(td, 빈 colspan=3, 값, 값) */
body .calculator-container.calculator-container #cost-table-section table td[colspan="3"]:nth-child(2) { display: none !important; }
body .calculator-container.calculator-container #cost-table-section table td[colspan="3"]:nth-child(2) ~ td:nth-child(3) { order: 2; margin-right: 0; font-size: 14px !important; font-weight: 700; color: #14213d; text-align: right !important; }
body .calculator-container.calculator-container #cost-table-section table td[colspan="3"]:nth-child(2) ~ td:nth-child(4) { margin-left: auto; margin-right: 0; font-size: 12px !important; text-align: right !important; }
/* 합계류(td, colspan=4, 값) */
body .calculator-container.calculator-container #cost-table-section table td[colspan="4"] { flex: 0 1 auto; }
body .calculator-container.calculator-container #cost-table-section table td[colspan="4"] ~ td { order: 2; margin-right: 0; font-size: 14px !important; font-weight: 700; color: #14213d; text-align: right !important; }
/* 사교육 줄·해운 주석(colspan 안에 글) */
body .calculator-container.calculator-container #cost-table-section table td[colspan="3"]:not(:nth-child(2)),
body .calculator-container.calculator-container #cost-table-section table td[colspan="5"] { flex: 1 1 100%; margin-right: 0; }

body .calculator-container.calculator-container #cost-table-section > p { margin: 6px 0 !important; }
/* 글자 없는 빈 문단(마크업 잔여)이 19px 씩 자리를 차지 — 화면 폭 좁은 곳에서만 접는다(글자·숫자·링크 영향 없음) */
body .calculator-container.calculator-container p:empty { display: none !important; }
body .calculator-container.calculator-container #with-mom-options { margin-top: 8px !important; }
/* <p><br></p> 간격용 문단 — 19px 씩 자리를 차지하므로 6px 로 줄인다(:has 미지원 브라우저는 기존 간격 그대로) */
body .calculator-container.calculator-container p:has(> br:only-child) { height: 6px !important; margin: 0 !important; padding: 0 !important; line-height: 6px !important; overflow: hidden; }
body .calculator-container.calculator-container #cost-table-section > p > br { display: none; }
body .calculator-container.calculator-container #cost-disclaimer { margin-top: 12px !important; padding: 12px !important; }

/* ---------- 추천 카드·저장/가입 영역 ---------- */
body .calculator-container.calculator-container .rec-section,
body .calculator-container.calculator-container .rec-section * { max-width: 100%; box-sizing: border-box; }
body .calculator-container.calculator-container #save-budget-section button { display: block; width: 100% !important; min-height: 48px; margin: 8px 0 !important; box-sizing: border-box; }
body .calculator-container.calculator-container div[style*="linear-gradient(135deg, #f8f9fa, #e8f5e9)"] { padding: 16px !important; }
body .calculator-container.calculator-container div[style*="linear-gradient(135deg, #f8f9fa, #e8f5e9)"] a { display: flex !important; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px !important; }

}