/* 토리 공용 테마 — 애플(iOS·macOS) 스타일 토큰. 라이트 기본 · 다크는 data-theme="dark" 또는 OS 설정.
   세 화면이 </style> 뒤에서 링크한다(같은 우선순위면 이 파일이 이긴다). 기준 문서: docs/ui-design.md
   원칙: 강조색은 파랑 하나 · 카드 그림자 없음(배경색 차이로 구분) · 흐림 효과는 내비 바에만 · 빨강=오름 파랑=내림(한국 관습) */
:root{
  --bg:#F5F5F7; --surface:#F2F2F7; --card:#FFFFFF; --card2:#F5F5F7; --border:#E5E5EA; --card-border:transparent;
  --text:#1D1D1F; --text-strong:#1D1D1F; --muted:#6E6E73;
  --accent:#0071E3; --accent-soft:rgba(0,113,227,.08); --accent-soft2:rgba(0,113,227,.14);
  --up:#D70015; --down:#0066CC; --hold:#8E8E93; --warn:#F56300; --on-warn:#1D1D1F; --ok:#248A3D;
  --up-soft:rgba(215,0,21,.07); --down-soft:rgba(0,102,204,.08); --hold-soft:rgba(142,142,147,.14); --warn-soft:rgba(245,99,0,.10);
  --shadow:none; --shadow-lg:0 12px 40px rgba(0,0,0,.12); --overlay:rgba(245,245,247,.80);
  --grid:rgba(0,0,0,.05); --chart-text:#86868B; --chart-border:#E5E5EA; --radius:18px;
  --bar:rgba(255,255,255,.72);
  --bubble:#F0F0F2;   /* 토리 말풍선(연회색) */
  --me:#DDEBFD;       /* 내 말풍선(옅은 하늘색, 글자는 --text) — Muse 참고 */
  --shadow-float:0 6px 24px rgba(0,0,0,.08);  /* 떠 있는 알약·카드(입력창·탭 바·내비) */
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#2C2C2E; --card:#1C1C1E; --card2:#2C2C2E; --border:#38383A; --card-border:transparent;
  --text:#F5F5F7; --text-strong:#FFFFFF; --muted:#98989D;
  --accent:#0A84FF; --accent-soft:rgba(10,132,255,.16); --accent-soft2:rgba(10,132,255,.26);
  --up:#FF453A; --down:#409CFF; --hold:#8E8E93; --warn:#FF9F0A; --on-warn:#1D1D1F; --ok:#30D158;
  --up-soft:rgba(255,69,58,.16); --down-soft:rgba(64,156,255,.16); --hold-soft:rgba(142,142,147,.16); --warn-soft:rgba(255,159,10,.16);
  --shadow:none; --shadow-lg:0 16px 48px rgba(0,0,0,.6); --overlay:rgba(0,0,0,.72);
  --grid:rgba(255,255,255,.06); --chart-text:#98989D; --chart-border:#38383A;
  --bar:rgba(28,28,30,.72);
  --bubble:#262629;
  --me:#1E3A5F;
  --shadow-float:0 6px 24px rgba(0,0,0,.5);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --surface:#2C2C2E; --card:#1C1C1E; --card2:#2C2C2E; --border:#38383A; --card-border:transparent;
    --text:#F5F5F7; --text-strong:#FFFFFF; --muted:#98989D;
    --accent:#0A84FF; --accent-soft:rgba(10,132,255,.16); --accent-soft2:rgba(10,132,255,.26);
    --up:#FF453A; --down:#409CFF; --hold:#8E8E93; --warn:#FF9F0A; --on-warn:#1D1D1F; --ok:#30D158;
    --up-soft:rgba(255,69,58,.16); --down-soft:rgba(64,156,255,.16); --hold-soft:rgba(142,142,147,.16); --warn-soft:rgba(255,159,10,.16);
    --shadow:none; --shadow-lg:0 16px 48px rgba(0,0,0,.6); --overlay:rgba(0,0,0,.72);
    --grid:rgba(255,255,255,.06); --chart-text:#98989D; --chart-border:#38383A;
    --bar:rgba(28,28,30,.72);
    --bubble:#262629;
    --me:#1E3A5F;
    --shadow-float:0 6px 24px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

/* ── 공용 컴포넌트 (세 화면 공통) ── */
html,body{background:var(--bg); color:var(--text)}
.card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); box-shadow:var(--shadow)}
.badge{border-color:var(--border); background:var(--card); color:var(--muted); border-radius:999px}
.badge.paper{color:var(--warn); border-color:var(--warn-soft); background:var(--warn-soft)}
.badge.live{color:var(--up); border-color:var(--up-soft); background:var(--up-soft)}
.c-up{color:var(--up)} .c-down{color:var(--down)} .c-flat{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
::selection{background:var(--accent-soft2)}
button{font-family:inherit}
/* 한글은 띄어쓰기 단위로만 줄바꿈한다 — 기본값이면 "읽습니다."가 "읽습/니다."로 음절 중간에서 끊긴다. 긴 영문·숫자열은 넘치지 않게 꺾는다 */
body{word-break:keep-all; overflow-wrap:break-word}
h1,h2,h3,h4{text-wrap:balance; letter-spacing:-0.02em}  /* 애플식 제목 — 자간을 살짝 좁힌다 */
body{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* 누르면 살짝 작아진다 — 애플의 공통 반응. 움직임 줄이기 설정이면 끈다 */
@media (prefers-reduced-motion: no-preference){
  button, .btn, .bbtn, .chip{transition:transform .12s ease-out, background-color .15s ease-out}
  button:active:not(:disabled), .btn:active, .bbtn:active, .chip:active{transform:scale(.97)}
}
p,li{text-wrap:pretty}

/* ── 애플식 표면 — 각 화면이 따로 그리던 테두리를 걷어낸다 (이 파일이 뒤에 링크돼 같은 우선순위에서 이긴다) ──
   카드: 흰 카드 + 배경(#F5F5F7) 대비로만 구분, 그림자·테두리 없음(다크는 #1C1C1E on #000).
   입력창·칩·봇 말풍선: iOS처럼 테두리 없는 회색 채움, 입력창은 포커스 때만 파란 테두리. */
.card, .kpi, .bcard{border:1px solid var(--card-border); border-radius:var(--radius); box-shadow:none}
.chip, .tg, .ind, .dec, .cchips button, .mo-chips .chip, .snav a, .cmsg.bot, details.edu, .badge{border-color:transparent}
.searchwrap input, .mo-search input, .settings input, .settings select, .cinput textarea{border-color:transparent; background:var(--surface)}
.searchwrap input, .mo-search input{border-radius:999px; padding-left:18px}
.searchwrap input:focus, .mo-search input:focus, .settings input:focus, .settings select:focus, .cinput textarea:focus{border-color:var(--accent); background:var(--card)}

/* ── 버튼 — iOS 문법: 주 버튼은 파란 채움, 보조는 테두리 없는 회색 채움 + 파란 글자, 모서리 12px.
   승인(.btn.ok 초록)·위임 종료(.mbtn-off 주황)는 돈과 관련된 의미색이라 유지 ── */
.btn, .bbtn, .btn-bt, .cinput button, .ctools button{border-radius:12px; font-weight:600}
.btn.no, .btn.ghost, .ctools button, .mbtn-off{border-color:transparent}
.btn.ghost{color:var(--accent)}
.mbtn-off{background:var(--warn-soft)}
@media (max-width:640px){ .btn, .bbtn{min-height:44px} }  /* 폰에서 누르기 쉬운 높이(애플 44px) */
td > b:first-child{white-space:nowrap}  /* 표 안 종목명("KODEX 200")은 꺾지 않는다 — 표는 가로로 밀어 본다 */

/* ── 토리 산책(toriwalk.js) — 화면 아래를 뒤뚱뒤뚱. 마우스를 대거나 누르면 점프(웅크림 → 튀어오름 → 착지 눌림).
   위치는 --tx(px), 바라보는 쪽은 --face(1 왼쪽 · -1 오른쪽). 움직임 줄이기면 애니메이션 없음 ── */
#toriWalker{position:fixed; left:0; bottom:14px; z-index:55; width:76px; height:76px; padding:0; border:none; background:none;
  cursor:grab; touch-action:none; transform:translate(var(--tx, 0px), var(--ty, 0px)); -webkit-tap-highlight-color:transparent}  /* --ty: 끌어 올린 높이 */
#toriWalker::after{content:""; position:absolute; left:24%; right:24%; bottom:1px; height:7px; border-radius:50%;
  background:rgba(0,0,0,.14); filter:blur(2px); z-index:-1}  /* 발밑 그림자(이미지의 그림자는 지웠다) */
#toriWalker .tw-body{display:block; width:100%; height:100%; transform-origin:50% 100%}
#toriWalker .tw-face{transform:scaleX(var(--face, 1))}  /* 그림과 눈꺼풀을 함께 뒤집는다 */
.tw-face{position:relative; display:block; width:100%; height:100%}
.tw-face img{display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none}
/* 눈꺼풀 — tori-3d.png 기준 눈 위치(%), 주변 털색. 평소엔 접혀 있다가 .blink 때 0.15초 덮인다(toriwalk.js) */
.tw-lid{position:absolute; border-radius:50%; transform:scaleY(0); transform-origin:50% 0; transition:transform 70ms ease-in;
  box-shadow:inset 0 -2px 0 rgba(60,30,12,.75)}  /* 감은 눈의 속눈썹 선 */
.tw-lid.l{left:21.3%; top:35.6%; width:7.2%; height:7.4%; background:#C0713A}
.tw-lid.r{left:37.6%; top:36.4%; width:7.2%; height:7.4%; background:#AE6838}
.tw-face.blink .tw-lid{transform:scaleY(1)}
html.tori-acting .tw-lid{display:none}  /* 답변 동작(움직이는 그림) 중엔 눈꺼풀이 맞지 않는다 */
/* 채팅을 열면 토리는 머리말로 들어간다(토리 내보내기를 하면 밖에 남는다) */
#toriWalker.inchat{opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s, visibility .25s}
/* 말 걸기(GPT 미니식) — 토리 아래 [✎ · 🎤 · 💬] 막대, ✎ 를 누르면 [+ · 입력 · ↑] */
#toriPop{position:fixed; z-index:56; transform:translateX(-50%)}
#toriPop[hidden], #toriPop [hidden]{display:none}
#toriPop svg, #toriMenu svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tp-bar{display:flex; align-items:center; gap:2px; padding:5px; background:var(--card); border-radius:22px;
  box-shadow:var(--shadow-float), 0 0 0 1px var(--border)}
.tp-bar button{width:42px; height:36px; border:none; background:none; border-radius:16px; color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.tp-bar button:hover{background:var(--surface)}
.tp-sep{width:1px; height:18px; background:var(--border)}
.tp-compose{display:flex; align-items:center; gap:4px; width:min(320px, calc(100vw - 24px)); padding:5px; background:var(--card);
  border-radius:26px; box-shadow:var(--shadow-float), 0 0 0 1px var(--border)}
.tp-compose:focus-within{box-shadow:var(--shadow-float), 0 0 0 2px var(--accent)}
.tp-compose input{flex:1; min-width:0; border:none; background:transparent; color:var(--text); font:inherit; font-size:15px; outline:none; padding:8px 4px}
.tp-compose button{flex:none; width:36px; height:36px; border-radius:50%; border:none; background:transparent; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.tp-compose .tp-send{background:var(--accent); color:#fff}
/* 토리 오른쪽 클릭 메뉴 */
#toriMenu{position:fixed; z-index:80; min-width:220px; padding:6px; background:var(--card); border-radius:14px;
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--border)}
#toriMenu[hidden]{display:none}
#toriMenu button{display:block; width:100%; text-align:left; padding:9px 12px; border:none; background:none; border-radius:9px;
  color:var(--text); font:inherit; font-size:14px; cursor:pointer}
#toriMenu button:hover{background:var(--surface)}
#toriWalker:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:16px}
#toriWalker.held{cursor:grabbing}
#toriWalker.held .tw-body{transform:scale(1.08) rotate(-7deg)}  /* 집혀 있으면 살짝 커지고 매달린 듯 기운다 */
#toriWalker.held::after{opacity:.4; transform:scale(.7)}
body.has-walker #chatFab{display:none}  /* 토리가 채팅 버튼을 대신한다 */
@media (prefers-reduced-motion: no-preference){
  #toriWalker.walking .tw-body{animation:tw-waddle .55s ease-in-out infinite}
  #toriWalker.jump .tw-body{animation:tw-jump .6s cubic-bezier(.3,.7,.4,1)}
}
@keyframes tw-waddle{0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-5px) rotate(4deg)}}
@keyframes tw-jump{0%{transform:scale(1.1,.88)} 35%{transform:translateY(-34px) scale(.94,1.08)} 70%{transform:translateY(0) scale(1.08,.9)} 100%{transform:none}}
@media (max-width:640px){ #toriWalker{width:62px; height:62px; bottom:calc(62px + 10px + 10px + env(safe-area-inset-bottom))} }  /* 떠 있는 탭 바 위 */

/* ── 공용 사이드바 내비 (종목분석 · 자동매매 · 설정) — 세 페이지가 같은 마크업(.tside)을 쓴다.
   데스크톱: 왼쪽 세로 레일 84px(아이콘 위·글자 아래), 폰(≤640px): 하단 탭 바. body 에 has-tside 를 붙이면 자리를 비운다 ── */
.tside{position:fixed; left:12px; top:12px; bottom:12px; width:84px; z-index:40; display:flex; flex-direction:column; gap:4px;
  padding:12px 8px; background:var(--bar); border-radius:24px; box-shadow:var(--shadow-float);  /* 떠 있는 둥근 카드(Muse 참고) */
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px)}  /* 흐림 효과는 내비 바에만 */
.tside .tside-brand{text-align:center; font-size:26px; line-height:1; padding:6px 0 14px}
.tside .tside-brand img{display:block; margin:0 auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.12))}  /* 3D 토리(tori-3d.png) */
.tside a{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border-radius:12px;
  color:var(--muted); text-decoration:none; font-size:11px; font-weight:500; white-space:nowrap}
.tside a{position:relative}
.tside a .ic{font-size:20px; line-height:1; display:flex}
.tside a .ic svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
/* 토리 답변 도착 표시 — chatwatch.js 가 종목분석 링크에 붙인다 */
.tside a .chatdot{position:absolute; top:4px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center}
.tside a:hover{color:var(--text); background:var(--surface)}
.tside a.on{color:var(--accent); background:var(--accent-soft); font-weight:600}
.tside a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
body.has-tside{padding-left:calc(12px + 84px + 22px)}
@media (max-width:640px){
  .tside{top:auto; bottom:calc(10px + env(safe-area-inset-bottom)); left:12px; right:12px; width:auto; height:62px;
    flex-direction:row; padding:6px; border-radius:31px}  /* 떠 있는 알약 탭 바 */
  .tside .tside-brand{display:none}
  .tside a{flex:1; padding:5px 2px; font-size:10.5px; border-radius:25px}
  .tside a.on{background:var(--surface)}  /* 선택된 탭은 회색 알약 */
  body.has-tside{padding-left:16px; padding-bottom:calc(62px + 10px + 24px)}
}