:root{
      --panel-bg: rgba(255,255,255,0.96);
      --line:#ececf0;
      --ink:#16171b;
      --sub:#8a8d96;
      --accent:#111;
    }
    *{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
    html,body{ width:100%; height:100%; overflow:hidden; background:#eceef2;
      font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic","Apple SD Gothic Neo",sans-serif; color:var(--ink); }
    button, input, select, textarea{ font-family:inherit; }   /* 폼 요소도 Pretendard 상속 */
    #stage{ position:fixed; inset:0; }
    canvas{ display:block; touch-action:none; }

    /* 상단 바 */
    #topbar{ position:fixed; top:0; left:0; right:0; padding:12px 14px calc(12px + env(safe-area-inset-top));
      display:flex; align-items:center; justify-content:space-between; gap:10px; pointer-events:none; z-index:5; }
    #topbar .tleft, #topbar .tright{ display:flex; align-items:center; gap:8px; min-width:0; }
    #topbar .title{ font-size:15px; font-weight:700; letter-spacing:-0.2px; line-height:1.1;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    #topbar .title small{ display:block; font-size:11px; font-weight:500; color:var(--sub); margin-top:1px; }
    #reset, .tbtn{ pointer-events:auto; border:none; background:var(--panel-bg); color:var(--ink);
      font-size:12px; font-weight:600; padding:8px 12px; border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
    .tbtn.primary{ background:#111; color:#fff; }
    /* 아이콘 버튼(뒤로/붓/설정) */
    .iconbtn{ pointer-events:auto; flex:none; border:none; background:var(--panel-bg); color:var(--ink);
      width:36px; height:36px; border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.08);
      display:inline-flex; align-items:center; justify-content:center; }
    .iconbtn:active{ background:#f0f1f4; }
    #backBtn[hidden]{ display:none; }

    /* 로딩 */
    #loader{ position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
      background:#eceef2; z-index:20; transition:opacity .5s; gap:14px; }
    #loader.hide{ opacity:0; pointer-events:none; }
    .spin{ width:34px; height:34px; border:3px solid #d7d9e0; border-top-color:#111; border-radius:50%; animation:sp 0.8s linear infinite; }
    @keyframes sp{ to{ transform:rotate(360deg); } }
    #loadtxt{ font-size:13px; color:var(--sub); }

    /* 하단 시트 — 높이 제한 + 컨트롤만 내부 스크롤 → 양말이 항상 보임 */
    #sheet{ position:fixed; left:0; right:0; bottom:0; z-index:6;
      background:#f3f4f7; backdrop-filter:saturate(180%) blur(12px);
      border-radius:20px 20px 0 0; box-shadow:0 -6px 24px rgba(0,0,0,.12);
      padding:8px 14px calc(12px + env(safe-area-inset-bottom));
      display:flex; flex-direction:column; }   /* 높이=헤더+ctrlScroll(JS가 Body 높이로 고정) */
    /* 컨트롤 영역: 세로 스크롤만 허용(좌우 드래그 금지). 안쪽 가로 목록은 각자 pan-x 로 스와이프. */
    #ctrlScroll{ flex:none; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
      touch-action:pan-y; -webkit-overflow-scrolling:touch; padding:2px; margin:-2px; }
    .grab{ width:38px; height:3px; border-radius:2px; background:#d6d8df; margin:0 auto 5px; flex:none; }

    /* 가격 바 */
    #priceBar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 2px 5px; }
    #priceMain{ font-size:18px; font-weight:800; color:var(--ink); min-width:0; }
    #priceMain small{ font-size:11px; font-weight:600; color:var(--sub); white-space:nowrap; }

    /* CTA(주문 검토 / 장바구니) */
    .cta{ pointer-events:auto; flex:none; border:none; background:#111; color:#fff; font-size:13px; font-weight:700;
      padding:10px 16px; border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.12); }
    .cta:disabled{ opacity:.4; }

    /* 색 예산 미터 (공유 6색) */
    #colorMeter{ display:flex; align-items:center; gap:6px; margin:0 2px 6px; min-height:16px; flex-wrap:wrap; }
    #colorMeter .cm-label{ font-size:11px; font-weight:700; color:var(--sub); }
    #colorMeter .cm-sw{ width:15px; height:15px; border-radius:5px; border:1px solid rgba(0,0,0,.18); flex:none; }
    #colorMeter .cm-sw.cm-logo{ background:repeating-linear-gradient(45deg,#bbb 0 3px,#fff 3px 6px); }
    #colorMeter .cm-count{ font-size:11px; font-weight:700; color:var(--ink); margin-left:2px; }
    #colorMeter .cm-count.full{ color:#DD001B; }
    #colorMeter .cm-note{ font-size:10px; font-weight:600; color:var(--sub); }
    .sw.disabled{ opacity:.25; }   /* 클릭은 허용 → pickColor가 막고 6색 안내 표시 */

    /* 주문 검토 화면 */
    #orderScreen{ position:fixed; inset:0; z-index:30; background:#f4f5f8; display:flex; flex-direction:column; }
    #orderScreen[hidden]{ display:none; }
    .oc-head{ display:flex; align-items:center; justify-content:space-between;
      padding:calc(12px + env(safe-area-inset-top)) 14px 12px; background:#fff; border-bottom:1px solid var(--line); }
    .oc-title{ font-size:15px; font-weight:800; }
    .oc-body{ flex:1; overflow-y:auto; padding:14px; -webkit-overflow-scrolling:touch; }
    .oc-shots{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 -4px 20px; }
    .oshot{ width:100%; aspect-ratio:1/1; border-radius:16px; background:#eceef2; object-fit:cover; border:1px solid var(--line); }
    .oc-sec-title{ font-size:13px; font-weight:800; margin:0 2px 10px; display:flex; justify-content:space-between; align-items:baseline; }
    .oc-sec-title span{ font-size:11px; font-weight:600; color:var(--sub); }

    /* 디자인 요약(스펙) */
    .oc-spec{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:4px 14px; margin-bottom:20px; }
    .spec-row{ display:flex; align-items:center; justify-content:space-between; gap:14px;
      padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
    .spec-row:first-child{ border-top:none; }
    .spec-row .k{ color:var(--sub); font-weight:600; flex:none; }
    .spec-row .v{ display:flex; align-items:center; gap:7px; font-weight:700; text-align:right;
      min-width:0; overflow:hidden; }
    .spec-row .v span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .spec-row .v small{ color:var(--sub); font-weight:600; flex:none; }
    .sw2{ width:16px; height:16px; border-radius:5px; border:1px solid rgba(0,0,0,.15); flex:none; display:inline-block; }

    /* 공유(PDF / 링크) */
    .oc-share{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:20px; }
    .oc-share-h{ font-size:13px; font-weight:800; margin-bottom:8px; }
    .oc-share-btns{ display:flex; gap:8px; }
    .oshare{ flex:1; border:1.5px solid var(--line); background:#fff; color:var(--ink);
      font-size:13px; font-weight:700; padding:11px; border-radius:11px; }
    .oshare:active{ background:#f0f1f4; }
    .oc-share-note{ font-size:11px; color:var(--sub); margin-top:8px; line-height:1.45; }
    .size-row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
      background:#fff; border:1px solid var(--line); border-radius:14px; padding:11px 14px; margin-bottom:8px; }
    .size-meta b{ font-size:15px; font-weight:800; }
    .size-meta small{ display:block; font-size:11px; color:var(--sub); margin-top:1px; }
    .qstep{ display:flex; align-items:center; gap:4px; flex:none; }
    .qbtn{ width:34px; height:34px; border:1px solid var(--line); background:#fff; border-radius:10px;
      font-size:18px; font-weight:700; color:var(--ink); line-height:1; }
    .qbtn:active{ background:#f0f1f4; }
    .qval{ width:54px; text-align:center; font-size:15px; font-weight:800; color:var(--ink); font-family:inherit;
      border:1px solid transparent; border-radius:8px; background:transparent; padding:6px 2px; -moz-appearance:textfield; }
    .qval:hover{ border-color:var(--line); }
    .qval:focus{ border-color:var(--ink); background:#fff; outline:none; }
    .qval::-webkit-outer-spin-button, .qval::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
    .oc-summary{ margin-top:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 14px; }
    .sumrow{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--ink); padding:3px 0; }
    .sumrow span{ color:var(--sub); }
    .sumrow b{ font-weight:800; }
    .sumrow-save span, .sumrow-save b{ color:#16A34A; }
    /* 예상 배송 도착일 박스 (주문방식 ↔ 사이즈 사이) */
    .oc-eta{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:11px 14px; margin:4px 2px 14px; }
    .oc-eta[hidden]{ display:none; }
    .oc-eta .eta-ic{ flex:0 0 auto; display:flex; }
    .oc-eta .eta-txt{ font-size:12.5px; color:var(--sub); font-weight:600; line-height:1.45; text-align:left; }
    .oc-eta .eta-txt b{ color:var(--ink); }
    .oc-eta .eta-date{ color:#FF7A1A; font-weight:800; }
    .oc-foot{ display:flex; align-items:center; gap:12px;
      padding:12px 14px calc(12px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); }
    .oc-total{ display:flex; flex-direction:column; line-height:1.1; flex:none; }
    .oc-total span{ font-size:11px; color:var(--sub); font-weight:600; }
    .oc-total b{ font-size:19px; font-weight:800; }
    .oc-foot .cta{ flex:1; padding:14px; font-size:15px; }

    /* 로고 타입(니트/자수) 토글 — 레퍼런스 썸네일 */
    #logoTypeSeg{ display:flex; gap:8px; }
    .ltype{ flex:1; display:flex; align-items:center; gap:8px; text-align:left;
      border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:12px; padding:6px 8px; }
    .ltype img{ width:40px; height:40px; border-radius:8px; object-fit:cover; flex:none; background:#f1f2f5; }
    .ltype span{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
    .ltype b{ font-size:13px; font-weight:700; }
    .ltype small{ font-size:10px; font-weight:600; color:var(--sub); white-space:nowrap; }
    .ltype.active{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(17,17,17,.06); }

    /* 텍스트 방향(가로/세로) 세그먼트 */
    .dirseg{ display:flex; gap:6px; flex:1; }
    .tdir{ flex:1; border:1.5px solid var(--line); background:#fff; color:var(--sub);
      border-radius:999px; padding:7px 10px; font-size:12px; font-weight:700; }
    .tdir.active{ border-color:var(--ink); color:var(--ink); box-shadow:0 0 0 3px rgba(17,17,17,.06); }

    /* 스텝 pill (가로 스크롤, 얇음) */
    /* 가이드형: 알약 줄(스크롤) + 고정 Next 버튼 + 한 줄 힌트 */
    #pillRow{ display:flex; align-items:flex-start; gap:8px; }
    #pillRow #stepPills{ flex:1 1 auto; min-width:0; }
    #stepHint{ font-size:12.5px; color:#6b6e78; line-height:1.4; padding:0 3px 5px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    #stepHint b{ color:var(--ink); font-weight:800; }
    .pill .pnum{ width:18px; height:18px; border-radius:50%; background:#e9eaee; color:#7b7e88;
      font-size:11px; font-weight:800; font-style:normal; line-height:1; font-variant-numeric:tabular-nums;
      display:inline-flex; align-items:center; justify-content:center; flex:none; }
    .pill.active .pnum{ background:var(--ink); color:#fff; }
    .pill .pnum.done{ background:#16a34a; color:#fff; }   /* 완료 = 초록 채움 + 흰 체크(SVG) */
    .pill .pnum svg{ width:10px; height:10px; display:block; }
    /* ⑨ 아직 안 한 스텝은 비활성 느낌(반투명+연한 톤) */
    .pill.todo{ opacity:.55; background:#f4f5f8; }
    /* ① 좁은 폰: 비활성 알약은 번호만(라벨·색점 숨김) → 6개가 다 보임 */
    @media (max-width:420px){
      #stepPills{ gap:5px; }
      .pill:not(.active) span{ display:none; }
      .pill:not(.active) .pdot{ display:none; }
      .pill:not(.active){ padding:9px 9px; }
    }
    /* ⑩ 상단(가격·알약·힌트=회색 띠) ↔ 컨트롤(흰 카드) 분리 */
    #ctrlScroll{ background:#fff; border:1px solid #e9eaee; border-radius:14px; padding:10px; margin:0; }
    /* 칩 안 × 삭제(빨강) + Add/Copy 칩(아이콘+라벨) */
    .chipx{ flex:none; width:19px; height:19px; border-radius:50%; background:#fdecee; color:#DD001B;
      display:inline-flex; align-items:center; justify-content:center; margin-left:2px; }
    .chipx svg{ width:10px; height:10px; }
    .chipx:active{ background:#DD001B; color:#fff; }
    .cicon{ display:inline-flex; width:15px; height:15px; flex:none; }
    .cicon svg{ width:15px; height:15px; }
    .copychip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
      border:1.5px solid #bcccff; background:#eaf0ff; color:#1d4ed8;
      font-size:13px; font-weight:800; padding:6px 13px; border-radius:999px; white-space:nowrap; }
    .bandchip.add, .textchip.add{ display:inline-flex; align-items:center; gap:6px; }
    /* ⑧ Move/Done — 하단 내비바 Next 옆(고객 시선이 이미 가 있는 곳). 이동모드(.on) 동안만 펄스 링 */
    #floatMove{ flex:0 0 auto; position:relative; border:none; background:#1d4ed8; color:#fff;
      font-size:13px; font-weight:800; height:38px; padding:0 16px; border-radius:999px; white-space:nowrap; cursor:pointer;
      box-shadow:0 2px 10px rgba(29,78,216,.25); }
    #floatMove.on::after{ content:''; position:absolute; inset:-3px; border-radius:999px;
      border:3px solid rgba(29,78,216,.85); pointer-events:none; animation:fm-pulse 1.4s ease-out infinite; }
    #floatMove[hidden]{ display:none; }
    @keyframes fm-pulse{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.15); opacity:0; } }
    #stepPills{ display:flex; flex-wrap:nowrap; gap:7px; overflow-x:auto; padding:5px 5px 6px; margin:-5px -5px 3px;
      touch-action:pan-x pan-y; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    #stepPills::-webkit-scrollbar{ display:none; }
    .pill{ flex:0 0 auto; display:flex; align-items:center; gap:7px; border:1.5px solid var(--line); background:#fff;
      color:var(--ink); font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px; white-space:nowrap; }
    .pill.active{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(17,17,17,.06); }
    .pill .pdot{ width:16px; height:16px; border-radius:5px; border:1px solid rgba(0,0,0,.15); flex:none; }
    [hidden]{ display:none !important; }
    /* PC(마우스): 가로 스크롤 줄에 잡기 커서 힌트 */
    @media (hover:hover) and (pointer:fine){
      #stepPills, #patList, #fontList{ cursor:grab; }
    }

    /* 텍스트·로고 패널 */
    #textPanel, #logoPanel{ display:flex; flex-direction:column; gap:8px; }
    #textEdit{ display:flex; flex-direction:column; gap:8px; }
    #textList{ display:flex; flex-wrap:nowrap; gap:7px; overflow-x:auto; padding:5px 5px 6px; margin:-5px -5px 0;
      touch-action:pan-x pan-y; scrollbar-width:none; }
    #textList::-webkit-scrollbar{ display:none; }
    .textchip{ flex:0 0 auto; display:flex; align-items:center; gap:7px; border:1.5px solid var(--line); background:#fff;
      color:var(--ink); font-size:13px; font-weight:600; padding:6px 12px 6px 7px; border-radius:999px; white-space:nowrap; max-width:160px; }
    .textchip span{ overflow:hidden; text-overflow:ellipsis; }
    .textchip.active{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(17,17,17,.06); }
    .textchip .sc-sw{ width:18px; height:18px; border-radius:6px; border:1px solid rgba(0,0,0,.18); flex:none; }
    .textchip.add{ background:#eaf0ff; border-color:#bcccff; color:#1d4ed8; font-weight:800; padding:6px 14px; }
    #logoPanel .trow{ display:flex; align-items:center; gap:10px; }
    #logoPanel .trow label{ font-size:12px; color:var(--sub); }
    #logoPanel .trow input[type=range]{ flex:1; }
    #logoPanel .ghost{ flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--ink);
      font-size:12px; font-weight:600; padding:8px 12px; border-radius:10px; }
    #logoPanel .ghost.primary{ background:#111; color:#fff; border-color:#111; }
    #logoUploadBtn{ flex:1 !important; }
    #textInput{ width:100%; border:1.5px solid var(--line); border-radius:11px; padding:11px 13px;
      font-size:15px; color:var(--ink); outline:none; }
    #textInput:focus{ border-color:var(--ink); }
    #fontList{ display:flex; flex-wrap:nowrap; gap:7px; overflow-x:auto; padding:5px 5px 6px; margin:-5px -5px 0;
      touch-action:pan-x pan-y; overscroll-behavior-x:contain; scrollbar-width:none; }
    #fontList::-webkit-scrollbar{ display:none; }
    .fontchip{ flex:0 0 auto; border:1.5px solid var(--line); background:#fff; color:var(--ink);
      font-size:15px; padding:7px 14px; border-radius:10px; white-space:nowrap; }
    .fontchip.active{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(17,17,17,.06); }
    #textPanel .trow{ display:flex; align-items:center; gap:10px; }
    #textPanel .trow label{ font-size:12px; color:var(--sub); }
    #textPanel .trow input[type=range]{ flex:1; }
    #textPanel .ghost{ flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--ink);
      font-size:12px; font-weight:600; padding:8px 12px; border-radius:10px; }
    #textPanel .ghost.primary{ background:#111; color:#fff; border-color:#111; }

    /* 패턴 프리셋 칩 */
    #patList{ display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding:5px 5px 8px; margin:-5px -5px 7px;
      touch-action:pan-x pan-y; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
    #patList::-webkit-scrollbar{ height:4px; }
    #patList::-webkit-scrollbar-thumb{ background:#d0d2d8; border-radius:2px; }
    .patchip{ flex:0 0 auto; display:flex; align-items:center; gap:8px; border:1.5px solid var(--line);
      background:#fff; color:var(--ink); font-size:13px; font-weight:600; padding:5px 14px 5px 5px;
      border-radius:999px; white-space:nowrap; }
    .patchip.active{ border-color:var(--ink); background:#111; color:#fff; }
    .patthumb{ flex:none; width:42px; height:30px; border-radius:7px;
      border:1px solid rgba(0,0,0,.14); background:#fff; }

    /* 밴드 빌더 */
    #bandPanel{ margin-top:2px; }
    #bandList{ display:flex; flex-wrap:nowrap; gap:7px; overflow-x:auto; padding:5px 5px 8px; margin:-5px -5px 6px;
      touch-action:pan-x pan-y; scrollbar-width:none; }
    #bandList::-webkit-scrollbar{ display:none; }
    .bandchip{ flex:0 0 auto; display:flex; align-items:center; gap:7px; border:1.5px solid var(--line); background:#fff;
      color:var(--ink); font-size:13px; font-weight:600; padding:6px 12px 6px 7px; border-radius:999px; white-space:nowrap; }
    .bandchip.active{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(17,17,17,.06); }
    .bandchip .bc-sw{ width:18px; height:18px; border-radius:6px; border:1px solid rgba(0,0,0,.18); flex:none; }
    .bandchip.add{ background:#eaf0ff; border-color:#bcccff; color:#1d4ed8; font-weight:800; }
    #bandEdit{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
    #bandEdit .trow{ display:flex; align-items:center; gap:10px; }
    #bandEdit .trow label{ font-size:12px; color:var(--sub); width:62px; flex:none; }
    #bandEdit .trow input[type=range]{ flex:1; }
    #bandEdit .ghost{ flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--ink);
      font-size:12px; font-weight:600; padding:8px 12px; border-radius:10px; }

    /* 모티프 스탬프 (도형 라이브러리 + 스탬프 목록) */
    #stampPanel{ display:flex; flex-direction:column; gap:8px; }
    #shapeList, #stampList{ display:flex; flex-wrap:nowrap; gap:7px; overflow-x:auto; padding:5px 5px 6px; margin:-5px -5px 0;
      touch-action:pan-x pan-y; scrollbar-width:none; }
    #shapeList::-webkit-scrollbar, #stampList::-webkit-scrollbar{ display:none; }
    .shapechip{ flex:0 0 auto; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
      border:1.5px solid var(--line); background:#fff; border-radius:12px; color:var(--ink); }
    .shapechip svg{ width:24px; height:24px; }
    .shapechip:active{ background:#f0f1f4; }
    .stampchip{ flex:0 0 auto; display:flex; align-items:center; gap:7px; border:1.5px solid var(--line); background:#fff;
      color:var(--ink); font-size:13px; font-weight:600; padding:6px 12px 6px 7px; border-radius:999px; white-space:nowrap; }
    .stampchip.active{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(17,17,17,.06); }
    .stampchip .sc-sw{ width:18px; height:18px; border-radius:6px; border:1px solid rgba(0,0,0,.18); flex:none; }
    #stampEdit{ display:flex; flex-direction:column; gap:8px; }
    #stampEdit .trow{ display:flex; align-items:center; gap:10px; }
    #stampEdit .trow label{ font-size:12px; color:var(--sub); width:54px; flex:none; }
    #stampEdit .trow input[type=range]{ flex:1; }
    #stampEdit .ghost{ flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--ink);
      font-size:12px; font-weight:600; padding:8px 12px; border-radius:10px; }
    #stampEdit .ghost.primary{ background:#111; color:#fff; border-color:#111; }
    .stamphint{ font-size:11px; color:var(--sub); line-height:1.4; padding:2px 2px 0; }
    .stamphint small{ font-size:10px; opacity:.85; }

    /* Move / Delete 버튼 잘 보이게 (고객이 놓치지 않게) — !important 로 .ghost 규칙 덮어쓰기 */
    #stampMoveBtn, #textMoveBtn, #logoMoveBtn, #stampCopy, #bandCopy{
      background:#eaf0ff !important; border-color:#bcccff !important; color:#1d4ed8 !important; font-weight:800; }
    #stampMoveBtn.primary, #textMoveBtn.primary, #logoMoveBtn.primary{
      background:#1d4ed8 !important; border-color:#1d4ed8 !important; color:#fff !important; }
    #stampDelete, #bandDelete, #logoRemoveBtn, #textDelete{
      background:#fff0f1 !important; border-color:#f3b6bd !important; color:#DD001B !important; font-weight:800; }
    /* Move 모드: 움직일 대상 위 펄스 마커 — 터치 방해 안 하게 pointer-events:none */
    #moveMarker{ position:fixed; z-index:38; transform:translate(-50%,-50%); pointer-events:none;
      display:flex; flex-direction:column; align-items:center; gap:6px; }
    #moveMarker .mm-ring{ width:44px; height:44px; border-radius:50%; border:3px solid #1d4ed8;
      box-shadow:0 0 0 3px rgba(255,255,255,.7); animation:mm-pulse 1.2s ease-out infinite; }
    #moveMarker .mm-label{ background:#16171b; color:#fff; font-size:12px; font-weight:800;
      padding:6px 11px; border-radius:999px; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.3); }
    @keyframes mm-pulse{ 0%{ transform:scale(.75); opacity:1; } 100%{ transform:scale(1.25); opacity:.25; } }

    /* 모바일: 상단 회색부 추가 압축(시트 총높이 ↓, 흰 카드 확보) */
    @media (max-width:560px){
      .grab{ display:none; }
      #sheet{ padding:7px 12px calc(8px + env(safe-area-inset-bottom)); }
      #priceBar{ margin-bottom:4px; }
      #priceMain{ font-size:16px; }
      #colorMeter{ margin-bottom:4px; }
      #stepPills{ padding-bottom:5px; margin-bottom:2px; }
      .pill{ padding-top:8px; padding-bottom:8px; }
      #stepHint{ padding-bottom:4px; }
    }
    /* 모바일: 컨트롤 터치 타깃 쾌적화 */
    @media (max-width:560px){
      #ctrlScroll input[type=range]{ height:30px; accent-color:#1d4ed8; }
      #ctrlScroll .trow{ gap:12px; }
      #ctrlScroll .ghost{ padding:11px 14px; font-size:13px; }
      .shapechip{ width:52px; height:52px; }
      .shapechip svg{ width:27px; height:27px; }
    }

    /* 디자인 완료 → Review order 살짝 들썩(과하지 않게) */
    #reviewBtn.nudge{ animation:rv-nudge 1.8s ease-in-out infinite; }
    @keyframes rv-nudge{
      0%,100%{ transform:translateY(0); box-shadow:none; }
      50%{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.22); }
    }

    /* 코치 말풍선(버튼 위 앵커 + 번호 배지) — coachAt()이 left/bottom/--ax 지정 */
    #stepTip{ position:fixed; z-index:39;
      background:#16171b; color:#fff; border-radius:14px; padding:11px 15px;
      font-size:13px; line-height:1.5; width:max-content; max-width:min(340px, calc(100vw - 36px));
      box-shadow:0 8px 28px rgba(0,0,0,.32); animation:tip-in .3s ease; }
    #stepTip::after{ content:''; position:absolute; left:var(--ax,50%); bottom:-8px; transform:translateX(-50%);
      border:8px solid transparent; border-top-color:#16171b; border-bottom:none; }
    #stepTip b{ color:#9db8ff; }
    #stepTip .tipnum{ display:inline-flex; width:20px; height:20px; border-radius:50%; background:#1d4ed8;
      color:#fff; font-size:12px; font-weight:800; font-style:normal; align-items:center; justify-content:center;
      margin-right:8px; vertical-align:-4px; }
    @keyframes tip-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

    /* 첫 방문 가이드 말풍선 (시트 바로 위, 스텝을 가리킴) */
    #guideTip{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(38% + 14px); z-index:40;
      background:#16171b; color:#fff; border-radius:16px; padding:14px 16px 12px; width:min(320px, calc(100vw - 36px));
      box-shadow:0 10px 36px rgba(0,0,0,.35); animation:gt-in .35s ease; }
    #guideTip::after{ content:''; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
      border:9px solid transparent; border-top-color:#16171b; border-bottom:none; }
    #guideTip .gt-body{ font-size:13.5px; line-height:1.55; margin-bottom:10px; }
    #guideTip .gt-body b{ color:#9db8ff; }
    #guideTip .cta{ width:100%; padding:10px; border-radius:11px; font-size:13.5px; }
    @keyframes gt-in{ from{ opacity:0; transform:translateX(-50%) translateY(8px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }

    /* 회전 슬라이더 각도 표시 */
    .rotval{ flex:none; min-width:36px; text-align:right; font-size:12px; font-weight:700; color:var(--sub);
      font-variant-numeric:tabular-nums; cursor:pointer; }
    .rotval:active{ color:var(--ink); }
    /* 로고 원본에서 추출한 색 제안 스와치 */
    #logoSugg label{ font-size:12px; color:var(--sub); }
    .lsw{ width:28px; height:28px; border-radius:9px; border:1.5px solid rgba(0,0,0,.15); flex:none; padding:0; }
    .lsw.sel{ box-shadow:0 0 0 3px rgba(17,17,17,.25); border-color:var(--ink); }

    /* 로고 처리 미리보기(투명 확인용 체커보드) + 경고 */
    #logoPrev{ width:46px; height:46px; border-radius:10px; border:1px solid var(--line); flex:none;
      background:repeating-conic-gradient(#e9eaee 0% 25%, #fff 0% 50%) 0 0 / 12px 12px; }
    .stamphint.warn{ color:#b45309; font-weight:700; }

    /* 로고 토글(배경/색): 선택된 쪽 진하게 */
    #logoBgKeep.primary, #logoBgRemove.primary, #logoColorOrig.primary, #logoColorOne.primary{
      background:#111 !important; color:#fff !important; border-color:#111 !important; }
    .ghost.disabled{ opacity:.4; pointer-events:none; }

    /* 모달(니트 안내 등) */
    .modal{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
      background:rgba(15,17,22,.55); padding:24px; }
    .modal[hidden]{ display:none; }
    .modal-card{ background:#fff; border-radius:18px; max-width:340px; width:100%; padding:22px 20px 18px;
      box-shadow:0 18px 50px rgba(0,0,0,.3); }
    .modal-title{ font-size:17px; font-weight:800; color:var(--ink); margin-bottom:10px; }
    .modal-body{ font-size:13px; line-height:1.55; color:var(--sub); }
    .modal-acts{ display:flex; justify-content:flex-end; margin-top:16px; }
    .modal-acts .cta{ padding:11px 20px; }
    /* 로고 안내 모달 2스텝 + 비포/애프터 */
    .lm-card{ max-width:380px; }
    .lm-step[hidden]{ display:none; }
    .lm-ba{ display:flex; align-items:center; gap:8px; margin:6px 0 14px; }
    .lm-ba-col{ flex:1; min-width:0; margin:0; text-align:center; }
    .lm-ba-col img{ width:100%; aspect-ratio:1; object-fit:cover; background:#f4f5f7; border-radius:10px; display:block; }
    .lm-arrow{ flex:0 0 auto; font-size:22px; line-height:1; font-weight:900; color:var(--brand,#FF7A1A); }
    .lm-tag{ display:inline-block; margin-top:7px; font-size:10.5px; font-weight:800; letter-spacing:.04em;
      text-transform:uppercase; padding:3px 9px; border-radius:100px; }
    .lm-tag-before{ background:#ececec; color:#666; }
    .lm-tag-after{ background:#FFE7D6; color:#C2410C; }

    /* 자수 이메일/결제 방식 패널 */
    #embPanel{ margin-bottom:4px; }
    .oc-emb-note{ font-size:12px; color:var(--sub); line-height:1.5; margin:2px 0 10px; }
    #embEmail{ width:100%; border:1.5px solid var(--line); border-radius:11px; padding:11px 13px; font-size:15px; outline:none; }
    #embEmail:focus{ border-color:var(--ink); }
    #embEmail.bad{ border-color:#DD001B; }
    /* 시안 답장 채널 선택(proof 모드 전용) */
    #proofChWrap{ margin:10px 0 0; }
    .pcw-label{ font-size:12.5px; font-weight:700; color:var(--ink); margin:0 0 7px; }
    .pcw-chips{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .pcw-ch{ border:1.5px solid var(--line,#e5e5ea); background:#fff; border-radius:12px; padding:9px 4px 8px; cursor:pointer; text-align:center; transition:border-color .12s, box-shadow .12s; }
    .pcw-ch svg{ width:19px; height:19px; display:block; margin:0 auto 4px; }
    .pcw-ch b{ font-size:11.5px; font-weight:700; color:var(--ink); }
    .pcw-ch.sel{ border-color:#DD001B; box-shadow:0 0 0 2px rgba(221,0,27,.12); }
    #proofWa, #proofIg{ width:100%; border:1.5px solid var(--line); border-radius:11px; padding:11px 13px; font-size:15px; outline:none; margin-top:8px; }
    #proofWa:focus, #proofIg:focus{ border-color:var(--ink); }
    #proofWa.bad, #proofIg.bad{ border-color:#DD001B; }
    #embPanel .oc-emb-modes + .oc-emb-note{ margin-top:12px; }   /* 라디오 아래 시안 안내 간격 */
    #proofMemo{ width:100%; border:1.5px solid var(--line); border-radius:11px; padding:11px 13px;
      font-size:14px; line-height:1.45; outline:none; resize:none; margin-top:8px; }
    #proofMemo:focus{ border-color:var(--ink); }
    .oc-emb-modes{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
    .emode{ display:flex; align-items:flex-start; gap:10px; border:1.5px solid var(--line); border-radius:12px;
      padding:11px 12px; cursor:pointer; }
    .emode input{ margin-top:3px; flex:none; accent-color:#1d4ed8; }
    .emode b{ font-size:14px; display:block; }
    .emode small{ font-size:11px; color:var(--sub); display:block; margin-top:2px; line-height:1.35; }
    .emode:has(input:checked){ border-color:#1d4ed8; background:#f5f8ff; }

    /* 영역 선택 탭 */
    #zones{ display:flex; gap:10px; margin-bottom:14px; }
    .zone{ flex:1; border:1.5px solid var(--line); background:#fff; border-radius:14px;
      padding:10px 12px; display:flex; align-items:center; gap:10px; transition:.15s; }
    .zone.active{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(17,17,17,.06); }
    .zone .dot{ width:26px; height:26px; border-radius:8px; border:1px solid rgba(0,0,0,.12); flex:none; }
    .zone .meta{ text-align:left; line-height:1.25; }
    .zone .meta b{ font-size:13px; font-weight:700; }
    .zone .meta span{ display:block; font-size:11px; color:var(--sub); }

    /* 색상 팔레트 */
    #paletteWrap{ }
    #palName{ font-size:12px; color:var(--sub); margin:0 2px 8px; height:15px; }
    #palName b{ color:var(--ink); font-weight:700; }
    #palette{ display:grid; grid-template-columns:repeat(10,1fr); gap:7px; padding:4px; }
    .sw{ aspect-ratio:1/1; border-radius:9px; border:1px solid rgba(0,0,0,.10); position:relative; }
    .sw.sel{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ink); }
    .sw.sel::after{ content:""; position:absolute; inset:0; margin:auto; width:7px; height:7px; border-radius:50%;
      background:rgba(255,255,255,.9); mix-blend-mode:difference; }

    @media (min-width:560px){
      #sheet{ left:50%; right:auto; transform:translateX(-50%); width:520px; bottom:18px; border-radius:20px; }
      #palette{ grid-template-columns:repeat(10,1fr); }
      /* 주문화면은 프레임을 꽉 채움(배경이 상단바 가림). 내용은 넉넉히, 아주 넓은 화면에서만 가운데 정렬 */
      #orderScreen .oc-head, #orderScreen .oc-body, #orderScreen .oc-foot{
        width:100%; max-width:720px; margin-left:auto; margin-right:auto; }
    }

    /* 보정(개발용) 패널 */
    #calib{ position:fixed; top:64px; right:12px; z-index:8; background:var(--panel-bg);
      border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.14); padding:12px; width:230px; font-size:12px; display:none; }
    #calib.show{ display:block; }
    #calib label{ display:block; margin:8px 0 2px; color:var(--sub); }
    #calib input[type=range]{ width:100%; }
    #calib .row{ display:flex; justify-content:space-between; align-items:center; }
    #gear,#brushBtn,#publishBtn{ display:none; }                       /* 편집 도구·발행은 관리자만 */
    body.admin #gear, body.admin #brushBtn, body.admin #publishBtn{ display:inline-flex; }
    #brushBtn.active{ background:#111; color:#fff; }
    #publishBtn{ background:#0a7d2c; color:#fff; border-color:#0a7d2c; }
    /* 발행 모달 */
    .pub-card{ max-width:560px; width:calc(100% - 32px); }
    .pub-body{ padding:14px 16px 4px; }
    .pub-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .pub-opt{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px;
      border:2px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; }
    .pub-opt .pub-imgwrap{ width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:#eceef2; }
    .pub-opt img{ width:100%; height:100%; object-fit:contain; display:block; }
    .pub-opt .pub-cap{ font-size:13px; font-weight:700; color:var(--ink); }
    .pub-opt.sel{ border-color:#0a7d2c; box-shadow:0 0 0 3px rgba(10,125,44,.15); }
    .pub-status{ text-align:center; font-size:12px; color:var(--sub); padding:10px 0 2px; }
    /* 최초 1회 3D 회전 힌트 (좌우 드래그 아이콘) */
    #spinHint{ position:fixed; left:0; right:0; top:34%; display:flex; justify-content:center; pointer-events:none; z-index:9; opacity:0; transition:opacity .45s ease; }
    #spinHint.show{ opacity:1; }
    #spinHint .sh-pill{ background:rgba(18,20,26,.55); border-radius:999px; padding:9px 16px; line-height:0; box-shadow:0 6px 20px rgba(0,0,0,.18); }
    #spinHint .sh-dot{ animation:shslide 1.5s ease-in-out infinite; }
    @keyframes shslide{ 0%,100%{ transform:translateX(-24px); } 50%{ transform:translateX(24px); } }
    @media (prefers-reduced-motion: reduce){ #spinHint .sh-dot{ animation:none; } }
    /* 디자인 중인 발 표시 칩 (왼발 L 활성 / 오른발 R 미러) */
    #footTag{ position:fixed; top:calc(54px + env(safe-area-inset-top)); left:12px; z-index:8;
      display:flex; flex-direction:column; align-items:center; gap:2px; background:rgba(255,255,255,.92);
      border:1px solid var(--line); border-radius:13px; padding:5px 9px 4px; box-shadow:0 2px 9px rgba(0,0,0,.07); }
    #footTag .ft-feet{ display:flex; gap:4px; align-items:center; }
    #footTag .ft-note{ font-size:8.5px; line-height:1; color:#9aa0a8; font-weight:600; letter-spacing:.2px; }
    #footTag .ft{ display:flex; flex-direction:column; align-items:center; gap:1px; }
    #footTag .ft svg{ width:20px; height:21px; display:block; fill:#c2c7cf; transition:fill .15s; }
    #footTag .ft b{ font-size:9px; line-height:1; font-weight:800; color:#b5bac2; letter-spacing:.5px; }
    #footTag .ft.r svg{ transform:scaleX(-1); }
    #footTag .ft.active svg{ fill:#0a2a6b; }
    #footTag .ft.active b{ color:#0a2a6b; }
    /* 진입 1회 왼발 안내 말풍선 (칩 바로 아래, 위로 꼬리) */
    #footHint{ position:fixed; top:calc(110px + env(safe-area-inset-top)); left:12px; z-index:9;
      max-width:184px; background:#0a2a6b; color:#fff; font-size:11px; line-height:1.4; font-weight:600;
      padding:8px 11px; border-radius:11px; box-shadow:0 6px 18px rgba(0,0,0,.22); pointer-events:none;
      opacity:0; transform:translateY(-4px); transition:opacity .35s ease, transform .35s ease; }
    #footHint.show{ opacity:1; transform:translateY(0); }
    #footHint b{ font-weight:800; }
    #footHint::before{ content:''; position:absolute; top:-5px; left:22px; width:11px; height:11px;
      background:#0a2a6b; border-radius:2px; transform:rotate(45deg); }

    /* 직접 그리기 툴바 */
    #paintbar{ position:fixed; left:50%; top:calc(62px + env(safe-area-inset-top)); transform:translateX(-50%);
      z-index:9; background:var(--panel-bg); border-radius:14px; box-shadow:0 6px 22px rgba(0,0,0,.16);
      padding:10px 12px; display:none; flex-direction:column; gap:9px; width:min(92vw,430px); }
    #paintbar.show{ display:flex; }
    #paintbar .seg{ display:flex; gap:6px; }
    .pmode{ flex:1; border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:9px 4px; font-size:13px; font-weight:600; color:var(--ink); }
    .pmode.active{ border-color:var(--ink); background:#111; color:#fff; }
    #paintbar .rowb{ display:flex; gap:8px; align-items:center; }
    #paintbar .rowb label{ font-size:12px; color:var(--sub); white-space:nowrap; }
    #paintbar input[type=range]{ flex:1; }
    #paintbar .ghost{ border:1px solid var(--line); background:#fff; border-radius:10px; padding:7px 10px; font-size:12px; font-weight:600; color:var(--ink); }
    #paintbar .ghost.primary{ background:#111; color:#fff; border-color:#111; }
    #paintbar .hint{ font-size:11px; color:var(--sub); text-align:center; }
/* ── Phase 1: 나이키식 흐름 (하단 내비·스텝 그룹) ── */
/* 하단 가이드 내비 — 시트 회색 바닥 위에 그대로(박스/테두리 없음), 버튼은 앱 공통 알약 스타일 */
#stepNav{ display:flex; align-items:center; gap:8px; padding:8px 2px 0; }
#navBack{ width:44px; height:38px; border-radius:999px; border:1px solid var(--line,#ddd); background:#fff;
  font-size:15px; font-weight:800; color:var(--ink,#111); cursor:pointer; flex:0 0 auto; }
#navBack:disabled{ opacity:.35; cursor:default; }
#navProg{ flex:1; min-width:0; display:flex; align-items:baseline; gap:7px; font-size:13px; color:var(--sub,#666); }
#navProg b{ font-size:14px; color:var(--ink,#111); }
#navProg span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#navNext{ flex:0 0 auto; min-width:112px; height:38px; border:none; border-radius:999px; background:#111; color:#fff;
  font-size:13px; font-weight:700; cursor:pointer; padding:0 18px; box-shadow:0 2px 10px rgba(0,0,0,.12); }
#navNext.finish{ background:#0a7d33; }

/* 스포트라이트 온보딩(Move→양말→Done): 어두운 막 + 구멍(박스섀도), 클릭은 통과 — 실제 버튼을 누르며 배움 */
#spot{ position:fixed; inset:0; z-index:70; pointer-events:none; }
#spot[hidden]{ display:none; }
.spot-hole{ position:absolute; border-radius:999px; box-shadow:0 0 0 9999px rgba(10,12,18,.55);
  transition:left .28s ease, top .28s ease, width .28s ease, height .28s ease, border-radius .28s ease; }
.spot-card{ position:absolute; left:50%; transform:translateX(-50%); width:min(320px,86vw);
  background:#fff; border-radius:14px; padding:13px 15px 12px; box-shadow:0 12px 40px rgba(0,0,0,.35);
  font-size:13.5px; line-height:1.5; color:var(--ink,#111); pointer-events:auto; }
.spot-num{ display:inline-block; font-size:11px; font-weight:800; color:#fff; background:#1d4ed8;
  border-radius:999px; padding:2px 9px; margin-bottom:5px; }
#spotSkip{ position:absolute; top:9px; right:11px; border:none; background:none; color:var(--sub,#999);
  font-size:11.5px; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }