/* 세 시안이 함께 쓰는 틀. 모양은 a.css, b.css, c.css에서 정한다. */

/* 화면 글꼴은 함께 싣는다. 전시장 노트북에 없을 수 있다 (fonts/OFL.txt) */
@font-face {
  font-family: "Noto Serif KR";
  src: url("fonts/noto-serif-kr.woff") format("woff");
  font-weight: 200 900;
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, h3, p, ol, dl, dd, dt, figure { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ol { list-style: none; }
canvas { display: block; }
[hidden] { display: none !important; }

#app { height: 100vh; position: relative; }
#file { position: absolute; width: 0; height: 0; opacity: 0; }
#drop { cursor: pointer; }
.drop-main, .drop-sub { display: block; }

.link { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.2em; }

.sheet { cursor: zoom-in; min-width: 0; }
.paper { position: relative; overflow: hidden; background: #fff; }
.paper canvas { width: 100%; height: auto; clip-path: inset(0 0 100% 0); }
.sheet.read .paper canvas { clip-path: inset(0); transition: clip-path 0.3s linear; }
.scanbar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); opacity: 0; }
.sheet.reading .scanbar { opacity: 1; animation: scanbar 0.6s linear infinite alternate; }
@keyframes scanbar { from { top: 0; } to { top: calc(100% - 2px); } }

.marks { position: absolute; inset: 0; pointer-events: none; }
.mark { position: absolute; }
.mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(130%, 9px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  outline: 1.5px solid var(--red);
}

#threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
#threads line { stroke: var(--red); stroke-width: 0.75; }

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: auto;
  background: rgba(0, 0, 0, 0.82);
  cursor: zoom-out;
}
#lightbox canvas { height: 96vh; width: auto; background: #fff; }

/* 시안 전환 막대. 디자인의 일부가 아니라 고르는 동안만 쓴다 */
#dev {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 50;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 3px;
  background: #fff;
  color: #111;
  border: 1px solid #777;
  font: 12px/1.4 "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}
#dev .dev-v { display: flex; gap: 2px; }
#dev button { padding: 2px 7px; background: #fff; border: 1px solid #bbb; font: inherit; color: #111; }
#dev button[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }
#dev select { max-width: 190px; padding: 1px 2px; font: inherit; color: #111; background: #fff; border: 1px solid #bbb; }

/* 인쇄: 구운 그림만 A4 한 장에 하나씩. 화면은 하나도 나가지 않는다 */
#print-out { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  html, body { height: auto; overflow: visible; background: #fff !important; }
  body > :not(#print-out) { display: none !important; }
  #print-out { display: block; }
  #print-out > div { width: 210mm; height: 297mm; overflow: hidden; break-after: page; }
  #print-out > div:last-child { break-after: auto; }
  #print-out img { display: block; width: 100%; height: 100%; object-fit: contain; }
  #print-out:empty::before { content: "가림 처리를 마친 뒤 인쇄하십시오."; display: block; padding: 20mm; font: 12pt serif; color: #000; }
}