/* ===== Modal container and structure ===== */
.modal-overlay { position: fixed; inset: 0; background: var(--background-dim); z-index: 1003; opacity: 0; pointer-events: none; transition: opacity 0.18s ease-out; }
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-overlay.is-dialog { z-index: 1103; }
.modal-content { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -44%); width: min(900px, calc(100vw - 24px)); max-height: min(92vh, 900px); background: var(--background-white); color: var(--text-primary); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,0.22); z-index: 1004; opacity: 0; transition: opacity 0.18s ease-out, transform 0.18s ease-out, box-shadow 0.18s ease-out; display: flex; flex-direction: column; pointer-events: none; visibility: hidden; overflow: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; }
.modal-content::-webkit-scrollbar { width: 0; height: 0; }
.modal-content.show { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; visibility: visible; }
.modal-content.is-dialog { z-index: 1104; }
.modal-content.notice-modal { width: min(420px, calc(100vw - 36px)); max-height: none; padding-bottom: 0; }
.modal-content.notice-modal .modal-body { min-height: 0; }
.notice-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; border-bottom: 1px solid var(--border-gray); }
.notice-modal__title { font-size: 1.2rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; }
.notice-modal__body { padding: 16px 20px 4px; font-size: 0.98rem; line-height: 1.6; color: var(--text-primary); }
.notice-modal__body p { margin: 0 0 12px; }
.notice-modal__body p:last-child { margin-bottom: 0; }
.notice-modal__actions { padding: 14px 20px 18px; gap: 8px; }
.notice-modal__actions .btn { min-width: 0; font-size: 0.95rem; }
.notice-modal__close { color: var(--icon-color); }
/* Compact confirm dialog */
.modal-content.confirm-modal { width: min(320px, calc(100vw - 24px)); max-height: none; border-radius: 8px; }
.modal-content.confirm-modal .modal-header { background: transparent; color: var(--text-primary); border-bottom: none; padding: 12px 12px 6px; justify-content: center; position: relative; }
.modal-content.confirm-modal .modal-title { color: var(--text-primary); font-size: 1rem; font-weight: 600; margin: 0 auto; text-align: center; }
.modal-content.confirm-modal .modal-close { color: var(--icon-color); }
.modal-content.confirm-modal .modal-body { padding: 12px 12px 12px; min-height: 0; }
.modal-content.confirm-modal .confirm-message { font-size: 0.95rem; color: var(--text-primary); margin: 0; text-align: center; line-height: 1.5; white-space: pre-line; }
.modal-content.confirm-modal .confirm-pin-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.modal-content.confirm-modal .confirm-pin-row .pin-input { width: 88px; height: 30px; text-align: center; border: 1px solid var(--border-gray); border-radius: 6px; background: var(--background-white); color: var(--text-primary); font-size: 14px; padding: 0; }
.modal-content.confirm-modal .confirm-error { margin-top: 8px; font-size: 0.85rem; color: #ef4444; text-align: center; }
.modal-content.confirm-modal .modal-close { position: absolute; right: 8px; top: 8px; }
.modal-actions-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border-gray); }
.modal-content.notice-modal .modal-actions-row { border-top: none; }
.modal-content.confirm-modal .modal-actions-row { border-top: none; justify-content: center; gap: 8px; padding: 10px 12px 12px; }
.modal-content.confirm-modal .btn { padding: 10px 14px; border-radius: 6px; font-size: 14px; }
/* 익명 삭제 전용: 시각적 PIN 다이얼 */
.modal-content.confirm-modal.is-anon .modal-title { font-size: 1.05rem; }
.modal-content.confirm-modal.is-anon .modal-actions-row { padding-top: 12px; }
.modal-content.confirm-modal.is-anon .pin-ui { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.modal-content.confirm-modal.is-anon .pin-display { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 2px; }
.modal-content.confirm-modal.is-anon .pin-display i { font-size: 18px; color: var(--icon-color); margin-right: 2px; }
.modal-content.confirm-modal.is-anon .pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border-gray); background: transparent; transition: all 0.15s ease-out; }
.modal-content.confirm-modal.is-anon .pin-dot.filled { background: var(--text-primary); border-color: var(--text-primary); }
.modal-content.confirm-modal.is-anon .pin-pad { display: grid; grid-template-columns: repeat(3, 64px); gap: 10px; justify-content: center; align-content: center; margin-top: 8px; }
.modal-content.confirm-modal.is-anon .pin-key { width: 64px; height: 64px; border-radius: 50%; background: var(--background-white); color: var(--text-primary); border: 1px solid var(--border-gray); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; user-select: none; }
.modal-content.confirm-modal.is-anon .pin-key:hover { background: var(--purple-hover); }
.modal-content.confirm-modal.is-anon .pin-key:active { transform: scale(0.98); }
.modal-content.confirm-modal.is-anon .pin-key.alt { color: var(--text-gray); font-size: 16px; }
@supports (height: 100dvh) { .modal-content { max-height: min(92dvh, 900px); } }
@media (max-width: 640px) { 
  /* Keep most modals fullscreen on mobile, except explicitly opted-out ones like .signature-modal */
  .modal-content:not(.signature-modal):not(.feedback-modal):not(.login-modal):not(.signup-modal):not(.confirm-modal):not(.notice-modal) { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  /* Apply content-height behavior only to auth modals */
  .modal-content.login-modal,
  .modal-content.signup-modal,
  .modal-content.confirm-modal { height: auto; max-height: min(92dvh, 900px); }
  .modal-content.notice-modal { width: min(420px, calc(100vw - 36px)); height: auto; max-height: none; border-radius: 10px; }
  .modal-content.notice-modal .modal-body { min-height: 0; }
}

/* Signature modal: native horizontal scroll track for clips */
.embed-video-wrapper { overflow: hidden; }
.embed-video-wrapper .sig-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 0; }
.embed-video-wrapper .sig-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: stretch; }
.embed-video-wrapper .sig-slide iframe { width: 100%; height: auto; display: block; }

/* On touch devices, hide arrow nav buttons in Signature modal (swipe is available) */
@media (hover: none), (pointer: coarse) {
  .signature-modal .clip-nav { display: none !important; }
}
.modal-overlay.closing { opacity: 0; transition: opacity 320ms ease-out; }
.modal-content.closing { will-change: transform, opacity; }
.modal-content.closing.fade-scale { animation: modal-fade-scale-out 320ms ease-out forwards; }
.modal-content.closing.slide-down { animation: modal-slide-down-out 160ms ease-out forwards; }
.modal-content.closing.zoom-out { animation: modal-zoom-out 320ms ease-out forwards; }
@keyframes modal-fade-scale-out { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } }
@keyframes modal-slide-down-out { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -40%); } }
@keyframes modal-zoom-out { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } }
.modal-content:focus { outline: none; }
.modal-content button:focus-visible,
.modal-content [href]:focus-visible,
.modal-content input:focus-visible,
.modal-content select:focus-visible,
.modal-content textarea:focus-visible { outline: 2px solid var(--main-purple); outline-offset: 2px; border-radius: 6px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: none; position: sticky; top: 0; background: var(--main-purple); color: #fff; z-index: 100; }
.modal-header-actions { display: inline-flex; align-items: center; gap: 8px; }
.modal-menu-btn { background: transparent; border: none; color: #fff; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; }
.modal-menu-btn:hover { background: rgba(255,255,255,0.14); }
.modal-menu-btn i { font-size: 18px; }
/* Signature modal: dedicated edit button style */
.modal-edit-link { background: transparent; border: none; color: #fff; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; }
.modal-edit-link:hover { background: transparent; }
.modal-edit-link i { font-size: 18px; }
.modal-more { position: relative; }
.modal-more .modal-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: var(--background-white); color: var(--text-primary); border: 1px solid var(--border-gray); border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,0.14); min-width: 168px; padding: 8px; z-index: 5; }
.modal-more.open .modal-menu { display: block; }
.modal-menu .menu-item { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; background: transparent; border: none; color: inherit; padding: 12px; border-radius: 8px; cursor: pointer; text-align: left; min-height: 44px; font-size: 0.95rem; }
.modal-menu .menu-item i { font-size: 16px; }
.modal-menu .menu-item:hover { background: var(--purple-hover); }
.modal-menu .btn-delete { color: #ef4444; }
/* inline confirm inside menu */
.modal-menu .menu-confirm { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--border-gray); margin-top: 4px; padding: 8px 6px 4px; }
.modal-menu .menu-confirm .confirm-text { font-size: 0.9rem; color: var(--text-primary); }
.modal-menu .menu-confirm .pin-input { width: 80px; height: 34px; text-align: center; border: 1px solid var(--border-gray); border-radius: 6px; background: var(--background-white); color: var(--text-primary); font-size: 16px; padding: 0; }
.modal-menu .menu-confirm .confirm-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.modal-menu .menu-confirm .confirm-actions .confirm-yes { background: #ef4444; color: #fff; border: none; border-radius: 6px; padding: 6px 10px; font-size: 0.85rem; cursor: pointer; }
.modal-menu .menu-confirm .confirm-actions .confirm-no { background: transparent; color: var(--text-primary); border: 1px solid var(--border-gray); border-radius: 6px; padding: 6px 10px; font-size: 0.85rem; cursor: pointer; }
.modal-title { font-size: 1.05rem; margin-right: 8px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-close { background: none; border: none; color: #fff; font-size: 1.2rem; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.modal-header .modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
.modal-meta { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: calc(0.85rem * var(--content-font-scale, 1)); color: var(--text-gray); padding: 10px 16px; border-bottom: 1px solid var(--border-gray); }
.modal-meta .meta-sep { color: var(--border-gray); }
.modal-meta .post-stats .btn-copy-inline { background: transparent; border: none; color: inherit; display: inline-flex; align-items: center; justify-content: center; padding: 4px; margin-left: 4px; border-radius: 6px; cursor: pointer; }
.modal-meta .post-stats .btn-copy-inline i { font-size: 0.9rem; }
.modal-meta .post-stats .btn-copy-inline.success i { color: var(--success-green); }
.modal-meta .post-stats span+span { padding-left: 6px; margin-left: 6px; }
.modal-meta .post-stats .time i { margin-right: 3px; }
.modal-body { padding: 16px; overflow: visible; line-height: 1.6; transition: filter 120ms ease-out; min-height: 180px; font-size: calc(1rem * var(--content-font-scale, 1)); flex: 0 0 auto; display: flow-root; }
@media (min-width: 640px) {
  .modal-body { min-height: 220px; }
}
.modal-body p + p { margin-top: 10px; }
.modal-content > .modal-header, .modal-content > .modal-meta, .modal-content > .attachments-section, .modal-content > .comments-section, .modal-content > .modal-actions { flex: 0 0 auto; }
.modal-actions { display: flex; justify-content: center; position: relative; gap: 8px; padding: 0 16px 12px; border-bottom: 1px solid var(--border-gray); background: var(--background-white); transition: filter 120ms ease-out; }
.modal-actions .actions-center { display: flex; gap: 8px; }
.modal-actions .actions-right { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 4px; }
.modal-pull-indicator { position: static; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; opacity: 1; transform: scale(0.95); transition: transform 180ms ease-out; height: 28px; font-size: 14px; line-height: 28px; color: var(--text-gray); }
.modal-pull-indicator i { color: var(--icon-color); }
.modal-pull-indicator.ready { color: var(--main-purple); }
.modal-pull-indicator.ready i { color: var(--main-purple); }
.modal-content.ready-blur .modal-header,
.modal-content.ready-blur .modal-meta,
.modal-content.ready-blur .modal-body,
.modal-content.ready-blur .modal-actions,
.modal-content.ready-blur .comments-section > *:not(.modal-pull-indicator) { filter: blur(2px); }