/* ==========================================================================
   main.css – 보배드림 홈 (New UI)
   Design Tokens from Figma:
     --c-text:      #1A1C1F / #1A1C20
     --c-text-sub:  #2B2F37
     --c-text-spec: #323437
     --c-gray:      #868B94
     --c-gray-light:#B0B3B9
     --c-border:    #F3F3F3
     --c-bg:        #F3F4F5 / #F7F8F9
     --c-blue:      #3B7FC9
     --c-blue-bg:   #E1F0FF
     --c-blue-dark: #1B498C
     --c-green-bg:  #EDFAF6
     --c-green:     #075445
     --c-pill-dark: #2A3038 / #2B2F37
   ========================================================================== */

:root {
    /* ── Legacy tokens (유지, 신규 사용 금지) ── */
    --c-text: #1A1C1F;
    --c-text2: #1A1C20;
    --c-text-sub: #2B2F37;
    --c-text-spec: #323437;
    --c-gray: #868B94;
    --c-gray-light: #B0B3B9;
    --c-border: #F3F3F3;
    --c-bg: #F3F4F5;
    --c-bg-light: #F7F8F9;
    --c-blue: #3B7FC9;
    --c-blue-link: #2A94FF;
    --c-blue-bg: #E1F0FF;
    --c-blue-dark: #1B498C;
    --c-green-bg: #EDFAF6;
    --c-green: #075445;
    --c-pill-dark: #2A3038;
    --c-white: #FFFFFF;

    /* ── Color tokens (Figma 스타일가이드) ── */
    --color-primary: #1B498C;
    --color-secondary: #2C66E6;
    --color-accent: #2A94FF;
    --color-red: #E53935;
    --color-green: #075445;
    --color-blue-bg: #E1F0FF;
    --color-green-bg: #EDFAF6;

    /* ── Gray scale ── */
    --gray-0: #FFFFFF;
    --gray-5: #F9F9F9;
    --gray-10: #E0E0E0;
    --gray-20: #C0C0C0;
    --gray-30: #767676;
    --gray-40: #505050;
    --gray-50: #101010;

    /* ── Spacing ── */
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-side: 20px;

    /* ── Border radius ── */
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-pill: 100px;

    /* ── Layout ── */
    --header-h: 72px;
    --bottom-h: 64px;
    --side-pad: 20px;
    --max-w: 412px;
}

/* ── 공통 및 레이아웃 ── */
html, body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
button, input, select, textarea { font-family: inherit; }
.icon-bell { display: inline-block; width: 22px; height: 22px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7059 13.7895V14.6316C11.7059 16.0268 10.5208 17.1579 9.05882 17.1579C7.59689 17.1579 6.41176 16.0268 6.41176 14.6316V13.7896M11.7059 13.7895L6.41176 13.7896M11.7059 13.7895H15.2353C15.7226 13.7895 16.1176 13.4125 16.1176 12.9474V12.4539C16.1176 12.2306 16.0246 12.0165 15.8591 11.8586L15.4085 11.4285C15.2976 11.3226 15.2353 11.1789 15.2353 11.0292V7.89474C15.2353 4.6433 12.2853 2 9.05882 2C5.64765 2 2.88235 4.63917 2.88235 7.89472V11.0294C2.88235 11.1791 2.82005 11.3222 2.70916 11.4281L2.2585 11.8588C2.09303 12.0168 2 12.2306 2 12.454V12.9472C2 13.4123 2.39505 13.7896 2.88235 13.7896L6.41176 13.7896' stroke='%234D4D4D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-bell-on { display: inline-block; width: 22px; height: 22px; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7059 13.7895V14.6316C11.7059 16.0268 10.5208 17.1579 9.05882 17.1579C7.59689 17.1579 6.41176 16.0268 6.41176 14.6316V13.7896M11.7059 13.7895L6.41176 13.7896M11.7059 13.7895H15.2353C15.7226 13.7895 16.1176 13.4125 16.1176 12.9474V12.4539C16.1176 12.2306 16.0246 12.0165 15.8591 11.8586L15.4085 11.4285C15.2976 11.3226 15.2353 11.1789 15.2353 11.0292V7.89474C15.2353 4.6433 12.2853 2 9.05882 2C5.64765 2 2.88235 4.63917 2.88235 7.89472V11.0294C2.88235 11.1791 2.82005 11.3222 2.70916 11.4281L2.2585 11.8588C2.09303 12.0168 2 12.2306 2 12.454V12.9472C2 13.4123 2.39505 13.7896 2.88235 13.7896L6.41176 13.7896' stroke='%234D4D4D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='4' r='4' fill='%23FF2A2D'/%3E%3C/svg%3E"); }
.icon-updown { width: 16px; height: 16px; background-image: url('/assets/images/icons/ic_updown.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; display: inline-block; }
.icon-search { width: 24px; height: 24px; background-image: url('/assets/images/icons/ic_search.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; display: inline-block; }
.icon-arrow-right { width: 16px; height: 16px; background-image: url('/assets/images/icons/ic-arrow-right.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; display: inline-block; }
.icon-subscribe { width: 20px; height: 20px; background-image: url('/assets/images/icons/ic-subscribe.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; display: inline-block; }
.icon-edit { display: inline-block; width: 12px; height: 12px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.81707 1.59672L6.97519 2.43859L9.56082 5.02422L10.4027 4.18234C10.6577 3.92922 10.8002 3.58422 10.8002 3.22422C10.8002 2.86422 10.6577 2.51922 10.4027 2.26609L9.73332 1.59672C9.48019 1.34172 9.13519 1.19922 8.77519 1.19922C8.41519 1.19922 8.07019 1.34172 7.81707 1.59672ZM6.33957 3.07422L2.30457 7.10734C2.10394 7.30797 1.95769 7.55922 1.88082 7.83297L1.21707 10.2292C1.17394 10.3848 1.21707 10.5536 1.33332 10.668C1.44957 10.7823 1.61644 10.8273 1.77207 10.7842L4.16832 10.1186C4.44207 10.0417 4.69144 9.89734 4.89394 9.69484L8.92519 5.65984L6.33957 3.07422Z' fill='black'/%3E%3C/svg%3E"); }
.icon-verified { display: inline-block; width: 19px; height: 19px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.875 7.91652L8.7083 11.0832L7.12496 9.49985M10.4865 2.73821L11.453 3.56194C11.6966 3.76946 11.9989 3.89493 12.3179 3.92038L13.5838 4.02127C14.3281 4.08066 14.9192 4.67146 14.9786 5.41573L15.0793 6.68185C15.1047 7.00079 15.2306 7.30359 15.4382 7.54711L16.2615 8.51344C16.7458 9.08172 16.7459 9.91763 16.2616 10.4859L15.4382 11.4524C15.2307 11.6959 15.105 11.9988 15.0795 12.3178L14.9782 13.5837C14.9188 14.3279 14.3286 14.9191 13.5843 14.9785L12.318 15.0795C11.999 15.105 11.6964 15.2301 11.4528 15.4377L10.4865 16.2614C9.91818 16.7457 9.08175 16.7458 8.51347 16.2615L7.54708 15.4377C7.30356 15.2302 7.00091 15.1048 6.68197 15.0794L5.41561 14.9785C4.67134 14.9191 4.08108 14.3281 4.02169 13.5838L3.92041 12.3178C3.89496 11.9989 3.76921 11.6962 3.56169 11.4527L2.73832 10.486C2.25404 9.91768 2.25382 9.08202 2.7381 8.51374L3.5622 7.54697C3.76973 7.30345 3.89427 7.00079 3.91972 6.68186L4.02099 5.41588C4.08039 4.67161 4.67235 4.08058 5.41662 4.02119L6.68158 3.9203C7.00052 3.89485 7.30332 3.76949 7.54684 3.56196L8.51355 2.73821C9.08183 2.25393 9.91818 2.25393 10.4865 2.73821Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.main-content { display: flex; flex-direction: column; gap: 30px; _padding-bottom: calc(var(--bottom-h) + 40px); }
.section-header { display: flex; align-items: center; justify-content: space-between; padding-right: 10px; }
.section-header--padded { padding-left: var(--side-pad); }
.section-header__title { font-size: 17px; font-weight: 700; color: var(--c-text-sub); margin: 0; display: flex; align-items: baseline; gap: 4px; }
.beta-badge { font-family: 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; font-style: italic; color: var(--c-blue); }
.section-header__arrow { display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.section-header__arrow svg { display: block; }
.dot { color: var(--c-gray); margin: 0 1px; }
.form-group { margin-bottom: var(--space-md); }
.form-group__label { display: block; font-size: 14px; font-weight: 600; color: var(--gray-40); margin-bottom: 6px; }
.form-group__error { font-size: 12px; color: var(--color-red); margin-top: 4px; }

/* ── 헤더 ── */
.header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 12.5px var(--side-pad) 12.5px; background: var(--gray-0); max-width: var(--max-w); margin: 0 auto; }
.header__left { display: flex; align-items: center; text-decoration: none; }
.header__symbol img { display: block; height: auto; }
.header__right { display: flex; align-items: center; gap: 10px; }
.header__btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.header__btn img { display: block; object-fit: contain; width: 24px; height: 24px; }

/* ── 필 메뉴 ── */
.pill-menu-wrap { position: sticky; top: 52px; z-index: 99; background: var(--c-white); padding: 10px 0 20px var(--side-pad); }
.pill-menu { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-right: var(--side-pad); cursor: grab; }
.pill-menu::-webkit-scrollbar { display: none; }
.pill-menu.is-grabbing { cursor: grabbing; user-select: none; }
.pill-menu__item { flex-shrink: 0; padding: 11px 13px; border-radius: 25px; border: none; background: var(--c-bg); font-size: 14px; font-weight: 700; color: var(--c-text2); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; user-select: none; transition: background .2s ease, color .2s ease, transform .1s ease; }
.pill-menu__item:active { transform: scale(0.96); }
.pill-menu__item.is-active { background: var(--c-pill-dark); color: var(--c-white); }
.pill-menu__item--arrow { display: flex; align-items: center; gap: 6px; }
.pill-menu__item--arrow svg { flex-shrink: 0; }

/* ── 피드 섹션 ── */
.feed-section { display: flex; flex-direction: column; gap: 15px; padding: 0 var(--side-pad); }
.feed-item { display: flex; flex-direction: column; gap: 4px; padding-bottom: 15px; border-bottom: 1px solid var(--c-border); }
.feed-item__title-row { display: flex; align-items: center; gap: 5px; }
.feed-badge { flex-shrink: 0; padding: 2px 4px; border-radius: 50px; font-size: 11px; font-weight: 700; line-height: 1.3; }
.feed-badge--issue { background: var(--c-blue-bg); color: var(--c-blue); }
.feed-badge--event { background: var(--c-green-bg); color: var(--c-green); }
.feed-rank { flex-shrink: 0; padding: 0 3px; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 700; font-style: italic; color: var(--c-blue); min-width: 14px; text-align: center; }
.feed-item__title { font-size: 15px; font-weight: 600; color: var(--c-text2); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.feed-item__comments { flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--c-blue); }
.feed-item__meta { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--c-gray); }

/* ── 숏폼 섹션 ── */
.shortform-section { display: flex; flex-direction: column; gap: 20px; padding-left: var(--side-pad); }
.shortform-scroll { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-right: var(--side-pad); cursor: grab; }
.shortform-scroll::-webkit-scrollbar { display: none; }
.shortform-scroll.is-grabbing { cursor: grabbing; user-select: none; }
.shortform-card { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; width: 148px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.shortform-card__thumb { position: relative; width: 148px; height: 200px; border-radius: 12px; overflow: hidden; background: linear-gradient(127deg, #fff 1%, #ddeeff 99%); }
.shortform-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.shortform-card:hover .shortform-card__img { transform: scale(1.08); }
.shortform-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; opacity: 0.9; }
.shortform-card__title { font-size: 13px; font-weight: 600; color: var(--c-text-sub); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 중고차 섹션 ── */
.car-section { display: flex; flex-direction: column; gap: 20px; padding-left: var(--side-pad); }
.car-tabs-wrap { overflow: visible; }
.car-tabs { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-right: var(--side-pad); cursor: grab; }
.car-tabs::-webkit-scrollbar { display: none; }
.car-tabs.is-grabbing { cursor: grabbing; user-select: none; }
.car-tab { flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding: 11px 13px; border-radius: 25px; border: 1px solid var(--c-bg); background: var(--c-white); font-size: 14px; font-weight: 600; color: var(--c-text2); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s, border-color .15s; }
.car-tab.is-active { background: var(--c-text-sub); color: var(--c-white); border-color: var(--c-text-sub); }
.car-tab.is-active svg { display: inline-block; }
.car-tab svg { display: none; }
.car-list { display: flex; flex-direction: column; gap: 15px; padding-right: var(--side-pad); }
.car-item { display: flex; gap: 11px; align-items: flex-start; padding-bottom: 15px; border-bottom: 1px solid var(--c-border); }
.car-item__thumb { flex-shrink: 0; width: 100px; height: 100px; border-radius: 8px; overflow: hidden; background: #eee; }
.car-item__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.car-item:hover .car-item__img { transform: scale(1.08); }
.car-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.car-item__name { font-size: 16px; font-weight: 600; color: var(--c-text2); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-item__price-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.car-item__price { font-size: 16px; font-weight: 600; color: var(--c-text2); }
.car-item__price-row span { font-size: 14px; font-weight: 500; color: var(--c-text-spec); }
.car-item__tags { display: flex; gap: 5px; flex-wrap: wrap; }
.car-tag { padding: 3px 6px; border-radius: 50px; background: var(--c-blue-bg); font-size: 11px; font-weight: 700; color: var(--c-blue); white-space: nowrap; }
.car-item__meta { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--c-gray); }
.car-item__more { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 16px; padding: 4px 0 0; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ── 트렌딩 섹션 ── */
.trending-section { display: flex; flex-direction: column; gap: 20px; padding: 0 var(--side-pad); }
.trending-boards { display: flex; flex-direction: column; gap: 10px; }
.trending-board { background: var(--c-bg-light); border-radius: 16px; overflow: hidden; }
.trending-board__header { display: flex; align-items: center; gap: 5px; width: 100%; padding: 15px; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.trending-board__emoji { font-size: 16px; flex-shrink: 0; }
.trending-board__name { flex: 1; font-size: 16px; font-weight: 700; color: var(--c-text2); text-align: left; }
.trending-board__chevron { flex-shrink: 0; transition: transform .25s ease; }
.trending-board.is-expanded .trending-board__chevron { transform: rotate(180deg); }
.trending-board__sub { display: none; padding: 0 15px 6px; font-size: 12px; font-weight: 500; color: var(--c-gray); gap: 3px; }
.trending-board.is-expanded .trending-board__sub { display: flex; }
.trending-board__list { display: none; flex-direction: column; padding: 0 0 5px; }
.trending-board.is-expanded .trending-board__list { display: flex; }
.trending-post { display: flex; align-items: center; gap: 5px; padding: 10px 15px; text-decoration: none; border-bottom: 1px solid var(--c-border); -webkit-tap-highlight-color: transparent; }
.trending-post--last { border-bottom: none; }
.trending-post__rank { font-size: 15px; font-weight: 700; color: var(--c-blue); min-width: 20px; text-align: center; flex-shrink: 0; }
.trending-post__title { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: var(--c-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trending-post__comments { flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--c-blue-link); }

/* ── 사이드 메뉴 ── */
.drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; background: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; z-index: 201; width: 280px; max-width: 80vw; height: 100%; background: var(--c-white); transform: translateX(100%); transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), visibility .3s; display: flex; flex-direction: column; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08); visibility: hidden; }
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--c-border); }
.drawer__title { font-size: 17px; font-weight: 700; color: var(--c-text); }
.drawer__close { display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.drawer__close svg { display: block; }
.drawer__nav { display: flex; flex-direction: column; padding: 12px 0; flex: 1; overflow-y: auto; }
.drawer__item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 15px; font-weight: 600; color: var(--c-text); text-decoration: none; border: none; background: none; width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease; }
.drawer__item:active { background: var(--c-bg); }
.drawer__item--danger { color: #E53935; }
.drawer__item--danger svg { stroke: #E53935; }
.drawer__divider { height: 1px; background: var(--c-border); margin: 8px 20px; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 200; opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.drawer-overlay.is-active { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; z-index: 201; width: 280px; height: 100%; background: var(--gray-0); transform: translateX(100%); transition: transform 0.3s; display: flex; flex-direction: column; }
.drawer.is-active { transform: translateX(0); }
.drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gray-10); }
.drawer__title { font-size: 17px; font-weight: 700; color: var(--gray-50); }
.drawer__close { background: none; border: none; padding: 0; cursor: pointer; }
.drawer__close svg { width: 24px; height: 24px; stroke: var(--gray-50); stroke-width: 1.8; stroke-linecap: round; }
.drawer__nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.drawer__item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 15px; font-weight: 600; color: var(--gray-50); text-decoration: none; background: none; border: none; width: 100%; text-align: left; cursor: pointer; }
.drawer__item svg { width: 20px; height: 20px; fill: none; stroke: var(--gray-50); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drawer__item--danger { color: var(--color-red); }
.drawer__item--danger svg { stroke: var(--color-red); }
.drawer__divider { height: 1px; background: var(--gray-10); margin: 8px 20px; }

/* ── 하단 네비게이션 ── */
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max-w); background: var(--c-white); display: flex; align-items: center; border-top: 1px solid #DCDEE2; padding-bottom: 0; z-index: 100; }
.bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 0; text-decoration: none; color: var(--c-gray-light); -webkit-tap-highlight-color: transparent; transition: color .15s; }
.bottom-nav__item.is-active { color: var(--c-text); }
.bottom-nav__icon { width: 24px; height: 24px; display: block; }
.bottom-nav__label { font-size: 12px; font-weight: 700; color: inherit; text-align: center; }
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max-w); background: var(--gray-0); display: flex; align-items: center; border-top: 1px solid var(--gray-10); padding-bottom: env(safe-area-inset-bottom); z-index: 100; }
.bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 0; text-decoration: none; color: var(--gray-30); -webkit-tap-highlight-color: transparent; transition: all 0.15s ease; }
.bottom-nav__icon { width: 24px; height: 24px; display: block; object-fit: contain; opacity: 0.4; transition: all 0.15s ease; }
.bottom-nav__label { font-size: 12px; font-weight: 700; color: inherit; text-align: center; }
.bottom-nav__item.is-active { color: #000000 !important; }
.bottom-nav__item.is-active .bottom-nav__icon { opacity: 1 !important; filter: brightness(0) !important; }

/* ── 버튼 및 컴포넌트 ── */
.btn-pill { width: 100%; height: 52px; border: none; border-radius: var(--radius-pill); font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; }
.btn-pill:active { transform: scale(0.96); }
.btn-pill--primary { background: var(--color-primary); color: var(--gray-0); }
.btn-pill--primary:active { opacity: 0.85; }
.btn-pill--outline { background: var(--gray-0); border: 1px solid var(--gray-10); color: var(--gray-40); }
.btn-pill:disabled { background: var(--gray-10); color: var(--gray-20); cursor: not-allowed; }
.btn-pill:disabled:active { transform: none; opacity: 1; }
.chip { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 2px 12px; border: none; border-radius: var(--radius-sm); font-size: 14px; background: var(--gray-5); color: var(--gray-50); cursor: pointer; transition: all 0.15s ease; }
.chip--selected { background: var(--color-primary); color: var(--gray-0); }
.btn-write-float { position: fixed; bottom: 80px; z-index: 50; background: #1b498c; color: #fff; font-size: 16px; font-weight: 600; padding: 0 24px; height: 52px; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(27,73,140,.3); white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* ── 푸터 ── */
.footer { background: var(--gray-5); padding: 32px var(--space-side) 62px; }
.footer__contacts { display: flex; gap: 32px; margin-bottom: var(--space-md); }
.footer__contact-label { font-size: 14px; font-weight: 600; color: var(--gray-30); line-height: 1.4; }
.footer__contact-value { font-size: 16px; font-weight: 600; color: var(--gray-50); line-height: 1.4; text-decoration: none; }
.footer__links { display: flex; align-items: center; justify-content: space-between; background: #f1f1f1; border-radius: var(--radius-sm); padding: 12px var(--space-md); font-size: 14px; font-weight: 400; color: var(--gray-40); margin-bottom: var(--space-md); }
.footer__links a { color: var(--gray-40); text-decoration: none; }
.footer__biz { display: flex; align-items: center; gap: 8px; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--gray-50); margin-bottom: var(--space-md); cursor: pointer; border-bottom: 1px solid var(--gray-10); }
.footer__biz-info { padding-bottom: var(--space-md); font-size: 14px; color: var(--gray-30); line-height: 1.6; }
.footer__biz-info a { color: var(--gray-30); text-decoration: underline; }
.footer__nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; font-size: 14px; font-weight: 400; color: var(--gray-30);  white-space: nowrap; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.footer__nav::-webkit-scrollbar { display: none; }
.footer__nav a { color: var(--gray-30); text-decoration: none; flex-shrink: 0; }
.footer__nav a.privacy { font-weight: 600; color: var(--color-primary); }
.footer__sns { display: flex; gap: var(--space-md); }
.footer__sns a { color: var(--gray-30); }
.footer__sns svg { width: 24px; height: 24px; }

/* ── 반응형 ── */
.mobile-wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; min-height: 100vh; background: var(--c-white); position: relative; }
.main-header { max-width: var(--max-w); margin-left: auto; margin-right: auto; }
.pill-menu-wrap { max-width: var(--max-w); margin-left: auto; margin-right: auto; }
.bottom-nav { left: 50%; transform: translateX(-50%); max-width: var(--max-w); }
@media (min-width: 413px) { .drawer { right: calc(50% - var(--max-w) / 2); } }
@media (max-width: 412px) { .mobile-wrap { max-width: 100vw; } }