/* 클라우드러닝 공용 스타일: 헤더 · 푸터 · 섹션 머리 · 버튼. 모든 페이지가 함께 쓴다. */
:root{--pri:#904ae8;--pri-d:#7a35d0;--tint:#f3ecfd;--lav:#e2d3fb;--sky:#29b6ff;--sky-tint:#e0f4ff;--sky-ink:#0a6fa3;--ink:#1d1d1f;--ink-2:#3a3a3f;--mut:#5e5e63;--soft:#f5f5f7;--gray:#eef0f2;--ok:#137333;--ok-bg:#e6f4ea;--warn:#9a5200;--warn-bg:#fef3e0;--err:#c5221f;--err-bg:#fce8e6;--ease:cubic-bezier(.2,.8,.2,1);--pop:cubic-bezier(.34,1.56,.64,1);
/* 선은 두 가지만: 굵은 선(테두리·머리 아래·회백 위 구분선) / 얇은 선(흰 바탕 목록 행 사이) */
--line:#e6e6e9;--line-2:#f0f0f2;
/* 선이 아닌 것: 막대·범위 바탕, 입력 칸 테두리(화면 예시 속 폼) */
--track:#ececef;--line-input:#d2d2d7;
/* 페이지 첫 화면 머리 간격(사용자 2026.11.04 — 요금제 기준, 모든 페이지 같게): 헤더 아래 96 → 뱃지(30px) → 48 → 제목 → 32 → 보조 설명 → 48 → 버튼 · 검색 · 탭.
   그래서 어느 페이지로 가도 뱃지 · 제목이 같은 자리에서 시작한다. 제목 크기만 화면 종류에 따라 다르다(설득형 72 · 읽기형 48). 휴대폰은 위 56 */
--hero-top:96px;--hero-gap-badge:0px;--hero-gap-sub:32px;--hero-gap-act:48px}
@media (max-width:640px){:root{--hero-top:56px}}
/* 누르는 것의 상태 규칙(DESIGN.md 7-2) — 시간은 모두 0.2초, 크기는 --ease
   채운 버튼: 바탕색만 바뀜 · 선 버튼(보조 · 탭 · 칩): 회색 선 → 검정 선 · 연한 칸 버튼: 바탕 한 단계 진하게
   글자 링크: 진보라 · 누름: 작은 것은 0.97 로 작아짐, 큰 줄 · 카드는 바탕 한 단계 더 · 떠오름 · 커짐 · 빛 그림자는 쓰지 않는다 */
.hd,.ft{font-family:'Pretendard Variable','Pretendard',sans-serif;letter-spacing:-0.01em;color:var(--ink)}
.hd *,.ft *,.fab *{box-sizing:border-box}
:where(.hd,.ft,.fab) a{color:inherit;text-decoration:none}
.ft p{margin:0}
/* 앵커 이동(맨 위로, 상담 바로가기 등)을 부드럽게. 고정 헤더 높이만큼 띄워서 멈춘다 */
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
}
/* 공통 레이아웃 · 섹션 머리 · 버튼 */
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.eyebrow{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:99px;background:var(--tint);font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:14px;line-height:1;font-weight:600;letter-spacing:.04em;color:var(--pri-d)}
.h2,.pbox h2,.ctaS h2{font-size:clamp(30px,3.8vw,48px);line-height:1.3;font-weight:800;letter-spacing:-0.03em;margin:24px 0 0;color:var(--ink);text-wrap:balance}
.lede{font-size:20px;line-height:1.6;letter-spacing:-0.015em;color:var(--mut);margin-top:24px;max-width:34em;text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;font-size:16px;line-height:1;font-weight:700;border:0;white-space:nowrap;transition:background-color .2s ease,box-shadow .2s ease,transform .2s var(--ease),color .2s ease}
.btn-pri{background:var(--pri);color:#ffffff}
.btn-pri:hover{background:var(--pri-d);color:#ffffff}
.btn-sec{background:#ffffff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-sec:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-ink{background:var(--ink);color:#ffffff}
.btn-ink:hover{background:var(--pri);color:#ffffff}
.btn-w{background:#ffffff;color:var(--pri-d)}
.btn-w:hover{background:var(--ink);color:#ffffff}
/* 검정 판 위 흰 버튼: hover 때 검정이면 판과 겹치므로 보라로 */
.btn-w.is-on-ink:hover{background:var(--pri);color:#ffffff}
/* 하늘 버튼: 검정 판 위 보조(다른 사이트로 가기 등). 하늘 위 글자는 검정 */
.btn-sky{background:var(--sky);color:var(--ink)}
.btn-sky:hover{background:#ffffff;color:var(--ink)}
/* 검정 · 보라 판 위 테두리 버튼(보조) */
.btn-line{background:transparent;color:#ffffff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.btn-line:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px #ffffff;color:#ffffff}
.btn:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
/* 누름: 작은 버튼 · 칩 · 탭 · 아이콘 버튼은 0.97 */
.btn:active,.hd-menu:active,.fab a:active,.ft-chip:active,.pol-tabs a:active{transform:scale(.97)}
/* 화면에는 안 보이고 읽어 주기만 하는 글자 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btn svg.arr{transition:transform .2s var(--ease)}
.btn:hover svg.arr{transform:translateX(5px)}
/* 헤더 */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
/* 헤더 고정: 헤더는 부품 상자 안에 들어 있어 .hd 만 sticky 면 따라 내려오지 않는다 → 페이지 바로 아래 칸 중 헤더를 품은 칸을 고정 */
.page > :has(.hd){position:sticky;top:0;z-index:50}
.hd-in{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:36px;width:auto;display:block;object-fit:contain}
.hd-l{display:flex;align-items:center;gap:48px}
.nav{display:flex;gap:36px;font-size:16px;font-weight:600;color:#3a3a3f}
.nav a,.hd-r .tx{transition:color .2s ease}
.nav a:hover,.hd-r .tx:hover{color:var(--pri-d)}
/* 현재 페이지 메뉴: 헤더 아래선에 보라 밑줄 */
.nav a{position:relative;display:flex;align-items:center;height:72px}
.nav a.on{color:var(--ink);font-weight:700}
.nav a.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--pri)}
.hd-r{display:flex;align-items:center;gap:24px}
.hd-r .tx{font-size:16px;font-weight:600;color:#3a3a3f}
/* 지금 보고 있는 로그인 · 회원가입(헤더 current="login" · "join") — 글자만 검정 굵게, 밑줄 없음 */
.hd-r .tx.on{color:var(--ink);font-weight:700}
.hd .btn{height:42px;padding:0 22px;font-size:15px}
/* 휴대폰 메뉴: 1080px 이하에서 메뉴 대신 [메뉴 열기] 버튼, 누르면 헤더 아래로 메뉴 판 */
.hd-menu{display:none;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:0;border-radius:99px;background:var(--soft);color:var(--ink);flex:none;cursor:pointer;transition:background-color .2s ease,transform .2s var(--ease)}
.hd-menu:hover{background:var(--gray)}
.hd-menu:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.hd-menu svg{display:block}
.hd-menu .ic-x{display:none}
.hd-menu[aria-expanded="true"]{background:var(--ink);color:#ffffff}
.hd-menu[aria-expanded="true"] .ic-x{display:block}
.hd-menu[aria-expanded="true"] .ic-m{display:none}
.hd-panel{position:absolute;left:0;right:0;top:100%;background:#ffffff;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(29,29,31,.10);padding:8px 0 24px;animation:hdpanel .25s var(--ease)}
.hd-panel[hidden]{display:none}
.hd-panel nav{display:flex;flex-direction:column}
.hd-panel nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);border-bottom:1px solid var(--line-2)}
.hd-panel nav a svg{color:#8e8e93}
.hd-panel nav a.on{color:var(--pri-d)}
.hd-panel nav a.on svg{color:var(--pri-d)}
.hd-panel .acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
/* 로그인한 사람(사용자 2026.11.04): [내 학원](2곳 이상이면 수) → 헤더 아래 오른쪽에 목록 + 계정 동그라미. 로그인 직후 학원으로 보내지 않는다.
   목록 줄: 이름 첫 글자(로고 자리) · 학원 이름 · 역할 · 승인 상태 · [홈페이지](선) [내 강의실](보라, 승인 대기면 안내 글자) · 맨 아래 [내 학원 전체] */
.hd-my-all svg{flex:none;transition:transform .2s var(--ease)}
.hd-my-all:hover svg{transform:translateX(3px)}
.hd-my{position:relative}
.hd-my-btn{gap:8px;cursor:pointer}
.hd-my-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:rgba(255,255,255,.24);font-size:12px;font-weight:700}
.hd-my-btn svg{flex:none;transition:transform .2s var(--ease)}
.hd-my-btn[aria-expanded="true"]{background:var(--pri-d)}
.hd-my-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.hd-av{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:0;border-radius:99px;background:var(--tint);color:var(--pri-d);font-family:'Pretendard Variable','Pretendard',sans-serif;font-size:15px;font-weight:700;flex:none;cursor:pointer;transition:background-color .2s ease,transform .2s var(--ease)}
.hd-av:hover{background:var(--lav)}
.hd-av:active{transform:scale(.97)}
.hd-av:focus-visible,.hd-my-btn:focus-visible,.hd-my-in:focus-visible,.hd-my-all:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.hd-my-pop{position:absolute;right:0;top:calc(100% + 12px);z-index:60;width:440px;padding:20px 16px 12px;border-radius:24px;background:#ffffff;box-shadow:0 0 0 1px #ececf0,0 18px 40px rgba(29,29,31,.10);animation:hdpanel .25s var(--ease)}
.hd-my-pop[hidden]{display:none}
.hd-my-hi{margin:0 4px;font-size:14px;line-height:1.5;font-weight:600;color:var(--mut)}
.hd-my-list{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.hd-my-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--soft)}
.hd-my-ic{flex:none;width:40px;height:40px;border-radius:12px;background:#ffffff;color:var(--pri-d);display:grid;place-items:center;font-size:15px;font-weight:800}
.hd-my-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hd-my-tx b{font-size:15px;line-height:1.4;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-my-tx span{font-size:13px;line-height:1.4;color:var(--mut)}
.hd-my-tx .is-wait{color:var(--warn)}
.hd-my-acts{flex:none;display:flex;align-items:center;gap:6px}
.hd-my-home{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:99px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-2);font-size:13px;font-weight:700;white-space:nowrap;transition:box-shadow .2s ease,color .2s ease,transform .2s var(--ease)}
.hd-my-home:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.hd-my-home:active{transform:scale(.97)}
.hd-my-home:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.hd-my-in{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:99px;background:var(--pri);color:#ffffff;font-size:13px;font-weight:700;white-space:nowrap;transition:background-color .2s ease,transform .2s var(--ease)}
.hd-my-in:hover{background:var(--pri-d)}
.hd-my-in:active{transform:scale(.97)}
.hd-my-wait{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 4px;font-size:12px;font-weight:600;color:var(--mut);white-space:nowrap}
.hd-my-all{display:flex;align-items:center;justify-content:center;gap:4px;height:44px;margin-top:8px;border-radius:12px;font-size:14px;font-weight:700;color:var(--ink-2);transition:color .2s ease}
.hd-my-all:hover{color:var(--pri-d)}
@media (max-width:640px){
.hd-my-pop{position:fixed;left:16px;right:16px;top:84px;width:auto}
.hd .hd-my-btn{padding:0 16px}
.hd-my-row{flex-wrap:wrap}
.hd-my-acts{width:100%;padding-left:52px}
.hd-my-acts > *{flex:1;justify-content:center}
.hd-av{display:none}
}
@keyframes hdpanel{
from{opacity:0;transform:translateY(-8px)}
to{opacity:1;transform:none}
}
@media (max-width:1080px){
.hd-menu{display:inline-flex}
/* 로그인 · 회원가입은 메뉴 판 안으로 */
.hd-r{gap:10px}
.hd-r .tx{display:none}
}
@media (min-width:1081px){
.hd-panel{display:none}
}
@media (prefers-reduced-motion:reduce){
.hd-panel{animation:none}
}
/* 푸터 */
.ft{background:var(--soft);color:var(--mut);padding:56px 0 48px;font-size:14px}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.ft-brand{display:flex;flex-direction:column;gap:20px}
.ft-logo{height:40px;width:auto;max-width:none;display:block;align-self:flex-start;object-fit:contain}
.ft-fam{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ft-lb{font-size:13px;font-weight:600;color:#3a3a3f;margin-right:4px}
.ft-chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:99px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:13px;font-weight:700;color:var(--ink);transition:box-shadow .2s ease,color .2s ease,transform .2s var(--ease)}
.ft-chip:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.ft-chip svg{color:#8e8e93}
.ft-ic{width:16px;height:16px;display:block;object-fit:contain;flex:none}
.ic-lab{width:16px;height:16px;border-radius:5px;box-shadow:inset 0 0 0 2px #f2994a;position:relative}
.ic-lab:after{content:"";position:absolute;left:4px;top:4px;width:3px;height:3px;border-radius:9px;background:#f2994a}
.ic-all{width:16px;height:16px;border-radius:99px;background:#e8590c}
.ft-links{display:flex;gap:24px;font-size:14px;color:#3a3a3f}
.ft-links a{transition:color .2s ease}
.ft-links a:hover{color:var(--pri-d)}
.ft-links a.b{font-weight:700;color:var(--ink)}
.ft-info{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.ft-info p{font-size:13.5px;line-height:1.8;color:var(--mut)}
.ft-info p.cp{margin-top:12px;font-size:12.5px;color:#7d7d84}
@media (max-width:1080px){
.nav{display:none}
.hd-l{gap:0}
}
@media (max-width:640px){
.ft-links{flex-wrap:wrap;gap:12px 18px}
.hd-r .tx{display:none}
.brand img{height:30px}
.wrap{padding:0 20px}
}
/* 플로팅 버튼: 평소엔 동그라미, 마우스를 올리면 왼쪽으로 늘어나며 글자가 보인다 */
.fab{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:'Pretendard Variable','Pretendard',sans-serif}
.fab a{display:flex;align-items:center;justify-content:flex-end;height:52px;min-width:52px;padding:0 16px;border-radius:99px;box-shadow:0 6px 18px rgba(29,29,31,.12);font-size:14px;font-weight:700;letter-spacing:-0.01em;white-space:nowrap;transition:box-shadow .2s ease,background-color .2s ease,transform .2s var(--ease)}
.fab a svg{flex:none;display:block}
.fab a span{display:block;max-width:0;opacity:0;overflow:hidden;margin-right:0;transition:max-width .35s var(--ease),opacity .25s ease,margin-right .35s var(--ease)}
.fab a:hover,.fab a:focus-visible{box-shadow:0 10px 26px rgba(29,29,31,.18)}
.fab a:hover span,.fab a:focus-visible span{max-width:120px;opacity:1;margin-right:8px}
.fab a:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.fab .f-top{background:#ffffff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),0 6px 18px rgba(29,29,31,.08)}
.fab .f-top:hover,.fab .f-top:focus-visible{box-shadow:inset 0 0 0 1.5px var(--ink),0 10px 26px rgba(29,29,31,.14)}
/* 카카오톡 · AI 상담 아이콘(사용자 그림 2026.11.04): 둘 다 그림 테두리에 딱 맞춘 viewBox + 폭 20 으로 같은 비율. 색은 currentColor — 카카오 검정, AI 는 바탕에 따라(보라 버튼 흰색 · 연보라 칸 진보라) */
.fab .fab-ic{flex:none;display:block}
.fab .f-kakao{background:#fee500;color:#191919}
/* AI 상담 버튼(11.05 사용자): 흰 말풍선 + 보라 점 셋 — 바로 대화하는 창이라는 뜻. 점이 차례로 깜빡여 "입력 중"처럼 보인다(움직임 줄이기면 멈춤) */
.fab .f-ai{background:var(--pri);color:#ffffff}
.fab .fab-chat circle{fill:var(--pri)}
.fab .f-ai:hover .fab-chat circle{fill:var(--pri-d)}
.fab .fab-chat .d1,.fab .fab-chat .d2,.fab .fab-chat .d3{animation:fabDot 1.4s ease-in-out infinite}
.fab .fab-chat .d2{animation-delay:.2s}.fab .fab-chat .d3{animation-delay:.4s}
@keyframes fabDot{0%,60%,100%{opacity:1}30%{opacity:.25}}
.fab .f-ai:hover{background:var(--pri-d)}
@media (max-width:640px){
.fab{right:16px;bottom:16px;gap:10px}
.fab a{height:48px;min-width:48px;padding:0 14px}
}

/* ───────── 공개 페이지 공통 (모든 페이지 루트 .page) ───────── */
.page{font-family:'Pretendard Variable','Pretendard',sans-serif;font-size:16px;line-height:1.6;letter-spacing:-0.01em;color:var(--ink);background:#ffffff;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.page *{box-sizing:border-box}
/* 기본 여백 0 · 링크 색 상속은 :where()로 우선순위를 0으로 둔다 (버튼 글자색·섹션 간격을 덮지 않게) */
:where(.page) :where(h1,h2,h3,h4,h5,h6,p,dl,dd){margin:0;font-family:'Pretendard Variable','Pretendard',sans-serif}
/* 제목은 한글 단어 중간에서 끊지 않는다("시작하/세요" — 리뉴얼 점검 1차) */
:where(.page) :where(h1,h2,h3){word-break:keep-all}
:where(.page) :where(ul,ol){margin:0;padding:0;list-style:none}
:where(.page) a{color:inherit;text-decoration:none}
.page input,.page button,.page textarea,.page select{font-family:'Pretendard Variable','Pretendard',sans-serif}
.page button{cursor:pointer}
.sec{position:relative}
.pad{padding:128px 0}
.fo{font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;letter-spacing:-0.01em}

/* 벤토: 12칸 격자, 간격 24px */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:56px}
.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
/* 벤토 카드: 검은 동그라미 번호 → 제목 → 설명 → (아래) 화면 예시 */
.bc{background:var(--soft);border-radius:36px;padding:40px 40px 0;display:flex;flex-direction:column;min-height:640px;overflow:hidden}
.bc .step{display:inline-flex;width:38px;height:38px;border-radius:99px;background:var(--ink);color:#ffffff;align-items:center;justify-content:center;font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:14px;line-height:1;font-weight:800}
.bc h3{font-size:26px;line-height:1.35;font-weight:800;letter-spacing:-0.025em;margin-top:18px;color:var(--ink)}
.bc .d{font-size:18px;line-height:1.5;color:var(--mut);margin-top:8px}

/* 작은 배지 22px */
.badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:99px;font-size:11px;line-height:1;font-weight:700;background:var(--tint);color:var(--pri-d);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.gy{background:var(--gray);color:var(--ink-2)}
.badge.wn{background:var(--warn-bg);color:var(--warn)}
.badge.sk{background:var(--sky);color:var(--ink)}

/* ───────── 등장 모션 ─────────
   페이지 스크립트가 루트에 .js, 화면에 8% 들어온 섹션(.sec)에 .is-in을 붙이면 재생된다.
   감지는 IntersectionObserver 기본 root(실제 창). 각 요소는 style="--d:.12s"로 차례를 준다. */
.js .rv{opacity:0;transform:translateY(32px)}
.sec.is-in .rv{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
/* 제목 한 줄씩: <span class="ln"><span>…</span></span> */
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block}
.js .ln>span{transform:translateY(110%);opacity:0}
.sec.is-in .ln>span{transform:none;opacity:1;transition:transform 1s var(--ease) var(--d,0s),opacity .6s ease var(--d,0s)}
/* 떠 있는 카드: --x --y --r 위치에서 튀어나옴 */
.js .pop{opacity:0;transform:translate3d(var(--x,0px),var(--y,80px),0) scale(.86) rotate(var(--r,0deg))}
.sec.is-in .pop{opacity:1;transform:none;transition:transform 1.1s var(--pop) var(--d,0s),opacity .5s ease var(--d,0s)}
/* 둥실: 떠 있는 카드 안쪽에 감싸서 쓴다 (--fd = 시작 지연) */
.fl{animation:bob 6s ease-in-out infinite;animation-delay:var(--fd,1.6s)}
/* 진도 막대: 늘리지 않고 둥근 끝을 유지한 채 그려 나간다 */
.pg{height:6px;border-radius:99px;background:var(--track);overflow:hidden}
.pg i{display:block;height:100%;border-radius:99px;background:var(--pri)}
.js .pg i{clip-path:inset(0 100% 0 0 round 99px)}
.sec.is-in .pg i{clip-path:inset(0 0 0 0 round 99px);transition:clip-path 1.2s var(--ease) var(--d,.4s)}
@keyframes bob{
0%{transform:translateY(0)}
50%{transform:translateY(-9px)}
100%{transform:translateY(0)}
}
@keyframes spin{
to{transform:rotate(360deg)}
}

@media (max-width:1080px){
.s4,.s5,.s6,.s7,.s8{grid-column:span 12}
}
@media (max-width:640px){
.pad{padding:88px 0}
.bc{padding:28px 22px 0}
}
@media (prefers-reduced-motion:reduce){
.page *{animation:none!important;transition:none!important}
.page :is(a,button):active{transform:none!important}
.js .rv,.js .ln>span,.js .pop{opacity:1;transform:none}
.js .pg i{clip-path:none}
}

/* ───────── 약관 · 읽기형 페이지 (PolicyUse · PolicyPrivacy · PolicyKid) ─────────
   모션 없음. 탭은 화면끼리 링크, 본문 한 단(목차 없음 — 사용자 2026.11.03) */
.pol-hero{padding:var(--hero-top) 0 40px}
.pol-hero h1{font-size:clamp(32px,4.4vw,48px);line-height:1.25;font-weight:800;letter-spacing:-0.03em;margin-top:var(--hero-gap-badge);color:var(--ink)}
.pol-hero .sub{font-size:20px;line-height:1.6;color:var(--mut);margin-top:var(--hero-gap-sub)}
.pol-tabs{position:sticky;top:72px;z-index:40;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.pol-tabs .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:12px;padding-bottom:12px}
.pol-tabs a{flex:none;display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:99px;font-size:15px;font-weight:700;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s ease,color .2s ease,transform .2s var(--ease)}
.pol-tabs a:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.pol-tabs a.on{background:var(--ink);color:#ffffff;box-shadow:none}
.pol-tabs a:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.pol-body{padding-top:56px;padding-bottom:128px}
.pol-doc{max-width:760px;min-width:0}
.pol-head{padding-bottom:28px;border-bottom:1px solid var(--line)}
.pol-head h2{font-size:32px;line-height:1.3;font-weight:800;letter-spacing:-0.03em;color:var(--ink)}
.pol-head .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pol-head .meta:empty{display:none}
.pol-head .meta span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:99px;background:var(--soft);font-size:13px;font-weight:600;color:var(--ink-2)}
.pol-doc [id]{scroll-margin-top:68px}
.pol-doc .chap{font-size:22px;line-height:1.4;font-weight:800;letter-spacing:-0.02em;color:var(--ink);margin-top:56px;padding-top:28px;border-top:2px solid var(--ink)}
.pol-doc .pol-head + .chap{margin-top:40px;border-top:0;padding-top:0}
.pol-doc h3{font-size:19px;line-height:1.45;font-weight:800;letter-spacing:-0.02em;color:var(--ink);margin-top:44px}
.pol-doc .chap + h3{margin-top:24px}
.pol-doc h4{font-size:16px;line-height:1.5;font-weight:700;color:var(--ink);margin-top:24px}
.pol-doc p{font-size:16px;line-height:1.85;color:var(--ink-2);margin-top:6px;word-break:keep-all;overflow-wrap:anywhere}
.pol-doc h3 + p,.pol-doc h4 + p{margin-top:10px}
.pol-doc p.gap{margin-top:20px}
.pol-doc p.note{font-size:15px;color:var(--mut)}
.pol-doc .box{margin-top:16px;padding:20px 24px;border-radius:20px;background:var(--soft)}
.pol-doc .box p{margin-top:2px}
.pol-doc .box p.bt{font-weight:700;color:var(--ink);margin:0 0 6px}
@media (max-width:640px){
.pol-hero{padding:var(--hero-top) 0 28px}
.pol-hero .sub{font-size:16px}
.pol-body{padding-top:32px;padding-bottom:88px}
.pol-head h2{font-size:26px}
.pol-doc p{font-size:15.5px}
}