/* ============================================================
   초등맘 홈페이지 공용 스타일 v1 (2026-08-21)
   독립 브랜드 톤 — 딥 블루 + 웜 앰버, 앱 테마(로즈)와 무관
   ============================================================ */
:root{
  /* 사이트 주색 = 딥 블루(앱 테마·BI와 독립). 로고 마크(하트+체크)만 고유 로즈 유지 */
  --blue:#3D5AF1; --blue-deep:#2B3FD6; --blue-ink:#1B2A8F;
  --blue-soft:#EDF0FE; --blue-tint:#F5F7FF;
  --pink:#E14975; --pink-soft:#FDEBF1;
  --amber:#F5A623; --amber-deep:#C77F0A; --amber-soft:#FFF4DE;
  --mint:#0FB57F; --mint-deep:#0A8A61; --mint-soft:#E5F7F0;
  --violet:#7C5CFC; --violet-soft:#F0EDFE;
  --ink:#0B0D14; --ink2:#181B24; --body:#3E4250; --sub:#6A6F7E; --faint:#9BA0AC;
  --line:#E9EAEF; --hair:#F1F2F5; --wash:#F7F8FB; --paper:#FFFFFF;
  --maxw:1180px; --r-lg:28px; --r-md:20px; --r-sm:14px;
  --shadow-lg:0 40px 80px -36px rgba(15,23,80,.28);
  --shadow-md:0 20px 44px -24px rgba(15,23,80,.18);
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
html{scroll-behavior:smooth;}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif; background:var(--paper); color:var(--body); font-size:16px; line-height:1.7; letter-spacing:-.02em;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

/* 표가 화면을 밀어내지 않게 — 좁은 화면에서 페이지 전체가 좌우로 흔들리던 원인(2026-08-29 실기기 지적).
   약관의 저작권·라이선스 표에 든 URL(creativecommons.org/licenses/by/4.0/)이 한 덩어리라
   줄바꿈이 안 되고 표를 화면보다 넓게(360px 화면에 427px) 벌렸다.
     table-layout:fixed  칸 너비를 내용이 아니라 표 폭이 정한다 — 긴 글이 표를 못 넓힌다
     overflow-wrap:anywhere  URL 같은 긴 덩어리도 아무 데서나 끊어 접는다
   본문을 가로로 밀어 읽게 하느니 URL 이 중간에서 끊기는 편이 낫다. */
table{width:100%; max-width:100%; table-layout:fixed;}
th, td{overflow-wrap:anywhere; word-break:break-word;}
b,strong{color:var(--ink2); font-weight:700;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{font-size:12.5px; font-weight:800; letter-spacing:.16em; color:var(--blue); text-transform:uppercase;}
.sec{padding:116px 0;}
.sec.tight{padding:88px 0;}
.sec.alt{background:var(--wash);}
@media(max-width:780px){.sec{padding:72px 0;} .sec.tight{padding:56px 0;}}
.sh{max-width:760px;}
.sh h2{font-size:clamp(30px,4.2vw,44px); font-weight:800; color:var(--ink); letter-spacing:-.045em; line-height:1.18; margin-top:16px; word-break:keep-all;}
.sh p{font-size:17px; color:var(--sub); font-weight:500; margin-top:18px; word-break:keep-all; line-height:1.75;}
.sh.center{margin:0 auto; text-align:center;}

/* ===== NAV ===== */
nav.gnb{position:sticky; top:0; z-index:80; transition:transform .22s ease; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--line);}
nav.gnb .in{max-width:var(--maxw); margin:0 auto; padding:15px 28px; display:flex; align-items:center; gap:30px;}
.logo{display:flex; align-items:center; gap:9px;}
.logo .sym{width:30px; height:30px; object-fit:contain; display:block; border-radius:8px; box-shadow:0 4px 10px -4px rgba(225,73,117,.45);}
footer.ft .logo .sym{width:27px; height:27px; box-shadow:none;}
.logo .nm{font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.04em;}
nav.gnb .links{margin-left:auto; display:flex; gap:30px;}
nav.gnb .links a{font-size:14.5px; font-weight:600; color:var(--sub); transition:color .15s;}
nav.gnb .links a:hover{color:var(--ink);}
nav.gnb .links a.on{color:var(--blue); font-weight:800;}
nav.gnb .cta{font-size:14px; font-weight:800; color:#fff; background:var(--blue); border-radius:12px; padding:10px 18px; letter-spacing:-.02em; transition:background .15s, transform .15s;}
nav.gnb .cta:hover{background:var(--blue-deep); transform:translateY(-1px);}
/* 스크롤을 내리는 중에는 접는다(site.js). 앱 웹뷰는 화면이 작아 상단 바가 본문을 그만큼 가린다.
   transform 으로 밀어 둔다 — display:none 이면 되돌아올 때 자리가 튄다. */
nav.gnb.hide{transform:translateY(-100%);}
/* 앱 웹뷰(?from=app)로 열렸을 때 — 이미 앱 사용자다. 설치 유도 요소를 감춘다(각 페이지 <head> 의 판정이 html.inapp 을 붙인다).
   .store·.ctaband 는 홈에만 있지만 규칙은 여기 모아 둔다 — 페이지마다 흩으면 새 페이지에서 빠뜨린다. */
html.inapp nav.gnb .cta{display:none;}
html.inapp .store{display:none;}
html.inapp .gp-badge{display:none;}
html.inapp .ctaband .btns{display:none;}
/* 모바일 — 메뉴를 숨기지 않고 로고 줄 아래 한 줄 탭으로 내린다(2026-09-29, 시안 03.개발\랜딩페이지\모바일-상단메뉴-시안-2026-09-29.html).
   전에는 display:none 이라 휴대폰에서 다른 페이지로 갈 길이 없었다.
     order:3 + flex-basis   마크업 순서(로고·메뉴·다운로드)는 그대로 두고 메뉴만 아랫줄로 보낸다
     margin:0 -28px         탭 줄은 화면 끝까지 — 옆으로 밀 때 글자가 여백에서 잘려 보이지 않게
     mask-image             오른쪽 끝 흐림 = 옆에 더 있다는 신호. 끝까지 밀면 site.js 가 .end 로 걷는다
   ⚠ .links 의 margin-left:auto 가 아랫줄로 가면 「앱 다운로드」가 로고 옆에 붙는다 — .cta 를 다시 오른쪽으로 민다(2026-08-29). */
@media(max-width:760px){
  nav.gnb .in{flex-wrap:wrap; row-gap:6px; padding-bottom:0;}
  nav.gnb .cta{margin-left:auto;}
  nav.gnb .links{order:3; flex:0 0 calc(100% + 56px); margin:0 -28px; padding:0 20px; gap:4px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);}
  nav.gnb .links::-webkit-scrollbar{display:none;}
  nav.gnb .links.end{-webkit-mask-image:none; mask-image:none;}
  nav.gnb .links a{flex:0 0 auto; font-size:14px; white-space:nowrap; padding:9px 8px 11px; border-bottom:2.5px solid transparent;}
  nav.gnb .links a.on{border-bottom-color:var(--blue);}
}

/* ===== PAGE HERO (서브 페이지 상단) ===== */
.pagehero{background:linear-gradient(180deg,var(--blue-tint),#fff); border-bottom:1px solid var(--line);}
.pagehero .in{max-width:var(--maxw); margin:0 auto; padding:84px 28px 72px;}
.pagehero h1{font-size:clamp(32px,4.6vw,50px); font-weight:800; color:var(--ink); letter-spacing:-.05em; line-height:1.15; margin-top:18px; word-break:keep-all;}
.pagehero p{font-size:17.5px; color:var(--sub); font-weight:500; margin-top:18px; max-width:640px; word-break:keep-all;}
@media(max-width:780px){.pagehero .in{padding:56px 28px 48px;}}

/* ===== BUTTONS ===== */
.store{display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; border-radius:14px; padding:13px 22px; font-weight:700; letter-spacing:-.02em; transition:transform .15s, box-shadow .15s;}
.store:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.store .s1{display:block; font-size:10.5px; color:#B7BAC2; font-weight:600; line-height:1;}
.store .s2{display:block; font-size:15.5px; line-height:1.2;}
.store.ghost{background:#fff; color:var(--ink); border:1px solid var(--line);}
.store.ghost .s1{color:var(--faint);}

/* 공식 Google Play 배지(이미지) — 스팟쿠폰 랜딩과 같은 방식. PNG 세로 여백을 박스로 크롭해 검정 배지만 보인다. */
.gp-badge{display:inline-block; width:161px; height:48px; overflow:hidden; border-radius:9px; border:1px solid #A6A6A6; box-sizing:border-box; cursor:pointer; transition:transform .18s;}
.gp-badge:hover{transform:translateY(-2px);}
.gp-badge img{width:188px; max-width:none; height:auto; display:block; margin:-13px 0 0 -14px;}

/* ===== CARDS 공용 ===== */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); transition:transform .25s ease, box-shadow .25s ease;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}

/* ===== CTA BAND ===== */
.ctaband{background:linear-gradient(135deg,#4666FF 0%,#2B3FD6 60%,#1B2A8F 100%); color:#fff; position:relative; overflow:hidden;}
.ctaband::before{content:""; position:absolute; top:-160px; right:-120px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 60%);}
.ctaband::after{content:""; position:absolute; bottom:-200px; left:-140px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.08),transparent 60%);}
.ctaband .in{position:relative; text-align:center; max-width:780px; margin:0 auto; padding:0 28px; z-index:1;}
.ctaband h2{font-size:clamp(30px,4.4vw,46px); font-weight:800; letter-spacing:-.05em; line-height:1.22; word-break:keep-all;}
.ctaband p{font-size:17px; color:rgba(255,255,255,.88); margin-top:18px; font-weight:500;}
.ctaband .btns{display:flex; gap:12px; justify-content:center; margin-top:38px; flex-wrap:wrap;}
.ctaband .store{background:#fff; color:var(--ink);}
.ctaband .store .s1{color:var(--faint);}
.ctaband .store.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5);}
.ctaband .store.ghost .s1{color:rgba(255,255,255,.8);}

/* ===== FOOTER ===== */
footer.ft{background:#0D0F16; color:#8B8F9A; padding:64px 0 56px;}
footer.ft .in{max-width:var(--maxw); margin:0 auto; padding:0 28px; display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap; align-items:flex-start;}
footer.ft .tl{font-size:13.5px; margin-top:16px; line-height:1.8; max-width:340px; word-break:keep-all;}
footer.ft .logo .nm{color:#fff;}
footer.ft .cols{display:flex; gap:60px; flex-wrap:wrap;}
footer.ft .col b{font-size:12px; color:#C7CAD2; font-weight:700; letter-spacing:.06em;}
footer.ft .col a{display:block; font-size:13.5px; color:#8B8F9A; margin-top:11px; transition:color .15s;}
footer.ft .col a:hover{color:#fff;}
footer.ft .base{max-width:var(--maxw); margin:42px auto 0; padding:24px 28px 0; border-top:1px solid rgba(255,255,255,.09); font-size:12.5px; color:#6A6E78; line-height:1.9;}

/* ══ 풋터 모바일 재배열 (2026-09-03 지적) ═══════════════════════════════════
   종전엔 풋터에 모바일 규칙이 하나도 없었다. 375px 에서 실측한 모습:
     · .cols 가 flex + gap:60px 라 3열이 「서비스·고객지원」/「정책」 으로 2+1 로 끊겼다
     · 항목이 2개뿐인 고객지원 아래가 통째로 비고, 정책만 저 아래 혼자 떨어져 있었다
     · 그 결과 풋터 높이가 882px — 내용은 얼마 없는데 스크롤만 길었다
   고친 뒤 607px. 왼쪽에 서비스(5줄), 오른쪽에 고객지원(2줄)+정책(4줄)을 쌓아 균형을 맞춘다.
   ⚠ 정책은 「위치기반서비스 이용약관」처럼 긴 항목이 있어 폭이 좁으면 줄이 접힌다 —
     오른쪽 열을 통으로 쓰게 두는 이유다. 열을 더 쪼개지 말 것. */
@media(max-width:760px){
  footer.ft{padding:44px 0 36px;}
  footer.ft .in{display:block; padding:0 22px;}
  footer.ft .tl{margin-top:12px; max-width:none; font-size:13px;}
  footer.ft .cols{display:grid; grid-template-columns:1fr 1fr; gap:26px 16px; margin-top:28px; align-items:start;}
  footer.ft .col:nth-child(1){grid-column:1; grid-row:1 / span 2;}   /* 서비스 — 왼쪽 통 */
  footer.ft .col:nth-child(2){grid-column:2; grid-row:1;}            /* 고객지원 */
  footer.ft .col:nth-child(3){grid-column:2; grid-row:2;}            /* 정책 */
  footer.ft .col a{margin-top:9px;}
  /* 사업자 표기는 마디가 길다 — 낱말 가운데서 끊기지 않게 keep-all. */
  footer.ft .base{margin-top:28px; padding:18px 22px 0; font-size:12px; line-height:1.85; word-break:keep-all;}
}