.ctool-stack{display:grid;gap:12px}
.gnb-ddin .cms-nav-group{display:grid;align-content:start;gap:2px;padding:2px 0 5px}.gnb-ddin .cms-nav-group-title{font-weight:800}.gnb-ddin .cms-nav-level3{color:#55555e!important}.drawer-nav .cms-nav-group-all{font-weight:750}
.cms-left-rail{position:fixed;right:calc(50% + 628px);top:50%;width:clamp(84px,calc((100vw - 1336px)/2),212px);z-index:53;transform:translateY(-50%)}
.cms-left-rail>a,.cms-left-rail-media,.cms-left-rail-media img{display:block;width:100%}.cms-left-rail>a{overflow:hidden;border-radius:20px;box-shadow:0 8px 28px rgba(17,24,39,.12)}.cms-left-rail-media img{height:auto}.cms-solution-mini,.cms-footer-banner,.cms-overlay-card{color:#191f28;text-decoration:none}.cms-solution-mini{width:100%;display:block;overflow:hidden;border:1px solid #d7e5fb;border-radius:16px;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.07)}.cms-solution-mini .cms-promo-media{height:68px;display:block;overflow:hidden;background:#f2f4f6}.cms-solution-mini .cms-promo-media img{width:100%;height:100%;display:block;object-fit:cover}.cms-solution-mini .cms-promo-copy{padding:11px 12px 12px;display:block}.cms-promo-copy small,.cms-promo-copy em,.cms-promo-copy strong,.cms-promo-copy>span,.cms-promo-copy>b{display:block}.cms-promo-copy small{color:#8b95a1;font-size:8px;font-weight:700}.cms-promo-copy em{margin-top:3px;color:#1b64da;font-size:9px;font-style:normal;font-weight:850}.cms-promo-copy strong{margin-top:4px;font-size:13px;line-height:1.35;letter-spacing:-.025em}.cms-promo-copy>span{margin-top:4px;color:#6b7684;font-size:10px;line-height:1.45}.cms-promo-copy>b{margin-top:8px;color:#1b64da;font-size:10px}.cms-promo-copy b i{font-style:normal}.cms-footer-slot{width:min(1180px,calc(100% - 48px));margin:52px auto 0}.cms-footer-banner{min-height:150px;padding:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,38%);align-items:center;gap:24px;overflow:hidden;border:1px solid #e5e8eb;border-radius:20px;background:#f8f9fa}.cms-footer-banner .cms-promo-media{grid-column:2;grid-row:1;height:140px;overflow:hidden;border-radius:14px}.cms-footer-banner .cms-promo-media img{width:100%;height:100%;display:block;object-fit:cover}.cms-footer-banner .cms-promo-copy{grid-column:1;grid-row:1}.cms-footer-banner .cms-promo-copy strong{font-size:23px}.cms-footer-banner .cms-promo-copy>span{font-size:13px}.cms-hero-slide picture img{object-fit:cover!important;transform:none!important}.cms-hero-slide .hero-copy{z-index:3}.cms-hero-slide.cms-theme-dark .hero-copy strong,.cms-hero-slide.cms-theme-dark .hero-sub{color:#fff!important}.cms-hero-slide.cms-theme-violet .hero-copy strong,.cms-hero-slide.cms-theme-violet .hero-sub{color:#fff!important}.cms-overlay{position:fixed;z-index:120;inset:0;display:flex;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}.cms-overlay.is-open{opacity:1;visibility:visible}.cms-overlay-dim{position:absolute;inset:0;border:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px)}.cms-overlay-panel{position:relative;z-index:1;margin:auto;width:min(520px,calc(100% - 36px));overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.3);transform:translateY(12px) scale(.98);transition:transform .22s ease}.cms-overlay.is-open .cms-overlay-panel{transform:none}.cms-overlay-close{position:absolute;z-index:3;top:12px;right:12px;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;color:#4e5968;background:rgba(255,255,255,.9);font-size:24px;cursor:pointer}.cms-overlay-card{display:block}.cms-overlay-card .cms-promo-media{height:260px;display:block;overflow:hidden;background:#f2f4f6}.cms-overlay-card .cms-promo-media img{width:100%;height:100%;display:block;object-fit:cover}.cms-overlay-card .cms-promo-copy{padding:22px 24px 25px}.cms-overlay-card .cms-promo-copy strong{font-size:23px}.cms-overlay-card .cms-promo-copy>span{font-size:13px}.cms-overlay-sheet{align-items:flex-end}.cms-overlay-sheet .cms-overlay-panel{width:min(680px,100%);margin:auto auto 0;border-radius:22px 22px 0 0;transform:translateY(100%)}.cms-overlay-sheet.is-open .cms-overlay-panel{transform:none}.cms-overlay-sheet .cms-overlay-card{display:grid;grid-template-columns:38% minmax(0,1fr)}.cms-overlay-sheet .cms-promo-media{height:220px}.cms-theme-dark{color:#fff;background:#191f28}.cms-theme-blue{background:#eaf3ff}.cms-theme-violet{color:#fff;background:linear-gradient(135deg,#5b20e8,#8439ff)}.cms-theme-dark .cms-promo-copy strong,.cms-theme-violet .cms-promo-copy strong{color:#fff}.cms-theme-dark .cms-promo-copy>span,.cms-theme-violet .cms-promo-copy>span{color:rgba(255,255,255,.75)}.cms-theme-violet .cms-promo-copy>b{color:#d8ff73}
@media(max-width:1439px){.cms-left-rail{display:none}}
@media(max-width:720px){.cms-footer-slot{width:calc(100% - 32px);margin-top:36px}.cms-footer-banner{padding:0;display:block}.cms-footer-banner .cms-promo-media{height:150px;border-radius:0}.cms-footer-banner .cms-promo-copy{padding:18px}.cms-footer-banner .cms-promo-copy strong{font-size:19px}.cms-overlay-card .cms-promo-media{height:210px}.cms-overlay-card .cms-promo-copy{padding:18px 18px calc(20px + env(safe-area-inset-bottom))}.cms-overlay-card .cms-promo-copy strong{font-size:20px}.cms-overlay-sheet .cms-overlay-card{display:block}.cms-overlay-sheet .cms-promo-media{height:190px}.ctool-sheet [data-content-slot="solution.after"]{margin-top:12px}.ctool-sheet .cms-solution-mini{display:grid;grid-template-columns:94px minmax(0,1fr);align-items:center}.ctool-sheet .cms-solution-mini .cms-promo-media{height:100%}.ctool-sheet .cms-solution-mini .cms-promo-copy{padding:12px}}@media(prefers-reduced-motion:reduce){.cms-overlay,.cms-overlay-panel{transition:none}}
.cms-related-events{width:min(1080px,calc(100% - 40px));margin:44px auto 8px;padding-top:32px;border-top:1px solid #e5e8eb;color:#191f28}.cms-related-events-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}.cms-related-events-title{margin:0;font-size:24px;line-height:1.35;letter-spacing:-.035em}.cms-related-events-dots{display:flex;align-items:center;gap:6px;flex:none}.cms-related-events-dots[hidden]{display:none}.cms-related-events-dot{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:#d7dbe0;cursor:pointer;transition:width .18s ease,background .18s ease}.cms-related-events-dot.is-on{width:18px;background:#3182f6}.cms-related-events-list{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}.cms-related-events-list::-webkit-scrollbar{display:none}.cms-related-event{position:relative;flex:0 0 calc((100% - 28px)/2.4);scroll-snap-align:start;min-width:0;min-height:148px;padding:19px 42px 18px 18px;display:flex;flex-direction:column;gap:8px;border:1px solid #e5e8eb;border-radius:18px;color:#191f28;background:#fff;text-decoration:none;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.cms-related-event:hover,.cms-related-event:focus-visible{border-color:#b9d2ff;box-shadow:0 8px 24px rgba(49,130,246,.1);transform:translateY(-1px);outline:0}.cms-related-event-category{align-self:flex-start;padding:4px 8px;border-radius:999px;color:#1b64da;background:#edf4ff;font-size:11px;font-weight:750;line-height:1.25}.cms-related-event strong{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;line-height:1.5;letter-spacing:-.025em}.cms-related-event-period{margin-top:auto;color:#8b95a1;font-size:12px;line-height:1.4}.cms-related-event>i{position:absolute;right:18px;bottom:18px;color:#3182f6;font-size:18px;font-style:normal}
@media(max-width:720px){.cms-related-events{width:calc(100% - 32px);margin-top:32px;padding-top:26px}.cms-related-events-head{margin-bottom:13px}.cms-related-events-title{font-size:20px}.cms-related-events-list{gap:10px}.cms-related-event{flex:0 0 82%;min-height:0;padding:15px 40px 14px 15px;gap:6px;border-radius:15px}.cms-related-event strong{font-size:14px}.cms-related-event>i{right:15px;bottom:15px}}
@media(prefers-reduced-motion:reduce){.cms-related-event{transition:none}.cms-related-events-dot{transition:none}.cms-related-events-list{scroll-behavior:auto}}
.cms-page-hero{position:relative;display:block!important;overflow:hidden!important;aspect-ratio:1180/296;min-height:0!important;border-radius:24px;background:#edf4ff}/* 🔴 캠페인 배지(`badge_text`)는 CMS 가 **따로 내려주는데** 마크업만 넣고 스타일을 안 줬다.
   그래서 `<strong>` 안에서 제목 글자 크기(25px) 그대로 인라인으로 흘러 **제목 첫 줄처럼**
   보였다 — 사장님 지시 2026-09-13 「카카오페이x하나카드는 뱃지로」.
   실측 375px: display:inline · font-size 25px · background 없음 · padding 0.
   ⚠ 홈(.ctv25)은 배지를 접는다(`.ctv25 .hero-app-badge{display:none}`) — 모바일 히어로
     슬롯이 130~144px 라 제목 2줄+CTA 가 들어가야 하기 때문이다. 그 규칙은 그대로 두고,
     여기서는 **스코프 밖(카드사 혜택 등 페이지 히어로)** 에만 모양을 준다.
   핵심은 display:block 이다 — 인라인이면 제목과 같은 줄에 섞인다. */
.hero-app-badge{display:block;width:fit-content;font-size:11px;font-weight:600;line-height:1.4;margin-bottom:6px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.85);color:#2a5bd7}
.cms-page-hero-track,.cms-page-hero-slide,.cms-page-hero-slide picture,.cms-page-hero-slide img{position:absolute;inset:0;width:100%;height:100%}.cms-page-hero-slide{display:block;opacity:0;visibility:hidden;transition:opacity .35s ease;color:#191f28;text-decoration:none}.cms-page-hero-slide.is-active{opacity:1;visibility:visible}.cms-page-hero-slide img{object-fit:cover}.cms-page-hero-copy{position:absolute;z-index:2;top:50%;left:5%;width:52%;transform:translateY(-50%)}.cms-page-hero-copy>strong,.cms-page-hero-sub,.cms-page-hero-cta{display:block}.cms-page-hero-copy>strong{font-size:clamp(25px,3vw,40px);line-height:1.18;letter-spacing:-.04em;word-break:break-all}
/* 🔴 word-break:break-all — 배너 제목은 **음절 단위로 줄바꿈**한다(사장님 규칙 2026-09-13).
   홈(.ctv25 .hero .hero-copy>strong)에는 같은 규칙을 줬는데 **여기는 그 스코프 밖**이라
   빠져 있었다. 오늘만 네 번째로 같은 모양이다 — 시안이 전제하는 전역 규칙이 홈 스코프에만
   들어가서, 스코프 밖 조각(GNB 트리거 · 다이얼로그 버튼 · 오버레이 버튼 · 캠페인 배지 ·
   이 제목)이 매번 빠진다. 스코프 밖 조각 목록을 따로 들고 다녀야 한다.
   ⚠ 전역 h1/h2/h3 는 keep-all(한국어 어절 보존)이다 — 배너 제목에만 준다.
   ⚠ white-space:pre-line 은 안 준다. renderHeroTitle 이 이미 \n 을 <br> 로 바꾼다. */.cms-page-hero-copy>strong em{color:#1769e0;font-style:normal}.cms-page-hero-sub{margin-top:10px;color:#4e5968;font-size:15px;line-height:1.5}.cms-page-hero-cta{margin-top:18px;font-size:14px;font-weight:800}.cms-page-hero-dots{position:absolute;z-index:4;bottom:13px;left:5%;display:flex;gap:6px}.cms-page-hero-dot{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:rgba(25,31,40,.22)}.cms-page-hero-dot.is-active{width:20px;background:#3182f6}.cms-footer-banner .cms-promo-media picture{display:block;width:100%;height:100%}
@media(max-width:720px){.cms-page-hero{aspect-ratio:780/480;border-radius:18px}.cms-page-hero-copy{left:6%;width:55%}.cms-page-hero-copy>strong{font-size:25px}.cms-page-hero-sub{font-size:13px}.cms-page-hero-cta{margin-top:14px;font-size:12px}.cms-page-hero-dots{bottom:10px;left:6%}}
@media(prefers-reduced-motion:reduce){.cms-page-hero-slide{transition:none}}

/* CMS house/sponsor surfaces v2 */
.cms-detail-cashback-aside,.cms-list-inline,.cms-single-page-hero,.cms-home-shortcut-ad{box-sizing:border-box}.cms-detail-cashback-aside a,.cms-list-inline>a,.cms-single-page-hero>a{color:#191f28;text-decoration:none}.cms-detail-cashback-aside{align-self:stretch;min-height:430px;overflow:hidden;border:1px solid #e5e8eb;border-radius:20px;background:#fff}.cms-detail-cashback-aside>a{height:100%;display:grid;grid-template-rows:minmax(0,65fr) minmax(130px,35fr)}.cms-house-aside-media{position:relative;min-height:0;overflow:hidden;background:#edf4ff}.cms-house-aside-media picture,.cms-house-aside-media img{display:block;width:100%;height:100%}.cms-house-aside-media img{object-fit:cover}.cms-house-aside-copy{position:absolute;z-index:1;inset:0;padding:22px;display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,0) 58%)}.cms-house-aside-copy small,.cms-house-aside-footer small{padding:4px 7px;border-radius:999px;color:#1b64da;background:#eaf3ff;font-size:10px;font-weight:850}.cms-house-aside-copy strong{max-width:94%;margin-top:10px;font-size:21px;line-height:1.3;letter-spacing:-.035em}.cms-house-aside-copy>span{max-width:94%;margin-top:6px;color:#4e5968;font-size:12px;line-height:1.5}.cms-theme-dark .cms-house-aside-copy{color:#fff;background:linear-gradient(180deg,rgba(18,23,32,.9),rgba(18,23,32,0) 58%)}.cms-house-aside-footer{padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}.cms-house-aside-footer b{min-height:44px;padding:0 16px;display:flex;align-items:center;justify-content:center;border-radius:13px;color:#fff;background:#191f28;font-size:13px;font-weight:850}
.cms-list-inline{width:100%;margin:10px 0;overflow:hidden;border:1px solid #cfe0fb;border-radius:18px;background:#f4f8ff}.cms-list-inline>a{min-height:116px;display:grid;grid-template-columns:minmax(220px,38%) minmax(0,1fr);align-items:stretch}.cms-list-inline-media,.cms-list-inline-media picture,.cms-list-inline-media img{display:block;width:100%;height:100%}.cms-list-inline-media{min-height:116px;overflow:hidden;background:#eaf3ff}.cms-list-inline-media img{object-fit:cover}.cms-list-inline-copy{min-width:0;padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.cms-list-inline-copy small,.cms-shortcut-disclosure{padding:3px 7px;border-radius:999px;color:#1b64da;background:#dceaff;font-size:10px;font-style:normal;font-weight:850}.cms-list-inline-copy strong{margin-top:7px;font-size:17px;line-height:1.35;letter-spacing:-.025em}.cms-list-inline-copy>span{margin-top:4px;color:#6b7684;font-size:12px;line-height:1.45}.cms-list-inline-copy>b{margin-top:9px;color:#1b64da;font-size:12px}.cms-list-inline-cashback{border-radius:16px}.cms-list-inline-cards{margin-block:8px}
.cms-house-eyebrow{display:block;margin-top:7px;color:#1b64da;font-size:11px;font-style:normal;font-weight:850}.cms-theme-dark .cms-house-eyebrow{color:#9fc4ff}
.cms-single-page-hero{width:100%;margin:0 0 18px;overflow:hidden;border-radius:22px;background:#edf4ff}.cms-single-page-hero>a{position:relative;display:block;aspect-ratio:1180/296;overflow:hidden}.cms-single-page-hero-media,.cms-single-page-hero-media img{position:absolute;inset:0;width:100%;height:100%;display:block}.cms-single-page-hero-media img{object-fit:cover}.cms-single-page-hero-copy{position:absolute;z-index:1;top:50%;left:5%;width:48%;display:flex;flex-direction:column;align-items:flex-start;transform:translateY(-50%)}.cms-single-page-hero-copy small{padding:4px 8px;border-radius:999px;color:#1b64da;background:rgba(234,243,255,.92);font-size:10px;font-weight:850}.cms-single-page-hero-copy strong{margin-top:9px;font-size:clamp(25px,3vw,38px);line-height:1.2;letter-spacing:-.04em}.cms-single-page-hero-copy>span{margin-top:8px;color:#4e5968;font-size:14px;line-height:1.5}.cms-single-page-hero-copy>b{margin-top:16px;font-size:13px}.cms-single-page-hero.cms-theme-dark .cms-single-page-hero-copy{color:#fff}.cms-single-page-hero.cms-theme-dark .cms-single-page-hero-copy>span{color:rgba(255,255,255,.8)}
.cms-home-shortcut-ad{position:relative}.cms-home-shortcut-ad .quick-service-icon picture,.cms-home-shortcut-ad .quick-service-icon img{display:block;width:100%;height:100%}.cms-home-shortcut-ad .quick-service-icon img{object-fit:contain}.cms-home-shortcut-ad .quick-service-copy{position:relative}.cms-home-shortcut-ad .cms-shortcut-disclosure{display:inline-flex;margin-top:5px;line-height:1.2}
@media(max-width:720px){.cms-list-inline{margin:8px 0;border-radius:0;border-inline:0}.cms-list-inline>a{display:block;min-height:0}.cms-list-inline-media{height:auto;min-height:0;aspect-ratio:780/320}.cms-list-inline-copy{padding:14px 16px 16px}.cms-list-inline-copy strong{font-size:16px}.cms-single-page-hero{border-radius:18px}.cms-single-page-hero>a{aspect-ratio:780/480}.cms-single-page-hero-copy{left:6%;width:55%}.cms-single-page-hero-copy strong{font-size:24px}.cms-single-page-hero-copy>span{font-size:12px}.cms-single-page-hero-copy>b{margin-top:12px;font-size:11px}.cms-detail-cashback-aside{display:none}}
/* ── CMS v2.1 홈 공지바·모달 (계약 spec/cms-notice-modal-v1/CMS_FRONTEND_NOTICE_MODAL_CONTRACT.md) ──
   시안 spec/cms-notice-modal-v1/styles.css 를 **그대로** 옮기고 .ctn 스코프만 씌웠다(.modal·.primary·.pill 같은
   흔한 이름이 사이트 규칙과 부딪히지 않게). 마크업은 시안 클래스를 그대로 쓴다. 시안 대비 패치 목록:
   ① .ctn 스코프 + 글꼴·박스 리셋(오버레이는 body 직속이라 사이트 전역 h3·button 규칙을 받는다)
   ② 등급 색 info·critical 추가(시안은 maintenance/warning 호박색만 있다) — 등급은 배지 글자로도 전달한다
   ③ 모바일 공지바 CTA: 시안은 display:none — 계약상 CTA 는 닿아야 하므로 바 전체를 덮는 링크로 둔다
   ④ 캠페인 모달 .campaign-art: 시안의 도형 대신 CMS 이미지(picture)를 채운다
   ⑤ .global-card 를 오버레이 안 가운데에 띄운다(흰 바탕·그림자) ⑥ 오버레이 fixed·safe area·높이 넘침 스크롤
   ⑦ \n 줄바꿈은 pre-line(시안은 <br>) ⑧ a.primary/a.secondary 링크형 버튼 ⑨ modal_size wide 만 넓힘
   (compact·standard 는 시안처럼 430px)
   ⑩ 사이트 전역 .scrim(드로어용 opacity:0·z-index:600)을 스코프 안에서 되돌림 ⑪ 모바일은 새소식 바가 가장자리까지 붙어
   있어 공지바를 시안의 페이지 여백(12px) 안쪽에 둔다
   ⑫ 이미지 위 닫기(×)는 흰 원 32px — 시안의 회색 ×는 노란 도형 위 전제라 사진 위에선 안 보였다
   ⑬ 사이트 전역 header·footer 규칙(윗선·회색 바탕·여백)이 전역 모달 카드에 새서 스코프 안에서 초기화 */
.ctn{--ink:#191f28;--muted:#6b7684;--line:#e5e8eb;--blue:#1b64da;--soft:#f6f7f9;--yellow:#fee500;--red:#f04452;--amber:#f59e0b;color:var(--ink);font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.025em;line-height:normal}
.ctn *,.ctn *::before,.ctn *::after{box-sizing:border-box}
/* 🔴 .ctn 안 버튼은 글꼴만 맞추고 **테두리·배경은 안 지우고 있었다** — 브라우저 기본
   회색 테두리가 그대로 보였다(사장님 라이브 캡처 2026-09-13: 기사 모달의 × 와 「닫기」에
   네모 테두리). 시안은 전역 button{} 리셋을 전제로 그려서 테두리를 따로 안 지운다 —
   그 리셋이 홈 본문 스코프(.ctv25)에만 들어가고 오버레이(.ctn)는 스코프 밖이라 못 받았다.
   아래 개별 규칙(.primary 등)이 배경을 다시 칠하므로 여기서 지워도 버튼 모양은 안 잃는다. */
.ctn button{font:inherit;letter-spacing:inherit;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}
.ctn header,.ctn footer{position:static;margin:0;padding:0;border:0;background:none;box-shadow:none;height:auto;min-height:0;width:auto;max-width:none;color:inherit;font-size:inherit;text-align:inherit}
.ctn.notice-bar{position:relative;min-height:48px;margin-top:12px;padding:8px 12px 8px 14px;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:12px;border:1px solid #ffd18a;border-radius:12px;background:#fff8e8}
.ctn .notice-mark{display:flex;align-items:center;gap:7px}.ctn .notice-mark span{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px #ffedc7}.ctn .notice-mark b{font-size:11px}
.ctn.notice-bar>strong{font-size:13px;white-space:pre-line}.ctn.notice-bar p{margin:0;color:#5d6673;font-size:12px}
.ctn.notice-bar a{color:#9a5c00;font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap}.ctn.notice-bar a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ctn.notice-bar button,.ctn .modal-x,.ctn .global-card header button{position:relative;z-index:1;border:0;background:none;color:#6b7684;font-size:21px;cursor:pointer}
.ctn.notice-bar[data-level="info"]{border-color:#cfe2ff;background:#f2f8ff}.ctn.notice-bar[data-level="info"] .notice-mark span{background:var(--blue);box-shadow:0 0 0 5px #dbeafe}.ctn.notice-bar[data-level="info"] a{color:var(--blue)}
.ctn.notice-bar[data-level="critical"]{border-color:#ffc9cd;background:#fff3f4}.ctn.notice-bar[data-level="critical"] .notice-mark span{background:var(--red);box-shadow:0 0 0 5px #ffe0e3}.ctn.notice-bar[data-level="critical"] a{color:#c9303e}
.ctn.ctn-overlay{position:fixed;inset:0;z-index:10000;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.ctn .scrim{position:absolute;inset:0;background:rgba(14,18,27,.52);backdrop-filter:blur(2px);opacity:1;visibility:visible;transition:none;z-index:auto}
.ctn .modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,calc(100% - 40px));max-height:calc(100% - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;padding:32px;border-radius:24px;background:#fff;box-shadow:0 26px 75px rgba(0,0,0,.28);text-align:center}
.ctn .modal.wide{width:min(560px,calc(100% - 40px))}
.ctn .modal-x.on-art{right:12px;top:12px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.92);color:#191f28;font-size:20px;line-height:1}
.ctn .modal-x{position:absolute;right:16px;top:12px}.ctn .modal-logo{width:56px;height:56px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:#edf5df}.ctn .modal-logo img{width:29px;height:29px}
.ctn .pill{display:inline-flex;padding:6px 11px;border-radius:999px;font-size:10px;font-weight:850;font-style:normal}.ctn .pill.gray{background:#eef1f4;color:#485362}.ctn .pill.yellow{background:var(--yellow);color:#191f28}
.ctn .modal h3{margin:14px 0 10px;font-size:24px;line-height:1.34;white-space:pre-line}.ctn .modal p{margin:0 0 22px;color:var(--muted);font-size:13px;line-height:1.65;white-space:pre-line}
.ctn .primary{width:100%;height:48px;border:0;border-radius:13px;background:#1b64da;color:#fff;font-weight:850;cursor:pointer}.ctn .primary.dark{background:#191f28}
.ctn .secondary{width:100%;height:38px;margin-top:7px;border:0;background:transparent;color:#6b7684;font-size:12px;font-weight:750;cursor:pointer}
.ctn a.primary,.ctn a.secondary{display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.ctn .modal.campaign{padding:0;overflow:auto;text-align:left}.ctn .campaign-art{height:220px;display:block;position:relative;overflow:hidden;background:linear-gradient(135deg,#ffe934,#ffd600)}.ctn .campaign-art.cms-theme-light{background:#f2f4f6}
.ctn .campaign-art img{display:block;width:100%;height:100%;object-fit:cover}
.ctn .modal-copy{padding:25px 28px 24px}.ctn .copy-top{display:flex;align-items:center;justify-content:space-between}.ctn .copy-top>span{color:#8b95a1;font-size:10px}.ctn .modal-copy h3{font-size:23px}
.ctn .modal-copy small{display:block;margin-top:9px;color:#9aa2ad;font-size:9px;text-align:center}
/* 🔴 시안 기사 모달(홈 v2.5 §9) 컨테이너. 시안은 <dialog id="press-dialog"> 이지만 우리 전역 모달은
   .ctn 오버레이 안의 <article> 이다 — 그래서 #press-dialog 의 **기하만** 여기로 옮긴다.
   안쪽(.press-modal-top/-image/-body/-cta/-bottom)은 시안 껍데기 시트가 그대로 그린다.
   시안과 다른 곳: position/left/top/transform(오버레이 가운데 배치) · max-height 에 safe-area 반영
   · --ink 를 시안 값으로(전역 :root 는 #000 이다). 나머지 수치는 시안 그대로다. */
.ctn .press-modal{--ink:#172235;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:440px;max-width:calc(100% - 32px);max-height:calc(100% - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;padding:0;border:0;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 26px 90px #182f4c38}
@media(max-width:700px){.ctn .press-modal{border-radius:21px}}
.ctn .global-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 32px));max-height:calc(100% - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;padding:24px;border:1px solid #dfe4e9;border-radius:18px;background:#fff;box-shadow:0 26px 75px rgba(0,0,0,.28)}
.ctn .global-card header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px}
.ctn .level{width:13px;height:13px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 6px #fff1d6}.ctn .level.info{background:var(--blue);box-shadow:0 0 0 6px #dbeafe}.ctn .level.critical{background:var(--red);box-shadow:0 0 0 6px #ffe0e3}
.ctn .global-card header small{display:block;color:#8b95a1;font-size:10px}.ctn .global-card header b{display:block;margin-top:3px;font-size:17px;white-space:pre-line}
.ctn .global-card>p{margin:22px 0;padding:20px;border-radius:13px;background:#f7f8fa;color:#596574;font-size:13px;line-height:1.65;white-space:pre-line}
.ctn .global-card footer{display:flex;align-items:center;justify-content:space-between;gap:14px}.ctn .global-card footer span{color:#7d8793;font-size:11px}
.ctn .global-card footer .primary{width:auto;height:auto;padding:10px 24px;border-radius:10px;background:#191f28;font-weight:800}
@media(max-width:760px){.ctn.notice-bar{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;margin:10px 12px}.ctn.notice-bar>strong{font-size:12px}.ctn.notice-bar p{display:none}.ctn.notice-bar a{position:absolute;inset:0;font-size:0;color:transparent}
.ctn .modal{padding:26px 20px}.ctn .modal h3{font-size:21px}.ctn .campaign-art{height:190px}.ctn .modal-copy{padding:22px 20px}.ctn .modal.campaign{padding:0}
.ctn .global-card footer{align-items:flex-start;flex-direction:column}.ctn .global-card footer .primary{width:100%}}
html.ctn-scroll-locked,html.ctn-scroll-locked body{overflow:hidden!important}
.ctv25 .hero-slide.hero-original-color .hero-shade{display:none}
/* 🔴 긴급 수정(10-01 23:5x · 사장님 「히어로배너 카드캐시백 계산기 텍스트가 잘 안 보여」) — original_color 는
   흰 그라데이션(.hero-shade)이 빠지는 대신 그 아래 완성형 이미지가 어둡다는 게 전제다(CMS 설계서
   docs/배너_CMS_설계_v1.md). 그런데 제목·부제 글자색은 그라데이션이 있던 기본값(어두운 잉크색 ·
   --ink)에 그대로 묶여 있어 어두운 이미지 위에서 거의 안 읽혔다(라이브 캡처 hero-pc.png).
   🔴 제목 선택자는 `.hero-title`·`h1` 이 아니라 `.hero-copy>strong` 이다 — webdark.py 쪽은 CSS를
   구울 때 `.hero h1` 을 `.hero .hero-copy>strong` 로 자동 복제하는 별칭 규칙이 있지만(6682번째 줄),
   이 파일은 site/css/content-slots.css(별도 정적 파일)라 그 별칭 규칙을 안 거친다 — 실제 마크업
   (baked·CMS 양쪽)대로 `.hero-copy>strong` 를 직접 쓴다(처음엔 `.hero-title` 로 썼다가 실제 렌더
   DOM 을 확인하지 않고 hero-supersol 패턴만 베껴 와 안 먹었다 — 반드시 렌더 DOM 으로 재확인했다).
   hero-supersol 변형이 쓰는 패턴(흰 글자 + 옅은 그림자)을 그대로 따른다 — CTA(.dark-button)는 자기
   전용 배경(#1c2533)이 있어 이미지 밝기와 무관하게 이미 읽혀 손대지 않는다. */
.ctv25 .hero-slide.hero-original-color .hero-copy>strong{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.ctv25 .hero-slide.hero-original-color .hero-sub{color:rgba(255,255,255,.88);text-shadow:0 1px 2px rgba(0,0,0,.3)}