/*------------------------------------------------------
· apmedia Ver 2.0
· Type : privacy.css (개인정보처리방침 페이지 전용 — 라이트 에디토리얼 · 화이트/레드)
· Author : Albatrosss Pictures
· Data : 2026-07-09
· Copyright @ 2026 apmedia all rights reserved
---------------------------------------------------------
· NOTE: 모든 룰을 .apmedia-privacy 래퍼 하위로 스코프. custom.css / contents.css 미수정.
·       contact.css 와 동일 기법 — .apmedia-privacy 안에서 custom.css :root 의 다크 토큰(--color-white*)을
·       라이트 잉크(#141414 계열)로 재매핑 → 흰 배경 + 다크 텍스트 전환.
·       레드 --signature-color 는 조항 번호/강조 액센트로만 유지.
· 구조 : 1) 스코프 토큰  2) HERO(헤드라인 + 시행일)  3) BODY(좌 sticky 목차 · 우 조항 본문)  4) 반응형
· 별도 파일(4대 관리 파일명 아님) → code_quality_check 규칙13(파일분류) 미적용. 클래스 전부 apmedia-privacy- prefix.
---------------------------------------------------------*/

@charset "utf-8";

/* #################### 01. Wrapper + 스코프 토큰(다크→라이트 재매핑) #################### */
.apmedia-privacy {
    --apmedia-privacy-sec-pad: clamp(5rem, 9vw, 10rem);
    --apmedia-privacy-gap-xl: clamp(3.5rem, 7vw, 6.5rem);
    --apmedia-privacy-col-gap: clamp(3rem, 6vw, 7rem);
    --apmedia-privacy-article-gap: clamp(2.75rem, 5vw, 4.5rem);
    --apmedia-privacy-block-gap: clamp(1rem, 1.6vw, 1.5rem);
    --apmedia-privacy-head-fs: clamp(2.5rem, 5vw + 0.5rem, 5rem);
    --apmedia-privacy-lead-w: clamp(20rem, 46vw, 42rem);
    --apmedia-privacy-num-fs: clamp(1rem, 1.2vw + 0.2rem, 1.25rem);
    --apmedia-privacy-title-fs: var(--fs-t-h4);
    --apmedia-privacy-toc-top: calc(var(--header-height) + var(--space-2xl));
    --apmedia-privacy-toc-pad: clamp(1.25rem, 3vw, 2rem);     /* 20~32px — 팝업 목차 박스 안쪽 4방향 균일 패딩 */
    --apmedia-privacy-lh-trim: -0.13em;                       /* 첫 줄 위 line-height 여백 상쇄(글자 기준 여백 맞춤) */
    --apmedia-privacy-radius: var(--radius-sm);
    --apmedia-privacy-cell-py: clamp(0.7rem, 0.9vw, 0.95rem);
    --apmedia-privacy-cell-px: clamp(0.85rem, 1.2vw, 1.25rem);
    /* 다크 토큰 → 라이트 잉크 재매핑 (흰 배경 위 다크 텍스트) — 잉크 RGB 단일 소스 */
    --privacy-ink-rgb: 20, 20, 20;
    --privacy-line: rgba(var(--privacy-ink-rgb), 0.14);
    --privacy-line-strong: rgba(var(--privacy-ink-rgb), 0.24);
    --privacy-fill: rgba(var(--privacy-ink-rgb), 0.03);
    --privacy-fill-head: rgba(var(--privacy-ink-rgb), 0.06);
    --color-white: #141414;
    --color-white-80: rgba(var(--privacy-ink-rgb), 0.82);
    --color-white-70: rgba(var(--privacy-ink-rgb), 0.72);
    --color-white-60: rgba(var(--privacy-ink-rgb), 0.6);
    --color-white-50: rgba(var(--privacy-ink-rgb), 0.5);
    --color-white-40: rgba(var(--privacy-ink-rgb), 0.42);
    /* 히어로 다크 밴드(About 히어로 프레임 통일) — 이 섹션만 다크, 본문은 라이트 유지 */
    --apmedia-privacy-hero-bg: #0d0d0f;
    --apmedia-privacy-hero-ink: #ffffff;
    --apmedia-privacy-hero-sub: rgba(255, 255, 255, 0.72);
    --apmedia-privacy-hero-line: rgba(255, 255, 255, 0.22);
    --apmedia-privacy-hero-lead-fs: clamp(1.1875rem, 1vw + 0.8rem, 1.625rem);
    /* 히어로 지오메트리는 공통 .apmedia-subhero(basic.css)가 담당. gap 만 페이지별 */
    --apmedia-privacy-hero-gap: var(--subhero-title-gap);
    position: relative;
    background: var(--background-color);
    color: var(--color-white);
    overflow: hidden;
}

/* #################### 02. HERO (about 프레임 통일 — full 100vh · 세로 중앙 정렬 · 헤드라인 + 리드 + 시행일 메타) #################### */
/* 지오메트리(min-height·flex·padding·상단앵커)는 공통 .apmedia-subhero(basic.css)가 담당. 여기선 배경/색만 */
.apmedia-privacy .apmedia-privacy-hero { background: var(--apmedia-privacy-hero-bg); color: var(--apmedia-privacy-hero-ink); }
.apmedia-privacy .apmedia-privacy-hero-inner { display: flex; flex-direction: column; gap: var(--apmedia-privacy-hero-gap); }
.apmedia-privacy .apmedia-privacy-headline { font-size: var(--fs-t-display-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--apmedia-privacy-hero-ink); word-break: keep-all; text-wrap: balance; margin: 0; }
.apmedia-privacy .apmedia-privacy-lead { width: min(var(--apmedia-privacy-lead-w), 100%); font-size: var(--apmedia-privacy-hero-lead-fs); font-weight: var(--fw-light); line-height: var(--lh-relaxed); color: var(--apmedia-privacy-hero-ink); word-break: keep-all; margin-top: 0; }
.apmedia-privacy .apmedia-privacy-meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-md); margin-top: 0; }
.apmedia-privacy .apmedia-privacy-meta-item { padding: var(--space-xs) var(--space-md); border: var(--line-thin) solid var(--apmedia-privacy-hero-line); border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: var(--ls-snug); color: var(--apmedia-privacy-hero-sub); }
.apmedia-privacy .apmedia-privacy-meta-item strong { color: var(--apmedia-privacy-hero-ink); font-weight: var(--fw-semibold); }

/* #################### 03. BODY — 좌 sticky 목차 · 우 조항 본문 #################### */
.apmedia-privacy .apmedia-privacy-body { padding: 0 0 var(--apmedia-privacy-sec-pad); }
.apmedia-privacy .apmedia-privacy-grid { display: flex; flex-direction: row; align-items: flex-start; gap: var(--apmedia-privacy-col-gap); }

/* 03-a. LEFT — sticky 목차 */
.apmedia-privacy .apmedia-privacy-toc { flex: 3 1 0; position: sticky; top: var(--apmedia-privacy-toc-top); display: flex; flex-direction: column; gap: var(--space-sm); }
.apmedia-privacy .apmedia-privacy-toc-title { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-loose); text-transform: uppercase; color: var(--color-white-40); margin-bottom: var(--space-xs); }
.apmedia-privacy .apmedia-privacy-toc-link { display: flex; flex-direction: row; align-items: baseline; gap: var(--space-sm); font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--color-white-60); word-break: keep-all; transition: color var(--transition-base); }
.apmedia-privacy .apmedia-privacy-toc-link span { flex: 0 0 auto; font-family: var(--set-font-en); font-weight: var(--fw-semibold); color: var(--color-white-40); transition: color var(--transition-base); }
@media (hover: hover) { .apmedia-privacy .apmedia-privacy-toc-link:hover { color: var(--signature-color); } .apmedia-privacy .apmedia-privacy-toc-link:hover span { color: var(--signature-color); } }
/* 터치 기기에서 목차 링크 높이가 21px 라 손가락으로 정확히 누르기 어렵다(실측 253x21).
   baseline 정렬은 번호와 제목의 첫 줄을 맞추려는 것인데, 높이를 44px 로 올리면 글자가
   위로 붙어 보이므로 center 로 바꾼다 — 폰트 크기가 같아 번호·제목 정렬은 그대로 유지된다. */
@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
    .apmedia-privacy .apmedia-privacy-toc-link { min-height: var(--size-touch-min); align-items: center; }
    /* 메인·Contact 폼의 「개인정보처리방침」 동의 링크 — 본문에 인라인으로 얹혀 22px 밖에 안 된다 */
    .apmedia-privacy-open { display: inline-flex; align-items: center; min-height: var(--size-touch-min); }
}

/* 03-b. RIGHT — 조항 본문 */
.apmedia-privacy .apmedia-privacy-articles { flex: 8 1 0; display: flex; flex-direction: column; gap: var(--apmedia-privacy-article-gap); }
.apmedia-privacy .apmedia-privacy-article { scroll-margin-top: var(--apmedia-privacy-toc-top); display: flex; flex-direction: column; gap: var(--apmedia-privacy-block-gap); padding-top: var(--apmedia-privacy-article-gap); border-top: var(--line-thin) solid var(--privacy-line); }
.apmedia-privacy .apmedia-privacy-article:first-child { padding-top: 0; border-top: 0; }
.apmedia-privacy .apmedia-privacy-article-head { display: flex; flex-direction: row; align-items: baseline; gap: var(--space-md); }
.apmedia-privacy .apmedia-privacy-article-num { flex: 0 0 auto; font-family: var(--set-font-en); font-size: var(--apmedia-privacy-num-fs); font-weight: var(--fw-bold); letter-spacing: var(--ls-snug); color: var(--signature-color); }
.apmedia-privacy .apmedia-privacy-article-title { font-size: var(--apmedia-privacy-title-fs); font-weight: var(--fw-bold); line-height: var(--lh-normal); letter-spacing: var(--ls-tight); color: var(--color-white); word-break: keep-all; }
.apmedia-privacy .apmedia-privacy-text { font-size: var(--fs-body-md); line-height: var(--lh-relaxed); color: var(--color-white-70); word-break: keep-all; }
.apmedia-privacy .apmedia-privacy-text strong { color: var(--color-white); font-weight: var(--fw-semibold); }
.apmedia-privacy .apmedia-privacy-text a { color: var(--signature-color); text-decoration: underline; }

/* 03-c. 리스트 (::marker 시그니처 — 절대배치 마커 폐기로 매직넘버 0) */
.apmedia-privacy .apmedia-privacy-list { list-style: disc; padding-left: var(--space-lg); }
.apmedia-privacy .apmedia-privacy-item { font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--color-white-70); word-break: keep-all; }
.apmedia-privacy .apmedia-privacy-item::marker { color: var(--signature-color); }
.apmedia-privacy .apmedia-privacy-item + .apmedia-privacy-item { margin-top: var(--space-sm); }
.apmedia-privacy .apmedia-privacy-item strong { color: var(--color-white); font-weight: var(--fw-semibold); }

/* 03-d. 표 (수집 항목 / 위탁 / 보유기간) */
.apmedia-privacy .apmedia-privacy-table-wrap { width: 100%; overflow-x: auto; border: var(--line-thin) solid var(--privacy-line); border-radius: var(--apmedia-privacy-radius); }
.apmedia-privacy .apmedia-privacy-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.apmedia-privacy .apmedia-privacy-table th, .apmedia-privacy .apmedia-privacy-table td { padding: var(--apmedia-privacy-cell-py) var(--apmedia-privacy-cell-px); text-align: left; vertical-align: top; line-height: var(--lh-normal); word-break: keep-all; border-bottom: var(--line-thin) solid var(--privacy-line); }
.apmedia-privacy .apmedia-privacy-table thead th { background: var(--privacy-fill-head); font-weight: var(--fw-semibold); color: var(--color-white); letter-spacing: var(--ls-snug); white-space: nowrap; }
.apmedia-privacy .apmedia-privacy-table tbody th { font-weight: var(--fw-medium); color: var(--color-white-80); background: var(--privacy-fill); white-space: nowrap; }
.apmedia-privacy .apmedia-privacy-table tbody td { color: var(--color-white-70); }
.apmedia-privacy .apmedia-privacy-table tr:last-child th, .apmedia-privacy .apmedia-privacy-table tr:last-child td { border-bottom: 0; }

/* 03-e. 보호책임자 카드 */
.apmedia-privacy .apmedia-privacy-officer { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); background: var(--privacy-fill); border: var(--line-thin) solid var(--privacy-line); border-radius: var(--apmedia-privacy-radius); }
.apmedia-privacy .apmedia-privacy-officer-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.apmedia-privacy .apmedia-privacy-officer-label { flex: 0 0 auto; font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); color: var(--color-white-50); }
.apmedia-privacy .apmedia-privacy-officer-value { font-size: var(--fs-body-sm); color: var(--color-white-80); }

/* #################### 04. 반응형 #################### */
@media (max-width: 1024px) {
.apmedia-privacy .apmedia-privacy-grid { flex-direction: column; gap: var(--apmedia-privacy-gap-xl); }
.apmedia-privacy .apmedia-privacy-toc { flex: 1 1 auto; width: 100%; position: static; top: auto; }
.apmedia-privacy .apmedia-privacy-articles { flex: 1 1 auto; width: 100%; }
}

/* ── 개인정보처리방침 팝업 (메인 상담신청 '자세히') — privacy_body 본문 공유, 컨테이너만 별도 ── */
/* 모바일·태블릿 75% / 데스크탑(≥64rem) 50% — 부모 padding(var) 으로 여백, panel 은 남은 영역 100% 채움 */
/* 닫기 X 획 길이는 여기서 정의한다 — 닫기 버튼은 .apmedia-privacy(패널) 형제라 그쪽 스코프 토큰을 못 받는다 */
.apmedia-privacy-modal { --apmedia-privacy-close-arm: calc(var(--size-icon-lg) * 1.4); position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: var(--privacy-modal-pad); }
.apmedia-privacy-modal[hidden] { display: none; }
.apmedia-privacy-modal-backdrop { position: absolute; inset: 0; background: var(--privacy-modal-scrim); -webkit-backdrop-filter: blur(var(--blur-lg)); backdrop-filter: blur(var(--blur-lg)); }
.apmedia-privacy-modal-panel { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--background-color); }
.apmedia-privacy-modal-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* 팝업 안에서는 페이지용 85% wrap 을 풀어 좌우 이중 여백을 없앤다.
   이게 없으면 목차 글자 여백이 좌우만 상단보다 ~17px 넓어진다. */
.apmedia-privacy-modal .apmedia-privacy-grid { width: 100%; }
/* 팝업 목차 박스 — 안쪽 4방향 균일 패딩(모달 전용, 페이지 목차엔 미적용).
   sticky top 은 페이지 헤더 높이 기준이라 헤더가 없는 팝업에선 상단 여백만 벌린다 → 패널 상단에 붙인다. */
.apmedia-privacy-modal .apmedia-privacy-toc { top: 0; padding: var(--apmedia-privacy-toc-pad); }
/* 첫 줄 위 line-height 여백만큼 끌어올려 글자 기준 상단 여백을 좌우와 맞춘다 */
.apmedia-privacy-modal .apmedia-privacy-toc-title { margin-top: var(--apmedia-privacy-lh-trim); }
/* 닫기(X) — 패널 밖 우측 상단. 모달 좌우 여백과 같은 값을 right 에 줘서 버튼 우변이 패널 우변과 맞고,
   top 은 "위 여백 − 버튼 높이 − 간격" 이라 버튼 아래에 --space-sm 이 남는다(기존 4px 밀착 해소).
   max() 는 세로 512px 미만(가로모드)에서 그 계산이 음수로 떨어져 버튼이 화면 위로 나가는 것을 막는다. */
.apmedia-privacy-modal-close { position: absolute; top: max(var(--space-sm), calc(var(--privacy-modal-pad-y) - var(--size-circle-touch) - var(--space-sm))); right: var(--privacy-modal-pad-x); z-index: 2; display: flex; align-items: center; justify-content: center; width: var(--size-circle-touch); height: var(--size-circle-touch); }
/* X 는 획을 45° 돌려 만들므로 눈에 보이는 폭이 획 길이보다 짧다(길이 W → W·cos45 + 선폭·sin45).
   버튼 박스만 우변 정렬하면 X 자체는 그 차이의 절반만큼 안쪽에 남는다 → 그만큼 밖으로 밀어 X 를 패널 우변에 맞춘다. */
.apmedia-privacy-modal-close span { position: absolute; right: calc(var(--apmedia-privacy-close-arm) * -0.1465 + var(--line-thin) * 0.354); width: var(--apmedia-privacy-close-arm); height: var(--line-thin); background: var(--color-black-soft); }
.apmedia-privacy-modal-close span:first-child { transform: rotate(45deg); }
.apmedia-privacy-modal-close span:last-child { transform: rotate(-45deg); }
/* 가로모드 — 위 여백이 "버튼 + 간격 × 2" 아래로 떨어지면 패널 위에 버튼을 놓을 자리가 없어 패널을 덮는다.
   그 구간만 패널 안쪽 우측 상단으로 넣는다. 임계는 여백 비율이 달라 폭 구간별로 다르다.
     · 1023px 이하 : 12.5vh < 72px  → 세로 576px 미만
     · 1024px 이상 : 25vh   < 80px  → 세로 320px 미만 */
@media (max-width: 1023px) and (max-height: 575px),
       (min-width: 1024px) and (max-height: 319px) {
    .apmedia-privacy-modal-close { top: calc(var(--privacy-modal-pad-y) + var(--space-sm)); right: calc(var(--privacy-modal-pad-x) + var(--space-sm)); }
}