/* lifeup-demo.css — 메인 / 화면 디자인 (lifeup_demo.html 기반 + 운영 사이트용)
적용: index.html 메인 랜딩 + ROI 계산기 + TCI 진단 + 영업 대시보드 (4 페이지 tab) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--navy: #1a1e8f;
--navy-dark: #0f1260;
--navy-light: #2228b0;
--gold: #fbbf24;
--bg-gray: #f5f5f7;
--border: #e8e8ec;
--text: #111;
--text2: #555;
--text3: #999;
}
html, body {
background: var(--bg-gray);
font-family: 'Noto Sans KR', 'Pretendard', -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
color: var(--text);
min-height: 100vh;
}
/* 운영 사이트 풀 화면 — 모바일 우선, 데스크탑은 가운데 정렬 + 폭 제한 */
.app-shell {
width: 100%;
max-width: 480px;
margin: 0 auto;
background: #fff;
height: 100vh;
display: flex;
flex-direction: column;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
@media (min-width: 768px) {
body { padding: 24px 0; background: linear-gradient(135deg, #f0f2f7 0%, #e8eaf2 100%); }
.app-shell { border-radius: 24px; height: calc(100vh - 48px); }
}
/* 앱 헤더 */
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
background: #fff;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 50;
}
.brand { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.brand-logo {
width: 28px; height: 28px;
background: var(--navy);
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 900; font-size: 13px;
}
.brand-name { font-weight: 900; font-size: 14px; color: var(--navy); letter-spacing: -0.3px; }
.menu-icon { font-size: 20px; color: #666; cursor: pointer; padding: 4px; }
.header-icons { display: flex; gap: 14px; font-size: 16px; color: #666; }
.header-icons a, .header-icons button { color: #666; cursor: pointer; background: none; border: none; padding: 4px; font-size: 16px; }
.header-icons a:hover, .header-icons button:hover { color: var(--navy); }
/* 스크롤 영역 (스크롤바 숨김) */
.scroll-area {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.scroll-area::-webkit-scrollbar { width: 0; height: 0; display: none; }
.page { display: none; }
.page.active { display: block; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
/* ━━━━━ 페이지 1: 메인 랜딩 ━━━━━ */
/* §1 Hero */
.s1 {
background: linear-gradient(155deg, #0a0d4a 0%, #1a1e8f 50%, #2228b0 100%);
padding: 36px 22px 44px; color: #fff; position: relative;
}
.s1-label {
display: inline-block;
background: rgba(251, 191, 36, 0.15);
border: 1px solid rgba(251, 191, 36, 0.4);
padding: 5px 12px; border-radius: 20px; margin-bottom: 18px;
font-size: 13.5px; letter-spacing: 1px; color: var(--gold); font-weight: 700;
}
.s1-h1 {
font-size: 26px; font-weight: 900; line-height: 1.3;
margin-bottom: 14px; letter-spacing: -0.5px;
}
.s1-h1 .accent { color: var(--gold); }
.s1-sub {
font-size: 13.5px; color: rgba(255, 255, 255, 0.85);
line-height: 1.7; margin-bottom: 20px;
}
.trust-mini {
display: flex; gap: 8px; padding: 10px 12px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px; margin-bottom: 14px;
font-size: 13px; color: rgba(255, 255, 255, 0.85); line-height: 1.5;
}
.trust-mini strong { color: #fff; font-weight: 700; }
.cta-gold {
background: var(--gold); color: var(--navy-dark);
font-weight: 900; font-size: 14px; padding: 14px;
border-radius: 12px; text-align: center; margin-bottom: 8px;
display: flex; align-items: center; justify-content: center; gap: 6px;
cursor: pointer; border: none; width: 100%;
transition: transform 0.15s;
font-family: inherit;
}
.cta-gold:active { transform: scale(0.97); }
.cta-secondary {
background: transparent; border: 1px solid rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.9); font-size: 13.5px; font-weight: 600;
padding: 11px; border-radius: 12px; width: 100%;
text-align: center; cursor: pointer;
font-family: inherit;
}
.rating-mini {
display: flex; align-items: center; justify-content: center;
gap: 6px; margin-top: 18px; padding: 9px;
background: rgba(255, 255, 255, 0.05); border-radius: 8px;
font-size: 13.5px; color: rgba(255, 255, 255, 0.7);
}
.rating-mini .stars { color: var(--gold); letter-spacing: 1.5px; }
.rating-mini .num { color: #fff; font-weight: 700; }
/* §2 */
.s2 { padding: 28px 22px; background: #fff; }
.sec-label {
display: flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 700; color: var(--navy);
letter-spacing: 0.3px; margin-bottom: 6px;
}
.sec-label::before {
content: ''; width: 14px; height: 2px;
background: var(--navy); border-radius: 2px;
}
.s-h2 {
font-size: 19px; font-weight: 900; color: var(--text);
line-height: 1.35; margin-bottom: 14px; letter-spacing: -0.3px;
}
.pain-card {
border: 1px solid var(--border); border-radius: 10px;
padding: 12px 14px; display: flex; gap: 10px; align-items: center;
margin-bottom: 7px;
}
.pain-emoji { font-size: 20px; flex-shrink: 0; }
.pain-text { font-size: 13.5px; color: #333; font-weight: 500; }
/* 진입 카드 */
.entry-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.entry-card {
background: #fff; border: 2px solid var(--border);
border-radius: 14px; padding: 16px;
cursor: pointer; transition: all 0.2s;
display: flex; align-items: center; gap: 14px;
}
.entry-card:hover {
border-color: var(--navy);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(26, 30, 143, 0.15);
}
.entry-card.calc { border-color: var(--gold); }
.entry-card.seller { border-color: #2cb47b; }
.entry-card-icon {
font-size: 32px; flex-shrink: 0;
width: 50px; height: 50px;
background: var(--bg-gray); border-radius: 12px;
display: flex; align-items: center; justify-content: center;
}
.entry-card-text { flex: 1; min-width: 0; }
.entry-card-title { font-size: 13.5px; font-weight: 900; color: var(--text); margin-bottom: 3px; }
.entry-card-desc { font-size: 13.5px; color: var(--text2); line-height: 1.5; }
.entry-card-arrow { font-size: 18px; color: var(--navy); }
.s-h2-mini {
font-size: 16.5px; font-weight: 900; color: var(--text);
margin-top: 24px; margin-bottom: 3px; letter-spacing: -0.3px;
}
.s-sub { font-size: 13.5px; color: #666; margin-bottom: 14px; }
.axis-card {
border-radius: 10px; padding: 12px 14px; margin-bottom: 6px;
display: flex; gap: 10px;
}
.axis-card.bgi { background: #E6F1FB; }
.axis-card.lifeup { background: #FAEEDA; }
.axis-num { font-size: 20px; font-weight: 900; flex-shrink: 0; }
.axis-num.bgi { color: #042C53; }
.axis-num.lifeup { color: #412402; }
.axis-title { font-size: 13.5px; font-weight: 900; margin-bottom: 1px; }
.axis-title.bgi { color: #042C53; }
.axis-title.lifeup { color: #412402; }
.axis-actor { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.axis-actor.bgi { color: #0C447C; }
.axis-actor.lifeup { color: #633806; }
.axis-desc { font-size: 13px; line-height: 1.5; }
.axis-desc.bgi { color: #185FA5; }
.axis-desc.lifeup { color: #854F0B; }
.divider-row { display: flex; align-items: center; gap: 8px; margin: 7px 4px; }
.divider-row::before, .divider-row::after { content: ''; flex: 1; border-top: 1px dashed #ccc; }
.divider-row span { font-size: 13px; color: #999; font-weight: 600; }
/* §2-1 법적 */
.s2b { padding: 24px 22px; background: var(--bg-gray); }
.legal-box { background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 16px; }
.legal-title { font-size: 14.5px; font-weight: 900; color: #222; margin-bottom: 7px; }
.legal-intro { font-size: 13.5px; color: #666; line-height: 1.6; margin-bottom: 12px; }
.legal-step {
background: var(--bg-gray); border-radius: 8px; padding: 11px;
margin-bottom: 6px; display: flex; gap: 9px;
}
.legal-step-num { font-size: 14px; flex-shrink: 0; }
.legal-step-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.legal-step-desc { font-size: 13px; color: #666; line-height: 1.55; }
.legal-warning {
background: #FAEEDA; border: 1px solid #BA7517;
border-radius: 8px; padding: 11px; margin-top: 10px;
display: flex; gap: 8px;
}
.legal-warning-icon { font-size: 14px; flex-shrink: 0; }
.legal-warning-text { font-size: 13.5px; color: #633806; font-weight: 700; line-height: 1.55; }
/* §3 */
.s3 { padding: 24px 22px; background: #fff; border-top: 1px solid var(--border); }
.s3-h2 { font-size: 17.5px; font-weight: 900; color: var(--text); line-height: 1.35; margin-bottom: 3px; letter-spacing: -0.3px; }
.s3-desc { font-size: 13.5px; color: #666; margin-bottom: 13px; }
.h-scroll {
display: flex; gap: 8px; overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -22px 8px; padding: 0 22px;
scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar { display: none; }
.proof-card {
flex-shrink: 0; width: 200px;
border: 1px solid var(--border); border-radius: 10px;
padding: 13px; background: #fff;
}
.proof-flag-row { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.proof-flag { font-size: 18px; }
.proof-source { font-size: 12.5px; font-weight: 700; color: #666; }
.proof-headline {
font-size: 13px; font-weight: 900; line-height: 1.4;
margin-bottom: 11px; color: var(--text); min-height: 2.8em;
}
.proof-stat-box { background: var(--bg-gray); border-radius: 8px; padding: 8px; text-align: center; }
.proof-stat-num { font-size: 16px; font-weight: 900; color: var(--navy); margin-bottom: 1px; }
.proof-stat-lbl { font-size: 12.5px; color: #666; }
.pager { text-align: center; font-size: 13px; color: #999; margin-top: 6px; }
/* §4 */
.s4 { padding: 24px 22px; background: #fff; border-top: 1px solid var(--border); }
.tab-row { display: flex; gap: 5px; margin-bottom: 12px; }
.tab {
flex: 1; padding: 8px; border: none; border-radius: 8px;
font-size: 13.5px; font-weight: 700; cursor: pointer;
font-family: inherit;
}
.tab.on { background: var(--navy); color: #fff; }
.tab.off { background: var(--bg-gray); color: #666; }
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.area-cell {
border: 1px solid var(--border); border-radius: 8px;
padding: 8px 4px; text-align: center;
}
.area-emoji { font-size: 20px; margin-bottom: 1px; }
.area-name { font-size: 13px; font-weight: 700; line-height: 1.2; color: #222; }
/* §5 */
.s5 { padding: 24px 22px; background: var(--bg-gray); border-top: 1px solid var(--border); }
.s5-h2 { font-size: 17.5px; font-weight: 900; color: var(--text); line-height: 1.35; margin-bottom: 13px; letter-spacing: -0.3px; }
.anchor-row {
background: #fff; border: 1px solid var(--border);
border-radius: 9px; padding: 10px 12px;
display: flex; align-items: center; gap: 10px; margin-bottom: 5px;
}
.anchor-row.lifeup { background: var(--navy); border: none; }
.anchor-emoji { font-size: 14px; }
.anchor-label { font-size: 13px; color: #666; }
.anchor-row.lifeup .anchor-label { color: rgba(255, 255, 255, 0.7); }
.anchor-value { font-size: 13.5px; font-weight: 900; color: var(--text); }
.anchor-source { font-size: 13px; font-weight: 500; color: #888; margin-top: 4px; line-height: 1.45; letter-spacing: -0.2px; }
.anchor-row.lifeup .anchor-source { color: rgba(255,255,255,0.55); }
.anchor-row.lifeup .anchor-value { color: var(--gold); }
.bgi-note { font-size: 13px; color: #666; line-height: 1.5; margin: 10px 0 9px; }
.pkg-card {
background: #fff; border: 2px solid var(--border);
border-radius: 9px; padding: 12px; margin-bottom: 7px;
cursor: pointer; transition: all 0.18s ease;
position: relative;
}
.pkg-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(26,30,143,0.08); }
.pkg-card.selected {
border-color: var(--navy);
background: rgba(26,30,143,0.03);
box-shadow: 0 6px 20px rgba(26,30,143,0.15);
}
.pkg-card.selected .pkg-price { color: var(--gold); }
.pkg-card.popular { border-color: var(--navy); }
.pkg-popular-badge {
position: absolute; top: -7px; left: 11px;
background: var(--navy); color: var(--gold);
font-size: 12.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
}
.pkg-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.pkg-tier { font-size: 13px; font-weight: 900; color: var(--text); }
.pkg-price { font-size: 14px; font-weight: 900; color: var(--navy); }
.pkg-desc { font-size: 13px; color: #666; }
/* §6 */
.s6 {
padding: 32px 22px 26px;
background: linear-gradient(180deg, #1a1e8f 0%, #0f1260 100%);
color: #fff; text-align: center;
}
.s6-h2 { font-size: 17.5px; font-weight: 900; line-height: 1.45; margin-bottom: 14px; color: #fff; }
.s6-benefits { background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 14px; margin-bottom: 14px; text-align: left; }
.s6-benefit-title { font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-bottom: 7px; font-weight: 700; text-align: center; }
.s6-benefit { font-size: 13px; color: rgba(255, 255, 255, 0.95); margin-bottom: 3px; text-align: left; }
.timer-box { background: rgba(224, 32, 32, 0.2); border: 1px solid rgba(224, 32, 32, 0.4); border-radius: 8px; padding: 9px; margin-bottom: 14px; }
.timer-label { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-bottom: 2px; }
.timer-num { font-size: 18px; font-weight: 900; letter-spacing: 1.5px; }
/* ━━━━━ 페이지 2/3/4 공통 헤더 ━━━━━ */
.page-header {
background: #fff; padding: 14px 18px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.back-btn { font-size: 18px; cursor: pointer; color: var(--navy); background: none; border: none; font-weight: 900; }
.page-title { font-size: 14.5px; font-weight: 900; color: var(--text); }
.page-step { margin-left: auto; font-size: 13.5px; color: #999; }
.progress-bar { height: 3px; background: var(--bg-gray); flex-shrink: 0; }
.progress-fill { height: 100%; background: var(--navy); transition: width 0.3s; }
/* ━━━━━ 페이지 2: ROI 계산기 ━━━━━ */
.calc-content { padding: 22px 20px; }
.calc-h2 { font-size: 21px; font-weight: 900; color: var(--text); line-height: 1.35; margin-bottom: 6px; letter-spacing: -0.3px; }
.calc-sub { font-size: 13.5px; color: #666; line-height: 1.6; margin-bottom: 22px; }
.option-card {
border: 1.5px solid var(--border); border-radius: 12px;
padding: 14px; margin-bottom: 8px; cursor: pointer;
transition: all 0.15s; display: flex; align-items: center; gap: 12px;
}
.option-card.selected { border-color: var(--navy); background: rgba(26, 30, 143, 0.04); }
.option-radio {
width: 18px; height: 18px; border: 2px solid var(--border);
border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.option-card.selected .option-radio { border-color: var(--navy); }
.option-card.selected .option-radio::after { content: ''; width: 8px; height: 8px; background: var(--navy); border-radius: 50%; }
.option-text { font-size: 13px; font-weight: 500; color: var(--text); }
.chip-row { display: flex; gap: 8px; margin-bottom: 18px; }
.chip {
flex: 1; padding: 12px; border-radius: 10px;
border: 1.5px solid var(--border); background: #fff;
font-size: 13px; font-weight: 700; color: var(--text2);
cursor: pointer; text-align: center;
font-family: inherit;
}
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.cost-input-row {
display: flex; align-items: center; gap: 10px;
padding: 12px; border: 1px solid var(--border);
border-radius: 10px; margin-bottom: 7px; background: #fff;
}
.cost-emoji { font-size: 20px; width: 28px; flex-shrink: 0; }
.cost-label { flex: 1; font-size: 13px; color: var(--text); font-weight: 500; }
.cost-input {
width: 80px; padding: 8px 10px;
border: 1px solid var(--border); border-radius: 7px;
font-size: 13px; font-weight: 700; text-align: right;
font-family: inherit;
}
.cost-unit { font-size: 13.5px; color: #999; width: 24px; }
.total-display {
background: var(--navy); color: #fff;
border-radius: 12px; padding: 14px; margin: 12px 0 16px;
text-align: center;
}
.total-label { font-size: 13.5px; color: rgba(255, 255, 255, 0.7); margin-bottom: 4px; }
.total-amount { font-size: 26px; font-weight: 900; color: var(--gold); letter-spacing: -0.5px; }
.total-yearly { font-size: 13.5px; color: rgba(255, 255, 255, 0.85); margin-top: 3px; }
.compare-info {
background: var(--bg-gray); border-radius: 8px;
padding: 10px 12px; font-size: 13px; color: #666;
margin-bottom: 14px; line-height: 1.5;
}
.btn-row { display: flex; gap: 8px; margin-top: 18px; }
.btn-primary {
flex: 1; background: var(--navy); color: #fff;
font-weight: 900; font-size: 14px; padding: 13px;
border-radius: 12px; border: none; cursor: pointer;
font-family: inherit;
}
.btn-primary:disabled { background: #ccc; cursor: not-allowed; }
.btn-secondary {
flex: 1; background: #fff; color: var(--navy);
border: 1.5px solid var(--navy);
font-weight: 700; font-size: 13px; padding: 13px;
border-radius: 12px; cursor: pointer;
font-family: inherit;
}
/* 결과 화면 */
.result-shock { background: #fff5f5; border: 1px solid #ffd0d0; border-radius: 14px; padding: 18px; margin-bottom: 16px; }
.result-shock-label { font-size: 13.5px; color: #cc3333; font-weight: 700; margin-bottom: 5px; }
.result-shock-amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.shock-item { padding: 7px 0; }
.shock-item-label { font-size: 13px; color: #666; margin-bottom: 3px; }
.shock-item-value { font-size: 18px; font-weight: 900; color: #cc3333; }
.shock-item-large .shock-item-value { font-size: 26px; }
.efficiency-warning { background: #fff; border-radius: 10px; padding: 12px; margin-top: 10px; border: 1px solid #ffd0d0; }
.efficiency-bar-container { height: 18px; background: #f0f0f0; border-radius: 9px; overflow: hidden; margin: 9px 0; display: flex; }
.efficiency-bar-good { height: 100%; background: #22c55e; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13.5px; font-weight: 700; }
.efficiency-bar-bad { height: 100%; background: #ef4444; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13.5px; font-weight: 700; }
.efficiency-text { font-size: 13px; color: #444; line-height: 1.6; margin-top: 8px; }
.efficiency-text strong { color: #cc3333; font-weight: 900; }
.solution-box {
background: linear-gradient(135deg, #fbf3e0 0%, #faeeda 100%);
border: 2px solid var(--gold);
border-radius: 14px; padding: 18px; margin-bottom: 16px;
}
.solution-title { font-size: 15px; font-weight: 900; color: #633806; margin-bottom: 10px; }
.solution-list { list-style: none; padding: 0; margin: 0 0 12px; }
.solution-list li { font-size: 13.5px; color: #412402; line-height: 1.7; padding-left: 20px; position: relative; }
.solution-list li::before { content: '✓'; position: absolute; left: 0; color: #854F0B; font-weight: 900; }
.savings-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; background: #fff; padding: 12px; border-radius: 10px; margin-top: 12px; }
.savings-item { text-align: center; }
.savings-label { font-size: 13.5px; color: #666; margin-bottom: 3px; }
.savings-value { font-size: 13px; font-weight: 900; color: #854F0B; }
.savings-item.large .savings-value { font-size: 18px; color: #cc3333; }
.payback-box {
background: #fff; border: 2px solid var(--navy);
border-radius: 12px; padding: 14px; margin-bottom: 16px; text-align: center;
}
.payback-label { font-size: 13.5px; color: #666; margin-bottom: 5px; }
.payback-value { font-size: 32px; font-weight: 900; color: var(--navy); letter-spacing: -1px; }
.payback-unit { font-size: 14px; color: var(--navy); font-weight: 700; }
.payback-desc { font-size: 13.5px; color: #666; line-height: 1.5; margin-top: 5px; }
.lead-form { background: #fff; border-radius: 14px; padding: 18px; margin-top: 8px; border: 1px solid var(--border); }
.lead-form-title { font-size: 14.5px; font-weight: 900; color: var(--text); margin-bottom: 8px; }
.lead-form-sub { font-size: 13.5px; color: #666; line-height: 1.5; margin-bottom: 14px; }
.lead-input {
width: 100%; padding: 11px 13px;
border: 1px solid var(--border); border-radius: 9px;
font-size: 13px; margin-bottom: 8px; font-family: inherit;
}
.lead-checkbox { display: flex; gap: 7px; align-items: flex-start; margin: 10px 0 14px; font-size: 13.5px; color: #666; line-height: 1.5; cursor: pointer; }
.lead-checkbox input { margin-top: 2px; flex-shrink: 0; }
/* ━━━━━ 페이지 3: TCI 진단 ━━━━━ */
.tci-content { padding: 22px 20px; }
.tci-question-num { font-size: 13.5px; color: var(--navy); font-weight: 900; letter-spacing: 0.5px; margin-bottom: 8px; }
.tci-question { font-size: 16.5px; font-weight: 700; color: var(--text); line-height: 1.5; margin-bottom: 24px; letter-spacing: -0.3px; }
.likert-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.likert-option {
border: 2px solid var(--border); border-radius: 12px;
padding: 14px 16px; cursor: pointer;
transition: all 0.15s; display: flex; align-items: center; gap: 14px;
background: #fff;
}
.likert-option:hover { transform: translateX(2px); }
.likert-option.selected { border-color: var(--navy); box-shadow: 0 4px 12px rgba(26, 30, 143, 0.15); }
.likert-option[data-score="1"] { border-left: 6px solid #dc2626; }
.likert-option[data-score="2"] { border-left: 6px solid #f97316; }
.likert-option[data-score="3"] { border-left: 6px solid #94a3b8; }
.likert-option[data-score="4"] { border-left: 6px solid #3b82f6; }
.likert-option[data-score="5"] { border-left: 6px solid #1a1e8f; }
.likert-option[data-score="1"]:hover { background: #fef2f2; border-color: #dc2626; }
.likert-option[data-score="2"]:hover { background: #fff7ed; border-color: #f97316; }
.likert-option[data-score="3"]:hover { background: #f8fafc; border-color: #94a3b8; }
.likert-option[data-score="4"]:hover { background: #eff6ff; border-color: #3b82f6; }
.likert-option[data-score="5"]:hover { background: #eef2ff; border-color: #1a1e8f; }
.likert-num {
width: 36px; height: 36px; border-radius: 50%;
background: var(--bg-gray); color: var(--navy);
font-size: 16px; font-weight: 900;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; border: 2px solid var(--border);
}
.likert-option[data-score="1"] .likert-num { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.likert-option[data-score="2"] .likert-num { background: #fff7ed; color: #f97316; border-color: #fed7aa; }
.likert-option[data-score="3"] .likert-num { background: #f8fafc; color: #64748b; border-color: #cbd5e1; }
.likert-option[data-score="4"] .likert-num { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
.likert-option[data-score="5"] .likert-num { background: #eef2ff; color: #1a1e8f; border-color: #c7d2fe; }
.likert-option.selected .likert-num { background: var(--navy); color: #fff; border-color: var(--navy); }
.likert-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.likert-main { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.likert-hint { font-size: 13.5px; color: var(--text3); font-weight: 400; }
.likert-guide {
display: flex; justify-content: space-between;
font-size: 13px; color: #999; margin: 0 4px 8px; font-weight: 600;
}
.likert-guide .left { color: #dc2626; }
.likert-guide .right { color: #1a1e8f; }
.tci-result-header {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
color: #fff; padding: 26px 22px; text-align: center;
}
.tci-result-label { font-size: 13.5px; opacity: 0.8; margin-bottom: 8px; }
.tci-result-type { font-size: 25px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 8px; }
.tci-result-type .accent { color: var(--gold); }
.tci-result-desc { font-size: 13.5px; opacity: 0.9; line-height: 1.5; padding: 0 10px; }
.radar-container { background: #fff; padding: 20px; margin: 0; text-align: center; }
.radar-svg { max-width: 100%; height: auto; }
.tci-axis-list { padding: 0 22px; }
.tci-axis-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 8px; }
.tci-axis-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.tci-axis-name { font-size: 13px; font-weight: 900; color: var(--text); }
.tci-axis-percent { font-size: 13.5px; font-weight: 900; color: var(--navy); }
.tci-axis-bar { height: 6px; background: var(--bg-gray); border-radius: 3px; overflow: hidden; }
.tci-axis-fill { height: 100%; background: var(--navy); transition: width 0.5s; }
.tci-axis-desc { font-size: 13px; color: #666; margin-top: 5px; line-height: 1.5; }
.tci-coaching { background: var(--bg-gray); border-radius: 12px; padding: 14px; margin: 14px 22px; }
.tci-coaching-title { font-size: 13.5px; font-weight: 900; color: var(--navy); margin-bottom: 7px; }
.tci-coaching-text { font-size: 13px; color: #444; line-height: 1.65; }
.tci-cta-box {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
color: #fff; padding: 22px; border-radius: 14px;
margin: 18px 22px; text-align: center;
}
.tci-cta-title { font-size: 14.5px; font-weight: 900; margin-bottom: 8px; }
.tci-cta-text { font-size: 13px; opacity: 0.9; line-height: 1.6; margin-bottom: 14px; }
/* ━━━━━ 페이지 4: 영업 대시보드 ━━━━━ */
.seller-content { padding: 22px 20px; background: var(--bg-gray); min-height: 100%; }
.seller-hero {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
color: #fff; border-radius: 14px; padding: 18px;
margin-bottom: 14px;
}
.seller-hero-label { font-size: 13px; opacity: 0.8; margin-bottom: 4px; letter-spacing: 0.5px; }
.seller-hero-name { font-size: 18px; font-weight: 900; margin-bottom: 14px; }
.seller-code-row {
background: rgba(255, 255, 255, 0.12);
border-radius: 10px; padding: 10px 12px;
display: flex; align-items: center; gap: 10px;
}
.seller-code-label { font-size: 13.5px; opacity: 0.8; }
.seller-code { font-size: 14.5px; font-weight: 900; color: var(--gold); letter-spacing: 0.5px; }
.seller-code-copy {
margin-left: auto; background: var(--gold); color: var(--navy-dark);
border: none; padding: 6px 12px; border-radius: 7px;
font-size: 13.5px; font-weight: 900; cursor: pointer; font-family: inherit;
}
.seller-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.seller-stat-card {
background: #fff; border: 1px solid var(--border);
border-radius: 12px; padding: 12px;
}
.seller-stat-label { font-size: 13.5px; color: #888; margin-bottom: 4px; font-weight: 600; }
.seller-stat-value { font-size: 22px; font-weight: 900; color: var(--navy); letter-spacing: -0.5px; }
.seller-stat-unit { font-size: 13.5px; color: #888; font-weight: 600; margin-left: 2px; }
.seller-stat-card.highlight { background: var(--navy); color: #fff; border: none; }
.seller-stat-card.highlight .seller-stat-label { color: rgba(255, 255, 255, 0.7); }
.seller-stat-card.highlight .seller-stat-value { color: var(--gold); }
.seller-stat-card.highlight .seller-stat-unit { color: rgba(255, 255, 255, 0.7); }
.seller-section-title {
font-size: 13.5px; font-weight: 900; color: var(--text);
margin: 18px 0 8px; display: flex; justify-content: space-between; align-items: center;
}
.seller-section-title .badge {
background: var(--navy); color: #fff;
font-size: 13.5px; padding: 3px 10px; border-radius: 12px; font-weight: 700;
}
.lead-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.lead-item {
background: #fff; border: 1px solid var(--border);
border-radius: 10px; padding: 11px 13px;
display: flex; align-items: center; gap: 10px;
}
.lead-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--bg-gray); color: var(--navy);
font-size: 13.5px; font-weight: 900;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lead-info { flex: 1; min-width: 0; }
.lead-name { font-size: 13.5px; font-weight: 900; color: var(--text); margin-bottom: 1px; }
.lead-meta { font-size: 13.5px; color: #888; }
.lead-status {
font-size: 13px; font-weight: 700; padding: 4px 9px; border-radius: 10px;
flex-shrink: 0;
}
.lead-status.pending { background: #fef3c7; color: #b45309; }
.lead-status.signup { background: #dbeafe; color: #1e40af; }
.lead-status.paid { background: #dcfce7; color: #166534; }
.lead-status.coaching { background: #ede9fe; color: #6d28d9; }
.lead-pkg { font-size: 13px; font-weight: 900; color: var(--navy); }
.add-lead-btn {
background: #fff; border: 2px dashed var(--navy);
color: var(--navy); padding: 14px;
border-radius: 12px; font-size: 13px; font-weight: 900;
width: 100%; cursor: pointer; font-family: inherit; margin-bottom: 8px;
}
.add-lead-form {
background: #fff; border: 1px solid var(--border);
border-radius: 12px; padding: 14px; margin-bottom: 14px;
}
.add-lead-form input, .add-lead-form select {
width: 100%; padding: 10px 12px; margin-bottom: 7px;
border: 1px solid var(--border); border-radius: 8px;
font-size: 13px; font-family: inherit;
}
.add-lead-form .form-row { display: flex; gap: 7px; }
.add-lead-form .form-row > * { flex: 1; }
/* 푸터 (main fragment 호환) */
.app-footer-wrap { background: #F8FAFD; }
/* 로그인 모달 안 깨지게 z-index */
.modal { z-index: 1000; }
/* ━━━━━ 사용자 요청 override (2026-05-08) ━━━━━ */
/* 1. 본문 텍스트 통일 12px (모바일 가독성) */
.pain-text,
.s1-sub,
.legal-intro,
.legal-step-title,
.legal-step-desc,
.legal-warning-text,
.axis-desc,
.axis-actor,
.s-sub,
.s3-desc,
.entry-card-desc,
.calc-sub,
.bgi-note,
.compare-info,
.efficiency-text,
.lead-form-sub,
.lead-checkbox,
.tci-result-desc,
.tci-axis-desc,
.tci-cta-text,
.tci-coaching-text,
.shock-item-label,
.savings-label,
.payback-desc,
.solution-list li,
.s6-benefit,
.s6-benefit-title,
.seller-stat-label,
.seller-hero-label,
.lead-meta,
.option-text,
.likert-hint,
.pkg-desc,
.proof-headline,
.proof-stat-lbl,
.legal-warning-text,
.s4 .area-name {
font-size: 14px;
line-height: 1.6;
}
/* 2. §2-1 법적 박스 하위 목차 글씨 검정 */
.legal-step-title,
.legal-step-desc {
color: #000;
}
.legal-step .legal-step-title { font-weight: 700; }
/* 3. main.css(Tailwind reset) 방어 — 어두운 배경 영역 글씨 색 명시 */
/* §1 Hero (navy 그라디언트) */
.s1 { color: #fff; }
.s1 .s1-h1 { color: #fff; }
.s1 .s1-h1 .accent { color: var(--gold); }
.s1 .s1-sub { color: rgba(255,255,255,0.85); }
.s1 .s1-label { color: var(--gold); }
.s1 .trust-mini { color: rgba(255,255,255,0.85); }
.s1 .trust-mini strong { color: #fff; }
.s1 .rating-mini { color: rgba(255,255,255,0.7); }
.s1 .rating-mini .num { color: #fff; }
.s1 .rating-mini .stars { color: var(--gold); }
/* §6 최종 CTA (navy 그라디언트) */
.s6 { color: #fff; }
.s6 .s6-h2 { color: #fff; }
.s6 .s6-benefit-title { color: rgba(255,255,255,0.8); }
.s6 .s6-benefit { color: rgba(255,255,255,0.95); }
.s6 .timer-label { color: rgba(255,255,255,0.7); }
.s6 .timer-num { color: #fff; }
/* §5 anchor-row.lifeup (navy 단일) */
.anchor-row.lifeup .anchor-label { color: rgba(255,255,255,0.7); }
.anchor-row.lifeup .anchor-value { color: var(--gold); }
/* TCI 결과 헤더 (navy) */
.tci-result-header { color: #fff; }
.tci-result-header .tci-result-label { color: rgba(255,255,255,0.8); }
.tci-result-header .tci-result-type { color: #fff; }
.tci-result-header .tci-result-type .accent { color: var(--gold); }
.tci-result-header .tci-result-desc { color: rgba(255,255,255,0.9); }
/* TCI CTA 박스 (navy) */
.tci-cta-box { color: #fff; }
.tci-cta-box .tci-cta-title { color: #fff; }
.tci-cta-box .tci-cta-text { color: rgba(255,255,255,0.9); }
/* 영업 대시보드 hero (navy) */
.seller-hero { color: #fff; }
.seller-hero .seller-hero-label { color: rgba(255,255,255,0.8); }
.seller-hero .seller-hero-name { color: #fff; }
.seller-hero .seller-code-label { color: rgba(255,255,255,0.8); }
.seller-hero .seller-code { color: var(--gold); }
/* 영업 대시보드 highlight 통계 카드 (navy) */
.seller-stat-card.highlight { color: #fff; }
.seller-stat-card.highlight .seller-stat-label { color: rgba(255,255,255,0.7); }
.seller-stat-card.highlight .seller-stat-value { color: var(--gold); }
.seller-stat-card.highlight .seller-stat-unit { color: rgba(255,255,255,0.7); }
/* total-display (navy) */
.total-display { color: #fff; }
.total-display .total-label { color: rgba(255,255,255,0.7); }
.total-display .total-amount { color: var(--gold); }
.total-display .total-yearly { color: rgba(255,255,255,0.85); }
/* CTA 버튼 색 강제 */
.cta-gold { color: var(--navy-dark) !important; }
.btn-primary { color: #fff !important; }
.btn-secondary { color: var(--navy) !important; }
/* 헤더 아이콘 색 */
.app-header .icon-btn {
color: #2D3E52;
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 8px;
}
.app-header .icon-btn:hover { color: var(--navy); background: var(--bg-gray); }
/* ━━━━━ §3 Global Media 슬라이드 (lifeup_news_slides_v4 기반, 2026-05-08) ━━━━━ */
.s3 {
--usa: #1a4fa8; --usa-bg: #eff4ff; --usa-bd: #c0d0f0;
--jp: #bc002d; --jp-bg: #fff1f4; --jp-bd: #f5b8c4;
--hk: #cc0010; --hk-bg: #fff0f0; --hk-bd: #f4b8bc;
--sg: #d0202e; --sg-bg: #fff0f1; --sg-bd: #f4bbc0;
--news-gold: #8a5f00; --news-gold-bg: #fffbeb; --news-gold-bd: #e8c84a;
--news-green: #1a7040; --news-green-bg: #edf9f0; --news-green-bd: #7dd4a0;
--news-text2: #444; --news-text3: #888; --news-bg2: #f7f8fc; --news-bg3: #eef0f8; --news-border: #e8e8f0;
}
.news-slides-outer {
position: relative; overflow: hidden;
border: 1px solid var(--news-border); border-radius: 14px;
background: #fff; margin: 0 -22px; /* 섹션 padding 상쇄해 풀-너비 */
width: calc(100% + 44px);
}
.news-slides-track {
display: flex; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
width: 100%;
align-items: flex-start;
}
.news-slide {
flex: 0 0 100%;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.news-slide-inner {
padding: 18px 18px 16px;
box-sizing: border-box;
}
/* news-* prefix 클래스 (v4 .hero/.nbody/등을 prefix화해 충돌 방지) */
.news-slide-inner .news-sec-label {
font-size: 13.5px; font-weight: 700; color: var(--navy);
letter-spacing: 0.3px; margin-bottom: 6px;
display: flex; align-items: center; gap: 5px;
}
.news-slide-inner .news-sec-label::before {
content: ''; display: block; width: 10px; height: 2px;
background: var(--navy); border-radius: 2px;
}
.news-slide-inner .news-hero { padding: 0 0 14px; border-bottom: 1px solid var(--news-border); margin-bottom: 12px; }
.news-slide-inner .news-h1 {
font-size: 19px; font-weight: 900; color: #111;
line-height: 1.4; letter-spacing: -0.3px; margin-bottom: 6px;
}
.news-slide-inner .news-h1 em { font-style: normal; color: var(--navy); }
.news-slide-inner .news-h1 em.usa { color: var(--usa); }
.news-slide-inner .news-h1 em.jp { color: var(--jp); }
.news-slide-inner .news-h1 em.hk { color: var(--hk); }
.news-slide-inner .news-h1 em.sg { color: var(--sg); }
.news-slide-inner .news-h1 em.rd { color: #e02020; }
.news-slide-inner .news-sub { font-size: 13.5px; color: var(--news-text2); line-height: 1.6; }
.news-slide-inner .news-body { display: flex; flex-direction: column; gap: 10px; }
.news-slide-inner .news-quote {
background: var(--news-bg2); border-radius: 10px;
padding: 12px 13px; border-left: 3px solid var(--navy);
}
.news-slide-inner .news-quote.usa { border-left-color: var(--usa); }
.news-slide-inner .news-quote.jp { border-left-color: var(--jp); }
.news-slide-inner .news-quote.hk { border-left-color: var(--hk); }
.news-slide-inner .news-quote.sg { border-left-color: var(--sg); }
.news-slide-inner .news-q-orig { font-size: 13.5px; color: #111; line-height: 1.7; font-weight: 500; font-style: italic; }
.news-slide-inner .news-q-trans {
font-size: 13px; color: var(--news-text3); line-height: 1.65;
margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--news-border);
font-style: normal;
}
.news-slide-inner .news-q-who { font-size: 13.5px; color: var(--news-text3); margin-top: 7px; padding-top: 5px; border-top: 1px solid var(--news-border); }
.news-slide-inner .news-easy {
background: var(--news-bg2); border-radius: 10px;
padding: 11px 13px; display: flex; gap: 9px; align-items: flex-start;
border: 1px solid var(--news-border);
}
.news-slide-inner .news-easy-ic { font-size: 17px; flex-shrink: 0; }
.news-slide-inner .news-easy-lbl { font-size: 13.5px; font-weight: 700; color: var(--navy); letter-spacing: 0.5px; margin-bottom: 3px; }
.news-slide-inner .news-easy-txt { font-size: 13.5px; color: var(--news-text2); line-height: 1.65; }
.news-slide-inner .news-stat-row { display: flex; gap: 7px; }
.news-slide-inner .news-stat-box {
flex: 1; border-radius: 10px; padding: 11px 8px; text-align: center;
border: 1px solid var(--news-border); background: var(--news-bg2);
}
.news-slide-inner .news-stat-num { font-size: 24px; font-weight: 900; line-height: 1; margin-bottom: 3px; letter-spacing: -1px; }
.news-slide-inner .news-stat-num.usa { color: var(--usa); }
.news-slide-inner .news-stat-num.jp { color: var(--jp); }
.news-slide-inner .news-stat-num.hk { color: var(--hk); }
.news-slide-inner .news-stat-num.sg { color: var(--sg); }
.news-slide-inner .news-stat-num.nv { color: var(--navy); }
.news-slide-inner .news-stat-lbl { font-size: 13.5px; color: var(--news-text2); line-height: 1.4; }
.news-slide-inner .news-review {
background: var(--news-bg2); border-radius: 10px;
padding: 12px 13px; border: 1px solid var(--news-border);
}
.news-slide-inner .news-rv-stars { color: #f59e0b; font-size: 13px; letter-spacing: 2px; margin-bottom: 6px; }
.news-slide-inner .news-rv-orig { font-size: 13.5px; color: #111; line-height: 1.7; font-weight: 500; font-style: italic; }
.news-slide-inner .news-rv-trans { font-size: 13px; color: var(--news-text3); line-height: 1.65; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--news-border); }
.news-slide-inner .news-rv-who { font-size: 13.5px; color: var(--news-text3); margin-top: 7px; padding-top: 5px; border-top: 1px solid var(--news-border); }
.news-slide-inner .news-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.news-slide-inner .news-tag { padding: 4px 9px; border-radius: 20px; font-size: 13px; font-weight: 700; border: 1px solid; }
.news-slide-inner .news-tag.usa { background: var(--usa-bg); color: var(--usa); border-color: var(--usa-bd); }
.news-slide-inner .news-tag.jp { background: var(--jp-bg); color: var(--jp); border-color: var(--jp-bd); }
.news-slide-inner .news-tag.hk { background: var(--hk-bg); color: var(--hk); border-color: var(--hk-bd); }
.news-slide-inner .news-tag.sg { background: var(--sg-bg); color: var(--sg); border-color: var(--sg-bd); }
.news-slide-inner .news-tag.gd { background: var(--news-gold-bg); color: var(--news-gold); border-color: var(--news-gold-bd); }
.news-slide-inner .news-tag.gr { background: var(--news-green-bg); color: var(--news-green); border-color: var(--news-green-bd); }
.news-slide-inner .news-srcbar {
background: var(--news-bg3); border-top: 1px solid var(--news-border);
padding: 8px 12px; display: flex; align-items: flex-start; gap: 6px;
margin: 10px -18px -16px;
}
.news-slide-inner .news-src-lbl { font-size: 12.5px; font-weight: 700; color: var(--news-text3); letter-spacing: 1.2px; flex-shrink: 0; padding-top: 1px; }
.news-slide-inner .news-src-txt { font-size: 13.5px; color: var(--news-text3); line-height: 1.55; }
/* Intro 슬라이드 (S0) */
.news-slide-inner .news-intro-hero {
background: linear-gradient(145deg, var(--navy-dark) 0%, #2228b0 100%);
padding: 22px 18px 18px; border-radius: 12px; margin-bottom: 14px; position: relative; overflow: hidden;
}
.news-slide-inner .news-intro-tag { font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.6); letter-spacing: 2px; margin-bottom: 8px; }
.news-slide-inner .news-intro-h1 { font-size: 22px; font-weight: 900; color: #fff; line-height: 1.4; letter-spacing: -0.3px; margin-bottom: 8px; }
.news-slide-inner .news-intro-h1 em { font-style: normal; color: var(--gold); }
.news-slide-inner .news-intro-sub { font-size: 13.5px; color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: 14px; }
.news-slide-inner .news-intro-flags { display: flex; gap: 6px; }
.news-slide-inner .news-intro-flag {
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
border-radius: 9px; padding: 7px 8px;
display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1;
}
.news-slide-inner .news-intro-flag .fe { font-size: 18px; }
.news-slide-inner .news-intro-flag span { font-size: 13.5px; color: rgba(255,255,255,0.8); font-weight: 700; }
.news-slide-inner .news-summary-item {
display: flex; gap: 9px; padding: 10px 12px; border-radius: 10px; border: 1px solid;
margin-bottom: 6px;
}
.news-slide-inner .news-summary-item.usa { background: var(--usa-bg); border-color: var(--usa-bd); }
.news-slide-inner .news-summary-item.jp { background: var(--jp-bg); border-color: var(--jp-bd); }
.news-slide-inner .news-summary-item.hk { background: var(--hk-bg); border-color: var(--hk-bd); }
.news-slide-inner .news-summary-item.sg { background: var(--sg-bg); border-color: var(--sg-bd); }
.news-slide-inner .news-si-fl { font-size: 18px; flex-shrink: 0; }
.news-slide-inner .news-si-nm { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.news-slide-inner .news-si-nm.usa { color: var(--usa); }
.news-slide-inner .news-si-nm.jp { color: var(--jp); }
.news-slide-inner .news-si-nm.hk { color: var(--hk); }
.news-slide-inner .news-si-nm.sg { color: var(--sg); }
.news-slide-inner .news-si-ds { font-size: 13.5px; color: var(--news-text2); line-height: 1.55; }
/* 컨트롤 (이전·다음·점·페이저) */
.news-controls {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 4px 4px; gap: 8px;
}
.news-nbtn {
width: 32px; height: 32px; border-radius: 50%;
border: 1.5px solid var(--news-border); background: #fff;
color: #111; font-size: 14px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-family: inherit; padding: 0;
}
.news-nbtn:disabled { opacity: 0.25; cursor: default; }
.news-nbtn:active { background: var(--news-bg3); }
.news-dots { display: flex; gap: 4px; align-items: center; flex: 1; justify-content: center; flex-wrap: wrap; }
.news-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--news-border); transition: all 0.3s; cursor: pointer; }
.news-dot.on { width: 16px; background: var(--navy); }
.news-pager { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: 0.4px; }
.news-pager span.total { color: var(--news-text3); font-weight: 400; }
/* §3 상단 헤드 — desc + 미니 컨트롤 */
.s3-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-bottom: 13px;
}
.s3-head .s3-desc { margin-bottom: 0; flex: 1; min-width: 0; }
.news-mini-ctrl {
display: inline-flex; align-items: center; gap: 4px;
flex-shrink: 0;
}
.news-mini-btn {
width: 26px; height: 26px; border-radius: 50%;
border: 1px solid var(--news-border);
background: #fff; cursor: pointer;
font-size: 16px; line-height: 1; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
color: #111; font-family: inherit;
transition: background 0.15s, transform 0.1s;
}
.news-mini-btn:active { background: var(--news-bg3); transform: scale(0.92); }
.news-mini-pager {
font-size: 13px; font-weight: 700; color: var(--navy);
padding: 0 4px; white-space: nowrap; letter-spacing: 0.3px;
}
.news-mini-total { color: var(--news-text3); font-weight: 500; margin-left: 1px; }
/* ━━ 작은 모바일 (iPhone SE / mini 등 ≤ 380px) ━━ */
@media (max-width: 380px) {
.s3 { padding: 20px 16px; }
.news-slides-outer { margin: 0 -16px; width: calc(100% + 32px); }
.news-slide-inner { padding: 14px 14px 12px; }
.news-slide-inner .news-h1 { font-size: 17px; line-height: 1.35; }
.news-slide-inner .news-intro-h1 { font-size: 19px; line-height: 1.35; }
.news-slide-inner .news-sub { font-size: 13.5px; }
.news-slide-inner .news-q-orig,
.news-slide-inner .news-q-trans,
.news-slide-inner .news-easy-txt,
.news-slide-inner .news-rv-orig,
.news-slide-inner .news-rv-trans { font-size: 13.5px; line-height: 1.6; }
.news-slide-inner .news-stat-num { font-size: 21px; }
.news-slide-inner .news-stat-lbl { font-size: 12.5px; }
.news-slide-inner .news-srcbar { margin: 10px -14px -12px; padding: 7px 10px; }
.news-slide-inner .news-src-txt { font-size: 12.5px; }
.news-slide-inner .news-stat-row { gap: 5px; }
.news-slide-inner .news-stat-box { padding: 9px 6px; }
.news-slide-inner .news-intro-hero { padding: 18px 14px 14px; }
.news-slide-inner .news-intro-flag { padding: 6px 4px; }
.news-slide-inner .news-intro-flag .fe { font-size: 16px; }
.news-slide-inner .news-intro-flag span { font-size: 12.5px; }
.news-controls { padding: 8px 2px 2px; gap: 6px; }
.news-nbtn { width: 28px; height: 28px; font-size: 13px; }
.news-pager { font-size: 13px; }
.s3-head { gap: 6px; margin-bottom: 10px; }
.news-mini-btn { width: 24px; height: 24px; font-size: 14px; }
.news-mini-pager { font-size: 13px; padding: 0 2px; }
}