@media (min-width:768px) and (pointer:fine) {
  html.reference-pc body {background:#0f0f10}
  html.reference-pc #root {inset:16px 24px;max-width:min(1320px,calc((100dvh - 260px)*1.6 + 24px));margin:auto;transform:translateZ(0)}
  html.reference-pc #root header {height:64px!important;padding:12px 16px 8px!important;background:var(--bg)!important;opacity:1!important;transform:none!important}
  html.reference-pc #root [role=group][aria-label="작품"] {inset:64px 12px 164px!important;border-radius:24px}
  html.reference-pc #root div:has(>div>nav[aria-label="캠프"]) {padding:8px 12px 12px!important;background:var(--bg)!important;opacity:1!important;transform:none!important}
  html.reference-pc #root nav[aria-label="캠프"] {align-self:center!important;width:min(680px,100%)!important;flex:none!important}
  html.reference-pc #root [role=group]:focus-visible {outline:2px solid var(--fg);outline-offset:4px}
  html.reference-pc #root iframe[data-vista] {top:0!important;height:100%!important}
  html.reference-pc #root div:has(>iframe[data-vista]) {transition-timing-function:cubic-bezier(.22,1,.36,1)!important}
  html.reference-pc #root button:focus-visible {outline:2px solid var(--fg);outline-offset:3px}
  html.reference-pc #root header+div,html.reference-pc #root nav {animation:none!important}
}
@media(prefers-reduced-motion:reduce) {html.reference-pc #root *{transition-duration:0ms!important;animation:none!important}}
@media (min-width:768px) and (pointer:fine) {
  html.reference-pc #root div:has(>nav[aria-label="캠프"]) {flex-direction:column!important;align-items:stretch!important;max-width:960px!important}
}
/* In-app is full-window on PC and phone, independent of feed layout. */
html.reference-inapp #root {inset:0!important;max-width:none!important;margin:0!important}
[data-reference-inapp] {position:fixed!important;inset:0!important;max-width:none!important;margin:0!important;padding:0!important;gap:0!important;border-radius:0!important;box-shadow:none!important;transition:none!important;transform:none!important}
[data-reference-inapp]>div:has(button[aria-label="닫기"]),[data-reference-inapp]>button[aria-label="닫기"] {display:none!important}
[data-reference-inapp]>iframe {position:absolute!important;inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)!important;width:calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))!important;height:calc(100% - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;flex:none!important;border-radius:0!important}
[data-reference-inapp-closed] {display:none!important}
.reference-inapp-close {position:fixed;z-index:2147483646;top:calc(max(12px,env(safe-area-inset-top,0px)) + 4px);left:calc(50% + 6px);width:44px;height:44px;border:1px solid rgba(237,237,237,.16);border-radius:50%;background:rgba(25,25,27,.8);color:#ededed;display:grid;place-items:center;cursor:pointer;touch-action:manipulation}
.reference-inapp-close[hidden] {display:none}
.reference-inapp-close:focus-visible {outline:2px solid #ededed;outline-offset:3px}

html.reference-inapp.reference-pc #root>div>div:has([role=group][aria-label="작품"]) {inset:auto!important;left:var(--reference-feed-left)!important;top:var(--reference-feed-top)!important;width:var(--reference-feed-width)!important;height:var(--reference-feed-height)!important}

@media(max-width:600px){.reference-inapp-close{top:calc(env(safe-area-inset-top,0px) + 64px)}}
