:root{
  --paper:#f6f0e1;
  --surface:#ffffff;
  --surface-alt:#eae1c8;
  --ink:#221d15;
  --ink-muted:#6d6350;
  --line:#ddd2b3;
  --navy:#1e3450;
  --navy-tint:#e6e5df;
  --up:#af332e;
  --up-tint:#f3e2da;
  --down:#2f6690;
  --down-tint:#e2e7e6;
  --gold:#a87423;
  --gold-tint:#f0e3c6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#181410;
    --surface:#221b15;
    --surface-alt:#28211a;
    --ink:#f1e8d6;
    --ink-muted:#a89c85;
    --line:#3b3122;
    --navy:#8fb2d6;
    --navy-tint:#27313c;
    --up:#e0847c;
    --up-tint:#3a2620;
    --down:#7fb0d2;
    --down-tint:#1f2b2c;
    --gold:#d9ac54;
    --gold-tint:#332613;
  }
}

*{ box-sizing:border-box; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans KR","Noto Sans KR",system-ui,sans-serif;
  line-height:1.7;
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{ color:var(--navy); }
.num{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }

.site-header{
  border-bottom:1px solid var(--line);
  padding:20px 24px;
}
.site-header .inner{
  max-width:820px;
  margin:0 auto;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.brand{
  font-family:"Noto Serif KR",serif;
  font-weight:700;
  font-size:22px;
  text-decoration:none;
  color:var(--ink);
}
.site-nav{
  display:flex;
  gap:20px;
}
.site-nav a{
  font-family:"IBM Plex Sans KR",sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-muted);
  text-decoration:none;
}
.site-nav a:hover{ color:var(--navy); }
.tagline{
  font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--ink-muted);
}

.page{ max-width:820px; margin:0 auto; padding:40px 24px 100px; flex:1 0 auto; }

.messages{ list-style:none; margin:0 0 20px; padding:0; }
.message{
  font-size:14px;
  padding:11px 16px;
  border-radius:4px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  margin-bottom:8px;
}
.message.success{ border-color:var(--navy); color:var(--navy); }
.message.error{ border-color:var(--up); color:var(--up); }
.message.info{ border-color:var(--down); color:var(--down); }

.login-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
}

.date-label{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:18px;
}

/* ---------- Search & watchlist ---------- */
.search-form{
  display:flex;
  gap:8px;
  margin-bottom:16px;
}
.search-form input{
  flex:1;
  font-family:"IBM Plex Sans KR",sans-serif;
  font-size:14.5px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  color:var(--ink);
}
.search-form input:focus{
  outline:2px solid var(--navy);
  outline-offset:1px;
}
.search-form button{
  font-family:"IBM Plex Sans KR",sans-serif;
  font-size:14px;
  font-weight:600;
  padding:0 20px;
  border:1px solid var(--navy);
  border-radius:4px;
  background:var(--navy);
  color:var(--surface);
  cursor:pointer;
}
.search-form button:hover{ opacity:0.9; }

.watchlist{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:32px;
}
.watchlist-label{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin-right:4px;
}
.watchlist-chip{
  font-size:13px;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--ink);
  text-decoration:none;
  background:var(--surface);
}
.watchlist-chip:hover{ border-color:var(--navy); color:var(--navy); }

.chart-cta{
  font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;
  color:var(--navy);
}

.briefing-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  list-style:none;
  padding:0;
  margin:0;
}
.briefing-card{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:18px 22px;
  text-decoration:none;
  color:inherit;
}
.briefing-card .row1{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:6px;
}
.briefing-date{
  display:inline-block;
  font-size:12px;
  color:var(--ink-muted);
  background:var(--surface-alt);
  padding:2px 8px;
  border-radius:3px;
  margin-right:10px;
  vertical-align:middle;
}
.briefing-card .name{
  font-family:"Noto Serif KR",serif;
  font-weight:700;
  font-size:18px;
}
.briefing-card .ticker{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  color:var(--ink-muted);
  margin-left:6px;
}
.change{
  font-family:"IBM Plex Mono",monospace;
  font-weight:600;
  padding:3px 9px;
  border-radius:3px;
  font-size:13.5px;
}
.change.up{ background:var(--up-tint); color:var(--up); }
.change.down{ background:var(--down-tint); color:var(--down); }

.callout{
  font-size:13.5px;
  padding:14px 16px;
  border-radius:4px;
  border-left:3px solid var(--line);
  margin:16px 0;
}
.callout.up{ background:var(--up-tint); color:var(--up); border-left-color:var(--up); }
.callout.down{ background:var(--down-tint); color:var(--down); border-left-color:var(--down); }
.callout.warn{ background:var(--gold-tint); color:var(--gold); border-left-color:var(--gold); }
.callout code{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  background:rgba(0,0,0,0.06);
  padding:1px 5px;
  border-radius:2px;
}

.tbl-wrap{ overflow-x:auto; }
table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
th{
  text-align:left;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-muted);
  font-weight:500;
  padding:0 10px 8px 0;
  border-bottom:1px solid var(--line);
}
td{
  padding:10px 10px 10px 0;
  border-bottom:1px solid var(--line);
}
td a{ color:var(--ink); text-decoration:none; font-weight:600; }
td.num{ font-family:"IBM Plex Mono",monospace; }
tr:last-child td{ border-bottom:none; }
tr.peer-self td{ background:var(--navy-tint); }
tr.peer-self td:first-child{ border-left:3px solid var(--navy); }

.peer-summary{
  font-family:"Noto Serif KR",serif;
  font-size:15.5px;
  font-weight:600;
  background:var(--gold-tint);
  color:var(--ink);
  border-left:3px solid var(--gold);
  padding:12px 16px;
  border-radius:0 4px 4px 0;
  margin:0 0 16px;
}
.peer-table th{ white-space:nowrap; }
.info-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--line);
  color:var(--ink-muted);
  font-family:"IBM Plex Sans KR",sans-serif;
  font-size:10px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  cursor:help;
  position:relative;
  vertical-align:middle;
}
/* 물음표 아이콘의 툴팁은 table wrapper의 overflow-x:auto 때문에 CSS ::after로는
   잘려서 안 보인다 (overflow-x가 visible이 아니면 overflow-y도 자동으로 클리핑되는
   스펙 때문). 그래서 JS로 위치를 계산해 position:fixed 툴팁 하나를 body 기준으로
   띄운다 - briefing/base.html 근처 스크립트에서 제어. */
.peer-tooltip{
  position:fixed;
  width:210px;
  background:var(--ink);
  color:var(--paper);
  font-family:"IBM Plex Sans KR",sans-serif;
  font-size:11.5px;
  font-weight:400;
  line-height:1.5;
  padding:9px 11px;
  border-radius:5px;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease;
  z-index:50;
  pointer-events:none;
}
.peer-tooltip.visible{ opacity:1; visibility:visible; }
.peer-table .metric-cell{ min-width:130px; }
.metric-value{
  font-family:"IBM Plex Mono",monospace;
  font-weight:600;
  font-size:14px;
}
.badge-best{
  display:inline-block;
  margin-left:6px;
  font-size:10.5px;
  font-weight:600;
  padding:1px 7px;
  border-radius:8px;
  background:var(--up-tint);
  color:var(--up);
  vertical-align:middle;
}
.metric-bar-track{
  height:4px;
  background:var(--line);
  border-radius:2px;
  margin-top:7px;
  overflow:hidden;
}
.metric-bar-fill{
  height:100%;
  border-radius:2px;
  background:var(--ink-muted);
}
.metric-bar-fill.best{ background:var(--up); }
.briefing-card .comment{
  color:var(--ink-muted);
  font-size:14.5px;
}
.empty{
  color:var(--ink-muted);
  font-size:14.5px;
  padding:40px 0;
}
.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-top:28px;
}
.pager a{
  font-size:13.5px;
  font-weight:600;
  color:var(--navy);
  text-decoration:none;
}
.pager-status{
  font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;
  color:var(--ink-muted);
}

.detail-head{ margin-bottom:24px; }
.detail-head h1{
  font-family:"Noto Serif KR",serif;
  font-size:32px;
  margin:6px 0 4px;
}
.detail-head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.detail-head-row h1{ margin:6px 0 4px; }
.favorite-form{ display:inline-block; }
.favorite-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:"IBM Plex Sans KR",sans-serif;
  font-size:13.5px;
  font-weight:600;
  padding:7px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  color:var(--ink-muted);
  cursor:pointer;
  text-decoration:none;
}
.favorite-btn:hover{ border-color:var(--gold); color:var(--gold); }
.favorite-btn.active{
  border-color:var(--gold);
  color:var(--gold);
  background:var(--gold-tint);
}
/* 스탯 박스를 "노트에 붙여둔 메모지" 느낌으로 - 장중노트라는 이름에 맞게
   깔끔한 표 대신 살짝 기울어진 카드 + 마스킹테이프 포인트를 준다. 숫자
   자체(.value)는 정렬·가독성이 중요해서 계속 모노스페이스를 쓰고, 라벨만
   손글씨 폰트로 바꿔 "메모"스러움을 낸다. */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:16px 14px;
  margin:24px 0;
}
.stat{
  position:relative;
  background:var(--surface);
  padding:16px 16px 14px;
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 2px 6px rgba(34,29,21,0.06), 0 1px 2px rgba(34,29,21,0.05);
}
.stat::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  width:38px;
  height:16px;
  background:var(--navy);
  opacity:.35;
  transform:translateX(-50%) rotate(-3deg);
  border-radius:1px;
}
.stat-grid .stat:nth-child(4n+1){ transform:rotate(-0.8deg); }
.stat-grid .stat:nth-child(4n+2){ transform:rotate(0.7deg); }
.stat-grid .stat:nth-child(4n+3){ transform:rotate(-0.5deg); }
.stat-grid .stat:nth-child(4n+4){ transform:rotate(0.9deg); }
.stat .label{
  font-family:"Gaegu",cursive;
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  display:block;
  margin-bottom:3px;
}
.stat .value{
  font-family:"IBM Plex Mono",monospace;
  font-size:16px;
  font-weight:600;
}

/* 시가·고가·저가·종가·거래량을 한눈에 구분할 수 있도록 테이프 색을 다르게 */
.stat-close::before{ background:var(--navy); }
.stat-close.up{ background:var(--up-tint); }
.stat-close.up::before{ background:var(--up); }
.stat-close.up .value{ color:var(--up); }
.stat-close.down{ background:var(--down-tint); }
.stat-close.down::before{ background:var(--down); }
.stat-close.down .value{ color:var(--down); }

.stat-high::before{ background:var(--up); }
.stat-high .value{ color:var(--up); }
.stat-low::before{ background:var(--down); }
.stat-low .value{ color:var(--down); }
.stat-open::before{ background:var(--ink-muted); }
.stat-volume::before{ background:var(--gold); }
.comment-block{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:20px 22px;
  font-size:15px;
  margin-top:24px;
}
/* 코멘트 안 CKEditor 리치텍스트(텍스트-이미지-텍스트 형식) 렌더링 */
.rich-content p{ margin:0 0 14px; line-height:1.75; }
.rich-content p:last-child{ margin-bottom:0; }
.rich-content img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:4px;
  margin:18px 0;
}
.rich-content ul, .rich-content ol{ margin:0 0 14px; padding-left:22px; line-height:1.75; }
.rich-content blockquote{
  margin:0 0 14px;
  padding:2px 16px;
  border-left:3px solid var(--gold);
  color:var(--ink-muted);
}
.rich-content a{ color:var(--navy); }
.disclaimer{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--ink-muted);
}
.back-link{
  display:inline-block;
  margin-bottom:20px;
  font-size:13.5px;
  color:var(--navy);
  text-decoration:none;
}
.chart-link{
  display:inline-block;
  margin-top:16px;
  font-size:14px;
  font-weight:600;
  color:var(--navy);
  text-decoration:none;
}

/* ---------- Chart page ---------- */
.chart-legend{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:16px 0 8px;
  font-size:12.5px;
  color:var(--ink-muted);
}
.chart-legend .dot{
  display:inline-block;
  width:9px;height:9px;
  border-radius:50%;
  margin-right:5px;
  vertical-align:middle;
}
/* 큰 콘텐츠 박스(차트·표 담는 곳)도 다이어리 페이지처럼 - 옅은 줄노트 배경 +
   왼쪽 여백선 + 위쪽 마스킹테이프. 실제 데이터(차트·표)는 그 위에 또렷하게
   얹히도록 배경 요소는 전부 아주 옅게 처리한다. */
.chart-panel{
  position:relative;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 27px,
      rgba(34,29,21,.045) 28px
    ),
    var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px 22px 8px 34px;
  margin-top:8px;
  box-shadow:0 2px 10px rgba(34,29,21,.06);
}
.chart-panel::before{
  content:"";
  position:absolute;
  top:6px; bottom:6px;
  left:23px;
  width:1px;
  background:var(--up);
  opacity:.3;
}
.chart-panel::after{
  content:"";
  position:absolute;
  top:-8px;
  left:34px;
  width:44px;
  height:15px;
  background:var(--gold);
  opacity:.4;
  transform:rotate(-4deg);
  border-radius:1px;
}
.chart-panel.rsi{
  margin-top:14px;
  padding-bottom:14px;
}
.chart-panel h3{
  font-family:"Gaegu",cursive;
  font-weight:700;
  font-size:17px;
  color:var(--ink);
  letter-spacing:0;
  text-transform:none;
  margin:0 0 12px;
}
.rsi-readout{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  margin-bottom:10px;
}
.rsi-readout .tag{ margin-left:6px; }
.tag{
  display:inline-block;
  font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;
  font-weight:600;
  padding:2px 8px;
  border-radius:3px;
}
.tag.up{ background:var(--up-tint); color:var(--up); }
.tag.down{ background:var(--down-tint); color:var(--down); }
.chart-note{
  font-size:12.5px;
  color:var(--ink-muted);
  margin:10px 0 4px;
}

/* ---------- Screening ---------- */
.screening-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:8px;
}
.rank-list{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:rank;
}
.rank-list li{ counter-increment:rank; }
.rank-list li + li{ border-top:1px solid var(--line); }
.rank-list a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  text-decoration:none;
  color:var(--ink);
}
.rank-list a::before{
  content:counter(rank);
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  color:var(--ink-muted);
  width:16px;
}
.rank-name{ flex:1; font-size:14px; }
.rank-value{ font-size:13px; color:var(--ink-muted); }

@media (max-width:640px){
  .screening-grid{ grid-template-columns:1fr; }
}

/* ---------- IPO calendar ---------- */
.cal-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.cal-title{
  font-family:"Noto Serif KR",serif;
  font-size:26px;
  font-weight:700;
}
.cal-nav{
  font-size:13.5px;
  font-weight:600;
  color:var(--navy);
  text-decoration:none;
  white-space:nowrap;
}
.cal-nav:hover{ text-decoration:underline; }

.ipo-calendar{
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  margin:20px 0 14px;
}
.ipo-cal-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  background:var(--surface-alt);
}
.ipo-cal-weekdays span{
  padding:9px 6px;
  text-align:center;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.05em;
  color:var(--ink-muted);
}
.ipo-cal-week{
  display:grid;
  grid-template-columns:repeat(7,1fr);
}
.ipo-cal-day{
  min-height:78px;
  padding:6px 5px;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.ipo-cal-day:nth-child(7n+1){ border-left:none; }
.ipo-cal-day.out{ background:var(--surface-alt); }
.ipo-cal-day.out .day-num{ color:var(--ink-muted); opacity:.5; }
.ipo-cal-day.today{ background:var(--navy-tint); }
.day-num{
  font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;
  color:var(--ink-muted);
}
.ipo-cal-day.today .day-num{ color:var(--navy); font-weight:700; }
.ipo-chip{
  display:block;
  font-size:10.5px;
  line-height:1.4;
  padding:2px 5px;
  border-radius:3px;
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid transparent;
}
.ipo-chip.subscription{
  background:var(--navy-tint);
  color:var(--navy);
}
.ipo-chip.listing.tier-up{ background:var(--up); color:#fff; }
.ipo-chip.listing.tier-gold{ background:var(--gold); color:#fff; }
.ipo-chip.listing.tier-down{ background:var(--down); color:#fff; }
.ipo-chip.listing:not([class*="tier-"]){ background:var(--ink-muted); color:#fff; }

.ipo-cal-legend{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  font-size:12px;
  color:var(--ink-muted);
  margin-bottom:32px;
}
.ipo-cal-legend .dot{
  display:inline-block;
  width:9px; height:9px;
  border-radius:50%;
  margin-right:5px;
  vertical-align:middle;
}

.ipo-list-title{
  font-family:"Noto Serif KR",serif;
  font-size:19px;
  font-weight:700;
  margin-bottom:14px;
}
.ipo-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ipo-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px 18px;
  text-decoration:none;
  color:var(--ink);
  flex-wrap:wrap;
}
.ipo-card-main{ display:flex; flex-direction:column; gap:4px; }
.ipo-card-name{
  font-family:"Noto Serif KR",serif;
  font-weight:700;
  font-size:16px;
}
.ipo-card-market{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  color:var(--ink-muted);
  margin-left:8px;
}
.ipo-card-dates{
  font-size:12.5px;
  color:var(--ink-muted);
}

.score-badge{
  font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;
  font-weight:700;
  padding:5px 12px;
  border-radius:14px;
  white-space:nowrap;
}
.score-badge.tier-up{ background:var(--up-tint); color:var(--up); }
.score-badge.tier-gold{ background:var(--gold-tint); color:var(--gold); }
.score-badge.tier-down{ background:var(--down-tint); color:var(--down); }
.score-badge.tier-none{ background:var(--surface-alt); color:var(--ink-muted); }

.score-gauge{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.score-gauge-number{
  font-family:"IBM Plex Mono",monospace;
  font-size:34px;
  font-weight:700;
  line-height:1;
}
.score-gauge-number span{ font-size:14px; font-weight:500; margin-left:2px; }
.score-gauge-number.tier-up{ color:var(--up); }
.score-gauge-number.tier-gold{ color:var(--gold); }
.score-gauge-number.tier-down{ color:var(--down); }
.score-gauge-bar{
  flex:1;
  min-width:120px;
  height:8px;
  background:var(--line);
  border-radius:4px;
  overflow:hidden;
}
.score-gauge-fill{ height:100%; border-radius:4px; }
.score-gauge-fill.tier-up{ background:var(--up); }
.score-gauge-fill.tier-gold{ background:var(--gold); }
.score-gauge-fill.tier-down{ background:var(--down); }

@media (max-width:640px){
  .ipo-cal-day{ min-height:56px; }
  .ipo-chip{ font-size:9.5px; }
  .ipo-card{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Home hero ---------- */
.hero{
  position:relative;
  padding:12px 0 40px;
  margin-bottom:36px;
  border-bottom:1px solid var(--line);
}
.hero-eyebrow{
  display:inline-block;
  font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  background:var(--gold-tint);
  padding:5px 13px;
  border-radius:20px;
  margin-bottom:22px;
}
.hero-title{
  font-family:"Noto Serif KR",serif;
  font-weight:700;
  font-size:clamp(36px,6vw,56px);
  line-height:1.18;
  letter-spacing:-0.01em;
  max-width:11ch;
  margin:0 0 18px;
  text-wrap:balance;
}
.hero-sub{
  font-size:16px;
  color:var(--ink-muted);
  max-width:44ch;
  line-height:1.75;
  margin:0 0 26px;
}
.hero-ticker{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:26px;
}
.hero-ticker span{ width:4px; border-radius:1px; display:block; }
.hero-ticker span.up{ background:var(--up); opacity:.85; }
.hero-ticker span.down{ background:var(--down); opacity:.85; }

.hero-badge{
  position:absolute;
  top:8px;
  right:4px;
  width:104px;
  height:104px;
  border-radius:50%;
  border:1.5px solid var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  line-height:1.55;
  color:var(--navy);
  background:var(--surface);
  transform:rotate(-6deg);
}

@media (max-width:640px){
  .hero-badge{ display:none; }
  .hero-title{ max-width:none; }
}

/* ---------- Legal / static pages ---------- */
.legal-page h1{
  font-family:"Noto Serif KR",serif;
  font-size:30px;
  font-weight:700;
  margin-bottom:6px;
}
.legal-page .updated-at{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  color:var(--ink-muted);
  margin-bottom:32px;
  display:block;
}
.legal-page .prose{ max-width:68ch; }
.legal-page .prose h2{
  font-family:"Noto Serif KR",serif;
  font-size:19px;
  font-weight:700;
  margin:34px 0 12px;
}
.legal-page .prose h2:first-child{ margin-top:0; }
.legal-page .prose p{
  font-size:15px;
  line-height:1.85;
  color:var(--ink);
  margin:0 0 14px;
}
.legal-page .prose ul{
  margin:0 0 14px;
  padding-left:22px;
}
.legal-page .prose li{
  font-size:15px;
  line-height:1.85;
  margin-bottom:6px;
}
.legal-page .prose a{ color:var(--navy); }
.legal-page .prose strong{ color:var(--ink); }
.legal-page .contact-box{
  margin-top:12px;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  font-size:14.5px;
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  margin-top:64px;
  padding:24px 24px 40px;
}
.site-footer .inner{
  max-width:820px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.site-footer nav{ display:flex; gap:18px; }
.site-footer a{
  font-size:12.5px;
  color:var(--ink-muted);
  text-decoration:none;
}
.site-footer a:hover{ color:var(--navy); }
.site-footer .copyright{
  font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;
  color:var(--ink-muted);
}