/* woorii 서브도메인 공통 스타일. 사이트별 색은 --accent 한 줄만 빌더가 바꾼다. */
:root{
  --accent:#d4af37;
  --ink:#16202c; --ink-2:#41505f; --ink-3:#6b7a89;
  --bg:#ffffff; --bg-2:#f5f7f9; --line:#dde3e9;
  --navy:#101d2e; --navy-2:#1b3350;
  --wrap:min(1080px,100% - 2.5rem);
  --radius:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.75 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",
       "Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  word-break:keep-all; overflow-wrap:anywhere;
}
img{max-width:100%;height:auto}
a{color:#0b5ea8;text-underline-offset:2px}
a:hover{color:#08477e}

.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:10;background:#fff;padding:.6rem 1rem;border-radius:6px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ── 헤더 ─────────────────────────────────────────── */
header.site{background:var(--navy);color:#fff}
header.site .bar{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;
  padding:.9rem 0;justify-content:space-between}
.logo{color:#fff;font-weight:800;font-size:1.15rem;text-decoration:none;letter-spacing:-.02em}
.logo b{color:var(--accent)}
.menu{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem}
.menu a{color:#cfd9e4;text-decoration:none;font-size:.94rem;padding:.2rem 0;
  border-bottom:2px solid transparent}
.menu a:hover{color:#fff}
.menu a.on{color:#fff;border-bottom-color:var(--accent)}

/* ── 본문 ─────────────────────────────────────────── */
main{padding:1.6rem 0 3rem}
.crumb{font-size:.85rem;color:var(--ink-3);margin-bottom:1rem}
.crumb a{color:var(--ink-3)}
h1{font-size:clamp(1.6rem,4.4vw,2.3rem);line-height:1.3;letter-spacing:-.02em;margin:.2rem 0 1rem}
h2{font-size:clamp(1.25rem,3vw,1.55rem);line-height:1.35;margin:2.4rem 0 .8rem;
  padding-top:.9rem;border-top:1px solid var(--line)}
h3{font-size:1.08rem;margin:1.5rem 0 .5rem}
p{margin:0 0 1rem}
.lead{font-size:1.06rem;color:var(--ink-2)}
ul,ol{padding-left:1.3rem;margin:0 0 1.1rem}
li{margin:.35rem 0}
strong{font-weight:700}

/* AEO 핵심 요약 — .lead 와 구분되도록 배경을 반전한 네이비 카드로 둔다 */
.answer{background:var(--navy);color:#eaf0f6;border-radius:var(--radius);
  padding:1.1rem 1.25rem;margin:0 0 1.6rem}
.answer-label{margin:0 0 .35rem;font-size:.76rem;font-weight:700;letter-spacing:.08em;
  color:var(--accent);text-transform:uppercase}
.answer-body{margin:0;font-size:1.02rem;line-height:1.7}

table{width:100%;border-collapse:collapse;margin:0 0 1.3rem;font-size:.95rem;display:block;
  overflow-x:auto}
th,td{border:1px solid var(--line);padding:.6rem .7rem;text-align:left;vertical-align:top}
th{background:var(--bg-2);font-weight:700;white-space:nowrap}

blockquote{margin:0 0 1.2rem;padding:.8rem 1rem;background:var(--bg-2);
  border-left:4px solid var(--accent);border-radius:0 6px 6px 0}
blockquote p:last-child{margin:0}

.howto{counter-reset:step;list-style:none;padding-left:0}
.howto>li{counter-increment:step;position:relative;padding-left:2.4rem;margin:.7rem 0}
.howto>li::before{content:counter(step);position:absolute;left:0;top:.1rem;
  width:1.7rem;height:1.7rem;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:.85rem;font-weight:700}

.qa{border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.15rem;margin:0 0 .8rem}
.qa h3{margin:0 0 .45rem;font-size:1rem;color:var(--navy-2)}
.qa h3::before{content:"Q. ";color:var(--accent);font-weight:800}
.qa p{margin:0;color:var(--ink-2)}

.related{margin:2.4rem 0 0;padding:1.1rem 1.25rem;background:var(--bg-2);border-radius:var(--radius)}
.related h2{margin:0 0 .5rem;border:0;padding:0;font-size:1.02rem}
.related ul{margin:0;padding-left:1.1rem}

.cta{margin:2.2rem 0 0;padding:1.1rem 1.25rem;border:1px solid var(--line);
  border-radius:var(--radius);background:#fffdf5}
.cta p{margin:0;font-size:.95rem;color:var(--ink-2)}
.note{margin:1.2rem 0 0;font-size:.85rem;color:var(--ink-3);line-height:1.65}

/* ── 푸터 ─────────────────────────────────────────── */
footer.site{background:var(--navy);color:#aab8c6;margin-top:2.5rem;padding:1.5rem 0}
.fnav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-bottom:.7rem}
.fnav a{color:#cfd9e4;text-decoration:none;font-size:.9rem}
.fnav a:hover{color:#fff;text-decoration:underline}
.copy{margin:0;font-size:.82rem;color:#8a99a8}

@media (max-width:600px){
  body{font-size:16px}
  header.site .bar{flex-direction:column;align-items:flex-start;gap:.5rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}