/* ── mobile.css — 모바일(≤1023) 시안 정합 전용 오버라이드 ─────────────────────
정본: Figma 모바일 프레임 (홈 214:60753 · 급여 614:6311 · 세무 836:59014 ·
플랫폼 632:59518 · 경리 634:61066 · 리포트 634:60806 · 지원금 634:60199), 375 폭 기준.
규칙: 이 파일은 맨 마지막에 로드된다(페이지 css 다음). 기존 css 의 @media 블록은
건드리지 않고 여기서 덮어쓴다 — 같은 특이도면 나중 것이 이기므로 !important 불필요.
PC(≥1024) 규칙은 여기 두지 않는다. */
/* ═══════════════════════════════════════════════════════════════════════
홈 (index.html) — 모바일 시안 214:60753 · 2026-08-29 눈 대조 6건
═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
/* 1. overview 로고 마퀴 — 시안: 좌우 페이드 없이 화면 끝에서 잘림, 줄 간격 24,
두 번째 줄은 88px 밀려 시작(엇갈림). 슬롯 103x36 · 간격 26 은 home.css 에 이미 있음. */
.logos{-webkit-mask-image:none;mask-image:none;margin-inline:calc(50% - 50vw);padding-inline:0}
.logo-row + .logo-row{margin-top:24px}
.logo-row.is-rev .logo-track{padding-left:88px}
/* 3. 인터뷰 — 시안: 다크 value 섹션 위로 #f0f0f0 판이 상단 라운드 20 으로 올라오고(-20 겹침),
제목 중앙, 제목→카드 36, 좌우 20 · 상하 80. 카드: 흰 배경 · 패딩 20 · 라운드 16 ·
카드 간격 16 · 제목 20/30 Medium · 본문 16/24 #838383(제목과 4) · 본문→푸터 56 ·
아바타 42 라운드 10 · 간격 10. */
.itv-sec{position:relative;z-index:1;margin-top:-20px;border-radius:20px 20px 0 0;
padding:80px 0 80px;background:#f0f0f0}
.itv-sec .display{text-align:center;margin-bottom:36px}
.itv-grid{display:flex;flex-direction:column;gap:16px}
.itv{padding:20px;border-radius:16px;box-shadow:none}
.itv:hover{transform:none;box-shadow:none}
.itv h3{font-size:20px;line-height:30px;font-weight:500;letter-spacing:-.2px}
.itv p{margin-top:4px;font-size:16px;line-height:24px;letter-spacing:-.2px}
.itv footer{margin-top:56px;gap:10px}
.itv footer img{width:42px;height:42px;border-radius:10px}
.itv footer em{font-size:14px;line-height:21px}
.itv footer b{font-size:14px;line-height:21px}
/* 4. 에이전트 카드 — 시안 급여 카드: 버튼 흰 배경·검은 글자 12/16 Bold · 패딩 6/12 · 라운드 6,
카드 색 반전(hover 그리드 규칙)은 터치 기기에서 의미 없음 → 급여=주황 고정.
세무 카드 알약(af-pill)이 카드 폭을 넘어 오른쪽으로 새던 것 → 카드 안으로. */
.agent-grid:hover .agent-card.is-pay{--c-bg:var(--brand);--c-fg:#fff;--c-sub:#fff;--c-btn:#fff;--c-btn-fg:var(--ink);
--af-a1:.97;--af-a2:.43;--af-shadow:none}
.agent-grid:hover .agent-card:not(.is-pay):hover{--c-bg:#F9F9F9;--c-fg:var(--ink);--c-sub:#5B5B5B;--c-btn:#111;--c-btn-fg:#fff}
.agent-card .btn.btn-sm{height:28px;padding-inline:12px;font-size:12px;line-height:16px;font-weight:700;
border-radius:6px;letter-spacing:-.2px}
.agent-head{padding:24px 24px 0}
.agent-head h3{font-size:24px;line-height:30px}
.agent-head p{margin-top:4px;font-size:14px;line-height:18px}
.agent-head .btn{margin-top:16px}
.agent-card .af{margin-top:20px}
.agent-card{overflow:hidden}
.af-pill{max-width:calc(100% - 48px)}
/* 5. CTA — 시안: 좌우 20 · 상하 80 · 제목 32/38 Bold(3줄, br.br-m 은 index.html 에서) ·
제목→리드 8 · 리드 14/18 Medium · 리드→버튼 32 · 버튼 간격 8, 흰 버튼 92x40 라운드 8. */
.footer-cta{padding-block:80px}
.footer-cta .display{font-size:32px;line-height:38px;letter-spacing:-.4px}
.footer-cta .lead{margin-top:8px;font-size:14px;line-height:18px;letter-spacing:-.2px}
.footer-actions{margin-top:32px;gap:8px}
.footer-actions .btn{height:40px;padding-inline:16px;border-radius:8px;font-size:14px;line-height:18px;min-width:92px}
.footer{border-radius:20px 20px 0 0;overflow:hidden}
/* 6. 푸터 — 시안: 4열이 한 줄(justify-between), 열 제목 14/18 Bold 흰50%, 링크 14/21 Medium 흰,
열 안 간격 10 · 열→워드마크 96 · 좌우 20 상하 60. 회사정보 12/16 흰60%·2줄(| 구분). */
.footer-nav{padding-bottom:60px}
.footer-nav-in{padding-top:60px;gap:96px}
.footer-cols{display:flex;flex-wrap:nowrap;justify-content:space-between;width:100%;gap:12px}
.footer-col{min-width:0}
.footer-col h4{font-size:14px;line-height:18px;letter-spacing:-.2px;color:rgba(255,255,255,.5);margin-bottom:10px}
/* 시안 14/21 · 항목 간격 10. 터치영역 24 확보를 위해 상하 2px 은 패딩으로, 나머지 6 은 마진으로 */
.footer-col a,.footer-col .is-soon{font-size:14px;line-height:21px;font-weight:500;letter-spacing:-.2px;
padding-block:2px;margin-bottom:6px}
.footer-col a i{font-size:.9em;margin-left:4px}
.footer-mark{opacity:.9}
.footer-meta{margin-top:40px;text-align:left;font-size:12px;line-height:16px;letter-spacing:-.4px;
color:rgba(255,255,255,.6);opacity:.8}
/* 마크업: 회사|대표 메일사업자번호주소 → 시안 2줄로 재배열 */
.footer-meta span{display:inline;margin:0}
.footer-meta p:first-child{white-space:nowrap}
.footer-meta span:nth-of-type(1){margin-left:6px}
.footer-meta span:nth-of-type(2)::before{content:"\A";white-space:pre}
.footer-meta span:nth-of-type(3)::before{content:" | "}
.footer-meta p+p{margin-top:4px}
/* 7. FAQ — 시안: 항목 간격 12 · 패딩 16 · 라운드 10 · 질문 16/20 Medium · 아이콘 20 ·
답 14/20 · 제목→목록 36. */
.faq-sec .display{margin-bottom:36px}
.faq{gap:12px}
.faq-item{border-radius:10px}
.faq-q{padding:16px;gap:20px;font-size:16px;line-height:20px;font-weight:500;letter-spacing:-.2px;align-items:flex-start}
.faq-icon{width:20px;height:20px}
.faq-icon::before{width:10px;height:2px}
.faq-icon::after{width:2px;height:10px}
.faq-a p{padding:0 16px 16px;font-size:14px;line-height:20px;letter-spacing:-.2px}
}
/* ═══════════════════════════════════════════════════════════════════════
세무 (tax.html) — 모바일 시안 836:59014 · 2026-08-29 눈 대조
═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
/* T1. 히어로 — 시안은 카피(제목 32/44 → 서브 14/18 → 검정 버튼 91x40)가 위, 사진 카드 335x600 라운드 20 이 아래.
라이브는 사진이 위·카피가 아래였고 서브카피가 제목 위 아이브로(— 접두)로 잘려 있었다. */
.txhero .wrap{display:flex;flex-direction:column;padding-inline:var(--gutter,20px)}
.txhero-copy{order:0;display:flex;flex-direction:column;padding:72px 0 0}
.txhero-copy h1{order:1;font-size:32px;line-height:44px;letter-spacing:-.4px}
.txhero-copy .eyebrow{order:2;margin:12px 0 0;font-size:14px;line-height:18px;font-weight:500;
letter-spacing:-.2px;color:var(--ink);text-transform:none}
.txhero-copy .eyebrow::before{content:none}
.txhero-copy p:last-child{order:3;margin-top:20px}
.txhero-copy .btn{height:40px;padding-inline:16px;font-size:14px;line-height:18px;border-radius:8px;
background:#111;color:#fff;border-color:#111}
.txhero-fig{order:1;margin-top:36px;aspect-ratio:335/600;border-radius:20px}
/* 모바일 소스(tax-hero-m.jpg)는 시안 프레임 렌더라 딤이 이미 구워져 있다 — 데스크톱용 딤을
또 얹으면 두 번 어두워진다(실측 밝기 33.7 vs 시안 57.8). */
.txhero-fig::after{content:none}
/* 모바일 소스가 335x600 시안 프레임 그대로라 자르지 않는다 */
.txhero-bg{object-position:50% 50%}
/* 도식은 모바일 소스에 이미 들어 있다 — 겹쳐 얹으면 두 번 나온다 */
.txhero-graphic{display:none}
.txhero{padding-bottom:0}
/* T2. 처리 흐름 — 시안: 동심원 도식이 폭 335 를 꽉 채우고(라이브는 이미지 여백 때문에 ~210),
아래에 번호 목록 "1. 증빙·거래 수집" 16/20 Bold + 설명 14/21 #8d8d8d. 라이브는 설명 상자만 있었다.
hover 스팟·연결선은 터치에서 의미 없어 숨긴다. 제목은 스팟의 sr 텍스트와 같다. */
/* 급여 도식(payroll.css .structure-fig 모바일)과 동일 크롭 — 두 자산은 같은 규격(2200x1568)이라
같은 값이면 원 크기가 같다. 전에는 140% 였고 급여는 165vw 라 원이 4:3 로 달랐다. */
.tp-sub{margin-top:8px;font-size:14px;line-height:21px;font-weight:500} /* 시안 head 173 = 제목 102 + 8 + 부제 63 */
.tp-fig{width:100%;overflow:visible;margin-top:0}
/* 크롭은 .tp-crop 이 맡는다 — .tp-fig 에 걸면 아래 번호 목록(.tp-note)까지 잘린다(실측 -304) */
/* 모바일 소스는 시안 마스크 노드(375x368) export 라 자르지 않고 풀블리드로 깐다.
크롭(165vw) 방식은 데스크톱 라벨을 0.56 배로 줄여 ~11px — 시안 모바일 구성(라벨 14px)과 다른 그림이었다. */
.tp-crop{display:block;position:relative;width:calc(100% + var(--gutter)*2);max-width:none;
margin:24px calc(var(--gutter)*-1) 0}
.tp-crop img{position:static;translate:none;display:block;width:100%;max-width:none;height:auto;margin:0}
.tp-lines,.tp-spot{display:none}
.p-tax .tp-note{position:static;display:block;margin:0;padding:0 0 0 24px;background:none;box-shadow:none;border:0;
font-size:14px;line-height:21px;color:#8d8d8d;text-align:left;opacity:1;visibility:visible;transform:none;
max-width:none;width:auto}
.p-tax .tp-note + .tp-note{margin-top:24px} /* 시안 960:58937 항목 간격 24 (66→90) */
/* 시안 960:58937: 번호 제목은 x=0(거터), 설명만 24 들여쓰기. margin -24 + padding 24 로 상쇄돼
제목도 44 에 있었다 — 제목·설명이 같은 열이라 "줄이 안 맞아" 보였다. */
.p-tax .tp-note::before{display:block;margin:0 0 4px -24px;padding-left:0;font-size:16px;line-height:20px;font-weight:700;
color:#000;letter-spacing:-.4px}
.p-tax .tp-n1{margin-top:24px}
.p-tax .tp-n1::before{content:"1. 증빙·거래 수집"}
.p-tax .tp-n2::before{content:"2. 거래 정리 · 계정과목 제안"}
.p-tax .tp-n3::before{content:"3. 장부 확정·검토·신고"}
.p-tax .tp-n4::before{content:"4. 예상 세액·리포트"}
.p-tax .tp-note b{color:var(--brand);font-weight:700}
/* T4. 세액 확인·자료 전달 — 시안: 두 카드가 세로로(각 335x433 라운드 20, 간격 20).
라이브는 1600x790 한 장(좌우 2카드)을 그대로 축소해 165px 카드 둘이 나란히. 이미지를 반씩 잘라 쌓는다. */
.tx-shot{display:grid;gap:20px;margin-top:28px}
/* 시안 836:59275·59281 노드 export(335x433 / 335x437)를 그대로 쓴다. 전에는 데스크톱 1600 폭
한 장을 반 잘라 aspect 800/790 으로 깔아 카드가 시안보다 102px 낮았다(Codex 감사 001). */
.tx-shot .tx-shot-d{display:none}
.tx-shot .tx-shot-m{display:block;width:100%;height:auto;border-radius:20px;box-shadow:none}
}
/* ═══════════════════════════════════════════════════════════════════════
플랫폼 (platform.html) — 모바일 시안 632:59518
═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
/* P1. 히어로 대시보드 이미지가 오른쪽으로 새던 것 — 원인: grid item 의 min-width:auto 가 img 원본 폭(610)을
최소폭으로 잡아 열이 335 아래로 못 줄었다. 시안은 좌우 20 안쪽 335x~530 카드(라운드 20) 안에서
대시보드를 원 크기 근처로 좌상단 기준 잘라 보여준다 — 축소가 아니라 크롭. 경리·리포트·지원금 공통(platform.css). */
.hero-grid>*{min-width:0}
.hero-visual{margin:32px 0 0;width:100%;overflow:hidden;border-radius:20px;aspect-ratio:335/530}
.hero-visual>img{width:125%;max-width:none;height:100%;aspect-ratio:auto;object-fit:cover;object-position:left top;border-radius:0}
}
/* ── 공통 보정 (2026-08-29 세무·플랫폼4 대조에서 나온 것) ────────────────── */
@media (max-width:1023px){
/* 세무 흐름도 "Alfred Agent" 라벨 — 시안은 orange→plum→grape 그라데이션 글자(#ff7624→#d450fb→#7e46f7) */
.tc-agent-name{background-image:linear-gradient(90deg,#ff7624 0%,#d450fb 50%,#7e46f7 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.tc-agent-name img{vertical-align:middle}
/* pain 링크 — 20px 로는 "→ 전수 확인 불가로 공고 누락"(지원금)이 375 에서 잘린다. 시안 실측 18/26. */
/* 20/26 은 시안값(급여 614:6385 heading-bold/sm)이고 375·360 어디서도 안 잘린다 —
실측: 지원금 '전수 확인 불가로 공고 누락' 포함 전 페이지 한 줄(h26), 문서폭 넘침 0.
18 로 내렸던 근거(잘림)가 재현되지 않아 시안값으로 되돌린다. */
.pain-r{font-size:20px;line-height:26px}
}
/* ═══════════════════════════════════════════════════════════════════════
섹션 높이 정합 — Figma 모바일 프레임 body 직계 섹션 실측(tools/data/mobile-design-sections.json)
대 375 렌더 대조에서 ±60px 넘게 벌어진 것. 2026-08-29
═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
/* 홈 overview — 시안 812(화면 한 장, 헤드라인 y242·로고 y474). 라이브 404. */
.overview{min-height:812px;display:flex;align-items:center;padding-block:100px}
/* 홈 comparison — 시안 626: 상단 120 · 제목→카드 24 · 카드 254 · 하단 160. 라이브 428. */
.cmp{padding:120px 0 160px}
.cmp .display{margin-bottom:24px}
/* 홈 agent_select — 시안 1054: 상단 160 · 제목→카드 36 · 카드 335x335 ×2 · 간격 20 · 하단 100. 라이브 851(카드가 정사각이 아니었다). */
.agent{padding:160px 0 100px}
.agent .display{margin-bottom:36px}
.agent-grid{gap:20px}
.agent-card{aspect-ratio:1/1}
/* value(홈·세무·플랫폼 계열 공통) — 시안: 상단 100 · 제목→카드 54 · 카드 = 이미지 335 + 12 + 카피(제목 24/30 ×2 + 8 + 본문 14/21) · 카드 간격 54 · 하단 100.
라이브는 카드 간격·카피 여백이 커서 +100~180. */
.value{padding-block:100px}
.value>.wrap>.display{margin-bottom:54px}
.value-row+.value-row{margin-top:54px}
/* 여백의 단일 출처는 아래 margin-bottom:12 하나다. row-gap:0 은 페이지 CSS 에서 이미
지웠고(home/platform/payroll) 여기 것은 새 페이지용 안전망으로만 남긴다. */
.value-row,.value-row.is-flip{row-gap:0}
.value-row .value-media{margin-bottom:12px}
.value-copy h3{font-size:24px;line-height:30px}
.value-copy p{margin-top:8px;font-size:14px;line-height:21px}
/* 플랫폼 계열 hero — 시안: 제목 블록이 nav 아래 72 에서 시작, 블록→카드 36, 카드 아래 20. 라이브 +70. */
.hero{padding-top:calc(var(--nav-h) + 72px);padding-bottom:20px}
.hero-visual{margin-top:36px}
/* 플랫폼 계열 structure — 시안 카드 335x230 ×3, 간격 8. 라이브 카드가 내용 높이만큼만(-125~-190). */
.structure{padding-block:100px}
.steps{gap:8px}
.step-card{min-height:230px}
/* ── 플랫폼 계열(platform·accounting·report·subsidy) 모바일 타이포 — 시안 632:59518 실측 ──
hero 632:59521 · pain 632:59544 · structure 749:57527 · features 631:7912 · value 632:59669 · AI 631:7985.
페이지 CSS 모바일 블록이 1클래스라 body 클래스로 한 단계 올려 덮는다. */
:is(.p-platform,.p-acct,.p-rep,.p-sub) .hero .lead{font-size:16px;line-height:20px;font-weight:500;letter-spacing:-.2px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .hero .btn{height:40px;padding:10px 16px;border-radius:8px;
font-size:16px;line-height:20px;font-weight:700;letter-spacing:-.2px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .pain-n{font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.4px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .pain-r{margin-top:24px} /* 시안 gap 24 (10 이었다 → 항목당 -14) */
.p-platform .pain{padding-bottom:70px} /* 시안 632:59544 만 pb 70 — 경리·리포트·지원금은 100 (634:61077 등) */
:is(.p-platform,.p-acct,.p-rep,.p-sub) .structure-copy .lead{font-size:14px;line-height:21px;font-weight:500;letter-spacing:-.2px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .step-card{padding:20px;border-radius:16px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .step-n{font-size:14px;line-height:18px;font-weight:700;color:#8D8D8D;opacity:.7;letter-spacing:-.2px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .step-by{font-size:14px;line-height:18px;font-weight:700;opacity:.7;letter-spacing:-.2px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .step-by i{width:20px;height:20px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .step-ic{width:36px;height:36px;border-radius:10px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .step-body :is(h3,.h3){font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.4px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .step-body p{font-size:14px;line-height:21px;font-weight:500;color:rgba(0,0,0,.8);letter-spacing:-.2px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .value-copy li{font-size:14px;line-height:21px;font-weight:500;color:rgba(255,255,255,.8);letter-spacing:-.2px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .pf-ai-bar{font-size:14px;line-height:18px;font-weight:500;padding:12px;border-radius:12px;border-width:2px;letter-spacing:-.4px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .pf-ai-label{font-size:14px;line-height:21px;font-weight:500;color:rgba(0,0,0,.5);letter-spacing:-.2px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .pf-ai-panel li{font-size:14px;line-height:18px;font-weight:500;letter-spacing:-.4px}
:is(.p-platform,.p-acct,.p-rep,.p-sub) .pf-ai-panel{padding:17px;border-radius:12px}
/* 플랫폼 계열 features — 시안: 상단 100 · 제목→목록 64 · 항목 간격 36 · 하단 100. 라이브 -66. */
.features{padding-block:100px}
.features .display{margin-bottom:64px}
.feat-grid{gap:36px}
/* 세무 for-ceo(role) — 시안 카드 335x335 ×2 간격 20. 라이브 -99. */
/* 역할 카드 — 시안 836:59341 실측: 제목 28/34 · 부제 14/21 · 카드 335x335 라운드 20 패딩 26/20 ·
아이콘 50(라운드 10, 마크 24) · 카드 제목 24/30 · 부제 16/20 · 항목 16/24 (불릿 들여쓰기 24) ·
버튼 14/18 패딩 14/18 화살표 18 · 카드 간격 20 */
.tx-role{padding-block:76px} /* 시안 836:59341 py 76 (공통 100 이면 +48) */
.tx-role .display{font-size:28px;line-height:34px;letter-spacing:-.4px}
.tx-role .lead{margin-top:8px;font-size:14px;line-height:21px;font-weight:500;letter-spacing:-.2px}
.role-grid{gap:20px;margin-top:36px}
.role-card{min-height:335px;height:335px;border-radius:20px;padding:26px 20px}
.role-card header{gap:14px}
.role-ic{width:50px;height:50px;border-radius:10px}
.role-ic .role-mark{width:24px;height:24px}
.role-card h3{font-size:24px;line-height:30px;letter-spacing:-.4px}
.role-card header p{font-size:16px;line-height:20px;font-weight:500;letter-spacing:-.2px}
.role-card ul{margin-top:auto}
.role-card li{font-size:16px;line-height:24px;font-weight:500;padding-left:24px;letter-spacing:-.2px}
.role-card li::before{left:8px;top:10px;width:4px;height:4px}
.role-btn{margin-top:20px;padding:14px 18px;border-radius:12px;font-size:14px;line-height:18px;gap:8px}
.role-btn::after{font-size:18px;line-height:1}
}
/* ═══════════════════════════════════════════════════════════════════════
홈 요소 좌표 정합 — 375 렌더 요소 박스 vs Figma 214:60753 노드 좌표 (2026-08-29 2차)
═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
/* hero — 시안 h1 32/44(3줄 132), 버튼 91x40(14px, 패딩 16) at y308. 라이브 h1 126·버튼 132x44. */
.hhero h1{font-size:32px;line-height:44px}
.hhero .btn{height:40px;padding-inline:16px;font-size:14px;line-height:18px;border-radius:8px}
/* overview — 시안 헤드라인(y242,h136) → 96 간격 → 로고(y474,h96). 라이브 간격 28. */
.overview .logos{margin-top:96px}
/* pain(홈만) — 시안 상하 120(다른 페이지는 100). */
.overview-pin + .pain{padding-block:120px}
/* comparison — 시안: 제목 아래 24 에서 행 시작(y212), 알프레드 카드는 행 안에서 46 아래(y258)·폭 274·높이 208, 행 254. */
.cmp .display{margin-bottom:8px}
.cmp-alfred{margin-top:46px;flex:0 0 274px;width:274px}
/* value — 마지막 카드 뒤 여분 제거(시안 하단 100 만) */
.value-list{margin-bottom:0;padding-bottom:0}
.value-row:last-child{margin-bottom:0}
/* trust — 시안(780): 상단 24 · 제목카드 150 · 14 · 3만+ 130 · 14 · NPS 340 · 하단 108. 라이브 50/180/180/302/50. */
/* 홈 전용 — 급여 사진 그리드도 .trust/.trust-grid 라 페이지로 스코프한다(급여 여백 100/100 이 24/108 로 새던 원인, ark-2b 발견) */
.p-home .trust{padding:24px 0 108px}
.p-home .trust-grid{gap:14px}
.p-home .trust-left{gap:14px}
.p-home .trust-title{height:150px;min-height:0}
.p-home .trust-stat{height:130px;min-height:0;padding:12px}
.p-home .trust-nps{height:340px;min-height:0}
/* agent 카드 — 시안 알림 카드: 버튼 아래 51, 좌우 24 안쪽(폭 287). 라이브는 20 아래·좌우 0. */
.agent-card .af{margin:51px 24px 0;width:auto}
/* faq — 시안 상단 86 · 제목→목록 30 · 하단 160. 라이브 56/36/80. */
.faq-sec{padding:86px 0 160px}
.faq-sec .display{margin-bottom:30px}
/* footer — 시안 리드 2줄(폭 300 에서 줄바꿈) · 열 시작을 24 위로 · 하단 여백 그만큼 늘림 */
.footer-cta .lead{max-width:300px}
.footer-nav-in{padding-top:36px}
.footer-nav{padding-bottom:84px}
}
@media (max-width:1023px){
/* 2차 측정 보정 */
.hhero .btn,.hhero-in .btn,.hhero a.btn{min-width:0;width:auto;height:40px;padding:0 16px;font-size:14px}
.cmp-grid{margin-top:24px} /* 행 시작 y212 (제목 아래 24) */
.trust-left{margin-bottom:0}
.trust-grid{row-gap:14px}
.trust-nps{margin-top:0}
.agent-card .af-note{min-height:122px} /* 헤더 42 + 본문 80 */
}
@media (max-width:1023px){
.trust-left{grid-template-rows:auto auto} /* 1fr 1fr 이면 두 행이 150 으로 같아져 NPS 가 20 내려간다 */
.agent-card .af{min-height:122px}
}
/* ═══════════════════════════════════════════════════════════════════════
홈 글자 크기·굵기 — 시안 텍스트 노드(size/lineHeight/weight) vs 라이브 computed 대조 (2026-08-29)
라이브가 시안보다 작은 것이 대부분(카드 안 cqw 비례 글자). 모바일에서는 시안 px 로 고정한다.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
.hhero-eyebrow{font-size:16px;line-height:20px;font-weight:500}
.hhero .btn,.footer-actions .btn{font-size:16px;line-height:20px;font-weight:700}
.hh-who{font-size:13px;line-height:16px;font-weight:500}
.hh-msg{font-size:14px;line-height:20px}
/* comparison 카드 */
.cmp-a-sub{font-size:14px;line-height:18px;font-weight:500}
.cmp-col h3{font-size:16px;line-height:24px;font-weight:500}
.cmp-col li,.cmp-alfred li{font-size:14px;line-height:21px;font-weight:500}
/* value 카드 안 채팅(hm-vc) */
.hm-vc-who{font-size:13px;line-height:16px;font-weight:500}
.hm-vc-msg{font-size:14px;line-height:21px;font-weight:500}
.hm-vc-cta{font-size:13px;line-height:20px;font-weight:700}
.hm-vc-ok{font-size:13px;line-height:16px;font-weight:700}
/* pain 보조문구는 Medium */
.pain-l{font-weight:500}
/* trust */
.trust-title p{font-size:32px;line-height:38px}
.trust-n{font-size:48px;line-height:60px}
.trust-c{font-size:14px;line-height:18px;font-weight:700}
.nps-eyebrow{font-size:16px;line-height:20px;font-weight:500}
.nps-title{font-size:24px;line-height:30px;font-weight:700}
.nps-note{font-size:12px;line-height:16px;font-weight:400}
/* agent 카드 알림·알약 */
.af-note-h{font-size:14px;line-height:18px;font-weight:500}
.af-note-b{font-size:14px;line-height:18px;font-weight:400}
.af-pill{font-size:14px;line-height:18px;font-weight:400}
.af-pill.af-p3{font-size:18px;line-height:28px;font-weight:500}
}
@media (max-width:1023px){
/* 2차 대조 보정 */
.cmp-col h3{font-size:18px;line-height:24px;font-weight:700}
.value-copy p{font-weight:500}
.itv footer em{font-weight:500}
.hm-vc-cta{line-height:20px}
.hm-vc-ok{line-height:16px}
.hm-vc-3 .hm-vc-msg{font-size:13px;line-height:16px;font-weight:400}
.hm-vc-3 .hm-vc-who{font-weight:700}
}
/* 급여 trust 사진 — 시안 모바일은 컬러. payroll.css:281 이 ≤900 컬러를 선언했지만 278 `.trust-grid li img`(0,1,2)가
`.trust-grid img`(0,1,1)보다 세서 흑백이 남았다. 같은 특이도로 덮는다. */
@media (max-width:1023px){
.trust-grid li img{filter:none;transform:none}
}
/* ── 태블릿 구간(600~1023) — 모바일 시안(375)을 폭에 맞춰 늘리지 않는다 ──────────────
모바일 CSS 는 글자를 375 기준 px 로 고정하는데 카드·이미지는 100% 라, 900 폭에서 글자 14px 옆에
860px 카드가 서는 그림이 됐다(실측: agent 카드 983 · 히어로 도식 1023 · 역할 카드 983).
태블릿 시안은 없다 — 모바일 구성을 560 컬럼으로 가운데 세운다(375 의 1.5 배, 글자 28/14 가 읽히는 폭).
히어로 등 풀블리드 배경은 그대로 화면을 채우고, 콘텐츠 열만 묶인다.
.txhero .wrap / .pyhero .wrap 은 페이지 CSS 가 max-width:none 을 2클래스로 주므로 같은 조합으로 덮는다. */
@media (min-width:600px) and (max-width:1023px){
.wrap,.txhero .wrap,.pyhero .wrap{max-width:calc(560px + var(--gutter)*2);margin-inline:auto}
/* 내비·푸터는 화면 폭을 그대로 쓴다 — 콘텐츠 열에 같이 묶이면 로고·버튼이 화면 가운데로 몰린다(사용자 캡처 989) */
.nav .wrap{max-width:none} /* 푸터는 열에 둔다 — 화면 폭으로 풀면 CTA·링크가 좌측 끝에 붙어 위 콘텐츠 열과 어긋난다(989 실측) */
/* 미디어는 전부 열 폭(560)으로 통일. 375 기준으로 걸어 둔 420 상한(hm-vc·pf-ai·hero-visual·pyhero-fig)이
이 구간에서는 옆 카드(560)와 크기가 어긋나 "제멋대로"로 보였다. */
.hm-vc,.pf-ai,.hero-visual{width:100%;max-width:none;margin-inline:auto}
.pyhero-fig{width:min(100%,560px);max-width:none;margin-inline:auto} /* .pyhero .wrap 은 거터 패딩이 없어 100% 가 600 이 된다 */
/* 히어로 사진 높이: 시안 비율(335:600)을 560 폭에 그대로 쓰면 1003px — 사진 한 장에 스크롤 1000 은 과하다.
태블릿 판 시안이 없으므로 335:450(560x753)으로 낮춘다. 급여(.pyhero-fig)는 payroll.css 에서 같은 값(ark-2b).
세무는 카드가 사진 하단에 구워져 있어 아래 기준으로 자른다. */
/* 비교표: 모바일은 가로 스크롤러(시안). 600 열 안에서 자르면 화면 한가운데서 카드가 끊겨 "삐져나온" 것처럼 보인다
→ 스크롤러만 화면 폭으로 빼고, 첫 카드는 열 좌단에 맞춘다. */
.cmp-grid{width:100vw;margin-left:calc(50% - 50vw);padding-inline:calc(50vw - 280px);scroll-padding-inline:calc(50vw - 280px)}
/* 에이전트 카드: 375 정방(335)을 560 에 그대로 쓰면 560x560 에 내용 330 — 아래가 텅 빈다. 내용 높이로. */
/* 에이전트 카드: 560 한 열에 세우면 375 정방(335) 규칙이 560x560 을 만들어 아래가 비고, 내용 높이로 두면
두 카드 높이가 제각각(378/452)이다. 태블릿에서는 데스크톱처럼 2열(각 270, 정방)로 — 375 카드(335)와 비례가 비슷해
안쪽 글자·알약 크기가 시안 모바일과 같은 느낌이 된다. */
.agent-card{aspect-ratio:auto}
/* 알림 카드(.af-note)가 375 규칙(af 안 7.87% 들여쓰기 + af 비율 610/225 로 높이 결정)을 그대로 받아
560 에서는 제목보다 20px 안쪽에 서고 안에 30px 빈 틈이 생겼다 → 카드 패딩선에 맞추고 내용 높이로. */
.agent-card .af-pay{aspect-ratio:auto;height:auto}
.agent-card .af-note{position:relative;inset:auto;left:0;right:0}
.agent-card .af-note-h{flex:0 0 auto;padding-block:12px} /* 높이 % 기준이 사라져 헤더가 18px 로 눌렸다 */
.agent-card .af{margin-bottom:24px} /* 카드 패딩만큼 아래 여백 (0 이었다) */
/* NPS 차트: 375 기준 고정 340 인데 안쪽 도표가 511x282 로 커져 마지막 막대가 35px 잘렸다 */
.p-home .trust-nps{height:auto;min-height:340px}
.tp-crop{width:100%;margin-inline:0} /* 구조도도 열 폭 560 — 600 풀블리드는 599 이하에서만 (Codex 004) */
.txhero-fig{aspect-ratio:335/450}
.txhero-bg{object-position:50% 100%}
.hero-visual{aspect-ratio:335/450}
}