/* 서브페이지 공통 — 박수칠때퇴근 리뉴얼 디자인 시스템(P3×ai-team) */
/* 섹션 타이포(히어로 제외 전 섹션 통일) */
.sec{ padding:112px 0; }
.sec-head{ text-align:center; max-width:900px; margin:0 auto 60px; padding:0 24px; }
.sec-pill{ display:inline-block; font-size:14px; font-weight:600; color:var(--blue); background:var(--tint); border:1px solid var(--tint-b); border-radius:999px; padding:8px 18px; }
.sec-title{ margin-top:20px; font-size:clamp(34px,3.9vw,51px); font-weight:700; letter-spacing:-.03em; line-height:1.3; color:var(--ink); }
.sec-title .em{ color:var(--blue); }
.sec-sub{ margin-top:16px; font-size:17.5px; line-height:1.72; color:var(--g700); }
.sec-dark{ background:var(--navy); }
.sec-dark .sec-pill{ color:var(--blue-l); background:rgba(91,141,247,.12); border-color:rgba(91,141,247,.35); }
.sec-dark .sec-title{ color:#fff; }
.sec-dark .sec-sub{ color:#B8C5D9; }
.wrapc{ max-width:1240px; margin:0 auto; padding:0 24px; }
.wrapw{ max-width:1520px; margin:0 auto; padding:0 24px; }
/* 리빌(sui식 롱테일 이징) */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }
/* 네비(서브페이지=라이트 고정) */
.nav{ background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav .logo{ color:var(--ink); } .nav .logo .m{ background:var(--ink); color:#fff; }
.nav .menu a{ color:var(--g700); } .nav .menu a:hover{ color:var(--ink); }
.nav .menu a.on{ color:var(--blue); font-weight:600; }
.nav .nav-cta{ background:var(--ink); color:#fff; }
/* 버튼 */
button.btn{ background:transparent; font-family:inherit; cursor:pointer; }
.btn-fill{ background:var(--blue); color:#fff; } .btn-fill:hover{ background:var(--blue-d); }
.btn-line{ border:1px solid var(--line); color:var(--ink); background:#fff; } .btn-line:hover{ border-color:var(--g500); }
.btn-wline{ background:transparent; border:1px solid rgba(255,255,255,.34); color:#fff; } .btn-wline:hover{ border-color:#fff; }
/* 서브 히어로 */
.subhero{ padding:170px 0 92px; background:var(--bg2); border-bottom:1px solid var(--line); }
.subhero .in{ max-width:980px; margin:0 auto; padding:0 24px; text-align:center; }
.subhero h1{ margin-top:20px; font-size:clamp(38px,4.4vw,58px); font-weight:700; letter-spacing:-.03em; line-height:1.26; color:var(--ink); }
.subhero h1 .em{ color:var(--blue); }
.subhero .lead{ margin:20px auto 0; max-width:640px; font-size:17.5px; line-height:1.75; color:var(--g700); }
.subhero .ctas{ margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.subhero .tagline{ display:inline-block; margin-top:18px; font-size:14px; font-weight:600; color:var(--blue-d); background:var(--tint); border-radius:999px; padding:8px 18px; }
/* 카드 공통 */
.card{ background:#fff; border:1px solid var(--line); border-radius:16px; transition:transform .55s var(--ease), border-color .35s; }
.card:hover{ transform:translateY(-6px); border-color:var(--tint-b); }
/* 포토 밴드(실사 공용) */
.photoband{ position:relative; height:400px; background-position:center 32%; background-size:cover; background-repeat:no-repeat; display:flex; align-items:center; justify-content:center; }
.photoband .veil{ position:absolute; inset:0; background:rgba(7,14,27,.72); }
.photoband .in{ position:relative; text-align:center; padding:0 24px; }
.photoband .kick{ font-size:13.5px; font-weight:600; letter-spacing:.2em; color:var(--blue-l); }
.photoband h2{ margin-top:16px; font-size:clamp(26px,3vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1.4; color:#fff; }
.photoband p{ margin-top:12px; font-size:16px; color:rgba(255,255,255,.75); }
/* 추천대상 불릿 */
.fits{ margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--line); list-style:none; }
.fits li{ display:flex; gap:8px; font-size:13.5px; color:var(--g500); line-height:1.55; margin-top:6px; }
.fits .c{ color:var(--blue); font-weight:600; }
/* 다크 CTA 밴드 */
.cta-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
/* 푸터 */
.footer{ background:var(--navy); border-top:1px solid rgba(255,255,255,.1); padding:44px 0 52px; }
.footer .in{ max-width:1520px; margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }
.footer .flogo{ display:flex; align-items:center; gap:10px; color:#fff; font-size:16px; font-weight:600; }
.footer .flogo .m{ width:28px; height:28px; border-radius:8px; background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:11px; }
/* ★2026-08-12 — 푸터도 실제 브랜드 로고로. 위 .m 규칙은 옛 시안 페이지가 아직 써서 남겨 둔다.
   푸터 배경이 네이비라 워드마크는 헤더 다크 대응과 같은 방식으로 흰색 반전한다
   (단색이라 반전 결과가 공식 흰색 로고와 같다). 마크는 파란 그라데이션이라 그대로. */
.footer .flogo{ gap:9px; }
.footer .flogo-mark{ width:28px; height:28px; display:block; }
.footer .flogo-type{ height:20px; width:auto; display:block; filter:brightness(0) invert(1); }
.footer .fmenu{ display:flex; gap:26px; font-size:14px; color:#93A9C9; }
.footer .fmenu a:hover{ color:#fff; }
.footer .copy{ width:100%; margin-top:6px; font-size:12.5px; color:rgba(255,255,255,.35); }