/* NTT Magazine Store · 디자인 토큰 v2.2 (2026-05-19, v24_10)
   참조: 이미지 #1~#3 비비드 Y2K + 노란 헤더 + 도트 배경 + 두꺼운 검정 아웃라인
   v24_10: V-TMF wrapper 제거 / 아이콘 cap 토큰화 (raster vs vector) / 헤더 IA + 푸터 IA 추가 */

:root {
  /* 4 family 컬러 (참조 코드 4 원소 매핑 → 비비드 채도) */
  --c-falcon-1: #FF7E47;      /* 火 코럴 — 강철의 매 */
  --c-falcon-2: #FFC44D;      /* 金 골드 */
  --c-moon-1:   #9747FF;      /* 水(陰) 보라 — 달의 사색가 */
  --c-moon-2:   #FFC44D;      /* 金 골드 */
  --c-flower-1: #FF4D8F;      /* 火(陽) 핫핑크 — 들꽃의 빛 */
  --c-flower-2: #7DD957;      /* 木 그린 */
  --c-forest-1: #3FBFE0;      /* 水 시안 — 숲의 어머니 */
  --c-forest-2: #5DBA85;      /* 木 딥그린 */

  /* 4D 코드 배지 컬러 */
  --code-yang: #FFC44D;       /* 陽 */
  --code-yin:  #9747FF;       /* 陰 */
  --code-fire: #FF7E47;       /* 火 */
  --code-water:#3FBFE0;       /* 水 */
  --code-metal:#B88A33;       /* 金 */
  --code-wood: #5DBA85;       /* 木 */
  --code-wind: #6FD5EE;       /* 風 */
  --code-earth:#C46420;       /* 土 */

  /* 시그니처 */
  --c-yellow:    #FFE34D;     /* 메인 헤더 노랑 */
  --c-yellow-d:  #FFD600;
  --c-ink:       #15131A;     /* 텍스트/아웃라인 */
  --c-paper:     #FFF1F3;     /* 베이지핑크 배경 */
  --c-paper-2:   #FFE9F0;
  --c-card:      #FFFFFF;
  --c-line:      #15131A;     /* 굵은 아웃라인 */
  --c-mute:      #6F6873;
  --c-accent:    #FF4D8F;     /* 메인 CTA 핫핑크 */
  --c-accent-2:  #3FBFE0;     /* 보조 CTA 시안 */
  --c-lime:      #D7F75A;
  --c-cream:     #FFF8E1;

  /* 폰트 */
  --f-head: 'Noto Sans KR', system-ui, sans-serif;
  --f-body: 'Noto Sans KR', system-ui, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, monospace;

  /* 굵기 토큰 */
  --w-h: 900;
  --w-b: 700;

  /* 라운드/그림자 */
  --r-card: 18px;
  --r-pill: 999px;
  --shadow-flat: 4px 4px 0 0 var(--c-ink);
  --shadow-card: 6px 6px 0 0 var(--c-ink);
  --shadow-cta:  3px 3px 0 0 var(--c-ink);

  /* 간격 */
  --pad-x: clamp(20px, 4vw, 56px);
  --pad-section: clamp(60px, 8vw, 120px);

  /* 페이지 컨테이너 max-width (32인치 와이드 모니터 좌우 쏠림 차단) */
  --container-max: 1480px;

  /* 도트 배경 — 4A.B4 핑크 톤 (zine 노트지 인상) */
  --dot-color: rgba(255, 109, 158, 0.22);
  --dot-bg: radial-gradient(var(--dot-color) 1.4px, transparent 1.4px);
  --dot-size: 18px 18px;

  /* sticker 회전 4단 (4A.B5 — 손으로 붙인 느낌) */
  --rot-cool-1: -12deg;
  --rot-cool-2: -6deg;
  --rot-warm-1: 8deg;
  --rot-warm-2: 14deg;

  /* outline 굵기 3단 표준 (4A.B8) */
  --bw-card: 3px;
  --bw-cta:  2.5px;
  --bw-pill: 2px;

  /* ── 아이콘 cap 토큰 (v24_10) ──
     raster(.webp/.png)는 PC 기본 = 최대치. 모바일에서 축소만 허용 (확대 금지 — 흐림 방지).
     vector(.svg)는 clamp 허용 (확대해도 깨끗).
     사용: `img.ck-raster-lg { max-width: var(--icon-cap-raster-lg); width: 100%; height: auto; }` */
  --icon-cap-raster-xs: 32px;
  --icon-cap-raster-sm: 48px;
  --icon-cap-raster-md: 80px;
  --icon-cap-raster-lg: 130px;
  --icon-cap-raster-xl: 220px;
  --icon-cap-raster-2xl: 520px;
  /* vector cap 토큰은 다음 라운드에 기존 14개 컨텍스트 정의(line 110-191)로 마이그레이션 예정 (v24_11) */
}

/* 도트 패턴 유틸 */
.dot-bg {
  background-image: var(--dot-bg);
  background-size: var(--dot-size);
}

/* ─── Sticker SVG 토큰 (advisor STEP 0: 25+개 통일 결속) ───
   모든 sticker 아이콘은 viewBox 64×64 기준.
   stroke는 currentColor로 받아 CSS에서 색 재정의 가능.
   --stk-* 토큰을 inline style로 SVG에 주입하면 톤 자동 결속.
*/
:root {
  --stk-stroke:   var(--c-ink);
  --stk-stroke-w: 3.5;          /* viewBox 64 기준 */
  --stk-radius:   6;            /* sticker corner */
  --stk-shadow:   drop-shadow(2px 3px 0 var(--c-ink));

  /* 5-color sticker palette (샘플 톤 기준) */
  --stk-y:   #FFE34D;  /* 옐로우 */
  --stk-p:   #FF6FB0;  /* 핑크 */
  --stk-m:   #5DD9D9;  /* 민트 */
  --stk-b:   #6FC2FF;  /* 하늘 */
  --stk-l:   #C9A8FF;  /* 라벤더 */
  --stk-g:   #8BE26C;  /* 라임그린 */
  --stk-o:   #FF8A47;  /* 오렌지 */
}

/* sticker 이미지 공통 — png 자산을 sticker처럼 보이게 할 때 */
.stk-img {
  filter: var(--stk-shadow);
  display: inline-block;
  vertical-align: middle;
}

/* sticker SVG 인라인 공통 */
.stk-svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  color: var(--c-ink);
  filter: var(--stk-shadow);
}

/* ── 컨텍스트별 sticker 사이즈 (chip / kit-tile / cart / hero-eyebrow / step / side-chip / camp / mv-cta) */
.cat-chip .ci      { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; filter: var(--stk-shadow); }
.cart-button .ci   { width: 22px; height: 22px; display: inline-block; vertical-align: -5px; filter: var(--stk-shadow); }
.hero-eyebrow .ci  { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }
.kit-tile .ic .ci  { width: clamp(42px, 5vw, 64px); height: clamp(42px, 5vw, 64px); display: block; margin: auto; filter: var(--stk-shadow); }
.step-circle .ci   { width: 26px; height: 26px; display: block; margin: auto; }
.side-chip .ci     { width: 22px; height: 22px; display: inline-block; vertical-align: -5px; filter: var(--stk-shadow); }
.theme-card .glyph .ci { width: 56px; height: 56px; display: block; margin: auto; filter: var(--stk-shadow); }
.mv-cta .ci        { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; filter: var(--stk-shadow); }
.smile-sm .ci, .stamp-smile .ci { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; filter: var(--stk-shadow); }
.pencil .ci        { width: 32px; height: 32px; display: block; filter: var(--stk-shadow); }
.card-block .ic .ci { width: 38px; height: 38px; display: block; margin: auto; filter: var(--stk-shadow); }

/* ── 사용자 시트 sticker 이미지 (kit-feature 영웅, workbook 등) v24_10
   raster native cap 정책: 각 webp 파일의 실제 픽셀 크기를 max로 박음. 확대 금지 (흐림 방지) */
.kit-hero-stage {
  width: 100%; max-width: 296px;  /* 01_starter_box@2x native = 296×224 */
  display: block; margin: 0 auto;
  aspect-ratio: 296 / 224;
  position: relative;
  animation: kit-hero-bob 5s ease-in-out infinite;
}
.kit-hero-stage .kit-hero-img {
  width: 100%;
  max-width: 296px;  /* native cap */
  height: auto;
  display: block;
  margin: 0 auto;
}
@keyframes kit-hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .kit-hero-stage { animation: none; }
}
.workbook--sheet { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.workbook--sheet .workbook-img {
  width: 100%;
  max-width: 212px;  /* 04_workbook@2x native = 212×224 */
  max-height: 224px;
  height: auto;
  display: block;
  margin: 12px auto 0;
}
.workbook--sheet .num-tag {
  position: absolute; top: 0; left: 0;
  background: var(--c-ink); color: var(--c-yellow);
  font-family: var(--f-mono); font-size: 10px;
  padding: 4px 10px; border-radius: var(--r-pill); letter-spacing: .08em;
}

/* hero-grid (kit-tile 6칸) — 시트 sticker 이미지로 업그레이드 (raster cap 토큰화 v24_10) */
.hero-grid--sheet .kit-tile { background: #fff; }
.hero-grid--sheet .kit-tile .ic { margin: auto; display: flex; align-items: center; justify-content: center; }
.hero-grid--sheet .kit-tile .ic img.ci-lg {
  width: 100%;
  max-width: var(--icon-cap-raster-lg);
  max-height: 110px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: none; /* drop-shadow는 시트 sticker 자체에 포함 */
}

/* theme-grid (캠프 4글리프) — 시트의 미니 테마 키트 박스 sticker */
.theme-grid--sheet .theme-card { padding: 16px 12px 18px; }
.theme-grid--sheet .theme-card .glyph {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.theme-grid--sheet .theme-card .glyph img.theme-img {
  max-width: 120px;
  max-height: 96px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: none;
}

/* 추가 컨텍스트별 sticker img 사이즈 (이번 라운드 일괄 치환) */
.slogan-eyebrow .sparks .ci { width: 14px; height: 14px; vertical-align: -2px; }
.stamp-smile .ci   { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; filter: var(--stk-shadow); }
.side-chip i .ci   { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; }
.side-chip i      { display: inline-flex; align-items: center; justify-content: center; }
.step .step-circle .ci { width: 28px; height: 28px; display: block; margin: auto; }
.step-circle      { display: inline-flex; align-items: center; justify-content: center; }
.cta-buy .ci      { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; }
.mv-cta i .ci     { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }
.mv-cta i        { display: inline-flex; align-items: center; }
.mv-globe .ci     { width: 22px; height: 22px; display: inline-block; vertical-align: -5px; }
.mv-globe        { display: inline-flex; align-items: center; }
.card-block .ic .ci { width: 38px; height: 38px; }
.modal .cta-modal .ci { width: 16px; height: 16px; vertical-align: -3px; }

/* character grid 16칸 — DECOR 도형 sticker로 visual upgrade */
.cell-svg--type {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 110px;
  background: linear-gradient(135deg, var(--fam-1, #FF6FB0) 0%, var(--fam-2, #FFE34D) 100%);
  border-radius: 12px;
  margin: 8px 8px 6px;
}
.cell-svg--type .type-sticker {
  width: 64px; height: 64px;
  filter: var(--stk-shadow);
}
.cell-svg--type .type-num {
  position: absolute; top: 6px; right: 8px;
  color: #fff; font-family: var(--f-head); font-weight: 900; font-size: 22px;
  text-shadow: 1px 1px 0 var(--c-ink);
  letter-spacing: -1px;
}

/* ── 사이트 자유 배치 장식 sticker (UI 시트 일부 활용) ── */
.hero { position: relative; }
.hero-decor {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
/* v24_10 Image#10: NEW 뱃지는 16TYPES 패널 우상단 코너 위치, 작은 크기 (native 140 cap 안에서 70px) */
.hero-decor--new {
  top: -16px;
  right: -12px;
  width: 70px;
  max-width: 70px;
  transform: rotate(14deg);
}
/* hero-decor--sale 제거됨 (v24_10) */

.kit-feature { position: relative; }
.kit-corner-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(90px, 11vw, 150px);
  z-index: 3;
  pointer-events: none;
}

#characters { position: relative; }
.chars-decor {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
.chars-decor--best {
  top: 8px;
  left: clamp(20px, 3vw, 56px);
  width: clamp(110px, 12vw, 170px);
  transform: rotate(-5deg);
}
.chars-decor--bookmark {
  top: 40px;
  right: clamp(20px, 3vw, 80px);
  width: clamp(50px, 6vw, 80px);
  transform: rotate(6deg);
}

/* v24_10: 중간 viewport(1180~820)에서도 hero-decor--sale 숨김 — lead p 본문 overlap 방지 */
@media (max-width: 1180px){
  .hero-decor--sale { display: none; }
}
@media (max-width: 760px){
  .chars-decor--best { display: none; }
  .kit-corner-ribbon { width: 80px; }
}

/* ── MAGAZINE WALL 장식 sticker (사용자 시트 이미지 #7 카피) ── */
.mag-v2 { position: relative; }
.mag-decor { position: absolute; pointer-events: none; z-index: 4; }
.mag-decor--cover {
  top: 20px; right: clamp(40px, 8vw, 120px);
  width: clamp(70px, 8vw, 110px);
  transform: rotate(-10deg);
}
.mag-decor--miniset {
  top: 50%; right: clamp(20px, 3vw, 60px);
  width: clamp(90px, 10vw, 140px);
  transform: rotate(8deg);
}
.mag-decor--sparkle1 {
  top: 10%; left: 35%;
  width: clamp(28px, 3vw, 48px);
}
.mag-decor--sparkle2 {
  bottom: 14%; left: 45%;
  width: clamp(28px, 3vw, 48px);
}

.mag-v2-side { position: relative; }
.mv-side-decor { position: absolute; pointer-events: none; z-index: 3; }
.mv-side-decor--quote {
  top: -20px; right: -10px;
  width: clamp(70px, 8vw, 100px);
  transform: rotate(-6deg);
}
.mv-side-decor--price {
  bottom: -20px; left: -16px;
  width: clamp(80px, 9vw, 112px);  /* 16_price_tag@2x native = 112×60 */
  max-width: 112px;
  transform: rotate(-8deg);
}

/* v24_10: 매거진 sidebar/decor가 1180px 이하 1열로 무너질 때 캐릭터 카드와 겹침 방지 — 중간 viewport 강제 숨김 */
@media (max-width: 1180px){
  .mag-decor--cover, .mag-decor--miniset { display: none; }
  .mag-decor--sparkle1, .mag-decor--sparkle2 { width: 32px; }
  .mv-side-decor--quote, .mv-side-decor--price { display: none; }
}

/* ── SESSION 카드 강화 (white_toggle/coaching·session·btn 활용) ── */
#session {
  position: relative;
  padding-top: clamp(40px, 6vw, 90px);   /* sticker 영역 확보 — H2 가림 방지 */
}
.session-decor { position: absolute; pointer-events: none; z-index: 3; }
.session-decor--card {
  top: 10px; right: clamp(20px, 4vw, 80px);
  width: clamp(100px, 11vw, 150px);
  transform: rotate(8deg);
}
.session-decor--coaching {
  /* 좌→우상단 이동, H2 본문 침범 방지 — 두 sticker가 우상단 그룹 형성 */
  top: 10px; right: clamp(160px, 18vw, 260px);
  width: clamp(100px, 11vw, 140px);
  transform: rotate(-6deg);
}
.card-block { position: relative; overflow: visible; }
.card-block .card-stk--btn {
  position: absolute;
  bottom: -16px; right: -10px;
  width: clamp(90px, 10vw, 130px);
  pointer-events: none;
  z-index: 2;
  transform: rotate(-5deg);
}

/* ── KIT-FEATURE 가격 태그 (16_price_tag@2x native = 112×60) ── */
.kit-price-tag {
  position: absolute;
  bottom: clamp(10px, 2vw, 26px);
  right: clamp(10px, 2vw, 30px);
  width: clamp(80px, 9vw, 112px);  /* native cap 112 */
  max-width: 112px;
  z-index: 4;
  transform: rotate(-10deg);
  pointer-events: none;
}

/* ── PAY 흐름 sticker (STEP 띠 영역) ── */
.step-strip--with-pay { position: relative; }
.pay-decor { position: absolute; pointer-events: none; z-index: 4; }
.pay-decor--coupon {
  top: -28px; left: clamp(20px, 6vw, 80px);
  width: clamp(90px, 10vw, 140px);
  transform: rotate(-12deg);
}
.pay-decor--gift {
  top: -36px; right: clamp(30px, 7vw, 130px);
  width: clamp(70px, 8vw, 110px);
  transform: rotate(8deg);
}
.pay-decor--heal {
  bottom: -24px; right: clamp(20px, 5vw, 60px);
  width: clamp(50px, 6vw, 80px);
  transform: rotate(14deg);
}

/* ── MODAL 16-type 강화 (specificity 강화: store.css .modal-svg 룰 override) ── */
.modal-svg.modal-svg--type {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: auto;
  height: clamp(200px, 24vw, 280px);
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 60%, var(--c-yellow) 100%) !important;
  border-radius: 16px;
  border: 3px solid var(--c-ink);
  box-shadow: var(--shadow-card);
  padding: 0;
}
.modal-svg--type .modal-type-sticker {
  width: clamp(80px, 10vw, 130px);
  height: auto;
  filter: var(--stk-shadow);
}
.modal-svg--type .modal-type-num {
  position: absolute; top: 10px; right: 16px;
  color: #fff; font-family: var(--f-head); font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  text-shadow: 2px 2px 0 var(--c-ink);
  letter-spacing: -2px;
}

@media (max-width: 820px){
  .session-decor--card, .session-decor--coaching { display: none; }
  .card-block .card-stk--btn { width: 70px; }
  .kit-price-tag { width: 90px; }
  .pay-decor--coupon { width: 70px; top: -20px; }
  .pay-decor--gift { display: none; }
  .pay-decor--heal { width: 44px; }
}

/* ── 반응형 보강 (v23 sticker upgrade 후 자리 점검) ── */
@media (max-width: 820px){
  /* hero 6칸: 3열 → 2열로 압축 */
  .hero-grid--sheet { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .hero-grid--sheet .kit-tile { aspect-ratio: 1.1; padding: 12px 10px; }
  .hero-grid--sheet .kit-tile .ic img.ci-lg { max-width: 90px; max-height: 80px; }

  /* 캠프 4박스: 4열 → 2열 */
  .theme-grid--sheet { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .theme-grid--sheet .theme-card .glyph img.theme-img { max-width: 96px; max-height: 80px; }

  /* STEP 띠: 5개 가로 → 컬럼 wrap */
  .step-flow {
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 10px 14px;
  }
  .step-flow .step-arrow { display: none; }
  .step-flow .step { flex: 0 1 calc(50% - 14px); }
}

@media (max-width: 560px){
  /* hero 6칸: 모바일 좁은 화면에서도 2열 유지 (1열은 너무 비효율) */
  .hero-grid--sheet .kit-tile { padding: 10px 8px; aspect-ratio: 1; }
  .hero-grid--sheet .kit-tile .nm { font-size: 11px; }
  .hero-grid--sheet .kit-tile .ic img.ci-lg { max-width: 72px; max-height: 64px; }

  /* 캠프 박스 라벨 크기 축소 */
  .theme-grid--sheet .theme-card .glyph { height: 76px; }
  .theme-grid--sheet .theme-card .glyph img.theme-img { max-width: 78px; max-height: 76px; }
  .theme-grid--sheet .theme-card .nm-en { font-size: 13px; }

  /* kit-feature 영웅 박스 max width */
  .kit-hero-stage .kit-hero-img { max-width: 100%; }
  .workbook--sheet .workbook-img { max-width: 220px; }

  /* hero 장식 sticker 좌하단 SALE는 모바일에서 숨김 (이미 760px에서 처리, 더 작은 화면도 OK) */
  .hero-decor--new { width: 64px; }
  .chars-decor--bookmark { width: 44px; }

  /* STEP 5개는 1줄에 2개씩 */
  .step-flow .step { flex: 0 1 calc(50% - 10px); font-size: 12px; }
}

/* family 컬러 매핑 헬퍼 */
.family-falcon { --fam-1: var(--c-falcon-1); --fam-2: var(--c-falcon-2); }
.family-moon   { --fam-1: var(--c-moon-1);   --fam-2: var(--c-moon-2); }
.family-flower { --fam-1: var(--c-flower-1); --fam-2: var(--c-flower-2); }
.family-forest { --fam-1: var(--c-forest-1); --fam-2: var(--c-forest-2); }

/* ── 매직링크 모달 (magic-link.js) — 전역 공통 v23_15 ── */
#ml-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 24, 30, 0.62);
  display: none; align-items: center; justify-content: center;
  z-index: 200;
  padding: 20px;
}
#ml-overlay.open { display: flex; }
#ml-overlay .ml-card {
  position: relative;
  background: #fff;
  border: 3.5px solid var(--c-ink);
  border-radius: 22px;
  box-shadow: 10px 10px 0 0 var(--c-ink);
  padding: clamp(24px, 3vw, 40px);
  max-width: 460px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
#ml-overlay .ml-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: var(--c-yellow); border: 2.5px solid var(--c-ink);
  border-radius: 50%;
  font-weight: 900; cursor: pointer; font-size: 14px;
}
#ml-overlay h2 {
  font-family: var(--f-head); font-weight: var(--w-h);
  font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 6px;
  letter-spacing: -0.03em;
}
#ml-overlay .ml-step {
  display: inline-block; margin-left: 8px;
  font-family: var(--f-mono); font-size: 12px;
  color: var(--c-mute); font-weight: 500;
}
#ml-overlay .ml-lead {
  font-size: 14px; color: var(--c-ink); opacity: 0.82;
  margin: 8px 0 18px; line-height: 1.5;
}
#ml-overlay .ml-label {
  display: block; margin: 14px 0;
  font-family: var(--f-mono); font-size: 11px; color: var(--c-mute);
  letter-spacing: 0.08em; text-transform: uppercase;
}
#ml-overlay .ml-label small {
  text-transform: none; letter-spacing: 0; opacity: 0.7;
  margin-left: 4px; font-size: 10px;
}
#ml-overlay .ml-label input {
  display: block; width: 100%; margin-top: 6px;
  padding: 12px 14px;
  border: 2.5px solid var(--c-ink); border-radius: 10px;
  font-family: var(--f-body); font-size: 15px;
  background: var(--c-paper);
}
#ml-overlay .ml-label input:focus {
  outline: none; background: #fff; box-shadow: 4px 4px 0 0 var(--c-accent);
}
#ml-overlay .ml-check {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 16px 0; font-size: 13px; color: var(--c-ink); cursor: pointer;
}
#ml-overlay .ml-check input { margin-top: 3px; }
#ml-overlay .ml-cta {
  width: 100%; padding: 14px 22px;
  background: var(--c-accent); color: #fff;
  border: 3px solid var(--c-ink); border-radius: 999px;
  font-family: var(--f-head); font-weight: var(--w-h); font-size: 15px;
  box-shadow: 6px 6px 0 0 var(--c-ink);
  cursor: pointer; transition: transform .15s;
}
#ml-overlay .ml-cta:hover { transform: translateY(-2px); }
#ml-overlay .ml-cta--ghost { background: #fff; color: var(--c-ink); }
#ml-overlay .ml-foot {
  font-family: var(--f-mono); font-size: 11px; color: var(--c-mute);
  text-align: center; margin: 12px 0 0;
}
#ml-overlay .ml-error {
  margin: 12px 0 0; padding: 10px 14px;
  background: #FFE0E6; border: 2px solid var(--c-accent); border-radius: 10px;
  font-size: 13px; color: var(--c-ink);
}
#ml-overlay .ml-dev-block {
  margin: 12px 0; padding: 10px 14px;
  background: var(--c-cream); border: 2px dashed var(--c-ink); border-radius: 10px;
}
#ml-overlay .ml-dev-tag {
  display: inline-block; background: var(--c-ink); color: var(--c-yellow);
  font-family: var(--f-mono); font-size: 10px; padding: 2px 8px;
  border-radius: 999px; margin-bottom: 6px; letter-spacing: 0.1em;
}
#ml-overlay .ml-dev-token {
  display: block; font-family: var(--f-mono); font-size: 11px;
  word-break: break-all; color: var(--c-mute);
}
#ml-overlay .ml-done { text-align: center; padding: 20px 0; }
#ml-overlay .ml-done h3 {
  font-family: var(--f-head); font-weight: var(--w-h);
  font-size: 28px; color: var(--c-accent); margin: 0 0 8px;
}
#ml-overlay .ml-done p {
  font-size: 14px; color: var(--c-ink); opacity: 0.82; margin: 0 0 20px;
}