/* 공개용에서는 상품/재단 계약 UI 대신 작업판 크기와 편집 기능에 집중한다. */
#product-info-bar,
#sticker-template-notice,
#pvc-kisscut-product-switcher,
#sprod-sheet-division,
#sheet-clone-guide,
#sticker-controls {
  display: none !important;
}

/* 공개용은 우측 패널의 다운로드 버튼만 사용한다.
   레거시 하단 전송 버튼까지 동시에 노출되면 두 버튼이 겹쳐 보인다. */
#btn-download,
#pvc-kisscut-submit-bar {
  display: none !important;
}

body.sheet-freeform-layout-mode .canvas-scroll-viewport {
  inset: 0 0 70px !important;
}

@media (min-width: 681px) {
  body.sheet-freeform-layout-mode .right-sidebar {
    display: flex !important;
  }

  .right-sidebar {
    width: 286px;
    min-width: 286px;
  }
}

#sidebar-size-view {
  display: block !important;
  min-height: 0;
}

.public-global-settings {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(78px, .75fr);
  gap: 7px;
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid #e3ddec;
  border-radius: 11px;
  background: #faf8fd;
}

.public-global-settings label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #746a7f;
  font-size: 9px;
  font-weight: 800;
}

.public-global-settings select {
  width: 100%;
  height: 34px;
  padding: 0 28px 0 9px;
  border: 1px solid #d6cfdf;
  border-radius: 8px;
  background: #fff;
  color: #2d2633;
  font: 750 11px/1 Arial, 'Noto Sans KR', sans-serif;
  cursor: pointer;
  outline: none;
}

.public-global-settings select:focus-visible {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .11);
}

html[lang="ja"] body { font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; }
html[lang="en"] body { font-family: Inter, Arial, sans-serif; }

.public-unit-label { font: inherit; }

html.public-language-pending { overflow: hidden; }

html.public-language-pending::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100280;
  background: #f5f2fa;
}

.public-language-welcome {
  position: fixed;
  inset: 0;
  z-index: 100300;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(165, 113, 255, .24), transparent 34%),
    radial-gradient(circle at 86% 88%, rgba(255, 91, 207, .16), transparent 31%),
    rgba(28, 22, 36, .74);
  backdrop-filter: blur(9px);
}

.public-language-welcome[hidden] { display: none; }
.public-language-welcome.is-leaving { cursor: wait; }

.public-language-welcome__card {
  position: relative;
  width: min(470px, calc(100vw - 32px));
  overflow: hidden;
  box-sizing: border-box;
  padding: 34px 32px 28px;
  border: 1px solid rgba(124, 58, 237, .16);
  border-radius: 24px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 28px 90px rgba(16, 11, 23, .34);
  text-align: center;
}

.public-language-welcome__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #7c3aed, #a855f7 52%, #ec4899);
}

.public-language-welcome__brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
  color: #4c4258;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1.5px;
}

.public-language-welcome__brand span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, #7c3aed, #a855f7);
  color: #fff;
  font: 950 11px/1 Arial, sans-serif;
  box-shadow: 0 5px 14px rgba(124, 58, 237, .28);
}

.public-language-welcome__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #7c3aed;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2px;
}

.public-language-welcome h2 {
  margin: 0;
  color: #1f1925;
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: -.7px;
}

.public-language-welcome__description {
  margin: 9px 0 22px;
  color: #776c82;
  font-size: 12px;
  line-height: 1.55;
}

.public-language-welcome__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.public-language-welcome__options button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 100px;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 15px 8px 13px;
  border: 1.5px solid #e2dce9;
  border-radius: 15px;
  background: #fff;
  color: #312839;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.public-language-welcome__options button:hover {
  z-index: 1;
  border-color: #9b6bea;
  background: #fcfaff;
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(78, 47, 105, .12);
}

.public-language-welcome__options button:focus-visible {
  z-index: 2;
  outline: 3px solid rgba(124, 58, 237, .22);
  outline-offset: 2px;
}

.public-language-welcome__options button.is-current {
  border-color: #7c3aed;
  background: #f7f2ff;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .08);
}

.public-language-welcome__options button:disabled { cursor: wait; opacity: .72; }

.public-language-welcome__code {
  display: inline-flex;
  min-width: 31px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 99px;
  background: #f0ebf5;
  color: #766a82;
  font: 900 9px/1 Arial, sans-serif;
  letter-spacing: .6px;
}

.public-language-welcome__options .is-current .public-language-welcome__code {
  background: #e9ddff;
  color: #6d28d9;
}

.public-language-welcome__options strong { font-size: 14px; }

.public-language-welcome__check {
  position: absolute;
  top: 9px;
  right: 9px;
  display: none;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: #7c3aed;
  color: #fff;
  font: 900 10px/1 Arial, sans-serif;
}

.public-language-welcome__options .is-current .public-language-welcome__check { display: grid; }

.public-language-welcome__hint {
  margin: 17px 0 0;
  color: #958b9d;
  font-size: 10px;
  line-height: 1.45;
}

.public-workspace-editor {
  padding: 4px 0 18px;
  color: #29232f;
}

.public-workspace-editor__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 99px;
  background: #f1eafd;
  color: #6d32d7;
  font-size: 9px;
  font-weight: 900;
}

.public-workspace-editor h2 {
  margin: 10px 0 5px;
  color: #19151d;
  font-size: 20px;
  letter-spacing: -.6px;
}

.public-workspace-editor__description {
  margin: 0 0 14px;
  color: #7b7382;
  font-size: 10px;
  line-height: 1.55;
}

.public-workspace-editor__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
  align-items: end;
  gap: 5px;
}

.public-workspace-editor__fields label {
  display: grid;
  gap: 5px;
  color: #6d6575;
  font-size: 10px;
  font-weight: 800;
}

.public-field-label {
  display: flex;
  min-width: 0;
  min-height: 19px;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.public-field-label .public-field-unit {
  display: inline-flex;
  min-width: 24px;
  min-height: 18px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 1px solid #ded3ee;
  border-radius: 99px;
  background: #f3edfb;
  color: #7135c4;
  font: 900 8px/1 Arial, sans-serif;
  letter-spacing: .15px;
}

.public-workspace-editor__fields input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border: 1.5px solid #d8d2de;
  border-radius: 9px;
  background: #fff;
  color: #17131c;
  font: 800 14px/1 Arial, sans-serif;
  text-align: center;
  outline: none;
}

.public-workspace-editor__fields input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .11);
}

.public-workspace-editor__times {
  padding-bottom: 12px;
  color: #9a919f;
  font-size: 12px;
  text-align: center;
}

.public-workspace-editor__apply {
  width: 100%;
  height: 40px;
  margin-top: 9px;
  border: 0;
  border-radius: 9px;
  background: #17131c;
  color: #fff;
  font: 800 12px/1 'Noto Sans KR', sans-serif;
  cursor: pointer;
}

.public-workspace-editor__apply:hover { background: #302838; }

.public-workspace-editor__presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.public-workspace-editor__preset {
  min-height: 32px;
  border: 1px solid #ddd7e3;
  border-radius: 7px;
  background: #faf9fb;
  color: #5b5263;
  font: 750 9px/1.25 'Noto Sans KR', sans-serif;
  cursor: pointer;
  white-space: pre-line;
}

.public-workspace-editor__preset:hover {
  border-color: #a98ae4;
  background: #f7f2ff;
  color: #6330be;
}

.public-workspace-editor__status {
  margin: 12px 0 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f4f2f6;
  color: #645b6c;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.5;
}

.public-tutorial-open {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border: 1px solid #d9c9ff;
  border-radius: 10px;
  background: #f7f2ff;
  color: #532da8;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.public-tutorial-open:hover { background: #efe5ff; }

.public-tutorial-open:disabled {
  cursor: default;
  opacity: 0.72;
}

.public-tutorial-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 15, 22, 0.72);
  backdrop-filter: blur(4px);
}

.public-tutorial-modal.is-open { display: flex; }

.public-tutorial-modal__dialog {
  position: relative;
  width: min(900px, 94vw);
  max-height: 92vh;
  overflow: auto;
  padding: 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(20, 14, 28, 0.32);
}

.public-tutorial-modal__dialog h2 {
  margin: 8px 0 16px;
  font-size: 24px;
}

.public-tutorial-modal__dialog img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
  background: #1d1822;
}

.public-tutorial-modal__dialog p {
  margin: 14px 2px 0;
  color: #59515f;
  font-size: 14px;
  line-height: 1.7;
}

.public-tutorial-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #f0edf2;
  color: #302838;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

#btn-remove-bg .public-bg-usage {
  display: block;
  margin-top: 3px;
  color: #7648ce;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.public-sidebar-divider {
  height: 1px;
  margin: 0 0 16px;
  background: #ebe8ed;
}

.public-size-editor {
  display: none;
  box-sizing: border-box;
  margin: 0;
  padding: 12px;
  border: 1px solid #ded8e7;
  border-radius: 10px;
  background: #fbf9ff;
  color: #2f2938;
  box-shadow: none;
}

.public-size-editor.is-ready.is-open { display: block; }

.public-size-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.public-size-editor__head strong { font-size: 12px; }
.public-size-editor__head span { color: #7b7188; font-size: 9px; }

.public-size-editor__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr);
  align-items: end;
  gap: 5px;
}

.public-size-editor__fields label {
  display: grid;
  gap: 4px;
  color: #756a82;
  font-size: 9px;
}

.public-size-editor__fields input {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid #d5cedd;
  border-radius: 7px;
  background: #fff;
  color: #17131c;
  font: 700 12px/1 Arial, sans-serif;
  text-align: center;
  outline: none;
}

.public-size-editor__fields input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, .12);
}

.public-size-editor__times {
  padding-bottom: 9px;
  color: #93899e;
  font-size: 11px;
  text-align: center;
}

.public-size-editor__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.public-size-editor__lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #5e5568;
  font-size: 9px;
  cursor: pointer;
}

.public-size-editor__apply {
  min-width: 64px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: #17131c;
  color: #fff;
  font: 700 10px/1 'Noto Sans KR', sans-serif;
  cursor: pointer;
}

.public-size-editor__apply:disabled {
  background: #c7c2cc;
  cursor: not-allowed;
}

.public-size-editor__presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.public-size-editor__preset {
  min-width: 0;
  padding: 5px 2px;
  border: 1px solid #ded8e7;
  border-radius: 6px;
  background: #fff;
  color: #574d62;
  font: 700 9px/1 Arial, sans-serif;
  cursor: pointer;
}

.public-size-editor__help {
  min-height: 26px;
  margin: 8px 0 0;
  color: #867b91;
  font-size: 9px;
  line-height: 1.45;
}

.public-service-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin: 12px 0 2px;
  color: #8a8490;
  font-size: 9px;
}

.public-service-links a { color: inherit; text-decoration: none; }
.public-service-links a:hover { color: #111; text-decoration: underline; }

.public-export-modal {
  position: fixed;
  inset: 0;
  z-index: 21000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(18, 15, 22, 0.74);
  backdrop-filter: blur(5px);
}

.public-export-modal.is-open { display: flex; }

.public-export-modal__dialog {
  position: relative;
  width: min(660px, 94vw);
  max-height: 92vh;
  overflow: auto;
  padding: 26px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 26px 90px rgba(19, 14, 24, 0.36);
}

.public-export-modal__dialog h2 {
  margin: 8px 0 5px;
  color: #211a27;
  font-size: 25px;
  line-height: 1.25;
}

.public-export-modal__intro {
  margin: 0 0 18px;
  color: #716878;
  font-size: 13px;
  line-height: 1.6;
}

.public-export-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #f0edf2;
  color: #302838;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.public-export-formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.public-export-format {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr 24px;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 11px 12px;
  border: 1px solid #e2dce8;
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.public-export-format:hover {
  border-color: #b99be9;
  background: #fcfaff;
  transform: translateY(-1px);
}

.public-export-format:has(input:checked) {
  border-color: #7c3aed;
  background: #f8f3ff;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.09);
}

.public-export-format input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.public-export-format__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 11px;
  background: #282130;
  color: #fff;
  font: 800 13px/1 Arial, sans-serif;
  text-transform: lowercase;
}

.public-export-format:has(input:checked) .public-export-format__badge { background: #6d28d9; }

.public-export-format__copy { min-width: 0; }
.public-export-format__copy strong {
  display: block;
  margin-bottom: 4px;
  color: #2b2331;
  font-size: 13px;
}
.public-export-format__copy small {
  display: block;
  color: #7b7183;
  font-size: 10px;
  line-height: 1.45;
}

.public-export-format__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #dcd5e1;
  border-radius: 50%;
  color: transparent;
  font-size: 12px;
}

.public-export-format:has(input:checked) .public-export-format__check {
  border-color: #6d28d9;
  background: #6d28d9;
  color: #fff;
}

.public-export-modal__notice {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f5f2f7;
  color: #6b6172;
  font-size: 10px;
  line-height: 1.55;
}

.public-export-modal__status {
  min-height: 20px;
  margin: 10px 0 4px;
  color: #6d28d9;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.public-export-modal__download {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: #201927;
  color: #fff;
  font: 800 14px/1 'Noto Sans KR', sans-serif;
  cursor: pointer;
}

.public-export-modal__download:hover { background: #352a40; }
.public-export-modal__download:disabled { background: #a7a0ac; cursor: wait; }

/* 작업판 가장자리를 실제 비율의 줄자로 사용해 가로·세로를 항상 함께 보여준다. */
body.sheet-freeform-layout-mode .pvc-kisscut-dimensions {
  --pvc-ruler-minor-step: 10px;
  --pvc-ruler-major-step: 50px;
  z-index: 24;
  color: #655b70;
  font-size: 10px;
  font-weight: 800;
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-horizontal {
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 22px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .94), rgba(255, 255, 255, 0));
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-vertical {
  top: 0;
  left: 0;
  width: 22px;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, .94), rgba(255, 255, 255, 0));
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-line {
  top: 0;
  right: 0;
  left: 0;
  height: 13px;
  border-top: 1px solid #897d94;
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-line {
  top: 0;
  bottom: 0;
  left: 0;
  width: 13px;
  border-left: 1px solid #897d94;
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-line::before,
body.sheet-freeform-layout-mode .pvc-kisscut-dimension-line::after {
  position: absolute;
  content: '';
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-line::before {
  inset: 0 0 auto;
  height: 6px;
  background: repeating-linear-gradient(
    to right,
    #a99faf 0 1px,
    transparent 1px var(--pvc-ruler-minor-step)
  );
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-line::after {
  inset: 0 0 auto;
  height: 11px;
  background: repeating-linear-gradient(
    to right,
    #75687f 0 1px,
    transparent 1px var(--pvc-ruler-major-step)
  );
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-line::before {
  inset: 0 auto 0 0;
  width: 6px;
  background: repeating-linear-gradient(
    to bottom,
    #a99faf 0 1px,
    transparent 1px var(--pvc-ruler-minor-step)
  );
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-line::after {
  inset: 0 auto 0 0;
  width: 11px;
  background: repeating-linear-gradient(
    to bottom,
    #75687f 0 1px,
    transparent 1px var(--pvc-ruler-major-step)
  );
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-tick,
body.sheet-freeform-layout-mode .pvc-kisscut-dimension-arrow {
  display: none;
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-label {
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid rgba(117, 104, 127, .28);
  background: rgba(255, 255, 255, .94);
  color: #5f5469;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(58, 43, 72, .10);
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-label {
  top: -24px;
}

body.sheet-freeform-layout-mode .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-label {
  left: -24px;
}

@media (max-width: 760px) {
  body.sheet-freeform-layout-mode .canvas-scroll-viewport { inset: 0 0 64px !important; }
  .right-sidebar { display: flex !important; }
  .public-workspace-editor { padding: 2px 0 14px; }
  .public-size-editor {
    width: auto;
    margin: 0;
  }
  .public-size-editor__presets { grid-template-columns: repeat(6, minmax(46px, 1fr)); overflow-x: auto; }
  .public-export-modal { padding: 10px; }
  .public-export-modal__dialog { padding: 22px 16px 18px; border-radius: 17px; }
  .public-export-modal__dialog h2 { padding-right: 34px; font-size: 20px; }
  .public-export-formats { grid-template-columns: 1fr; }
  .public-export-format { min-height: 68px; }
}

@media (max-width: 680px) {
  /* 모바일에서는 하단 고정 다운로드 버튼만 남긴다. */
  .sidebar-bottom #btn-download-file { display: none !important; }
  .public-language-welcome { padding: 12px; }
  .public-language-welcome__card { padding: 27px 18px 22px; border-radius: 19px; }
  .public-language-welcome h2 { font-size: 21px; }
  .public-language-welcome__options { grid-template-columns: 1fr; gap: 7px; }
  .public-language-welcome__options button {
    grid-template-columns: auto 1fr;
    min-height: 58px;
    justify-items: start;
    align-content: center;
    gap: 11px;
    padding: 10px 42px 10px 14px;
  }
  .public-language-welcome__options strong { font-size: 13px; }
}