/* 메인: 사방 보기(끌어서 둘러보는 평면) · 세로 보기 · 크게 보기 */
body { min-height: 100vh; overflow: hidden; }
body.vertical-mode { overflow: auto; }

/* 평면 */
.plane[hidden], .vertical[hidden] { display: none; }
.plane { position: relative; height: 100vh; min-height: 640px; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.plane.dragging { cursor: grabbing; }
.plane img { pointer-events: none; }
.tile { all: unset; box-sizing: border-box; position: absolute; left: 0; top: 0; width: 210px; cursor: pointer; will-change: transform; animation: fadein .9s ease both; }
.tile:focus-visible, .vsheet:focus-visible { outline: 2px solid #f2ece0; outline-offset: 6px; }
.tile img, .vsheet img { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
.tile:hover img { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 16px 30px rgba(0,0,0,.6); }
.sheet-img { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 1px 4px rgba(60,40,10,.16); background: #2a2420; }
.under { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transform: translate(8px,-7px) rotate(4deg); filter: brightness(.78); box-shadow: 0 2px 8px rgba(0,0,0,.35); pointer-events: none; }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }

/* 세로 보기 */
.vertical { padding: 120px 24px 220px; display: flex; flex-direction: column; align-items: center; gap: 140px; }
.vsheet { all: unset; cursor: pointer; box-sizing: border-box; width: min(440px, 84vw); display: block; position: relative; animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
.vsheet .sheet-img { box-shadow: 0 2px 8px rgba(60,40,10,.16); }
.vsheet:hover img { transform: rotate(-.8deg) scale(1.015); box-shadow: 0 22px 44px rgba(0,0,0,.6); }
@keyframes reveal { from { opacity: 0; transform: translateY(60px) scale(.94) } to { opacity: 1; transform: none } }
.empty { padding: 40vh 24px 0; text-align: center; font-size: 14px; color: rgba(242,236,224,.6); line-height: 1.9; }

/* 크게 보기 */
.viewer { position: fixed; inset: 0; background: rgba(8,8,8,.82); backdrop-filter: blur(18px) saturate(.8); -webkit-backdrop-filter: blur(18px) saturate(.8); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 28px; z-index: 10; cursor: zoom-out; }
.viewer[hidden] { display: none; }
.vbtn { transition: background .2s, color .2s; }
.vbtn:hover { background: #3d3d3d; }
.stackw { position: relative; flex: none; }
.front { display: block; height: calc(100vh - 210px); max-width: 88vw; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 24px 60px rgba(0,0,0,.65); cursor: default; position: relative; animation: pop .45s cubic-bezier(.2,.7,.2,1) both; background: #2a2420; }
@keyframes pop { from { opacity: 0; transform: scale(.94) rotate(-2deg) } to { opacity: 1; transform: none } }
.backpg { all: unset; position: absolute; inset: 0; cursor: pointer; transform: translate(22px,-16px) rotate(3.5deg); transition: transform .25s ease; }
.backpg:hover { transform: translate(28px,-21px) rotate(5deg); }
.backpg:focus-visible { outline: 2px solid #f2ece0; outline-offset: 4px; }
.backpg img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.backpg[hidden] { display: none; }
@keyframes swapIn { from { transform: translate(22px,-16px) rotate(3.5deg); filter: brightness(.72) } to { transform: none; filter: none } }
@keyframes swapIn2 { from { transform: translate(22px,-16px) rotate(3.5deg); filter: brightness(.72) } to { transform: none; filter: none } }
.front.swapA { animation: swapIn .45s cubic-bezier(.2,.7,.2,1) both; }
.front.swapB { animation: swapIn2 .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes inNa { from { opacity: 0; transform: translateX(90px) rotate(2deg) } to { opacity: 1; transform: none } }
@keyframes inNb { from { opacity: 0; transform: translateX(90px) rotate(2deg) } to { opacity: 1; transform: none } }
@keyframes inPa { from { opacity: 0; transform: translateX(-90px) rotate(-2deg) } to { opacity: 1; transform: none } }
@keyframes inPb { from { opacity: 0; transform: translateX(-90px) rotate(-2deg) } to { opacity: 1; transform: none } }
.front.inNa { animation: inNa .42s cubic-bezier(.2,.7,.2,1) both; }
.front.inNb { animation: inNb .42s cubic-bezier(.2,.7,.2,1) both; }
.front.inPa { animation: inPa .42s cubic-bezier(.2,.7,.2,1) both; }
.front.inPb { animation: inPb .42s cubic-bezier(.2,.7,.2,1) both; }
.front.dragging { animation: none; }
.viewer { outline: none; }
.viewer.pulling { transition: background-color .2s; }
.viewer .date { margin: -6px 0 0; font-size: 5pt; opacity: .6; letter-spacing: -0.01em; }
.viewer .pos { margin: -8px 0 0; font-size: 12px; color: #9c958a; letter-spacing: .06em; }
.viewer .pos[hidden] { display: none; }
.viewer .actions { position: absolute; top: 20px; right: 24px; z-index: 2; cursor: default; }
.viewer .more { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(34,34,34,.94); border: 1px solid #3c3c3c; box-shadow: 0 10px 30px rgba(0,0,0,.5); color: #e8e8e8; }
.viewer .more[aria-expanded="true"] { background: #f2ece0; color: #111111; }
.viewer .menu { position: absolute; top: 52px; right: 0; min-width: 168px; padding: 6px; background: rgba(34,34,34,.96); border: 1px solid #3c3c3c; border-radius: 14px; box-shadow: 0 14px 36px rgba(0,0,0,.55); transform-origin: top right; animation: menuIn .22s cubic-bezier(.2,.7,.2,1) both; }
.viewer .menu[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.94) } to { opacity: 1; transform: none } }
.viewer .menu a, .viewer .menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px 0 12px; border: 0; border-radius: 9px; cursor: pointer; background: transparent; color: #e8e8e8; text-decoration: none; font: inherit; font-size: 13px; white-space: nowrap; }
.viewer .menu button.like .n:empty { display: none; }
.viewer .menu .sep { display: block; height: 1px; margin: 6px 4px; background: #3c3c3c; }
.rbox { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; width: min(320px, 86vw); padding: 18px 16px 12px; background: rgba(28,28,28,.98); border: 1px solid #3c3c3c; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.6); cursor: default; animation: menuIn .22s cubic-bezier(.2,.7,.2,1) both; }
.rbox[hidden] { display: none; }
.rbox p { margin: 0 0 12px; font-size: 14px; font-weight: 700; text-align: center; }
.rbox button { display: block; width: 100%; height: 44px; margin-top: 6px; border: 0; border-radius: 10px; background: #2a2a2a; color: #e8e8e8; font: inherit; font-size: 13px; cursor: pointer; }
.rbox button:hover { background: #3d3d3d; }
.rbox button.cancel { background: transparent; color: #9c958a; }
.toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 20; margin: 0; max-width: 86vw; padding: 10px 16px; border-radius: 999px; background: #f2ece0; color: #111111; font-size: 13px; text-align: center; opacity: 0; transition: opacity .25s; pointer-events: none; }
.toast.show { opacity: 1; }
@keyframes beat { 0% { transform: scale(1) } 35% { transform: scale(1.35) } 100% { transform: scale(1) } }
.beat { animation: beat .4s cubic-bezier(.2,.7,.2,1); }

@media (max-width: 767px) {
  .tile { width: 150px; }
  .vertical { padding: 72px 24px 160px; gap: 72px; }
  .vsheet { width: 290px; }
  .viewer { padding: 22px; }
  .viewer .actions { top: calc(env(safe-area-inset-top, 40px) + 12px); right: 16px; }
    .front { height: auto; width: 320px; max-height: 520px; cursor: grab; touch-action: none; }
}

/* 관리자 모드: 숨겨진 작품도 보이되 흐리게. 메뉴의 관리자 항목은 분홍. */
.tile.hid, .vsheet.hid { opacity: .32; }
.tile.hid::after, .vsheet.hid::after { content: 'HIDDEN'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-12deg); padding: 4px 10px; border: 1.5px solid #e8708f; color: #e8708f; font: 700 12px/1 "Nanum Gothic Coding", monospace; letter-spacing: .12em; background: rgba(22,22,22,.7); pointer-events: none; }
.viewer .menu .adm { color: #e8708f; }
.adminbar { position: fixed; right: 16px; bottom: 18px; z-index: 60; padding: 6px 12px; border-radius: 999px; background: #e8708f; color: #161616; font: 700 11px/1 "Nanum Gothic Coding", monospace; letter-spacing: .14em; pointer-events: none; }