/*
 * 피어앤피스 회사 홈페이지 (11/14) — 피그마 "[피어앤피스] 홈페이지_2026.fig" Prototype 페이지 그대로 (틀만, 사진·글은 나중에)
 * 기준 화면 1440px: 본문 폭 1160 (양옆 140), 섹션 위아래 100, 글자 Pretendard(본문)·Inter(위쪽 메뉴), 줄 간격 1.2(피그마 "100%")
 * 로고·손글씨 띠는 피그마 원본 모양을 SVG로 뽑아 씀 (assets/logo*.svg, rolling.svg — Figma Hand 글꼴은 웹에 없음)
 */
:root {
  --black: #000;
  --ink: #1e1e1e; /* 사진 설명 */
  --gnb-text: #303030;
  --sep: #b1b1b1;
  --ph: #d9d9d9; /* 자리 채움 회색 */
  --soft: #f5f5f5; /* HISTORY 바탕 */
  --btn: #5a5a5a;
  --dark: #2c2c2c; /* 바닥글 */
  --dark-text: #f3f3f3;
  --wrap: 1160px;
  --side: 140px;
  --sec: 100px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--black);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  line-height: 1.2;
  overflow-x: hidden;
  word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--side) * 2); margin: 0 auto; padding: 0 var(--side); }
.ph { background: var(--ph); }

/* ── 위쪽 메뉴 (GNB 53) ── */
.gnb { position: sticky; top: 0; z-index: 20; background: #fff; height: 53px; }
.gnb .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.gnb .logo img { width: 154px; height: 19px; }
.gnb nav { display: flex; align-items: center; font-family: Inter, 'Pretendard Variable', Pretendard, sans-serif; font-size: 16px; color: var(--gnb-text); line-height: 1; }
.gnb nav a { padding: 0 8px; border-left: 1px solid var(--sep); }
.gnb nav a:first-child { border-left: 0; padding-left: 0; }
.gnb nav a:last-child { padding-right: 0; }
.gnb nav a:hover { color: #000; }

/* ── 오른쪽 빠른 문의 (FAB 66×194) ── */
.fab { position: fixed; right: 39px; bottom: 32px; z-index: 30; width: 66px; height: 194px; background: var(--btn); border-radius: 33px; display: flex; flex-direction: column; align-items: center; padding-top: 24px; gap: 16px; }
.fab a { width: 52px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.17; white-space: nowrap; }
.fab i { width: 16px; height: 16px; background: var(--ph); display: block; } /* 아이콘 자리 (아이콘을 받으면 바꿈) */
.fab a:hover { opacity: 0.8; }

/* ── 메인 첫 화면 (700) ── */
.hero { height: 700px; background: var(--ph); display: flex; align-items: center; justify-content: center; }
.hero h1 { font-size: 45px; font-weight: 700; text-align: center; padding: 0 20px; }

/* ── 사업 소개 + 카드 3개 (메인, 734) ── */
.biz-sec { padding: var(--sec) 0; }
.biz-sec .title { text-align: center; }
.biz-sec h2 { font-size: 40px; font-weight: 700; }
.biz-sec .title p { font-size: 20px; margin-top: 20px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 24px; }
.card { aspect-ratio: 1 / 1; background: var(--ph); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 40px 20px; text-align: center; }
.card strong { font-size: 24px; font-weight: 600; }
.card span { font-size: 14px; font-weight: 700; margin-top: 8px; }
.card em { font-style: normal; font-size: 14px; margin-top: 20px; }
.card:hover strong { text-decoration: underline; }

/* ── 흐르는 손글씨 띠 (110) ── */
.rolling { height: 110px; overflow: hidden; display: flex; align-items: center; }
.rolling .track { display: flex; width: max-content; animation: roll 30s linear infinite; }
.rolling img { width: 1104px; height: 110px; flex: none; max-width: none; }
@keyframes roll { from { transform: translateX(0); } to { transform: translateX(-1104px); } }
@media (prefers-reduced-motion: reduce) { .rolling .track { animation: none; } }

/* ── 제목 + 여러 줄 글 (하위 페이지 첫 부분 432 · 메인 HISTORY) ── */
.split-sec { padding: var(--sec) 0; }
.split-sec .wrap { display: grid; grid-template-columns: 450px 1fr; column-gap: 100px; }
.split-sec h1, .split-sec h2 { font-size: 40px; font-weight: 700; }
.split-sec .lines { font-size: 24px; min-height: 9.6em; } /* 피그마 글상자 8줄 높이(232) */
.history { background: var(--soft); }

/* ── 사진 격자 (제목 아래 24, 칸 사이 24, 줄 사이 24) ── */
.grid-sec { padding: var(--sec) 0; }
.sec-title .eyebrow { font-size: 20px; margin-bottom: 6px; }
.sec-title h2 { font-size: 40px; font-weight: 700; }
.grid { display: grid; gap: 24px; margin-top: 24px; }
.grid.four { grid-template-columns: repeat(4, 1fr); }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.no-title { margin-top: 0; }
.item .ph { aspect-ratio: 1 / 1; }
.item p { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 12px; }

/* ── 상담 안내 (394) ── */
.cta { background: var(--ph); padding: var(--sec) 0; }
.cta .eyebrow { font-size: 20px; }
.cta h2 { font-size: 40px; font-weight: 700; margin-top: 6px; }
.btn { display: inline-block; background: var(--btn); color: #fff; font-size: 20px; font-weight: 600; line-height: 1.2; padding: 10px 12px; margin-top: 24px; border: 0; cursor: pointer; }
.btn:hover { background: #3d3d3d; }

/* ── 바닥글 (256 / 241) ── */
.foot { background: var(--dark); color: var(--dark-text); padding: 80px 0 81px; }
.foot .logo img { width: 251px; height: 31px; }
.foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; font-size: 24px; font-weight: 700; }
.foot nav a:hover { text-decoration: underline; }
.foot .btn-light { background: #e3e3e3; color: #757575; font-size: 20px; font-weight: 600; padding: 10px 12px; }

/* 준비 중 안내 */
.toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); background: #222; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 14px; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 50; }
.toast.on { opacity: 1; }

/* ── 화면이 좁을 때 (피그마는 1440 기준만 있음 — 비율대로 줄임) ── */
@media (max-width: 1280px) {
  :root { --side: 48px; }
}
@media (max-width: 960px) {
  :root { --side: 32px; --sec: 72px; }
  .hero { height: 480px; }
  .hero h1 { font-size: 34px; }
  .biz-sec h2, .split-sec h1, .split-sec h2, .sec-title h2, .cta h2 { font-size: 32px; }
  .split-sec .wrap { grid-template-columns: 1fr; row-gap: 28px; }
  .grid.four { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 0 20px 16px; }
  .card strong { font-size: 20px; }
}
@media (max-width: 640px) {
  :root { --side: 16px; --sec: 56px; }
  .gnb .logo img { width: 120px; height: auto; }
  .gnb nav { font-size: 13px; }
  .gnb nav a { padding: 0 6px; }
  .hero { height: 360px; }
  .hero h1 { font-size: 24px; }
  .biz-sec h2, .split-sec h1, .split-sec h2, .sec-title h2, .cta h2 { font-size: 24px; }
  .biz-sec .title p, .sec-title .eyebrow, .cta .eyebrow { font-size: 16px; }
  .split-sec .lines { font-size: 18px; }
  .cards { grid-template-columns: 1fr; }
  .grid.two { grid-template-columns: 1fr; }
  .grid.four { gap: 20px 12px; }
  .rolling { height: 72px; }
  .rolling img { width: 723px; height: 72px; }
  @keyframes roll { from { transform: translateX(0); } to { transform: translateX(-723px); } }
  .fab { right: 12px; bottom: 16px; width: 56px; height: auto; padding: 14px 0; gap: 12px; }
  .fab a { font-size: 11px; }
  .btn, .foot .btn-light { font-size: 16px; }
  .foot { padding: 48px 0 56px; }
  .foot .logo img { width: 180px; height: auto; }
  .foot nav { font-size: 18px; gap: 10px 16px; }
}