/* 겉모습 3초안 (?look=1|2|3) — C안(한 단계씩) 흐름 위에 입힌다.
   공통: 반투명 유리 카드(backdrop-filter), 알약 토글 칩, 아이폰식 스위치, 빛 번짐 배경 */

/* ── 공통 뼈대 ── */
body[class*="look-"]{min-height:100vh;position:relative;overflow-x:hidden}
body[class*="look-"]::before,body[class*="look-"]::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(80px);pointer-events:none}
body[class*="look-"]::before{width:520px;height:520px;top:-140px;left:-120px;background:var(--glow1)}
body[class*="look-"]::after{width:600px;height:600px;bottom:-200px;right:-160px;background:var(--glow2)}
body[class*="look-"] .card{background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:0 20px 50px var(--shadow),inset 0 1px 0 var(--glass-hi);border-radius:28px}
body[class*="look-"] header h1{color:var(--ink)}
body[class*="look-"] header p,body[class*="look-"] .step small,body[class*="look-"] .note,body[class*="look-"] .hint,body[class*="look-"] footer,body[class*="look-"] .count,body[class*="look-"] .file{color:var(--muted)}
body[class*="look-"] header .badge{background:var(--chip);color:var(--pri);border:1px solid var(--glass-line);backdrop-filter:blur(10px)}
body[class*="look-"] .step b{background:var(--pri-grad);box-shadow:0 6px 16px var(--pri-glow)}
body[class*="look-"] .step h2{color:var(--ink)}
/* 입력칸: 반투명 */
body[class*="look-"] input[type=text],body[class*="look-"] textarea,body[class*="look-"] select{background:var(--field);border:1px solid var(--glass-line);color:var(--ink);border-radius:16px;backdrop-filter:blur(8px)}
body[class*="look-"] input[type=text]:focus,body[class*="look-"] textarea:focus{border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-ring)}
/* 업종·말투·한 줄 소개 → 알약 토글 */
body[class*="look-"] .chips{gap:10px}
body[class*="look-"] .chip{background:var(--chip);border:1px solid var(--glass-line);color:var(--ink);border-radius:999px;flex-direction:row;justify-content:center;gap:8px;padding:14px 10px;transition:all .2s;backdrop-filter:blur(8px)}
body[class*="look-"] .chip span{font-size:20px}
body[class*="look-"] .chip:hover{transform:translateY(-1px)}
body[class*="look-"] .chip.on{background:var(--pri-grad);border-color:transparent;color:#fff;box-shadow:0 8px 20px var(--pri-glow)}
body[class*="look-"] .tag{background:var(--chip);border:1px solid var(--glass-line);color:var(--ink);backdrop-filter:blur(8px)}
body[class*="look-"] .tag.on{background:var(--pri-grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px var(--pri-glow)}
/* 버튼 */
body[class*="look-"] .btn.pri,body[class*="look-"] .wz-nav .next{background:var(--pri-grad);color:#fff;border-radius:999px;box-shadow:0 10px 24px var(--pri-glow)}
body[class*="look-"] .btn.sec,body[class*="look-"] .wz-nav .prev,body[class*="look-"] .more,body[class*="look-"] .file label{background:var(--chip);color:var(--ink);border:1px solid var(--glass-line);border-radius:999px;backdrop-filter:blur(8px)}
/* 진행 막대: 유리 트랙 */
body[class*="look-"] .wz-progress{background:transparent}
body[class*="look-"] .wz-progress .bar{background:var(--chip);border:1px solid var(--glass-line);height:12px}
body[class*="look-"] .wz-progress .bar i{background:var(--pri-grad);box-shadow:0 0 14px var(--pri-glow)}
body[class*="look-"] .wz-progress .lbl{color:var(--muted)}
/* 초안·미리보기 */
body[class*="look-"] .draft{border-radius:20px;background:var(--chip)}
body[class*="look-"] .draft.on{border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-ring),0 12px 28px var(--pri-glow)}
body[class*="look-"] .draft .n{background:var(--pill-dark);backdrop-filter:blur(6px)}
body[class*="look-"] .preview{border-radius:22px}
/* 접는 칸·안내 박스 */
body[class*="look-"] .info,body[class*="look-"] .guess,body[class*="look-"] .rename,body[class*="look-"] .result.info{background:var(--chip);border:1px solid var(--glass-line);color:var(--ink);backdrop-filter:blur(10px);border-radius:18px}
body[class*="look-"] .info summary,body[class*="look-"] .info-grid label{color:var(--ink)}
body[class*="look-"] .modal .box{background:var(--glass-strong);backdrop-filter:blur(24px);border:1px solid var(--glass-line);color:var(--ink);border-radius:26px}
/* 체크박스 → 아이폰식 스위치 */
body[class*="look-"] input[type=checkbox]{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:999px;background:var(--switch-off);position:relative;cursor:pointer;transition:background .2s;flex:none;border:1px solid var(--glass-line)}
body[class*="look-"] input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .2s}
body[class*="look-"] input[type=checkbox]:checked{background:var(--pri-grad)}
body[class*="look-"] input[type=checkbox]:checked::after{transform:translateX(18px)}
body[class*="look-"] .toggle{gap:10px;color:var(--ink)}
/* 비교 버튼 줄 두 개 */
.ui-switch.look{bottom:62px}

/* ── 1. 라이트 글래스 — JDND 코발트 + 주황 ── */
body.look-1{--ink:#14213d;--muted:#5b6784;--bg:#eef3fb;--pri:#2b6be8;--pri-grad:linear-gradient(135deg,#2b6be8,#5b8cff);--pri-glow:rgba(43,107,232,.28);--pri-ring:rgba(43,107,232,.18);
  --glass:rgba(255,255,255,.55);--glass-strong:rgba(255,255,255,.82);--glass-line:rgba(255,255,255,.75);--glass-hi:rgba(255,255,255,.9);--shadow:rgba(31,60,120,.12);
  --field:rgba(255,255,255,.7);--chip:rgba(255,255,255,.6);--pill-dark:rgba(20,33,61,.7);--switch-off:rgba(20,33,61,.15);
  --glow1:rgba(43,107,232,.35);--glow2:rgba(242,106,33,.28);background:linear-gradient(160deg,#f7f3ec 0%,#eaf1fd 55%,#f3ecfb 100%)}
body.look-1 .wz-progress .bar i{background:linear-gradient(90deg,#f26a21,#2b6be8)}

/* ── 2. 다크 글래스 — 빛나는 유리 ── */
body.look-2{--ink:#eef2ff;--muted:#9aa6c4;--pri:#5b8cff;--pri-grad:linear-gradient(135deg,#4f7cff,#22d3ee);--pri-glow:rgba(79,124,255,.4);--pri-ring:rgba(79,124,255,.25);
  --glass:rgba(255,255,255,.06);--glass-strong:rgba(20,26,48,.85);--glass-line:rgba(255,255,255,.12);--glass-hi:rgba(255,255,255,.12);--shadow:rgba(0,0,0,.45);
  --field:rgba(255,255,255,.05);--chip:rgba(255,255,255,.07);--pill-dark:rgba(0,0,0,.55);--switch-off:rgba(255,255,255,.14);
  --glow1:rgba(79,124,255,.45);--glow2:rgba(168,85,247,.35);background:#060a18}
body.look-2 .wz-progress .bar i{background:linear-gradient(90deg,#22d3ee,#4f7cff,#a855f7)}

/* ── 3. 파스텔 토글 — 아이폰 설정 화면 같은 부드러움 ── */
body.look-3{--ink:#1f2a44;--muted:#6b7590;--pri:#1f2a44;--pri-grad:linear-gradient(135deg,#1f2a44,#3b4a72);--pri-glow:rgba(31,42,68,.22);--pri-ring:rgba(90,210,170,.3);
  --glass:rgba(255,255,255,.62);--glass-strong:rgba(255,255,255,.88);--glass-line:rgba(255,255,255,.8);--glass-hi:#fff;--shadow:rgba(90,80,140,.12);
  --field:rgba(255,255,255,.75);--chip:rgba(255,255,255,.7);--pill-dark:rgba(31,42,68,.7);--switch-off:rgba(31,42,68,.14);
  --glow1:rgba(186,164,255,.5);--glow2:rgba(120,230,195,.45);background:linear-gradient(160deg,#f4f0ff 0%,#eefaf6 60%,#fff5f0 100%)}
body.look-3 input[type=checkbox]:checked{background:#34c38f}
body.look-3 .wz-progress .bar i{background:linear-gradient(90deg,#7ee0bf,#a996ff)}

/* 휴대폰: 알약 안에서 글자가 두 줄로 잘리지 않게 아이콘을 위로 올린다 */
body[class*="look-"] .chip{white-space:nowrap}
@media(max-width:520px){body[class*="look-"] .chip{flex-direction:column;gap:4px;border-radius:22px;padding:12px 6px;font-size:14px}body[class*="look-"] .chip span{font-size:22px}}
body[class*="look-"]{background-attachment:fixed}

/* ── 2026-09-22 확정: 밝은 시안은 배경을 단색 #F5F6F8 로 통일 (빛 번짐·그라데이션 없음) ── */
body.look-1,body.look-3{background:#F5F6F8;--glass:rgba(255,255,255,.88);--glass-strong:#fff;--glass-line:#E6E8EE;--glass-hi:#fff;--field:#fff;--chip:rgba(255,255,255,.95);--shadow:rgba(16,24,40,.06)}
body.look-1::before,body.look-1::after,body.look-3::before,body.look-3::after{display:none}
body.look-1 .wz-progress,body.look-3 .wz-progress{background:#F5F6F8}
body.look-1 .card,body.look-3 .card{box-shadow:0 8px 24px rgba(16,24,40,.06)}

/* 예시 글자(placeholder)는 작고 연하게 — 2026-09-22 "예시 글씨가 너무 커" */
body.ui-c input[type=text]{font-size:17px;padding:15px 16px}
body input::placeholder,body textarea::placeholder{font-size:14px;color:#A3AAB8;font-weight:500}
body .info-grid input::placeholder{font-size:13px}
body textarea#intro{font-size:14px}