/* 일사천리 다크 디자인
   무광 차콜 바탕, 가는 테두리, 보라는 버튼과 링크에만.
   빛 번짐·점무늬·유리 효과 없이 실제 회사 홈페이지처럼 차분하게. */
:root {
  --bg: #111113;
  --surface: #18181B;
  --surface-2: #1F1F23;
  --sunken: #141417;
  --line: #2A2A30;
  --line-2: #3A3A42;
  --text: #EDEDF0;
  --text-2: #A1A1AA;
  --text-3: #71717A;
  --purple: #6A45F0;
  --purple-hover: #5A36E0;
  --purple-text: #A994FF;
  --gray-700: #A1A1AA;
  --gray-500: #7C7C86;
  --gray-300: #3A3A42;
  --gray-200: #2A2A30;
  --gray-100: #1F1F23;
  --lavender: #24213A;
  --lavender-2: #19181F;
  --radius: 14px;
  --radius-sm: 10px;
  color-scheme: dark;
}
body { background: var(--bg); color: var(--text); }
main > section + section { border-top: 1px solid var(--line); }
.btn { border-radius: 10px; }
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-hover); }
.btn-ghost, .btn-outline { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover, .btn-outline:hover { border-color: var(--text); background: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--text-3); letter-spacing: .16em; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.section-head h2 { font-weight: 700; letter-spacing: -.035em; }
.section-desc { color: var(--text-2); }
:focus-visible { outline-color: var(--purple-text); }

/* 띠배너·헤더 */
.promo { background: #0B0B0D; color: var(--text-2); border-bottom: 1px solid var(--line); }
.promo-sub, .promo-close { color: var(--text-3); }
.promo-link { color: var(--text); }
.badge-new { background: var(--purple); color: #fff; }
.header { background: rgba(17, 17, 19, .92); border-bottom: 1px solid var(--line); }
.header.scrolled { border-bottom-color: var(--line); box-shadow: none; }
.nav { color: var(--text-2); font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--purple-text); }
.header-phone { color: var(--text-2); }
.header-phone svg { stroke: var(--text-2); }
.menu-toggle span { background: var(--text); }
@media (max-width: 860px) {
  .nav { background: var(--surface); border-bottom-color: var(--line); box-shadow: none; }
  .nav a { color: var(--text); border-bottom-color: var(--line); }
}

/* 첫 화면: 문구 + 공간 평면도 */
.hero-plan {
  display: flex; align-items: center; background: var(--bg); padding-block: 56px;
  min-height: calc(100vh - var(--header-h) - var(--promo-h) - var(--mobilebar-h));
  min-height: calc(100svh - var(--header-h) - var(--promo-h) - var(--mobilebar-h));
}
.hero-plan .hero-inner { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; }
.hero-plan h1 { color: var(--text); }
.hero-plan h1 em { color: var(--purple-text); }
.hero-plan .hero-lead { color: var(--text-2); }
.hero-plan .eyebrow-chip { background: transparent; color: var(--text-2); border: 1px solid var(--line-2); }
.hero-plan .hero-checks { color: var(--text-2); }
.hero-plan .hero-checks li::before { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%23A994FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hero-media {
  position: relative; justify-self: end; width: min(100%, calc(100svh - var(--header-h) - var(--promo-h) - 120px)); min-width: min(100%, 360px);
  aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #2A1380;
}
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 960px) { .hero-media { justify-self: stretch; width: 100%; min-width: 0; } }
.hero-art { margin: 0; }
.hero-art figcaption { margin-top: 12px; font-size: 12px; color: var(--text-3); text-align: right; }
.plan-svg { display: block; width: 100%; height: auto; }

/* 도면 그림 공통 */
.plan-svg .w, .plan-visual svg .w { fill: none; stroke: #CFCFD5; stroke-width: 5; stroke-linecap: square; }
.plan-svg .w { stroke-dasharray: 1; animation: plan-draw 1.8s cubic-bezier(.6, 0, .3, 1) both; }
.plan-svg .f, .plan-visual svg .f { fill: none; stroke: #6E6E78; stroke-width: 1.5; stroke-linejoin: round; }
.plan-svg .d, .plan-visual svg .d { fill: none; stroke: #55555E; stroke-width: 1.2; }
.plan-svg .t, .plan-visual svg .t { fill: var(--text-2); font: 600 13px var(--font); text-anchor: middle; }
.plan-svg .t-no { fill: var(--text-3); font: 500 11px var(--font); text-anchor: middle; letter-spacing: .08em; }
.plan-svg .t-dim, .plan-visual svg .t-dim { fill: var(--text-3); font-weight: 500; font-size: 12px; }
.plan-svg .dim path, .plan-visual svg .dim path { stroke: #45454D; stroke-width: 1; fill: none; }
.plan-svg .room, .plan-svg .zone { animation: plan-fade .8s ease both; animation-delay: 1.1s; }
.plan-svg .room.is-hl .hl-fill { fill: rgba(106, 69, 240, .14); }
.plan-svg .room.is-hl .f { stroke: #8D74FF; }
.plan-svg .room.is-hl .t { fill: #C9BBFF; }
.plan-svg .live { fill: var(--purple-text); animation: live-dot 2.4s ease-in-out infinite; }
.plan-svg .arrow { fill: none; stroke: var(--purple-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes plan-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes plan-fade { from { opacity: 0; } }
@keyframes live-dot { 50% { opacity: .25; } }
@media (max-width: 960px) {
  .hero-plan { align-items: flex-start; padding-block: 40px 48px; }
  .hero-plan .hero-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* 일·사·천·리 캐러셀 */
.about { background: var(--bg); color: var(--text); }
.about::before { display: none; }
.car-btn { background: var(--surface); border-color: var(--line-2); color: var(--text); }
.car-btn:hover { background: var(--text); border-color: var(--text); color: #111; }
.slide { background: var(--surface); border-color: var(--line); border-radius: 18px; box-shadow: none; opacity: .45; }
.slide.is-active { border-color: var(--line-2); box-shadow: none; }
.slide-visual { background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; }
.slide-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide-visual .ln { fill: none; stroke: #C9C9CF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.slide-visual .ln2 { fill: none; stroke: #4F4F57; stroke-width: 1.3; stroke-linecap: round; }
.slide-visual .acc { fill: none; stroke: var(--purple-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slide-visual .thick { stroke-width: 2.6; }
.slide-visual .dash { stroke-dasharray: 4 6; }
.slide-visual .fill { fill: var(--sunken); }
.slide-visual .dot { fill: var(--sunken); stroke: var(--purple-text); stroke-width: 2; }
.slide-visual .dot.on { fill: var(--purple-text); }
.slide-visual .lb { fill: var(--text-3); font: 500 13px var(--font); }
.slide-visual .acc-t { fill: var(--purple-text); font-weight: 700; }
.slide-key b { background: var(--surface-2); color: var(--purple-text); border: 1px solid var(--line-2); border-radius: 10px; }
.slide-key span { color: var(--text-3); }
.slide-copy > p { color: var(--text-2); }
.slide-points li { background: transparent; border: 1px solid var(--line); color: var(--text-2); }
.slide-points li::before { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%23A994FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.slide-link { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
.slide-link:hover { text-decoration-color: var(--text); }
.car-tab { color: var(--text-3); }
.car-tab:hover, .car-tab.is-active { color: var(--text); }
.car-tab .bar { background: var(--line); height: 2px; }
.car-tab .bar i { background: var(--text); }
.car-tab b { background: var(--surface-2); color: var(--text-3); }
.car-tab.is-active b { background: var(--text); color: #111; }
.promises { border-top-color: var(--line); }
.promise-ico { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.promise-ico svg { stroke: var(--text-2); }
.promises p { color: var(--text-2); }

/* 상품 */
.products { background: var(--bg); color: var(--text); }
.products::before { display: none; }
.products .section-head-light .eyebrow { color: var(--text-3); }
.products .section-head-light .section-desc { color: var(--text-2); }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.plan:hover { transform: none; border-color: var(--line-2); box-shadow: none; }
.plan-main { background: var(--surface); border: 1px solid var(--line-2); border-top: 2px solid var(--purple); box-shadow: none; }
.plan-visual { background: var(--sunken); border-bottom: 1px solid var(--line); }
.plan-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan-visual svg .floor { fill: rgba(106, 69, 240, .08); }
.plan-visual svg .win { fill: var(--sunken); stroke: #CFCFD5; stroke-width: 1.5; }
.plan-visual svg .lock rect, .plan-visual svg .lock path { fill: none; stroke: var(--purple-text); stroke-width: 1.8; stroke-linecap: round; }
.plan-visual svg .w-soft { fill: none; stroke: #55555E; stroke-width: 1.5; }
.plan-visual svg .ln2 { fill: none; stroke: #45454D; stroke-width: 1.2; }
.plan-visual svg .mb rect, .plan-visual svg .mb path { fill: none; stroke: #6E6E78; stroke-width: 1.4; }
.plan-visual svg .mb.is-hl rect, .plan-visual svg .mb.is-hl path { stroke: var(--purple-text); }
.plan-visual svg .env rect { fill: var(--sunken); stroke: var(--text); stroke-width: 1.6; }
.plan-visual svg .env path { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linejoin: round; }
.badge-best { background: var(--text); color: #111; }
.badge-sub { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
.plan-one { color: var(--purple-text); }
.plan-for { background: var(--bg); border: 1px solid var(--line); color: var(--text-2); border-radius: 12px; }
.plan-for strong { color: var(--text); }
.plan-features { color: var(--text); }
.plan-features li::before { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%23A994FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan-bottom { border-top-color: var(--line); }
.plan-price-label, .plan-price small { color: var(--text-3); }
.products .btn-primary { background: var(--purple); color: #fff; }
.products .btn-primary:hover { background: var(--purple-hover); }
.products .btn-outline { background: transparent; color: var(--text); border-color: var(--line-2); }
.products .btn-outline:hover { background: var(--surface-2); border-color: var(--text); }
.plan-help { background: var(--surface); border-color: var(--line); border-radius: 16px; }
.plan-help-copy p { color: var(--text-2); }
.plan-help-ico { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; }
.plan-help-ico svg { stroke: var(--text); }

/* 성장 프로그램 */
.program { background: var(--bg); color: var(--text); }
.free-stamp {
  width: auto; height: auto; padding: 18px 24px; border-radius: 14px; transform: none; outline: none; box-shadow: none;
  justify-items: start; background: var(--surface); color: var(--text); border: 1px solid var(--line-2);
}
.free-stamp span { color: var(--text-3); font-size: 13px; }
.free-stamp strong { font-size: 44px; }
.free-stamp small { font-size: 20px; }
@media (max-width: 860px) {
  .free-stamp { position: static; width: auto; height: auto; }
  .program-head .section-head { padding-right: 0; }
}
@media (max-width: 480px) {
  .free-stamp { width: auto; height: auto; padding: 14px 18px; }
  .free-stamp strong { font-size: 34px; }
  .program-head .section-head { padding-right: 0; }
}
.course { background: var(--surface); border-color: var(--line); border-radius: 18px; box-shadow: none; }
.course-visual { background: var(--sunken); border-bottom: 1px solid var(--line); }
.course-visual::before { display: none; }
.mw-window { background: #1C1C20; border: 1px solid var(--line-2); box-shadow: none; }
.mw-bar { background: #19191C; border-bottom-color: var(--line); }
.mw-bar i { background: #3A3A42; }
.mw-bar span { background: var(--bg); color: var(--text-3); }
.mw-prompt { background: var(--lavender); color: var(--text); }
.mw-prompt b { background: var(--purple); }
.mw-hero { background: #2A2A30; }
.mw-hero span { background: rgba(255, 255, 255, .7); }
.mw-hero em { background: var(--purple-text); }
.mw-cards span { background: #19191C; border-color: var(--line); }
.mf-status { background: var(--surface-2); border: 1px solid var(--line); }
.mf-steps::before { background: var(--line-2); }
.mf-steps::after { background: var(--purple-text); box-shadow: none; }
.mf-steps li { background: #19191C; border-color: var(--line); }
.mf-ico { background: #2A2A30; }
.mf-ico svg { stroke: var(--text); }
@keyframes mf-glow { 0%, 30%, 100% { border-color: var(--line); background: #19191C; } 8%, 22% { border-color: var(--purple-text); background: rgba(106, 69, 240, .12); } }
.course-no { color: var(--text-3); }
.course-tag { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }
.course-one { color: var(--text-2); }
.curriculum li { background: var(--sunken); border: 1px solid var(--line); color: var(--text); border-radius: 10px; }
.curriculum li::before { color: var(--purple-text); }
.course-result { background: var(--sunken); border-color: var(--line-2); color: var(--text); border-radius: 12px; }
.course-result strong { color: var(--purple-text); }
.course-proof { color: var(--text-2); }
.course-proof::before { background-color: var(--purple); }
.course-meta { color: var(--text-2); }
.course-meta > span { border-color: var(--line); }
.program-cta { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; color: var(--text); }
.program-cta p { color: var(--text-2); }
.program-cta .btn-primary { background: var(--purple); color: #fff; }
.program-cta .btn-primary:hover { background: var(--purple-hover); }
.btn-ghost-dark { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost-dark:hover { background: transparent; border-color: var(--text); }

/* 시설 */
.amenities { background: var(--bg); }
.amenity-grid li { background: var(--surface); border-color: var(--line); border-radius: 12px; }
.amenity-grid svg { stroke: var(--text-2); }

/* 상담 */
.contact { background: var(--surface); color: var(--text); }
.contact::before { display: none; }
.contact-copy .eyebrow { color: var(--text-3); }
.contact-copy > p { color: var(--text-2); }
.contact-phone { background: transparent; border: 1px solid var(--line-2); }
.contact-form { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
.field input, .field select { background-color: var(--surface); border-color: var(--line); color: var(--text); border-radius: 10px; }
.field input::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus { border-color: var(--purple-text); }
.consent { color: var(--text-2); }
.consent-link { color: var(--text-3); }
.consent input { accent-color: var(--purple); }
.form-msg.ok { color: var(--purple-text); }

/* 푸터·하단 바 */
.footer { background: #0B0B0D; border-top: 1px solid var(--line); color: var(--text-3); }
.footer-links a { color: var(--text-2); }
.mobile-bar { background: rgba(17, 17, 19, .96); border-top-color: var(--line); }
.btn-ghost-light { background: transparent; color: var(--text); border-color: var(--line-2); }

/* ───────── 강의실 ───────── */
.cr-hero { background: var(--bg); padding-block: 64px 132px; }
.cr-hero::before { display: none; }
.cr-hero .eyebrow-chip { background: transparent; color: var(--text-2); border: 1px solid var(--line-2); }
.cr-hero h1 { color: var(--text); }
.cr-lead { color: var(--text-2); }
.cr-stats li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.cr-stats span { color: var(--text-3); }
.cr-channel { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); }
.cr-me { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
.cr-me-title { color: var(--text-3); }
.cr-ring-bg { stroke: var(--line); }
.cr-ring-fg { stroke: var(--purple-text); }
.cr-me-sum li { background: var(--sunken); color: var(--text-2); border: 1px solid var(--line); }
.cr-me-sum b { color: var(--text); }
.cr-me-next { background: var(--sunken); border-color: var(--line); border-radius: 12px; }
.cr-me-label { color: var(--purple-text); }
.cr-me-lec span { color: var(--text-3); }
.cr-me-empty { color: var(--text-2); }
.cr-me-note { color: var(--text-3); }
.cr-course { background: var(--surface); border-color: var(--line); border-radius: 18px; box-shadow: none; }
.cr-course-no { color: var(--text-3); }
.cr-course-no span { background: var(--surface-2); color: var(--text-2); }
.cr-course-desc { color: var(--text-2); }
.cr-course-result { background: var(--sunken); border-color: var(--line); }
.cr-course-result strong { color: var(--purple-text); }
.cr-progress-label { color: var(--text-3); }
.cr-progress-bar { background: var(--line); }
.cr-progress-bar i { background: var(--purple-text); }
.cr-progress.is-mine .cr-progress-bar i { background: var(--text); }
.cr-progress-text { color: var(--text-2); }
.cr-course-go { background: transparent; color: var(--text); border-color: var(--line-2); }
.cr-course-go:hover { background: var(--text); color: #111; border-color: var(--text); }
.cr-steps li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.cr-step-ico { background: var(--sunken); border-color: var(--line); }
.cr-step-ico svg { stroke: var(--text-2); }
.cr-steps li:first-child .cr-step-ico svg { fill: #E5484D; stroke: none; }
.cr-steps span { color: var(--text-2); }
.cr-toolbar { background: rgba(17, 17, 19, .94); border-bottom-color: var(--line); }
.cr-tab, .cr-filter { background: var(--surface); border-color: var(--line-2); color: var(--text-2); border-radius: 10px; }
.cr-tab span { background: var(--surface-2); color: var(--text-3); }
.cr-tab:hover, .cr-filter:hover { border-color: var(--text); color: var(--text); }
.cr-tab[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #111; }
.cr-tab[aria-pressed="true"] span { background: rgba(0, 0, 0, .08); color: #111; }
.cr-filter[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: #fff; }
.cr-search { background: var(--surface); border-color: var(--line); border-radius: 10px; }
.cr-search input { color: var(--text); }
.cr-search:focus-within { background: var(--surface); border-color: var(--purple-text); }
.cr-group-head p { color: var(--text-3); }
.cr-group-head span { background: var(--surface); color: var(--text-3); border: 1px solid var(--line); }
.lec { background: var(--surface); border-color: var(--line); border-radius: 14px; }
.lec:not(.is-soon):hover { transform: none; border-color: var(--line-2); box-shadow: none; }
.lec.is-done { border-color: var(--line-2); }
.lec-thumb { background: var(--sunken); }
.lec-ph { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px 18px; background: #1B1B1F; }
.lec-ph::before { display: none; }
.lec-ph-top { display: flex; gap: 8px; font-size: 11px; letter-spacing: .12em; color: var(--text-3); }
.lec-ph-top b { color: var(--purple-text); font-weight: 800; }
.lec-ph-top i { font-style: normal; }
.lec-ph-title { font-size: 19px; font-weight: 800; line-height: 1.35; letter-spacing: -.03em; color: #fff; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lec-thumb .lec-ph-logo { position: static; inset: auto; align-self: flex-end; width: 64px; height: auto; object-fit: contain; opacity: .5; transform: none; }
.lec-mkt .lec-ph { background: #1B1B1F; }
.lec-soon { background: rgba(17, 17, 19, .8); border: 1px solid var(--line-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
.lec-play { background: #fff; }
.lec-play svg { fill: #111; }
.is-done .lec-thumb::after { background: rgba(17, 17, 19, .62); }
.lec-donemark { background: #fff; color: #111; }
.lec-next { background: var(--purple); }
.lec-new { background: var(--text); color: #111; }
.lec-time { background: rgba(0, 0, 0, .72); }
.lec-ep { background: var(--surface-2); color: var(--text-2); }
.lec-course { color: var(--text-3); }
.lec-sum { color: var(--text-2); }
.lec-done { background: transparent; border-color: var(--line-2); color: var(--text-3); }
.lec-done:hover { border-color: var(--text); color: var(--text); }
.lec-done[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: #fff; }
.lec-btn { border-radius: 10px; }
.lec-btn-yt { background: var(--text); color: #111; }
.lec-btn-yt svg { fill: #E5252A; }
.lec-btn-yt:hover { background: #fff; }
.lec-btn-pdf { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); }
.lec-btn-pdf:hover { background: #26262B; }
.lec-btn.is-off { background: var(--sunken); color: #55555E; border: 1px solid var(--line); }
.lec-btn.is-off svg { fill: #3A3A42; }
.lec-btn.is-off svg path + path { stroke: #55555E; }
.cr-faq-inner { border-top-color: var(--line); }
.cr-faq details { border-bottom-color: var(--line); }
.cr-faq summary::after { background-color: var(--surface-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cr-faq details p { color: var(--text-2); }
.cr-empty { border-color: var(--line-2); color: var(--text-3); }

/* ───────── 무료 수강 신청 ───────── */
.cr-signup-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cr-signup-cta span { font-size: 14px; color: var(--text-2); }
.cr-signup-done { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; color: var(--text-2); }
.cr-signup-done b { color: var(--text); }
.cr-signup-done svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--purple-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.su { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line-2); border-radius: 18px; background: var(--surface); color: var(--text); overflow: auto; }
.su::backdrop { background: rgba(5, 5, 8, .72); }
.su-form { position: relative; padding: 30px 26px 24px; }
.su-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-3); cursor: pointer; }
.su-x:hover { background: var(--surface-2); color: var(--text); }
.su-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.su-eyebrow { font-size: 13px; font-weight: 700; color: var(--purple-text); margin-bottom: 8px; }
.su h2 { font-size: 23px; font-weight: 700; line-height: 1.35; letter-spacing: -.03em; margin-bottom: 8px; }
.su-desc { font-size: 14px; color: var(--text-2); margin-bottom: 20px; }
.su .field { margin-bottom: 12px; }
.su .field label { color: var(--text); }
.su .field input { height: 48px; }
.su-consents { margin: 18px 0 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.su-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); cursor: pointer; line-height: 1.5; }
.su-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--purple); }
.su-check b { color: var(--purple-text); font-weight: 700; }
.su-check b.su-opt { color: var(--text-3); }
.su-all { padding: 14px 14px; background: var(--surface-2); font-weight: 700; border-bottom: 1px solid var(--line); }
.su-item { padding: 12px 14px; }
.su-item + .su-item { border-top: 1px solid var(--line); }
.su-item details { margin: 6px 0 0 28px; font-size: 13px; color: var(--text-2); }
.su-item summary { cursor: pointer; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.su-item dl { margin: 8px 0 6px; display: grid; gap: 4px; }
.su-item dl div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.su-item dt { color: var(--text-3); }
.su-item dd { color: var(--text-2); }
.su-msg { min-height: 1.4em; margin-top: 10px; font-size: 14px; color: var(--text-2); }
.su-msg.is-bad { color: #F87171; }
.su-policy { font-size: 12px; color: var(--text-3); }
.su-policy a { text-decoration: underline; text-underline-offset: 3px; }
.su-done { display: grid; gap: 12px; text-align: center; justify-items: center; padding-top: 8px; }
.su-done h2 { margin-bottom: 0; }
.su-done > p { font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.su-done-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(106, 69, 240, .16); }
.su-done-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--purple-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.su-done .btn { width: 100%; }
.su-note { font-size: 12px; color: #FBBF24; text-align: left; line-height: 1.6; }

/* 알림 동의 강조, 카카오톡 버튼 */
.su-item-promo { background: rgba(106, 69, 240, .08); }
.su-check em { font-style: normal; color: var(--text-2); }
.su-hint { margin: 4px 0 0 28px; font-size: 12px; color: var(--purple-text); }
.su-mkt-box { width: 100%; display: grid; gap: 8px; text-align: left; padding: 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--sunken); }
.su-mkt-box strong { font-size: 15px; }
.su-mkt-box p { font-size: 13px; color: var(--text-2); }
.su-mkt-box .su-fine { font-size: 12px; color: var(--text-3); }
.su-mkt-thanks { font-size: 14px; color: var(--purple-text); }
.btn-kakao { background: #FEE500; color: #191919; border-color: #FEE500; gap: 8px; }
.btn-kakao:hover { background: #F5DC00; }
.btn-kakao svg { width: 20px; height: 20px; fill: #191919; }
.su-done .btn-kakao { width: 100%; }

/* 좁은 화면에서 검색칸이 화면 밖으로 밀리지 않게 */
.cr-search { min-width: 0; }
@media (max-width: 960px) { .cr-tools { width: 100%; min-width: 0; } }

/* ───────── 오른쪽 빠른 메뉴 ───────── */
.qm {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 45;
  display: grid; border-radius: 16px; overflow: hidden;
  background: rgba(24, 24, 27, .95); border: 1px solid var(--line-2);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
}
.qm-btn {
  display: grid; justify-items: center; gap: 5px; width: 68px; padding: 13px 4px; border: 0; background: transparent;
  color: var(--text-2); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.qm-btn + .qm-btn { border-top: 1px solid var(--line); }
.qm-btn:hover { background: var(--surface-2); color: var(--text); }
.qm-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qm-kakao svg { fill: #FEE500; stroke: none; }
@media (max-width: 1100px) {
  .qm { right: 10px; }
  .qm-btn { width: 50px; padding: 13px 0; }
  .qm-btn span { display: none; }
}
@media (max-width: 480px) {
  .qm { right: 6px; border-radius: 14px; }
  .qm-btn { width: 44px; padding: 11px 0; }
  .qm-btn svg { width: 20px; height: 20px; }
}

.qm-dlg { width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line-2); border-radius: 18px; background: var(--surface); color: var(--text); overflow: auto; }
.qm-dlg::backdrop { background: rgba(5, 5, 8, .7); }
.qm-inner { position: relative; padding: 28px 24px 22px; }
.qm-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-3); cursor: pointer; }
.qm-x:hover { background: var(--surface-2); color: var(--text); }
.qm-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.qm-eyebrow { font-size: 13px; font-weight: 700; color: var(--purple-text); margin-bottom: 6px; }
.qm-dlg h2 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.35; padding-right: 32px; }
.qm-dlg h2.qm-phone { font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.qm-desc { margin-top: 8px; font-size: 14px; color: var(--text-2); }
.qm-info { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.qm-info div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; font-size: 15px; }
.qm-info dt { color: var(--text-3); font-size: 14px; }
.qm-actions { display: grid; gap: 8px; margin-top: 18px; }
.qm-actions + .qm-actions { margin-top: 8px; }
.qm-two { grid-template-columns: 1fr 1fr; }
.qm-actions .btn { width: 100%; }
.qm-actions .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.qm-fine { margin-top: 12px; font-size: 12px; color: var(--text-3); }

/* 헤더 로고는 흰색 */
.brand img { filter: brightness(0) invert(1); }

/* 그림 아래 작은 설명 글자는 왼쪽 정렬 */
.plan-visual svg .t-dim { text-anchor: start; }