/* ==========================================================================
   TScientific Privacy Policy — Stylesheet
   Visual tone: tscorp.ai (minimal enterprise-tech)
   Pure CSS, no framework.

   This stylesheet is consumed by (tasks 5.2 / 5.3):
     - templates/policy.html.j2  (index.html — current policy)
     - templates/list.html.j2    (list.html — version history)
     - error.html                (404 page)

   --------------------------------------------------------------------------
   CLASS / ELEMENT CONTRACT (templates should use these names)
   --------------------------------------------------------------------------
   Layout
     .site-header     Top bar: wordmark (left) + small meta (right)
     .brand           "TScientific" wordmark text inside .site-header
     .header-meta     Small eyebrow meta on the right (e.g. KOSDAQ 057680)
     .container       Centered content column (max-width via --max-width)
     .site-footer     Bottom bar: company / copyright / KOSDAQ

   Section labels & headings
     .eyebrow         Uppercase English label (e.g. PRIVACY POLICY)
     .page-title      Strong page heading (h1)
     .page-meta       Sub-heading meta line (e.g. 시행일 / effective date)
     .divider         Hairline horizontal rule (or use <hr>)

   Body content
     .content         Wrapper for converted markdown body (policy text)
                      Styles h1-h6, p, ul/ol, a, table inside it.
     .table-wrap      Wrap <table> for horizontal scroll on mobile
                      (the .content wrapper also auto-scrolls bare tables)

   Version history (list.html)
     .version-list    <ul> container for version entries
     .version-item    Single version row/card (hairline divider between)
     .version-link    Anchor wrapping a version item -> old/*.html
     .version-id      Version number (e.g. V23)
     .version-date    Applied date (YYYY-MM-DD)
     .empty-state     "이전 버전이 없습니다" empty message block

   Navigation / actions
     .back-link       "이전 버전 찾아보기 →" link on index.html
                      / "홈으로" link on error.html

   Utilities
     .visually-hidden Accessible hidden text
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens — single source of brand truth.
   Brand HEX values are provisional (Open Decision); confirm with design/
   security team and update here only. Everything else references these vars.
   -------------------------------------------------------------------------- */
:root {
  --ink:        #0b0c0e;   /* 본문 텍스트 / 헤딩 (near-black) */
  --bg:         #ffffff;   /* 본문 배경 */
  --bg-subtle:  #f5f6f7;   /* 카드 / 코드 배경 */
  --muted:      #6b7280;   /* 보조 텍스트, eyebrow 라벨 */
  --line:       #e5e7eb;   /* hairline divider, 표 보더 */
  --accent:     #1f5eff;   /* 링크 / 강조 (확정 필요) */
  --max-width:  860px;     /* 본문 컬럼 폭 */
  --font-sans:  "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo",
                "Noto Sans KR", sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;          /* readable long-form body */
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
  body {
    font-size: 17px;          /* slightly larger on desktop */
  }
}

/* --------------------------------------------------------------------------
   Centered content column
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Header — minimal wordmark bar
   -------------------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.site-header .container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.brand {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.header-meta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Eyebrow labels — uppercase English, wide letter-spacing
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Page heading block
   -------------------------------------------------------------------------- */
main {
  padding-top: 48px;
  padding-bottom: 64px;
}

.page-title {
  margin: 0 0 8px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}

@media (min-width: 768px) {
  .page-title {
    font-size: 2.5rem;
  }
}

.page-meta {
  margin: 0 0 32px;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Hairline divider
   -------------------------------------------------------------------------- */
.divider,
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

/* --------------------------------------------------------------------------
   Body content — converted markdown (policy text)
   Strong headings, calm body, generous whitespace.
   -------------------------------------------------------------------------- */
.content {
  color: var(--ink);
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  margin: 2em 0 0.6em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.content h1 { font-size: 1.75rem; }
.content h2 { font-size: 1.4rem; padding-bottom: 0.3em; border-bottom: 1px solid var(--line); }
.content h3 { font-size: 1.2rem; }
.content h4 { font-size: 1.05rem; }
.content h5 { font-size: 1rem; }
.content h6 { font-size: 0.9375rem; color: var(--muted); }

.content > :first-child {
  margin-top: 0;
}

.content p {
  margin: 0 0 1.1em;
}

.content ul,
.content ol {
  margin: 0 0 1.1em;
  padding-left: 1.5em;
}

.content li {
  margin: 0.3em 0;
}

.content li > ul,
.content li > ol {
  margin: 0.3em 0;            /* preserve nested-list rhythm */
}

.content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content a:hover {
  text-decoration: none;
}

.content strong {
  font-weight: 700;
}

.content code {
  background: var(--bg-subtle);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

.content blockquote {
  margin: 1.2em 0;
  padding: 0.5em 1.2em;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Tables — horizontal scroll on small screens
   Both an explicit .table-wrap and bare <table> in .content scroll.
   -------------------------------------------------------------------------- */
.table-wrap,
.content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.content table {
  margin: 1.2em 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.content th,
.content td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

.content thead th {
  background: var(--bg-subtle);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Version history list (list.html) — hairline-divided rows
   -------------------------------------------------------------------------- */
.version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.version-item {
  border-bottom: 1px solid var(--line);
}

.version-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  text-decoration: none;
  color: var(--ink);
}

.version-link:hover {
  background: var(--bg-subtle);
}

.version-id {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.version-date {
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Empty state — "이전 버전이 없습니다" */
.empty-state {
  padding: 48px 0;
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Navigation / actions
   -------------------------------------------------------------------------- */
.back-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Footer — concise corporate footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.site-footer .container {
  padding-top: 28px;
  padding-bottom: 28px;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.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;
}

/* --------------------------------------------------------------------------
   Responsive — mobile single column
   The layout is single-column by default; tighten padding on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  main {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .version-link {
    flex-direction: column;
    gap: 4px;
  }
}