/* ============================================================
   명함 손님 화면 꼴 — 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(--c-preview-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-text);color:#fff;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:#000;font-weight:700;border-bottom-color:#000}
.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-text);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(--c-preview-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(--c-preview-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(--c-preview-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-text);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-text);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 .chip.on{background:#fff;color:var(--c-text);border:1.5px solid var(--c-text)}
  .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:40px;height:40px;border-radius:10px;background:var(--c-primary);color:#fff;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:34px;height:34px;padding:7px;border-radius:10px;background:var(--c-preview-bg);color:var(--c-primary);box-sizing:content-box}
.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(--c-preview-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(--c-primary);color:var(--c-primary-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(--c-preview-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;height:180px;order:-1}
#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:56px;height:56px;border-radius:15px;grid-row:span 2;display:flex;align-items:center;justify-content:center}
.p6 .tile .ic{width:28px;height:28px}
.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:2px}
.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-text)}
.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{height:290px;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:68px;height:68px;border-radius:18px} .p6 .tile .ic{width:34px;height:34px}
  .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) */