@charset "utf-8";

/* layout.css - default.css 이후 로드되는 공통 레이아웃 스타일 */

body{display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh;}
html{font-size: 0.52vw;}



.theme-branch { display:flex; justify-content:center; align-items:center;
    box-sizing:border-box; gap: 18rem;
     }
.theme-branch form { margin:0; }
.theme-branch .bar{width: 0.3rem; height: 100%; background: #d8a94c;}
.theme-branch .theme-branch-link,
.theme-branch button { display:flex; align-items: flex-start; justify-content:center; flex-direction: column;
    font-size:2.54rem; padding: 2rem; font-weight:500; border: none; background: transparent; transition: transform 0.3s ease;
    font-family: var(--font-gmarket); color:#d8a94c; cursor:pointer; text-decoration:none;}
.theme-branch .theme-branch-link span,
.theme-branch button span { display:block; font-size:4.07rem; font-weight:700; line-height: 1;}
.theme-branch .theme-branch-link:hover,
.theme-branch button:hover{transform: translateY(-1rem); transition: transform 0.3s ease;}


/* ========================================================================
   모바일 반응형 (768px 이하) — 분기 선택 화면
   - vw 단위로 뷰포트 폭에 비례해 스케일 (768px에서 데스크톱 크기와 자연 연결)
   ======================================================================== */

@media (max-width: 768px) {
    body{padding: 5vw; overflow-x: hidden;}
    /* 좌우 2단 → 세로 스택 */
    .theme-branch{flex-direction: column; gap: 7vw; width: 100%;}
    /* 세로 구분바 → 가로 구분선 */
    .theme-branch .bar{width: 25vw; height: 3px;}
    .theme-branch .theme-branch-link,
    .theme-branch button{align-items: center; text-align: center; font-size: 5.3vw; padding: 3vw 5vw; min-height: 44px;}
    .theme-branch .theme-branch-link span,
    .theme-branch button span{font-size: 8.5vw;}
    .theme-branch .theme-branch-link:hover,
    .theme-branch button:hover{transform: none;}
}