/* 짝꿍 수달 소개 사이트 공통 스타일 */
:root{
  --bg:#eef6f7; --card:#fff; --ink:#33474d; --soft:#63757a;
  --line:#dfeaec; --accent:#3f7681; --accentSoft:#e7f2f4; --pink:#ff7c96;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);line-height:1.8;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:17px;
}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}

header.site{background:linear-gradient(#d6eef2,#bfdfe6);padding:18px 0 0}
nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  max-width:820px;margin:0 auto;padding:0 20px 16px}
nav .brand{font-weight:800;font-size:19px;color:#2f535e;text-decoration:none;margin-right:auto}
nav a{color:#3a6772;text-decoration:none;font-weight:600}
nav a:hover{text-decoration:underline}

.hero{text-align:center;padding:26px 20px 40px;
  background:linear-gradient(#bfdfe6,#a6d2db)}
.hero .otters{font-size:64px;line-height:1.1}
.hero h1{font-size:33px;margin:10px 0 6px;color:#284a54}
.hero p.lead{font-size:18px;color:#3c626b;margin:0 auto;max-width:620px}
.btn{display:inline-block;margin-top:22px;background:#3f7681;color:#fff;
  text-decoration:none;font-weight:800;font-size:19px;
  padding:15px 38px;border-radius:999px;box-shadow:0 6px 16px rgba(45,80,90,.22)}
.btn:hover{background:#35646e}
.btn.ghost{background:#fff;color:#3f7681;box-shadow:none;border:2px solid #cfe3e7}

main{padding:34px 0 10px}
section{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:24px 22px;margin:0 0 20px;box-shadow:0 4px 14px rgba(60,90,96,.04)}
h2{font-size:23px;color:var(--accent);margin:4px 0 12px}
h3{font-size:19px;margin:22px 0 6px}
p{margin:10px 0}
ul,ol{margin:10px 0;padding-left:22px}
li{margin:7px 0}
a{color:var(--accent)}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{position:relative;padding:12px 0 12px 52px;border-bottom:1px dashed var(--line)}
.steps li:last-child{border-bottom:0}
.steps li::before{counter-increment:s;content:counter(s);
  position:absolute;left:0;top:12px;width:34px;height:34px;border-radius:50%;
  background:var(--accentSoft);color:var(--accent);font-weight:800;
  display:flex;align-items:center;justify-content:center}
.note{background:var(--accentSoft);border-radius:14px;padding:14px 16px;margin:14px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.grid .item{background:#f8fcfc;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.grid .item b{color:var(--accent)}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:16px}
th,td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
th{background:var(--accentSoft)}
.center{text-align:center}

footer.site{padding:26px 20px 60px;text-align:center;color:var(--soft);font-size:15px}
footer.site a{color:var(--soft)}

@media (max-width:520px){
  body{font-size:16px}
  .hero h1{font-size:27px}
  .hero .otters{font-size:52px}
}
@media (prefers-color-scheme:dark){
  :root{--bg:#151b1c;--card:#1d2526;--ink:#dde6e7;--soft:#98a4a6;
    --line:#2b3739;--accent:#8cc3ce;--accentSoft:#222e31}
  header.site{background:linear-gradient(#22383e,#1c2f34)}
  .hero{background:linear-gradient(#1c2f34,#182a2f)}
  .hero h1{color:#cfe6ea}.hero p.lead{color:#a9c2c7}
  .btn{background:#3f7681}
  .btn.ghost{background:#1d2526;border-color:#2b3739}
  .grid .item{background:#1a2224}
  section{box-shadow:none}
}