/* Shared, compact navigation. Functional categories remain on the home screen. */
.workspace-ui .workspace{margin-left:0!important}
.simple-topbar .site-brand{display:block;flex:0 0 auto;white-space:nowrap;font-size:19px;font-weight:800;letter-spacing:-.6px;color:#141c2b;line-height:1;margin-right:16px}
.simple-topbar .site-brand span{color:#386af4}
.simple-topbar .public-top-nav{display:flex;flex-direction:row;align-items:center;gap:28px;margin:0 auto 0 0;padding:0;min-width:0}
.simple-topbar .public-top-nav a{display:block;white-space:nowrap;color:#707783;font-size:14px;font-weight:600;line-height:1.5;padding:12px 0}
.simple-topbar .public-top-nav a:first-child{color:#252a33;font-weight:750}
.simple-topbar .public-top-nav a:hover{color:#596ae5}
.simple-topbar .public-account{display:block;white-space:nowrap;font-size:13px;color:#596272;border:1px solid #e7e9ef;border-radius:20px;padding:7px 15px}
.simple-topbar{gap:20px}
@media(max-width:650px){
 /* 좁은 화면에서는 로고·계정을 윗줄에 두고 메뉴는 아랫줄에서 가로로 넘긴다. */
 .simple-topbar{flex-wrap:wrap;height:auto!important;gap:0;padding:9px 16px!important}
 .simple-topbar .site-brand{font-size:16px;margin-right:auto}
 .simple-topbar .top-right,.simple-topbar .public-account,.simple-topbar .account-chip{order:2}
 .simple-topbar .public-top-nav{order:3;width:100%;margin:2px 0 0;gap:15px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .simple-topbar .public-top-nav::-webkit-scrollbar{display:none}
 .simple-topbar .public-top-nav a{font-size:12.5px;padding:5px 0}
 .simple-topbar .public-account{font-size:11px;padding:6px 10px}
}
@media(max-width:360px){.simple-topbar .site-brand{font-size:14px}.simple-topbar .public-top-nav{gap:12px}.simple-topbar .public-top-nav a{font-size:11px}}

/* 홈은 화면 단위로 넘어간다. 첫 화면에는 '다른 보호자들은…' 카드가 보이지 않고,
   한 번 내리면 카드 챕터의 머리에 딱 걸린다.
   --kvet-fold 는 상단바 + main 안쪽 여백(모바일은 하단 탭바까지) 합계.
   --kvet-top 은 ask-start 위쪽에 쌓인 높이 — 이만큼 scroll-margin 을 줘야 맨 위(0)가 걸림점이 된다. */
:root{--kvet-fold:102px;--kvet-top:102px}
@media(max-width:650px){:root{--kvet-fold:176px;--kvet-top:109px}}

.workspace-ui.home-view:not(.conversation-started) .ask-start,
.workspace-ui.home-view:not(.conversation-started) .home-cards,
.workspace-ui.home-view:not(.conversation-started) .home-breeds,
.workspace-ui.home-view:not(.conversation-started) .home-share{
 min-height:calc(100vh - var(--kvet-fold));
 min-height:calc(100dvh - var(--kvet-fold))}
.workspace-ui.home-view:not(.conversation-started) .home-cards,
.workspace-ui.home-view:not(.conversation-started) .home-breeds,
.workspace-ui.home-view:not(.conversation-started) .home-share{
 display:flex;flex-direction:column;justify-content:center}
/* 첫 화면이 비어 보이지 않게, 남는 높이를 도움말 줄 위쪽으로 몰아준다.
   ask-start 를 세로 flex 로 두되 자식 폭을 100% 로 고정해야 질문창이 오그라들지 않는다. */
.workspace-ui.home-view:not(.conversation-started) .ask-start{display:flex;flex-direction:column}
.workspace-ui.home-view:not(.conversation-started) .ask-start>*{width:100%}
.workspace-ui.home-view:not(.conversation-started) #suggestions{margin-top:auto;padding-top:clamp(28px,6vh,72px)}

/* 걸림(스냅)은 데스크톱에서만 건다. 모바일 브라우저는 주소창이 접히면서 화면 높이가
   실시간으로 바뀌는데, 거기에 mandatory 스냅을 걸면 스크롤이 튄다.
   :has() 를 못 쓰는 브라우저에서는 스냅만 빠지고 화면 구성은 그대로다. */
@media(min-width:651px) and (pointer:fine){
 html:has(body.workspace-ui.home-view:not(.conversation-started)){scroll-snap-type:y mandatory}
 .workspace-ui.home-view:not(.conversation-started) .ask-start{scroll-margin-top:var(--kvet-top)}
 .workspace-ui.home-view:not(.conversation-started) .home-cards,
 .workspace-ui.home-view:not(.conversation-started) .home-breeds,
 .workspace-ui.home-view:not(.conversation-started) .home-share{scroll-margin-top:34px}
 .workspace-ui.home-view:not(.conversation-started) .ask-start,
 .workspace-ui.home-view:not(.conversation-started) .home-cards,
 .workspace-ui.home-view:not(.conversation-started) .home-breeds,
 .workspace-ui.home-view:not(.conversation-started) .home-share,
 .workspace-ui.home-view:not(.conversation-started) .footer{scroll-snap-align:start;scroll-snap-stop:always}
}

/* 서브페이지에서는 ask-start 가 숨겨지므로 카드도 같이 감춘다(예전엔 그 안에 있었다). */
.workspace-ui:not(.home-view) .home-cards,
.workspace-ui:not(.home-view) .home-breeds,
.workspace-ui:not(.home-view) .home-share{display:none}