/* ENTER 사이트 공통 — 기획서/클로드코드_서브페이지7_지시서.md 기준.
   static/home-poetic.css에 있던 토큰·헤더·푸터·알약버튼을 여기로 뽑아서 홈과
   서브페이지 7개가 전부 이 파일을 쓴다(연결만 바꿨고, 값은 그대로 옮겼다 —
   홈 디자인이 깨지면 안 되므로). 서브페이지 전용 부품(이미지 히어로/검은
   카드/상세목록/FAQ 아코디언/CTA 띠)은 static/sub.css에 따로 둔다. */

:root{
  /* 강조색 R2(2026-11-09) — 주황은 아껴 쓴다. 화면에서 주황으로 "칠한" 면은 헤더
     "정책 받기" 버튼 하나뿐이다(메가 메뉴가 열렸을 때만 보이는 CTA 카드,
     왜 ENTER 숫자 카드의 막대 3장은 예외 — 각각 2026-11-03/11-11에 허용됨).
     --hp-accent-text는 16px 미만 작은 글자 전용(밝은 바탕 위 대비 확보), --hp-accent-tint는
     hover 등 아주 좁은 면적 전용 — 둘 다 넓은 배경에는 쓰지 않는다.
     접근성(마케팅 마무리 지시서 2026-11-12 F) — #C4561D는 배경 #FBF8F4 위 4.22:1,
     카드 #F3EEE7 위 3.87:1로 WCAG AA(4.5:1) 미달이라 #B04C18로 교체(각각 5.10/4.67). */
  --hp-accent:#E36B2C;
  --hp-accent-text:#B04C18;
  --hp-accent-tint:#FBE9DE;

  --hp-white:#FBF8F4;
  --hp-black:#0B0D12;
  --hp-ink:#10182B;
  --hp-grey:#6B7280;
  --hp-grey-bg:#F0F0EB;
  --hp-card-bg:#F3EEE7;
  --hp-line:#E9E3DA;
  --hp-line-dark:#1E222B;
  /* 옛 이름은 새 토큰을 가리키는 별칭으로만 남긴다 — 코드에서 "green"이라는 이름은
     더 이상 새로 쓰지 않는다(2026-11-09 강조색 교체). */
  --hp-green:var(--hp-accent);
  --hp-green-tint:var(--hp-accent-tint);

  /* 모서리 둥글기 토큰(2026-11-02) — 사이트 전체 카드/버튼 둥글기를 여기 두 값으로 통일.
     원형(50%)·점(dot)·의도적 각진 디테일(0, 4px 셀 등)은 토큰 대상이 아니다. */
  --radius-card:8px;
  --radius-btn:6px;

  /* 폰트 토큰(2026-11-02) — ONE Mobile(TTF, 약 12MB) → Pretendard Variable
     woff2 dynamic subset(static/fonts/pretendard/)로 교체. base.html이
     pretendard-dynamic-subset.css를 common.css보다 먼저 불러온다. */
  --font-sans:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  /* 타이포 크기 토큰(2026-11-10) — 화면이 꽉 차 보인다는 피드백으로 헤드 타이포를
     전체적으로 한 단계 줄인다. home-poetic.css·sub.css·megamenu.css가 이 토큰을 쓴다.
     --fs-display만 명시된 clamp 공식을 쓰고(1440px에서 약 64px), 나머지는 기존 사이트의
     768/1024px 2단 breakpoint 체계에 맞춰 최대값을 아래에서 단계적으로 올린다. */
  --fs-display:clamp(40px, 4.4vw, 64px); /* 왜 ENTER 히어로 헤드라인 */
  --fs-h1:32px;   /* 서브페이지 스케치 히어로 헤드라인, 최대 48px */
  --fs-h2:24px;   /* 섹션 제목(HOW WE WORK·근거 띠 제목 등), 최대 32px */
  --fs-h3:20px;   /* 카드 제목 — 전부 데스크톱에서도 20px 고정 */
  --fs-lead:18px; /* 히어로 부제 */
  --fs-body:16px; /* 히어로 본문 */
}
@media (min-width:768px){
  :root{ --fs-h1:40px; --fs-h2:28px; }
}
@media (min-width:1024px){
  :root{ --fs-h1:48px; --fs-h2:32px; }
}

body{ background:var(--hp-white); color:var(--hp-ink); word-break:keep-all; overflow-wrap:break-word; }
.hp-wrap{ max-width:1200px; margin:0 auto; padding:0 20px; }
.hp-wrap--narrow{ max-width:900px; }

.hp-two-tone{ max-width:640px; margin:12px auto 0; }
.hp-two-tone-block{ display:flex; flex-direction:column; gap:4px; }
.hp-ink{ color:var(--hp-ink); }
.hp-green{ color:var(--hp-green); }
.hp-muted{ color:var(--hp-grey); }
/* 브레드크럼(마케팅 마무리 지시서 2026-11-12 D) — site.css는 모든 페이지(블로그·가이드·
   서브페이지)에 공통으로 로드되므로 여기 한 곳에만 둔다. */
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--hp-grey); margin-bottom:10px; }
.breadcrumb a{ color:var(--hp-grey); text-decoration:none; }
.breadcrumb a:hover{ color:var(--hp-ink); text-decoration:underline; }
.breadcrumb span[aria-current]{ color:var(--hp-ink); }
.hp-mono-muted{ font-size:11px; letter-spacing:.04em; color:var(--hp-grey); text-transform:uppercase; }
.hp-mono-green{ font-size:11px; letter-spacing:.04em; color:var(--hp-accent-text); text-transform:uppercase; }

.hp-label{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--hp-grey); margin-bottom:12px; }
.hp-label-dot{ width:7px; height:7px; border-radius:50%; background:var(--hp-green); flex:0 0 auto; }

.hp-pill{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--radius-btn); padding:12px 24px; font-size:14px; font-weight:600; white-space:nowrap; transition:background-color .15s ease, color .15s ease, border-color .15s ease; }
.hp-pill-dot{ width:7px; height:7px; border-radius:50%; background:var(--hp-green); flex:0 0 auto; }
.hp-pill--primary{ background:var(--hp-accent); color:#FFFFFF; transition:background-color .2s ease, color .2s ease; }
.hp-pill--primary:hover{ background:var(--hp-ink); }
.hp-pill--primary .hp-pill-dot{ background:var(--hp-white); }
/* "거래 시작하기"(#start)는 카카오톡/정책 받기 버튼이 아니라서 이번 주황 통일에서 빼고
   예전 모습(잉크 바탕, hover만 주황) 그대로 둔다(2026-11-12). */
#start .hp-pill--primary{ background:var(--hp-black); color:var(--hp-white); }
#start .hp-pill--primary:hover{ background:var(--hp-accent); }
/* static/guide_chapter.html 글 하단 CTA는 .hp-pill 체계가 아니라 common.css의 .btn-primary를
   쓰지만 같은 카카오톡 버튼이라 색만 맞춘다. */
.btn-primary[data-cursor="kakao"]{ background:var(--hp-accent); color:#FFFFFF; transition:background-color .2s ease, color .2s ease; }
.btn-primary[data-cursor="kakao"]:hover{ background:var(--hp-ink); }
.hp-pill--secondary{ background:var(--hp-grey-bg); color:var(--hp-ink); border:1px solid transparent; }
.hp-pill--secondary:hover{ background:var(--hp-line); border-color:var(--hp-ink); }
.hp-pill--inverted{ background:var(--hp-white); color:var(--hp-black); }
.hp-pill--inverted:hover{ background:var(--hp-green-tint); }
.hp-pill--outline{ background:transparent; color:var(--hp-white); border:1px solid rgba(255,255,250,.8); }
.hp-pill--outline:hover{ background:rgba(255,255,255,.1); }

/* 카카오톡/정책 받기 버튼 통일(2026-11-12) — .hp-pill--primary 기본이 이미 주황이라
   #hpHeaderCta는 배경을 따로 안 정해도 되지만, 광고 무대(ad-pending)에서는 어두운 배경
   위라 흰 바탕/검은 글자 버튼(static/home-ad.css)을 그대로 둬야 해서 호버만 :not(.ad-pending)
   으로 비켜서 다시 지정한다(ID보다 특정도가 낮은 그 규칙을 이 파일이 덮어쓰지 않도록).
   메가 메뉴가 열렸을 때 테두리 버튼으로 바뀌는 규칙은 static/megamenu.css가 더 높은
   특정도(.hp-header.mega-open #hpHeaderCta)로 따로 담당 — 그대로 유지된다. */
html:not(.ad-pending) #hpHeaderCta:hover{ background:var(--hp-ink); }

/* ---------- 헤더(사이트 전체 공통) ----------
   01/02/03 그룹 버튼·메가 패널·모바일 메뉴 전용 스타일은 static/megamenu.css.
   여기는 헤더 뼈대(로고·높이·레이아웃)와 알약 버튼만 남는다. */
.hp-header{ position:sticky; top:0; z-index:40; background:rgba(255,255,250,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--hp-line); transition:background .3s ease, border-color .3s ease; }
.hp-header-inner{ max-width:1200px; margin:0 auto; padding:0 20px; height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hp-brand{ display:inline-flex; align-items:center; flex:0 0 auto; }
.hp-brand-svg{ height:26px; width:auto; display:block; }
.hp-brand-door-leaf{ transition:transform .3s ease; transform-box:fill-box; transform-origin:0% 50%; }
.hp-brand:hover .hp-brand-door-leaf{ transform:scaleX(1.3) skewY(-6deg); }
@media (prefers-reduced-motion:reduce){ .hp-brand-door-leaf{ transition:none; } }

.hp-header-right{ display:flex; align-items:center; gap:18px; }
.hp-header-right .hp-pill{ display:none; }
.hp-nav-toggle-input{ display:none; }
.hp-nav-toggle{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; cursor:pointer; color:var(--hp-ink); }

.hp-replay-link{ font-size:12px; color:var(--hp-grey); white-space:nowrap; }
.hp-replay-link:hover{ color:var(--hp-ink); }

/* ---------- 푸터(사이트 전체 공통) ---------- */
.hp-footer{ padding:64px 0 32px; border-top:1px solid var(--hp-line); }
.hp-footer-top{ display:flex; flex-direction:column; gap:40px; margin-bottom:48px; }
.hp-footer-logo{ height:40px; width:auto; display:block; }
.hp-footer-brand p{ color:var(--hp-grey); font-size:13px; margin-top:10px; max-width:320px; }
.hp-footer-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.hp-footer-col{ display:flex; flex-direction:column; gap:10px; }
.hp-footer-heading{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--hp-ink); font-weight:600; margin-bottom:2px; }
.hp-footer-col a{ font-size:13px; color:var(--hp-grey); }
.hp-footer-col a:hover{ color:var(--hp-ink); }
.hp-footer-bottom{ padding-top:24px; border-top:1px solid var(--hp-line); font-size:11px; color:var(--hp-grey); line-height:1.7; display:flex; flex-direction:column; gap:6px; }
.hp-footer-bottom a{ text-decoration:underline; }
.hp-footer-bottom a:hover{ color:var(--hp-ink); }

@media (min-width:768px){
  .hp-header-inner{ padding:0 40px; }

  .hp-footer-top{ flex-direction:row; justify-content:space-between; gap:60px; }
  .hp-footer-cols{ grid-template-columns:repeat(3,1fr); gap:48px; }
  .hp-footer-bottom{ flex-direction:row; justify-content:space-between; }
}

/* 01/02/03 메가 메뉴는 1024px부터만 동작하므로(static/megamenu.css), 닫힌 헤더의
   "정책 받기" 버튼·햄버거 전환도 같은 경계에서 맞춘다 — 768~1023은 계속 모바일 메뉴. */
@media (min-width:1024px){
  .hp-header-right .hp-pill{ display:inline-flex; }
  .hp-nav-toggle{ display:none; }
}

/* ---------- 페이지 전환 와이프(광고 index.html -> why.html#from-ad) ----------
   index.html의 광고 무대가 똑같은 색·타이밍으로 화면을 덮은 채 why.html로 넘어오면,
   동기 인라인 스크립트가 html.wipe-pending을 미리 붙여서 띠가 계속 덮인 상태로
   시작하게 한다(FOUC 없음) — static/wipe-reveal.js가 곧바로 띠를 걷어 하얀 페이지를
   드러낸다. 평소(해시 없이 why.html 직접 방문) 기본 상태는 띠가 아예 안 보인다. */
html.wipe-pending body, html.wipe-pending{ overflow:hidden; }
.hp-page-wipe{ display:none; position:fixed; inset:0; z-index:200; pointer-events:none; }
html.wipe-pending .hp-page-wipe{ display:block; }
.hp-page-wipe-layer{ position:absolute; inset:0; transform:translateX(100%); }
html.wipe-pending .hp-page-wipe-layer{ transform:translateX(0); }
.hp-page-wipe-layer--1{ background:#E36B2C; }
.hp-page-wipe-layer--2{ background:#EA864D; }
.hp-page-wipe-layer--3{ background:#F2A16E; }