/* 따뜻한 인사 — 공식 사이트. 앱 색(살구 #FFE3CF · 코랄 #E2532E · 밤색 #A53A1D) 기준, 어르신이 읽기 쉬운 큰 글씨 */
:root {
  --bg: #FFFDF9;
  --band: #FFE3CF;
  --card: #FFFFFF;
  --ink: #3A2A22;
  --muted: #6E5A4F;
  --coral: #E2532E;
  --deep: #A53A1D;
  --line: #F0DCCB;
  --soft: #FFF4EB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E1612;
    --band: #3A2419;
    --card: #2A1E18;
    --ink: #FBEFE6;
    --muted: #D7C2B4;
    --coral: #FF8A66;
    --deep: #FFB592;
    --line: #4A3428;
    --soft: #33241C;
  }
}
:root[data-theme="dark"] {
  --bg: #1E1612; --band: #3A2419; --card: #2A1E18; --ink: #FBEFE6; --muted: #D7C2B4;
  --coral: #FF8A66; --deep: #FFB592; --line: #4A3428; --soft: #33241C;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: 20px;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: var(--coral); text-underline-offset: 3px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* 머리 */
.top { border-bottom: 1px solid var(--line); background: var(--bg); }
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.top a.home { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 21px; }
.top img { width: 36px; height: 36px; border-radius: 9px; }
.top nav { margin-left: auto; display: flex; gap: 14px; font-size: 17px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--coral); }

/* 첫 화면 */
.hero { background: linear-gradient(180deg, var(--band), var(--bg)); padding: 48px 0 40px; text-align: center; }
.hero img.icon { width: 128px; height: 128px; border-radius: 30px; box-shadow: 0 10px 30px rgba(165, 58, 29, .22); }
.hero h1 { font-size: 40px; line-height: 1.3; margin: 22px 0 8px; color: var(--deep); letter-spacing: -0.5px; }
.hero p.lead { font-size: 22px; margin: 0 auto; max-width: 30em; color: var(--ink); }
.soon {
  display: inline-block; margin-top: 26px; padding: 16px 30px; border-radius: 999px;
  background: var(--coral); color: #fff; font-weight: 800; font-size: 21px;
}
.soon small { display: block; font-weight: 500; font-size: 15px; opacity: .92; }

/* 기능 */
section.block { padding: 36px 0; }
section.block h2 { font-size: 28px; margin: 0 0 18px; color: var(--deep); }
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.features li {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px;
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start;
}
.features .em { font-size: 34px; line-height: 52px; text-align: center; background: var(--soft); border-radius: 14px; }
.features b { display: block; font-size: 21px; }
.features span { color: var(--muted); font-size: 18px; }
.note { background: var(--soft); border-radius: 20px; padding: 20px 22px; }
.note p { margin: 0 0 8px; }
.note p:last-child { margin: 0; }

/* 문서(방침·약관) */
.doc { padding: 28px 0 44px; }
.doc h1 { font-size: 32px; line-height: 1.35; color: var(--deep); margin: 8px 0 6px; }
.doc .eff { color: var(--muted); font-size: 18px; margin: 0 0 22px; }
.doc h2 { font-size: 24px; margin: 34px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.doc h3 { font-size: 21px; margin: 24px 0 8px; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 6px 0; }
.doc p.summary { background: var(--soft); border-radius: 18px; padding: 18px 20px; }
.doc p.clause { margin: 18px 0 6px; }
.table { overflow-x: auto; margin: 12px 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: 17px; line-height: 1.6; }
.doc th, .doc td { border: 1px solid var(--line); padding: 10px 12px; vertical-align: top; text-align: left; }
.doc th { background: var(--soft); }
code { font-size: .9em; background: var(--soft); padding: 1px 5px; border-radius: 6px; }

/* 꼬리 */
footer { border-top: 1px solid var(--line); padding: 26px 0 40px; color: var(--muted); font-size: 16px; }
footer a { color: var(--muted); }
footer p { margin: 4px 0; }

@media (max-width: 480px) {
  body { font-size: 19px; }
  .hero h1 { font-size: 34px; }
  .top nav { gap: 10px; font-size: 16px; }
  .top a.home span { display: none; }
  .doc table { font-size: 16px; }
}