/* =====================================================================
   2026-10-28 서비스 신청(/Apply, 한국어) - "레고 블록 쌓기" 느낌의 디자인 (Justin님 요청, 화면 문구에는 블록을 쓰지 않음)
   부스터 페이지(studio-v2.css .sv2)의 글꼴·색·여백을 그대로 쓰고, 서비스 선택 영역만
   블록(층) + 브릭(등급) 모양으로 만든다. 오른쪽 신청 내역은 고른 브릭이 아래부터 쌓이는 탑.
   .sv2 .apply-lego 안에서만 적용된다. JS 훅(.catalog-group/.pricing-card/.month-pick)은 apply-catalog.js와 같다.
   ===================================================================== */
.sv2 .apply-lego {
  --brick-script: var(--color-primary);
  --brick-script-soft: var(--color-primary-100);
  --brick-script-dark: var(--color-primary-700);
  --brick-shorts: var(--color-accent);
  --brick-shorts-soft: var(--color-accent-100);
  --brick-shorts-dark: var(--color-accent-600);
  /* 2026-10-28: 채널구매는 녹색 계열 (Justin님) */
  --brick-chbuy: #1E9E5A;
  --brick-chbuy-soft: #E3F5EA;
  --brick-chbuy-dark: #157A44;
  --brick-bonus: #E2A400;
  --brick-bonus-soft: #FFF5D6;
}

/* ---------- 단계 제목 (부스터 h3 스타일) ---------- */
.sv2 .apply-lego .lego-step { padding: 34px 0; border-bottom: 1px solid var(--b-line); }
.sv2 .apply-lego .lego-step:first-child { padding-top: 0; }
.sv2 .apply-lego .lego-step:last-child { border-bottom: 0; padding-bottom: 0; }
.sv2 .apply-lego .lego-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.sv2 .apply-lego .lego-step-num {
  position: relative; display: grid; place-items: center; width: 40px; height: 34px; margin-top: 6px;
  border-radius: 8px; background: var(--color-primary); color: #fff; font-weight: 900; font-size: 15px; flex: none;
}
.sv2 .apply-lego .lego-step-num::before { /* 위쪽 돌기 2개 */
  content: ""; position: absolute; top: -6px; left: 7px; right: 7px; height: 7px;
  background: radial-gradient(circle at 5px 4px, var(--color-primary) 4.5px, transparent 5px) 0 0 / 50% 100% repeat-x;
}
.sv2 .apply-lego .lego-step-head h3 { margin: 0; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; color: var(--b-fg); }
.sv2 .apply-lego .lego-step-lead { margin: 0 0 20px; font-size: 15px; color: var(--b-muted); line-height: 1.7; word-break: keep-all; }
.sv2 .apply-lego .lego-step-lead strong { color: var(--b-fg); }

/* ---------- 조합 안내 (3가지) ---------- */
.sv2 .apply-lego .lego-combos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 26px; }
.sv2 .apply-lego .lego-combo { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: var(--b-surface2); border: 1px solid var(--b-line); font-size: 13px; font-weight: 700; color: var(--b-fg); }
.sv2 .apply-lego .lego-combo .mini-stack { display: flex; flex-direction: column-reverse; gap: 3px; }
.sv2 .apply-lego .lego-combo .mini { height: 12px; border-radius: 3px; position: relative; }
.sv2 .apply-lego .lego-combo .mini.s { background: var(--brick-script); width: 100%; }
.sv2 .apply-lego .lego-combo .mini.v { background: var(--brick-shorts); width: 86%; }
.sv2 .apply-lego .lego-combo .mini.c { background: var(--brick-chbuy); width: 72%; }
.sv2 .apply-lego .lego-combo .mini.opt { opacity: .45; }

/* ---------- 블록(층) ---------- */
.sv2 .apply-lego .lego-layer {
  --brick: var(--brick-script); --brick-soft: var(--brick-script-soft); --brick-dark: var(--brick-script-dark);
  position: relative; padding: 22px; border-radius: 22px; background: #fff;
  border: 1.5px solid var(--b-line); border-left: 8px solid var(--brick);
  transition: opacity .3s, filter .3s, border-color .3s;
}
.sv2 .apply-lego .lego-layer[data-group="shorts"] { --brick: var(--brick-shorts); --brick-soft: var(--brick-shorts-soft); --brick-dark: var(--brick-shorts-dark); }
.sv2 .apply-lego .lego-layer[data-group="chbuy"] { --brick: var(--brick-chbuy); --brick-soft: var(--brick-chbuy-soft); --brick-dark: var(--brick-chbuy-dark); }
.sv2 .apply-lego .lego-layer.is-locked { border-style: dashed; border-left-style: solid; filter: grayscale(1); opacity: .55; }
.sv2 .apply-lego .lego-layer.is-locked .pricing-grid, .sv2 .apply-lego .lego-layer.is-locked .month-pick { pointer-events: none; }
.sv2 .apply-lego .lego-layer.has-pick { border-color: var(--brick); }

.sv2 .apply-lego .lego-layer-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.sv2 .apply-lego .lego-layer-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--brick-soft); color: var(--brick); font-size: 20px; flex: none; }
.sv2 .apply-lego .lego-layer-title { flex: 1; min-width: 0; }
.sv2 .apply-lego .lego-layer-title .tag { display: inline-block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--brick); }
.sv2 .apply-lego .lego-layer-title h4 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--b-fg); }
.sv2 .apply-lego .lego-layer-title p { margin: 4px 0 0; font-size: 14px; color: var(--b-muted); word-break: keep-all; }
.sv2 .apply-lego .lego-chip { flex: none; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--brick-soft); color: var(--brick-dark); }
.sv2 .apply-lego .lego-chip.opt { background: var(--b-surface2); color: var(--b-muted); border: 1px solid var(--b-line); }

.sv2 .apply-lego .lock-note { display: none; margin: -4px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--b-surface2); font-size: 14px; font-weight: 600; color: var(--b-muted); gap: 8px; align-items: center; }
.sv2 .apply-lego .lego-layer.is-locked .lock-note { display: flex; }

/* 블록 사이 연결 (+) */
.sv2 .apply-lego .lego-joint { display: flex; justify-content: center; margin: -2px 0; position: relative; z-index: 1; height: 26px; }
.sv2 .apply-lego .lego-joint span { display: grid; place-items: center; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%; background: var(--b-bg); border: 1.5px solid var(--b-line); color: var(--b-muted); font-weight: 900; }

/* ---------- 브릭(등급 카드) ---------- */
.sv2 .apply-lego .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 10px; }
.sv2 .apply-lego .lego-brick {
  position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 16px 16px 14px; cursor: pointer;
  border-radius: 12px; background: #fff; border: 2px solid var(--b-line); color: var(--b-fg);
  transition: transform .35s var(--b-ease), background .25s, border-color .25s, box-shadow .35s;
}
.sv2 .apply-lego .lego-brick::before { /* 위쪽 돌기 */
  content: ""; position: absolute; top: -10px; left: 14px; right: 14px; height: 10px;
  background: radial-gradient(ellipse 9px 6px at 50% 100%, var(--stud, #DCE2EA) 98%, transparent 100%) 0 0 / 25% 100% repeat-x;
}
.sv2 .apply-lego .lego-brick:hover { transform: translateY(-3px); border-color: var(--brick); box-shadow: 0 14px 30px rgba(18, 23, 34, .08); }
.sv2 .apply-lego .lego-brick .b-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.sv2 .apply-lego .lego-brick .b-spec { font-size: 14px; color: var(--b-muted); font-weight: 600; }
.sv2 .apply-lego .lego-brick .b-price { margin-top: 8px; font-size: 1.4rem; font-weight: 900; letter-spacing: -.03em; color: var(--brick-dark); font-variant-numeric: tabular-nums; }
.sv2 .apply-lego .lego-brick .b-price small { font-size: 13px; font-weight: 700; color: var(--b-muted); margin-left: 2px; letter-spacing: 0; }
.sv2 .apply-lego .lego-brick .b-tag { align-self: flex-start; margin-top: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--brick-soft); color: var(--brick-dark); }
.sv2 .apply-lego .lego-brick .b-tag.muted { background: var(--b-surface2); color: var(--b-muted); }
.sv2 .apply-lego .lego-brick .b-check { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--b-line); color: transparent; font-size: 14px; background: #fff; }
/* 선택: 색을 채우지 않고 윤곽선·돌기·체크만 서비스 색으로 (2026-10-28 Justin님) */
.sv2 .apply-lego .lego-brick.is-selected { --stud: var(--brick); background: #fff; border-color: var(--brick); box-shadow: 0 0 0 1px var(--brick), 0 14px 30px rgba(18, 23, 34, .08); transform: translateY(-3px); }
.sv2 .apply-lego .lego-brick.is-selected .b-name { color: var(--brick-dark); }
.sv2 .apply-lego .lego-brick.is-selected .b-check { border-color: var(--brick); background: var(--brick); color: #fff; }

/* ---------- 이용 기간 (1/2/3개월) ---------- */
.sv2 .apply-lego .month-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--b-line); }
.sv2 .apply-lego .month-pick[hidden] { display: none; }
.sv2 .apply-lego .month-pick .mp-label { font-size: 14px; font-weight: 800; color: var(--b-fg); margin-right: 4px; }
.sv2 .apply-lego .month-pick label { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 92px; padding: 9px 14px; margin: 0; border-radius: 12px; border: 2px solid var(--b-line); background: #fff; cursor: pointer; font-weight: 800; font-size: 15px; color: var(--b-fg); transition: border-color .2s, background .2s; }
.sv2 .apply-lego .month-pick label small { font-size: 12px; font-weight: 700; color: var(--b-muted); }
.sv2 .apply-lego .month-pick label:has(input:checked) { border-color: var(--brick); background: var(--brick-soft); color: var(--brick-dark); }
.sv2 .apply-lego .month-pick label:has(input:checked) small { color: var(--brick-dark); }
.sv2 .apply-lego .month-pick input { position: absolute; opacity: 0; pointer-events: none; }
.sv2 .apply-lego .month-pick .mp-result { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--b-muted); }
.sv2 .apply-lego .month-pick .mp-result b { color: var(--brick-dark); font-size: 1.05rem; font-weight: 900; }
.sv2 .apply-lego .month-pick .mp-result s { margin-right: 4px; }

/* ---------- 기간 할인 안내 (간단 표기) ---------- */
.sv2 .apply-lego .discount-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; padding: 12px 16px; border-radius: 14px; background: var(--color-primary-50); border: 1px solid var(--b-tint-line); font-size: 15px; color: var(--b-fg); }
.sv2 .apply-lego .discount-chips > i { color: var(--color-primary); font-size: 18px; }
.sv2 .apply-lego .discount-chips span { padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--b-tint-line); font-weight: 700; }
.sv2 .apply-lego .discount-chips span b { color: var(--color-primary); font-weight: 900; }
.sv2 .apply-lego .discount-chips small { font-size: 13px; color: var(--b-muted); }

/* ---------- 할인 기준표 ---------- */
.sv2 .apply-lego .discount-guide { margin: 0 0 24px; border-radius: 16px; border: 1px solid var(--b-line); background: var(--b-surface2); }
.sv2 .apply-lego .discount-guide summary { padding: 12px 16px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--b-fg); }
.sv2 .apply-lego .discount-guide .dg-body { padding: 0 16px 14px; }
.sv2 .apply-lego .discount-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 10px; overflow: hidden; }
.sv2 .apply-lego .discount-table th, .sv2 .apply-lego .discount-table td { border: 1px solid var(--b-line); padding: 8px; text-align: center; }
.sv2 .apply-lego .discount-table thead th { background: var(--b-surface2); font-weight: 800; }
.sv2 .apply-lego .discount-table td.max { color: var(--color-primary); font-weight: 900; }

/* ---------- 혜택·보증 상자 ---------- */
.sv2 .apply-lego .bonus-box { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: var(--brick-bonus-soft); border: 1.5px solid #F2D27A; }
.sv2 .apply-lego .bonus-box .bb-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brick-bonus); color: #fff; font-size: 19px; flex: none; }
.sv2 .apply-lego .bonus-box b { display: block; font-size: 15px; color: #6B4E00; }
.sv2 .apply-lego .bonus-box p { margin: 2px 0 0; font-size: 14px; color: #6B5A2A; }

.sv2 .apply-lego .buyback { margin-top: 18px; border-radius: 20px; border: 2px solid var(--brick-chbuy); background: #fff; overflow: hidden; }
.sv2 .apply-lego .buyback[hidden] { display: none; }
.sv2 .apply-lego .buyback-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--brick-chbuy-soft); color: var(--brick-chbuy-dark); font-weight: 800; }
.sv2 .apply-lego .buyback-head i { font-size: 20px; }
.sv2 .apply-lego .buyback-head .state { margin-left: auto; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #fff; }
.sv2 .apply-lego .buyback-head .state.ok { background: var(--brick-chbuy); color: #fff; }
.sv2 .apply-lego .buyback-body { padding: 16px 18px 18px; }
.sv2 .apply-lego .buyback-body > p { margin: 0 0 14px; font-size: 14px; color: var(--b-muted); word-break: keep-all; }
.sv2 .apply-lego .buyback-cond { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sv2 .apply-lego .buyback-cond > div { padding: 14px 16px; border-radius: 14px; background: var(--b-surface2); border: 1px solid var(--b-line); }
.sv2 .apply-lego .buyback-cond h5 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--b-fg); }
.sv2 .apply-lego .buyback-cond h5 i { color: var(--brick-chbuy); }
.sv2 .apply-lego .buyback-cond ul { margin: 0; padding-left: 1.1em; font-size: 14px; color: var(--b-fg); line-height: 1.65; word-break: keep-all; }
.sv2 .apply-lego .buyback-cond .big { font-size: 1.05rem; font-weight: 900; color: var(--brick-chbuy-dark); }
.sv2 .apply-lego .buyback-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--brick-chbuy-soft); font-size: 14px; font-weight: 700; }
.sv2 .apply-lego .buyback-consent[hidden] { display: none; }
.sv2 .apply-lego .buyback-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brick-chbuy); flex: none; }

/* ---------- 채널·제공 방식·주제·정보 (부스터 글꼴) ---------- */
.sv2 .apply-lego .option-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sv2 .apply-lego .option-card { border-radius: 16px; border-width: 2px; padding: 16px 18px; }
.sv2 .apply-lego .option-card .option-title { font-size: 1rem; font-weight: 800; }
.sv2 .apply-lego .option-card .option-desc { font-size: 14px; line-height: 1.6; }
.sv2 .apply-lego .form-field label, .sv2 .apply-lego label.required { font-size: 14px; font-weight: 700; }
.sv2 .apply-lego .cap { margin: 10px 0 0; font-size: 14px; color: var(--b-muted); }

/* ---------- 오른쪽: 블록 탑 ---------- */
.sv2 .lego-tower-wrap { display: flex; flex-direction: column; gap: 12px; }
.sv2 .lego-tower { display: flex; flex-direction: column; gap: 12px; padding: 14px 0 4px; list-style: none; margin: 0; }
.sv2 .lego-tower:empty { display: none; }
.sv2 .lego-tower .tb {
  --brick: var(--color-primary); position: relative; padding: 10px 12px; border-radius: 9px; background: var(--brick); color: #fff;
  font-size: 13px; line-height: 1.45; animation: tb-drop .45s var(--b-ease);
}
.sv2 .lego-tower .tb::before { content: ""; position: absolute; top: -8px; left: 10px; right: 10px; height: 8px; background: radial-gradient(ellipse 8px 5px at 50% 100%, var(--brick) 98%, transparent 100%) 0 0 / 25% 100% repeat-x; }
.sv2 .lego-tower .tb.shorts { --brick: var(--color-accent); }
.sv2 .lego-tower .tb.chbuy { --brick: #1E9E5A; }
.sv2 .lego-tower .tb.free { --brick: #E2A400; }
.sv2 .lego-tower .tb b { display: block; font-size: 14px; font-weight: 800; word-break: keep-all; }
.sv2 .lego-tower .tb .tb-sub { display: block; margin-top: 2px; font-size: 12px; opacity: .92; word-break: keep-all; }
.sv2 .lego-tower .tb .tb-amt { display: block; margin-top: 4px; text-align: right; font-size: 16px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sv2 .lego-tower .tb s { opacity: .75; font-weight: 600; }
@keyframes tb-drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.sv2 .lego-total { padding-top: 10px; border-top: 1px solid var(--b-tint-line); }
.sv2 .lego-total .row-l { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--b-muted); }
.sv2 .lego-total .row-l strong { color: var(--accent-text); }
.sv2 .lego-total .sum { display: flex; flex-direction: column; margin-top: 6px; font-weight: 800; }
.sv2 .lego-total .sum strong { align-self: flex-end; font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em; color: var(--color-primary); font-variant-numeric: tabular-nums; }
/* 신청 화면은 오른쪽 블록 탑이 들어가도록 사이드를 넓힌다 */
.sv2 .Contents-row:has(> .apply-lego) { grid-template-columns: minmax(0, 1fr) 290px; }
.sv2 .lego-empty { padding: 14px; border-radius: 12px; border: 1.5px dashed var(--b-tint-line); text-align: center; font-size: 13px; color: var(--b-muted); }

@media (max-width: 991.98px) {
  .sv2 .Contents-row:has(> .apply-lego) { grid-template-columns: minmax(0, 1fr); }
  .sv2 .apply-lego .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
  .sv2 .apply-lego .lego-combos { grid-template-columns: 1fr; }
  .sv2 .apply-lego .buyback-cond { grid-template-columns: 1fr; }
  .sv2 .apply-lego .month-pick .mp-result { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
  .sv2 .apply-lego .lego-layer { padding: 18px 14px; border-left-width: 6px; }
  .sv2 .apply-lego .option-group { grid-template-columns: 1fr; }
  .sv2 .apply-lego .month-pick label { min-width: 0; flex: 1; padding: 8px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv2 .lego-tower .tb { animation: none; }
  .sv2 .apply-lego .lego-brick { transition: none; }
}