/* 황제상품권 — em- 네임스페이스 */
:root{
  --em-deep:#3B1420; --em-main:#8C2038; --em-soft:#E3C2CB;
  --em-bg:#FBF7F5;   --em-gold:#A8792C; --em-ink:#241016;
  --em-mute:#6B5057; --em-line:#EADDE0; --em-card:#FFFFFF;
  --em-w:920px; --em-r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--em-bg);color:var(--em-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",
  "Malgun Gothic","Noto Sans KR",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.78;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
strong{font-weight:700;color:var(--em-deep)}
.em-inner{width:100%;max-width:var(--em-w);margin:0 auto;padding:0 16px}

/* ── 헤더 ─────────────────────────────── */
.em-top{position:sticky;top:0;z-index:40;background:var(--em-deep);color:#fff}
.em-top__row{display:flex;align-items:center;gap:14px;height:62px}
.em-brand{flex:0 0 auto;display:flex;align-items:center}
.em-brand img{width:150px;height:auto}
.em-nav{flex:1 1 auto;min-width:0;display:flex;gap:4px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.em-nav::-webkit-scrollbar{display:none}
.em-nav__a{flex:0 0 auto;padding:7px 11px;border-radius:999px;font-size:14px;
  color:#F0DDE2;white-space:nowrap}
.em-nav__a:hover{background:rgba(255,255,255,.12);color:#fff}
.em-nav__a.is-on{background:rgba(255,255,255,.16);color:#fff;font-weight:700}
.em-top__cta{flex:0 0 auto;background:var(--em-main);color:#fff;padding:9px 15px;
  border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap}
.em-top__cta:hover{background:#A32944}

/* ── 현재 위치 ────────────────────────── */
.em-crumb{background:#fff;border-bottom:1px solid var(--em-line);font-size:13.5px;color:var(--em-mute)}
.em-crumb .em-inner{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding-top:9px;padding-bottom:9px;max-width:var(--em-w)}
.em-crumb a{color:var(--em-main)}
.em-crumb a:hover{text-decoration:underline}
.em-crumb a::after{content:"›";margin-left:8px;color:var(--em-line)}
.em-crumb span{color:var(--em-ink)}

/* ── 메인 히어로 ──────────────────────── */
.em-hero{background:linear-gradient(168deg,#FFFFFF 0%,#FBEFF2 100%);
  border-bottom:1px solid var(--em-line)}
.em-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;
  align-items:center;padding:40px 16px 44px}
.em-hero__tag{display:inline-block;background:var(--em-soft);color:var(--em-deep);
  font-size:13px;font-weight:700;padding:5px 13px;border-radius:999px;margin-bottom:14px}
.em-hero h1{margin:0 0 12px;font-size:33px;line-height:1.32;font-weight:800;
  color:var(--em-deep);letter-spacing:-.5px;word-break:keep-all}
.em-hero__sub{margin:0;color:var(--em-mute);font-size:16px;word-break:keep-all}
.em-hero__art img{border-radius:var(--em-r);box-shadow:0 14px 34px rgba(59,20,32,.15)}

/* ── 버튼 ─────────────────────────────── */
.em-cta__row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.em-btn{display:inline-block;padding:12px 21px;border-radius:999px;
  font-weight:700;font-size:15.5px;border:2px solid transparent;cursor:pointer}
.em-btn--fill{background:var(--em-main);color:#fff;border-color:var(--em-main)}
.em-btn--fill:hover{background:#A32944;border-color:#A32944}
.em-btn--line{border-color:var(--em-gold);color:#8A6122;background:#fff}
.em-btn--line:hover{background:var(--em-gold);color:#fff;border-color:var(--em-gold)}

/* ── 신뢰 지표 ────────────────────────── */
.em-facts{background:#fff;border-bottom:1px solid var(--em-line);padding:22px 0}
.em-fact{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:12px}
.em-fact li{background:var(--em-bg);border:1px solid var(--em-line);
  border-radius:var(--em-r);padding:16px 12px;text-align:center}
.em-fact b{display:block;font-size:21px;color:var(--em-gold);font-weight:800;
  letter-spacing:-.3px;line-height:1.3}
.em-fact em{display:block;font-style:normal;font-size:13.5px;color:var(--em-mute);margin-top:4px}

/* ── 문서 머리 ────────────────────────── */
.em-doc{padding-bottom:10px}
.em-lead{padding:32px 0 6px}
.em-lead__tag{display:inline-block;background:var(--em-soft);color:var(--em-deep);
  font-size:13px;font-weight:700;padding:5px 13px;border-radius:999px;margin-bottom:13px}
.em-lead h1{margin:0 0 14px;font-size:29px;line-height:1.34;font-weight:800;
  color:var(--em-deep);letter-spacing:-.5px;word-break:keep-all}
.em-lead__p p{margin:0 0 11px;color:#4A353B;font-size:16.5px;word-break:keep-all}

/* ── 이미지 ───────────────────────────── */
.em-fig{margin:20px 0 4px}
.em-fig img{width:100%;max-width:420px;margin:0 auto;border-radius:var(--em-r)}

/* ── 목차 ─────────────────────────────── */
.em-toc{background:#fff;border:1px solid var(--em-line);border-radius:var(--em-r);
  padding:16px 20px;margin:22px 0 6px}
.em-toc b{display:block;color:var(--em-deep);font-size:14.5px;margin-bottom:7px}
.em-toc ol{margin:0;padding-left:20px;color:var(--em-main)}
.em-toc li{margin:3px 0;font-size:15px}
.em-toc a:hover{text-decoration:underline}

/* ── 본문 블록 ────────────────────────── */
.em-block{padding:28px 0 4px}
.em-block h2{margin:0 0 14px;font-size:22.5px;font-weight:800;color:var(--em-deep);
  letter-spacing:-.4px;line-height:1.4;word-break:keep-all;
  padding-left:13px;border-left:4px solid var(--em-main)}
.em-block p{margin:0 0 13px;color:#3B2A2F;word-break:keep-all}
.em-ul,.em-ol{margin:0 0 15px;padding-left:20px;color:#3B2A2F}
.em-ul li,.em-ol li{margin:6px 0;word-break:keep-all}
.em-ul li::marker{color:var(--em-main)}
.em-ol li::marker{color:var(--em-main);font-weight:700}

/* ── 정의 목록 ────────────────────────── */
.em-dl{margin:0 0 16px;padding:0;background:#fff;border:1px solid var(--em-line);
  border-radius:var(--em-r);overflow:hidden}
.em-dl dt{padding:13px 18px 4px;font-weight:700;color:var(--em-deep);font-size:15.5px}
.em-dl dd{margin:0;padding:0 18px 13px;color:#4A353B;font-size:15.5px;
  border-bottom:1px solid var(--em-line);word-break:keep-all}
.em-dl dd:last-child{border-bottom:0}

/* ── 안내·주의 ────────────────────────── */
.em-note,.em-warn{border-radius:var(--em-r);padding:14px 18px;margin:0 0 16px}
.em-note{background:#FDF3F5;border-left:4px solid var(--em-main)}
.em-warn{background:#FFF7EC;border-left:4px solid var(--em-gold)}
.em-note p,.em-warn p{margin:0;font-size:15.5px;color:#3B2A2F}

/* ── 단계 ─────────────────────────────── */
.em-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.em-steps li{background:#fff;border:1px solid var(--em-line);border-radius:var(--em-r);
  padding:15px 18px 15px 56px;position:relative}
.em-steps__n{position:absolute;left:16px;top:15px;width:27px;height:27px;border-radius:50%;
  background:var(--em-main);color:#fff;font-size:13.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.em-steps b{display:block;color:var(--em-deep);font-size:16px;margin-bottom:2px}
.em-steps em{font-style:normal;color:var(--em-mute);font-size:15px;word-break:keep-all}

/* ── 표 ───────────────────────────────── */
.em-tw{overflow-x:auto;margin:0 0 18px;-webkit-overflow-scrolling:touch}
.em-tb{width:100%;min-width:420px;border-collapse:collapse;font-size:15px;background:#fff}
.em-tb th,.em-tb td{border:1px solid var(--em-line);padding:10px 13px;
  text-align:left;vertical-align:top;word-break:keep-all}
.em-tb th{background:#F7EBEE;color:var(--em-deep);font-weight:700;white-space:nowrap}
.em-tb tbody tr:nth-child(even) td{background:#FDFAFB}

/* ── 카드 ─────────────────────────────── */
.em-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.em-card{display:block;background:#fff;border:1px solid var(--em-line);
  border-radius:var(--em-r);padding:16px 16px 17px}
.em-card:hover{border-color:var(--em-main);box-shadow:0 6px 18px rgba(140,32,56,.09)}
.em-card__n{display:block;font-size:12px;color:var(--em-gold);font-weight:800;
  letter-spacing:.6px;margin-bottom:4px}
.em-card b{display:block;font-size:15.5px;color:var(--em-deep);margin-bottom:4px}
.em-card em{display:block;font-style:normal;font-size:14px;color:var(--em-mute);line-height:1.6}

/* ── 확인 상자 ────────────────────────── */
.em-sum{background:#fff;border:1px solid var(--em-line);border-top:4px solid var(--em-gold);
  border-radius:var(--em-r);padding:17px 20px;margin:24px 0 4px}
.em-sum b{display:block;color:var(--em-deep);margin-bottom:8px;font-size:16px}
.em-sum ul{margin:0;padding-left:20px;color:#4A353B;font-size:15.5px}
.em-sum li{margin:5px 0;word-break:keep-all}
.em-sum li::marker{color:var(--em-gold)}

/* ── 질문 ─────────────────────────────── */
.em-ask{padding:28px 0 4px}
.em-ask h2{margin:0 0 14px;font-size:22.5px;font-weight:800;color:var(--em-deep);
  letter-spacing:-.4px;padding-left:13px;border-left:4px solid var(--em-main)}
.em-ask__n{font-size:14px;color:var(--em-gold);font-weight:700;margin-left:4px}
.em-ask__i{background:#fff;border:1px solid var(--em-line);border-radius:var(--em-r);
  margin:0 0 8px;overflow:hidden}
.em-ask__i summary{cursor:pointer;padding:14px 44px 14px 18px;font-weight:700;
  color:var(--em-deep);font-size:15.5px;position:relative;list-style:none;word-break:keep-all}
.em-ask__i summary::-webkit-details-marker{display:none}
.em-ask__i summary::after{content:"+";position:absolute;right:18px;top:12px;
  font-size:19px;color:var(--em-main);font-weight:700}
.em-ask__i[open] summary::after{content:"−"}
.em-ask__i[open] summary{border-bottom:1px solid var(--em-line)}
.em-ask__i>div{padding:13px 18px 15px}
.em-ask__i p{margin:0;color:#4A353B;font-size:15.5px;word-break:keep-all}

/* ── 칩 ───────────────────────────────── */
.em-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.em-chips a{background:#fff;border:1px solid var(--em-line);border-radius:999px;
  padding:7px 14px;font-size:14px;color:var(--em-deep)}
.em-chips a:hover{border-color:var(--em-main);color:var(--em-main)}

/* ── CTA ──────────────────────────────── */
.em-cta{background:#fff;border:1px solid var(--em-line);border-radius:var(--em-r);
  padding:26px 22px;margin:30px 0 8px;text-align:center}
.em-cta h2{margin:0 0 8px;font-size:21px;font-weight:800;color:var(--em-deep)}
.em-cta p{margin:0;color:var(--em-mute);font-size:15.5px;word-break:keep-all}
.em-cta .em-cta__row{justify-content:center}

.em-more{margin:16px 0 0;font-size:15px}
.em-more a{color:var(--em-main);font-weight:700}
.em-more a:hover{text-decoration:underline}

/* ── 우측 세로 버튼 (PC) ──────────────── */
.em-side{position:fixed;right:18px;bottom:22px;z-index:35;display:flex;flex-direction:column;gap:9px}
.em-side__b{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:700;color:#fff;border:0;
  cursor:pointer;box-shadow:0 5px 14px rgba(59,20,32,.24);font-family:inherit}
.em-side__b--call{background:var(--em-main)}
.em-side__b--sms{background:var(--em-deep)}
.em-side__b--kko{background:#FAE100;color:#3B1420}
.em-side__b--up{background:#fff;color:var(--em-main);border:1px solid var(--em-line)}
.em-side__b:hover{transform:translateY(-2px)}

/* ── 모바일 하단바 ────────────────────── */
.em-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:36;
  background:var(--em-deep);padding:8px;gap:7px}
.em-bar a{flex:1;text-align:center;padding:11px 0;border-radius:10px;
  font-size:14.5px;font-weight:700;color:#fff}
.em-bar a:nth-child(1){background:var(--em-main)}
.em-bar a:nth-child(2){background:rgba(255,255,255,.16)}
.em-bar a:nth-child(3){background:#FAE100;color:#3B1420}

/* ── 푸터 ─────────────────────────────── */
.em-foot{background:var(--em-deep);color:#E8D4D9;padding:30px 0 40px;margin-top:38px}
.em-foot__note{margin:0 0 16px;font-size:14px;color:#C9AEB6;word-break:keep-all}
.em-foot__idx{display:flex;flex-wrap:wrap;gap:7px 14px;margin-bottom:16px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.em-foot__idx a{font-size:13.5px;color:#E8D4D9}
.em-foot__idx a:hover{color:#fff;text-decoration:underline}
.em-foot__biz{font-size:13px;color:#B99AA3;line-height:1.85;margin:0 0 12px;
  display:flex;flex-wrap:wrap;gap:4px 14px}
.em-foot__copy{margin:0;font-size:13px;color:#9C7B85}

@media (max-width:820px){
  .em-hero__grid{grid-template-columns:1fr;gap:22px;padding:28px 16px 32px}
  .em-hero h1{font-size:25px}
  .em-hero__art{order:-1}
  .em-lead h1{font-size:24px}
  .em-fact{grid-template-columns:repeat(2,1fr)}
  .em-cards{grid-template-columns:1fr}
  .em-side{display:none}
  .em-bar{display:flex}
  .em-top__cta{padding:8px 12px;font-size:13px}
  .em-top__row{gap:10px}
  .em-foot{padding-bottom:86px}
  .em-block h2,.em-ask h2{font-size:20px}
  .em-cta{padding:22px 16px}
}
@media (max-width:360px){
  .em-fact{grid-template-columns:1fr}
  .em-hero h1{font-size:22px}
  .em-lead h1{font-size:21px}
  .em-steps li{padding:14px 15px 14px 50px}
}

/* ── 가이드 ───────────────────────────── */
.em-date{margin:10px 0 0;font-size:13.5px;color:var(--em-mute)}
.em-cards--g{grid-template-columns:repeat(2,1fr)}
.em-chips a b{color:var(--em-gold);margin-left:3px}
@media (max-width:820px){ .em-cards--g{grid-template-columns:1fr} }
.em-thm{display:flex;gap:16px;align-items:center;margin:0 0 14px}
.em-thm img{width:96px;height:96px;flex:0 0 auto;border-radius:var(--em-r)}
.em-thm p{margin:0;color:var(--em-mute);font-size:15.5px}
@media (max-width:400px){ .em-thm img{width:72px;height:72px} }
.em-fig--wide img{max-width:760px}

/* 좁은 화면 헤더 — 판매 바로가기 버튼 확보 */
@media (max-width:440px){
  .em-top__row{gap:8px}
  .em-brand img{width:104px}
  .em-nav__a{padding:7px 8px;font-size:13px}
  .em-top__cta{padding:7px 10px;font-size:12.5px}
}
