@charset "utf-8";
/* ==========================================================================
   카앤쿡 웹앱 layout.css
   - .app-wrap  : inner 1220px, 좌측 웹앱 화면(768) + 우측 앱 다운로드 (space-between)
   - .app-frame : 웹앱 화면 (헤더 · 본문 · 탭바)
   - 1280 이하 : 우측 영역 숨김, 웹앱 화면 가운데 정렬
   ========================================================================== */

/* 래퍼 */
.app-wrap {display: flex; justify-content: space-between; align-items: flex-start; width: min(var(--app-inner), 100% - 60px); margin-inline: auto;}

/* 웹앱 화면 */
.app-frame {position: relative; display: flex; flex-direction: column; flex: none; width: 100%; max-width: var(--frame-w); min-height: 100vh; min-height: 100dvh; background-color: var(--color-bg1);}
.app-main {flex: 1 0 auto;}

/* 헤더 */
.app-header {position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: var(--size-44) minmax(0, 1fr) var(--size-44); align-items: center; height: var(--header-h); padding-inline: 10px; background-color: var(--color-bg1);}
.app-header .app-logo {justify-self: center; display: flex; align-items: center; min-height: var(--size-44);}
.app-header .app-logo img {width: 120px; height: auto;}
.app-header .app-noti-btn {position: relative;}
.app-header .app-noti-btn.has-new::after {content: ''; position: absolute; top: 11px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-red);}
/* 서브 헤더 */
.app-header.sub {border-bottom: 1px solid var(--color-border);}
.app-header .app-header-tit {text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* 탭바 */
.app-tabbar {position: sticky; bottom: 0; z-index: 100; border-top: 1px solid var(--color-border); background-color: var(--color-bg1); padding-bottom: env(safe-area-inset-bottom);}
.app-tabbar .app-tabbar-list {display: grid; grid-template-columns: repeat(5, 1fr);}
.app-tabbar .app-tabbar-link {display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 2px; height: var(--tabbar-h); color: var(--color-gray6);}
.app-tabbar .app-tabbar-link .ico {color: var(--color-gray5);}
.app-tabbar .app-tabbar-link[aria-current="page"] {font-weight: 600; color: var(--color-static1);}
.app-tabbar .app-tabbar-link[aria-current="page"] .ico {color: var(--color-static1);}
.app-tabbar .app-tabbar-link[aria-current="page"] .ico-fill {fill: currentColor;}

/* 우측 앱 다운로드 */
.app-side {position: sticky; top: 0; flex: none; display: flex; align-items: center; height: 100vh; height: 100dvh;}
.app-side .app-side-brand {display: flex; align-items: center; justify-content: flex-end; column-gap: 12px;}
.app-side .app-side-txt {text-align: right;}
.app-side .app-side-logo img {width: 222px; height: auto;}
.app-side .app-side-slogan {margin-top: 10px; color: var(--color-gray9);}
.app-side .app-side-icon {display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 8px; background-color: var(--color-static1); font-weight: 800; color: var(--color-white);}
.app-side .store-btn-list {display: flex; column-gap: 10px; margin-top: 52px;}
.app-side .store-btn {display: flex; align-items: center; justify-content: center; column-gap: 6px; width: 200px; height: var(--size-56); border-radius: 8px; background-color: var(--color-white); box-shadow: 0 2px 10px rgb(var(--rgb-black) / 0.08); color: var(--color-black); transition: box-shadow 0.2s, transform 0.2s;}
.app-side .store-btn-logo {flex: none; width: 30px; height: 30px;}
.app-side .store-btn-txt {display: flex; flex-direction: column;}
.app-side .store-btn-txt .caption-s,
.app-side .store-btn-txt .h1 {line-height: 1; font-weight: 700;}

/* 전체메뉴 */
.app-menu .app-menu-panel {position: absolute; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; width: 84%; max-width: 360px; padding-bottom: env(safe-area-inset-bottom); background-color: var(--color-white); transform: translateX(-100%); transition: transform 0.3s;}
.app-menu.active .app-menu-panel {transform: translateX(0);}
.app-menu .app-menu-head {display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 10px 0 var(--gutter); border-bottom: 1px solid var(--color-border);}
.app-menu .app-menu-list {flex: 1 1 auto; padding: var(--space-8) var(--gutter); overflow-y: auto;}
.app-menu .app-menu-link {display: flex; align-items: center; justify-content: space-between; min-height: 60px; border-bottom: 1px solid var(--color-border);}
.app-menu .app-menu-link .ico {color: var(--color-gray6);}
.app-menu .app-menu-link[aria-current="page"] {color: var(--color-static1);}
.app-menu .app-menu-sub {display: flex; column-gap: var(--space-16); padding: var(--space-12) var(--gutter);}

/* 호버 */
@media (hover: hover) {
    .app-tabbar .app-tabbar-link:hover {color: var(--color-gray9);}
    .app-side .store-btn:hover {box-shadow: 0 6px 16px rgb(var(--rgb-black) / 0.12); transform: translateY(-2px);}
    .app-menu .app-menu-link:hover {color: var(--color-static1);}
}

/* 반응형 */
@media screen and (max-width: 1280px) {
    .app-wrap {justify-content: center; width: 100%;}
    .app-side {display: none;}
}