/* 생각공작소 홈페이지 — 디자인 토큰은 09 합격작(토스식 미니멀)과 동일 */
:root{
  --g900:#191f28; --g700:#4e5968; --g500:#8b95a1; --g400:#b0b8c1;
  --g200:#e5e8eb; --g100:#f2f4f6; --g50:#f9fafb;
  --green:#3a8a5f; --green-dark:#2f6f4d; --green-bg:#e9f4ee; --red:#f04452;
  --maxw:1040px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* scroll-padding은 전 페이지 공통: 앵커 이동 시 sticky nav(60px)에 안 가리게.
   풀페이지 전환은 CSS 스냅 대신 index의 JS(휠 1회=1섹션, 700ms 이징)가 담당 */
html{ scroll-behavior:smooth; scroll-padding-top:60px; }
body{
  margin:0; font-family:'Pretendard',-apple-system,sans-serif;
  background:#fff; color:var(--g900);
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
  word-break:keep-all; letter-spacing:-.2px;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.inner{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* ── 상단 내비 ── */
/* border 대신 box-shadow: 높이에 안 잡혀서 calc(100svh - 60px)가 정확히 맞음 */
.nav{ position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--g100); z-index:10; }
.nav .inner{ display:flex; align-items:center; height:60px; gap:28px; }
.nav .brand{ display:flex; align-items:center; margin-right:auto; }
.nav .brand img{ height:28px; }
.nav a.menu{ font-size:15px; font-weight:600; color:var(--g700); padding:6px 2px; }
.nav a.menu:hover{ color:var(--g900); }
.nav a.menu.on{ color:var(--green); }
.nav a.cta{ font-size:14px; font-weight:700; color:#fff; background:var(--green); padding:9px 16px; border-radius:11px; transition:transform .08s; }
.nav a.cta:active{ transform:scale(.97); background:var(--green-dark); }
@media (max-width:760px){ .nav a.menu{ display:none; } }

/* ── 첫 화면(fold): nav(60px) 제외한 한 화면을 hero+실시간 띠가 꽉 채움 ── */
.fold{ display:flex; flex-direction:column; min-height:calc(100vh - 60px); min-height:calc(100svh - 60px); }
.fold .hero{ flex:1; display:flex; align-items:center; }
.fold .hero .inner{ width:100%; }

/* ── 히어로 ── */
.hero{ padding:84px 0 72px; }
.hero h1{ font-size:44px; font-weight:800; letter-spacing:-1.2px; line-height:1.3; margin:0 0 18px; }
.hero h1 b{ color:var(--green); font-weight:800; }
.hero p{ font-size:18px; color:var(--g500); line-height:1.75; margin:0 0 34px; }
.hero .btns{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:760px){ .hero{ padding:56px 0 48px; } .hero h1{ font-size:31px; } .hero p{ font-size:16px; } }

.btn{ display:inline-block; padding:15px 26px; border-radius:14px; font-size:16px; font-weight:700; letter-spacing:-.3px; transition:transform .08s; cursor:pointer; border:none; font-family:inherit; }
.btn:active{ transform:scale(.97); }
.btn.fill{ background:var(--green); color:#fff; }
.btn.fill:active{ background:var(--green-dark); }
.btn.soft{ background:var(--g100); color:var(--g900); }

/* ── 실시간 신청 띠 (fold 하단) — 우→좌 마키 ── */
.live{ background:var(--g50); border-top:1px solid var(--g100); padding:20px 0; }
.live .inner{ display:flex; align-items:center; gap:16px; }
.live .badge{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--green); white-space:nowrap; }
.live .badge i{ width:7px; height:7px; border-radius:99px; background:var(--green); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
/* 배지 끝 ~ inner 우측 라인(=nav 상담신청 버튼 우측 라인)까지가 흐름 영역 */
.live .marquee{ flex:1; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.live .static-item{ font-size:14px; color:var(--g700); line-height:22px; white-space:nowrap; }
.live .track{ display:inline-flex; white-space:nowrap; will-change:transform; animation:tickerFlow 45s linear infinite; }
.live .track:hover{ animation-play-state:paused; }
.live .half{ display:inline-flex; }
.live .m-item{ font-size:14px; color:var(--g700); line-height:22px; white-space:nowrap; padding-right:48px; }
.live .m-item b{ color:var(--g900); font-weight:700; margin-right:2px; }
@keyframes tickerFlow{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .live .track{ animation:none; } }

/* ── 섹션 공통 ── */
.sec{ padding:64px 0; }
.sec.tint{ background:var(--g50); }
/* 메인 홀수 리듬: 차별점·우리가하는일은 중앙 헤드 (스테이트먼트와 호흡 맞춤) */
.sec.center h2, .sec.center .sub, .sec.center .note-line{ text-align:center; }
/* 메인 페이지 섹션은 한 화면씩 꽉 채움 */
.sec.full{ min-height:calc(100vh - 60px); min-height:calc(100svh - 60px); display:flex; align-items:center; }
.sec.full .inner{ width:100%; }
.sec h2{ font-size:28px; font-weight:800; letter-spacing:-.7px; margin:0 0 10px; }
.sec .sub{ font-size:16px; color:var(--g500); margin:0 0 36px; line-height:1.7; }
@media (max-width:760px){ .sec{ padding:48px 0; } .sec h2{ font-size:23px; } }

/* ── 서비스 카드 ── */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:980px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cards{ grid-template-columns:1fr; } }
.card{ background:#fff; border:1px solid var(--g200); border-radius:18px; padding:26px 22px; transition:border-color .15s, transform .15s; }
.card:hover{ border-color:var(--green); transform:translateY(-3px); }
.card .age{ display:inline-block; font-size:12px; font-weight:700; color:var(--green); background:var(--green-bg); padding:4px 10px; border-radius:99px; margin-bottom:14px; }
.card h3{ font-size:18px; font-weight:700; margin:0 0 8px; letter-spacing:-.4px; }
.card p{ font-size:14px; color:var(--g500); line-height:1.7; margin:0; }
.sec.tint .card{ border-color:transparent; box-shadow:0 1px 4px rgba(0,0,0,.05); }

/* ── 스테이트먼트(선생님이 갑니다) — 대형 문장 + 순차 등장 ── */
.statement{ text-align:center; }
.statement p{ margin:0; }
.statement .s1{ font-size:26px; font-weight:700; color:var(--g500); letter-spacing:-.6px; margin-bottom:12px; }
.statement .s2{ font-size:56px; font-weight:800; color:var(--g900); letter-spacing:-1.6px; line-height:1.25; margin-bottom:30px; }
.statement .s2 b{ color:var(--green); font-weight:800; }
.statement .s3{ font-size:18px; color:var(--g700); line-height:1.7; margin-bottom:8px; }
.statement .s4{ font-size:14px; color:var(--g500); }
@media (max-width:760px){
  .statement .s1{ font-size:19px; }
  .statement .s2{ font-size:38px; }
  .statement .s3{ font-size:16px; }
}

/* ── 스크롤 등장(reveal) — transform/opacity만 (합성 단계, 렉 없음) ── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.show{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; }
.reveal.d2{ transition-delay:.24s; }
.reveal.d3{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ── 오시는 길 — 지도 좌(inner 왼 라인 정렬) · 정보 우 ── */
.loc{ display:grid; grid-template-columns:1fr 320px; gap:40px; align-items:stretch; }
@media (max-width:760px){ .loc{ grid-template-columns:1fr; gap:18px; } }
.loc-info{ display:flex; flex-direction:column; }
.loc-name{ font-size:19px; font-weight:800; letter-spacing:-.4px; margin-bottom:10px; }
.loc-addr{ font-size:15px; color:var(--g700); line-height:1.7; margin-bottom:22px; }
.loc-label{ font-size:13px; font-weight:700; color:var(--g500); margin-bottom:4px; }
.loc-label.tel{ margin-top:auto; }   /* 전화 블록을 바닥으로 → 지도 아랫라인과 정렬 */
.loc-how{ font-size:15px; color:var(--g700); line-height:1.7; }
.loc-tel{ font-size:30px; font-weight:800; letter-spacing:-.6px; color:var(--green); }
.loc-map{ position:relative; background:var(--g100); border-radius:20px; min-height:400px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.loc-map .map-link{ font-size:15px; font-weight:700; color:var(--green); }
/* 어두운 막 없이 — 초록 볼드 문구만 (지도 위 가독용 흰 글로우) */
.map-guard{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  color:var(--green); font-size:15px; font-weight:800; cursor:pointer;
  text-shadow:0 0 5px #fff, 0 0 14px #fff, 0 0 22px #fff;
  opacity:0; transition:opacity .2s; }
.loc-map:hover .map-guard{ opacity:1; }
/* 브랜드 마커 (네이버 지도 HTML 아이콘) — 점이 좌표 위에 오도록 자체 보정 */
.nv-pin{ transform:translate(-50%, -100%); display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.nv-pin span{ background:#fff; color:var(--green); font-family:'Pretendard',sans-serif; font-size:13px; font-weight:800; letter-spacing:-.3px; padding:6px 12px; border-radius:99px; box-shadow:0 2px 10px rgba(0,0,0,.18); white-space:nowrap; margin-bottom:6px; }
.nv-pin i{ width:14px; height:14px; background:var(--green); border:3px solid #fff; border-radius:99px; box-shadow:0 2px 6px rgba(0,0,0,.3); }
@media (max-width:760px){ .loc-map{ min-height:280px; } }

/* ── 차별점 노트 ── */
.note-line{ margin:26px 0 0; font-size:14px; color:var(--g500); line-height:1.7; }

/* ── 활동 캐러셀(메인) — 우→좌 자동 흐름, 3장씩 ── */
.car{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
.car::-webkit-scrollbar{ display:none; }
.car .act{ flex:0 0 calc((100% - 32px)/3); scroll-snap-align:start; }
@media (max-width:980px){ .car .act{ flex-basis:calc((100% - 16px)/2); } }
@media (max-width:520px){ .car .act{ flex-basis:86%; } }

/* ── 캐러셀 진행 점 ── */
.dots{ display:flex; gap:7px; justify-content:center; margin-top:20px; min-height:7px; }
.dots i{ width:7px; height:7px; border-radius:99px; background:var(--g200); transition:background .2s; }
.dots i.on{ background:var(--green); }

/* ── 전체 보기 버튼 (토스식 소프트 그린 필) ── */
.more-wrap{ margin:18px 0 0; text-align:center; }
.btn.more{ background:var(--green-bg); color:var(--green-dark); border-radius:99px; padding:14px 28px; font-size:15px; transition:transform .12s, background .15s; }
.btn.more::after{ content:'→'; margin-left:8px; transition:transform .15s; display:inline-block; }
.btn.more:hover{ background:#ddeee5; }
.btn.more:hover::after{ transform:translateX(3px); }

/* ── 활동 그리드 ── */
.acts{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:980px){ .acts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .acts{ grid-template-columns:1fr; } }
.act{ border-radius:18px; overflow:hidden; border:1px solid var(--g200); background:#fff; transition:transform .15s; }
.act:hover{ transform:translateY(-3px); }
.act .thumb{ aspect-ratio:4/3; background:var(--g100); }
.act .thumb img{ width:100%; height:100%; object-fit:cover; }
.act .body{ padding:16px 18px 18px; }
.act .date{ font-size:12px; color:var(--g400); margin-bottom:6px; }
.act h3{ font-size:16px; font-weight:700; margin:0; letter-spacing:-.3px; line-height:1.5; white-space:pre-line; }

/* ── 본문 페이지(이야기 등) ── */
.prose{ max-width:680px; }
.prose h2{ font-size:24px; font-weight:800; letter-spacing:-.6px; margin:44px 0 14px; }
.prose p{ font-size:16.5px; color:var(--g700); line-height:1.95; margin:0 0 16px; }
.prose .lead{ font-size:19px; color:var(--g900); font-weight:600; line-height:1.85; }

/* ── 푸터 ── */
footer{ border-top:1px solid var(--g100); padding:44px 0 56px; margin-top:40px; }
footer .cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:28px; }
@media (max-width:760px){ footer .cols{ grid-template-columns:repeat(2,1fr); } }
footer h4{ font-size:14px; font-weight:700; margin:0 0 8px; }
footer .biz{ font-size:12.5px; color:var(--g400); line-height:1.8; }
footer .info{ display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:var(--g500); margin-bottom:18px; }
footer .info .row{ display:flex; flex-wrap:wrap; gap:6px 28px; }
footer .info .k{ color:var(--g400); font-weight:600; margin-right:7px; }
footer .legal{ font-size:13px; color:var(--g500); display:flex; gap:18px; flex-wrap:wrap; }
footer .legal a:hover{ color:var(--g900); }

/* ── 우하단 플로팅 SNS 버튼 ── */
.fab{ position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:10px; z-index:20; }
/* 브랜드 원색 대신 사이트 팔레트(흰 바탕·그레이 아이콘·호버 그린)로 톤 통일 */
.fab .f{ width:48px; height:48px; border-radius:99px; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--g500); border:1px solid var(--g200); box-shadow:0 2px 10px rgba(0,0,0,.07); transition:transform .12s, color .15s, border-color .15s; }
.fab .f:hover{ transform:translateY(-2px); color:var(--green); border-color:var(--green); }
.fab .f:active{ transform:scale(.94); }
.fab .f svg{ width:22px; height:22px; }
/* 맨 위로 — 한 화면 이상 내려가야 나타남 */
.fab .top{ opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .25s, transform .25s, color .15s, border-color .15s; }
.fab .top.show{ opacity:1; pointer-events:auto; transform:none; }
@media (max-width:760px){ .fab{ right:14px; bottom:14px; } .fab .f{ width:44px; height:44px; } }