/* ============================================================
   명함 손님 화면 꼴 — 8차 1판(2026-11-09) · 시안 3판(05_명함엔진_손님화면_시안/01_…_3판.html) 그대로
   변수 이름은 공통 h10-ui.css 1.3 과 같게, 값만 시안(채대리 ㉰) — 공통 2판이 나오면 :root 값만 바꿔 끼운다.
   공통에 없는 이름 셋(시안에만 있음): --c-line-2(칸·카드 테두리) · --c-primary-ink(단추 글자) · --btn-h
   포인트 색 = settings/손님화면.json 「옷.<브랜드>.포인트_색」(기본 #3D3D3D) — 화면이 --c-primary 에 넣는다.
   금지(8차 4): 단계 띠 · 파란 선 · 「준비 중」 · 설계 용어 · 「보이는 그대로 인쇄」 · 파주·동네·인쇄소 글자
   2차 ㉮(관문 20·21 · 채대리 11-09): 회색 글 #8A8A8A → #767676(흰 바탕 4.54:1 · 회색 바탕 위엔 안 씀) · 경고 글 #B9771A → #8A5A12(경고 바탕 5.5:1)
   · 작은 글 12px → 13px 이상 · 칩·작은 단추 보이는 높이 40 이상 · 누르는 자리는 44(겉 투명 여백 ::after)
   ============================================================ */
:root{
  --c-bg:#FFFFFF; --c-card:#FFFFFF; --c-line:#E6E6E6; --c-line-2:#D4D4D4;
  --c-text:#111111; --c-text-2:#555555; --c-text-3:#767676; --c-preview-bg:#F5F5F5;
  --c-primary:#3D3D3D; --c-primary-ink:#FFFFFF;
  --c-ok:#2E7D4F; --c-ok-bg:#EAF5EE; --c-warn:#8A5A12; --c-warn-bg:#FFF6E3;
  --f-sans:"Pretendard Variable",Pretendard,"Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
  --fs-title:22px; --fs-body:15px; --fs-small:13px;
  --r-ctl:8px; --r-card:8px; --ctl-h:50px; --btn-h:52px; --page-max:480px; --gutter:20px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--f-sans);font-size:var(--fs-body);line-height:1.5;letter-spacing:-0.01em;word-break:keep-all;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* 화면 한 장 = 머리(위 고정) · 몸 · 단추 줄(아래 고정) — 폰 꼴을 가운데 최대 480px */
.scr{max-width:var(--page-max);margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--c-bg)}
.bar{position:sticky;top:0;z-index:5;background:#fff;height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--gutter);border-bottom:1px solid var(--c-line);font-size:14px;flex:none}
.bar b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .nm{font-weight:500;color:var(--c-text-3)}
.bar .lk{color:var(--c-text-3);background:none;border:0;padding:0;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;white-space:nowrap;font-size:14px}
.body{padding:var(--gutter);flex:1}
.foot{position:sticky;bottom:0;z-index:5;border-top:1px solid var(--c-line);padding:12px 16px 16px;display:flex;gap:10px;align-items:center;background:#fff;flex:none}
.foot .sum{flex:1;font-size:13px;color:var(--c-text-3);min-width:0}
.foot .sum b{display:block;font-size:18px;color:var(--c-text);letter-spacing:-0.02em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding:0 22px;border-radius:var(--r-ctl);font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;text-align:center}
.btn-p{background:var(--c-primary);color:var(--c-primary-ink)}
.btn-g{background:#fff;color:var(--c-text);border-color:var(--c-line-2)}
.btn-w{width:100%}
.btn:disabled{opacity:.35;cursor:default}
h2{font-size:var(--fs-title);line-height:1.3;letter-spacing:-0.025em;font-weight:700;margin:0}
.h2s{font-size:20px;margin-top:20px}
.sub{color:var(--c-text-2);margin:6px 0 0;font-size:14px}

/* 입구 · 길 셋 */
.paths{margin-top:18px;display:grid;gap:10px}
.path{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--c-line-2);border-radius:var(--r-card);background:#fff;width:100%;text-align:left;cursor:pointer}
.path .th{flex:none;width:64px;height:64px;border-radius:14px;background:var(--c-primary);display:flex;align-items:center;justify-content:center;color:var(--c-primary-ink);overflow:hidden}   /* 9차: 아이콘 상자 64 진회색 채움·흰 아이콘(PC 88) */
.path .th img{width:100%;height:100%;object-fit:cover}
.path .th .ic{width:30px;height:30px}
.path .tx b{font-size:16px;display:block}
.path .tx small{display:block;color:var(--c-text-2);font-size:13px;margin-top:2px}
.path .chev{margin-left:auto;color:var(--c-text-3);font-size:18px}
.path .go{display:none}
.edit{margin-top:12px;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px dashed var(--c-line-2);border-radius:var(--r-card);font-size:13px;color:var(--c-text-2);gap:10px}
.edit b{color:var(--c-text);white-space:nowrap}
.edit .ic{width:18px;height:18px;margin-right:8px;vertical-align:-4px;color:var(--c-text-2)}
.ship{display:flex;justify-content:space-between;align-items:center;margin-top:12px;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);padding:10px 12px;font-size:13px;color:var(--c-text-2);gap:10px}
.ship b{color:var(--c-text);font-size:13px;white-space:nowrap}
.ship .ic{width:16px;height:16px;margin-right:6px;vertical-align:-3px;color:var(--c-text-2)}
.info{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:8px;font-size:13px;color:var(--c-text-2)}   /* 9차: 하단 안내 셋 = 연회색 타일 · 숫자 16/22px */
.info>div{background:var(--c-preview-bg);border-radius:var(--r-card);padding:14px 4px;text-align:center;min-width:0}
.info b{display:block;color:var(--c-text);font-size:16px;margin-top:6px;white-space:nowrap;letter-spacing:-0.03em}
.info .ic{width:26px;height:26px;display:block;margin:0 auto;color:var(--c-text)}
.pc{display:none}
.legal{border-top:1px solid var(--c-line);margin-top:30px;padding:16px var(--gutter) 20px;font-size:13px;color:var(--c-text-3);display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.legal a{text-decoration:underline}

/* ① 소속 찾기 */
.search{margin-top:0;display:flex;align-items:center;gap:10px;height:56px;border:1px solid var(--c-text);border-radius:var(--r-ctl);padding:0 16px;background:#fff}
.search svg{width:20px;height:20px;stroke:var(--c-text);fill:none;stroke-width:2;flex:none}
.search input{border:0;outline:0;background:none;font:inherit;font-size:16px;flex:1;min-width:0;color:var(--c-text)}
.search input::placeholder{color:var(--c-text-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{position:relative;min-height:40px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;border:1px solid var(--c-line-2);background:#fff;font-size:13px;color:var(--c-text-2);cursor:pointer}
.chip.on{border-color:var(--c-primary);background:var(--c-primary);color:var(--c-primary-ink);font-weight:700}   /* 9차 선택 표시: 고른 칩 = 진회색 채움·흰 글자 */
.ver{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.vcard{border:1px solid var(--c-line-2);border-radius:var(--r-card);padding:10px;background:#fff;text-align:left;cursor:pointer;width:100%}
.vcard{position:relative}
.vcard.sel{border:2px solid var(--c-primary);padding:11px;background:var(--sel-bg)}
.vcard.sel::after{content:"✓";position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--c-primary);color:var(--c-primary-ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.vcard .nm2{font-size:13px;font-weight:700;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.vcard small{display:block;font-size:13px;color:var(--c-text-3)}
.vcard .tag{font-size:13px;background:var(--c-primary);color:var(--c-primary-ink);border-radius:999px;padding:1px 8px;white-space:nowrap}

/* 명함 그림(완성 크기 창 · 도련은 창 밖) */
.sheet{position:relative;aspect-ratio:90/50;background:#fff;border:1px solid var(--c-line);border-radius:4px;overflow:hidden}
.sheet canvas{position:absolute;display:block}
.vcard .sheet{box-shadow:none}
.pv{background:var(--c-preview-bg);border-radius:var(--r-card);padding:18px 18px 12px;position:relative}
.pv .sheet{box-shadow:0 8px 22px rgba(0,0,0,.10);cursor:zoom-in}
.tabs{display:flex;gap:18px;border-bottom:1px solid var(--c-line);margin-top:14px}
.tabs button{background:none;border:0;font-size:14px;padding:8px 2px 10px;color:var(--c-text-3);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;min-height:44px}
.tabs button.on{color:var(--c-text);font-weight:700;border-bottom-color:var(--c-primary)}   /* 12차: 고른 표시 = 보조색(모든 화면 같은 역할 = 같은 색) */
.busy{font-size:13px;color:var(--c-text-2);margin-top:10px}
.busy i{display:block;height:3px;margin-top:6px;border-radius:2px;background:var(--c-line);position:relative;overflow:hidden}
.busy i::after{content:"";position:absolute;inset:0 60% 0 0;background:var(--c-text-3);animation:busy 1.2s ease-in-out infinite}
@keyframes busy{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.busy i::after{animation:none}}

/* 칸 */
.sect{margin-top:18px;font-size:13px;color:var(--c-text-2);margin-bottom:-4px;grid-column:1/-1}
.fields{margin-top:16px;display:grid;gap:12px 10px;grid-template-columns:1fr 1fr}
.f{min-width:0}
.f.w{grid-column:1/-1}
.f label{display:block;font-size:13px;color:var(--c-text-2);margin-bottom:6px}
.f .in{height:var(--ctl-h);border:1px solid var(--c-line-2);border-radius:var(--r-ctl);padding:0 6px 0 14px;display:flex;align-items:center;gap:4px;background:#fff}
.f .in:focus-within{border-color:var(--c-text);box-shadow:0 0 0 2px rgba(17,17,17,.06)}
.f .in input{border:0;outline:0;background:none;font:inherit;font-size:16px;flex:1;min-width:0;color:var(--c-text);height:100%}
.f .in input::placeholder{color:var(--c-text-3)}
.f .in .clear{flex:none;width:40px;height:40px;border:0;background:none;color:var(--c-text-3);font-size:18px;cursor:pointer;border-radius:6px}
.f .in:not(.has) .clear,.f .in:not(:focus-within) .clear{display:none}   /* 지우기는 쓰는 칸에만(반쪽 칸에서 전화번호가 가려지지 않게) */
.f.err .in{border-color:var(--c-warn)}
.hint{font-size:13px;color:var(--c-warn);background:var(--c-warn-bg);border-radius:6px;padding:8px 10px;margin-top:8px}
.tip{font-size:13px;color:var(--c-text-2);background:var(--c-preview-bg);border-radius:6px;padding:8px 10px;margin-top:8px}
.ok-note{font-size:13px;color:var(--c-ok);background:var(--c-ok-bg);border-radius:6px;padding:10px 12px;margin-top:14px}

/* 고르기 카드(확인 칸 · 뒷면 고르기) */
.opt{display:flex;align-items:center;gap:12px;border:1px solid var(--c-line-2);border-radius:var(--r-card);padding:12px 14px;background:#fff;margin-top:14px;cursor:pointer}
.opt.sel{border:1.5px solid var(--c-primary);padding:11.5px 13.5px}
.opt input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--c-primary)}
.opt b{font-size:15px;display:block}
.opt small{display:block;color:var(--c-text-3);font-size:13px;margin-top:1px}


/* 누르는 자리 44(보이는 크기는 40 · 관문 21) */
.chip::after,.copy::after,.mini::after,.f .in .find::after,.f .in .clear::after{content:"";position:absolute;inset:-2px 0}
.copy,.mini,.f .in .find,.f .in .clear{position:relative}
.bar .lk{min-width:44px;justify-content:flex-end}
.tabs button{min-width:44px}
.pv .tabs button,.fpv .tabs button{color:var(--c-text-2)}   /* 회색 미리보기 바탕 위 = #555(#767676 은 흰 바탕에서만 4.5:1) */

/* ① 버전이 둘 이상일 때(2차 ④): 카드 가로 꽉 · 앞면 크게 + 뒷면 작게 · 카드 = 단추 */
.ver{grid-template-columns:1fr}
.vcard{padding:12px}
.vfaces{position:relative;padding-bottom:16px}
.vfaces .sheet.bk{position:absolute;right:-4px;bottom:0;width:38%;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.vcard .nm2{font-size:15px}
.vcard .meta{font-size:13px;color:var(--c-text-2);margin-top:2px}
.rootStrip{margin-top:26px}

/* 미리보기 오른쪽 위 ⤢(2차 ⑪) */
/* 9차 ⑪: 「크게」 단추 44px + 글자 · 앞|뒤 탭 줄 오른쪽 */
.zbtn{margin-left:auto;min-height:44px;padding:0 14px;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);background:#fff;color:var(--c-text);cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;align-self:center}
.zbtn .ic{width:18px;height:18px}
.fpv>.zbtn{position:absolute;top:8px;right:8px;z-index:2}
.pv .sheet{touch-action:pan-y}

/* 크게 보기 — 검은 바탕 전체 · 명함 가로 꽉(폰 세로면 90° 돌림) · 두 손가락 확대 · 앞|뒤 · ✕ */
.zoom{position:fixed;inset:0;z-index:60;background:#000;color:#fff;display:flex;flex-direction:column}
.zoom .zbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 16px;flex:none}
.zoom .ztabs{display:flex;gap:4px}
.zoom .ztabs button,.zoom .zx,.zoom .zreal{background:none;border:0;color:#BDBDBD;font-size:15px;min-height:44px;padding:0 12px;cursor:pointer}
.zoom .ztabs button.on{color:#fff;font-weight:700}
.zoom .zx,.zoom .zback{font-size:15px;color:#fff;background:none;min-height:44px;padding:0 12px;border:1px solid #777;border-radius:8px;margin-left:6px;cursor:pointer}
.zoom .zstage{flex:1;min-height:0;overflow:auto;display:flex;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.zoom canvas,.zoom img{display:block;margin:auto;flex:none;background:#fff}
.zoom .zreal{display:none}
@media (min-width:960px){ .zoom .zreal{display:inline-flex;align-items:center} }

/* 만들기 — 사람 여럿(2차 ⑬) · 연락처 붙여넣기(⑭) · 고르기 칸(⑥) · 아이디만(⑧) · 주소 찾기(⑤) */
.ppl{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.addp{margin-top:16px;width:100%;min-height:48px;border:1px dashed var(--c-line-2);border-radius:var(--r-ctl);background:#fff;color:var(--c-text);font-weight:700;cursor:pointer}
.paste{margin-top:14px}
.paste summary{cursor:pointer;font-size:14px;color:var(--c-text-2);min-height:44px;display:flex;align-items:center;list-style:none}
.paste summary::-webkit-details-marker{display:none}
.paste summary::before{content:"+";display:inline-block;width:18px;font-weight:700}
.paste[open] summary::before{content:"−"}
.ta{width:100%;min-height:104px;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);padding:12px 14px;font:inherit;font-size:16px;resize:vertical;outline:0;background:#fff;color:var(--c-text)}
.ta:focus{border-color:var(--c-text)}
.f .in select{min-width:0;width:100%;border:0;outline:0;background:none;font:inherit;font-size:16px;flex:1;min-width:0;height:100%;color:var(--c-text);-webkit-appearance:none;appearance:none;cursor:pointer}
.f .in .chev2{flex:none;color:var(--c-text-2);padding-right:8px;pointer-events:none}
.f .in .suffix{flex:none;color:var(--c-text-2);font-size:15px;white-space:nowrap;padding-right:8px}
.f .in .prefix{flex:none;color:var(--c-text-2);font-size:15px;white-space:nowrap}
.f .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.f .two>div{min-width:0}
.f .sub2{margin-top:8px}
.f .in .find{flex:none;min-height:40px;padding:0 12px;border:1px solid var(--c-line-2);border-radius:6px;background:#fff;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.f .in input[readonly]{cursor:pointer}
.sugg{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mini{min-height:40px;padding:0 12px;border:1px solid var(--c-line-2);border-radius:6px;background:#fff;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.pcl{position:fixed;inset:0;z-index:70;background:#fff;display:flex;flex-direction:column}
.pcl .pch{flex:1;min-height:0}
.pcin{height:440px;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);margin-top:8px;overflow:hidden}

/* 종이·수량·면(2차 ⑦) */
.sec{font-size:16px;font-weight:700;margin:24px 0 10px}
.sec:first-child{margin-top:4px}
.sec small{font-weight:400;color:var(--c-text-2);font-size:13px;margin-left:6px}
.pcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--c-line-2);border-radius:var(--r-card);padding:12px;background:#fff;cursor:pointer;margin-top:8px}
/* 9차 선택 표시 공통: 고른 카드 = 2px 진회색 테두리 + 연회색 바탕 + 오른쪽 ✓ 동그라미(진회색 채움·흰 체크) · 안 고른 카드는 빈 동그라미 */
.pcard::after,.qopt::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--c-line-2);box-sizing:border-box}
.pcard.sel,.qopt.sel{border:2px solid var(--c-primary);padding:11px;background:var(--sel-bg)}
.pcard.sel::after,.qopt.sel::after{content:"✓";border:0;background:var(--c-primary);color:var(--c-primary-ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.seg button.on{border:2px solid var(--c-primary);background:var(--sel-bg);font-weight:700}
.pcard .sq{flex:none;width:56px;height:56px;border-radius:6px;background:var(--c-preview-bg);border:1px solid var(--c-line)}
.pcard .tx{flex:1;min-width:0}
.pcard .tx b,.qopt b{display:block;font-size:15px}
.pcard .tx small,.qopt small{display:block;font-size:13px;color:var(--c-text-2)}
.pcard .pr,.qopt .pr{flex:none;font-size:14px;font-weight:700;white-space:nowrap}
.qopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--c-line-2);border-radius:var(--r-card);padding:12px;background:#fff;cursor:pointer;margin-top:8px;min-height:56px}
.qopt .tx{flex:1;min-width:0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{min-height:48px;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);background:#fff;cursor:pointer;font-size:15px}
.seg button.on{border:2px solid var(--c-primary);background:var(--sel-bg);font-weight:700}

/* 주문(받는 법 · 결제 · 연락처 · 주문 내역 · 확인 표) */
.qopt .ic{color:var(--c-text)}
.acct{margin-top:10px;border:1px solid var(--c-line);border-radius:var(--r-card);padding:12px 14px;font-size:14px}
.acct .l1{display:flex;justify-content:space-between;align-items:center;gap:10px}
.acct .l1 b{font-size:15px}
.acct p{margin:6px 0 0;color:var(--c-text-2);font-size:13px}
.copy{min-height:40px;padding:0 12px;border:1px solid var(--c-line-2);border-radius:6px;background:#fff;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.rcard{margin-top:24px;border:1px solid var(--c-line-2);border-radius:var(--r-card);padding:14px 16px}
.rcard h4{margin:0 0 8px;font-size:15px}
.rcard .li{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:4px 0}
.rcard .li span:first-child{color:var(--c-text-2)}
.rcard .li.tot{border-top:1px solid var(--c-line);margin-top:6px;padding-top:10px;font-weight:700;font-size:16px}
.rcard .li.tot span:first-child{color:var(--c-text)}
.rows{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-top:10px}
.rows .grp{grid-column:1/-1;font-size:13px;color:var(--c-text-2);margin-top:12px}
.row{background:none;border:0;border-bottom:1px solid var(--c-line);padding:8px 0;text-align:left;cursor:pointer;min-height:52px;min-width:0}
.row.w{grid-column:1/-1}
.row small{display:block;font-size:13px;color:var(--c-text-3)}
.row b{display:block;font-size:15px;overflow-wrap:anywhere}
.chk{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--c-line-2);border-radius:var(--r-card);padding:12px 14px;margin-top:10px;cursor:pointer;font-size:15px}
.chk.sel{border:1.5px solid var(--c-primary);padding:11.5px 13.5px}
.chk input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--c-primary)}
.chk small{display:block;color:var(--c-text-2);font-size:13px}

/* ③ 내 파일 검수 */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:160px;border:1.5px dashed var(--c-line-2);border-radius:var(--r-card);background:#fff;cursor:pointer;color:var(--c-text);font-size:15px}
.drop small{color:var(--c-text-2);font-size:13px}
.drop .ic{width:28px;height:28px}
.drop.over{border-color:var(--c-text);background:var(--c-preview-bg)}
.frow{display:flex;align-items:center;gap:12px;border:1px solid var(--c-line);border-radius:var(--r-card);padding:10px 12px}
.frow .ft{flex:none;width:40px;height:40px;border-radius:6px;background:var(--c-preview-bg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.frow .tx{min-width:0}
.frow .tx b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .tx small{display:block;font-size:13px;color:var(--c-text-2)}
.fpv{position:relative;margin-top:12px;background:var(--c-preview-bg);border-radius:var(--r-card);padding:16px}
.fpv .fimg{position:relative;box-shadow:0 8px 22px rgba(0,0,0,.10);background:#fff}
.fpv .fimg img{display:block;width:100%;height:auto}
.fpv .fimg svg{position:absolute;inset:0;width:100%;height:100%}
.res{margin-top:12px}
.rl{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--c-line);font-size:14px}
.rl i{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:13px;margin-top:1px}
.rl.ok i{color:var(--c-ok);background:var(--c-ok-bg)}
.rl.warn i{color:var(--c-warn);background:var(--c-warn-bg)}
.rl.info i{color:var(--c-text-2);background:var(--c-preview-bg)}
.rl.bad i{color:#B3261E;background:#FDECEA}
.foot .two{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}

/* 완료 */
.done{text-align:center;padding-top:18px}
.done .ck.wait{background:var(--c-warn-bg);color:var(--c-warn)}
.rcard .lkst{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:var(--c-preview-bg);font-size:14px;color:var(--c-text)} .rcard .lkst.wait{background:var(--c-warn-bg);color:var(--c-warn)}   /* ㊲ 조회에도 결제 대기·취소 한 줄 */
.done .ck{width:56px;height:56px;border-radius:50%;background:var(--c-ok-bg);color:var(--c-ok);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:28px;font-weight:700}
.done .when{margin-top:8px;color:var(--c-text-2);font-size:14px}
.done .when b{display:block;color:var(--c-text);font-size:18px;margin-top:2px}
.ono{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--c-line-2);border-radius:var(--r-card);padding:12px 14px;margin-top:18px}
.ono b{font-size:18px;letter-spacing:.01em}
.ono small{display:block;font-size:13px;color:var(--c-text-2)}
.wm{position:relative}
.wm::after{content:"미리보기";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:rgba(0,0,0,.13);transform:rotate(-16deg);pointer-events:none;letter-spacing:.1em}
.wmrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}

.pconly{display:none}
.pvl,.sidecard,.pvreal,.sideonly,.pcblock,.crumb,.pcl2{display:none}
.sgrey{background:var(--c-preview-bg);border-radius:6px;padding:8px 12px;margin-bottom:8px}
.hero-img img{width:100%;display:block;border-radius:var(--r-card)}
.f .two label{display:block;font-size:13px;color:var(--c-text-2);margin-bottom:6px}
.pvreal{margin-left:auto;min-height:44px;padding:0 14px;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);background:#fff;color:var(--c-text);cursor:pointer;align-items:center;gap:6px;font-size:14px;font-weight:700;align-self:center}

/* PC(폭 1000 이상) — 11차 4 공통(시안 5판 07·08): 가운데 1080 · 두 칸 620:428 · 단추는 상자 안(만들기 D 만 아래 띠) · 1280×800 한 화면 · 큰 빈자리·바닥에 붙은 것 0 */
@media (min-width:1000px){
  .scr{max-width:none}
  .scr>.bar{height:56px;padding:0 max(32px,calc((100% - 1080px)/2))}
  .bar .mob{display:none} .bar .pcb{display:block;font-size:18px;font-weight:800;letter-spacing:-0.02em} .bar .pcb .nm{font-size:13px;margin-left:4px}
  .scr>.body{width:100%;max-width:1080px;margin:0 auto;padding:32px 0 40px}
  .ttl h3{font-size:26px;letter-spacing:-0.03em;line-height:1.25;margin:0} .ttl p{color:var(--c-text-2);margin:6px 0 0;font-size:15px}
  .scr.two>.body{display:grid;grid-template-columns:620px 428px;column-gap:32px;align-items:start}
  .scr.two>.body>*{grid-column:2;min-width:0}
  .scr.two>.body>.L{grid-column:1;grid-row:1/span 30}
  .scr.two>.body>.hd,.scr.two>.body>.ttl{grid-column:1/-1}
  .scr.two>.foot{position:static;border-top:0;width:100%;max-width:1080px;margin:0 auto;padding:0 0 40px;justify-content:flex-end}
  .scr.two>.foot .btn-w{width:428px}
  .legal{padding:22px max(32px,calc((100% - 1080px)/2)) 26px;background:#F7F7F7;margin-top:0}
  .pconly{display:block} .mo{display:none} .pc{display:inline}
  /* D 만들기 — 왼쪽 520 미리보기(앞 위 · 뒤 아래 늘 보임 · 고치는 면 테두리) | 오른쪽 칸 · 아래 띠 그대로 */
  #scrMake.scr{display:grid;grid-template-columns:minmax(32px,1fr) 520px 40px 520px minmax(32px,1fr);grid-template-rows:auto 1fr auto;align-items:start}
  #scrMake>.bar,#scrMake>.foot{grid-column:1/-1}
  #scrMake>.pvl{display:block;grid-column:2;grid-row:2;position:sticky;top:56px;padding-top:24px}
  #scrMake>.body{grid-column:4;grid-row:2;width:auto;max-width:none;margin:0;padding:24px 0 32px}
  #scrMake>.foot{grid-row:3;padding:0 max(32px,calc((100% - 1080px)/2));height:72px}
  #scrMake .foot .sum{font-size:13px} #scrMake .foot .btn{min-width:300px}
  #scrMake .pvl .pv{background:none;padding:0}
  #scrMake .pvl .pv:not(.noback) .sheet.hidden{display:block!important}
  #scrMake .pvl .sheet+.sheet{margin-top:12px}
  #scrMake .pvl .sheet.cur{outline:2px solid var(--c-primary);outline-offset:3px}
  #scrMake .pvl .ftag,#scrMake .pvl .fz{display:inline-flex}
  #scrMake .pvl #faceSeg{display:none}
  #scrMake .pvl .ship{margin-top:12px}
  /* 종이·수량 · 주문 — 왼쪽 620 그림 + 고르기 | 오른쪽 428 주문 상자(단추 안) */
  #scrPaper.scr,#scrOrder.scr{display:grid;grid-template-columns:minmax(32px,1fr) 620px 32px 428px minmax(32px,1fr);grid-template-rows:auto auto 1fr;align-items:start}
  #scrPaper>.bar,#scrOrder>.bar{grid-column:1/-1}
  #scrPaper>.pvl,#scrOrder>.pvl{display:block;grid-column:2;grid-row:2;padding-top:32px}
  #scrPaper>.body,#scrOrder>.body{grid-column:2;grid-row:3;width:auto;max-width:none;margin:0;padding:8px 0 40px}
  #scrPaper .foot,#scrOrder .foot{grid-column:4;grid-row:2/span 2;position:sticky;top:80px;bottom:auto;margin-top:32px;flex-direction:column;align-items:stretch;gap:12px;border:1px solid var(--c-line-2);border-radius:12px;padding:20px}
  #scrPaper .foot .sidecard,#scrOrder .foot .sidecard{display:block;margin:0;border:0;padding:0 0 12px;border-bottom:1px solid var(--c-line)}
  #scrPaper .foot .sideonly,#scrOrder .foot .sideonly{display:block}
  .foot p.sidenote{font-size:13px;color:var(--c-text-2);margin:0}
  #scrPaper .foot .btn,#scrOrder .foot .btn{width:100%}
  #scrPaper .foot .sum b,#scrOrder .foot .sum b{display:none}
  .pcblock{display:block}
  #scrMake .bar .mob,#scrPaper .bar .mob,#scrOrder .bar .mob,#scrMake .bar [data-back],#scrPaper .bar [data-back],#scrOrder .bar [data-back]{display:none}
  .crumb{display:flex;align-items:center;justify-content:space-between;gap:22px;min-width:0;flex:1;overflow:hidden;white-space:nowrap}
  .crumb>b{font-size:18px;font-weight:800;letter-spacing:-0.02em} .crumb>b .nm{font-size:13px}
  .crumb .cr{color:var(--c-text-2);font-size:14px;overflow:hidden;text-overflow:ellipsis}
  .pcl2{display:inline-flex;margin-left:14px}
  #pvMake,#pvOrder,#pvFileOrder,#scrOrder #rcard{display:none}
  .pv .pvreal{display:inline-flex}
  #scrMake .pv .pvreal{display:none}
  .pv .zbtn{display:none}
  .pv.real .sheet{width:90mm;margin:0 auto}
  /* A 기관 — 한 칸 1080: 제목 · 검색 · 자주 찾는 곳 · 등록된 기관(명함 그림) · 다른 길 셋 */
  #scrOrg.two>.body{display:block}
  #scrOrg .search{height:60px;border-width:1.5px;border-radius:10px;padding:0 18px;margin-top:22px}
  #scrOrg .search kbd{font:inherit;font-size:12px;color:var(--c-text-3);border:1px solid var(--c-line-2);border-radius:6px;padding:2px 8px;display:inline}
  #scrOrg .chips{align-items:center}
  #scrOrg .chips em.fav{display:inline;font-style:normal;font-size:13px;color:var(--c-text-3);margin-right:4px}
  #scrOrg .chips{display:none!important}   /* 12차 3: PC 는 「등록된 기관」 카드와 같은 셋이라 칩 없음(폰은 칩이 목록) */
  .gridh{display:flex!important;justify-content:space-between;align-items:baseline;margin-top:30px;font-size:14px;color:var(--c-text-2)}
  .gridh.hidden{display:none!important}
  .gridh b{color:var(--c-text);font-size:16px}
  .orgs{display:grid!important;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
  .orgs.hidden{display:none!important}
  .org6{border:1px solid var(--c-line-2);border-radius:12px;padding:14px;background:#fff;text-align:left;cursor:pointer;width:100%}
  .org6:hover{border-color:var(--c-text)}
  .org6 .sheet{box-shadow:0 4px 12px rgba(0,0,0,.08)}
  .org6 .nm{font-weight:700;font-size:15px;margin-top:12px;display:flex;justify-content:space-between;align-items:center}
  .org6 .cv{color:var(--c-text-3);font-weight:400}
  .org6 small{display:block;color:var(--c-text-3);font-size:13px;margin-top:2px}
  #scrOrg .ver{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
  .more{display:grid!important;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
  .more>button{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px dashed var(--c-line-2);border-radius:10px;font-size:13px;color:var(--c-text-2);background:#fff;cursor:pointer;text-align:left;min-height:68px}
  .more .tx{flex:1;min-width:0} .more b{display:block;color:var(--c-text);font-size:14px}
  .more .tile{width:48px;height:48px;border-radius:12px;background:var(--ac-weak);color:var(--ac);display:flex;align-items:center;justify-content:center;flex:none}
  .more .cv{color:var(--c-text-3);font-size:18px}
  #scrOrg .rootStrip{margin-top:26px}
  /* B 파일 — 올리기 전: 왼쪽 명함 모양 올리기 칸 | 오른쪽 안내 셋(접지 않음) · 올린 뒤: 왼쪽 미리보기 | 오른쪽 검수 줄·한 종 더·단추 · 안내 셋은 아래 */
  #scrFile.two:not(.has)>.body>#dropBox{grid-column:1;grid-row:2/span 30}
  #scrFile.two:not(.has)>.body>.guide3{grid-column:2;grid-row:2/span 30;grid-template-columns:1fr;margin-top:24px}
  #scrFile.two.has>.body>.guide3{grid-column:1/-1;grid-row:auto;grid-template-columns:1fr 1fr 1fr}
  #scrFile .drop{margin-top:24px;min-height:0;padding:26px;border-radius:12px;background:#FAFAFA;border-color:#B9B9B9}
  #scrFile .drop .sil{width:100%;aspect-ratio:94/54;position:relative;border:1px solid var(--c-line-2);background:#fff;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
  #scrFile .drop .sil::before{content:"";position:absolute;inset:3.7% 2.1%;border:1px dashed #9A9A9A;border-radius:2px}
  #scrFile .drop .sil::after{content:"";position:absolute;inset:9.3% 5.3%;background:rgba(0,0,0,.035);border-radius:2px}
  #scrFile .drop .sil>*{position:relative;z-index:1}
  #scrFile .drop .sil .ic{width:34px;height:34px}
  #scrFile .drop .sil b{font-size:17px}
  #scrFile .drop .pick{display:inline-flex;margin-top:6px;min-height:44px}
  #scrFile .guide3>div{border-color:var(--c-line-2);border-radius:12px;padding:20px}
  #scrFile.two:not(.has) .guide3>div{padding:16px 20px} #scrFile.two:not(.has) .guide3 h4{margin-bottom:8px}
  #scrFile.two:not(.has) #gSpec{display:flex;gap:14px;align-items:center} #scrFile.two:not(.has) #gSpec .specw{width:140px;flex:none}
  #scrFile.two:not(.has) #gSpec .speci{display:none} #scrFile.two:not(.has) #gSpec .gs{margin:0}   /* 올리기 전 오른쪽 칸 = 시안 꼴(작은 그림 + 옆 글) · 1280×800 한 화면 */
  #scrFile #fileFoot{display:none!important}
  #scrFile.has #fileBtnsPC{display:block;margin-top:14px} #scrFile:not(.has) #fileBtnsPC{display:none}
  .fbtns .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #scrFile.two #fileRes:not(.hidden){display:contents}
  #scrFile.two #fileRes>*{grid-column:2;min-width:0}
  #scrFile.two #fileRes>.fleft{grid-column:1;grid-row:2/span 30;position:sticky;top:80px}
  #scrFile.two #fLines,#scrFile.two #kinds{margin-top:24px}
  /* C 지금 명함 다시 — 왼쪽 사진 둘(나란히 90:50) · 잘 찍는 법 · 값 | 오른쪽 주문 상자(휴대폰 · 바꿀 내용 · 순서 · 단추) */
  #scrRestore .hd h2{font-size:26px;letter-spacing:-0.03em;margin-top:0!important} #scrRestore .hd .sub{font-size:15px}
  #scrRestore.two>.body>.L{grid-row:2/span 30;margin-top:24px;position:sticky;top:80px}
  #scrRestore .shots{grid-template-columns:1fr 1fr;gap:14px;margin-top:0}
  #scrRestore .shot{border-color:#B9B9B9;background:#FAFAFA;border-radius:10px}
  #scrRestore .tips3{margin-top:14px;border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:18px}
  #scrRestore .tips3 h4{margin:0;font-size:14px;flex:none}
  #scrRestore .tips3 .steps3{flex:1;justify-content:flex-start;gap:18px}
  #scrRestore .tips3 .steps3 span{flex:none;flex-direction:row;gap:8px;color:var(--c-text-2)}
  #scrRestore .tips3 .steps3 .ic{width:20px;height:20px;padding:8px;border-radius:9px}
  #scrRestore .rsbox{margin-top:24px;border:1px solid var(--c-line-2);border-radius:12px;padding:20px}
  #scrRestore .rsbox .fields{margin-top:0;grid-template-columns:1fr;gap:14px}
  #scrRestore .rsbox .f.rst .in{height:76px;align-items:flex-start;padding-top:12px}
  #scrRestore .rsbox .f.rst .in input{height:auto}
  #scrRestore .rsbox .steps{margin-top:14px}
  #rsBtnPC{margin-top:14px} #rsBtnPC .btn{width:100%}
  .hint2{font-size:13px;color:var(--c-text-3);text-align:center;margin:8px 0 0}
  #scrRestore #rsFoot{display:none!important}
  .rsex{margin-top:14px;border:1px solid var(--c-line);border-radius:10px;padding:14px 16px}
  .rsex.hidden{display:none!important}
  .rsex h4{font-size:14px;margin:0 0 10px}
  .rsex .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .rsex .row>div{font-size:13px;color:var(--c-text-2)}
  .rsex .row b{display:block;color:var(--c-text);font-size:16px;margin-top:8px}
  .rsex .mn{aspect-ratio:90/50;border:1px solid var(--c-line);border-radius:4px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.08);padding:9% 8%;display:grid;grid-template-columns:40% 1fr;gap:4%}
  .rsex .mn .lg{height:22%;border-radius:2px;background:#3D3D3D;min-height:14px}
  .rsex .mn .t1{font-size:12px;font-weight:700;letter-spacing:.2em;color:#111}
  .rsex .mn .t2{height:5px;background:#E2E2E2;border-radius:2px;margin-top:5px} .rsex .mn .t2.s{width:60%}
  .rsex .mn.cx{background:repeating-linear-gradient(135deg,#F2F2F2 0 6px,#fff 6px 12px)}
  .rsex .mn.cx .ph{border-radius:50%;background:#C9C9C9;aspect-ratio:1;width:70%}
  /* 완료·조회·편집 의뢰 */
  #scrDone>.body{max-width:640px}
}
.guide3{display:grid;gap:12px;margin-top:14px}
.guide3>div{border:1px solid var(--c-line);border-radius:var(--r-card);padding:14px;background:#fff}
.guide3 h4{margin:0 0 10px;font-size:15px}
.steps3{display:flex;align-items:center;justify-content:space-between;gap:4px}
.steps3 span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--c-text);text-align:center;flex:1}
.steps3 .ic{width:var(--ic-guide);height:var(--ic-guide);padding:8px;border-radius:10px;background:var(--ac-weak);color:var(--ac);box-sizing:content-box}   /* 12차: 안내 아이콘 = 강조색 · 크기는 화면 꾸미기 */
.steps3 i{font-style:normal;color:var(--c-text-2)}
.gs{font-size:13px;color:var(--c-text-2);margin:10px 0 0}
.g2 p{margin:6px 0;font-size:13px;color:var(--c-text-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.g2 .chip{min-height:30px;font-size:13px;padding:0 10px;cursor:default}
.g2 .chip::after{display:none}
.g3 svg.spec{width:100%;height:auto;display:block}
.g3 .btn{margin-top:10px}

.pcards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pcd{border:1px solid var(--c-line-2);border-radius:var(--r-card);padding:8px;background:#fff;text-align:left;cursor:pointer;width:100%;position:relative}
.pcd.on{border:2px solid var(--c-primary);padding:7px;background:var(--sel-bg)}
.pcd .mini2{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pcd .mini2 .sheet{border-radius:2px}
.pcd b{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-top:6px}
.pcd .st{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.pcd .st.ok{color:var(--c-ok);background:var(--c-ok-bg)} .pcd .st.warn{color:var(--c-warn);background:var(--c-warn-bg)}
.pcd small{font-size:13px;color:var(--c-text-2)}
.many{margin-top:16px;border:1px dashed var(--c-line-2);border-radius:var(--r-card);padding:12px 14px}
.many .sub{margin:0 0 10px}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.two2 .btn{padding:0 8px;font-size:14px}
.clist{margin-top:10px;display:grid;gap:6px}
.clist .li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;border-bottom:1px solid var(--c-line);padding:6px 0}
.tmpnote{display:block;font-size:13px;color:var(--c-text-2)}
.f label .mk{margin-left:6px;font-size:13px;color:var(--c-warn);font-weight:700} .f label .mk.au{color:var(--c-text-3);font-weight:500}   /* 10차 고침 1 「자동」 = 회색 */
.f .alt{background:none;border:0;padding:0;margin-top:6px;color:var(--c-text-2);text-decoration:underline;font-size:13px;cursor:pointer;min-height:44px}

/* 9차 · 복원 · 파일 2판 · 모서리 · 조회 · 사진으로 채우기 */
.shots{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}   /* 10차 고침 4 — 명함 비율 크게(한 줄에 하나) */
.shot{position:relative;aspect-ratio:90/50;border:1.5px dashed var(--c-line-2);border-radius:var(--r-card);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--c-text);font-size:15px;font-weight:700;overflow:hidden;width:100%}
.shot small{font-weight:400;color:var(--c-text-2);font-size:13px}
.shot .ic{width:34px;height:34px}
.tips3{margin-top:12px;border:1px solid var(--c-line);border-radius:var(--r-card);padding:12px 14px;background:#fff}
.tips3 h4{margin:0 0 10px;font-size:15px}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot.has{border-style:solid}
.steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.steps li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--c-text-2)}
.steps li b{color:var(--c-text)}
.steps .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--n-bg);color:var(--n-ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.kinds{display:grid;gap:8px;margin-bottom:12px}
.kind{display:flex;align-items:center;gap:10px;border:1px solid var(--c-line-2);border-radius:var(--r-card);padding:10px 12px;background:#fff;cursor:pointer;width:100%;text-align:left;min-height:52px}
.kind.on{border:2px solid var(--c-primary);background:var(--sel-bg);padding:9px 11px}
.kind .st{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.kind .st.ok{color:var(--c-ok);background:var(--c-ok-bg)} .kind .st.warn{color:var(--c-warn);background:var(--c-warn-bg)} .kind .st.bad{color:#B3261E;background:#FDECEA}
.kind .tx{flex:1;min-width:0} .kind .tx b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kind .tx small{display:block;font-size:13px;color:var(--c-text-2)}
.frow .x{margin-left:auto;flex:none;min-width:44px;min-height:44px;border:0;background:none;font-size:18px;color:var(--c-text-2);cursor:pointer}
.backslot{margin-top:10px}
.guide{margin-top:12px;border:1px solid var(--c-line);border-radius:var(--r-card)}
.guide details{border-bottom:1px solid var(--c-line)} .guide details:last-child{border-bottom:0}
.guide summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;cursor:pointer;font-size:14px;list-style:none}
.guide summary::-webkit-details-marker{display:none}
.guide summary::after{content:"▸";margin-left:auto;color:var(--c-text-2)} .guide details[open] summary::after{content:"▾"}
.guide summary .ic{width:18px;height:18px;color:var(--c-text-2)}
.guide .gb{padding:0 14px 14px 42px;font-size:14px;color:var(--c-text-2)} .guide .gb p{margin:4px 0}
.guide .gb svg.spec{width:100%;max-width:320px;height:auto;display:block;margin:6px 0}
.rl span b{color:var(--c-text)}
.corner .sheet{border-radius:var(--corner,0)}
.ocrbtn{margin-top:8px}

.specw{position:relative}
.speci{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#3D3D3D}
.seg small{font-size:13px}

/* 10차 고침 6 — 폰 머리 = 왼쪽 「‹ 이전」 · 가운데 제목 · 「주문 조회」는 입구 화면에만 */
@media (max-width:999px){
  .scr>.bar{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;gap:4px}
  .scr>.bar>b{grid-column:2;grid-row:1;justify-self:center;text-align:center;max-width:100%}
  .scr>.bar>[data-back]{grid-column:1;grid-row:1;justify-self:start;justify-content:flex-start}
  .scr>.bar>.lk:not([data-back]){grid-column:3;grid-row:1;justify-self:end}
  .scr>.bar .pcl2{display:none}
}

/* ============================================================
   11차 · 입구 시안 6판(05 폴더 09·10 · 그림 그대로) — 첫 띠 · 길 셋 카드 · 편집 맡기기 · 주문 순서 넷 · 값과 종이 · 꼬리
   포인트 색 세 벌 = html[data-c](판매 설정 「포인트 색」 ㉠ 귤 기본 · ㉡ 길마다 · ㉢ 노랑) · 진회색은 글자·「다음」 단추만 · 파랑 0
   ============================================================ */
:root{--ac:#3D3D3D;--ac-weak:#F5F5F5;--ac-soft:#FAFAFA;--ac-line:#D4D4D4;--ac-ink:#111111;
  --p1:var(--ac);--p1w:var(--ac-weak);--p2:var(--ac);--p2w:var(--ac-weak);--p3:var(--ac);--p3w:var(--ac-weak);
  --go-bg:#fff;--go-ink:var(--ac-ink);--go-line:var(--ac-line);--n-bg:var(--ac-ink);--n-ink:#fff;--ok-ic:var(--ac)}   /* 순서 번호 흰 글 = 진한 쪽 바탕(4.5 이상) */
html[data-c="a"]{--ac:#D9480F;--ac-weak:#FFF0E6;--ac-soft:#FFF8F3;--ac-line:#F3C3A6;--ac-ink:#B93A0B}
html[data-c="b"]{--ac:#2F7D4F;--ac-weak:#E7F5EC;--ac-soft:#F6FAF7;--ac-line:#BFE2CB;--ac-ink:#25663F;
  --p1:#2F7D4F;--p1w:#E7F5EC;--p2:#C2581C;--p2w:#FFF0E6;--p3:#6A4BB5;--p3w:#F2EEFB}
html[data-c="c"]{--ac:#2B2B2B;--ac-weak:#FFF3BF;--ac-soft:#FFFBEA;--ac-line:#FFE066;--ac-ink:#1E1E1E;
  --p1:#2B2B2B;--p1w:#FFE066;--p2:#2B2B2B;--p2w:#FFE066;--p3:#2B2B2B;--p3w:#FFE066;--go-bg:#FFD43B;--go-ink:#1E1E1E;--go-line:#FFD43B;--n-bg:#FFD43B;--n-ink:#1E1E1E;--ok-ic:#2B2B2B}
#scrEntry>.body{padding:0;max-width:none}   /* 첫 띠 바탕은 화면 끝까지(시안 6판) · 안은 .in6 1080 */
#scrEntry .in6{padding:0 18px}
#scrEntry>.bar>b{grid-column:1/3;justify-self:start;font-size:17px;font-weight:800;letter-spacing:-0.02em}   /* 6판 폰: 로고 왼쪽 · 「주문 조회」 오른쪽(10차 고침 6 그대로) */
#scrEntry>.bar .nm{font-size:14px;margin-left:2px}
.hero6{background:var(--ac-soft);border-bottom:1px solid var(--c-line)}
.hero6>.in6{display:grid;grid-template-columns:1fr;gap:6px;padding-top:26px;padding-bottom:22px}
#scrEntry .eyebrow{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:700;color:var(--ac-ink);background:#fff;border:1px solid var(--ac-line);border-radius:999px;padding:4px 12px}
#scrEntry .hero6 h2{font-size:30px;line-height:1.15;letter-spacing:-0.04em;margin-top:14px}
#scrEntry .hero6 h2 em{font-style:normal;color:var(--ac-ink)}   /* 관문 20 대비 4.5 — 시안 표의 진한 쪽(--ac-ink) · ㉠ 5.4:1 */
#scrEntry .lead6{font-size:15px;color:var(--c-text-2);margin:12px 0 0}
#scrEntry .facts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
#scrEntry .fact{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--c-line);border-radius:10px;padding:9px 13px;font-size:13px;color:var(--c-text-2)}
#scrEntry .fact b{color:var(--c-text);font-size:14px}
#scrEntry .fact .ic{width:20px;height:20px;color:var(--ac)}
#scrEntry .vis{position:relative;order:-1;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.12)} #scrEntry .vis img{display:block;width:100%;height:auto} .hero6 .in6:has(.vis.hidden){grid-template-columns:1fr}   /* 12차: 첫 띠 = 관리자가 올린 사진 · 없으면 그 자리 숨김 */
#scrEntry .vis .bc{position:absolute;width:200px;aspect-ratio:90/50;background:#fff;border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.06);padding:14px 16px;display:grid;grid-template-columns:38% 1fr;gap:10px}
#scrEntry .vis .lg{height:18px;border-radius:3px;background:var(--ac)}
#scrEntry .vis .nm{font-size:13px;font-weight:800;letter-spacing:.32em}
#scrEntry .vis .en{font-size:10px;font-weight:700;color:var(--c-text-2)}
#scrEntry .vis .ln{height:5px;border-radius:2px;background:#E4E4E4;margin-top:7px}
#scrEntry .vis .ln.s{width:60%}
#scrEntry .vis .b1{left:10px;top:20px;transform:rotate(-8deg)}
#scrEntry .vis .b2{left:120px;top:62px;transform:rotate(5deg);background:#2B2B2B;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
#scrEntry .vis .b2 .lg{width:90px;height:20px;background:var(--ac-line)}
#scrEntry .vis .b2 .ln{width:150px;background:#5A5A5A;margin:0}
#scrEntry .badge{position:absolute;right:0;top:0;background:#fff;border:1px solid var(--c-line);border-radius:14px;padding:8px 10px;box-shadow:0 8px 20px rgba(0,0,0,.08);font-size:13px;color:var(--c-text-2);text-align:center}
#scrEntry .badge b{display:block;font-size:16px;color:var(--c-text);letter-spacing:-0.03em}
#scrEntry .badge span{display:block}
#scrEntry .paths-h{margin-top:24px;display:flex;justify-content:space-between;align-items:baseline}
#scrEntry .paths-h h3{font-size:24px;letter-spacing:-0.03em;margin:0}
#scrEntry .paths-h span{display:none;font-size:14px;color:var(--c-text-3)}
.paths6{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.p6{border:1px solid var(--c-line-2);border-radius:16px;padding:16px;background:#fff;cursor:pointer;text-align:left;width:100%;display:grid;grid-template-columns:56px 1fr;column-gap:14px;align-items:center;transition:border-color .15s,box-shadow .15s}
.p6:hover{border-color:var(--c-text);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.p6 .tile{width:calc(var(--ic-path) * 1.6);height:calc(var(--ic-path) * 1.6);border-radius:16px;grid-row:span 2;display:flex;align-items:center;justify-content:center;align-self:start}
.p6 .tile .ic{width:calc(var(--ic-path) * .8);height:calc(var(--ic-path) * .8)}
.p6.p1 .tile{background:var(--p1w);color:var(--p1)} .p6.p2 .tile{background:var(--p2w);color:var(--p2)} .p6.p3 .tile{background:var(--p3w);color:var(--p3)}
.p6 .h4{display:block;font-size:17px;letter-spacing:-0.02em}
.p6 .s{display:block;color:var(--c-text-2);font-size:14px;margin-top:4px;line-height:1.55}
.p6 .ex,.p6 .go{display:none}
.edit6{margin:12px auto 0;display:flex;gap:10px;align-items:center;justify-content:center;font-size:14px;color:var(--c-text-2);background:none;border:0;cursor:pointer;min-height:44px}
.edit6 .ic{width:18px;height:18px}
.edit6 b{color:var(--c-text);text-decoration:underline;text-underline-offset:3px}
.sec6{margin-top:30px}
.sec6>h3{font-size:22px;letter-spacing:-0.03em;margin:0}
.steps6{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.st6{background:#FAFAFA;border:1px solid var(--c-line);border-radius:14px;padding:18px}
.st6 .n{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--n-bg);color:var(--n-ink);font-weight:800;font-size:13px;align-items:center;justify-content:center}
.st6 b{display:block;font-size:16px;margin-top:10px}
.st6 p{font-size:13px;color:var(--c-text-2);margin:2px 0 0}
.price6{display:grid;grid-template-columns:1fr;gap:18px;margin-top:14px}
.pbox{border:1px solid var(--c-line-2);border-radius:16px;padding:22px}
.pbox .big{font-size:34px;font-weight:800;letter-spacing:-0.04em}
.pbox .big small{font-size:15px;font-weight:500;color:var(--c-text-2);letter-spacing:0;margin-left:6px}
.pbox ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--c-text-2)}
.pbox li{display:flex;gap:8px;align-items:center}
.pbox li .ic{width:18px;height:18px;color:var(--ok-ic)}
.papers6{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start}   /* 폰 = 두 칸(종이 이름이 한 줄에 다 보이게 · 11차 덧 2) · PC = 넷 */
@media (max-width:999px){ .papers6 .pp{aspect-ratio:16/9} }
.pp{border-radius:12px;aspect-ratio:1;position:relative;overflow:hidden;border:1px solid var(--c-line)}
.pp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp span{position:absolute;left:6px;bottom:6px;background:#fff;border-radius:6px;padding:2px 6px;font-size:13px;font-weight:700;line-height:1.3;max-width:calc(100% - 12px);word-break:keep-all}   /* 판매 설정 종이 이름 — 안 자름(11차 덧 2) */
.pp1{background:#FBFBF8} .pp2{background:repeating-linear-gradient(90deg,#F4F1EA 0 2px,#F8F6F0 2px 4px)} .pp3{background:radial-gradient(circle at 30% 30%,#FFFFFF,#ECECEC)} .pp4{background:linear-gradient(135deg,#F6F2EA,#FFFFFF 40%,#EFE7DA 70%,#FFFFFF)}
#scrEntry .legal{margin-top:46px;background:#F7F7F7;padding:22px 18px 26px;font-size:13px;color:var(--c-text-2)}   /* 6판 꼬리 · 글은 13px #555(관문 20 · 시안 12px #767676 보다 크고 진하게) */
/* 만들기 면 이름표 · 면마다 크게(PC 에서만 · 11차 D) */
.sheet .ftag{display:none;position:absolute;left:10px;top:10px;z-index:1;font-size:13px;font-weight:700;background:var(--c-primary);color:#fff;border-radius:4px;padding:2px 7px}
.sheet.cur .ftag{background:var(--c-primary);color:var(--c-primary-ink)}
.sheet .fz{display:none;position:absolute;right:10px;top:10px;z-index:1;font-size:13px;font-weight:700;background:#fff;border:1px solid var(--c-line-2);border-radius:6px;padding:3px 9px;align-items:center;gap:4px;color:var(--c-text)}
.sheet .fz .ic{width:14px;height:14px}
.pcb{display:none}
@media (min-width:1000px){
  #scrEntry .in6{max-width:1080px;margin:0 auto;padding:0}
  #scrEntry>.bar{height:60px}
  #scrEntry>.bar>b{font-size:19px} #scrEntry>.bar .nm{font-size:15px;margin-left:6px}
  .hero6>.in6{grid-template-columns:1fr 470px;gap:30px;align-items:center;padding-top:40px;padding-bottom:40px}
  #scrEntry .hero6 h2{font-size:44px}
  #scrEntry .lead6{font-size:17px}
  #scrEntry .facts{margin-top:22px}
  #scrEntry .vis{order:0}
  #scrEntry .vis .bc{width:300px;padding:22px 24px}
  #scrEntry .vis .nm{font-size:18px} #scrEntry .vis .b1{left:20px;top:26px} #scrEntry .vis .b2{left:150px;top:96px}
  #scrEntry .badge{right:6px;top:10px;padding:12px 14px} #scrEntry .badge b{font-size:22px}
  #scrEntry .paths-h{margin-top:34px} #scrEntry .paths-h span{display:inline}
  .paths6{grid-auto-flow:column;grid-auto-columns:1fr;gap:18px}
  .p6{padding:24px;display:flex;flex-direction:column;align-items:stretch}
  .p6 .tile{width:calc(var(--ic-path) * 2);height:calc(var(--ic-path) * 2);border-radius:20px} .p6 .tile .ic{width:var(--ic-path);height:var(--ic-path)}
  .p6 .h4{font-size:20px;margin-top:16px}
  .p6 .s{margin-top:4px;flex:1}
  .p6 .ex{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
  .p6 .ex span{font-size:13px;background:#F5F5F5;border-radius:999px;padding:3px 10px;color:var(--c-text-2)}
  .p6 .go{display:flex;margin-top:16px;height:48px;border-radius:10px;align-items:center;justify-content:space-between;padding:0 16px;font-weight:700;font-size:15px;border:1.5px solid var(--go-line);background:var(--go-bg);color:var(--go-ink)}
  html[data-c="b"] .p6.p1 .go{border-color:#BFE2CB;color:#25663F} html[data-c="b"] .p6.p2 .go{border-color:#F3C9AE;color:#A84A14} html[data-c="b"] .p6.p3 .go{border-color:#D6CCF1;color:#573B9C}
  .p6 .go .ic{width:20px;height:20px}
  .sec6{margin-top:44px}
  .steps6{grid-template-columns:repeat(4,1fr);gap:14px}
  .price6{grid-template-columns:1.1fr 1fr} .papers6{grid-template-columns:repeat(4,1fr)}
  #scrEntry .legal{padding:22px max(32px,calc((100% - 1080px)/2)) 26px}
}
.drop .sil{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px} .drop .pick{display:none}   /* 폰 = 9차 그대로(명함 모양 칸·「파일 고르기」는 PC) */

/* 12차 · 화면 꾸미기 크기 · 자주 묻는 것 · 사진 칸 */
:root{--ic-path:40px;--ic-guide:26px;--sel-bg:#F5F5F5}
.faq{margin-top:28px}
.faq h4{margin:0 0 10px;font-size:16px}
.faq .qa{display:grid;gap:10px}
.faq .qa>div{border:1px solid var(--c-line);border-radius:12px;padding:14px 16px;background:#fff}
.faq .qa b{display:block;font-size:15px}
.faq .qa p{margin:6px 0 0;font-size:14px;color:var(--c-text-2);line-height:1.55}
.gi{display:inline-flex;vertical-align:middle;margin-right:8px;color:var(--ac)} .gi .ic,.gi img{width:var(--ic-guide);height:var(--ic-guide)}
img.icimg{object-fit:contain}
.rsex .exph{display:block;width:100%;aspect-ratio:90/50;object-fit:cover;border-radius:6px;border:1px solid var(--c-line);margin-bottom:8px}
.rsex .row span{display:block}
.org6 .sheet.mk img{width:100%;height:100%;object-fit:cover;display:block}
#scrRestore .tips3 .steps3 .ic{width:var(--ic-guide);height:var(--ic-guide)}
#scrEntry .fact .ic{width:var(--ic-guide);height:var(--ic-guide)}
.legal{background:#F7F7F7;color:var(--c-text-2)}   /* 회색 꼬리 위 글 = #555(관문 20) */
@media (min-width:1000px){
  .scr.two>.body>.faq{grid-column:1/-1}
  .faq .qa{grid-template-columns:repeat(3,1fr)}
  #scrEntry .priceSec.nopaper .price6,#priceSec.nopaper .price6{grid-template-columns:1fr}
  #scrMake.scr{grid-template-rows:auto 1fr auto auto} #scrMake>.legal{grid-column:1/-1;grid-row:3} #scrMake>.foot{grid-row:4}
  #scrPaper.scr,#scrOrder.scr{grid-template-rows:auto auto 1fr auto} #scrPaper>.legal,#scrOrder>.legal{grid-column:1/-1;grid-row:4}
}
/* 12차 3 중복: 주문 화면 아래 띠 금액 = 바로 위 「주문 내역」 청구 금액과 같아 띠에선 뺌(폰) · PC 종이·주문 오른쪽 상자 아래 요약 줄 = 상자 줄과 같아 뺌 */
#scrOrder .foot .sum b{display:none}
@media (min-width:1000px){ #scrPaper .foot .sum,#scrOrder .foot .sum{display:none} }

/* 13차 1 — 세로 긴 창 흰 구멍 0: 몸은 늘지 않고(내용만큼) · 자주 묻는 것·꼬리는 내용 바로 아래 48px · 남는 창은 꼬리 회색이 끝까지 채움 · 꼬리는 늘 맨 아래 */
.scr>.body{flex:none}
.scr>.legal{order:10;flex:1 0 auto;margin-top:48px;align-content:flex-start;align-items:flex-start}
.faq{margin-top:48px}
#scrEntry>.legal{margin-top:48px}
@media (min-width:1000px){
  #scrMake.scr{grid-template-rows:auto auto auto 1fr} #scrMake>.foot{grid-row:3} #scrMake>.legal{grid-row:4;align-self:stretch}   /* 아래 띠(단추) 다음에 꼬리 = 맨 아래 */
  #scrPaper.scr,#scrOrder.scr{grid-template-rows:auto auto auto 1fr} #scrPaper>.legal,#scrOrder>.legal{grid-row:4;align-self:stretch}
  .scr.two>.foot{order:9}
}

/* 13차 3 「종이」 상자 — 사진 없는 종이 = 이름·질감 글 카드(자리표 그림 0) */
.pp.np{aspect-ratio:auto;padding:14px 16px;background:#fff;border:1px solid var(--c-line-2);display:flex;flex-direction:column;gap:4px}
.pp.np span{position:static;padding:0;background:none;font-size:15px;max-width:none}
.pp small{display:block;font-size:13px;color:var(--c-text-2)}
.pp:not(.np) small{position:absolute;left:6px;top:6px;background:#fff;border-radius:6px;padding:1px 6px}
@media (max-width:999px){ .papers6 .pp.np{aspect-ratio:auto} }

/* ============================================================
   13차 4 — 구획(배치) 엔진 꼴: 줄(.lrow = 왼쪽 620 | 오른쪽 428 · 한쪽이 비면 전체) · 보이기 · 간격(인라인) · 정렬 · 바탕 · 카드 한 줄에(--cols) · 첫 띠 높이·사진 위치·글 크기
   ============================================================ */
.blk-off{display:none!important}
[data-blk][data-al="가운데"]{text-align:center}
[data-blk][data-al="가운데"] .paths-h{justify-content:center;gap:14px}
[data-blk][data-al="가운데"] .edit6{margin-left:auto;margin-right:auto}
.scr:not(#scrEntry) [data-blk][data-bg="연한"]{background:var(--ac-soft);padding:20px;border-radius:12px}
.scr:not(#scrEntry) [data-blk][data-bg="연회색"]{background:#F5F5F5;padding:20px;border-radius:12px}
.blk6[data-bg="연한"]{background:var(--ac-soft);padding-top:32px;padding-bottom:32px}
.blk6[data-bg="연회색"]{background:#F5F5F5;padding-top:32px;padding-bottom:32px}
.hero6[data-bg="흰"]{background:#fff} .hero6[data-bg="연회색"]{background:#F5F5F5}
.hero6[data-h="낮게"]>.in6{padding-top:14px;padding-bottom:14px} .hero6[data-h="높게"]>.in6{padding-top:44px;padding-bottom:40px}
.hero6[data-fs="1"] h2{font-size:26px!important} .hero6[data-fs="3"] h2{font-size:36px!important}
.hero6[data-ph="뒤"]{position:relative;overflow:hidden} .hero6[data-ph="뒤"]>.in6{position:static}
.hero6[data-ph="뒤"] .vis:not(.hidden){position:absolute;inset:0;z-index:0;border-radius:0;box-shadow:none;order:0}
.hero6[data-ph="뒤"] .vis img{width:100%;height:100%;object-fit:cover}
.hero6[data-ph="뒤"] .vis::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.72))}
.hero6[data-ph="뒤"] .htx{position:relative;z-index:1}
#scrEntry .paths-h{margin-top:0!important}
.blk6[data-blk="편집"] .edit6{margin-top:0}
#scrOrg [data-blk="검색"] .search{margin-top:0} .gridh{margin-top:0}
#scrFile [data-blk="올리기"] .drop{margin-top:0}
@media (min-width:1000px){
  .scr.two>.body{display:block}
  .lrow{display:grid;grid-template-columns:620px 428px;column-gap:32px;align-items:start}
  .lrow>.lc{position:sticky;top:80px;min-width:0} .lrow>.rc{min-width:0}
  .lrow.solo-r,.lrow.solo-l{grid-template-columns:1fr} .lrow.solo-r>.lc,.lrow.solo-l>.rc{display:none} .lrow.solo-r>.rc{position:static}
  #scrEntry .lrow{max-width:1080px;margin:0 auto} .lrow .in6{max-width:none!important;padding:0!important}
  #scrFile.two #fileRes:not(.hidden){display:grid!important;grid-template-columns:620px 428px;column-gap:32px;align-items:start}
  #scrFile.two #fileRes>.fleft{grid-column:1;grid-row:auto;position:sticky;top:80px}
  #scrFile.two #fileRes>.fright{grid-column:2;min-width:0}
  #scrFile.two #fLines,#scrFile.two #kinds{margin-top:0}
  #scrFile .guide3{grid-template-columns:1fr 1fr!important}
  #scrFile .lrow:not(.solo-r):not(.solo-l) .guide3{grid-template-columns:1fr!important}
  .hero6[data-ph="왼쪽"]>.in6{grid-template-columns:470px 1fr} .hero6[data-ph="왼쪽"] .vis{order:-1}
  .hero6[data-ph="뒤"]>.in6{grid-template-columns:1fr}
  .hero6[data-h="낮게"]>.in6{padding-top:20px;padding-bottom:20px} .hero6[data-h="높게"]>.in6{padding-top:72px;padding-bottom:72px}
  .hero6[data-fs="1"] h2{font-size:34px!important} .hero6[data-fs="3"] h2{font-size:54px!important}
  .paths6{grid-auto-flow:row!important;grid-template-columns:repeat(var(--cols,3),1fr)!important}
  .orgs{grid-template-columns:repeat(var(--cols,3),1fr)!important}
  .more{grid-template-columns:repeat(var(--cols,3),1fr)!important}
  .steps6{grid-template-columns:repeat(var(--cols,4),1fr)!important}
  .faq .qa{grid-template-columns:repeat(var(--cols,3),1fr)!important}
  .papers6{grid-template-columns:repeat(var(--cols,4),1fr)!important}
}
.legal .legalLinks a{display:inline-flex;align-items:center;min-height:44px}   /* 13차: 처리방침 링크 = 누르는 자리 44(관문 21) */

/* ── 13차 통합(11-11 · 채대리 A~F) ───────────────────────────────── */
:root{--lv-ok:#1E7B34;--lv-ok-bg:#E6F4EA;--lv-warn:#8A5A12;--lv-warn-bg:#FFF4E0;--lv-warn-line:#E39B2D;--lv-bad:#B3261E;--lv-bad-bg:#FDECEA;--lv-bad-line:#E3897F;--lv-info:#555555;--lv-info-bg:#F0F0F0}
/* B1 꺼진 주 단추 = 꼴만 꺼짐(누르면 문제 자리로) · 그 자리 테두리·색 강조 + 한 줄 */
.btn.off{opacity:.38;cursor:pointer}
.flash{outline:2px solid var(--lv-bad)!important;outline-offset:3px;border-radius:8px;background-color:var(--lv-bad-bg)!important}
.nudge{grid-column:1/-1;font-size:13px;color:var(--lv-bad);background:var(--lv-bad-bg);border-radius:6px;padding:8px 10px;margin-top:8px}
/* B4 검사 결과 네 단계 — ✓ 정상(초록) · ⚠ 확인 필요(주황) · ✕ 고쳐야 함(빨강) · i 안내(회색) · ⚠ 는 뜰 때 테두리 세 번 반짝(움직임 줄이기면 색만) */
.rl.ok i{color:var(--lv-ok);background:var(--lv-ok-bg)} .rl.warn i{color:var(--lv-warn);background:#FFE7BF} .rl.bad i{color:var(--lv-bad);background:#fff} .rl.info i{color:var(--lv-info);background:var(--lv-info-bg)}
.rl.warn{border:1.5px solid var(--lv-warn-line);background:var(--lv-warn-bg);border-radius:8px;padding:9px 10px;margin:6px 0}
.rl.bad{border:1.5px solid var(--lv-bad-line);background:var(--lv-bad-bg);border-radius:8px;padding:9px 10px;margin:6px 0}
.rl.go{cursor:pointer} .rl .more{display:block;margin-top:2px;font-size:13px;color:var(--c-text-2);text-decoration:underline}
.lv{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--c-line-2);border-radius:8px;padding:9px 12px;margin-top:10px;font-size:14px;background:#fff}
.lv i{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:13px}
.lv.ok{border-color:#9CCFAE;background:var(--lv-ok-bg);color:var(--lv-ok)} .lv.ok i{background:#fff}
.lv.warn{border-color:var(--lv-warn-line);background:var(--lv-warn-bg);color:var(--lv-warn)} .lv.warn i{background:#FFE7BF}
.lv.bad{border-color:var(--lv-bad-line);background:var(--lv-bad-bg);color:var(--lv-bad)} .lv.bad i{background:#fff}
.lv.info{border-color:var(--c-line);background:var(--lv-info-bg);color:var(--lv-info)} .lv.info i{background:#fff}
.kind .st.warn{color:var(--lv-warn);background:#FFE7BF} .kind .st.bad{color:var(--lv-bad);background:var(--lv-bad-bg)} .pcd .st.bad{color:var(--lv-bad)}
.blink{animation:lvblink .5s ease-in-out 3}
@keyframes lvblink{0%,100%{box-shadow:0 0 0 0 rgba(227,155,45,0)}50%{box-shadow:0 0 0 4px rgba(227,155,45,.6)}}
@media (prefers-reduced-motion:reduce){.blink{animation:none}}
.chk.ack{margin-top:8px}
/* B3 명함 미리보기 = 도련까지 · 재단선(점선)·도련선(바깥 선) 연하게 · 도련 자리는 옅게 덮음 · ⚠ 면은 재단선 안쪽 3mm 띠 강조색 옅게 */
.sheet>svg.cut,.fimg>svg.cut{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
svg.cut .veil{fill:rgba(255,255,255,.38)}
svg.cut .bl{fill:none;stroke:rgba(120,120,120,.6);stroke-width:1.4;vector-effect:non-scaling-stroke}
svg.cut .tr{fill:none;stroke:rgba(100,100,100,.85);stroke-width:1.2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
svg.cut .band{fill:var(--ac,#D9480F);opacity:0}
.sheet.wband>svg.cut .band,svg.cut.wb .band{opacity:.18}
.sheet.cutw{border-radius:2px}
.pv.real .sheet{width:var(--real-w,94mm)}
/* D 종이 = 이름·설명·구분(값 0) · 모서리 그림 · 받는 방법 · 주문 내역(최종 금액 크게) · 서류 링크 */
.pcard .gtag{flex:none;font-size:13px;font-weight:600;color:var(--c-text-2);background:var(--c-preview-bg);border-radius:999px;padding:3px 10px;white-space:nowrap}
.pcard .gtag:empty{display:none}
.seg.corner2 button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:88px;padding:8px}
.seg.corner2 .cpic{display:flex;align-items:center;justify-content:center;width:40px;height:40px}
.seg.corner2 .cpic .ic,.seg.corner2 .cpic img{width:40px;height:40px}
.seg.corner2 button.na{opacity:.45}
.rcard .li.nm span:last-child{color:var(--c-text-2);font-size:13px;text-align:right}
.rcard .li.sm{font-size:13px;color:var(--c-text-2);padding:2px 0} .rcard .li.sm.first{border-top:1px solid var(--c-line);margin-top:6px;padding-top:8px}
.rcard .li.tot{font-size:18px} .rcard .li.tot span:last-child{font-size:20px}
.doclink{margin-top:12px}
.doca{background:none;border:0;padding:0;min-height:44px;display:inline-flex;align-items:center;gap:6px;color:var(--c-text-2);font-size:13px;text-decoration:underline;cursor:pointer}
.doca .ic{width:16px;height:16px}
.docf{border:1px solid var(--c-line);border-radius:8px;padding:12px;margin-top:4px;display:grid;gap:8px}
.docf label{font-size:13px;color:var(--c-text-2)}
.docf .in{display:flex;align-items:center;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);height:var(--ctl-h);padding:0 12px;background:#fff}
.docf .in input{border:0;outline:0;background:none;font:inherit;font-size:16px;flex:1;min-width:0;color:var(--c-text);height:100%}
.docf .btn{min-height:44px}
.paybig{margin-top:10px}
@media (min-width:1000px){ .mobonly{display:none!important} .sidecard .doclink{margin-top:6px} }
/* 13차 A2 — 파일 올린 뒤 안내 두 상자 = 전체 폭 두 칸 · 규격 그림은 작게 옆 글(두 상자 높이 비슷 · 흰 빈칸 0) */
@media (min-width:1000px){
  #scrFile.has #gSpec{display:flex;gap:18px;align-items:center} #scrFile.has #gSpec .specw{width:220px;flex:none} #scrFile.has #gSpec .gs{margin:0}
  #scrFile.has .guide3>div{align-self:stretch}
}
/* 13차 C2 — 띠의 .info 꼴이 검사 줄(i 안내)에 새던 것 막음(「RGB 색 — …」 한 줄) */
.rl.info,.lv.info{display:flex;grid-auto-flow:row;grid-template-columns:none}
.rl.info b,.lv.info b{display:inline;font-size:inherit;margin:0;white-space:normal;letter-spacing:inherit}
.rl.info{margin-top:0;font-size:14px;color:inherit}
.hint.error.bad,.flash .hint.error{color:var(--lv-bad);background:var(--lv-bad-bg)}   /* 13차 B4 칸 아래 「고쳐야 함」 = 빨강(넘침 안내는 주황 그대로) */

/* ── 14차(11-11) ── */
@media (min-width:1000px){ #scrDone>.foot{max-width:640px;width:100%;margin:0 auto;border-top:0;padding-left:0;padding-right:0;box-sizing:border-box} }   /* A1 「처음으로」 = 가운데 칸 안 */
.legal .nw{white-space:nowrap}                                                                                 /* A4 번호는 한 줄 */
.docf .docx{justify-self:start;min-height:44px}
.rl .lk2{display:block;margin-top:4px;background:none;border:0;padding:0;min-height:44px;font-size:13px;color:var(--c-text);text-decoration:underline;cursor:pointer;text-align:left}
/* 14차 B3 「재단선 보기」 · 견본 카드도 도련까지 */
html.nocut svg.cut{display:none}
.cuttg{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;background:none;border:0;color:var(--c-text-2);font-size:13px;cursor:pointer;white-space:nowrap}
.cuttg .sw{width:30px;height:18px;border-radius:9px;background:var(--c-line-2);position:relative;flex:none;transition:background .15s}
.cuttg .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
.cuttg.on .sw{background:var(--c-primary)} .cuttg.on .sw::after{left:14px}
.tabs .cutslot{margin-left:auto;display:inline-flex} .tabs .cutslot+.zbtn,.tabs .cutslot~.pvreal{margin-left:8px}
.cutrow{display:flex;justify-content:flex-end} .ver .cutrow{margin-bottom:4px}
.gridh .cutslot{display:inline-flex;vertical-align:middle;margin-left:10px}
@media (prefers-reduced-motion:reduce){ .cuttg .sw,.cuttg .sw::after{transition:none} }
/* 14차 D 로그인 · 인증 칸 · 내 주문 */
.authbox{margin-top:8px;display:grid;gap:8px}
.authbox .asend{min-height:48px}
.authbox .acode{display:grid;gap:6px}
.authbox .acode>label{font-size:13px;color:var(--c-text-2)}
.authbox .arow{display:flex;gap:8px;align-items:stretch}
.authbox .arow .in{flex:1;height:var(--ctl-h);border:1px solid var(--c-line-2);border-radius:var(--r-ctl);padding:0 12px;display:flex;align-items:center;gap:8px;background:#fff}
.authbox .acin{border:0;outline:0;background:none;font:inherit;font-size:20px;letter-spacing:.3em;flex:1;min-width:0;height:100%}
.authbox .atime{font-size:13px;color:var(--lv-warn);font-variant-numeric:tabular-nums;white-space:nowrap}
.authbox .aok{min-height:var(--ctl-h);padding:0 18px}
.authbox .aresend{justify-self:start}
.authbox .lv{margin-top:0}
.myhead{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;color:var(--c-text-2)}
.myhead .lk2{background:none;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);min-height:44px;padding:0 14px;cursor:pointer;font-size:14px;color:var(--c-text)}
.mycard{margin-top:14px} .mycard h4{margin-bottom:2px} .mycard .sub{margin:0 0 8px}
.steps .n.todo{background:#fff;color:var(--c-text-2);border:1.5px solid var(--c-line-2)}

/* ============================================================
   15차(11-12 정사장) — 손님 화면 고침
   ============================================================ */
/* C3 고른 표시 = 색 역할 여섯째(옷마다 · 보조색에서 떼어 냄) — 값이 없으면 보조색 */
:root{--sel:var(--c-primary);--sel-line:var(--c-primary);--sel-bg:#F5F5F5;--sel-dot:var(--c-primary);--sel-dot-ink:var(--c-primary-ink,#fff)}
.chip.on{border:2px solid var(--sel-line);background:var(--sel-bg);color:var(--c-text);font-weight:700;padding:0 11px}
.vcard.sel,.pcard.sel,.qopt.sel,.pcd.on,.kind.on{border-color:var(--sel-line);background:var(--sel-bg)}
.pcard.sel::after,.qopt.sel::after,.vcard.sel::after{background:var(--sel-dot);color:var(--sel-dot-ink)}
.seg button.on{border-color:var(--sel-line);background:var(--sel-bg);color:var(--c-text)}
.tabs button.on{border-bottom-color:var(--sel-line)}
.btn-p{border:2px solid var(--sel-line)}                       /* 주 단추도 옷 색(테두리 · 채움은 관리창 보조색) */
.cuttg.on .sw{background:var(--sel-dot)}
.rcpt.cur{border-color:var(--sel-line)}
/* C2 하나만 고르는 묶음 = 공통 한 부품 — 고르면 나머지는 연하게(누르면 바로 바꿔 고름 · 꺼짐 아님) · PC 마우스를 올리면 잠깐 진하게 */
.pick1:has(> .sel, > .on) > :is(.chip,.qopt,.pcard,button):not(.sel):not(.on):not(.act){border-color:var(--c-line);background:#fff}
.pick1:has(> .sel, > .on) > :is(.chip,.qopt,.pcard,button):not(.sel):not(.on):not(.act),
.pick1:has(> .sel, > .on) > :not(.sel):not(.on):not(.act) :is(b,small,span:not(.gtag),.pr,.ct){color:#767676}
.pick1:has(> .sel, > .on) > :not(.sel):not(.on):not(.act) :is(.ic,img,.sq,.cpic){opacity:.55}
@media (hover:hover){
  .pick1 > :not(.sel):not(.on):not(.na):hover{border-color:var(--c-text-2)!important}
  .pick1 > :not(.sel):not(.on):hover, .pick1 > :not(.sel):not(.on):hover :is(b,small,span:not(.gtag),.pr,.ct){color:var(--c-text)!important}
  .pick1 > :not(.sel):not(.on):hover :is(.ic,img,.sq,.cpic){opacity:1}
}
/* C1 종이·수량 화면 = 구획마다 상자 · 제목 · 간격 / A 주문 화면도 같은 상자 */
.psec,.osec{border:1px solid var(--c-line);border-radius:12px;padding:2px 16px 16px;margin-top:14px;background:#fff}
.psec>.sec,.osec>.sec{margin:14px 0 10px}
.psec>div>.qopt:first-child,.psec>div>.pcard:first-child{margin-top:0}
.osec>.sub{margin:-4px 0 10px}
.okline{display:flex;align-items:center;justify-content:space-between;gap:10px}
.okline .lv{margin-top:0;flex:1}
.okline .lk2{flex:none;min-height:44px;padding:0 12px;border:1px solid var(--c-line-2);border-radius:8px;background:#fff;font-size:14px;cursor:pointer}
/* 덧① 퀵 = 손님이 직접 부르기 안내 */
.quickinfo{margin-top:10px;border-radius:8px;background:var(--c-preview-bg);padding:12px 14px;font-size:14px}
.quickinfo p{margin:0 0 8px}
.quickinfo .li{display:flex;gap:12px;padding:3px 0}
.quickinfo .li span{flex:none;width:84px;color:var(--c-text-2)}
.mylater{text-align:center;margin:10px 0 0}
/* C5 발송 띠 — 큰 트럭 · 오늘 ○시까지 결제하면 / 날짜 크게 / 마감까지 남은 시간 · 1시간 안 = 주황 + 트럭이 살짝 움직임 */
.bandslot:empty{display:none}
.bandslot .band{margin:0 0 12px}
#scrMake .bandslot .band{margin:12px 0 0}
.band{display:flex;align-items:center;gap:14px;margin-top:14px;border-radius:12px;padding:14px 16px;background:var(--ac-weak,#F5F5F5);border:1.5px solid var(--ac-line,#D4D4D4)}
.band .truck{flex:none;width:64px;height:40px;overflow:visible}
.band .truck .tb,.band .truck .tc{fill:var(--ac,#3D3D3D)}
.band .truck .tw{fill:#fff;opacity:.85}
.band .truck .tr2{fill:#222} .band .truck .th{fill:#ddd}
.band .truck .tl{fill:none;stroke:var(--ac,#3D3D3D);stroke-width:2.4;stroke-linecap:round;opacity:0}
.band .bt{display:flex;flex-direction:column;min-width:0}
.band .l1{font-size:14px;color:var(--c-text-2)}
.band .big{font-size:22px;letter-spacing:-.02em;line-height:1.3;color:var(--c-text)}
.band .l3{font-size:14px;font-weight:700;color:var(--ac-ink,#111)}
.band.urgent{background:#FFF1E0;border-color:#F0A04B}
.band.urgent .truck .tb,.band.urgent .truck .tc{fill:#E8740C}
.band.urgent .l3{color:#9A4A00}
.band.urgent .truck{animation:truckGo 1.1s ease-in-out infinite}
.band.urgent .truck .tl{opacity:.8}
@keyframes truckGo{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){ .band.urgent .truck{animation:none} }
.strip .band{margin-top:12px}
/* B9 재단선 · 도련 · 안전선 셋 + 범례 한 줄 · 끄면 셋 다 사라지고 완성 크기만 */
svg.cut .veil{fill:rgba(255,255,255,.42)}
svg.cut .safe{fill:none;stroke:rgba(120,120,120,.55);stroke-width:1;vector-effect:non-scaling-stroke}
svg.cut .bl{display:none}
html.nocut .sheet.cutw{background:transparent;border-color:transparent;box-shadow:none!important}
html.nocut .sheet.cutw canvas,html.nocut .fimg.cutf img{clip-path:inset(var(--ct,0) var(--cr,0) var(--cb,0) var(--cl,0) round var(--crx,0) / var(--cry,0))}
.cutlg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--c-text-2);margin-top:8px}
.cutlg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cutlg i{display:inline-block;width:22px;height:12px;flex:none}
.cutlg .lg-tr{height:0;border-top:1.6px dashed rgba(90,90,90,.9)}
.cutlg .lg-bl{background:#EDEDED;border:1px solid #D9D9D9}
.cutlg .lg-sf{border:1px solid rgba(120,120,120,.55);border-radius:2px;background:#fff}
html.nocut .cutlg{display:none}
.cutrow{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.cutrow .cutlg{margin-top:0}
.gridh .cutlg{margin-top:4px}
/* B10 크게 보기 = 작은 창(PC 폭 절반쯤 · 상한 760 / 폰 양옆 16px) · 높이는 내용만큼 · 뒤 화면 반투명 */
.zoom{position:fixed;inset:0;z-index:60;background:rgba(17,17,17,.42);display:flex;align-items:center;justify-content:center;padding:16px;color:var(--c-text)}
.zoom:not(.hidden){animation:zFade .18s ease-out}
@keyframes zFade{from{background:rgba(17,17,17,0)}to{background:rgba(17,17,17,.42)}}
@media (prefers-reduced-motion:reduce){ .zoom:not(.hidden){animation:none} }
.zoom .zwin{background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.28);width:min(760px,50vw);max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;padding:6px 16px 14px}
@media (max-width:999px){ .zoom .zwin{width:100%;padding:4px 12px 12px} }
.zoom .zbar{display:flex;align-items:center;gap:8px;min-height:48px}
.zoom .ztabs{display:flex;gap:4px}
.zoom .ztabs button{background:none;border:0;border-bottom:2px solid transparent;min-height:44px;padding:0 10px;font-size:15px;color:var(--c-text-2);cursor:pointer}
.zoom .ztabs button.on{color:var(--c-text);font-weight:700;border-bottom-color:var(--sel-line)}
.zoom .zttl{flex:1;font-size:15px}
.zoom .zx{margin-left:auto;width:44px;height:44px;border:1px solid var(--c-line-2);border-radius:10px;background:#fff;font-size:18px;cursor:pointer;color:var(--c-text)}
.zoom .zstage{position:relative;overflow:hidden;margin:6px auto 0;background:var(--c-preview-bg);border-radius:6px;touch-action:none;user-select:none;-webkit-user-select:none;flex:none}
.zoom .zstage canvas{position:absolute;left:0;top:0;transform-origin:0 0;display:block;background:#fff;margin:0}
.zoom .zctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.zoom .zpm{display:inline-flex;align-items:center;border:1px solid var(--c-line-2);border-radius:10px}
.zoom .zb{width:44px;height:44px;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--c-text)}
.zoom .zb:disabled{opacity:.35;cursor:default}
.zoom .zpct{min-width:76px;text-align:center;font-size:14px;font-weight:700}
.zoom .zsteps{display:inline-flex;gap:4px}
.zoom .zreal{display:inline-flex;align-items:center}
.zoom .zsteps button,.zoom .zreal{min-height:44px;padding:0 10px;border:1px solid var(--c-line-2);border-radius:10px;background:#fff;font-size:14px;cursor:pointer;color:var(--c-text)}
.zoom .zsteps button.on,.zoom .zreal.on{border:2px solid var(--sel-line);background:var(--sel-bg);font-weight:700;padding:0 9px}
.zoom .znote{margin:6px 0 0;font-size:13px;color:var(--c-text-2)}
.zoom .zfoot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:6px}
.zoom .zfoot .cutlg{margin-top:0}
.zwrap{position:relative}
.zmini{position:absolute;right:8px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 10px;border:1px solid var(--c-line-2);border-radius:8px;background:rgba(255,255,255,.95);font-size:13px;font-weight:700;color:var(--c-text);cursor:pointer}
.zmini .ic{width:14px;height:14px}
.shot{position:relative}
.shot .zmini{top:6px;right:6px}
/* B1 직함·부서 = 칸 + 고르는 칩(맞는 것만) */
.pk+.pk{margin-top:12px}
.pkchips{margin-top:8px}
.pkchips .chip{flex:none}
/* B2·B3 영문 확인 ⚠ · 상세 주소 못 바꾼 말 */
.ennote{margin-top:8px}
.ennote .lv{margin-top:0}
.ennote .enb{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.enrest{margin-top:8px}
/* B6 편집의뢰 = 「종이·수량 고르기」 왼쪽 · B7 한 명 더 + 여러 명 한꺼번에 = 한 상자 */
.fbtn2{display:flex;gap:8px;flex:none}
.fbtn2 .btn{white-space:nowrap}
.fbtn2 #reqLine{padding:0 12px;font-size:14px;gap:4px}
.fbtn2 #reqLine .ic{width:16px;height:16px}
@media (max-width:999px){ #scrMake .foot{flex-wrap:wrap;row-gap:8px} #scrMake .foot .sum{flex-basis:100%} #scrMake .foot .fbtn2{width:100%} #scrMake .foot .fbtn2 #btnMake{flex:1;padding:0 12px} }
@media (min-width:1000px){ #scrMake .foot #reqLine{min-width:0} #scrMake .foot #btnMake{min-width:300px} }
.many{border-style:solid;padding:14px 16px}
.many .mh{margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.many .mh b{font-size:15px} .many .mh span{font-size:13px;color:var(--c-text-2)}
.many .addp2{margin-bottom:14px}
/* C4 명함 내용 = 영수증처럼(사람마다 한 장) */
.rows{display:block}
.rcpt{border:1px solid var(--c-line-2);border-radius:10px;padding:10px 14px 6px;margin-top:12px;background:#fff}
.rcpt .rh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:1.5px dashed var(--c-line-2)}
.rcpt .rh b{font-size:15px} .rcpt .rh span{font-size:13px;color:var(--c-text-2)}
.rcpt .rr{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;text-align:left;border:0;border-bottom:1px dashed var(--c-line);background:none;padding:9px 0;min-height:44px;cursor:pointer;margin:0}
.rcpt .rr:last-child{border-bottom:0}
.rcpt .rr small{flex:none;color:var(--c-text-2);font-size:13px}
.rcpt .rr b{font-size:14px;text-align:right;word-break:keep-all;overflow-wrap:anywhere}
.rcpt .grp{font-size:13px;font-weight:700;color:var(--c-text-2);margin-top:10px;padding-bottom:2px}