/* ============================================================
   블로그 상위노출 도우미 — 공통 스타일 (그린 디자인 시스템)
   홈 · 상위노출 팁 · 소개 · 문의 · 개인정보처리방침에서 공유.
   도구 페이지(/rank, /omit)는 자체 인라인 스타일을 그대로 유지.
   ============================================================ */
:root{
  --bg:#F4F6F5; --surface:#FFFFFF; --surface-2:#EBEFED; --panel:#F9FBFA;
  --ink:#12171A; --muted:#586066; --faint:#889196;
  --line:#E0E5E3; --line-strong:#CAD1CE;
  --accent:#0E9E6A; --accent-ink:#0A7C52; --accent-soft:#DCF3E9;
  --warn:#D98324; --warn-soft:#FBEBD6; --danger:#D5493F; --danger-soft:#FADEDB;
  --gold:#C8912A; --gold-soft:#F7EDD4;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono",Consolas,monospace;
  --shadow:0 1px 2px rgba(15,30,25,.04), 0 14px 34px -14px rgba(15,30,25,.16);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0C1211; --surface:#141B19; --surface-2:#1B2422; --panel:#111917;
  --ink:#E9EEEC; --muted:#9BA5A1; --faint:#6C7772;
  --line:#232D2A; --line-strong:#33403C;
  --accent:#3ED996; --accent-ink:#5CE3A8; --accent-soft:#123026;
  --warn:#E8A24E; --warn-soft:#2A2113; --danger:#EE6A5F; --danger-soft:#2C1815;
  --gold:#E3B45A; --gold-soft:#2A2211;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -14px rgba(0,0,0,.6);
}}
:root[data-theme="light"]{
  --bg:#F4F6F5; --surface:#FFFFFF; --surface-2:#EBEFED; --panel:#F9FBFA;
  --ink:#12171A; --muted:#586066; --faint:#889196;
  --line:#E0E5E3; --line-strong:#CAD1CE;
  --accent:#0E9E6A; --accent-ink:#0A7C52; --accent-soft:#DCF3E9;
  --warn:#D98324; --warn-soft:#FBEBD6; --danger:#D5493F; --danger-soft:#FADEDB;
  --gold:#C8912A; --gold-soft:#F7EDD4;
  --shadow:0 1px 2px rgba(15,30,25,.04), 0 14px 34px -14px rgba(15,30,25,.16);
}
:root[data-theme="dark"]{
  --bg:#0C1211; --surface:#141B19; --surface-2:#1B2422; --panel:#111917;
  --ink:#E9EEEC; --muted:#9BA5A1; --faint:#6C7772;
  --line:#232D2A; --line-strong:#33403C;
  --accent:#3ED996; --accent-ink:#5CE3A8; --accent-soft:#123026;
  --warn:#E8A24E; --warn-soft:#2A2113; --danger:#EE6A5F; --danger-soft:#2C1815;
  --gold:#E3B45A; --gold-soft:#2A2211;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -14px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); line-height:1.65; letter-spacing:-.01em;
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:anywhere;}
.wrap{width:min(860px,92vw); margin-inline:auto}
h1,h2,h3,h4{margin:0; letter-spacing:-.025em; line-height:1.25; text-wrap:balance}
p{margin:0}
a{color:var(--accent-ink)}
.mono,code{font-family:var(--mono)}

/* ---------- 헤더 / 내비 ---------- */
header.site{border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:20}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:58px}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; color:var(--ink); text-decoration:none}
.brand .m{width:26px;height:26px;border-radius:7px;background:var(--accent);display:grid;place-items:center;color:#fff;font-size:.95rem}
.nav{display:flex; gap:4px}
.nav a{font-size:.9rem; color:var(--muted); padding:7px 11px; border-radius:8px; font-weight:600; text-decoration:none; white-space:nowrap}
.nav a.on{background:var(--accent-soft); color:var(--accent-ink)}
.nav a:hover{background:var(--surface-2)}
.theme-toggle{background:transparent;border:1px solid var(--line-strong);color:var(--muted);width:34px;height:34px;border-radius:8px;cursor:pointer;flex:0 0 auto}
.headright{display:flex;gap:10px;align-items:center}

/* ---------- 히어로 ---------- */
.hero{padding:44px 0 12px}
.hero .eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hero h1{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:840;margin-top:12px}
.hero p{color:var(--muted);margin-top:14px;font-size:1.05rem;max-width:60ch}

/* ---------- 카드 / 도구 소개 ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:24px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .12s,border-color .12s}
.card:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.card .ico{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);
  display:grid;place-items:center;font-size:1.25rem;margin-bottom:14px}
.card h3{font-size:1.15rem;font-weight:820}
.card p{color:var(--muted);font-size:.95rem;margin-top:8px;flex:1}
.card .go{margin-top:16px;font-weight:700;font-size:.9rem;color:var(--accent-ink)}

/* ---------- 일반 섹션 / 콘텐츠 ---------- */
main{padding-bottom:20px}
.section{margin-top:40px}
.section h2{font-size:1.35rem;font-weight:820}
.section > p{color:var(--muted);margin-top:10px}
.prose{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow);margin-top:20px}
.prose h2{font-size:1.3rem;font-weight:820;margin-top:30px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.08rem;font-weight:780;margin-top:22px}
.prose p{margin-top:12px;color:var(--ink)}
.prose ul,.prose ol{margin-top:12px;padding-left:22px;color:var(--ink)}
.prose li{margin:7px 0}
.prose a{color:var(--accent-ink);font-weight:600}
.prose .muted{color:var(--muted)}
.prose table{width:100%;border-collapse:collapse;margin-top:16px;font-size:.94rem}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.prose th{background:var(--surface-2);font-weight:700}

/* ---------- 준비중 배너 ---------- */
.soon{display:flex;gap:12px;align-items:flex-start;background:var(--warn-soft);
  border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:12px;padding:16px 18px;margin-top:22px}
.soon b{color:var(--warn)}
.soon .txt{font-size:.95rem;color:var(--ink)}

/* ---------- 리스트(가이드 글 목록) ---------- */
.list{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.litem{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.litem .t{font-weight:700}
.litem .t p{color:var(--muted);font-size:.88rem;font-weight:400;margin-top:3px}
.litem .tag{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:20px;background:var(--surface-2);color:var(--faint);white-space:nowrap}

/* ---------- 광고 자리 (애드센스 승인 후 교체) ---------- */
.adslot{margin:30px 0; border:1px dashed var(--line-strong); border-radius:12px; padding:22px; text-align:center;
  color:var(--faint); font-size:.82rem; background:var(--panel)}

/* ---------- 쿠팡 파트너스 자리 ---------- */
.coupang{margin:24px 0;border:1px dashed var(--gold);border-radius:12px;padding:18px 20px;background:var(--gold-soft)}
.coupang .lbl{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.coupang p{margin-top:6px;font-size:.9rem;color:var(--ink)}
.coupang .disc{margin-top:8px;font-size:.78rem;color:var(--muted)}

/* ---------- CTA 버튼 ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.98rem;cursor:pointer;padding:.85em 1.5em;
  border-radius:11px;border:1px solid transparent;font-family:inherit;text-decoration:none;transition:background .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{background:var(--surface-2);color:var(--ink)}
.btn-ghost:hover{background:var(--line)}
.ctarow{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* ---------- 문의 폼 ---------- */
.form{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.form label{font-weight:700;font-size:.9rem;display:block;margin-bottom:6px}
.form input,.form textarea{width:100%;padding:.8em .9em;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--bg);color:var(--ink);font-family:inherit;font-size:1rem}
.form input:focus,.form textarea:focus{outline:3px solid var(--accent-soft);border-color:var(--accent)}

/* ---------- 푸터 ---------- */
footer.site{padding:36px 0 60px; color:var(--faint); font-size:.85rem; border-top:1px solid var(--line); margin-top:44px}
footer.site .fnav{display:flex;flex-wrap:wrap;gap:6px 4px;margin-bottom:14px}
footer.site .fnav a{color:var(--muted);text-decoration:none;padding:5px 10px;border-radius:7px;font-weight:600;font-size:.86rem}
footer.site .fnav a:hover{background:var(--surface-2)}
footer.site .copy{color:var(--faint)}

@media (max-width:600px){
  header.site .wrap{flex-wrap:wrap; height:auto; padding:9px 0; row-gap:8px}
  .headright{width:100%; justify-content:space-between}
  .nav{flex:1 1 auto; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:2px}
  .nav a{padding:6px 9px; font-size:.83rem; white-space:nowrap}
  .cards{grid-template-columns:1fr}
  .hero{padding:30px 0 8px}
  .hero h1{font-size:1.6rem}
  .prose{padding:20px 16px}
  .section{margin-top:30px}
  .litem{flex-direction:column; align-items:flex-start; gap:9px}
  .litem .tag{align-self:flex-start}
  .ctarow .btn{width:100%; justify-content:center}
}