/* ==========================================================================
   award-certificate 전용 스타일
   공통 패턴은 css/common.css, 용지 조판은 css/print-sheet.css 에 있습니다.
   여기에는 이 툴의 도메인(A4 가로 상장 한 장, 테두리 문양, 글자 크기 3단계)만 둡니다.

   🔴 인라인 style 금지 — 서버 CSP 가 style-src 'self' 라 style="" 은 차단됩니다.
      상태는 .sheet 의 data-* 로 넘기고 여기서 받습니다.
   🔴 인쇄물 색은 --ink-* 만 씁니다(print-sheet.css 에 정의). --color-* 를 쓰면
      다크 모드에서 밝은 회색이 되어 흰 종이에 거의 안 찍힙니다.
   ========================================================================== */

/* --- 용지 방향 --------------------------------------------------------------
   🔴 print-sheet.css 의 `@page { size: A4; margin: 15mm }` 를 여기서 덮습니다.
      이 파일이 뒤에 실려야 이깁니다(index.html 의 link 순서를 바꾸지 마세요).
      상장은 A4 가로 한 장이고, 테두리를 종이 끝까지 살리려고 여백을 0 으로 둡니다.
      프린터의 물리적 비인쇄 영역(보통 4~5mm)을 감안해 테두리를 9mm 안쪽에 그렸습니다.
   -------------------------------------------------------------------------- */
@page {
  size: A4 landscape;
  margin: 0;
}

/* --- 주의 안내 --------------------------------------------------------------
   .notice 의 경고 변형입니다. 다른 툴에서도 쓸 만하면 common.css 로 올리세요.
   -------------------------------------------------------------------------- */
.notice--warn {
  border-left: 4px solid var(--color-warning);
  color: var(--color-text);
}

.notice--warn b {
  color: var(--color-warning);
}

/* --- 좌: 입력 / 우: 미리보기 ------------------------------------------------ */
.cert-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 1000px) {
  .cert-layout {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: var(--space-6);
  }

  /* 미리보기가 화면을 따라오도록 붙여 둡니다. 폼이 길어도 상장이 보입니다. */
  .cert-output {
    position: sticky;
    top: var(--space-4);
  }
}

.cert-form {
  align-content: start;
}

/* 🔴 그리드 항목의 기본 min-width 는 auto 라, ‘크게 보기’로 용지를 297mm 로 늘리면
   이 칸이 통째로 1149px 까지 벌어져 페이지 전체가 가로로 밀립니다(375px 실측).
   0 으로 눌러야 안쪽 .sheet-stack 의 가로 스크롤만 동작합니다. */
.cert-output {
  min-width: 0;
}

.cert-textarea {
  min-height: 150px;
  line-height: 1.7;
  resize: vertical;
}

.cert-inline-actions {
  margin-top: var(--space-2);
}

.cert-inline-actions .button {
  min-height: 44px; /* STYLE.md: 터치 대상 최소 44px */
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.cert-actions {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.cert-zoom-row {
  display: flex;
  justify-content: flex-end;
}

/* --- 용지 --------------------------------------------------------------------
   .sheet-stack 은 한 장짜리지만 다른 인쇄 툴과 같은 구조를 유지합니다.
   -------------------------------------------------------------------------- */
.sheet-stack {
  display: grid;
  gap: var(--space-5);
}

/* ‘크게 보기’를 켜면 실제 크기(297mm)로 늘리고 이 안에서만 가로로 스크롤합니다.
   페이지 자체는 절대 가로로 밀리지 않습니다. */
.sheet-stack[data-zoom="on"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sheet-stack[data-zoom="on"] .sheet--cert {
  width: 297mm;
  max-width: none;
}

/* 🔴 container-type 을 두어야 안쪽 글자 크기를 cqw(용지 폭 기준)로 쓸 수 있습니다.
   덕분에 화면에서 줄여 보나 인쇄하나 배치가 완전히 같습니다.
   cqw 를 모르는 아주 옛 브라우저를 위해 모든 글자 크기에 pt 를 먼저 적어 둡니다. */
.sheet.sheet--cert {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  padding: 0;
  color: var(--ink-900);
}

@media screen {
  .sheet.sheet--cert {
    width: min(100%, 297mm);
    min-height: 0;
    padding: 0;
    aspect-ratio: 297 / 209;
  }
}

@media print {
  .sheet.sheet--cert {
    width: 297mm;
    height: 209mm;
    padding: 0;
    overflow: hidden;
  }
}

/* --- 테두리 문양 -------------------------------------------------------------
   세 벌 모두 문서에 들어 있고 data-border 로 한 벌만 보여 줍니다.
   전부 이 도구를 위해 좌표를 계산해 그린 도형입니다(외부 이미지·템플릿 없음).
   -------------------------------------------------------------------------- */
.cert-frame {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
}

.sheet--cert[data-border="classic"] .cert-frame--classic,
.sheet--cert[data-border="corner"] .cert-frame--corner,
.sheet--cert[data-border="wave"] .cert-frame--wave {
  display: block;
}

.cert-frame .rule-thick {
  fill: none;
  stroke: var(--ink-900);
  stroke-width: 1.4;
}

.cert-frame .rule-med {
  fill: none;
  stroke: var(--ink-700);
  stroke-width: 0.9;
}

.cert-frame .rule-thin {
  fill: none;
  stroke: var(--ink-500);
  stroke-width: 0.45;
}

.cert-frame .ink-fill {
  fill: var(--ink-900);
  stroke: none;
}

/* --- 글자 배치 --------------------------------------------------------------- */
/* 글자 영역은 테두리 안쪽 선(y=15mm)에서 최소 6mm 떨어뜨립니다.
   8% 였을 때 제목 윗선이 테두리에서 1.7mm 밖에 안 떨어져 답답했습니다(실측). */
.cert-inner {
  position: absolute;
  top: 10.5%;
  right: 16%;
  bottom: 9.5%;
  left: 16%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.cert-mid {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.cert-inner p {
  margin: 0;
}

/* 🔴 `.cert-inner p:empty` 로 뭉뚱그리면 문단 사이 간격으로 넣는 빈 줄
   (.cert-line--gap)까지 사라집니다. 감출 줄만 하나씩 적습니다. */
.cert-title-en:empty,
.cert-org:empty,
.cert-name-en:empty,
.cert-date:empty,
.cert-date-en:empty,
.cert-issuer:empty,
.cert-body:empty {
  display: none;
}

.cert-title {
  font-size: 45pt;
  font-size: 5.4cqw;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: var(--ink-900);
}

.cert-inner .cert-title-en {
  margin-top: 0.6cqw;
  font-size: 12pt;
  font-size: 1.45cqw;
  letter-spacing: 0.24em;
  line-height: 1.4;
  color: var(--ink-500);
}

.cert-rule {
  display: block;
  width: 16%;
  margin: 1.6cqw auto 0;
  border-top: 1pt solid var(--ink-400);
}

.cert-inner .cert-org {
  margin-bottom: 0.8cqw;
  font-size: 13pt;
  font-size: 1.55cqw;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--ink-600);
}

.cert-name {
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  line-height: 1.25;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}

.sheet--cert[data-name="lg"] .cert-name { font-size: 30pt; font-size: 3.6cqw; }
.sheet--cert[data-name="md"] .cert-name { font-size: 24pt; font-size: 2.85cqw; }
.sheet--cert[data-name="sm"] .cert-name { font-size: 19pt; font-size: 2.26cqw; }

/* 이름을 비우면 손으로 적을 수 있게 밑줄만 인쇄합니다. */
.cert-blank {
  display: inline-block;
  width: 55%;
  height: 1em;
  border-bottom: 1pt solid var(--ink-400);
  vertical-align: bottom;
}

.cert-inner .cert-name-en {
  margin-top: 0.5cqw;
  font-size: 12pt;
  font-size: 1.45cqw;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: var(--ink-600);
}

.cert-body {
  margin-top: 1.8cqw;
  color: var(--ink-900);
}

.cert-line {
  margin: 0;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/* 본문 가운데의 빈 줄은 문단 사이 간격으로 남깁니다. */
.cert-line--gap {
  height: 0.9em;
  line-height: 0.9;
}

.sheet--cert[data-body="lg"] .cert-line { font-size: 16pt; font-size: 1.9cqw; }
.sheet--cert[data-body="md"] .cert-line { font-size: 13.5pt; font-size: 1.6cqw; }
.sheet--cert[data-body="sm"] .cert-line { font-size: 10.8pt; font-size: 1.28cqw; }

.cert-foot {
  flex: 0 0 auto;
}

.cert-date {
  font-size: 13pt;
  font-size: 1.55cqw;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--ink-700);
}

.cert-date-en {
  font-size: 11pt;
  font-size: 1.3cqw;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--ink-500);
}

.cert-inner .cert-issuer {
  margin-top: 1.4cqw;
  font-size: 18pt;
  font-size: 2.15cqw;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--ink-900);
}

/* --- 영문 병기 끄기 ---------------------------------------------------------- */
.sheet--cert[data-bilingual="off"] .cert-title-en,
.sheet--cert[data-bilingual="off"] .cert-name-en,
.sheet--cert[data-bilingual="off"] .cert-date-en {
  display: none;
}

/* --- 인쇄 -------------------------------------------------------------------
   🔴 print-sheet.css 는 .tool-form 과 .no-print 를 감춥니다. 그런데 .cert-layout 이
      두 칸 그리드라 폼이 사라져도 첫 칸 자리가 남아 상장이 오른쪽으로 밀립니다.
      인쇄에서는 반드시 블록으로 되돌립니다.
   -------------------------------------------------------------------------- */
@media print {
  .cert-layout {
    display: block !important;
    gap: 0 !important;
  }

  .cert-output {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sheet-stack,
  .sheet-stack[data-zoom="on"] {
    display: block !important;
    overflow: visible !important;
  }
}