/* 커넥션센스 법적 고지 문서 공통 스타일
   docs/legal/ 아래 모든 문서가 이 파일을 공유한다.
   앱 내 WebView 폴백(assets/legal/)에서도 같은 상대경로로 로드된다. */

/* 폰트는 앱과 동일하게 Pretendard로 통일한다(SIL Open Font License 1.1).
   CDN이 아니라 같은 호스팅에 직접 올려 쓴다 — 개인정보처리방침을 읽는
   방문자의 IP가 제3자 CDN에 넘어가지 않게 하기 위함이다. 라이선스 원문은
   fonts/OFL.txt에 함께 둔다.
   굵기는 3종만 올린다: 400 / 600 / 700(이상). 법적 문서에 필요한 위계는
   이 정도로 충분하고, 한글 폰트는 굵기 하나당 750KB 안팎이라 무겁다. */
@font-face{
  font-family:'Pretendard'; font-style:normal; font-weight:400;
  font-display:swap; src:url('fonts/Pretendard-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard'; font-style:normal; font-weight:500 600;
  font-display:swap; src:url('fonts/Pretendard-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard'; font-style:normal; font-weight:700 900;
  font-display:swap; src:url('fonts/Pretendard-Bold.woff2') format('woff2');
}

:root{
  --bg:#F7F8FA; --paper:#FFFFFF; --paper-2:#F1F3F7;
  --border:#E8EBF0; --ink:#171A21; --ink-dim:#5F6673; --ink-faint:#686F7C;
  --brand:#2FA39A; --brand-deep:#1B6B65; --brand-soft:#E6F4F2;
  --warn:#B45309; --warn-soft:#FBF0DA; --warn-border:#E8C67A;
  --good:#17754C;
  --shadow:none;
  --font-ui:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Consolas,monospace;
}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--font-ui); background:var(--bg); color:var(--ink); font-size:15.5px; line-height:1.75; -webkit-font-smoothing:antialiased;}

/* 🚨 링크의 **기본색**이다. 이 줄이 없으면 아래 네 자리(section a · nav.toc a ·
   footer a · .backlink) **밖에 놓인 링크가 브라우저 기본 파랑**으로 뜬다.
   실제로 그렇게 새던 것이 하나 있었다(개정 이력 링크, 추가 981).
   ⚠️ text-decoration 은 **일부러 안 건드린다** — 넣으면 본문 링크 열여섯 개의
   밑줄이 한꺼번에 사라진다. 이 줄이 바꾸는 것은 **79개 중 1개**여야 한다(실측). */
a{color:var(--brand-deep);}

.wrap{max-width:760px; margin:0 auto; padding:56px 24px 96px;}

.masthead{margin-bottom:8px;}
/* 🚨 청록을 **면**으로 한 번 쓰는 자리다. 981 ① 에서 재 보니 법적 고지의 청록은
   면 2 · 테두리 3 뿐이고 나머지는 전부 13px 안팎 작은 글자색이라, 세면 43개인데
   눈에는 안 들어왔다(홈페이지는 면 5 · 테두리 7 · 획 2). 홈페이지 .eyebrow 와
   같은 조리법이다. 🚫 토큰은 안 늘렸다 — --brand-soft 는 이미 있던 것이다.
   대비 실측: #1B6B65 on #E6F4F2 = 5.57 · 어두운 쪽 #2FA39A on #1A2B2C = 4.79 */
.masthead .eyebrow{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-deep); background:var(--brand-soft); padding:5px 12px; border-radius:999px;}
.masthead h1{font-size:28px; font-weight:800; margin:10px 0 6px; text-wrap:balance; letter-spacing:-.01em;}
.masthead .sub{font-size:13.5px; color:var(--ink-faint);}

.backlink{display:inline-block; font-size:12.5px; color:var(--ink-faint); text-decoration:none; margin-bottom:22px;}
.backlink:hover{color:var(--brand-deep);}

/* 대표 홈페이지(connectionsense.co.kr)로 가는 링크와, 법적 고지 안에서
   오가는 기존 .backlink 를 한 줄에 나란히 둘 때 쓴다. .backlink 자체의
   margin-bottom 은 건드리지 않는다 — 다른 곳에서 단독으로 쓸 때 깨지면
   안 되므로, 줄 간격은 이 래퍼가 대신 잡는다. */
.toplinks{display:flex; flex-wrap:wrap; gap:4px 18px; margin-bottom:22px;}
.toplinks .backlink{margin-bottom:0;}

.meta-row{display:flex; gap:18px; flex-wrap:wrap; margin:20px 0 32px; padding:14px 18px; background:var(--paper-2); border:1px solid var(--border); border-radius:10px; font-size:12.5px; color:var(--ink-dim);}
.meta-row b{color:var(--ink); font-weight:700;}

nav.toc{background:var(--paper); border:1px solid var(--border); border-radius:12px; padding:20px 22px; margin-bottom:48px; box-shadow:var(--shadow);}
/* 🚨 --ink-faint 가 아니라 --brand-deep 이다. 목차 상자는 홈페이지 .pcard·.step 과
   조리법이 같은데(--paper + border + radius + shadow) **안에 청록이 하나도 없어서**
   큰 흰 덩어리로 보였다. 홈페이지 .step 이 .num 을 --brand-deep 으로 쓰는 것과 같다.
   대비 실측: #1B6B65 on #FFFFFF = 6.29 · 어두운 쪽 #2FA39A on #212224 = 5.48 */
nav.toc .toc-label{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-deep); margin-bottom:10px;}
nav.toc ol{margin:0; padding:0; list-style:none; columns:2; column-gap:28px;}
nav.toc li{break-inside:avoid; margin-bottom:7px; font-size:13px;}
nav.toc a{color:var(--ink-dim); text-decoration:none; border-bottom:1px solid transparent;}
nav.toc a:hover{color:var(--brand-deep); border-bottom-color:var(--brand-deep);}

section{margin-bottom:40px; scroll-margin-top:24px;}
section h2{display:flex; align-items:baseline; gap:10px; font-size:17px; font-weight:800; margin:0 0 14px; letter-spacing:-.005em;}
section h2 .n{font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--brand-deep); flex:none;}
section h3{font-size:14.5px; font-weight:700; margin:22px 0 8px;}
section p{margin:0 0 12px; color:var(--ink);}
section ul, section ol.legal{margin:0 0 12px; padding-left:22px;}
section li{margin-bottom:6px;}
/* 🚨 `section .note` 가 아니라 `.note` 다 — 목차 위의 안내 문단 하나가
   <section> **밖**에 있어서 이 규칙을 통째로 못 받고 본문 크기(15.5px)로 떠 있었다.
   넓혀도 새로 걸리는 것은 **그 하나뿐**이다(실측: 안 55 · 밖 1). */
.note{font-size:13px; color:var(--ink-faint);}
section a{color:var(--brand-deep);}

.field-table{width:100%; border-collapse:collapse; margin:14px 0 18px; font-size:13.5px;}
.field-table th{text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding:8px 12px; border-bottom:1px solid var(--border); background:var(--paper-2); white-space:nowrap;}
.field-table td{padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
.field-table tr:last-child td{border-bottom:none;}
.field-table td:first-child{font-weight:600; width:26%;}
.field-table.wide td:first-child{width:auto; white-space:normal;}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:10px; background:var(--paper); box-shadow:var(--shadow); margin:14px 0 18px;}
.table-wrap .field-table{margin:0; min-width:520px;}
.table-wrap .field-table th:first-child, .table-wrap .field-table td:first-child{padding-left:16px;}

.callout{border-radius:10px; padding:16px 18px; font-size:13.5px; line-height:1.7; border:1px solid; margin:14px 0;}
.callout.info{background:var(--brand-soft); border-color:var(--brand); color:var(--ink);}
.callout.good{background:color-mix(in srgb, var(--good) 12%, var(--paper)); border-color:var(--good); color:var(--ink);}
.callout.warn{background:var(--warn-soft); border-color:var(--warn-border); color:var(--ink);}
.callout b{font-weight:800;}

.pill{display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--brand-soft); color:var(--brand-deep); margin-right:6px;}
.pill.no{background:color-mix(in srgb, var(--good) 15%, var(--paper)); color:var(--good);}
.pill.opt{background:var(--paper-2); color:var(--ink-dim);}

.doc-list{list-style:none; margin:0; padding:0;}
.doc-list li{margin-bottom:12px;}
.doc-list a{display:block; padding:16px 18px; background:var(--paper); border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow);}
.doc-list a:hover{border-color:var(--brand);}
.doc-list .t{font-size:15px; font-weight:700; margin-bottom:3px;}
.doc-list .d{font-size:12.5px; color:var(--ink-faint); line-height:1.6;}

.article{margin-bottom:26px;}
.article h3{font-size:14.5px; font-weight:700; margin:0 0 8px;}
.article h3 .no{font-family:var(--font-mono); font-size:12.5px; color:var(--brand-deep); margin-right:8px;}
.article ol.clause{margin:0; padding-left:20px;}
.article ol.clause > li{margin-bottom:7px;}
.article ol.sub{margin:6px 0 0; padding-left:20px; list-style:lower-roman; font-size:14.5px; color:var(--ink-dim);}

footer{margin-top:56px; padding-top:20px; border-top:1px solid var(--border); font-size:11.5px; color:var(--ink-faint); line-height:1.8;}
footer .biz{margin-bottom:10px; color:var(--ink-dim);}
footer .biz b{color:var(--ink);}
footer a{color:var(--ink-faint);}

@media (max-width:600px){
  .wrap{padding:36px 18px 72px;}
  nav.toc ol{columns:1;}
  .field-table td:first-child{width:auto;}
}

/* 🚨 표 상자의 **오른쪽을 연다**. 958 에서 폴드 커버 화면(411.4dp)으로 재 보니
   표는 손가락으로 잘 밀렸는데(7열 중 2열만 보이다 밀면 다음 열이 들어왔다),
   **밀 수 있다는 표시가 하나도 없었다.** 그 정도가 아니라 반대로 말하고 있었다 —
   .table-wrap 의 border·background·box-shadow 가 **안 밀리는** nav.toc·.doc-list a 와
   전부 같고, 좌우 테두리가 둘 다 화면 안(17.1dp~392.8dp)에 있어 **양쪽이 깔끔하게
   닫힌 평범한 카드**로 보였다.
   🚫 가장자리 페이드는 927 §9(그라데이션 0건)와 부딪치고, 스크롤바 상시 표시는
      안드로이드 WebView 에서 실제로 그려지는지를 또 재야 한다. 이것은 **잴 것이 없고
      토큰도 안 늘린다** — 구조로 「여기서 끝난 게 아니다」를 말한다.

   🚨 **555 는 빌려 온 숫자가 아니라 계산한 값이다. 산식을 그대로 남긴다:**

       .table-wrap 은 블록이라  상자 안쪽 폭 = .wrap 안쪽 폭
       .wrap 은 600px 이하에서  좌우 여백 18px  →  안쪽 = 화면폭 − 36
       표는 그 안에서           min-width: 520px
       ⇒ 모든 표가 **반드시** 넘치는 조건:  화면폭 − 36 < 520  →  화면폭 < 556
       ⇒ 그래서 max-width:555px 다.

   ⚠️ **`min-width:520px` 이나 `.wrap` 여백을 바꾸면 이 555 도 같이 바꿔야 한다.**
      (`test/web_color_tokens_test.dart` 가 이 산식을 잠그고 있다.)

   ⬜ **555 위에서는 CSS 로 가를 수 없다.** 그 위에서도 7열 국외이전 표처럼 자연폭이
      큰 것은 여전히 넘치는데, **어느 표가 넘치는지는 표마다 달라** 선택자로 구분할
      방법이 없다. 즉 **넓은 화면의 넓은 표는 이 표시를 못 받는다** — 미지수가 아니라
      **가를 수 없는 자리**다. 그 대신 **반대쪽 사고(안 넘치는 표의 테두리가 이유 없이
      사라지는 것)를 막는 쪽**을 골랐다. */
@media (max-width:555px){
  .table-wrap{border-right:none; border-radius:10px 0 0 10px;}
}

/* 확정 화면 모형 925: 홈페이지와 동일한 문서 위계. */
a{color:var(--brand-deep)}
.masthead .sub,.backlink,nav.toc .toc-label,section .note,.field-table th,.doc-list .d,footer,footer a{color:var(--ink-dim)}
.wrap{max-width:960px;padding-left:24px;padding-right:24px}
.masthead h1{font-weight:600;letter-spacing:-.025em}
.masthead .eyebrow{color:var(--ink-dim)}
h2,h3,strong,b{font-weight:600}
body{line-height:1.85}
section{box-shadow:none}
a.backlink.home{display:inline-flex;align-items:center;gap:10px}
.backlink svg{width:28px;height:28px}
.doc-list li a{border-radius:8px;box-shadow:none}
table{font-size:14px}
footer{border-top:1px solid var(--border)}
.callout,.note,.warn{box-shadow:none}
 @media(max-width:420px){.wrap{padding-left:16px;padding-right:16px}
table{font-size:12px}
}
:root{color-scheme:light}