/* [2026-07-23] 실사출력(PhotoTrueSize) — 실물 크기 인쇄. .pts 스코프, 사이트 톤(#37be69). */

.pts{
  --accent:#37be69;--accent-d:#0d8339;--accent2:#e5f6ec;
  --border:#e4e7ed;--border2:#d0d5dd;
  --text:#16181d;--text2:#5b6270;--text3:#9aa0ab;--bg3:#f0f2f5;
  --radius:12px;--shadow:0 1px 4px rgba(0,0,0,.07);
  width:1080px;max-width:100%;margin:48px auto;padding:0 20px 40px;color:var(--text);font-size:14px;
}
.pts *{box-sizing:border-box;}
.pts-hidden{display:none !important;}

/* 앱 다운로드 배너 */
.pts-appcta{display:flex;align-items:center;justify-content:space-between;gap:16px 20px;flex-wrap:wrap;background:var(--accent2);border:1px solid #cdeeda;border-radius:var(--radius);padding:16px 20px;margin-bottom:24px;}
.pts-appcta__txt strong{display:block;font-size:15px;font-weight:700;color:var(--accent-d);margin-bottom:3px;}
.pts-appcta__txt span{font-size:13px;color:var(--text2);}
.pts-appcta__btns{display:flex;gap:10px;flex-wrap:wrap;}
.pts-store{display:inline-flex;align-items:center;gap:9px;background:#000;color:#fff;border-radius:10px;padding:8px 15px;text-decoration:none;}
.pts-store:hover{background:#222;}
.pts-store svg{width:22px;height:22px;fill:#fff;flex:none;}
.pts-store span{display:flex;flex-direction:column;line-height:1.15;font-weight:700;font-size:15px;}
.pts-store span small{font-size:10px;font-weight:500;opacity:.85;letter-spacing:.02em;}

.pts .page-title{margin-bottom:36px;text-align:center;}
.pts .page-title h1{font-size:28px;font-weight:700;margin-bottom:8px;color:#16181d;letter-spacing:-.02em;}
.pts .page-title p{font-size:15px;color:var(--text2);line-height:1.6;}

.pts-layout{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start;}

/* 패널 */
.pts-panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;}
.pts-panel-head{padding:11px 16px;border-bottom:1px solid var(--border);font-size:14px;font-weight:600;color:var(--text);}
.pts-panel-body{padding:14px 16px;}
.pts-row{margin-bottom:12px;}
.pts-row:last-child{margin-bottom:0;}
.pts-label{font-size:12px;font-weight:600;color:var(--text2);display:flex;justify-content:space-between;margin-bottom:6px;}
.pts-val{color:var(--accent-d);font-weight:600;}
.pts select,.pts input[type=number]{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:13px;padding:8px 10px;}
.pts select:focus,.pts input[type=number]:focus{outline:none;border-color:var(--accent);}
.pts input[type=range]{width:100%;accent-color:var(--accent);}
.pts input[type=checkbox]{accent-color:var(--accent);}

/* 업로드 */
.pts-drop{border:2px dashed var(--border2);border-radius:10px;padding:30px 16px;text-align:center;cursor:pointer;background:var(--bg3);transition:.2s;}
.pts-drop:hover{border-color:var(--accent);background:var(--accent2);}
.pts-drop svg{width:38px;height:38px;stroke:var(--text3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px;}
.pts-drop h3{font-size:14px;font-weight:600;margin-bottom:4px;}
.pts-drop p{font-size:11px;color:var(--text2);}
.pts input[type=file]{display:none;}
.pts-imginfo{font-size:12px;color:var(--text2);margin-top:10px;text-align:center;}

/* 업로드한 사진 썸네일 */
.pts-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.pts-thumb{position:relative;width:54px;height:54px;border:1px solid var(--border2);border-radius:8px;overflow:hidden;background:var(--bg3);}
.pts-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pts-thumb-del{position:absolute;top:-6px;right:-6px;width:18px;height:18px;line-height:16px;text-align:center;border:none;border-radius:50%;background:#e5484d;color:#fff;font-size:13px;cursor:pointer;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.pts-thumb-del:hover{background:#c93a3f;}

/* 단위/레이아웃 탭 */
.pts-tabs{display:flex;border:1px solid var(--border2);border-radius:8px;overflow:hidden;}
.pts-tab{flex:1;padding:7px 4px;font-size:12px;font-weight:600;text-align:center;cursor:pointer;background:var(--bg3);color:var(--text2);border:none;}
.pts-tab.on{background:var(--accent);color:#fff;}
.pts-two{display:grid;grid-template-columns:1fr 18px 1fr;align-items:center;gap:6px;}
.pts-two .x{text-align:center;color:var(--text3);}
.pts-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);cursor:pointer;}

/* 출력 버튼 */
.pts-btn{width:100%;padding:11px;border-radius:9px;border:1px solid var(--border2);background:#fff;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:8px;}
.pts-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pts-btn:last-child{margin-bottom:0;}
.pts-btn--primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.pts-btn--primary:hover{background:var(--accent-d);}
.pts-btn:disabled{opacity:.5;cursor:not-allowed;}
.pts-tip{font-size:11px;color:var(--text3);line-height:1.5;margin-top:8px;}

/* 미리보기 */
.pts-preview{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;position:sticky;top:20px;}
.pts-preview-info{font-size:12px;color:var(--text2);text-align:center;margin-bottom:12px;}
.pts-preview-info b{color:var(--accent-d);}
.pts-frame{display:flex;justify-content:center;align-items:flex-start;background:var(--bg3);border-radius:8px;padding:12px;overflow:auto;max-height:80vh;}
.pts-empty{color:var(--text3);padding:80px 20px;font-size:13px;text-align:center;}

/* 종이(실물 크기 — mm는 JS에서 지정) */
.pts-paper-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;flex:none;}
.pts-page-holder{position:relative;flex:none;}
.pts-paper{position:absolute;top:0;left:0;transform-origin:top left;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.18);}
.pts-paper.pts-draggable{cursor:grab;}
.pts-paper.pts-draggable:active{cursor:grabbing;}
.pts-cell img{user-select:none;-webkit-user-drag:none;}
.pts-grid{display:grid;width:100%;height:100%;}
.pts-cell{overflow:hidden;background:#fafafa;}
.pts-cell img{width:100%;height:100%;display:block;}
.pts-cell.cover img{object-fit:cover;}
.pts-cell.contain img{object-fit:contain;}
/* [2026-08-27] 자동회전: 사진을 90° 눕혀 칸을 채움(폭/높이는 JS가 mm로 지정) */
.pts-cell.pts-rot{position:relative;}
.pts-cell.pts-rot img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);}
/* [2026-08-27] 비로그인 워터마크 미리보기 오버레이(배경 SVG는 ns_watermark.js가 주입) */
.pts-wm{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;background-repeat:repeat;}

@media (max-width:900px){
  .pts-layout{grid-template-columns:1fr;}
  .pts-preview{position:static;}
}
@media (max-width:768px){
  .pts{margin:clamp(24px,5.2vw,48px) auto;}
  .pts .page-title h1{font-size:clamp(20px,4.7vw,28px);}
  .pts .page-title p{font-size:clamp(13px,2.6vw,15px);}
}

/* ===== 인쇄: 종이만 실물 크기로 (여러 장이면 페이지 분할) ===== */
@media print {
  @page { size: A4; margin: 0; }
  html, body { margin:0 !important; padding:0 !important; background:#fff !important; }
  body { visibility: hidden !important; }
  #ptsPaperWrap, #ptsPaperWrap * { visibility: visible !important; }
  /* 종이까지의 래퍼는 박스를 없애(display:contents) 본문 최상단·좌측에 오도록 함 */
  .pts, .pts-layout, .pts-preview, .pts-frame, .pts-paper-wrap { display: contents !important; }
  /* 종이 외 UI는 '공간까지' 제거 (visibility:hidden은 자리를 남겨 앞장이 비게 됨) */
  .pts .page-title, .pts-controls, .pts-preview-info, #ptsEmpty { display: none !important; }
  /* [2026-08-27] 종이 위쪽에 자리를 차지하던 요소들(사이트 헤더/배너/설명/안내 바)을 공간까지 제거
     → 위 여백으로 A4 한 장이 다음 장으로 밀려 2장 인쇄되던 문제 해결 */
  /* [2026-08-28] .tool-cta / .site-footer 는 Sitefooter_hook 이 도구 페이지 하단에 자동 삽입.
     .tool-cta 가 용지 아래에 남아 빈 2페이지를 만들던 진짜 원인 → 인쇄에서 숨김(라이브 측정으로 확인). */
  /* [2026-09-16] 수정 전 - .ns-sitedemo(헤더 아래 데모 안내 고정 배너) 미포함 → 용지 위에 배너 높이만큼 여백이 생겨 2장 인쇄됨
  header, footer, nav,
  .ns-wm-notice, .ns-demo-bar, .ns-exhausted-bar,
  .pts-appcta, .tool-guide, .tool-related, .tool-cta, .site-footer { display: none !important; } */
  /* [2026-09-16] 수정 후 - .ns-sitedemo 추가 */
  header, footer, nav,
  .ns-sitedemo, .ns-wm-notice, .ns-demo-bar, .ns-exhausted-bar,
  .pts-appcta, .tool-guide, .tool-related, .tool-cta, .site-footer { display: none !important; }
  /* [2026-08-27] 수정 전 - 각 용지 뒤에 break(page-break-after:always) → 마지막 용지 뒤에도 빈 페이지가 붙음
  .pts-page-holder { position:static !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; page-break-after:always; break-after:page; }
  .pts-page-holder:last-child { page-break-after:auto; break-after:auto; }
  */
  /* [2026-08-27] 수정 후 - 페이지 구분을 '다음 용지 앞'에서 끊음(break-before) → 마지막 용지 뒤 빈 페이지 방지 */
  .pts-page-holder { position:static !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; overflow:hidden; }
  .pts-page-holder + .pts-page-holder { page-break-before:always; break-before:page; }
  /* [2026-08-27] 수정 - 용지 높이를 297mm 고정 → 내용 높이(auto), 단 A4 높이보다 1mm 작게(296mm) 상한.
     여러 장 배치가 용지를 거의 가득 채우면 297mm=페이지높이가 되어 반올림 초과분이 빈 페이지를 만들었음.
     (100vh는 인쇄에서 불안정 → 고정 mm 사용. 사진 칸은 각각 mm 고정이라 실물 크기 유지, 아래 흰 여백만 최대 1mm 잘림) */
  /* [2026-08-27] box-sizing:border-box 필수 - 기본값(content-box)이면 max-height(296mm)에 padding(10mm)이
     더해져 용지가 306mm가 되어 페이지(297mm)를 넘겨 빈 페이지가 생김. border-box면 padding 포함 296mm로 제한됨.
     (크롬에서 측정 확인: content-box=306mm→빈페이지, border-box=296mm→1장) */
  .pts-paper { position:relative !important; transform:none !important; box-shadow:none !important; margin:0 !important; box-sizing:border-box !important; height:auto !important; max-height:296mm !important; overflow:hidden !important; }
  /* [2026-08-27] 화면용 .pts-grid{height:100%}가 인쇄에서 용지(auto)와 순환 참조 → 용지가 297mm로 안 줄던 문제.
     인쇄 시 그리드 높이를 내용(auto)으로 강제해 용지가 실제 내용 높이로 줄어들게 함. */
  .pts-grid { height:auto !important; }
  .pts-cell { background:transparent !important; }
}