/* jhworks.app 공통 스타일. 모바일 우선, 최대 폭 640px, 시스템 폰트, 외부 요청 없음. */

:root {
  color-scheme: light dark;
  --bg: #FFFFFF;
  --surface: #F6F8FA;
  --text: #1F2A44;
  --muted: #4A5568;
  --link: #2E7D6B;
  --border: #8A96A3;
  --divider: #DDE3E9;
  --btn-bg: #2E7D6B;
  --btn-bg-hover: #256A5A;
  --btn-text: #FFFFFF;
  --header-bg: #1F2A44;
  --header-text: #FFFFFF;
  --focus: #2E7D6B;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141B2D;
    --surface: #1F2A44;
    --text: #E7EBF0;
    --muted: #B4BDCA;
    --link: #8FD3C3;
    --border: #5B6883;
    --divider: #2C3854;
    --btn-bg: #8FD3C3;
    --btn-bg-hover: #A9DFD2;
    --btn-text: #1F2A44;
    --header-bg: #0E1422;
    --header-text: #FFFFFF;
    --focus: #8FD3C3;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Malgun Gothic",
    "Apple SD Gothic Neo", "Yu Gothic UI", "Microsoft YaHei UI", "Microsoft JhengHei UI",
    sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* 자리표시자 링크("["로 시작하는 href)는 JS 없이도 숨긴다. */
a[href^="["] {
  display: none !important;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}

a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

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

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 헤더 */
.site-header {
  background: var(--header-bg);
  color: var(--header-text);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
}

/* 로고: 필기체 "JH Works" SVG(글자를 도형으로 바꾼 것, 색은 SVG 안에 고정). 높이 40px, 폭은 비율대로.
   좁은 화면에서 언어 드롭다운과 겹치지 않게 로고가 먼저 줄어든다(비율 유지). */
.logo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  padding: 4px 0;
  line-height: 0;
}

.logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.site-header .header-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

#lang-select {
  max-width: 11rem;
  padding: 4px 8px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--header-text);
  background: var(--header-bg);
  border: 1px solid #8A96A3;
  border-radius: 6px;
}

/* 본문 */
main {
  padding: 24px 0 40px;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 0 0 16px;
}

h2 {
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 32px 0 8px;
}

h3 {
  font-size: 1.02rem;
  margin: 20px 0 6px;
}

p,
ul {
  margin: 0 0 12px;
}

ul {
  padding-left: 1.25em;
}

li + li {
  margin-top: 4px;
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface);
  border-radius: 4px;
  padding: 0 4px;
  overflow-wrap: anywhere;
}

.lead {
  font-size: 1.1rem;
}

.muted {
  color: var(--muted);
}

/* 앱 카드 */
.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}

.card h3 {
  margin-top: 0;
  font-size: 1.15rem;
}

.card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

/* 자리표시자 링크만 든 항목은 통째로 숨긴다. */
.card-links li:has(> a[href^="["]) {
  display: none;
}

.card-links li + li {
  margin-top: 0;
}

/* 버튼 꼴 링크 */
.btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--btn-bg-hover);
}

.btn-inline {
  display: inline-block;
  width: auto;
}

/* 후원 버튼 목록 */
.donate-list {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}

.donate-item + .donate-item {
  margin-top: 16px;
}

.donate-desc {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

/* 결제 서비스 공식 버튼(이미지 — 카카오페이·Ko-fi·PayPal, donate.js BRAND_BUTTONS). 비율·색을 바꾸지 않고 가운데에 둔다.
   표시 크기는 img의 width·height 속성. 포커스 테두리는 위의 a:focus-visible을 그대로 쓴다. */
.donate-img {
  display: block;
  width: fit-content;
  margin: 0 auto;
  line-height: 0;
  border-radius: 8px;
}

.donate-img img {
  display: block;
  max-width: none;
  height: auto;
}

.donate-kakaopay {
  border-radius: 26px;
}

/* 계좌로 후원하기(시안 B2): 카카오페이 공식 버튼과 같은 알약형 220x52. 색은 사이트 버튼 색(다크는 #8FD3C3 바탕·#1F2A44 글자). */
.donate-bank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  max-width: 100%;
  min-height: 52px;
  margin: 0 auto;
  padding: 4px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.donate-bank:hover {
  background: var(--btn-bg-hover);
}

/* 영어 글("Donate by bank transfer")은 17px로는 220px 안에서 두 줄이 되어 16px·좌우 여백 10px로 한 줄에 맞춘다.
   글꼴이 더 넓은 환경에서는 두 줄로 넘어가도 52px 안에 들어간다. */
.donate-item-bank[lang="en"] .donate-bank {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 16px;
}

.donate-bank[hidden],
.bank-card[hidden] {
  display: none;
}

/* 누르면 버튼 자리에 펼쳐지는 계좌 카드(시안 4b). 폭 320px, 테두리는 청록(다크 #8FD3C3). 좁은 화면에서는 폭이 줄어든다. */
.bank-card {
  width: 320px;
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 18px 12px;
  border: 1.5px solid var(--link);
  border-radius: 18px;
  background: var(--surface);
  text-align: center;
}

/* 펼칠 때 카드로 포커스를 옮긴다. 마우스로 눌렀을 때는 테두리를 그리지 않고, 키보드로 왔을 때만 그린다. */
.bank-card:focus {
  outline: none;
}

.bank-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.bank-card-title {
  margin: 0;
  color: var(--link);
  font-size: 15px;
  font-weight: 700;
}

.bank-card-bank {
  margin: 8px 0 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

/* 계좌번호 이미지(2배 해상도, 글자 약 29px로 보임)와 예금주 줄(라벨 글자 16px 회색 + 이름 이미지, 세로 가운데).
   이미지 표시 크기는 img의 width·height(donate.js BANK_IMAGE)로 정해져 이미지가 오기 전에도 자리를 잡는다.
   좁으면 max-width로 줄고 높이는 비율대로 따라간다. */
.bank-card-number {
  margin: 10px 0 0;
  line-height: 0;
  text-align: center;
}

.bank-card-number img,
.bank-card-holder img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.bank-card-number img {
  vertical-align: top;
}

/* 이름 이미지는 줄 상자(글자 기준선) 없이 이미지 높이 그대로 두어 라벨과 세로 가운데로 맞춘다. */
.bank-card-holder picture,
.bank-card-holder img {
  display: block;
}

.bank-card-holder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 6px;
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--muted);
}

.bank-card-close {
  margin-top: 10px;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.supporters {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

.supporters p {
  margin: 0 0 8px;
}

/* 푸터 */
.site-footer {
  border-top: 1px solid var(--divider);
  padding: 20px 0 32px;
  font-size: 0.9rem;
  color: var(--muted);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 0;
}

/* 사용 허가 짧은 문구(모든 쪽 푸터) */
.footer-note {
  margin: 10px 0 0;
}

/* 사용 허가 전문(/license/). ko·en 두 벌 중 하나만 보인다(hidden, Worker·i18n.js가 정함) */
.license-text h2 {
  margin-top: 0;
}

.license-copyright {
  color: var(--muted);
}

.effective {
  color: var(--muted);
  font-size: 0.9rem;
}

@media (min-width: 480px) {
  h1 {
    font-size: 1.8rem;
  }
}

/* 앱 소개 페이지(/show-me-the-file/). 같은 토큰만 쓴다. 폭은 다른 쪽과 같은 640px. */
.app-meta {
  margin-top: -4px;
  font-size: 0.95rem;
}

.shot {
  margin: 20px 0 8px;
}

.shot a {
  display: block;
  line-height: 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--divider);
  border-radius: 8px;
}

.shot figcaption {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

.shot-small {
  max-width: 520px;
}

.download {
  margin: 24px 0 8px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 12px;
}

.download [hidden] {
  display: none;
}

.dl-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dl-list li + li {
  margin-top: 0;
}

.dl-btn {
  padding: 14px 16px;
}

/* 둘째 내려받기 단추: 테두리만 있는 꼴(글자는 링크 색, 대비는 링크와 같다). */
.btn-secondary {
  background: transparent;
  color: var(--link);
  box-shadow: inset 0 0 0 2px var(--link);
}

.btn-secondary:hover {
  background: var(--bg);
}

.dl-meta {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

.dl-soon {
  margin: 0;
  font-weight: 600;
}

/* Store 단추 목록: 위 내려받기 목록(또는 경고 안내·준비 중 글)과 단추 사이 간격을 같게 */
.dl-store {
  margin-top: 12px;
}

/* 설치형·포터블 경고 안내: 두 단추 바로 아래, Store 단추 앞 */
.dl-note {
  margin: 10px 0 0;
  font-size: 0.9rem;
}

/* "자세히 보기" 링크가 줄 끝에서 쪼개지지 않게 */
.dl-note a {
  white-space: nowrap;
}

.feature-list {
  padding-left: 1.1em;
}

.feature-list li + li {
  margin-top: 8px;
}

ol.steps {
  padding-left: 1.4em;
}

ol.steps li + li {
  margin-top: 8px;
}

/* 내려받기 상자의 "자세히 보기"가 둘째 단계(경고 창)로 바로 간다. */
.app-page ol.steps li[id] {
  scroll-margin-top: 16px;
}

/* ---- 설치 단계 그림(2026-10-28): 실제 화면을 단순하게 그린 것. 같은 토큰만 써서 밝은·어두운 화면 모두 맞는다.
   누를 곳은 사이트 강조색(테두리·채움)과 번호로 보인다. 그림은 aria-hidden, 설명은 figcaption. ---- */
.ui-fig {
  margin: 10px 0 6px;
}

.ui-fig figcaption {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* 경고 창 두 개: 좁은 화면은 위아래, 넓은 화면은 나란히 */
.ui-pair {
  display: grid;
  gap: 6px;
  justify-items: stretch;
}

.ui-next {
  justify-self: center;
  color: var(--muted);
  line-height: 1;
  transform: rotate(90deg);
}

@media (min-width: 560px) {
  .ui-pair {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .ui-pair .ui-win {
    align-self: stretch;
  }

  .ui-next {
    transform: none;
  }
}

.ui-win {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.4;
}

.ui-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  color: var(--muted);
  line-height: 1.5;
}

.ui-body {
  flex: 1;
  padding: 8px 10px 4px;
}

.ui-body p {
  margin: 0 0 6px;
}

.ui-title {
  font-size: 1.05em;
  font-weight: 700;
}

.ui-info {
  overflow-wrap: anywhere;
  color: var(--muted);
}

.ui-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface);
  border-top: 1px solid var(--divider);
}

.ui-btn,
.ui-chip {
  display: inline-block;
  padding: 1px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  white-space: nowrap;
}

.ui-link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* 누를 곳: 강조색 테두리, 단추는 강조색으로 채운다 */
.ui-hl {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 3px;
}

.ui-btn.ui-hl,
.ui-chip.ui-hl {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 600;
}

.ui-num {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.ui-foot .ui-num {
  margin-left: 0;
}

/* Edge 단계 띠: 칸 사이에서만 줄을 바꾼다 */
.ui-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.4;
}

.ui-step {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.ui-arrow {
  margin: 0 6px;
  color: var(--muted);
}

/* PowerShell 명령. 좁은 화면에서는 가로로 넘기지 않고 줄을 바꾼다. */
pre.cmd {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre.cmd code {
  padding: 0;
  background: none;
}

.table-wrap {
  margin: 0 0 12px;
}

.hash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  table-layout: fixed;
}

.hash-table th,
.hash-table td {
  padding: 6px 8px;
  border-top: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.hash-table th:first-child {
  width: 42%;
}

.small {
  font-size: 0.85rem;
}

.faq details {
  border-top: 1px solid var(--divider);
  padding: 4px 0;
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--divider);
}

.faq summary {
  padding: 8px 0;
  font-weight: 600;
  cursor: pointer;
}

.faq summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.faq details > div,
.faq details > p {
  margin: 0 0 8px;
}

.more-links {
  margin-top: 4px;
}

/* ---- 앱 소개 페이지의 목차와 소개 절(2026-10-27) ---- */

/* 목차 링크로 절에 갈 때 제목이 화면 맨 위에 딱 붙지 않게 한다. */
.app-page section[id],
.app-page h3[id] {
  scroll-margin-top: 16px;
}

/* 본문의 큰 절(h2)이 바뀌는 곳마다 가로 구분선. 절(section)의 위 테두리라 앵커로 가면 선이 화면 위
   16px에, 그 아래 제목이 온다. 머리(내려받기 상자)와 소개 사이는 상자 테두리가 이미 나누므로 긋지 않는다.
   소개 안의 소제목(h3)은 section이 아니라 해당 없음. */
.app-page > section:not(.download) + section {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--divider);
}

.app-page > section:not(.download) + section > h2:first-child {
  margin-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.app-layout) {
    scroll-behavior: smooth;
  }
}

/* 좁은 화면: 본문 맨 위의 접힌 목차. 넓은 화면(1100px 이상)에서는 숨기고 오른쪽 목차를 쓴다. */
.toc-inline {
  margin: 16px 0 4px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 10px;
}

.toc-inline > summary {
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}

.toc-inline > summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.toc-inline ol {
  margin: 0;
  padding: 0 14px 10px;
  list-style: none;
  border-top: 1px solid var(--divider);
}

.toc-inline li + li {
  margin-top: 0;
}

.toc-inline a {
  display: block;
  padding: 8px 0;
  text-decoration: none;
}

.toc-inline li + li a {
  border-top: 1px solid var(--divider);
}

/* 넓은 화면: 오른쪽 목차. 본문 열(640px)은 머리글과 같은 자리에 두고, 오른쪽 여백에 목차를 붙인다. */
.toc-side {
  display: none;
}

.toc-title {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.toc-side ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--divider);
}

.toc-side li + li {
  margin-top: 0;
}

.toc-side a {
  display: block;
  margin-left: -1px;
  padding: 5px 0 5px 12px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  text-decoration: none;
}

.toc-side a:hover {
  color: var(--text);
}

.toc-side a.is-active {
  border-left-color: var(--link);
  color: var(--text);
  font-weight: 600;
}

/* 소절(소개 안의 소제목)은 들여 쓰고 조금 작게. 지금 소절을 볼 때 위 절은 글자만 진하게. */
.toc-side ol ol {
  border-left: 0;
}

.toc-side ol ol a {
  margin-left: -1px;
  padding: 3px 0 3px 24px;
  font-size: 0.82rem;
}

.toc-side a.is-parent {
  color: var(--text);
}

.toc-side .toc-top {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.85rem;
}

@media (min-width: 1100px) {
  .app-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr);
  }

  .app-layout > main {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
  }

  .toc-side {
    display: block;
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 0;
    max-width: 240px;
    max-height: 100vh;
    overflow-y: auto;
    padding: 32px 16px 24px 16px;
  }

  .toc-inline {
    display: none;
  }
}

/* Store 소개글 절(머리 바로 아래). 첫 줄 물음은 조금 크게, 소제목 다섯은 h3. */
.intro {
  margin-top: 8px;
}

.intro h2 {
  margin-top: 24px;
}

.intro-hook {
  margin: 12px 0 8px;
  font-size: 1.15rem;
  font-weight: 600;
}

.intro-sub h3 {
  margin-top: 22px;
}

.app-page .intro-sub[id] {
  scroll-margin-top: 16px;
}