:root{
  --paper:#ece9e1; --card:#faf8f2; --ink:#181712; --ink-soft:#2c2a22;
  --amber:#ffb300; --amber-d:#d99700;
  --up:#d92b1f; --down:#1763c9; --muted:#6f6a59; --line:#d9d5c9; --line2:#c6c1b3;
  --shadow:4px 4px 0 rgba(24,23,18,.10); --shadow-sm:2px 2px 0 rgba(24,23,18,.10);
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Apple SD Gothic Neo",Pretendard,"Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
  background-image:radial-gradient(rgba(24,23,18,.035) 1px,transparent 1px);background-size:22px 22px}
.wrap{max-width:1200px;margin:0 auto;padding:16px 16px 40px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--muted)}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:2px}
button{font-family:inherit}

/* ── HERO ── */
.hero{position:relative;background:var(--ink);color:#f3efe6;border:1.6px solid var(--ink);border-radius:16px;
  padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow);overflow:hidden}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.hero .eyebrow{color:var(--amber)}
.hero-t{font-size:38px;font-weight:800;letter-spacing:-.025em;margin:5px 0 2px;line-height:1}
.hero-sub{margin:0;color:#bdb6a6;font-size:13px}
.hero-s{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink);background:var(--amber);
  border:1.6px solid var(--amber);border-radius:7px;padding:4px 9px;font-weight:700;box-shadow:2px 2px 0 rgba(0,0,0,.25)}
/* 시그니처: 실시간 지수 티커 테이프 */
.ticker{margin:16px -22px;padding:8px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tktrack{display:inline-flex;white-space:nowrap;will-change:transform;animation:tk 60s linear infinite}
.ticker:hover .tktrack{animation-play-state:paused}
.tk{font-family:var(--mono);font-size:12px;padding:0 16px;display:inline-flex;gap:7px;align-items:center;border-right:1px solid rgba(255,255,255,.08)}
.tk b{color:#9b9482;font-weight:500}
.tkv{font-variant-numeric:tabular-nums}
.ticker .up{color:#ff6f5e} .ticker .down{color:#5aa2ff} .ticker .flat{color:#bdb6a6}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 사용자 여정(실제 순서이므로 번호 사용) */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:8px;margin:14px 0 6px;padding:0;list-style:none}
.step{display:flex;gap:9px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:9px 11px}
.step-n{flex:none;width:22px;height:22px;border-radius:6px;background:var(--amber);color:var(--ink);font-family:var(--mono);
  font-weight:700;font-size:12px;display:grid;place-items:center}
.step b{font-size:12.5px;display:block;font-weight:700}
.step small{font-size:10.5px;color:#a59e8d}
.hero-n{margin:10px 0 0;font-size:11.5px;color:#a59e8d;line-height:1.55}
.hero-n b{color:var(--amber)}

/* ── 툴바 ── */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.brand{font-weight:800;font-size:18px;letter-spacing:-.01em}
.mkt{font-family:var(--mono);font-size:10px;letter-spacing:.05em;border:1.5px solid var(--line2);border-radius:6px;padding:2px 8px;margin-left:8px;color:var(--muted);white-space:nowrap}
.mkt.on{border-color:#1c6d3a;color:#1c6d3a;background:#eaf5ee}
.mkt.off{border-color:var(--line2);color:var(--muted);background:#f1ede3}
.tfbar{display:flex;gap:5px;padding:0 12px 4px;flex-wrap:wrap}
.tfb{border:1.5px solid var(--ink);border-radius:7px;padding:4px 11px;font-size:11.5px;font-weight:700;font-family:var(--mono);background:#f3f0e7;color:var(--muted);cursor:pointer}
.tfb.on{background:var(--ink);color:#f3efe6}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;border:1.5px solid var(--ink);border-radius:6px;padding:2px 7px;margin-left:7px;color:var(--muted)}
.top-btns{display:flex;gap:8px}
.ghost{border:1.6px solid var(--ink);border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:700;background:var(--card);
  color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;box-shadow:var(--shadow-sm);transition:transform .08s,box-shadow .08s}
.ghost:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(24,23,18,.12)}
.ghost:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(24,23,18,.12)}

/* ── 레이아웃 ── */
.grid{display:grid;grid-template-columns:310px minmax(0,1fr) 330px;gap:14px;align-items:start}
@media(max-width:1080px){.grid{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border:1.6px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-bottom:1.5px solid var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:#f3f0e7}
.card-h.with-tabs{padding:8px 9px;text-transform:none;letter-spacing:0}
.empty{padding:22px 16px;color:var(--muted);font-size:12.5px;text-align:center}
.hint{font-size:11px;color:var(--muted);margin:7px 2px 0;line-height:1.55}
.chip{font-family:var(--mono);font-size:10px;border:1.5px solid var(--line2);border-radius:6px;padding:1px 7px;color:var(--muted)}

/* 버튼 공통 */
.primary{width:100%;border:1.6px solid var(--ink);border-radius:10px;padding:11px;font-weight:800;font-size:14px;
  background:var(--amber);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .08s,box-shadow .08s}
.primary:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(24,23,18,.16)}
.primary:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(24,23,18,.16)}
.primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}
.primary.buy{background:var(--up);color:#fff;border-color:#a51e15}
.primary.sell{background:var(--down);color:#fff;border-color:#114a96}
.mini{border:1.5px solid var(--ink);border-radius:8px;padding:6px 12px;font-weight:700;font-size:11px;background:#f3f0e7;color:var(--ink);cursor:pointer}
.mini:hover{background:#ece8dd}
.mini.danger{background:#fff;color:var(--up);border-color:var(--up)}

/* ── 계정/로그인 ── */
.auth{display:flex;flex-direction:column;gap:9px;padding:15px}
.auth input{border:1.5px solid var(--ink);border-radius:9px;padding:10px 11px;font-size:13px;background:#fff;width:100%}
.auth input:focus{outline:none;border-color:var(--amber-d);box-shadow:0 0 0 3px rgba(255,179,0,.18)}
.agree{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:var(--muted);line-height:1.5;padding:0 15px}
.agree a{color:var(--ink);text-underline-offset:2px}
.me{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 15px 7px}
.me b{font-size:15px}
.me .sub{display:block;font-size:11px;color:var(--muted);font-family:var(--mono)}
.uidline{padding:0 15px 10px;font-size:11px;color:var(--muted);font-family:var(--mono)}
.profile{display:flex;flex-wrap:wrap;gap:7px;padding:0 15px 14px}
.profile input,.profile select{border:1.5px solid var(--ink);border-radius:8px;padding:8px 9px;font-size:12px;background:#fff;flex:1;min-width:90px}
.profile button{flex:none}
.verify-wait{padding:17px 15px;text-align:center}
.verify-wait b{font-size:15px}
.vw-icon{font-size:30px;line-height:1;margin-bottom:6px}
.verify-wait .hint{text-align:center}
.devcode{font-family:var(--mono);font-size:24px;font-weight:800;letter-spacing:8px;background:#fff;border:1.6px solid var(--ink);
  border-radius:10px;padding:11px;text-align:center;margin:10px 0;box-shadow:var(--shadow-sm)}

/* ── 시장 목록 / 탭 ── */
.market{max-height:560px;overflow:auto}
.asset-tabs{display:flex;gap:6px}
.asset-tab{flex:1;border:1.5px solid var(--ink);border-radius:8px;padding:7px 10px;font-size:12px;font-weight:700;
  background:#f3f0e7;color:var(--muted);cursor:pointer}
.asset-tab.on{background:var(--ink);color:#f3efe6}
.row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 14px;background:none;border:0;
  border-bottom:1.5px solid var(--line);cursor:pointer;transition:background .1s}
.row:hover{background:#f1ede3}
.row.active{background:#fff;box-shadow:inset 4px 0 0 var(--amber)}
.rn{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.rn b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.rp{text-align:right;display:flex;flex-direction:column;gap:1px;font-weight:700;font-family:var(--mono);white-space:nowrap}
.rc{font-size:10.5px;font-weight:500}

/* 캐릭터 이미지 슬롯 (없으면 첫 글자) */
.cthumb{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;background:#e7e3d8;
  border:1.5px solid var(--ink);overflow:hidden;color:var(--ink);font-weight:800;line-height:1}
.cthumb::after{content:attr(data-i);opacity:.45}
.cthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.cthumb.sm{width:36px;height:36px;border-radius:8px;font-size:15px}
.cthumb.lg{width:70px;height:92px;border-radius:11px;font-size:32px;box-shadow:var(--shadow-sm)}

/* ── 선택 종목 / 차트 ── */
.sel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 17px}
.sel-id{display:flex;gap:13px;align-items:center}
.sel-name{font-size:20px;font-weight:800;letter-spacing:-.01em}
.sel-px{text-align:right;white-space:nowrap}
.big{font-size:28px;font-weight:800;font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1}
.unit{font-size:11px;color:var(--muted);margin-left:4px}
.bigchg{font-family:var(--mono);font-size:12.5px;font-weight:600;margin-top:3px}
.chart{padding:4px 12px 16px}
.chart svg{display:block;border-radius:8px}

/* ── 주문 ── */
.tabs2{display:flex;border-bottom:1.5px solid var(--ink)}
.tabs2 button{flex:1;border:0;background:none;padding:12px;font-weight:800;font-size:13.5px;color:var(--muted);cursor:pointer}
#tabBuy.on{color:var(--up);box-shadow:inset 0 -3px 0 var(--up)}
#tabSell.on{color:var(--down);box-shadow:inset 0 -3px 0 var(--down)}
.order{padding:15px}
.order>label{font-size:11px;color:var(--muted);font-weight:600}
.order input{width:100%;border:1.5px solid var(--ink);border-radius:9px;padding:10px 11px;font-size:16px;text-align:right;
  font-family:var(--mono);margin-top:5px;background:#fff}
.order input:focus{outline:none;border-color:var(--amber-d);box-shadow:0 0 0 3px rgba(255,179,0,.18)}
.quick{display:flex;gap:6px;margin:9px 0}
.qbtn{flex:1;border:1.5px solid var(--ink);border-radius:8px;padding:7px;font-size:11px;font-weight:700;background:#f3f0e7;cursor:pointer}
.qbtn:hover{background:#ece8dd}
.sumline{display:flex;justify-content:space-between;align-items:center;margin:11px 0;font-size:12px;color:var(--muted)}
.sumline b{font-family:var(--mono);font-size:16px;color:var(--ink)}

/* ── 계좌/보유/체결 ── */
.acct{display:flex;flex-direction:column;gap:11px;padding:15px}
.acct>div{display:flex;justify-content:space-between;align-items:baseline}
.acct .k{font-size:11px;color:var(--muted)}
.acct b{font-size:18px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.hold{display:flex;justify-content:space-between;gap:10px;padding:11px 15px;border-bottom:1.5px solid var(--line);font-size:12px}
.hold .hn b{font-size:13px}
.hold .hn span{display:block;font-size:10px;color:var(--muted);font-family:var(--mono);margin-top:1px}
.hr{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.ordrow{display:flex;justify-content:space-between;gap:8px;padding:9px 15px;border-bottom:1.5px solid var(--line);font-size:11px;font-family:var(--mono)}

/* ── 모달 ── */
.modal{position:fixed;inset:0;background:rgba(24,23,18,.5);display:none;align-items:center;justify-content:center;z-index:60;padding:16px;
  backdrop-filter:blur(2px)}
.modal.show{display:flex;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--card);border:1.6px solid var(--ink);border-radius:16px;width:100%;max-width:440px;box-shadow:6px 6px 0 rgba(24,23,18,.22)}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1.5px solid var(--ink);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}

/* 랭킹 */
.lb{max-height:62vh;overflow:auto}
.lbrow{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:11px 16px;border-bottom:1.5px solid var(--line)}
.lbrow:first-child span:first-child{color:var(--amber-d);font-weight:800}
.lbrow.mine{background:#fff8e6;font-weight:700;box-shadow:inset 4px 0 0 var(--amber)}
.lbrow .mono{font-variant-numeric:tabular-nums}

/* 퀘스트 */
.qbody{max-height:74vh;overflow:auto;padding:15px}
.share-box{border:1.6px solid var(--ink);border-radius:12px;padding:14px;margin-bottom:13px;background:#fff8e6;box-shadow:var(--shadow-sm)}
.sb-title{font-weight:800;font-size:14px;margin-bottom:3px}
.reflink{display:flex;gap:6px;margin:9px 0}
.reflink input{flex:1;min-width:0;border:1.5px solid var(--ink);border-radius:8px;padding:8px 9px;font-size:11px;font-family:var(--mono);background:#fff}
.share-btns{display:flex;gap:6px;flex-wrap:wrap}
.sbtn{border:1.5px solid var(--ink);border-radius:8px;padding:8px 13px;font-size:12px;font-weight:700;cursor:pointer;color:#fff;box-shadow:var(--shadow-sm)}
.sbtn.x,.sbtn.th{background:#15110c;border-color:#000} .sbtn.cp{background:var(--muted)}
.qlist{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.qrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-bottom:1.5px solid var(--line);background:var(--card)}
.qrow:last-child{border-bottom:0}
.qinfo{display:flex;flex-direction:column;gap:2px}
.qinfo b{font-size:13px}
.qd{font-size:11px;color:var(--muted)}
.qclaim{border:1.5px solid var(--ink);border-radius:8px;padding:8px 13px;font-size:12px;font-weight:800;background:var(--amber);cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm)}
.qclaim.done{background:#efece3;color:var(--muted);cursor:default;box-shadow:none}

/* 관리(데모) */
.adf{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:11px}
@media(max-width:680px){.adf{grid-template-columns:repeat(2,1fr)}}
.adf .f{display:flex;flex-direction:column;gap:3px}
.adf label{font-size:10.5px;color:var(--muted);font-weight:600}
.adf input,.adf select{border:1.5px solid var(--ink);border-radius:8px;padding:8px;font-size:12.5px;background:#fff;width:100%}
.adf input:read-only{background:#efece3;color:var(--muted)}
.adbar{display:flex;gap:8px;align-items:center;margin-bottom:11px}
.adbar .preview{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.adbar .preview b{font-size:16px;color:var(--ink)}
.btn-primary{border:1.6px solid var(--ink);border-radius:9px;padding:8px 17px;font-weight:800;font-size:13px;background:var(--amber);cursor:pointer;box-shadow:var(--shadow-sm)}
.adwrap{max-height:38vh;overflow:auto;border:1.5px solid var(--line);border-radius:10px}
.adtbl{width:100%;border-collapse:collapse;font-size:12px}
.adtbl th,.adtbl td{padding:7px 9px;border-bottom:1.5px solid var(--line);text-align:left;white-space:nowrap}
.adtbl th{background:#f3f0e7;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;position:sticky;top:0}
.adtbl .num{text-align:right;font-family:var(--mono)}

/* ── 토스트 ── */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(40px);opacity:0;background:var(--ink);color:#f3efe6;
  padding:11px 17px;border-radius:11px;font-size:13px;font-weight:600;transition:.25s;z-index:90;pointer-events:none;max-width:90vw;
  box-shadow:4px 4px 0 rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:#1c6d3a} .toast.warn{background:#9a3412}

/* ── 푸터 ── */
.foot{margin-top:18px;color:var(--muted);font-size:11px;line-height:1.65;text-align:center}
.footlinks{margin-bottom:6px}
.footlinks a{color:var(--ink);text-underline-offset:2px;margin:0 4px}

@media(max-width:520px){
  .hero-t{font-size:30px}
  .steps{grid-template-columns:1fr 1fr}
  .wrap{padding:12px 12px 32px}
}
@media (prefers-reduced-motion:reduce){
  .tktrack{animation:none}
  *{transition:none!important}
}