/* =========================================================== LIFE&PLANNER — Warm Premium Parenting (Airbnb 70 + Apple 30) 토큰 값은 DESIGN.md §4~§8 스펙 그대로. =========================================================== */ :root{ /* Color §4 */ --navy:#17213A; --navy-deep:#0E1626; --ivory:#FAF8F5; --surface:#FFFFFF; --coral:#EF766A; --coral-deep:#E05A4C; --peach:#F7DDD4; --mint:#DDEBE4; --mist:#E5ECF4; --text:#17213A; --text-2:#687084; --text-muted:#979EAD; --border:#E8E5E1; --divider:#F0EEEB; --hotpink:#FF3D8A; --hotpink-deep:#D6116A; /* Radius §7 */ --r-sm:8px; --r-input:12px; --r-btn:14px; --r-card:18px; --r-hero:24px; --r-pill:999px; /* Shadow §8 — Apple식 절제 */ --shadow-card:0 4px 20px rgba(23,33,58,.04); --shadow-float:0 8px 30px rgba(23,33,58,.07); /* Spacing §6 */ --pad:20px; --font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans-serif; /* 레거시 alias — 기존 post/join 화면이 계속 동작하도록 매핑만 유지 */ --green:var(--navy); --green-deep:var(--navy-deep); --green-lt:var(--coral); --orange:var(--coral); --orange-deep:var(--coral-deep); --ink:var(--text); --ink-soft:var(--text-2); --white:var(--surface); --line:var(--border); --p-mint:var(--mint); --p-peach:var(--peach); --g-50:var(--divider); --g-100:#EDEAE6; --g-200:var(--border); --shadow:var(--shadow-card); } *{box-sizing:border-box} /* display 를 지정한 클래스가 hidden 속성을 이겨버리는 사고를 막는다. (예전 지원사업 모달이 .sp-modal{display:flex} 탓에 닫혀도 화면을 계속 덮고 있었다. 그 모달은 2026-08-26 에 걷어냈지만, hidden 으로 여닫는 곳은 계속 늘어난다) */ [hidden]{display:none !important} /* 맨 위에서 아래로 당길 때 화면 전체가 딸려 내려가며 헤더(로고·타이틀)까지 밀리던 것을 막는다. overscroll-behavior 는 '스크롤 끝에서의 기본 동작'을 끄는 속성이라, 고무줄처럼 늘어나는 효과와 당겨서 새로고침 제스처가 함께 사라진다. 둘을 따로 끄는 방법은 없다. 설치형 앱(PWA)처럼 쓰는 화면이라 이쪽이 더 자연스럽다 — 새로고침은 브라우저 버튼으로. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overscroll-behavior-y:contain} body{overscroll-behavior-y:contain} body{margin:0;font-family:var(--font);background:var(--ivory);color:var(--text); font-size:15px;line-height:1.53;word-break:keep-all;overflow-wrap:break-word; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* ===== 홈 배경 롤링 (index.php의 에서만) ===== 사진 4장이 순서대로 교차한다. 사진마다 밝기가 크게 달라(어두운 그라데이션 ↔ 밝은 물결) 글자색을 사진에 맞춰 바꿀 수는 없다. 그래서 .bg-scrim 한 겹으로 어떤 사진이 와도 흰 글씨 대비가 확보되도록 눌러 준다. 막 농도를 낮추면 밝은 물결 사진에서 글씨가 날아가므로 함부로 줄이지 말 것. */ .bg-roll{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--navy-deep)} /* 폰은 배경 없이 아이보리 — index.php 가 body 의 has-bg 도 함께 떼어낸다(짝으로 고칠 것) */ @media(max-width:1024px){.bg-roll{display:none}} /* ⚠ 기본 opacity 를 0 으로 두지 말 것. 예전에 여러 장을 번갈아 보여줄 때 JS가 .is-on 을 붙여 켜는 방식이었는데, 한 장 고정으로 바꾸며 그 JS를 없애자 이미지가 계속 투명한 채로 남아 화면이 새까맣게(컨테이너 남색만) 보였다. 기본은 '보임'이어야 안전하다. 여러 장 롤링을 다시 켤 때는 .bg-roll 에 is-rolling 을 붙이면 된다. */ .bg-roll i{position:absolute;inset:0;opacity:1; background-size:cover;background-position:center center;background-repeat:no-repeat; transition:opacity 1.2s ease} /* 배경 그라데이션을 사진 대신 CSS로 그린다 (inc/bg_roll.php). 가로 사진(1000x563)을 세로 화면에 cover 로 맞추면 가운데 좁은 띠만 남아 폰에서는 한 색으로 보였다 — 실제로 그 띠는 #048598~#04A593 로 거의 같은 색이다. 좌표를 %로 잡으면 화면이 세로로 길어져도 네 귀퉁이 색이 그대로 살아난다. 색은 원본 bg-home-5.jpg 에서 뽑았다 (보라 좌상 · 진초록 우상 · 파랑 좌하 · 초록 우하). */ .bg-roll i.is-grad{ background-image: radial-gradient(125% 85% at 10% 6%, #35265D 0%, rgba(53,38,93,0) 58%), radial-gradient(115% 75% at 94% 6%, #134939 0%, rgba(19,73,57,0) 52%), radial-gradient(125% 85% at 6% 94%, #043D96 0%, rgba(4,61,150,0) 58%), radial-gradient(125% 85% at 96% 88%, #039566 0%, rgba(3,149,102,0) 58%), linear-gradient(155deg, #123D70 0%, #039998 52%, #039A49 100%); background-size:auto} /* 폰은 화면이 세로로 길어 네 귀퉁이 색이 좁게 뭉친다. PC에서 가로로 펼쳐지던 코발트(왼쪽)와 초록(오른쪽)을 위아래 반반으로 세워 좁은 화면에서도 두 색이 다 보이게 한다. */ @media(max-width:479px){ .bg-roll i.is-grad{ background-image: radial-gradient(120% 45% at 16% 3%, #35265D 0%, rgba(53,38,93,0) 62%), radial-gradient(120% 45% at 88% 98%, #134939 0%, rgba(19,73,57,0) 62%), linear-gradient(180deg, #123D70 0%, #0A5C99 32%, #039998 50%, #039A49 68%, #0B7A47 100%); } } .bg-roll.is-rolling i{opacity:0} .bg-roll.is-rolling i.is-on{opacity:1} /* 0.45 — 배경이 그라데이션 한 장으로 고정되면서, 밝은 물결 사진에 맞춰 두껍게 깔았던 막(0.66)을 걷어냈다. 이 사진만 픽셀 단위로 재보면 0.40부터 AA를 통과하고(흰 글씨 5.7:1) 0.45에서는 6.3:1로 여유가 있다. 막이 얇아진 만큼 원본 그라데이션 색이 그대로 살아난다. ⚠ 밝은 사진을 다시 배경으로 쓰면 이 값으로는 글씨가 날아간다 — 그땐 다시 재야 한다. */ .bg-scrim{position:absolute;inset:0;background:rgba(12,20,38,.45)} /* 움직임을 줄이도록 설정한 사용자에게는 페이드 없이 즉시 바뀐다 (사진은 그대로 돈다) */ @media(prefers-reduced-motion:reduce){ .bg-roll i{transition:none} } /* 배경 위에 바로 놓이는 글자들 — 카드 안이 아니라 바탕에 그대로 얹히는 것들만 밝게 */ /* ⚠ .lp-card 는 흰 상자이므로 여기에 넣지 말 것 — 흰 배경에 흰 글씨가 되어 마우스를 올려야만 글이 보인다. */ /* ⚠ 이 흰 글씨 반전 묶음 전체는 배경이 실제로 그려지는 데스크톱에서만 적용한다. 폰(≤1024px)에서는 .bg-roll 이 display:none 이라 바탕이 아이보리인데, 흰 글씨 규칙만 살아남으면 support·help·legal·withdraw 처럼 has-bg 를 떼지 않는 페이지에서 아이보리 위 흰 글씨가 되어 글이 통째로 사라진다 (2026-08-21). */ @media(min-width:1025px){ body.has-bg .lp-sec-title, body.has-bg .lp-bene-head h2, body.has-bg .lp-find-wx-2{color:#fff} body.has-bg .lp-sec-link, body.has-bg .lp-bene-lead, body.has-bg .lp-bene-sub, body.has-bg .lp-find-wx-1, body.has-bg .lp-find-said{color:rgba(255,255,255,.84)} body.has-bg .lp-bene-sub a{color:#fff} /* 코랄 강조색은 어두운 배경에서 탁해지므로 밝은 쪽으로 올린다 */ body.has-bg .lp-bene-lead strong, body.has-bg .lp-find-said strong{color:#FFB3A8} /* 지원금 검색·MY·탈퇴 화면의 머리말 — 흰 카드 밖, 배경 위에 그대로 놓이는 글들이라 원래 색(네이비)을 두면 어두운 배경에 묻힌다. 카드 안 글자는 건드리지 않는다. */ body.has-bg .sp-hero .ob-eyebrow, body.has-bg .sp-hero h1, body.has-bg .ob .ob-eyebrow, body.has-bg .ob > h1, body.has-bg .ob-step > h1, body.has-bg .sp-lead h2{color:#fff} body.has-bg .sp-hero .ob-lead, body.has-bg .ob .ob-lead, body.has-bg .ob-step > .ob-lead, body.has-bg .sp-count, body.has-bg .sp-empty, body.has-bg .sp-lead p, body.has-bg .sp-join-lead, body.has-bg .sp-loading{color:rgba(255,255,255,.84)} body.has-bg .sp-hero .ob-lead strong, body.has-bg .ob .ob-lead strong, /* 가입 권유 줄의 마지막 강조 — 어두운 배경에서는 주황(#D8471B)이 가라앉아 안 읽힌다. 흰색으로 되돌린다 (2026-08-29 사용자 지시로 PC 확인 중 발견). */ body.has-bg .sp-join-lead b, body.has-bg .sp-count strong{color:#fff} /* 위 흰 글자는 배경사진 위에 바로 놓일 때 이야기다. 펼친 상세 칸(.sp-detail)은 밝은 바탕이라 흰 글자면 안 읽힌다 — 되돌린다 (2026-08-26) */ body.has-bg .sp-detail .sp-loading{color:var(--text-2)} /* 고객센터·약관의 탭 — 흰 지면(.lg-paper) 위가 아니라 그 바깥에 있다 */ body.has-bg .lg-tabs a{color:rgba(255,255,255,.82)} body.has-bg .lg-tabs a.on{color:#fff} /* 계산기(leave.php) — 카드 밖에 그대로 얹히는 글자들 (2026-08-24). 이 목록에서 빠져 있어 PC 에서 어두운 배경 위에 남색 글씨가 되어 안 보였다. ⚠ 카드 안(.lv-form · .lv-table · .lv-rule · .lv-step · .lv-cmp)은 흰 바탕이므로 절대 여기 넣지 말 것 — 흰 바탕에 흰 글씨가 된다. */ body.has-bg .lv-page > h1, body.has-bg .lv-page > .ob-eyebrow{color:#fff} body.has-bg .lv-page > .ob-lead, body.has-bg .lv-page > .lv-cap, body.has-bg .lv-page > .lv-warn p{color:rgba(255,255,255,.84)} body.has-bg .lv-page > .ob-lead strong, body.has-bg .lv-page > .lv-cap b, body.has-bg .lv-page > .lv-warn b{color:#fff} body.has-bg .lv-page > .lv-warn a{color:#fff} } /* 서브페이지(글·기사) — 홈과 달리 긴 본문이 배경 위에 그대로 놓인다. 본문 글자색을 밝게 바꾸면 장문 읽기가 힘들어지므로, 반대로 본문을 흰 지면에 앉혀 원래 글자색(네이비)을 그대로 쓴다. 배경은 지면 바깥에서 보인다. 폭 주의 — .wrap 은 좌우 padding 으로 여백을 만든다. 여기에 배경을 칠하면 그 여백까지 흰색이 되어 카드가 화면 끝까지 닿는다(다른 카드보다 넓어짐). 그래서 바깥 여백은 width 계산으로 빼고, padding 은 카드 안쪽 여백으로만 쓴다. 이러면 .wrap 안에 들어가는 다른 카드(.lp-fd 등)와 폭이 정확히 같아진다. */ body.has-bg .b-post-hero > .wrap, body.has-bg .b-post-body{ background:var(--surface); box-sizing:border-box; width:calc(100% - 2 * var(--pad)); max-width:calc(720px - 2 * var(--pad)); margin-inline:auto; padding:24px 16px; } @media(min-width:1025px){ body.has-bg .b-post-hero > .wrap, body.has-bg .b-post-body{max-width:calc(1180px - 2 * var(--pad))} } /* 제목과 본문은 한 장의 종이로 이어 붙인다 — 위/아래 모서리만 둥글게 하고 사이를 붙인다 */ body.has-bg .b-post-hero{border-bottom:0;padding-bottom:0} body.has-bg .b-post-hero > .wrap{border-radius:var(--r-card) var(--r-card) 0 0;padding-bottom:18px} body.has-bg .b-post-body{border-radius:0 0 var(--r-card) var(--r-card);padding-top:2px} /* 위 §6 리듬 규칙(0,2,3)을 이기려고 :not() 을 하나 더 붙여 특정도를 올린다 */ body > :is(section,article):not([hidden]) ~ .b-post-body:not([hidden]){margin-top:0} /* 본문 문단용 제목 여백(.b-post-body h2/h3 의 margin-top)이 본문 아래 블록들 (댓글·지원제도·관련글 등)의 첫 줄에도 걸린다. 그 마진이 부모 밖으로 새어나가 (margin collapsing) 블록 사이 간격을 --sec-gap 보다 크게 벌린다. 각 블록의 첫 자식은 위 마진을 갖지 않게 해 간격을 규칙값으로 되돌린다. */ .b-post-body > :is(section,div,article) > :first-child{margin-top:0} h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em} p{margin:0} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none} button{font-family:inherit} .lp-ic{flex:none;display:block} /* Type scale §5 */ .t-display{font-size:36px;line-height:46px;font-weight:700;letter-spacing:-.03em} .t-h1{font-size:30px;line-height:38px;font-weight:700;letter-spacing:-.03em} .t-h2{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.025em} .t-h3{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.02em} .t-title{font-size:17px;line-height:24px;font-weight:600;letter-spacing:-.02em} .t-body{font-size:15px;line-height:23px;font-weight:400} .t-small{font-size:13px;line-height:19px;font-weight:400} .t-caption{font-size:12px;line-height:17px;font-weight:400} /* Container §32 — 모바일 우선, 데스크톱은 단순 확대 금지 */ .wrap{width:100%;max-width:720px;margin-inline:auto;padding-inline:var(--pad)} /* 앵커 이동(#my-planner 등) 시 첫머리가 sticky 헤더에 가리지 않게 한 발 아래서 멈춘다 */ [id]{scroll-margin-top:96px} /* 스크롤 중 헤더는 86px까지 커진다(is-solo) — 그보다 넉넉히 */ /* 폰에서는 좌우 여백을 줄여 카드가 화면을 최대한 넓게 쓰게 한다 */ @media(max-width:1024px){:root{--pad:12px}} @media(max-width:380px){:root{--pad:10px}} /* 폰에서는 카드를 화면 끝까지 붙인다 — 모서리·테두리 정리는 파일 맨 끝에서 한다 (카드 스타일이 뒤에 정의돼 있어 여기서 덮으면 밀린다) */ /* 0px(카드 풀블리드)였다가 10px로 복원 (2026-08-22) — 글·버튼이 화면 끝에 붙어 답답하다는 피드백. 아래 '화면 끝까지' 동반 규칙들(모서리 펴기·자체 여백)도 함께 걷어냈다 — 다시 0으로 돌리려면 세트로. */ @media(max-width:479px){:root{--pad:10px}} /* iOS 사파리는 글자 16px 미만인 입력창을 누르면 화면을 통째로 확대한다. 확대된 상태에서는 레이아웃이 무너진 것처럼 보이므로(챗봇 입력창에서 발생), 폰에서는 입력 요소의 글자 크기를 16px 아래로 내리지 않는다. .ob-input 처럼 클래스로 지정된 값들이 우선순위에서 이기므로 !important 로 못박는다 — 디자인 취향이 아니라 브라우저 동작을 막기 위한 것이라 예외를 둔다. */ @media(max-width:1024px){ input,select,textarea{font-size:16px !important} } @media(min-width:1025px){.wrap{max-width:1180px}} /* Buttons §20 */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; height:52px;padding:0 24px;border-radius:var(--r-btn);font-size:16px;font-weight:600; border:0;cursor:pointer;transition:transform .16s ease,background .16s ease} .btn:active{transform:scale(.98)} .btn-primary{background:var(--navy);color:#fff} .btn-primary:hover{background:var(--navy-deep)} .btn-accent{background:var(--coral);color:#fff} .btn-accent:hover{background:var(--coral-deep)} /* 라플 로고 오렌지(#F16531) CTA — 코랄보다 진하고 선명한 브랜드 색 (현황판 강조색과 동일) */ .btn-brand{background:#F16531;color:#fff} .btn-brand:hover{background:#D9541F;color:#fff} /* 카카오 공식 색 — 로고와 글자는 검정 (카카오 가이드) */ .btn-kakao{background:#FEE500;color:#191600} .btn-kakao:hover{background:#F2DA00;color:#191600} .btn-kakao svg{flex:none} .btn-secondary{background:var(--surface);border:1px solid var(--border);color:var(--navy)} .btn-secondary:hover{border-color:var(--text-muted)} .btn-block{display:flex;width:100%} /* 카톡 CTA — 박스와 같은 가로 폭 (300px 캡 제거, 2026-08-22 — 위 선택박스와 줄이 맞아야 정돈돼 보인다) */ @media(max-width:999px){ .btn-kakao.btn-block{margin-inline:auto} } /* Chips §21 */ .chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px; border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border); font-size:13.5px;font-weight:600;color:var(--text-2);white-space:nowrap;cursor:pointer; transition:all .16s ease} .chip:active{transform:scale(.98)} /* 선택된 시기 칩과 주요 행동 버튼은 주황(코랄) 계열로 — 눈에 먼저 들어와야 하는 것들 */ .chip.selected{background:var(--coral);border-color:var(--coral);color:#fff} .chip.selected:hover{background:var(--coral-deep);border-color:var(--coral-deep)} /* ===== Section rhythm §6 — 세로 간격은 이 블록이 전담한다 ===== 섹션마다 각자 padding-block을 갖던 방식은 이웃한 두 섹션의 값이 서로 더해져 실제 간격이 8px~64px까지 제각각이 됐다. 게다가 (1) 화면에 안 뜨는 hidden 섹션이 중간에 10개쯤 섞여 있고 (2) MY 설정에 따라 JS가 블록 순서를 바꾸기 때문에, 인접 선택자(+)로 맞춰 둔 예외는 사람마다 다르게 어긋났다. 그래서 개별 섹션은 세로 여백을 일절 갖지 않고, 아래 규칙 하나만 간격을 정한다. `:not([hidden]) ~ :not([hidden])`는 "앞에 보이는 형제가 하나라도 있는 것", 즉 첫 블록을 뺀 전부를 뜻한다. ~는 인접이 아니라 '앞선 전부'를 보므로 중간에 숨은 섹션이 몇 개가 끼든, 순서가 어떻게 바뀌든 결과가 늘 같다. 간격을 바꾸고 싶으면 --sec-gap 하나만 고친다. 섹션에 padding-block을 따로 주지 말 것 — 그게 이 문제의 원인이었다. */ /* 카드 사이는 이 값 하나로 정해진다. 모바일·PC 같은 값으로 둬서 화면 크기에 따라 들쭉날쭉해 보이지 않게 한다. 더 좁히거나 넓히려면 여기 숫자만 바꾼다. */ :root{--sec-gap:14px} /* 카드 안쪽 여백 — 세로 간격(--sec-gap)과 짝을 이루는 규칙. 예전에는 카드마다 16/18/24px을 제각각 갖고 있어, 훑어 내려가면 글이 시작하는 왼쪽 선이 카드마다 어긋나고 카드마다 숨통 크기가 달라 보였다. 좌우는 하나(--card-px)로 묶고, 위아래만 역할에 따라 세 단계로 둔다. --card-py 카드 한 덩어리 (기록·광고·잠금) --card-py-lg 강조 카드 (인사·지원금 CTA) 줄/머리 목록 안의 줄은 더 촘촘하게 (12 / 14) */ :root{--card-px:18px;--card-py:16px;--card-py-lg:20px} .lp-sec,.lp-ad-sec,.lp-bene-sec,.lp-hero,.lp-peek,.lp-greet,.lp-today{padding-block:0;margin-block:0} /* 페이지 최상위 블록끼리 */ body > :is(section,article):not([hidden]) ~ :is(section,article):not([hidden]){margin-top:var(--sec-gap)} /* 글 하단 블록(본문 아래 광고·좋아요·댓글·지원제도·관련글). 글 본문은 문단으로 시작하므로 첫 블록도 앞 문단과 --sec-gap 만큼 떨어져야 한다. 문단의 margin-bottom(18px)은 이 margin-top과 겹쳐(margin collapsing) 큰 값만 남는다. */ article > section:not([hidden]), article > .b-post-actions{margin-top:var(--sec-gap)} /* 마지막 블록과 푸터 사이도 같은 간격 */ body > footer{margin-top:var(--sec-gap)} .lp-sec-head{margin-bottom:16px} .lp-sec-title{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.02em;color:var(--text)} .lp-sec-sub{font-size:13px;line-height:19px;color:var(--text-2);margin-top:6px} /* Header §12 — 56~64px, heavy border 금지 */ .b-hdr{position:sticky;top:0;z-index:30;background:rgba(250,248,245,.94);backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--divider)} /* 폰에서는 반투명·블러를 쓰지 않는다 (스크롤 중 헤더가 흔들린다). 탭바와 같은 이유로 transform 도 넣지 않는다 — sticky/fixed 가 어긋난다. PC는 성능 여유가 있어 원래의 반투명 유리 느낌을 유지한다. */ @media(max-width:1024px){ .b-hdr{background:var(--ivory);backdrop-filter:none;-webkit-backdrop-filter:none} } .b-hdr-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px} .brand{display:flex;align-items:center;gap:11px;flex:none;min-width:0} .brand-logo-img{height:38px;width:auto;display:block;transition:height .22s ease} .babynews-logo-img{height:31px;max-width:200px;opacity:1; transition:max-width .28s ease,opacity .18s ease,margin .28s ease} .brand-sep{font-size:0;width:1px;height:22px;flex:none;background:var(--border); transition:width .28s ease,opacity .18s ease} /* 스크롤을 내리거나 이미 가입한 분에게는 '라플' 로고만 크게 남긴다. 단독 노출 시 로고는 기존(46px)의 150% = 69px. 68px짜리 헤더에는 안 들어가므로 단독일 때만 헤더도 함께 키운다. 좁은 화면은 계정 버튼이 밀리지 않게 아래에서 되돌린다. */ .b-hdr.is-solo .babynews-logo-img{max-width:0;opacity:0;margin-right:-11px} .b-hdr.is-solo .brand-sep{width:0;opacity:0} .b-hdr.is-solo .brand-logo-img:not(.babynews-logo-img){height:69px} .b-hdr-in{transition:height .22s ease} .b-hdr.is-solo .b-hdr-in{height:86px} @media(prefers-reduced-motion:reduce){ .brand-logo-img,.babynews-logo-img,.brand-sep{transition:none} } .hdr-actions{display:flex;align-items:center;gap:4px;flex:none} .hdr-btn{width:40px;height:40px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center; color:var(--text-2);background:transparent;border:0;cursor:pointer;transition:background .16s} .hdr-btn:hover{background:var(--divider);color:var(--text)} /* 헤더 챗봇 — 모바일 전용. PC는 우하단 말풍선(.lp-bot-fab)이 그 역할을 한다. */ .hdr-bot{color:var(--coral-deep)} @media(min-width:1025px){.hdr-bot{display:none}} /* 초대 문구 복사 안내 — 잠깐 떴다 사라지는 알림 */ .lp-toast{position:fixed;left:50%;bottom:calc(var(--fab-base) + 20px);transform:translate(-50%,8px); z-index:220;max-width:min(90vw,420px);padding:12px 18px;border-radius:var(--r-pill); background:rgba(23,33,58,.94);color:#fff;font-size:13.5px;line-height:19px;text-align:center; opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none} .lp-toast.is-on{opacity:1;transform:translate(-50%,0)} @media(prefers-reduced-motion:reduce){.lp-toast{transition:none}} /* 계정 버튼 — 헤더에서 유일한 글자 버튼이라 테두리만으로 조용하게 둔다 */ .hdr-auth{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 13px 0 11px; border:1px solid var(--border);border-radius:var(--r-pill);background:transparent; color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:-.02em; white-space:nowrap;cursor:pointer;transition:border-color .16s,color .16s,background .16s} .hdr-auth:hover{border-color:var(--navy);color:var(--navy);background:var(--surface)} .hdr-auth .hdr-auth-ic{display:flex;flex:none} .hdr-auth.is-out{color:var(--text-muted)} .hdr-auth.is-out:hover{border-color:var(--coral);color:var(--coral-deep)} /* 좁은 화면에서는 로고를 줄여 계정 버튼이 밀려나지 않게 한다 */ @media(max-width:430px){ .b-hdr-in{gap:8px} .brand{min-width:0} .brand-logo-img{height:24px}.babynews-logo-img{height:21px} .b-hdr.is-solo .brand-logo-img:not(.babynews-logo-img){height:48px} .b-hdr.is-solo .b-hdr-in{height:68px} /* 48px 로고는 기본 높이에 들어간다 */ /* 로그인 상태(챗봇+계정버튼)에서 몇 px 넘쳐 페이지가 좌우로 흔들렸다 — 한 단계 더 죈다 (2026-08-22) */ .hdr-actions{gap:0} .hdr-btn{width:34px;height:36px} .hdr-auth{height:32px;padding:0 9px 0 7px;font-size:12px} } /* 어떤 요소가 1~2px 새더라도 페이지가 좌우로 흔들리지 않게 — clip은 스크롤 컨테이너를 만들지 않는다 */ html{overflow-x:clip} @media(max-width:360px){ .brand-logo-img{height:21px}.babynews-logo-img{height:18px} .b-hdr.is-solo .brand-logo-img:not(.babynews-logo-img){height:44px} } /* Category badge — accent 팔레트 3종만 반복 §16 */ .badge{display:inline-flex;align-items:center;font-size:12px;line-height:17px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill)} .badge-pregnancy,.badge-birth,.badge-baby-products{background:var(--peach);color:#9C4F41} .badge-parenting,.badge-birth-support{background:var(--mint);color:#3F6353} .badge-education,.badge-finance{background:var(--mist);color:#3B5372} /* §13 Personalized greeting */ /* ===== 공유 시트 ===== */ .sh-sheet{position:fixed;inset:0;z-index:220;display:flex;align-items:flex-end;justify-content:center} .sh-back{position:absolute;inset:0;background:rgba(23,33,58,.5)} .sh-card{position:relative;width:100%;max-width:420px;background:var(--surface); border-radius:20px 20px 0 0;padding:24px 22px calc(26px + env(safe-area-inset-bottom))} .sh-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%; background:var(--divider);color:var(--text-2);font-size:20px;line-height:1;cursor:pointer} .sh-title{font-size:16px;font-weight:800;letter-spacing:-.02em;margin-bottom:18px} .sh-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .sh-item{display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:transparent; cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--text-2);padding:0} .sh-item:hover{color:var(--text)} .sh-ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff} .sh-naver{background:#03C75A} .sh-cafe{background:#1EC800} .sh-kakao{background:#FEE500;color:#191600} .sh-copy{background:var(--mist);color:var(--navy)} .sh-msg{margin-top:16px;text-align:center;font-size:13px;font-weight:600;color:var(--coral-deep)} @media(min-width:520px){ .sh-sheet{align-items:center} .sh-card{border-radius:var(--r-card);padding-bottom:26px} } /* ===== 댓글 ===== */ .cm-sec{padding-top:var(--sec-gap);border-top:1px solid var(--divider)} .cm-title{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:16px} .cm-title span{color:var(--coral-deep)} .cm-form{background:var(--ivory);border:1px solid var(--border);border-radius:var(--r-card);padding:16px} .cm-name{width:100%;max-width:200px;height:40px;padding:0 12px;border:1px solid var(--border); border-radius:10px;background:var(--surface);font-family:inherit;font-size:14px;color:var(--text)} .cm-text{width:100%;margin-top:9px;padding:12px;border:1px solid var(--border);border-radius:10px; background:var(--surface);font-family:inherit;font-size:14.5px;line-height:22px;color:var(--text);resize:vertical} .cm-name:focus,.cm-text:focus{outline:2px solid var(--coral);outline-offset:1px} .cm-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px} .cm-len{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums} .cm-bar .btn{height:40px;padding:0 22px;font-size:14px} .cm-err{margin-top:10px;font-size:13px;font-weight:600;color:var(--coral-deep)} .cm-list{margin-top:8px} .cm-item{padding:16px 4px;border-bottom:1px solid var(--divider)} .cm-head{display:flex;align-items:center;gap:8px;margin-bottom:6px} .cm-head strong{font-size:13.5px;font-weight:700;color:var(--text)} .cm-head span{font-size:12px;color:var(--text-muted)} .cm-item p{font-size:14.5px;line-height:23px;color:var(--text-2)} .cm-like{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;margin-top:9px; border:1px solid var(--border);border-radius:var(--r-pill);background:transparent;cursor:pointer; font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text-muted); font-variant-numeric:tabular-nums;transition:border-color .16s,color .16s,background .16s} .cm-like:hover{border-color:var(--coral);color:var(--coral-deep)} .cm-like.on{border-color:var(--coral);background:var(--peach);color:var(--coral-deep)} .cm-empty{padding:28px 0;text-align:center;font-size:13.5px;color:var(--text-muted)} /* ===== 기사 본문 ===== */ /* 본문은 흰 바탕에서 읽는다 (육아정보·뉴스 공통) */ /* 좌우 여백은 .wrap의 padding-inline과 맞춘다 — 안 그러면 이 카드 안의 박스들 (관련제도·추천콘텐츠 등)이 카드 밖의 박스(지역/상태설정카드·뉴스박스)보다 좁아 보인다. */ /* 기사·글 본문 — 흰 종이 위에서 읽는다 (2026-08-20 베이지→흰색 복귀 요청). 라운드·테두리 없이 각진 한 장. 폭은 .wrap 의 좌우 padding 을 width 에서 빼서 안의 카드(.b-welfare 등)·아래 박스들과 같은 선에 맞춘다 (has-bg 종이와 같은 수법). */ .ns-body{background:var(--surface);border:0;border-radius:0; box-sizing:border-box; width:calc(100% - 2 * var(--pad)); max-width:calc(720px - 2 * var(--pad)); margin-inline:auto;margin-top:0; padding:2px 16px 48px} /* 위 2px — 제목 종이에 틈 없이 이어 붙인다. 아래는 추천콘텐츠가 끝에 오므로 넉넉히 */ .ns-body > :last-child{margin-bottom:0} .ns-body img{border-radius:12px;margin:14px auto} @media(min-width:1025px){.ns-body{max-width:calc(1180px - 2 * var(--pad))}} @media(min-width:760px){.ns-body{padding-block:2px 56px}} @media(max-width:400px){.ns-body{padding-block:2px 40px}} /* ===== 알림 받기 배너 (inc/push_banner.php) ===== */ .lp-push-banner{display:flex;align-items:center;gap:12px; padding:var(--card-py) var(--card-px);background:var(--surface); border:1px solid var(--border);border-radius:var(--r-card)} .lp-push-ic{font-size:26px;flex:none} .lp-push-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .lp-push-tx strong{font-size:14.5px;letter-spacing:-.02em} .lp-push-tx span{font-size:12.5px;color:var(--text-2)} .lp-push-on{flex:none;height:38px;padding:0 16px;border:0;border-radius:var(--r-pill); background:var(--coral);color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer} .lp-push-on:disabled{opacity:.75;cursor:default} @media(hover:hover){.lp-push-on:not(:disabled):hover{background:var(--coral-deep)}} .lp-push-x{flex:none;width:30px;height:30px;border:0;background:transparent;color:var(--text-muted); font-size:20px;line-height:1;cursor:pointer;border-radius:var(--r-pill)} .lp-push-x:hover{color:var(--text)} /* 좁은 폰에서는 부제를 접어 버튼 자리를 지킨다 */ @media(max-width:400px){.lp-push-tx span{display:none}} /* ===== 제휴 광고 배너 ===== */ .lp-ad{position:relative;display:flex;align-items:center;gap:13px;padding:var(--card-py) var(--card-px);border-radius:0; background:linear-gradient(100deg,#EAF3FF 0%,#F6F0FF 100%);border:1px solid #DCE7F7; color:inherit;text-decoration:none;transition:transform .16s,box-shadow .16s} @media(hover:hover){.lp-ad:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(23,33,58,.10)}} /* AD 표시 — 박스 안 우하단에 얹는다 (2026-08-23). 줄 안(flex 아이템)에 두면 로고와 가로폭을 나눠 써서 폰에서 제목이 끊겼다. 자리를 띄워 두므로 문구는 박스 폭을 그대로 다 쓴다. */ .lp-ad-mark{position:absolute;bottom:8px;right:10px; font-size:10px;font-weight:800;letter-spacing:.04em;color:#fff; background:rgba(23,33,58,.42);border-radius:5px;padding:3px 6px} .lp-ad-tx{flex:1;min-width:0} .lp-ad-tx strong{display:block;font-size:14.5px;line-height:21px;font-weight:800; color:var(--navy);letter-spacing:-.025em} .lp-ad-tx em{display:block;font-style:normal;font-size:12.5px;line-height:18px; color:var(--text-2);margin-top:3px} /* em 안쪽 강조는 줄을 새로 만들지 않는다 (2026-08-26). ⚠ 바로 위 .lp-ad-tx strong 이 display:block 이라, 그냥 두면 '1,000포인트!' 같은 몇 글자가 제 줄로 떨어져 나간다 — 폰에서 금지한 고아 줄이다. 크기도 따라 커져 두 배로 튄다. */ .lp-ad-tx em strong{display:inline;font-size:inherit;line-height:inherit; font-weight:800;color:var(--coral-deep);letter-spacing:0} .lp-ad-go{flex:none;color:var(--text-muted)} /* 자체 프로모션(친구 초대) — 제휴 광고와 같은 생김새를 쓰되 색만 우리 쪽으로. PC에는 하단 '초대' 탭이 없어 동선이 없으므로 폰에서만 노출한다. */ .lp-promo{width:100%;text-align:left;font-family:inherit;cursor:pointer; background:linear-gradient(100deg,#FFF1EA 0%,#FFE7DC 100%);border-color:#F7D6C6} @media(min-width:1025px){.lp-promo-sec{display:none}} .lp-promo-fig{flex:none;width:56px} .lp-promo-fig img{width:100%;height:auto;display:block} .lp-promo .lp-ad-tx strong{font-size:15px;line-height:21px} .lp-promo .lp-ad-tx em{color:var(--text-2)} @media(hover:hover){.lp-promo:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(224,90,76,.16)}} @media(max-width:400px){.lp-promo-fig{width:46px}.lp-promo .lp-ad-tx strong{font-size:14px;line-height:20px}} @media(max-width:400px){ .lp-ad{padding:14px var(--card-px);gap:10px} .lp-ad-tx strong{font-size:13.5px;line-height:20px} .lp-ad-tx em{font-size:12px} } /* 글 본문 안에 들어갈 때는 좌우 여백을 페이지에 맡긴다 */ .b-post-body .lp-ad-sec{padding-inline:0} /* 카드 목록 중간에 낄 때는 그리드 한 칸이 아니라 카드 그리드 가로폭 전체를 차지한다 */ .lp-cards > .lp-ad-sec{grid-column:1/-1;max-width:none;padding-inline:0} /* ===== 상단 소개 슬라이드 ===== */ .lp-slider{position:relative;overflow:hidden;background:var(--navy)} /* 서브페이지(글·고객센터·약관·뉴스·검색) 슬라이드는 PC에서만 — 모바일은 메인페이지에만 남긴다 */ @media(max-width:767px){.lp-slider-sub{display:none}} .lp-slides{position:relative;height:280px} /* 다음 장이 오른쪽에서 스며들듯 들어온다. 확 밀지 않고 은은하게. */ .lp-slide{position:absolute;inset:0;background-size:cover;background-position:center; display:flex;align-items:flex-end;opacity:0;pointer-events:none; transform:translateX(4%) scale(1.04); transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,.61,.36,1)} .lp-slide.on{opacity:1;pointer-events:auto;transform:translateX(0) scale(1)} .lp-slide.out{opacity:0;transform:translateX(-3%) scale(1)} /* 글자는 살짝 늦게 따라 들어온다 */ .lp-slide .lp-slide-in{transform:translateX(10px);opacity:0; transition:opacity .7s ease .18s,transform .7s cubic-bezier(.22,.61,.36,1) .18s} .lp-slide.on .lp-slide-in{transform:none;opacity:1} @media(prefers-reduced-motion:reduce){ .lp-slide,.lp-slide .lp-slide-in{transition:opacity .3s ease;transform:none !important} } .lp-slide::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(15,22,42,.82) 0%,rgba(15,22,42,.35) 45%,rgba(15,22,42,.08) 100%)} .lp-slide-in{position:relative;z-index:1;padding-bottom:34px;color:#fff} .lp-slide-k{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r-pill); background:var(--coral);color:#fff;font-size:11.5px;font-weight:700} .lp-slide-in h2{font-size:25px;line-height:33px;font-weight:800;letter-spacing:-.035em;margin-top:11px;color:#fff} .lp-slide-in p{font-size:14px;line-height:21px;color:rgba(255,255,255,.86);margin-top:7px;max-width:34em} .lp-slide-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:7px} .lp-slide-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.42);transition:width .2s,background .2s} .lp-slide-dots button.on{width:22px;border-radius:99px;background:#fff} @media(min-width:760px){ .lp-slides{height:360px} .lp-slide-in{padding-bottom:44px} .lp-slide-in h2{font-size:32px;line-height:42px} .lp-slide-in p{font-size:15.5px;line-height:23px} } @media(max-width:380px){.lp-slides{height:240px}.lp-slide-in h2{font-size:22px;line-height:30px}} .lp-greet-tx{min-width:0} /* 로그인 회원 — 이름 옆 프로필 사진 */ .lp-greet-me{display:flex;align-items:center;gap:14px} .lp-greet-av{flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--mist)} .lp-greet-av img{width:100%;height:100%;object-fit:cover;display:block} @media(min-width:600px){.lp-greet-av{width:64px;height:64px}} .lp-greet h1{font-size:24px;line-height:32px;font-weight:700;color:var(--text)} .lp-greet h1 em{font-style:normal;color:var(--coral)} .lp-greet p{font-size:15px;line-height:23px;color:var(--text-2);margin-top:6px} .lp-greet-chips{grid-column:1/-1;display:flex;gap:8px;margin-top:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} .lp-greet-chips::-webkit-scrollbar{display:none} .lp-greet h1 em{font-style:normal;color:var(--coral);border-bottom:2px solid var(--peach);padding-bottom:1px} @media(min-width:600px){.lp-greet-fig{width:132px}} @media(max-width:400px){.lp-greet{column-gap:10px}.lp-greet-fig{width:88px}} @media(max-width:340px){.lp-greet-fig{display:none}} /* 선택 후 미리보기 — 가입하면 뭘 받는지 구체적으로 */ .lp-peek-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--card-py-lg) var(--card-px);box-shadow:var(--shadow-card)} .lp-peek-k{font-size:13px;line-height:19px;font-weight:600;color:var(--coral)} .lp-peek-card h3{font-size:19px;line-height:27px;font-weight:700;margin-top:8px;letter-spacing:-.02em} .lp-peek-list{display:grid;gap:11px;margin:18px 0 22px;grid-template-columns:minmax(0,1fr)} .lp-peek-list li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:21px;color:var(--text)} .lp-peek-list .lp-ic{color:var(--navy);margin-top:2px} .lp-peek-sub{font-size:12.5px;line-height:18px;color:var(--text-2);text-align:center;margin-top:12px} .lp-peek-sub strong{color:var(--coral);font-weight:700} /* 가입 혜택 — 해피박스 */ .lp-benefit{display:flex;align-items:center;gap:16px;background:var(--mist);border-radius:var(--r-card); padding:var(--card-py-lg) var(--card-px);transition:transform .16s} .lp-benefit:active{transform:scale(.99)} .lp-benefit-copy{flex:1;min-width:0} .lp-benefit-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill); background:var(--navy);color:#fff;font-size:11px;font-weight:700} .lp-benefit h3{font-size:20px;line-height:28px;font-weight:700;margin-top:12px;letter-spacing:-.02em} .lp-benefit h3 strong{color:var(--coral);font-weight:800} .lp-benefit p{font-size:13px;line-height:19px;color:var(--text-2);margin-top:8px} .lp-benefit p strong{color:var(--text);font-weight:700} .lp-benefit-go{display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--navy)} /* 이미지는 실제 로드 성공 시에만 노출 (.has-img) */ .lp-benefit-img{display:none;flex:none;width:112px} .lp-benefit.has-img .lp-benefit-img{display:block} .lp-benefit-img img{width:100%;height:auto;display:block} @media(max-width:400px){.lp-benefit{padding:20px}.lp-benefit-img{width:88px}} /* §14 Hero curation — 광고 배너처럼 만들지 않는다 */ .lp-hero-card{position:relative;border-radius:var(--r-hero);overflow:hidden;min-height:320px; display:flex;align-items:flex-end;background:var(--mint) center/cover no-repeat} .lp-hero-card::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(23,33,58,0) 34%,rgba(23,33,58,.78) 100%)} .lp-hero-inner{position:relative;z-index:1;padding:var(--card-py-lg) var(--card-px);width:100%} .lp-hero-eyebrow{font-size:12px;line-height:17px;font-weight:600;color:rgba(255,255,255,.78)} .lp-hero-card h2{font-size:26px;line-height:35px;font-weight:700;color:#fff;margin-top:8px;letter-spacing:-.03em} .lp-hero-btn{display:inline-flex;align-items:center;gap:6px;margin-top:18px;height:44px;padding:0 20px; border-radius:var(--r-pill);background:#fff;color:var(--navy);font-size:14px;font-weight:600;transition:transform .16s} .lp-hero-btn:active{transform:scale(.98)} /* §19 Support benefit module */ .lp-support{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card); padding:var(--card-py-lg) var(--card-px)} /* 눈썹 라벨 — 주황 바 스타일 (.ob-eyebrow와 같은 규칙) */ .lp-support .k{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:17px; font-weight:800;color:var(--text)} .lp-support .k::before{content:"";flex:none;width:5px;height:15px;border-radius:3px;background:#F16531} .lp-support h3{font-size:20px;line-height:28px;font-weight:700;margin-top:8px;letter-spacing:-.02em} .lp-support .meta{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:var(--text-2)} .lp-support .amount{font-size:30px;line-height:38px;font-weight:700;color:var(--navy);margin-top:16px;letter-spacing:-.03em} .lp-support .amount small{font-size:14px;font-weight:600;color:var(--text-2);margin-left:4px;letter-spacing:0} .lp-support .btn{margin-top:18px} /* §16 Category grid — icon + label, 2x3 */ .lp-cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .lp-cat{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 6px; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);transition:transform .16s,box-shadow .16s} .lp-cat:active{transform:scale(.98)} .lp-cat:hover{box-shadow:var(--shadow-card)} .lp-cat-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--navy)} .lp-cat-ic.peach{background:var(--peach)} .lp-cat-ic.mint{background:var(--mint)} .lp-cat-ic.mist{background:var(--mist)} .lp-cat-label{font-size:13px;line-height:19px;font-weight:600;color:var(--text)} @media(min-width:600px){.lp-cat-grid{grid-template-columns:repeat(6,1fr)}} /* ===== 콘텐츠 목록 — 검색 + 카테고리 탭 ===== */ .lp-search{display:flex;align-items:center;gap:8px;height:52px;padding:0 8px 0 16px; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill); margin-bottom:18px;transition:border-color .16s,box-shadow .16s} .lp-search:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(23,33,58,.07)} .lp-search-ic{display:flex;flex:none;color:var(--text-muted)} .lp-search input[type=search]{flex:1;min-width:0;height:100%;border:0;background:transparent; font-family:inherit;font-size:15px;color:var(--text);outline:none;-webkit-appearance:none} .lp-search input[type=search]::placeholder{color:var(--text-muted)} .lp-search input[type=search]::-webkit-search-cancel-button{display:none} .lp-search-clear{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center; border-radius:50%;background:var(--divider);color:var(--text-2);font-size:16px;line-height:1;text-decoration:none} .lp-search button{flex:none;height:38px;padding:0 18px;border:0;border-radius:var(--r-pill); background:var(--navy);color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer} @media(hover:hover){.lp-search button:hover{background:var(--navy-deep)}} .lp-search-sum{font-size:13.5px;color:var(--text-2);margin-bottom:14px} .lp-search-sum strong{color:var(--text);font-weight:700} @media(max-width:420px){ .lp-search{height:48px;padding-left:14px} .lp-search input[type=search]{font-size:14.5px} .lp-search button{height:34px;padding:0 14px;font-size:13px} } /* 카테고리 — 알약 상자 대신 밑줄 탭. 선이 하나로 이어져 훨씬 정돈돼 보인다. */ .lp-tabs{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none; border-bottom:1px solid var(--divider);margin-bottom:22px} .lp-tabs::-webkit-scrollbar{display:none} .lp-tabs-i{position:relative;flex:none;padding:10px 1px 12px; font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:var(--text-muted); text-decoration:none;white-space:nowrap;transition:color .16s} .lp-tabs-i::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px; background:var(--navy);transform:scaleX(0);transition:transform .18s ease} .lp-tabs-i.on{color:var(--navy);font-weight:800} .lp-tabs-i.on::after{transform:scaleX(1)} @media(hover:hover){.lp-tabs-i:hover{color:var(--text-2)}} @media(prefers-reduced-motion:reduce){.lp-tabs-i::after{transition:none}} /* 콘텐츠 목록(카테고리·검색) 페이지도 베이지 (2026-08-29 사용자 지시: "전체 통일"). ⚠ 예전에는 PC(≥1025px)에서만 body.is-cat 에 어두운 그라데이션을 깔고, 그 위에 놓이는 제목·탭·칩 글자를 흰색으로 뒤집었다. 배경과 흰 글씨는 한 덩어리라 같이 걷어냈다 — 배경만 지우면 아이보리 위에 흰 글씨가 남아 아무것도 안 보인다. ⚠ body.is-cat 클래스 자체는 index.php 가 계속 붙인다. 카드 테두리를 없애는 규칙 (body.is-home .lp-card, body.is-cat .lp-card) 이 그 클래스를 아직 쓴다. */ /* ===== 아이와 함께 가볼 만한 곳 — 사진을 크게, 가로로 4개 ===== */ .lp-place-grid{display:grid;gap:12px;padding:12px var(--card-px) var(--card-py); grid-template-columns:repeat(2,minmax(0,1fr))} @media(min-width:760px){.lp-place-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} .lp-place{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0} .lp-place-img{display:block;width:100%;aspect-ratio:4/3;border-radius:12px; background:var(--mist) center/cover no-repeat} .lp-place-img.is-none{display:flex;align-items:center;justify-content:center;color:var(--text-muted)} .lp-place-tx{display:flex;flex-direction:column;gap:3px;min-width:0} .lp-place-tx strong{font-size:13.5px;line-height:19px;font-weight:700;letter-spacing:-.02em; color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lp-place-tx em{font-style:normal;font-size:11.5px;line-height:16px;color:var(--text-muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 지도 버튼은 사진 오른쪽 위에 얹는다 */ .lp-place .lp-hmap{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.94)} /* ===== 관광사진 소개 (gallery.php) ===== */ .gal-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)} @media(min-width:600px){.gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:900px){.gal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .gal-card{margin:0;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column} .gal-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--mist)} .gal-card figcaption{padding:14px var(--card-px) var(--card-py);display:flex;flex-direction:column;gap:5px} .gal-card h3{font-size:16px;line-height:23px;font-weight:700;letter-spacing:-.02em;color:var(--text)} .gal-card p{font-size:13.5px;line-height:20px;color:var(--text-2)} .gal-meta{font-size:12px;line-height:17px;color:var(--text-muted)} .gal-by{font-size:11.5px;line-height:16px;color:var(--text-muted)} .gal-note{padding:32px 0;text-align:center;font-size:14px;color:var(--text-2)} .gal-more-wrap{margin-top:20px} .gal-src{margin-top:18px;font-size:11.5px;color:var(--text-muted)} /* §18 Content card */ /* 목록은 3열 기준 (모바일 1열, 태블릿 2열) — 한 페이지 3×20 */ .lp-cards{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)} @media(min-width:600px){.lp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:900px){.lp-cards{grid-template-columns:repeat(3,minmax(0,1fr))}} /* 사진과 글이 한 장의 종이로 보이도록 하나의 상자에 담는다. 예전에는 사진과 글이 따로 떠 있어 두 덩어리로 읽혔다. */ .lp-card{display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden; transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s ease} /* 어두운 배경(홈·콘텐츠 목록) 위에서는 1px 밝은 테두리가 흰 테두리처럼 떠 보인다 — 뺀다 */ body.is-home .lp-card,body.is-cat .lp-card{border:0} .lp-card-img{aspect-ratio:16/10;background:var(--divider) center/cover no-repeat; transition:transform .35s cubic-bezier(.22,.61,.36,1)} @media(hover:hover){ .lp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-float);border-color:var(--divider)} .lp-card:hover .lp-card-img{transform:scale(1.03)} .lp-card:hover .lp-card-body p{color:var(--text)} } .lp-card:active{transform:translateY(-1px) scale(.995)} @media(prefers-reduced-motion:reduce){ .lp-card,.lp-card-img{transition:none} .lp-card:hover{transform:none} .lp-card:hover .lp-card-img{transform:none} } .lp-card-body{flex:1;padding:14px var(--card-px) var(--card-py)} .lp-card h3{font-size:17px;line-height:24px;font-weight:600;margin-top:8px;letter-spacing:-.02em} .lp-card p{font-size:13.5px;line-height:20px;color:var(--text-2);margin-top:7px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lp-card .src{font-size:12px;line-height:17px;color:var(--text-muted);margin-top:8px} /* 카드 안 카테고리 — 상자 없이 색 글자만. 목록이 조용해진다 */ .lp-card-cat{font-size:11.5px;font-weight:700;letter-spacing:.01em;color:var(--coral-deep)} /* 추천 3건 — 가로 스크롤 대신 화면 폭을 꽉 채운다 (모바일 1열, 태블릿 이상 3열) */ .lp-hscroll{display:grid;grid-template-columns:minmax(0,1fr);gap:20px} /* 시기별 육아용품 가격비교 — 쿠팡 2 + 네이버 2, 사진이 있는 상품카드 */ .lp-goods-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} @media(min-width:600px){.lp-goods-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} .lp-goods-card{display:block;background:var(--surface);border:1px solid var(--border); border-radius:14px;overflow:hidden;transition:box-shadow .16s,transform .16s} @media(hover:hover){.lp-goods-card:hover{box-shadow:var(--shadow-card);border-color:var(--text-muted)}} .lp-goods-thumb{aspect-ratio:1/1;background:var(--divider) center/cover no-repeat} .lp-goods-body{padding:10px 12px 14px} .lp-goods-src{display:inline-flex;align-items:center;height:20px;padding:0 8px; border-radius:var(--r-pill);font-size:10.5px;font-weight:700} .lp-goods-src.coupang{background:#FFEDED;color:#E2231A} .lp-goods-src.naver{background:#E7F9EE;color:#03C75A} .lp-goods-name{font-size:12.5px;line-height:17px;color:var(--text);margin-top:6px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lp-goods-price{font-size:14.5px;font-weight:800;color:var(--navy);margin-top:6px;letter-spacing:-.02em} .lp-goods-note{font-size:11px;color:var(--text-muted);margin-top:12px} @media(min-width:600px){.lp-hscroll{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}} /* beneSec·postNewsSec·newsSec도 세로 간격은 --sec-gap 규칙에 맡긴다 (위 §6 참고) */ /* 가입 혜택 — 홈(비로그인) & 회원가입 화면 공용 */ .lp-bene-head{margin-bottom:18px} .lp-bene-k{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r-pill); background:var(--navy);color:#fff;font-size:11.5px;font-weight:700} .lp-bene-head h2{font-size:26px;line-height:35px;font-weight:800;letter-spacing:-.035em} .lp-bene-lead{font-size:14.5px;line-height:22px;color:var(--text-2);margin-top:8px} .lp-bene-lead strong{color:var(--coral-deep);font-weight:800} .lp-bene-list{display:grid;gap:2px;grid-template-columns:minmax(0,1fr); background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden} .lp-bene{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:flex-start; padding:var(--card-py) var(--card-px);border-bottom:1px solid var(--divider);transition:background .16s} .lp-bene:last-child{border-bottom:0} @media(hover:hover){.lp-bene:hover{background:var(--ivory)}} .lp-bene-ic{width:38px;height:38px;border-radius:12px;background:var(--mist);color:var(--navy); display:flex;align-items:center;justify-content:center;flex:none} .lp-bene-tx strong{display:block;font-size:15.5px;line-height:22px;font-weight:700;color:var(--text);letter-spacing:-.02em} .lp-bene-tx em{display:block;font-style:normal;font-size:13px;line-height:19px;color:var(--text-2);margin-top:5px} .lp-bene-cta{margin-top:14px} .lp-bene-sub{font-size:12.5px;line-height:18px;color:var(--text-muted);text-align:center;margin:10px 0 22px} .lp-bene-sub a{font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:2px} .lp-bene-sub a:hover{color:var(--coral-deep)} /* 브리핑 박스가 카드 사이로 들어오므로 여백을 카드와 똑같이 맞춘다. (wrap 클래스의 좌우 padding 을 없애야 카드와 폭이 정확히 같아진다) */ .lp-find #newsSec{padding:0;margin:0 0 10px;max-width:none} @media(min-width:760px){ .lp-bene-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0} .lp-bene:nth-last-child(2):nth-child(odd){border-bottom:0} } /* "남기시면 찾아드려요" — 입력하면 결과가 바로 채워지는 데모 패널 */ /* 라운딩 금지 — 사용자 확정 규칙(2026-08-22): 검색창에는 border-radius 를 절대 넣지 않는다 */ /* 바탕을 라플 로고 오렌지로 올리고, 오른쪽에 로고와 같은 대각 투톤을 넣는다 (2026-08-29 사용자 지시). 예전 --coral(#EF766A)은 살구빛이라 가라앉아 보였다. 로고·앱아이콘과 같은 색을 써서 화면 어디서 봐도 같은 주황으로 읽히게 한다. ⚠ 색은 눈대중이 아니라 images/app/icon-512.png 에서 뽑은 값이다 — 진한 쪽 #D95019, 밝은 쪽 #F16531. ⚠ 여전히 라운딩 금지 (사용자 확정 규칙). 대각선만 넣고 모서리는 각지게 둔다. ⚠ 글씨가 놓이는 왼쪽은 밝은 쪽으로 둔다. 진한 쪽을 왼쪽에 두면 흰 글씨 대비가 들쭉날쭉해진다. */ .lp-find-form{position:relative;background:#F16531;border-radius:0; padding:var(--card-py) var(--card-px);display:grid;gap:12px} /* 오른쪽 아래 (2026-08-29 사용자 지시) — 오른쪽 변 위에서 1/3 높이에서 시작해 하단 2/3 지점까지 잇는 삼각형. ⚠ 그라데이션 하드스톱으로는 이 모양이 안 나온다. 화면 폭이 바뀌면 각도가 틀어져 모서리에 딱 붙지 않는다. clip-path 는 % 로 잡으므로 어느 폭에서도 두 꼭짓점이 그대로다. ⚠ 글자·선택 박스보다 아래에 깔린다. 안 그러면 삼각형이 입력칸을 덮는다. */ .lp-find-form::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:#D95019;clip-path:polygon(100% 33.3%, 100% 100%, 66.7% 100%)} .lp-find-form > *{position:relative;z-index:1} /* 지원 페이지로 넘어가는 버튼 (2026-08-29 사용자 지시) — 주황 박스 안이라 흰 바탕에 주황 글씨 */ .lp-find-go{display:block;width:100%;margin-top:12px;padding:15px;border:0;cursor:pointer; background:#fff;color:#D8471B;font-family:inherit; font-size:15.5px;font-weight:800;letter-spacing:-.035em} @media(hover:hover){.lp-find-go:hover{background:#FFF1EC}} .lp-find-row{display:grid;grid-template-columns:minmax(0,1fr);gap:7px} .lp-find-lb{font-size:12px;font-weight:700;color:rgba(255,255,255,.86);letter-spacing:-.01em} /* 선택 박스 바로 아래 (박스 바깥) — 왼쪽에 임산부·육아맘 그림, 오른쪽에 글 */ .lp-find-wx{padding:16px 2px 6px;display:flex;align-items:center;gap:12px} .lp-find-avatar{flex:none;width:76px;line-height:0} .lp-find-avatar img{width:100%;height:auto;display:block} .lp-find-wxtx{flex:1;min-width:0} @media(min-width:600px){.lp-find-wx{gap:16px}.lp-find-avatar{width:104px}} @media(max-width:420px){ /* 좁은 화면에서는 그림을 줄이고 글자도 한 단계 낮춰 두 줄을 넘지 않게 한다 */ .lp-find-wx{gap:10px;padding-top:14px} .lp-find-avatar{width:60px} .lp-find-wx-1{font-size:11.5px;line-height:17px;gap:3px 6px} .lp-find-wx-2{font-size:16px;line-height:23px;margin-top:5px} .lp-find-said{font-size:12.5px;line-height:19px;margin-top:5px} } .lp-find-wx-1{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px; font-size:12.5px;line-height:18px;font-weight:600;color:var(--text-muted)} .lp-find-wx-tag{flex:none;font-size:10.5px;font-weight:700;color:var(--text-muted); border:1px solid var(--border);border-radius:var(--r-pill);padding:1px 7px} /* 안부 인사가 이 블록의 주인공 — 가장 크고 진하게 */ .lp-find-wx-2{font-size:19px;line-height:27px;font-weight:800;color:var(--navy);letter-spacing:-.03em;margin-top:7px} .lp-find-said{font-size:14px;line-height:21px;color:var(--text-2);letter-spacing:-.02em;margin-top:7px} .lp-find-said strong{color:var(--coral-deep);font-weight:700} @media(max-width:380px){.lp-find-wx-2{font-size:17.5px;line-height:25px}} .lp-find-sel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .lp-find-sel select{-webkit-appearance:none;appearance:none;width:100%;min-width:0;height:44px; padding:0 32px 0 13px;border:0;border-radius:0;background:#fff;color:var(--text); font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.02em;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2317213a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center} .lp-find-sel select:focus-visible{outline:2px solid var(--coral);outline-offset:2px} .lp-find-said{font-size:13px;line-height:19px;color:var(--text-2);margin:14px 2px 10px} .lp-find-said strong{color:var(--text);font-weight:700} /* 카드 사이 세로 간격은 예외 없이 --sec-gap 하나가 정한다 — 여기만 10px이면 훑어 내려갈 때 섹션 사이(24px)와 어긋나 리듬이 깨진다 */ .lp-find-out{display:grid;gap:var(--sec-gap);grid-template-columns:minmax(0,1fr);list-style:none;margin:0;padding:0} /* MY플래너 소개 — '플래너' 탭으로 바로 들어온 사람에게 사진과 함께 기능부터 보여준다 (2026-08-21) */ /* 위 모서리는 각지게 — 사진이 카드 라운딩에 깎여 보이지 않게 한다 */ /* 테두리 없음 — 어두운 홈 배경에서 1px 밝은 선이 흰 테두리처럼 떠 보인다 (2026-08-22 삭제) */ .lp-plan-intro{background:var(--surface);border:0; border-radius:0 0 var(--r-card) var(--r-card);overflow:hidden;margin-bottom:10px} .lp-plan-intro-img{width:100%;height:150px;object-fit:cover} /* 캘린더 사진 배경 (2026-08-22) — 우측 여백에만 은은하게. 왼쪽은 완전한 흰색이라 글이 그대로 읽히고, 오른쪽으로 갈수록 사진이 비친다 */ .lp-plan-intro-tx{padding:16px var(--card-px) 18px;position:relative; background:linear-gradient(90deg, #fff 0%, #fff 52%, rgba(255,255,255,.72) 100%), url('/images/planner-bg.jpg') right center/auto 100% no-repeat} .lp-plan-intro-tx h2{font-size:18px;line-height:25px;letter-spacing:-.02em} .lp-plan-intro-tx > p{margin-top:6px;font-size:14px;line-height:21px;color:var(--text-2)} .lp-plan-intro-tx > p strong{color:var(--navy)} .lp-plan-intro-feats{margin-top:12px;display:grid;gap:8px} .lp-plan-intro-feats li{display:flex;gap:8px;font-size:13.5px;line-height:19px;color:var(--text-2)} .lp-plan-intro-feats li > span:first-child{flex:none} .lp-plan-intro-feats strong{color:var(--navy)} /* 콘텐츠 목록 위 개인화 안내 한 줄 */ /* 목록의 순서를 설명하는 한 줄 — 위아래 여백을 잡아 준다 (2026-08-24). ⚠ 전에는 위 10px · 아래 0 이었다. 위쪽 탭이 이미 22px 을 갖고 있어서 '위 32px · 아래 0' 이 되어, 안내문이 카드에 딱 붙어 카드의 일부처럼 보였다. 목록을 설명하는 문장이니 탭보다는 목록 쪽에 가깝게 둔다. */ .lp-cat-note{margin:2px 0 16px;font-size:12.5px;line-height:18px;color:var(--text-muted)} @media(max-width:1024px){ .lp-cat-note{margin:0 0 14px} } .lp-cat-note strong{color:var(--navy);font-weight:700} /* 우하단 등록 버튼 — 눈에 띄되 카드 안 소품 크기로 */ .lp-plan-intro-cta{display:block;margin:12px 0 0 auto;border:0;background:none;padding:4px 0;cursor:pointer; font-family:inherit;font-size:13.5px;font-weight:700;color:var(--coral-deep)} @media(min-width:1025px){.lp-plan-intro-img{height:200px}} .lp-fd{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden} /* 카드 제목은 아이콘만 주황으로 짚어주고 글자는 톤을 낮춘다 (검정 80% 정도) */ .lp-fd-h{display:flex;align-items:center;gap:8px;padding:14px var(--card-px);border-bottom:1px solid var(--divider)} .lp-fd-h .lp-ic{flex:none;color:var(--coral)} .lp-fd-h h3{flex:1;min-width:0;font-size:14.5px;line-height:21px;font-weight:800; letter-spacing:-.02em;color:#4A5164} .lp-fd-cnt{flex:none;font-size:11.5px;font-weight:700;color:var(--coral-deep); background:var(--peach);border-radius:var(--r-pill);padding:3px 9px} /* 개수 배지가 링크일 때 — 눌러서 전체 목록(support.php)으로 간다는 걸 손 모양으로 알린다 */ a.lp-fd-more{text-decoration:none;cursor:pointer;transition:background .16s,color .16s} @media(hover:hover){a.lp-fd-more:hover{background:var(--coral);color:#fff}} .lp-fd-b{padding:4px 0} .lp-fd-r{display:flex;align-items:center;gap:11px;padding:12px var(--card-px);color:inherit;text-decoration:none} /* 줄 앞 이모지 — 글자만 이어지지 않게 시선을 끊어준다 */ .lp-fd-e{flex:none;width:30px;height:30px;border-radius:10px;background:var(--ivory); display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1} /* 기사는 이모지 대신 작은 썸네일 */ .lp-fd-th{flex:none;width:44px;height:34px;border-radius:8px;background:var(--mist) center/cover no-repeat} /* 콘텐츠 썸네일은 제목이 새겨진 이미지라 44px에서는 글자가 뭉개진다. 좁은 화면에서는 아예 빼고 제목만 보여주는 편이 읽기 좋다. (장소·병원 등 실제 사진을 쓰는 카드는 그대로 둔다) */ @media(max-width:767px){ .lp-fd-content .lp-fd-th, .lp-fd-support .lp-fd-th{display:none} } .lp-fd-r + .lp-fd-r{border-top:1px solid var(--divider)} @media(hover:hover){a.lp-fd-r:hover{background:var(--ivory)}} /* 이름과 설명을 한 줄에 나란히. 넘치면 끝에서 … 로 자른다 */ .lp-fd-n{flex:1;min-width:0;font-size:14px;line-height:20px;font-weight:600;color:var(--text); letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lp-fd-n em{font-style:normal;font-size:12px;font-weight:500;color:var(--text-muted);margin-left:6px} .lp-fd-v{flex:none;font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap} .lp-fd-v.is-now{color:var(--coral-deep)} /* 육아 캘린더 — 이미 지난 일정은 힘을 빼서, 놓쳤다고 다그치지 않고 알아만 보게 한다 */ .lp-fd-v.is-past{color:var(--text-muted);font-weight:600} .lp-fd-r:has(.lp-fd-v.is-past) .lp-fd-n{color:var(--text-2)} .lp-fd-r .lp-ic{flex:none;color:var(--text-muted)} /* 우리 동네 지원금 줄 — 이름만으로는 무엇을 받는지 알 수 없어 사업내용·신청절차를 아래에 깔고, 오른쪽에 신청 버튼을 세운다 */ .lp-loc{align-items:flex-start} .lp-loc .lp-fd-e{margin-top:2px} .lp-loc-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .lp-loc .lp-fd-n{white-space:normal;overflow:visible;text-overflow:clip} .lp-loc-d,.lp-loc-h{margin:0;font-size:12.5px;line-height:18px;color:var(--text-2); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lp-loc-h{-webkit-line-clamp:1} .lp-loc-d b,.lp-loc-h b{display:inline-block;margin-right:6px;font-size:11px;font-weight:700; color:var(--text-muted);letter-spacing:-.01em} .lp-loc-cta{flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center; height:30px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--border); background:var(--ivory);color:var(--text-2);font-size:12.5px;font-weight:700;white-space:nowrap;text-decoration:none} @media(hover:hover){.lp-loc-cta:hover{border-color:var(--navy);color:var(--navy)}} @media(max-width:479px){ .lp-loc{flex-wrap:wrap} .lp-loc-cta{width:100%;margin-top:8px;align-self:stretch} } /* 뉴스 박스 헤더 우측 — 베이비뉴스 가로형 로고 (출처 표시 + 바로가기) */ .lp-fd-h .lp-news-src{margin-left:auto;display:flex;align-items:center;flex:none} .lp-fd-h .lp-news-src img{display:block;height:20px;width:auto} /* 본문 '◇ 소제목' — 기사·콘텐츠 공통 (lp_bold_subheads 가 감싼다) */ .lp-subhead{display:inline-block;font-weight:800;color:var(--text);margin-top:6px;letter-spacing:-.02em} /* 포인트 적립 안내 한 줄 — 기록·댓글 등 적립되는 행동 옆. 누르면 포인트 페이지로 */ .lp-lp-hint{display:inline-block;margin:8px 0 0;font-size:12px;color:var(--text-muted); letter-spacing:-.01em;text-decoration:none} .lp-lp-hint strong{color:var(--coral-deep);font-weight:800} .lp-lp-hint em{font-style:normal;font-weight:700;color:var(--coral-deep)} @media(hover:hover){a.lp-lp-hint:hover em{text-decoration:underline;text-underline-offset:3px}} /* ===== 주말 게릴라 이벤트 팝업 (inc/event_popup.php, 2026-08-29~30) ===== ⚠ 라운딩은 인사 팝업과 같은 예외로 둔다 — 화면을 덮는 카드 둘의 결이 달라지면 따로 논다. ⚠ 잠금 클래스(.lp-wel-lock)는 인사 팝업 것을 그대로 쓴다. 같은 일을 하는 클래스를 두 벌 만들면 한쪽만 고쳐 놓고 다른 쪽에서 스크롤이 죽는다. */ .lp-gv{position:fixed;inset:0;z-index:121;display:flex;align-items:center;justify-content:center; padding:16px;box-sizing:border-box;font-family:'Freesentation',var(--font)} .lp-gv[hidden]{display:none} .lp-gv-back{position:absolute;inset:0;background:rgba(28,22,18,.55)} .lp-gv-card{position:relative;width:100%;max-width:330px;box-sizing:border-box; background:#fff;border-radius:24px;padding:26px 20px 18px;text-align:center; box-shadow:0 24px 60px rgba(30,20,14,.4); animation:lpWelIn .4s cubic-bezier(.2,.9,.3,1) both} @media(prefers-reduced-motion:reduce){.lp-gv-card{animation:none}} .lp-gv-x{position:absolute;top:10px;right:10px;border:0;background:none;padding:8px;cursor:pointer; line-height:0;color:#B0A8A2;z-index:2} .lp-gv-badge{margin:0;display:inline-block;background:#FFF1EC;color:#E0451B; padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:800;letter-spacing:-.03em} .lp-gv-when{margin:8px 0 0;font-size:12.5px;font-weight:700;color:#9A928C;letter-spacing:-.02em} .lp-gv-t{margin:12px 0 0;font-size:22px;line-height:1.36;font-weight:800; letter-spacing:-.04em;color:#2C2A28} /* 로고와 금액을 한 줄에 붙인다 — 눈이 여기서 멈춰야 한다 */ .lp-gv-prize{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0} .lp-gv-prize img{display:block;height:27px;width:auto} .lp-gv-prize b{font-size:30px;font-weight:800;letter-spacing:-.04em;color:#03C75A} .lp-gv-100{margin:2px 0 0;font-size:19px;font-weight:800;letter-spacing:-.04em;color:#2C2A28} .lp-gv-cond{margin:12px 0 0;font-size:12.5px;font-weight:600;color:#8C847E;letter-spacing:-.02em} .lp-gv-cond b{color:#5B5550;font-weight:800} .lp-gv-go{display:block;margin:16px 0 0;padding:16px;border-radius:999px; background:#03C75A;color:#fff;text-decoration:none; font-size:17px;font-weight:800;letter-spacing:-.035em; box-shadow:0 6px 16px rgba(3,199,90,.28)} @media(hover:hover){.lp-gv-go:hover{filter:brightness(.96)}} .lp-gv-later{display:block;width:100%;margin:8px 0 0;padding:10px;border:0;background:none; cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:#A79F99} @media(max-width:359px){ .lp-gv-card{padding:24px 16px 16px} .lp-gv-t{font-size:20px} .lp-gv-prize b{font-size:27px} } /* 홈의 8칸 카드 위 안내 (index.php, 2026-08-29 사용자 지시). ⚠ 카드가 이 안내 바로 아래 붙는다. 아래쪽 여백을 여기서 주고, .sp-menu 는 건드리지 않는다 — 같은 .sp-menu 를 지원 페이지도 쓰는데 거기서는 위에 검색창이 온다. */ /* ⚠ 좌우 여백을 여기서 못 박는다 (2026-08-29 사용자 지시: "좌, 우측 여백 조금 주고"). .wrap 의 --pad 만 믿었더니 폰에서 계산값이 0 으로 나와 글이 화면 끝에 붙었다. 안내 문구는 카드와 달리 자기 안쪽 여백이 없어서, 그대로 두면 첫 글자가 잘려 보인다. */ .lp-spcards{padding-block:var(--sec-gap) 0;padding-inline:var(--pad)} @media(max-width:759px){.lp-spcards{padding-inline:14px}} /* 폰에는 hover 가 없다 — 누르는 동안의 반응으로 같은 움직임을 준다 (2026-08-29 사용자 지시). ⚠ @media(hover:hover) 안에만 두면 폰에서는 카드가 아무 반응도 하지 않아 눌린 줄 모른다. */ @media(hover:none){ .sp-mi{transition:transform .13s ease, box-shadow .13s ease} .sp-mi:active{transform:scale(.97);box-shadow:0 10px 24px rgba(20,25,29,.13)} .sp-mi:active .sp-mi-ic{transform:scale(1.1) rotate(-4deg)} } .lp-spc-intro{margin:0 0 16px} .lp-spc-intro h2{margin:0;font-size:clamp(21px,3.6vw,27px);line-height:1.34; font-weight:800;letter-spacing:-.045em;color:var(--text)} /* 둘째 줄만 라플 오렌지 (2026-08-29 사용자 지시) — 서비스 이름이 들어간 줄이라 여기서 눈이 멈춘다 */ .lp-spc-intro h2 strong{color:#F16531;font-weight:800} /* '베이비뉴스가 만든 …' — 로고를 글줄 가운데에 맞춘다. baseline 에 두면 글자보다 내려가 덜컹한다 */ .lp-spc-by{display:inline-flex;align-items:center;gap:2px;flex-wrap:wrap} .lp-spc-by .ob-bn-logo{display:inline-block;height:15px;width:auto;vertical-align:middle} .lp-spc-intro p{margin:10px 0 0;font-size:14.5px;line-height:1.62;font-weight:500; color:var(--text-2);letter-spacing:-.025em} /* '카카오톡으로 1초 만에 가입하면 끝!' — 같은 문단 안에서 색·굵기만 다르다. ⚠ display:block 을 주지 않는다. 문단으로 떼면 줄 사이가 벌어져 딴 얘기처럼 읽힌다. */ .lp-spc-join{font-weight:800;color:#D8471B} .lp-spc-join[hidden]{display:none} /* 하단 탭바 — 로그인 전 '해피박스' 자리 (2026-08-29 사용자 지시). ⚠ 다른 탭은 선 아이콘(23px)인데 이건 사진이라, 같은 23px 로 두면 훨씬 작아 보인다. 탭 높이 안에서 조금 키우고 아래 여백만 아이콘과 맞춘다. */ /* ⚠ 처음엔 해피박스 사진을 넣었는데 다른 탭의 선 아이콘들과 결이 달라 혼자 튀었다. 지금은 선물상자 아이콘이라 크기를 따로 맞출 것이 없다 — 자리만 잡아 둔다. */ /* 출산지원·혜택 탭만 아이콘을 라플 오렌지로 (2026-08-29 사용자 지시) — 이 서비스의 메인 화면이라 다섯 탭 중 여기로 눈이 먼저 가야 한다. 글자는 다른 탭과 같은 색 그대로 둔다("이모티콘만"). */ .lp-tabbar .lp-tab.t-support .lp-ic{color:#F16531} .lp-tab-hb{display:flex;align-items:center;justify-content:center} .lp-tab-hb[hidden],.lp-tab-ic[hidden]{display:none} /* 콘텐츠 맞춤 노출 안내줄 (index.php, 2026-08-29 사용자 지시). 목록 위 한 줄로 '지금 무엇을 보고 있는지' 말하고, 전체로 돌아갈 단추를 같이 둔다. ⚠ 감춘 글이 있다는 사실을 알리지 않으면, 글이 사라진 것처럼 보인다. */ .lp-onlymine{display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin:0 0 14px;font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:-.02em} .lp-onlymine[hidden]{display:none} .lp-onlymine b{color:#D8471B;font-weight:800} .lp-onlymine button{padding:6px 12px;border:1px solid var(--border);background:var(--surface); color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:-.02em; cursor:pointer;-webkit-appearance:none;appearance:none} @media(hover:hover){.lp-onlymine button:hover{border-color:#F16531;color:#D8471B}} /* 우리 동네가 따로 주는 지원금 (support.php, 2026-08-29) — '우리 동네' 탭 맨 위. ⚠ 합산하지 않고 항목을 그대로 보여준다. 금액이 눈에 먼저 들어와야 하므로 오렌지·굵게. ⚠ 라운딩 없이 각지게 (사이트 공통 규칙). */ .sp-grant{padding:16px;background:#FFF6F2;border-left:3px solid #F16531} .sp-grant-h{margin:0 0 12px;font-size:15.5px;font-weight:800;letter-spacing:-.035em;color:var(--text)} .sp-grant-l{margin:0;padding:0;list-style:none;display:grid;gap:10px} .sp-grant-l li{display:grid;gap:2px} .sp-grant-l b{font-size:13.5px;font-weight:700;color:var(--text-2);letter-spacing:-.02em} .sp-grant-l em{font-style:normal;font-size:15px;font-weight:800;color:#D8471B;letter-spacing:-.03em} .sp-grant-l span{font-size:12.5px;color:var(--text-muted);letter-spacing:-.02em} .sp-grant-src{margin:12px 0 0;font-size:11.5px;line-height:1.55;color:var(--text-muted);letter-spacing:-.02em} /* 복지로에서 자동으로 가져온 금액 상자 — 손으로 확인해 적은 표와 구분되게 옅게 (2026-08-30) */ .sp-grant-api{background:#FFFBF7;border-left-color:#F6A98C} .sp-grant-l b i{font-style:normal;font-weight:600;font-size:11.5px;color:var(--text-muted)} /* 지원금 결과 탭 — 중앙정부 / 우리 동네 지자체 (support.php, 2026-08-29 사용자 지시). ⚠ 라운딩 없이 각지게 (사이트 공통 규칙). ⚠ 고른 탭은 색을 채워 표시한다. 밑줄만으로는 폰에서 어느 쪽인지 잘 안 보인다. */ /* ⚠ 카드 사이 간격은 #spList 의 grid gap 이 준다. 그런데 그 gap 은 '직계 자식'에게만 붙는다 — 탭을 넣으면서 카드가 .sp-pane 안으로 한 겹 들어가 손자가 됐고, 간격이 통째로 사라져 카드들이 서로 맞붙었다. 판(.sp-pane)에도 같은 격자를 준다. ⚠ 탭 줄의 아래 여백은 따로 주지 않는다 — gap 이 이미 벌려 준다. 둘 다 주면 그 자리만 벌어진다. */ #spList .sp-pane{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);align-content:start} .sp-tabs{display:flex;gap:0;margin:0;border-bottom:1px solid var(--divider)} .sp-tab{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px; padding:12px 8px;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer; font-family:inherit;font-size:14px;font-weight:700;letter-spacing:-.03em;color:var(--text-muted); -webkit-appearance:none;appearance:none} .sp-tab em{font-style:normal;font-size:12px;font-weight:800;padding:1px 6px; background:var(--divider);color:var(--text-2)} .sp-tab.is-on{color:#D8471B;border-bottom-color:#F16531} .sp-tab.is-on em{background:#FFF1EC;color:#D8471B} @media(hover:hover){.sp-tab:not(.is-on):hover{color:var(--text-2)}} .sp-pane[hidden]{display:none} /* 분류별 머리글 (support.php, 2026-08-29 사용자 지시) — 육아휴직 계산기(.lv-page)와 같은 리듬. ▌작은 이름(.ob-eyebrow) / 큰 제목 두 줄 / 설명 한 줄. 세 요소 모두 이미 있는 공통 클래스를 쓰고, 여기서는 제목 크기와 위아래 간격만 계산기 화면에 맞춘다. */ .sp-head{margin:0 0 18px} .sp-head[hidden]{display:none} .sp-head h2{margin:14px 0 0;font-size:clamp(24px,4.2vw,32px);line-height:1.32; font-weight:800;letter-spacing:-.045em;color:var(--text)} .sp-head .ob-lead{margin-top:10px} /* 내 위치 등록 (support.php, 2026-08-29 사용자 지시) — 지도와 목록 사이, 오른쪽. ⚠ 검색창(주황 바탕) 안에 있다가 여기(베이지 바탕)로 옮겨 왔다. 글자색·바탕색이 반대가 된다. ⚠ 라운딩 없이 각지게 (사이트 공통 규칙). ⚠ 폰에서는 설명과 단추를 세로로 쌓는다. 한 줄에 넣으면 설명이 두세 글자만 남고 줄바꿈된다. */ .sp-geo{display:flex;align-items:center;justify-content:flex-end;gap:10px; flex-wrap:wrap;margin:0 0 14px} .sp-geo-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:0;flex:none; background:#F16531;color:#fff;font-family:inherit;font-size:13.5px;font-weight:800; letter-spacing:-.03em;cursor:pointer;-webkit-appearance:none;appearance:none} .sp-geo-btn.is-on{background:var(--text);color:#fff} @media(hover:hover){.sp-geo-btn:hover{filter:brightness(.94)}} .sp-geo-note{margin:0;font-size:12.5px;font-weight:600;color:var(--text-muted);letter-spacing:-.02em} @media(max-width:759px){ .sp-geo{flex-direction:column;align-items:flex-end;gap:6px} .sp-geo-note{order:2;text-align:right} .sp-geo-btn{order:1} } /* 결과 카드의 거리 — 이름 오른쪽. 정원 배지와 나란히 설 수 있어야 한다 */ .sp-card-km{flex:none;margin-left:auto;padding:3px 8px;background:#FFF1EC;color:#D8471B; font-size:12px;font-weight:800;letter-spacing:-.02em;white-space:nowrap} .sp-card-km + .sp-card-cap{margin-left:6px} /* 지도에서 보고 있는 카드 — 목록에서도 어느 줄이었는지 남긴다 (2026-08-29). 지도로 눈이 옮겨간 뒤 목록으로 돌아왔을 때 "내가 뭘 눌렀더라"가 되지 않게. */ .sp-card.is-pin{border-color:#F16531;box-shadow:0 0 0 1px #F16531 inset} .sp-card-bottom .lp-hmap.is-pin, .sp-card.is-pin .lp-hmap{background:#F16531;border-color:#F16531;color:#fff} /* 지도에 찍을 좌표가 없을 때 — 눌러도 반응이 없으면 고장으로 읽히니 잠깐 흔들어 알린다 */ .lp-hmap.is-none{animation:lpHmapNo .3s ease 2} @keyframes lpHmapNo{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}} @media(prefers-reduced-motion:reduce){.lp-hmap.is-none{animation:none;opacity:.45}} /* 결과 지도 (support.php, 2026-08-29 사용자 지시) — 네이버로 내보내지 않고 여기서 보여준다. ⚠ 라운딩 없이 각지게. 검색 결과 영역의 일부다. */ .sp-map-wrap{margin:0 0 16px} .sp-map-wrap[hidden]{display:none} .sp-map{width:100%;height:300px;background:var(--divider)} @media(min-width:760px){.sp-map{height:420px}} .sp-map-note{margin:8px 0 0;font-size:12.5px;color:var(--text-muted);letter-spacing:-.02em} /* 핀을 눌렀을 때 뜨는 이름표 — 네이버 기본 말풍선은 우리 화면과 결이 달라 직접 그린다 */ .sp-map-iw{padding:8px 12px;background:var(--text);color:#fff; font-size:13px;font-weight:700;letter-spacing:-.03em;white-space:nowrap} /* 비회원 가입 팝업 (support.php, 2026-08-29 사용자 지시) — 조회는 회원만. 상시 노출 상자에서 '누를 때만 뜨는 팝업'으로 바꿨다. */ .sp-gate-pop{position:fixed;inset:0;z-index:122;display:flex;align-items:center;justify-content:center; padding:16px;box-sizing:border-box} .sp-gate-pop[hidden]{display:none} .sp-gate-back{position:absolute;inset:0;background:rgba(28,22,18,.55)} /* 오렌지 사각 테두리 (2026-08-29 사용자 지시) — 라운딩 없이 각지게. 흰 카드가 어두운 배경 위에 그냥 놓이면 경계가 흐리다. 브랜드 색 테두리로 또렷하게 세운다. */ .sp-gate{position:relative;width:100%;max-width:340px;box-sizing:border-box; background:var(--surface);border:2px solid #F16531;padding:26px 20px 22px;text-align:center; box-shadow:0 24px 60px rgba(30,20,14,.4)} .sp-gate-x{position:absolute;top:8px;right:8px;border:0;background:none;padding:8px;cursor:pointer; line-height:0;color:#B0A8A2} /* 육아휴직 계산기 — 비회원에게는 금액 자리를 점으로 가리고 버튼만 (leave.php, 2026-08-29) */ .lv-locked .lv-total-v strong{letter-spacing:.08em;color:var(--text-muted)} .lv-unlock{display:block;width:100%;margin-top:14px;padding:15px;border:0;cursor:pointer; background:#FEE500;color:#191600;font-family:inherit; font-size:16px;font-weight:800;letter-spacing:-.035em} @media(hover:hover){.lv-unlock:hover{filter:brightness(.97)}} .sp-gate-eb{margin:0;display:inline-block;background:#FFF1EC;color:#E0451B; padding:6px 13px;font-size:12.5px;font-weight:800;letter-spacing:-.02em} /* '회원 전용' 딱지를 대신하는 로고 (2026-08-29 사용자 지시) */ /* 로고는 크게 (2026-08-29 사용자 지시) — 팝업에서 가장 먼저 눈에 닿는 자리다. SVG 라 키워도 안 깨진다. 폰의 좁은 폭에서 넘치지 않게 max-width 로 한 번 잡아 준다. */ .sp-gate-logo{display:block;height:84px;width:auto;max-width:100%;margin:0 auto} .sp-gate h2{margin:14px 0 0;font-size:21px;line-height:1.4;font-weight:800; letter-spacing:-.04em;color:var(--text)} .sp-gate-list{margin:18px auto 0;padding:0;list-style:none;max-width:320px;text-align:left} .sp-gate-list li{position:relative;padding:7px 0 7px 24px;font-size:14px;font-weight:600;color:var(--text-2)} .sp-gate-list li::before{content:"✓";position:absolute;left:2px;color:#F16531;font-weight:800} /* 할 일 두 걸음 — 체크 대신 번호를 붙인다. 순서가 뜻을 가지기 때문이다(가입해야 정보를 넣는다) */ .sp-gate-list.is-step{counter-reset:spstep} .sp-gate-list.is-step li{counter-increment:spstep;padding-left:28px} /* STEP 표시와 문구는 같은 줄에서 시작하되, 표시를 왼쪽 칸에 세워 둔다 (2026-08-29 사용자 지시). ⚠ 예전에는 ::before 를 글자 흐름에 흘려보냈다. 그러면 둘째 줄(경품 문구)이 'STEP 1.' 밑으로 들어가 버려 윗줄 문구와 왼쪽 끝이 어긋난다. 칸을 비워 두고 그 안에 세우면 b 와 em 이 저절로 같은 세로선에서 시작한다. */ .sp-gate-list.is-step li::before{content:"STEP " counter(spstep) "."; position:absolute;left:0;top:6px;display:block;margin:0; font-size:13px;font-weight:800;color:#D8471B;letter-spacing:.01em} .sp-gate-list.is-step li{padding-left:52px;padding-top:6px;padding-bottom:6px} .sp-gate-list.is-step b{display:inline;font-size:13.5px;font-weight:800;color:var(--text);letter-spacing:-.04em} /* STEP 1 아래 경품 한 줄 — 가입할 이유를 준다. 위 문구와 같은 왼쪽 선에서 시작한다 */ .sp-gate-list.is-step em{display:block;margin-top:4px;font-style:normal; font-size:12.5px;font-weight:700;color:#D8471B;letter-spacing:-.02em} .sp-gate-list b{color:#D8471B;font-weight:800} .sp-gate-go{display:flex;align-items:center;justify-content:center;gap:8px; max-width:320px;margin:20px auto 0;padding:16px;border-radius:999px; background:#FEE500;color:#191600;text-decoration:none; font-size:16.5px;font-weight:800;letter-spacing:-.035em} @media(hover:hover){.sp-gate-go:hover{filter:brightness(.97)}} .sp-gate-sub{margin:12px 0 0;font-size:13px;color:var(--text-muted)} .sp-gate-sub a{color:var(--text-2);font-weight:700} /* 상단 메뉴 카드 (support.php, 2026-08-29 사용자 지시) — /biz 서비스 카드와 같은 결. ⚠ 여기는 라운딩을 쓴다. 사이트 공통 '라운딩 금지'의 예외이며, 사용자가 /biz 화면을 그대로 가리키며 지시했다. 검색창·입력칸으로 번지게 하지 말 것. ⚠ 색만 /biz 의 초록에서 라플 오렌지로 바꾼다. 그림자·모션 값은 그대로 옮겼다 — 두 화면의 카드가 다르게 움직이면 같은 회사 것으로 안 보인다. */ /* 가로 스크롤 줄 (2026-08-29 사용자 지시) — 항목이 늘어도 줄이 접히지 않는다. ⚠ 좌우 여백을 음수 마진으로 걷어내 카드가 화면 끝까지 흐르게 한다 (좌우 꽉 채우기 규칙). 안 그러면 마지막 카드가 여백 앞에서 잘려 '더 있는 줄'로 안 보인다. ⚠ 스크롤바는 감춘다. 폰에는 원래 없고, PC 에서만 굵은 막대가 카드 밑에 남는다. */ /* 카드 줄 머리말 (2026-08-29 사용자 지시) — 이 줄이 뭘 고르는 곳인지 먼저 말해 준다 */ .sp-menu-lb{margin:20px 0 0;font-size:14px;font-weight:800;color:var(--text);letter-spacing:-.03em} /* 폰 — 한 줄에 4개씩, 제목만. 설명은 감춘다 (2026-08-29 사용자 지시). 여덟 장을 설명까지 달아 가로로 늘어놓으면 화면 밖으로 한참 흘러 뒤쪽은 안 본다. 제목만 남기면 두 줄에 다 들어와 한눈에 고를 수 있다. */ .sp-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px} /* 폰 — 한 줄에 2개 (2026-08-29 사용자 지시). 4개씩 넣었더니 한 칸이 80px 밖에 안 돼 '출산지/원금'처럼 이름이 세 줄로 쪼개졌다. 2개면 이름이 한 줄에 들어가고, 아이콘을 왼쪽에 두어 카드가 납작해진다. */ @media(max-width:759px){ .sp-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} /* 두 칸이 되어 자리가 생겼다 — 짧은 설명을 되살린다. 아이콘과 제목만 있으면 휑하다 (2026-08-29 사용자 지적). 긴 설명은 PC 몫이고 폰은 .sp-mi-short 를 쓴다. */ .sp-mi{padding:14px 12px;text-align:left} .sp-mi-ic{width:52px;height:52px;border-radius:11px;margin:0 0 10px} .sp-mi-ic svg{width:20px;height:20px} .sp-mi p{margin-top:5px;font-size:11.5px;line-height:1.45;letter-spacing:-.04em} /* 이름은 반드시 한 줄 — 긴 꼬리는 감추고, 그래도 넘치면 말줄임 (2026-08-29 사용자 지시) */ .sp-mi h3{font-size:14px;line-height:1.3;letter-spacing:-.045em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sp-mi-long{display:none} } /* 폰용 짧은 설명은 PC 에서 감춘다 — 한 카드에 두 벌이 같이 나오지 않게 */ @media(min-width:760px){.sp-mi-short{display:none}} /* PC 는 설명까지 보여주고 4칸 두 줄. ⚠ 제목 안의
은 폰에서만 쓴다 — PC 는 칸이 넓어 한 줄에 들어가는데 줄바꿈이 남아 있으면 혼자만 두 줄이 되어 카드 높이가 어긋난다. */ @media(min-width:760px){ .sp-menu{gap:12px} .sp-mi h3 br{display:none} } .sp-mi{display:block;text-align:left;cursor:pointer;box-sizing:border-box; background:var(--surface);border:1px solid var(--border);border-radius:16px; padding:20px 18px;box-shadow:0 2px 12px rgba(20,25,29,.07); font-family:inherit;text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease} @media(hover:hover){ .sp-mi:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(20,25,29,.12)} } .sp-mi-ic{width:60px;height:60px;border-radius:12px;background:#FFF1EC; display:flex;align-items:center;justify-content:center;margin-bottom:14px; transition:transform .35s cubic-bezier(.3,1.5,.5,1), background .25s ease} /* 일러스트 아이콘 (2026-08-29 사용자 지시) — 선 아이콘 대신 그림을 넣는다. ⚠ 타일이 주황으로 바뀌는 hover·선택 효과를 그림 때문에 한 번 껐다가, 사용자 지시로 되돌렸다 ("8장 카드에 원래 있던 모션 그대로"). 카드가 뜨고 아이콘이 톡 튀는 것까지 한 덩어리의 움직임이라, 색만 빼면 고른 카드가 어느 것인지도 흐려진다. */ .sp-mi-ic img{width:100%;height:100%;object-fit:contain;display:block} .sp-mi-ic svg{width:24px;height:24px;stroke:#F16531;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s ease} @media(hover:hover){ /* 아이콘이 톡 튀어오른다 — /biz 와 같은 곡선값 */ .sp-mi:hover .sp-mi-ic{transform:scale(1.12) rotate(-4deg);background:#F16531} .sp-mi:hover .sp-mi-ic svg{stroke:#fff} } .sp-mi h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.035em;color:var(--text)} /* 눈에 먼저 걸려야 하는 카드 — 주말·휴일 병원, 육아휴직 계산기 (2026-08-29 사용자 지시). ⚠ 고른 카드(.is-on)는 테두리로 표시한다. 여기는 '고름'이 아니라 '중요함'이라 글자색만 쓴다 — 둘을 같은 방식으로 표시하면 무엇이 지금 선택된 것인지 알 수 없어진다. */ .sp-mi h3.is-hot{color:#D8471B} /* 병원·약국 이름 뒤의 '(평일/주말)' — 이름보다 작게, '주말'만 오렌지 (2026-08-29 사용자 지시) */ .sp-mi-when{font-size:.82em;font-weight:700;color:var(--text-2);margin-left:2px} .sp-mi-when em{font-style:normal;color:#D8471B;font-weight:800} .sp-mi p{margin:7px 0 0;font-size:13px;line-height:1.6;font-weight:500;color:var(--text-2); letter-spacing:-.02em} /* 고른 카드 — 테두리와 아이콘으로 표시한다 */ /* PC 에서는 얹기만 해도 테두리가 오렌지로 — 누를 수 있는 칸임을 미리 알린다 (2026-08-29). ⚠ 폰에는 hover 가 없다. 거기서는 눌리는 순간 is-on 이 붙는다(홈은 스크립트가, 지원은 고른 상태로). */ @media(hover:hover){.sp-mi:hover{border-color:#F16531}} .sp-mi.is-on{border-color:#F16531} .sp-mi.is-on .sp-mi-ic{background:#F16531} .sp-mi.is-on .sp-mi-ic svg{stroke:#fff} @media(prefers-reduced-motion:reduce){ .sp-mi,.sp-mi-ic{transition:none} .sp-mi:hover{transform:none} .sp-mi:hover .sp-mi-ic{transform:none} } /* 지원 페이지 검색창 — ① 지역 ② 상태 ③ 분류 (2026-08-29 사용자 지시로 순서·형태 변경). 메인 검색창(.lp-find-form)을 그대로 가져와 맞췄다 — 같은 주황 바탕, 같은 대각 투톤. ⚠ 색·대각선 값은 .lp-find-form 과 같아야 한다. 한쪽만 고치면 두 화면의 검색창이 갈린다. ⚠ 라운딩 금지 — 검색창에는 border-radius 를 넣지 않는다 (사용자 확정 규칙). */ /* 회원인데 맞춤정보(지역·시기)가 비어 있을 때 (2026-08-29 사용자 지시). 막는 안내가 아니라 권하는 안내다 — 오렌지 띠 하나로 눈에만 걸리게 둔다. */ .sp-nudge{display:block;margin:14px 0 0;padding:14px 16px;text-decoration:none; background:#FFF3EE;border-left:3px solid #F16531} .sp-nudge b{display:block;font-size:14.5px;font-weight:800;color:#D8471B;letter-spacing:-.035em} .sp-nudge span{display:block;margin-top:4px;font-size:12.5px;line-height:1.55; font-weight:600;color:var(--text-2);letter-spacing:-.02em} @media(hover:hover){.sp-nudge:hover{background:#FFE9E0}} /* 맞춤설정으로 보내는 단추 — 오른쪽에, 오렌지 바탕에 흰 글씨 (2026-08-29 사용자 지시). ⚠ 라운딩 없이 각지게. 검색창과 같은 줄기의 요소라 같은 규칙을 따른다. */ .sp-refilter{display:block;width:fit-content;margin:16px 0 0 auto;padding:11px 18px; border:0;background:#F16531;color:#fff;text-decoration:none;cursor:pointer; font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:-.03em} @media(hover:hover){.sp-refilter:hover{filter:brightness(.95)}} .sp-filter[hidden]{display:none} .sp-filter{position:relative;background:#F16531;padding:var(--card-py) var(--card-px);margin-top:16px} /* ⚠ PC 에서 좌우 안쪽 여백을 0 으로 두었던 규칙은 없앴다 (2026-08-29). '입력칸을 위 카드와 같은 선에서 시작하게' 하려던 것이었는데, 그러면 라벨(지역·우리 아기는?)과 오른쪽 아래 자료 출처 줄이 주황 상자의 맨 끝에 딱 붙어 잘려 보인다 — 사용자가 화면으로 지적했다. 실제로 넘치지는 않았지만(scrollWidth == clientWidth), 눈에는 잘린 것으로 읽힌다. 상자의 바깥 폭은 위 카드 줄과 여전히 같고(둘 다 .wrap 안), 안쪽에만 숨 쉴 자리를 둔다. */ /* 검색창 안의 입력칸·칩은 라운딩 없이 각지게 (2026-08-29 사용자 지시) — 사이트 공통 '검색창 라운딩 금지' 규칙. 위 메뉴 카드만 예외로 둥글다. */ .sp-filter .ob-input, .sp-filter .ob-chips .chip, .sp-filter .chip-go{border-radius:0} .sp-filter::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:#D95019;clip-path:polygon(100% 33.3%, 100% 100%, 66.7% 100%)} .sp-filter > *{position:relative;z-index:1} .sp-fl{margin:14px 0 6px;font-size:12px;font-weight:700;color:rgba(255,255,255,.88);letter-spacing:-.01em} .sp-filter > .sp-fl:first-child{margin-top:0} /* 지역 세 칸 — 폰은 세로로 쌓고, PC 는 한 줄 (2026-08-29 사용자 지시) */ .sp-region{display:grid;grid-template-columns:minmax(0,1fr);gap:7px} @media(min-width:760px){.sp-region{grid-template-columns:repeat(3,minmax(0,1fr))}} /* '우리 아기는?' 두 칸도 PC 에서 한 줄 (2026-08-29 사용자 지시). ⚠ 진료과목 칸은 병원을 골랐을 때만 나온다 — 숨어 있을 때 빈 칸이 남지 않게 flex 로 둔다. */ .sp-filter .ob-selects{display:flex;gap:7px;flex-wrap:wrap} .sp-filter .ob-selects > select{flex:1 1 100%;min-width:0} @media(min-width:760px){.sp-filter .ob-selects > select{flex:1 1 0}} .sp-filter .ob-selects > select[hidden]{display:none} /* 검색 버튼 — 흰 바탕에 주황 글씨. 옆 드롭다운과 같은 높이로 선다 */ .sp-go{flex:none;padding:0 26px;height:54px;border:0;cursor:pointer; /* .ob-input 과 같은 높이 */ background:#fff;color:#D8471B;font-family:inherit; font-size:15px;font-weight:800;letter-spacing:-.03em} @media(hover:hover){.sp-go:hover{background:#FFF1EC}} /* 분류 드롭다운 + 계산기 링크를 한 줄에. 좁으면 계산기가 아래로 내려간다 */ .sp-cat-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px} .sp-cat-row #spCat{flex:1;min-width:150px} /* 주황 바탕 위 칩 — 안 고른 것은 흰 테두리, 고른 것은 흰 바탕에 주황 글씨 */ .sp-filter .ob-chips .chip{background:transparent;border-color:rgba(255,255,255,.55);color:#fff} .sp-filter .ob-chips .chip.selected{background:#fff;border-color:#fff;color:#D8471B} .sp-filter .chip-go{background:#fff;border-color:#fff;color:#D8471B} /* 자료 출처 — 검색창 오른쪽 아래 */ .sp-src{margin:14px 0 0;text-align:right;font-size:11px;line-height:1.5; color:rgba(255,255,255,.78);letter-spacing:-.02em} /* 지원 페이지 — 가입을 권하는 줄 (support.php, 2026-08-29 사용자 지시). ⚠ 상자(배경·테두리) 없이 위 안내문(.ob-lead)과 같은 결로 둔다 — 사용자 확정(2026-08-29). 처음엔 오렌지 상자로 강조했는데, 안내문 바로 아래에 상자가 또 오니 화면이 시끄러웠다. 마지막 줄만 오렌지로 눌러 준다. */ .sp-join-lead{margin-top:10px;font-size:15px;line-height:23px;color:var(--text-2)} .sp-join-lead b{color:#D8471B;font-weight:800} .sp-join-lead[hidden]{display:none} /* 오늘의 기록 100번째 경품 줄 (2026-08-29). 포인트 안내 바로 밑에 붙는다 — 둘 다 '남기면 뭐가 좋은지'를 말하는 줄이라 붙여 둔다. ⚠ 라운딩 금지 (사이트 공통 규칙). 네모난 띠로 둔다. ⚠ 로고는 글줄 가운데에 맞춘다. baseline 에 두면 초록 상자가 글자보다 내려가 덜컹해 보인다. */ /* ⚠ 상자(배경·왼쪽 초록 줄·안쪽 여백)를 뺐다 (2026-08-29 사용자 지시). 맨 앞 🎁 만 남긴다 — 바로 위 포인트 안내와 같은 결의 한 줄이라, 상자를 두르면 다른 종류의 안내로 읽혔다. */ .lp-diary-gift{display:flex;align-items:center;flex-wrap:wrap;gap:5px; margin:6px 0 0; font-size:12.5px;font-weight:600;color:var(--text-2);letter-spacing:-.02em} .lp-diary-gift b{color:var(--text);font-weight:800} .lp-diary-gift img{display:block;height:17px;width:auto} /* ===== MY플래너 내 일정 (index.php + tools/schedule_api.php) ===== */ .lp-cal-add{padding:10px var(--card-px) 4px;border-top:1px solid var(--divider)} .lp-cal-add-btn{display:block;margin-left:auto;border:0;background:none;padding:6px 0;cursor:pointer; font-family:inherit;font-size:13.5px;font-weight:700;color:var(--coral-deep)} /* 소개 카드 CTA처럼 우하단에 */ /* 일정 / 날짜·시간 / 알림 희망일 — 항목마다 라벨을 세워 위에서 아래로 채운다 (2026-08-21) */ .lp-cal-add-form{display:grid;gap:12px;padding:6px 0 12px} .lp-cal-add-form input, .lp-cal-add-form select{height:40px;padding:0 12px;border:1px solid var(--border);border-radius:10px; background:#fff;font-family:inherit;font-size:13.5px;color:var(--text);box-sizing:border-box} .lp-cal-f{display:grid;gap:5px} .lp-cal-f > span:first-child{font-size:12.5px;font-weight:700;color:var(--text-2)} .lp-cal-f-row{display:flex;gap:8px} .lp-cal-f-row input[type=date]{flex:1;min-width:0} .lp-cal-f-row input[type=time]{flex:none;width:120px} .lp-cal-f > em{font-style:normal;font-size:11.5px;line-height:16px;color:var(--text-muted)} .lp-cal-add-form button{height:40px;padding:0 16px;border:0;border-radius:10px;cursor:pointer; background:var(--navy);color:#fff;font-family:inherit;font-size:13px;font-weight:700} .lp-cal-del{flex:none;width:26px;height:26px;margin-left:2px;border:0;border-radius:50%;cursor:pointer; background:none;color:var(--text-muted);font-size:17px;line-height:1} @media(hover:hover){.lp-cal-del:hover{background:var(--mist);color:var(--coral-deep)}} /* ===== 챗봇 첫 인사 — 라플 로봇이 화면 중앙에 크게 (inc/chatbot.php) ===== */ .lp-hello-ov{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center; background:rgba(12,20,38,.42);cursor:pointer; opacity:0;transition:opacity .3s ease} .lp-hello-ov.is-on{opacity:1} .lp-hello-card{display:flex;flex-direction:column;align-items:center;gap:6px; width:min(280px,78vw);padding:34px 26px 26px;border-radius:24px;background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center; transform:scale(.92);transition:transform .3s ease} .lp-hello-ov.is-on .lp-hello-card{transform:scale(1)} .lp-hello-card img{height:140px;width:auto;margin-bottom:10px} .lp-hello-card strong{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--text)} .lp-hello-card span{font-size:16px;font-weight:600;color:var(--coral)} .lp-hello-card em{margin-top:16px;font-style:normal;font-size:12px;color:var(--text-muted)} @media(prefers-reduced-motion:reduce){.lp-hello-ov,.lp-hello-ov .lp-hello-card{transition:none}} /* ===== 초대 장치들 (2026-08-21) ===== */ /* 하단 초대 탭의 +LP 배지 — 보상이 보여야 누른다 */ .lp-tab{position:relative} .lp-tab-lp{position:absolute;top:4px;right:50%;margin-right:-26px;padding:1px 5px;border-radius:8px; background:var(--coral);color:#fff;font-style:normal;font-size:9px;font-weight:800;line-height:1.5} /* 초대받고 온 방문자 웰컴 배너 (index.php ?ref=) */ .lp-ref-hello{margin-top:14px} .lp-ref-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px; background:#FFF4EC;border:1px solid #F8DCC8} .lp-ref-gift{flex:none;font-size:26px;line-height:1} .lp-ref-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .lp-ref-tx strong{font-size:14.5px;font-weight:800;letter-spacing:-.02em;color:var(--text)} .lp-ref-tx span{font-size:12.5px;color:var(--coral-deep);font-weight:600} .lp-ref-btn{flex:none;height:38px;display:inline-flex;align-items:center;padding:0 15px; border-radius:var(--r-pill);background:var(--coral);color:#fff;text-decoration:none; font-size:13px;font-weight:700;white-space:nowrap} /* 지원금 박스 하단 공유 줄 — 가치를 받은 직후가 추천의 순간 */ button.lp-fd-share{width:100%;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer} .lp-fd-share{color:var(--text);border-top:1px solid var(--divider)} .lp-fd-share .lp-fd-n em{font-style:normal;color:var(--coral-deep);font-weight:700;margin-left:6px;font-size:12px} @media(hover:hover){button.lp-fd-share:hover{background:var(--ivory)}} /* 가입 완료·포인트 화면의 초대 버튼 — 라플 브랜드 오렌지 (로고색 #F16531) */ .ob-invite-btn{background:#F16531;color:#fff;border:0;cursor:pointer} .ob-invite-btn span{font-weight:500;font-size:12px;opacity:.9;margin-left:6px} @media(hover:hover){.ob-invite-btn:hover{background:#D9541F}} /* ===== 태아보험 상담 배너 (inc/fetal_banner.php) — 임신 22주 미만 전용 [AD] ===== */ .lp-fetal{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px; padding:18px 20px} .lp-fetal-x{position:absolute;top:8px;right:10px;width:28px;height:28px;border:0;background:none; color:var(--text-muted);font-size:19px;line-height:1;cursor:pointer} .lp-fetal-main{display:flex;align-items:center;gap:12px} .lp-fetal-ad{flex:none;padding:3px 7px;border-radius:6px;background:var(--mist); font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--text-2)} .lp-fetal-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .lp-fetal-tx strong{font-size:15.5px;font-weight:800;letter-spacing:-.02em;color:var(--text)} .lp-fetal-tx span{font-size:12.5px;color:var(--coral-deep);font-weight:600} .lp-fetal-btn{flex:none;height:40px;padding:0 16px;border:0;border-radius:var(--r-pill);cursor:pointer; background:var(--coral);color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;white-space:nowrap} .lp-fetal-btn:disabled{opacity:.6} .lp-fetal-agree p{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--text)} .lp-fetal-row{display:flex;gap:10px;align-items:center} .lp-fetal-sub{border:0;background:none;color:var(--text-muted);font-family:inherit;font-size:13px; font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .lp-fetal-done{display:flex;align-items:center;gap:14px} .lp-fetal-done img{flex:none} .lp-fetal-done p{margin:0;font-size:14px;line-height:1.55;color:var(--text)} @media(max-width:560px){ .lp-fetal-main{flex-wrap:wrap} .lp-fetal-btn{width:100%} } /* 비회원 맛보기 — 둘째 줄부터 흐림 처리(내용은 보이되 읽히지 않게), 만질 수 없다 */ .lp-fd-r.is-veil{filter:blur(4px);opacity:.55;pointer-events:none;user-select:none} /* "가입하고 모두 보기" 줄 — 코랄로 행동 유도, 줄 전체가 눌린다 */ .lp-fd-gate{color:var(--coral);background:#FDF1EF} .lp-fd-gate .lp-fd-n{color:var(--coral);font-weight:700} .lp-fd-gate .lp-ic{flex:none;color:var(--coral)} @media(hover:hover){a.lp-fd-gate:hover{background:#FBE7E3}} .lp-fd-lock{display:flex;align-items:center;gap:9px;padding:var(--card-py) var(--card-px);font-size:13px;line-height:19px;color:var(--text-muted)} .lp-fd-lock .lp-ic{flex:none} .lp-fd.is-locked{background:var(--mist)} /* 결과 카드는 여섯 개 모두 한 줄씩 — 항목마다 내용이 길어 나란히 두면 읽기 어렵다 */ @media(min-width:760px){ .lp-find-row{grid-template-columns:78px minmax(0,1fr);align-items:center;gap:14px} } /* 회원가입 화면 안의 혜택 목록 */ .ob-bene{margin-top:30px;padding-top:26px;border-top:1px solid var(--divider)} .ob-bene-k{font-size:12.5px;font-weight:700;color:var(--coral-deep);margin-bottom:12px} .ob-bene .lp-find-form{padding:14px var(--card-px)} .ob-bene .lp-find-out{grid-template-columns:minmax(0,1fr)} .ob-bene .lp-find-out .lp-fd:first-child{grid-column:auto} @media(min-width:1000px){ .ob-bene .lp-find-form{padding:18px var(--card-px)} } /* 첫 화면 인사 — 사진·인사·날씨·시기를 한 덩어리로. 아래 흰색 서비스 카드들과 확실히 구분되도록 네이비 배경을 쓴다. "이건 당신만의 화면"이라는 신호를 색으로 먼저 주는 자리다. */ .lp-today-card{position:relative;overflow:hidden; display:flex;align-items:center;gap:16px;padding:var(--card-py-lg) var(--card-px);border-radius:var(--r-card); background:linear-gradient(135deg,var(--navy) 0%,#243050 100%);border:0;color:#fff; box-shadow:0 10px 28px rgba(23,33,58,.22)} /* 오른쪽 위에 코랄 빛을 깔았었는데, 그 자리에 등급·LP 뱃지가 앉으면서 주황 숫자가 빛에 섞여 탁해졌다. 빛을 아예 걷고 배경색만 남긴다. */ /* 예비맘(임신 준비·임신 중)은 핫핑크 배경 — 육아맘(아이가 있음)은 위 네이비 그대로 */ .lp-today-card.is-preg{background:linear-gradient(135deg,var(--hotpink) 0%,var(--hotpink-deep) 100%)} /* 사진은 이름·D-day·날씨 세 줄에 맞춘 높이로 */ .lp-today-av{position:relative;flex:none;width:84px;height:84px;border-radius:20px;overflow:hidden; background:rgba(255,255,255,.12);box-shadow:0 0 0 3px rgba(255,255,255,.16)} .lp-today-av img{width:100%;height:100%;object-fit:cover;display:block} .lp-today-tx{position:relative;flex:1;min-width:0} /* 닉네임은 왼쪽, 등급·LP는 카드 오른쪽 끝에 붙인다 */ .lp-today-hi{display:flex;align-items:center;justify-content:space-between;gap:10px; font-size:19px;line-height:27px;font-weight:800;letter-spacing:-.03em;color:#fff} .lp-today-dday{font-size:15.5px;line-height:23px;font-weight:700;color:#fff;margin-top:3px} .lp-today-ask{display:block;font-size:13px;line-height:19px;font-weight:600;color:rgba(255,255,255,.72);margin-top:3px} .lp-today-wx{font-size:12.5px;line-height:19px;color:rgba(255,255,255,.68);margin-top:6px} .lp-today-stage{font-size:13.5px;line-height:20px;font-weight:700;color:#FFB9AE;margin-top:6px} /* 폰에서는 사진(84px)을 빼고 나면 글 자리가 240px밖에 안 남아 네 줄이 다 눌린다. 사진 옆에는 두 줄(닉네임·D-day)만 두고, 날씨와 인사말은 아래로 내려 폭을 다 쓴다. .lp-today-tx 를 display:contents 로 풀어 그 안의 네 줄을 격자에 직접 앉힌다. 칸 사이 간격은 column-gap 대신 사진의 margin으로 준다 — 사진이 없는 분(hidden)에게 빈 칸과 간격이 남지 않게 하려는 것이다. */ @media(max-width:479px){ .lp-today-card{display:grid;grid-template-columns:auto minmax(0,1fr); column-gap:0;row-gap:2px;align-items:center} .lp-today-av{grid-column:1;grid-row:1 / span 2;margin-right:14px;width:72px;height:72px;border-radius:18px} .lp-today-tx{display:contents} .lp-today-hi{grid-column:2;grid-row:1} .lp-today-dday{grid-column:2;grid-row:2;margin-top:0} .lp-today-wx{grid-column:1 / -1;grid-row:3;margin-top:8px} .lp-today-stage{grid-column:1 / -1;grid-row:4;margin-top:4px} /* 등급·포인트는 오른쪽 끝으로 밀지 않고 닉네임 바로 옆에 붙인다 */ .lp-today-hi{justify-content:flex-start;gap:0} .lp-today-pt{margin-left:8px} } /* 닉네임 옆 등급·LP 뱃지 — 인사 카드는 사진 위라 반투명 흰 배경을 깐다. 눌러서 라플포인트 화면으로 가므로 링크로 둔다. */ .lp-today-pt{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:3px 10px; border-radius:var(--r-pill);background:rgba(255,255,255,.16);color:#fff;text-decoration:none; font-size:11.5px;font-weight:700;line-height:17px;white-space:nowrap;vertical-align:middle} @media(hover:hover){.lp-today-pt:hover{background:rgba(255,255,255,.28);color:#fff}} .lp-today-pt{gap:5px} .lp-pt-tier{color:rgba(255,255,255,.86);margin-right:1px} /* 숫자만 주황 — 카드에서 제일 먼저 눈에 걸려야 하는 값이다. 단위(LP)는 흰색 그대로. */ .lp-pt-num{color:#FFA24B;font-weight:800;font-size:12.5px;letter-spacing:-.01em} .lp-pt-unit{color:#fff;margin-left:-3px} /* ===== 오늘의 기록 — 인사 카드 바로 밑, 혼자 쓰는 한 줄 ===== 카드 안이 아니라 밖(배경 위)에 서므로 자기 바탕을 갖는다. */ /* 은은한 풍경을 깔아 '조용히 적는 자리'라는 느낌을 준다. 사진을 배경으로 직접 쓰면 글자가 묻히므로, 흰 카드 위에 아주 옅게 얹고 내용은 그 위로 올린다(.lp-diary > * 의 position). */ .lp-diary{position:relative;overflow:hidden;margin-top:var(--sec-gap);background:var(--surface); border:1px solid var(--border);border-radius:var(--r-card);padding:var(--card-py) var(--card-px)} /* 세로로 긴 사진이라 가운데를 자르면 하늘만 남는다. 아래쪽(구름)이 보이도록 사진을 위로 밀어 올린다 — 값이 클수록 더 올라간다. */ .lp-diary::before{content:'';position:absolute;inset:0;pointer-events:none; background:url('/images/diary-bg.jpg') center 72%/cover no-repeat;opacity:.18; transition:opacity .3s ease} /* 오늘 날씨에 따라 배경을 바꾼다 — 적으러 들어온 자리가 오늘과 같은 색이 되게. data-wx 는 index.php 가 기상청·에어코리아 응답을 보고 붙인다. 투명도는 사진마다 다르게 — 어두운 사진(비·밤)은 낮추고, 흰 사진(눈)은 올려야 글자를 가리지 않으면서 비슷한 세기로 읽힌다. */ .lp-diary[data-wx="rain"]::before{ background-image:url('/images/diary-bg-rain.jpg');background-position:center 60%;opacity:.14} .lp-diary[data-wx="snow"]::before{ background-image:url('/images/diary-bg-snow.jpg');background-position:center 45%;opacity:.26} .lp-diary[data-wx="cloudy"]::before{ background-image:url('/images/diary-bg-cloudy.jpg');background-position:center;opacity:.20} .lp-diary[data-wx="dust"]::before{ background-image:url('/images/diary-bg-dust.jpg');background-position:center 55%;opacity:.22} .lp-diary[data-wx="night"]::before{ background-image:url('/images/diary-bg-night.jpg');background-position:center 40%;opacity:.20} /* 내용은 사진보다 위에. z-index를 빼면 나중에 그려지는 가상요소가 답장을 덮는다 (pointer-events:none은 클릭만 통과시킬 뿐 그리기는 그대로 덮는다). */ .lp-diary > *{position:relative;z-index:1} /* 제목 · 안내문 · 링크가 모두 한 줄에 선다. 좁으면 자연스럽게 접힌다. */ .lp-diary-h{display:flex;align-items:baseline;flex-wrap:wrap;row-gap:2px} .lp-diary-h h3{flex:none;font-size:15px;line-height:22px;font-weight:700;letter-spacing:-.02em;color:var(--text)} .lp-diary-sep{flex:none;font-style:normal;margin:0 7px;color:var(--divider)} .lp-diary-lead{font-size:13px;line-height:22px;color:var(--text-2)} .lp-diary-more{flex:none;font-size:12.5px;font-weight:600;color:var(--text-2);text-decoration:none} @media(hover:hover){.lp-diary-more:hover{color:var(--navy)}} .lp-diary-form{display:flex;gap:8px;margin-top:12px} .lp-diary-in{flex:1;min-width:0;height:42px;padding:0 14px;border:1px solid var(--border); border-radius:var(--r-pill);background:#fff;font-size:14px;color:var(--text);font-family:inherit} .lp-diary-in::placeholder{color:var(--text-muted)} .lp-diary-in:focus{outline:none;border-color:var(--coral);background:var(--surface)} .lp-diary-btn{flex:none;height:42px;padding:0 18px;border:0;border-radius:var(--r-pill); background:var(--coral);color:#fff;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer} .lp-diary-btn:disabled{opacity:.6;cursor:default} /* 사진 한 컷 — 입력 줄 아래에 따로 선다. 입력창 안에 넣어 보니 폰(375px)에서 글칸이 반토막 났다. 줄을 나눠 글칸을 온전히 남긴다. 각지게 두는 이유는 새 UI에 라운딩을 넣지 않는다는 규칙 때문이다. */ .lp-diary-cam-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;margin-top:9px} .lp-diary-cam{flex:none;display:inline-flex;align-items:center;gap:7px;height:32px; padding:0 11px 0 8px;border:1px solid var(--border);background:#fff;cursor:pointer} .lp-diary-cam-i{font-size:14px;line-height:1} /* 고른 사진이 아이콘 자리에 그대로 들어앉는다 — 무엇을 올리는지 보이는 편이 낫다 */ .lp-diary-cam-th{width:22px;height:22px;object-fit:cover;display:block} .lp-diary-cam-tx{font-size:12.5px;line-height:16px;font-weight:600;color:var(--text-2);letter-spacing:-.01em} .lp-diary-cam-note{font-size:11.5px;line-height:17px;color:var(--text-muted)} /* 잘라낼 자리 고르개 (2026-08-30 사용자 지시) — 정사각이 아닌 사진에서만 뜬다. ⚠ 라운딩 없음. 새 UI 규칙이다. ⚠ 무대(.lp-crop-stage)는 사진을 통째로 보여주고, 남길 정사각만 밝게 남긴다. 바깥을 어둡게 하는 덮개를 따로 두지 않고 네모의 box-shadow 를 크게 퍼뜨렸다 — 덮개를 둘로 나누면 세로 사진·가로 사진마다 계산이 갈라진다. */ .lp-crop-ov{position:fixed;inset:0;z-index:420;background:rgba(15,19,25,.55); display:flex;align-items:center;justify-content:center;padding:20px} .lp-crop-ov[hidden]{display:none} .lp-crop-card{background:#fff;padding:16px 16px 14px;width:100%;max-width:340px; box-shadow:0 12px 40px rgba(0,0,0,.22)} .lp-crop-t{margin:0;font-size:15px;line-height:22px;font-weight:800;letter-spacing:-.02em;color:var(--text)} .lp-crop-s{margin:3px 0 12px;font-size:12px;line-height:18px;color:var(--text-muted)} .lp-crop-stage{position:relative;overflow:hidden;background:#14191D; margin:0 auto;touch-action:none;-webkit-user-select:none;user-select:none;line-height:0} .lp-crop-stage img{display:block;width:100%;height:auto;pointer-events:none} .lp-crop-box{position:absolute;left:0;top:0;box-sizing:border-box;border:2px solid #fff; box-shadow:0 0 0 9999px rgba(15,19,25,.6);cursor:grab} .lp-crop-box:active{cursor:grabbing} .lp-crop-btns{display:flex;gap:8px;margin-top:13px} .lp-crop-no,.lp-crop-ok{flex:1;height:40px;font-size:13.5px;font-weight:800;letter-spacing:-.02em; cursor:pointer;border:1px solid var(--border)} .lp-crop-no{background:#fff;color:var(--text-2)} .lp-crop-ok{background:var(--coral-deep);border-color:var(--coral-deep);color:#fff} .lp-crop-ok:active,.lp-crop-no:active{transform:scale(.98)} /* 이 자리가 무엇을 해 주는 곳인지 한 줄 (2026-08-30 사용자 지시) */ .lp-diary-pr{margin-top:10px;font-size:12.5px;line-height:19px;color:var(--text-2)} .lp-diary-pr b{font-weight:700;color:var(--text)} /* 남긴 뒤 — 사진 한 컷, 내가 쓴 줄, 짧은 답장 */ .lp-diary-done{margin-top:12px} /* 홈에는 사진을 걸지 않는다 (2026-08-30 사용자 지시) — 올린 사진은 프로필 사진으로 가고, 크게 보는 자리는 지난 기록이다. 그래서 여기는 한 줄만 남는다. (.lp-diary-shot / .lp-diary-photo 규칙은 함께 지웠다) */ .lp-diary-mine{font-size:14.5px;line-height:22px;font-weight:600;color:var(--text);letter-spacing:-.02em} /* 답장은 '라플'이 건네는 말이다 — 내 글은 왼쪽, 라플은 오른쪽에서 말풍선으로 온다 */ /* 이름표와 말풍선은 한 줄에 나란히, 오른쪽으로 붙는다 */ /* 말풍선과 라플 캐릭터가 한 줄로, 오른쪽에 붙는다. row-reverse라 마크업상 앞에 오는 캐릭터가 화면에서는 맨 오른쪽에 선다. */ .lp-diary-rp{display:flex;flex-direction:row-reverse;align-items:flex-end; justify-content:flex-start;gap:8px;margin-top:10px} /* 이름 글자 없이 캐릭터만 세운다 — 얼굴 하나로 누가 하는 말인지 읽힌다 */ .lp-diary-who{flex:none;display:block;line-height:0;font-style:normal} /* 가로로 넓은 3D 로봇이라 높이를 기준으로 맞춘다 */ .lp-diary-who img{width:auto;height:54px;display:block} .lp-diary-reply{position:relative;flex:0 1 auto;min-width:0;padding:10px 14px;background:#fff; box-shadow:0 1px 4px rgba(23,33,58,.10); border-radius:16px 16px 4px 16px;font-size:13px;line-height:20px;color:var(--text-2);white-space:pre-line} /* 오른쪽 아래로 뻗는 꼬리 — 말풍선처럼 보이게 한다 */ .lp-diary-reply::after{content:'';position:absolute;right:-5px;bottom:0;width:0;height:0; border-left:9px solid #fff;border-bottom:7px solid transparent} /* 라플이 감당할 자리가 아닌 글 — 응원 대신 상담 창구를 띄운다. 눈에 띄어야 한다. */ .lp-diary-reply.is-sos{background:var(--peach);color:var(--coral-deep);font-weight:600} .lp-diary-reply.is-sos::after{border-left-color:var(--peach)} /* 제목 줄 오른쪽 — '수정 ㅣ 지난 기록' */ .lp-diary-acts{flex:none;margin-left:auto;padding-left:12px;display:flex;align-items:baseline;white-space:nowrap} /* 폰에서는 한 줄에 다 못 들어가 세 줄로 깨지고, 구분자 'ㅣ'만 첫 줄 끝에 남아 어색했다. 제목과 링크를 첫 줄에 묶고 안내문을 통째로 아랫줄로 내려 두 줄로 맞춘다. */ @media(max-width:479px){ .lp-diary-sep{display:none} .lp-diary-acts{order:2;padding-left:10px} .lp-diary-lead{order:3;flex:0 0 100%;margin-top:3px} } .lp-diary-acts i{font-style:normal;margin:0 6px;color:var(--divider)} .lp-diary-edit{padding:0;border:0;background:none;font-family:inherit; font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer} @media(hover:hover){.lp-diary-edit:hover{color:var(--navy)}} /* 답하는 쪽이 AI라는 안내 — 입력할 때만 보이면 된다 */ .lp-diary-note{margin-top:8px;font-size:11.5px;line-height:17px;color:var(--text-muted)} .lp-diary-msg{margin-top:10px;font-size:12.5px;line-height:18px;color:var(--coral-deep)} /* MY 일정 — 오늘의 기록 카드 안, 가는 선 하나로 나눈 아랫칸 (2026-08-30 사용자 지시). 기록은 지나간 하루, 일정은 다가올 하루. 같은 카드에 두되 구역은 나눠 둔다. 각지게 두는 건 새 UI 라운딩 금지 규칙 때문이다. */ .lp-diary-sch{margin-top:14px;padding-top:12px;border-top:1px solid var(--divider)} .lp-diary-sch-h{display:flex;align-items:center;justify-content:space-between;gap:10px} .lp-diary-sch-t{font-size:12.5px;font-weight:700;color:var(--text-2);letter-spacing:-.01em} .lp-diary-sch-add{padding:5px 10px;border:1px solid var(--border);background:#fff; font-family:inherit;font-size:11.5px;font-weight:600;color:var(--text-2);cursor:pointer} @media(hover:hover){.lp-diary-sch-add:hover{border-color:var(--coral);color:var(--coral-deep)}} .lp-diary-sch-pr{margin-top:7px;font-size:12px;line-height:18px;color:var(--text-2)} .lp-diary-sch-pr b{font-weight:700;color:var(--coral-deep)} .lp-diary-sch-l{margin-top:9px;display:flex;flex-direction:column;gap:1px;list-style:none} .lp-diary-sch-i{display:flex;align-items:center;gap:9px;padding:7px 9px;background:#fff; border:1px solid var(--border)} .lp-diary-sch-i + .lp-diary-sch-i{border-top:0} .lp-diary-sch-w{flex:none;font-size:11.5px;font-weight:700;color:var(--coral-deep)} .lp-diary-sch-n{flex:1;min-width:0;font-size:13px;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lp-diary-sch-x{flex:none;width:22px;height:22px;padding:0;border:0;background:none; font-family:inherit;font-size:15px;line-height:1;color:var(--text-muted);cursor:pointer} @media(hover:hover){.lp-diary-sch-x:hover{color:var(--coral-deep)}} .lp-diary-sch-non{margin-top:9px;font-size:11.5px;line-height:17px;color:var(--text-muted)} .lp-diary-sch-f{margin-top:9px;display:flex;flex-direction:column;gap:7px} .lp-diary-sch-in,.lp-diary-sch-dt,.lp-diary-sch-tm{height:36px;padding:0 10px; border:1px solid var(--border);background:#fff;font-family:inherit;font-size:13px;color:var(--text)} .lp-diary-sch-in{width:100%} .lp-diary-sch-in:focus,.lp-diary-sch-dt:focus,.lp-diary-sch-tm:focus{outline:none;border-color:var(--coral)} /* 날짜와 시간이 한 줄, 등록은 그 아래 한 줄 전체. ⚠ 셋을 한 줄에 넣어 봤더니 폰에서 시간칸이 좁아 '오후 (' 까지만 보였다 — 한국어 시간 입력은 '오후 02:30' 이라 100px 아래로는 잘린다. */ .lp-diary-sch-when{display:flex;flex-wrap:wrap;gap:7px} .lp-diary-sch-dt{flex:1 1 150px;min-width:0} .lp-diary-sch-tm{flex:1 1 118px;min-width:0} .lp-diary-sch-save{flex:1 1 100%;height:36px;padding:0 14px;border:0;background:var(--coral); color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer} .lp-diary-sch-save:disabled{opacity:.6;cursor:default} .lp-diary-sch-msg{margin-top:8px;font-size:12px;line-height:18px;color:var(--coral-deep)} /* ===== 지난 기록 (diary.php) — 날짜 · 날씨 · 기록글을 가로로 훑어 읽는다 ===== */ .my-tabs{margin-top:10px} .dy-head{padding-block:26px 0} .dy-h1{margin-top:22px;font-size:clamp(22px,3.4vw,28px);letter-spacing:-.02em} .dy-lead{margin-top:7px;font-size:13.5px;line-height:20px;color:var(--text-2)} .dy-sec{padding-block:18px 40px} /* 검색 결과 중 '글이 아닌 것' (2026-08-30 사용자 지시) — 화면 바로가기·지원금 제도·자주 묻는 질문. ⚠ 각지게 둔다(새 UI 라운딩 금지 규칙). ⚠ 아래 글 목록과 생김새가 달라야 한다 — 같은 카드로 두면 '기사 열 편 중 하나'로 읽혀 정작 사람이 찾던 화면을 지나친다. 옅은 바탕에 줄로 쌓아 목록임을 먼저 알린다. */ .lp-sh{margin-top:14px;background:var(--ivory);border:1px solid var(--border)} .lp-sh-h{margin:0;padding:10px 14px 8px;font-size:11.5px;font-weight:800; letter-spacing:-.01em;color:var(--text-muted)} .lp-sh-l{list-style:none;margin:0;padding:0} .lp-sh-l li + li{border-top:1px solid var(--divider)} .lp-sh-l a{display:block;padding:11px 14px;text-decoration:none} @media(hover:hover){.lp-sh-l a:hover{background:#fff}} .lp-sh-l a:active{background:#fff} .lp-sh-t{display:block;font-size:14px;line-height:20px;font-weight:700; letter-spacing:-.02em;color:var(--text)} /* 분류 딱지 — 제목 뒤에 조용히. 무엇을 찾은 것인지(바로가기/지원금/질문) 한눈에 갈린다 */ .lp-sh-t em{font-style:normal;margin-left:7px;font-size:11px;font-weight:700; color:var(--coral-deep);opacity:.85} .lp-sh-d{display:block;margin-top:2px;font-size:12.5px;line-height:18px;color:var(--text-2)} /* 오늘의 기록 등록 — 안내 상자 아래 오른쪽 (2026-08-30 사용자 지시). ⚠ 채운 단추가 아니라 글자 링크다 (2026-08-30 사용자 지시: "눈에 너무 띄지 않게 텍스트로 링크 회색 80%"). 주황 단추로 두었더니 이 화면의 주인공인 기록 상자보다 먼저 눈에 들어왔다 — 여기는 지난 기록을 '읽는' 자리이고, 등록은 곁길이다. ⚠ 회색 80% — 본문(--text-2)에 opacity 로 한 겹 물린다. D-day(30%)보다는 진하고 기록글보다는 옅어서, 찾으면 보이되 먼저 붙들지 않는다. */ /* 큰 제목과 한 줄에 나란히 (2026-08-30 사용자 지시: "큰 타이틀 같은높이의 우측에"). ⚠ baseline 으로 맞춘다. center 로 두면 28px 제목 옆에서 12.5px 글자가 가운데 떠 보인다 — 글자끼리는 밑선을 맞춰야 같은 줄로 읽힌다. ⚠ 제목의 위 여백(margin-top)은 이 줄이 대신 갖는다. h1 에 남겨 두면 링크만 위로 붙는다. */ .dy-h1row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:22px} .dy-h1row .dy-h1{margin-top:0} .dy-write{flex:none} .dy-write{font-size:12.5px;line-height:18px;font-weight:600;letter-spacing:-.02em; color:var(--text-2);opacity:.8;text-decoration:none} @media(hover:hover){.dy-write:hover{opacity:1;text-decoration:underline}} /* 폰에서는 안내 상자와 첫 기록 사이를 좁힌다 (2026-08-30 사용자 지시: "미니앨범 밑으로 여백 줄여주세요"). 화면이 좁아 안내만 읽다가 끝나면 안 된다 — 첫 상자가 접힌 자리 아래로 밀려나 있으면 '기록이 없는 화면'처럼 보인다. */ @media(max-width:719px){ .dy-sec{padding-block:8px 32px} } /* 화면 설명 + 미니앨범 예고 — 두 줄을 한 상자로 묶는다 (2026-08-30 사용자 지시). 각지게 두는 건 새 UI 라운딩 금지 규칙 때문이다. ⚠ flex 를 걷어내고 그냥 문단 두 개로 쌓는다. flex 였을 때는 괄호 딱지가 독립된 칸이라 폰에서 자리가 모자라면 저 혼자 아랫줄로 떨어졌다. 문장 안 글자로 두면 같이 흐른다. ⚠ 왼쪽 주황 막대는 뺐다 (2026-08-30 사용자 지시). 이 상자는 '주의해서 읽을 것'이 아니라 화면을 설명하는 말이라, 세로 막대가 붙으면 경고문처럼 읽힌다. */ .dy-album{margin-top:14px;padding:11px 14px;background:var(--ivory); font-size:13px;line-height:20px;color:var(--text-2)} .dy-album p{margin:0} .dy-album p + p{margin-top:4px} .dy-album b{font-weight:700;color:var(--text)} /* 괄호 안은 통째로 움직인다 — 폰(375px)에서 자리가 모자라면 줄을 넘기더라도 '(포인트로 주문 ·' 에서 끊겨 '추후공지)' 만 아랫줄에 남는 일은 없어야 한다. */ .dy-album em{font-style:normal;font-size:12px;font-weight:600;color:var(--coral-deep); white-space:nowrap} /* 눈썹 라벨(▍MY 등)은 .ob-eyebrow 공통 규칙 하나로 — 아래 .ob 구역 참고 */ /* 포인트 페이지 머리글 — 제목과 이벤트 소개 사이 숨 쉴 간격 */ .pt-hero-h1{margin-top:26px} .pt-hero-lead{margin-top:12px;font-size:14px;line-height:1.85} /* 하루가 상자 하나 (2026-08-30 사용자 지시: "날짜별로, 하나씩 구분되도록 박스를"). 목록은 상자를 쌓아 두는 자리일 뿐이라 자기 테두리를 갖지 않는다 — 예전에는 여기가 표 한 장이었고 하루는 그 안의 줄이었다. 그때는 사진이 붙은 날과 안 붙은 날이 한 덩어리로 흘러 어디까지가 하루인지 눈으로 끊기지 않았다. ⚠ overflow 는 열어 둔다. 폰에서 사진이 상자 밖(화면 끝)까지 나가야 한다. */ .dy-tb{display:flex;flex-direction:column;gap:12px} /* 날짜·날씨는 폭을 고정하고 글이 남는 자리를 다 쓴다 */ /* PC 는 네 칸이다: 사진 · 날짜 · 날씨 · 기록글. ⚠ 사진이 없는 날도 같은 네 칸을 쓴다 (2026-08-30 사용자 지시: "pc버전에서 날짜 온도등은 동일하게 같은 위치에 사진없을때와같이"). 사진 칸만 비워 두면 날짜·날씨·기록글이 상자마다 같은 x 에 선다 — 칸 수를 줄이면 사진 있는 날과 없는 날이 서로 어긋나 세로줄이 톱니처럼 보인다. ⚠ 그래서 칸 번호를 아이마다 못 박는다. 자동 배치에 맡기면 사진이 없는 줄에서 날짜가 사진 자리(1번 칸)로 올라와 버린다. */ .dy-r{display:grid;grid-template-columns:120px 132px 148px minmax(0,1fr);gap:16px; /* 네 변의 여백을 같게 (2026-08-30 사용자 지시: "사진이랑 테두리 좌우 상하 간격 동일하게"). 예전에는 위아래 15px · 좌우 18px 이라 사진이 위쪽으로 치우쳐 보였다. */ padding:var(--card-px);align-items:start; /* 상자 — 각지게 둔다(새 UI 라운딩 금지 규칙) */ background:var(--surface);border:1px solid var(--border)} .dy-ph{grid-column:1} .dy-d{grid-column:2} .dy-wx{grid-column:3} .dy-tx{grid-column:4} /* 상자 맨 아랫줄 — 왼쪽 D-day, 오른쪽 수정 단추 (2026-08-30 사용자 지시: "수정도 D-32 같은 높이에"). ⚠ 자기 줄을 통째로 쓴다(1 / -1). 그래야 칸이 몇 개든 상자의 아래 모서리에 걸린다. ⚠ 세로 가운데로 맞춘다 — D-day 는 12px, 단추는 28px 라 위쪽 정렬하면 숫자가 떠 보인다. */ .dy-foot{grid-column:1 / -1;display:flex;align-items:center;gap:10px;margin-top:8px} /* 그날의 D-day (2026-08-30 사용자 지시: "좌하단에 회색으로 D-24"). ⚠ 흐리게(30%) 둔다. 사진과 기록글이 주인공이고 이것은 곁에 적어 둔 표시다 — 또렷하면 날짜 줄과 경쟁해 무엇을 먼저 읽어야 할지 흐려진다. */ .dy-dd{font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--text);opacity:.3} /* 사진 없는 날의 상자도 키를 갖는다 (2026-08-30 사용자 지시: "세로 사이즈 좀더 늘려서"). 사진 있는 날은 사진 높이가 상자를 세워 주는데, 없는 날은 한 줄짜리 글 하나라 납작한 띠가 되어 사이에 끼면 하루가 아니라 구분선처럼 보였다. ⚠ 최소 높이만 준다. 글이 길면 그만큼 늘어난다. ⚠ 남는 자리가 아래에만 쌓이면 글이 위로 붙어 보인다 — 이 상자만 가운데로 맞춘다. */ .dy-r:not(.is-ph){min-height:110px;align-items:center} .dy-d{font-size:13.5px;font-weight:700;color:var(--navy);line-height:20px} .dy-d em{font-style:normal;font-weight:600;color:var(--text-muted);margin-left:4px} /* 남긴 시각 — 날짜 아래 한 단계 조용하게 */ .dy-t{display:block;font-style:normal;font-size:11.5px;font-weight:600; color:var(--text-muted);line-height:16px;margin-top:2px} .dy-wx{display:flex;flex-direction:column;gap:2px} .dy-wx-t{font-size:13px;font-weight:600;color:var(--text-2);line-height:19px} .dy-wx-s{font-size:11.5px;color:var(--text-muted);line-height:16px} .dy-wx-none{color:var(--text-muted)} .dy-tx{display:flex;flex-direction:column;gap:8px;min-width:0} /* 사진이 있는 날 — PC 는 사진이 맨 왼쪽 칸으로 들어온다 (2026-08-30 사용자 지시: "pc버전에서는 지금 형식에서 사진만 좌측에 보여주는걸로 너무 크지 않게"). 줄 모양(날짜 · 날씨 · 기록글)은 그대로 두고 그 앞에 칸 하나가 늘어날 뿐이다 — 한 줄에 한 장씩 크게 걸었더니 하루를 보려고 화면을 몇 번씩 내려야 했다. ⚠ 사진 없는 날은 이 칸이 없다. 마크업이 아니라 열 개수로 갈라 놓는다 (사용자 지시: "사진이 없을 경우 기존과 동일하게"). ⚠ 폰은 이 규칙을 쓰지 않는다 — 아래 @media 에서 사진 한 장 / 날짜·날씨 / 기록글로 위아래로 쌓는다. 좁은 화면에서 네 칸은 어차피 안 선다. */ /* 그날의 사진 — 정사각으로 저장되므로 자리도 정사각으로 잡는다. 높이가 줄마다 같아야 목록을 훑을 때 눈이 편하게 흐른다. */ .dy-ph{display:block;width:120px;height:120px; max-width:100%;overflow:hidden;line-height:0; border:1px solid var(--border);background:#fff} .dy-ph img{display:block;width:100%;height:100%;object-fit:cover} /* 사진은 누르는 것이 아니다 (2026-08-30 사용자 지시: "사진클릭해도 반응없게"). 눌러도 아무 일이 없으므로 눌린 표시(주황 테두리·눌림)도 두지 않는다 — 반응이 보이면 무언가 열릴 것처럼 읽혀서, 안 열리는 게 고장으로 느껴진다. ⚠ 예전에는 원본을 새 탭으로 열었고(돌아올 길이 없어 사용자가 지적), 그다음에는 화면 위에 크게 덮어 보여주었다. 둘 다 지웠다. 사진은 그냥 보이기만 한다. */ /* 폰에서는 하루가 카드 한 장이다 — 사진 한 장 / '날짜 · 날씨' 한 줄 / 기록글 한 줄 (2026-08-30 사용자 지시). 위에서 아래로 읽는 SNS 게시물 모양이다. ⚠ 사진이 있는 날만 이렇게 쌓는다. 없는 날은 예전처럼 날짜·날씨·기록글이 가로로 선다 — 사진 없이 세로로 쌓으면 한 줄짜리 글 하나가 괜히 세 줄을 차지한다. ⚠ flex 가 아니라 block 이다. flex 로 두고 사진에 flex-basis:100% 를 주면 줄은 나뉘지만 사진이 칸 너비만큼 늘어나 정사각이 깨진다. block 이면 사진은 제 크기대로 한 줄을 쓰고, 날짜·날씨만 inline 으로 나란히 선다. */ @media(max-width:719px){ /* ⚠ block 이 아니라 두 칸 그리드다 (2026-08-30 사용자 지시: "날씨만 우측정렬"). block 으로 쌓으면 날씨가 날짜 바로 뒤에 붙어 줄 가운데쯤에서 끝난다. 사진·기록글·아랫줄은 두 칸을 다 쓰고, 가운데 한 줄만 '날짜 왼쪽 · 날씨 오른쪽'으로 갈린다 — 사진 없는 날(아래 .dy-r 규칙)과 같은 짜임이라 두 상자가 나란히 서도 줄이 맞는다. */ .dy-r.is-ph{display:grid;grid-template-columns:auto auto;gap:6px 10px} /* 사진은 상자 한가운데 (2026-08-30 사용자 지시: "사진 박스 모바일 중앙으로"). 예전에는 화면 끝까지 늘렸는데, 하루를 상자로 나눈 뒤로는 상자 테두리 안에 들어와야 '이 사진은 이 날의 것'으로 읽힌다. 좌우 여백이 같아야 가운데로 보인다. */ .dy-r.is-ph .dy-ph{grid-column:1 / -1;display:block;width:100%;height:auto;aspect-ratio:1/1;margin:0 auto 2px} .dy-r.is-ph .dy-d{grid-column:1;justify-self:start} .dy-r.is-ph .dy-t{display:inline;margin-left:6px} .dy-r.is-ph .dy-tx{grid-column:1 / -1} } /* 폰에서 화면 끝까지 늘리던 규칙은 뺐다 (2026-08-30 사용자 지시: "사진 박스 모바일 중앙으로"). 하루를 상자로 나누기 전에는 사진이 끝까지 가는 게 인스타 피드처럼 시원했는데, 상자가 생긴 지금은 사진만 상자를 뚫고 나가면 어느 날의 사진인지 경계가 흐려진다. 상자는 .wrap 안에 네 변을 다 두르고, 사진은 그 안에서 좌우 여백을 같게 두어 가운데 선다. */ .dy-mine{font-size:14.5px;line-height:22px;font-weight:600;color:var(--text);letter-spacing:-.02em} /* ── 오늘 기록 고쳐 쓰기 (2026-08-30 사용자 지시) ──────────────────────── 고른 상자에 주황 테두리, 나머지 상자는 자리가 바뀐 만큼 부드럽게 따라 올라온다 (사용자 지시: "선택하면 주황테두리 · 나머지 박스들은 모션으로 위로 따라올라오는 모션"). ⚠ 높이가 변하는 것은 고른 상자 하나뿐이다. 목록이 flex 세로 쌓기라 아래 상자들은 그만큼 밀리고 당겨지는데, 그 이동을 브라우저가 한 프레임에 끝내면 툭 끊긴다. transform 을 쓰지 않고 자리 이동에 애니메이션을 거는 방법이 이것이다 — 고정(fixed) 요소가 섞인 화면에서 transform 은 쓰지 않는다는 규칙도 지킨다. */ .dy-tb{transition:none} .dy-r{transition:border-color .16s ease, box-shadow .2s ease} @media(prefers-reduced-motion:no-preference){ .dy-tb{will-change:contents} .dy-r{transition:border-color .16s ease, box-shadow .2s ease, margin-top .26s ease} } /* 고른 상자 — 주황 테두리. 색은 라플포인트 총점·사진 누름과 같은 #F0862F 다 */ .dy-r.is-on{border-color:#F0862F;box-shadow:0 0 0 2px rgba(240,134,47,.18)} /* 폰에서 상자가 올라오며 나타난다 (2026-08-30 사용자 지시: "카드에 모션줘서 움직이도록"). 화면에 들어오는 순간 아래에서 살짝 올라오며 짙어진다 — 하루씩 넘겨 보는 느낌이 난다. ⚠ 'is-anim' 은 스크립트가 붙인다. 스크립트가 안 돌면 이 규칙이 아예 안 걸려 상자가 투명한 채로 남는 일이 없다 — 애니메이션 때문에 내용이 사라지면 안 된다. ⚠ transform 은 이 상자에만 건다. 하단 탭바 같은 fixed 요소의 조상에는 절대 넣지 않는다 (넣으면 fixed 기준이 바뀌어 탭바가 떠다닌다 — 이미 겪은 문제다). ⚠ 누를 때 살짝 눌리는 것도 같이 — 손끝에 반응이 있어야 눌린 줄 안다. ⚠ 움직임 줄이기를 켠 사람에게는 걸지 않는다. */ @media(max-width:719px) and (prefers-reduced-motion:no-preference){ .dy-tb.is-anim .dy-r{opacity:0;transform:translateY(16px); transition:opacity .44s ease, transform .44s cubic-bezier(.22,.61,.36,1), border-color .16s ease, box-shadow .2s ease} .dy-tb.is-anim .dy-r.is-in{opacity:1;transform:none} /* 편집 중인 상자는 눌림 효과를 빼 둔다 — 글칸을 누를 때마다 상자가 들썩인다 */ .dy-tb.is-anim .dy-r.is-in:not(.is-on):active{transform:scale(.985)} } /* 수정 단추 — 내 오늘 기록에만 붙는다. 맨 아랫줄 오른쪽 끝, D-day 와 같은 높이에 (2026-08-30 사용자 지시: "수정버튼은 우측 정렬" → "수정도 D-32 같은 높이에"). ⚠ margin-left:auto 로 민다. 그래야 D-day 가 없는 회원(예정일 미등록)에게도 단추가 왼쪽으로 끌려오지 않고 오른쪽 끝에 그대로 선다 — justify-content:space-between 으로 했다면 그 경우에 왼쪽에 붙는다. */ .dy-edit{margin-left:auto;flex:none;padding:5px 11px;font-size:12px;font-weight:700; color:var(--text-2);background:#fff;border:1px solid var(--border);cursor:pointer} .dy-edit:hover{border-color:#F0862F;color:#D8471B} /* 그날의 일정 (2026-08-30 사용자 지시) — 기록글 아래 작은 상자. 기록('무슨 일이 있었나')과 일정('무엇을 하기로 했었나')은 성격이 달라서, 같은 하루 안에 있더라도 글줄이 이어지면 안 된다. 옅은 바탕으로 한 겹 접어 둔다. */ .dy-pl{display:flex;flex-direction:column;gap:3px;margin-top:9px;padding:9px 11px; background:var(--ivory);border:1px solid var(--divider)} .dy-pl-h{font-size:11.5px;font-weight:700;color:var(--text-muted);letter-spacing:-.01em} .dy-pl-i{font-size:13px;line-height:19px;font-weight:600;color:var(--text-2)} .dy-pl-i i{font-style:normal;font-weight:700;color:#D8471B;margin-right:6px} /* 사진 크게 보기(.dy-lb)는 지웠다 (2026-08-30 사용자 지시: "사진클릭해도 반응없게"). 사진은 상자 안에서 보이는 것으로 끝이다. */ /* 아직 안 쓴 오늘 — 자리만 잡아 두고 '남기기'로 부른다 (2026-08-30 사용자 지시) */ .dy-new-lead{font-weight:500;color:var(--text-muted)} .dy-r.is-new .dy-edit{color:#fff;background:#F0862F;border-color:#F0862F} .dy-r.is-new .dy-edit:hover{color:#fff} .dy-ed{display:flex;flex-direction:column;gap:8px;margin-top:2px} .dy-ed-in{width:100%;height:40px;padding:0 12px;box-sizing:border-box; font-size:14px;font-weight:600;color:var(--text); background:#fff;border:1px solid var(--border)} .dy-ed-in:focus{outline:none;border-color:#F0862F} .dy-ed-cam{align-self:flex-start;padding:6px 11px;font-size:12px;font-weight:600; color:var(--text-2);background:#fff;border:1px solid var(--border);cursor:pointer} .dy-ed-msg{margin:0;font-size:12px;font-weight:600;color:var(--coral-deep)} .dy-ed-btns{display:flex;gap:8px} .dy-ed-no,.dy-ed-ok{flex:1;height:38px;font-size:13px;font-weight:800;letter-spacing:-.02em; cursor:pointer;border:1px solid var(--border)} .dy-ed-no{background:#fff;color:var(--text-2)} .dy-ed-ok{background:#F0862F;border-color:#F0862F;color:#fff} .dy-ed-ok[disabled]{opacity:.6;cursor:default} /* 라플 답장(.dy-rp/.dy-reply)은 이 목록에서 뺐다 (2026-08-30 사용자 지시) — 답장은 남기던 그 순간에 건네는 말이라 홈에만 남는다. 규칙도 같이 지웠다. */ .dy-msg{padding:34px 20px;text-align:center;font-size:13.5px;line-height:21px;color:var(--text-2)} /* ===== 라플포인트 (point.php) ===== */ .pt-sec{padding-block:20px 44px} .pt-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:22px 22px 20px} .pt-now{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} .pt-tier{font-size:14px;font-weight:700;color:var(--coral-deep);background:var(--peach); border-radius:var(--r-pill);padding:4px 13px} /* 내 점수 — 이 화면에서 제일 먼저 보여야 하는 숫자라 주황으로 세운다 */ .pt-total{font-size:clamp(28px,5vw,38px);font-weight:800;letter-spacing:-.03em;color:#F0862F;line-height:1.1} .pt-total em{font-style:normal;font-size:.45em;font-weight:700;color:var(--text-2);margin-left:3px} /* 다음 등급까지 얼마나 왔는지 — 막대도 숫자와 같은 주황 계열로 이어준다 */ .pt-bar{margin-top:16px;height:8px;border-radius:99px;background:var(--divider);overflow:hidden} .pt-bar span{display:block;height:100%;border-radius:99px;width:0;transition:width .5s ease; background:linear-gradient(90deg,#FFB067,#F0862F)} .pt-next{margin-top:10px;font-size:13px;line-height:20px;color:var(--text-2)} .pt-next strong{color:var(--coral-deep)} .pt-streak{margin-top:6px;font-size:13px;font-weight:700;color:var(--navy)} /* 섹션 사이 세로 리듬 — 제목 위 44px로 통일해 덩어리 사이가 또렷이 나뉜다 (2026-08-22) */ .pt-h2{margin-top:44px;font-size:17px;letter-spacing:-.02em} #ptEventWrap{margin-top:28px} #ptEventWrap .pt-h2{margin-top:0} .pt-note{margin-top:12px;font-size:12.5px;line-height:19px;color:var(--text-muted)} .pt-note strong{color:var(--text-2)} /* 등급표 */ .pt-tiers{display:grid;gap:10px;margin-top:14px;grid-template-columns:repeat(2,minmax(0,1fr))} @media(min-width:640px){.pt-tiers{grid-template-columns:repeat(4,minmax(0,1fr))}} .pt-tier-i{display:flex;flex-direction:column;align-items:center;gap:3px;padding:15px 10px; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)} .pt-tier-i.on{border-color:var(--coral);background:var(--peach)} .pt-tier-e{font-size:22px;line-height:1} .pt-tier-i strong{font-size:13.5px;font-weight:700;color:var(--text)} .pt-tier-i em{font-style:normal;font-size:11.5px;color:var(--text-muted)} /* 적립 방법 */ .pt-rules{margin-top:14px;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-card);overflow:hidden} .pt-rule{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 17px} .pt-rule + .pt-rule{border-top:1px solid var(--divider)} /* 이름이 남는 폭을 다 차지해야 점수·버튼이 오른쪽에 가지런히 붙는다 (PC에서 점수가 가운데 뜨던 문제) */ .pt-rule-n{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.02em} /* 조건은 줄을 바꿔 적는다 — 무엇을 해야 받는지가 이름보다 중요하다 */ .pt-rule-n em{display:block;font-style:normal;font-size:12px;font-weight:500; color:var(--text-muted);margin-top:3px;line-height:17px} .pt-rule-p{flex:none;font-size:14px;font-weight:800;color:var(--coral-deep);white-space:nowrap} /* 줄 끝 실행 버튼 — 안내에서 바로 그 행동으로 (켜기·기록하기·초대하기…) */ .pt-rule-go{flex:none;display:inline-flex;align-items:center;height:30px;padding:0 12px; border:1px solid var(--coral);border-radius:var(--r-pill);background:#fff;color:var(--coral-deep); font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap} @media(hover:hover){.pt-rule-go:hover{background:var(--coral);color:#fff}} .pt-rule-p i{font-style:normal;font-weight:700;color:var(--text-muted);font-size:12px} /* 이벤트 */ .pt-events{display:flex;flex-direction:column;gap:10px;margin-top:14px} .pt-ev{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)} /* 가입 첫 화면 — 전체 배경은 사이트 기본 베이지 그대로 (2026-08-22 확정). 핑크 하트는 소개 카드(.ob-intro-main)에만 — 홈 가입 배너와 같은 카드. */ /* 첫 화면(2026-08-22 확정): 핑크 소개 카드는 본문 폭 그대로(확장 없음), 전체 배경은 베이지. */ .ob-step[data-step="0"]{padding:14px 0 34px;background:none} /* 소개 카드 — 타이틀부터 해피박스·카톡 버튼까지 한 장. 홈 배너(promo-bg-hearts)와 동일 톤. 테두리·라운딩 없음. */ .ob-step[data-step="0"] .ob-intro-main{ background:#FFEDF0 url('/images/promo-bg-hearts.jpg?v=3') center/cover no-repeat; border:0;text-align:center; padding:26px 18px 24px; border-radius:18px} /* 핑크 박스 라운딩 (2026-08-23 사용자 지정 — 예외) */ /* 카톡 버튼은 카드 안에서 가로로 최대한 길게 */ .ob-step[data-step="0"] .ob-sns{max-width:none;margin-inline:0} .ob-step[data-step="0"] .ob-sns-btn{width:100%} /* 폰: 하트는 하단 좌·우에 2~3개 + 상단 우측에 1~2개 (2026-08-23). 잘린 경계는 같은 배경색 페이드로 녹여 자연스럽게 이어지게 한다. */ @media(max-width:599px){ /* 핑크 소개 카드는 폰에서 화면 끝까지 (2026-08-26 사용자 지시). .wrap 의 좌우 여백(--pad)과 .ob 의 max-width:520px 를 한 번에 넘어야 해서 calc(50% - 50vw) 를 쓴다 — --pad 만 빼면 520px 상한이 걸리는 폭(480~599)에서 안 닿는다. ⚠ 꽉 채우면 라운딩은 뺀다. 화면 끝에 닿은 모서리가 둥글면 잘린 것처럼 보인다. (2026-08-23 에 준 18px 예외는 좌우 여백이 있던 시절의 것이다) */ .ob-step[data-step="0"] .ob-intro-main{ margin-inline:calc(50% - 50vw); width:100vw; border-radius:0; padding-inline:var(--pad)} .ob-step[data-step="0"] .ob-intro-main{ background: linear-gradient(0deg, #FFF1F1 12%, rgba(255,241,241,0) 65%) right top/36% 15% no-repeat, url('/images/promo-hearts-wide.jpg') right top/300px auto no-repeat, #FFF1F1} /* 하단 좌·우 하트 (2026-08-23). 배경 레이어로 넣으면 그림 전체(하트 5개)가 눌려 들어가 비율이 망가진다 — 작은 칸에 그림을 크게 깔아 필요한 부분만 보이게 잘라 쓴다. 위·안쪽 경계는 마스크로 녹인다. */ .ob-step[data-step="0"] .ob-intro-main{position:relative;overflow:hidden} .ob-step[data-step="0"] .ob-intro-main > *{position:relative;z-index:1} .ob-step[data-step="0"] .ob-intro-main::before, .ob-step[data-step="0"] .ob-intro-main::after{ content:"";position:absolute;z-index:0;pointer-events:none; bottom:0;width:112px;height:150px; background-image:url('/images/promo-hearts-wide.jpg'); background-repeat:no-repeat;background-size:560px auto; -webkit-mask-image:linear-gradient(0deg,#000 45%,transparent 100%); mask-image:linear-gradient(0deg,#000 45%,transparent 100%)} .ob-step[data-step="0"] .ob-intro-main::before{left:0;background-position:left bottom} .ob-step[data-step="0"] .ob-intro-main::after{right:0;background-position:right bottom} } /* 넓은 화면에서 버튼·안내가 카드 폭 전체로 늘어지지 않게 — 내용만 가운데 520px */ .ob-step[data-step="0"] .ob-sns, .ob-step[data-step="0"] .ob-note-c{max-width:520px;margin-inline:auto} /* 등장 애니메이션 첫 프레임이 위 틈처럼 보이던 문제 — 첫 화면은 미끄럼 없이 바로 */ .ob-step[data-step="0"].is-on{animation:none} /* 밝은 핑크 배경 — 겉에 놓이는 글자는 진하게 (흰 글씨 시절 규칙을 뒤집음, 2026-08-22) */ .ob-step[data-step="0"] .ob-gift-tx h1, .ob-step[data-step="0"] .ob-lead{color:var(--navy)} /* 타이틀 — 첫 줄('임신/출산/육아의 모든 고민 끝!')이 모바일에서도 반드시 한 줄에 들어가게 화면 폭에 맞춰 글자를 줄인다 (최대 29px, 2026-08-22) */ .ob-step[data-step="0"] .ob-gift-tx h1{font-size:min(29px, calc((100vw - 44px) / 15.4));line-height:1.32;white-space:nowrap} .ob-step[data-step="0"] .ob-gift-small{color:var(--text-2)} .ob-step[data-step="0"] .ob-gift-tx h1 strong, .ob-step[data-step="0"] .ob-lead strong, .ob-step[data-step="0"] .ob-gift-line strong{color:var(--coral-deep)} .ob-step[data-step="0"] .ob-gift-line{color:var(--text)} .ob-step[data-step="0"] .ob-note{color:var(--text-2)} .ob-step[data-step="0"] .ob-bene5 li{color:var(--text)} .ob-step[data-step="0"] .ob-hb-hook{color:var(--navy)} .ob-step[data-step="0"] .ob-hb-hook strong{color:var(--coral-deep)} /* 첫 방문 가입 배너(홈) — 파스텔 핑크 하트 배경(2026-08-22, 파란하늘→교체). 밝은 배경이라 글씨는 진하게 */ .lp-join-promo{margin-top:18px;border-radius:0;overflow:hidden;text-align:center; padding:26px 18px 22px;color:var(--text); background:#FFEDF0 url('/images/promo-bg-hearts.jpg?v=3') center/cover no-repeat} /* 폰: 하트는 왼쪽 아래에 몇 개만 (가입 카드와 동일 처리) */ @media(max-width:599px){ .lp-join-promo{ background: linear-gradient(180deg, #FDE9ED 6%, rgba(253,233,237,0) 52%) left bottom/40% 48% no-repeat, linear-gradient(270deg, #FDE9ED 4%, rgba(253,233,237,0) 42%) left bottom/40% 48% no-repeat, url('/images/promo-hearts-corner.jpg?v=2') left bottom/40% 48% no-repeat, #FDE9ED} } .lp-join-promo h2{font-size:23px;line-height:31px;font-weight:800;letter-spacing:-.03em;color:var(--navy)} .lp-join-promo h2 strong{color:var(--coral-deep)} .lp-jp-lead{margin-top:10px;font-size:14.5px;line-height:22px;color:var(--text-2)} .lp-jp-lead strong{color:var(--coral-deep);font-weight:800} /* 밝은 배경 위 오버라이드 — 흰 글씨 공용 규칙(.ob-bene5/.ob-hb-hook)을 진한 색으로 뒤집는다 */ .lp-join-promo .ob-bene5 li{color:var(--text)} .lp-join-promo .ob-hb-hook{color:var(--navy)} .lp-join-promo .ob-hb-hook strong{color:var(--coral-deep)} /* 혜택 리스트 — 줄은 왼쪽 정렬이 읽기 좋아, 덩어리만 가운데로 */ /* 공용 .ob-bene5{margin:22px 0 0}이 파일 뒤쪽에 있어 순서로는 진다 — 부모를 겹쳐 특정도로 이긴다 */ .lp-join-promo .lp-jp-bene{width:max-content;max-width:100%;margin:22px auto 0;text-align:left} /* 이벤트 배너와 아래 맞춤정보(결과 목록) 사이 — 14px 고정 */ .lp-join-promo{margin-bottom:14px} .lp-join-promo + .lp-find-out{margin-top:0} @media(max-width:479px){body.is-home .lp-join-promo{border-radius:0}} /* 플래너 박스 안 라벨 — 기본 눈썹(12px/바 15px)보다 조금 크게. 기본 .ob-eyebrow 가 파일 뒤쪽이라 순서로는 진다 — 클래스를 겹쳐 특정도로 이긴다 */ .ob-eyebrow.lp-plan-eyebrow{font-size:15px;line-height:21px;margin-bottom:8px} .ob-eyebrow.lp-plan-eyebrow::before{width:6px;height:19px} .lp-plan-intro-tx .lp-plan-eyebrow + h2{margin-top:0} /* 위 박스(인사·기록)와 세로 간격 14 고정 */ section#my-planner{margin-top:14px} /* 플래너 카드 하단 줄 — 좌 카카오 작은 버튼 / 우 일정 등록 */ .lp-plan-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px} .lp-plan-actions .lp-plan-intro-cta{margin:0} .lp-plan-kakao{display:inline-flex;align-items:center;gap:6px;padding:7px 11px; background:#FEE500;color:#1A1A1A;font-size:12px;font-weight:800;letter-spacing:-.02em; text-decoration:none;white-space:nowrap} /* 라운딩 금지 규칙: 각지게 */ .lp-plan-kakao[hidden]{display:none} /* 해피박스 안내 페이지 (happybox.php, 2026-08-23) */ .hb-page{padding-block:22px 40px;max-width:720px} /* 제목 줄 — 좌측 해피박스 사진이 제목 두 줄 높이를 채운다 (2026-08-23) */ .hb-hero{display:flex;align-items:center;gap:14px;margin-top:12px} .hb-hero-img{flex:none;width:auto;height:calc(clamp(24px,5vw,32px) * 1.35 * 2); /* 제목 2줄 높이 */ filter:drop-shadow(0 4px 10px rgba(10,35,80,.14))} .hb-hero .hb-h1{margin-top:0;flex:1;min-width:0} .hb-h1{margin-top:12px;font-size:clamp(24px,5vw,32px);line-height:1.35;letter-spacing:-.03em;color:var(--navy)} .hb-h1 strong{color:var(--coral-deep)} .hb-lead{margin-top:12px;font-size:14.5px;line-height:22px;color:var(--text-2)} .hb-lead strong{color:var(--text);font-weight:800} .hb-cta{margin-top:18px} /* 소개 줄·혜택 목록 — 가입 페이지와 같은 조판. ⚠ .ob-bene5 li 는 어두운 배경용 흰 글씨라, 밝은 베이지 위에서는 반드시 되돌려야 한다 (특정도를 위해 .hb-page 를 겹쳐 쓴다 — 2026-08-23 흰 글씨로 안 보이던 문제) */ .hb-brand{margin-top:14px;color:var(--text-2)} .hb-brand strong{color:var(--coral-deep)} .hb-page .hb-bene{margin-top:16px} .hb-page .hb-bene li{color:var(--text)} /* 해피박스 페이지의 조회 박스 — 가입 페이지 첫 박스와 같은 모양(회색 카드 + 우상단 로고) */ /* 상세 이미지와 같이 좌우 여백 없이 꽉 차게 (2026-08-23). 안쪽 여백은 최소한만 — 닉네임·날씨 박스와 결과 목록이 폭을 다 쓰게 한다. */ .hb-find{position:relative;background:#F4F4F2;border:0;margin-top:20px; margin-inline:calc(var(--pad) * -1);width:calc(100% + var(--pad) * 2); padding:20px 0} /* 검색 폼·카톡 버튼은 화면 끝까지 (2026-08-23). 폼은 자기 안쪽 여백(18px)이 있어 글자가 안 붙는다. 맨 글자로 된 블록(제목·인사·결과 목록)에만 최소 여백을 남긴다. */ .hb-find .ob-bene-k, .hb-find .lp-find-wx, .hb-find .lp-find-out{padding-inline:12px} /* (하단 핑크 박스는 삭제 2026-08-23 — 상세 이미지와 말이 겹쳤다) */ /* 만족도 설문 박스 (inc/survey.php, 2026-08-23) — 라운딩 없음(사이트 규칙) */ .sv-box{background:#fff;border:1px solid var(--border);padding:0 0 18px} .sv-img{display:block;width:100%;height:auto} .sv-t{margin:16px 16px 0;font-size:20px;line-height:28px;font-weight:800;color:var(--navy);letter-spacing:-.03em} .sv-s{margin:6px 16px 0;font-size:13.5px;line-height:20px;color:var(--text-2)} .sv-form{margin:14px 16px 0} .sv-q{margin-top:16px} .sv-ql{margin:0 0 8px;font-size:14.5px;line-height:21px;font-weight:700;color:var(--text)} .sv-ql em{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px; margin-right:6px;background:#F16531;color:#fff;font-size:11px;font-weight:800;font-style:normal; vertical-align:1px} /* 별점 — 큼직하게, 누르면 오렌지로 찬다 */ .sv-stars{display:flex;align-items:center;gap:4px} .sv-star{border:0;background:none;padding:0 2px;font-size:30px;line-height:1;cursor:pointer; color:#DDD8D2;transition:color .12s} .sv-star.is-on{color:#F5A623} .sv-star-tx{margin-left:8px;font-size:13px;font-weight:700;color:var(--text-2)} /* 보기 — 고르면 오렌지 테두리 */ .sv-opts{display:flex;flex-wrap:wrap;gap:6px} .sv-opt{border:1px solid var(--border);background:#fff;color:var(--text); padding:8px 12px;font-size:13.5px;line-height:18px;cursor:pointer} .sv-opt.is-on{border-color:#F16531;background:#FFF3EE;color:#D8471B;font-weight:700} .sv-add{width:100%;border:1px solid var(--border);background:#fff;padding:10px 12px; font:inherit;font-size:14px;line-height:21px;color:var(--text);resize:vertical} .sv-add:focus{outline:none;border-color:#F16531} .sv-send{width:100%;margin-top:16px} .sv-err{margin:10px 0 0;font-size:13px;color:#D8471B} .sv-done{margin:18px 16px 0;font-size:14.5px;line-height:22px;font-weight:700;color:var(--navy)} @media(min-width:600px){ .sv-t{font-size:23px;line-height:32px} /* 넓은 화면에서 사진이 너무 커지지 않게 — 위쪽만 잘라 보여준다 */ .sv-img{max-height:280px;object-fit:cover;object-position:center 42%} } /* 상세 이미지는 좌우 여백 없이 꽉 차게 (2026-08-23) — .wrap 의 --pad 만큼 음수 여백으로 되민다 */ .hb-imgwrap{display:block;line-height:0;margin-top:20px; margin-inline:calc(var(--pad) * -1);width:calc(100% + var(--pad) * 2)} .hb-img{display:block;width:100%;height:auto} .hb-note{margin-top:14px;font-size:11.5px;line-height:1.8;color:var(--text-muted)} /* 닉네임 박스 안 맞춤정보 유도 (2026-08-23) — 등록하면 +1,000LP */ .lp-prof-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px; padding:14px 16px;background:#FFF4EC;border:1px solid #F8DCC8;text-decoration:none} .lp-prof-cta-tx{font-size:13.5px;line-height:20px;color:var(--text-2)} .lp-prof-cta-tx strong{color:var(--text);font-size:14.5px;font-weight:800} .lp-prof-cta-lp{flex:none;font-style:normal;font-size:15px;font-weight:800;color:var(--coral-deep)} /* 플래너 훅 — "아이 생일 하나만 알려주세요" (2026-08-22) */ .lp-plan-hook{margin-top:8px;font-size:14.5px;line-height:22px;color:var(--text-2)} .lp-plan-hook strong{color:var(--coral-deep);font-weight:800} /* 플래너 아래 가입 제안 — "카카오로 내 플래너 만들기" (이 박스는 라운딩 예외: 사용자 지정 2026-08-22) 배경은 약간 핑크톤 + 우측 여백에 AI 라플 로봇 (2026-08-23) */ .lp-plan-cta{background:#FFF0F3;border:1px solid #F8CBD4;padding:22px 18px;text-align:center; border-radius:18px;position:relative;overflow:hidden} .lp-plan-cta-robot{position:absolute;right:28px;bottom:-4px;height:112px;width:auto;pointer-events:none} @media(max-width:599px){.lp-plan-cta-robot{display:none}} /* 폰은 여백이 없어 글·버튼과 겹친다 */ /* 위 플래너 카드와 14px 간격 고정 */ #planJoinCta{margin-top:14px} .lp-plan-cta-t{margin:0 0 14px;font-size:18px;line-height:26px;font-weight:700;letter-spacing:-.02em;color:var(--text)} .lp-plan-cta-t strong{color:var(--coral-deep);font-weight:800} .lp-plan-cta .btn{max-width:420px;margin-inline:auto} /* 해피박스 훅 — 카톡 버튼 직전의 마지막 설득 한 줄. 카카오 노랑과 같은 계열로 시선을 버튼까지 끌고 간다 */ /* 해피박스 사진 — 훅 문구 바로 위에 작게 (모바일은 가운데 정렬을 따라간다) */ .ob-hb-img{display:inline-block;width:88px;height:auto;margin:14px 0 -4px; filter:drop-shadow(0 4px 10px rgba(10,35,80,.25))} .ob-hb-hook{margin:10px 0 0;font-size:15px;line-height:22px;font-weight:800;color:#fff;letter-spacing:-.01em; white-space:nowrap} /* 한 줄 고정 — 좁은 폰은 아래에서 글자를 줄여 맞춘다 */ .ob-hb-hook strong{color:#FEE500} @media(max-width:429px){.ob-hb-hook{font-size:13px}} @media(max-width:359px){.ob-hb-hook{font-size:11.5px}} /* 회원 혜택 — 카톡 버튼 바로 위. 어두운 별밤 사진 위라 흰 글씨 + 체크 표시 */ .ob-bene5{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px} .ob-bene5 li{font-size:14px;line-height:20px;font-weight:600;color:rgba(255,255,255,.94); display:flex;align-items:center;gap:8px} .ob-bene5 li::before{content:"✓";flex:none;width:18px;height:18px;border-radius:50%; background:#F16531;color:#fff;font-size:11px;font-weight:800; display:flex;align-items:center;justify-content:center} /* 미리보기(혜택 목록 + 닉네임·날씨 인사) — 어두운 사진 위라 흰 카드로 감싼다. 안 그러면 카드 밖 글자(인사말·안내)가 사진에 묻힌다. */ .ob-step[data-step="0"] .ob-bene{background:#fff;border:1px solid var(--border); border-radius:18px;padding:16px 14px} /* 폰: 미리보기 박스는 좌우 여백 없이 화면 끝까지 (풀블리드). margin 계산은 조상 패딩이 겹겹이라 어긋난다 — transform 으로 뷰포트 기준 정확히 중앙. */ @media(max-width:1024px){ .ob-step[data-step="0"] .ob-bene{width:100vw;position:relative;left:50%;transform:translateX(-50%); border-radius:0;border-left:0;border-right:0;padding-inline:12px} } /* 가입 미리보기의 닉네임·날씨 인사 — 좁은 칸이라 홈 크기 그대로면 줄이 지저분하게 꺾인다. 그림·글자를 한 단계씩 줄여 줄마다 한 줄로 떨어지게 한다. */ .ob-step[data-step="0"] .lp-find-wx{gap:10px;padding:12px 2px 4px} .ob-step[data-step="0"] .lp-find-avatar{width:56px} .ob-step[data-step="0"] .lp-find-wx-1{font-size:11.5px;line-height:16px;gap:3px 6px} .ob-step[data-step="0"] .lp-find-wx-2{font-size:15.5px;line-height:22px;margin-top:4px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ob-step[data-step="0"] .lp-find-said{font-size:12.5px;line-height:18px;margin-top:4px} /* (전체 배경 모션 삭제 2026-08-22 — 배경이 베이지로 돌아가 하트 두둥실은 이벤트 카드 쪽 분위기로만 남긴다) */ .ob-step[data-step="0"]{position:relative} /* 가입 화면 — "No.1 육아신문 베이비뉴스가 만든" 줄의 인라인 로고. ⚠ 이 줄은 반드시 한 줄 — 로고를 더 키우면 좁은 폰에서 줄이 넘친다. */ .ob-bn-logo{display:inline-block;height:21px;width:auto;vertical-align:-4px;margin:0 2px} /* ⚠ 전역 img{display:block} 이 로고를 제 줄로 밀어낸다 — inline-block 필수 */ /* 기사·콘텐츠 하단 가입 배너 (inc/event_banner.php) — 비회원 전용 */ /* 하트 일러스트 배경 (2026-08-22) — 원본 AI에서 아이들 없는 상단(하트·구름)만 잘라 썼다. 옅은 흰 막을 얹어 경품 사진·글씨가 또렷하게 보인다 */ .lp-ev-cta{padding:20px 18px;border-radius:0;border:1px solid #F8CBD4;text-align:center; background:linear-gradient(rgba(255,245,247,.42),rgba(255,240,243,.72)), url('/images/event-bg-hearts.jpg') center top/cover no-repeat} .lp-ev-cta-t{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--text)} .lp-ev-cta-t strong{color:var(--coral-deep)} .lp-ev-cta-d{margin:8px 0 14px;font-size:13px;line-height:1.7;color:var(--text-2)} .lp-ev-cta-d strong{color:var(--coral-deep)} /* 경품 사진 줄 — 5종이 한 줄에, 좁으면 가로 스크롤 (사진이 글보다 가입을 부른다) */ .lp-ev-cta-gifts{display:flex;justify-content:center;gap:12px;margin:14px 0; overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px} .lp-ev-cta-g{flex:none;margin:0;width:118px} /* '신세계상품권 10만원'이 한 줄에 들어가는 폭 */ .lp-ev-cta-g img{width:100px;height:100px;border-radius:14px;border:1px solid #F0DECF; object-fit:cover;background:#fff;display:block;margin-inline:auto} .lp-ev-cta-g figcaption{margin-top:6px;font-size:11.5px;line-height:1.45;font-weight:700; color:var(--text-2);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lp-ev-cta-g figcaption em{display:block;font-style:normal;font-weight:800;color:var(--coral-deep)} /* 폰: 5종이 스크롤 없이 한 줄에 다 보이게 — 카드가 남은 폭을 균등하게 나눈다 (2026-08-22) */ @media(max-width:479px){ .lp-ev-cta-gifts{gap:6px;overflow:visible;justify-content:space-between} .lp-ev-cta-g{flex:1 1 0;width:auto;min-width:0} .lp-ev-cta-g img{width:100%;height:auto;aspect-ratio:1/1;border-radius:10px} .lp-ev-cta-g figcaption{font-size:9.5px} } /* 가입 화면 이벤트 배너 (join.php) — 경품 사진까지, 곧 가입할 이유 */ .ob-event{margin:0 0 14px;padding:14px 16px;border-radius:14px;background:var(--ivory);border:1px solid var(--border); font-size:13px;line-height:1.7;color:var(--text);letter-spacing:-.01em} .ob-event strong{color:var(--coral-deep);font-weight:800} .ob-event-t{margin:0 0 10px;text-align:center;font-size:14px} /* 행 구조(2026-08-23): [사진] [이름 좌측] … [LP·인원 우측] — 행이 박스 폭을 꽉 쓴다 */ .ob-event-list{display:flex;flex-direction:column;gap:8px;width:100%} .ob-ev{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:#fff; border:1px solid var(--divider)} .ob-ev img{flex:none;width:84px;height:84px;border-radius:10px;object-fit:cover;border:1px solid var(--divider)} /* 46→64→84 (2026-08-23) */ /* (박스 크기는 통일 — 유모차는 사진 파일 자체를 여백 잘라 크게 보이게 함, 2026-08-23) */ .ob-ev-n{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px; font-size:13px;font-weight:700;color:var(--text);line-height:1.4} .ob-ev-n em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--coral-deep);white-space:nowrap;text-align:right} .ob-ev-note{margin:10px 0 0;font-size:11.5px;line-height:1.8;color:var(--text-2);text-align:left} /* 좌측 정렬 (2026-08-23) */ /* 경품 사진 — 사진이 있어야 임팩트 (오픈기념 BIG EVENT) */ .pt-ev-imgwrap{position:relative;flex:none} .pt-ev-img{display:block;width:56px;height:56px;border-radius:12px;border:1px solid var(--divider); object-fit:cover;background:#fff} .pt-ev-imgwrap.is-can .pt-ev-img{border-color:var(--coral)} /* 기준 LP 도달 — 사진 아래 걸치는 '응모가능' 리본 */ .pt-ev-won{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%); background:var(--coral);color:#fff;font-style:normal;font-size:9.5px;font-weight:800; padding:2px 7px;border-radius:99px;white-space:nowrap;box-shadow:0 2px 6px rgba(224,90,76,.38)} /* 이벤트 하단 안내 — 좌우 여백이 있는 상자로 (맨살 텍스트 금지) */ .pt-ev-note{margin:12px 0 0;padding:12px 16px;border-radius:12px;background:var(--mist); font-size:12.5px;line-height:1.9;color:var(--text-2)} .pt-ev-n{flex:1;min-width:0;font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.02em} .pt-ev-n a{color:inherit;text-decoration:underline;text-underline-offset:3px} .pt-ev-n em{display:block;font-style:normal;font-size:12px;font-weight:500;color:var(--text-muted);margin-top:2px} .pt-ev-ok{flex:none;font-size:12px;font-weight:700;color:#fff;background:var(--coral); border-radius:var(--r-pill);padding:5px 12px} .pt-ev-no{flex:none;font-size:12px;font-weight:600;color:var(--text-muted);background:var(--mist); border-radius:var(--r-pill);padding:5px 12px} /* 적립 내역 */ .pt-log{margin-top:14px;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-card);overflow:hidden} .pt-log-i{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 17px} .pt-log-i + .pt-log-i{border-top:1px solid var(--divider)} .pt-log-d{font-size:12.5px;color:var(--text-muted)} .pt-log-n{font-size:13.5px;font-weight:600;color:var(--text)} .pt-log-p{font-size:13.5px;font-weight:700;color:var(--coral-deep);white-space:nowrap} /* 좁은 화면에서는 세 칸을 세로로 접고, 날짜와 날씨는 한 줄에 나란히 둔다 */ @media(max-width:719px){ .dy-r{grid-template-columns:auto auto;gap:6px 10px;padding:var(--card-px)} /* PC 에서 못 박아 둔 칸 번호를 푼다 — 좁은 화면은 두 칸뿐이라 그대로 두면 빈칸이 생긴다 */ .dy-ph,.dy-d,.dy-wx{grid-column:auto} .dy-tx{grid-column:1 / -1} /* 날씨는 오른쪽 끝에 (2026-08-30 사용자 지시: "날씨만 우측정렬"). 날짜 바로 뒤에 붙어 있으면 줄 가운데에서 끝나 어중간하다 — 양 끝으로 벌려야 '왼쪽은 언제, 오른쪽은 어땠나'로 읽힌다. */ .dy-wx{flex-direction:row;align-items:baseline;gap:6px;justify-self:end;text-align:right} /* 좁은 화면에서는 날짜와 시각이 한 줄에 나란히 — 세로로 쌓으면 줄만 길어진다 */ .dy-t{display:inline;margin-left:6px} } @media(min-width:600px){.lp-today-av{width:96px;height:96px;border-radius:24px}} @media(max-width:380px){.lp-today-av{width:72px;height:72px;border-radius:18px}} /* 회원 화면에서는 입력 폼·가입 유도를 감추고 맞춤 카드만 남긴다 */ .lp-bene-sec.is-member .lp-bene-head, .lp-bene-sec.is-member .lp-find-form, .lp-bene-sec.is-member .lp-find-wx, .lp-bene-sec.is-member .lp-bene-cta, .lp-bene-sec.is-member .lp-bene-sub{display:none} /* 칼럼 필자 프로필 — 본문과 구분되게 */ .b-post-body .col-profile{margin-top:26px;padding:var(--card-py) var(--card-px);background:var(--g-50);border-radius:14px; font-size:14px;line-height:21px;color:var(--text-2)} /* 접종·검진 출처 표기 — 카드 '안' 맨 아래 각주. 카드 밖으로 빼면 그 높이만큼 아래 카드와의 간격이 벌어져 카드 리듬이 깨진다 (DESIGN.md §6). */ .lp-health-src{font-size:11.5px;line-height:17px;color:var(--text-muted); padding:10px 16px 12px;border-top:1px solid var(--divider)} /* 지원금·어린이집·병원·가볼만한곳 줄(.lp-fd-r) 안에서 쓰는 작은 아웃링크 버튼 — 이름·정보는 라플 화면에 바로 보이고, 정부기관·지도로는 이 버튼 하나로만 나간다 */ .lp-hmap{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none; border-radius:50%;background:var(--ivory);color:var(--text-2);border:1px solid var(--border)} @media(hover:hover){.lp-hmap:hover{border-color:var(--navy);color:var(--navy)}} /* Sample tag */ .lp-sample-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill); background:var(--divider);color:var(--text-2);font-size:11px;font-weight:600;flex:none} /* Section link */ .lp-sec-link{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--text-2)} .lp-sec-link:hover{color:var(--navy)} .lp-sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px} /* list section */ .b-list-section{padding-block:28px 24px} .b-list-heading{font-size:clamp(22px,3.5vw,28px);margin-bottom:18px} .b-filters{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap} .b-filter{padding:8px 16px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink-soft);background:#fff} .b-filter.active,.b-filter:hover{border-color:var(--green);color:var(--green)} .b-list{padding-block:8px 24px;display:grid;gap:22px;grid-template-columns:minmax(0,1fr)} .b-card{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .2s,transform .2s} .b-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)} .b-card .thumb{background-size:cover;background-position:center;min-height:140px;background-color:var(--g-100)} .b-card .body{padding:18px 20px 18px 0;display:flex;flex-direction:column;gap:10px} .b-card h2{font-size:19px} .b-card .excerpt{color:var(--ink-soft);font-size:14.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .b-card .meta{font-size:12.5px;color:var(--ink-soft);margin-top:auto} @media(max-width:640px){.b-card{grid-template-columns:1fr}.b-card .thumb{min-height:170px}.b-card .body{padding:16px}} .b-empty{padding:80px 0;text-align:center;color:var(--ink-soft)} /* post page */ /* 위 여백은 --sec-gap 규칙에 맡긴다(헤더 바로 아래라 48px까지 띄우면 너무 벌어졌다). 아래 24px는 구분선과 본문 사이 안쪽 여백이라 남긴다. */ /* 제목과 본문 사이 실선은 없앴다(2026-08-20) — AI 요약 카드가 경계 역할을 한다. 흰 종이는 제목부터 시작한다: 제목 .wrap 과 본문 .ns-body 가 같은 폭의 흰 배경을 이어 받아 한 장으로 보인다 (아래 .ns-body 규칙과 짝). */ .b-post-hero{padding:0} .b-post-hero > .wrap{ background:var(--surface);box-sizing:border-box; width:calc(100% - 2 * var(--pad)); max-width:calc(720px - 2 * var(--pad)); margin-inline:auto; padding:24px 16px 18px} @media(min-width:1025px){.b-post-hero > .wrap{max-width:calc(1180px - 2 * var(--pad))}} .b-post-hero h1{font-size:clamp(26px,4.4vw,38px);margin-top:16px} .b-post-meta{margin-top:16px;color:var(--ink-soft);font-size:13.5px;display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* 기사 제목 밑 한 줄 — 'ㅣ'로 이미 나뉘므로 flex 간격은 두지 않는다. 매체명 자리에는 베이비뉴스 로고가 들어가므로 글자와 밑선을 맞춘다. */ .ns-byline{gap:0;justify-content:flex-start;text-align:left} .ns-byline-logo{display:inline-flex;align-items:center;flex:0 0 auto} .ns-byline-logo img{display:block;width:auto;height:20px} .ns-byline-txt{color:var(--ink-soft)} /* 위 여백은 figure가 갖는다. img가 margin-top을 가지면 마크의 top 오프셋이 사진 모서리가 아니라 figure 기준이 되어 상·우 간격이 어긋난다. */ .b-post-figure{position:relative;margin:var(--sec-gap) 0 0} .b-post-thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;background:var(--g-100)} /* 본문 사진 우상단 베이비뉴스 마크 (본문 전용 — 목록·공유 카드에는 없음). 라운딩·그림자 없이, 사진 모서리에서 상·우 같은 간격으로 붙인다. */ .b-post-mark{position:absolute;top:12px;right:12px;width:44px;height:44px; border-radius:0;box-shadow:none} @media (min-width:600px){ .b-post-mark{top:16px;right:16px;width:56px;height:56px} } .b-post-body{padding-block:0;font-size:16.5px;line-height:1.9} /* 흰 종이 끝(추천 콘텐츠 아래) 숨 쉴 여백 — 위의 padding-block:0 이 §기사본문(.ns-body)의 padding 을 덮어 0으로 만들고 있었다. 클래스 둘을 겹쳐 특정도로 되살린다. */ .b-post-body.ns-body{padding-bottom:48px} @media(min-width:760px){.b-post-body.ns-body{padding-bottom:56px}} .b-post-body h2{font-size:22px;margin-top:var(--sec-gap);margin-bottom:var(--sec-gap)} .b-post-body h3{font-size:18px;margin-top:var(--sec-gap);margin-bottom:10px} .b-post-body p{margin-bottom:var(--sec-gap)} .b-post-body ul,.b-post-body ol{margin:0 0 var(--sec-gap) 22px} .b-post-body li{margin-bottom:8px} .b-post-body strong{color:var(--ink)} /* 원문에 포함된 사진 — 가운데 정렬, 작은 사진은 억지로 늘리지 않는다. 단, 모바일에서는 화면 폭이 곧 사진이 보일 수 있는 최대 크기라 꽉 채워서 크게 보여준다. */ .b-post-body img{display:block;max-width:100%;width:auto;height:auto;border-radius:14px;margin:8px auto 6px} .b-post-body p:has(> img){text-align:center;margin-bottom:22px} @media(max-width:720px){ .b-post-body img{width:100%} } /* 심층 콘텐츠용 — 표, 핵심요약 박스, 체크포인트, 인용 */ .b-post-body .b-tablewrap{overflow-x:auto;margin:0 0 var(--sec-gap);-webkit-overflow-scrolling:touch} /* min-width 를 420px 로 못 박아 두면 폭 319px 인 폰에서 2단짜리 표까지 옆으로 밀린다. 가장 중요한 오른쪽 칸이 화면 밖으로 나가 버려서, 표를 옆으로 쓸어야 읽힌다. min(420px,100%) 로 두면 넓은 화면에서는 그대로 420px, 좁은 화면에서는 폭에 맞춰 접힌다. 칸이 많아 정말 안 들어가는 표는 그때만 .b-tablewrap 이 가로 스크롤을 준다 (2026-08-30). */ .b-post-body table{border-collapse:collapse;width:100%;min-width:min(420px,100%);font-size:15px;line-height:1.6} .b-post-body th,.b-post-body td{border:1px solid var(--border);padding:11px 13px;text-align:left;vertical-align:top} .b-post-body th{background:var(--g-50);font-weight:700;color:var(--ink);white-space:nowrap} .b-post-body td strong{color:var(--coral-deep)} .b-key{margin:0 0 var(--sec-gap);padding:20px 22px;background:var(--mist);border-radius:var(--r-card);border:1px solid var(--border)} .b-key .k{display:block;font-size:12.5px;font-weight:700;color:var(--coral-deep);margin-bottom:10px} .b-key ul{margin:0 0 0 20px} .b-key li{font-size:15.5px;line-height:1.75;margin-bottom:6px} .b-note{margin:0 0 var(--sec-gap);padding:var(--card-py) var(--card-px);background:var(--peach);border-radius:14px;font-size:15px;line-height:1.75} .b-note strong{color:var(--coral-deep)} .b-post-body blockquote{margin:0 0 22px;padding:4px 0 4px 18px;border-left:3px solid var(--coral); font-size:16px;line-height:1.8;color:var(--text-2)} .b-source{margin-top:8px;padding:var(--card-py) var(--card-px);background:var(--g-50);border-radius:12px;font-size:13.5px;color:var(--ink-soft)} .b-source a{color:var(--green);font-weight:600} /* 원문 출처 — 박스 없이 우측 정렬 한 줄 */ .b-source-line{text-align:right;font-size:13px;color:var(--ink-soft);margin:0 0 8px} .b-source-line a{color:var(--ink);font-weight:600} .b-source-line a:hover{color:var(--coral-deep)} .b-disclaimer{margin-top:28px;padding:18px 20px;background:var(--p-mint);border-radius:12px;font-size:13px;color:var(--ink-soft);line-height:1.7} .b-back{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:var(--ink-soft)} .b-back:hover{color:var(--green)} .b-ai-summary{margin-bottom:var(--sec-gap);padding:20px 22px;background:var(--peach);border-radius:var(--r-card);} .b-ai-summary-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--coral-deep);letter-spacing:-.01em} .b-ai-summary p{margin:10px 0 0;font-size:15px;line-height:1.75;color:var(--ink);font-weight:500} .b-post-actions{display:flex;gap:10px;padding-top:var(--sec-gap);border-top:1px solid var(--line)} .b-act-btn{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--white);color:var(--ink-soft);font-size:14px;font-weight:700;cursor:pointer} .b-act-btn:hover{border-color:var(--coral)} .b-act-btn.is-liked{background:var(--coral);border-color:var(--coral);color:#fff} .b-act-btn.is-liked svg{fill:#fff} .b-related{margin-top:32px;padding:22px;background:var(--g-50);border-radius:var(--r-card)} .b-related h3{font-size:15.5px;margin-bottom:12px} /* ul 태그라 .b-post-body ul{margin:0 0 18px 22px} 규칙에 걸려 왼쪽으로 22px 밀려 들어갔다 — 다른 하단 박스들과 가로폭을 맞추려면 지워야 한다. */ .b-post-body .b-related-list{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin:0;list-style:none} .b-related-list li a{font-size:14.5px;font-weight:600;color:var(--ink)} .b-related-list li a:hover{color:var(--coral-deep)} .b-related-list li span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px} /* 본문 하단 — 이 글과 관련된 실제 지원제도 (복지로 API) */ .b-welfare{padding:24px;border-radius:var(--r-card);background:var(--mist);border:1px solid var(--border)} .b-welfare-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--coral-deep)} .b-welfare-head h3{font-size:17px;line-height:24px;margin-top:8px;letter-spacing:-.02em} .b-welfare-list{display:grid;gap:10px;margin-top:16px;grid-template-columns:minmax(0,1fr)} .b-wf-item{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px var(--card-px);transition:box-shadow .16s,transform .16s} .b-wf-item:hover{box-shadow:var(--shadow-card)} .b-wf-item:active{transform:scale(.99)} .b-wf-region{display:inline-block;font-size:11.5px;font-weight:700;color:var(--coral-deep);background:var(--peach);border-radius:var(--r-pill);padding:2px 9px} .b-wf-name{display:block;font-size:14.5px;line-height:20px;font-weight:700;color:var(--ink);margin-top:8px;letter-spacing:-.02em} .b-wf-sum{display:block;font-size:12.5px;line-height:18px;color:var(--ink-soft);margin-top:5px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .b-welfare-empty{font-size:13.5px;line-height:20px;color:var(--ink-soft);margin-top:12px} .b-welfare-cta{display:inline-flex;align-items:center;gap:6px;margin-top:16px;height:44px;padding:0 20px; border-radius:var(--r-pill);background:var(--coral);color:#fff;font-size:14px;font-weight:700} .b-welfare-cta:hover{background:var(--coral-deep)} /* 본문 하단 — 관련기사 (썸네일 + 기사 카드) */ .b-related-title{font-size:18px;letter-spacing:-.02em;margin-bottom:16px} /* auto-fill이면 카드가 4장뿐이어도 5번째 칸을 빈 채로 예약해 오른쪽에 여백이 남는다 — 아래 뉴스 박스와 가로폭을 맞추려면 있는 카드가 항상 끝까지 채워야 한다. */ .b-related-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .b-rel-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card); overflow:hidden;transition:box-shadow .16s,transform .16s} @media(hover:hover){ .b-rel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-float);border-color:var(--text-muted)} .b-rel-card:hover .b-rel-thumb{transform:scale(1.04)} } .b-rel-card:active{transform:translateY(-1px) scale(.995)} .b-rel-thumb{transition:transform .35s cubic-bezier(.22,.61,.36,1)} @media(prefers-reduced-motion:reduce){ .b-rel-card,.b-rel-thumb{transition:none} .b-rel-card:hover,.b-rel-card:hover .b-rel-thumb{transform:none} } .b-rel-thumb{aspect-ratio:16/10;background:var(--divider) center/cover no-repeat} .b-rel-body{padding:14px var(--card-px) var(--card-py)} .b-rel-body h4{font-size:15px;line-height:21px;font-weight:700;color:var(--ink);margin-top:8px;letter-spacing:-.02em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .b-rel-body p{font-size:12.5px;line-height:18px;color:var(--ink-soft);margin-top:6px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .b-rel-body .src{font-size:11.5px;color:var(--text-3,var(--ink-soft));margin-top:8px;-webkit-line-clamp:1} .b-cta-block{margin-top:44px;padding:30px;border-radius:16px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .b-cta-block h3{color:#fff;font-size:20px} .b-cta-block p{color:rgba(255,255,255,.85);margin-top:6px;font-size:14px} .b-cta-block a{background:#fff;color:var(--green-deep);padding:12px 24px;border-radius:999px;font-weight:700;font-size:14.5px;white-space:nowrap} /* ===== Footer — 다크 배경, LIFE&PLANNER 로고만 회색 ===== */ footer.b-foot{background:#0F1319;margin-top:var(--sec-gap);padding:24px 0 40px;color:#8A8F98;font-size:12.5px;line-height:1.75} /* 가입 페이지: 별밤 배경이 푸터에 바로 닿는다 — 사이 흰 띠 금지(2026-08-22 피드백). 숨 쉴 여백은 배경 '안쪽'(step0 padding)과 폼 단계의 margin 으로 준다. */ body.is-join footer.b-foot{margin-top:0} body.is-join .ob{padding-bottom:0} body.is-join .ob-step[data-step="0"]{padding-bottom:52px} body.is-join .ob-step:not([data-step="0"]){margin-bottom:44px} /* 모바일에서는 홈에서만 푸터 노출 (앱처럼 보이게) */ @media(max-width:1024px){footer.b-foot:not(.is-home){display:none}} footer.b-foot a{color:#B4BAC4} footer.b-foot a:hover{color:#fff} .footer-brand-row{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px} /* 컬러 로고를 회색으로 — 다크 배경에서 밝게 보이도록 반전 후 채도 제거 */ .footer-logo-img{height:57px;width:auto;display:block;filter:grayscale(1) brightness(0) invert(.68);opacity:.9} .footer-sep,.footer-org-line{display:none} .footer-tagline{margin-top:0;font-size:14px;font-weight:700;color:#E6E9ED;letter-spacing:-.02em} /* 맨 끝 '라플'만 브랜드 오렌지 (2026-08-29 사용자 지시). ⚠ 남색 바탕이라 #F16531 을 그대로 쓰면 살짝 어둡게 가라앉는다. 한 톤 밝은 쪽으로 올린다. */ .footer-tagline b{color:#FF7A45;font-weight:800} /* 좁은 폰에서는 로고와 이 줄을 위아래로 쌓는다 (2026-08-29). 나란히 두면 로고(145px) + 이 줄(200px)이 375px 폭을 넘어 '라플'이 화면 밖으로 잘려 나간다. 실제로 잘려 있었는데, 회색일 때는 눈에 안 띄어 그냥 지나쳤다. */ @media(max-width:520px){ .footer-brand-row{flex-direction:column;align-items:flex-start;gap:8px} } .footer-contact-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px} .footer-contact-list li{display:flex;align-items:center;gap:7px} .footer-contact-list a{font-weight:400} .footer-contact-list a:hover{text-decoration:underline} .footer-contact-list .ic{width:14px;height:14px;flex:none;color:#5F6672} .footer-legal{margin-top:16px;font-size:11.5px;color:#6B7280;line-height:1.8} .footer-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px} .footer-links a{font-size:12px;font-weight:600;color:#9AA3B2;text-decoration:none} .footer-links a:hover{color:#fff} .footer-links a strong{font-weight:700;color:#C9D1DE} /* ===== legal.php — 약관·개인정보처리방침 ===== */ /* 약관·개인정보·고객센터는 읽을 게 많은 화면이라 본문보다 넓게 쓴다 */ .lg-wrap{padding-block:22px 60px;max-width:900px} /* 기사와 같은 흰 종이 위에서 읽는다 (.ns-body 와 같은 값) */ .lg-paper{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card); padding:26px 24px 34px;margin-top:18px} @media(min-width:760px){.lg-paper{padding:34px 36px 42px}} @media(max-width:400px){.lg-paper{padding:20px 16px 28px;border-radius:14px}} .lg-paper > .lg-title,.lg-paper > .hp-lead:first-child{margin-top:0} .lg-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border)} .lg-tabs a{padding:12px var(--card-px);font-size:14px;font-weight:700;color:var(--text-muted); text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px} .lg-tabs a.on{color:var(--navy);border-bottom-color:var(--navy)} .lg-title{font-size:26px;line-height:35px;font-weight:800;letter-spacing:-.03em;margin-top:0} .lg-toc{display:grid;gap:6px;margin-top:20px;padding:var(--card-py) var(--card-px);border-radius:var(--r-card); background:var(--surface);border:1px solid var(--border)} .lg-toc a{font-size:13.5px;line-height:20px;color:var(--text-2);text-decoration:none} .lg-toc a:hover{color:var(--coral-deep)} .lg-body{margin-top:24px} .lg-body h2{font-size:16px;line-height:24px;font-weight:800;color:var(--navy); margin:30px 0 10px;padding-top:8px;scroll-margin-top:80px} .lg-body h2:first-child{margin-top:0} .lg-body p{font-size:14px;line-height:23px;color:var(--text-2);margin-bottom:9px} .lg-body .lg-li{padding-left:12px} .lg-empty{margin-top:28px;color:var(--text-muted)} .lg-foot{margin-top:36px;padding-top:20px;border-top:1px solid var(--divider); font-size:12.5px;color:var(--text-muted)} @media(min-width:760px){.lg-toc{grid-template-columns:repeat(2,minmax(0,1fr))}} /* MY — 내 정보 수정 */ .my-ok{margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--mint); font-size:13.5px;font-weight:600;color:#1F6B4E} /* 프로필 사진 */ .my-avatar{display:flex;align-items:center;gap:16px;margin-top:14px} .my-avatar-img{flex:none;width:84px;height:84px;border-radius:50%;overflow:hidden; background:var(--mist);display:flex;align-items:center;justify-content:center;color:var(--navy)} .my-avatar-img img{width:100%;height:100%;object-fit:cover;display:block} .my-avatar-name{font-size:19px;font-weight:800;letter-spacing:-.03em} .my-avatar-btn{display:inline-flex;align-items:center;height:34px;padding:0 14px;margin-top:8px; border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface); font-size:13px;font-weight:700;color:var(--text-2);cursor:pointer} .my-avatar-btn:hover{border-color:var(--navy);color:var(--navy)} .my-avatar-msg{font-size:11.5px;line-height:17px;color:var(--text-muted);margin-top:6px} /* 아이 추가 */ .my-kid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px;gap:8px;margin-bottom:8px} .my-kid-del{border:1px solid var(--border);border-radius:12px;background:var(--surface); color:var(--text-muted);font-size:20px;line-height:1;cursor:pointer} .my-kid-del:hover{border-color:var(--coral);color:var(--coral-deep)} .my-add{width:100%;height:44px;border:1px dashed var(--border);border-radius:12px;background:transparent; font-family:inherit;font-size:13.5px;font-weight:700;color:var(--text-2);cursor:pointer} .my-add:hover{border-color:var(--coral);color:var(--coral-deep)} @media(max-width:420px){.my-kid{grid-template-columns:minmax(0,1fr) 38px} .my-kid input[type=date]{grid-column:1}} .my-seg{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)} .my-seg label{display:flex;align-items:center;gap:9px;padding:13px 15px;border:1px solid var(--border); border-radius:12px;background:var(--surface);cursor:pointer;font-size:14.5px;font-weight:600} .my-seg input{accent-color:var(--coral);width:17px;height:17px;flex:none} .my-seg label:has(input:checked){border-color:var(--coral);background:#FEF6F4} .my-chips{display:flex;flex-wrap:wrap;gap:8px} .my-chip{position:relative} .my-chip input{position:absolute;opacity:0;width:0;height:0} .my-chip span{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:var(--r-pill); border:1px solid var(--border);background:var(--surface);font-size:13.5px;font-weight:600; color:var(--text-2);cursor:pointer;transition:border-color .16s,color .16s,background .16s} .my-chip input:checked + span{border-color:var(--coral);background:var(--coral);color:#fff} .my-chip input:focus-visible + span{outline:2px solid var(--navy);outline-offset:2px} @media(min-width:520px){.my-seg{grid-template-columns:repeat(2,minmax(0,1fr))}} /* MY — 홈 화면 구성(켜고 끄기 + 순서) */ .my-blocklist{display:grid;gap:8px} .my-block-row{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface); transition:opacity .16s} .my-block-row.is-off{opacity:.5} .my-block-chk{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;cursor:pointer;min-width:0} .my-block-chk input{accent-color:var(--coral);width:18px;height:18px;flex:none} .my-block-chk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .my-block-mv{display:flex;gap:4px;flex:none} .my-block-mv button{width:32px;height:32px;border:1px solid var(--border);border-radius:9px; background:var(--ivory);color:var(--text-2);font-size:11px;cursor:pointer} .my-block-mv button:hover{border-color:var(--navy);color:var(--navy)} .my-block-mv button:disabled{opacity:.35;cursor:default} .my-block-mv button:disabled:hover{border-color:var(--border);color:var(--text-2)} /* 탈퇴 화면 — 지워질 정보 목록 */ .wd-list{list-style:none;margin:0;padding:0} .wd-list li{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:11px 0;font-size:13.5px;border-bottom:1px solid var(--divider)} .wd-list li:last-child{border-bottom:0} .wd-list span{color:var(--text-2)} .wd-list strong{font-weight:700;color:var(--text);text-align:right;min-width:0;word-break:break-all} .footer-disclaim{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px} .footer-disclaim>span{font-size:11.5px;color:#6B7280} .footer-sns{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:10px} .footer-sns li{display:flex;align-items:center;color:rgba(255,255,255,.16);font-size:11px} .footer-sns a{display:flex;align-items:center;color:#7A828E} .footer-sns a:hover{color:#fff} .ic-sns{width:16px;height:16px;display:block} @media(max-width:560px){.footer-disclaim{justify-content:flex-start}} /* ===== 온보딩 / 회원가입 (join.php) — DESIGN.md §24 ===== */ /* 트랙은 투명 + 자리 차지 안 함(-3px) — 첫 화면 배경이 헤더에 딱 붙는다. 진행되면 색 막대만 위에 뜬다 */ .ob-progress{position:sticky;top:68px;z-index:20;height:3px;margin-bottom:-3px;background:transparent} .ob-progress span{display:block;height:100%;width:0;background:var(--navy);transition:width .32s ease;border-radius:0 3px 3px 0} .ob{padding-block:0 64px;max-width:520px} /* 첫 화면 배경이 헤더에 붙도록 위 여백 0 */ .ob-step:not([data-step="0"]){padding-top:22px} /* STEP 1~5는 숨 쉴 여백 유지 */ .ob-step{display:none;animation:obIn .28s ease both} .ob-step.is-on{display:block} .ob-intro{display:grid;gap:34px;grid-template-columns:minmax(0,1fr)} .ob-intro-main{min-width:0} .ob-intro-side{min-width:0} /* PC에서는 위(가입 안내 + 카카오 버튼)와 아래(콘텐츠)를 나누고, 아래 콘텐츠만 화면 폭을 다 쓴다. STEP 1~5 폼은 좁은 한 줄이 더 읽기 좋다. */ @media(min-width:1000px){ .ob{max-width:1060px;padding-block:0 80px} /* 첫 화면 배경이 헤더에 붙도록 위 여백 0 (PC) */ .ob-step:not([data-step="0"]){max-width:520px;margin-inline:auto} .ob-intro{gap:48px} .ob-intro-main{max-width:none} /* 기본 .ob h1(26px)이 파일 뒤쪽이라 순서로는 진다 — .ob 를 겹쳐 특정도로 이긴다. 42px→34px (사용자 요청 80% 축소, 2026-08-22) */ .ob .ob-intro-main h1{font-size:48px;line-height:62px} /* 34px→140% (2026-08-22) */ .ob .ob-intro-main .ob-lead{font-size:19px;line-height:29px;margin-top:16px} .ob .ob-intro-main .ob-bene5{margin-top:26px} /* 첫 화면 텍스트 블록 — 타이틀부터 해피박스 훅까지 전부 가운데 (2026-08-22 확정) */ .ob .ob-gift-tx{text-align:center} /* 혜택 6줄 — 덩어리째 가운데. 줄 안의 글은 왼쪽 정렬 유지 */ .ob .ob-intro-main .ob-bene5{width:max-content;max-width:100%;margin-inline:auto} .ob-intro-main .ob-bene5 li{font-size:15.5px;line-height:22px} .ob-intro-side .ob-bene{margin-top:0;padding-top:28px;border-top:1px solid var(--divider)} /* (텐트용 140% 확대 규칙 삭제 2026-08-22 — 하늘 사진은 아이들이 하단 전체에 있어 기본 cover 가 맞다) */ } @keyframes obIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* 눈썹 라벨 공통 — 두꺼운 주황 바 + 라벨 (▍MY, ▍STEP 1/5 …). MY 계열과 같은 규칙 */ .ob-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:17px; font-weight:800;color:var(--text);letter-spacing:.02em} .ob-eyebrow::before{content:"";flex:none;width:5px;height:15px;border-radius:3px;background:#F16531} /* 가운데 정렬 변형(탈퇴 등)도 바를 함께 가운데로 */ .ob-eyebrow-c{width:100%;justify-content:center;text-align:center;font-size:13px;color:var(--navy)} .ob-note-c{text-align:center} /* 그리팅 카드 안 작은 카카오 버튼 (2026-08-23) */ .lp-hello-kbtn{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:9px 16px; background:#FEE500;color:#1A1A1A;font-size:13.5px;font-weight:800;letter-spacing:-.02em; text-decoration:none} .lp-hello-kbtn:active{transform:scale(.97)} /* 지역/상태 선택 시 작은 안내창 — 카카오 가입으로 잇는다 (2026-08-23, 각지게) */ .lp-gate-ov{position:fixed;inset:0;z-index:400;background:rgba(15,19,25,.45); display:flex;align-items:center;justify-content:center;padding:24px} .lp-gate-card{background:#fff;padding:22px 18px 16px;max-width:340px;width:100%;text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.18)} .lp-gate-card p{margin:0 0 14px;font-size:15px;line-height:23px;font-weight:600;color:var(--text)} .lp-gate-card p strong{color:var(--coral-deep)} /* 선택 안내 2줄 — 가운데 정렬 (2026-08-23) */ .lp-fd-lock-c{justify-content:center;text-align:center;line-height:1.7} /* 가입 페이지 첫 박스(혜택 조회) — 파란 하늘 배경 (2026-08-23). 흰 막을 얹어 글·검색창이 또렷하게 읽힌다. 아래로 갈수록 흰색에 가까워 목록이 편안하다. */ /* (하늘 배경 취소 2026-08-23 — 흰 카드 원래대로. 이미지는 images/join-box-sky.jpg 에 남아 있다) */ /* 첫 화면 카톡 버튼 — 조회 박스 위, 스크롤 없이 보이는 자리 (2026-08-23) */ .ob-top-cta{margin-bottom:14px} /* 핑크 카드 안으로 들어온 경품 박스 — 반투명 흰 카드로 배경과 어우러지게 (2026-08-23) */ .ob-event-in{margin:16px 0 0;background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.9)} /* 첫 박스 — 연한 회색 배경 + 우상단 베이비뉴스 로고(출처 겸 링크) */ .ob-step[data-step="0"] .ob-bene.ob-bene-first{position:relative;background:#F4F4F2} .ob-bene-bn{position:absolute;top:14px;right:14px;line-height:0;opacity:.9} .ob-bene-bn:hover{opacity:1} .ob-bene-bn img{height:24px;width:auto;display:block} /* 핑크 카드 안 맨 위 소개 문구 — 좌측 정렬, 첫 두 줄 크게 (가입 페이지, 2026-08-23) */ .ob-top-copy{text-align:left;margin:0 0 18px} .ob-top-big{margin:0;font-size:22px;line-height:30px;font-weight:800;letter-spacing:-.03em;color:var(--navy)} .ob-top-sub{margin:8px 0 0;font-size:14px;line-height:21px;color:var(--text-2)} .ob-top-sub em{font-style:normal;font-weight:800;color:var(--coral-deep)} /* 2단계 안내 — 버튼 바로 아래, 강조는 코랄 */ .ob-steps-hint{font-weight:600} .ob-steps-hint strong{color:var(--coral-deep);font-weight:800} .ob h1{font-size:26px;line-height:35px;font-weight:700;letter-spacing:-.03em;margin-top:10px} .ob h1 strong{color:var(--coral-deep);font-weight:800} .ob-lead{font-size:15px;line-height:23px;color:var(--text-2);margin-top:10px} .ob-lead strong{color:var(--coral-deep);font-weight:800} /* 가입 화면 — 왼쪽에 해피박스 사진, 오른쪽에 문구(왼쪽 정렬) */ .ob-gift{display:flex;align-items:center;gap:16px;margin-top:10px} .ob-gift-tx{flex:1;min-width:0;text-align:left} .ob-gift-img{flex:none;width:118px;height:auto} .ob-gift-line{font-size:15.5px;line-height:23px;font-weight:800;color:var(--navy); letter-spacing:-.02em;margin-top:0} .ob-gift-line strong{color:var(--coral-deep);font-weight:800} @media(max-width:400px){ .ob-gift{gap:11px} .ob-gift-img{width:92px} .ob-gift-line{font-size:14px;line-height:21px} } /* '결혼준비는 웨딩플래너'는 본 문장을 받쳐주는 도입부 — 제목보다 한 단계 작게, 회색으로 */ .ob-gift-small{display:block;font-size:.6em;line-height:1.5;font-weight:600;color:var(--text-2);margin-bottom:2px} /* 폰(2026-08-21) — 사진과 글이 옆으로 서면 둘 다 좁아 답답하다. 사진을 키워 가운데 세우고, 문구도 전부 가운데 정렬로 받친다. */ @media(max-width:999px){ .ob-intro-main{text-align:center} .ob-intro{gap:14px} /* 카카오 안내문과 아래 혜택 목록 사이 — 34px는 폰에서 휑하다 */ .ob-gift{flex-direction:column;gap:12px} .ob-gift-img{width:150px} .ob-gift-tx{text-align:center} /* 세로 리듬(2026-08-21) — 첫 화면이 한 화면(812px)을 넘겨 버튼이 밀려 내려갔다. 위 여백부터 카카오 버튼까지 단계별로 죄어 가입 버튼이 첫 화면 안에 들어오게 한다. */ .ob{padding-block:0 44px} /* 배경이 헤더에 붙도록 위 0 */ .ob-gift{margin-top:0} .ob-gift-tx h1{margin-top:0} /* 기본 규칙(.ob-sns 28px, .ob-note 14px)이 파일 뒤쪽에 있어 순서로는 진다 — 특정도로 이긴다 */ .ob .ob-sns{margin-top:20px} .ob .ob-note{margin-top:12px} .ob .ob-gift-tx .ob-lead{margin-top:12px} } /* PC 크기 조정은 기본값보다 뒤에 와야 적용된다. 글이 남는 폭을 다 차지하면 사진과 글이 양끝으로 벌어져 보인다. 글 폭을 내용만큼만 잡고, 사진+글 한 덩어리를 가운데에 둔다. */ @media(min-width:1000px){ .ob-gift{gap:28px;margin-top:14px;justify-content:center} .ob-gift-tx{flex:0 1 auto} .ob-gift-img{width:190px} .ob-gift-line{font-size:18px;line-height:26px} } .ob-note{font-size:12px;line-height:17px;color:var(--text-muted);margin-top:14px} .ob-label{display:block;font-size:13px;line-height:19px;font-weight:600;color:var(--text-2);margin:20px 0 8px} /* 입력칸 아래 한 줄 설명 — 왜 필요한지 알려줘야 실명을 적어준다 */ .ob-help{font-size:12px;line-height:17px;color:var(--text-muted);margin-top:7px} /* 약관 동의 — 필수/선택을 나눠 받는다 */ .ob-agree{margin-top:24px;border:1px solid var(--border);border-radius:var(--r-card); background:var(--surface);padding:6px 16px 12px} .ob-check-all{padding:12px 0;border-bottom:1px solid var(--divider);margin-bottom:4px} .ob-check-all span strong{font-size:15px;font-weight:700;color:var(--text)} .ob-agree-item{position:relative} .ob-agree-more{position:absolute;top:9px;right:0;border:0;background:transparent;cursor:pointer; font-family:inherit;font-size:12px;font-weight:600;color:var(--text-muted);text-decoration:underline; padding:4px 0} .ob-agree-more:hover{color:var(--navy)} .ob-agree-box{margin:2px 0 12px;padding:14px var(--card-px);border-radius:12px;background:var(--ivory); font-size:12.5px;line-height:19px;color:var(--text-2);max-height:260px;overflow-y:auto} .ob-agree-box h4{font-size:12px;font-weight:700;color:var(--navy);margin:12px 0 4px} .ob-agree-box h4:first-child{margin-top:0} .ob-agree-box p{margin:0} .ob-agree-note{margin-top:10px !important;color:var(--text-muted);font-size:11.5px;line-height:17px} .ob-input{width:100%;height:54px;padding:0 16px;border-radius:var(--r-input);border:1px solid var(--border); background:var(--surface);font-family:inherit;font-size:16px;color:var(--text)} .ob-input:focus{outline:none;border-color:var(--navy);border-width:2px;padding:0 15px} .ob-input.has-error{border-color:var(--coral)} select.ob-input{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23687084' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:42px} .ob-selects{display:grid;gap:10px;margin-top:24px;grid-template-columns:minmax(0,1fr)} .ob-actions{margin-top:28px;display:grid;gap:10px;justify-items:center} .ob-skip{background:none;border:0;color:var(--text-2);font-size:14px;font-weight:500;cursor:pointer;padding:8px} .ob-skip:hover{color:var(--text)} .ob-addbtn{margin-top:14px;background:none;border:0;color:var(--navy);font-size:14px;font-weight:600;cursor:pointer;padding:6px 0} /* SNS 로그인 */ .ob-sns{display:grid;gap:10px;margin-top:28px;grid-template-columns:minmax(0,1fr)} /* 카톡 버튼 폭 = 아래 경품 박스 폭 — 좁은 300px 캡을 없애 같은 가로선에 맞춘다 (2026-08-22) */ .ob-sns-btn{display:flex;align-items:center;justify-content:center;gap:9px;height:54px;border-radius:var(--r-btn); border:1px solid transparent;font-family:inherit;font-size:15.5px;font-weight:600;cursor:pointer;transition:transform .16s} .ob-sns-btn:active{transform:scale(.98)} .ob-sns-btn.kakao{background:#FEE500;color:#191600} .ob-sns-btn.naver{background:#03C75A;color:#fff} .ob-sns-btn.google{background:var(--surface);color:var(--text);border-color:var(--border)} /* 가입 완료 화면의 카카오톡 채널 추가 — 카카오 브랜드 색을 그대로 쓴다 */ .btn-kakao-ch{background:#FEE500;color:#191600;border:0} @media(hover:hover){.btn-kakao-ch:hover{background:#F2DA00}} .ob-ch-note{margin-top:9px;font-size:12.5px;line-height:18px;color:var(--text-2)} /* 시기 선택 타일 */ .ob-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px} .ob-tile{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 16px; border-radius:var(--r-card);border:1px solid var(--border);background:var(--surface); font-family:inherit;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;text-align:left;transition:all .16s} .ob-tile .lp-ic{color:var(--navy)} .ob-tile:active{transform:scale(.98)} .ob-tile:hover{border-color:var(--navy)} .ob-tile.selected{background:var(--coral);border-color:var(--coral);color:#fff} .ob-tile.selected .lp-ic{color:#fff} .ob-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} /* 받고 싶은 정보 — 제목 아래 설명이 붙어 크게 잡는다 */ .ob-chips-lg{display:grid;grid-template-columns:minmax(0,1fr);gap:9px} .chip-lg{flex-direction:column;align-items:flex-start;gap:3px;height:auto;padding:14px var(--card-px); border-radius:14px;text-align:left;white-space:normal} .chip-lg strong{font-size:14.5px;font-weight:700;letter-spacing:-.02em} .chip-lg em{font-style:normal;font-size:12px;line-height:17px;color:var(--text-muted)} .chip-lg.selected em{color:rgba(255,255,255,.82)} @media(min-width:520px){.ob-chips-lg{grid-template-columns:repeat(2,minmax(0,1fr))}} .ob-phone{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px} .ob-phone .btn{height:54px;padding:0 20px;font-size:15px} .ob-check{display:flex;align-items:flex-start;gap:10px;margin-top:26px;font-size:13.5px;line-height:20px;color:var(--text-2);cursor:pointer} .ob-check input{margin-top:3px;width:18px;height:18px;accent-color:var(--navy);flex:none} .ob-check a{color:var(--navy);font-weight:600;text-decoration:underline} .ob-error{margin-top:14px;font-size:13.5px;color:var(--coral);font-weight:500} .ob-done{padding-block:48px 24px;text-align:center} .ob-done-ic{width:64px;height:64px;margin:0 auto 24px;border-radius:var(--r-pill);background:var(--mint); display:flex;align-items:center;justify-content:center;color:var(--navy)} .ob-done h1{font-size:26px;line-height:35px} /* 가입 완료 맞춤 카드 — 방금 등록한 지역의 지원금을 그 자리에서 보여준다 (2026-08-21) */ .ob-done-match{margin-top:22px;padding:18px var(--card-px) 16px;background:var(--surface); border:1px solid var(--border);border-radius:var(--r-card);text-align:left} .ob-done-match-k{font-size:12.5px;font-weight:700;color:var(--text-2);letter-spacing:.01em} .ob-done-match-n{margin-top:6px;font-size:17px;line-height:24px;font-weight:700;color:var(--text)} .ob-done-match-n strong{color:var(--coral-deep);font-size:1.25em} .ob-done-match-list{margin-top:10px;display:grid;gap:6px} .ob-done-match-list li{font-size:13.5px;line-height:19px;color:var(--text-2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ob-done-match-list li::before{content:'· '} .ob-done-match .btn{margin-top:14px} /* ===== Bottom navigation §22 — 72~80px, 최소한의 선 ===== */ /* 하단 고정 탭바. ⚠ 여기에 transform / will-change / filter / backdrop-filter 를 넣지 말 것. 이 속성들은 요소를 '포함 블록'으로 만들어, 일부 모바일 브라우저(특히 iOS)에서 position:fixed 가 absolute 처럼 동작한다 — 탭바가 화면 아래가 아니라 문서 중간에 박혀 스크롤을 따라 움직이는 것처럼 보인다. 배경은 반투명 대신 불투명으로 둔다(스크롤 중 다시 그리지 않아 흔들림도 없다). */ .lp-tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:40; display:flex;align-items:stretch; background:#fff; border-top:1px solid var(--divider); padding-bottom:env(safe-area-inset-bottom); } /* 챗봇 탭은 이동이 아니라 창을 여는 button이라 버튼 기본 스타일을 지운다 */ .lp-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; height:72px;color:var(--text-muted);transition:color .16s; border:0;background:transparent;padding:0;font:inherit;cursor:pointer} /* display:flex 는 hidden 속성을 이긴다 — 감춘 탭이 실제로 사라지게 한 줄 더 둔다. (알림 ↔ 오늘의 기록처럼 로그인 여부로 갈아끼우는 탭이 있다, 2026-08-30) */ .lp-tab[hidden]{display:none} .lp-tab-label{font-size:11px;line-height:14px;font-weight:500;letter-spacing:-.01em;white-space:nowrap} /* '출산지원·혜택'만 다른 탭보다 훨씬 길다 (2026-08-29 사용자 지시로 '지원'에서 바뀜). 375px 폰에서 탭 한 칸이 75px 남짓인데 11px 로 7글자면 옆 탭과 부딪힌다. 이 탭 하나만 줄인다 — 다른 탭까지 줄이면 멀쩡한 글자가 같이 작아진다. ⚠ 폰에서만이다. PC(1025px↑)는 탭이 가로로 늘어서 자리가 남으므로 옆 메뉴와 같은 14px 로 둔다 — 좁을 때 쓰라고 만든 값이 넓은 화면까지 따라가면 혼자만 작은 글씨가 된다 (2026-08-29 사용자 지적). */ /* ⚠ 이 탭만 글자를 줄이던 규칙은 없앴다 (2026-08-29 사용자 지시: "옆과 같은 사이즈로"). 이름을 '출산지원·혜택'(7자) → '출산지원조회'(6자) 로 줄여서 옆 탭과 같은 11px 로도 들어간다. 혼자만 작은 글씨였던 것이 오히려 눈에 띄었다. */ /* 챗봇 탭은 다른 메뉴와 성격이 달라(이동이 아니라 도우미 호출) 오렌지로 눈에 띄게 둔다 */ #lpTabBot{color:#F5822B} .lp-tab.active{color:var(--navy)} .lp-tab.active .lp-tab-label{font-weight:600} body{padding-bottom:calc(72px + env(safe-area-inset-bottom))} /* 모바일 탭 구성: 홈 ㅣ 지원 ㅣ 콘텐츠 ㅣ 초대 ㅣ 알림 — 플래너는 홈 안에 카드로 있으니 뺀다. 단, 알림을 이미 켠 사람(.is-subscribed, inc/bottomnav.php가 판정)에게는 알림 탭이 할 일이 없으므로 플래너를 되살려 그 자리를 돌려준다. PC 상단 메뉴에서는 항상 플래너를 살린다 (아래 min-width 블록). */ @media(max-width:1024px){ .lp-tab[href="/#my-planner"]{display:none} .lp-tabbar.is-subscribed .lp-tab[href="/#my-planner"]{display:flex} .lp-tabbar.is-subscribed #lpTabPush{display:none} /* '출산지원조회'는 언제나 한가운데 (2026-08-30 사용자 지시). 이 사이트가 사람을 데려오는 화면이라 엄지가 가장 편한 자리에 있어야 한다. ⚠ 마크업 순서를 바꾸지 않고 flex order 로만 자리를 옮긴다 — DOM 순서는 PC 상단 메뉴가 그대로 쓰고(아래 min-width 블록에서 탭바가 헤더로 옮겨 간다), 서버가 찍어 주는 현재 탭 표시($navCurrent)도 순서와 무관하게 붙는다. ⚠ 다섯 칸 모두에 번호를 매긴다. 하나만 옮기면 order:0 인 나머지가 앞에 몰려 엉뚱한 자리에 선다. ⚠ 마지막 칸은 로그인 여부로 갈린다(알림 ↔ 오늘의 기록). 둘 다 같은 번호를 준다 — 어차피 한 번에 하나만 보인다. 플래너는 알림을 켠 사람에게만 살아나는데, 그때도 마지막 자리를 그대로 물려받게 같은 번호를 준다. */ .lp-tab.t-home{order:1} .lp-tab.t-content{order:2} .lp-tab.t-support{order:3} #lpTabInvite{order:4} #lpTabPush,#lpTabDiary,.lp-tab.t-planner{order:5} } /* ===== 하단 탭바가 스크롤 중 오르내리는 문제의 근본 해결 ===== iOS 사파리는 '문서'를 스크롤할 때 위·아래 툴바를 접었다 폈다 한다. 그때마다 화면(레이아웃 뷰포트) 높이가 바뀌고, bottom:0 으로 붙여 둔 탭바도 같이 오르내린다. 탭바 쪽 CSS로는 막을 수 없다 — 화면 자체가 변하기 때문이다. 문서를 고정해 두고 body 안에서 스크롤하게 하면 툴바가 접히지 않아 화면 높이가 일정하게 유지되고, 그래서 탭바도 움직이지 않는다. ⚠ 이때 window.scrollY 가 항상 0이 되므로, 스크롤 위치를 읽거나 옮기는 곳은 반드시 lpScrollEl() 을 거친다 (inc/header.php 에 정의). */ @media(max-width:1024px){ html{height:100%;overflow:hidden} body{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch} } /* 키보드가 열린 동안에는 탭바를 감춘다 — 안 그러면 키보드 위로 딸려 올라와 입력창을 가린다. 아래 여백도 같이 걷어 화면을 넓게 쓴다. (inc/bottomnav.php) */ body.is-kb .lp-tabbar{display:none} body.is-kb{padding-bottom:0} /* PC에서는 탭바를 헤더 안, 검색 버튼 왼쪽으로 옮긴다 (검색과 나란히). 마크업은 페이지 맨 아래 하나만 두고 bottomnav.php 의 스크립트가 DOM을 옮긴다 — 페이지마다 헤더에 메뉴를 다시 그리면 active 표시($navCurrent)를 두 곳에서 맞춰야 한다. ⚠ 헤더(.b-hdr)는 backdrop-filter 때문에 fixed 자손의 기준이 되어 버리므로, 모바일 폭으로 줄어들면 스크립트가 탭바를 반드시 원래 자리로 되돌린다. */ @media(min-width:1025px){ .lp-tabbar{ position:static; background:transparent;border-top:0;padding:0; align-items:center; margin-left:auto; /* 로고 쪽이 아니라 검색 버튼 쪽에 붙인다 */ } .lp-tab{ flex:0 0 auto;flex-direction:row;gap:7px; height:68px;padding:0 14px; } .lp-tab:hover{color:var(--navy)} .lp-tab-label{font-size:14px;line-height:20px} /* 구분 바 — 플래너 ㅣ 지원 ㅣ 콘텐츠 ㅣ (로고 옆 .brand-sep 와 같은 모양). 바는 탭의 '경계선 위'에 절대배치로 긋는다 — 탭 안 컨텐츠로 넣으면 좌우 간격이 비대칭이 되어 라벨이 바 사이 중앙에서 벗어난다. 탭 좌우 padding 이 같으므로 경계선에 그으면 라벨이 자동으로 바와 바 사이 정중앙에 온다. 첫 항목(플래너) 앞에는 긋지 않는다 — 앞 형제가 숨긴 홈([href="/"])인 경우를 뺀다. */ .lp-tab{position:relative} .lp-tab:not([href="/"]) + .lp-tab::before{content:"";position:absolute;left:0;top:50%; margin-top:-11px;width:1px;height:22px;background:var(--border)} .lp-tabbar::after{content:"";width:1px;height:22px;background:var(--border);margin-right:14px} /* PC에서는 홈(로고가 이미 그 역할)·알림(홈 배너와 MY 토글이 있다)을 뺀다. 포인트(#lpTabInvite)는 콘텐츠 옆에 살린다 (2026-08-23 요청) */ .lp-tab[href="/"],#lpTabPush{display:none} #lpTabInvite .lp-tab-lp{display:none} /* +LP 배지는 폰 전용 — 헤더에선 라벨만 */ body{padding-bottom:0} } /* 오른쪽 아래에 떠 있는 것들(도우미 버튼·저장 배너)이 서로 겹치지 않도록 기준선을 한 곳에서 정한다. 탭바가 사라지는 1025px에서 함께 내려온다. */ :root{--fab-base:calc(72px + 14px + env(safe-area-inset-bottom))} @media(min-width:1025px){ :root{--fab-base:24px} } /* ===== 스마트폰에 저장하기 (홈 화면 설치) ===== */ /* 도우미 버튼(52px) 바로 위 칸에 앉는다 */ .lp-install-wrap{position:fixed;right:16px;z-index:45; bottom:calc(var(--fab-base) + 64px)} .lp-install{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 18px 0 10px; border:0;border-radius:var(--r-pill);background:var(--navy);color:#fff;cursor:pointer; font-family:inherit;font-size:14px;font-weight:700;letter-spacing:-.02em;white-space:nowrap; box-shadow:0 8px 24px rgba(23,33,58,.28);transition:transform .16s,background .16s} .lp-install img{border-radius:9px;flex:none} .lp-install:active{transform:scale(.97)} @media(hover:hover){.lp-install:hover{background:var(--navy-deep)}} /* 떠 있는 알약은 폰 전용. PC는 아래 오른쪽 윙(.lp-wing)이 대신한다. */ @media(min-width:1025px){.lp-install-wrap{display:none !important}} @media(max-width:360px){.lp-install span{display:none}.lp-install{padding:0 10px}} /* ===== PC 앱설치 버튼 — 챗봇 말풍선 바로 위, 같은 크기의 원형 ===== 챗봇 FAB(52px)이 --fab-base 높이에 있으므로 그 위 12px 자리에 앉힌다. (24 + 52 + 12 = 88 = --fab-base + 64px) 폰에는 이미 알약 버튼이 있으므로 1025px 미만에서는 감춘다. */ .lp-install-fab{position:fixed;right:16px;bottom:calc(var(--fab-base) + 64px);z-index:60; width:52px;height:52px;padding:0;border:0;border-radius:50%;overflow:hidden;cursor:pointer; background:#F16531;box-shadow:0 8px 22px rgba(23,33,58,.22); transition:transform .18s ease,box-shadow .18s ease} .lp-install-fab img{width:100%;height:100%;display:block} @media(max-width:1024px){.lp-install-fab{display:none !important}} @media(hover:hover){ .lp-install-fab:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(241,101,49,.34)} } .lp-install-fab:active{transform:translateY(0) scale(.97)} @media(prefers-reduced-motion:reduce){.lp-install-fab{transition:none}} /* 굳이 안 받고 싶은 분을 위한 닫기 — 버튼 오른쪽 위에 살짝 겹쳐 붙인다 */ .lp-install-close{position:absolute;top:-8px;right:-8px;width:24px;height:24px; border:2px solid var(--ivory);border-radius:50%;background:var(--text-2);color:#fff; font-size:15px;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(23,33,58,.24)} /* 아이폰 안내 시트 — 사파리는 설치 이벤트가 없어서 순서를 알려준다 */ .lp-ios-sheet{position:fixed;inset:0;z-index:210;display:flex;align-items:flex-end;justify-content:center} .lp-ios-back{position:absolute;inset:0;background:rgba(23,33,58,.5)} .lp-ios-card{position:relative;width:100%;max-width:460px;background:var(--surface); border-radius:20px 20px 0 0;padding:28px 24px calc(28px + env(safe-area-inset-bottom));text-align:center} .lp-ios-card img{margin:0 auto;border-radius:14px} .lp-ios-card h3{font-size:19px;line-height:27px;margin-top:14px;letter-spacing:-.03em} .lp-ios-card p{font-size:14px;line-height:21px;color:var(--text-2);margin-top:8px} .lp-ios-card ol{text-align:left;margin:18px 0 0;padding-left:20px;display:grid;gap:9px; font-size:14.5px;line-height:22px;color:var(--text)} .lp-ios-card ol strong{color:var(--coral-deep);font-weight:700} .lp-ios-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%; background:var(--divider);color:var(--text-2);font-size:20px;line-height:1;cursor:pointer} @media(min-width:600px){ .lp-ios-sheet{align-items:center} .lp-ios-card{border-radius:var(--r-card);padding-bottom:28px} } /* 맞춤형 베이비뉴스 브리핑 — 다른 맞춤 카드(.lp-fd)와 같은 모양을 쓴다 */ .lp-news-tag{flex:none;font-size:11px;font-weight:700;color:var(--coral-deep); background:var(--peach);border-radius:var(--r-pill);padding:3px 9px} /* 모바일에서는 기사 제목 앞 지원/제도/칼럼 라벨 박스를 뺀다 — 화면이 좁아 제목이 더 잘린다 */ @media(max-width:1024px){.lp-news-tag{display:none}} /* 기사 제목도 항상 한 줄 */ .lp-news-item{align-items:center} /* 댓글이 달린 기사에만 제목 옆에 [건수] — 제목이 잘려도 이건 남는다. 제목이 남는 자리를 다 먹으면 배지가 화살표 옆까지 밀려난다. 제목은 필요한 만큼만 쓰고(0 1 auto), 남는 자리는 화살표가 가져가게 한다. */ .lp-news-item .lp-news-t{flex:0 1 auto} .lp-news-item .lp-ic{margin-left:auto} .lp-news-cm{flex:none;font-style:normal;font-size:12.5px;font-weight:800;color:var(--coral-deep); margin-left:-5px} /* ===== help.php — 고객센터 (FAQ ㅣ 문의하기 ㅣ 광고·제휴) ===== legal.php 와 같은 .lg-wrap / .lg-tabs 를 그대로 쓴다. 여기서는 본문만 정의한다. */ .hp-lead{margin-top:18px;font-size:14px;line-height:23px;color:var(--text-2)} .hp-lead a{color:var(--coral-deep);font-weight:700} .hp-gname{margin:30px 0 12px;font-size:15px;font-weight:800;color:var(--navy)} .hp-faq{border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--surface)} .hp-q + .hp-q{border-top:1px solid var(--divider)} .hp-q summary{list-style:none;cursor:pointer;padding:15px 44px 15px 17px;position:relative; font-size:14.5px;line-height:22px;font-weight:700;color:var(--text)} .hp-q summary::-webkit-details-marker{display:none} /* 펼침 표시는 글자가 아니라 도형으로 — 폰트에 따라 깨지지 않는다 */ .hp-q summary::after{content:'';position:absolute;right:19px;top:50%;width:8px;height:8px; margin-top:-5px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted); transform:rotate(45deg);transition:transform .18s ease} .hp-q[open] summary::after{transform:rotate(-135deg);margin-top:-2px} @media(hover:hover){.hp-q summary:hover{background:var(--ivory)}} .hp-a{padding:0 17px 16px} .hp-a p{font-size:14px;line-height:23px;color:var(--text-2);margin-bottom:8px} .hp-a p:last-child{margin-bottom:0} .hp-a a{color:var(--coral-deep);font-weight:700} .hp-form{margin-top:22px} .hp-lb{display:block;margin:16px 0 7px;font-size:13px;font-weight:700;color:var(--text-2)} .hp-lb span{color:var(--coral-deep)} .hp-in{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px; background:var(--surface);font-family:inherit;font-size:15px;color:var(--text)} .hp-in:focus{outline:none;border-color:var(--coral-deep)} .hp-ta{resize:vertical;line-height:23px} .hp-agree{margin:14px 0 12px;font-size:12.5px;line-height:19px;color:var(--text-muted)} .hp-submit{margin-top:4px} .hp-msg{margin-top:12px;font-size:13.5px;font-weight:600} .hp-msg.is-ok{color:var(--navy)} .hp-msg.is-bad{color:var(--coral-deep)} .hp-adbox{margin-top:22px;padding:18px;border-radius:var(--r-card); background:var(--ivory);border:1px solid var(--border)} .hp-adlist{display:grid;gap:9px} .hp-adlist li{font-size:14px;line-height:22px;color:var(--text-2);padding-left:13px;position:relative} .hp-adlist li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px; border-radius:50%;background:var(--coral-deep)} .hp-contact{margin-top:38px;padding-top:22px;border-top:1px solid var(--divider)} /* 회원탈퇴 — 되돌릴 수 없는 동작이라 눈에 띄지 않게, 고객센터 맨 아래에 둔다 */ .hp-leave{margin-top:26px;padding-top:18px;border-top:1px solid var(--divider); font-size:12.5px;line-height:19px;color:var(--text-muted)} .hp-leave a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px} @media(hover:hover){.hp-leave a:hover{color:var(--coral-deep)}} .hp-cl{display:grid;gap:9px} .hp-cl li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2)} .hp-cl a{color:var(--text-2);text-decoration:none} .hp-cl .ic{width:16px;height:16px;flex:none;color:var(--text-muted)} /* ===== 해피박스 초대 버튼 (inc/bottomnav.php) ===== 모바일 우하단, 탭바 바로 위 — PC에선 챗봇 FAB이 그 자리라 폰에서만 보인다. 누르면 초대 탭과 같은 공유창. 이미지 자체가 흰 원이라 배경 없이 그림자만 준다. */ .lp-happy-fab{position:fixed;right:16px;bottom:var(--fab-base);z-index:60; width:60px;height:60px;padding:0;border:0;border-radius:50%;cursor:pointer;background:none; filter:drop-shadow(0 8px 20px rgba(23,33,58,.25));transition:transform .18s ease} .lp-happy-fab img{width:100%;height:100%;display:block;border-radius:50%} .lp-happy-fab:active{transform:scale(.94)} /* PC 에서도 보여준다 (2026-08-23) — 챗봇 말풍선 바로 위에 같은 크기로 */ @media(min-width:1025px){ /* 우하단 세로 3단: 챗봇(맨 아래) → 설치 → 해피박스(맨 위). 간격 62px 로 통일 */ .lp-happy-fab{width:52px;height:52px;bottom:calc(var(--fab-base) + 124px)} } body.is-kb .lp-happy-fab{display:none} @media(prefers-reduced-motion:reduce){.lp-happy-fab{transition:none}} /* ===== 라플 도우미 (inc/chatbot.php) ===== 모바일 하단 탭바(56px)와 '스마트폰에 저장' 배너를 피해서 앉는다. */ /* 우하단 챗봇 말풍선 — PC 전용. 모바일에는 헤더 말풍선(.hdr-bot)이 대신 뜬다. */ .lp-bot-fab{position:fixed;right:16px;bottom:var(--fab-base);z-index:60;width:52px;height:52px;border:0; border-radius:50%;background:var(--coral);color:#fff;cursor:pointer;display:flex; align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(224,90,76,.34); transition:transform .18s ease,background .18s ease} @media(hover:hover){.lp-bot-fab:hover{transform:translateY(-2px)}} .lp-bot-fab.is-open{background:var(--coral-deep)} /* 탭바가 있는 구간(모바일)에서는 감춘다 — 헤더 버튼과 입구가 겹치지 않게 */ @media(max-width:1024px){.lp-bot-fab{display:none}} @media(prefers-reduced-motion:reduce){.lp-bot-fab{transition:none}} .lp-bot{position:fixed;right:16px;bottom:calc(var(--fab-base) + 60px);z-index:61; width:min(360px,calc(100vw - 32px)); max-height:min(520px,calc(100vh - var(--fab-base) - 100px));display:flex;flex-direction:column;overflow:hidden; background:var(--surface);border:1px solid var(--border);border-radius:18px; box-shadow:0 18px 46px rgba(23,33,58,.22)} .lp-bot-hd{display:flex;align-items:center;gap:10px; padding:12px 16px;background:var(--coral-deep);color:#fff} .lp-bot-hd-tx{flex:1;min-width:0} .lp-bot-hd strong{display:block;font-size:14.5px;font-weight:800} .lp-bot-hd span{display:block;margin-top:2px;font-size:11.5px;color:rgba(255,255,255,.72)} .lp-bot-x{flex:none;border:0;background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0 2px} .lp-bot-log{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px} .lp-bot-msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:21px} .lp-bot-msg p{margin:0 0 7px} .lp-bot-msg p:last-child{margin-bottom:0} .lp-bot-msg.is-bot{align-self:flex-start;background:var(--ivory);color:var(--text-2);border-bottom-left-radius:5px} .lp-bot-msg.is-me{align-self:flex-end;background:var(--coral);color:#fff;border-bottom-right-radius:5px} .lp-bot-msg.is-bot a{color:var(--coral-deep);font-weight:700} .lp-bot-cta{display:inline-block;margin:5px 6px 0 0;padding:7px 12px;border-radius:var(--r-pill); background:var(--peach);color:var(--coral-deep) !important;font-size:12.5px;font-weight:700;text-decoration:none} /* 답변 속 링크를 아래에 한 번 더 — 문장 안 링크는 그냥 지나치기 쉽다. 다만 답변보다 튀면 안 되므로 알약 대신 주황 글자로만 둔다. */ .lp-bot-goto{margin-top:8px;padding-top:8px;border-top:1px solid var(--divider); display:flex;flex-wrap:wrap;gap:0 14px} .lp-bot-goto .lp-bot-cta{margin:0;padding:0;background:none;border-radius:0; color:var(--coral-deep) !important;font-size:12.5px;font-weight:700} @media(hover:hover){.lp-bot-goto .lp-bot-cta:hover{text-decoration:underline}} .lp-bot-note{font-size:11.5px;color:var(--text-muted)} /* 챗봇 안에서 보여주는 육아용품 최저가 카드 */ .lp-bot-goods{display:flex;flex-direction:column;gap:6px;margin:6px 0} .lp-bot-goods-item{display:flex;align-items:center;gap:10px;padding:7px;border-radius:12px; background:var(--surface);text-decoration:none;color:inherit} .lp-bot-goods-th{flex:none;width:44px;height:44px;border-radius:9px;background:var(--divider) center/cover no-repeat} .lp-bot-goods-tx{min-width:0;display:flex;flex-direction:column;gap:2px} .lp-bot-goods-tx b{font-size:12.5px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lp-bot-goods-tx em{font-style:normal;font-size:13px;font-weight:800;color:var(--coral-deep)} /* 챗봇 안에서 보여주는 베이비뉴스 기사 카드 */ .lp-bot-arts{display:flex;flex-direction:column;gap:6px;margin:6px 0} .lp-bot-art-item{display:flex;align-items:center;gap:10px;padding:7px;border-radius:12px; background:var(--surface);text-decoration:none;color:var(--text)} .lp-bot-art-th{flex:none;width:44px;height:44px;border-radius:9px;background:var(--divider) center/cover no-repeat} .lp-bot-art-tx{min-width:0;font-size:12.5px;font-weight:600;line-height:17px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* 첫 화면 — 추천 질문 왼쪽, 라플은 오른쪽 빈자리에 선다. 대화가 시작되면 이 덩어리째 위로 밀려 자연스럽게 사라진다. */ /* 라플은 칩 위 오른쪽에 — 칩이 2열로 폭을 다 쓰므로 옆자리가 남지 않는다 */ .lp-bot-intro{display:flex;flex-direction:column;gap:8px} .lp-bot-face{align-self:flex-end;width:auto;height:72px;display:block;margin-right:4px} /* 추천 질문 2열 × 4줄 — 칸을 고르게 나눠 여덟 개가 한눈에 들어오게 한다 */ .lp-bot-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .lp-bot-chips button{width:100%;text-align:center;padding:9px 6px;font-size:12.5px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lp-bot-chips button{padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-pill); background:var(--surface);font-family:inherit;font-size:12.5px;font-weight:600; color:var(--text-2);cursor:pointer;text-align:left} @media(hover:hover){.lp-bot-chips button:hover{border-color:var(--coral-deep);color:var(--coral-deep)}} .lp-bot-in{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--divider);background:var(--surface)} .lp-bot-in input{flex:1;min-width:0;padding:10px 13px;border:1px solid var(--border);border-radius:var(--r-pill); background:var(--ivory);font-family:inherit;font-size:14px;color:var(--text)} .lp-bot-in input:focus{outline:none;border-color:var(--coral-deep)} .lp-bot-in button{flex:none;width:40px;border:0;border-radius:50%;background:var(--coral);color:#fff; cursor:pointer;display:flex;align-items:center;justify-content:center} /* 답을 찾는 동안 점 세 개 */ .lp-bot-dots{display:inline-flex;gap:4px;padding:2px 0} .lp-bot-dots i{width:6px;height:6px;border-radius:50%;background:var(--text-muted); animation:botDot 1.1s infinite ease-in-out} .lp-bot-dots i:nth-child(2){animation-delay:.16s} .lp-bot-dots i:nth-child(3){animation-delay:.32s} @keyframes botDot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} @media(prefers-reduced-motion:reduce){ .lp-bot-dots i{animation:none;opacity:.5} } /* PC 는 탭바가 없어 --fab-base 가 24px 로 내려간다 (위 :root 참조) */ @media(min-width:1025px){ .lp-bot{max-height:min(560px,calc(100vh - 130px))} } /* ===== 스크롤 모션 (inc/motion.js) ===== 숨기는 일도 JS가 맡는다. 스크립트가 막히면 .lp-rise 가 붙지 않아 아무것도 사라지지 않는다. 흔들리지 않게 세로로만, 짧게 움직인다. */ .lp-rise{opacity:0;transform:translateY(26px); transition:opacity .55s ease var(--rise-delay,0ms), transform .72s cubic-bezier(.22,.61,.36,1) var(--rise-delay,0ms); will-change:opacity,transform} .lp-rise.is-in{opacity:1;transform:none} /* 다 나타난 뒤에는 합성 레이어를 놓아준다 (모바일 스크롤이 무거워진다) */ .lp-rise.is-in{will-change:auto} /* 누를 때 살짝 눌리는 느낌 — 터치에서 반응이 있다는 신호가 된다 */ .btn:active,.lp-cta:active,.lp-fd-r:active,.lp-card:active,.b-act-btn:active{transform:scale(.985)} @media(prefers-reduced-motion:reduce){ .lp-rise{opacity:1;transform:none;transition:none} .btn:active,.lp-cta:active,.lp-fd-r:active,.lp-card:active,.b-act-btn:active{transform:none} } /* ===== support.php — 우리 동네 출산육아지원금 검색 ===== 좌우 패딩은 .wrap의 padding-inline과 맞춘다 — 위/아래만 이 페이지 값으로 쓴다. (전에 좌우까지 0으로 덮어써서 헤더 로고보다 20px 더 밖으로 나가 있었다) */ /* 첫 블록이라 헤더 바로 아래 여백은 여기서 준다. 다른 화면과 같은 리듬(--sec-gap)으로 맞춘다. */ .sp-hero{padding-block:var(--sec-gap) 8px} .sp-hero h1{font-size:clamp(24px,4.2vw,32px);margin-top:14px} /* 칩/셀렉트/동 입력칸 사이 간격을 하나의 값으로 통일 — margin 체인 대신 gap을 쓴다 */ .sp-filter{margin-top:24px;display:flex;flex-direction:column;gap:16px} .sp-filter .ob-selects{margin-top:0} .sp-filter .ob-chips{margin-top:0} .sp-filter #spDong{margin-top:0} .sp-results{padding-block:24px 40px} .sp-count{font-size:13px;color:var(--text-2);font-weight:600;margin-bottom:12px} .sp-loading,.sp-error{padding:24px;text-align:center;color:var(--text-2);font-size:14px} .sp-error{color:var(--coral-deep)} .sp-empty{padding:32px 20px;text-align:center;color:var(--text-2);font-size:14px;background:var(--surface);border-radius:var(--r-card);border:1px solid var(--border)} #spList{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)} /* 가볼 만한 곳 — 사진이 주인공이라 가로로 4장씩. 좁은 화면에서는 2장. */ /* 나들이 시·도 고르개 (2026-08-30 사용자 지시) — 사진 격자 위 한 줄. ⚠ #spList 는 grid 다. 이 줄이 칸 하나로 들어가면 사진 옆에 끼어 좁아진다 — 통째로 한 줄 차지(1/-1). ⚠ 라운딩 없음(사용자 확정 규칙). 17개를 접어 쌓지 않고 가로로 민다 — 쌓으면 세 줄이 되어 정작 사진이 첫 화면 밖으로 밀린다. */ .sp-sido{grid-column:1/-1;margin:0 0 2px} .sp-sido-r{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding-bottom:2px} .sp-sido-r::-webkit-scrollbar{display:none} .sp-sido-b{flex:none;padding:8px 13px;border:1px solid var(--border);background:var(--surface); border-radius:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700; letter-spacing:-.03em;color:var(--text-2);white-space:nowrap;-webkit-appearance:none;appearance:none} .sp-sido-b.is-on{background:#F16531;border-color:#F16531;color:#fff} @media(hover:hover){.sp-sido-b:not(.is-on):hover{border-color:#F6A98C;color:var(--text)}} /* 폰에서는 첫 칸이 화면 왼쪽 끝에서 시작하고 마지막 칸까지 밀 수 있어야 한다 */ @media(max-width:1024px){ .sp-sido-r{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)} } /* 나들이는 사진을 보러 오는 목록이라 폰에서는 한 줄에 한 장씩 크게 건다 (2026-08-30 사용자 지시: "모바일에서 한줄에 2개인데 한개만"). 375px 에서 두 칸으로 나누면 사진 한 장이 160px 남짓이라, 어디인지 알아볼 수 없는 썸네일 두 개가 나란히 설 뿐이다. 한 장으로 키우면 그 자리에 가고 싶어진다. ⚠ 태블릿(600px↑)부터 두 칸, 넓은 화면(900px↑)에서 네 칸으로 되돌린다 — 폭이 남는데 한 줄에 하나만 두면 사진만 거대해지고 스크롤이 끝없이 길어진다. */ #spList.is-place{gap:16px;grid-template-columns:minmax(0,1fr)} @media(min-width:600px){#spList.is-place{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:900px){#spList.is-place{grid-template-columns:repeat(4,minmax(0,1fr))}} #spList.is-place .sp-card{padding:0 0 14px;overflow:hidden;display:flex;flex-direction:column} #spList.is-place .sp-card-img{width:100%;margin:0 0 12px;aspect-ratio:4/3} #spList.is-place .sp-card-name-row, #spList.is-place .sp-card p, #spList.is-place .sp-card-bottom{padding-inline:16px} #spList.is-place .sp-card-bottom{margin-top:auto;padding-top:10px} /* 소개 줄 — 사진 격자 위에 서는 제목 */ .sp-lead{margin-bottom:18px} .sp-lead h2{font-size:clamp(20px,3.2vw,26px);letter-spacing:-.02em;color:var(--text)} .sp-lead p{margin-top:6px;font-size:13.5px;line-height:20px;color:var(--text-2)} .sp-card{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-card);padding:18px 20px;cursor:pointer;box-shadow:var(--shadow-card)} .sp-card:hover{border-color:var(--coral)} /* 병원 카드의 진료 안내·찾아오는 길 — 주소보다 한 단계 조용하게 */ .sp-card-note{margin-top:6px;font-size:12.5px;line-height:19px;color:var(--text-muted)} /* 나들이 카드 사진 — 카드 안쪽 여백을 넘어 좌우로 꽉 채운다 */ .sp-card-img{display:block;width:calc(100% + 40px);margin:-18px -20px 14px;aspect-ratio:16/9; border-radius:var(--r-card) var(--r-card) 0 0;background:var(--mist) center/cover no-repeat} .sp-card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px} .sp-card-region{font-size:12px;font-weight:700;color:var(--coral-deep);background:var(--peach); border-radius:var(--r-pill);padding:3px 10px} .sp-tag{font-size:11.5px;color:var(--text-2);background:var(--mist);border-radius:var(--r-pill);padding:3px 10px} .sp-card h3{font-size:16px;margin-top:2px} .sp-card p{font-size:13.5px;color:var(--text-2);margin-top:6px;line-height:1.6; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* 이름 오른쪽 배지 — 어린이집 정원처럼, 왼쪽 위 태그(sp-card-top)와는 다른 자리 */ .sp-card-name-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .sp-card-cap{flex:none;font-size:12px;font-weight:700;color:var(--coral-deep);background:var(--peach); border-radius:var(--r-pill);padding:3px 10px} .sp-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px} .sp-card-apply{font-size:12.5px;color:var(--text-muted);font-weight:600} /* 전화번호는 눌러서 바로 걸린다 (2026-08-30) — 앞에 수화기를 붙여 무엇을 누르는지 알린다. ⚠ 색은 쓰지 않는다 (2026-08-30 사용자 지시). 카드마다 번호가 하나씩 있어서 색을 넣으면 목록 전체에 점이 찍힌 것처럼 보인다. 회색 한 톤으로 두고, 굵기로만 '누를 수 있다'를 알린다. ⚠ 아이콘도 currentColor 라 이 색을 그대로 따라간다 — 따로 칠하지 말 것. */ .sp-card-tel{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700; color:var(--text-2);text-decoration:none;letter-spacing:-.01em} .sp-card-tel svg{flex:none;opacity:.75} /* 주소·시간 앞 아이콘 — 전화기와 같은 선 아이콘, 같은 회색 (2026-08-30 사용자 지시). ⚠ .sp-card p 는 두 줄에서 자르려고 -webkit-box 라, 아이콘은 인라인으로 흘려 넣는다. 블록으로 띄우면 줄 세는 방식이 달라져 주소가 한 줄만 보인다. */ .sp-card p .sp-ic{flex:none;opacity:.55;margin-right:5px;vertical-align:-2px} @media(hover:hover){ .sp-card-tel:hover{color:var(--text)} } .sp-card-tel:active{color:var(--text)} /* 병원·어린이집·나들이 결과 — 상세 모달이 없으니 카드 전체는 눌리는 느낌을 주지 않는다. ⚠ 다만 이름 줄만은 눌린다 (2026-08-29 사용자 지시) — 누르면 위 지도가 그 곳으로 간다. 그래서 이름에만 손가락 커서와 눌림 반응을 준다. 카드 전체를 눌리게 하면 '상세가 열리겠거니' 하고 누르는데 아무 일도 안 일어난다. */ .sp-card.is-plain{cursor:default} .sp-card-name{display:flex;align-items:baseline;gap:6px;min-width:0;flex:1; padding:0;border:0;background:none;text-align:left;font-family:inherit;cursor:pointer; -webkit-appearance:none;appearance:none} .sp-card-name h3{min-width:0;overflow:hidden;text-overflow:ellipsis} .sp-card-emo{flex:none;font-size:15px;line-height:1} @media(hover:hover){.sp-card-name:hover h3{color:#D8471B;text-decoration:underline;text-underline-offset:3px}} .sp-card-name:active h3{color:#D8471B} .sp-card.is-plain:hover{border-color:var(--border)} /* 지도 단추 — 홈의 병원·어린이집 카드와 같은 동그란 아이콘 버튼(.lp-hmap). ⚠ 지원 페이지에서는 가 아니라