@charset "utf-8"; /* ───────────────────────────────────────────────────────────── 판촉나라 디자인 시스템 v2 — panchoknara.com 2026-09-25 이 파일 하나가 1,000장의 디자인이다. 지금까지는 생성기 3개(make_site / make_qty_page / make_detail_page)가 **각자 인라인 CSS** 를 갖고 있었다. 그래서 회색이 3종(#6e6e76·#6b7280·#6a7180), 배경이 3종(#f7f7f9·#f4f5f7·#f6f7f9), 파랑이 2종(#1a6dd4·#1b57d6) 이었다. 눈에 확 띄진 않지만 페이지를 옮겨 다니면 "같은 회사가 아닌 것 같은" 느낌이 남고, 무엇보다 **색 하나 바꾸려면 1,000장을 다시 찍어야 했다.** 파일로 빼면 이 파일만 올리면 끝난다. ───────────────────────────────────────────────────────────── */ /* ═══ 1. 토큰 ═══════════════════════════════════════════════ */ :root{ /* ── 잉크: 순수 무채색이 아니라 아주 살짝 푸른 중성 그레이. 흰 종이 위에서 "차갑고 정밀한" 인상을 만든다. 순수 회색은 탁해 보인다. ── */ --ink-900:#0F1115; /* 제목·총액. 검정(#000)은 쓰지 않는다 — 화면에서 너무 딱딱하다 */ --ink-700:#2B303B; /* 본문 */ --ink-500:#5B6472; /* 보조 설명 */ --ink-400:#8A93A3; /* 라벨·캡션. 이보다 연하면 접근성 대비가 깨진다 */ --ink-200:#E3E7ED; /* 구분선 */ --ink-100:#EEF1F5; /* 채움(이미지 바탕·비활성) */ /* ── 배경 ── */ --bg:#F4F6F8; --surface:#FFFFFF; /* ── 액션: 딱 하나만 쓴다 ── B2B 신뢰의 핵심은 "색을 아끼는 것"이다. 색이 여러 개면 광고 배너처럼 보인다. 파랑은 **누를 수 있는 것**에만 쓴다. 총액 숫자에는 쓰지 않는다 — 숫자는 링크가 아니다. */ --accent:#1F5AE0; --accent-ink:#153F9E; /* 파란 배경 위 글씨 대비용 */ --accent-wash:#F3F6FE; /* 선택된 행 배경 */ /* ── 구조 강조: 딥 네이비. 히어로처럼 "덩어리"에 쓴다 ── */ --navy:#101A2E; --navy-sub:#98A2B8; /* 네이비 위 보조 글씨 */ /* ── 상태: 채도를 낮춘다. 원색 빨강·초록은 즉시 싼티가 난다 ── */ --pos:#0E7C5A; /* 절약·가능 */ --neg:#C0392F; /* 불가·경고 */ /* ── 간격: 4의 배수만 쓴다. 중간값을 즉흥으로 만들지 않는다 ── */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; /* ── 모서리: 4단계만. 한 화면에 8종이 섞이면 그게 "투박함"의 정체다 ── */ --r-chip:8px; /* 칩·배지 */ --r-ctl:12px; /* 버튼·입력·이미지 */ --r-card:16px; /* 카드 */ --r-hero:20px; /* 히어로 */ /* ── 그림자: 2단계만. 테두리와 그림자를 같이 쓰지 않는다 ── 기존 값(0 6px 18px rgba(0,0,0,.04))은 너무 옅어서 카드가 떠 보이지 않고 그냥 흰 덩어리로 보였다. 가까운 그림자 + 먼 그림자 2겹이 정석이다. */ --sh-1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); --sh-2:0 4px 8px -2px rgba(16,24,40,.04), 0 16px 32px -8px rgba(16,24,40,.10); /* ── 타이포 ── */ --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont, "Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif; --lh-body:1.72; /* 한글 본문은 1.7 아래로 내려가면 빽빽해 보인다 */ --lh-tight:1.35; --ls-body:-0.01em; --ls-head:-0.028em; /* Pretendard 는 이미 촘촘하다. -0.04em 넘기면 글자가 뭉친다 */ } /* ═══ 2. 리셋 · 기본 ═══════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink-700); font-family:var(--font); font-size:15.5px; line-height:var(--lh-body); /* ★ body 에 건다. p 에만 걸면 li·td·div 가 normal(1.2)로 샌다 */ letter-spacing:var(--ls-body); word-break:keep-all; /* 한글 단어 중간에서 안 끊기게 */ overflow-wrap:anywhere; /* 그래도 긴 URL·상품코드는 넘치지 않게 */ -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; /* ★ 숫자 폭 고정. 단가표 자릿수가 어긋나면 즉시 싼티 */ font-feature-settings:"tnum" 1; } img{max-width:100%;display:block} a{color:var(--accent);text-decoration:none} b,strong{font-weight:700;color:var(--ink-900)} /* ═══ 3. 타이포 스케일 ══════════════════════════════════════ */ .pn-display{ /* 총액 — 페이지에서 가장 큰 것은 언제나 금액이다 */ font-size:36px; font-weight:800; line-height:1.08; letter-spacing:-0.035em; color:var(--ink-900); } h1,.pn-h1{font-size:25px;font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-head);color:var(--ink-900);margin:0 0 var(--s3)} h2,.pn-h2{font-size:18px;font-weight:700;line-height:1.42;letter-spacing:-0.022em;color:var(--ink-900);margin:var(--s7) 0 var(--s3)} h3,.pn-h3{font-size:15.5px;font-weight:700;line-height:1.5;letter-spacing:-0.018em;color:var(--ink-900);margin:0 0 var(--s2)} p{margin:0 0 var(--s3)} .pn-lead{color:var(--ink-500);font-size:14.5px} .pn-small{font-size:13px;line-height:1.62;color:var(--ink-500)} .pn-label{ /* 카드 위 작은 라벨. 한글이라 대문자 변환은 안 쓴다 */ font-size:11.5px; font-weight:600; letter-spacing:0.02em; color:var(--ink-400); line-height:1.5; } .pn-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* ═══ 4. 레이아웃 ══════════════════════════════════════════ */ .pn-wrap{max-width:760px;margin:0 auto;padding:var(--s6) var(--s4) var(--s9)} body.pn-hasbar{padding-bottom:84px} .pn-card{ background:var(--surface); border-radius:var(--r-card); padding:var(--s5); margin:0 0 var(--s3); box-shadow:var(--sh-1); /* 테두리 없음. 그림자만 */ } .pn-card--flush{padding:var(--s2) var(--s5)} /* ── 히어로 그리드 ── 모바일은 1열, 720px 이상에서 이미지를 왼쪽에 고정하고 오른쪽에 정보를 쌓는다. 영역 이름을 쓰면 **HTML 순서를 안 바꾸고** 데스크톱 배치만 갈아끼울 수 있다. */ .pn-hero{ display:grid; gap:var(--s4); grid-template-areas:"img" "price" "spec" "cta"; background:var(--navy); color:#fff; border-radius:var(--r-hero); padding:var(--s5); box-shadow:var(--sh-2); } .pn-hero__img{grid-area:img} .pn-hero__price{grid-area:price} .pn-hero__spec{grid-area:spec} .pn-hero__cta{grid-area:cta} /* 모바일에서 이미지를 정사각으로 두면 430px 화면을 390px 먹어서 **총액이 화면 밖으로 밀린다.** 히어로의 핵심이 첫 화면에 없으면 이 페이지는 실패다. 폰에서 사진은 "이 물건 맞나" 확인용이므로 168px 띠로 충분하다. 데스크톱에서만 정사각 열이 된다. */ .pn-hero__img{height:168px} .pn-hero__img .pn-thumb{height:100%;aspect-ratio:auto} @media(min-width:720px){ .pn-hero{ grid-template-columns:260px minmax(0,1fr); grid-template-areas:"img price" "img spec" "img cta"; align-content:start; padding:var(--s6); column-gap:var(--s6); } .pn-hero__img{align-self:start;height:auto} .pn-hero__img .pn-thumb{height:auto;aspect-ratio:1/1} } .pn-hero .pn-display{color:#fff} .pn-hero .pn-label{color:var(--navy-sub)} /* ── 상품 이미지: 제각각인 원본을 한 규격으로 ── 몰 사진은 배경색·비율·여백이 전부 다르다. 그대로 쓰면 "긁어온 것"처럼 보인다. 정사각 틀 + contain + 같은 바탕색 + 안쪽 여백 = 촬영한 것처럼 정돈된다. */ .pn-thumb{ aspect-ratio:1/1; width:100%; background:var(--ink-100); border-radius:var(--r-ctl); object-fit:contain; padding:var(--s3); mix-blend-mode:multiply; /* 흰 배경 사진의 흰 테두리를 바탕에 녹인다 */ } .pn-hero .pn-thumb{background:#fff;mix-blend-mode:normal} .pn-thumb--sm{width:72px;height:72px;flex:none;padding:var(--s2)} /* ═══ 5. 버튼 ══════════════════════════════════════════════ */ .pn-btn{ display:flex; align-items:center; justify-content:center; gap:var(--s2); width:100%; min-height:54px; padding:0 var(--s4); border:0; border-radius:var(--r-ctl); cursor:pointer; font-family:inherit; font-size:16px; font-weight:700; letter-spacing:-0.02em; text-decoration:none; transition:filter .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color:transparent; } .pn-btn:active{filter:brightness(.94)} /* 모바일 주력이라 hover 가 아니라 active 에 건다 */ .pn-btn--primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(31,90,224,.28)} .pn-btn--onnavy{background:#fff;color:var(--navy);box-shadow:0 2px 10px rgba(0,0,0,.18)} .pn-btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)} .pn-btn--quiet{background:var(--surface);color:var(--ink-900);box-shadow:inset 0 0 0 1px var(--ink-200)} .pn-btn__sub{display:block;font-size:12px;font-weight:500;opacity:.72;letter-spacing:0} .pn-btns{display:grid;gap:var(--s2)} .pn-field{ width:100%; min-height:50px; padding:0 var(--s4); border-radius:var(--r-ctl); border:0; font-family:inherit; font-size:15.5px; background:rgba(255,255,255,.08); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); } .pn-field::placeholder{color:rgba(255,255,255,.42)} .pn-field:focus{outline:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)} /* ═══ 6. 표 — 수량별 단가표 ════════════════════════════════ 판촉물 페이지에서 담당자가 가장 오래 보는 곳이다. · 세로선 없음, 가로선만. 격자는 엑셀처럼 보인다 · 숫자는 오른쪽 정렬 + tabular-nums · 현재 구간 행만 강조. 강조가 여러 개면 강조가 아니다 · 모바일 가로 스크롤 금지 — 3열까지만 둔다 */ .pn-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px} .pn-table th,.pn-table td{padding:var(--s3) var(--s2);text-align:right;vertical-align:middle} .pn-table th:first-child,.pn-table td:first-child{text-align:left;padding-left:var(--s3)} .pn-table td:last-child,.pn-table th:last-child{padding-right:var(--s3)} .pn-table thead th{ font-size:11.5px;font-weight:600;letter-spacing:0.02em;color:var(--ink-400); padding-bottom:var(--s2);border-bottom:1px solid var(--ink-200);white-space:nowrap; } .pn-table tbody td{border-bottom:1px solid var(--ink-100);color:var(--ink-700)} .pn-table tbody tr:last-child td{border-bottom:0} .pn-table tbody td:last-child{font-weight:600;color:var(--ink-900)} .pn-table tbody tr.is-now td{background:var(--accent-wash);font-weight:700;color:var(--ink-900)} .pn-table tbody tr.is-now td:first-child{ box-shadow:inset 3px 0 0 var(--accent); border-radius:var(--r-chip) 0 0 var(--r-chip); } .pn-table tbody tr.is-now td:last-child{border-radius:0 var(--r-chip) var(--r-chip) 0} .pn-table__cap{margin:var(--s3) var(--s1) 0;font-size:12.5px;color:var(--ink-400);line-height:1.6} /* ── 넓은 표를 폰에서 펴기 (.pn-table--stack) ── 열이 4개를 넘으면 360px 에서 금액 칸이 화면 밖으로 나간다. 가로 스크롤로 넘기면 "핵심 숫자가 안 보이는 표"가 되고, 그건 없는 표와 같다. 그래서 620px 이하에서는 행 하나를 블록으로 펴고 `data-l` 을 이름표로 쓴다. (2026-09-24 수량 페이지에서 같은 문제를 이 방식으로 고쳤다) */ @media(max-width:620px){ .pn-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .pn-table--stack tbody tr{display:block;padding:var(--s3) 0;border-bottom:1px solid var(--ink-200)} .pn-table--stack tbody tr:last-child{border-bottom:0} .pn-table--stack tbody td{ display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3); padding:var(--s2) var(--s1);border:0;text-align:right; } .pn-table--stack tbody td::before{ content:attr(data-l);flex:1;min-width:0;text-align:left; font-size:13.5px;font-weight:500;color:var(--ink-500); font-variant-numeric:normal; } /* 첫 칸(수량)은 그 묶음의 제목이 된다 */ .pn-table--stack tbody td:first-child{ display:block;text-align:left;font-size:15px;font-weight:700;color:var(--ink-900); padding:0 var(--s1) var(--s2); } .pn-table--stack tbody td:first-child::before{content:none} .pn-table--stack tbody tr.is-now td{background:none} .pn-table--stack tbody tr.is-now{background:var(--accent-wash);border-radius:var(--r-chip);padding:var(--s3) var(--s2)} } /* 사양표 — 2열 정의형 */ .pn-spec{width:100%;border-collapse:separate;border-spacing:0;font-size:14px} .pn-spec th{ width:96px;text-align:left;font-weight:500;color:var(--ink-400); padding:var(--s3) 0;vertical-align:top;white-space:nowrap; } .pn-spec td{padding:var(--s3) 0;color:var(--ink-700)} .pn-spec tr+tr th,.pn-spec tr+tr td{border-top:1px solid var(--ink-100)} /* ═══ 7. 부품 ══════════════════════════════════════════════ */ .pn-chip{ display:inline-flex;align-items:center;gap:var(--s1); padding:6px 10px;border-radius:var(--r-chip); font-size:12.5px;font-weight:600;letter-spacing:-0.01em; background:var(--ink-100);color:var(--ink-500); } .pn-hero .pn-chip{background:rgba(255,255,255,.10);color:#D4DBE9} .pn-chips{display:flex;flex-wrap:wrap;gap:var(--s2)} /* 수량 선택 */ .pn-seg{display:flex;flex-wrap:wrap;gap:var(--s2)} .pn-seg a,.pn-seg span{ display:inline-flex;align-items:center;justify-content:center; min-width:64px;min-height:44px;padding:0 var(--s4); border-radius:var(--r-ctl);font-size:14.5px;font-weight:600; background:var(--surface);color:var(--ink-700); box-shadow:inset 0 0 0 1px var(--ink-200);text-decoration:none; } .pn-seg span{background:var(--ink-900);color:#fff;box-shadow:none} /* 알림 — 왼쪽 컬러바만. 배경 알약은 카드마다 반복되면 강조가 죽는다 */ .pn-note{ border-radius:0 var(--r-card) var(--r-card) 0; padding:var(--s4) var(--s5);margin:0 0 var(--s3); background:var(--surface);box-shadow:var(--sh-1); border-left:3px solid var(--accent); } .pn-note h3{color:var(--accent-ink)} .pn-note p:last-child{margin:0} .pn-note--pos{border-left-color:var(--pos)} .pn-note--pos h3{color:var(--pos)} .pn-note--neg{border-left-color:var(--neg)} .pn-note--neg h3{color:var(--neg)} /* 체크 목록 */ .pn-checks{list-style:none;margin:0;padding:0} .pn-checks li{ position:relative;padding:var(--s3) 0 var(--s3) 26px;font-size:14.5px; border-bottom:1px solid var(--ink-100); } .pn-checks li:last-child{border-bottom:0;padding-bottom:0} .pn-checks li::before{ content:"";position:absolute;left:0;top:calc(var(--s3) + 7px); width:14px;height:8px;border-left:2px solid var(--pos);border-bottom:2px solid var(--pos); transform:rotate(-45deg);border-radius:1px; } .pn-checks li.is-no::before{ width:12px;height:12px;border:0;top:calc(var(--s3) + 5px); background: linear-gradient(var(--neg),var(--neg)) center/12px 2px no-repeat, linear-gradient(var(--neg),var(--neg)) center/2px 12px no-repeat; transform:rotate(45deg); } /* 목록 행 */ .pn-row{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--ink-100)} .pn-row:last-child{border-bottom:0} .pn-row__bd{min-width:0;flex:1} .pn-row__nm{display:block;font-size:14px;font-weight:600;color:var(--ink-900);line-height:1.45;letter-spacing:-0.015em} .pn-row__sub{font-size:12.5px;color:var(--ink-400);margin-top:3px} /* ── 문의글 만들기 ── 전화를 싫어하는 담당자를 위한 두 번째 길. 자동 전송은 하지 않는다(자동등록방지 우회 · 솔루션사 시스템). 대신 **글을 대신 써 준다.** */ .pn-ask{display:grid;gap:var(--s3)} .pn-ask__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)} @media(max-width:400px){.pn-ask__grid{grid-template-columns:1fr}} .pn-in{ width:100%;min-height:48px;padding:0 var(--s3); border:0;border-radius:var(--r-ctl);font-family:inherit;font-size:15px; background:var(--surface);color:var(--ink-900); box-shadow:inset 0 0 0 1px var(--ink-200); } .pn-in::placeholder{color:var(--ink-400)} .pn-in:focus{outline:0;box-shadow:inset 0 0 0 2px var(--accent)} select.pn-in{appearance:none;-webkit-appearance:none;padding-right:34px; background-image:linear-gradient(45deg,transparent 50%,var(--ink-400) 50%), linear-gradient(135deg,var(--ink-400) 50%,transparent 50%); background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px; background-size:5px 5px,5px 5px;background-repeat:no-repeat} .pn-in__lb{display:block;font-size:12.5px;font-weight:600;color:var(--ink-500);margin:0 0 5px} .pn-ask__out{ background:var(--ink-100);border-radius:var(--r-ctl);padding:var(--s4); font-size:12.5px;line-height:1.8;white-space:pre-wrap;color:var(--ink-700); max-height:260px;overflow-y:auto; font-family:inherit; /* 고정폭이면 한글이 벌어진다. 붙여넣을 곳도 일반 폰트다 */ } .pn-steps{counter-reset:st;margin:var(--s3) 0 0;padding:0;list-style:none} .pn-steps li{ counter-increment:st;position:relative;padding:0 0 0 26px; font-size:13.5px;line-height:1.66;color:var(--ink-500);margin:0 0 6px; } .pn-steps li::before{ content:counter(st);position:absolute;left:0;top:3px; width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff; font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center; font-variant-numeric:normal; } /* 복붙 블록 */ .pn-pre{ background:var(--ink-100);border-radius:var(--r-ctl);padding:var(--s4); font-size:12.5px;line-height:1.8;overflow-x:auto;white-space:pre;margin:0 0 var(--s2); font-family:ui-monospace,SFMono-Regular,Menlo,"D2Coding",monospace;color:var(--ink-700); } /* 하단 고정 바 */ .pn-bar{ position:fixed;left:0;right:0;bottom:0;z-index:50; background:rgba(255,255,255,.88); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); border-top:1px solid var(--ink-200); padding:var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom)); } .pn-bar__in{max-width:760px;margin:0 auto;display:flex;gap:var(--s3);align-items:center} .pn-bar__t{flex:1;min-width:0;font-size:12.5px;line-height:1.45;color:var(--ink-400)} .pn-bar__t b{display:block;color:var(--ink-900);font-size:14px} .pn-bar .pn-btn{width:auto;flex:none;min-height:46px;font-size:15px} footer{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--ink-200); font-size:12.5px;line-height:1.75;color:var(--ink-400)} /* ═══ 8. 작은 화면 보정 ════════════════════════════════════ */ @media(max-width:380px){ .pn-display{font-size:31px} h1,.pn-h1{font-size:22.5px} .pn-seg a,.pn-seg span{min-width:56px;padding:0 var(--s3)} } /* ═══ 9. 인쇄(견적서) ══════════════════════════════════════ 화면에서는 숨고 인쇄에서만 나온다. 라이브러리 0KB — 브라우저의 「PDF로 저장」이 곧 다운로드다. ★ 순서 주의: display:none 을 @media print 뒤에 두면 같은 특이성이라 뒤가 이겨서 인쇄해도 견적서가 안 나온다. 반드시 먼저 선언한다. */ #sheet{display:none} @media print{ /* ★ `padding:0` 만으로는 안 된다 — 상세 페이지가 자기