/* 모두의요양사 홍보 페이지 — modooyoyang.kr. 시안 랩 lpskin 2번 "사진 한 장"(형 확정 2026-10-29, 포인트는 초록 → 파랑으로 바꿈) — 실제 요양 · 간병 사이트들(유니메오 · 케어네이션)처럼 화면 가득 사진 + 흰 글씨, 베이지 숫자 띠, 단계 사진, 폰 프레임 없이 캡처 한 장씩.
   예전 파랑 안의 모양은 lab/old.css(시안 랩 lpshot · skin3 이 쓴다). */
@font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: swap; src: url('/fonts/PretendardVariable.woff2') format('woff2-variations'), url('/fonts/PretendardVariable.woff2') format('woff2'); }
:root { --g: #3b7de0; --g-d: #2f6fd6; --beige: #f3f5f8; /* 띠 · 칸 바탕 — 베이지는 형 지시(10/29 "AI 가 너무 많이 쓰는 색")로 연회색으로 */ --text: #1f2328; --body: #2b2f36; --sub: #4e5968; --line: #e1e5ec; } /* 포인트 파랑 — 형 지시 2026-10-29 "초록색 말고 파란색으로" (앱 포인트색과 같음) */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif; color: var(--body); font-size: 17px; line-height: 1.65; background: #fff; word-break: keep-all; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* 첫 화면 — 사진 한 장 */
.hero { position: relative; min-height: 720px; background: #2a3340 url('/assets/photo-339620.jpg') center 40% / cover no-repeat; color: #fff; display: flex; flex-direction: column; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,25,.45), rgba(20,30,25,.25) 40%, rgba(20,30,25,.55)); }
.top { position: relative; z-index: 2; height: 76px; }
.top .wrap { display: flex; align-items: center; height: 100%; gap: 40px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; color: #fff; }
.logo img { border-radius: 9px; }
.menu { display: flex; gap: 32px; margin-left: auto; font-size: 16px; font-weight: 600; color: #fff; }
.menu a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero .wrap.body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 20px; padding-bottom: 90px; }
.hero h1 { font-size: 54px; line-height: 1.25; font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.hero p { margin-top: 18px; font-size: 20px; max-width: 560px; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.btns { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 26px; border-radius: 6px; font-size: 17px; font-weight: 700; }
.btn.g { background: var(--g); color: #fff; } .btn.g:hover { background: var(--g-d); }
.btn.w { border: 1.5px solid rgba(255,255,255,.9); color: #fff; } .btn.w:hover { background: rgba(255,255,255,.12); }

/* 숫자 띠 */
.nums { background: var(--beige); padding: 36px 0; }
.nums .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.num { padding: 10px 0 10px 22px; border-left: 1px solid #d6dbe3; } .num:first-child { border-left: 0; padding-left: 0; }
.num b { display: block; font-size: 32px; font-weight: 800; color: var(--g-d); line-height: 1.2; } .num span { font-size: 15px; color: var(--sub); }

/* 구역 */
.sec { padding: 96px 0; } .sec.tight { padding-top: 0; } .sec.alt { background: var(--beige); }
h2 { font-size: 36px; font-weight: 800; color: var(--text); line-height: 1.3; }
.sub { margin-top: 12px; font-size: 18px; color: var(--sub); max-width: 700px; }

/* 단계 셋 — 사진. 효과: 사진 위 번호 동그라미, 올리면 사진이 살짝 커지고 제목이 초록, 사이에 화살표 */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; }
.step { position: relative; }
.step .ph { position: relative; overflow: hidden; border-radius: 8px; }
.step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.step:hover img { transform: scale(1.05); }
.step .no { position: absolute; left: 12px; top: 12px; height: 30px; padding: 0 10px; border-radius: 4px; background: #fff; color: var(--text); font-style: normal; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.14); } /* 번호 — 파란 동그라미 대신 흰 꼬리표 "1단계" (형 지시 10/29 "넘버링도 좀 바꾸고") */
.step .no::after { content: '단계'; margin-left: 1px; }
.step > b { display: none; }
.step h3 { margin-top: 16px; }
.step h3 { transition: color .25s; } .step:hover h3 { color: var(--g); }
.step + .step::before { content: ''; position: absolute; left: -24px; top: 0; height: 0; padding-top: 37.5%; width: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24' fill='none' stroke='%23b8b1a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8-8 8'/%3E%3C/svg%3E") center / 16px 24px no-repeat; }
.step b { display: block; margin-top: 18px; font-size: 15px; color: var(--g); font-weight: 700; }
.step h3 { font-size: 22px; font-weight: 800; color: var(--text); margin-top: 4px; } .step p { margin-top: 8px; font-size: 16px; color: var(--sub); }

/* 두 개의 앱 — 프레임 없는 캡처 한 장씩 */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
.pane { background: var(--beige); border-radius: 12px; padding: 36px 36px 0; display: flex; gap: 24px; align-items: flex-end; overflow: hidden; min-height: 460px; }
.pane .txt { flex: 1; padding-bottom: 36px; min-width: 0; }
.pane b { font-size: 15px; color: var(--g); font-weight: 700; }
.pane h3 { font-size: 24px; font-weight: 800; color: var(--text); margin-top: 6px; line-height: 1.3; }
.pane ul { margin: 14px 0 18px; padding-left: 18px; font-size: 16px; color: var(--sub); } .pane li + li { margin-top: 4px; }
.pane .store { margin: 6px 6px 0 0; }
.pane img.shot { width: 200px; flex: none; border-radius: 12px 12px 0 0; border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -10px 30px rgba(0,0,0,.06); }

/* 보험 간병특약 — 가장 하고 싶은 말 하나만 진한 면 */
.cards { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 20px; margin-top: 40px; }
.card { border-radius: 12px; background: #fff; padding: 28px 26px 30px; min-height: 200px; }
.card h3 { font-size: 20px; font-weight: 800; color: var(--text); } .card p { margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--sub); }
.card.wide { background: var(--g-d); color: #fff; } .card.wide h3, .card.wide p { color: #fff; }

/* 스토어 버튼 */
.stores { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.store { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 12px; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: var(--text); font-size: 15px; font-weight: 700; white-space: nowrap; }
.store svg { width: 20px; height: 20px; flex: none; }
.store:hover { border-color: var(--g); }

/* 받기 */
.dl { background: var(--g-d); color: #fff; padding: 88px 0; }
.dl h2 { color: #fff; } .dl .sub { color: rgba(255,255,255,.82); }
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.app { background: #fff; color: var(--text); border-radius: 12px; padding: 26px 28px 28px; display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: start; }
.app-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.app-head img { border-radius: 12px; border: 1px solid var(--line); }
.app strong { font-size: 20px; font-weight: 800; display: block; } .app-head span { font-size: 15px; color: var(--sub); }
.app .stores { flex-direction: column; align-items: flex-start; margin-top: 10px; }
.qrs { display: flex; gap: 12px; margin-top: 10px; }
.qr { text-align: center; }
.qr img { width: 124px; height: 124px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; margin: 0 auto; }
.qr span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--sub); }
.tel { margin-top: 30px; font-size: 17px; color: rgba(255,255,255,.85); } .tel b { color: #fff; font-size: 26px; margin-left: 10px; }

/* 바닥 */
.foot { background: #1b1f27; color: #b9c0ca; padding: 40px 0 56px; font-size: 14px; }
.foot nav { display: flex; gap: 24px; flex-wrap: wrap; color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 18px; }
.foot p + p { margin-top: 4px; } .foot .copy { margin-top: 16px; color: #7e8ca0; }

/* 떠오르기 — JS 가 있을 때만 숨겨 두었다가(.js) 보이면 .in */
.js [data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js [data-rv].in { opacity: 1; transform: none; }
.js .steps .step:nth-child(2) { transition-delay: .15s; } .js .steps .step:nth-child(3) { transition-delay: .3s; }
.js .nums .num:nth-child(2) { transition-delay: .1s; } .js .nums .num:nth-child(3) { transition-delay: .2s; } .js .nums .num:nth-child(4) { transition-delay: .3s; }
.js .cards .card:nth-child(2) { transition-delay: .12s; } .js .cards .card:nth-child(3) { transition-delay: .24s; }
.js .two .pane:nth-child(2), .js .apps .app:nth-child(2) { transition-delay: .15s; }
/* 첫 화면 글씨 — 열리면서 차례로 */
.hero h1, .hero .wrap.body > p, .hero .btns { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero .wrap.body > p { animation-delay: .15s; } .hero .btns { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js [data-rv] { opacity: 1; transform: none; transition: none; } .hero h1, .hero .wrap.body > p, .hero .btns { animation: none; } .step img { transition: none; } }

@media (max-width: 1024px) {
  .hero h1 { font-size: 44px; }
  .cards { grid-template-columns: 1fr; }
  .pane img.shot { width: 170px; }
}
@media (max-width: 860px) {
  .menu { display: none; }
  .hero { min-height: 560px; }
  .hero .wrap.body { padding-bottom: 72px; }
  .hero h1 { font-size: 34px; } .hero p { font-size: 17px; }
  .btn { height: 50px; padding: 0 20px; font-size: 16px; }
  .nums .wrap { grid-template-columns: 1fr 1fr; gap: 14px; }
  .num:nth-child(3) { border-left: 0; padding-left: 0; }
  .num b { font-size: 26px; }
  .sec { padding: 64px 0; } .dl { padding: 64px 0; }
  h2 { font-size: 28px; } .sub { font-size: 17px; }
  .steps, .two, .apps { grid-template-columns: 1fr; }
  .step + .step::before { display: none; }
  .pane { min-height: 0; flex-direction: column; align-items: flex-start; padding: 28px 24px 0; }
  .pane .txt { padding-bottom: 24px; }
  .pane img.shot { align-self: center; width: 220px; }
  .app { grid-template-columns: 1fr; }
  .tel b { display: block; margin: 6px 0 0; }
}
@media (max-width: 420px) {
  .qrs { gap: 8px; } .qr img { width: 112px; height: 112px; }
}

/* 앱에서 할 수 있는 일 — 가비아 홈 "추천 서비스" 모양(2026-10-29 형 캡처): 왼쪽 타일 묶음(고른 것만 초록 면) + 아래 띠, 오른쪽 카드 넷이 바뀐다 */
.svc-body { display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 20px; margin-top: 40px; align-items: stretch; }
.svc-left { display: flex; flex-direction: column; gap: 20px; }
.svc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100px; padding: 0 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--sub); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.svc-tab .ic { width: 30px; height: 30px; fill: currentColor; }
.svc-tab:hover { border-color: var(--g); color: var(--g); }
.svc-tab.on { background: var(--g); border-color: var(--g); color: #fff; }
.svc-banner { position: relative; flex: 1; min-height: 160px; border-radius: 8px; overflow: hidden; background: #2a3a30; }
.svc-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 24px 26px 34px; color: #fff; background-size: cover; background-position: center; opacity: 0; transition: opacity .7s ease; }
.svc-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,30,25,.74), rgba(20,30,25,.3)); }
.svc-slide > * { position: relative; }
.svc-slide.on { opacity: 1; }
.svc-slide b { font-size: 19px; font-weight: 800; line-height: 1.35; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.svc-slide span { margin-top: 8px; font-size: 16px; font-weight: 600; }
.svc-dots { position: absolute; left: 26px; bottom: 16px; display: flex; gap: 6px; }
.svc-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background .3s; } .svc-dots i.on { background: #fff; }
.svc-panel { display: none; grid-template-columns: 1fr 1fr; gap: 20px; }
.svc-panel.on { display: grid; }
.svc-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 24px 24px 26px; min-height: 190px; transition: box-shadow .25s cubic-bezier(.2,0,0,1), transform .25s cubic-bezier(.2,0,0,1); }
.svc-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(25,31,40,.10); }
.svc-card small { display: block; font-size: 14px; font-weight: 700; color: var(--g); }
.svc-card strong { display: block; margin-top: 8px; font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--text); }
.svc-card p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--sub); }
.svc-panel.on .svc-card { animation: svcIn .45s cubic-bezier(.2,.7,.2,1) backwards; }
.svc-panel.on .svc-card:nth-child(2) { animation-delay: .06s; } .svc-panel.on .svc-card:nth-child(3) { animation-delay: .12s; } .svc-panel.on .svc-card:nth-child(4) { animation-delay: .18s; }
@keyframes svcIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 믿고 맡길 수 있는 이유 — 가비아 홈 "기술로 쌓아 올린 신뢰" 모양: 사진 카드 넷, 올린 것이 넓게 펴지고 설명이 떠오른다 */
.why-cards { display: flex; gap: 20px; height: 380px; margin-top: 40px; }
/* 넓이는 flex-grow 만 움직인다(1 ↔ 2.65) — flex-basis 를 움직이면 바뀌는 도중 grow 합이 1 밑으로 떨어져 카드가 폭 16px 로 주저앉는 순간이 생긴다(헤드리스 캡처에서 확인) */
.why-card { position: relative; flex: 1 1 0; min-width: 0; border-radius: 12px; overflow: hidden; background: #2a3a30; transition: flex-grow .35s cubic-bezier(.2,0,0,1); }
.why-card.on { flex-grow: 2.65; }
.why-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,25,20,.66) 0%, rgba(15,25,20,.18) 48%, rgba(15,25,20,.5) 100%); }
.why-card button { position: absolute; inset: 0; z-index: 2; background: none; border: 0; cursor: pointer; }
.why-card button:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: 12px; }
.why-txt { position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: 26px 26px; color: #fff; }
.why-card h3 { font-size: 22px; font-weight: 800; line-height: 1.3; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.why-card p { margin-top: 14px; font-size: 16px; line-height: 1.6; max-width: 420px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s cubic-bezier(.2,0,0,1), transform .25s cubic-bezier(.2,0,0,1), visibility 0s linear .25s; }
.why-card.on p { opacity: 1; visibility: visible; transform: none; transition-delay: .05s, .05s, 0s; }
@media (prefers-reduced-motion: reduce) { .why-card, .why-card p, .svc-slide, .svc-card { transition: none; } .svc-panel.on .svc-card { animation: none; } }

@media (max-width: 1024px) {
  .svc-body { grid-template-columns: 300px minmax(0, 1fr); }
  .svc-tabs { gap: 12px; } .svc-tab { height: 92px; font-size: 14px; }
  .svc-panel { grid-template-columns: 1fr; } .svc-card { min-height: 0; }
  .why-card.on { flex-grow: 2.2; }
}
@media (max-width: 860px) {
  .svc-body { grid-template-columns: 1fr; gap: 16px; }
  .svc-tabs { gap: 10px; } .svc-tab { height: 88px; }
  .svc-banner { display: none; }
  .why-cards { flex-direction: column; height: auto; }
  .why-card { flex: none; height: 120px; transition: height .35s cubic-bezier(.2,0,0,1); }
  .why-card.on { flex: none; height: 250px; }
  .why-card h3 { white-space: normal; font-size: 20px; } .why-card h3 br { display: none; }
  .why-txt { padding: 20px 20px; }
}