@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600&family=Sora:wght@400;500;600&display=swap');
:root { color-scheme: light; font-family: 'Sora','Noto Sans KR',sans-serif; color: #07101f; background: #e8edf0; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; height: 100dvh; --pv-top: 144px; }
[hidden] { display: none !important; }
::selection { background: #b8e8f7; color: #07101f; }
button, select, a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button, a, select { touch-action: manipulation; }
button, select { cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, a:focus-visible, select:focus-visible, main:focus-visible, section:focus-visible { outline: 2px solid #087ca4; outline-offset: 3px; }
svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pv-toolbar { position: fixed; top: max(16px,env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); z-index: 10; padding: 9px 12px; background: #fff; border: 1px solid #d0d9e0; border-radius: 12px; box-shadow: 0 8px 28px #07101f12; }
.pv-heading { display: flex; align-items: center; gap: 22px; min-height: 37px; padding: 0 1px 6px; border-bottom: 1px solid #e2e7ec; }
.pv-heading select { min-width: 0; max-width: 430px; flex: 1; padding: 4px 22px 4px 0; min-height: 36px; border: 0; background: white; font-size: 13px; font-weight: 500; text-overflow: ellipsis; }
.pv-language { font-size: 10px; color: #536273; white-space: nowrap; }
.pv-heading button { display: grid; place-items: center; border: 0; background: none; width: 40px; height: 40px; border-radius: 6px; }
.pv-actions { display: flex; align-items: center; gap: 4px; padding-top: 7px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #8795a3 #fff; }
.pv-actions button, .pv-actions a { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; gap: 7px; min-height: 44px; min-width: 44px; padding: 8px 11px; border: 0; border-radius: 6px; background: transparent; font-size: 12px; text-decoration: none; }
.pv-actions button:not(:disabled):hover, .pv-actions a:hover, .pv-heading button:hover { background: #eef3f6; }
.pv-actions [aria-pressed="true"] { background: #dff4fb; }
#pv-download { background: #07101f; color: white; }
#pv-download:hover { background: #213c51; }
#pv-fit { min-width: 67px; font-variant-numeric: tabular-nums; font-size: 11px; }
.pv-divider { height: 22px; border-left: 1px solid #d0d9e0; margin: 0 3px; }
.pv-stage { position: fixed; inset: var(--pv-top) 0 74px; perspective: none; user-select: none; -webkit-user-select: none; cursor: default; }
.pv-stage.is-animating { perspective: 2200px; }
.pv-stage:focus-visible { outline-offset: -4px; }
.pv-anchor { position: absolute; left: 50%; top: 50%; width: 320px; height: 672px; transform-style: preserve-3d; transform: translate(-50%,-50%); }
.pv-fit, .pv-turn, .pv-paper { position: absolute; inset: 0; transform-style: preserve-3d; }
.pv-panel { position: absolute; inset: 0; transform-style: preserve-3d; }
.pv-panel-left { left: -100%; right: 100%; transform-origin: right center; }
.pv-panel-right { left: 100%; right: -98%; transform-origin: left center; }
.pv-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; box-shadow: 0 12px 25px #07101f26; }
.pv-front { transform: translateZ(.3px); }
.pv-back { transform: rotateY(180deg) translateZ(.3px); }
.pv-face img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; -webkit-user-drag: none; }
.pv-caption { position: fixed; bottom: max(18px,env(safe-area-inset-bottom)); left: 20px; right: 20px; text-align: center; pointer-events: none; }
.pv-caption p { margin: 0; color: #536273; font-size: 11px; line-height: 1.7; }
.pv-caption #pv-status { color: #213747; font-size: 12px; }
.pv-text { position: fixed; inset: var(--pv-top) 16px 74px; overflow: auto; overscroll-behavior: contain; scrollbar-color: #8795a3 #e8edf0; }
.pv-text article { max-width: 72ch; margin: 0 auto 24px; padding: 32px; background: white; }
.pv-text h2 { font-size: 15px; margin: 0 0 20px; color: #466174; }
.pv-text p { white-space: pre-wrap; overflow-wrap: anywhere; font-family: 'Noto Sans KR',sans-serif; font-size: 17px; line-height: 1.9; margin: 0; }
.pv-fallback { position: fixed; inset: 160px 20px 20px; overflow: auto; max-width: 65ch; margin-inline: auto; padding: 24px; background: white; }
.pv-fallback a { display: block; padding: 10px 0; }
@media (max-width: 700px) {
  .pv-toolbar { top: max(8px,env(safe-area-inset-top)); width: calc(100% - 16px); max-width: none; padding: 5px 8px; border-radius: 10px; }
  .pv-heading { gap: 8px; padding-bottom: 3px; }
  .pv-heading select { font-size: 12px; }
  .pv-language { display: none; }
  .pv-actions { gap: 2px; padding-top: 4px; }
  .pv-actions button, .pv-actions a { padding: 8px 10px; }
  .pv-stage { bottom: 64px; }
  .pv-caption { bottom: max(12px,env(safe-area-inset-bottom)); left: 12px; right: 12px; }
  .pv-caption #pv-hint { font-size: 10px; }
  .pv-text { inset-inline: 12px; bottom: 64px; }
  .pv-text article { padding: 22px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  .pv-toolbar { display: flex; align-items: center; gap: 10px; top: 8px; padding-block: 5px; }
  .pv-heading { border: 0; padding: 0; gap: 0; }
  .pv-heading select { max-width: 170px; }
  .pv-language { display: none; }
  .pv-actions { padding: 0; }
  .pv-actions button, .pv-actions a { padding-inline: 7px; }
  .pv-stage { bottom: 44px; }
  .pv-caption { bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
@media (max-width: 700px) and (min-height: 501px), (max-width: 599px) {
  .pv-actions { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 3px; overflow: visible; }
  .pv-divider { display: none; }
  #pv-fold { grid-column: 1 / span 2; grid-row: 1; }
  #pv-flip { grid-column: 3 / span 2; grid-row: 1; }
  #pv-text-toggle { grid-column: 5 / span 2; grid-row: 1; }
  #pv-minus { grid-column: 1; grid-row: 2; }
  #pv-fit { grid-column: 2 / span 2; grid-row: 2; }
  #pv-plus { grid-column: 4; grid-row: 2; }
  #pv-fullscreen { grid-column: 5; grid-row: 2; }
  #pv-download { grid-column: 6; grid-row: 2; }
  #pv-download span { display: none; }
}

.pv-pan { display: flex; justify-content: center; gap: 4px; border-top: 1px solid #e2e7ec; margin-top: 7px; padding-top: 4px; }
.pv-pan button { display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; border: 0; border-radius: 6px; background: transparent; }
.pv-pan button:hover { background: #eef3f6; }
@media (max-height: 500px) and (min-width: 600px) {
  .pv-toolbar { flex-wrap: wrap; }
  .pv-pan { flex-basis: 100%; margin-top: 0; }
}