/* 법적 고지 3종(개인정보처리방침·이용약관·사업자 정보) — 다른 서비스의 legal 조판을 그대로
   옮겨온 판박이 구성(사용자 지시, 2026-08-28). 구조·간격·타이포·연출은 손대지 않고 색만
   이 사이트 팔레트로 바꿔 끼운다.
   원본: sfx-trim/static/css/style.css의 "법적 고지 페이지" 블록
        → hello-word/static/css/legal.css → technologia-tool/static/css/legal.css */

.legal-page {
  /* tokens.css의 사이트 색을 그대로 받아 원본의 역할 이름에 대응시킨다.
     ★ var()로 참조하지 않고 값을 박는다 — --bg·--accent는 theme.js가 무대에서 매 프레임
     덮어쓰는 자리라, 참조해 두면 문서 페이지 색이 무대 진행에 끌려다닌다. */
  /* 2026-09-09 사용자 지시로 사이트 고유 색이 딥 라벤더→스카이블루~아쿠아로 바뀌어 같이
     옮긴다(tokens.css·config.js THEMES.intro와 동일 계열, 파생 비율도 그 주석 참고). */
  --color-bg: #F4F9FB;
  --color-bg-alt: #EAF4F7;
  --color-surface: #FFFFFF;
  --color-border: #D9EBF0;
  --color-border-strong: #ADD4DF;

  --color-primary: #0E80A1;
  --color-primary-dark: #066581;
  --color-primary-bright: #3695B0;

  /* 원본에서 보조 강조로 쓰던 자리 — 같은 역할의 스카이블루~아쿠아 계열로 대응시킨다 */
  --color-accent-soft: #69B0C4;
  --color-accent-bg: #EAF4F7;
  --color-accent-ink: #066581;

  --color-text: #0F172A;
  --color-text-muted: #475569;
  /* 목차 라벨 한 곳에만 쓴다 — 원본 값(#64748B)은 이 사이트 배경(#F5F7FF)에서 4.45:1로
     본문 기준 4.5:1에 못 미쳐 한 단계 어둡게 잡았다(실측 5.0:1) */
  --color-text-faint: #5C6B80;

  --legal-radius: 10px;
  --legal-pill: 999px;
  --legal-shadow: 0 4px 16px -4px rgba(7, 124, 158, 0.14);
  --legal-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* 배경은 칠하지 않는다 — body의 --bg와 오로라가 이 사이트의 바탕이고,
     여기서 불투명하게 덮으면 다른 화면과 배경이 달라진다. */
  color: var(--color-text);
  line-height: 1.6;
}

/* 원본의 문서 폭·여백 규칙(.content)과 같은 값 */
.legal-page .content {
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

@keyframes legal-focus-in {
  0%   { opacity: 0; filter: blur(5px); transform: translateY(14px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes legal-target {
  0% { opacity: 0; }
  12% { opacity: 1; }
  62% { opacity: 1; }
  100% { opacity: 0; }
}

html:has(.legal-content) { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html:has(.legal-content) { scroll-behavior: auto; }
}

/* ---- 문서 뼈대 ----
   본체는 class="content legal-content"라 위의 .legal-page .content(선택자 2개)가
   .legal-content(1개)를 이겨 세로 패딩을 0으로 되돌린다. 같은 선택자 수로 올려 되찾는다. */
.legal-page .legal-content {
  max-width: 940px;
  padding-top: 132px; /* 고정 헤더(top 22px + 높이 34px) 아래로 내린다 */
  padding-bottom: 120px;
}

.legal-doc { animation: legal-focus-in 0.5s var(--legal-ease) both; }

/* 진입 연출은 여기서 끈다 — 위 선언보다 뒤에 와야 같은 특이도에서 이긴다 */
@media (prefers-reduced-motion: reduce) {
  .legal-doc { animation: none; }
}

/* ---- 표제부 ---- */
.legal-head {
  padding-bottom: 40px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--color-border);
}

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
}

.legal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-bright), var(--color-accent-soft));
}

.legal-title {
  margin: 0;
  font-size: clamp(1.75rem, 1.15rem + calc(2.6 * var(--vw)), 2.6rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--color-primary-dark);
}

.legal-lead {
  margin: 24px 0 0;
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.75;
  text-wrap: pretty;
  color: var(--color-text-muted);
}

.legal-note {
  margin: 20px 0 0;
  padding: 12px 16px;
  max-width: 62ch;
  border-left: 3px solid var(--color-accent-soft);
  border-radius: 0 var(--legal-radius) var(--legal-radius) 0;
  background: var(--color-accent-bg);
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--color-accent-ink);
}

/* ---- 본문 2단 (목차 + 조항) ---- */
.legal-body { display: block; }

/* ---- 목차 ---- */
.legal-toc { display: none; }

.legal-toc-label {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--color-text-faint);
}

.legal-toc-list {
  counter-reset: toc;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-toc-list li { margin-bottom: 2px; }

.legal-toc-list a {
  display: flex;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--legal-radius);
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  text-decoration: none;
  transition-property: color, background-color;
  transition-duration: 150ms;
  transition-timing-function: var(--legal-ease);
}

.legal-toc-list a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-border-strong);
  transition: color 150ms var(--legal-ease);
}

.legal-toc-list a:hover,
.legal-toc-list a:focus-visible {
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
}

.legal-toc-list a:hover::before,
.legal-toc-list a:focus-visible::before { color: var(--color-primary); }

/* ---- 조항 ---- */
.legal-sections { counter-reset: sec; }

.legal-section {
  position: relative; /* 강조 레이어(.is-targeted::after)의 기준 */
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--color-border);
  /* 헤더가 고정이라 목차로 점프할 때 제목이 그 밑에 가려지는 것을 막는다 */
  scroll-margin-top: 88px;
}

.legal-section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* 목차로 이동한 뒤 그 조항을 한 번 감싸듯 강조한다("이 부분입니다" 신호).
   조항 자체에 배경을 주지 않고 별도 레이어로 그린다 — 조항이 구분선을 직접 갖고 있어
   배경을 칠하면 그 선까지 어두워지기 때문이다. */
.legal-section.is-targeted::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -18px;
  right: -18px;
  top: -16px;
  bottom: 14px; /* 자기 구분선 위에서 멈춘다(패딩 36px 안쪽) */
  border-radius: 10px;
  background-color: var(--color-bg-alt);
  animation: legal-target 1.5s var(--legal-ease) both;
}

.legal-section:last-child.is-targeted::after { bottom: -16px; }

/* 움직임을 줄이기로 한 사용자에게도 "어느 조항인지"는 전달해야 하므로 연출만 뺀다 */
@media (prefers-reduced-motion: reduce) {
  .legal-section.is-targeted::after { animation: none; opacity: 1; }
}

.legal-section-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--color-text);
}

.legal-section-title::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

.legal-section p {
  margin: 0 0 12px;
  max-width: 62ch;
  line-height: 1.78;
  text-wrap: pretty;
  color: var(--color-text-muted);
}

.legal-section p:last-child { margin-bottom: 0; }

.legal-list {
  margin: 0;
  padding: 0;
  max-width: 62ch;
  list-style: none;
}

.legal-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  line-height: 1.75;
  text-wrap: pretty;
  color: var(--color-text-muted);
}

.legal-list li:last-child { margin-bottom: 0; }

/* 기본 불릿 대신 브랜드 톤의 작은 마커 — 목록이 문단과 뚜렷이 구분된다 */
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-primary);
  opacity: 0.55;
}

/* 문의처를 글자로 적는 대신 누를 수 있는 대상으로 둔다 */
.legal-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  /* 이 문서의 유일한 조작 대상이라 터치 대상 44px를 반드시 채운다 */
  padding: 13px 20px;
  min-height: 44px;
  border-radius: var(--legal-pill);
  /* .cta(components.css)와 같은 회사 구간 톤 — 흰 글자 대신 짙은 잉크로 바꿔 배경을
     연하게 낮췄다(사용자 지시 — 메인 색테마 30% 수준, 2026-09-10). 이후 배경만 더
     흰색에 가깝게 재조정(같은 날, 사용자 지시 — 파란 톤이 살짝만 도는 정도). */
  background: #E7F2F6;
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--legal-shadow);
  transition-property: background-color, transform;
  transition-duration: 150ms;
  transition-timing-function: var(--legal-ease);
}

.legal-cta:hover,
.legal-cta:focus-visible {
  background: #D4E8EE;
  transform: translateY(-1px);
}

.legal-cta svg { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .legal-cta:hover, .legal-cta:focus-visible { transform: none; }
}

/* ---- 표 ---- */
.legal-table-wrap {
  margin: 18px 0 24px;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--legal-radius);
  background: var(--color-surface);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.legal-table th,
.legal-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  vertical-align: top;
}

.legal-table th {
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-weight: 700;
  white-space: nowrap;
}

.legal-table tr:last-child th,
.legal-table tr:last-child td { border-bottom: 0; }

/* ---- 본문 안 링크·강조 ---- */
.legal-section a:not(.legal-cta) {
  color: var(--color-primary);
  /* 인라인 링크의 세로 터치 여유(WCAG 2.5.8) — 줄 간격을 밀지 않게 음수 마진으로 되돌린다 */
  padding-block: 5px;
  margin-block: -5px;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  transition-property: color, border-color;
  transition-duration: 150ms;
  transition-timing-function: var(--legal-ease);
}

.legal-section a:not(.legal-cta):hover,
.legal-section a:not(.legal-cta):focus-visible {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary-dark);
}

.legal-section strong { color: var(--color-text); font-weight: 700; }

/* ---- 문서 전환 ----
   목차 링크와 같은 결로 두되, 조항이 아니라 형제 문서라서 본문 아래 한 줄로 나란히 놓는다. */
.legal-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.legal-sibling {
  padding-block: 5px;
  margin-block: -5px;
  font-size: 0.86rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 150ms var(--legal-ease);
}

a.legal-sibling:hover,
a.legal-sibling:focus-visible { color: var(--color-primary-dark); }

.legal-sibling.is-current {
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* ---- 목차를 고정 사이드바로 ----
   예전에는 1024px 이상에서만 걸었지만, 화면이 1280px 틀 아래로 줄지 않으므로 늘 건다. */
.legal-body {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.legal-toc {
  display: block;
  position: sticky;
  top: 88px;
}

/* ---- 인쇄 ----
   ★ 화면 규칙은 위에서 끝났다. 여기 있는 것은 전부 @media print 안이라 화면에는
   아무 영향이 없다. 약관·방침을 종이나 PDF로 남기려는 사람이 대상이고, 조작 대상과
   배경 연출을 걷어내 본문만 남긴다. 선택자를 legal 화면으로 한정해 다른 페이지의
   인쇄 결과는 지금 그대로 둔다. */
@media print {
  html:has(.legal-content) .site-header,
  html:has(.legal-content) .aurora,
  html:has(.legal-content) .skip-link,
  .legal-page .legal-toc,
  .legal-page .legal-cta,
  .legal-page .legal-siblings { display: none; }

  html:has(.legal-content), html:has(.legal-content) body {
    background: #fff;
    color: #000;
  }

  .legal-page .legal-content {
    max-width: none;
    padding: 0;
  }

  .legal-doc { animation: none; }

  /* 본문 폭 제한(62ch)은 화면용이다 — 종이에서는 한 줄이 짧아져 장수만 늘어난다 */
  .legal-lead,
  .legal-section p,
  .legal-list,
  .legal-note { max-width: none; }

  .legal-title,
  .legal-section-title,
  .legal-section-title::before,
  .legal-eyebrow { color: #000; }

  .legal-lead,
  .legal-section p,
  .legal-list li,
  .legal-table td { color: #1a1a1a; }

  .legal-list li::before { background: #000; opacity: 1; }

  /* 조항 제목만 남고 본문이 다음 장으로 넘어가는 것을 막는다 */
  .legal-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .legal-note {
    background: none;
    border-left: 2px solid #000;
    color: #1a1a1a;
  }

  .legal-table-wrap {
    overflow: visible;
    background: none;
  }

  .legal-table th { background: none; }

  /* 종이에서는 누를 수 없으니 주소를 글자로 남긴다 */
  .legal-section a:not(.legal-cta)::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #333;
  }
}