/* QR 주차번호판 — 한낮 주차장. 도크는 아스팔트, 강조는 주차선 노랑, 글씨는 도로 표지 같은 도현체. 작업대는 주차 칸 위. */
:root {
  --ink: #25272b;               /* 아스팔트 */
  --paper: #f3f2ee;
  --accent: #f5c518;            /* 주차선 노랑 */
  --on-accent: #1d1f22;
  --dim: rgba(243, 242, 238, .64);
  --line: rgba(243, 242, 238, .16);
  --field-bg: rgba(243, 242, 238, .05);
  --bg-in: #eef3f7; --bg-out: #c9d9e7;
  --on-bg: #26313d;
  --warn: #ffb59a;
  --f-ui: 'Pretendard Variable', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --h1-font: 400 30px/1.1 'Do Hyeon', 'Pretendard Variable', sans-serif;
  --h2-font: 400 25px/1.15 'Do Hyeon', 'Pretendard Variable', sans-serif;
  --r: 4px;
  --on-studio: rgba(243, 242, 238, .7);
}
body { background: linear-gradient(180deg, #bcd3e6 0%, #dfe9f1 55%, #eef2f4 100%) fixed #dfe9f1; }
/* 아스팔트: 잔자갈 */
.dock, .studio-top, .studio-ctl, .studio-actions, .guide {
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' 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 .09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 도크 윗변 = 노란 주차선 두 줄 */
.dock { border-top: 0; box-shadow: inset 0 4px 0 var(--accent), inset 0 8px 0 var(--ink), inset 0 10px 0 var(--accent); padding-top: 22px; }
.dock h1 { letter-spacing: 0; }
.lede { font-size: 14.5px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; height: 40px; font: 400 17px/1 'Do Hyeon', var(--f-ui); color: var(--dim); }
.seg input:checked + span { background: var(--accent); color: var(--on-accent); }
.seg input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: -4px; }
body:not([data-mode="sms"]) .sms-only { display: none; }
.honest { margin: 0; padding: 8px 10px; font-size: 13px; line-height: 1.45; color: var(--paper); border-left: 3px solid var(--accent); background: rgba(245, 197, 24, .08); }
.btn.primary { font: 400 19px/1 'Do Hyeon', var(--f-ui); letter-spacing: .01em; }
.logo { background: var(--accent); }
/* 작업대: 흰 주차 칸 선이 그려진 아스팔트 */
.studio {
  background-color: #2e3035;
  background-image:
    linear-gradient(90deg, transparent calc(50% - 3px), rgba(255,255,255,.55) calc(50% - 3px), rgba(255,255,255,.55) calc(50% + 3px), transparent calc(50% + 3px)),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(255,255,255,.18) 118px 122px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' 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 .08 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bgs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; color: var(--dim); }
.bgs > span { font: 400 16px/1.1 'Do Hyeon', 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, .fld > span { font: 400 15px/1.1 'Do Hyeon', var(--f-ui); }
.guide h3 { font: 400 20px/1.2 'Do Hyeon', var(--f-ui); }
.guide tbody th { color: var(--paper); font-weight: 700; white-space: nowrap; }
@media (min-width: 900px) { .dock h1 { font-size: 36px; } }
.studio-fields.always { padding-top: 0; }