/* 명함 QR — 인쇄소 재단대. 도크는 초록 커팅 매트(1cm 눈금), 강조는 인쇄 청록(시안), 글씨는 IBM Plex Sans KR. 작업대는 매트 위의 명함. */
:root {
  --ink: #1f4436;               /* 커팅 매트 */
  --paper: #eef4ef;
  --accent: #00a8e1;            /* 프로세스 시안 */
  --on-accent: #08202a;
  --dim: rgba(238, 244, 239, .68);
  --line: rgba(238, 244, 239, .18);
  --field-bg: rgba(238, 244, 239, .07);
  --bg-in: #f3f6f8; --bg-out: #cfdbe6;
  --on-bg: #24323f;
  --warn: #ffc2a8;
  --f-ui: 'IBM Plex Sans KR', 'Pretendard Variable', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --h1-font: 700 27px/1.15 'IBM Plex Sans KR', 'Pretendard Variable', sans-serif;
  --h2-font: 700 22px/1.25 'IBM Plex Sans KR', 'Pretendard Variable', sans-serif;
  --r: 2px;
  --on-studio: rgba(238, 244, 239, .78);
}
body { background: linear-gradient(180deg, #cddff0 0%, #e7eef4 60%, #f2f4f5 100%) fixed #e7eef4; }
/* 커팅 매트: 1cm(약 38px) 눈금 + 5cm 굵은 눈금 */
.dock, .studio-top, .studio-ctl, .studio-actions, .guide, .studio {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(238,244,239,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,244,239,.13) 1px, transparent 1px),
    linear-gradient(rgba(238,244,239,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,244,239,.06) 1px, transparent 1px);
  background-size: 190px 190px, 190px 190px, 38px 38px, 38px 38px;
}
.studio { background-color: #24503f; }
.studio-top, .studio-ctl, .studio-actions { background-color: rgba(23, 52, 41, .94); }
.dock { box-shadow: 0 -1px 0 rgba(238,244,239,.25); }
.dock h1 { letter-spacing: -.02em; }
.form { gap: 8px; }
.fld input { height: 40px; }
.fld > span, .qrstyle > span { font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.meter { margin: 0; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; padding-left: 10px; border-left: 3px solid var(--line); }
.meter[data-level="ok"] { border-left-color: #6fd39a; }
.meter[data-level="warn"] { border-left-color: #f3d34a; color: var(--paper); }
.meter[data-level="bad"] { border-left-color: #ff8a65; color: var(--paper); }
.btn.primary { font-weight: 700; }
.logo { background: var(--accent); color: var(--on-accent); }
/* 재단 표시(크롭 마크) 느낌의 미리보기 */
#proof { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -10px rgba(0,0,0,.6); outline: 1px dashed rgba(238,244,239,.35); outline-offset: 9px; }
.bgs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; 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-size: 15px; letter-spacing: .01em; }
.guide code { line-height: 1.9; }
@media (max-width: 899px) { .dock { gap: 10px; padding-top: 14px; } .dock h1 { font-size: 24px; } .lede { font-size: 13.5px; } }
@media (min-width: 900px) { .dock h1 { font-size: 32px; } }

.namesplit { margin: 0; font-size: 12.5px; color: var(--dim); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.namesplit label { display: inline-flex; align-items: center; gap: 4px; }
.namesplit input { height: 30px; border-radius: var(--r); border: 1px solid var(--line); background: var(--field-bg); color: var(--paper); padding: 0 6px; font-size: 14px; width: 3.6em; }
.namesplit label + label input { width: 6.5em; }
.more > summary { cursor: pointer; font-size: 13px; color: var(--dim); min-height: 30px; display: flex; align-items: center; }
.more[open] > summary { color: var(--paper); }
.more .form { padding-top: 6px; }