@charset "utf-8"; /* 엄마와 함께(/content/mt) 모바일 전용 재배치 — 사이클 5 (mobile 프로젝트) 확정 목업 「나안」: 짧은 상단 · 계산기 배너 · 바로가기 6칸 · 생활비용 한 줄 행 · 가로 줄 · 상담 2x2 · 행. 폭 767px 이하에서만 적용 — PC·태블릿(768px~)은 style.css 그대로. 마크업·스크립트·링크 무변경(감춤은 장식·중복 CTA 뿐). */ @media (max-width: 767px) { /* ── 공통 구간 ── */ #mt-hero .container, #mt-anchor-bar .container, #mt-cost-listing .container, #mt-private-schools .container, #mt-drone-videos .container, #mt-consultation .container, #mt-reviews .container, #mt-resources .container, #mt-resources ~ .study-cards-section .container-narrow { padding: 0 14px !important; } #mt-cost-listing, #mt-private-schools, #mt-drone-videos, #mt-reviews, #mt-resources { padding: 18px 0 6px; } #mt-consultation { padding: 20px 0 16px; } #mt-cost-listing .mt-section-head, #mt-private-schools .mt-section-head, #mt-drone-videos .mt-section-head, #mt-reviews .mt-section-head, #mt-resources .mt-section-head { margin-bottom: 8px; } #mt-consultation .mt-section-head { margin-bottom: 12px; } .mt-section-head .mt-accent-line { display: none; } .mt-section-head h2 { font-size: 1.05rem; letter-spacing: -0.3px; margin-bottom: 2px; } .mt-section-head p { font-size: 12px; line-height: 1.45; } .mt-section-more { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 8px; } .mt-section-more .mt-more-link { flex: 0 0 auto; font-size: 12px; white-space: nowrap; } /* ── 상단 + 계산기 배너 ── */ #mt-hero { min-height: 0; display: block; } #mt-hero .mt-hero-shapes { display: none; } #mt-hero .mt-hero-content { padding: 14px 0 14px; } #mt-hero .mt-hero-badge { padding: 4px 12px; font-size: 11.5px; margin-bottom: 8px; } #mt-hero h1 { font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.4px; margin-bottom: 4px; } #mt-hero .mt-hero-sub { font-size: 12px; line-height: 1.5; margin-bottom: 10px; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #mt-hero .mt-hero-ctas { display: block; } #mt-hero .mt-hero-cta:not([href="/cost-calculator/"]) { display: none; } #mt-hero .mt-hero-cta[href="/cost-calculator/"] { background: var(--amber-500); border: 0; border-radius: 14px; padding: 11px 14px; gap: 10px; min-width: 0; min-height: 56px; } #mt-hero .mt-hero-cta[href="/cost-calculator/"]::after { content: "›"; margin-left: auto; font-size: 1.4rem; font-weight: 800; } #mt-hero .mt-hero-cta-icon { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.22); } #mt-hero .mt-hero-cta-icon svg { width: 18px; height: 18px; } #mt-hero .mt-hero-cta-text b { font-size: 0.95rem; margin-bottom: 0; } #mt-hero .mt-hero-cta-text span { font-size: 11.5px; color: rgba(255,255,255,0.92); } /* ── 바로가기 6칸 ── */ #mt-anchor-bar { position: static; box-shadow: none; border-bottom: 0; background: var(--mt-bg); } #mt-anchor-bar .mt-anchor-bar-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow: visible; padding: 12px 0 2px; } #mt-anchor-bar .mt-anchor-link { display: grid; place-items: center; align-content: center; gap: 2px; min-height: 56px; padding: 8px 4px; text-align: center; background: #fff; border: 1px solid var(--warm-200); border-radius: 14px; font-size: 12px; font-weight: 800; color: var(--warm-700); } #mt-anchor-bar .mt-anchor-link::before { font-size: 18px; line-height: 1; font-weight: 400; } #mt-anchor-bar .mt-anchor-link[href="#mt-cost-listing"]::before { content: "💵"; } #mt-anchor-bar .mt-anchor-link[href="#mt-private-schools"]::before { content: "🏫"; } #mt-anchor-bar .mt-anchor-link[href="#mt-drone-videos"]::before { content: "🎥"; } #mt-anchor-bar .mt-anchor-link[href="#mt-consultation"]::before { content: "💬"; } #mt-anchor-bar .mt-anchor-link[href="#mt-reviews"]::before { content: "📝"; } #mt-anchor-bar .mt-anchor-link[href="#mt-resources"]::before { content: "📚"; } #mt-anchor-bar .mt-anchor-link:hover, #mt-anchor-bar .mt-anchor-link.active { background: var(--teal-700); color: #fff; border-color: var(--teal-700); } /* ── 생활비용: 칩 + 한 줄 행 ── */ #mt_cost_filter { margin-bottom: 8px; } #mt_cost_filter .f-row { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; margin-bottom: 6px; } #mt_cost_filter .f-label { min-width: 34px; font-size: 12px; } #mt_cost_filter .f-chip { min-height: 34px; padding: 0 14px; font-size: 12.5px; font-weight: 700; } #mt_cost_cards { display: block; background: #fff; border: 1px solid var(--warm-200); border-radius: 14px; overflow: hidden; } #mt_cost_cards .mt-card { position: relative; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; column-gap: 8px; row-gap: 2px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--warm-200); border-left: 3px solid var(--teal-700); border-radius: 0; box-shadow: none; transform: none; min-height: 64px; } #mt_cost_cards .mt-card:last-child { border-bottom: 0; } #mt_cost_cards .mt-card:hover { transform: none; box-shadow: none; } #mt_cost_cards .mt-card-head { display: contents; } #mt_cost_cards .mt-card-info { grid-column: 1 / 3; grid-row: 1; min-width: 0; } #mt_cost_cards .mt-card-name { font-size: 14px; margin-bottom: 1px; letter-spacing: -0.2px; } #mt_cost_cards .mt-card-meta { gap: 6px; } #mt_cost_cards .mt-badge { font-size: 10.5px; padding: 1px 7px; } #mt_cost_cards .mt-meta-text { font-size: 11.5px; } #mt_cost_cards .mt-cost-strip { display: contents; } #mt_cost_cards .mt-cs-op { display: none; } #mt_cost_cards .mt-cs-cell { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; min-width: 0; } #mt_cost_cards .mt-cs-cell:nth-of-type(1) { grid-column: 1; grid-row: 2; } #mt_cost_cards .mt-cs-cell.mid { grid-column: 2; grid-row: 2; } #mt_cost_cards .mt-cs-cell.end { grid-column: 3; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 0; } #mt_cost_cards .mt-cs-lbl { font-size: 10px; margin: 0; text-transform: none; letter-spacing: 0; } #mt_cost_cards .mt-cs-val { font-size: 12px; } #mt_cost_cards .mt-cs-val.total { font-size: 1rem; } #mt_cost_cards .mt-card-locked { cursor: pointer; } #mt_cost_cards .mt-card-locked::after { top: auto; bottom: 7px; right: 10px; font-size: 10px; padding: 2px 7px; } #mt_cost_guest_cta .mt-guest-cta { margin-top: 10px; padding: 12px 14px; border-radius: 14px; } #mt_cost_guest_cta .mt-guest-cta-inner { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; } #mt_cost_guest_cta .mt-guest-cta-title { font-size: 13px; margin-bottom: 2px; } #mt_cost_guest_cta .mt-guest-cta-sub { font-size: 11px; } #mt_cost_guest_cta .mt-guest-cta-btn { flex: 0 0 auto; padding: 0 12px; min-height: 40px; display: inline-flex; align-items: center; font-size: 12.5px; } #mt-cost-listing .mt-cost-cta-wrap { margin-top: 10px; } #mt-cost-listing .mt-cost-cta-link { width: 100%; justify-content: center; min-height: 44px; padding: 0 16px; font-size: 14px; } /* ── 추천 사립학교 · 드론 영상: 가로로 넘기는 줄 ── */ #mt-private-schools .mt-school-grid, #mt-drone-videos .mt-drone-grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; } #mt-private-schools .mt-school-grid::-webkit-scrollbar, #mt-drone-videos .mt-drone-grid::-webkit-scrollbar { display: none; } #mt-private-schools .mt-school-card { flex: 0 0 156px; scroll-snap-align: start; border-radius: 14px; } #mt-private-schools .mt-school-card:hover { transform: none; } #mt-private-schools .mt-school-card-img { height: 88px; } #mt-private-schools .mt-school-card-body { padding: 9px 10px; } #mt-private-schools .mt-school-card-name { font-size: 13px; margin-bottom: 3px; } #mt-private-schools .mt-school-card-location { font-size: 11px; margin-bottom: 6px; } #mt-private-schools .mt-school-tag { font-size: 10.5px; padding: 2px 7px; } #mt-drone-videos .mt-drone-card { flex: 0 0 176px; scroll-snap-align: start; border-radius: 14px; } #mt-drone-videos .mt-drone-card-overlay { padding: 10px; } #mt-drone-videos .mt-drone-play { width: 34px; height: 34px; font-size: 0.9rem; } #mt-drone-videos .mt-drone-card-title { font-size: 12px; } #mt-drone-videos .mt-drone-card-region { font-size: 10.5px; margin-bottom: 2px; } /* ── 상담 안내 2x2 ── */ #mt-consultation .mt-cta-grid { grid-template-columns: 1fr 1fr; gap: 8px; } #mt-consultation .mt-cta-card { padding: 12px 10px; border-radius: 14px; min-height: 96px; } #mt-consultation .mt-cta-card-icon { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 6px; } #mt-consultation .mt-cta-card-icon svg { width: 20px; height: 20px; } #mt-consultation .mt-cta-card-title { font-size: 13px; margin-bottom: 2px; } #mt-consultation .mt-cta-card-desc { font-size: 11px; line-height: 1.4; } /* ── 유학맘 후기: 분류 칩 + 가로 줄 ── */ #mt-reviews .mt-review-tabs { margin-bottom: 8px; } #mt-reviews .mt-review-tabs ul { scrollbar-width: none; } #mt-reviews .mt-review-tabs ul::-webkit-scrollbar { display: none; } #mt-reviews .mt-review-tabs ul li a { padding: 9px 12px; font-size: 12.5px; line-height: 1.4; min-height: 34px; } #mt-reviews #after-data-box .list-module-layout { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; } #mt-reviews #after-data-box .list-module-layout::-webkit-scrollbar { display: none; } #mt-reviews #after-data-box .list-module { flex: 0 0 184px; width: 184px; scroll-snap-align: start; display: block; background: #fff; border: 1px solid var(--warm-200); border-radius: 14px; overflow: hidden; margin: 0; } #mt-reviews #after-data-box .lm-type-a-img { width: 100%; height: 84px; overflow: hidden; } #mt-reviews #after-data-box .lm-type-a-img a, #mt-reviews #after-data-box .lm-type-a-img img { display: block; width: 100%; height: 84px; object-fit: cover; } #mt-reviews #after-data-box .lm-text-box { padding: 8px 10px 10px; } #mt-reviews #after-data-box .lm-text-cate { font-size: 10.5px; } #mt-reviews #after-data-box .lm-text-cont h3 { font-size: 12.5px; line-height: 1.35; margin: 2px 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #mt-reviews #after-data-box .lm-text-cont p { font-size: 11px; line-height: 1.4; margin: 0 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #mt-reviews #after-data-box .lm-text-cont span { font-size: 10px; } /* ── 자료실: 행 ── */ #mt-resources .mt-latest-sch-list { display: flex; flex-direction: column; gap: 0; background: #fff; border: 1px solid var(--warm-200); border-radius: 14px; overflow: hidden; } #mt-resources .mt-latest-sch-list .list-module { width: 100%; max-width: none; flex: 0 0 auto; margin: 0; border: 0; border-bottom: 1px solid var(--warm-200); border-radius: 0; box-shadow: none; padding: 0; } #mt-resources .mt-latest-sch-list .list-module:last-child { border-bottom: 0; } #mt-resources .mt-latest-sch-list .lm-text-box { padding: 10px 12px; } #mt-resources .mt-latest-sch-list .lm-text-cont h3 { font-size: 13px; line-height: 1.4; margin: 0 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #mt-resources .mt-latest-sch-list .lm-text-cont p { font-size: 11.5px; line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } #mt-resources .mt-latest-sch-list .lm-text-cont span { font-size: 10.5px; } /* ── 학업·대입 자료(공용 컴포넌트 — 이 페이지 구간 뒤의 것만) ── */ #mt-resources ~ .study-cards-section { padding: 18px 0 14px; margin: 12px 0 0; } #mt-resources ~ .study-cards-section .study-h2 { font-size: 1.05rem; margin-bottom: 2px; } #mt-resources ~ .study-cards-section .study-sub { font-size: 12px; margin-bottom: 10px; } #mt-resources ~ .study-cards-section .cross-cards { gap: 8px; } #mt-resources ~ .study-cards-section .cross-card { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; min-height: 0; padding: 10px 12px; border-radius: 14px; } #mt-resources ~ .study-cards-section .study-badge-free, #mt-resources ~ .study-cards-section .study-badge-lock { position: static; grid-column: 2; grid-row: 1; justify-self: start; margin-bottom: 3px; font-size: 10.5px; padding: 2px 7px; } #mt-resources ~ .study-cards-section .cross-icon { grid-column: 1; grid-row: 1 / 4; font-size: 24px; margin: 0; align-self: center; } #mt-resources ~ .study-cards-section .cross-card h3 { grid-column: 2; font-size: 14px; margin-bottom: 2px; } #mt-resources ~ .study-cards-section .cross-desc { grid-column: 2; font-size: 12px; line-height: 1.45; padding-bottom: 4px; margin-bottom: 0; } #mt-resources ~ .study-cards-section .cross-link { grid-column: 2; font-size: 12px; } #mt-resources ~ .study-cards-section .study-footer { margin-top: 10px; padding: 10px 12px; font-size: 11.5px; } }