/* StockNote UI x57 — a quiet, list-led, native-feeling system.
   Design-only layer; preserves x56 component geometry and data semantics. */
:root {
  --bg: #ffffff;
  --bg-accent: #ffffff;
  --panel: #ffffff;
  --panel-soft: #f6f7f9;
  --text: #20242b;
  --text-strong: #171b23;
  --muted: #65707e;
  --muted-soft: #8d97a4;
  --line: #edf0f3;
  --line-strong: #dfe4ea;
  --slate-soft: #f4f6f8;
  --primary: #2878eb;
  --primary-strong: #1766dc;
  --primary-soft: #eaf2ff;
  --primary-soft-strong: #dbeaff;
  --shadow: none;
  --shadow-strong: 0 18px 44px rgba(22,32,47,.13);
  --radius: 14px;
  --radius-card-lg: 16px;
  --page-x: 22px;
  --page-y-top: 29px;
  --card-px: 18px;
  --card-py: 18px;
  --card-gap: 0px;
  --tabbar-h: 66px;
}
html,body { background: #eff1f4 !important; color:var(--text) !important; }
body { font-feature-settings: "ss01" on; }
.app { background:#fff !important; max-width:520px; box-shadow: 0 4px 28px rgba(40,48,61,.055); }
.screen { padding-top:calc(var(--safe-top) + var(--page-y-top)); padding-right:var(--page-x); padding-left:var(--page-x); padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 108px) !important; }
.title,.home-title-v2 { color:var(--text-strong) !important; font-size:30px !important; font-weight:770 !important; letter-spacing:-.045em !important; }
.header-row { margin-bottom:22px !important; min-height:38px; }
.section-title { margin:26px 0 13px !important; }
.section-title h2,.home-section-title-v2 { font-size:17px !important; font-weight:750 !important; letter-spacing:-.035em !important; }
.section-title span,.note-list-count { font-weight:550 !important; }

/* Text and controls: only the primary action is a filled accent. */
.btn { border-radius:12px !important; font-weight:650 !important; letter-spacing:-.015em; }
.btn.primary,.detail-action-btn--trade,.btn.emphasis { background:var(--primary) !important; border-color:var(--primary) !important; }
.btn.secondary,.detail-action-btn--memo { background:var(--primary-soft) !important; color:var(--primary-strong) !important; }
.btn.ghost { background:#f5f6f8 !important; color:#424a55 !important; }
.btn.text { color:var(--primary) !important; background:transparent !important; }
input,textarea,select { border-radius:12px; border-color:var(--line-strong); }
input:focus,textarea:focus,select:focus { border-color:#93bafa; box-shadow:0 0 0 3px rgba(40,120,235,.12); }
.search-box { background:#f5f6f8 !important; min-height:50px; border:1px solid transparent !important; border-radius:13px !important; padding-left:13px !important; }
.search-box:focus-within { border-color:#b4d0fa !important; background:#f9fbff !important; box-shadow:0 0 0 2px rgba(40,120,235,.08) !important; }
.search-box input { font-size:14px !important; color:var(--text) !important; padding:12px 7px !important; }
.search-meta { font-size:12px !important; line-height:1.5; color:#82909f !important; }
.badge { font-weight:650 !important; font-size:11px !important; border-radius:7px !important; padding:0 7px !important; min-height:23px; height:24px !important; }
.badge.tag,.badge.hold,.badge.closed,.badge.avgprice { background:#f4f6f8 !important; color:#636e7b !important; }
.badge.buy { background:#fff1f0 !important; color:#d92d20 !important; }
.badge.sell { background:#eef4ff !important; color:#2563eb !important; }
.icon-btn { width:40px !important; height:40px !important; border-radius:11px !important; background:transparent !important; color:#747f8c !important; }
.icon-btn:active { background:#f3f5f8 !important; }
.icon-btn.is-active { background:#fff6e9 !important; color:#e68a20 !important; }
.divider { background:#eef0f3 !important; }

/* Home — use a clear top summary and simple content rows, not stacked cards. */
.home-v2 { display:block !important; }
.home-header-v2 { margin-bottom:20px !important; }
.home-summary-card-v2 {
  background:#f5f7fa !important; border:0 !important; box-shadow:none !important;
  border-radius:16px !important; padding:22px 21px !important; margin:0 0 35px;
  grid-template-columns:minmax(0,1.15fr) 1px minmax(0,.8fr) 1px minmax(0,.8fr) !important;
  column-gap:15px !important;
}
.home-summary-card-v2 .summary-value-v2 { font-size:26px !important; letter-spacing:-.045em; line-height:1.1; }
.home-summary-card-v2 .summary-label-v2 { font-size:12px !important; color:#788390 !important; }
.home-summary-card-v2 .summary-item-v2:first-child .summary-value-v2 { color:var(--primary) !important; }
.summary-divider-v2 { background:#dce2e9 !important; height:30px !important; }
.home-section-v2 { display:block !important; margin:0 0 35px !important; }
.home-section-head-v2 { margin-bottom:9px !important; min-height:35px; }
.home-section-link-v2 { padding:10px 0 10px 10px !important; color:#7d8896 !important; font-size:13px !important; font-weight:550 !important; }
.home-section-link-v2:after { content:" ›"; font-size:17px; vertical-align:-1px; }
.home-list-card { background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:visible !important; }
.home-list-row { border-bottom:1px solid #edf0f3 !important; }
.home-list-row + .home-list-row { border-top:0 !important; }
.home-list-row-inner { padding:11px 0 !important; min-height:72px !important; }
.home-row-main--full { padding:12px 0 !important; min-height:72px !important; }
.home-row-main { column-gap:12px; }
.home-list-row .row-logo-slot { width:38px; height:38px; }
.row-name { font-size:15px !important; font-weight:700 !important; }
.row-ticker { font-size:11px !important; color:#9aa3ac !important; }
.row-subtext { font-size:12px !important; color:#7d8895 !important; }
.row-date { font-size:11px !important; }
.row-action-chip,.row-action-chip.is-primary,.row-action-chip.is-review,.row-action-chip.is-trade-review {
  background:#edf4ff !important; border:0 !important; color:#1f70dc !important;
  min-height:32px; border-radius:9px !important; font-size:12px !important; font-weight:650 !important;
}
.home-empty-card { background:#f6f8fa !important; box-shadow:none !important; border:0 !important; border-radius:14px !important; padding:22px !important; }
.home-empty-card h3 { color:#424b56 !important; font-weight:650 !important; font-size:15px !important; }
.home-empty-card p { line-height:1.6 !important; color:#828d9a !important; }
.home-empty-card--large { padding:25px 20px !important; }
.data-management-fold { margin-top:22px !important; border-color:#eef0f3 !important; }
.data-management-summary { color:#687381 !important; }
.data-management-summary strong { font-weight:650; }

/* Notes — a native-feeling reading list, not a gallery of cards with footers. */
.note-list-head { margin-top:26px !important; margin-bottom:5px !important; }
.note-list-head__right { gap:16px !important; }
.note-inline-filter-label,.note-inline-sort-label { font-size:13px !important; font-weight:600 !important; color:#65717f !important; }
.note-inline-filter-caret,.note-inline-sort-caret { font-size:14px !important; color:#9ca5af !important; }
.card.compact-card {
  background:transparent !important; box-shadow:none !important; border:0 !important;
  border-bottom:1px solid #e9edf1 !important; border-radius:0 !important;
  margin:0 !important; padding:20px 0 17px !important;
}
.compact-note-grid { row-gap:7px !important; column-gap:11px !important; }
.compact-note-title { gap:6px !important; }
.compact-note-title strong { font-size:17px !important; color:#20262e !important; font-weight:740 !important; }
.compact-note-title .small { font-size:11px !important; color:#99a2ae !important; }
.compact-note-reason { font-size:14px !important; color:#434e59 !important; line-height:1.55 !important; margin-top:3px !important; }
.compact-note-snippet { color:#88929d !important; font-size:12px !important; line-height:1.6 !important; }
.compact-note-keywords { gap:3px 12px !important; margin-top:3px !important; }
.compact-note-keywords .mini-keyword {
  background:transparent !important; padding:0 !important; border:0 !important;
  color:#86919e !important; height:auto !important; line-height:1.4 !important; font-size:11px !important;
}
.compact-note-keywords .mini-keyword.invalid-tone { color:#b97132 !important; }
.compact-meta { font-size:11px !important; color:#a1aab4 !important; margin-top:11px !important; }
.card.compact-card .inline-actions-2 { justify-content:flex-end !important; margin-top:10px !important; gap:6px !important; }
.card.compact-card .inline-actions-2 .btn {
  flex:0 0 auto !important; width:auto !important; min-height:34px !important;
  padding:0 11px !important; font-size:12px !important; border-radius:8px !important;
}
.card.compact-card .inline-actions-2 .btn.ghost { background:#f5f6f8 !important; color:#697685 !important; }
.card.compact-card .inline-actions-2 .btn.secondary { background:#edf4ff !important; color:#1f70dc !important; }

/* Trading / reviews — dense editorial rows; the content is the hero. */
.card[data-trade-card-id],.card[data-review-card-id] {
  padding:20px 0 !important; margin:0 !important; border:0 !important;
  border-bottom:1px solid #e9edf1 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
}
.card[data-trade-card-id] .divider,.card[data-review-card-id] .divider { margin:12px 0 !important; background:#edf0f3 !important; }
.card[data-trade-card-id] .trade-record-grid,.card[data-review-card-id] .review-record-grid { column-gap:10px !important; }
.card[data-trade-card-id] .trade-record-title strong,.card[data-review-card-id] .review-record-title strong { color:#222831 !important; font-size:15px !important; font-weight:740 !important; }
.card[data-trade-card-id] .trade-record-meta,.card[data-review-card-id] .review-record-meta { color:#929ca8 !important; font-size:11px !important; }
.card[data-trade-card-id] .trade-record-actions,.card[data-review-card-id] .review-record-actions { gap:1px !important; }
.card[data-trade-card-id] .trade-record-logo { padding-top:0 !important; }
.card[data-trade-card-id] .trade-record-title,.card[data-trade-card-id] .trade-record-actions { min-height:40px !important; align-items:center !important; }
.record-link-row { margin-top:9px !important; gap:6px 18px !important; }
.mini-link { min-height:32px !important; padding:0 !important; background:transparent !important; border:0 !important; color:#64768b !important; font-size:12px !important; font-weight:600 !important; }
.mini-link:active { color:var(--primary) !important; }
.note-line { color:#505c69 !important; font-size:13px !important; line-height:1.58 !important; }
.card[data-trade-card-id] .badge.tag,.card[data-review-card-id] .badge.tag { background:#f5f6f8 !important; color:#727c89 !important; }
.trade-summary-line { border-bottom:1px solid #eef0f3; padding:0 0 15px !important; margin:0 0 3px !important; }
.trade-summary-line strong { color:#4e5866 !important; }
.card[data-trade-card-id] .trade-record-pnl .pnl-profit,
.card[data-trade-card-id] .trade-record-pnl .pnl-rate,
.card[data-review-card-id] .review-record-pnl .pnl-profit,
.card[data-review-card-id] .review-record-pnl .pnl-rate {
  background:transparent !important; border-radius:0 !important; padding:0 !important;
}

/* Review navigation: underline tabs, direct search and optional pending work. */
.review-segment-row { background:transparent !important; border:0 !important; border-bottom:1px solid #e9edf1 !important; border-radius:0 !important; padding:0 !important; gap:0 !important; margin:0 0 22px !important; }
.review-segment-row .segment { min-height:45px; border-radius:0 !important; font-size:14px; font-weight:600; border-bottom:2px solid transparent; }
.review-segment-row .segment.active { background:transparent !important; box-shadow:none !important; color:var(--text-strong) !important; border-bottom-color:var(--primary) !important; font-weight:750; }
.review-search-section { margin:0 0 24px !important; }
.review-search-section .search-meta { margin-top:6px !important; }
.review-pending-section { background:#f7f9fb !important; border:0 !important; border-radius:14px !important; padding:16px !important; margin:0 0 20px !important; }
.review-pending-section .section-title { margin:0 0 8px !important; }
.review-pending-section .list-item { border-top:1px solid #e6ebf0; }
.review-records-grid { gap:0 !important; }
.card.section-card:not(.analysis-hero-card) { background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important; }
.review-records-grid .card.section-card { margin:0 !important; }
.analysis-hero-card { border:0 !important; padding:20px !important; background:#f6f8fa !important; border-radius:16px !important; }
.analysis-quick-badge { border-radius:8px !important; }
.analysis-metric-grid .metric,.detail-metrics-grid .metric { background:#f5f7f9 !important; border:0 !important; border-radius:12px !important; }
.analysis-diagnosis-line,.analysis-compare-line,.analysis-scope-banner { background:#f5f7f9 !important; border-radius:10px !important; }

/* Detail: strong key information, then restrained dividers and lists. */
.detail-collapsible-section { border:1px solid #edf0f3 !important; border-radius:13px !important; box-shadow:none !important; }
.detail-collapsible-summary { min-height:52px; }
.detail-collapsible-summary strong { font-size:15px !important; }
.detail-collapsible-title span { font-size:12px !important; }
.detail-trade-preview-modal-row { background:#f6f7f9 !important; border:0 !important; border-radius:10px !important; }
.card:not([data-trade-card-id]):not([data-review-card-id]):not(.compact-card) { border-radius:15px !important; box-shadow:none !important; }

/* Chrome: a calm bottom bar and a right-side floating compose control. */
.tabbar { width:min(520px,100%) !important; background:rgba(255,255,255,.97) !important; border-top:1px solid #eef0f3 !important; }
.tab { color:#a0a9b5 !important; font-weight:550 !important; font-size:11px !important; }
.tab.active { color:var(--primary) !important; font-weight:750 !important; }
.tab .tab-ico { min-height:24px; }
.quick-action-dock { left:auto !important; right:max(18px,calc((100vw - 520px)/2 + 18px)); transform:none !important; width:320px !important; max-width:calc(100vw - 32px) !important; }
.quick-action-handle {
  left:auto !important; right:0 !important; transform:none !important;
  height:46px !important; width:95px !important; border-radius:13px !important;
  background:var(--primary) !important; box-shadow:0 6px 16px rgba(40,120,235,.18) !important;
}
.quick-action-handle:active { transform:none !important; }
.quick-action-handle__bars::before { content:"+ 작성" !important; font-size:14px !important; font-weight:700 !important; }
.quick-action-dock.is-open .quick-action-handle__bars::before { content:"닫기" !important; }
.quick-action-sheet { left:auto !important; right:0 !important; transform:translate3d(0,calc((1 - var(--quick-progress)) * 12px),0) !important; border-radius:15px !important; width:320px !important; max-width:100% !important; }
.quick-action-item { padding:15px 16px !important; }
.quick-action-item__hint { color:#95a0ad !important; }
.logo-attribution { top:calc(var(--safe-top) + 16px) !important; right:max(13px,calc((100vw - 520px)/2 + 13px)) !important; font-size:9px !important; opacity:.7 !important; }
.modal { border-radius:22px 22px 0 0 !important; box-shadow:0 -9px 28px rgba(20,29,45,.1) !important; }
.modal.center { border-radius:18px !important; }
.modal-title { font-weight:750 !important; }
.field label { font-weight:650 !important; }

@media (max-width:420px) {
  :root { --page-x:20px; --page-y-top:27px; }
  .home-summary-card-v2 { padding:18px 17px !important; column-gap:10px !important; }
  .compact-note-grid { column-gap:8px !important; }
  .card.compact-card .inline-actions-2 { margin-top:8px !important; }
  .analysis-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .quick-action-dock { right:16px !important; }
  .quick-action-handle { width:91px !important; }
}
@media (max-width:355px) {
  :root { --page-x:15px; }
  .home-summary-card-v2 { padding:17px 13px !important; column-gap:8px !important; }
  .compact-note-status-primary { gap:3px !important; }
  .compact-note-title strong { font-size:15px !important; }
  .compact-note-title .small { display:none !important; }
  .home-list-row-inner { grid-template-columns:minmax(0,1fr) auto; column-gap:6px; }
  .row-action-chip { padding:0 7px !important; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* x57: Small in-row actions leave each stock thesis as the primary content. */
.compact-note-actions {
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap;
  gap:4px 12px; margin-top:6px;
}
.compact-note-link {
  min-height:40px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 6px; gap:5px; color:#6d7887; font-size:12px; font-weight:650;
  border-radius:8px;
}
.compact-note-link span { font-size:18px; line-height:1; margin-top:-1px; }
.compact-note-link--memo { color:var(--primary); padding:0 8px; }
.compact-note-link:active { background:#f1f5fb; }
.search-box input { padding-left:41px !important; padding-right:35px !important; }
.search-box .search-icon { left:14px !important; }
.review-pending-section .section-title { margin:0 0 10px !important; }
.review-pending-section .compact-list-item:first-of-type { border-top:0 !important; }

/* Detail title must stay readable alongside three management controls. */
#notesScreen .header-row:has(.note-detail-header-brand) { gap:5px !important; }
#notesScreen .note-detail-header-brand { gap:7px !important; }
#notesScreen .note-detail-header-brand .row-logo-slot--lg { width:38px !important; height:38px !important; }
#notesScreen .note-detail-actions { gap:3px !important; }
#notesScreen .note-detail-actions .icon-btn { width:40px !important; height:40px !important; }
#notesScreen .stock-detail-title { font-size:24px !important; }
#notesScreen .stock-detail-title.title-md { font-size:22px !important; }
#notesScreen .stock-detail-title.title-sm { font-size:20px !important; }
#notesScreen .stock-detail-title-text { padding-right:5px !important; }

/* The form sheets must have their own inset; list typography must not reach their edge. */
#modalRoot .modal { padding:20px 20px calc(22px + var(--safe-bottom)) !important; }
#modalRoot .modal-head { align-items:center; margin-bottom:18px; }
#modalRoot .modal-title { font-size:21px !important; line-height:1.3; }
#modalRoot .field label { color:#5d6876 !important; }
#modalRoot input,#modalRoot textarea,#modalRoot select { border-radius:12px; }

.home-summary-card-v2.is-clear .summary-item-v2:first-child .summary-value-v2 { color:#252b35 !important; }