/* Claude landing audit fixes 2026-10-30. Items numbered as in the audit report. */

/* ⑤ Section titles: security and FAQ use the same large role as the other section titles (48/20/13 scale). */
@layer daytoyear-type {
  #security-title,#security-title *,#faq-title,#faq-title * { font-size:var(--dt-type-large)!important; }
}
#security-title,#faq-title{font-weight:600;line-height:1.5;letter-spacing:-.025em;margin-top:10px}
#security .security-kicker{color:#3d5a38;font-weight:600}

/* ④ Security cards: example content starts on one line; title and description sit close. */
#security .bento>.card .vis{align-content:start}
@media (min-width:1100px){ #security .bento>.card h3{min-height:0} }

/* ⑥ Mobile How it works: one column so titles are not split into 4–5 lines. */
@media (max-width:640px){ #s6-mobile{grid-template-columns:1fr!important} }

/* ⑦ Start cards: the second card gets the same icon-row figure as the broker card. */
#start .reading-source-figure .broker-line-logo{background:#fff}
#start .reading-source-figure .broker-line-logo.yt{background:#ff0000;display:grid;place-items:center}
#start .reading-source-figure .broker-line-logo.yt svg{width:58%;height:auto}

/* ⑧ FAQ: first six questions visible, the rest behind one button. */
#faq details.faq-more-hidden{display:none}
#faq .faq-more{margin-top:18px;border:1px solid #cad4c3;background:transparent;border-radius:999px;padding:9px 16px;color:#3d5a38;font:inherit;cursor:pointer}
#faq .faq-more:focus-visible{outline:2px solid #3d5a38;outline-offset:2px}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #faq .faq-more{color:#a9c496;border-color:#2e4a44} }
:root[data-theme="dark"] #faq .faq-more{color:#a9c496;border-color:#2e4a44}

/* ⑦ follow-up: white icons get a visible tile edge like the broker logos. (Reader-card full-row layout was tried and reverted: its inner copy uses display:contents.) */
#start .reading-source-figure .broker-line-logo{outline:1px solid #dfe3dc;outline-offset:-1px}

/* ⑤ dark: kicker keeps contrast on the dark ground. */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #security .security-kicker{color:#a9c496} }
:root[data-theme="dark"] #security .security-kicker{color:#a9c496}

/* ⑥ How it works 내 말풍선(파란색): 글 길이에 맞춰 줄어들고 최대 폭만 둠 — 히어로 데모·실제 iMessage와 같은 규칙 (2026-10-30 사용자 승인) */
#s6-phone .bubble.me{width:fit-content!important;max-width:calc(100% - 44px)!important;margin-left:auto!important}

/* ⑦ How it works 양옆 카드: 내용을 위에서 시작해 같은 줄의 왼쪽·오른쪽 카드 글 시작선을 맞춤 (09 Haney 같은 줄 정렬, 2026-10-30 사용자 승인) */
#s6-left .s6-scene,#s6-right .s6-scene{justify-content:flex-start!important;align-content:start!important}

/* ⑧ How it works 겹치는 제목 (E안, 2026-10-30 대표님 승인): 양옆 카드가 보이는 데스크톱 폭(801px~)에서만 휴대폰 위 "n / 6 · 장면 이름"과 제목을 숨김. 휴대폰 화면(800px 이하)은 카드가 멀리 있어 그대로 둠 */
@media (min-width:801px){ #s6-center .s6-copy{display:none!important} }

/* ⑨ H1 How it works 휴대폰 상태 표시줄 빼기 (데모 가치와 무관한 요소는 아예 뺌) */
#s6-phone .s6-statusbar{display:none!important}

/* ⑩ 읽을 자료 추천 칸 (2026-10-30 17:1x): 문구 후 2 + Substack(뉴스레터) 아이콘 + 두 칸 로고 줄을 카드 아래 기준으로 맞춤 */
.broker-line-logo.substack{background:#FF6719;display:grid;place-items:center}
.broker-line-logo.substack svg{width:54%;height:auto}
.answer-card:has(#broker-logos),.answer-card:has(.reading-source-figure){display:flex!important;flex-direction:column!important}
.answer-card:has(#broker-logos)>#broker-logos,.answer-card:has(.reading-source-figure)>.reading-source-figure{margin-top:auto!important}
/* 18:2x 수정: 다른 규칙(흰 배경)에 덮여 Substack 타일이 빈 흰 칸으로 보이던 것 → 주황 배경 강제 */
html body .reading-source-figure .broker-line-logo.substack{background:#FF6719!important;border-color:#FF6719!important}