/* ==========================================================================
   bk-app.css — 휴대폰(767px 이하)에서 '앱을 쓰는 느낌'을 만드는 틀과 부품.
   PC 화면에는 아무 영향이 없다(모든 규칙이 767px 이하 안에 있다).

   html 에 붙는 표시(base.html <head> 의 스크립트가 붙인다)
     .bk-app            로그인한 설계사·파트너·관리자 → 앱 틀 사용
     .bk-app-agent / .bk-app-partner / .bk-app-admin   아래 탭 묶음 선택
     .bk-app-home       홈(로고가 보이는 첫 화면)
     .bk-app-tabroot    탭의 첫 화면(큰 제목)
     .bk-app-inner      그 밖의 화면(뒤로 가기 + 제목)
     .bk-standalone     바탕화면 아이콘으로 실행
   ========================================================================== */

.app-bar, .app-tabs { display: none; }

/* 확인 창(bkConfirm) — PC에서는 가운데, 휴대폰에서는 아래에서 올라온다 */
.app-confirm { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.app-confirm-dim { position: absolute; inset: 0; background: rgba(23, 33, 29, .5); }
.app-confirm-box { position: relative; width: 100%; max-width: 26rem; background: #fff; border-radius: 22px; padding: 1.6rem 1.4rem 1.25rem; }
.app-confirm-title { font-size: 1.25rem; line-height: 1.4; font-weight: 800; color: #17211D; word-break: keep-all; }
.app-confirm-text { margin-top: .5rem; font-size: 1.0625rem; line-height: 1.55; color: #5E6B65; word-break: keep-all; white-space: pre-line; }
.app-confirm-btns { margin-top: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.app-confirm-btns button { min-height: 54px; border-radius: 14px; font-size: 1.0625rem; font-weight: 700; }
.app-confirm-no { background: #F3F7F5; color: #17211D; }
.app-confirm-yes { background: #0E7A55; color: #fff; }
.app-confirm-yes.is-danger { background: #C0392B; }

@media (max-width: 767px) {

    /* ---------- 화면이 바뀔 때 부드럽게 ---------- */
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
    html.bk-app .app-bar { view-transition-name: app-bar; }
    html.bk-app .app-tabs { view-transition-name: app-tabs; }

    /* ---------- 누르는 느낌 ---------- */
    a, button, [role="button"], label, summary { -webkit-tap-highlight-color: transparent; }
    button:not(:disabled):active, a.bk-btn:active, .app-row:active, .app-press:active { opacity: .72; }
    .bk-btn { transition: transform .08s ease, opacity .08s ease; }
    .bk-btn:not(:disabled):active { transform: scale(.98); }

    /* ---------- 앱 틀: 사이트 머리·푸터 대신 앱 바·탭 바 ---------- */
    html.bk-app nav[aria-label="주 메뉴"],
    html.bk-app body > footer { display: none; }
    html.bk-app body { background: #F3F7F5; overscroll-behavior-x: none; }
    html.bk-app main#main-content { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom) + 1.25rem); }

    /* 위쪽 앱 바 */
    html.bk-app .app-bar {
        display: flex; align-items: center; gap: .25rem;
        position: sticky; top: 0; z-index: 50;
        height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) .5rem 0;
        background: #fff; border-bottom: 1px solid #E9EFEC;
        -webkit-user-select: none; user-select: none;
    }
    .app-bar-logo { display: none; align-items: center; gap: .45rem; padding-left: .5rem; color: #17211D; }
    .app-bar-logo svg { width: 30px; height: 30px; color: #0E7A55; }
    .app-bar-logo b { font-size: 1.375rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
    .app-bar-back { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; color: #17211D; flex: none; }
    .app-bar-back svg { width: 26px; height: 26px; }
    .app-bar-title { flex: 1; min-width: 0; font-size: 1.1875rem; font-weight: 700; color: #17211D; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .app-bar-bell { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #17211D; flex: none; margin-left: auto; }
    .app-bar-bell svg { width: 25px; height: 25px; }
    .app-bar-bell i { position: absolute; top: 4px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #C0392B; color: #fff; font-size: 11.5px; font-weight: 700; font-style: normal; display: flex; align-items: center; justify-content: center; }

    html.bk-app-home .app-bar-logo { display: flex; }
    html.bk-app-home .app-bar-title { display: none; }
    html.bk-app-tabroot .app-bar-title { padding-left: .6rem; font-size: 1.4375rem; font-weight: 800; letter-spacing: -.035em; }
    html.bk-app-inner .app-bar-back { display: flex; }

    /* 화면 안에 따로 있던 머리 줄은 앱 바와 겹치므로 숨긴다 */
    html.bk-app .app-hide-header { display: none !important; }

    /* 아래 탭 바 */
    html.bk-app-agent .app-tabs--agent,
    html.bk-app-partner .app-tabs--partner,
    html.bk-app-admin .app-tabs--admin {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        height: calc(4.5rem + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        background: #fff; border-top: 1px solid #E9EFEC;
        -webkit-user-select: none; user-select: none;
    }
    .app-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #5E6B65; font-size: 15px; font-weight: 600; letter-spacing: -.02em; min-width: 0; }
    .app-tab-ico { position: relative; width: 58px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 25px; transition: background-color .15s ease; }
    .app-tab-ico svg { width: 25px; height: 25px; }
    .app-tab.is-on { color: #0A5C40; font-weight: 800; }
    .app-tab.is-on .app-tab-ico { background: #DDF1E8; color: #0E7A55; }
    .app-tab:active .app-tab-ico { background: #EDF3F0; }
    .app-tab-dot { position: absolute; top: -3px; right: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #FFC83D; color: #17211D; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }

    /* ---------- 아래에서 올라오는 창 ---------- */
    .app-sheet { position: fixed; inset: 0; z-index: 60; }
    .app-sheet-dim { position: absolute; inset: 0; background: rgba(23, 33, 29, .5); }
    .app-sheet-body { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; display: flex; flex-direction: column; background: #F3F7F5; border-radius: 22px 22px 0 0; overflow: hidden; }
    .app-sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .75rem 1.25rem; background: #F3F7F5; }
    .app-sheet-head b { font-size: 1.375rem; font-weight: 800; letter-spacing: -.035em; color: #17211D; }
    .app-sheet-close { min-height: 44px; padding: 0 1rem; border-radius: 22px; background: #fff; border: 1.5px solid #DDE5E1; font-size: 1rem; font-weight: 700; color: #17211D; }
    .app-sheet-scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 1rem calc(1.25rem + env(safe-area-inset-bottom)); }

    /* ---------- 줄 목록 ---------- */
    .app-list { background: #fff; border-radius: 18px; overflow: hidden; }
    .app-list + .app-list, .app-list-label + .app-list { margin-top: 0; }
    .app-list-label { margin: 1.25rem .5rem .5rem; font-size: .9375rem; font-weight: 700; color: #5E6B65; }
    .app-row { display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 58px; padding: .7rem 1rem; text-align: left; font-size: 1.0625rem; font-weight: 600; color: #17211D; letter-spacing: -.02em; background: #fff; }
    .app-row + .app-row { border-top: 1px solid #EEF2F0; }
    .app-row-ico { flex: none; width: 26px; display: flex; justify-content: center; font-size: 24px; color: #0E7A55; }
    .app-row-main { flex: 1; min-width: 0; }
    .app-row-sub { display: block; margin-top: 1px; font-size: .9375rem; font-weight: 500; color: #5E6B65; }
    .app-row::after { content: ''; flex: none; width: 9px; height: 9px; margin-right: 3px; border-right: 2px solid #B4C0BA; border-top: 2px solid #B4C0BA; transform: rotate(45deg); }
    .app-row.is-plain::after { display: none; }
    .app-row.is-danger { color: #C0392B; justify-content: center; }
    .app-me { display: flex; align-items: center; gap: .9rem; padding: 1rem; background: #fff; border-radius: 18px; }
    .app-me-pic { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #DDF1E8; color: #0A5C40; font-size: 1.375rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
    .app-me-txt b { display: block; font-size: 1.1875rem; font-weight: 800; color: #17211D; letter-spacing: -.03em; }
    .app-me-txt span { display: block; margin-top: 1px; font-size: .9375rem; color: #5E6B65; }
    .app-legal { margin: 1.25rem .5rem 0; font-size: .8125rem; line-height: 1.6; color: #7C8983; }
    .app-legal a { text-decoration: underline; text-underline-offset: 3px; margin-right: .9rem; font-size: .9375rem; color: #5E6B65; }

    /* ---------- 카드·선택 막대·아래 고정 버튼 줄 ---------- */
    .app-card { background: #fff; border-radius: 18px; padding: 1.1rem; }
    .app-seg { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .25rem 1rem; margin: 0 -1rem; scroll-snap-type: x proximity; }
    .app-seg::-webkit-scrollbar { display: none; }
    .app-seg > * { flex: none; min-height: 44px; padding: 0 1.05rem; border-radius: 22px; background: #fff; border: 1.5px solid #DDE5E1; font-size: 1rem; font-weight: 700; color: #5E6B65; white-space: nowrap; scroll-snap-align: start; display: inline-flex; align-items: center; gap: .35rem; }
    .app-seg > .is-on { background: #17211D; border-color: #17211D; color: #fff; }
    .app-fixed-cta { position: fixed; left: 0; right: 0; z-index: 39; bottom: 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #E9EFEC; display: flex; gap: .6rem; }
    html.bk-app .app-fixed-cta { bottom: calc(4.5rem + env(safe-area-inset-bottom)); padding-bottom: .75rem; }
    .app-fixed-cta > * { flex: 1; min-height: 54px; }
    .app-fixed-cta-space { height: 5.25rem; }

    /* ---------- 상담 목록 (dashboard/consultations/list.html) ---------- */
    html.bk-app .cl-head { display: none; }
    .cl-subnav { background: #E6EDEA !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; padding: 4px; gap: 2px; }
    .cl-subnav a { border: 0 !important; border-radius: 11px; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1rem !important; font-weight: 700 !important; color: #5E6B65 !important; background: transparent !important; }
    .cl-subnav a.is-on { background: #fff !important; color: #17211D !important; box-shadow: 0 1px 3px rgba(23, 33, 29, .12); }
    .cl-search { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 1rem !important; }
    .cl-search .cl-scope { display: none; }
    .cl-search input[type="text"] { min-height: 52px; border-radius: 14px !important; border: 1.5px solid #DDE5E1 !important; background: #fff; font-size: 1.0625rem !important; padding-left: 2.75rem !important; }
    .cl-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem .25rem !important; }
    .cl-chips::-webkit-scrollbar { display: none; }
    .cl-chips button { flex: none; min-height: 44px; padding: 0 1.05rem !important; font-size: 1rem !important; font-weight: 700 !important; background: #fff; border: 1.5px solid #DDE5E1; color: #5E6B65; }
    .cl-chips button.bg-primary-600 { background: #17211D !important; border-color: #17211D; color: #fff; }
    .cl-more { border: 0 !important; padding-top: 0 !important; }
    .cl-more > button { width: auto !important; margin-left: auto; padding: 0 .5rem !important; font-size: .9375rem !important; }
    .cl-card { border: 0 !important; border-radius: 18px !important; box-shadow: none !important; }
    .cl-card > div:first-child { padding: 1rem 1.1rem .9rem !important; }
    .cl-card .text-base { font-size: 1.25rem !important; font-weight: 800 !important; letter-spacing: -.03em; }
    .cl-card .rounded-full.ml-auto { font-size: .875rem !important; padding: .3rem .7rem !important; font-weight: 700 !important; }
    .cl-card .text-gray-400 { color: #5E6B65 !important; font-size: .9375rem !important; }
    .cl-actions { border-top: 0 !important; display: flex !important; gap: .5rem; padding: 0 .9rem .9rem; }
    .cl-actions > * { border: 0 !important; }
    .cl-actions > a { flex: 1; min-height: 50px !important; border-radius: 13px; background: #E3F3EC; color: #0A5C40 !important; }
    .cl-actions > a + a { background: #F3F7F5; color: #17211D !important; }
    .cl-actions > a span { font-size: 1.0625rem !important; font-weight: 700 !important; }
    .cl-actions > a svg { width: 20px; height: 20px; }
    .cl-actions > div { flex: 1.15; padding: 0 !important; }
    .cl-actions select { min-height: 50px; border-radius: 13px !important; border: 1.5px solid #DDE5E1 !important; font-size: 1rem !important; font-weight: 600; box-shadow: none !important; padding-left: .8rem !important; }

    /* ---------- 광고 목록 (dashboard/landing-pages.html) ---------- */
    .lpm-flow { display: flex; flex-direction: column; }
    .lpm-flow > .lpm-make-last { order: 9; margin-top: 1.25rem; margin-bottom: 0 !important; }

    /* ---------- 비로그인 화면: 얇은 머리, 로그인·가입은 로고만 ---------- */
    .bk-nav-row { height: 56px !important; }
    .bk-nav-row > a svg { width: 30px !important; height: 30px !important; }
    .bk-nav-row > a span { font-size: 1.375rem !important; }
    html.bk-auth body > footer, html.bk-auth .bk-nav-menu { display: none; }
    html.bk-auth:not(.bk-app) body { background: #fff; }
    html.bk-auth nav[aria-label="주 메뉴"] { border-bottom-color: transparent; }
    html.bk-auth main#main-content { padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important; }

    /* 화면 안의 '아래에 붙는 줄'(저장 버튼 등)이 탭 바에 가려지지 않게 */
    html.bk-app main .sticky.bottom-0 { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
    html.bk-app main .fixed .sticky.bottom-0 { bottom: 0; }
    .app-fixed-cta { margin-top: 0 !important; padding-top: .75rem !important; }

    /* ---------- 불러오는 중: 뼈대 ---------- */
    .app-skel { display: block; border-radius: 10px; background: linear-gradient(90deg, #E8EEEB 0%, #F3F7F5 45%, #E8EEEB 90%); background-size: 220% 100%; animation: app-skel 1.3s ease-in-out infinite; min-height: 1rem; }
    .app-skel-card { height: 96px; border-radius: 18px; }
    .app-skel + .app-skel { margin-top: .75rem; }
    @keyframes app-skel { from { background-position: 120% 0; } to { background-position: -100% 0; } }

    /* ---------- 알림 한 줄(토스트): 탭 바 위 가운데 ---------- */
    .bk-toast-wrap { top: auto !important; right: 1rem !important; left: 1rem !important; bottom: calc(1.25rem + env(safe-area-inset-bottom)); max-width: none !important; width: auto !important; display: flex; flex-direction: column; align-items: center; }
    html.bk-app .bk-toast-wrap { bottom: calc(4.5rem + env(safe-area-inset-bottom) + .9rem); }
    .bk-toast-wrap > .bk-toast { background: #17211D !important; border: 0 !important; border-radius: 16px !important; box-shadow: 0 6px 20px rgba(23, 33, 29, .22) !important; padding: .85rem 1.1rem !important; max-width: 100%; transform: none !important; }
    .bk-toast-wrap > .bk-toast p { color: #fff !important; font-size: 1rem !important; font-weight: 600; line-height: 1.45; }
    .bk-toast-wrap > .bk-toast button { display: none; }

    /* ---------- 확인 창: 아래에서 ---------- */
    .app-confirm { align-items: flex-end; padding: 0; }
    .app-confirm-box { max-width: none; border-radius: 22px 22px 0 0; padding: 1.6rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); animation: app-up .2s ease-out; }
    @keyframes app-up { from { transform: translateY(100%); } to { transform: none; } }

    /* ---------- 당겨서 새로 고침 표시(바탕화면 실행·아이폰) ---------- */
    .app-ptr { position: fixed; top: calc(64px + env(safe-area-inset-top)); left: 50%; z-index: 55; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(23, 33, 29, .18); display: flex; align-items: center; justify-content: center; color: #0E7A55; font-size: 22px; opacity: 0; pointer-events: none; }
    .app-ptr.is-go svg { animation: app-spin .7s linear infinite; }
    @keyframes app-spin { to { transform: rotate(360deg); } }

    @media (prefers-reduced-motion: reduce) {
        @view-transition { navigation: none; }
        .app-skel, .app-confirm-box, .app-ptr.is-go svg { animation: none; }
        .bk-btn:not(:disabled):active { transform: none; }
    }
}