@charset "utf-8";
/* Info
 ========================================================================== */
/**
    * 1. Writer: Inseon Choi., Hyerin Lim (Weaverloft Corp.)
    * 2. Production Date: 2025-09
    * 3. Client: supplAI FLO
========================================================================== */

/* ======  공통 ====== */
/* 🔻 2026-10-09 (#1603) ~~max-width: 1200px~~ → 720. 본문 한 줄이 약 1160px 로 길어 읽는 줄이 끊겼다. 읽기 폭 720 을 가운데에 둔다 */
.policy-sec {width: 100%; max-width: 720px; margin: 74px auto 160px;}

/* ====== 이용약관, 개인정보처리방침 ====== */
.policy-sec.terms-sec > * { color: var(--text-color-2); line-height: 1.6;}
.policy-sec.terms-sec .txt-700 {font-weight: 700;}
.policy-sec.terms-sec .txt-600 {font-weight: 600;}
.policy-sec.terms-sec .terms-header {position: relative; padding-bottom: 60px; margin-bottom: 90px; border-bottom: 1px solid var(--border-color-d); text-align: center; word-break: keep-all;}
/* 🔻 2026-10-09 (#1603) 제목이 쪽의 `h1` 이 됐다(머리 로고가 `h1` 이던 것을 걷었다). 두 꼴을 함께 잡는다 */
.policy-sec.terms-sec .terms-header :is(h1, h2) {padding-bottom: 85px; font-size:32px; font-weight:700; line-height: 1;}
/* 🔻 2026-10-09 (#1603) ~~500~~ → 400. 보통 문단은 보통 굵기다. 제목 · `.txt-700` · `.txt-600` 강조는 그대로 */
.policy-sec.terms-sec .terms-header > p {font-weight: 400;}
/*
 | 🔻 2026-10-09 (#1603) ~~position: absolute; left: auto; right: 0; top: 0;~~ → 제목 아래 제 줄, 가운데.
 |    오른쪽 위에 떠 있어 제목이 읽기 칸 가운데에서 왼쪽으로 밀려 보였다. 시행일이 붙은 제목은 아래 여백을 줄이고
 |    그 몫을 시행일 아래로 옮긴다(제목과 안내 글 사이 간격은 그대로).
 */
.policy-sec.terms-sec .terms-header .terms-datetime {position: static; width: 193px; margin: 0 auto clamp(30px, 6.35vw, 65px); padding: 11px 6px; background: var(--bg-color); border-radius:6px; line-height: 1; text-align: center;}
.policy-sec.terms-sec .terms-header :is(h1, h2):has(+ .terms-datetime) {padding-bottom: 20px;}
.policy-sec.terms-sec .terms-header .terms-datetime time { font-size: 14px; font-weight:700; color: var(--text-color-5); line-height: 1;}
/* 🔻 2026-10-09 (#1603) 본문 굵기 ~~600~~ → 400. 거의 모든 문단이 굵어 강조(`.txt-600`)가 눈에 띄지 않았다 */
.policy-sec.terms-sec .terms-article {margin-bottom: 60px;font-size:16px; font-weight:400;}
.policy-sec.terms-sec .terms-article:last-child {margin-bottom: 0;}
/* 🔻 2026-10-14 (#1730 P-09) ~~`.terms-article h3`~~ → `:is(h2, h3)`. 쪽 제목(h1) 바로 아래 조항 제목이 h3 이라 한 단계를 건너뛰었다. 조항 제목은 h2 이고 모양은 그대로다(#1603 머리의 `:is(h1, h2)` 와 같은 처리) */
.policy-sec.terms-sec .terms-article :is(h2, h3) {margin-bottom: 26px; font-size:26px; font-weight:700;line-height: 1;}
/* 🔻 2026-10-09 (#1603) ~~600~~ → 400 */
.policy-sec.terms-sec .terms-article .terms-desc {margin-bottom: 20px; font-weight: 400;}
.policy-sec.terms-sec .terms-article ol > li {margin-bottom: 16px;}
.policy-sec.terms-sec .terms-article ol > li:last-child {margin-bottom: 0;}
.policy-sec.terms-sec .terms-article ol > li > .sub-list { padding-left: 16px; margin-top: 16px;}
.policy-sec.terms-sec .terms-article ol > li > .sub-list.nopadding { padding-left: 0px;}
.policy-sec.terms-sec .terms-article ol > li > .sub-list + p {padding-left: 16px; margin-top: 16px;}
/* 🔻 2026-10-09 (#1603) ~~font-weight:500~~ → 400 */
.policy-sec.terms-sec .terms-article ol > li > .sub-list > li{ display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--text-color-5); font-weight:400;}
.policy-sec.terms-sec .terms-article ol > li > .sub-list > li:not(.sub-list-tit, .sub-desc):before {content: ''; display: inline-block; background: var(--text-color-5); width: 4px;min-width: 4px;height: auto; aspect-ratio: 1/1; border-radius: 50%;}
.policy-sec.terms-sec .terms-article ol > li > .sub-list > li:last-child {margin-bottom: 0;}
.policy-sec.terms-sec .terms-article ol > li > .sub-list > li.sub-desc-tit {margin-bottom:10px;line-height: 1;}
.policy-sec.terms-sec .terms-article ol > li > .sub-list > li.sub-desc{padding-left: 16px; margin-bottom: 0;}
@media screen and (max-width: 1260px) {
    /* 🔻 2026-10-09 (#1603) 안여백이 붙는 폭에서도 읽기 폭은 720 이다(720 + 양쪽 30) */
    .policy-sec {max-width: 780px; padding: 0 30px;}
    .policy-sec.terms-sec .terms-header > p br {display: none;}
}
/*
 | 🆕 2026-10-09 (#1603) 개인정보 처리 위탁 표는 자기 감싸개 안에서 가로로 흐른다(R-308).
 |    390 에서 네 열이 약 90px 씩으로 눌려 낱말 중간에서 줄이 바뀌었다. 최소 폭 560 을 준다.
 */
.policy-sec .policy-table-wrap {overflow-x: auto;}
.policy-sec .policy-table-wrap .common-table {min-width: 560px;}
@media screen and (max-width: 1024px) {
    .policy-sec.terms-sec > * { line-height: 1.3;}
    .policy-sec {margin: clamp(30px, 7.227vw, 74px) auto clamp(100px, 15.625vw, 160px); padding: 0 clamp(16px, 2.93vw, 30px);}
    .policy-sec.terms-sec .terms-header { padding-bottom: clamp(30px, 5.859vw, 60px); margin-bottom: clamp(40px, 8.789vw, 90px);}
    /* 🔻 2026-10-09 (#1603) `h1` 도 함께 잡는다 */
    .policy-sec.terms-sec .terms-header :is(h1, h2) {padding-bottom: clamp(50px, 8.301vw, 85px); font-size:clamp(24px, 3.125vw, 32px); }
    .policy-sec.terms-sec .terms-header > p {font-size: clamp(14px, 1.563vw, 16px);}
    .policy-sec.terms-sec .terms-header .terms-datetime { width: clamp(164px, 18.848vw, 193px); padding: 0.6875em 0.375em; border-radius:clamp(3px, 0.586vw, 6px);}
    /* 🔻 2026-10-01 (#1551) 12px → 13px 하한 · 「시행일: …」 이 실제 글자다 */
    .policy-sec.terms-sec .terms-header .terms-datetime time { font-size: clamp(13px, 1.367vw, 14px);}
    .policy-sec.terms-sec .terms-article {margin-bottom: clamp(40px, 5.859vw, 60px);font-size:clamp(14px, 1.563vw, 16px);}
    .policy-sec.terms-sec .terms-article :is(h2, h3) {margin-bottom: 1em; font-size:clamp(21px, 2.539vw, 26px); }
    .policy-sec.terms-sec .terms-article .terms-desc {margin-bottom: clamp(16px, 1.953vw, 20px); }
    .policy-sec.terms-sec .terms-article ol > li {margin-bottom: 1em;}
    .policy-sec.terms-sec .terms-article ol > li > .sub-list { padding-left: clamp(10px, 1.563vw, 16px); margin-top: clamp(6px, 1.563vw, 16px);}
    .policy-sec.terms-sec .terms-article ol > li > .sub-list > li{ align-items: flex-start; gap: 0.5em; margin-bottom: clamp(6px, 1.563vw, 16px); }
    .policy-sec.terms-sec .terms-article ol > li > .sub-list > li:not(.sub-list-tit, .sub-desc):before {transform: translateY(7px);}
    .policy-sec.terms-sec .terms-article ol > li > .sub-list > li.sub-desc-tit {margin-bottom:0.625em;line-height: 1.2;}
    .policy-sec.terms-sec .terms-article ol > li > .sub-list > li.sub-desc{padding-left: 1em; }
}
@media screen and (max-width: 767px) {
    .policy-sec.terms-sec > * { word-break: keep-all;}
    .policy-sec.terms-sec .terms-article :is(h2, h3) {font-size:clamp(18px, 2.738vw, 21px); line-height: 1.2;}
    .policy-sec.terms-sec .terms-article ol > li > .sub-list > li:not(.sub-list-tit, .sub-desc):before {width: 3px;min-width: 3px;}
}
@media screen and (max-width: 640px) {
    /* 🔻 2026-10-09 (#1603) `h1` 도 함께 잡는다 */
    .policy-sec.terms-sec .terms-header :is(h1, h2){padding-bottom: 30px;}
    /* 🔻 2026-10-09 (#1603) ~~position: static; width: 100%; margin-top: 20px;~~ 넓은 폭도 제목 아래 가운데 한 줄이 되어 이 폭만의 규칙이 필요 없다 */
}