/* ============================================================ 럽맘 홈페이지 · 디자인 토큰 + 베이스 기준: 럽맘 v3.1 토큰 (럽맘_컬러_개발전달.md / 럽맘_여백_라운드_개발전달.md) 원칙: 흰·무채색 90~95% / 브랜드 핑크 5~10% / 컬러는 마지막 수단 컬러를 쓸 땐 배경을 통으로 깔지 않고 "한 섹션의 아주 연한 틴트"로만 쓴다 ============================================================ */ /* ---------- 폰트 ---------- */ @font-face{font-family:Paperlogy;src:url('../assets/fonts/Paperlogy/Paperlogy-4Regular.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:Paperlogy;src:url('../assets/fonts/Paperlogy/Paperlogy-5Medium.ttf') format('truetype');font-weight:500;font-display:swap} @font-face{font-family:Paperlogy;src:url('../assets/fonts/Paperlogy/Paperlogy-6SemiBold.ttf') format('truetype');font-weight:600;font-display:swap} @font-face{font-family:Paperlogy;src:url('../assets/fonts/Paperlogy/Paperlogy-7Bold.ttf') format('truetype');font-weight:700;font-display:swap} /* Pretendard Variable — 본문·정보·숫자용. font-weight 범위를 빼면 iOS Safari에서 굵기가 전부 같게 렌더됨 */ @font-face{font-family:'Pretendard Variable';src:url('../assets/fonts/Pretendard/PretendardVariable.woff2') format('woff2-variations');font-weight:45 920;font-style:normal;font-display:swap} @font-face{font-family:'Nanum Pen';src:url('../assets/fonts/NanumPenScript-Regular.ttf')format('truetype');font-weight:400;font-style:normal;font-display:swap} /* 260915: 뷰어가 다크 모드여도 폼 컨트롤이 검게 뜨지 않게 — 이 페이지는 라이트 고정 */ :root{color-scheme:light} input,select,textarea,button{color-scheme:light} input[type="text"],input[type="number"],input[type="search"],input[type="tel"],input[type="email"],select,textarea{ background:var(--surface);color:var(--ink); } select:disabled,input:disabled{background:var(--surface-2);color:var(--gray)} :root{ color-scheme:light; /* ---------- 브랜드 ---------- */ --pink:#ff7497; /* Brand/Pink — CTA·선택 상태·큰 강조 숫자 */ --pink-tint:#fff3f6; /* Tint/Pink */ --pink-ink:#c2436a; /* 웹 추가: 작은 글씨용 핑크(흰 배경 대비 보정) */ /* ---------- 강조 · 틴트 (항상 짝으로) ---------- */ --green:#4e9d72; --green-tint:#e8f4ee; /* 수치·성장 */ --amber:#e07b18; --amber-tint:#fff6e3; /* 습관·할 일 */ --star:#f7b500; --chick-tint:#fff7c9; /* 260914: 밀도 한 단계 축소 — 본문 17→16, 보조 15→14, h2 44→38, 카드 패딩 24→20, 버튼 48→44 (토스 본문 18 · 당근 16 · 무신사 14 사이) */ /* 웹 추가: 별점·선택 상태(병아리색) — 핑크 과다 완화용, 글자에는 쓰지 않음 */ --purple:#8b5cf0; --purple-tint:#f9f0ff; /* 아기·몸의 신호 */ /* ---------- 텍스트 4단 ---------- */ --ink:#353030; /* Text/Primary 13.0:1 */ --ink-2:#555; /* Text/Body 7.5:1 — 읽으라고 쓴 문장은 전부 이것 */ --gray:#6b6b6b; /* Text/Muted 5.3:1 (흰) · 4.7:1 (그린 틴트) — 캡션·단위. 웹은 4.5:1 기준이라 앱 #7d7d7d보다 한 단계 어둡게 */ --gray-2:#9d9d9d; /* Text/Disabled 2.7:1 — 상태 표시용 */ /* ---------- 배경 · 보더 ---------- */ --surface:#fff; /* BG/Base */ --surface-2:#faf9f9; /* BG/Soft */ --surface-3:#f6f6f6; /* BG/Input */ --line:#eee; /* Border/Default */ --divider:#f1f1f1; /* Border/Divider */ --cream:#fdfbf7; /* 웹 추가: 사진 옆에 까는 아주 연한 크림 */ --sky:#7fa7cf; --sky-tint:#eef4fa; /* 웹 추가: 벽지 B(하늘) 전용 — 글자에는 쓰지 않음 */ --lemon:#fefdd0; --lemon-2:#f7efae; --lemon-ink:#8a7220; /* 260914: 육아맘 섹션 배경 Moonbeam #FEFDD0 · ink는 글자용 4.5:1 확보 */ --star-blue:#bed9f4; /* Baby Blue — 별 패턴 전용 */ --sky-ink:#3f6f9e; /* 배지·라벨 글자용 하늘색(레몬 위에서 대비 확보) */ /* ---------- 타이포 ---------- */ /* 폰트 이원화 — 타이틀·서브타이틀(h1~h4·.eyebrow)만 Paperlogy, 본문·정보·숫자는 Pretendard */ --font-title:Paperlogy,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif; --font-body:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif; --font:var(--font-body); --font-hand:'Nanum Pen','Nanum Pen Script',cursive; /* 손글씨 포인트 — 히어로 한 줄 + 앱 하나로 마무리 한 줄(260914 대표 요청) */ /* 타입 스케일 — 역할별 8단. 제목(display·h2·h3·eyebrow)만 Paperlogy, 나머지 Pretendard */ --t-display:clamp(30px,3.8vw,50px); /* h1 히어로 · 1페이지 1회 */ --t-h2:clamp(26px,2.8vw,38px); /* 섹션 제목 · 2줄까지 (260913 44 → 260914 38: 밀도 축소) */ --t-h3:clamp(18px,1.4vw,21px); /* 카드·패널 제목 (24→21) */ --t-lead:clamp(15px,1.1vw,17px); /* 섹션 리드 (19→17) */ --t-body:16px; /* 본문 — 16 미만 금지 (260914: 17→16, CLAUDE.md 기준 14pt 이상) */ --t-sm:14px; /* 보조 본문 · 버튼 · 칩 */ --t-xs:13px; /* 캡션 — 13 미만 금지 */ --t-tiny:11px; /* 뱃지 전용. 읽는 캡션은 --t-xs(13px) 이상 */ /* ---------- 간격 (럽맘 스케일: 16까지 2단위, 그 위 4단위) ---------- */ --s2:2px; --s4:4px; --s6:6px; --s8:8px; --s10:10px; --s12:12px; --s14:14px; --s16:16px; --s20:20px; --s24:24px; --s28:28px; --s32:32px; --s40:40px; --s48:48px; --s56:56px; /* ---------- 웹 리듬 ---------- */ --wrap:1224px; /* 토스 기준: 1440에서 좌우 108px */ --gutter:clamp(20px,5vw,108px); /* 토스 기준: 모바일 20 · 1024에서 51 · 1440에서 108 (전엔 24 고정이라 폭 줄면 답답) */ --section-y:clamp(72px,7.5vw,120px); --head-gap:clamp(40px,4vw,56px); --pad-card:20px; --pad-card-lg:28px; /* ---------- 라운드 (앱 토큰 그대로) ---------- */ --r-tag:4px; /* 사각 뱃지 */ --r-thumb:6px; /* 썸네일·아이콘 박스 */ --r-card:10px; /* 카드·버튼·입력 — 기본값 */ --r-full:999px; /* 칩·캡슐 뱃지 */ --r-block:20px; /* 웹 추가: 큰 섹션 블록 */ --r-photo:28px; /* 웹 추가: 사진 프레임 */ /* ---------- 높이 (앱 토큰 그대로) ---------- */ --h-cta:50px; /* 주 버튼 */ --h-btn:44px; /* 일반 버튼·탭 가능한 행 */ --h-chip:32px; /* 필터 칩 — 히트 영역은 투명 패딩으로 44까지 */ --h-badge:20px; /* ---------- 그림자 (2단) ---------- */ --shadow-1:0 1px 2px rgba(53,48,48,.03),0 4px 16px rgba(53,48,48,.05); --shadow-2:0 10px 24px rgba(53,48,48,.07),0 28px 56px rgba(53,48,48,.08); --ease:cubic-bezier(.22,.61,.36,1); /* 모션 — 3단만. 1: 색·보더·살짝 뜨기(hover) / 2: 상태 전환 페이드(탭·화면) / 3: 스크롤 리빌 장식 모션 금지. "정보가 드러나는 순간"에만. prefers-reduced-motion 이면 전부 0 */ --dur-1:160ms; --dur-2:240ms; --dur-3:320ms; --float:6s; /* 히어로 아이콘 부유 — 유일한 앰비언트 모션 */ /* 레이어 — 로컬 스택(1~5)은 컴포넌트 안에서만, 전역은 이 둘 */ --z-header:100; --z-top:200; /* skip-link · toast */ /* 포커스 링 — 키보드 사용자용, 전 컴포넌트 공통 */ --focus:2px solid var(--pink-ink); /* 읽는 문장의 최대 폭 — 17~18px 한글 기준 35자 */ --measure:600px; /* 브레이크포인트(참고용 — CSS 변수는 @media에 못 쓰므로 값은 sections.css 하단과 같이 유지) 1200 / 1024 / 860 / 600 */ } /* ---------- 리셋 ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px} body{ font-family:var(--font); font-size:var(--t-body); font-weight:400; line-height:1.62; color:var(--ink-2); background:var(--surface); -webkit-font-smoothing:antialiased; letter-spacing:0; word-break:keep-all; overflow-wrap:anywhere; } [hidden]{display:none !important} img,svg,video{display:block;max-width:100%} img{height:auto} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} a{color:inherit;text-decoration:none} ul,ol{list-style:none} h1,h2,h3,h4{font-family:var(--font-title);font-size:inherit;font-weight:inherit;line-height:1.3;letter-spacing:-.02em} summary{list-style:none;cursor:pointer} summary::-webkit-details-marker{display:none} :focus-visible{outline:var(--focus);outline-offset:3px;border-radius:var(--r-tag)} .tabular{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'} /* ---------- 접근성 ---------- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link{position:absolute;left:16px;top:-60px;z-index:var(--z-top);background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-card);transition:top var(--dur-2)} .skip-link:focus{top:16px} /* ---------- 레이아웃 ---------- */ .wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto} .section{padding-block:var(--section-y)} .section--soft{background:var(--surface-2)} .section--cream{background:var(--cream)} .section--amber{background:var(--amber-tint)} .section--green{background:var(--green-tint)} .section--pink{background:var(--pink-tint)} /* ============ 벽지(paper) — 큰 섹션 3곳에만 까는 무늬 바탕 ============ 레퍼런스: 레이스 줄+잔꽃 벽지(핑크), 큐피드·하트 벽지(하늘), 깅엄 체크(민트). 원칙: ① 무늬는 3종만, 연속으로 붙이지 않는다(사이는 흰색·크림) ② 무늬 위에 글을 직접 얹는 곳(섹션 헤드)엔 흰 글로우 ③ 카드·입력은 흰색 그대로 → 무늬는 여백에서만 보인다 ④ 알파는 6~20%, 글자 대비에 영향 없음 */ .paper{position:relative;isolation:isolate;overflow-x:clip} /* isolate: ::before z-index:-1 이 섹션 배경 '위'에 남게 · clip: 헤드 글로우(-56px)가 모바일 가로 스크롤을 만들지 않게(hidden과 달리 sticky 안 깨짐) */ .paper .section-head{position:relative} .paper .section-head::before{content:"";position:absolute;inset:-40px -56px;z-index:-1;border-radius:48px;pointer-events:none; background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.88), rgba(255,255,255,.45) 50%, transparent 74%)} /* A 핑크 — 페일 핑크 크림 + 세로 레이스 줄(5%) + 5잎 꽃(20%) · 지원금 */ .paper--pink{ background: url("data:image/svg+xml,") 0 0 / 220px 220px, repeating-linear-gradient(90deg, rgba(255,116,151,.055) 0 22px, transparent 22px 96px), linear-gradient(180deg, #fff8fa 0%, #fff4f7 100%); } /* B 하늘 — 페일 블루 + 라인 하트·반짝이(하늘색 35~45%) · 럽맘 혜택(선물) */ .paper--sky{ background: url("data:image/svg+xml,") 0 0 / 240px 240px, linear-gradient(180deg, #f1f6fc 0%, #eaf2fa 100%); } /* C 민트 — 깅엄 체크(초록 5%×2겹, 28px 칸) · 앱 하나로 끝 */ .paper--mint{ background: repeating-linear-gradient(90deg, rgba(78,157,114,.05) 0 14px, transparent 14px 28px), repeating-linear-gradient(0deg, rgba(78,157,114,.05) 0 14px, transparent 14px 28px), #f6faf7; } /* A-에코 — 아웃트로: 260914 꽃무늬 제거, 핑크 그라데이션만 */ .outro.paper--echo{ background:linear-gradient(170deg,var(--pink-tint) 0%,#fff 62%); } /* ---------- 공통 타이포 ---------- */ .eyebrow{ display:inline-flex;align-items:center;gap:var(--s6); font-family:var(--font-title);font-size:var(--t-sm);font-weight:600;color:var(--ink-2);margin-bottom:var(--s12); } .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);flex:none} .section-title{font-size:var(--t-h2);font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1.34} .section-lead{margin-top:var(--s20);font-size:var(--t-lead);color:var(--ink-2);line-height:1.75;max-width:var(--measure)} .section-note{margin-top:var(--s10);font-size:var(--t-xs);color:var(--gray);line-height:1.6;max-width:var(--measure)} /* 수치 근거 한 줄 */ /* 섹션 헤드 — 전부 가운데 정렬. eyebrow → 제목 → 리드 순으로 쌓이고, 엄마의 말(말풍선)은 제목 위, 아기·엄마 일러스트는 리드 아래 중앙. (260913: 왼쪽 정렬 → 가운데) */ .section-head{max-width:820px} .wrap > .section-head{ display:flex;flex-direction:column;align-items:center;text-align:center; max-width:820px;margin-inline:auto; } .wrap > .section-head > .pain{order:-1;margin-bottom:var(--s14);text-align:left} .wrap > .section-head > .section-lead{margin-inline:auto} .section-head__baby{width:140px;height:auto;margin-top:var(--s20)} /* 엄마 일러스트 + 큰 말풍선 — 리드 아래 한 줄로 */ .mom-say{display:flex;align-items:center;gap:var(--s16);margin:var(--s28) 0 0;text-align:left} .mom-say__img{width:200px;height:auto;flex:none;filter:drop-shadow(0 12px 20px rgba(53,48,48,.10))} .mom-say__bubble{ position:relative;max-width:340px;padding:var(--s16) var(--s20); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-block);box-shadow:var(--shadow-1); font-size:var(--t-body);color:var(--ink);line-height:1.6; } .mom-say__bubble::after{content:"";position:absolute;left:-7px;top:38px;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)} .wrap > .section-head--center{display:flex} /* 하위호환 — 이제 기본과 같음 */ .section-head--center .section-lead{margin-inline:auto} /* ---------- 탭 (기능 셋 · 럽맘 혜택 공통 동작: data-tabs / data-tab / data-panel) ---------- */ .feat__tabs,.gift__tabs{display:flex;justify-content:center;gap:var(--s8);margin-top:var(--s32);flex-wrap:wrap} .feat__tab,.gift__tab{ display:inline-flex;align-items:center;gap:var(--s8);height:var(--h-btn);padding:0 var(--s20); border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface);color:var(--ink); font-family:var(--font-title);font-size:var(--t-body);font-weight:600;cursor:pointer; transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease); } .feat__tab:hover,.gift__tab:hover{border-color:var(--gray-2)} .feat__tab.is-on,.gift__tab.is-on{background:var(--ink);color:#fff;border-color:var(--ink)} /* 선택 = 잉크 Fill (사이트 공통) */ .feat__tab img{width:26px;height:26px} .feat__panel[hidden],.gift__panel[hidden],.gift__mq[hidden]{display:none} /* 손그림 밑줄 — 핵심 단어 하나에만 (글자 뒤에 깔리도록 배경으로) */ .mark{ display:inline-block;white-space:nowrap;padding-bottom:.06em; background:url('../assets/img/deco/underline.svg') no-repeat left bottom/100% .32em; } /* ---------- 버튼 ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s8); height:var(--h-cta);padding:0 var(--s28);border-radius:var(--r-full); font-size:var(--t-body);font-weight:600; transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease); } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn--primary{background:var(--pink);color:#fff;box-shadow:0 6px 18px rgba(255,116,151,.28)} .btn--primary:hover{background:#f4558090;background:#f45580;box-shadow:0 10px 24px rgba(244,85,128,.3)} .btn--dark{background:var(--ink);color:#fff} .btn--dark:hover{background:#4a4444} .btn--ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)} .btn--ghost:hover{border-color:var(--gray-2)} .btn--sm{height:var(--h-btn);padding:0 var(--s20);font-size:var(--t-sm)} .btn--block{width:100%} /* 스토어 배지 */ .store-link{ display:inline-flex;align-items:center;gap:var(--s8);height:var(--h-cta);padding:0 var(--s24); border:1px solid var(--line);border-radius:var(--r-full); font-size:var(--t-sm);font-weight:500;background:var(--surface);color:var(--ink); transition:border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease); } .store-link:hover{border-color:var(--gray-2);transform:translateY(-1px)} .store-link img{width:20px;height:20px;object-fit:contain} .store-link--dark{background:var(--ink);border-color:var(--ink);color:#fff} .store-link--dark img{filter:brightness(0) invert(1)} .store-link--primary{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 6px 18px rgba(255,116,151,.28)} .store-link--primary:hover{background:#f45580;border-color:#f45580} .store-link--primary img{filter:brightness(0) invert(1)} /* ---------- 칩 · 뱃지 ---------- */ .pill{ display:inline-flex;align-items:center;gap:var(--s6);height:var(--h-chip);padding:0 var(--s14); border-radius:var(--r-full);font-size:var(--t-xs);font-weight:500; background:var(--surface-3);color:var(--ink-2); } .pill--pink{background:var(--pink-tint);color:var(--pink-ink)} .pill--green{background:var(--green-tint);color:var(--green)} .pill--amber{background:var(--amber-tint);color:var(--amber)} .pill--purple{background:var(--purple-tint);color:var(--purple)} .badge-new{ display:inline-flex;align-items:center;height:var(--h-badge);padding:0 var(--s8); border-radius:var(--r-full);background:var(--pink-tint);color:var(--pink-ink); font-size:10px;font-weight:700; } /* ---------- 사진 프레임 ---------- */ .photo{border-radius:var(--r-photo);overflow:hidden;background:var(--surface-3);position:relative} .photo img{width:100%;height:100%;object-fit:cover} .photo--arch{border-radius:999px 999px var(--r-photo) var(--r-photo)} .photo--circle{border-radius:50%} .photo--card{border-radius:var(--r-block)} /* 사진 뒤로 살짝 비껴 나오는 얇은 테두리 (아기자기 포인트) */ .framed{position:relative} .framed::before{ content:"";position:absolute;inset:-12px;border-radius:calc(var(--r-photo) + 12px); border:1px solid currentColor;opacity:.28;pointer-events:none; } .framed--green{color:var(--green)} .framed--pink{color:var(--pink)} .framed--amber{color:var(--amber)} /* 사진 위에 얹는 작은 스티커 */ .sticker{ position:absolute;z-index:3;display:inline-flex;align-items:center;gap:var(--s6); height:var(--h-chip);padding:0 var(--s14);border-radius:var(--r-full); background:var(--surface);box-shadow:var(--shadow-1); font-size:var(--t-xs);font-weight:500;color:var(--ink-2);white-space:nowrap; } .sticker img{width:15px;height:auto} /* ---------- 장식 띠 · 점선 ---------- */ .band{ height:28px;background:url('../assets/img/deco/sprig.svg') repeat-x center/96px 28px; opacity:.85; } .band--flip{transform:scaleY(-1)} .dotline{height:8px;background:url('../assets/img/deco/dots.svg') repeat-x left center/64px 8px;opacity:.9} /* ---------- 잠금 티저 (웹은 일부만, 나머지는 앱에서) ---------- .lock > .lock__body(블러) + .lock__cta(잠금 아이콘 · 문구 · 버튼). 섹션 공통. */ .lock{position:relative;border-radius:var(--r-card);overflow:hidden} .lock__body{filter:blur(3px);opacity:.5;user-select:none;pointer-events:none} .lock__cta{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s10); padding:var(--s16);text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.82) 60%); } .lock__icon{ display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%; background:var(--surface);box-shadow:var(--shadow-1);flex:none; } .lock__icon svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .lock__text{font-size:var(--t-sm);font-weight:600;color:var(--ink);line-height:1.45} .lock__text small{display:block;margin-top:2px;font-size:var(--t-xs);font-weight:400;color:var(--ink-2)} .lock--inline .lock__cta{flex-direction:row;justify-content:flex-start;text-align:left;padding:var(--s12) var(--s14)} .lock--inline .lock__text{font-size:var(--t-xs)} /* ---------- 스크롤 리빌 ---------- */ .reveal{opacity:0;transform:translateY(8px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} }