/**
 * ===========================================================================
 * IGE 운영 배포 변경 파일 (deploy-2026-05-02-v2)
 * ---------------------------------------------------------------------------
 * 변경 종류: 수정 (overwrite)
 * 변경 위치: 추천 카드 관련 CSS 추가
 * 변경 내용: 추천 카드 CSS (결과 하단 추천 영역 스타일)
 * 운영 baseline 대비: 본 파일은 운영 baseline 존재. 패키지가 overwrite.
 * 변경 사유: 비용 계산기 결과 하단 추천 카드 UI
 * 의존성: cost-calculator/js/calculator.js
 * 관련 문서: FOR_DEVELOPER.md §5.2
 * ===========================================================================
 */
/**
 * IGE 통합 비용 계산기 스타일
 * 버전: 5.0.0 - Deep Ocean Monotone Blue
 * 작성일: 2026-01-15
 * 수정일: 2026-02-12
 * 디자인: 교육청 페이지와 동일한 Deep Ocean 팔레트
 */

/* ============================================
 * Design Tokens (Deep Ocean Palette)
 * ============================================ */
:root {
    --calc-ink-deep: #0a1628;
    --calc-ink-medium: #152238;
    --calc-ink-soft: #1e3a5f;
    --calc-azure: #0066cc;
    --calc-azure-bright: #2d8cf0;
    --calc-pearl: #f8fafc;
    --calc-silver: #94a3b8;
    --calc-border: #e2e8f0;
    --calc-section-bg: #f0f4f8;
    --calc-subtotal-bg: #e2e8f0;
    --calc-total-bg: #dce4ed;
    --calc-radius: 12px;
    --calc-radius-sm: 8px;
    --calc-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
    --calc-shadow-lg: 0 4px 6px rgba(0,0,0,0.02), 0 12px 24px rgba(0,0,0,0.06);
}

/* ============================================
 * Container
 * ============================================ */
.calculator-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    line-height: 1.6;
    color: #334155;
}

/* ============================================
 * Selection Box (카드형)
 * ============================================ */
.selection-box {
    background: white;
    border: 1px solid var(--calc-border);
    border-radius: var(--calc-radius);
    padding: 24px 28px;
    margin: 20px 0;
    box-shadow: var(--calc-shadow);
    position: relative;
}

.selection-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--calc-ink-deep), var(--calc-azure));
    border-radius: var(--calc-radius) var(--calc-radius) 0 0;
}

.selection-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.selection-item {
    flex: 1;
    min-width: 200px;
}

.selection-item label {
    display: block;
    font-weight: 600;
    color: var(--calc-ink-deep);
    margin-bottom: 8px;
    font-size: 13pt;
}

/* ============================================
 * Buttons
 * ============================================ */
.btn-group {
    display: flex;
    gap: 8px;
}

.btn-option {
    flex: 1;
    padding: 12px 20px;
    border: 1.5px solid var(--calc-border);
    border-radius: var(--calc-radius-sm);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}

.btn-option:hover {
    border-color: var(--calc-azure);
    color: var(--calc-azure);
    background: #f8faff;
}

.btn-option.active {
    background: var(--calc-ink-deep);
    border-color: var(--calc-ink-deep);
    color: #fff;
}

/* 도심외곽 - 모노톤 블루 (그린 제거) */
.btn-location[data-location="suburban"].active {
    background: var(--calc-ink-soft);
    border-color: var(--calc-ink-soft);
}

/* ============================================
 * Select Box
 * ============================================ */
.select-box {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid var(--calc-border);
    border-radius: var(--calc-radius-sm);
    background: #fff;
    font-size: 14px;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.2s;
}

.select-box:focus {
    outline: none;
    border-color: var(--calc-azure);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* ============================================
 * Radio Button
 * ============================================ */
.selection-box input[type="radio"] {
    accent-color: var(--calc-ink-deep);
}

/* ============================================
 * Cost Table Card Wrapper
 * ============================================ */
#cost-table-section {
    animation: fadeIn 0.3s ease;
}

#cost-table-section > .cost-card {
    background: white;
    border: 1px solid var(--calc-border);
    border-radius: var(--calc-radius);
    box-shadow: var(--calc-shadow-lg);
    overflow: hidden;
    margin-bottom: 20px;
}

/* 테이블 기본 스타일 */
#cost-table-section table {
    margin-bottom: 0;
    border-collapse: collapse;
    border: none;
}

#cost-table-section table td,
#cost-table-section table th {
    vertical-align: middle;
    border-color: var(--calc-border);
}

#cost-table-section table tr:hover td {
    background-color: rgba(0, 102, 204, 0.02);
}

/* ============================================
 * Summary Box (카드형)
 * ============================================ */
#summary-section {
    animation: fadeIn 0.3s ease;
}

.cost-summary-box {
    background: white;
    border: 1px solid var(--calc-border);
    border-radius: var(--calc-radius);
    padding: 24px;
    box-shadow: var(--calc-shadow-lg);
    position: relative;
}

.cost-summary-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--calc-ink-deep), var(--calc-azure-bright));
    border-radius: var(--calc-radius) var(--calc-radius) 0 0;
}

.cost-summary-header {
    font-size: 14pt;
    font-weight: 700;
    color: var(--calc-ink-deep);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--calc-border);
}

.cost-summary-condition {
    font-size: 12pt;
    color: #475569;
    margin-bottom: 16px;
    line-height: 1.8;
}

.cost-summary-cards {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.cost-summary-card {
    flex: 1;
    padding: 20px;
    border-radius: var(--calc-radius-sm);
    border: 1px solid var(--calc-border);
    position: relative;
    overflow: hidden;
}

.cost-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
}

.cost-summary-card.cost-initial {
    background: var(--calc-pearl);
}

.cost-summary-card.cost-initial::before {
    background: var(--calc-ink-deep);
}

.cost-summary-card.cost-monthly {
    background: var(--calc-pearl);
}

.cost-summary-card.cost-monthly::before {
    background: var(--calc-azure);
}

.cost-summary-card-label {
    font-size: 10pt;
    color: var(--calc-silver);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.cost-summary-card-amount {
    font-size: 16pt;
    font-weight: 700;
    color: var(--calc-ink-deep);
    margin-bottom: 4px;
}

.cost-summary-card-detail {
    font-size: 10pt;
    color: var(--calc-silver);
}

.cost-summary-total {
    font-size: 13pt;
    color: #334155;
    padding-top: 12px;
    border-top: 1px solid var(--calc-border);
}

/* ============================================
 * Exchange Rate Input
 * ============================================ */
#exchange-rate-input {
    border: 1.5px solid var(--calc-border);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 14px;
    transition: border-color 0.2s;
}

#exchange-rate-input:focus {
    outline: none;
    border-color: var(--calc-azure);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* ============================================
 * Child-Only Options
 * ============================================ */
#child-only-options .child-only-input {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--calc-border);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

#child-only-options .child-only-input:focus {
    outline: none;
    border-color: var(--calc-azure);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

#child-only-options .child-only-input[readonly] {
    background: var(--calc-pearl);
    color: var(--calc-silver);
}

/* ============================================
 * Save/Load Buttons
 * ============================================ */
#save-budget-btn,
#load-budget-btn {
    border-radius: var(--calc-radius-sm) !important;
    transition: all 0.25s ease !important;
}

#save-budget-btn:hover,
#load-budget-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--calc-shadow-lg) !important;
}

/* ============================================
 * Animations
 * ============================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-scale {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes checkBounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================
 * Lists
 * ============================================ */
ul {
    margin: 10px 0;
    padding-left: 20px;
}

ul li {
    margin: 5px 0;
}

hr {
    margin: 20px 0;
    border: none;
    border-top: 1px solid var(--calc-border);
}

/* ============================================
 * Responsive - Tablet
 * ============================================ */
@media (max-width: 768px) {
    .calculator-container {
        padding: 15px;
    }

    .selection-grid {
        flex-direction: column;
    }

    .selection-item {
        width: 100%;
    }

    .btn-group {
        flex-wrap: wrap;
    }

    .btn-option {
        min-width: 80px;
        padding: 10px 15px;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .selection-box > div[style*="display: flex"] {
        flex-direction: column !important;
    }

    .selection-box label[style*="padding: 15px"] {
        width: 100% !important;
        justify-content: center;
    }

    div[style*="background: #e3f2fd"],
    div[style*="background: var(--calc-pearl)"] {
        flex-direction: column;
        gap: 10px;
    }

    #child-only-options div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .cost-summary-cards {
        flex-direction: column;
    }

    .cost-summary-card-amount {
        font-size: 14pt;
    }
}

/* ============================================
 * Responsive - Mobile
 * ============================================ */
@media (max-width: 480px) {
    .calculator-container {
        padding: 10px;
    }

    .selection-box {
        padding: 16px;
    }

    table {
        font-size: 10pt !important;
    }

    table th, table td {
        padding: 6px 4px !important;
    }

    .cost-summary-box {
        padding: 16px;
    }

    .cost-summary-card {
        padding: 14px;
    }
}

/* ============================================
 * Print
 * ============================================ */
@media print {
    .selection-box,
    #save-budget-btn,
    #load-budget-btn,
    #exchange-rate-input {
        display: none !important;
    }

    #cost-table-section {
        page-break-inside: avoid;
    }
}


.back-info{
	box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 10px;
    text-align: left;
    font-size: 14px;
    margin-top: 10px;
    color: #0066cc;
	border:1px solid #0066cc;
    font-weight: 500;
    background: #fff;
    width: fit-content;
}

.point-area-title .back-info{
    color: #fff;
	border:1px solid #0066cc;
    background: #0066cc; 
    text-align: center;	
    font-size: 15px;
    width:100%;
}

.mem-action-pop{
	width:90%;
	max-width:560px;
	height:auto;
	box-sizing:border-box;
	background-color:#fff;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:1100;
	padding:30px;
	border-radius:20px;
	display:none;
	flex-direction:column;
	gap:20px;
}

.mem-action-pop.on{
	display:flex;
}

.mem-action-title{
	width:100%;
	height:auto;
	overflow:hidden;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
    align-items: center;
}

.mem-action-title h3{
	font-weight: 600;
    font-size: 1.05rem;
    color: #333;
}

.mem-action-title button.cloase-pop-btn{
	background: #0066cc !important;
    color: white;
    border-color: #0066cc;
	width: 35px;
    height: 35px;
    border: none;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
}

.mem-action-body{
	width:100%;
	height:auto;
	overflow:hidden;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;	
	gap:30px;
}

.mem-action-body .point-area-title{

}

.mem-action-body .point-area-title p{
	font-size:18px;
	font-weight:600;
	margin-bottom:10px;
}

.mem-action-body .point-area-title p.mem-txt{
	font-size:17px;
	box-sizing:border-box;
	padding:20px;
	background-color:#f8f8f8;
	border-radius:20px;
}

.mem-action-body .point-area-title p.mem-txt span{
	color:#0066cc;
}

.mem-action-body .point-desc{
	width:100%;
	height:auto;
	overflow:hidden;
	box-sizing:border-box;
	padding:20px;
	background:#f8f8f8;
	border-radius:20px;
	display:flex;
	flex-direction:column;	
	gap:10px	
}

.mem-action-body .point-desc ul{
	display:flex;
	flex-direction:row;	
	justify-content:space-between;
	align-items:center;	
}

.mem-action-body .point-desc ul li{
	box-sizing:border-box;
/*	padding-left:15px;*/
	position:relative;
	display:flex;
	flex-direction:column;
	gap:5px;
/*	justify-content:center;*/
	align-items:baseline;
	padding:10px 15px;
	border-radius:15px;
}

.mem-action-body .point-desc ul li.paid{
	background-color:#ffc107;
}

.mem-action-body .point-desc ul li.goin{
	background-color:#17a2b8;
}

.mem-action-body .point-desc ul li.goin span,
.mem-action-body .point-desc ul li.goin p{
	color:#fff;
}


.mem-action-body .point-desc ul li span{
	font-size:14px;
	font-weight:600;
}

.mem-action-body .point-desc ul li p{
	font-size:14px;
}

/*.mem-action-body .point-desc ul li:before{*/
/*	content:"";*/
/*	width:4px;*/
/*	height:4px;*/
/*	border-radius:50%;*/
/*	background-color:#222;*/
/*	position:absolute;*/
/*	left:0px;*/
/*	top:9px;*/
/*}*/

.mem-action-btm{
	width:100%;
	height:auto;
	overflow:hidden;
	box-sizing:border-box;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	gap:10px;
    align-items: center;
	position:relative;
	padding:20px 0px 0px 0px;
	border-top:1px solid #eee;
}

.mem-action-btm.between{
	justify-content:space-between;
}

.mem-action-btm button{
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
    font-size: 14px;
	border:1px solid #0066cc;
	color:#0066cc;
	background:none;
}

.mem-action-btm .view-app-btn{
/*    position:absolute;*/
/*	top:50%;*/
/*	left:50%;*/
/*	transform:translate(-50%,-50%);*/
}

.mem-action-btm .review-app-btn{
    font-size: 0.8rem;
	background-color:#fff;
}

.mem-action-btm .review-app-btn:hover{
    color:#222;
	background-color:#fff;
	text-decoration:underline;
}

.mem-action-btm button:hover{
	background: #0066cc;
    color: white;
}

.point-area{
	display:flex;
	gap:20px;
}

.go-app-btn {border: 1px solid #222 !important; background: #ffc107 !important; color:#222 !important;}   
/* ============================================================
   [PLAN_P0c v6] 비용계산기 결과 하단 예산 매칭 추천 카드
   2026-04-21 — Editorial 한지 (Refined Warm Minimalism)
   Pretendard Variable (body) + Fraunces Variable (display)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..700,25;0,9..144,300..700,100;1,9..144,300..700,25&display=swap');

.rec-section {
  --rec-accent-teal:       #0d7680;
  --rec-accent-amber:      #e57a00;
  --rec-accent-navy:       #1e3a5f;
  --rec-accent-green:      #2d7d4f;
  --rec-accent-teal-soft:  #e6f2f3;
  --rec-accent-amber-soft: #fef3e7;
  --rec-accent-navy-soft:  #e8ecf1;
  --rec-accent-green-soft: #e7f2ec;
  --rec-ink-900: #0f172a;
  --rec-ink-700: #334155;
  --rec-ink-500: #64748b;
  --rec-ink-400: #94a3b8;
  --rec-ink-300: #cbd5e1;
  --rec-ink-200: #e2e8f0;
  --rec-ink-100: #f1f5f9;
  --rec-card-bg: #ffffff;
  --rec-card-border: rgba(15, 23, 42, 0.06);
  --rec-shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.04);
  --rec-shadow-hover: 0 4px 8px -4px rgba(15,23,42,0.08), 0 12px 24px -8px rgba(15,23,42,0.10);
  --rec-shadow-online: 0 2px 4px rgba(229,122,0,0.08), 0 12px 32px -12px rgba(229,122,0,0.24);
  --rec-font-kr: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --rec-font-display: 'Fraunces', 'Pretendard Variable', serif;
  --rec-page-accent: var(--rec-accent-teal);
  --rec-page-accent-soft: var(--rec-accent-teal-soft);

  margin-top: 24px;
  padding: 32px 0 8px;
  position: relative;
  font-family: var(--rec-font-kr);
  color: var(--rec-ink-900);
}
.rec-section[data-scenario="homestay"] { --rec-page-accent: var(--rec-accent-green); --rec-page-accent-soft: var(--rec-accent-green-soft); }
.rec-section[data-scenario="boarding"] { --rec-page-accent: var(--rec-accent-navy);  --rec-page-accent-soft: var(--rec-accent-navy-soft); }
.rec-section[data-scenario="managed"]  { --rec-page-accent: var(--rec-accent-amber); --rec-page-accent-soft: var(--rec-accent-amber-soft); }
.rec-section[data-scenario="family"]   { --rec-page-accent: var(--rec-accent-teal);  --rec-page-accent-soft: var(--rec-accent-teal-soft); }

.rec-section * { box-sizing: border-box; }
.rec-section__head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 24px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rec-ink-200);
}
.rec-section__eyebrow {
  font-family: var(--rec-font-display); font-style: italic; font-weight: 400;
  font-size: 13px; letter-spacing: 0.02em;
  color: var(--rec-page-accent);
  font-variation-settings: "opsz" 14;
}
.rec-section__title {
  font-family: var(--rec-font-display); font-weight: 400;
  font-size: 22px; letter-spacing: -0.01em;
  color: var(--rec-ink-900); margin: 0;
  font-variation-settings: "opsz" 32, "SOFT" 25;
}
.rec-section__title b {
  font-weight: 500; font-style: italic;
  color: var(--rec-page-accent);
}
.rec-section__meta {
  margin-left: auto;
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rec-ink-400); font-weight: 500;
}
.rec-section__ornament {
  position: absolute; top: 38px; right: 0;
  font-family: var(--rec-font-display); font-style: italic; font-weight: 300;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--rec-ink-300); text-transform: uppercase;
  pointer-events: none;
}

.rec-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) {
  .rec-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* --- .rec-card 정상 카드 --- */
.rec-card {
  position: relative;
  background: var(--rec-card-bg);
  border: 1px solid var(--rec-card-border);
  border-radius: 2px;
  padding: 22px 24px 20px 28px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 200px;
  box-shadow: var(--rec-shadow-card);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.3, 1),
              box-shadow 200ms ease, border-color 160ms ease;
  overflow: hidden;
  animation: rec-card-in 480ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  text-decoration: none; color: inherit;
}
.rec-card:nth-child(1) { animation-delay: 0ms; }
.rec-card:nth-child(2) { animation-delay: 80ms; }
.rec-card:nth-child(3) { animation-delay: 160ms; }
.rec-card:nth-child(4) { animation-delay: 240ms; }
.rec-card:nth-child(5) { animation-delay: 320ms; }
@keyframes rec-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rec-card, .rec-online-card { animation: none; }
}

.rec-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--rec-card-accent, var(--rec-accent-teal));
  transition: width 180ms ease;
}
.rec-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rec-shadow-hover);
  border-color: rgba(15, 23, 42, 0.10);
}
.rec-card:hover::before { width: 6px; }
.rec-card[data-scenario="homestay"] { --rec-card-accent: var(--rec-accent-green); --rec-card-accent-soft: var(--rec-accent-green-soft); }
.rec-card[data-scenario="boarding"] { --rec-card-accent: var(--rec-accent-navy);  --rec-card-accent-soft: var(--rec-accent-navy-soft); }
.rec-card[data-scenario="managed"]  { --rec-card-accent: var(--rec-accent-amber); --rec-card-accent-soft: var(--rec-accent-amber-soft); }
.rec-card[data-scenario="family"]   { --rec-card-accent: var(--rec-accent-teal);  --rec-card-accent-soft: var(--rec-accent-teal-soft); }

.rec-card svg, .rec-online-card svg,
.rec-card__icon svg, .rec-card__cta svg,
.rec-online-card__icon svg, .rec-online-card__cta svg {
  width: 100%; height: 100%; display: block;
}
.rec-card__cta-arrow, .rec-online-card__cta-arrow {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 200ms cubic-bezier(0.3, 0.8, 0.3, 1);
}
.rec-card:hover .rec-card__cta-arrow,
.rec-online-card:hover .rec-online-card__cta-arrow { transform: translateX(3px); }

.rec-card__top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.rec-card__category {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--rec-card-accent);
  background: var(--rec-card-accent-soft);
  border-radius: 2px;
}
.rec-card__icon {
  flex-shrink: 0; width: 28px; height: 28px;
  color: var(--rec-card-accent); opacity: 0.85;
}
.rec-card__body { flex-grow: 1; }
.rec-card__title {
  font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.012em;
  color: var(--rec-ink-900); margin: 0 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rec-card__sub { font-size: 12px; color: var(--rec-ink-500); }
.rec-card__price {
  display: flex; align-items: baseline; gap: 8px;
  padding-top: 8px; border-top: 1px dashed var(--rec-ink-200);
}
.rec-card__price-num {
  font-family: var(--rec-font-display); font-weight: 400;
  font-size: 28px; line-height: 1;
  color: var(--rec-ink-900);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "cv11";
  font-variation-settings: "opsz" 36, "SOFT" 0;
  letter-spacing: -0.01em;
}
.rec-card__price-caption {
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rec-ink-500);
}
.rec-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--rec-ink-100);
}
.rec-card__no {
  font-family: var(--rec-font-display); font-style: italic; font-weight: 400;
  font-size: 11px; color: var(--rec-ink-400); letter-spacing: 0.02em;
  font-variation-settings: "opsz" 14;
}
.rec-card__no::before { content: "No. "; }
.rec-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  color: var(--rec-card-accent);
  text-decoration: none; letter-spacing: -0.005em;
}

/* --- .rec-card--hidden 학비 문의 카드 --- */
.rec-card--hidden .rec-card__price { border-top-style: dotted; }
.rec-card--hidden .rec-card__price-inquiry {
  font-family: var(--rec-font-display); font-style: italic; font-weight: 400;
  font-size: 20px; color: var(--rec-card-accent); line-height: 1;
  font-variation-settings: "opsz" 24;
}
.rec-card--hidden .rec-card__price-caption { color: var(--rec-ink-400); }
.rec-card--hidden .rec-card__recommended-mark {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; padding: 2px 8px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--rec-card-accent);
  border: 1px solid var(--rec-card-accent);
  border-radius: 2px; background: transparent;
}

/* --- .rec-online-card 온라인 프로그램 (세컨더리 보조) --- */
.rec-online-card {
  position: relative;
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #fffdf9 0%, var(--rec-accent-amber-soft) 100%);
  border: 1px solid rgba(229, 122, 0, 0.18);
  border-radius: 2px;
  padding: 26px 28px;
  display: flex; align-items: center; gap: 28px;
  overflow: hidden;
  box-shadow: var(--rec-shadow-online);
  animation: rec-card-in 480ms cubic-bezier(0.2, 0.8, 0.3, 1) 320ms backwards;
  transition: transform 200ms ease, box-shadow 200ms ease;
  text-decoration: none; color: inherit;
}
.rec-online-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(229,122,0,0.12), 0 16px 40px -16px rgba(229,122,0,0.28);
}
.rec-online-card::after {
  content: "";
  position: absolute; top: -20px; right: -20px;
  width: 120px; height: 120px;
  background-image: radial-gradient(circle, rgba(229,122,0,0.12) 1px, transparent 1.5px);
  background-size: 10px 10px;
  pointer-events: none; opacity: 0.6;
}
.rec-online-card__badge {
  flex-shrink: 0;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 12px 14px;
  background: var(--rec-accent-amber); color: white;
  border-radius: 2px; min-width: 72px; text-align: center;
  position: relative;
}
.rec-online-card__badge-num {
  font-family: var(--rec-font-display); font-weight: 400;
  font-size: 28px; line-height: 1; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 32;
}
.rec-online-card__badge-label {
  font-size: 10px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.92;
}
.rec-online-card__body { flex-grow: 1; min-width: 0; }
.rec-online-card__title {
  font-size: 17px; font-weight: 600;
  color: var(--rec-ink-900); letter-spacing: -0.012em;
  margin: 0 0 4px; line-height: 1.3;
}
.rec-online-card__tagline {
  font-size: 13px; color: var(--rec-ink-700); line-height: 1.5;
  letter-spacing: -0.005em; margin: 0;
}
.rec-online-card__tagline strong {
  color: var(--rec-accent-amber); font-weight: 600;
}
.rec-online-card__icon {
  flex-shrink: 0; width: 44px; height: 44px;
  color: var(--rec-accent-amber); opacity: 0.4;
  display: flex; align-items: center; justify-content: center;
}
.rec-online-card__cta {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  font-size: 13px; font-weight: 500;
  color: white; background: var(--rec-accent-amber);
  text-decoration: none; border-radius: 2px; letter-spacing: -0.005em;
  transition: transform 180ms ease, background 160ms ease;
}
.rec-online-card__cta:hover { background: #c96a00; transform: translateX(2px); }
@media (max-width: 639px) {
  .rec-online-card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .rec-online-card__icon { display: none; }
  .rec-online-card__cta { align-self: stretch; justify-content: center; }
}

/* --- .rec-card-skel 스켈레톤 로딩 --- */
.rec-card-skel {
  background: var(--rec-card-bg);
  border: 1px solid var(--rec-card-border);
  border-radius: 2px;
  padding: 22px 24px 20px 28px;
  min-height: 200px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
}
.rec-card-skel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--rec-ink-200);
}
.rec-card-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.65) 50%, transparent 70%);
  animation: rec-shimmer 1400ms ease-in-out infinite;
}
@keyframes rec-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .rec-card-skel::after { animation: none; opacity: 0.35; }
}
.rec-card-skel__line {
  background: var(--rec-ink-100); border-radius: 2px; height: 12px;
}
.rec-card-skel__line--sm { height: 10px; width: 40%; }
.rec-card-skel__line--md { height: 14px; width: 78%; }
.rec-card-skel__line--lg { height: 28px; width: 45%; margin-top: 8px; }
.rec-card-skel__line--xs { height: 10px; width: 25%; }

/* ================================================================== */
/* .card 패밀리 — /homestay_shool (hs_hybrid) 스타일 기반 (2026-04-22) */
/* ================================================================== */

/* 전용 CSS 변수 (hs_hybrid와 독립) */
.rec-grid {
  --c-ink:      #1c1c1e;
  --c-ink-2:    #3a3a3c;
  --c-ink-3:    #8e8e93;
  --c-ink-4:    #aeaeb2;
  --c-surface:  #ffffff;
  --c-bg:       #f7f7f8;
  --c-border:   #e8e8eb;
  --c-radius:   10px;
  --c-teal:     #0d7680;
  --c-teal-soft: #e6f2f3;
  --c-teal-mid:  #b8dfe3;
  --c-amber:    #e57a00;
  --c-amber-soft: #fef3e7;
  --c-blue:     #1e3a5f;
  --c-blue-soft: #e8ecf1;
  --c-green:    #2d7d4f;
  --c-green-soft: #e7f2ec;
  --c-violet:   #6b4ea8;
  --c-violet-soft: #ece5f5;
  --c-rose:     #a84a6b;
  --c-rose-soft: #f7e8ec;
}

.rec-grid .card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: 14px;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
  min-height: auto;
  animation: rec-card-in 480ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
.rec-grid .card:nth-child(1) { animation-delay: 0ms; }
.rec-grid .card:nth-child(2) { animation-delay: 80ms; }
.rec-grid .card:nth-child(3) { animation-delay: 160ms; }
.rec-grid .card:nth-child(4) { animation-delay: 240ms; }
.rec-grid .card:nth-child(5) { animation-delay: 320ms; }
.rec-grid .card:hover {
  border-color: var(--c-teal);
  box-shadow: 0 4px 12px rgba(13, 118, 128, 0.08);
}
.rec-grid .card:active { transform: scale(0.995); }

/* 시나리오별 hover/border 색상 */
.rec-grid .card[data-scenario="childonly_homestay"]:hover { border-color: var(--c-green); box-shadow: 0 4px 12px rgba(45, 125, 79, 0.10); }
.rec-grid .card[data-scenario="childonly_dormitory"]:hover { border-color: var(--c-blue); box-shadow: 0 4px 12px rgba(30, 58, 95, 0.10); }
.rec-grid .card[data-scenario="childonly_managed"]:hover  { border-color: var(--c-amber); box-shadow: 0 4px 12px rgba(229, 122, 0, 0.10); }
.rec-grid .card[data-scenario="withparent"]:hover         { border-color: var(--c-teal); box-shadow: 0 4px 12px rgba(13, 118, 128, 0.10); }

.rec-grid .card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.rec-grid .card-av {
  width: 56px; height: 50px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--c-teal-soft);
  border: 1px solid var(--c-teal-mid);
}
.rec-grid .card[data-scenario="childonly_homestay"]  .card-av { background: var(--c-green-soft);  border-color: #c5dfcc; }
.rec-grid .card[data-scenario="childonly_dormitory"] .card-av { background: var(--c-blue-soft);   border-color: #c9d2df; }
.rec-grid .card[data-scenario="childonly_managed"]   .card-av { background: var(--c-amber-soft);  border-color: #f0dfc0; }
.rec-grid .card[data-scenario="withparent"]          .card-av { background: var(--c-teal-soft);   border-color: var(--c-teal-mid); }

.rec-grid .card-av-initial {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--c-ink-2);
}
.rec-grid .card[data-scenario="childonly_homestay"]  .card-av-initial { color: var(--c-green); }
.rec-grid .card[data-scenario="childonly_dormitory"] .card-av-initial { color: var(--c-blue); }
.rec-grid .card[data-scenario="childonly_managed"]   .card-av-initial { color: var(--c-amber); }
.rec-grid .card[data-scenario="withparent"]          .card-av-initial { color: var(--c-teal); }

.rec-grid .card-body { flex: 1; min-width: 0; }

.rec-grid .card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 6px 0;
  line-height: 1.35;
  word-break: keep-all;
}

.rec-grid .card-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.rec-grid .badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.5;
  white-space: nowrap;
}
.rec-grid .badge--prov-bc   { background: var(--c-teal-soft);   color: var(--c-teal); }
.rec-grid .badge--prov-on   { background: var(--c-amber-soft);  color: var(--c-amber); }
.rec-grid .badge--prov-other{ background: var(--c-rose-soft);   color: var(--c-rose); }
.rec-grid .badge--category  { background: var(--c-bg);          color: var(--c-ink-2); border: 1px solid var(--c-border); }
.rec-grid .badge--direct    { background: var(--c-green-soft);  color: var(--c-green); }
.rec-grid .badge--agency    { background: var(--c-amber-soft);  color: var(--c-amber); }
.rec-grid .badge--gender    { background: var(--c-violet-soft); color: var(--c-violet); }
.rec-grid .badge--ige       { background: var(--c-teal); color: #fff; }
.rec-grid .badge--operator  { background: var(--c-blue-soft);   color: var(--c-blue); }

.rec-grid .card-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-ink-2);
  margin: 4px 0 0 0;
  line-height: 1.4;
}
.rec-grid .card-meta .price-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
}
.rec-grid .card-meta .price-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-ink-4);
  margin-left: 3px;
}
.rec-grid .card-meta .price-hidden {
  font-style: normal;
  font-weight: 600;
  color: var(--c-ink-3);
}
.rec-grid .card-sub {
  font-size: 11px;
  color: var(--c-ink-4);
  margin-top: 2px;
}

@media (max-width: 600px) {
  .rec-grid .card { padding: 12px; }
  .rec-grid .card-av { width: 44px; height: 44px; border-radius: 8px; }
  .rec-grid .card-av-initial { font-size: 13px; }
  .rec-grid .card-title { font-size: 14px; }
}