/* carry-core.com Home 페이지 본문 전용 스타일 — 실측 기반 (desktop 1440/1728, mobile iPhone13/390px). 헤더/푸터 등 공통 크롬은 main.css에 있음(모든 페이지에서 로드되지만 이 파일은 Home에서만 로드됨). */ /* ---------- hero ---------- */ .hero-section { background: #FFFFFF; padding: 45px 0 0; } /* 실측(1440/1728 재대조, 2026-08-12): 라이브는 max-width로 가운데 정렬되는 게 아니라 좌우 168px 고정 패딩으로 "왼쪽 고정 앵커" 구조 — hero-copy 왼쪽 끝이 1440/1728 두 폭 다 168px로 동일(뷰포트에 따라 안 움직임). 예전 max-width:1220px+margin:auto는 1728에서 컨텐츠가 294px까지 밀려나서 라이브보다 훨씬 오른쪽에 위치하는 버그였음. */ .hero { padding: 0 168px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; } .hero-copy { flex: 1 1 auto; min-width: 0; } /* eyebrow-badge는 1440→1728 사이 고정 px가 아니라 유동(67px→84px, +25%) — 1440 미만에서는 예전 고정값(67px)으로 바닥을 깔아두고, 1440 이상부터 뷰포트에 비례해서 커지게 함. */ .hero-eyebrow-badge { display: block; height: max(67px, calc(67px + (100vw - 1440px) * 0.059)); width: auto; margin-bottom: 24px; } .hero-feature-pills { display: block; height: 65px; width: auto; margin-top: 24px; } /* 실측(1440/1728 재대조): 422×294px@1440, 535×372px@1728 — 폭 비율로 환산하면 38.2~38.4%로 두 폭 다 거의 정확히 일치(예전 37%+max-width:480px 캡은 1728에서 캡에 걸려 고정돼버렸음, 캡 제거). */ .hero-visual { flex: 0 0 auto; width: 38.3%; height: auto; } .hero-heading { font-size: 60px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; /* 45vw는 임의값이 아니라 실측 기준 계산값: 1440px에서는 두 번째/세 번째 줄(약 650~670px)이 45vw(=648px)보다 넓어서 줄바꿈되고, 1728px에서는 45vw(=778px)가 더 넓어져 한 줄로 합쳐짐 — 실측 사이트의 "1440에서는 분리, 1728에서는 병합" 반응형 줄바꿈을
없이 재현. */ max-width: 45vw; } .hero-heading .line { display: block; } .hero-heading .line + .line { display: inline; } .hero-heading .gradient { background: linear-gradient(to right, #64748B, #94A3B8, #CBD5E1, #94A3B8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; } .hero-heading .solid { color: #0F172A; } /* ---------- 4-photo gallery row ---------- */ /* 실측(라이브 1440px): 히어로 하단 feature-pills와 사진 행 사이 세로 간격 212px(예전 42px는 너무 좁았음), 사진 1개 331×249px(컨테이너 실내폭 1360px = 1440뷰포트 - 좌우 패딩 40px, 즉 거의 풀블리드). 1728 재실측(2026-08-12) 결과 실내폭 1647px = 1728-2×40 — max-width 캡 자체가 없고 좌우 40px 고정 패딩만 있는 완전 풀블리드 구조였음(예전 1600px 캡은 1728에서 여전히 클리핑, 안전마진으로 넉넉히 잡았던 게 부족했음) — 캡 완전 제거. */ /* 실측(라이브 1440px, 2026-08-13): 사진 행 하단 ~ BENEFITS 라벨 상단 세로 간격 208.6px (.benefits-section의 60px 상단 패딩 포함), 즉 이 행 자체의 하단 패딩은 149px — 예전 90px는 너무 좁았음(데스크톱 전용, 이 행은 모바일에서 display:none이라 모바일엔 영향 없음). */ .gallery-row { margin: 0 auto; padding: 212px 40px 149px; display: flex; gap: 12px; } .gallery-row .photo { position: relative; overflow: hidden; flex: 1 1 0; aspect-ratio: 331 / 249; background-size: cover; background-position: center; border-radius: 8px; } /* 라이브 실측: 사진 호버 시 하단에 어두운 스크림 + 흰 캡션 텍스트가 나타남 (라이브 CSS 값 그대로: font-size 14px, rgba(0,0,0,.5), padding 20px). */ .photo-caption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); color: #fff; font-size: 14px; padding: 20px; opacity: 0; transition: opacity .2s ease; pointer-events: none; } .gallery-row .photo:hover .photo-caption { opacity: 1; } /* ---------- benefits ---------- */ .benefits-section { padding: 60px 0; } .benefits-label { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #155DFC; margin-bottom: 40px; } /* 라이브 실측(재검증 2026-08-11): 이 6개 항목 행은 일러스트 위에 얹힌 오버레이가 아니라 독립된 흰 배경 섹션이고, 일러스트(기기 목업 이미지)는 그 아래에 별도로 떨어져서 나온다. 예전엔 아이콘 행을 일러스트 background-image 안에 넣어서 항목 5·6이 목업 사진 위에 겹쳐 보이는 버그가 있었음. */ /* 실측 결과 이 행은 hero처럼 고정 max-width 캡이 아니라 뷰포트에 비례하는 유동(fluid) 폭이었음 — 라이브에서 1440px일 때 아이콘 기준 내용폭 1216px, 1920px일 때 1605px로 뷰포트에 따라 계속 늘어남(고정 1180px 캡이었던 예전 값은 두 폭 다 좁게 나옴). 좌우 패딩을 vw 비율로 바꿔서 재현 — 처음엔 7vw로 잡았다가 아이콘(72px 고정)이 15% 폭 hotspot 안에서 가운데 정렬되며 생기는 inset까지 감안 안 해서 여전히 좁았음, 역산해서 2vw로 조정 후 아이콘 좌우 끝 좌표가 라이브 실측값(1440에서 94px, 1920에서 133px)과 거의 일치하는 것까지 확인. */ .benefits-hotspots { display: flex; justify-content: space-between; padding: 0 2vw; } .benefits-hotspot { text-align: center; width: 15%; } .benefits-hotspot img { width: 72px; height: 72px; margin: 0 auto 12px; background: #F1F5F9; border-radius: 16px; padding: 16px; box-sizing: border-box; } .benefits-hotspot-title { font-size: 16px; font-weight: 700; color: #000; margin-bottom: 8px; } .benefits-hotspot-desc { font-size: 14px; font-weight: 400; color: #62748E; line-height: 1.5; } .benefits-cta-wrap { text-align: center; margin-top: 48px; } .benefits-cta { display: inline-block; background: #155DFC; color: #fff; padding: 12px 32px; border-radius: 999px; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background .2s ease; } /* mobile benefits grid */ .benefits-grid-mobile { display: none; } /* ---------- our service (MetaTrader 5 feature list) ---------- */ /* 실측(라이브 1440px): 이 섹션 전체 배경으로 노트북+데스크톱 스크린샷+폰 2대가 합성된 큰 이미지 (1440×1504px, 화면 좌우로 잘리면서 걸쳐나옴)가 깔려있었음 — 이전엔 완전히 빠져있었음(작은 MT5 3색 로고 아이콘만 있었는데 그건 별개로 여전히 존재, 유지). 배경은 desktop 전용(모바일 실측에선 안 보임), 텍스트 컬럼은 그 위에 오버레이. */ .service-section { position: relative; padding: 60px 0; text-align: center; } /* 라이브 실측(computed style 직접 확인): `background-size:auto`(이미지 원본 픽셀 크기 그대로, 축소 없음) + `background-position:50% 50%` + 박스 1440×1504px 고정. 원본 이미지가 1920px로 박스(1440px)보다 넓어서 중앙 정렬 시 좌우 240px씩 잘려나가 보임(사용자가 말한 "양옆에 짤리게 붙어있는" 효과) — `background-size:contain`으로 전체를 다 보이게 욱여넣었던 게 오히려 틀렸었음. 박스 높이도 이미지 비율 계산값이 아니라 라이브 실측 고정값 1504px 그대로 사용. */ .service-bg { position: absolute; top: 0; left: 0; width: 100%; height: 1504px; background-size: auto; background-repeat: no-repeat; background-position: center center; z-index: 0; pointer-events: none; } /* 텍스트 콘텐츠(eyebrow~CTA)가 1504px보다 짧아서(약 1051px) `.service-bg`가 섹션 바깥, 즉 바로 다음 mt5-section 쪽으로 흘러넘쳐 "We Attach Great Importance..." 제목과 겹쳐 잘려 보이던 버그 있었음 — 섹션 자체를 배경 이미지 높이만큼 확보해서 방지. */ .service-section { min-height: 1504px; } .service-content { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; padding: 0 40px; } .service-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #155DFC; margin-bottom: 16px; } .service-illustration { width: 120px; height: auto; margin: 0 auto 24px; display: block; } .service-heading { font-size: 64px; font-weight: 700; color: #000; margin-bottom: 8px; } .service-subheading { font-size: 18px; color: #8D8D93; margin-bottom: 32px; } .service-bullets { list-style: none; margin: 0 0 32px; padding: 0; text-align: left; } .service-bullets li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 16px; font-weight: 700; color: #62748E; border-bottom: 1px solid #E2E8F0; } .service-bullets { border: 1px solid #E2E8F0; border-radius: 8px; } .service-bullets li:last-child { border-bottom: none; } .service-bullets img { width: 28px; height: 28px; flex: 0 0 auto; } .service-cta-wrap { text-align: center; } /* ---------- mt5 section ---------- */ .mt5-section { background: #FFFFFF; padding: 90px 0; } /* 실측(1728 재대조, 2026-08-12): mt5-phone-photo가 500×458@1440 → 620×568@1728로 유동(+24%) — 예전 max-width:1180px 캡은 두 폭 다 506×463으로 고정돼있었음. hero와 같은 168px 고정 좌우 패딩(캡 없음) 구조로 전환, .mt5-photo 비율도 46%→44.9%로 재조정(두 폭 다 <1% 오차로 일치). */ .mt5-inner { padding: 0 168px; display: flex; align-items: center; gap: 80px; } .mt5-photo { flex: 0 0 auto; width: 44.9%; } .mt5-photo img { width: 100%; height: auto; display: block; border-radius: 12px; } .mt5-copy { flex: 1 1 auto; text-align: left; } .mt5-eyebrow { font-size: 12px; font-weight: 700; color: #155DFC; margin-bottom: 12px; } .mt5-heading { font-size: 36px; font-weight: 700; color: #000; line-height: 1.3; } .mt5-extras { margin-top: 32px; } .mt5-extra { margin-top: 24px; } .mt5-extra img { width: 48px; height: 48px; display: block; margin-bottom: 12px; } .mt5-extra-title { font-size: 18px; font-weight: 700; color: #155DFC; margin-bottom: 4px; } .mt5-extra-desc { font-size: 14px; color: #62748E; line-height: 1.5; } /* ---------- trade what moves ---------- */ .trade-moves-section { padding: 5px 0 60px; text-align: center; } .trade-moves-heading { font-size: 64px; font-weight: 700; color: #000; } .trade-moves-subheading { font-size: 18px; font-weight: 700; color: #8D8D93; margin-top: 24px; } /* 데스크톱: 라이브 사이트 실측 결과 이 그래픽 자체가 로고+기기 사진+6개 항목 텍스트까지 전부 하나로 합성된 완성 이미지(imweb에서 그렇게 내려받음) — HTML 텍스트를 따로 얹으면 사진 속 텍스트와 겹쳐 보였던 문제 있었음(수정 완료), 그냥 이미지 그대로 출력. */ /* 실측(1728 재대조, 2026-08-12): 라이브는 max-width 캡이 아니라 뷰포트-200px(좌우 100px씩 고정 여백) — 1240px@1440, 1528px@1728 둘 다 정확히 일치. 예전 1180px 캡은 1440에서도 60px 좁고 1728에서는 23%나 좁았음. */ .trade-moves-card { width: calc(100% - 200px); margin: 48px auto 0; border-radius: 24px; display: block; } .trade-moves-card.mobile-only { display: none; } /* 모바일: 이 사진(mobile-29)은 로고만 있고 항목 텍스트는 안 박혀있어서 별도 카드로 사진(배너) + 실제 HTML 텍스트 목록을 합쳐서 구성. */ .trade-moves-card-mobile { display: none; } /* ---------- trading products ---------- */ .trading-products-section { background: #FFFFFF; padding: 80px 0; text-align: center; } .trading-products-eyebrow { font-size: 12px; font-weight: 700; color: #155DFC; letter-spacing: 2px; margin-bottom: 16px; } .trading-products-heading { font-size: 64px; font-weight: 700; color: #000; line-height: 1.2; } .trading-products-heading span { display: block; } .trading-products-heading .accent { color: #155DFC; } .trading-products-grid { max-width: 1180px; margin: 56px auto 0; padding: 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } /* 실측(라이브 1440px): 아이콘이 96px가 아니라 287px(카드1/3) / 300px(카드2, 위쪽으로 63px 더 내려와서 박스 밖으로 살짝 넘치는 느낌)로 훨씬 큼 — 3장이 똑같이 딱 정렬된 게 아니라 가운데 카드만 더 크고 아래로 처져있는 실측값 그대로 반영. */ .product-card-icon { width: 287px; height: 287px; margin: 0 auto 24px; } .product-card:nth-child(2) .product-card-icon { width: 300px; height: 300px; margin-top: 63px; } .product-card-title { font-size: 20px; font-weight: 700; color: #000; margin-bottom: 12px; } .product-card-desc { font-size: 16px; font-weight: 700; color: #62748E; line-height: 1.5; } /* ============ mobile (<=720px) ============ */ @media (max-width: 720px) { .hero-section { padding: 45px 0 0; } .hero { display: block; padding: 0 20px; text-align: center; } .hero-heading { font-size: 30px; line-height: 1.3; max-width: none; } .hero-heading .line:not(:last-child) { margin-bottom: 4px; } /* 실측(2026-08-12) 도중 발견된 버그: `.hero-heading .line + .line{display:inline}`(desktop, line 30)이 클래스 셀렉터 3개(.hero-heading/.line/.line)라 특이도 0-3-0인데, 이 모바일 규칙은 `.hero-heading .line`만 써서 0-2-0 — 미디어쿼리 안이라도 특이도가 낮아서 데스크톱 규칙에 졌음(CLAUDE.md 3번 함정: cascade는 프로퍼티 단위, source order보다 특이도가 우선). 결과적으로 모바일에서 2번째/3번째 줄이 계속 inline으로 겹쳐 렌더링돼 헤딩 박스 높이가 실제보다 작게 측정됐었음 — 셀렉터를 동일하게 맞춰 특이도를 일치시키고 순서로 이기게 함. */ .hero-heading .line { display: block; } .hero-heading .line + .line { display: block; } .hero-heading .solid { color: #000; } /* 실측(2026-08-12, 라이브 모바일 390px): 배지/pills 모두 데스크톱 파일을 줄여쓰는 게 아니라 모바일 전용 그래픽(mobile-03/04-hero-graphic.png)을 원본 그대로의 높이로 노출 — 79px/52px는 실측 라이브 렌더 높이 그대로. `.mobile-only`가 를 UA 기본값(inline)으로 되돌리는 CLAUDE.md 3번 함정 때문에 명시적 `display:block!important` 재정의 필요(mt5-photo와 동일 패턴). */ .hero-eyebrow-badge-mobile { height: 79px; width: auto; margin: 0 auto 16px; } .hero-eyebrow-badge-mobile.mobile-only { display: block !important; } .hero-feature-pills-mobile { height: 52px; width: auto; margin: 41px auto 0; } .hero-feature-pills-mobile.mobile-only { display: block !important; } /* hero-visual(불 그래픽)이 예전엔 desktop-only라 모바일에 아예 안 나왔음 — 라이브 실측 결과 모바일에도 나오는 요소였음(370×320px, 원본 700×605 비율 그대로 스케일, 크롭 없음). 370px는 `.hero`의 20px 좌우 패딩(콘텐츠 폭 350px)보다 넓어서 라이브처럼 패딩 안쪽으로 10px씩 살짝 삐져나와야 함 — `max-width:100%`로 캡을 걸면 350px로 눌려버려 라이브보다 좁아지므로 캡 없이 고정 width + auto 마진(음수로 계산되어 중앙에서 대칭으로 삐져나옴)만 사용. */ .hero-visual-mobile { width: 370px; height: auto; margin: 15px auto 0; } .hero-visual-mobile.mobile-only { display: block !important; } .gallery-row { display: none; } .benefits-hotspots { display: none; } .benefits-cta-wrap { margin-top: 0; } /* `.benefits-grid-mobile`도 `mobile-only`라서 main.css의 `display:revert!important`가 `display:grid`를

기본값(block)으로 되돌려버림(CLAUDE.md 3번 함정) — 3열 그리드가 세로 1열로 무너져 있었음, 명시적 재정의로 수정. */ .benefits-grid-mobile.mobile-only { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; padding: 0 20px; text-align: center; } .benefits-grid-mobile img { width: 64px; height: 64px; margin: 0 auto 12px; background: #F1F5F9; border-radius: 16px; padding: 14px; box-sizing: border-box; } .benefits-hotspot-mobile-title { font-size: 16px; font-weight: 700; color: #000; } .benefits-hotspot-mobile-desc { font-size: 13px; color: #62748E; margin-top: 8px; line-height: 1.4; } /* `.service-bg`(min-height 1504px 근거였던 데스크톱 배경 이미지)가 `desktop-only`로 숨겨지는데도 `.service-section`의 `min-height:1504px`(데스크톱 전용 값, line ~110)는 모바일 미디어쿼리에서 재정의가 없어 그대로 새어나가고 있었음 — 실측(2026-08-12, 라이브 모바일 390px): OUR SERVICE 섹션 실제 높이 877px인데 로컬은 min-height 강제로 1504px까지 늘어나 하단에 627px짜리 빈 공백이 생기던 버그. 모바일에서는 배경 이미지가 없으니 min-height 자체가 불필요 — 해제. */ .service-section { padding: 40px 0; min-height: 0; } .service-content { padding: 0 20px; } .service-heading { font-size: 28px; } .service-illustration { width: 83px; } /* 라이브 모바일: 9개 불릿 아이콘이 데스크톱 9종 아이콘이 아니라 전부 동일한 공용 아이콘 하나(20×20)를 공유 —