/* ============================================================
   챠글 스타일시트
   - PC: 3단 레이아웃 (종목 | 차트 | 호가·주문)
   - 모바일(≤720px): 세로 + 하단 탭바 + 바텀시트 주문
   ============================================================ */
:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2230; --line:#2a3340;
  --text:#e6edf3; --dim:#8b97a6;
  --up:#ff4d4f; --down:#3b82f6; --accent:#f0b429;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{margin:0;padding:0;box-sizing:border-box}
html, body{height:100%}
body{background:var(--bg);color:var(--text);font-family:-apple-system,'Segoe UI','Malgun Gothic',sans-serif;display:flex;flex-direction:column;overflow:hidden;-webkit-tap-highlight-color:transparent}

/* ── 상단바 ── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;border-bottom:1px solid var(--line);background:var(--panel);flex-shrink:0;gap:10px}
.brand{font-size:17px;font-weight:800;flex-shrink:0;display:flex;align-items:center;gap:6px}.brand span{color:var(--accent)}.brand-logo{height:22px;width:auto;display:block}
.mood{font-size:12px;color:var(--dim);flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 뉴스 티커 (상단바) */
.news-ticker{flex:1;display:flex;align-items:center;gap:8px;min-width:0;justify-content:center;cursor:pointer;padding:0 10px}
.news-new{background:var(--accent);color:#0d1117;font-size:9px;font-weight:800;padding:1px 5px;border-radius:4px;flex-shrink:0;letter-spacing:.5px}
.news-text{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s;cursor:pointer}
.news-text.up{color:var(--up)}.news-text.down{color:var(--down)}
/* 뉴스 피드 (홈) */
.news-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #1a1f27;cursor:pointer;font-size:13px}
.news-item:last-child{border-bottom:none}
.news-item:hover{background:var(--panel2)}
.news-icon{flex-shrink:0;width:18px;text-align:center;font-size:11px;font-weight:700}
.news-icon.up{color:var(--up)}.news-icon.down{color:var(--down)}.news-icon.flat{color:var(--dim)}
.news-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news-time{flex-shrink:0;font-size:11px;color:var(--dim)}
/* 시장 카드 (홈) */
.market-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.mkt-day{font-size:20px;font-weight:800}
.topright{display:flex;align-items:center;gap:12px;flex-shrink:0}
.mini{font-size:14px;font-weight:700}.mini small{color:var(--dim);font-weight:400;margin-right:6px}
.mini .pl{font-size:12px;margin-left:8px}
.authbtn{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.authbtn:hover{border-color:var(--accent)}

/* ── 탭바 (PC 상단) ── */
.tabbar{display:flex;border-bottom:1px solid var(--line);background:var(--panel);flex-shrink:0}
.tab{flex:1;text-align:center;padding:11px 0;font-size:14px;font-weight:600;color:var(--dim);cursor:pointer;border-bottom:2px solid transparent}
.tab.on{color:var(--text);border-bottom-color:var(--accent)}
.tab .tabicon{display:none}

.page{flex:1;overflow:hidden;display:none}
.page.on{display:flex}

/* ── 홈 ── */
#page-home{flex-direction:column;overflow-y:auto;padding:18px;gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.card h3{font-size:12px;color:var(--dim);margin-bottom:10px;font-weight:600}
.big{font-size:28px;font-weight:800}
.sub{font-size:13px;color:var(--dim);margin-top:4px}
.mrow{display:flex;justify-content:space-between;padding:7px 0;font-size:13px;border-bottom:1px solid #1a1f27;cursor:pointer}
.mrow:last-child{border-bottom:none}.mrow:hover{background:var(--panel2)}

/* ── 거래 ── */
#page-trade{flex-direction:row}
/* PC: detail-m = 헤더 + 본문(좌우분할) 세로 컨테이너 */
.detail-m{flex:1;display:flex;flex-direction:column;min-width:0}
.col-list{width:280px;flex-shrink:0;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--panel)}
/* 기능 탭 (전체/즐겨찾기/상승/하락) */
.func-tabs{display:flex;border-bottom:1px solid var(--line);flex-shrink:0}
.ftab{flex:1;text-align:center;padding:8px 4px;font-size:12px;color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.ftab.on{color:var(--accent);font-weight:700;border-bottom-color:var(--accent)}
/* 섹터 탭 */
.sector-tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--line);flex-shrink:0;scrollbar-width:none}
.sector-tabs::-webkit-scrollbar{display:none}
.stab{padding:9px 12px;font-size:12px;color:var(--dim);cursor:pointer;white-space:nowrap}
.stab.on{color:var(--accent);font-weight:700}
.slist{flex:1;overflow-y:auto}
.srow{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;border-bottom:1px solid #1a1f27}
.srow:hover{background:var(--panel2)}
.srow.active{background:var(--panel2);box-shadow:inset 3px 0 0 var(--accent)}
.fav-star{font-size:16px;color:#3a4250;cursor:pointer;flex-shrink:0;width:18px;text-align:center;transition:color .15s}
.fav-star.on{color:var(--accent)}
.fav-star:hover{color:var(--accent)}
.bdg{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#0d1117;background:var(--accent)}
.smeta{flex:1;min-width:0}
.snm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssub{font-size:11px;color:var(--dim)}
.sright{text-align:right;flex-shrink:0}
.sright .p{font-size:13px;font-weight:600}.sright .c{font-size:11px}
.dhead{padding:13px 20px 9px;border-bottom:1px solid var(--line);flex-shrink:0}
.dtop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dtop h2{font-size:18px;font-weight:700}
.dtop .price{font-size:23px;font-weight:800}
.dtop .chg{font-size:14px;font-weight:600}
.dlim{font-size:11px;color:var(--dim);margin-top:4px}
.tfbar{display:flex;gap:4px;padding:8px 20px;border-bottom:1px solid var(--line);flex-shrink:0}
.tfbtn{padding:5px 13px;font-size:12px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer}
.tfbtn.on{background:var(--panel2);color:var(--text);border-color:var(--accent)}
.chartbox{flex:1;position:relative;min-height:0;cursor:crosshair;overflow:hidden}
#chart{position:absolute;inset:0;width:100%;height:100%}
#liveBtn{position:absolute;right:12px;bottom:12px;display:none;background:var(--accent);color:#0d1117;border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}
/* 호가창 */
.obook{padding:10px 14px;border-bottom:1px solid var(--line)}
.obook h3{font-size:11px;color:var(--dim);margin-bottom:8px}
.orow{display:flex;align-items:center;height:24px;font-size:12px;cursor:pointer;position:relative;border-radius:4px}
.orow:hover{outline:1px solid var(--line)}
.orow .bar{position:absolute;top:2px;bottom:2px;border-radius:3px;opacity:.16}
.orow.ask .bar{right:50%;background:var(--down)}
.orow.bid .bar{left:50%;background:var(--up)}

.orow .pp{width:50%;text-align:left;padding-left:10px;z-index:1;font-weight:600}
.orow.ask .pp{color:var(--down)}
.orow.bid .pp{color:var(--up)}

/* 주문 패널 */
.opanel{padding:14px;border-bottom:1px solid var(--line)}
.modebar{display:flex;gap:6px;margin-bottom:12px}
.modebar button{flex:1;padding:10px 0;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--dim);font-size:14px;font-weight:700;cursor:pointer}
.modebar button.buy.on{background:var(--up);border-color:var(--up);color:#fff}
.modebar button.sell.on{background:var(--down);border-color:var(--down);color:#fff}
.frow{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.frow label{width:46px;font-size:12px;color:var(--dim);flex-shrink:0}
.frow input{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:10px;border-radius:8px;font-size:14px;text-align:right;min-width:0}
.pricewrap{flex:1;display:flex;gap:5px;min-width:0}
.pricewrap input{flex:1;min-width:0}
.stepbtns{display:flex;flex-direction:column;gap:2px}
.stepbtns button{background:var(--panel2);border:1px solid var(--line);color:var(--dim);width:30px;flex:1;border-radius:5px;cursor:pointer;font-size:9px;line-height:1;padding:0}
.stepbtns button:hover{color:var(--text);border-color:var(--accent)}
.anchor{font-size:11px;color:var(--dim);margin:-4px 0 9px 54px}
.qbtns{display:flex;gap:5px;margin-bottom:10px;padding-left:54px}
.qbtns button{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--dim);padding:6px 0;border-radius:6px;cursor:pointer;font-size:11px}
.qbtns button:hover{color:var(--text)}
.avail{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-bottom:5px}
.avail b{color:var(--text)}
.est{display:flex;justify-content:space-between;font-size:13px;margin-bottom:12px}
.est b{font-weight:800}
.submit{width:100%;padding:13px 0;border:none;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer;color:#fff}
.submit.buy{background:var(--up)}.submit.sell{background:var(--down)}
.submit:active{transform:scale(.98)}

.osec{padding:12px 14px;border-bottom:1px solid var(--line)}
.osec h3{font-size:11px;color:var(--dim);margin-bottom:8px}
.oitem{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:6px 0;border-bottom:1px solid #1a1f27}
.oitem button{background:none;border:1px solid var(--line);color:var(--dim);border-radius:5px;padding:2px 8px;cursor:pointer;font-size:11px}

/* ── 자산 ── */
#page-asset{flex-direction:column;overflow-y:auto;padding:18px;gap:14px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:right;color:var(--dim);font-weight:500;padding:7px 6px;border-bottom:1px solid var(--line);font-size:11px}
th:first-child, td:first-child{text-align:left}
td{text-align:right;padding:8px 6px;border-bottom:1px solid #1a1f27}

/* 보유종목 카드 (영웅문식) */
.hold-cards{display:flex;flex-direction:column;gap:8px}
.hold-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;cursor:pointer;transition:border-color .15s}
.hold-card:hover{border-color:var(--accent)}
.hc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:2px}
.hc-name{font-size:14px;font-weight:700;color:var(--text)}
.hc-lock{font-size:11px;color:var(--dim);font-weight:400;margin-left:6px}
.hc-right{text-align:right;white-space:nowrap}
.hc-eval{font-size:14px;font-weight:700;color:var(--text)}
.hc-pl{font-size:12px;font-weight:600;margin-top:1px}
.hc-qty{font-size:11px;color:var(--dim);margin-bottom:9px}
.hc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:8px;overflow:hidden}
.hc-cell{background:var(--panel);padding:7px 10px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.hc-k{font-size:11px;color:var(--dim)}
.hc-v{font-size:13px;font-weight:600;color:var(--text)}
.hold-empty{color:var(--dim);font-size:13px;padding:18px;text-align:center}
.trow{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px solid #1a1f27;color:var(--dim)}

/* ── 랭킹 ── */
#page-rank{flex-direction:column;overflow-y:auto;padding:18px;gap:14px}
.rrow{display:flex;align-items:center;gap:11px;padding:10px 6px;border-bottom:1px solid #1a1f27;font-size:14px}
.rnum{width:26px;text-align:center;font-weight:800;color:var(--dim);flex-shrink:0}
.rrow.top1 .rnum{color:var(--accent)}
.rrow.merow{background:var(--panel2);border-radius:8px}
.rdelta{font-size:11px;font-weight:700;width:34px;flex-shrink:0;text-align:center}
.ravatar{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.ravatar-bot{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:17px;flex-shrink:0}
.rname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bot-tag{font-size:10px;color:var(--dim);border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-left:6px}
.rasset{font-weight:700;text-align:right;flex-shrink:0}
.rasset .rday{display:block;font-size:11px;font-weight:600}

.share-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:13px}
.toggle{position:relative;width:44px;height:24px;background:var(--line);border-radius:12px;cursor:pointer;transition:background .2s;flex-shrink:0}
.toggle.on{background:var(--accent)}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:left .2s}
.toggle.on::after{left:22px}

/* ── 토스트 ── */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--up);color:#fff;padding:11px 20px;border-radius:10px;font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:200;max-width:90vw;text-align:center}
.toast.show{opacity:1}
.up{color:var(--up)}.down{color:var(--down)}.flat{color:var(--dim)}

/* ── 모달 (로그인 / 포트폴리오 보기) ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:150;padding:20px}
.modal-bg.on{display:flex}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;width:100%;max-width:380px;max-height:85vh;overflow-y:auto}
.modal h2{font-size:18px;margin-bottom:4px}
.modal .msub{font-size:12px;color:var(--dim);margin-bottom:18px}
.modal .x{float:right;font-size:20px;color:var(--dim);cursor:pointer;line-height:1}

.modal .primary{width:100%;padding:12px 0;border:none;border-radius:9px;background:var(--accent);color:#0d1117;font-weight:800;font-size:14px;cursor:pointer;margin-top:6px}
.modal .gbtn{width:100%;padding:11px 0;border:1px solid var(--line);border-radius:9px;background:#fff;color:#1f1f1f;font-weight:600;font-size:14px;cursor:pointer;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px}
.modal .kbtn{width:100%;padding:11px 0;border:none;border-radius:9px;background:#FEE500;color:#191600;font-weight:600;font-size:14px;cursor:pointer;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px}
.modal .kbtn:hover{filter:brightness(0.96)}
#kakaoBtnBox, #naverBtnBox{margin-top:0}
#naverIdLogin{margin-top:10px;display:flex;justify-content:center}
.divider{text-align:center;color:var(--dim);font-size:11px;margin:14px 0;position:relative}
.divider::before, .divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--line)}
.divider::before{left:0}.divider::after{right:0}
.pf-holding{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-bottom:1px solid #1a1f27}
.pf-holding .pname{flex:1}

.mobile-only{display:none}

/* ============================================================
   모바일 (≤720px)
   ============================================================ */
@media (max-width:720px){
  /* 상단바 압축 */
  .topbar{padding:9px 14px}
.brand{font-size:15px}
.mood{font-size:11px}
.mini{font-size:13px}
.mini small{display:none}
.mini .pl{font-size:11px;margin-left:4px}

/* PC 상단 탭바 → 숨기고 하단 탭바 사용 */
  .tabbar.desktop-tabs{display:none}

/* 페이지: 하단 탭바 공간 확보 */
  .page{padding-bottom:0}
#page-home, #page-asset, #page-rank{padding:14px;padding-bottom:calc(70px + var(--safe-bottom))}

/* 거래: 3단 → 세로 단일. 종목 리스트만 먼저 보임 */
  #page-trade{flex-direction:column;position:relative;height:100%;overflow:hidden}
.col-list{width:100%;border-right:none;border-bottom:none;flex:1;min-height:0;
            padding-bottom:calc(70px + var(--safe-bottom))}
.col-list.hidden-m{display:none}
/* 종목 목록(매머드전자 등)이 화면 넘으면 스크롤 */
  .col-list .slist{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* 종목 상세 오버레이: 모바일 전체화면, 단 하단 탭바(70px) 위에서 끝남 */
  .detail-m{display:none;position:absolute;top:0;left:0;right:0;
            bottom:calc(70px + var(--safe-bottom));
            background:var(--bg);z-index:20;
            flex-direction:column;overflow:hidden}
.detail-m.on{display:flex}

/* 탭 콘텐츠가 화면 채우게 (detailM이 이미 탭바 위에서 끝나므로 패딩 불필요) */
  .detail-m .dtab-body{ flex:1; min-height:0; }
.detail-m .dpane{ padding-bottom:8px; }

/* 모바일 탭 글자 약간 작게 */
  .dtab{ font-size:12px; padding:11px 2px; }

/* ── 모바일: 각 탭을 한 화면에 압축 (스크롤 없이) ── */
  /* 호가 탭: 호가 행이 영역을 균등 분배해서 채움 (스크롤 X) */
  #paneBook{ overflow:hidden; }

#paneBook #askRows, #paneBook #bidRows{
    flex:1; min-height:0; display:flex; flex-direction:column;
  }
#paneBook #askRows .orow, #paneBook #bidRows .orow{
    flex:1; min-height:0;   /* 행이 공간 나눠 가짐 */
  }

/* 매수매도 탭: 미니호가+주문폼+미체결이 한 화면에 (잘림 X) */
  #paneOrder{ overflow-y:auto; }
#paneOrder .minibook{ flex-shrink:0; padding:6px 12px; }
#paneOrder .minibook .orow{ font-size:11px; padding:1px 6px; }
#paneOrder .opanel{ flex-shrink:0; padding:8px 12px; }
#paneOrder .osec{ display:none; }/* 미체결은 자산 페이지에 있음 (매수매도 탭은 주문 집중) */
  #paneOrder .frow{ margin-bottom:5px; }
#paneOrder .qbtns{ display:flex; gap:4px; margin:5px 0; }
#paneOrder .qbtns button{ flex:1; padding:7px 0; font-size:12px; }
#paneOrder .submit{ padding:11px; font-size:15px; margin-top:4px; }

.detail-back{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel);flex-shrink:0;order:0;width:100%}
.detail-back .backbtn{font-size:18px;cursor:pointer;color:var(--text)}
.detail-back .dtitle{font-size:15px;font-weight:700;flex:1}

/* 하단 탭바 */
  .mobile-tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);z-index:100;padding-bottom:var(--safe-bottom)}
.mobile-tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border-bottom:none;font-size:10px}
.mobile-tabbar .tab.on{color:var(--accent);border-bottom:none}
.mobile-tabbar .tab .tabicon{display:block;font-size:19px}
.mobile-only{display:block}

/* 차트 높이 모바일 조정 */
  .chartbox{cursor:default}
.dhead{padding:11px 14px 8px}
.dtop .price{font-size:20px}
.tfbar{padding:7px 14px}

/* 모달 모바일 */
  .modal{max-width:100%;border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0;max-height:90vh;padding-bottom:calc(22px + var(--safe-bottom))}
.modal-bg{align-items:flex-end;padding:0}

/* 호가/주문 폰트 약간 키워 터치 친화 */
  .orow{height:28px;font-size:13px}
.submit{padding:15px 0;font-size:16px}
.qbtns button{padding:9px 0}
}

/* 데스크탑: 하단 탭바 숨김 */
@media (min-width:721px){
  .mobile-tabbar{display:none}
.detail-back{display:none}
}

/* ── 종목 정체성 (대섹터 › 서브섹터 + 설명) ── */
.d-identity{display:flex;flex-direction:column;gap:3px;margin:6px 0 4px}
.d-identity .d-sector{font-size:12px;color:var(--accent,#3b82f6);font-weight:600}
.d-identity .d-desc{font-size:12px;color:var(--dim);line-height:1.4}

/* ── 장마감 오버레이 ── */
.market-closed-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(10,12,20,0.92);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
}
.market-closed-overlay .mco-box{text-align:center;color:#e5e7eb;padding:32px;max-width:340px}
.market-closed-overlay .mco-moon{font-size:56px;margin-bottom:12px}
.market-closed-overlay h2{font-size:24px;margin:0 0 12px;color:#fff}
.market-closed-overlay p{font-size:14px;line-height:1.6;color:#9ca3af;margin:0 0 16px}
.market-closed-overlay .mco-until{font-size:13px;color:var(--accent,#3b82f6);font-weight:600}

/* 게임日 카운트다운 */
.mkt-countdown{font-size:12px;color:var(--dim);font-weight:normal}

.dm-body{padding:16px 18px}
.dm-price{margin-bottom:6px}
.dm-cur{font-size:24px;font-weight:800}
.dm-chg{font-size:14px;font-weight:700;margin-left:8px}
.dm-cur.up, .dm-chg.up{color:var(--up)}.dm-cur.down, .dm-chg.down{color:var(--down)}.dm-cur.flat, .dm-chg.flat{color:var(--dim)}
.dm-identity{font-size:12px;color:var(--accent);margin-bottom:8px;font-weight:600}
.dm-desc{font-size:13px;color:var(--dim);line-height:1.5;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.dm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px}
.dm-cell{background:var(--panel);padding:10px 12px}
.dm-k{font-size:11px;color:var(--dim);margin-bottom:3px}
.dm-v{font-size:14px;font-weight:700}
.dm-div{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:12px;color:var(--text);
}
.dm-div-tag{color:var(--accent);font-weight:700;margin-right:6px}

/* ── 용어 도움말 ? 아이콘 (툴팁) ── */
body.help-off .help-icon{display:none!important}
.help-toggle{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--dim);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin:6px 0 18px;cursor:pointer;line-height:1.55}
.help-toggle input{margin-top:3px;flex-shrink:0;cursor:pointer}
.guide-wrap{max-width:760px;margin:0 auto;width:100%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:30px}
.help-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:3px;
  border-radius:50%; background:var(--line,#2a3142); color:var(--dim,#8b93a7);
  font-size:10px; font-weight:700; line-height:1; cursor:help;
  vertical-align:middle; user-select:none; transition:background .12s,color .12s;
}
.help-icon:hover, .help-icon:focus{
  background:var(--accent,#5b9dff); color:#fff; outline:none;
}
.term-tip{ word-break:keep-all; }

/* ══════════════════════════════════════════ */
/*  거래 상세 UI — PC 2칸 / 모바일 4탭 분기      */
/* ══════════════════════════════════════════ */

/* 공통 탭 바 */
.dtabs{
  display:flex; border-bottom:1px solid var(--line); background:var(--panel);
  flex-shrink:0;
}
.dtab{
  flex:1; text-align:center; padding:12px 4px; font-size:13px; font-weight:600;
  color:var(--dim); cursor:pointer; border-bottom:2px solid transparent;
  transition:color .12s, border-color .12s; user-select:none; white-space:nowrap;
}
.dtab:hover{ color:var(--text); }
.dtab.on{ color:var(--accent); border-bottom-color:var(--accent); }

.dtab-body{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.dpane{ display:none; flex:1; min-height:0; overflow-y:auto; }
.dpane.on{ display:flex; flex-direction:column; }

#paneChart{ overflow:hidden; }
#paneChart .chartbox{ flex:1; min-height:0; }

#paneInfo{ padding:14px 18px; }

/* 미니 호가창 (모바일 매수매도 탭) */
.minibook{
  padding:10px 14px; border-bottom:1px solid var(--line); background:var(--panel2);
  flex-shrink:0;
}
.minibook-title{ font-size:10px; color:var(--dim); margin-bottom:4px; }
.minibook-rows{ display:flex; flex-direction:column; gap:1px; }
.minibook-cur{
  text-align:center; font-size:14px; font-weight:700; padding:3px 0; margin:2px 0;
  border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
}
.minibook .orow{ font-size:11px; padding:2px 6px; }

.pc-only{ display:block; }

/* ─────────── PC (≥861px): 종목선택↔상세 전환 + 4칸 [정보 9.5 / 차트 45 / 호가 24 / 매수 21] ─────────── */
@media (min-width:861px){
  /* col-list ↔ detail-m 전환 (모바일처럼: 종목 클릭 시 리스트 숨김, 뒤로가기로 복귀) */
  .col-list{ width:auto; flex:1; border-right:none; }
.col-list.hidden-m{ display:none; }
.detail-m{ flex-direction:column; display:none; }
.detail-m.on{ display:flex; flex:1; }

/* PC 뒤로가기 (종목 헤더 ‹) */
  .dback-pc{ display:inline-block; cursor:pointer; font-size:22px; color:var(--dim);
             margin-right:10px; line-height:1; user-select:none; }
.dback-pc:hover{ color:var(--text); }

/* 본문: 4칸 분할 [정보 9.5 / 차트 45 / 호가 24 / 매수 21] — 차트+호가 동시표시 */
  .detail-main{ flex:1; min-height:0; display:flex; flex-direction:row; }
/* 정보 칸 (좌, 세로 1열) */
  .detail-info{ flex:0 0 9.5%; min-width:0; border-right:1px solid var(--line);
                background:var(--panel); overflow-y:auto; padding:10px 10px; }
/* 중앙: 차트+호가를 탭 대신 나란히 (65:35) */
  .detail-left{ flex:0 0 69.5%; min-width:0; display:flex; flex-direction:column; }
.detail-left .dtabs{ display:none; }/* PC: 탭바 숨김 (동시표시라 불필요) */
  .detail-left .dtab-body{ display:flex; flex-direction:row; flex:1; min-height:0; }
#paneChart{ display:flex !important; flex:0 0 65%; min-width:0; flex-direction:column; }
#paneBook{ display:flex !important; flex:1; min-width:0; flex-direction:column;
             border-left:1px solid var(--line); overflow-y:auto; padding:0 4px 0 8px; }
/* 매수매도 (우, 항상 표시) */
  .detail-right{ flex:0 0 21%; flex-shrink:0; border-left:1px solid var(--line);
                 background:var(--panel); display:flex !important; flex-direction:column;
                 overflow-y:auto; }
/* PC에선 매수매도/정보 탭 버튼, 미니호가, 모바일 정보탭 숨김 */
  .dtab.mobile-only{ display:none; }
.minibook{ display:none; }
#paneInfo{ display:none !important; }
/* 호가 세로 확장 (전체 높이 활용, 스크롤은 넘칠 때만) */
  #paneBook .oba-asks, #paneBook .oba-bids{ height:auto; flex:1 1 0; min-height:60px; }
/* 호가밑 중복 정보테이블 제거 → 정보칸으로 흡수 (당일거래량·거래대금·고저·시즌·상하한) */
  #paneBook .oba-info{ display:none; }

/* 정보 칸: 세로 1열 (라벨 ─ 값) */
  .detail-info .dm-grid{ display:flex; flex-direction:column; gap:0; }
.detail-info .dm-cell{ flex-direction:row; align-items:center; justify-content:space-between;
                         padding:8px 2px; border-bottom:1px solid var(--line); }
.detail-info .dm-cell:last-child{ border-bottom:none; }
}

/* ─────────── 모바일 (≤860px): 4탭 (정보/차트/호가/매수매도) ─────────── */
@media (max-width:860px){
  .pc-only{ display:none !important; }/* 헤더의 정체성/상하한은 정보탭으로 */
  /* detail-main이 탭 영역 = 세로 */
  .detail-main{ flex:1; min-height:0; display:flex; flex-direction:column; }
.detail-left{ flex:1; min-height:0; display:flex; flex-direction:column; }
/* 매수매도는 탭 중 하나 (dpane 규칙 따름) */
  .detail-right{ width:auto; border-left:none; }
.detail-right.dpane{ display:none; }
.detail-right.dpane.on{ display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; }
/* 모바일 탭 글자 약간 작게 */
  .dtab{ font-size:12px; padding:11px 2px; }
/* paneOrder 안쪽 패딩 정리 */
  #paneOrder{ padding:0; }
}

/* ===== 호가 전체창 A안 ===== */
.obook-a{padding:4px 2px}
.oba-st{margin-bottom:9px}
.oba-st-top{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-bottom:3px}
.oba-st-top .up{color:var(--up);font-weight:700}
.oba-st-top .down{color:var(--down);font-weight:700}
.oba-st-bar{display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--line)}
.oba-st-buy{background:var(--up);opacity:.7}
.oba-st-sell{background:var(--down);opacity:.7}
.oba-st-lbl{display:flex;justify-content:space-between;font-size:9px;color:#5f6b7a;margin-top:2px}
.oba-asks, .oba-bids{height:130px;overflow-y:auto}
.oba-cur{display:flex;justify-content:center;align-items:baseline;gap:6px;padding:5px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);margin:3px 0}
.oba-cur-price{font-size:15px;font-weight:800}
.oba-cur-chg{font-size:11px;font-weight:600}
.oba-total{display:flex;justify-content:space-between;font-size:11px;margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}
.oba-total .up{color:var(--up);font-weight:600}
.oba-total .down{color:var(--down);font-weight:600}
.oba-info{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:8px;overflow:hidden;margin-top:9px}
.obi-cell{background:var(--panel);padding:6px 10px;display:flex;justify-content:space-between;gap:6px}
.obi-k{font-size:11px;color:var(--dim)}
.obi-v{font-size:12px;font-weight:600;color:var(--text)}
.orow-a{display:flex;align-items:center;height:24px;font-size:12px;cursor:pointer}
.orow-a:hover{background:var(--panel2)}
.ora-side{flex:1}
.ora-price{width:80px;text-align:center;font-weight:600;flex-shrink:0}
.ora-price.ask{color:var(--down)}
.ora-price.bid{color:var(--up)}
.ora-qty{flex:1;position:relative;display:flex;align-items:center;height:100%;overflow:hidden}
.ora-qty>span{position:relative;z-index:1;padding-left:9px;color:var(--dim)}
.ora-qty.right{justify-content:flex-end}
.ora-qty.right>span{padding-left:0;padding-right:9px}
.ora-bar{position:absolute;top:3px;bottom:3px;border-radius:3px;opacity:.16}
.ora-bar.ask{left:0;background:var(--down)}
.ora-bar.bid{right:0;background:var(--up)}

/* ===== 매수/매도 탭: 호가(좌 45) + 주문폼(우 55) ===== */
.order-split{display:flex;gap:9px;align-items:flex-start}
.order-split .minibook{width:44%;flex-shrink:0}
.order-split .opanel{flex:1;min-width:0}

.guide-body{overflow-y:auto;padding-right:6px;-webkit-overflow-scrolling:touch}
.guide-title{font-size:20px;font-weight:800;margin:0 0 14px}
.guide-lead{font-size:15px;margin:0 0 10px}
.guide-body h3{font-size:15px;color:var(--accent);margin:18px 0 7px;font-weight:700}
.guide-sec{border-bottom:1px solid var(--line)}
.guide-sec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:13px 2px;font-size:15px;font-weight:700;color:var(--accent);user-select:none}
.guide-sec>summary::-webkit-details-marker{display:none}
.guide-sec>summary::after{content:'▾';color:var(--dim);font-size:12px;transition:transform .2s;margin-left:10px}
.guide-sec[open]>summary::after{transform:rotate(180deg)}
.guide-sec[open]{padding-bottom:8px}
.guide-sec>summary+*{margin-top:2px}
.guide-body p{font-size:13.5px;line-height:1.75;color:var(--text);margin:0 0 9px}
.guide-body ul{margin:0 0 9px;padding-left:20px}
.guide-body li{font-size:13.5px;line-height:1.75;color:var(--text);margin-bottom:5px}
.guide-body b{color:#fff}
.guide-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13px}
.guide-table th, .guide-table td{border:1px solid var(--line);padding:7px 8px;text-align:center}
.guide-table th{color:var(--dim);font-weight:600;background:var(--panel2)}
.guide-table td:first-child{color:var(--dim)}

/* 미니 호가창 가격/잔량 분리 (class 불일치 수정) */
.orow .oprice{flex:1;text-align:left;padding-left:8px;z-index:1;font-weight:600;white-space:nowrap}
.orow .oqty{flex:1;text-align:right;padding-right:8px;z-index:1;color:var(--dim);white-space:nowrap}
.orow .obar{position:absolute;top:2px;bottom:2px;left:0;border-radius:3px;opacity:.16;z-index:0}
.orow.ask .obar{background:var(--down)}
.orow.bid .obar{background:var(--up)}
.orow.ask .oprice{color:var(--down)}
.orow.bid .oprice{color:var(--up)}
.guide-disclaimer{font-size:11.5px;color:var(--dim);margin-top:14px;padding-top:12px;border-top:1px solid var(--line);line-height:1.6}

.pe-row{ display:flex; align-items:center; gap:10px; }
.pe-label{ width:48px; color:var(--dim); font-size:13px; flex-shrink:0; }
.species-pick{ display:flex; gap:6px; }
.species-pick button{ background:var(--panel2); border:1px solid var(--line); border-radius:8px; width:38px; height:38px; font-size:20px; cursor:pointer; padding:0; transition:all .12s; }
.species-pick button:hover{ border-color:var(--accent); }
.species-pick button.on{ border-color:var(--accent); background:rgba(240,180,41,.15); box-shadow:0 0 0 1px var(--accent); }

.prof-save{ background:var(--accent); color:#1a1a1a; border:none; border-radius:8px; padding:9px; font-size:13px; font-weight:600; cursor:pointer; margin-top:2px; }
.prof-save:hover{ opacity:.9; }

/* 포폴 모달 안의 프로필 줄 */
.pf-profile{ display:flex; gap:8px; align-items:center; margin:6px 0 2px; color:var(--dim); font-size:13px; flex-wrap:wrap; }
.pf-profile .pf-sp{ width:42px; height:42px; object-fit:contain; vertical-align:middle; }
.species-pick button img{ width:32px; height:32px; object-fit:contain; display:block; }
.species-grid .sg-emoji img{ width:46px; height:46px; object-fit:contain; display:block; }
.pf-profile .pf-tag{ background:var(--panel2); border-radius:6px; padding:2px 8px; }

/* 종족 선택 모달 */
.species-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:14px 0; }
.species-grid button{ background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:12px 4px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; transition:all .12s; }
.species-grid button:hover{ border-color:var(--accent); }
.species-grid button.on{ border-color:var(--accent); background:rgba(240,180,41,.15); }
.species-grid .sg-emoji{ font-size:30px; }
.species-grid .sg-name{ font-size:12px; color:var(--text); }
@media(max-width:480px){.species-grid{ gap:5px; }.species-grid button{ padding:8px 2px; }.species-grid .sg-emoji{ font-size:24px; } }

/* 랭킹 닉네임 클릭 (프로필 보기) */
.rname-click{ cursor:pointer; }
.rname-click:hover{ color:var(--accent); text-decoration:underline; }

/* ── 약관 동의 · 푸터 · 약관 전문 ── */
.consent-row{display:flex;align-items:flex-start;gap:9px;padding:9px 2px;font-size:13.5px;line-height:1.5;cursor:pointer}
.consent-row input[type=checkbox]{margin-top:2px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--accent)}
.consent-row a{color:var(--accent);text-decoration:underline}
.consent-divider{height:1px;background:var(--line);margin:4px 0}
.consent-note{font-size:12px;color:var(--dim);margin-top:10px;text-align:center}
#consentSubmit:disabled{opacity:.45;cursor:not-allowed}
.legal-body{font-size:13px;line-height:1.7;color:var(--text)}
.legal-body h3{font-size:17px;margin:0 0 4px}
.legal-body h4{font-size:14px;margin:16px 0 4px;color:var(--accent)}
.legal-body p{margin:4px 0}
.legal-body .legal-meta{color:var(--dim);font-size:12px}
.site-footer{max-width:900px;margin:24px auto 0;padding:16px 18px calc(20px + var(--safe-bottom));border-top:1px solid var(--line);font-size:12px;color:var(--dim);display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;text-align:center}
.site-footer a{color:var(--dim);text-decoration:none}
.site-footer a:hover{color:var(--accent);text-decoration:underline}
.site-footer .foot-sep{opacity:.5}
.site-footer .foot-dim{opacity:.8}
/* 페이지 내부 푸터(홈/자산/랭킹 스크롤 맨 끝) — 스크롤을 끝까지 내려야 보임.
   이전엔 페이지 바깥에 있어 모든 화면 하단을 차지(보유 종목 등을 가림) → 페이지 내부로 이동. */
.site-footer.in-page{
  padding-top:24px;
  margin-top:20px;        /* 콘텐츠 끝난 뒤 자연스럽게 (짧으면 화면 아래로 밀려 스크롤해야 보임) */
}
@media(max-width:720px){
.site-footer{ font-size:11px; opacity:.72; margin-top:28px; }
.site-footer.in-page{ margin-top:28px; }   /* 모바일: 콘텐츠 끝 + 여백, 하단 탭바 위 gap은 페이지 padding-bottom이 확보 */
}

/* ── 온보딩(닉네임+종족) · 파산 · 친구랭킹 · 알림 ── */
.setup-row{display:flex;gap:8px;margin:12px 0 4px}
.setup-row input{flex:1;background:var(--panel2,#1a1f2e);color:var(--text);border:1px solid #2a3142;border-radius:8px;padding:10px;font-size:14px}
.setup-row button{padding:0 14px;background:#2a3142;color:#cdd7ea;border:1px solid #3a4358;border-radius:8px;cursor:pointer;white-space:nowrap}
.setup-hint{font-size:12px;color:var(--dim);margin:2px 0 10px;min-height:16px}
.setup-hint.ok{color:#3fb27f}
.setup-hint.bad{color:#e05b5b}
.setup-label{font-size:13px;font-weight:700;margin:8px 0 6px}
#setupSpecies button{background:var(--panel2,#1a1f2e);border:1px solid #2a3142;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;color:var(--text)}
#setupSpecies button img{width:38px;height:38px;object-fit:contain}
#setupSpecies button span{font-size:11px}
#setupSpecies button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.modal-sub-btn{width:100%;margin-top:8px;background:#2a3142;color:#9db4d8;border:1px solid #3a4358;border-radius:8px;padding:10px;cursor:pointer}
.bk-btn{margin-top:8px;padding:10px 18px;background:#4a1f24;color:#ff9b9b;border:1px solid #7a2f38;border-radius:8px;cursor:pointer;font-weight:700}
.bk-btn:disabled{opacity:.4;cursor:not-allowed}
.bk-warn{font-size:12.5px;line-height:1.6;color:#ffb4b4;background:#3a1a1f;border:1px solid #5a262e;border-radius:8px;padding:10px;margin-top:10px}
.bk-confirm{background:#7a2f38 !important}
.rank-tabs{display:flex;gap:6px;margin-bottom:10px}
.rtab{flex:1;padding:8px 0;background:var(--panel2,#1a1f2e);color:var(--dim);border:1px solid #2a3142;border-radius:8px;cursor:pointer;font-weight:700}
.rtab.on{color:var(--accent);border-color:var(--accent)}
.friend-search{display:flex;gap:8px;margin:8px 0}
.friend-search input{flex:1;background:var(--panel2,#1a1f2e);color:var(--text);border:1px solid #2a3142;border-radius:8px;padding:9px;font-size:13.5px}
.friend-search button{padding:0 14px;background:#2a3142;color:#cdd7ea;border:1px solid #3a4358;border-radius:8px;cursor:pointer}
.fr-period{display:flex;gap:6px;margin:10px 0 6px}
.fp{flex:1;padding:6px 0;font-size:12px;background:var(--panel2,#1a1f2e);color:var(--dim);border:1px solid #2a3142;border-radius:7px;cursor:pointer}
.fp.on{color:var(--accent);border-color:var(--accent)}
.fr-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13.5px}
.fr-row.me{background:rgba(212,175,55,.06);border-radius:6px}
.fr-rank{width:22px;text-align:center;font-weight:800;color:var(--accent)}
.fr-name{flex:1;font-weight:600}
.fr-bk{font-size:11px;color:#ff9b9b}
.fr-pct{font-weight:700}
.fs-card{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #2a3142;border-radius:8px;margin:4px 0 2px}
.fs-card .fr-name{flex:1}
.follow-btn{padding:9px 14px;background:var(--accent);color:#1a1408;border:none;border-radius:8px;cursor:pointer;font-weight:800;width:100%;margin:6px 0 10px}
.follow-btn.on{background:#2a3142;color:#9db4d8;border:1px solid #3a4358}
.follow-btn.mini{width:auto;margin:0;padding:7px 12px;font-size:12.5px}
.pf-meta{display:flex;gap:12px;font-size:12.5px;color:var(--dim);margin:2px 0 8px}
.pf-note{font-size:11.5px;color:var(--dim);padding:2px 0 6px}

.push-list{margin:8px 0;padding-left:4px;list-style:none;font-size:13px;line-height:2}

/* ── 헤더 유저 메뉴 드롭다운 ── */
.user-menu{position:relative;display:inline-block}
.user-dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel,#141824);border:1px solid #2a3142;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);min-width:160px;padding:6px;display:none;z-index:200}
.user-dropdown.on{display:block}
.user-dropdown button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:10px 12px;border-radius:7px;cursor:pointer;font-size:13.5px}
.user-dropdown button:hover{background:#1e2536}
/* ── 프로필 설정 모달 섹션 ── */
.pm-section{border-top:1px solid var(--line);padding:14px 0 4px;margin-top:4px}
.pm-section:first-of-type{border-top:none;padding-top:4px}
.pm-label{font-size:13px;font-weight:700;margin-bottom:8px;color:var(--text)}
.pm-apply{width:100%;margin-top:8px;padding:9px;background:var(--accent);color:#1a1408;border:none;border-radius:8px;font-weight:800;cursor:pointer}
.pm-apply:disabled{opacity:.4;cursor:not-allowed}
.pm-pending{margin-top:10px;padding:9px 11px;background:#1e2536;border:1px solid #2f3648;border-radius:8px;font-size:12.5px;color:#cdd7ea}
.pm-pending b{color:var(--accent)}
.pm-pending button{margin-left:8px;padding:4px 10px;background:#3a2028;color:#ff9b9b;border:1px solid #5a2e38;border-radius:6px;cursor:pointer;font-size:11.5px}
/* ── 렉스 환율 배너 (해외 탭) ── */
.fx-banner{padding:11px 13px;margin-bottom:8px;background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(212,175,55,.03));border:1px solid rgba(212,175,55,.25);border-radius:9px;font-size:13px;color:var(--text)}
.fx-banner b{color:var(--accent)}
.fx-banner .fx-sub{display:block;margin-top:3px;font-size:11px;color:var(--dim)}

.noti-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;font-size:13.5px;cursor:pointer}
.noti-row span{flex:1}
.noti-master{padding:14px 2px}
.noti-master b{font-size:14.5px}
.noti-divider{height:1px;background:var(--line);margin:2px 0}
.noti-switch{width:44px;height:24px;-webkit-appearance:none;appearance:none;background:#2a3142;border-radius:12px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.noti-switch:checked{background:var(--accent)}
.noti-switch::before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s}
.noti-switch:checked::before{left:23px}
.noti-switch:disabled{opacity:.4;cursor:not-allowed}
/* ── 해외주 환차손익 분리 표시 (보유 카드) ── */
.hc-fx{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;color:var(--dim)}
.hc-fx-item b{font-weight:600}
.hc-fx-item b.up{color:var(--up)}
.hc-fx-item b.down{color:var(--down)}
.hc-fx-rate{color:var(--dim);font-size:11px;width:100%}
/* 푸터 버전 표시 (별도 줄, 더 흐리게) */
.site-footer .foot-ver{width:100%;text-align:center;opacity:.5;font-size:11px;margin-top:2px}
.site-footer .foot-ver:empty{display:none}

/* ── 매매법 그리기 (8-A) ── */
.draw-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.draw-modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:98vw;height:96vh;max-width:1600px;display:flex;flex-direction:column;overflow:hidden}
.draw-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.draw-title{font-size:15px;font-weight:700}
.draw-x{background:none;border:none;color:var(--dim);font-size:16px;cursor:pointer;padding:4px 8px}
.draw-x:hover{color:var(--text)}
.draw-toolbar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--panel2)}
.draw-tools,.draw-colors,.draw-widths,.draw-actions{display:flex;align-items:center;gap:6px}
.draw-tool{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:15px;cursor:pointer;line-height:1}
.draw-tool.on{border-color:var(--accent);background:rgba(240,180,41,.15)}
.draw-color{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.draw-color.on{border-color:var(--text);box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--text)}
.draw-width{background:var(--panel);border:1px solid var(--line);border-radius:8px;width:34px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.draw-width.on{border-color:var(--accent)}
.draw-width span{background:var(--text);border-radius:50%;display:block}
.draw-btn{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--text);cursor:pointer}
.draw-btn:hover{border-color:var(--accent)}
.draw-canvas-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#0a0e14;padding:8px;overflow:auto;-webkit-overflow-scrolling:touch}
.draw-stage{position:relative;line-height:0}
.draw-stage .draw-bg{position:absolute;top:0;left:0;border-radius:6px}
.draw-canvas{position:relative;touch-action:none;cursor:crosshair;border-radius:6px;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.draw-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line);gap:12px}
.draw-hint{font-size:12px;color:var(--dim)}
.draw-save{background:var(--accent);color:#0d1117;border:none;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.draw-save:hover{filter:brightness(1.08)}
@media (max-width:640px){
  .draw-toolbar{gap:8px;padding:8px 10px}
  .draw-tool{padding:5px 8px;font-size:14px}
  .draw-color{width:20px;height:20px}
  .draw-hint{display:none}
  .draw-foot{padding:10px}
  .draw-canvas-wrap{align-items:flex-start;padding:4px}
}

/* 매매법 그리기 버튼 (tfbar 오른쪽) */
.drawbtn{margin-left:auto;padding:5px 13px;font-size:12px;border-radius:7px;border:1px solid var(--accent);background:rgba(240,180,41,.12);color:var(--accent);cursor:pointer;font-weight:600;white-space:nowrap}
.drawbtn:hover{background:rgba(240,180,41,.22)}
@media (max-width:640px){.drawbtn{padding:5px 10px;font-size:11px}}

/* ══════════ 매매법 갤러리 (v0.8) ══════════ */
#page-gallery{overflow-y:auto;-webkit-overflow-scrolling:touch}
#page-gallery.on{display:block}
#page-gallery .wrap{width:100%;max-width:1200px;margin:0 auto;padding:20px 24px calc(30px + var(--safe-bottom));box-sizing:border-box}
.gal-head{margin-bottom:16px}
.gal-title{font-size:20px;font-weight:800;margin:0 0 4px}
.gal-sub{font-size:13px;color:var(--dim)}
.gal-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.gal-sorts{display:flex;gap:6px}
.gal-sort{padding:7px 16px;font-size:13px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;font-weight:600}
.gal-sort.on{background:var(--panel2);color:var(--text);border-color:var(--accent)}
.gal-write{padding:8px 18px;font-size:13px;border-radius:8px;border:none;background:var(--accent);color:#0d1117;cursor:pointer;font-weight:700;white-space:nowrap}
.gal-write:hover{filter:brightness(1.08)}
/* 그리드 */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.gal-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .15s,transform .15s}
.gal-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.gal-card-thumb{aspect-ratio:16/10;background:#0a0e14;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
.gal-card-thumb img{width:100%;height:100%;object-fit:cover}
.gal-card-ph{font-size:32px;opacity:.3}
.gal-card-body{padding:12px}
.gal-card-title{font-size:14px;font-weight:700;cursor:pointer;margin-bottom:6px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gal-card-title:hover{color:var(--accent)}
.gal-card-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-bottom:8px}
.gal-card-stats{display:flex;align-items:center;gap:12px}
.gal-like-btn{background:none;border:none;color:var(--dim);font-size:13px;cursor:pointer;padding:2px 4px;display:flex;align-items:center;gap:4px}
.gal-like-btn.on{color:var(--up)}
.gal-comment-c{font-size:12px;color:var(--dim)}
.gal-empty{text-align:center;padding:60px 20px;color:var(--dim)}
.gal-empty-sub{font-size:13px;margin-top:8px;opacity:.8}
.gal-pager{display:flex;gap:5px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.gal-pg{width:32px;height:32px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;font-size:12px}
.gal-pg.on{background:var(--accent);color:#0d1117;border-color:var(--accent)}
/* 모달 공통 */
.gal-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:9998;display:none;align-items:center;justify-content:center;padding:16px}
.gal-modal-bg.on{display:flex}
.gal-modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(720px,96vw);max-height:92vh;overflow:auto;position:relative}
.gal-x{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.4);border:none;color:var(--text);font-size:15px;cursor:pointer;width:30px;height:30px;border-radius:50%;z-index:2}
.gal-x:hover{background:rgba(0,0,0,.7)}
/* 상세 */
.gd-img{background:#0a0e14;text-align:center}
.gd-img img{max-width:100%;max-height:420px;display:block;margin:0 auto}
.gd-noimg{padding:60px;color:var(--dim)}
.gd-info{padding:18px}
.gd-title{font-size:18px;font-weight:800;margin:0 0 8px}
.gd-meta{display:flex;gap:12px;font-size:12px;color:var(--dim);margin-bottom:12px}
.gd-nick{font-weight:600;color:var(--text)}
.gd-body{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:16px;white-space:pre-wrap;word-break:break-word}
.gd-actions{display:flex;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.gd-like{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 16px;color:var(--text);cursor:pointer;font-size:13px;font-weight:600}
.gd-like.on{color:var(--up);border-color:var(--up)}
.gd-report,.gd-delete{background:none;border:1px solid var(--line);border-radius:8px;padding:8px 14px;color:var(--dim);cursor:pointer;font-size:13px}
.gd-report:hover{color:var(--up);border-color:var(--up)}
.gd-delete:hover{color:var(--up)}
/* 댓글 */
.gd-comments-title{font-size:14px;font-weight:700;margin-bottom:12px}
.gd-comment-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.gd-comment{display:flex;align-items:baseline;gap:8px;font-size:13px;flex-wrap:wrap}
.gd-c-nick{font-weight:700;color:var(--accent);flex-shrink:0}
.gd-c-body{color:var(--text);word-break:break-word;flex:1}
.gd-c-time{font-size:11px;color:var(--dim);flex-shrink:0}
.gd-c-del{background:none;border:none;color:var(--dim);cursor:pointer;font-size:11px}
.gd-no-comment{font-size:13px;color:var(--dim);text-align:center;padding:12px}
.gd-comment-write{display:flex;gap:8px}
.gd-comment-write input{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--text);font-size:13px}
.gd-comment-write button{background:var(--accent);color:#0d1117;border:none;border-radius:8px;padding:0 18px;font-weight:700;cursor:pointer;font-size:13px}
/* 작성 모달 */
.gal-write-modal{width:min(560px,96vw)}
.gal-write-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);font-weight:700}
.gal-write-body{padding:18px}
.gal-write-img{aspect-ratio:16/10;background:#0a0e14;border-radius:10px;overflow:hidden;margin-bottom:14px;display:flex;align-items:center;justify-content:center}
.gal-write-img img{width:100%;height:100%;object-fit:contain}
.gal-write-noimg{text-align:center;color:var(--dim);padding:20px}
.gal-write-hint{font-size:12px;margin-top:8px;line-height:1.5}
.gal-goto-draw{margin-top:14px;background:var(--accent);color:#0d1117;border:none;border-radius:8px;padding:9px 18px;font-weight:700;cursor:pointer;font-size:13px}
.gal-input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:11px 14px;color:var(--text);font-size:14px;margin-bottom:10px;box-sizing:border-box}
.gal-textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:11px 14px;color:var(--text);font-size:14px;min-height:90px;resize:vertical;box-sizing:border-box;font-family:inherit}
.gal-write-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px}
.gal-write-count{font-size:12px;color:var(--dim)}
.gal-submit{background:var(--accent);color:#0d1117;border:none;border-radius:8px;padding:10px 22px;font-weight:700;cursor:pointer;font-size:14px}
.gal-submit:disabled{opacity:.4;cursor:not-allowed}
.draw-foot-btns{display:flex;gap:8px}
.draw-upload{background:var(--up);color:#fff;border:none;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.draw-upload:hover{filter:brightness(1.08)}
@media (max-width:640px){
  .gal-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .gd-actions{gap:6px}
}

/* ── 칭호 (v0.8-D) ── */
.rtitle{font-size:11px;font-weight:700;margin-right:2px}
.title-pick{display:flex;flex-wrap:wrap;gap:8px}
.title-empty{font-size:12px;color:var(--dim);line-height:1.5;padding:4px 0}
.title-chip{padding:7px 14px;border-radius:20px;border:1.5px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;font-size:12px;font-weight:600;transition:all .12s}
.title-chip:hover{filter:brightness(1.15)}
.title-chip.on{background:rgba(255,255,255,.08);box-shadow:0 0 0 2px currentColor inset}

/* 프로필 나이대/성별 버튼 선택형 (v0.84) */
.pe-row-col{flex-direction:column;align-items:flex-start;gap:8px}
.pe-pick{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.pe-pick button{padding:7px 14px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;font-size:13px;font-weight:600;transition:all .12s}
.pe-pick button:hover{border-color:var(--accent)}
.pe-pick button.on{background:rgba(240,180,41,.15);border-color:var(--accent);color:var(--text)}

/* 갤러리 상세 케밥 메뉴 + 다시 그리기 (v0.84) */
.gd-topbar{position:absolute;top:12px;right:52px;z-index:3}
.gd-kebab{background:rgba(0,0,0,.5);border:none;color:var(--text);font-size:18px;cursor:pointer;width:30px;height:30px;border-radius:50%;line-height:1}
.gd-kebab:hover{background:rgba(0,0,0,.75)}
.gd-menu{position:absolute;top:36px;right:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:none;min-width:110px;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.gd-menu.on{display:block}
.gd-menu-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:11px 16px;cursor:pointer;font-size:13px;white-space:nowrap}
.gd-menu-item:hover{background:var(--panel2)}
.gd-menu-report:hover{color:var(--up)}
.gal-redraw{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--text);cursor:pointer;font-size:13px;font-weight:600;margin-bottom:12px}
.gal-redraw:hover{border-color:var(--accent)}

/* 갤러리 검색 + 수정폼 + 프로필 매매법 버튼 (v0.85) */
.gal-search-bar{display:flex;gap:8px;margin-bottom:16px;align-items:center}
.gal-search-input{flex:1;padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:14px}
.gal-search-input:focus{outline:none;border-color:var(--accent)}
.gal-search-btn{padding:9px 18px;border-radius:8px;border:none;background:var(--accent);color:#1a1205;font-weight:700;cursor:pointer;font-size:14px}
.gal-search-clear{padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;font-size:13px}
.gal-search-clear:hover{border-color:var(--accent);color:var(--text)}
.gd-edit-note{font-size:12px;color:var(--dim);margin-bottom:10px;padding:8px 12px;background:var(--panel2);border-radius:8px}
.gd-edit-btns{display:flex;gap:8px;margin-top:12px}
.gal-cancel-btn{padding:10px 20px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;font-size:14px;font-weight:600}
.gal-cancel-btn:hover{border-color:var(--accent);color:var(--text)}
.pf-gallery-btn{width:100%;padding:10px;margin:8px 0;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);cursor:pointer;font-size:14px;font-weight:600}
.pf-gallery-btn:hover{border-color:var(--accent)}

/* 인앱 브라우저 안내 (카카오톡 등에서 구글 로그인 차단 대응) (v0.85) */
.inapp-box{background:var(--panel2);border:1px solid var(--accent);border-radius:12px;padding:16px;margin:8px 0}
.inapp-title{font-size:15px;font-weight:700;color:var(--accent);margin-bottom:8px}
.inapp-desc{font-size:13px;color:var(--text);line-height:1.6;margin-bottom:12px}
.inapp-url-row{display:flex;gap:6px;margin-bottom:10px}
.inapp-url{flex:1;padding:8px 10px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--dim);font-size:12px}
.inapp-copy{padding:8px 16px;border-radius:6px;border:none;background:var(--accent);color:#1a1205;font-weight:700;cursor:pointer;font-size:13px;white-space:nowrap}
.inapp-hint{font-size:11px;color:var(--dim);line-height:1.5}