:root {
  --mp-deep: var(--accent-navy);              /* 시안 #08344e — 짙은 본문·활성 레일 */
  --mp-soft: var(--canvas-bg);                /* 시안 #f6f7fa — 교차 섹션 배경 */
  --mp-line-soft: var(--gray-200);
  --mp-copy: rgba(16, 49, 107, .7);
  --feature-w: clamp(300px, 66.25vw, 1100px);
  --wide-w: min(calc(100% - 48px), clamp(300px, 79.5vw, 1440px));
  --section-pad: 96px;
  --r-sm: 12px; --r-lg: 28px;
}
body { background: #fff; color: var(--text-main); word-break: keep-all; }
main { overflow: clip; }
main a { color: inherit; text-decoration: none; }
main button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; }
.shell { width: var(--wide-w); margin: 0 auto; }

.sec { padding: var(--section-pad) 0; }
.sec--soft { background: var(--mp-soft); }
.sec > .shell { display: flex; flex-direction: column; gap: var(--head-gap, 36px); }
.section-content { display: flex; flex-direction: column; gap: 28px; }
.sec__head { display: flex; flex-direction: column; gap: 10px; }
.sec > .shell:has(.sec__head--wide) { --head-gap: 48px; }
.sec__eyebrow { margin: 0 0 2px; /* Header gap 10px + delta 2px = 12px. */ color: var(--mp-accent); font-size: 12px; font-weight: 900; line-height: 1; letter-spacing: .02em; }
.sec__title { margin: 0; color: var(--mp-deep); font-size: clamp(28px, 1.67vw, 32px); font-weight: 700; line-height: 1.35; letter-spacing: -.03em; }
.sec__copy { margin: 0; color: var(--mp-copy); font-size: clamp(14px, .84vw, 16px); font-weight: 500; line-height: 1.5; letter-spacing: -.011em; }
.tab-pill { flex: none; height: 40px; padding: 0 14px; border: 1px solid var(--mp-line-soft); border-radius: var(--radius-full); background: #fff; color: var(--gray-500); font-size: 14px; font-weight: 500; letter-spacing: -.011em; transition: border-color .3s ease-out, background .3s ease-out, color .3s ease-out; }
@media (hover: hover) { .tab-pill:hover { border-color: var(--gray-400); color: var(--text-main); } }
.tab-pill[aria-selected="true"] { border-color: var(--mp-deep); background: var(--mp-deep); color: #fff; font-weight: 800; }
.tab-pill:focus-visible { outline: 3px solid rgba(37, 99, 235, .18); outline-offset: 2px; }
#budgetTabs .tab-pill:disabled { border-color: var(--gray-200); background: var(--gray-100); color: var(--gray-400); cursor: not-allowed; }
.pills { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nav { display: flex; flex: none; align-items: center; gap: 10px; }
.dots { display: flex; align-items: center; margin-right: 8px; /* Parent navigation gap 10px + delta 8px = 18px. */ }
/* Transparent border = tap area (15×32); the visible dot is the padding box, so the 7px sibling gap lives in the border. */
.dot { position: relative; overflow: hidden; box-sizing: content-box; width: 8px; height: 8px; border: solid transparent; border-width: 12px 3.5px; border-radius: 7.5px / 16px; background: var(--gray-300); background-clip: padding-box; transition: width .3s var(--mp-ease), background .3s ease; }
.dot[aria-current="true"] { width: 30px; background-color: rgba(16,49,107,.18); }
.dot[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--mp-deep); transform: translateX(calc((var(--dots-elapsed, 0) - 1) * 100%)); will-change: transform; }
.arrow-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--mp-line); border-radius: 50%; background: #fff; color: var(--gray-600); font-size: 14px; box-shadow: var(--sh-1); transition: transform .2s var(--mp-ease), border-color .2s ease, color .2s ease, box-shadow .2s ease; }
@media (hover: hover) { .arrow-btn:hover { border-color: var(--mp-accent); color: var(--mp-accent); box-shadow: var(--sh-2); transform: scale(1.08); } }

/* --slide-h = --feature-w / 2.355: 완성형 배너(1816×771) 비율, 잘리면 구워진 카피가 사라진다 — 640px 이하에서 모바일 이미지가 다 갖춰지면 --feature-w * 4/3(3:4 권장 틀, 다른 비율은 잘린다)으로 바뀐다 */
.mh { display: flex; flex-direction: column; gap: 8px; --slide-h: min(28.13vw, 467px); --hero-x: clamp(20px, 3%, 40px); --hero-y: clamp(16px, 6%, 32px); position: relative; isolation: isolate; padding: 40px 0 46px; background: var(--mp-soft); }
.hero__carousel { position: relative; }
/* 바깥 뷰포트가 자르고(마스크 페이드), .swiper는 overflow: visible로 양옆 슬라이드를 내보인다 — swiper 기본 overflow: hidden이면 피크·그림자가 사라진다. 7.5% 페이드 폭은 main.js fitWindow와 짝이다 */
.hero__viewport { position: relative; overflow: clip; padding-bottom: 56px; mask-image: linear-gradient(90deg, transparent 0, #000 7.5%, #000 92.5%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7.5%, #000 92.5%, transparent 100%); }
.hero__swiper { width: var(--feature-w); height: var(--slide-h); margin: 0 auto; overflow: visible; }
.hero__swiper .swiper-wrapper { transition-timing-function: var(--mp-ease); }
/* --p = 중앙에서 떨어진 정도(0 활성 ~ 1 이웃), Swiper progress 이벤트가 채운다 — 축소·그림자·어둡기가 드래그 중에도 연속으로 따라온다 */
/* .hero__swiper 접두 필수: Swiper가 loop에 붙이는 .swiper-backface-hidden .swiper-slide { transform }가 단일 클래스 규칙을 이긴다 */
.hero__swiper .hero__slide { --p: 1; position: relative; display: block; width: var(--feature-w); height: 100%; transform: scale(calc(1 - .05 * var(--p))); transition: transform var(--dur); }
.hero__slide::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-md); box-shadow: 0 18px 40px rgba(16, 49, 107, .2); opacity: calc(1 - var(--p)); transition: opacity var(--dur); }
.hero__pic { display: block; position: relative; height: 100%; overflow: hidden; border-radius: var(--r-md); background: var(--gray-200); }
.hero__pic::after { content: ""; position: absolute; inset: 0; background: var(--mp-deep); opacity: calc(.26 * var(--p)); transition: opacity var(--dur); }
.hero__pic picture { display: block; height: 100%; }
.hero__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__slide:not(.swiper-slide-active) { cursor: pointer; }
/* 반투명 남색 알약: 완성형 배너는 밝을 수도 어두울 수도 있어 점·화살표가 배너색에 기대면 안 된다 */
.hero__ctrl { position: absolute; z-index: var(--z-hero-ctrl); right: var(--hero-x); bottom: var(--hero-y); display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 16px; border-radius: 999px; }
/* 블러를 알약 자신이 아닌 ::before에 둔다: 알약에 backdrop-filter가 있으면 알약이 backdrop root가 되어, 그 안의 번호 릴 유리가 배너 사진 대신 알약 배경만 흐리게 된다 */
.hero__ctrl::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(16,49,107,.32); backdrop-filter: blur(8px); }
.hero__count { position: relative; display: flex; align-items: center; gap: 16px; margin-right: 8px; /* Hero control gap 8px + delta 8px = 16px. */ color: #fff; font-size: 13px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* 번호 릴: 01~NN이 한 줄로 붙은 릴을 --i칸만큼 옮기고, 창(clip-path)은 닫히면 한 칸·열리면 릴 전체를 드러낸다. 창은 어느 --i에서도 릴 전체를 덮도록 슬롯 기준 앞뒤 (n-1)칸 크기이고, 열려도 JS가 정한 --open-before/--open-after칸까지만 드러낸다. 축(--row·inset 순서)만 640px 블록이 바꾼다 */
.hero__wheel { --i: 0; --row-w: 30px; --row-h: 22px; --row: var(--row-h); --lead: calc((var(--n) - 1) * var(--row)); --wheel-pad: 4px; position: relative; flex: none; width: var(--row-w); height: var(--row-h); }
.hero__wheel::after { content: ""; position: absolute; top: 50%; left: calc(100% + 3px); width: 4px; height: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .7; transform: translateY(-75%) rotate(45deg); pointer-events: none; transition: opacity .2s ease; }
.hero__wheel.is-open::after { opacity: 0; }
.hero__window { --clip-start: calc(var(--lead) + var(--wheel-pad)); --clip-end: var(--clip-start); --clip-cross: var(--wheel-pad); --clip-r: 6px; position: absolute; z-index: 1; left: calc(-1 * var(--wheel-pad)); top: calc(-1 * var(--lead) - var(--wheel-pad)); width: calc(var(--row-w) + 2 * var(--wheel-pad)); height: calc(2 * var(--lead) + var(--row-h) + 2 * var(--wheel-pad)); background-color: transparent; backdrop-filter: blur(0) saturate(100%); clip-path: inset(var(--clip-start) var(--clip-cross) var(--clip-end) round var(--clip-r)); transition: clip-path .5s var(--mp-ease), background-color .3s ease, backdrop-filter .3s ease; }
.hero__wheel.is-open .hero__window { --clip-start: calc(var(--lead) - var(--open-before) * var(--row)); --clip-end: calc(var(--lead) - var(--open-after) * var(--row)); --clip-cross: 0px; --clip-r: 12px; touch-action: none; background-color: rgba(16,49,107,.28); backdrop-filter: blur(18px) saturate(160%); }
.hero__reel { position: absolute; top: var(--wheel-pad); left: var(--wheel-pad); margin: 0; padding: 0; list-style: none; transform: translateY(calc(var(--lead) - var(--i) * var(--row) + var(--drag, 0px))); transition: transform .5s var(--mp-ease); }
.hero__wheel.is-dragging .hero__reel { transition: none; }
.hero__go { display: grid; place-items: center; width: var(--row-w); height: var(--row-h); padding: 0; border: 0; border-radius: 6px; background: transparent; color: rgba(255,255,255,.72); text-shadow: 0 1px 2px rgba(0,0,0,.25); font: inherit; letter-spacing: inherit; cursor: pointer; transition: background-color .2s ease, color .3s ease, opacity .3s ease; }
.hero__go.is-slot { color: #fff; }
@media (hover: hover) { .hero__go:hover { color: #fff; background-color: rgba(255,255,255,.12); } }
.hero__go.is-edge:not(.is-slot) { opacity: .35; }
.hero__total { opacity: .6; }
/* 폭(width)으로 채우면 막대가 1px씩 끊겨 보인다 — 꽉 찬 선을 옮겨 서브픽셀로 채운다 */
.hero__bar { position: relative; overflow: hidden; width: 72px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.3); }
.hero__bar::after { content: ""; position: absolute; inset: 0; background: #fff; transform: translateX(calc((var(--hero-elapsed, 0) - 1) * 100%)); will-change: transform; }
.hero__nav { flex: none; }
.hero__nav { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--text-main); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.16); transition: background .2s ease, color .2s ease, transform .2s var(--mp-ease); }
@media (hover: hover) { .hero__nav:hover { background: var(--mp-accent); color: #fff; transform: scale(1.08); } }

.genres { width: var(--wide-w); margin: 0 auto; display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 46px); }
.genre { flex: 0 0 84px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-main); font-size: 13.5px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; white-space: nowrap; }
.genre__ic { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid var(--mp-line-soft); border-radius: 20px; background: #fff; box-shadow: var(--sh-1); transition: transform .22s var(--mp-ease), box-shadow .22s ease, border-color .22s ease; }
.genre__ic img { width: 60px; height: 60px; transition: transform .22s var(--mp-ease); }
@media (hover: hover) { .genre:hover .genre__ic { border-color: var(--mp-accent); box-shadow: var(--sh-2); transform: translateY(-3px); } }
@media (hover: hover) { .genre:hover img { transform: scale(1.08); } }

/* 띠의 위 절반만 연한색: 판이 배너 섹션 배경에 반쯤 걸친 것처럼 보이되 판 높이를 알 필요가 없다 */
.qs-band { background: linear-gradient(var(--mp-soft) 50%, transparent 50%); }
.qs { display: grid; grid-template-columns: clamp(160px, 16vw, 236px) repeat(4, minmax(0, 1fr)); gap: 12px; width: var(--wide-w); margin: 0 auto; padding: 16px; border: 1px solid var(--mp-line-soft); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); }
.qs__intro { display: flex; flex-direction: column; gap: 4px; align-self: center; padding-left: 12px; }
.qs__intro strong { display: block; color: var(--mp-deep); font-size: 17px; font-weight: 800; line-height: 1.4; letter-spacing: -.02em; }
.qs__intro small { display: block; color: var(--mp-copy); font-size: 13.5px; line-height: 1.5; }
.qs__actions { display: contents; }
.qs__card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 80px; padding: 14px 16px 14px 20px; border-radius: var(--r-md); background: var(--mp-soft); text-align: left; transition: background .2s ease; }
@media (hover: hover) { .qs__card:hover { background: var(--accent-blue-soft); } }
.qs__card > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qs__card strong { display: block; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.qs__card small { display: block; overflow: hidden; color: var(--mp-copy); font-size: 13px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.qs__go { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border: 1px solid var(--mp-line-soft); border-radius: 50%; background: #fff; color: var(--mp-deep); font-size: 11px; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--mp-ease); }
@media (hover: hover) { .qs__card:hover .qs__go { border-color: var(--mp-accent); background: var(--mp-accent); color: #fff; transform: translateX(3px); } }
.qs__notice { display: flex; grid-column: 1 / -1; align-items: center; gap: 10px; padding: 14px 16px 0 12px; border-top: 1px solid var(--mp-line-soft); font-size: 15px; line-height: 1.5; letter-spacing: -.01em; }
.qs__notice-ic { flex: none; color: var(--primary); }
.qs__ticker { position: relative; flex: 1; min-width: 0; height: 1.5em; margin: 0; padding: 0; overflow: hidden; list-style: none; }
/* 트랜지션은 들고 나는 칸에만 — 기본 칸으로 돌아갈 때는 창 아래로 즉시 순간이동해야 다음 진입이 아래에서 올라온다 */
.qs__ticker li { position: absolute; inset: 0; transform: translateY(100%); }
.qs__ticker li.is-active { transform: none; transition: transform .4s ease; }
.qs__ticker li.is-out { transform: translateY(-100%); transition: transform .4s ease; }
.qs__ticker a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .qs__ticker a:hover { color: var(--primary); } }
.qs__ticker a:focus-visible { outline-offset: -2px; }
.qs__all { display: flex; flex: none; align-items: center; gap: 6px; color: var(--primary); font-size: 14px; font-weight: 500; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.stage { position: relative; margin: 0 calc(-1 * var(--container-px)) -26px; /* Section gap 28px - shadow gutter 26px = 2px. */ padding: 0 var(--container-px) 48px; overflow: hidden; }
.grid4 { --cards-per-page: 4; display: grid; grid-template-columns: repeat(var(--cards-per-page), minmax(0, 1fr)); gap: 20px; }
.grid3 { --cards-per-page: 3; --card-gap: 18px; container-type: inline-size; display: grid; grid-template-columns: repeat(var(--cards-per-page), minmax(0, 1fr)); gap: var(--card-gap); align-items: start; }
.grid3 > .main-empty { min-height: calc((100cqw - (var(--cards-per-page) - 1) * var(--card-gap)) / var(--cards-per-page) / (var(--mp-card-aspect))); display: grid; place-items: center; }


.flow { display: grid; grid-template-columns: 25% 75%; align-items: stretch; }
.flow__tabs { display: grid; grid-template-rows: repeat(var(--flow-count), minmax(0, 1fr)); border-left: 1px solid var(--gray-200); }
.flow__tab { display: flex; flex-direction: column; justify-content: center; gap: 4px; position: relative; min-height: 86px; padding: 14px 24px 14px 38px; color: rgba(16,49,107,.5); text-align: left; transition: color .22s ease, background .22s ease; }
.flow__tab::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: -1px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mp-deep); transform: scaleY(0); transition: transform .28s var(--mp-ease); }
@media (hover: hover) { .flow__tab:hover { color: rgba(16,49,107,.8); background: rgba(241,243,248,.7); } }
.flow__tab[aria-selected="true"] { color: var(--mp-deep); background: var(--mp-soft); }
.flow__tab[aria-selected="true"]::before { transform: scaleY(1); }
.flow__tab strong { display: block; font-size: clamp(16px, 1.17vw, 23px); font-weight: 700; line-height: 1.45; }
.flow__tab small { display: block; font-size: clamp(12px, .83vw, 16px); line-height: 1.45; }
.flow__panel { position: relative; min-width: 0; padding-left: 34px; }
.head-nav { position: absolute; z-index: 3; top: -48px; right: 0; display: flex; align-items: center; gap: 8px; }
.flow__stage { position: relative; margin: -42px; padding: 42px; overflow: hidden; }


/* 뷰포트가 위로 32px 겹쳐 올라오므로 툴바를 위에 띄운다 */
#byBudget .section-content { gap: 0; }
.toolbar--budget { position: relative; z-index: 6; }
.budget__viewport { position: relative; width: 100vw; margin: -32px 0 -42px calc(50% - 50vw); padding: 60px 0 68px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.budget__row { --bg: 18px; position: relative; display: grid; grid-template-columns: minmax(0, 1.047fr) minmax(0, 3fr); gap: var(--bg); width: var(--wide-w); margin: 0 auto; align-items: stretch; }
/* z-index 2: 스트립 카드가 안내 카드 밑으로 드나든다 — 트랙의 숨은 슬롯이 여기 가려진다 */
.budget__info { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 3vw, 46px); border-radius: var(--r-md); background: linear-gradient(160deg, var(--mp-deep) 0%, var(--primary) 100%); color: #fff; box-shadow: var(--sh-2); }
.budget__copy { display: flex; flex-direction: column; gap: 16px; }
.budget__copy > :nth-child(2) { --stagger: 50ms; } .budget__copy > :nth-child(3) { --stagger: 100ms; }
.budget__label { display: block; color: rgba(255,255,255,.7); font-size: clamp(12px, .87vw, 16px); font-weight: 900; letter-spacing: .04em; }
.budget__info h3 { margin: 0; font-size: clamp(19px, 1.8vw, 34px); line-height: 1.35; letter-spacing: -.035em; }
.budget__info p { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; /* Copy gap 16px + delta 2px = 18px. */ color: rgba(255,255,255,.78); font-size: clamp(12px, .96vw, 18px); line-height: 1.55; }
.budget__info p strong { display: block; color: #fff; }
.budget__btn { align-self: flex-start; padding: 11px 17px; border-radius: 999px; background: #fff; color: var(--mp-deep); font-size: clamp(12px, .75vw, 14px); font-weight: 700; transition: background .2s ease, color .2s ease; }
@media (hover: hover) { .budget__info:hover .budget__btn { background: var(--mp-accent); color: #fff; } }
.budget__stage { position: relative; min-width: 0; }
.budget__track { --bcard: calc((100% - 2 * var(--bg)) / 3); --bstep: calc(var(--bcard) + var(--bg)); display: grid; grid-auto-flow: column; grid-auto-columns: var(--bcard); gap: var(--bg); height: 100%; transform: translateX(calc(-1 * var(--bstep))); transition: transform .5s var(--mp-ease); }
.budget__track.is-next { transform: translateX(calc(-2 * var(--bstep))); }
.budget__track.is-prev { transform: none; }
.budget__track.no-anim { transition: none; }
/* 단일 클래스로 둘 것: 뒤의 .x-next/.x-prev(0,1,0)가 고스트의 피크 카드 opacity를 이겨야 한다 */
.is-peek { opacity: .38; pointer-events: none; }
.is-hidden { visibility: hidden; }
.budget__peek { position: absolute; top: 0; bottom: 0; right: calc(100% + var(--bg)); width: calc(((100% - var(--bg)) * 3 / 4.047 - 2 * var(--bg)) / 3); }
.budget__peek .budget__track { --bcard: 100%; }
/* 예산 줄(≥641)은 정보 카드가 줄 높이를 정한다: 카드는 비율 대신 줄 높이를 채우고, 남는 높이는 본문이 아니라 사진이 먹는다 */
@media (min-width: 641px) {
  .budget__track .cardA { aspect-ratio: auto; }
  .budget__track .cardA__media { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
  .budget__track .cardA__body { flex: none; }
}

.cta { --cta-x: calc(max(24px, (100% - var(--wide-w)) / 2) + 50px); position: relative; height: 360px; overflow: hidden; background: var(--gray-300); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(255,255,255,.64) 0%, rgba(255,255,255,.28) 40%, transparent 66%); }
.cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx) var(--fy); transform-origin: var(--fx) var(--fy); opacity: 0; transition: opacity 1.2s cubic-bezier(.4,0,.2,1), transform 15s linear; }
.cta__img.is-active { opacity: 1; transform: scale(1.025); }
.cta__panel { display: grid; gap: 22px; position: absolute; z-index: 3; top: 50%; left: var(--cta-x); max-width: 600px; transform: translateY(-50%); }
.cta__copy { display: flex; flex-direction: column; gap: 22px; grid-area: 1 / 1; opacity: 0; pointer-events: none; color: var(--mp-deep); transition: opacity 1.2s cubic-bezier(.4,0,.2,1); }
.cta__copy.is-active { opacity: 1; pointer-events: auto; }
.cta__dots { margin: 0; }
.cta__copy h2 { margin: 0; font-size: clamp(28px, 2.35vw, 42px); letter-spacing: -.035em; line-height: 1.35; }
.cta__copy p { margin: 0; color: var(--gray-700); font-size: clamp(15px, 1.2vw, 22px); line-height: 1.5; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2px; /* Copy gap 22px + delta 2px = 24px. */ }
.cta__actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: var(--r-sm); font-size: 15px; font-weight: 700; transition: transform .2s ease, background .2s ease; }
@media (hover: hover) { .cta__actions a:hover { transform: var(--cta-hover-lift); } }
.cta__primary { background: var(--mp-deep); color: #fff; }
.cta__secondary { border: 1px solid var(--mp-deep); background: transparent; color: var(--mp-deep); }

/* 카드 규칙(components/program-card.css)보다 뒤에 둘 것: 같은 특이성이라 위치가 transition 승자를 정한다 */
.ghost { position: absolute; z-index: 1; pointer-events: none; }
.x-tab  { opacity: 0; transform: translateY(10px);  transition: opacity .24s ease, transform .24s ease; }
.x-next { opacity: 0; transform: translateX(-40px); transition: opacity .24s ease, transform .3s var(--mp-ease); }
.x-prev { opacity: 0; transform: translateX(40px);  transition: opacity .24s ease, transform .3s var(--mp-ease); }
.in-tab  { animation: inTab .34s ease-out backwards; animation-delay: var(--stagger); }
.in-next { animation: inNext .45s var(--mp-ease) backwards; animation-delay: var(--stagger); }
.in-prev { animation: inPrev .45s var(--mp-ease) backwards; animation-delay: var(--stagger); }
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .75s var(--mp-ease); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
@keyframes inTab  { from { opacity: 0; transform: translateY(10px); } }
@keyframes inNext { from { opacity: 0; transform: translateX(48px); } }
@keyframes inPrev { from { opacity: 0; transform: translateX(-48px); } }

.mood { position: relative; display: grid; grid-template-columns: minmax(220px, 33.03%) minmax(0, 1fr); align-items: stretch; container-type: inline-size; border: 1px solid var(--mp-line); border-radius: var(--r-lg); background: #fff; }
.mood__visual { position: relative; min-height: 30cqw; margin: 0; overflow: hidden; border-radius: calc(var(--r-lg) - 1px) 0 0 calc(var(--r-lg) - 1px); background: #081013; }
.mood__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1); }
.mood__img.is-current { opacity: 1; transform: scale(1); }
.mood__visual::after { content: ""; position: absolute; inset: 46% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.82)); pointer-events: none; }
.mood__tabs { position: absolute; z-index: 3; top: 3.28cqw; left: 3.07cqw; display: flex; flex-wrap: wrap; gap: max(6px, .72cqw) max(6px, .47cqw); width: max(25.35cqw, 290px); }
.mood__tab { flex: none; height: max(30px, 2.565cqw); padding: 0 max(11px, .9cqw); border: 1px solid var(--mp-line-soft); border-radius: 999px; background: #fff; color: var(--gray-500); font-size: max(12px, .9cqw); font-weight: 500; letter-spacing: -.011em; transition: border-color .3s ease-out, background .3s ease-out, color .3s ease-out, transform .2s ease; }
@media (hover: hover) { .mood__tab:hover { border-color: var(--gray-400); color: var(--text-main); transform: translateY(-1px); } }
.mood__tab[aria-selected="true"] { border-color: var(--mp-deep); background: var(--mp-deep); color: #fff; font-weight: 800; }
.mood__caption { display: flex; flex-direction: column; gap: .3cqw; position: absolute; z-index: 2; right: 3.07cqw; bottom: 3.07cqw; left: 3.07cqw; color: #fff; }
.mood__caption span { display: block; font-size: .986cqw; font-weight: 500; line-height: 1.5; }
.mood__caption strong { display: block; font-size: 1.62cqw; font-weight: 800; line-height: 1.5; letter-spacing: -.011em; }
.mood__content { display: flex; flex-direction: column; position: relative; min-width: 0; padding: 3.36cqw; }
.mood__grid { flex: 1; }
.mood__grid .main-empty { display: grid; place-items: center; }
.mood__grid { --cards-per-page: 3; display: grid; grid-template-columns: repeat(var(--cards-per-page), minmax(0, 1fr)); column-gap: 2.318cqw; row-gap: 3.026cqw; }
/* The divider owns grid row 2, so auto-placement pushes cards 4–6 to row 3; the two half gaps keep the 3.026cqw total. */
@media (min-width: 641px) {
  .mood__grid:has(> :nth-child(4)) { grid-template-rows: auto 0 auto; row-gap: 1.513cqw; }
  .mood__grid:has(> :nth-child(4))::before { content: ""; grid-area: 2 / 1 / 3 / -1; border-top: 1px dashed var(--gray-300); }
}
.acc { display: grid; overflow: hidden; border: 1px solid var(--mp-line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); }
.acc__item + .acc__item { border-top: 1px solid var(--mp-line-soft); }
.acc__trigger { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 78px; padding: 18px 38px; color: var(--mp-copy); text-align: left; transition: background .2s ease, color .2s ease; }
.acc__trigger::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--mp-deep); transform: scaleY(0); transition: transform .28s var(--mp-ease); }
@media (hover: hover) { .acc__trigger:hover { background: rgba(241, 243, 248, .7); } }
.acc__item[data-open="true"] .acc__trigger::before { transform: scaleY(1); }
.acc__trigger strong { display: flex; align-items: baseline; gap: 14px; font-size: clamp(16px, .94vw, 18px); font-weight: 500; line-height: 1.45; }
.acc__trigger strong b { font-weight: 700; color: var(--mp-deep); }
.acc__item[data-open="true"] .acc__trigger { color: var(--mp-deep); background: var(--mp-soft); }
.acc__item[data-open="true"] .acc__panel { background: var(--mp-soft); }
.acc__item[data-open="true"] .acc__trigger strong { font-weight: 700; }
.acc__chev { flex: none; color: var(--gray-400); font-size: 13px; transition: transform .3s ease, color .3s ease; }
.acc__item[data-open="true"] .acc__chev { color: var(--mp-deep); transform: rotate(180deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .36s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
.acc__inner { min-height: 0; overflow: hidden; }
.acc__item[data-open="true"] .acc__panel { grid-template-rows: 1fr; opacity: 1; }
.acc__grid { --cards-per-page: 4; display: grid; grid-template-columns: repeat(var(--cards-per-page), minmax(0, 1fr)); gap: 18px; padding: 6px 42px 42px; }
.acc__item[data-open="true"] .cardC { opacity: 1; transform: translateY(0); }
.mood__tab:focus-visible, #moodDots .dot:focus-visible, .cta__dots .dot:focus-visible { outline: 3px solid var(--mp-accent); outline-offset: 3px; }
.acc__trigger:focus-visible { outline: 3px solid var(--mp-accent); outline-offset: -3px; }

@media (min-width: 1800px) {
  .mood__tab { height: 32px; padding: 0 11px; font-size: 12px; }
  .acc__trigger { min-height: 56px; padding: 10px 28px; }
  .sec > .shell, .sec > .shell:has(.sec__head--wide) { --head-gap: 24px; }
  .tab-pill { height: 32px; padding: 0 11px; font-size: 12px; }
  .arrow-btn { width: 32px; height: 32px; }
  .flow__tab { min-height: 0; padding: 8px 14px 8px 22px; }
  .flow__tab strong { font-size: 15px; } .flow__tab small { font-size: 12px; }
}

@media (max-width: 1799px) and (min-width: 981px) {
  .acc__trigger { min-height: 54px; padding: 8px 24px; }
  .acc__grid { padding: 0 28px 24px; }
}
@media (max-width: 1150px) {
  .qs { grid-template-columns: 1fr; padding: 18px; }
  .qs__intro { padding-left: 4px; }
  .qs__notice { padding-left: 4px; }
  .qs__actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 980px) {
  :root { --feature-w: min(calc(100% - 48px), 823px); --wide-w: min(calc(100% - 32px), 948px); --section-pad: 72px; }
  .mh { --slide-h: min(calc((100vw - 48px) / 2.355), 349px); }
  .genres { justify-content: flex-start; overflow-x: auto; padding: 6px 2px 18px; scrollbar-width: none; }
  .qs__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { align-items: flex-start; }
  .pills { padding-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
  .grid4 { --cards-per-page: 3; gap: 12px; }
  .flow { grid-template-columns: 27% 73%; }
  .flow__panel { padding-left: 22px; }
  .flow__tab { min-height: 72px; padding: 11px 16px 11px 22px; }
  .grid3 { --card-gap: 12px; }
  .budget__row { --bg: 12px; }
  .acc__trigger { min-height: 58px; padding: 10px 20px; }
  .acc__grid { --cards-per-page: 3; padding: 0 22px 22px; }
  .acc__grid > :nth-child(4) { display: none; }
}
@media (max-width: 640px) {
  :root { --feature-w: 92vw; --wide-w: calc(100% - 24px); --section-pad: 60px; }
  .mh { --slide-h: 39.07vw; padding: 18px 0; }
  /* 뷰포트 아래 여백이 그림자 번짐을 덮어야 한다 — 그림자를 키우면 이 여백도 같이 키운다 */
  .hero__viewport { padding-bottom: 26px; }
  .hero__slide::before { box-shadow: 0 10px 20px rgba(16, 49, 107, .2); }
  .hero__carousel--mobile-ready { --slide-h: calc(var(--feature-w) * 4 / 3); }
  .hero__slide::before, .hero__pic { border-radius: var(--r-sm); }
  .mh { --hero-x: 10px; --hero-y: 10px; }
  .hero__ctrl { right: 16px; gap: 6px; height: 40px; padding: 4px 4px 4px 10px; }
  .hero__count { gap: 8px; margin-right: 4px; /* Control gap 6px + delta 4px = 10px. */ font-size: 12px; }
  .hero__bar { width: 44px; }
  /* 배너 높이가 낮아 세로 릴은 뷰포트 clip에 잘린다 — 같은 릴을 가로축으로 돌린다 */
  .hero__wheel { --row-w: 28px; --row-h: 20px; --row: var(--row-w); }
  .hero__window { left: calc(-1 * var(--lead) - var(--wheel-pad)); top: calc(-1 * var(--wheel-pad)); width: calc(2 * var(--lead) + var(--row-w) + 2 * var(--wheel-pad)); height: calc(var(--row-h) + 2 * var(--wheel-pad)); clip-path: inset(var(--clip-cross) var(--clip-end) var(--clip-cross) var(--clip-start) round var(--clip-r)); }
  .hero__reel { display: flex; transform: translateX(calc(var(--lead) - var(--i) * var(--row) + var(--drag, 0px))); }
  .hero__nav { width: 32px; height: 32px; font-size: 11px; }
  .genres { gap: 14px; }
  .genre { flex-basis: 72px; font-size: 12.5px; }
  .genre__ic { width: 60px; height: 60px; border-radius: 18px; }
  .genre__ic img { width: 52px; height: 52px; }
  .qs { padding: 16px; }
  .qs__actions { gap: 8px; }
  .qs__card { gap: 8px; min-height: 0; padding: 12px 10px 12px 14px; }
  .qs__card small { font-size: 12px; white-space: normal; }
  .qs__go { width: 24px; height: 24px; font-size: 10px; }
  .qs__notice { padding-right: 10px; font-size: 13px; }
  .qs__all { font-size: 12px; }
  .qs__all-scope { display: none; }
  .sec > .shell, .sec > .shell:has(.sec__head--wide) { --head-gap: 25px; }
  .section-content, #byBudget .section-content { gap: 22px; }
  .sec__title { font-size: 26px; }
  .sec__copy { font-size: 13px; }
  .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .toolbar .pills { grid-column: 1 / -1; grid-row: 2; }
  .toolbar .nav { grid-column: 2; grid-row: 1; }
  .stage { margin: 0 -12px; padding: 0 12px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .grid4 { --cards-per-page: 4; display: flex; gap: 14px; }
  .grid4 > * { flex: 0 0 min(82%, 375px); scroll-snap-align: start; }
  #byMood > .shell { --head-gap: 65px; }
  .mood { display: block; border-radius: var(--r-md); }
  .mood__visual { height: 360px; border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; }
  .mood__tabs { top: 24px; left: 22px; width: calc(100% - 44px); gap: 6px; }
  .mood__tab { height: 30px; padding: 0 9px; font-size: 12px; }
  .mood__caption { right: 24px; bottom: 24px; left: 24px; gap: 5px; }
  .mood__caption span { font-size: 12px; }
  .mood__caption strong { font-size: 18px; }
  .mood__content { padding: 24px 18px 28px; }
  .mood__grid { --cards-per-page: 2; gap: 26px 14px; }
  .acc__trigger { min-height: 54px; padding: 9px 14px; }
  .acc__trigger strong { flex-direction: column; gap: 2px; }
  .acc__grid { --cards-per-page: 4; display: flex; overflow-x: auto; gap: 12px; padding: 0 14px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .acc__grid > * { flex: 0 0 82%; scroll-snap-align: start; }
  .acc__grid > :nth-child(4) { display: block; }
  .flow { grid-template-columns: 1fr; }
  .flow__tabs { display: flex; overflow-x: auto; border-left: 0; padding-bottom: 10px; scrollbar-width: none; }
  .flow__tab { flex: 0 0 205px; min-height: 68px; border-radius: var(--r-sm); }
  .flow__panel { padding: 24px 0 0; }
  .flow .head-nav { top: -22px; }
  .flow__stage { margin: 0 -12px; padding: 0 12px 14px; overflow-x: auto; scrollbar-width: none; }
  .grid3 { display: flex; }
  .grid3 > * { flex: 0 0 82%; max-width: 420px; }
  .grid3 > .main-empty { min-height: calc(min(82cqw, 420px) / (var(--mp-card-aspect))); }
  .grid4 > .main-empty, .grid3 > .main-empty, .acc__grid > .main-empty, .budget__track > .main-empty { flex-basis: 100%; max-width: none; }
  .budget__viewport { width: auto; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .budget__row { display: flex; flex-direction: column; gap: 16px; width: 100%; }
  .budget__info { min-height: 0; }
  .budget__stage .budget__track { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 14px; scroll-snap-type: x mandatory; scrollbar-width: none; transform: none; }
  .budget__track > * { flex: 0 0 84%; scroll-snap-align: start; }
  .budget__track > .is-hidden, .budget__track > .is-peek { display: none; }
  .budget__peek { display: none; }
  .cta { --cta-x: 24px; height: 380px; }
  .cta::before { background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.58) 60%, rgba(255,255,255,.3)); }
  .cta__panel { right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.sec__empty { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 64px 24px; border: 1px dashed var(--mp-line); border-radius: var(--r-lg); background: #fff; color: var(--mp-copy); text-align: center; line-height: 1.6; }
.main-empty { grid-column: 1 / -1; padding: 48px 24px; border: 1px solid var(--mp-line-soft); border-radius: var(--r-md); background: var(--mp-soft); color: var(--mp-copy); text-align: center; }
.section-all { display: inline-flex; align-items: center; gap: 8px; color: var(--mp-deep); font-weight: 600; }
.arrow-btn:disabled { opacity: .4; cursor: default; }
.budget__info { gap: 18px; }