:root{--bg:#f3f5f9;--card:#fff;--ink:#141b2b;--sub:#5b6577;--line:#e3e7ee;--brand:#2357f5;--brand-2:#0b2a7a;--brand-soft:#edf2ff;--brand-ink:#fff;--ok:#0e8a5f;--ok-soft:#eaf8f1;--ok-line:#b9e4cf;--warn:#a35a00;--warn-soft:#fff7e6;--warn-line:#f0c879;--bad:#c0392b;--bad-soft:#fff3f1;--focus:#9cb8ff;--shadow:0 1px 2px rgba(16,24,40,.04),0 2px 8px rgba(16,24,40,.05)}
*{box-sizing:border-box}
html{scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:920px;margin:0 auto;padding:0 16px}

/* 머리 */
.top{background:linear-gradient(135deg,var(--brand-2) 0%,var(--brand) 100%);color:#fff;padding:26px 0 30px}
.brand{font-size:13px;font-weight:700;letter-spacing:.02em;opacity:.85}
h1{font-size:24px;line-height:1.35;margin:6px 0 6px;letter-spacing:-.01em}
.lead{margin:0;font-size:14.5px;opacity:.92;max-width:680px}
.lead b{font-weight:700}

/* 진행 막대(위에 붙음) */
.progress{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(6px);border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(16,24,40,.05)}
.progress .wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.pg-text{font-size:14px;font-weight:700;white-space:nowrap}
.pg-text small{font-weight:500;color:var(--sub);margin-left:6px}
.pg-bar{flex:1;min-width:120px;height:8px;background:#e8ecf3;border-radius:99px;overflow:hidden}
.pg-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),#4f86ff);border-radius:99px;transition:width .3s}
.pg-bar.full i{background:linear-gradient(90deg,var(--ok),#22b07d)}
.pg-next{border:0;background:var(--brand);color:#fff;border-radius:8px;padding:7px 14px;font-size:14px;font-weight:600;white-space:nowrap}
.pg-next.go{background:var(--ok)}
.pg-save{font-size:12px;color:var(--sub);white-space:nowrap}

/* 안내 */
.steps{list-style:none;margin:18px 0 10px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.45;box-shadow:var(--shadow)}
.steps b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:12.5px;margin-right:6px}
.notice{font-size:12.5px;color:var(--sub);margin:0 2px 10px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--sub);margin:4px 2px 12px}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;background:var(--brand-soft);border:1px solid #c9d6ff}
.legend .lg-sug::before{background:var(--warn-soft);border:1px dashed var(--warn-line)}
.legend .lg-ok::before{background:var(--ok-soft);border-color:var(--ok-line)}
.bulkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow)}
.bulkbar .help{margin:0}

/* 섹션 */
section.sec{background:var(--card);border:1px solid var(--line);border-radius:16px;margin:16px 0;padding:4px 22px 12px;box-shadow:var(--shadow)}
section.sec h2{font-size:18px;margin:16px 0 4px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.sec-cnt{font-size:12px;font-weight:700;color:var(--sub);background:#eef1f6;border-radius:99px;padding:1px 9px}
.sec-cnt.done{background:var(--ok-soft);color:var(--ok)}

/* 칸 */
.f{border-top:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:200px 1fr;gap:16px;transition:background .3s}
.f.first{border-top:0}
.f.err{background:var(--bad-soft);border-radius:10px;padding:16px 10px;margin:0 -10px}
.f.flash{animation:flash 1.2s ease-out}
@keyframes flash{0%{background:#fff3c4}100%{background:transparent}}
.lab{font-weight:650;font-size:15px;line-height:1.45}
.f.ok > .lab::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--ok);color:#fff;font-size:11px;margin-right:6px;vertical-align:1px}
.badge{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:0 7px;margin-left:5px;vertical-align:1px}
.b-req{background:#fde8e6;color:var(--bad)}.b-priv{background:#eef0f3;color:var(--sub)}.b-cond{background:#fff1dc;color:var(--warn)}
.help{font-size:12.5px;color:var(--sub);margin-top:4px;font-weight:400;line-height:1.5}

/* 미리 채운 값 */
.pre{background:var(--brand-soft);border:1px solid #d9e3ff;border-radius:10px;padding:10px 12px;transition:background .2s,border-color .2s}
.pre .v{font-weight:650;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.src{font-size:12px;color:var(--sub);margin-top:4px}
.pre.sug{background:var(--warn-soft);border:1px dashed var(--warn-line)}
.sugtag{font-size:12px;font-weight:700;color:var(--warn);margin-bottom:3px}
.f.ok .pre{background:var(--ok-soft);border-color:var(--ok-line);border-style:solid}
.suggest{font-size:13px;color:var(--warn);background:var(--warn-soft);border:1px dashed var(--warn-line);border-radius:8px;padding:7px 10px;margin-bottom:8px}

/* 버튼 */
button{font:inherit;cursor:pointer}
.btns{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.tog{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 16px;font-size:14px;font-weight:600;color:var(--ink);min-height:36px}
.tog:hover{border-color:#b8c4d8}
.tog.on{border-color:var(--brand);background:var(--brand);color:#fff}
.tog.t-ok.on{border-color:var(--ok);background:var(--ok)}
.link{background:none;border:0;color:var(--brand);padding:0;font-size:14px}
.link.bad{color:var(--bad)}
.add{border:1px solid var(--brand);color:var(--brand);background:#fff;border-radius:8px;padding:7px 14px;font-size:14px;font-weight:600}
.add:hover{background:var(--brand-soft)}

/* 선택지: 누르기 쉬운 알약 모양 */
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{font-size:14.5px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 11px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s;min-height:36px}
.opts label:hover{border-color:#b8c4d8}
.opts label:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand-2);font-weight:600}
.opts input{accent-color:var(--brand);margin:0}
label.agree{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
label.agree:has(input:checked){border-color:var(--ok);background:var(--ok-soft)}
label.agree input{margin-top:4px;accent-color:var(--ok)}

/* 입력 */
input[type=text],input[type=url],input[type=number],textarea{width:100%;border:1px solid #d5dbe5;border-radius:9px;padding:9px 11px;background:#fff;font:inherit;transition:border-color .15s,box-shadow .15s}
input[type=text]:focus,input[type=url]:focus,input[type=number]:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(35,87,245,.14);outline:0}
button:focus-visible,.opts label:focus-within{outline:2px solid var(--focus);outline-offset:1px}
textarea{min-height:96px;resize:vertical}
.cnt{font-size:12px;color:var(--sub);text-align:right;margin-top:2px}
.etc{margin-top:8px;max-width:340px}
.file-note{font-size:12.5px;color:var(--sub);margin-top:6px}
.file-note.bad{color:var(--bad)}
input[type=file]{font-size:14px}

/* 반복 작성란 */
.grp{border:1px solid var(--line);border-radius:12px;padding:6px 14px 8px;margin:10px 0;background:#fafbfd}
.grp h4{margin:8px 0 2px;font-size:14px;display:flex;justify-content:space-between;align-items:center;color:var(--brand-2)}
.grp .f{grid-template-columns:160px 1fr;padding:12px 0}

/* 카드 미리보기 */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;grid-template-columns:72px 1fr;gap:16px;max-width:580px;box-shadow:0 6px 24px rgba(16,24,40,.08)}
.logo{width:72px;height:72px;border-radius:14px;background:#eef1f6;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:11px;text-align:center;overflow:hidden;padding:6px}
.logo img{max-width:100%;max-height:100%;object-fit:contain}
.logo.dark{background:#1f2633}
.pre .logo{width:auto;max-width:220px;height:64px;padding:6px 10px;background:#fff;border:1px solid var(--line)}
.pre .logo.dark{background:#1f2633}
.card h3{margin:0 0 2px;font-size:19px}.card .tl{color:var(--sub);margin-bottom:8px;font-size:14.5px}
.chips span{display:inline-block;background:var(--brand-soft);color:var(--brand-2);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;margin:2px 4px 2px 0}

/* 제출 */
.submit{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0 48px}
.primary{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:13px 32px;font-weight:700;font-size:16.5px;box-shadow:0 4px 14px rgba(35,87,245,.3)}
.primary:hover{filter:brightness(1.06)}
.primary[disabled]{opacity:.55;cursor:wait}
.errs{background:var(--bad-soft);border:1px solid #f3c4bf;border-radius:12px;padding:12px 16px;margin:12px 0;font-size:14px}
.errs ul{margin:6px 0 0;padding-left:18px}
.errs a{color:var(--bad)}
.done{background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:16px;padding:26px;margin:24px 0}
.foot{color:var(--sub);font-size:12.5px;padding-bottom:36px}

@media (max-width:760px){
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  html{scroll-padding-top:110px}
  .top{padding:20px 0 22px}
  h1{font-size:20px}
  section.sec{padding:2px 14px 10px;border-radius:14px}
  .f,.grp .f{grid-template-columns:1fr;gap:8px}
  .f.err{margin:0 -6px;padding:14px 6px}
  .pg-save{display:none}
  .pg-bar{order:3;flex-basis:100%}
  .pg-next{margin-left:auto}
  .card{grid-template-columns:56px 1fr;padding:14px}
  .logo{width:56px;height:56px}
  .primary{width:100%}
}