/* 인스타 QR — 오후의 핫플 골목. 도크는 리소 인쇄 남색 잉크, 강조는 형광 분홍, 제목은 통통한 베이글 팻 원, 본문은 고운돋움. 작업대는 망점 찍힌 신문 용지. */
:root {
  --ink: #1d1a3a;               /* 리소 남색 */
  --paper: #fff4f9;
  --accent: #ff5fa2;            /* 형광 분홍 */
  --on-accent: #1d1a3a;
  --dim: rgba(255, 244, 249, .7);
  --line: rgba(255, 244, 249, .18);
  --field-bg: rgba(255, 244, 249, .07);
  --bg-in: #fff3f8; --bg-out: #ffd6e8;
  --on-bg: #3a2a5a;
  --warn: #ffd06a;
  --f-ui: 'Gowun Dodum', 'Pretendard Variable', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --h1-font: 400 28px/1.1 'Bagel Fat One', 'Black Han Sans', sans-serif;
  --h2-font: 400 24px/1.2 'Bagel Fat One', 'Black Han Sans', sans-serif;
  --r: 12px;
  --on-studio: #1d1a3a;
}
body { background: linear-gradient(180deg, #ffd9ec 0%, #ffeef6 55%, #fff6e2 100%) fixed #ffeef6; }
.dock, .studio-top, .studio-ctl, .studio-actions, .guide {
  background-color: var(--ink);
  background-image: radial-gradient(rgba(255,95,162,.16) 1.2px, transparent 1.6px);
  background-size: 9px 9px;
}
.dock { border-radius: 18px 18px 0 0; }
.dock h1 { text-shadow: 2px 2px 0 var(--accent); letter-spacing: 0; }
.lede { font-size: 14.5px; }
.at { position: relative; }
.at input { padding-left: 30px; }
.at::after { content: '@'; position: absolute; left: 12px; bottom: 11px; font: 400 17px/1 'Bagel Fat One', sans-serif; color: var(--accent); pointer-events: none; }
.fld input, .fld select { border-radius: 10px; }
.fld > span, .qrstyle > span { font-size: 13px; }
.btn { border-radius: 999px; }
.btn.icon { border-radius: 50%; }
.btn.primary { font: 400 18px/1 'Bagel Fat One', sans-serif; box-shadow: 3px 3px 0 #ffe14f; }
.logo { background: #ffe14f; color: var(--ink); border-radius: 8px; transform: rotate(-3deg); }
.chip { border-radius: 999px; }
.formats button, .qrstyle button { border-radius: 10px; }
/* 작업대: 망점 찍힌 신문 용지 */
.studio {
  background-color: #f3efe6;
  background-image: radial-gradient(rgba(29,26,58,.08) 1px, transparent 1.4px), radial-gradient(rgba(255,95,162,.08) 1px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 4px;
}
.bgs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; color: var(--dim); }
.bgs label { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; cursor: pointer; }
.bgs input { accent-color: var(--accent); width: 17px; height: 17px; margin: 0; }
.guide h3 { font: 400 19px/1.2 'Bagel Fat One', sans-serif; color: var(--accent); }
.guide-steps li::before { border-radius: 50%; font-family: 'Bagel Fat One', sans-serif; font-weight: 400; }
.guide-more a { border-radius: 12px; }
@media (min-width: 900px) { .dock { border-radius: 18px; } .dock h1 { font-size: 34px; } }

.unofficial { margin: 0; font-size: 12px; color: var(--dim); }
.guide .unofficial { margin-top: 28px; }