:root{
  --bg:#f4f6f9; --card:#fff; --ink:#222; --muted:#777; --line:#e6e8ec;
  --primary:#5b6cff; --primary-d:#4553e6; --ok:#16a34a;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif;line-height:1.6}
.top{text-align:center;padding:28px 16px 10px}
.top h1{margin:0;font-size:28px;font-weight:800}
.top h1 span{filter:none}
.top p{margin:6px 0 0;color:var(--muted)}
.warn{max-width:560px;margin:10px auto;background:#fff7ed;border:1px solid #fed7aa;
  color:#9a3412;padding:10px 14px;border-radius:10px;text-align:center;font-size:14px}
.freebadge{display:inline-block;margin-top:10px;background:#eafaf0;border:1px solid #b7ebc9;
  color:#177245;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600}

.steps{max-width:560px;margin:16px auto;padding:0;display:flex;gap:8px;list-style:none}
.steps li{flex:1;display:flex;align-items:center;gap:6px;justify-content:center;
  font-size:13px;color:var(--muted);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:6px 4px}
.steps li b{display:inline-flex;width:20px;height:20px;border-radius:50%;
  background:#e9ebf0;color:#666;align-items:center;justify-content:center;font-size:12px}
.steps li.on{color:var(--primary);border-color:#c7ccff;background:#f2f4ff}
.steps li.on b{background:var(--primary);color:#fff}

.card{max-width:560px;margin:14px auto;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:22px;box-shadow:0 6px 24px rgba(0,0,0,.04)}
.card h2{margin:0 0 14px;font-size:18px}

.drop{display:block;border:2px dashed #cdd3dd;border-radius:14px;min-height:220px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
  background:#fafbfc;transition:.15s}
.drop:hover{border-color:var(--primary);background:#f6f8ff}
.drop-inner{text-align:center;color:var(--muted)}
.drop-ico{font-size:40px;margin-bottom:8px}
.drop img{max-width:100%;max-height:340px;display:block;border-radius:12px}

.btn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:15px;font-weight:600;padding:12px 18px;border-radius:12px;cursor:pointer;
  width:100%;margin-top:14px;transition:.12s}
.btn:hover{border-color:#cbd0da}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-d)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px}
.row .btn{margin-top:14px}

.result-wrap{display:flex;justify-content:center}
.result-box{background:
  linear-gradient(45deg,#eceef2 25%,transparent 25%),
  linear-gradient(-45deg,#eceef2 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#eceef2 75%),
  linear-gradient(-45deg,transparent 75%,#eceef2 75%);
  background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;
  border-radius:14px;padding:10px}
.result-box img{max-width:100%;max-height:400px;display:block;border-radius:8px}
.hint{color:var(--muted);font-size:13px;text-align:center;margin:12px 0 0}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.cell{border:1px solid var(--line);border-radius:12px;padding:6px;text-align:center;
  background:
  linear-gradient(45deg,#eceef2 25%,transparent 25%),
  linear-gradient(-45deg,#eceef2 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#eceef2 75%),
  linear-gradient(-45deg,transparent 75%,#eceef2 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.cell img{width:100%;border-radius:8px;display:block;min-height:70px}
.cell .lbl{font-size:12px;color:#555;margin-top:4px}
.cell.pending{display:flex;align-items:center;justify-content:center;color:#aaa;
  font-size:12px;min-height:96px;background:#f7f8fa}

@font-face{font-family:'GamjaFlower';src:url('fonts/GamjaFlower.ttf') format('truetype');font-display:swap}

/* 저장 모달 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-box{background:#fff;border-radius:16px;padding:22px;max-width:420px;width:100%;position:relative;max-height:92vh;overflow-y:auto}
.modal-box h3{margin:0 0 12px;font-size:18px}
.modal-x{position:absolute;top:12px;right:14px;border:none;background:none;font-size:20px;cursor:pointer;color:#aaa;line-height:1}
.save-preview{display:flex;justify-content:center}
#saveCanvas{width:260px;height:260px;border:1px solid var(--line);border-radius:12px;background:#fff}
.save-caplabel{display:block;font-size:13px;color:#555;font-weight:600;margin:8px 0}
.save-caplabel .inp2{margin-top:6px}
.save-sizes-t{font-size:13px;color:#777;margin:14px 0 6px;text-align:center}
.save-sizes{display:flex;gap:8px}
.save-sizes .btn{margin-top:0;padding:12px 8px;font-size:14px}

/* 전체 저장 줄 */
.saveallrow{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.saveallrow select{flex:1;min-width:180px;font-size:14px;padding:10px;border:1px solid #cdd3dd;border-radius:9px;background:#fff}
.saveallrow .btn{margin-top:0;white-space:nowrap;width:auto}

/* 셀 저장 버튼 */
.cellsave{margin-top:4px;width:100%;font-size:12px;padding:5px;border:1px solid #cdd3dd;border-radius:8px;background:#fff;cursor:pointer}
.cellsave:hover{border-color:#aab1bd}

/* 세트 저장/불러오기 */
.setcard{padding:12px 16px}
.setrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.setrow select{flex:1;min-width:160px;font-size:13px;padding:9px;border:1px solid #cdd3dd;border-radius:9px;background:#fff}

/* 표정 개수 선택 */
.exprcountrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.exprcountrow label{display:flex;align-items:center;gap:8px;font-size:14px;color:#555;font-weight:600}
.exprcountrow select{font-size:14px;padding:8px;border:1px solid #cdd3dd;border-radius:9px;background:#fff}

/* 후보 부캐 갤러리 */
.cand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px}
.cand{border:2px solid var(--line);border-radius:12px;padding:6px;cursor:pointer;position:relative;
  background:linear-gradient(45deg,#eceef2 25%,transparent 25%),linear-gradient(-45deg,#eceef2 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#eceef2 75%),linear-gradient(-45deg,transparent 75%,#eceef2 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;transition:.12s}
.cand img{width:100%;border-radius:8px;display:block}
.cand .candpick{text-align:center;font-size:12px;color:#777;margin-top:4px;font-weight:600}
.cand:hover{border-color:#c7ccff}
.cand.sel{border-color:var(--primary);box-shadow:0 0 0 2px #c7ccff}
.cand.sel .candpick{color:var(--primary)}

/* 비용 패널 */
.usagebar{max-width:560px;margin:10px auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-size:13px;color:#444}
.usagebar .ub-t{font-weight:700}
.usagebar a{margin-left:auto;text-decoration:none;font-size:15px}

/* 무료체험 배지 (고객용) */
.trialbar{max-width:560px;margin:8px auto;display:flex;gap:10px;align-items:center;
  background:#eef2ff;border:1px solid #c7ccff;color:#3a43b8;border-radius:12px;
  padding:9px 14px;font-size:14px;font-weight:600}
.trialbar.warnlow{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.trialbar.ownkey{background:#eafaf0;border-color:#b7ebc9;color:#177245}
.trialbar a{margin-left:auto;font-size:12px;font-weight:600;color:inherit;opacity:.8}

/* 본인 키 입력 패널 */
.keypanel{border:2px solid #c7ccff;background:#fbfbff}
.keypanel h2{color:#3a43b8}
.keypanel .kpmsg{text-align:left;margin:0 0 12px;color:#555}
.keypanel #userKeyInput{margin-top:0}
.keypanel #kpStatus:not(:empty){margin:8px 0 0}
.keypanel #kpStatus.err{color:#c0392b}
.keypanel #kpStatus.ok{color:var(--ok)}

/* 캐릭터 특징 폼 */
.opts{margin-top:14px;border-top:1px dashed var(--line);padding-top:14px}
.opthead{font-size:14px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.optgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.optgrid label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#555}
.optgrid select,.inp2,.custom{font-size:14px;padding:9px;border:1px solid #cdd3dd;border-radius:9px;width:100%;background:#fff}
.custom{margin-top:4px}
.inp2{margin-top:10px}
.advbox{margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:#fafbfc}
.advbox summary{cursor:pointer;font-size:13px;color:#555;padding:4px}
.advbox textarea{width:100%;font-size:13px;line-height:1.5;border:1px solid #cdd3dd;border-radius:8px;padding:9px;margin-top:8px;font-family:inherit;resize:vertical}
.mini-note{font-size:12px;color:#999;margin:6px 2px}
.presetrow{display:flex;gap:8px;margin-top:10px;align-items:center}
.presetrow select{flex:1;font-size:13px;padding:8px;border:1px solid #cdd3dd;border-radius:9px;background:#fff}
.presetrow .inp2{margin-top:0}
.mini{font-size:13px;padding:8px 12px;border:1px solid #cdd3dd;border-radius:9px;background:#fff;cursor:pointer;white-space:nowrap}
.mini:hover{border-color:#aab1bd}
.mini.danger{color:#c0392b;border-color:#f0c0b8}

.overlay{position:fixed;inset:0;background:rgba(255,255,255,.82);z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.overlay p{color:#444;font-weight:600}
.spinner{width:46px;height:46px;border:5px solid #dfe3ee;border-top-color:var(--primary);
  border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================================================================
   나달마 브랜딩 (컴매니저) — 연한 아바타 배경 + 서명형 은근한 CTA
   ================================================================ */
/* 연한 아바타 벽지 (흰 오버레이로 은은하게, 본문 흰 카드가 또렷하게 떠 보임) */
body{
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    url('bg/nadalma_bg.jpg') center/cover fixed;
}
/* 공개판 무료 안내 문구 */
.freeinfo{max-width:560px;margin:12px auto;background:#f1eefe;border:1px solid #ddd6f6;
  color:#5b5470;border-radius:12px;padding:11px 16px;text-align:center;font-size:14px;line-height:1.5}
.freeinfo b{color:#7c5cd6}

/* 헤더 로고 (제미나이 그래픽, 흰배경 투명처리) */
.logo{margin:0;line-height:0}
.logo-img{display:block;width:min(360px,82%);height:auto;margin:2px auto 0;
  filter:drop-shadow(0 3px 8px rgba(91,108,255,.12))}
/* 컬러풀 부제 (로고 파스텔 톤과 맞춤) */
.tagline{margin-top:8px !important;font-size:15.5px;font-weight:700;color:#7b8090 !important;letter-spacing:-.2px}
.tagline .t1{color:#9a6fd6}         /* 귀여운 아바타 — 라벤더 */
.tagline .t2{color:#e56b96}         /* 사진 한 장 — 핑크 */
.tagline .t3{color:#5b6cff;font-weight:800}  /* 완성! — 블루 */
.tagline .tdot{color:#c7ccd4;font-weight:600}
.tagline .tspark{color:#ffc233}

/* 하단: 컴매니저 무료 어플 배지 (마스코트 + 문구, 블록 전체 블로그 링크) */
.botadwrap{text-align:center;margin:26px 0 14px}
.botad{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:linear-gradient(135deg,#fdfcff 0%,#f1edfe 100%);border:1.5px solid #ddd6f6;color:#5b5470;
  padding:7px 18px 7px 7px;border-radius:999px;font-size:14px;font-weight:600;
  box-shadow:0 4px 14px rgba(123,108,255,.13);transition:.16s}
.botad:hover{border-color:#c3b8f2;box-shadow:0 6px 18px rgba(123,108,255,.22);transform:translateY(-1px)}
.botad-mascot{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top center;
  border:2px solid #fff;box-shadow:0 1px 5px rgba(123,108,255,.20);background:#fff;flex:none;
  outline:2px solid #e7defb;outline-offset:0}
.botad-tx b{color:#7c5cd6}          /* 컴매니저 — 보라 */
.botad-tx em{color:#e56b96;font-style:normal;font-weight:800}  /* 무료 — 핑크 강조 */
.botad-spark{color:#ffc233;font-size:13px}
/* 공개판 카톡 셀 글자 입력칸 */
.cell .capinp{width:100%;box-sizing:border-box;font-size:12px;padding:5px 7px;margin:4px 0 2px;
  border:1px solid #d3d9ff;border-radius:7px;text-align:center;background:#fff;color:#333}
.cell .capinp:focus{outline:none;border-color:#8b90f0}

/* 하단 '사용 초기화' (아주 작게·연하게, 비번 필요) */
.resetwrap{text-align:center;margin:8px 0 4px}
.resetwrap a{font-size:11px;color:#b8bcc6;text-decoration:none}
.resetwrap a:hover{color:#8b90a0;text-decoration:underline}