:root{
  --blue:#78716C; --blue-dark:#44403C; --blue-light:#F5F5F4; --blue-mid:#D6D3D1;
  --bg:#f7f6f3; --card:#ffffff; --border:#e5e2da; --text:#2b2a27; --text-sec:#7a766c; --text-ter:#a7a299;
  --canvas-bg:#eceae4;
  /* Figma "Input / Button" 컴포넌트 스펙 (node 59:1909) */
  --fig-field-bg:#F9F7F1; --fig-field-border:#E6E1D2; --fig-field-border-focus:#666666;
  --fig-field-text:#454545; --fig-field-placeholder:#ADADAD; --fig-field-unit:#938E81;
  --fig-btn-hover-border:#DAD6C7; --fig-btn-active-bg:#000;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;max-width:100%;overflow-x:hidden;}
body{
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',Pretendard,Roboto,sans-serif;
  background:var(--bg); color:var(--text); -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:880px;margin:0 auto;padding:14px 14px 40px;}

.seg-tabs{display:none;} /* 포장 방식이 시트형 하나뿐이라 선택 UI 자체를 숨김 (일단) */
.seg-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 8px;border:1px solid var(--fig-field-border);border-radius:2px;
  background:var(--fig-field-bg);
  cursor:pointer;font-size:13px;color:var(--fig-field-text);font-weight:600;
  transition:background .15s,color .15s,border-color .15s;
}
.seg-btn:hover{border-color:var(--fig-btn-hover-border);}
.seg-btn.sel{background:var(--fig-btn-active-bg);border-color:var(--fig-btn-active-bg);color:#fff;}
.seg-ico{font-size:16px;}
.seg-spec{font-size:10px;color:var(--fig-field-unit);font-weight:400;}
.seg-btn.sel .seg-spec{color:#fff;opacity:0.75;}

/* 웹 전용: 사이즈 입력 / 패턴 선택 탭 전환 */
.controls-tabs{display:none;}
@media (min-width:721px){
  .controls-col{background:var(--card);border:1px solid var(--border);box-shadow:0 1px 2px rgba(0,0,0,0.03);}
  .controls-tabs{display:flex;gap:0;margin-bottom:0;border-bottom:1px solid var(--border);}
  .controls-tab{
    flex:1;padding:12px 8px;border:none;border-bottom:2px solid transparent;border-radius:0;
    background:transparent;cursor:pointer;font-size:13px;font-weight:500;
    color:var(--text-sec);transition:color .15s,border-color .15s;
    display:flex;align-items:center;justify-content:center;gap:6px;
  }
  .controls-tab:hover{color:var(--text);}
  .controls-tab.active{color:var(--text);font-weight:700;border-bottom-color:var(--text);}
  .controls-tab-num{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:16px;height:16px;border-radius:999px;font-size:10px;font-weight:700;
    background:var(--fig-field-border);color:var(--text-sec);
  }
  .controls-tab.active .controls-tab-num{background:var(--fig-btn-active-bg);color:#fff;}
  .sheet-card{display:none;}
  .sheet-card.active{display:block;}
  .controls-col .sheet-card{border:none;box-shadow:none;margin-bottom:0;border-radius:0;}
}

.layout{display:grid;grid-template-columns:0.78fr 1.22fr;gap:14px;}

/* 모바일 전용 하단 패널 — 데스크톱에서는 항상 숨김 */
.mobile-tabbar{display:none;}

@media (max-width:720px){
  .layout{grid-template-columns:1fr;}
  .preview-col{order:-1;}

  /* 캔바 모바일 앱처럼: 3D 미리보기는 화면 폭 전체를 여백 없이 채움.
     패턴 목록은 더 이상 떠있는 패널이 아니라 일반 스크롤 섹션으로 그 아래 이어짐 */
  .controls-col{display:contents;}

  .mobile-panel{
    display:block;
    background:transparent;
  }

  .sheet-card{
    display:block;
    margin:0 0 14px; border:1px solid var(--border); border-radius:0; box-shadow:0 1px 2px rgba(0,0,0,0.03);
    background:var(--card);
  }

  /* 물건 크기 카드는 이제 "안쪽 물건 보기" 토글/경고 문구만 남으므로,
     둘 다 안 보일 때(시트형)는 빈 카드로 보이지 않도록 완전히 접는다 */
  #sizeCard{ padding:0; border:none; background:transparent; box-shadow:none; margin-bottom:0; }
  #sizeCard:has(.toggle-row.show), #sizeCard:has(.warn.show){
    padding:16px; border:1px solid var(--border); background:var(--card);
    box-shadow:0 1px 2px rgba(0,0,0,0.03); margin-bottom:14px;
  }

  .mobile-tabbar{display:none !important;}

  .preview-card{ position:static; }
  .preview-card .hint{ margin-bottom:18px; }

  /* "3D 미리보기" 라벨 줄은 캔버스 위 타이틀 배지로 대체되므로 숨김 */
  .preview-card > .lbl{ display:none; }
  .cv-title-badge{
    display:flex; align-items:center; gap:6px;
    position:absolute; left:8px; top:8px; z-index:5;
    padding:4px 8px; background:rgba(249,247,241,0.85);
    font-size:11px; font-weight:700; color:var(--fig-field-text);
    box-shadow:0 1px 3px rgba(0,0,0,0.08);
  }
}

.card{background:var(--card);border:1px solid var(--border);border-radius:0;padding:16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(0,0,0,0.03);}
.lbl{font-size:12.5px;color:var(--text-sec);font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:5px;}

/* 포장지 패턴 라벨 옆 포커스된 패턴 상품명/가격 (모바일 전용) */
.pattern-focus-info{display:none;}
@media (max-width:720px){
  .pattern-focus-info{
    display:inline-block; font-size:10.5px; font-weight:400; color:var(--text-ter);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
  }
}


.pgrid{display:grid;grid-template-columns:repeat(4,1fr);}
.pbtn{aspect-ratio:1;border-radius:0;border:2px solid transparent;cursor:pointer;overflow:hidden;padding:0;background:none;}
.pbtn.sel{border-color:#000;}
.pbtn canvas{width:100%;height:100%;display:block;}

/* 선택된 패턴의 상품명/가격/구매 링크 */
.product-panel{
  display:none; align-items:center; justify-content:space-between; gap:10px;
  background:var(--bg); border-radius:0; padding:9px 11px; margin-top:9px;
}
.product-panel.show{display:flex;}
.product-info{min-width:0; display:flex; flex-direction:column; gap:1px;}
.product-name{font-family:'PT Sans',sans-serif; font-size:17px; color:#333333; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.product-price{font-family:'PT Sans',sans-serif; font-size:14px; color:#525252; font-weight:500;}
.product-buy-btn{
  flex-shrink:0; font-size:14px; font-weight:400; color:#f3eee1; background:var(--fig-btn-active-bg);
  border:1px solid var(--fig-btn-active-bg); border-radius:2px; padding:7px 13px;
  text-decoration:none; white-space:nowrap; transition:opacity .15s;
}
.product-buy-btn:hover{opacity:0.85;}
.product-buy-btn:active{opacity:0.7;}

/* 웹(데스크톱): 구매하기 버튼을 상품 정보 아래로 수직 배치 */
@media (min-width:721px){
  .product-panel{flex-direction:column; align-items:stretch;}
  .product-buy-btn{width:100%; text-align:center; margin-top:2px;}
}

/* 물건 크기 입력 블록: 안내 그림 → 입력창 → 안내 문구 (데스크톱/모바일 동일) */
.size-block{margin-bottom:14px;}
.section-divider{height:1px;background:var(--border);margin:0 0 20px;}
.box-size-guide{width:100%;margin:0 auto 12px;}
.box-size-guide img{display:block;width:100%;height:auto;}

/* 물건 크기 입력: 데스크톱/모바일 동일하게 가로W×세로H×높이D 한 줄 압축 배치 */
.size-input-group{display:flex;flex-direction:row;align-items:flex-end;gap:6px;margin-bottom:0;}
.size-field{display:flex;flex-direction:column;align-items:stretch;gap:4px;flex:1;min-width:0;}
.size-field label{font-size:11px;color:var(--text-sec);min-width:0;text-align:left;white-space:nowrap;}
.size-field input[type=number]{
  flex:1;width:100%;padding:8px 8px;font-size:16px;text-align:left;
  border:1px solid var(--fig-field-border);border-radius:2px;
  background:var(--fig-field-bg);color:var(--fig-field-text);
}
.size-field input[type=number]::placeholder{color:var(--fig-field-placeholder);}
.size-field input[type=number]:focus{outline:none;border-color:var(--fig-field-border-focus);}
.size-field-unit{display:none;}
.size-sep{display:flex;align-items:flex-end;padding-bottom:9px;font-size:13px;color:var(--text-sec);flex-shrink:0;}
.size-group-unit{display:flex;align-items:flex-end;padding-bottom:9px;font-size:12px;color:var(--fig-field-unit);flex-shrink:0;margin-left:2px;}

.toggle-row{display:none;align-items:center;justify-content:space-between;background:var(--blue-light);border-radius:0;padding:11px 13px;margin-bottom:10px;}
.toggle-row.show{display:flex;}
.toggle-row span{font-size:13px;color:var(--text);font-weight:500;}
.switch{position:relative;width:42px;height:24px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:999px;transition:.2s;}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:white;border-radius:999px;transition:.2s;}
input:checked + .slider{background:var(--blue);}
input:checked + .slider:before{transform:translateX(18px);}

.warn{display:none;font-size:12px;color:#c0392b;background:#fdecec;border-radius:0;padding:9px 12px;margin-bottom:10px;line-height:1.5;}
.warn.show{display:block;}

.preview-card{position:sticky;top:14px;}
#cvWrap{width:100%;aspect-ratio:1;border-radius:0;overflow:hidden;cursor:grab;position:relative;touch-action:none;}
#cvWrap:active{cursor:grabbing;}
#threeCV{display:block;width:100%;height:100%;filter:saturate(0.8) brightness(1.0) contrast(1.03);}
.hint{font-size:11.5px;color:var(--text-ter);text-align:center;margin-top:8px;}

/* 필요 포장지 사이즈 — 3D 미리보기 아래 짧은 인라인 문구는 더 자세한 계산 블록(입력창 아래)으로 대체되어 항상 숨김 */
.paper-size-info{display:none;}
.paper-size-trigger{
  display:none; width:100%; margin-top:10px; height:48px;
  border:1px solid var(--fig-field-border); background:var(--fig-field-bg);
  color:var(--fig-field-text); cursor:pointer;
  align-items:center; justify-content:center;
  font-size:15px; font-weight:400;
}
.paper-size-trigger:active{background:rgba(0,0,0,0.04);}
.paper-size-modal-title{font-size:12.5px;font-weight:500;color:var(--text-sec);margin-bottom:14px;}
.paper-size-result-row{display:flex;gap:14px;margin-bottom:12px;}
.paper-size-result-field{flex:1;min-width:0;display:flex;align-items:center;gap:10px;}
.paper-size-result-field label{font-size:13px;font-weight:400;color:var(--fig-field-text);flex-shrink:0;}
.paper-size-readonly{
  display:block;flex:1;min-width:0;
  padding:8px 8px;font-size:16px;font-weight:400;color:var(--fig-field-text);text-align:right;
  background:linear-gradient(90deg,rgba(0,0,0,0.02) 0%,rgba(0,0,0,0.02) 100%),var(--fig-field-bg);
}
.paper-size-note{font-size:12px;color:#666;}
.paper-size-block{margin-bottom:20px;}

.paper-qty-row{display:flex;gap:14px;}
.paper-qty-card{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.paper-qty-diagram{
  height:70px;background:#fff;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;padding:6px;
}
.paper-qty-rect{background:#f6f6f6;border:1px solid var(--fig-field-border);flex-shrink:0;}
.paper-qty-label{font-size:12px;font-weight:400;color:var(--fig-field-text);line-height:1.4;}
.paper-qty-value{text-align:center;}

/* 사이즈 입력 안내 문구 (데스크톱/모바일 공통) */
.size-note-list{display:block; list-style:disc; padding-left:17px; margin-top:8px;}
.size-note-list li{font-size:11px; color:var(--fig-field-text); line-height:1.5;}

@media (max-width:720px){
  .paper-size-trigger{display:flex;}
  .box-size-guide{display:none;}
  .paper-size-inline{display:none;}
  .section-divider{display:none;}
}
#loadMsg{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;font-size:13px;color:#999;border-radius:0;flex-direction:column;gap:8px;background:var(--card);}
.spinner{width:24px;height:24px;border:3px solid #ddd;border-top-color:var(--blue);border-radius:999px;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* 전개도 미니맵 (3D 미리보기 안, 기본 우측 상단) — 드래그로 자유 배치, 접기/펼치기 가능 */
#unwrapCard{
  position:absolute; right:8px; top:8px;
  width:36%; min-width:120px; max-width:200px;
  z-index:5;
  background:rgba(255,255,255,0.85);
  box-shadow:0 1px 4px rgba(0,0,0,0.12);
  overflow:hidden;
  border: 1px solid var(--fig-field-border);
}
#unwrapCard.dragging{box-shadow:0 4px 12px rgba(0,0,0,0.22);}
#unwrapCard.collapsed{width:auto;min-width:0;max-width:none;}
#unwrapCard.collapsed #unwrapStage{display:none;}

#unwrapHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:1px 2px 1px 5px;
  background: var(--fig-field-bg);
  cursor:grab; touch-action:none; user-select:none;
}
#unwrapHeader:active{cursor:grabbing;}
#unwrapHeaderLabel{
  display:flex; align-items:center; gap:4px;
  font-size:10.5px; color:var(--text-ter); font-weight:600; line-height:1;
  overflow:hidden; white-space:nowrap;
}
#unwrapDragHandle{font-size:11px; line-height:1;}
#unwrapCollapseBtn{
  border:none; background:none; cursor:pointer; font-size:11px; color:var(--text-sec);
  padding:3px 6px; line-height:1; flex-shrink:0;
}

.mini-btn{
  font-size:11px;padding:3px 7px;border:1px solid var(--fig-field-border);border-radius:2px;
  background:var(--fig-field-bg);color:var(--fig-field-text);cursor:pointer;line-height:1.4;font-weight:600;
}
.mini-btn:hover{border-color:var(--fig-btn-hover-border);}
.mini-btn:active{background:rgba(0,0,0,0.06);}
/* 고정된 표시 영역 — 장수가 늘어나도 이 안에서 비율 유지하며 축소 표시 */
#unwrapStage{
  width:100%; height:96px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* 3D 미리보기와 좌우 체감을 맞추기 위해 미니맵을 수평 반전해서 표시 (드래그 방향은 scene-sheet.js에서 함께 보정) */
#unwrapCV{display:block;cursor:grab;touch-action:none;border:1px solid rgba(0,0,0,0.12);transform:scale(-1,1);}
#unwrapCV:active{cursor:grabbing;}

/* 모바일: 물건 크기 입력을 3D 미리보기 캔버스 아래 독립된 바로 노출 */
.mobile-size-bar{display:none;}
.mobile-toggle-slot{display:none;}
.cv-controls-row{display:none;}
.cv-title-badge{display:none;}
@media (max-width:720px){
  .mobile-size-bar{
    display:block; background:transparent; border:none;
    padding:0; margin-bottom:14px;
  }
  .mobile-size-bar:empty{display:none;}
  .mobile-size-bar .size-block{margin-bottom:0;}
  #sizeCardLbl{display:none;}

  /* 안쪽 물건 보기 토글 + 경고 문구 — 사이즈 입력 바로 아래.
     둘 다 숨김 상태(시트형)일 땐 빈 여백이 남지 않도록 마진도 함께 접는다 */
  .mobile-toggle-slot{display:block; margin-bottom:0;}
  .mobile-toggle-slot:has(.toggle-row.show), .mobile-toggle-slot:has(.warn.show){margin-bottom:14px;}
  .mobile-toggle-slot .toggle-row{margin-bottom:10px;}
  .mobile-toggle-slot .warn{margin-bottom:0;}

  /* 확대/축소 + 방향 전환/초기화 버튼 — 캔버스 밖, 한 줄에 나란히 (js/mobile-size-overlay.js) */
  .cv-controls-row{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:10px;
  }
  .cv-controls-row:empty{display:none;}
  #cvControlsRow #zoomControl,
  #cvControlsRow #unwrapBtnGroup{
    position:static; left:auto; top:auto; bottom:auto; margin-left:0;
  }

  /* 패턴 변경 버튼 — 3D 미리보기 카드 하단, 탭하면 패턴 변경 모달이 열림 */
  .pattern-change-btn{
    display:block; width:100%; margin-top:14px;
    height:52px; border:none; border-radius:0;
    background:var(--fig-btn-active-bg); color:#fff;
    font-size:15px; font-weight:500; cursor:pointer;
  }
  .pattern-change-btn:active{opacity:0.85;}

  /* 패턴 변경 하단 시트 모달 */
  .pattern-modal{
    display:none; position:fixed; inset:0; z-index:70;
    align-items:flex-end; justify-content:center;
  }
  .pattern-modal.show{display:flex;}
  .pattern-modal-scrim{position:absolute; inset:0; background:rgba(0,0,0,0.45);}
  .pattern-modal-sheet{
    position:relative; width:100%; max-height:88vh;
    background:var(--bg); border-radius:0;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .pattern-modal-handle{
    width:36px; height:4px; border-radius:999px; background:var(--border);
    margin:10px auto 4px; flex-shrink:0;
  }
  .pattern-modal-body{
    overflow-y:auto; padding:10px 14px 4px;
  }
  .pattern-modal-body .sheet-card{ margin-bottom:14px; }
  .pattern-modal-actions{
    display:flex; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--card); border-top:1px solid var(--border); flex-shrink:0;
  }
  .modal-btn{
    flex:1; height:48px; border-radius:0; font-size:15px; font-weight:700; cursor:pointer;
  }
  .modal-btn-cancel{ border:1px solid var(--fig-field-border); background:var(--fig-field-bg); color:var(--fig-field-text); }
  .modal-btn-apply{ border:1px solid var(--fig-btn-active-bg); background:var(--fig-btn-active-bg); color:#fff; }
}

@media (min-width:721px){
  .pattern-change-btn, .pattern-modal{display:none !important;}
}

/* 확대/축소 컨트롤 */
#zoomControl{
  position:absolute; left:10px; bottom:10px;
  display:flex; align-items:center; gap:6px;
  z-index:5;
}
#zoomControl button{
  border:1px solid rgba(0,0,0,0.08); background:rgba(255,255,255,0.9); cursor:pointer;
  font-size:14px; color:var(--text-sec); font-weight:600;
  width:26px; height:26px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
}
#zoomControl button:active{background:var(--blue-light);}
#zoomPercentLabel{
  font-size:11px; font-weight:600; color:var(--text-sec);
  min-width:34px; text-align:center; cursor:pointer; user-select:none;
}

footer{text-align:center;padding:18px 0 4px;font-size:11px;color:var(--text-ter);}

/* 커스텀 패턴 업로드 — 일단 비활성화 */
.upload-area{
  display:none;
  border:1.5px dashed var(--border);border-radius:0;padding:12px 10px;
  text-align:center;cursor:pointer;background:var(--bg);transition:border-color .15s;
  position:relative;overflow:hidden;margin-top:10px;
}
.upload-area:hover{border-color:var(--blue);}
.upload-area input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-area .up-label{font-size:12.5px;color:var(--text-sec);pointer-events:none;display:flex;align-items:center;justify-content:center;gap:6px;}
.upload-area .up-label span{font-size:18px;}
.custom-preview-wrap{display:none;position:relative;margin-top:8px;}
.custom-preview-wrap.show{display:block;}
.custom-preview-wrap img{width:100%;border-radius:0;border:2px solid var(--blue);aspect-ratio:1;object-fit:cover;display:block;}
.custom-preview-wrap .del-btn{
  position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:0;
  background:rgba(0,0,0,0.55);color:#fff;border:none;cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.custom-active-badge{display:none;font-size:11px;color:var(--blue-dark);background:var(--blue-light);border-radius:0;padding:3px 7px;margin-top:6px;text-align:center;font-weight:600;}
.custom-active-badge.show{display:block;}
.tile-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
.tile-row label{font-size:12px;color:var(--text-sec);}
.tile-row input[type=range]{flex:1;accent-color:var(--blue);}
.tile-row span{font-size:12px;color:var(--text-sec);min-width:28px;text-align:right;}