/* ══════════════════════════════════════════════════════════════
   DB IN 견적마법사 — 「오로라」 판

   미래지향적인 느낌을 어둡게 가는 대신 **빛**으로 만든다.
   밝은 바탕 위로 보라·청록 빛무리가 천천히 흐르고, 카드는 반투명 유리다.

   ── 왜 어두운 판을 버렸나 (2026-09-28) ──
   처음에는 L-Pick 처럼 짙은 남보라로 만들었는데 두 가지가 걸렸다.
     · 색만 어두워졌을 뿐, 「미래」라기보다 그냥 다크모드였다
     · 제조사 로고·제품 사진이 흰 카드 위에 놓여 누끼가 안 된 것처럼 보였다
   빛으로 가면 둘 다 풀린다 — 누끼 이미지는 밝은 바탕에 그대로 얹힌다.

   ⚠ wizard.css 다음에 읽힌다. 색과 질감만 덮어쓴다 — 자리·크기는 건드리지 않는다.
   ⚠ 켜고 끄기: request.html 의 <html data-skin="neo">. 속성을 지우면 원래 판이다.
   ⚠ 흰 받침(이미지 뒤 흰 사각형)을 다시 넣지 말 것. 로고·제품은 모두 누끼다.
     DB IN 로고만 흰 배경이 박혀 있어 tools/png-cutout.mjs 로 따냈다(w001-cut.png).
   ══════════════════════════════════════════════════════════════ */

:root[data-skin="neo"] {
  --canvas:#F4F5FC;
  --bg:#FFFFFF;
  --panel:#FFFFFF;

  --ink:#191533;
  --ink2:#565078;
  --ink3:#8A85A6;

  --line:rgba(25,21,51,.08);
  --line-strong:rgba(25,21,51,.14);

  /* 브랜드 — 밝은 바탕에서는 원래 보라(#4A2E6E)가 무겁다. 한 단계 밝고 선명하게 */
  --red:#6B4BE0;
  --red-dark:#5334C6;
  --red-soft:#EFEBFF;
  --red-soft2:#DCD2FF;

  --gold:#B0863B;
  --required:#D4514A;
  --price:#0F9E8C;
  --green:#12866F;
  --green-soft:#E2F5F0;

  --shadow-sm:0 1px 2px rgba(60,48,120,.06);
  --shadow-md:0 2px 6px rgba(60,48,120,.06), 0 24px 48px -24px rgba(76,58,168,.30);
  --ring:0 0 0 4px rgba(107,75,224,.16);

  /* 이 판에서만 쓰는 값 */
  --au-1:#7C5BE8;      /* 보라 */
  --au-2:#2FD1C8;      /* 청록 */
  --au-3:#FF9BC2;      /* 분홍 — 아주 조금만 */
  --glass:rgba(255,255,255,.70);
  --glass-2:rgba(255,255,255,.55);

  background:#F4F5FC;
}

/* ── 바탕: 천천히 흐르는 빛무리 + 가는 격자 ──
   ⚠ 34초에 한 바퀴. 빠르게 만들지 말 것 — 견적을 고르는 눈을 뺏는다. */
:root[data-skin="neo"] body { background:transparent;position:relative }

:root[data-skin="neo"] body::before {
  content:'';position:fixed;inset:-20% -10%;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(124,91,232,.30), transparent 70%),
    radial-gradient(34% 28% at 82% 26%, rgba(47,209,200,.26), transparent 70%),
    radial-gradient(30% 26% at 62% 78%, rgba(255,155,194,.20), transparent 72%),
    radial-gradient(40% 32% at 12% 72%, rgba(124,91,232,.16), transparent 72%);
  filter:blur(18px);
  animation:au-drift 34s ease-in-out infinite alternate;
}
@keyframes au-drift {
  0%   { transform:translate3d(0,0,0) scale(1) }
  50%  { transform:translate3d(-2.5%,1.5%,0) scale(1.06) }
  100% { transform:translate3d(2%,-2%,0) scale(1.03) }
}

/* 가는 격자 — 화면 윗부분에만 은은하게 */
:root[data-skin="neo"] body::after {
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(25,21,51,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,21,51,.045) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.25) 46%, transparent 72%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.25) 46%, transparent 72%);
}
:root[data-skin="neo"] .page { position:relative;z-index:1 }

/* ── 본 카드: 유리 ── */
:root[data-skin="neo"] .step-card {
  background:var(--glass);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 30px 70px -34px rgba(76,58,168,.45),
    0 2px 10px rgba(76,58,168,.06);
  backdrop-filter:blur(22px) saturate(1.25);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
}
/* 위 모서리를 따라 흐르는 빛선 */
:root[data-skin="neo"] .step-card::before {
  content:'';position:absolute;top:0;left:10%;right:10%;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--au-1), var(--au-2), transparent);
  opacity:.85;
}

/* ── 머리 줄 ──
   ⚠ 로고 뒤에 흰 받침을 깔지 말 것. 누끼 파일(w001-cut.png)을 쓴다 */
:root[data-skin="neo"] .brand-row-logo { height:26px }
/* ⚠ 배지는 글자만이다(2026-09-28). 배경·테두리를 넣으면 로고 옆에서 카드처럼 보인다 */
:root[data-skin="neo"] .p1-tag { color:#5334C6;background:none;border:0;padding:0 }

/* ── 진행 막대 ── */
:root[data-skin="neo"] .progress { background:rgba(25,21,51,.07) }
:root[data-skin="neo"] .progress-fill {
  background:linear-gradient(90deg, var(--au-1), var(--au-2));
  box-shadow:0 0 12px rgba(124,91,232,.45);
}

/* ── 강조 글자: 빛 그라데이션 ── */
:root[data-skin="neo"] .p1-title .hl {
  background:linear-gradient(100deg, #6B4BE0 10%, #2FD1C8 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── 브랜드 로고 띠 ──
   ⚠ 로고마다 흰 카드를 깔지 말 것. 제조사 로고는 누끼라 띠 자체를 밝게 하면
     배경 없이 떠 있는 것처럼 보인다. 흰 사각형이 줄지어 보이던 것을 이렇게 고쳤다. */
:root[data-skin="neo"] .p1-hero-banner {
  /* ⚠ 색은 아주 옅게만. 띠가 짙어지면 카드 배경과 층이 져 보인다(2026-09-28 더 연하게 조정). */
  background:
    linear-gradient(135deg, rgba(124,91,232,.085) 0%, rgba(47,209,200,.075) 55%, rgba(255,155,194,.065) 100%),
    rgba(255,255,255,.82);
  /* ⚠ 띠를 도드라지게 하는 것은 「색」이 아니라 「높이」다.
       짙게 칠하면 카드 위에 얼룩이 지므로, 그림자를 깊게 주어 떠 보이게 한다. */
  border:0;
  box-shadow:
    0 10px 20px -10px rgba(76,58,168,.30),
    0 26px 44px -22px rgba(76,58,168,.42),
    inset 0 1px 0 rgba(255,255,255,.95);
  /* ⚠ 여기에 backdrop-filter 를 쓰지 말 것. 안에서 확대되는 로고 카드가 별도 층으로
     그려지면서 카드 자리에 네모난 밝은 자국이 남는다(2026-09-28 확인). */
}
/* 가장자리 실선 — 보라 단색 1.5px.
   ⚠ 무지개(보라→민트→분홍)로 둘러봤더니 어수선했다(2026-09-28). 한 색으로 둔다.
   ⚠ border-radius 는 띠와 같은 값이어야 모서리가 어긋나지 않는다. */
:root[data-skin="neo"] .p1-hero-banner::after {
  content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  border:1.5px solid rgba(107,75,224,.42);
}

/* 가운데 번짐 — 밝은 판에서는 보라 기운이 띠를 짙어 보이게 한다. 흰빛으로 바꾼다 */
:root[data-skin="neo"] .p1-hero-banner::before {
  background:radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0));
}
:root[data-skin="neo"] .p1-hero-logo-card {
  background:transparent;border:0;box-shadow:none;
}
/* 가운데로 온 로고만 살짝 도드라지게 — 띠가 밋밋해 보이지 않는다 */
:root[data-skin="neo"] .p1-hero-logo-card img { filter:drop-shadow(0 7px 16px rgba(40,28,100,.26)) }

/* 혜택 카드 — 다른 유리 카드와 같은 재질로 */
:root[data-skin="neo"] .p1-why-card{
  background:var(--glass-2);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(60,48,120,.05), 0 10px 26px -18px rgba(76,58,168,.45);
}
:root[data-skin="neo"] .p1-why-ico{
  background:linear-gradient(135deg, rgba(124,91,232,.16), rgba(47,209,200,.16));
  color:#5334C6;
}

/* 안심 상자 — 밝은 판에서도 초록이 뜨지 않게 */
:root[data-skin="neo"] .p1-calm{
  background:rgba(47,209,200,.10);
  border-color:rgba(47,160,150,.24);
}
:root[data-skin="neo"] .p1-chip{
  background:rgba(255,255,255,.72);
  border-color:rgba(124,91,232,.18);
}
/* 누적 실적 세 칸 — 칩과 같은 결로 맞춘다 */
:root[data-skin="neo"] .p1-stats{
  border:1px solid rgba(124,91,232,.18);
  background:rgba(255,255,255,.72);
  border-radius:14px;
  padding:12px 0;
}
:root[data-skin="neo"] .p1-stat + .p1-stat{border-left-color:rgba(124,91,232,.18)}

/* ── 이용 순서 번호 ── */
:root[data-skin="neo"] .p1-why-n {
  box-shadow:0 4px 10px -4px rgba(76,58,168,.65);
}

/* ── 고르는 것들: 반투명 유리, 손대면 살짝 떠오른다 ──
   ⚠ 고른 상태를 색만으로 말하지 말 것. 테두리·그림자도 함께 바뀐다 */
:root[data-skin="neo"] .opt-card,
:root[data-skin="neo"] .item-card,
:root[data-skin="neo"] .bud-card,
:root[data-skin="neo"] .acc-cat,
:root[data-skin="neo"] .sel-summary-box,
:root[data-skin="neo"] .privacy-box,
:root[data-skin="neo"] .p1-note,
:root[data-skin="neo"] .brand-card {
  background:var(--glass-2);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(60,48,120,.05), 0 10px 26px -18px rgba(76,58,168,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
:root[data-skin="neo"] .opt-card:hover,
:root[data-skin="neo"] .item-card:hover,
:root[data-skin="neo"] .bud-card:hover,
:root[data-skin="neo"] .brand-card:hover,
:root[data-skin="neo"] .acc-cat:hover {
  transform:translateY(-2px);
  border-color:rgba(124,91,232,.45);
  box-shadow:0 14px 30px -16px rgba(76,58,168,.55);
}
:root[data-skin="neo"] .opt-card.sel,
:root[data-skin="neo"] .brand-card.sel,
:root[data-skin="neo"] .item-card.sel,
:root[data-skin="neo"] .bud-card.sel {
  background:linear-gradient(135deg, rgba(124,91,232,.12), rgba(47,209,200,.10));
  border-color:rgba(124,91,232,.65);
  box-shadow:0 0 0 3px rgba(107,75,224,.14), 0 16px 34px -18px rgba(76,58,168,.65);
}

/* ── 버튼 ── */
:root[data-skin="neo"] .btn-primary {
  background:linear-gradient(120deg, #6B4BE0 0%, #7C5BE8 46%, #2FD1C8 130%);
  box-shadow:0 14px 30px -12px rgba(107,75,224,.70), inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;overflow:hidden;
}
/* 4.4초에 한 번 빛이 스친다.
   ⚠ 꺼져 있는 버튼에는 빛도 없다 — 누를 수 있다고 착각하게 만든다 */
:root[data-skin="neo"] .btn-primary:not(:disabled)::after {
  content:'';position:absolute;top:0;bottom:0;left:-40%;width:32%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg);
  animation:au-sheen 4.4s ease-in-out infinite;
}
@keyframes au-sheen { 0%,64% { left:-40% } 90%,100% { left:120% } }
:root[data-skin="neo"] .btn-primary:disabled { background:rgba(25,21,51,.10);color:#9A95B4;box-shadow:none }
:root[data-skin="neo"] .btn-secondary,
:root[data-skin="neo"] .btn-outline {
  background:rgba(255,255,255,.75);border-color:rgba(124,91,232,.28);color:#4B3AA8;
  backdrop-filter:blur(8px);
}

/* 따라다니는 견적 버튼 — 본 버튼과 같은 그라데이션 */
:root[data-skin="neo"] .float-cta{
  background:linear-gradient(120deg, #6B4BE0 0%, #7C5BE8 46%, #2FD1C8 130%);
  box-shadow:0 16px 34px -12px rgba(107,75,224,.75), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ── 입력칸 ── */
:root[data-skin="neo"] .text-input,
:root[data-skin="neo"] .region-sel,
:root[data-skin="neo"] .info-textarea,
:root[data-skin="neo"] .phone-row,
:root[data-skin="neo"] .bud-direct-row {
  background:rgba(255,255,255,.80);
  border-color:rgba(124,91,232,.22);
  backdrop-filter:blur(8px);
}
:root[data-skin="neo"] .privacy-cb.on {
  background:linear-gradient(135deg, #6B4BE0, #2FD1C8);border-color:transparent;
  box-shadow:0 0 0 3px rgba(107,75,224,.16);
}

/* ── 결과 견적서 ── */
:root[data-skin="neo"] .quote-paper {
  background:linear-gradient(180deg, rgba(255,255,255,.93), rgba(255,255,255,.80));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 30px 70px -34px rgba(76,58,168,.55), 0 2px 10px rgba(76,58,168,.07);
  backdrop-filter:blur(18px);
}
:root[data-skin="neo"] .qp-table th { background:rgba(124,91,232,.08);color:#4B3AA8 }
:root[data-skin="neo"] .qp-sum,
:root[data-skin="neo"] .qp-sub-block,
:root[data-skin="neo"] .qp-cust-panel,
:root[data-skin="neo"] .qp-customer { background:rgba(124,91,232,.05);border-color:rgba(124,91,232,.14) }
/* 최종 금액 — 이 화면에서 가장 먼저 읽혀야 하는 한 줄 */
:root[data-skin="neo"] .qp-sum-final {
  background:linear-gradient(100deg, #6B4BE0, #0F9E8C);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root[data-skin="neo"] .qp-stamp { border-color:rgba(124,91,232,.45);color:#5334C6 }

/* ── 팝업·불러오는 중 ── */
:root[data-skin="neo"] .item-modal-box,
:root[data-skin="neo"] .modal-box {
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 30px 80px -34px rgba(76,58,168,.6);
  backdrop-filter:blur(22px);
}
/* ⚠ 바탕을 밝게 바꾸면 **글자색도 함께** 바꿀 것. wizard.css 의 .loading-overlay 는
     어두운 바탕(rgba(24,18,36,.74))에 맞춰 color:#fff 로 돼 있다. 바탕만 밝히는
     바람에 「AI가 최적의 견적을 계산하고 있어요」가 흰 바탕에 흰 글자가 되어
     2026-10-08 까지 아무에게도 보이지 않았다. */
:root[data-skin="neo"] .loading-overlay {
  background:rgba(244,245,252,.86);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--ink);
}
:root[data-skin="neo"] .loading-txt { color:var(--ink) }
/* ⚠ --ink3 는 이 바탕에서 대비가 3.2:1 밖에 안 나온다(기준 4.5:1).
   잘 안 보여서 고친 자리라 다시 흐리게 만들지 말 것. --ink2 는 6.9:1. */
:root[data-skin="neo"] .loading-sub { color:var(--ink2) }
:root[data-skin="neo"] .loading-spin { border-color:rgba(124,91,232,.22);border-top-color:var(--au-1) }

/* ⚠ 움직임을 줄이라는 설정을 존중한다. 어지럼증·멀미를 호소하는 사용자가 있다 */
@media (prefers-reduced-motion:reduce) {
  :root[data-skin="neo"] body::before { animation:none }
  :root[data-skin="neo"] .btn-primary::after { animation:none;display:none }
  :root[data-skin="neo"] .opt-card,
  :root[data-skin="neo"] .item-card,
  :root[data-skin="neo"] .bud-card,
  :root[data-skin="neo"] .brand-card,
  :root[data-skin="neo"] .acc-cat { transition:none }
}