/* 프로그램 카드 컴포넌트(components/program-card.blade.php) — 메인 페이지와 키워드 랜딩 지면이 같은 파일을 쓴다.
   main.css보다 먼저 싣는다: .ghost/.x-* 전환 규칙이 같은 특이성으로 이 규칙들을 이겨야 한다. */

.cardA { position: relative; min-width: 0; aspect-ratio: var(--mp-card-aspect); overflow: hidden; container-type: inline-size; border: 1px solid var(--mp-line); border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-1); transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--mp-ease), opacity .5s var(--mp-ease); }
.cardA:hover, .cardA:focus-within { border-color: var(--mp-accent); box-shadow: var(--sh-2); transform: translateY(-3px); }
.cardA__link { display: flex; flex-direction: column; height: 100%; outline: 0; }
.cardA__media { display: block; aspect-ratio: 375 / 282; overflow: hidden; border-bottom: 1px solid rgba(0,0,0,.12); background: var(--gray-100); }
.cardA__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--mp-ease); }
.cardA:hover .cardA__media img { transform: scale(1.025); }
.cardA__body { display: flex; flex: 1; flex-direction: column; gap: .6cqw; min-height: 0; padding: 3.5cqw 6.47cqw calc(clamp(9px, 4.53cqw, 17px) + clamp(13px, 5.465cqw, 20.5px) - clamp(5.5px, 2.3cqw, 12px)); }
.cardA__partner { display: block; overflow: hidden; color: rgba(16,49,107,.58); font-size: clamp(12px, 4.1cqw, 20px); font-weight: 600; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.cardA__name { display: block; overflow: hidden; color: var(--text-main); font-size: clamp(15px, 6.3cqw, 32px); font-weight: 800; line-height: 1.4; letter-spacing: -.011em; text-overflow: ellipsis; white-space: nowrap; }
.cardA__desc { display: block; margin-top: .4cqw; /* Card body gap .6cqw + delta .4cqw = 1cqw. */ overflow: hidden; color: rgba(0,0,0,.5); font-size: clamp(12px, 4.5cqw, 23px); font-weight: 400; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.cardA__price { display: flex; align-items: baseline; gap: 1.2cqw; margin-top: auto; padding-top: 3.4cqw; color: var(--mp-price); font-size: clamp(13.5px, 5.55cqw, 28px); font-weight: 800; line-height: 1.4; }
.cardA__price small { color: var(--gray-500); font-size: clamp(12px, 4cqw, 20px); font-weight: 500; }
.cardA__review { display: flex; align-items: center; gap: 1.2cqw; margin-top: 2cqw; /* Card body gap .6cqw + delta 2cqw = 2.6cqw. */ color: var(--text-main); font-size: clamp(12px, 4.6cqw, 24px); font-weight: 700; line-height: 1; }
.cardA__review .star { width: 4.99cqw; height: 4.68cqw; }
.cardA__review small { color: rgba(0,0,0,.45); font-size: clamp(12px, 4cqw, 20px); font-weight: 500; }
.cardA__go { position: absolute; right: clamp(10px, 4.8cqw, 18px); bottom: clamp(9px, 4.53cqw, 17px); width: clamp(32px, 10.93cqw, 41px); height: clamp(32px, 10.93cqw, 41px); pointer-events: none; }
.fav { position: absolute; z-index: 2; top: clamp(7px, 3.2cqw, 12px); right: clamp(7px, 3.2cqw, 12px); width: clamp(32px, 10.93cqw, 41px); height: clamp(32px, 10.93cqw, 41px); display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.38); color: #fff; transition: transform .2s ease, background .2s ease; }
.fav:hover { transform: scale(1.08); background: rgba(0,0,0,.55); }
.fav svg { width: 50%; height: 50%; fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: fill .2s ease, stroke .2s ease; }
.fav[aria-pressed="true"] svg { fill: var(--accent-red); stroke: var(--accent-red); animation: favPop .4s var(--mp-ease); }
@keyframes favPop { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 65% { transform: scale(.9); } 100% { transform: scale(1); } }
.star { flex: none; fill: var(--accent-star); }

.cardB { position: relative; min-width: 0; align-self: start; container-type: inline-size; }
.cardB__link { display: flex; flex-direction: column; gap: .8cqw; }
.cardB__partner { display: block; overflow: hidden; color: rgba(16,49,107,.58); font-size: clamp(12px, 5.3cqw, 20px); font-weight: 600; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.cardB__name { display: block; overflow: hidden; color: var(--text-main); font-size: clamp(15px, 8.1cqw, 32px); font-weight: 800; line-height: 1.4; letter-spacing: -.011em; text-overflow: ellipsis; white-space: nowrap; }
.cardB__desc { display: block; margin-top: .5cqw; /* Link gap .8cqw + delta .5cqw = 1.3cqw. */ overflow: hidden; color: rgba(0,0,0,.5); font-size: clamp(12px, 5.8cqw, 23px); font-weight: 400; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.cardB__price { display: flex; align-items: baseline; gap: 1.2cqw; margin-top: 3.4cqw; /* Link gap .8cqw + delta 3.4cqw = 4.2cqw. */ color: var(--mp-price); font-size: clamp(13.5px, 7.1cqw, 28px); font-weight: 800; line-height: 1.4; }
.cardB__price small { color: var(--gray-500); font-size: clamp(12px, 5.1cqw, 20px); font-weight: 500; }
.cardB__media { margin-top: 5.55cqw; /* Link gap .8cqw + delta 5.55cqw = 6.35cqw. */ position: relative; display: block; aspect-ratio: 410.6 / 481.4; overflow: hidden; border: 1px solid var(--mp-line); border-radius: var(--r-md); background: var(--gray-100); box-shadow: var(--sh-1); transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--mp-ease); }
.cardB__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--mp-ease); }
.cardB__media::after { content: ""; position: absolute; inset: 74.6% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.88)); pointer-events: none; }
.cardB:hover .cardB__media, .cardB:focus-within .cardB__media { border-color: var(--mp-accent); box-shadow: var(--sh-2); transform: translateY(-3px); }
.cardB:hover .cardB__media img { transform: scale(1.025); }
.glass-review { position: absolute; z-index: 2; display: flex; align-items: center; border-radius: 999px; background: rgba(0,0,0,.38); color: #fff; font-weight: 700; }
.cardB .glass-review { right: 4.7cqw; bottom: 8.08cqw; gap: 1.2cqw; height: 12.54cqw; padding: 0 4.5cqw; font-size: clamp(12px, 5.9cqw, 24px); }
.cardB .glass-review .star { width: 6.48cqw; height: 6.07cqw; }
.cardB .glass-review small { font-size: clamp(12px, 5cqw, 20px); font-weight: 500; }
.cardB .fav { top: auto; right: auto; bottom: 8.08cqw; left: 4.7cqw; width: max(32px, 12.54cqw); height: max(32px, 12.54cqw); }

/* 기본 opacity 0 — 메인 아코디언이 열릴 때 보인다(main.css `.acc__item[data-open]`). 다른 지면에서 쓰려면 그 지면이 열어야 한다. */
.cardC { position: relative; overflow: hidden; aspect-ratio: 480 / 702; border-radius: var(--r-md); background: #000; color: #fff; container-type: inline-size; opacity: 0; transform: translateY(10px); transition: opacity .36s ease, transform .44s cubic-bezier(.4,0,.2,1), box-shadow .2s ease; transition-delay: var(--stagger); }
.cardC:hover { box-shadow: var(--sh-2); transform: translateY(-4px); }
.cardC__link { display: block; height: 100%; color: #fff; }
.cardC__img { display: block; width: 100%; height: 68.41%; object-fit: cover; }
.cardC::after { content: ""; position: absolute; z-index: 1; inset: 50.28% 0 0; background: linear-gradient(to bottom, transparent, #000 35.577%); pointer-events: none; }
.cardC__body { position: absolute; z-index: 2; right: 7.415cqw; bottom: 6.2cqw; left: 7.415cqw; display: flex; flex-direction: column; gap: .6cqw; pointer-events: none; }
.cardC__body > span, .cardC__body > strong { display: block; overflow: hidden; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.cardC__partner { color: rgba(255,255,255,.72); font-size: max(12px, 4.4cqw); font-weight: 600; }
.cardC__name { font-size: 7.4cqw; font-weight: 800; letter-spacing: -.011em; }
.cardC__desc { margin-top: .4cqw; /* Body gap .6cqw + delta .4cqw = 1cqw. */ color: rgba(255,255,255,.78); font-size: max(12px, 4.6cqw); font-weight: 400; }
.cardC__body > .cardC__price { display: flex; align-items: baseline; gap: 1cqw; margin-top: 2.6cqw; /* Body gap .6cqw + delta 2.6cqw = 3.2cqw. */ font-size: 6cqw; font-weight: 800; }
.cardC__price small { color: rgba(255,255,255,.7); font-size: max(12px, 4.2cqw); font-weight: 500; }
.cardC .glass-review { top: 56.98%; right: 3.195cqw; gap: 1.3cqw; height: 10.875cqw; padding: 0 3.7cqw; font-size: max(12px, 5cqw); }
.cardC .glass-review .star { width: 5.61cqw; height: 5.25cqw; }
.cardC .glass-review small { font-size: max(12px, 4.3cqw); font-weight: 500; }
.cardC .fav { top: 56.98%; right: auto; left: 3.195cqw; width: max(32px, 10.875cqw); height: max(32px, 10.875cqw); }
.cardB__link:focus-visible { outline: 3px solid var(--mp-accent); outline-offset: 3px; }
.cardC__link:focus-visible { outline: 3px solid var(--mp-accent); outline-offset: -3px; }
.fav:disabled { cursor: wait; }