/* =========================================================
   LIFE MENTION — lm Design System
   §1 토큰(:root) · §2 atom(.lm-btn/.lm-chip/.lm-badge/.lm-input…) ·
   §3 합성(.lm-product-card·.lm-grid) · 셸(.lm-header·.lm-footer·.lm-rail).
   고유 .lm-* 클래스가 opt-in — 레거시(common/style/layout.css)에 비침투. 마지막 로드.
   ========================================================= */

/* ---------- 토큰 (Figma 디자인가이드 1:1) ---------- */
:root{
    /* color */
    --lm-text:#1A1A1A; --lm-text-2:#4A4A4A; --lm-muted:#9A9A9A; --lm-muted-2:#8A8A8A;
    --lm-bg:#FFFFFF; --lm-surface:#F5F5F5; --lm-muted-bg:#F0F0F0; --lm-line:#EDEDED;
    --lm-brand:#17B96D; --lm-brand-soft:#63CD83; --lm-brand-strong:#03A056; --lm-sale:#F45B55;
    --lm-naver:#03C75A;
    --lm-disabled-bg:#F0F0F0; --lm-disabled-fg:#8A8A8A;   /* 비활성 전용 (품절 포함) — 색 조정은 여기서 */
    /* radius (용도별): input·메인CTA 2 / 더보기·일반모달 5 / 카드·배너 10 / 바텀시트 20 / pill·칩 100 */
    --lm-r-input:2px; --lm-r-more:5px; --lm-r-card:10px; --lm-r-sheet:20px; --lm-r-pill:100px;
    /* spacing scale (가이드 4~62) */
    --lm-s1:4px; --lm-s2:8px; --lm-s3:12px; --lm-s4:14px; --lm-s5:16px;
    --lm-s6:20px; --lm-s7:24px; --lm-s8:32px; --lm-s9:48px; --lm-s10:62px;
}

/* =========================================================
   2. 기본 컴포넌트 (atoms) — Figma 디자인가이드 값 1:1
   비침투 원칙: 전부 .lm-* 클래스 스코프(opt-in). bare 엘리먼트 셀렉터(button/input/a) 금지 →
   미전환(레거시) 페이지의 .btn/.checkbox 등에 영향 0. common.css 는 strangler 로 점진 대체.
   폰트: 15px 기준 em (14px=0.933em, 13px=0.867em).
   ========================================================= */
/* --- 버튼 .lm-btn : 메인 CTA h48·radius 2px·Bold 14 --- */
.lm-btn{ display:flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box;
    height:48px; min-width:120px; padding:0 32px; border:0; border-radius:var(--lm-r-input);
    font-weight:600; font-size:0.933em; line-height:1; white-space:nowrap; text-align:center;
    text-decoration:none; cursor:pointer; appearance:none; -webkit-appearance:none; }
.lm-btn--primary{ background:var(--lm-text); color:#fff; }                                  /* 구매하기(검정) */
.lm-btn--outline{ background:var(--lm-bg); color:var(--lm-text); border:1px solid var(--lm-text); } /* 장바구니 */
.lm-btn--naver{ background:var(--lm-naver); color:#fff; padding:0 24px; }                    /* 네이버페이 */
.lm-btn--more{ background:var(--lm-bg); color:var(--lm-muted-2); border:1px solid var(--lm-line);
    border-radius:var(--lm-r-more); gap:4px; font-weight:500; }                               /* 상품 더보기(r5) */
.lm-btn--icon{ width:48px; height:48px; min-width:0; padding:0;
    background:var(--lm-bg); border:1px solid var(--lm-line); }                               /* 정사각 아이콘 */
.lm-btn--ghost{ background:var(--lm-bg); color:var(--lm-muted-2); border:1px solid var(--lm-line); font-weight:500; } /* 취소 */
.lm-btn--disabled{ background:var(--lm-disabled-bg); color:var(--lm-disabled-fg); border-color:var(--lm-disabled-bg); } /* 비활성 룩(의도적, 클릭 가능). 품절도 이걸로(+--sm) */
.lm-btn--full{ width:100%; }
/* 비활성 상태: 클릭 차단 + 회색 글자. 채움형(primary/naver)은 회색 채움 */
.lm-btn:disabled, .lm-btn.is-disabled{ background:var(--lm-disabled-bg); color:var(--lm-disabled-fg);
    border-color:var(--lm-disabled-bg); pointer-events:none; cursor:default; }
/* 아웃라인 계열은 특성 유지: 흰 배경 + 회색 테두리(글자만 회색) */
.lm-btn--outline:disabled, .lm-btn--outline.is-disabled,
.lm-btn--ghost:disabled, .lm-btn--ghost.is-disabled,
.lm-btn--more:disabled, .lm-btn--more.is-disabled,
.lm-btn--icon:disabled, .lm-btn--icon.is-disabled{ background:var(--lm-bg); border-color:var(--lm-line); }

/* --- hover : reset.css a:hover{color:inherit}(0,1,1)이 채움형 글자색을 덮으므로 변형별(0,2,0)로 명시 + hover 디자인 --- */
.lm-btn{ transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.lm-btn--primary:hover{ background:#000; color:#fff; }                                          /* 검정 → 더 진하게 */
.lm-btn--naver:hover{ background:#02b451; color:#fff; }                                         /* 네이버 그린 진하게 */
.lm-btn--outline:hover{ background:var(--lm-text); color:#fff; border-color:var(--lm-text); }   /* 아웃라인 → 채움 */
.lm-btn--more:hover, .lm-btn--ghost:hover, .lm-btn--icon:hover{ background:var(--lm-surface); color:var(--lm-text); }  /* 옅은 회색 + 글자 진하게 */
.lm-btn--text:hover{ color:var(--lm-text); }
.lm-btn--disabled:hover{ background:var(--lm-disabled-bg); color:var(--lm-disabled-fg); }        /* 비활성 룩: hover 변화 없음 */

/* --- 칩/탭 .lm-chip : h36·radius 100·Medium 14 --- */
.lm-chip{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
    height:36px; padding:0 17px; border:1px solid var(--lm-line); border-radius:var(--lm-r-pill);
    background:var(--lm-bg); color:var(--lm-muted-2); font-weight:500; font-size:0.933em; line-height:1;
    white-space:nowrap; cursor:pointer; text-decoration:none; }
.lm-chip--active{ background:var(--lm-text); color:#fff; border-color:var(--lm-text); }

/* --- 뱃지/태그 .lm-badge : pill·10px·Bold (Badge/Tag) --- */
.lm-badge{ display:inline-flex; align-items:center; justify-content:center; height:20px; padding:0 8px;
    border-radius:var(--lm-r-pill); background:var(--lm-text); color:#fff; font-weight:600; font-size:0.667em;
    line-height:1; white-space:nowrap; }
.lm-badge--sale{ background:var(--lm-sale); }
.lm-badge--soft{ background:var(--lm-muted-bg); color:var(--lm-muted-2); }

/* --- 페이지네이션 .lm-pagination : 32×32·r2·현재 main600 (border #d9d9d9) --- */
.lm-pagination{ display:flex; align-items:center; justify-content:center; gap:8px; padding:17px 0 16px;
    border-top:1px solid var(--lm-line); }
.lm-pagination a, .lm-pagination button, .lm-pagination span{ display:flex; align-items:center; justify-content:center; box-sizing:border-box;
    width:32px; height:32px; padding:0; border:1px solid #d9d9d9; border-radius:var(--lm-r-input);
    background:var(--lm-bg); color:var(--lm-text); font-weight:500; font-size:0.933em; cursor:pointer; }
.lm-pagination .is-current{ border-color:var(--lm-brand); color:var(--lm-brand); }
.lm-pagination .is-disabled{ color:var(--lm-muted); pointer-events:none; }  /* 처음/끝 페이지 prev·next 비활성 */

/* --- 캐러셀 인디케이터 3종 (슬라이드 현재 위치) : 활성=.is-active --- */
/* fraction 01/N — 이미지 배너(상품·쿠폰) 위 오버레이. 반투명 검정이라 이미지/흰배경 모두 OK */
.lm-caro-frac{ display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:var(--lm-r-pill);
  background:rgba(26,26,26,.6); color:#fff; font-size:0.72em; font-weight:600; line-height:1; }
.lm-caro-frac b{ font-weight:700; }
.lm-caro-frac em{ font-style:normal; opacity:.6; margin-left:3px; }
/* bar dots — 히어로 배너. 활성=긴 검정 바 */
.lm-caro-bar{ display:inline-flex; align-items:center; gap:6px; }
.lm-caro-bar span{ width:8px; height:3px; border-radius:2px; background:var(--lm-line); transition:background-color .2s; }  /* width transition 은 flex 버그로 제외 */
.lm-caro-bar .is-active{ width:20px; background:var(--lm-text); }
/* circle dots — 일반 슬라이드. 활성=검정 점 */
.lm-caro-dot{ display:inline-flex; align-items:center; gap:6px; }
.lm-caro-dot span{ width:6px; height:6px; border-radius:50%; background:var(--lm-line); transition:background-color .2s; }
.lm-caro-dot .is-active{ background:var(--lm-text); }

/* --- 검색 페이지 셸 (검색시작/검색결과) : 고정 검색바(h60) 자리만. bg·min-height 는 .layout 이 이미 담당 --- */
.lm-searchpage{ padding-top:60px; }

/* --- 이벤트 배너 캐러셀 래퍼 (.search_event 대체) --- */
.lm-eventbanner .swiper-slide{ width:100%; box-sizing:border-box; }
.lm-eventbanner .swiper-slide img{ display:block; width:100%; height:auto; }

/* --- 동의/체크 .lm-check : 원형 인디케이터 20px(border2) + 행(r5). 라디오도 동일 인디케이터 --- */
.lm-check{ display:flex; align-items:center; gap:12px; box-sizing:border-box; width:100%;
    padding:11px 17px; border:1px solid var(--lm-line); border-radius:var(--lm-r-more); cursor:pointer; }
.lm-check__box{ flex:0 0 20px; width:20px; height:20px; box-sizing:border-box;
    border:2px solid var(--lm-line); border-radius:50%; }
.lm-check__label{ flex:1; font-weight:400; font-size:0.933em; color:var(--lm-text); }
.lm-check--all{ justify-content:center; padding:13px 17px; }
.lm-check--all .lm-check__label{ flex:0 0 auto; font-weight:600; }
.lm-check.is-checked .lm-check__box{ background:var(--lm-brand);border-width: 4px; }
/* 폼용: 내부 radio/checkbox 로도 동작 */
.lm-check input{ position:absolute; opacity:0; pointer-events:none; }
.lm-check input:checked ~ .lm-check__box{ background:var(--lm-brand); border-width:4px; }

/* --- 인풋/셀렉트 .lm-input / .lm-select : height 48 · radius 2px · placeholder #8a8a8a --- */
.lm-input, .lm-select{ box-sizing:border-box; width:100%; height:48px; padding:0 14px;
    border:1px solid var(--lm-line); border-radius:var(--lm-r-input); background:var(--lm-bg);
    font-family:inherit; font-size:0.933em; color:var(--lm-text); outline:0; }
.lm-input::placeholder{ color:var(--lm-muted-2); }

/* --- 토글 .lm-toggle : h24 · track pill · 켜짐 main600 --- */
.lm-toggle{ position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; }
.lm-toggle input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.lm-toggle__track{ display:block; width:44px; height:24px; border-radius:var(--lm-r-pill); background:var(--lm-muted-bg); transition:background .2s; }
.lm-toggle__thumb{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s; pointer-events:none; }
.lm-toggle input:checked ~ .lm-toggle__track{ background:var(--lm-brand); }
.lm-toggle input:checked ~ .lm-toggle__thumb{ transform:translateX(20px); }

/* --- 버튼 사이즈/텍스트 변형 (common .btn.large/.small/.text 대응) --- */
.lm-btn--lg{ font-size:1.067em; }                                                           /* 큰 글자(16px) */
.lm-btn--sm{ height:36px; min-width:0; padding:0 20px; font-size:0.867em; }                 /* 작은 버튼 h36 */
.lm-btn--text{ height:auto; min-width:0; padding:2px; border:0; border-bottom:1px solid var(--lm-muted);
    border-radius:0; color:var(--lm-text-2); font-weight:500; }                               /* 밑줄 텍스트버튼 */

/* --- textarea .lm-textarea : input 계열 · min-height 120 --- */
.lm-textarea{ box-sizing:border-box; width:100%; min-height:120px; padding:12px 14px;
    border:1px solid var(--lm-line); border-radius:var(--lm-r-input); background:var(--lm-bg);
    font-family:inherit; font-size:0.933em; line-height:1.5; color:var(--lm-text); outline:0; resize:vertical; }
.lm-textarea::placeholder{ color:var(--lm-muted-2); }

/* --- select 화살표 (common .select::after 대응: 네이티브 화살표 숨기고 셰브론) --- */
.lm-select{ appearance:none; -webkit-appearance:none; padding-right:36px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; background-size:16px; }

/* --- 옵션(선택형 라디오) .lm-options>label (common .radio_select 대응) --- */
.lm-options{ display:flex; gap:6px; flex-wrap:wrap; }
.lm-options input{ position:absolute; opacity:0; pointer-events:none; }
.lm-options label{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
    height:36px; min-width:100px; padding:0 16px; border:1px solid var(--lm-line); border-radius:var(--lm-r-input);
    background:var(--lm-bg); color:var(--lm-muted-2); font-size:0.933em; cursor:pointer; }
.lm-options input:checked + label{ color:var(--lm-text); border-color:var(--lm-text); }

/* --- 소비처 보정: 레거시 .modal_footer 안의 lm-btn (모달 컴포넌트 lm화 전 과도기) --- */
.modal_footer .lm-btn{ flex:1; min-width:0; }
.modal_footer .lm-btn + .lm-btn{ margin-left:10px; }

/* --- 전역 보정: .layout(가운데 카드) 항상 뷰포트 높이 이상 → footer 숨김·짧은 페이지도 하단까지 --- */
.layout{ min-height:100vh; }

/* --- footer 숨김 유틸: 페이지 최상위에 .lm-nofooter 추가하면 마케팅 footer 미노출(opt-in) --- */
.layout:has(.lm-nofooter) #footer,
.layout:has(.lm-mypage) #footer{ display:none; }   /* .lm-mypage(마이페이지)는 항상 숨김 */

/* --- 마이페이지 콘텐츠 래퍼 (.wrap.mypage + .mypage_content 대체). 하단 네비 여백 --- */
.lm-mypage{ width:100%; padding-bottom:60px; }

/* =========================================================
   3. 합성 컴포넌트 — lm-product-card(canonical 상품카드) + lm-grid(2열 그리드)
   고유 클래스 자체가 opt-in. 그리드는 .lm-grid 단독(레거시 .store_list>ul 의존 제거).
   JS훅(mentionItem)은 클래스로 안 잡음.
   ========================================================= */
.lm-product-card{ position:relative; }
.lm-product-card__thumb{ position:relative; aspect-ratio:1/1; background:var(--lm-muted-bg);
    border:1px solid var(--lm-line); border-radius:var(--lm-r-card); overflow:hidden; }
.lm-product-card__link{ position:absolute; inset:0; z-index:1; }
.lm-product-card__img{ width:100%; height:100%; object-fit:cover; }
.lm-product-card__badges{ position:absolute; top:8px; left:8px; z-index:2; display:flex; gap:4px; }
.lm-product-card__badges span{ font-size: 0.8em;font-weight: 500;padding: 0 7px;border-radius:4px;background:var(--lm-text);color:#fff;line-height: 22px;height: 20px; }
.lm-product-card__badges span.lm-product-card__badge--sole{ background:#fff;color:var(--lm-text);border:1px solid var(--lm-line);line-height: 18px;padding: 0 5px;font-weight: 400; }
.lm-product-card__mention{ position:absolute; bottom:10px; right:8px;
    background:url(../../web/img/UI/icon_mention_w.svg) center no-repeat #17171a69; background-size:16px;
    border:0; border-radius:100%; width:28px; height:28px; max-width:7vw; max-height:7vw;
    display:flex; align-items:center; justify-content:center; opacity:.8; z-index:2; cursor:pointer; }
.lm-product-card__mention.on{ background-color:var(--main800); }
.lm-product-card__info{ padding-top:10px; }
.lm-product-card__brand{ display:inline-block; font-size:0.85em; color:var(--lm-muted); }
.lm-product-card__name{ display:block; font-size:0.92em; color:var(--lm-text); line-height:1.4; margin-top:3px; }
.lm-product-card__price{ display:flex; align-items:baseline; gap:6px; margin-top:7px; }
.lm-product-card__sale{ font-weight:600; color:var(--lm-brand); }
.lm-product-card__amount{ font-weight:600; color:var(--lm-text); }
.lm-product-card__was{ font-size:0.8em; color:var(--lm-muted); text-decoration:line-through; }
.lm-product-card__soldout{ font-size:0.9em; font-weight:500; color:var(--lm-muted); }
.lm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px 14px; padding:8px 16px 40px; margin:0; list-style:none; }
.lm-grid > li{ min-width:0; }

/* 카테고리 탭바 (main_tab 방식): 평소 흐름, 스크롤로 헤더 닿으면 JS가 .fix → inner 만 고정.
   .lm-tabbar = placeholder(자리 확보, 고정 시 점프 방지) / .lm-tabbar__inner = 실제 칩 바. 자식=.lm-chip */
.lm-tabbar{ height:45px; }
.lm-tabbar__inner{ display:flex; align-items:center; gap:10px; height:45px; padding:4px 10px;
    overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;
    background:var(--lm-bg); border-top:1px solid var(--lm-line); }
.lm-tabbar__inner::-webkit-scrollbar{ display:none; }
.lm-tabbar.fix .lm-tabbar__inner{ position:fixed; top:50px; left:0; right:0; margin:0 auto;
    width:100%; max-width:600px; z-index:999; box-shadow:0 10px 20px rgba(0,0,0,.03); }

/* 균등분할 탭 .lm-tabs : 자식 .lm-tabs__tab 갯수만큼 flex:1 자동 분할(2개=50%, 3개=33%…).
   활성 .is-active = 검정 글자 + 하단 2px 밑줄. (스크롤 칩바 .lm-tabbar 와는 별개) */
.lm-tabs{ display:flex;border-bottom:1px solid var(--lm-line);margin: 0 16px; }
.lm-tabs__tab{ flex:1; text-align:center; }
.lm-tabs__tab a{ display:block; padding:14px 16px; font-size:1.1em; font-weight:400; color:var(--lm-muted);
    display: flex;align-items: center; justify-content: center; gap: 4px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.lm-tabs__tab.is-active a{ color:var(--lm-text); font-weight:500; border-bottom-color:var(--lm-text); }
.lm-tabs__count{ font-weight:400; font-size:0.85em; color:var(--lm-muted); }   /* 탭 담긴 개수 (N) — 활성/비활성 모두 muted */

/* 리스트 상단 바 .lm-listtop : "전체 N개" + 정렬 (탭바가 흐름에 있어 별도 클리어 불필요) */
.lm-listtop{ display:flex; justify-content:space-between; align-items:center;
    padding:12px 16px 4px; border-top:10px solid var(--lm-surface); font-size:0.9em; }
.lm-listtop__total span{ color:var(--lm-brand); font-weight:400; }
.lm-listtop__actions{ display: flex; align-items: center; gap: 6px; }
.lm-listtop__sort{ position:relative; display:flex; align-items:center; }
.lm-listtop__sort select{ appearance:none; -webkit-appearance:none; border:0; outline:0; background:none;
    width:auto; padding:0 22px 0 0; text-align:right; font-family:inherit; color:var(--lm-text); cursor:pointer; }
.lm-listtop__sort::after{ content:"\ec1b"; font-family:"boxicons"; position:absolute; right:0; top:50%;
    transform:translateY(-50%); font-size:14px; color:var(--lm-muted-2); pointer-events:none; }
.lm-listtop__actions button{ background: var(--grey50);border-radius: 999px;padding: 6px 10px;display: flex;align-items: center;gap: 2px;color: var(--grey600); }

/* =========================================================
   3. 글로벌 셸 — 헤더 (lm-header)
   기존 .header* CSS를 1:1 복제 — 디자인 픽셀 동일(값 변경 없음).
   기능 훅은 미개명 유지: #header(id, JS .fix 토글)·.cart_count(hx-get 타깃)·
   .scroll_to_top/.top_button·.info_sub_button*·#lm-typed/.lm-tagline.
   마크업: <header id="header"> > .lm-header__inner(=.header) > .lm-header__bar(=.header_wrap)
   ========================================================= */
/* 래퍼 — .header / .header_wrap / .fix .header (.fix#header 는 id로 그대로 적용) */
.lm-header__inner{ max-width:600px; width:100%; height:auto; background:#fff; z-index:999999; }
.lm-header__bar{ display:flex; align-items:center; justify-content:space-between; max-width:1280px;
    height:50px; padding:0 16px 0 0; margin:auto; color:var(--grey800); transition:padding .3s; background:#fff; }
.fix .lm-header__inner{ box-shadow:0px 10px 10px rgba(0,0,0,.03); transition:padding .3s; top:0; position:fixed; }

/* 좌측 — .header_gnb / .header_gnb_slogan / .header_gnb_logo a */
.lm-header__left{ display:flex; align-items:center; }
.lm-header__slogan{ padding:0 16px; font-weight:500; font-size:0.95em; color:var(--grey600); }
.lm-header__logo a{ display:block; margin-left:16px; font-size:0; width:140px; height:20px; max-width:35vw;
    background:url(../../web/img/UI/logo_black_l.png) center no-repeat; background-size:contain; transition:all .2s; }
.fix .lm-header__logo a{ width:60px; height:20px;
    background:url(../../web/img/UI/logo_black_m.png) center no-repeat; background-size:contain; transition:all .2s; }

/* 뒤로가기 — .header_back / .header_back a / .header_back_title */
.lm-header__back{ display:flex; align-items:center; justify-content:center; }
.lm-header__back a{ display:block; width:40px; height:50px;
    background:url(../../web/img/UI/icon_back.svg) center no-repeat; background-size:25px !important; }
.lm-header__title{ font-size:1.2em; font-weight:500; color:var(--grey600); }

/* 우측 아이콘 — .header_until / .header_until_icon / .header_until_icon div / item_* */
.lm-header__right{ display:flex; align-items:center; }
.lm-header__icons{ display:flex; align-items:center; font-size:0; gap:4px; }
.lm-header__ico{ position:relative; display:flex; align-items:center; justify-content:center; width:30px; height:30px; background-size:22px !important; }
.lm-header__ico--home{ background:url(../../web/img/UI/icon_home.svg) center no-repeat; }
.lm-header__ico--search{ background:url(../../web/img/UI/icon_search.svg) center no-repeat; }
.lm-header__ico--share{ background:url(../../web/img/UI/icon_share.svg) center no-repeat; }
.lm-header__ico--cart{ background:url(../../web/img/UI/icon_bag.svg) center no-repeat; padding-bottom:4px; justify-content:flex-start; }
.lm-header__ico--cart .count{ position:absolute; top:50%; right:-0.2rem; border-radius:50%; background-color:var(--grey800);
    text-align:center; color:#fff; width:16px; height:16px; display:flex; align-items:center; justify-content:center;
    font-size:10px; transform:translateY(-50%); }

/* =========================================================
   3. 글로벌 셸 — 푸터 (lm-footer, 라이트)
   법적 필수: 통신판매중개 고지(__notice, 항상노출)·고객센터 번호·에스크로 배너(#escrow_banner) 유지.
   사업자정보는 <details> 토글. fine-print(__notice·__biz-body)만 0.73em 예외, 그 외 ≥0.8em.
   ========================================================= */
.lm-footer{ background:var(--lm-bg); color:var(--lm-text); border-top:1px solid var(--lm-line); padding:32px 16px 88px; }
.lm-footer__cs-title{ display:flex; align-items:center; gap:6px; font-size:1.06em; font-weight:600; color:var(--lm-text); }
.lm-footer__cs-title a{ color:var(--lm-text); }
.lm-footer__cs-hours{ font-size: 0.85em;color:var(--lm-muted);line-height: 1.5;margin-top:8px; }
/* 사업자 정보 토글 */
.lm-footer__biz{ padding-top:24px; }
.lm-footer__biz summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; font-size:0.93em; font-weight:500; color:var(--lm-text); }
.lm-footer__biz summary::-webkit-details-marker{ display:none; }
.lm-footer__biz-ico{ font-size:1.1em; color:var(--lm-muted); transition:transform .2s; }
.lm-footer__biz[open] .lm-footer__biz-ico{ transform:rotate(180deg); }
.lm-footer__biz-body{ font-size:0.83em; color:var(--lm-muted); line-height:1.6; margin-top:12px; }  /* 법적 fine-print 예외 */
.lm-footer__biz-body a{ color:var(--lm-muted); text-decoration:underline; }
.lm-footer__biz:not([open]) .lm-footer__biz-body{ display:none; }  /* reset.css details{display:block} 보정 — 닫힘 시 숨김 */
/* 링크 줄 (ㅣ 구분) */
.lm-footer__links{ display:flex; flex-wrap:wrap; align-items:center; margin-top:16px; }
.lm-footer__links a{ font-size:0.86em; color:var(--lm-text-2); padding:0 8px; line-height:1; border-left:1px solid var(--lm-line); }
.lm-footer__links a:first-child{ padding-left:0; border-left:0; }
.lm-footer__links a.is-strong{ color:var(--lm-text); font-weight:600; }
/* SNS — 원형(라이트: 아웃라인) */
.lm-footer__sns{ display:flex; gap:10px; margin-top:20px; }
.lm-footer__sns a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--lm-line); color:var(--lm-text); display:flex; align-items:center; justify-content:center; font-size:1.06em; }
.lm-footer__notice{ font-size: 0.8em;color:var(--lm-muted);line-height:1.6;margin-top:20px;word-break: keep-all;font-weight: 300; }  /* 법적 fine-print 예외 */
.lm-footer__escrow img{ max-width:170px; }

/* =========================================================
   3. 글로벌 셸 — 데스크탑 양옆 레일 (lm-rail)
   layout.css 에서 이동. 단일 블록 lm-rail BEM 으로 통일(디자인 값 무변경).
   ≥1280px 에서만 노출, 가운데 600px .layout 양옆 거터에 position:fixed 핀.
   ========================================================= */

.lm-rails{ display:none; }

@media (min-width:1280px){
    .lm-rails{ display:block; }

    .lm-rail{
        position:fixed; top:78px; bottom:80px; z-index:50;
        overflow-y:auto; overflow-x:hidden;
        font-family:"Pretendard Variable",Pretendard,-apple-system,sans-serif;
        color:var(--grey800,#1c1c1a);
        -ms-overflow-style:none; scrollbar-width:none;
    }
    .lm-rail::-webkit-scrollbar{ display:none; }

    /* 가운데 600px 컬럼 기준으로 좌/우 거터에 핀
       (50% = 화면 중앙, 300 = 컬럼 절반, 28 = 컬럼과의 간격) */
    .lm-rail--left{ right:calc(50% + 328px); width:298px; display:flex; flex-direction:column; justify-content:center;}
    .lm-rail--right{ left:calc(50% + 328px);width:300px;display: flex;align-items: center;}

    /* ---- 좌 레일 ---- */
    .lm-rail__wordmark{font-size: 0;background: url(../../web/img/UI/logo_black_l.svg) no-repeat;width: 74%;height: 34px;background-size: contain;}
    .lm-rail__slogan{line-height: 1.25;font-size: 1.3em;font-weight: 600;margin: 24px 0 6px;}
    .lm-rail__tagline{font-size: 0.95em;font-weight: 400;color:var(--grey400,#9a9a96);margin: 2px 0px 18px;}

    .lm-rail__search{
        display:flex;
        align-items:center;
        gap:8px;
        border:1px solid var(--grey200,#e3e1dc);
        border-radius:999px;
        background:#fff;
        padding: 6px 6px 6px 20px;
        margin-bottom: 68px;
    }
    .lm-rail__search input{border:0;outline:0;background:none;font-size:13px;width:100%;font-family:inherit;height: 30px;padding: 0;}
    .lm-rail__search-btn{ flex:0 0 auto; width:34px; height:34px; padding:0; border:0; border-radius:50%;
        background:var(--grey800,#1c1c1a); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .lm-rail__search-btn i{color:#fff;font-size:18px;text-align: center;margin-left: 2px;}

    .lm-rail__kw-t{font-size: 0.9em;font-weight: 600;color:var(--grey400,#9a9a96);margin-bottom:10px;}
    .lm-rail__kw a{
        display:inline-block;
        font-size: 0.9em;
        background: var(--grey50);
        border-radius:999px;
        padding:6px 12px;
        margin:0 6px 6px 0;
        color:var(--grey700,#444);
    }

    .lm-rail__bottom{position: fixed;bottom: 40px;width: 248px;}
    /* 좌 레일 하단: 브랜딩 띠배너 → About */
    .lm-rail__spacer{ flex:1 1 auto; min-height:24px; }
    .lm-rail__about{ display:block; border-top:1px solid var(--grey100,#eee); padding-top:18px; }
    .lm-rail__about-txt{display:flex;align-items:center;gap:10px;font-size: 0.9em;font-weight: 500;color:var(--grey800,#1c1c1a);}
    .lm-rail__about-bar{ flex:0 0 3px; align-self:stretch; min-height:22px; background:var(--main600,#17b96d); border-radius:999px; }
    .lm-rail__about-cta{font-size: 0.9em;color: var(--grey600);margin-top: 4px;padding-left:13px;}

    /* ③ 소식 받기(채널) — 좌 레일 하단 (About 위) */
    .lm-rail__channel{ margin-bottom:16px; }
    .lm-rail__channel-head{display:flex;align-items:center;gap:10px;margin-bottom: 18px;}
    .lm-rail__channel-ico{flex: 0 0 38px;width: 38px;height: 38px;border-radius:10px;background: url(../../web/img/UI/logo_white_s.svg) no-repeat 9px 9px var(--grey700);color:#fff;display:flex;align-items:center;justify-content:center;font-size: 0;background-size: 20px;}
    .lm-rail__channel-t{display:block;font-weight: 600;color:var(--grey800,#1c1c1a);line-height:1.3;}
    .lm-rail__channel-s{display:block;font-size: 0.85em;font-weight: 400;color:var(--grey400,#9a9a96);margin-top: 2px;}
    .lm-rail__channel-btns{ display:flex; gap:8px; }
    .lm-rail__channel-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius: 5px;padding:9px 6px;font-size: 0.86em;color:var(--grey700,#444);border: 1px solid var(--grey100);letter-spacing: -0.05em;}
    .lm-rail__channel-btn i{ font-size:15px; }

    /* ---- 우 레일: 이 달, 이 브랜드 카드 ---- */
    .lm-rail__bm{ width: 100%; background:#fff;border:1px solid var(--grey100,#eee);border-radius: 8px;overflow:hidden; }
    .lm-rail__bm-thumb{ display:block; aspect-ratio:4/3; background:var(--grey100,#eee); background-size:cover; background-position:center; }
    .lm-rail__bm-body{ padding:16px; }
    .lm-rail__bm-eyebrow{font-size: 0.85em;font-weight: 500;color:var(--grey400,#9a9a96);text-transform:uppercase;}
    .lm-rail__bm-name{display: block;font-size: 1.2em;font-weight: 600;color:var(--grey800,#1c1c1a);margin: 6px 0 24px;}
    .lm-rail__bm-sub{font-size: 0.85em;font-weight: 400;color:var(--grey400,#9a9a96);margin: 0 0 7px;}
    .lm-rail__bm-note-label{display:inline-block;font-size: 0.8em;font-weight:600;color:var(--grey800,#1c1c1a);background:var(--grey50,#f4f4f4);border-radius:5px;padding:4px 9px;margin-bottom:10px;}
    .lm-rail__bm-note{ font-size:13px; line-height:1.65; color:var(--grey600,#555); word-break:keep-all; white-space:pre-line; margin:0 0 12px; }
    .lm-rail__bm-tags{display:flex;flex-wrap:wrap;gap:6px;margin: 6px 0 14px;}
    .lm-rail__bm-tag{ font-size: 0.8em; color:var(--grey600,#555); background:var(--grey50,#f4f4f4); border-radius:999px; padding:4px 10px; }
    .lm-rail__bm-tag--main{ background:var(--grey100,#ebebeb); color:var(--grey800,#1c1c1a); font-weight:600; }
    .lm-rail__bm-btn{
        display:block;
        text-align:center;
        background:var(--grey800,#1c1c1a);
        color:#fff;
        font-weight: 500;
        padding:12px;
        border-radius: 5px;
    }
}

/* 아주 넓은 화면에서 거터가 충분하면 레일 폭 약간 키움(선택) */
@media (min-width:1480px){
    .lm-rail--left{  right:calc(50% + 352px); }
    .lm-rail--right{ left:calc(50% + 352px); }
}

/* =========================================================
   바텀시트 .lm-sheet — 하단에서 올라오는 필터/옵션 시트 (Figma Bottom Sheet, r20)
   .is-open 토글로 열고 닫음(JS). dim/닫기 클릭 시 닫힘.
   ========================================================= */
/* 뷰포트 고정 오버레이 = flex 하단정렬(패널을 항상 화면 맨 아래에). JS가 <body>로 빼내 클리핑 조상 탈출 */
.lm-sheet{ position:fixed; inset:0; z-index:1000000; display:flex; flex-direction:column; justify-content:flex-end; visibility:hidden; }
.lm-sheet.is-open{ visibility:visible; }
.lm-sheet__dim{ position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .3s ease; }
.lm-sheet.is-open .lm-sheet__dim{ opacity:1; }
.lm-sheet__panel{ position:relative; z-index:1; margin:0 auto; width:100%; max-width:600px;
    max-height:88vh; display:flex; flex-direction:column; background:var(--lm-bg);
    border-radius:var(--lm-r-sheet) var(--lm-r-sheet) 0 0; transform:translateY(100%); transition:transform .3s ease; }
.lm-sheet.is-open .lm-sheet__panel{ transform:translateY(0); }
.lm-sheet__head{ position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    padding:20px 16px; font-weight:600; font-size:1.06em; color:var(--lm-text); }
.lm-sheet__close{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:34px; height:34px;
    display:flex; align-items:center; justify-content:center; border:0; background:none; font-size:1.5em; color:var(--lm-text); cursor:pointer; }
.lm-sheet__body{ flex:1 1 auto; overflow-y:auto; padding:0 16px 12px; }
.lm-sheet__foot{ flex:0 0 auto; display:flex; gap:8px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--lm-line); }

/* 필터 섹션(분류/가격) */
.lm-filter__sec{ padding:20px 0; border-top:1px solid var(--lm-line); }
.lm-filter__sec:first-child{ border-top:0; padding-top:8px; }
.lm-filter__title{ font-weight:600; font-size:1em; color:var(--lm-text); margin-bottom:14px; }
.lm-filter__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.lm-filter__chips input{ position:absolute; opacity:0; pointer-events:none; }
.lm-filter__chips input:checked + .lm-chip{ background:var(--lm-text); color:#fff; border-color:var(--lm-text); }
.lm-filter__checks{ display:flex; flex-direction:column; }
.lm-filter__checks .lm-check{ border:0; padding:4px 0; }              /* 시트 안에선 행 테두리 없이 */
.lm-filter__price{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.lm-filter__price .lm-input{ text-align:center; }
.lm-filter__price span{ color:var(--lm-muted); }

/* --- 인기검색어 .lm-popkw : 검색결과 상단 가로스크롤 행("인기검색어" 볼드 + muted 키워드) --- */
.lm-popkw{ display:flex; align-items:center; gap:14px; padding:14px 16px; margin:0 0 8px;
    border-bottom:1px solid var(--lm-line); border-top:1px solid var(--lm-line); overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; font-size:0.95em; }
.lm-popkw::-webkit-scrollbar{ display:none; }
.lm-popkw__label{ flex:0 0 auto; font-weight:600; color:var(--lm-text); }
.lm-popkw__list{ display:flex; align-items:center; gap:14px; }
.lm-popkw__list a{ flex:0 0 auto; color:var(--lm-muted-2); white-space:nowrap; }

/* --- 빈 상태 .lm-empty : 리스트 결과 없음(검색 결과 없음 등). 재사용 --- */
.lm-empty{ width:100%; padding:60px 20px; text-align:center; color:var(--lm-muted); }
.lm-empty__icon{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
    background:var(--lm-surface); display:flex; align-items:center; justify-content:center;
    color:var(--lm-muted); font-size:2.13em; font-weight:700; line-height:1; }  /* 부드러운 원 + 느낌표 */
.lm-empty span{ display:block; font-weight:500; font-size:1.2em; color:var(--lm-text); margin-bottom:4px; }
.lm-empty small{ font-size:0.867em; color:var(--lm-muted); }

/* --- 빈상태(CTA형) .lm-emptybox : 문구 + 둘러보기 버튼. 마이페이지용(=search .lm-empty 와 별개) --- */
.lm-emptybox{ display:flex; flex-direction:column; align-items:center; gap:20px; padding:60px 20px; text-align:center; }
.lm-emptybox span{ font-size:0.95em; color:var(--lm-text-2); }

/* --- 추천 슬라이더 .lm-recommend / .lm-hscroll : 가로스크롤 상품 슬라이드(lm-product-card 재사용).
   빈상태 아래 베스트 노출 등. 옆 카드 살짝 보이게 peek(42%). --- */
.lm-recommend{ border-top:10px solid var(--lm-surface); padding-top:20px; }
.lm-recommend__title{ padding:0 16px 12px; font-weight:600; font-size:1.06em; color:var(--lm-text); }
.lm-hscroll{ display:flex; gap:14px; margin:0; padding:0 0 32px 16px; list-style:none;   /* 왼쪽만 16px, 오른쪽은 끝까지(peek) */
    scroll-padding-left:16px; overflow-x:auto; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none; }
.lm-hscroll::-webkit-scrollbar{ display:none; }
.lm-hscroll > li{ flex:0 0 42%; max-width:42%; min-width:0; scroll-snap-align:start; }

/* --- 브랜드 카드 .lm-brand-card : 아바타+이름+@멘션 / 소개 / 상품썸네일 줄 (마이 @BRAND) --- */
.lm-brand-list{ margin:0; padding:0; list-style:none; }
.lm-brand-card{ padding: 20px 16px; margin-top: 20px; }
.lm-brand-card__head{ display:flex; align-items:center; gap:10px; }
.lm-brand-card__id{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; color:var(--lm-text); }
.lm-brand-card__avatar{ flex:0 0 50px; width:50px; height:50px; border-radius:50%; border:1px solid var(--lm-line);
    background:var(--lm-muted-bg) center/cover no-repeat; }
.lm-brand-card__names{ display:flex; flex-direction:column; min-width:0; }
.lm-brand-card__name{ font-weight:600; font-size:1em; color:var(--lm-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lm-brand-card__name-en{ margin-top:4px; font-size:0.8em; font-weight:300; color:var(--lm-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing: 0.01em; }
.lm-brand-card__id i{ flex:0 0 auto; font-size:1.2em; color:var(--lm-muted); }
/* 하단 행: 브랜드샵 바로가기(flex 채움) + @멘션(검정 사각) */
.lm-brand-card__foot{ display:flex; gap:8px; margin-top:14px; }
.lm-brand-card__foot > .lm-btn{ flex:1; height: 39px;}
.lm-brand-card__mention{ flex:0 0 auto; width:38px; height:38px; border:0; border-radius:var(--lm-r-more); cursor:pointer;
    background:url(../../web/img/UI/icon_mention_w.svg) center no-repeat var(--lm-muted); background-size:16px; transition:background-color .15s; }
.lm-brand-card__mention.on{ background-color:var(--lm-text); }   /* 멘션됨=검정 / 해제=회색 토글 */
.lm-brand-card__intro{ margin:12px 2px 24px; font-size:0.95em; font-weight: 300; line-height:1.35; color:var(--lm-text-2);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; word-break: keep-all; }
.lm-brand-card__thumbs{ display:flex; gap:8px; margin:14px 0 0; padding:0; list-style:none;
    overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
.lm-brand-card__thumbs::-webkit-scrollbar{ display:none; }
.lm-brand-card__thumbs > li{ flex: 0 0 calc(25% - 6px);max-width: calc(25% - 6px); }
.lm-brand-card__thumbs img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
    border-radius:var(--lm-r-card); background:var(--lm-muted-bg); border:1px solid var(--lm-line); }

/* --- 인기 브랜드 쇼케이스 .lm-todaybrand / .lm-brandshow : 히어로+상품리스트 가로 캐러셀(멘션 빈상태) --- */
.lm-todaybrand{ border-top:10px solid var(--lm-surface); padding:20px 0 8px; }
.lm-todaybrand__title{ padding:0 16px 14px; font-weight:600; font-size:1.06em; color:var(--lm-text); }
.lm-todaybrand__scroll{ display:flex; gap:14px; overflow-x:auto; padding:0 16px 24px 16px;   /* 왼쪽만 16px, 오른쪽 끝까지(peek) */
    scroll-padding-left:16px; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none; }
.lm-todaybrand__scroll::-webkit-scrollbar{ display:none; }
.lm-brandshow{ flex:0 0 88%; max-width:88%; scroll-snap-align:start; }
.lm-brandshow__hero{ position:relative; display:block; aspect-ratio:16/10; border-radius:var(--lm-r-card);
    overflow:hidden; background:var(--lm-muted-bg) center/cover no-repeat; }
.lm-brandshow__hero::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 48%); }
.lm-brandshow__hero-info{ position:absolute; top:0; left:0; right:0; z-index:1; padding:16px; color:#fff; }
.lm-brandshow__hero-name{ font-weight:600; font-size:1.06em; }
.lm-brandshow__hero-desc{ margin-top:4px; font-size:0.85em; font-weight:300; line-height:1.4; opacity:.92;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lm-brandshow__items{ margin:0; padding:0; list-style:none; }
.lm-brandshow__items > li{ display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid var(--lm-line); }
.lm-brandshow__thumb{ flex:0 0 60px; width:60px; height:60px; border-radius:var(--lm-r-more); overflow:hidden;
    background:var(--lm-muted-bg); border:1px solid var(--lm-line); }
.lm-brandshow__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.lm-brandshow__meta{ flex:1; min-width:0; }
.lm-brandshow__brand{ display:inline-flex; align-items:center; font-size:0.8em; color:var(--lm-muted); }
.lm-brandshow__brand i{ font-size:1.2em; }
.lm-brandshow__name{ display:block; font-size:0.92em; color:var(--lm-text); margin:2px 0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lm-brandshow__price{ font-weight:600; font-size:0.95em; color:var(--lm-text); }
.lm-brandshow > .lm-btn{ margin-top:14px; }

/* =========================================================
   §4 페이지: search — 검색창(검색결과·검색시작 공유). 컴포넌트 아닌 페이지 스코프.
   style.css .search_top* (실렌더 active값) 1:1 복제 후 레거시 제거. 상단 고정 h60 바.
   ========================================================= */
.lm-searchbar{ position:fixed; top:0; width:100%; max-width:600px; height:60px; z-index:99;
    display:flex; align-items:center; justify-content:space-between; padding:0;
    background:var(--lm-bg); border-bottom:1px solid var(--lm-line); }
.lm-searchbar__back{ display:flex; align-items:center; justify-content:center; }
.lm-searchbar__back a{ display:block; width:50px; height:40px;
    background:url(../../web/img/UI/icon_back.svg) center no-repeat; background-size:25px !important; }
.lm-searchbar form{ display:flex; align-items:center; gap:2px; width:calc(100% - 50px); }
.lm-searchbar span{ font-size:0; font-weight:600; width:60px; height:24px;
    background:url(../../web/img/UI/logo_black_m.svg) left center no-repeat; background-size:60px; }  /* LIFE@ 로고 */
.lm-searchbar__field{ display:flex; align-items:flex-end; justify-content:space-between; width:calc(100% - 75px); }
.lm-searchbar__field input{ background:none; border:0; width:calc(100% - 60px); height:30px; padding:0 4px;
    font-size:1.25em; font-weight:500; }
.lm-searchbar__field button{ min-width:50px; height:30px; padding:0; font-size:0;
    display:flex; align-items:center; justify-content:center; color:var(--lm-text); }
.lm-searchbar__field button::before{ content:"\ebf7"; font-family:"boxicons"; font-size:24px; }

/* --- 검색시작 페이지 섹션들 (search-start) --- */
/* 섹션 제목 */
.lm-sechead{ padding:24px 16px 12px; margin-top:18px; font-weight:600; font-size:1.06em; color:var(--lm-text); border-top: 10px solid var(--grey50); }
.lm-sechead.none{ border: 0; margin-top: 0; }
.lm-sechead[hidden]{ display:none; }   /* --row(display:flex)가 UA [hidden]을 덮는 것 보정 */
/* 제목 우측 액션(전체삭제 등) */
.lm-sechead--row{ display:flex; align-items:center; justify-content:space-between; }
.lm-sechead__clear{ font-weight:400; font-size:0.8em; color:var(--lm-muted); background:none; border:0; cursor:pointer; }
/* 최근 검색어 — 삭제(×) 달린 칩 */
.lm-recent{ display:flex; flex-wrap:wrap; gap:8px; padding:0 16px; }
.lm-recent__chip{ display:inline-flex; align-items:center; height: 30px; padding: 0 6px 0 15px; background: var(--lm-surface);
  border-radius:var(--lm-r-pill); font-size:0.867em; color:var(--lm-text-2); }
.lm-recent__chip a{ color:inherit; }
.lm-recent__del{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:2px;
  border:0; background:none; color:var(--lm-muted); font-size:1.15em; line-height:1; cursor:pointer; }
/* 라이프 큐레이션 — 아이콘 칩 */
.lm-curation{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0 16px; list-style:none; }
.lm-curation a{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 15px 0 5px;
    border:1px solid var(--lm-line); border-radius:var(--lm-r-pill); color:var(--lm-text-2); font-size:0.867em; }
.lm-curation img{ width:26px; height:26px; border-radius:50%; border:1px solid var(--lm-line); object-fit:cover; }
/* 인기 검색어 — 2열 그리드(행순 1,2/3,4) + 순위 넘버 배지(상위3 브랜드색, 나머지 회색) */
.lm-poplist{ display:grid; grid-template-columns:1fr 1fr; gap:1px 16px; margin:0; padding:0 16px; list-style:none; counter-reset:pop; }
.lm-poplist li{ counter-increment:pop; min-width:0; }
.lm-poplist a{ display:flex; align-items:center; gap:8px; padding:8px 0; font-size:0.933em; color:var(--lm-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lm-poplist a::before{ content:counter(pop); flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; line-height: 20px; border-radius:4px; background:var(--lm-muted); color:#fff; font-size:0.8em; font-weight:600; }
.lm-poplist li:nth-child(-n+3) a::before{ background:var(--lm-brand); }   /* 상위 3위 = 브랜드색 */
/* 금주의 브랜드 — 가로 슬라이드(이미지 + 브랜드명/영문명) */
.lm-brandtop{ display:flex; gap:14px; margin:0; padding:0 0 32px 16px; list-style:none;  /* 왼쪽만 16px, 오른쪽 끝까지(peek) */
    overflow-x:auto; scroll-padding-left:16px; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none; }
.lm-brandtop::-webkit-scrollbar{ display:none; }
.lm-brandtop > li{ flex:0 0 28%; max-width:28%; scroll-snap-align:start; }   /* 3개 + 4번째 살짝(peek) */
.lm-brandtop__thumb{ aspect-ratio:4/4; border-radius:var(--lm-r-card); border:1px solid var(--lm-line);
    background:var(--lm-muted-bg) center/cover no-repeat; }
.lm-brandtop__name{ margin-top:10px; font-weight:600; font-size:0.95em; color:var(--lm-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lm-brandtop__name-en{ margin-top:2px; font-size:0.8em; color:var(--lm-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }