/* Uptrading-prototype.html · approved September 12 design, member pages. */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/assets/fonts/PretendardVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
}

body { font-variant-numeric: tabular-nums; }
.short-term-condition {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  color: var(--warn);
  background: var(--amber-bg);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.overbought-age, .overbought-decline { white-space: nowrap; }
.overbought-decline { margin-left: auto; }
.overbought-help { color: var(--text-2); font-size: .75rem; line-height: 1.6; }
.overbought-help summary { width: fit-content; min-height: 44px; display: flex; align-items: center; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.overbought-help summary:focus-visible { outline: 2px solid var(--pri); outline-offset: 3px; border-radius: 3px; }
.overbought-help p { margin: 0 0 8px; overflow-wrap: anywhere; }
.hc-wrap:has(> .overbought-help) { flex-direction: column; }
.hc-wrap > .overbought-help { padding: 0 14px; }
.stock-list-row > .overbought-help { padding-inline: 20px; }
.hc-meta .short-term-condition { flex-basis: 100%; }
.stock-list-link > .short-term-condition { grid-column: 1 / -1; }
.overbought-summary { grid-column: 1 / -1; min-width: 0; }
.overbought-summary > .short-term-condition { display: flex; font-size: 12px; padding: 6px 9px; }
.kr-ai-body > .short-term-condition { margin-top: 8px; }
.kr-ai-card .kr-ai-body > .short-term-condition { display: flex; width: fit-content; margin-left: auto; }
@keyframes web-page-enter { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes web-chart-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: no-preference) {
  main.wrap { animation: web-page-enter 200ms var(--ease) both; }
  .kr-trend-chart[data-web-chart-enter='true'] { animation: web-chart-reveal 550ms var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Shared shell, using the approved prototype's real browser safe areas. */
html { scroll-padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
body { font-variant-numeric: tabular-nums; }
body.has-tabbar { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
.wrap { padding-inline:16px; min-width:0; }
.card, .setlist, .acct, .report-row, .pcell, .sx-cell, .tsl-gcell {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow);
}
.card { padding:16px; }
.card + .card { margin-top:12px; }
.badge, .dchip { border-radius:var(--r-pill); font-size:.75rem; }
.up:not(svg *) { color:var(--up); }
.down:not(svg *) { color:var(--down-text); }
.btn { min-height:52px; border-radius:var(--r-md); font-size:1rem; font-weight:800; }
.btn:where(:not(.ghost, .outline, .danger):not(:disabled)), .auth-submit:not(:disabled) { color:var(--on-pri); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--pri); outline-offset:2px; }
button:active:not(:disabled), .card-tap:active { transform:scale(.98); }
.section-label { margin:16px 4px 8px; color:var(--text-2); font-size:.8125rem; font-weight:800; }
.appbar, .market-hero, .strategy-hero, .detail-hero {
  position:relative; isolation:isolate; overflow:hidden; background:var(--hero); color:#fff;
  max-width:var(--col-max); margin-inline:auto; border-radius:0 0 var(--r-xl) var(--r-xl);
}
.appbar::before, .market-hero::before, .strategy-hero::before, .detail-hero::before {
  content:''; position:absolute; z-index:-1; right:-50px; top:-70px; width:240px; height:240px; border-radius:50%; background:rgb(255 255 255 / 8%); pointer-events:none;
}
.appbar { display:flex; align-items:flex-start; gap:10px; border:0; padding:calc(env(safe-area-inset-top, 0px) + 26px) 20px 48px; height:auto; min-height:140px; backdrop-filter:none; }
.appbar-title { flex:1 1 0; min-width:0; font-size:2rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.appbar-dot { display:none; }
.appbar-acts { flex:0 0 auto; gap:8px; margin:0; }
.appbar .appbar-gear, .strategy-hero .appbar-gear, .detail-hero :is(.dhead-back,.dhead-upd,.dhead-settings,.fav-btn-detail) {
  min-width:44px; min-height:44px; border:1px solid rgb(255 255 255 / 35%); border-radius:var(--r-pill); background:rgb(255 255 255 / 16%); color:#fff;
}
.appbar-gear svg { width:22px; height:22px; }
.appbar + main.wrap { position:relative; margin-top:-24px; border-radius:var(--r-xl) var(--r-xl) 0 0; background:var(--bg); padding-top:16px; }
.dhead { padding:calc(env(safe-area-inset-top, 0px) + 16px) 20px 12px; gap:10px; align-items:center; flex-wrap:wrap; }
.dhead-tt { flex:1 1 110px; min-width:0; }
.dhead-tt b, .dhead-tt h1 { font-size:1.1875rem; font-weight:800; }
.dhead-tt small { font-size:.75rem; white-space:normal; overflow-wrap:anywhere; }
.dhead-back, .dhead-settings { width:44px; height:44px; min-width:44px; min-height:44px; border-radius:var(--r-pill); }
.dhead-ico { width:36px; height:36px; border-radius:50%; }
.dhead-upd { min-height:44px; max-width:100%; display:inline-flex; align-items:center; font-size:.75rem; border-radius:var(--r-pill); white-space:normal; }
.dhead-chips { padding-inline:20px; font-size:.75rem; }
.fav-btn-detail { width:44px; height:44px; }
.fav-btn.is-on, [data-theme='light'] .fav-btn.is-on { color:var(--warn); }
.detail-hero { padding-bottom:48px; }
.detail-hero .dhead { position:relative; gap:6px; padding-top:calc(env(safe-area-inset-top, 0px) + 6px); }
.detail-hero .dhead-tt small, .detail-hero .kr-price-meta { color:#E6E6FF; }
.detail-hero .dhead-ico { background:rgb(255 255 255 / 22%); color:#fff; }
.detail-hero .kr-ai-card {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr)); gap:12px;
  margin:8px 20px 0; padding:0; border:0; border-radius:0; box-shadow:none; background:none; color:#fff;
}
.detail-hero .kr-ai-card > .kr-section-head { grid-column:1/-1; }
.detail-hero .kr-ai-card .kr-section-head h2 { font-size:.8125rem; }
.detail-hero .kr-price-row { display:block; margin:0; }
.detail-hero .kr-price { font-size:2rem; line-height:1.15; letter-spacing:-.02em; overflow-wrap:anywhere; }
.detail-hero .kr-change { color:#fff; font-size:.8125rem; }
.detail-hero .kr-price-meta { margin:6px 0 0; text-align:left; font-size:.75rem; }
.detail-hero .kr-ai-body { margin:0; min-width:0; }
.detail-hero .kr-ai-reading { flex-direction:column-reverse; align-items:flex-end; gap:6px; }
.detail-hero .kr-ai-probability { color:#fff; font-size:2.75rem; font-weight:800; line-height:1; letter-spacing:-.03em; }
.detail-hero .kr-ai-direction { font-size:.8125rem; padding:3px 9px; border-radius:var(--r-pill); background:#fff; color:#3B3EC4; }
.detail-hero .kr-ai-copy, .detail-hero .ai-reliability, .detail-hero .kr-ai-band { color:#E6E6FF; font-size:.75rem; }
.detail-hero .kr-ai-badge { color:#fff; background:rgb(255 255 255 / 20%); }
.detail-hero .kr-ai-badge.is-up { background:#fff; color:#D63B41; }
.detail-hero .kr-ai-badge.is-down { background:#fff; color:#1B6FC9; }
.detail-hero .kr-ai-card:has(.kr-ai-pending) .kr-ai-body { grid-column:1/-1; }
.detail-hero .kr-ai-pending p { color:#E6E6FF; }
.detail-hero .sig { padding:0; border:0; background:none; margin-top:12px; }
.detail-hero .sig-head { color:#fff; font-size:.8125rem; }
.detail-hero .g10-labels, .detail-hero .g10-pos { display:none; }
.detail-hero .short-term-condition { color:#9A5B00; background:#FFF3DC; }
.detail-hero .overbought-help { color:#fff; }
.detail-hero + .kr-main { position:relative; margin-top:-24px; border-radius:var(--r-xl) var(--r-xl) 0 0; background:var(--bg); padding-top:16px; }
.kr-main { gap:12px; }
.kr-main .kr-trend-card, .kr-main .soxl-stochastic-card { padding:16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--card-shadow); }
.kr-main .kr-flow-host { padding:0; border:0; }
.kr-section-head h2 { font-size:1rem; }
.kr-report-link { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:52px; padding:16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); color:var(--pri-2); font-weight:800; }
.kr-chart-forecast-line, .kr-chart-forecast-line-w2 { stroke:var(--forecast); }
.kr-chart-forecast-band, .kr-chart-forecast-band-w2 { fill:var(--forecast); }
.kr-chart-forecast-title, .kr-chart-forecast-label { fill:var(--forecast); }
.kr-chart-legend .forecast, .kr-chart-legend .forecast-w2 { background:var(--forecast); }
.kr-forecast-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:12px; border-top:1px solid var(--line); }
.kr-forecast-summary > div { min-width:0; padding:12px 8px; }
.kr-forecast-summary > div + div { border-left:1px solid var(--line); }
.kr-forecast-summary span { display:block; color:var(--text-3); font-size:.75rem; }
.kr-forecast-summary strong { display:block; color:var(--pri-2); font-size:.8125rem; margin-top:4px; }

/* The five links keep existing routes and accessibility labels. */
nav.tabbar, nav.tabbar.native-market-tabbar, nav.tabbar.native-market-ios-tabbar {
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 10px); transform:translateX(-50%);
  width:calc(100% - 28px); max-width:calc(var(--col-max) - 28px); height:auto; min-height:68px;
  padding:6px; gap:2px; border:1px solid var(--line); border-radius:var(--r-pill); background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:var(--shadow); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
nav.tabbar .tab { justify-content:center; min-height:54px; padding:6px 3px; border-radius:var(--r-pill); font-size:.6875rem; line-height:1.25; gap:4px; font-weight:700; }
nav.tabbar .tab .tab-pill { width:24px; height:24px; border-radius:0; }
nav.tabbar .tab svg { width:22px; height:22px; }
nav.tabbar .tab.active, [data-theme='light'] nav.tabbar .tab.active { color:#fff; background:#4F52E0; }
nav.tabbar .tab.active .tab-pill { background:none; }
nav.tabbar .tab-handle { display:none; }
nav.tabbar .tab > span:last-child { height:auto; white-space:normal; overflow:visible; overflow-wrap:anywhere; text-overflow:clip; }
nav.tabbar .market-active-service { display:none; }
nav.tabbar .tab:focus-visible { outline-offset:-3px; }
nav.tabbar .tab.active:focus-visible { outline-color:#fff; }
.donate-bubble { bottom:calc(100px + env(safe-area-inset-bottom, 0px)); border:1px solid var(--line); border-radius:var(--r-pill); animation:none; }
.donate-bubble .db-ico { background:var(--pri-soft); }
.donate-bubble::after { display:none; }

/* More, reports, notifications and authentication share the same surfaces. */
body[data-web-page='settings'] #main { gap:12px; }
body[data-web-page='settings'] .acct { padding:16px; border-radius:var(--r-lg); }
body[data-web-page='settings'] .acct-ava { width:44px; height:44px; border-radius:50%; color:var(--pri-2); background:var(--pri-soft); }
body[data-web-page='settings'] .acct-mail { font-size:.9375rem; overflow-wrap:anywhere; }
body[data-web-page='settings'] .acct-dot { background:var(--pri); animation:none; }
body[data-web-page='settings'] .setlist { border-radius:var(--r-lg); }
body[data-web-page='settings'] .setrow { padding:16px; min-height:64px; gap:12px; }
body[data-web-page='settings'] .setrow .st b { font-size:.9375rem; font-weight:800; }
body[data-web-page='settings'] .setrow .st small { font-size:.75rem; }
body[data-web-page='settings'] .setrow .si { color:var(--pri-2); background:var(--pri-soft); border-radius:50%; }
body[data-web-page='settings'] .seg3 { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px; }
body[data-web-page='settings'] .seg3 button { min-height:48px; border-radius:var(--r-pill); font-size:.8125rem; }
.seg3 button.active, .seg3 button[aria-pressed='true'] { color:var(--pri-2); background:var(--pri-soft); }
.report-row { padding:16px; border-radius:var(--r-lg); }
.report-row-title { font-size:1rem; font-weight:800; }
.report-row-date, .report-detail-date { font-size:.75rem; color:var(--text-3); }
.report-back { min-width:44px; min-height:44px; border-radius:var(--r-pill); background:var(--surface); color:var(--pri-2); padding:8px 14px; }
.report-detail { padding:20px; border:1px solid var(--line); }
.report-detail-title { font-size:1.5rem; }
.report-body { font-size:.9375rem; line-height:1.75; overflow-wrap:anywhere; }
.report-body img, .report-body video { max-width:100%; height:auto; }
.report-body table { display:block; max-width:100%; overflow-x:auto; }
.notification-card, .notification-row, .notification-detail, .notification-item { border-radius:var(--r-lg); background:var(--surface); border-color:var(--line); }
.auth { padding-top:env(safe-area-inset-top, 0px); }
.auth-body { padding:20px 20px 32px; }
.auth-top { height:auto; min-height:60px; }
.back-chip { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); }
.auth-h1 { font-size:2rem; letter-spacing:-.02em; }
.auth-sub { font-size:.8125rem; color:var(--text-2); }
.f-label { font-size:.8125rem; }
.f-box { min-height:56px; height:auto; border:1px solid var(--line); background:var(--surface); border-radius:var(--r-md); }
.f-box input { min-height:54px; }
.f-box:focus-within { border-color:var(--pri); box-shadow:0 0 0 2px var(--pri-soft); }
.auth-submit { min-height:52px; font-size:1rem; border-radius:var(--r-md); background:var(--pri); }
.auth-links, .auth-note, .form-error, .auth-footer { font-size:.8125rem; }
dialog { width:calc(100% - 32px); max-width:480px; border:1px solid var(--line); border-radius:var(--r-xl); padding:24px 20px; background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
dialog::backdrop { background:rgb(28 29 59 / 45%); }

@media (max-width:359px) {
  .appbar-title { font-size:1.75rem; }
  .appbar { padding-inline:16px; }
  .detail-hero .dhead { padding-inline:16px; gap:8px; }
  .detail-hero .kr-ai-card { margin-inline:16px; }
  .detail-hero .kr-ai-probability { font-size:2.25rem; }
  nav.tabbar .tab { font-size:.625rem; padding-inline:1px; }
}

/* Live legacy tracker sections keep their own renderer, with the same hero vocabulary. */
body[data-web-tracker] > .dhead { background:var(--hero); color:#fff; border-radius:0 0 var(--r-xl) var(--r-xl); padding-bottom:28px; }
body[data-web-tracker] > .dhead .dhead-tt small { color:#E6E6FF; }
body[data-web-tracker] > .dhead :is(.dhead-back,.dhead-settings,.dhead-upd,.fav-btn-detail) { background:rgb(255 255 255 / 16%); border:1px solid rgb(255 255 255 / 35%); color:#fff; border-radius:var(--r-pill); }
body[data-web-tracker] .ai-prediction-card { position:relative; isolation:isolate; overflow:hidden; border:0; background:var(--hero); color:#fff; border-radius:var(--r-xl); padding:20px; }
body[data-web-tracker] .ai-prediction-card::before { content:''; position:absolute; z-index:-1; right:-50px; top:-70px; width:240px; height:240px; border-radius:50%; background:rgb(255 255 255 / 8%); pointer-events:none; }
body[data-web-tracker] .ai-prediction-card :is(.ai-prediction-card__head h2,.kr-ai-probability,.ai-reliability,.ai-reliability-note,.kr-ai-pending p,.sig-head,.g10-labels,.state-empty,.state-empty small) { color:#fff; }
body[data-web-tracker] .ai-prediction-card .kr-ai-probability { font-size:2.75rem; line-height:1; font-weight:800; }
body[data-web-tracker] .ai-prediction-card .kr-ai-direction { font-size:1rem; color:#3B3EC4; padding:3px 9px; border-radius:var(--r-pill); background:#fff; }
body[data-web-tracker] .ai-prediction-card .kr-ai-badge { background:rgb(255 255 255 / 20%); color:#fff; }
body[data-web-tracker] .ai-prediction-card .sig { background:transparent; border:0; }
body[data-web-tracker] .ai-prediction-card .short-term-condition { background:#FFF3DC; color:#9A5B00; }
body[data-web-tracker] .ai-prediction-card .overbought-help { color:#fff; }
body[data-web-tracker] :is(.pgrid,.sx-grid,.tsl-grid) { gap:8px; }
body[data-web-tracker] :is(.pcell,.sx-cell,.tsl-gcell) { padding:12px; border-radius:var(--r-lg); }
body[data-web-tracker] :is(.pcell .lb,.sx-cell .lb,.tsl-gcell .lb) { font-size:.75rem; }
body[data-web-tracker] :is(.pcell .v,.sx-cell .v,.tsl-gcell .v) { font-size:1.1875rem; }
body[data-web-tracker] .card h2 { font-size:1rem; }
body[data-service] { --kr-accent:var(--pri); --kr-accent-soft:var(--pri-soft); }
:root, [data-theme='light'] { --kr-forecast:var(--forecast); --ma-short:#B45309; --ma-medium:#1B6FC9; --ma-long:#B4236B; }
[data-theme='dark'] { --ma-short:#F3B462; --ma-medium:#79B4F5; --ma-long:#F38CC2; }
body[data-web-page='settings'] .appbar { flex-wrap:wrap; }
body[data-web-page='settings'] .appbar-title { flex:1 1 100px; }
body[data-web-page='settings'] .appbar .acct { flex:1 0 100%; padding:0; margin-top:20px; border:0; border-radius:0; background:none; color:#fff; box-shadow:none; }
body[data-web-page='settings'] .appbar .acct-ava { width:48px; height:48px; background:rgb(255 255 255 / 22%); color:#fff; }
body[data-web-page='settings'] .appbar .acct-status { color:#E6E6FF; font-size:.75rem; }
body[data-web-page='settings'] .appbar .acct-dot { background:#C8CCFF; }
body[data-web-page='settings'] .appbar .acct-mail { color:#fff; }
body[data-web-header='plain'] .appbar { min-height:64px; padding:calc(env(safe-area-inset-top, 0px) + 6px) 16px 8px; align-items:center; background:var(--bg); color:var(--text); border-radius:0; }
body[data-web-header='plain'] .appbar::before { content:none; }
body[data-web-header='plain'] .appbar-title { flex:1; font-size:1.5rem; }
body[data-web-header='plain'] .appbar .appbar-gear { color:var(--text-2); background:var(--surface); border-color:var(--line); }
body[data-web-header='plain'] .appbar + main.wrap { margin-top:0; border-radius:0; padding-top:8px; }
.appbar-back { width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--surface); box-shadow:var(--card-shadow); }
.appbar-back svg { width:24px; height:24px; }
body:has(#report-detail-view:not([hidden])) > .appbar { display:none; }
body:has(#report-detail-view:not([hidden])) > main.wrap { margin-top:0; padding-top:calc(env(safe-area-inset-top, 0px) + 8px); }

.detail-hero .dhead-tt h1 { font-size:1.1875rem; }
.strategy-header-actions { flex:0 0 auto; }

/* Hidden state and signal semantics remain controlled by existing page renderers. */
html[data-web-redesign] .dhead-upd[hidden] { display:none; }
html[data-web-redesign] .donate-bubble { display:none; }
.detail-hero .ai-trade-signal .sig-title,
body[data-web-tracker] .ai-prediction-card .ai-trade-signal .sig-title { color:#fff; }
.detail-hero .ai-trade-signal .dot,
body[data-web-tracker] .ai-prediction-card .ai-trade-signal .dot { background:#FFD98A; }
.detail-hero .g10-labels { display:flex; color:#E6E6FF; }
.detail-hero .g10-labels span,
body[data-web-tracker] .ai-prediction-card .g10-labels span { color:#E6E6FF; }
.detail-hero .dhead-tt { flex:1 1 4em; min-width:min(100%,4em); }
.detail-hero .dhead-tt h1 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.detail-hero .dhead-upd { width:64px; padding:4px 6px; justify-content:center; }