/* polaroid_garland — 끈에 줄줄이 걸린 폴라로이드 갤러리
   포인트 컬러/폰트/여백은 사이트 디자인 변수(css/default.css.php)를 따른다.
   폴라로이드 용지(흰 프레임)와 나무 집게는 실물 색이라 테마색과 무관하게 고정한다.
   모달/편집기/라이트박스는 polaroid_board 와 같은 모양이다. */

#container_wr {
    max-width: 95%;
}

.pgl-board {
    position: relative;
    width: 100%;
    max-width: 100%;
}

/* ---------------- 끈 영역 ----------------
   배경/테두리 없이 페이지 위에 바로 걸린다. 끈은 JS 가 페이지 양끝까지 늘리므로
   여기서 overflow 를 자르면 안 된다. */
.pgl-wall {
    position: relative;
    width: 100%;
    padding: 256px 0 72px;
    box-sizing: border-box;
}

/* 폴라로이드가 걸리는 폭. 줄(끈)은 이 값과 무관하게 페이지 양끝까지 이어진다 */
.pgl-garland {
    --pgl-garland-width: 70%;
    position: relative;
    width: var(--pgl-garland-width);
    margin: 0 auto;
}

.pgl-empty {
    margin: 0;
    padding: 120px 0;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.pgl-row {
    position: relative;
    margin-bottom: 156px;
}

.pgl-row:last-child {
    margin-bottom: 0;
}

.pgl-string {
    position: absolute;
    top: 0;
    /* left 는 JS 가 음수로 지정(보드 왼쪽 → 페이지 왼쪽 끝). 폭을 넘는 선은 잘라 가로 스크롤 방지 */
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* 끈 — 집게와 어울리는 마끈 색 + 아래로 옅게 떨어지는 그림자 한 줄 */
.pgl-string path {
    fill: none;
    stroke: #8b7357;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.pgl-string path.pgl-string-shadow {
    stroke: rgb(0 0 0 / 8%);
    stroke-width: 2.4;
    translate: 0 2.5px;
}

.pgl-row-cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
    justify-items: center;
    align-items: start;
    z-index: 1;
}

/* ---------------- 폴라로이드 카드 ---------------- */
.pgl-card {
    --tilt: 0deg;
    position: relative;
    width: calc(var(--pgl-card-w, 176px) * var(--pgl-scale, 1));
    transition: margin-top .35s var(--motion-ease), translate .35s var(--motion-ease);
}

/* 집게를 축으로 매달려 기울어지고, 호버하면 그 축으로 살랑 흔들린다 */
.pgl-swing {
    position: relative;
    transform-origin: 50% -6px;
    rotate: var(--tilt);
    perspective: 1200px;
    transition: rotate .4s var(--motion-ease);
}

.pgl-card:hover .pgl-swing {
    animation: pgl-sway 1.6s ease-in-out;
}

.pgl-card.is-flipped .pgl-swing,
.pgl-board.is-editing .pgl-swing {
    animation: none;
}

.pgl-card.is-flipped {
    z-index: 5;
}

@keyframes pgl-sway {
    0%   { rotate: var(--tilt); }
    20%  { rotate: calc(var(--tilt) + 4deg); }
    45%  { rotate: calc(var(--tilt) - 2.6deg); }
    70%  { rotate: calc(var(--tilt) + 1.2deg); }
    100% { rotate: var(--tilt); }
}

/* 새로 건 사진은 위에서 툭 걸리는 느낌으로 등장 */
.pgl-card.is-new .pgl-swing {
    animation: pgl-hang .9s var(--motion-ease) both;
}

@keyframes pgl-hang {
    0%   { opacity: 0; translate: 0 -24px; rotate: calc(var(--tilt) + 10deg); }
    50%  { opacity: 1; translate: 0 0; rotate: calc(var(--tilt) - 5deg); }
    75%  { rotate: calc(var(--tilt) + 2deg); }
    100% { rotate: var(--tilt); }
}

/* 빨래집게 — 나무색 막대 하나. 갈라진 틈/스프링 같은 디테일 없이
   안쪽 명암(왼쪽 밝게, 오른쪽 어둡게)과 작은 그림자만으로 입체감을 준다.
   끈이 집게 위쪽 1/3 지점을 지나도록 JS 의 PIN_DROP 과 맞춰 둔다.
   뒤집혀도 같은 자리에 있도록 flip 되는 .pgl-inner 바깥에 둔다 */
.pgl-pin {
    position: absolute;
    top: -16px;
    left: 50%;
    width: 13px;
    height: 32px;
    transform: translateX(-50%);
    border-radius: 3px;
    background: #d9b98c;
    box-shadow:
        inset 2px 0 0 rgb(255 255 255 / 28%),
        inset -2px 0 0 rgb(110 70 30 / 20%),
        0 2px 3px rgb(0 0 0 / 20%);
    z-index: 3;
    pointer-events: none;
}

.pgl-inner {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform .6s var(--motion-ease);
}

.pgl-card.is-flipped .pgl-inner {
    transform: rotateY(180deg);
}

.pgl-front,
.pgl-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: #fbfaf6;
    border-radius: 2px;
    /* 종이가 벽에서 살짝 떠 있는 정도 — 짧고 진한 접촉 그림자 + 아래로 퍼지는 옅은 그림자 */
    box-shadow: 0 1px 1px rgb(0 0 0 / 6%), 0 10px 18px -8px rgb(0 0 0 / 24%);
    box-sizing: border-box;
    cursor: pointer;
}

.pgl-front {
    /* 실물 폴라로이드 판형 비율(88×107mm, 사진 79×79) — 좌우 5.5%, 위 6%, 아래는 .pgl-strip */
    padding: 6% 5.5% 0;
}

/* 사진칸은 모든 장이 같은 정사각형. 사진은 가운데 기준으로 크롭된다 */
.pgl-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--gray-200);
    border-radius: 1px;
    cursor: zoom-in;
}

/* 인화면 가장자리의 옅은 음영 */
.pgl-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%), inset 0 0 6px rgb(0 0 0 / 10%);
    pointer-events: none;
}

.pgl-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* 하단 여백 = 실물 폴라로이드의 손글씨 칸. 클릭하면 뒷면(설명)으로 뒤집힌다 */
.pgl-strip {
    aspect-ratio: 89 / 24; /* 아래 여백 ≈ 카드 폭의 24% */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pgl-strip::after {
    content: '뒷면 보기';
    font-family: var(--content-font-family);
    font-size: 9px;
    color: #b0b0a6;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}

.pgl-card:hover .pgl-strip::after {
    opacity: 1;
}

.pgl-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    color: #333;
}

.pgl-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.pgl-close:hover {
    background: var(--gray-100);
    color: #333;
}

.pgl-back-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.pgl-desc {
    font-family: var(--content-font-family);
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 4px 0 0;
}

.pgl-desc-empty {
    color: #b9b9b9;
    font-style: italic;
}

.pgl-desc-input {
    width: 100%;
    min-height: 90px;
    margin-top: 4px;
    resize: vertical;
    font-family: var(--content-font-family);
    font-size: 12.5px;
    padding: 6px;
    border: 1px solid var(--form-border-color);
    border-radius: 6px;
    background: var(--form-bg-color);
    color: var(--form-text-color);
    box-sizing: border-box;
}

.pgl-back-meta {
    font-size: 10px;
    color: #b3b3b3;
    margin-top: 4px;
}

.pgl-back-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
}

.pgl-mini-btn {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--card-border-color);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.pgl-mini-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pgl-mini-btn-danger:hover {
    border-color: var(--error-color);
    color: var(--error-color);
}

/* ---------------- 순서 편집(드래그) ---------------- */
.pgl-board.is-editing .pgl-card {
    cursor: grab;
    touch-action: none;
}

.pgl-board.is-editing .pgl-front,
.pgl-board.is-editing .pgl-photo,
.pgl-board.is-editing .pgl-strip {
    cursor: grab;
}

.pgl-board.is-editing .pgl-strip::after {
    content: '끌어서 옮기기';
}

.pgl-card.pgl-dragging {
    position: fixed;
    z-index: 1000;
    margin: 0;
    pointer-events: none;
    transition: none;
}

.pgl-card.pgl-dragging .pgl-swing {
    rotate: calc(var(--tilt) + 3deg);
    scale: 1.05;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .25));
}

.pgl-placeholder {
    border: 2px dashed rgb(from var(--primary-color) r g b / 45%);
    border-radius: 4px;
    background: rgb(from var(--primary-color) r g b / 6%);
    box-sizing: border-box;
}

/* ---------------- 플로팅 버튼 ---------------- */
.pgl-fab {
    position: fixed;
    right: var(--spacing-xl);
    bottom: var(--spacing-xl);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-base);
    z-index: 200;
}

.pgl-fab-primary {
    background: var(--primary-color);
    color: var(--btn-primary-text, #fff);
}

.pgl-fab-secondary {
    right: calc(var(--spacing-xl) + 66px);
    width: auto;
    height: 44px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--card-bg-color);
    border: 1px solid var(--card-border-color);
    color: var(--text-secondary);
    bottom: calc(var(--spacing-xl) + 5px);
}

.pgl-fab-secondary.is-active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.pgl-fab:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.05);
}

/* ---------------- 업로드 모달 ---------------- */
.pgl-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay, rgba(17, 17, 17, .6));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base);
    z-index: 500;
    padding: var(--spacing-lg);
}

.pgl-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.pgl-modal {
    position: relative;
    width: 100%;
    max-width: 380px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--container-bg-color);
    border: 1px solid var(--container-border-color);
    border-radius: var(--container-border-radius);
    box-shadow: var(--shadow-glass);
    padding: var(--spacing-xl);
    transform: translateY(10px) scale(.98);
    transition: transform var(--transition-base);
}

.pgl-modal-overlay.is-open .pgl-modal {
    transform: translateY(0) scale(1);
}

.pgl-modal-title {
    font-family: var(--title-font-family);
    color: var(--title-font-color);
    font-size: var(--sub-title-font-size);
    margin: 0 0 var(--spacing-md);
}

.pgl-modal-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
}

.pgl-dropzone {
    position: relative;
    border: 2px dashed var(--card-border-color);
    border-radius: var(--card-border-radius);
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    overflow: hidden;
    background: rgb(from var(--card-bg-color) r g b / 40%);
}

.pgl-dropzone:hover,
.pgl-dropzone.is-dragover {
    border-color: var(--primary-color);
    background: rgb(from var(--primary-color) r g b / 6%);
}

.pgl-dropzone-hint {
    text-align: center;
    color: var(--text-muted);
    padding: var(--spacing-lg);
}

.pgl-dropzone-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 6px;
}

.pgl-dropzone-hint p {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

/* ---------------- 간단 편집기(자르기/확대/회전) ---------------- */
.pgl-editor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.pgl-editor-frame {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #1b1b1b;
    box-shadow: var(--shadow-sm);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.pgl-editor-frame:active {
    cursor: grabbing;
}

.pgl-editor-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pgl-editor-stage img {
    display: block;
    transform-origin: center center;
    pointer-events: none;
    max-width: none;
}

.pgl-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.pgl-zoom-range {
    flex: 1;
    max-width: 160px;
    accent-color: var(--primary-color);
}

.pgl-ratio-group {
    display: flex;
    gap: 4px;
}

.pgl-ratio-btn {
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--card-border-color);
    background: var(--card-bg-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.pgl-ratio-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pgl-ratio-btn.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--btn-primary-text, #fff);
    font-weight: 600;
}

.pgl-link-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 2px;
}

.pgl-link-btn:hover {
    color: var(--primary-color);
}

.pgl-field-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin: var(--spacing-md) 0 4px;
}

.pgl-textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    padding: 8px 10px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
    color: var(--form-text-color);
    font-family: var(--content-font-family);
    font-size: 13px;
    box-sizing: border-box;
}

.pgl-modal-error {
    color: var(--error-color);
    font-size: 12px;
    min-height: 16px;
    margin: var(--spacing-sm) 0 0;
}

.pgl-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.pgl-btn {
    padding: 9px 20px;
    border-radius: var(--btn-primary-radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition-fast);
}

.pgl-btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.pgl-btn-primary:hover {
    filter: brightness(.92);
}

.pgl-btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.pgl-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--card-border-color);
}

.pgl-btn-ghost:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ---------------- 이미지 크게 보기(라이트박스) ---------------- */
.pgl-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, .88);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base);
    z-index: 700;
    padding: var(--spacing-xl);
}

.pgl-lightbox-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.pgl-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.pgl-lightbox-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-fast);
}

.pgl-lightbox-close:hover {
    color: #fff;
    transform: rotate(90deg);
}

/* ---------------- 모바일 ---------------- */
@media (max-width: 768px) {
    .pgl-wall { padding: 36px 0 56px; }
    .pgl-garland { --pgl-garland-width: 100%; } /* 좁은 화면에선 카드가 너무 작아지지 않게 전체 폭 사용 */
    .pgl-row { margin-bottom: 44px; }
    .pgl-fab-secondary { right: var(--spacing-lg); bottom: calc(var(--spacing-lg) + 62px); }
    .pgl-fab-primary { right: var(--spacing-lg); bottom: var(--spacing-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .pgl-card:hover .pgl-swing,
    .pgl-card.is-new .pgl-swing { animation: none; }
}