@charset "UTF-8";

/* ===== Gmarket Sans 웹폰트 (로또플레이와 동일 폰트 패밀리) ===== */
@font-face {
    font-family: 'GmarketSansM';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'GmarketSansB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'GmarketSansL';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}

/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Nanum Gothic', '나눔고딕', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-size: 13px; color: #333; background: #fff; line-height: 1.5;
}
a { text-decoration: none; color: inherit; }
input, select, textarea { font-size: 16px !important; }
ul, li { list-style: none; }
img { border: 0; vertical-align: middle; }
table { border-collapse: collapse; }
em { font-style: normal; }
button { font-family: inherit; cursor: pointer; }

/* ===== 상단 프로모션 띠 배너 ===== */
.top-award-banner {
    background: linear-gradient(90deg, #14284c 0%, #1e3d78 50%, #14284c 100%);
    color: rgba(255,255,255,.88); text-align: center;
    font-family: 'GmarketSansM', sans-serif; font-size: 12.5px;
    padding: 8px 12px; letter-spacing: -0.2px; line-height: 1.45;
}
.top-award-banner strong { color: #f6de9a; font-family: 'GmarketSansB', sans-serif; }
.top-award-banner .award-badge {
    display: inline-block; background: transparent;
    border: 1px solid rgba(246,222,154,.75); color: #f6de9a;
    font-family: 'GmarketSansB', sans-serif; font-size: 10px; letter-spacing: .8px;
    padding: 1px 8px; border-radius: 99px; margin-right: 8px; vertical-align: 1px;
}
.top-award-banner .inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; }
.top-award-banner .award-item { white-space: nowrap; }
.top-award-banner .award-item:not(:last-child)::after {
    content: ''; display: inline-block; width: 3px; height: 3px; margin-left: 8px;
    border-radius: 50%; background: #d4b15a; vertical-align: middle;
}

/* ===== 사이트 레이아웃 (모바일 퍼스트) ===== */
#SiteDefault { width: 100%; text-align: center; background: #fff; }
#SiteSetting { width: 100%; margin: 0 auto; text-align: left; }

/* ===== 헤더 (PC 전용 — 숨김) ===== */
.header { display: none; }

/* 상단 정보 줄 */
.top-info-row {
    display: flex; justify-content: space-between; align-items: center;
    height: 35px; font-family: 'GmarketSansM', sans-serif; font-size: 13px; color: #333;
}
.ti-label { color: #333; vertical-align: middle; }
.ti-black-box {
    display: inline-block; background: #000; color: #fff;
    padding: 3px 7px; margin-left: 4px; vertical-align: middle; letter-spacing: -0.5px;
}

/* 로고 줄 */
.logo-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0 22px;
}
.side-box {
    width: 250px; height: 54px; border: 1px solid #ddd; border-top: 2px solid #004EA2;
    display: flex; align-items: center;
}
.side-box.right-box { width: 270px; justify-content: flex-end; }
.side-box a {
    display: block; width: 100%; padding: 0 16px; font-family: 'GmarketSansM', sans-serif;
    font-size: 15px; color: #2f3743; letter-spacing: -1px; white-space: nowrap;
}
.side-box .side-icon {
    display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center;
    background: #004EA2; color: #fff; border-radius: 50%; font-size: 12px; margin-right: 8px;
}
.side-box em { font-family: 'GmarketSansB', sans-serif; font-size: 1.5em; color: #c54a47; padding: 0 3px; }
#top-call { text-align: right; }
#top-call .call-icon { color: #004EA2; margin-right: 6px; font-size: 17px; }
#top-call .call-num { font-family: 'GmarketSansB', sans-serif; font-size: 1.4em; color: #1428A0; margin-left: 6px; }

/* 중앙 로고 */
.logo-cell { flex: 1; display: flex; justify-content: center; }
.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.logo-img { max-height: 90px; vertical-align: middle; }
.logo-crown { color: #e5a023; font-size: 26px; margin-bottom: 2px; }
.logo-main {
    font-family: 'GmarketSansB', sans-serif; font-size: 34px; color: #21488A;
    letter-spacing: -1px;
}
.logo-en {
    font-family: 'GmarketSansM', sans-serif; font-size: 11px; color: #c54a47;
    letter-spacing: 5px; margin-top: 3px;
}

/* 네비게이션 바 */
.navi_wrap { position: relative; font-family: 'GmarketSansM', sans-serif; }
.navi_box { overflow: hidden; background: #21488A; }
.navi_box li { float: left; width: 20%; }
.navi_box li a {
    display: block; height: 15px; padding: 20px 0; text-align: center;
    font-size: 18px; line-height: 15px; color: #fff; position: relative; letter-spacing: -0.5px;
    border-left: 1px solid #30528C; border-right: 1px solid #123777;
}
.navi_box li:first-child a { border-left: 1px solid #123777; }
.navi_box li a:hover, .navi_box li.act a { background: #00347B; }

/* 서브 네비 */
.sub_navi_wrap {
    position: relative; height: 40px; border-bottom: 1px solid #A9ABB0; background: #f8f8f8;
    display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 0;
}
.notice_wrap { display: flex; align-items: center; font-family: 'GmarketSansM', sans-serif; font-size: 13px; }
.notice_wrap .notice-icon {
    background: #df4745; color: #fff; font-family: 'GmarketSansM', sans-serif; font-size: 12px;
    padding: 6px 7px 4px; margin-right: 14px;
}
.notice_wrap a { color: #454545; }
.notice_wrap a:hover { text-decoration: underline; }
.sub-right { display: flex; gap: 5px; }
.sub-right a {
    display: inline-block; padding: 5px 12px; font-family: 'GmarketSansM', sans-serif; font-size: 12px;
    color: #000; border: 1px solid #d9d9d9; background: #fff; border-radius: 1px;
}
.sub-right a:hover { background: #F2F3F7; }
.sub-right .btn-join { color: #fff; background: #21488A; border-color: #21488A; }
.sub-right .btn-join:hover { background: #00347B; }

/* ===== 메인 ===== */
.main { padding: 0; }

/* da1 : 히어로 + 프리미엄 배너 */
.da1 { }
.hero_box {
    width: 100%; border: none; background: #fff;
}
/* ===== SERVICE BAR ===== */
.svc-bar-wrap {
    display: flex; gap: 8px; padding: 12px 12px 0;
}
.svc-pill {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 0; border-radius: 10px;
    font-family: 'GmarketSansB', sans-serif; font-size: 12px;
    text-decoration: none; transition: all .2s;
}
.sp-earn { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.sp-earn:hover { background: #d1fae5; box-shadow: 0 2px 8px rgba(5,150,105,.15); }
.sp-proof { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.sp-proof:hover { background: #dbeafe; box-shadow: 0 2px 8px rgba(37,99,235,.15); }
.sp-my { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.sp-my:hover { background: #ede9fe; box-shadow: 0 2px 8px rgba(124,58,237,.15); }
.hero-head {
    position: relative; height: 24px; padding: 12px 15px; border-bottom: 1px solid #eee;
    font-family: 'GmarketSansM', sans-serif;
}
.hero-head h2 { font-size: 17px; color: #21488A; line-height: 24px; }
.hero-head .hero-date { position: absolute; top: 15px; right: 15px; font-size: 12px; color: #999; }

/* 부업 볼 */
.job-balls {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 30px 15px; background: linear-gradient(180deg,#fafbfc,#fff);
}
.ball-item { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.lotto-ball-idx {
    position: relative; width: 62px; height: 62px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: 'GmarketSansB', sans-serif; font-size: 22px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.22); overflow: hidden;
}
.lotto-ball-idx::before {
    content: ''; position: absolute; top: 6px; left: 10px; right: 10px; height: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 100%);
    border-radius: 50%;
}
.lotto-ball-idx.ball1 { background: radial-gradient(circle at 35% 30%, #ffd043, #e59300); }
.lotto-ball-idx.ball2 { background: radial-gradient(circle at 35% 30%, #4da7ff, #005ec4); }
.lotto-ball-idx.ball3 { background: radial-gradient(circle at 35% 30%, #ff6b6b, #c92a2a); }
.lotto-ball-idx.ball4 { background: radial-gradient(circle at 35% 30%, #a0aec0, #4a5568); }
.lotto-ball-idx.ball5 { background: radial-gradient(circle at 35% 30%, #48bb78, #22543d); }
.ball-name { font-family: 'GmarketSansM', sans-serif; font-size: 12px; color: #444; }
.ball-plus { font-size: 26px; color: #999; font-family: 'GmarketSansL', sans-serif; margin: 0 2px; }

/* 1위 부업 정보 바 */
.top-job-bar {
    display: flex; align-items: center; justify-content: center; gap: 40px;
    padding: 14px; background: #f8f9fa; border-top: 1px solid #eee; border-bottom: 1px solid #eee;
    font-family: 'GmarketSansM', sans-serif;
}
.tjb-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tjb-label { font-size: 12px; color: #888; }
.tjb-value { font-size: 18px; color: #21488A; font-family: 'GmarketSansB', sans-serif; }
.tjb-value.red { color: #c54a47; }
.tjb-divider { width: 1px; height: 34px; background: #ddd; }

/* 실시간 통계 바 */
.realtime-bar {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 11px; background: #21488A; color: #cdd8ec; font-family: 'GmarketSansM', sans-serif; font-size: 13px;
}
.realtime-bar strong { color: #ffd36b; font-family: 'GmarketSansB', sans-serif; }
.realtime-bar .rt-sep { color: rgba(255,255,255,0.3); }

/* 우측 로그인 박스 */
.login_wrap { float: right; width: 283px; }
.login-box {
    padding: 16px 15px; border: 1px solid #C2CFD7; background: #E8F2F8;
    font-family: 'GmarketSansM', sans-serif;
}
.login-box .welcome { font-size: 15px; color: #21488A; line-height: 1.4; margin-bottom: 12px; }
.login-box input {
    display: block; width: 100%; padding: 11px 10px; margin-bottom: 7px;
    border: 1px solid #b9c6cf; background: #fff; font-size: 13px; font-family: inherit;
}
.login-box .login-submit {
    display: block; width: 100%; padding: 12px 0; border: none; background: #21488A;
    color: #fff; font-family: 'GmarketSansM', sans-serif; font-size: 15px; margin-top: 3px;
}
.login-box .login-submit:hover { background: #00347B; }
.login-sub-links { text-align: center; margin-top: 11px; font-size: 12px; color: #666; }
.login-sub-links a { color: #555; }
.login-sub-links a:hover { color: #21488A; text-decoration: underline; }
.login-sub-links span { color: #bbb; margin: 0 6px; }
.login-banner { margin-top: 8px; border: 1px solid #ddd; }
.login-banner .lb-item {
    display: block; padding: 14px 14px 14px 50px; font-family: 'GmarketSansM', sans-serif;
    position: relative;
}
.login-banner .lb-item + .lb-item { border-top: 1px solid #e4e4e4; }
.login-banner .lb-item::before {
    content: '✦'; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: #0E77D9; font-size: 16px;
}
.login-banner .lb-item strong { display: block; color: #0E77D9; font-size: 13px; margin-bottom: 4px; }
.login-banner .lb-item span { color: #666; font-size: 12px; }

/* da3 : 수익인증 영역 */
.da3 {
    margin: 0; border: none; overflow: visible; background: transparent;
}
.da3-title {
    height: 15px; padding: 11px 15px; font-family: 'GmarketSansM', sans-serif; font-size: 15px;
    color: #555; border-bottom: 1px solid #ddd;
}
.da3-title strong { color: #00347B; }
.da3-body { display: flex; flex-direction: column; }

/* 좌측 섹션 */
.left_section {
    width: 100%; padding: 0; border-bottom: none;
}
/* 누적 수익 랭커 */
.earn-hero {
    margin: 0;
    padding: 28px 18px 24px;
    color: #f7f3ea;
    font-family: 'GmarketSansM', sans-serif;
    word-break: keep-all;
    background:
        radial-gradient(70% 50% at 100% -8%, rgba(255, 186, 170, .38), transparent 52%),
        radial-gradient(55% 65% at -12% 110%, rgba(90, 10, 24, .55), transparent 56%),
        linear-gradient(165deg, #5c101c 0%, #8d1c2c 46%, #3e0b14 100%);
}
.eh-inner { width: 100%; }
.eh-head { position: relative; padding: 8px 18px 4px; }
.eh-head::before {
    content: ""; position: absolute; left: 50%; top: 42%;
    width: 220px; height: 90px; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255, 120, 110, .55), transparent 72%);
    filter: blur(6px); pointer-events: none;
}
.eh-kicker {
    position: relative; margin: 0 auto; width: fit-content;
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px; border-radius: 999px;
    background: rgba(255, 214, 200, .12);
    border: 1px solid rgba(255, 210, 190, .45);
    font-family: 'GmarketSansB', sans-serif;
    font-size: 12px; color: #ffe4dc; letter-spacing: .04em;
    box-shadow: 0 0 16px rgba(255, 140, 120, .25);
}
.eh-kicker i {
    width: 6px; height: 6px;
    background: #fff;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: eh-twinkle 1.6s ease-in-out infinite;
}
.eh-title {
    position: relative; margin: 10px 0 0; text-align: center;
    font-family: 'GmarketSansB', sans-serif;
    font-size: 34px; line-height: 1.15; letter-spacing: -1px;
}
.eh-title span {
    background: linear-gradient(100deg, #fff 0%, #ffe8df 22%, #fff 40%, #ffd7b0 55%, #fff 72%, #ffe8df 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 12px rgba(255, 170, 150, .65));
    animation: eh-shine 2.6s linear infinite;
}
.eh-lead {
    position: relative; margin: 8px 0 0; text-align: center;
    font-size: 14px; line-height: 1.55; color: rgba(255, 232, 226, .9);
}
.eh-spark {
    position: absolute; width: 10px; height: 10px; background: #fff;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    filter: drop-shadow(0 0 4px rgba(255, 220, 200, .9));
    animation: eh-twinkle 1.8s ease-in-out infinite;
    pointer-events: none;
}
.eh-spark.s1 { top: 6px; left: 18px; }
.eh-spark.s2 { top: 18px; right: 14px; width: 14px; height: 14px; animation-delay: .4s; }
.eh-spark.s3 { top: 58px; left: 8px; width: 7px; height: 7px; animation-delay: .9s; }
.eh-spark.s4 { bottom: 6px; right: 22px; animation-delay: 1.2s; }
@keyframes eh-shine { to { background-position: -220% 0; } }
@keyframes eh-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .eh-title span, .eh-spark, .eh-kicker i { animation: none; }
}
.eh-prize {
    margin: 16px 0 0; text-align: center;
    padding: 14px 16px 12px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 220, 210, .2), rgba(255,255,255,.07));
    border: 1px solid rgba(255, 210, 196, .42);
    font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.92);
}
.eh-prize strong { font-family: 'GmarketSansB', sans-serif; color: #fff; white-space: nowrap; }
.eh-prize em{
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 10px 0 0; padding-top: 10px;
    border-top: 1px solid rgba(255, 214, 150, .32);
    font-style: normal; font-family: 'GmarketSansB', sans-serif;
    font-size: 13px; line-height: 1.45; letter-spacing: -.2px; color: #ffe3a4;
}
.eh-prize em::before{
    content: ""; width: 8px; height: 8px; flex: none; background: #ffe3a4;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: drop-shadow(0 0 4px rgba(255, 214, 120, .8));
}
.eh-prize span{
    display: block; width: fit-content; margin: 8px auto 0; padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,220,210,.45);
    font-family: 'GmarketSansB', sans-serif; font-size: 12px; color: #ffe8e2;
}
.eh-timer{
    position:relative;margin:12px 0 0;padding:10px 12px 10px;border-radius:16px;
    background:
        radial-gradient(90% 80% at 50% -20%,rgba(255,186,170,.38),transparent 58%),
        linear-gradient(165deg,#d64545 0%,#a11f2d 56%,#7a1422 100%);
    border:1px solid rgba(255,196,184,.8);
    box-shadow:0 12px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.22);
    outline:1px solid rgba(255,180,168,.35);outline-offset:-6px;
}
.eh-logo{
    display:block;height:42px;width:auto;margin:0 auto;
    padding:3px 6px 2px;background:#fff;border-radius:10px;
    box-shadow:0 6px 12px rgba(0,0,0,.2);
}
.eh-timer-kicker{margin:6px 0 0;text-align:center;font-family:'GmarketSansM',sans-serif;font-size:12px;color:rgba(255,255,255,.78)}
.eh-timer-sub{margin:4px 0 0;text-align:center;font-family:'GmarketSansM',sans-serif;font-size:11px;color:rgba(255,228,222,.78)}
.eh-clock{
    margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 8px;
    font-family:'GmarketSansM',sans-serif;font-size:12px;color:#ffd2c8;
}
.eh-clock span{white-space:nowrap}
.eh-clock b{
    font-family:'GmarketSansB',sans-serif;font-weight:normal;
    font-size:22px;letter-spacing:-.6px;color:#fff;line-height:1;
    font-variant-numeric:tabular-nums;margin-right:1px;
}
.eh-clock .is-live b{color:#ffe08a}
.rk-last{
    margin-top:16px;padding:12px 12px 10px;border-radius:14px;
    background:rgba(40,8,14,.32);border:1px solid rgba(255,196,184,.28);
}
.rk-last-title{margin:0 0 10px;text-align:center;font-family:'GmarketSansB',sans-serif;font-size:14px;color:#ffd0c4}
.rk-last-list{margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rk-last-list li{
    display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;
    min-height:48px;padding:8px 10px;border-radius:12px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,196,184,.2);
}
.rk-last .rk-medal{width:32px;height:32px;font-size:14px}
.rk-last .rk-who{font-size:15px}
.rk-last .rk-num{display:flex;align-items:center;gap:5px}
.rk-last .rk-num .usdt-ico{width:16px;height:16px;flex:0 0 16px}
.rk-last .rk-num b{font-family:'GmarketSansB',sans-serif;font-weight:normal;font-size:15px;color:#fff;letter-spacing:-.4px}
.rk-last .rk-num small{font-family:'GmarketSansM',sans-serif;font-size:11px;color:rgba(255,255,255,.55)}
.rk-last-empty{margin:0;text-align:center;font-size:13px;color:rgba(247,243,234,.6)}
.rk-list { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rk-list li {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center; column-gap: 10px;
    min-height: 72px;
    padding: 12px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
}
.rk-body {
    min-width: 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 6px 10px;
}
.rk-medal {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'GmarketSansB', sans-serif; font-size: 18px;
    background: rgba(255,255,255,.14); color: #fff;
}
.rk-g1 .rk-medal { background: linear-gradient(160deg, #fff3c8, #e2b03d); color: #3d2b08; }
.rk-g2 .rk-medal { background: linear-gradient(160deg, #f7f8fb, #b5becc); color: #2a3140; }
.rk-g3 .rk-medal { background: linear-gradient(160deg, #f8d8c0, #c4885c); color: #3d2414; }
.rk-list li.is-first {
    min-height: 82px;
    padding: 14px 12px;
    background: linear-gradient(100deg, rgba(255, 214, 204, .28), rgba(255,255,255,.08) 58%);
    border-color: rgba(255, 210, 196, .55);
}
.rk-who-wrap { flex: 1 1 88px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rk-who {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: 'GmarketSansB', sans-serif;
    font-size: 18px; letter-spacing: -0.4px; color: #fff;
}
.rk-list li.is-first .rk-who { font-size: 20px; }
.rk-sub {
    font-style: normal;
    font-size: 12px; color: rgba(247, 243, 234, .62);
}
.rk-amt {
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
    flex: 0 0 auto; margin-left: auto;
}
.rk-num {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: nowrap;
}
.rk-num .usdt-ico { width: 18px; height: 18px; flex: 0 0 18px; display: block; }
.rk-num b {
    display: block;
    font-family: 'GmarketSansB', sans-serif; font-weight: normal;
    font-size: 18px; line-height: 1; letter-spacing: -0.6px; color: #fff;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rk-list li.is-first .rk-num .usdt-ico { width: 22px; height: 22px; flex-basis: 22px; }
.rk-list li.is-first .rk-num b { font-size: 22px; line-height: 1; color: #fff; }
.rk-amt small {
    display: block; margin: 0; padding-right: 1px; line-height: 1;
    font-family: 'GmarketSansM', sans-serif;
    font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.55);
}
@media (max-width: 380px) {
    .rk-list li, .rk-list li.is-first { column-gap: 8px; padding-left: 10px; padding-right: 10px; }
    .rk-num b { font-size: 16px; }
    .rk-num .usdt-ico { width: 16px; height: 16px; flex-basis: 16px; }
    .rk-list li.is-first .rk-num b { font-size: 18px; }
    .rk-list li.is-first .rk-num .usdt-ico { width: 18px; height: 18px; flex-basis: 18px; }
    .rk-who, .rk-list li.is-first .rk-who { font-size: 16px; }
}
.earn-hero .earn-empty { color: rgba(255, 230, 224, .75); }
.earn-hero .earn-empty-cta { color: #ffd0c4; }
.earn-podium { display: flex; flex-direction: column; gap: 10px; }
.earn-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; border-radius: 12px;
    background: #fff; border: 1px solid #e5e7eb;
    transition: transform .15s, box-shadow .15s;
}
.earn-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.ec-1 { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fde68a; }
.ec-2 { background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-color: #cbd5e1; }
.ec-3 { background: linear-gradient(135deg, #fff7ed, #ffedd5); border-color: #fed7aa; }
.ec-rank { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ec-info { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.ec-user { font-family: 'GmarketSansM', sans-serif; font-size: 14px; color: #374151; }
.ec-amount { font-family: 'GmarketSansB', sans-serif; font-size: 16px; color: #111827; }
.ec-1 .ec-amount { color: #b45309; }
.ec-2 .ec-amount { color: #475569; }
.ec-3 .ec-amount { color: #c2410c; }
.earn-empty {
    text-align: center; padding: 30px 10px;
    font-family: 'GmarketSansM', sans-serif; color: #9ca3af;
}
.earn-empty p { margin: 10px 0 6px; font-size: 13px; }
.earn-empty-cta {
    font-size: 13px; color: #2563eb; font-family: 'GmarketSansB', sans-serif;
}
.earn-empty-cta:hover { text-decoration: underline; }

/* platform stats mini cards */
.plat-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.ps-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 8px; border-radius: 10px; background: #f8fafc; border: 1px solid #e8ecf1;
}
.ps-label { font-family: 'GmarketSansM', sans-serif; font-size: 11px; color: #6b7280; }
.ps-val {
    font-family: 'GmarketSansB', sans-serif; font-size: 15px;
}
.ps-val small { font-size: 11px; font-family: 'GmarketSansM', sans-serif; color: #9ca3af; }
.ps-blue { color: #2563eb; }
.ps-green { color: #059669; }
.ps-purple { color: #7c3aed; }
.income-list-title {
    margin-top: 26px; padding-bottom: 8px; font-family: 'GmarketSansM', sans-serif; font-size: 14px;
    color: #3a3a3a; border-bottom: 1px solid #3a3a3a;
}
.income-list { margin-top: 6px; }
.income-list table { width: 100%; }
.income-list td {
    padding: 8px 2px; font-family: 'GmarketSansM', sans-serif; font-size: 12px;
    border-bottom: 1px solid #f0f0f0; color: #555;
}
.income-list .il-job { color: #333; }
.income-list .il-amount { color: #C54A47; text-align: center; font-size: 11px; }
.income-list .il-user { color: #999; text-align: right; font-size: 11px; }

/* 중앙 구분선 (숨김) */
.middle_line { display: none; }

/* 우측 섹션 */
.right_section { flex: 1; padding: 0 0 26px; min-width: 0; }
.sec-title {
    position: relative; margin: 28px 0 12px; padding-bottom: 9px;
    font-family: 'GmarketSansM', sans-serif; font-size: 16px; color: #3a3a3a;
    border-bottom: 1px solid #3a3a3a;
}
.right_section > .sec-title:first-child { margin-top: 0; }
.sec-title strong { color: #00347B; }

/* 랭킹 테이블 */
.ranking-table table { width: 100%; font-family: 'GmarketSansM', sans-serif; }
.ranking-table thead th {
    height: 38px; font-size: 13px; color: #000; text-align: center;
    border-top: 1px solid #21488A; border-bottom: 1px solid #CCC; background: #F5F6F7;
}
.ranking-table tbody td {
    height: 40px; font-size: 13px; color: #686D78; text-align: center;
    border-bottom: 1px solid #eee;
}
.ranking-table tbody tr:hover { background: #f8fafd; }
.ranking-table .rt-title { text-align: left; color: #333; padding-left: 6px; }
.ranking-table .rt-cat { color: #888; font-size: 12px; }
.ranking-table .rt-income { color: #C54A47; letter-spacing: -0.5px; }
.ranking-table .rt-star { color: #f59f00; }

/* 순위 아이콘 (pill) */
.rank_icon {
    display: inline-block; width: 40px; height: 20px; line-height: 20px; text-align: center;
    font-family: 'GmarketSansM', sans-serif; font-size: 12px; border-radius: 20px; color: #fff;
}
.rank_icon.rank1 { background: #f25552; }
.rank_icon.rank2 { background: #049de8; }
.rank_icon.rank3 { background: #26a89c; }
.rank_icon.rank4 { background: #ffb506; }
.rank_icon.rank5 { background: #62808e; }

/* 난이도 라벨 */
.level { display: inline-block; padding: 3px 9px; border-radius: 11px; font-size: 11px; font-family: 'GmarketSansM', sans-serif; }
.level-1 { background: #e6f4ea; color: #2f9e44; }
.level-2 { background: #fff6e0; color: #e67700; }
.level-3 { background: #fdeaea; color: #c92a2a; }

/* 쉐어픽 패밀리 이벤트 */
.bk-event {
    position: relative;
    margin: 0;
    padding: 26px 18px 22px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    overflow: hidden;
    color: #f6f0e4;
    background:
        radial-gradient(90% 70% at 100% -8%, rgba(240, 206, 122, .32), transparent 48%),
        radial-gradient(70% 55% at -8% 108%, rgba(90, 150, 230, .22), transparent 52%),
        linear-gradient(165deg, #101c38 0%, #18356c 52%, #0d2144 100%);
    border: 1px solid rgba(232, 196, 122, .42);
    box-shadow: 0 16px 34px rgba(13, 33, 68, .16), inset 0 1px 0 rgba(255, 255, 255, .14);
    font-family: 'GmarketSansM', sans-serif;
    word-break: keep-all;
}
.bk-event::before {
    content: '';
    position: absolute;
    top: 0; left: 22px; right: 22px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f3d78a 20%, #fff6d4 50%, #f3d78a 80%, transparent);
}
.bk-event-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 14px;
}
.bk-event-kicker {
    font-size: 11px; letter-spacing: 1.6px; color: #f0d48a;
}
.bk-event-pill {
    flex-shrink: 0;
    padding: 4px 9px; border-radius: 20px;
    background: rgba(240, 212, 138, .14);
    border: 1px solid rgba(240, 212, 138, .4);
    color: #f6e3ad; font-size: 11px; letter-spacing: -0.3px;
}
.bk-event-title {
    margin: 0 0 8px;
    font-family: 'GmarketSansB', sans-serif;
    font-size: 23px; line-height: 1.35; letter-spacing: -0.6px; color: #fff;
}
.bk-event-title em {
    background: linear-gradient(180deg, #fff6d2 10%, #e8c15a 90%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #f0d48a;
}
.bk-event-lead {
    margin: 0;
    font-size: 13px; line-height: 1.65; color: rgba(246, 240, 228, .82);
}
.bk-event-who {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 14px 0 0;
}
.bk-event-who li {
    padding: 5px 10px; border-radius: 20px;
    background: rgba(240, 212, 138, .16);
    border: 1px solid rgba(240, 212, 138, .45);
    font-size: 12px; color: #f6e3ad; letter-spacing: -0.3px;
}
.bk-event-steps {
    margin: 18px 0 0;
    padding: 4px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.bk-event-steps li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bk-event-steps li:last-child { border-bottom: none; }
.bk-step-no {
    flex-shrink: 0;
    width: 34px; margin-top: 1px;
    font-family: 'GmarketSansB', sans-serif;
    font-size: 13px; letter-spacing: .4px; color: #f0d48a;
}
.bk-event-steps strong {
    display: block; margin-bottom: 3px;
    font-family: 'GmarketSansB', sans-serif;
    font-size: 14px; color: #fff; letter-spacing: -0.3px;
}
.bk-event-steps p {
    margin: 0;
    font-size: 12.5px; line-height: 1.6; color: rgba(246, 240, 228, .72);
}
.bk-event-notice {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 6px; padding: 14px 13px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff8ea, #f6e7c4);
    color: #3d2a0e;
    box-shadow: inset 0 0 0 1px rgba(196, 146, 46, .28);
}
.bk-event-notice-mark {
    flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(196, 146, 46, .16);
}
.bk-event-notice strong {
    display: block; margin-bottom: 4px;
    font-family: 'GmarketSansB', sans-serif;
    font-size: 13px; letter-spacing: -0.4px; color: #6b4510;
}
.bk-event-notice p {
    margin: 0;
    font-size: 12px; line-height: 1.65; color: #5c4630;
}

/* 분석 박스 */
.analysis-box {
    border: 1px solid #e3e3e3; background: #fbfcfd; padding: 16px 18px;
    font-family: 'GmarketSansM', sans-serif;
}
.ab-row { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 13px; color: #444; }
.ab-row .ab-val { color: #00347B; }
.ratio-bar { display: flex; height: 30px; border-radius: 4px; overflow: hidden; margin: 10px 0 12px; }
.ratio-seg {
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px;
    font-family: 'GmarketSansM', sans-serif;
}
.ratio-seg.level-1 { background: #40c057; }
.ratio-seg.level-2 { background: #fab005; }
.ratio-seg.level-3 { background: #e8554e; }
.ab-comment { font-size: 13px; color: #21488A; }

/* 게시판 3단 */
.board-row { display: flex; flex-direction: column; gap: 20px; margin-top: 22px; padding: 0 16px; }
.board-col { flex: 1; min-width: 0; }
.board-head {
    padding: 9px 0; font-family: 'GmarketSansM', sans-serif; font-size: 14px; color: #3a3a3a;
    border-bottom: 2px solid #4B4B4B;
}
.board-list { padding-top: 4px; }
.board-list li {
    display: flex; align-items: center; height: 32px; font-family: 'GmarketSansM', sans-serif; font-size: 13px;
    border-bottom: 1px dotted #e5e5e5;
}
.board-list li a {
    flex: 1; min-width: 0; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center;
}
.board-list li a:hover { color: #c54a47; text-decoration: underline; }
.board-list .dot { color: #bbb; margin-right: 4px; flex-shrink: 0; }
.board-list .b-date { color: #aaa; font-size: 11px; margin-left: 8px; flex-shrink: 0; }

/* 카테고리 */
.cat-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-item {
    flex: 1 1 calc(50% - 8px); display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border: 1px solid #e3e3e3; background: #fafafa;
    font-family: 'GmarketSansM', sans-serif;
}
.cat-item:hover { border-color: #21488A; background: #f3f7fc; }
.cat-name { font-size: 14px; color: #333; }
.cat-count { font-size: 13px; color: #c54a47; }

/* ===== LIVE FEED ===== */
.live-feed-section {
    margin: 0; background: #f6f7fa; overflow: hidden;
    border-top: 1px solid rgba(228, 184, 74, .35);
}
.lf-head {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 18px 12px; background: #fff;
    font-family: 'GmarketSansB', sans-serif; font-size: 15px; color: #102848;
}
.lf-dot-pulse {
    width: 7px; height: 7px; border-radius: 50%; background: #e4b84a;
    box-shadow: 0 0 0 4px rgba(228, 184, 74, .18);
    animation: lf-pulse 1.6s ease-in-out infinite;
}
@keyframes lf-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.lf-sub {
    margin-left: auto; font-size: 10px; font-family: 'GmarketSansB', sans-serif;
    color: #8a6a22; background: rgba(228, 184, 74, .16); padding: 3px 9px;
    border-radius: 20px; letter-spacing: 1.2px;
}
.lf-scroll { max-height: 280px; overflow-y: auto; background: #fff; }
.lf-scroll::-webkit-scrollbar { width: 3px; }
.lf-scroll::-webkit-scrollbar-thumb { background: #e4d7b0; border-radius: 4px; }
.lf-row {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 18px; border-bottom: 1px solid #f0f2f5;
    font-family: 'GmarketSansM', sans-serif; font-size: 13px;
}
.lf-row:last-child { border-bottom: none; }
.lf-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-family: 'GmarketSansB', sans-serif;
    flex-shrink: 0; min-width: 62px; background: none; padding: 0;
}
.lf-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.lf-in { color: #0b7a52; }
.lf-in::before { background: #12a36a; }
.lf-out { color: #b42318; }
.lf-out::before { background: #e11d48; }
.lf-earn { color: #8a6a22; }
.lf-earn::before { background: #e4b84a; }
.lf-user { color: #8b93a1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-amount {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'GmarketSansB', sans-serif; color: #009393;
    flex-shrink: 0; letter-spacing: -0.3px;
}
.usdt-ico { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.lf-row.is-new { animation: lf-arrive .45s ease; }
@keyframes lf-arrive { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.lf-time { font-size: 11px; color: #b0b7c3; flex-shrink: 0; min-width: 52px; text-align: right; }

/* 홈 수익인증 후기 — 게시판과 같은 글, 같은 썸네일 */
.proof-home {
    margin: 0; background: #fff; overflow: hidden;
    border-top: 1px solid rgba(228, 184, 74, .35);
}
.proof-home-head {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 18px 12px;
    font-family: 'GmarketSansB', sans-serif; font-size: 15px; color: #102848;
}
.proof-home-head a {
    margin-left: auto; font-family: 'GmarketSansM', sans-serif;
    font-size: 12px; color: #8a6a22; text-decoration: none; letter-spacing: -0.2px;
}
.proof-rows { background: #fff; }
.proof-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid #f0f2f5;
    text-decoration: none; color: inherit;
}
.proof-row:last-child { border-bottom: none; }
.proof-row-thumb {
    width: 96px; height: 72px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.proof-row-thumb img.is-real {
    width: 96px; height: 72px; object-fit: cover; object-position: center 22%; display: block;
}
.proof-row-thumb img.is-ico { width: 36px; height: 36px; }
.proof-row-copy { flex: 1; min-width: 0; }
.proof-row-copy em {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; font-style: normal;
    font-family: 'GmarketSansB', sans-serif; font-size: 13.5px;
    letter-spacing: -0.4px; color: #102848; line-height: 1.4;
}
.proof-row-copy span {
    display: block; margin-top: 6px;
    font-family: 'GmarketSansM', sans-serif; font-size: 12px; color: #8b93a1;
}
.proof-row:active .proof-row-copy em { color: #21488A; }
.proof-more {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 6px 18px 16px; height: 46px; border-radius: 12px;
    background: #102848; color: #f6d778; text-decoration: none;
    font-family: 'GmarketSansB', sans-serif; font-size: 13.5px; letter-spacing: -0.3px;
}
.proof-more::after { content: '›'; font-size: 18px; line-height: 1; color: #e4b84a; }
.proof-more:active { background: #21488A; }

/* ===== 가이드북 바로가기 ===== */
.guide-jump{
    display:flex;align-items:center;gap:12px;margin:12px;padding:14px 14px 14px 16px;
    border-radius:14px;text-decoration:none;color:#fff;word-break:keep-all;
    background:
        radial-gradient(80% 140% at 100% 0%, rgba(255,214,120,.28), transparent 52%),
        linear-gradient(135deg,#071428 0%,#12356e 100%);
    border:1px solid #1d4a86;box-shadow:0 8px 20px rgba(16,40,72,.12);
}
.guide-jump-ico{
    width:42px;height:42px;border-radius:12px;flex-shrink:0;
    background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;
}
.guide-jump-copy{flex:1;min-width:0}
.guide-jump-copy strong{display:block;font-family:'GmarketSansB',sans-serif;font-size:15px;letter-spacing:-.3px;font-weight:normal}
.guide-jump-copy em{display:block;margin-top:3px;font-family:'GmarketSansM',sans-serif;font-size:12px;color:rgba(255,255,255,.72)}
.guide-jump-go{
    flex-shrink:0;padding:8px 12px;border-radius:999px;
    background:linear-gradient(180deg,#fff6d4,#e4b84a);color:#3d2a08;
    font-family:'GmarketSansB',sans-serif;font-size:12px;letter-spacing:-.2px;
}
.guide-jump:active{transform:translateY(1px)}

/* ===== FAQ ===== */
.faq-section {
    margin: 16px 12px 0; background: #fff; border: 1px solid #e8ecf1;
    border-radius: 12px; overflow: hidden;
}
.faq-head {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px; border-bottom: 1px solid #eee;
    font-family: 'GmarketSansB', sans-serif; font-size: 15px; color: #1a1a2e;
}
.faq-item { border-bottom: 1px solid #f3f4f6; }
.faq-item:last-child { border-bottom: none; }
.faq-q {
    padding: 14px 18px; cursor: pointer;
    font-family: 'GmarketSansM', sans-serif; font-size: 13.5px; color: #374151;
    list-style: none; display: flex; align-items: center; gap: 8px;
    transition: background .15s;
}
.faq-q:hover { background: #f8fafc; }
.faq-q::before {
    content: 'Q'; font-family: 'GmarketSansB', sans-serif; font-size: 12px;
    color: #fff; background: #21488A; width: 22px; height: 22px;
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.faq-q::after {
    content: ''; margin-left: auto; width: 8px; height: 8px;
    border-right: 2px solid #9ca3af; border-bottom: 2px solid #9ca3af;
    transform: rotate(45deg); transition: transform .2s; flex-shrink: 0;
}
.faq-item[open] .faq-q::after { transform: rotate(-135deg); }
.faq-q::-webkit-details-marker { display: none; }
.faq-a {
    padding: 0 18px 16px 48px;
    font-family: 'GmarketSansM', sans-serif; font-size: 13px;
    color: #6b7280; line-height: 1.7;
}

/* ===== 푸터 ===== */
.footer { min-width: 0; margin-top: 14px; }
.footer-navi { background: #2B2D2F; }
.footer-navi ul {
    width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; height: auto; padding: 4px 0;
}
.footer-navi li {
    flex: 0 0 50%; display: flex; align-items: center; justify-content: center;
    position: relative; padding: 9px 0;
}
.footer-navi li::after { display: none; }
.footer-navi li a { font-family: 'GmarketSansM', sans-serif; font-size: 12px; color: #cfcfcf; }
.footer-navi li a:hover { color: #fff; }
.footer-navi li a.bold { color: #fff; }
.footer-info {
    width: 100%; margin: 24px auto 0; display: flex; flex-direction: column;
    align-items: flex-start; gap: 16px; padding: 0 14px;
    font-family: 'GmarketSansM', sans-serif;
}
.fi-logo {
    width: 100%; flex-shrink: 0; display: flex; flex-direction: row; align-items: center;
    gap: 8px;
}
.fi-logo .logo-crown { font-size: 22px; }
.fi-logo-text { font-family: 'GmarketSansB', sans-serif; font-size: 22px; color: #21488A; }
.footer-logo-img { max-height: 40px; vertical-align: middle; }
.fi-card {
    width: 100%; border: 1px solid #e6ebf2; border-radius: 16px;
    overflow: hidden; background: #fff;
}
.fi-facts { width: 100%; margin: 0; }
.fi-facts div {
    display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center;
    padding: 11px 14px; border-top: 1px solid #eef2f7;
}
.fi-facts div:first-child { border-top: none; }
.fi-facts dt, .fi-facts dd { margin: 0; }
.fi-facts dt { font-size: 12px; color: #8b95a5; }
.fi-facts dd {
    font-family: 'GmarketSansB', sans-serif; font-size: 13px; color: #1c2b42;
    line-height: 1.45; word-break: keep-all;
}
.fi-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-top: 1px solid #e6ebf2; background: #f7f9fc;
}
.fi-act {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; color: #102848;
    font-family: 'GmarketSansB', sans-serif; font-size: 14px;
}
.fi-cs { border-right: 1px solid #e6ebf2; }
.fi-actions .fi-act:only-child { grid-column: 1 / -1; border-right: none; }
.fi-tg { background: #fff; }
.m-menu-tg {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 10px; min-height: 46px; border-radius: 12px;
    background: #fff; border: 1px solid #d5e6f4; color: #102848;
    font-family: 'GmarketSansB', sans-serif; font-size: 14px; text-decoration: none;
}
.m-menu-tg svg { flex: none; }
.footer-copyright {
    margin-top: 24px; padding: 13px 0; text-align: center; background: #F1F1F1;
    border-top: 1px solid #B6B6B8; font-family: 'GmarketSansM', sans-serif; font-size: 11px; color: #848484;
}

/* ===== 맨위로 버튼 ===== */
.scroll-top {
    position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; z-index: 500;
    background: #21488A; color: #fff; border: none; border-radius: 4px; font-size: 16px;
    opacity: 0; visibility: hidden; transition: all 0.25s; box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.scroll-top.show { opacity: 1; visibility: visible; }
.scroll-top:hover { background: #00347B; }

/* ===== 모바일 헤더 / 메뉴 / 히어로 (기본 표시) ===== */

/* ============================================================
   모바일 퍼스트 레이아웃 (PC/모바일 동일)
   ============================================================ */
body { font-size: 14px; }
.footer { min-width: 0; }
.footer-navi ul, .footer-info { width: 100%; }
.top-award-banner { font-size: 12px; padding: 8px 12px; line-height: 1.45; }

    /* ===== 모바일 헤더 (로또플레이 모바일 스타일) ===== */
    .m-header {
        display: block; position: sticky; top: 0; z-index: 400; background: #fff;
    }

    /* 로고 줄: 왼쪽 로그인 / 중앙 로고 / 오른쪽 회원가입 */
    /* logo_wrap */
    .m-logo-wrap {
        position: relative; height: 78px; margin: 0;
        text-align: center; background: #fff;
        border-bottom: 1px solid #e8e8e8;
    }
    .m-hdr-left { position: absolute; top: 0; left: 10px; }
    .m-hdr-right { position: absolute; top: 0; right: 10px; }
    .m-hdr-btn {
        display: block; height: 78px; padding: 14px 10px 0 10px;
        text-align: center; text-decoration: none;
    }
    .m-hdr-btn dl { margin: 0; padding: 0; }
    .m-hdr-btn dt { text-align: center; line-height: 1; }
    .m-hdr-ico { width: 26px; height: 26px; display: inline-block; }
    .m-hdr-btn dd {
        margin: 5px 0 0 0; padding: 0;
        font-family: 'GmarketSansM', sans-serif;
    }
    .m-hdr-btn dd b { font-weight: bold; }
    .m-hdr-left .m-hdr-btn dd b {
        display: inline-block; padding: 5px 12px;
        font-size: 13px; font-weight: bold; line-height: 1.2;
        color: #fff; background: #475069; border-radius: 3px;
        letter-spacing: -0.3px;
    }
    .m-hdr-right .m-hdr-btn dd b {
        display: inline-block; padding: 5px 12px;
        font-size: 13px; font-weight: bold; line-height: 1.2;
        color: #fff; background: #00819A; border-radius: 3px;
        letter-spacing: -0.3px;
    }
    .m-hdr-logo {
        display: block; height: 78px; line-height: 74px;
        margin: 0; text-align: center;
    }
    .m-hdr-logo a { display: inline-block; vertical-align: middle; }
    .m-hdr-logo img { max-height: 60px; vertical-align: middle; }

    /* 퀵메뉴바 */
    .m-quick-nav {
        display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
        background: linear-gradient(180deg, #2C5199 0%, #21488A 100%);
        border-bottom: 1px solid #1a3b73;
    }
    .m-quick-nav::-webkit-scrollbar { display: none; }
    .m-qn-item {
        flex: 1 1 0; min-width: 0; display: block; padding: 14px 2px; text-align: center;
        font-family: 'GmarketSansM', sans-serif; font-size: 14px; font-weight: bold;
        color: #c8d5ea; white-space: nowrap; letter-spacing: -.4px;
        border-right: 1px solid rgba(255,255,255,0.1);
    }
    .m-qn-item:last-child { border-right: none; }
    .m-qn-item.active, .m-qn-item:active { color: #fff; background: #00357B; }

    /* 인포바 */
    .m-info-bar {
        position: relative; overflow: hidden;
        display: flex; align-items: center; min-height: 0; height: auto;
        border-bottom: 1px solid rgba(253, 224, 138, .28);
        background:
            radial-gradient(120% 80% at 50% 0%, rgba(255, 236, 179, .22), transparent 55%),
            linear-gradient(100deg, #071428 0%, #12356e 46%, #0c3d45 100%);
        box-shadow: none;
    }
    .m-info-bar::before { content: none; }
    @keyframes infoShine {
        0% { transform: translateX(-130%); }
        42%, 100% { transform: translateX(130%); }
    }
    .m-hamburger {
        position: relative; z-index: 1;
        flex-shrink: 0; width: 40px; align-self: stretch; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 4px;
        background: none; border: none; border-right: 1px solid rgba(255,255,255,.12); cursor: pointer;
    }
    .m-hamburger span {
        display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px;
        box-shadow: none;
    }
    .m-info-msg {
        position: relative; z-index: 1;
        flex: 1; display: flex; justify-content: center;
        padding: 4px 8px 5px 2px;
    }
    .m-info-glow {
        max-width: 100%; text-align: center;
        padding: 0; border: none; border-radius: 0;
        background: none; box-shadow: none;
    }
    .m-info-main {
        margin: 0; font-family: 'GmarketSansB', sans-serif; font-size: 12px;
        color: #fff; letter-spacing: -.35px; line-height: 1.25;
        text-shadow: none;
    }
    .m-info-main b {
        background: linear-gradient(90deg, #ffe9a0 0%, #fff6d0 48%, #f5c542 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
        filter: none;
    }
    .m-info-sub {
        margin: 1px 0 0; font-family: 'GmarketSansM', sans-serif; font-size: 10.5px;
        color: #d7e8f8; letter-spacing: -.2px; line-height: 1.3;
        text-shadow: none;
    }
    .m-info-cta { display: none; /* CTA 제거됨 */
        white-space: nowrap;
    }

    /* ===== 모바일 히어로 슬라이더 ===== */
    .m-hero-slider {
        display: block; position: relative; overflow: hidden; background: #1a1a2e;
        touch-action: pan-y;
    }
    .slider-track {
        display: flex; transition: transform 0.45s ease;
    }
    .slide {
        min-width: 100%; height: 200px; display: flex; align-items: center; justify-content: center;
        position: relative;
    }
    .slide.slide-promo { justify-content: flex-start; }
    .slide.slide-promo img {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; object-position: right center;
    }
    .slide-promo-copy {
        position: relative; z-index: 1; text-align: left;
        padding: 4px 12px 22px 22px; max-width: 52%;
    }
    .slide-promo-copy .slide-title {
        margin-bottom: 6px; line-height: 1.25;
        text-shadow: 0 2px 14px rgba(0,0,0,.45);
    }
    .slide-promo-copy .slide-sub {
        color: rgba(255,255,255,.9);
        text-shadow: 0 1px 10px rgba(0,0,0,.4);
    }
    .slide-content { text-align: center; color: #fff; padding: 20px; }
    .slide-badge {
        display: inline-block; padding: 3px 12px; margin-bottom: 10px; border-radius: 3px;
        background: #E93B3B; color: #fff; font-family: 'GmarketSansB', sans-serif; font-size: 12px;
    }
    .slide-badge.new { background: #03C75A; }
    .slide-content h3 {
        font-family: 'GmarketSansM', sans-serif; font-size: 14px; color: rgba(255,255,255,0.8);
        margin-bottom: 8px;
    }
    .slide-title {
        font-family: 'GmarketSansB', sans-serif; font-size: 22px; margin-bottom: 6px;
    }
    .slide-sub { font-size: 13px; color: rgba(255,255,255,0.7); }
    .slider-dots {
        position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
        display: flex; gap: 7px;
    }
    .slider-dots .dot {
        width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35);
        transition: all 0.3s;
    }
    .slider-dots .dot.active { background: #fff; width: 20px; border-radius: 4px; }
    .slider-counter {
        position: absolute; bottom: 12px; right: 14px;
        font-family: 'GmarketSansM', sans-serif; font-size: 12px; color: rgba(255,255,255,0.6);
        background: rgba(0,0,0,0.3); padding: 2px 10px; border-radius: 10px;
    }
    .slider-counter span:first-child { color: #fff; font-weight: bold; }

    /* ===== 메인 콘텐츠 모바일 ===== */
    .main { padding: 0; }
    #SiteSetting { padding: 0; }
    .hero_box { float: none; width: 100%; border: none; border-top: none; }
    .svc-bar-wrap { padding: 10px 12px 0; }

    .job-balls { gap: 10px; padding: 22px 12px; flex-wrap: wrap; }
    .lotto-ball-idx { width: 52px; height: 52px; font-size: 18px; }
    .ball-name { font-size: 11px; }

    .hero-head { border-top: 3px solid #21488A; }

    .da3 { margin: 0; border: none; }
    .da3-body { flex-direction: column; }
    .left_section { width: 100%; border-right: none; border-bottom: none; padding: 0; }
    .middle_line { display: none; }
    .right_section { padding: 0 0 26px; }
    .income-list .il-amount { font-size: 12px; }

    .board-row { flex-direction: column; gap: 20px; }
    .cat-item { flex: 1 1 calc(50% - 8px); }
    .arc-grid { gap: 14px; }
    .arc-stats { gap: 0; padding: 18px 10px; }
    .arc-stat-num { font-size: 22px; }
    .arc-filter { gap: 6px; }
    .dt-title { font-size: 20px; }
    .dt-proof-grid { grid-template-columns: repeat(2, 1fr); }
    .dt-meta-bar { flex-direction: column; align-items: flex-start; }
    .dt-actions { flex-direction: column; }
    .dt-like-btn, .dt-share-btn { width: 100%; text-align: center; }
    .dt-cmt-write { flex-direction: column; }
    .dt-cmt-submit { width: 100%; }
    .dt-nav { flex-direction: column; }
    .dt-nav-item { text-align: center; }
    .acd-hero { padding: 28px 20px; border-radius: 0; margin-left: -14px; margin-right: -14px; }
    .acd-hero-title { font-size: 22px; }
    .acd-keys { grid-template-columns: repeat(2, 1fr); }
    .acd-section h2 { font-size: 17px; }
    .acd-related-grid { grid-template-columns: 1fr; }

    /* 푸터 */
    .footer-info { flex-direction: column; gap: 16px; align-items: flex-start; padding: 0 14px; }
    .fi-logo { width: 100%; border-right: none; padding-right: 0; align-items: flex-start; flex-direction: row; gap: 8px; }
    .footer-navi ul { flex-wrap: wrap; height: auto; padding: 4px 0; }
    .footer-navi li { flex: 0 0 50%; padding: 9px 0; }
    .footer-navi li::after { display: none; }

    /* 모바일 슬라이드 메뉴 */
    /* 모바일 슬라이드 메뉴 */
    .m-menu-overlay {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 900;
        opacity: 0; visibility: hidden; transition: all 0.3s ease;
        backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    }
    .m-menu-overlay.show { opacity: 1; visibility: visible; }
    .m-menu-panel {
        display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
        width: 300px; max-width: 84%; background: #fff; z-index: 901;
        transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
        box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    }
    .m-menu-panel.show { transform: translateX(0); }

    /* 메뉴 상단 통합 (로고+프로필) */
    .m-menu-top {
        background: linear-gradient(160deg, #152e5e 0%, #21488A 40%, #2c5ba0 100%);
        position: relative; overflow: hidden;
        padding: 18px 18px 20px; text-align: center;
    }
    .m-menu-top::before {
        content: ''; position: absolute; top: -50px; right: -30px;
        width: 140px; height: 140px; border-radius: 50%;
        background: rgba(255,255,255,0.04);
    }

    .m-menu-close {
        position: absolute; top: 14px; right: 14px; z-index: 2;
        display: flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; border-radius: 50%;
        background: rgba(255,255,255,0.12); border: none; color: rgba(255,255,255,0.6);
        cursor: pointer; transition: all 0.2s;
    }
    .m-menu-close:hover { background: rgba(255,255,255,0.22); color: #fff; }

    .m-menu-logo-card {
        display: inline-flex; align-items: center; justify-content: center;
        width: 72px; height: 72px; margin: 0 auto 16px;
        background: #fff; border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }
    .m-menu-logo-img {
        max-width: 54px; max-height: 54px;
    }

    /* 프로필 섹션 */
    .m-menu-profile {
        display: flex; align-items: center; gap: 12px;
        text-align: left; position: relative; z-index: 1;
    }
    .m-menu-avatar {
        width: 42px; height: 42px; border-radius: 50%;
        background: rgba(255,255,255,0.14); border: 2px solid rgba(255,255,255,0.22);
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .m-menu-profile-txt { flex: 1; }
    .m-menu-greeting {
        margin: 0 0 3px 0; font-size: 12px; color: rgba(255,255,255,0.55);
        font-family: 'GmarketSansM', sans-serif;
    }
    .m-menu-balance {
        margin: 4px 0 6px; font-size: 13px; color: rgba(255,255,255,0.8);
    }
    .m-menu-balance strong {
        font-family: 'GmarketSansB', sans-serif; color: #ffd54f; font-size: 15px;
    }
    .m-menu-login-link {
        font-size: 14px; color: #fff; font-family: 'GmarketSansB', sans-serif;
        text-decoration: none; letter-spacing: -0.3px;
    }
    .m-menu-login-link:active { opacity: 0.8; }

    /* 내비게이션 링크 */
    .m-menu-nav { flex: 1; overflow-y: auto; padding: 10px 0; }
    .m-menu-nav a {
        display: flex; align-items: center; gap: 14px; padding: 14px 20px;
        margin: 0 10px; border-radius: 8px;
        font-family: 'GmarketSansM', sans-serif; font-size: 15px;
        color: #333; text-decoration: none; letter-spacing: -0.3px;
        transition: background 0.15s, color 0.15s;
    }
    .m-menu-nav a svg { color: #21488A; flex-shrink: 0; }
    .m-menu-nav a:hover { background: #f0f5fb; color: #21488A; }
    .m-menu-nav a:active { background: #e4edf8; color: #21488A; }

    /* 하단 영역 */
    .m-menu-footer {
        border-top: 1px solid #eee; padding: 14px 16px 20px;
        background: #fafbfc;
    }
    .m-menu-auth { display: flex; gap: 8px; }
    .m-menu-auth a {
        flex: 1; text-align: center; padding: 13px 0;
        font-family: 'GmarketSansB', sans-serif; font-size: 14px;
        border-radius: 6px; text-decoration: none; transition: opacity 0.2s;
        letter-spacing: -0.3px;
    }
    .m-menu-auth a:active { opacity: 0.8; }
    .m-btn-login { border: 1.5px solid #21488A; color: #21488A; background: #fff; }
    .m-btn-join { background: #21488A; color: #fff; border: none; }
    .m-menu-tel {
        margin: 12px 0 0; text-align: center; font-size: 13px; color: #888;
        font-family: 'GmarketSansM', sans-serif;
    }
    .m-menu-tel strong, .m-menu-tel a { color: #21488A; font-size: 15px; }

/* ============================================================
   반응형 : 작은 모바일 (max-width: 480px)
   ============================================================ */
@media screen and (max-width: 480px) {
    .top-award-banner { font-size: 11px; padding: 7px 10px; }
    .m-logo-wrap { height: 68px; }
    .m-hdr-btn { height: 68px; padding: 12px 6px 0 6px; }
    .m-hdr-ico { width: 22px; height: 22px; }
    .m-hdr-btn dd { margin-top: 4px; }
    .m-hdr-btn dd b { font-size: 12px !important; padding: 4px 9px !important; }
    .m-hdr-logo { height: 68px; line-height: 64px; }
    .m-hdr-logo img { max-height: 50px; }
    .m-qn-item { font-size: 12px; padding: 12px 1px; letter-spacing: -.6px; }
    .m-info-main { font-size: 12px; }
    .m-info-sub { font-size: 10.5px; }
    .m-hamburger { width: 38px; }
    .m-hamburger span { width: 18px; }

    .slide { height: 170px; }
    .slide.slide-promo { height: 170px; }
    .slide-promo-copy { padding-left: 16px; max-width: 58%; }
    .slide-title { font-size: 19px; }
    .slide-content h3 { font-size: 13px; }

    .hero-head h2 { font-size: 15px; }
    .hero-head .hero-date { position: static; display: block; margin-top: 4px; }
    .job-balls { gap: 6px; padding: 16px 6px; }
    .lotto-ball-idx { width: 44px; height: 44px; font-size: 15px; }
    .ball-name { font-size: 10px; }
    .ball-plus { font-size: 18px; }

    .top-job-bar { flex-direction: column; gap: 10px; padding: 12px; }
    .top-job-bar .tjb-divider { width: 60%; height: 1px; }
    .tjb-value { font-size: 15px; }

    .realtime-bar { flex-direction: column; gap: 4px; font-size: 12px; }
    .realtime-bar .rt-sep { display: none; }

    .ranking-table thead th:nth-child(3), .ranking-table tbody td:nth-child(3),
    .ranking-table thead th:nth-child(6), .ranking-table tbody td:nth-child(6) { display: none; }
    .ranking-table .rt-title { font-size: 12px; }

    .da3 { margin-left: 0; margin-right: 0; }
    .left_section { padding: 0; }
    .sec-title { font-size: 14px; }
    .cat-item { flex: 1 1 100%; }

    .board-list li { height: auto; padding: 9px 0; }
    .board-list li a { white-space: normal; }

    .scroll-top { right: 12px; bottom: 12px; width: 38px; height: 38px; font-size: 14px; }
    .footer-navi li { flex: 0 0 50%; }
}

/* ============================================================
   로그인 페이지 (.form_login)
   ============================================================ */
.form_login {
    width: 680px; margin: 0 auto; min-height: 640px; padding: 0 0 60px; text-align: center;
    font-family: 'GmarketSansM', sans-serif;
}
.form_login h1 {
    margin-top: 50px; margin-bottom: 26px; font-size: 22px; font-weight: normal; color: #2E2E2E;
    letter-spacing: -0.5px;
}
.form_login h1 strong { color: #21488A; }
.form_login .form_box {
    width: 476px; margin: 0 auto; padding: 34px 64px 28px; border: 1px solid #E9EAEA; background: #FBFCFD;
    box-sizing: border-box;
}
.form_login .input_box .txt { width: 348px; margin: 0 auto 8px; text-align: left; color: #727272; font-size: 14px; }
.form_login .input_box.mt10 { margin-top: 10px; }
.form_login .btn_box.mt10 { margin-top: 14px; }

/* 입력창 래퍼 + 아이콘 */
.pw-field-wrap {
    position: relative; width: 348px; margin: 0 auto;
}
.pw-field-wrap input {
    width: 100%; box-sizing: border-box; padding: 15px 48px 15px 12px;
    font-size: 15px; border: 1px solid #d8d8d8; background: #fff; font-family: inherit;
}
.pw-field-wrap input:focus { outline: none; border-color: #21488A; }
.pw-toggle-btn {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 4px;
    display: flex; align-items: center; justify-content: center; opacity: 0.5;
}
.pw-toggle-btn:hover { opacity: 1; }

.save-id-row { width: 348px; margin: 12px auto 0; text-align: left; }
.save-id-row label { font-size: 13px; color: #666; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.save-id-row input { width: 16px; height: 16px; }

.form_login .btn_submit {
    display: block; width: 348px; margin: 0 auto; padding: 16px 0; border: none; cursor: pointer;
    background: #21488A; color: #fff; font-family: 'GmarketSansM', sans-serif; font-size: 17px;
}
.form_login .btn_submit:hover { background: #00347B; }

.rs_wrap {
    width: 348px; margin: 0 auto 16px; padding: 13px 0; text-align: center; color: #E93B3B;
    border: 1px solid #fae1e1; background: #fdf5f5; border-radius: 6px; font-size: 13px; font-weight: bold;
}
.rs_wrap.hide { display: none; }

.others_nav_box { margin-top: 24px; text-align: center; }
.others_nav_box li { position: relative; display: inline-block; padding: 0 16px; font-size: 13px; }
.others_nav_box li a { color: #555; }
.others_nav_box li a:hover { color: #21488A; text-decoration: underline; }
.others_nav_box li span { position: absolute; top: 3px; right: 0; width: 1px; height: 12px; background: #ddd; }
.form_login .desc {
    margin-top: 30px; text-align: center; font-size: 13px; line-height: 1.9; color: #9a9a9a;
}
.form_login .desc strong { color: #21488A; }

.find-page {
    max-width: 440px; margin: 0 auto; padding: 28px 16px 48px;
    font-family: 'GmarketSansM', sans-serif;
}
.find-card {
    position: relative; overflow: hidden;
    padding: 26px 20px 22px; border-radius: 20px;
    background: #fff; border: 1px solid #e6edf6;
    box-shadow: 0 10px 28px rgba(16, 40, 72, .08);
}
.find-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, #21488A, #3d6cb5);
}
.find-kicker {
    margin: 0; text-align: center;
    font-family: 'GmarketSansB', sans-serif; font-size: 12px;
    letter-spacing: .18em; color: #21488A;
}
.find-card h1 {
    margin: 8px 0 0; text-align: center;
    font-family: 'GmarketSansB', sans-serif; font-weight: normal;
    font-size: 24px; letter-spacing: -.6px; color: #102848;
}
.find-lead {
    margin: 10px 0 0; text-align: center;
    font-size: 13px; line-height: 1.6; color: #5c6b80;
}
.find-field { margin-top: 14px; text-align: left; }
.find-field label { display: block; margin-bottom: 6px; font-size: 13px; color: #31445f; }
.find-field input {
    width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px;
    border: 1px solid #d7e0ec; border-radius: 12px; background: #fff;
    font-family: inherit; font-size: 15px; color: #1c2b42;
}
.find-field input:focus { outline: none; border-color: #21488A; }
.find-submit {
    width: 100%; margin-top: 18px; height: 50px; border: 0; border-radius: 12px;
    background: #21488A; color: #fff; cursor: pointer;
    font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 16px;
}
.find-submit:disabled { opacity: .6; cursor: default; }
.find-msg { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.find-msg.is-bad { background: #fff5f5; color: #c62828; border: 1px solid #ffd6d6; }
.find-msg.is-ok { background: #f3f7fd; color: #21488A; border: 1px solid #d6e2f5; }
.find-idbox {
    margin-top: 4px; padding: 16px 12px; border-radius: 14px; text-align: center;
    background: linear-gradient(180deg, #f7f9fd, #eef3fb);
}
.find-idbox span { display: block; font-size: 12px; color: #6b7c93; }
.find-idbox b {
    display: block; margin-top: 4px;
    font-family: 'GmarketSansB', sans-serif; font-weight: normal;
    font-size: 22px; letter-spacing: -.4px; color: #21488A;
}
.find-back, .find-login {
    display: block; margin-top: 16px; text-align: center;
    font-size: 13px; color: #21488A;
}
.find-note { margin: 12px 0 0; text-align: center; font-size: 12px; line-height: 1.55; color: #8a96a8; }

/* ============================================================
   회원가입 페이지 (.join)
   ============================================================ */
.join { width: 680px; margin: 0 auto; padding: 44px 0 70px; font-family: 'GmarketSansM', sans-serif; }
.join-title { font-size: 26px; color: #21488A; text-align: center; }
.join-sub { margin-top: 10px; margin-bottom: 30px; text-align: center; font-size: 14px; color: #777; }
.join-table { width: 100%; border-top: 2px solid #21488A; }
.join-table th, .join-table td { padding: 16px 14px; border-bottom: 1px solid #eee; vertical-align: middle; text-align: left; }
.join-table th { width: 150px; background: #FBFCFD; font-size: 14px; color: #333; font-weight: normal; }
.join-table th .ess { color: #E62D03; margin-right: 3px; }
.j-input {
    width: 100%; max-width: 340px; padding: 12px 12px; border: 1px solid #d8d8d8; background: #fff;
    font-size: 14px; font-family: inherit; box-sizing: border-box;
}
.j-input:focus { outline: none; border-color: #21488A; }
.input-with-btn { display: flex; gap: 6px; align-items: center; max-width: 340px; }
.input-with-btn .j-input { flex: 1; }
.dup-btn {
    flex-shrink: 0; padding: 12px 14px; border: 1px solid #21488A; background: #fff; color: #21488A;
    font-family: 'GmarketSansM', sans-serif; font-size: 13px; white-space: nowrap; cursor: pointer;
}
.dup-btn:hover { background: #21488A; color: #fff; }
.help { display: inline-block; margin-top: 6px; font-size: 12px; color: #999; }
.help.green { color: #339900; }
.help.error { color: #E93B3B; }
.help.ok { color: #2f9e44; }

.pw-strength {
    width: 100%; max-width: 340px; height: 4px; background: #e8e8e8;
    border-radius: 2px; margin-top: 8px; overflow: hidden;
}
.pw-bar {
    height: 100%; width: 0; border-radius: 2px;
    transition: width 0.3s, background 0.3s;
}
.pw-bar.weak { width: 25%; background: #e53935; }
.pw-bar.fair { width: 50%; background: #fb8c00; }
.pw-bar.good { width: 75%; background: #43a047; }
.pw-bar.strong { width: 100%; background: #2e7d32; }

.join_rules { margin-top: 10px; }
.join_rules .agree_all {
    padding: 0 0 18px; margin: 28px 0 10px; text-align: left; font-size: 16px; font-weight: bold; color: #212121;
    border-bottom: 1px solid #ddd;
}
.join_rules .agree_all label { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.join_rules input[type=checkbox] { width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
.rules-note { font-size: 12px; color: #888; text-align: left; margin-bottom: 8px; }
.terms_wrap { margin-top: 8px; }
.terms_wrap .agree { margin: 18px 0 8px; text-align: left; font-size: 14px; color: #212121; }
.terms_wrap .agree label { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.terms_wrap .agree strong { color: #E62D03; }
.terms_wrap .agree strong.opt { color: #888; }
.terms_box {
    margin-top: 2px; text-align: left; height: 96px; overflow-y: auto; padding: 12px; line-height: 1.7;
    font-size: 12px; color: #666; border: 1px solid #ddd; background: #fff;
}
.terms-full {
    display: inline-block; margin-top: 6px;
    font-family: 'GmarketSansM', sans-serif; font-size: 12px; color: #21488A;
}
.join-btn-box { margin-top: 26px; text-align: center; }
.member_join_btn {
    padding: 17px 56px; border: 1px solid #21488A; background: #21488A; color: #fff; cursor: pointer;
    font-family: 'GmarketSansM', sans-serif; font-size: 18px; font-weight: bold;
}
.member_join_btn:hover { background: #00347B; }
.member_join_btn:disabled { background: #999; border-color: #999; cursor: not-allowed; }

.join-done {
    text-align: center; padding: 60px 20px 80px; animation: joinFadeIn 0.5s ease;
}
@keyframes joinFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.join-done-icon { margin-bottom: 28px; }
.join-done-title {
    font-family: 'GmarketSansB', sans-serif; font-size: 24px; color: #21488A; margin-bottom: 12px;
}
.join-done-msg { font-size: 16px; color: #333; margin-bottom: 6px; }
.join-done-msg span { font-weight: bold; color: #21488A; }
.join-done-sub { font-size: 14px; color: #888; margin-bottom: 36px; }
.join-done-btn {
    display: inline-block; padding: 16px 48px; background: #21488A; color: #fff;
    font-family: 'GmarketSansM', sans-serif; font-size: 17px; font-weight: bold;
    text-decoration: none; transition: background 0.2s;
}
.join-done-btn:hover { background: #00347B; }

/* ============================================================
   로그인/가입 모바일 대응 + 전반적 모바일 세밀 개선
   ============================================================ */
/* 로그인/가입 모바일 퍼스트 */
.form_login { width: 100%; min-height: 0; padding: 24px 0 40px; }
.form_login h1 { margin-top: 24px; font-size: 18px; padding: 0 16px; line-height: 1.5; }
.form_login .form_box { width: 100%; max-width: 420px; padding: 24px 20px; }
.pw-field-wrap, .form_login .input_box .txt, .save-id-row,
.form_login .btn_submit, .rs_wrap { width: 100%; }
.others_nav_box { padding: 0 10px; }
.others_nav_box li { padding: 4px 12px; }
.form_login .desc { padding: 0 20px; }

.join { width: 100%; padding: 24px 14px 50px; }
.join-title { font-size: 21px; }
.join-sub { font-size: 13px; margin-bottom: 22px; }
.join-table { display: block; border-top: none; }
.join-table tbody, .join-table tr { display: block; }
.join-table tr { padding: 14px 0; border-bottom: 1px solid #eee; }
.join-table th, .join-table td { display: block; width: 100%; padding: 0; border: none; background: none; }
.join-table th { margin-bottom: 8px; font-size: 13px; color: #444; }
.j-input, .input-with-btn { max-width: 100%; }
.member_join_btn { width: 100%; padding: 16px 0; }

@media screen and (max-width: 480px) {
    /* 터치 영역/가독성 미세 조정 */
    .hero_box { border-radius: 0; }
    .svc-bar-wrap { padding: 8px 8px 0; gap: 6px; }
    .svc-pill { font-size: 11px; padding: 9px 0; border-radius: 8px; }
    .hero-head { padding: 12px; }
    .hero-head .hero-date { position: static; display: block; margin-top: 4px; }
    .top-job-bar { flex-direction: column; gap: 10px; }
    .top-job-bar .tjb-divider { width: 60%; height: 1px; }

    .login-box { padding: 16px 14px; }
    .da3-title { font-size: 14px; padding: 11px 14px; }
    .left_section { padding: 0; }
    .income-list td { padding: 9px 2px; }

    .board-list li { height: auto; padding: 9px 0; }
    .board-list li a { white-space: normal; }

    .join-table tr { padding: 12px 0; }
    .dup-btn { padding: 11px 10px; font-size: 12px; }

    .footer-navi li { flex: 0 0 50%; }
}

/* ============================================================
   페이지 공통 (수익인증, 출석체크)
   ============================================================ */
.page-wrap { max-width: 640px; margin: 0 auto; padding: 0 14px 40px; }
.page-title-bar {
    padding: 28px 0 20px; border-bottom: 2px solid #21488A; margin-bottom: 24px;
}
.page-title-bar h1,
.page-title-bar h2 {
    font-family: 'GmarketSansB', sans-serif; font-size: 22px; color: #21488A; margin: 0 0 6px;
}
.seo-crumbs {
    max-width: 640px; margin: 0 auto; padding: 14px 14px 0;
    display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden;
    font-family: 'GmarketSansM', sans-serif; font-size: 12px; color: #7b8798;
}
.seo-crumbs a { color: #21488A; white-space: nowrap; flex: none; }
.seo-crumbs [aria-current] {
    min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: #334155;
}
.page-title-bar p {
    font-size: 14px; color: #777; margin: 0; font-family: 'GmarketSansM', sans-serif;
}
.sp-hero{
    padding:32px 18px 28px;text-align:center;color:#fff;word-break:keep-all;
    background:
        radial-gradient(70% 50% at 100% 0%, rgba(255,214,120,.22), transparent 52%),
        radial-gradient(50% 60% at 0% 100%, rgba(96,165,250,.18), transparent 56%),
        linear-gradient(168deg,#071428 0%,#12356e 54%,#0d2144 100%);
}
.sp-hero-in{max-width:640px;margin:0 auto}
.sp-kicker{font-family:'GmarketSansB',sans-serif;font-size:11px;letter-spacing:2px;color:#e4b84a}
.sp-hero h1{
    margin:8px 0 0;font-family:'GmarketSansB',sans-serif;font-size:30px;letter-spacing:-.8px;font-weight:normal;
}
.sp-hero p{margin:10px auto 0;max-width:440px;font-family:'GmarketSansM',sans-serif;font-size:15px;line-height:1.65;color:rgba(255,255,255,.88)}
.sp-hero em{font-style:normal;color:#f6de9a;font-family:'GmarketSansB',sans-serif}
.board-page,.cs-page,.iw-wrap{padding-top:16px}

/* 수익인증 게시판 */
.board-toolbar {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 14px 0; border-bottom: 1px solid #eee;
}
.bt-right { display: flex; gap: 8px; align-items: center; }
.bt-search { display: flex; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; margin: 0; }
.board-empty-row{
    display: flex; align-items: center; justify-content: center; gap: 14px;
    min-height: 120px; margin: 0;
    border-bottom: 1px solid #eee;
    color: #8b95a5;
    font-family: 'GmarketSansM', sans-serif;
    font-size: 14px; letter-spacing: -0.2px;
}
.board-empty-row::before,
.board-empty-row::after{
    content: ""; width: 22px; height: 1px; background: #d5dce6;
}
.proof-home .board-empty-row{
    min-height: 84px; border-bottom: none; font-size: 13px;
}
.bt-search-input {
    width: 180px; height: 36px; padding: 0 12px; border: none; outline: none;
    font-size: 13px; font-family: 'GmarketSansM', sans-serif;
}
.bt-search-btn {
    width: 38px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: none; background: #21488A; color: #fff; cursor: pointer;
}
.bt-write-btn {
    padding: 9px 20px; background: #21488A; color: #fff; border-radius: 4px;
    font-size: 13px; font-family: 'GmarketSansB', sans-serif; text-decoration: none;
    transition: background 0.15s;
}
.bt-write-btn:hover { background: #1a3c7a; }

/* 카드형 리스트 */
.notice-section { margin: 14px 0 4px; }
.notice-kicker,
.feed-kicker {
    display: flex; align-items: center; gap: 8px; margin: 0 2px 8px;
}
.notice-kicker svg { flex: none; color: #c9962e; }
.notice-kicker span,
.feed-kicker span {
    flex: none; padding: 3px 9px; border-radius: 999px;
    font-family: 'GmarketSansB', sans-serif; font-size: 11px; letter-spacing: 0.02em; line-height: 1.4;
}
.notice-kicker span {
    color: #8a6420; background: #fff8ea; border: 1px solid #ead9a8;
}
.notice-kicker::after,
.feed-kicker::after {
    content: ""; flex: 1; height: 1px;
}
.notice-kicker::after { background: linear-gradient(90deg, #ead9a8, rgba(234,217,168,0)); }
.feed-kicker { margin: 16px 2px 8px; }
.feed-kicker span { color: #5c6b82; background: #f4f6fb; border: 1px solid #e3e9f2; }
.feed-kicker::after { background: linear-gradient(90deg, #d7e0ec, rgba(215,224,236,0)); }
.feed-kicker + .board-list { border-top: none; }
.notice-board {
    margin: 0; border: 1px solid #ead9a8; border-radius: 16px; overflow: hidden; background: #fffdf8;
}
.notice-row {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px;
    border-top: 1px solid #f3e7c8; text-decoration: none; color: #102848;
}
.notice-row:first-child { border-top: none; }
.notice-row:hover { background: #fff8ea; }
.notice-badge {
    flex: none; padding: 4px 8px; border-radius: 999px; background: #102848; color: #f6de9a;
    font-family: 'GmarketSansB', sans-serif; font-size: 11px;
}
.notice-title {
    flex: 1; min-width: 0; font-family: 'GmarketSansB', sans-serif; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice-side {
    flex: none; display: flex; align-items: center; gap: 6px;
    font-family: 'GmarketSansM', sans-serif; font-size: 12px; color: #8b95a5;
}
.notice-author {
    color: #8a6420; font-family: 'GmarketSansB', sans-serif; font-size: 11px;
    letter-spacing: -0.02em;
}
.notice-author::after {
    content: ""; display: inline-block; width: 3px; height: 3px; margin-left: 6px;
    border-radius: 50%; background: #e4b84a; vertical-align: 1px;
}
.notice-date { flex: none; }
.bi-user.is-staff { color: #8a6420; font-family: 'GmarketSansB', sans-serif; }
.bi-notice {
    display: inline-block; margin-right: 6px; padding: 2px 6px; border-radius: 999px;
    background: #102848; color: #f6de9a; font-family: 'GmarketSansB', sans-serif; font-size: 11px;
    vertical-align: 1px;
}
.board-list { border-top: 2px solid #21488A; }
.board-item {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 14px; border-bottom: 1px solid #eee;
    text-decoration: none; color: inherit; transition: background 0.12s;
}
.board-item:hover { background: #f7f9fc; }

.bi-thumb {
    position: relative; flex-shrink: 0;
    width: 72px; height: 72px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.bi-thumb img.bi-thumb-ico { width: 36px; height: 36px; }
.bi-thumb img.bi-thumb-real {
    width: 100% !important; height: 100% !important;
    object-fit: cover; border-radius: 8px;
}
.bi-hot {
    position: absolute; top: 4px; left: 4px;
    padding: 2px 6px; font-size: 10px; font-weight: bold;
    color: #fff; background: #C54A47; border-radius: 3px;
    letter-spacing: 0.5px; line-height: 1.3;
}

.bi-content { flex: 1; min-width: 0; }
.bi-title {
    margin: 0 0 8px; font-size: 15px; color: #333; font-weight: bold;
    font-family: 'GmarketSansM', sans-serif; letter-spacing: -0.3px;
    line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-item:hover .bi-title { color: #21488A; }

.bi-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 12px; color: #999; font-family: 'GmarketSansM', sans-serif;
}
.bi-meta span { white-space: nowrap; }
.bi-user { color: #666; }
.bi-reply { color: #21488A; font-weight: bold; }

/* 페이지네이션 */
.board-paging {
    display: flex; justify-content: center; align-items: center; gap: 4px; padding: 28px 0;
}
.board-paging a {
    display: flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 6px;
    border: 1px solid #ddd; border-radius: 4px; text-decoration: none;
    font-size: 13px; color: #666; font-family: 'GmarketSansM', sans-serif;
    transition: all 0.15s;
}
.board-paging a:hover { background: #f0f5fb; border-color: #21488A; color: #21488A; }
.board-paging a.active { background: #21488A; border-color: #21488A; color: #fff; font-weight: bold; }
.notice-paging { padding: 12px 0 2px; }

/* ============================================================
   부업 자료실 (archive)
   ============================================================ */
/* 자료실 히어로 + 검색바 */
.arc-hero-bar {
    text-align: center; padding: 32px 16px 28px;
    background: linear-gradient(135deg, #f8fafd 0%, #eef3fa 100%);
    border-radius: 14px; margin-bottom: 28px;
    border: 1px solid #e4ecf4;
}
.arc-hero-bar h2 {
    margin: 0 0 8px; font-family: 'GmarketSansB', sans-serif;
    font-size: 22px; color: #21488A;
}
.arc-hero-bar p {
    margin: 0 0 20px; font-size: 14px; color: #888;
    font-family: 'GmarketSansM', sans-serif;
}
.arc-search-bar {
    display: flex; max-width: 400px; margin: 0 auto;
    border: 1px solid #d4dde8; border-radius: 24px;
    overflow: hidden; background: #fff;
    box-shadow: 0 2px 8px rgba(33,72,138,0.06);
}
.arc-search-input {
    flex: 1; padding: 12px 20px; border: none; outline: none;
    font-size: 14px; font-family: 'GmarketSansM', sans-serif;
    background: transparent;
}
.arc-search-btn {
    width: 48px; display: flex; align-items: center; justify-content: center;
    border: none; background: #21488A; color: #fff; cursor: pointer;
    transition: background 0.15s;
}
.arc-search-btn:hover { background: #1a3c7a; }

.arc-grid {
    display: flex; flex-direction: column; gap: 16px; margin-top: 24px;
}
.arc-card {
    display: flex; flex-direction: row; border-radius: 16px; overflow: hidden;
    background: #fff; border: 1px solid #e8ecf1;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.arc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(33,72,138,0.13);
}
.arc-card-visual {
    position: relative; width: 160px; min-height: 160px; flex-shrink: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 14px; overflow: hidden;
}
.arc-card-thumb {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.arc-card-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.12) 60%, rgba(0,0,0,0.4) 100%);
}
.arc-card-cat {
    position: relative; z-index: 2; align-self: flex-start;
    font-family: 'GmarketSansB', sans-serif; font-size: 11px;
    color: #fff; background: rgba(255,255,255,0.22);
    padding: 4px 12px; border-radius: 16px; backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
}
.arc-card-diff {
    position: relative; z-index: 2; align-self: flex-start;
    font-size: 12px; color: #ffd54f; letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.arc-card-body {
    flex: 1; padding: 16px 18px; display: flex; flex-direction: column;
    justify-content: center; gap: 6px;
}
.arc-card-title {
    margin: 0; font-family: 'GmarketSansB', sans-serif; font-size: 15px;
    color: #222; line-height: 1.4; letter-spacing: -0.3px;
}
.arc-card:hover .arc-card-title { color: #21488A; }
.arc-card-desc {
    margin: 0; font-size: 12.5px; color: #888; line-height: 1.55;
    font-family: 'GmarketSansM', sans-serif;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.arc-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.arc-tag {
    padding: 2px 9px; font-size: 10.5px; color: #21488A;
    background: #eef3fa; border-radius: 10px;
    font-family: 'GmarketSansM', sans-serif;
}
.arc-card-bottom {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 4px; padding-top: 8px; border-top: 1px solid #f2f4f6;
}
.arc-income {
    font-size: 13px; color: #C54A47; font-family: 'GmarketSansB', sans-serif;
    letter-spacing: -0.3px;
}
.arc-card-meta {
    font-size: 11px; color: #aaa; font-family: 'GmarketSansM', sans-serif;
}

/* ============================================================
   게시글 상세 (income detail)
   ============================================================ */
.dt-hero {
    padding: 32px 0 24px; border-bottom: 2px solid #21488A; margin-bottom: 28px;
}
.dt-hot-badge {
    display: inline-block; padding: 4px 14px; margin-bottom: 12px;
    font-size: 12px; font-weight: bold; color: #fff; background: #C54A47;
    border-radius: 4px; letter-spacing: 1px;
    font-family: 'GmarketSansB', sans-serif;
}
.dt-title {
    margin: 0 0 16px; font-family: 'GmarketSansB', sans-serif;
    font-size: 26px; color: #222; line-height: 1.4; letter-spacing: -0.5px;
}
.dt-meta-bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
.dt-author { display: flex; align-items: center; gap: 10px; }
.dt-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #21488A, #2c5ba0);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: 'GmarketSansB', sans-serif; font-size: 16px;
}
.dt-author-name {
    font-family: 'GmarketSansM', sans-serif; font-size: 14px; color: #444;
}
.dt-info-items {
    display: flex; gap: 14px; font-size: 13px; color: #999;
    font-family: 'GmarketSansM', sans-serif;
}

.dt-proof {
    background: #f8faf8; border: 1px solid #d4e8d4; border-radius: 12px;
    padding: 22px 24px; margin-bottom: 32px;
}
.dt-proof-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
    font-family: 'GmarketSansB', sans-serif; font-size: 15px; color: #2e7d32;
}
.dt-proof-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.dt-proof-item {
    text-align: center; padding: 14px 8px; background: #fff;
    border-radius: 8px; border: 1px solid #e8f0e8;
}
.dt-pl {
    display: block; font-size: 12px; color: #888; margin-bottom: 6px;
    font-family: 'GmarketSansM', sans-serif;
}
.dt-pv {
    display: block; font-size: 15px; color: #333;
    font-family: 'GmarketSansB', sans-serif;
}
.dt-pv.amount { color: #C54A47; font-size: 17px; }

.dt-body {
    padding: 24px 0; margin-bottom: 24px; line-height: 1.85;
    font-size: 15px; color: #444; font-family: 'GmarketSansM', sans-serif;
    border-bottom: 1px solid #eee;
}
.dt-body h4 {
    margin: 28px 0 14px; font-size: 17px; color: #21488A;
    font-family: 'GmarketSansB', sans-serif;
}
.dt-body ul {
    margin: 12px 0; padding-left: 20px;
}
.dt-body li {
    margin-bottom: 8px; line-height: 1.7; color: #555; list-style: disc;
}
.dt-body p { margin-bottom: 14px; }
.dt-img-box {
    margin: 24px 0; border-radius: 12px; overflow: hidden;
    border: 1px solid #e8ecf1;
}
.dt-img-placeholder {
    height: 240px; background: linear-gradient(135deg, #f0f4f8, #e4ecf4);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: #999; font-family: 'GmarketSansM', sans-serif;
}
.dt-proof-img {
    width: 100%; height: auto; display: block; border-radius: 12px;
}

.dt-writer {
    display: flex; align-items: center; gap: 16px; padding: 22px 24px;
    background: #f8f9fb; border-radius: 12px; margin-bottom: 24px;
    border: 1px solid #e8ecf1;
}
.dt-writer-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #21488A, #2c5ba0);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: 'GmarketSansB', sans-serif; font-size: 22px; flex-shrink: 0;
}
.dt-writer-info strong {
    display: block; font-size: 15px; color: #333;
    font-family: 'GmarketSansB', sans-serif; margin-bottom: 4px;
}
.dt-writer-info p {
    margin: 0; font-size: 13px; color: #888;
    font-family: 'GmarketSansM', sans-serif;
}

.dt-actions {
    display: flex; gap: 10px; margin-bottom: 36px;
}
.dt-like-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 28px; border: 2px solid #21488A; border-radius: 8px;
    background: #fff; color: #21488A; font-family: 'GmarketSansM', sans-serif;
    font-size: 14px; cursor: pointer; transition: all 0.15s;
}
.dt-like-heart { display: block; flex-shrink: 0; }
.dt-like-btn .dt-like-heart path { fill: none; stroke: currentColor; stroke-width: 1.8; }
.dt-like-btn.is-on { color: #d12b4a; border-color: #f0b4c0; background: #fff5f7; }
.dt-like-btn.is-on .dt-like-heart path { fill: currentColor; stroke: none; }
.dt-like-btn.is-on:hover { background: #ffe8ee; color: #d12b4a; }
.dt-like-btn:hover { background: #21488A; color: #fff; }
.dt-like-btn strong { font-family: 'GmarketSansB', sans-serif; }
.dt-share-btn {
    padding: 12px 28px; border: 1px solid #ddd; border-radius: 8px;
    background: #fff; color: #666; font-family: 'GmarketSansM', sans-serif;
    font-size: 14px; cursor: pointer; transition: all 0.15s;
}
.dt-share-btn:hover { background: #f5f5f5; }

.dt-comments { margin-bottom: 36px; }
.dt-cmt-title {
    font-family: 'GmarketSansB', sans-serif; font-size: 17px;
    color: #333; margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 2px solid #21488A;
}
.dt-cmt-title strong { color: #21488A; }
.dt-cmt-write {
    display: flex; gap: 10px; margin-bottom: 24px;
    align-items: flex-start;
}
.dt-cmt-write textarea {
    flex: 1; padding: 14px; border: 1px solid #ddd; border-radius: 8px;
    font-size: 14px; font-family: 'GmarketSansM', sans-serif;
    resize: vertical; min-height: 70px; outline: none;
}
.dt-cmt-write textarea:focus { border-color: #21488A; }
.dt-cmt-submit {
    padding: 14px 24px; background: #21488A; color: #fff; border: none;
    border-radius: 8px; font-family: 'GmarketSansB', sans-serif;
    font-size: 14px; cursor: pointer; white-space: nowrap;
}
.dt-cmt-submit:hover { background: #1a3c7a; }

.dt-cmt {
    display: flex; gap: 12px; padding: 18px 0;
    border-bottom: 1px solid #f0f0f0;
}
.dt-cmt-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: #e8ecf1; color: #666;
    display: flex; align-items: center; justify-content: center;
    font-family: 'GmarketSansB', sans-serif; font-size: 14px; flex-shrink: 0;
}
.dt-cmt-body { flex: 1; min-width: 0; }
.dt-cmt-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.dt-cmt-head strong {
    font-size: 14px; color: #333; font-family: 'GmarketSansB', sans-serif;
}
.dt-cmt-head span { font-size: 12px; color: #aaa; }
.dt-cmt-body p {
    margin: 0 0 8px; font-size: 14px; color: #555; line-height: 1.6;
    font-family: 'GmarketSansM', sans-serif;
}
.dt-cmt-acts {
    display: flex; gap: 12px;
}
.dt-cmt-acts button {
    border: none; background: none; color: #999; font-size: 13px;
    cursor: pointer; font-family: 'GmarketSansM', sans-serif;
    padding: 0;
}
.dt-cmt-acts button:hover { color: #21488A; }

.dt-nav {
    display: flex; justify-content: center; gap: 10px;
    padding: 28px 0; border-top: 1px solid #eee;
}
.dt-nav-item {
    padding: 12px 28px; border: 1px solid #ddd; border-radius: 6px;
    font-family: 'GmarketSansM', sans-serif; font-size: 14px;
    color: #666; text-decoration: none; transition: all 0.15s;
}
.dt-nav-item:hover { border-color: #21488A; color: #21488A; background: #f0f5fb; }
.dt-nav-item.list { background: #21488A; color: #fff; border-color: #21488A; }
.dt-nav-item.list:hover { background: #1a3c7a; }

/* ============================================================
   부업 자료실 상세 (archive detail)
   ============================================================ */
.acd-hero {
    padding: 40px 32px; border-radius: 14px; margin-bottom: 28px;
    color: #fff; position: relative; overflow: hidden;
}
.acd-hero-thumb {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.25; mix-blend-mode: luminosity;
    pointer-events: none; z-index: 0;
}
.acd-hero > *:not(.acd-hero-thumb) { position: relative; z-index: 1; }
.acd-hero::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06));
    z-index: 0;
}
.acd-hero-cat {
    display: inline-block; padding: 5px 16px; margin-bottom: 14px;
    background: rgba(255,255,255,0.2); border-radius: 20px;
    font-family: 'GmarketSansB', sans-serif; font-size: 13px;
    backdrop-filter: blur(4px);
}
.acd-hero-title {
    margin: 0 0 10px; font-family: 'GmarketSansB', sans-serif;
    font-size: 28px; line-height: 1.35; letter-spacing: -0.5px;
}
.acd-hero-desc {
    margin: 0; font-size: 15px; color: rgba(255,255,255,0.8);
    font-family: 'GmarketSansM', sans-serif; line-height: 1.5;
}

.acd-keys {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin-bottom: 28px;
}
.acd-key {
    text-align: center; padding: 22px 12px;
    background: #fff; border: 1px solid #e8ecf1; border-radius: 12px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.acd-key:hover {
    transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.acd-key-icon { display: block; font-size: 28px; margin-bottom: 8px; }
.acd-key-label {
    display: block; font-size: 12px; color: #999; margin-bottom: 6px;
    font-family: 'GmarketSansM', sans-serif;
}
.acd-key-val {
    display: block; font-size: 18px; color: #21488A;
    font-family: 'GmarketSansB', sans-serif;
}

.acd-toc {
    background: #f8f9fb; border: 1px solid #e8ecf1; border-radius: 12px;
    padding: 22px 28px; margin-bottom: 32px;
}
.acd-toc h3 {
    margin: 0 0 14px; font-size: 16px; color: #333;
    font-family: 'GmarketSansB', sans-serif;
}
.acd-toc ol {
    margin: 0; padding-left: 22px; counter-reset: toc;
}
.acd-toc li {
    padding: 8px 0; border-bottom: 1px solid #eee;
    font-family: 'GmarketSansM', sans-serif; font-size: 14px;
}
.acd-toc li:last-child { border-bottom: none; }
.acd-toc a { color: #444; text-decoration: none; }
.acd-toc a:hover { color: #21488A; }

.acd-body {
    margin-bottom: 32px;
}
.acd-body-desc {
    padding: 28px; background: #fff; border-radius: 14px;
    border: 1px solid #e8edf2; margin-bottom: 24px;
    font-size: 16px; line-height: 1.85; color: #333;
    font-family: 'GmarketSansM', sans-serif;
    word-break: keep-all;
}
.acd-body-desc p { margin: 0; }
.acd-body-images {
    display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px;
}
.acd-body-img-wrap {
    border-radius: 12px; overflow: hidden; cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}
.acd-body-img-wrap:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.acd-body-img-wrap img { width: 100%; display: block; }
.acd-body-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.acd-tag {
    display: inline-block; padding: 6px 16px;
    background: #f0f4ff; color: #21488A; border-radius: 20px;
    font-size: 13px; font-family: 'GmarketSansM', sans-serif;
    border: 1px solid #dbe4f0;
}

.acd-gallery {
    margin-bottom: 32px; padding: 24px; background: #f8fafc;
    border-radius: 14px; border: 1px solid #e8edf2;
}
.acd-gallery h3 {
    margin: 0 0 16px; font-family: 'GmarketSansB', sans-serif;
    font-size: 18px; color: #222;
}
.acd-gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.acd-gallery-item {
    border-radius: 10px; overflow: hidden; aspect-ratio: 4/3;
    background: #e2e8f0; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.acd-gallery-item:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.acd-gallery-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.acd-lightbox {
    position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.acd-lightbox.active { opacity: 1; pointer-events: auto; }
.acd-lightbox img {
    max-width: 92vw; max-height: 88vh; border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.acd-lightbox-close {
    position: absolute; top: 18px; right: 22px; width: 40px; height: 40px;
    border: none; background: rgba(255,255,255,0.15); color: #fff;
    border-radius: 50%; font-size: 22px; cursor: pointer; backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.acd-lightbox-close:hover { background: rgba(255,255,255,0.3); }

.acd-section {
    margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid #f0f0f0;
}
.acd-section:last-of-type { border-bottom: none; }
.acd-section h2 {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 16px; font-family: 'GmarketSansB', sans-serif;
    font-size: 20px; color: #222;
}
.acd-sec-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: #21488A; color: #fff; font-size: 15px;
    font-family: 'GmarketSansB', sans-serif; flex-shrink: 0;
}
.acd-sec-body {
    font-size: 15px; color: #555; line-height: 1.85;
    font-family: 'GmarketSansM', sans-serif;
}
.acd-sec-body p { margin-bottom: 12px; }

.acd-tip {
    margin: 16px 0; padding: 18px 22px; border-radius: 10px;
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border-left: 4px solid #43a047; font-size: 14px; color: #2e7d32;
    line-height: 1.7;
}
.acd-tip strong { display: block; margin-bottom: 4px; font-size: 15px; }

.acd-warn {
    margin: 16px 0; padding: 18px 22px; border-radius: 10px;
    background: linear-gradient(135deg, #fff3e0, #fbe9e7);
    border-left: 4px solid #ef6c00; font-size: 14px; color: #bf360c;
    line-height: 1.7;
}
.acd-warn strong { display: block; margin-bottom: 4px; font-size: 15px; }

.acd-related {
    margin-top: 40px; padding-top: 28px; border-top: 2px solid #21488A;
}
.acd-related h3 {
    margin: 0 0 18px; font-family: 'GmarketSansB', sans-serif;
    font-size: 18px; color: #222;
}
.acd-related-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.acd-rel-card {
    border: 1px solid #e8ecf1; border-radius: 10px; overflow: hidden;
    text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s;
}
.acd-rel-card:hover {
    transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.acd-rel-top {
    padding: 16px; color: #fff;
}
.acd-rel-top span {
    font-family: 'GmarketSansM', sans-serif; font-size: 12px;
    background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 12px;
}
.acd-rel-bot {
    padding: 14px 16px;
}
.acd-rel-bot strong {
    display: block; font-family: 'GmarketSansB', sans-serif; font-size: 14px;
    color: #333; margin-bottom: 4px; line-height: 1.4;
}
.acd-rel-bot span {
    font-size: 13px; color: #C54A47; font-family: 'GmarketSansM', sans-serif;
}

/* 출석체크 페이지 */
/* === ATTENDANCE PAGE PREMIUM === */
.att-hero {
    background: linear-gradient(135deg, #21488A 0%, #2c5ba0 60%, #3a6db5 100%);
    margin: -20px -16px 24px; padding: 28px 20px 24px; color: #fff;
}
.att-hero-inner { display: flex; align-items: center; justify-content: space-between; }
.att-hero-left h2 {
    font-family: 'GmarketSansB', sans-serif; font-size: 22px;
    margin: 0 0 6px; color: #fff;
}
.att-hero-left p {
    font-family: 'GmarketSansM', sans-serif; font-size: 13px;
    color: rgba(255,255,255,0.8); margin: 0;
}
.att-hero-stamp img {
    width: 72px; height: 72px; border-radius: 50%;
    mix-blend-mode: multiply; opacity: 0.9;
    filter: brightness(1.1) saturate(1.2);
    animation: stampFloat 3s ease-in-out infinite;
}
@keyframes stampFloat {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-6px) rotate(-5deg); }
}

.att-stats { display: flex; gap: 10px; margin-bottom: 20px; }
.att-stat-item {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 16px 14px; background: #fff; border: 1px solid #e8ecf1;
    border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.att-stat-ico {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: #f0f5fb; flex-shrink: 0;
}
.att-stat-ico.streak { background: #fff8e8; }
.att-stat-ico.point { background: #e8f5e9; }
.att-stat-text span {
    display: block; font-size: 11px; color: #999;
    font-family: 'GmarketSansM', sans-serif; margin-bottom: 2px;
}
.att-stat-text strong {
    font-family: 'GmarketSansB', sans-serif; font-size: 18px; color: #21488A;
}
.att-stat-text .streak-num { color: #e5a023; }
.att-stat-text .point-num { color: #2e7d32; }

.att-status { display: none; }
.att-card {
    flex: 1; text-align: center; padding: 20px 10px; background: #f8f9fb;
    border: 1px solid #e8ecf1; border-radius: 8px;
}
.att-card.accent { background: #21488A; border-color: #21488A; }
.att-card.accent .att-label { color: rgba(255,255,255,0.7); }
.att-card.accent .att-value { color: #fff; }
.att-label { display: block; font-size: 13px; color: #888; margin-bottom: 8px; font-family: 'GmarketSansM', sans-serif; }
.att-value { font-family: 'GmarketSansB', sans-serif; font-size: 22px; color: #21488A; }

.att-reward-info { display: flex; gap: 8px; margin-bottom: 20px; }
.att-reward {
    flex: 1; text-align: center; padding: 12px 6px;
    background: #f4f5f7; border-radius: 6px; border: 1px solid #eee;
}
.att-reward.highlight { background: #fff8e8; border-color: #e5a023; }
.att-reward span { display: block; font-size: 12px; color: #888; margin-bottom: 4px; font-family: 'GmarketSansM', sans-serif; }
.att-reward strong { font-family: 'GmarketSansB', sans-serif; font-size: 16px; color: #21488A; }
.att-reward.highlight strong { color: #e5a023; }

/* 보상 단계 */
.att-tier { margin-bottom: 24px; }
.att-tier-title {
    font-family: 'GmarketSansB', sans-serif; font-size: 15px;
    color: #333; margin-bottom: 12px;
}
.att-tier-list { display: flex; align-items: center; justify-content: center; gap: 6px; }
.att-tier-item {
    flex: 1; text-align: center; padding: 14px 6px;
    background: #f8f9fb; border: 1.5px solid #e8ecf1;
    border-radius: 10px; transition: all 0.3s;
}
.att-tier-item.active {
    background: linear-gradient(135deg, #f0f5fb, #e4edf8);
    border-color: #21488A; box-shadow: 0 3px 12px rgba(33,72,138,0.12);
}
.att-tier-item.done { background: #e8f5e9; border-color: #a5d6a7; }
.att-tier-item.crown.active { background: linear-gradient(135deg, #fff8e8, #fff3d4); border-color: #e5a023; }
.att-tier-badge {
    font-family: 'GmarketSansM', sans-serif; font-size: 11px;
    color: #999; margin-bottom: 4px;
}
.att-tier-item.active .att-tier-badge { color: #21488A; }
.att-tier-item.done .att-tier-badge { color: #2e7d32; }
.att-tier-item.crown.active .att-tier-badge { color: #e5a023; }
.att-tier-point {
    font-family: 'GmarketSansB', sans-serif; font-size: 17px; color: #666;
}
.att-tier-item.active .att-tier-point { color: #21488A; }
.att-tier-item.done .att-tier-point { color: #2e7d32; }
.att-tier-item.crown.active .att-tier-point { color: #e5a023; }
.att-tier-arrow { flex-shrink: 0; display: flex; align-items: center; }

.att-btn-wrap { text-align: center; margin-bottom: 28px; }
.att-check-btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 52px; border: none; border-radius: 50px;
    background: linear-gradient(135deg, #C54A47, #d65550);
    color: #fff; font-family: 'GmarketSansB', sans-serif; font-size: 17px;
    cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(33,72,138,0.3);
}
.att-check-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(197,74,71,0.35); }
.att-check-btn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(197,74,71,0.3); }
.att-btn-stamp { width: 36px; height: 36px; flex-shrink: 0; }
.att-btn-stamp img {
    width: 36px; height: 36px; border-radius: 50%;
    mix-blend-mode: screen; filter: brightness(2) contrast(1.2);
}
.att-check-btn span { font-family: 'GmarketSansB', sans-serif; }
.att-check-btn.stamped {
    animation: stampPress 0.6s ease;
}
.att-check-btn.done {
    background: linear-gradient(135deg, #2e7d32, #43a047);
    box-shadow: 0 4px 14px rgba(46,125,50,0.3);
}
@keyframes stampPress {
    0% { transform: scale(1); }
    30% { transform: scale(0.9) rotate(-5deg); }
    60% { transform: scale(1.08) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}

.att-calendar {
    background: #fff; border: 1px solid #e8ecf1; border-radius: 14px;
    padding: 22px; margin-bottom: 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.att-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.att-cal-head strong { font-family: 'GmarketSansB', sans-serif; font-size: 17px; color: #333; }
.att-cal-head button {
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    width: 36px; height: 36px; font-size: 14px; color: #666; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.att-cal-head button:hover { background: #f0f5fb; border-color: #21488A; }
.att-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 8px; }
.att-cal-weekdays span {
    text-align: center; font-size: 12px; color: #999; padding: 8px 0;
    font-family: 'GmarketSansB', sans-serif;
}
.att-cal-weekdays .sun { color: #C54A47; }
.att-cal-weekdays .sat { color: #004EA2; }
.att-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.att-day {
    position: relative; text-align: center; padding: 6px 0;
    border-radius: 10px; min-height: 52px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; transition: background 0.15s;
}
.att-day.today {
    background: #f0f5fb; border: 2px solid #21488A; border-radius: 10px;
}
.att-day.checked { background: rgba(197,74,71,0.04); }
.att-day-num {
    font-size: 13px; color: #444;
    font-family: 'GmarketSansM', sans-serif;
    position: relative; z-index: 2;
}
.att-day.checked .att-day-num { color: #C54A47; font-weight: bold; }
.att-stamp-mark {
    display: block; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg);
    width: 34px; height: 34px; z-index: 1; opacity: 0.75;
}
.att-stamp-mark img {
    width: 100%; height: 100%; border-radius: 50%;
    mix-blend-mode: multiply;
}
.att-stamp-new { animation: stampAppear 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
@keyframes stampAppear {
    0% { transform: translate(-50%, -50%) rotate(-30deg) scale(2); opacity: 0; }
    60% { transform: translate(-50%, -50%) rotate(-8deg) scale(0.9); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 0.75; }
}
.att-btn-msg {
    text-align: center; margin-top: 10px; font-size: 14px;
    font-family: 'GmarketSansM', sans-serif; min-height: 20px;
}

.att-history {
    margin-bottom: 30px; background: #fff;
    border: 1px solid #e8ecf1; border-radius: 14px;
    padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.att-hist-title {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid #21488A;
}
.att-hist-title span {
    font-family: 'GmarketSansB', sans-serif; font-size: 15px; color: #333;
}
.att-history ul { list-style: none; padding: 0; margin: 0; }
.att-history li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 8px; border-bottom: 1px solid #f5f5f5;
    font-family: 'GmarketSansM', sans-serif; transition: background 0.15s;
}
.att-history li:last-child { border-bottom: none; }
.att-history li:hover { background: #fafbfc; }
.att-rec-left { display: flex; align-items: center; gap: 10px; }
.att-rec-stamp-mini img { border-radius: 50%; mix-blend-mode: multiply; opacity: 0.7; }
.att-rec-date { font-size: 14px; color: #555; }
.att-rec-point { font-size: 15px; color: #C54A47; font-family: 'GmarketSansB', sans-serif; }

@media screen and (max-width: 480px) {
    .att-card { padding: 16px 10px; }
    .board-toolbar { flex-direction: column; gap: 10px; align-items: flex-start; }
    .bt-right { width: 100%; }
    .bt-search { flex: 1; }
    .bt-search-input { flex: 1; width: auto; }
    .board-item { gap: 12px; padding: 14px 10px; }
    .bi-thumb { width: 60px; height: 60px; border-radius: 6px; }
    .bi-thumb img.bi-thumb-ico { width: 28px; height: 28px; }
    .bi-title { font-size: 14px; margin-bottom: 6px; }
    .bi-meta { gap: 6px; font-size: 11px; }
    .att-check-btn { padding: 14px 36px; font-size: 16px; }
    .arc-grid { gap: 12px; }
    .arc-card-visual { width: 120px; min-height: 130px; padding: 10px; }
    .arc-card-cat { font-size: 10px; padding: 3px 9px; }
    .arc-card-diff { font-size: 11px; }
    .arc-card-body { padding: 12px 14px; gap: 4px; }
    .arc-card-title { font-size: 14px; }
    .arc-card-desc { font-size: 11.5px; -webkit-line-clamp: 2; }
    .arc-card-bottom { margin-top: 2px; padding-top: 6px; }
    .arc-income { font-size: 12px; }
    .arc-card-meta { font-size: 10px; }
    .arc-stat-num { font-size: 20px; }
    .arc-filter-btn { padding: 7px 14px; font-size: 12px; }
    .arc-toolbar { flex-direction: column; gap: 10px; align-items: flex-start; }
    .arc-admin-btn { width: 100%; text-align: center; }
    .dt-title { font-size: 18px; }
    .dt-proof-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .dt-proof { padding: 16px; }
    .dt-pv { font-size: 14px; }
    .dt-pv.amount { font-size: 15px; }
    .dt-writer { padding: 16px; gap: 12px; }
    .dt-writer-avatar { width: 44px; height: 44px; font-size: 18px; }
    .acd-hero { padding: 24px 16px; }
    .acd-hero-title { font-size: 19px; }
    .acd-hero-desc { font-size: 13px; }
    .acd-keys { grid-template-columns: 1fr 1fr; gap: 10px; }
    .acd-key { padding: 16px 10px; }
    .acd-key-val { font-size: 15px; }
    .acd-toc { padding: 16px 18px; }
    .acd-sec-num { width: 28px; height: 28px; font-size: 13px; }
    .acd-section h2 { font-size: 16px; gap: 10px; }
    .acd-body-desc { padding: 20px; font-size: 15px; }
    .acd-gallery { padding: 16px; }
    .acd-gallery h3 { font-size: 16px; }
    .acd-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
    .att-hero { margin: -20px -12px 20px; padding: 22px 16px 20px; }
    .att-hero-left h2 { font-size: 19px; }
    .att-hero-stamp img { width: 58px; height: 58px; }
    .att-stats { flex-wrap: wrap; gap: 8px; }
    .att-stat-item { flex: 1 1 30%; padding: 12px 10px; gap: 8px; }
    .att-stat-ico { width: 34px; height: 34px; }
    .att-stat-text strong { font-size: 16px; }
    .att-calendar { padding: 14px; border-radius: 12px; }
    .att-day { padding: 4px 0; min-height: 46px; }
    .att-stamp-mark { width: 28px; height: 28px; }
    .att-tier-item { padding: 10px 4px; }
    .att-tier-point { font-size: 14px; }
    .att-tier-badge { font-size: 10px; }
    .att-check-btn { padding: 16px 40px; font-size: 16px; }
}

/* ============================================================
   마이페이지
   ============================================================ */
/* ======== MYPAGE - Premium Crypto Wallet Style ======== */
.myp{max-width:640px;margin:0 auto;padding:0 0 48px;background:#f4f6fb;color:#102848;word-break:keep-all}

.myp-hero{
    position:relative;overflow:hidden;padding:26px 18px 0;color:#fff;
    background:
        radial-gradient(70% 50% at 100% 0%, rgba(255,214,120,.2), transparent 52%),
        radial-gradient(50% 60% at 0% 100%, rgba(96,165,250,.2), transparent 56%),
        linear-gradient(168deg,#071428 0%,#12356e 54%,#0d2144 100%);
}
.myp-profile{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.myp-avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,.16)}
.myp-nick{font-family:'GmarketSansB',sans-serif;font-size:18px;color:#fff;margin:0;letter-spacing:-.3px}
.myp-meta{font-size:12px;color:rgba(255,255,255,.55);margin:2px 0 0}

.myp-balance-card{position:relative;z-index:1;padding:20px 0 16px;text-align:center}
.myp-bal-label{justify-content:center;font-family:'GmarketSansB',sans-serif;font-size:11px;color:#e4b84a;letter-spacing:1.8px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.myp-bal-amount{font-family:'GmarketSansB',sans-serif;font-size:34px;color:#fff;letter-spacing:-1.2px;line-height:1.05}
.myp-bal-amount strong{margin-right:2px}
.myp-bal-amount small{font-size:13px;letter-spacing:0;color:rgba(255,255,255,.62);font-family:'GmarketSansM',sans-serif}
.myp-bal-stats{display:flex;gap:8px;margin-top:16px}
.myp-bal-stat{flex:1;padding:10px 8px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);text-align:center}
.myp-bal-stat-label{font-size:11px;color:rgba(255,255,255,.55);font-weight:600;margin-bottom:3px;display:block}
.myp-bal-stat-val{font-size:14px;font-weight:800;font-family:'GmarketSansB',sans-serif;color:#fff;display:flex;align-items:center;justify-content:center;gap:4px}
.myp-bal-stat-val svg{flex-shrink:0;stroke:#ffe7a8}
.myp-bal-stat-val small{font-size:10px;color:rgba(255,255,255,.5);font-weight:600}

.myp-rates{margin:0 -18px;padding:14px 18px 16px;background:rgba(0,0,0,.14);border-top:1px solid rgba(255,255,255,.12)}
.myp-rates-head{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.myp-rates-head h2{margin:0;font-family:'GmarketSansB',sans-serif;font-size:13px;letter-spacing:-.2px;color:#fff}
.myp-rates-tag{flex-shrink:0;padding:3px 8px;border-radius:20px;background:rgba(255,255,255,.12);font-family:'GmarketSansB',sans-serif;font-size:11px;color:#d7e6ff}
.myp-rates-tag.is-mine{background:rgba(255,214,120,.18);color:#ffe7a8}
.myp-rate-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.14)}
.myp-rate{text-align:center;padding:12px 4px 8px;border-left:1px solid rgba(255,255,255,.12)}
.myp-rate:first-child{border-left:0}
.myp-rate span{display:block;font-size:11px;color:rgba(255,255,255,.55)}
.myp-rate strong{display:block;margin-top:4px;font-family:'GmarketSansB',sans-serif;font-size:18px;letter-spacing:-.4px;color:#fff}
.myp-rate em{display:block;margin-top:2px;font-style:normal;font-family:'GmarketSansB',sans-serif;font-size:10px;color:#ffe7a8}
.myp-rate.is-best{background:rgba(255,214,120,.12)}
.myp-rate.is-best strong{color:#ffe9b0}
.myp-rates-note{margin:8px 0 0;text-align:center;font-size:12px;color:rgba(255,255,255,.5)}

/* ====== MY ASSETS ====== */
.ast-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 12px}
.ast-header-left{display:flex;align-items:center;gap:6px}
.ast-label{font-size:11px;font-weight:800;color:#94a3b8;letter-spacing:1.5px;text-transform:uppercase}
.ast-label-dot{color:#cbd5e1;font-size:14px}

.ast-contract{
    margin:0 0 14px;border-radius:22px;overflow:hidden;background:#fff;
    border:1px solid rgba(16,40,72,.08);box-shadow:0 16px 34px rgba(13,33,68,.1);
}
.ast-ct-face{
    position:relative;padding:18px 18px 16px;color:#fff;
    background:
        radial-gradient(90% 80% at 100% -10%, rgba(240,206,122,.3), transparent 48%),
        linear-gradient(165deg,#101c38 0%,#17356a 58%,#0c1b33 100%);
}
.ast-ct-face::before{
    content:'';position:absolute;top:0;left:18px;right:18px;height:2px;
    background:linear-gradient(90deg,transparent,#f3d78a 20%,#fff6d4 50%,#f3d78a 80%,transparent);
}
.ast-ct-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ast-ct-head strong{font-family:'GmarketSansB',sans-serif;font-size:16px;letter-spacing:-.3px}
.ast-ct-badge{flex-shrink:0;font-family:'GmarketSansB',sans-serif;font-size:11px;padding:4px 9px;border-radius:99px}
.ast-ct-badge.active{background:rgba(246,222,154,.16);color:#f6de9a;border:1px solid rgba(246,222,154,.4)}
.ast-ct-badge.done{background:rgba(255,255,255,.1);color:rgba(255,255,255,.72)}
.ast-ct-progress{display:flex;align-items:center;gap:10px;margin:14px 0 18px}
.ast-ct-bar-wrap{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.ast-ct-bar{height:100%;border-radius:99px;background:linear-gradient(90deg,#c9a24a,#fff6d4);box-shadow:0 0 14px rgba(243,215,138,.4)}
.ast-ct-progress > span{flex-shrink:0;font-family:'GmarketSansM',sans-serif;font-size:12px;color:rgba(255,255,255,.7)}
.ast-ct-kicker{margin:0;font-size:12px;color:rgba(255,255,255,.62)}
.ast-ct-money{margin:6px 0 0;font-family:'GmarketSansB',sans-serif;font-size:32px;line-height:1;letter-spacing:-1px;color:#f6de9a}
.ast-ct-money small{margin-left:5px;font-family:'GmarketSansM',sans-serif;font-size:12px;letter-spacing:.3px;color:rgba(246,222,154,.75)}
.ast-ct-note{margin:10px 0 0;font-size:12px;line-height:1.55;color:rgba(255,255,255,.62)}
.ast-ct-facts{display:grid;grid-template-columns:1fr 1fr}
.ast-ct-facts div{min-width:0;padding:13px 16px 12px;border-top:1px solid #eef2f7;border-left:1px solid #eef2f7}
.ast-ct-facts div:nth-child(odd){border-left:0}
.ast-ct-facts span{display:block;font-size:11px;color:#8b93a1}
.ast-ct-facts strong{display:block;margin-top:4px;font-family:'GmarketSansB',sans-serif;font-size:14px;letter-spacing:-.3px;color:#102848}
.ast-ct-facts small{margin-left:3px;font-family:'GmarketSansM',sans-serif;font-size:10px;color:#8b93a1}
.ast-done{box-shadow:none}
.ast-done .ast-ct-face{background:linear-gradient(165deg,#2a3548 0%,#1a2433 100%)}
.ast-done .ast-ct-face::before{opacity:.4}
.ast-done .ast-ct-money{color:#fff;font-size:26px}
.ast-done .ast-ct-money small{color:rgba(255,255,255,.55)}

.ast-completed-toggle{margin-top:4px}
.ast-completed-toggle summary{font-size:13px;font-weight:700;color:#64748b;cursor:pointer;padding:10px 0;list-style:none;display:flex;align-items:center;gap:6px}
.ast-completed-toggle summary::before{content:'+';font-size:16px;font-weight:800;color:#94a3b8;width:20px;text-align:center}
.ast-completed-toggle[open] summary::before{content:'\2212'}

.ast-empty{text-align:center;padding:36px 20px;background:#fff;border-radius:20px;border:1px solid #e7e1d4}
.ast-empty p{font-size:14px;color:#8b93a1;margin:12px 0 16px}
.ast-empty-btn{display:inline-block;padding:12px 22px;background:#12356e;color:#fff;border-radius:12px;font-family:'GmarketSansB',sans-serif;font-size:13px;font-weight:700;text-decoration:none}

.myp-actions{display:flex;margin:14px 16px 0;background:#fff;border:1px solid #e7edf4;border-radius:16px;overflow:hidden}
.myp-act{flex:1;padding:14px 6px;text-align:center;text-decoration:none;border-radius:0;border-left:1px solid #eef2f7;background:#fff;color:#12356e;display:flex;flex-direction:column;align-items:center;gap:6px}
.myp-act:first-child{border-left:0}
.myp-act:hover{background:#f7f9fc}
.myp-act-ico{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eef3fb;color:#12356e}
.myp-act span{font-size:12px;font-family:'GmarketSansB',sans-serif;color:#102848}
.myp-act.att,.myp-act.dep,.myp-act.wit{background:#fff;color:#12356e}
.myp-act.att .myp-act-ico,.myp-act.dep .myp-act-ico,.myp-act.wit .myp-act-ico{background:#eef3fb;color:#12356e}

.myp-section{padding:22px 16px 0}
.myp-sec-title{font-family:'GmarketSansB',sans-serif;font-size:16px;color:#102848;margin:0 0 12px;letter-spacing:-.3px}
.myp-sec-title::before{content:none}
.myp-sec-note{margin:-4px 0 12px;font-size:12px;color:#8b93a1}

.myp-att-grid{display:flex;gap:8px}
.myp-att-item{flex:1;background:#fff;border-radius:14px;padding:16px 10px;text-align:center;border:1px solid #f0f0f0;position:relative;overflow:hidden}
.myp-att-item::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#26A17B,#0d9488);opacity:.6}
.myp-att-num{display:block;font-family:'GmarketSansB',sans-serif;font-size:22px;color:#0f172a;margin-bottom:3px}
.myp-att-txt{font-size:11px;color:#94a3b8;font-weight:600;letter-spacing:.3px}

.tx-list{display:flex;flex-direction:column;gap:6px}
.tx-row{display:flex;align-items:center;gap:10px;padding:12px;background:#fff;border-radius:12px;border:1px solid #e7edf4}
.tx-ico{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tx-in{background:#eef3fb;color:#12356e}
.tx-out{background:#f7f4ea;color:#8a6a22}
.tx-info{flex:1;min-width:0}
.tx-type{display:block;font-size:13px;color:#102848;font-weight:600;line-height:1.3}
.tx-date{font-size:11px;color:#8b93a1}
.tx-amt{font-family:'GmarketSansB',sans-serif;font-size:13px;white-space:nowrap}
.tx-plus{color:#12356e}
.tx-minus{color:#8a6a22}
.tx-row.is-earn{border-color:#efe6cf}
.tx-row.is-earn .tx-ico{background:#f8f1dc;color:#8a6a22}
.tx-row.is-earn .tx-amt{color:#8a6a22}
.myp-empty{text-align:center;color:#94a3b8;padding:30px 0;font-size:13px}

.myp-info-card{background:#fff;border-radius:16px;padding:6px 16px 16px;border:1px solid #e7edf4}
.myp-info-tbl{width:100%;border-collapse:collapse}
.myp-info-tbl th{text-align:left;font-size:12px;color:#8b93a1;font-weight:600;padding:12px 0;width:88px;vertical-align:middle}
.myp-info-tbl td{font-size:14px;color:#102848;padding:12px 0;font-family:'GmarketSansM',sans-serif}
.myp-inp{width:100%;box-sizing:border-box;padding:11px 14px;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;font-family:inherit;background:#f8fafc;transition:border-color .2s}
.myp-inp:focus{outline:none;border-color:#12356e;background:#fff;box-shadow:0 0 0 3px rgba(18,53,110,.08)}
.myp-edit-btn{display:block;width:100%;margin-top:8px;padding:13px 0;border:1px solid #d5deea;background:#fff;color:#102848;font-family:'GmarketSansB',sans-serif;font-size:14px;cursor:pointer;border-radius:12px}
.myp-edit-btn:hover{border-color:#12356e;color:#12356e;background:#f4f8ff}
.myp-pw-wrap{position:relative;width:100%}
.myp-pw-wrap .myp-inp{padding-right:44px!important;width:100%;box-sizing:border-box}
.myp-pw-eye{position:absolute;right:0;top:0;height:100%;width:40px;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.myp-edit-msg{text-align:center;font-size:13px;padding:8px 0 0;min-height:22px;font-weight:600}
.myp-edit-btns{display:flex;gap:10px;margin-top:14px}
.myp-save-btn,.myp-cancel-btn{flex:1;padding:13px 0;border:none;border-radius:12px;font-family:'GmarketSansB',sans-serif;font-size:14px;cursor:pointer}
.myp-save-btn{background:#12356e;color:#fff}
.myp-save-btn:disabled{background:#8b93a1;cursor:not-allowed}
.myp-cancel-btn{background:#f4f6fb;color:#5c6b80}

.myp-paging{display:flex;justify-content:center;gap:4px;margin-top:14px}
.myp-paging button{min-width:32px;height:32px;border:1px solid #e2e8f0;background:#fff;color:#5c6b80;font-size:13px;cursor:pointer;border-radius:8px;font-family:'GmarketSansB',sans-serif}
.myp-paging button:hover{border-color:#12356e;color:#12356e}
.myp-paging button.active{background:#12356e;color:#fff;border-color:#12356e}
.myp-info-card .pw-strength{margin-top:8px;max-width:100%}
.myp-info-card .help{display:block;margin-top:4px;font-size:12px}

/* ============================================================
   고객센터
   ============================================================ */
.cs-contact-bar {
    display: flex; gap: 0; margin-top: 20px; padding: 18px 16px;
    background: #f8f9fc; border: 1px solid #e8ecf1; border-radius: 10px;
}
.cs-contact-item {
    flex: 1; display: flex; align-items: center; gap: 10px;
    justify-content: center; text-align: left;
    border-right: 1px solid #e0e3e8; padding: 0 12px;
}
.cs-contact-item:last-child { border-right: none; }
a.cs-contact-item { color: inherit; text-decoration: none; }
.cs-contact-item svg { flex-shrink: 0; }
.cs-contact-item strong {
    display: block; font-size: 13px; color: #21488A;
    font-family: 'GmarketSansB', sans-serif; white-space: nowrap;
}
.cs-contact-item span {
    display: block; font-size: 11px; color: #999;
    font-family: 'GmarketSansM', sans-serif; white-space: nowrap;
}

.cs-tabs { display: flex; margin-bottom: 0; border-bottom: 2px solid #21488A; }
.cs-tab {
    flex: 1; padding: 14px 0; text-align: center;
    font-family: 'GmarketSansM', sans-serif; font-size: 15px;
    background: #f5f6f8; border: 1px solid #ddd; border-bottom: none;
    color: #888; cursor: pointer; transition: all 0.2s; border-radius: 8px 8px 0 0;
}
.cs-tab + .cs-tab { margin-left: -1px; }
.cs-tab.active { background: #21488A; color: #fff; border-color: #21488A; font-family: 'GmarketSansB', sans-serif; }
.cs-panel { padding: 24px 0; }

.cs-faq-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cs-cat {
    padding: 8px 18px; border: 1px solid #ddd; border-radius: 20px;
    background: #fff; color: #666; font-size: 13px;
    font-family: 'GmarketSansM', sans-serif; cursor: pointer; transition: all 0.15s;
}
.cs-cat:hover { border-color: #21488A; color: #21488A; }
.cs-cat.active { background: #21488A; color: #fff; border-color: #21488A; }

.cs-faq-item {
    border: 1px solid #e8ecf1; border-radius: 10px; margin-bottom: 10px;
    overflow: hidden; transition: box-shadow 0.2s;
}
.cs-faq-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.cs-faq-item.open { border-color: #21488A; }
.cs-faq-q {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 16px 20px; border: none; background: #fff;
    text-align: left; cursor: pointer; transition: background 0.15s;
    font-family: 'GmarketSansM', sans-serif; font-size: 14px; color: #333;
}
.cs-faq-q:hover { background: #f8f9fc; }
.cs-q-badge {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: #21488A; color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: 'GmarketSansB', sans-serif; font-size: 14px;
}
.cs-q-text { flex: 1; line-height: 1.5; }
.cs-q-arrow { flex-shrink: 0; transition: transform 0.25s; color: #999; }
.cs-faq-item.open .cs-q-arrow { transform: rotate(180deg); }
.cs-faq-a {
    display: none; padding: 0 20px 20px 60px; position: relative;
    font-size: 14px; color: #666; line-height: 1.8;
    font-family: 'GmarketSansM', sans-serif; background: #f8f9fc; border-top: 1px solid #eee;
}
.cs-faq-item.open .cs-faq-a { display: block; padding-top: 16px; }
.cs-a-badge {
    position: absolute; left: 20px; top: 16px; width: 28px; height: 28px;
    border-radius: 50%; background: #e8f5e9; color: #2e7d32;
    display: flex; align-items: center; justify-content: center;
    font-family: 'GmarketSansB', sans-serif; font-size: 14px;
}
.cs-faq-a p { margin: 0; }

.cs-field { margin-bottom: 20px; }
.cs-field label {
    display: block; margin-bottom: 8px; font-size: 14px;
    font-family: 'GmarketSansM', sans-serif; color: #333;
}
.cs-field .ess { color: #e53935; }
.cs-file-info { color: #999; font-size: 12px; font-weight: normal; }
.cs-select, .cs-input {
    width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: 8px;
    font-size: 14px; font-family: inherit; background: #fff; transition: border-color 0.2s;
    box-sizing: border-box;
}
.cs-select:focus, .cs-input:focus { outline: none; border-color: #21488A; }
.cs-textarea {
    width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 8px;
    font-size: 14px; font-family: inherit; resize: vertical; min-height: 140px;
    transition: border-color 0.2s; box-sizing: border-box;
}
.cs-textarea:focus { outline: none; border-color: #21488A; }
.cs-char-count { display: block; text-align: right; margin-top: 4px; font-size: 12px; color: #999; }

.cs-file-area { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.cs-file-preview { display: contents; }
.cs-file-thumb {
    position: relative; width: 100px; height: 100px; border-radius: 10px;
    overflow: hidden; border: 1px solid #e0e3e8; box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.cs-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cs-file-del {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
    border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: #fff;
    font-size: 14px; cursor: pointer; display: flex; align-items: center;
    justify-content: center; line-height: 1;
}
.cs-file-del:hover { background: rgba(229,57,53,0.9); }
.cs-file-add {
    flex: 1; min-width: 120px; min-height: 100px; max-height: 120px;
    border: 2px dashed #d0d5dd; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; cursor: pointer; transition: border-color 0.2s, background 0.2s;
    background: #fafbfc;
}
.cs-file-add:hover { border-color: #21488A; background: #f0f5fb; }
.cs-file-add span { font-size: 13px; color: #888; font-family: 'GmarketSansM', sans-serif; }
.cs-file-hint { font-size: 11px !important; color: #bbb !important; }
.cs-inq-msg { text-align: center; font-size: 14px; padding: 8px 0; min-height: 22px; }
.cs-submit-btn {
    display: block; width: 100%; padding: 16px 0; border: none; background: #21488A;
    color: #fff; border-radius: 8px; font-family: 'GmarketSansB', sans-serif;
    font-size: 16px; cursor: pointer; transition: background 0.2s;
}
.cs-submit-btn:hover { background: #00347B; }
.cs-submit-btn:disabled { background: #999; cursor: not-allowed; }
.cs-login-required { text-align: center; padding: 60px 20px; }
.cs-login-required p {
    margin: 20px 0; font-size: 16px; color: #888; font-family: 'GmarketSansM', sans-serif;
}
.cs-login-btn {
    display: inline-block; padding: 14px 40px; background: #21488A; color: #fff;
    border-radius: 8px; font-family: 'GmarketSansM', sans-serif; font-size: 15px;
    text-decoration: none; transition: background 0.2s;
}
.cs-login-btn:hover { background: #00347B; }
.cs-inq-done { text-align: center; padding: 50px 20px; animation: joinFadeIn 0.5s ease; }
.cs-inq-done p { font-size: 18px; color: #21488A; font-family: 'GmarketSansB', sans-serif; margin: 16px 0 6px; }
.cs-inq-done span { font-size: 14px; color: #888; }

@media screen and (max-width: 480px) {
    .cs-info-cards { grid-template-columns: 1fr; gap: 10px; }
    .cs-info-card { padding: 18px 12px; }
    .cs-faq-q { padding: 14px 14px; gap: 10px; font-size: 13px; }
    .cs-faq-a { padding-left: 48px; }
    .cs-a-badge { left: 14px; }
    .cs-faq-cats { gap: 6px; }
    .cs-cat { padding: 6px 14px; font-size: 12px; }
    .cs-contact-bar { flex-direction: column; gap: 12px; padding: 16px; }
    .cs-contact-item { border-right: none; border-bottom: 1px solid #e8ecf1; padding: 0 0 12px; justify-content: flex-start; }
    .cs-contact-item:last-child { border-bottom: none; padding-bottom: 0; }
}


/* ============================================================
   STAKING DEPOSIT PAGE  (.stk-*)
   ============================================================ */
.stk-page { max-width: 640px; margin: 0 auto; padding-bottom: 48px; }

/* ---- Detail Hero v2 ---- */
/* ====== Premium Hero ====== */
.stk-hero2 {
    background: #fff; border-radius: 18px; overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #e8ecf2;
    box-shadow: 0 2px 12px rgba(0,20,60,.05);
}
.stk-hero-premium {
    background: linear-gradient(160deg, #0a1a3a 0%, #0d2b5e 40%, #102e66 100%);
    border: none; position: relative;
    box-shadow: 0 8px 40px rgba(0,20,80,.25);
}
.stk-h2-glow {
    position: absolute; top: -40px; right: -30px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(96,165,250,.15) 0%, transparent 70%);
    pointer-events: none;
}
.stk-hero-premium .stk-h2-header { position: relative; z-index: 1; text-align: center; }
.stk-h2-header {
    padding: 28px 24px 8px;
}
.stk-hero-premium .stk-h2-cat {
    background: rgba(255,255,255,.08); color: #93c5fd;
    border: 1px solid rgba(147,197,253,.15);
}
.stk-h2-cat {
    display: inline-block; font-size: 10px; color: #004DB5;
    background: linear-gradient(135deg, #eef4ff, #e0ecff);
    padding: 2px 9px; border-radius: 5px;
    font-family: 'GmarketSansB', sans-serif; letter-spacing: .2px;
    margin-bottom: 7px;
}
.stk-hero-premium .stk-h2-title { color: #fff; }
.stk-h2-title {
    font-size: 22px; font-family: 'GmarketSansB', sans-serif;
    color: #1a1a2e; margin: 0 0 8px; line-height: 1.35;
    letter-spacing: -.3px; word-break: keep-all; white-space: normal;
}
.stk-hero-premium .stk-h2-desc { color: rgba(255,255,255,.72); }
.stk-h2-desc {
    font-size: 13px; color: #8899aa; line-height: 1.6;
    margin: 0; word-break: keep-all;
}

/* ====== Rate Showcase (premium ring) ====== */
.stk-rate-showcase {
    display: flex; align-items: center; justify-content: center;
    gap: 28px; padding: 20px 24px 24px; position: relative; z-index: 1;
}
.stk-rate-ring {
    position: relative; width: 132px; height: 132px; flex-shrink: 0;
}
.stk-rate-circle {
    width: 100%; height: 100%;
    animation: stk-ring-spin 2s ease-out forwards;
    filter: drop-shadow(0 0 12px rgba(96,165,250,.35));
}
@keyframes stk-ring-spin {
    from { stroke-dasharray: 0 327; }
    to   { stroke-dasharray: 240 327; }
}
.stk-rate-inner {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.stk-rate-big {
    font-size: 28px; font-family: 'GmarketSansB', sans-serif;
    color: #fff; letter-spacing: -.5px; line-height: 1;
}
.stk-rate-big small { font-size: .55em; color: #93c5fd; }
.stk-rate-tag {
    font-size: 11px; color: rgba(255,255,255,.45);
    font-family: 'GmarketSansM', sans-serif;
    letter-spacing: 1.5px; margin-top: 4px;
}
.stk-rate-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stk-rate-annual-box {
    display: flex; flex-direction: column; gap: 1px;
}
.stk-rate-annual-label {
    font-size: 11px; color: rgba(255,255,255,.45);
    letter-spacing: 1.2px; text-transform: uppercase;
    font-family: 'GmarketSansM', sans-serif;
}
.stk-rate-annual-num {
    font-size: 26px; font-family: 'GmarketSansB', sans-serif;
    color: #5eead4; letter-spacing: -.3px; line-height: 1.1;
}
.stk-rate-range {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-family: 'GmarketSansB', sans-serif;
    color: rgba(255,255,255,.72);
}
.stk-rate-range-bar {
    flex: 1; height: 4px; background: rgba(255,255,255,.1);
    border-radius: 2px; overflow: hidden; min-width: 60px;
}
.stk-rate-range-fill {
    width: 70%; height: 100%;
    background: linear-gradient(90deg, #60a5fa, #5eead4);
    border-radius: 2px;
}
.stk-rate-range-label {
    font-size: 12px; color: rgba(255,255,255,.5);
    letter-spacing: .4px; font-family: 'GmarketSansM', sans-serif;
}

/* Placard strip */
.stk-placard {
    display: flex; align-items: center; justify-content: center;
    gap: 0; padding: 18px 16px;
    background: rgba(255,255,255,.06);
    border-top: 1px solid rgba(255,255,255,.07);
}
.stk-placard-item {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 7px; color: rgba(255,255,255,.78);
    font-size: 12.5px; font-family: 'GmarketSansM', sans-serif;
    letter-spacing: -.1px; line-height: 1.35; text-align: center;
}
.stk-placard-item svg { color: #5eead4; flex-shrink: 0; }
.stk-placard-div {
    width: 1px; height: 18px; flex-shrink: 0;
    background: rgba(255,255,255,.1);
}
@media(max-width:600px){
    .stk-placard { gap: 0; padding: 12px 10px; }
    .stk-placard-item { font-size: 10px; gap: 4px; }
    .stk-placard-item svg { width: 13px; height: 13px; }
}

.stk-h2-metrics {
    display: flex; align-items: center;
    background: linear-gradient(135deg, #f8f9fc, #f2f5fa);
    border-top: 1px solid #edf0f5;
    margin-top: 16px; padding: 14px 20px;
}
.stk-h2-metric { flex: 1; text-align: center; }
.stk-h2-mlabel {
    display: block; font-size: 9.5px; color: #99a; margin-bottom: 3px;
    letter-spacing: .2px;
}
.stk-h2-mval {
    font-size: 15px; font-family: 'GmarketSansB', sans-serif;
    color: #1a1a2e;
}
.stk-h2-mval small { font-size: 10px; color: #99a; font-weight: 400; }
.stk-h2-mdiv {
    width: 1px; height: 28px; flex-shrink: 0;
    background: linear-gradient(180deg, transparent, #dde2ea, transparent);
}

/* ---- Stats Row ---- */
/* ========== Split Layout ========== */
.stk-split-layout {
    display: flex; flex-direction: column; gap: 16px;
    align-items: stretch; margin-bottom: 16px;
}
.stk-split-left, .stk-split-right { min-width: 0; width: 100%; }
.stk-sticky-deposit { position: static; }
.stk-split-layout .stk-content-section { margin-bottom: 0; }
.stk-page > .stk-hero2,
.stk-page > .stk-v2-trust,
.stk-page > .stk-v2-faq,
.stk-page > .stk-related,
.stk-page > .stk-my-section { max-width: none; width: 100%; }

/* ========== V2 Deposit Premium ========== */
.stk-v2-deposit {
    border-radius: 24px; overflow: hidden; margin-bottom: 24px;
    box-shadow: 0 8px 40px rgba(0,20,60,.12);
    border: 1px solid rgba(0,77,181,.08);
}
.stk-v2-dep-header {
    position: relative; padding: 22px 20px 18px;
    background: linear-gradient(135deg, #0a1628 0%, #102040 40%, #1a3565 100%);
    overflow: hidden;
}
.stk-v2-dep-header-bg {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(0,100,230,.25) 0%, transparent 60%),
                radial-gradient(circle at 20% 80%, rgba(0,200,255,.1) 0%, transparent 50%);
}
.stk-v2-dep-header-content { position: relative; z-index: 1; }
.stk-v2-dep-title-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
.stk-v2-dep-title-row h2 {
    font-size: 19px; color: #fff; margin: 0;
    font-family: 'GmarketSansB', sans-serif; letter-spacing: -.3px;
}
.stk-v2-dep-badge-row { display: flex; gap: 6px; }
.stk-v2-badge {
    padding: 4px 10px; border-radius: 20px; font-size: 11px;
    font-weight: 700; letter-spacing: .3px;
}
.stk-v2-badge.safe {
    background: rgba(46,125,50,.25); color: #6be87b; border: 1px solid rgba(46,125,50,.3);
}
.stk-v2-badge.rate {
    background: rgba(255,193,7,.15); color: #ffd54f; border: 1px solid rgba(255,193,7,.2);
}
.stk-v2-periods {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.stk-v2-period {
    border: 1.5px solid rgba(255,255,255,.12); border-radius: 14px;
    background: rgba(255,255,255,.06); padding: 14px 8px; text-align: center;
    cursor: pointer; transition: all .25s; backdrop-filter: blur(4px);
}
.stk-v2-period:hover {
    border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1);
}
.stk-v2-period.active {
    border-color: #4d9fff; background: linear-gradient(135deg, rgba(0,100,230,.35), rgba(0,150,255,.2));
    box-shadow: 0 4px 20px rgba(0,100,230,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
.stk-v2-p-day {
    display: block; font-size: 16px; font-weight: 900; color: #fff;
    font-family: 'GmarketSansB', sans-serif; margin-bottom: 4px;
}
.stk-v2-p-rate {
    font-size: 13px; color: rgba(255,255,255,.6); font-weight: 600;
}
.stk-v2-period.active .stk-v2-p-rate { color: #7dc4ff; }
.stk-v2-p-rate small { font-size: 10px; opacity: .7; }

.stk-v2-dep-body { padding: 20px; background: #fff; }
.stk-v2-amount-section { margin-bottom: 20px; }
.stk-v2-label {
    font-size: 13px; color: #64748b; font-weight: 700; margin-bottom: 8px; display: block;
    font-family: 'GmarketSansM', sans-serif;
}
.stk-v2-input-row {
    display: flex; align-items: center; border: 2px solid #e2e8f0;
    border-radius: 14px; overflow: hidden; background: #f8fafc;
    transition: all .2s;
}
.stk-v2-input-row:focus-within {
    border-color: #004DB5; box-shadow: 0 0 0 3px rgba(0,77,181,.08);
}
.stk-v2-amount-input {
    flex: 1; border: none; background: transparent; padding: 12px 14px;
    font-size: 20px; font-family: 'GmarketSansB', sans-serif;
    color: #1a1a2e; outline: none; min-width: 0;
}
.stk-v2-amount-input::-webkit-inner-spin-button,
.stk-v2-amount-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.stk-v2-unit {
    padding: 0 16px; font-size: 14px; color: #94a3b8;
    font-family: 'GmarketSansB', sans-serif; flex-shrink: 0;
}
.stk-v2-hints {
    display: flex; justify-content: space-between; margin-top: 6px;
    font-size: 11px; color: #94a3b8;
}
.stk-v2-quick { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
.stk-v2-quick button {
    padding: 6px 0; border: 1px solid #e2e8f0; border-radius: 8px;
    background: #f8fafc; font-size: 11px; cursor: pointer; flex: 1; min-width: 50px;
    font-family: 'GmarketSansM', sans-serif; transition: all .15s; color: #475569;
    text-align: center;
}
.stk-v2-quick button:hover {
    border-color: #004DB5; color: #004DB5; background: #eff6ff;
}

.stk-v2-calc {
    background: linear-gradient(135deg, #f8f9fc, #f1f4f9); border-radius: 16px;
    padding: 16px 18px; margin-bottom: 20px;
}
.stk-v2-calc-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 0; font-size: 13.5px; color: #64748b;
}
.stk-v2-calc-row strong {
    color: #1e293b; font-family: 'GmarketSansB', sans-serif; font-size: 14px;
}
.stk-v2-calc-row.total {
    border-top: 2px solid #e2e8f0; margin-top: 4px; padding-top: 12px;
}
.stk-v2-calc-row.total strong {
    font-size: 18px; color: #004DB5;
}

.stk-v2-submit {
    width: 100%; padding: 16px; border: none; border-radius: 16px;
    background: linear-gradient(135deg, #004DB5, #0066E6);
    color: #fff; font-size: 17px; font-family: 'GmarketSansB', sans-serif;
    cursor: pointer; transition: all .2s; position: relative; overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,77,181,.25);
}
.stk-v2-submit::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.1) 50%, transparent 60%);
    transform: translateX(-100%); transition: transform .6s;
}
.stk-v2-submit:hover::after { transform: translateX(100%); }
.stk-v2-submit:hover {
    transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,77,181,.35);
}
.stk-v2-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.stk-v2-msg { margin-top: 10px; font-size: 14px; text-align: center; }
.stk-confirm { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
.stk-confirm[hidden] { display: none; }
.stk-confirm-backdrop { position: absolute; inset: 0; background: rgba(8, 18, 40, .55); }
.stk-confirm-card { position: relative; width: min(360px, 100%); background: #fff; border-radius: 18px; padding: 22px 20px 16px; text-align: center; box-shadow: 0 18px 40px rgba(0,0,0,.2); }
.stk-confirm-card h3 { margin: 0 0 8px; font-family: 'GmarketSansB', sans-serif; font-size: 18px; color: #102848; }
.stk-confirm-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: #64748b; }
.stk-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stk-confirm-no, .stk-confirm-yes { height: 46px; border: none; border-radius: 12px; font-family: 'GmarketSansB', sans-serif; font-size: 15px; cursor: pointer; }
.stk-confirm-no { background: #f1f5f9; color: #334155; }
.stk-confirm-yes { background: #004DB5; color: #fff; }

/* Trust Cards — one row each so the copy never shares a line with the icon */
.stk-v2-trust { margin-bottom: 24px; }
.stk-v2-trust-grid {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e6edf5; border-radius: 18px;
    overflow: hidden; box-shadow: 0 8px 22px rgba(16, 40, 72, .06);
}
.stk-v2-trust-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 16px; text-align: left; background: #fff;
}
.stk-v2-trust-card + .stk-v2-trust-card { border-top: 1px solid #eef2f7; }
.stk-v2-trust-ico {
    width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.stk-v2-trust-ico svg { display: block; }
.stk-v2-trust-ico.shield { background: #e7f7ef; color: #0b8a56; }
.stk-v2-trust-ico.clock { background: #e8f1ff; color: #004DB5; }
.stk-v2-trust-ico.wallet { background: #fff4dc; color: #a97812; }
.stk-v2-trust-copy { min-width: 0; flex: 1; }
.stk-v2-trust-card strong {
    display: block; margin: 0;
    font-family: 'GmarketSansB', sans-serif; font-size: 15px;
    letter-spacing: -.35px; line-height: 1.35; color: #102848;
    word-break: keep-all;
}
.stk-v2-trust-card p {
    margin: 4px 0 0; font-size: 13px; line-height: 1.55;
    color: #5c6b80; word-break: keep-all;
}

/* FAQ Accordion */
.stk-v2-faq { margin-bottom: 24px; }
.stk-v2-faq-title {
    font-size: 17px; font-family: 'GmarketSansB', sans-serif;
    color: #1e293b; margin: 0 0 14px; padding-left: 4px;
}
.stk-v2-faq-list { display: flex; flex-direction: column; gap: 8px; }
.stk-v2-faq-item {
    background: #fff; border-radius: 14px; border: 1px solid #f0f2f5;
    overflow: hidden; transition: all .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
}
.stk-v2-faq-item[open] {
    border-color: #dbeafe; box-shadow: 0 4px 16px rgba(0,77,181,.06);
}
.stk-v2-faq-item summary {
    padding: 16px 18px; font-size: 14px; font-weight: 700; color: #1e293b;
    cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
    font-family: 'GmarketSansM', sans-serif; transition: color .2s;
}
.stk-v2-faq-item summary::-webkit-details-marker { display: none; }
.stk-v2-faq-item summary::before {
    content: 'Q'; width: 24px; height: 24px; border-radius: 7px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #004DB5;
    font-size: 12px; font-weight: 900; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
    font-family: 'GmarketSansB', sans-serif;
}
.stk-v2-faq-item summary::after {
    content: '+'; margin-left: auto; font-size: 18px; color: #94a3b8;
    font-weight: 400; transition: transform .2s; flex-shrink: 0;
}
.stk-v2-faq-item[open] summary::after {
    content: '\2212'; color: #004DB5;
}
.stk-v2-faq-item[open] summary { color: #004DB5; }
.stk-v2-faq-item p {
    padding: 0 18px 16px 52px; font-size: 13px; color: #64748b;
    line-height: 1.65; margin: 0; animation: faqSlide .25s ease;
}
@keyframes faqSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile responsive */
/* Floating CTA Bar */
.stk-float-cta {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9990;
    background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
    border-top: 1px solid #e2e8f0;
    padding: 12px 20px; display: flex; align-items: center;
    justify-content: space-between; gap: 14px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    transform: translateY(100%); transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.stk-float-cta.visible { transform: translateY(0); }
.stk-float-info { display: flex; flex-direction: column; gap: 2px; }
.stk-float-rate {
    font-size: 20px; font-weight: 900; color: #004DB5;
    font-family: 'GmarketSansB', sans-serif;
}
.stk-float-rate small { font-size: 12px; color: #64748b; font-weight: 600; }
.stk-float-desc { font-size: 11px; color: #94a3b8; font-weight: 600; }
.stk-float-btn {
    padding: 14px 32px; border: none; border-radius: 14px;
    background: linear-gradient(135deg, #004DB5, #0066E6);
    color: #fff; font-size: 16px; font-family: 'GmarketSansB', sans-serif;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,77,181,.3);
    transition: all .2s;
}
.stk-float-btn:hover {
    transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,77,181,.4);
}
@media (min-width: 901px) {
    .stk-float-cta { display: none !important; }
}

@media (max-width: 600px) {
    .stk-v2-dep-header { padding: 20px 16px 16px; }
    .stk-v2-periods { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .stk-v2-period { padding: 10px 4px; border-radius: 10px; }
    .stk-v2-p-day { font-size: 14px; }
    .stk-v2-p-rate { font-size: 11px; }
    .stk-v2-dep-body { padding: 18px 16px; }
    .stk-v2-amount-input { font-size: 18px; padding: 12px; }
    .stk-v2-trust-card { padding: 15px 14px; gap: 12px; }
    .stk-v2-trust-ico { width: 42px; height: 42px; }
    .stk-v2-trust-card strong { font-size: 14.5px; }
    .stk-v2-trust-card p { font-size: 12.5px; }
    .stk-v2-dep-title-row h2 { font-size: 17px; }
}

.stk-stats-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    margin-bottom: 24px;
}
.stk-stat-card {
    background: #fff; border-radius: 14px; padding: 18px 14px;
    text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.06);
    border: 1px solid #f0f2f5;
}
.stk-stat-ico { font-size: 24px; margin-bottom: 6px; }
.stk-stat-label { display: block; font-size: 12px; color: #888; margin-bottom: 4px; }
.stk-stat-val { font-size: 16px; font-family: 'GmarketSansB', sans-serif; color: #1a1a2e; }

/* ---- Deposit Card ---- */
.stk-deposit-card {
    background: #fff; border-radius: 20px; padding: 28px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.07); margin-bottom: 24px;
    border: 1px solid #f0f2f5;
}
.stk-deposit-title {
    font-size: 20px; font-family: 'GmarketSansB', sans-serif;
    color: #1a1a2e; margin: 0 0 20px;
}

/* Period Selector */
.stk-period-label {
    font-size: 13px; color: #666; margin-bottom: 10px;
    font-family: 'GmarketSansM', sans-serif;
}
.stk-period-btns { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.stk-period-btn {
    flex: 1; min-width: 80px; border: 2px solid #e8ecf1; border-radius: 12px;
    background: #fafbfc; padding: 14px 10px; text-align: center;
    cursor: pointer; transition: all .2s;
}
.stk-period-btn:hover { border-color: #004DB5; background: #f0f6ff; }
.stk-period-btn.active {
    border-color: #004DB5; background: linear-gradient(135deg, #004DB5, #0066E6);
    color: #fff;
}
.stk-pb-days {
    display: block; font-size: 16px; font-family: 'GmarketSansB', sans-serif;
    margin-bottom: 2px;
}
.stk-pb-rate { display: block; font-size: 12px; opacity: .8; }
.stk-period-btn.active .stk-pb-rate { opacity: .9; }

/* Amount Input */
.stk-amount-group { margin-bottom: 24px; }
.stk-amount-label {
    font-size: 13px; color: #666; margin-bottom: 8px; display: block;
    font-family: 'GmarketSansM', sans-serif;
}
.stk-amount-input-wrap {
    display: flex; align-items: center; border: 2px solid #e8ecf1;
    border-radius: 12px; overflow: hidden; background: #fafbfc;
    transition: border-color .2s;
}
.stk-amount-input-wrap:focus-within { border-color: #004DB5; }
.stk-amount-input {
    flex: 1; border: none; background: transparent; padding: 14px 16px;
    font-size: 20px; font-family: 'GmarketSansB', sans-serif;
    color: #1a1a2e; outline: none;
}
.stk-amount-input::-webkit-inner-spin-button,
.stk-amount-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.stk-amount-unit {
    padding: 0 16px; font-size: 14px; color: #888;
    font-family: 'GmarketSansB', sans-serif;
}
.stk-amount-hints {
    display: flex; justify-content: space-between; margin-top: 6px;
    font-size: 12px; color: #999;
}
.stk-quick-amounts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.stk-quick-amounts button {
    padding: 8px 16px; border: 1px solid #e8ecf1; border-radius: 8px;
    background: #fafbfc; font-size: 13px; cursor: pointer;
    font-family: 'GmarketSansM', sans-serif; transition: all .2s;
    color: #444;
}
.stk-quick-amounts button:hover { border-color: #004DB5; color: #004DB5; background: #f0f6ff; }

/* Calculator */
.stk-calc-box {
    background: #f8f9fc; border-radius: 14px; padding: 18px 20px;
    margin-bottom: 20px;
}
.stk-calc-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; font-size: 14px; color: #555;
}
.stk-calc-row strong { color: #1a1a2e; font-family: 'GmarketSansB', sans-serif; }
.stk-calc-highlight {
    border-top: 2px solid #e0e5ef; margin-top: 6px; padding-top: 14px;
}
.stk-calc-highlight strong {
    font-size: 18px; color: #004DB5;
}

/* Safety Box */
.stk-safety-box {
    display: flex; gap: 14px; align-items: flex-start;
    background: linear-gradient(135deg, #f0f9f0, #e8f5e9); border-radius: 14px;
    padding: 18px 20px; margin-bottom: 24px;
    border: 1px solid #c8e6c9;
}
.stk-safety-icon { font-size: 28px; flex-shrink: 0; }
.stk-safety-text strong {
    font-size: 15px; color: #2e7d32; display: block; margin-bottom: 4px;
    font-family: 'GmarketSansB', sans-serif;
}
.stk-safety-text p { font-size: 13px; color: #555; line-height: 1.5; margin: 0; }

/* Submit */
.stk-submit-wrap { text-align: center; }
.stk-submit-btn {
    width: 100%; padding: 16px; border: none; border-radius: 14px;
    background: linear-gradient(135deg, #004DB5, #0066E6);
    color: #fff; font-size: 17px; font-family: 'GmarketSansB', sans-serif;
    cursor: pointer; transition: all .3s; letter-spacing: .5px;
}
.stk-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,77,181,.35); }
.stk-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.stk-submit-msg { margin-top: 10px; font-size: 14px; }

/* ---- My Deposits ---- */
.stk-my-section {
    background: #fff; border-radius: 20px; padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.07); margin-bottom: 24px;
    border: 1px solid #f0f2f5;
}
.stk-my-title {
    font-size: 18px; font-family: 'GmarketSansB', sans-serif;
    color: #1a1a2e; margin: 0 0 16px;
}
.stk-dep-item {
    background: #f8f9fc; border-radius: 14px; padding: 18px;
    margin-bottom: 12px; border: 1px solid #e8ecf1;
}
.stk-dep-item.completed { opacity: .7; }
.stk-dep-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.stk-dep-amount {
    font-size: 20px; font-family: 'GmarketSansB', sans-serif; color: #1a1a2e;
}
.stk-dep-badge {
    padding: 4px 12px; border-radius: 20px; font-size: 12px;
    font-family: 'GmarketSansM', sans-serif;
}
.stk-dep-badge.active { background: #e8f5e9; color: #2e7d32; }
.stk-dep-badge.done { background: #f0f0f0; color: #888; }
.stk-dep-info {
    display: flex; justify-content: space-between; font-size: 13px;
    color: #888; margin-bottom: 10px;
}
.stk-dep-earn {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 10px; border-top: 1px solid #e8ecf1;
}
.stk-dep-earn span { font-size: 13px; color: #666; }
.stk-dep-earned {
    font-size: 16px; font-family: 'GmarketSansB', sans-serif; color: #2e7d32;
}
.stk-dep-chart {
    display: flex; align-items: flex-end; gap: 3px; margin-top: 10px;
    height: 40px;
}
.stk-chart-bar {
    flex: 1; background: linear-gradient(180deg, #4caf50, #81c784);
    border-radius: 3px 3px 0 0; min-height: 4px;
}

/* ---- FAQ ---- */
.stk-info-section {
    background: #fff; border-radius: 20px; padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.07); margin-bottom: 24px;
    border: 1px solid #f0f2f5;
}
.stk-info-section h3 {
    font-size: 18px; font-family: 'GmarketSansB', sans-serif;
    color: #1a1a2e; margin: 0 0 16px;
}
.stk-faq-item {
    padding: 14px 0; border-bottom: 1px solid #f0f2f5;
}
.stk-faq-item:last-child { border-bottom: none; }
.stk-faq-item strong {
    font-size: 14px; color: #1a1a2e; font-family: 'GmarketSansM', sans-serif;
}
.stk-faq-item p {
    font-size: 13px; color: #666; line-height: 1.55; margin: 6px 0 0;
}

/* ---- Related Products ---- */
.stk-related { margin-bottom: 24px; }
.stk-related h3 {
    font-size: 18px; font-family: 'GmarketSansB', sans-serif;
    color: #1a1a2e; margin: 0 0 14px;
}
.stk-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stk-rel-card {
    border-radius: 14px; overflow: hidden; text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: transform .2s;
    border: 1px solid #f0f2f5;
}
.stk-rel-card:hover { transform: translateY(-3px); }
.stk-rel-top {
    padding: 16px 14px; color: #fff; display: flex;
    flex-direction: column; gap: 4px;
}
.stk-rel-top span { font-size: 11px; opacity: .85; }
.stk-rel-top strong { font-size: 18px; font-family: 'GmarketSansB', sans-serif; }
.stk-rel-bot {
    background: #fff; padding: 12px 14px;
}
.stk-rel-bot strong {
    display: block; font-size: 13px; color: #1a1a2e; margin-bottom: 2px;
    font-family: 'GmarketSansM', sans-serif;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stk-rel-bot span { font-size: 12px; color: #888; }

/* ---- Mobile ---- */
@media screen and (max-width: 600px) {
    .stk-page { padding: 0 4px 40px; }
    .stk-hero2 { border-radius: 14px; }
    .stk-h2-header { padding: 24px 18px 6px; }
    .stk-h2-title { font-size: 20px; }
    .stk-h2-desc { font-size: 13px; }
    .stk-rate-showcase { gap: 18px; padding: 16px 16px 20px; }
    .stk-rate-ring { width: 118px; height: 118px; }
    .stk-rate-big { font-size: 26px; }
    .stk-rate-annual-num { font-size: 22px; }
    .stk-rate-side { align-items: flex-start; }
    .stk-h2-metrics { padding: 12px 16px; }
    .stk-h2-mval { font-size: 13px; }
    .stk-stats-row { grid-template-columns: 1fr; gap: 8px; }
    .stk-deposit-card { padding: 20px 16px; border-radius: 16px; }
    .stk-period-btns { gap: 6px; }
    .stk-period-btn { min-width: 70px; padding: 12px 8px; }
    .stk-amount-input { font-size: 18px; padding: 12px; }
    .stk-related-grid { grid-template-columns: 1fr; }
}

/* 가이드북 */
.guide-hero{
    padding:28px 18px 24px;text-align:center;color:#fff;word-break:keep-all;
    background:
        radial-gradient(70% 50% at 100% 0%, rgba(255,214,120,.2), transparent 52%),
        radial-gradient(50% 60% at 0% 100%, rgba(96,165,250,.2), transparent 56%),
        linear-gradient(168deg,#071428 0%,#12356e 54%,#0d2144 100%);
}
.guide-hero-in{max-width:640px;margin:0 auto}
.guide-kicker{font-family:'GmarketSansB',sans-serif;font-size:11px;letter-spacing:2px;color:#e4b84a}
.guide-hero h1{margin:8px 0 0;font-family:'GmarketSansB',sans-serif;font-size:28px;letter-spacing:-.8px}
.guide-hero p{margin:10px auto 0;max-width:460px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.88)}
.guide-hero,.guide-page{font-family:'GmarketSansM',sans-serif;letter-spacing:-.3px}
.guide-hero h1,.guide-page h2,.guide-page h3,.guide-page strong,.guide-page b,.gnav a,.gflow li,.gpath,.gsteps .n{font-family:'GmarketSansB',sans-serif;font-weight:normal}
.guide-page{padding-top:14px;word-break:keep-all}
.gnav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.gnav a{
    display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;
    padding:10px 8px;background:#fff;border:1px solid #e3ebf5;border-radius:14px;
    font-family:'GmarketSansB',sans-serif;font-size:17px;color:#102848;letter-spacing:-.3px;
}
.gnav img{height:22px;width:auto;max-width:78px;object-fit:contain}
.gnav img.is-mark{width:26px;height:26px;max-width:none}
.gintro{
    margin:0 0 14px;padding:14px 16px;background:#fff;border:1px solid #e7eef8;border-radius:16px;
    font-size:16px;line-height:1.75;color:#24344c;
}
.gflow{display:flex;gap:6px;margin:12px 0 2px;padding:0}
.gflow li{
    flex:1;min-width:0;text-align:center;background:#fff8ee;border:1px solid #f3e2c2;border-radius:14px;
    padding:8px 2px 7px;font-family:'GmarketSansB',sans-serif;font-size:12px;color:#102848;line-height:1.2;
}
.gflow span{display:block;font-size:18px;line-height:1;margin-bottom:4px}
.gemo{width:22px;height:22px;display:inline-block;vertical-align:-5px;flex:none}
.gflow .gemo{width:30px;height:30px;display:block;margin:0 auto 4px}
.gsec h3 .gemo{width:28px;height:28px;vertical-align:middle}
.gneed b .gemo,.gnote b .gemo,.gfoot .gemo,.gtag .gemo,.gintro .gemo{width:20px;height:20px;vertical-align:-4px}
.gcard{
    scroll-margin-top:176px;margin-bottom:16px;padding:20px 16px 16px;
    background:#fff;border:1px solid #e3ebf5;border-radius:18px;
}
.ghead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.glogo{height:32px;width:auto;max-width:168px;object-fit:contain}
.glogo.is-mark{width:48px;height:48px;max-width:none}
.ghead h2{margin:2px 0 0;font-family:'GmarketSansB',sans-serif;font-size:26px;letter-spacing:-.6px;color:#102848;line-height:1.15}
.gtag{margin:0;font-family:'GmarketSansM',sans-serif;font-size:13px;letter-spacing:.04em;color:#1a56c4}
.glead{margin:6px 0 0;font-size:16px;line-height:1.6;color:#31445f}
.gneed{margin:12px 0 0;padding:12px;background:#f4f7fb;border-radius:16px}
.gneed b,.gsec h3,.gnote b{font-family:'GmarketSansB',sans-serif}
.gneed b{display:block;margin-bottom:8px;font-size:15px;color:#1a56c4}
.gneed ul{display:flex;flex-wrap:wrap;gap:8px}
.gneed li{margin:0;padding:8px 12px;background:#fff;border:1px solid #e6eef8;border-radius:999px;font-size:15px;line-height:1.4;color:#1c2b42}
.gsec{margin-top:12px;padding:14px 12px 12px;background:#f7f9fc;border-radius:16px}
.gsec h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:20px;color:#102848;letter-spacing:-.4px}
.gsec h3 span{font-size:22px;line-height:1}
.gsec .gdesc{margin:0 0 10px;font-size:16px;line-height:1.7;color:#2c3d56}
.gpath{
    margin:0 0 10px;padding:10px 12px;background:#eef3fb;border-radius:12px;
    font-size:15px;line-height:1.55;color:#14315f;
}
.gsteps{display:flex;flex-direction:column;gap:10px}
.gsteps li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.gsteps .n{
    width:28px;height:28px;margin-top:1px;border-radius:50%;background:#fff;color:#c8962e;
    border:1.5px solid #f0ddb0;font-family:'GmarketSansB',sans-serif;font-size:13px;
    display:flex;align-items:center;justify-content:center;
}
.gsteps strong{display:block;margin-bottom:2px;font-size:17px;line-height:1.4;color:#102848}
.gsteps p{margin:0;font-size:16px;line-height:1.7;color:#24344c}
.gnote{margin-top:16px;padding:14px;background:#fff8ea;border:1px solid #f0ddb0;border-radius:14px}
.gnote b{display:block;margin-bottom:6px;font-size:16px;color:#8a5a10}
.gnote li{margin:0 0 6px;font-size:15.5px;line-height:1.65;color:#3d3424}
.gfoot{
    margin:4px 0 8px;padding:14px 16px;background:#102848;color:#fff;border-radius:16px;
    font-size:15.5px;line-height:1.7;
}

/* 부업 자료실 — 예치 상품 */
.earn-product {
    display: block; text-align: center; text-decoration: none; color: #fff;
    word-break: keep-all;
    background:
        radial-gradient(70% 50% at 100% 0%, rgba(255, 214, 120, .2), transparent 52%),
        radial-gradient(50% 60% at 0% 100%, rgba(96, 165, 250, .2), transparent 56%),
        linear-gradient(168deg, #071428 0%, #12356e 54%, #0d2144 100%);
}
.earn-product-in { max-width: 640px; margin: 0 auto; padding: 16px 16px 0; }
.earn-product-kicker {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 16px;
}
.earn-brand, .earn-safe {
    display: inline-flex; align-items: center; height: 16px;
    font-family: 'GmarketSansM', sans-serif; font-size: 11px;
    letter-spacing: .18em; line-height: 1; color: #e4b84a;
}
.earn-safe { letter-spacing: .04em; color: #ffe7a8; }
.earn-kicker-line { width: 1px; height: 10px; background: rgba(255, 231, 168, .45); }
.earn-product h1 {
    margin: 8px 0 0; padding: 0 8px;
    font-family: 'GmarketSansB', sans-serif;
    font-size: 24px; line-height: 1.25; letter-spacing: -.045em; color: #fff;
    white-space: normal; overflow: visible;
}
.earn-product h1 span {
    display: inline-block; margin-bottom: 4px;
    font-family: 'GmarketSansM', sans-serif; font-size: 12px;
    letter-spacing: .18em; line-height: 1; color: #e4b84a;
}
.earn-product h1 em {
    font-style: normal; color: #ffe29a;
    text-shadow: 0 0 18px rgba(255, 210, 120, .6);
}
.earn-ment {
    margin: 8px 0 0;
    font-family: 'GmarketSansL', sans-serif; font-size: 14px;
    line-height: 1.4; letter-spacing: -.03em; color: rgba(255,255,255,.88);
}
.earn-ment em {
    font-style: normal; font-family: 'GmarketSansB', sans-serif;
    font-size: 17px; letter-spacing: -.04em; color: #ffe29a;
    text-shadow: 0 0 16px rgba(255, 210, 120, .45);
}
.earn-lead {
    margin: 6px 0 0;
    font-family: 'GmarketSansM', sans-serif; font-size: 12px;
    line-height: 1.5; letter-spacing: -.02em; color: rgba(255,255,255,.68);
}
.earn-lead b {
    font-weight: normal; font-family: 'GmarketSansB', sans-serif; color: #8eb7ff;
}
.earn-rate-label {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 12px 0 0;
    font-family: 'GmarketSansM', sans-serif; font-size: 11px;
    letter-spacing: .14em; color: #e4b84a;
}
.earn-rate-label::before, .earn-rate-label::after {
    content: ""; width: 22px; height: 1px; background: rgba(228, 184, 74, .5);
}
.earn-rates {
    display: flex; margin: 8px -16px 0;
    border-top: 1px solid rgba(255,255,255,.16);
}
.earn-rate {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 10px 2px 22px;
    border-left: 1px solid rgba(255,255,255,.14);
}
.earn-rate:first-child { border-left: 0; }
.earn-rate span {
    display: block; font-family: 'GmarketSansM', sans-serif;
    font-size: 11px; letter-spacing: .04em; line-height: 1; color: rgba(255,255,255,.62);
}
.earn-rate strong {
    display: block; margin-top: 4px;
    font-family: 'GmarketSansB', sans-serif; font-size: 16px;
    letter-spacing: -.03em; line-height: 1; color: #fff;
}
.earn-rate em {
    position: absolute; left: 0; right: 0; bottom: 10px;
    font-style: normal; font-family: 'GmarketSansM', sans-serif;
    font-size: 10px; letter-spacing: .08em; line-height: 1; color: #ffe9b0;
}
.earn-rate.is-best { background: rgba(255, 214, 120, .1); }
.earn-rate.is-best strong { color: #ffe9b0; }
.earn-product-bar {
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    max-width: 640px; margin: 0 auto; min-height: 44px;
    background: rgba(0, 0, 0, .18); color: #fff;
    border-top: 1px solid rgba(255,255,255,.12);
}
.earn-min {
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    padding-right: 18px;
    font-family: 'GmarketSansM', sans-serif; font-size: 13px; letter-spacing: -.02em;
    white-space: nowrap;
}
.earn-min .usdt-ico { width: 15px; height: 15px; }
.earn-go {
    display: flex; align-items: center; height: 100%; padding-left: 18px;
    border-left: 1px solid rgba(255,255,255,.16);
    font-family: 'GmarketSansB', sans-serif; font-size: 15px; letter-spacing: -.03em;
    color: #ffe7a8; text-decoration: none;
}
.lend-wrap { max-width: 640px; margin: 0 auto; padding: 8px 16px 40px; font-family: 'GmarketSansM', sans-serif; }
.lend-block { margin-top: 22px; }
.lend-block h2 {
    margin: 0 0 10px; font-family: 'GmarketSansB', sans-serif; font-weight: normal;
    font-size: 18px; letter-spacing: -.4px; color: #102848;
}
.lend-steps, .lend-earn, .lend-notes { display: flex; flex-direction: column; gap: 8px; }
.lend-step, .lend-row, .lend-note {
    background: #fff; border: 1px solid #e6edf6; border-radius: 14px;
}
.lend-step { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 10px; align-items: center; padding: 12px; }
.lend-step b {
    width: 36px; height: 36px; border-radius: 10px; background: #21488A; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 13px;
}
.lend-step strong { display: block; font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 15px; color: #102848; }
.lend-step span, .lend-note p { font-size: 13px; line-height: 1.5; color: #5c6b80; }
.lend-row {
    display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center;
    gap: 8px; padding: 12px 14px; text-decoration: none; color: inherit;
}
.lend-row.is-best { border-color: #e4b84a; background: #fffaf0; }
.lend-day { font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 16px; color: #21488A; }
.lend-rate { font-size: 13px; color: #5c6b80; }
.lend-usdt { text-align: right; font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 16px; color: #102848; }
.lend-usdt small { display: block; margin-top: 2px; font-family: 'GmarketSansM', sans-serif; font-size: 11px; color: #8a96a8; }
.lend-note { padding: 14px; }
.lend-note strong { display: block; margin-bottom: 4px; font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 15px; color: #102848; }
.lend-note p { margin: 0; }
.lend-cta {
    display: block; margin-top: 22px; padding: 16px; border-radius: 14px; text-align: center;
    background: #21488A; color: #fff; text-decoration: none;
    font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 16px;
}

.cd-hero {
    position: relative; text-align: center; color: #fff; word-break: keep-all;
    background:
        radial-gradient(70% 50% at 100% 0%, rgba(255, 214, 120, .22), transparent 52%),
        radial-gradient(50% 60% at 0% 100%, rgba(96, 165, 250, .18), transparent 56%),
        linear-gradient(168deg, #071428 0%, #12356e 54%, #0d2144 100%);
}
.cd-hero-in { max-width: 640px; margin: 0 auto; padding: 22px 16px 36px; }
.cd-kicker {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'GmarketSansM', sans-serif; font-size: 11px; letter-spacing: .16em; color: #e4b84a;
}
.cd-kicker i { width: 1px; height: 10px; background: rgba(255, 231, 168, .45); }
.cd-kicker b { font-weight: normal; letter-spacing: .04em; color: #ffe7a8; }
.cd-hero h1 {
    margin: 10px 0 0; font-family: 'GmarketSansB', sans-serif; font-weight: normal;
    font-size: 28px; line-height: 1.2; letter-spacing: -.045em; color: #fff;
}
.cd-hero h1 span {
    display: block; margin-bottom: 4px;
    font-family: 'GmarketSansM', sans-serif; font-size: 12px; letter-spacing: .18em; color: #e4b84a;
}
.cd-hero h1 em { font-style: normal; color: #ffe29a; }
.cd-ment {
    margin: 10px 0 0; font-family: 'GmarketSansL', sans-serif;
    font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.88);
}
.cd-range {
    margin: 8px 0 0; font-family: 'GmarketSansM', sans-serif;
    font-size: 13px; color: #ffe7a8;
}
.cd-facts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px;
}
.cd-facts span {
    padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    font-family: 'GmarketSansM', sans-serif; font-size: 12px; line-height: 1.3; color: #fff;
}
.cd-sheet { background: #f4f6fb; padding: 16px 16px 96px; }
.cd-card {
    position: relative; z-index: 1; max-width: 608px; margin: 0 auto; scroll-margin-top: 180px;
    padding: 18px 16px 16px; background: #fff; border: 1px solid #e6edf6; border-radius: 18px;
    box-shadow: 0 10px 28px rgba(16, 40, 72, .06);
    font-family: 'GmarketSansM', sans-serif;
}
.cd-emo { width: 44px; height: 44px; display: block; flex: none; }
.cd-ico {
    width: 34px; height: 34px; border-radius: 11px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eef3fb; color: #21488A;
}
.cd-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cd-ico-sm { width: 16px; height: 16px; border-radius: 0; background: transparent; }
.cd-ico-sm svg { width: 14px; height: 14px; }
.cd-label {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin: 0 0 10px; font-size: 12px; color: #5c6b80;
}
.cd-label b {
    font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 16px; letter-spacing: -.03em; color: #102848;
}
.cd-amt-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px 10px 10px; border: 1px solid #e3ebf5; border-radius: 16px; background: #f4f6fb;
    box-shadow: inset 0 1px 0 #fff;
}
.cd-amt-row:focus-within { border-color: #21488A; background: #fff; box-shadow: 0 0 0 3px rgba(33, 72, 138, .12); }
.cd-amt {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 30px; letter-spacing: -.04em; color: #102848;
    -moz-appearance: textfield;
}
.cd-amt::-webkit-outer-spin-button, .cd-amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cd-amt-row span { font-size: 12px; letter-spacing: .06em; color: #21488A; }
.cd-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.cd-quick button, .cd-tr, .cd-go, .cd-confirm button {
    font-family: 'GmarketSansM', sans-serif; cursor: pointer;
}
.cd-quick button {
    height: 34px; padding: 0; border: 1px solid #e3ebf5; border-radius: 999px; background: #fff;
    font-size: 12px; color: #24344c;
}
.cd-quick button.is-on { border-color: #21488A; background: #21488A; color: #fff; box-shadow: 0 4px 10px rgba(33, 72, 138, .18); }
.cd-table { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.cd-th, .cd-tr {
    display: grid; grid-template-columns: 78px minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr); align-items: center; gap: 4px;
    width: 100%; padding: 12px 12px; text-align: right;
}
.cd-th {
    padding: 2px 8px 0; border: 0; background: transparent;
    font-size: 11px; letter-spacing: .06em; color: #5c6b80;
}
.cd-th span:first-child, .cd-day { text-align: left; }
.cd-tr {
    border: 1px solid #e6edf6; border-radius: 14px; background: #fff; color: inherit;
    box-shadow: 0 4px 12px rgba(16, 40, 72, .04);
}
.cd-tr.is-on { border-color: #e4b84a; background: #fffdf8; box-shadow: 0 8px 18px rgba(33, 72, 138, .08); }
.cd-day { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cd-day b { font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 14px; color: #102848; }
.cd-day em { font-style: normal; font-size: 11px; color: #8a96a8; }
.cd-day em i {
    font-style: normal; margin-left: 4px; padding: 1px 5px; border-radius: 999px;
    background: #fff3d2; color: #8a6a22; letter-spacing: .02em; font-size: 10px;
}
.cd-c-day, .cd-c-term, .cd-c-end {
    font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 13px; color: #102848;
    letter-spacing: -.03em; white-space: nowrap;
}
.cd-c-end { color: #21488A; }
.cd-receipt {
    margin-top: 12px; padding: 14px 14px 12px; border-radius: 16px; border: 0;
    background: linear-gradient(165deg, #1d4a86 0%, #16356e 55%, #102848 100%);
    box-shadow: 0 10px 22px rgba(16, 40, 72, .16);
}
.cd-sum-meta { margin: 0 0 10px; font-size: 13px; letter-spacing: -.02em; color: #ffe7a8; text-align: left; }
.cd-sum { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 8px; margin: 0; }
.cd-sum div { padding: 0; background: transparent; text-align: left; border-radius: 0; }
.cd-sum div:last-child { text-align: right; }
.cd-sum div:last-child span { justify-content: flex-end; }
.cd-sum span { display: block; font-size: 11px; color: rgba(255,255,255,.62); }
.cd-sum b {
    display: block; margin-top: 3px;
    font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 15px; color: #fff;
}
.cd-sum div:last-child b { font-size: 18px; color: #ffe7a8; }
.cd-meta {
    margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #5c6b80; text-align: center;
}
.cd-go {
    display: block; width: 100%; margin-top: 14px; padding: 16px 12px; border: 0; border-radius: 14px;
    background: linear-gradient(180deg, #2b5aa6 0%, #21488A 42%, #18386f 100%);
    color: #fff; text-align: center; text-decoration: none;
    box-shadow: 0 8px 16px rgba(33, 72, 138, .22);
    font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 15px; letter-spacing: .02em;
}
.cd-go:disabled { background: #c5ceda; color: #fff; cursor: default; box-shadow: none; }
.cd-msg { min-height: 18px; margin: 8px 0 0; font-size: 12px; text-align: center; color: #5c6b80; }
.cd-msg.is-bad { color: #c62828; }
.cd-msg.is-ok { color: #2e7d32; }
.cd-block { max-width: 608px; margin: 28px auto 0; }
.cd-head span {
    display: block; font-family: 'GmarketSansM', sans-serif;
    font-size: 11px; letter-spacing: .18em; color: #21488A;
}
.cd-block h2 {
    margin: 2px 0 12px; font-family: 'GmarketSansB', sans-serif; font-weight: normal;
    font-size: 18px; letter-spacing: -.4px; color: #102848;
}
.cd-steps, .cd-notes {
    display: flex; flex-direction: column; gap: 8px;
    margin: 0; padding: 0; list-style: none; background: transparent; border: 0;
}
.cd-step, .cd-note {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center;
    padding: 14px; text-align: left;
    background: #fff; border: 1px solid #e6edf6; border-radius: 18px;
    box-shadow: 0 8px 18px rgba(16, 40, 72, .05);
}
.cd-step strong, .cd-note strong {
    display: block; font-family: 'GmarketSansB', sans-serif; font-weight: normal;
    font-size: 15px; color: #102848;
}
.cd-step span, .cd-note p { display: block; margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: #5c6b80; }
.cd-mine { background: #fff; border: 1px solid #e6edf6; border-radius: 16px; }
.cd-mine { padding: 14px; }
.cd-mine + .cd-mine { margin-top: 8px; }
.cd-mine-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cd-mine-top strong { font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 16px; color: #102848; }
.cd-mine-top span {
    padding: 4px 8px; border-radius: 999px; background: #e8f6ee; color: #1b7a3a;
    font-size: 11px;
}
.cd-mine-top span.is-done { background: #f4f6fb; color: #5c6b80; }
.cd-mine p { margin: 6px 0 0; font-size: 12px; color: #5c6b80; }
.cd-mine-earn b { font-family: 'GmarketSansB', sans-serif; font-weight: normal; color: #21488A; }
.cd-faq {
    margin: 0; padding: 4px 14px; background: #fff; border: 1px solid #e6edf6; border-radius: 16px;
}
.cd-faq details { border-top: 1px solid #eef2f7; }
.cd-faq details:first-child { border-top: 0; }
.cd-q { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; line-height: 1.35; }
.cd-faq .cd-emo { width: 28px; height: 28px; }
.cd-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 0; font-family: 'GmarketSansB', sans-serif; font-weight: normal;
    font-size: 14px; color: #102848; cursor: pointer; list-style: none;
}
.cd-faq summary::-webkit-details-marker { display: none; }
.cd-faq summary::after {
    content: ""; width: 7px; height: 7px; flex: none; margin-right: 4px;
    border-right: 1.5px solid #21488A; border-bottom: 1.5px solid #21488A;
    transform: rotate(45deg) translateY(-2px);
}
.cd-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.cd-faq details p { margin: 0 0 14px 38px; font-size: 13px; line-height: 1.6; color: #5c6b80; }
.cd-float {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); border-top: 1px solid #e6edf6;
    box-shadow: 0 -8px 24px rgba(16, 40, 72, .08);
}
.cd-float.is-on { display: block; }
.cd-float-in {
    max-width: 608px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cd-float b { display: block; font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 14px; color: #102848; }
.cd-float span { font-size: 12px; color: #5c6b80; }
.cd-float .cd-go { width: auto; margin: 0; padding: 12px 16px; }
.cd-confirm[hidden] { display: none; }
.cd-confirm { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cd-confirm-bg { position: absolute; inset: 0; background: rgba(7, 20, 40, .55); }
.cd-confirm-card {
    position: relative; width: min(100%, 360px); padding: 22px 18px 16px;
    background: #fff; border-radius: 18px; text-align: center;
    font-family: 'GmarketSansM', sans-serif;
}
.cd-confirm-card h3 { margin: 0; font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 18px; color: #102848; }
.cd-confirm-card p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #24344c; }
.cd-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.cd-confirm-actions button { padding: 13px 8px; border-radius: 12px; border: 0; font-family: 'GmarketSansB', sans-serif; font-weight: normal; font-size: 15px; }
.cd-no { background: #f4f6fb; color: #5c6b80; }
.cd-yes { background: #21488A; color: #fff; }
.lib-page { padding-top: 22px; }
.lib-guide-block { margin-top: 0; }
.lib-guide-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px; padding: 16px 16px 15px;
    border-radius: 18px; color: #fff;
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(255, 214, 120, .24), transparent 56%),
        linear-gradient(135deg, #102848 0%, #16386e 100%);
    box-shadow: 0 8px 20px rgba(16, 40, 72, .14);
}
.lib-guide-mark {
    width: 42px; height: 42px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; color: #e4b84a;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(228, 184, 74, .45);
}
.lib-guide-copy { min-width: 0; }
.lib-guide-kicker {
    margin: 0; font-family: 'GmarketSansB', sans-serif;
    font-size: 10px; letter-spacing: 1.8px; color: #e4b84a;
}
.lib-guide-head h2 {
    margin: 2px 0 0; font-family: 'GmarketSansB', sans-serif;
    font-size: 20px; letter-spacing: -.5px; color: #fff;
}
.lib-guide-copy p:last-child {
    margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.74);
}
.lib-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.lib-chip {
    border: 1px solid #e4e8ef; background: #fff; color: #5c6b80;
    border-radius: 20px; padding: 6px 12px;
    font-family: 'GmarketSansB', sans-serif; font-size: 12px; cursor: pointer;
}
.lib-chip.on { background: #102848; border-color: #102848; color: #fff; }
.lib-list { display: flex; flex-direction: column; gap: 8px; }
.lib-card {
    display: block; padding: 14px 14px 12px; border-radius: 16px;
    background: #fff; border: 1px solid #e7edf4; text-decoration: none; color: inherit;
    word-break: keep-all;
}
.lib-card-cat {
    display: block; font-family: 'GmarketSansB', sans-serif; font-size: 11px;
}
.lib-card strong {
    display: block; margin-top: 4px;
    font-family: 'GmarketSansB', sans-serif; font-size: 16px; letter-spacing: -.4px; color: #102848;
}
.lib-card p {
    margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #66758a;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-card-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 10px; color: #12356e;
}
.lib-card-meta b {
    font-family: 'GmarketSansB', sans-serif; font-size: 13px; color: #0c4a40;
}
.lib-pager {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 14px;
}
.lib-pager-num, .lib-pager-btn {
    min-width: 36px; height: 36px; padding: 0 10px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; border: 1px solid #e4e8ef; background: #fff;
    color: #102848; text-decoration: none;
    font-family: 'GmarketSansB', sans-serif; font-size: 13px;
}
.lib-pager-num.on { background: #102848; border-color: #102848; color: #fff; }
.lib-pager-btn.is-off { color: #c5cdd8; }
.lib-empty {
    margin: 0; padding: 18px 14px; border-radius: 16px; text-align: center;
    background: #f6f7fa; color: #8b93a1; font-size: 13px; line-height: 1.5;
    word-break: keep-all;
}
@media screen and (max-width: 360px) {
    .earn-product h1 { font-size: 24px; }
    .earn-ment { font-size: 16px; }
    .earn-rate strong { font-size: 16px; }
}

/* ============================================================
   ARCHIVE v2  – Premium Product Cards (.arc2-*)
   ============================================================ */
.arc2-page { max-width: 820px; margin: 0 auto; padding-bottom: 60px; }

/* ---- Hero ---- */
@property --arc-angle {
    syntax: '<angle>'; initial-value: 0deg; inherits: false;
}
/* ====== Archive Banner (compact) ====== */
.arc2-banner {
    display: flex; align-items: center; justify-content: center;
    background: url('/static/uploads/archive_banner.jpg') center/cover no-repeat;
    border-radius: 16px; padding: 40px 24px;
    margin-bottom: 16px; position: relative; overflow: hidden;
    border: none;
    box-shadow: 0 4px 20px rgba(0,20,60,.15);
}
.arc2-banner::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(5,9,26,.65);
    pointer-events: none;
}
.arc2-bn-center {
    position: relative; z-index: 1; text-align: center;
}
.arc2-bn-tag {
    display: inline-block; font-size: 13px; letter-spacing: 3px;
    font-family: 'GmarketSansB', sans-serif;
    background: linear-gradient(90deg, #60a5fa, #a78bfa, #5eead4);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: arc2-tag-shine 3s linear infinite;
    margin-bottom: 6px;
}
@keyframes arc2-tag-shine { to { background-position: 200% center; } }
.arc2-bn-title {
    font-size: 32px; font-family: 'GmarketSansB', sans-serif;
    color: #fff; margin: 0 0 6px; letter-spacing: -1px; line-height: 1.2;
    text-shadow: 0 0 30px rgba(96,165,250,.25);
}
.arc2-bn-desc {
    font-size: 13px; margin: 0 0 16px;
    font-family: 'GmarketSansM', sans-serif;
    color: #94a3b8; letter-spacing: .3px;
    background: linear-gradient(90deg, #94a3b8, #5eead4, #60a5fa, #94a3b8);
    background-size: 300% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: arc2-desc-shine 5s ease-in-out infinite;
}
@keyframes arc2-desc-shine { 0%,100%{background-position:0% center} 50%{background-position:300% center} }
.arc2-bn-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.arc2-bn-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-family: 'GmarketSansB', sans-serif;
    padding: 8px 18px; border-radius: 24px;
    backdrop-filter: blur(8px);
    transition: all .2s;
}
.arc2-bn-chip:hover { transform: translateY(-2px); }
.arc2-bn-chip svg { flex-shrink: 0; width: 16px; height: 16px; }

.ch-shield {
    color: #a7f3d0;
    background: rgba(16,185,129,.22); border: 1px solid rgba(52,211,153,.4);
    box-shadow: 0 0 16px rgba(52,211,153,.25), inset 0 0 8px rgba(52,211,153,.08);
    text-shadow: 0 0 8px rgba(52,211,153,.5);
}
.ch-shield svg { color: #6ee7b7; filter: drop-shadow(0 0 4px rgba(52,211,153,.5)); }

.ch-clock {
    color: #c4b5fd;
    background: rgba(129,140,248,.22); border: 1px solid rgba(139,92,246,.4);
    box-shadow: 0 0 16px rgba(139,92,246,.25), inset 0 0 8px rgba(139,92,246,.08);
    text-shadow: 0 0 8px rgba(139,92,246,.5);
}
.ch-clock svg { color: #a78bfa; filter: drop-shadow(0 0 4px rgba(139,92,246,.5)); }

.ch-rate {
    color: #fde68a;
    background: rgba(245,158,11,.22); border: 1px solid rgba(251,191,36,.4);
    box-shadow: 0 0 16px rgba(245,158,11,.25), inset 0 0 8px rgba(245,158,11,.08);
    text-shadow: 0 0 8px rgba(245,158,11,.5);
}
.ch-rate svg { color: #fbbf24; filter: drop-shadow(0 0 4px rgba(245,158,11,.5)); }
@media(max-width:600px) {
    .arc2-banner { padding: 30px 16px; border-radius: 14px; }
    .arc2-bn-tag { font-size: 11px; }
    .arc2-bn-title { font-size: 24px; }
    .arc2-bn-desc { font-size: 13px; }
    .arc2-bn-chip { font-size: 11px; padding: 6px 14px; }
    .arc2-bn-chips { gap: 8px; }
}

.arc2-hero {
    position: relative; border-radius: 14px; overflow: hidden;
    padding: 18px 16px 14px; margin-bottom: 16px;
    color: #fff; text-align: center;
    background:
        radial-gradient(ellipse 90% 60% at 50% -20%, rgba(0,102,230,.28) 0%, transparent 62%),
        linear-gradient(180deg, #0a1b3d 0%, #071225 55%, #050d1a 100%);
    isolation: isolate;
}
.arc2-hero::before {
    content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1.5px;
    background: conic-gradient(from var(--arc-angle),
        transparent 0%, rgba(0,102,230,.1) 10%, #0066E6 24%,
        #2b8fff 36%, #ffd36b 50%, rgba(255,211,107,.1) 60%, transparent 75%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: arcBorder 6s linear infinite; pointer-events: none; z-index: 3;
}
@keyframes arcBorder { to { --arc-angle: 360deg; } }
.arc2-hero-bg {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    border-radius: 18px;
    background: radial-gradient(ellipse 55% 45% at 85% 120%, rgba(255,211,107,.08) 0%, transparent 55%);
}
.arc2-hero-chart, .arc2-hero-inner { border-radius: 18px; }
.arc2-hero-chart {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 35%;
    opacity: .7; pointer-events: none;
}
.arc2-chart-line {
    stroke-dasharray: 600; stroke-dashoffset: 600;
    animation: arcDraw 2.2s cubic-bezier(.22,1,.36,1) .2s forwards;
    filter: drop-shadow(0 0 6px rgba(0,102,230,.55));
}
.arc2-chart-area { opacity: 0; animation: arcFadeIn 1.4s ease 1.4s forwards; }
@keyframes arcDraw { to { stroke-dashoffset: 0; } }
@keyframes arcFadeIn { to { opacity: 1; } }
.arc2-hero-inner { position: relative; z-index: 2; }
.arc2-hero-tagline {
    display: flex; width: fit-content; margin: 0 auto 8px;
    align-items: center; gap: 5px;
    font-size: 10px; font-weight: 600; letter-spacing: .5px;
    color: #7dd3fc;
    background: linear-gradient(135deg, rgba(56,189,248,.1) 0%, rgba(125,211,252,.05) 100%);
    border: 1px solid rgba(56,189,248,.25); border-radius: 20px;
    padding: 5px 16px;
    text-shadow: 0 0 12px rgba(56,189,248,.35);
}
.arc2-tg-sparkle {
    font-size: 10px; display: inline-block;
    animation: arcSparkle 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(125,211,252,.7));
}
.arc2-tg-sparkle:nth-child(3) { animation-delay: 1s; }
@keyframes arcSparkle {
    0%, 100% { opacity: .4; transform: scale(.8) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.3) rotate(15deg); }
}
.arc2-hero-title {
    font-size: 20px; font-family: 'GmarketSansB', sans-serif;
    margin: 0; letter-spacing: -.5px; line-height: 1.2;
    background: linear-gradient(90deg,
        #fff 0%, #fff 35%, #78beff 48%, #b8dcff 52%, #fff 65%, #fff 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 16px rgba(0,102,230,.3));
    animation: arcTitleShimmer 4s ease-in-out infinite;
}
@keyframes arcTitleShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.arc2-hero-title::after {
    content: ''; display: block; width: 30px; height: 2px;
    background: linear-gradient(90deg, transparent, #3ba0ff, transparent);
    margin: 6px auto 0; border-radius: 2px;
}
.arc2-hero-desc {
    font-size: 11px; color: rgba(255,255,255,.45); line-height: 1.5;
    margin: 6px auto 10px; max-width: 360px; word-break: keep-all;
    letter-spacing: -.1px; font-weight: 300;
}
.arc2-hero-stats-row {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px; padding: 7px 0; margin-bottom: 10px;
}
.arc2-hsr-item { flex: 1; text-align: center; padding: 0 10px; }
.arc2-hsr-label {
    display: block; font-size: 8.5px; color: rgba(255,255,255,.3);
    margin-bottom: 2px; letter-spacing: .2px;
}
.arc2-hsr-val {
    font-size: 12px; font-family: 'GmarketSansB', sans-serif;
    color: rgba(255,255,255,.8);
}
.arc2-hsr-val small { font-size: 10px; color: rgba(255,255,255,.35); font-weight: 400; }
.arc2-hsr-green { color: #10b981; }
.arc2-hsr-divider {
    width: 1px; height: 28px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.12), transparent);
    flex-shrink: 0;
}
.arc2-hero-cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #0066E6 0%, #004DB5 100%);
    color: #fff; padding: 7px 16px; border-radius: 8px;
    font-size: 11px; font-weight: 700; text-decoration: none;
    margin-bottom: 8px;
    box-shadow: 0 4px 14px rgba(0,77,181,.35);
    transition: transform .25s ease, box-shadow .25s ease;
}
.arc2-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,77,181,.55);
}
.arc2-hero-trust {
    display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.arc2-pill {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 9px; color: rgba(255,255,255,.4);
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05);
    padding: 3px 8px; border-radius: 12px;
}
.arc2-live-dot {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: #10b981; animation: arcPulse 1.8s infinite;
}
@keyframes arcPulse {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
    70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* ---- Sort Bar ---- */
.arc2-sort-bar {
    display: flex; gap: 8px; margin-bottom: 22px; padding: 0 2px;
}
.arc2-sort-btn {
    padding: 9px 20px; border: 1.5px solid #e0e5ef; border-radius: 22px;
    background: #fff; font-size: 13px; color: #777; cursor: pointer;
    font-family: 'GmarketSansM', sans-serif; transition: all .25s;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.arc2-sort-btn:hover {
    border-color: #004DB5; color: #004DB5;
    box-shadow: 0 2px 8px rgba(0,77,181,.1);
}
.arc2-sort-btn.active {
    background: linear-gradient(135deg, #004DB5, #1a6cdf);
    color: #fff; border-color: transparent;
    box-shadow: 0 3px 12px rgba(0,77,181,.25);
}

/* ---- Card Grid ---- */
.arc2-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}

/* ---- Product Card ---- */
.arc2-card {
    display: flex; flex-direction: column; border-radius: 16px;
    overflow: hidden; background: #fff; text-decoration: none;
    border: 1px solid #e8ecf2; transition: all .35s cubic-bezier(.22,.68,0,1);
    box-shadow: 0 2px 8px rgba(0,20,60,.04);
    padding: 18px;
}
.arc2-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,50,140,.12);
    border-color: #b8d0f0;
}

/* Card Top */
.arc2-card-top {
    margin-bottom: 12px;
}
.arc2-card-cat {
    display: inline-block; font-size: 10px; color: #004DB5;
    background: linear-gradient(135deg, #eef4ff, #e0ecff);
    padding: 3px 10px; border-radius: 6px;
    font-family: 'GmarketSansB', sans-serif; letter-spacing: .2px;
    margin-bottom: 8px;
}
.arc2-card-title {
    margin: 0 0 5px; font-size: 15px; font-family: 'GmarketSansB', sans-serif;
    color: #1a1a2e; line-height: 1.35; letter-spacing: -.3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; transition: color .2s; word-break: keep-all;
}
.arc2-card:hover .arc2-card-title { color: #004DB5; }
.arc2-card-desc {
    margin: 0; font-size: 11.5px; color: #8899aa; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: keep-all;
}

/* Rate Bar */
.arc2-card-rate-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, #0a1a3a, #0d2b5e);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
}
.arc2-rb-left {
    display: flex; align-items: baseline; gap: 6px;
}
.arc2-rb-num {
    font-size: 22px; font-family: 'GmarketSansB', sans-serif;
    color: #fff; letter-spacing: -.8px; line-height: 1;
}
.arc2-rb-tag {
    font-size: 10px; color: rgba(255,255,255,.45);
    font-family: 'GmarketSansM', sans-serif;
}
.arc2-rb-annual {
    font-size: 11px; font-family: 'GmarketSansB', sans-serif;
    color: #5eead4; letter-spacing: -.2px;
    background: rgba(94,234,212,.1); padding: 3px 8px;
    border-radius: 5px;
}

/* Rate Strip */
.arc2-card-rate-strip {
    display: flex; gap: 4px; margin-bottom: 14px;
}
.arc2-rs-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 7px 4px; border-radius: 8px;
    background: #f7f8fb; border: 1px solid transparent;
    transition: all .2s;
}
.arc2-rs-item.active {
    background: linear-gradient(135deg, #eef4ff, #dfe9ff);
    border-color: #b0ccf5;
}
.arc2-rs-day {
    font-size: 10.5px; font-family: 'GmarketSansB', sans-serif;
    color: #667; line-height: 1;
}
.arc2-rs-rate {
    font-size: 10px; color: #004DB5; font-family: 'GmarketSansB', sans-serif;
    margin-top: 2px;
}

/* Card Bottom — Stats + Arrow */
.arc2-card-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 12px; border-top: 1px solid #f0f2f5;
}
.arc2-cb-stats {
    display: flex; gap: 10px; align-items: center;
}
.arc2-cb-chip {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: #667788;
    font-family: 'GmarketSansB', sans-serif;
}
.arc2-cb-chip svg { color: #b0bec5; width: 10px; height: 10px; }
.arc2-cb-arrow {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #004DB5, #1a6cdf);
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: all .3s;
    box-shadow: 0 2px 8px rgba(0,77,181,.2);
}
.arc2-card:hover .arc2-cb-arrow {
    background: linear-gradient(135deg, #003a8c, #0055cc);
    box-shadow: 0 4px 16px rgba(0,77,181,.35);
    transform: translateX(2px);
}

/* ---- Mobile ---- */
@media screen and (max-width: 600px) {
    .arc2-page { padding: 0 6px 40px; }
    .arc2-hero { padding: 14px 12px 12px; border-radius: 12px; }
    .arc2-hero-title { font-size: 17px; }
    .arc2-hero-desc { font-size: 10px; margin-bottom: 8px; }
    .arc2-hsr-val { font-size: 11px; }
    .arc2-hsr-label { font-size: 8px; }
    .arc2-hero-cta { font-size: 10px; padding: 6px 14px; }
    .arc2-pill { font-size: 8px; padding: 2px 6px; }
    .arc2-grid { grid-template-columns: 1fr; gap: 14px; }
    .arc2-card { padding: 14px; }
    .arc2-rb-num { font-size: 20px; }
    .arc2-sort-bar { padding: 0; }
}
@media screen and (min-width: 601px) and (max-width: 820px) {
    .arc2-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ============================================================
   PRODUCT CONTENT SECTION  (.stk-content-*)
   ============================================================ */
.stk-content-section {
    background: #fff; border-radius: 20px; padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.07); margin-bottom: 24px;
    border: 1px solid #f0f2f5;
}
.stk-content-head {
    display: flex; gap: 14px; align-items: flex-start;
    margin-bottom: 18px; padding-bottom: 16px;
    border-bottom: 2px solid #f0f4f8;
}
.stk-content-icon {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, #eef4ff, #dce8ff);
    display: flex; align-items: center; justify-content: center;
}
.stk-content-head h2 {
    font-size: 17px; font-family: 'GmarketSansB', sans-serif;
    color: #1a1a2e; margin: 0 0 2px; line-height: 1.3;
}
.stk-content-head span {
    font-size: 12px; color: #888;
}
.stk-content-body {
    font-size: 14px; color: #444; line-height: 1.8;
    word-break: keep-all;
}
.stk-content-body h3 {
    font-size: 15px; font-family: 'GmarketSansB', sans-serif;
    color: #1a1a2e; margin: 24px 0 10px; padding: 10px 14px;
    background: linear-gradient(135deg, #f8f9fc, #f0f3f8);
    border-radius: 10px; border-left: 3px solid #004DB5;
    display: flex; align-items: center; gap: 6px;
}
.stk-content-body h3:first-child { margin-top: 0; }
.stk-content-body h4 {
    font-size: 14px; font-family: 'GmarketSansB', sans-serif;
    color: #333; margin: 18px 0 8px;
}
.stk-content-body p {
    margin: 0 0 14px; color: #555; font-size: 13.5px;
}
.stk-content-body ul, .stk-content-body ol {
    margin: 8px 0 16px; padding-left: 0; list-style: none;
}
.stk-content-body li {
    margin-bottom: 8px; line-height: 1.6; padding: 8px 12px;
    background: #f9fafb; border-radius: 8px;
    border: 1px solid #f0f2f5; font-size: 13.5px; color: #444;
    position: relative; padding-left: 28px;
}
.stk-content-body li::before {
    content: ''; position: absolute; left: 12px; top: 14px;
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, #004DB5, #2b8fff);
}
.stk-content-body li strong { color: #1a1a2e; }
.stk-content-body strong { color: #1a1a2e; }
.stk-content-body .content-highlight {
    background: linear-gradient(135deg, #f0f6ff, #e8f0fe);
    border-radius: 12px; padding: 14px 16px; margin: 14px 0;
    border-left: 4px solid #004DB5;
    font-size: 13.5px; line-height: 1.7; color: #334;
}
.stk-content-body .content-warn {
    background: linear-gradient(135deg, #fef9f0, #fef3e2);
    border-radius: 12px; padding: 14px 16px; margin: 14px 0;
    border-left: 4px solid #f59e0b;
    font-size: 13px; line-height: 1.7; color: #92400e;
}
/* Image gallery grid */
.stk-img-gallery {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 16px 0;
}
.stk-img-gallery .stk-img-wrap:first-child {
    grid-column: 1 / -1;
}
.stk-img-wrap {
    position: relative; overflow: hidden; border-radius: 12px;
    border: 1px solid #eee; background: #f8f9fb;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    cursor: zoom-in; transition: transform .2s, box-shadow .2s;
}
.stk-img-wrap:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.stk-img-wrap img {
    width: 100%; height: auto; display: block;
    transition: transform .3s;
}
.stk-img-wrap .stk-img-zoom {
    position: absolute; bottom: 8px; right: 8px;
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s; pointer-events: none;
}
.stk-img-wrap:hover .stk-img-zoom { opacity: 1; }
.stk-img-wrap .stk-img-zoom svg { width: 14px; height: 14px; fill: #fff; }
/* fallback for images not in gallery */
.stk-content-body > img {
    max-width: 100%; border-radius: 12px; margin: 14px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    border: 1px solid #eee;
    cursor: zoom-in; transition: transform .2s, box-shadow .2s;
}
.stk-content-body > img:hover {
    transform: scale(1.015);
    box-shadow: 0 4px 20px rgba(0,0,0,.14);
}
@media (max-width: 600px) {
    .stk-img-gallery { grid-template-columns: 1fr; gap: 8px; }
}
.img-lightbox-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,.88); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .25s ease;
    cursor: zoom-out; -webkit-tap-highlight-color: transparent;
}
.img-lightbox-overlay.active { opacity: 1; }
.img-lightbox-overlay img {
    max-width: 92vw; max-height: 90vh; border-radius: 16px;
    box-shadow: 0 12px 60px rgba(0,0,0,.5);
    transform: scale(.92); transition: transform .3s cubic-bezier(.22,1,.36,1);
    user-select: none; -webkit-user-drag: none;
}
.img-lightbox-overlay.active img { transform: scale(1); }
.img-lightbox-close {
    position: absolute; top: 16px; right: 20px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.15); border: none;
    color: #fff; font-size: 22px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .15s;
    backdrop-filter: blur(4px);
}
.img-lightbox-close:hover { background: rgba(255,255,255,.3); transform: scale(1.1); }
.img-lightbox-hint {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.5); font-size: 12px; font-weight: 600;
    pointer-events: none; letter-spacing: .3px;
}
.img-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.12); border: none;
    color: #fff; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .15s;
    backdrop-filter: blur(4px);
}
.img-lightbox-nav:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.1); }
.img-lightbox-nav.prev { left: 16px; }
.img-lightbox-nav.next { right: 16px; }
.img-lightbox-counter {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.6); font-size: 13px; font-weight: 700;
    letter-spacing: .5px;
}
.stk-content-body hr {
    border: none; height: 1px; margin: 20px 0;
    background: linear-gradient(90deg, transparent, #dde2ea, transparent);
}

/* Card summary in archive list */
.arc2-card-summary {
    font-size: 11px; color: #6b7d8e; line-height: 1.5; margin: 0 0 12px;
    padding: 8px 10px; background: #f8f9fc;
    border-radius: 8px; border-left: 2px solid #b8d0f0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: keep-all;
}

/* ====== Premium Card Variant ====== */
.arc2-card-premium {
    background: linear-gradient(160deg, #0a1a3a, #0d2b5e, #102e66) !important;
    border: 1px solid rgba(96,165,250,.12) !important;
    box-shadow: 0 4px 24px rgba(0,20,80,.2) !important;
    position: relative; overflow: hidden;
}
.arc2-card-premium::before {
    content: ''; position: absolute; top: -40px; right: -30px;
    width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, rgba(96,165,250,.12) 0%, transparent 70%);
    pointer-events: none;
}
.arc2-card-premium:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 50px rgba(0,20,80,.35), 0 0 0 1px rgba(96,165,250,.2) !important;
    border-color: rgba(96,165,250,.25) !important;
}
.arc2-card-premium .arc2-card-cat {
    background: rgba(255,255,255,.08); color: #93c5fd;
    border: 1px solid rgba(147,197,253,.15);
}
.arc2-card-premium .arc2-card-title { color: #fff; }
.arc2-card-premium:hover .arc2-card-title { color: #93c5fd; }
.arc2-card-premium .arc2-card-desc { color: rgba(255,255,255,.4); }

.arc2-card-premium .arc2-card-rate-bar {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.06);
}
.arc2-card-premium .arc2-rb-annual {
    background: rgba(94,234,212,.1); color: #5eead4;
}

.arc2-card-premium .arc2-rs-item {
    background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06);
}
.arc2-card-premium .arc2-rs-item.active,
.arc2-card-premium .arc2-rs-item.best {
    background: rgba(94,234,212,.08); border-color: rgba(94,234,212,.15);
}
.arc2-card-premium .arc2-rs-day { color: rgba(255,255,255,.4); }
.arc2-card-premium .arc2-rs-rate { color: rgba(255,255,255,.85); }
.arc2-card-premium .arc2-rs-item.best .arc2-rs-rate { color: #5eead4; }

.arc2-card-premium .arc2-card-bottom {
    border-top-color: rgba(255,255,255,.06);
}
.arc2-card-premium .arc2-cb-arrow {
    background: rgba(255,255,255,.08); color: #fff;
    border: 1px solid rgba(255,255,255,.1);
}
.arc2-card-premium:hover .arc2-cb-arrow {
    background: linear-gradient(135deg, #5eead4, #38bdf8);
    color: #0a1a3a; border-color: transparent;
    box-shadow: 0 4px 16px rgba(94,234,212,.3);
}

/* Badge row */
.arc2-card-badge-row {
    display: flex; gap: 6px; margin-bottom: 10px; position: relative; z-index: 1;
}
.arc2-card-live {
    display: flex; align-items: center; gap: 4px;
    font-size: 9px; font-family: 'GmarketSansB', sans-serif;
    color: #f87171; background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.15);
    padding: 3px 8px; border-radius: 5px; letter-spacing: .5px;
}
.arc2-live-pip {
    width: 5px; height: 5px; border-radius: 50%;
    background: #ef4444; animation: arc2-pip-pulse 1.5s infinite;
}
@keyframes arc2-pip-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.arc2-card-safe {
    font-size: 9px; font-family: 'GmarketSansB', sans-serif;
    color: #5eead4; background: rgba(94,234,212,.08);
    border: 1px solid rgba(94,234,212,.12);
    padding: 3px 8px; border-radius: 5px; letter-spacing: .2px;
}

/* Features chips */
.arc2-cb-features {
    display: flex; gap: 6px; align-items: center;
}
.arc2-cb-features span {
    font-size: 9.5px; font-family: 'GmarketSansM', sans-serif;
    color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.04);
    padding: 4px 8px; border-radius: 5px;
    border: 1px solid rgba(255,255,255,.05);
}

/* NOT USED (kept for reference if future products added) */
.arc2-flagship {
    display: block; text-decoration: none; position: relative;
    background: linear-gradient(160deg, #0a1a3a 0%, #0d2b5e 40%, #0f3570 100%);
    border-radius: 20px; overflow: hidden;
    padding: 28px 24px 24px; margin: 0 auto;
    max-width: 480px;
    box-shadow: 0 8px 40px rgba(0,20,80,.3), 0 0 0 1px rgba(96,165,250,.1);
    transition: transform .3s cubic-bezier(.22,.68,0,1), box-shadow .3s;
}
.arc2-flagship:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0,20,80,.4), 0 0 0 1px rgba(96,165,250,.2);
}
.arc2-fs-glow {
    position: absolute; top: -50px; right: -30px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(96,165,250,.15) 0%, transparent 70%);
    pointer-events: none;
}
.arc2-fs-glow2 {
    position: absolute; bottom: -40px; left: -20px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(94,234,212,.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Badges */
.arc2-fs-badges { display: flex; gap: 8px; margin-bottom: 14px; position: relative; z-index: 1; }
.arc2-fs-badge {
    font-size: 10px; font-family: 'GmarketSansB', sans-serif;
    padding: 4px 10px; border-radius: 6px; letter-spacing: .3px;
    display: flex; align-items: center; gap: 5px;
}
.arc2-fs-badge.live {
    background: rgba(239,68,68,.15); color: #f87171;
    border: 1px solid rgba(239,68,68,.2);
}
.arc2-fs-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #ef4444; animation: arc2-pulse 1.5s infinite;
}
@keyframes arc2-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.arc2-fs-badge.safe {
    background: rgba(94,234,212,.1); color: #5eead4;
    border: 1px solid rgba(94,234,212,.2);
}

/* Header */
.arc2-fs-header { text-align: center; margin-bottom: 20px; position: relative; z-index: 1; }
.arc2-fs-cat {
    display: inline-block; font-size: 10px; color: #93c5fd;
    background: rgba(255,255,255,.08); border: 1px solid rgba(147,197,253,.15);
    padding: 2px 10px; border-radius: 5px;
    font-family: 'GmarketSansB', sans-serif; letter-spacing: .3px;
    margin-bottom: 8px;
}
.arc2-fs-title {
    font-size: 20px; font-family: 'GmarketSansB', sans-serif;
    color: #fff; margin: 0 0 6px; line-height: 1.3;
    letter-spacing: -.3px;
}
.arc2-fs-desc {
    font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.5;
    margin: 0; word-break: keep-all;
}

/* Rate ring area */
.arc2-fs-rate-area {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; margin-bottom: 20px; position: relative; z-index: 1;
}
.arc2-fs-ring { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.arc2-fs-ring svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(96,165,250,.3)); }
.arc2-fs-ring-anim { animation: arc2-ring-draw 1.5s ease-out forwards; }
@keyframes arc2-ring-draw { from{stroke-dasharray:0 327} to{stroke-dasharray:240 327} }
.arc2-fs-ring-inner {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.arc2-fs-rate-num {
    font-size: 24px; font-family: 'GmarketSansB', sans-serif;
    color: #fff; letter-spacing: -.5px; line-height: 1;
}
.arc2-fs-rate-num small { font-size: .55em; color: #93c5fd; }
.arc2-fs-rate-label {
    font-size: 9px; color: rgba(255,255,255,.3);
    font-family: 'GmarketSansM', sans-serif; letter-spacing: 1.5px; margin-top: 1px;
}
.arc2-fs-annual { display: flex; flex-direction: column; gap: 2px; }
.arc2-fs-annual-sub {
    font-size: 8px; color: rgba(255,255,255,.3);
    letter-spacing: 1.2px; text-transform: uppercase;
    font-family: 'GmarketSansM', sans-serif;
}
.arc2-fs-annual-num {
    font-size: 28px; font-family: 'GmarketSansB', sans-serif;
    color: #5eead4; letter-spacing: -.5px; line-height: 1.1;
}

/* Period chips */
.arc2-fs-periods {
    display: flex; gap: 6px; margin-bottom: 20px; position: relative; z-index: 1;
}
.arc2-fs-period {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 10px 4px; border-radius: 10px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06);
    transition: all .2s; position: relative;
}
.arc2-fs-period.best {
    background: rgba(94,234,212,.08); border-color: rgba(94,234,212,.15);
}
.arc2-fs-best-tag {
    position: absolute; top: -8px; right: -4px;
    font-size: 8px; font-family: 'GmarketSansB', sans-serif;
    color: #0f3570; background: linear-gradient(135deg, #5eead4, #38bdf8);
    padding: 2px 6px; border-radius: 4px; letter-spacing: .5px;
}
.arc2-fs-p-day {
    font-size: 11px; font-family: 'GmarketSansB', sans-serif;
    color: rgba(255,255,255,.5); margin-bottom: 2px;
}
.arc2-fs-p-rate {
    font-size: 14px; font-family: 'GmarketSansB', sans-serif;
    color: #fff; letter-spacing: -.2px;
}
.arc2-fs-p-rate small { font-size: .6em; color: rgba(255,255,255,.35); }
.arc2-fs-period.best .arc2-fs-p-rate { color: #5eead4; }

/* Bottom */
.arc2-fs-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06);
    position: relative; z-index: 1;
}
.arc2-fs-features {
    display: flex; gap: 12px;
}
.arc2-fs-features span {
    display: flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-family: 'GmarketSansM', sans-serif;
    color: rgba(255,255,255,.45);
}
.arc2-fs-features svg { color: #5eead4; flex-shrink: 0; }
.arc2-fs-cta {
    display: flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.1);
    padding: 8px 16px; border-radius: 10px;
    font-size: 12px; font-family: 'GmarketSansB', sans-serif;
    color: #fff; transition: all .2s;
}
.arc2-flagship:hover .arc2-fs-cta {
    background: linear-gradient(135deg, #5eead4, #38bdf8);
    color: #0a1a3a; border-color: transparent;
    box-shadow: 0 4px 20px rgba(94,234,212,.3);
}

@media(max-width:600px) {
    .arc2-flagship { padding: 20px 16px 18px; border-radius: 16px; max-width: 100%; }
    .arc2-fs-title { font-size: 17px; }
    .arc2-fs-rate-area { gap: 16px; }
    .arc2-fs-ring { width: 85px; height: 85px; }
    .arc2-fs-rate-num { font-size: 20px; }
    .arc2-fs-annual-num { font-size: 22px; }
    .arc2-fs-features { gap: 8px; }
    .arc2-fs-features span { font-size: 9px; }
    .arc2-fs-period { padding: 8px 2px; }
    .arc2-fs-p-rate { font-size: 12px; }
    .arc2-fs-bottom { flex-direction: column; gap: 12px; }
    .arc2-fs-cta { width: 100%; justify-content: center; }
}

@media screen and (max-width: 600px) {
    .stk-content-section { padding: 18px 14px; }
    .stk-content-body { font-size: 13px; }
}

/* 회사 안내 */
.co-hero{
    padding:34px 18px 28px;text-align:center;color:#fff;word-break:keep-all;
    background:
        radial-gradient(70% 50% at 100% 0%, rgba(255,214,120,.22), transparent 52%),
        radial-gradient(50% 60% at 0% 100%, rgba(96,165,250,.18), transparent 56%),
        linear-gradient(168deg,#071428 0%,#12356e 54%,#0d2144 100%);
}
.co-hero-in{max-width:640px;margin:0 auto}
.co-kicker,.co-en{
    font-family:'GmarketSansB',sans-serif;font-size:11px;letter-spacing:2px;color:#e4b84a;
}
.co-hero h1{
    margin:8px 0 0;font-family:'GmarketSansB',sans-serif;font-size:30px;letter-spacing:-.8px;font-weight:normal;
}
.co-hero p{margin:10px auto 0;max-width:420px;font-family:'GmarketSansM',sans-serif;font-size:15px;line-height:1.65;color:rgba(255,255,255,.88)}
.co-page{padding-top:14px;word-break:keep-all}
.co-jump{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.co-jump a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:68px;padding:10px 4px;background:#fff;border:1px solid #e3ebf5;border-radius:16px;
    font-family:'GmarketSansB',sans-serif;font-size:13px;color:#102848;letter-spacing:-.3px;
}
.co-jump a span{font-size:10px;letter-spacing:.14em;color:#c9a24a}
.co-jump a.is-on{
    color:#fff;border-color:transparent;
    background:
        radial-gradient(80% 80% at 100% 0%, rgba(255,214,120,.18), transparent 55%),
        linear-gradient(160deg,#102848,#17356a);
}
.co-jump a.is-on span{color:#f6de9a}
.co-block{
    scroll-margin-top:168px;margin-bottom:14px;background:#fff;
    border:1px solid #e3ebf5;border-radius:22px;overflow:hidden;
    box-shadow:0 10px 28px rgba(16,32,64,.05);
}
.co-head{padding:20px 18px 0}
.co-head h2{margin:4px 0 0;font-family:'GmarketSansB',sans-serif;font-size:22px;letter-spacing:-.5px;color:#102848;font-weight:normal}
.co-lead{margin:8px 18px 0;font-family:'GmarketSansM',sans-serif;font-size:15px;line-height:1.7;color:#31445f}
.co-tiles{display:flex;flex-direction:column;gap:8px;padding:14px 14px 4px}
.co-tile{
    display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;
    padding:12px;background:#f7f9fc;border-radius:16px;color:inherit;
}
.co-tile i{
    width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;
    color:#f6de9a;
    background:linear-gradient(160deg,#102848,#1a3f78);
}
.co-tile strong{display:block;font-family:'GmarketSansB',sans-serif;font-size:15px;color:#102848;font-weight:normal}
.co-tile span{display:block;margin-top:2px;font-family:'GmarketSansM',sans-serif;font-size:13px;line-height:1.55;color:#4a5b72}
.co-go{
    margin:14px;padding:16px;border-radius:18px;color:#fff;
    background:
        radial-gradient(80% 70% at 100% 0%, rgba(255,214,120,.2), transparent 50%),
        linear-gradient(165deg,#071428,#12356e 70%);
}
.co-go p{margin:0 0 12px;font-family:'GmarketSansM',sans-serif;font-size:14px;line-height:1.6;color:rgba(255,255,255,.88)}
.co-go-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.co-go-cs,.co-go-tg{
    display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:12px;
    font-family:'GmarketSansB',sans-serif;font-size:14px;
}
.co-go-cs{background:#f6de9a;color:#102848}
.co-go-tg{background:#fff;color:#102848}
.co-arts{margin:14px 0 0;padding:0}
.co-arts li{
    display:grid;grid-template-columns:36px 1fr;gap:8px;align-items:start;
    padding:14px 16px;border-top:1px solid #eef2f8;
}
.co-no{
    width:28px;height:28px;margin-top:1px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#fff8ee;border:1px solid #f0ddb0;color:#b8892d;
    font-family:'GmarketSansB',sans-serif;font-size:12px;
}
.co-arts h3{margin:2px 0 4px;font-family:'GmarketSansB',sans-serif;font-size:16px;color:#102848;font-weight:normal}
.co-arts p,.co-arts ul{margin:0;font-family:'GmarketSansM',sans-serif;font-size:14px;line-height:1.7;color:#24344c}
.co-arts ul{padding-left:0}
.co-arts ul li{
    display:block;padding:0 0 6px;border:none;
    font-family:'GmarketSansM',sans-serif;font-size:14px;line-height:1.7;color:#24344c;
}
.co-arts ul li:last-child{padding-bottom:0}
.co-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.co-chips span{
    padding:6px 10px;border-radius:999px;background:#f4f7fb;border:1px solid #e6eef8;
    font-family:'GmarketSansM',sans-serif;font-size:12px;color:#17356a;
}
.co-date{
    margin:0;padding:12px 16px 16px;text-align:right;
    font-family:'GmarketSansM',sans-serif;font-size:12px;color:#8b97a8;
}

.refp{max-width:640px;margin:0 auto;padding:0 0 48px;background:#f4f6fb;color:#102848;word-break:keep-all}
.refp-hero{
    margin:0;padding:28px 20px 36px;color:#fff;text-align:center;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255,236,179,.18), transparent 55%),
        linear-gradient(160deg, #071428 0%, #12356e 58%, #0c3d45 100%);
}
.refp-kicker{margin:0;font-family:'GmarketSansB',sans-serif;font-size:11px;letter-spacing:2px;color:#e4b84a}
.refp-hero h1{margin:8px 0 0;font-family:'GmarketSansB',sans-serif;font-size:28px;letter-spacing:-.8px;font-weight:normal}
.refp-hero p{margin:10px auto 0;max-width:420px;font-family:'GmarketSansM',sans-serif;font-size:14px;line-height:1.65;color:rgba(255,255,255,.86)}
.refp-hero strong{color:#f6de9a;font-weight:normal;font-family:'GmarketSansB',sans-serif}
.refp-codebox{
    margin:18px auto 0;max-width:260px;border-radius:18px;overflow:hidden;
    background:rgba(255,255,255,.08);border:1px solid rgba(246,222,154,.45);
}
.refp-code{
    margin:0;padding:18px 12px 14px;
    font-family:'GmarketSansB',sans-serif;font-size:32px;letter-spacing:6px;line-height:1;
}
.refp-codebox.is-empty .refp-code{font-size:18px;letter-spacing:0;color:rgba(255,255,255,.62)}
.refp-codebox button{
    display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
    padding:12px 0;border:0;border-top:1px solid rgba(246,222,154,.28);cursor:pointer;
    background:#f6de9a;color:#102848;font-family:'GmarketSansB',sans-serif;font-size:13px;
}
.refp-codebox button svg{display:block}
.refp-codebox button.is-done{background:#fff}
.refp-codebox button:disabled{opacity:.45;cursor:default}
.refp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:-18px 16px 0;position:relative}
.refp-stats div{background:#fff;border:1px solid #e7edf4;border-radius:14px;padding:14px 8px;text-align:center}
.refp-stats span{display:block;font-size:11px;color:#8b93a1}
.refp-stats strong{display:block;margin-top:4px;font-family:'GmarketSansB',sans-serif;font-size:16px;color:#12356e;font-weight:normal}
.refp-stats small{margin-left:2px;font-size:10px;color:#26A17B}
.refp-card{margin:14px 16px 0;padding:18px 16px;background:#fff;border:1px solid #e7edf4;border-radius:16px}
.refp-card h2{margin:0;font-family:'GmarketSansB',sans-serif;font-size:16px;font-weight:normal}
.refp-lead,.refp-note,.refp-empty{margin:8px 0 0;font-family:'GmarketSansM',sans-serif;font-size:13px;line-height:1.65;color:#5d6b80}
.refp-form{display:flex;gap:8px;margin-top:14px}
.refp-form input{
    flex:1;min-width:0;height:48px;padding:0 14px;border:1px solid #d5deea;border-radius:12px;
    background:#f8fafc;font-family:'GmarketSansB',sans-serif;font-size:20px;letter-spacing:4px;text-transform:uppercase;color:#102848;
}
.refp-form input:focus{outline:none;border-color:#12356e;background:#fff;box-shadow:0 0 0 3px rgba(18,53,110,.08)}
.refp-form button,.refp-btns button{
    border:0;border-radius:12px;cursor:pointer;font-family:'GmarketSansB',sans-serif;font-size:13px;
}
.refp-form button{flex:none;padding:0 14px;background:#12356e;color:#fff}
.refp-btns{display:flex;gap:8px;margin-top:10px}
.refp-ghost{flex:1;padding:13px 0;background:#fff;color:#12356e;border:1px solid #d5deea !important}
.refp-save{flex:1;padding:13px 0;background:#12356e;color:#fff}
.refp-help{min-height:18px;margin:8px 0 0;font-size:12px}
.refp-help.is-ok{color:#0f8a5f}
.refp-help.is-bad{color:#c2414a}
.refp-list{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.refp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid #eef2f7;border-radius:12px;background:#f8fafc}
.refp-row strong{display:block;font-family:'GmarketSansB',sans-serif;font-size:14px;font-weight:normal}
.refp-row span{display:block;margin-top:2px;font-size:12px;color:#8b93a1}
.refp-row b{font-family:'GmarketSansB',sans-serif;font-size:13px;color:#12356e;font-weight:normal;white-space:nowrap}
.refp-row small{color:#26A17B}
.refp-when{
    display:flex;align-items:center;gap:14px;
    margin:14px 16px 0;padding:14px 16px;
    background:#fff;border:1px solid #e7edf4;border-radius:16px;
}
.refp-when-face{
    flex:none;width:76px;height:76px;border-radius:18px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255,236,179,.28), transparent 58%),
        linear-gradient(160deg,#12356e 0%,#0c3d45 100%);
    box-shadow:inset 0 0 0 1px rgba(246,222,154,.34);
}
.refp-when-face span{
    font-family:'GmarketSansM',sans-serif;font-size:11px;letter-spacing:1.4px;color:rgba(255,255,255,.72);
}
.refp-when-face b{
    margin-top:2px;font-family:'GmarketSansB',sans-serif;font-size:22px;line-height:1;
    font-weight:normal;letter-spacing:-.4px;color:#f6de9a;
}
.refp-when-kicker{
    margin:0;font-family:'GmarketSansB',sans-serif;font-size:11px;letter-spacing:1.2px;color:#c9a24a;
}
.refp-when-copy strong{
    display:block;margin-top:2px;font-family:'GmarketSansB',sans-serif;
    font-size:16px;font-weight:normal;color:#102848;
}
.refp-when-copy p:last-child{
    margin:4px 0 0;font-family:'GmarketSansM',sans-serif;font-size:13px;line-height:1.55;color:#5d6b80;
}

.sp-pop{
    position:fixed;left:50%;z-index:450;width:292px;max-width:calc(100vw - 24px);
    transform:translateX(-50%);pointer-events:none;
}
.sp-pop[hidden],.sp-card[hidden]{display:none !important}
.sp-card{
    pointer-events:none;box-sizing:border-box;width:100%;
    display:flex;flex-direction:column;gap:8px;padding:8px;
    background:linear-gradient(180deg,#1b2130 0%,#10141c 100%);
    border:1px solid rgba(231,197,106,.38);border-radius:18px;
    box-shadow:0 22px 50px rgba(8,16,32,.32), inset 0 1px 0 rgba(255,255,255,.08);
    transition:opacity .18s ease, transform .18s ease;
}
.sp-card.is-front{position:relative;z-index:20;pointer-events:auto}
.sp-card.is-back{position:absolute;left:0;right:0;top:0}
.sp-card.is-out{opacity:0;transform:translateY(10px) scale(.98)}
.sp-img{display:block;border-radius:12px;overflow:hidden;background:#0c0f14;line-height:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
a.sp-img{cursor:pointer}
.sp-img.is-plain{cursor:default}
.sp-img img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.sp-acts{display:flex;gap:6px;padding:2px 1px 1px}
.sp-hide,.sp-close{
    height:40px;border-radius:999px;font-size:12px;cursor:pointer;white-space:nowrap;
    display:inline-flex;align-items:center;justify-content:center;gap:5px;
    font-family:'GmarketSansB',sans-serif;letter-spacing:-.3px;
    transition:transform .12s ease, background .12s ease, filter .12s ease;
}
.sp-hide svg{flex:none;display:block}
.sp-hide:active,.sp-close:active{transform:scale(.97)}
.sp-hide{
    flex:1.5;padding:0 10px;color:#f6de9a;background:transparent;
    border:1px solid rgba(246,222,154,.62);
}
.sp-hide:hover{background:rgba(246,222,154,.1)}
.sp-close{
    flex:.62;padding:0 12px;border:0;color:#102848;
    background:linear-gradient(180deg,#fff6d8 0%,#f6de9a 48%,#e4c56a 100%);
    box-shadow:0 8px 16px rgba(246,222,154,.2), inset 0 1px 0 rgba(255,255,255,.75);
}
.sp-close:hover{filter:brightness(1.04)}
@media(max-width:720px){
    .sp-pop{width:min(292px,calc(100vw - 20px))}
    .sp-hide,.sp-close{height:40px;font-size:11px}
}