:root{color-scheme:dark;--bg:#07111d;--panel:#102033;--line:#2a516d;--muted:#a3bad0;--text:#f1f8ff;--red:#ff6978;--blue:#5caaff;--green:#20e69d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--jk-font-family);font-size:14px}button,input{font:inherit}main{max-width:600px;margin:auto;padding:18px 14px 70px}header,.brand,.summary,.section-title,.stockhead{display:flex;align-items:center;justify-content:space-between}.brand{gap:10px;min-width:0}.brand strong{font-size:17px;letter-spacing:.1px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.logo{width:43px;height:43px;display:grid;place-items:center;border:2px solid #07dcef;border-radius:12px;color:#ff5779;font-size:32px;flex-shrink:0}.status{font-size:11px;color:#e8ca72;white-space:nowrap;margin-left:5px}.status.ok{color:var(--green)}.status.bad{color:var(--red)}.summary{background:linear-gradient(130deg,#142c43,#0f2031);border:1px solid #35607d;border-radius:15px;margin:18px 0 16px;padding:17px 6px}.summary>div{flex:1;text-align:center;min-width:0;border-right:1px solid #385a70}.summary>div:last-child{border:0;flex:1.22}.summary label,.metricrow label{display:block;color:#acc5d9;font-size:11px;margin-bottom:7px}.summary strong{font-size:23px;font-variant-numeric:tabular-nums}.summary .clock{font-size:clamp(19px,5.1vw,28px);color:var(--green);font-weight:800;white-space:nowrap;letter-spacing:.2px}nav,.charttabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:13px}nav::-webkit-scrollbar{display:none}button{border:1px solid #345c7a;color:#c1d5e7;background:#12263a;padding:11px 15px;border-radius:10px;white-space:nowrap;cursor:pointer}nav button{min-width:47px;font-weight:700}button.selected{color:white;background:#104760;border-color:#03dcf2;box-shadow:inset 0 0 0 1px #03dcf270}.panel{background:#0b1928;border:1px solid #2b516c;border-radius:16px;overflow:hidden;margin-bottom:14px}.section-title{padding:16px 14px;border-bottom:1px solid #28465b;gap:10px}.section-title b{font-size:17px}.section-title small{color:var(--muted);font-size:10px}.stocks{padding:10px;min-height:105px}.stock{background:linear-gradient(130deg,#12293e,#0c1d2e);border:1px solid #367294;border-radius:15px;padding:14px 10px;margin-bottom:10px;cursor:pointer}.stock:last-child{margin-bottom:0}.stock:active,.stock:focus-visible{outline:2px solid #00d4ef;background:#1a344b}.stockhead{justify-content:flex-start;gap:8px;padding-bottom:12px;border-bottom:1px solid #31536a;min-width:0}.stage{font-size:12px;font-weight:900;flex-shrink:0;color:#16e8fe;border:2px solid currentColor;padding:6px 7px;border-radius:9px}.stage.pre2{color:#ffcb39}.stage.pre3{color:#ff647f}.identity{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;min-width:0;flex:1}.identity b{font-size:16px;white-space:nowrap}.identity span{color:var(--muted);font-size:11px}.stockhead small{font-size:10px;color:#b7ccdd;white-space:nowrap}.metricrow{display:grid;grid-template-columns:1fr 1fr 1.15fr 1.1fr .9fr;margin-top:12px;text-align:center}.metricrow>div{min-width:0;border-right:1px solid #33566e;padding:0 3px}.metricrow>div:last-child{border:0}.metricrow label{font-size:10px;margin-bottom:5px}.metricrow strong{font-size:clamp(11px,3.15vw,16px);font-weight:800;white-space:nowrap;letter-spacing:-.4px;font-variant-numeric:tabular-nums}.pos{color:var(--red)}.neg{color:var(--blue)}.placeholder{padding:35px 12px;color:var(--muted);text-align:center}.quick-panel{border:1px solid #345f7c;border-radius:16px;background:#11263b;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:14px 5px;gap:0;margin-bottom:14px}.quick-panel button{display:flex;align-items:center;justify-content:center;gap:9px;padding:5px 2px;border:0;background:transparent;border-right:1px solid #3a5c72;border-radius:0}.quick-panel button:last-child{border-right:0}.quick-panel span{background:#24435d;border-radius:8px;padding:6px 7px;color:#c3d9ea}.quick-panel b{font-size:20px}.chartpanel{padding-bottom:12px}.charttabs{padding:10px}.chartcontent{min-height:200px;padding:12px;color:var(--muted)}.chartcontent svg{width:100%;height:205px;display:block}.disclaimer{color:#718da3;font-size:10px;line-height:1.6}.modal{position:fixed;inset:0;display:grid;place-items:center;background:#02060ce8;padding:20px;z-index:20}.modal[hidden],[hidden]{display:none!important}.modalbody{padding:22px;width:min(400px,100%);background:#112337;border:1px solid #38617b;border-radius:14px}.modalbody h2{font-size:17px}.modalbody p{color:#a9c1d2;line-height:1.6}.modalbody input{width:100%;padding:13px;background:#05121f;border:1px solid #3b5f77;color:#fff;border-radius:8px;margin-bottom:12px}.modalbody button{width:100%;color:white;background:#17668b}@media(max-width:380px){main{padding-left:9px;padding-right:9px}.brand strong{font-size:14px}.brand small{font-size:10px}.logo{width:37px;height:37px}.stock{padding:12px 7px}.stockhead{gap:5px}.identity b{font-size:14px}.stockhead small{font-size:9px}.metricrow strong{font-size:11px}.summary .clock{font-size:18px}.quick-panel button{gap:4px}.quick-panel b{font-size:17px}}

/* Mobile compact list V3: presentation only. PC 라보 정규 PRE stage 색과 동일. */
main{padding-top:11px;padding-bottom:55px}
header{gap:10px}.logo{width:36px;height:36px;font-size:25px;border-radius:10px}
.brand strong{font-size:15px}.brand small{font-size:10px;margin-top:3px}
.summary{margin:12px 0 12px;padding:9px 13px;border-radius:12px;justify-content:flex-start}
.summary>div{flex:none;border:0;display:flex;align-items:center;gap:18px;text-align:left}
.summary label{margin:0;font-size:12px}.summary strong{font-size:22px}
nav{padding-bottom:10px;gap:6px}nav button{padding:10px 12px;border-radius:9px}
.section-title{padding:11px 12px}.section-title b{font-size:16px}.section-title small{font-size:10px;text-align:right}
.stocks{padding:6px;min-height:90px}
.stock{border-radius:10px;padding:9px 10px;margin-bottom:6px}
.stockhead{padding-bottom:7px;gap:7px;border-bottom:1px solid #29475c}
.identity b{font-size:14px}.identity span{font-size:10px}.stockhead small{font-size:10px}
.stage{font-size:11px;border-width:1px;padding:4px 5px;border-radius:5px;color:#65d7f0;border-color:#2c7b8e;background:#102c39}
.stage.pre1{color:#6cbdff;border-color:#34678a;background:#112c43}
.stage.pre2{color:#f5ce65;border-color:#80652a;background:#332b19}
.stage.pre3{color:#47e4ae;border-color:#20765d;background:#10382e}
.metricrow{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:8px}
.metricrow>div{padding:0 2px}.metricrow label{margin-bottom:4px;font-size:9px}
.metricrow strong{font-size:clamp(11px,3.0vw,15px);letter-spacing:-.3px}
.quick-panel{padding:8px 4px;border-radius:12px}
@media(max-width:380px){.stock{padding:8px 6px}.stockhead small{font-size:9px}.stage{font-size:10px;padding:3px 4px}.metricrow strong{font-size:11px}.identity b{font-size:13px}.section-title b{font-size:14px}}

/* PC 라보와 동일한 P 3-LED 등급, 색상 및 변화 플래시 */
.p-led-group{display:inline-flex;align-items:center;gap:3px;flex:none;white-space:nowrap;margin-left:auto}
.p-led-group b{font-size:10px;color:#c2d3e3;margin-right:2px}
.p-led{display:inline-block;width:5px;height:12px;border-radius:1px;background:#34445a;box-shadow:none;filter:none}
.p-led.good{background:#91ed9b;box-shadow:none}
.p-led.bad{background:#ff9292;box-shadow:none}
.p-led.unknown{background:#7c8794;box-shadow:none}
.p-led.off{background:#34445a;box-shadow:none}
.p-led.closed{background:#9b7cff;box-shadow:0 0 0 1px rgba(197,177,255,.14) inset}
/* LED는 평면 단색으로만 표시: 광택, 입체 그림자, 발광 필터 금지.
   신호 강도(1~3칸)와 점등 색상은 기존 app.js 계산을 그대로 사용한다.
   변화 알림은 색 밝기나 그림자가 아닌 투명도 변화만 사용한다. */
@keyframes pLedFlashUp{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes pLedFlashDown{0%,100%{opacity:1}50%{opacity:.3}}
.p-led.p-flash-up{animation:pLedFlashUp .45s ease-in-out 3}
.p-led.p-flash-down{animation:pLedFlashDown .45s ease-in-out 5}
@media(max-width:380px){.p-led-group{gap:2px}.p-led{width:4px;height:10px}}

/* 선택한 종목 바로 아래에 차트를 배치. 새 종목 선택 시 기존 차트는 이동. */
.stock.expanded{border-color:#00d4ef;margin-bottom:3px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
.stocks>.chartpanel{margin:0 0 10px;border-color:#287b9a;border-top:2px solid #00d4ef;border-radius:6px 6px 12px 12px;background:#0b1c2c}
.stocks>.chartpanel .section-title{padding:9px 11px}
.stocks>.chartpanel .section-title b{font-size:13px}
.stocks>.chartpanel .charttabs{padding:8px 10px 3px}
.stocks>.chartpanel .charttabs button{padding:7px 10px;font-size:12px}
.stocks>.chartpanel .chartcontent{padding:8px 10px;min-height:190px}
.stocks>.chartpanel .chartcontent svg{height:auto;min-height:180px}

/* V9: 포착 종목 오른쪽 정규장 진행 상황 (09:00~15:30, KST) */
.summary{gap:13px;align-items:center}
.summary>div:first-child{flex:0 0 auto;gap:9px}
.summary .market-progress{display:block;flex:1;min-width:0;text-align:left;border-left:1px solid #385a70;padding-left:12px}
.market-progress-head,.market-progress-foot{display:flex;justify-content:space-between;align-items:center;gap:5px;white-space:nowrap}
.market-progress-head{margin-bottom:6px;font-size:10px;color:#abc8dd}
.summary .market-progress-head strong{font-size:11px;color:#d6efff;font-weight:700}
.market-track{height:8px;border:1px solid #426078;background:#071525;border-radius:20px;overflow:hidden}
.market-fill{width:0;height:100%;background:#16d8b5;border-radius:20px;transition:width .4s linear}
.market-progress-foot{margin-top:5px;color:#a5c5d7;font-size:10px;font-variant-numeric:tabular-nums}
@media(max-width:380px){.summary{gap:8px;padding-left:9px;padding-right:9px}.summary>div:first-child{gap:6px}.summary .market-progress{padding-left:8px}.market-progress-head,.market-progress-foot{font-size:9px}.summary .market-progress-head strong{font-size:10px}}

/* V10: 신규 PRE 수신 시 카드 테두리 플래시, 사운드 ON/OFF */
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
#preSound{font-family:var(--jk-font-family);font-size:11px;font-weight:700;background:#1b3449;color:#cbdcea;border:1px solid #48657a;border-radius:9px;padding:7px 8px;white-space:nowrap;cursor:pointer}
#preSound[aria-pressed="true"]{color:#b9ffdb;border-color:#36b882;background:#123c34}
.stock.pre-new-flash{animation:preNewFlash .45s ease-in-out 4}
@keyframes preNewFlash{0%,100%{box-shadow:0 0 0 0 transparent;border-color:#24435a}50%{box-shadow:0 0 0 2px #ffcc4d,0 0 15px #ffcc4d88;border-color:#ffd966;background-color:#273744}}
@media(prefers-reduced-motion:reduce){.stock.pre-new-flash{animation:none;outline:2px solid #ffd966}}
@media(max-width:380px){.header-actions{gap:4px}#preSound{font-size:10px;padding:6px 5px}}

/* V22 role-aware account screens */
.auth-tabs{display:flex;gap:8px;margin:12px 0}.auth-tabs button{flex:1}.modalbody input:not([type=checkbox]){width:100%;min-height:38px;box-sizing:border-box;margin:5px 0}.modalbody label{display:block;font-size:12px;margin:8px 0}.legal-text{max-height:230px;overflow:auto;border:1px solid #334155;padding:10px;border-radius:8px;font-size:12px;line-height:1.6}.legal-text p{margin:5px 0 11px}.account-panel{max-width:680px;margin:8px auto 20px;background:#152538;border:1px solid #334155;padding:16px;border-radius:12px;color:#d8e5f5}.account-top{display:flex;justify-content:space-between}.account-panel input{width:100%;box-sizing:border-box;padding:9px;margin:6px 0;background:#101c2c;color:white;border:1px solid #4a5d71;border-radius:7px}.account-panel button,.modalbody button{cursor:pointer}.admin-settings{display:grid;grid-template-columns:1fr;gap:7px}.account-panel label{font-size:13px}.account-row{padding:10px 0;border-bottom:1px solid #344458;font-size:13px}.account-row button{margin:3px}.account-panel h3{margin-top:18px}#accountBody p{margin:6px 0}.payment-input{display:block}.account-panel [hidden],.modal [hidden]{display:none!important}

body,button,input,select,textarea{font-family:var(--jk-font-family)!important}

/* V25: 관리자 PIN의 숫자 6칸 (D2Coding) */
.admin-pin-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin:9px 0 12px}.admin-pin-label{font-size:12px;color:#cbd5e1}.modalbody .admin-pin-digit{font-family:var(--jk-font-family);text-align:center;font-size:22px;font-weight:700;min-width:0;width:100%;height:48px;padding:0;border:1px solid #6c859d;border-radius:8px;background:#0d1726;color:#fff}.modalbody .admin-pin-digit:focus{outline:2px solid #60a5fa;outline-offset:1px}.modalbody [hidden]{display:none!important}

/* V26: 6-digit user PIN, signup ID availability, visible signup action on mobile */
.modal{align-items:center;overflow:hidden;padding:12px;}
.modalbody{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;min-height:0;padding:16px;}
.modalbody .admin-pin-digit,.modalbody .user-pin-digit,.modalbody .reg-pin-digit{font-family:var(--jk-font-family)!important;text-align:center;font-size:22px;font-weight:700;min-width:0;width:100%;height:48px;padding:0;border:1px solid #6c859d;border-radius:8px;background:#0d1726;color:#fff}
.modalbody .admin-pin-row{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.reg-user-row{display:flex;gap:7px;align-items:center}
.modalbody .reg-user-row input{flex:1;min-width:0}
.modalbody .reg-user-row button{flex:0 0 auto;width:auto;padding:10px}
#usernameCheckResult{display:block;min-height:18px;color:#d5e6f3;font-size:12px}
#signupFields{min-height:0}
.signup-action{position:sticky;bottom:-16px;background:#112337;padding:12px 0 max(14px,env(safe-area-inset-bottom));border-top:1px solid #38617b;z-index:2}
.signup-action button{min-height:48px;margin:0}
#authError{flex:none}
@media(max-height:640px){.modal{padding:6px}.modalbody{max-height:calc(100dvh - 12px);padding:12px}.legal-text{max-height:130px}}

/* V28: 모바일 관리자 화면 - 사용자 승인 우선 배치 */
.admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0}.admin-stats>div{background:#23364a;border-radius:9px;padding:10px 5px;text-align:center}.admin-stats b{display:block;font-size:21px}.admin-stats small{display:block;font-size:11px;color:#b9c9dc}.admin-user-card{border:1px solid #374c64;border-radius:12px;padding:13px;margin:12px 0;background:#1b2d40}.admin-user-head{display:flex;gap:6px;justify-content:space-between;align-items:flex-start}.admin-user-head strong{font-size:16px}.admin-user-head small{display:block;font-size:11px;color:#adc0d4;margin-top:5px}.admin-user-status{white-space:nowrap;font-size:11px;border-radius:20px;padding:5px 8px;background:#31455a}.admin-user-status.waiting{color:#ffd778}.admin-user-status.active{color:#9be5b6}.admin-user-status.expired{color:#fdadae}.admin-user-card p{margin:6px 0;font-size:12px}.period-label{display:block;margin-top:12px}.admin-period{box-sizing:border-box;width:100%;border-radius:8px;border:1px solid #50677e;background:#112237;color:#e3edfb;font-size:15px;padding:11px}.admin-user-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.admin-user-actions button{min-height:43px;border-radius:9px}.admin-user-actions .admin-primary{background:#255b80;border:1px solid #4e97bd;color:#fff}.admin-fold{margin-top:17px;border:1px solid #344d63;border-radius:10px;padding:13px}.admin-fold summary{cursor:pointer;font-weight:700}.admin-fold summary span{display:block;font-weight:400;font-size:11px;color:#a8bdd2;padding:4px 0}.admin-fold .admin-settings{padding-top:14px}.admin-user-actions button:disabled{opacity:.45;cursor:not-allowed}

/* V29: 관리자 전용 화면. 관리자에게 PRE 목록/차트/장 진행률을 보이지 않는다. */
body.admin-mode main{display:none!important;}
body.admin-mode #accountPanel{display:block!important;margin:12px auto 24px;max-width:680px;}
body.admin-mode #accountBody{display:none!important;}

/* V32: PRE 화면 전용 실제 로그아웃 버튼 */
#preLogoutBtn{font-size:11px;padding:7px 9px;white-space:nowrap}
@media(max-width:380px){#preLogoutBtn{font-size:10px;padding:6px 5px}.header-actions{flex-wrap:wrap}}

/* V33: 작은 모바일 화면의 PRE 헤더 겹침 방지.
   브랜드를 첫 행, 계정/로그아웃/사운드/연결 상태를 둘째 행으로 배치.
   인증, PRE 표시, 관리자 화면의 JS 동작은 변경하지 않는다. */
header{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:9px;
}
header .brand{width:100%;justify-content:flex-start}
header .brand>div:last-child{min-width:0}
header .brand strong{display:block;white-space:nowrap}
header .header-actions{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
}
header .header-actions button{flex:0 0 auto;min-width:0;padding:7px 9px;font-size:11px}
header .header-actions .status{margin-left:auto;font-size:10px;white-space:nowrap}
@media(max-width:380px){
  header .header-actions{gap:5px}
  header .header-actions button{padding:7px 6px;font-size:10px}
  header .header-actions .status{font-size:10px}
}

/* V34: full-screen separate disclosures with explicit name confirmation. */
.legal-steps{display:grid;gap:9px;padding:12px 0}.legal-steps p{margin:0 0 6px;color:#bcd0e2}.legal-open{width:100%;min-height:58px;text-align:left;background:#18364b;border:1px solid #437a9b;color:#eff9ff;border-radius:10px;padding:11px}.legal-open span{float:right;color:#85dfbf}.legal-confirm-status{opacity:.85}
.legal-overlay{position:fixed;inset:0;z-index:9999;background:#07111d;display:flex;justify-content:center;color:#eef7ff}.legal-overlay[hidden]{display:none!important}.legal-dialog{width:min(100%,650px);height:100dvh;display:flex;flex-direction:column;background:#102033;overflow:hidden}.legal-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3a6078}.legal-header h2{font-size:18px;margin:0}.legal-header button,.legal-sign button{background:#173f55;color:#f5fbff;border:1px solid #4c819b;border-radius:9px;padding:10px}.legal-document{flex:1;overflow-y:auto;padding:20px 18px;font-size:15px;line-height:1.85;overscroll-behavior:contain}.legal-document p{margin:12px 0}.legal-sign{flex-shrink:0;padding:12px 16px max(16px,env(safe-area-inset-bottom));border-top:1px solid #3a6078;background:#122b40;max-height:42dvh;overflow-y:auto}.legal-sign p{font-size:12px;margin:0 0 8px;color:#c2d6e8}.legal-sign label{display:block;font-size:12px;margin-bottom:6px}.legal-sign input{width:100%;min-height:44px;border-radius:7px;background:#071827;color:#fff;border:1px solid #5b87a0;padding:9px}.legal-sign button{width:100%;margin-top:8px;min-height:46px;background:#086d89}.legal-sign #legalError{color:#ff9d9d;margin-top:5px}

/* PIN recovery and account controls: same visual language as existing auth screen. */
.modalbody .link-action{background:transparent;border:0;color:#8bd7ff;text-decoration:underline;margin-top:6px}
.modalbody #forgotPinFields button{margin-top:8px}
.pin-management{margin-top:12px;padding:10px;border:1px solid #3a5a72;border-radius:9px}
.pin-management summary{cursor:pointer;font-weight:700}
.pin-management button{margin-top:8px;padding:9px}
.pin-management p{font-size:12px;color:#c3dff0}

/* V5: 일반회원 PRE 화면 최상단 우측 - 서버 이용시간을 1초 주기로 표시. */
header .brand .usage-countdown{margin-left:auto;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;border:1px solid #2b8caa;border-radius:9px;background:#103148;padding:5px 8px;min-width:106px}
header .brand .usage-countdown[hidden]{display:none!important}
.usage-countdown span{font-family:var(--jk-font-family);font-weight:700;font-size:10px;color:#d4edf7}
.usage-countdown strong{font-family:var(--jk-font-family)!important;font-size:clamp(17px,4.6vw,23px);line-height:1.08;letter-spacing:0;color:#38f1c0;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.usage-countdown.expired{border-color:#9c4150;background:#3d1824}
.usage-countdown.expired strong{color:#ff8792}
@media(max-width:380px){header .brand .usage-countdown{padding:5px 6px;min-width:96px}.usage-countdown strong{font-size:17px}}
/* PC PRE 최고점 도달 소요시간은 포착시간 아래에 두고 두 값이 나란히 정렬되게 유지한다. */
.stock-times{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;margin-left:0;white-space:nowrap}
.stockhead .stock-times small{font-family:var(--jk-font-family)!important;font-size:10px;line-height:1.18;color:#b7ccdd}
.stockhead .stock-times small:last-child{color:#f3d38e}
@media(max-width:380px){.stockhead .stock-times small{font-size:9px}}

/* V7 payment sheet: isolated from the existing login/auth modal and PRE cards. */
.usage-countdown[role="button"]{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.usage-countdown[role="button"]:focus-visible{outline:2px solid #53c9ff;outline-offset:3px}
.usage-countdown[role="button"]:active{box-shadow:0 0 0 2px #53c9ff}
.purchase-modal{position:fixed;inset:0;z-index:1500;background:#040a13d9;display:flex;align-items:center;justify-content:center;padding:12px}
.purchase-modal[hidden]{display:none!important}
.purchase-sheet{width:min(440px,100%);max-height:calc(100dvh - 28px);overflow:auto;padding:18px;box-sizing:border-box;background:#132339;color:#e3f2ff;border:1px solid #477089;border-radius:14px;box-shadow:0 18px 45px #000b;font-family:var(--jk-font-family)}
.purchase-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.purchase-top h2{margin:0;font-size:19px}.purchase-top button{background:#283d54;color:#eef7ff;border:1px solid #536a82;border-radius:8px;padding:8px}
.purchase-hint,.purchase-note{font-size:12px;line-height:1.55;color:#b8cbdc}.purchase-note{margin-bottom:0}
.purchase-sheet label{display:block;font-size:12px;font-weight:700;margin:10px 0 4px}.purchase-sheet select,.purchase-sheet input{width:100%;box-sizing:border-box;border:1px solid #546980;border-radius:8px;padding:11px;background:#0c192a;color:#fff;font-family:var(--jk-font-family)}
.purchase-price{border:1px solid #187ca4;border-radius:10px;background:#0d3146;margin:14px 0;padding:11px;display:flex;flex-direction:column;gap:5px}.purchase-price span{font-size:12px}.purchase-price strong{font-family:var(--jk-font-family);font-size:28px;color:#60f0ce}.purchase-price small{font-size:12px;color:#cfdee9}
.purchase-bank{border:1px solid #364e66;border-radius:9px;padding:10px;background:#0d1d30}.purchase-bank div{display:flex;justify-content:space-between;gap:8px;margin:5px 0}.purchase-bank span{color:#a5bbcd;font-size:12px}.purchase-bank b{font-family:var(--jk-font-family);font-size:13px;text-align:right}.purchase-bank button{padding:7px;background:#294e68;color:#fff;border:0;border-radius:6px}
.purchase-submit{margin-top:14px;width:100%;border:0;border-radius:9px;background:#167e99;color:#fff;font-weight:800;padding:12px;font-family:var(--jk-font-family)}.purchase-submit:disabled{opacity:.5}
.support-open{display:block;width:100%;margin-top:9px;padding:12px;border-radius:9px;border:1px solid #5e8eaa;background:#21394e;color:#e5f4ff;font:700 14px Pretendard,sans-serif;cursor:pointer}
.support-open:focus-visible{outline:2px solid #70d9ff;outline-offset:2px}
.support-rows{display:grid;gap:10px}.support-card{background:#112b3e;border:1px solid #486780;border-radius:10px;padding:12px;overflow-wrap:anywhere}
.support-card strong{color:#eaf6ff}.support-card p{white-space:pre-wrap;margin:8px 0;line-height:1.5}.support-meta{font-size:12px;color:#b3c9d9;margin-top:5px}
.support-card button{padding:9px 12px;margin:5px 6px 0 0;border-radius:8px;border:1px solid #4d8caa;background:#225e7d;color:white;font-weight:700}
.support-count{font-size:13px;color:#ffca73}.admin-mail-panel select{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:11px;background:#071827;border:1px solid #56718c;border-radius:9px;color:#fff;font:inherit}
#purchaseResult{font-size:12px;line-height:1.5;color:#71e5c8}

/* V8: 두 시간행의 콜론 위치와 숫자 시작점 동일하게 정렬. */
.stock-times{align-items:stretch}
.stock-times small{display:grid;grid-template-columns:max-content 8ch;column-gap:5px;align-items:center;justify-content:end}
.stock-times .stock-time-label{font-family:var(--jk-font-family);white-space:nowrap;text-align:right}
.stock-times .stock-time-value{font-family:var(--jk-font-family)!important;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* 로그인 화면: 무료 회원가입을 로그인 버튼 바로 아래에 배치 */
.modalbody .signup-under-login{display:block;width:100%;margin-top:8px;background:#24465e;border:1px solid #4d7e9b;color:#fff;}

/* 비밀번호 변경: 현재/새/확인 PIN 6칸, 모바일에서도 동일 너비 유지 */
.change-pin-field{margin-top:12px}
.change-pin-label{font-size:12px;color:#cbd5e1;margin-bottom:7px}
.change-pin-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.change-pin-row .change-pin-digit{box-sizing:border-box;display:block;min-width:0;width:100%;height:46px;padding:0;text-align:center;font-family:var(--jk-font-family);font-size:20px;font-weight:700;color:#fff;background:#0d1726;border:1px solid #6c859d;border-radius:7px}
.change-pin-row .change-pin-digit:focus{outline:2px solid #60a5fa;outline-offset:1px}

/* V14: PRE 레이더 정렬 버튼. 모바일에서도 한 줄로 보이도록 최소 폭을 제어한다. */
/* V3: TOP순, 강도순, 최신순, PRE 횟수순 — 화면 폭 안에서 4개 균등 배치. */
.sort-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:10px 10px 3px}
.sort-modes button{min-width:0;padding:9px 2px;font-size:11px;font-weight:700;border-radius:8px;white-space:nowrap}
.sort-modes button.selected{background:#104760;color:#fff;border-color:#03dcf2}
@media(max-width:380px){.sort-modes{gap:4px;padding-left:7px;padding-right:7px}.sort-modes button{font-size:10px;padding:8px 1px}}

/* V16 관리자 회원별 남은 이용시간 및 중요 차단 동작 */
.admin-remaining-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 8px;padding:11px 12px;border-radius:9px;background:#112237;border:1px solid #486781}
.admin-remaining-line span{font-size:13px;color:#bed0e5;font-weight:600}
.admin-remaining{font-family:var(--jk-font-family);font-variant-numeric:tabular-nums;letter-spacing:.4px;font-size:20px;font-weight:800;color:#8ff1bc;white-space:nowrap}
.admin-remaining.admin-remaining-expired{color:#ffb6ae}
.admin-user-actions .admin-block-btn{grid-column:1/-1;width:100%;min-height:58px;background:#a92935;border:2px solid #ff8188;color:#fff;font-size:17px;font-weight:800;box-shadow:0 2px 0 rgba(0,0,0,.3);cursor:pointer}
.admin-user-actions .admin-block-btn:not(:disabled):hover{background:#be3440}
.admin-user-actions .admin-block-btn:focus-visible{outline:3px solid #ffd6d9;outline-offset:2px}
.admin-user-actions .admin-block-btn:disabled{background:#4e3340;border-color:#7e5661;color:#d2b4bb;box-shadow:none;cursor:not-allowed}

/* V17: 관리자 입금 확인 요청 상태 (대기 건만 표시, 없으면 없음) */
.payment-request-count{padding:10px 12px;margin:10px 0;background:#172d44;border:1px solid #3b607e;border-radius:8px;font-size:13px;color:#d7e7f6}
.payment-request-count strong{color:#ffdc8d;font-family:var(--jk-font-family)}
.payment-request-empty{text-align:center;padding:22px 12px;margin:10px 0;border-radius:10px;border:1px dashed #4b6279;color:#c4d2e1;font-weight:700;font-size:16px}
.payment-request-card{padding:14px 12px;border:1px solid #465e73;border-radius:10px;margin:10px 0;background:#14263b}
.payment-request-card p{margin:7px 0}
.payment-request-status{display:inline-block;margin-left:10px;color:#ffd38a;font-size:12px;font-weight:700}
.payment-request-card button[data-request]{min-height:42px;width:100%;margin:10px 0 0;font-weight:700}

/* V18: 관리자 회원 검색. 검색창 1개와 대상 선택만 제공하여 화면을 단순하게 유지. */
.admin-search{display:flex;flex-direction:column;gap:7px;margin:14px 0 11px;padding:12px;border:1px solid #38526a;background:#172b40;border-radius:11px}
.admin-search>label{font-size:13px;font-weight:700;color:#dceaf7}
.admin-search input[type=search]{width:100%;box-sizing:border-box;background:#0d2033;color:#fff;border:1px solid #607c96;border-radius:9px;padding:12px;font-size:15px}
.admin-search-options{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.admin-search-options label{font-size:12px;color:#b5c8dc}
.admin-search-options select{width:auto;min-width:112px;max-width:180px;padding:9px;background:#0d2033;color:#fff;border:1px solid #607c96;border-radius:8px}
#adminSearchCount{margin-left:auto;font-size:12px;color:#b9d4e9}
.admin-search-empty{text-align:center;padding:20px 10px!important;color:#b8cddd}

/* V19: 앱 시작 로고 애니메이션. SVG/텍스트 기반으로 추가 이미지·동영상 다운로드 없음. */
.startup-splash { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; background:#071724; color:#fff; pointer-events:none; animation:jk-splash-out .36s ease 1.85s forwards; }
.startup-splash-content { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; padding:24px; text-align:center; }
.startup-splash-logo { width:132px; height:132px; margin-bottom:25px; filter:drop-shadow(0 0 18px rgba(255,65,73,.27)); animation:jk-logo-rotate 2s cubic-bezier(.3,.1,.65,.9) both; }
.startup-splash-logo img { display:block; width:100%; height:100%; }
.startup-splash-subtitle { margin:0 0 9px; font-family:var(--jk-font-family); font-size:clamp(15px,4vw,19px); font-weight:500; letter-spacing:.055em; color:#9eb3c9; animation:jk-title-in .65s ease .2s both; }
.startup-splash-title { margin:0; font-family:var(--jk-font-family); font-size:clamp(29px,8vw,42px); line-height:1.24; font-weight:800; letter-spacing:.025em; color:#fff; animation:jk-title-in .7s ease .35s both; }
.startup-splash-en { margin:11px 0 0; font-family:var(--jk-font-family); font-size:12px; font-weight:600; letter-spacing:.25em; color:#ff646b; animation:jk-title-in .7s ease .47s both; }
@keyframes jk-logo-rotate { from { transform:rotate(-120deg) scale(.74); opacity:.3; } 65% {opacity:1;} to {transform:rotate(0deg) scale(1); opacity:1;} }
@keyframes jk-title-in { from {opacity:0; transform:translateY(9px)} to {opacity:1; transform:translateY(0)} }
@keyframes jk-splash-out { to {opacity:0; visibility:hidden;} }
@media (prefers-reduced-motion:reduce) { .startup-splash-logo,.startup-splash-subtitle,.startup-splash-title,.startup-splash-en { animation:none; } .startup-splash {animation:jk-splash-out .01s linear .35s forwards;} }

/* V20: PWA 설치 제안은 브라우저가 설치 가능하다고 판단한 경우에만 표시한다. */
.pwa-install-area[hidden],.pwa-install-help[hidden]{display:none!important}
.pwa-install-area{margin:13px 0 1px;width:100%;box-sizing:border-box}
.pwa-install-btn{display:block;width:100%;box-sizing:border-box;min-height:45px;padding:11px 13px;border-radius:10px;border:1px solid #3e91b0;background:#123951;color:#e4f6ff;font-family:var(--jk-font-family);font-size:14px;font-weight:750;cursor:pointer}
.pwa-install-btn:focus-visible{outline:2px solid #a5e6ff;outline-offset:2px}
.pwa-install-help{margin:9px 1px 0;color:#c2d9e9;font:13px/1.6 Pretendard,'Noto Sans KR',sans-serif;text-align:left}

/* V21: 회원가입 동의 완료 표시를 모바일에서도 체크박스 + 문구 한 줄로 유지.
   기존 .modalbody input { width:100% } 규칙이 체크박스까지 확대시키던 문제만 수정. */
#signupFields .legal-confirm-status {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 28px;
  margin: 7px 0;
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
}
#signupFields .legal-confirm-status input[type="checkbox"] {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  accent-color: #20e69d;
}

/* V22: 관리자 회원별 연락처 연결과 이메일 작성 화면 */
.admin-contact-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 0;font-size:12px;min-width:0}
.admin-contact-row>span{min-width:0;overflow-wrap:anywhere}
.admin-contact-action{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:8px 14px;min-width:62px;min-height:38px;border:1px solid #61aad7;border-radius:8px;background:#194763;color:#fff;text-decoration:none;font-size:13px;font-weight:700;box-sizing:border-box}
.admin-mail-overlay[hidden]{display:none!important}
.admin-mail-overlay{position:fixed;inset:0;z-index:10010;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.78);overflow-y:auto}
.admin-mail-panel{width:min(100%,480px);max-height:calc(100dvh - 32px);overflow-y:auto;padding:20px;border:1px solid #51758e;border-radius:15px;background:#12283a;color:#fff;box-sizing:border-box}
.admin-mail-panel h2{font-size:18px;margin:0 0 14px}.admin-mail-panel label{display:block;font-size:13px;margin:12px 0}
.admin-mail-panel input,.admin-mail-panel textarea{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #56718c;border-radius:9px;background:#071827;color:#fff;box-sizing:border-box;font:inherit}
.admin-mail-panel input[readonly]{opacity:.8}.admin-mail-panel textarea{resize:vertical}
.admin-mail-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.admin-mail-actions button{padding:12px;border-radius:9px;border:1px solid #447c9d;background:#195b7c;color:#fff;font-weight:700}
.admin-mail-actions button:disabled{opacity:.5}

/* V23: 서버가 승인한 가격대 이용권을 화면에 표시한다. */
.member-plan-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 12px;margin:10px 0 0;padding:9px 12px;background:#102c3c;border:1px solid #24718a;border-radius:9px;color:#e1f5ff;font-size:12px}
.member-plan-bar #memberPlanText{font-weight:800;color:#66e7ee}
.member-plan-bar #memberPlanHint{color:#afc9db;font-size:11px}
#tabs button.plan-locked,.quick-panel button.plan-locked{opacity:.38;filter:grayscale(1);cursor:not-allowed}
#tabs button.plan-locked::after{content:' 🔒';font-size:10px}
@media(max-width:380px){.member-plan-bar{font-size:11px;padding:8px}.member-plan-bar #memberPlanHint{font-size:10px}}

/* V29: 차단과 회원 삭제를 같은 행에 배치 (삭제 버튼은 별도 경고색). */
.admin-user-actions .admin-block-btn{grid-column:auto;width:100%;min-width:0;min-height:54px;font-size:14px;padding:9px 5px;box-sizing:border-box}
.admin-user-actions .admin-delete-btn{grid-column:auto;width:100%;min-width:0;min-height:54px;font-size:14px;font-weight:800;padding:9px 5px;box-sizing:border-box;background:#6b1829;border:2px solid #ff5d78;color:#fff;border-radius:9px;cursor:pointer}
.admin-user-actions .admin-delete-btn:hover{background:#86203a}
.admin-user-actions .admin-delete-btn:focus-visible{outline:3px solid #ffd0d7;outline-offset:2px}

/* V30 관리자 수동 이용권 등급 변경: 기존 회원 관리 버튼과 구분 */
.admin-plan-edit{margin-top:12px;padding:11px;border:1px solid #46647b;border-radius:10px;background:#15293c}
.admin-plan-edit .period-label{margin-top:0;margin-bottom:7px;font-weight:700}
.admin-plan-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.admin-plan-actions button{min-width:0;min-height:46px;white-space:normal;line-height:1.25;padding:8px 6px;border-radius:8px;border:1px solid #5794b4;background:#245775;color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.admin-plan-actions button:last-child{background:#236b5b;border-color:#4da58b}
.admin-plan-actions button:disabled{opacity:.45;cursor:not-allowed}

/* V31: 회원가입 오류는 하단 제출 버튼 바로 위에 항상 보이도록 유지. */
#signupError:not([hidden]){display:block;margin:0 0 10px;padding:10px 12px;border:1px solid #ff7787;border-radius:9px;background:#48202c;color:#fff;font-size:13px;font-weight:700;white-space:normal;line-height:1.45}
#registerBtn:disabled{opacity:.65;cursor:wait}

/* V32: 서명 입력과 확인 버튼을 같은 행에 배치해 모바일 키보드에 버튼이 가려지는 문제 완화. */
.legal-sign .legal-sign-action{display:flex;align-items:stretch;gap:8px;min-width:0}
.legal-sign .legal-sign-action #legalSigner{flex:1 1 auto;min-width:0;width:0;margin:0;min-height:46px}
.legal-sign .legal-sign-action #legalAgree{flex:0 0 auto;width:auto;max-width:44%;margin:0;min-height:46px;padding:8px 12px;font-size:13px;white-space:normal;line-height:1.3}
@media(max-width:360px){.legal-sign .legal-sign-action{gap:5px}.legal-sign .legal-sign-action #legalAgree{padding:8px;font-size:12px}}

/* V34: 관리자 문의 / 입금 확인 요청의 빈 상태를 같은 프레임으로 표시.
   입금 확인 요청은 클릭 시 자동갱신을 시작하는 버튼 기능을 그대로 유지한다. */
#supportRows .admin-empty-frame,
#requestRows .admin-empty-frame {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:64px;
  margin:10px 0;
  padding:16px 12px;
  border:1px solid #506f89;
  border-radius:11px;
  background:#11283c;
  color:#d7e7f6;
  font-family:var(--jk-font-family)!important;
  font-size:15px;
  font-weight:700;
  text-align:center;
  line-height:1.5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
#requestRows button.admin-empty-frame {
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
#requestRows button.admin-empty-frame:focus-visible {
  outline:2px solid #73d8ed;
  outline-offset:2px;
}
#requestRows button.admin-empty-frame:active { background:#1c3b53; }

/* V35: 일반 사용자 내 계정 팝업. 관리자 목록은 기존 배치를 유지한다. */
body:not(.admin-mode) #accountPanel:not([hidden]){
 position:fixed;
 z-index:1600;
 top:50%;left:50%;
 transform:translate(-50%,-50%);
 width:calc(100% - 24px);
 max-width:520px;
 max-height:calc(100dvh - 30px);
 margin:0;
 overflow-y:auto;
 overscroll-behavior:contain;
 box-shadow:0 0 0 100vmax rgba(1,7,15,.79),0 18px 50px rgba(0,0,0,.48);
 scrollbar-width:thin;
}
#accountPanel .account-top{
 position:sticky;top:-16px;z-index:2;
 display:flex;align-items:center;gap:10px;
 padding:12px 0;
 background:#152538;
 border-bottom:1px solid #34566f;
}
#accountPanel .account-top-actions{display:flex;gap:6px;margin-left:auto;align-items:center;}
#accountPanel #closeAccountBtn{white-space:nowrap;padding:8px 10px;background:#203a50;border:1px solid #537791;}
#accountPanel #logoutBtn{white-space:nowrap;padding:8px 10px;}
#accountPanel #closeAccountBtn[hidden]{display:none!important;}
@media(max-width:380px){
 body:not(.admin-mode) #accountPanel:not([hidden]){width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:12px;}
 #accountPanel .account-top{top:-12px;}
 #accountPanel #closeAccountBtn,#accountPanel #logoutBtn{padding:8px;font-size:12px;}
}

/* PWA TOP3 V2: PC-authoritative ranks, whole-card highlight.
 * 1=gold 2=silver 3=bronze. In PWA, the whole stock card is marked.
 * Market-closed/night screens show all 3 P LEDs in purple.
 */
.jk-top3-toolbar{flex-wrap:wrap;gap:7px}
.jk-top3-toolbar #listTitle{flex:0 1 auto;min-width:0}
.jk-top3-toolbar #bandRange{flex:1 0 100%;text-align:left}
.jk-top3-switch{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-left:auto;min-width:0;min-height:30px;padding:4px 7px;border:1px solid #49647a;border-radius:7px;background:#192b3b;color:#c5d5df;font-family:var(--jk-font-family)!important;font-size:11px;font-weight:700;white-space:nowrap}
.jk-top3-switch.on{border-color:#369a79;color:#b0f8d3;background:#153529}
.jk-top3-track{display:inline-flex;align-items:center;justify-content:flex-start;width:29px;height:15px;border-radius:10px;background:#536476;padding:2px;flex:none}
.jk-top3-switch.on .jk-top3-track{justify-content:flex-end;background:#27b783}
.jk-top3-thumb{display:block;width:11px;height:11px;border-radius:50%;background:#f5f9fb}
.jk-top3-switch:focus-visible{outline:2px solid #66cafa;outline-offset:2px}
.stock[class*="jk-top3-rank-"]{position:relative;border:2px solid var(--jk-rank-color);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset}
.stock.jk-top3-rank-1{--jk-rank-color:#f6ce4c}
.stock.jk-top3-rank-2{--jk-rank-color:#bdcfde}
.stock.jk-top3-rank-3{--jk-rank-color:#e4a06e}
.stock .jk-top3-corner{position:absolute;top:0;left:0;width:24px;height:24px;overflow:hidden;display:block;pointer-events:none;z-index:1}
.stock .jk-top3-corner::before{content:"";position:absolute;top:0;left:0;width:0;height:0;border-top:24px solid var(--jk-rank-color);border-right:24px solid transparent}
.stock .jk-top3-corner em{position:absolute;top:1px;left:4px;font-family:var(--jk-font-family)!important;font-style:normal;font-size:11px;font-weight:900;color:#111b28;line-height:14px}
@media(max-width:380px){.jk-top3-switch{font-size:10px;padding:4px 6px}.stock .jk-top3-corner{width:21px;height:21px}.stock .jk-top3-corner::before{border-top-width:21px;border-right-width:21px}.stock .jk-top3-corner em{left:3px;font-size:10px;line-height:12px}}
.stock.expanded.jk-top3-rank-1{border-color:#f6ce4c}
.stock.expanded.jk-top3-rank-2{border-color:#bdcfde}
.stock.expanded.jk-top3-rank-3{border-color:#e4a06e}


/* PRE 레이더 차트 유형 선택: 모바일 손가락 터치에 적합한 2분할 버튼. */
.chart-mode{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:0 10px 8px;color:var(--muted);font-size:12px}
.chart-mode-buttons{display:flex;gap:5px;flex-shrink:0}
.chart-mode-buttons button{min-width:73px;padding:8px 11px;font-size:12px;font-weight:700}
.chart-content-notice{color:#ffc77b;font-size:11px;line-height:1.5;margin:5px 0 0}

/* V7 UI only: annotations never obscure price candles; compact and responsive. */
.jk-chart-head{font-family:var(--jk-font-family);font-size:12px;color:#b4cce0;margin:2px 0 4px}
.jk-chart-signals{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:5px 12px;margin:3px 0 2px;min-height:17px}
.jk-chart-signal{font-family:var(--jk-font-family);font-size:11px;line-height:1.35;white-space:nowrap;font-weight:700}
.jk-chart-entry{color:#b9ff45}.jk-chart-mfe{color:#ffbe62}
#tabs .jk-l5-locked,#tabs .jk-l5-locked:disabled{display:inline-flex;align-items:center;gap:5px;justify-content:center;opacity:1;color:#899aaa;background:#101b2a;border:1px dashed #486076;box-shadow:none;cursor:not-allowed;pointer-events:none;font-family:var(--jk-font-family)}
#tabs .jk-l5-locked span{font-size:13px;filter:grayscale(.45)}

/* V8: phone-width safe candlesticks. The viewBox and pixel width are matched
 * in the JS renderer so 1m/3m/5m wicks retain their true thin appearance.
 * Line and daily charts keep the original responsive width.
 */
.jk-chart-scroll{width:100%;max-width:100%;overflow:hidden}
.jk-chart-scroll .jk-chart-svg{display:block;width:100%;height:auto;min-height:180px}
.jk-chart-scroll-dense{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#416781 transparent}
.jk-chart-scroll-dense .jk-chart-svg{width:auto!important;max-width:none!important;min-height:180px;flex:none}
/* '현재', '진입', '최고' numeric data have identical font sizing. */
.jk-chart-head,.jk-chart-signal{font-family:var(--jk-font-family);font-size:12px;line-height:1.45;font-weight:700}
.jk-chart-mfe-positive{color:#ff6978}
.jk-chart-mfe-negative{color:#5caaff}
.jk-chart-mfe-neutral{color:#b4cce0}

/* V9: Opt-in local username memory. PIN/passwords are never stored. */
#loginFields .remember-login-id{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:2px 0 13px;color:#b9cadb;font-size:13px;cursor:pointer;line-height:1.4}
#loginFields .remember-login-id input[type="checkbox"]{width:17px;height:17px;min-height:0;margin:0;accent-color:#00d5e8;flex:none;cursor:pointer}
#loginFields .remember-login-id span{white-space:nowrap}

/* V10 관리자 첫 화면: 요약 4종만 표시. 기존 상세 액션은 내부의 화면별 그룹에 보존. */
.admin-overview{margin:10px 0 16px}
.admin-overview-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.admin-overview-heading strong{font-size:19px;color:#f2f8ff}
.admin-overview-heading small{font-size:11px;color:#a7c2d4}
.admin-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.admin-overview-tile{display:flex;flex-direction:column;gap:7px;align-items:flex-start;text-align:left;min-width:0;min-height:120px;padding:15px 13px;border:1px solid #3d617d;border-radius:15px;background:#142a40;color:#e9f5ff;white-space:normal}
.admin-overview-tile span{font-size:13px;color:#aec9da;font-weight:600}
.admin-overview-tile b{font-family:var(--jk-font-family);font-size:31px;line-height:1.1;font-weight:800;color:#fff}
.admin-overview-tile small{font-size:11px;color:#8eb6cc}
.admin-overview-tile.has-pending{border-color:#bf9160}
.admin-overview-tile.has-pending b{color:#ffc47b}
@keyframes adminNewRequest{0%,100%{box-shadow:none}30%,70%{box-shadow:0 0 0 2px #f6b858 inset;background:#343046}}
.admin-overview-tile.new-alert{animation:adminNewRequest 1.6s ease 2}
.admin-overview-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.admin-overview-actions button{flex:1;min-width:130px;padding:11px 9px;font-size:12px}
.admin-overview-error{font-size:11px;color:#f5b59a;min-height:0;margin:5px 0}
.admin-detail-head{display:flex;align-items:center;gap:12px;border-bottom:1px solid #3c5c75;padding:4px 0 12px;margin-bottom:9px}
.admin-detail-head button{padding:8px 10px;font-weight:700}
.admin-detail-head strong{font-size:16px}
body.admin-mode #pinChangeSection{display:none!important}
body.admin-mode.admin-settings-open #pinChangeSection{display:block!important}
body.admin-mode #adminDetailView[hidden],body.admin-mode .admin-detail-group[hidden]{display:none!important}
@media(max-width:380px){.admin-overview-tile{padding:12px 9px;min-height:112px}.admin-overview-tile b{font-size:27px}.admin-overview-tile span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.admin-overview-tile.new-alert{animation:none;outline:2px solid #f6b858}}

/* V11: 운영 현황 숫자 가독성. 새 요청 타일도 같은 노란색 유지. */
.admin-overview-tile b,.admin-overview-tile.has-pending b{color:#ffe16b!important;font-variant-numeric:tabular-nums}
#adminActivityDetailCount{color:#ffe16b;font-family:var(--jk-font-family);font-weight:800}
/* V11: 오른손 사용자가 쉽게 누를 수 있는 우측 '현황판으로' 액션. */
.admin-detail-head{justify-content:space-between;gap:10px}
.admin-detail-head #adminDetailTitle{margin-right:auto}
#adminBackOverview{margin-left:auto;min-height:44px;padding:11px 16px;border:2px solid #09d9ec;border-radius:12px;background:#15536c;color:#fff;font-weight:800;box-shadow:0 0 0 1px rgba(0,220,240,.18) inset}
#adminBackOverview:active,#adminBackOverview:focus-visible{background:#207b94;outline:2px solid #90f5ff;outline-offset:2px}
/* V11: 차트 VWAP 표식 및 실제 보조지표 버튼. */
.jk-chart-vwap-label{display:flex;align-items:center;gap:6px;padding:4px 3px 0;font-family:var(--jk-font-family);font-size:11px;color:#e2a6ff}
.jk-chart-vwap-label span{width:19px;height:0;border-top:2px solid #e2a6ff}
.jk-chart-indicators{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:6px 10px 12px;border-top:1px solid #24485c}
.jk-chart-indicators button{font-size:11px;padding:8px 11px;border-radius:9px;min-height:35px}
.jk-chart-indicators button.selected{background:#145366;border-color:#00d9e9;color:#fff}
.jk-chart-indicators button:disabled{opacity:.44;cursor:not-allowed}
.jk-chart-indicators button.indicator-locked{opacity:.72;border-style:dashed;color:#aab9cf}
.jk-chart-volume-title{font-size:10px;margin:5px 0 1px;color:#adc4d5}
.jk-chart-volume-svg{display:block;height:auto;max-height:58px;min-height:36px;width:100%}
.jk-chart-scroll-dense .jk-chart-volume-svg{width:auto!important;max-width:none!important}


/* V13: 관리자 점검 ON/OFF. 기본 서버/회원 관리 기능에는 영향 없음. */
.maintenance-admin{margin:12px 0;padding:14px;background:#132437;border:1px solid #557188;border-radius:12px}
.maintenance-admin-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.maintenance-admin-head strong{color:#e8f5ff;font-size:15px}
#maintenanceAdminState{color:#91efb4;font-weight:800}
#maintenanceAdminState.on{color:#ffdc70}
.maintenance-admin label{display:block;font-size:12px;margin:10px 0 4px;color:#bed8e9}
.maintenance-admin textarea,.maintenance-admin input{display:block;width:100%;box-sizing:border-box;border:1px solid #567087;border-radius:8px;background:#061829;color:#fff;padding:10px;font:inherit}
.maintenance-admin-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.maintenance-admin-actions button{flex:1 1 140px;font-size:13px;font-weight:800;min-height:46px;white-space:normal}
#maintenanceOn{border-color:#e3a852;color:#ffe09b;background:#46311b}
#maintenanceOff{border-color:#45c99b;color:#c2ffe5;background:#154b3f}
.maintenance-admin small{display:block;margin-top:8px;color:#9fb6c6;line-height:1.5}
#maintenanceAdminFeedback{font-size:12px;min-height:1em;color:#ffe09b}
.maintenance-notice{position:fixed;inset:0;z-index:18;background:#071321;display:flex;justify-content:center;align-items:center;padding:20px;overflow:auto}
.maintenance-notice[hidden],.maintenance-login-hint[hidden]{display:none!important}
.maintenance-notice-card{width:min(440px,100%);padding:25px 20px;background:#132639;border:1px solid #65809b;border-radius:18px;text-align:center;color:#e9f5ff}
.maintenance-symbol{font-size:40px;color:#ffd37a;margin-bottom:12px}
.maintenance-notice-card>strong{font-size:20px;color:#ffe08f}
.maintenance-notice-card p{font-size:14px;line-height:1.65;color:#c5d8e7;white-space:pre-wrap;overflow-wrap:anywhere}
.maintenance-notice-card dl{display:grid;grid-template-columns:auto 1fr;gap:12px;text-align:left;background:#0b1b2a;padding:16px;border-radius:12px}
.maintenance-notice-card dt{color:#9fb6c8}.maintenance-notice-card dd{margin:0;text-align:right;color:#fff;font-family:var(--jk-font-family)}
.maintenance-notice-card small{color:#9fb6c8;line-height:1.5}
.maintenance-login-hint{border:1px solid #e8b960;color:#ffe2a0;background:#49381c;padding:10px;border-radius:9px;font-size:12px}

/* V15: TOP3 버튼 바로 밑으로 수치를 붙이고 같은 오른쪽 끝에 정렬한다. */
.jk-top3-right-column{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;margin-left:auto;flex:0 0 auto;min-width:max-content}
.jk-top3-right-column .jk-top3-switch{margin-left:0;width:100%}
.jk-top3-toolbar .jk-online-counter{display:flex;align-items:center;justify-content:flex-end;gap:4px;width:100%;min-height:16px;margin:0;padding:0 1px;color:#b8d3e3;font:600 11px Pretendard,sans-serif;white-space:nowrap}
.jk-online-counter b{font:800 13px D2Coding,monospace;color:#ffe38a;font-variant-numeric:tabular-nums}
.jk-online-counter b:not(:empty){line-height:16px}
.jk-online-counter #jkOnlineUnit[hidden]{display:none!important}

/* V40: keep horizontal gestures inside the intended scroll region.
 * clip does not create an extra scrolling container or change sticky/fixed
 * positioning. Do not use touch-action:pan-y or preventDefault globally:
 * charts, tabs, pinch zoom and vertical page scrolling must remain available.
 */
html,body{
 width:100%;max-width:100%;
 overflow-x:clip;
 overscroll-behavior-x:none;
}
main{width:100%;min-width:0;max-width:600px}
main>*,header .brand,header .header-actions{min-width:0;max-width:100%}
/* Brand + countdown can exceed phone width even when each child looks small.
 * Wrap at actual content width rather than cropping text or shrinking numbers.
 */
header .brand{flex-wrap:wrap}
header .brand>div:nth-child(2){min-width:0;max-width:100%}
header .brand .usage-countdown{max-width:100%}
nav,.charttabs,.jk-chart-scroll-dense{
 min-width:0;max-width:100%;overscroll-behavior-x:contain;
}
/* Fallback for older WebViews without overflow:clip support. */
@supports not (overflow:clip){html,body{overflow-x:hidden}}