/* 운영 서비스 홍보 페이지 공용(svc/*.html 5장) — 색은 body 의 --a·--b(서비스마다 아이콘 색) */
@font-face { font-family: "Jua"; src: url("/fonts/jua-ks.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-650.woff2") format("woff2"); font-weight: 650; font-display: swap; }
:root {
  color-scheme: light;
  --cream: #FFF4E6; --milk: #F8E8D8; --peach: #F89878; --coral: #D86858; --butter: #F8B858; --cocoa: #583828;
  --soft: #8a6a58; --line: #f0dcc8; --card: #fffdfa; --blush: #fde3d6;
  --round: "Jua", system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --sans: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --en: "Fredoka", "Jua", system-ui, sans-serif;
  --shadow: 0 10px 30px #d8685818, 0 2px 6px #58382810;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--cocoa); font: 16px/1.75 var(--sans); word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; overflow-x: hidden; }
a { color: var(--coral); }
img, svg { display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }
.pic { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.pic.on { opacity: 1; }

.top { position: sticky; top: 0; z-index: 20; background: #fff4e6e0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #f3e0cc; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 60px; }
.top .logo img { height: 34px; width: auto; }
.back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; color: var(--cocoa); text-decoration: none; font: 16px/1 var(--round); }
.back:hover, .back:focus-visible { background: var(--milk); color: var(--coral); }
.back svg { width: 14px; height: 14px; }

/* 히어로 — 서비스 색 띠 위에 앱 아이콘 */
.hero { position: relative; text-align: center; padding: 44px 0 40px; background: radial-gradient(120% 90% at 50% 0%, var(--a), var(--cream) 78%); }
.hero .icon { width: 124px; height: 124px; margin: 0 auto; border-radius: 32px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 14px 30px #58382830; background: var(--b); }
.hero .en { margin: 18px 0 0; font: 650 14px/1 var(--en); letter-spacing: .12em; color: var(--soft); }
.hero h1 { margin: 6px 0 0; font: 400 clamp(36px, 9vw, 52px)/1.2 var(--round); }
.hero .tag { margin: 4px 0 0; font: 400 19px/1.4 var(--round); color: var(--coral); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.chips span { padding: 4px 12px; border-radius: 99px; background: #fff; box-shadow: var(--shadow); font: 14px/1.4 var(--round); color: var(--soft); }
.hero .lead { max-width: 30em; margin: 16px auto 0; color: #6b4d3d; }

section.sec { padding: 52px 0; }
section.sec.alt { background: #fffaf3; }
h2 { margin: 0 0 22px; text-align: center; font: 400 clamp(25px, 6vw, 32px)/1.3 var(--round); }

/* 화면 사진 — 폰 틀, 좁은 화면에선 옆으로 넘겨 보기 */
.shots { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; margin: 0 -4px; justify-content: safe center; -webkit-overflow-scrolling: touch; }
.shots figure { flex: 0 0 auto; width: min(250px, 68vw); margin: 0; scroll-snap-align: center; }
@media (min-width: 900px) { .shots { flex-wrap: wrap; overflow: visible; justify-content: center; } .shots figure { width: 228px; } }
.phone { aspect-ratio: 430 / 820; border-radius: 30px; overflow: hidden; border: 6px solid #3a2a22; background: #fff; box-shadow: 0 16px 34px #58382830; }
.shots figcaption { margin-top: 10px; text-align: center; font: 16px/1.4 var(--round); }
.note { margin: 8px 0 0; text-align: center; color: var(--soft); font-size: 13px; }

.feat { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 720px) { .feat { grid-template-columns: 1fr 1fr; } }
.feat li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: var(--card); border: 1px solid #f3e2d2; border-radius: 22px; padding: 18px; box-shadow: var(--shadow); }
.feat .n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--a); color: var(--cocoa); font: 650 18px/1 var(--en); }
.feat b { display: block; font: 400 19px/1.35 var(--round); }
.feat span:not(.n) { display: block; margin-top: 2px; color: var(--soft); font-size: 15px; line-height: 1.65; }

.end { text-align: center; }
.next { display: inline-grid; grid-template-columns: 56px auto 18px; gap: 14px; align-items: center; padding: 14px 20px 14px 14px; border-radius: 24px; background: #fff; border: 1px solid #f3e2d2; box-shadow: var(--shadow); text-decoration: none; color: var(--cocoa); text-align: left; }
.next:hover { border-color: var(--peach); }
.next .ni { width: 56px; height: 56px; border-radius: 16px; overflow: hidden; }
.next small { display: block; color: var(--soft); font-size: 13px; }
.next b { display: block; font: 400 20px/1.3 var(--round); }
.next svg { width: 18px; height: 18px; color: var(--coral); }

footer { margin-top: 24px; padding: 28px 0 34px; background: var(--cocoa); color: #c9a88f; font: 650 13px/1.6 var(--en); text-align: center; }
footer a { color: var(--butter); }

/* 자비스 — 남색 히어로라 글씨를 밝게 */
body.dark .hero { background: radial-gradient(130% 100% at 50% 0%, var(--a), #2a2350 60%, var(--cream) 100%); }
body.dark .hero .en, body.dark .hero h1 { color: #fff; }
body.dark .hero .tag { color: var(--butter); }
body.dark .hero .lead { color: #6b4d3d; }
body.dark .feat .n { background: #e8e2f8; }

.js .rise { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .js .rise { opacity: 1; transform: none; } }