/* ───────────────────────────────────────────────────────────
   빛깔
   한국 시장은 빨강이 오름, 파랑이 내림이다. 그 둘은 뜻이 정해진
   색이라 강조색이 거기 끼면 서로 싸운다. 그래서 강조는 보라다.
   오름·내림도 소방차 빨강이 아니라 한 톤 눌렀다 —
   숫자가 소리치면 처음 온 사람이 겁을 먹는다.

   **토스 안에서는 밝은 것만 쓴다.** 토스 앱이 밝아서 어두운 미니앱이
   뜨면 깨져 보인다. 웹·스토어에서는 손님이 고를 수 있다.
   ─────────────────────────────────────────────────────────── */
:root {
  --판1: var(--판); --흐림: var(--글흐림);
  /* ★ 아래 색 토큰들은 새화면/꿈.css 가 뒤에 실려 «덮는다» — 실제로 화면에 쓰이는 값은 그쪽이다.
     여기만 고치면 아무 일도 안 일어난다(2026-09-15 에 그렇게 한 번 헛손질했다). */
  --바탕: #FBFAF9;  --판: #FFFFFF;  --판2: #F4F2F7;
  --글: #1B1721;   --글연함: #6E6878;  --글흐림: #A39DAE;  --줄: #ECE8F0;
  --강조: #6D4AFF; --강조연함: #EFEBFF;
  --오름: #C53E42; --오름연함: #FDEDEE;  --내림: #3E63DD;  --내림연함: #EBF0FE;
  --오름밝음: #FBD3D5; --내림밝음: #D3E0FB;
  --그늘: 0 1px 2px rgba(27,23,33,.04), 0 8px 24px rgba(27,23,33,.06);
  --둥근카드: 28px;  --둥근칸: 18px;  --둥근작은: 12px;  --알약: 999px;
  color-scheme: light;
}
[data-빛="dark"] {
  --바탕: #141219;  --판: #1E1B24;  --판2: #282430;
  --글: #F4F2F7;   --글연함: #A49CB2;  --글흐림: #6C6479;  --줄: #2E2A38;
  --강조: #A187FF; --강조연함: #2A2340;
  --오름: #FF6B70; --오름연함: #37232A;  --내림: #6E92F5;  --내림연함: #1E2740;
  --오름밝음: #63323A; --내림밝음: #2B3D6B;
  --그늘: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}

/* ── 스크롤 바 ──────────────────────────────────────
   전에는 네 군데(판주문속·서랍속·말줄기)만 ::-webkit 으로 칠하고 나머지는 브라우저 기본이라
   한 화면에 바 색이 두 가지였다. 표준 속성으로 통째로 모은다 — 토큰이라 판이 저절로 갈린다.

   **폭은 «색을 칠해 주는 브라우저»에만 준다.** 두 속성이 들어온 때가 다르기 때문이다
   (caniuse 2026-09-15): scrollbar-width 는 크롬121·파폭64·사파리18.2,
   scrollbar-color 는 크롬121·파폭64·사파리26.2 «라고 적혀 있지만 사파리는 실제로 안 칠한다»
   (MDN 자료 저장소 신고 #29315 — 26.3·iOS 18.7.2 에서 회색 그대로. 사장님도 26.6.1 에서 그랬다).

   그래서 사파리에 thin 을 주면 제일 나쁜 쪽으로 간다 — «색 없는 표준 그림꾼»에 갇히고
   옛 그림꾼(::-webkit-scrollbar)까지 버려서, 회색인데 자리만 먹는 상시 바가 된다.
   아무것도 안 주면 사파리는 macOS 겹침 바를 그대로 쓴다: 스크롤할 때만 뜨고 자리를 안 먹는다.
   **사파리에선 둘 중 하나만 고를 수 있다** — 웹킷이 중간을 안 준다.
   칠한 상시 바 쪽은 사장님이 물리셨다(2026-09-15). 그래서 사파리는 겹침 바로 둔다.

   폭을 `*` 에 거는 까닭: scrollbar-width 는 **안 물려 내려간다.** :root 에만 걸었더니
   나머지 칸이 auto 로 남았고, macOS 의 auto 는 OS 가 그리는 겹침 바라 색을 안 받아서
   곁 목록 하나만 색이 들었다. `*` 는 (0,0,0) 이라 숨기려고 none 을 적어 둔 줄들은 그대로 이긴다.
   크롬에서 재 보니 넣기 전후로 바가 먹는 자리가 같았다(0·0·2·2) — 폭이 안 밀린다.
   hanging-punctuation 은 사파리만 안다. not 을 씌우면 크롬·파폭에만 걸린다(실측). */
:root { scrollbar-color: var(--글흐림) transparent; }   /* 색은 물려 내려간다 */
@supports not (hanging-punctuation: first) {
  * { scrollbar-width: thin; }
}

/* NanumSquare Neo © NAVER Corp. 나눔글꼴 라이선스 */
@font-face {
  font-family: "NanumSquare Neo";
  src: url("assets/NanumSquareNeo.woff2") format("woff2-variations"),
       url("assets/NanumSquareNeo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* NanumGothic © NAVER Corp. 나눔글꼴 라이선스 */
@font-face {
  font-family: "NanumSquare Neo";
  src: url("assets/NanumGothic-num-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039, U+002C, U+002E;
}
@font-face {
  font-family: "NanumGothic Num";
  src: url("assets/NanumGothic-num-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquare Neo";
  src: url("assets/NanumGothic-num-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039, U+002C, U+002E;
}
@font-face {
  font-family: "NanumGothic Num";
  src: url("assets/NanumGothic-num-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquare Neo";
  src: url("assets/NanumGothic-num-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039, U+002C, U+002E;
}
@font-face {
  font-family: "NanumGothic Num";
  src: url("assets/NanumGothic-num-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body, #뿌리 { height: 100%; }
body {
  margin: 0; background: var(--바탕); color: var(--글);
  font-family: "NanumSquare Neo", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", system-ui, sans-serif;
  word-spacing: 0.3em;
  -webkit-font-smoothing: antialiased;
  /* 손끝에 딸려 올라가면 몰입이 깨진다 */
  overscroll-behavior: none;
}
.숫자 { font-variant-numeric: tabular-nums; font-family: "NanumGothic Num", "NanumSquare Neo", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* 판 전체 — 폰 크기로 가운데.
   **min-height 가 아니라 height 다.** min-height 로 뒀더니 종목이 백 개일 때
   판이 화면보다 길어지고, 그러면 .속 의 overflow-y 가 아예 안 걸린다.
   몸통이 통째로 스크롤되면서 **탭바가 문서 맨 아래로 밀려서, 끝까지 내려야 보였다.**
   height 로 못 박아야 .속 만 구르고 탭바는 화면 아래에 붙어 있는다. */
.판 {
  max-width: 480px; margin: 0 auto;
  height: 100%; height: 100dvh;   /* dvh 를 모르는 판은 100% 로 */
  background: var(--판); display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
/* min-height:0 이 있어야 flex 자식이 제 내용보다 작아질 수 있다 —
   이게 없으면 flex:1 이어도 안 줄어들어서 여전히 몸통이 구른다. */
/* overflow-x 를 안 적으면 브라우저가 **auto 로 친다**(visible 은 스크롤 값과 못 섞인다).
   그래서 속 어딘가가 1px만 삐져나와도 화면 전체가 좌우로 밀렸다 — 세로만 구르게 못박는다.
   가로로 굴러야 하는 줄(칩줄·매물줄·지수줄)은 제 안에서 따로 구른다. */
.속 { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
html.잠김 .속, html.잠김 .폰자리, html.잠김 .꿈페이지 { overflow: hidden; }

/* 아래 탭. 화면 아래에 붙박이다 — 목록이 아무리 길어도 늘 보인다. */
/* sticky bottom — 껍데기 높이가 뷰포트를 넘는 과도기(판 갈아타기 등)에도 탭바는 바닥에 붙는다 */
.탭바 { flex: none; display: flex; border-top: 1px solid var(--줄); background: var(--판);
        position: sticky; bottom: 0; z-index: 40;
        padding: 9px 4px calc(14px + env(safe-area-inset-bottom, 0px)); }
.탭바 button { flex: 1; display: flex; flex-direction: column; align-items: center;
               gap: 4px; color: var(--글흐림); font-size: calc((11px) * var(--글배, 1)); font-weight: 500; }
.탭바 button.켜짐 { color: var(--강조); font-weight: 600; }
.탭바 svg { width: 22px; height: 22px; }
.탭바 .상표 { display: none; }
/* 첫 거래 뒤 「생겼다」는 점 — 폰에선 아이콘 옆에 */
.탭바 .새점 { position: absolute; top: 6px; right: calc(50% - 14px);
              width: 6px; height: 6px; border-radius: 4px; background: var(--강조); }
.탭바 button { position: relative; }

/* 글씨 */
.큰돈 { font-size: calc((32px) * var(--글배, 1)); font-weight: 700; letter-spacing: -.9px; line-height: 1.12; }
.제목 { font-size: calc((18px) * var(--글배, 1)); font-weight: 700; letter-spacing: -.4px; margin: 0; }
.중간 { font-size: calc((15px) * var(--글배, 1)); font-weight: 600; letter-spacing: -.2px; }
.잔글 { font-size: calc((12px) * var(--글배, 1)); color: var(--글연함); }
.흐린잔글 { font-size: calc((12px) * var(--글배, 1)); color: var(--글흐림); line-height: 1.6; }

.오름 { color: var(--오름); } .내림 { color: var(--내림); }

/* 조각 */
.칸 { background: var(--판2); border-radius: var(--둥근칸); padding: 12px; }
.알약단추 { display: block; width: 100%; text-align: center; background: var(--강조);
            color: var(--강조위글); font-size: calc((15px) * var(--글배, 1)); font-weight: 600; padding: 16px;
            border-radius: var(--알약); }
.알약단추.빨강 { background: var(--오름); }
.알약단추.조용 { background: var(--판2); color: var(--글연함); }
.알약단추[disabled] { opacity: .45; }
/* min-height — 칩줄이 한 줄로 구르게 바뀐 뒤(2026-09-17) 접힘 충돌이 사라져
   손가락.css 가 폰에서 44 로 덮는다. 여기는 데스크톱·기본값. */
.칩 { padding: 8px 12px; border-radius: var(--알약); background: var(--판2);
      color: var(--글연함); font-size: calc((12px) * var(--글배, 1)); font-weight: 500;
      white-space: nowrap; flex: none;
      min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.칩.켜짐 { background: var(--글); color: var(--바탕); }
.칩줄 { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
                mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
.칩줄::-webkit-scrollbar { display: none; }
.칩줄 > * { flex: none; white-space: nowrap; }
.칩줄.매수이유선택 { flex-wrap:wrap; overflow:visible; }
.칩줄.매수이유선택 > * { flex:1 1 calc(50% - 4px); }
/* 정렬 칩 — 업계 관례: 한 줄 고정, 넘치면 가로 스크롤(줄바꿈 금지) */
.한줄칩줄 { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto;
           scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
           -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
                   mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
.한줄칩줄::-webkit-scrollbar { display: none; }
/* 이 줄 안의 것은 «줄어들지 않는다» — 줄어들면 글자가 두 줄로 꺾인다. 좁으면 굴러야 한다. */
.한줄칩줄 > * { flex: none; white-space: nowrap; }

/* 종목 줄 */
.줄 { display: flex; align-items: center; gap: 12px; padding: 12px 4px;
      border-bottom: 1px solid var(--줄); width: 100%; text-align: left; }
.줄:last-child { border-bottom: 0; }
.아이콘 { width: 34px; height: 34px; border-radius: 12px; background: var(--판2);
          flex: none; display: grid; place-items: center; overflow: hidden;
          font-size: calc((13px) * var(--글배, 1)); font-weight: 700; color: var(--글연함); }
.아이콘 img { width: 100%; height: 100%; object-fit: cover; }
.이름칸 { flex: 1; min-width: 0; }
.이름칸 b { display: block; font-size: calc((13px) * var(--글배, 1)); font-weight: 500; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
/* 티커도 이름과 똑같이 말줄임을 받는다.
   전에는 span 이 inline + overflow:visible 이라 이름칸이 좁아지면 **상자 밖으로 그냥 뻗었다.**
   320px 에서 티커가 오른쪽 값칸 글자 위로 5.8px 올라탔다(실측 2026-09-15).
   이름(b)에만 말줄임을 걸어 두면 이름은 지켜지고 티커가 대신 넘친다 — 둘 다 걸어야 한다. */
.이름칸 span { font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림);
               display: block; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.값칸 { text-align: right; flex: none; }
.값칸 b { display: block; font-size: calc((13px) * var(--글배, 1)); font-weight: 600; letter-spacing: -.1px; }
.값칸 span { font-size: calc((11px) * var(--글배, 1)); font-weight: 600; }

/* 320px 급에서는 한 줄에 차례·로고·이름·티커·값·등락·하트가 다 못 산다.
   실측(2026-09-15, 320px): 단추 180px 을 로고 34 + 틈 22 + 값칸 96 이 먼저 가져가고
   이름칸에 28.4px 만 남아 「삼성전자」가 「삼…」이 됐다.
   ★ 한때 **로고를 접어서** 자리를 벌었는데 되돌렸다(사장님 2026-09-15) —
     목록에서 종목을 먼저 알아보는 건 글자가 아니라 그림이다. 곁줄과 같은 판단이다.
   대신 **로고를 줄이고 틈을 좁힌다**: 로고 34→22, 틈 22→8. 이름칸이 28 에서 54 로 는다.
   그래도 「엑스알피(리플)」처럼 긴 이름은 말줄임이 받는다 — 그게 말줄임이 할 일이다.
   크기는 parts/조각.jsx 가 «인라인 style» 로 박아서 !important 가 아니면 못 이긴다. */
@media (max-width: 374px) {
  .줄 .아이콘감 { width: 22px !important; height: 22px !important; flex: none; }
  .줄 .아이콘감 img, .줄 .아이콘 { width: 22px !important; height: 22px !important; }
  .줄 { gap: 8px; padding-inline: 8px; }
  /* 로고 자리를 만들려면 어딘가에서 뺏어야 한다. 실측(320px)으로 큰 것부터 골랐다:
     값칸 101px · 차례번호 18px · 하트 34px.
     — 차례번호는 **접는다.** 목록의 몇 번째인지는 줄 순서가 이미 말한다(26px 회수).
     — 값칸은 글자만 한 눈금 줄인다. 숫자는 여전히 읽힌다(13px 회수). */
  .줄 .차례번호 { display: none; }
  .값칸 b { font-size: calc((12px) * var(--글배, 1)); }
  .값칸 span { font-size: calc((11px) * var(--글배, 1)); }
}

/* 데스크톱 곁줄(230px 붙박이) — 줄이 좁아 이름이 잘린다.
   실측(2026-09-15, 1440px): 줄 196px 을 로고 32 + 틈 20 + 값 68.5 + 하트 36 이 먼저 가져가
   이름칸에 35.5px 만 남았다.
   ★ 한때 **로고를 통째로 숨겨서** 자리를 벌었는데 되돌렸다(사장님 2026-09-15).
     로고는 장식이 아니다 — 목록에서 종목을 먼저 알아보는 건 글자가 아니라 그림이다.
   대신 **로고를 줄이고 틈을 좁혀** 자리를 만든다: 32→22, 틈 20→8 이면 이름칸이 22px 늘어난다.
   긴 이름은 말줄임이 받는다(그게 말줄임이 할 일이다).
   꿈.css 쪽 규칙보다 뒤에 오지 못하니(빛깔 → 꿈 차례로 잇는다) **더 좁혀서** 이긴다.
   ★ 크기는 parts/조각.jsx 가 «인라인 style» 로 박는다 — 보통의 CSS 로는 못 이겨서
     여기서만 !important 를 쓴다. 곁줄 한 자리에만 걸린다. */
.꿈탐색 .꿈종목 .아이콘감 { width: 22px !important; height: 22px !important; flex: none; }
.꿈탐색 .꿈종목 .아이콘감 img, .꿈탐색 .꿈종목 .아이콘 { width: 22px !important; height: 22px !important; }
.꿈탐색 .꿈종목 { gap: 4px; }

/* ── 닿는 자리 넓히기 ──────────────────────────────────
   글자 높이만큼만 한 단추들이 있다 — 실측으로 17~26px. 손가락은 그보다 굵다.
   ::after 로 «안 보이는 덧자리»를 씌운다. 자리를 안 차지하니 둘레 간격이 안 흐트러지고,
   보이는 모양은 한 픽셀도 안 바뀐다.
   **가로로는 안 늘린다** — 나란히 선 단추끼리 서로의 손가락을 훔친다(데스크 풋의 세 단추가 그렇다). */
.꿈자산보기, .꿈커뮤니티안내 button, .꿈데스크풋 button,
.꿈시장 button, .꿈제목 button, .더보기점, .넓게받기,
.작업메타 button { position: relative; }
.꿈자산보기::after, .꿈커뮤니티안내 button::after, .꿈데스크풋 button::after,
.꿈시장 button::after, .꿈제목 button::after, .넓게받기::after,
.작업메타 button::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
/* 채팅 신고·차단(31x18)은 «일부러 안 넓혔다». 말줄이 4px 간격으로 쌓여 있어
   44px 덧자리를 씌우면 윗줄·아랫줄 단추의 손가락을 서로 훔친다(실기: 4건이 그랬다).
   좁은 채로 두는 게 엉뚱한 사람을 신고하는 것보다 낫다. */
/* 「⋯」는 둘레에 다른 단추가 없다 — 가로로도 넓힌다(24x24 → 44x44). */
.더보기점::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%); }

/* 알림 종 — 꿈.css 의 `.작업알림단추`(0,1,0)보다 좁혀야 이긴다(빛깔이 먼저 실린다). */
button.작업알림단추 { min-height: 44px; }

/* 풋에 칸이 넷이 됐다(고객센터). 좁은 폰에서 한 줄에 안 들어가면 접히게 둔다 —
   꿈.css 의 `.꿈풋` 은 flex-wrap 을 안 정하므로 여기서 더해도 안 부딪힌다. */
.꿈풋 { flex-wrap: wrap; row-gap: 4px; }

/* ── 순위 줄 ───────────────────────────────────────────────
   칸은 늘 일곱이다(등수·변동·이름·딱지·수익·평가·변화). 화면 폭에 따라
   포개거나 펴기만 한다 — 칸이 있다 없다 하면 표에서 줄이 서로 안 맞는다.

   폰: 예전 모양 그대로 — 등수 밑에 변동, 이름 밑에 딱지, 오른쪽에 수익·변화.
       평가액은 «처음 → 지금» 안에 이미 있으니 따로 안 보인다. */
.순위줄 { display: grid; width: 100%; text-align: left; align-items: center;
          column-gap: 12px; row-gap: 4px; padding: 12px 0;
          border-bottom: 1px solid var(--줄);
          grid-template-columns: auto minmax(0, 1fr) auto;
          grid-template-areas: "등수 이름 수익"
                               "변동 딱지 변화"; }
.순위줄.나 { padding: 12px 8px; background: var(--강조연함); border-radius: var(--둥근작은); }
.ㄴ등수 { grid-area: 등수; min-width: 34px; text-align: center; color: var(--글흐림); }
.ㄴ변동 { grid-area: 변동; text-align: center; }
.ㄴ이름 { grid-area: 이름; display:flex; align-items:center; gap:4px; font-size: calc((13px) * var(--글배, 1)); font-weight:500; min-width:0; overflow:hidden; }
.ㄴ이름 > .꿈얼굴 { flex:none; }
.순위닉네임 { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ㄴ딱지 { grid-area: 딱지; display: flex; gap: 4px; flex-wrap: wrap; }
.ㄴ수익 { grid-area: 수익; text-align: right; }
.ㄴ수익, .ㄴ평가 { font-size: calc((15px) * var(--글배, 1)); }
.ㄴ평가 { grid-area: 평가; display: none; }
.ㄴ변화 { grid-area: 변화; text-align: right; }
.순위줄 .ㄴ등수 :where(img, svg) { display: block; margin: 0 auto; }

/* 좁은 폭: «처음 → 지금» 이 수익과 같은 열에 있으면 열 너비가 긴 쪽을 따라
   이름이 반만 남는다(실측 320px ~53%). 변화는 이름 열로 내려 수익 열을 짧게 둔다. */
@media (max-width: 600px) {
  .순위줄 {
    column-gap: 8px;
    grid-template-columns: 56px minmax(0, 1fr) max-content;
    grid-template-areas:
      "등수 이름 수익"
      "변동 변화 .";
  }
  .ㄴ딱지 { display: none; }
  .ㄴ수익, .ㄴ평가 { font-size: calc((13px) * var(--글배, 1)); }
  .ㄴ변화 { text-align: left; font-size: calc((11px) * var(--글배, 1)); }
  .ㄴ이름 .칭호딱지 { display: none; }
}

/* 중간 데스크톱(1100~1599): 한 갈래를 «표»로 편다.
   포개 두었던 변동·딱지·평가가 각자 칸을 갖는다 — 새 자료 없이 폭이 내용으로 찬다. */
@media (min-width: 1100px) and (max-width: 1599px) {
  .순위줄 { grid-template-columns: 52px 46px minmax(120px, 1fr) minmax(0, auto) 104px 104px 172px;
            grid-template-areas: "등수 변동 이름 딱지 수익 평가 변화";
            column-gap: 12px; row-gap: 0; }
  .ㄴ평가 { display: block; text-align: right; font-weight: 600; }
  .ㄴ딱지 { flex-wrap: nowrap; }
}

/* 넓은 데스크톱(1600px~): 두 갈래가 나란히 선다.
   줄은 폰과 같은 «이름 왼쪽 · 값 오른쪽»으로 두고, 딱지·평가는 접는다. */
@media (min-width: 1600px) {
  /* 둘로 가를지도 창이 아니라 자리가 정한다 — 커뮤니티 안에서는 1600px 창에도
     두 칸이 287px 씩이라 이름이 죄 잘렸다(운영 실측 2026-09-17). 420px 씩 못 나오면 한 줄로 선다. */
  .순위나란히 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
                gap: 24px; margin-top: 12px; align-items: start; }
  .순위칸이름 { font-size: calc((13px) * var(--글배, 1)); font-weight: 700; margin: 0 0 4px;
                padding-bottom: 8px; border-bottom: 2px solid var(--강조); }
  /* 칸이 얼마나 넓은지는 창이 아니라 «칸»이 안다 — 커뮤니티 안에서는 같은 1600px 도 417px 칸이다.
     칸을 컨테이너로 세우고, 넓을 때만 칸을 더 편다(꿈.css @container). */
  .순위칸 { container-type: inline-size; }
  .순위나란히 .ㄴ딱지, .순위나란히 .ㄴ평가, .순위나란히 .ㄴ변화 { display: none; }
}

/* ── 기록 카드 ─────────────────────────────────────────────
   전에는 머리가 「005930 ›」 한 줄이 전부였다. 손님은 «삼성전자»를 샀는데
   기록엔 숫자만 남았다(사장님 지적 2026-09-15). 목록 줄과 같은 차림으로 세운다 —
   로고 · 이름(굵게) · 코드(아래 잔글). 눈이 이미 아는 모양이라 새로 배울 게 없다.
   ※ 이름은 서버가 내려 줘야 뜬다. /history·/orders 에 종목 표를 이어 붙였고,
      그 판이 올라가기 전까지는 코드가 이름 자리에 대신 선다. */
.꿈기록머리 { align-items: center; gap: 12px; }
/* 꿈.css 의 좁은 화면 규칙 `.꿈제목>span{display:none}` 이 이 딱지까지 지웠다 —
   그 규칙은 카드 부제를 감추려던 것인데, 매수·매도 표시도 같은 자리(꿈제목의 자식 span)에 선다.
   폰에서 「샀나 팔았나」가 통째로 사라졌다(실측 2026-09-15: display:none, 0x0).
   (0,2,0) 으로 좁혀 되살린다 — 그쪽 (0,1,1) 보다 세다. */
.꿈기록머리 > .딱지 { display: inline-flex; }
.꿈기록종목 { display: flex; align-items: center; gap: 12px;
              flex: 1; min-width: 0; text-align: left; padding: 0; }
.꿈기록이름 { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.꿈기록이름 b { display: block; font-size: calc((15px) * var(--글배, 1)); font-weight: 700; letter-spacing: -.3px;
                color: var(--글); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.꿈기록이름 small { display: block; font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 거래금액은 이 카드의 결론이다. 다른 줄과 같은 무게로 두면 눈이 어디 설지 모른다 —
   선 하나로 끊고 숫자를 키운다. */
.꿈기록카드 .꿈기록합계 { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--줄); }
.꿈기록카드 .꿈기록합계 dt { color: var(--글연함); font-weight: 600; }
.꿈기록카드 .꿈기록합계 dd { font-size: calc((18px) * var(--글배, 1)); font-weight: 800; letter-spacing: -.4px; }

.기다림 { padding: 40px; text-align: center; color: var(--글흐림); font-size: calc((13px) * var(--글배, 1));
  /* 0.4초 안에 뜨는 판에서는 「여는 중…」이 아예 안 보이게 — 움직임이 아니라 «늦게 보이기»라 reduced-motion 과 무관 */
  opacity: 0; animation: 기다림보이기 .01s linear .4s forwards; }
@keyframes 기다림보이기 { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .기다림 { opacity: 1; } }

/* ── 경쟁사 화면을 다시 보고 채운 것들 ────────────────────── */

/* 딱지 — 거래정지·유의·1등·고수. 뜻이 다르면 색도 달라야 한다 */
.딱지 { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px;
        border-radius: var(--알약); font-size: calc((11px) * var(--글배, 1)); font-weight: 600;
        background: var(--판2); color: var(--글연함); white-space: nowrap; }
.딱지.막힘 { background: var(--오름연함); color: var(--오름); }
.딱지.조심 { background: #FFF4E5; color: #B26A00; }
.딱지.금 { background: #FFF6DA; color: #9A6B00; }
.딱지.강조 { background: var(--강조연함); color: var(--강조); }
/* 샀나 팔았나는 기록에서 가장 먼저 읽히는 것이다 — 색으로 먼저 말한다. */
.딱지.샀음 { background: var(--오름연함); color: var(--오름); }
.딱지.팔았음 { background: var(--내림연함); color: var(--내림); }
[data-빛="dark"] .딱지.조심 { background: #33270F; color: #E8A33D; }
[data-빛="dark"] .딱지.금 { background: #332B10; color: #E5C15A; }
.딱지줄 { display: flex; gap: 4px; flex-wrap: wrap; }

/* 검색창 */
.찾는칸 { display: flex; align-items: center; gap: 8px; background: var(--판2);
          border-radius: var(--알약); padding: 12px 16px; width: 100%; }
.찾는칸 svg { width: 17px; height: 17px; color: var(--글흐림); flex: none; }
.찾는칸 input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; outline: none;
                font-size: calc((13px) * var(--글배, 1)); }
.찾는칸 input::placeholder { color: var(--글흐림); }
/* 검색칸 안에 «네모»가 겹쳐 뜨던 것 ─────────────────────────────
   위 `.찾는칸 input` 은 이미 outline:none 을 적어 뒀는데, 꿈.css 12줄의
   `input:focus-visible{outline:3px solid}` 이 그걸 덮고 있었다(같은 구체성인데 뒤에 실린다).
   그래서 알약 모양 칸 안에 각진 네모가 한 겹 더 그려졌다(사장님 지적 2026-09-15).
   클래스를 하나 더 얹어 되돌린다.
   **지우기만 하면 안 된다** — 키보드만 쓰는 사람은 초점이 어디 있는지 볼 길이 없어진다.
   대신 «감싼 칸»이 부드럽게 알린다. box-shadow 라 알약 둘레를 그대로 따라간다. */
.찾는칸 input:focus-visible,
.윗찾기 input:focus-visible { outline: none; }
/* 고리 색은 «강조»다. 처음에 강조연함으로 뒀더니 어두운판에서 대비가 1.60 이라
   사실상 안 보였다(WCAG 는 글이 아닌 표시에 3.0 을 요구한다. 강조는 9.82 — 실측 2026-09-15).
   초점 표시를 없애는 게 아니라 «네모를 알약으로 바꾸는» 것이 이 손질의 뜻이다. */
.찾는칸:focus-within { box-shadow: 0 0 0 2px var(--강조); }
/* 윗줄 검색도 각진 outline 대신 같은 고리로 — 둘레가 알약인데 네모가 둘러 있었다 */
.윗찾기:focus-within { outline: none; box-shadow: 0 0 0 2px var(--강조); }

/* 여러 건을 묶은 매매 줄에 붙는 딱지 — 「평균가」라는 사실을 눈에 먼저 알린다 */
.딱지.묶음 { background: var(--강조연함); color: var(--강조); font-weight: 700;
             margin-right: 4px; padding: 4px 4px; font-size: calc((11px) * var(--글배, 1)); }
.온도머리 { display: block; width: 100%; text-align: left; margin-bottom: 12px; }

/* 하트 */
.하트 { flex: none; width: 34px; height: 34px; display: grid; place-items: center;
        color: var(--줄); }
.하트.담김 { color: var(--오름); }
.하트 svg { width: 20px; height: 20px; }

/* 목록 순위 번호 */
.차례번호 { flex: none; width: 24px; text-align: center; font-size: calc((13px) * var(--글배, 1));
            font-weight: 700; color: var(--글흐림); font-variant-numeric: tabular-nums; }
.차례번호.위 { color: var(--강조); }

/* 사고파는 온도 띠 */
.온도띠 { display: flex; height: 9px; border-radius: var(--알약); overflow: hidden;
          background: var(--판2); }
.온도띠 i { display: block; height: 100%; }
.온도띠 i.삼 { background: var(--오름); }
.온도띠 i.팜 { background: var(--내림); }

/* 가로로 미는 카드줄 */
.밀줄 { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
        scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.밀줄::-webkit-scrollbar { display: none; }
/* 저쪽처럼 셋이 한 화면에 딱 들어오게. 넷째가 살짝 보여 밀 수 있다는 걸 알린다 */
.밀줄 > * { flex: none; width: 30.5%; }

/* 매매 카드 */
.매매칸 { background: var(--판2); border-radius: var(--둥근칸); padding: 12px;
          margin-bottom: 8px; }
.매매머리 { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.매매머리 b { font-size: calc((13px) * var(--글배, 1)); font-weight: 600; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.쫓기단추 { font-size: calc((11px) * var(--글배, 1)); font-weight: 600; color: var(--강조);
            padding: 4px 8px; border-radius: var(--알약); background: var(--강조연함); }
.쫓기단추.이미 { color: var(--글흐림); background: transparent; }
.실현줄 { margin-top: 8px; padding: 8px 12px; border-radius: var(--둥근작은);
          display: flex; justify-content: space-between; align-items: center;
          font-size: calc((12px) * var(--글배, 1)); font-weight: 600; }
.실현줄.벌음 { background: var(--오름연함); color: var(--오름); }
.실현줄.잃음 { background: var(--내림연함); color: var(--내림); }

/* 순위 변동 화살표 */
.변동 { font-size: calc((11px) * var(--글배, 1)); font-weight: 600; color: var(--글흐림); }
.변동.올 { color: var(--오름); } .변동.내 { color: var(--내림); }

/* 두 갈래 고르개 (전체 / 종목별 / 팔로우) */
.고르개 { display: flex; background: var(--판2); border-radius: var(--알약); padding: 4px;
          overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.고르개::-webkit-scrollbar { display: none; }
.고르개 button { flex: 1 0 auto; white-space: nowrap; padding: 8px 4px; border-radius: var(--알약);
                 font-size: calc((13px) * var(--글배, 1)); font-weight: 600; color: var(--글연함); }
.고르개 button.켜짐 { background: var(--판); color: var(--글); box-shadow: var(--그늘); }

/* 값·이름 두 줄짜리 표 (PER·52주 …) */
.낱표 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--줄);
        border-radius: var(--둥근칸); overflow: hidden; }
.낱표 > div { background: var(--판); padding: 12px 12px; }
.낱표 dt { font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); margin: 0; }
.낱표 dd { font-size: calc((13px) * var(--글배, 1)); font-weight: 600; margin: 4px 0 0;
           font-variant-numeric: tabular-nums; }

/* 글상자 */
.글상자 { width: 100%; border: 1px solid var(--줄); background: var(--판);
          border-radius: var(--둥근칸); padding: 12px; font-size: calc((13px) * var(--글배, 1));
          resize: none; outline: none; line-height: 1.55; }
.글상자:focus { border-color: var(--강조); }

/* 차트 범례 — ★★ 리뷰가 「막대의 의미가 뭔지 표시해주면」이라 했다 */
.범례 { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.범례 span { display: inline-flex; align-items: center; gap: 4px;
             font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); }
.범례 i { width: 9px; height: 9px; border-radius: 4px; display: block; }

/* 접었다 폈다 */
.접개 { display: flex; align-items: center; gap: 4px; font-size: calc((13px) * var(--글배, 1));
        font-weight: 600; color: var(--글연함); }
.접개 svg { width: 15px; height: 15px; transition: transform .18s; }
.접개.폄 svg { transform: rotate(180deg); }

/* 자잘한 것 */
.빈말 { padding: 48px 16px; text-align: center; color: var(--글흐림);
        font-size: calc((13px) * var(--글배, 1)); line-height: 1.7; }
.머리줄 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.머리줄 .제목 { flex: 1; min-width: 0; }
.머리줄 .찾는칸 { flex: 1 1 0; min-width: 0; width: auto; }
.동그란단추 { width: 36px; height: 36px; border-radius: var(--알약); flex: none;
              display: grid; place-items: center; color: var(--글연함); }
.동그란단추:active { background: var(--판2); }
.동그란단추 svg { width: 20px; height: 20px; }

/* ── 숫자판 ───────────────────────────────────────────────
   돈을 치는 자리는 폰 기본 키보드로 두면 안 된다. 화면 절반이 가려져서
   값을 친 다음 버튼을 누르러 키보드를 내려야 한다. 한 단계가 늘어난다. */
.가림막 { position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 44;
          animation: 스밈 .16s ease-out; }
.숫자판 { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
          width: 100%; max-width: 480px; z-index: 45;
          background: var(--판); border-radius: 24px 24px 0 0;
          box-shadow: 0 -8px 32px rgba(0,0,0,.14);
          padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
          animation: 올라옴 .2s cubic-bezier(.2,.8,.3,1); }
.숫자판밑글 { text-align: center; font-size: calc((12px) * var(--글배, 1)); color: var(--글연함);
              padding: 4px 4px 8px; }
.숫자판알 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.숫자판알 button { height: 52px; border-radius: 16px; font-size: calc((18px) * var(--글배, 1)); font-weight: 600;
                   display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.숫자판알 button:active { background: var(--판2); }
.숫자판알 svg { width: 24px; height: 24px; }
@keyframes 올라옴 { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@keyframes 스밈 { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .숫자판, .가림막 { animation: none; }
}

/* 값 치는 큰 칸 */
.칠칸 { width: 100%; text-align: center; padding: 24px 0 4px; }
.칠칸 b { display: block; font-size: calc((32px) * var(--글배, 1)); font-weight: 700; letter-spacing: -1px;
          line-height: 1.15; font-variant-numeric: tabular-nums; }
.칠칸 b.빔 { color: var(--글흐림); opacity: .45; }   /* 0 이 유효한 값처럼 보이면 안 된다(실기 #14) */
.칠칸 .깜박 { display: inline-block; width: 2px; height: 30px; background: var(--강조);
              vertical-align: -5px; margin-left: 4px; animation: 깜박임 1s steps(2) infinite; }
@keyframes 깜박임 { 50% { opacity: 0; } }

/* 값 올리고 내리는 칸 (− 259,500 +) */
.틱칸 { display: flex; align-items: center; gap: 0; border: 1px solid var(--줄);
        border-radius: var(--둥근칸); background: var(--판); overflow: hidden; }
.틱칸 button { width: 48px; height: 50px; display: grid; place-items: center;
               font-size: calc((18px) * var(--글배, 1)); color: var(--글연함); flex: none; }
.틱칸 button:active { background: var(--판2); }
.틱칸 .속 { flex: 1; min-width: 0; text-align: center; padding: 0 4px; }
.틱칸 .속 b { display: block; font-size: calc((18px) * var(--글배, 1)); font-weight: 700;
              font-variant-numeric: tabular-nums; }
.틱칸 .속 span { font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); }

/* 수수료 같은 잔셈 줄 */
.셈줄 { display: flex; justify-content: space-between; padding: 4px 0; font-size: calc((12px) * var(--글배, 1)); }
.셈줄 span:first-child { color: var(--글연함); }
.셈줄 span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; }
.셈줄.막 { border-top: 1px solid var(--줄); margin-top: 4px; padding-top: 8px;
           font-size: calc((13px) * var(--글배, 1)); font-weight: 600; }

/* 체결 테이프 */
.테이프 { font-size: calc((12px) * var(--글배, 1)); }
.테이프 .줄칸 { display: flex; padding: 4px 4px; border-bottom: 1px solid var(--줄); }
.테이프 .줄칸 > * { font-variant-numeric: tabular-nums; }
.테이프 .때 { width: 62px; color: var(--글흐림); flex: none; }
.테이프 .값 { flex: 1; text-align: right; font-weight: 600; }
.테이프 .양 { width: 92px; text-align: right; color: var(--글연함); }

.아이콘감 { position: relative; flex: none; }

/* 실시간으로 값이 들어오고 있다는 표시. 켜져 있다고 말하는 대신 숨을 쉰다. */
.숨쉼 { width: 7px; height: 7px; border-radius: 999px; background: var(--오름);
        flex: none; animation: 숨 1.6s ease-in-out infinite; }
@keyframes 숨 { 0%,100% { opacity: 1; transform: scale(1); }
                50% { opacity: .35; transform: scale(.78); } }
@media (prefers-reduced-motion: reduce) { .숨쉼 { animation: none; } }

.광고자리 { --광고곁: 10px; margin: 16px calc(var(--광고곁) * -1); }
.광고자리.광고자리 { margin-left: calc(var(--광고곁) * -1); margin-right: calc(var(--광고곁) * -1); }
.광고자리.목록 { height: 96px; }
.꿈자산페이지 > .광고자리 { margin-top: 0; margin-bottom: 0; }

/* 값이 바뀌면 깜박.
   숫자만 소리 없이 갈리면 사람은 못 알아챈다 — 실제 증권 앱이 전부 이걸 한다.
   테두리만 잠깐 물들이고 글자색은 안 건드린다(오름·내림 뜻과 싸우면 안 된다). */
.깜박올, .깜박내 {
  display: inline-block; border-radius: 4px;
  animation: 깜박칠 .78s cubic-bezier(.16,.84,.34,1);
}
@keyframes 깜박칠 {
  0%   { box-shadow: 0 0 0 4px var(--깜박색); background: var(--깜박색); transform: translateY(var(--깜박밀기)); }
  30%  { box-shadow: 0 0 0 4px var(--깜박색); background: var(--깜박색); transform: translateY(0); }
  100% { box-shadow: 0 0 0 4px transparent; background: transparent; transform: translateY(0); }
}
.깜박올 { --깜박색: var(--오름밝음); --깜박밀기: .34em; }
.깜박내 { --깜박색: var(--내림밝음); --깜박밀기: -.34em; }
@media (prefers-reduced-motion: reduce) {
  .깜박올, .깜박내 { animation: 깜박순하게 .6s ease-out; }
  @keyframes 깜박순하게 {
    0%   { background: var(--깜박색); }
    100% { background: transparent; }
  }
}

/* ── 큰 화면 ───────────────────────────────────────────────
   지금은 폰 배치 한 벌이다. 넓은 화면에서 480px 기둥 하나가 흰 바탕에 떠 있으면
   「덜 만든 것」으로 보이므로, 바깥에 바탕을 깔고 기둥에 테두리를 줘서
   **폰 화면을 띄워 둔 것**으로 읽히게 한다.

   ★ 제대로 된 데스크톱(고정폭 1140~1200px · 차트와 랭킹만 패널로 펼침)은 아직이다.
     모바일 배치를 그냥 늘리면 여백만 커지고 정보가 흩어진다(NN/g 가 말하는 content
     dispersion). 늘리는 것과 다시 짜는 것은 다른 일이라, 어설프게 늘리지 않는다. */
@media (min-width: 900px) {
  body { background: var(--바탕); }
  .판 {
    max-width: 520px;
    height: calc(100dvh - 40px); margin: 16px auto;
    border: 1px solid var(--줄); border-radius: 24px; overflow: hidden;
    box-shadow: var(--그늘);
  }
  /* 숫자판·가림막도 기둥 안에 머물게 */
  .숫자판 { max-width: 520px; border-radius: 24px 24px 24px 24px; }
}

/* ── 아래에서 올라오는 시트 ─────────────────────────────────
   저쪽 랭킹은 이름을 누르면 그 사람 매매가 시트로 뜬다. 화면을 옮기지 않으니
   여럿을 빠르게 훑을 수 있다 — 랭킹처럼 「비교하며 보는」 화면에 맞는 꼴이다. */
.시트 { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
        width: 100%; max-width: 480px; z-index: 45; max-height: 82dvh;
        background: var(--판); border-radius: 24px 24px 0 0;
        box-shadow: 0 -8px 32px rgba(0,0,0,.16);
        display: flex; flex-direction: column;
        animation: 올라옴 .2s cubic-bezier(.2,.8,.3,1); }
@media (min-width: 900px) { .시트 { max-width: 520px; bottom: 20px; border-radius: 24px; } }
.시트 .손잡이 { width: 36px; height: 4px; border-radius: 999px; background: var(--줄);
                margin: 8px auto 4px; flex: none; }
.시트 .속살 { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 4px; }
.시트 .바닥 { flex: none; display: flex; gap: 8px; padding: 12px 20px
              calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--줄); }

/* 자산 추이 — 막대(갈래별) + 선(합계) + 원금 점선 */
.추이 { width: 100%; }
.추이 .범례 { margin-top: 8px; }

/* 레버리지·인버스 아이콘.
   이름이 비슷한데 움직임이 정반대인 상품이라, 로고 대신 배수를 박는다.
   KODEX 200 과 KODEX 200선물인버스2X 를 아이콘만 보고 가릴 수 있어야 한다. */
.아이콘.지렛대 { background: var(--오름); color: #fff; font-weight: 800;
                 letter-spacing: -.4px; }
.아이콘.지렛대.거꾸로 { background: var(--내림); }

/* 오늘의 시장 — 한 자리에서 돌아간다.
   가로로 미는 줄로 뒀더니 첫 화면에 두세 개만 보이고 나머지는 묻혔다. */
.시장줄 { display: flex; align-items: center; gap: 8px; width: 100%;
          padding: 8px 12px; border-radius: var(--알약); background: var(--판2);
          font-size: calc((13px) * var(--글배, 1)); }
.시장줄 .이름 { color: var(--글연함); flex: none; }
.시장줄 b { font-size: calc((13px) * var(--글배, 1)); font-weight: 700; letter-spacing: -.2px;
            animation: 지수바뀜 .32s ease-out; }
.시장줄 .점들 { display: flex; gap: 4px; margin-left: auto; flex: none; }
.시장줄 .점들 i { width: 4px; height: 4px; border-radius: 999px; background: var(--줄); }
.시장줄 .점들 i.켜짐 { background: var(--글연함); }
@keyframes 지수바뀜 { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .시장줄 b { animation: none; } }

/* 글쓴이 수익률 뱃지.
   이 숫자는 서버가 성적 표에서 꺼내 박은 것이라 꾸밀 수가 없다 —
   확인 표시를 같이 달아야 「남의 앱 캡처」와 구별된다. */
.수익뱃지 { display: inline-flex; align-items: center; gap: 4px;
            font-size: calc((11px) * var(--글배, 1)); font-weight: 700; padding: 4px 8px 4px 4px;
            border-radius: var(--알약); }
.수익뱃지 svg { width: 11px; height: 11px; flex: none; }


/* ── 도움말 펼침 ── */
.펼침 { border-bottom: 1px solid var(--줄); }
.펼침 summary { list-style: none; cursor: pointer; padding: 12px 4px; font-size: calc((15px) * var(--글배, 1));
                font-weight: 600; display: flex; align-items: center; }
.펼침 summary::-webkit-details-marker { display: none; }
.펼침 summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
                       border-right: 2px solid var(--글흐림); border-bottom: 2px solid var(--글흐림);
                       transform: rotate(45deg); transition: transform .18s; }
.펼침[open] summary::after { transform: rotate(225deg); }
.펼침 p { margin: 0; padding: 0 4px 12px; font-size: calc((13px) * var(--글배, 1)); line-height: 1.7;
          color: var(--글연함); white-space: pre-line; }

/* ── 움직임 — 장식이 아니라 뜻이 있는 것만 ─────────────────────
   화면 전환·눌림·선 그리기·하트. 전부 300ms 아래, transform·opacity 만 쓴다. */
.속 { animation: 스르륵 .16s ease-out; }
@keyframes 스르륵 { from { opacity: .35; transform: translateY(5px); } }   /* 0 이면 무거운 화면에서 빈 프레임이 샌다(실기 #26) */

/* 누르면 눌린 티가 난다 */
.칩:active, .알약단추:active, .동그란단추:active, .하트:active, .탭바 button:active,
.고르개 button:active { transform: scale(.96); }
.칩, .알약단추, .동그란단추, .하트, .탭바 button, .고르개 button { transition: transform .09s ease; }
.줄:active { background: var(--판2); }
.줄 { transition: background .12s ease; border-radius: 12px; }
.줄, .꿈종목 { content-visibility: auto; contain-intrinsic-size: auto 56px; }

/* 차트 선이 왼쪽부터 그려진다 */
.선그림 { stroke-dasharray: 1; stroke-dashoffset: 0; animation: 선긋기 .55s ease-out; }
@keyframes 선긋기 { from { stroke-dashoffset: 1; } }

/* 관심에 담는 순간 하트가 콩 뛴다 — 담을 때 한 번뿐 */
.하트.담김 svg { animation: 하트콩 .32s cubic-bezier(.2, 1.9, .4, 1); }
@keyframes 하트콩 { 0% { transform: scale(.6); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .속, .선그림, .하트.담김 svg { animation: none; }
  .칩:active, .알약단추:active, .동그란단추:active, .하트:active, .탭바 button:active,
  .고르개 button:active { transform: none; }
}

/* 글쓰기 — 흐름 안에 떠서 따라온다 */
.둥둥단추 { position: sticky; bottom: 18px; margin: 16px 0 4px auto; display: block;
            padding: 12px 16px; border-radius: 999px; background: var(--강조); color: var(--강조위글);
            font-size: calc((13px) * var(--글배, 1)); font-weight: 700; box-shadow: 0 6px 18px rgba(109,74,255,.35); }
.둥둥단추:active { transform: scale(.96); }

/* 종목 화면 붙박이 매매 바 — 어디까지 내려도 손 닿는 곳에 */
.매매바 { position: sticky; bottom: -20px; display: flex; gap: 8px;
          margin: 12px -16px -16px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
          background: linear-gradient(to top, var(--판) 78%, transparent);
          z-index: 5; }
@media (max-width: 1099px) {
  .매매바 {
    bottom: 0;
    margin: 16px -16px 0;
    padding: 12px 20px 12px;
  }
  .속.꿈페이지:has(.매매바), .속:has(.매매바) { padding-bottom: 0; }
}
@media (min-width: 1100px) { .매매바 { margin: 12px -24px -24px; padding: 12px 24px 16px; bottom: 0; border-radius: 0 0 24px 24px; } }

/* 정보 표가 홀수로 끝나면 마지막 칸을 넓혀 빈 회색 상자를 없앤다 */
.낱표 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 스켈레톤 — 틀이 먼저 온다 */
.뼛조각 { border-radius: 16px; background: var(--판2);
          background-image: linear-gradient(100deg, transparent 30%, var(--줄) 50%, transparent 70%);
          background-size: 220% 100%; animation: 뼛빛 1.15s ease-in-out infinite; }
@keyframes 뼛빛 { from { background-position: 130% 0; } to { background-position: -70% 0; } }
@media (prefers-reduced-motion: reduce) { .뼛조각 { animation: none; } }

/* 시장줄 점 — 켜진 점을 강조색·알약으로, 「넘겨 볼 수 있다」가 읽히게 */
.시장줄 .점들 i { transition: background .25s, transform .25s; }
.시장줄 .점들 i.켜짐 { width: 13px; border-radius: 4px; background: var(--강조); }

/* ── 바닥시트 — 부동산 매물·팔기. 모바일은 아래에서, 넓은 판은 가운데 카드로 ── */
.바닥시트 { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45);
           display: flex; align-items: flex-end; justify-content: center;
           animation: 스르륵 .18s ease; }
.시트속 { width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
         overscroll-behavior: contain; background: var(--판);
         border-radius: 24px 24px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) {
  .바닥시트 { align-items: center; }
  .시트속 { border-radius: 24px; }
}

/* 체결의 순간 — 도장이 쾅 찍힌다 */
.도장 { display: inline-flex; width: 22px; height: 22px; flex: none; border-radius: 12px;
       background: var(--강조); color: var(--강조위글); font-size: calc((13px) * var(--글배, 1)); font-weight: 800;
       align-items: center; justify-content: center;
       animation: 도장쾅 .42s cubic-bezier(.2, 1.9, .4, 1); }
@keyframes 도장쾅 { 0% { transform: scale(.3) rotate(-14deg); opacity: 0; }
                    60% { transform: scale(1.25) rotate(3deg); }
                    100% { transform: scale(1) rotate(0); opacity: 1; } }

/* 시트가 스프링으로 솟는다 */
.시트속 { animation: 시트솟음 .34s cubic-bezier(.22, 1.35, .36, 1); }
@keyframes 시트솟음 { from { transform: translateY(48px); opacity: .5; } }

/* 커뮤니티 카드도 손끝에 반응한다 */
.매매칸 { transition: transform .09s ease, background .12s ease; }
.매매칸:active { transform: scale(.985); background: var(--판2); }

/* 스켈레톤이 숨을 쉰다 — 죽은 회색 대신 흐르는 빛 */
.뼛조각 { position: relative; overflow: hidden; }
.뼛조각::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(0,0,0,.045) 50%, transparent 70%);
  animation: 뼈빛 1.4s ease-in-out infinite; }
[data-빛="dark"] .뼛조각::after {
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.05) 50%, transparent 70%); }
@keyframes 뼈빛 { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .도장, .시트속, .뼛조각::after { animation: none; }
  .매매칸:active { transform: none; }
}

/* 입력칸 우상단 비우기 ✕ — 칩이 아니라 입력의 일부다 */
.칸지움 { position: absolute; top: 10px; right: 12px; width: 24px; height: 24px;
         display: flex; align-items: center; justify-content: center; border-radius: 12px;
         background: var(--판2); color: var(--글흐림); font-size: calc((12px) * var(--글배, 1)); }
.칸지움:active { transform: scale(.9); }

/* ── 3차 관례 점검 (2026-09-14) ────────────────────── */
/* #11 매도는 파랑 — 한국 증권앱 관례(매수 빨강/매도 파랑) */
.알약단추.파랑 { background: var(--내림); color: #fff; }

/* #2·#16 토글 스위치 — 「꺼짐」 글자 알약보다 상태가 한눈에 */
.스위치 { width: 44px; height: 26px; border-radius: 12px; background: var(--판2);
         position: relative; flex: none; transition: background .18s ease; }
.스위치::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
                border-radius: 8px; background: var(--글흐림); transition: transform .18s ease, background .18s ease; }
.스위치.켜짐 { background: var(--강조); }
.스위치.켜짐::after { transform: translateX(18px); background: #fff; }

/* #4 바텀시트 손잡이 */
.시트손잡이 { width: 40px; height: 4px; border-radius: 4px; background: var(--줄);
             margin: 0 auto 12px; }

/* #7 가로 스크롤 칩줄 — 오른쪽이 깨진 게 아니라 이어진다는 힌트.
   배경색 덧칠(::after)은 칩과 바탕이 가까운 라이트에서 안 먹혀 글자 토막이 그대로 보였다
   (사장님 스샷 지적) — 내용 자체를 투명으로 사그라뜨리는 mask 는 바탕과 무관하게 먹는다. */
.칩줄가림 { position: relative; }
.칩줄가림 .한줄칩줄 { padding-right: 32px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); }

/* #6 갈래(탭)와 정렬(칩)의 위계 — 정렬 켜짐은 연하게, 갈래 켜짐(흰색)이 위 */
.정렬칩.켜짐 { background: var(--강조연함); color: var(--강조); font-weight: 700; }

/* 갈래 내림단추 — 종목 목록의 갈래는 칩 다섯이 아니라 단추 하나로 접는다(사장님 3차 지시,
   저쪽 「국내주식 ˅」 짜임). 정렬 칩과 한 줄에 서고, 켜짐색 대신 테두리로 「고르개」임을 말한다. */
.내림단추 { display: flex; align-items: center; gap: 4px; font-weight: 700;
            background: var(--판); border: 1px solid var(--줄); }
.내림덮개 { position: fixed; inset: 0; z-index: 55; }
.내림메뉴 { position: absolute; top: calc(100% + 6px); right: 0; z-index: 56;
            min-width: 150px; padding: 4px; border-radius: 16px;
            background: var(--판); border: 1px solid var(--줄);
            box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
            animation: 스르륵 .14s ease; }
.내림메뉴 button { display: flex; align-items: center; gap: 8px; width: 100%;
                  padding: 12px 12px; border-radius: 8px; font-size: calc((13px) * var(--글배, 1));
                  color: var(--글); text-align: left; }
.내림메뉴 button.켜짐 { color: var(--강조); background: var(--강조연함); font-weight: 700; }

/* 약관·개인정보처리방침 — 앱 안에서 펴는 문서. 원본 html 의 <main> 속을 그대로 그린다.
   예전엔 새 창으로 띄웠는데 토스 판 번들엔 그 파일이 없어 링크가 죽어 있었다(검수 항목). */
.밑줄글 { color: inherit; text-decoration: underline; text-underline-offset: 2px;
  /* 좌우 여백을 두면 「이용약관 과」처럼 조사가 떨어진다 — 글 속의 링크는 붙어야 한다 */
  padding: 4px 0; }
.문서글 { font-size: calc((13px) * var(--글배, 1)); line-height: 1.75; color: var(--글); }
.문서글 h1 { font-size: calc((18px) * var(--글배, 1)); margin: 0 0 4px; }
.문서글 h2 { font-size: calc((15px) * var(--글배, 1)); margin: 24px 0 4px; }
.문서글 p, .문서글 li { margin: 4px 0; }
.문서글 ol, .문서글 ul { padding-left: 16px; margin: 4px 0; }
.문서글 .때 { color: var(--흐림); font-size: calc((12px) * var(--글배, 1)); margin-bottom: 24px; }
.문서글 .큰고지 { border: 1px solid var(--줄); border-radius: 12px; padding: 12px 16px;
                  margin: 16px 0; background: var(--판2); }
.문서글 a { color: var(--강조); }

/* 약관·방침은 약관/*.html 의 **몸통만** 떼어 와 여기에 붙인다.
   그래서 그 파일들이 제 <style> 에 적어 둔 표 규칙이 **한 줄도 안 따라온다**
   (실측 2026-09-15: 붙은 문서 안 <style> 0개, 앱 스타일시트에서 「표틀」을 찾은 규칙 0개).
   .표틀{overflow-x:auto} 가 죽어 있어서 표가 구르는 대신 칸이 찌그러졌다 —
   375px 에서 첫 칸 67px(두 줄), 320px 에서 57px(세 줄).
   여기 옮겨 적는다. 문서 쪽 <style> 은 앞으로도 안 들어오니 표 모양도 같이 챙긴다. */
.문서글 table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: calc((13px) * var(--글배, 1)); }
.문서글 th, .문서글 td { border: 1px solid var(--줄); padding: 8px 8px;
                          text-align: left; vertical-align: top; }
.문서글 th { background: var(--판2); font-weight: 600; }
/* overflow-x 만 주면 표가 스스로 줄어들어 넘칠 일이 없다 — 안 구른다.
   min-width 로 「이만큼은 있어야 한다」를 못 박아야 비로소 구른다. */
.문서글 .표틀 { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.문서글 .표틀 table { min-width: 460px; margin: 0; }

/* 뒤로 가는 길은 열두 화면에서 이것 하나뿐인데 글자 넓이(실측 30px)밖에 안 됐다 —
   엄지가 닿는 넓이가 아니다. 좌우로 여백을 붙여 표적을 키우되,
   **왼쪽으로 그만큼 당겨** 글자가 서던 자리는 그대로 둔다(안 당기면 제목줄과 어긋난다).
   전에는 화면마다 style={{padding:"4px 0 12px"}} 를 손으로 박아 뒀다 — 그게 이 규칙을 이기고 있었다. */
.잔글.뒤로단추 { display: inline-flex; align-items: center;
                 min-height: 44px; padding: 0 12px;
                 margin-left: -12px; margin-bottom: 4px; }

/* 토스 판 — 토스 네비게이션 바(withBackButton)가 뒤로가기를 그린다.
   화면 안 자체 「‹ 뒤로」와 겹치면 중복 뒤로가기로 반려다(심사 가이드). 웹 판은 유지. */
[data-판="toss"] .뒤로단추 { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   데스크톱 — **대시보드가 아니다.**

   앞 세 판이 전부 같아 보인 까닭: 세 판 다 「왼쪽 길잡이 + 위 띠 + 가운데 + 오른쪽 칸」
   이었다. 매번 파일을 지웠지만 지운 자리에 같은 격자를 다시 타이핑했다.
   그 격자가 세상 모든 관리자 대시보드의 모양이다. 이번 판은 뼈대를 바꾼다.

     윗줄   48px   처마 — 상표·찾기·장 상태·내 돈·계좌. 길잡이가 아니다.
     한복판        판(종목 하나 + 주문서) 위, 서랍(목록들) 아래.
     흐름   300px  사건이 흘러내린다.

   **왼쪽 기둥이 없다.** 화면이 여섯인 앱에 세로 기둥 하나를 내주는 건 자리 낭비였다.
   ═══════════════════════════════════════════════════════════════════ */
.터 {
  touch-action: manipulation;
  --바닥: #F4F2F8;
  --칸: #FFFFFF;
  --칸줄: rgba(109, 74, 255, .10);
  --칸그늘: 0 1px 2px rgba(72, 54, 128, .04), 0 6px 20px rgba(72, 54, 128, .06);
  --밤: #17133B;

  display: grid; height: 100dvh; overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(272px, 312px);
  grid-template-rows: 48px minmax(0, 1fr);
  grid-template-areas: "윗줄 윗줄" "한복판 이야기";
  background: var(--바닥);
}
[data-빛="dark"] .터 {
  --바닥: #111018;
  --칸: #1C1922;
  --칸줄: rgba(255, 255, 255, .07);
  --칸그늘: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .3);
  --밤: #15122F;
}

/* ── 윗줄 — 처마. 여기 있는 넷은 어느 화면에서도 답이 필요한 것들이다 ── */
.윗줄 { grid-area: 윗줄; display: flex; align-items: center; gap: 16px;
        padding: 0 16px; background: var(--칸); border-bottom: 1px solid var(--줄); z-index: 30; }
.윗상표 { display: flex; align-items: center; gap: 8px; flex: none;
          color: var(--강조); font-size: calc((13px) * var(--글배, 1)); font-weight: 800; letter-spacing: -.4px; }

.윗찾기 { position: relative; display: flex; align-items: center; gap: 8px;
          width: 260px; flex: none; padding: 8px 12px; border-radius: var(--알약);
          background: var(--판2); }
.윗찾기 svg { width: 15px; height: 15px; flex: none; color: var(--글흐림); }
.윗찾기 input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: calc((13px) * var(--글배, 1)); }
/* outline 을 지웠으면 대신 보일 것을 반드시 준다 — 키보드만 쓰는 사람이 길을 잃는다 */
.윗찾기:focus-within { outline: 2px solid var(--강조); outline-offset: 1px; }
.윗찾음 { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
          padding: 4px; border-radius: 16px; background: var(--칸);
          border: 1px solid var(--칸줄); box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
          max-height: 320px; overflow-y: auto; }
.윗찾음 button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
                 padding: 8px 8px; border-radius: 8px; }
.윗찾음 button:hover { background: var(--판2); }
.윗찾음 b { flex: 1; min-width: 0; font-size: calc((12px) * var(--글배, 1)); font-weight: 600;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.윗찾음 span { font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); }
.윗찾음 .잔말 { margin: 0; padding: 8px; font-size: calc((12px) * var(--글배, 1)); color: var(--글흐림); }

.윗장 { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
.윗장칸 { display: flex; align-items: center; gap: 4px; font-size: calc((11px) * var(--글배, 1));
          font-weight: 600; color: var(--글흐림); }
.윗장칸 i { width: 6px; height: 6px; border-radius: 50%; background: var(--줄); }
.윗장칸.열림 { color: var(--글); }
.윗장칸.열림 i { background: #17A673; box-shadow: 0 0 6px rgba(23, 166, 115, .6); }
.윗장칸.언저리 i { background: #C9B8FF; }
.숨은글 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -4px;
           overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.건너뛰기 { position: absolute; left: 12px; top: -60px; z-index: 200;
            padding: 12px 16px; border-radius: 12px; font-size: calc((13px) * var(--글배, 1)); font-weight: 600;
            background: var(--강조); color: var(--강조위글); text-decoration: none;
            transition: top .12s ease; }
.건너뛰기:focus-visible, .건너뛰기:focus { top: 12px; outline: 3px solid var(--글); outline-offset: 2px; }
#본문:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .건너뛰기 { transition: none; } }
.윗장칸 { position: relative; }
.윗때 { font-size: calc((12px) * var(--글배, 1)); font-weight: 700; color: var(--글연함); margin-left: 4px; }

.윗돈 { display: flex; align-items: baseline; gap: 8px; flex: none;
        padding-left: 16px; border-left: 1px solid var(--줄); }
.윗돈 b { font-size: calc((15px) * var(--글배, 1)); font-weight: 800; letter-spacing: -.4px; }
.윗돈 > span { display: flex; align-items: center; gap: 4px; font-size: calc((11px) * var(--글배, 1));
               font-weight: 600; color: var(--글연함); }

.윗계좌 { display: flex; gap: 4px; flex: none; }
.윗계좌 button { padding: 4px 12px; border-radius: var(--알약); font-size: calc((11px) * var(--글배, 1));
                 font-weight: 600; color: var(--글연함); background: var(--판2); }
.윗계좌 button:hover { background: var(--강조연함); color: var(--강조); }
.윗계좌 button.켜짐 { background: var(--강조); color: var(--강조위글); }

/* ── 한복판 — 판이 위, 서랍이 아래. 서랍을 뒤져도 판은 안 사라진다 ── */
.한복판 { grid-area: 한복판; min-width: 0; min-height: 0;
          display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 340px);
          gap: 12px; padding: 12px; }
.폰자리 { grid-row: 1 / -1; overflow-y: auto; overscroll-behavior: contain;
          background: var(--칸); border: 1px solid var(--칸줄); box-shadow: var(--칸그늘);
          border-radius: 24px; padding: 24px; }
.폰자리 > * { max-width: 780px; margin-left: auto; margin-right: auto; }

/* 판 — 이 화면의 목적. 늘 종목 하나와 사는 칸이 있다. */
/* 복판 — 이 화면의 목적. 늘 종목 하나와 사는 칸이 있다.
   (`.판` 은 폰 껍데기의 뿌리 클래스라 못 쓴다 — 한 번 겹쳐서 517px 기둥이 됐다.) */
.복판 { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px;
        background: var(--칸); border: 1px solid var(--칸줄); box-shadow: var(--칸그늘);
        border-radius: 24px; padding: 12px 16px 16px; overflow: hidden; }
.판머리 { display: flex; align-items: center; gap: 12px; }
.판이름 { min-width: 0; }
.판이름 h1 { margin: 0; font-size: calc((18px) * var(--글배, 1)); font-weight: 800; letter-spacing: -.6px;
             text-wrap: balance;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.판이름 > span { font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); }
.판값 { margin-left: auto; display: flex; align-items: baseline; gap: 8px; flex: none; }
.판값 b { font-size: calc((24px) * var(--글배, 1)); font-weight: 800; letter-spacing: -.9px; }
.판자세히 { flex: none; padding: 8px 12px; border-radius: var(--알약);
            background: var(--판2); font-size: calc((12px) * var(--글배, 1)); font-weight: 600; color: var(--글연함); }
.판자세히:hover { background: var(--강조연함); color: var(--강조); }

/* 차트가 왼쪽, 사는 칸이 오른쪽. 세로로 쌓으면 주문서(380px)가 차트를 0으로 눌렀다. */
.판몸 { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; }
.판왼 { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.판차트 { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
/* 칸이 속내용보다 낮으면 flex 는 «줄일 수 있는 것부터» 줄인다. 갈피 줄이 첫 제물이었다 —
   실측(2026-09-15, 1440x900): 높이 1px. 글자만 남아 차트 위에 떠 있어서
   화면이 통째로 목업처럼 보였다. 갈피는 길을 고르는 자리라 못 줄이게 못 박는다. */
.판왼 > .꿈갈피 { flex: none; }
/* 차트 높이는 판.jsx 가 칸을 재서 넘긴다(ResizeObserver). 여기 overflow 는 그 «안전판»이다 —
   관찰자가 못 울리는 판(가려진 탭, 옛 웹뷰)에서도 차트가 이웃 위로 번지지는 않게 한다.
   제대로 도는 판에서는 높이가 이미 맞아서 이 규칙이 자를 것이 없다.
   justify-content:center 라 넘치면 위아래로 함께 번진다 — 위쪽 갈피도 이 규칙이 지킨다. */
/* 차트 칸 — svg 가 칸에 맞춰 «세로로 늘어난다». 그림 아래 시각 눈금(09:00…19:50)은
   제 높이를 그대로 지키고, 남는 세로를 svg 가 가져간다.
   전에는 칸 높이를 통째로 svg 에 줘서 눈금이 칸 밖으로 밀려 잘렸다(사장님 지적 2026-09-15). */
.판차트 { overflow: hidden; position: relative; }
/* 짚은 봉의 시·고·저·종을 차트 «위에» 얹는다. 자리를 안 먹어야 그림이 안 줄어든다.
   .판차트 > div 가 (0,1,1) 이라 클래스 둘로 눌러 준다. 겹친 줄은 마우스를 안 먹는다 —
   안 그러면 그 줄 위에선 짚기가 끊긴다. */
.판차트 > .차트머리 {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  /* 방향을 «반드시» 적는다. .판차트 > div 가 flex-direction:column 을 주는데
     display:flex 만 덮으면 그 column 이 그대로 남아, 다섯 칸이 세로로 쌓여
     111px 짜리 기둥이 되어 차트를 덮었다(실측 2026-09-15). */
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  height: auto; padding: 4px 4px 4px; pointer-events: none;
  font-size: calc((11px) * var(--글배, 1)); line-height: 1.5;
}
.판차트 > .차트머리 > span { display: inline-flex; align-items: baseline; gap: 4px; }
.판차트 > .차트머리 i { font-style: normal; color: var(--글연함); }
.판차트 > .차트머리 b { font-weight: 600; }
.판차트 > .차트머리 em { font-style: normal; font-size: calc((11px) * var(--글배, 1)); }
.판차트 > div { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.판차트 > div > svg { flex: 1 1 auto; min-height: 60px; height: auto; }
/* 갈피가 「기업 정보」·「공시·뉴스」면 속내용이 칸보다 길다. .판왼 은 overflow:hidden 이라
   넘친 만큼 «잘리기만 하고 구를 수가 없었다» — 뉴스 스무 건 중 두어 건만 보였다
   (사장님 지적 2026-09-15: 「여기 스크롤이 안되는데?」).
   차트 갈피는 칸에 맞춰 줄어드니 그대로 두고, 글이 쌓이는 이 둘만 제 안에서 구르게 한다. */
.판왼 > .작업정보, .판왼 > .꿈카드 {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
}

/* ── 넓은 화면에서 갈피와 찾는 칸 ─────────────────────────────
   `.꿈갈피 button{flex:1}` 은 폰(375px)에서 네 갈피를 83px 씩 고르게 나누려고 둔 것이다.
   그 규칙이 데스크톱에도 그대로 살아 1166px 을 넷이 나눠 «한 갈피가 292px» 이 됐다 —
   가운데 작은 글씨 하나를 두고 빈 칸이 사방으로 벌어져 만들다 만 화면처럼 보였다
   (사장님 지적 2026-09-15). 넓은 화면에서는 글자 폭만큼만 서고 왼쪽부터 채운다.
   밑선은 줄 전체에 그대로 남으니 탭 바 모양은 잃지 않는다. */
@media (min-width: 1100px) {
  /* `div.` 를 붙여 (0,1,2) 로 올린다 — 꿈.css 의 `.꿈갈피 button{flex:1}` 이 (0,1,1) 인데
     그 파일이 뒤에 이어 붙어서, 같은 구체성으로는 이쪽이 진다. */
  /* 갈피를 내용 폭으로만 세웠더니(flex:0 0 auto) 넓은 칸에서 **왼쪽에 뭉쳤다** —
     /orders 의 네 갈피가 1014px 짜리 밑줄 왼쪽 끝 239px 에 몰려 있었다(사장님 지적 2026-09-15).
     그렇다고 뚜껑 없이 펼치면 밑선이 «262px 짜리 막대»가 되고 글자끼리 멀어진다(눈으로 봄).
     그래서 **고르게 펴되 줄 자체에 뚜껑을 씌운다** — 갈피 넷이 107~127px 로 선다.
     좁은 칸(곁 목록 226px)은 뚜껑 밑이라 그대로다. */
  div.꿈갈피 > button { flex: 1 1 auto; padding-left: 16px; padding-right: 16px; }
  .꿈갈피 { max-width: 520px; }
  /* 종목 찾는 칸도 같은 병 — flex:1 이라 1058px 짜리 입력칸이 됐다. 읽기 좋은 길이로 묶는다. */
  .작업종목검색 { flex: 0 1 420px; max-width: 420px; }
  /* 분절 고르개. 폭을 안 적어 둬서 부모를 통째로 채웠고, 그 안에서 button{flex:1} 이
     고르게 나누니 한 칸이 «578px» 이 됐다(실측 /rank, 1600px: 「전체」 두 글자에 빈 자리 555px).
     그래서 내용만큼만 세웠는데(width:fit-content) 이번엔 **좁은 칸에서도 줄어들었다** —
     247px 짜리 주문 칸에서 혼자 190px 이 되어 오른쪽에 58px 을 비우고 왼쪽에 붙었다.
     둘레의 칩줄·주문 단추는 죄다 247px 인데 고르개만 짧으니 쏠려 보인다(사장님 지적 2026-09-15).
     줄이는 게 아니라 «뚜껑을 씌우는» 게 맞다 — 칸을 채우되 420px 을 안 넘는다.
     그러면 좁은 칸에선 옆엣것과 너비가 맞고, 넓은 칸에선 578px 짜리 단추가 안 생긴다.
     덤으로 폭이 하나로 모인다(고치기 전 190·190·194·286·391 다섯 가지였다). */
  .고르개 { width: 100%; max-width: 420px; }
  /* 내용 폭으로 세우면 이번엔 칸이 서로 어긋난다(「전체」31px · 「내 그룹」46px).
     칸끼리 폭이 같은 것이 분절 고르개의 성질이라, 최소 폭으로 고르게 맞추고 숨 쉴 여백을 준다. */
  .고르개 > button { min-width: 92px; padding-left: 16px; padding-right: 16px; }
  /* 채팅방 고르개도 flex:1 이라 «방 이름 두 글자»가 1522px 짜리 단추가 됐다(실측 /chat, 1600px).
     곁칸(200px)에서는 이미 이보다 좁으니 이 뚜껑은 넓은 자리에서만 일한다. */
  .말방고르기 { max-width: 280px; }
  /* 목록 줄 — 이름은 왼쪽, 값은 오른쪽 «끝». 이름칸이 flex:1 이라 줄이 넓어질수록
     둘 사이가 벌어진다. 1600px 에서 랭킹 857px · 부동산 863px 이 떠서, 이름과 값을
     눈으로 이으려면 한 뼘을 건너야 했다(실측 2026-09-15).
     줄 폭을 묶는 것이 유일한 지렛대다 — 안쪽 칸을 아무리 손봐도 값은 늘 오른쪽 끝에 선다. */
  /* 읽는 글은 «줄 길이»가 기준이다. WCAG 1.4.8(AAA)은 한 줄 80자, **CJK 는 40자** 이하를 든다.
     실측(2026-09-15, 1920px): 약관 본문이 1222px 칸에서 한 줄 78자 — 한도의 두 배였다.
     em 으로 묶으면 글꼴이 바뀌어도 «글자 수»가 따라온다(한글 한 자 ≒ 1em). */
  .문서글 { max-width: 42em; }
}
.판기간 { flex: none; }

.판띠 { flex: none; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
        margin-top: 4px; padding: 8px 12px; border-radius: 16px; background: var(--판2);
        font-size: calc((12px) * var(--글배, 1)); color: var(--글연함); }
.판띠이름 { font-size: calc((11px) * var(--글배, 1)); font-weight: 600; color: var(--글흐림); }
.판띠 > b { font-size: calc((13px) * var(--글배, 1)); font-weight: 800; }
.판띠낱 b { color: var(--글); font-weight: 700; margin-left: 4px; }
.판띠돈 { margin-left: auto; font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); }
.판띠돈 b { color: var(--강조); font-weight: 700; margin-left: 4px; font-size: calc((13px) * var(--글배, 1)); }

.판사기 { min-width: 0; min-height: 0; display: flex; flex-direction: column;
          padding-left: 16px; border-left: 1px solid var(--줄); }
.판편 { flex: none; margin-bottom: 12px; }
.판주문속 { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
            padding-right: 4px; margin-right: -4px; }
.판주문속 .붙은단추 { position: sticky; bottom: 0; z-index: 5;
                      box-shadow: 0 -10px 14px -12px rgba(0, 0, 0, .5); }

/* ── 서랍 — 다섯 갈피가 접혀 있다. 줄을 누르면 위 판만 바뀐다. ── */
.서랍 { min-height: 0; display: flex; flex-direction: column;
        background: var(--칸); border: 1px solid var(--칸줄); box-shadow: var(--칸그늘);
        border-radius: 24px; overflow: hidden; }
.서랍갈피 { flex: none; display: flex; gap: 4px; padding: 8px 8px 0;
            border-bottom: 1px solid var(--줄); }
.서랍갈피 button { padding: 8px 16px 12px; font-size: calc((13px) * var(--글배, 1)); font-weight: 600;
                   color: var(--글흐림); border-bottom: 2px solid transparent;
                   margin-bottom: -4px; transition: color .12s ease; }
.서랍갈피 button:hover { color: var(--글연함); }
.서랍갈피 button.켜짐 { color: var(--강조); border-bottom-color: var(--강조); }
.서랍속 { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
          padding: 12px 12px 12px; }
.서랍줄 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.서랍줄 .고르개 { flex: none; }
.서랍줄 .고르개 button { white-space: nowrap; padding: 8px 12px; font-size: calc((12px) * var(--글배, 1)); }
.서랍곁 { font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); margin-left: auto; }
.서랍빈 { margin: 0; padding: 32px 4px; text-align: center; font-size: calc((13px) * var(--글배, 1)); color: var(--글흐림); }
.서랍잔 { font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); }
.서랍흐름 { max-width: 620px; }

.서랍표 { width: 100%; border-collapse: collapse; font-size: calc((12px) * var(--글배, 1)); }
.서랍표 th { position: sticky; top: -12px; z-index: 2; background: var(--칸);
             text-align: right; white-space: nowrap; padding: 0 8px 8px;
             font-size: calc((11px) * var(--글배, 1)); font-weight: 600; color: var(--글흐림);
             border-bottom: 1px solid var(--줄); }
.서랍표 th.누를수있는 { cursor: pointer; }
.서랍표 th.누를수있는:hover { color: var(--강조); }
.서랍표 td { text-align: right; white-space: nowrap; padding: 8px 8px;
             border-bottom: 1px solid var(--줄); }
.서랍표 th.ㄱ이름, .서랍표 td.ㄱ이름 { text-align: left; width: 34%; }
.서랍표 th.ㄱ번호, .서랍표 td.ㄱ번호 { width: 34px; text-align: center;
                                        color: var(--글흐림); font-weight: 600; }
.서랍표 td.ㄱ번호.위 { color: var(--강조); }
.서랍표 th.ㄱ하트, .서랍표 td.ㄱ하트 { position: relative; width: 38px; text-align: center; padding: 4px; }
.서랍표 td.ㄱ값 { font-weight: 700; font-size: calc((13px) * var(--글배, 1)); }
.서랍표 td.ㄱ덧 { color: var(--글연함); }
/* 종목표는 60행이 넘는다. 화면 밖 줄은 안 그린다 — 가상화 없이 브라우저가 해 준다. */
.줄넓힘::after { content: ""; position: absolute; inset: 0; }
.줄넓힘:focus-visible { outline: none; }
.줄덮개 { font: inherit; color: inherit; max-width: 100%; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.서랍표 tbody tr:has(.줄넓힘:focus-visible),
.시세표 tbody tr:has(.줄넓힘:focus-visible) { outline: 2px solid var(--강조); outline-offset: -2px; }
.시세표 tbody tr { position: relative; }
.시세표 td:last-child { position: relative; }
.서랍표 tbody tr { position: relative; cursor: pointer; transition: background .1s ease;
                   content-visibility: auto; contain-intrinsic-size: auto 33px; }
.서랍표 tbody tr:hover { background: var(--판2); }
.서랍표 tbody tr.켜짐 { background: var(--강조연함); }
.서랍표 tbody tr.켜짐 td.ㄱ이름 b { color: var(--강조); }
.서랍표 tbody tr.나 { background: var(--강조연함); }
.서랍표 tbody tr.관심가르 { cursor: default; }
.서랍표 tbody tr.관심가르:hover { background: transparent; }
.서랍표 tbody tr.관심가르 td { padding: 12px 8px 4px; font-size: calc((11px) * var(--글배, 1)); font-weight: 700; color: var(--글흐림); text-align: left; border-bottom: 0; }
.서랍표 tbody tr:last-child td { border-bottom: 0; }
.표이름 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.표이름 > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.표이름 b { font-size: calc((12px) * var(--글배, 1)); font-weight: 600; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
.표이름 > span > span { font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); }
.서랍표 .하트 { width: 26px; height: 26px; }
.서랍표 .하트 svg { width: 15px; height: 15px; }

.집판 { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.집칸 { display: block; text-align: left; border-radius: 16px; overflow: hidden;
        background: var(--판2); transition: transform .14s ease; }
.집칸:hover { transform: translateY(-2px); }
.집그림 { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--줄); overflow: hidden; }
.집그림 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.집속 { display: block; padding: 8px 12px 12px; }
.집속 > b { display: block; font-size: calc((12px) * var(--글배, 1)); font-weight: 700;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.집속 > .서랍잔 { display: block; margin-top: 4px; white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; }
.집값 { display: block; margin-top: 4px; font-size: calc((15px) * var(--글배, 1)); font-weight: 800; letter-spacing: -.3px; }

/* ── 이야기칸 — 오른쪽 기둥. **채팅창이다.** ─────────────────────
   범위 둘: 전체 / 지금 보는 종목. 종목을 고르면 한복판도 같이 간다 —
   고른 종목은 화면에 하나뿐이어야 한다. 둘로 두면 어느 쪽이 진짜인지 헷갈린다. */
.말칸 { grid-area: 이야기; min-height: 0; display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        background: var(--칸); border-left: 1px solid var(--줄); }

/* 머리 — **한 줄이다.** 앞 판은 제목·알림끄기·연결상태·칩줄로 네 줄을 먹었고,
   그만큼 말이 보이는 자리가 줄었다. 제목은 aside 의 aria-label 이 이미 말한다. */
.말머리 { padding: 8px 8px; border-bottom: 1px solid var(--줄); }
.꿈커뮤니티 .말칸 .말머리 { padding: 8px 8px; }   /* 꿈.css 가 뒤에 실려 덮는 것을 셋으로 이긴다 */
/* 점 · 방 알약 · 접기. **격자다.** flex 로 두면 알약이 제 글 폭만큼 버텨서
   접기 단추가 칸 밖으로 밀리고, 말칸이 overflow:hidden 이라 그대로 잘린다
   (사장님 사파리에서 「›」가 반 잘려 보였다 — 2026-09-16).
   가운데 칸을 minmax(0,1fr) 로 못 박으면 어느 판에서도 밀려날 자리가 없다. */
.말윗줄 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
          align-items: center; gap: 4px; min-width: 0; padding-right: 4px; }
.말윗줄 > .말범위 { min-width: 0; }

/* 연결 상태는 점 하나면 족하다 — 「실시간 연결」이라는 글줄이 한 줄을 먹고 있었다 */
.말불 { flex: none; width: 7px; height: 7px; margin: 0 4px; border-radius: 50%;
        background: var(--글흐림); transition: background .2s ease; }
.말불.붙음 { background: #22C55E; }
@media (prefers-reduced-motion: reduce) { .말불 { transition: none; } }

.말접기 { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid;
          place-items: center; font-size: calc((18px) * var(--글배, 1)); color: var(--글연함); background: var(--판2); }
.말접기:hover { background: var(--강조연함); color: var(--강조); }
.꿈채팅펴기 { width: 30px; height: 30px; margin: 8px auto; border-radius: 50%;
             display: grid; place-items: center; font-size: calc((18px) * var(--글배, 1));
             color: var(--글연함); background: var(--판2); }
.꿈채팅펴기:hover { background: var(--강조연함); color: var(--강조); }
/* 방 칩 줄 — 연 방이 여기 남는다. 앞 판은 「전체」와 종목 하나뿐이라
   삼성전자를 보다 비트코인을 보려면 매번 다시 찾아야 했다. */
.말범위 { display: flex; gap: 4px; flex-wrap: wrap; }
.말범위 > button { flex: none; padding: 4px 12px; border-radius: var(--알약); font-size: calc((12px) * var(--글배, 1));
                   font-weight: 600; color: var(--글연함); background: var(--판2); }
.말범위 > button:hover { background: var(--강조연함); color: var(--강조); }
.말범위 > button.켜짐 { background: var(--강조); color: var(--강조위글); }

.말방 { display: flex; align-items: center; flex: none; border-radius: var(--알약);
        background: var(--판2); max-width: 132px; transition: background .12s ease; }
.말방:hover { background: var(--강조연함); }
.말방.켜짐 { background: var(--강조); }
.말방이름 { min-width: 0; padding: 4px 4px 4px 12px; font-size: calc((12px) * var(--글배, 1)); font-weight: 600;
            color: var(--글연함); white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
.말방:hover .말방이름 { color: var(--강조); }
.말방.켜짐 .말방이름, .말방.켜짐 .말방닫기 { color: #fff; }
.말방닫기 { flex: none; padding: 4px 8px 4px 4px; font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림);
            line-height: 1; }
.말방닫기:hover { color: var(--오름); }

/* ＋ 는 칩 줄 바깥에 있다 — 줄이 아무리 길어져도 자리를 지킨다 */
.말윗줄 > .말찾기단추 { flex: none; width: 26px; height: 26px; padding: 0;
              display: grid; place-items: center; border-radius: 50%;
              font-size: calc((13px) * var(--글배, 1)); font-weight: 700; color: var(--글연함); background: var(--판2); }
.말윗줄 > .말찾기단추:hover { background: var(--강조연함); color: var(--강조); }
.말찾기단추 { flex: none; width: 30px; height: 29px; padding: 0 !important;
              display: grid; place-items: center; font-size: calc((13px) * var(--글배, 1)); font-weight: 700; }

.말찾기 { position: relative; margin-top: 8px; }
.말찾기 input { width: 100%; padding: 8px 12px; border: 1px solid var(--줄);
                border-radius: var(--알약); background: var(--판2);
                outline: none; font-size: calc((12px) * var(--글배, 1)); }
.말찾기 input:focus-visible { border-color: var(--강조); }
.말찾음 { position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 20;
          padding: 4px; border-radius: 12px; background: var(--칸);
          border: 1px solid var(--칸줄); box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
          max-height: 240px; overflow-y: auto; }
.말찾음 button { display: flex; align-items: center; gap: 8px; width: 100%;
                 text-align: left; padding: 4px 8px; border-radius: 8px; }
.말찾음 button:hover { background: var(--판2); }
.말찾음 b { font-size: calc((12px) * var(--글배, 1)); font-weight: 600; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }

/* ── 줄기 — 말풍선 ──────────────────────────────────────────────
   채팅 관례를 그대로 따른다. 새로 발명할 자리가 아니다.
     · 풍선은 글 길이에 맞춰 줄어든다 (통줄이면 게시판으로 읽힌다)
     · 내 말은 오른쪽, 남의 말은 왼쪽 — 색만 다르면 누가 썼는지 훑기 어렵다
     · 같은 사람이 연달아 쓰면 이름·얼굴은 한 번, 시각은 묶음 끝에 한 번
     · 묶음 안쪽 모서리를 깎아 한 덩어리로 보이게 한다
   빛깔은 우리 것(--강조 라벤더)으로만 칠한다. 빨강·파랑은 오름·내림이라 못 쓴다. */
/* overflow-y 만 auto 로 두면 브라우저가 overflow-x 까지 auto 로 만든다(CSS 규칙: 한 축이 visible 이 아니면
   다른 축의 visible 은 auto 로 바뀐다). 그래서 긴 글·주소가 오면 대화창이 좌우로 밀렸다 —
   가로는 못 박아 둔다(사장님 지적 2026-09-15). 대신 아래에서 «잘리지 않게» 줄을 접어 준다. */
.말줄기 { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
          display: flex; flex-direction: column; gap: 0; padding: 12px 12px 16px;
          background: var(--바탕); }   /* 풍선이 떠 보이려면 바탕이 한 겹 낮아야 한다 */
/* 가로를 막았으니 내용이 스스로 접혀야 한다 — 안 그러면 긴 주소가 잘려 안 보인다.
   min-width:0 이 없으면 flex 자식은 제 내용만큼 부풀어 줄바꿈을 거부한다. */
.말줄기 > * { min-width: 0; max-width: 100%; }
.말몸, .말속, .말머리 { overflow-wrap: anywhere; }
.말잔 { font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); }
.말가운데 { margin: auto 0; text-align: center; line-height: 1.8; }

/* 날이 바뀌면 가운데 띠 */
.말날 { display: flex; align-items: center; gap: 8px; margin: 16px 4px 8px; }
.말날::before, .말날::after { content: ""; flex: 1; height: 1px; background: var(--줄); }
.말날 span { flex: none; font-size: calc((11px) * var(--글배, 1)); font-weight: 600; color: var(--글흐림); }

.말줄 { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.말줄:not(.이어짐) { align-items: flex-start; }   /* 얼굴은 묶음 맨 위, 이름과 나란히 */
.말줄.이어짐 { margin-top: 4px; }                 /* 묶음 안은 촘촘히, 묶음 사이는 벌린다 */
.말줄.내것 { flex-direction: row-reverse; }

.말얼굴 { flex: none; width: 34px; height: 34px; border-radius: 12px;
          display: grid; place-items: center; color: #fff; font-size: calc((15px) * var(--글배, 1)); font-weight: 700; }
.말얼굴자리 { flex: none; width: 34px; }      /* 이어진 줄은 얼굴 자리만 비워 둔다 */

.말속 { min-width: 0; max-width: 78%; display: flex; flex-direction: column;
        align-items: flex-start; }   /* 늘리지 않는다 — 이름이 길면 시각이 저 멀리 밀렸다 */
.말줄.내것 .말속 { align-items: flex-end; }

.말이름 { display: flex; align-items: center; gap: 4px; margin: 4px 0 4px 4px; }
.말이름 b { font-size: calc((11px) * var(--글배, 1)); font-weight: 700; color: var(--글연함);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.말짝 { display: flex; align-items: flex-end; gap: 4px; min-width: 0; max-width: 100%; }
.말줄.내것 .말짝 { flex-direction: row-reverse; }

/* ── 풍선 — **한 덩어리다.** ───────────────────────────────────
   앞 판은 둥근 네모 옆에 삼각형을 따로 붙였다. 삼각형이 풍선 상자 **바깥**에
   있으니 폭이 좁아지면 그대로 넘쳤다(사장님이 잡아 주심).
   이제 몸통도 꼬리도 **풍선 제 상자 안에서** 그린다 —
   꼬리 자리만큼 안쪽 여백을 더 주고, 몸통은 그만큼 밀어 넣는다.
   상자 밖으로 나가는 것이 없으니 어떤 폭에서도 안 넘친다. */
.말풍선 { position: relative; isolation: isolate;
          min-width: 0; width: fit-content; max-width: 100%;
          padding: 8px 12px; background: transparent; color: var(--글); }
.말풍선 > * { position: relative; z-index: 1; }      /* 글은 면 위에 */
.말풍선::before { content: ""; position: absolute; inset: 0; z-index: 0;
                  border-radius: 16px; background: var(--판); }
.말줄.내것 .말풍선 { color: #fff; }
.말줄.내것 .말풍선::before { background: var(--강조); }

/* 꼬리 — 묶음 첫 풍선에만. 이어진 풍선에 줄줄이 달면 지저분하다. */
/* ★ 꼬리가 붙는 모서리는 **각져야 한다.**
   반지름을 남겨 두면 그 곡선과 삼각형의 직선 사이에 틈이 생기고,
   그 틈 때문에 따로 붙인 딱지처럼 보인다. 0 이어야 한 덩어리로 이어진다. */
.말줄:not(.이어짐) .말풍선::after { content: ""; position: absolute; z-index: 0;
                                   top: 0; width: 7px; height: 9px; }
.말줄.남것:not(.이어짐) .말풍선 { padding-left: 16px; }
.말줄.남것:not(.이어짐) .말풍선::before { left: 7px; border-top-left-radius: 0; }
.말줄.남것:not(.이어짐) .말풍선::after { left: 0; background: var(--판);
                                        clip-path: polygon(100% 0, 100% 100%, 0 0); }
.말줄.내것:not(.이어짐) .말풍선 { padding-right: 16px; }
.말줄.내것:not(.이어짐) .말풍선::before { right: 7px; border-top-right-radius: 0; }
.말줄.내것:not(.이어짐) .말풍선::after { right: 0; background: var(--강조);
                                        clip-path: polygon(0 0, 0 100%, 100% 0); }

.말몸 { margin: 0; font-size: calc((13px) * var(--글배, 1)); line-height: 1.55;
        white-space: pre-wrap; overflow-wrap: anywhere; }
.말종목 { display: inline-block; margin-top: 4px; padding: 4px 8px; border-radius: var(--알약);
          background: var(--칸); font-size: calc((11px) * var(--글배, 1)); font-weight: 700; color: var(--강조); }
.말줄.내것 .말종목 { background: rgba(255, 255, 255, .22); color: #fff; }

/* 곁 — 시각과 신고·차단. **손 얹거나 글쇠로 짚어야 나온다.**
   말마다 신고 단추가 달려 있으면 대화가 아니라 게시판으로 읽힌다. */
.말곁 { flex: none; display: flex; align-items: center; gap: 4px; padding-bottom: 4px; }
/* 꿈.css 가 뒤에 실려 .말때 에 margin-left:auto 를 건다 — 여기서 셋을 이겨 되돌린다 */
.말줄 .말곁 .말때 { margin-left: 0; font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); white-space: nowrap; }
/* 신고·차단 — **풍선 위에 떠서, 안쪽으로 자란다.**
   두 번 틀렸던 자리다.
     ① 폭을 0→96px 로 펴게 했더니 손만 스쳐도 줄이 다시 배치돼 글이 움직였다
     ② 풍선 바깥 옆(left:100%)에 붙였더니 긴 풍선에서 패널 밖으로 나갔다
   그래서 풍선의 **안쪽 모서리**에 걸고 위로 띄운다 — 자라는 방향이 늘 패널 안쪽이라
   어떤 풍선 너비에서도 안 넘치고, 띄워 놨으니 자리도 안 먹는다. */
.말짝 { position: relative; }
.말손 { position: absolute; bottom: calc(100% + 2px); z-index: 7;
        display: flex; gap: 8px; padding: 4px 8px; border-radius: var(--알약);
        background: var(--칸); border: 1px solid var(--줄); box-shadow: var(--그늘);
        opacity: 0; visibility: hidden; }
.말줄.남것 .말손 { left: 0; }
.말줄.내것 .말손 { right: 0; }
.말줄:hover .말손, .말줄:focus-within .말손 { opacity: 1; visibility: visible; }
.말손 button { flex: none; font-size: calc((11px) * var(--글배, 1)); font-weight: 600; color: var(--글연함);
               white-space: nowrap; }
.말손 button:hover { color: var(--강조); }
/* 손가락 화면엔 hover 가 없다 — 옅게나마 늘 보여야 손이 닿는다 */
/* 다만 «늘» 보이면 제 자리가 있어야 한다. 띄워 둔 띠(26px)는 말풍선 위 28px 을 차지하는데,
   그 자리엔 이미 보낸이 이름이 서 있고, 이름 없는 줄에서는 윗줄 말풍선이 서 있다.
   hover 로 잠깐 뜰 때는 안 보이던 문제가, 늘 보이니 글자 위에 얹혔다 —
   실측(2026-09-15, 375px 손가락 화면): 「신고」가 이름 「무모한 펭귄 9628」 위에 30.7x16.5px,
   윗줄 말풍선 위에 16x10px. 그래서 손가락 화면에서만 띠에게 제 칸을 내준다. */
@media (hover: none) {
  /* 띄운 채로 늘 보이게 두면 갈 데가 없다 — 말풍선 위 28px 은 이미 남의 자리다.
     이름이 있는 줄에선 보낸이 이름을, 이어지는 줄에선 윗줄 말풍선을 덮었다.
     간격을 벌려 자리를 내주는 길도 있지만 `.말줄.이어짐{margin-top:4px}` 이
     **일부러** 촘촘한 것이라 그걸 깨뜨린다.
     그래서 손가락 화면에서는 «띄우지 않는다» — 시각 옆에 제 자리를 갖고 선다.
     겹칠 일이 없고, 묶음은 그대로 촘촘하고, 신고·차단은 늘 손에 닿는다.
     (신고는 안전 장치다. 손가락으로 닿을 길이 없으면 없는 것과 같아서 숨기지 않는다.) */
  .말손 { position: static; opacity: .8; visibility: visible;
          background: none; border: 0; box-shadow: none; padding: 0; gap: 8px; }
}

/* ── 쓰기 — **알약 하나.** 늘 바닥에 붙는다 ──────────────────
   앞 판은 칸 아래에 단추 줄이 따로 있어 그 줄만큼 말이 안 보였다.
   카톡·슬랙처럼 한 알약 안에 넣고 보내기는 동그란 화살표로 둔다. */
.말쓰기 { position: relative; padding: 8px 8px 8px;
          border-top: 1px solid var(--줄); background: var(--칸); }

/* 새 글 알림 — 말 위에 **떠 있다.** 자리를 안 먹는다. */
.말새글 { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
          z-index: 6; padding: 4px 12px; border-radius: var(--알약); white-space: nowrap;
          background: var(--강조); color: var(--강조위글); font-size: calc((11px) * var(--글배, 1)); font-weight: 700;
          box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
.말탈 { margin: 0 0 8px; padding: 8px 8px; border-radius: 8px;
        background: var(--오름연함); color: var(--오름);
        font-size: calc((11px) * var(--글배, 1)); line-height: 1.5; }

.말입력 { display: flex; align-items: flex-end; gap: 8px;
          padding: 4px 4px 4px 12px; border: 1px solid var(--줄);
          border-radius: 24px; background: var(--판2);
          transition: border-color .12s ease; }
/* 고리는 **알약이 쓴다.** 칸에 그리면 알약 속에 네모가 하나 더 생긴다 —
   칸이 테두리를 잃고 알약 안으로 들어갔기 때문이다. 없애지는 않는다(글쇠로 짚는 사람이 봐야 한다). */
.말입력:focus-within { border-color: var(--강조); }
.말쓰기 textarea:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .말입력 { transition: none; } }

.말쓰기 textarea { flex: 1; min-width: 0; height: 34px; max-height: 104px;
                   padding: 8px 0 8px; border: 0; background: transparent;
                   outline: none; resize: none; overflow-y: auto;
                   font: inherit; font-size: calc((13px) * var(--글배, 1)); line-height: 1.45; color: var(--글); }
.말쓰기 textarea::placeholder { color: var(--글흐림); }

.말남음 { flex: none; padding-bottom: 12px; font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); }

.말보내기 { flex: none; width: 32px; height: 32px; border-radius: 50%;
            display: grid; place-items: center;
            background: var(--강조); color: var(--강조위글); }
.말보내기:hover:not(:disabled) { filter: brightness(1.08); }
.말보내기:disabled { background: var(--줄); color: var(--글흐림); cursor: default; }

/* 숫자는 한글보다 한 눈금 단단하게 — 「이게 사실이다」로 읽힌다 */
.터 .숫자 { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.터 .숫자:is(b) { font-weight: 700; }

/* 숫자판은 판 아래에 뜬다 */
.터 .숫자판 { left: auto; right: 336px; transform: none; max-width: 420px;
              border-radius: 24px 16px 0 0; }

/* 움직임마다 관문이 있는지 한 바퀴 돌아 센다 — 관문 하나 넣고 「막았다」 하면 안 된다. */
@media (prefers-reduced-motion: reduce) {
  .터 *, .터 *::before, .터 *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .집칸:hover { transform: none; }
}


/* 확대를 되돌리는 단추. 두 번 누르기로도 되지만 그건 안 보이는 몸짓이라,
   확대했을 때만 뜨는 자리를 따로 둔다. 차트 오른쪽 위 — 값 눈금과 안 겹치는 자리다. */
.차트되돌리기 {
  position: absolute; top: 0; right: 0; z-index: 3;
  font-size: calc((11px) * var(--글배, 1)); line-height: 1; padding: 4px 8px;
  min-height: 28px; border-radius: 999px;
  background: var(--판2); color: var(--글흐림); border: 1px solid var(--줄);
}


/* 관심 소식 맛보기 — 관심 종목이 없을 때 «여기 소식이 쌓인다»를 모양으로 보여 준다.
   흐린 뼈대 위에 말을 얹는다. 뼈대는 막대뿐이라 흐려도 읽을 글이 없다(가짜 제목을 안 쓴다). */
.소식맛보기 { position: relative; }
.소식맛보기흐림 { filter: blur(4px); opacity: .5; pointer-events: none; user-select: none; }
.소식맛보기흐림 .작업소식 { display: flex; flex-direction: column; gap: 8px; }
.뼈대줄 { display: block; height: 11px; border-radius: 4px; background: var(--판2); width: 100%; }
.뼈대줄.짧게 { width: 34%; height: 9px; }
.뼈대줄.중간 { width: 62%; }
.소식맛보기말 { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center; }
.소식맛보기말 p { margin: 0; color: var(--글연함); font-size: calc((13px) * var(--글배, 1)); line-height: 1.7; }
.소식맛보기말 .꿈보조버튼 { width: auto; padding: 8px 16px; }

/* ── 커뮤니티 한 벌 (2026-09-16, 토스 조사) — 글 카드 배지·한 줄 글쓰기·인라인 댓글 ── */
.이야기이름줄 { display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: wrap; }
.보유중딱지 { font-size: calc((11px) * var(--글배, 1)); font-weight: 700; padding: 4px 8px; border-radius: 999px;
             background: var(--오름연함, var(--판2)); color: var(--오름, var(--글)); }
.이야기쓰기접힘 .이야기쓰기알약 { margin-left: auto; font-style: normal; font-size: calc((12px) * var(--글배, 1)); font-weight: 600; padding: 4px 12px;
                              border-radius: 999px; background: var(--강조); color: var(--강조위글); flex: none; }
.글쓰기보유 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 8px; }
.댓글판 { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--줄); }
.댓글쓰기 { display: flex; align-items: center; gap: 8px; }
.댓글쓰기 input { flex: 1; min-width: 0; background: var(--판2); border: 0; border-radius: 999px; padding: 8px 12px; font-size: calc((13px) * var(--글배, 1)); color: var(--글); outline: none; }
.댓글쓰기 input:focus-visible { box-shadow: 0 0 0 2px var(--강조); }
.댓글쓰기 .꿈보라버튼 { padding: 8px 12px; font-size: calc((12px) * var(--글배, 1)); flex: none; }
.댓글쓰기.잠김 { justify-content: space-between; }
.댓글줄 { padding: 8px 0; border-bottom: 1px solid var(--줄); }
.댓글줄:last-child { border-bottom: 0; }
.댓글머리 { display: flex; align-items: center; gap: 4px; font-size: calc((12px) * var(--글배, 1)); }
.댓글머리 .댓글신고 { margin-left: auto; background: none; border: 0; font-size: calc((11px) * var(--글배, 1)); }
.댓글줄 p { margin: 4px 0 0; font-size: calc((13px) * var(--글배, 1)); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.댓글빈말 { padding: 8px 0 4px; font-size: calc((12px) * var(--글배, 1)); }
.상위딱지 { background: var(--강조연함, var(--판2)); color: var(--강조); }
/* 손님용 글쓰기 카드(1920 실측 2026-09-16): 알약단추가 100% 로 늘어나 글자가 세로로 흘렀다 — 단추는 제 크기만, 글은 한 줄 */
.이야기쓰기접힘.잠김 { border-radius: 999px; }
.이야기쓰기접힘.잠김 > span { white-space: nowrap; }
.이야기쓰기접힘.잠김 .알약단추 { width: auto; flex: none; margin: 0 0 0 auto; padding: 8px 16px; font-size: calc((13px) * var(--글배, 1)); border-radius: 999px; }

html[data-색약="1"] { --오름: #E8590C; --내림: #1E88E5; }
html[data-색약="1"][data-빛="dark"] { --오름: #FF8A3D; --내림: #5AA9F5; }
/* 글씨 크기 — **글자만** 키운다.
   zoom 은 그림·아이콘·여백까지 같이 늘려서 그건 글씨 설정이 아니라 화면 확대였다.
   모든 font-size 가 calc(Npx * var(--글배)) 로 나가므로(tools/build.mjs) 여기서 배율만 준다. */
html { --글배: 1; }
html[data-글씨="크게"] { --글배: 1.18; }
html[data-글씨="작게"] { --글배: 0.88; }

@media (pointer: coarse) {
  input, textarea, select { font-size: calc((18px) * var(--글배, 1)) !important; }
}

/* IFNIGHT · lavender / pearl. Data, orders and auth remain in existing modules. */
:root { --강조위글:#fff; --바탕:#f5f1fb; --판:#fff; --판2:#f5f2fa; --글:#292142; --글연함:#6d6480; --글흐림:#746a82; --줄:#eae4f3; --강조:#7847cf; --강조연함:#eee5fc; --그늘:0 6px 30px #6e47900a; }
/* ★ 색 토큰은 여기가 «이긴다». 빛깔.css 에도 같은 이름의 토큰이 있는데 이 파일이 뒤에 실려 덮는다.
   한쪽만 고치면 오류 없이 조용히 어긋난다 — 고칠 땐 두 곳을 같이 본다. (2026-09-15 실측) */
/* 다크는 «검정»이 아니라 «보라빛 밤»이다 — 이프나잇이라는 이름이 그 뜻이다(사장님 지시 2026-09-15). */
/* 배경 계열은 «채도를 낮춰» 뒤로 물린다(사장님 지적 2026-09-15: 「다 보라색이네」).
   처음엔 바탕·판·판2·줄·강조를 전부 보라(252~268°)로 맞췄는데, 색상환 한 뼘 안에 아홉 토큰이 몰려
   색상 대비가 0이 됐다. 그건 조화가 아니라 단조다. 배경이 자기주장을 멈춰야 위에 얹힌 게 산다.
   --포인트 는 그 반대쪽 한 자리(핑크 330°) — 배경 254° 와 76° 를 벌려 준다. 아껴 쓴다. */
[data-빛="dark"] { --강조위글:#171327; --바탕:#171327; --판:#221D38; --판2:#2E2848; --글:#f4eefb; --글연함:#BCAFE4; --글흐림:#A398CE; --줄:#3A3355; --강조:#c4a0ff; --강조연함:#332A55; --포인트:#FF9AD5; }
button,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #aa83ed; outline-offset:3px; }
.꿈아이콘 { flex:none; object-fit:contain; user-select:none; }
.꿈카드 { background:var(--판); border:1px solid var(--줄); border-radius:24px; padding:24px; box-shadow:var(--그늘); min-width:0; }
.꿈제목 { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.꿈제목 h2,.꿈커뮤니티 h2 { margin:0; font-size: calc((15px) * var(--글배, 1)); letter-spacing:-.6px; }
.꿈제목 button,.꿈제목>span { font-size: calc((12px) * var(--글배, 1)); color:var(--글연함); }
.꿈제목 button { min-height:32px; }
.꿈제목>div { display:flex; gap:12px; }
.꿈상태 { color:var(--글연함); text-align:center; padding:24px 12px; font-size: calc((13px) * var(--글배, 1)); line-height:1.7; }
.꿈상태 button { color:var(--강조); text-decoration:underline; }
.꿈시장 { display:flex; align-items:center; gap:32px; padding:12px 24px; background:var(--판); border-block:1px solid var(--줄); font-size: calc((12px) * var(--글배, 1)); white-space:nowrap; min-height:48px; overflow-x:auto; }
.꿈시장>div:not(.꿈상태),.꿈시장>button { display:flex; align-items:center; gap:12px; padding-right:24px; border-right:1px solid var(--줄); }
.꿈시장 b { font-size: calc((13px) * var(--글배, 1)); }.꿈시장 .꿈상태 { padding:0; }.꿈시장끝 { color:var(--글연함); margin-left:auto; }
.꿈분류 { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.꿈분류 button { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 4px; border-radius:16px; background:var(--판2); font-size: calc((13px) * var(--글배, 1)); font-weight:600; transition:background .18s,transform .18s; }
.꿈분류 button:hover { background:var(--강조연함); transform:translateY(-3px); }
.꿈분류 button.선택 { background:var(--강조연함); color:var(--강조); box-shadow:inset 0 0 0 1px #a383d54d; }
.꿈분류.작게 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.꿈분류.작게 button { font-size: calc((11px) * var(--글배, 1)); gap:4px; padding:8px 0; border-radius:16px; }
.꿈갈피 { display:flex; border-bottom:1px solid var(--줄); margin-top:24px; }
.꿈갈피 button { flex:1; padding:12px 0; color:var(--글연함); font-size: calc((12px) * var(--글배, 1)); border-bottom:2px solid transparent; }
.꿈갈피 button.선택 { border-color:var(--강조); color:var(--강조); font-weight:700; }
.꿈종목 { width:100%; display:flex; align-items:center; text-align:left; gap:8px; padding:12px 0; border-bottom:1px solid var(--줄); transition:background .15s; }
.꿈종목:hover { background:var(--판2); }.꿈종목:last-child { border:0; }
.꿈종목이름 { min-width:0; flex:1; }.꿈종목이름 b { display:block; font-size: calc((13px) * var(--글배, 1)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.꿈종목이름 small { display:block; font-size: calc((11px) * var(--글배, 1)); color:var(--글연함); margin-top:4px; }.꿈종목값 { display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size: calc((11px) * var(--글배, 1)); }.꿈종목값>b { font-size: calc((12px) * var(--글배, 1)); white-space:nowrap; }
.꿈보라버튼 { display:block; width:100%; padding:12px 16px; border-radius:16px; background:linear-gradient(115deg,#a478e9,#7847cf); color:#fff; font-weight:700; font-size: calc((13px) * var(--글배, 1)); box-shadow:0 5px 14px #7847cf24; }
.꿈보조버튼 { width:100%; padding:12px; border-radius:16px; color:var(--강조); background:var(--강조연함); margin-top:16px; font-size: calc((12px) * var(--글배, 1)); font-weight:600; }
.꿈홈 { max-width:1400px; margin:auto; }.꿈인사 { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin:0 0 24px; gap:8px; }
.꿈인사윗 { display:flex; justify-content:space-between; align-items:center; width:100%; gap:8px; }
.꿈인사글 { min-width:0; }
.꿈브랜드 { display:flex; align-items:center; gap:8px; font-weight:800; color:var(--강조); font-size: calc((18px) * var(--글배, 1)); letter-spacing:-.7px; }
.꿈상표글 { font-style:normal; }
.꿈인사 h1 { flex:1 1 100%; font-size: calc((13px) * var(--글배, 1)); font-weight:500; margin:0; color:var(--글연함); }
.꿈원형 { width:44px; height:44px; border-radius:50%; background:var(--판); padding:12px; border:1px solid var(--줄); }
.꿈원형 svg { width:100%; }
.꿈자산 { position:relative; display:flex; justify-content:space-between; align-items:center; padding:32px 32px; border:1px solid #e4d6f4; border-radius:24px; background:radial-gradient(ellipse at 92% 100%,#f6dff0,transparent 60%),linear-gradient(120deg,#e9ddfb,#f6effd); color:#372453; overflow:hidden; }
.꿈자산글 { position:relative; z-index:1; }.꿈자산잠김 { word-break:keep-all; }.꿈배지 { display:inline-block; background:#fff; color:#5B2FA8; border-radius:999px; padding:4px 8px; font-size: calc((11px) * var(--글배, 1)); font-weight:700; }.꿈자산 p { margin:16px 0 4px; font-size: calc((13px) * var(--글배, 1)); }.꿈자산 h2 { font-size: calc((32px) * var(--글배, 1)); letter-spacing:-1.6px; margin:0 0 12px; font-weight:800; }.꿈손익 { display:flex; gap:8px; align-items:center; font-size: calc((12px) * var(--글배, 1)); }.꿈손익>span:first-child { color:#736185; }.꿈자산보기 { font-size: calc((12px) * var(--글배, 1)); font-weight:600; padding:0; }
.꿈자산아래 { margin-top:24px; display:flex; align-items:center; gap:16px; white-space:nowrap; }
@media (max-width:430px) {
  .꿈자산아래 { gap:12px; }
  .꿈자산 > .꿈아이콘 { width:132px; height:132px; }
}
.꿈자산아래 > button { margin-top:0; }
.꿈자산충전 { font-size: calc((12px) * var(--글배, 1)); font-weight:600; padding:0; background:none; border:0;
              color:inherit; opacity:.72; }
.꿈자산충전:active { opacity:1; }.꿈자산보기 span { margin-left:12px; }.꿈자산>.꿈아이콘 { transform:rotate(-9deg); }
.꿈바로가기 { display:flex; margin:16px 0 24px; padding:12px 8px; background:var(--판); border:1px solid var(--줄); border-radius:24px; }.꿈바로가기 button { flex:1; font-size: calc((12px) * var(--글배, 1)); padding:4px 16px; border-right:1px solid var(--줄); display:flex; justify-content:space-between; gap:12px; }.꿈바로가기 button:last-child { border:0; }.꿈바로가기 span { color:var(--강조); }
.꿈홈아래 { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; margin:24px 0; }.꿈사람들 { text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }.꿈사람들 h2 { font-size: calc((15px) * var(--글배, 1)); margin:12px 0 0; }.꿈사람들 p { color:var(--글연함); font-size: calc((12px) * var(--글배, 1)); line-height:1.8; margin:12px 0 16px; }.꿈사람링크 { display:flex; width:100%; margin-top:12px; justify-content:space-between; font-size: calc((11px) * var(--글배, 1)); color:var(--글연함); }.꿈풋 { display:flex; justify-content:center; gap:16px; padding:24px 0 8px; color:var(--글연함); font-size: calc((11px) * var(--글배, 1)); }
.꿈데스크톱 { display:grid; grid-template-rows:76px 48px minmax(0,1fr) 36px; height:100dvh; background:radial-gradient(ellipse at 90% 0,#f6eafa88,transparent 60%),var(--바탕); }
.꿈데스크톱 .윗줄 { grid-area:auto; padding:0 24px; gap:24px; background:transparent; border:0; }.꿈데스크톱 .윗상표 { font-size: calc((24px) * var(--글배, 1)); letter-spacing:-.8px; }.꿈윗길 { display:flex; align-self:stretch; align-items:stretch; gap:24px; flex:none; }.꿈윗길 button,.꿈윗길 a { font-size: calc((13px) * var(--글배, 1)); position:relative; white-space:nowrap; }.꿈윗길 button.선택,.꿈윗길 a.선택 { color:var(--강조); font-weight:700; }.꿈윗길 button.선택:after,.꿈윗길 a.선택:after { content:""; position:absolute; bottom:15px; left:0; right:0; height:3px; background:var(--강조); border-radius:4px; }
.꿈데스크톱 .윗찾기 { background:var(--판); border:1px solid var(--줄); width:clamp(200px,23vw,390px); padding:12px 16px; margin-left:16px; }.꿈데스크톱 .윗장 { gap:8px; }.꿈데스크톱 .윗돈 { display:none; }.꿈데스크톱 .윗계좌 { margin-left:auto; max-width:240px; overflow:auto; }.꿈데스크톱 .윗계좌 button { white-space:nowrap; background:var(--판); padding:8px 16px; }.꿈데스크톱 .윗계좌 button.켜짐 { background:var(--강조연함); color:var(--강조); }
.꿈작업공간 { display:grid; grid-template-columns:280px minmax(0,1fr) 312px; gap:16px; padding:16px 24px 0; min-height:0; }.꿈탐색 { display:flex; flex-direction:column; padding:16px 16px 12px; min-height:0; }.꿈탐색 .꿈제목 { margin-bottom:8px; }.꿈탐색 .꿈제목>button { font-size: calc((24px) * var(--글배, 1)); }.꿈목록 { min-height:0; overflow-y:auto; flex:1; scrollbar-width:thin; }.꿈탐색끝 { display:flex; flex-direction:column; gap:8px; padding-top:12px; }.꿈탐색끝 button { display:flex; align-items:center; gap:8px; font-size: calc((12px) * var(--글배, 1)); padding:8px 12px; background:var(--판2); border-radius:12px; color:var(--강조); }
/* 차트 높이: 1440x900 에서 .판왼 이 342px 인데 속엣것 합이 369px 이라 27px 을 잘라내고
   있었다. 차트는 바닥값 170px 에 눌려 svg 가 146px — 토스 데스크톱의 절반도 안 됐다
   (사장님 지적 2026-09-15). 셋째 줄 상한(210→170)과 판왼 안쪽 틈(14→10)에서 높이를 내고
   둘째 줄 바닥 450 — 실측으로 골랐다(1440x900, 2026-09-15):
     436 잘림이 사라지는 지점(svg 206) · 450 svg 219 · 470 svg 239
   436 밑으론 맨 아래 「내 보유 수량」이 잘린다. 잘라내는 건 굴리는 것보다 나쁘다 —
   잘린 건 있는 줄도 모르니까. 900px 에서 39px 굴러가고, 940px 부턴 안 굴러간다.
   창이 크면 1fr 이 더 먹어 저절로 커진다.
   ※ .작업시세상태(시장 상태·수신 시각·체결 고지·가격 알림)는 **통째로 걷었다**(사장님 2026-09-15).
      격자에 자리 없이 떠서 넷째 줄 33px 을 먹고 좌우도 어긋나 있었다. 그 33px 이 차트로 돌아갔다.
      고지는 도움말에 있고(「화면 수신 시각은 거래소의 실제 체결 시각과 다릅니다」),
      가격 알림은 내 자산 → 투자 기록에서 연다. */
.꿈거래 { display:grid; grid-template-columns:minmax(0,1fr) 320px; grid-template-rows:92px minmax(450px,1fr) minmax(140px,170px); gap:12px 16px; min-height:0; min-width:0; overflow:auto; padding-bottom:4px; }
.꿈거래 .복판,.꿈거래 .판몸 { display:contents; }.꿈거래 .판머리 { grid-column:1; grid-row:1; background:var(--판); border-radius:24px; padding:16px 24px; gap:12px; }.꿈거래 .판이름 h1 { font-size: calc((18px) * var(--글배, 1)); }.꿈거래 .판값 { display:flex; flex-direction:column; gap:4px; align-items:flex-end; }.꿈거래 .판값 b { font-size: calc((24px) * var(--글배, 1)); }.꿈거래 .판자세히 { font-size: calc((11px) * var(--글배, 1)); padding:8px 12px; }
.꿈거래 .판왼 { grid-column:1; grid-row:2; background:var(--판); padding:16px 24px 12px; border:1px solid var(--줄); border-radius:24px; gap:8px; overflow:hidden; }.꿈거래 .판차트 { flex:1; min-height:230px; }.꿈거래 .판차트>div { width:100%; }.꿈거래 .판기간 { order:-1; }.꿈거래 .판띠 { background:var(--판2); padding:8px; gap:8px; font-size: calc((11px) * var(--글배, 1)); }.꿈거래 .판띠돈 { display:none; }.꿈거래 .판띠낱 { font-size: calc((11px) * var(--글배, 1)); }.꿈거래 .판띠낱 b { font-size: calc((11px) * var(--글배, 1)); }
.꿈거래 .판사기 { grid-column:2; grid-row:1/4; border:1px solid var(--줄); padding:24px 16px; background:var(--판); border-radius:24px; overflow:auto; }.꿈주문제목 { display:flex; align-items:center; justify-content:space-between; font-size: calc((18px) * var(--글배, 1)); margin:0 0 24px; }.꿈주문제목 span { font-size: calc((11px) * var(--글배, 1)); font-weight:500; background:var(--강조연함); color:var(--강조); padding:4px 8px; border-radius:999px; }
/* 가격 알림 — 「모의투자」 딱지가 있던 자리. 딱지처럼 보이되 누를 수 있다는 게 보여야 한다. */
.꿈알림단추 { flex:none; font-size: calc((11px) * var(--글배, 1)); font-weight:600; color:var(--강조); background:var(--강조연함);
              border-radius:999px; padding:8px 12px; white-space:nowrap; min-height:32px; }
.꿈알림단추:hover { background:var(--강조); color:var(--강조위글); }
.꿈알림단추:focus-visible { outline:3px solid #aa83ed; outline-offset:2px; }.꿈거래 .판편 button.켜짐 { background:var(--강조); color:var(--판); }.꿈거래 .판주문속 { padding:0; margin:0; flex:1; overflow:auto; }.꿈거래 .판주문속 .큰돈 { font-size: calc((24px) * var(--글배, 1)); }.꿈거래 .판주문속 .붙은단추 { position:static; box-shadow:none; }.꿈거래 .판주문속 .뒤로단추 { display:none; }
.꿈보유 { grid-column:1; grid-row:3; padding:16px 16px; overflow:auto; }.꿈보유 .꿈제목 { margin-bottom:8px; }.꿈보유 .꿈제목 h2 { font-size: calc((13px) * var(--글배, 1)); }.꿈표스크롤 { overflow:auto; }.꿈표 { width:100%; border-collapse:collapse; font-size: calc((12px) * var(--글배, 1)); white-space:nowrap; }.꿈표 th { background:var(--판2); padding:8px 12px; color:var(--글연함); font-size: calc((11px) * var(--글배, 1)); font-weight:500; text-align:right; }.꿈표 td { padding:12px; border-bottom:1px solid var(--줄); text-align:right; }.꿈표 td:first-child,.꿈표 th:first-child { text-align:left; }.꿈표 td:last-child b { display:block; margin-bottom:4px; }.꿈표 td button { font-weight:600; padding:0; }.꿈표 th:first-child { border-radius:8px 0 0 8px; }.꿈표 th:last-child { border-radius:0 8px 8px 0; }.꿈보유 .꿈상태 { padding:16px 0; }
.꿈페이지 { min-width:0; min-height:0; overflow-y:auto; padding:24px; border-radius:24px; background:var(--판); border:1px solid var(--줄); }.꿈페이지.홈페이지 { background:transparent; border:0; padding:8px 4px; }.꿈페이지 .폰만 { display:block; }.꿈페이지 .계좌칩줄.폰만 { display:flex; }
.꿈커뮤니티 { display:flex; flex-direction:column; min-height:0; overflow:hidden; background:var(--판); border:1px solid var(--줄); border-radius:24px; }.꿈커뮤니티머리 { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 12px; }.꿈커뮤니티머리>button { font-size: calc((24px) * var(--글배, 1)); width:30px; height:30px; border-radius:50%; background:var(--판2); }.꿈사람탭 { display:flex; gap:8px; padding:0 16px 12px; }.꿈사람탭 button { flex:1; font-size: calc((12px) * var(--글배, 1)); background:var(--판2); border-radius:12px; padding:8px 4px; color:var(--강조); }.꿈커뮤니티 .말칸 { grid-area:auto; min-height:0; flex:1; border:0; background:transparent; }.꿈커뮤니티 .말머리 { padding-top:4px; }.꿈커뮤니티 .말머리 h2 { font-size: calc((13px) * var(--글배, 1)); }.꿈커뮤니티끝 { display:flex; justify-content:space-around; padding:12px; border-top:1px solid var(--줄); color:var(--강조); font-size: calc((11px) * var(--글배, 1)); }
.이야기접힘 .꿈작업공간 { grid-template-columns:280px minmax(0,1fr) 48px; }.이야기접힘 .꿈커뮤니티머리 { padding:12px 8px; }.이야기접힘 .꿈커뮤니티머리 h2 { display:none; }
.꿈데스크풋 { display:flex; align-items:center; gap:24px; padding:0 24px; font-size: calc((11px) * var(--글배, 1)); color:var(--글연함); }.꿈데스크풋>span:first-child { font-weight:700; }.꿈데스크풋>span:first-child>span { margin-left:12px; font-weight:400; }.꿈데스크풋>div { margin-left:auto; display:flex; gap:12px; }
.꿈데스크풋>div a { color:inherit; text-decoration:none; cursor:pointer; }
.꿈데스크풋>div a:hover { text-decoration:underline; }
.꿈데스크톱 .고르개 { border-radius:16px; }.꿈데스크톱 .고르개 button { border-radius:12px; }.꿈데스크톱 .칩 { border-radius:12px; }
[data-빛="dark"] .꿈데스크톱 { background:var(--바탕); }[data-빛="dark"] .꿈자산 { background:linear-gradient(115deg,#45305e,#4b3154); color:#f6efff; border-color:#594168; }[data-빛="dark"] .꿈손익>span:first-child { color:#d0bddf; }
@media (min-width:1100px) and (max-width:1599px) {
 .꿈작업공간,.이야기접힘 .꿈작업공간 { grid-template-columns:230px minmax(0,1fr) 48px; gap:12px; padding:12px 16px 0; }
 .꿈데스크톱:not(.이야기접힘) .꿈커뮤니티 { position:absolute; right:18px; top:138px; bottom:36px; width:300px; z-index:40; box-shadow:0 12px 50px #33214c30; }
 .꿈데스크톱.이야기접힘 .꿈커뮤니티머리 { padding:12px 8px; }

 .꿈거래 { grid-template-columns:minmax(0,1fr) 285px; }.꿈데스크톱 .윗장 { display:none; }.꿈데스크톱 .윗줄 { gap:16px; }.꿈윗길 { gap:16px; }.꿈데스크톱 .윗찾기 { margin-left:auto; }.꿈데스크톱 .윗계좌 { max-width:150px; }.꿈거래 .판머리 { padding:16px; flex-wrap:wrap; gap:8px; }.꿈거래 .판자세히 { display:none; }.꿈거래 .판값 b { font-size: calc((24px) * var(--글배, 1)); }.꿈거래 .판이름 { max-width:100px; }.꿈거래 .판띠낱 { display:none; }
}
@media (max-width:1099px) {
 .판 { max-width:none; width:100%; background:var(--바탕); }.속 { padding:24px 16px 24px; }.탭바 { margin:0 12px 8px; border:1px solid var(--줄); border-radius:24px; padding:12px 8px calc(12px + env(safe-area-inset-bottom,0px)); box-shadow:0 4px 24px #7847cf0a; }.탭바 button { font-size: calc((11px) * var(--글배, 1)); min-height:44px; gap:4px; }.탭바 button.켜짐:before { content:""; position:absolute; width:46px; height:30px; top:-3px; border-radius:16px; background:var(--강조연함); z-index:-1; }.탭바 button { isolation:isolate; }
 .꿈인사 { margin-bottom:24px; }.꿈브랜드 { font-size: calc((18px) * var(--글배, 1)); }.꿈인사 h1 { font-size: calc((12px) * var(--글배, 1)); }.꿈자산 { padding:24px; min-height:215px; }.꿈자산 h2 { font-size: calc((32px) * var(--글배, 1)); }.꿈자산>.꿈아이콘 { width:116px; height:116px; margin-right:-16px; }.꿈손익 { font-size: calc((11px) * var(--글배, 1)); gap:4px; }.꿈자산보기 { margin-top:16px; }.꿈배지 { font-size: calc((11px) * var(--글배, 1)); }.꿈바로가기 { margin:12px 0 24px; padding:12px 4px; }.꿈바로가기 button { padding:4px 12px; font-size: calc((11px) * var(--글배, 1)); gap:4px; }.꿈카드 { border-radius:24px; padding:16px; }.꿈제목 h2 { font-size: calc((15px) * var(--글배, 1)); }.꿈제목>span { display:none; }.꿈분류 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.꿈분류 button { padding:12px 4px; gap:8px; font-size: calc((12px) * var(--글배, 1)); }.꿈홈아래 { grid-template-columns:1fr; gap:16px; margin-top:16px; }.꿈사람들 { position:relative; text-align:left; align-items:flex-start; padding-left:16px; }.꿈사람들>.꿈아이콘 { position:absolute; right:12px; top:14px; width:64px; height:64px; }.꿈사람들 h2 { max-width:230px; margin:0; }.꿈사람들 p { max-width:230px; font-size: calc((11px) * var(--글배, 1)); margin:8px 0 16px; }.꿈시장 { padding:12px; gap:16px; border:1px solid var(--줄); border-radius:16px; }.꿈시장끝 { display:none; }.꿈시장 b { font-size: calc((12px) * var(--글배, 1)); }.꿈시장>div:not(.꿈상태) { padding-right:16px; gap:8px; }.꿈풋 { font-size: calc((11px) * var(--글배, 1)); }.큰돈 { letter-spacing:-1px; }.칸 { box-shadow:none; border:1px solid var(--줄); }
}
@media (min-width:760px) and (max-width:1099px) {
 .속 { padding:24px 28px 32px; max-width:920px; margin:0 auto; width:100%; box-sizing:border-box; }
 .꿈홈아래 { grid-template-columns:1fr 1fr; }
 .꿈분류 { grid-template-columns:repeat(5,minmax(0,1fr)); }
 .꿈분류[data-cols="5"] { grid-template-columns:repeat(5,minmax(0,1fr)); }
 .꿈분류[data-cols="5"] > button { grid-column:span 1; }
 .꿈분류[data-cols="6"] { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (max-width:374px) { .속 { padding:16px 12px; }.꿈자산 { padding:16px; }.꿈자산 h2 { font-size: calc((24px) * var(--글배, 1)); }.꿈자산>.꿈아이콘 { width:86px; height:86px; opacity:.8; }.꿈손익 { flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { .꿈분류 button { transition:none; }.꿈분류 button:hover { transform:none; } }

.꿈주문요약 { flex:none; margin-top:24px; padding-top:16px; border-top:1px solid var(--줄); }
.꿈주문요약 .꿈제목 h2 { font-size: calc((13px) * var(--글배, 1)); }.꿈주문요약 .꿈상태 { padding:24px 4px; }.꿈자산둘 .꿈주문요약 { margin-top:0; padding-top:0; border-top:0; }
.꿈주문행 { display:flex; justify-content:space-between; gap:8px; width:100%; padding:12px 0; font-size: calc((11px) * var(--글배, 1)); border-bottom:1px solid var(--줄); }.꿈주문행 span { color:var(--글연함); }
.꿈거래 .판주문속 { flex:0 0 auto; overflow:visible; }
.꿈거래 .판사기 { display:block; }

/* 기능 점검: 중복 내비게이션 제거와 자산·기록 전용 화면 */
.꿈데스크톱.단일화면 .꿈작업공간 { grid-template-columns:280px minmax(0,1fr); }
.꿈데스크톱.단일화면 .꿈페이지 { width:100%; max-width:1280px; margin:0 auto; }
.꿈하트 { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:12px; color:var(--글흐림); }
.꿈하트 svg { width:18px; height:18px; }.꿈하트.선택 { color:var(--강조); background:var(--강조연함); }.꿈하트:disabled { opacity:.45; }
.꿈종목행 { display:flex; align-items:center; min-width:0; border-bottom:1px solid var(--줄); }.꿈종목행 .꿈종목 { flex:1; min-width:0; border-bottom:0; padding-right:4px; }.꿈종목이름 { min-width:0; }.꿈종목값 { flex:none; }
.꿈목록정렬 { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size: calc((11px) * var(--글배, 1)); padding:12px 0; color:var(--글흐림); }.꿈목록정렬 select,.꿈계좌선택 select { background:var(--바탕); color:var(--글); border:1px solid var(--줄); border-radius:8px; padding:8px; }
.꿈거래 .판자세히 { display:block; flex:none; }.꿈자산페이지 { display:grid; gap:24px; }
.꿈자산왼,.꿈자산오른 { display:contents; }.꿈자산페이지 h1,.꿈기록페이지 h1 { font-size: calc((24px) * var(--글배, 1)); }.꿈계좌선택 { display:flex; align-items:center; gap:16px; }.꿈현금들 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.꿈현금들 h2 { font-size: calc((15px) * var(--글배, 1)); margin-bottom:12px; }.꿈현금들 b { font-size: calc((24px) * var(--글배, 1)); }.꿈현금들 p { margin:8px 0; color:var(--글흐림); font-size: calc((12px) * var(--글배, 1)); }.꿈비중띠 { display:flex; height:12px; border-radius:8px; overflow:hidden; margin:16px 0; }.꿈비중목록 { display:grid; gap:12px; }.꿈비중목록>div { display:flex; gap:16px; font-size: calc((13px) * var(--글배, 1)); }.꿈비중목록 b { margin-left:auto; }.꿈비중목록>div>span:last-child { width:60px; text-align:right; color:var(--글흐림); }.꿈기록메뉴 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.꿈기록메뉴 button { display:flex; justify-content:space-between; padding:16px; background:var(--강조연함); border-radius:var(--단추둥금); font-weight:var(--단추굵기); }.꿈기록페이지>.꿈갈피 { margin:16px 0; }.꿈기록들 { display:grid; gap:16px; margin-top:16px; }.꿈기록카드.선택 { outline:2px solid var(--강조); }.꿈기록카드 dl { display:grid; gap:12px; font-size: calc((13px) * var(--글배, 1)); }.꿈기록카드 dl>div { display:flex; justify-content:space-between; gap:16px; }.꿈기록카드 dt { color:var(--글흐림); }.꿈기록카드 dd { margin:0; }.꿈취소확인 { padding:16px; background:var(--강조연함); border-radius:16px; margin-top:16px; }.꿈취소확인 button { margin:12px 16px 0 0; }.꿈투자 { margin-top:24px; }
@media(min-width:1100px){.꿈계좌선택>label {display:none;}}
@media(max-width:600px){.꿈현금들 {grid-template-columns:1fr;}.꿈기록메뉴 {grid-template-columns:1fr 1fr;}.꿈기록메뉴 button {padding:12px;font-size: calc((12px) * var(--글배, 1));}.꿈비중목록>div {gap:8px;}.꿈자산페이지 .꿈자산>.꿈아이콘 {width:85px;height:85px;}.꿈자산페이지 .꿈자산 h2 {font-size: calc((24px) * var(--글배, 1));}.꿈자산페이지 .꿈손익 {flex-wrap:wrap;}}
.꿈확인가림 { position:fixed; inset:0; z-index:1000; background:#251b4055; backdrop-filter:blur(5px); display:grid; place-items:center; padding:16px; }
.꿈주문확인 { width:min(100%,440px); background:var(--바탕); border:1px solid var(--줄); border-radius:24px; padding:24px; box-shadow:0 24px 80px #29133d33; }.꿈주문확인 h2 {font-size: calc((24px) * var(--글배, 1));margin:16px 0 24px;}.꿈주문확인 dl {display:grid;gap:16px;}.꿈주문확인 dl>div {display:flex;justify-content:space-between;gap:16px;font-size: calc((13px) * var(--글배, 1));}.꿈주문확인 dd {margin:0;font-weight:650;}.꿈주문확인 dt,.꿈주문확인 p {color:var(--글흐림);}.꿈주문확인 p {font-size: calc((12px) * var(--글배, 1));line-height:1.7;margin:24px 0;}.꿈확인동작 {display:grid;grid-template-columns:1fr 1.5fr;gap:12px;}.꿈확인동작 button {min-height:48px;border-radius:16px;}.꿈거래 .판사기 .알약단추 {background:var(--강조);color:var(--강조위글);}.꿈거래 .판사기 .알약단추:disabled {opacity:.4;}.꿈거래 .셈줄 {font-size: calc((12px) * var(--글배, 1));gap:12px;}.꿈거래 .셈줄>span:last-child {white-space:nowrap;}.꿈거래 .셈줄.막 {font-size: calc((13px) * var(--글배, 1));}
/* 상세 서비스도 동일한 카드·입력·버튼 체계로 구성한다. */
.꿈페이지:not(.홈페이지) { padding:24px; }.꿈페이지:not(.홈페이지)>.머리줄 {margin-bottom:24px;}.꿈페이지 .제목 {font-size: calc((24px) * var(--글배, 1));letter-spacing:-.6px;}.꿈페이지 .칸 {border-radius:24px;padding:24px;background:var(--바탕);border:1px solid var(--줄);}.꿈페이지 .줄 {padding:16px 12px;border-bottom:1px solid var(--줄);border-radius:12px;}.꿈페이지 .줄:hover {background:var(--강조연함);}.꿈페이지 .칠칸 {padding:24px;border:1px solid var(--줄);border-radius:24px;background:var(--강조연함);margin:24px 0;}.꿈페이지 .칠칸 b {font-size: calc((32px) * var(--글배, 1));}.꿈페이지 .고르개 {padding:4px;border-radius:16px;background:var(--강조연함);}.꿈페이지 .고르개 button.켜짐 {background:var(--바탕);color:var(--강조);box-shadow:0 3px 10px #7847cf0d;}.꿈페이지 .빈말 {padding:48px 24px;border-radius:24px;background:var(--강조연함);line-height:1.8;}.꿈페이지 .뒤로단추 {margin-bottom:12px;}.꿈페이지 .셈줄 {padding:12px 0;}.꿈페이지 .찾는칸 {border-radius:16px;}
@media(max-width:1099px){.속.꿈페이지 {padding:24px 16px 24px;}.속.꿈페이지 .제목 {font-size: calc((24px) * var(--글배, 1));}.속.꿈페이지 .칸 {padding:16px;}.속.꿈페이지 .칠칸 b {font-size: calc((32px) * var(--글배, 1));}}

/* App-owned menus and a chat panel that survives route changes. */
.꿈선택 {position:relative;flex:none;z-index:5;}
.꿈선택단추 {display:flex;align-items:center;gap:8px;min-height:36px;padding:8px 12px;background:var(--판2);border:1px solid var(--줄);border-radius:12px;color:var(--글);font-size: calc((12px) * var(--글배, 1));}
.꿈선택단추 svg {width:14px;height:14px;transition:transform .15s;}.꿈선택단추[aria-expanded="true"] svg {transform:rotate(180deg);}
.꿈선택단추:focus-visible {outline:2px solid var(--강조);outline-offset:2px;}
.꿈선택목록 {position:absolute;top:calc(100% + 8px);right:0;min-width:150px;padding:4px;background:var(--판);border:1px solid var(--줄);border-radius:16px;box-shadow:0 12px 32px #30204024;z-index:100;}
.꿈선택목록 button {display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px 12px;border-radius:8px;text-align:left;font-size: calc((12px) * var(--글배, 1));gap:16px;min-height:38px;}
.꿈선택목록 button:hover,.꿈선택목록 button:focus-visible {background:var(--판2);outline:0;}.꿈선택목록 button[aria-selected="true"] {background:var(--강조연함);color:var(--강조);font-weight:700;}
.꿈채팅내용 {display:flex;flex-direction:column;flex:1;min-height:0;}.꿈채팅내용[hidden] {display:none;}
.꿈데스크톱.단일화면 .꿈작업공간 {grid-template-columns:280px minmax(0,1fr) 312px;}.꿈데스크톱.단일화면.이야기접힘 .꿈작업공간 {grid-template-columns:280px minmax(0,1fr) 48px;}
.꿈커뮤니티 .말칸 {overflow:hidden;}.꿈커뮤니티 .말머리 {position:relative;z-index:2;background:var(--판);padding:8px 12px 12px;min-width:0;}
.꿈커뮤니티 .말범위 {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;align-items:center;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);}
.꿈커뮤니티 .말범위::-webkit-scrollbar {display:none;}.꿈커뮤니티 .말방 {border-radius:12px;}.꿈커뮤니티 .말범위>button {border-radius:12px;}.꿈커뮤니티 .말방이름 {max-width:120px;overflow:hidden;text-overflow:ellipsis;}
.꿈커뮤니티 .말찾기 input {height:40px;background:var(--판2);border-radius:12px;padding:8px 12px;font-size: calc((12px) * var(--글배, 1));border:1px solid var(--줄);}.꿈커뮤니티 .말찾기 input:focus {outline:none;border-color:var(--강조);box-shadow:0 0 0 2px var(--강조연함);}
.꿈커뮤니티 .말찾음 {position:relative;inset:auto;margin-top:8px;max-height:240px;overflow-y:auto;background:var(--판);border:1px solid var(--줄);border-radius:16px;box-shadow:none;z-index:auto;padding:4px;}
.꿈커뮤니티 .말찾음 button {min-height:40px;padding:8px;border-radius:8px;gap:8px;}.꿈커뮤니티 .말찾음 button:hover {background:var(--강조연함);}.꿈커뮤니티 .말줄기 {position:relative;z-index:0;isolation:isolate;}.꿈커뮤니티 .말알머리 {flex-wrap:wrap;}.꿈커뮤니티 .말때 {margin-left:auto;}
@media(min-width:1100px) and (max-width:1599px){.꿈데스크톱.단일화면 .꿈작업공간 {grid-template-columns:260px minmax(0,1fr) 48px;}}

.꿈보유부동산>.숫자{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--글연함);margin:16px 0}.꿈보유부동산>.숫자 b{color:var(--글)}.꿈보유부동산 h2 span{font-size: calc((13px) * var(--글배, 1));color:var(--글연함);margin-left:12px}.꿈부동산줄{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:16px 0;border-top:1px solid var(--줄)}.꿈부동산줄>span{display:flex;flex-direction:column;gap:4px}.꿈부동산줄 small{color:var(--글연함);font-size: calc((12px) * var(--글배, 1))}.꿈집평가{margin-left:auto;text-align:right}

.꿈커뮤니티안내{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 0;margin-bottom:12px;color:var(--글연함);font-size: calc((12px) * var(--글배, 1))}.꿈커뮤니티안내 button{color:var(--강조);font-weight:600}
/* Workspace: shared forms, forum, notifications and learning tools. */
.작업작성{display:flex;flex-direction:column;gap:12px;background:var(--판2);padding:16px;border:1px solid var(--줄);border-radius:24px;margin:16px 0}.작업작성 h2{font-size: calc((15px) * var(--글배, 1));margin:0}.작업작성 p{margin:0;font-size: calc((13px) * var(--글배, 1))}.작업작성 label{display:flex;flex-direction:column;gap:8px}.작업작성 small,.작업작성 label{font-size: calc((12px) * var(--글배, 1));color:var(--글연함)}.작업작성 input,.작업작성 textarea,.작업필터 input,.작업종목검색>input{background:var(--판);border:1px solid var(--줄);border-radius:12px;padding:12px;color:var(--글);font:inherit;width:100%;box-sizing:border-box}.작업작성 textarea{resize:vertical;min-height:72px}.작업작성 input:focus,.작업작성 textarea:focus,.작업종목검색>input:focus{outline:2px solid #bda2eb;outline-offset:2px}.작업필터{display:flex;gap:12px;align-items:flex-start;margin:16px 0;flex-wrap:wrap}.작업종목검색{flex:1;min-width:160px}.작업검색결과{background:var(--판);padding:4px;border:1px solid var(--줄);border-radius:12px;max-height:240px;overflow:auto}.작업검색결과 button{display:flex;justify-content:space-between;text-align:left;width:100%;padding:8px;gap:12px}.작업검색결과 small{color:var(--글연함)}.작업태그{display:inline-flex;gap:12px;background:var(--강조연함);border-radius:12px;padding:12px;color:var(--강조)}.작업게시글{border-bottom:1px solid var(--줄);padding:24px 0}.작업글본문{display:block;width:100%;text-align:left}.작업글본문 h3{font-size: calc((15px) * var(--글배, 1));margin:12px 0}.작업글본문 p{line-height:1.65;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:pre-wrap;color:var(--글연함);margin:0 0 16px}.작업메타{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size: calc((12px) * var(--글배, 1));color:var(--글연함)}.작업메타 time,.작업메타 button{margin-left:auto}.작업메타 button{color:var(--강조)}.작업알림단추{display:flex;align-items:center;gap:4px;border-radius:16px;padding:8px 12px;background:var(--판2);position:relative;white-space:nowrap}.작업알림단추 b{background:var(--강조);color:var(--강조위글);border-radius:12px;padding:4px 4px;font-size: calc((11px) * var(--글배, 1))}.작업알림줄{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;border-bottom:1px solid var(--줄);padding:16px 4px}.작업알림줄>span:first-child{display:flex;flex-direction:column;gap:8px}.작업알림줄 small{font-size: calc((12px) * var(--글배, 1));color:var(--글연함)}.작업알림줄.읽음{opacity:.65}.작업알림줄 i{width:6px;height:6px;border-radius:50%;background:var(--강조)}.작업자산차트{width:100%;height:180px;margin:16px 0}.작업소식{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-bottom:1px solid var(--줄)}.작업소식 small{font-size: calc((11px) * var(--글배, 1));color:var(--글연함)}.작업소식 a{font-size: calc((13px) * var(--글배, 1));line-height:1.55}.작업소식 button{align-self:flex-start;color:var(--강조);font-size: calc((12px) * var(--글배, 1))}progress{width:100%;height:12px;accent-color:var(--강조)}.작업시세상태{font-size: calc((11px) * var(--글배, 1));color:var(--글연함);display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.작업정보{min-height:340px;padding:16px}.작업정보 dl>div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--줄)}.작업고급 summary{cursor:pointer;color:var(--강조);padding:12px 0;font-size: calc((13px) * var(--글배, 1))}
@media(max-width:600px){.작업작성{padding:12px}.작업필터{flex-direction:column}.작업종목검색{width:100%}.작업게시글{padding:16px 0}.작업알림단추{font-size: calc((12px) * var(--글배, 1))}.작업메타{gap:8px}.작업자산차트{height:150px}}
.작업채팅상태{font-size: calc((11px) * var(--글배, 1));color:var(--글연함);margin:4px 0 8px}.작업모바일채팅버튼{position:fixed;right:18px;bottom:calc(112px + env(safe-area-inset-bottom));z-index:45;background:var(--강조);color:var(--강조위글);border-radius:24px;padding:8px 16px;font-size: calc((13px) * var(--글배, 1));min-height:44px;box-shadow:0 4px 18px #7847cf33}.작업모바일채팅{position:fixed!important;inset:70px 12px calc(125px + env(safe-area-inset-bottom));width:auto!important;height:auto!important;z-index:60;padding:16px;background:var(--판);border:1px solid var(--줄);border-radius:24px;box-shadow:0 18px 70px #2b174c33;display:flex;flex-direction:column}.작업모바일채팅[hidden]{display:none!important}.작업모바일채팅 .말칸{flex:1;min-height:0}.작업모바일채팅 .꿈제목{flex-shrink:0}
.꿈제목>.꿈보라버튼{width:auto;flex:0 0 auto;color:white;padding:12px 24px}.작업게시판>.꿈제목 h2{white-space:nowrap}.작업게시판 .작업작성>.꿈보라버튼{color:white}.작업게시판 .꿈제목{gap:16px}.작업게시글 h3{overflow-wrap:anywhere}
.영예배지{display:inline-flex;width:48px;height:56px;flex:none;color:#efbb51;filter:drop-shadow(0 4px 5px #9c6ee433);vertical-align:middle}.영예배지 svg{width:100%;height:100%}.영예배지.등급2{color:#b8c5df}.영예배지.등급3{color:#d79467}.영예배지.fire{width:38px;height:46px}.랭킹제목{display:flex;align-items:center;gap:12px}.랭킹초대{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:16px 24px;margin:24px 0;border:1px solid #d6baff;border-radius:24px;background:linear-gradient(115deg,#eee0ff,#faf5ff 70%,#fff0ce);box-shadow:0 6px 22px #7847cf12;color:var(--글)}.랭킹초대 b{display:block;font-size: calc((18px) * var(--글배, 1))}.랭킹초대 small{display:block;color:var(--글흐림);margin-top:4px}.랭킹초대>span:last-child{margin-left:auto;color:var(--강조);font-weight:700;white-space:nowrap}.주목카드{background:linear-gradient(130deg,#f2e8ff,#fff6ed);border:1px solid #e6d4fc;border-radius:24px;padding:16px;margin:24px 0}.주목카드 h2{display:flex;align-items:center;gap:8px}.주목글{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:12px 8px;border-top:1px solid #dbc9ee}.주목글>span:nth-child(2){flex:1;min-width:0}.주목글 b{display:block;overflow-wrap:anywhere}.주목글 small{display:block;margin-top:4px;color:var(--글흐림)}@media(max-width:600px){.랭킹초대{padding:16px;gap:8px;flex-wrap:wrap}.랭킹초대 b{font-size: calc((18px) * var(--글배, 1))}.랭킹초대 small{font-size: calc((12px) * var(--글배, 1))}.주목카드{padding:16px}.주목카드 h2{font-size: calc((15px) * var(--글배, 1))}}@media(prefers-reduced-motion:no-preference){.영예배지 .반짝{animation:영예반짝 3s ease-in-out infinite}@keyframes 영예반짝{50%{opacity:.35}}}
.영예배지{position:relative;width:56px;height:56px}.영예배지 img{width:100%;height:100%;object-fit:contain}.랭킹초대 .영예배지{width:76px;height:76px}.랭킹제목 .영예배지{width:60px;height:60px}
.포인트이미지{display:inline-block;object-fit:contain;flex-shrink:0;vertical-align:middle}.포인트머리{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.포인트머리 h1{margin:0}.일지저장결과{display:flex;align-items:center;gap:8px}.목표단계{display:flex;justify-content:space-between;gap:8px;margin:8px 0;color:var(--글흐림);font-size: calc((12px) * var(--글배, 1))}.목표단계 span{border-radius:8px;padding:4px;background:var(--바탕)}.목표단계 .달성{color:var(--강조);background:#eee2ff;font-weight:700}.선택비중{overflow:visible!important}.선택비중 button{height:100%;border:0;padding:0;min-width:0;transition:transform .2s}.선택비중 button[aria-pressed=true]{transform:scaleY(1.5);outline:2px solid white;z-index:1}.비중선택줄{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 8px;border-radius:12px;gap:8px;text-align:left}.비중선택줄[aria-pressed=true]{background:var(--강조연함)}.선택자산상세{padding:16px;background:var(--강조연함);border-radius:16px;display:grid;gap:8px}.선택자산상세 strong{font-size: calc((24px) * var(--글배, 1))}#주문말 .포인트이미지{margin-right:12px}.하트{position:relative}.하트:active svg{transform:scale(1.18)}@media(prefers-reduced-motion:no-preference){.포인트등장{animation:포인트등장 .45s ease-out both}.하트.담김:focus svg{animation:하트반응 .4s ease-out}.하트.담김:focus:after{content:'✦';position:absolute;right:0;top:0;pointer-events:none;color:#b986ee;animation:별반응 .55s ease-out forwards}@keyframes 포인트등장{from{opacity:0;transform:scale(.7)}70%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes 하트반응{50%{transform:scale(1.25)}}@keyframes 별반응{to{opacity:0;transform:translate(8px,-14px)}}}@media(prefers-reduced-motion:reduce){.선택비중 button{transition:none}.하트:active svg{transform:none}}

/* 다크에서 «글자만» 밝아지고 배경은 밝은 채로 남아 글씨가 안 읽히던 둘(2026-09-15 실측).
   토큰(var(--글))으로 글자색을 받으면서 배경은 고정 밝은색이면 어느 한쪽 판에서 반드시 깨진다.
   .딱지.조심·.딱지.금·.꿈배지·.작업태그·.목표단계 .달성 은 글자색도 고정이라 그대로 둔다. */
[data-빛="dark"] .랭킹초대{background:linear-gradient(115deg,#3C2A5E,#2A2450 65%,#5A3A55);border-color:#4E3B70}
[data-빛="dark"] .주목카드{background:linear-gradient(130deg,#2C2450,#43304E);border-color:#43385F}

/* 한복판 단추 — 다섯 중 «투자»만 동그랗게 띄운다(사장님 지시 2026-09-15).
   글자를 떼고 아이콘만 남긴 대신 탭바.jsx 에서 aria-label 로 이름을 준다.
   .탭바 button.켜짐:before 의 알약 배경을 덮어야 해서 클래스를 하나 더 물린다(명시도 0,3,1 > 0,2,2). */
.탭바 .한복판{flex:0 0 62px;justify-content:center;margin-top:-16px}
.탭바 .한복판:before,.탭바 .한복판.켜짐:before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(150deg,#a184f5,#6d4aff);
  box-shadow:0 8px 20px #6d4aff40;z-index:-1}
.탭바 .한복판 svg{width:26px;height:26px;stroke:#fff;stroke-width:2.2}
.탭바 .한복판 .새점{display:none}
[data-빛="dark"] .탭바 .한복판:before,[data-빛="dark"] .탭바 .한복판.켜짐:before{
  background:linear-gradient(150deg,var(--포인트),#8B6BFF);box-shadow:0 8px 22px #ff8fd040}
[data-빛="dark"] .작업모바일채팅버튼{background:linear-gradient(150deg,var(--포인트),#8B6BFF);color:#fff}

/* 머리에 동그란 단추가 둘이 되면서(달/해 + 검색) space-between 이 셋을 «고르게» 벌려
   달 단추가 한가운데 떠 버렸다. 글 칸이 남는 폭을 먹게 해서 단추 둘을 오른쪽에 붙인다. */
.꿈인사{gap:8px}
.꿈인사>:first-child{flex:1;min-width:0}

/* 데스크톱 윗줄의 달/해 단추 — 알림·검색과 같은 결의 아이콘 자리다. */
.윗빛{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  color:var(--글연함);background:transparent}
.윗빛:hover{background:var(--판2);color:var(--강조)}
.윗빛 svg{width:19px;height:19px}

/* 알림은 어느 탭에도 안 붙는 독립된 자리다(2026-09-15). 그래서 켜졌을 때를 제가 알려야 한다. */
.작업알림단추.켜짐{background:var(--강조연함);color:var(--강조)}

/* 실시간 채팅은 화면 하나를 통째로 쓴다(사장님 지시 2026-09-15) — 탭바도 app.jsx 에서 빼 준다.
   fixed 로 덮는 까닭: .속 의 좌우 여백과 아래 padding 을 그대로 두면 대화가 쓸 높이가 줄어든다. */
.채팅페이지{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  background:var(--바탕);padding-bottom:env(safe-area-inset-bottom,0px)}
.채팅머리{flex:none;display:flex;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;border-bottom:1px solid var(--줄)}
.채팅머리 h1{margin:0;font-size: calc((18px) * var(--글배, 1));letter-spacing:-.4px}
.채팅페이지 .말칸{flex:1;min-height:0;border:0;border-radius:0;box-shadow:none;background:transparent}

/* 방 칩 줄은 걷어냈다(드롭다운으로 바꿈, 2026-09-15). 거기 딸렸던 규칙들 —
   구르기·이름 말줄임·「✕는 고른 방에만」 — 도 같이 지운다. 세로 목록은 폭이 남으니
   ✕ 를 숨길 까닭이 없고, 숨겨 두면 방을 닫을 길이 없어진다. */
/* flex 자식은 min-width 가 auto 라 «내용만큼» 부푼다. 그래서 칩 줄이 길어지자 말머리가
   435px(화면 375)까지 늘어 ＋ 단추를 화면 밖으로 밀어냈다. 0 으로 못 박아야 줄어든다. */
.채팅페이지 > *, .채팅페이지 .말머리, .채팅페이지 .말윗줄{min-width:0;max-width:100%}

/* 갈피·고르개가 좁은 폭에서 깨지는 문제 — 처음엔 「여섯 칸 넘으면」으로 갈랐는데 틀렸다.
   320px 에서 재 보니 4칸(「팔로잉 거래」)도 3칸(「30일/90일」)도 글자가 접혀 높이가 45→67px 로 늘었다.
   기준은 «칸 수»가 아니라 «글자가 접히느냐»인데, CSS 로는 접힘을 감지할 수 없다.
   그래서 세는 걸 그만두고 셋으로 못 박는다(2026-09-15):
     nowrap      — 접히지 않는다. 칩 안에서 두 줄이 되면 줄 높이가 통째로 늘기 때문이다.
     flex:1 0 auto — 남으면 나눠 갖고(칸이 적을 땐 지금처럼 균등해 보인다), 모자라도 «줄지는» 않는다.
     구르기+흐림  — 모자라면 옆으로 구르고, 끝을 흐려 더 있음을 알린다.
   칸이 적으면 아무것도 안 구르므로 지금 멀쩡한 갈피들은 그대로다.
   고르는 근거는 .claude/skills/row-overflow 에 있다. */
.꿈갈피, .고르개{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
/* 끝을 흐리는 건 «더 있으니 밀어 보라»는 표시다. 그런데 .고르개 는 어느 폭에서도 안 넘친다 —
   실측(2026-09-15, 320px): 시세갈래·랭킹 둘·커뮤니티 네 군데 모두 278=278 로 딱 맞는다.
   안 구르는 줄에 그 표시를 칠하면 거짓말인 데다, mask 가 칸의 «배경 알약까지» 지워서
   끝이 때처럼 뭉개져 보였다(사장님 지적). 진짜로 넘치는 갈피 줄에만 남긴다. */
.꿈갈피.구름{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.꿈갈피::-webkit-scrollbar, .고르개::-webkit-scrollbar{display:none}
.꿈갈피 > *, .꿈갈피 > button, .고르개 > *{flex:1 0 auto;white-space:nowrap}
/* button 을 따로 적어야 한다. 위 31행의 `.꿈갈피 button{padding:12px 0}` 이 (0,1,1) 이라
   `.꿈갈피 > *` (0,1,0) 를 구체성으로 이겨서, 이 옆칸 여백이 통째로 죽어 있었다.
   실측(2026-09-15): 「30일」 갈피가 25px — 여백이 붙었으면 47px 이다. */
.꿈갈피 > *, .꿈갈피 > button{padding-left:12px;padding-right:12px}

/* 채팅 방 고르기 — 가로 칩 줄을 걷어내고 «펼치는 목록»으로 바꿨다(사장님 지시 2026-09-15).
   칩 줄은 방이 넷만 돼도 214px 기둥에서 450px 를 요구했고, 마우스로는 스크롤바를 끌어야 움직였다.
   슬랙·카톡이 방 전환에 세로 목록을 쓰는 까닭 — 방은 늘어나는데 가로는 안 늘어난다.
   필터(알림함 갈피 같은 것)는 여전히 가로 줄이 맞다. 훑어보는 게 목적이고 개수가 고정이니까. */
/* 목록은 .말윗줄 «바깥»(.말머리 안)에 있으므로 기준도 .말머리 여야 한다.
   .말윗줄 에 relative 를 줬더니 목록이 .말칸 기준으로 잡혀 화면 706px 지점(화면은 700px)으로
   떨어져 «DOM 에는 있는데 안 보이는» 꼴이 됐다. absolute 의 기준은 «가장 가까운 positioned 조상»이다. */
.말머리{position:relative}
.말방고르기{display:flex;align-items:center;gap:4px;flex:1;min-width:0;
  padding:8px 8px;border-radius:12px;background:var(--판2);color:var(--글);
  font-size: calc((13px) * var(--글배, 1));font-weight:600;text-align:left}
.말방고르기 > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.말방고르기 b{flex:none;font-size: calc((11px) * var(--글배, 1));font-weight:700;padding:4px 4px;border-radius:999px;
  background:var(--강조연함);color:var(--강조)}
.말방고르기 svg{flex:none;width:15px;height:15px;color:var(--글흐림);transition:transform .15s ease}
.말방고르기.열림 svg{transform:rotate(180deg)}
.말방고르기:hover{background:var(--강조연함)}

.말방목록{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  max-height:min(320px,50vh);overflow-y:auto;overscroll-behavior:contain;
  padding:4px;border:1px solid var(--줄);border-radius:16px;
  background:var(--판);box-shadow:var(--그늘)}
/* .말방 은 빛깔.css 에서 «칩»으로 정의돼 있다 — flex:none, max-width:132px, 알약, 회색 배경.
   목록 안에서는 칩이 아니라 «줄»이어야 하므로 그 넷을 다 덮는다. 안 덮었더니 항목이 절반 폭
   알약으로 그려져 오른쪽이 텅 비었다(2026-09-15). 남의 클래스를 재사용할 땐 그 클래스가
   이미 무슨 모양을 갖고 있는지 먼저 읽어야 한다. */
.말방목록 .말방{display:flex;align-items:center;flex:none;max-width:none;
  border-radius:8px;background:transparent;margin:0}
.말방목록 .말방:hover{background:var(--판2)}
.말방목록 .말방.켜짐{background:var(--강조연함)}
.말방줄{display:block;width:100%;flex:1;min-width:0;text-align:left;padding:8px;border-radius:8px;
  font-size: calc((13px) * var(--글배, 1));color:var(--글연함);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.말방목록 > .말방줄:hover{background:var(--판2);color:var(--글)}
.말방목록 .말방.켜짐 .말방줄, .말방목록 > .말방줄.켜짐{color:var(--강조);font-weight:700}
.말방목록 > .말방줄.켜짐{background:var(--강조연함)}
.말방목록 .말방닫기{flex:none;display:block;padding:8px 8px;font-size: calc((11px) * var(--글배, 1));color:var(--글흐림);line-height:1}
.말방목록 .말방닫기:hover{color:var(--오름)}
.말방더하기{width:100%;text-align:left;padding:8px 8px;margin-top:4px;border-radius:8px;
  border-top:1px solid var(--줄);font-size: calc((12px) * var(--글배, 1));color:var(--강조);font-weight:600}
.말방더하기:hover{background:var(--강조연함)}

/* 시세 목록 화면 — 사천 종목을 훑는 자리라 «넓게» 쓴다(2026-09-15).
   좁은 기둥에서 서른 개씩 늘리던 것을 여기로 옮겼다. */
.시세목록{display:flex;flex-direction:column;gap:12px;padding-bottom:16px}
.시세목록머리{display:flex;align-items:center;gap:8px}
.시세목록머리 h1{flex:1;margin:0;font-size: calc((18px) * var(--글배, 1));letter-spacing:-.5px}
.시세갈래{margin-bottom:4px}
.시세목록칸{display:grid;gap:4px}
/* 넓은 판에서는 두세 줄로 나눠 한 눈에 더 담는다 */
@media (min-width:760px){ .시세목록칸{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px} }
@media (min-width:1180px){ .시세목록칸{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ── 투자 단계 진행도 (졸업-설계.md) ───────────────────
   Retail → Trader → Pro → Elite → Whale. 번 돈 하나로 매긴다.
   빛깔은 토큰만 쓴다. 여기서 색을 새로 만들면 다크에서 혼자 튄다. */
.꿈단계 { margin:16px 0; display:flex; align-items:center; gap:16px; }
.꿈단계.진행 { display:block; }
.꿈단계글 { flex:1; min-width:0; }
.꿈단계머리 { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.꿈단계머리 b { display:flex; align-items:center; gap:8px; min-width:0;
                font-size: calc((18px) * var(--글배, 1)); font-weight:800; letter-spacing:-.2px; }
.꿈단계딱지 { flex:none; font-size: calc((11px) * var(--글배, 1)); font-weight:700; color:var(--강조);
              background:var(--강조연함); border-radius:999px; padding:4px 8px; white-space:nowrap; }
.꿈단계딱지.조용 { color:var(--글연함); background:var(--판2); }
.꿈단계 p { margin:12px 0 0; font-size: calc((12px) * var(--글배, 1)); line-height:1.7; color:var(--글연함); }
.꿈단계 p b { color:var(--글); font-weight:700; }
/* 목표물은 첫날부터 보인다. 「잠김」은 아직 아무것도 안 받은 사람에게만 —
   받은 것을 흐리게 두면 받은 것 같지가 않다. */
.꿈단계상 { flex:none; line-height:0; }
.꿈단계상.잠김 { opacity:.42; }
.꿈단계상 img { filter:drop-shadow(0 6px 14px #7847cf28); }
.꿈단계줄 { display:flex; align-items:baseline; justify-content:space-between;
            gap:8px; margin:16px 0 8px; font-size: calc((12px) * var(--글배, 1)); }
.꿈단계줄 > span { color:var(--글연함); }
.꿈단계줄 b { font-size: calc((18px) * var(--글배, 1)); font-weight:800; letter-spacing:-.4px; }
.꿈단계홈 { height:8px; border-radius:999px; background:var(--판2); overflow:hidden; }
.꿈단계참 { height:100%; width:0; border-radius:999px;
            background:linear-gradient(90deg,#a478e9,#7847cf); }
.꿈단계말 { margin-top:12px !important; font-size: calc((12px) * var(--글배, 1)) !important; }
.꿈단계.마침 { background:linear-gradient(120deg,var(--강조연함),var(--판)); border-color:var(--강조); }
.꿈단계새로 { flex:none; font-size: calc((11px) * var(--글배, 1)); font-weight:700; color:var(--강조위글);
              background:var(--강조); border-radius:999px; padding:4px 8px; }
.꿈단계 .꿈보조버튼 { margin-top:12px; }
/* 누를 수 있는 카드다 — 손이 갈 데를 보여준다. 마우스에서만 뜬다(hover). */
.꿈단계.눌림 { cursor:pointer; }
.꿈단계.눌림:hover { border-color:var(--강조); }
.꿈단계.눌림:focus-visible { outline:3px solid #aa83ed; outline-offset:3px; }
.꿈단계.눌림 .꿈단계머리::after { content:"›"; color:var(--글흐림); font-size: calc((18px) * var(--글배, 1)); margin-left:4px; }

@media (prefers-reduced-motion:no-preference) {
  .꿈단계참 { transition:width .9s cubic-bezier(.22,.9,.3,1); }
  /* 방금 오른 판에서만 한 번 빛난다. 서버가 «처음 이룬 그때»만 알려 주므로 저절로 한 번이다. */
  .꿈단계.막올랐다 { animation:단계빛남 1.4s ease-out 1; }
  @keyframes 단계빛남 {
    0%   { box-shadow:var(--그늘); }
    35%  { box-shadow:0 0 0 3px var(--강조연함), 0 10px 34px #7847cf3d; }
    100% { box-shadow:var(--그늘); }
  }
  .꿈단계.막올랐다 .꿈단계상 { animation:단계뜀 .9s cubic-bezier(.3,1.4,.5,1) 1; }
  @keyframes 단계뜀 { 0%{transform:translateY(6px) scale(.86)} 60%{transform:translateY(-5px) scale(1.06)} 100%{transform:none} }
}
@media (prefers-reduced-motion:reduce) { .꿈단계참 { transition:none; } }
@media (max-width:374px) {
  .꿈단계 { gap:8px; }
  .꿈단계머리 b { font-size: calc((15px) * var(--글배, 1)); }
  .꿈단계줄 b { font-size: calc((18px) * var(--글배, 1)); }
}

/* ── 증서 — 받은 투자 단계 (졸업-설계.md) ─────────────────
   큰 글씨는 «단계 이름»이 갖는다. 수익률을 크게 쓰면 성적표가 되고,
   성적표는 자랑거리가 되고, 자랑거리가 되면 그 숫자를 만들려고 몰빵한다. */
.꿈증서페이지 { display:grid; gap:16px; }
.꿈증서페이지 h1 { margin:0; }
.꿈증서 { display:grid; justify-items:center; text-align:center; gap:4px;
          padding:32px 24px; border-radius:24px;
          background:linear-gradient(150deg,var(--강조연함),var(--판) 70%);
          border:1px solid var(--강조); box-shadow:var(--그늘); }
.꿈증서.잠김 { background:var(--판2); border-color:var(--줄); }
.꿈증서.잠김 .꿈증서상 { opacity:.42; filter:saturate(.45); }
.꿈증서.마침 { border-width:2px; }
.꿈증서상 { line-height:0; }
.꿈증서상 img { filter:drop-shadow(0 8px 18px #7847cf2e); }
/* 작은 상은 그림자도 애니메이션도 안 건다 — 아이폰 웹킷은 filter 와 transform 이 한 그림에
   겹치면 그 layer 를 통째로 안 그린다(사장님 실측 2026-09-17 아이폰 크롬: 앞으로 칸 아이콘이 빔). */
.꿈증서상.작게 img { filter:none; }
.꿈증서딱지 { font-size: calc((11px) * var(--글배, 1)); font-weight:700; color:var(--강조);
              background:#ffffffa8; border-radius:999px; padding:4px 12px; margin-top:4px; }
[data-빛="dark"] .꿈증서딱지 { background:#ffffff1a; }
.꿈증서이름 { font-size: calc((32px) * var(--글배, 1)); font-weight:800; letter-spacing:-.8px; margin-top:4px; }
.꿈증서풀이 { margin:0; font-size: calc((13px) * var(--글배, 1)); color:var(--글연함); }
.꿈증서값 { display:flex; gap:24px; margin:16px 0 0; }
.꿈증서값 > div { display:grid; gap:4px; }
.꿈증서값 dt { font-size: calc((11px) * var(--글배, 1)); color:var(--글흐림); }
.꿈증서값 dd { margin:0; font-size: calc((18px) * var(--글배, 1)); font-weight:700; letter-spacing:-.3px; }

.꿈증서줄기 { display:grid; gap:8px; }
.꿈증서줄기 h2 { margin:0 0 4px; }
.꿈증서칸 { display:flex; align-items:center; gap:12px; padding:12px 16px;
            background:var(--판); border:1px solid var(--줄); border-radius:16px; }
.꿈증서칸.잠김 { background:transparent; border-style:dashed; }
.꿈증서칸.잠김 .꿈증서상 { opacity:.38; }
.꿈증서칸.잠김 .꿈증서글 b, .꿈증서칸.잠김 .꿈증서돈 { color:var(--글흐림); }
.꿈증서글 { flex:1; min-width:0; display:grid; gap:4px; }
.꿈증서글 b { font-size: calc((15px) * var(--글배, 1)); }
.꿈증서글 span { font-size: calc((11px) * var(--글배, 1)); color:var(--글연함); }
.꿈증서돈 { flex:none; font-size: calc((13px) * var(--글배, 1)); font-weight:700; }
.꿈증서맺음 { margin:0; line-height:1.7; }
@media (max-width:374px) {
  .꿈증서 { padding:24px 16px; }
  .꿈증서이름 { font-size: calc((24px) * var(--글배, 1)); }
  .꿈증서값 { gap:16px; }
}

/* 증서는 «차분하게» 나타난다. 튀어오르게 만들면 상장이 아니라 광고가 된다.
   목록은 위에서부터 차례로 — 받은 순서를 눈이 따라 읽는다. */
@media (prefers-reduced-motion:no-preference) {
  .꿈증서 { animation:증서남 .6s cubic-bezier(.22,.9,.3,1) both; }
  .꿈증서상:not(.작게) img { animation:증서상남 .8s cubic-bezier(.22,.9,.3,1) both .1s; }
  .꿈증서줄기 h2 { animation:증서남 .5s ease-out both .15s; }
  .꿈증서칸 { animation:증서줄남 .5s ease-out both; }
  .꿈증서칸:nth-child(2) { animation-delay:.18s; }
  .꿈증서칸:nth-child(3) { animation-delay:.26s; }
  .꿈증서칸:nth-child(4) { animation-delay:.34s; }
  .꿈증서칸:nth-child(5) { animation-delay:.42s; }
  .꿈증서칸:nth-child(6) { animation-delay:.50s; }
  .꿈증서맺음 { animation:증서남 .5s ease-out both .55s; }
  @keyframes 증서남   { from { opacity:0; transform:translateY(14px); } }
  @keyframes 증서줄남 { from { opacity:0; transform:translateY(10px); } }
  /* 상은 조금 더 크게 들어온다 — 이 화면의 주인공이다 */
  @keyframes 증서상남 { from { opacity:0; transform:scale(.82); } 65% { transform:scale(1.04); } }
}

/* ── 할 일 · 칭호 (퀘스트-칭호-설계.md) ─────────────────────────────── */
/* 홈의 한 줄. 단계 카드 «아래»에 선다 — 사다리와 오늘 할 일은 다른 이야기다. */
.꿈할일띠 { width:100%; margin:0 0 16px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; border:1px solid var(--줄); border-radius:var(--둥근칸);
  background:var(--판); box-shadow:var(--그늘); cursor:pointer; text-align:left; }
.꿈할일띠:hover { border-color:var(--강조); }
.꿈할일띠:focus-visible { outline:3px solid #aa83ed; outline-offset:3px; }
.꿈할일띠.받을것 { border-color:var(--강조); background:linear-gradient(110deg,var(--강조연함),var(--판)); }
.꿈할일띠글 { display:grid; gap:4px; min-width:0; }
.꿈할일띠글 b { font-size: calc((13px) * var(--글배, 1)); font-weight:700; color:var(--글); }
.꿈할일띠글 small { font-size: calc((11px) * var(--글배, 1)); color:var(--글연함); }
.꿈할일띠돈 { flex:none; font-size: calc((12px) * var(--글배, 1)); font-weight:800; color:var(--강조); }

.꿈할일페이지 { display:grid; gap:16px; }
.꿈할일페이지 h1 { margin:0; }
.꿈할일탭 { display:flex; gap:8px; }
.꿈할일탭 button { flex:1; padding:12px 8px; font-size: calc((13px) * var(--글배, 1)); font-weight:700; cursor:pointer;
  border:1px solid var(--줄); border-radius:var(--알약); background:var(--판); color:var(--글연함); }
.꿈할일탭 button[aria-selected="true"] { background:var(--강조); border-color:var(--강조); color:var(--강조위글); }
.꿈할일머리 { display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-size: calc((12px) * var(--글배, 1)); color:var(--글연함); }
.꿈할일머리 b { font-size: calc((18px) * var(--글배, 1)); font-weight:800; color:var(--강조); letter-spacing:-.4px; }
.꿈할일알림 { padding:12px 12px; border-radius:var(--둥근칸); font-size: calc((12px) * var(--글배, 1)); font-weight:600;
  background:var(--강조연함); color:var(--강조); }

.꿈할일목록 { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.꿈할일 { display:grid; grid-template-columns:1fr 104px; align-items:center; gap:4px 12px; }
/* 오른쪽 칸을 고정한다 — 「받았어요」와 「10,000원 받기」의 너비가 다르면
   막대 길이가 줄마다 달라져 다 한 일이 덜 한 것처럼 보인다(실측 2026-09-15). */
.꿈할일글 { display:grid; gap:4px; min-width:0; }
.꿈할일글 b { font-size: calc((13px) * var(--글배, 1)); font-weight:700; word-break:keep-all; }
.꿈할일막대 { grid-column:1; height:6px; border-radius:999px; background:var(--판2); overflow:hidden; }
.꿈할일막대 i { display:block; height:100%; border-radius:999px; background:var(--강조); }
.꿈할일단추 { grid-row:1 / span 2; grid-column:2; padding:8px 4px; cursor:pointer;
  font-size: calc((12px) * var(--글배, 1)); font-weight:800; border-radius:var(--알약);
  border:1px solid var(--강조); background:var(--강조); color:var(--강조위글); }
.꿈할일단추:disabled { cursor:default; background:var(--판2); border-color:var(--줄); color:var(--글흐림); }
.꿈할일끝 { grid-row:1 / span 2; grid-column:2; text-align:center; font-size: calc((11px) * var(--글배, 1)); font-weight:700; color:var(--글흐림); }
.꿈할일.끝남 .꿈할일글 b { color:var(--글연함); }
.꿈할일.끝남 .꿈할일막대 i { background:var(--글흐림); }
.꿈할일말 { margin:0; font-size: calc((11px) * var(--글배, 1)); line-height:1.7; color:var(--글연함); text-align:center; }

.꿈칭호판 { list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.꿈칭호 { position:relative; }
.꿈칭호 > button { width:100%; height:100%; display:grid; justify-items:center; gap:4px; cursor:pointer;
  padding:16px 12px 12px; text-align:center; border:1px solid var(--줄);
  border-radius:var(--둥근칸); background:var(--판); box-shadow:var(--그늘); }
.꿈칭호 > button b { font-size: calc((13px) * var(--글배, 1)); font-weight:800; word-break:keep-all; }
.꿈칭호 > button .잔글 { font-size: calc((11px) * var(--글배, 1)); line-height:1.55; color:var(--글연함); word-break:keep-all; }
.꿈칭호그림 { display:block; }
.꿈칭호날 { font-size: calc((11px) * var(--글배, 1)); color:var(--글흐림); }
/* 안 얻은 것은 실루엣. 앞에 길이 있다는 걸 보여주는 게 이 칸이 하는 일이다. */
.꿈칭호.잠김 > button { background:var(--판2); cursor:default; box-shadow:none; }
.꿈칭호.잠김 .꿈칭호그림 { opacity:.3; filter:grayscale(1); }
.꿈칭호.잠김 > button b { color:var(--글흐림); }
.꿈칭호.대표 > button { border-color:var(--강조); border-width:2px; }
.꿈칭호딱지 { position:absolute; top:-7px; left:50%; transform:translateX(-50%); white-space:nowrap;
  padding:4px 8px; border-radius:var(--알약); font-size: calc((11px) * var(--글배, 1)); font-weight:700;
  background:var(--강조); color:var(--강조위글); }

/* 이름 옆 한 칸 — 순위·이야기에 같이 뜬다 */
.칭호딱지 { flex:none; display:inline-flex; align-items:center; gap:4px; vertical-align:middle;
  padding:4px 8px; border-radius:var(--알약); font-size: calc((11px) * var(--글배, 1)); font-weight:700;
  background:var(--강조연함); color:var(--강조); }

@media (prefers-reduced-motion:no-preference) {
  .꿈할일막대 i { transition:width .7s cubic-bezier(.22,.9,.3,1); }
}
@media (max-width:374px) {
  .꿈칭호판 { grid-template-columns:repeat(2,1fr); gap:8px; }
  .꿈칭호 > button { padding:12px 8px 12px; }
  .꿈칭호 > button .잔글 { font-size: calc((11px) * var(--글배, 1)); }
}

/* ── 홈 다듬기 (2026-09-15) ────────────────────────────────────────────
   **짜임만 고친다. 색과 아이콘은 그대로다**(사장님: 「ui만 바꾸는거야 전체적인
   색감은 그대로」 · 「현재 이미지로 뽑은것들은 냅둬」).

   고친 것은 「저마다 다른 값」이다. 눈에 띄는 잘못은 하나도 없는데 전체가
   «대충 놓은 것»처럼 읽히던 까닭이 이것이었다 —
     · 모서리 28·24·22·20·18 다섯 가지
     · 안쪽 여백 36·30·24·20 네 가지
     · 블록 사이 틈 26·24·22·20 네 가지
   빛깔.css 에 --둥근카드/--둥근칸/--둥근작은 이 이미 있는데 **아무도 안 쓰고 있었다.** */
.꿈홈 {
  --틈: 20px;
  --틈형제: 8px;
  --안여백: 20px;
}
.꿈홈 .꿈인사 { align-items:flex-start; gap:12px; margin-bottom:16px; }
.꿈홈 .꿈인사글 { flex:1; min-width:0; }
.꿈홈 .꿈인사단추 { display:flex; align-items:center; gap:8px; flex:none; }
.꿈홈 .꿈인사 h1 { margin-top:4px; }

.꿈홈 > *, .꿈홈 .꿈투자, .꿈홈 .랭킹초대, .꿈홈 .꿈단계, .꿈홈 .꿈할일띠 { margin:0; }
.꿈홈 { display:flex; flex-direction:column; gap:var(--틈); }
.꿈홈 .꿈홈아래 { margin:0; gap:var(--틈형제); }
.꿈홈시작 { display:flex; flex-direction:column; gap:var(--틈형제); min-width:0; }
.꿈홈시작하기 .알약단추 { width:100%; min-height:48px; }

/* 모서리·여백을 토큰으로 되돌린다 */
/* 모서리는 «전 화면 한 값»(22)을 쓴다 — 홈만 다르면 홈이 딴 앱처럼 보인다.
   카드(22) > 단추(18) 로 두는 것은 일부러다. 담는 것이 담기는 것보다 둥글어야
   안에 든 것이 «안에 들었다»고 읽힌다. */
.꿈홈 .꿈카드, .꿈홈 .랭킹초대 { padding:var(--안여백); }
.꿈홈 .꿈자산 { border-radius:var(--둥근카드); }

/* 랭킹 초대 — 히어로(총자산)와 크기로 맞서고 있었다. 두 개가 같이 외치면
   눈이 어디를 봐야 할지 모른다. 색은 그대로 두고 «덩치만» 낮춘다. */
.꿈홈 .랭킹초대 b { font-size: calc((15px) * var(--글배, 1)); }
.꿈홈 .랭킹초대 small { font-size: calc((11px) * var(--글배, 1)); margin-top:4px; }
.꿈홈 .랭킹초대 { gap:12px; }
.꿈홈 .랭킹초대 .영예배지 { width:46px; height:46px; }

/* 칸 제목은 한 크기로. 16·17·18 이 섞여 있었다. */
.꿈홈 .꿈제목 { margin-bottom:12px; }

@media (max-width:600px) {
  .꿈홈 { --틈:16px; --틈형제:8px; --안여백:16px; }
  .꿈홈 .꿈자산 { padding:16px; min-height:0; }
  .꿈홈 .꿈브랜드 { font-size: calc((15px) * var(--글배, 1)); letter-spacing:-.5px; gap:4px; }
  .꿈홈 .꿈브랜드 img { width:auto !important; height:20px !important; }
  .꿈홈 .꿈인사 { gap:8px; margin-bottom:0; }
  .꿈홈 > .꿈공지줄 { margin:0; padding:8px 12px; border-radius:12px; min-height:44px; }
  .꿈홈 .랭킹초대 { padding:8px 12px; gap:8px; }
  .꿈홈 .랭킹초대 .영예배지 { width:32px; height:32px; }
  .꿈홈 .랭킹초대 b { font-size: calc((13px) * var(--글배, 1)); }
  .꿈홈시작하기 { padding-top:4px; }
}
/* 좁은 화면에서 「랭킹 보기 ›」가 혼자 한 줄로 밀려 빈 줄처럼 보였다.
   목록 줄의 흔한 꼴대로 «홑화살표»만 남긴다 — 카드 전체가 이미 누를 수 있는 단추다. */
.꿈홈 .랭킹초대 { flex-wrap:nowrap; }
.꿈홈 .랭킹초대 > span:nth-child(2) { min-width:0; }
.꿈홈 .랭킹초대 small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.랭킹초대끝 em { font-style:normal; }
@media (max-width:600px) { .꿈홈 .랭킹초대끝 em { display:none; } .꿈홈 .랭킹초대끝 { font-size: calc((18px) * var(--글배, 1)); } }
.판단복기 { display:grid; gap:12px; }
.판단복기 blockquote { margin:0; padding:12px 16px; border-radius:12px; background:var(--강조연함); color:var(--글연함); font-size: calc((13px) * var(--글배, 1)); }
.판단복기값 { display:grid; grid-template-columns:auto 1fr auto 1fr auto; gap:8px; align-items:center; font-size: calc((12px) * var(--글배, 1)); }
.판단복기값 b { text-align:right; }
.판단복기 h3 { margin:0; font-size: calc((15px) * var(--글배, 1)); }
.판단복기선택 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.판단복기선택 button { min-height:44px; padding:8px; border-radius:12px; background:var(--판2); font-size: calc((13px) * var(--글배, 1)); font-weight:700; }
@media(max-width:374px){.판단복기값{grid-template-columns:auto 1fr}.판단복기값 .등락{grid-column:1/-1}.판단복기선택{grid-template-columns:1fr}}

/* ── 랭킹 머리 다듬기 (2026-09-15) ────────────────────────────────────
   목록이 시작되기 전에 «다섯 줄»이 있었다: 제목 / 설명 / 재는 법 / 전체·내 그룹 /
   기간 셋. 812px 폰에서 첫 이름이 나오기까지 340px — 화면의 42%다.
   설명 두 줄은 한 줄로 합쳤고(순위.jsx), 나머지는 여기서 키를 낮춘다. 색은 안 건드린다. */
.랭킹제목 .영예배지 { width:46px; height:46px; }
.랭킹제목 h1 { font-size: calc((24px) * var(--글배, 1)); }
.랭킹범위 { margin:12px 0 8px; }
.랭킹범위 button, .랭킹종류 button { padding:8px 4px; font-size: calc((13px) * var(--글배, 1)); }
/* 범위(전체·내 그룹)와 기간(누적·오늘)은 다른 축이다. 같은 무게로 나란히 두면
   한쪽이 다른 쪽의 되풀이처럼 읽힌다 — 범위를 한 치수 줄여 위아래를 가른다. */
.랭킹범위 { max-width:240px; }
.줄목록 { margin-top:12px; }
@media (max-width:600px) {
  .랭킹제목 .영예배지 { width:40px; height:40px; }
  .랭킹제목 h1 { font-size: calc((18px) * var(--글배, 1)); }
}

/* ══ 단추 한 벌 (2026-09-15) ═══════════════════════════════════════════
   사장님: 「내가 말하는건 버튼들 이야기 하는거야」.

   **재 봤다.** 주문 화면 «하나»에만 단추 기하가 여덟 가지였고, 앱 전체로는 —
     · 키      40 · 42 · 43 · 44 · 51        ← 같은 일을 하는 것들이다
     · 모서리  11 · 14 · 16 · 999 · 50%
     · 굵기    400 · 500 · 600 · 700
     · 글자    12 · 12.5 · 13 · 15 · 16
   게다가 **「으뜸 단추」가 둘인데 서로 안 닮았다** —
     .알약단추(15px · 600 · 모서리 16)  vs  .꿈보라버튼(13px · 700 · 모서리 15).

   여기서 한 벌로 묶는다. **이름은 안 바꾼다** — 화면 스무 개의 마크업을 건드리지 않으려고
   값만 모은다. **색은 한 군데도 안 건드린다**(사장님: 「전체적인 색감은 그대로」).

   키를 셋으로 가른 까닭:
     52 = 주된 행동 (주문 확인·구매·판매)   — 한 화면에 하나뿐인 것
     44 = 홀로 선 단추                      — 손가락 문턱(44px)을 지킨다
     40 = 줄지어 선 고르개·칩               — 줄 안에 있어 옆칸이 같이 받쳐 준다 */
:root {
  --단추키큼: 52px; --단추키: 44px; --단추키촘촘: 40px;
  --단추둥금: 14px;
  --단추글큼: 15px; --단추글: 13px; --단추글촘촘: 12.5px;
  /* **굵기는 하나다.** 켜진 칩만 700 으로 굵어지던 자리가 있었는데(투자 화면 실측),
     굵기가 바뀌면 글자 너비가 변해 줄이 흔들린다. 켜졌다는 것은 «배경»이 말한다. */
  --단추굵기: 600;
}

/* ── 큼: 주된 행동 ── */
.알약단추, .꿈보라버튼 {
  min-height: var(--단추키큼); padding: 0 24px;
  border-radius: var(--단추둥금);
  font-size: calc((var(--단추글큼)) * var(--글배, 1)); font-weight: var(--단추굵기);
  display: flex; align-items: center; justify-content: center;
}

/* ── 보통: 홀로 선 단추 ── */
.꿈보조버튼, .작업알림단추, .꿈선택단추, .내림단추 {
  min-height: var(--단추키); border-radius: var(--단추둥금);
  font-size: calc((var(--단추글)) * var(--글배, 1)); font-weight: var(--단추굵기);
}
.꿈보조버튼 { display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.작업알림단추, .꿈선택단추, .내림단추 { padding: 0 12px; }
.꿈원형 { width: var(--단추키); height: var(--단추키); padding: 12px; }

/* ── 촘촘: 줄지어 선 것 ── */
/* 알약 모서리는 남긴다 — 「고르는 것」이라는 신호라서 네모와 뜻이 다르다. */
.칩, .정렬칩, .고르개 button {
  min-height: var(--단추키촘촘); border-radius: var(--알약);
  font-size: calc((var(--단추글촘촘)) * var(--글배, 1)); font-weight: var(--단추굵기);
}
.칩, .정렬칩 { padding: 0 12px; display: inline-flex; align-items: center; }
.고르개 button { padding: 0 8px; }
/* 켜져도 굵기는 그대로. 배경이 말한다. */
.칩.켜짐, .정렬칩.켜짐, .고르개 button.켜짐 { font-weight: var(--단추굵기); }

/* ── 곁다리: 줄 안에 박힌 것 ── */
.쫓기단추, .꿈알림단추, .꿈할일단추 {
  min-height: 34px; border-radius: var(--알약);
  font-size: calc((12px) * var(--글배, 1)); font-weight: var(--단추굵기);
  display: inline-flex; align-items: center; justify-content: center; padding: 0 12px;
}

/* 좁은 화면에서도 키는 안 줄인다 — 손가락 크기는 화면 너비를 안 따른다. */
@media (max-width: 374px) {
  .알약단추, .꿈보라버튼 { padding: 0 16px; }
  .칩, .정렬칩 { padding: 0 12px; }
}
/* 걷어낸 자리 메모 — 여기 있던 .꿈페이지 .알약단추 / .꿈페이지 .고르개 button /
   .꿈거래 .판사기 .알약단추 의 «기하»는 위 「단추 한 벌」로 옮겼다(2026-09-15).
   같은 단추가 어느 페이지에 놓였느냐로 키와 모서리가 달라지던 자리였다.
   색은 그대로 뒀다 — 판사기의 보라는 「사기」라는 뜻을 지고 있다. */

/* ── 반응도 한 벌 ─────────────────────────────────────────────────────
   모양을 맞춰도 «누를 때»가 제각각이면 덜 만든 티가 난다. 지금은 어떤 단추엔
   :hover 가 있고 어떤 것엔 없고, 못 누르는 표시(disabled)는 .알약단추 하나뿐이었다.
   네 가지 결을 한 자리에서 준다 — 평소 · 얹음 · 누름 · 못 누름. 색은 안 만든다,
   있는 토큰 위에 밝기만 얹는다. */
.알약단추, .꿈보라버튼, .꿈보조버튼, .칩, .정렬칩, .고르개 button,
.작업알림단추, .꿈선택단추, .내림단추, .꿈원형, .동그란단추,
.쫓기단추, .꿈알림단추, .꿈할일단추 {
  transition: filter .15s ease, transform .09s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .알약단추:hover, .꿈보라버튼:hover, .꿈보조버튼:hover, .칩:hover, .정렬칩:hover,
  .작업알림단추:hover, .꿈선택단추:hover, .내림단추:hover, .꿈원형:hover,
  .동그란단추:hover, .쫓기단추:hover, .꿈할일단추:hover { filter: brightness(1.07); }
}
.알약단추:active, .꿈보라버튼:active, .꿈보조버튼:active, .칩:active, .정렬칩:active,
.고르개 button:active, .작업알림단추:active, .꿈선택단추:active, .내림단추:active,
.꿈원형:active, .동그란단추:active, .쫓기단추:active, .꿈할일단추:active {
  transform: scale(.97); filter: brightness(.94);
}
/* 못 누르는 단추는 «전부» 같은 표시를 한다. 하나만 흐려지고 나머지는 멀쩡해 보이면
   사람은 눌러 보고 나서야 안 된다는 걸 안다. */
.알약단추:disabled, .꿈보라버튼:disabled, .꿈보조버튼:disabled, .칩:disabled,
.정렬칩:disabled, .고르개 button:disabled, .작업알림단추:disabled, .꿈선택단추:disabled,
.내림단추:disabled, .꿈원형:disabled, .동그란단추:disabled, .쫓기단추:disabled,
.꿈할일단추:disabled {
  opacity: .42; cursor: default; filter: none; transform: none;
}
/* 키보드로 옮겨 다닐 때 «지금 어디»가 보여야 한다. 테두리 하나로 통일. */
.알약단추:focus-visible, .꿈보라버튼:focus-visible, .꿈보조버튼:focus-visible,
.칩:focus-visible, .정렬칩:focus-visible, .고르개 button:focus-visible,
.작업알림단추:focus-visible, .꿈선택단추:focus-visible, .내림단추:focus-visible,
.꿈원형:focus-visible, .동그란단추:focus-visible, .쫓기단추:focus-visible,
.꿈알림단추:focus-visible, .꿈할일단추:focus-visible {
  outline: 2px solid var(--강조); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .알약단추, .꿈보라버튼, .꿈보조버튼, .칩, .정렬칩, .고르개 button,
  .작업알림단추, .꿈선택단추, .내림단추, .꿈원형, .동그란단추,
  .쫓기단추, .꿈알림단추, .꿈할일단추 { transition: none; }
}
/* 홀로 선 동그란 아이콘 단추도 줄 안의 것과 키를 맞춘다(36 → 40). */
.동그란단추 { width: var(--단추키촘촘); height: var(--단추키촘촘); }
/* 머리 단추를 손가락 문턱(44px)에 맞추니 셋이 넓어져 인사말이 두 줄로 꺾였다.
   좁은 화면에서는 「알림」 글자를 빼고 동그라미 셋으로 맞춘다 — aria-label 이
   이름을 지고 있어 읽어 주는 기계에는 그대로 「알림함」이다. */
@media (max-width:480px) {
  .꿈홈 .작업알림단추 > span { display:none; }
  .꿈홈 .작업알림단추 { width:var(--단추키); padding:0; border-radius:50%;
                        display:inline-flex; align-items:center; justify-content:center; }
  /* 동그라미 안에 숫자를 나란히 두면 종이 밀려나고 알약이 테두리 밖으로 튄다.
     숫자는 오른쪽 위 모서리에 얹는다. */
  .꿈홈 .작업알림단추 b { position:absolute; top:0; right:0; transform:translate(4px,-4px);
                          min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
                          border-radius:999px; font-size: calc((11px) * var(--글배, 1)); line-height:16px; text-align:center;
                          border:1px solid var(--바닥); }
  .꿈홈 .꿈인사 h1 { line-height:1.4; }
}

/* ── 단추는 평면 (2026-09-16 사장님) ── */
:root { --단추둥금: 18px; }
.알약단추, .꿈보라버튼, .꿈보조버튼, .칩, .정렬칩,
.작업알림단추, .꿈선택단추, .내림단추, .꿈원형, .동그란단추,
.쫓기단추, .꿈알림단추, .꿈할일단추, .꿈기록메뉴 button {
  box-shadow: none;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease, transform .12s ease;
}
.알약단추:active, .꿈보라버튼:active, .꿈보조버튼:active, .칩:active, .정렬칩:active,
.작업알림단추:active, .꿈선택단추:active, .내림단추:active, .꿈원형:active,
.동그란단추:active, .쫓기단추:active, .꿈할일단추:active, .꿈기록메뉴 button:active {
  transform: scale(.97); opacity: .85;
}
.알약단추:disabled, .꿈보라버튼:disabled, .꿈보조버튼:disabled, .칩:disabled,
.정렬칩:disabled, .작업알림단추:disabled, .꿈선택단추:disabled, .내림단추:disabled,
.꿈원형:disabled, .동그란단추:disabled, .쫓기단추:disabled, .꿈할일단추:disabled {
  transform: none; opacity: .45;
}
@media (prefers-reduced-motion: reduce) {
  .알약단추, .꿈보라버튼, .꿈보조버튼, .칩, .정렬칩, .작업알림단추, .꿈선택단추,
  .내림단추, .꿈원형, .동그란단추, .쫓기단추, .꿈알림단추, .꿈할일단추,
  .꿈기록메뉴 button { transition: none; }
  .알약단추:active, .꿈보라버튼:active, .꿈보조버튼:active, .칩:active, .정렬칩:active,
  .작업알림단추:active, .꿈선택단추:active, .내림단추:active, .꿈원형:active,
  .동그란단추:active, .쫓기단추:active, .꿈할일단추:active { transform: none; }
}

/* ── 계정 (2026-09-15) ────────────────────────────────────────────────
   이 화면이 하는 일의 절반은 「이 계정이 어디에 살아 있나」를 말하는 것이다.
   그래서 그 칸이 제일 크고, 이어졌는지 아닌지로 «색이 아니라 결»이 갈린다 —
   안 이었다고 빨갛게 칠하지 않는다. 겁주면 연습하는 자리가 혼나는 자리가 된다. */
.꿈계정페이지 { display:grid; gap:16px; }
.꿈계정페이지 h1 { margin:0; }

.꿈계정얼굴 { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px; border-radius:24px; background:var(--판); border:1px solid var(--줄);
  box-shadow:var(--그늘); }
.꿈계정이름 { flex:1; min-width:0; font-size: calc((18px) * var(--글배, 1)); font-weight:800; letter-spacing:-.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.꿈계정얼굴.이어짐 { border-color:var(--강조); }
.꿈계정이름고치기 { display:flex; gap:8px; align-items:center; width:100%; }
.꿈계정이름고치기 input { flex:1; min-width:0; padding:0 12px; min-height:44px;
  border-radius:var(--단추둥금); border:1px solid var(--줄);
  background:var(--판2); color:var(--글); font:inherit; font-size: calc((13px) * var(--글배, 1)); }
.꿈계정이름고치기 input:focus-visible { outline:2px solid var(--강조); outline-offset:1px; }
.꿈계정탈 { width:100%; margin:0; font-size: calc((12px) * var(--글배, 1)); font-weight:600; color:var(--오름); }

.꿈계정칸 { padding:16px; border-radius:24px; background:var(--판);
  border:1px solid var(--줄); box-shadow:var(--그늘); display:grid; gap:12px; }
.꿈계정칸.이어짐 { border-color:var(--강조); background:linear-gradient(140deg,var(--강조연함),var(--판) 62%); }
.꿈계정칸 p { margin:0; font-size: calc((13px) * var(--글배, 1)); line-height:1.8; color:var(--글연함); word-break:keep-all; }
.꿈계정칸 p b { color:var(--글); font-weight:700; }
.꿈계정딱지 { justify-self:start; padding:4px 12px; border-radius:var(--알약);
  font-size: calc((11px) * var(--글배, 1)); font-weight:700; letter-spacing:.2px;
  background:var(--강조); color:var(--강조위글); }
.꿈계정딱지.조용 { background:var(--판2); color:var(--글연함); }
.꿈계정잔 { font-size: calc((11px) * var(--글배, 1)) !important; line-height:1.75 !important; color:var(--글흐림) !important; }
.꿈계정잔 b { color:var(--글연함) !important; }
.꿈계정페이지 .알약단추 { width:100%; }
/* 계정 잇기 띠 — 첫 거래 뒤 한 번. 겁주는 색을 안 쓴다(--오름 은 손실의 색이다).
   조르지 않으므로 닫는 단추가 눈에 보이는 자리에 있다. */
.꿈계정띠 { display:flex; align-items:center; gap:8px; padding:12px 16px;
  border:1px solid var(--줄); border-radius:24px; background:var(--판); box-shadow:var(--그늘); }
.꿈계정띠글 { flex:1; min-width:0; display:grid; gap:4px; }
.꿈계정띠글 b { font-size: calc((13px) * var(--글배, 1)); font-weight:700; word-break:keep-all; }
.꿈계정띠글 small { font-size: calc((11px) * var(--글배, 1)); line-height:1.6; color:var(--글연함); word-break:keep-all; }
.꿈계정띠단추 { flex:none; width:auto; padding:0 16px; }
.꿈계정띠닫기 { flex:none; font-size: calc((13px) * var(--글배, 1)); }
@media (max-width:374px) { .꿈계정띠 { flex-wrap:wrap; } .꿈계정띠단추 { flex:1; } .꿈상표글 { display:none; } }

/* ── 로그인 (2026-09-15) ──────────────────────────────────────────────
   문이 아니라 «안내»처럼 보여야 한다. 둘러보기는 그대로 되니까 —
   벽으로 그리면 로그인 안 한 사람이 앱을 떠난다. 그래서 크게 한 마디,
   까닭 한 줄, 단추 하나, 그리고 「먼저 둘러볼게요」가 반드시 보이는 자리에 있다. */
.꿈로그인페이지 { display:grid; gap:16px; align-content:start; }
.꿈로그인속 { display:grid; gap:12px; max-width:420px; width:100%; margin:0 auto;
  padding:4px 0 8px; }
.꿈로그인속 h1 { margin:0; font-size: calc((clamp(23px,6.4vw,29px)) * var(--글배, 1)); font-weight:800;
  letter-spacing:-1px; line-height:1.4; word-break:keep-all; }
.꿈로그인풀이 { margin:0; font-size: calc((13px) * var(--글배, 1)); line-height:1.85; color:var(--글연함);
  word-break:keep-all; }
.꿈로그인풀이 b { color:var(--글); font-weight:700; }
.꿈로그인페이지 .알약단추 { width:100%; margin-top:4px; }
/* 카카오는 제 색이 있는 상표다 — 우리 보라로 칠하면 카카오 단추로 안 읽힌다.
   글자색까지 카카오 규정대로 어두운 갈색이다(밝기와 무관하게 고정). */
.꿈카카오단추 { background:#FEE500 !important; color:#191600 !important; box-shadow:none !important; }
.꿈토스단추 { background:#0064FF !important; color:#fff !important; box-shadow:none !important; }
.꿈구글단추 { background:#fff !important; color:#1F1F1F !important; box-shadow:none !important;
             border:1px solid #DADCE0 !important; }
.꿈로그인단추들 { display:flex; flex-direction:column; gap:8px; align-items:stretch; width:100%; }
.꿈로고단추 { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.꿈로고단추 img, .꿈로고단추 svg { width:20px; height:20px; object-fit:contain; flex:none; }
.꿈토스단추 img { filter:brightness(0) invert(1); }
.꿈로그인단추들 .알약단추 { width:100%; }
.꿈로그인잔 { margin:0; font-size: calc((11px) * var(--글배, 1)); line-height:1.8; color:var(--글흐림);
  word-break:keep-all; }
.꿈로그인잔 b { color:var(--글연함); font-weight:700; }
.꿈로그인탈 { margin:0; font-size: calc((12px) * var(--글배, 1)); font-weight:600; color:var(--오름); }
.꿈로그인페이지 .꿈보조버튼 { margin-top:4px; background:transparent; box-shadow:none;
  color:var(--글연함); }
/* 홈 머리의 「로그인」 — 있는 듯 없는 듯 있다가, 눌러야 할 때 눈에 든다.
   보라 채움은 안 쓴다. 머리에 외치는 것이 둘(총자산·단계)이면 하나도 안 읽힌다. */
.꿈로그인칩 { flex:none; background:var(--강조연함) !important; color:var(--강조) !important;
  font-weight:700; padding:0 16px; }
@media (max-width:480px) {
  .꿈인사단추 { gap:4px; }
  .꿈로그인칩 { padding:0 12px; }
  .꿈인사 h1 { font-size: calc((12px) * var(--글배, 1)); }
}
/* 머리의 신분 자리 — 로그인 전에는 알약, 로그인 뒤에는 동그라미. 둘 다 여기 산다. */
.꿈계정단추 { flex:none; }
.꿈계정단추 svg { width:19px; height:19px; }
/* 데스크톱 윗줄의 신분 자리 — 계좌 칸 바로 오른쪽 */
.꿈데스크톱 .윗줄 > .꿈로그인칩,
.꿈데스크톱 .윗줄 > .꿈계정단추 { margin-left:8px; flex:none; }

/* ── 잠금 덮개 (2026-09-15) ─────────────────────────────────────────────
   **계정이 있는 사람만 홈에 들어온다**(사장님 지시). 홈은 「내 돈이 얼마인가」를
   보여 주는 자리라, 주인 없는 계정에 띄워 두면 남의 지갑을 열어 둔 꼴이 된다.

   문은 잠그되 **집 밖으로 내쫓지 않는다** — 탭바는 덮개 밖에 있어서
   시세·랭킹·커뮤니티는 그대로 돌아다닐 수 있다. 막는 것은 홈 한 자리뿐이다. */
.꿈잠금겉 { position:relative; min-height:60vh; }
.꿈잠김 { filter:blur(9px); pointer-events:none; user-select:none;
  /* 흐린 것을 더 낮춰 둔다 — 숫자가 읽히면 잠근 뜻이 없다 */
  opacity:.72; transform:scale(1.01); }
.꿈잠금덮개 { position:absolute; inset:0; display:grid; place-items:center;
  padding:24px 16px; z-index:5; }
.꿈잠금덮개속 { display:grid; gap:12px; justify-items:center; text-align:center;
  width:min(100%,340px); padding:24px 24px;
  border:1px solid var(--줄); border-radius:24px; background:var(--판);
  box-shadow:0 18px 60px rgba(0,0,0,.34); }
.꿈잠금덮개속 b { font-size: calc((18px) * var(--글배, 1)); font-weight:800; letter-spacing:-.5px; }
.꿈잠금덮개속 p { margin:0; font-size: calc((12px) * var(--글배, 1)); line-height:1.75; color:var(--글연함);
  word-break:keep-all; }
.꿈잠금덮개속 .알약단추 { width:100%; }
.꿈잠금덮개속 .꿈보조버튼 { width:100%; background:transparent; box-shadow:none;
  color:var(--글연함); }
/* 덮개는 화면 안에 «떠 있는» 것이라, 아래가 길어도 늘 보이는 자리에 머문다 */
@media (min-height:560px) { .꿈잠금덮개 { align-items:start; padding-top:min(22vh,176px); } }
@media (prefers-reduced-motion:reduce) { .꿈잠김 { transform:none; } }

.꿈커뮤니티머리{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.꿈커뮤니티머리 .제목{flex:none;margin:0}
.꿈커뮤니티머리 .고르개{flex:0 1 auto;margin:0 auto 0 0}
.꿈커뮤니티머리 .동그란단추{flex:none}

.이야기쓰기접힘{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 16px;background:var(--판2);border:1px solid var(--줄);border-radius:999px;color:var(--글흐림);font-size: calc((13px) * var(--글배, 1));margin-bottom:16px}
.이야기쓰기접힘>span{flex:1;min-width:0}
.이야기쓰기접힘.잠김{border-radius:16px}
.이야기칸{padding:16px 0;border-bottom:1px solid var(--줄)}
.이야기머리{display:flex;align-items:center;gap:8px;font-size: calc((13px) * var(--글배, 1))}
.이야기머리 b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.이야기머리 time{margin-left:auto;color:var(--글흐림);font-size: calc((12px) * var(--글배, 1));white-space:nowrap}
.이야기얼굴{flex:none;line-height:0;border-radius:50%}
.이야기더보기{flex:none;color:var(--글흐림);padding:0 4px;font-size: calc((15px) * var(--글배, 1));line-height:1}
.이야기몸{display:block;width:100%;text-align:left;margin-top:8px}
.이야기몸 h3{font-size: calc((18px) * var(--글배, 1));margin:0 0 8px;line-height:1.35;overflow-wrap:anywhere}
.이야기몸 p{margin:0;font-size: calc((13px) * var(--글배, 1));line-height:1.65;color:var(--글연함);white-space:pre-wrap;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.이야기칩줄{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.이야기칩{font-size: calc((11px) * var(--글배, 1));font-weight:600;padding:4px 8px;border-radius:999px;background:var(--판2);color:var(--글연함)}
.이야기칩.종목{background:var(--강조연함);color:var(--강조)}
.이야기발{display:flex;align-items:center;gap:4px;margin-top:12px}
.이야기발 button{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;font-size: calc((12px) * var(--글배, 1));font-weight:600;color:var(--글흐림)}
.이야기발 button svg{width:17px;height:17px}
.이야기발 button.켜짐{color:var(--강조)}
.이야기발 button:last-child{margin-left:auto}

.거르개줄{display:flex;align-items:center;gap:12px;margin:4px 0 4px;flex-wrap:wrap}
.거르개줄>.꿈갈피{flex:1 0 auto;min-width:0;margin-top:0}
.거르개줄>.칩줄{flex:1;min-width:0;margin:0}
.거르개끝{display:flex;align-items:center;gap:8px;flex:none;padding-bottom:4px}
@media(max-width:600px){.찾기거르개{flex-wrap:wrap;gap:8px 12px}.찾기거르개>.칩줄{flex:1 0 100%;min-width:0}.찾기거르개>.거르개끝{padding:0}.거르개줄>.꿈갈피{max-width:100%}.거르개줄:not(.찾기거르개)>.거르개끝{margin-left:auto}}
.거름토막{display:flex;gap:4px;background:var(--판2);border-radius:999px;padding:4px}
.거름토막 button{font-size: calc((11px) * var(--글배, 1));padding:4px 12px;border-radius:999px;color:var(--글흐림)}
.거름토막 button.켜짐{background:var(--판);color:var(--글);font-weight:700}
.거름칩{font-size: calc((12px) * var(--글배, 1));font-weight:600;padding:8px 12px;border-radius:999px;background:var(--판2);color:var(--글연함);white-space:nowrap}
.거름칩.켜짐{background:var(--강조연함);color:var(--강조)}

.이야기메뉴겉{position:fixed;inset:0;z-index:60;background:#0009;display:flex;align-items:flex-end;justify-content:center}
.이야기메뉴{width:100%;max-width:420px;background:var(--판);border-radius:16px 16px 0 0;padding:8px;display:flex;flex-direction:column;gap:4px}
.이야기메뉴 b{padding:12px 16px 8px;font-size: calc((13px) * var(--글배, 1))}
.이야기메뉴 button{text-align:left;padding:16px 16px;border-radius:12px;font-size: calc((13px) * var(--글배, 1));color:var(--글)}
.이야기메뉴 button.빨강{color:var(--내림)}
@media(min-width:700px){.이야기메뉴겉{align-items:center}.이야기메뉴{border-radius:16px}}

@media(min-width:1180px){
 .작업게시판{display:grid;grid-template-columns:minmax(0,720px) minmax(0,1fr);column-gap:24px;align-items:start}
 .작업게시판>*{grid-column:1}
 .작업게시판>.주목카드{grid-column:2;grid-row:1/span 99;margin:0;position:sticky;top:16px}
}

.글쓰기겉{position:fixed;inset:0;z-index:70;background:#000a;display:flex;align-items:center;justify-content:center;padding:16px}
.글쓰기창{width:100%;max-width:620px;max-height:86vh;overflow:auto;background:var(--판);border:1px solid var(--줄);border-radius:24px;padding:16px 16px 16px;display:flex;flex-direction:column;gap:12px}
.글쓰기머리{display:flex;align-items:center;gap:8px}
.글쓰기머리 b{font-size: calc((13px) * var(--글배, 1))}
.글쓰기닫기{margin-left:auto;font-size: calc((24px) * var(--글배, 1));line-height:1;color:var(--글흐림);padding:0 4px}
.글쓰기제목{border:0;border-bottom:1px solid var(--줄);background:none;padding:4px 0 12px;color:var(--글);font:inherit;font-size: calc((18px) * var(--글배, 1));font-weight:700;outline:none;width:100%;box-sizing:border-box}
.글쓰기제목::placeholder{color:var(--글흐림);font-weight:600}
.글쓰기몸{border:0;background:none;padding:0;color:var(--글);font:inherit;font-size: calc((15px) * var(--글배, 1));line-height:1.7;min-height:200px;resize:none;outline:none;width:100%;box-sizing:border-box}
.글쓰기몸::placeholder{color:var(--글흐림)}
.글쓰기발{display:flex;align-items:center;gap:12px;border-top:1px solid var(--줄);padding-top:12px}
.글쓰기발 label{display:flex;align-items:center;gap:4px;font-size: calc((12px) * var(--글배, 1));color:var(--글연함)}
.글쓰기발 label input{width:17px;height:17px;accent-color:var(--강조)}
.글쓰기발>span{margin-left:auto}
.글쓰기발>.꿈보라버튼{width:auto;flex:0 0 auto;padding:8px 24px;font-size: calc((13px) * var(--글배, 1));color:#fff}
@media(max-width:600px){.글쓰기겉{padding:0;align-items:flex-end}.글쓰기창{max-width:none;max-height:92vh;border-radius:16px 16px 0 0}}
.글쓰기제목:focus-visible,.글쓰기몸:focus-visible{outline:none}
.글쓰기창 .작업종목검색{width:100%;max-width:none;flex:none}

@media(max-width:1099px){
 .꿈커뮤니티머리 .제목{margin:0 auto 0 0}
 .꿈커뮤니티머리 .고르개.커뮤니티갈피{
   order:3; flex:0 0 100%; width:100%; max-width:100%; min-width:0; margin:0;
   display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
   align-items:stretch; gap:0;
   overflow:visible;
 }
 .꿈커뮤니티머리 .고르개.커뮤니티갈피 > button{
   flex:none; min-width:0; width:auto; max-width:none;
   display:flex; align-items:center; justify-content:center;
   width:100%; padding:8px 4px;
   overflow:visible; text-overflow:clip;
 }
}
@media(max-width:1179px){
 .주목카드{padding:12px 16px;margin:16px 0}
 .주목글{padding:12px 4px;gap:8px}
 .주목글 .영예배지{width:24px;height:29px}
 .주목글 b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .주목글 small{margin-top:4px;font-size: calc((11px) * var(--글배, 1))}
 .주목카드>.꿈제목 .영예배지{width:26px;height:32px}
}

.묻는겉{position:fixed;inset:0;z-index:90;background:#000a;display:flex;align-items:center;justify-content:center;padding:24px}
.묻는창{width:100%;max-width:360px;background:var(--판);border:1px solid var(--줄);border-radius:16px;padding:24px 16px 16px;box-shadow:0 20px 60px #0004}
.묻는창 p{margin:0 0 16px;font-size: calc((15px) * var(--글배, 1));line-height:1.6;white-space:pre-wrap;word-break:keep-all}
.묻는발{display:flex;gap:8px}
.묻는발>button{flex:1 1 0;width:auto;margin:0;padding:12px 8px;border-radius:12px;font-size: calc((13px) * var(--글배, 1));font-weight:700}
.묻는발>.꿈보조버튼{background:var(--판2);color:var(--글연함)}
.묻는발>.꿈보라버튼{color:#fff}

/* 시트 안 스크롤이 뒤 화면으로 번지지 않게. 몸 잠금(시트.js)과 짝이다 */
.시트속,.시트,.글쓰기창,.묻는창{overscroll-behavior:contain}
/* 손잡이는 이제 진짜로 잡힌다(lib/시트.js 끌어닫기) */
.시트속,.시트{touch-action:pan-y}


@media (min-width:1100px) {
  :root { --단추키큼:40px; --단추키:34px; --단추키촘촘:30px; --단추둥금:10px; --단추글큼:13px; --단추글:12px; --단추글촘촘:12px; --둥근카드:16px; --둥근칸:12px; --둥근작은:10px; }
  .꿈데스크톱 { grid-template-rows:56px 32px minmax(0,1fr) 28px; }
  .꿈데스크톱 .윗줄 { padding:0 16px; gap:16px; }
  .꿈데스크톱 .윗상표 { font-size: calc((18px) * var(--글배, 1)); }
  .꿈데스크톱 .윗찾기 { padding:8px 12px; margin-left:12px; }
  .꿈데스크톱 .꿈윗길 { gap:16px; }
  .꿈시장 { min-height:40px; padding:0 12px; gap:12px; font-size: calc((11px) * var(--글배, 1)); }
}
@media (min-width:1100px) and (max-width:1899px) { .꿈데스크톱 .꿈시장끝, .꿈데스크톱 .꿈시장 [data-열쇠="vix"], .꿈데스크톱 .꿈시장 [data-열쇠="sox"] { display:none; } }
@media (min-width:1100px) and (max-width:1699px) { .꿈데스크톱 .꿈시장 [data-열쇠="ndx"] { display:none; } }
@media (min-width:1100px) and (max-width:1499px) { .꿈데스크톱 .꿈시장 [data-열쇠="dow"] { display:none; }
  .시세표 th:nth-last-child(2), .시세표 td:nth-last-child(2) { display:none; }
  .시세표:not(.코인표) th:nth-last-child(3), .시세표:not(.코인표) td:nth-last-child(3) { display:none; } }
@media (min-width:1100px) and (max-width:1199px) { .꿈데스크톱 .꿈시장 [data-열쇠="sp500"] { display:none; } }
@media (min-width:1100px) {
  .꿈시장>div:not(.꿈상태),.꿈시장>button { gap:4px; padding-right:8px; }
  .꿈시장 b { font-size: calc((12px) * var(--글배, 1)); }
  .꿈데스크풋 { padding:0 16px; font-size: calc((11px) * var(--글배, 1)); }
  .꿈작업공간 { gap:12px; padding:12px 16px 0; }
  .꿈탐색 { padding:12px 12px 8px; }
  .꿈탐색 .꿈제목 { margin-bottom:8px; }
  .꿈탐색 .꿈제목>button { font-size: calc((18px) * var(--글배, 1)); }
  .꿈분류.작게 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .꿈분류.작게 button { flex-direction:row; justify-content:center; padding:8px 4px; gap:4px; font-size: calc((11px) * var(--글배, 1)); border-radius:8px; white-space:nowrap; min-height:36px; }
  .꿈분류.작게 .꿈아이콘 { width:16px; height:16px; }
  .꿈분류.작게 button:hover { transform:none; }
  .꿈탐색 .꿈갈피 { margin-top:8px; }
  .꿈탐색 .꿈갈피 button { padding:8px 0; }
  .꿈목록정렬 { padding:8px 0; }
  .꿈목록정렬 select { padding:4px 8px; }
  .꿈종목 { padding:4px 0; gap:8px; }
  .꿈종목이름 b { font-size: calc((12px) * var(--글배, 1)); }
  .꿈종목이름 small { margin-top:4px; }
  .꿈종목값 { gap:4px; }
  .꿈하트 { width:36px; height:36px; border-radius:8px; position:relative; }
  .꿈하트 svg { width:16px; height:16px; }
  .꿈하트::after { content:""; position:absolute; inset:-4px; }
  .꿈보조버튼 { margin-top:8px; }
  .꿈탐색끝 { flex-direction:row; gap:4px; padding-top:8px; }
  .꿈탐색끝 button { flex:1; justify-content:center; padding:4px 8px; font-size: calc((11px) * var(--글배, 1)); gap:4px; }
  .꿈탐색끝 .꿈아이콘 { width:18px; height:18px; }
  .꿈카드 { border-radius:12px; padding:16px; }
  .꿈제목 { margin-bottom:12px; }
  .꿈제목 h2,.꿈커뮤니티 h2 { font-size: calc((13px) * var(--글배, 1)); }
  .꿈상태 { padding:16px 12px; }
  .꿈페이지,.꿈커뮤니티 { border-radius:12px; }
  .꿈페이지:not(.홈페이지) { padding:16px 24px; }
  .꿈페이지:not(.홈페이지)>.머리줄 { margin-bottom:16px; }
  .꿈페이지 .제목 { font-size: calc((18px) * var(--글배, 1)); }
  .꿈페이지 .칸 { border-radius:12px; padding:16px; }
  .꿈페이지 .줄 { padding:8px 12px; }
  .꿈페이지 .칠칸 { padding:16px; margin:12px 0; border-radius:12px; }
  .꿈페이지 .칠칸 b { font-size: calc((24px) * var(--글배, 1)); }
  .꿈페이지 .빈말 { padding:24px 16px; border-radius:12px; }
  .꿈데스크톱.단일화면 .꿈페이지.좁은쪽 { max-width:760px; }
  .꿈데스크톱 .고르개 { border-radius:12px; }
  .꿈데스크톱 .고르개 button { border-radius:8px; }
  .꿈커뮤니티머리 { padding:12px 12px 8px; }
  .꿈데스크톱:not(.이야기접힘) .꿈커뮤니티 { top:100px; bottom:28px; }
  .꿈커뮤니티 .말찾기 input { height:32px; padding:4px 8px; }
  .꿈홈 { --틈:16px; --틈형제:12px; --안여백:16px; max-width:none; display:grid; grid-template-columns:minmax(0,1fr) 400px; column-gap:16px; align-content:start; }
  .꿈홈시작 { display:contents; }
  .꿈홈>* { grid-column:1; min-width:0; }
  .꿈홈>.꿈홈아래 { grid-column:2; grid-row:2 / span 9; grid-template-columns:1fr; align-content:start; margin:0; }
  /* 인사말은 짧다. 그 옆 빈자리를 뉴스가 쓴다 — 두 기둥을 다 가로지른다. */
  .꿈홈>.꿈인사 { grid-column:1 / -1; }
  .꿈홈 .꿈인사글 { flex:none; }
  .꿈데스크톱.단일화면 .꿈페이지 { max-width:1440px; }
  .꿈데스크톱.단일화면 .꿈페이지.홈페이지 { max-width:none; }
  .꿈홈 .랭킹초대 { padding:4px 12px; margin:12px 0 0; gap:8px; }
  .꿈홈 .랭킹초대 .영예배지 { width:30px; height:30px; }
  .꿈홈 .AI문 { flex-direction:row; align-items:center; gap:12px; padding:8px 12px; margin-top:12px; }
  .꿈홈 .AI문 .AI문머리 { width:auto; flex:none; }
  .꿈홈 .AI문 .AI문말 { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .꿈홈 .꿈단계 { margin:12px 0 0; }
  .꿈홈 .꿈할일띠 { margin:12px 0 0; }
  .꿈홈 .꿈투자 { margin-top:12px; }
  .꿈거래 .칠칸 { padding:8px 0 4px; margin:8px 0; }
  .꿈맛보기 { margin-top:12px; }
  .꿈홈둘 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
  .꿈홈둘>.꿈맛보기 { margin-top:0; }
  .꿈자산둘 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .꿈자산둘>* { margin-top:0; }
  .랭킹아래 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:12px; margin-top:16px; }
  .꿈홈 .꿈할일띠글 { display:flex; align-items:baseline; gap:8px; }
  .순위나란히 .순위줄 { grid-template-areas:"등수 이름 수익"; grid-template-columns:36px minmax(0,1fr) auto; padding:4px 0; }
  .순위나란히 .ㄴ변동 { display:none; }
  .꿈데스크톱 .꿈계정페이지 { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:170px minmax(0,1fr); column-gap:16px; align-content:start; }
  .꿈데스크톱 .꿈계정페이지>* { grid-column:2; }
  .꿈데스크톱 .꿈계정페이지>.뒤로단추,.꿈데스크톱 .꿈계정페이지>.제목 { grid-column:1 / -1; }
  .꿈데스크톱 .꿈계정차례 { display:flex; flex-direction:column; gap:4px; grid-column:1; grid-row:3 / span 30; position:sticky; top:0; align-self:start; }
  .꿈계정차례 button { text-align:left; padding:8px 12px; border-radius:8px; font-size: calc((13px) * var(--글배, 1)); color:var(--글연함); }
  .꿈계정차례 button:hover { background:var(--판2); color:var(--글); }
  .꿈계정나가기 .줄,.꿈계정탈퇴 .줄 { color:var(--글흐림); }
  .꿈계정구역 { scroll-margin-top:12px; }
  .꿈거래 .판왼 .작업정보 { overflow:auto; min-height:0; flex:1; }
  .판52주 { margin-top:12px; }
  .판52주띠 { position:relative; height:6px; border-radius:4px; background:linear-gradient(90deg,var(--내림),var(--판2) 50%,var(--오름)); margin:8px 0 4px; }
  .판52주띠 i { position:absolute; top:-4px; width:14px; height:14px; border-radius:50%; background:var(--글); border:2px solid var(--판); transform:translateX(-50%); }
  .꿈자산페이지 { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:12px; align-items:start; }
  .꿈커뮤니티몸 { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
  .꿈커뮤니티머리 .고르개 { max-width:none; width:auto; flex:none; }
  .꿈커뮤니티머리 .고르개 > button { min-width:0; padding:0 16px; }
  .꿈커뮤니티가운데 { min-width:0; }
  .꿈커뮤니티곁 { min-width:0; }
  .꿈커뮤니티곁>.꿈맛보기:first-child { margin-top:0; }
  .꿈자산페이지>.꿈제목,.꿈자산페이지>.꿈자산 { grid-column:1 / -1; }
  .꿈자산왼,.꿈자산오른 { display:grid; gap:12px; min-width:0; }
  .꿈자산페이지>.내위치 { grid-column:2; grid-row:3; }.꿈자산페이지>.꿈보유자산 { grid-column:1; grid-row:3; }
  .꿈자산왼 { grid-column:1; grid-row:4 / span 2; }.꿈자산오른 { grid-column:2; grid-row:4; }
  .꿈자산페이지 .꿈자산 { padding:16px 24px; }
  .꿈자산페이지 .꿈자산>.꿈아이콘 { width:84px; height:84px; }
  .꿈자산페이지 .꿈자산 h2 { font-size: calc((24px) * var(--글배, 1)); }
  .꿈랭킹줄 { display:flex; align-items:center; gap:8px; width:100%; padding:4px 0; border-bottom:1px solid var(--줄); font-size: calc((12px) * var(--글배, 1)); text-align:left; }
  .꿈랭킹줄.나 { background: var(--강조연함); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
  .꿈랭킹줄:last-of-type { border-bottom:0; }
  .꿈랭킹등수 { width:18px; color:var(--글흐림); }
  .꿈랭킹이름 { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:4px; }
  .꿈새글줄 { display:block; width:100%; text-align:left; padding:8px 0; border-bottom:1px solid var(--줄); }
  .꿈새글줄:last-of-type { border-bottom:0; }
  .꿈새글글 { display:block; font-size: calc((12px) * var(--글배, 1)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .꿈새글줄 small { display:block; margin-top:4px; font-size: calc((11px) * var(--글배, 1)); }
  .꿈홈아래>.꿈카드 { margin:0; }
  .꿈홈아래>.꿈카드+.꿈카드,.꿈홈아래>.꿈카드+section { margin-top:12px; }
  .순위줄 { row-gap:0; }
  .꿈인사 { margin-bottom:8px; }
  .꿈자산 { padding:16px 24px; border-radius:12px; }
  .꿈자산 p { margin:8px 0 4px; font-size: calc((12px) * var(--글배, 1)); }
  .꿈자산 h2 { font-size: calc((24px) * var(--글배, 1)); margin-bottom:8px; letter-spacing:-1px; }
  .꿈자산>.꿈아이콘 { width:96px; height:96px; }
  .꿈자산보기 { margin-top:12px; }
  .꿈단계 { margin:12px 0; gap:12px; }
  .꿈단계 .꿈아이콘,.꿈단계상 img { width:48px; height:48px; }
  .꿈할일띠 { padding:8px 12px; margin-bottom:12px; }
  .랭킹초대 { padding:8px 16px; margin:12px 0; border-radius:12px; gap:12px; }
  .랭킹초대 b { font-size: calc((13px) * var(--글배, 1)); }
  .랭킹초대 .영예배지 { width:28px; height:32px; }
  .꿈투자 { margin-top:12px; }
  .꿈홈 .꿈분류 { gap:8px; }
  .꿈홈 .꿈분류 button { flex-direction:row; justify-content:center; padding:8px 8px; gap:8px; border-radius:8px; font-size: calc((12px) * var(--글배, 1)); }
  .꿈홈 .꿈분류 button:hover { transform:none; }
  .꿈홈 .꿈분류 .꿈아이콘 { width:28px; height:28px; }
  .꿈홈아래 { gap:12px; margin:12px 0; }
  .AI문 { padding:8px 12px; min-height:0; }
  .꿈거래 { grid-template-rows:60px minmax(400px,1fr) minmax(120px,150px); gap:8px 12px; }
  .꿈거래 .판머리 { padding:8px 16px; border-radius:12px; }
  .꿈거래 .판값 b { font-size: calc((24px) * var(--글배, 1)); }
  .꿈거래 .판자세히 { display:none; }
  .꿈거래 .판왼 { padding:8px 16px 8px; border-radius:12px; gap:8px; }
  .꿈거래 .판차트 { min-height:320px; }
  .꿈거래 .판사기 { padding:12px; border-radius:12px; }
  .꿈주문제목 { font-size: calc((15px) * var(--글배, 1)); margin-bottom:12px; }
  .꿈거래 .판주문속 .큰돈 { font-size: calc((24px) * var(--글배, 1)); }
  .꿈거래 .판띠 { padding:8px 8px; }
  .꿈보유 { padding:12px 16px; }
  .꿈보유 .꿈상태 { padding:12px 0; }
  .순위줄 { padding:4px 0; }
  .순위줄.나 { padding:4px 8px; }
  .순위줄 .영예배지 { width:28px; height:32px; }
  .ㄴ이름 { font-size: calc((13px) * var(--글배, 1)); }
.랭킹내자리줄 > .꿈얼굴 { margin-left:4px; }
.랭킹추천이름 > .꿈얼굴 { vertical-align:-6px; margin-right:4px; }
}
@media (min-width:1600px) {
  .꿈작업공간,.꿈데스크톱.단일화면 .꿈작업공간 { grid-template-columns:240px minmax(0,1fr) 300px; }
  .이야기접힘 .꿈작업공간,.꿈데스크톱.단일화면.이야기접힘 .꿈작업공간 { grid-template-columns:240px minmax(0,1fr) 40px; }
}

.꿈계정차례 { display:none; }
.꿈계정타일들 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.꿈계정타일 { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px; border-radius:12px; background:var(--판2); text-align:left; min-width:0; }
.꿈계정타일 b { font-size: calc((15px) * var(--글배, 1)); }
.꿈계정막대 { display:block; width:100%; height:4px; border-radius:4px; background:var(--줄); margin-top:4px; }
.꿈계정막대 em { display:block; height:100%; border-radius:4px; background:var(--강조); }

.빈카드 { display:flex; flex-direction:column; align-items:center; gap:12px; max-width:480px; margin:16px auto; padding:16px; text-align:center; color:var(--글연함); line-height:1.6; }
.빈카드 p { margin:0; font-size: calc((13px) * var(--글배, 1)); }
.빈카드 .알약단추 { width:auto; padding:0 24px; margin-top:4px; }
.빈카드.작게 { gap:8px; margin:8px auto; padding:12px 12px; }.빈카드.작게 .꿈아이콘 { width:80px; height:80px; }.빈카드.작게 p { font-size: calc((12px) * var(--글배, 1)); }
.숫자머리 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 12px; }
.숫자머리칸 { display:flex; flex-direction:column; gap:4px; padding:12px 12px; border-radius:12px; background:var(--판2); min-width:0; }
.숫자머리칸 b { font-size: calc((18px) * var(--글배, 1)); letter-spacing:-.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.숫자머리칸 small { font-size: calc((11px) * var(--글배, 1)); }
.기록표 { width:100%; border-collapse:collapse; font-size: calc((12px) * var(--글배, 1)); }
.기록표 th { text-align:left; font-weight:500; color:var(--글연함); padding:8px 8px; border-bottom:1px solid var(--줄); white-space:nowrap; }
.기록표 td { padding:8px 8px; border-bottom:1px solid var(--줄); vertical-align:middle; }
.기록표 tbody tr:nth-child(even) { background:color-mix(in srgb, var(--판2) 55%, transparent); }
.기록표 tbody tr:hover { background:var(--판2); }
.기록표 .숫자, .기록표 th.숫자 { text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width:600px) { .숫자머리 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; } .숫자머리칸 { padding:8px; } .숫자머리칸 b { font-size: calc((15px) * var(--글배, 1)); } }
@media (min-width:1100px) { .숫자머리 { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); max-width:760px; } .숫자머리칸 b { font-size: calc((24px) * var(--글배, 1)); } }

.꿈소식줄 { display:block; width:100%; text-align:left; padding:8px 0; border-bottom:1px solid var(--줄); }
.꿈소식줄:last-of-type { border-bottom:0; }
.꿈소식글 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size: calc((13px) * var(--글배, 1)); line-height:1.45; overflow:hidden; }
.꿈소식방향 { padding-left:12px; position:relative; }
.꿈소식방향:before { content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:currentColor; }
.꿈소식방향.오름 { color:var(--글); } .꿈소식방향.오름:before { background:var(--오름); }
.꿈소식방향.내림 { color:var(--글); } .꿈소식방향.내림:before { background:var(--내림); }
.꿈소식줄 small { display:block; margin-top:4px; font-size: calc((11px) * var(--글배, 1)); line-height:1.4; }
.랭킹아래 { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:16px; }
.랭킹내자리줄 { display:flex; align-items:center; gap:8px; margin-top:4px; }
.랭킹추천줄 { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--줄); }
.랭킹추천줄:last-of-type { border-bottom:0; }
.랭킹추천이름 { flex:1; min-width:0; text-align:left; display:flex; align-items:center; gap:4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.랭킹추천이름 b { color:var(--글흐림); margin-right:4px; }

a.꿈종목 { color:inherit; text-decoration:none; }
.꿈윗길 a { display:flex; align-items:center; color:inherit; text-decoration:none; }
.윗장상태 { font-size: calc((11px) * var(--글배, 1)); color:var(--글흐림); margin-left:4px; }

/* 토스 판은 부동산이 빠져 분류가 다섯이다. 3열에 5개면 둘째 줄 오른쪽이 빈다 —
   6열로 깔고 앞 셋은 2칸씩, 마지막 둘은 3칸씩 먹여 가운데로 채운다.
   여섯 개인 웹 판은 건드리지 않는다.
   ★ 속성 이름은 ASCII 여야 한다 — data-몇 으로 썼더니 DOM 이 통째로 버렸다(실측). */
.꿈분류[data-cols="5"] > button { grid-column: span 1; }
.꿈분류.작게[data-cols="5"] { grid-template-columns: repeat(6,minmax(0,1fr)); }
.꿈분류.작게[data-cols="5"] > button { grid-column: span 2; }
.꿈분류.작게[data-cols="5"] > button:nth-child(4),
.꿈분류.작게[data-cols="5"] > button:nth-child(5) { grid-column: span 3; }
@media (max-width:1099px) {
  .꿈분류[data-cols="5"] { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .꿈분류[data-cols="5"] > button { grid-column: span 2; }
  .꿈분류[data-cols="5"] > button:nth-child(4),
  .꿈분류[data-cols="5"] > button:nth-child(5) { grid-column: span 3; }
}
.홈갈래 { margin:0 0 16px; }
.홈갈래 button { font-size: calc((11px) * var(--글배, 1)); }
.꿈성장 .꿈계정타일들 { margin-top:4px; }
.내위치줄 { display:flex; align-items:center; gap:12px; width:100%; padding:12px 0; background:none; border:0; border-top:1px solid var(--줄); color:inherit; font:inherit; text-align:left; cursor:pointer; }
.내위치줄:first-of-type { border-top:0; padding-top:4px; }.내위치줄:last-of-type { padding-bottom:4px; }
.내위치줄 .꿈아이콘,.내위치줄 .포인트이미지 { width:44px; height:44px; flex:none; }
.내위치글 { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.내위치글 b { font-size: calc((15px) * var(--글배, 1)); letter-spacing:-.2px; }.내위치글 small { font-size: calc((11px) * var(--글배, 1)); }
.내위치끝 { flex:none; font-size: calc((12px) * var(--글배, 1)); font-weight:700; }.내위치받기 { color:var(--강조); }
.내위치 .꿈단계홈 { display:block; margin-top:4px; }.내위치 .꿈단계참 { display:block; }
.단계딱지 { display:inline-block; vertical-align:-3px; margin-left:4px; }


/* 공지 띠 — 데스크톱 홈 맨 윗줄. 상자를 안 씌운다. 글자만 얹힌다. */
.공지띠{display:flex;align-items:center;gap:8px;width:100%;min-width:0;text-align:left;
  padding:0;background:none;border:0;color:var(--글연함)}
.공지띠표{flex:none;font-size: calc((11px) * var(--글배, 1));font-weight:700;color:var(--강조)}
.공지띠글{flex:1;min-width:0;font-size: calc((13px) * var(--글배, 1));font-weight:600;color:var(--글연함);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:공지올라옴 .42s cubic-bezier(.2,.8,.3,1)}
.공지띠점{flex:none;display:flex;gap:4px}
.공지띠점 u{width:4px;height:4px;border-radius:50%;background:var(--줄);text-decoration:none;transition:background .3s}
.공지띠점 u.켜짐{background:var(--강조)}
.공지띠끝{flex:none;color:var(--글흐림);font-size: calc((13px) * var(--글배, 1))}
.공지띠:hover .공지띠글{color:var(--글)}
@keyframes 공지올라옴{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.공지띠글{animation:none}}
/* AI 줄 — 코덱스·클로드·규칙 봇. 붙여 세운다. */
.AI문들{display:flex;flex-direction:column;gap:4px}
.AI문들>.AI문{margin:0}
/* 눈에는 안 보이고 스크린리더에만 읽히는 글 */
.소리로만{position:absolute;width:1px;height:1px;padding:0;margin:-4px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* 장 상태 — 색만으로 가르지 않는다. 닫힌 장은 «빈 고리». */
.윗장칸 i{background:transparent;border:1.5px solid var(--글흐림);box-sizing:border-box}
.윗장칸.열림 i{background:#17A673;border-color:#17A673}
.윗장칸.언저리 i{background:transparent;border-color:#C9B8FF}
/* 불편·제안 — 찾기 옆. 눈에 띄되 검색칸을 안 누른다. */
.윗의견{display:flex;align-items:center;gap:4px;flex:none;white-space:nowrap;
  height:36px;padding:0 12px;border-radius:12px;font-size: calc((12px) * var(--글배, 1));font-weight:600;
  color:var(--강조);background:var(--강조연함);border:1px solid transparent;transition:border-color .15s}
.윗의견 svg{width:16px;height:16px;flex:none}
.윗의견:hover{border-color:var(--강조)}
@media(max-width:1439px){.윗의견{padding:0 8px}.윗의견 span{display:none}}

.꿈이름창 { text-align:center; }
.꿈이름창 .꿈얼굴 { margin:12px auto 8px; display:block; }
.꿈이름값 { font-size: calc((24px) * var(--글배, 1)); font-weight:800; letter-spacing:-.01em; margin:0 0 16px; }
.꿈이름잔 { margin:8px 0 0; font-size: calc((12px) * var(--글배, 1)); opacity:.55; }
.꿈이름겉 .꿈안내창 > .알약단추 { width:100%; }

@keyframes 창솟음 { from { opacity:0; transform:translateY(10px) scale(.98); } }
.묻는창, .꿈안내창, .이야기메뉴겉 > *, .글쓰기겉 > * { animation:창솟음 .22s cubic-bezier(.2,.8,.2,1) both; }
.묻는겉, .꿈안내겉, .꿈이름겉, .이야기메뉴겉, .글쓰기겉 { animation:스밈 .16s ease-out both; }
.탭바 button { transition:transform .09s ease, color .15s ease; }
.고르개 button, .칩, .정렬칩, .꿈분류 button { transition:background-color .15s ease, color .15s ease, transform .12s ease, opacity .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .묻는창, .꿈안내창, .이야기메뉴겉 > *, .글쓰기겉 > *, .묻는겉, .꿈안내겉, .꿈이름겉, .이야기메뉴겉, .글쓰기겉 { animation:none; }
}

.꿈충전창 { max-width:420px; }
.꿈충전줄 { width:100%; margin-top:8px; }
.꿈충전줄 .이름칸 b { display:block; font-size: calc((13px) * var(--글배, 1)); }

.꿈공지줄 { margin:0 0 16px; padding:8px 12px; border:1px solid var(--줄); border-radius:16px; background:var(--판); min-height:44px; display:flex; align-items:center; box-sizing:border-box; }
.꿈공지줄 .공지띠 { min-height:44px; width:100%; }

.불편단추 { position:fixed; right:16px; z-index:20;
            bottom:calc(88px + env(safe-area-inset-bottom,0px));
            display:flex; align-items:center; gap:8px;
            padding:12px 16px; border-radius:999px;
            background:var(--판2); color:var(--강조);
            border:1px solid var(--줄); box-shadow:0 8px 24px rgba(0,0,0,.28);
            font-size: calc((13px) * var(--글배, 1)); font-weight:700; }
.불편단추 svg { width:16px; height:16px; flex:none; }
.불편단추:active { transform:scale(.96); }

/* 나란히 선 랭킹 칸이 넉넉할 때만(640px~) 변동·딱지·평가를 편다.
   창 너비로 재면 커뮤니티 안의 417px 칸에도 넓은 표가 깔려 값이 잘렸다(실측 2026-09-17). */
@container (min-width: 640px) {
  .순위나란히 .순위줄 { grid-template-areas:"등수 변동 이름 딱지 수익 평가";
                        grid-template-columns:40px 40px minmax(120px,1fr) minmax(0,auto) minmax(96px,auto) minmax(92px,auto);
                        column-gap:12px; row-gap:0; padding:8px 0; }
  .순위나란히 .ㄴ변동 { display:block; }
  .순위나란히 .ㄴ딱지 { display:flex; flex-wrap:nowrap; }
  .순위나란히 .ㄴ평가 { display:block; text-align:right; font-weight:600; }
}

/* ── 받은 불편·제안 ─────────────────────────────────────────────
   알림함에서 눌러 들어오는 자리. 한 사람만 쓰는 게 아니라 쭉 쌓이므로 목록이다. */
.받은의견목록 { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:16px; }
/* min-width:0 이 없으면 격자 칸이 «내용만큼» 부푼다. 오류 자취(줄바꿈 없는 긴 코드)가
   칸을 375px 화면에서 497px 로 밀어내 오른쪽이 잘렸다(실측 2026-09-17). */
.받은의견줄 { background:var(--판2); border:1px solid var(--줄); border-radius:16px; padding:16px; min-width:0; }
.받은의견줄.읽음 { opacity:.6; }
.받은의견줄 header { display:flex; align-items:center; gap:8px; margin-bottom:8px; min-width:0; }
.받은의견줄 header small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.받은의견줄 time { font-size: calc((12px) * var(--글배, 1)); color:var(--글흐림); }
.받은의견줄 header small { font-size: calc((11px) * var(--글배, 1)); color:var(--글연함); }
.받은의견발 { display:flex; align-items:center; gap:12px; margin-top:12px; }
.받은의견읽음 { margin-left:auto; flex:none; }
.안읽음점 { width:8px; height:8px; border-radius:999px; background:var(--강조); flex:none; }
.받은의견몸 { margin:0; font-size: calc((15px) * var(--글배, 1)); line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.받은의견답장 { font-size: calc((13px) * var(--글배, 1)); font-weight:600; color:var(--강조); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 매매 카드 안에 펴는 «이 종목을 왜 샀나». 글로 데려가지 않고 그 자리에서 읽힌다.
   까닭(촉매·실적…)은 딱지로, 왜(한 문장)는 글로. 둘은 다른 것이다. */
.매매까닭 { margin:12px 0 0; padding:12px; border-radius:12px; background:var(--판2);
            font-size: calc((13px) * var(--글배, 1)); line-height:1.6; color:var(--글연함); word-break:keep-all; min-width:0; }
.매매까닭머리 { display:flex; align-items:center; gap:8px; }
.매매까닭머리 small { font-size: calc((11px) * var(--글배, 1)); color:var(--글흐림); }
.매매까닭 p { margin:8px 0 0; }

/* 오류 자취 — 코드라 줄바꿈을 지키되 옆으로 구르게 둔다. 화면을 밀면 안 된다. */
.오류자취 { margin:12px 0 0; padding:12px; border-radius:8px; background:var(--판2);
            font-size: calc((11px) * var(--글배, 1)); line-height:1.5; color:var(--글흐림);
            overflow-x:auto; white-space:pre; max-height:160px; min-width:0; max-width:100%; }
.받은오류화면 .받은의견줄 header b { font-size: calc((12px) * var(--글배, 1)); }
.오류갈피 { margin-top:16px; }

/* 터진 화면 — 손님에겐 번호만. 속은 내 자리에서만 편다. */
.터진칸 { margin-top:24px; text-align:center; }
.터진말 { margin:12px 0 0; font-size: calc((13px) * var(--글배, 1)); line-height:1.6; color:var(--글연함); word-break:keep-all; }
.터진코드 { margin:24px auto 0; display:inline-flex; align-items:center; gap:12px;
            padding:12px 16px; border-radius:12px; background:var(--판2); }
.터진코드 span { font-size: calc((12px) * var(--글배, 1)); color:var(--글흐림); }
.터진코드 b { font-size: calc((18px) * var(--글배, 1)); font-weight:800; letter-spacing:2px; color:var(--강조); }
.터진단추 { margin-top:24px; display:flex; gap:8px; justify-content:center; }
.터진속 { margin:24px 0 0; padding:12px; border-radius:8px; background:var(--판2); text-align:left;
          font-size: calc((11px) * var(--글배, 1)); line-height:1.5; color:var(--글흐림); white-space:pre-wrap;
          overflow-wrap:anywhere; max-height:240px; overflow-y:auto; }
.오류번호 { display:inline-flex; align-items:center; gap:8px; margin-bottom:8px;
            padding:4px 8px; border-radius:8px; background:var(--강조연함); }
.오류번호 span { font-size: calc((11px) * var(--글배, 1)); color:var(--글흐림); }
.오류번호 b { font-size: calc((13px) * var(--글배, 1)); font-weight:800; letter-spacing:1px; color:var(--강조); }

.꿈판때 { display:block; width:100%; margin-top:8px; font-size: calc((11px) * var(--글배, 1)); color:var(--글흐림); text-align:center; letter-spacing:0; }

.기록화면 .강조 { color:var(--강조); }
.기록화면>.머리줄 { margin-bottom:24px; }
.기록표감 { display:none; }
.기록표 td.흐림 { color:var(--글흐림); }
.기록표 tr.선택 td { background:var(--강조연함); }
.기록표 td .딱지 { font-size: calc((11px) * var(--글배, 1)); }
.기록표 td .칩 { min-height:28px; padding:4px 8px; font-size: calc((11px) * var(--글배, 1)); }
.기록종목 { display:flex; align-items:center; gap:8px; padding:0; min-width:0; text-align:left; }
.기록종목>span { display:flex; flex-direction:column; min-width:0; }
.기록종목 b { font-size: calc((13px) * var(--글배, 1)); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.기록종목 small { font-size: calc((11px) * var(--글배, 1)); color:var(--글흐림); }
.기록표취소 { display:inline-flex; align-items:center; justify-content:flex-end; gap:4px; flex-wrap:wrap; font-size: calc((11px) * var(--글배, 1)); color:var(--글연함); }
.기록표취소 button { font-size: calc((11px) * var(--글배, 1)); padding:4px 8px; border-radius:8px; background:var(--판2); color:var(--글연함); white-space:nowrap; }
.기록표취소 button.확인 { background:var(--강조); color:var(--강조위글); font-weight:700; }
.작업알림줄>.알림그림 { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:12px; background:var(--판2); color:var(--강조); }
.작업알림줄>.알림그림 svg { width:18px; height:18px; }
.작업알림줄>.알림그림 .영예배지 { width:24px; height:29px; }
.작업알림줄>.알림글 { display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; }
.작업알림줄>.알림글 b { font-size: calc((13px) * var(--글배, 1)); overflow:hidden; text-overflow:ellipsis; }
.알림분류세로 { display:none; }
.알림곁 { min-width:0; }
.지금값 { display:flex; align-items:center; gap:12px; padding:12px 16px; margin:16px 0; border:1px solid var(--줄); border-radius:16px; }
.지금값>span { display:flex; flex-direction:column; gap:4px; min-width:0; }
.지금값>span:nth-child(2) { flex:1; }
.지금값 b { font-size: calc((13px) * var(--글배, 1)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.지금값 small { font-size: calc((11px) * var(--글배, 1)); color:var(--글흐림); }
.지금값숫자 { align-items:flex-end; }
.지금값숫자 b { font-size: calc((18px) * var(--글배, 1)); }
.일지제목 { display:flex; align-items:center; gap:8px; }
.일지화면>.숫자머리 { margin-top:12px; }

@media (min-width:1100px) {
  .기록화면 h1, .기록화면 .제목 { font-size: calc((18px) * var(--글배, 1)); }
  .기록화면>.머리줄 { margin-bottom:16px; }
  .기록화면 .숫자머리 { max-width:900px; }
  .기록화면 .숫자머리칸 b { font-size: calc((32px) * var(--글배, 1)); }
  .기록화면 .기록폰 { display:none; }
  .기록화면 .기록표감 { display:block; overflow-x:auto; margin-top:16px; }
  .꿈기록페이지.기록화면>.꿈보조버튼 { width:auto; margin:0; padding:0 16px; }
  .꿈기록페이지.기록화면>.꿈갈피 { margin:16px 0; }
  .알림몸 { display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; align-items:start; }
  .알림몸 .알림분류폰 { display:none; }
  .알림분류세로 { display:flex; flex-direction:column; gap:4px; position:sticky; top:0; }
  .알림분류세로>button { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; font-size: calc((12px) * var(--글배, 1)); color:var(--글연함); text-align:left; }
  .알림분류세로>button:hover { background:var(--판2); color:var(--글); }
  .알림분류세로>button.선택 { background:var(--강조연함); color:var(--강조); font-weight:700; }
  .알림분류세로>button b { font-size: calc((11px) * var(--글배, 1)); font-weight:600; min-width:22px; text-align:center; padding:4px 8px; border-radius:999px; background:var(--판2); color:var(--글연함); }
  .알림분류세로>button.선택 b { background:var(--강조); color:var(--강조위글); }
  .알림분류세로>.꿈보조버튼 { margin-top:12px; }
  .알림목록 .작업알림줄 { padding:12px 4px; }
  .알림판 { display:grid; grid-template-columns:480px minmax(0,1fr); gap:24px; align-items:start; }
  .알림판>.작업작성 { margin:0; }
  .알림곁 .지금값 { margin:0 0 12px; }
  .알림곁 .작업알림줄 { padding:12px 4px; }
  .일지들 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .일지들>.작업작성 { margin:0; }
  .일지제목 { font-size: calc((13px) * var(--글배, 1)); }
}

.시세기준 { font-size: calc((11px) * var(--글배, 1)); color:var(--글흐림); }
@media (min-width:1100px) {
  .시세목록 .꿈목록정렬 .꿈선택 { display:none; }
  .시세표감 { margin-top:-4px; }
  .시세표 { font-size: calc((13px) * var(--글배, 1)); }
  .시세표 th { position:sticky; top:0; z-index:1; height:40px; padding:0 8px; font-size: calc((11px) * var(--글배, 1)); background:var(--판); white-space:nowrap; }
  .시세표 td { height:40px; padding:0 8px; white-space:nowrap; }
  .시세표 tbody tr { cursor:pointer; }
  .시세표 td.흐림, .시세표 td .흐림 { color:var(--글흐림); font-size: calc((11px) * var(--글배, 1)); }
  .시세표 .기록종목 { gap:8px; }
  .시세표 .기록종목 b { font-size: calc((13px) * var(--글배, 1)); max-width:260px; }
  .시세표 .기록종목 small { font-size: calc((11px) * var(--글배, 1)); }
  .시세표 td>b.숫자 { font-weight:600; }
  .시세표머리 { display:inline-flex; align-items:center; gap:4px; padding:0; font:inherit; color:inherit; }
  .시세표머리:hover, .시세표머리.켜짐 { color:var(--글); }
  .시세표머리.켜짐 { font-weight:700; }
  .시세표머리 i { font-style:normal; font-size: calc((11px) * var(--글배, 1)); }
  .주52띠 { pointer-events:none; position:relative; display:inline-block; width:64px; height:4px; border-radius:4px; background:var(--줄); vertical-align:middle; }
  .주52띠 i { position:absolute; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--강조); }
  .시세목록>.꿈보조버튼 { width:auto; margin:0 auto; padding:8px 24px; }
}

.놀이페이지 .숫자머리칸 b.강조 { color:var(--강조); }
.놀이데스크만 { display:none; }
.놀이환전페이지, .놀이모으기페이지 { display:grid; gap:12px; align-content:start; }
.놀이환전페이지 > .머리줄 { margin-bottom:0; }
.놀이모으기페이지 > .제목 { margin:0; }
.놀이페이지 > .뒤로단추 { margin-bottom:0; }

.놀이묶음 { display:grid; gap:12px; }
.놀이묶음 .꿈제목 { margin-bottom:0; }
.놀이할일격자 { list-style:none; margin:0; padding:0; display:grid; gap:8px; grid-template-columns:minmax(0,1fr); }
.놀이할일카드 { display:grid; gap:8px; padding:12px 16px; border:1px solid var(--줄); border-radius:var(--둥근칸); background:var(--판); box-shadow:var(--그늘); min-width:0; }
.놀이할일카드.받을것 { border-color:var(--강조); }
.놀이할일머리 { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.놀이할일머리 b { font-size: calc((13px) * var(--글배, 1)); font-weight:700; line-height:1.4; word-break:keep-all; min-width:0; }
.놀이보상칩 { flex:none; font-size: calc((11px) * var(--글배, 1)); font-weight:700; color:var(--강조); background:var(--강조연함); border-radius:var(--알약); padding:4px 8px; white-space:nowrap; }
.놀이할일발 { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.놀이할일발 .꿈할일단추, .놀이할일발 .꿈할일끝 { grid-row:auto; grid-column:auto; min-width:88px; }
.놀이할일발 .꿈할일단추 { padding:8px 12px; }
.놀이할일카드.끝남 .놀이할일머리 b { color:var(--글연함); }
.놀이할일카드.끝남 .놀이보상칩 { color:var(--글흐림); background:var(--판2); }
.놀이할일카드.끝남 .꿈할일막대 i { background:var(--글흐림); }

.놀이칭호격자 { list-style:none; margin:0; padding:0; display:grid; gap:8px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.놀이칭호 { position:relative; min-width:0; }
.놀이칭호 > button { width:100%; height:100%; display:grid; justify-items:center; gap:4px; padding:12px 8px 12px; text-align:center; border:1px solid var(--줄); border-radius:var(--둥근칸); background:var(--판); box-shadow:var(--그늘); cursor:pointer; min-width:0; }
.놀이칭호 > button b { font-size: calc((12px) * var(--글배, 1)); font-weight:800; word-break:keep-all; }
.놀이칭호 > button span { max-width:100%; font-size: calc((11px) * var(--글배, 1)); line-height:1.5; color:var(--글연함); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.놀이칭호 > button small { font-size: calc((11px) * var(--글배, 1)); color:var(--글흐림); }
.놀이칭호.잠김 > button { background:var(--판2); box-shadow:none; cursor:default; }
.놀이칭호.잠김 .꿈칭호그림 { opacity:.35; filter:grayscale(1); }
.놀이칭호.잠김 > button b { color:var(--글흐림); }
.놀이칭호.대표 > button { border-color:var(--강조); border-width:2px; }

.놀이계단틀 { display:none; }

.놀이환전 { display:grid; gap:12px; }
.놀이폼 { min-width:0; }
.놀이맥락 { display:grid; align-content:start; }
.놀이맥락 .셈줄 { padding:8px 0; }
.놀이맥락 .셈줄.막 { margin-top:4px; }

.놀이로그인상표 { display:flex; justify-content:center; }

.놀이표틀 { overflow-x:auto; }
.놀이표틀 .기록표 td > button:first-child { display:flex; align-items:center; gap:8px; text-align:left; font-weight:600; white-space:nowrap; }
.놀이표틀 .기록표 tr.멈춤 td { color:var(--글흐림); }
.놀이표틀 .기록표 small { display:block; margin-top:4px; font-size: calc((11px) * var(--글배, 1)); white-space:nowrap; }
.놀이표틀 .기록표 .칩 { padding:4px 12px; font-size: calc((11px) * var(--글배, 1)); }

@media (min-width:1100px) {
  .놀이데스크만 { display:block; }
  .놀이폰만 { display:none !important; }

  .놀이할일격자 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .놀이칭호격자 { grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
  .놀이칭호 > button { padding:16px 8px 12px; gap:4px; }

  .놀이계단틀 { display:grid; gap:16px; padding:24px; border:1px solid var(--줄); border-radius:12px; background:var(--판); }
  .놀이계단 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--칸수,5),minmax(0,1fr)); gap:12px; align-items:end; }
  .놀이계단칸 { position:relative; display:grid; justify-items:center; align-content:end; gap:4px; min-height:calc(132px + var(--차례,0) * 14px); padding:16px 8px 12px; border:1px solid var(--줄); border-radius:12px; background:var(--판2); text-align:center; min-width:0; }
  .놀이계단칸 b { font-size: calc((13px) * var(--글배, 1)); font-weight:800; letter-spacing:-.2px; }
  .놀이계단칸 span { font-size: calc((11px) * var(--글배, 1)); color:var(--글연함); }
  .놀이계단칸 img { filter:drop-shadow(0 6px 14px #7847cf28); }
  .놀이계단칸.잠김 { background:transparent; border-style:dashed; }
  .놀이계단칸.잠김 img { opacity:.35; filter:grayscale(1); }
  .놀이계단칸.잠김 b, .놀이계단칸.잠김 span { color:var(--글흐림); }
  .놀이계단칸.지금 { background:linear-gradient(150deg,var(--강조연함),var(--판) 70%); border-color:var(--강조); box-shadow:var(--그늘); padding-top:24px; }
  .놀이계단칸.지금 b { font-size: calc((18px) * var(--글배, 1)); color:var(--강조); }
  .놀이계단칸 .꿈증서딱지 { position:absolute; top:-11px; left:50%; transform:translateX(-50%); margin:0; white-space:nowrap; background:var(--판); border:1px solid var(--강조); }
  .놀이계단남은 { display:grid; gap:8px; }
  .놀이계단남은 p, .놀이계단말 { margin:0; font-size: calc((12px) * var(--글배, 1)); color:var(--글연함); }
  .놀이계단남은 p b { color:var(--글); }

  .놀이환전 { grid-template-columns:480px minmax(0,1fr); gap:16px; align-items:start; max-width:960px; }
  .놀이맥락 { position:sticky; top:0; }

  .꿈로그인페이지.놀이페이지 { min-height:560px; grid-template-rows:auto minmax(0,1fr); }
  .놀이로그인카드 { align-self:center; padding:32px 24px; border:1px solid var(--줄); border-radius:16px; background:var(--판); box-shadow:var(--그늘); text-align:center; }
  .놀이로그인카드 h1 { font-size: calc((18px) * var(--글배, 1)); }
  .놀이로그인카드 .꿈로그인잔 { font-size: calc((11px) * var(--글배, 1)); }
}

.문서머리 { margin-bottom: 12px; }
.문서머리 h1 { font-size: calc((24px) * var(--글배, 1)); }
.문서머리 .찾는칸 { margin-top: 12px; }
.문서차례 { display: none; }
.문서묶음 { margin-top: 24px; scroll-margin-top: 16px; }
.문서속 .문서글 h2, .문서속 .문서글 h3 { scroll-margin-top: 16px; }

.공지제목 { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.공지새 { font-size: calc((11px) * var(--글배, 1)); }
.공지때 { margin-left: auto; font-weight: 400; padding-right: 8px; white-space: nowrap; }
.공지머리 { display: flex; align-items: center; padding: 12px 4px; font-size: calc((15px) * var(--글배, 1)); font-weight: 600; }

.의견곁 { display: none; }

.찾기제목 { display: none; }
.찾기묶음 { margin-top: 16px; }
.찾기묶음 .제목 { font-size: calc((15px) * var(--글배, 1)); }
.찾기격자 > .줄 { min-width: 0; }

@media (min-width: 1100px) {
  .꿈페이지 .문서머리 h1, .꿈페이지 .찾기머리 .제목 { font-size: calc((32px) * var(--글배, 1)); letter-spacing: -.8px; }
  .문서머리 .찾는칸 { margin-top: 16px; }
  .문서틀 { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .문서차례 { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; }
  .문서차례 button { text-align: left; padding: 8px 8px; border-radius: 8px; font-size: calc((12px) * var(--글배, 1)); line-height: 1.4;
                     color: var(--글연함); word-break: keep-all; }
  .문서차례 button:hover { background: var(--판2); }
  .문서차례 button.켜짐 { color: var(--강조); background: var(--강조연함); font-weight: 700; }
  .문서차례 button.작은단 { padding-left: 24px; font-size: calc((11px) * var(--글배, 1)); }
  .문서속 { min-width: 0; }
  .문서묶음:first-child { margin-top: 0; }

  .의견틀 { display: grid; grid-template-columns: 480px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .의견폼 { max-width: 480px; }
  .의견폰줄 { display: none; }
  .의견곁 { display: block; position: sticky; top: 0; }
  .의견곁머리 { display: flex; align-items: center; justify-content: space-between; width: 100%;
                padding: 8px 8px; font-size: calc((13px) * var(--글배, 1)); font-weight: 700; color: var(--글); text-align: left; }
  .의견곁머리 span { color: var(--글연함); }
  .의견곁줄 { display: block; width: 100%; text-align: left; padding: 8px 8px; border-radius: 8px;
              font-size: calc((12px) * var(--글배, 1)); line-height: 1.5; color: var(--글연함); word-break: keep-all; }
  .의견곁줄:hover { background: var(--판2); color: var(--글); }

  .찾기머리 { flex-wrap: wrap; row-gap: 16px; }
  .찾기제목 { display: block; }
  .찾기머리 .찾는칸 { flex: 1 1 100%; max-width: 760px; padding: 12px 16px; gap: 12px; }
  .찾기머리 .찾는칸 svg { width: 22px; height: 22px; }
  .찾기머리 .찾는칸 input { font-size: calc((18px) * var(--글배, 1)); }
  .찾기묶음 { margin-top: 24px; }
  .꿈페이지 .찾기묶음 .제목 { font-size: calc((18px) * var(--글배, 1)); }
  .찾기격자 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
}

main.꿈거래 { grid-template-rows: auto minmax(540px, 1fr) minmax(140px, 170px); }
.꿈거래 .복판 .판머리 { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; padding: 12px 24px 12px; }
.꿈거래 .판머리줄 { display: flex; align-items: center; gap: 12px; min-width: 0; }
.꿈거래 .복판 .판이름 h1 { font-size: calc((18px) * var(--글배, 1)); }
.꿈거래 .복판 .판값 { gap: 4px; }
.꿈거래 .복판 .판값 b { font-size: calc((24px) * var(--글배, 1)); }
.꿈거래 .판값줄 { display: flex; align-items: center; gap: 8px; }
.꿈거래 .판어제 { font-size: calc((12px) * var(--글배, 1)); font-weight: 600; }
.꿈거래 .판어제:not(.오름):not(.내림) { color: var(--글흐림); }
.꿈거래 .판예상 { font-size: calc((11px) * var(--글배, 1)); font-weight: 500; }
.꿈거래 .판기준때 { font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); }
.꿈거래 .판통계 { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: calc((12px) * var(--글배, 1)); line-height: 1.4; }
.꿈거래 .판통계 > span { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.꿈거래 .판통계 i { font-style: normal; color: var(--글흐림); }
.꿈거래 .판통계 b { font-weight: 600; }
.꿈거래 .판범위들 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.꿈거래 .판범위 { display: grid; gap: 4px; }
.꿈거래 .판범위 .판52주띠 { margin: 4px 0 4px; }
.꿈거래 .판범위끝 { display: flex; justify-content: space-between; }
.꿈거래 .복판 .판왼 > .꿈갈피 { margin-top: 0; }
.꿈거래 .판차트칸 { flex: 1; min-height: 0; display: flex; gap: 12px; }
.꿈거래 .판차트칸 > .판차트 { flex: 1 1 auto; min-width: 0; }
.꿈거래 .판호가갈피 { flex: 1; min-height: 0; display: flex; justify-content: center; }
.꿈거래 .판호가갈피 > .판호가 { flex: 1 1 auto; max-width: 480px; }
.꿈거래 .판호가 { flex: 0 0 272px; min-height: 0; display: flex; flex-direction: column; font-size: calc((12px) * var(--글배, 1)); border: 1px solid var(--줄); border-radius: 12px; overflow: hidden; background: var(--판); }
.꿈거래 .호가머리, .꿈거래 .호가줄, .꿈거래 .호가합 { display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); align-items: center; }
.꿈거래 .호가머리 { flex: none; height: 22px; font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); background: var(--판2); text-align: center; }
.꿈거래 .호가몸 { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.꿈거래 .호가빈칸 { flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; }
.꿈거래 .호가줄 { height: 18px; }
.꿈거래 .호가양 { position: relative; height: 100%; display: flex; align-items: center; padding: 0 4px; color: var(--글연함); font-size: calc((11px) * var(--글배, 1)); }
.꿈거래 .호가줄.팔 .호가양 { justify-content: flex-end; }
.꿈거래 .호가양 > i { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; }
.꿈거래 .호가줄.팔 .호가양 > i { right: 0; background: var(--내림연함); }
.꿈거래 .호가줄.살 .호가양 > i { left: 0; background: var(--오름연함); }
.꿈거래 .호가양 > span { position: relative; }
.꿈거래 .호가값 { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 4px; border-radius: 4px; overflow: hidden; white-space: nowrap; }
.꿈거래 .호가값:hover { background: var(--강조연함); }
.꿈거래 .호가값 b { font-weight: 600; }
.꿈거래 .호가값 small { font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림); }
.꿈거래 .호가줄.지금 .호가값 { box-shadow: inset 0 0 0 1px var(--글); }
.꿈거래 .호가합 { flex: none; height: 24px; border-top: 1px solid var(--줄); font-size: calc((11px) * var(--글배, 1)); }
.꿈거래 .호가합 > span:first-child { text-align: right; padding-right: 4px; color: var(--내림); font-weight: 600; }
.꿈거래 .호가합 > span:nth-child(2) { text-align: center; color: var(--글흐림); }
.꿈거래 .호가합 > span:last-child { padding-left: 4px; color: var(--오름); font-weight: 600; }
.꿈거래 .판체결 .꿈표 td, .꿈거래 .판투자자 .꿈표 td { padding: 8px 12px; }
.꿈거래 .판체결 .꿈표 th, .꿈거래 .판투자자 .꿈표 th { position: sticky; top: 0; z-index: 1; }
.꿈거래 .판투자자오늘 { display: flex; align-items: baseline; gap: 24px; margin-bottom: 12px; font-size: calc((13px) * var(--글배, 1)); }
.꿈거래 .판투자자오늘 > span { display: inline-flex; align-items: baseline; gap: 4px; }
.꿈거래 .판투자자오늘 i { font-style: normal; color: var(--글흐림); font-size: calc((12px) * var(--글배, 1)); }
.꿈거래 .판투자자오늘 b { font-weight: 700; }


/* 종목 차트 — 캔들차트.jsx 가 쓰는 자리.
   꿈.css·빛깔.css 를 옆 세션이 늘 만지고 있어서 **따로 파일을 뒀다**(2026-09-15). */

/* 높이를 안 받으면 100% 가 된다 — 칸이 높이를 안 쥐고 있으면 0 으로 찌부러지니
   바닥을 깔아 둔다. 「차트가 사라졌다」는 그 한 줄로 막는다. */
.캔들차트감 { position: relative; width: 100%; min-height: 120px; }
.캔들차트칸 { position: absolute; inset: 0; }

/* 범례 — 차트 «위»에 떠서 짚은 자리의 값을 말한다.
   마우스를 받으면 안 된다: 십자선이 범례에 가려 끊긴다. */
.차트범례 {
  position: absolute; left: 6px; z-index: 3; pointer-events: none;
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  font-size: calc((11px) * var(--글배, 1)); line-height: 1.5; color: var(--글연함, #706784);
  font-variant-numeric: tabular-nums;
}
.값범례 { top: 4px; right: 76px; }      /* 오른쪽은 가격 축 자리를 비운다 */
.량범례 { bottom: 26px; }

/* 거래량 범례는 «막대 위»에 앉는다 — 바탕을 안 깔면 막대에 묻혀 안 읽힌다
   (2026-09-15 실측: 밝은 모드에서 「거래량 3.3만」이 막대와 겹쳐 뭉갰다). */
.량범례 .차트범례칸 {
  background: color-mix(in srgb, var(--판, #fff) 82%, transparent);
  border-radius: 4px; padding: 4px 4px;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .량범례 .차트범례칸 { background: var(--판, #fff); }
}

.차트범례칸 { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.차트풍선 {
  position: absolute; top: 24px; left: 0; z-index: 4; display: none; pointer-events: none;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--줄, #eae4f3);
  background: var(--판, #fff); box-shadow: 0 4px 12px rgba(41, 33, 66, .14);
  white-space: nowrap; line-height: 1.4; font-variant-numeric: tabular-nums;
}
.차트풍선.보임 { display: grid; gap: 0; }
.차트풍선때 { font-size: calc((12px) * var(--글배, 1)); font-weight: 700; color: var(--글, #292142); }
.차트풍선값 { display: flex; align-items: baseline; gap: 4px; font-size: calc((15px) * var(--글배, 1)); font-weight: 700; color: var(--글, #292142); }
.차트풍선값 em { font-style: normal; font-size: calc((12px) * var(--글배, 1)); font-weight: 700; }
.차트풍선넷 { font-size: calc((11px) * var(--글배, 1)); color: var(--글연함, #706784); }
.차트범례칸 i { font-style: normal; opacity: .75; }
/* 이평선 색은 점이 진다 — 글자에 칠하면 11px 얇은 획이 바탕에 묻는다. */
.이평점 { width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center; }
.차트범례칸 b { font-weight: 600; color: var(--글, #292142); }

/* 폰에선 시·고·저·종 넉 자와 이평선 넷이 한 줄에 못 든다.
   줄바꿈을 허용하되 차트를 너무 먹지 않게 글자를 줄인다. */
@media (max-width: 520px) {
  .차트범례 { font-size: calc((11px) * var(--글배, 1)); gap: 4px 8px; right: 68px; }
  /* 이평선 «값»은 감춘다 — 선은 그대로 그려진다. 폰에서 넷을 다 적으면
     범례가 세 줄이 되어 차트가 그만큼 짓눌린다. */
  .값범례 .이평칸 { display: none; }
}

.캔들차트감 { container-type: inline-size; }
@container (max-width: 520px) {
  .차트범례 { font-size: calc((11px) * var(--글배, 1)); gap: 4px 8px; right: 68px; }
  .값범례 .이평칸 { display: none; }
}

/* ── 차트 종류 고르개 ─────────────────────────────────
   기간 칩과 «갈라» 둔다. 세로줄 하나가 「여기부터는 다른 축」을 말한다. */
.차트종류가름 {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto; padding-left: 8px;
  border-left: 1px solid var(--줄, #eae4f3);
}
.차트종류 {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--판2, #f3eefa); color: var(--글흐림, #80758f);
}
.차트종류.켜짐 { background: var(--강조연함, #eee5fc); color: var(--강조, #7847cf); }
.차트로그 { width: auto; padding: 0 8px; font-size: calc((11px) * var(--글배, 1)); font-weight: 600; }
.차트종류:focus-visible { outline: 2px solid var(--강조, #7847cf); outline-offset: 2px; }

/* 차트 종류 메뉴 — 단추 밑에 뜬다. 차트 위로 떠야 하니 z-index 를 높게. */
.차트종류감 { position: relative; display: inline-flex; }
/* 메뉴는 «위»로 연다. 이 단추는 차트 바로 밑, 칸의 아래쪽에 서 있어서
   아래로 내리면 칸 밖으로 넘쳐 잘린다(사장님 지적 2026-09-15).
   위에는 차트가 있어 자리가 넉넉하다 — 덮어도 메뉴 고르는 동안뿐이다. */
.차트종류메뉴 {
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 40;
  display: flex; flex-direction: column; min-width: 148px; padding: 4px;
  background: var(--판, #fff); border: 1px solid var(--줄, #eae4f3);
  border-radius: 12px; box-shadow: 0 10px 34px rgba(40, 24, 72, .16);
}
.차트종류메뉴 button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 8px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--글, #292142);
  font-size: calc((13px) * var(--글배, 1)); text-align: left; white-space: nowrap;
}
.차트종류메뉴 button:hover { background: var(--강조연함, #eee5fc); }
.차트종류메뉴 button.골랐음 { color: var(--강조, #7847cf); font-weight: 600; }
.차트종류메뉴 button:focus-visible { outline: 2px solid var(--강조, #7847cf); outline-offset: -2px; }

/* ── 단축키 표 — 데스크톱에서 ? 를 누르면 뜬다 ─────────────── */
.단축키창 h2 { margin: 0 0 12px; font-size: calc((15px) * var(--글배, 1)); font-weight: 800; }
.단축키목록 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0 0 16px; }
.단축키목록 > div { display: flex; align-items: center; gap: 8px; }
.단축키목록 dt, .단축키목록 dd { margin: 0; }
.단축키목록 dd { font-size: calc((13px) * var(--글배, 1)); color: var(--글연함, #706784); }
.단축키목록 kbd {
  display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 8px;
  border: 1px solid var(--줄, #eae4f3); border-bottom-width: 2px; border-radius: 4px;
  background: var(--판2, #f3eefa); color: var(--글, #292142);
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 기간 칩 줄 + 차트 종류 단추. 칩 줄만 구르고 단추는 안 구른다. */
.차트줄 { display: flex; align-items: center; gap: 4px; min-width: 0; margin-top: 12px; }
.차트줄 > .한줄칩줄, .차트줄 > .칩줄 { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.차트줄 > .차트종류가름 { flex: 0 0 auto; }

/* ── AI 관람 ─────────────────────────────────────────
   「동물원의 동물」을 보는 자리. 무엇을 왜 했고, 무엇을 넘겼고, 맞았는지.
   꿈.css·빛깔.css 는 옆 세션이 늘 만져서 여기에 둔다(2026-09-15). */
.AI속 { margin-top: 16px; }

.AI성적머리 { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 8px; }
.AI성적머리 b { font-size: calc((24px) * var(--글배, 1)); letter-spacing: -.5px; }

.AI대비 { margin: 4px 0 8px; font-size: calc((13px) * var(--글배, 1)); color: var(--글, #292142); }
.AI대비 b { font-variant-numeric: tabular-nums; }
.AI대비.오름 b { color: var(--오름); }
.AI대비.내림 b { color: var(--내림); }
.AI문대비 {
  display: inline-block; margin-right: 8px; font-style: normal;
  font-variant-numeric: tabular-nums; color: var(--글흐림, #80758f); font-size: calc((12px) * var(--글배, 1));
}

.AI까닭들 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.AI까닭들 li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 8px; border-radius: 8px; background: var(--판2, #f3eefa);
  font-size: calc((13px) * var(--글배, 1));
}
.AI까닭들 li > span { min-width: 44px; font-weight: 600; }
.AI까닭들 li > i { font-style: normal; color: var(--글흐림, #80758f); font-size: calc((12px) * var(--글배, 1)); }
.AI까닭들 li > b { margin-left: auto; font-variant-numeric: tabular-nums; }

.AI판 {
  margin-top: 12px; padding: 12px; border-radius: 16px;
  border: 1px solid var(--줄, #eae4f3); background: var(--판, #fff);
}
.AI판머리 { display: flex; align-items: baseline; gap: 8px; }
.AI판머리 b { font-size: calc((15px) * var(--글배, 1)); font-variant-numeric: tabular-nums; }
.AI생각 { margin: 8px 0 0; font-size: calc((13px) * var(--글배, 1)); line-height: 1.7; color: var(--글, #292142); }

.AI배분 { margin-top: 8px; }
.AI배분띠 { display: flex; height: 6px; border-radius: 999px; overflow: hidden; gap: 4px; }
.AI배분띠 > span { display: block; height: 100%; }
.AI배분글 { display: flex; gap: 12px; margin-top: 4px; font-size: calc((11px) * var(--글배, 1)); color: var(--글흐림, #80758f); }
.AI배분글 i { font-style: normal; margin-right: 4px; }
.AI배분글 b { font-variant-numeric: tabular-nums; }

.AI묶음 { margin-top: 12px; }
.AI묶음 h4 { margin: 0 0 4px; font-size: calc((12px) * var(--글배, 1)); color: var(--글흐림, #80758f); font-weight: 600; }

.AI예측줄 {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%;
  padding: 8px 8px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--바탕, #f5f1fb); color: var(--글, #292142);
  font-size: calc((13px) * var(--글배, 1)); text-align: left;
}
.AI예측줄 + .AI예측줄 { margin-top: 4px; }
.AI예측줄:hover { background: var(--강조연함, #eee5fc); }
.AI예측머리 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; }
.AI예측이름 { font-weight: 600; }
.AI까닭 {
  padding: 4px 8px; border-radius: 999px; font-size: calc((11px) * var(--글배, 1));
  background: var(--강조연함, #eee5fc); color: var(--강조, #7847cf);
}
.AI방향 { padding: 4px 8px; border-radius: 999px; font-size: calc((11px) * var(--글배, 1)); font-weight: 600; }
.AI방향.매수 { background: var(--강조연함, #eee5fc); color: var(--강조, #7847cf); }
.AI방향.오름 { background: var(--오름연함, #FDEDEE); color: var(--오름, #E5484D); }
.AI방향.내림 { background: var(--내림연함, #EBF0FE); color: var(--내림, #3E63DD); }
.AI예측가기 { margin-left: auto; }
.AI예측설명 { padding-right: 20px; color: var(--글흐림, #80758f); font-size: calc((12px) * var(--글배, 1)); line-height: 1.5; }
.AI예측설명 b { margin-right: 8px; color: var(--글, #292142); font-weight: 600; }
.AI판정 { padding: 4px 8px; border-radius: 999px; font-size: calc((11px) * var(--글배, 1)); font-weight: 600; }
.AI판정.맞음 { background: var(--오름연함, #FDEDEE); color: var(--오름, #E5484D); }
.AI판정.틀림 { background: var(--내림연함, #EBF0FE); color: var(--내림, #3E63DD); }

/* AI 로 가는 문 — 홈에 한 줄. 카드가 아니라 «줄»이다(칸이 이미 여섯이라). */
.AI문 {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
  margin-top: 12px; padding: 12px 12px; border: 1px solid var(--줄, #eae4f3);
  border-radius: 12px; background: var(--판, #fff); cursor: pointer; text-align: left;
}
.AI문:hover { background: var(--강조연함, #eee5fc); }
.AI문머리 { display: flex; align-items: center; gap: 8px; font-size: calc((13px) * var(--글배, 1)); }
.AI문머리 > b { color: var(--글, #292142); }
.AI문딱지 {
  padding: 4px 4px; border-radius: 999px; font-size: calc((11px) * var(--글배, 1)); font-weight: 700;
  background: var(--강조연함, #eee5fc); color: var(--강조, #7847cf);
}
.AI문때 { margin-left: auto; font-variant-numeric: tabular-nums; }
.AI문말 {
  font-size: calc((12px) * var(--글배, 1)); color: var(--글흐림, #80758f); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 420px) { .AI문때 { display: none; } }   /* 폰에선 이름과 한 마디만 */

/* ── 거래 화면 아랫줄 ─────────────────────────────────
   「내 보유」가 한 줄뿐인데 아랫줄을 통째로 먹고 있었다(사장님 지적 2026-09-15).
   반은 보유, 반은 지금 보는 종목의 이야기. .꿈거래 격자의 1열 3행을 이 둘이 나눈다. */
.꿈거래 .꿈아랫줄 {
  grid-column: 1; grid-row: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px; min-height: 0;
}
/* .꿈보유 는 큰 격자에서 제 자리를 grid-column:1 / grid-row:3 으로 못박아 뒀다.
   그대로 하위 격자에 들어오면 3행을 차지해 둘이 옆으로 안 선다(실측: rows 67px 0 55px).
   꿈.css 는 옆 세션 것이라 여기서 눌러 준다 — 자리는 하위 격자가 정한다. */
.꿈거래 .꿈아랫줄 > section {
  grid-column: auto; grid-row: auto; align-self: stretch;
  min-height: 0; overflow: hidden; display: flex; flex-direction: column;
}
/* 줄 높이가 170px 로 못 박혀 있어서 안쪽이 더 크면 **말없이 잘린다.**
   빈 카드의 그림이 136px 이라 제목과 합치면 넘었다(1920 실측 2026-09-16).
   그림은 남는 만큼만 차지하고, 표는 제 안에서 구른다. */
.꿈거래 .꿈아랫줄 > section > .꿈제목 { flex: none; }
.꿈거래 .꿈아랫줄 > section > .빈카드 {
  flex: 0 0 auto; margin: auto; overflow: visible; min-height: auto;
  padding: 0; gap: 4px;
}
.꿈거래 .꿈아랫줄 > section > .빈카드 .꿈아이콘 { flex: none; width: 40px; height: 40px; }
.꿈거래 .꿈아랫줄 > section > .빈카드 p { overflow: visible; }
.꿈거래 .꿈아랫줄 > section > .꿈표스크롤 { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* 좁은 데스크톱에선 둘이 나란히 서면 각각 글자가 깨진다 — 보유만 남기고 이야기는 접는다. */
@media (max-width: 1180px) {
  .꿈거래 .꿈아랫줄 { grid-template-columns: minmax(0, 1fr); }
  .꿈거래 .꿈아랫줄 > .종목이야기 { display: none; }
}

/* 칸이 작아 여러 줄을 쌓으면 두 줄씩 잘려 아무것도 안 읽힌다 —
   한 번에 하나씩 보여 주고 스스로 넘어간다(사장님 2026-09-15). */
.종목이야기칸 { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
.종목이야기줄 {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
  padding: 8px 8px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--바탕, #f5f1fb); color: var(--글, #292142); text-align: left;
}
.종목이야기줄:hover { background: var(--강조연함, #eee5fc); }
.종목이야기머리 { display: flex; align-items: center; gap: 4px; font-size: calc((11px) * var(--글배, 1)); }
.종목이야기머리 b { font-size: calc((12px) * var(--글배, 1)); }
.종목이야기수 { margin-left: auto; }
.종목이야기몸 {
  font-size: calc((12px) * var(--글배, 1)); line-height: 1.55; color: var(--글연함, #706784);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 새 글이 들어오는 움직임. key 가 바뀌면 다시 돈다. */
@keyframes 이야기들어옴 {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.종목이야기줄.들어옴 { animation: 이야기들어옴 .32s cubic-bezier(.2, .7, .3, 1); flex: 1; min-height: 0; }
/* 움직임을 줄이라고 한 사람에겐 안 움직인다 — 글은 그대로 바뀐다. */
@media (prefers-reduced-motion: reduce) { .종목이야기줄.들어옴 { animation: none; } }

.종목이야기점들 { display: flex; gap: 4px; justify-content: center; padding: 4px 0 4px; }
.종목이야기점들 button {
  width: 5px; height: 5px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--줄, #eae4f3); transition: width .2s, background .2s;
}
.종목이야기점들 button.켜짐 { width: 14px; background: var(--강조, #7847cf); }
.종목이야기점들 button:focus-visible { outline: 2px solid var(--강조, #7847cf); outline-offset: 2px; }

/* ── 로그인 안내창 · 손님 자산 카드 ────────────────────────────────
   쓰는 길이 401 을 돌려줄 때 보던 화면 «위에» 뜨는 창. 화면을 갈아 버리지 않는다.
   꿈.css·빛깔.css 는 옆 세션이 늘 만지므로 여기 둔다(이 파일은 맨 뒤에 붙는다). */
.꿈안내겉 { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 24px 16px; background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  animation: 안내떠오름 .16s ease-out; }
.꿈안내창 { display: grid; gap: 12px; justify-items: center; text-align: center;
  width: min(360px, 100%); padding: 24px 16px; border-radius: 16px;
  background: var(--판1); box-shadow: 0 18px 48px rgba(0,0,0,.34); }
.꿈안내창 b { font-size: calc((18px) * var(--글배, 1)); font-weight: 800; letter-spacing: -.5px; }
.꿈안내창 p { margin: 0; font-size: calc((12px) * var(--글배, 1)); line-height: 1.75; color: var(--글연함); }
.꿈안내창 .알약단추, .꿈안내창 .꿈보조버튼 { width: 100%; }
.꿈안내창 .꿈보조버튼 { background: transparent; box-shadow: none; color: var(--글연함); }
@keyframes 안내떠오름 { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .꿈안내겉 { animation: none } }

/* 손님(로그인 전) 자산 카드 — 돈 대신 문을 보여 주는 자리 */
.꿈자산잠김 { margin: 4px 0 0; font-size: calc((18px) * var(--글배, 1)); font-weight: 800; letter-spacing: -.6px; }
.꿈자산잔 { margin: 0 0 4px; font-size: calc((12px) * var(--글배, 1)); line-height: 1.7; color: var(--글연함); }
.꿈자산글 .알약단추 { justify-self: start; margin-top: 4px; }

/* 순위 수익 칸 — 환산 금액 위, 실제 번 돈 아래 */
.순위수익 { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; line-height: 1.25; }
.순위수익 small { font-size: calc((11px) * var(--글배, 1)); color: var(--글연함); white-space: nowrap; }
.순위칸머리 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.순위칸머리 .순위칸이름 { margin: 0; }
.관심가르개 { margin: 12px 0 4px; font-size: calc((11px) * var(--글배, 1)); font-weight: 700; color: var(--글흐림); }
.관심가르개:first-child { margin-top: 0; }
.관심가르 td { padding: 8px 8px 4px; font-size: calc((11px) * var(--글배, 1)); font-weight: 700; color: var(--글흐림); text-align: left; background: transparent; border-bottom: 0; }

.꿈프로필 { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.꿈프로필글 { display: grid; gap: 4px; min-width: 0; }
.꿈프로필소개 { margin: 0; font-size: calc((13px) * var(--글배, 1)); line-height: 1.5; }
.꿈프로필셈 { display: flex; flex-wrap: wrap; gap: 8px; font-size: calc((12px) * var(--글배, 1)); color: var(--글연함); }
.꿈프로필셈 b { color: var(--글); font-weight: 700; }
.꿈얼굴 { flex: none; border-radius: 12px; }
.꿈AI얼굴 { display: inline-grid; place-items: center; overflow: hidden; background: #F6F2ED; }
.꿈AI얼굴 img { width: 72%; height: 72%; object-fit: contain; display: block; }
.꿈AI얼굴-ifnight { background: var(--판2); }
.꿈AI얼굴-ifnight img { width: 84%; height: 84%; }
.꿈AI얼굴-codex img { width: 100%; height: 100%; }
.꿈칭호진열 { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; }
.꿈칭호진열 .칭호딱지.대표 { outline: 2px solid var(--강조); outline-offset: 1px; }
img.꿈얼굴 { object-fit: cover; background: var(--판2); }
.꿈얼굴짐승 img { width: 100%; height: 100%; object-fit: contain; display: block; }
.꿈계정얼굴 { display: grid !important; justify-items: center; gap: 8px; text-align: center; }
.꿈얼굴자리 { position: relative; line-height: 0; }
.꿈이음표 { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px;
  border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--판1); }
.꿈이음표 svg { width: 17px; height: 17px; }
.꿈이음표.카카오 { background: #FEE500; }
.꿈이음표.토스 { background: #0064FF; }
.꿈이음표.구글 { background: #fff; border: 1px solid #DADCE0; }
.꿈얼굴칸 { padding: 0; border-radius: 24px; overflow: hidden; line-height: 0; }
.꿈얼굴칸 .꿈얼굴 { border-radius: 24px; display: block; }
.꿈계정줄 { display: flex; align-items: center; gap: 4px; max-width: 100%; }
.꿈계정이름 { font-size: calc((18px) * var(--글배, 1)); font-weight: 800; letter-spacing: -.4px; }
.꿈계정소개글 { font-size: calc((13px) * var(--글배, 1)); color: var(--글연함); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.꿈연필 { flex: none; width: 24px; height: 24px; padding: 0; border-radius: 8px;
  display: grid; place-items: center; color: var(--글연함); }
.꿈연필 svg { width: 13px; height: 13px; }
.꿈연필:hover, .꿈얼굴칸:hover { background: var(--판2); }
.꿈연필:hover { color: var(--강조); }
.꿈계정입력 { width: min(340px, 100%); height: 36px; padding: 0 12px; text-align: center;
  border: 1px solid var(--강조); border-radius: var(--알약); background: var(--판2);
  font-size: calc((15px) * var(--글배, 1)); font-weight: 700; outline: none; }
.꿈계정입력.잔 { font-size: calc((13px) * var(--글배, 1)); font-weight: 400; }
.꿈프로필단추 { width: 36px; height: 36px; border-radius: var(--알약); flex: none; padding: 0;
  display: grid; place-items: center; overflow: hidden; }
.꿈프로필단추 .꿈얼굴 { border-radius: 50%; }
.꿈신고 { position: relative; margin-left: auto; align-self: flex-start; }
.꿈신고까닭 { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  display: grid; min-width: 170px; padding: 4px; border-radius: 12px;
  background: var(--판1); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.꿈신고까닭 .줄 { padding: 8px 8px; font-size: calc((13px) * var(--글배, 1)); text-align: left; border-radius: 8px; }
.꿈신고까닭 .줄:hover { background: var(--판2); }
.꿈신고났 { margin-left: auto; align-self: flex-start; }

/* 윗줄 — 넓은 화면에서 자리를 나눈다.
 *
 * 앞 판은 여덟 개가 전부 왼쪽에 붙고 시장상태만 margin-left:auto 로 튕겨 나가서,
 * 1920 에서 가운데가 625px 비어 있었다(실측 2026-09-16). 검색창은 390px 에 묶여
 * 남는 자리를 하나도 안 썼다.
 *
 * 셋으로 나눈다 — **왼쪽은 어디로 가나, 가운데는 무엇을 찾나, 오른쪽은 내 것.**
 * 자리만 order 로 옮긴다(화면 파일은 안 건드린다). 검색창이 남는 폭을 먹고
 * 양쪽 auto 여백이 가운데로 민다.
 */
@media (min-width: 1100px) {
  .꿈데스크톱 .윗줄 { gap: 16px; }

  .꿈데스크톱 .윗줄 > .윗상표 { order: 0; }
  .꿈데스크톱 .윗줄 > .꿈윗길 { order: 1; }

  .꿈데스크톱 .윗줄 > .윗찾기 {
    order: 2; flex: 1 1 auto; width: auto; min-width: 220px; max-width: 560px;
    margin-left: auto; margin-right: auto;
  }

  .꿈데스크톱 .윗줄 > .윗빛 { order: 3; }
  .꿈데스크톱 .윗줄 > .작업알림단추 { order: 4; }
  .꿈데스크톱 .윗줄 > .윗의견 { order: 5; }
  .꿈데스크톱 .윗줄 > .윗장 { order: 6; margin-left: 0; }
  .꿈데스크톱 .윗줄 > .윗돈 { order: 7; }
  .꿈데스크톱 .윗줄 > .꿈로그인칩,
  .꿈데스크톱 .윗줄 > .꿈계정단추 { order: 8; }
}

/* 세로 리듬 — 행간을 «정한다».
 *
 * 앞 판은 글의 99% 가 브라우저 기본값(normal, 글꼴이 정하는 대로 대략 1.2)이었다.
 * 글자 크기는 서른세 가지인데 행간을 안 정했으니 세로 간격이 글꼴 손에 있었다.
 * 그래서 화면마다 줄 사이가 달라 보였다 — 「뭔가 안 맞는데 어딘지 모르겠는」 정체다.
 *
 * 값은 셋뿐이다.
 *   1.6  읽는 글    문단·설명·이야기. 한글은 1.5~1.7 이 편하다
 *   1.3  짓는 글    제목·이름·단추. 여러 줄이 되면 뭉치는 게 낫다
 *   1.2  세는 글    숫자·값. 자릿수가 위아래로 벌어지면 표가 흔들린다
 *
 * 맨 뒤에 실린다 — 이미 행간을 정해 둔 자리는 그쪽이 이긴다(!important 안 쓴다).
 */
body { line-height: 1.6; }

h1, h2, h3, h4, h5,
button, input, select, textarea, label,
.제목, .중간, .큰돈, .꿈제목, .말이름 b { line-height: 1.3; }

.숫자, .큰돈, td, th, time { line-height: 1.2; }

/* 한 줄로 못 박은 것들은 행간이 높이를 밀면 안 된다 */
[class*="칩"], [class*="딱지"], [class*="배지"], .고르개 button { line-height: 1.2; }

/* 손가락 자리 — 폰에서 누르는 것은 **44px 이상**이다.
 *
 * 애플·구글이 44·48 을 권하는 까닭은 손끝이 그만큼 넓어서다. 그보다 작으면
 * 누른 사람이 옆 것을 누르고, 두 번 세 번 다시 누른다. 자리만 몰래 넓히는 것으로는
 * 「보기에 작아서 안 눌리는 것 같은」 문제가 안 풀린다 — 실제로 키운다(사장님 2026-09-16).
 *
 * 맨 뒤에 실린다(tools/build.mjs) — 앞 파일의 값을 여기서 덮는다.
 * 데스크톱은 건드리지 않는다. 마우스는 1px 도 맞힌다.
 */
@media (max-width: 1099px) {
  /* 동그란 것 — 지름을 키운다.
     꿈.css 가 --단추키촘촘 으로 다시 줄여서 한 칸 더 얹어 이긴다. */
  .동그란단추,
  .하트,
  .꿈하트,
  .꿈연필,
  .말접기,
  .말보내기,
  .말방닫기,
  .꿈데스크톱 .동그란단추,
  .꿈커뮤니티머리 .동그란단추 { width: 44px; height: 44px; }

  /* 글·알약·칩 — 높이를 세운다. 글자 크기는 그대로다 */
  .꿈풋 button,
  .꿈제목 > button,
  .밑줄글,
  .랭킹추천이름,
  .쫓기단추,
  .꿈할일단추,
  .거름칩,
  .칩,
  .고르개 button,
  .꿈갈피 button,
  .꿈할일탭 button,
  .알림분류폰 button,
  .차트종류,
  .판자세히,
  .말방고르기,
  .꿈로그인칩,
  .꿈보조버튼,
  .찾는칸,
  .한줄칩줄 > button.넓게받기,
  .차트줄 .한줄칩줄 > button { min-height: 44px; min-width: 44px; padding-left: 12px; padding-right: 12px; }

  /* 줄 하나가 통째로 단추인 것 */
  .줄 > button,
  .시세표줄,
  .꿈종목 { min-height: 44px; }

  /* 시세 띠 — 칸은 이미 48px 인데 글줄만 17px 이라 위아래가 빈 채 안 눌렸다.
     칸을 그대로 채우게 한다. 보이는 것은 하나도 안 바뀐다. */
  .꿈시장 > button { min-height: 44px; }

  /* 분류·갈래 칩도 44 */
  .꿈분류 button,
  .꿈분류.작게 button { min-height: 44px; }

  /* 바닥 글줄은 나란히 서므로 좌우도 벌려 서로 안 붙게 */
  .꿈풋 button { padding: 0 8px; }

  /* 호가창은 값이 촘촘한 표다 — 여기까지 44px 로 세우면 한 화면에 두세 줄만 남는다.
     누르기보다 읽는 자리라 그대로 두되, 손가락이 걸치게 세로만 조금 연다. */
  .호가값 { min-height: 26px; }
}

@media (min-width: 1100px) {
  .하트, .꿈하트 { position: relative; }
  .하트::after, .꿈하트::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .꿈시장 > button { min-height: 40px; }
}

.시장지도 { position: relative; overflow: hidden; border-radius: 12px; background: var(--판); }
.시장지도.보임 { margin: 8px 0 16px; }
.지도칸 {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: 0 4px; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--판);
  background: var(--판2); color: var(--글); line-height: 1.25; text-align: center; overflow: hidden; cursor: pointer;
}
.지도칸 b { max-width: 100%; overflow: hidden; font-size: calc((12px) * var(--글배, 1)); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.지도칸 small { font-size: calc((11px) * var(--글배, 1)); font-weight: 600; }
.지도칸.두줄 b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.지도칸.큰칸 b { font-size: calc((15px) * var(--글배, 1)); }
.지도칸.큰칸 small { font-size: calc((13px) * var(--글배, 1)); }
.지도칸.오름1 { background: var(--오름연함); }
.지도칸.오름2 { background: var(--오름밝음); }
.지도칸.오름3 { background: var(--오름); color: var(--판); }
.지도칸.내림1 { background: var(--내림연함); }
.지도칸.내림2 { background: var(--내림밝음); }
.지도칸.내림3 { background: var(--내림); color: var(--판); }
.지도칸:active { opacity: .8; }

.꿈자산 { flex-wrap: wrap; }
.꿈자산 > .꿈자산아래 { position: relative; z-index: 1; flex: 1 0 100%; }
.수익곡선 { position: relative; z-index: 1; flex: 1 0 100%; margin-top: 16px; }
.수익곡선판 { position: relative; height: 56px; }
.수익곡선판 svg { display: block; width: 100%; height: 56px; overflow: visible; }
.수익곡선점 { position: absolute; left: 100%; width: 8px; height: 8px; border-radius: 999px; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #fff; }
.수익곡선칩 { display: flex; gap: 4px; margin-top: 8px; }
.수익곡선칩 button { padding: 4px 8px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: calc((11px) * var(--글배, 1)); font-weight: 700; opacity: .72; }
.수익곡선칩 button.켜짐 { background: #fff; color: #5B2FA8; opacity: 1; }
[data-빛="dark"] .수익곡선칩 button.켜짐 { background: rgba(255, 255, 255, .16); color: #f6efff; }
[data-빛="dark"] .수익곡선점 { box-shadow: 0 0 0 2px #45305e; }

.견줌 { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--줄); border-radius: 12px; background: var(--판); }
.견줌제목 { font-size: calc((13px) * var(--글배, 1)); font-weight: 700; color: var(--글); }
.견줌줄 { display: grid; grid-template-columns: 56px 1fr 60px; align-items: center; gap: 8px; font-size: calc((12px) * var(--글배, 1)); }
.견줌이름 { overflow: hidden; color: var(--글연함); white-space: nowrap; text-overflow: ellipsis; }
.견줌줄.나 .견줌이름 { color: var(--글); font-weight: 700; }
.견줌길 { position: relative; height: 8px; border-radius: 4px; background: var(--판2); }
.견줌길 i { position: absolute; top: 0; height: 8px; border-radius: 4px; background: var(--글흐림); }
.견줌줄.나 .견줌길 i { background: var(--강조); }
.견줌길 em { position: absolute; top: -4px; width: 1px; height: 16px; background: var(--글흐림); }
.견줌값 { text-align: right; font-weight: 700; }

.주52작은 { position: relative; display: inline-block; width: 32px; height: 3px; margin-left: 8px; border-radius: 4px; background: var(--줄); vertical-align: middle; }
.이름칸 span.주52줄, .꿈종목이름 small.주52줄 { display: flex; align-items: center; }
.주52줄 > .주52작은 { flex: 0 1 32px; min-width: 8px; }
.주52작은 i { position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 999px; background: var(--강조); transform: translate(-50%, -50%); }

.범위 { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; margin: 0 0 12px; font-size: calc((12px) * var(--글배, 1)); }
.범위이름 { color: var(--글연함); }
.범위길 { position: relative; height: 4px; border-radius: 4px; background: var(--줄); }
.범위길 i { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 999px; background: var(--강조); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--바탕); }

.우리매매 { margin-top: 24px; }
.우리매매머리 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.우리매매머리 h2 { margin: 0; }
.우리매매띠 { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--판2); }
.우리매매띠 .산 { background: var(--오름); }
.우리매매띠 .판 { background: var(--내림); }
.우리매매띠 .산 + .판 { border-left: 2px solid var(--바탕); }
.우리매매끝 { display: flex; justify-content: space-between; margin-top: 8px; font-size: calc((12px) * var(--글배, 1)); font-weight: 700; }
.우리매매띠.작게 { height: 6px; margin: 4px 0; }
.우리매매작게 .우리매매끝 { margin-top: 0; font-size: calc((11px) * var(--글배, 1)); }
.꿈거래 .판범위들:has(> .우리매매작게) { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 359px) { .주52줄 > .주52작은 { display: none; } }