/* ===================================================
   SUBEX 이용약관 · 개인정보 처리방침 공용 스타일
   - 비로그인·앱 심사용 독립 정적 페이지라 디자인 시스템 CSS를 불러오지 않고
     같은 이름의 토큰(--subex-*)을 여기서 정의해 사용한다. (값은 subex-design-system.css 기준)
   - ?embed=1 : 상단바·하단 숨김 (모달 iframe / 앱 WebView 용)
=================================================== */
:root{
	--subex-primary:#497fb4;
	--subex-primary-dark:#3a6a99;
	--subex-primary-light:#c9d1e9;
	--subex-accent:#4174d9;
	--subex-title:#2A6DA2;
	--subex-divider:#dddddd;
	--subex-text:#505050;
	--subex-muted:#666;
	--subex-strong:#222;
	--subex-bg:#fff;
	--subex-bg-light:#f4f9fd;
	--subex-grid-text:#4c63a3;
	--subex-radius:3px;
	--subex-radius-lg:5px;
	--terms-width:860px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{
	margin:0;background:var(--subex-bg);color:var(--subex-text);
	font-family:"Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
	font-size:15px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere;
}
a{color:var(--subex-accent)}

/* 상단바 */
.t-top{position:sticky;top:0;z-index:10;background:var(--subex-bg);border-bottom:1px solid var(--subex-divider)}
.t-top-in{max-width:var(--terms-width);margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;gap:20px}
.t-logo img{display:block;height:22px;width:auto}

/* 본문 */
.t-main{max-width:var(--terms-width);margin:0 auto;padding:40px 16px 64px}
.t-head h1{margin:0 0 8px;font-size:26px;line-height:1.35;color:var(--subex-strong);letter-spacing:-.01em}
.t-meta{margin:0;font-size:13px;color:var(--subex-muted)}
.t-lead{margin:24px 0 0;padding:16px 18px;background:var(--subex-bg-light);border-radius:var(--subex-radius-lg)}
.t-lead p{margin:0}
.t-lead p + p{margin-top:8px}

/* 목차 */
.t-toc{margin:28px 0 8px;border:1px solid var(--subex-divider);border-radius:var(--subex-radius-lg)}
.t-toc summary{cursor:pointer;padding:12px 16px;font-weight:700;color:var(--subex-grid-text);list-style:none}
.t-toc summary::-webkit-details-marker{display:none}
.t-toc summary::after{content:"▾";float:right;color:var(--subex-muted)}
.t-toc[open] summary::after{content:"▴"}
.t-toc ol{margin:0;padding:4px 16px 14px;list-style:none;columns:2;column-gap:24px}
.t-toc li{break-inside:avoid;padding:2px 0;font-size:14px}
.t-toc a{color:var(--subex-text);text-decoration:none}
.t-toc a:hover{color:var(--subex-accent);text-decoration:underline}

/* 조항 */
.t-art{padding-top:28px}
.t-art h2{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--subex-divider);font-size:17px;color:var(--subex-title)}
.t-art h3{margin:18px 0 6px;font-size:15px;color:var(--subex-strong)}
.t-art p{margin:6px 0}
.t-art ol,.t-art ul{margin:6px 0;padding-left:1.6em}
.t-art li{margin:3px 0}
.t-art li > ul{margin:4px 0 8px}
.t-art ul{list-style:disc}
.t-art ul ul{list-style:circle}
/* ①②③ 항 : 번호를 글자로 두고 내어쓰기 */
.t-art .t-para{margin:6px 0;padding-left:1.4em;text-indent:-1.4em}
.t-note{color:var(--subex-muted);font-size:14px}

/* 연락처 표 */
.t-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px}
.t-table th,.t-table td{border:1px solid var(--subex-divider);padding:8px 12px;text-align:left;vertical-align:top}
.t-table th{width:30%;background:var(--subex-bg-light);color:var(--subex-grid-text);font-weight:600}

/* 하단 */
.t-foot{border-top:1px solid var(--subex-divider);background:var(--subex-bg-light)}
.t-foot-in{max-width:var(--terms-width);margin:0 auto;padding:20px 16px;font-size:13px;color:var(--subex-muted)}
.t-foot-in p{margin:0}

/* 임베드 (모달 iframe · 앱 WebView) */
.t-embed .t-top,.t-embed .t-foot{display:none}
.t-embed .t-main{padding-top:20px}

@media (max-width:640px){
	body{font-size:15px}
	.t-top-in{gap:12px;height:52px}
	.t-logo img{height:18px}
	.t-main{padding-top:28px}
	.t-head h1{font-size:22px}
	.t-toc ol{columns:1}
	.t-table th{width:38%}
}
@media print{
	.t-top,.t-toc,.t-foot{display:none}
	.t-main{padding:0;max-width:none}
	body{font-size:11pt}
}

/* 버전 선택 (시행된 버전이 2개 이상일 때만 표시) */
.t-ver{margin:10px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.t-ver select{height:30px;padding:0 8px;border:1px solid var(--subex-divider);border-radius:var(--subex-radius);background:var(--subex-bg);color:var(--subex-text);font:inherit}
