/* ═══════════════════════════════════════
   CALQIO — Global Stylesheet v2
   ═══════════════════════════════════════ */

/* ── Variables ── */
:root {
  --bg:#0a0a0f; --bg2:#111118; --card:#18181f; --border:rgba(255,255,255,0.08);
  --text:#f0f0f5; --text-sub:#8888a0; --text-muted:#50505f;
  --accent:#5b7fee; --accent2:#7c6ff7; --pos:#22c55e; --neg:#ef4444; --blue:#4fa8e8; --amber:#f59e0b;
  --nav-h:58px; --radius:14px; --radius-sm:8px;
}
body.light-mode {
  --bg:#f5f5f7; --bg2:#fff; --card:#fff; --border:rgba(0,0,0,0.1);
  --text:#111; --text-sub:#555; --text-muted:#aaa;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo',sans-serif;
  font-size:16px; line-height:1.6; min-height:100vh;
  transition:background .3s,color .3s;
}
body[dir="rtl"] { direction:rtl; }
a { color:inherit; text-decoration:none; }
input,button,select { font-family:inherit; }

/* ── NAV ── */
nav {
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:rgba(10,10,15,.93); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 20px; gap:10px;
}
body.light-mode nav { background:rgba(245,245,247,.93); }
.logo {
  font-size:1.25rem; font-weight:800; letter-spacing:-.02em; margin-right:auto; flex-shrink:0;
  background:linear-gradient(135deg,var(--text),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.logo span { opacity:.6; font-weight:400; }

/* ── NAV TABS (calc pages) ── */
.nav-calcs {
  display:flex; gap:3px; overflow-x:auto; scrollbar-width:none; flex:1; padding:0 8px;
}
.nav-calcs::-webkit-scrollbar { display:none; }
.nc {
  padding:5px 10px; border-radius:14px; font-size:11px; font-weight:500;
  color:var(--text-muted); white-space:nowrap; transition:all .2s; flex-shrink:0;
}
.nc:hover { color:var(--text); background:var(--card); }
.nc.active { background:var(--accent); color:#fff; }

/* ── THEME BTN ── */
.theme-btn {
  background:none; border:1px solid var(--border); border-radius:20px;
  padding:5px 12px; font-size:.78rem; color:var(--text-sub); cursor:pointer; transition:all .2s; flex-shrink:0;
}
.theme-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ── LANG WIDGET ── */
.lw { position:relative; flex-shrink:0; }
.lc {
  background:none; border:1px solid var(--border); border-radius:20px;
  padding:5px 10px; font-size:.78rem; color:var(--text-sub); cursor:pointer;
  display:flex; align-items:center; gap:5px; transition:all .2s;
}
.lc:hover,.lc.open { border-color:var(--accent); color:var(--text); }
.arr { font-size:.6rem; transition:transform .2s; }
.lc.open .arr { transform:rotate(180deg); }
.ld {
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); min-width:180px; display:none;
  box-shadow:0 8px 32px rgba(0,0,0,.5); z-index:200;
}
body[dir="rtl"] .ld { right:auto; left:0; }
.ld.open { display:block; }
.lo {
  padding:10px 14px; cursor:pointer; display:flex; align-items:center; gap:8px;
  font-size:.88rem; transition:background .15s;
}
.lo:hover,.lo.active { background:rgba(91,127,254,.1); color:var(--accent); }
.fl { font-size:1rem; }
.nat { margin-left:auto; font-size:.72rem; color:var(--text-muted); font-weight:600; }

/* ── BREADCRUMB ── */
.breadcrumb {
  padding:8px 20px; font-size:11px; color:var(--text-muted);
  max-width:960px; margin:0 auto;
}
.breadcrumb a { color:var(--text-muted); }
.breadcrumb a:hover { color:var(--text-sub); }
.breadcrumb .sep { margin:0 5px; opacity:.4; }

/* ── HERO (index) ── */
.hero { text-align:center; padding:52px 20px 32px; }
.badge {
  display:inline-block; border:1px solid var(--accent); color:var(--accent);
  border-radius:20px; padding:4px 16px; font-size:.8rem; margin-bottom:18px;
}
.hero h1 {
  font-size:clamp(2rem,5vw,3.2rem); font-weight:800; line-height:1.15; margin-bottom:14px;
  letter-spacing:-.03em;
}
.hero h1 em { color:var(--accent); font-style:normal; }
.hero p { color:var(--text-sub); font-size:1rem; max-width:480px; margin:0 auto; }

/* ── BRAND STORY ── */
.story {
  max-width:700px; margin:20px auto 0; padding:0 20px;
}
.sbox {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.ssplit { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.sp { padding:6px 12px; font-size:16px; font-weight:700; border-radius:6px; }
.sp.c { background:rgba(91,127,254,.15); color:var(--accent); }
.sp.q { background:rgba(124,111,247,.12); color:var(--accent2); }
.sp.io { background:rgba(34,197,94,.12); color:var(--pos); }
.sp-plus { color:var(--text-muted); font-size:14px; padding:0 2px; }
.stext { flex:1; min-width:200px; }
.stext strong { font-size:13px; color:var(--text); display:block; margin-bottom:4px; }
.stext p { font-size:12px; color:var(--text-sub); line-height:1.6; margin:0; }

/* ── DASHBOARD ── */
.sec { max-width:960px; margin:0 auto; padding:24px 20px 0; }
.sec-label {
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:12px;
}
.dashboard-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:28px;
}
.dash-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 16px; cursor:pointer; transition:all .2s; display:block;
}
.dash-card:hover {
  border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(91,127,254,.15);
}
.dash-icon { font-size:1.8rem; margin-bottom:10px; }
.dash-title { font-weight:700; font-size:.9rem; margin-bottom:4px; color:var(--text); }
.dash-desc { color:var(--text-sub); font-size:.8rem; }

/* ── CONTENT CARDS ── */
.content-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:32px;
}
.content-card {
  background:var(--card); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0; padding:16px; transition:all .2s; display:block;
}
body[dir="rtl"] .content-card { border-left:1px solid var(--border); border-right:3px solid var(--accent); border-radius:var(--radius) 0 0 var(--radius); }
.content-card:hover { background:rgba(91,127,254,.06); }
.cc-label { font-size:10px; color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
.cc-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:3px; }
.cc-desc { font-size:11px; color:var(--text-sub); line-height:1.5; }

/* ── RT HINT ── */
.rt-hint {
  font-size:11px; color:var(--text-muted); margin-bottom:10px;
  display:flex; align-items:center; gap:5px;
}
.rt-dot {
  width:6px; height:6px; border-radius:50%; background:var(--pos);
  animation:blink 1.5s infinite; flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── MODE TABS ── */
.mode-tabs {
  display:flex; gap:3px; background:var(--bg2); padding:4px;
  border-radius:10px; border:1px solid var(--border); margin-bottom:16px; width:fit-content;
}
.mode-tab {
  padding:7px 14px; border-radius:8px; border:none; background:transparent;
  color:var(--text-sub); font-size:12px; font-weight:500; cursor:pointer;
  transition:all .2s; font-family:inherit; white-space:nowrap;
}
.mode-tab:hover { color:var(--text); }
.mode-tab.active { background:var(--accent); color:#fff; }

/* ── CALC CARD ── */
.calc-wrap { max-width:960px; margin:0 auto; padding:12px 20px 24px; }
.cf {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.ctitle {
  padding:16px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.ctitle-icon { font-size:20px; }
.ctitle strong { font-size:15px; font-weight:700; }
.ctitle span { font-size:11px; color:var(--text-muted); margin-left:6px; }
.ci { display:grid; grid-template-columns:1fr 1fr; }
@media(max-width:640px){ .ci{ grid-template-columns:1fr; } }
.inp { padding:20px; border-right:1px solid var(--border); }
body[dir="rtl"] .inp { border-right:none; border-left:1px solid var(--border); }
@media(max-width:640px){ .inp{ border-right:none; border-bottom:1px solid var(--border); } }
.out { padding:20px; }

/* ── INPUTS ── */
.ig { margin-bottom:14px; }
.il {
  display:flex; justify-content:space-between;
  font-size:.8rem; color:var(--text-sub); margin-bottom:6px; font-weight:500;
}
.ih { color:var(--text-muted); font-size:.75rem; }
.if {
  width:100%; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:10px 12px;
  font-size:.95rem; color:var(--text); outline:none; transition:border .2s;
  font-family:'DM Mono','Courier New',monospace;
}
.if:focus { border-color:var(--accent); }
select.if { cursor:pointer; font-family:inherit; }
.ir2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.qbtns { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.qb {
  padding:3px 9px; border-radius:4px; border:1px solid var(--border);
  background:transparent; color:var(--text-muted); font-size:.75rem; cursor:pointer; transition:all .15s;
}
.qb:hover { border-color:var(--accent); color:var(--accent); background:rgba(91,127,254,.08); }

/* ── BTN (legacy keep) ── */
.btn {
  width:100%; padding:12px; background:var(--accent); color:#fff; border:none;
  border-radius:var(--radius-sm); font-size:.95rem; font-weight:600; cursor:pointer;
  margin-top:4px; transition:opacity .2s;
}
.btn:hover { opacity:.85; }

/* ── RESULTS ── */
.rh {
  font-size:.72rem; color:var(--text-muted); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px;
}
.rm { margin-bottom:16px; }
.rl { font-size:.78rem; color:var(--text-sub); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.rv {
  font-size:1.6rem; font-weight:800; color:var(--accent);
  font-family:'DM Mono','Courier New',monospace;
}
.rv.neg { color:var(--neg); }
.rv.pos { color:var(--pos); }
.rs { font-size:.75rem; color:var(--text-muted); margin-top:3px; }
.rg { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.ri { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; }
.ril { font-size:.72rem; color:var(--text-muted); margin-bottom:3px; }
.riv { font-weight:700; font-size:.88rem; font-family:'DM Mono','Courier New',monospace; color:var(--text); }
.riv.pos { color:var(--pos); }
.riv.neg { color:var(--neg); }
.riv.blue { color:var(--blue); }
.riv.amber { color:var(--amber); }
.es { text-align:center; padding:36px 20px; color:var(--text-muted); }
.ei { font-size:2rem; margin-bottom:8px; opacity:.5; }
.share-btn {
  width:100%; margin-top:10px; padding:9px; background:transparent;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-sub); font-size:.82rem; font-weight:500; cursor:pointer;
  transition:all .2s; display:flex; align-items:center; justify-content:center; gap:6px;
}
.share-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ── TABLE ── */
.tw { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; max-height:180px; overflow-y:auto; }
table { width:100%; border-collapse:collapse; font-size:.72rem; font-family:'DM Mono','Courier New',monospace; }
th { padding:6px 8px; text-align:right; background:var(--bg2); color:var(--text-muted); font-size:.68rem; font-weight:600; border-bottom:1px solid var(--border); position:sticky; top:0; }
th:first-child { text-align:center; }
td { padding:5px 8px; text-align:right; border-bottom:1px solid var(--border); color:var(--text-sub); }
td:first-child { text-align:center; color:var(--text-muted); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(91,127,254,.04); }

/* ── PERCENT TYPES ── */
.pct-types { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:14px; }
.pc {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px; cursor:pointer; transition:all .2s;
}
.pc:hover,.pc.sel { background:rgba(91,127,254,.12); border-color:var(--accent); }
.pc-t { font-size:.8rem; font-weight:600; color:var(--text); margin-bottom:2px; }
.pc-d { font-size:.72rem; color:var(--text-muted); }

/* ── SEO CONTENT ── */
.content { max-width:960px; margin:0 auto; padding:0 20px 72px; }
.section {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px; margin-bottom:12px;
}
.section h2 { font-size:1.1rem; font-weight:700; margin-bottom:10px; }
.section h3 { font-size:.95rem; font-weight:700; margin:16px 0 7px; color:var(--accent); }
.section p { font-size:.88rem; color:var(--text-sub); line-height:1.8; margin-bottom:9px; }
.section ul,.section ol { padding-left:18px; margin-bottom:9px; }
.section li { font-size:.88rem; color:var(--text-sub); line-height:1.8; margin-bottom:3px; }
.section strong { color:var(--text); }
.formula {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 14px; font-family:'DM Mono','Courier New',monospace;
  font-size:.82rem; color:var(--accent); margin:10px 0; text-align:center;
}
.info-box {
  background:rgba(91,127,254,.07); border:1px solid rgba(91,127,254,.2);
  border-radius:var(--radius-sm); padding:12px 14px;
  font-size:.84rem; color:var(--text-sub); margin:10px 0; line-height:1.7;
}
.info-box strong { color:var(--accent); }

/* ── COMPARE GRID ── */
.cmp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:12px 0; }
.cmp {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px;
}
.cmp.highlight { border-color:var(--pos); }
.cmp-title { font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:5px; }
.cmp-badge { display:inline-block; font-size:.7rem; padding:2px 7px; border-radius:3px; font-weight:600; margin-bottom:7px; }
.badge-g { background:rgba(34,197,94,.15); color:var(--pos); }
.badge-a { background:rgba(245,158,11,.15); color:var(--amber); }
.badge-r { background:rgba(239,68,68,.15); color:var(--neg); }
.badge-b { background:rgba(91,127,254,.15); color:var(--accent); }
.cmp p { font-size:.78rem; color:var(--text-sub); line-height:1.6; margin-bottom:3px; }

/* ── TIPS ── */
.tips-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-top:14px; }
.tip { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
.tip-icon { font-size:1.3rem; margin-bottom:7px; }
.tip-title { font-size:.82rem; font-weight:600; color:var(--text); margin-bottom:4px; }
.tip-desc { font-size:.76rem; color:var(--text-sub); line-height:1.6; }

/* ── FAQ ── */
.faq-item { border-bottom:1px solid var(--border); padding:13px 0; }
.faq-item:last-child { border-bottom:none; }
.faq-q {
  font-size:.88rem; font-weight:600; color:var(--text); margin-bottom:7px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
}
.faq-q::after { content:'+'; color:var(--accent); font-size:1.1rem; flex-shrink:0; }
.faq-a { font-size:.84rem; color:var(--text-sub); line-height:1.75; }

/* ── RELATED ── */
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin-top:12px; }
.related-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px; text-decoration:none; transition:border-color .2s; display:block;
}
.related-card:hover { border-color:var(--accent); }
.related-icon { font-size:1.1rem; margin-bottom:5px; }
.related-title { font-size:.78rem; font-weight:600; color:var(--text); }

/* ── GUIDE (SEO section on index) ── */
.guide { max-width:760px; margin:40px auto 0; padding:32px 24px 64px; border-top:1px solid var(--border); }
.guide h2 { font-size:1.2rem; margin-bottom:12px; }
.guide h3 { font-size:.95rem; margin:22px 0 8px; color:var(--accent); }
.guide p { line-height:1.9; color:var(--text-sub); margin-bottom:12px; font-size:.9rem; }
.guide ul,.guide ol { padding-left:22px; color:var(--text-sub); line-height:2.1; font-size:.9rem; margin-bottom:12px; }
.guide li strong { color:var(--text); }
.gtag { display:inline-block; background:var(--accent); color:#fff; font-size:.72rem; border-radius:4px; padding:2px 10px; margin-bottom:14px; }
.guide .tip {
  background:var(--card); border-left:3px solid var(--accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:12px 16px; margin:14px 0; font-size:.86rem; color:var(--text-sub); line-height:1.75;
}

/* ── FOOTER ── */
footer {
  text-align:center; padding:28px 20px;
  border-top:1px solid var(--border); color:var(--text-muted); font-size:.82rem; margin-top:20px;
}
footer a { color:var(--text-muted); margin:0 10px; transition:color .2s; }
footer a:hover { color:var(--accent); }
.footer-logo {
  font-size:1.1rem; font-weight:800; margin-bottom:8px;
  background:linear-gradient(135deg,var(--text),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  display:inline-block;
}
.footer-logo span { opacity:.6; font-weight:400; }

/* ── TOAST ── */
#toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(60px);
  background:var(--card); border:1px solid var(--border);
  color:var(--text); padding:10px 20px; border-radius:20px;
  font-size:.82rem; font-weight:500; opacity:0; transition:all .3s;
  pointer-events:none; z-index:9999;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── PAGE WRAP (about/contact/privacy) ── */
.page-wrap { max-width:720px; margin:0 auto; padding:48px 24px 80px; }
.page-wrap h1 { font-size:1.9rem; margin-bottom:10px; font-weight:800; }
.page-wrap h2 { font-size:1rem; margin:26px 0 8px; border-left:3px solid var(--accent); padding-left:12px; }
body[dir="rtl"] .page-wrap h2 { border-left:none; border-right:3px solid var(--accent); padding-left:0; padding-right:12px; }
.page-wrap p,.page-wrap li { line-height:1.85; color:var(--text-sub); margin-bottom:10px; font-size:.9rem; }
.page-wrap ul { padding-left:20px; }
.page-date { color:var(--text-muted); font-size:.82rem; margin-bottom:28px; }
.contact-box { border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-top:24px; background:var(--card); }
.email-link { font-size:1.2rem; font-weight:700; color:var(--accent); word-break:break-all; }

/* ── LANG GRID (index) ── */
.lang-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0 32px; }
.lang-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 14px; display:flex; align-items:center; gap:10px; cursor:pointer; transition:border-color .2s;
}
.lang-card:hover { border-color:var(--accent); }
.lang-name { font-size:.8rem; font-weight:500; color:var(--text); }
.lang-native { font-size:.7rem; color:var(--text-muted); }

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .dashboard-grid { grid-template-columns:1fr 1fr; }
  .content-grid { grid-template-columns:1fr 1fr; }
  .lang-grid { grid-template-columns:1fr 1fr; }
  .rg { grid-template-columns:1fr 1fr; }
  .pct-types { grid-template-columns:1fr; }
  nav { padding:0 14px; gap:6px; }
  .nav-calcs { display:none; }
}
@media(max-width:480px){
  .dashboard-grid { grid-template-columns:1fr 1fr; }
  .content-grid { grid-template-columns:1fr; }
  .cmp-grid { grid-template-columns:1fr; }
  .tips-grid { grid-template-columns:1fr; }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }


/* ═══════════════════════════════════════
   MOBILE OPTIMIZATION
   ═══════════════════════════════════════ */

/* ── nav 모바일 ── */
@media(max-width:768px){
  nav { padding:0 12px; height:52px; gap:4px; }
  .logo { font-size:1.2rem; }
  .theme-btn { font-size:11px; padding:5px 8px; }
  .lc { font-size:11px; padding:5px 8px; }
  .lc span:not(.fl):not(.arr) { display:none; }
}

/* ── 탭 모바일 ── */
@media(max-width:768px){
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: 4px;
    padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar { display:none; }
  .tab {
    flex-shrink: 0;
    font-size: 11px;
    padding: 8px 10px;
    white-space: nowrap;
  }
  .tab-icon { display:none; }
}

/* ── 계산기 레이아웃 모바일 ── */
@media(max-width:640px){
  .page-layout {
    grid-template-columns: 1fr !important;
  }
  .ci {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .inp {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
  }
  .out {
    border-radius: 0 0 var(--radius) var(--radius) !important;
  }
  .cf { margin: 0 !important; }
  .calc-wrap { padding: 8px 12px 16px; }
  .sec { padding: 12px 12px 0; }
  .ctitle { font-size: 14px; padding: 12px 14px; }
}

/* ── 결과 카드 모바일 ── */
@media(max-width:640px){
  .rg { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .rm { font-size: 24px !important; }
  .rv { font-size: 24px !important; }
  .sum-cards { grid-template-columns: 1fr 1fr !important; }
  .rc-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 빠른버튼 모바일 ── */
@media(max-width:640px){
  .qbtns { gap: 3px; }
  .qb {
    font-size: 11px;
    padding: 4px 7px;
  }
}

/* ── 히어로 모바일 ── */
@media(max-width:640px){
  .hero { padding: 24px 16px 12px; }
  .hero h1 { font-size: clamp(22px,6vw,32px); }
  .hero p { font-size: 13px; }
  .story { margin: 12px 12px 0; padding: 14px; }
  .badge { font-size: 11px; padding: 4px 12px; }
}

/* ── 대시보드 그리드 모바일 ── */
@media(max-width:640px){
  .dashboard-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
    padding: 0 12px;
  }
  .dash-card { padding: 14px 10px; }
  .dash-icon { font-size: 22px; }
  .dash-title { font-size: 12px; }
  .dash-desc { font-size: 10px; }
}

/* ── 가이드 섹션 모바일 ── */
@media(max-width:640px){
  .guide { padding: 20px 14px 40px; margin-top: 20px; }
  .guide h2 { font-size: 16px; }
  .guide h3 { font-size: 13px; }
  .guide p, .guide li { font-size: 13px; }
  .fml { font-size: 12px; padding: 10px 12px; }
  .tip { font-size: 12px; }
}

/* ── 인풋 모바일 ── */
@media(max-width:640px){
  .ig { padding: 14px 12px; }
  .il { font-size: 11px; }
  .if { font-size: 16px; padding: 10px 12px; }
  select.if { font-size: 14px; }
}

/* ── 퍼센트 계산기 탭 모바일 ── */
@media(max-width:640px){
  .pct-types {
    grid-template-columns: 1fr 1fr !important;
    gap: 5px;
  }
  .pc { font-size: 11px; padding: 7px 6px; }
}

/* ── 푸터 모바일 ── */
@media(max-width:640px){
  footer { font-size: 12px; padding: 16px 14px; }
  footer a { font-size: 11px; }
}

/* ── 공통 모바일 여백 ── */
@media(max-width:640px){
  .loan-layout { grid-template-columns: 1fr !important; }
  .result-row { grid-template-columns: 1fr !important; }
  .svc-grid { grid-template-columns: 1fr !important; }
  .input-row { grid-template-columns: 1fr !important; }
  .concept-grid { grid-template-columns: 1fr !important; }
  .how-grid { grid-template-columns: 1fr 1fr !important; }
  .tools-grid { grid-template-columns: 1fr 1fr !important; }
  .result-cards { grid-template-columns: 1fr 1fr !important; }
  .freq-result-grid { grid-template-columns: 1fr 1fr !important; }
  .r72-cards { grid-template-columns: repeat(4,1fr) !important; }
  .ctrl-row { flex-direction: column; }
  .etf-chips { gap: 4px; }
  .etf-chip { font-size: 11px; padding: 5px 9px; }
  .main-content { padding: 0 12px 40px; }
  .live-box { padding: 0 12px 14px; }
  .ctrl-box { padding: 0 12px 12px; }
}

/* ── 터치 친화적 버튼 ── */
@media(max-width:640px){
  .btn { min-height: 44px; font-size: 14px; }
  .copy-btn { min-height: 36px; }
  .rtab { min-height: 36px; }
}

/* ── 브레드크럼 모바일 ── */
@media(max-width:640px){
  .breadcrumb { font-size: 11px; padding: 6px 12px; }
}

/* ── 실시간 계산 힌트 ── */
@keyframes blink {
  0%,100% { opacity:1; }
  50% { opacity:.3; }
}