/* 돌 판 모양(사장님 2026-10-19(싱가포르) 10:21 「1번으로 하자 그래서 전체 디자인을 해봐  꽃돌이가 아니야 돌이야」 · 10:31 「이제 실제로 만들어 이기준으로 알겠지」)
   시안 = docs/design/kakao-2026-10-19/platform3(「돌에서 꺼냄」 열세 장) · 색 이름은 app.css 「html.white」 토큰(이름표 white 그대로 · 값은 먹 바탕)
   지킬 것: 노랑은 작은 표시(? · ! · 카톡 말풍선 그림)에만 · 칠한 큰 단추는 흰 바탕 먹 글 · 입체 · 그림자는 돌 그림(/media/stone/*.svg) 파일 안에만
   글씨는 var(--fs-1 ~ 6)만 · 바깥 · 안 여백과 사이는 0 · auto · var(--sp-1 ~ 3)만 · 음수 여백 없음(page_rules.mjs cssRules · [10] 6 · 8) · 누르는 것 48 × 48 넘게 */

/* ── 위 막대: 왼쪽 「진화」 · 가운데 이름 · 오른쪽 셋(말 · 글씨 · 찾기) ── */
html.white .top { height: 64px; gap: 0; background: #FFFFFF; border-bottom: 1px solid #DDDDDD; }
html.white .top .sp { display: none; }
html.white .top #jhBtn { order: -1; height: 48px; padding: 0 var(--sp-2); border: 1px solid #111111; border-radius: 24px; background: #FFFFFF; color: var(--ink); font-size: var(--fs-1); font-weight: 600; }
html.white .top #jhBtn[aria-current="page"] { border-color: var(--ink); color: var(--ink); }
html.white .top .logo { flex: 1 1 auto; justify-content: center; color: var(--ink); font-size: var(--fs-3); font-weight: 700; letter-spacing: .14em; text-indent: .14em; }
html.white .top .logo img { display: none; }
html.white .top .ibtn { background: #FFFFFF; border-top: 1px solid #111111; border-bottom: 1px solid #111111; border-radius: 0; color: var(--ink); }
html.white .top #langBtn { border-left: 1px solid #111111; border-radius: 24px 0 0 24px; }
html.white .top #findBtn { border-right: 1px solid #111111; border-radius: 0 24px 24px 0; }
/* 위 막대 금빛 선물 단추(상품권 방 #/gift · 사장님 2026-10-22 03:38 「상품권 받는곳이 사용자자 이용많이 한 곳에 있어야 해 구글과 잡스라면 어떻개 하겠어」) — 금빛 테 동그라미 하나 · 진화 단추 옆 · 글 없음 */
.top .tgift { color: var(--gold); }
.top .tgift .ic { width: 24px; height: 24px; stroke-width: 1.6; }
html.white .top .ibtn.tgift { border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); }
html.white .top .ibtn.tgift[aria-current="page"] { background: var(--gold-wash); }
@media (min-width: 360px) { .top .tgift { margin: 0 var(--sp-1); } }
/* 영어 · 좁은 폰(349px 아래) — 「Evolve」가 「진화」보다 길어 선물 단추와 함께 오른쪽으로 넘침(334 > 320) → 진화 단추 안 여백만 줄임 · 누름 높이 48 그대로 */
@media (max-width: 379px) { html.white.en .top #jhBtn { padding: 0 var(--sp-1); } } /* 2026-10-25 — 360 폭도 1px 넘침(361 > 360 · 선물 단추 옆 여백 8 이 360 부터 붙음 · 큰 검사 gift-kakao 2/11) → 379 까지 */
@media (max-width: 349px) { html.white.en .top #jhBtn { padding: 0 6px; } } /* 작은 폰 ③ 영어 「Evolve」 단추가 길어 맨 위 줄이 1px 넘치던 것 — 옆 여백 8 → 6(사장님 2026-10-26 01:33 「잘된 것 11가지 … 큰 쪽에서 7개 작은 곳에서 4개」 · 01:42 「응」) */
@media (max-width: 349px) { html.white.en .top { padding-left: 4px; } html.white.en .top #jhBtn { padding: 0 3px; } } /* 2026-10-28 큰 검사 home-new 2/11 — 받은 글꼴로 그리면 「Evolve」 77px 이라 맨 위 줄이 5px 넘침(325 > 320 · 기기 글꼴 69px 일 때만 통과하던 것) → 왼쪽 여백 8 → 4 · 단추 안 여백 6 → 3 */
@media (max-width: 349px) { html.white .top .logo { font-size: var(--fs-1); letter-spacing: .04em; text-indent: 0; width: auto; min-width: 48px; overflow: visible; justify-content: center; gap: 0; padding-left: 0; } }
@media (max-width: 429px) { html.white.en .top .logo { width: auto; overflow: visible; justify-content: center; gap: 0; padding-left: 0; letter-spacing: .04em; text-indent: 0; } }

/* ── 아래 단추 다섯: 먹 바탕 · 지금 쪽은 흰 글 · 가운데 단추도 노랑 칠 없음 ── */
html.white .tabs { background: #FFFFFF; border-top: 1px solid #DDDDDD; }
html.white .tabs a { color: #222222; }
html.white .tabs a[aria-current="page"] { color: var(--ink); font-weight: 700; }
html.white .tabs a.plus .ic, html.white .tabs a.plus svg { color: inherit; fill: none; stroke: currentColor; background: none; }
html.white .tabs a.plus { color: #222222; }
html.white .tabs a.plus[aria-current="page"] { color: var(--ink); }

/* ── 노랑 줄이기: 카톡 단추는 테 둥근 칸 + 작은 노란 말풍선 그림(칠한 큰 노랑 칸 없음) · 그림 칸 선은 가늘게 · 밑 칠은 아주 옅게 ── */
html.white .kk-btn { background: transparent; border: 1px solid var(--hair2); }
html.white svg.ln path[fill]:not([fill="none"]) { opacity: .06; }
html.white svg.ln path[fill="none"] { stroke-width: 2.5; }

/* ── 화면 큰 제목 + 돌 그림(app.js stoneArt — 첫 h1 오른쪽) ── */
html.white #view h1.st-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); font-size: var(--fs-5); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--ink); overflow-wrap: anywhere; }
html.white #view h1.st-h .st-art { flex: none; width: 96px; height: 77px; }
html.white #view h1.st-h.st-why { font-size: var(--fs-4); } /* 매매일지는 판정 글(30)이 가장 큰 글씨([5] 2) */
html.white #view h1.st-h.st-sm .st-art { width: 48px; height: 38px; }
html.white .shorts { position: relative; }
html.white .shorts > .st-abs { position: absolute; top: 24px; right: 0; width: 96px; height: 77px; pointer-events: none; }
@media (max-width: 349px) { html.white #view h1.st-h .st-art, html.white .shorts > .st-abs { width: 72px; height: 58px; } }

/* ── 첫 화면(html.white.home · app.js vHomeAll 돌 판) ── */
html.white.home #view { display: flex; flex-direction: column; min-height: calc(100vh - 128px); min-height: calc(100svh - 128px); padding: 0 var(--sp-2); }
html.white.home .s-hd { display: block; } /* 큰 제목 한 줄 · 돌 시계는 돌이 물음 아래 가운데 크게(.s-clk · 사장님 2026-10-25 22:54 「어 진짜 싸이트까지 바꿔」 · 고르신 판 best ① — 22:26 「돌시계을 중심으로 디자인 해야해」) */
html.white.home .s-h1 { margin: 0; font-size: var(--fs-5); font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--ink); }
/* 큰 제목 돌리기(home-title.js · 사장님 2026-10-21 23:55 「어 섹시하게」) — 한 줄 자리 고정(넷 다 30px 한 줄 · 2026-10-25 돌 시계를 아래로 옮기며 두 줄 → 한 줄 · 밀림 0) · 옅어지며 살짝 오르고 · 새 말은 아래에서 살짝 올라옴(옮김 · 짙기만) */
html.white.home .s-h1 { min-height: 1em; transition: opacity .5s var(--ease), transform .5s var(--ease); }
html.white.home .s-h1.tt-out { opacity: 0; transform: translateY(-6px); }
html.white.home .s-h1.tt-in { opacity: 0; transform: translateY(6px); transition: none; }
@media (prefers-reduced-motion: reduce) { html.white.home .s-h1 { transition: none; } }
html.white.home .s-clk { display: flex; justify-content: center; margin: var(--sp-1) 0; }
html.white.home .s-art { flex: none; width: 272px; height: 218px; } /* 큰 폰 ① 돌 시계 한 뼘 더 크게(240 → 272 · 네 칸 아래와 찾기 줄 사이 빈자리 65px 를 씀 · 사장님 2026-10-26 01:33 「잘된 것 11가지 찾아서 더 잘하도록 하라 · 큰 쪽에서 7개 작은 곳에서 4개」 · 01:42 「응」) */
@media (max-width: 359px) { html.white.home .s-art { width: 200px; height: 160px; } }
/* 돌 시계(사장님 2026-10-21 21:21 「시계있는거 현재신ㅇ로 해놓아」 · stone-clock.js) — 돌 그림 위에 바늘 그림을 겹침 · 칸 크기는 위 .s-art 그대로(밀림 0) */
.s-boot { display: block; align-self: center; width: 272px; height: 218px; max-width: 100%; margin: 86px auto 0; } /* 여는 동안 돌 시계(index.html) — 첫 화면 돌 시계와 같은 그림 · 같은 크기 · 가운데(여는 동안은 html.white 가 아직 없어 --sp 값이 없음 → 숫자로) */
.s-boot img { display: block; width: 100%; height: 100%; }
@media (max-width: 359px) { .s-boot { width: 200px; height: 160px; } } /* 첫 화면 돌 시계와 같은 크기 · 같은 자리(제목 · 물음 아래) — 다 그려져도 시계는 제자리 */
@media (max-width: 349px) { .s-boot { width: 160px; height: 128px; margin-top: 78px; } } /* 작은 폰은 시계 위 여백 0 — 여는 화면도 같은 자리(150 → 142) */
.s-clock { position: relative; display: block; }
.s-clock img, .s-clock .s-hands { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.s-clock .s-hands { pointer-events: none; }

/* 돌이 물음 한 줄 — 말풍선 + 보내기 */
html.white.home .w-say { display: flex; align-items: center; gap: var(--sp-1); margin: 0; }
html.white.home .w-say p { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; margin: 0; padding: var(--sp-1) var(--sp-2); border: 1px solid #000000; border-radius: 22px 22px 22px 6px; background: #FFFFFF; font-size: var(--fs-2); font-weight: 700; line-height: 1.3; } /* 큰 폰 ⑥ 돌이 물음 말풍선을 검은 선 · 굵은 글씨로 — 시계 바로 위 「어느 계절일까?」가 더 또렷하게(사장님 2026-10-26 01:33 「잘된 것 11가지 …」 · 01:42 「응」) */
html.white.home .w-say .s-who { flex: none; padding: 0 var(--sp-1) 0 0; border-right: 1px solid #000000; color: #000000; font-weight: 500; font-size: var(--fs-1); }
html.white.home .w-say .w-kk { margin: 0 0 0 auto; width: 48px; height: 48px; border-radius: 24px; border: 1px solid #000000; background: #000000; color: #FFFFFF; } /* 큰 폰 ⑦ 카톡 보내기를 검은 동그라미 흰 그림으로 — 한 번에 눌리는 단추가 더 눈에 띄게(사장님 2026-10-26 01:33 「잘된 것 11가지 찾아서 더 잘하도록 하라 · 큰 쪽에서 7개 작은 곳에서 4개」 · 01:42 「응」) */
html.white.home .w-say .w-kk:active { background: var(--hair); }
html.white.home .w-say .w-kk .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 읽는 곳 셋 — 왼쪽 번호 테 · 사이 가는 줄 */
html.white.home ol.s-story { position: relative; margin: var(--sp-1) 0 0; padding: 0; list-style: none; }
html.white.home ol.s-story::before { content: ''; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; background: #EEEEEE; }
html.white.home .s-ch { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--sp-1); align-items: start; }
html.white.home .s-ch > :not(.s-no) { grid-column: 2; }
html.white.home .s-ch + .s-ch { margin: var(--sp-1) 0 0; padding-top: var(--sp-1); border-top: 1px solid #DDDDDD; }
html.white.home .s-no { grid-column: 1; grid-row: 1 / span 9; position: relative; z-index: 1; width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; border: 1px solid #111111; border-radius: 50%; background: #FFFFFF; color: var(--ink); font-size: var(--fs-1); font-weight: 600; line-height: 1; }
html.white.home .s-lbl { display: flex; align-items: baseline; gap: var(--sp-1); min-height: 27px; margin: 0; }
html.white.home .s-lbl .t { font-size: var(--fs-3); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }

/* ① 본질 — 테 없는 글 · 오른쪽 둥근 펼침 단추 */
html.white.home section.w-ess { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; outline: 0; }
html.white.home .w-ess .ess-d > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-1); min-height: 48px; padding: 0; font-size: var(--fs-2); font-weight: 500; line-height: 1.5; letter-spacing: -.015em; }
html.white.home .w-ess .ess-d > summary::after { content: '⌄'; flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid #111111; border-radius: 24px; color: var(--ink); line-height: 1; }
html.white.home .w-ess .ess-d[open] > summary::after { content: '⌃'; }
html.white.home .w-ess .ess-l, html.white.home .w-ess .ess-l.q { padding: 0; color: #111111; font-size: var(--fs-1); }
html.white.home .w-ess .ess-l.q { color: var(--gold); }
html.white.home .w-ess .ess-d > .ess-l:last-child { padding-bottom: 0; }

/* ② 지난 기록 — 오늘 장 한 줄 · 오른 곳 · 내린 곳 큰 숫자 · 사이 가는 막대 */
html.white.home a.w-today { margin: 0; padding: 0; min-height: 48px; color: #111111; font-size: var(--fs-1); }
html.white.home a.w-today .hm-bd { color: #111111; }
html.white.home section.w-news { margin: 0; padding: 0; border: 0; }
html.white.home .w-news .w-facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sp-1); margin: 0; padding: 0; border: 0; }
html.white.home .w-news .w-fl { display: flex; margin: 0; }
html.white.home .w-news .w-f { display: flex; align-items: baseline; gap: var(--sp-1); }
html.white.home .w-news .w-lb { min-width: 52px; color: #111111; font-size: var(--fs-1); font-weight: 500; }
html.white.home .w-news .w-f b { font-size: var(--fs-5); font-weight: 300; line-height: 1.2; letter-spacing: -.03em; }
html.white.home .w-news .w-why { min-height: 48px; padding: 0 var(--sp-2); border: 1px solid #111111; border-radius: 24px; background: transparent; color: var(--ink); font-size: var(--fs-1); font-weight: 500; white-space: nowrap; }
html.white.home .w-news .w-qs { flex-basis: 100%; margin: 0 0 var(--sp-1); padding: 0; list-style: none; color: #111111; font-size: var(--fs-1); }
/* 물음 셋 — 누르면 바로 밑에 받은 자료로 센 지난 사실(app.js whyQ · 사장님 2026-10-19 13:27 「해결해」) */
html.white.home .w-news .w-qs li { border-top: 1px solid #DDDDDD; }
html.white.home .w-news button.w-q { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); width: 100%; min-height: 48px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-1); font-weight: 600; text-align: left; cursor: pointer; }
html.white.home .w-news button.w-q i { font-style: normal; color: #111111; transition: transform .15s; }
html.white.home .w-news button.w-q[aria-expanded="true"] i { transform: rotate(90deg); }
html.white.home .w-news .w-ans { margin: 0; padding: 0 0 var(--sp-1); }
html.white.home .w-news .w-ans p { margin: 0; color: #111111; font-size: var(--fs-1); line-height: 1.5; }
html.white.home .w-news .w-ans p.w-ah { margin: var(--sp-1) 0 0; color: var(--ink); font-weight: 700; }
html.white.home #view:has(.w-qs:not([hidden])) .s-thumb { position: static; }
html.white.home .w-news .w-ans a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink); font-size: var(--fs-1); text-decoration: underline; text-underline-offset: 3px; }
html.white.home .s-split { display: flex; align-items: center; gap: var(--sp-1); height: 8px; margin: 0; }
html.white.home .s-split i { display: block; flex: 1 1 0; height: 2px; }
html.white.home .s-split .gu { background: var(--up-bg); color: #FFFFFF; }
html.white.home .s-split .gd { background: var(--down-bg); color: #FFFFFF; }

/* ③ 한 달 뒤 — 점선 말풍선 · 멈춤 · 약속 수 · 이 기기에만 */
html.white.home a.s-ghost, html.white.home a.w-month { justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 48px; margin: 0; padding: 0 var(--sp-2); border: 1px dashed #111111; border-radius: 6px 22px 22px 22px; background: transparent; color: var(--ink); font-size: var(--fs-2); font-weight: 500; text-decoration: none; }
html.white.home a.w-month { border-style: solid; border-color: var(--gold); }
html.white.home .s-mem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); margin: 0; color: #111111; font-size: var(--fs-1); }
html.white.home .s-mem .w-cnt { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); min-width: 0; margin: 0; border-top: 0; }
html.white.home .s-mem .w-n { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; margin: 0; padding: 0; color: #111111; font-size: var(--fs-1); }
html.white.home .s-mem .w-n b { color: var(--ink); font-size: var(--fs-3); font-weight: 700; }

/* 진화 한 줄 */
html.white.home a.s-evo { display: flex; align-items: center; gap: var(--sp-1); min-height: 48px; margin: 0; color: #111111; font-size: var(--fs-1); text-decoration: none; }
html.white.home a.s-evo b { color: var(--ink); font-size: var(--fs-3); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
html.white.home a.s-evo .when { flex: 1; }
html.white.home a.s-evo i { font-style: normal; font-size: var(--fs-4); color: #111111; }

/* 엄지 자리 — 찾기 칸(흰 「시작」 하나) · 아래 단추 바로 위에 붙음(찾은 줄은 붙은 채로 위로 펼침 · 「왜 그럴까?」 물음이 열리면 풀림) */
html.white.home .s-thumb { position: sticky; bottom: calc(var(--tabs) + env(safe-area-inset-bottom)); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; margin: auto 0 0; padding: var(--sp-1) 0 0; border-top: 1px solid #DDDDDD; background: #FFFFFF; }
html.white.home .s-thumb:has(details.w-all[open]) { position: static; }
/* 찾은 줄은 엄지 칸 위로 펼침 · 칸은 아래에 붙은 채로(2026-10-21 04:3x 진짜 사이트 흰 판 검사 「첫 질문까지 누름 2번 안 — 1번 눌러도 1 / 11 이 안 보임」 두 번) —
   예전엔 찾은 줄이 뜨면 칸이 풀려(static) 제자리로 감 · 엄지 칸 한 줄 뒤 제자리가 쪽 가운데라 치던 칸과 찾은 줄이 화면 밖으로 사라지고 · 글꼴이 늦게 오면 누르는 사이 위 글이 줄어 찾은 줄이 움직임
   → 붙은 채로 위로 펼치면 화면에 묶여 위 글이 바뀌어도 안 움직임 · 높이는 app.js quickReturn 이 칸 위 남은 자리에 맞춤 */
html.white.home .s-thumb .w-hits { top: auto; bottom: calc(100% + 4px); }
html.white.home .s-thumb form.w-find { flex: 1 1 100%; min-width: 0; height: 56px; align-items: center; margin: 0; padding: 0 var(--sp-1) 0 0; border: 1px solid #111111; border-radius: 28px; background: #FFFFFF; }
html.white.home .s-thumb .w-find .w-in { flex: 1 1 0; width: 0; height: 52px; padding: 0 var(--sp-2); border-radius: 28px 0 0 28px; background: transparent; color: var(--ink); font-size: var(--fs-2); }
html.white.home .s-thumb .w-find .w-in::placeholder { color: #111111; }
html.white.home .s-thumb .w-find .w-go { width: auto; min-width: 72px; height: 48px; padding: 0 var(--sp-2); border-radius: 24px; background: #000000; color: #FFFFFF; font-size: var(--fs-1); font-weight: 700; }
html.white.home .s-thumb .w-hits { background: #FFFFFF; border-color: #111111; }
html.white.home .s-thumb nav.w-go4 { flex: 1 1 auto; min-width: 0; margin: 0; border: 0; }
html.white.home .s-thumb .w-go4 a { min-width: 0; min-height: 48px; color: #111111; font-size: var(--fs-1); }
html.white.home .s-thumb .w-go4 .ic { display: none; }
html.white.home .s-thumb details.w-all { flex: none; min-width: 0; max-width: 100%; margin: 0; border: 0; }
html.white.home .s-thumb nav.w-go4 { flex-wrap: wrap; }
html.white.home .s-thumb details.w-all[open] { flex: 1 1 100%; }
html.white.home .s-thumb details.w-all > summary { min-height: 48px; display: flex; align-items: center; padding: 0 var(--sp-1); color: #111111; font-size: var(--fs-1); }
/* 엄지 칸 한 줄 · 다시 나오는 칸(사장님 2026-10-21 02:11 · 02:29 「어」) — 아래로 읽으면 아래로 미끄러져 숨고(s-away) 위로 밀면 0.32초에 다시 · 화면을 밀지 않음(transform) */
html.white.home .s-thumb { transition: transform .32s ease; will-change: transform; }
html.white.home .s-thumb.s-away { transform: translateY(calc(100% + var(--tabs) + 16px + env(safe-area-inset-bottom))); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html.white.home .s-thumb { transition: none; } }
/* 바로 가기 넷 · 전부 보기 — 붙지 않고 화면 안 제자리(엄지 칸에서 내려옴 · 모양은 예전 엄지 칸 그대로) */
html.white.home .s-short { display: flex; flex-wrap: wrap; align-items: center; margin: var(--sp-2) 0 0; padding: var(--sp-1) 0 0; border-top: 1px solid #DDDDDD; }
html.white.home .s-short nav.w-go4 { flex: 1 1 auto; flex-wrap: wrap; min-width: 0; margin: 0; border: 0; }
html.white.home .s-short .w-go4 a { min-width: 0; min-height: 48px; color: #111111; font-size: var(--fs-1); }
html.white.home .s-short .w-go4 .ic { display: none; }
html.white.home .s-short details.w-all { flex: none; min-width: 0; max-width: 100%; margin: 0; border: 0; }
html.white.home .s-short details.w-all[open] { flex: 1 1 100%; }
html.white.home .s-short details.w-all > summary { min-height: 48px; display: flex; align-items: center; padding: 0 var(--sp-1); color: #111111; font-size: var(--fs-1); }

/* 좁은 폭(320) — 그림을 줄여 본질 · 찾기 칸이 한 화면에 들게 */
@media (max-width: 349px) {
  html.white.home .s-h1 { font-size: var(--fs-5); }
  html.white.home .s-art { width: 160px; height: 128px; } /* 작은 폰 ① 둘째 줄(잠잠 · 시듦) 그림과 이름까지 찾기 줄 위에 보이게 — 시계 180 → 160 · 아래 여백 0(theme-home.css 칸도 줄임) */
  html.white.home .s-clk { margin: 0; }
  html.white.home .s-thumb .w-find .w-in { padding: 0 var(--sp-1) 0 var(--sp-2); font-size: var(--fs-1); } /* 작은 폰 ② 찾기 칸 안내 「친구야, 왜 사? 회사 이름」이 끝까지 보이게(19 → 17px · 오른쪽 안쪽 여백 16 → 8) */
  html.en.white.home .w-say p { padding: var(--sp-1); font-size: var(--fs-1); } /* 작은 폰 ④ 영어 돌이 물음도 한 줄(두 줄이면 시계와 첫 줄이 밀려 찾기 줄에 가림) */
  html.white.home .w-news .w-f b { font-size: var(--fs-4); }
}

/* ── 커피 쿠폰 칸(매매일지 쪽 맨 아래 · p-admin.js couponCard · 사장님 2026-10-19 13:54 · 13:58) — 막대 하나 · 노랑은 채운 막대에만 ── */
html.white .cp-card { margin: var(--sp-2) var(--sp-2) var(--sp-3); padding: var(--sp-2); border: 1px solid var(--hair2); border-radius: 16px; }
html.white .cp-card .cp-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--sp-1); font-size: var(--fs-3); font-weight: 700; }
html.white .cp-card .cp-h b { flex: 1 1 auto; font-size: var(--fs-4); text-align: right; }
html.white .cp-card .cp-bar { height: 8px; margin: 0 0 var(--sp-1); border-radius: 4px; background: #EEEEEE; overflow: hidden; }
html.white .cp-card .cp-fill { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--gold); }
html.white .cp-card .cp-t { margin: 0 0 var(--sp-1); color: var(--sub); font-size: var(--fs-1); }
html.white .cp-card .cp-q { color: var(--sub); }
html.white .cp-card .cp-code { margin: 0 0 var(--sp-1); color: var(--ink); font-size: var(--fs-5); font-weight: 700; letter-spacing: .06em; }
html.white .cp-card .cp-go { min-height: 48px; padding: 0 var(--sp-2); border: 0; border-radius: 24px; background: #000000; color: #FFFFFF; font: inherit; font-size: var(--fs-1); font-weight: 700; cursor: pointer; }