@charset "utf-8";

/* ============================================================
   혜택 (benefit.html)
   ------------------------------------------------------------
   누구나 보는 화면이다. 로그인 여부로 본문을 가르지 않는다 —
   내가 지금 받는 것은 마이페이지 크루멤버십이 맡고,
   여기는 '무엇을 드리는지'만 보여 준다.
   맨 아래 한 줄만 비회원·회원으로 갈린다.

   혜택을 종류로 나열하지 않고 쓰는 흐름을 따라 놓았다 —
   처음 오셨을 때 · 사실 때 · 받으신 후 · 함께하실 때.
   가입하라고 조르지 않는다. 무엇을 주는지 보이면 그것으로 족하다.

   · bf_ : 혜택 화면 공용
   색은 다른 화면과 같은 결이다(파랑 #1b43c8, 글자 #1b1b1b, 선 #eee).
   ============================================================ */

/* ===== 틀 ===== */
.bf_wrap {padding-bottom:clamp(56px,10vw,96px); background:#ffffff;}
.bf_inner {width:100%; max-width:1120px; margin:0 auto; padding:0 clamp(16px,4.4vw,24px); box-sizing:border-box;}
.bf_hide {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap;}
.bf_ph {display:block; width:100%; height:100%; border-radius:inherit; background:#f4f6fa;}

/* ===== 머리 ===== */
.bf_head {padding:clamp(30px,6.4vw,58px) 0 clamp(20px,4.4vw,32px);}
.bf_kicker {margin:0 0 clamp(8px,2vw,12px); color:#1b43c8; font-size:clamp(11px,1.9vw,13px); font-weight:700; letter-spacing:0.08em;}
.bf_lead {margin:0; color:#1b1b1b; font-size:clamp(22px,4.2vw,38px); font-weight:700; line-height:1.4; letter-spacing:-0.035em; word-break:keep-all;}
.bf_sub {margin:clamp(10px,2.4vw,16px) 0 0; color:#666666; font-size:clamp(14px,2.2vw,17px); font-weight:400; line-height:1.7; word-break:keep-all;}

/* ===== 한눈에 — 숫자 넷. 화면 밖으로 밀려 나가면 위에 붙는다 =====
   붙는 자리는 --bf-sticky-top 으로 둔다 — 실제 서비스에서 머리말이 고정되면 그 높이를 넣으면 된다 */
:root {--bf-sticky-top:0px;}
.bf_nums_mark {display:block; height:0; margin:0; padding:0;}
/* 붙어서 띠가 낮아지는 만큼 늘어나 문서 길이를 지킨다(높이는 스크립트가 준다).
   띠 「아래」 에 있어야 한다 — 위에 두면 감시 막대를 밀어내 되돌이(진동) 가 생긴다 */
.bf_nums_pad {display:block; height:0; margin:0; padding:0;}
/* 붙는 것은 이 띠다. bf_wrap 의 직접 자식이라 페이지 끝까지 붙어 있는다 —
   bf_inner 안에 두면 그 inner 가 끝나는 자리에서 붙음이 끊긴다 */
.bf_nums_bar {position:sticky; top:var(--bf-sticky-top); z-index:900;
              margin:clamp(20px,4.4vw,32px) 0 0;}
.bf_nums {display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0;
          border:1px solid #eceef3; border-radius:12px; background:#eceef3; overflow:hidden;
          transition:border-radius .15s, box-shadow .15s;}
/* 붙어 있는 동안 — 떠 있음을 그림자로 알리고 위쪽 모서리를 편다 */
.bf_nums_bar.is_stuck .bf_nums {border-radius:0 0 12px 12px; box-shadow:0 6px 18px rgba(20,30,60,.08);}
.bf_num {display:block; width:100%; margin:0; border:0; font:inherit; color:inherit;
          padding:clamp(18px,3.6vw,26px) clamp(10px,2.4vw,16px); background:#ffffff; text-align:center;}
/* 누르면 그 마디로 내려가는 칸 — 손이 가는 곳임을 옅게 알린다 */
.bf_num.is_go {cursor:pointer; transition:background .15s;}
.bf_num.is_go:hover, .bf_num.is_go:focus-visible {background:#fafbfd;}
.bf_num_n {display:block; color:#1b43c8; font-size:clamp(22px,4vw,32px); font-weight:700; letter-spacing:-0.035em; font-variant-numeric:tabular-nums;}
.bf_num_n em {font-style:normal; font-size:0.62em; font-weight:700; letter-spacing:-0.02em;}
.bf_num_l {display:block; margin-top:6px; color:#8a8f98; font-size:clamp(11px,1.9vw,13px); font-weight:400; line-height:1.5; word-break:keep-all;}

/* ===== 흐름 한 마디 ===== */
/* 차례 줄이 앉을 자리 — 모양은 위 '탭 줄' 에서 함께 정한다 */

/* ===== 마디(섹션) ===== */
.bf_sec {padding:clamp(50px,6vw,80px) 0 0;}
.bf_sec_h {display:flex; align-items:baseline; gap:clamp(8px,2vw,12px); margin:0 0 10px;}
.bf_sec_n {flex:0 0 auto; color:#1b43c8; font-size:clamp(12px,2vw,14px); font-weight:700; font-variant-numeric:tabular-nums;}
.bf_sec_t {margin:0; color:#1b1b1b; font-size:clamp(18px,3.2vw,26px); font-weight:700; line-height:1.4; letter-spacing:-0.03em; word-break:keep-all;}
.bf_sec_d {margin:0 0 0 auto; color:#666666; font-size:clamp(11px,2vw,14px); font-weight:300; word-break:keep-all;}

/* ===== 혜택 카드 ===== */
.bf_cards {display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2.4vw,20px); margin:0; padding:0; list-style:none;}
/* 아이콘은 왼쪽에 두고 그 옆 두 줄에 제목ㆍ값을 앉힌다. 설명과 주석은 아래 폭을 다 쓴다.
   값이 없는 카드도 있으므로 빈 칸이 자리를 먹지 않게 행 높이는 내용에 맡긴다 */
.bf_card {display:grid; grid-template-columns:auto minmax(0,1fr);
          grid-template-areas:"ico tit" "ico val" "des des" "not not";
          align-content:start; column-gap:clamp(11px,2.4vw,15px);
          min-width:0; padding:clamp(18px,3.6vw,26px);
          border:1px solid #eceef3; border-radius:12px; background:#ffffff; box-sizing:border-box;}
/* 강조는 아이콘 하나로만 한다 — 배경을 깔면 단추처럼 보인다 */
.bf_card_i {grid-area:ico; align-self:start;
            display:inline-flex; align-items:center; justify-content:center; width:clamp(38px,8vw,44px); height:clamp(38px,8vw,44px);
            border-radius:8px; background:#eef2fd; color:#1b43c8;}
.bf_card.is_key .bf_card_i {background:#1b43c8; color:#ffffff;}
.bf_card_t {grid-area:tit; align-self:center; margin:0; color:#1b1b1b; font-size:clamp(12px,2.5vw,14px); font-weight:700; line-height:1.45; letter-spacing:-0.025em; word-break:keep-all;}
.bf_card_v {grid-area:val; display:block; margin-top:clamp(3px,0.8vw,5px); color:#1b43c8; font-size:clamp(17px,3vw,23px); font-weight:700; letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}
.bf_card_v em {font-style:normal; font-size:0.66em;}
.bf_card_d {grid-area:des; margin:clamp(10px,2.2vw,14px) 0 0; color:#666666; font-size:clamp(12.5px,2.1vw,14.5px); font-weight:400; line-height:1.7; word-break:keep-all;}
.bf_card_n {grid-area:not; margin:0; padding-top:clamp(10px,2.2vw,14px); color:#a0a4ac; font-size:clamp(11px,1.9vw,12.5px); font-weight:400; line-height:1.6; word-break:keep-all;}

/* 넓게 쓰는 카드 — 견주어 보여 줄 것이 들어가면 한 줄을 통째로 쓴다 */
.bf_card.is_wide {grid-column:span 2;}
.bf_card.is_full {grid-column:1 / -1;}
/* 카드가 둘인 마디 — 3열에 두 장만 놓으면 오른쪽이 빈다 */
/* 기준 줄의 (?) — 등급이 정해지는 방법을 연다 */
/* 등급 선정 기준 보기 — 마디 설명 자리에 앉는 링크꼴 버튼. 눌러 팝업을 연다 */
.btn_bf_crit {display:inline-block; margin:0 0 0 auto; padding:0; border:0; background:none;
              color:#1b43c8; font-family:inherit; font-size:clamp(12px,2vw,14px); font-weight:500;
              line-height:1.5; text-align:right; cursor:pointer;
              text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
              transition:color .15s;}
.btn_bf_crit:hover, .btn_bf_crit:focus-visible {color:#12309a;}

/* 등급이 정해지는 방법 팝업 — 시트 규칙을 wl_sheet 와 함께 쓴다 */
.bf_sheet {display:none; position:fixed; inset:0; z-index:1100; align-items:center; justify-content:center;
           padding:20px; box-sizing:border-box; background:rgba(17,17,17,.5);}
.bf_sheet.is_open {display:flex;}
/* hidden 은 작성자 CSS 의 display 에 덮인다 — 함께 걸어 두어야 확실히 감춰진다 */
.bf_sheet[hidden] {display:none;}
.bf_sheet_in {position:relative; display:flex; flex-direction:column;
              width:100%; max-width:560px; max-height:90vh; overflow:hidden;
              padding:20px 22px 24px; border-radius:20px; box-sizing:border-box; background:#ffffff;
              transform:translateY(24px); opacity:0;
              transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .24s ease;}
.bf_sheet.is_shown .bf_sheet_in {transform:translateY(0); opacity:1;}
.bf_sheet_handle {position:relative; flex:0 0 auto; display:block; width:100%; height:22px; margin:0 0 6px;
                  padding:0; border:0; background:transparent; cursor:grab; touch-action:none;}
.bf_sheet_handle:active {cursor:grabbing;}
.bf_sheet_handle:before {content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
                         width:44px; height:4px; border-radius:2px; background:#e3e6ec;}
.bf_sheet_t {flex:0 0 auto; margin:0; color:#1b1b1b; font-size:clamp(16px,2.6vw,19px); font-weight:700; line-height:1.35;
             letter-spacing:-0.025em;}
.bf_sheet_scroll {flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
                  margin-right:-6px; padding-right:6px;}
.bf_sheet_when {margin:clamp(8px,1.8vw,11px) 0 0; color:#666666;
                font-size:clamp(12.5px,2vw,14px); line-height:1.6; word-break:keep-all;}
.bf_help_sum {margin:clamp(14px,3vw,18px) 0 0; padding:clamp(11px,2.4vw,14px);
              border-radius:10px; background:#eef2fd; color:#1b43c8; text-align:center;
              font-size:clamp(12.5px,2vw,14px); font-weight:700; letter-spacing:-0.02em; word-break:keep-all;}
.bf_help_dl {margin:clamp(11px,2.4vw,14px) 0 0; padding:clamp(14px,3vw,18px);
             border-radius:12px; background:#f7f8fa;}
/* 제목ㆍ단위ㆍ설명이 세 줄로 앉는다 — 단위가 길어 한 줄에 붙이면 제목이 밀린다 */
.bf_help_dl dt {margin:0; color:#1b1b1b; font-size:clamp(12.5px,2vw,14px); font-weight:700;}
.bf_help_dl dt em {display:block; margin-top:3px; font-style:normal; color:#1b43c8;
                   font-size:0.96em; font-weight:700; letter-spacing:-0.02em;
                   font-variant-numeric:tabular-nums; word-break:keep-all;}
.bf_help_dl dd {margin:4px 0 0; color:#666666; font-size:clamp(12px,1.9vw,13.5px);
                line-height:1.6; word-break:keep-all;}
.bf_help_dl dd + dt {margin-top:clamp(11px,2.4vw,14px);}
/* 표가 좁은 폭에서 넘치면 이 상자 안에서만 옆으로 민다 */
.bf_help_tw {margin:clamp(16px,3.4vw,22px) 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.bf_help_tbl {min-width:480px;}
.bf_help_tbl .is_lv {width:52px;}
.bf_help_notes {margin:clamp(14px,3vw,18px) 0 0; padding:0 0 0 1.05em; list-style:none;}
.bf_help_notes li {position:relative; margin:5px 0 0; color:#8a8f98;
                   font-size:clamp(11.5px,1.9vw,12.5px); line-height:1.6; word-break:keep-all;}
.bf_help_notes li:before {content:'·'; position:absolute; left:-0.85em;}
.bf_sheet_btns {flex:0 0 auto; margin-top:clamp(16px,3.4vw,22px);}
.btn_bf_close {width:100%; height:clamp(48px,12vw,52px); border:0; border-radius:10px; box-sizing:border-box;
               background:#1b43c8; color:#ffffff; font-family:inherit;
               font-size:clamp(14px,2.4vw,16px); font-weight:700; cursor:pointer;}
body.bf_open {overflow:hidden;}
/* ① 레벨 고르기 — 칩을 눌러 그 레벨이 받는 것을 본다. 일곱 개라 좁은 폭에서는 옆으로 민다 */
.bf_lv {margin:0 0 clamp(14px,2.6vw,20px);}
.bf_lv_tabs {display:flex; align-items:flex-end; justify-content:center; gap:clamp(4px,1.2vw,8px);
             padding-top:15px; overflow-x:auto;
             -webkit-overflow-scrolling:touch; scrollbar-width:none;}
/* 칩이 화면보다 넓어지면 가운데 정렬이 왼쪽 끝을 잘라 먹는다 — safe 가 그때만 왼쪽으로 되돌린다 */
.bf_lv_tabs {justify-content:safe center;}
.bf_lv_tabs::-webkit-scrollbar {display:none;}
.btn_bf_lv {position:relative; display:inline-flex; align-items:center; justify-content:center;
            flex:0 0 auto; min-width:clamp(44px,10.5vw,66px); height:30px; padding:0 clamp(7px,1.6vw,14px);
            border:0; border-radius:4px 4px 0 0; background:#f1f2f4; color:#9aa0a8;
            font-size:clamp(10px,2vw,14px); font-weight:700; line-height:1; cursor:pointer;
            transition:background .15s, color .15s;}
/* 레벨이 오를수록 칩이 높아진다 — 바닥을 맞춰 두었으므로 계단처럼 올라간다 */
.bf_lv_tabs .btn_bf_lv:nth-child(2) {height:37px;}
.bf_lv_tabs .btn_bf_lv:nth-child(3) {height:43px;}
.bf_lv_tabs .btn_bf_lv:nth-child(4) {height:50px;}
.bf_lv_tabs .btn_bf_lv:nth-child(5) {height:57px;}
.bf_lv_tabs .btn_bf_lv:nth-child(6) {height:63px;}
.bf_lv_tabs .btn_bf_lv:nth-child(7) {height:70px;}
.btn_bf_lv.is_on {background:#1b43c8; color:#ffffff;}
/* 이번 달 내 등급 — 칩 머리 위에 얹는다. 고른 칩이 아니라 내 등급을 알리는 표시라 자리를 옮기지 않는다 */
.bf_lv_mine {position:absolute; left:50%; top:-12px; transform:translateX(-50%);
             padding:1px 6px; border:1px solid #1b43c8; border-radius:9px;
             background:#ffffff; color:#1b43c8;
             font-size:9.5px; font-weight:700; font-style:normal; line-height:1.5; letter-spacing:-0.02em;
             white-space:nowrap; pointer-events:none;}
.bf_lv_cond {margin:clamp(9px,1.8vw,12px) 0 0; color:#8a8f98; text-align:center;
             font-size:clamp(12px,2vw,13.5px); line-height:1.5; word-break:keep-all;}
.bf_cards.is_two {grid-template-columns:repeat(2,1fr);}
.bf_cards.is_four {grid-template-columns:repeat(4,1fr);}


/* ===== 견주기 표(적립률) ===== */

/* ===== 알려드립니다 — 박스를 벗겼다.
   회색 박스는 위 혜택 카드ㆍ띠와 무게가 같아 유의사항이 또 하나의 혜택 덩이처럼 읽혔다.
   위쪽 실선 한 줄로만 갈라 놓는다 ===== */
.bf_note {margin-top:clamp(36px,7vw,60px); padding:clamp(20px,4.4vw,30px) 0 0;
          border-top:1px solid #eceef3;}
.bf_note_t {margin:0 0 clamp(12px,2.6vw,16px); color:#1b1b1b; font-size:clamp(14px,2.3vw,16px); font-weight:700; letter-spacing:-0.02em;}
/* 제목 안에서 달처럼 바뀌는 조각만 파랗게 */
.bf_note_em {font-style:normal; color:#1b43c8;}
.bf_note_l {display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(8px,1.8vw,12px) clamp(16px,3.4vw,28px); margin:0; padding:0; list-style:none;}
.bf_note_l li {position:relative; padding-left:12px; color:#8a8f98; font-size:clamp(11px,2vw,13px); font-weight:300; line-height:1.4; word-break:keep-all;}
.bf_note_l li::before {content:''; position:absolute; left:0; top:0.62em; width:3px; height:3px; border-radius:50%; background:#c9cdd4;}

/* 마디 끝에 서는 버튼 — ① 가입 길(비회원에게만) 과 ②ㆍ③ 이동 버튼이 같은 꼴이다.
   한 규칙으로 묶어 둔다 — 따로 두면 나중에 한쪽만 고쳐져 어긋난다 */
.bf_join_cta,
.bf_go {display:flex; justify-content:center; margin-top:clamp(20px,4vw,30px);}
.bf_join_cta[hidden],
.bf_go[hidden] {display:none;}
.bf_join_cta_go,
.bf_go_a {display:inline-flex; align-items:center; justify-content:center;
          min-width:clamp(180px,36vw,350px); height:clamp(52px,9.6vw,60px); padding:0 clamp(24px,5vw,36px);
          border:0; border-radius:4px; background:#1b43c8; color:#ffffff;
          font-family:inherit; font-size:clamp(14px,2.3vw,16px); font-weight:700; letter-spacing:-0.02em;
          white-space:nowrap; text-decoration:none; cursor:pointer; transition:background .15s;}
.bf_join_cta_go:hover, .bf_join_cta_go:focus-visible,
.bf_go_a:hover, .bf_go_a:focus-visible {background:#12309a;}

/* ===== 신규 크루 혜택 띠 — 위 마디들과 바탕색으로 갈린다. 비로그인일 때만 보인다 ===== */
.bf_guest {margin-top:clamp(50px,6vw,80px); padding:0 0 clamp(44px,8vw,72px);
           border-top:1px solid #eceef3; border-bottom:1px solid #eceef3; background:#f4f6fa;}
.bf_guest[hidden] {display:none;}
/* 띠 안에서는 첫 마디의 윗여백을 띠가 대신 갖는다 */
.bf_guest .bf_sec {padding-top:clamp(44px,5.4vw,70px);}
/* 띠가 이미 회색이므로 가입 자리는 흰 바탕으로 띄운다.
   카드 바로 아래에 낮게 붙인다 — 담당자 지적대로 비중을 줄였다 */
.bf_guest .bf_end {margin-top:clamp(16px,3.2vw,24px); padding:clamp(18px,3.4vw,26px) clamp(18px,4vw,30px);
                   background:#ffffff;}
.bf_guest .bf_end_t {font-size:clamp(16px,2.6vw,20px);}
.bf_guest .bf_end_d {margin-top:clamp(4px,1vw,7px);}

/* ===== 맨 아래 한 줄 — 여기만 비회원·회원이 갈린다 ===== */
.bf_end {margin-top:clamp(40px,8vw,72px); padding:clamp(26px,5.4vw,44px) clamp(20px,4.4vw,36px);
         border:1px solid #e6e9ef; border-radius:20px; background:#fbfcfe;
         display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3.4vw,28px); flex-wrap:wrap;}
.bf_end_x {flex:1 1 320px; min-width:0;}
.bf_end_t {margin:0; color:#1b1b1b; font-size:clamp(17px,3vw,23px); font-weight:700; line-height:1.45; letter-spacing:-0.03em; word-break:keep-all;}
.bf_end_d {margin:clamp(6px,1.6vw,10px) 0 0; color:#8a8f98; font-size:clamp(12px,2.1vw,15px); font-weight:400; line-height:1.65; word-break:keep-all;}
.bf_end_go {flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px;
            height:clamp(48px,9.6vw,54px); padding:0 clamp(20px,4.4vw,30px); border:0; border-radius:27px;
            background:#1b43c8; color:#ffffff; font-family:inherit; font-size:clamp(14px,2.3vw,16px); font-weight:700;
            letter-spacing:-0.02em; white-space:nowrap; text-decoration:none; cursor:pointer;}
.bf_end_go:hover {background:#12309a;}
.bf_end_go.is_quiet {background:#ffffff; color:#1b1b1b; border:1px solid #dcdfe5;}
.bf_end_go.is_quiet:hover {background:#ffffff; border-color:#1b1b1b;}


/* ===== 표 — 등급 설명 팝업의 레벨별 표에서 쓴다 ===== */
.bf_tbl {width:100%; margin-top:clamp(12px,2.6vw,18px); border-collapse:separate; border-spacing:0;
         border:1px solid #eceef3; border-radius:14px; overflow:hidden; background:#ffffff;}
.bf_tbl th, .bf_tbl td {padding:clamp(11px,2.4vw,15px) clamp(10px,2.4vw,16px); text-align:left;
                        font-size:clamp(12.5px,2.1vw,14.5px); line-height:1.55; word-break:keep-all;}
.bf_tbl thead th {background:#fafbfc; color:#8a8f98; font-size:clamp(11px,1.9vw,12.5px); font-weight:600; white-space:nowrap;}
.bf_tbl tbody tr + tr th, .bf_tbl tbody tr + tr td {border-top:1px solid #f1f3f6;}
.bf_tbl tbody th {color:#1b1b1b; font-weight:700; white-space:nowrap;}
.bf_tbl td {color:#666666;}
.bf_tbl .is_v {color:#1b43c8; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}
.bf_tbl .is_when {color:#a0a4ac; font-size:clamp(11px,1.9vw,12.5px); white-space:nowrap;}

/* 사은품 단계 — 얼마부터 무엇이 오는지 */
.bf_gifts {display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,2.2vw,14px); margin-top:clamp(12px,2.6vw,18px);}
.bf_gift {padding:clamp(14px,3vw,20px); border:1px solid #eceef3; border-radius:14px; background:#ffffff;}
.bf_gift_n {display:block; color:#1b43c8; font-size:clamp(15px,2.6vw,19px); font-weight:700; letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}
.bf_gift_d {display:block; margin-top:clamp(6px,1.6vw,9px); color:#1b1b1b; font-size:clamp(12.5px,2.1vw,14px); font-weight:500; line-height:1.6; word-break:keep-all;}
/* 사은품 사진 자리 — 제품컷이 450×540 세로라 정사각으로 담는다(전에는 16/10 이라 좌우가 크게 비었다) */
.bf_gift_p {display:block; margin-top:clamp(8px,1.8vw,11px); width:100%; aspect-ratio:1/1; border-radius:8px; overflow:hidden;
            background:#ffffff;}
/* 사은품 사진 — 제품컷이라 잘리지 않게 담는다(contain) */
.bf_gift_p img {display:block; width:100%; height:100%; object-fit:contain; scale:0.8;}

/* -------------------- tablet -------------------- */
@media all and (max-width:1024px) {
    .bf_cards {grid-template-columns:repeat(2,1fr);}
    /* 넷을 이 폭에 넣으면 칸이 170px 로 눌려 「배송비 0원」 이 세 줄로 깨진다 */
    .bf_cards.is_four {grid-template-columns:repeat(2,1fr);}
    .bf_card.is_wide {grid-column:span 2;}
}

/* -------------------- mobile -------------------- */
@media all and (max-width:767px) {
    .bf_nums {grid-template-columns:repeat(2,1fr);}
    /* 위에 붙어 있는 동안만 — 두 줄로 자리를 먹지 않게 한 줄로 눌러 앉히고 화면 끝까지 넓힌다.
       띠가 이미 화면 폭이므로 안쪽 여백만 걷으면 된다(음수 마진이 필요 없다) */
    .bf_nums_bar.is_stuck .bf_inner {padding-left:0; padding-right:0;}
    .bf_nums_bar.is_stuck .bf_nums {grid-template-columns:repeat(4,1fr);
                                    border-width:0 0 1px; border-radius:0;
                                    box-shadow:0 4px 14px rgba(20,30,60,.10);}
    .bf_nums_bar.is_stuck .bf_num {padding:clamp(8px,2.2vw,11px) clamp(3px,1vw,6px);}
    .bf_nums_bar.is_stuck .bf_num_n {font-size:clamp(12.5px,3.2vw,15px); letter-spacing:-0.045em;}
    /* 설명 줄은 붙는 동안 감춘다 — 높이의 절반이 이 줄이다 */
    .bf_nums_bar.is_stuck .bf_num_l {display:none;}
    /* 모바일은 어느 마디든 한 줄에 하나다 — 둘씩 놓으면 값ㆍ설명이 두 줄로 깨진다(담당자 지시) */
    .bf_cards,
    .bf_cards.is_two,
    .bf_cards.is_four {grid-template-columns:1fr;}
    .bf_card.is_wide {grid-column:span 1;}
    .bf_card.is_full {grid-column:span 1;}
    .bf_note_l {grid-template-columns:1fr;}
    .bf_gifts {grid-template-columns:1fr;}
    /* 등급 설명 팝업 — 제품 상세의 구매 시트와 같은 결로 아래에 붙인다 */
    .bf_sheet {align-items:flex-end; padding:0;}
    .bf_sheet_in {max-width:none; max-height:88vh;
                  padding:18px 18px calc(20px + env(safe-area-inset-bottom));
                  border-radius:20px 20px 0 0; transform:translateY(100%); opacity:1;}
    .bf_sheet.is_shown .bf_sheet_in {transform:translateY(0);}
    /* 마디 설명ㆍ[등급 선정 기준 보기] 는 모바일에서도 제목과 같은 줄 오른쪽에 둔다(담당자 지시).
       전체 폭을 주지 않으므로 자리가 정말 부족할 때만 wrap 으로 내려간다 */
    .bf_sec_h {flex-wrap:wrap;}
    .bf_sec_d,
    .btn_bf_crit {margin-left:auto; width:auto; text-align:right;}
    /* 세로로 쌓이면 글도 가운데로 — 버튼이 전체 폭이라 왼쪽에 붙은 글만 어긋나 보인다(담당자 지시) */
    .bf_end {flex-direction:column; align-items:stretch; text-align:center;}
    /* 세로로 쌓일 때 flex-basis 320px 이 높이가 되어 띠가 400px 넘게 부풀던 것을 막는다 */
    .bf_end_x {flex:0 0 auto;}
    .bf_end_go {width:100%;}
    .bf_join_cta {align-items:stretch;}
    .bf_join_cta_go,
    .bf_go_a {width:100%;}
}

/* ============================================================
   관심상품 (common_04concern.html)
   ------------------------------------------------------------
   세 갈래를 탭으로 둔다: 최근 본 상품 · 자주 산 상품 · 피부 맞춤 상품.
   탭은 늘 세 개가 보이고, 못 보여 드릴 때만 판 안에서 까닭을 말한다 —
   그래서 판 하나가 뼈대(불러오는 중) · 목록 · 안내 세 자리를 갖는다.
   개발에서 조회를 붙일 때 응답 전·후·빈 응답을 어디에 놓을지 헷갈리지 않게 하려는 것이다.

   · wl_ : 관심상품 화면 공용
   격자는 스토어 목록과 같은 결이다 — 모바일 2열 · 태블릿 3열 · PC 4열.
   ============================================================ */

/* ===== 틀 ===== */
.wl_wrap {padding-bottom:clamp(56px,10vw,96px); background:#ffffff;}
.wl_inner {width:100%; max-width:1120px; margin:0 auto; padding:0 clamp(16px,4.4vw,24px); box-sizing:border-box;}

/* ===== 머리 ===== */
.wl_head {padding:clamp(30px,6.4vw,58px) 0 clamp(16px,3.4vw,24px);}
.wl_kicker {margin:0 0 clamp(8px,2vw,12px); color:#1b43c8; font-size:clamp(11px,1.9vw,13px); font-weight:700; letter-spacing:0.08em;}
.wl_lead {margin:0; color:#1b1b1b; font-size:clamp(22px,4.2vw,38px); font-weight:700; line-height:1.4; letter-spacing:-0.035em; word-break:keep-all;}
.wl_sub {margin:clamp(10px,2.4vw,16px) 0 0; color:#666666; font-size:clamp(14px,2.2vw,17px); font-weight:400; line-height:1.7; word-break:keep-all;}

/* ===== 탭 줄 (관심상품 갈래 · 혜택 차례 공용) =====
   스크롤을 내려도 위에 붙어 있어 어디에 있든 갈래를 바꿀 수 있다.
   지금 보고 계신 것만 진하게 두고 밑줄로 짚는다.
   좁은 화면에서 항목이 넘치면 옆으로 밀어 볼 수 있게 둔다(줄바꿈하지 않는다) */
.wl_tabs {position:sticky; top:0; z-index:30;
    display:flex; align-items:stretch; gap:clamp(20px,2.5vw,35px); flex-wrap:nowrap;
    margin:0 calc(-1 * clamp(16px,4.4vw,24px));
    padding:0 clamp(16px,4.4vw,24px);
    background:#ffffff; border-bottom:1px solid #eeeeee;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    transition:box-shadow 0.16s linear;}
.wl_tabs::-webkit-scrollbar {display:none;}
/* 위에 붙는 순간에만 그림자를 준다 */
.wl_tabs.is_stuck {box-shadow:0 2px 10px rgba(16,24,40,0.05);}
/* 붙는 자리를 알아채려고 두는 눈금 — 보이지 않는다 */
.wl_tabs_a {display:block; width:1px; height:1px;}
.btn_wl_tab {position:relative; flex:0 0 auto; margin:0;
    padding:clamp(11px,2.4vw,16px) 0; border:0; background:transparent;
    color:#999999; font-family:inherit; font-size:clamp(13px,2.1vw,15px); font-weight:600;
    text-decoration:none; white-space:nowrap; cursor:pointer;}
.btn_wl_tab:after {content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent;}
.btn_wl_tab.is_on {color:#1b1b1b; font-weight:700;}
.btn_wl_tab.is_on:after {background:#1b1b1b;}
.btn_wl_tab:hover {color:#1b1b1b;}

/* ===== 판 ===== */
.wl_panel {padding:clamp(6px,1.6vw,10px) 0 0;}
.wl_panel:focus {outline:0;}

/* ===== 격자 ===== */
.wl_grid {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
          gap:clamp(22px,5vw,34px) clamp(10px,2.6vw,18px);
          margin:clamp(16px,4vw,24px) 0 0; padding:0; list-style:none;}
.wl_card {min-width:0;}
/* [hidden] 이 display 지정을 이기게 해 둔다 —
   격자는 display:grid 라 그냥 두면 hidden 이 먹지 않는다(판 셋을 번갈아 감추므로 꼭 필요하다) */
.wl_wrap [hidden] {display:none;}
.wl_card_th {position:relative; width:100%; aspect-ratio:1 / 1; border-radius:12px; background:#f4f5f7;}
.wl_th_link {display:block; width:100%; height:100%; border-radius:12px; overflow:hidden;}
.wl_th_link img {display:block; width:100%; height:100%; object-fit:cover;}
.wl_th_ph {display:block; width:100%; height:100%; border-radius:inherit;
           background:linear-gradient(135deg,#eef1f6 0%,#e4e9f2 52%,#eaedf4 100%);}
/* 몇 번 사셨는지 — 자주 산 상품에만 붙는다 */
.wl_card_cnt {position:absolute; top:clamp(7px,1.8vw,10px); left:clamp(7px,1.8vw,10px); z-index:2;
              display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:11px;
              background:rgba(27,27,27,.72); color:#ffffff; font-size:clamp(10.5px,1.7vw,11.5px); font-weight:600; white-space:nowrap;}
/* 담기 — 사진 오른쪽 아래에 둔다. 목록에서 하는 일은 이것 하나뿐이다 */
.wl_card_top {position:absolute; right:clamp(8px,2.2vw,12px); bottom:clamp(8px,2.2vw,12px); z-index:3;}
.btn_wl_add {width:clamp(32px,7vw,38px); height:clamp(32px,7vw,38px); padding:0; border:0; border-radius:50%;
             background:rgba(255,255,255,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231b1b1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 10.6h9.8l1.9-7.4H6.6'/%3E%3Ccircle cx='9.6' cy='19' r='1.4'/%3E%3Ccircle cx='16.6' cy='19' r='1.4'/%3E%3Cpath d='M17.6 3.4v4.2M15.5 5.5h4.2'/%3E%3C/svg%3E") no-repeat center / clamp(18px,3.8vw,21px);
             box-shadow:0 2px 8px rgba(20,30,60,.16); cursor:pointer;}
.btn_wl_add:active {transform:scale(.93);}

.wl_card_info {display:block; margin-top:clamp(9px,2.2vw,12px); text-decoration:none;}
/* 왜 골랐는지 한 줄 — 피부 맞춤에만 붙는다 */
.wl_card_why {display:block; color:#1b43c8; font-size:clamp(11px,1.8vw,12.5px); font-weight:600; line-height:1.4;}
/* 언제 받으셨는지 — 자주 산 상품에만. 사진 아래 첫 줄에 놓는다.
   상품의 평균 사용 기간이 구매확정일부터 지났으면 파랗게만 짚고,
   그 색이 무슨 뜻인지는 옆의 물음표가 대신 말한다. 조르지 않는다 */
.wl_card_whenrow {display:flex; align-items:center; gap:4px; min-width:0;
                  margin-top:clamp(9px,2.2vw,12px);}
.wl_card_whenrow + .wl_card_info {margin-top:2px;}
.wl_card_when {display:block; min-width:0; color:#8a8f98; font-size:clamp(11px,1.8vw,12.5px); font-weight:500;
               line-height:1.4; word-break:keep-all;}
.wl_card_when.is_due {color:#1b43c8; font-weight:600;}
/* 물음표 — 파란 표시가 무슨 뜻인지 묻는 자리. 때가 된 카드에만 붙는다 */
.btn_wl_why {flex:0 0 auto; box-sizing:border-box; width:15px; height:15px; padding:0;
             border:1px solid #c3d0f2; border-radius:50%;
             background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%231b43c8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.3 5.2a1.8 1.8 0 1 1 2.4 1.7c-.5.2-.7.6-.7 1.1v.3'/%3E%3Cpath d='M7 10.6h.01'/%3E%3C/svg%3E") no-repeat center / 13px;
             cursor:pointer;}
.btn_wl_why:active {transform:scale(.9);}
/* 보이는 크기는 작게 두고 손가락이 닿는 자리만 넓힌다 */
.btn_wl_why {position:relative;}
.btn_wl_why:before {content:''; position:absolute; top:-7px; right:-7px; bottom:-7px; left:-7px;}
.btn_wl_why:focus-visible {outline:2px solid #1b43c8; outline-offset:2px;}
/* 물음표를 눌렀을 때 뜨는 설명 — 상품 줄은 담기 시트의 .wl_goods_row 를 그대로 쓴다.
   그 줄에서 '며칠 전에 사셨는지'만 파랗게 짚는다 */
.wl_goods_qty.wl_why_when {color:#1b43c8; font-weight:600;}
.wl_card_name {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
               margin-top:clamp(3px,1vw,5px); color:#1b1b1b; font-size:clamp(14px,2.2vw,15.5px); font-weight:600;
               line-height:1.4; word-break:keep-all;}
.wl_card_price {margin:clamp(4px,1.2vw,6px) 0 0;}
.wl_amount {color:#1b1b1b; font-size:clamp(14px,2.3vw,16px); font-weight:700;}

/* ===== 뼈대(불러오는 중) =====
   자리를 미리 잡아 두면 목록이 들어올 때 화면이 튀지 않는다 */
.wl_skel {pointer-events:none;}
.wl_skel_card {min-width:0;}
.wl_skel_th {display:block; width:100%; aspect-ratio:1 / 1; border-radius:12px; background:#f1f2f4;}
.wl_skel_l {display:block; height:13px; margin-top:10px; border-radius:4px; background:#f1f2f4;}
.wl_skel_l.is_short {width:44%; margin-top:7px;}
.wl_skel_th, .wl_skel_l {animation:wl_pulse 1.3s ease-in-out infinite;}
@keyframes wl_pulse {0%,100% {opacity:1;} 50% {opacity:.55;}}

/* ===== 더 보기 =====
   한 번에 열 개씩 잇는다. 스토어 목록과 같은 결이다 */
.wl_more {margin-top:clamp(22px,5vw,32px); text-align:center;}
.btn_wl_more {width:100%; max-width:320px; height:clamp(50px,9vw,56px); border:1px solid #d7d3cf; border-radius:10px;
              background:#ffffff; color:#333333; font-family:inherit; font-size:clamp(14px,2.2vw,16px); font-weight:600; cursor:pointer;}
.btn_wl_more:hover {background:#f7f8fc;}
/* 끝까지 보셨을 때 한 줄 — 보여 드리는 수에 끝이 있는 갈래에만 뜬다 */
.wl_end {margin:clamp(18px,4vw,26px) 0 0; color:#aab1ba; font-size:clamp(11.5px,1.9vw,13px); font-weight:400; text-align:center;}

/* ===== 안내(로그인 필요 · 정보 없음 · 비어 있음 · 실패) ===== */
.wl_msg {padding:clamp(46px,12vw,88px) clamp(16px,4vw,24px) clamp(40px,10vw,72px); text-align:center;}
.wl_msg_i {display:block; width:clamp(40px,9vw,52px); height:clamp(40px,9vw,52px); margin:0 auto clamp(14px,3.2vw,20px);
           border-radius:50%; background:#f4f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aab1ba' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.2 5.2 0 0 0-7.4 0L12 6l-1.4-1.4a5.2 5.2 0 0 0-7.4 7.4L12 20.4l8.8-8.4a5.2 5.2 0 0 0 0-7.4z'/%3E%3C/svg%3E") no-repeat center / clamp(21px,4.6vw,26px);}
.wl_msg_t {margin:0; color:#1b1b1b; font-size:clamp(15px,2.6vw,19px); font-weight:700; line-height:1.45; word-break:keep-all;}
.wl_msg_d {margin:clamp(7px,1.8vw,10px) 0 0; color:#8a8f98; font-size:clamp(13px,2vw,15px); font-weight:400; line-height:1.65; word-break:keep-all;}
.btn_wl_go {display:inline-flex; align-items:center; justify-content:center; height:clamp(44px,10vw,48px);
            margin:clamp(18px,4.4vw,26px) 0 0; padding:0 clamp(20px,5vw,28px); border:0; border-radius:10px;
            background:#1b43c8; color:#ffffff; font-family:inherit; font-size:clamp(14px,2.3vw,15.5px); font-weight:700;
            text-decoration:none; white-space:nowrap; cursor:pointer;}
.btn_wl_go:hover {background:#12309a;}

/* ===== 장바구니 담기 시트 =====
   마이페이지의 단일상품 담기 시트와 같은 짜임·같은 눈금이다.
   그 화면들은 2.0_myPage.css 를 쓰지만 이 화면은 공용 CSS 만 쓰므로 여기 한 벌을 둔다 */
.wl_sheet {display:none; position:fixed; inset:0; z-index:1100; align-items:center; justify-content:center;
           padding:20px; box-sizing:border-box; background:rgba(17,17,17,.5);}
.wl_sheet.is_open {display:flex;}
.wl_sheet_in {position:relative; width:100%; max-width:460px; max-height:92vh; overflow-y:auto;
              padding:20px 25px 25px; border-radius:20px; box-sizing:border-box; background:#f4f4f2;
              transform:translateY(24px); opacity:0; transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .24s ease;}
.wl_sheet.is_shown .wl_sheet_in {transform:translateY(0); opacity:1;}
.wl_sheet_handle {position:relative; display:block; width:100%; height:22px; margin:0 0 6px;}
.wl_sheet_handle:before {content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
                         width:44px; height:4px; border-radius:2px; background:#d2d2cf;}
.wl_sheet_t {margin:0; color:#1b1b1b; font-size:clamp(16px,2.6vw,18px); font-weight:700; line-height:1.3;}
.wl_sheet_goods {margin-top:clamp(14px,3.4vw,18px);}
.wl_goods_row {display:flex; align-items:center; gap:clamp(10px,2.6vw,14px); padding:clamp(12px,3vw,15px);
               border-radius:12px; background:#ffffff;}
.wl_goods_th {flex:0 0 auto; width:clamp(48px,12vw,56px); height:clamp(48px,12vw,56px); border-radius:8px;
              background:#f1f2f4; overflow:hidden;}
.wl_goods_th img {display:block; width:100%; height:100%; object-fit:cover;}
.wl_goods_x {flex:1 1 auto; min-width:0;}
.wl_goods_name {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
                margin:0; color:#1b1b1b; font-size:clamp(13px,2.1vw,14.5px); font-weight:600; line-height:1.4; word-break:keep-all;}
.wl_goods_qty {margin:3px 0 0; color:#999999; font-size:clamp(11.5px,1.9vw,13px); font-weight:400;}
.wl_goods_price {flex:0 0 auto; margin:0; color:#1b1b1b; font-size:clamp(13px,2.1vw,15px); font-weight:700; white-space:nowrap;}
.wl_sheet_d {margin:8px 0 0; color:#999999; font-size:clamp(12px,1.9vw,13px); font-weight:300; line-height:1.55; word-break:keep-all;}
.wl_sheet_d em {font-style:normal; color:#666666; font-weight:600;}
.wl_sheet_btns {margin-top:clamp(18px,5vw,24px);}
.btn_wl_ok {width:100%; height:clamp(50px,13vw,54px); border:0; border-radius:10px; box-sizing:border-box;
            background:#1b43c8; color:#ffffff; font-family:inherit; font-size:clamp(14px,2.4vw,16px); font-weight:700; cursor:pointer;}
body.wl_open {overflow:hidden;}

/* ===== 토스트 ===== */
.wl_toast {position:fixed; left:50%; top:clamp(64px,15vw,76px); z-index:1500; max-width:calc(100% - 40px);
           padding:13px 18px; border-radius:12px; background:rgba(27,27,27,.92); box-shadow:0 6px 20px rgba(20,30,60,.18);
           transform:translate(-50%,-10px); opacity:0; visibility:hidden;
           transition:opacity .2s, transform .2s, visibility .2s; pointer-events:none;}
.wl_toast.is_show {transform:translate(-50%,0); opacity:1; visibility:visible;}
.wl_toast p {margin:0; color:#ffffff; font-size:clamp(13px,2vw,15px); font-weight:500; line-height:1.45; text-align:center; word-break:keep-all;}

/* 좁은 화면 — 규칙 정의보다 뒤에 두어야 이긴다 */
@media all and (max-width:1024px) {
  .wl_grid {grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media all and (max-width:767px) {
  .wl_grid {grid-template-columns:repeat(2, minmax(0, 1fr));}
}
/* 가장 좁은 화면에서만 '다시 필요할 때예요'가 두 줄로 접힌다.
   때가 된 카드만 한 줄 길어지면 옆 카드와 상품명 줄이 어긋나므로, 여기서는 두 줄 자리를 미리 잡아 둔다 */
@media all and (max-width:374px) {
  .wl_card_when {min-height:2.8em;}
}