/* 오늘도 (ondlife.com) 공통 스타일 — 앱과 같은 색·타입 스케일 */
:root{
  --main:#3E7B6C; --main-2:#E7F1EE; --main-ink:#23574B; --accent:#EE8E12;
  --bg:#F6F7F6; --card:#fff; --line:#E6E9E8; --line-2:#F0F2F1;
  --ink:#1B1F1E; --ink-2:#4B5451; --muted:#8A9391;
  --r-m:12px; --r-l:16px; --sh:0 1px 2px rgba(20,30,28,.04),0 2px 8px rgba(20,30,28,.05);
  --fs-display:1.25rem; --fs-title:1.12rem; --fs-lg:1.04rem; --fs-base:.94rem; --fs-md:.86rem; --fs-sm:.8rem; --fs-xs:.74rem; --fs-2xs:.66rem;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:var(--bg);color:var(--ink);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}

/* 위 메뉴 */
.nav{position:sticky;top:0;z-index:10;background:rgba(246,247,246,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:8px;height:64px}
.logo{display:flex;align-items:center;gap:9px;font-size:var(--fs-title);font-weight:800}
.logo i{width:30px;height:30px;border-radius:9px;background:var(--main);color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:var(--fs-md);font-weight:800}
.nav .menu{margin-left:auto;display:flex;gap:4px}
.nav .menu a{padding:8px 12px;border-radius:99px;font-size:var(--fs-md);font-weight:700;color:var(--ink-2)}
.nav .menu a.on{background:var(--main-2);color:var(--main-ink)}

/* 공통 조각 */
h1{font-size:2.1rem;font-weight:800;letter-spacing:-.03em;line-height:1.28}
h1 span{color:var(--main)}
h2{font-size:1.32rem;font-weight:800;letter-spacing:-.02em}
h3{font-size:var(--fs-lg);font-weight:800}
.lead{margin-top:16px;font-size:var(--fs-base);color:var(--ink-2);font-weight:400}
.sec{margin-top:56px}
.sec > h2{margin:0 2px 16px}
.card{background:var(--card);border-radius:var(--r-l);box-shadow:var(--sh);padding:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;padding:0 20px;border-radius:var(--r-m);
  font-size:var(--fs-base);font-weight:700;background:var(--main);color:#fff}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.tag{font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.tag.on{color:var(--main-ink);background:var(--main-2)}
.tag.soon{color:var(--muted);background:var(--line-2)}

/* 맨 위 소개 + 자동으로 넘어가는 슬라이드 */
.hero{padding:64px 0 8px;text-align:center}
.hero .lead{max-width:520px;margin-left:auto;margin-right:auto}
.slide{margin-top:40px;position:relative;overflow:hidden}
.slide .track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.slide .item{flex:0 0 100%;display:flex;justify-content:center}
.slide .box{width:100%;max-width:560px;background:var(--card);border-radius:24px;box-shadow:var(--sh);padding:30px 26px;text-align:left;
  display:flex;align-items:center;gap:20px}
.slide .emo{width:84px;height:84px;border-radius:22px;background:var(--main-2);display:flex;align-items:center;justify-content:center;font-size:2.6rem;flex:none}
.slide .tx{min-width:0}
.slide .tx .tag{display:inline-block;margin-bottom:8px}
.slide .tx b{display:block;font-size:1.22rem;font-weight:800;letter-spacing:-.02em}
.slide .tx p{margin-top:6px;font-size:var(--fs-base);color:var(--ink-2);font-weight:400}
.dots{display:flex;justify-content:center;gap:7px;margin-top:20px}
.dots button{width:7px;height:7px;border-radius:50%;background:var(--line);border:0;padding:0;cursor:pointer;transition:width .25s,background .25s}
.dots button.on{width:22px;border-radius:99px;background:var(--main)}
@media (prefers-reduced-motion:reduce){ .slide .track{transition:none} }

/* 서비스 목록 */
.svc{display:flex;align-items:center;gap:14px}
.svc + .svc{margin-top:10px}
.svc .emo{width:52px;height:52px;border-radius:14px;background:var(--main-2);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex:none}
.svc .tx{flex:1;min-width:0}
.svc b{display:block;font-size:var(--fs-base);font-weight:700}
.svc small{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:400;margin-top:2px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini{background:var(--card);border-radius:var(--r-m);box-shadow:var(--sh);padding:16px;font-size:var(--fs-base);font-weight:700}
.mini span{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:400;margin-top:4px}

/* 사업자 정보·바닥 */
.biz{font-size:var(--fs-sm);color:var(--ink-2);font-weight:400;line-height:1.95}
.biz b{font-weight:700;color:var(--ink);display:inline-block;min-width:110px}
footer{margin-top:56px;padding:22px 0 60px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted);font-weight:400}
footer a{color:var(--main-ink);font-weight:600}

@media (max-width:640px){
  h1{font-size:1.62rem}
  h2{font-size:1.14rem}
  .hero{padding-top:40px}
  .slide .box{flex-direction:column;align-items:flex-start;gap:14px;padding:22px}
  .slide .emo{width:64px;height:64px;font-size:2rem}
  .grid2,.grid3{grid-template-columns:1fr}
  .biz b{display:block;min-width:0;margin-top:10px}
  .nav .menu a{padding:8px 10px}
}