/* 매직 트래킹 위젯 — 재사용 컴포넌트 스타일.
   운영자 화면(admin_now_position.html)과 공개 메인(index.html)이 **같은 이 파일**을 쓴다.
   ★한쪽에만 고치면 두 화면이 어긋난다 — 여기 한 곳에서만 고친다.
   외부 레이아웃·전역 button·dialog 스타일에 의존하지 않는다. */
.np-widget{
  --np-blue:var(--primary,#3b82f6);--np-ink:var(--t1,#1a1f2e);--np-muted:var(--t2,#4a5568);
  --np-subtle:var(--t3,#7a8699);--np-up:#dc2626;--np-down:#2563eb;
  color:var(--np-ink);font-family:Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--card,rgba(255,255,255,.55));border:1px solid var(--border,rgba(255,255,255,.5));
  background-image:linear-gradient(180deg,rgba(59,130,246,.07),rgba(59,130,246,0) 130px);
  box-shadow:var(--card-shadow);border-radius:20px;min-width:0;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.np-widget *{box-sizing:border-box}
.np-widget [hidden]{display:none!important}
.np-widget button{font-family:inherit;cursor:pointer}
.np-widget button:focus-visible{outline:2px solid var(--np-blue);outline-offset:2px}
/* [2026-09-11 사용자 지시] 제목 띠를 밝게. 짙은 네이비 풀폭 밴드는 화면 맨 위 헤더와
   같은 색이라 **화면이 2단으로 갈라져** 보였다 — 같은 현황판의 한 카드인데 다른 제품처럼
   읽혔다. 위쪽 카드들과 같은 문법(밝은 배경 + 왼쪽 파란 세로선)으로 맞춘다.
   ★중요도는 색이 아니라 **여백·크기·타이포**로 준다. */
.np-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 18px 12px;border-bottom:1px solid rgba(120,140,170,.16)}
.np-title{display:flex;align-items:center;gap:11px;min-width:0;
  padding-left:14px;border-left:4px solid var(--np-blue)}
.np-titletext{display:flex;flex-direction:column;min-width:0}
.np-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:1.2px;color:#7f9dc9;line-height:1.4}
.np-head h2{font-size:21px;line-height:1.25;letter-spacing:-.6px;font-weight:900;
  color:var(--np-ink);margin:0;white-space:nowrap}
.np-subtitle{margin-top:3px;font-size:11.5px;font-weight:600;color:var(--np-subtle);
  line-height:1.45;word-break:keep-all}
.np-sub-narrow{display:none}
.np-brand-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:11px;flex:none;
  background:linear-gradient(145deg,#e8f1ff,#cfe2ff);
  box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(59,130,246,.22);color:#2f6fd0}
.np-icon{width:22px;height:22px;display:block;flex:none}
.np-body{padding:12px 18px 14px}
.np-identity{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;
  text-align:right;padding-top:6px}
.np-theme{flex:none;font-size:11px;font-weight:700;color:#3f6098;
  background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);border-radius:8px;
  padding:3px 9px;max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-stock{color:var(--np-ink);font-size:16px;font-weight:900;letter-spacing:-.4px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-lede{margin:9px 0 4px;font-size:12px;line-height:1.6;color:var(--np-muted);word-break:keep-all}
.np-lede strong{color:var(--np-ink);font-weight:750}
.np-strength{display:inline-flex;gap:4px;align-items:center;color:#38619b;font-weight:700;margin-right:7px;white-space:nowrap}
.np-strength i{height:11px;width:3px;background:#7398cb;border-radius:1px;box-shadow:4px -3px #7398cb,8px -6px #7398cb;margin:5px 11px 0 0}
.np-legend{display:flex;gap:12px;justify-content:flex-end;align-items:center;min-height:20px;
  color:var(--np-muted);font-size:10px}
.np-legend span{display:inline-flex;align-items:center;gap:5px}
.np-key-real{width:17px;border-top:2px solid var(--np-up)}
.np-key-band{width:17px;height:7px;border:1px dashed #7c8ba1;background:rgba(124,139,161,.13);border-radius:2px}
.np-chartbox{position:relative;height:225px;margin:0 -10px}
.np-chartbox canvas{display:block;width:100%!important;height:100%!important}
.np-axis{position:absolute;inset:0;pointer-events:none}
.np-axis-button{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:44px;height:52px;padding:0;transform:translateX(-50%);border:0;background:transparent;
  pointer-events:auto;color:var(--np-muted);z-index:2;font-variant-numeric:tabular-nums}
.np-axis-button,.np-axis-track{--np-tab-color:#59677b;--np-tab-line:#a5afbf;--np-tab-fill:#e4e9f1;--np-tab-border:#bac6d7}
.np-axis-button[data-state="확정"],.np-axis-track[data-state="확정"]{--np-tab-color:#c42b32;--np-tab-line:#ef4444;--np-tab-fill:#fde8e8;--np-tab-border:#e6b4b8}
.np-axis-button[data-state="진행"],.np-axis-track[data-state="진행"]{--np-tab-color:#976000;--np-tab-line:#f59e0b;--np-tab-fill:#fff1ce;--np-tab-border:#e7c16c}
.np-axis-track{position:absolute;height:0;border-top:2px dashed var(--np-tab-line);pointer-events:none}
.np-axis-button::before{content:'';position:absolute;bottom:100%;height:6px;left:50%;border-left:1px solid var(--np-tab-line);opacity:.65}
.np-axis-face{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-direction:column;min-height:32px;
  width:100%;padding:1px 0;border:1px solid var(--np-tab-border);border-radius:6px;background:linear-gradient(180deg,#fff,#edf1f8);
  box-shadow:0 2px 2px #24375216,inset 0 1px 0 #fff;
  color:var(--np-tab-color);font-size:var(--np-axis-font,10px);font-weight:650;white-space:nowrap;line-height:16px;
  transition:background .12s,color .12s,box-shadow .12s,transform .12s}
.np-axis-face::after{content:'';position:absolute;right:-3px;top:-4px;width:10px;height:10px;
  border-radius:3px;background:#f8faff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2.5 12 8l-4 .7-1.8 4.1L3 2.5Z' fill='%23fff' stroke='%23637591' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='m8 9 3 4M11 2v2M13 4h2' fill='none' stroke='%23637591' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center/9px 9px no-repeat;
  box-shadow:0 1px 2px #24375212;pointer-events:none}
.np-widget[data-axis-layout="wide"] .np-axis-button{width:92px}
.np-widget[data-axis-layout="wide"] .np-axis-face{flex-direction:row;font-size:11px;min-height:28px}
.np-axis-full{display:none}
.np-axis-short{display:flex;flex-direction:column;align-items:center;letter-spacing:-.3px}
.np-widget[data-axis-layout="wide"] .np-axis-full{display:inline}
.np-widget[data-axis-layout="wide"] .np-axis-short{display:none}
.np-axis-button[data-state="진행"] .np-axis-face{background:linear-gradient(180deg,#fff,var(--np-tab-fill));font-weight:800}
.np-axis-button:hover .np-axis-face,.np-axis-button[aria-pressed="true"] .np-axis-face,
.np-axis-button:active .np-axis-face{background:linear-gradient(180deg,#fff,var(--np-tab-fill));font-weight:800}
.np-axis-button[aria-pressed="true"] .np-axis-face{border-color:var(--np-tab-line);box-shadow:0 1px 2px #24375212,inset 0 0 0 1px #ffffffa6}
.np-axis-button:hover .np-axis-face{box-shadow:0 2px 4px #24375224,inset 0 1px 0 #fff}
.np-axis-button:active .np-axis-face{transform:translateY(1px);box-shadow:inset 0 1px 2px #2437521a}
.np-summary{margin:5px 0 0;padding:9px;border:1px solid #fff;border-radius:12px;
  background:linear-gradient(120deg,#ffffffb8,#f3f6fcc9);box-shadow:0 3px 12px #27354b05}
.np-insight-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.np-period{display:inline-flex;gap:5px;align-items:center;font-size:11px;font-weight:750;letter-spacing:-.3px;color:#35496b}
.np-period .np-icon{width:14px;height:14px;color:#667c9e}
.np-insight-state{font-size:9px;font-weight:650;color:#69778b;background:#e8edf5;border-radius:4px;padding:2px 4px}
.np-insight-confidence{font-size:9px;font-weight:600;color:#3f6ea8;background:#e8f0fb;border:1px solid #d3e2f5;border-radius:4px;padding:2px 5px;letter-spacing:-.1px}
.np-insight-confidence strong{font-weight:750;font-variant-numeric:tabular-nums}
.np-current-price{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:10px;color:var(--np-muted);flex-wrap:wrap}
.np-current-price .np-icon{width:15px;height:15px;color:#ae8444}
.np-current-price strong{font-size:11px;font-weight:750;color:var(--np-ink)}
.np-current-price small{font-size:9px;color:#7a8699}
.np-metrics{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:7px;margin-top:7px}
.np-metric{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #fff9;border-radius:9px;min-width:0;
  background:#eaf0fc;--np-sticker:#5577ca;--np-sticker-light:#b4cdf8}
.np-metric[data-kind="down"]{background:#eaf2ff;--np-sticker:#4a83d4;--np-sticker-light:#b5dcfa}
.np-metric[data-kind="up"]{background:#fff0ee;--np-sticker:#de726d;--np-sticker-light:#ffd2b3}
.np-sticker{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:28px;color:#fff;
  background:linear-gradient(145deg,var(--np-sticker-light),var(--np-sticker));border:2px solid #fff;
  border-radius:8px 8px 10px 6px;box-shadow:0 2px 0 #fff8,0 3px 5px #2a49741c;transform:rotate(-7deg)}
.np-sticker .np-icon{width:19px;height:19px;filter:drop-shadow(0 1px 1px #29508533)}
.np-metric[data-kind="up"] .np-sticker{transform:rotate(6deg)}
.np-metric-name{display:block;font-size:10px;color:#5c6e8b;font-weight:600;margin-bottom:2px}
.np-metric strong{display:block;font-size:16px;font-weight:800;line-height:1.25;letter-spacing:-.35px;color:#2d4470;font-variant-numeric:tabular-nums;white-space:nowrap}
.np-metric[data-kind="down"] strong{color:#356eb6}
.np-metric[data-kind="up"] strong{color:#ca5756}
.np-metric small{display:block;font-size:9px;color:#74849b;margin-top:2px}
.np-empty-summary{font-size:12px;color:var(--np-muted);margin:12px 0 2px;line-height:1.7}
/* 안내 문구와 조회 도구를 한 줄로. 도구가 없으면 문구가 전체를 쓴다. */
.np-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.np-foot>.np-note{flex:1 1 260px;min-width:0}
.np-tools{flex:0 0 auto;margin-top:5px}
.np-tools[hidden]{display:none!important}
.np-tools>summary{cursor:pointer;width:fit-content;padding:2px 6px;font-size:10.5px;
  color:var(--np-subtle);border:1px solid rgba(120,140,170,.28);border-radius:7px;
  background:rgba(255,255,255,.5);list-style:none}
.np-tools>summary::-webkit-details-marker{display:none}
.np-tools>summary:hover{background:#fff;color:var(--np-muted)}
.np-tools-row{display:flex;align-items:end;gap:6px;flex-wrap:wrap;margin-top:7px}
.np-tools-row label{font-size:10px;color:var(--np-muted);display:grid;gap:3px;font-weight:650}
.np-tools-row input,.np-tools-row select,.np-tools-row button{
  box-sizing:border-box;min-height:32px;font:600 11px Pretendard,sans-serif;
  color:var(--np-muted);background:rgba(255,255,255,.65);border:1px solid rgba(120,140,170,.3);
  border-radius:7px;padding:6px 8px}
.np-tools-row button{cursor:pointer}
.np-tools-row button[data-np-tool="go"]{background:var(--np-blue);border-color:var(--np-blue);color:#fff}
/* 「지난 장」 배지 — 오늘 것이 아닐 때만 뜬다. 안 밝히면 어제 화면이 오늘로 읽힌다. */
.np-past{flex:none;font-size:10.5px;font-weight:800;letter-spacing:-.2px;
  color:#92400e;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.35);
  border-radius:7px;padding:2px 7px;white-space:nowrap}
.np-past[hidden]{display:none!important}
/* 아직 자료가 없는 상태 — 고장이 아니므로 붉게 쓰지 않는다. */
.np-state.is-empty{color:var(--np-muted)}
.np-note{margin:7px 0 0;font-size:10.5px;line-height:1.75;color:var(--np-muted);word-break:keep-all}
.np-note-tail{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.np-basis-link{display:inline-flex;align-items:center;gap:3px;min-height:24px;padding:2px 5px;
  border:1px solid #c8d3e3;background:#ffffff9c;border-radius:5px;color:#596b86;
  font-size:inherit;line-height:1.4;font-weight:650;vertical-align:baseline;white-space:nowrap}
.np-basis-link:hover{background:#fff;border-color:#a3b6d2}
.np-basis-link .np-icon{width:12px;height:12px;align-self:center}
.np-state{padding:32px 4px;font-size:13px;line-height:1.7;color:var(--np-muted)}
.np-state.is-error{color:#a52b2b}
.np-dialog{position:fixed;margin:0;border:1px solid rgba(255,255,255,.85);padding:0;
  width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  color:var(--np-ink);background:#f6f8fc;border-radius:18px;
  box-shadow:0 18px 64px rgba(25,35,55,.2);overflow:hidden;font-family:inherit}
.np-dialog[open]{display:flex;flex-direction:column}
.np-dialog::backdrop{background:rgba(25,35,55,.28)}
.np-dialog-handle{display:none}
.np-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:16px 20px 8px;flex:none}
.np-dialog-head h3{font-size:17px;font-weight:850;letter-spacing:-.4px;margin:0;line-height:1.4}
.np-close{border:0;background:transparent;color:var(--np-muted);font-size:12px;min-width:44px;min-height:44px;padding:6px}
.np-dialog-content{overflow:auto;overscroll-behavior:contain;padding:0 20px 12px}
.np-detail-meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--np-muted);margin:0 0 4px}
.np-status{font-size:11px;font-weight:700;border-radius:5px;padding:3px 6px;background:#e4eaf4;color:#4a5568}
.np-status.is-live{background:#fff1ce;color:#976000}
.np-detail-hero{padding:0 0 12px}
.np-detail-label{font-size:12px;color:var(--np-muted);display:block;margin-bottom:5px;line-height:1.6}
.np-detail-value{font-size:clamp(24px,7.2vw,30px);line-height:1.3;font-weight:850;letter-spacing:-.9px;font-variant-numeric:tabular-nums}
.np-detail-copy{font-size:12px;line-height:1.7;margin:8px 0 0;color:var(--np-muted)}
.np-detail-rows{margin:0}
.np-detail-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-top:1px solid rgba(120,140,170,.17);font-size:12px;line-height:1.7}
.np-detail-row dt{color:var(--np-muted);margin:0;flex:1}
.np-detail-row dd{font-weight:700;margin:0;text-align:right;max-width:65%;overflow-wrap:anywhere}
.np-detail-block{border-top:1px solid rgba(120,140,170,.17);padding:11px 0}
.np-detail-block h4{font-size:12px;color:var(--np-muted);font-weight:600;margin:0 0 5px}
.np-detail-block p{font-size:13px;line-height:1.75;font-weight:600;margin:0}
.np-pullback{padding:10px 14px;background:#eaf0fa;border-radius:12px}
.np-pullback-label{display:block;color:var(--np-muted);font-size:12px;margin-bottom:5px}
.np-pullback-value{display:block;color:#285596;font-size:21px;line-height:1.4;font-weight:800;letter-spacing:-.5px}
.np-pullback-note{display:block;color:var(--np-muted);font-size:11px;line-height:1.6;margin-top:3px}
.np-pullback-fallback{font-size:13px;font-weight:650;line-height:1.6;letter-spacing:0}
.np-track-record{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;font-size:12px;color:var(--np-muted)}
.np-track-record strong{font-size:19px;color:var(--np-ink);font-weight:800}
.np-track-record small{font-size:11px;white-space:nowrap;margin-left:5px}
.np-more{border-top:1px solid rgba(120,140,170,.2)}
.np-more>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;
  min-height:44px;font-size:12px;font-weight:650;color:var(--np-muted);outline-offset:2px}
.np-more>summary::-webkit-details-marker{display:none}
.np-more>summary::after{content:'+';font-size:20px;font-weight:400}
.np-more[open]>summary::after{content:'−'}
.np-more>summary:focus-visible{outline:2px solid var(--np-blue);border-radius:4px}
.np-dates{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.np-dates li{font-size:12px;background:#e7edf6;border-radius:5px;padding:5px 8px;font-variant-numeric:tabular-nums}
.np-basis-note{font-size:12px;line-height:1.8;color:var(--np-muted);margin:12px 0 0}
@media(max-width:600px){
  .np-admin{padding:0 16px 24px;margin-top:16px}
  .np-admin-head p{font-size:11px}
  .np-admin-tools{gap:6px;margin-bottom:12px}
  .np-admin-tools input{max-width:142px}
  .np-widget{border-radius:16px}
  .np-head{padding:13px 14px 10px;gap:9px}
  .np-title{gap:9px;padding-left:11px;border-left-width:3px}
  .np-head h2{font-size:17px}
  .np-eyebrow{display:none}          /* 좁은 화면에서는 격보다 높이가 중요하다 */
  .np-subtitle{font-size:10.5px;margin-top:2px}
  .np-sub-wide{display:none}
  .np-sub-narrow{display:inline}
  .np-brand-icon{width:29px;height:29px;border-radius:9px}
  .np-body{padding:10px 14px 12px}
  /* [2026-09-11 사용자 지적] 「지난 장 · 정유에너지 · 흥구석유」 셋이 세로로 쌓여
     헤더가 92px 까지 늘었고, 그게 제목 폭을 좁혀 부제까지 두 줄이 됐다.
     ★테마와 종목은 **바로 아래 본문 첫 줄이 이미 말한다**("정유에너지 테마 10:15부터
       1시간 40분 주도 · 흥구석유 …"). 좁은 화면에서는 그 중복을 접는다.
     ★「지난 장」 배지는 본문에 없는 정보라 남긴다. 결과 92px → 62px. */
  .np-identity{flex-direction:row;align-items:center;gap:5px;padding-top:3px}
  .np-theme,.np-stock{display:none}
}
/* 아주 좁은 화면(360px 대)에서는 짧은 부제마저 두 줄로 접힌다 — 한 줄로 붙든다. */
@media(max-width:399px){
  .np-subtitle{font-size:10px;letter-spacing:-.3px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .np-lede{font-size:11.5px}
  .np-summary{padding:8px}
  .np-insight-state{display:none}
  .np-current-price{margin-left:auto;font-size:10px;gap:4px;flex-wrap:nowrap}
  .np-metrics{grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
  .np-metric[data-kind="range"]{grid-column:1/-1}
  .np-metric{gap:7px;padding:6px 7px}
  .np-metric strong{font-size:16px}
  .np-sticker{width:24px;height:26px}
  .np-sticker .np-icon{width:18px;height:18px}
  .np-dialog{left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%;max-width:none;max-height:82dvh;border-radius:20px 20px 0 0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom)}
  .np-dialog-handle{display:block;width:38px;height:4px;background:#b6c0ce;border-radius:4px;margin:10px auto 0;flex:none}
  .np-dialog-head{padding-top:0;padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){.np-axis-face{transition:none}}