/* 마감 손질 v2 — 2026-09-28. "좀 더 세련되고 현대적으로".
   v1(종이+코발트)이 얌전하고 보수적이었다. 축을 다시 잡는다.
     ① 파란 버튼을 걷어내고 먹빛(#0E0F12)을 주인공으로. 색은 상태 표시에만 쓴다.
     ② 여백과 활자 위계를 키운다. 제목은 크고 자간을 조이고, 라벨은 작고 넓게.
     ③ 미리보기는 어두운 스테이지 위에 올려 결과물이 작품처럼 보이게.
     ④ 모서리는 12~14px 로 통일. 유리·그림자 과다 제거.
   look.css 뒤에 실려 겉모습만 덮어쓴다. 기능·구조는 건드리지 않는다. */

body[class*="look-"], body {
  /* 색: 따뜻한 중립 + 테라코타 한 점 (시안 A 확정, 2026-09-28)
     보는 사람이 동네 사장님이고, 배너 배경이 음식·나무·조명처럼 따뜻한 색이 많아 화면과 결과물이 싸우지 않는다.
     JDND 주황 계열과도 이어진다. 색은 숫자·필수 표시·진행 막대·완료 알림에만 쓴다. */
  --bg:#F7F5F2; --card:#FFFDFB; --stage:#17140F;
  --ink:#141317; --ink-2:#433F3B; --muted:#8C867E; --faint:#BBB5AC;
  --hair:#E9E4DC; --hair-2:#DED8CE;
  --pri:#141317; --pri2:#000; --accent:#E4622A; --pri-ring:rgba(228,98,42,.16);
  --ok:#0F7A50; --warn:#B4531B; --err:#C0341B;
  --lift:0 1px 2px rgba(14,15,18,.04), 0 8px 24px rgba(14,15,18,.05);
  --lift-2:0 2px 6px rgba(14,15,18,.07), 0 18px 44px rgba(14,15,18,.10);
}
body[class*="look-"], body { background:var(--bg); color:var(--ink); }
body[class*="look-"]::before, body::before { content:none; }
.wrap { max-width:1000px; padding:40px 20px 96px; }

/* ── 머리 ── */
header { margin:6px 0 34px; }
header h1, body[class*="look-"] header h1 {
  font-size:clamp(28px,4.6vw,44px); font-weight:800; letter-spacing:-.045em; line-height:1.12; color:var(--ink); margin:16px 0 10px;
}
header p { color:var(--muted); font-size:16px; letter-spacing:-.01em; }
header .badge, body[class*="look-"] header .badge {
  background:var(--ink); color:#fff; border:0; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.1em; padding:6px 12px; backdrop-filter:none;
}

/* ── 카드 ── */
.card, body[class*="look-"] .card {
  background:var(--card); border:1px solid var(--hair); border-radius:14px;
  box-shadow:var(--lift); backdrop-filter:none; -webkit-backdrop-filter:none; padding:30px 28px; margin-bottom:14px;
}
.step, body[class*="look-"] .step { gap:11px; margin-bottom:18px; align-items:center; }
.step b, body[class*="look-"] .step b {
  width:24px; height:24px; border-radius:6px; background:var(--ink); color:#fff;
  font-size:12px; font-weight:700; box-shadow:none; font-variant-numeric:tabular-nums;
}
.step h2, body[class*="look-"] .step h2 { font-size:20px; font-weight:800; letter-spacing:-.03em; }
.step small { color:var(--muted); font-size:13px; font-weight:500; }

/* ── 입력 ── */
input[type=text], textarea, body[class*="look-"] input[type=text], body[class*="look-"] textarea {
  background:#FBFBFC; border:1px solid var(--hair-2); border-radius:12px; color:var(--ink);
  backdrop-filter:none; transition:border-color .18s, box-shadow .18s, background .18s;
}
input[type=text] { font-size:17px; padding:15px 16px; letter-spacing:-.015em; }
input[type=text]:focus, textarea:focus,
body[class*="look-"] input[type=text]:focus, body[class*="look-"] textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--pri-ring); background:#fff;
}
input::placeholder, textarea::placeholder { color:var(--faint); }

/* ── 칩 ── */
.chips { gap:8px; margin-top:16px; }
.chip, body[class*="look-"] .chip {
  background:#fff; border:1px solid var(--hair); border-radius:12px; color:var(--ink-2);
  font-size:14.5px; font-weight:600; letter-spacing:-.015em; padding:13px 8px; backdrop-filter:none;
  transition:transform .22s cubic-bezier(.22,1,.36,1), border-color .18s, background .18s, color .18s, box-shadow .22s;
}
.chip span { font-size:17px; filter:grayscale(.15); }
.chip:hover { border-color:var(--hair-2); box-shadow:var(--lift); }
.chip.on, body[class*="look-"] .chip.on { background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:var(--lift-2); }
.chip.on span { filter:none; }
.tag, body[class*="look-"] .tag {
  background:#fff; border:1px solid var(--hair); color:var(--ink-2); border-radius:999px;
  font-size:13px; font-weight:600; letter-spacing:-.01em; padding:9px 15px; backdrop-filter:none;
}
.tag:hover { border-color:var(--hair-2); }
.tag.on, body[class*="look-"] .tag.on { background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:none; }

/* ── 버튼: 먹빛이 기본, 색은 쓰지 않는다 ── */
.btn, .wz-nav button, .more { border-radius:12px; letter-spacing:-.02em; }
.btn.pri, .wz-nav .next, body[class*="look-"] .btn.pri, body[class*="look-"] .wz-nav .next {
  position:relative; overflow:hidden; background:var(--pri); color:#fff; font-weight:700; font-size:15.5px;
  box-shadow:0 1px 2px rgba(14,15,18,.14), 0 10px 24px rgba(14,15,18,.16);
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s;
}
.btn.pri::before, .wz-nav .next::before { /* 커서를 따라오는 옅은 빛 (polish.js 가 좌표를 준다) */
  content:""; position:absolute; inset:-40%; pointer-events:none; opacity:0; transition:opacity .25s;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), transparent 62%);
}
.btn.pri:hover::before, .wz-nav .next:hover::before { opacity:1; }
.btn.pri:hover, .wz-nav .next:not(:disabled):hover { background:var(--pri2); box-shadow:0 2px 4px rgba(14,15,18,.18), 0 16px 34px rgba(14,15,18,.22); }
.btn.sec, #stepDraft .btn.sec, body[class*="look-"] .btn.sec {
  background:#fff; color:var(--ink); border:1px solid var(--hair-2); font-weight:600; box-shadow:none;
}
.btn.sec:hover, #stepDraft .btn.sec:hover { border-color:var(--ink); background:#fff; }
.more, body[class*="look-"] .more {
  background:transparent; border:1px solid var(--hair-2); color:var(--ink-2); font-weight:600; font-size:13px; border-radius:999px; padding:9px 15px;
}
.more:hover { border-color:var(--ink); color:var(--ink); }
.wz-nav .prev, body[class*="look-"] .wz-nav .prev { background:#fff; border:1px solid var(--hair); color:var(--ink-2); font-weight:600; }

/* ── 단계 표시 ── */
.wz-progress .bar, body[class*="look-"] .wz-progress .bar { background:#E7E7EA; height:2px; border-radius:999px; }
.wz-progress .bar i, body[class*="look-"] .wz-progress .bar i { background:var(--ink); }
.wz-progress .lbl { color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.02em; }
.wz-progress .lbl .n { font-variant-numeric:tabular-nums; }

/* ── 업체 정보 ── */
.info, body[class*="look-"] .info { background:#FAFAFB; border:1px solid var(--hair); border-radius:12px; backdrop-filter:none; padding:16px 18px; }
.info summary { font-size:14px; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; gap:6px; }
.info summary small { color:var(--muted); font-size:12.5px; font-weight:500; }
.info-grid label { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; color:var(--muted); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.info-grid label input { flex:1 1 100%; margin-top:5px; font-size:15px; }
.info-grid .req { color:var(--err); letter-spacing:0; }
.info-grid .opt { color:var(--faint); letter-spacing:0; }

/* ── 초안 카드 ── */
#stepDraft .lead { color:var(--ink-2); font-size:14.5px; line-height:1.7; }
.drafts { gap:10px; }
.draft, body[class*="look-"] .draft {
  border-radius:12px; border:1px solid var(--hair); background:#EFEFF1;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .18s;
  transform-style:preserve-3d;
}
@media (hover:hover) {
  .draft:hover { box-shadow:var(--lift-2); border-color:var(--hair-2);
    transform:perspective(1000px) rotateX(calc((var(--py,.5) - .5) * -4deg)) rotateY(calc((var(--px,.5) - .5) * 6deg)) translateY(-2px); }
  .draft:hover::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
    transform:translateX(-100%); animation:shine .8s cubic-bezier(.22,1,.36,1) forwards; }
}
@keyframes shine { to { transform:translateX(100%); } }
.draft.on, body[class*="look-"] .draft.on { border-color:var(--ink); box-shadow:0 0 0 2px var(--ink), var(--lift-2); }
.draft .n, body[class*="look-"] .draft .n {
  background:rgba(14,15,18,.72); font-size:11px; font-weight:600; letter-spacing:.01em; border-radius:6px; padding:4px 8px; backdrop-filter:blur(8px);
}
.draft::after { background:var(--ink); box-shadow:0 2px 10px rgba(14,15,18,.3); font-size:12px; }

/* ── 기다리는 화면 ── */
.skel .card-s { background:#EAEAEC; border-radius:12px; }
.skel .card-s::after { background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.7) 50%,transparent 80%); }
.prog .bar { background:#E7E7EA; height:4px; }
.prog .bar i { background:var(--ink); }
.prog .say { font-size:13px; font-weight:600; letter-spacing:-.015em; }
.prog .say em { color:var(--faint); font-size:12px; }

/* ── 만든 초안 목록 ── */
.histwrap > .cap { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.histwrap > .cap span { text-transform:none; letter-spacing:-.01em; font-size:12.5px; color:var(--faint); font-weight:500; }
.history button { border-radius:10px; border:1px solid var(--hair); background:#EFEFF1; transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .18s; }
.history button:hover { transform:translateY(-2px); box-shadow:var(--lift); border-color:var(--hair-2); }
.history button.on { border-color:var(--ink); box-shadow:0 0 0 2px var(--ink); }
.history .slot { border:1px dashed var(--hair-2); background:#FAFAFB; border-radius:10px; color:var(--faint); font-size:11.5px; font-weight:600; }
.history .lb { background:rgba(14,15,18,.72); border-radius:6px; font-weight:600; font-size:10.5px; }

/* ── 알림 ── */
.result { border-radius:10px; font-size:13.5px; font-weight:500; letter-spacing:-.01em; padding:13px 15px; }
.result.ok { background:#F0F7F3; color:var(--ok); border:1px solid #D6E9E0; }
.result.err { background:#FDF3F1; color:var(--err); border:1px solid #F2D9D3; }
.result.info { background:#F4F5F7; color:var(--ink-2); border:1px solid var(--hair); }

/* ── 미리보기: 어두운 스테이지 위에 올린다 ── */
.preview, body[class*="look-"] .preview {
  border-radius:14px; border:1px solid #232429; background:var(--stage); overflow:hidden; padding:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--lift);
}
.preview canvas { border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.toggle, body[class*="look-"] .toggle { color:var(--ink-2); font-size:13.5px; font-weight:500; }
.hint { color:var(--muted); font-size:12.5px; letter-spacing:-.01em; }
.count, #stepDraft .left { color:var(--muted); font-size:12px; font-weight:600; letter-spacing:-.01em; background:transparent; padding:0; }
#stepDraft .left b { color:var(--ink); font-weight:800; }
.foot, footer { color:var(--faint); font-size:12px; }

/* ── 나타나는 결 (카카오 홈페이지 참고): 아래에서 천천히 떠오르며 차례로 ──
   빠르게 튀는 대신 0.7~0.9초에 걸쳐 크게 감속한다. cubic-bezier(.16,1,.3,1) */
:root { --rv-ease:cubic-bezier(.16,1,.3,1); }
[data-rv] { opacity:0; transform:translateY(26px); will-change:opacity, transform; }
[data-rv].in { opacity:1; transform:none; transition:opacity .8s var(--rv-ease), transform .85s var(--rv-ease); transition-delay:var(--rv-d, 0ms); }

/* 단계 전환도 같은 결로 (motion.css 보다 느리고 크게 감속) */
.step-in-fwd, .step-in-back { animation-duration:.8s !important; animation-timing-function:var(--rv-ease) !important; }
.wz-progress .bar i { transition:width .9s var(--rv-ease) !important; }

/* 제목은 스크롤에 살짝 뒤따른다 (polish.js 가 --sy 를 준다) */
header { transform:translateY(calc(var(--sy, 0px) * .16)); opacity:calc(1 - var(--sy, 0px) / 520); will-change:transform, opacity; }

/* 눌림·올림은 더 부드럽게 */
.chip, .tag, .btn, .more, .draft, .history button, .wz-nav button {
  transition-duration:.42s !important; transition-timing-function:var(--rv-ease) !important;
}
.btn.pri:active, .wz-nav .next:active { transform:translateY(1px) scale(.994); }
.card { transition:box-shadow .5s var(--rv-ease), border-color .4s var(--rv-ease); }

@media (prefers-reduced-motion:reduce) {
  [data-rv] { opacity:1 !important; transform:none !important; }
  header { transform:none !important; opacity:1 !important; }
}

/* 포인트 색이 드러나는 자리 (넓게 쓰지 않는다) */
.prog .bar i { background:linear-gradient(90deg, var(--ink), var(--accent)); }
#stepDraft .left b { color:var(--accent); }
.info-grid .req { color:var(--accent); }
.result.ok { color:var(--accent); background:#FDF4EF; border-color:#F3DED1; }
.draft::after { background:var(--accent); box-shadow:0 2px 10px rgba(228,98,42,.32); }
.draft.on, body[class*="look-"] .draft.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent), var(--lift-2); }
.history button.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }

/* ── 누르는 느낌 ──
   누를 때는 빠르게 들어가고(90ms), 뗄 때는 길게 풀린다(420ms, 크게 감속).
   물결은 옅고 느리게. 톡톡 튀는 대신 눌렸다 천천히 돌아오는 결. */
.btn, .wz-nav button, .chip, .tag, .more, .history button, .draft, .file label {
  transition: transform .42s var(--rv-ease), box-shadow .42s var(--rv-ease),
              background-color .3s var(--rv-ease), border-color .3s var(--rv-ease), color .25s var(--rv-ease) !important;
}
.btn:active, .wz-nav button:not(:disabled):active, .chip:active, .tag:active,
.more:active, .history button:active, .file label:active {
  transform: scale(.978) !important; transition-duration: .09s !important; transition-timing-function: ease-out !important;
}
.btn.pri:active, .wz-nav .next:not(:disabled):active {
  transform: scale(.978) translateY(1px) !important;
  box-shadow: 0 1px 2px rgba(20,19,23,.2), inset 0 2px 6px rgba(0,0,0,.28) !important;
}
.draft:active { transform: scale(.992) !important; transition-duration: .1s !important; }
.chip.on:active, .tag.on:active { transform: scale(.975) !important; }

/* 물결은 존재감을 낮추고 길게 퍼지게 */
.ripple { opacity:.1 !important; animation-duration:.85s !important; animation-timing-function:var(--rv-ease) !important; }
.chip.on, .tag.on, .draft.on { animation:none !important; }  /* 고를 때 튀는 동작은 빼고 색 전환으로만 */

@media (prefers-reduced-motion:reduce) {
  .btn:active, .chip:active, .tag:active, .more:active, .draft:active { transform:none !important; }
}

/* X 대문 안내 묶음 */
.also { background:#FBFAF8; border:1px solid var(--hair); border-radius:12px; }
.also .cap { color:var(--ink); }
.also .btn.sec { border-color:var(--hair-2); color:var(--ink); font-weight:600; }
.also .btn.sec:hover { border-color:var(--ink); }

/* ── 1단계 이름 칸: 네모 상자 대신 뜨는 라벨 + 그려지는 밑줄 ── */
.namebox { position:relative; padding-top:22px; margin-bottom:6px; }
.namebox input#name {
  width:100%; border:0; background:transparent; border-radius:0; padding:6px 2px 12px;
  font-size:clamp(22px,4.4vw,30px); font-weight:800; letter-spacing:-.035em; color:var(--ink); box-shadow:none !important;
}
.namebox input#name:focus { background:transparent; border:0; }
.namebox label {
  position:absolute; left:2px; top:26px; font-size:clamp(20px,4vw,26px); font-weight:700; color:var(--faint);
  letter-spacing:-.03em; pointer-events:none; transform-origin:left top;
  transition:transform .42s var(--rv-ease), color .3s var(--rv-ease), opacity .3s;
}
.namebox input#name:focus + label,
.namebox input#name:not(:placeholder-shown) + label {
  transform:translateY(-24px) scale(.46); color:var(--muted); opacity:.9;
}
.namebox .rule { position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--hair-2); border-radius:2px; overflow:hidden; }
.namebox .rule::after {
  content:""; position:absolute; inset:0; background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--rv-ease);
}
.namebox input#name:focus ~ .rule::after { transform:scaleX(1); }
.namebox input#name:not(:placeholder-shown) ~ .rule::after { transform:scaleX(1); background:var(--accent); }
.namebox .ex {
  position:absolute; right:2px; bottom:14px; font-size:13px; color:var(--faint); font-weight:500;
  transition:opacity .26s var(--rv-ease), transform .26s var(--rv-ease); letter-spacing:-.01em;
}
.namebox .ex.out { opacity:0; transform:translateY(-6px); }
.namebox input#name:focus ~ .ex, .namebox input#name:not(:placeholder-shown) ~ .ex { opacity:0; }


/* ── 폰에서 잘리지 않게 ── */
@media (max-width:600px) {
  .wrap { padding:24px 14px 88px; }
  .card { padding:20px 16px; border-radius:14px; }
  header h1 { font-size:26px; letter-spacing:-.04em; }
  header p { font-size:14px; }
  .chips { grid-template-columns:repeat(2,1fr); gap:7px; }
  .chips, body[class*="look-"] .chips { grid-template-columns:repeat(2,1fr); gap:7px; }
  .chip, body[class*="look-"] .chip { padding:11px 8px !important; font-size:13px; flex-direction:row !important; gap:6px; justify-content:center; }
  .chip span, body[class*="look-"] .chip span { font-size:15px; }
  .info { padding:14px; }
  .info-grid { grid-template-columns:1fr; }
  .actions { grid-template-columns:1fr; }
  .also .row { flex-direction:column; }
  .also .btn { width:100%; justify-content:center; }
  .preview, body[class*="look-"] .preview { padding:12px; }
  .namebox .ex { display:none; }
  .wz-nav { flex-wrap:wrap; }
  .wz-nav button { flex:1 1 auto; min-width:0; }
  .histwrap > .cap { flex-wrap:wrap; }
  .drafts { gap:8px; }
}
/* 어떤 화면에서도 가로 스크롤이 생기지 않게 */
html, body { max-width:100%; overflow-x:hidden; }
.card, .drafts, .history, .info-grid, .actions, .also { min-width:0; }
input, textarea, select, button { max-width:100%; }

/* 폰에서 "업체 정보" 제목이 두 줄로 쪼개지던 것 */
.info summary { flex-wrap:wrap; }
.info summary > small { flex:1 1 100%; margin-left:0; margin-top:3px; }
@media (max-width:600px){ .info summary { gap:0; } }

/* ── 유리 느낌 ──
   배경에 아주 옅은 색 덩어리를 깔고, 그 위에 반투명 면 + 흐림을 얹는다.
   뒤가 비쳐야 유리로 읽히므로 덩어리가 먼저다. 흐림은 무거우니 카드·칩·버튼에만. */
body::after {
  content:""; position:fixed; inset:-10% -10% auto -10%; height:78vh; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42vw 34vw at 12% 8%, rgba(228,98,42,.13), transparent 62%),
    radial-gradient(38vw 30vw at 88% 2%, rgba(120,140,200,.12), transparent 60%),
    radial-gradient(34vw 26vw at 64% 34%, rgba(226,180,120,.14), transparent 62%);
  filter:blur(6px);
}

.card, body[class*="look-"] .card {
  background:rgba(255,253,251,.72);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 1px 1px rgba(20,19,23,.03), 0 14px 40px rgba(20,19,23,.07), inset 0 1px 0 rgba(255,255,255,.85);
}

.chip, body[class*="look-"] .chip,
.tag, body[class*="look-"] .tag,
.btn.sec, #stepDraft .btn.sec, .more, .wz-nav .prev, .history .slot {
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-color:rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(20,19,23,.04);
}
.chip:hover, .tag:hover, .btn.sec:hover, .more:hover, .wz-nav .prev:hover {
  background:rgba(255,255,255,.82); border-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 6px 18px rgba(20,19,23,.08);
}
/* 고른 것은 유리를 걷고 먹빛으로 꽉 채운다 (선택이 분명하게 보이도록) */
.chip.on, body[class*="look-"] .chip.on, .tag.on, body[class*="look-"] .tag.on {
  background:var(--ink); backdrop-filter:none; -webkit-backdrop-filter:none; border-color:var(--ink);
  box-shadow:0 8px 22px rgba(20,19,23,.22);
}

/* 누를 때: 유리가 한 번 눌렸다 풀리는 느낌 */
.chip:active, .tag:active, .btn.sec:active, .more:active, .wz-nav .prev:active {
  background:rgba(255,255,255,.34) !important;
  box-shadow:inset 0 2px 6px rgba(20,19,23,.10) !important;
}

/* 입력칸·업체 정보도 같은 결로 */
input[type=text], textarea, body[class*="look-"] input[type=text], body[class*="look-"] textarea {
  background:rgba(255,255,255,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
input[type=text]:focus, textarea:focus,
body[class*="look-"] input[type=text]:focus, body[class*="look-"] textarea:focus {
  background:rgba(255,255,255,.82); border-color:var(--accent); box-shadow:0 0 0 3px var(--pri-ring);
}
.namebox input#name, .namebox input#name:focus { background:transparent !important; backdrop-filter:none; box-shadow:none !important; }
.info, body[class*="look-"] .info {
  background:rgba(255,255,255,.42); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.75);
}
.histwrap .slot { background:rgba(255,255,255,.4); }
.result { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

/* 먹빛 버튼은 유리 대신 얇은 광택 한 줄 */
.btn.pri, .wz-nav .next, body[class*="look-"] .btn.pri, body[class*="look-"] .wz-nav .next {
  box-shadow:0 1px 2px rgba(20,19,23,.16), 0 12px 26px rgba(20,19,23,.18), inset 0 1px 0 rgba(255,255,255,.14);
}

/* 흐림을 못 쓰는 환경에선 불투명하게 (내용이 안 읽히는 사고 방지) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .card, .chip, .tag, .btn.sec, .more, .info, input[type=text], textarea { background:#fff; }
}

/* ══ v3 — 파스텔 그라데이션 + 아주 흰 유리 (2026-09-29, 레퍼런스 반영) ══
   앞의 먹빛·테라코타 조합이 무거웠다. 배경을 흰색에 가깝게 올리고,
   파스텔 덩어리를 크게 깔아 그 위에 반투명 카드를 띄운다. 글자는 가늘고 옅게. */
body[class*="look-"], body {
  --bg:#FCFCFE; --card:#FFFFFF; --stage:#141722;
  --ink:#1B2030; --ink-2:#4A5166; --muted:#98A0B4; --faint:#C2C8D6;
  --hair:#EDEFF5; --hair-2:#E2E6EF;
  --pri:#1B2030; --pri2:#0F1320; --accent:#7C8CF8; --pri-ring:rgba(124,140,248,.18);
  --ok:#3BA77E; --err:#E2705E;
  --lift:0 1px 2px rgba(27,32,48,.03), 0 12px 32px rgba(27,32,48,.06);
  --lift-2:0 2px 6px rgba(27,32,48,.05), 0 24px 56px rgba(27,32,48,.10);
}

/* 파스텔 덩어리: 배경 그림으로 직접 깐다 (가짜 요소로 깔면 body 배경색 뒤로 숨는다) */
body[class*="look-"], body {
  background-color:var(--bg);
  background-image:
    radial-gradient(42vw 34vw at 12% 6%,  rgba(255,182,214,.50), transparent 66%),
    radial-gradient(38vw 30vw at 86% 4%,  rgba(184,206,255,.50), transparent 64%),
    radial-gradient(34vw 28vw at 70% 40%, rgba(190,240,214,.42), transparent 64%),
    radial-gradient(36vw 28vw at 18% 58%, rgba(255,219,184,.42), transparent 66%),
    radial-gradient(32vw 26vw at 94% 78%, rgba(218,196,255,.40), transparent 64%);
  background-attachment:fixed; background-repeat:no-repeat;
}
body::after, body::before { content:none !important; }

/* 카드: 거의 흰 유리 */
.card, body[class*="look-"] .card {
  background:rgba(255,255,255,.74); border:1px solid rgba(255,255,255,.9); border-radius:22px;
  backdrop-filter:blur(26px) saturate(165%); -webkit-backdrop-filter:blur(26px) saturate(165%);
  box-shadow:0 1px 1px rgba(27,32,48,.02), 0 18px 46px rgba(27,32,48,.07), inset 0 1px 0 rgba(255,255,255,.95);
}

/* 활자: 굵기를 한 단계씩 낮추고 색을 옅게 */
header h1, body[class*="look-"] header h1 { font-weight:700; color:var(--ink); letter-spacing:-.04em; }
header p, .hint, #stepDraft .lead { color:var(--muted); }
.step h2, body[class*="look-"] .step h2 { font-weight:700; letter-spacing:-.028em; }
.step b, body[class*="look-"] .step b { background:rgba(27,32,48,.9); border-radius:9px; font-weight:600; }
header .badge, body[class*="look-"] header .badge { background:rgba(255,255,255,.72); color:var(--ink-2); border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(10px); font-weight:600; letter-spacing:.06em; }

/* 칩·버튼: 흰 유리, 고르면 잉크 */
.chip, body[class*="look-"] .chip, .tag, body[class*="look-"] .tag,
.btn.sec, #stepDraft .btn.sec, .more, .wz-nav .prev, .history .slot, .info, body[class*="look-"] .info {
  background:rgba(255,255,255,.62); border-color:rgba(255,255,255,.92); border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 8px rgba(27,32,48,.04);
}
.tag, body[class*="look-"] .tag, .more { border-radius:999px; }
.chip:hover, .tag:hover, .btn.sec:hover, .more:hover { background:rgba(255,255,255,.88); box-shadow:inset 0 1px 0 #fff, 0 10px 24px rgba(27,32,48,.08); }
.chip.on, body[class*="look-"] .chip.on, .tag.on, body[class*="look-"] .tag.on {
  background:rgba(27,32,48,.92); border-color:transparent; color:#fff; box-shadow:0 10px 26px rgba(27,32,48,.22);
}
.btn.pri, .wz-nav .next, body[class*="look-"] .btn.pri, body[class*="look-"] .wz-nav .next {
  background:rgba(27,32,48,.94); border-radius:14px; font-weight:600;
  box-shadow:0 1px 2px rgba(27,32,48,.12), 0 14px 30px rgba(27,32,48,.18), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn.pri:hover, .wz-nav .next:not(:disabled):hover { background:var(--pri2); }

/* 입력칸 */
input[type=text], textarea, body[class*="look-"] input[type=text], body[class*="look-"] textarea {
  background:rgba(255,255,255,.6); border-color:rgba(255,255,255,.92); border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
input[type=text]:focus, textarea:focus { background:rgba(255,255,255,.92); border-color:var(--accent); box-shadow:0 0 0 3px var(--pri-ring); }
.namebox .rule { background:var(--hair); }
.namebox input#name:not(:placeholder-shown) ~ .rule::after { background:linear-gradient(90deg, #FFC1DD, #7C8CF8); }
.namebox input#name:focus ~ .rule::after { background:linear-gradient(90deg, #C4D6FF, #7C8CF8); }

/* 포인트 색도 파스텔 계열로 */
.prog .bar i { background:linear-gradient(90deg, #FFC1DD, #7C8CF8); }
#stepDraft .left b, .info-grid .req { color:#E2705E; }
.result.ok { background:rgba(230,248,240,.8); color:#2F8C68; border-color:rgba(190,232,214,.9); }
.result.info { background:rgba(255,255,255,.7); color:var(--ink-2); border-color:rgba(255,255,255,.95); }
.result.err { background:rgba(253,240,237,.85); color:#C4543F; border-color:rgba(245,214,206,.9); }
.draft.on, body[class*="look-"] .draft.on { border-color:#7C8CF8; box-shadow:0 0 0 2px #7C8CF8, var(--lift-2); }
.draft::after { background:#7C8CF8; box-shadow:0 2px 10px rgba(124,140,248,.4); }
.history button.on { border-color:#7C8CF8; box-shadow:0 0 0 2px #7C8CF8; }
.skel .card-s { background:rgba(236,239,247,.8); }

/* ══ v3.1 — 이름 칸 크기 정리 + 버튼을 레퍼런스처럼 부드럽게 ══ */

/* 이름 입력: 30px 는 과했다. 제목보다 작게 */
.namebox { padding-top:18px; }
.namebox input#name { font-size:clamp(18px,2.4vw,21px); font-weight:700; letter-spacing:-.025em; padding:4px 2px 10px; }
.namebox label { top:22px; font-size:clamp(16px,2.2vw,19px); font-weight:600; }
.namebox input#name:focus + label,
.namebox input#name:not(:placeholder-shown) + label { transform:translateY(-20px) scale(.62); }
.namebox .ex { bottom:12px; font-size:12px; }
.namebox .rule { height:1.5px; }
#customIndustry { font-size:15px !important; }

/* 버튼: 검정 덩어리 대신 연보라 유리 알약 */
.btn.pri, .wz-nav .next, body[class*="look-"] .btn.pri, body[class*="look-"] .wz-nav .next {
  background:linear-gradient(135deg, #9AA8FF 0%, #8E9BFB 55%, #A98CF3 100%);
  color:#fff; border:1px solid rgba(255,255,255,.55); border-radius:999px; font-weight:600; font-size:15px;
  box-shadow:0 1px 1px rgba(124,140,248,.18), 0 12px 26px rgba(124,140,248,.28), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn.pri:hover, .wz-nav .next:not(:disabled):hover {
  background:linear-gradient(135deg, #8E9BFB 0%, #7C8CF8 55%, #9B7CF0 100%);
  box-shadow:0 2px 3px rgba(124,140,248,.2), 0 18px 36px rgba(124,140,248,.34), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn.pri::before, .wz-nav .next::before {
  background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.38), transparent 60%);
}
.btn.pri:disabled, .wz-nav .next:disabled { background:rgba(255,255,255,.6); color:var(--faint); border-color:rgba(255,255,255,.9); box-shadow:inset 0 1px 0 #fff; }

/* 흰 유리 알약 (보조 버튼) */
.btn.sec, #stepDraft .btn.sec, .more, .wz-nav .prev, .also .btn.sec {
  border-radius:999px; background:rgba(255,255,255,.72); color:var(--ink-2); font-weight:600;
  border:1px solid rgba(255,255,255,.95); box-shadow:inset 0 1px 0 #fff, 0 4px 14px rgba(27,32,48,.05);
}
.btn.sec:hover, .more:hover, .wz-nav .prev:hover { background:#fff; color:var(--accent); border-color:rgba(124,140,248,.35); box-shadow:inset 0 1px 0 #fff, 0 10px 26px rgba(124,140,248,.16); }

/* 고른 칩도 검정 대신 같은 연보라 */
.chip.on, body[class*="look-"] .chip.on, .tag.on, body[class*="look-"] .tag.on {
  background:linear-gradient(135deg, #9AA8FF, #8E9BFB 60%, #A98CF3);
  border-color:rgba(255,255,255,.55); color:#fff;
  box-shadow:0 10px 24px rgba(124,140,248,.28), inset 0 1px 0 rgba(255,255,255,.5);
}
.step b, body[class*="look-"] .step b { background:linear-gradient(135deg, #9AA8FF, #8E9BFB); box-shadow:0 4px 12px rgba(124,140,248,.28); }
.wz-progress .bar i, body[class*="look-"] .wz-progress .bar i { background:linear-gradient(90deg, #FFC1DD, #9AA8FF); }

/* 누를 때: 유리가 살짝 들어갔다 천천히 풀린다 */
.btn.pri:active, .wz-nav .next:not(:disabled):active {
  transform:scale(.982) !important;
  box-shadow:0 1px 2px rgba(124,140,248,.2), inset 0 2px 8px rgba(88,102,200,.35) !important;
}
.btn.sec:active, .more:active, .wz-nav .prev:active, .chip:active, .tag:active {
  background:rgba(255,255,255,.5) !important; box-shadow:inset 0 2px 7px rgba(27,32,48,.08) !important;
}
.ripple { background:#7C8CF8 !important; opacity:.14 !important; }

/* 커서: 누를 수 있는 것 위에서는 손가락 */
.chip, .tag, .btn, .more, .draft, .history button, .wz-nav button, .toggle, .file label { cursor:pointer; }

/* ══ v3.2 — 버튼을 레퍼런스식 "연한 알약"으로 ══
   채우고 그림자 주는 대신, 연회색 알약 + 진회색 글씨.
   고른 것만 연보라 알약 + 보라 글씨. 흰 글씨는 큰 이동 버튼에만 남긴다. */
.btn.sec, #stepDraft .btn.sec, .more, .wz-nav .prev, .also .btn.sec, .tag, body[class*="look-"] .tag {
  background:#F1F2F6 !important; border:0 !important; color:#5A6072 !important;
  border-radius:999px !important; font-weight:600; font-size:13.5px; padding:10px 18px;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.btn.sec:hover, .more:hover, .wz-nav .prev:hover, .tag:hover { background:#E9EBF1 !important; color:#3F465A !important; }
.tag.on, body[class*="look-"] .tag.on,
#stepDraft #genFeel, .btn.pri.soft {
  background:rgba(124,140,248,.13) !important; color:#5B6BE0 !important; border:0 !important;
  box-shadow:none !important; font-weight:700;
}
.tag.on:hover, #stepDraft #genFeel:hover { background:rgba(124,140,248,.2) !important; color:#4A59D6 !important; }

/* 업종 칩: 연회색 판 → 고르면 연보라 판 + 보라 글씨 */
.chip, body[class*="look-"] .chip {
  background:#F5F6F9 !important; border:0 !important; color:#5A6072 !important;
  box-shadow:none !important; backdrop-filter:none !important; border-radius:14px !important;
}
.chip:hover { background:#EDEFF4 !important; }
.chip.on, body[class*="look-"] .chip.on {
  background:rgba(124,140,248,.14) !important; color:#5B6BE0 !important; box-shadow:none !important;
}
.chip.on span { filter:none; }

/* 단계 이동 버튼만 채운 알약으로 남긴다 (어디로 가는지가 분명해야 해서) */
.wz-nav .next, body[class*="look-"] .wz-nav .next, #apply {
  background:linear-gradient(135deg,#9AA8FF,#8E9BFB 60%,#A98CF3) !important; color:#fff !important; border:0 !important;
  box-shadow:0 10px 24px rgba(124,140,248,.26) !important;
}
.wz-nav .next:not(:disabled):hover, #apply:hover { box-shadow:0 14px 30px rgba(124,140,248,.34) !important; }
.wz-nav .next:disabled { background:#F1F2F6 !important; color:#B8BEC9 !important; box-shadow:none !important; }

/* 누름: 색만 한 단계 짙어졌다 풀린다 */
.chip:active, .tag:active, .btn.sec:active, .more:active, .wz-nav .prev:active { background:#E4E7EE !important; transform:scale(.985) !important; }
#stepDraft #genFeel:active, .tag.on:active { background:rgba(124,140,248,.26) !important; }
.step b, body[class*="look-"] .step b { box-shadow:none; }

/* ══ v3.3 — 같은 색·같은 알약, 재질만 유리로 ══
   불투명 회색판(#F1F2F6)을 반투명 흰 유리로 바꾼다. 뒤 파스텔이 비쳐 보이게.
   고른 것은 연보라 유리. 글자색·크기·모서리는 v3.2 그대로. */
.btn.sec, #stepDraft .btn.sec, .more, .wz-nav .prev, .also .btn.sec,
.tag, body[class*="look-"] .tag, .chip, body[class*="look-"] .chip {
  background:rgba(255,255,255,.52) !important;
  backdrop-filter:blur(16px) saturate(170%) !important; -webkit-backdrop-filter:blur(16px) saturate(170%) !important;
  border:1px solid rgba(255,255,255,.78) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 2px 10px rgba(27,32,48,.05) !important;
}
.btn.sec:hover, .more:hover, .wz-nav .prev:hover, .tag:hover, .chip:hover {
  background:rgba(255,255,255,.78) !important; border-color:rgba(255,255,255,.95) !important;
  box-shadow:inset 0 1px 0 #fff, 0 8px 22px rgba(27,32,48,.08) !important;
}
/* 고른 것 = 연보라 유리 */
.chip.on, body[class*="look-"] .chip.on, .tag.on, body[class*="look-"] .tag.on, #stepDraft #genFeel {
  background:rgba(124,140,248,.17) !important; color:#5B6BE0 !important;
  border:1px solid rgba(154,168,255,.45) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 20px rgba(124,140,248,.18) !important;
}
.chip.on:hover, .tag.on:hover, #stepDraft #genFeel:hover {
  background:rgba(124,140,248,.24) !important; border-color:rgba(154,168,255,.6) !important;
}
/* 누름: 유리가 한 겹 눌린다 */
.chip:active, .tag:active, .btn.sec:active, .more:active, .wz-nav .prev:active {
  background:rgba(255,255,255,.34) !important; box-shadow:inset 0 2px 8px rgba(27,32,48,.09) !important;
}
.chip.on:active, .tag.on:active, #stepDraft #genFeel:active {
  background:rgba(124,140,248,.3) !important; box-shadow:inset 0 2px 8px rgba(88,102,200,.2) !important;
}
/* 이동 버튼도 유리 위에 얹힌 색유리로 */
.wz-nav .next, body[class*="look-"] .wz-nav .next, #apply {
  background:linear-gradient(135deg, rgba(154,168,255,.92), rgba(142,155,251,.9) 60%, rgba(169,140,243,.92)) !important;
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.5) !important;
  box-shadow:0 10px 26px rgba(124,140,248,.26), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.wz-nav .next:disabled {
  background:rgba(255,255,255,.45) !important; color:#B8BEC9 !important;
  border-color:rgba(255,255,255,.7) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important;
}
/* 유리를 못 쓰는 환경 대비 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .chip, .tag, .btn.sec, .more, .wz-nav .prev { background:#F1F2F6 !important; }
  .chip.on, .tag.on, #stepDraft #genFeel { background:#E7EAFD !important; }
}

/* ══ v3.4 — 3D 유리 (애플식) ══
   면을 "얇은 판"이 아니라 "두께 있는 유리 조각"으로 만든다.
   ① 테두리에 위는 밝고 아래는 어두운 빛(입체 모서리)  ② 접촉 그림자 + 주변 그림자 두 겹
   ③ 커서를 따라 표면에 광택이 움직이고  ④ 배경 파스텔이 커서 반대로 아주 살짝 밀린다(시차)
   ⑤ 올리면 떠오르고, 누르면 눌린다 */
:root { --glass-edge:linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 42%, rgba(120,130,170,.22)); }

.card, body[class*="look-"] .card {
  position:relative; border-radius:28px; border:0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.66)) padding-box,
    var(--glass-edge) border-box;
  border:1.2px solid transparent !important;
  box-shadow:
    0 1px 1px rgba(27,32,48,.04),
    0 2px 6px -2px rgba(27,32,48,.06),
    0 18px 40px -12px rgba(27,32,48,.16),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -14px 28px -22px rgba(60,70,110,.35);
}
/* 커서를 따라 표면을 스치는 광택 (polish.js 가 --sx/--sy 를 준다) */
.card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,0%), rgba(255,255,255,.42), transparent 60%);
  opacity:0; transition:opacity .45s var(--rv-ease);
}
.card:hover::after { opacity:1; }
.card > * { position:relative; z-index:1; }

/* 알약: 두께 있는 유리 조각 */
.btn.sec, #stepDraft .btn.sec, .more, .wz-nav .prev, .also .btn.sec,
.tag, body[class*="look-"] .tag, .chip, body[class*="look-"] .chip {
  border:1px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.46)) padding-box,
    var(--glass-edge) border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -6px 12px -10px rgba(60,70,110,.4),
    0 1px 2px rgba(27,32,48,.07),
    0 8px 16px -8px rgba(27,32,48,.2) !important;
  transform:translateZ(0);
}
.chip:hover, .tag:hover, .btn.sec:hover, .more:hover, .wz-nav .prev:hover {
  transform:translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -6px 12px -10px rgba(60,70,110,.35),
    0 2px 4px rgba(27,32,48,.07),
    0 16px 28px -12px rgba(27,32,48,.26) !important;
}
.chip:active, .tag:active, .btn.sec:active, .more:active, .wz-nav .prev:active {
  transform:translateY(1px) scale(.988) !important;
  box-shadow:inset 0 2px 8px rgba(60,70,110,.22), 0 1px 2px rgba(27,32,48,.06) !important;
}

/* 고른 것: 연보라 유리 조각 (색 그림자로 떠 있게) */
.chip.on, body[class*="look-"] .chip.on, .tag.on, body[class*="look-"] .tag.on, #stepDraft #genFeel {
  background:
    linear-gradient(180deg, rgba(150,164,255,.30), rgba(124,140,248,.18)) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(154,168,255,.5) 48%, rgba(110,124,230,.35)) border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -8px 14px -12px rgba(70,84,190,.5),
    0 2px 4px rgba(124,140,248,.18),
    0 14px 26px -10px rgba(124,140,248,.42) !important;
}

/* 이동 버튼: 색유리 덩어리 */
.wz-nav .next, body[class*="look-"] .wz-nav .next, #apply {
  border:1px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(166,178,255,.98), rgba(134,147,246,.95) 55%, rgba(160,131,240,.96)) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 45%, rgba(90,104,210,.5)) border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -10px 18px -14px rgba(50,60,150,.8),
    0 2px 4px rgba(124,140,248,.24),
    0 18px 34px -12px rgba(124,140,248,.5) !important;
}
.wz-nav .next:not(:disabled):hover, #apply:hover { transform:translateY(-2px) !important; }
.wz-nav .next:not(:disabled):active, #apply:active {
  transform:translateY(1px) scale(.985) !important;
  box-shadow:inset 0 3px 10px rgba(50,60,150,.45), 0 1px 2px rgba(124,140,248,.2) !important;
}

/* 입력칸도 살짝 파인 느낌 */
input[type=text], textarea {
  border:1px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.74)) padding-box,
    linear-gradient(145deg, rgba(160,170,200,.3), rgba(255,255,255,.9)) border-box !important;
  box-shadow:inset 0 2px 5px rgba(60,70,110,.09), inset 0 -1px 0 rgba(255,255,255,.9) !important;
}
input[type=text]:focus, textarea:focus {
  box-shadow:inset 0 2px 5px rgba(60,70,110,.06), 0 0 0 3px var(--pri-ring) !important;
}

/* 초안 카드도 두께 있게 */
.draft, body[class*="look-"] .draft {
  border-radius:16px;
  box-shadow:0 1px 2px rgba(27,32,48,.06), 0 14px 26px -12px rgba(27,32,48,.28);
}
.step b { box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -4px rgba(124,140,248,.5) !important; }

@media (prefers-reduced-motion:reduce) {
  .chip:hover, .tag:hover, .btn.sec:hover, .more:hover, .wz-nav .next:hover { transform:none !important; }
}

/* ══ 단계 표시(1/4) 다시 ══
   가느다란 선 하나로 두니 허전했다. 유리 알약 안에 4칸 눈금을 넣고,
   지나온 칸은 연보라로 채운다. 지금 단계 이름은 왼쪽, 숫자는 오른쪽. */
.wz-progress, body[class*="look-"] .wz-progress {
  display:flex; align-items:center; gap:14px; margin:0 0 16px; padding:12px 18px; border-radius:999px;
  border:1px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.56)) padding-box,
    var(--glass-edge) border-box;
  backdrop-filter:blur(18px) saturate(165%); -webkit-backdrop-filter:blur(18px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(27,32,48,.05), 0 10px 22px -12px rgba(27,32,48,.22);
}
.wz-progress .lbl { order:0; display:flex; align-items:baseline; gap:8px; flex:none; margin:0; }
.wz-progress .lbl .t { font-size:13.5px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.wz-progress .lbl .n { font-size:12px; font-weight:700; color:#8E9BFB; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.wz-progress .bar, body[class*="look-"] .wz-progress .bar {
  order:1; flex:1; height:7px; border-radius:999px; background:rgba(120,130,170,.16); overflow:hidden;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(25% - 7px), transparent calc(25% - 7px) 25%);
          mask:repeating-linear-gradient(90deg,#000 0 calc(25% - 7px), transparent calc(25% - 7px) 25%);
}
.wz-progress .bar i, body[class*="look-"] .wz-progress .bar i {
  background:linear-gradient(90deg,#FFC1DD,#9AA8FF 55%,#A98CF3) !important; border-radius:999px;
  box-shadow:0 0 12px rgba(154,168,255,.55);
}
@media (max-width:600px){
  .wz-progress { padding:10px 14px; gap:10px; }
  .wz-progress .lbl .t { font-size:12.5px; }
}

/* ══ v3.5 — "다음" 버튼을 또렷하게 ══
   연한 라벤더는 배경(파스텔)과 붙어 버려 눈에 안 띈다.
   색을 한 단계 진하게, 그림자를 색 그림자로, 올리면 떠오르고 빛이 돌게 한다.
   활성화되는 순간 두 번만 숨 쉬듯 번져서 "여기 누르세요"가 보이게. */
.wz-nav .next:not(:disabled), body[class*="look-"] .wz-nav .next:not(:disabled), #apply, .btn.pri:not(:disabled) {
  background:
    linear-gradient(135deg, #7B8AFF 0%, #6A6FF5 48%, #8A5CF0 100%) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.25) 46%, rgba(70,60,180,.55)) border-box !important;
  color:#fff !important; font-weight:700 !important; font-size:16px !important; letter-spacing:-.02em;
  border:1.2px solid transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -12px 20px -16px rgba(40,30,140,.9),
    0 2px 5px rgba(88,84,230,.3),
    0 16px 32px -10px rgba(108,100,248,.55) !important;
  animation:ctaBreathe 2.6s var(--rv-ease) 2;
}
@keyframes ctaBreathe {
  0%, 100% { box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -12px 20px -16px rgba(40,30,140,.9), 0 2px 5px rgba(88,84,230,.3), 0 16px 32px -10px rgba(108,100,248,.55); }
  50% { box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -12px 20px -16px rgba(40,30,140,.9), 0 2px 5px rgba(88,84,230,.35), 0 20px 44px -8px rgba(108,100,248,.8), 0 0 0 6px rgba(124,140,248,.16); }
}
.wz-nav .next:not(:disabled):hover, #apply:hover, .btn.pri:not(:disabled):hover {
  background:
    linear-gradient(135deg, #6E7EFF 0%, #5A5FF2 48%, #7C46EE 100%) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.3) 46%, rgba(60,50,170,.6)) border-box !important;
  transform:translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -12px 20px -16px rgba(40,30,140,.9),
    0 3px 6px rgba(88,84,230,.32),
    0 24px 46px -12px rgba(108,100,248,.75),
    0 0 0 5px rgba(124,140,248,.18) !important;
  animation:none;
}
.wz-nav .next:not(:disabled):active, #apply:active, .btn.pri:not(:disabled):active {
  transform:translateY(1px) scale(.985) !important;
  box-shadow:inset 0 4px 12px rgba(40,30,140,.55), 0 1px 2px rgba(88,84,230,.3), 0 0 0 4px rgba(124,140,248,.22) !important;
  animation:none;
}
/* 커서를 따라 도는 빛도 진하게 */
.wz-nav .next::before, .btn.pri::before {
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.45), transparent 58%) !important;
}
/* 아직 못 누르는 상태는 확실히 꺼 보이게 */
.wz-nav .next:disabled, body[class*="look-"] .wz-nav .next:disabled {
  background:rgba(255,255,255,.5) !important; color:#AFB5C4 !important;
  border:1px solid rgba(255,255,255,.8) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;
  animation:none; transform:none !important;
}
@media (prefers-reduced-motion:reduce){ .wz-nav .next:not(:disabled) { animation:none; } }

/* ══ v3.7 — 오목한 유리 + 끊김 없는 움직임 ══
   v3.6 은 hover 때 그라데이션 배경을 통째로 갈아서 "뚜둑" 끊겼다.
   (그라데이션은 전환이 안 된다. 그림자·backdrop-filter 도 바꾸면 무겁다.)
   → 배경은 고정하고, 오목한 음영은 겹쳐 둔 층의 투명도만 켠다. 움직임은 transform 하나만. */
.chip, body[class*="look-"] .chip, .tag, body[class*="look-"] .tag,
.btn.sec, #stepDraft .btn.sec, .more, .wz-nav .prev {
  position:relative; overflow:hidden; will-change:transform;
  transition:transform .5s var(--rv-ease), color .35s var(--rv-ease) !important;
}
/* ① 오목한 면: 위는 그늘, 아래는 빛, 가장자리로 갈수록 밝아진다 */
.chip::before, .tag::before, .btn.sec::before, .more::before, .wz-nav .prev::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:0;
  transition:opacity .5s var(--rv-ease);
  background:
    linear-gradient(180deg, rgba(56,66,104,.20) 0%, rgba(56,66,104,0) 42%, rgba(255,255,255,0) 58%, rgba(255,255,255,.62) 100%),
    radial-gradient(125% 135% at 50% 50%, rgba(255,255,255,0) 26%, rgba(255,255,255,.5) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
/* ② 면 위를 도는 광택 (polish.js 가 --sx/--sy) */
.chip::after, .tag::after, .btn.sec::after, .more::after, .wz-nav .prev::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:0;
  transition:opacity .5s var(--rv-ease);
  background:radial-gradient(80px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.8), transparent 60%);
}
/* 물결(span.ripple)은 제외해야 한다 — 이걸 상대 위치로 만들면 칩 높이가 폭발한다 (2026-09-29 버그) */
.chip > *:not(.ripple), .tag > *:not(.ripple), .btn.sec > *:not(.ripple), .more > *:not(.ripple) { position:relative; z-index:1; }
.ripple { position:absolute !important; z-index:2; }
.chip:hover, .tag:hover, .btn.sec:hover, .more:hover, .wz-nav .prev:hover { transform:translateY(-2px) !important; }
.chip:hover::before, .tag:hover::before, .btn.sec:hover::before, .more:hover::before, .wz-nav .prev:hover::before { opacity:1; }
.chip:hover::after, .tag:hover::after, .btn.sec:hover::after, .more:hover::after, .wz-nav .prev:hover::after { opacity:.8; }
/* 고른 것도 같은 결 (색만 연보라) */
.chip.on::before, .tag.on::before, #stepDraft #genFeel::before {
  background:
    linear-gradient(180deg, rgba(58,68,170,.22) 0%, rgba(58,68,170,0) 42%, rgba(255,255,255,0) 58%, rgba(255,255,255,.5) 100%),
    radial-gradient(125% 135% at 50% 50%, rgba(255,255,255,0) 26%, rgba(200,210,255,.45) 100%);
}
/* 누름: 더 깊게. 짧고 곧게 들어갔다가 길게 풀린다 */
.chip:active, .tag:active, .btn.sec:active, .more:active, .wz-nav .prev:active {
  transform:translateY(1px) scale(.99) !important; transition-duration:.12s !important; transition-timing-function:ease-out !important;
}
.chip:active::before, .tag:active::before, .btn.sec:active::before, .more:active::before { opacity:1; transition-duration:.12s; }

/* 초안 카드: 기울기는 유지하되 속도만 늦춘다 */
.draft { transition:transform .55s var(--rv-ease), box-shadow .55s var(--rv-ease), border-color .4s var(--rv-ease) !important; will-change:transform; }
/* 큰 버튼도 움직임은 transform 만 (그림자·배경 전환 제거해서 끊김 방지) */
.wz-nav .next, #apply, .btn.pri {
  transition:transform .45s var(--rv-ease), filter .35s var(--rv-ease) !important; will-change:transform;
}
.wz-nav .next:not(:disabled):hover, #apply:hover, .btn.pri:not(:disabled):hover { filter:saturate(1.12) brightness(1.04); }

/* 채널이 없을 때 안내 */
.nochan { margin-top:14px; padding:20px 22px; border-radius:18px; border:1px solid transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.62)) padding-box, var(--glass-edge) border-box;
  backdrop-filter:blur(18px) saturate(165%); -webkit-backdrop-filter:blur(18px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 12px 28px -14px rgba(27,32,48,.3); }
.nochan > b { font-size:15.5px; letter-spacing:-.02em; }
.nochan p { margin:6px 0 12px; font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.nochan ol { margin:0 0 14px; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-2); }
.nochan .row { display:flex; gap:8px; flex-wrap:wrap; }
.nochan .btn { font-size:14px; padding:12px 18px; text-decoration:none; display:inline-flex; align-items:center; }
.nochan small { display:block; margin-top:10px; font-size:12px; color:var(--muted); }
@media(max-width:600px){ .nochan .row { flex-direction:column; } .nochan .btn { width:100%; justify-content:center; } }