/* 테마 시계 — 첫 화면 칸 · 쪽들이 같이 쓰는 그림 조각 모양(theme-home.js · index.html 이 모든 쪽에 붙임 · 첫 그림 가볍게 — 느린 4G 2.5초) · 사장님 2026-10-19 16:54 · 글씨는 var(--fs-*) · 간격은 var(--sp-*) · 음수 여백 없음 */
.th-home { margin: 0; padding: 0; }
.th-map { margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-1); border: 1px solid var(--hair); border-radius: 20px; background: var(--card); } /* 애플 무리 목록 — 맑은 연초록 바탕 위 흰 칸(2026-10-23 00:11) */
.th-clock { display: block; width: 100%; height: auto; }
.th-clock .th-sz { fill: rgba(0, 122, 53, .10); }
.th-clock .th-ax { stroke: #DDDDDD; stroke-width: 1; }
.th-clock .th-bl { stroke: var(--up); stroke-width: 2; stroke-dasharray: 4 4; }
.th-clock .th-turn { fill: none; stroke: #111111; stroke-width: 2; }
.th-clock .th-arw { fill: #111111; }
.th-clock .th-tail { fill: none; stroke: #000000; stroke-width: 2; opacity: .5; } /* 지나온 길 = 행성이 지나온 궤도처럼 흰 선(2026-10-20 22:17 「주황색으로만」) */
.th-clock .th-dot { fill: #222222; stroke: #FFFFFF; stroke-width: 1.5; }
.th-clock .th-dot.on { fill: var(--up); }
.th-clock .th-nb { fill: var(--up); stroke: #FFFFFF; stroke-width: 2; }
.th-clock .th-nbt { fill: #FFFFFF; font-size: var(--fs-1); font-weight: 700; }
/* 첫 화면 시계 누르는 곳(번호 셋 · 싹 칸 — 2026-10-20 07:08 「응」) — 누르는 자리는 투명 · 키보드로 오면 금빛 테 */
.th-clock .th-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.th-clock .th-hit { fill: transparent; stroke: none; }
.th-clock .th-tap:focus-visible .th-hit { stroke: var(--gold); stroke-width: 3; }
.th-clock .th-tapn:active .th-nb { fill: var(--gold); }
.th-clock .th-lb { fill: var(--ink); font-size: var(--fs-1); }
.th-clock .th-lb, .th-clock .th-zl, .th-clock .th-bt { paint-order: stroke; stroke: #FFFFFF; stroke-width: 4px; stroke-linejoin: round; } /* 점 · 꽃 선 위에서도 글이 읽히게(새 눈 검사 11) */
.th-clock .th-zl { fill: var(--ink); font-size: var(--fs-2); font-weight: 700; }
.th-clock .th-zl.th-zs, .th-clock .th-bt { fill: var(--up); }
.th-clock .th-zl.th-zq { fill: #222222; }
.th-clock .th-bt { font-size: var(--fs-1); }
.th-cap { display: flex; flex-direction: column; gap: 0; margin: var(--sp-1) 0 0; color: #111111; font-size: var(--fs-1); line-height: 1.5; }
.th-cap.th-cap1 { display: block; } /* 한 덩이 글 — 첫 그림의 가장 큰 글(느린 4G 2.5초 · check_white ③) */
.th-ans { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-5); font-weight: 700; line-height: 1.3; word-break: keep-all; }
.th-ans em { font-style: normal; color: var(--up); }
.th-ans em.dn { color: var(--down); } .th-ans em.fl { color: var(--flat); }
/* 「숫자로 자세히 보기」 안 숫자 줄 — 한 줄에 하나(이름 · 주황 수 · ›) · 누르면 그 목록(2026-10-20 09:46) · 2026-10-22 총정리(감사 A7): 테 두른 작은 네모 셋(지도 규칙 11) → 줄 */
.th-three { display: block; margin: 0 0 var(--sp-1); }
.th-three a { display: flex; align-items: center; gap: var(--sp-1); min-height: 56px; border-bottom: 1px solid #DDDDDD; color: var(--ink); font-size: var(--fs-2); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.th-three a span { flex: 1; min-width: 0; }
.th-three a i { flex: none; color: #111111; font-style: normal; font-size: var(--fs-3); text-align: right; }
.th-three a:active { background: #FFFFFF; }
.th-ansl { display: inline-flex; align-items: center; min-height: 48px; color: inherit; text-decoration: none; }
.th-ansl i { margin: 0 0 0 var(--sp-1); color: #111111; font-style: normal; font-size: var(--fs-3); }
.th-three b { flex: none; color: var(--up); font-size: var(--fs-3); font-weight: 700; text-align: right; }
.th-sub { margin: 0 0 var(--sp-2); color: #111111; font-size: var(--fs-2); line-height: 1.5; word-break: keep-all; }
.th-rows { margin: 0 0 var(--sp-1); }
.th-row { display: flex; align-items: center; gap: var(--sp-1); min-height: 80px; border-bottom: 1px solid #DDDDDD; color: var(--ink); text-decoration: none; }
html.white #view a[href].th-row { min-height: 80px; } /* 흰 화면 누름 칸 48(app.css)보다 앞 — 줄 높이 80 그대로(새 눈 검사 2026-10-19 22시) */
.th-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #DDDDDD; color: var(--ink); font-size: var(--fs-1); font-weight: 700; text-align: center; }
.th-n.th-top { background: #FFD200; color: #000000; } /* 순위 동그라미 = 방스 성당 유리의 해 노랑(마티스 판 2026-10-23 00:38) */
.th-mid2 { display: flex; flex: 1; flex-direction: column; gap: 0; min-width: 0; }
.th-rn { overflow: hidden; font-size: var(--fs-4); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
html.f2 .th-row2 .th-rn, html.f3 .th-row2 .th-rn { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.3; } /* 글씨 「크게 · 아주 크게」에서는 첫 화면 업종 이름을 두 줄로(이름이 「…」로 잘려 큰 글씨가 필요한 사람만 못 보던 것 · 2026-10-22 총정리 · 감사 A8) — 보통 글씨는 한 줄 그대로(320 그림 높이) */
.th-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); min-width: 0; color: #111111; font-size: var(--fs-1); line-height: 1.6; } /* 줄은 늘 셋 — 이름 · 며칠째 · 「꽃까지 ▬」(폭 · 글꼴 · 말이 바뀌어도 줄 높이가 같게 · 알약이 홀로 들여 쓰이지 않게 · 새 눈 검사 2026-10-19 22시) */
.th-tg { flex: none; padding: 0 var(--sp-1); border: 1px solid #111111; border-radius: 8px; color: var(--ink); font-style: normal; line-height: 1.5; text-align: center; white-space: nowrap; } /* 알약 테 왼쪽 = 이름 글 시작([10] 7 · 알약 안 글은 가운데) */
.th-tg.new { border-color: var(--up); color: var(--ink); }
.th-bar { flex: none; width: 64px; height: 8px; } /* 막대 길이는 줄마다 같게(채운 비율을 견주게 · 새 눈 검사 11) */
.th-to { display: flex; flex-basis: 100%; align-items: center; gap: var(--sp-1); min-width: 0; } /* 「꽃까지 ▬」 제 줄 — 글 시작 = 이름과 같은 자리([10] 7) */
.th-to > span { flex: none; white-space: nowrap; }
/* 관심 업종 소식(사이트 안 알림 · theme-watch.js noticeBox) — 상자 글 시작 = 테 1 + 16([10] 7) */
.th-news { margin: 0 0 var(--sp-2); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--gold); border-radius: 16px; }
.th-nh { margin: 0; color: var(--gold); font-size: var(--fs-2); font-weight: 700; line-height: 1.5; }
.th-nl { display: block; padding: var(--sp-1) 0; color: var(--ink); font-size: var(--fs-2); line-height: 1.5; text-decoration: none; }
.th-nm { margin: 0; padding: var(--sp-1) 0; color: #111111; font-size: var(--fs-1); line-height: 1.5; }
.th-hi { display: flex; align-items: center; justify-content: center; min-height: 48px; color: #111111; font-size: var(--fs-1); text-align: center; text-decoration: underline; } /* 돌이 인사(1장)로 — 가운데 한 줄 */
.th-to .th-bar { flex: 0 1 64px; min-width: 32px; width: auto; } /* 늘 64 · 아주 좁고 큰 글씨 영어일 때만 줄마다 똑같이 줄어듦(이름표가 같은 말이라 막대 길이는 줄마다 같음) */
.th-bar .th-bar0, .th-rbar .th-bar0 { fill: #DDDDDD; }
.th-bar .th-bar1, .th-rbar .th-bar1 { fill: var(--up); }
.th-dots { flex: none; }
.th-dots .th-d { fill: none; stroke: var(--up); stroke-width: 2; }
.th-dots .th-d.on { fill: var(--up); }
.th-go { flex: none; color: #111111; font-style: normal; font-size: var(--fs-3); text-align: right; } /* 오른쪽 끝 표시(글 시작 왼쪽 줄 셈 밖 · [10] 7) */
.th-more { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid #DDDDDD; color: var(--ink); font-size: var(--fs-2); text-decoration: none; }
.th-more i { font-style: normal; text-align: right; }
.th-rec { display: flex; flex-direction: column; gap: 0; margin: var(--sp-2) 0 var(--sp-1); padding: var(--sp-2); border: 1px dashed #111111; border-radius: 16px; color: #111111; font-size: var(--fs-1); line-height: 1.5; }
.th-rec span:first-child { color: var(--ink); font-weight: 700; }
.th-next { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 64px; margin: var(--sp-3) 0 var(--sp-1); padding: 0 var(--sp-2); border: 1px solid #FFFFFF; border-radius: 32px; background: #000000; color: #FFFFFF; text-decoration: none; } /* 글 시작 = 테 1 + 16 = 말풍선 · 상자와 같은 자리([10] 7) */
.th-nx { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.th-nx small { color: #C9E6D4; font-size: var(--fs-1); font-weight: 600; } /* 짙은 「다음」 단추 안 작은 글 — 밝은 판에서 대비 4.5 넘게 */
.th-nx b { overflow: hidden; font-size: var(--fs-3); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.th-next i { flex: none; font-style: normal; font-size: var(--fs-4); text-align: right; }
.th-bars { display: block; margin: var(--sp-1) 0 0; }
.th-bars .th-b0 { fill: #222222; } .th-bars .th-b1 { fill: var(--up); }
.th-home .up { color: var(--up); } .th-home .dn { color: var(--down); } .th-home .fl { color: var(--flat); }
/* 있는 쪽(관심 · 매매일지 · 보유종목 · 가짜 돈 · 진화) 맨 아래 「다음」 한 줄 — app.js flowFoot */
.th-foot { margin: var(--sp-3) var(--sp-2) var(--sp-2); }
.th-foot .th-next { margin: 0; }
.th-next.th-one { justify-content: center; padding: 0 var(--sp-2); font-size: var(--fs-3); font-weight: 800; text-align: center; }
/* 지난 한 해 다시 보기(2026-10-21 10:44 · 11:07 「단추가 아니라 자동으로 보여주게해」 — theme-home.js yearBox) — 궤도 위 움직이는 행성 + 그 아래 줄 그림 · 그림 칸 전체가 멈춤 · 이어 보기 단추 */
/* 첫 화면 업종 줄 + 한 해 줄 그림(2026-10-21 18:22 「그랴」 — 18:11 「구글과 잡스라면」: 증권사 업종 시세 · 아이폰 주식 앱 꼴 · 행성 없음) — 카드 안 위 = 줄 셋 · 아래 = 줄 그림 */
.th-lt { margin: 0; color: var(--ink); font-size: var(--fs-3); font-weight: 700; line-height: 1.4; text-wrap: balance; }
.th-lc { margin: 0; color: #111111; font-size: var(--fs-1); text-align: right; } /* 숫자 알약의 뜻(오른쪽 맞춤 — 글 시작 왼쪽 줄 셈 밖 · [10] 7) */
.th-map .th-rows { margin: 0; }
#view .th-map a.th-row.th-row2, html.white #view .th-map a[href].th-row.th-row2 { min-height: 48px; padding: 0 0 0 var(--sp-1); border-left: 4px solid transparent; border-bottom-color: #DDDDDD; } /* 48 = 누름 칸 바닥(흰 판) — 작은 휴대폰 320 × 568 에서도 줄 그림이 한 화면 안(check_white ①) */
.th-map.th-map2 { padding-top: var(--sp-1); } .th-map2 .th-yr { margin-top: 0; }
#view .th-map a.th-row.th-row2.th-now, html.white #view .th-map a[href].th-row.th-row2.th-now { border-left-color: var(--up); } /* 지금 줄 그림의 업종 — 왼쪽 테 색만(크기 그대로 · 밀림 0 · 바탕은 그대로 — 흰 판 단추 테두리 잣대) */
.th-pill { flex: none; min-width: 72px; padding: 0 var(--sp-1); border-radius: 8px; background: var(--up-bg); color: #FFFFFF; font-size: var(--fs-2); font-weight: 700; line-height: 32px; text-align: center; font-variant-numeric: tabular-nums; }
.th-pill.th-pdn { background: var(--down-bg); color: #FFFFFF; } /* 이름을 .up · .dn 과 따로(app.css 글 색 규칙이 알약 글을 바탕색으로 덮음) */
.th-yr { display: block; width: 100%; margin: var(--sp-1) 0 0; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.th-yr:disabled { cursor: default; }
.th-yrg { display: block; width: 100%; height: auto; overflow: hidden; }
.th-yrg .th-yrs { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; } /* 머리 줄의 굵은 줄 = 업종 줄 */
.th-yrg .th-yrt { fill: var(--ink); font-size: var(--fs-2); font-weight: 700; }
.th-yrg .th-yra { fill: var(--sub); font-size: var(--fs-1); }
.th-yrg .th-yrlm { fill: none; stroke: var(--mute); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
/* 첫 화면 줄 한 줄(번호 · 이름 · 행성 · ›) — 글 시작 = 번호 옆(예전 줄과 같은 자리 · [10] 7) · 행성은 오른쪽 끝 표시 쪽 */
#view a.th-row.th-row2, html.white #view a[href].th-row.th-row2 { min-height: 56px; }
/* 숫자로 자세히 보기(접는 칸) — 펼치면 진짜 싹 머리 · 주황 숫자 셋 · 점 넷 · 성적표 */
.th-hfold { margin: var(--sp-1) 0 0; border-bottom: 1px solid #DDDDDD; }
.th-hfold > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; color: var(--ink); font-size: var(--fs-2); cursor: pointer; list-style: none; }
.th-hfold > summary::-webkit-details-marker { display: none; }
.th-hfold > summary::after { content: "›"; color: #111111; font-size: var(--fs-3); transition: transform .15s; }
.th-hfold[open] > summary::after { transform: rotate(90deg); }
.th-hfold > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .th-hfold > summary::after { transition: none; } }
/* 고른 싹 회사 기록 칸(사장님 2026-10-22 22:54 「그 기록을 한 달력이 첫화면에 직관적으로 … 신빙성에대해 딱 정직하게 앞에」) — 칸 하나가 고리(#/t/pick) */
.th-pkhome { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; padding: 14px 14px 10px; border: 2px solid var(--hair); border-radius: 16px; background: #FFFFFF; color: var(--ink); text-decoration: none; }
.th-pkhh { font-size: var(--fs-3); font-weight: 700; }
.th-pqb { display: flex; flex-direction: column; gap: var(--sp-1); padding: 4px 0 var(--sp-1); } /* 막대 두 개(사장님 2026-10-26 03:20 「여기 이해가 가지도 않고 디자인도 맘에 들지 않아 잡스라면」) — 물음 하나 · 이름과 큰 숫자 한 줄 · 그 아래 같은 길이 막대 · 단위 풀이 한 줄 · 작은 네모 줄은 기록 달력 쪽에만 */
.th-pqr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-1); margin: var(--sp-1) 0 0; }
.th-pql { min-width: 0; font-size: var(--fs-2); font-weight: 700; line-height: 1.3; color: var(--ink); }
.th-pqn { flex: none; font-size: var(--fs-5); font-weight: 800; line-height: 1; color: var(--ink); }
.th-pqme .th-pqn { color: var(--up); }
.th-pqt { display: block; height: 20px; border-radius: 10px; background: #EEEEEE; overflow: hidden; }
.th-pqf { display: block; height: 100%; border-radius: 10px; background: #000000; }
.th-pqme + .th-pqt .th-pqf { background: var(--up); }
.th-pqx { margin: 0; font-size: var(--fs-1); line-height: 1.35; color: var(--ink); }
html.en .th-pqn { font-size: var(--fs-3); } /* 영어 「21 companies」는 길어 두 단계 작게 — 이름과 한 줄 */
.th-pkhgo { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: var(--fs-2); color: var(--ink); border-top: 1px solid #DDDDDD; }
.th-pkhgo i { font-style: normal; }

/* 싹 달력 큰 단추 · 「카톡 보내기」 글 단추(사장님 2026-10-23 13:33 · 2026-10-25 06:06 · 12:00 「진짜모든곳에」 · 12:24 「어」) — 1년 줄 그림 아래(그림은 320 × 568 한 화면 안 그대로) */
.th-calgo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; margin: 16px 0 8px; padding: 0 16px; border-radius: 14px; background: var(--ink); color: #FFFFFF; font-size: var(--fs-3); font-weight: 800; text-decoration: none; }
.th-calgo i { font-style: normal; }
.kk-btn.kk-txt.th-kkall, html.white .kk-btn.kk-txt.th-kkall { display: flex; width: 100%; min-height: 56px; justify-content: center; margin: 0 0 16px; border-radius: 14px; font-size: var(--fs-3); }
.th-calgo:focus-visible { outline: 3px solid var(--down); outline-offset: 2px; }
.th-gorow { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; min-width: 0; } /* 싹 달력 보기 · 카톡 보내기 한 줄(2026-10-25 진짜 사이트 사진 — 390 × 844 에서 카톡 보내기가 찾기 칸 뒤로 숨음) */
.th-gorow > .th-calgo, .th-gorow > .kk-btn.kk-txt.th-kkall, html.white .th-gorow > .kk-btn.kk-txt.th-kkall { flex: 1 1 150px; width: auto; margin: 0; }
.th-gorow > .kk-gift.th-gift, html.white .th-gorow > .kk-gift.th-gift { flex: 1 1 100%; justify-content: center; min-height: 56px; border-radius: 14px; font-size: var(--fs-3); }
/* 큰 네 칸(사장님 2026-10-25 22:52 「좋아 디자인 신경 더써서 세계 최고로 만들어봐」 · 22:54 「어 진짜 싸이트까지 바꿔」 · 고르신 판 best ① · theme-home.js zoneCells)
   두 줄 두 칸 · 칸마다 그림 동그라미 · 자리 이름 · 큰 숫자 · 「›」 — 칸 전체가 고리(48px 넘게) · 싹만 초록 꽉 찬 면(마티스 판 「자라남」) · 테는 검은 선 · 그림자 · 광택 0(check_white ④)
   글씨는 여섯 크기 안(이름 fs-4 · 숫자 fs-6) */
.th-zones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-1); margin: 0 0 var(--sp-2); }
.th-zc { position: relative; display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: var(--sp-1); row-gap: var(--sp-1); min-height: 128px; padding: var(--sp-2); box-sizing: border-box; border: 2px solid var(--hair); border-radius: 20px; background: var(--card); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.th-zc:active { background: var(--press); transform: scale(.97); } /* 큰 폰 ④ 누르면 칸이 살짝 들어감(눌린 느낌 · 0.12초 · 움직임 줄이기면 없음) */
@media (prefers-reduced-motion: no-preference) { .th-zc { transition: transform .12s ease; } }
@media (prefers-reduced-motion: reduce) { .th-zc:active { transform: none; } }
.th-zi { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--card3); } /* 큰 폰 ② 그림 동그라미 52 → 60 · 그림 38 → 46(그림만 보고도 무슨 칸인지) */
.th-zic { display: block; width: 46px; height: 46px; }
.th-zw { grid-column: 2; grid-row: 1; font-size: var(--fs-4); font-weight: 800; line-height: 1.1; }
.th-zn { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 2px; padding-right: var(--sp-2); font-size: var(--fs-6); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.th-zu { font-size: var(--fs-4); font-weight: 800; letter-spacing: 0; }
.th-zgo { position: absolute; right: 14px; bottom: 12px; font-size: var(--fs-4); font-style: normal; font-weight: 800; line-height: 1; }
.th-zc.th-zcS { background: var(--up); border-color: var(--up); color: #FFFFFF; }
.th-zc.th-zcS:active { background: #000000; }
.th-zc.th-zcS .th-zi { background: #FFFFFF; }
.th-zc.th-zcS .th-zgo { display: flex; align-items: center; justify-content: center; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; color: var(--up); } /* 큰 폰 ③ 싹 칸 「›」를 흰 동그라미 단추로 — 볼 곳 하나가 누를 곳으로도 또렷 */
@media (max-width: 359px) { /* 320 폭 — 칸 안쪽이 좁아 그림 동그라미 · 안쪽 여백을 줄임(글씨 크기는 그대로) */
  .th-zc { padding: var(--sp-1); min-height: 116px; }
  .th-zi { width: 40px; height: 40px; }
  .th-zic { width: 30px; height: 30px; }
  .th-zgo { right: 10px; bottom: 8px; }
  .th-zc.th-zcS .th-zgo { right: 8px; bottom: 8px; width: 36px; height: 36px; }
}
@media (max-width: 349px) { .th-zc { min-height: 0; row-gap: 0; } } /* 작은 폰 ① 칸 높이 116 → 104 — 둘째 줄 그림과 이름이 찾기 줄 위에 */
html.en .th-zw { font-size: var(--fs-2); } /* 영어 낱말(Sprout · Fading)은 길어 한 단계 작게 */
html.en .th-zc { row-gap: 0; } /* 영어는 「industries」 한 줄이 더 있어 칸이 17px 높음 — 그림과 숫자 사이를 붙여 큰 폰에서도 네 칸이 찾기 줄 위에 */
html.en .th-zu { flex-basis: 100%; font-size: var(--fs-1); } /* 「37」 위 · 「industries」 아래 — 숫자는 그대로 크게 · 낱말은 작게 · 네 칸 모두 같은 꼴 */