/* ============================================================
   원고지 계산기·변환기 전용 스타일
   (색상·간격·카드 등 공통 토큰은 common.css 재사용)
   ============================================================ */

/* ---- 글꼴 선택기용 자체 호스팅 웹폰트 (한글만 subset한 woff) ----
   이 페이지에서만 쓰므로 여기 선언. font-display:swap → 로딩 중 기본 글꼴로 표시 */
@font-face {
  font-family: "HakgyoansimBadasseugi";  /* 학교안심 받아쓰기 */
  src: url("/assets/fonts/hakgyoansim-badasseugi.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "NanumBrushWeb";          /* 나눔손글씨 붓 */
  src: url("/assets/fonts/nanum-brush.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "SangjuDajungdagam";      /* 상주 다정다감 */
  src: url("/assets/fonts/sangju-dajungdagam.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inklipquid";             /* 잉크립퀴드 */
  src: url("/assets/fonts/inklipquid.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TvnJeulgeoun";           /* tvN 즐거운이야기 */
  src: url("/assets/fonts/tvn-jeulgeoun.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* 도구 페이지 도입부 — 원고지 격자 배경(.paper-grid) 위에 눈썹+명조 제목 */
.tool-intro {
  padding: var(--space-6) 0 var(--space-5);
  margin-bottom: var(--space-5);
}
.tool-intro h1 {
  margin: 0 0 var(--space-3);
  max-width: 20ch;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}
/* 격자가 리드 문구 뒤까지 은은히 깔리도록 리드/안내문은 살짝 좁게 */
.tool-intro .lead { max-width: 52ch; }

.lead {
  color: var(--color-text-sub);
  margin: var(--space-2) 0 var(--space-2);
  max-width: 60ch;
  font-size: 1.02rem;
}
.lead-note {
  color: var(--color-text-sub);
  font-size: .85rem;
  opacity: .85;
  margin: 0 0 var(--space-5);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- 규격 선택 바 ---- */
.spec-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.spec-label {
  font-weight: 600;
  margin-right: var(--space-1);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  cursor: pointer;
  font-size: .92rem;
  user-select: none;
}
.chip:hover { border-color: var(--color-primary); }
.chip:has(input:checked) {
  background: var(--color-primary-weak);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}
.chip input { accent-color: var(--color-primary); }
.custom-fields {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
  color: var(--color-text-sub);
  font-size: .9rem;
}
.custom-fields input {
  width: 56px;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

/* ---- 입력 | 결과 2단 레이아웃 (좌측 입력을 넓게, 우측 결과는 좁게) ---- */
.tool-grid {
  display: grid;
  /* 입력창은 남는 공간을 모두 차지, 결과(메타 정보)는 좁은 고정 폭 */
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 720px) {
  .tool-grid { grid-template-columns: 1fr; }
}

.input-card { display: flex; flex-direction: column; gap: var(--space-3); }
#inputText {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-family: var(--wg-font, var(--font-sans));
  line-height: 1.7;
}
#inputText:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.toggle input { accent-color: var(--color-primary); width: 16px; height: 16px; }
.font-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-sub);
  font-size: .9rem;
}
.font-field select {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
/* 펼친 목록에서 글자체 미리보기가 잘 보이도록 옵션을 조금 크게(지원 브라우저 한정) */
.font-field select option {
  font-size: 1.05rem;
  padding: 6px 8px;
  background: var(--color-surface);
  color: var(--color-text);
}
.controls .btn { margin-left: auto; }

/* ---- 결과 카드 (컴팩트하게) ---- */
.result-card {
  padding: var(--space-4);
  font-size: .9rem;
}
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
}
.result-row:last-of-type { border-bottom: 0; }
.result-name { color: var(--color-text-sub); font-size: .85rem; }
.result-name em { font-style: normal; font-size: .72rem; opacity: .8; display: block; }
.result-value { white-space: nowrap; color: var(--color-text-sub); }
.result-value b {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.result-hint {
  margin: var(--space-2) 0 0;
  font-size: .76rem;
  color: var(--color-text-sub);
  text-align: right;
}

/* ---- 미리보기 ---- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.preview-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.preview-meta { color: var(--color-text-sub); font-size: .88rem; }
.preview-scroll {
  overflow-x: auto;
  padding: var(--space-2) 0;
  -webkit-overflow-scrolling: touch;
  /* 원고지를 가운데 정렬. 화면보다 넓으면 왼쪽부터 보이며 스크롤(safe) */
  display: flex;
  justify-content: safe center;
}
.preview { display: inline-flex; flex-direction: column; gap: var(--space-4); }

/* 원고지 한 장: 바깥 테두리 + 우상단 "No __" + 붙은 칸의 행들 + 좌하단 규격 (사진 참고) */
.wg-page {
  --cell: 30px;
  --row-gap: 11px;             /* 행과 행 사이 여백(교정용 띠) */
  display: block;
  padding: 12px 16px 8px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-grid-strong);
  box-shadow: var(--shadow-sm);
}
/* 우상단 "No ______ 1" */
.wg-no {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--color-grid-strong);
  font-size: .9rem;
}
.wg-no em { font-style: italic; }
.wg-no-fill {
  min-width: 90px;
  border-bottom: 1px solid var(--color-grid-strong);
  text-align: center;
  padding: 0 8px 2px;
  line-height: 1;
}
.wg-no b { font-weight: 700; color: var(--color-text); }

/* 행 묶음: 칸이 붙은 행을 세로 간격으로 쌓음 */
.wg-rows { display: flex; flex-direction: column; gap: var(--row-gap); }
.wg-row {
  display: flex;
  border-left: 1px solid var(--color-grid);   /* 행 왼쪽 세로선 */
}
.wg-cell {
  width: var(--cell);
  height: var(--cell);
  /* 오른쪽 세로선 + 위·아래 가로선 (왼쪽선은 행/이전 칸이 담당 → 선 겹침 없음) */
  border-right: 1px solid var(--color-grid);
  border-top: 1px solid var(--color-grid);
  border-bottom: 1px solid var(--color-grid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wg-font, var(--font-sans));
  font-size: 16px;
  line-height: 1;
  color: var(--color-text);
  background: transparent;
}
.preview-empty {
  color: var(--color-text-sub);
  padding: var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
}
.preview-more { margin-top: var(--space-3); }

/* ---- 설명/FAQ 본문 ---- */
.prose { margin-top: var(--space-6); }
.prose h2 { margin-bottom: var(--space-3); }
.prose h3 { margin: var(--space-4) 0 var(--space-2); font-size: 1.05rem; }
.prose p, .prose li { color: var(--color-text); }
.prose em { color: var(--color-primary); font-style: normal; font-weight: 600; }
.prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }
.prose details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
}
.prose summary {
  cursor: pointer;
  font-weight: 600;
}
.prose details[open] summary { margin-bottom: var(--space-2); }
.prose details p { margin: 0; color: var(--color-text-sub); }

@media (max-width: 480px) {
  .wg-page { --cell: 26px; }
  .wg-cell { font-size: 14px; }
  .result-value b { font-size: 1.1rem; }
}

/* ---- 인쇄(→ PDF로 저장) : 원고지 격자만 깔끔히 ----
   다크 모드여도 인쇄는 흰 배경·붉은 격자로 강제(색상 명시). */
@media print {
  body { background: #fff !important; }
  /* 도입부(제목·안내문)·머리글·바닥글·도구 UI·설명은 인쇄하지 않고 원고지만 남긴다 */
  .site-header, .site-footer, .tool-intro,
  .spec-bar, .tool-grid, .ad-slot, .prose,
  .section-head, .preview-more { display: none !important; }

  .preview-scroll { overflow: visible !important; padding: 0 !important; }
  .preview { display: block !important; }

  .wg-page {
    /* 바깥 테두리를 격자 폭에 딱 맞추고 페이지 가운데로 → 좌우 대칭 */
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 18px !important;
    padding: 12px 16px 8px !important;
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    background: #fff !important;
    border-color: #d98b8b !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .wg-row { border-left-color: #eab6b6 !important; }
  .wg-cell {
    color: #1a1a1a !important;
    border-color: #eab6b6 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .wg-no { color: #c56f6f !important; }
  .wg-no b { color: #1a1a1a !important; }
  .wg-no-fill { border-bottom-color: #c56f6f !important; }
}

/* 여백만 지정. 용지 크기(A4 등)와 방향(세로/가로)은 지정하지 않아
   사용자가 인쇄 대화상자에서 자유롭게 고를 수 있음.
   (size나 방향을 지정하면 크롬이 해당 선택을 잠금) */
@page { margin: 12mm; }