/* JidoPost UI foundation v1.0 FINAL — assets/css/tokens.css
   기준 문서: JidoPost UI Design Spec v1.0 FINAL
   원칙: 색/간격/글자 크기/레이아웃 값은 토큰을 통해서만 사용한다.
   폰트 파일(@font-face)은 locale별 fonts.css에서 로드하며 이 파일에는 배포하지 않는다. */

:root {
  /* brand / color */
  --jp-blue: #2563EB;
  --jp-blue-dark: #1D4ED8;
  --jp-navy: #0B1F33;
  --jp-ink: #172033;
  --jp-muted: #5E6B7A;
  --jp-line: #D9DEE5;
  --jp-surface: #F3F5F8;
  --jp-tint: #EAF2FF;
  --jp-bg: #FFFFFF;

  /* spacing: 4px base */
  --jp-space-1: 4px;
  --jp-space-2: 8px;
  --jp-space-3: 12px;
  --jp-space-4: 16px;
  --jp-space-5: 24px;
  --jp-space-6: 32px;
  --jp-space-7: 48px;
  --jp-space-8: 72px;
  --jp-space-9: 96px;

  /* layout */
  --jp-container: 1280px;
  --jp-read: 740px;
  --jp-gutter: 16px;
  --jp-section-gap: 48px;
  --jp-card-gap: 16px;
  --jp-header-h: 56px;

  /* radius / border */
  --jp-radius: 4px;
  --jp-border: 1px solid var(--jp-line);

  /* layering */
  --jp-z-header: 100;
  --jp-z-overlay: 1000;

  /* type scale: mobile first */
  --jp-fs-hero: 26px;
  --jp-lh-hero: 1.3;
  --jp-fs-h1: 26px;
  --jp-lh-h1: 1.35;
  --jp-fs-h2: 20px;
  --jp-lh-h2: 1.4;
  --jp-fs-h3: 17px;
  --jp-lh-h3: 1.45;
  --jp-fs-card: 16px;
  --jp-lh-card: 1.4;
  --jp-fs-body: 17px;
  --jp-lh-body: 1.8;
  --jp-fs-ui: 14px;
  --jp-lh-ui: 1.6;
  --jp-fs-meta: 12px;
  --jp-lh-meta: 1.5;

  /* font-family: locale rules override this variable */
  --jp-font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* breakpoints: mobile <= 767 / tablet 768–1199 / desktop >= 1200 */
@media (min-width: 768px) {
  :root {
    --jp-gutter: 24px;
    --jp-section-gap: 64px;
    --jp-card-gap: 20px;
    --jp-fs-h1: 32px;
    --jp-fs-h2: 24px;
    --jp-fs-card: 17px;
    --jp-fs-body: 18px;
  }
}

@media (min-width: 1200px) {
  :root {
    --jp-section-gap: 88px;
    --jp-card-gap: 24px;
    --jp-fs-hero: 40px;
    --jp-fs-h1: 38px;
    --jp-fs-h2: 28px;
    --jp-fs-h3: 21px;
    --jp-fs-ui: 15px;
    --jp-fs-meta: 13px;
  }
}

/* foundation */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--jp-bg);
  color: var(--jp-ink);
  font-family: var(--jp-font);
  font-size: var(--jp-fs-ui);
  line-height: var(--jp-lh-ui);
}
img { max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--jp-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.jp-container {
  width: 100%;
  max-width: var(--jp-container);
  margin-inline: auto;
  padding-inline: var(--jp-gutter);
}

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

/* line-clamp helpers: visual limit only; server excerpt must already be plain text + char-capped */
.jp-clamp-2,
.jp-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jp-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.jp-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* 6 card types: hero / feature / standard / portrait / horizontal / compact */
.jp-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.jp-card__media {
  aspect-ratio: var(--jp-ratio, 16 / 10);
  overflow: hidden;
  background: var(--jp-surface);
}

.jp-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jp-card__label {
  margin: var(--jp-space-3) 0 var(--jp-space-1);
  color: var(--jp-muted);
  font-size: var(--jp-fs-meta);
  line-height: var(--jp-lh-meta);
  letter-spacing: .02em;
}

.jp-card__title {
  margin: 0;
  font-size: var(--jp-fs-card);
  line-height: var(--jp-lh-card);
  font-weight: 700;
}

.jp-card__excerpt {
  margin: var(--jp-space-2) 0 0;
  color: var(--jp-muted);
  font-size: var(--jp-fs-ui);
  line-height: var(--jp-lh-ui);
}

.jp-card__meta {
  margin-top: var(--jp-space-2);
  color: var(--jp-muted);
  font-size: var(--jp-fs-meta);
  line-height: var(--jp-lh-meta);
}

.jp-card:hover .jp-card__title,
.jp-card:focus-visible .jp-card__title {
  text-decoration: underline;
  text-underline-offset: .15em;
}

.jp-card--hero { --jp-ratio: 16 / 9; }
.jp-card--hero .jp-card__title {
  font-size: var(--jp-fs-hero);
  line-height: var(--jp-lh-hero);
}
.jp-card--feature { --jp-ratio: 16 / 10; }
.jp-card--standard { --jp-ratio: 16 / 10; }
.jp-card--portrait { --jp-ratio: 4 / 5; }
.jp-card--feature.jp-card--wide { --jp-ratio: 3 / 2; }
.jp-card--standard.jp-card--utility .jp-card__media { display: none; }

.jp-card--horizontal,
.jp-card--compact {
  display: grid;
  gap: var(--jp-space-3);
  align-items: start;
}
.jp-card--horizontal { grid-template-columns: 35% 1fr; --jp-ratio: 4 / 3; }
.jp-card--compact { grid-template-columns: 72px 1fr; --jp-ratio: 1 / 1; }
.jp-card--horizontal .jp-card__label,
.jp-card--compact .jp-card__label { margin-top: 0; }

/* rights metadata says original/no-crop */
.jp-card__media--original img {
  object-fit: contain;
  background: var(--jp-bg);
}

/* Mobile Hero: title-first. Summary returns from tablet. */
@media (max-width: 767px) {
  .jp-card--hero .jp-card__excerpt { display: none; }
}

/* article body: never clamp */
.jp-article {
  width: 100%;
  max-width: var(--jp-read);
  margin-inline: auto;
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
}
.jp-article h2 {
  margin: var(--jp-space-7) 0 var(--jp-space-3);
  font-size: var(--jp-fs-h2);
  line-height: var(--jp-lh-h2);
}
.jp-article h3 {
  margin: var(--jp-space-6) 0 var(--jp-space-2);
  font-size: var(--jp-fs-h3);
  line-height: var(--jp-lh-h3);
}
.jp-article img { height: auto; }
.jp-article .jp-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* locale layer. @font-face itself belongs in locale font files. */
:lang(ko) {
  --jp-font: "Noto Sans KR", system-ui, "Malgun Gothic", sans-serif;
  --jp-lh-body: 1.8;
  word-break: keep-all;
}

:lang(en),
:lang(es) {
  --jp-font: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:lang(ja) {
  --jp-font: "Noto Sans JP", system-ui, "Yu Gothic", sans-serif;
  line-break: strict;
  word-break: normal;
}

:lang(zh-Hans),
:lang(zh-CN) {
  --jp-font: "Noto Sans SC", system-ui, "Microsoft YaHei", sans-serif;
  line-break: strict;
  word-break: normal;
}

:lang(hi) {
  --jp-font: "Noto Sans Devanagari", system-ui, sans-serif;
  --jp-lh-body: 1.9;
  --jp-lh-card: 1.55;
  --jp-lh-h1: 1.5;
  --jp-lh-h2: 1.55;
}

/* CJK cards can contain long Latin fragments/URLs; limit the aggressive wrap to cards, not article body. */
:lang(ja) .jp-card__title,
:lang(ja) .jp-card__excerpt,
:lang(zh-Hans) .jp-card__title,
:lang(zh-Hans) .jp-card__excerpt,
:lang(zh-CN) .jp-card__title,
:lang(zh-CN) .jp-card__excerpt {
  overflow-wrap: anywhere;
}