/* =========================================================
   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; }

/* =========================================================
   lm 팝업 .lm-popup — 타이틀/서브/혜택박스/각주/버튼2 (레퍼런스 구조 재해석).
   .modal_wrap 위에 얹어 modalShowById/modalClose(fadeIn/Out) 재사용. 버튼은 lm-btn 그대로.
   ========================================================= */
.lm-popup{ background:rgba(0,0,0,.45); }                                  /* 백드롭 딤(레거시 .modal_wrap엔 없던 것) */
.lm-popup .modal_body{
    min-width:0;
    width: min(380px, 88vw);
    border-radius:var(--lm-r-card);
    padding:30px 24px 24px;
    box-shadow:0 16px 44px rgba(0,0,0,.20);
    overflow:visible;
}
.lm-popup__close{
    position:absolute; top:14px; right:14px; width:28px; height:28px; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:none; border:0; color:var(--lm-muted); font-size:1.5em; line-height:1; cursor:pointer;
}
.lm-popup__title{font-size:1.2em;font-weight: 600;text-align:center;color:var(--lm-text);line-height:1.4;word-break:keep-all;}
.lm-popup__sub{margin-top: 12px;font-size: 0.95em;text-align:center;color: var(--lm-muted-2);line-height:1.5;word-break:keep-all;}
.lm-popup__box{
    margin-top:20px;
    padding:16px 18px;
    border-radius:var(--lm-r-input);
    background: var(--grey50);
    color:var(--lm-text-2);
    font-size: 0.95em;
    line-height:1.55;
    text-align:center;
    word-break:keep-all;
}
.lm-popup__foot{ margin-top:14px; font-size:0.78em; color:var(--lm-muted); line-height:1.55; word-break:keep-all; }
.lm-popup__actions{display:flex;gap:8px;margin-top: 24px;}
.lm-popup__actions > .lm-btn{flex:1;min-width:0;padding:0 16px;}

/* --- 전역 보정: .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; }
.lm-mypage .lm-grid{padding-top: 16px; }

/* =========================================================
   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__inner{ display:flex; align-items:center; gap:10px; height:60px; padding:4px 10px;
    overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;
    background:var(--lm-bg); }
.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; }
/* 브랜드샵만: 위에 list-head 타이틀이 구분 역할을 하므로 상단 라인 제거(검색 리스트는 기본값 유지) */
.lm-bshop .lm-listtop{ border-top:0; padding-top:0; }
.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;
    border-bottom: 1px solid var(--lm-line);
}
.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; }


/* =========================================================
   §4 페이지: 브랜드샵 (lm-bshop) — /@/{siteId}
   에디토리얼 단일 흐름: 상단 2열 → 탭(MAGAZINE/SHOP) → 앵글밴드·EDITOR'S NOTE·ONE MENTION·
   BRAND LETTER → 베스트·전체상품 → 하단 멘션 FAB(고정 오버레이). 스타일은 lm 토큰/스케일.
   레거시 훅(.btn_mention · #brand_coupon)은 클래스/ID 그대로 유지.
   ========================================================= */

/* 상단 2열 — 좌(180px 고정: 정사각 이미지) / 우(나머지: 브랜드명·소개·링크). 모바일(≤400px) 스택 */
.lm-bshop__top{ display:flex; gap:20px; align-items:flex-start; padding:10px 20px 40px; border-bottom:10px solid var(--grey50); }
.lm-bshop__aside{width: 180px;max-width: 30%;flex:none;}
.lm-bshop__thumb{ width:100%; padding-bottom: 100%; border-radius:8px; overflow:hidden; background:var(--lm-muted-bg) center/cover no-repeat; border: 1px solid var(--grey50); }
.lm-bshop__aside .lm-bshop__links{ margin-top:24px; }
.lm-bshop__main{ flex:1 1 0; min-width:0; }

/* 소개 — 우열. 5줄 clamp → 넘치면 더보기(JS로 노출) */
.lm-bshop__main .lm-bshop__eng{font-size:0.8em;letter-spacing:.02em;color:var(--lm-muted);word-break:break-word;margin-top: 4px;}
.lm-bshop__main .lm-bshop__name{margin-top: 4px;font-size: 1.6em;font-weight: bold;line-height:1.2;color:var(--lm-text);word-break:keep-all;}
.lm-bshop__main .lm-bshop__intro{padding: 12px 0 0;font-size: 0.95em;}
.lm-bshop__intro-txt{
    margin:0;
    line-height:1.5;
    color:var(--lm-text-2);
    word-break:keep-all;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 5;
    overflow:hidden;
}
.lm-bshop__intro.is-expanded .lm-bshop__intro-txt{ -webkit-line-clamp:unset; overflow:visible; }
.lm-bshop__more{ margin-top:10px; padding:0; background:none; border:0; cursor:pointer;
    font-size:0.86em; color:var(--lm-muted); border-radius: 0; border-bottom: 1px solid #c4c4c4; }
.lm-bshop__more[hidden]{ display:none; }

/* 모바일(≤400px): 2열 → 세로 스택, 이미지 전폭 정사각 */
@media (max-width:400px){
    .lm-bshop__top{ flex-direction:column; gap:0; }
    .lm-bshop__aside{ width:100%; max-width: 100%;}
    .lm-bshop__thumb{ width:100%; height:auto; aspect-ratio:1/1; }
    .lm-bshop__main{ width:100%; margin-top:22px; }
}
/* A1: 주소·인스타 텍스트 행 (아이콘 + 실제 값). 현재 템플릿에서 임시 비활성(HTML 주석). 공유는 헤더 플로팅 카카오위젯 */
.lm-bshop__links{ display:flex; align-items:flex-start; gap:6px; margin-top:18px; }
.lm-bshop__link{
    font-size:0.86em;
    color: var(--lm-muted-2);
    word-break:keep-all;
    display: flex;
    align-items: self-start;
    gap:2px;
    border: 1px solid var(--grey200);
    padding: 6px 12px 6px 10px;
    border-radius: 4px;
}
.lm-bshop__link i{ flex:none; font-size:1.2em; color:var(--lm-muted); }

/* 블록④: 브랜드 쿠폰 — 시안 coupon 카드(soft bg, 배지 브랜드색, 다운로드 장수) */
.lm-bshop__coupon{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin:20px; padding:16px 18px; cursor:pointer;
    border:1px solid var(--lm-line); border-radius:var(--lm-r-card); background:var(--lm-surface);
}
.lm-bshop__coupon-badge{ font-size:0.72em; font-weight:700; color:var(--lm-brand); }
.lm-bshop__coupon-d{ margin-top:4px; font-size:1.1em; font-weight:800; color:var(--lm-text); }
.lm-bshop__coupon-dl{ flex:0 0 auto; text-align:center; font-size:0.72em; color:var(--lm-text-2); }
.lm-bshop__coupon-dl i{ display:block; font-size:1.6em; }

/* 블록⑤: 탭(브랜드멘션/상품) — lm 네이티브. 기하·스티키까지 자립(style.css .brand_detail_tab 의존 제거).
   scrollNav/.fix/.on 훅은 lm.js가 .lm-bshop__tabs 로 처리 */
.lm-bshop__tabs{ height:46px; }
.lm-bshop__tabs ul{ display:flex; align-items:center; background:var(--lm-bg); border-bottom:1px solid var(--lm-line); }
.lm-bshop__tabs li{ width:50%; display:flex; align-items:center; justify-content:center; }
.lm-bshop__tabs li a{
    display:flex; align-items:center; justify-content:center; height:46px; width:100%;
    color:var(--lm-muted); font-weight:500; font-size:0.95em; border-bottom:2px solid transparent;
}
.lm-bshop__tabs li a.on{ color:var(--lm-text); border-color:var(--lm-text); }
/* 스크롤 시 헤더 아래 고정 (레거시 .brand_detail_tab.fix 이식) */
.lm-bshop__tabs.fix ul{ position:fixed; top:50px; width:100%; max-width:600px; z-index:99; }

/* #brand_mention ① 브랜드 앵글 밴드 — 탭 아래 최상단. 16px 좌우 여백 박스로 에디터노트 스택과 정렬. 클릭 시 앵글 필터 */
.lm-bshop__angleband{
    display:flex;
    align-items:center;
    gap:12px;
    margin: 0 16px 20px;
    padding:14px 16px;
    background:var(--lm-text);
    color:#fff;
    border-radius:var(--lm-r-more);
    text-decoration:none;
}
.lm-bshop__angleband:hover{ color: #fff; }
.lm-bshop__angleband-txt{ flex:1 1 auto; min-width:0; }
.lm-bshop__angleband b{display:block;font-weight: 700;letter-spacing:.04em;font-size: 1em;}
.lm-bshop__angleband-txt > span{display:block;margin-top:4px;color:rgba(255,255,255,.82);font-size: 0.9em;line-height:1.35;word-break:keep-all;}
.lm-bshop__angleband > i{ flex:none; font-size:1.5em; color:rgba(255,255,255,.55); }

/* #brand_mention ② EDITOR'S NOTE — lm 네이티브(라벨 + 제목 + 본문 + 키워드칩). 레거시 brand_content·itv 규칙은 전부 제거(dead) */
.lm-bshop__editor{padding: 28px 18px 20px;}
/* 라벨 바 */
.lm-bshop__editor-label{
    font-size: 0.85em;
    color: var(--lm-muted);
    word-break: break-word;
}
/* 제목(editorTitle) — 라벨 아래, 본문 위 헤드라인 */
.lm-bshop__editor-title{
    margin:0;
    padding: 4px 0 0;
    font-size: 1.35em;
    font-weight: 700;
    line-height:1.4;
    color:var(--lm-text);
    word-break:keep-all;
}
/* 본문 */
.lm-bshop__editor-body{
    margin:0;
    padding: 24px 0 0;
    white-space:break-spaces;
    word-break:keep-all;
    line-height: 1.45;
    color:var(--lm-text-2);
    opacity:.9;
    font-size: 0.95em;
    width: 90%;
}
.lm-bshop__editor-title + .lm-bshop__editor-body{padding-top: 20px;}
/* 키워드 칩 — 본문 아래(muted) */
.lm-bshop__editor-keys{display:flex;flex-wrap:wrap;gap:6px 10px;padding: 24px 0 0;}
.lm-bshop__editor-keys span{
    padding: 4px 8px;
    background: #0000000a;
    border-radius: 2px;
    font-size: 0.87em;
    opacity: 0.8;
    font-weight: 500;
    color: var(--grey600);
}

/* #brand_mention ③ 섹션 공통 헤더 (eyebrow + 큰 타이틀) — ONE MENTION / BRAND LETTER */
.lm-bshop__om, .lm-bshop__bl{padding: 0 16px;margin-top:40px;}
.lm-bshop__sec-eyebrow{font-size:0.8em;color:var(--lm-muted);word-break:keep-all;}
.lm-bshop__sec-title{margin-top:4px;font-size: 1.35em;font-weight:700;letter-spacing:.02em;color:var(--lm-text);}

/* ONE MENTION 배너 — 이미지 위 다크 그라디언트 + 버전·라벨·제목 오버레이 */
.lm-bshop__om-banner{
    display:block; position:relative; overflow:hidden; margin-top:16px;
    aspect-ratio:100/36; border-radius:var(--lm-r-card); text-decoration:none;
    background:var(--lm-muted-bg) center/cover no-repeat; color:#fff;
}
.lm-bshop__om-banner::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.06) 40%, rgba(0,0,0,.62)); }
.lm-bshop__om-ver{position:absolute;top: 24px;left: 25px;z-index:1;font-size: 0.92em;letter-spacing:.02em;opacity:.92;}
.lm-bshop__om-body{position:absolute;left: 25px;right: 20px;bottom: 30px;z-index:1;}
.lm-bshop__om-tit{font-size:1.35em;font-weight: 600;letter-spacing:.04em;word-break:keep-all;display: flex;flex-flow: column;gap: 3px;}

/* ONE MENTION 목차 — 목차명(좌) + 카테고리(우), 행 구분선 */
.lm-bshop__om-toc{ padding: 8px 0 24px; }
.lm-bshop__om-toc li{ border-bottom:1px solid var(--lm-line); }
.lm-bshop__om-toc a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding: 14px 6px;
    text-decoration:none;
}
.lm-bshop__om-toc-name{ font-size:0.95em; color:var(--lm-text); word-break:keep-all; }
.lm-bshop__om-toc-cat{flex:none;font-size: 0.8em;color:var(--lm-muted);font-weight: 500;text-transform: uppercase;opacity: 0.7;letter-spacing: 0.03em;}

/* BRAND LETTER — 편지 썸네일 카드 (배지는 썸네일 이미지에 포함되어 있어 별도 요소 없음) */
.lm-bshop__bl-item{
    display:block; position:relative; overflow:hidden; margin:16px 0 24px;
    aspect-ratio:100/80; border-radius:var(--lm-r-card);
    background:var(--lm-muted-bg) center/cover no-repeat; text-decoration:none;
}
.lm-bshop__bl-item + .lm-bshop__bl-item{ margin-top:12px; }

/* 블록⑧: 베스트 상품 — lm-hscroll 재사용 + 랭킹 뱃지(카드 위 좌상단) */
.lm-bshop__best-sec{ padding:0; }
/* SHOP/전체상품 섹션 헤더 — 매거진과 동일한 sec-eyebrow+sec-title 컴포넌트 사용. best는 10px 그레이 구분선 유지 */
.lm-bshop__best-head{padding: 40px 16px 16px;border-top: 10px solid var(--grey50);}
.lm-bshop__list-head{padding: 32px 16px 12px;}
.lm-bshop__best > li{ position:relative; }
.lm-bshop__rank{
    position:absolute; left:8px; top:8px; z-index:2; pointer-events:none;
    display:flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:6px;
    background:var(--lm-text); color:#fff; font-size:0.72em; font-weight:700;
}


/* §5 하단 고정 멘션 CTA (바 → 우하단 @ FAB) — .btn_mention 훅 재사용.
   우측 앵커 고정 + width만 애니메이션 → 바가 우측으로 접히며 FAB로(모바일·데스크탑 공통, 부드럽게).
   모바일 기본(뷰포트), 데스크탑은 프레임(600px) 우측 edge에 정렬. */
:root{ --lm-ease-emph:cubic-bezier(.4,0,.2,1); }
/* 멘션 FAB — 아이콘(원형) 기본, hover 시 우측 앵커 고정한 채 좌측으로 확장되며 "내 삶에 ○○ 멘션하기" 노출.
   버튼 width를 --mention-w(JS 실측)로 확장(라벨 flex-item max-width는 불안정) → 아이콘 좌측 고정, 라벨은 우측으로 드러남.
   흰 아이콘(icon_mention_w.svg)이라 배경은 다크(미멘션)/그린(멘션함). */
.lm-bshop__mentionwrap{ position:fixed; right:12px; bottom:70px; z-index:45; }
.lm-bshop__mentionwrap .btn_mention{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    box-sizing:border-box;
    height: 46px;
    width: 46px;
    padding:0;
    border:0;
    border-radius:26px;
    cursor:pointer;
    overflow:hidden;
    background:var(--lm-text);
    color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    transition:width .34s var(--lm-ease-emph), background-color .3s ease, box-shadow .3s ease;
}
/* hover 시 콘텐츠 폭(--mention-w, JS 계산)으로 확장. 우측 앵커라 좌측으로 늘어남 */
.lm-bshop__mentionwrap .btn_mention:hover{ width:var(--mention-w, 220px); }
.lm-bshop__mentionwrap .btn_mention.on{ background:var(--lm-brand); box-shadow:0 8px 24px rgba(23,185,109,.34); }
/* 아이콘 — 좌측 고정(order:0), 46px 원형 히트영역 */
.lm-bshop__mentionwrap .lm-bshop__mentionico{order:0;flex:none;width: 46px;height: 46px;padding:14px;box-sizing:border-box;object-fit:contain;}
/* 라벨 — 아이콘 우측(order:1). 버튼 overflow로 접힘, 레거시 flex+gap 무시하고 일반 텍스트 흐름 */
/* .at(LIFE @ N) — 화면엔 숨김이나 lm.js가 멘션 카운트를 읽고 갱신하는 데이터 소스라 유지 */
.lm-bshop__mentionwrap .btn_mention .label{
    order:1; flex:none; display:block; white-space:nowrap; padding-right:22px;
    font-size:0.95em; font-weight:600; line-height:1;
}
.lm-bshop__mentionwrap .btn_mention .at{ display:none; }
/* §5 세로 스택 — 브랜드샵에서만 공유·맨위로를 멘션 FAB 위로(겹침 방지). right는 기존(데스크탑 calc / 모바일 12px) 유지 */
.layout:has(.lm-bshop__mentionwrap) .info_sub_button{ bottom:132px; }
.layout:has(.lm-bshop__mentionwrap) .top_button.scroll_to_top{bottom:192px;}
/* 데스크탑(≥601px): 하단 바/FAB를 프레임(600px) 우측 edge에 정렬(공유·맨위로와 동일 앵커) */
@media (min-width:601px){
    .lm-bshop__mentionwrap{right: calc(50vw - 285px);max-width:572px;}
}

/* 최초 학습 툴팁 — 멘션 FAB 왼쪽 다크 버블(lm 톤, 이모지 없음), 오른쪽으로 꼬리.
   공유버튼(FAB 위 bottom:132)과 자리가 겹치지 않도록 FAB 옆에 배치 */
.lm-mtip{
    position:fixed; right:76px; bottom:72px; z-index:46; width:max-content; max-width:230px;
    padding:12px 14px; border-radius:12px; background:var(--lm-text); color:#fff;
    font-size:0.85em; line-height:1.5; word-break:keep-all; box-shadow:0 10px 28px rgba(0,0,0,.26);
    opacity:0; transform:translateX(6px); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.lm-mtip.is-on{ opacity:1; transform:translateX(0); pointer-events:auto; }
.lm-mtip::after{ content:""; position:absolute; right:-5px; top:50%; margin-top:-6px; width:11px; height:11px; background:var(--lm-text); transform:rotate(45deg); }
@media (min-width:601px){ .lm-mtip{ right:calc(50vw - 285px + 64px); } }
/* 공유 FAB: 콘텐츠 위로 확실히(다른 객체에 씹힘 방지) */
.layout:has(.lm-bshop__mentionwrap) .info_sub_button{ z-index:45; }

/* 브랜드 상세 페이지: 우측 레일(이 달의 브랜드) 숨김.
   레일이 페이지의 brandMention(현재 브랜드)을 잘못 재사용해 Editor's Note가 섞이는 누수 방지 + 단일흐름 집중. */
.layout:has(.lm-bshop) .lm-rail--right{ display:none; }