/* 네판인쇄소 — 동네 인쇄소 디자인 샘플 (디코랩)
   구성: 페이지 = 인쇄 교정지. 섹션마다 흰 종이 한 장 + 재단 표시·정합 십자·색 막대·슬러그,
   화면에 들어오면 그림의 C→M→Y→K 판이 한 장씩 맞춰 찍힌다. 메뉴 = 색 막대 칸. */

:root {
  /* 색 — 인쇄 현장의 사물 이름 */
  --color-table: #E4E5E1;        /* 작업대(라이트 테이블) — 페이지 바탕 */
  --color-proof: #FFFFFF;        /* 교정 용지 */
  --color-k: #1F1E23;            /* 먹(K) — 글자·선 */
  --color-k-soft: #55545B;       /* 먹 70% — 보조 글자 (흰 종이 7.4:1) */
  --color-k-faint: #6A6970;      /* 슬러그 글자 (흰 종이 5.3:1) */
  --color-rule: #C9CBC6;         /* 연필 선 */
  --color-magenta: #D6008A;      /* 마젠타 판 — 주 버튼만 (흰 글자 4.97:1) */
  --color-magenta-press: #B00072;
  --color-redpen: #E1251B;       /* 교정 빨강 펜 */
  --color-safe: #0077B6;         /* 안전선 파랑 */
  /* 프로세스 잉크 — 판 그림·색 막대에만 */
  --ink-c: #00A0E4;
  --ink-m: #E4007F;
  --ink-y: #FFE500;
  --ink-k: #1F1E23;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-pen: "Gaegu", var(--font);

  --fs-h1: clamp(2rem, 1.25rem + 3vw, 3.4rem);
  --fs-h2: clamp(1.55rem, 1.15rem + 1.6vw, 2.35rem);
  --fs-h3: 1.14rem;
  --fs-small: .875rem;

  --header-h: 56px;
  --px: 16px;          /* 교정지 밖 좌우 여백 (재단 표시 자리) */
  --pt: 30px;
  --pb: 38px;
  --pad: 20px;         /* 종이 안쪽 여백 */
  --cm-off: 13px;      /* 재단 표시가 재단선에서 떨어진 거리 */
  --cm-len: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--header-h) + 54px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-k);
  background: var(--color-table);
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
  padding-bottom: calc(62px + env(safe-area-inset-bottom));
}
h1, h2, h3 { margin: 0; line-height: 1.28; letter-spacing: -.03em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { max-width: 100%; }
button, input { font: inherit; color: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-k); color: #fff; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--ink-c); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 실제 정보 자리 */
.ph { display: inline-block; padding: 0 .4em; border: 1.5px dashed currentColor; opacity: .8; font-size: .92em; line-height: 1.5; }

/* 샘플 안내 띠 */
.sample-banner { background: var(--color-k); color: #E9E9EC; font-size: 13px; line-height: 1.6; }
.sample-banner__inner { display: flex; gap: 10px; align-items: baseline; max-width: 1440px; margin: 0 auto; padding: 8px 16px; }
.sample-banner__tag { flex: none; padding: 1px 8px; background: var(--ink-y); color: var(--color-k); font-weight: 800; font-size: .76rem; }
.sample-banner a { color: var(--ink-y); font-weight: 600; }

/* 버튼 — 마젠타 판은 연락(전환)에만 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px;
  border: 2px solid var(--color-k); background: #fff; color: var(--color-k);
  font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: background-color .18s, color .18s, transform .18s;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn--ink { background: var(--color-magenta); border-color: var(--color-magenta); color: #fff; }
.btn--ink:hover { background: var(--color-magenta-press); border-color: var(--color-magenta-press); }
.btn--line:hover { background: var(--color-k); color: #fff; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: .94rem; }

/* 머리글 — backdrop-filter·transform 없음 */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--color-proof); border-bottom: 1px solid var(--color-k); }
.site-header__inner { display: flex; align-items: center; gap: 10px; height: var(--header-h); max-width: 1440px; margin: 0 auto; padding: 0 16px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; }
.logo svg { width: 34px; height: 34px; flex: none; }
.logo b { font-size: 1.16rem; font-weight: 800; letter-spacing: -.03em; }
.rush-status { display: none; }
.header-tel { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--color-k); text-decoration: none; }
.header-tel svg { width: 20px; height: 20px; }
.header-tel__num { display: none; }
.header-cta { min-height: 44px; padding: 0 14px; }

/* 레이아웃: 왼쪽 색 막대 + 교정지 */
.layout { max-width: 1440px; margin: 0 auto; }

/* 색 막대 메뉴 — 모바일: 머리글 아래 가로 띠 */
.colorbar { position: sticky; top: var(--header-h); z-index: 50; background: var(--color-proof); border-bottom: 1px solid var(--color-k); }
.colorbar ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.colorbar li + li { border-left: 1px solid var(--color-proof); }
.colorbar a { display: flex; flex-direction: column; align-items: stretch; text-decoration: none; padding-bottom: 3px; }
.colorbar__patch { position: relative; display: grid; place-items: center; height: 24px; background: var(--patch); color: var(--patch-ink); font-weight: 800; font-size: .82rem; font-variant-numeric: tabular-nums; }
.colorbar__circle { position: absolute; inset: -2px 3px; width: calc(100% - 6px); height: calc(100% + 4px); overflow: visible; pointer-events: none; }
.colorbar__circle path { stroke: var(--color-redpen); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .45s ease-out; }
.colorbar a.is-active .colorbar__circle path { stroke-dashoffset: 0; }
.colorbar__label { display: block; text-align: center; font-size: 12px; line-height: 1.5; font-weight: 600; color: var(--color-k-soft); padding-top: 2px; }
.colorbar__more { display: none; }
.colorbar a.is-active .colorbar__label { color: var(--color-redpen); font-weight: 800; }
.colorbar__legend { display: none; }

/* 교정지 한 장 */
.proof { position: relative; padding: var(--pt) var(--px) var(--pb); }
.sheet { position: relative; background: var(--color-proof); padding: var(--pad); }
/* 재단 표시(크롭 마크) — 종이 모서리 바깥 여백에 */
.sheet::before {
  content: ""; position: absolute; inset: calc(-1 * var(--cm-off)); pointer-events: none;
  --l: linear-gradient(var(--color-k), var(--color-k));
  background:
    var(--l) left 0 top var(--cm-off) / var(--cm-len) 1px no-repeat,
    var(--l) left var(--cm-off) top 0 / 1px var(--cm-len) no-repeat,
    var(--l) right 0 top var(--cm-off) / var(--cm-len) 1px no-repeat,
    var(--l) right var(--cm-off) top 0 / 1px var(--cm-len) no-repeat,
    var(--l) left 0 bottom var(--cm-off) / var(--cm-len) 1px no-repeat,
    var(--l) left var(--cm-off) bottom 0 / 1px var(--cm-len) no-repeat,
    var(--l) right 0 bottom var(--cm-off) / var(--cm-len) 1px no-repeat,
    var(--l) right var(--cm-off) bottom 0 / 1px var(--cm-len) no-repeat;
}
/* 도련 안내선 (재단선 밖 3mm) */
.sheet::after { content: ""; position: absolute; inset: -6px; border: 1px dashed rgba(225, 37, 27, .38); pointer-events: none; z-index: 3; }

/* 슬러그 줄·정합 십자·색 막대 (종이 밖) */
.slug { position: absolute; left: calc(var(--px) + 18px); right: var(--px); bottom: 10px; display: flex; gap: 10px; align-items: center; font-size: 10.5px; line-height: 1; color: var(--color-k-faint); white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.slug__file { display: none; }
.inks { display: inline-flex; gap: 2px; }
.ink { display: inline-grid; place-items: center; width: 15px; height: 13px; font-style: normal; font-size: 9px; font-weight: 800; border: 1px solid transparent; transition: background-color .2s, color .2s, border-color .2s; }
.ink-c { background: var(--ink-c); color: var(--color-k); }
.ink-m { background: var(--ink-m); color: #fff; }
.ink-y { background: var(--ink-y); color: var(--color-k); }
.ink-k { background: var(--ink-k); color: #fff; }
.marks { position: absolute; inset: 0; pointer-events: none; }
.reg { position: absolute; width: 14px; height: 14px; }
.reg--t, .reg--b { display: none; }
.reg--l { left: 1px; top: 50%; margin-top: -7px; }
.reg--r { right: 1px; top: 50%; margin-top: -7px; }
.cbar {
  position: absolute; top: 9px; left: calc(var(--px) + 18px); width: min(240px, 52%); height: 10px;
  background: linear-gradient(90deg,
    #00A0E4 0 8.33%, #E4007F 8.33% 16.66%, #FFE500 16.66% 25%, #1F1E23 25% 33.33%,
    #80CFF1 33.33% 41.66%, #F180BF 41.66% 50%, #FFF280 50% 58.33%, #8F8E91 58.33% 66.66%,
    #2E3192 66.66% 75%, #E6231E 75% 83.33%, #00A651 83.33% 91.66%, #3B3A3A 91.66% 100%);
}

/* 섹션 머리 */
.sheet__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.patch { flex: none; position: relative; width: 46px; height: 46px; background: #fff; outline: 1px solid var(--color-rule); }
.patch svg { display: block; width: 100%; height: 100%; }
.patch b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.2rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
#items .patch b, #file .patch b, #faq .patch b { color: var(--color-k); }
.kicker { font-size: .9rem; font-weight: 700; color: var(--color-k-soft); margin-bottom: 4px; }
.sheet h2 { font-size: var(--fs-h2); font-weight: 800; }
.sheet h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.02em; }
.sheet__lead { max-width: 40em; color: var(--color-k-soft); margin-bottom: 8px; }

/* 판 그림 */
.plates { display: block; width: 100%; height: auto; overflow: visible; isolation: isolate; }
.pl { mix-blend-mode: multiply; }
.pl-c { --mx: -9px; --my: 4px; }
.pl-m { --mx: 8px; --my: -6px; }
.pl-y { --mx: -4px; --my: -9px; }
.pl-k { --mx: 6px; --my: 7px; }
.art-t { font-family: var(--font); fill: var(--color-k); letter-spacing: -.02em; }
.art-t--xl { font-size: 30px; font-weight: 800; }
.art-t--l { font-size: 24px; font-weight: 800; }
.art-t--m { font-size: 17px; font-weight: 700; }
.art-t--s { font-size: 14px; font-weight: 700; }
.art-t--xs { font-size: 12px; font-weight: 600; }
.art-t--inv { fill: #fff; }
.labels text { font-family: var(--font); font-size: 13px; font-weight: 700; fill: var(--color-k); }
.labels .labels__sub { font-size: 11.5px; font-weight: 500; fill: var(--color-k-faint); }

/* 대표 모션: 화면에 들어오면 C→M→Y→K 판이 어긋난 자리에서 맞춰 찍힘 (한 번).
   보이는 상태가 기본 — has-motion 일 때만 찍히기 전 상태로 숨긴다 */
.printable .pl { transition: opacity .2s ease-out, transform .5s cubic-bezier(.2, .9, .25, 1); }
.printable .pl-m, .printable .ink-m { transition-delay: .28s; }
.printable .pl-y, .printable .ink-y { transition-delay: .56s; }
.printable .pl-k, .printable .ink-k { transition-delay: .84s; }
.has-motion .printable:not(.is-printed) .pl { opacity: 0; transform: translate(var(--mx), var(--my)); }
.has-motion .printable:not(.is-printed) .ink { background: transparent; color: #A3A4A8; border-color: #BFC1BC; }
.ghost { text-shadow: 0 0 0 rgba(0, 160, 228, 0), 0 0 0 rgba(228, 0, 127, 0), 0 0 0 rgba(255, 229, 0, 0); transition: text-shadow .9s cubic-bezier(.2, .8, .2, 1) .25s; }
.has-motion .printable:not(.is-printed) .ghost { text-shadow: -5px -2px 0 rgba(0, 160, 228, .55), 5px 1px 0 rgba(228, 0, 127, .45), 1px 5px 0 rgba(255, 229, 0, .8); }

/* 빨간 펜 교정 메모 */
.redpen { display: inline-block; font-family: var(--font-pen); font-weight: 700; color: var(--color-redpen); font-size: 1.32rem; line-height: 1.15; transform: rotate(var(--rot, -2deg)); letter-spacing: 0; }

/* ---------- 표지(히어로) ---------- */
.proof--hero .sheet { display: grid; gap: 22px; }
.hero__tag { display: inline-block; border: 1.5px solid var(--color-k); padding: 3px 10px; font-size: .9rem; line-height: 1.5; margin-bottom: 14px; }
.hero__tag b { color: var(--color-k); background: linear-gradient(transparent 58%, rgba(255, 229, 0, .9) 58%); }
.proof--hero h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.hero__lead { margin-top: 12px; color: var(--color-k-soft); font-size: 1.02rem; max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero__facts { margin: 22px 0 0; display: grid; gap: 0; border-top: 1px dashed var(--color-rule); }
.hero__facts div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--color-rule); font-size: .94rem; }
.hero__facts dt { color: var(--color-k-faint); font-weight: 600; }
.hero__facts dd { margin: 0; font-weight: 600; }

.art--bleed { position: relative; background: #EAF6FC; margin: 0 calc(-1 * var(--pad) - 6px) calc(-1 * var(--pad) - 6px); padding: 30px 16px 24px; }
.hero__art .plates { max-width: 520px; margin: 0 auto; }
.okbox { position: absolute; left: 14px; bottom: 14px; background: #fff; border: 1.5px solid var(--color-k); padding: 6px 10px 7px; font-size: 11.5px; line-height: 1.7; }
.okbox__title { font-weight: 800; border-bottom: 1px solid var(--color-k); margin-bottom: 3px; }
.okbox p { display: flex; align-items: center; gap: 6px; }
.okbox__check { position: relative; width: 11px; height: 11px; border: 1px solid var(--color-k); }
.okbox__check.is-on::after { content: ""; position: absolute; left: 2px; top: -6px; width: 6px; height: 13px; border: solid var(--color-redpen); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.redpen--hero { position: absolute; right: 14px; top: 10px; font-size: 1.25rem; text-align: right; }

/* ---------- 1. 품목 ---------- */
.art--lineup { margin: 18px 0 10px; padding: 18px 0 4px; border-top: 1px dashed var(--color-rule); border-bottom: 1px dashed var(--color-rule); }
.art--lineup .plates { overflow: hidden; }
.table-wrap { margin-top: 18px; }
.spec { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.spec thead { display: none; }
.spec tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--color-rule); }
.spec tbody tr:first-child { border-top: 2px solid var(--color-k); }
.spec th[scope="row"] { grid-column: 1 / -1; text-align: left; font-size: 1.1rem; font-weight: 800; }
.spec td { padding: 0; }
.spec td::before { content: attr(data-th); display: block; font-size: 12px; color: var(--color-k-faint); font-weight: 600; }
.spec small { color: var(--color-k-faint); }
.items__more { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; margin-top: 16px; font-size: .95rem; }
.items__more b { margin-right: 8px; }

/* ---------- 2. 견적 가늠 ---------- */
.quote { display: grid; gap: 22px; margin-top: 18px; }
.opt { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.opt legend { padding: 0; font-weight: 800; font-size: .95rem; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { position: relative; }
.chips input, .finish input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; border: 1.5px solid var(--color-k); background: #fff; font-weight: 600; font-size: .95rem; cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color .15s, color .15s; }
.chips input:checked + span { background: var(--color-k); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--ink-c); outline-offset: 2px; }
.chips input:disabled + span { opacity: .38; cursor: not-allowed; border-style: dashed; }
.chips--item span { min-width: 72px; justify-content: center; font-size: 1rem; font-weight: 800; }
.finish { display: grid; gap: 8px; }
.finish__row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.finish__name { min-width: 3.4em; font-size: .9rem; font-weight: 700; color: var(--color-k-soft); }
.opt__note { margin-top: 6px; font-size: .88rem; color: var(--color-k-soft); }
.opt__note.is-warn { color: var(--color-redpen); font-weight: 600; }

.quote__view, .quote__after { min-width: 0; }
.quote__view { order: -1; }
.qsum { margin-bottom: 4px; padding: 10px 12px; background: var(--color-k); color: #fff; font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.qsum b { font-size: 1.15rem; }
.qv {
  position: relative; border: 1px solid var(--color-rule);
  background-color: #F3F4F0;
  background-image: linear-gradient(rgba(31, 30, 35, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 30, 35, .07) 1px, transparent 1px);
  background-size: 21px 21px;
}
.qv__svg { aspect-ratio: 600 / 360; }
.qv__stamp { position: absolute; top: 12px; right: 14px; border: 3px solid var(--color-redpen); color: var(--color-redpen); font-weight: 800; padding: 0 10px; font-size: 1.05rem; transform: rotate(-8deg); background: rgba(255, 255, 255, .7); }
.qv__scale { position: absolute; left: 10px; top: 6px; font-size: 11.5px; color: var(--color-k-soft); background: rgba(243, 244, 240, .9); padding: 0 4px; }
.qv .ghostref { fill: none; stroke: var(--color-k-faint); stroke-width: 1.2; stroke-dasharray: 5 4; }
.qv .ghostlabel { font-family: var(--font); font-size: 12px; fill: var(--color-k-faint); font-weight: 600; }
.qv .dim { font-family: var(--font); font-size: 13px; fill: var(--color-k); font-weight: 700; }
.qv .stack { fill: #fff; stroke: #B5B7B2; }
.qv .person { fill: #8F8E91; }

.qres { margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--color-k); }
.qres > div { padding: 10px 0; border-bottom: 1px solid var(--color-rule); }
.qres > div + div { padding-left: 12px; border-left: 1px solid var(--color-rule); }
.qres .qres__price { grid-column: 1 / -1; padding-left: 0; border-left: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qres .qres__price + div { padding-left: 0; border-left: 0; }
.qres dt { font-size: .82rem; font-weight: 700; color: var(--color-k-faint); }
.qres dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.qres__price dd { font-size: 1.05rem; }
.qres__price b { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; }
.qres small { font-size: .78rem; color: var(--color-k-faint); font-weight: 600; }
.qres__memo { margin-top: 8px; font-size: .88rem; color: var(--color-k-soft); }

.filecheck { margin-top: 18px; }
.filecheck h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; padding-bottom: 6px; border-bottom: 1px solid var(--color-k); }
.filecheck__count { font-size: .88rem; color: var(--color-k-soft); font-variant-numeric: tabular-nums; }
.filecheck ul { list-style: none; margin: 0; padding: 0; }
.filecheck li { border-bottom: 1px dashed var(--color-rule); }
.filecheck label { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; font-size: .93rem; cursor: pointer; }
.filecheck input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filecheck .box { position: relative; flex: none; width: 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--color-k); background: #fff; }
.filecheck input:checked + .box::after { content: ""; position: absolute; left: 5px; top: -5px; width: 7px; height: 16px; border: solid var(--color-redpen); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.filecheck input:focus-visible + .box { outline: 3px solid var(--ink-c); outline-offset: 2px; }
.filecheck input:checked ~ .txt { color: var(--color-k-faint); }

.ask { margin-top: 18px; padding: 14px; border: 1.5px dashed var(--color-k); background: #FAFAF7; }
.ask__label { font-size: .85rem; font-weight: 700; color: var(--color-k-soft); }
.ask__text { margin: 6px 0 12px; font-weight: 600; }
.ask__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ask__status { margin-top: 6px; font-size: .86rem; color: var(--color-k-soft); min-height: 1.4em; }
.redpen--quote { display: block; width: max-content; max-width: 100%; margin-top: 18px; }

/* ---------- 3. 파일 준비 ---------- */
.file { display: grid; gap: 22px; margin-top: 8px; }
.file__fig { margin: 0; position: relative; }
.art--file { background: #F3F4F0; padding: 10px; }
.file__notes { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .88rem; font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend__line { display: inline-block; width: 26px; border-top: 2px solid var(--color-k); }
.legend__line--bleed { border-top: 2px dashed var(--color-redpen); }
.legend__line--safe { border-top: 2px dotted var(--color-safe); }
.redpen--file1, .redpen--file2 { display: block; width: max-content; margin-top: 8px; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { position: relative; padding: 12px 0 12px 38px; border-bottom: 1px dashed var(--color-rule); }
.checks li:first-child { border-top: 2px solid var(--color-k); }
.checks li::before { content: ""; position: absolute; left: 0; top: 16px; width: 22px; height: 22px; border: 1.5px solid var(--color-k); background: #fff; }
.checks li::after { content: ""; position: absolute; left: 7px; top: 9px; width: 8px; height: 18px; border: solid var(--color-redpen); border-width: 0 3px 3px 0; transform: rotate(40deg); transition: opacity .2s; }
.checks li:nth-child(2)::after { transition-delay: .2s; }
.checks li:nth-child(3)::after { transition-delay: .4s; }
.checks li:nth-child(4)::after { transition-delay: .6s; }
.checks li:nth-child(5)::after { transition-delay: .8s; }
.has-motion .printable:not(.is-printed) .checks li::after { opacity: 0; }
.checks h3 { font-size: 1.06rem; }
.checks p { font-size: .95rem; color: var(--color-k-soft); margin-top: 2px; }
.send { display: grid; gap: 14px; margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--color-k); }
.send h3 { font-size: 1rem; margin-bottom: 4px; }
.send p { font-size: .95rem; color: var(--color-k-soft); }
.send a { color: var(--color-k); font-weight: 700; }

/* ---------- 4. 순서·시간 ---------- */
.day { margin: 14px 0 6px; }
.day__bar { position: relative; height: 14px; margin: 46px 0 48px; background: #EDEEEA; outline: 1px solid var(--color-rule); }
.day__fill { position: absolute; inset: 0; background: linear-gradient(90deg, #80CFF1 0 50%, #F7B3D6 50% 90%, #FFF280 90% 100%); }
.day__mark { position: absolute; left: var(--at); top: 100%; padding-top: 8px; font-size: 12px; line-height: 1.35; white-space: nowrap; transform: translateX(-50%); }
.day__mark::before { content: ""; position: absolute; left: 50%; top: -14px; height: 20px; border-left: 2px solid var(--color-k); }
.day__mark b { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.day__mark--open { transform: none; }
.day__mark--open::before { left: 0; }
.day__mark--close { transform: translateX(-100%); text-align: right; }
.day__mark--close::before { left: auto; right: 0; }
.day__mark--ship { top: auto; bottom: 100%; padding: 0 0 8px; transform: translateX(-100%); text-align: right; }
.day__mark--ship::before { top: auto; bottom: -14px; left: auto; right: 0; }
.day__mark--cut b { color: var(--color-redpen); }
.day__now { position: absolute; top: -8px; bottom: -8px; left: var(--at); border-left: 3px solid var(--color-redpen); }
.day__now span { position: absolute; bottom: 100%; left: -14px; font-family: var(--font-pen); font-weight: 700; color: var(--color-redpen); font-size: 1.05rem; white-space: nowrap; }
.day__note { font-size: .9rem; color: var(--color-k-soft); }
.process { display: grid; gap: 22px; margin-top: 18px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--color-rule); }
.steps li:first-child { border-top: 2px solid var(--color-k); }
.steps__no { display: grid; place-items: center; width: 34px; height: 34px; background: var(--color-k); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.steps p { font-size: .95rem; color: var(--color-k-soft); margin-top: 2px; }
.art--press { position: relative; align-self: start; background: #F3F4F0; padding: 18px 12px 12px; }
.art--press .plates { max-width: 360px; margin: 0 auto; }
.redpen--press { position: absolute; right: 12px; top: 8px; }

/* ---------- 5. 용지·후가공 ---------- */
.paper { display: grid; gap: 24px; margin-top: 10px; }
.art--fan { position: relative; background: #F3F4F0; padding: 14px; }
.art--fan .plates { max-width: 420px; margin: 0 auto; }
.redpen--fan { display: block; width: max-content; margin: 6px 0 0 auto; text-align: right; }
.paper__lists h3 { font-size: 1.05rem; padding-bottom: 6px; border-bottom: 2px solid var(--color-k); }
.paper__lists h3 + ul { margin-bottom: 22px; }
.swatches, .finishes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 22px; }
.swatches li, .finishes li { display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; padding: 10px 0; border-bottom: 1px dashed var(--color-rule); }
.swatches b, .finishes b { font-size: .98rem; }
.swatches li > span:last-child, .finishes li > span { grid-column: 2; font-size: .9rem; color: var(--color-k-soft); }
.swatch { grid-row: span 2; width: 44px; height: 32px; border: 1px solid #B5B7B2; }
.swatch--snow { background: linear-gradient(135deg, #fff 40%, #EEF0F2 50%, #fff 60%); }
.swatch--rdv { background: repeating-linear-gradient(100deg, #FDFBF6 0 2px, #F2EEE3 2px 3px); }
.swatch--nouveau { background: repeating-linear-gradient(30deg, #FBF8F0 0 3px, #EDE6D6 3px 4px, #FBF8F0 4px 7px); }
.swatch--art { background: linear-gradient(135deg, #fff 30%, #E3E6EA 48%, #fff 66%); }
.swatch--mojo { background: #F5F1E4; }
.swatch--yupo { background: linear-gradient(135deg, #F5F8FA 35%, #DCE5EC 50%, #F5F8FA 65%); }
.finishes svg { grid-row: span 2; width: 40px; height: 28px; }

/* ---------- 6. 자주 묻는 질문 ---------- */
.faq { display: grid; gap: 22px; margin-top: 8px; }
.faq__list { border-top: 2px solid var(--color-k); }
.qa { border-bottom: 1px solid var(--color-rule); }
.qa h3 { font-size: 1.04rem; }
.qa button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 0; background: none; border: 0; text-align: left; font-weight: 800; cursor: pointer; letter-spacing: -.02em; }
.qa button::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--color-k), var(--color-k)) center / 14px 2px no-repeat, linear-gradient(var(--color-k), var(--color-k)) center / 2px 14px no-repeat; transition: transform .2s; }
.qa button[aria-expanded="true"]::after { transform: rotate(45deg); }
.qa__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; }
.qa__panel > div { overflow: hidden; min-height: 0; }
.qa__panel p { padding: 0 0 16px; color: var(--color-k-soft); }
.js .qa__panel.is-closed { grid-template-rows: 0fr; }
.faq__side { display: grid; gap: 12px; justify-items: start; align-content: start; }
.faq__hours { font-size: .9rem; color: var(--color-k-soft); }

/* ---------- 7. 오시는 길 ---------- */
.loc { display: grid; gap: 22px; margin-top: 8px; }
.info { margin: 0; border-top: 2px solid var(--color-k); }
.info div { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--color-rule); }
.info dt { font-weight: 700; color: var(--color-k-faint); }
.info dd { margin: 0; font-weight: 600; }
.info a { font-weight: 800; }
.hours { width: 100%; margin-top: 18px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours caption { text-align: left; font-weight: 800; padding-bottom: 6px; }
.hours th, .hours td { text-align: left; padding: 9px 0; border-top: 1px solid var(--color-rule); vertical-align: top; }
.hours th { width: 7.5em; font-weight: 700; }
.hours small { display: block; color: var(--color-k-faint); }
.loc__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.art--map { background: #fff; border: 1px solid var(--color-rule); }

/* 푸터 */
.site-footer { background: var(--color-k); color: #D9D9DC; padding: 36px 16px 30px; font-size: .9rem; }
.site-footer__inner { max-width: 1440px; margin: 0 auto; display: grid; gap: 18px; }
.site-footer__logo { font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.site-footer__biz { line-height: 1.85; }
.site-footer a { color: #fff; }
.site-footer__links { display: flex; gap: 14px; margin-top: 10px; }
.site-footer__links .strong { font-weight: 800; }
.site-footer__credit { color: #B9B9BE; }

/* 하단 고정 연락 바 (모바일) */
.quickbar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.15fr 1.25fr; background: var(--color-proof); border-top: 1.5px solid var(--color-k); padding-bottom: env(safe-area-inset-bottom); }
.quickbar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 58px; text-decoration: none; font-weight: 800; font-size: .95rem; }
.quickbar a + a { border-left: 1px solid var(--color-rule); }
.quickbar svg { width: 20px; height: 20px; }
.quickbar__cta { background: var(--color-magenta); color: #fff; }

/* ---------- 태블릿 이상 ---------- */
@media (min-width: 640px) {
  :root { --px: 28px; --pt: 40px; --pb: 46px; --pad: 32px; --cm-off: 20px; --cm-len: 12px; }
  .slug { left: calc(var(--px) + 28px); bottom: 14px; font-size: 11px; gap: 14px; }
  .cbar { left: calc(var(--px) + 28px); top: 14px; height: 12px; }
  .reg { width: 18px; height: 18px; }
  .reg--l { left: 4px; margin-top: -9px; }
  .reg--r { right: 4px; margin-top: -9px; }
  .spec thead { display: table-header-group; }
  .spec tbody tr { display: table-row; }
  .spec tbody tr:first-child { border-top: 0; }
  .spec th, .spec td { padding: 12px 10px 12px 0; text-align: left; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
  .spec thead th { font-size: .82rem; color: var(--color-k-faint); font-weight: 700; border-bottom: 2px solid var(--color-k); }
  .spec td::before { display: none; }
  .spec th[scope="row"] { font-size: 1.05rem; }
  .send { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .swatches, .finishes { grid-template-columns: 1fr 1fr; }
  .qres { grid-template-columns: 1.1fr 1fr 1fr; }
  .qres .qres__price { grid-column: auto; display: block; }
  .qres .qres__price + div { padding-left: 12px; border-left: 1px solid var(--color-rule); }
}

/* ---------- 데스크톱: 왼쪽 세로 색 막대 ---------- */
@media (min-width: 1024px) {
  :root { --header-h: 64px; --px: 40px; --pt: 50px; --pb: 54px; --pad: clamp(34px, 3.4vw, 56px); --cm-off: 26px; --cm-len: 16px; }
  html { scroll-padding-top: calc(var(--header-h) + 8px); }
  body { padding-bottom: 0; font-size: 16.5px; }
  .site-header__inner { gap: 18px; padding: 0 28px; }
  .logo svg { width: 38px; height: 38px; }
  .logo b { font-size: 1.28rem; }
  .rush-status { display: flex; align-items: center; gap: 8px; margin-right: 6px; font-size: .86rem; font-weight: 600; color: var(--color-k-soft); }
  .rush-status__dot { width: 9px; height: 9px; border-radius: 50%; background: #9A9CA0; }
  .rush-status.is-open .rush-status__dot { background: #00A651; }
  .header-tel { width: auto; height: auto; border: 0; gap: 6px; display: inline-flex; align-items: center; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
  .header-tel__num { display: inline; }
  .header-cta { min-height: 44px; }

  .layout { display: grid; grid-template-columns: 148px minmax(0, 1fr); padding: 0 24px 0 14px; }
  .colorbar { position: sticky; top: calc(var(--header-h) + 50px); align-self: start; background: none; border: 0; padding: 0 0 20px 14px; }
  .colorbar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 64px; width: 6px; background: linear-gradient(#F2F2F2 0 10%, #D9D9DA 10% 20%, #BFBFC1 20% 30%, #A6A5A8 30% 40%, #8C8B8F 40% 50%, #737277 50% 60%, #59585E 60% 70%, #403F45 70% 80%, #2B2A30 80% 90%, #1F1E23 90%); }
  .colorbar ol { display: flex; flex-direction: column; gap: 8px; }
  .colorbar li + li { border: 0; }
  .colorbar a { flex-direction: row; align-items: center; gap: 12px; padding: 0; }
  .colorbar__patch { flex: none; width: 46px; height: 46px; font-size: 1.05rem; }
  .colorbar__circle { inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); }
  .colorbar__label { text-align: left; font-size: .9rem; color: var(--color-k); padding: 0; line-height: 1.3; }
  .colorbar__more { display: inline; }
  .colorbar a:hover .colorbar__label { text-decoration: underline; }
  .colorbar__legend { display: block; margin-top: 14px; font-size: 10.5px; line-height: 1.4; color: var(--color-k-faint); }

  .slug__file { display: inline; }
  .reg { width: 22px; height: 22px; }
  .reg--t, .reg--b { display: block; left: 50%; margin-left: -11px; }
  .reg--t { top: 13px; }
  .reg--b { bottom: 13px; }
  .reg--l { left: 9px; margin-top: -11px; }
  .reg--r { right: 9px; margin-top: -11px; }
  .cbar { top: 18px; width: 260px; }
  .slug { bottom: 18px; right: calc(50% + 24px); }

  .patch { width: 54px; height: 54px; }
  .sheet__head { gap: 18px; margin-bottom: 18px; }

  .proof--hero .sheet { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 34px; align-items: stretch; }
  .hero__copy { align-self: center; padding: 10px 0; }
  .proof--hero .art--bleed { margin: calc(-1 * var(--pad) - 6px) calc(-1 * var(--pad) - 6px) calc(-1 * var(--pad) - 6px) 0; padding: 60px 26px 30px; display: grid; align-items: center; }

  .quote { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 36px; align-items: start; }
  .quote { grid-template-areas: "form view" "form after"; row-gap: 0; }
  .quote__form { grid-area: form; }
  .quote__view { grid-area: view; order: 0; }
  .quote__after { grid-area: after; }
  .qsum { display: none; }
  .redpen--quote { position: absolute; right: var(--pad); top: calc(var(--pad) + 4px); margin: 0; }

  .file { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 40px; align-items: start; }


  .process { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 40px; align-items: start; }
  .steps { grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .steps li:nth-child(2) { border-top: 2px solid var(--color-k); }

  .paper { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
  .art--fan { position: sticky; top: calc(var(--header-h) + 20px); }

  .faq { grid-template-columns: minmax(0, 1.5fr) minmax(0, .6fr); gap: 40px; }
  .faq__side { padding-top: 14px; }

  .loc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .art--bleed-r { margin-right: calc(-1 * var(--pad) - 6px); border-right: 0; display: grid; align-items: center; }

  .quickbar { display: none; }
  .site-footer { padding: 44px 28px 40px; }
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: end; padding-left: 162px; }
}

@media (min-width: 1280px) {
  .hero__copy { padding-left: 6px; }
}

/* 동작 줄이기 — 판 이동·메뉴 동그라미 그리기는 끄고, 색·투명도 피드백은 둔다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .btn, .chips span, .qa__panel, .ink { transition-duration: .2s !important; }
}