/* 펀디 웹앱 — 한 화면 + 아래 탭. 눌렀을 때 말랑하게 들어가고, 바뀔 때 통통 튀는 느낌 */
:root {
  --bg: #f2f4f6; --card: #ffffff; --text: #191f28; --muted: #8b95a1; --line: #e5e8eb; --soft: #f2f4f6;
  --accent: #12936b; --accent-soft: #e3f7ef; --on-accent: #ffffff; --entry: #3182f6;
  /* 방향(한국식): 오르면·벌면 빨강, 내리면·잃으면 파랑 / 위험(끊김·멈추기·손절선)은 따로 */
  --up: #e03e3e; --up-soft: #fdecec; --down: #1c6fd6; --down-soft: #e7f0fc;
  --danger: #f04452; --danger-soft: #fdeced;
  --warn-soft: #fff6dc; --warn: #b7791f;
  --price: #4e5968; --area: rgba(31, 183, 142, .14); --grid: #f2f4f6; --sma-s: #f59f00; --sma-l: #7950f2;
  --cash: #d1d6db; --now-bg: #191f28; --now-text: #ffffff; --now-muted: rgba(255, 255, 255, .62);
  --shadow: 0 2px 12px rgba(25, 31, 40, .05), 0 1px 3px rgba(25, 31, 40, .04);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r: 22px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101113; --card: #1c1d21; --text: #f2f4f6; --muted: #8b95a1; --line: #2c2e33; --soft: #26282d;
    --accent: #2fd3a0; --accent-soft: #143a2f; --on-accent: #0c0d0f; --entry: #5b9dff;
    --up: #ff6b6b; --up-soft: #3d1a1f; --down: #4dabf7; --down-soft: #132a40;
    --danger: #ff6170; --danger-soft: #3d1a1f;
    --warn-soft: #3a2f12; --warn: #f2c14e;
    --price: #c3c9d1; --area: rgba(47, 211, 160, .14); --grid: #26282d; --sma-s: #ffc078; --sma-l: #b197fc;
    --cash: #4e5359; --now-bg: #2b2e35; --now-text: #ffffff; --now-muted: rgba(255, 255, 255, .6);
    --shadow: 0 2px 12px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); overflow: hidden; overscroll-behavior: none;
  font: 15px/1.45 "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-feature-settings: "tnum"; letter-spacing: -.01em;
}
button { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.up { color: var(--up); } .down { color: var(--down); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.label { color: var(--muted); font-size: 13px; font-weight: 500; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- 뼈대: 위 · 내용 · 아래 탭 */
.app {
  height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  max-width: 560px; margin: 0 auto;
}
.top, .banner, .tabbar { flex: none; }
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 20px 6px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand img { width: 34px; height: 34px; border-radius: 11px; box-shadow: var(--shadow); }
.brand b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.conn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 6px 11px;
  border-radius: 999px; background: var(--card); color: var(--muted); box-shadow: var(--shadow); white-space: nowrap;
  transition: color .3s, background .3s;
}
.conn i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.conn.ok { color: var(--accent); }
.conn.ok i { animation: breathe 2.4s ease-in-out infinite; }
.conn.bad { color: var(--danger); background: var(--danger-soft); }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(18, 147, 107, .45); } 50% { box-shadow: 0 0 0 5px rgba(18, 147, 107, 0); } }

.banner {
  margin: 4px 16px 2px; padding: 10px 14px; border-radius: 16px; font-size: 13px; font-weight: 500;
  background: var(--warn-soft); color: var(--text); animation: pop .45s var(--spring);
}
.banner.bad { background: var(--danger-soft); }

#views { position: relative; overflow: hidden; flex: 1; min-height: 0; }
.view {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(14px) scale(.985); pointer-events: none; visibility: hidden;
  transition: opacity .28s var(--ease), transform .45s var(--spring), visibility 0s .28s;
}
.view.active { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .28s var(--ease), transform .45s var(--spring), visibility 0s; }

/* ---------------------------------------------------------------- 카드 · 누르는 느낌 */
.card { background: var(--card); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); }
.press { transition: transform .35s var(--spring), box-shadow .2s, background .2s; cursor: pointer; }
.press:active, .press.pressed { transform: scale(.965); transition: transform .12s var(--ease); }

.hero { position: relative; overflow: hidden; padding-bottom: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 150px; max-height: 340px; }
.big { font-size: 34px; font-weight: 800; letter-spacing: -.035em; margin-top: 2px; line-height: 1.15; }
.spark-label { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
.spark-label b { font-weight: 700; }
.spark { display: block; width: calc(100% + 36px); flex: 1; min-height: 50px; margin: 6px -18px 0; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--soft); color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: background .3s, color .3s;
}
.chip.up { background: var(--up-soft); color: var(--up); }
.chip.down { background: var(--down-soft); color: var(--down); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }

/* 내 돈 구성: 막대 하나 + 두 줄 (현금 / 비트코인), 산 뒤에만 손절선 줄 */
.wallet { display: flex; flex-direction: column; gap: 11px; }
.bar { height: 10px; border-radius: 999px; background: var(--cash); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .9s var(--spring); }
.w-row { display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 8px; }
.w-row.stop { padding-top: 10px; border-top: 1px dashed var(--line); }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.cash { background: var(--cash); } .dot.coin { background: var(--accent); }
.dot.shield { width: auto; height: auto; font-size: 12px; }
.w-k { color: var(--muted); font-size: 14px; font-weight: 500; }
.w-v { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
.w-v b, b.w-v { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; border-radius: 6px; }
.w-v small { font-size: 12px; }
.flash-up { animation: flashUp .9s var(--ease); }
.flash-down { animation: flashDown .9s var(--ease); }
@keyframes flashUp { 0% { color: var(--up); } 100% { color: inherit; } }
@keyframes flashDown { 0% { color: var(--down); } 100% { color: inherit; } }

/* 지금 판단: 흰 카드들과 구분되게 진한 카드 */
.now {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: var(--r);
  background: var(--now-bg); color: var(--now-text); box-shadow: 0 6px 20px rgba(25, 31, 40, .14);
}
.badge {
  flex: none; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; font-size: 21px;
  background: rgba(255, 255, 255, .12); transition: background .3s;
}
.now.go .badge, .now.hold .badge { background: rgba(47, 211, 160, .25); }
.now.stop .badge { background: rgba(255, 97, 112, .25); }
.now-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.now-text b { font-size: 16px; font-weight: 700; }
.now-text small { font-size: 12.5px; color: var(--now-muted); }
.now-text .now-foot { margin-top: 4px; font-variant-numeric: tabular-nums; }

.kill { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }

/* ---------------------------------------------------------------- 버튼 */
.pill {
  border: 0; border-radius: 16px; padding: 14px 18px; font-size: 16px; font-weight: 700; min-height: 52px;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
  transition: transform .35s var(--spring), background .25s, opacity .25s, box-shadow .25s;
}
.pill:active:not(:disabled), .pill.pressed:not(:disabled) { transform: scale(.95); transition: transform .12s var(--ease); }
.pill:disabled { opacity: .4; cursor: default; }
.pill.small { font-size: 13px; padding: 7px 13px; min-height: 34px; border-radius: 12px; background: var(--soft); color: var(--text); }
.pill.ghost { background: var(--soft); color: var(--text); }
.pill.danger { background: var(--danger); color: #fff; }
.kill-btn.pause { background: var(--danger-soft); color: var(--danger); }
.kill-btn.resume { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px rgba(18, 147, 107, .28); }

/* ---------------------------------------------------------------- 탭 안의 선택 막대 (움직이는 알약) */
.seg {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px;
  background: var(--soft); border-radius: 14px; align-self: flex-start;
}
.seg.wide { align-self: stretch; }
.seg button {
  position: relative; z-index: 1; border: 0; background: transparent; padding: 7px 14px; font-size: 13.5px;
  font-weight: 600; color: var(--muted); border-radius: 10px; transition: color .25s; cursor: pointer;
}
.seg button.on { color: var(--text); }
.seg-ind {
  position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 10px; background: var(--card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08); transition: transform .5s var(--spring), width .5s var(--spring);
}

/* ---------------------------------------------------------------- 차트 */
.chart-card { flex: 1 0 auto; display: flex; flex-direction: column; gap: 10px; min-height: 360px; }   /* 내용이 길면 카드가 늘고 화면이 스크롤 */
.price-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-head b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.chart { position: relative; flex: 1; min-height: 240px; touch-action: none; user-select: none; -webkit-user-select: none; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.chart .tip {
  position: absolute; top: 0; pointer-events: none; background: var(--text); color: var(--card); border-radius: 12px;
  padding: 6px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow);
}
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.legend .ln { display: inline-block; width: 16px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 5px; border-radius: 2px; }
.ln.price { border-color: var(--price); } .ln.entry { border-color: var(--entry); border-top-style: dashed; } .ln.stop { border-color: var(--danger); }
.ln.s { border-color: var(--sma-s); border-top-width: 3px; } .ln.l { border-color: var(--sma-l); border-top-width: 3px; }
.ln.band { border-color: var(--sma-l); border-top-style: dashed; opacity: .75; }
.hint { margin: 0; text-align: center; }

/* ---------------------------------------------------------------- 기록 · 상세 */
.list-card { flex: 1; overflow-y: auto; padding: 6px 16px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 12px 0; border-top: 1px solid var(--line); animation: rise .45s var(--spring) both; }
.list li:first-child { border-top: 0; }
.list .line1 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.tag { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; margin-right: 8px; }
.tag.buy { background: var(--up-soft); color: var(--up); } .tag.sell { background: var(--down-soft); color: var(--down); }
.reason { font-size: 12.5px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; word-break: break-all; font: 11.5px/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; margin: 8px 0; }
.fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 10px 0 0; font-size: 14px; }
.fields dt { color: var(--muted); }
.fields dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }
#bigChart { width: 100%; border-radius: 14px; margin-top: 8px; background: #fff; animation: pop .5s var(--spring); }
footer { text-align: center; padding: 4px 8px; white-space: pre-line; }

/* ---------------------------------------------------------------- 아래 탭 */
.tabbar {
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  background: var(--card); border-radius: 26px 26px 0 0; box-shadow: 0 -4px 20px rgba(25, 31, 40, .06);
}
.tab {
  border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
  font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .25s;
}
.tab .ico {
  width: 52px; height: 32px; border-radius: 16px; display: grid; place-items: center;
  transition: background .3s, transform .45s var(--spring);
}
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tab svg circle[r=".9"] { fill: currentColor; }
.tab.active { color: var(--accent); }
.tab.active .ico { background: var(--accent-soft); transform: scale(1.06); }
.tab:active .ico { transform: scale(.88); transition: transform .1s; }

/* ---------------------------------------------------------------- 알림 · 아래에서 올라오는 시트 */
.toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 30;
  max-width: calc(100% - 40px); padding: 12px 16px; border-radius: 16px; background: var(--text); color: var(--card);
  font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  transform: translate(-50%, 24px) scale(.9); opacity: 0; pointer-events: none;
  transition: transform .45s var(--spring), opacity .25s;
}
.toast.show { transform: translate(-50%, 0) scale(1); opacity: 1; }

.sheet { position: fixed; inset: 0; z-index: 40; visibility: hidden; transition: visibility 0s .35s; }
.sheet.open { visibility: visible; transition: visibility 0s; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .3s; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet.open .sheet-bg { opacity: 1; }
.sheet-card {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; background: var(--card);
  border-radius: 28px 28px 0 0; padding: 10px 22px calc(18px + env(safe-area-inset-bottom)); text-align: center;
  transform: translateY(105%); transition: transform .5s var(--spring);
}
.sheet.open .sheet-card { transform: none; }
.grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 10px; }
.sheet-emoji { font-size: 40px; line-height: 1; margin: 6px 0 8px; }
.sheet.open .sheet-emoji { animation: pop .6s var(--spring) .1s both; }
.sheet h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.sheet p { margin: 0 0 14px; font-size: 14.5px; }
.sheet input {
  display: block; width: 100%; margin: 0 0 14px; font: inherit; font-size: 16px; padding: 13px 14px; border-radius: 14px;
  border: 0; background: var(--soft); color: var(--text); outline: none;
}
.sheet input:focus { box-shadow: 0 0 0 2px var(--accent); }
.sheet-btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }

/* ---------------------------------------------------------------- 불러오는 중 · 등장 */
.skeleton { color: transparent !important; background: linear-gradient(90deg, var(--soft) 25%, var(--line) 50%, var(--soft) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }

@media (min-height: 760px) { .big { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- 로그인 (패스키) */
.login {
  position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; place-items: center;
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
}
.login-card { width: min(380px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; animation: rise .6s var(--spring) both; }
.login-logo { width: 96px; height: 96px; border-radius: 28px; margin: 0 auto 4px; box-shadow: var(--shadow); }
.login h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.login p { margin: 0; }
.login-btn { margin-top: 18px; font-size: 17px; min-height: 56px; }
.link { border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 600; padding: 8px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.register { display: flex; flex-direction: column; gap: 10px; animation: pop .45s var(--spring); }
.register input {
  font: inherit; font-size: 20px; font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase;
  padding: 14px; border-radius: 16px; border: 0; background: var(--card); color: var(--text); box-shadow: var(--shadow); outline: none;
}
.register input:focus { box-shadow: 0 0 0 2px var(--accent); }
.login-msg { min-height: 20px; font-size: 14px; font-weight: 600; color: var(--danger); }
.login-msg.ok { color: var(--accent); }

/* ---------------------------------------------------------------- 판단 차트 (#44) */
.chart-info {
  min-height: 36px; padding: 8px 12px; border-radius: 12px; background: var(--soft); font-size: 12.5px; line-height: 1.5;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.chart-info .k { color: var(--muted); font-weight: 600; }
.chart-info .k.s { color: var(--sma-s); } .chart-info .k.l { color: var(--sma-l); }
.chart-info .b { font-weight: 700; }
.chart-reset {
  position: absolute; top: 6px; left: 8px; z-index: 2; border: 0; border-radius: 999px; padding: 5px 11px;
  font: inherit; font-size: 12px; font-weight: 700; background: var(--text); color: var(--card); box-shadow: var(--shadow);
  animation: pop .35s var(--spring); cursor: pointer;
}
#range button { padding: 7px 4px; }

/* 살(팔) 때까지 남은 거리 게이지 (진한 카드 안) */
.now-top { display: flex; align-items: center; gap: 14px; }
.gauge { display: flex; flex-direction: column; gap: 6px; }
.g-track { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.g-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: rgba(255, 255, 255, .28); transition: left .8s var(--spring), width .8s var(--spring); }
.g-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: rgba(255, 255, 255, .35); }
.g-target { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #fff; }
.g-dot {
  position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--now-bg); box-shadow: 0 0 0 2px var(--accent);
  transition: left .8s var(--spring);
}
.now.stop .g-dot, .gauge.below .g-dot { background: #ff8787; box-shadow: 0 0 0 2px #ff8787; }
.g-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--now-muted); font-variant-numeric: tabular-nums; }
.g-labels b { color: var(--now-text); }

/* 성적표 */
.stats { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st { background: var(--soft); border-radius: 14px; padding: 10px 12px; animation: rise .45s var(--spring) both; }
.st .k { color: var(--muted); font-size: 12px; font-weight: 500; }
.st .v { font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.st .s { color: var(--muted); font-size: 12px; }
.st-h { font-size: 14px; font-weight: 700; margin: 4px 0 -4px; }
.trip { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.trip:first-child { border-top: 0; }
.trip .when { font-size: 13px; font-weight: 600; }
.trip .sub { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.st-empty { text-align: center; padding: 24px 8px; color: var(--muted); font-size: 14px; }
.st-empty b { display: block; font-size: 32px; margin-bottom: 6px; }

/* 차트는 카드 좌우 끝까지, 아래 정보 칸 */
.chart-card .chart { margin: 0 -18px; }
.chart-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 2px; }
@media (min-width: 520px) { .chart-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 12px; background: var(--soft); min-width: 0;
}
.cs .k { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.cs b { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* 휴대폰 알림 카드 */
.push-note { margin: 8px 0 10px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
#btnPush.on { background: var(--accent-soft); color: var(--accent); }
.chip.ok { background: var(--accent-soft); color: var(--accent); }     /* '정상·켜짐' (방향 색과 별개) */