:root {
  --ink:#111;
  --sub:#6f6a64;
  --line:#ece8e1;
  --bg:#f3f0ea;
  --card:#fff;
  --accent:#111;
  --kakao:#fee500;
}
*{box-sizing:border-box}
html,body{margin:0;background:#111;font-family:Pretendard,system-ui,sans-serif;color:var(--ink)}
.phone{max-width:390px;margin:0 auto;min-height:100dvh;background:var(--bg);padding-bottom:92px}
.top{
  position:sticky;top:0;z-index:5;
  background:rgba(243,240,234,.94);backdrop-filter:blur(12px);
  padding:14px 16px 10px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;justify-content:space-between}
.brand strong{font-size:20px;letter-spacing:-.03em}
.brand span{font-size:12px;color:var(--sub)}
.search{
  margin-top:12px;display:flex;align-items:center;gap:8px;
  background:#fff;border-radius:14px;padding:11px 14px;
  border:1px solid var(--line);font-size:14px;color:var(--sub);
  width:100%;cursor:text;
}
.search svg{flex:0 0 auto}
.search input{border:0;outline:0;background:transparent;font:inherit;width:100%;color:var(--ink)}
.chips{display:flex;gap:8px;overflow:auto;padding:12px 16px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{
  flex:0 0 auto;padding:8px 12px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;color:inherit;text-decoration:none;
}
.chips a.on{background:#111;color:#fff;border-color:#111}
.sec{padding:8px 16px 0}
.sec h2{margin:12px 0 10px;font-size:15px}
a.card{
  display:flex;gap:12px;align-items:center;
  background:var(--card);border-radius:16px;padding:10px;
  margin-bottom:10px;text-decoration:none;color:inherit;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
a.card img{width:72px;height:72px;border-radius:12px;object-fit:cover;background:#ddd}
a.card .meta{min-width:0}
a.card .cat{font-size:11px;color:var(--sub)}
a.card h3{margin:3px 0 0;font-size:16px;letter-spacing:-.02em}
a.card p{margin:4px 0 0;font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta{
  margin:18px 16px 0;padding:16px;border-radius:18px;background:#111;color:#f6f1ea;
}
.cta h2{margin:0;font-size:16px}
.cta p{margin:6px 0 12px;font-size:13px;opacity:.82}
.cta .row{display:flex;gap:8px}
.cta a{flex:1;text-align:center;padding:12px;border-radius:12px;font-size:13px;font-weight:700;text-decoration:none}
.cta a.k{background:var(--kakao);color:#111}
.cta a.t{background:#fff;color:#111}
.tab{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:390px;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  z-index:20;
}
.tab a{text-align:center;font-size:10px;color:#8a847c;text-decoration:none;font-weight:600}
.tab a.on{color:#111}
.tab svg{display:block;margin:0 auto 4px}
.hint{padding:10px 16px;font-size:11px;color:#9a948c}
.seo-h{margin:12px 0 0;font-size:17px;letter-spacing:-.03em;line-height:1.3}
.seo-p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--sub)}
.intro{margin:8px 16px 0;padding:14px 14px 12px;background:#fff;border-radius:16px;border:1px solid var(--line)}
.intro p{margin:0;font-size:13.5px;line-height:1.65;color:#3a3732}
.more{
  display:block;width:100%;margin:4px 0 8px;padding:12px;
  border-radius:14px;background:#fff;border:1px solid var(--line);
  font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;
}
.more[hidden]{display:none}
.empty{margin:8px 0 16px;padding:18px 8px;font-size:14px;color:var(--sub);text-align:center}

/* Guide article (sticky back + body + related) */
.top.bar{display:flex;align-items:center;gap:10px;padding:12px 14px}
.top.bar a.back{
  flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;
  color:inherit;text-decoration:none;border-radius:10px
}
.top.bar .ttl{
  flex:1;min-width:0;font-size:15px;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.top.bar > span{flex:0 0 auto}
.article{padding:14px 16px 4px}
.article .date{margin:0 0 8px;font-size:12px;color:var(--sub)}
.article h1{margin:0 0 14px;font-size:22px;letter-spacing:-.03em;line-height:1.3}
.article p{margin:0 0 12px;font-size:15px;line-height:1.7;color:#2c2a27}
.article h2{margin:18px 0 8px;font-size:17px;letter-spacing:-.02em}
.article .caveat{margin:0 0 10px;font-size:13px;color:var(--sub);line-height:1.55}
.article .pick{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:14px;margin:0 0 12px
}
.article .pick h2{margin:4px 0 8px}
.article .pick .cat{margin:0;font-size:11px;font-weight:700;color:var(--sub)}
.article .pick a.card{margin:8px 0 0}
.related{
  margin:18px 0 8px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:16px
}
.related h2{margin:0 0 10px;font-size:15px}
.related ul{margin:0;padding:0;list-style:none}
.related li{border-top:1px solid var(--line)}
.related li:first-child{border-top:0}
.related a{
  display:block;padding:10px 0;font-size:14px;font-weight:650;
  color:inherit;text-decoration:none;letter-spacing:-.02em
}
a.more-cat{
  display:block;margin:12px 16px 0;padding:14px;border-radius:14px;
  background:#fff;border:1px solid var(--line);text-align:center;
  font-weight:700;font-size:14px;text-decoration:none;color:inherit
}

.sec.related-guides{
  margin:10px 16px 0;padding:12px 14px 4px;
  background:#fff;border:1px solid var(--line);border-radius:16px
}
.sec.related-guides h2{margin:4px 0 8px;font-size:15px}
.sec.related-guides a.card{margin-bottom:8px;padding:10px 12px}
.sec.related-guides a.card:last-child{margin-bottom:6px}