:root{
  --bg:#0b0d10;
  --bg-elev:#14171c;
  --bg-elev-2:#1b1f26;
  --line:#262b33;
  --text:#eef1f5;
  --text-dim:#8b93a1;
  --text-faint:#565e6b;
  --up:#f5445a;      /* 한국 증시 관례: 상승 = 빨강 (토스증권 실측값) */
  --up-bg:rgba(245,68,90,0.12);
  --down:#4391ff;    /* 한국 증시 관례: 하락 = 파랑 (토스증권 실측값) */
  --down-bg:rgba(67,145,255,0.12);
  --accent:#3ddc97;
  --radius:14px;
  --mono:'SF Mono','Consolas','Roboto Mono',monospace;
}

:root[data-theme="light"]{
  --bg:#f2f4f7;
  --bg-elev:#ffffff;
  --bg-elev-2:#eef1f5;
  --line:#e1e5eb;
  --text:#14171c;
  --text-dim:#5b6472;
  --text-faint:#9aa2ad;
  --up:#e2334c;      /* 흰 배경에서도 대비가 나오도록 살짝 어둡게 */
  --up-bg:rgba(226,51,76,0.10);
  --down:#2f7de0;
  --down-bg:rgba(47,125,224,0.10);
  --accent:#12966a;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Pretendard','Malgun Gothic',sans-serif;
  min-height:100vh;
  transition:background .15s ease, color .15s ease;
}

.app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}

/* 화면 투명도 설정 — 기본/위장 화면 콘텐츠 전체(제목표시줄 포함, 설정·알림 팝업·투명도
   바는 제외)를 감싸는 래퍼. opacity는 자손이 개별적으로 되돌릴 수 없는 속성이라, 조절
   바 자신은 반드시 이 래퍼 밖에 둬야 슬라이더 자체가 같이 옅어지는 걸 막을 수 있음.
   하단에 고정된 투명도 바에 가려지지 않게 여유 패딩을 둠.
   flex:1을 꼭 줘야 함 — 이 래퍼가 생기기 전엔 .panels(flex:1)가 .app(min-height:100vh)의
   남는 공간을 직접 채워서 위장 테마 상태바가 항상 화면 맨 아래에 붙어있었는데, 이
   래퍼로 한 단계 더 감싸면서 #appContent 자신이 안 늘어나면 .panels의 flex:1이 #appContent의
   짧은 콘텐츠 높이 안에서만 작동해서 상태바가 화면 중간에 붕 뜨는 버그가 있었음
   (2026-08-24 발견/수정) — #appContent도 같이 늘어나야 예전처럼 상태바가 바닥에 붙음. */
#appContent{display:flex; flex-direction:column; flex:1; padding-bottom:40px; transition:opacity 200ms ease;}
/* 마우스 호버로 풀리게 했었는데, 커서가 그냥 얹혀만 있어도 계속 또렷하게 보이는 게
   문제였음(마우스를 안 치운 채로 상사가 지나가면 그 순간엔 안 가려짐) — 스페이스바를
   누르고 있는 동안만 보이는 방식으로 교체함(app.js). 입력창에 포커스가 가 있을 때는
   타이핑한 내용을 봐야 하니 그대로 유지. */
#appContent:focus-within, #appContent.opacity-reveal{opacity:1 !important;}

/* 화면 투명도 조절 바 — 카카오톡 PC 채팅방처럼 앱 하단에 항상 고정. #appContent 밖이라
   화면이 옅어져도 슬라이더는 항상 또렷하게 보임 */
#opacityBar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  max-width:480px; margin:0 auto;
  display:flex; align-items:center; gap:8px;
  padding:6px 14px calc(6px + env(safe-area-inset-bottom));
  background:var(--bg-elev); border-top:1px solid var(--line);
}
.opacity-bar-label{font-size:11px; color:var(--text-faint); flex-shrink:0;}
.opacity-bar-out{font-size:11px; color:var(--text-faint); min-width:30px; text-align:right; flex-shrink:0;}

/* Topbar */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:18px 18px 10px;
}
.brand{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.brand-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}
.brand-name{font-size:17px; font-weight:700; letter-spacing:-0.01em;}
.topbar-actions{display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0;}

/* 인기 검색 티커 (타이틀바, 토스증권 스타일 세로 슬라이딩) */
.ticker-wrap{position:relative; flex:1 1 auto; min-width:0;}
.popular-ticker{
  display:flex; align-items:center;
  width:100%;
  background:var(--bg-elev); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px;
  cursor:pointer;
}
.popular-ticker[hidden]{display:none;}
.popular-ticker:active{background:var(--bg-elev-2);}
.ticker-viewport{
  position:relative; height:16px; width:100%; overflow:hidden;
}
.ticker-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transform:translateY(0); opacity:1;
  transition:transform 320ms ease, opacity 320ms ease;
}
.ticker-slide.out{transform:translateY(-100%); opacity:0;}
.ticker-slide.enter{transition:none; transform:translateY(100%); opacity:0;}
.ticker-slide .ticker-rank{
  flex-shrink:0; color:var(--accent); font-family:var(--mono); font-weight:800; font-size:11px;
}
.ticker-slide .ticker-name{flex-shrink:1; min-width:24px; overflow:hidden; text-overflow:ellipsis;}
.ticker-slide .ticker-change{flex-shrink:0; font-family:var(--mono); font-weight:600; font-size:11px;}
.ticker-slide .ticker-change.up{color:var(--up);}
.ticker-slide .ticker-change.down{color:var(--down);}
.ticker-slide .ticker-change.flat{color:var(--text-dim);}

/* 티커 스켈레톤 — 인기 검색어 응답 기다리는 동안 빈 자리 대신 짧게 반짝이는 바 하나 */
.skel-ticker{width:72px; height:11px;}

/* 티커 호버 시 펼쳐지는 1~10위 전체 목록 — 티커 알약 왼쪽 끝에 맞춰서 바로 밑에
   열리게 함(항상 같은 기준점이라 기본 화면/위장 모드 어디서든 위치가 일관됨).
   폭은 티커 알약 자체(129px 안팎)보다 넓게 고정해서 이름+가격이 안 눌리게 함 */
.ticker-panel{
  position:absolute; z-index:40;
  top:calc(100% + 8px); left:0;
  min-width:260px; max-width:min(320px, calc(100vw - 32px));
  background:var(--bg-elev); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  padding:6px; max-height:340px; overflow-y:auto;
}
.ticker-panel[hidden]{display:none;}
.ticker-panel-row{
  display:flex; align-items:center; gap:9px;
  width:100%; padding:8px 10px; border:none; border-radius:9px;
  background:transparent; color:var(--text); text-align:left;
  cursor:pointer;
}
.ticker-panel-row:active{background:var(--bg-elev-2);}
.ticker-panel-row .tp-rank{
  flex-shrink:0; width:18px; text-align:center;
  font-family:var(--mono); font-weight:800; font-size:12px; color:var(--accent);
}
.ticker-panel-row .tp-name{flex:1 1 auto; min-width:0; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ticker-panel-row .tp-quote{flex-shrink:0; display:flex; align-items:center; gap:6px; font-family:var(--mono);}
.tp-price{font-size:12.5px; font-weight:700;}
.tp-price.tp-price-empty{color:var(--text-faint); font-weight:400;}
.tp-change{font-size:11px; font-weight:600;}
.tp-change.up{color:var(--up);}
.tp-change.down{color:var(--down);}
.tp-change.flat{color:var(--text-dim);}
.icon-btn{
  background:var(--bg-elev); border:1px solid var(--line);
  color:var(--text-dim); border-radius:10px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.icon-btn:active{transform:scale(0.94);}
.icon-btn[hidden]{display:none;}
.icon-btn.spin svg{animation:spin 0.7s linear;}
@keyframes spin{to{transform:rotate(360deg);}}

.icon-btn.skin-active{border-color:var(--accent); color:var(--accent);}

/* 설정 패널 — 위장 테마 + 다크모드를 한 곳에 모은 바텀시트.
   settingsBtn(기본 화면)이나 각 위장 화면 로고 버튼 어디서 열든 항상 같은 패널. */
.settings-modal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:flex-end; justify-content:center;
}
.settings-modal[hidden]{display:none;}
.settings-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.5);}
.settings-panel{
  position:relative; z-index:1;
  width:100%; max-width:480px;
  background:var(--bg-elev);
  border-top-left-radius:20px; border-top-right-radius:20px;
  padding:16px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(0,0,0,0.35);
  max-height:80vh; overflow-y:auto;
  animation:settings-slide-up 200ms ease;
}
@keyframes settings-slide-up{from{transform:translateY(16px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.settings-panel-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.settings-panel-title{font-size:16px; font-weight:800;}
.settings-section{margin-bottom:20px;}
.settings-section:last-child{margin-bottom:0;}
.settings-section-title{
  margin:0 0 8px; font-size:12px; font-weight:700; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:0.02em;
}
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px;
  background:var(--bg-elev-2); outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--accent); cursor:pointer; border:none;
}
input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--accent); cursor:pointer; border:none;
}
input[type="range"]::-moz-range-track{
  height:4px; border-radius:2px; background:var(--bg-elev-2);
}

.settings-theme-toggle{display:flex; gap:8px;}
.settings-theme-option, .settings-currency-option{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 0; border:1px solid var(--line); border-radius:10px;
  background:var(--bg-elev-2); color:var(--text-dim); font-size:13px; font-weight:600;
  cursor:pointer;
}
.settings-theme-option.active, .settings-currency-option.active{border-color:var(--accent); color:var(--accent);}
/* 위장 테마 선택 — 아이콘 칩 3열 그리드. 각 배지 색은 해당 위장 테마 안의 로고
   버튼(xlLogoBtn 등)과 같은 브랜드 색을 재사용함 */
.settings-skin-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
.skin-chip{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 4px; border:1px solid var(--line); border-radius:12px;
  background:transparent; cursor:pointer;
}
.skin-chip.selected{background:var(--bg-elev-2); border-color:var(--accent);}
.skin-chip:active{background:var(--bg-elev-2);}
.skin-chip[disabled]{opacity:0.5; cursor:default;}
.skin-chip-badge{
  position:relative;
  width:32px; height:32px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; flex-shrink:0;
}
.skin-chip-check{
  position:absolute; top:-4px; right:-4px;
  width:14px; height:14px; border-radius:50%;
  background:var(--accent); color:#08110d;
  font-size:9px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.skin-chip-label{
  font-size:11px; font-weight:600; color:var(--text-dim);
  text-align:center; line-height:1.2;
}
.skin-chip.selected .skin-chip-label{color:var(--text); font-weight:700;}
.skin-chip-badge-text{
  font-size:9px; color:var(--text-faint); background:var(--bg-elev-2);
  padding:1px 5px; border-radius:6px;
}

/* 보스키(Esc) 테마 선택 — 자주 안 바꾸는 설정이라 아이콘 칩 그리드 대신 네이티브
   드롭다운으로 (한 번 고르고 나면 다시 볼 일이 별로 없어서, 매번 훑어보게 만드는
   그리드보다 한 줄짜리 드롭다운이 더 적합함) */
.select-input{
  width:100%; background:var(--bg-elev-2); border:1px solid var(--line);
  color:var(--text); border-radius:10px; padding:10px 12px; font-size:14px;
  outline:none; cursor:pointer;
}
.select-input:focus{border-color:var(--accent);}

/* 가격 알림 설정 팝업 — #settingsModal과 같은 바텀시트 클래스(.settings-modal 등)를
   그대로 재사용하고, 여기 있는 내용물만 추가로 정의함 */
.alert-current-price{font-size:13px; color:var(--text-dim); margin:0 0 10px;}
.alert-target-input{
  width:100%; background:var(--bg-elev-2); border:1px solid var(--line);
  color:var(--text); border-radius:10px; padding:11px 13px; font-size:15px;
  font-family:var(--mono); outline:none; margin-bottom:8px;
}
.alert-target-input:focus{border-color:var(--accent);}
.alert-modal-actions{display:flex; gap:8px;}
.btn-ghost{
  background:transparent; color:var(--text-dim); border:1px solid var(--line);
  border-radius:10px; padding:0 16px; font-size:13px; font-weight:700;
  cursor:pointer; flex:1;
}
.btn-ghost:active{background:var(--bg-elev-2);}
.alert-modal-actions .btn-primary{flex:2;}

/* 설정 패널의 "가격 알림 내역" 섹션 */
.alert-history-list{display:flex; flex-direction:column; gap:2px; max-height:180px; overflow-y:auto;}
.alert-history-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  padding:8px 10px; border-radius:8px; font-size:12.5px;
}
.alert-history-row .ah-name{font-weight:700; flex-shrink:0;}
.alert-history-row .ah-detail{
  color:var(--text-dim); flex:1; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.alert-history-row .ah-time{color:var(--text-faint); font-size:11px; flex-shrink:0;}
.alert-history-empty{color:var(--text-faint); font-size:12.5px; padding:8px 10px;}

/* 환율 계산기 팝업 — #settingsModal과 같은 바텀시트 클래스를 재사용 */
.fx-calc-row{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.fx-calc-result{
  font-family:var(--mono); font-size:22px; font-weight:800;
  text-align:center; margin:4px 0 6px;
}

.status-bar{
  margin:0 18px 8px; padding:8px 12px;
  background:var(--bg-elev); border:1px solid var(--line);
  border-radius:10px; font-size:12px; color:var(--text-dim);
}

/* Tabs */
.tabs{
  display:flex; gap:4px;
  padding:4px; margin:4px 18px 16px;
  background:var(--bg-elev); border-radius:12px;
}
.tab{
  flex:1; padding:9px 0; border:none; border-radius:9px;
  background:transparent; color:var(--text-faint);
  font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s, color .15s;
}
.tab.active{background:var(--bg-elev-2); color:var(--text);}

/* Panels */
.panels{flex:1; padding:0 18px 8px; display:flex; flex-direction:column;}
.panel{display:none;}
.panel.active{display:block; animation:fadein .18s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

.card-grid{display:flex; flex-direction:column; gap:10px;}

.idx-card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  display:flex; align-items:center;
  position:relative;
  touch-action:pan-y;
}

/* 가격이 바뀔 때 숫자가 굴러가는 동안(renderCardsWithAnimation) 카드에 짧게
   상승/하락 색을 비춰서 어디가 바뀌었는지 눈에 띄게 함 (토스증권 스타일) */
@keyframes price-flash-up{from{background:var(--up-bg);}to{background:var(--bg-elev);}}
@keyframes price-flash-down{from{background:var(--down-bg);}to{background:var(--bg-elev);}}
.idx-card.price-flash-up{animation:price-flash-up 700ms ease-out;}
.idx-card.price-flash-down{animation:price-flash-down 700ms ease-out;}
.idx-card.has-remove{padding-top:20px;}
.idx-card.card-dragging{
  z-index:5; box-shadow:0 8px 24px rgba(0,0,0,0.4);
  border-color:var(--accent); cursor:grabbing;
}
.drag-handle{
  flex-shrink:0; width:18px; margin-right:2px;
  color:var(--text-faint); font-size:14px; letter-spacing:-2px;
  cursor:grab; touch-action:none; user-select:none;
  display:flex; align-items:center; justify-content:center;
}
.card-remove{
  position:absolute; top:7px; right:7px;
  width:18px; height:18px; border-radius:50%;
  background:var(--bg-elev-2); border:none; color:var(--text-faint);
  font-size:10px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.card-star{
  flex-shrink:0; width:22px; height:22px; margin-right:2px;
  background:transparent; border:none; color:var(--text-faint);
  font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.card-star.starred{color:#ffc94d;}
.card-star:active{transform:scale(0.88);}
.card-alert{
  flex-shrink:0; width:22px; height:22px; margin-right:2px;
  background:transparent; border:none; color:var(--text-faint);
  font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.card-alert.alert-active{color:var(--accent);}
.card-alert:active{transform:scale(0.88);}
.card-alert:disabled{opacity:0.35; cursor:default;}
body.no-select{user-select:none;}
.idx-info{display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0; overflow:hidden;}
.idx-name{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.idx-sub{font-size:11px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.idx-spark{flex:0 0 auto; display:flex; justify-content:center; padding:0 6px; min-width:0;}
.idx-spark:empty{padding:0;}
.idx-spark svg{display:block; width:100%; max-width:76px; height:28px;}
.spark-line{stroke-width:1.6px; vector-effect:non-scaling-stroke;}
.spark-line.up{stroke:var(--up);}
.spark-line.down{stroke:var(--down);}
.spark-line.flat{stroke:var(--text-faint);}
.idx-numbers{flex-shrink:0; margin-left:auto;}
.idx-price{
  font-family:var(--mono);
  font-size:18px; font-weight:700;
  text-align:right;
}
.idx-unit{
  font-family:var(--mono);
  font-size:12px; font-weight:500;
  color:var(--text-dim);
  margin-left:2px;
}
.idx-change{
  font-family:var(--mono);
  font-size:12px; font-weight:600;
  text-align:right;
  padding:2px 7px; border-radius:6px;
  display:inline-block; margin-top:4px;
}
.idx-change.up{color:var(--up); background:var(--up-bg);}
.idx-change.down{color:var(--down); background:var(--down-bg);}
.idx-change.flat{color:var(--text-dim); background:var(--bg-elev-2);}

/* 스켈레톤 로딩 카드 — 서버 응답 기다리는 동안 빈 화면 대신 자리를 채워둠
   (실제 .idx-card 구조를 그대로 재사용해서 위장 모드별 카드 스타일도 자동 적용됨) */
@keyframes skel-shimmer{
  0%{background-position:100% 50%;}
  100%{background-position:0 50%;}
}
.skel-bar{
  display:block; border-radius:6px;
  background:linear-gradient(90deg, var(--bg-elev-2) 25%, var(--line) 37%, var(--bg-elev-2) 63%);
  background-size:400% 100%;
  animation:skel-shimmer 1.4s ease infinite;
}
.skel-card{pointer-events:none;}
.skel-card .drag-handle{visibility:hidden;}
.skel-card .idx-info{gap:6px;}
.skel-card .skel-name{width:60px; height:13px;}
.skel-card .skel-sub{width:42px; height:10px;}
.skel-card .idx-numbers{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.skel-card .skel-price{width:68px; height:16px;}
.skel-card .skel-change{width:50px; height:12px; border-radius:6px;}

.hint{font-size:11px; color:var(--text-faint); margin:12px 2px 0;}

/* Search */
.search-row{display:flex; gap:8px; margin-bottom:12px;}
.search-row input{
  flex:1; background:var(--bg-elev); border:1px solid var(--line);
  color:var(--text); border-radius:10px; padding:11px 13px; font-size:14px;
  outline:none;
}
.search-row input:focus{border-color:var(--accent);}
.btn-primary{
  background:var(--accent); color:#08110d; border:none;
  border-radius:10px; padding:0 16px; font-size:13px; font-weight:700;
  cursor:pointer;
}
.btn-primary:active{transform:scale(0.96);}

.search-results{
  background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:14px;
  max-height:320px; overflow-y:auto; overscroll-behavior:contain;
}
.search-result-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 14px; border-bottom:1px solid var(--line);
  cursor:pointer;
}
.search-result-row:last-child{border-bottom:none;}
.search-result-row:active{background:var(--bg-elev-2);}
.sr-info{display:flex; flex-direction:column; gap:2px; min-width:0; overflow:hidden;}
.sr-name{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sr-code{font-size:11px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sr-quote{flex-shrink:0; text-align:right; font-family:var(--mono);}
.sr-price{display:block; font-size:13px; font-weight:700;}
.sr-change{display:block; font-size:10.5px; font-weight:600; margin-top:2px;}
.sr-change.up{color:var(--up);}
.sr-change.down{color:var(--down);}
.sr-change.flat{color:var(--text-dim);}
.sr-quote-empty{color:var(--text-faint); font-size:12px; font-family:inherit;}

.empty-state{
  text-align:center; color:var(--text-faint); font-size:13px;
  padding:36px 20px; display:none;
}
.empty-state.show{display:block;}

.foot{
  text-align:center; padding:16px 18px 22px;
  font-size:10.5px; color:var(--text-faint);
  margin-top:auto;
}

/* ============================================================
   위장 모드 — 엑셀
   ============================================================ */
/* 2026-09-30: 리본/수식줄/시트탭 등 진짜 앱 전체를 흉내내던 버전에서, 기본 테마의 상단바/
   탭/카드 구조는 그대로 두고 배경·포인트 컬러만 위장 테마별로 입히는 방식으로 되돌림
   (사용자 요청) — 예전엔 "라이트모드랑 구분이 안 된다"는 이유로 반대로 갔던 적이 있는데,
   이번엔 완벽한 위장보다 가벼운 톤 차이로 충분하다는 판단.
   단, 엑셀만 "카카오톡 엑셀테마"를 레퍼런스로 절충안 추가(2026-09-30) — 배경에 시트
   눈금선(행/열)을 깔고, 종목 카드는 그 위에 병합된 행처럼 보이게(각진 모서리 + 왼쪽
   행 번호 거터). 리본/수식줄/시트탭 같은 나머지 가짜 UI는 안 씀. */
:root[data-skin="excel"]{
  --bg:#e9eaeb;
  --bg-elev:#ffffff;
  --bg-elev-2:#f3f2f1;
  --line:#d4d4d4;
  --text:#1b1b1b;
  --text-dim:#484644;
  --text-faint:#7a7a7a;
  --up:#c1272d;       /* 엑셀 셀 안에서도 상승=빨강 관례 유지 */
  --up-bg:rgba(193,39,45,0.1);
  --down:#1461c7;
  --down-bg:rgba(20,97,199,0.1);
  --accent:#217346;   /* 엑셀 그린 */
}

[data-skin="excel"] body{font-family:Calibri,'Segoe UI','Malgun Gothic',sans-serif;}

/* 배경 = 시트 눈금선(행/열), 종목 카드 = 그 위에 병합된 행처럼 보이게. 상단바/탭/카드
   안 콘텐츠(가격·등락 배지·스파크라인 등)는 기본 테마 그대로 둬서 리본 버전보다 훨씬 가벼움 */
/* 눈금선은 .panels만이 아니라 화면 전체(body)에 깔아서 상단바·탭·좌우 바깥 여백까지 시트처럼 채움 */
[data-skin="excel"] body{
  background-color:var(--bg-elev);
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:88px 22px;
}
[data-skin="excel"] .panels{padding-left:26px; position:relative;}
[data-skin="excel"] .card-grid{gap:0; counter-reset:xlrow;}
[data-skin="excel"] .idx-card{
  counter-increment:xlrow;
  border-radius:2px; border-color:var(--line);
}
[data-skin="excel"] .idx-card::before{
  content:counter(xlrow);
  position:absolute; left:-26px; top:0; bottom:0; width:26px;
  background:var(--bg-elev-2); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--text-faint);
}

/* ============================================================
   위장 모드 — 워드
   ============================================================ */
/* 2026-09-30: 엑셀과 같은 방향으로 재설계 — 기본 UI(상단바/탭)는 그대로 두고 배경·
   포인트 컬러만. 워드는 "흰 문서 페이지가 회색 캔버스 위에 떠있는" 모습을 배경 디자인으로,
   종목 카드는 문서에 삽입된 표의 행처럼 보이게 함(엑셀의 "병합된 행"과 같은 결). */
:root[data-skin="word"]{
  --bg:#e8e9eb;
  --bg-elev:#ffffff;
  --bg-elev-2:#f3f2f1;
  --line:#d4d4d4;
  --text:#1b1b1b;
  --text-dim:#484644;
  --text-faint:#7a7a7a;
  --up:#c1272d;
  --up-bg:rgba(193,39,45,0.1);
  --down:#1461c7;
  --down-bg:rgba(20,97,199,0.1);
  --accent:#2b579a;   /* 워드 블루 */
}

[data-skin="word"] body{font-family:Calibri,'Segoe UI','Malgun Gothic',sans-serif;}

/* 배경 = 화면 전체가 흰 문서 페이지(엑셀처럼 바깥 여백 없이 body 전체). 구분이 되도록
   워드의 페이지 여백 안내선(좌우 세로선)을 옅게 깔음 */
[data-skin="word"] body{
  background-color:var(--bg-elev);
  background-image:
    linear-gradient(to right, transparent 17px, var(--line) 17px, var(--line) 18px, transparent 18px),
    linear-gradient(to left, transparent 17px, var(--line) 17px, var(--line) 18px, transparent 18px);
}
/* 종목 카드 = 문서에 삽입된 표(테이블)의 행처럼 — 줄무늬 배경 + 칸 경계선 */
[data-skin="word"] .card-grid{gap:0; border:1px solid var(--line); border-radius:2px; overflow:hidden;}
[data-skin="word"] .idx-card{
  border-radius:0; border:none; border-bottom:1px solid var(--line);
}
[data-skin="word"] .idx-card:last-child{border-bottom:none;}
[data-skin="word"] .idx-card:nth-child(even){background:var(--bg-elev-2);}

/* ============================================================
   위장 모드 — 파워포인트
   ============================================================ */
/* 2026-09-30: 엑셀/워드와 같은 방향으로 재설계 — 기본 UI는 그대로 두고 배경·포인트
   컬러만. PPT는 "흰 슬라이드 한 장이 회색 작업영역 위에" 떠있는 모습을 배경 디자인으로,
   종목 카드는 슬라이드에 올려둔 콘텐츠 박스(플레이스홀더)처럼 보이게 함. */
:root[data-skin="ppt"]{
  --bg:#d6d6d6;
  --bg-elev:#ffffff;
  --bg-elev-2:#eeeeee;
  --line:#c7c7c7;
  --text:#1b1b1b;
  --text-dim:#484644;
  --text-faint:#7a7a7a;
  --up:#c1272d;
  --up-bg:rgba(193,39,45,0.1);
  --down:#1461c7;
  --down-bg:rgba(20,97,199,0.1);
  --accent:#b7472a;   /* 파워포인트 오렌지 */
}

[data-skin="ppt"] body{font-family:Calibri,'Segoe UI','Malgun Gothic',sans-serif;}

/* 배경 = 화면 전체가 흰 슬라이드 한 장(엑셀처럼 바깥 여백 없이 body 전체). 구분이 되도록
   슬라이드 상단에 테마 색 띠를 둠 */
[data-skin="ppt"] body{
  background-color:var(--bg-elev);
  background-image:linear-gradient(var(--accent), var(--accent));
  background-size:100% 6px; background-repeat:no-repeat;
}
/* 종목 카드 = 슬라이드 위 콘텐츠 박스(플레이스홀더)처럼 */
[data-skin="ppt"] .card-grid{gap:8px;}
[data-skin="ppt"] .idx-card{background:var(--bg-elev-2); border:1px solid var(--line);}

/* ============================================================
   위장 모드 — 카카오톡
   ============================================================ */
/* 2026-10-02: 엑셀/워드/PPT와 같은 방향으로 재설계 — 기본 UI(상단바/탭/카드 내용)는
   그대로 두고 배경·포인트 컬러만. 배경은 카카오톡 채팅방 배경색, 종목 카드는 그 위에
   흰 말풍선처럼 보이게 함. */
:root[data-skin="kakao"]{
  --bg:#b2c7da;        /* 카카오톡 채팅창 배경 */
  --bg-elev:#ffffff;
  --bg-elev-2:#a7bed3;
  --line:#9fb6cc;
  --text:#1b1b1b;
  --text-dim:#4a4a4a;
  --text-faint:#6b6b6b;
  --up:#c1272d;
  --up-bg:rgba(193,39,45,0.1);
  --down:#1461c7;
  --down-bg:rgba(20,97,199,0.1);
  --accent:#3c1e1e;    /* 말풍선 위 텍스트용 — 카카오 노랑은 텍스트로 쓰면 잘 안 보여서 진한 브라운 사용 */
}

/* 배경 = 채팅방(파란빛 회색), 종목 카드 = 그 위에 흰 말풍선처럼 */
[data-skin="kakao"] .panels{background:var(--bg); padding:10px 10px 8px;}
[data-skin="kakao"] .search-row input{border-radius:20px;}
[data-skin="kakao"] .btn-primary{
  flex-shrink:0; width:40px; height:40px; padding:0; border-radius:50%;
  background:#fee500; color:#3c1e1e; font-size:0; position:relative;
}
[data-skin="kakao"] .btn-primary::after{
  content:'➤'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:15px; color:#3c1e1e;
}
[data-skin="kakao"] .card-grid{gap:10px;}
[data-skin="kakao"] .idx-card{
  border:none; border-radius:4px 16px 16px 16px;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
  max-width:92%;
}
[data-skin="kakao"] .search-result-row{border-bottom:1px solid var(--line);}

/* ============================================================
   위장 모드 — 아웃룩
   ============================================================ */
/* 2026-10-02: 엑셀/워드/PPT/카카오톡과 같은 방향으로 재설계 — 기본 UI(상단바/탭/카드
   내용)는 그대로 두고 배경·포인트 컬러만. 종목 카드는 메일함의 메일 목록 한 줄처럼
   보이게 함(왼쪽 발신자 아바타 원 + 구분선). */
:root[data-skin="outlook"]{
  --bg:#faf9f8;
  --bg-elev:#ffffff;
  --bg-elev-2:#f3f2f1;
  --line:#e1dfdd;
  --text:#242424;
  --text-dim:#605e5c;
  --text-faint:#8a8886;
  --up:#c1272d;
  --up-bg:rgba(193,39,45,0.1);
  --down:#1461c7;
  --down-bg:rgba(20,97,199,0.1);
  --accent:#0078d4;   /* 아웃룩 블루 */
}

[data-skin="outlook"] body{font-family:'Segoe UI',Calibri,'Malgun Gothic',sans-serif;}

/* 본문 = 메일 목록 — 카드 왼쪽에 발신자 아바타 원, 오른쪽엔 원래처럼 시간/등락 */
[data-skin="outlook"] .panels{background:var(--bg);}
[data-skin="outlook"] .search-row input{border-radius:0;}
[data-skin="outlook"] .btn-primary{border-radius:0; background:var(--accent);}
[data-skin="outlook"] .search-results{border-radius:0;}

[data-skin="outlook"] .card-grid{gap:0; border-top:1px solid var(--line);}
[data-skin="outlook"] .idx-card{
  background:var(--bg-elev); border:none; border-bottom:1px solid var(--line);
  border-radius:0; padding:10px 12px 10px 46px; position:relative;
}
[data-skin="outlook"] .idx-card::before{
  content:''; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:var(--accent); opacity:0.85;
}
[data-skin="outlook"] .idx-change{border-radius:0; padding:1px 4px;}
[data-skin="outlook"] .idx-name{font-weight:600; font-size:13.5px;}

[data-skin="outlook"] .search-result-row{border-bottom:1px solid var(--line);}
[data-skin="outlook"] .sr-info{border-right:1px solid var(--line); padding-right:8px; margin-right:8px;}

/* ============================================================
   위장 모드 — 크롬 브라우저(네이버 뉴스)
   ============================================================ */
/* 2026-10-02: 엑셀/워드/PPT/카카오톡/아웃룩과 같은 방향으로 재설계 — 기본 UI(상단바/탭/
   카드 내용)는 그대로 두고 배경·포인트 컬러만. 배경은 뉴스 페이지(옅은 회색), 종목 카드
   영역은 그 위에 끼워진 흰 "실시간 증시" 위젯 박스처럼 테두리를 둘러서 보이게 함. */
:root[data-skin="chrome"]{
  --bg:#f1f3f4;
  --bg-elev:#ffffff;
  --bg-elev-2:#f8f9fa;
  --line:#dadce0;
  --text:#202124;
  --text-dim:#5f6368;
  --text-faint:#80868b;
  --up:#c1272d;
  --up-bg:rgba(193,39,45,0.08);
  --down:#1461c7;
  --down-bg:rgba(20,97,199,0.08);
  --accent:#03c75a;   /* 네이버 그린 */
}

/* 배경 = 뉴스 페이지(옅은 회색), 종목 카드 영역 = 그 위에 끼워진 흰 위젯 박스 */
[data-skin="chrome"] .panels{
  margin:0 14px 14px; padding:14px; background:var(--bg-elev);
  border:1px solid var(--line); border-radius:10px;
}
[data-skin="chrome"] .card-grid{gap:8px;}
[data-skin="chrome"] .search-result-row{border-bottom:1px solid var(--line);}