/* 마스코트 카드뉴스 - 순수 CSS */
:root{
  --bg:#f4f6f9; --card:#ffffff; --line:#e2e8f0; --line-strong:#cbd5e1;
  --ink:#1b1d22; --sub:#64748b; --accent:#3b5bfd; --accent-soft:#eef1ff;
  --warn-bg:#fff7e6; --warn-line:#f5c542; --err-bg:#fdecec; --err-line:#ef4444;
  --radius:20px; --radius-sm:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:24px 16px 60px}
.hidden{display:none!important}

/* 헤더 */
.hero{text-align:center; padding:18px 0 26px}
.hero h1{margin:0 0 8px; font-size:30px; font-weight:800; letter-spacing:-.5px}
.hero p{margin:0; color:var(--sub); font-size:16px}

/* 단계 카드 */
.step-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px; margin:0 0 18px; box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.step-head{display:flex; align-items:center; gap:12px; margin:0 0 18px; font-size:21px; font-weight:800; flex-wrap:wrap}
.step-head small{font-size:14px; font-weight:500; color:var(--sub); width:100%; margin-left:48px; margin-top:-6px}
.step-num{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:16px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}

/* 필드 */
.field{display:grid; gap:6px; margin:0 0 16px}
.field>span{font-size:15px; font-weight:700}
.field>span .hint{font-weight:500}
.hint{color:var(--sub); font-size:13px; font-style:normal}
.input{
  width:100%; border:1.5px solid #dbe1ea; border-radius:var(--radius-sm);
  padding:11px 13px; font:inherit; font-size:15px; background:#fff; color:var(--ink);
  transition:border-color .15s;
}
.input:focus{outline:none; border-color:var(--accent)}
.input::placeholder{color:#a8b3c4}
textarea.input{resize:vertical; min-height:44px}

/* 더 자세히 정하기 */
.more-box{border:1px dashed var(--line-strong); border-radius:var(--radius-sm); padding:12px 14px; margin:0 0 16px}
.more-box summary{cursor:pointer; font-weight:700; font-size:15px}
.more-box summary .hint{font-weight:500}
.more-box[open] summary{margin-bottom:14px}
.hl-row{display:flex; align-items:center; gap:10px}
.hl-row input[type=color]{width:46px; height:36px; padding:2px; border:1.5px solid #dbe1ea; border-radius:8px; background:#fff; cursor:pointer}
.swatches{display:flex; gap:6px; flex-wrap:wrap}
.swatch{width:26px; height:26px; border-radius:8px; border:2px solid #fff; outline:1.5px solid var(--line); cursor:pointer; padding:0}
.swatch:hover{outline-color:var(--accent)}

/* 버튼 */
button{font:inherit; cursor:pointer}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--ink); color:#fff; border:none; border-radius:14px;
  padding:13px 20px; font-weight:800; font-size:16px; transition:opacity .15s, transform .05s;
}
.btn-primary:hover:not(:disabled){opacity:.88}
.btn-primary:active:not(:disabled){transform:translateY(1px)}
.btn-primary:disabled{opacity:.45; cursor:not-allowed}
.btn-primary.as-label{width:100%; margin-bottom:8px}
.btn-xl{width:100%; padding:16px; font-size:18px; border-radius:16px}
.btn-light{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:#fff; color:var(--ink); border:1.5px solid var(--line-strong); border-radius:14px;
  padding:11px 18px; font-weight:700; font-size:15px;
}
.btn-light:hover{border-color:var(--ink)}
.btn-text{background:none; border:none; padding:0; color:var(--sub); font-size:14px; text-decoration:underline}
.btn-text:hover{color:var(--ink)}

/* 세그먼트 탭 */
.seg{display:grid; gap:8px}
.seg-3{grid-template-columns:repeat(3,1fr)}
.seg button{
  border:2px solid var(--line); background:#fff; border-radius:14px;
  padding:12px 8px; font-weight:700; font-size:15px; color:var(--ink);
}
.seg button.on{border-color:var(--accent); background:var(--accent-soft)}

/* 그림 느낌 선택 */
.style-grid{display:grid; gap:8px; grid-template-columns:repeat(2,1fr)}
.style-grid button{
  border:2px solid var(--line); background:#fff; border-radius:14px;
  padding:10px 12px; text-align:left; font-weight:700; font-size:15px;
}
.style-grid button.on{border-color:var(--accent); background:var(--accent-soft)}
@media (min-width:640px){.style-grid{grid-template-columns:repeat(3,1fr)}}

/* 지금 쓰는 캐릭터 */
.mascot-now{display:flex; gap:14px; align-items:center; background:#f8fafc; border:1px solid var(--line); border-radius:16px; padding:12px; margin-bottom:16px}
.mascot-now img{width:96px; height:96px; object-fit:cover; border-radius:14px; background:#e2e8f0}
.mascot-meta{display:grid; gap:4px}
.mascot-title{font-weight:800}

/* 주제 추천 카드 */
.idea-list{display:grid; gap:8px; margin-top:12px}
.idea-card{
  width:100%; text-align:left; background:#fff; border:2px solid var(--line);
  border-radius:14px; padding:12px 14px; display:grid; gap:2px;
}
.idea-card:hover{border-color:var(--accent)}
.idea-card b{font-size:15px}
.idea-card span{font-size:13px; color:var(--sub)}

/* 링크 */
.link-row{display:flex; gap:8px}
.link-row .input{flex:1}

/* 포맷 선택 */
.format-grid{display:grid; gap:8px; grid-template-columns:repeat(2,1fr)}
.format-card{
  display:flex; gap:10px; align-items:flex-start; text-align:left;
  border:2px solid var(--line); background:#fff; border-radius:16px; padding:12px;
}
.format-card:hover{border-color:var(--line-strong)}
.format-card.on{border-color:var(--accent); background:var(--accent-soft)}
.format-card .fe{font-size:22px; line-height:1.2}
.format-card b{display:block; font-size:15px}
.format-card span{display:block; font-size:13px; color:var(--sub)}
@media (min-width:640px){.format-grid{grid-template-columns:repeat(3,1fr)}}

/* 상태/알림 */
.status-line{color:var(--accent); font-weight:700; font-size:15px; margin:12px 0 0}
.notice{border-radius:var(--radius-sm); padding:11px 13px; font-size:14px; font-weight:600; margin-top:12px}
.notice.warn{background:var(--warn-bg); border:1.5px solid var(--warn-line); color:#7a5300}
.notice.error{background:var(--err-bg); border:1.5px solid var(--err-line); color:#b91c1c}

/* 결과 */
.result-actions{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.result-grid{display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-bottom:18px}
@media (min-width:640px){.result-grid{grid-template-columns:repeat(3,1fr)}}
.card-shot{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#eef1f5; aspect-ratio:3/4}
.card-shot img{width:100%; height:100%; object-fit:cover; display:block}
.card-shot .busy{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px;
  background:rgba(15,23,42,.55); backdrop-filter:blur(2px);
}
.card-shot .spin{width:30px; height:30px; border-radius:50%; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.card-tools{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.card-tools .btn-light{padding:8px 10px; font-size:13px; border-radius:10px; flex:1; min-width:0}

#sourcesBox h3{margin:18px 0 8px; font-size:16px}
.sources{margin:0; padding:0 0 0 18px; color:var(--sub); font-size:14px}
.sources li{margin-bottom:4px}
.sources a{color:var(--accent); word-break:break-all}

/* 문구 편집 모달 */
.modal-overlay{position:fixed; inset:0; z-index:50; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:16px}
.modal-overlay[hidden]{display:none}
.modal{background:#fff; border-radius:20px; width:min(560px,100%); max-height:min(720px,92vh); overflow:auto; padding:22px 20px; box-shadow:0 20px 50px rgba(15,23,42,.25)}
.modal h3{margin:0 0 14px; font-size:19px; font-weight:800}
.modal .field{margin-bottom:13px}
.modal-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.modal-row-3{grid-template-columns:1fr 1fr 1fr}
.modal-row select.input{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:8px}
.title-preview{
  background:linear-gradient(180deg, rgba(10,12,16,.6), rgba(10,12,16,.92));
  border-radius:12px; padding:14px 16px; color:#fff;
  font-weight:800; font-size:22px; line-height:1.3; letter-spacing:-.2px;
  word-break:keep-all; overflow-wrap:anywhere; min-height:30px;
}
.title-preview .tp-empty{opacity:.45; font-weight:600; font-size:15px}

.foot{text-align:center; color:#94a3b8; font-size:13px; padding:20px 0}