/* wooricasino.eu.com — 공통 스타일 (외부 프레임워크 없음, 단일 파일) */
:root{
  --ink:#111827; --muted:#5b6270; --line:#e5e7eb; --soft:#f7f8fa;
  --navy:#3b1220; --navy-2:#5a1c2e; --gold:#c9922e; --gold-2:#f2d493;
  --max:820px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:#fff; line-height:1.75; word-break:keep-all;
  font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;
  font-size:16px;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:10;border:2px solid var(--gold)}

/* 헤더 — referencement-lyon.net 프랑스어 본체와 동일한 룩(24페이지 통일) */
:root{--fr-paper:#FBFAF7;--fr-body:#414743;--fr-accent:#2F6B4F;--fr-line:#DFDCD3;
  --fr-serif:Georgia,"Times New Roman",serif}
header.site{background:var(--fr-paper);border-bottom:1px solid var(--fr-line);margin-bottom:34px}
header.site .bar{max-width:760px;margin:0 auto;padding:18px 22px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline}
header.site .brand{font-family:var(--fr-serif);font-weight:600;color:var(--ink);text-decoration:none;font-size:1.02rem}
header.site nav{display:flex;flex-wrap:wrap;gap:14px;font-size:.88rem}
header.site nav a{text-decoration:none;color:var(--fr-body)}
header.site nav a:hover{color:var(--fr-accent)}

/* 본문 */
main{padding:22px 18px 56px}
.crumb{font-size:.8rem;color:var(--muted);margin:0 0 14px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{text-decoration:underline}
h1{font-size:1.62rem;line-height:1.35;margin:.1em 0 .7em;font-weight:800;letter-spacing:-.01em}
h2{font-size:1.24rem;margin:2em 0 .5em;padding-top:.5em;border-top:2px solid var(--line);font-weight:700}
h3{font-size:1.04rem;margin:1.5em 0 .35em;font-weight:700}
p{margin:.75em 0}
a{color:#1f5fbf}
ul,ol{padding-left:1.25em;margin:.75em 0}
li{margin:.35em 0}
strong{font-weight:700}
.lead{font-size:1.03rem;background:var(--soft);border-left:4px solid var(--gold);padding:15px 17px;border-radius:6px;margin:0 0 24px}
table{width:100%;border-collapse:collapse;margin:1.1em 0;font-size:.93rem}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
thead th{background:var(--soft);white-space:nowrap}
.scroll{overflow-x:auto}
blockquote{margin:1.1em 0;padding:12px 16px;background:var(--soft);border-left:3px solid var(--line);color:#333}
pre{background:var(--navy);color:#e7edf5;padding:14px 16px;border-radius:8px;overflow-x:auto;font-size:.86rem;line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
.qa{border-bottom:1px solid var(--line);padding:.2em 0 .6em}
.qa h3{margin:.9em 0 .2em}
.qa h3::before{content:"Q. ";color:var(--gold)}
.qa p{margin:.2em 0;color:#333}
.box{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:14px 17px;margin:1.3em 0}
.box h3{margin-top:.2em}
.warn{background:#fff7ed;border:1px solid #f3d19e;border-radius:8px;padding:14px 17px;margin:1.3em 0}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:1.2em 0;padding:0;list-style:none}
.cards li{margin:0}
.cards a{display:block;height:100%;padding:14px 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:inherit;background:#fff}
.cards a:hover{border-color:var(--gold);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.cards b{display:block;margin-bottom:4px;color:var(--navy)}
.cards span{font-size:.88rem;color:var(--muted);line-height:1.6}

/* 핵심 요약 — 페이지가 답하는 질문의 결론 */
/* .lead 와 나란히 놓이므로 배경·테두리를 반대로 줘서 역할이 구분되게 한다. */
.answer{background:var(--navy);border-radius:8px;padding:16px 20px;margin:0 0 20px}
.answer-label{margin:0 0 6px;font-size:.72rem;letter-spacing:.1em;color:var(--gold);
  text-transform:uppercase;font-weight:700}
.answer-body{margin:0;color:#f6ecef;font-size:.97rem}
.answer-body strong{color:var(--gold-2)}

/* 관련 문서 */
.related{margin:2.4em 0 0}
.related h2{font-size:1.05rem;margin-bottom:.4em}
.related ul{margin:0;padding-left:1.2em}

/* 제휴 광고 배너 */
/* 상단 제휴 배너 스트립 — 편집 콘텐츠와 눈으로 구분돼야 한다. 배경을 깔고 '광고' 라벨을 위에 둔다.
   img 에 width/height 를 명시해 두었으므로 로딩 중 레이아웃이 밀리지 않는다. */
.ads{background:var(--soft);border:1px solid var(--line);border-radius:10px;
  padding:.9rem 1rem 1rem;margin:0 0 1.6em}
.ads-label{margin:0 0 .45rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase}
.ads-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.ad-item{display:block;border-radius:8px;overflow:hidden;line-height:0;
  border:1px solid var(--line);background:#fff;transition:transform .15s,box-shadow .15s}
.ad-item:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.16);border-color:var(--gold)}
.ad-item img{width:100%;height:auto;display:block}
.ads-note{margin:.6rem 0 0;font-size:.76rem;line-height:1.6;color:var(--muted)}
.ads-note a{color:var(--muted);text-decoration:underline}

/* 모바일에서 3개를 세로로 쌓으면 광고만 500px 가까이 차지해 본문이 첫 화면 밖으로 밀린다.
   가로 스크롤로 바꾸면 셋 다 상단에 남으면서 높이는 배너 하나분으로 줄어든다. */
@media (max-width:760px){
  .ads{padding:.7rem .8rem .8rem}
  .ads-row{display:flex;gap:.55rem;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:.3rem}
  .ads-row::-webkit-scrollbar{height:3px}
  .ads-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .ad-item{flex:0 0 78%;scroll-snap-align:start}
}

/* CTA / 고지 */
.cta{margin:2.6em 0 1.2em;padding:18px;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;background:#fffdf6}
.cta p{margin:0 0 12px;font-size:.94rem;color:#333}
.btn{display:inline-block;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;
  padding:11px 20px;border-radius:8px;text-decoration:none;font-weight:700;font-size:.95rem}
.btn:hover{background:var(--navy-2)}
.note{margin:1.6em 0 0;padding-top:1em;border-top:1px dashed var(--line);color:var(--muted);font-size:.86rem}

/* 푸터 */
footer.site{background:var(--navy);color:#9fb0c4;padding:22px 0 30px;margin-top:40px;font-size:.86rem}
.fnav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px}
.fnav a{color:#cfd8e3;text-decoration:none}
.fnav a:hover{color:#fff;text-decoration:underline}
.copy{margin:0;color:#7d8ea3}

@media (max-width:560px){
  h1{font-size:1.36rem}
  h2{font-size:1.12rem}
  body{font-size:15.5px}
  header.site .bar{gap:10px}
}

/* ── autopublish: 자동 발행 글 그림·가이드 색인·최근 가이드 (patch_builder.py 가 추가) ── */
.guide-figure{margin:1.5rem 0}
.guide-figure img{display:block;width:100%;height:auto;border-radius:8px}
.guide-figure figcaption{font-size:.85rem;color:var(--muted,#6b7280);margin-top:.5rem}
.guide-list{list-style:none;margin:0;padding:0}
.guide-item{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.guide-thumb img{display:block;width:100%;height:auto;border-radius:6px}
.guide-meta h2{font-size:1.1rem;margin:0 0 .3em}
.guide-meta p{margin:0 0 .4em;font-size:.93rem;color:var(--muted)}
.guide-meta time,.recent time{font-size:.8rem;color:var(--muted)}
.recent{margin:2.4em 0 0}
.recent h2{font-size:1.05rem;margin-bottom:.4em}
.recent ul{margin:0;padding-left:1.2em}
.recent time{margin-left:.4em}
@media (max-width:560px){.guide-item{grid-template-columns:1fr}}

/* ── /ko-kor/ 단일 배너 3자리(상단·서두 후·중간) ─────────────────────────── */
.ad{background:var(--soft);border:1px solid var(--line);border-radius:10px;
  padding:.8rem 1rem .9rem;margin:1.2rem 0}
.ad-top{margin:0 auto 1.4rem;max-width:var(--w,860px)}
.ad-lead{margin:1.4rem 0 1.6rem}
.ad-mid{margin:1.8rem 0}
.ad-label{margin:0 0 .45rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.ad .ad-item{display:block;max-width:766px;margin:0 auto;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;line-height:0;transition:transform .15s,box-shadow .15s}
.ad .ad-item:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.16);border-color:var(--gold)}
.ad .ad-item img{width:100%;height:auto;display:block}
.ad-note{margin:.6rem 0 0;font-size:.76rem;line-height:1.6;color:var(--muted)}
.disclaimer{margin:2em 0 0;padding:.9em 1em;background:var(--soft);border-left:3px solid var(--gold);
  font-size:.86rem;color:#333;border-radius:0 6px 6px 0}
.doc-list{list-style:none;padding:0;margin:0 0 1.6em}
.doc-list li{padding:.7em 0;border-bottom:1px solid var(--line)}
.doc-list h3{margin:0 0 .2em;font-size:1.02rem}
.doc-list p{margin:0;font-size:.9rem;color:#444}
table.cmp{border-collapse:collapse;width:100%;margin:1em 0;font-size:.92rem}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:.5em .6em;text-align:left;vertical-align:top}
table.cmp th{background:var(--soft)}
.tbl{overflow-x:auto}

/* ── 하단 배너(푸터 아래, 전 페이지) ─────────────────────────────────────── */
.ad-bottom{max-width:1010px;margin:1.6rem auto 2rem;padding:.8rem 1rem .9rem}
.ad-bottom .ad-item{max-width:970px}