/* 첫 화면의 세 카드: 좁은 화면은 세로, 넓은 화면은 좌우 배치. */
.home-first-screen{min-height:var(--home-viewport-height,100svh);max-height:none;height:auto;grid-template-rows:42px minmax(max-content,1fr) max-content minmax(max-content,.85fr) 20px;gap:clamp(8px,1.3svh,14px)}
.home-first-screen>.home-card{min-height:min-content}
.home-signup .qmail-simple-card{margin-top:10px}
.home-signup .qmail-phone-label{display:none}
.home-signup{gap:4px}
.home-first-screen .home-masthead{grid-area:auto}
/* 화면이 커져도 입력 카드 하단에 여백을 몰아주지 않는다. */
@media(max-width:679px){
 .home-first-screen{padding-top:5px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .home-founder{justify-content:center;gap:10px}
 .home-welcome{align-content:center}
}
@media(max-width:679px) and (max-height:740px){
 .home-first-screen{grid-template-rows:32px minmax(max-content,1fr) max-content minmax(max-content,.85fr) 18px;gap:6px}
 .home-card{padding:8px 13px}
 .home-welcome{row-gap:4px;grid-template-columns:minmax(0,1fr) 54px;padding-block:8px}
 .home-welcome .welcome-portrait{width:54px;height:54px}
 .welcome-copy h1{font-size:20px;margin-top:3px}
 .home-welcome .home-search p{margin-top:3px;line-height:1.3}
 .home-domain-summary{min-height:28px;padding-block:3px}
 .home-card-person{font-size:19px;line-height:1.3}
 .home-signup .qmail-simple-card{margin-top:6px}
 .home-signup .qmail-main-actions{margin-top:8px;gap:8px}
 .home-signup .qmail-main-actions>button{min-height:48px}
 .season-signup .qmail-simple-card .qmail-phone-field{min-height:48px}
 .season-signup .qmail-simple-card #qmailPhoneInput{height:44px}
 .qmail-name-teaser{margin-top:8px;padding-top:2px}
 .home-founder{gap:5px}
 .home-founder h2{font-size:20px;line-height:1.3}
 .home-founder .founder-journey{display:none}
 .home-founder .home-button{min-height:44px;padding-block:8px}
}
/* 폴드 내부 화면과 태블릿: 소개 왼쪽, 가입과 파운더 오른쪽. */
@media(min-width:680px){
 .welcome-home{width:min(1120px,100%)}
 .home-first-screen{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:48px minmax(max-content,1fr) minmax(max-content,1fr) 24px;grid-template-areas:'mast mast' 'welcome signup' 'welcome founder' 'explore explore';gap:12px}
 .home-first-screen>.home-masthead{grid-area:mast}
 .home-first-screen>.home-welcome{grid-area:welcome}
 .home-first-screen>.home-signup{grid-area:signup;justify-content:center}
 .home-first-screen>.home-founder{grid-area:founder;justify-content:center;gap:16px}
 .home-first-screen>.home-explore-link{grid-area:explore}
 .home-card{padding:18px}
 .home-welcome{grid-template-columns:minmax(0,1fr);text-align:center;row-gap:20px}
 .welcome-portrait{grid-row:1;width:clamp(100px,18vw,180px);height:clamp(100px,18vw,180px)}
 .welcome-copy h1{font-size:clamp(23px,3vw,32px)}
 .home-masthead{padding-left:18px}
 .home-card-person{font-size:21px}
 .home-founder h2{font-size:25px}
 .founder-journey{gap:4px}.founder-journey span{font-size:10px;padding:7px 3px}
 body[data-home-theme] .q-account-bar{right:max(18px,calc((100vw - 1120px)/2))}
}
/* 가로로 충분한 공간이 있는 화면은 세 카드를 같은 행에 둔다. */
/* 하단 서비스는 넓은 화면에서 전체를 펼쳐 너비에 맞는 열로 표시한다. */
@media(min-width:680px){
 .services,.home-explore .services{width:min(1120px,100%);max-width:1120px}
 .services .service-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));overflow:visible;scroll-snap-type:none;gap:12px}
 .services .service-card{width:100%;height:auto;aspect-ratio:1;min-width:0}
}
@media(min-width:1000px) and (min-aspect-ratio:3/2){
 .home-first-screen{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:44px minmax(max-content,1fr) 24px;grid-template-areas:'mast mast mast' 'welcome signup founder' 'explore explore explore'}
 .home-card{padding:16px}
 .home-welcome{row-gap:16px}
 .welcome-portrait{width:100px;height:100px}
 .home-card-person{font-size:20px}
 .qmail-name-teaser p,.qmail-name-teaser button{font-size:12px}
 .home-founder h2{font-size:24px}
 .founder-journey{flex-wrap:wrap}.founder-journey span{font-size:10px}
}
/* 가로 휴대폰: 콘텐츠를 줄여 숨기지 않고 필요한 세로 스크롤을 허용한다. */
.services .service-card{animation:service-card-drift var(--card-motion-duration,6s) ease-in-out var(--card-motion-delay,0s) infinite}
.services .service-card[data-motion="1"]{animation-name:service-card-sway}
.services .service-card[data-motion="2"]{animation-name:service-card-breathe}
.services .service-track:hover .service-card,.services .service-track:focus-within .service-card,.services .service-track.is-motion-paused .service-card{animation-play-state:paused}
.services .service-card:hover,.services .service-card:focus-visible,.services .service-card.is-rotating-out{animation:none}
.services .service-card.is-rotating-in{animation:service-card-rotate-in .26s ease-out both}
@keyframes service-card-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes service-card-sway{0%,100%{transform:rotate(-.35deg)}50%{transform:rotate(.35deg) translateY(-2px)}}
@keyframes service-card-breathe{0%,100%{transform:scale(1)}50%{transform:scale(.985) translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.services .service-card[data-motion],.services .service-card.is-rotating-in{animation:none;transition:none}.services .service-card:hover{transform:none}}
@media(min-width:680px) and (max-height:540px){
 .home-first-screen{height:auto;min-height:var(--home-viewport-height,100svh);grid-template-rows:36px auto auto 20px}
}
@media(min-width:1000px) and (min-aspect-ratio:3/2) and (max-height:540px){
 .home-first-screen{grid-template-rows:36px minmax(max-content,1fr) 20px}
}