/* ENTER 왜 ENTER(why.html) — POETIC 오마주 버전 전용 스타일.
기획서/클로드코드_홈_왜ENTER_구조변경_지시서.md로 이 섹션들 전부 home.html에서
why.html로 옮겨왔다(디자인·문구·움직임은 그대로). 공통 토큰(색상)·.hp-wrap·
타입 유틸(two-tone 등)·라벨·알약버튼·헤더·푸터는 static/site.css로 옮겨서
서브페이지 7개와 공유한다(클로드코드_서브페이지7_지시서.md §2). 이 파일은
why.html 전용 섹션 레이아웃(히어로/스테이트먼트/KOSIS/카드/약속/시작/신뢰/통신사/클로징)만 남는다.
common.css는 건드리지 않는다(다른 페이지 전부 영향). */
.hp-center{ text-align:center; }
.hp-section{ padding:80px 0; }
/* word-break:keep-all은 body에서 상속되므로 전 요소에 적용됨(blockquote 포함) — 한글이 글자 단위로 끊기지 않게 */
/* ---------- 타이포 스케일 ---------- */
.hp-display-xl{ font-weight:800; font-size:var(--fs-display); line-height:1.15; letter-spacing:-.02em; margin:0; display:flex; flex-direction:column; text-wrap:balance; }
.hp-display-xl .hp-headline-line{ display:block; }
.hp-display-lg{ font-weight:800; font-size:36px; line-height:1.17; letter-spacing:-.02em; margin:0 0 32px; text-wrap:balance; }
.hp-headline-lg{ font-weight:800; font-size:var(--fs-h2); line-height:1.3; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.hp-headline-md{ font-weight:800; font-size:22px; line-height:1.35; letter-spacing:-.01em; margin:16px 0 0; text-wrap:balance; }
.hp-body-xl{ font-size:16px; line-height:1.65; color:var(--hp-grey); margin:0; }
.hp-body-lg{ font-size:15px; line-height:1.6; }
.hp-strong{ font-weight:600; }
/* ---------- 히어로 ---------- */
.hp-hero{ padding-top:32px; }
/* poetic.com 실제 비율: 헤더-헤드라인 위 여백 + hp-hero-top의 min-height로
헤드라인+부제가 첫 화면 가운데쯤 오고, 문단(hp-hero-below)이 화면 아래쪽에
살짝 걸쳐 보이게(스크롤 유도) 한다. 고정 gap 대신 뷰포트 기준으로 맞춘다.
위아래 여백이 너무 휑하다는 피드백으로 위/아래 모두 절반 수준으로 축소. */
.hp-hero-top{ display:flex; flex-direction:column; justify-content:center; min-height:calc(100vh - 280px); }
.hp-hero-subhead{ margin:28px 0 0; font-size:var(--fs-lead); line-height:1.4; color:var(--hp-grey); font-weight:400; }
.hp-hero-sub{ font-size:var(--fs-body); line-height:1.6; color:var(--hp-ink); font-weight:600; margin:24px 0 28px; max-width:620px; }
/* hp-hero-sub를 지운 경우(2026-11-12, pages.json의 why.poetic.hero.sub를 빈 값으로)
부제 바로 아래에 버튼이 오므로, hp-hero-sub의 margin-top(24px)이 없어진 만큼을
여기 margin-top으로 대신 채워 간격을 자연스럽게 맞춘다. hp-hero-sub가 있을 때는
그 margin-bottom(28px)과 겹쳐 더 벌어지지만, 지금 why.html에서는 항상 비어 있다. */
.hp-hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; margin-bottom:28px; }
.hp-hairline{ height:1px; background:var(--hp-line); margin:0 0 28px; }
/* ---------- 주황 막대 그래프(2026-11-12) — 4,000건/3,000곳/16년 100%, 0회만 0% ----------
세 장은 카드 전체가 주황으로 꽉 차고 0회만 빈 카드라, 글자가 막대 경계에 걸칠 일이
없다(이전의 잉크/흰 두 겹 + clip-path 반전 구조는 필요 없어져서 뺐다 — 텍스트 한 겹,
스크린리더 중복도 자연히 없어진다). @property로 --bar-h를 애니메이션 가능한 값으로
등록해 막대가 부드럽게 차오르게 한다. 글자는 흰색으로 미리 깔아 두되 막대가 다 찬
뒤(0.9s 뒤) 0.2s 페이드인해서, 차오르는 중간에 밝은 카드 바탕 위에서 흰 글자가
떠 보이지 않게 한다 — static/why-chart.js가 IntersectionObserver로 한 번만 트리거한다.
0회 카드 바닥의 주황선(과 그 그어지는 애니메이션)은 뺐다(2026-11-12) — 그냥 빈 카드. */
@property --bar-h{ syntax:''; inherits:true; initial-value:0%; }
.sp-chart-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.sp-chart-card{
--bar-h:0%;
position:relative; overflow:hidden; isolation:isolate;
background:var(--hp-card-bg); border:1px solid var(--hp-line); border-radius:var(--radius-card);
height:150px;
transition:--bar-h .9s cubic-bezier(.16,1,.3,1);
}
.sp-chart-bar{ position:absolute; left:0; right:0; bottom:0; height:var(--bar-h); background:var(--hp-accent); }
.sp-chart-text{ position:absolute; inset:0; padding:20px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; color:var(--hp-ink); }
.sp-chart-card--zero .sp-chart-text{ color:var(--hp-ink); }
.sp-chart-card:not(.sp-chart-card--zero) .sp-chart-text{ color:#FFFFFF; opacity:0; transition:opacity .2s ease; }
.sp-chart-card:not(.sp-chart-card--zero).is-text-in .sp-chart-text{ opacity:1; }
.sp-chart-value{ font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.sp-chart-label{ font-size:12px; font-weight:600; margin-top:12px; }
@media (prefers-reduced-motion:reduce){
.sp-chart-card{ transition:none; }
.sp-chart-text{ transition:none; }
}
/* ---------- 브랜드 스테이트먼트(통계 근거 + 사진) ---------- */
.hp-statement{ text-align:center; }
.hp-statement-desc{ font-size:17px; color:var(--hp-grey); line-height:1.6; max-width:560px; margin:16px auto 0; }
.hp-photo-block{ position:relative; margin-top:48px; width:100%; min-height:280px; border-radius:var(--radius-card); border:1px solid var(--hp-line); overflow:hidden; background-color:#2a2d33; }
/* 사진 4장 크로스페이드 — CSS 그리드 스태킹(전부 같은 셀에 겹쳐 놓기)으로 전환만 하고
줌·슬라이드는 쓰지 않는다. visibility를 opacity보다 늦게/빠르게 전환해 숨은 사진은
클릭·탭 포커스도 받지 않게 한다. */
.hp-photo-stage{ position:absolute; inset:0; display:grid; }
.hp-photo-img{ grid-area:1 / 1; width:100%; height:100%; object-fit:cover; opacity:0; visibility:hidden; transition:opacity .8s ease, visibility 0s linear .8s; }
.hp-photo-img.is-active{ opacity:1; visibility:visible; transition:opacity .8s ease, visibility 0s linear 0s; }
.hp-photo-overlay{ position:absolute; inset:0; background:rgba(11,13,18,.55); }
.hp-photo-corner{ position:absolute; z-index:1; font-size:10px; letter-spacing:.06em; color:rgba(255,255,250,.9); text-transform:uppercase; }
.hp-photo-corner--tl{ top:16px; left:16px; }
.hp-photo-corner--bl{ bottom:16px; left:16px; }
.hp-photo-corner--br{ bottom:16px; right:16px; letter-spacing:.08em; }
.hp-photo-nav{ display:flex; align-items:center; gap:10px; }
.hp-photo-counter{ font-variant-numeric:tabular-nums; }
.hp-carousel-btns--photo{ display:flex; gap:2px; }
.hp-carousel-btns--photo button{ width:22px; height:22px; border-radius:50%; background:none; border:none; padding:0; color:rgba(255,255,250,.85); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color .15s ease; }
.hp-carousel-btns--photo button:hover{ color:var(--hp-white); }
.hp-carousel-btns--photo svg{ width:14px; height:14px; }
.hp-photo-foot{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-top:12px; }
.hp-photo-caption-below{ font-size:13px; color:var(--hp-grey); margin:0; }
.hp-photo-disclaimer{ font-size:12px; color:var(--hp-grey); margin:0; }
@media (prefers-reduced-motion:reduce){
.hp-photo-img{ transition:none; }
}
/* ---------- KOSIS 통계 근거(지시서 §1 — 서브페이지 상세목록 행 스타일과 맞춤, static/sub.css의 .sp-row 참고) ---------- */
.hp-kosis-table-wrap{ overflow-x:auto; margin-top:24px; -webkit-overflow-scrolling:touch; }
.hp-kosis-table{ width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap; }
.hp-kosis-table th{ text-align:left; padding:10px 12px; font-size:11px; color:var(--hp-grey); font-weight:600; border-top:1px solid var(--hp-line); border-bottom:1px solid var(--hp-line); }
.hp-kosis-table td{ padding:14px 12px; border-top:1px solid var(--hp-line); color:var(--hp-ink); font-variant-numeric:tabular-nums; }
.hp-kosis-table tr:last-child td{ border-bottom:1px solid var(--hp-line); }
.hp-kosis-table td:first-child{ font-weight:600; }
.hp-kosis-share{ margin-top:20px; font-size:14px; color:var(--hp-grey); line-height:1.6; }
.hp-kosis-source{ margin-top:14px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--hp-grey); }
.hp-kosis-source a{ color:var(--hp-ink); font-weight:600; }
.hp-kosis-source a:hover{ color:var(--hp-accent-text); }
/* ---------- 기능 카드 (블랙 카드 + 미니 UI) ---------- */
.hp-features-head{ margin-bottom:36px; }
.hp-features-head .hp-headline-lg{ margin-top:10px; }
.hp-feature-card{ position:relative; overflow:hidden; background:var(--hp-black); color:var(--hp-white); border:1px solid var(--hp-line-dark); border-radius:var(--radius-card); padding:28px 20px; margin-bottom:20px; }
.hp-feature-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.hp-feature-card-head h3{ color:var(--hp-white); font-weight:600; }
/* 카드 제목은 화면 크기와 무관하게 --fs-h3(20px) 고정 — .hp-headline-lg(섹션 제목용, 최대
32px)를 여기서만 좁혀서 쓴다(2026-11-10 타이포 축소). */
.hp-feature-card-head .hp-headline-lg{ font-size:var(--fs-h3); line-height:1.3; }
.hp-feature-index{ font-size:14px; color:rgba(255,255,250,.4); font-weight:600; white-space:nowrap; }
.hp-feature-card-foot{ border-top:1px solid rgba(255,255,255,.1); padding-top:18px; margin-top:4px; }
.hp-feature-card-foot p{ color:rgba(255,255,250,.82); font-size:14px; line-height:1.6; margin:0; }
.hp-features-foot{ margin-top:32px; }
.hp-features-foot .hp-pill{ margin-top:16px; }
.hp-mockup{ background:var(--hp-white); color:var(--hp-ink); border:1px solid var(--hp-line); border-radius:var(--radius-card); padding:18px; margin:24px 0; }
.hp-mockup-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--hp-line); padding-bottom:12px; margin-bottom:12px; }
.hp-mockup-head-left{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hp-mockup-title{ font-size:15px; font-weight:600; }
.hp-chip{ font-size:10px; font-weight:600; padding:3px 9px; border-radius:var(--radius-btn); display:inline-block; }
.hp-chip--tint{ background:var(--hp-green-tint); color:var(--hp-accent-text); }
/* ---------- 정산 장부 티커 (CSS 애니메이션, JS는 호버 밖 일시정지 보조만) ---------- */
:root{ --hp-ledger-row-h:40px; --hp-ledger-cols:76px 20px 56px 1fr 60px; }
.hp-mockup--ledger{ display:flex; flex-direction:column; }
.hp-ledger-head, .hp-ledger-row{
display:grid; grid-template-columns:var(--hp-ledger-cols); gap:8px; align-items:center;
}
.hp-ledger-head{
font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--hp-grey); font-weight:600;
padding:0 2px 8px; border-bottom:1px solid var(--hp-line); margin-bottom:2px;
}
.hp-ledger-head span:nth-child(n+3), .hp-ledger-row .hp-num{ text-align:right; }
.hp-ledger-row .hp-num{ font-variant-numeric:tabular-nums; }
.hp-ledger-viewport{
position:relative; overflow:hidden; height:calc(var(--hp-ledger-row-h) * 5.5);
mask-image:linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
-webkit-mask-image:linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
}
.hp-ledger-track{
display:flex; flex-direction:column;
animation:hp-ledger-scroll var(--hp-ledger-dur, 120s) linear infinite;
}
.hp-ledger-viewport:hover .hp-ledger-track,
.hp-ledger-viewport.hp-ledger-offscreen .hp-ledger-track{ animation-play-state:paused; }
.hp-ledger-row{ font-size:12px; padding:9px 2px; border-bottom:1px solid var(--hp-line); height:var(--hp-ledger-row-h); box-sizing:border-box; }
.hp-chip-label{ display:none; }
.hp-ledger-reduced-note{ display:none; font-size:11px; color:var(--hp-grey); margin:10px 0 0; }
@keyframes hp-ledger-scroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@media (prefers-reduced-motion:reduce){
.hp-ledger-viewport{ height:calc(var(--hp-ledger-row-h) * 5); mask-image:none; -webkit-mask-image:none; }
.hp-ledger-track{ animation:none !important; transform:none !important; }
.hp-ledger-reduced-note{ display:block; }
}
.hp-crm-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.hp-crm-field{ background:#F6F6F1; border:1px solid var(--hp-line); border-radius:var(--radius-card); padding:12px; display:flex; flex-direction:column; gap:4px; }
.hp-field-label{ font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--hp-grey); }
.hp-field-value{ font-size:14px; font-weight:600; letter-spacing:.02em; }
.hp-mockup-foot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; border-top:1px solid var(--hp-line); padding-top:12px; margin-top:14px; }
.hp-crm-badges{ display:flex; align-items:center; gap:6px; }
.hp-chip--solid{ background:var(--hp-green); color:var(--hp-white); transition:opacity .25s ease, transform .25s ease; }
.hp-chat-dot{ width:10px; height:10px; border-radius:50%; background:var(--hp-green); }
.hp-chat-list{ display:flex; flex-direction:column; gap:12px; }
.hp-chat-bubble{ background:#F6F6F1; border:1px solid var(--hp-line); border-radius:var(--radius-card); border-top-left-radius:4px; padding:12px 14px; max-width:100%; transition:opacity .4s ease, transform .4s ease; }
.hp-chat-bubble--accent{ background:rgba(251,233,222,.5); border-color:rgba(227,107,44,.2); }
.hp-chat-bubble--sheet{ padding:0; overflow:hidden; background:var(--hp-white); }
.hp-chat-label{ display:block; font-size:11px; font-weight:600; color:var(--hp-accent-text); margin-bottom:4px; }
.hp-chat-text{ font-size:13px; line-height:1.55; margin:0; font-weight:600; }
.hp-policy-sheet{ padding:12px 14px; }
.hp-policy-sheet-head{ display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:600; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--hp-line); }
.hp-policy-sheet-row{ display:grid; grid-template-columns:54px 1fr auto; gap:8px; align-items:center; font-size:11px; padding:5px 0; }
.hp-policy-sheet-row span:first-child{ font-weight:600; }
.hp-policy-sheet-price{ font-weight:600; filter:blur(4px); -webkit-filter:blur(4px); user-select:none; }
/* 메시지 등장 애니메이션: 기본은 전부 보이는 안전한 상태(JS 꺼지면 이대로 멈춤).
static/home-poetic-cards.js가 로드를 확인한 뒤에만 이 클래스를 붙여서 숨겼다가
순서대로 뗀다 — "JS는 자기가 되돌릴 수 있는 것만 가린다" 원칙. */
.hp-chat-msg--pending{ opacity:0; transform:translateY(8px); }
@media (prefers-reduced-motion:reduce){
.hp-chat-bubble, .hp-chip--solid{ transition:none; }
}
/* ---------- 약속 섹션 ---------- */
.hp-promise{ position:relative; overflow:hidden; background:var(--hp-black); color:var(--hp-white); }
.hp-promise .hp-label{ color:var(--hp-green); }
.hp-promise .hp-label-dot{ border-radius:2px; }
.hp-quote{ font-size:20px; font-weight:600; line-height:1.4; letter-spacing:-.015em; margin:0 0 36px; max-width:760px; }
.hp-quote span{ display:block; }
/* 인용문 5개 롤링 — 그리드 스태킹으로 전부 같은 칸에 겹쳐서 가장 긴 문구 기준으로
영역 높이가 자동 고정된다(들썩임 없음). 숨은 항목은 visibility로 포커스·클릭도 막는다. */
.hp-quote-stage{ display:grid; }
.hp-quote-item{ grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s linear .6s; }
.hp-quote-item.is-active{ opacity:1; visibility:visible; transition:opacity .6s ease, visibility 0s linear 0s; }
@media (prefers-reduced-motion:reduce){
.hp-quote-item{ transition:none; }
}
.hp-promise-grid{ display:flex; flex-direction:column; gap:32px; }
.hp-promise-photo-col{ width:100%; }
.hp-promise-photo-lg{
width:100%; aspect-ratio:4/5; max-width:360px; margin:0 auto;
background-color:var(--hp-black); background-size:cover; background-position:center top;
filter:grayscale(1) saturate(0);
transform:scaleX(-1);
-webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 42%, black 58%, transparent 100%);
mask-image:radial-gradient(ellipse 78% 82% at 50% 42%, black 58%, transparent 100%);
}
.hp-promise-content{ flex:1; min-width:0; }
.hp-promise-foot{ display:flex; flex-direction:column; gap:28px; border-top:1px solid rgba(255,255,255,.1); padding-top:28px; }
.hp-promise-person{ display:flex; gap:18px; align-items:flex-start; }
.hp-promise-name{ display:block; font-size:15px; font-weight:600; }
.hp-promise-title{ display:block; font-size:12px; color:rgba(255,255,250,.55); margin:3px 0 14px; }
.hp-promise-carousel{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hp-carousel-btns{ display:flex; gap:8px; }
.hp-carousel-btns button{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); border:none; color:var(--hp-white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .15s ease; }
.hp-carousel-btns button:hover{ background:rgba(255,255,255,.2); }
/* ---------- 시작 섹션 ---------- */
.hp-start-head{ margin-bottom:28px; }
.hp-start-list{ border-top:1px solid var(--hp-line); }
.hp-start-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 4px; border-bottom:1px solid var(--hp-line); }
.hp-start-text{ font-size:15px; font-weight:600; }
.hp-start-note{ color:var(--hp-grey); font-size:13px; margin:28px 0 20px; }
/* ---------- 신뢰 섹션 ---------- */
.hp-trust-body{ margin:14px 0 28px; max-width:640px; }
.hp-trust-badges{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding-top:24px; border-top:1px solid var(--hp-line); }
.hp-badge{ background:#F6F6F1; border:1px solid var(--hp-line); border-radius:var(--radius-card); padding:16px; display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-height:120px; color:var(--hp-ink); }
.hp-badge h4{ font-size:14px; font-weight:600; margin:0; }
.hp-badge p{ font-size:11px; color:var(--hp-grey); margin:3px 0 0; }
/* ---------- 통신사 섹션 ---------- */
.hp-carriers{ position:relative; overflow:hidden; background:var(--hp-black); color:var(--hp-white); }
.hp-carriers-label .hp-label{ color:rgba(255,255,250,.6); }
.hp-carriers-label .hp-label-dot{ border-radius:2px; background:var(--hp-green); }
.hp-carriers-names{ position:relative; z-index:1; font-size:40px; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:16px 0 24px; }
.hp-carriers-body{ color:rgba(255,255,250,.8); max-width:420px; margin:0 0 20px; }
/* 통신사 줄 호버 — 포인터 있는 기기에서만(터치/모바일 제외) */
@media (hover:hover) and (pointer:fine){
.hp-carriers-names > div{ transition:color .3s ease, transform .3s ease, opacity .3s ease; }
.hp-carriers-names:hover > div{ opacity:.5; }
.hp-carriers-names > div:hover{ opacity:1; color:#F2A16E; transform:translateX(8px); }
}
/* ---------- 픽셀 잔상(hover trail, poetic.com 레퍼런스) ----------
호스트(.hp-trail-host)는 position:relative+overflow:hidden이어야 하고,
본문 콘텐츠는 z-index:1로 trail 레이어 위에 뜬다. static/home-poetic-trail.js가
hover:hover+pointer:fine+!prefers-reduced-motion일 때만 칸을 생성한다 — 조건이
안 맞으면 JS가 아예 리스너를 안 걸어서 평소엔 빈 레이어로 아무 영향 없다.
색은 호스트의 data-trail="green"|"gray" 값으로 JS가 셀마다 인라인으로 정한다
(검은 카드 호스트가 흰 섹션 호스트 안에 중첩돼 있어도 closest()로 가장 안쪽
호스트만 선택되므로 겹치는 곳에서 색이 섞이지 않는다). */
.hp-trail-host{ position:relative; overflow:hidden; }
.hp-trail{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
/* statement 사진 블록은 자식이 이미 position:absolute/relative라 DOM 순서(trail이 첫 자식)만으로
충분히 위에 쌓인다 — 아래 규칙은 일반 flow 콘텐츠를 쓰는 다른 호스트에만 필요하다. */
.hp-feature-card > :not(.hp-trail),
.hp-promise > :not(.hp-trail),
.hp-carriers > :not(.hp-trail),
.hp-hero > :not(.hp-trail),
.hp-statement > :not(.hp-trail),
.hp-features > :not(.hp-trail),
.hp-start > :not(.hp-trail),
.hp-trust > :not(.hp-trail),
.hp-closing > :not(.hp-trail){ position:relative; z-index:1; }
.hp-trail-cell{
position:absolute; width:20px; height:20px;
animation:hp-trail-pop .16s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes hp-trail-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }
/* ---------- 마무리 CTA ---------- */
.hp-closing-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; }
/* 헤더·푸터·하단 고정바는 static/site.css로 옮겨 서브페이지와 공유한다. */
/* ---------- 데스크톱 확장 ---------- */
@media (min-width:768px){
.hp-wrap{ padding:0 40px; }
.hp-section{ padding:120px 0; }
.hp-display-lg{ font-size:56px; line-height:1.1; }
.hp-headline-lg{ line-height:1.2; }
.hp-headline-md{ font-size:28px; line-height:1.3; }
.hp-body-xl{ font-size:19px; }
.hp-hero{ padding-top:56px; }
.hp-hero-top{ min-height:calc(100vh - 400px); }
.hp-photo-block{ min-height:440px; border-radius:var(--radius-card); margin-top:48px; }
.hp-photo-corner{ font-size:11px; }
.hp-feature-card{ padding:52px 56px; border-radius:var(--radius-card); min-height:560px; display:flex; flex-direction:column; justify-content:space-between; }
.hp-mockup{ max-width:720px; margin:40px auto; padding:28px 32px; border-radius:var(--radius-card); }
.hp-feature-card-foot p{ font-size:16px; }
.hp-mockup--ledger{ max-width:min(70%,820px); }
:root{ --hp-ledger-row-h:44px; --hp-ledger-cols:110px 32px 90px 1fr 140px; }
.hp-ledger-head{ font-size:10px; padding-bottom:10px; }
.hp-ledger-row{ font-size:14px; gap:14px; }
.hp-chip-label{ display:inline; }
.hp-quote{ font-size:32px; max-width:900px; }
.hp-promise-grid{ flex-direction:row; align-items:stretch; gap:56px; }
.hp-promise-photo-col{ width:40%; flex:0 0 40%; }
.hp-promise-photo-lg{ max-width:none; height:100%; }
.hp-promise-content{ display:flex; flex-direction:column; justify-content:center; }
.hp-promise-foot{ flex-direction:row; justify-content:space-between; align-items:flex-end; }
.hp-promise-person{ align-items:center; }
.hp-trust-badges{ grid-template-columns:repeat(6,1fr); gap:16px; }
.hp-carriers-names{ font-size:68px; }
}
@media (min-width:1024px){
.hp-hero-sub{ max-width:none; white-space:nowrap; }
/* 모바일(1023px 이하)은 2x2, 여기부터 4장 한 줄(계단식이 보이려면 가로로 나란해야 함). */
.sp-chart-row{ grid-template-columns:repeat(4,1fr); gap:16px; }
.sp-chart-card{ height:220px; }
.sp-chart-text{ padding:28px; }
.sp-chart-value{ font-size:40px; }
.sp-chart-label{ font-size:13px; }
}
@media (min-width:1281px){
.hp-hero{ padding-top:88px; }
.hp-hero-top{ min-height:calc(100vh - 480px); }
}
/* ---------- 인트로·광고 ----------
기존 "커서 바 + 와이프" 인트로(legacy_v1/intro-cursor-wipe.js)는 폐기됐다.
지금의 인트로+광고 무대는 static/home-ad.js + static/home-ad.css가 전담한다
(기획서/클로드코드_홈_광고인트로_지시서.md). */
/* ---------- 2026-11-02 수정 ---------- */
/* 두 톤 제목 가운데 정렬 복구(사이트 전체): site.css의 .hp-two-tone(margin:auto)을
.hp-headline-lg/.hp-headline-md의 margin:0 단축 선언이 같은 우선순위로 덮어써서
본문 쪽으로 쏠리던 문제 — statement·HOW WE WORK·거래 시작하기 제목 전부 해당. */
.hp-two-tone{ margin-left:auto; margin-right:auto; }
/* 히어로 위/아래 여백 축소(절반): min-height를 더 크게 빼서 hp-hero-top이 차지하는
세로 공간을 줄이면 헤드라인 아래 빈 공간과 hp-hero-below까지 거리가 함께 준다. */
@media (min-width:1024px){
.hp-hero-top{ min-height:calc(100vh - 560px); }
}
@media (min-width:1281px){
.hp-hero-top{ min-height:calc(100vh - 575px); }
}
/* /1 /2 /3 카드 3장을 한 화면에 가로로 (데스크톱). 모바일은 기존처럼 세로 */
@media (min-width:1024px){
.hp-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.hp-feature-grid .hp-feature-card{ margin:0; padding:36px 32px; min-height:560px; border-radius:var(--radius-card); }
.hp-feature-grid .hp-mockup,
.hp-feature-grid .hp-mockup--ledger{ max-width:100%; width:100%; margin:28px 0; padding:18px 16px; border-radius:var(--radius-card); }
.hp-feature-grid{ --hp-ledger-row-h:36px; --hp-ledger-cols:74px 20px 46px 1fr 62px; }
.hp-feature-grid .hp-ledger-head{ font-size:9px; }
.hp-feature-grid .hp-ledger-row{ font-size:11px; }
.hp-feature-grid .hp-chat-text{ font-size:12px; }
.hp-feature-grid .hp-feature-card-foot p{ font-size:14px; }
}
/* 2026-11-02 b: 3열 카드 높이 줄이기 — /2 고객 카드를 한 줄짜리 행으로 압축, 주소·보안 문구 숨김 / 장부 금액 잘림 해결 */
@media (min-width:1024px){
.hp-feature-grid .hp-feature-card{ min-height:0; }
.hp-feature-grid .hp-mockup{ margin:24px 0; }
.hp-feature-grid .hp-mockup--crm .hp-mockup-head{ flex-wrap:wrap; gap:8px; }
.hp-feature-grid .hp-crm-grid{ gap:0; }
.hp-feature-grid .hp-crm-field{ flex-direction:row; justify-content:space-between; align-items:center; background:none; border:0; border-bottom:1px solid var(--hp-line); border-radius:0; padding:10px 2px; }
.hp-feature-grid .hp-crm-field:last-child{ border-bottom:0; }
.hp-feature-grid .hp-crm-field:nth-child(n+4){ display:none; }
.hp-feature-grid .hp-mockup--crm .hp-mockup-foot{ display:none; }
.hp-feature-grid .hp-field-label{ font-size:11px; letter-spacing:0; text-transform:none; }
.hp-feature-grid .hp-field-value{ font-size:13px; }
.hp-feature-grid{ --hp-ledger-cols:76px 20px 46px 1fr; }
.hp-feature-grid .hp-ledger-head > :nth-child(n+5),
.hp-feature-grid .hp-ledger-row > :nth-child(n+5){ display:none; }
}
@media (min-width:1024px){
/* /3 정책방: 채팅창 높이를 고정하고 최신 메시지가 아래에 보이도록 — 카드 3장 높이를 함께 줄인다 */
.hp-feature-grid .hp-mockup--chat{ height:250px; overflow:hidden; display:flex; flex-direction:column; }
.hp-feature-grid .hp-mockup--chat .hp-chat-list{ margin-top:auto; }
.hp-feature-grid .hp-mockup--chat .hp-chat-list{ min-height:0; overflow:hidden; justify-content:flex-end; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 36px); mask-image:linear-gradient(to bottom, transparent 0, #000 36px); }
.hp-feature-grid .hp-mockup--chat .hp-mockup-head{ position:relative; z-index:1; }
}
/* 왜 ENTER 히어로 — 회사 분류 선 스케치(2026-11-02). 그림의 바닥선 = 구분선. */
.hp-ground{ position:relative; background:transparent; }
.hp-hero-sketch{ position:absolute; right:0; bottom:-1px; width:100%; height:auto; z-index:0; pointer-events:none; user-select:none; }
.hp-hero .hp-hero-top, .hp-hero .hp-hero-sub, .hp-hero .hp-hero-ctas{ position:relative; z-index:1; }
.hp-hero:has(.hp-ground) .hp-hero-sub{ max-width:560px; white-space:normal; }