/* ============================================================
   MESPI 공용 디자인 토큰 + 컴포넌트  (v2 — "선명하게", 2026-08-03)
   라이트 테마 · 메이플 팬사이트 문법. v1 크림톤이 "허전하고 선명하지
   않다"(사용자)라 걷어냈다: 쿨그레이 페이지 배경 위에 흰 카드를 얹어
   층을 만들고, 테두리·그림자·채도를 끌어올렸다 (참고: 환산·매의깃).
   제목은 메이플스토리체(넥슨 무료 배포, fonts/ 셀프 호스팅 — CSP 안).
   데이터 영역(숫자·표·차트)은 정갈하게 — 신뢰감 우선.
   등락: 상승=빨강 / 하락=파랑 (한국 증시 관례)
   캔들: 양봉 #e02617 / 음봉 #1565d8 (꼬리 없음 · 폭 0.8) ← 확정 계약
   외부 리소스 0 · 장식은 이모지/인라인 SVG/우리 프록시(/api/asset)
   ============================================================ */
@font-face{
  font-family:'Maplestory';
  src:url('fonts/Maplestory-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
:root{
  /* 색 토큰 — 쿨 뉴트럴 + 메이플 주황 */
  --bg:#eef1f6;              /* 페이지 배경 (카드가 떠 보이는 층) */
  --bg-elev:#ffffff;
  --surface:#ffffff;
  --surface-2:#f3f5f9;       /* 카드 내 옅은 톤 */
  --border:#dbe1eb;
  --border-strong:#b4c0d3;
  --text:#1d2739;
  --text-2:#4c586c;
  --muted:#7d8a9e;
  --accent:#f5820b;          /* 메이플 주황 */
  --accent-soft:#fff0de;
  --accent-2:#ffaf1b;        /* 노랑 (v1 #ffc233은 흰 배경에서 뭉개졌다) */
  --green:#22a04a;
  --green-soft:#e3f6e9;
  --up:#e02617;              /* 캔들 양봉 (확정 hex — 바꾸지 말 것) */
  --down:#1565d8;            /* 캔들 음봉 (확정 hex — 바꾸지 말 것) */
  --up-fg:#d92413;           /* 라이트 배경용 상승 텍스트 */
  --down-fg:#155fc9;         /* 라이트 배경용 하락 텍스트 */
  --flat-fg:#7d8a9e;
  --danger:#e03131;
  --ok:#2f9e44;
  /* 등급색 (게임 관례 — 텍스트·카드 악센트 공용) */
  --g-rare:#2563eb; --g-epic:#7c3aed; --g-unique:#ca8a04; --g-legend:#16a34a;
  /* 타이포 */
  --font-sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --font-title:'Maplestory',-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-num:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  /* 간격/라운드 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --radius:14px; --radius-sm:8px;
  --shadow:0 6px 18px rgba(22,34,58,.10);
  --shadow-soft:0 1px 3px rgba(22,34,58,.07);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:#d96e03}
button{font-family:inherit}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- 레이아웃 ---------- */
.container{max-width:1180px;margin:0 auto;padding:0 var(--sp-4)}
.page{padding:var(--sp-5) 0 72px}
.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.row{display:flex;gap:var(--sp-3);align-items:center}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}
.stack{display:flex;flex-direction:column;gap:var(--sp-2)}

/* ---------- 상단 내비 ---------- */
.topnav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--border);backdrop-filter:blur(6px);
  box-shadow:var(--shadow-soft);
}
.topnav-inner{display:flex;align-items:center;gap:var(--sp-4);height:54px}
.brand{display:flex;align-items:center;gap:7px;font-family:var(--font-title);
  font-weight:700;font-size:18px;color:var(--text);white-space:nowrap}
.brand .tick{font-size:19px}
.nav-links{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  padding:6px 11px;border-radius:99px;white-space:nowrap;
  color:var(--text-2);font-size:13px;font-weight:700;
}
.nav-links a:hover{background:var(--surface-2);color:var(--text)}
.nav-links a.active{background:var(--accent);color:#fff;font-weight:800;
  box-shadow:0 2px 6px rgba(245,130,11,.35)}
.nav-auth{display:flex;align-items:center;gap:var(--sp-2);white-space:nowrap}
.nav-balance{font-size:13px;font-weight:800;color:#c26102;white-space:nowrap}
.nav-balance.nav-mil{color:var(--green)}
.nav-nick{font-size:13px;font-weight:700}

/* ---------- 카드/패널 ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 20px;
  box-shadow:var(--shadow-soft);
}
a.card{color:var(--text)}
a.card:hover{box-shadow:var(--shadow);border-color:var(--border-strong);color:var(--text)}
.card-title{font-size:13px;font-weight:800;color:var(--text);margin:0 0 var(--sp-3);
  display:flex;align-items:center;gap:6px}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--sp-3)}
.section{margin-top:var(--sp-5)}
.section-title{font-family:var(--font-title);font-size:17px;font-weight:700;
  margin:0 0 var(--sp-3);display:flex;align-items:center;gap:8px}
.section-title::before{content:"";width:4px;height:16px;border-radius:2px;
  background:var(--accent);flex:none}

/* ---------- 등락 색 ---------- */
.up{color:var(--up-fg)}
.down{color:var(--down-fg)}
.flat{color:var(--flat-fg)}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border-radius:99px;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);font-size:13px;font-weight:700;
  cursor:pointer;transition:filter .12s,background .12s,box-shadow .12s;white-space:nowrap;
}
.btn:hover{filter:brightness(.97);box-shadow:var(--shadow-soft)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 2px 8px rgba(245,130,11,.32)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-buy{background:var(--up);border-color:var(--up);color:#fff}
.btn-sell{background:var(--down);border-color:var(--down);color:#fff}
.btn-green{background:var(--green);border-color:var(--green);color:#fff}
.btn-ghost{background:transparent}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-glow{animation:glow 1.6s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(245,130,11,.45)}50%{box-shadow:0 0 0 8px rgba(245,130,11,0)}}

/* ---------- 뱃지/칩 ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;
  font-size:11px;font-weight:700;border:1px solid var(--border-strong);color:var(--text-2);
  background:var(--surface);white-space:nowrap}
.badge-up{color:var(--up-fg);border-color:rgba(224,38,23,.4);background:rgba(224,38,23,.06)}
.badge-down{color:var(--down-fg);border-color:rgba(21,101,216,.4);background:rgba(21,101,216,.06)}
.badge-flat{color:var(--flat-fg)}
.badge-new{color:#c26102;border-color:var(--accent-2);background:var(--accent-soft)}
.badge-cached{color:var(--ok);border-color:rgba(47,158,68,.4);background:var(--green-soft)}

/* ---------- 표 (데이터 영역 — 정갈하게) ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{color:var(--text-2);font-weight:800;text-align:left;padding:7px 10px;
  background:var(--surface-2);border-bottom:1px solid var(--border-strong);
  font-size:11.5px;white-space:nowrap}
.tbl th:first-child{border-radius:6px 0 0 0}
.tbl th:last-child{border-radius:0 6px 0 0}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--border)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .r{text-align:right}
.ellip{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 폼 ---------- */
.input,select.input{
  width:100%;padding:10px 13px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border-strong);background:var(--bg-elev);color:var(--text);
  font-size:14px;font-family:inherit;
}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,130,11,.18)}
.input.num{font-family:var(--font-num)}
label.lbl{font-size:12px;color:var(--text-2);font-weight:700}

/* ---------- 진행 표시 (오래 걸리는 작업) ----------
   넥슨에서 기록을 받아오는 건 캐릭터당 수십 콜이라 1분을 넘길 수 있다.
   가만히 있으면 **멈춘 줄 안다** → 진행 바·현재 대상·경과 시간을 다 보여준다. */
.prog{margin-top:12px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:13px 15px}
.prog-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:13px;font-weight:700;margin-bottom:8px}
.prog-head .t{font-family:var(--font-num);color:var(--muted);font-weight:700;font-size:12px}
.prog-bar{height:9px;border-radius:99px;background:var(--border);overflow:hidden;position:relative}
.prog-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  transition:width .45s cubic-bezier(.4,0,.2,1)}
/* 진행률을 모를 때(단일 요청 대기)는 흐르는 줄무늬로 "살아 있음"을 보인다 */
.prog-bar.indet i{width:100%;background:linear-gradient(90deg,
  var(--border) 0%,var(--accent) 40%,var(--accent-2) 60%,var(--border) 100%);
  background-size:220% 100%;animation:prog-flow 1.1s linear infinite}
@keyframes prog-flow{0%{background-position:120% 0}100%{background-position:-120% 0}}
.prog-now{margin-top:8px;font-size:12.5px;color:var(--text-2);display:flex;align-items:center;gap:7px}
.prog-now .dot{width:8px;height:8px;border-radius:99px;background:var(--accent);flex:none;
  animation:prog-pulse 1s ease-in-out infinite}
@keyframes prog-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.prog-list{margin-top:9px;display:flex;flex-wrap:wrap;gap:5px}
.prog-chip{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;
  border:1px solid var(--border);background:var(--surface);color:var(--muted)}
.prog-chip.done{border-color:var(--ok);color:var(--ok);background:var(--green-soft)}
.prog-chip.now{border-color:var(--accent);color:#c26102;background:var(--accent-soft)}
.prog-chip.fail{border-color:var(--danger);color:var(--danger);background:#fff2f0}

/* ---------- 스켈레톤 ---------- */
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--radius-sm);color:transparent!important}
.skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skel-line{height:14px;margin:6px 0}
.skel-big{height:32px}

/* ---------- 흐르는 띠 (피드 티커) ---------- */
.marquee{overflow:hidden;white-space:nowrap;position:relative;
  border:1px solid var(--accent-2);border-radius:var(--radius);
  background:linear-gradient(0deg,var(--accent-soft),#fffdf7);padding:9px 0;
  box-shadow:var(--shadow-soft)}
.marquee-track{display:inline-block;animation:marquee 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-item{display:inline-flex;align-items:center;gap:6px;margin:0 22px;font-size:13px;color:#8a5a08}

/* ---------- 토스트 ---------- */
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#fff;border:1px solid var(--border-strong);color:var(--text);
  padding:10px 18px;border-radius:99px;font-size:13px;box-shadow:var(--shadow);
  animation:toast-in .18s ease-out;max-width:min(92vw,480px)}
.toast.err{border-color:var(--danger);color:#c0271c;background:#fff2f0}
.toast.ok{border-color:var(--ok);background:#f0faf2}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 빈/오류 상태 ---------- */
.empty{padding:36px 16px;text-align:center;color:var(--muted)}
.empty .big{font-size:30px;margin-bottom:8px}

/* ---------- 오프라인(샘플 데이터) 배지 ---------- */
.offline-pill{position:fixed;right:14px;bottom:14px;z-index:150;
  display:none;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;
  background:#fff;border:1px solid var(--accent-2);color:#c26102;
  font-size:12px;font-weight:800;box-shadow:var(--shadow);cursor:pointer}
.offline-pill.show{display:inline-flex}

/* ---------- 큰 숫자 표시 ---------- */
.stat-big{font-size:28px;font-weight:800;font-family:var(--font-num);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stat-sub{font-size:12px;color:var(--muted)}

/* ---------- 히어로 검색 ---------- */
.hero{padding:38px 0 24px;text-align:center}
.hero h1{font-family:var(--font-title);font-size:30px;font-weight:700;
  margin:0 0 18px;letter-spacing:-.01em}
.hero h1 .hl{color:var(--accent)}
.hero-form{display:flex;gap:8px;max-width:560px;margin:0 auto}
.hero-form .input{border-radius:99px;padding:13px 20px;font-size:15px;
  border:1.5px solid var(--border-strong);box-shadow:var(--shadow-soft)}
.hero-form .btn{padding:13px 24px;font-size:14px;flex-shrink:0}
.hero-sub{margin-top:10px;font-size:12.5px;color:var(--muted)}
.hero-sprite{height:64px;image-rendering:pixelated;margin-bottom:6px;
  filter:drop-shadow(0 4px 8px rgba(22,34,58,.15))}
@media(max-width:640px){
  .hero{padding:26px 0 16px}
  .hero h1{font-size:23px}
  .hero-form .btn{padding:13px 16px}
  .hero-sprite{height:52px}
}

/* ---------- 얇은 라이브 티커 ---------- */
.ticker{overflow:hidden;white-space:nowrap;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);background:var(--bg-elev);padding:7px 0}
.ticker-track{display:inline-block;animation:marquee 36s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:6px;margin:0 18px;font-size:12.5px;color:var(--text-2)}
.ticker-item b{color:var(--text)}
.ticker-sep{color:var(--border-strong);margin:0 2px}

/* ---------- 광고 레일 (환산식) ---------- */
.adlayout{display:grid;grid-template-columns:1fr minmax(0,1000px) 1fr;gap:24px;
  max-width:1640px;margin:0 auto;padding:0 16px;align-items:start}
.ad-rail{position:sticky;top:74px;display:flex;flex-direction:column;gap:16px;align-items:center}
.ad-rail.left{justify-self:end}
.ad-rail.right{justify-self:start}
.ad-box{width:160px;background:var(--surface-2);border:1px dashed var(--border-strong);
  border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em}
.ad-box.v{height:600px}
.ad-box.h{width:100%;max-width:728px;height:90px;margin:0 auto}
.ad-banner{display:none;padding:16px 16px 0}
@media(max-width:1279px){
  .adlayout{display:block;max-width:1000px}
  .ad-rail{display:none}
  .ad-banner{display:block}
}
@media(max-width:640px){
  .ad-box.h{height:60px}
}

/* ---------- 하이라이트 카드 (주식/환전/농사) ---------- */
.hi-card{display:flex;flex-direction:column;gap:8px;min-height:180px}
.hi-emoji{font-size:26px;line-height:1}
.hi-name{font-family:var(--font-title);font-size:15px;font-weight:700}
.hi-desc{font-size:12.5px;color:var(--text-2);flex:1}
.hi-card .btn{align-self:flex-start;margin-top:2px}

/* ---------- 반응형 (640px 이하 1열) ---------- */
@media(max-width:640px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .container{padding:0 var(--sp-3)}
  .card{padding:var(--sp-4)}
  .stat-big{font-size:22px}
  .nav-balance{display:none}
  .topnav-inner{height:50px;gap:var(--sp-2)}
}

/* ---------- 주문 패드 (주식·월드ETF·쌀마켓 공용) ----------
   세 화면이 같은 규칙으로 매수/매도를 받도록 스타일을 한곳에 둔다.
   (stock.html에만 있던 .ratio-row를 옮겨 온 것 — 화면마다 다른 버튼이 되지 않게) */
.ratio-row{display:flex;gap:6px;margin-top:8px}
.ratio-row .ratio{flex:1;border:1px solid var(--border-strong);background:var(--surface);
  border-radius:var(--radius-sm);padding:6px 0;font-size:12px;font-weight:700;
  color:var(--text-2);cursor:pointer}
.ratio-row .ratio:hover{background:var(--surface-2);color:var(--text)}
.ratio-row .ratio:disabled{opacity:.45;cursor:not-allowed}
/* 지정가/시장가 전환 — 호가창이 있는 쌀마켓에서만 쓴다 */
.kind-tabs{display:flex;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-strong)}
.kind-tabs button{flex:1;border:0;padding:8px 0;font-size:12.5px;font-weight:700;
  cursor:pointer;background:var(--surface-2);color:var(--muted)}
.kind-tabs button.on{background:var(--surface);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}

/* ---------- 종목 마크 (시세판·종목 상세 공용) ----------
   캐릭터는 아바타, 서버지수는 공식 월드 아이콘. 이모지 하나로는 종목이 구분되지 않는다
   (사용자 지적 2026-08-04). 두 이미지는 비율이 크게 다르므로 상자에 맞춰 넣는다 —
   아바타는 세로로 길고(96×96 중 인물은 위쪽), 월드 아이콘은 작은 정사각형이다.
   크게 쓴다 — 64px도 "너무 작다"(사용자 2026-08-05 재지적) → 목록 88 · 상세 144. */
.mk-ic{width:88px;height:88px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;font-size:40px;background:var(--surface-2);
  border:1px solid var(--border);overflow:hidden;padding:4px;flex:0 0 auto}
.mk-ic.world{background:var(--accent-soft);border-color:var(--accent-2)}
/* 캐릭터 아바타는 여백이 많은 96×96이라 꽉 채우려면 키워서 잘라야 한다 (명패와 같은 수법).
   월드 아이콘은 이미 꽉 찬 정사각형이라 그대로 담는다. */
.mk-ic img{max-width:100%;max-height:100%;object-fit:contain}
.mk-ic:not(.world) img{width:100%;height:100%;object-fit:cover;transform:scale(1.4);
  object-position:center 34%}
.mk-ic-lg{width:144px;height:144px;border-radius:24px;font-size:64px}

/* API 키 연결 상태 칩 — 가계부·메용등급에서 키 입력칸 대신 뜬다 */
.keychip{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:9px 12px;
  border:1px solid #8fd3a4;background:#f2faf4;border-radius:12px;font-size:13px}
.keychip-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#22a04a;
  box-shadow:0 0 0 3px rgba(34,160,74,.18)}
.keychip .btn{margin-left:auto}
.keychip .btn + .btn{margin-left:0}

/* 표본이 작은 서버지수 종목 경고 — 숨기지 않고 한계를 말해준다 (025) */
.thin-warn{color:#c25a02;font-weight:700}

/* ---------- 푸터 (넥슨 출처 명시 — API 약관 제6조④ 의무) ---------- */
.sitefoot{margin-top:56px;border-top:1px solid var(--border);background:var(--surface);
  padding:22px 0 30px}
.sitefoot-in{display:flex;flex-direction:column;gap:10px}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;font-size:13px}
.foot-links a{color:var(--text-2);font-weight:700}
.foot-links a:hover{color:var(--accent)}
.foot-note{font-size:12px;line-height:1.75;color:var(--muted)}
.foot-note b{color:var(--text-2)}