/* Hannip SEO landing pages — shared style, matches main app palette */
:root{
  --paper:#fbf5e5; --card:#fffaf0; --line:#e5d9bd; --text:#2c241a; --muted:#8c7e68;
  --accent:#5e8aa8; --accent-deep:#3d6781; --warm:#c84a2c; --gold:#e8b94a; --green:#6c9a73;
  --radius:18px; --shadow:0 2px 10px rgba(60,40,20,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:"Noto Sans KR","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}
header.site{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; max-width:760px; margin:0 auto}
header.site a.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:800}
header.site a.brand img{width:34px; height:34px; border-radius:9px}
header.site a.cta{background:var(--accent); color:#fff; text-decoration:none; font-weight:700; padding:9px 16px; border-radius:999px; font-size:14px}
h1{font-size:32px; line-height:1.25; margin:18px 0 6px; letter-spacing:-.02em}
.lede{color:var(--muted); font-size:17px; margin:0 0 8px}
h2{font-size:23px; margin:38px 0 12px; letter-spacing:-.01em}
h3{font-size:18px; margin:26px 0 8px}
p{margin:12px 0}
a{color:var(--accent-deep)}
.updated{color:var(--muted); font-size:13px; margin:4px 0 0}
table{width:100%; border-collapse:collapse; margin:14px 0; background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); font-size:15px}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line)}
th{background:rgba(94,138,168,.1); font-weight:700; font-size:13px; color:var(--accent-deep); text-transform:uppercase; letter-spacing:.04em}
tr:last-child td{border-bottom:none}
.kr{font-size:20px; font-weight:700}
.rom{color:var(--accent-deep); font-style:italic}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin:14px 0}
.cell{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center; box-shadow:var(--shadow)}
.cell .big{font-size:30px; font-weight:800; display:block}
.cell .sub{font-size:13px; color:var(--muted)}
.tip{background:rgba(232,185,74,.14); border-left:4px solid var(--gold); padding:14px 16px; border-radius:12px; margin:18px 0}
.tip b{color:var(--warm)}
.appbox{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin:34px 0; text-align:center; box-shadow:var(--shadow)}
.appbox h3{margin:0 0 8px}
.appbox p{color:var(--muted); margin:0 0 16px}
.appbox a.btn{display:inline-block; background:var(--warm); color:#fff; text-decoration:none; font-weight:800; padding:13px 28px; border-radius:999px; font-size:16px}
details{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:4px 18px; margin:10px 0; box-shadow:var(--shadow)}
details summary{font-weight:700; cursor:pointer; padding:12px 0; font-size:16px}
details p{margin:0 0 14px}
nav.crumbs{font-size:13px; color:var(--muted); padding-top:14px}
nav.crumbs a{color:var(--muted)}
.related{display:flex; gap:12px; flex-wrap:wrap; margin:16px 0}
.related a{flex:1; min-width:220px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; text-decoration:none; color:var(--text); box-shadow:var(--shadow)}
.related a b{display:block; color:var(--accent-deep)}
.related a span{font-size:14px; color:var(--muted)}
footer.site{border-top:1px solid var(--line); margin-top:48px; padding:26px 20px; text-align:center; color:var(--muted); font-size:14px}
footer.site a{color:var(--muted)}
@media(max-width:560px){h1{font-size:26px} .kr{font-size:18px}}