/* =================================================================
   디자인 토큰
   라이트/다크 두 모드를 각각 선택해 정의한다 (자동 반전이 아님).
   OS 설정은 media query 로, 사용자 토글은 [data-theme] 로 덮어쓴다.
   ================================================================= */
:root {
  color-scheme: light;

  --page:            #f9f9f7;
  --surface-1:       #fcfcfb;
  --surface-2:       #f2f1ed;
  --text-primary:    #0b0b0b;
  --text-secondary:  #52514e;
  --text-muted:      #898781;
  --gridline:        #e1e0d9;
  --baseline:        #c3c2b7;
  --border:          rgba(11, 11, 11, 0.10);

  /* 카테고리 슬롯 (이동평균 3선) — light·dark 모두 all-pairs 검증 통과 */
  --series-a:        #eb6834; /* orange  · MA5  */
  --series-b:        #1baf7a; /* aqua    · MA20 */
  --series-c:        #4a3aa7; /* violet  · MA60 */

  /* 상승/하락 = 발산형 의미색. 카테고리 색과 역할이 다르다. */
  --price-up-kr:     #d03b3b;
  --price-down-kr:   #2a78d6;
  --price-up-gl:     #0ca30c;
  --price-down-gl:   #d03b3b;

  --band:            rgba(137, 135, 129, 0.12);

  --good:            #0ca30c;
  --warning:         #fab219;
  --critical:        #d03b3b;

  /* 화면 전체가 쓰는 시맨틱 별칭. 색 규칙 토글이 여기 하나만 바꾼다. */
  --up:   var(--price-up-kr);
  --down: var(--price-down-kr);

  --radius: 12px;
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.05), 0 8px 24px rgba(11, 11, 11, 0.04);
  --font: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:           #0d0d0d;
    --surface-1:      #1a1a19;
    --surface-2:      #232322;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255, 255, 255, 0.10);
    --series-a:       #d95926;
    --series-b:       #199e70;
    --series-c:       #9085e9;
    --price-up-kr:    #e66767;
    --price-down-kr:  #3987e5;
    --price-up-gl:    #0ca30c;
    --price-down-gl:  #e66767;
    --band:           rgba(255, 255, 255, 0.07);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page:           #0d0d0d;
  --surface-1:      #1a1a19;
  --surface-2:      #232322;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --gridline:       #2c2c2a;
  --baseline:       #383835;
  --border:         rgba(255, 255, 255, 0.10);
  --series-a:       #d95926;
  --series-b:       #199e70;
  --series-c:       #9085e9;
  --price-up-kr:    #e66767;
  --price-down-kr:  #3987e5;
  --price-up-gl:    #0ca30c;
  --price-down-gl:  #e66767;
  --band:           rgba(255, 255, 255, 0.07);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* 상승/하락 색 규칙 토글 — 한국식(빨강↑)이 기본, 글로벌식(초록↑)은 별칭만 갈아끼운다 */
:root[data-colormode="global"] {
  --up:   var(--price-up-gl);
  --down: var(--price-down-gl);
}

/* ================================================================= */
/* touch-action: manipulation → 더블탭 확대만 끈다.
   두 손가락 핀치 줌과 스크롤은 그대로 살아 있어 접근성을 해치지 않는다.
   (viewport 의 user-scalable=no 는 확대 자체를 막아버려서 쓰지 않는다) */
* { box-sizing: border-box; touch-action: manipulation; }

body {
  margin: 0;
  padding: 0 20px calc(64px + env(safe-area-inset-bottom));
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16.2px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

main, .topbar, .searchbar, .quick, .status { max-width: 1160px; margin-inline: auto; }

h1, h2, h3, h4 { margin: 0; line-height: 1.3; letter-spacing: -0.01em; }
h1 { font-size: 20px; }
h2 { font-size: 24px; }
h3 { font-size: 18.2px; }
h4 { font-size: 15.3px; margin-top: 22px; color: var(--text-secondary); }
p { margin: 0; }
b, strong { font-weight: 650; }

/* 섹션 제목 앞의 귀여운 마크 */
h3 { display: flex; align-items: center; gap: 9px; }
.sec-mark {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; font-size: 15px; line-height: 1;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
}

.muted { color: var(--text-secondary); }
.small { font-size: 14.3px; }

/* --------------------------- 상단 바 --------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 0 16px;
}
.brand { display: flex; gap: 12px; align-items: center; }
.logo { font-size: 30px; line-height: 1; }
.brand p { font-size: 14.3px; color: var(--text-secondary); margin-top: 2px; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; font-size: 18.2px;
  background: var(--surface-1); color: var(--text-secondary);
  border: 1px solid var(--border); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }

/* ------------------- 투자 책임 고지 (최상단) ------------------- */
.notice {
  padding: 11px 16px; margin-bottom: 14px;
  border: 1px solid var(--critical); border-left-width: 4px; border-radius: var(--radius);
  background: var(--surface-1);
  background: color-mix(in srgb, var(--critical) 7%, var(--surface-1));
}
.notice > summary {
  display: flex; gap: 10px; align-items: center; cursor: pointer;
  font-size: 14.8px; list-style: none;
}
.notice > summary::-webkit-details-marker { display: none; }
.notice-icon { font-size: 17.2px; line-height: 1.4; flex-shrink: 0; }
.notice > summary b { color: var(--text-primary); }
.notice-more {
  margin-left: auto; font-size: 12.4px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.notice[open] .notice-more::after { content: ' 접기'; }
.notice[open] .notice-more { font-size: 0; }
.notice[open] .notice-more::after { font-size: 12.4px; }
.notice p {
  margin-top: 8px; padding-left: 26px;
  font-size: 13.8px; line-height: 1.65; color: var(--text-secondary);
}
.notice p b { color: var(--text-primary); }
.notice-sub { display: block; margin-top: 4px; font-size: 12.9px; color: var(--text-muted); }

/* --------------------------- 검색 --------------------------- */
.searchbar {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.search-wrap { position: relative; flex: 1 1 320px; min-width: 260px; }

input[type="text"], select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15.3px;
  color: var(--text-primary); background: var(--page);
  border: 1px solid var(--border); border-radius: 9px; outline: none;
}
input[type="text"]:focus, select:focus { border-color: var(--series-b); }

.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 12.4px; color: var(--text-muted); font-weight: 600; letter-spacing: .02em; }
.field select { min-width: 96px; }

button.primary {
  padding: 10px 22px; font: inherit; font-weight: 650; font-size: 15.3px;
  color: #fff; background: #1c5cab; border: none; border-radius: 9px; cursor: pointer;
}
button.primary:hover { background: #184f95; }
button.primary:disabled { opacity: .55; cursor: default; }

.suggest {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
}
.suggest li {
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
.suggest li:hover, .suggest li.active { background: var(--surface-2); }
.suggest .sym { font-weight: 650; font-variant-numeric: tabular-nums; }
.suggest .nm { color: var(--text-secondary); font-size: 14.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .ex { color: var(--text-muted); font-size: 12.4px; white-space: nowrap; }

.quick { padding: 12px 2px; font-size: 14.3px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  padding: 4px 11px; font: inherit; font-size: 14.3px; cursor: pointer;
  color: var(--text-secondary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 999px;
}
.chip:hover { background: var(--surface-2); color: var(--text-primary); }
.quick-label { flex-shrink: 0; }

/* 최근 조회 칩 — 본문 클릭은 조회, × 는 삭제 */
#recentChips { display: contents; }
.chip-recent {
  display: inline-flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1);
}
.chip-recent:hover { background: var(--surface-2); }
.chip-go {
  padding: 4px 4px 4px 12px; font: inherit; font-size: 14.3px; cursor: pointer;
  background: none; border: none; color: var(--text-primary); font-weight: 600;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-x {
  padding: 0 9px 0 6px; font: inherit; font-size: 15.3px; line-height: 1; cursor: pointer;
  background: none; border: none; color: var(--text-muted);
}
.chip-x:hover { color: var(--critical); }
.chip-ghost { border-style: dashed; color: var(--text-muted); }
/* 접힌 칩은 확실히 감춘다 (.chip-recent 가 display:inline-flex 라 [hidden] 만으론 부족) */
.chip-recent[hidden] { display: none !important; }
/* #recentChips 가 display:contents 라 부모의 `.quick > *` 규칙이 칩에 닿지 않는다.
   그대로 두면 한 줄에 밀어 넣느라 칩이 눌려서 글자가 한 자만 보인다. */
.quick .chip, .chip-recent { flex: 0 0 auto; }

/* 최근 조회 줄은 스크롤 대신 "한 줄만" — 넘치면 더보기로 접는다 */
.quick-recent { flex-wrap: nowrap; overflow: hidden; }
.chip-more {
  flex-shrink: 0; font-weight: 650; color: var(--text-primary);
  border-style: solid; background: var(--surface-2);
}
.chip-more[hidden] { display: none; }

/* 최근 조회 전체 목록 팝업 */
.recent-pop {
  position: relative; margin: auto;
  width: min(420px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow-y: auto; padding: 20px; border-radius: 16px;
  background: var(--surface-1); border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: popIn .22s cubic-bezier(.2, 1.2, .4, 1);
}
.recent-pop h4 { margin: 0 0 12px; font-size: 17px; color: var(--text-primary); }
.recent-list { display: flex; flex-direction: column; gap: 6px; }
.recent-item {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.recent-item:hover { background: var(--surface-2); }
.recent-go {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px;
  padding: 11px 13px; font: inherit; text-align: left; cursor: pointer;
  background: none; border: none; color: var(--text-primary);
}
.recent-go b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-go span { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.recent-del {
  flex: 0 0 auto; padding: 0 14px; font: inherit; font-size: 13px; cursor: pointer;
  background: none; border: none; border-left: 1px solid var(--border); color: var(--text-muted);
}
.recent-del:hover { color: var(--critical); background: var(--surface-2); }
.recent-foot { display: flex; gap: 8px; margin-top: 16px; }
.recent-foot .ghost { flex: 0 0 auto; }
.recent-foot .primary { flex: 1 1 auto; }

/* --------------------------- 상태 --------------------------- */
.status {
  padding: 14px 16px; margin-bottom: 16px; border-radius: var(--radius);
  background: var(--surface-1); border: 1px solid var(--border); font-size: 15.3px;
}
.status.error { border-color: var(--critical); color: var(--critical); }
.status.loading::before {
  content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 9px;
  vertical-align: -2px; border: 2px solid var(--baseline); border-top-color: var(--series-b);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------- 카드 --------------------------- */
.card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 18px;
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }

/* 상단 버튼 묶음 (효과음 · 테마) */
.topbar-btns { display: flex; gap: 8px; flex-shrink: 0; }
.icon-btn.off { opacity: .5; }

/* ------------------------- 첫 화면 ------------------------- */
.welcome { display: flex; gap: 26px; align-items: center; padding: 30px 26px; }
.welcome[hidden] { display: none; }
.welcome-art { flex: 0 0 130px; }
.welcome-art svg { width: 100%; height: auto; max-height: 190px; }
.welcome-text { flex: 1 1 auto; min-width: 0; }
.welcome-text h2 { font-size: 21px; margin-bottom: 8px; }
.welcome-text > p { font-size: 15.3px; line-height: 1.7; }
.welcome-list {
  margin: 16px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px;
}
.welcome-list li {
  padding: 9px 13px; border-radius: 8px; background: var(--surface-2);
  font-size: 14.3px; color: var(--text-secondary);
}
.welcome-list b { color: var(--text-primary); }
.welcome-hint { margin-top: 14px; font-size: 13.8px; color: var(--text-muted); }
@media (max-width: 640px) {
  .welcome { flex-direction: column; text-align: center; gap: 16px; }
  .welcome-art { flex: none; width: 110px; }
  .welcome-list { text-align: left; }
}

/* --------------------------- 히어로 --------------------------- */
.hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.hero-head p { font-size: 14.3px; }
.hero-price { text-align: right; }
.price { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.change { font-size: 15.3px; font-weight: 600; }
.change.up { color: var(--up); }
.change.down { color: var(--down); }

.hero-verdict {
  display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 18px;
  margin: 20px 0 4px; padding: 16px; border-radius: 10px; background: var(--surface-2);
}
@media (max-width: 720px) { .hero-verdict { grid-template-columns: 1fr; } }

.verdict-badge { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.vb-label { font-size: 12.4px; font-weight: 650; letter-spacing: .04em; color: var(--text-muted); }
.verdict-badge strong { font-size: 20px; line-height: 1.25; }
.verdict-badge.bull strong { color: var(--up); }
.verdict-badge.bear strong { color: var(--down); }

.score-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.4px; color: var(--text-secondary); }
.score-head strong { font-size: 22px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.score-track {
  position: relative; height: 10px; margin: 8px 0 4px; border-radius: 5px;
  background: var(--gridline); overflow: hidden;
}
.score-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--baseline); z-index: 2; }
.score-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: all .3s ease; }
.score-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); }
.score-verdict { margin-top: 6px; font-size: 15.3px; font-weight: 650; }

.summary { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 16.2px; }
.summary p { padding-left: 16px; position: relative; }
.summary p::before { content: '·'; position: absolute; left: 4px; color: var(--text-muted); font-weight: 700; }

/* --------------------------- 차트 --------------------------- */
.toggles { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 13.8px; color: var(--text-secondary); }
.toggles label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; user-select: none; }
.toggles input { accent-color: #1c5cab; margin: 0; }
.toggles .sep { width: 1px; height: 16px; background: var(--border); }
select.mini { width: auto; padding: 4px 8px; font-size: 13.8px; border-radius: 7px; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13.4px; color: var(--text-secondary); margin-bottom: 8px; }
.lg { display: inline-flex; gap: 6px; align-items: center; }
.sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.sw-ma5 { background: var(--series-a); }
.sw-ma20 { background: var(--series-b); }
.sw-ma60 { background: var(--series-c); }
.sw-up { background: var(--up); height: 10px; width: 5px; border-radius: 1px; }
.sw-down { background: var(--down); height: 10px; width: 5px; border-radius: 1px; }
.legend .hint { margin-left: auto; color: var(--text-muted); font-size: 12.9px; }

.chart-host { position: relative; width: 100%; height: 620px; }
/* touch-action: pan-y → 세로 스와이프는 페이지 스크롤, 가로 스와이프는 구간 선택 */
.chart-host canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; }

.chart-tooltip {
  position: absolute; z-index: 20; pointer-events: none; min-width: 150px;
  padding: 9px 11px; font-size: 13.4px; border-radius: 9px;
  background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.tt-date { font-weight: 650; margin-bottom: 5px; color: var(--text-primary); }
.tt-row { display: flex; justify-content: space-between; gap: 14px; color: var(--text-secondary); }
.tt-row b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tt-up { color: var(--up) !important; }
.tt-down { color: var(--down) !important; }

/* --------------------------- 형태 분석 --------------------------- */
.narrative { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 18px; color: var(--text-secondary); }
.narrative p { padding: 11px 13px; background: var(--surface-2); border-radius: 9px; border-left: 3px solid var(--baseline); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.fact { padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; }
.fact .k { font-size: 12.4px; color: var(--text-muted); font-weight: 600; }
.fact .v { font-size: 15.3px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------- 패턴 --------------------------- */
.pattern-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pattern {
  padding: 13px 15px; border-radius: 10px; border: 1px solid var(--border);
  border-left-width: 4px; background: var(--surface-1);
}
.pattern.bull { border-left-color: var(--up); }
.pattern.bear { border-left-color: var(--down); }
.pattern.neutral { border-left-color: var(--text-muted); }
/* 왼쪽에 실제 캔들 썸네일 — 이름만 보고 상상하지 않게 */
.pattern-top { display: flex; gap: 14px; align-items: flex-start; }
.pat-thumb {
  flex: 0 0 104px; margin: 0; padding: 5px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2);
}
.pat-thumb canvas { display: block; width: 100%; height: 62px; }
.pat-thumb figcaption {
  margin-top: 3px; font-size: 11px; color: var(--text-muted); text-align: center;
}
.pattern-info { flex: 1 1 auto; min-width: 0; }

.pattern-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pattern-head b { font-size: 16.2px; }
.pattern-what { font-size: 14.3px; color: var(--text-secondary); margin-top: 4px; }
.pattern-meaning { font-size: 15.3px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.pattern-meaning::before { content: '쉽게 말하면 '; font-weight: 650; color: var(--text-muted); font-size: 13.4px; }

.tag {
  font-size: 12.4px; font-weight: 650; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap;
}
.tag.bull { color: var(--up); border-color: currentColor; }
.tag.bear { color: var(--down); border-color: currentColor; }
.tag.neutral { color: var(--text-muted); }
.tag.ago { color: var(--text-muted); }

.empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 14.8px; background: var(--surface-2); border-radius: 9px; }

/* --------------------- 🔍 구간 뜯어보기 --------------------- */
/* 차트 카드 안의 안내줄 (해설 본문은 팝업으로 뜬다) */
.rg-hint {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 11px 14px; border-radius: 10px;
  background: var(--surface-2); font-size: 14.3px; color: var(--text-secondary);
}
.rg-hint-text { flex: 1 1 auto; min-width: 200px; }
.rg-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-btn { padding: 4px 11px !important; font-size: 13.4px !important; }

/* 구간 해설 팝업 — 데스크톱은 가운데 다이얼로그 */
.rg-modal { z-index: 96; }
.rg-pop {
  position: relative; margin: auto;
  width: min(680px, 100%); overflow-y: auto;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  padding: 20px 22px 18px; border-radius: 16px;
  background: var(--surface-1); border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: popIn .22s cubic-bezier(.2, 1.2, .4, 1);
}
.rg-pop-head h4 { margin: 0 0 4px; font-size: 18.2px; color: var(--text-primary); }
.rg-foot {
  position: sticky; bottom: 0; display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  margin-top: 18px; padding: 12px 0 0; border-top: 1px solid var(--border);
  background: var(--surface-1);
}
.rg-foot .primary { margin-left: auto; }
.rg-grab { display: none; }

.rg-empty {
  margin-top: 12px; padding: 20px; text-align: center; border-radius: 10px;
  background: var(--surface-2); color: var(--text-secondary); font-size: 14.8px; line-height: 1.8;
}
.rg-empty.small { padding: 13px; font-size: 14.3px; }

.rg-title {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 12px 15px; border-radius: 10px; background: var(--surface-2);
}
.rg-icon { font-size: 22px; line-height: 1; }
.rg-label { display: block; font-size: 17.2px; }
.rg-range { font-size: 13.4px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rg-chg { margin-left: auto; font-size: 20px; font-variant-numeric: tabular-nums; }
.rg-chg.up { color: var(--up); }
.rg-chg.down { color: var(--down); }

.rg-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px; margin-top: 12px;
}
.rg-stat {
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px;
  display: flex; flex-direction: column; gap: 1px;
}
.rg-stat span { font-size: 11.9px; color: var(--text-muted); }
.rg-stat b { font-size: 14.8px; font-variant-numeric: tabular-nums; }
.rg-stat b.up { color: var(--up); }
.rg-stat b.down { color: var(--down); }

.rg h5 { margin: 20px 0 9px; font-size: 14.3px; color: var(--text-secondary); font-weight: 650; }

/* 선택 구간 확대 그림 */
.rg-visual {
  margin: 12px 0 0; padding: 8px 8px 6px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface-1);
}
.rg-visual canvas { display: block; width: 100%; height: 160px; }
.rg-visual figcaption { margin-top: 5px; font-size: 12.4px; color: var(--text-muted); text-align: center; }

.rg-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px; }
.rg-type {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
  border-left-width: 4px; background: var(--surface-1);
}
.rg-type.bull { border-left-color: var(--up); }
.rg-type.bear { border-left-color: var(--down); }
.rg-type.neutral { border-left-color: var(--text-muted); }

/* 왼쪽에 실제 캔들 모양 썸네일 */
.rg-type-top { display: flex; gap: 12px; align-items: flex-start; }
.rg-thumb {
  flex: 0 0 96px; margin: 0; padding: 4px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
}
.rg-thumb canvas { display: block; width: 100%; height: 58px; }
.rg-thumb figcaption {
  margin-top: 2px; font-size: 11px; color: var(--text-muted); text-align: center;
}
.rg-type-info { flex: 1 1 auto; min-width: 0; }
.rg-type-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rg-type-head b { font-size: 15.7px; }
.rg-type-what { margin-top: 5px; font-size: 13.8px; color: var(--text-muted); }
.rg-type-mean { margin-top: 9px; font-size: 14.8px; color: var(--text-secondary); }

.rg-shapes { display: flex; flex-direction: column; gap: 8px; }
.rg-shape {
  padding: 11px 14px; border-radius: 9px; background: var(--surface-2);
  border-left: 3px solid var(--text-muted);
}
.rg-shape.bull { border-left-color: var(--up); }
.rg-shape.bear { border-left-color: var(--down); }
.rg-shape p { margin-top: 4px; font-size: 14.3px; color: var(--text-secondary); }

.rg-moves { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.rg-moves li {
  padding: 9px 13px; border-radius: 8px; background: var(--surface-2);
  font-size: 14.8px; color: var(--text-secondary);
}

.rg-lesson {
  margin-top: 16px; padding: 13px 15px; border-radius: 10px; font-size: 14.8px;
  border: 1px dashed var(--border); background: var(--surface-1);
}
.rg-lesson::before { content: '🎓 '; }

/* --------------------------- 구간 카드 --------------------------- */
.segments { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

.seg {
  border: 1px solid var(--border); border-left-width: 4px; border-radius: 11px;
  padding: 14px 16px; background: var(--surface-1);
}
.seg.bull { border-left-color: var(--up); }
.seg.bear { border-left-color: var(--down); }
.seg.neutral { border-left-color: var(--text-muted); }
.seg-now { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }

.seg-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.seg-no {
  font-size: 12.4px; font-weight: 700; letter-spacing: .03em; padding: 2px 9px;
  border-radius: 999px; background: var(--gridline); color: var(--text-secondary); white-space: nowrap;
}
.seg-now .seg-no { background: var(--text-primary); color: var(--surface-1); }
.seg-label { font-size: 17.2px; font-weight: 700; }
.seg-span { margin-left: auto; font-size: 13.4px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.seg-chart { height: 108px; margin: 12px 0 10px; }
.seg-chart canvas { display: block; width: 100%; height: 100%; }

.seg-stats {
  display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 9px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-size: 14.3px;
}
.seg-stats span { display: inline-flex; gap: 7px; align-items: baseline; }
.seg-stats i { font-style: normal; font-size: 12.4px; color: var(--text-muted); }
.seg-stats b { font-variant-numeric: tabular-nums; }
.seg-stats b.up { color: var(--up); }
.seg-stats b.down { color: var(--down); }

.seg-body { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; font-size: 14.8px; color: var(--text-secondary); }

.seg-pats { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.seg-pats-label { font-size: 12.4px; color: var(--text-muted); }

.seg-lesson {
  margin-top: 11px; padding: 10px 13px; border-radius: 8px;
  background: var(--surface-2); font-size: 14.8px;
}
.seg-now .seg-lesson { background: var(--page); }
.seg-lesson::before { content: '📌 '; }

/* --------------------------- 지표 카드 --------------------------- */
.indi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; margin-top: 12px; }
.indi {
  padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1);
  display: flex; flex-direction: column; gap: 8px;
}
.indi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.indi-head .nm { font-weight: 650; font-size: 15.3px; }
.indi-val { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.indi-plain { font-size: 14.8px; color: var(--text-secondary); }
.indi-extra { font-size: 13.4px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.gauge { position: relative; height: 8px; border-radius: 4px; background: var(--gridline); }
.gauge .zone { position: absolute; top: 0; bottom: 0; background: var(--band); }
.gauge .pin { position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px; background: var(--text-primary); }
.gauge-ticks { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); }

/* --------------------------- 지지/저항 --------------------------- */
.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
@media (max-width: 640px) { .levels { grid-template-columns: 1fr; } }
.lv-col h4 { margin-top: 0; }
.lv {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 12px; border-radius: 8px; background: var(--surface-2); margin-bottom: 7px;
}
.lv .p { font-weight: 700; font-variant-numeric: tabular-nums; }
.lv .d { font-size: 13.4px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.lv.support .p { color: var(--up); }
.lv.resistance .p { color: var(--down); }

/* --------------------------- 체크 --------------------------- */
.checks { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.checks li { padding: 11px 13px 11px 38px; position: relative; background: var(--surface-2); border-radius: 9px; font-size: 15.3px; }
.checks li::before {
  content: '✓'; position: absolute; left: 14px; top: 11px;
  color: var(--good); font-weight: 700;
}

/* --------------------------- 점수 상세 --------------------------- */
.breakdown { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bd { display: grid; grid-template-columns: minmax(140px, 1.4fr) 1fr auto; gap: 12px; align-items: center; font-size: 14.3px; }
.bd .nm { color: var(--text-secondary); }
.bd .bar { position: relative; height: 8px; background: var(--gridline); border-radius: 4px; }
.bd .bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.bd .bar .mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--baseline); }
.bd .sc { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 44px; text-align: right; }

button.ghost {
  padding: 6px 14px; font: inherit; font-size: 14.3px; cursor: pointer;
  color: var(--text-secondary); background: transparent;
  border: 1px solid var(--border); border-radius: 8px;
}
button.ghost:hover { background: var(--surface-2); color: var(--text-primary); }

.table-wrap { margin-top: 16px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.8px; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; text-align: right; position: sticky; top: 0; background: var(--surface-1); }
th:first-child, td:first-child { text-align: left; }

/* --------------------------- 차트 학습지 --------------------------- */
.workbook { margin-bottom: 18px; }

/* 학습지 종이 느낌 — 가로줄 + 왼쪽 여백선 */
.wb-paper {
  position: relative; padding: 22px 22px 24px 30px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    repeating-linear-gradient(var(--surface-1) 0 30px, var(--gridline) 30px 31px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.wb-paper::before {
  content: ''; position: absolute; left: 16px; top: 0; bottom: 0;
  width: 1px; background: var(--critical); opacity: .35;
}

.wb-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.wb-badge {
  display: inline-block; font-size: 12.4px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px; background: var(--text-primary); color: var(--surface-1);
}
.wb-title h3 { margin: 8px 0 4px; font-size: 20px; }

.wb-stamp { text-align: center; flex-shrink: 0; }
.stamp {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 16px; border: 3px double currentColor; border-radius: 10px;
  transform: rotate(-7deg); font-weight: 800;
}
.stamp-emoji { font-size: 20px; line-height: 1; }
.stamp-text { font-size: 15.3px; white-space: nowrap; }
.stamp.good { color: var(--good); }
.stamp.warn { color: var(--warning); }
.stamp.bad { color: var(--critical); }
.stamp.neutral { color: var(--text-muted); }
.stamp-sub { margin-top: 10px; font-size: 12.4px; color: var(--text-muted); max-width: 190px; }

.wb-section { margin-top: 26px; }
.wb-section h4 { margin: 0 0 10px; font-size: 16.2px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.wb-num {
  font-size: 12.4px; font-weight: 800; padding: 2px 9px; border-radius: 5px;
  background: var(--gridline); color: var(--text-secondary);
}
.wb-num.red { background: var(--critical); color: #fff; }
.wb-sub { font-size: 12.4px; font-weight: 500; color: var(--text-muted); }

/* 쪽지시험 */
.quiz-q { font-size: 16.2px; font-weight: 650; margin-bottom: 10px; }
.quiz-choices { display: flex; flex-direction: column; gap: 7px; }
.quiz-choice {
  display: flex; gap: 9px; align-items: flex-start; text-align: left;
  padding: 10px 13px; font: inherit; font-size: 15.3px; cursor: pointer;
  color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 9px; transition: background .12s;
}
.quiz-choice:hover:not(:disabled) { background: var(--surface-2); }
.quiz-choice:disabled { cursor: default; }
.quiz-choice .qn { font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.quiz-choice.correct { border-color: var(--good); background: rgba(12, 163, 12, .1); background: color-mix(in srgb, var(--good) 10%, transparent); }
.quiz-choice.correct .qn { color: var(--good); }
.quiz-choice.wrong { border-color: var(--critical); background: rgba(208, 59, 59, .1); background: color-mix(in srgb, var(--critical) 10%, transparent); }
.quiz-choice.wrong .qn { color: var(--critical); }
.quiz-explain {
  margin-top: 12px; padding: 13px 15px; border-radius: 9px;
  background: var(--surface-2); font-size: 14.8px;
}
.quiz-explain b { display: block; margin-bottom: 6px; color: var(--good); }

/* 선생님 한마디 */
.wb-advices { display: flex; flex-direction: column; gap: 12px; }
.advice {
  display: flex; gap: 13px; padding: 13px 15px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.advice-icon { font-size: 24px; line-height: 1.2; flex-shrink: 0; }
.advice-title { font-weight: 700; font-size: 15.7px; margin-bottom: 5px; }
.advice-line { font-size: 14.8px; color: var(--text-secondary); }

/* 빨간펜 일침 */
.wb-ilchim { display: flex; flex-direction: column; gap: 10px; }
.wb-ilchim blockquote {
  margin: 0; padding: 12px 15px; font-size: 15.3px; line-height: 1.7;
  border-left: 3px solid var(--critical); border-radius: 0 9px 9px 0;
  background: rgba(208, 59, 59, .07);
  background: color-mix(in srgb, var(--critical) 7%, transparent);
}
.wb-ilchim blockquote::before { content: '✍️ '; }

/* 숙제 */
.wb-homework { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wb-homework li {
  position: relative; padding: 9px 13px 9px 34px; font-size: 14.8px;
  background: var(--surface-2); border-radius: 8px;
}
.wb-homework li::before {
  content: ''; position: absolute; left: 12px; top: 12px;
  width: 13px; height: 13px; border: 2px solid var(--text-muted); border-radius: 3px;
}

@media (max-width: 640px) {
  .wb-paper { padding: 18px 16px 20px 24px; }
  .wb-stamp { margin-left: auto; }
  .seg-span { margin-left: 0; width: 100%; }
}

/* --------------------- 🕯️ 봉선생 팝업 --------------------- */
body.modal-open { overflow: hidden; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: grid; overflow-y: auto; padding: 20px;
  background: rgba(0, 0, 0, .55);
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(3px);
  animation: fadeIn .16s ease;
}
/* display 를 지정하면 HTML hidden 속성(UA 의 display:none)이 무력화되므로 직접 되돌린다 */
.modal-backdrop[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }

/* 봉선생 팝업은 배경을 어둡게 덮지 않는다 — 뒤 차트가 그대로 보이게 */
#charModal { background: transparent; backdrop-filter: none; }
/* 티커를 누르면 화면 맨 위에서부터 뜨도록 위쪽 정렬 */
#charModal .char-pop { margin: 0 auto; }

/* 뿅뿅! — 통통 튀며 등장 */
.char-pop.boing { animation: popBoing .52s cubic-bezier(.2, 1.1, .3, 1) !important; }
@keyframes popBoing {
  0%   { opacity: 0; transform: scale(.68) translateY(22px) rotate(-2deg); }
  40%  { opacity: 1; transform: scale(1.08) translateY(-8px) rotate(1deg); }
  62%  { transform: scale(.95) translateY(4px) rotate(-.5deg); }
  80%  { transform: scale(1.03) translateY(-2px); }
  92%  { transform: scale(.99) translateY(1px); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}

.char-pop {
  /* grid 컨테이너 안에서 margin:auto → 내용이 길어도 위쪽이 잘리지 않게 가운데 정렬 */
  margin: auto;
  position: relative; display: flex; flex-direction: column; gap: 0;
  width: min(620px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 22px; border-radius: 16px;
  background: var(--surface-1); border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: popIn .22s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }

.char-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 8px; font-size: 15.3px; cursor: pointer;
  color: var(--text-muted); background: transparent; border: none;
}
.char-close:hover { background: var(--surface-2); color: var(--text-primary); }

/* 🪂 등장 연출 — 화면 위에서 아주 큰 봉선생이 내려와 제자리에 착지.
   팝업 안에서 크게 움직이면 overflow 에 잘리므로, 화면 최상위에 fixed 복제본을 띄워 날린다. */
.char-fly {
  position: fixed; z-index: 200; pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .28));
}
.char-fly svg { display: block; width: 100%; height: auto; }
.char-fly.go { animation: charFly 1.05s cubic-bezier(.14, .8, .2, 1) forwards; }
@keyframes charFly {
  0%   { transform: translate(-50%, calc(-50% + var(--fly-y, -520px))) scale(9) rotate(-10deg); opacity: 0; }
  12%  { opacity: 1; }
  58%  { transform: translate(-50%, calc(-50% + 16px)) scale(.78) rotate(3deg); opacity: 1; }  /* 착지 눌림 */
  74%  { transform: translate(-50%, calc(-50% - 12px)) scale(1.18) rotate(-2deg); }
  88%  { transform: translate(-50%, calc(-50% + 3px)) scale(.96) rotate(1deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}

/* 닫을 때 — 팡 터지며 사라진다 */
.char-fly.boom-out { animation: charBoomOut .55s cubic-bezier(.3, 0, .4, 1) forwards; }
@keyframes charBoomOut {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: brightness(1); }
  35%  { transform: translate(-50%, -50%) scale(1.9) rotate(-6deg); opacity: 1; filter: brightness(2.4); }
  100% { transform: translate(-50%, -50%) scale(3.6) rotate(4deg); opacity: 0; }
}

/* 파열 파편 · 충격파 링 */
.burst-particle {
  position: fixed; z-index: 201; pointer-events: none;
  transform: translate(-50%, -50%);
  animation: burstOut .85s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes burstOut {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(1.1) rotate(30deg); opacity: 0; }
}
.burst-ring {
  position: fixed; z-index: 200; pointer-events: none;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 3px solid var(--up);
  animation: ringOut .6s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes ringOut {
  0%   { transform: scale(.3); opacity: .9; }
  100% { transform: scale(7); opacity: 0; }
}
/* 착지 충격 */
.char-dock.landed { animation: dockThud .4s ease-out 1; }
@keyframes dockThud {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(4px); }
  60% { transform: translateY(-2px); }
}

/* 봉선생 + 조작부 = 하단 고정 덩어리. 때린 결과가 버튼 바로 옆에서 보인다. */
.char-dock {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; gap: 14px; align-items: flex-end;
  margin-top: 12px; padding-top: 12px;
  background: var(--surface-1); border-top: 1px solid var(--border);
}
.char-dock .char-stage { flex: 0 0 118px; }
.char-dock .char-foot { flex: 1 1 auto; min-width: 0; }

/* 캐릭터 무대 — 효과 입자와 소품이 겹쳐 올라간다 */
.char-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.char-art { width: 100%; display: flex; align-items: center; justify-content: center; }
.char-art svg { width: 100%; height: auto; max-height: 230px; }

/* 기분별 상시 애니메이션 */
.char-art.mood-hype svg { animation: shake .45s ease-in-out infinite; }
.char-art.mood-proud svg { animation: bounce 2.2s ease-in-out infinite; }
.char-art.mood-bored svg { animation: sway 3.2s ease-in-out infinite; }
.char-art.mood-alert svg { animation: tense 1.6s ease-in-out infinite; }
.char-art.mood-worried svg { animation: sway 2.6s ease-in-out infinite; }
.char-art.mood-confused svg { animation: tilt 2.4s ease-in-out infinite; }
.char-art.mood-dead svg { animation: droop 4s ease-in-out infinite; }
@keyframes tilt { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes shake { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sway { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes tense { 0%, 92%, 100% { transform: scale(1); } 96% { transform: scale(1.05); } }
@keyframes droop { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(4px) rotate(1.5deg); } }

/* 상호작용 반응 */
.char-art.act-pet svg { animation: petWiggle .5s ease-in-out 2 !important; }
.char-art.act-bonk svg { animation: bonkSquash .45s ease-out 1 !important; }
@keyframes petWiggle {
  0%, 100% { transform: rotate(-5deg) scale(1.03); }
  50% { transform: rotate(5deg) scale(1.06); }
}
@keyframes bonkSquash {
  0% { transform: translateY(-6px) scaleY(1); }
  35% { transform: translateY(10px) scaleY(.78) scaleX(1.12); }
  70% { transform: translateY(0) scaleY(1.04) scaleX(.97); }
  100% { transform: translateY(0) scaleY(1); }
}
/* 💥 폭발 — 몸통이 팽창했다가 사라진다 */
.char-art.boom svg { animation: boomBlast .6s cubic-bezier(.3, 1.6, .5, 1) forwards !important; }
@keyframes boomBlast {
  0% { transform: scale(1) rotate(0); opacity: 1; }
  25% { transform: scale(1.35) rotate(-8deg); opacity: 1; filter: brightness(2.2); }
  55% { transform: scale(1.6) rotate(10deg); opacity: .55; }
  100% { transform: scale(2.2) rotate(-4deg); opacity: 0; }
}

/* 화면 전체 흔들림 — 완전히 부서져 폭발할 때만 */
body.quake { animation: quake .6s cubic-bezier(.36, .07, .19, .97) 1; }
@keyframes quake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-11px, 6px) rotate(-.7deg); }
  20% { transform: translate(10px, -8px) rotate(.6deg); }
  30% { transform: translate(-9px, -5px) rotate(-.5deg); }
  40% { transform: translate(8px, 7px) rotate(.45deg); }
  55% { transform: translate(-6px, -4px) rotate(-.3deg); }
  70% { transform: translate(4px, 3px) rotate(.2deg); }
  85% { transform: translate(-2px, -1px) rotate(0); }
}

/* 💨 회피 — 옆으로 슥 빠졌다가 돌아온다 */
.char-art.act-dodge svg { animation: dodgeSlide .8s cubic-bezier(.25, 1, .4, 1) 1 !important; }
@keyframes dodgeSlide {
  0% { transform: translateX(0) rotate(0); }
  18% { transform: translateX(-46px) rotate(-16deg); }
  45% { transform: translateX(-52px) rotate(-12deg); }
  75% { transform: translateX(8px) rotate(4deg); }
  100% { transform: translateX(0) rotate(0); }
}

.char-pop.shake-once { animation: popShake .4s ease-out 1; }
@keyframes popShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* 소품 (망치 / 손) */
.char-hammer, .char-hand {
  position: absolute; top: 2%; right: -4%; font-size: 34px;
  opacity: 0; pointer-events: none; transform-origin: 80% 80%;
}
.char-hand { left: -4%; right: auto; transform-origin: 20% 80%; }
.char-hammer.swing { animation: hammerSwing .45s ease-out 1; }
.char-hand.swing { animation: handPat .9s ease-in-out 1; }
@keyframes hammerSwing {
  0% { opacity: 1; transform: rotate(-70deg) translateY(-10px); }
  45% { opacity: 1; transform: rotate(25deg) translateY(30px); }
  100% { opacity: 0; transform: rotate(0deg) translateY(10px); }
}
@keyframes handPat {
  0% { opacity: 0; transform: translateY(-14px); }
  20%, 80% { opacity: 1; }
  35% { transform: translateY(4px); }
  55% { transform: translateY(-8px); }
  75% { transform: translateY(2px); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* 입자 효과 */
.char-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.fx-particle {
  position: absolute; bottom: 32%; animation: floatUp 1.2s ease-out forwards;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  25% { opacity: 1; transform: translateY(-18px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-72px) scale(.85); }
}

/* 놀이 버튼 */
.char-play { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.play-btn {
  padding: 8px 14px; font: inherit; font-size: 14.3px; font-weight: 650; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-primary); transition: transform .1s ease, background .12s;
  min-height: 38px;
}
.play-btn:hover { background: var(--gridline); }
.play-btn:active { transform: scale(.93); }
.play-count { font-size: 12.9px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.char-react {
  padding: 10px 13px; border-radius: 11px; font-size: 14.8px;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-2));
  border: 1px solid var(--border);
}
.char-react.pop { animation: reactPop .3s cubic-bezier(.2, 1.4, .4, 1) 1; }
@keyframes reactPop { from { opacity: 0; transform: scale(.9) translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .char-art svg, .char-pop, .modal-backdrop, .char-hammer, .char-hand,
  .fx-particle, .char-react, .char-lines p, .char-fly, .char-dock,
  .bong-nag, .floater-art svg { animation: none !important; }
}

.char-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.char-name { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.char-name b { font-size: 20px; }
.char-mood {
  font-size: 12.4px; font-weight: 650; padding: 2px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-secondary);
}
.char-target { font-size: 13.8px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* 말풍선 — 위에서부터 하나씩 순서대로 등장 */
.char-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.char-lines p {
  position: relative; padding: 11px 14px; border-radius: 13px 13px 13px 4px;
  background: var(--surface-2); font-size: 15.3px; line-height: 1.6;
  opacity: 0; animation: bubbleIn .34s cubic-bezier(.2, 1.2, .4, 1) forwards;
}
.char-lines p:nth-child(1) { animation-delay: .10s; }
.char-lines p:nth-child(2) { animation-delay: .28s; }
.char-lines p:nth-child(3) { animation-delay: .46s; }
.char-lines p:nth-child(4) { animation-delay: .64s; }
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(9px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.cl-open { font-weight: 650; font-size: 16.2px !important; }
.cl-fact { color: var(--text-secondary); }
.cl-close { border-left: 3px solid var(--text-muted); }

.char-tease {
  margin-top: 4px; padding: 10px 13px; font-size: 14.3px; line-height: 1.6;
  border-radius: 10px; border: 1px dashed var(--border); color: var(--text-secondary);
}
.char-tease::before { content: '😏 '; }

.char-actions { margin-top: 6px; }
.char-actions .primary { width: 100%; }

.char-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: 2px;
}
.char-auto {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.9px; color: var(--text-secondary); white-space: nowrap;
}
.char-auto input { accent-color: #1c5cab; margin: 0; }
.char-fine { font-size: 12.4px; color: var(--text-muted); }
.char-fine b { color: var(--text-secondary); }

.char-again { align-self: flex-start; margin-top: 14px; }

/* 조작부 묶음 — 데스크톱에선 그냥 흐름대로 */
.char-foot { display: flex; flex-direction: column; gap: 9px; }

/* 좁은 화면: 봉선생 팝업을 바텀시트로 바꾸고 조작부를 하단에 고정한다.
   X·카카오톡 인앱 브라우저처럼 세로가 짧아도 쓰다듬기/뿅망치 버튼이 항상 보인다. */
@media (max-width: 760px) {
  #charModal { padding: 0; align-items: end; }

  .char-pop {
    flex-direction: column; align-items: stretch;
    width: 100%; margin: auto 0 0; gap: 0;
    max-height: 90vh;
    max-height: 90dvh;
    padding: 0 16px calc(10px + env(safe-area-inset-bottom));
    border: none; border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .34);
    animation: sheetBoing .46s cubic-bezier(.2, 1, .35, 1);
  }
  @keyframes sheetBoing {
    0%   { transform: translateY(100%); }
    58%  { transform: translateY(-12px); }
    78%  { transform: translateY(5px); }
    92%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
  }

  .char-pop.boing { animation: sheetBoing .46s cubic-bezier(.2, 1, .35, 1) !important; }
  .char-close { top: 8px; right: 6px; }
  .char-body { gap: 7px; padding-top: 14px; }
  .char-name b { font-size: 18.2px; }
  .char-lines p { font-size: 15.6px; padding: 11px 13px; }
  .char-tease { font-size: 14.4px; padding: 10px 12px; }

  /* 좁은 화면에선 봉선생을 더 작게, 버튼 바로 왼쪽에 붙인다 */
  .char-dock {
    gap: 10px; margin-top: 8px; padding-top: 10px;
    padding-bottom: 4px;
    box-shadow: 0 -10px 14px -10px rgba(0, 0, 0, .25);
  }
  .char-dock .char-stage { flex: 0 0 78px; }
  .char-art svg { max-height: 108px; }
  .char-foot { gap: 6px; }
  .char-play { margin-top: 0; }
  .play-btn { flex: 1 1 0; justify-content: center; }
  .play-count { flex: 1 1 100%; text-align: center; }
  .char-actions { display: flex; gap: 7px; }
  .char-actions .ghost { flex: 0 0 auto; }
  .char-actions .primary { flex: 1 1 auto; }
  .char-fine { font-size: 11.9px; }

  /* 강의 팝업도 같은 방식 — 이전/나가기/다음이 항상 보이게 */
  #lectureModal { padding: 0; align-items: end; }
  .lecture-pop {
    flex-direction: column; align-items: stretch;
    width: 100%; margin: auto 0 0;
    max-height: 92vh;
    max-height: 92dvh;
    padding: 0 16px calc(10px + env(safe-area-inset-bottom));
    border: none; border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    animation: sheetUp .26s cubic-bezier(.2, 1, .4, 1);
  }
  .lec-stage { flex: none; width: 92px; align-self: center; margin: 12px 0 2px; }
  .lec-visual canvas { height: 130px; }
  .lec-nav {
    position: sticky; bottom: 0; z-index: 3;
    padding: 8px 0 4px; background: var(--surface-1);
    box-shadow: 0 -10px 14px -10px rgba(0, 0, 0, .25);
  }
}

/* ================================================================= */
/* 📱 모바일 최적화                                                    */
/* ================================================================= */

@media (max-width: 760px) {
  body { padding: 0 13px 52px; font-size: 16.6px; line-height: 1.72; }

  .topbar { padding: 16px 0 12px; gap: 10px; }
  .brand { gap: 10px; }
  .logo { font-size: 25px; }
  h1 { font-size: 18.2px; }
  .brand p { font-size: 13.4px; }

  /* 고지문은 기본으로 접어 한 줄만 (탭하면 펼쳐짐) */
  .notice { padding: 10px 12px; margin-bottom: 10px; }
  .notice > summary { font-size: 14.6px; gap: 8px; }
  .notice p { font-size: 14.2px; padding-left: 0; }

  /* 검색: 입력창 한 줄 + [기간][주기][분석하기] 한 줄 */
  .searchbar { padding: 10px; gap: 7px; }
  .search-wrap { flex: 1 1 100%; min-width: 0; }
  .field { flex: 1 1 26%; min-width: 0; }
  .field > span { display: none; }          /* 라벨 숨기고 높이 확보 */
  .field select { min-width: 0; width: 100%; font-size: 14.8px; padding: 10px 4px 10px 8px; }
  button.primary { flex: 1 1 34%; padding: 0 10px; min-height: 42px; font-size: 15.3px; white-space: nowrap; }
  input[type="text"], select { min-height: 42px; }

  /* 칩 줄은 가로 스크롤 한 줄로 — 세로 공간을 아낀다 */
  .quick {
    padding: 8px 0; gap: 6px; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .quick::-webkit-scrollbar { display: none; }
  .quick > * { flex: 0 0 auto; }
  #recentChips { display: contents; }
  .chip { padding: 6px 12px; min-height: 34px; white-space: nowrap; }
  /* 좁은 화면에선 '전체 지우기'는 팝업 안에만 두고, 줄에는 칩과 더보기만 남긴다 */
  #recentClear { display: none; }
  .chip-go { max-width: 66px; padding: 4px 2px 4px 10px; font-size: 13.5px; }
  .chip-recent .chip-x { padding: 0 7px 0 4px; }
  .quick-recent .chip { padding: 5px 10px; }
  .quick-recent { overflow: hidden; }

  .card { padding: 15px 14px; margin-bottom: 14px; border-radius: 11px; }
  h2 { font-size: 20px; }
  h3 { font-size: 16.7px; }

  /* 헤드라인: 종목명과 가격을 한 줄에 붙여 첫 화면에 차트가 보이게 */
  .hero-head { gap: 4px 10px; align-items: baseline; }
  .hero-head > div:first-child { flex: 1 1 auto; min-width: 0; }
  .hero-head h2 { font-size: 18.2px; }
  .hero-head p { font-size: 12.4px; }
  .hero-price { text-align: right; flex: 0 0 auto; }
  .price { font-size: 21px; }
  .change { font-size: 13.4px; }
  .hero-verdict { padding: 11px 12px; gap: 10px; margin: 11px 0 2px; }
  .verdict-badge strong { font-size: 18.2px; }
  .score-head strong { font-size: 20px; }
  .summary { font-size: 14.8px; gap: 6px; margin-top: 12px; }
  .char-again { margin-top: 10px; }

  /* 차트: 토글은 가로 스크롤, 높이는 화면에 맞게 */
  .toggles {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .toggles::-webkit-scrollbar { display: none; }
  .toggles label { white-space: nowrap; }
  .legend .hint { margin-left: 0; width: 100%; }
  .chart-host { height: 66vh; height: 66dvh; min-height: 340px; max-height: 520px; }

  .facts, .indi-grid, .rg-types { grid-template-columns: 1fr; }
  .pat-thumb { flex: 0 0 84px; }
  .pat-thumb canvas { height: 52px; }
  .pattern-top { gap: 11px; }
  .seg-chart { height: 92px; }
  .seg-stats { gap: 6px 16px; font-size: 14.4px; }
  .breakdown .bd { grid-template-columns: 1fr auto; }
  .breakdown .bd .bar { display: none; }
  .checks li { padding-left: 34px; font-size: 15.4px; }
  .rg-stats { grid-template-columns: repeat(2, 1fr); }

  .disclaimer { font-size: 14px; padding: 14px 15px; }
}

/* 🔍 구간 해설 팝업 → 모바일에서는 바텀시트로 */
@media (max-width: 760px) {
  .rg-modal { padding: 0; align-items: end; }
  .rg-pop {
    margin: auto 0 0; width: 100%;
    max-height: 82vh;
    max-height: 82dvh;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0; border: none; border-top: 1px solid var(--border);
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .34);
    animation: sheetUp .26s cubic-bezier(.2, 1, .4, 1);
  }
  @keyframes sheetUp { from { transform: translateY(100%); } }

  .rg-grab {
    display: block; position: sticky; top: 0; z-index: 3;
    padding: 10px 0 6px; background: var(--surface-1);
  }
  .rg-grab::after {
    content: ''; display: block; width: 42px; height: 4px; margin: 0 auto;
    border-radius: 2px; background: var(--baseline);
  }
  .rg-pop-head { position: sticky; top: 24px; z-index: 3; background: var(--surface-1); padding-bottom: 6px; }
  .rg-pop .char-close { top: 12px; }
  .rg-foot .mini-btn { flex: 1 1 auto; min-height: 36px; }
  .rg-foot .primary { flex: 1 1 100%; margin-left: 0; }
}

/* ---------- 🗯️ 10초마다 옆에서 끼어드는 막말 팝업 ---------- */
.peek {
  position: fixed; right: 0; bottom: 22%; z-index: 78;
  display: flex; align-items: center; gap: 10px;
  max-width: min(340px, 82vw); padding: 12px 34px 12px 12px;
  border: 1px solid var(--border); border-right: none;
  border-radius: 16px 0 0 16px;
  background: var(--surface-1); box-shadow: -8px 10px 30px rgba(0, 0, 0, .18);
  cursor: pointer;
  transform: translateX(105%);
}
.peek[hidden] { display: none; }
.peek.in  { animation: peekIn .42s cubic-bezier(.2, 1.2, .35, 1) forwards; }
.peek.out { animation: peekOut .38s cubic-bezier(.5, 0, .8, .3) forwards; }
@keyframes peekIn  {
  0%   { transform: translateX(105%) rotate(4deg); }
  70%  { transform: translateX(-8px) rotate(-1.5deg); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes peekOut { to { transform: translateX(105%) rotate(3deg); } }

.peek-art { flex: 0 0 40px; }
.peek-art svg { width: 100%; height: auto; animation: sway 2.6s ease-in-out infinite; }
.peek-line { font-size: 14.3px; line-height: 1.55; color: var(--text-primary); }
.peek-x {
  position: absolute; top: 6px; right: 8px;
  width: 20px; height: 20px; padding: 0; cursor: pointer;
  font-size: 12.4px; line-height: 1; color: var(--text-muted);
  background: none; border: none; border-radius: 5px;
}
.peek-x:hover { background: var(--surface-2); color: var(--text-primary); }

@media (max-width: 760px) {
  .peek { bottom: 26%; max-width: 78vw; padding: 10px 30px 10px 10px; gap: 8px; }
  .peek-art { flex: 0 0 32px; }
  .peek-line { font-size: 14.5px; }
}

/* ------------------ 🕯️ 상주 봉선생 (플로터) ------------------ */
.floater {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  transition: left .38s cubic-bezier(.3, 1.3, .4, 1), right .38s cubic-bezier(.3, 1.3, .4, 1),
              bottom .38s cubic-bezier(.3, 1.3, .4, 1);
}
.floater[hidden] { display: none; }
/* 왼쪽으로 도망갔을 때는 말풍선·메뉴도 왼쪽 정렬 */
.floater.on-left { align-items: flex-start; }
.floater.on-left .floater-bubble { border-radius: 14px 14px 14px 4px; }
/* 도망칠 때 통통 튀는 느낌 */
.floater.fleeing .floater-art svg { animation: fleeHop .5s ease-out 1; }
@keyframes fleeHop {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-14px) scale(1.12) rotate(-12deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

.floater-btn {
  width: 64px; height: 64px; padding: 6px; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-1); box-shadow: var(--shadow);
  display: grid; place-items: center; transition: transform .12s ease;
}
.floater-btn:hover { transform: translateY(-3px) scale(1.05); }
.floater-btn:active { transform: scale(.94); }
.floater-art { display: block; width: 100%; }
.floater-art svg { width: 100%; height: auto; animation: floatIdle 3.4s ease-in-out infinite; }
.floater-art.hop svg { animation: floatHop .6s ease-out 1; }
@keyframes floatIdle { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes floatHop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-12px) scale(1.08); }
  70% { transform: translateY(2px) scale(.96); }
  100% { transform: translateY(0) scale(1); }
}

.floater-bubble {
  max-width: 250px; padding: 11px 14px; font-size: 14.3px; line-height: 1.55;
  border-radius: 14px 14px 4px 14px;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.floater-bubble[hidden] { display: none; }
.floater-bubble.pop { animation: bubblePop .3s cubic-bezier(.2, 1.4, .4, 1) 1; }
@keyframes bubblePop { from { opacity: 0; transform: translateY(8px) scale(.92); } }

.floater-menu {
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border-radius: 12px; background: var(--surface-1);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  animation: bubblePop .2s ease 1;
}
.floater-menu[hidden] { display: none; }
.floater-menu button {
  padding: 9px 14px; font: inherit; font-size: 14.3px; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 8px; color: var(--text-primary);
  white-space: nowrap; min-height: 38px;
}
.floater-menu button:hover { background: var(--surface-2); }

/* --------------------------- 📖 강의 --------------------------- */
.lecture-pop { width: min(700px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.lec-stage { flex: 0 0 130px; }
.lec-progress {
  height: 4px; border-radius: 2px; background: var(--gridline); overflow: hidden; margin-bottom: 4px;
}
.lec-progress span {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: var(--series-b); transition: width .3s ease;
}
.lec-nav { display: flex; gap: 8px; margin-top: 6px; }
.lec-nav .ghost { min-height: 42px; }
.lec-nav .primary { flex: 1 1 auto; min-height: 42px; }
.lec-exit { color: var(--critical); border-color: rgba(208, 59, 59, .35); border-color: color-mix(in srgb, var(--critical) 35%, transparent); }
.lec-exit:hover { background: rgba(208, 59, 59, .1); background: color-mix(in srgb, var(--critical) 10%, transparent); }
#lecLines p { font-size: 15.1px; }

/* 강의 슬라이드마다 딸려 나오는 차트 그림 — 용어가 여럿이면 그림도 여럿 */
.lec-visuals { display: flex; flex-direction: column; gap: 8px; }
.lec-visuals.multi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 760px) {
  .lec-visuals.multi { grid-template-columns: 1fr; }
}
.lec-visual {
  margin: 2px 0 4px; padding: 8px 8px 6px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface-1);
  animation: bubbleIn .34s cubic-bezier(.2, 1.2, .4, 1) 1;
}
.lec-visual canvas { display: block; width: 100%; height: 150px; }
.lec-visual figcaption {
  margin-top: 5px; font-size: 12.4px; color: var(--text-muted); text-align: center;
}

@media (max-width: 760px) {
  .floater { right: 12px; bottom: 12px; }
  .floater-btn { width: 54px; height: 54px; }
  .floater-bubble { max-width: min(74vw, 250px); }
  .lecture-pop { flex-direction: column; align-items: center; }
  .lec-stage { flex: none; width: 100px; }
}

/* ---------------- 🕯️ 본문에 불쑥 끼어드는 잔소리 ---------------- */
.bong-nag {
  display: flex; align-items: center; gap: 12px;
  margin: -4px 0 18px; padding: 12px 16px 12px 12px;
  border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface-1);
  opacity: 0; transform: translateX(-18px);
}
.bong-nag.pop { animation: nagIn .42s cubic-bezier(.2, 1.3, .4, 1) forwards; }
@keyframes nagIn {
  0%   { opacity: 0; transform: translateX(-24px) rotate(-4deg); }
  60%  { opacity: 1; transform: translateX(4px) rotate(1.5deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}
.bong-nag-art { flex: 0 0 42px; display: block; }
.bong-nag-art svg { width: 100%; height: auto; animation: sway 3s ease-in-out infinite; }
.bong-nag p {
  font-size: 14.8px; line-height: 1.6; color: var(--text-secondary);
}
.bong-nag p::before { content: '“'; }
.bong-nag p::after  { content: '”'; }
@media (max-width: 760px) {
  .bong-nag { gap: 10px; padding: 11px 13px 11px 10px; }
  .bong-nag-art { flex: 0 0 34px; }
  .bong-nag p { font-size: 14.8px; }
}

/* ---------------- 👑 자아 비대 (쓰다듬기 누적) ---------------- */
.char-art.ego-on svg {
  transform: scale(var(--ego, 1));
  transition: transform .45s cubic-bezier(.3, 1.4, .4, 1);
}
.char-art.ego-burst svg {
  animation: egoBlow 1s cubic-bezier(.4, 0, .3, 1) forwards !important;
  transform-origin: center 60%;
}
@keyframes egoBlow {
  0%   { transform: scale(var(--ego, 1)) rotate(0); opacity: 1; }
  45%  { transform: scale(3.4) rotate(-4deg); opacity: 1; filter: brightness(1.4); }
  70%  { transform: scale(5.2) rotate(3deg); opacity: .8; }
  100% { transform: scale(8) rotate(0); opacity: 0; }
}

/* --------------------------- 📢 광고 --------------------------- */
.ad-slot {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  margin: 0 0 18px;
}
.ad-slot[hidden] { display: none; }
.ad-label {
  font-size: 11.5px; letter-spacing: .06em; color: var(--text-muted);
  align-self: flex-start;
}
/* 광고가 채워지기 전에는 자리를 잡지 않는다 (심사 중 빈 여백 방지).
   채워지면 .ad-filled 가 붙으면서 높이를 확보한다. */
.ad-box {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ad-slot.ad-filled .ad-box { min-height: var(--ad-h, 90px); }
.ad-box ins { max-width: 100%; }

/* --------------------------- 면책 --------------------------- */
.disclaimer {
  font-size: 13.8px; color: var(--text-secondary); line-height: 1.7;
  padding: 15px 17px; border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--surface-1);
}