/* 새 아틀란스(시험판 /next/) — 유튜브 뼈대 · 잡스 방식(사장님 2026-10-17 02:22 · 02:24 「가」 · 02:38 「정교하게 만들어라」 · 규칙 74)
   색은 지금 아틀란스 먹빛 그대로(atlas.css :root) · 빨강 = 오름 · 파랑 = 내림 · 금빛 = 뜻 있는 곳만 · 입체 · 바둑판 없음 · 글 17px 넘게 · 누르는 자리 44px 넘게 */
:root {
  color-scheme: dark;
  --bg: #0C0E12; --card: #13161C; --card2: #1C1F26; --card3: #272B34;
  --hair: rgba(242, 239, 232, .12); --hair2: rgba(242, 239, 232, .22);
  --ink: #F2EFE8; --sub: #B0B5BD; --mute: #8E959F;
  --gold: #E9B949; --gold-wash: rgba(233, 185, 73, .1);
  --up: #FF5A65; --down: #5B96FF; --flat: #8E959F; --up-bg: var(--up); --down-bg: var(--down);
  /* 글꼴(사장님 2026-10-22 14:49 「getdesign.md · 구글과 잡스라면 어떤 폰트를 쓸건지 선택해서 돌이 기가막히게」) — 잡스 = 애플 기기에서는 애플 글꼴 그대로(SF Pro · Apple SD Gothic Neo — getdesign.md Apple 「SF Pro」 · apple.com/kr 도 SF Pro + 한글 애플 글꼴)
     · 구글 = 그 밖 기기는 프리텐다드(한글 = 구글 · 어도비가 만든 본고딕 Source Han Sans 바탕 · 영문 숫자 = Inter) — 프리텐다드 설명서의 「시스템 글꼴 쪽」 차례 그대로 · 애플 기기는 글꼴을 받지 않아 첫 그림이 빠르고 바뀜(깜빡임) 없음 */
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", 'Pretendard Variable', Pretendard, system-ui, "Noto Sans KR", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --top: 58px; --tabs: 68px;
  /* 글씨 크기 여섯 · 간격 셋(사장님 2026-10-18 [10] 5 · 6 · 8 — 17px 아래 없음 · 한 화면 여섯 가지까지 · 간격은 8 · 16 · 24 만 · 음수 없음 · 쓰는 곳은 docs/design/godori-2026-10-18/accept/S12.md) */
  --fs-1: 17px; --fs-2: 19px; --fs-3: 21px; --fs-4: 24px; --fs-5: 30px; --fs-6: 48px; /* 작은 글 · 본문 · 칸 제목 · 화면 제목 · 큰 숫자 · 가장 큰 숫자 — 2026-10-23 00:24 「글이 더 눈에더 보여야 해」는 크기 대신 검정 · 굵기 600 으로(여섯 크기 잣대 [10] 6 · 검사 여섯 곳이 이 값을 맞댐) */ /* 작은 글 · 본문 · 칸 제목 · 화면 제목 · 큰 숫자 · 가장 큰 숫자 */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 19px/1.5 var(--sans); word-break: keep-all; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.up { color: var(--up); } .dn { color: var(--down); } .fl { color: var(--flat); } .gd { color: var(--gold); }
.num { font-variant-numeric: tabular-nums; } /* 숫자는 자리 맞춤(구글 머티리얼 · 애플 주식 앱처럼 줄마다 숫자 폭이 같게 — 2026-10-22 14:49 글꼴) */

/* 위 막대 */
.top { position: sticky; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); background: var(--bg); border-bottom: 1px solid var(--hair); }
.logo { display: flex; align-items: center; gap: var(--sp-1); min-height: 44px; font-weight: 800; letter-spacing: .08em; font-size: var(--fs-3); }
.logo img { width: 30px; height: 30px; border-radius: 50%; }
.top .sp { flex: 1; }
.ibtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.ibtn:active { background: var(--card2); }
.fbtn { font-size: var(--fs-3); font-weight: 700; color: inherit; background: none; border: 0; font-family: inherit; }
/* 위 막대 단추 셋은 늘 44 × 44 · 로고는 한 줄(일꾼 KI · 2026-10-18 — 영어 이름 Golttori(8자)로 로고가 넓어져 320 폭에서 단추가 43.4px 로 줄고 로고가 「Golttor / i」 두 줄로 꺾임 · 옛 이름 Godori · Bodri 글자로 바꿔 재면 44) */
.top .ibtn { flex: none; }
.top .logo { white-space: nowrap; }
html.en .top .logo { letter-spacing: .02em; }
/* 위 막대 「진화」 단추(일꾼 KM · 사장님 2026-10-18 22:45 「진화 탭을 상단에 만들어」 · 22:46 「모든 사람들」) — 글 단추 · 높이 44 · 폭 44 이상 · 그 쪽이면 금빛 테
   단추가 넷이 되어 좁은 폭(한국어 349px 아래 · 영어 389px 아래)에서는 로고 글자를 숨기고 둥근 그림만 둠(로고는 그대로 첫 화면 고리 · 읽는 이름은 aria-label) — 단추는 늘 44 × 44 */
.tbtn { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 var(--sp-1); box-sizing: border-box; border: 1px solid var(--hair2); border-radius: 22px; font-size: var(--fs-1); font-weight: 700; line-height: 1; white-space: nowrap; }
.tbtn:active { background: var(--card2); }
.tbtn[aria-current="page"] { border-color: var(--gold-line); color: var(--gold); }
@media (max-width: 349px) { .top .logo { font-size: 0; gap: 0; min-width: 44px; justify-content: center; } }
@media (max-width: 389px) { html.en .top .logo { font-size: 0; gap: 0; min-width: 44px; justify-content: center; } }
/* 글씨 크기(지금 아틀란스 html.f2 24px · f3 27px 와 같은 몫) — 화면 칸을 통째로 키움 */
html.f2 #view { zoom: 1.143; } html.f3 #view { zoom: 1.286; }
.ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trial { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-1); margin: 0; padding: var(--sp-1) var(--sp-2); background: var(--gold-wash); border-bottom: 1px solid rgba(233, 185, 73, .35); color: var(--gold); font-size: var(--fs-1); }
.trial a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* 본 화면 */
.view { display: block; min-height: calc(100vh - var(--top)); padding-bottom: 16px; outline: none; }
/* 맨 아래 개인정보 처리방침 고리 — 아래 단추에 가리지 않게 아래 여백은 이 줄이 가짐(사장님 2026-10-18 [4] 3) */
.foot { display: block; padding: 8px 16px calc(var(--tabs) + 24px + env(safe-area-inset-bottom)); text-align: center; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-1); color: var(--mute); font-size: var(--fs-1); text-decoration: underline; }
/* 여는 동안(「여는 중이에요…」만 있을 때)은 맨 아래 줄을 그리지 않음 — 짧은 판 맨 아래에 그려졌다가 화면이 그려지며 밀려나던 것(밀림 0.07 · 2026-10-21 전체 검사 thumb 1/11 ③ 0.140 까닭 하나) · 다 그린 뒤 처음 나타나는 것은 밀림이 아님 */
body:has(> #view > .boot) > .foot { display: none; }
.boot, .empty { margin: var(--sp-3) var(--sp-2); color: var(--sub); text-align: center; }
.pad { padding: var(--sp-2); }
h1.h { font-size: var(--fs-4); line-height: 1.35; margin: var(--sp-2) var(--sp-2) var(--sp-1); }
h2.sec { font-size: var(--fs-3); margin: var(--sp-3) var(--sp-2) var(--sp-1); display: flex; align-items: center; gap: var(--sp-1); }
.note { color: var(--sub); font-size: var(--fs-1); margin: var(--sp-1) var(--sp-2); }
.q { color: var(--gold); }
/* 노란 경고 — 두 줄까지 · 넘으면 「?」 한 줄로 접고 누르면 펼침(사장님 2026-10-18 [10] 10 · 만드는 곳 site/next/warn.js · 접기는 그려진 뒤 글줄을 세어 정함) */
details.nw { margin: var(--sp-1) var(--sp-2); color: var(--gold); font-size: var(--fs-1); line-height: 1.5; }
details.nw.in { margin: var(--sp-1) 0; }
details.nw:not(.long) > summary { display: none; }
details.nw > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); min-height: 44px; cursor: pointer; list-style: none; }
details.nw > summary::-webkit-details-marker { display: none; }
details.nw > summary::after { content: '▾'; flex: none; color: var(--sub); }
details.nw.long[open] > summary::after { content: '▴'; }
details.nw .nw-t { margin: 0; text-wrap: pretty; }
details.nw.long .nw-t { padding-bottom: var(--sp-1); }

/* 칩 — 한 줄 · 옆으로 밀기 */
.chips { display: flex; gap: var(--sp-1); overflow-x: auto; padding: var(--sp-1) var(--sp-2); scroll-padding-inline: var(--sp-2); scrollbar-width: none; scroll-snap-type: x proximity; } /* scroll-padding — 첫 칩이 왼쪽 16px 자리에 붙음(끌어 맞춤이 0px 로 당기지 않게) */
/* 칩 줄 · 선반 — 오른쪽 끝을 흐리게 해 더 있음을 보임(사장님 2026-10-18 [6] 7) · 끝까지 밀면(.end) 흐림을 걷음 */
.chips, .shelf { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.chips.end, .shelf.end { -webkit-mask-image: none; mask-image: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 44px; padding: 0 var(--sp-2); display: inline-flex; align-items: center; justify-content: center; text-align: center; border-radius: 999px; background: var(--card2); font-size: var(--fs-1); white-space: nowrap; scroll-snap-align: start; } /* 알약 글은 가운데(글 시작 왼쪽 줄로 안 셈 · [10] 7) */
.chip[aria-current="page"], .chip.on { background: var(--ink); color: #111; font-weight: 700; }

/* 그림 카드(유튜브 영상 칸) */
.card { display: block; padding: var(--sp-1) var(--sp-2) var(--sp-2); }
.th { position: relative; aspect-ratio: 16 / 9; background: #14161C; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
.th .ln { position: absolute; left: 4%; top: 30%; width: 92%; height: 60%; overflow: visible; }
.th .big { position: absolute; left: 8px; top: 8px; font-size: var(--fs-4); font-weight: 900; line-height: 1.3; padding: 0 8px; border-radius: 8px; background: rgba(0, 0, 0, .5); }
.th .dur { position: absolute; right: 8px; bottom: 8px; font-size: var(--fs-1); padding: 0 8px; border-radius: 8px; background: rgba(0, 0, 0, .8); color: #fff; text-align: center; }
.th .kick { position: absolute; right: 8px; top: 8px; font-size: var(--fs-1); color: var(--sub); text-align: right; }
.th.num { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: var(--sp-1); }
.th.num b { font-size: var(--fs-6); font-weight: 900; }
.th.num small { font-size: var(--fs-1); color: var(--sub); }
i.play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: 0; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .8); pointer-events: none; }
i.play::after { content: ""; position: absolute; left: 21px; top: 15px; border-left: 18px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.meta { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); align-items: flex-start; }
.meta b { display: block; font-size: var(--fs-2); line-height: 1.4; }
.meta small { display: block; font-size: var(--fs-1); color: var(--sub); }
.meta .half { display: block; font-size: var(--fs-1); line-height: 1.4; color: var(--gold); } /* 급등 카드 숫자 옆 반값 한 줄([6] 6 · 조심 = 금빛) */
.av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #F7F7F7; color: var(--gold); display: inline-flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; font-size: var(--fs-1); }
.av.lg { width: 60px; height: 60px; font-size: var(--fs-4); }
.av.on { box-shadow: 0 0 0 3px var(--gold); }

/* 쇼츠 선반 */
.shelf { display: flex; gap: 8px; padding: 0 16px 18px; overflow-x: auto; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.st { flex: none; width: 31%; min-width: 108px; aspect-ratio: 9 / 15; border-radius: 12px; border: 1px solid var(--hair); background: linear-gradient(180deg, #F7F7F7, #0F1014); padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; }
.st b { font-size: var(--fs-3); line-height: 1.2; }
.st small { font-size: 17px; color: var(--sub); line-height: 1.3; margin-top: 8px; }

/* 칩 목록(사장님 2026-10-18 [7] 5) — 맨 앞 하나만 큰 카드 · 그다음 한 줄(이름 · % · 작은 선) 10줄 · 「나머지 n곳 보기」 */
.note.half { color: var(--gold); }
.clist { list-style: none; margin: 0 var(--sp-2) var(--sp-2); padding: 0; border-top: 1px solid var(--hair); }
.clist li { border-bottom: 1px solid var(--hair); }
.crow { display: flex; align-items: center; gap: var(--sp-1); min-height: 56px; padding: var(--sp-1) 0; color: var(--ink); text-decoration: none; }
.crow .cn { flex: 1 1 auto; min-width: 0; font-size: var(--fs-2); font-weight: 800; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 한 줄 목록 — 줄 높이가 늘 같게([7] 5 · [10] 9) */
.crow .cp { flex: none; min-width: 72px; text-align: right; font-size: var(--fs-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.crow .ln, .crow .ln0 { flex: none; display: block; width: 72px; height: 32px; overflow: visible; }
.crow .cn2 b, .crow .cn2 small { display: block; overflow: hidden; text-overflow: ellipsis; } /* 이름 밑 작은 뜻 글(미국 지수 · 총정리 C6) */
.crow .cn2 small { color: var(--sub); font-size: var(--fs-1); font-weight: 400; }
/* 칩 · 관심 쪽 맨 위 결 한 줄(총정리 2026-10-22 C1 ~ C6 · C24 · C25) — 지난 사실 한 줄이 먼저 · 글 시작은 다른 줄과 같은 16px · 고리는 48px 한 줄 */
.c-lead { margin: var(--sp-2) var(--sp-2) 0; }
.c-lt { margin: 0; font-size: var(--fs-2); font-weight: 700; line-height: 1.45; text-wrap: pretty; }
.c-ls { margin: var(--sp-1) 0 0; color: var(--sub); font-size: var(--fs-1); line-height: 1.45; }
.c-go { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); min-height: 48px; color: var(--ink); font-size: var(--fs-1); }
.c-go > span { text-decoration: underline; text-decoration-color: var(--hair2); text-underline-offset: 4px; }
.c-go > i, .ch-z > i { flex: none; font-style: normal; color: var(--sub); font-size: var(--fs-3); text-align: end; } /* 오른쪽 끝 「›」 는 끝 맞춤 — 글 시작 왼쪽 줄(모양 규칙 셋 이하)에 들지 않게(전체 검사 1/11 chx) */
/* 첫 화면 「왜 그럴까?」 열한 걸음 칸(사장님 2026-10-22 08:53 · why-chain.js · 옛 ul.w-qs 자리) — 사실 줄 밑 한 줄 전부 · 펼친 동안은 붙은 찾기 칸이 그림을 가리지 않게 제자리로(옛 w-qs 와 같은 꼴) */
html.white.home .w-news .w-chain { flex: 1 1 100%; min-width: 0; margin: 0 0 var(--sp-2); }
html.white.home .w-news .w-chain[hidden] { display: none; }
html.white.home #view:has(.w-chain:not([hidden])) .s-thumb { position: static; }
/* 업종 채널 이름 밑 테마 시계 자리 한 줄(총정리 C7) — 글 시작은 이름과 같은 16px · 누르는 자리 48px */
.ch-z { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); min-height: 48px; margin: var(--sp-1) var(--sp-2) 0; color: var(--ink); font-size: var(--fs-1); line-height: 1.4; }
.ch-zt { display: grid; min-width: 0; } /* 두 줄(한 달 · 닷새 — 2026-10-29 19:10 「업종 쪽 글도 쉽게」) · 같은 왼쪽 줄 */
.ch-zm { text-decoration: underline; text-decoration-color: var(--hair2); text-underline-offset: 4px; }
.ch-zn { color: var(--sub); font-size: var(--fs-1); }
.ch-zt b { font-weight: 800; }
/* 큰 카드 그림([6] 8) — 큰 숫자 = 마지막 날 하루(앞에 작은 「하루」) · 기간 %는 아래 오른쪽 작은 칸(「5일 +110%」) */
.th .big .bk { font-size: var(--fs-1); font-weight: 600; color: var(--sub); }
.th .dur b { font-weight: 700; }

/* 아래 단추 다섯 — 오늘 장 · 시황 · 매매일지(가운데) · 관심 · 보유종목(2026-10-17 21:10 [2]) · 넉 자 이름도 한 줄(320px 칸 64px) */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--tabs) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; background: rgba(12, 14, 18, .97); border-top: 1px solid var(--hair); }
.tabs a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: var(--mute); font-size: var(--fs-1); line-height: 1.4; min-height: 44px; white-space: nowrap; } /* 17px 아래 없음([10] 5) */
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.tabs a.plus .ic { width: 38px; height: 38px; color: var(--gold); }
@media (max-width: 340px) { .tabs a { letter-spacing: -.06em; } } /* 320px 칸 64px 에 「보유종목」 17px 한 줄 */

/* 보는 화면 */
.player { position: relative; aspect-ratio: 16 / 9; background: #050608; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.player .ln { position: absolute; left: 3%; top: 10%; width: 94%; height: 68%; overflow: visible; }
.player .scrub { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #EEEEEE; }
.player .scrub b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sub); width: 100%; } /* 빨강은 오른 숫자에만(총정리 C10 — 내린 회사 위 빨간 띠였음) · 오름 · 내림 뜻은 선 색이 맡음 */
.player .tip { position: absolute; left: 8px; bottom: 16px; font-size: var(--fs-1); background: rgba(0, 0, 0, .7); padding: 0 var(--sp-1); border-radius: 8px; }
.player .cur { position: absolute; top: 6%; bottom: 8%; width: 2px; background: rgba(255, 255, 255, .55); display: none; }
.player.scrubbing .cur { display: block; }
.player button.replay { position: absolute; inset: 0; width: 100%; height: 100%; }
.ln path.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ln path.draw { animation: none; stroke-dashoffset: 0; } }
.wt { font-size: var(--fs-4); line-height: 1.35; margin: var(--sp-2) var(--sp-2) 0; }
.ws { margin: 0 var(--sp-2); color: var(--sub); font-size: var(--fs-1); }
.chan { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); }
.chan > a { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; flex: 1; min-width: 0; }
.chan b { display: block; font-size: var(--fs-2); }
.chan small { display: block; font-size: var(--fs-1); color: var(--sub); }
.sub-btn { flex: none; min-height: 44px; padding: 0 var(--sp-2); border-radius: 999px; background: var(--ink); color: #111; font-weight: 800; font-size: var(--fs-1); }
.sub-btn[aria-pressed="true"] { background: var(--card3); color: var(--ink); }
.acts { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: 0 var(--sp-2) var(--sp-1); } /* 관심 담기 · 보내기 · 같이 따져 줘 — 좁은 화면은 둘째 줄로(옆으로 숨지 않게) */
.acts::-webkit-scrollbar { display: none; }
.act { flex: none; min-height: 44px; padding: 0 var(--sp-2); border-radius: 999px; background: var(--card2); font-size: var(--fs-1); display: inline-flex; align-items: center; gap: var(--sp-1); }
.act[aria-pressed="true"] { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
/* 「이 회사로 왜 사?」 — 회사 화면에서 매매일지(#/why/<번호>)로(2026-10-17 21:10 [3] 2) */
.why-go { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: var(--sp-1) var(--sp-2) 0; min-height: 52px; padding: var(--sp-1) var(--sp-2); border-radius: 12px; background: var(--card2); border: 1px solid var(--hair2); font-size: var(--fs-2); }
.why-go b { font-weight: 800; }
.why-go i { flex: none; font-style: normal; color: var(--sub); font-size: var(--fs-3); }
.chaps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); padding: 0 var(--sp-2); }
.chaps .cp { display: flex; align-items: center; gap: var(--sp-1); min-height: 56px; padding: var(--sp-1); border-radius: 12px; background: var(--card); border: 1px solid var(--hair); }
.chaps .cp i { flex: none; text-align: center; font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-wash); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; }
.chaps .cp span { font-size: var(--fs-1); line-height: 1.3; text-align: center; } /* 칩 안 가운데 글 — 왼쪽 줄로 세지 않음([10] 7) · .cp 는 .chaps 안만(칩 목록 .crow .cp 숫자 칸에 알약 모양이 묻어나던 것)
.chaps .cp.now { border-color: var(--gold); }
/* 4 ~ 7단 쪽 — 챕터를 한 줄로 밀어 보기(그림이 첫 화면 안에 들게 · 큰 글씨에서 낱말이 끊기지 않게) · 지금 단이 보이게 옆으로 옮겨 둠 */
.chaps.row { display: flex; overflow-x: auto; gap: var(--sp-1); scrollbar-width: none; padding-bottom: 0; scroll-padding: 0 var(--sp-2); }
.chaps.row::-webkit-scrollbar { display: none; }
.chaps.row .cp { flex: 0 0 auto; min-height: 48px; padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1); }
.chaps.row .cp span { white-space: nowrap; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); padding: 0 var(--sp-2); }
.stats > div { background: var(--card); border: 1px solid var(--hair); border-radius: 12px; padding: var(--sp-1) var(--sp-2); text-align: center; } /* 두 칸 나란히 — 가운데 글(왼쪽 줄 [10] 7) */
.stats small { display: block; font-size: var(--fs-1); color: var(--sub); }
.stats b { font-size: var(--fs-4); }
.stats.chs { grid-template-columns: 1fr; gap: 0; margin: 0 var(--sp-2); padding: var(--sp-1) var(--sp-2); outline: 1px solid var(--hair); outline-offset: -1px; border-radius: 12px; background: var(--card); } /* 채널 두 숫자 = 한 칸 두 줄(바깥 선은 outline 이라 글 시작 줄이 32 그대로) */
.stats.chs > div { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; }
.stats.chs b { text-align: right; white-space: nowrap; }
.nx { display: flex; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-2); align-items: flex-start; }
.nx .th { width: 46%; flex: none; }
.nx .th .big { font-size: var(--fs-2); }
.nx b { display: block; font-size: var(--fs-2); line-height: 1.35; }
.nx small { display: block; font-size: var(--fs-1); color: var(--sub); }
.more { display: block; margin: var(--sp-1) var(--sp-2); min-height: 44px; width: calc(100% - 32px); border-radius: 12px; background: var(--card2); font-size: var(--fs-1); }
a.more { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-1) var(--sp-2); } /* 고리로 쓴 더 보기 · 다음 챕터 — 글을 가운데로(일꾼 넷이 알림) */

/* 쇼츠 */
.shorts { height: calc(100vh - var(--top) - var(--tabs)); height: calc(100svh - var(--top) - var(--tabs)); overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.shorts::-webkit-scrollbar { display: none; }
/* 시황 칸(사장님 2026-10-18 [10] 5 ~ 9) — 글씨는 --fs 셋(17 · 21 · 48) · 간격은 --sp 만 · 보기 · 보내기는 글 아래 한 줄(옆 76px 자리 없앰) · 선 · 비율 막대 · 미국 막대가 남는 높이를 채워 빈 곳을 줄임 */
.sh { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: var(--sp-3) var(--sp-2) var(--sp-2); display: flex; flex-direction: column; justify-content: flex-start; border-bottom: 1px solid var(--hair); } /* 위부터 채움(총정리 C20 — 가운데 맞춤은 글이 칸보다 길면 위로도 넘쳐 작은 폰에서 날짜 줄이 칸 위로 잘렸음) · 자리가 남을 때만 아래 auto 여백으로 가운데 · 위 24px = 위 띠(20px) 밑 */
.sh .k { color: var(--gold); font-size: var(--fs-1); letter-spacing: .04em; margin: 0; }
.sh .l1 { font-size: var(--fs-3); font-weight: 700; margin: var(--sp-1) 0 0; }
.sh .bg { font-size: var(--fs-6); font-weight: 900; line-height: 1.1; margin: var(--sp-1) 0; }
.sh .l2 { font-size: var(--fs-3); margin: 0; }
.sh .mini { flex: 1 1 110px; width: 100%; min-height: 110px; max-height: 300px; margin-top: var(--sp-2); overflow: visible; }
.sh .ml { margin: var(--sp-1) 0 0; font-size: var(--fs-1); color: var(--sub); }
.sh .ratio { display: flex; flex: 1 1 24px; min-height: 24px; max-height: 240px; border-radius: 8px; overflow: hidden; margin: var(--sp-2) 0 var(--sp-1); }
.sh .rl { margin: 0; font-size: var(--fs-1); color: var(--sub); }
.sh .bars { display: flex; flex: 1 1 auto; max-height: 360px; flex-direction: column; justify-content: space-around; gap: var(--sp-1); margin-top: var(--sp-2); }
.sh .br { display: flex; justify-content: space-between; gap: var(--sp-1); font-size: var(--fs-1); margin: 0; }
.sh .bt { display: block; height: 24px; border-radius: 8px; background: var(--card2); overflow: hidden; }
.sh .bt i { display: block; height: 100%; border-radius: 8px; }
.sh .bub { display: flex; gap: var(--sp-1); align-items: center; justify-content: space-between; background: var(--card2); border-radius: 16px; padding: var(--sp-1) var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-1); }
.sh .bub img { flex: none; width: 40px; height: 40px; }
.sh .side { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); }
.sh .side a, .sh .side button { flex: 1; min-height: 48px; padding: 0 var(--sp-2); border-radius: 999px; background: var(--card2); font-size: var(--fs-1); display: flex; align-items: center; justify-content: center; text-align: center; }
.sbar { position: sticky; top: 0; z-index: 2; display: flex; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); background: linear-gradient(var(--bg), rgba(12, 14, 18, 0)); }
.sbar i { flex: 1; height: 4px; border-radius: 2px; background: #EEEEEE; }
.sbar i.on { background: var(--ink); }
.hint { text-align: center; color: var(--sub); font-size: var(--fs-1); margin: var(--sp-2) 0 0; }
.sh > :first-child { margin-top: auto; } .sh > :last-child { margin-bottom: auto; } /* 남는 자리만 위아래로 나눔(가운데) · 넘치면 0 → 첫 줄(날짜)이 늘 칸 안 — 총정리 C20 */

/* 채널 */
.banner { height: 96px; background: linear-gradient(135deg, #F7F7F7, #101218); position: relative; }
.banner .ln { position: absolute; left: 0; top: 14%; width: 100%; height: 80%; }
.chhead { display: flex; gap: var(--sp-2); align-items: center; justify-content: space-between; padding: 0 var(--sp-2); margin-top: var(--sp-2); position: relative; } /* 음수 겹침 없음([10] 8) — 띠 96px 아래에 놓음 · 글이 왼쪽 · 동그라미는 오른쪽 끝([10] 7) */
.chhead > div { min-width: 0; }
.chhead .av { flex: none; }
.chhead h1 { margin: 0; font-size: var(--fs-4); }
.chhead small { font-size: var(--fs-1); color: var(--sub); }
.ctabs { display: flex; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2) 0; border-bottom: 1px solid var(--hair); margin-bottom: var(--sp-2); }
.ctabs button { min-height: 44px; padding: 0 var(--sp-2); font-size: var(--fs-2); color: var(--sub); border-bottom: 3px solid transparent; }
.ctabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 700; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: 0 var(--sp-2); }
.grid a { display: block; min-width: 0; }
.grid .th .big { font-size: var(--fs-1); }
.grid b { display: block; font-size: var(--fs-1); margin-top: var(--sp-1); line-height: 1.3; }
.grid small { display: block; font-size: var(--fs-1); color: var(--sub); }
.grid b, .grid small { text-align: center; } /* 두 줄 칸의 글 = 가운데([10] 7 — 둘째 줄 왼쪽 줄이 따로 생기지 않게) */
.grid .th .big { left: 0; right: 0; width: fit-content; margin: 0 auto; text-align: center; } /* 그림 위 숫자표도 가운데 */

/* 관심 · 보유종목 · 찾기 */
/* 관심 회사 줄 — 작은 선 · 이름 · 업종 · 20거래일 % · 관심 담음 단추(.chan 줄 꼴) */
.wl > a { gap: var(--sp-1); }
.wl-th { flex: none; width: 56px; height: 34px; }
.wl-th .ln { display: block; width: 100%; height: 100%; overflow: visible; }
.chan.wl b { font-size: var(--fs-2); line-height: 1.35; }
.wl + .wl { border-top: 1px solid var(--hair); }
.wl > a > div { min-width: 0; overflow-wrap: break-word; }
/* 「20거래일 」은 줄을 넘길 수 있고 % 숫자만 한 덩이(.wl-p) — 아주 큰 글씨 · 영어(20 trading days)에서 칸 안 넘침 0(일꾼 G 2026-10-17 22:29 · 22:53 — 엔진이 바꾼 글 마디까지 묶던 .nb > span 을 걷음) */
.wl-p { white-space: nowrap; }
/* 큰 글씨(크게 · 아주 크게)는 줄이 좁아 글 칸이 25 ~ 40px 로 눌림 — 「관심 담음」 단추를 글 아래 줄로(320 · 360 · 390 모두 칸 안 넘침 0) */
html.f2 .chan.wl, html.f3 .chan.wl { flex-wrap: wrap; row-gap: var(--sp-1); }
html.f2 .chan.wl > a, html.f3 .chan.wl > a { flex: 1 1 100%; }
.avs { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-2); scrollbar-width: none; }
.avs::-webkit-scrollbar { display: none; }
.avs a { flex: none; width: 88px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-height: 44px; }
.avs small { font-size: var(--fs-1); color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; text-align: center; }
.avs small.av-g { display: flex; flex-direction: column; align-items: center; } .avs small.av-g > span { max-width: 88px; overflow: hidden; text-overflow: ellipsis; } /* 큰 업종 동그라미 — 이름 밑 「큰 업종」(같은 이름 업종 동그라미와 가름 · 총정리 C25) */
details.sub-big { margin: var(--sp-1) 0 0; } /* 빈 관심 — 큰 업종 열은 접은 칸 안(총정리 C24 · 모양은 details.hm-more) */
.row { display: flex; gap: var(--sp-1); overflow-x: auto; padding: 0 var(--sp-2) var(--sp-1); scrollbar-width: none; }
.row::-webkit-scrollbar { display: none; }
.row a { flex: none; width: 46%; }
.row b { display: block; font-size: var(--fs-1); margin-top: var(--sp-1); }
.lst { margin: var(--sp-1) var(--sp-2); }
.lst a, .lst button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 56px; border-bottom: 1px solid var(--hair); font-size: var(--fs-2); text-align: left; }
.lst span { color: var(--sub); text-align: right; }
.me { display: flex; gap: 14px; align-items: center; padding: 16px; }
.me img { width: 64px; height: 64px; }
.me b { display: block; font-size: 22px; }
.me small { display: block; font-size: 16px; color: var(--sub); }
.find { padding: var(--sp-2); }
.find input { width: 100%; min-height: 52px; border-radius: 14px; border: 1px solid var(--hair2); background: var(--card); color: var(--ink); font: inherit; font-size: var(--fs-3); padding: 0 var(--sp-2); }
.hits a { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-1); min-height: 56px; padding: 0 var(--sp-2); border-bottom: 1px solid var(--hair); }
.hits small { color: var(--sub); font-size: var(--fs-1); white-space: nowrap; text-align: right; } /* 오른쪽 끝에 붙은 꼬리 — 글 시작 줄을 늘리지 않게([10] 7) */
.hits a.f-why { min-height: 48px; font-size: var(--fs-1); } .hits a.f-why > i { font-style: normal; color: var(--sub); font-size: var(--fs-3); } /* 찾은 맨 위 회사 줄 밑 「이 회사로 왜 사? ›」(총정리 B4) */
.hits a.xo { flex-wrap: wrap; row-gap: 0; padding-top: var(--sp-1); padding-bottom: var(--sp-1); } .hits a.xo .nm { overflow-wrap: anywhere; } .hits a.xo small { white-space: normal; } /* 펀드 · 증권 이름은 길어 둘째 줄로 */
html.f2 .hits a, html.f3 .hits a { flex-wrap: wrap; row-gap: 0; padding-top: var(--sp-1); padding-bottom: var(--sp-1); } html.f2 .hits small, html.f3 .hits small { white-space: normal; } /* 큰 글씨 — 이름 다음 줄로 설명(넘치지 않게) */
.prem { display: flex; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-2); align-items: center; } /* 편지 여는 밤(첫 화면 「더 보기」 · [10] 5 · 8) */
.prem .pth { flex: none; width: 46%; aspect-ratio: 16 / 9; border-radius: 14px; border: 2px solid var(--gold); background: linear-gradient(160deg, #F7F7F7, #FFFFFF); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.prem .pth b { color: var(--gold); font-size: var(--fs-2); }
.prem .pth small { font-size: var(--fs-1); color: var(--sub); }
.prem b { display: block; font-size: var(--fs-2); }
.prem small { display: block; font-size: var(--fs-1); color: var(--sub); }
.safe { color: var(--sub); font-size: var(--fs-1); text-align: center; margin: var(--sp-3) var(--sp-2) var(--sp-1); }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabs) + 16px); transform: translateX(-50%); z-index: 40; background: var(--ink); color: #111; padding: var(--sp-1) var(--sp-2); border-radius: 12px; font-size: var(--fs-1); max-width: 90vw; }
@media (min-width: 720px) { .view, .top, .trial { max-width: 720px; margin-left: auto; margin-right: auto; } .tabs { left: 50%; transform: translateX(-50%); max-width: 720px; } }

/* ── 첫 화면 붙박이 — 지금 아틀란스(site/atlas/atlas.css)에서 그대로 옮김(먹빛 색 이름 · 사장님 편지 · 열면 보드리 · 큰 날 「!」 · 이야기 입구 · 봉인 줄 · 보드리 약속) ── */
html { font-size: 21px; } /* 옮긴 줄의 rem 이 지금 아틀란스와 같은 크기(21px)가 되게 — 새 화면의 나머지 글은 px */
:root {
  color-scheme: dark;
  /* 먹빛(2026-10-15 12:43 사장님 「모든 화면을 바꿔」 — 첫 화면 먹빛 판(규칙 67)을 모든 화면에) — 색 이름은 옛 이름 그대로(night = 바탕 · band = 막대 · violet = 강조) · 값만 먹빛
     강조는 진주 회색(색 없는 먹 — 빨강 · 파랑 · 금빛과 겹치지 않음) · 옛 청자 밤(#0C0E12 · #0C0E12 · 옥색 #6CC7A8)은 기록에만 */
  --night: #0C0E12; --band: #0C0E12; --violet: #D9D4C9;                 /* 바탕 먹 · 막대 먹 · 강조 진주 회색(면 · 줄 · 점) */
  --card: #13161C; --card2: #1C1F26; --card3: #272B34;                   /* 면 세 단 — 그림자 대신 밝기(편지지 면) */
  --hair: rgba(242, 239, 232, .12); --hair2: rgba(242, 239, 232, .22);
  --seam: rgba(242, 239, 232, .22);
  --lift: rgba(242, 239, 232, .04); --press: rgba(242, 239, 232, .08);  /* 올림 · 누름 상태 층 */
  --ink: #F2EFE8; --ink-hi: #FFFFFF; --sub: #B0B5BD; --mute: #8E959F;    /* 글 — 진주 · 보조 회색(바탕 · 면 셋 위 대비 4.5 넘게 — 가장 밝은 면 card3 위 --mute 4.7) */
  --violet-ink: #D8DCE2; --violet-wash: rgba(242, 239, 232, .08); --violet-line: rgba(242, 239, 232, .32); --violet-glow: rgba(242, 239, 232, .14); /* 고리 글 · 테 · 옅은 면 */
  --gold: #E9B949; --gold-wash: rgba(233, 185, 73, .08); --gold-line: rgba(233, 185, 73, .6);   /* 금빛 = 뜻 있는 테 · 글만 */
  --up: #FF5A65; --down: #5B96FF; --up-ink: #FF5A65; --down-ink: #5B96FF; /* 오름 · 내림 뜻 그대로(첫 화면과 같은 빨강 · 파랑 — 먹 위 대비 6 넘게) */
  --up-fill: rgba(255, 90, 101, .3); --down-fill: rgba(91, 150, 255, .3); --up-fade: rgba(255, 90, 101, .03); --down-fade: rgba(91, 150, 255, .03);
  --lacquer: #0C0E12; --lacquer-ink: #F2EFE8; --lacquer-sub: #B0B5BD; --lacquer-gold: #E9B949; /* 위 · 아래 막대 — 먹 · 막대 안 글은 진주 */
  --moon: #F2EFE8; --moonrow: rgba(242, 239, 232, .07);                   /* 달(제목 옆 둥근 창 테) · 달빛(1등 줄 — 옅게) */
  --m4-band: #13161C; --m4-line: #272B34; --m4-soft: #1C1F26; --m4-neu: #6F7782; --m4-line2: rgba(242, 239, 232, .08); /* 먹빛 판 가는 선 셋 · 그대로 색 */
  --m4-ease: cubic-bezier(.2, .7, .2, 1);
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", 'Pretendard Variable', Pretendard, system-ui, "Noto Sans KR", "Malgun Gothic", sans-serif; /* 위 :root 와 같은 차례(이 칸이 뒤라 이것이 이김 · 2026-10-22 14:49 글꼴 — 애플 기기 = 애플 글꼴 · 그 밖 = 프리텐다드) */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --row: 2.1rem; --roww: 3.3rem; --row2: 3.2rem; --roww2: 4.7rem; /* 방향 · 세기 · 힘 한 줄이 붙은 줄(11:10 「이 화면에서 나와야 해」) */
}
:root { --serif: 'Gowun Batang', 'Pretendard Variable', Pretendard, serif; }
.m4-letter .nb, .m4-sec .nb { white-space: nowrap; }
/* ① 사장님 편지 — 달빛 아래 편지지(가는 줄은 글줄 밑에 · 줄 높이 1.72em) */
html.m4 a.hello.m4-letter { position: relative; display: block; overflow: hidden; margin: 0 -24px; padding: 32px 24px 0; min-height: 0; background: var(--m4-band); border: 0; border-bottom: 1px solid var(--m4-line); border-radius: 0; color: var(--ink); }
html.m4 a.hello.m4-letter:hover { border-color: var(--m4-line); }
.m4-msg { position: relative; display: block; margin: 0; padding-bottom: 32px; font-family: var(--serif); font-size: 1.048rem; line-height: 1.72; letter-spacing: -.01em; font-weight: 400;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.72em - 1px), var(--m4-line2) calc(1.72em - 1px), var(--m4-line2) 1.72em); background-position: 0 -.24em; background-origin: content-box; background-clip: content-box; }
.m4-msg .hml { position: relative; z-index: 1; display: block; text-wrap: balance; white-space: pre-wrap; }
.m4-msg .hml:nth-last-child(3), .m4-msg .hml:nth-last-child(4) { padding-right: 96px; } /* 끝 두 줄 — 작은 홍표 자리(뒤에 달 · 홍표 둘) */
.m4-msg .m4-moon { position: absolute; z-index: 0; right: -30px; bottom: 0; width: 134px; height: 134px; border-radius: 50%; background: rgba(242, 239, 232, .07); border: 1px solid rgba(242, 239, 232, .12); outline: 1px solid rgba(242, 239, 232, .05); outline-offset: 12px; }
html.m4 a.hello.m4-letter img.m4-hp { position: absolute; z-index: 2; right: -2px; bottom: -5px; width: 88px; height: 110px; border-radius: 0; object-fit: contain; }
.m4-stars { position: absolute; inset: 0; pointer-events: none; }
.m4-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--ink); opacity: .4; }
.m4-stars i:nth-child(1) { left: 72%; top: 22px; } .m4-stars i:nth-child(2) { left: 83%; top: 46px; width: 2px; height: 2px; } .m4-stars i:nth-child(3) { left: 93%; top: 18px; }
.m4-stars i:nth-child(4) { left: 78%; top: 92px; width: 2px; height: 2px; } .m4-stars i:nth-child(5) { left: 90%; top: 78px; } .m4-stars i:nth-child(6) { left: 96%; top: 118px; width: 2px; height: 2px; } .m4-stars i:nth-child(7) { left: 69%; top: 126px; }
.m4-act { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 16px 0 12px; border-top: 1px solid var(--m4-line); }
.m4-ic { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--m4-line); border-radius: 22px; color: var(--ink); }
.m4-aw b { display: block; font-weight: 500; color: var(--ink); } .m4-aw > span { display: block; color: var(--sub); }
.m4-chev { font-style: normal; font-size: 1.143rem; color: var(--mute); }
.m4-gift { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 0 24px; letter-spacing: -.025em; color: var(--ink); }
.m4-gift svg { flex: none; color: var(--sub); }
@media (max-width: 379px) { .m4-gift svg { display: none; } .m4-msg { letter-spacing: -.02em; } }
@media (max-width: 355px) { html.m4 a.hello.m4-letter img.m4-hp { width: 72px; height: 90px; } .m4-msg .hml:nth-last-child(3), .m4-msg .hml:nth-last-child(4) { padding-right: 76px; } }
/* 열 때 5초 — 달이 떠오르고 「홍표!」 세 번 → 큰 홍표 · 큰 달이 편지 끝 제자리로 날아가 앉음 → 붓으로 쓰듯 한 줄씩 */
.m4-letter.intro .hml, .m4-letter.intro .m4-hp, .m4-letter.intro .m4-moon, .m4-letter.intro .m4-act, .m4-letter.intro .m4-gift { visibility: hidden; }
.m4-letter .hpi { position: absolute; inset: 0 0 auto 0; height: 460px; height: min(100%, 460px, calc(100vh - 280px)); height: min(100%, 460px, calc(100svh - 280px)); display: block; z-index: 3; pointer-events: none; } /* 여는 보드리 칸은 첫 화면 높이에 맞춤 — 편지가 길어져도(2026-10-16 격언 열 가지 · 틀림 장부 45) 그림 · 달 · 말풍선이 첫 화면 안 */
.m4-letter .hpi .m4-bm { position: absolute; left: 50%; top: 15%; width: 250px; height: 250px; margin-left: -125px; border-radius: 50%; background: rgba(242, 239, 232, .07); border: 1px solid rgba(242, 239, 232, .12); outline: 1px solid rgba(242, 239, 232, .05); outline-offset: 22px; }
html.m4 a.hello.m4-letter .hpi img.hpi-bird { position: absolute; left: 50%; bottom: 28px; width: auto; height: 66%; max-width: 80%; border-radius: 0; object-fit: contain; transform: translateX(-50%); }
.m4-letter .hpi .hpi-b { position: absolute; padding: 4px 16px; border-radius: 18px; background: var(--ink); color: #0C0E12; border: 2px solid #7FFFE6; font-weight: 600; white-space: nowrap; line-height: 1.4; }
/* 「홍표!」 셋은 홍표 머리 위로(홍표 그림 높이는 편지의 66% 이하 — 그 위에 앉힘 · 다른 눈 L11) */
.m4-letter .hpi .b1 { left: 5%; bottom: calc(30px + 66%); font-size: 1rem; } .m4-letter .hpi .b2 { right: 5%; bottom: calc(46px + 66%); font-size: 1.143rem; } .m4-letter .hpi .b3 { left: 50%; top: 7%; font-size: 1.43rem; transform: translateX(-50%); }
.m4-letter.landed .m4-hp, .m4-letter.landed .m4-moon { animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .m4-letter.intro .hpi .m4-bm { animation: m4-moonrise 1.8s var(--m4-ease) both; }
  .m4-letter.intro .m4-stars i { animation: m4-twinkle 1.4s var(--m4-ease) both; }
  .m4-letter.intro .m4-stars i:nth-child(2) { animation-delay: .25s; } .m4-letter.intro .m4-stars i:nth-child(3) { animation-delay: .5s; } .m4-letter.intro .m4-stars i:nth-child(4) { animation-delay: .75s; }
  .m4-letter.intro .m4-stars i:nth-child(5) { animation-delay: 1s; } .m4-letter.intro .m4-stars i:nth-child(6) { animation-delay: 1.25s; } .m4-letter.intro .m4-stars i:nth-child(7) { animation-delay: 1.5s; }
  html.m4 .m4-letter.intro .hpi img.hpi-bird { animation: m4-bob 2.2s ease-in-out .3s infinite alternate; }
  .m4-letter.intro .hpi .hpi-b { animation: m4-pop .45s var(--m4-ease) both; } .m4-letter.intro .hpi .b1 { animation-delay: .6s; } .m4-letter.intro .hpi .b2 { animation-delay: 1.5s; } .m4-letter.intro .hpi .b3 { animation-name: m4-pop3; animation-delay: 2.4s; }
  .m4-letter.rv .hml { animation: m4-ink 1.05s var(--m4-ease) both; }
  .m4-letter.rv .hml:nth-child(2) { animation-delay: 0.13s; } .m4-letter.rv .hml:nth-child(3) { animation-delay: 0.26s; } .m4-letter.rv .hml:nth-child(4) { animation-delay: 0.39s; } .m4-letter.rv .hml:nth-child(5) { animation-delay: 0.52s; } .m4-letter.rv .hml:nth-child(6) { animation-delay: 0.65s; } .m4-letter.rv .hml:nth-child(7) { animation-delay: 0.78s; } .m4-letter.rv .hml:nth-child(8) { animation-delay: 0.91s; } .m4-letter.rv .hml:nth-child(9) { animation-delay: 1.04s; } .m4-letter.rv .hml:nth-child(10) { animation-delay: 1.17s; } .m4-letter.rv .hml:nth-child(11) { animation-delay: 1.30s; } /* 11줄 — 끝 줄도 옛 일곱 줄처럼 2.4초 안에 다 씀 */
  .m4-letter.rv .m4-act, .m4-letter.rv .m4-gift { animation: m4-rise .7s 1.9s var(--m4-ease) both; }
}
@keyframes m4-twinkle { 0% { opacity: 0; transform: scale(.3); } 55% { opacity: .9; transform: scale(1.3); } 100% { opacity: .4; transform: none; } }
@keyframes m4-moonrise { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
@keyframes m4-ink { from { clip-path: inset(-20% 100% -20% 0); opacity: .35; } to { clip-path: inset(-20% 0 -20% 0); opacity: 1; } }
@keyframes m4-bob { from { transform: translate(-50%, 0); } to { transform: translate(-50%, -8px); } }
@keyframes m4-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes m4-pop3 { from { opacity: 0; transform: translateX(-50%) scale(.6); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes m4-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes m4-stamp { 0% { opacity: 0; transform: scale(1.7) rotate(-12deg); } 55% { opacity: 1; transform: scale(.93) rotate(2deg); } 100% { opacity: 1; transform: none; } }
.m4-cap { margin: var(--sp-2) 0 0; color: var(--mute); text-wrap: pretty; }
.m4-al { margin: 0 0 var(--sp-2); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--gold-line); border-radius: 8px; background: var(--gold-wash); color: var(--gold); font-weight: 500; text-wrap: pretty; }
.m4-top { margin: var(--sp-2) 0 0; } .m4-top .m4-al:last-child { margin-bottom: 0; } /* 큰 날 금빛 「!」 — 편지 위(2026-10-16) */
.m4-mr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-2); row-gap: var(--sp-1); margin-top: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--m4-line); border-bottom: 1px solid var(--m4-soft); }
.m4-mr .l { color: var(--mute); } .m4-mr .k { grid-column: 1; font-weight: 500; } .m4-mr .m4-chev { grid-column: 2; grid-row: 1 / 3; }
.m4-seal-box { margin: var(--sp-3) 0 0; padding: var(--sp-1) 0 var(--sp-2); text-align: center; }
.m4-seal { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 16px; border: 1.5px solid rgba(242, 239, 232, .45); border-radius: 12px; }
.m4-seal i { display: block; width: 46px; height: 46px; border-radius: 50%; background: var(--moon) url(/media/makbi-moon.svg) center / cover no-repeat; } /* 도장 = 달 속 홍표(막비 얼굴은 달 그림 하나만 — 네 눈 클로드 눈) */
.m4-pr { margin: 0; font-family: var(--serif); font-size: 1.048rem; line-height: 1.6; } .m4-pr span { display: block; text-wrap: balance; }
.m4-seal-box .m4-cap { text-wrap: balance; }
a.tk-entry { display: flex; align-items: center; gap: var(--sp-1); min-height: 48px; margin: var(--sp-1) 0 0; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--hair2); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 1rem; line-height: 1.35; }
a.tk-entry b { white-space: nowrap; } a.tk-entry span { color: var(--sub); flex: 1; min-width: 0; } a.tk-entry i { font-style: normal; color: var(--sub); }
/* 새 화면에 맞춤 — 지금 아틀란스는 칸 옆 여백 24px · 새 화면은 16px */
.lw { padding: 0 var(--sp-2); }
html.m4 a.hello.m4-letter { margin: 0 -16px; padding: 28px 16px 0; }
a.tk-entry { margin: var(--sp-1) var(--sp-2) 0; padding: var(--sp-1) var(--sp-2); border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--hair2); font-size: var(--fs-2); } /* 테두리는 안쪽 그림자 — 글 시작이 칩 글 · 띠 글과 같은 줄(32px · [10] 7) */
@media (max-width: 479px) { a.tk-entry span { display: none; } a.tk-entry b { flex: 1; } } /* 폰 폭은 「오늘의 이야기 ›」 한 줄(첫 화면 한 화면 · 안의 차례는 이야기 쪽에) */
a.tk-entry i { text-align: right; }
.m4-top { margin: var(--sp-2) var(--sp-2) 0; }
.m4-al { font-size: var(--fs-2); }
.m4-mr { margin: var(--sp-3) var(--sp-2) 0; font-size: var(--fs-2); color: var(--ink); }
.m4-seal-box { margin: var(--sp-3) var(--sp-2) 0; }
.m4-pr { font-size: var(--fs-3); }
.m4-cap { font-size: var(--fs-1); }

/* 첫 화면 한 화면(2026-10-18 명령문 0015 [6] 1 ~ 4 · 9 · [10] 5 ~ 8 · 일꾼 S2 → S2x) — 한 줄 띠(날짜 줄 한 번 · 코스피 · 코스닥 하루 · 큰 날 「!」) · 「더 보기」 · 오늘 시장 세 줄
   글씨 --fs 넷(17 · 19 · 21 · 24) · 간격 --sp 만 · 테두리는 안쪽 그림자(글 시작 = 16 + 16px 한 줄) · 옛 「오늘 한 줄」(.today · 음수 간격)은 지움 */
a.hm-band { display: block; position: relative; margin: var(--sp-1) var(--sp-2) 0; padding: var(--sp-1) var(--sp-2); min-height: 44px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair2); color: var(--ink); text-decoration: none; font-size: var(--fs-1); line-height: 1.4; }
a.hm-band .hm-row { display: block; padding-right: var(--sp-3); } /* 날짜 줄 · 숫자 줄 = 글 흐름 한 줄씩(글 시작 왼쪽 줄 하나 · [10] 7) */
a.hm-band .hm-bd { color: var(--sub); }
a.hm-band .hm-ixs { display: block; }
a.hm-band .hm-ix { white-space: nowrap; }
a.hm-band .hm-ix b { font-size: var(--fs-2); font-weight: 700; }
a.hm-band .hm-q { color: var(--gold); }
a.hm-band .hm-chev { position: absolute; right: var(--sp-2); top: var(--sp-1); font-style: normal; color: var(--sub); text-align: right; }
a.hm-band .m4-al { margin: var(--sp-1) 0 0; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-1); }
details.hm-more { margin: var(--sp-2) 0 0; border-top: 1px solid var(--hair); }
details.hm-more > summary { display: flex; align-items: center; justify-content: center; text-align: center; gap: var(--sp-1); min-height: 48px; padding: 0 var(--sp-2); font-size: var(--fs-2); color: var(--ink); cursor: pointer; list-style: none; }
details.hm-more > summary::-webkit-details-marker { display: none; }
details.hm-more > summary::after { content: '▾'; color: var(--sub); }
details.hm-more[open] > summary::after { content: '▴'; }
.hm-mkt h2.sec { margin: var(--sp-1) var(--sp-2); }
.hm-in > h2.sec { margin: var(--sp-3) var(--sp-2) var(--sp-1); }
ul.hm-sum { list-style: none; margin: 0 var(--sp-2); padding: 0; display: grid; grid-auto-rows: 1fr; gap: var(--sp-1); } /* 같은 꼴 칸은 같은 높이([10] 9) */
/* 세 줄 묶음 = 이름 줄 → 큰 숫자 → 까닭 위아래로 쌓음(옆 칸 없음 — 아주 큰 글씨 · 영어 320 · 360 에서도 화면 안 · 2026-10-18 깃허브 영어 검사 39095363687) */
.hm-it { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-1); padding: var(--sp-2); border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); }
.hm-lb { display: flex; flex-wrap: wrap; column-gap: var(--sp-1); min-width: 0; color: var(--sub); font-size: var(--fs-1); }
.hm-lb > * { min-width: 0; overflow-wrap: anywhere; }
.hm-tag { color: var(--gold); font-size: var(--fs-1); }
.hm-big { min-width: 0; font-size: var(--fs-4); font-weight: 700; overflow-wrap: anywhere; }
.hm-big.q { color: var(--gold); }
.hm-why { min-width: 0; font-size: var(--fs-2); line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.hm-mkt a.more { margin: var(--sp-1) var(--sp-2); display: flex; align-items: center; justify-content: center; }
p.hm-safe { margin: var(--sp-2) var(--sp-2) var(--sp-1); }

/* 카톡 단추(사장님 2026-10-18 16:39 [6] 1 · 2 · 9 · 일꾼 KB1 · 단추를 만드는 곳 site/next/share-btn.js 한 곳) — 종목 줄 · 카드 오른쪽 끝 · 누르는 자리 44px · 노란 말풍선 그림
   줄 꼴(flex · grid)은 각 쪽 css 가 정함 — 이 묶음은 단추 자체만(줄이 좁아도 줄지 않음 · 간격 없음 · 음수 간격 없음) */
.kk-btn { flex: none; width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; align-self: center; border-radius: 50%; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; }
.kk-btn:active { background: var(--card2); }
.kk-ic { width: 28px; height: 28px; flex: none; display: block; pointer-events: none; }
.kk-ic .kk-b { fill: #FEE500; } /* 카카오 노랑 */
.kk-btn.kk-wide { width: auto; min-height: 44px; height: auto; gap: var(--sp-1); padding: 0 var(--sp-2); border-radius: 8px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--hair2); font-size: var(--fs-2); font-weight: 700; }

/* 카톡 줄(사장님 2026-10-18 16:39 [6] 1 · 6 · 일꾼 KB2) — 앱(app.js) 종목 줄 · 카드의 꼴 · 줄 고리(a)와 카톡 단추가 형제(app.js kkWrap) · 단추는 오른쪽 끝
   .kkr = 한 줄(고리가 남는 자리 · 단추는 줄지 않음) · .kkc = 큰 카드(단추 = 카드 밑 글 줄 오른쪽 끝) · .kkg = 작은 칸(채널 회사 칸 · 본 기록) · .kkh = 찾기 줄 · .kkn = 회사 화면 「다음 볼 것」(p-co.css) */
.kkr { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.kkr > :first-child { flex: 1 1 auto; min-width: 0; }
.kkr.kkc, .kkr.kkg { display: block; position: relative; }
.kkc > .kk-btn { position: absolute; right: var(--sp-2); bottom: var(--sp-2); }
.kkc > .card .meta { width: calc(100% - 52px); } /* 글이 단추 밑으로 가지 않게(단추 44px + 8px) */
.kkg > .kk-btn { position: absolute; right: 0; bottom: 0; }
.kkg > a > b, .kkg > a > small { width: calc(100% - 52px); }
.row > .kkg > a > b { min-height: 44px; } /* 본 기록 칸 밑 글은 이름 한 줄 — 단추가 그림에 닿지 않게 */
.row > .kkg { flex: none; width: 46%; }
.row > .kkg > a { width: auto; }
.hits > .kkh { border-bottom: 1px solid var(--hair); padding-right: var(--sp-2); }
.hits > .kkh > a { border-bottom: 0; flex-wrap: wrap; row-gap: 0; padding-top: var(--sp-1); padding-bottom: var(--sp-1); } /* 좁으면(320) 꼬리 글이 이름 밑 줄로 — 이름이 글자마다 꺾이지 않게 */
.hits > .kkh .nm { min-width: 0; overflow-wrap: anywhere; }
.chan.wl[data-kkrow] { gap: var(--sp-1); } /* 관심 회사 줄 — 단추 둘(관심 담음 · 카톡)이 이름 칸을 너무 누르지 않게 */
/* 영어 · 좁은 화면(360 아래) — 관심 회사 줄 이름 칸이 단추 둘에 눌려 「−69.7%」가 칸을 넘음(320 영어 이름 칸 54px · 2026-10-18 저녁 합치기)
   → 큰 글씨(f2 · f3)와 같이 줄을 둘로: 위 = 그림 · 이름 · 20거래일 %, 아래 = 관심 담음 · 카톡(오른쪽 끝 · 카톡이 맨 끝) */
@media (max-width: 359px) {
  html.en .chan.wl[data-kkrow] { flex-wrap: wrap; row-gap: var(--sp-1); }
  html.en .chan.wl[data-kkrow] > a { flex: 1 1 100%; }
  html.en .chan.wl[data-kkrow] > .sub-btn { margin-left: auto; }
}

/* 첫 화면 본질 세 줄(사장님 2026-10-18 16:39 [5] 1 ~ 5 · 8 · 일꾼 KC · 그리는 곳 app.js essenceBox) — 이야기 입구 바로 위 칸 하나(section.ess)
   글 시작 = 16 + 16px(칩 · 이야기 입구 · 띠 글과 같은 왼쪽 줄 · [10] 7) · 글씨 --fs-2 하나 · 간격 --sp 만 · 테두리는 안쪽 그림자(띠와 같은 꼴) · 누르는 자리 48px
   펼침 = 세 줄 · 접힘(다시 온 기기) = 첫 줄 한 줄(넘으면 「…」 — 누르면 세 줄) · 「?」가 든 줄은 금빛 */
section.ess { margin: var(--sp-1) var(--sp-2) 0; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair2); }
.ess-d > summary { display: flex; align-items: center; gap: var(--sp-1); min-height: 48px; padding: var(--sp-1) var(--sp-2); cursor: pointer; list-style: none; font-size: var(--fs-2); font-weight: 700; line-height: 1.45; }
.ess-d > summary::-webkit-details-marker { display: none; }
.ess-d > summary::after { content: '▾'; flex: none; color: var(--sub); font-weight: 400; }
.ess-d[open] > summary::after { content: '▴'; }
.ess-t { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.ess-d:not([open]) .ess-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ess-l { margin: 0; padding: 0 var(--sp-2) var(--sp-1); font-size: var(--fs-2); line-height: 1.45; text-wrap: pretty; }
.ess-d > .ess-l:last-child { padding-bottom: var(--sp-2); }
.ess-l.q { color: var(--gold); }
a.ess-v { display: flex; align-items: center; min-height: 44px; padding: 0 var(--sp-2) var(--sp-1); color: var(--sub); font-size: var(--fs-2); text-decoration: underline; text-underline-offset: 3px; }

/* ── 흰 판(html.white) — 사장님 2026-10-19 02:03 「구글과 잡스 판」 · 고른 시안 w3-b · 일꾼 A(색) · docs/design/white-2026-10-19/brief-build.md
   html 에 white 가 붙은 동안만(지금은 첫 화면 · app.js 가 붙이고 뗌) — 붙지 않으면 위 먹빛 그대로
   흰 바탕 · 먹 글 · 금빛 · 빨강 = 오름 · 파랑 = 내림 · 흐린 글도 흰 바탕 위 4.5 넘게(--sub 8.1 · --mute 6.3 · --gold 5.3 · --up 5.3 · --down 5.9)
   단추 · 칸 테두리 = --hair2 #6B717C(흰 바탕 위 4.9) · 위 · 아래 막대 줄 = --line #8E949E(3.0) · 목록 사이 줄 --hair #8E949E(3.0 · 시안 잣대 예) · 칸 안 꾸밈(눈금 · 진행 막대 바탕 · 달)만 --hair-soft #D9DCE1
   단추 바탕은 흰색(둘레와 같음 — 모양은 테두리가 보임) 또는 먹(흰 글) · 그림자 · 그러데이션 · 입체 없음 · 글 17px 아래 없음 · 누르는 것 48 × 48 넘게 */
html.white {
  /* 앙리 마티스 판(사장님 2026-10-23 00:38 「앙리 마티스가 이 걸 만든다는 철저한 입장으로 이기적으로 만들어봐」)
     방스 로사리오 성당 — 흰 벽 · 흰 타일 위 검은 선 그림 · 유리창은 세 색뿐(「an intense yellow」 해 · 「an intense green」 풀 · 「a vivid blue」 바다와 하늘) https://en.wikipedia.org/wiki/Chapelle_du_Rosaire_de_Vence
     「an art of balance, of purity and serenity … for the businessman … something like a good armchair」(1908 「화가의 노트」) https://bonjourparis.com/art/henri-matisse-at-150-art-as-comfy-as-an-easy-chair/
     오려 붙인 색종이 — 칠한 종이를 가위로 오려 꽉 찬 색 면으로 https://www.moma.org/interactives/exhibitions/2014/matisse/the-cut-outs.html
     ① 바탕은 흰 벽 #FFFFFF ② 글 · 테는 검은 선 ③ 색은 세 가지만 꽉 찬 면으로 — 초록 #007A35 = 자라남 · 오름 · 파랑 #1E4FC2 = 내림 · 노랑 = 해 · 뜻 있는 칸 바탕 ④ 섞지 않음 · 번짐 · 그림자 · 움직임 없음 ⑤ 「?」 같은 뜻 표시 글은 보라 #6B2A8C(마티스 오린 종이의 보라)
     옛 판: 애플 방식 맑은 연초록 #E6F5EB(00:11) · 숲 초록 #0B2716 · 우주 밤하늘 #070B17 · 돌 판 #080808 */
  color-scheme: light;
  --bg: #FFFFFF; --night: #FFFFFF; --band: #FFFFFF; --violet: #000000;
  --card: #FFFFFF; --card2: #F7F7F7; --card3: #EEEEEE;
  --hair: #111111; --hair2: #111111; --line: #DDDDDD; --hair-soft: #EEEEEE; --seam: #EEEEEE; --press: #EEEEEE; --lift: #FFFFFF;
  --ink: #000000; --ink-hi: #000000; --sub: #111111; --mute: #222222; --flat: #222222;
  --violet-ink: #000000; --violet-wash: #FFFFFF; --violet-line: #111111; --violet-glow: #F7F7F7;
  --gold: #6B2A8C; --gold-wash: #FFF3B8; --gold-line: #6B2A8C;
  --up: #007A35; --down: #1E4FC2; --up-ink: #007A35; --down-ink: #1E4FC2; --up-bg: #007A35; --down-bg: #1E4FC2; /* 오름 = 짙은 초록 글 · 맑은 초록 칸(00:07 「아니 노란빛 없이 맑은 녹색」) · 내림 = 파랑 글 · 연한 파랑 칸 */
  --up-fill: rgba(0, 122, 53, .16); --down-fill: rgba(30, 79, 194, .16); --up-fade: rgba(0, 122, 53, .06); --down-fade: rgba(30, 79, 194, .06);
  --lacquer: #FFFFFF; --lacquer-ink: #000000; --lacquer-sub: #111111; --lacquer-gold: #6B2A8C;
  --moon: #000000; --moonrow: #F7F7F7;
  --m4-band: #FFFFFF; --m4-line: #8A8A8A; --m4-soft: #8A8A8A; /* 칸 테 · 줄 — 흰 벽 위 대비 3 넘게(큰 검사 6/11 #/surge 칸 테 1.92) */ --m4-neu: #222222; --m4-line2: #EEEEEE;
  background: #FFFFFF;
}
html.white body { background: #FFFFFF; color: var(--ink); font-weight: 600; }
/* 영어 글은 굵기를 옛 그대로(라틴 글자는 굵을수록 넓어져 아주 큰 글씨 320 · 360 에서 7px 넘침 — 큰 검사 cal-2254 6/11 en · 한글은 굵어도 폭이 같음) */
html.white[lang="en"] body { font-weight: 400; }
html[lang="en"] .crow .cn { font-weight: 600; }
html[lang="en"] .th-rn, html[lang="en"] .th-pkrow b, html[lang="en"] .th-sub.th-key, html[lang="en"] .th-h2 { font-weight: 700; } /* 글씨 조금 진하게(사장님 2026-10-22 23:20 「글씨에 더 포인트가 갔으면 좋겠어요 · 글꼴진하게」) */
/* 그림자 · 글 그림자는 흰 판 안 어디에도 없음(입체는 원래 없음)(테두리가 필요한 칸은 아래에서 outline · border 로 다시 그림) */
html.white :is(.top, .tabs, #view, .foot, .trial, .toast),
html.white :is(.top, .tabs, #view, .foot, .trial) * { box-shadow: none !important; text-shadow: none !important; }
/* 누르는 것은 48 × 48 넘게(글 속 고리처럼 줄 안에 흐르는 것은 칸이 정함) */
html.white :is(.top, .tabs, #view) :is(a[href], button, summary, input, select, textarea, [role="button"]) { min-height: 48px; min-width: 48px; }

/* 위 막대 · 아래 단추 · 시험판 띠 · 맨 아래 고리 */
html.white .top { background: var(--bg); border-bottom: 1px solid var(--line); }
html.white .logo { min-height: 48px; }
html.white .ibtn { width: 48px; height: 48px; }
html.white .ibtn:active, html.white .tbtn:active, html.white .kk-btn:active { background: var(--press); }
html.white .tbtn { height: 48px; min-width: 48px; border-radius: 24px; border-color: var(--hair2); }
html.white .tbtn[aria-current="page"] { border-color: var(--gold); color: var(--gold); }
html.white .tabs { background: var(--bg); border-top: 1px solid var(--line); }
html.white .tabs a { min-height: 48px; color: var(--mute); }
html.white .tabs a[aria-current="page"] { color: var(--ink); }
html.white .trial { background: var(--bg); border-bottom: 1px solid var(--gold); color: var(--gold); }
html.white .trial a, html.white .foot a { min-height: 48px; }
html.white .toast { background: var(--ink); color: var(--bg); }

/* 칩 · 단추 — 흰 바탕 + 테두리(누른 것 · 고른 것 = 먹 바탕 흰 글) */
html.white .chips, html.white .shelf { -webkit-mask-image: none; mask-image: none; }
html.white .chip { min-height: 48px; background: var(--bg); border: 1px solid var(--hair2); color: var(--ink); }
html.white .chip[aria-current="page"], html.white .chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
html.white .act, html.white .more, html.white .sh .side a, html.white .sh .side button { min-height: 48px; background: var(--bg); border: 1px solid var(--hair2); color: var(--ink); }
html.white .act[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
html.white .sub-btn { min-height: 48px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
html.white .sub-btn[aria-pressed="true"] { background: var(--bg); color: var(--ink); border-color: var(--hair2); }
html.white .why-go { min-height: 52px; background: var(--bg); border-color: var(--hair2); }
html.white .ctabs button, html.white .avs a, html.white .chan > a, html.white a.ess-v, html.white details.nw > summary { min-height: 48px; }
html.white .ctabs button[aria-selected="true"] { border-bottom-color: var(--ink); }
html.white .find input { min-height: 52px; background: var(--bg); border: 2px solid var(--ink); color: var(--ink); }
html.white .find input::placeholder { color: var(--mute); opacity: 1; }
html.white .kk-btn { width: 48px; height: 48px; min-width: 48px; border: 1px solid var(--hair2); } /* 흰 바탕에 그림만 있는 단추도 테두리(일꾼 E 점검) */
html.white .kk-btn.kk-wide { width: auto; min-height: 48px; background: var(--bg); border: 1px solid var(--hair2); }
html.white .kkc > .card .meta { width: calc(100% - 56px); }
html.white .kkg > a > b, html.white .kkg > a > small { width: calc(100% - 56px); }

/* 그림 카드 · 보는 화면 · 시황 칸 · 채널 — 어두운 면 · 그러데이션을 흰 면 + 테두리로 */
html.white .th { background: var(--bg); border-color: var(--hair2); }
html.white .th .big { background: var(--bg); color: var(--ink); border: 1px solid var(--hair2); }
html.white .th .dur { background: var(--bg); color: var(--ink); border: 1px solid var(--hair2); } /* 먹 바탕이면 안의 빨강 · 파랑 숫자가 3.3 으로 흐려짐 */
html.white i.play { background: var(--ink); border-color: var(--bg); } /* ▶ 표시는 i.play 만(총정리 08:53 — 「왜 그럴까?」 열한 걸음 그림(why-chain.js)이 움직임을 다시 켤 때 붙이던 이름과 같아 그림이 통째로 가운데 56px 칸으로 빨려 들어갔음) */
html.white .av { background: var(--bg); border: 1px solid var(--gold); color: var(--gold); }
html.white .av.on { outline: 3px solid var(--gold); outline-offset: 0; }
html.white .st { background: var(--bg); border-color: var(--hair2); }
html.white .player { background: var(--bg); border-bottom: 1px solid var(--hair-soft); }
html.white .player .scrub { background: var(--hair-soft); }
html.white .player .tip { background: var(--bg); color: var(--ink); outline: 1px solid var(--hair2); outline-offset: -1px; } /* 테는 자리를 안 차지하게(글 시작 줄 그대로) */
html.white .player .cur { background: var(--hair2); }
html.white .chaps .cp, html.white .stats > div { background: var(--bg); border-color: var(--hair2); }
html.white .chaps .cp i { background: var(--bg); border: 1px solid var(--gold); }
html.white .chaps .cp.now { border-color: var(--gold); }
html.white .stats.chs { background: var(--bg); outline-color: var(--hair2); }
html.white .sh .bt { background: var(--hair-soft); }
html.white .sh .bub { background: var(--bg); border: 1px solid var(--hair2); }
html.white .sbar { background: var(--bg); }
html.white .sbar i { background: var(--hair-soft); }
html.white .sbar i.on { background: var(--ink); }
html.white .banner { background: var(--bg); border-bottom: 1px solid var(--hair); }
html.white .prem .pth { background: var(--bg); border-color: var(--gold); }
html.white .me small { font-size: var(--fs-1); }

/* 첫 화면 붙박이 — 편지 줄 무늬 · 달 · 별 · 말풍선 · 도장 · 띠 · 본질 칸(안쪽 그림자 테두리 → outline · 글 시작 줄은 그대로) */
html.white .m4-msg { background-image: none; }
html.white .m4-msg .m4-moon, html.white .m4-letter .hpi .m4-bm { background: var(--bg); border-color: var(--hair-soft); outline-color: var(--hair-soft); }
html.white .m4-stars i { background: var(--mute); }
html.white .m4-letter .hpi .hpi-b { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html.white .m4-seal { border-color: var(--hair2); }
html.white .m4-seal i { background-color: var(--bg); }
html.white .m4-al { background: var(--bg); border-color: var(--gold); }
html.white a.tk-entry, html.white a.hm-band { min-height: 48px; background: var(--bg); outline: 1px solid var(--hair2); outline-offset: -1px; }
html.white .hm-it { background: var(--bg); outline: 1px solid var(--hair2); outline-offset: -1px; }
html.white section.ess { background: var(--bg); outline: 2px solid var(--ink); outline-offset: -2px; }
html.white details.hm-more { border-top-color: var(--hair); }
/* 좁은 폭 로고 — 먹빛 판은 글자를 0px 로 숨기지만 흰 판은 17px 아래 글이 없어야 함 → 48 × 48 칸에 둥근 그림만 보이게 글자는 칸 밖으로 밀어 잘라 둠(읽는 이름은 aria-label) */
@media (max-width: 349px) { html.white .top .logo { font-size: var(--fs-1); width: 48px; min-width: 48px; overflow: hidden; justify-content: flex-start; gap: 24px; padding-left: 9px; } }
@media (max-width: 429px) { html.white.en .top .logo { font-size: var(--fs-1); width: 48px; min-width: 48px; overflow: hidden; justify-content: flex-start; gap: 24px; padding-left: 9px; } }
/* 흰 판 좁은 폭 위 막대 — 단추가 48 이라 320 · 360 영어에서 1px 넘쳤음(모든 쪽 검사 2026-10-19 03:40) → 둘레 · 사이를 줄임 */
@media (max-width: 379px) { html.white .top { padding: 0 var(--sp-1); gap: 4px; } }
/* 「카톡 보내기」 글 단추(share-btn.js kakaoText · 사장님 2026-10-25 「진짜모든곳에」) — 카카오 노랑 바탕 · 진한 글 · 말풍선은 진한 색(노랑 위에서 보이게) · 테두리는 흰 바탕과 대비 3 넘게 */
.kk-btn.kk-txt, html.white .kk-btn.kk-txt { background: #FEE500; color: #191919; border: 1px solid #191919; font-weight: 800; flex: 0 1 auto; max-width: 100%; text-align: center; line-height: 1.2; } /* 줄어들 수 있음 · 아주 큰 글씨 · 영어(Send on KakaoTalk)에서 칸 밖으로 안 나가게 글이 두 줄로(2026-10-25 en 검사 320 · 360) */
.kk-btn.kk-txt .kk-t { min-width: 0; overflow-wrap: anywhere; }
.kk-btn.kk-txt .kk-ic .kk-b { fill: #191919; }
.kk-btn.kk-txt:active { background: #F2D900; }
/* 회사 줄 카톡 단추에도 글자 */
.kk-btn.kk-row, html.white .kk-btn.kk-row { width: auto; min-width: 48px; max-width: 4.4em; height: auto; min-height: 48px; padding: 0 8px; border-radius: 12px; background: #FEE500; color: #191919; border: 1px solid #191919; font-size: var(--fs-1); font-weight: 800; line-height: 1.12; word-break: keep-all; text-align: center; }
.kk-btn.kk-row .kk-ic { display: none; }
.kk-btn.kk-row:active { background: #F2D900; }
html.en .kk-btn.kk-row { max-width: 6em; }
.kkc > .card .meta, html.white .kkc > .card .meta { width: calc(100% - 92px); }
html.en .kkc > .card .meta { width: calc(100% - 124px); }
/* 작은 칸 */
.kkg > .kk-btn.kk-row, html.white .kkg > .kk-btn.kk-row { position: static; display: flex; width: 100%; max-width: none; margin-top: 8px; }
.kkg > a > b, .kkg > a > small, html.white .kkg > a > b, html.white .kkg > a > small { width: auto; }
/* 쪽 · 칸 「카톡 보내기」 */
/* 쪽 단추 줄 = 「카톡 보내기」 + 「선물 받기」 */
.kk-pgrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: var(--sp-1) 0 var(--sp-2); min-width: 0; }
.kk-pgrow > .kk-btn.kk-pg { margin: 0; }
.kk-pgrow.kk-pgw { padding: var(--sp-1) var(--sp-2) 0; margin-top: 0; }
.kk-pgrow.kk-pgi { padding: 0 var(--sp-2); }
.kk-gift, html.white .kk-gift { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 0 var(--sp-2); border-radius: 8px; border: 1px solid #191919; background: #FFF1C2; color: #191919; font-size: var(--fs-2); font-weight: 800; text-decoration: none; }
.kk-gift:active { background: #FFE58A; }
.kk-box { display: flex; justify-content: flex-end; margin: 8px 0; min-width: 0; }
.kk-box.kk-boxi { padding: 0 var(--sp-2); }
/* 글 단추 「카톡 보내기」 노랑 */
.kk-yel, html.white .kk-yel, html.white .acts .act.kk-yel, .sh .side button.kk-yel, html.white .sh .side button.kk-yel { background: #FEE500; color: #191919; border-color: #191919; font-weight: 800; }
.kk-yel:active { background: #F2D900; }
/* 돌이 단추 안(#/dori · 아래 단추 넷째 · 사장님 2026-10-26 14:40 「어 넣어」) — 시황 · 관심 · 보유종목 · 오늘 장 · 돌이 인사 · 고객센터 큰 줄 */
.dm { display: grid; gap: var(--sp-1); margin: var(--sp-2); }
.dm-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1); min-height: 56px; box-sizing: border-box; padding: 0 var(--sp-2); border: 1px solid #DDDDDD; border-radius: 14px; background: #FFFFFF; color: #111111; font-size: var(--fs-3); text-decoration: none; }
.dm-it b { font-weight: 800; }
.dm-it i { font-style: normal; font-weight: 800; }
/* 잡스 차례 「더 보기」(site/next/jobs-order.js · 사장님 2026-10-27 11:39 「어 고쳐 빨리」) — 덜 중요한 글을 접음 · 테마 쪽 접기(th-fold)와 같은 꼴 */
.jb-more { margin: 16px 0; padding: 4px 16px; border: 1px solid #DDDDDD; border-radius: 16px; }
.jb-more > summary { display: flex; align-items: center; min-height: 48px; font-weight: 700; cursor: pointer; list-style: none; }
.jb-more > summary::-webkit-details-marker { display: none; }
/* 대범한 잡스 판(jobs-order.js jobsBold · 사장님 2026-10-27 14:49 「고쳐라 대담하게」) — 주인공 크게 · 금빛 테두리 · 단추 하나 */
.jb-hero { zoom: var(--jbz, 1); }
@media (max-width: 379px) { .jb-hero { zoom: var(--jbzs, 1); } }
.jb-card1 { outline: 3px solid #F2B84B; outline-offset: 8px; border-radius: 16px; background: rgba(242, 184, 75, .10); } /* 테두리는 바깥 선(outline) — 글 시작 왼쪽 줄이 늘지 않게([10] 7) */
.jb-card2 { position: relative; }
.jb-card2::before { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 6px; border-radius: 3px; background: #F2B84B; } /* 왼쪽 금빛 막대 — 글을 밀지 않음 */
.jb-act { box-shadow: 0 0 0 3px #F2B84B; border-radius: 16px; } /* 키우지 않고 금빛 테두리만 — 글 시작 줄 그대로 */
.jb-bold { padding: 0; border: 0; } /* 「자세히」 줄은 쪽 글과 같은 왼쪽 줄 */
.jb-bold > summary { padding-left: 0; padding-right: 0; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 700; cursor: pointer; }
.jb-bold > summary::-webkit-details-marker { display: none; }
.jb-bold > summary::after { content: '›'; font-size: 1.2em; }
.jb-bold[open] > summary::after { content: '⌄'; }
.jb-hide-no .th-no { display: none; }