/* 와이파이 QR — 저녁 카페 골목. 도크는 카페 칠판, 글씨는 분필 손글씨(개구), 강조는 전구 호박색, 작업대는 원목 테이블. */
:root {
  --ink: #1f2b26;                 /* 칠판 */
  --paper: #f1efe6;               /* 분필 */
  --accent: #f2b544;              /* 에디슨 전구 */
  --on-accent: #1f2b26;
  --dim: rgba(241, 239, 230, .66);
  --line: rgba(241, 239, 230, .17);
  --field-bg: rgba(241, 239, 230, .06);
  --bg-in: #f3c58b; --bg-out: #4a5a76;
  --on-bg: #fff6e6;
  --warn: #ffb59a;
  --f-ui: 'Pretendard Variable', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --h1-font: 700 31px/1.05 'Gaegu', 'Pretendard Variable', sans-serif;
  --h2-font: 700 26px/1.15 'Gaegu', 'Pretendard Variable', sans-serif;
  --r: 3px;
  --studio-bg: #6e4a2f;
  --on-studio: rgba(255, 240, 220, .8);
}
/* 해 질 녘 하늘: 위는 푸른 저녁, 수평선 쪽은 가게 불빛 */
body { background: linear-gradient(180deg, #3e4d6b 0%, #6f7891 38%, #c99f86 72%, #f0c48c 100%) fixed #4a5a76; }

/* 칠판 질감: 지운 분필 자국 */
.dock, .studio-top, .studio-ctl, .studio-actions, .guide {
  background-color: var(--ink);
  background-image:
    radial-gradient(60% 50% at 18% 30%, rgba(255,255,255,.045), transparent 70%),
    radial-gradient(40% 60% at 82% 70%, rgba(255,255,255,.035), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dock { border-top: 3px solid #6b4a32; box-shadow: 0 -1px 0 #8a6444; }
.dock h1 { color: var(--paper); }
.dock h1::after { content: ''; display: block; width: 148px; height: 6px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148 6'%3E%3Cpath d='M2 4c20-3 40-2 60-1s50 1 84-2' fill='none' stroke='%23f2b544' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }
.lede { font-size: 14.5px; }
.fld > span { font: 600 13px/1.2 'Pretendard Variable', var(--f-ui); color: var(--dim); }
.fld input, .fld select { border-color: rgba(241,239,230,.24); }
.btn.primary { font: 700 19px/1 'Gaegu', var(--f-ui); }
.result-meta b { font-weight: 700; }
.logo { transform: rotate(-2deg); }
.lock-note { font: 700 15px/1.1 'Gaegu', var(--f-ui); padding: 5px 10px 4px; }

/* 작업대: 원목 테이블 위의 종이 */
.studio {
  background-color: #6e4a2f;
  background-image:
    repeating-linear-gradient(91deg, rgba(0,0,0,.0) 0 22px, rgba(0,0,0,.06) 22px 24px, rgba(255,255,255,.03) 24px 61px, rgba(0,0,0,.05) 61px 63px),
    repeating-linear-gradient(1deg, rgba(255,220,180,.05) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #7a5336, #5e3e27);
}
.studio-top h2 { color: var(--paper); }
.bgs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; color: var(--dim); }
.bgs > span { font: 600 13px/1.2 'Pretendard Variable', var(--f-ui); margin-right: 2px; }
.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; }
.qrstyle > span { font: 600 13px/1.2 'Pretendard Variable', var(--f-ui); }

.guide h3 { font: 700 21px/1.2 'Gaegu', var(--f-ui); }

@media (min-width: 900px) {
  .dock { border: 0; border-top: 3px solid #6b4a32; width: 430px; }
  .dock h1 { font-size: 36px; }
}

/* 폰: 인쇄물 칩 2×2(4번째가 잘리지 않게) */
@media (max-width: 600px) {
  .formats { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .formats button { min-height: 44px; }
}