/* =====================================================
   사진 두 장을 A4 한 장에 놓는 편집 화면 (includes/photo-merge.php)
   헤더 · 안내 영상(.print-hero) · 완료 버튼(.print-submit-btn)은 common.css · print.css 것을 그대로 쓴다.
   ===================================================== */

.pm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    z-index: 310; /* 출력 옵션 오버레이(.print-section-overlay 300) 바로 위, 공통 확인 창(800) 아래 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* 끝까지 밀었을 때 뒤의 화면이 따라 움직이지 않게 */
    font-family: 'Noto Sans KR', sans-serif;
}
.pm-overlay.active {
    display: block;
}

/* =====================================================
   용지
   ===================================================== */
/* 용지를 안내 영상 아래쪽에 12px 겹친다 — 영상 속 캐릭터의 다리가 허공에서 잘리지 않고 용지에 닿게 (홈 화면의 .buttons 와 같은 방식) */
.pm-paper-wrap {
    position: relative;
    z-index: 1;
    margin-top: -12px;
    padding: 0 0 10px;
    display: flex;
    justify-content: center;
}
.pm-paper {
    position: relative;
    flex-shrink: 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    /* 용지의 빈 곳은 화면을 위아래로 민다. 칸(.pm-touch)과 회전 손잡이(.pm-rot-touch) 위에서만 편집 동작 */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.pm-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 4px;
}
.pm-paper-tag {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 10px;
    color: #b0b0b0;
    letter-spacing: 0.3px;
    pointer-events: none;
}

/* 칸 테두리 — 위치와 크기는 photo-merge.js 가 넣는다 */
.pm-frame {
    position: absolute;
    border-radius: 8px;
    outline: 1.5px dashed #c9d0db;
    pointer-events: none;
}
.pm-frame.active {
    outline: 2px solid #5a86ff;
}
/* 칸 안과 테두리 둘레 14px — 이 위에서 시작한 손가락 동작은 편집에만 쓴다(화면이 따라 밀리지 않게) */
.pm-touch {
    position: absolute;
    left: -14px;
    top: -14px;
    right: -14px;
    bottom: -14px;
    pointer-events: auto;
    touch-action: none;
}
.pm-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2.5px solid #5a86ff;
    display: none;
}
.pm-frame.active .pm-corner { display: block; }
.pm-corner.tl { left: -1px; top: -1px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.pm-corner.tr { right: -1px; top: -1px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.pm-corner.bl { left: -1px; bottom: -1px; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.pm-corner.br { right: -1px; bottom: -1px; border-left: none; border-top: none; border-radius: 0 0 8px 0; }

/* 가장자리 가운데 손잡이 — 선택한 칸의 가로 · 세로를 따로 늘리고 줄인다 */
.pm-edge {
    position: absolute;
    display: none;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #5a86ff;
    border-radius: 4px;
}
.pm-frame.active .pm-edge { display: block; }
.pm-edge.t, .pm-edge.b { left: 50%; width: 22px; height: 8px; margin-left: -11px; }
.pm-edge.l, .pm-edge.r { top: 50%; width: 8px; height: 22px; margin-top: -11px; }
.pm-edge.t { top: -4px; }
.pm-edge.b { bottom: -4px; }
.pm-edge.l { left: -4px; }
.pm-edge.r { right: -4px; }

/* 칸이 넘지 못하는 한도선 — 칸 크기를 바꾸는 동안에만 보인다 */
.pm-limit {
    display: none;
    position: absolute;
    box-sizing: border-box;
    border: 1px dashed rgba(90,134,255,0.45);
    border-radius: 3px;
    pointer-events: none;
}
.pm-paper.resizing .pm-limit { display: block; }

/* 칸 이름 */
.pm-slot-label {
    position: absolute;
    transform: translateX(-50%);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
    color: #8b93a1;
    white-space: nowrap;
    pointer-events: none;
}
.pm-slot-label.on { color: #5a86ff; }
/* 칸 밖에 둘 여백이 없을 때 — 칸 안쪽 왼쪽 위에 흰 알약 모양으로 */
.pm-slot-label.in {
    transform: none;
    padding: 2px 8px;
    border-radius: 9px;
    background: rgba(255,255,255,0.92);
    color: #6b7380;
    box-shadow: 0 1px 3px rgba(40,70,160,0.18);
    z-index: 3;
}
.pm-slot-label.in.on { color: #5a86ff; }

/* 선택한 칸의 출력 크기 — 「자 보기」를 켰을 때만 */
.pm-size-badge {
    display: none;
    position: absolute;
    padding: 2px 7px;
    border-radius: 9px;
    background: #eef3ff;
    color: #5a86ff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}
.pm-paper.ruled .pm-size-badge { display: block; }
.pm-size-badge.in {
    background: rgba(238,243,255,0.96);
    box-shadow: 0 1px 3px rgba(40,70,160,0.18);
}

/* 칸마다 있는 사진 교체 버튼 — 글자 없이 아이콘만 */
.pm-swap {
    position: absolute;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(40,70,160,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    text-decoration: none;
}
.pm-swap:active { background: #eef3ff; }
.pm-swap svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #5a86ff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* 회전 손잡이 — 선택한 칸 아래 */
/* 손잡이를 누르는 영역(보이지 않음, 44px) */
.pm-rot-touch {
    display: none;
    position: absolute;
    width: 44px;
    height: 44px;
    margin-left: -22px;
    touch-action: none;
    z-index: 3;
}
.pm-paper.has-active .pm-rot-touch { display: block; }
.pm-rot-stem {
    display: none;
    position: absolute;
    width: 2px;
    height: 8px;
    margin-left: -1px;
    background: #5a86ff;
    pointer-events: none;
    z-index: 3;
}
.pm-rot-handle {
    display: none;
    position: absolute;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #5a86ff;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 4;
}
.pm-rot-handle svg { width: 14px; height: 14px; fill: #5a86ff; }
.pm-paper.has-active .pm-rot-stem { display: block; }
.pm-paper.has-active .pm-rot-handle { display: flex; }

/* 센티미터 자 — 「자 보기」를 켰을 때만 용지 위 · 왼쪽에 */
.pm-ruler {
    display: none;
    position: absolute;
    background: #f7f8fa;
    pointer-events: none;
    z-index: 2;
}
.pm-paper.ruled .pm-ruler { display: block; }
.pm-ruler.top { left: 0; top: 0; right: 0; height: 14px; border-bottom: 1px solid #e3e6eb; border-radius: 4px 4px 0 0; }
.pm-ruler.left { left: 0; top: 0; bottom: 0; width: 14px; border-right: 1px solid #e3e6eb; border-radius: 4px 0 0 4px; }
.pm-ruler .tk { position: absolute; background: #9aa3b2; }
.pm-ruler.top .tk { bottom: 0; width: 1px; height: 4px; }
.pm-ruler.top .tk.big { height: 8px; }
.pm-ruler.left .tk { right: 0; height: 1px; width: 4px; }
.pm-ruler.left .tk.big { width: 8px; }
.pm-ruler .no { position: absolute; font-size: 7px; line-height: 1; color: #7d8592; }
.pm-ruler.top .no { top: 1px; }
.pm-ruler.left .no { left: 1px; }
.pm-paper.ruled .pm-paper-tag { left: 20px; top: 19px; }
/* 자를 켠 동안 용지에 옅은 격자 — 1cm 간격, 5cm 마다 조금 진하게. 간격(background-size)은 photo-merge.js 가 넣는다 */
.pm-paper.ruled {
    background-image:
        linear-gradient(to right, rgba(90,134,255,0.16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(90,134,255,0.16) 1px, transparent 1px),
        linear-gradient(to right, rgba(90,134,255,0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(90,134,255,0.07) 1px, transparent 1px);
}

/* =====================================================
   도구 버튼
   ===================================================== */
.pm-tools {
    margin: 2px 16px 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
}
.pm-tool-row {
    display: flex;
}
.pm-tool {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 11px 0 10px;
    border: none;
    border-right: 1px solid #f0f0f0;
    background: none;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pm-tool:last-child { border-right: none; }
.pm-tool svg { width: 22px; height: 22px; fill: #555; }
.pm-tool.on { color: #5a86ff; background: #eef3ff; }
.pm-tool.on svg { fill: #5a86ff; }
.pm-tool.dim { color: #c4c4c4; cursor: default; }
.pm-tool.dim svg { fill: #c4c4c4; }

/* 가리기의 펜 크기와 색상 — 「가리기」를 켰을 때만 */
.pm-brush-row {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 8px 9px;
    border-top: 1px solid #f0f0f0;
}
.pm-brush-row.active { display: flex; }
.pm-brush {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    padding: 0;
    border: 1.5px solid #e3e6eb;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.pm-brush span { display: block; border-radius: 50%; background: #111; }
.pm-brush[data-brush="0"] span { width: 6px; height: 6px; }
.pm-brush[data-brush="1"] span { width: 11px; height: 11px; }
.pm-brush[data-brush="2"] span { width: 17px; height: 17px; }
.pm-brush.on { border-color: #5a86ff; background: #eef3ff; }
/* 크기와 색상 사이의 구분선 */
.pm-brush-sep {
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: #e9ebef;
    flex-shrink: 0;
}
/* 펜 색상 — 고른 색은 바깥에 파란 고리 */
.pm-color {
    position: relative;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.pm-color.light { box-shadow: inset 0 0 0 1.5px #d5d9e0; }
.pm-color.on { outline: 2px solid #5a86ff; outline-offset: 2px; }
/* 색상 선택기 — 모든 색이 보이는 네모 */
.pm-color-pick {
    border-radius: 7px;
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0) 50%, rgba(0,0,0,0.55)),
        linear-gradient(to right, #ff3b30, #ffcc00, #34c759, #32ade6, #5856d6, #ff2d55);
    overflow: hidden;
}
.pm-color-pick input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
}
/* 색상 선택기로 고른 색을 쓰는 중이면 그 색을 가운데 점으로 보여 준다 */
.pm-color-pick.on::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--pm-picked, #22a06b);
    box-shadow: 0 0 0 2px #fff;
}

/* =====================================================
   안내 문구 · 완료
   ===================================================== */
.pm-notice {
    margin: 14px 24px 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: #999;
    text-align: center;
    word-break: keep-all;
}
.pm-bottom {
    padding: 0 16px 20px;
}
.pm-bottom .print-submit-btn {
    margin-top: 12px;
}

/* 사진을 불러오거나 합치는 동안 */
.pm-busy {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 320;
    align-items: center;
    justify-content: center;
}
.pm-busy.active { display: flex; }

/* =====================================================
   PC 레이아웃 — 400px 고정 (출력 옵션 오버레이와 같게)
   ===================================================== */
@media (min-width: 450px) {
    .pm-overlay {
        max-width: 400px;
        left: 50%;
        transform: translateX(-50%);
    }
}