/* 모바일 (≤ 820px) : 고정 좌표 → 세로 흐름. 데스크톱은 main.css 의 1990px 기준 좌표를 그대로 사용.
   모션은 데스크톱과 동일하게 동작 (js/main.js).
   간격 규칙은 가로 820px 기준 값을 실제 화면 폭에 비례(--k = 폭/820)해 적용:
   --bd 200px : 흰 배경 ↔ 검정 배경이 맞닿는 곳의 콘텐츠–배경 여백(위·아래 각각)
   --gp 200px : 같은 색 배경 안에서 콘텐츠와 콘텐츠 사이 여백 (흰/검 경계와 동일)
   --gap-t 20px : 큰 글씨 ↔ 작은 글씨 사이 간격 (모든 콘텐츠 공통) */
:root { --k: calc(100vw / 820); --bd: calc(200 * var(--k)); --gp: calc(200 * var(--k)); --gap-t: calc(20 * var(--k)); }
.a { position: static; translate: none; }
[data-e] { translate: none; }
.sec { height: auto; padding: calc(70 * var(--u)) 20px; }
.t { line-height: 1.2 !important; }
/* GNB : 웹과 동일(75px, 로고 크기 불변). grafydesign.com 모바일과 같은 좌측 5% / 상단 25px */
.gnb-logo { left: 5%; }
/* hero (GNB 75px 아래) — 두 문구 중앙 정렬, 박스 간격 24px(비례) : '필요할 때마다, 제대로.' 를 아래 문구에서 24px 위로 */
.hero-wrap { --hh: calc(100svh - 75px); height: calc(var(--hh) + 30svh); }   /* 두 문구 박스 간격 10px(비례) */
.hero-t { white-space: normal; left: 20px; right: 20px; text-align: center; --fs: 54 !important; }
.hero-r { bottom: 28px; }
.hero-l { bottom: calc(28px + 54 * var(--u) * 1.2 + 10 * var(--k)); }
.hero-frame { inset: 0 calc(var(--inset, 50) * .24px) calc(var(--inset, 50) * .24px); }
/* bg */
.bg-sec { padding-top: var(--bd); padding-bottom: var(--bd); }
.bg-sec .a { display: block; margin-bottom: 26px; }
.qm, .bg-sec .qm { display: none; }
.bg-sec [data-e="bg-title"] { --fs: 40 !important; } .bg-sec [data-e="bg-p1"], .bg-sec [data-e="bg-p2"] { --fs: 30 !important; }
/* pain */
.pain-sec { padding-top: var(--bd); padding-bottom: var(--bd); }
.pain-sec .a.cx { display: block; margin: 0 0 20px; }
.pain-sec h2.t { --fs: 44 !important; }
.pain-sec [data-e="pain-close-sub"] { --fs: 28 !important; margin-top: 18px; }
.cards { position: static; height: auto; display: grid; gap: 12px; margin: 36px 0 var(--gp); }
.card { position: relative; left: 0; top: 0; width: 100%; height: auto; padding: 24px 22px 26px; }
.card .pill, .card h3, .card p { position: static; display: block; }
.card .pill { display: inline-flex; height: 38px; margin-bottom: 18px; --fs: 30 !important; }
.card h3 { --fs: 42 !important; margin-bottom: 14px; } .card p { --fs: 32 !important; }
.ic { left: auto; right: 20px; top: 22px; width: calc(var(--iw) * .6px); height: calc(var(--ih) * .6px); }
/* 솔루션 A */
.sol-a { padding-top: var(--bd); padding-bottom: 0; }
.sol-a .a { display: block; margin-bottom: 24px; } .sol-a h2.t { --fs: 60 !important; } .sol-a .scrub { --fs: 32 !important; }
/* 핀 모듈 → 흐름 */
.pin { height: auto; padding: calc(60 * var(--u)) 20px; }
.pin-in { position: static; height: auto; }
.frame { height: auto; }
/* 솔루션 B */
.pin.sol-b { padding-top: var(--gp); padding-bottom: 0; }
.vline { display: none; }
.sol-b .frame h2 { --fs: 48 !important; margin-bottom: 14px; display: block; } .sol-b .frame > p.t { --fs: 32 !important; margin-bottom: 22px; display: block; }
.tags { position: relative; left: 0; top: 0; margin: 0 0 34px; }
.scard { position: relative; width: 100%; height: auto; padding: 24px 22px 26px; margin-bottom: 12px; left: 0; top: 0; }
#sc1 { --m: 0 !important; } #sc2 { --m: 1 !important; }        /* 단일 프로젝트 = 밝은 회색 + 진한 회색 글씨 / 월간 구독 = 라임 + 검정 글씨 */
.scard h3, .scard .sc-s, .scard .sc-d { position: static; display: block; margin-bottom: 8px; }
.scard h3 { --fs: 40 !important; } .scard .sc-s { --fs: 30 !important; } .scard .sc-d { --fs: 24 !important; }
.scard .sc-ic { right: 20px; top: 20px; width: 34px; height: 31px; }
/* 로고 */
.sol-c { padding: var(--gp) 8px var(--bd); }
.sol-c .a { display: block; margin-bottom: 14px; } .sol-c h2.t { --fs: 44 !important; } .sol-c p.t { --fs: 30 !important; }
.logo-rows { position: static; height: auto; margin-top: 30px; }
.sol-c .lrow { position: static; width: 100%; margin: 0 0 10px; }
/* 서비스 상단 */
.svc-top { padding-top: var(--bd); padding-bottom: 0; }
.svc-top .a { display: block; margin-bottom: 14px; } .svc-top p.t { --fs: 30 !important; } .svc-top h2.t { --fs: 48 !important; }
/* 서비스 모듈: A, B 순서대로 — 카드는 스크롤이 도착할 때마다 한 장씩 등장 */
.pin.svc-m { padding-top: var(--gp); padding-bottom: 0; }
.svc-m .frame { display: flex; flex-direction: column; }
.svc-m .hdA, .svc-m .hdB { position: static; display: block; margin: 8px 0 22px; --fs: 48 !important; opacity: 1; translate: none; }
.svc-m .hdA { order: 0; } .vc.stA { order: 1; } .svc-m .hdB { order: 2; margin-top: var(--gp); } .vc.stB { order: 3; }
.vc.bk, .vc.bk.stA, .vc.bk.stB, .vc.bk.cen { position: relative; left: 0; top: 0; width: 100%; height: auto; margin-bottom: 12px; border-radius: 22px; opacity: 0; translate: 0 40px; transition: opacity .8s ease-out, translate 1s var(--ease-out); }
.vc.bk.rv.in { opacity: 1; translate: 0 0; }
.vc .bake { width: 100%; height: auto; }
/* 베네핏: 3D 아이콘 삭제 → 화면 고정 없이 흐름. 항목은 모두 펼침, 콘텐츠–구분선 46px(비례), 세부 문구는 줄바꿈 없이(폭에 맞춰 글자 크기), 색 #E7E8EC */
.pin.ben { padding: var(--gp) 20px var(--bd); }
.ben .frame h2 { --fs: 52 !important; margin-bottom: 28px; display: block; }
.gfx { display: none; }
.ben-list { position: relative; left: 0; top: 0; width: 100%; }
.bi { color: #fff; padding: calc(46 * var(--k)) 0; }
.bi:first-child { padding-top: 0; } .bi:last-child { padding-bottom: 0; }
.bi .bd { max-height: none; opacity: 1; }
.bh .t { --fs: 40 !important; }
.bd p.t { margin-top: 12px; color: #e7e8ec; white-space: nowrap; font-size: calc((100vw - 40px) / 34); }
.bd p.t.note { margin-top: 8px; color: #e7e8ec; }
/* 업무 영역: 단계(설명 → 이미지)를 세로로 쌓음 — 도착할 때마다 한 단계씩 등장 (데스크톱의 스티키 전환 대신) */
.work { padding: var(--bd) 20px; }
.work .pin-in { overflow: visible; }
.work .frame { display: flex; flex-direction: column; }
.work .wd, .work .wg { position: relative; left: 0; top: 0; width: 100%; height: auto; translate: none; scale: none; opacity: 1; z-index: auto; }
.work .wd0 { order: 1; } .work .wg0 { order: 2; } .work .wd1 { order: 3; } .work .wg1 { order: 4; } .work .wd2 { order: 5; } .work .wg2 { order: 6; } .work .frame > .more { order: 7; }
.work .wd { display: flex; flex-direction: column; margin-top: var(--gp); margin-bottom: var(--gap-t); }
.work .wd0 { margin-top: 0; }
.work .wd .a { position: static; display: block; margin-bottom: 12px; }
.work p.t { --fs: 36 !important; } .work h2.t { --fs: 56 !important; }
.work .wd .hr { display: block; width: 100%; margin: 6px 0 0; }
.work .wd .wlist.a { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: calc(14 * var(--k)); margin: 16px 0 0; --fs: 28 !important; }
.work .wd .wlist li { min-height: 0; white-space: nowrap; }
.work .wg.a { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.work .wg .cell { position: relative; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 326 / 181.7; opacity: 0; translate: 0 calc(46 * var(--u)); transition: opacity .7s ease-out, translate 1s var(--ease-out); transition-delay: calc(.1s + var(--k) * .09s); }
.work .wg2 .cell { aspect-ratio: 326 / 225; }
.work .wg.in .cell { opacity: 1; translate: 0 0; }
.work .frame > .more { position: relative; display: block; left: 0; top: 0; margin: calc(var(--gap-t) + 6px) 0 0; zoom: 1.5; }
/* 플랜 */
.plan-sec { padding-top: var(--bd); padding-bottom: var(--bd); }
.plan-sec .a.cx { margin-bottom: 12px; display: block; } .plan-sec h2.t { --fs: 44 !important; } .plan-sec p.t.cx { --fs: 30 !important; }
.plans { position: static; height: auto; display: grid; gap: 14px; margin: 32px 0 var(--gp); }
.plan { position: relative; left: 0; top: 0; width: 100%; height: auto; padding: 24px 22px; }
.plan .pill, .plan h3, .plan > p:not(.pl-f), .plan hr, .pl-f { position: static; display: block; }
.plan .pill { display: inline-flex; margin-bottom: 14px; --fs: 30 !important; height: 40px; }
.plan h3 { --fs: 58 !important; margin-bottom: 10px; } .plan > p:not(.pl-f) { --fs: 30 !important; margin-bottom: 16px; }
.pl-f { --fs: 28 !important; display: flex; white-space: normal; margin-top: 16px; }
.best-badge { left: auto; right: calc(12.3vw - 31px); top: calc(11.8vw - 30.5px); width: 62px; height: 61px; }   /* 카드 안쪽(캡처의 빨간 네모) 위치 */
.bb-t { --fs: 15 !important; --lh: 15; }
.plan-sec h3[data-e="plan-note-h"] { --fs: 48 !important; margin: 10px 0 14px; display: block; }
.pnotes { position: static; width: 100%; } .pnotes .t { --fs: 28 !important; }
/* FAQ */
.faq-sec { padding-top: var(--bd); padding-bottom: var(--bd); }
.faq-sec .a.cx { display: block; margin-bottom: 10px; } .faq-sec h2.t { --fs: 48 !important; } .faq-sec p.t.cx { --fs: 32 !important; }
.faq { position: static; width: 100%; margin-top: 34px; }
.fq-q .t { --fs: 34 !important; } .fq-a p { --fs: 28 !important; }
.fq-q svg { width: 22px; height: 22px; }
/* CTA + 푸터 */
.cta-sec { padding-top: var(--bd); padding-bottom: 0; }
.cta-sec .a { display: block; margin-bottom: 12px; } .cta-sec h2.t { --fs: 50 !important; }
.cta-sec .cta-btn { display: flex; margin-top: 0; }
.gfoot { height: auto; padding: var(--gp) 20px var(--bd); }
.gfoot .ft { position: static; margin: 0; white-space: nowrap; font-size: min(13px, calc((100vw - 40px) / 29.8)); line-height: 1.6 !important; }
.gfoot { display: flex; flex-direction: column; align-items: flex-start; }
.gfoot .ig { order: 2; position: static; display: inline-flex; margin-top: 18px; font-size: 13px; gap: 7px; }
.gfoot .ig svg { width: 15px; height: 15px; }
.plan, .card { width: 100%; }

/* ===== 간격 보정 (마지막에 두어 위 규칙을 덮음) ===== */
/* 섹션 안쪽 마진이 섹션 밖으로 새어 나와 바탕(검정)이 비치는 현상 방지 + 경계 여백이 정확히 144px(비례)가 되도록 마지막 요소 마진 제거 */
main > section, main > div.sec { display: flow-root; }
.sec > :last-child, .pin .frame > :last-child, .logo-rows .lrow:last-child, .bg-sec [data-e="bg-p2"], .work .frame > .more { margin-bottom: 0 !important; }
/* 큰 글씨 ↔ 작은 글씨 : 20px(비례) */
.bg-sec [data-e="bg-title"], .sol-a h2.t { margin-bottom: var(--gap-t); }
.sol-b .frame h2 { margin-bottom: var(--gap-t); }
.sol-c p.t, .svc-top p.t, .work p.t, .plan-sec p.t.cx { margin-bottom: var(--gap-t); }
.faq-sec h2.t, .cta-sec h2.t { margin-bottom: var(--gap-t); }
.pain-sec [data-e="pain-close"] { margin-bottom: var(--gap-t); }
.pain-sec [data-e="pain-close-sub"] { margin-top: 0; }
.pnotes li:last-child { padding-bottom: 0; }
.fq:last-child:not(.open) .fq-q { padding-bottom: 0; }

/* 웹에서 섹션 사이를 띄우던 빈 블록(91px)은 모바일에서 숨김 — 여백은 위 변수로만 관리 */
main > div.sec:empty { display: none; }
.svc-m .hdA { margin-top: 0; }
/* FAQ: 답변은 줄바꿈 없이(폭에 맞춰 글자 크기), 질문 ↔ 답변 간격 20px(비례) */
.fq-a p.t { white-space: nowrap; font-size: calc((100vw - 40px) / 33); }
.fq-in p { margin-top: calc(20 * var(--k) - 13.5 * var(--u)); }
.fq-q svg { width: calc(34 * var(--u) * 1.2); height: calc(34 * var(--u) * 1.2); }