/* 맥글 웹 뷰어 (hwp-viewer.html). 사이트 공통 style.css 위에 얹는다. */

.vw { max-width: var(--wrap); margin: 0 auto; padding: 56px 24px 0; }
.vw h1 { font-size: clamp(36px, 6.4vw, 76px); }
.vw .lede { max-width: 700px; }

/* ---------- 끌어다 놓는 자리: 종이 두 장이 겹친 모양 ---------- */
.drop {
  position: relative;
  margin: 44px auto 0;
  max-width: 880px;
  min-height: 360px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.drop::before, .drop::after {
  content: "";
  position: absolute; inset: 18px 34px -10px 34px;
  background: #fbfaf6;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(23, 21, 15, .07), 0 20px 40px -24px rgba(31, 51, 82, .35);
  transform: rotate(-1.6deg);
  z-index: -2;
}
.drop::after { inset: 8px 18px 0 18px; transform: rotate(1.1deg); background: #fdfcf9; z-index: -1; }
.sheet {
  position: relative;
  width: 100%;
  min-height: 360px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 30px 60px -22px rgba(31,51,82,.38), 0 0 0 1px rgba(0,0,0,.06);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 56px 28px 44px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* 원고지처럼 옅은 줄 — 문서 위에 놓는 느낌 */
.sheet::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--red), var(--red)) 64px 0 / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 31px, #efe9dc 31px 32px);
  opacity: .55;
  pointer-events: none;
}
.sheet > * { position: relative; }
.sheet .glyph {
  width: 64px; height: 76px; margin: 0 auto 22px;
  color: var(--navy);
}
.sheet .big { margin: 0; font-size: clamp(21px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.sheet .sub { margin: 8px 0 26px; color: var(--ink-3); font-size: 15px; }
.btn-pick {
  font: inherit; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  color: #fff; background: var(--ink); border: 0; cursor: pointer;
  padding: 13px 26px; border-radius: 12px;
  transition: transform .15s ease, background .15s ease;
}
.btn-pick:hover { background: var(--navy); transform: translateY(-1px); }
.btn-pick:focus-visible { outline: 3px solid color-mix(in srgb, var(--red) 60%, transparent); outline-offset: 3px; }
.private {
  display: flex; justify-content: center; align-items: center; gap: 7px;
  margin: 22px 0 0; font-size: 14px; color: var(--ink-2);
}
.private svg { flex: none; color: var(--red); }
.formats { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); letter-spacing: .01em; }
#viewer[data-drag] .sheet { transform: translateY(-4px) scale(1.01); box-shadow: 0 0 0 3px var(--red), 0 30px 60px -22px rgba(31,51,82,.45); }
#viewer[data-drag] .sheet .big::after { content: " — 놓으세요"; color: var(--red); }

.status {
  margin: 18px auto 0; max-width: 880px; text-align: center;
  font-size: 15px; color: var(--ink-2);
}
.status[data-kind="error"] { color: #b3361a; font-weight: 600; }
.status[data-kind="busy"]::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 9px; vertical-align: -1px;
  border: 2px solid var(--rule); border-top-color: var(--red); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 문서를 연 뒤 ---------- */
#viewer[data-state="open"] .intro-block { display: none; }
#viewer:not([data-state="open"]) .reader { display: none; }
#viewer[data-state="open"] .status:not([data-kind="error"]) { display: none; }

.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: nowrap;
  padding: 10px max(16px, calc((100vw - var(--wrap)) / 2 + 24px));
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.bar .name { flex: 0 1 auto; min-width: 4em; font-weight: 700; letter-spacing: -.01em; max-width: 30ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar > :not(.name) { flex: none; }
/* 문서를 보는 동안 사이트 머리말은 따라오지 않는다 (도구 막대와 겹치지 않게) */
:root:has(#viewer[data-state="open"]) .top { position: static; }
.bar .grp { display: inline-flex; align-items: center; gap: 2px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--rule); padding: 2px; }
.bar button, .bar input {
  font: inherit; color: var(--ink); background: transparent; border: 0; border-radius: 8px;
  height: 30px; min-width: 30px; padding: 0 8px; cursor: pointer;
}
.bar button:hover { background: var(--paper-2); }
.bar input { width: 3.4em; text-align: right; cursor: text; -moz-appearance: textfield; padding: 0 4px; }
.bar input::-webkit-inner-spin-button { display: none; }
.bar .of { color: var(--ink-3); padding-right: 6px; }
.bar .zl { min-width: 4.2em; text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar .spacer { flex: 1; }
.bar .again { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.cta-edit {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; background: var(--ink); text-decoration: none; font-weight: 700;
  padding: 7px 14px 7px 12px; border-radius: 999px; white-space: nowrap;
}
.cta-edit:hover { background: var(--navy); }
.cta-soft { color: var(--ink-2); font-size: 13px; text-decoration: none; white-space: nowrap; }
.cta-soft b { color: var(--ink); border-bottom: 2px solid var(--red); }
:root[data-device="other"] .cta-edit, :root:not([data-device="other"]) .cta-soft { display: none; }

.stage { background: var(--paper-2); padding: 28px 0 56px; min-height: 70vh; }
.pages { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pg {
  position: relative; flex: none;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 30px -16px rgba(31,51,82,.35), 0 0 0 1px rgba(0,0,0,.06);
  max-width: none;
}
.pg canvas { display: block; width: 100%; height: 100%; }
.pg:not([data-ready])::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 10%; height: 40%;
  background: repeating-linear-gradient(to bottom, #f1eee6 0 8px, transparent 8px 22px);
  opacity: .8;
}
.pg[data-failed]::after { content: "이 쪽을 그리지 못했습니다"; background: none; display: grid; place-items: center; color: var(--ink-3); font-size: 14px; inset: 0; height: auto; }

/* 문서 끝의 권유 */
.endcard {
  max-width: 760px; margin: 40px auto 0; padding: 30px 32px;
  background: var(--ink); color: #fff; border-radius: 16px;
  display: grid; grid-template-columns: 64px 1fr; gap: 6px 22px; align-items: center;
}
.endcard img { grid-row: span 2; border-radius: 14px; }
.endcard h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; line-height: 1.35; }
.endcard p { margin: 0; color: rgba(255,255,255,.72); font-size: 15px; }
.endcard .cta { grid-column: 2; margin-top: 14px; }
.endcard .cta-note { color: rgba(255,255,255,.6); }
.endcard-soft { max-width: 760px; margin: 36px auto 0; text-align: center; color: var(--ink-2); font-size: 15px; }
.endcard-soft a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-underline-offset: 3px; }
:root[data-device="other"] .endcard, :root:not([data-device="other"]) .endcard-soft { display: none; }

/* 암호 */
dialog.pw { border: 0; border-radius: 16px; padding: 26px 26px 20px; max-width: 380px; width: calc(100vw - 32px); box-shadow: 0 30px 80px -20px rgba(23,21,15,.5); background: var(--paper); color: var(--ink); }
dialog.pw::backdrop { background: rgba(23,21,15,.35); }
dialog.pw h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.02em; }
dialog.pw p { margin: 0 0 16px; font-size: 14px; color: var(--ink-2); }
dialog.pw input { width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule); background: #fff; }
dialog.pw menu { display: flex; justify-content: flex-end; gap: 8px; margin: 18px 0 0; padding: 0; }
dialog.pw button { font: inherit; font-weight: 700; border: 0; border-radius: 10px; padding: 8px 16px; cursor: pointer; background: var(--paper-2); color: var(--ink); }
dialog.pw button[value="ok"] { background: var(--ink); color: #fff; }

/* 아래 설명 글 */
.vw-doc { padding-top: 96px; }

@media (max-width: 640px) {
  .vw { padding-top: 32px; }
  .drop { margin-top: 28px; min-height: 300px; }
  .drop::before, .drop::after { inset-inline: 10px; }
  .sheet { min-height: 300px; padding: 40px 18px 32px; }
  .sheet::before { background-position: 26px 0, 0 0; }
  .bar { gap: 8px 10px; padding: 8px 10px; flex-wrap: wrap; }
  .bar .name { max-width: 100%; flex-basis: 100%; }
  .bar .zl { display: none; }
  .stage { padding: 14px 0 40px; }
  .pages { gap: 12px; }
  .endcard { grid-template-columns: 1fr; padding: 24px 22px; margin-inline: 12px; }
  .endcard img { display: none; }
  .endcard .cta { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .btn-pick { transition: none; }
  .status[data-kind="busy"]::before { animation: none; }
}