@charset "utf-8";
/* ===================================================================
   HaebetKR — Trust-first Redesign CSS (drop-in replacement for onlycss.css)
   - 디자인 목표: 신뢰감, 가독성, 전환 향상
   - HTML 구조 변경 없이 기존 클래스(.wrap, .toop, .gnb, .m-banner, .content, .footer 등)와
     메인 카드(.promotion-*)를 중심으로 스타일 개선
   - 컬러/라운드/그림자/애니메이션은 변수로 통제
   =================================================================== */

/* ---- Design Tokens ------------------------------------------------ */
:root{
  --bg:#0e1217;             /* 배경 */
  --panel:#141a22;          /* 패널 배경 */
  --panel-2:#1a212b;        /* 패널 Hover */
  --line:#232c38;           /* 경계선 */
  --fg:#e9edf1;             /* 본문 텍스트 */
  --muted:#9aa6b2;          /* 보조 텍스트 */
  --brand:#21c2ff;          /* 포인트 */
  --brand-2:#6a74ff;        /* 보조 포인트 */
  --success:#34d399;        /* 가입 CTA */
  --info:#2ea8ff;           /* 가이드 CTA */
  --warning:#fbbf24;
  --radius:16px;            /* 카드 라운드 */
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:0 6px 16px rgba(0,0,0,.25);
  --maxw:1200px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f8fa; --panel:#ffffff; --panel-2:#f1f5f9; --line:#e6e8ee; --fg:#0f1720; --muted:#5b6776 }
}

/* ---- Base --------------------------------------------------------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

p{ margin:0 }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }

/* System font + 한국어 가독 최적화 */
*{ font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Inter,
     "Spoqa Han Sans", Segoe UI, Roboto, Helvetica, Arial, sans-serif }

/* ---- Layout ------------------------------------------------------- */
.wrap{ max-width:var(--maxw); min-width:320px; margin:0 auto; padding:0 20px }
.user_layout{ }

/* ---- Top bar (account) ------------------------------------------- */
.toop{ height:36px; border-bottom:1px solid var(--line); color:var(--muted); }
.toop ul{ float:right; margin:0; padding:0 8px; height:36px; display:flex; align-items:center; gap:10px }
.toop ul li{ list-style:none; font-size:13px }
.toop ul li a{ color:var(--muted) }
.toop .gnb_setting{ color:var(--brand) }

/* ---- Header ------------------------------------------------------- */
.header{ margin:18px 0 10px }
.logo-item{ margin-top:22px; text-align:center }
.logo-item a img{ max-width:220px; filter: drop-shadow(0 2px 12px rgba(0,0,0,.15)); }

/* ---- GNB ---------------------------------------------------------- */
.gnb{ width:100%; height:auto; padding:10px 0 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center }
.gnb ul{ margin:0; padding:0; display:flex; gap:18px; justify-content:center; flex-wrap:wrap }
.gnb ul li{ list-style:none; text-transform:uppercase; letter-spacing:.5px }
.gnb ul li a{ color:var(--muted); font-weight:600; padding:10px 12px; border-radius:10px; transition:all .2s ease }
.gnb ul li.on a, .gnb ul li a:hover{ color:var(--fg); background:var(--panel-2) }
.gnb ul li a span{ font-size:15px }
.gnb ul li ul li{ display:none }

/* ---- Hero banner -------------------------------------------------- */
.m-banner{ width:100%; height:220px; margin:20px 0; border-radius:var(--radius); background: radial-gradient(70% 80% at 20% 10%, rgba(33,194,255,.18), transparent),
           radial-gradient(60% 80% at 80% 0%, rgba(106,116,255,.18), transparent), var(--panel); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm) }
.m-banner p{ color:var(--muted); font-size:18px; font-weight:500 }

/* ---- Content ------------------------------------------------------ */
.content{ padding:0; }

/* ---- Promotion Cards --------------------------------------------- */
.promotion-container{ display:grid; grid-template-columns:140px 1fr auto; gap:18px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px; box-shadow:var(--shadow-sm); transition:background .2s ease, transform .2s ease; margin:18px 0 }
.promotion-container:hover{ background:var(--panel-2); transform:translateY(-1px) }
.promotion-image{ width:140px; height:64px; object-fit:contain; background:rgba(255,255,255,.02); border-radius:12px; padding:10px; justify-self:start }
.promotion-details{ align-self:center }

.bonus-text{ color:var(--muted); line-height:1.5; margin-top:4px }
.bonus-text strong{ color:var(--fg) }

/* Buttons ----------------------------------------------------------- */
.myButton{ display:inline-flex; align-items:center; justify-content:center; padding:11px 16px; border-radius:12px; font-weight:700; font-size:14px; border:1px solid transparent; transition:.18s ease; box-shadow:var(--shadow-sm); }
.myButton:hover{ transform:translateY(-1px) }
.green-button{ background:var(--success); color:#06131b }
.blue-button{ background:transparent; border:1px dashed rgba(255,255,255,.22); color:var(--fg) }

/* CTA stack (우측 고정 너비) */
.button-container{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---- Footer ------------------------------------------------------- */
.footer{ margin-top:40px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.08)); padding:36px 20px; color:var(--muted); text-align:center; border-top:1px solid var(--line) }
.f_logo img{ max-width:160px; opacity:.9 }
.log_txt a{ color:var(--fg); font-weight:700 }
.footer_menu ul{ margin:14px 0 0; padding:0; display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.footer_menu ul li{ list-style:none }
.footer_menu ul li a{ color:var(--muted); font-weight:600 }
.footer_menu ul li.on a, .footer_menu ul li a:hover{ color:var(--fg) }
.f_cr_area{ margin-top:12px; font-size:12px }

/* ---- Utilities ---------------------------------------------------- */
.badge{ display:inline-block; padding:6px 10px; border-radius:12px; font-size:12px; background:var(--panel-2); color:var(--fg) }
.hr{ height:1px; background:var(--line); border:0; margin:20px 0 }

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 1000px){
  .promotion-container{ grid-template-columns:88px 1fr; }
  .promotion-image{ width:88px; height:48px }
  .button-container{ width:100% }
}
@media (max-width: 640px){
  .wrap{ padding:0 14px }
  .m-banner{ height:150px }
  .logo-item a img{ max-width:180px }
  .gnb ul{ gap:10px }
  .gnb ul li a span{ font-size:13px }
  .promotion-container{ padding:14px; gap:12px; border-radius:var(--radius-sm) }
  .myButton{ padding:10px 14px; font-size:13px }
}

/* ---- Optional: trust badges row (use in content) ------------------ */
.trust-row{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 0 }
.trust-row .badge{ background:rgba(46,168,255,.12); color:#bfe7ff; border:1px solid rgba(46,168,255,.25) }

/* ---- Reset legacy styles that could conflict ---------------------- */
.gnb ul li a{ text-decoration:none }
.footer p{ margin:0 }

/* nav 활성 라인 + 포커스 링 */
.gnb ul li a{ position:relative; outline:0 }
.gnb ul li a:focus-visible{ box-shadow:0 0 0 3px rgba(46,168,255,.35); border-radius:10px }
.gnb ul li.on a::after,
.gnb ul li a:hover::after{
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:3px;
  border-radius:3px; background:linear-gradient(90deg,var(--brand),var(--brand-2));
  opacity:.9;
}

/* 카드 내부 줄바꿈/간격 최적화 */
.promotion-details{ min-width:0 }          /* 긴 텍스트 말줄임 대비 */
.promotion-details .bonus-text{ margin:2px 0 }
.promotion-details .bonus-text:nth-child(1){ font-size:18px; font-weight:800; letter-spacing:.2px }
.promotion-details .bonus-text strong{ font-weight:800 }

/* 버튼 높이 일치 + 점선버튼 hover/active 구분 */
.myButton{ min-height:42px }
.blue-button:hover{ border-style:solid; background:rgba(255,255,255,.04) }
.myButton:active{ transform:translateY(0) scale(.99) }

@media (max-width: 480px){
  .button-container{ display:grid; grid-template-columns:1fr 1fr; }
  .myButton{ width:100%; justify-content:center }
}

/* 뱃지 스타일 (히어로/카드 재사용) */
.badge--soft{
  background:rgba(46,168,255,.12); color:#cfeaff;
  border:1px solid rgba(46,168,255,.25); padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:600; margin-right:6px
}
.m-banner{ position:relative; overflow:hidden }
.m-banner::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(50% 80% at 10% 10%, rgba(33,194,255,.18), transparent),
             radial-gradient(40% 60% at 90% 0%, rgba(106,116,255,.18), transparent);
  pointer-events:none;
}


/* 카드 상단 우측에 작은 라벨 */
.promotion-container{ position:relative }
.label{ position:absolute; top:12px; right:14px; font-size:11px; padding:4px 8px;
  border-radius:999px; letter-spacing:.3px; font-weight:800; opacity:.9 }
.label--best{ background:linear-gradient(90deg,#ffd54d,#ffb300); color:#3a2a00 }
.label--warn{ background:#3b1d1d; color:#ffb4b4; border:1px solid #5a2a2a }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}


@media (prefers-color-scheme: light){
  .blue-button{ border-color:#d8dee9; color:#0f1720 }
  .blue-button:hover{ background:#eef2f7 }
  .m-banner p{ color:#5b6776 }
}

/* 로고 흰 배경 필요할 때 */
.logo--whitebg{ background:#fff }

/* 카드 라벨(추천/메모) */
.promotion-container{ position:relative }
.label{
  position:absolute; top:12px; right:14px; font-size:11px; padding:4px 8px;
  border-radius:999px; letter-spacing:.3px; font-weight:800; opacity:.92;
}
.label--best{ background:linear-gradient(90deg,#ffd54d,#ffb300); color:#3a2a00 }
.label--note{ background:rgba(46,168,255,.14); color:#bfe7ff; border:1px solid rgba(46,168,255,.35) }

/* 본문 래퍼가 float되어 있어 푸터가 옆으로 뜨는 문제 해결 */
.rhymix_content,
.xe_content,
.xe-widget-wrapper{
  float:none !important;       /* 인라인 float:left 무력화 */
  width:100% !important;
}

/* 혹시 모듈이 내부에서 또 float을 쓴 경우 대비한 clearfix */
.content::after,
.rhymix_content::after,
.xe_content::after{
  content:"";
  display:block;
  clear:both;
}

/* 안전빵: 푸터는 반드시 새 줄에서 시작 */
.footer{ clear:both; }

/* ===== Hero trust-first copy ===== */
.hero{ text-align:center; padding:26px 18px 24px; max-width:880px; margin:0 auto }
.hero__title{
  margin:0 0 8px; font-size:clamp(22px,2.6vw,30px); font-weight:900; letter-spacing:.2px;
  background:linear-gradient(90deg,var(--fg),#cfe7ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  margin:0; color:var(--muted); font-size:15.5px; line-height:1.7;
}
.hero__sub strong{ color:var(--fg) }

/* badges */
.hero__badges{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
.hero-badge{
  display:inline-block; padding:7px 10px; font-size:12px; font-weight:700; border-radius:999px;
  background:rgba(46,168,255,.12); color:#cfeaff; border:1px solid rgba(46,168,255,.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

/* optional CTA */
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:16px; padding:10px 14px; border-radius:12px; font-weight:800; font-size:14px;
  color:var(--fg); border:1px dashed rgba(255,255,255,.25); text-decoration:none;
}
.btn-ghost:hover{ background:rgba(255,255,255,.05) }

/* hero container effect 보강 */
.m-banner{ position:relative; overflow:hidden; height:auto; padding:10px 0 16px }
.m-banner::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:260px;
  background:radial-gradient(70% 80% at 20% 10%, rgba(33,194,255,.18), transparent),
             radial-gradient(60% 80% at 80% 0%, rgba(106,116,255,.18), transparent);
  pointer-events:none;
}

/* Guide hero */
.guide-hero{ background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:22px; box-shadow:var(--shadow-sm); text-align:center; position:relative; overflow:hidden }
.guide-hero::before{ content:""; position:absolute; inset:-40% -10% auto -10%; height:220px;
  background:radial-gradient(60% 80% at 20% 10%, rgba(33,194,255,.18), transparent),
             radial-gradient(60% 80% at 80% 0%, rgba(106,116,255,.18), transparent); pointer-events:none }
.g-title{ margin:0 0 6px; font-size:clamp(20px,2.4vw,28px); font-weight:900; letter-spacing:.2px }
.g-sub{ margin:0; color:var(--muted) }
.g-badges{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.pill-badge{ padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  background:rgba(46,168,255,.12); color:#cfeaff; border:1px solid rgba(46,168,255,.25) }
.pill-safe{ background:rgba(52,211,153,.12); color:#d1ffe9; border-color:rgba(52,211,153,.3) }

.g-countdown{ margin-top:14px }
.g-countdown__title{ font-weight:900; color:var(--fg); margin-bottom:6px }
.g-countdown__time{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:24px; font-weight:900; letter-spacing:1px }
.g-countdown__hint{ color:var(--muted); font-size:12px }
.g-cta{ margin-top:12px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.g-code{ margin-top:6px; color:var(--muted); font-size:12px }
.g-code b{ color:var(--fg) }

/* Cards / sections */
.kcard{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; margin:18px 0;
  box-shadow:var(--shadow-sm) }
.kcard__head{ display:flex; align-items:center; gap:12px }
.kcard__logo{ background:#fff; border-radius:12px; padding:6px }
.klist{ margin:10px 0 0; padding-left:18px; color:var(--muted) }
.klist li{ margin:6px 0 }
.kcard__cta{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap }
.toc{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; padding:12px; background:var(--panel-2); border:1px dashed rgba(255,255,255,.18); border-radius:12px }
.toc__title{ font-weight:800; color:var(--fg); margin-right:4px }
.toc a{ color:var(--fg); opacity:.85 }
.ksection{ margin:24px 0 }
.ksection--cta{ text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px }
.kfig{ text-align:center; margin:12px 0 }
.kfig img{ border-radius:12px; border:1px solid var(--line) }
.kfig figcaption{ color:var(--muted); font-size:12px; margin-top:4px }
.ktable{ border:1px solid var(--line); border-radius:12px; overflow:hidden }
.ktable__row{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line) }
.ktable__row:first-child{ border-top:0 }
.ktable__cell{ padding:12px; display:flex; align-items:center; gap:8px }
.ktag{ background:#334155; color:#dbeafe; border:1px solid #3b4a62; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800 }
.ktag--green{ background:#0f3b2d; color:#a7f3d0; border-color:#145a46 }
.ksteps{ margin:10px 0 0; padding-left:18px }
.ksteps li{ margin:8px 0 }
.khelp{ display:block; margin-top:6px; color:var(--muted); font-size:12px }
.kgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.khash{ color:var(--muted); font-size:12px; margin-top:18px }

@media (max-width: 700px){
  .ktable__row{ grid-template-columns:1fr }
  .kgrid{ grid-template-columns:1fr }
}

.g-title{font-size:clamp(18px,2.1vw,26px)}
.g-sub{font-size:16px;color:rgba(255,255,255,.9)}

.g-countdown__time{font-size:22px;letter-spacing:1.2px;word-spacing:6px}

.green-button{
  box-shadow:0 0 16px rgba(52,211,153,.4),0 3px 10px rgba(0,0,0,.4);
  transition:all .2s ease;
}
.green-button:hover{transform:translateY(-2px)}

.kgrid{background:var(--panel-2);padding:14px;border-radius:16px}
.ksection--cta{background:linear-gradient(90deg,#1b2632,#15202b);box-shadow:0 0 20px rgba(0,0,0,.3)}

/* ================================
   HAEBET Footer – CSS only drop-in
   (HTML 구조 변경 없이 적용)
================================ */
:root{
  --hb-bg:#0b1118;
  --hb-panel:#0f1720;
  --hb-line:#1f2d3b;
  --hb-fg:#eaf2fb;
  --hb-muted:#9fb4c9;
  --hb-brand:#22c8ff;
  --hb-brand-2:#6b7bff;
}

/* 바탕 */
.footer{
  background:var(--hb-bg);
  color:var(--hb-fg);
  border-top:1px solid var(--hb-line);
  padding:28px 0 36px;
}

/* 컨테이너 */
.f_info_area,
.footer_menu,
.f_cr_area{
  max-width:1100px;
  margin:0 auto;
  padding:0 18px;
}

/* 상단 패널(로고+배지) */
.f_info{
  display:flex;
  align-items:center;
  justify-content: center;
  gap:24px;
  /* flex-wrap:wrap; */
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
}
.f_info br{display:none} /* HTML의 <br> 제거 효과 */

/* 로고 */
.f_logo{margin:0}
.f_logo a{display:inline-flex; align-items:center}
.f_logo img{
  height:26px; display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* 배지 */
.hb-brand-badges{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:12px 16px;
  align-items:center; justify-content:flex-end;
}
.hb-brand-badges li{display:flex; align-items:center}
.hb-brand-badges img{
  height:28px; display:block; opacity:.9;
  filter:grayscale(.12) contrast(1.02);
  transition:opacity .15s ease, filter .15s ease, transform .15s ease;
}
.hb-brand-badges img:hover{opacity:1; filter:none; transform:translateY(-1px)}

/* 풋터 메뉴 */
.footer_menu{margin-top:16px}
.footer_menu ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}

/* 하단 카피/디스클레이머 */
.f_cr_area{margin-top:14px; text-align:center}
.hb-disclaimer{
  color:var(--hb-muted);
  font-size:13px; line-height:1.7;
}
.hb-copy{
  color:#cfe2f7; opacity:.85;
  font-size:12.5px; margin:0;
}

/* 접근성: 키보드 포커스 */
.footer a:focus-visible{
  outline:2px solid rgba(167,200,255,.9);
  outline-offset:2px; border-radius:10px;
}

/* 반응형 */
@media (max-width:860px){
  .f_info{gap:14px}
  .hb-brand-badges{justify-content:flex-start}
}
@media (max-width:560px){
  .f_logo img{height:24px}
  .hb-brand-badges img{height:24px}
  .footer_menu a{height:38px; padding:0 12px; font-size:13.5px}
}