/* 점주몰 샘플 — 공통 스타일
   포인트 컬러(--pc)만 몰마다 바뀐다. 탭 · 섹션 배경에는 포인트 컬러를 깔지 않는다. */
:root{
  --pc:#2F6FED; --pc-ink:#fff; --pc-soft:color-mix(in srgb,var(--pc) 10%,#fff);
  --ink:#191b1e; --ink2:#454a52; --muted:#7c838d; --line:#eceef1; --line2:#dfe2e6;
  --bg:#fff; --soft:#f6f7f9; --warm:#f8f4ee; --sale:#f0473c;
  --c1:#fff1e4; --c2:#e9f6ee; --c3:#edf1ff; --c4:#fdeff4; --c5:#fff7d6; --c6:#e8f4f9;
  --r:14px; --r-s:10px; --gut:20px; --frame:440px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:15px;line-height:1.5;color:var(--ink);background:#e7e9ec;word-break:keep-all;-webkit-font-smoothing:antialiased;letter-spacing:-.2px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--frame);margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:84px;overflow-x:hidden}
.wrap.no_tab{padding-bottom:0}
.wrap.has_fixed_btn{padding-bottom:104px}
.blind{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 샘플 표시 (영업용) */
.demo_pill{position:fixed;top:14px;left:14px;z-index:90;background:#191b1e;color:#fff;font-size:13px;font-weight:600;padding:8px 14px;border-radius:99px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
@media(max-width:520px){.demo_pill{display:none}}

/* ===== 헤더 ===== */
.header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid transparent}
.header_inner{height:56px;display:flex;align-items:center;gap:8px;padding:0 12px 0 var(--gut)}
.logo{font-weight:800;font-size:20px;letter-spacing:-.6px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo i{font-style:normal;color:var(--pc)}
.btn_icon{width:40px;height:40px;display:grid;place-items:center;border-radius:99px;position:relative}
.btn_icon svg{width:24px;height:24px}
.btn_icon .num{position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--pc);color:var(--pc-ink);font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
.header.type_color{background:var(--pc);color:var(--pc-ink)}
.header.type_color .logo i{color:inherit}
.header.type_color .btn_icon .num{background:#fff;color:var(--pc)}
.header.align_c .logo{text-align:center;font-size:19px;letter-spacing:2px;font-weight:700}
.header.is_scroll{border-bottom-color:var(--line)}
.search_bar{margin:4px var(--gut) 12px;height:46px;border-radius:12px;background:var(--soft);display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--muted);font-size:15px}
.search_bar svg{width:20px;height:20px;flex:none}
.header.type_color .search_bar{background:rgba(255,255,255,.95);color:var(--muted)}
.gnb{display:flex;gap:22px;padding:0 var(--gut);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);background:#fff}
.gnb::-webkit-scrollbar{display:none}
.gnb a{flex:none;font-size:15px;font-weight:600;color:var(--muted);padding:12px 0 11px;border-bottom:2px solid transparent}
.gnb a.on{color:var(--ink);border-bottom-color:var(--ink)}

/* 하위 화면 헤더 */
.header_sub{position:sticky;top:0;z-index:30;height:56px;display:flex;align-items:center;background:#fff;border-bottom:1px solid var(--line);padding:0 8px}
.header_sub h1{flex:1;text-align:center;font-size:17px;font-weight:700;margin-right:40px}
.header_sub.type_prd h1{margin:0;font-size:14px;font-weight:600;color:#5f6670}
.header_sub.type_prd .btn_back+.btn_back{margin-left:-6px}
.header_sub .hd_cart{position:relative}
.header_sub .hd_cart i{position:absolute;right:4px;top:8px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--pc-raw);color:#fff;font-size:10px;font-weight:700;font-style:normal;display:grid;place-items:center}
.header_sub.type_plain{border-bottom-color:transparent}
.btn_back{width:40px;height:40px;display:grid;place-items:center}
.btn_back svg{width:24px;height:24px}

/* ===== 하단 탭바 ===== */
.tab_bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,var(--frame));z-index:40;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.tab_bar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:600;color:#9aa0a8;padding:4px 0}
.tab_bar a svg{width:24px;height:24px}
.tab_bar a.on{color:var(--ink)}
.tab_bar a.btn_kit{color:var(--pc)}

/* ===== 공통 블록 ===== */
.section{padding:36px 0}
.section.bg_gray{background:var(--soft)}
.section.bg_warm{background:var(--warm)}
.tit_area{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 var(--gut);margin-bottom:16px}
.tit_area h2{font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.35}
.tit_area h2 em{font-style:normal;color:var(--pc)}
.tit_area .txt_sub{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:4px;letter-spacing:0}
.tit_area .btn_more{font-size:14px;color:var(--muted);white-space:nowrap}
.inner_pd{padding:0 var(--gut)}
.scroll_x{display:flex;gap:12px;overflow-x:auto;padding:0 var(--gut);scroll-snap-type:x mandatory;scrollbar-width:none}
.scroll_x::-webkit-scrollbar{display:none}
.scroll_x>*{scroll-snap-align:start;flex:none}
.btn{display:flex;align-items:center;justify-content:center;gap:6px;height:54px;border-radius:12px;font-size:16px;font-weight:700;width:100%;background:var(--pc);color:var(--pc-ink)}
.btn.btn_dark{background:var(--ink);color:#fff}
.btn.btn_line{background:#fff;color:var(--ink);border:1px solid var(--line2)}
.btn.btn_soft{background:var(--soft);color:var(--ink)}
.btn.btn_s{height:44px;font-size:15px;border-radius:10px}
.btn[disabled]{opacity:.35;pointer-events:none}
.chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:99px;border:1px solid var(--line2);font-size:14px;font-weight:600;background:#fff;white-space:nowrap}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:6px;font-size:12px;font-weight:700;background:var(--soft);color:var(--ink2);letter-spacing:0}
.badge.badge_point{background:var(--pc);color:var(--pc-ink)}
.badge.badge_dark{background:var(--ink);color:#fff}
.badge.badge_cold{background:#e3f1fb;color:#1769aa}
.badge_list{display:flex;gap:4px;flex-wrap:wrap}
.txt_note{font-size:14px;color:var(--muted);line-height:1.6}
.box_notice{margin:16px var(--gut);padding:14px 16px;border-radius:var(--r-s);background:var(--soft);font-size:14px;line-height:1.6;color:var(--ink2)}
.box_empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:15px;background:var(--soft);border-radius:var(--r-s)}
.price{font-weight:800;font-size:16px;letter-spacing:-.3px}
.price small{font-size:14px;font-weight:600}
.txt_won::after{content:"원"}

/* ===== 배너 슬라이더 ===== */
.slide_wrap{position:relative;overflow:hidden}
.slide_list{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.slide_item{flex:none;width:100%;position:relative;overflow:hidden;display:block}
.slide_count{position:absolute;right:14px;bottom:14px;z-index:3;background:rgba(0,0,0,.42);color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;letter-spacing:1px}
.slide_wrap.type_inset{margin:0 var(--gut);border-radius:var(--r)}
.slide_wrap.type_peek .slide_list{gap:10px;padding:0 var(--gut)}
.slide_wrap.type_peek .slide_item{width:calc(100% - 56px);border-radius:var(--r)}

/* 배너 — 구성 방식별 */
.bnr{position:relative;color:#fff}
.bnr_full{aspect-ratio:1/1}
.bnr_full img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bnr_full::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0) 58%)}
.bnr_txt_old{position:absolute;left:22px;right:22px;bottom:30px;z-index:2}
.bnr_txt_old .txt_label{font-size:13px;font-weight:700;letter-spacing:.5px;opacity:.9;margin-bottom:8px}
.bnr_txt_old h3{font-size:26px;line-height:1.28;font-weight:800;letter-spacing:-.8px}
.bnr_txt_old p{margin-top:8px;font-size:15px;opacity:.92}
.bnr_card{aspect-ratio:4/5;padding:28px 24px;color:var(--ink);display:flex;flex-direction:column}
.bnr_card .txt_label{font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:10px}
.bnr_card h3{font-size:27px;line-height:1.28;font-weight:800;letter-spacing:-.8px}
.bnr_card p{margin-top:10px;font-size:15px;color:var(--ink2)}
.bnr_card .img_obj{margin-top:auto;align-self:center;width:78%;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.14);background:#fff}
.bnr_card .link_txt{margin-top:18px;align-self:flex-start;font-size:14px;font-weight:700;border-bottom:1.5px solid currentColor;padding-bottom:1px}
.bnr_solid{overflow:hidden;aspect-ratio:1/1;color:var(--ink);display:grid;grid-template-rows:auto 1fr;padding:28px 24px 0}
.bnr_solid h3{font-size:32px;line-height:1.18;font-weight:800;letter-spacing:-1.2px}
.bnr_solid p{margin-top:10px;font-size:15px;color:var(--ink2)}
.bnr_solid .img_obj_list{position:relative;align-self:end;display:flex;justify-content:center;gap:0}
.bnr_solid .img_obj_list img{width:38%;margin:0 -3%;filter:drop-shadow(0 16px 24px rgba(0,0,0,.16));border-radius:8px}
.bnr_solid .img_obj_list img:nth-child(2){transform:translateY(-14px)}
.bnr_wide{aspect-ratio:16/10}
.bnr_donate{background:#3b2a20;color:#fff8ef}
.bnr_donate .img_bowl{position:absolute;right:-10px;bottom:-14px;width:62%;opacity:.95}
.bnr_donate .txt_label{color:#f6c79a}

/* ===== 카테고리 아이콘 ===== */
.cate_list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px;padding:0 var(--gut)}
.cate_item{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:14px;font-weight:600;text-align:center}
.cate_item .cate_ico{width:100%;aspect-ratio:1/1;border-radius:18px;display:grid;place-items:center}
.cate_item .cate_ico svg{width:46%;height:46%}
.cate_item:nth-child(6n+1) .cate_ico{background:var(--c1)}.cate_item:nth-child(6n+2) .cate_ico{background:var(--c2)}.cate_item:nth-child(6n+3) .cate_ico{background:var(--c3)}
.cate_item:nth-child(6n+4) .cate_ico{background:var(--c4)}.cate_item:nth-child(6n+5) .cate_ico{background:var(--c5)}.cate_item:nth-child(6n+6) .cate_ico{background:var(--c6)}
.cate_txt_list{display:flex;flex-direction:column;padding:0 var(--gut)}
.cate_txt_list a{display:flex;justify-content:space-between;align-items:center;padding:17px 2px;border-bottom:1px solid var(--line);font-size:18px;font-weight:700;letter-spacing:-.4px}
.cate_txt_list a span{font-size:14px;color:var(--muted);font-weight:500}

/* ===== 상품 카드 ===== */
.prd_list{display:grid;grid-template-columns:1fr 1fr;gap:26px 12px;padding:0 var(--gut)}
.prd_item{display:block}
.prd_item .prd_thumb{position:relative;aspect-ratio:1/1;border-radius:var(--r-s);overflow:hidden;background:var(--soft)}
.prd_item .prd_thumb img{width:100%;height:100%;object-fit:cover}
.prd_item .prd_thumb .badge_list{position:absolute;left:8px;top:8px}
.prd_item .prd_brand{margin-top:10px;font-size:13px;color:var(--muted);font-weight:600}
.prd_item .prd_name{margin-top:2px;font-size:15px;line-height:1.4;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prd_item .price{margin-top:6px}
.prd_item .prd_badge{margin-top:6px}
.prd_item.size_s{width:150px}
.prd_item.size_m{width:200px}
.prd_item.type_row{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.prd_item.type_row .prd_brand{margin-top:0}
.prd_item.type_big .prd_thumb{aspect-ratio:4/3;border-radius:var(--r)}
.prd_item.type_big .prd_name{font-size:18px;font-weight:700}

/* 전시형 */
.exhibit{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:10px;padding:0 var(--gut)}
.exhibit .exhibit_item{position:relative;border-radius:var(--r);overflow:hidden;background:var(--warm);display:block}
.exhibit .exhibit_item:first-child{grid-row:1/3}
.exhibit .exhibit_item img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.exhibit .exhibit_item:first-child img{aspect-ratio:auto}
.exhibit .exhibit_item .txt_cap{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,.94);border-radius:10px;padding:9px 11px}
.exhibit .exhibit_item .txt_cap b{display:block;font-size:14px;line-height:1.35;font-weight:700}
.exhibit .exhibit_item .txt_cap span{font-size:14px;font-weight:800}
.tab_scroll{display:flex;gap:8px;overflow-x:auto;padding:0 var(--gut) 16px;scrollbar-width:none}
.tab_scroll::-webkit-scrollbar{display:none}
.feature{margin:0 var(--gut);border-radius:var(--r);overflow:hidden;background:var(--warm)}
.feature .feature_img{aspect-ratio:5/4;background:var(--warm)}
.feature .feature_img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.feature .feature_txt{padding:18px 18px 20px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r)}
.feature .feature_txt b{display:block;font-size:18px;font-weight:700;line-height:1.35}
.feature .feature_txt p{margin-top:6px;font-size:14px;color:var(--ink2)}

/* 밸런스키트 소개 카드 */
.bnr_kit{margin:0 var(--gut);border-radius:20px;overflow:hidden;background:#1d2a33;color:#fff;position:relative}
.bnr_kit img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.92}
.bnr_kit .inner{padding:22px 22px 24px}
.bnr_kit .txt_label{font-size:13px;font-weight:700;color:#9fd3ff;letter-spacing:.5px}
.bnr_kit h3{font-size:24px;line-height:1.32;font-weight:800;margin-top:6px;letter-spacing:-.6px}
.bnr_kit p{font-size:15px;color:rgba(255,255,255,.82);margin-top:8px}
.bnr_kit .btn_group2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.bnr_kit .btn.btn_line{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.step_list{display:grid;gap:10px;padding:0 var(--gut)}
.step_item{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;padding:16px;border-radius:var(--r-s);background:#fff;border:1px solid var(--line)}
.step_item .num{width:36px;height:36px;border-radius:99px;background:var(--ink);color:#fff;font-weight:800;display:grid;place-items:center;font-size:15px}
.step_item b{display:block;font-size:16px}
.step_item span{font-size:14px;color:var(--ink2)}

/* 기부 섹션 */
.sec_donate{margin:0 var(--gut);border-radius:var(--r);background:#3b2a20;color:#fff8ef;padding:24px 22px;position:relative;overflow:hidden}
.sec_donate .txt_label{font-size:13px;font-weight:700;color:#f6c79a}
.sec_donate h3{font-size:21px;line-height:1.35;margin-top:6px;font-weight:800;letter-spacing:-.5px;position:relative;z-index:1}
.sec_donate p{font-size:14px;margin-top:8px;color:rgba(255,248,239,.82);position:relative;z-index:1;max-width:70%}
.sec_donate svg{position:absolute;right:-6px;bottom:-10px;width:44%}

/* 푸터 */
.footer{background:var(--soft);padding:28px var(--gut) 34px;font-size:13px;color:var(--muted);line-height:1.75;margin-top:8px}
.footer b{color:var(--ink2);font-size:15px;display:block;margin-bottom:8px}
.footer .footer_link{display:flex;gap:14px;margin:12px 0;font-weight:600;color:var(--ink2);font-size:14px}
.footer .demo{margin-top:14px;display:inline-block;font-weight:700;color:var(--ink2);border-bottom:1px solid currentColor}

/* ===== 상품 목록 ===== */
.filter_list{display:flex;gap:8px;overflow-x:auto;padding:14px var(--gut);scrollbar-width:none;border-bottom:1px solid var(--line)}
.filter_list::-webkit-scrollbar{display:none}
.list_top{display:flex;justify-content:space-between;align-items:center;padding:14px var(--gut);font-size:14px;color:var(--muted)}
.list_top b{color:var(--ink)}
.bnr_kit_strip{margin:14px var(--gut) 18px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-s);background:var(--warm)}
.bnr_kit_strip img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.bnr_kit_strip b{display:block;font-size:15px}
.bnr_kit_strip span{font-size:14px;color:var(--ink2)}
.bnr_kit_strip .btn_go{margin-left:auto;font-size:14px;font-weight:700;white-space:nowrap}

/* ===== 상품 상세 ===== */
.prd_gallery{position:relative;background:var(--soft)}
.prd_gallery .slide_item{aspect-ratio:1/1}
.prd_gallery .slide_item img{width:100%;height:100%;object-fit:contain;background:#fff}
.prd_info{padding:20px var(--gut) 22px}
.prd_info .prd_brand{font-size:14px;color:var(--muted);font-weight:600}
.prd_info h1{font-size:21px;line-height:1.38;font-weight:700;letter-spacing:-.5px;margin-top:4px}
.prd_info .price_area{margin-top:12px;display:flex;align-items:baseline;gap:6px}
.prd_info .price_area b{font-size:25px;font-weight:800;letter-spacing:-.6px}
.prd_info_list{border-top:8px solid var(--soft);padding:6px var(--gut)}
.prd_info_list dl{display:grid;grid-template-columns:72px 1fr;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.prd_info_list dl:last-child{border-bottom:0}
.prd_info_list dt{color:var(--muted)}
.prd_info_list dd{color:var(--ink2)}
.prd_bnr{display:flex;align-items:center;gap:12px;margin:0 var(--gut) 18px;padding:16px;border-radius:var(--r-s);background:var(--c5)}
.prd_bnr b{font-size:15px;display:block}
.prd_bnr span{font-size:14px;color:var(--ink2)}
.prd_bnr .btn_go{margin-left:auto;font-weight:700;font-size:14px;white-space:nowrap}
.prd_tab{position:sticky;top:56px;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:8px solid var(--soft);border-bottom:1px solid var(--line)}
.prd_tab a{text-align:center;font-size:15px;font-weight:600;color:var(--muted);padding:14px 0 12px;border-bottom:2px solid transparent}
.prd_tab a.on{color:var(--ink);border-bottom-color:var(--ink)}
.prd_detail_body{padding:0 0 10px}
.fixed_btn_area{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,var(--frame));z-index:45;background:#fff;border-top:1px solid var(--line);padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));display:flex;gap:8px}
.fixed_btn_area .btn{height:54px}
.fixed_btn_area .btn_wish{flex:none;width:54px;height:54px;border:1px solid var(--line2);border-radius:12px;display:grid;place-items:center}
.fixed_btn_area .btn_wish svg{width:24px;height:24px}

/* 상세 본문 (발주사 원고 기반 샘플) */
.prd_detail{color:var(--ink)}
.detail_visual{padding:48px var(--gut) 40px;text-align:center;background:var(--warm)}
.detail_visual .txt_label{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--muted)}
.detail_visual h2{font-size:25px;line-height:1.38;font-weight:800;letter-spacing:-.7px;margin-top:10px}
.detail_visual p{margin-top:12px;font-size:15px;color:var(--ink2);line-height:1.7}
.detail_visual img{margin:28px auto 0;width:74%;border-radius:12px;box-shadow:0 18px 36px rgba(0,0,0,.12)}
.detail_sec{padding:44px var(--gut)}
.detail_sec.type_dark{background:#1e2226;color:#fff}
.detail_sec.type_dark p,.detail_sec.type_dark .txt_label{color:rgba(255,255,255,.78)}
.detail_sec .txt_label{font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}
.detail_sec h3{font-size:22px;line-height:1.4;font-weight:800;letter-spacing:-.5px;margin-top:8px}
.detail_sec p{margin-top:12px;font-size:15px;line-height:1.75;color:var(--ink2)}
.detail_step{margin-top:22px;display:grid;gap:12px}
.detail_step div{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:16px;border-radius:12px;background:var(--soft)}
.detail_sec.type_dark .detail_step div{background:rgba(255,255,255,.07)}
.detail_step b{font-size:22px;font-weight:800;color:var(--pc)}
.detail_sec.type_dark .detail_step b{color:#fff}
.detail_step strong{display:block;font-size:16px}
.detail_step span{font-size:14px;line-height:1.6;color:inherit;opacity:.82}
.detail_img{margin-top:22px;border-radius:12px;overflow:hidden}
.detail_compare{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.detail_compare div{padding:16px 14px;font-size:14px;line-height:1.6}
.detail_compare div:first-child{background:var(--soft);color:var(--muted)}
.detail_compare div b{display:block;font-size:15px;margin-bottom:6px;color:var(--ink)}
.detail_table{margin-top:18px;border-top:1px solid var(--ink)}
.detail_table dl{display:grid;grid-template-columns:96px 1fr;border-bottom:1px solid var(--line);font-size:14px}
.detail_table dt{padding:12px 10px;background:var(--soft);color:var(--ink2);font-weight:600}
.detail_table dd{padding:12px 12px;color:var(--ink2)}
.detail_caution{margin-top:16px;padding:14px 16px;border-radius:12px;background:#fff4e5;font-size:14px;line-height:1.6;color:#7a4b10}
.box_review_empty{padding:40px var(--gut);text-align:center}
.box_review_empty b{display:block;font-size:17px}
.box_review_empty p{font-size:14px;color:var(--muted);margin-top:6px}

/* ===== 장바구니 ===== */
.cart_item{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:18px var(--gut);border-bottom:1px solid var(--line)}
.cart_item img{width:84px;height:84px;border-radius:10px;object-fit:cover;background:var(--soft)}
.cart_item .prd_name{font-size:15px;line-height:1.4;font-weight:500}
.cart_item .txt_option{font-size:14px;color:var(--muted);margin-top:2px}
.cart_item .area_bottom{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:8px;height:34px}
.qty button{width:34px;height:34px;font-size:18px;color:var(--ink2)}
.qty span{min-width:28px;text-align:center;font-weight:700;font-size:15px}
.btn_del{font-size:13px;color:var(--muted);text-decoration:underline}
.order_sum{margin:18px var(--gut);padding:18px;border-radius:var(--r-s);background:var(--soft)}
.order_sum dl{display:flex;justify-content:space-between;font-size:15px;padding:5px 0;color:var(--ink2)}
.order_sum dl.total{border-top:1px solid var(--line2);margin-top:8px;padding-top:12px;color:var(--ink);font-weight:800;font-size:18px}
.ship_gauge{margin:14px var(--gut) 0;font-size:14px;color:var(--ink2)}
.ship_gauge .bar_gauge{height:6px;border-radius:99px;background:var(--line);margin-top:8px;overflow:hidden}
.ship_gauge .bar_gauge i{display:block;height:100%;background:var(--pc);border-radius:99px}

/* ===== 마이페이지 ===== */
.my_profile{padding:24px var(--gut) 20px;display:flex;align-items:center;gap:14px}
.my_profile .img_profile{width:56px;height:56px;border-radius:99px;background:var(--soft);display:grid;place-items:center;font-size:22px;font-weight:800;color:var(--muted)}
.my_profile b{font-size:19px;display:block}
.my_profile span{font-size:14px;color:var(--muted)}
.my_status{display:grid;grid-template-columns:repeat(3,1fr);margin:0 var(--gut);border:1px solid var(--line);border-radius:var(--r-s)}
.my_status a{text-align:center;padding:14px 0}
.my_status a+a{border-left:1px solid var(--line)}
.my_status b{display:block;font-size:19px;font-weight:800}
.my_status span{font-size:13px;color:var(--muted)}
.pet_card{margin:0 var(--gut);border-radius:var(--r);border:1px solid var(--line);padding:18px}
.pet_card .area_top{display:flex;align-items:center;gap:12px}
.pet_card .img_pet{width:52px;height:52px;border-radius:99px;background:var(--warm);display:grid;place-items:center}
.pet_card .img_pet svg{width:28px;height:28px}
.pet_card b{font-size:17px}
.pet_card .area_top span{font-size:14px;color:var(--muted);display:block}
.sub_card{margin:12px var(--gut) 0;border-radius:var(--r);background:var(--warm);padding:18px}
.sub_card .area_top{display:flex;justify-content:space-between;align-items:center}
.sub_card .area_top b{font-size:16px}
.sub_card dl{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;color:var(--ink2)}
.sub_card .btn_group{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.sub_card .btn_group button{height:42px;border-radius:10px;background:#fff;font-size:14px;font-weight:600;border:1px solid var(--line2)}
.list_menu a{display:flex;justify-content:space-between;align-items:center;padding:16px var(--gut);font-size:16px;border-bottom:1px solid var(--line)}
.list_menu a svg{width:18px;height:18px;color:var(--muted)}
.tit_menu{padding:26px var(--gut) 8px;font-size:14px;color:var(--muted);font-weight:700}

/* ===== 설문 (우리 아이 등록) ===== */
.survey_header{position:sticky;top:0;z-index:30;background:#fff;padding:0 8px}
.survey_header .type_row{height:56px;display:flex;align-items:center;justify-content:space-between}
.survey_header .type_row span{font-size:14px;font-weight:600;color:var(--muted)}
.progress{display:flex;gap:4px;padding:0 12px 4px}
.progress i{flex:1;height:4px;border-radius:99px;background:var(--line)}
.progress i.on{background:var(--pc)}
.survey{padding:28px var(--gut) 24px}
.survey .tit_question{font-size:25px;line-height:1.38;font-weight:800;letter-spacing:-.7px}
.survey .tit_question em{font-style:normal;color:var(--pc)}
.survey .txt_hint{margin-top:10px;font-size:15px;color:var(--muted)}
.opt_list{display:grid;gap:10px;margin-top:28px}
.opt_list.col2{grid-template-columns:1fr 1fr}
.opt_list.col3{grid-template-columns:repeat(3,1fr)}
.opt_item{min-height:62px;border-radius:14px;border:1.5px solid var(--line2);background:#fff;display:flex;align-items:center;gap:12px;padding:0 18px;font-size:17px;font-weight:600;text-align:left;transition:border-color .15s,background .15s}
.opt_item .ico_radio{width:22px;height:22px;border-radius:99px;border:1.5px solid var(--line2);flex:none;display:grid;place-items:center}
.opt_item.on{border-color:var(--pc);background:var(--pc-soft)}
.opt_item.on .ico_radio{border-color:var(--pc);background:var(--pc)}
.opt_item.on .ico_radio::after{content:"";width:8px;height:8px;border-radius:99px;background:#fff}
.opt_item.type_card{flex-direction:column;justify-content:center;gap:8px;min-height:116px;text-align:center;padding:14px 8px;font-size:16px}
.opt_item.type_card svg{width:38px;height:38px}
.opt_item.type_card small{font-size:13px;font-weight:500;color:var(--muted)}
.form_field{margin-top:24px}
.form_field label{display:block;font-size:14px;font-weight:700;color:var(--ink2);margin-bottom:8px}
.input_txt{width:100%;height:56px;border:1.5px solid var(--line2);border-radius:12px;padding:0 16px;font-size:17px;background:#fff;outline:none}
.input_txt:focus{border-color:var(--ink)}
.input_unit{position:relative}
.input_unit span{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:17px;font-weight:700;color:var(--ink2)}
.tab_toggle{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border-radius:12px;padding:4px;margin-top:22px}
.tab_toggle button{height:44px;border-radius:9px;font-size:15px;font-weight:600;color:var(--muted)}
.tab_toggle button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.input_date3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.input_date2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.list_breed{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;max-height:210px;overflow-y:auto}
.btn_photo{width:96px;height:96px;border-radius:99px;border:1.5px dashed var(--line2);display:grid;place-items:center;margin:26px auto 0;color:var(--muted);font-size:13px;font-weight:600;text-align:center;line-height:1.4}
.survey_btn_area{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,var(--frame));padding:12px var(--gut) calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));z-index:40}
.survey_btn_area .btn+.btn{margin-top:8px}
.box_guide{margin-top:22px;padding:14px 16px;border-radius:12px;background:var(--soft);font-size:14px;color:var(--ink2);line-height:1.6;display:flex;gap:8px}
.box_guide svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--muted)}

/* ===== 추천 결과 ===== */
.result_visual{background:var(--ink);color:#fff;padding:26px var(--gut) 96px}
.result_visual .txt_date{font-size:13px;color:rgba(255,255,255,.62)}
.result_visual h1{font-size:23px;line-height:1.4;font-weight:800;letter-spacing:-.6px;margin-top:6px}
.result_visual h1 em{font-style:normal;color:#ffd27a}
.result_card{margin:-76px var(--gut) 0;background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:22px 20px;position:relative}
.result_card .area_tit{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.result_card .area_tit b{font-size:19px;line-height:1.35;font-weight:800}
.result_card .area_tit span{font-size:14px;color:var(--muted)}
.result_price{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end}
.result_price .txt_tit{font-size:14px;color:var(--muted)}
.result_price .txt_val{font-size:28px;font-weight:800;letter-spacing:-.8px}
.result_price .txt_val small{font-size:16px;font-weight:700}
.result_save{margin-top:10px;display:flex;justify-content:space-between;font-size:15px;font-weight:700;color:var(--sale);background:#fff3f2;border-radius:10px;padding:11px 14px}
.list_reason{margin-top:16px;display:grid;gap:8px}
.list_reason div{display:flex;gap:8px;font-size:15px;line-height:1.5;color:var(--ink2)}
.list_reason svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--pc)}
.result_sec{padding:34px var(--gut) 0}
.result_sec h2{font-size:20px;line-height:1.4;font-weight:800;letter-spacing:-.5px}
.result_sec h2 em{font-style:normal;color:var(--pc)}
.result_sec .txt_desc{font-size:14px;color:var(--muted);margin-top:4px}
.kit_line_list{margin-top:16px;display:grid;gap:10px}
.kit_line{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kit_line .line_head{display:flex;align-items:center;gap:12px;padding:14px 16px}
.kit_line .line_head img{width:52px;height:52px;border-radius:10px;object-fit:cover;background:var(--soft)}
.kit_line .line_head b{font-size:16px;display:block}
.kit_line .line_head span{font-size:14px;color:var(--muted)}
.kit_line .line_head .txt_count{margin-left:auto;font-size:20px;font-weight:800;white-space:nowrap}
.kit_line .line_head .txt_count small{font-size:14px;font-weight:700}
.kit_line ul{list-style:none;background:var(--soft);padding:10px 16px 12px}
.kit_line li{display:flex;justify-content:space-between;font-size:14px;color:var(--ink2);padding:3px 0}
.tit_group{font-size:14px;font-weight:700;color:var(--muted);margin-top:16px}
.box_supp{margin-top:16px;display:flex;align-items:center;gap:14px;padding:18px;border-radius:14px;background:var(--c2)}
.box_supp .ico{width:52px;height:52px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:none}
.box_supp .ico svg{width:28px;height:28px}
.box_supp b{display:block;font-size:16px}
.box_supp span{font-size:14px;color:var(--ink2)}
.box_supp .txt_free{margin-left:auto;text-align:right;font-size:14px;font-weight:800;color:#1b7a46;white-space:nowrap}
.box_supp .txt_free s{display:block;color:var(--muted);font-weight:500;font-size:13px}
.box_kcal{margin-top:16px;border-radius:16px;background:#fff;border:1px solid var(--line);padding:22px 20px}
.box_kcal .txt_name{display:inline-block;background:var(--ink);color:#fff;border-radius:7px;padding:1px 8px;font-weight:800;font-size:15px}
.box_kcal .txt_lb{font-size:16px;font-weight:700;margin-top:6px}
.box_kcal .txt_val{margin-top:6px;display:flex;align-items:flex-end;gap:6px}
.box_kcal .txt_val b{background:var(--ink);color:#fff;border-radius:10px;padding:2px 12px;font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1.25}
.box_kcal .txt_val span{font-size:17px;font-weight:700;padding-bottom:4px}
.box_kcal ul{list-style:none;margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--soft);border:1px solid var(--line2)}
.box_kcal li{display:flex;gap:8px;font-size:14px;color:var(--ink2);line-height:1.6;padding:2px 0}
.box_kcal li svg{width:16px;height:16px;flex:none;margin-top:3px}
.box_msg{margin-top:12px;display:flex;gap:10px;padding:14px 16px;border-radius:12px;font-size:15px;line-height:1.55;font-weight:600}
.box_msg svg{width:20px;height:20px;flex:none;margin-top:1px}
.box_msg.type_cold{background:#e7f3fc;color:#14598f}
.box_msg.type_warn{background:#fff6e0;color:#7a5410}
.box_msg.type_info{background:var(--soft);color:var(--ink2);font-weight:500}
.result_btn_area{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,var(--frame));z-index:40;background:#fff;border-top:1px solid var(--line);padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom))}
.result_btn_area .btn_half{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.box_stop{padding:60px var(--gut);text-align:center}
.box_stop h2{font-size:22px;font-weight:800;margin-top:16px}
.box_stop p{margin-top:10px;color:var(--ink2);font-size:15px;line-height:1.7}

/* ===== 신청 · 결제 샘플 ===== */
.form_sec{padding:22px var(--gut);border-bottom:8px solid var(--soft)}
.form_sec h2{font-size:17px;font-weight:800;margin-bottom:12px}
.txt_addr{font-size:15px;line-height:1.6;color:var(--ink2)}
.txt_addr b{color:var(--ink)}
.pay_list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pay_list button{height:50px;border-radius:10px;border:1.5px solid var(--line2);font-size:15px;font-weight:600}
.pay_list button.on{border-color:var(--ink);background:var(--soft)}
.chk_agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink2);line-height:1.55;padding:6px 0}
.chk_agree i{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line2);flex:none;margin-top:1px}
.complete{padding:70px var(--gut) 30px;text-align:center}
.complete .ico_complete{width:72px;height:72px;border-radius:99px;background:var(--pc-soft);color:var(--pc);display:grid;place-items:center;margin:0 auto}
.complete .ico_complete svg{width:38px;height:38px}
.complete h1{font-size:23px;font-weight:800;margin-top:20px;letter-spacing:-.5px}
.complete p{margin-top:10px;font-size:15px;color:var(--ink2);line-height:1.7}
.sample_visual{background:var(--c5);padding:32px var(--gut) 28px;text-align:center}
.sample_visual .txt_label{font-size:14px;font-weight:700;color:#8a6a00}
.sample_visual h1{font-size:28px;font-weight:800;letter-spacing:-.8px;margin-top:6px}
.sample_visual p{margin-top:8px;font-size:15px;color:var(--ink2)}
.sample_visual .img_obj_list{display:flex;justify-content:center;margin-top:22px}
.sample_visual .img_obj_list img{width:31%;margin:0 -2%;border-radius:10px;box-shadow:0 12px 24px rgba(0,0,0,.12);background:#fff}
.sample_list{display:grid;gap:8px;margin-top:4px}
.sample_list div{display:flex;justify-content:space-between;font-size:15px;padding:12px 14px;border-radius:10px;background:var(--soft)}
.login{padding:48px var(--gut) 30px;text-align:center}
.login h1{font-size:24px;font-weight:800;letter-spacing:-.6px}
.login p{font-size:15px;color:var(--ink2);margin-top:8px}
.login .sns_login{display:grid;gap:10px;margin-top:34px}
.login .btn_kakao{background:#fee500;color:#191600}
.login .btn_naver{background:#03c75a;color:#fff}

/* ===== 샘플 시작 화면 (영업용) ===== */
.hub{background:#f3f4f6;min-height:100vh}
.hub_inner{max-width:var(--frame);margin:0 auto;padding:40px 20px 60px;background:#f3f4f6}
.hub h1{font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1.35}
.hub .txt_lead{margin-top:10px;font-size:15px;color:var(--ink2);line-height:1.7}
.hub h2{font-size:15px;font-weight:700;color:var(--muted);margin:34px 0 12px}
.mall_card{display:block;background:#fff;border-radius:18px;overflow:hidden;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mall_card .img_preview{height:120px;position:relative;overflow:hidden}
.mall_card .img_preview img{width:100%;height:100%;object-fit:cover}
.mall_card .mall_info{padding:16px 18px 18px;display:flex;align-items:center;gap:12px}
.mall_card .ico_dot{width:30px;height:30px;border-radius:99px;flex:none}
.mall_card b{font-size:18px;display:block}
.mall_card span{font-size:14px;color:var(--muted)}
.mall_card .ico_arrow{margin-left:auto;width:20px;height:20px;color:var(--muted)}
.admin_link{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:16px 18px;margin-bottom:10px}
.admin_link .ico{width:42px;height:42px;border-radius:12px;background:var(--soft);display:grid;place-items:center}
.admin_link .ico svg{width:22px;height:22px}
.admin_link b{display:block;font-size:16px}
.admin_link span{font-size:14px;color:var(--muted)}
.hub .txt_fine{margin-top:30px;font-size:13px;color:var(--muted);line-height:1.7}

/* ===== 관리자 ===== */
.admin{background:#f3f4f6;min-height:100vh;color:var(--ink)}
.admin_header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.admin_header .inner{max-width:1200px;margin:0 auto;height:58px;display:flex;align-items:center;gap:12px;padding:0 20px}
.admin_header b{font-size:17px;font-weight:800}
.admin_header .tag{font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--soft);color:var(--ink2)}
.admin_header .spacer{flex:1}
.admin_header a{font-size:14px;color:var(--ink2);font-weight:600}
.admin_container{max-width:1200px;margin:0 auto;padding:20px}
.admin_container.type_narrow{max-width:var(--frame);padding:16px}
.box_alert{display:flex;align-items:center;gap:12px;background:#fdecec;color:#b42318;border:1px solid #f7c6c2;border-radius:12px;padding:14px 16px;font-size:15px;font-weight:600;margin-bottom:14px}
.box_alert svg{width:20px;height:20px;flex:none}
.box_alert .btn_go{margin-left:auto;font-size:14px;text-decoration:underline;white-space:nowrap}
.kpi_list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
.kpi_item{background:#fff;border-radius:12px;padding:16px;border:1px solid var(--line)}
.kpi_item span{font-size:14px;color:var(--muted);font-weight:600}
.kpi_item b{display:block;font-size:24px;font-weight:800;letter-spacing:-.5px;margin-top:4px}
.kpi_item b small{font-size:15px;font-weight:700}
.kpi_item em{font-style:normal;font-size:13px;color:var(--muted)}
.panel_list{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:12px}
.panel{background:#fff;border-radius:12px;border:1px solid var(--line);padding:18px}
.panel h3{font-size:16px;font-weight:800;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.panel h3 span{font-size:13px;color:var(--muted);font-weight:600}
.chart_bar{display:grid;gap:10px}
.chart_bar .bar_row{display:grid;grid-template-columns:110px 1fr 96px;gap:10px;align-items:center;font-size:14px}
.chart_bar .bar_row .bar_track{height:10px;border-radius:99px;background:var(--soft);overflow:hidden}
.chart_bar .bar_row .bar_track i{display:block;height:100%;background:#2f3a46;border-radius:99px}
.chart_bar .bar_row b{text-align:right;font-weight:700}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;color:var(--muted);font-weight:600;padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td.bar_row,.tbl th.bar_row{text-align:right}
.state{display:inline-block;font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px}
.state.state_red{background:#fdecec;color:#b42318}.state.state_ok{background:#e8f6ee;color:#1b7a46}.state.state_wait{background:#fff6e0;color:#7a5410}.state.state_gray{background:var(--soft);color:var(--ink2)}
.toggle{display:inline-block;width:40px;height:24px;border-radius:99px;background:var(--line2);position:relative;vertical-align:middle}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:99px;background:#fff}
.toggle.on{background:#2f3a46}.toggle.on::after{left:19px}
.card_box{background:#fff;border-radius:14px;padding:18px;margin-bottom:10px;border:1px solid var(--line)}
.card_box h3{font-size:15px;font-weight:700;color:var(--ink2);display:flex;justify-content:space-between}
.card_box h3 a{font-size:13px;color:var(--muted)}
.card_box .num{font-size:30px;font-weight:800;letter-spacing:-.8px;margin-top:4px}
.card_box .num small{font-size:17px}
.card_grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.card_grid .card_box{margin:0}
.card_grid .card_box b{display:block;font-size:24px;font-weight:800;margin-top:2px}
.row_item{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.row_item:last-child{border-bottom:0}
.row_item span{color:var(--muted);font-size:14px}
.list_color{display:flex;gap:10px;margin-top:12px}
.list_color button{width:36px;height:36px;border-radius:99px;border:3px solid #fff;box-shadow:0 0 0 1px var(--line2)}
.list_color button.on{box-shadow:0 0 0 2px var(--ink)}
.admin_tab{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,var(--frame));background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:30}
.admin_tab a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:600;color:#9aa0a8}
.admin_tab a.on{color:var(--ink)}
.admin_tab svg{width:22px;height:22px}
@media(max-width:860px){.kpi_list{grid-template-columns:1fr 1fr}.panel_list{grid-template-columns:1fr}.chart_bar .bar_row{grid-template-columns:84px 1fr 84px}.tbl_wrap{overflow-x:auto}}

/* 토스트 */
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(20px);opacity:0;background:rgba(25,27,30,.92);color:#fff;font-size:14px;font-weight:600;padding:12px 18px;border-radius:12px;z-index:99;transition:all .25s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* 사진이 없는 라인용 포장 그림 */
.pack{position:relative;width:100%;height:100%;border-radius:inherit;display:flex;flex-direction:column;justify-content:space-between;padding:12% 10%;overflow:hidden}
.pack::before{content:"";position:absolute;inset:9% 16% auto;height:4%;background:rgba(0,0,0,.08);border-radius:99px}
.pack .pack_label{align-self:center;margin-top:12%;background:#e2342c;color:#fff;font-size:9px;font-weight:800;letter-spacing:.5px;padding:2px 7px;border-radius:4px;white-space:nowrap}
.pack b{text-align:center;font-weight:800;letter-spacing:-.5px;color:#3a2e24;font-size:clamp(11px,4.2cqw,22px);line-height:1.15}
.pack span{text-align:center;font-size:clamp(9px,3cqw,13px);font-weight:600;color:#7a6a58}
.pack_wrap{container-type:inline-size}
.footer{font-size:14px}
.sec_donate p{max-width:58%}
.exhibit .exhibit_item img{object-fit:contain;background:#fff}
.opt_item.type_card .ico_body{width:46px;height:38px}
.kit_line .line_head .line_thumb{width:52px;height:52px;border-radius:10px;overflow:hidden;flex:none;background:var(--soft)}
.kit_line .line_head .line_thumb img{width:100%;height:100%;object-fit:cover}
.img_obj_list.type_sample{align-items:flex-end}
.img_obj_list.type_sample .pack_item{width:30%;aspect-ratio:3/4;border-radius:10px;overflow:hidden;box-shadow:0 12px 24px rgba(0,0,0,.12);margin:0 -2%;position:relative;z-index:1}
.bnr_solid .img_obj_list.type_sample .pack_item{width:34%;transform:translateY(-14px)}
.kit_line .line_head .line_thumb .pack{padding:6px 4px;justify-content:center}
.kit_line .line_head .line_thumb .pack::before,.kit_line .line_head .line_thumb .pack .pack_label,.kit_line .line_head .line_thumb .pack span{display:none}
.kit_line .line_head .line_thumb .pack b{font-size:11px;line-height:1.2}
/* 카테고리 아이콘 — 펫프렌즈식 (몰 포인트 컬러의 옅은 박스) */
.cate_list{gap:18px 12px}
.cate_item{font-size:14px;font-weight:600;color:var(--ink);gap:8px}
.cate_item .cate_ico{border-radius:22px;background:color-mix(in srgb,var(--pc) 9%,#fff)!important}
.cate_item .cate_ico svg{width:72%;height:72%}
.cate_item .cate_ico .ico_point{opacity:.92}

/* ===== 이미지는 자르지 않는다 (10/14) ===== */
.exhibit .exhibit_item img,.bnr_kit_strip img,.cart_item img,.kit_line .line_head img,.kit_line .line_head .line_thumb img{object-fit:contain;background:#fff}
/* 10/29 팀장: 썸네일 · 상세 갤러리 사진은 contain 말고 cover — 상자에 꽉 */
.prd_item .prd_thumb img,.prd_gallery .slide_item img{object-fit:cover!important;background:#fff}
.prd_gallery .slide_item img.img_cut,.prd_item .prd_thumb img[src*="-cut"]{object-fit:contain!important;padding:6%}
.prd_item .prd_thumb{background:#fff;border:1px solid var(--line)}
.exhibit .exhibit_item{background:#fff;border:1px solid var(--line)}
.exhibit .exhibit_item img{aspect-ratio:1/1;height:auto}
.exhibit .exhibit_item:first-child{display:flex;flex-direction:column;justify-content:center}
.exhibit .exhibit_item .txt_cap{position:static;margin:0 10px 10px;background:var(--soft)}
.bnr_kit img{aspect-ratio:auto;height:auto;opacity:1}
.mall_card .img_preview{height:auto}
.mall_card .img_preview img{height:auto}
.bnr_kit_strip img,.cart_item img{border:1px solid var(--line)}
/* 배너: 사진은 원래 비율, 글은 사진 아래 */
.slide_wrap:not(.prd_gallery) .slide_list{align-items:stretch}
.bnr_photo{display:flex;flex-direction:column;background:#1e2226;color:#fff}
.bnr_photo img{width:100%;height:auto;display:block}
.bnr_photo .area_bottom{padding:20px 22px 30px;flex:1}
.bnr_photo .txt_label{font-size:13px;font-weight:700;letter-spacing:.5px;color:rgba(255,255,255,.7)}
.bnr_photo h3{font-size:24px;line-height:1.3;font-weight:800;letter-spacing:-.7px;margin-top:6px}
.bnr_photo p{margin-top:6px;font-size:15px;color:rgba(255,255,255,.82)}
.bnr_solid{aspect-ratio:auto;overflow:visible;padding:28px 24px 30px;display:flex;flex-direction:column;gap:18px}
.bnr_solid .img_obj_list{align-self:stretch;padding-top:14px}
.bnr_donate_s{background:#3b2a20;color:#fff8ef;padding:28px 24px 26px;display:flex;flex-direction:column}
.bnr_donate_s .txt_label{font-size:13px;font-weight:700;color:#f6c79a}
.bnr_donate_s h3{font-size:26px;line-height:1.3;font-weight:800;letter-spacing:-.7px;margin-top:8px}
.bnr_donate_s p{margin-top:8px;font-size:15px;color:rgba(255,248,239,.82)}
.bnr_donate_s svg{width:78%;margin:auto auto 0;padding-top:18px}
.sec_donate svg{position:static;display:block;width:60%;margin:14px 0 -6px auto}
.sec_donate p{max-width:none}
.slide_wrap:not(.prd_gallery) .slide_count{top:14px;bottom:auto}

/* ===== 검색 ===== */
.search_header{position:sticky;top:0;z-index:30;background:#fff;display:flex;align-items:center;gap:4px;padding:8px 12px 8px 4px;border-bottom:1px solid var(--line)}
.search_box{flex:1;position:relative}
.search_box input{width:100%;height:44px;border:0;border-radius:12px;background:var(--soft);padding:0 40px 0 42px;font-size:16px;outline:none}
.search_box svg.ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted)}
.search_box .btn_clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:99px;display:none;place-items:center;color:var(--muted)}
.search_box .btn_clear.on{display:grid}
.search_box .btn_clear svg{width:18px;height:18px}
.search_sec{padding:22px var(--gut) 4px}
.search_sec h3{font-size:16px;font-weight:800;display:flex;justify-content:space-between;align-items:center}
.search_sec h3 button{font-size:14px;font-weight:500;color:var(--muted)}
.search_keyword{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.list_rank{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin-top:12px}
.list_rank li a{display:flex;gap:10px;padding:8px 0;font-size:15px}
.list_rank li b{width:18px;color:var(--pc);font-weight:800}
.search_result .result_top{padding:16px var(--gut) 4px;font-size:14px;color:var(--muted)}
.search_result .result_top b{color:var(--ink)}
.search_result mark{background:none;color:var(--pc);font-weight:700}
.search_suggest{display:flex;align-items:center;gap:10px;padding:13px var(--gut);font-size:16px;border-bottom:1px solid var(--line)}
.search_suggest svg{width:18px;height:18px;color:var(--muted);flex:none}
.search_box input::-webkit-search-cancel-button,.search_box input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.prd_gallery.type_kit .slide_item{aspect-ratio:4/3}
.prd_gallery.type_kit .slide_item img{background:#1e2226}
.footer details.biz_info{margin-top:4px}
.footer details.biz_info summary{cursor:pointer;font-weight:600;color:var(--ink2);list-style:none}
.footer details.biz_info summary::after{content:" ▾"}
.footer details.biz_info[open] summary{margin-bottom:6px}

/* ===== 메인 배너 — 단색 배경 실사 + 굵은 글씨 + 스티커 ===== */
.main_bnr{position:relative;display:block;color:#fff;container-type:inline-size}
.main_bnr img.bnr_img{width:100%;height:auto;display:block}
.main_bnr .bnr_txt{position:absolute;left:0;right:0;top:0;padding:9cqw 7cqw 0}
.main_bnr .bnr_txt.align_c{text-align:center}
.main_bnr .bnr_label{display:inline-block;background:#fff;border-radius:99px;padding:1.4cqw 4cqw;font-size:3.8cqw;font-weight:800;letter-spacing:-.2px}
.main_bnr .bnr_tit{font-family:"Jua","Pretendard Variable",sans-serif;font-weight:400;font-size:17cqw;line-height:1.02;letter-spacing:-.5px;margin-top:3cqw;color:#fff;text-shadow:0 .8cqw 0 var(--sh,rgba(0,0,0,.2))}
.main_bnr .bnr_tit.size_s{font-size:13.5cqw;line-height:1.1}
.main_bnr .bnr_sub{margin-top:3cqw;font-size:4.6cqw;font-weight:800;color:#fff;text-shadow:0 .4cqw 0 var(--sh)}
.main_bnr .deco{position:absolute;display:block;font-style:normal;line-height:0}
.main_bnr .deco svg{width:100%;height:auto}
.main_bnr .bnr_sticker{position:absolute;border-radius:4cqw;padding:2.4cqw 3.4cqw;font-size:4.2cqw;font-weight:800;line-height:1.25;text-align:center;box-shadow:0 1.4cqw 0 rgba(0,0,0,.12)}
.main_bnr .bnr_sticker small{font-size:3.2cqw;font-weight:700;opacity:.8}
.main_bnr .deco_txt{position:absolute;font-family:"Jua",sans-serif;font-size:7cqw;transform:rotate(-12deg)}
.main_bnr .bnr_tit_wrap{display:flex;align-items:center;justify-content:center;gap:3cqw}
.main_bnr .bnr_bubble{position:relative;background:#fff;border-radius:6cqw;padding:3cqw 4cqw;font-family:"Jua",sans-serif;font-size:11cqw;line-height:1;text-align:center}
.main_bnr .bnr_bubble::after{content:"";position:absolute;right:-2.6cqw;bottom:4cqw;border:2.2cqw solid transparent;border-left:3.6cqw solid #fff;border-right:0}
.main_bnr .bnr_tit_wrap .bnr_tit{margin-top:0;font-size:22cqw}
.main_bnr .bnr_caption{position:absolute;left:0;right:0;bottom:6cqw;display:flex;flex-direction:column;align-items:center;gap:1.6cqw}
.main_bnr .bnr_caption span{background:#fff;color:#1d2b12;font-size:4.4cqw;font-weight:800;padding:1.4cqw 3.4cqw;letter-spacing:-.3px}
/* 홈 기부 영역 */
.box_donate{margin:0 var(--gut);border-radius:var(--r);background:#f7e2c6;display:grid;grid-template-columns:1fr 44%;align-items:end;overflow:hidden}
.box_donate .area_txt{padding:22px 0 22px 20px}
.box_donate .txt_label{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:#b0602a}
.box_donate .txt_label svg{width:16px;height:16px}
.box_donate h3{font-size:20px;line-height:1.35;font-weight:800;letter-spacing:-.5px;margin-top:6px;color:#3b2a20}
.box_donate p{font-size:14px;margin-top:6px;color:#6b5240;line-height:1.55}
.box_donate .tag_list{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.box_donate .tag_list i{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:12px;font-weight:700;background:#fff;color:#6b5240;border-radius:99px;padding:4px 9px}
.box_donate .tag_list svg{width:13px;height:13px}
.box_donate img{width:100%;height:auto}

.main_bnr .bnr_tit.size_m{font-size:13cqw;line-height:1.02}
.main_bnr .bnr_tit.size_xs{font-size:11cqw;line-height:1.08}
.main_bnr .bnr_txt{padding-top:7cqw}

/* ===== 타이포그래피 · 가독성 · 웹 표준 (10/14) ===== */
:root{--muted:#666d76;--pc-raw:var(--pc);
  --fs-display:26px;--fs-h2:20px;--fs-h3:17px;--fs-body:15px;--fs-sm:14px;--fs-xs:13px;--fs-label:12px;
  --lh-tight:1.3;--lh-body:1.6}
body{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:-.15px;font-feature-settings:"ss06"}
h1,h2,h3{font-weight:700}
.tit_area h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.4px;line-height:var(--lh-tight)}
.tit_area .txt_sub{font-size:var(--fs-xs);font-weight:600;letter-spacing:0;margin-bottom:6px}
.prd_info h1{font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.4px}
.prd_item .prd_name{font-size:var(--fs-body);line-height:1.45;font-weight:400;color:var(--ink)}
.prd_item .prd_brand{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.price,.prd_info .price_area b,.result_price .txt_val,.kpi_item b,.card_box .num,.box_kcal .txt_val b,.order_sum dl,.cart_item b{font-variant-numeric:tabular-nums}
.price{font-weight:700;font-size:16px}
.txt_note,.footer{line-height:var(--lh-body)}
.detail_visual h2{font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-.6px}
.detail_sec h3{font-size:21px;font-weight:700;line-height:1.45;letter-spacing:-.5px}
.detail_sec p,.detail_visual p{font-size:var(--fs-body);line-height:1.75}
.survey .tit_question{font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-.6px}
.result_visual h1{font-size:23px;font-weight:700}
.result_card .area_tit b{font-weight:700}
.opt_item{font-weight:500}
.opt_item.on{font-weight:700}
/* 배지 — 가운데 정렬 */
.badge{display:inline-flex;align-items:center;justify-content:center;text-align:center;height:22px;padding:0 8px;line-height:1;font-size:var(--fs-label);font-weight:700;vertical-align:middle;white-space:nowrap}
.badge_list{align-items:center}
.chip{justify-content:center;text-align:center;line-height:1}
.tab_bar a,.admin_tab a{justify-content:center;text-align:center;line-height:1.2}
.btn_icon .num{line-height:1;padding:0 4px}
.state{display:inline-flex;align-items:center;justify-content:center;height:24px;line-height:1}
/* 메인 헤더 h1 */
h1.logo{margin:0;font-size:20px;font-weight:800}
h1.logo a{display:block;overflow:hidden;text-overflow:ellipsis}
/* 상세 · 라인 누끼 사진 */
.detail_visual img.img_cut{box-shadow:none;border-radius:0;background:none;width:70%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.14))}
.prd_item.size_s .prd_thumb img[src*="-cut"],.kit_line .line_head .line_thumb img[src*="-cut"]{background:transparent;padding:4px}
/* 버튼으로 바뀐 요소가 링크와 같은 모양이 되게 */
.list_menu button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px var(--gut);font-size:16px;border-bottom:1px solid var(--line);text-align:left}
.list_menu button svg{width:18px;height:18px;color:var(--muted)}
.my_status button{text-align:center;padding:14px 0}
.my_status button+button{border-left:1px solid var(--line)}
.my_status button b{display:block;font-size:19px;font-weight:800}
.my_status button span{font-size:13px;color:var(--muted)}
.footer .footer_link button{font-weight:600;color:var(--ink2);font-size:14px}
.card_box h3 button{font-size:13px;color:var(--muted)}
.admin_tab button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:600;color:#7b828b}
.admin_tab button svg{width:22px;height:22px}
.box_alert button.btn_go{margin-left:auto;font-size:14px;text-decoration:underline;white-space:nowrap;color:inherit}
.list_rank li button{display:flex;gap:10px;padding:8px 0;font-size:15px;width:100%;text-align:left}
.list_rank li button b{width:18px;color:var(--pc);font-weight:800}
button.search_suggest{width:100%;text-align:left}
/* 포커스가 보이게 */
:focus-visible{outline:2px solid var(--pc);outline-offset:2px;border-radius:6px}
.skip_nav{position:absolute;left:8px;top:-60px;z-index:100;background:#191b1e;color:#fff;padding:10px 14px;border-radius:8px;font-weight:700}
.skip_nav:focus{top:8px}
main#wrap{display:block;outline:none}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.slide_list{transition:none!important}}
.tab_bar a{color:#737a83}

/* ===== 메인 상단: 로고 + 기획전 탭 (검색은 아이콘) ===== */
.gnb{border-bottom:1px solid var(--line);background:#fff;padding:0}
.gnb_list{display:flex;gap:22px;list-style:none;overflow-x:auto;scrollbar-width:none;padding:0 var(--gut);-webkit-overflow-scrolling:touch}
.gnb_list::-webkit-scrollbar{display:none}
.gnb_list li{flex:none}
.gnb_list a{display:block;padding:11px 0 10px;font-size:15px;font-weight:500;color:#4a4f56;border-bottom:2.5px solid transparent;white-space:nowrap;letter-spacing:-.3px}
.gnb_list a.on{color:var(--ink);font-weight:800;border-bottom-color:var(--pc)}
.gnb_list a.type_point{color:#d63c2f;font-weight:700}
.header .header_inner{height:52px}
/* ===== 메인 배너: 높이를 줄여 아래 카테고리가 보이게 (사진은 자르지 않고 배경색으로 채움) ===== */
.main_bnr{aspect-ratio:1/1.02;overflow:hidden}
.main_bnr img.bnr_img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:auto;height:100%;max-width:none}
.main_bnr .bnr_txt{z-index:2}
.main_bnr .deco,.main_bnr .bnr_sticker,.main_bnr .bnr_caption{z-index:3}
/* 배너 글꼴 — 국내 배너 스타일: 굵은 고딕, 좁은 자간, 강조 색 */
.main_bnr .bnr_tit,.donate_visual .bnr_tit{font-family:"GmarketSans","Pretendard Variable",sans-serif;font-weight:700;letter-spacing:-.06em;line-height:1.12;text-shadow:none}
.main_bnr .bnr_tit{font-size:11.5cqw}
.main_bnr .bnr_tit.size_m{font-size:11.5cqw}
.main_bnr .bnr_tit.size_xs{font-size:9.6cqw}
.main_bnr .bnr_tit_wrap .bnr_tit{font-size:15cqw}
.main_bnr .bnr_bubble{font-family:"GmarketSans",sans-serif;font-weight:700;font-size:8cqw;letter-spacing:-.05em;line-height:1.1}
.main_bnr .bnr_label{font-family:"GmarketSans",sans-serif;font-weight:500;font-size:3.6cqw;letter-spacing:-.02em;padding:1.6cqw 3.6cqw 1.2cqw}
.main_bnr .bnr_caption span{font-size:4cqw;font-weight:700;letter-spacing:-.04em}
.main_bnr .bnr_sticker{font-family:"GmarketSans",sans-serif;font-weight:700;letter-spacing:-.04em}
.main_bnr .bnr_txt{padding-top:6cqw}
/* ===== 상품 썸네일: 칸을 꽉 채움 · 2~3장 넘김 ===== */
.prd_thumb img{object-fit:cover!important;background:#fff}
.prd_thumb.type_slide{position:relative}
.thumb_list{display:flex;list-style:none;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.thumb_list::-webkit-scrollbar{display:none}
.thumb_list li{flex:none;width:100%;height:100%;scroll-snap-align:start}
.thumb_list img{width:100%;height:100%;object-fit:cover}
.thumb_list img.img_cut{object-fit:contain!important;background:transparent!important;padding:8%}
.thumb_dot{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:4px;pointer-events:none}
.thumb_dot i{width:5px;height:5px;border-radius:99px;background:rgba(0,0,0,.18)}
.thumb_dot i.on{width:12px;background:rgba(0,0,0,.55)}
/* ===== 상세 수량 ===== */
.opt_qty{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.opt_qty .txt_tit{font-size:15px;font-weight:600}
.opt_qty .total{margin-left:auto;font-size:15px}
.opt_qty .total b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
/* ===== 따뜻한 한끼 ===== */
.donate_visual{position:relative;background:#f2a35d;container-type:inline-size;aspect-ratio:1/1.05;overflow:hidden}
.donate_visual img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;width:auto;max-width:none}
.donate_visual .bnr_txt{position:absolute;left:0;right:0;top:0;padding:8cqw 7cqw 0;text-align:center;z-index:2}
.donate_visual .bnr_label{display:inline-block;background:#fff;border-radius:99px;padding:1.4cqw 4cqw;font-size:3.8cqw;font-weight:700}
.donate_visual .bnr_tit{font-size:10cqw;color:#fff;margin-top:3cqw}
.donate_visual .bnr_tit em{font-style:normal;color:#fff6d8}
.tit_lg{font-size:22px;font-weight:700;line-height:1.4;letter-spacing:-.5px}
.txt_body{margin-top:12px;font-size:15px;line-height:1.75;color:var(--ink2)}
.list_point{list-style:none;margin-top:22px;display:grid;gap:10px}
.list_point li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:16px;border-radius:12px;background:var(--soft)}
.list_point b{font-family:"GmarketSans",sans-serif;font-size:20px;color:#d97a3a}
.list_point strong{display:block;font-size:16px}
.list_point span{font-size:14px;color:var(--ink2)}
/* 레이아웃 */
#wrap{max-width:var(--frame);margin:0 auto;min-height:100vh;background:var(--bg);position:relative;overflow-x:hidden}
#container{display:block}
.main_bnr img.bnr_img,.donate_visual img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)}



/* 배너 아래 문구 — 띠 없이, 배너 색 그림자 위 흰 글자 */
.main_bnr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to top,var(--scrim,rgba(0,0,0,.5)) 0%,transparent 100%);z-index:2;pointer-events:none}
.main_bnr .bnr_caption{left:7cqw;right:7cqw;bottom:7cqw;align-items:flex-start;gap:1.2cqw;text-align:left}
.main_bnr .bnr_caption span{background:none;padding:0;color:#fff;text-shadow:0 .3cqw 2.4cqw rgba(0,0,0,.18)}
.main_bnr .bnr_caption span:first-child{font-family:"GmarketSans","Pretendard Variable",sans-serif;font-weight:700;font-size:5.6cqw;letter-spacing:-.05em;line-height:1.2}
.main_bnr .bnr_caption span:last-child{font-size:3.7cqw;font-weight:500;letter-spacing:-.03em;opacity:.92}
.main_bnr .bnr_caption span:last-child::after{content:"";display:inline-block;width:1.5cqw;height:1.5cqw;border-top:.45cqw solid currentColor;border-right:.45cqw solid currentColor;transform:rotate(45deg);margin-left:1.4cqw;vertical-align:.3cqw}

/* ===== 메인 배너 — 장마다 다른 구도 ===== */
.main_bnr.no_scrim::after{display:none}
.main_bnr .hand,.main_bnr .note_hand{position:absolute;z-index:3;font-family:"Gaegu",cursive;font-weight:700;color:#fff;letter-spacing:-.02em}
.main_bnr .hand{font-size:8cqw}
.main_bnr .note_hand{font-size:5.4cqw;line-height:1.1;text-align:right;transform:rotate(-6deg)}
.main_bnr .bnr_prd{position:absolute;z-index:2;filter:drop-shadow(0 2.4cqw 2.4cqw rgba(0,0,0,.18))}
/* 1. 밸런스키트 — 한발 물러선 강아지 + 제품 누끼, 위쪽 양 끝 문구 */
.bnr_kit_v img.bnr_img{height:78%;left:38%}
.bnr_kit_v .bnr_prd.p1{width:27%;right:6%;bottom:21%;transform:rotate(7deg)}
.bnr_kit_v .bnr_prd.p2{width:22%;right:25%;bottom:15%;transform:rotate(-6deg)}
.bnr_topline{position:absolute;left:6cqw;right:6cqw;top:5cqw;z-index:3;display:flex;align-items:center;gap:3cqw;color:#fff;font-family:"GmarketSans",sans-serif;font-weight:500;font-size:3.4cqw;letter-spacing:-.02em}
.bnr_topline i{flex:1;height:1px;background:rgba(255,255,255,.75)}
.bnr_kit_v .bnr_txt{padding-top:12cqw}
/* 2. 맛 한번 볼까 — 크게 당긴 강아지, 타원 스티커, 손글씨 메모 */
.bnr_sample_v img.bnr_img{height:158%;top:-52%;bottom:auto;left:46%}
.bnr_sample_v .bnr_txt{padding:7cqw 0 0 6cqw}
.bnr_sample_v .bnr_bubble{display:inline-block;font-size:7.6cqw;line-height:1.08;text-align:left;padding:3cqw 4cqw;transform:rotate(-4deg)}
.bnr_oval{position:absolute;z-index:3;display:grid;place-items:center;width:23cqw;height:15cqw;border-radius:50%;font-family:"GmarketSans",sans-serif;font-weight:700;font-size:4cqw;line-height:1.05;text-align:center;letter-spacing:-.03em;box-shadow:0 1cqw 0 rgba(0,0,0,.12)}
.bnr_oval.type_s{width:20cqw;height:13cqw;font-size:3.5cqw}
.bnr_sample_v .bnr_prd.p3{width:24%;right:7%;bottom:22%;transform:rotate(-12deg)}
.bnr_sample_v .bnr_caption{right:auto}
/* 3. 따뜻한 한끼 — 큰 제목 가운데, 아래에서 빼꼼한 얼굴, 기울인 네모 · 세모 */
.bnr_donate_v img.bnr_img{height:212%;top:auto;bottom:-112%;left:47%}
.bnr_donate_v .bnr_txt{padding-top:15cqw}
.bnr_donate_v .bnr_tit{font-size:12.5cqw}
.bnr_eng{font-family:"GmarketSans",sans-serif;font-weight:700;font-size:4cqw;letter-spacing:.18em;color:rgba(255,255,255,.9)}
.bnr_sub2{margin-top:3cqw;font-size:3.8cqw;font-weight:600;color:#fff;letter-spacing:-.03em}
.bnr_square{position:absolute;z-index:3;width:19cqw;height:19cqw;display:grid;place-items:center;background:#3d6cf0;color:#fff;font-family:"GmarketSans",sans-serif;font-weight:700;font-size:3.8cqw;line-height:1.1;text-align:center;transform:rotate(12deg);box-shadow:0 1cqw 0 rgba(0,0,0,.12)}
.bnr_tri{position:absolute;z-index:3;width:0;height:0;border-top:11cqw solid transparent;border-bottom:11cqw solid transparent;border-left:17cqw solid #1f9d6b;transform:rotate(-14deg)}
.bnr_tri b{position:absolute;left:-15cqw;top:-4.6cqw;width:11cqw;color:#fff;font-family:"GmarketSans",sans-serif;font-size:3.2cqw;line-height:1.1;text-align:center}
.main_bnr .deco.curve{left:0;top:0;width:100%;z-index:0}
.bnr_donate_v img.bnr_img{z-index:1}
.main_visual .slide_count{top:auto!important;bottom:5cqw;right:5cqw;z-index:4}
.main_visual{container-type:inline-size}
.bnr_kit_v .bnr_prd.p1{bottom:31%;width:25%}
.bnr_kit_v .bnr_prd.p2{bottom:27%;width:20%}
.bnr_donate_v .bnr_tit{font-size:11.5cqw}
.bnr_square{width:16cqw!important;height:16cqw!important;font-size:3.3cqw!important;top:4%!important;right:4%!important}
.main_visual .slide_count{top:auto!important;bottom:14px!important;right:14px!important}

/* ===================== 두 번째 샘플 (라이펫 기준) — .theme_clean ===================== */
.theme_clean{--fs-tab:14px;--fs-sec:18px;--fs-name:13px;--fs-price:16px}
.theme_clean .header .header_inner{height:54px}
.theme_clean .logo{font-size:20px;font-weight:800}
.theme_clean .gnb_list{gap:20px}
.theme_clean .gnb_list a{font-size:var(--fs-tab);font-weight:500;color:#949494;padding:12px 0 11px;border-bottom-width:2px}
.theme_clean .gnb_list a.on{color:var(--pc);font-weight:600;border-bottom-color:var(--pc)}
.theme_clean .gnb_list a.type_point{color:#e2533f;font-weight:600}
/* 배너 — 낮은 가로형 */
.bnr_clean .slide_item{position:relative;display:block;height:190px;overflow:hidden}
.bnr_clean .bnr_txt{position:absolute;left:20px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;z-index:2;max-width:62%}
.bnr_clean .bnr_label{align-self:flex-start;color:#fff;font-size:11px;font-weight:700;letter-spacing:.2px;padding:3px 9px;border-radius:99px;line-height:1.4}
.bnr_clean .bnr_tit{margin-top:10px;font-size:21px;font-weight:700;line-height:1.36;letter-spacing:-.6px;color:#2b2b2b}
.bnr_clean .bnr_tit em{font-style:normal}
.bnr_clean .bnr_desc{margin-top:8px;font-size:13px;color:#555;letter-spacing:-.3px}
.bnr_clean .bnr_img{position:absolute;right:-6px;bottom:0;height:118%;width:auto;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%);mask-image:linear-gradient(to right,transparent 0,#000 22%)}
.bnr_clean .slide_count{top:auto!important;bottom:12px!important;right:14px!important;background:rgba(0,0,0,.35);font-size:12px;padding:2px 9px}
/* 카테고리 — 동그란 바탕 단색 아이콘 한 줄 */
.cate_clean{padding:26px 16px 8px}
.cate_clean ul{display:grid;grid-template-columns:repeat(5,1fr);list-style:none}
.cate_clean a{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:#343434;letter-spacing:-.3px}
.cate_clean .ico{width:48px;height:48px;border-radius:50%;background:color-mix(in srgb,var(--pc-raw) 9%,#f3f5f8);display:grid;place-items:center}
.cate_clean .ico svg{width:30px;height:30px}
/* 섹션 · 상품 줄 */
.section_clean{padding:26px 0 6px}
.theme_clean .tit_area{padding:0 20px;margin-bottom:12px;align-items:center}
.theme_clean .tit_area h2{font-size:var(--fs-sec);font-weight:600;letter-spacing:-.4px;color:#343434}
.theme_clean .btn_more{font-size:14px;font-weight:500;color:#777}
.theme_clean .btn_more::after{content:"";display:inline-block;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin-left:4px;vertical-align:1px}
.prd_row{display:flex;gap:10px;overflow-x:auto;padding:0 20px;scrollbar-width:none;scroll-snap-type:x mandatory}
.prd_row::-webkit-scrollbar{display:none}
.prd_card{flex:none;width:136px;scroll-snap-align:start}
.prd_card .prd_thumb{aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#f4f4f4;border:0}
.prd_card .prd_thumb img{width:100%;height:100%;object-fit:cover}
.prd_card .prd_thumb img.img_cut{object-fit:contain!important;background:transparent!important;padding:10%}
.prd_card .prd_name{margin-top:8px;font-size:var(--fs-name);line-height:20px;height:40px;color:#343434;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.3px}
.prd_card .prd_price{margin-top:2px;font-size:14px;color:#343434}
.prd_card .prd_price b{font-size:var(--fs-price);font-weight:700;font-variant-numeric:tabular-nums}
.prd_card .badge_list{margin-top:6px;gap:3px}
.prd_card .badge{height:20px;font-size:10px;padding:0 6px;border-radius:4px;background:#f3f4f6;color:#343434}
.prd_card .badge.badge_point{background:var(--pc);color:#fff}
.bnr_strip{margin:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:12px;background:#fff6dc}
.bnr_strip .txt_label{display:block;font-size:11px;font-weight:700;color:#a07a00;letter-spacing:.3px}
.bnr_strip b{display:block;font-size:16px;font-weight:700;margin-top:2px;letter-spacing:-.4px}
.bnr_strip .txt_desc{font-size:13px;color:#666}
.bnr_strip img{width:64px;height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.12))}
.theme_clean .box_donate{margin:0 20px}
.theme_clean .tab_bar a{font-size:11px}
.prd_row{scroll-padding-left:20px}
.prd_card .prd_thumb.type_kit{background:#fff;border:1px solid var(--line)}
.prd_card .prd_thumb.type_kit img{object-fit:contain}

/* ===== 두 번째 샘플 상세 (러쉬 + 마마캣 PB) ===== */
.pd2_buy{padding:18px 20px 20px}
.pd2_buy .prd_brand{font-size:13px;color:#777;font-weight:500}
.pd2_buy h1{margin-top:4px;font-size:18px;font-weight:600;line-height:1.45;letter-spacing:-.4px;color:#222}
.pd2_price{margin-top:10px;font-size:15px;color:#222}
.pd2_price b{font-size:22px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.box_ship{margin-top:16px;padding:14px 16px;border-radius:12px;background:#f6f7f9;font-size:13px;color:#555;line-height:1.7}
.box_ship .txt_ship{font-size:14px;color:#222}
.box_ship .txt_ship em{font-style:normal;color:#e2533f;font-weight:700}
.box_ship .txt_ship b{font-weight:700}
.pd2_tab{border-top:8px solid #f4f5f7}
.pd2_tab a{font-size:14px}
.pd2{color:#222}
.pd2_intro{padding:40px 20px 20px;text-align:center}
.pd2_intro .txt_cat{font-size:13px;color:#888}
.pd2_intro h2{margin-top:6px;font-size:21px;font-weight:700;letter-spacing:-.6px;line-height:1.35}
.pd2_intro .txt_eng{display:block;margin-top:4px;font-size:13px;color:#999;letter-spacing:.2px}
.pd2_hero{margin:0 20px;border-radius:14px;aspect-ratio:1/1;display:grid;place-items:center}
.pd2_hero img{width:78%;height:auto}
.pd2_hero img.img_cut{filter:drop-shadow(0 16px 22px rgba(0,0,0,.14))}
.pd2_lead{padding:36px 20px 8px;text-align:center;font-size:19px;font-weight:700;line-height:1.5;letter-spacing:-.5px}
.pd2_sec{padding:40px 20px;text-align:center}
.pd2_sec.bg_gray{background:#f6f7f9}
.pd2_sec .txt_chapter{display:inline-block;font-family:"GmarketSans",sans-serif;font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--pc)}
.pd2_sec h3{margin-top:8px;font-size:19px;font-weight:700;letter-spacing:-.5px;line-height:1.45}
.pd2_sec p{margin-top:12px;font-size:14px;line-height:1.75;color:#555}
.list_note{display:grid;gap:10px;text-align:left}
.note_item{background:#fff;border-radius:14px;padding:18px}
.note_item .txt_note_label{display:inline-block;border:1px solid #222;border-radius:99px;padding:2px 10px;font-size:11px;font-weight:700}
.note_item b{display:block;margin-top:10px;font-size:16px;font-weight:700;letter-spacing:-.3px}
.note_item p{margin-top:6px;font-size:14px;line-height:1.65;color:#555}
.tbl_compare{margin-top:20px;border-radius:12px;overflow:hidden;border:1px solid #e6e8eb}
.tbl_compare table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.tbl_compare th,.tbl_compare td{padding:12px 8px;border-bottom:1px solid #eef0f2;line-height:1.45;word-break:keep-all}
.tbl_compare thead th{background:#f6f7f9;font-weight:600;color:#666}
.tbl_compare thead th.on{background:var(--pc);color:#fff}
.tbl_compare tbody th{font-weight:600;color:#666;background:#fbfbfc}
.tbl_compare td.on{font-weight:700;color:#222;background:color-mix(in srgb,var(--pc) 6%,#fff)}
.tbl_compare tr:last-child>*{border-bottom:0}
.pd2_photo img{width:100%;height:auto}
.box_howto{background:#fff;border:1px solid #e6e8eb;border-radius:14px;padding:24px 20px;text-align:left}
.box_howto h3{margin:0;font-size:17px}
.box_howto p{margin-top:10px}
.tit_good{font-size:20px!important;font-family:"GmarketSans",sans-serif;letter-spacing:-.02em!important}
.list_good{list-style:none;margin-top:18px;display:grid;gap:4px;text-align:left}
.list_good li{display:flex;gap:14px;align-items:center;padding:14px 4px;border-bottom:1px solid #e6e8eb}
.list_good li:last-child{border-bottom:0}
.list_good .ico{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--pc);flex:none}
.list_good .ico svg{width:18px;height:18px}
.list_good b{display:block;font-size:15px;font-weight:600}
.list_good span{font-size:13px;color:#777}
.tit_info{font-size:17px!important;text-align:left}
.list_info{margin-top:14px;border-top:1px solid #222;text-align:left}
.list_info>div{display:grid;grid-template-columns:96px 1fr;border-bottom:1px solid #eef0f2;font-size:13px}
.list_info dt{padding:12px 4px;color:#777}
.list_info dd{padding:12px 4px;color:#333;line-height:1.55}
.theme_clean .fixed_btn_area .btn_dark{background:#222}


/* 샘플 목록으로 돌아가는 버튼 — 휴대폰 화면 바깥 왼쪽 위에 고정 (영업 시연용) */
.btn_sample_list{position:fixed;z-index:90;left:20px;top:20px;display:flex;align-items:center;gap:6px;height:40px;padding:0 16px 0 13px;border-radius:99px;background:#1b1d21;color:#fff;font-size:13px;font-weight:700;letter-spacing:-.2px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.btn_sample_list:hover{background:#0074e0}
/* 화면이 좁아 바깥 자리가 없을 때(실제 휴대폰)만 오른쪽 아래에 작게 */
@media (max-width:740px){.btn_sample_list{left:auto;top:auto;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));height:36px;padding:0 13px 0 11px;font-size:12px;background:rgba(27,29,33,.86)}}
.btn_sample_list svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.btn_sample_list:focus-visible{outline:2px solid var(--pc);outline-offset:2px}

/* 배너 마우스 끌기 */
.slide_wrap{cursor:grab;user-select:none;-webkit-user-select:none}
.slide_wrap.is_drag{cursor:grabbing}
.slide_wrap img{-webkit-user-drag:none}

/* ===================== 메인 섹션 흐름 — 샘플 2 · 3 공통 (10/15) =====================
   마감은 샘플 2, 간격은 샌크몰(섹션 위 32 · 아래 36), 섹션은 색 바탕으로 나눈다 */
.section_flow{padding:32px 0 36px}
.section_flow + .section_flow:not(.bg_soft):not(.type_story){padding-top:8px}
.section_flow.bg_soft + .section_flow,.section_flow + .section_flow.bg_soft{padding-top:32px}
.section_flow.bg_soft{background:#f6f7f9}
.section_flow .box_donate{margin:0 20px}

/* 카테고리 6 — 앞 2개(키트 · 샘플)는 들어가는 입구라 진한 색 원 */
.cate_flow{padding:24px 12px 28px;border-bottom:8px solid #f6f7f9}
.cate_flow ul{display:grid;grid-template-columns:repeat(6,1fr);list-style:none}
.cate_flow a{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:#343434;letter-spacing:-.5px;white-space:nowrap}
.cate_flow .ico{width:48px;height:48px;border-radius:50%;background:color-mix(in srgb,var(--pc-raw) 9%,#f3f5f8);display:grid;place-items:center}
.cate_flow .ico svg{width:30px;height:30px}
.cate_flow .type_gate{font-weight:700;color:var(--pc)}
.cate_flow .type_gate .ico{background:var(--pc-raw);box-shadow:0 4px 10px color-mix(in srgb,var(--pc-raw) 30%,transparent)}
.cate_flow .type_gate .ico [fill="var(--pc-raw)"]{fill:#fff}
.cate_flow .type_gate .ico [fill^="color-mix"]{fill:rgba(255,255,255,.55)}
.cate_flow .type_gate .ico [fill="#fff"]{fill:var(--pc-raw);opacity:1}
.cate_flow .type_gate .ico [stroke="#fff"]{stroke:var(--pc-raw)}

/* 밸런스키트 전시 — 상품을 크게 보여 주는 자리 (포스웰 전시형) */
.kit_show{margin:0 20px;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 1px 0 #eceef1}
.kit_show .img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.kit_show .img img{width:100%;height:100%;object-fit:cover}
.kit_show .badge_free{position:absolute;left:12px;top:12px;height:24px;padding:0 9px;border-radius:6px;background:var(--pc);color:#fff;font-size:11px;font-weight:700;line-height:24px}
.kit_show .info{padding:16px 16px 18px}
.kit_show .txt_lead{font-size:14px;line-height:1.55;color:#4a4f56;letter-spacing:-.3px}
.list_size{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:14px;list-style:none}
.list_size a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:6px;padding:10px 12px;border:1px solid #e6e8eb;border-radius:10px}
.list_size b{font-size:14px;font-weight:700;color:#343434}
.list_size span{align-self:center;font-size:11px;color:#999}
.list_size em{grid-column:1 / -1;margin-top:2px;font-style:normal;font-size:13px;font-weight:600;color:var(--pc);font-variant-numeric:tabular-nums}
.btn_flow{display:flex;align-items:center;justify-content:center;height:48px;margin-top:14px;border-radius:10px;background:#222;color:#fff;font-size:15px;font-weight:700;letter-spacing:-.3px}

/* 알약 탭 */
.tab_pill{display:flex;gap:6px;padding:0 20px 14px;overflow-x:auto;scrollbar-width:none}
.tab_pill::-webkit-scrollbar{display:none}
.tab_pill button{flex:none;height:32px;padding:0 14px;border:1px solid #dfe2e6;border-radius:99px;background:#fff;font-size:13px;color:#555;letter-spacing:-.3px}
.tab_pill button.on{background:#222;border-color:#222;color:#fff;font-weight:600}
.prd_card[hidden]{display:none}

/* 만드는 이야기 — 어둡게 깐 사진 띠 */
.section_flow.type_story{padding-top:0}
.bnr_story{position:relative;display:block;height:210px;margin-bottom:20px;overflow:hidden;background:#333}
.bnr_story img{width:100%;height:100%;object-fit:cover;filter:brightness(.5)}
.bnr_story span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 24px}
.bnr_story small{font-size:12px;font-weight:600;opacity:.85;letter-spacing:.2px}
.bnr_story b{margin-top:6px;font-size:21px;font-weight:700;letter-spacing:-.6px}
.bnr_story em{margin-top:8px;font-style:normal;font-size:13px;line-height:1.5;opacity:.85}

/* 샘플 3 — 위쪽만 시원스쿨 인사 (그라데이션은 흰색으로 끝나 아래 섹션과 이어진다) */
.rf_siwon.type_top{background:linear-gradient(180deg,#dfe9ff 0,#eef1ff 150px,#fff 100%);padding-bottom:18px}
.rf_siwon.type_top + .bnr_clean{margin-top:0}
/* 샘플 3 바로가기 칩 — 4개가 한눈에 보이게 2줄 */
.rf_siwon.type_top .sw_chips ul{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible}
.rf_siwon.type_top .sw_chips a{padding:10px 12px 10px 10px;font-size:14px;min-width:0}

/* 따뜻한 한끼 띠 배너 — 메인 중간 (샘플 4 팝콘플레이에서 옮김, 10/15) */
.bnr_meal{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 20px;padding:16px 14px 16px 20px;border-radius:14px;background:linear-gradient(110deg,#e9e2ff,#dbe9ff)}
.bnr_meal small{display:block;font-size:12px;font-weight:600;color:#7663c9;letter-spacing:-.2px}
.bnr_meal b{display:block;margin-top:4px;font-size:16px;font-weight:700;line-height:1.4;letter-spacing:-.4px;color:#33296e}
.bnr_meal img{flex:none;width:72px;height:72px;object-fit:contain;mix-blend-mode:multiply}

/* ===================== 배너 공통 규칙 (.bv) — 샘플 1 배너 규칙을 다른 샘플에도 (10/15) =====================
   단색 바탕 + 실사(장마다 거리 다르게) · GmarketSans 통통한 제목 + 한 단어 색 강조 · 기울인 스티커 ·
   손글씨(Gaegu) · 손그림 · 누끼 제품. 흰 글 상자 금지. 크기는 배너 폭 기준(cqw)이라 화면이 커져도 비율 유지 */
.bv{position:relative;display:block;overflow:hidden;container-type:inline-size;color:#fff}
.bv .ph{position:absolute;z-index:1;width:auto;max-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 90%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 90%,transparent 100%)}
.bv .ph.type_round{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,#000 62%,transparent 100%)}
.bv .ph.type_left{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 24%);mask-image:linear-gradient(to left,transparent 0,#000 24%)}
.bv .txt{position:absolute;z-index:3}
.bv .txt.align_c{text-align:center}
.bv .tit{font-family:"GmarketSans","Pretendard Variable",sans-serif;font-weight:700;letter-spacing:-.06em;line-height:1.12;color:#fff}
.bv .sub{margin-top:2cqw;font-size:3.6cqw;font-weight:600;letter-spacing:-.04em;opacity:.95}
.bv .eng{font-family:"GmarketSans",sans-serif;font-weight:500;font-size:3.3cqw;letter-spacing:.24em}
.bv .bub{position:relative;display:inline-block;background:#fff;border-radius:5cqw;padding:3cqw 4cqw 2.4cqw;font-family:"GmarketSans",sans-serif;font-weight:700;font-size:7cqw;line-height:1.08;letter-spacing:-.05em;transform:rotate(-4deg);box-shadow:0 1cqw 0 rgba(0,0,0,.08)}
.bv .bub::after{content:"";position:absolute;right:-2.6cqw;bottom:3.4cqw;border:2.2cqw solid transparent;border-left:3.6cqw solid #fff;border-right:0}
.bv .bub.type_down::after{right:auto;left:50%;bottom:-3.2cqw;margin-left:-2cqw;border:2cqw solid transparent;border-top:3.4cqw solid #fff;border-bottom:0}
.bv .hand,.bv .note{position:absolute;z-index:3;font-family:"Gaegu",cursive;font-weight:700;color:#fff;letter-spacing:-.02em}
.bv .hand{font-size:7cqw}
.bv .note{font-size:4.6cqw;line-height:1.1;text-align:right;transform:rotate(-6deg)}
.bv .prd{position:absolute;z-index:2;filter:drop-shadow(0 2cqw 2cqw rgba(0,0,0,.18))}
.bv .deco{position:absolute;z-index:3;display:block;font-style:normal;line-height:0}
.bv .deco svg{width:100%;height:auto}
.bv .deco.curve{left:0;top:0;width:100%;z-index:0}
.bv .bnr_topline{z-index:3}
/* 낮은 가로 배너(샘플 2 · 3) · 띠 배너(가운데) · 큰 배너(샘플 4) 높이 */
.bv_strip{margin:0 20px;border-radius:14px;aspect-ratio:335/124}

/* ===================== 카드형 메인 배너 — 샘플 2 피크 카드(A) · 샘플 4 가운데 카드(D), 아이스크림몰 레퍼런스 ===================== */
.bnr_cards{padding:14px 0 6px}
.bnr_cards .slide_list{gap:10px}
.bnr_cards .slide_item{border-radius:18px;overflow:hidden}
.bnr_cards .bv .lb{display:inline-block;padding:1.2cqw 3cqw 1cqw;border-radius:99px;background:rgba(255,255,255,.26);font-family:"GmarketSans",sans-serif;font-weight:500;font-size:3.2cqw;letter-spacing:-.01em}
.bnr_cards .slide_count{bottom:auto!important;top:auto!important}
/* A — 피크 카드, 글은 카드 안 아래. 사진은 카드 바탕색으로 녹아든다 */
.bnr_cards.type_a .slide_list{padding:0 20px}
.bnr_cards.type_a .slide_item{width:calc(100% - 52px);aspect-ratio:323/380}
.card_a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;z-index:2;background:linear-gradient(to top,var(--bg) 48%,transparent);pointer-events:none}
.card_a .ph{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 66%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 66%,transparent 100%)}
.card_a .sub{font-size:3.8cqw}
.bnr_cards.type_a .slide_count{bottom:calc(6px + 7.5%)!important;right:42px!important;background:rgba(0,0,0,.22)!important}

.card_a .ph.type_round{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%)}
.bv .kicker{font-family:"Pretendard Variable",Pretendard,sans-serif;font-weight:500;font-size:3.9cqw;letter-spacing:-.03em;line-height:1.3}

/* F — 펫프렌즈 메인 배너 그대로 (샘플 4) : 정사각 카드 + 양옆 카드 살짝 · ‹ › 와 장 수 · 2 × 2 색 도형 위 제품 */
.bnr_cards.type_f{padding:12px 0 4px}
.bnr_cards.type_f .slide_list{padding:0 20px;gap:10px}
.bnr_cards.type_f .slide_item{width:100%;aspect-ratio:1;border-radius:20px}
.card_f .fb_tit{position:absolute;z-index:3;left:7cqw;top:8cqw;right:7cqw;font-family:"GmarketSans","Pretendard Variable",sans-serif;font-weight:700;letter-spacing:-.05em;line-height:1.14}
.card_f .fb_tit b{display:block;font-size:11cqw}
.card_f .fb_tit span{display:block;margin-top:2.6cqw;font-size:8.2cqw;color:#fff}
.card_f .fb_tit i{font-style:normal}
.fb_grid{position:absolute;z-index:2;right:6cqw;bottom:6cqw;display:grid;grid-template-columns:repeat(2,23cqw);gap:2.4cqw}
.fb_sh{position:relative;width:23cqw;height:23cqw;display:grid;place-items:center;--r:30%}
.fb_sh::before{content:"";position:absolute;inset:0;background:var(--c);border-radius:var(--r)}
.fb_sh.sh_a{--r:50% / 34%}
.fb_sh.sh_c{--r:50%}
.fb_sh.sh_d{--r:11.5cqw 11.5cqw 2cqw 2cqw}
.fb_sh.sh_b::before{border-radius:3cqw;-webkit-mask:radial-gradient(circle at 50% -2cqw,transparent 7cqw,#000 7.1cqw) top/100% 51% no-repeat,radial-gradient(circle at 50% calc(100% + 2cqw),transparent 7cqw,#000 7.1cqw) bottom/100% 51% no-repeat;mask:radial-gradient(circle at 50% -2cqw,transparent 7cqw,#000 7.1cqw) top/100% 51% no-repeat,radial-gradient(circle at 50% calc(100% + 2cqw),transparent 7cqw,#000 7.1cqw) bottom/100% 51% no-repeat}
.fb_sh img{position:relative;width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 1.4cqw 1.4cqw rgba(0,0,0,.25))}
.fb_sh img.is_ph{width:100%;height:100%;object-fit:cover;border-radius:var(--r);filter:none}
.fb_word{position:relative;font-family:"GmarketSans",sans-serif;font-weight:700;font-size:5.4cqw;line-height:1.05;text-align:center;color:#1d4a12;letter-spacing:-.04em}
.fb_heart{position:relative;width:13cqw;line-height:0}
.fb_heart svg{width:100%;height:auto}
.card_f .fb_cap{position:absolute;z-index:3;left:7cqw;bottom:7cqw;font-size:4.2cqw;font-weight:400;color:rgba(255,255,255,.88);letter-spacing:-.03em}
.card_f .fb_cap b{font-weight:700;color:#fff}
.fb_nav{position:absolute;z-index:4;top:calc(12px + 4%);right:34px;display:flex;gap:6px}
.fb_nav button{width:30px;height:30px;display:grid;place-items:center;background:none;border:0;cursor:pointer}
.fb_nav svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bnr_cards.type_f .slide_count{top:calc(12px + 4% + 36px)!important;bottom:auto!important;right:44px!important;background:none!important;padding:0!important;font-size:15px;font-weight:600;letter-spacing:0;color:#fff}

/* 차분한 형 (샘플 4 배너, 펫프렌즈 「창고대방출」) — 연한 단색 + 은은한 세로 줄무늬 · 굵은 검정 제목 → 보통 설명 · 큰 그림 하나 */
.card_soft{background:repeating-linear-gradient(90deg,var(--bg) 0 9cqw,var(--st) 9cqw 13cqw)}
.card_soft .il{position:absolute;z-index:1;height:auto;mix-blend-mode:multiply}
.card_soft .sf_txt{position:absolute;z-index:3;left:7cqw;top:9cqw;right:7cqw;color:#1b1b1b}
.card_soft .sf_txt h3{font-size:9.4cqw;font-weight:800;line-height:1.22;letter-spacing:-.05em}
.card_soft .sf_txt p{margin-top:3cqw;font-size:4.8cqw;font-weight:400;line-height:1.42;letter-spacing:-.04em;color:#333}
.card_soft .fb_cap{color:#333}
.card_soft .fb_cap b{color:#1b1b1b}
/* 화살표 · 장 수 — 반투명 둥근 네모 (밝은 장 · 어두운 장 모두) */
.fb_nav{gap:8px}
.fb_nav button{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.fb_nav svg{width:18px;height:18px}
.bnr_cards.type_f .slide_count{top:calc(12px + 4% + 44px)!important;right:38px!important;background:rgba(255,255,255,.3)!important;padding:2px 10px!important;border-radius:99px;font-size:13px}
.card_soft .fb_cap{position:absolute;z-index:3;left:7cqw;bottom:7cqw;font-size:4.2cqw;letter-spacing:-.03em}
.fb_nav button{background:rgba(110,110,120,.26)}
.bnr_cards.type_f .slide_count{background:rgba(110,110,120,.3)!important}

/* 사진형 (샘플 4 배너, 펫프렌즈 「집사일기」) — 강아지 사진이 카드를 꽉 채우고 흰 글은 사진 위에 */
.card_photo{background:#222}
.card_photo .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card_photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.34) 0,rgba(0,0,0,0) 42%,rgba(0,0,0,0) 76%,rgba(0,0,0,.28) 100%);pointer-events:none}
.card_photo .pt_txt{position:absolute;z-index:3;left:7cqw;top:9cqw;right:22cqw;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.18)}
.card_photo .pt_txt h3{font-size:8cqw;font-weight:800;line-height:1.28;letter-spacing:-.05em}
.card_photo .pt_txt p{margin-top:2.6cqw;font-size:4.2cqw;font-weight:400;letter-spacing:-.03em;opacity:.92}
.card_photo .fb_cap{position:absolute;z-index:3;left:7cqw;bottom:7cqw;font-size:4.2cqw;color:#fff}

/* ===================== 정렬 맞춤 (10/16) =====================
   기준선: 샘플 1 · 2 · 3은 왼쪽 오른쪽 20px, 샘플 4는 16px. 배너 카드 · 첫 아이콘 · 제목 · 상품 줄 시작을 모두 이 선에 맞춘다 */
.scroll_x{scroll-padding-inline:var(--gut)}           /* 넘김 맞춤이 첫 카드를 화면 끝(0)에 붙이던 것 */
.prd_row,.sc_row{scroll-padding-inline:20px}
/* 카테고리 6 — 칸 가운데 정렬이라 첫 아이콘이 17px에서 시작하던 것 → 첫 아이콘은 왼쪽 선, 끝 아이콘은 오른쪽 선에 */
.cate_flow{padding-left:20px;padding-right:20px}
.cate_flow ul{display:flex;justify-content:space-between}
.cate_flow li{width:48px;display:flex;justify-content:center}
/* 상자 안쪽 글 시작선을 36px(= 바깥 20 + 안쪽 16)로 통일. 테두리 1px 있는 상자는 안쪽 15 */
.step_item{padding:16px 15px}
.order_sum{padding:18px 16px}
.pet_card{padding:18px 15px}
.sub_card{padding:18px 16px}
.box_supp{padding:18px 16px}
.kit_line .line_head{padding:14px 15px}
.sample_list div{padding:12px 16px}
.list_good li{padding:14px 0}
.kit_show .badge_free{left:16px}
.kit_line ul{padding-left:15px;padding-right:15px}
.detail_compare div{padding-left:15px;padding-right:15px}
/* 화면 꽉 찬 배너(샘플 1 메인 · 따뜻한 한끼 화면) 안 글도 아래 섹션 제목과 같은 20px 선에 */
.main_bnr .bnr_caption{left:20px}
.bnr_topline{left:20px;right:20px}
.bnr_sample_v .bnr_txt{padding-left:20px}
/* 샘플 2 피크 카드는 「다음 카드만 오른쪽에」 — 무한 반복 뒤 왼쪽 끝에 이전 카드가 10px 비치던 것 감춤 */
.bnr_cards.type_a .slide_item{transition:opacity .35s}
.bnr_cards.type_a .slide_item.is_before{opacity:0}
.bnr_cards.type_a.is_drag .slide_item.is_before{opacity:1}

/* ===================== 화면 기획 메모 — 휴대폰 화면 바깥 오른쪽 (10/16, js/plan.js) ===================== */
.plan_note{display:none}
@media (min-width:1100px){
  .plan_note{display:block;position:fixed;z-index:90;top:20px;left:calc(50% + var(--frame) / 2 + 28px);width:320px;max-height:calc(100vh - 40px);overflow-y:auto;padding:22px 22px 20px;border-radius:18px;background:#fff;box-shadow:0 8px 30px rgba(20,40,80,.1);color:#1b1d21;font-size:13px;line-height:1.55;letter-spacing:-.2px;scrollbar-width:thin}
}
.plan_note .pn_label{font-size:11px;font-weight:700;color:#0074e0;letter-spacing:.2px}
.plan_note h2{margin-top:4px;font-size:18px;font-weight:800;letter-spacing:-.5px}
.plan_note h3{margin-top:20px;font-size:13px;font-weight:700;color:#1b1d21}
.pn_why{list-style:none;margin-top:8px;display:grid;gap:8px}
.pn_why li{padding:10px 12px;border-radius:10px;background:#f4f6f9}
.pn_why b{display:block;font-size:13px;font-weight:700}
.pn_why span{display:block;margin-top:2px;font-size:12px;color:#5a616b}
.pn_tb{width:100%;margin-top:8px;border-collapse:collapse;font-size:12px}
.pn_tb th{width:96px;padding:8px 8px 8px 0;text-align:left;vertical-align:top;font-weight:700;color:#0074e0;border-top:1px solid #eceef1;word-break:keep-all}
.pn_tb td{padding:8px 0;color:#4a5260;border-top:1px solid #eceef1;word-break:keep-all}
.pn_tb.type_same th{color:#5a616b}
.pn_extra{margin-top:12px;padding:10px 12px;border-radius:10px;background:#fff6dc;font-size:12px;color:#6b5200}
.pn_hint{margin-top:2px;font-size:12px;color:#7a818b}
.pn_store{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.pn_store button{display:flex;align-items:center;gap:7px;height:36px;padding:0 10px;border:1px solid #dfe3e8;border-radius:10px;background:#fff;font-size:13px;font-weight:600;color:#1b1d21;cursor:pointer}
.pn_store button i{width:14px;height:14px;border-radius:50%;flex:none}
.pn_store button.on{border-color:#1b1d21;box-shadow:inset 0 0 0 1px #1b1d21}
.pn_foot{margin-top:16px;font-size:11px;color:#9aa0a8}

/* ===================== 기획전 (주임님 문구 3개, 10/16 · js/plan-exhibit.js) =====================
   사진 한 장 크게 → 굵은 제목 한 줄 → 보통 굵기 설명 두 줄. 꾸밈 없음 (한끼 띠 배너 기준) */
.ex_row{display:flex;gap:12px;overflow-x:auto;padding:0 20px;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none}
.ex_row::-webkit-scrollbar{display:none}
.ex_card{flex:none;width:76%;scroll-snap-align:start;color:#1b1d21}
.ex_card .img{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#eee}
.ex_card .img img{width:100%;height:100%;object-fit:cover}
.ex_card .img i{position:absolute;left:12px;bottom:12px;padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.42);color:#fff;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.2px}
.ex_card b{display:block;margin-top:14px;font-size:17px;font-weight:700;letter-spacing:-.5px;line-height:1.35}
.ex_card .sub{display:block;margin-top:5px;font-size:14px;font-weight:400;line-height:1.5;letter-spacing:-.3px;color:#666}

/* ===================== 본문 최소 14px (10/16 · 수정 시안 회신 3-5) — 배지 · 라벨 · 탭 · 칩 · 장 수는 예외 ===================== */
.prd_card .prd_name{font-size:14px;line-height:20px}
.list_info dt,.list_info dd{font-size:14px}
.box_ship{font-size:14px}
.tbl_compare th,.tbl_compare td{font-size:14px}
.list_size em{font-size:14px}
/* 구매안전서비스 (푸터 · 결제 · 완료 — 설계안 회신 1장 2번) */
.txt_safe{margin-top:12px;font-size:12px;line-height:1.6;color:var(--muted)}
.txt_safe button{margin-left:4px;padding:0;border:0;background:none;font-size:12px;color:var(--ink2);text-decoration:underline;cursor:pointer}
/* 회원가입 (10/16) */
.join_pet{display:flex;align-items:baseline;gap:10px;padding:14px 16px;border-radius:12px;background:var(--soft)}
.join_pet b{font-size:16px}
.join_pet span{font-size:14px;color:var(--muted)}
.join_row{display:flex;gap:8px}
.join_row .input_txt{flex:1}
.join_row .btn{flex:none;height:56px;padding:0 16px}
.chk_agree.type_all{padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line);font-size:15px}
.chk_agree span{flex:1}
.chk_agree .btn_view{flex:none;border:0;background:none;font-size:13px;color:var(--muted);text-decoration:underline;cursor:pointer}
.join_row .input_txt{min-width:0;width:auto}
.join_row .btn{width:auto;min-width:92px}

/* ===================== 샘플 3 상태 카드 히어로 (10/16 다시 기획) — 그림 없이 글자 · 버튼만 ===================== */
.rf_siwon.type_status{background:#fff;padding-bottom:4px}
.sw_status{margin:6px 20px 0;padding:22px 20px 20px;border-radius:18px;background:color-mix(in srgb,var(--pc-raw) 8%,#fff);border:1px solid color-mix(in srgb,var(--pc-raw) 16%,#fff)}
.sw_status .st_kicker{font-size:14px;font-weight:500;color:#5a616b;letter-spacing:-.3px}
.sw_status .st_tit{margin-top:6px;font-size:22px;font-weight:800;line-height:1.36;letter-spacing:-.7px;color:#1b1d21}
.sw_status .st_tit em{font-style:normal;color:var(--pc)}
.sw_status .st_sub{margin-top:6px;font-size:14px;color:#4a5260;letter-spacing:-.3px}
.sw_status .st_flow{display:flex;gap:6px;margin-top:14px;list-style:none;counter-reset:st}
.sw_status .st_flow li{flex:1;padding:8px 4px;border-radius:10px;background:#fff;font-size:12px;font-weight:600;color:#4a5260;text-align:center;counter-increment:st;letter-spacing:-.3px}
.sw_status .st_flow li::before{content:counter(st);display:block;font-size:11px;font-weight:800;color:var(--pc)}
.sw_status .st_steps{display:flex;margin-top:16px;list-style:none}
.sw_status .st_steps li{position:relative;flex:1;padding-top:16px;font-size:12px;font-weight:600;color:#9aa0a8;text-align:center}
.sw_status .st_steps li::before{content:"";position:absolute;left:0;right:0;top:4px;height:4px;background:#dfe3e8}
.sw_status .st_steps li::after{content:"";position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#dfe3e8}
.sw_status .st_steps li.is_done,.sw_status .st_steps li.on{color:var(--pc)}
.sw_status .st_steps li.is_done::before,.sw_status .st_steps li.on::before{background:var(--pc-raw)}
.sw_status .st_steps li.is_done::after,.sw_status .st_steps li.on::after{background:var(--pc-raw)}
.sw_status .st_steps li.on::after{box-shadow:0 0 0 4px color-mix(in srgb,var(--pc-raw) 22%,transparent)}
.sw_status .st_btns{display:flex;gap:8px;margin-top:16px}
.sw_status .st_btns .btn{flex:1;height:48px;font-size:15px}
.sw_status .st_btns .btn_line{background:#fff}
.pn_store.type_state{grid-template-columns:1fr}

/* ===================== 사이트 구조 보강 (10/16 · js/structure.js) ===================== */
/* 전체 메뉴 */
.menu_gate{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 20px}
.menu_gate a{padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--pc-raw) 9%,#fff);border:1px solid color-mix(in srgb,var(--pc-raw) 18%,#fff)}
.menu_gate b{display:block;font-size:15px;font-weight:700;color:var(--pc)}
.menu_gate span{display:block;margin-top:2px;font-size:12px;color:#5a616b}
.menu_tree{display:grid;grid-template-columns:104px 1fr;border-top:1px solid var(--line);border-bottom:8px solid var(--soft);min-height:300px}
.menu_1{list-style:none;background:var(--soft)}
.menu_1 a{display:block;padding:16px 20px;font-size:15px;font-weight:600;color:#5a616b}
.menu_1 a.on{background:#fff;color:var(--ink);font-weight:800}
.menu_2{padding:16px 20px 20px}
.menu_all{display:block;font-size:15px;font-weight:700;padding-bottom:12px;border-bottom:1px solid var(--line)}
.menu_grp{margin-top:16px}
.menu_grp b{display:block;font-size:13px;font-weight:700;color:var(--muted)}
.menu_grp div{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.menu_grp a{font-size:15px;color:var(--ink2)}
.menu_more{padding:20px}
.menu_more b{display:block;font-size:13px;font-weight:700;color:var(--muted)}
.menu_more div{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.menu_more a{padding:8px 14px;border:1px solid var(--line);border-radius:99px;font-size:14px}
/* 목록 2차 거르기 */
.filter_grp{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;padding:0 20px 14px;white-space:nowrap} /* 10/29 옆으로 숨기지 않고 줄바꿈 — PC에서 뒤쪽 분류가 안 보이던 문제 */
.filter_grp::-webkit-scrollbar{display:none}
.filter_grp .chip{height:32px;font-size:13px}
.filter_grp .grp_label{flex:none;margin-left:8px;font-size:12px;font-weight:700;color:var(--muted)}
/* 기획전 */
.ex_col{display:grid;gap:28px;padding:20px}
.ex_col .ex_card{width:auto}
.ex_hero{position:relative;aspect-ratio:4/3;overflow:hidden}
.ex_hero img{width:100%;height:100%;object-fit:cover}
.ex_hero span{position:absolute;left:20px;bottom:16px;padding:3px 10px;border-radius:99px;background:rgba(0,0,0,.42);color:#fff;font-size:12px;font-weight:600}
.ex_head{padding:24px 20px 8px}
.ex_head h1{font-size:24px;font-weight:800;letter-spacing:-.7px;line-height:1.3}
.ex_head p{margin-top:8px;font-size:16px;line-height:1.6;color:#4a5260;letter-spacing:-.3px}
.ex_sec{padding:24px 20px;border-top:8px solid var(--soft)}
.ex_sec h3{font-size:18px;font-weight:700;letter-spacing:-.4px}
.ex_sec p{margin-top:8px;font-size:15px;line-height:1.65;color:#4a5260}
.ex_sec .txt_chapter{display:block;margin-bottom:4px;font-size:12px;font-weight:700;color:var(--pc)}
.ex_sec .prd_list{margin-top:12px;padding:0}
.ex_steps{display:grid;gap:8px;margin-top:14px;list-style:none;counter-reset:ex}
.ex_steps li{display:grid;grid-template-columns:28px 1fr;column-gap:10px;align-items:center;padding:12px 15px;border:1px solid var(--line);border-radius:12px;counter-increment:ex}
.ex_steps li::before{content:counter(ex);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--pc-raw);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center}
.ex_steps b{font-size:15px}
.ex_steps span{font-size:13px;color:var(--muted)}
/* 마이 — 우리 아이 */
.tit_menu span{margin-left:4px;font-weight:600;color:var(--muted)}
.my_pets{display:flex;gap:10px;padding:0 20px 4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-inline:20px}
.my_pets::-webkit-scrollbar{display:none}
.pet_tile{flex:none;width:78%;scroll-snap-align:start;padding:16px 15px;border:1px solid var(--line);border-radius:14px;background:#fff}
.pet_tile .area_top{display:flex;align-items:center;gap:10px}
.pet_tile .area_top b{display:block;font-size:16px}
.pet_tile .area_top span{font-size:13px;color:var(--muted)}
.pet_tile .badge{margin-left:auto;flex:none}
.pet_tile .btn_half{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px}
.pet_tile.type_new,.pet_tile.type_add{display:flex;flex-direction:column;justify-content:center;gap:4px;background:var(--soft);border-style:dashed}
.pet_tile.type_add{width:30%;align-items:center;font-size:14px;font-weight:700;color:var(--muted)}
.pet_tile.type_new b{font-size:16px;color:var(--pc)}
.pet_tile.type_new span{font-size:13px;color:var(--muted)}
.my_next{display:flex;align-items:center;gap:10px;margin:14px 20px 0;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--pc-raw) 9%,#fff)}
.my_next span{font-size:13px;color:#5a616b}
.my_next b{font-size:15px;color:var(--pc)}
.my_next i{margin-left:auto;display:flex}
.my_status a{display:flex;flex-direction:column;align-items:center}
.list_menu a{display:flex;align-items:center;justify-content:space-between}
.list_menu.type_flat{margin:0}
/* 구독 관리 */
.subs_head{padding:22px 20px;border-bottom:8px solid var(--soft)}
.subs_head h1{margin-top:8px;font-size:22px;font-weight:800;letter-spacing:-.6px}
.subs_head p{margin-top:4px;font-size:14px;color:#5a616b}
.subs_steps{display:flex;margin-top:18px;list-style:none}
.subs_steps li{position:relative;flex:1;padding-top:16px;font-size:12px;font-weight:600;color:#9aa0a8;text-align:center}
.subs_steps li::before{content:"";position:absolute;left:0;right:0;top:4px;height:4px;background:#dfe3e8}
.subs_steps li::after{content:"";position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#dfe3e8}
.subs_steps li.is_done,.subs_steps li.on{color:var(--pc)}
.subs_steps li.is_done::before,.subs_steps li.on::before,.subs_steps li.is_done::after,.subs_steps li.on::after{background:var(--pc-raw)}
.subs_dl{margin-top:18px;display:grid;gap:8px}
.subs_dl div{display:flex;justify-content:space-between;font-size:14px}
.subs_dl dt{color:#5a616b}
.subs_dl dd{font-weight:700}
/* 주문 내역 · 교환 반품 */
.order_list{display:grid;gap:10px;padding:16px 20px 30px;background:var(--soft)}
.order_card{padding:16px 15px;border-radius:14px;background:#fff}
.order_top{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.order_top b{font-size:15px;color:var(--ink)}
.order_state{margin-top:8px;font-size:16px;font-weight:800;color:var(--pc)}
.order_item{display:flex;gap:12px;align-items:center;margin-top:12px}
.order_item img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--soft)}
.order_item b{display:block;font-size:14px;font-weight:600}
.order_item span{font-size:13px;color:var(--muted)}
.order_sum{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;font-weight:700}
.order_card .btn_half{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.pay_list a{display:grid;place-items:center;height:50px;border-radius:10px;border:1.5px solid var(--line2);font-size:15px;font-weight:600}
.pay_list a.on{border-color:var(--ink);background:var(--soft)}
.row_item.type_total{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.row_item.type_total b{font-size:18px;color:var(--pc)}

/* ===================== 브랜드 이야기 띠 — 모든 샘플 공통 (10/16 · js/brand-story.js) =====================
   높이를 줄이고(168px) 글은 왼쪽, 사진 속 대상은 오른쪽. 왼쪽만 어둡게 */
.bs_sec + .bs_sec{margin-top:28px}
.bs_band{position:relative;display:block;height:168px;margin:0 20px;border-radius:14px;overflow:hidden;background:#2b2b2b;color:#fff}
.bs_band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bs_band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.66) 0,rgba(0,0,0,.42) 42%,rgba(0,0,0,0) 72%)}
.bs_band .txt{position:absolute;z-index:2;left:20px;top:50%;transform:translateY(-50%);max-width:58%}
.bs_band small{display:block;font-size:12px;font-weight:600;opacity:.85;letter-spacing:-.2px}
.bs_band b{display:block;margin-top:6px;font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-.6px}
.bs_band em{display:block;margin-top:6px;font-style:normal;font-size:13px;line-height:1.45;opacity:.9;letter-spacing:-.3px}
.bs_band .go{position:absolute;z-index:2;right:14px;bottom:12px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);color:#222;font-style:normal;font-size:18px;line-height:27px;text-align:center}
.bs_pill{display:flex;gap:6px;padding:14px 20px 12px;overflow-x:auto;scrollbar-width:none}
.bs_pill::-webkit-scrollbar{display:none}
.bs_pill button{flex:none;height:32px;padding:0 14px;border:1px solid #dfe2e6;border-radius:99px;background:#fff;font-size:13px;color:#555}
.bs_pill button.on{background:#222;border-color:#222;color:#fff;font-weight:600}
.section.type_brand .bs_sec .prd_row{padding:0 20px}
.section_flow.type_brand{padding-top:32px}

/* ===================== 메인 배너 안 기획전 장 (주임님 문구, 10/16) ===================== */
.card_story{position:relative;display:block;overflow:hidden;background:#222;color:#fff;container-type:inline-size}
.card_story img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;-webkit-mask-image:none;mask-image:none;max-width:none}
.card_story::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.6) 0,rgba(0,0,0,.18) 45%,rgba(0,0,0,0) 65%);pointer-events:none}
.card_story .st_txt{position:absolute;z-index:2;left:7cqw;right:7cqw;bottom:8cqw;text-shadow:0 1px 8px rgba(0,0,0,.2)}
.card_story small{display:inline-block;padding:1cqw 3cqw;border-radius:99px;background:rgba(255,255,255,.22);font-size:3.2cqw;font-weight:600}
.card_story b{display:block;margin-top:2.6cqw;font-size:7.6cqw;font-weight:800;line-height:1.25;letter-spacing:-.05em}
.card_story em{display:block;margin-top:2cqw;font-style:normal;font-size:3.9cqw;line-height:1.5;opacity:.92;letter-spacing:-.03em}
.card_story.type_top::before{background:linear-gradient(to bottom,rgba(0,0,0,.5) 0,rgba(0,0,0,.12) 45%,rgba(0,0,0,0) 65%)}
.card_story.type_top .st_txt{top:9cqw;bottom:auto;right:24cqw}
.main_visual .card_story::after{display:none}
.bv .line2{margin-top:2.2cqw;font-size:4.2cqw;font-weight:600;letter-spacing:-.04em;opacity:.85}
.pn_common{margin-top:8px;padding:10px 12px;border-radius:10px;background:#f4f6f9;font-size:12px;color:#4a5260;line-height:1.6}

/* ===================== 메인 베스트 위 — 샘플마다 다른 레이아웃 (10/16 · js/home-top.js) ===================== */
/* 샘플 1 — 무료 샘플: 사진 왼쪽 · 글 오른쪽 가로 카드 */
.t1_sample{display:grid;grid-template-columns:42% 1fr;margin:0 20px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.t1_sample .img{display:block;aspect-ratio:1/1.05;overflow:hidden;background:#c0dd6c}
.t1_sample .img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.t1_sample .txt{display:flex;flex-direction:column;justify-content:center;padding:16px}
.t1_sample small{font-size:11px;font-weight:800;color:#4f7a16;letter-spacing:.3px}
.t1_sample b{margin-top:4px;font-size:19px;font-weight:800;letter-spacing:-.5px}
.t1_sample em{margin-top:6px;font-style:normal;font-size:14px;line-height:1.5;color:#5a616b}
.t1_sample i{margin-top:12px;font-style:normal;font-size:14px;font-weight:700;color:var(--pc)}
/* 샘플 3 — 첨부 이미지 느낌 아이콘: 연회색 둥근 타일 4 × 2 */
.t3_cate ul{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 0;padding:24px 20px 26px;list-style:none;border-bottom:8px solid #f6f7f9}
.t3_cate a{display:flex;flex-direction:column;align-items:center;gap:9px;font-size:14px;font-weight:500;color:#1b1d21;letter-spacing:-.3px}
.t3_cate .tile{width:66px;height:66px;border-radius:22px;background:#f1f1f3;display:grid;place-items:center}
.t3_cate .tile.type_best{background:#f3e8ff}
.t3_cate .tile svg{width:46px;height:46px}
/* 샘플 3 — 밸런스키트: 크기별 줄 목록 */
.t3_kit{list-style:none;margin:0 20px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.t3_kit li + li{border-top:1px solid var(--line)}
.t3_kit a{display:flex;align-items:center;gap:12px;padding:12px 15px}
.t3_kit img{width:52px;height:52px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.t3_kit span{flex:1}
.t3_kit b{display:block;font-size:15px;font-weight:700}
.t3_kit small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.t3_kit em{font-style:normal;font-size:15px;font-weight:800;color:var(--pc)}
.t3_note{margin:10px 20px 0;font-size:13px;color:var(--muted)}
.t3_note a{font-weight:700;color:var(--pc)}
/* 샘플 3 — 무료 샘플: 쿠폰 모양 */
.t3_ticket{position:relative;display:flex;align-items:center;margin:0 20px;border-radius:14px;background:#fff6dc;overflow:hidden}
.t3_ticket .stub{flex:none;width:84px;padding:16px 0;text-align:center;background:#ffc93c;color:#5a3d00}
.t3_ticket .stub b{display:block;font-size:18px;font-weight:900;letter-spacing:.5px}
.t3_ticket .stub small{font-size:11px;font-weight:700}
.t3_ticket::before,.t3_ticket::after{content:"";position:absolute;left:76px;width:16px;height:16px;border-radius:50%;background:#fff}
.t3_ticket::before{top:-8px}.t3_ticket::after{bottom:-8px}
.t3_ticket .body{flex:1;padding:14px 16px;border-left:2px dashed #f0d48a}
.t3_ticket .body b{display:block;font-size:16px;font-weight:800}
.t3_ticket .body em{display:block;margin-top:2px;font-style:normal;font-size:13px;color:#7a6320}
.t3_ticket i{padding-right:16px;font-style:normal;font-size:14px;font-weight:700;color:#a07a00}
.t3_cate .tile svg{width:50px;height:50px}
/* 10/16 */
.cate_list{gap:16px 0}
.cate_item{font-size:13px;gap:7px}
.cate_item .cate_ico{width:58px;height:58px;aspect-ratio:auto;border-radius:18px}
.cate_item .cate_ico svg{width:62%;height:62%}
.t3_cate .tile.type_best{background:color-mix(in srgb,var(--pc-raw) 12%,#fff)}
.t1_sample small{color:var(--pc)}
.t3_ticket{background:color-mix(in srgb,var(--pc-raw) 7%,#fff)}
.t3_ticket .stub{background:var(--pc-raw);color:#fff}
.t3_ticket .body{border-left-color:color-mix(in srgb,var(--pc-raw) 30%,#fff)}
.t3_ticket .body em{color:#5a616b}
.t3_ticket i{color:var(--pc)}
/* 10/16 — 타일은 칸을 채우고 사이 20px */
.cate_list{gap:20px}
.cate_item .cate_ico{width:100%;height:auto;aspect-ratio:1/1}
.cate_item .cate_ico svg{width:58%;height:58%}

/* ===================== 베스트 아래 공통 — 아이스크림몰 섹션 간격 · 제목 · 배너 (10/16, 위키 레퍼런스 모음 12-1) =====================
   섹션 사이 80px 여백만(회색 띠 · 바탕 없음) · 제목 20px 굵게 두 줄 · 선택 탭은 포인트 컬러로 채움 */
.flow_isc{padding-top:48px;background:#fff}
.flow_isc > .section_flow{padding:0;margin:0 0 80px;background:#fff!important}
.flow_isc > .section_flow:last-child{margin-bottom:48px}
.flow_isc .tit_area{margin-bottom:16px}
.flow_isc .tit_area h2{font-size:20px!important;font-weight:700!important;line-height:28px;letter-spacing:-.5px;color:#1b1d21!important}
.flow_isc .tab_pill button.on,.flow_isc .bs_pill button.on{background:var(--pc-raw);border-color:var(--pc-raw);color:#fff}
.flow_isc .bs_sec + .bs_sec{margin-top:40px}
/* 기획전 — 큰 둥근 카드 → 굵은 제목 한 줄 + 회색 설명 한 줄 → 전체 폭 더보기 */
.isc_ex{display:grid;gap:32px;padding:0 20px}
.isc_ex a{display:block;color:#1b1d21}
.isc_ex .img{display:block;aspect-ratio:335/250;border-radius:16px;overflow:hidden;background:#eee}
.isc_ex .img img{width:100%;height:100%;object-fit:cover}
.isc_ex b{display:block;margin-top:14px;font-size:17px;font-weight:700;letter-spacing:-.4px}
.isc_ex em{display:block;margin-top:4px;font-style:normal;font-size:14px;color:#777;letter-spacing:-.3px}
.isc_more{display:flex;align-items:center;justify-content:center;gap:4px;height:48px;margin:28px 20px 0;border:1px solid #dfe2e6;border-radius:99px;font-size:14px;font-weight:600;color:#333}
.isc_more i{font-style:normal}

/* ===================== 바프독에서 가져온 것 (10/16) ===================== */
/* 1 — 이런 점이 고민이었나요? 말풍선 */
.worry{display:grid;gap:10px;padding:4px 20px 0}
.worry .bub{position:relative;max-width:78%;padding:12px 16px;border-radius:18px;font-size:15px;font-weight:600;letter-spacing:-.3px;background:color-mix(in srgb,var(--pc-raw) 10%,#fff);color:#1b1d21}
.worry .bub.type_l{justify-self:start;border-bottom-left-radius:4px}
.worry .bub.type_r{justify-self:end;border-bottom-right-radius:4px;background:#f2f3f5}
.worry_ans{margin:20px 20px 0;font-size:15px;line-height:1.6;color:#4a5260;text-align:center}
.worry_ans b{color:var(--pc)}
.isc_more.type_fill{background:var(--pc-raw);border-color:var(--pc-raw);color:#fff}
/* 2 — 설문 한 번이면 이렇게 와요: 실제 화면 + 단계 */
.how3{display:grid;gap:22px;padding:0 20px;list-style:none}
.how3 li{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center}
.how3 .phone{display:block;padding:5px;border-radius:18px;background:#1b1d21;box-shadow:0 8px 20px rgba(20,40,80,.12)}
.how3 .phone img{display:block;width:100%;aspect-ratio:375/740;object-fit:cover;object-position:top;border-radius:13px}
.how3 em{display:inline-block;font-style:normal;font-size:12px;font-weight:800;color:#fff;background:var(--pc-raw);border-radius:99px;padding:2px 9px}
.how3 b{display:block;margin-top:8px;font-size:16px;font-weight:700;letter-spacing:-.4px;line-height:1.4}
.how3 div > span{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:#666}
/* 3 · 4 — 설문 진행 막대(덩어리 3칸) · 마지막 질문 배지 */
.progress_grp{display:flex;gap:6px;padding:4px 20px 12px;list-style:none}
.progress_grp li{flex:1}
.progress_grp i{display:block;height:4px;border-radius:99px;background:#e6e8eb;overflow:hidden}
.progress_grp i b{display:block;height:100%;background:var(--pc-raw);transition:width .3s}
.progress_grp span{display:block;margin-top:6px;font-size:12px;font-weight:600;color:#9aa0a8}
.progress_grp li.on span{color:var(--pc)}
.progress_grp li.is_done span{color:#5a616b}
.badge_last{display:inline-block;margin-bottom:10px;padding:4px 10px;border-radius:99px;background:var(--pc-raw);color:#fff;font-size:12px;font-weight:700}
/* 5 — 재료 안내 */
.box_info_sheet{margin-top:18px;padding:16px;border-radius:14px;background:#f4f6f9}
.box_info_sheet b{display:block;font-size:14px;font-weight:700}
.box_info_sheet p{margin-top:6px;font-size:14px;line-height:1.6;color:#4a5260}
/* 6 — 결과 요약 카드 */
.result_summary{margin:16px 20px 0;padding:18px 16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.result_summary .tit{font-size:15px;font-weight:700}
.result_summary .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.result_summary .chips span{padding:4px 10px;border-radius:99px;background:#f2f3f5;font-size:13px;color:#4a5260}
.result_summary .bars{display:grid;gap:10px;margin-top:14px}
.result_summary .bar{display:grid;grid-template-columns:52px 1fr 64px;align-items:center;gap:10px;font-size:14px}
.result_summary .bar span{color:#5a616b}
.result_summary .bar i{height:8px;border-radius:99px;background:#e6e8eb;overflow:hidden}
.result_summary .bar i b{display:block;height:100%;border-radius:99px;background:var(--pc-raw)}
.result_summary .bar em{font-style:normal;font-weight:700;text-align:right}
.result_summary .allergy{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:14px}
.result_summary .allergy span{margin-right:4px;color:#5a616b}
.result_summary .allergy i{font-style:normal;padding:3px 10px;border-radius:99px;background:#fdecea;color:#c4322a;font-size:13px;font-weight:600}
.result_summary .allergy i.type_none{background:#f2f3f5;color:#4a5260}
/* 7 — 라인 카드 단백질 그림 줄 */
.line_prot{display:flex;flex-wrap:wrap;gap:8px;padding:10px 15px 12px;background:var(--soft);border-top:1px dashed var(--line)}
.line_prot span{display:flex;align-items:center;gap:4px;padding:4px 10px 4px 6px;border-radius:99px;background:#fff;font-size:13px;font-weight:600}
.line_prot svg{width:22px;height:22px}
/* 결과 요약 카드가 어두운 머리 위로 올라오고, 구성 카드는 그 아래로 (겹침 해결) */
.result_summary{position:relative;margin:-76px 20px 0;box-shadow:0 10px 30px rgba(0,0,0,.08);border:0}
.result_summary + .result_card{margin-top:12px}
/* 밸런스키트 페이지 안 「고민 · 이렇게 와요」 (10/16 메인에서 옮김) */
.kit_flow{margin-top:8px;border-top:8px solid var(--soft)}
.kit_flow .section_flow{padding:36px 0 40px}
.kit_flow .section_flow + .section_flow{border-top:1px solid var(--line)}
.kit_flow .tit_area h2{font-size:20px;font-weight:700;line-height:28px}
/* 가로 줄 마우스 끌기 표시 */
.prd_row,.scroll_x,.my_pets,.ex_row,.tab_pill,.bs_pill,.filter_grp,.filter_list,.gnb_list,.sc_row,.sc_big,.sc_gnb,.sc_pill{cursor:grab}
.is_dragging{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.is_dragging a,.is_dragging img{pointer-events:none}

/* ===================== 랜딩 페이지 공통 (밸런스키트 · 무료 샘플 · 따뜻한 한끼, 10/16 · js/landing.js) ===================== */
.lp_hero{position:relative;aspect-ratio:375/400;overflow:hidden;background:var(--bg);container-type:inline-size}
.lp_hero img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:88%;width:auto;max-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent)}
.lp_hero .txt{position:absolute;z-index:2;left:0;right:0;top:9cqw;text-align:center;color:#fff}
.lp_hero .lb{display:inline-block;padding:1.4cqw 4cqw 1.1cqw;border-radius:99px;background:rgba(255,255,255,.92);color:#333;font-family:"GmarketSans",sans-serif;font-weight:500;font-size:3.4cqw}
.lp_hero h1{margin-top:3.4cqw;font-family:"GmarketSans","Pretendard Variable",sans-serif;font-weight:700;font-size:11cqw;line-height:1.12;letter-spacing:-.06em;text-shadow:0 .6cqw 2cqw rgba(0,0,0,.08)}
.lp_hero h1 em{font-style:normal;color:#fff6c8}
.lp_hero p{margin-top:2.6cqw;font-size:4.2cqw;font-weight:600;letter-spacing:-.03em;opacity:.95}
.lp_strip{display:flex;justify-content:center;gap:0;padding:14px 20px;list-style:none;background:#1b1d21;color:#fff}
.lp_strip li{font-size:13px;font-weight:600;letter-spacing:-.3px}
.lp_strip li + li::before{content:"";display:inline-block;width:1px;height:10px;margin:0 12px;background:rgba(255,255,255,.4);vertical-align:0}
.lp_sec{padding:56px 20px}
.lp_sec.bg_tint{background:#f6f7f9}
.lp_sec .kicker{display:block;font-size:13px;font-weight:700;color:var(--pc);letter-spacing:-.2px}
.lp_sec h2{margin-top:8px;font-size:24px;font-weight:800;line-height:1.36;letter-spacing:-.7px}
.lp_sec .body{margin-top:12px;font-size:15px;line-height:1.7;color:#4a5260;letter-spacing:-.3px}
.lp_img{margin-top:24px;border-radius:16px;overflow:hidden;background:#fff}
.lp_img img{display:block;width:100%;height:auto}
.lp_img.type_wide{border:1px solid var(--line)}
.lp_points{display:grid;gap:12px;margin-top:22px;list-style:none}
.lp_points li{display:flex;gap:14px;padding:18px 16px;border-radius:14px;background:#fff}
.lp_points b{flex:none;font-family:"GmarketSans",sans-serif;font-size:18px;color:var(--pc)}
.lp_points strong{display:block;font-size:16px;font-weight:700}
.lp_points span{display:block;margin-top:4px;font-size:14px;line-height:1.55;color:#5a616b}
.lp_size{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px;list-style:none}
.lp_size li{padding:18px 16px;border:1px solid var(--line);border-radius:14px}
.lp_size b{display:block;font-size:18px;font-weight:800}
.lp_size span{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.lp_size em{display:block;margin-top:12px;font-style:normal;font-size:16px;font-weight:800;color:var(--pc)}
.lp_lines{margin:22px -20px 0;padding:0 20px}
.lp_info{display:grid;gap:12px;margin-top:20px}
.lp_info div{display:grid;grid-template-columns:84px 1fr;font-size:15px;line-height:1.55}
.lp_info dt{color:#5a616b}
.lp_info dd{font-weight:600}
.lp_sample{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;list-style:none;text-align:center}
.lp_sample .img{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;background:#f4f1ec;overflow:hidden;padding:10px}
.lp_sample .img img{width:100%;height:100%;object-fit:contain}
.lp_sample .pack_item{display:block;width:72%;height:90%}
.lp_sample b{display:block;margin-top:10px;font-size:15px}
.lp_sample em{font-style:normal;font-size:13px;color:var(--muted)}
.lp_next{display:flex;align-items:center;justify-content:space-between;padding:22px 20px;border-radius:16px;background:color-mix(in srgb,var(--pc-raw) 9%,#fff)}
.lp_next small{display:block;font-size:13px;font-weight:600;color:var(--pc)}
.lp_next b{display:block;margin-top:4px;font-size:18px;font-weight:800;line-height:1.4;letter-spacing:-.4px}
.lp_next i{font-style:normal;font-size:26px;color:var(--pc)}
.lp_flow{margin-top:0;border-top:0}
.lp_flow .section_flow{padding:56px 0}
.lp_flow .tit_area h2{font-size:24px;font-weight:800;line-height:1.36}
.lp_end{height:24px}
/* 머리 글자 — 바탕에 맞는 진한 색, 강아지는 조금 아래로 (글과 겹치지 않게) */
.lp_hero .txt{color:var(--ink)}
.lp_hero h1 em{color:var(--hi)}
.lp_hero h1{text-shadow:none}
.lp_hero img{height:74%}
.lp_hero p{opacity:.85}
.lp_hero img{-webkit-mask-image:radial-gradient(ellipse 52% 58% at 50% 62%,#000 66%,transparent 100%);mask-image:radial-gradient(ellipse 52% 58% at 50% 62%,#000 66%,transparent 100%)}
/* 밸런스키트 랜딩 — 섹션 구분 명확하게 (10/16): 흰색 · 연회색 바탕을 번갈아, 모든 섹션 위에 같은 모양의 작은 머리글 */
.lp_flow .section_flow + .section_flow{border-top:0}
.lp_flow .section_flow:nth-child(1){background:#fff}
.lp_flow .section_flow:nth-child(2){background:#f6f7f9}
.lp_flow .tit_area .txt_sub{display:block;margin-bottom:8px;font-size:13px;font-weight:700;color:var(--pc);letter-spacing:-.2px}
.lp_sec.bg_tint{background:#f6f7f9}
.lp_flow .worry .bub.type_r{background:#eef0f3}
/* 받는 방법 섹션 위 여백이 8px로 줄던 것 — 섹션이 이어질 때 위를 줄이는 예전 규칙이 걸림. 랜딩 안에서는 모두 56px · 제목→내용 22px */
.lp_flow .section_flow,.lp_flow .section_flow + .section_flow{padding:56px 0!important}
.lp_flow .tit_area{margin-bottom:22px}
/* 받는 방법 폰 목업 — 까만 테두리 얇게 (10/16) 5px → 2px */
.how3 .phone{padding:2px;border-radius:14px}
.how3 .phone img{border-radius:12px}
/* 10/16) */
.lp_sec h2{margin-top:4px}
.lp_flow .tit_area .txt_sub{margin-bottom:4px}
/* 우리 아이에게 맞춘 한 달 식단 — 설문 답 → 한 상자 그림 */
.lp_fit{margin-top:26px;padding:22px 18px 24px;border-radius:20px;background:color-mix(in srgb,var(--pc-raw) 7%,#fff)}
.lp_fit .cap{display:block;font-size:13px;font-weight:700;color:var(--pc);text-align:center}
.fit_in ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;list-style:none}
.fit_in li{padding:7px 12px;border-radius:99px;background:#fff;border:1px solid color-mix(in srgb,var(--pc-raw) 25%,#fff);font-size:14px;font-weight:600;color:#1b1d21;box-shadow:0 2px 6px rgba(20,40,80,.05)}
.fit_arrow{display:flex;justify-content:center;margin:12px 0 14px}
.fit_arrow i{position:relative;width:2px;height:26px;background:color-mix(in srgb,var(--pc-raw) 45%,#fff)}
.fit_arrow i::after{content:"";position:absolute;left:50%;bottom:-2px;width:10px;height:10px;margin-left:-5px;border-right:2px solid color-mix(in srgb,var(--pc-raw) 45%,#fff);border-bottom:2px solid color-mix(in srgb,var(--pc-raw) 45%,#fff);transform:rotate(45deg)}
.fit_out .pic{position:relative;margin-top:16px;padding:22px 14px 30px;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(20,40,80,.08)}
.fit_out .pic img{display:block;width:100%;height:auto}
.fit_out .tag{position:absolute;padding:5px 11px;border-radius:99px;background:var(--pc-raw);color:#fff;font-size:12px;font-weight:700;letter-spacing:-.2px;box-shadow:0 4px 10px color-mix(in srgb,var(--pc-raw) 30%,transparent)}
.fit_out .tag.t1{left:-6px;top:-12px}
.fit_out .tag.t2{right:-6px;top:40%}
.fit_out .tag.t3{left:16px;bottom:-12px;background:#1b1d21;box-shadow:0 4px 10px rgba(0,0,0,.15)}

/* ===================== 메인 섹션 간격 통일 (10/16) =====================
   규칙: 내용과 내용 사이 80px.
   일반 섹션 = 안쪽 위아래 0, 위 바깥 80px / 바탕색 섹션(hs_band) = 안쪽 40px, 위 바깥 40px, 바로 다음 섹션 위 40px
   카테고리 = 배너 아래 자기 위 여백은 그대로, 아래 0 · 회색 띠 없음 / 공통 부분(flow_isc)도 같은 규칙 */
#content .hs,#content .flow_isc > section{padding-top:0!important;padding-bottom:0!important;margin:80px 0 0!important;border:0!important}
#content .hs_cate{margin-top:0!important;padding-top:24px!important}
#content .hs_cate ul{padding-bottom:0!important;border-bottom:0!important}
#content .hs_band{padding-top:40px!important;padding-bottom:40px!important;margin-top:40px!important}
#content .hs_band + .hs{margin-top:40px!important}
#content .flow_isc{padding:0!important;margin:0!important}
#content .flow_isc > section:last-child{margin-bottom:56px!important}
#content .hs + .flow_isc > section:first-child{margin-top:80px!important}
.hs .tit_area,.flow_isc .tit_area{margin-top:0}

/* ===================== 상품 카드 — 아이스크림몰 목록 모양 + 할인가 (10/16, prdBox) ===================== */
.prd_card{position:relative;color:#1b1d21}
.prd_card .thumb{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#f4f5f7}
.prd_card .thumb img{width:100%;height:100%;object-fit:cover}
.prd_card .thumb.type_kit img{object-fit:contain;background:#fff}
.prd_card .flag{position:absolute;left:8px;top:8px;padding:2px 7px;border-radius:5px;background:#fff;border:1px solid var(--pc-raw);color:var(--pc);font-size:11px;font-weight:800}
.prd_card .flag.type_new{border-color:#1b1d21;color:#1b1d21}
.prd_card .acts{display:flex;align-items:center;gap:2px;margin-top:6px}
.prd_card .ship{flex:1;font-size:12px;font-weight:700;color:var(--pc)}
.prd_card .act_wish,.prd_card .act_cart{position:relative;width:32px;height:32px;display:grid;place-items:center;border:0;background:none;color:#9aa0a8;cursor:pointer}
.prd_card .act_wish::before,.prd_card .act_cart::before{content:"";position:absolute;inset:-6px}
.prd_card .act_wish svg,.prd_card .act_cart svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.prd_card .act_wish[aria-pressed="true"]{color:#e5484d}
.prd_card .act_wish[aria-pressed="true"] svg{fill:currentColor}
.prd_card .info{display:block;margin-top:2px}
.prd_card .brand{display:block;font-size:12px;color:#6b7280}
.prd_card .name{display:-webkit-box;margin-top:2px;font-size:14px;line-height:20px;height:40px;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.3px}
.prd_card .price{margin-top:6px}
.prd_card .price s{display:block;font-size:12px;color:#8a9099;line-height:1.3}
.prd_card .price .now{display:block;font-size:14px}
.prd_card .price em{margin-right:4px;font-style:normal;font-weight:800;color:var(--pc)}
.prd_card .price b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.prd_card .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.prd_card .tags i{font-style:normal;padding:2px 6px;border:1px solid #e3e5e8;border-radius:5px;font-size:11px;color:#4a5260}
.prd_card.type_row{flex:none;width:140px;scroll-snap-align:start}
.prd_list .prd_card.type_grid{width:auto}

/* ===================== 웹 표준 · UI/UX 점검 고침 (10/16) ===================== */
/* 누르는 곳 44px — 보이는 크기는 두고 누르는 범위를 넓힌다 */
.btn_back,.btn_icon{min-width:44px;min-height:44px}
.btn_view,.btn_del,.menu_grp a,.footer_link button,.txt_safe button,.btn_more,.qty button,.search_sec h3 button,.filter_grp .chip,.sc_gnb a{position:relative}
.btn_view::before,.btn_del::before,.menu_grp a::before,.footer_link button::before,.txt_safe button::before,.btn_more::before,.qty button::before,.search_sec h3 button::before,.filter_grp .chip::before{content:"";position:absolute;left:50%;top:50%;min-width:44px;min-height:44px;width:100%;height:100%;transform:translate(-50%,-50%)}
/* 글자 대비 4.5:1 이상 */
.tab_bar a{color:#5f6670}
.theme_clean .btn_more,.btn_more{color:#5f6670}
.isc_ex em,.ex_card .sub{color:#5f6670}
.box_donate .txt_label{color:#8a4818}
.menu_gate span{color:#4a5260}
.pd2_intro .txt_cat,.pd2_intro .txt_eng{color:#5f6670}
.prd_brand,.prd_item .prd_brand{color:#5f6670}
.tbl_compare th.on,.tbl_compare td.on{color:#1b1d21}
/* 키보드 초점 표시 */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--pc-raw);outline-offset:2px}
/* 여덟 가지 사료 라인 — 카드 안 제품 그림이 너무 크다  */
.lp_lines .prd_thumb{display:grid;place-items:center;padding:16%}
.lp_lines .prd_thumb > *{max-width:100%;max-height:100%}
.lp_lines .prd_thumb img{width:100%;height:100%;object-fit:contain}

/* ===== 메인 밸런스키트 — 제품 누끼 부채꼴 (10/16, AI 사진 대신) ===== */
.kit_packs{position:relative;display:block;width:100%;height:100%}
.kit_packs img{position:absolute;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;background:none!important;border:0!important;padding:0!important;border-radius:0!important;opacity:1!important;transform-origin:50% 100%;filter:drop-shadow(0 6px 10px rgba(16,24,40,.16))}
/* 샘플 2 */
.kit_show .img.type_packs{background:color-mix(in srgb,var(--pc-raw) 11%,#fff);padding:0}
.kit_show .img.type_packs::before{content:'';position:absolute;left:14%;right:14%;bottom:7%;height:16%;border-radius:50%;background:color-mix(in srgb,var(--pc-raw) 20%,#fff)}
.kit_show .img.type_packs .kit_packs{position:absolute;left:8%;right:8%;bottom:10%;width:auto;height:auto;aspect-ratio:2.4/1}
.kit_show .img.type_packs .cap{position:absolute;right:16px;top:14px;text-align:right;font-size:12px;line-height:1.45;color:#4a5260}
.kit_show .img.type_packs .cap b{font-size:14px;color:#1b1d21}
/* 샘플 1 */
.bnr_kit.type_packs .vis{display:block;position:relative;height:172px;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--pc-raw) 55%,#1d2a33) 0%,#1d2a33 70%)}
.bnr_kit.type_packs .kit_packs{position:absolute;left:9%;right:9%;bottom:-26%;width:auto;height:100%}
.bnr_kit.type_packs .kit_packs img{filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
/* 샘플 3 */
.t3_sub{margin:-6px 20px 12px;font-size:14px;color:var(--ink2)}
.t3_kit .thumb{flex:none;position:relative;width:64px;height:64px;border-radius:12px;background:color-mix(in srgb,var(--pc-raw) 10%,#fff);overflow:hidden}
.t3_kit .thumb .kit_packs{position:absolute;left:8%;right:8%;bottom:10%;width:auto;height:62%}
.t3_kit .thumb .kit_packs img{filter:drop-shadow(0 2px 3px rgba(16,24,40,.18))}
.t3_kit .txt{flex:1;min-width:0}
.t3_kit em{white-space:nowrap}
/* 샘플 4 */
.sc_big .pic{position:relative;display:block;height:250px;background:color-mix(in srgb,var(--pc-raw) var(--t),#fff);overflow:hidden}
.sc_big .pic .kit_packs{position:absolute;left:10%;right:10%;bottom:12%;width:auto;height:52%}
.sc_big .pic .sz{position:absolute;left:16px;top:16px;font-size:13px;color:#4a5260;line-height:1.3}
.sc_big .pic .sz b{display:block;font-size:22px;font-weight:800;color:#1b1d21;letter-spacing:-.5px}
/* 10/19 조정 — 샘플 1 위 빈 곳 줄이기 · 샘플 3 썸네일 팩 크게 */
.bnr_kit.type_packs .vis{height:150px}
.bnr_kit.type_packs .kit_packs{left:7%;right:7%;bottom:-30%;height:118%}
.t3_kit .thumb .kit_packs{left:10%;right:10%;bottom:12%;height:76%}
.t3_kit .thumb .kit_packs{transform:scale(1.45);transform-origin:50% 100%;bottom:8%}
/* 상품 카드 속 밸런스키트 그림 — 제품 누끼 (10/19) */
.prd_card .thumb.type_kit{background:color-mix(in srgb,var(--pc-raw) 10%,#fff)}
.prd_card .thumb.type_kit .kit_packs{position:absolute;left:8%;right:8%;bottom:14%;width:auto;height:60%}
/* 샘플 1 카테고리 아이콘 — 진한 선을 화면 크기와 상관없이 1.5px로 (10/19) */
.cate_item .cate_ico svg [stroke],.cate_item .cate_ico svg *{vector-effect:non-scaling-stroke;stroke-width:1.5px}
/* 기획전 — 자동 슬라이드 배너 (10/19 「일단 자동 슬라이드 배너로」) */
.isc_slide{margin:0 20px}
.isc_slide .slide_item{color:#1b1d21}
.isc_slide .img{display:block;aspect-ratio:335/250;border-radius:16px;overflow:hidden;background:#eee}
.isc_slide .img img{width:100%;height:100%;object-fit:cover}
.isc_slide b{display:block;margin-top:14px;font-size:17px;font-weight:700;letter-spacing:-.4px}
.isc_slide em{display:block;margin-top:4px;font-style:normal;font-size:14px;color:#5f6670;letter-spacing:-.3px}
.isc_slide .slide_count{top:12px;right:12px;bottom:auto}
/* 브랜드 이야기 — 브랜드 탭 하나 + 상품 격자 (10/19) */
.bs_tabs{display:flex;margin:0 20px 16px;border-bottom:1px solid #e3e5e8}
.bs_tabs button{flex:1;height:44px;border:0;background:none;font-size:15px;color:#5f6670;position:relative}
.bs_tabs button[aria-selected=true]{color:#1b1d21;font-weight:700}
.bs_tabs button[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pc-raw)}
.bs_tabs button:focus-visible{outline:2px solid var(--pc-raw);outline-offset:-2px}
.flow_isc .bs_sec .prd_list{margin-top:20px}
.flow_isc .bs_sec .isc_more{margin-top:24px}
.bs_sec[hidden]{display:none!important}.flow_isc .bs_sec + .bs_sec{margin-top:0}
/* 샘플 1 · 1장 배너 — 새로 만든 정사각 사진을 꽉 채움 (10/19) */
.bnr_kit_v.type_sq img.bnr_img{left:0;top:0;bottom:auto;transform:none;width:100%;height:100%;object-fit:cover;object-position:50% 80%;-webkit-mask-image:none;mask-image:none}
.bnr_kit_v.type_sq img.bnr_img{top:auto;bottom:0;left:40%;transform:translateX(-50%);width:auto;height:70%;object-fit:contain;-webkit-mask-image:radial-gradient(70% 75% at 50% 62%,#000 60%,transparent 100%);mask-image:radial-gradient(70% 75% at 50% 62%,#000 60%,transparent 100%)}
.bnr_kit_v.type_sq img.bnr_img{left:0;top:0;bottom:auto;transform:none;width:100%;height:100%;object-fit:cover;object-position:50% 100%;-webkit-mask-image:none;mask-image:none}
.bnr_kit_v.type_sq img.bnr_img{width:116%;left:-20%}
.bnr_kit_v.type_sq .bnr_prd.p1{width:22%;right:4%;bottom:31%}
.bnr_kit_v.type_sq .bnr_prd.p2{width:17%;right:21%;bottom:27%}
.bnr_kit_v.type_sq .hand{left:auto!important;right:30%!important;top:47%!important}
.bnr_kit_v.type_sq img.bnr_img{width:118%;left:-18%}
/* 샘플 2 카테고리 — UI/UX 기준으로 다시 배치 (10/19)
   입구(밸런스키트 · 무료 샘플)와 상품 분류(사료 · 간식 · 영양제 · 용품)는 하는 일이 달라 한 줄에 섞지 않는다
   ① 입구 2칸: 아이콘 + 이름 + 한 줄 설명, 칸 전체가 누르는 곳 ② 분류 4칸: 같은 너비 · 같은 아이콘 크기 · 글자 13px */
.cate_flow{padding:20px 20px 28px}
.cate_flow ul{display:grid;list-style:none;justify-content:stretch}
.cate_flow li{width:auto;display:block}
.cate_flow .cf_gate{grid-template-columns:1fr 1fr;gap:10px}
.cate_flow .cf_gate a{flex-direction:row;align-items:center;gap:10px;min-height:64px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--pc-raw) 8%,#fff);white-space:normal;letter-spacing:-.3px}
.cate_flow .cf_gate .ico{flex:none;width:40px;height:40px;background:#fff}
.cate_flow .cf_gate .ico svg{width:28px;height:28px}
.cate_flow .cf_gate .txt{min-width:0}
.cate_flow .cf_gate b{display:block;font-size:15px;font-weight:700;color:#1b1d21}
.cate_flow .cf_gate small{display:block;margin-top:2px;font-size:12px;color:#5f6670}
.cate_flow .cf_cate{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.cate_flow .cf_cate a{gap:8px;min-height:44px;font-size:13px;color:#343434;letter-spacing:-.3px}
.cate_flow .cf_cate .ico{width:52px;height:52px}
.cate_flow .cf_cate .ico svg{width:32px;height:32px}
.cate_flow a:focus-visible{outline:2px solid var(--pc-raw);outline-offset:2px;border-radius:14px}
.cate_flow .cf_gate a{height:100%;box-sizing:border-box}.cate_flow .cf_gate small{white-space:nowrap}
/* 샘플 2 카테고리 — 통일감 있게 다시 (10/19 「바꾼 배치가 통일성이 너무 떨어진다」)
   여섯 칸 모두 같은 모양 · 같은 크기 · 같은 글자, 3칸 × 2줄. 입구 두 칸은 원만 포인트색으로 채워 구분 */
.cate_flow .cf_all{grid-template-columns:repeat(3,1fr);gap:20px 8px}
.cate_flow .cf_all a{gap:8px;min-height:44px;font-size:13px;font-weight:400;color:#343434;letter-spacing:-.3px}
.cate_flow .cf_all .ico{width:56px;height:56px}
.cate_flow .cf_all .ico svg{width:34px;height:34px}
.cate_flow .cf_all .type_gate .ico{box-shadow:none}
/* 샘플 2 메인 배너 — 아이스크림몰 형식 (10/19) */
.bnr_cards.type_i .slide_list{gap:8px;padding:0 20px}
.bnr_cards.type_i .slide_item{width:calc(100% - 40px);aspect-ratio:335/400;border-radius:16px;overflow:hidden;position:relative}
.card_i .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.card_i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(to top,rgba(0,0,0,.62) 0,rgba(0,0,0,.38) 45%,transparent 100%);pointer-events:none}
.card_i .ci_txt{position:absolute;z-index:2;left:20px;right:90px;bottom:22px;color:#fff}
.card_i .ci_cat{font-size:13px;font-weight:500;opacity:.92;letter-spacing:-.2px}
.card_i .ci_tit{margin-top:6px;font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.6px}
.card_i .ci_sub{margin-top:6px;font-size:13px;line-height:1.45;opacity:.9;letter-spacing:-.3px}
.bnr_cards.type_i .ci_ctrl{position:absolute;z-index:3;right:calc(20px + 40px + 14px);bottom:20px;display:flex;align-items:center;gap:2px;height:28px;padding:0 10px 0 4px;border-radius:99px;background:rgba(0,0,0,.42)}
.bnr_cards.type_i .ci_ctrl .slide_count{position:static;padding:0;background:none;font-size:12px;letter-spacing:.5px}
.bnr_cards.type_i .btn_pause{position:relative;width:24px;height:24px;border:0;background:none;display:grid;place-items:center;color:#fff}
.bnr_cards.type_i .btn_pause::before{content:"";position:absolute;inset:-10px}
.bnr_cards.type_i .btn_pause svg{width:12px;height:12px;stroke:currentColor;stroke-width:3;stroke-linecap:round;fill:none}
.bnr_cards.type_i .btn_pause .i_play{display:none;fill:currentColor;stroke:none}
.bnr_cards.type_i .btn_pause[aria-pressed=true] .i_pause{display:none}
.bnr_cards.type_i .btn_pause[aria-pressed=true] .i_play{display:block}
.bnr_cards.type_i .btn_pause:focus-visible{outline:2px solid #fff;outline-offset:1px;border-radius:50%}
.bnr_cards.type_i .slide_item{width:100%}
.bnr_cards.type_i .slide_item{transition:opacity .35s}
.bnr_cards.type_i .slide_item.is_before{opacity:0}
.bnr_cards.type_i.is_drag .slide_item.is_before{opacity:1}
.card_i::after{height:46%;background:linear-gradient(to top,color-mix(in srgb,var(--bg) 40%,#000) 0,color-mix(in srgb,var(--bg) 40%,#000 0%) 0 0,transparent 100%)}
.card_i::after{background:linear-gradient(to top,color-mix(in srgb,var(--bg) 42%,#000) 0%,color-mix(in srgb,color-mix(in srgb,var(--bg) 42%,#000) 60%,transparent) 50%,transparent 100%)}
.card_i .ci_txt{right:120px}
.bnr_cards.type_i .ci_ctrl{right:36px;bottom:20px}
.card_i::after,.card_i::before{content:none!important;display:none}
.card_i .ci_cat,.card_i .ci_sub{opacity:1}
.card_i .ci_cat{font-weight:600}
.card_i .ph{inset:auto;top:auto;bottom:0;width:136%;height:auto;object-fit:fill}
.card_i .ci_tit{font-size:22px}
/* 사진은 오른쪽 위에 놓고 왼쪽 · 아래 가장자리를 바탕색으로 흐리게 → 글은 바탕색 위에 (10/19) */
.card_i .ph{left:auto!important;right:-4%;top:0;bottom:auto;width:84%;height:auto;object-fit:fill;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%),linear-gradient(to top,transparent 0,#000 24%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 22%),linear-gradient(to top,transparent 0,#000 24%);mask-composite:intersect}
/* 샘플 2 배너 다시 — 아이스크림몰 실제 화면 기준 (10/19 「배너만 크고 길고, 그림 내용은 너무 작다」)
   높이를 줄이고(335 × 356) 위 60%를 강아지가 크게 채움. 글은 아래 바탕색 위. 앞 · 뒤 카드가 양옆에 살짝 */
.bnr_cards.type_i .slide_item{aspect-ratio:335/356}
.bnr_cards.type_i .slide_item.is_before{opacity:1}
.card_i .ph{left:0!important;right:0;top:0;width:100%;transform:translateY(-21%);
  -webkit-mask-image:linear-gradient(to bottom,#000 64%,transparent 78%);mask-image:linear-gradient(to bottom,#000 64%,transparent 78%);-webkit-mask-composite:source-over;mask-composite:add}
.card_i .ci_txt{bottom:20px;right:20px}
.card_i .ci_cat{display:inline-block;height:24px;padding:0 10px;border-radius:99px;background:rgba(255,255,255,.72);font-size:12px;font-weight:700;line-height:24px}
.card_i .ci_tit{margin-top:8px;font-size:22px;line-height:1.32}
.card_i .ci_sub{margin-top:4px;font-size:13px;padding-right:96px}
.card_i .ph{width:140%;left:-20%!important;transform:translateY(-23%);-webkit-mask-image:linear-gradient(to bottom,#000 57%,transparent 66%);mask-image:linear-gradient(to bottom,#000 57%,transparent 66%)}
.cate_flow .cf_all a{font-size:14px;font-weight:600;color:#1b1d21} /* 아이콘 아래 글자 14px · 굵게 (10/19) */
/* ===== 샘플 2 배너 — 아이스크림몰 캡처 기준으로 다시 (10/19) ===== */
.bnr_cards.type_i .slide_item{aspect-ratio:335/395;border-radius:16px}
.card_i .ph{display:none}
.card_i .ci_deco{position:absolute;z-index:1;display:block;line-height:0}
.card_i .ci_deco svg{width:100%;height:auto}
/* 동그란 사진 배지 — 흰 테두리 + 색 점선 고리 (캡처의 호랑이 배지) */
.card_i .ci_badge{position:absolute;z-index:2;left:6cqw;top:9cqw;width:44cqw;aspect-ratio:1;border-radius:50%;padding:2.2cqw;background:#fff;
  box-shadow:0 0 0 1.4cqw var(--ring),0 0 0 2.4cqw #fff,0 3cqw 5cqw rgba(0,0,0,.22);transform:rotate(-6deg)}
.card_i .ci_badge img{width:100%;height:100%;border-radius:50%;object-fit:cover;transform:scale(1)}
/* 제품 누끼 — 흰 스티커 테두리 */
.card_i .ci_prd{position:absolute;z-index:3;height:auto;filter:drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff) drop-shadow(0 6px 8px rgba(0,0,0,.22))}
/* 글 — 캡처에서 잰 크기 */
.card_i .ci_txt{z-index:4;left:22px;right:22px;bottom:44px;color:#fff!important}
.card_i .ci_cat{display:inline-block;height:26px;padding:0 11px;border-radius:99px;color:#fff!important;font-size:13px;font-weight:700;line-height:26px;letter-spacing:-.2px}
.card_i .ci_tit{margin-top:10px;font-size:24px;font-weight:800;line-height:1.4;letter-spacing:-.6px;color:#fff}
.card_i .ci_sub{margin-top:6px;padding-right:0;font-size:15px;font-weight:500;line-height:1.4;color:#fff;opacity:.92;letter-spacing:-.3px}
/* 오른쪽 아래 — 동그란 일시정지 + 장 수 알약 (둘 다 바탕보다 조금 진하게) */
.bnr_cards.type_i .ci_ctrl{right:34px;bottom:14px;gap:6px;height:auto;padding:0;background:none}
.bnr_cards.type_i .btn_pause{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.2)}
.bnr_cards.type_i .ci_ctrl .slide_count{height:28px;padding:0 12px;border-radius:99px;background:rgba(0,0,0,.2);font-size:13px;font-weight:600;line-height:28px;letter-spacing:.3px}
.card_i .ci_badge{left:5cqw;top:7cqw;width:46cqw}
.card_i .ci_badge .in{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
.card_i .ci_badge img{transform:scale(2.1)}

/* ===== 밸런스키트 페이지 — 라이펫 「맞춤 건강체크」 소개 느낌 (10/19) ===== */
.lf_page{--lf:#f1f2f8;background:var(--lf);color:#1b1d21}
.lf_head{padding:0 20px}
.lf_head.type_c{text-align:center}
.lf_kicker{font-size:15px;font-weight:700;color:var(--pc);letter-spacing:-.3px}
.lf_head h2{margin-top:8px;font-size:26px;font-weight:800;line-height:1.38;letter-spacing:-.8px}
.lf_head h2 em{font-style:normal;color:var(--pc)}
.lf_head.type_c h2 em{color:inherit}
.lf_lead,.lf_body{margin:12px 20px 0;font-size:15px;line-height:1.6;color:#4a5260;letter-spacing:-.3px}
/* 첫 화면 — 아래가 잘린 휴대폰 */
.lf_hero{padding:40px 0 0;overflow:hidden}
.lf_phone{margin:32px auto 0;width:236px;height:300px;padding:10px 10px 0;border-radius:34px 34px 0 0;background:#fff;box-shadow:0 10px 30px rgba(40,60,120,.12)}
.lf_phone .scr{height:100%;border-radius:24px 24px 0 0;background:color-mix(in srgb,var(--pc-raw) 14%,#fff);overflow:hidden;padding:0 12px}
.lf_phone .bar{height:34px;line-height:34px;text-align:center;font-size:11px;font-weight:700}
.lf_phone .res{padding:14px 12px;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(40,60,120,.06)}
.lf_phone .who{font-size:11px;color:#5f6670;line-height:1.4}
.lf_phone .who b{font-size:14px;color:#1b1d21}
.lf_phone .kit{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #eef0f3}
.lf_phone .kit b{font-size:12px}
.lf_phone .tag{font-size:9px;font-weight:700;color:var(--pc);background:color-mix(in srgb,var(--pc-raw) 12%,#fff);padding:2px 6px;border-radius:4px}
.lf_phone ul{margin-top:8px;list-style:none;display:grid;gap:6px}
.lf_phone li{display:flex;gap:5px;font-size:10px;line-height:1.4;color:#343a40}
.lf_phone li svg{flex:none;width:11px;height:11px;margin-top:1px;fill:none;stroke:var(--pc-raw);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lf_phone .price{margin-top:10px;font-size:11px;text-align:right}
.lf_phone .price b{font-size:15px;color:var(--pc)}
/* 띠 */
.lf_band{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px;background:color-mix(in srgb,var(--pc-raw) 13%,#fff);font-size:17px;font-weight:700;letter-spacing:-.4px;color:#1b1d21}
.lf_band i{flex:none;font-style:normal;font-size:14px;font-weight:600;padding:7px 14px;border:1.5px solid #1b1d21;border-radius:99px}
/* 섹션 */
.lf_sec{padding:56px 0}
.lf_sec.type_white{background:#fff}
/* 띄워 겹친 화면 조각 */
.lf_float{position:relative;height:300px;margin:28px 20px 0}
.lf_float .fc{position:absolute;padding:16px;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(40,60,120,.1)}
.lf_float .fc_t{font-size:13px;font-weight:800}
.lf_float .fc_in{left:0;top:0;width:58%}
.lf_float .fc_in dl{margin-top:10px;display:grid;gap:7px}
.lf_float .fc_in div{display:flex;justify-content:space-between;font-size:12px}
.lf_float dt{color:#7a818a}
.lf_float dd{font-weight:700}
.lf_float .fc_out{right:0;bottom:0;width:62%;z-index:2}
.lf_float .fc_s{margin-top:2px;font-size:12px;color:var(--pc);font-weight:700}
.lf_float .fc_out ul{margin-top:10px;list-style:none;display:grid;gap:8px}
.lf_float .fc_out li{display:flex;align-items:center;gap:10px;font-size:11px;color:#7a818a}
.lf_float .fc_out li b{display:block;font-size:13px;color:#1b1d21}
.lf_float .fc_out img,.lf_float .pk{flex:none;width:38px;height:38px;border-radius:9px;background:#f4f5f7;object-fit:contain;overflow:hidden;display:grid;place-items:center}
.lf_float .pk .pack_label{display:none}
.lf_float .pk.type_supp{background:color-mix(in srgb,var(--pc-raw) 14%,#fff);color:var(--pc);font-size:12px;font-weight:800}
.lf_float .fc_chip{position:absolute;right:8%;top:22%;z-index:3;padding:8px 14px;border-radius:99px;background:var(--pc-raw);color:#fff;font-size:13px;font-weight:700;box-shadow:0 6px 14px color-mix(in srgb,var(--pc-raw) 35%,transparent)}
/* 펼쳐 보는 회색 카드 */
.lf_acc{display:grid;gap:12px;margin:28px 20px 0}
.lf_acc details{border-radius:18px;background:#f4f5f7}
.lf_acc summary{position:relative;display:block;min-height:132px;padding:24px 120px 24px 24px;cursor:pointer;list-style:none}
.lf_acc summary::-webkit-details-marker{display:none}
.lf_acc summary b{display:block;font-size:19px;font-weight:700;line-height:1.4;letter-spacing:-.5px}
.lf_acc .pl{display:block;position:relative;width:26px;height:26px;margin-top:12px;border:1.5px solid #1b1d21;border-radius:50%}
.lf_acc .pl::before,.lf_acc .pl::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:#1b1d21;transform:translate(-50%,-50%)}
.lf_acc .pl::after{transform:translate(-50%,-50%) rotate(90deg)}
.lf_acc details[open] .pl::after{display:none}
.lf_acc .ic{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:76px;height:76px}
.lf_acc .ic svg{width:100%;height:100%}
.lf_acc details p{padding:0 24px 22px;font-size:15px;line-height:1.6;color:#4a5260}
.lf_acc summary:focus-visible{outline:2px solid var(--pc-raw);outline-offset:-2px;border-radius:18px}
/* 받는 방법 묶음 */
.lf_flow{background:#fff}
.lf_flow .section_flow{margin:0!important;padding:56px 0!important}
.lf_flow .section_flow + .section_flow{background:var(--lf)}
/* 크기 · 사료 · 안내 카드 */
.lf_sizes{margin:24px 20px 0;list-style:none;border-radius:18px;background:#fff;overflow:hidden}
.lf_sizes li{display:flex;align-items:center;gap:14px;padding:14px 18px}
.lf_sizes li + li{border-top:1px solid #eef0f3}
.lf_sizes .th{flex:none;position:relative;width:56px;height:56px;border-radius:12px;background:color-mix(in srgb,var(--pc-raw) 10%,#fff);overflow:hidden}
.lf_sizes .th .kit_packs{position:absolute;left:10%;right:10%;bottom:10%;width:auto;height:70%;transform:scale(1.4);transform-origin:50% 100%}
.lf_sizes .nm{flex:1;font-size:13px;color:#7a818a}
.lf_sizes .nm b{display:block;font-size:16px;color:#1b1d21}
.lf_sizes em{font-style:normal;font-size:16px;font-weight:800;color:var(--pc);white-space:nowrap}
.lf_prd{margin-top:24px}
.pd2_cold{padding:0 20px 8px}

/* 10/29 상품 상세 새 틀(.pd3) — 러쉬 모양. 상품마다 --tone(연한 배경) · --acc(포인트) 둘만, 글은 왼쪽 정렬 · 검정 */
.pd3{color:#1b1d21;text-align:left}
.pd3_hero{background:var(--tone);aspect-ratio:1/1;overflow:hidden}
.pd3_hero img{width:100%;height:100%;object-fit:cover;display:block}
.pd3_hero.type_cut{display:grid;place-items:center}
.pd3_hero.type_cut img{width:72%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.14))}
/* 10/29 2차: 러쉬와 겹치는 요소(색 배경 위 흰 카드 · 눈금 막대 · 영문 소제목 · 사진 겹치기)를 뺐다. 제품색은 사진 배경 · 짧은 선 · 번호에만 */
.pd3_card{padding:28px 20px 8px}
.pd3_card::before{content:"";display:block;width:36px;height:3px;background:var(--acc);margin-bottom:16px}
.pd3_card .cat{font-size:13px;color:#6b7078}
.pd3_card h2{margin-top:6px;font-size:22px;font-weight:700;letter-spacing:-.6px;line-height:1.3}
.pd3_card .lead{margin-top:10px;font-size:15px;line-height:1.65;color:#444}
.pd3_facts{list-style:none;margin-top:22px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #1b1d21}
.pd3_facts li{padding:12px 0;border-bottom:1px solid #e6e8eb;font-size:13px}
.pd3_facts li:nth-child(odd){padding-right:12px}
.pd3_facts li:nth-child(even){padding-left:12px;border-left:1px solid #e6e8eb}
.pd3_facts span{display:block;color:#8a9099;font-size:12px}
.pd3_facts b{display:block;margin-top:3px;font-weight:600;color:#1b1d21}
.pd3_cold{display:flex;gap:10px;align-items:flex-start;margin:16px 20px 0;padding:14px 16px;border-radius:12px;background:#eef4fb;font-size:13px;line-height:1.55;color:#2d4a6b}
.pd3_cold svg{width:18px;height:18px;flex:none;margin-top:1px}
/* 영상 — 사진 칸과 같은 결 (좌우 20px · 모서리 4px · 아래 작은 설명) */
.pd3_video{margin:36px 20px 0}
.pd3_video video{display:block;width:100%;height:auto;border-radius:4px;background:var(--tone)} /* 영상 비율 그대로 — 잘라 보이지 않게 */
.pd3_video p{margin-top:10px;font-size:12.5px;color:#8a9099}
.pd3_sec{padding:44px 20px 0}
.pd3_sec .lbl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--acc)}
.pd3_sec .lbl::before{content:"";width:14px;height:2px;background:var(--acc)}
.pd3_sec h3{margin-top:10px;font-size:20px;font-weight:700;letter-spacing:-.5px;line-height:1.4}
.pd3_sec p{margin-top:12px;font-size:14.5px;line-height:1.8;color:#444}
.pd3_sec .tbl_compare{margin-top:18px}
/* 사진 두 장 나란히 — 큰 것 3 : 작은 것 2, 높이 같게 */
.pd3_pics{display:grid;grid-template-columns:3fr 2fr;gap:6px;margin:32px 20px 0;height:240px}
.pd3_pics img{width:100%;height:100%;object-fit:cover;display:block;border-radius:4px}
.pd3_pics .small{background:var(--tone)}
.pd3_pics .small.type_cut{object-fit:contain;padding:12%}
/* 만드는 법 — 제품색 세로선에 동그라미 번호 */
.pd3_steps{list-style:none;counter-reset:st;margin:22px 0 0 11px;border-left:2px solid color-mix(in srgb,var(--acc) 30%,#fff)}
.pd3_steps li{counter-increment:st;position:relative;padding:0 0 26px 26px;word-break:keep-all}
.pd3_steps li:last-child{padding-bottom:4px}
.pd3_steps li::before{content:counter(st);position:absolute;left:-13px;top:0;width:24px;height:24px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.pd3_steps b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.3px;line-height:24px}
.pd3_steps p{margin-top:4px;font-size:14px;line-height:1.7;color:#555}
/* ===== 10/29 러쉬 뼈대로 다시 짠 상세 (.pd3 v3) — 사진은 전부 좌우 꽉, 배경 교차: 흰 → 연한 제품색 → 흰 → 사진 위 글 → 연파랑 ===== */
/* 10/29 팀장: 구성은 지금 것, 생김새는 처음 것 — 카드 그림자 · 회색 라벨 · 큰 제목 되돌림. 영역 구분은 띠 배경 또는 1px 선으로 분명하게 */
.pd3_card{position:relative;margin:0;padding:44px 20px 44px;border-radius:0;background:#fff;box-shadow:none}
.pd3_card .pd3_facts{margin-bottom:0}
.pd3_card+.pd3_band,.pd3_card+.pd3_cold+.pd3_band{margin-top:0}
.pd3_cold{margin:0 20px 44px}
.pd3_cold{position:relative}
.pd3 h3 em{font-style:normal;color:inherit}
.pd3_band{margin-top:40px;padding:44px 20px 40px;background:color-mix(in srgb,var(--tone) 60%,#fff)}
.pd3_band .lbl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--acc)}
.pd3_band .lbl::before{content:"";width:14px;height:2px;background:var(--acc)}
.pd3_band h3{margin-top:10px;font-size:20px;font-weight:700;line-height:1.4;letter-spacing:-.5px}
.pd3_band p{margin-top:12px;font-size:14.5px;line-height:1.8;color:#444}
.pd3_tags{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:18px!important;font-size:13px;font-weight:600;color:#1b1d21!important}
/* 흰 영역끼리는 1px 선으로 나눈다 (사진 · 띠 뒤에 오는 영역은 선 없이 여백만) */
.pd3_sec{padding-top:40px;padding-bottom:40px}
.pd3_sec+.pd3_sec{border-top:1px solid #eef0f2}
.pd3_photo+.pd3_sec,.pd3_band+.pd3_sec{border-top:0}
.pd3_lines{list-style:none;margin-top:18px;display:grid;gap:6px}
.pd3_lines li{font-size:14.5px;line-height:1.6}
.pd3_lines b{font-weight:700;color:var(--acc)}
.pd3_lines span{margin-left:8px;color:#666}
/* 꽉 찬 사진 + 오른쪽 아래 겹친 작은 사진 */
/* 사진은 좌우 꽉, 겹치지 않고 나란히 (팀장: 겹쳐서 영역이 흐려지는 것 싫어함) */
.pd3_photo{display:grid;grid-template-columns:3fr 2fr;gap:4px;margin:0;height:250px}
.pd3_photo img{display:block;width:100%;height:100%;object-fit:cover}
.pd3_photo .small{background:var(--tone)}
.pd3_photo .small.type_cut{object-fit:contain;padding:10%}
.pd3_photo.type_one{grid-template-columns:1fr;height:auto}
.pd3_photo.type_one .big{aspect-ratio:4/3}
/* 성분 — 작은 글 + 엇갈린 사진 두 장 (왼쪽 위 · 오른쪽 아래 겹침) */
.pd3_fine{margin-top:16px!important;font-size:13.5px!important;line-height:1.7!important;color:#555!important}
.pd3_fine b{display:block;margin-bottom:4px;font-size:14px;color:#1b1d21}
.pd3_fine small{font-weight:400;color:#999}
/* 영문 성분표 — 두 줄 격자, 점선으로 이름과 값 잇기 (위키 PDF 모양) */
.pd3_nutri{margin-top:14px;padding:16px 16px 6px;border-radius:10px;background:#f6f7f9;columns:2;column-gap:18px;font-size:12px}
.pd3_nutri li{display:flex;align-items:baseline;gap:6px;padding:4px 0;break-inside:avoid;color:#555}
.pd3_nutri li::after{content:"";order:2;flex:1;border-bottom:1px dotted #c9ccd2;transform:translateY(-3px)}
.pd3_nutri span{order:1;white-space:nowrap}
.pd3_nutri b{order:3;font-weight:600;color:#1b1d21;white-space:nowrap;font-variant-numeric:tabular-nums}
.pd3_nutri li:nth-child(-n+4) span,.pd3_nutri li:nth-child(-n+4) b{font-weight:700;color:#1b1d21}
/* 대표 원료 — 두 장 나란히, 겹치지 않게 */
.pd3_ing2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pd3_ing2 figure{margin:0}
.pd3_ing2 img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.pd3_ing2 figcaption{margin-top:10px;font-size:14px}
.pd3_ing2 figcaption u{display:block;font-weight:700;text-decoration:none}
.pd3_ing2 figcaption span{display:block;margin-top:3px;font-size:12.5px;color:#666}
/* 알아 두면 — 접기 안 아이콘 줄 */
.pd3_know{list-style:none;padding-bottom:12px}
.pd3_know li{display:flex;gap:14px;align-items:center;padding:12px 0}
.pd3_know i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #d9dce1;color:var(--acc);flex:none}
.pd3_know i svg{width:18px;height:18px}
.pd3_know b{display:block;font-size:14.5px;font-weight:600}
.pd3_know span{display:block;font-size:12.5px;color:#777;margin-top:2px}
/* vs 비교 — 연한 제품색 띠, 큰 제품 사진, 아코디언 */
.pd3_vs3{list-style:none;margin:24px 0 8px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px} /* 10/29 폭 넘쳐 셋째 사진 잘리던 것 고침 */
.pd3_vs3 img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;filter:saturate(.75);opacity:.75;transition:.2s}
.pd3_vs3 li.on img{filter:none;opacity:1;outline:3px solid var(--acc);outline-offset:-3px}
.pd3_vs3 b{display:block;margin-top:8px;text-align:center;font-size:13px;color:#777}
.pd3_vs3 li.on b{color:var(--acc);font-weight:700}
.pd3_band.type_vs details{border-bottom:1px solid color-mix(in srgb,var(--acc) 25%,#fff)}
.pd3_band.type_vs summary{list-style:none;display:flex;align-items:center;gap:8px;padding:18px 0;font-size:16px;font-weight:700;cursor:pointer}
.pd3_band.type_vs summary::-webkit-details-marker{display:none}
.pd3_band.type_vs summary svg{width:16px;height:16px;color:var(--acc)}
.pd3_band.type_vs summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:1.5px solid #333;border-bottom:1.5px solid #333;transform:rotate(45deg)}
.pd3_band.type_vs details[open] summary::after{transform:rotate(-135deg)}
.pd3_band.type_vs details p{margin:0 0 14px;font-size:14px}
.pd3_band.type_vs details ul{list-style:none;margin:0 0 16px;display:grid;gap:6px;font-size:13.5px;color:#444}
.pd3_band.type_vs details ul li::before{content:"·";margin-right:6px;color:var(--acc);font-weight:700}
.pd3_band.type_vs details img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:20px}
/* 사진 위 글 — 급여 방법 */
/* 10/29 팀장: 모든 영역의 위(제목 위) · 아래(마지막 요소 아래) 여백을 같은 44px로 */
.pd3_sec,.pd3_band,.pd3_howto,.pd3_pack,.pd3 .pd2_kit{padding-top:64px!important;padding-bottom:64px!important}
.pd3_sec>:last-child,.pd3_band>:last-child,.pd3_pack>:last-child,.pd3 .pd2_kit>:last-child{margin-bottom:0}
.pd3_howto{position:relative;margin-top:0;padding:44px 20px;background-size:cover;background-position:center;color:#fff}
.pd3_howto::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.62),rgba(20,18,16,.72))}
.pd3_howto .in{position:relative}
.pd3_howto .lbl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;opacity:.85}
.pd3_howto .lbl::before{content:"";width:14px;height:2px;background:#fff}
.pd3_howto h3{margin-top:10px;font-size:20px;font-weight:700;line-height:1.4;letter-spacing:-.5px}
.pd3_howto ol{list-style:none;margin-top:28px;display:grid;gap:22px}
.pd3_howto li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start}
.pd3_howto li i{display:grid;place-items:center;width:48px;height:48px;color:#fff}
.pd3_howto li i svg{width:34px;height:34px}
.pd3_howto li b{display:block;font-size:13px;opacity:.75}
.pd3_howto li span{display:block;margin-top:2px;font-size:16px;font-weight:700}
.pd3_howto li p{margin-top:4px;font-size:13.5px;line-height:1.6;opacity:.9}
.pd3_howto .note{position:relative;margin-top:32px;padding:18px;border-radius:12px;background:rgba(255,255,255,.94);color:#444}
.pd3_howto .note p{margin:0;font-size:13px;line-height:1.7}
.pd3_howto .note p+p{margin-top:12px}
/* 상자째 배송 — 연파랑 띠 */
.pd3_pack{margin-top:0;padding:48px 20px 44px;background:color-mix(in srgb,var(--pc-raw) 8%,#fff);text-align:center}
.pd3_pack .lbl{display:flex;justify-content:center;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--pc-raw)}
.pd3_pack .lbl::before{content:"";width:14px;height:2px;background:var(--pc-raw)}
.pd3_pack h3{margin-top:10px;font-size:20px;font-weight:700;line-height:1.4;letter-spacing:-.5px}
.pd3_pack p{margin-top:14px;font-size:14.5px;line-height:1.8;color:#444}
.pd3_pack img{display:block;width:100%;height:auto;aspect-ratio:1080/716;object-fit:contain;margin-top:26px;border-radius:12px}
.pd3_pack ul{list-style:none;margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pd3_pack li i{display:grid;place-items:center;width:44px;height:44px;margin:0 auto;color:var(--pc-raw)}
.pd3_pack li i svg{width:30px;height:30px}
.pd3_pack li b{display:block;margin-top:8px;font-size:13.5px;font-weight:700}
.pd3_pack li span{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:#666;word-break:keep-all}
/* Q&A */
.pd3_qa{margin-top:16px;border-top:1px solid #e6e8eb}
.pd3_qa details{border-bottom:1px solid #e6e8eb}
.pd3_qa summary{list-style:none;display:flex;align-items:center;gap:10px;padding:18px 0;font-size:15px;cursor:pointer}
.pd3_qa summary::-webkit-details-marker{display:none}
.pd3_qa summary b{color:#1b1d21}
.pd3_qa summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:1.5px solid #333;border-bottom:1.5px solid #333;transform:rotate(45deg);flex:none}
.pd3_qa details[open] summary::after{transform:rotate(-135deg)}
.pd3_qa details p{margin:0;padding:0 0 18px 26px;font-size:14px;line-height:1.75;color:#555}
.pd3 .pd2_kit{margin-top:0;border-top:1px solid #eef0f2}
/* 상품 목록 썸네일 — 컷 사진을 제품색 바탕에 가운데 꽉 */
.prd_card .thumb img.img_cut{object-fit:contain!important;background:transparent!important;padding:5%}
/* 주재료 — 세로 사진 두 장 나란히 (러쉬 「재료」 칸처럼) */
.pd3_ing{list-style:none;margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pd3_ing img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.pd3_ing b{display:block;margin-top:12px;font-size:15px;font-weight:700;letter-spacing:-.3px}
.pd3_ing span{display:block;margin-top:3px;font-size:12.5px;color:#777}
.pd3_note{margin-top:14px!important;font-size:12px!important;color:#999!important}
/* 제품색 전체 띠 — 이런 아이에게 (흰 흐름 사이 색 덩어리로 리듬) */
.pd3_fit{margin-top:48px;padding:44px 20px 40px;background:var(--acc);color:#fff}
.pd3_fit .lbl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;opacity:.8}
.pd3_fit .lbl::before{content:"";width:14px;height:2px;background:#fff}
.pd3_fit h3{margin-top:12px;font-size:24px;font-weight:700;line-height:1.35;letter-spacing:-.6px}
.pd3_fit ul{list-style:none;margin-top:24px;display:grid;gap:12px}
.pd3_fit li{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:10px;background:rgba(255,255,255,.12);font-size:14.5px;line-height:1.5}
.pd3_fit li svg{width:18px;height:18px;flex:none}
.pd3_fit+.pd3_scene{margin-top:0}
/* 급여 가이드 — 아이콘 가로 3칸 */
.pd3_guide{list-style:none;margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pd3_guide li{padding:18px 12px 16px;border-radius:12px;background:var(--tone);text-align:center}
.pd3_guide i{display:grid;place-items:center;width:44px;height:44px;margin:0 auto;border-radius:50%;background:#fff;color:var(--acc)}
.pd3_guide i svg{width:22px;height:22px}
.pd3_guide b{display:block;margin-top:12px;font-size:13.5px;font-weight:700;letter-spacing:-.3px}
.pd3_guide span{display:block;margin-top:5px;font-size:12px;line-height:1.5;color:#555;word-break:keep-all}
/* 분위기 사진 한 장 — 좌우 꽉 차게, 아래 한 줄 */
.pd3_scene{margin-top:44px}
.pd3_scene img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.pd3_scene p{padding:12px 20px 0;font-size:13.5px;line-height:1.6;color:#555}
/* 알아 두면 — 연한 제품색 타일 */
.pd3_good{list-style:none;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pd3_good li{padding:16px 14px;border-radius:10px;background:var(--tone)}
.pd3_good li:first-child:nth-last-child(odd){grid-column:1/-1}
.pd3_good b{display:block;font-size:15px;font-weight:700;letter-spacing:-.3px}
.pd3_good span{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:#555}
.pd3_sec.type_fold{padding-top:8px}
.pd3_sec.type_fold details{border-bottom:1px solid #e6e8eb}
.pd3_sec.type_fold summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:16px;font-weight:700;cursor:pointer}
.pd3_sec.type_fold summary::-webkit-details-marker{display:none}
.pd3_sec.type_fold summary::after{content:"";width:9px;height:9px;border-right:1.5px solid #333;border-bottom:1.5px solid #333;transform:rotate(45deg);transition:transform .2s}
.pd3_sec.type_fold details[open] summary::after{transform:rotate(-135deg)}
.pd3_sec.type_fold details p{margin:0;padding:0 0 20px;font-size:14px;line-height:1.75;color:#555}
.pd3_sec.type_info{border-top:1px solid #eef0f2}
.pd3_sec.type_info .list_info{margin-bottom:0}
.pd3_band{margin-top:0}
.pd3_photo+.pd3_sec{padding-top:44px}
.pd3_sec:has(+.pd3_photo){padding-bottom:28px} /* 글 바로 아래 사진이 붙는 경우만 조금 좁게 */
.pd3_sec.type_info h3{font-size:17px}
/* 밸런스키트 칸 — 상세 본문과 같은 결: 흰 바탕 · 제품색 소제목 줄 · 모서리 4px 사진 · 연한 제품색 타일 */
/* 10/29 팀장: 상품 상세와 「너무 똑같아」 → 밸런스키트 칸은 브랜드 파랑 + 연한 파랑 띠 배경으로 구분. 호흡(여백)은 같게 */
.pd3 .pd2_kit{margin:56px 0 0;padding:48px 20px 40px;border-radius:0;background:color-mix(in srgb,var(--pc-raw) 6%,#fff);border-top:0}
.pd3 .pdk_kick{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:99px;background:var(--pc-raw);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em}
.pd3 .pdk_kick::before{content:none}
.pd3 .pd2_kit h3{margin-top:14px;font-size:22px}
.pd3 .pdk_hero{margin:24px -20px 0;aspect-ratio:4/3;border-radius:0;overflow:hidden}
.pd3 .pdk_lead{margin-top:24px;font-size:15px;line-height:1.8;color:#444}
.pd3 .pdk_pts{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid color-mix(in srgb,var(--pc-raw) 30%,#fff);border-bottom:1px solid color-mix(in srgb,var(--pc-raw) 30%,#fff)}
.pd3 .pdk_pts li{display:block;padding:18px 10px 18px 0;background:none;border-radius:0;font-size:12px}
.pd3 .pdk_pts li+li{padding-left:12px;border-left:1px solid color-mix(in srgb,var(--pc-raw) 30%,#fff)}
.pd3 .pdk_pts i{display:block;width:26px;height:26px;margin-bottom:10px;color:var(--pc-raw)}
.pd3 .pdk_pts i svg{display:block;width:100%;height:100%}
.pd3 .pdk_pts b{display:block;font-size:14px;font-weight:600!important;color:var(--pc-raw);letter-spacing:-.3px}
.pd3 .pdk_pts span{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:#555;word-break:keep-all}
.pd3 .pdk_role{margin-top:28px;padding:16px;border-radius:12px;background:#fff;border:0}
.pd3 .pdk_btn{margin-top:28px;background:var(--pc-raw);border-radius:99px}
.pd3 .pdk_cmp{border-color:#e6e8eb}
.pd3 .pdk_cmp thead th.on{background:var(--acc)}
.pd3 .pdk_cmp td.on{background:color-mix(in srgb,var(--tone) 60%,#fff)}
.pd3 .pdk_role{background:none;border-top:1px solid #e6e8eb;border-bottom:1px solid #e6e8eb;border-radius:0;padding:20px 0}
.pd3 .pdk_role img{border-radius:4px}
.pd3 .pdk_lines{margin:20px -20px 0;padding:0 20px}
.pd3 .pdk_lines li.on .th{border-color:var(--acc)}
.pd3 .pdk_btn{height:52px}
.lf_lines{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin:24px 20px 0;list-style:none}
.lf_lines .th{display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;padding:14%}
.lf_lines .th img{width:100%;height:100%;object-fit:contain}
.lf_lines b{display:block;margin-top:10px;font-size:15px;font-weight:700}
.lf_lines li > span:last-child{font-size:13px;color:#7a818a}
.lf_sample{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 20px 0;padding:18px 20px;border-radius:18px;background:#f4f5f7}
.lf_sample small{display:block;font-size:13px;color:#5f6670}
.lf_sample b{font-size:17px}
.lf_sample i{flex:none;font-style:normal;font-size:14px;font-weight:600;padding:8px 14px;border:1.5px solid #1b1d21;border-radius:99px}
.lf_card{margin:24px 20px 0;padding:22px;border-radius:18px;background:#fff}
.lf_card.type_note{margin-top:12px;font-size:13px;line-height:1.6;color:#5f6670}
.lf_dots{list-style:none;display:grid;gap:14px}
.lf_dots li{position:relative;padding-left:14px;font-size:15px;line-height:1.55;color:#343a40}
.lf_dots li::before{content:"";position:absolute;left:0;top:10px;width:4px;height:4px;border-radius:50%;background:#343a40}
.lf_dots b{display:block;font-size:13px;color:#7a818a;font-weight:600}
/* 아래 고정 — 질문 + 파란 버튼이 든 흰 카드 */
.fixed_btn_area.lf_cta{align-items:center;gap:12px;padding:12px 16px;border-radius:20px 20px 0 0;background:#fff;box-shadow:0 -6px 20px rgba(40,60,120,.1);border-top:0}
.lf_cta p{flex:1;font-size:16px;font-weight:700;letter-spacing:-.4px}
.lf_cta .btn{flex:none;padding:0 18px;border-radius:12px}
.lf_cta p{white-space:nowrap}
.lf_cta .btn{width:auto;height:48px}
.lf_float .pk.type_txt{font-size:11px;font-weight:700;color:#7a5a3a}
/* 받는 방법 묶음 제목도 라이펫 제목 모양으로 */
.lf_flow .tit_area{padding:0 20px;margin:0 0 24px}
.lf_flow .tit_area h2{font-size:26px;font-weight:800;line-height:1.38;letter-spacing:-.8px}
.lf_flow .tit_area .txt_sub{display:block;margin-bottom:8px;font-size:15px;font-weight:700;color:var(--pc);letter-spacing:-.3px}
/* 샘플 2 배너 — 캡처에서 잰 값으로 (카드 335 × 400 · 제목 27px/33px · 설명 16px · 분류 13px · 왼쪽 24px · 아래 38px · 위 58%는 그림) */
.bnr_cards.type_i .slide_item{aspect-ratio:335/400}
.card_i .ci_txt{left:24px;right:24px;bottom:38px}
.card_i .ci_tit{margin-top:8px;font-size:27px;line-height:33px;letter-spacing:-.8px}
.card_i .ci_sub{margin-top:6px;font-size:16px;line-height:1.4}
.card_i .ci_badge{left:4cqw;top:5cqw;width:44cqw}
.bnr_cards.type_i .ci_ctrl{bottom:16px}
/* ===== 포인트색을 안 따라가던 색 바탕 정리 (10/19 「포인트컬러가 바뀌면 글자는 바뀌는데 바탕은 안 바뀌어 색이 안 맞는다. 상관없는 회색으로」) ===== */
/* 샘플 1 밸런스키트 어두운 카드 — 남색 → 중립 진회색, 제품 뒤 빛만 포인트색 */
.bnr_kit{background:#24272c}
.bnr_kit .txt_label{color:rgba(255,255,255,.72)}
.bnr_kit.type_packs .vis{background:radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--pc-raw) 40%,#24272c) 0%,#24272c 70%)}
/* 냉동 · 보관 안내 — 하늘색 → 회색 */
.badge.badge_cold{background:#f1f2f4!important;color:#4a5260!important}
.box_msg.type_cold{background:#f4f5f7!important;color:#343a40!important}
.box_msg.type_cold svg,.box_msg.type_cold path{fill:#5f6670!important;stroke:#5f6670!important}
.box_msg.type_cold span{color:#343a40!important}
/* 밸런스키트 페이지 사료 라인 · 크기 그림 바탕 — 제품마다 다른 하늘 · 베이지 → 회색 하나로 */
.lf_lines .th{background:#f4f5f7!important}
.lf_lines .th .pack{background:#fff!important}
/* 샘플 3 머리 로고 · 글 — 고정 파랑 → 포인트색 */
.sw_head .logo,.sw_hi,.sw_dots{color:var(--pc)!important}
.pack_wrap .pack{background:#f1f2f4!important} /* 사진 없는 사료 포장 그림도 회색 바탕 (10/19) */
.bnr_square{background:var(--pc)!important} /* 따뜻한 한끼 장의 네모 스티커도 포인트색 (10/19) */
/* 샘플 2 배너 — 색 · 글 꾸밈은 원래대로 (10/19) */
.card_i .ci_txt{color:inherit!important}
.card_i .ci_cat{display:block;height:auto;padding:0;background:none!important;font-size:14px;font-weight:600;line-height:1.4}
.card_i .ci_tit,.card_i .ci_sub{opacity:1}
.card_i .ci_sub{font-weight:600}
.card_i .ci_badge{box-shadow:0 0 0 1.6cqw #fff,0 3cqw 5cqw rgba(0,0,0,.16);padding:0}
.card_i .hand{z-index:4;font-size:7cqw}
.card_i > .deco{z-index:1}
.bnr_cards.type_i .btn_pause,.bnr_cards.type_i .ci_ctrl .slide_count{background:rgba(0,0,0,.28)}
.card_i .ci_txt .ci_cat{color:var(--k)!important}
.card_i .ci_badge{left:7cqw;top:13cqw;width:40cqw} /* 그림이 위로 몰리지 않게 그림 영역(위 58%) 안에 고르게 (10/19) */
.card_i .ci_badge{left:6cqw;top:7cqw;width:42cqw}.card_i .ci_prd{z-index:3}.card_i .ci_txt{right:44%;z-index:4}.card_i .ci_sub{white-space:nowrap} /* 그림을 위에만 몰지 않고 카드 전체로: 배지 왼쪽 위 · 작은 제품 오른쪽 위 · 큰 제품 오른쪽 아래 글 옆 (10/19) */
/* 샘플 2 배너 — 그림 · 카드는 원래 피크 카드 그대로, 글만 아이스크림몰처럼 (10/19)
   왼쪽 24px · 아래 38px · 분류 14px → 제목 27px(줄 33px) 굵게 → 설명 16px. 오른쪽 아래 일시정지 + 장 수 */
.card_a .txt{left:24px!important;right:24px!important;bottom:38px!important}
.card_a .kicker{font-size:14px;font-weight:600;line-height:1.4;letter-spacing:-.2px}
.card_a .tit{margin-top:8px!important;font-size:27px!important;font-weight:800;line-height:33px;letter-spacing:-.8px}
.card_a .line2{margin-top:6px;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.3px;opacity:1}
.bnr_cards.type_a .slide_count{display:none}
.bnr_cards.type_a .ci_ctrl{position:absolute;z-index:3;right:calc(52px + 14px);bottom:16px;display:flex;gap:6px}
.bnr_cards.type_a .ci_ctrl .slide_count{display:block;position:static;height:28px;padding:0 12px;border-radius:99px;background:rgba(0,0,0,.28)!important;color:#fff;font-size:13px;font-weight:600;line-height:28px;letter-spacing:.3px}
.bnr_cards.type_a .btn_pause{position:relative;width:28px;height:28px;border:0;border-radius:50%;background:rgba(0,0,0,.28);display:grid;place-items:center;color:#fff}
.bnr_cards.type_a .btn_pause::before{content:"";position:absolute;inset:-8px}
.bnr_cards.type_a .btn_pause svg{width:12px;height:12px;stroke:currentColor;stroke-width:3;stroke-linecap:round;fill:none}
.bnr_cards.type_a .btn_pause .i_play{display:none;fill:currentColor;stroke:none}
.bnr_cards.type_a .btn_pause[aria-pressed=true] .i_pause{display:none}
.bnr_cards.type_a .btn_pause[aria-pressed=true] .i_play{display:block}
.bnr_cards.type_a .btn_pause:focus-visible{outline:2px solid #fff;outline-offset:1px}
.bnr_cards.type_a .ci_ctrl{right:86px}
/* ===== 샘플 하나로 정리 (10/19) — 샘플 2 바탕 + 샘플 3 타일 아이콘 ===== */
.cf_tile.t3_cate a{font-size:14px;font-weight:600;color:#1b1d21}
/* 상단 탭 글자 — 회색 대비 4.5 이상으로 */
.theme_clean .gnb_list a{color:#6b7280}
.theme_clean .gnb_list a.on{color:var(--pc)}
/* 다시 온 손님 카드 — 배너 바로 아래 한 줄 */
.back_card{position:relative;display:block;margin:16px 20px 0;padding:14px 44px 14px 16px;border-radius:14px;background:color-mix(in srgb,var(--pc-raw) 8%,#fff);border:1px solid color-mix(in srgb,var(--pc-raw) 18%,#fff)}
.back_card .k{display:block;font-size:13px;font-weight:600;color:#5f6670}
.back_card b{display:block;margin-top:3px;font-size:16px;font-weight:700;letter-spacing:-.4px;color:#1b1d21}
.back_card em{font-style:normal;color:var(--pc)}
.back_card i{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;font-size:22px;color:#5f6670}
.back_card:focus-visible{outline:2px solid var(--pc-raw);outline-offset:2px}
.btn_sample_list[hidden]{display:none!important} /* 샘플 목록 화면 숨김 (10/19) */
/* 글자를 눌렀을 때 깜박이는 입력 막대가 보이지 않게 (10/20) — 크롬 「캐럿 브라우징」(F7)이 켜져 있으면 아무 글자나 누를 때 막대가 생긴다. 입력 칸에서만 보이게 */
html,body,#wrap{caret-color:transparent}
input,textarea,select,[contenteditable]{caret-color:auto}
/* 메인 카테고리 6개 (10/20) — 3칸 × 2줄, 밸런스키트 · 무료 샘플은 포인트색 바탕 + 흰 그림 (모양 · 크기는 같게) */
.cf_tile.t3_cate ul{grid-template-columns:repeat(3,1fr);gap:20px 0}
.cf_tile .tile.type_gate{background:var(--pc-raw)}
.cf_tile .tile.type_gate g[fill^="color-mix"]{fill:#fff}
.cf_tile .tile.type_gate g[fill="var(--pc-raw)"]{fill:color-mix(in srgb,#fff 55%,var(--pc-raw))}
.cf_tile .tile.type_gate g:last-of-type{fill:var(--pc-raw)}
.t3_cate .tile svg{width:44px;height:44px} /* 10/20 */
/* 진입 경로 두 칸을 더 눈에 띄게 (10/20) — 같은 그림 · 같은 크기, 대신 모서리에 작은 말풍선 배지 + 은은한 그림자 */
.cf_tile .tile{position:relative}
.cf_tile .tile.type_gate{box-shadow:0 6px 14px color-mix(in srgb,var(--pc-raw) 32%,transparent)}
.cf_tile .tile_badge{position:absolute;right:-8px;top:-8px;z-index:1;height:20px;padding:0 7px;border-radius:10px 10px 10px 2px;background:#1b1d21;color:#fff;font-style:normal;font-size:11px;font-weight:700;line-height:20px;letter-spacing:-.2px;box-shadow:0 0 0 2px #fff}
.cf_tile.t3_cate ul{padding-top:28px}
#content .tit_area h2{font-size:20px} /* 메인 섹션 제목 20px로 통일 (10/20) */
/* 샘플 2 메인 배너 글 — 아이스크림몰 실제 CSS 값(휴대폰) 그대로 (10/20)
   글 묶음: 왼쪽 7% · 아래 11.34%, 자간 -0.075em
   분류: 3.4vw(375에서 12.75px) 굵게 · 줄 1.38em · 아래 1.1vw · 투명도 .8
   제목: 7.46vw(28px) 굵게 · 줄 1.21em · 아래 1.1vw · 단어 안 끊기게
   설명: 3.733vw(14px) 중간 굵기 · 줄 1.42em · 투명도 .8
   vw는 휴대폰 화면 폭(375) 기준이라, 샘플이 PC에서 375 틀 안에 보일 때도 같도록 px로 옮김 */
.card_a .txt{left:7%!important;right:7%!important;bottom:11.34%!important;letter-spacing:-.075em}
.card_a .kicker{margin:0 0 4px;font-size:12.75px;font-weight:700;line-height:1.38em;letter-spacing:-.075em;opacity:.8}
.card_a .tit{margin:0 0 4px!important;font-size:28px!important;font-weight:700;line-height:1.21em;letter-spacing:-.075em;word-break:keep-all}
.card_a .line2{margin:0;font-size:14px;font-weight:500;line-height:1.42em;letter-spacing:-.075em;opacity:.8}
/* 샘플 2 메인 배너 글 — 아이스크림몰처럼 흰 글 + 제목 위 분류 알약 (10/20 「브로치에 배경, 흰색」)
   알약: 검정 20% 소프트라이트 바탕 · 둥근 끝 · 안쪽 여백 8px/4px. 밝은 바탕에서도 읽히게 아주 옅은 글 그림자 */
.card_a .txt,.card_a .txt *{color:#fff!important}
.card_a .txt{text-shadow:0 1px 3px rgba(0,0,0,.16)}
.card_a .kicker{position:relative;display:inline-block;width:fit-content;max-width:100%;padding:4px 8px;border-radius:24px;opacity:1}
.card_a .kicker::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(0,0,0,.2);mix-blend-mode:soft-light;pointer-events:none}
.card_a .txt{isolation:isolate}
.card_a .kicker{color:rgba(255,255,255,.8)!important}
.card_a .line2{color:rgba(255,255,255,.8)!important;opacity:1}
/* 흰 글이 읽히도록 카드 아래쪽을 같은 색의 진한 톤으로 (10/20 「디자인은 우리가 바꾸면 된다」) */
.card_a::after{height:60%;background:linear-gradient(to top,color-mix(in srgb,var(--bg) 62%,#000) 0%,color-mix(in srgb,var(--bg) 78%,#000) 40%,transparent 100%)}
.card_a .txt{text-shadow:none}
.card_a::after{height:58%;background:linear-gradient(to top,var(--deep) 0%,color-mix(in srgb,var(--deep) 75%,transparent) 42%,transparent 100%)}

/* ===== 색 원칙 (10/20) — 포인트색으로 바뀌는 곳 말고는 모두 검정 · 회색. 바탕도 마찬가지 =====
   어떤 포인트색이 와도 어울리게: 글 #1b1d21 · #4a5260 · #5f6670, 바탕 #f4f5f7 · #fff, 강조는 var(--pc)
   예외: 카카오 · 네이버 로그인 버튼(각 회사 색 규정) */
:root{--sale:var(--pc);--warm:#f4f5f7;--c1:#f4f5f7;--c2:#f4f5f7;--c3:#f4f5f7;--c4:#f4f5f7;--c5:#f4f5f7;--c6:#f4f5f7}
/* 메인 띠 두 개 (무료 샘플 · 따뜻한 한끼) */
.bv_strip{background:#f4f5f7!important}
.bv_strip .note,.bv_strip .kicker{color:#5f6670!important}
.bv_strip .tit{color:#1b1d21!important}
.bv_strip .tit span,.bv_strip .hand{color:var(--pc)!important}
.bv_strip .bnr_oval{background:var(--pc-raw)!important;color:#fff!important}
.bv_strip .deco svg:not([fill="none"]){fill:var(--pc-raw)}
.bv_strip .deco svg[fill="none"]{stroke:var(--pc-raw)}
/* 따뜻한 한끼 블록 */
.box_donate{background:#f4f5f7}
.box_donate .txt_label{color:#5f6670!important}
.box_donate .txt_label svg,.box_donate .tag_list svg{fill:var(--pc-raw)}
.box_donate h3{color:#1b1d21}
.box_donate p,.box_donate .tag_list i{color:#4a5260}
/* 상품 상세 큰 사진 바탕 · 사진 없는 사료 그림 */
.pd2_hero{background:#f4f5f7!important}
.pack b{color:#1b1d21}
.lf_float .pk.type_txt{background:#f4f5f7!important;color:#4a5260}
/* 추천 결과 */
.result_visual h1 em{color:color-mix(in srgb,var(--pc-raw) 45%,#fff)}
.result_save{background:#f4f5f7;color:var(--pc)}
.box_msg.type_warn{background:#f4f5f7;color:#343a40}
.box_msg.type_warn span{color:#343a40!important}
.box_supp .txt_free{color:var(--pc)}
.box_ship .txt_ship em{color:var(--pc)}
.result_summary .allergy i{background:#f1f2f4;color:#343a40}
/* 랜딩 첫 화면 제목 — h1 → h2로 바꾼 뒤 빠졌던 모양 다시 (10/20) */
.lp_hero h2{margin-top:3.4cqw;font-family:"GmarketSans","Pretendard Variable",sans-serif;font-weight:700;font-size:11cqw;line-height:1.12;letter-spacing:-.06em;color:var(--ink)}
.lp_hero h2 em{font-style:normal;color:var(--hi)}
.lp_hero .lb{background:#fff;color:#4a5260}
.lp_hero img{height:74%}

/* 「이런 점이 고민이었나요?」 — 회색 바탕, 포인트 컬러와 상관없이 고정 (10/21). 말풍선도 흰색 */
.section_flow.type_worry,.lf_flow .section_flow.type_worry,.lp_flow .section_flow.type_worry,.kit_flow .section_flow.type_worry{background:#f1f2f4!important}
.section_flow.type_worry .worry .bub,.section_flow.type_worry .worry .bub.type_r,.lp_flow .section_flow.type_worry .worry .bub.type_r{background:#fff!important}

/* 10/27 브랜드 이야기 8종 — 띠는 버튼(누르면 제조 공정 영상 팝업) */
button.bs_band{width:calc(100% - 40px);padding:0;border:0;font:inherit;text-align:left;cursor:pointer}
.bs_band img{object-position:right center}
.bs_video{width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:16px;background:#111;color:#fff;overflow:hidden}
.bs_video::backdrop{background:rgba(0,0,0,.6)}
.bs_video_in{position:relative}
.bs_video video{display:block;width:100%;max-height:calc(100dvh - 160px);background:#000;object-fit:contain}
.bs_video_x{position:absolute;z-index:2;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.5);display:grid;place-items:center;cursor:pointer}
.bs_video_x svg{width:18px;height:18px;stroke:#fff;stroke-width:2;stroke-linecap:round}
.bs_video_tx{padding:16px 20px 20px}
.bs_video_tx small{display:block;font-size:12px;font-weight:600;opacity:.7}
.bs_video_tx b{display:block;margin-top:4px;font-size:18px;font-weight:800;letter-spacing:-.5px}
.bs_video_tx em{display:block;margin-top:4px;font-style:normal;font-size:13px;opacity:.85}
/* 10/27 썸네일 그림에 글자가 이미 있음 — 높이 고정 · 어두운 막 없이 그림 비율 그대로 */
.bs_band.bs_thumb{height:auto;background:none}
.bs_band.bs_thumb::before{content:none}
.bs_band.bs_thumb img{position:static;display:block;width:100%;height:auto;object-fit:initial}

/* 10/28 밸런스키트 소개 「상자에 들어가는 사료」 — 라인마다 링크(상품 · 제조 공정 영상) */
.lf_lines li > a,.lf_lines li > button{display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.lf_lines li > a > span:not(.th),.lf_lines li > button > span:not(.th){display:block;font-size:13px;color:#7a818a}
.lf_lines .go{display:block;margin-top:6px;font-style:normal;font-size:12px;font-weight:600;color:var(--pc-raw)}

/* 10/28 상품 상세 안 밸런스키트 홍보 한 판 — 바깥 20px · 글 36px 기준선 */
.pd2_kit{margin:8px 20px 0;padding:28px 16px 24px;border-radius:20px;overflow:hidden;background:color-mix(in srgb,var(--pc-raw) 7%,#f6f7f9);text-align:left}
.pdk_kick{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--pc-raw)}
.pd2_kit h3{margin-top:6px;font-size:20px;font-weight:700;line-height:1.35;letter-spacing:-.4px}
/* 10/29 시안 ① 상자 + 골든리트리버 사진. 글과 겹치지 않게 제목 아래에 따로 둔다 */
.pdk_hero{margin:16px -16px 0;aspect-ratio:4/3;background:#e9e4dc}
.pdk_hero img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.pdk_lead{margin-top:18px;font-size:14px;line-height:1.6;color:#555}
/* 시안 ③ 비교표를 줄인 것 — 세 줄만 */
.pdk_cmp{margin-top:18px;border-radius:12px;overflow:hidden;border:1px solid color-mix(in srgb,var(--pc-raw) 18%,#e6e8eb);background:#fff}
.pdk_cmp table{width:100%;border-collapse:collapse;font-size:12.5px}
.pdk_cmp th,.pdk_cmp td{padding:10px 8px;border-bottom:1px solid #eef0f2;line-height:1.4;text-align:center;word-break:keep-all}
.pdk_cmp thead th{background:#f6f7f9;font-weight:600;color:#666}
.pdk_cmp thead th.on{background:var(--pc-raw);color:#fff}
.pdk_cmp th:first-child{width:1%;white-space:nowrap} /* 식단 · 양 · 영양제 칸은 글자 폭만큼만 */
.pdk_cmp td.on,.pdk_cmp thead th.on{width:46%}
.pdk_cmp tbody th{font-weight:600;color:#666;background:#fbfbfc}
.pdk_cmp td{color:#777}
.pdk_cmp td.on{font-weight:700;color:#1b1d21;background:color-mix(in srgb,var(--pc-raw) 6%,#fff)}
.pdk_cmp tr:last-child>*{border-bottom:0}
/* 이 상품이 키트 안에서 맡는 몫 — 사진 하나 + 두 줄 */
.pdk_role{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;margin-top:16px;padding:12px;border-radius:14px;background:#fff}
.pdk_role img{width:96px;height:96px;border-radius:10px;object-fit:cover}
.pdk_role b{display:block;font-size:14px;font-weight:700;color:#1b1d21}
.pdk_role p{margin-top:4px;font-size:13px;line-height:1.5;color:#5f6670}
.pdk_pts{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.pdk_pts li{display:grid;grid-template-columns:7.5em 1fr;gap:8px;align-items:baseline;font-size:13px;line-height:1.5}
.pdk_pts b{font-weight:700;color:#1b1d21}
.pdk_pts span{color:#5f6670}
.pdk_lines{list-style:none;margin:20px -16px 0;padding:0 16px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.pdk_lines::-webkit-scrollbar{display:none}
.pdk_lines li{flex:none;width:58px;text-align:center}
.pdk_lines .th{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;overflow:hidden;background:#fff!important;border:2px solid transparent}
.pdk_lines .th img{width:70%;height:70%;object-fit:contain}
.pdk_lines .th .pack_wrap{transform:scale(.5)}
.pdk_lines li.on .th{border-color:var(--pc-raw)}
.pdk_lines .nm{display:block;margin-top:6px;font-size:11px;line-height:1.3;color:#5f6670;word-break:keep-all}
.pdk_lines li.on .nm{color:#1b1d21;font-weight:700}
.pdk_btn{display:flex;align-items:center;justify-content:center;gap:4px;height:48px;margin-top:20px;border-radius:99px;background:var(--pc-raw);color:#fff;font-size:15px;font-weight:600}
/* 10/29 팀장: 상세페이지 글자 크기를 우리 사이트 기준(본문 15 · 제목 26)으로 키움 — 러쉬보다 한 단계 크게 */
.pd3_card .cat{font-size:14px}
.pd3_card h2{font-size:26px}
.pd3_card .lead{font-size:16px}
.pd3_facts li{font-size:14.5px}
.pd3_facts span{font-size:13px}
.pd3_cold{font-size:14px}
.pd3_sec .lbl,.pd3_band .lbl,.pd3_howto .lbl,.pd3_pack .lbl,.pd3_fit .lbl{font-size:14px}
.pd3_sec h3,.pd3_band h3,.pd3_howto h3,.pd3_pack h3{font-size:24px}
.pd3_fit h3{font-size:26px}
.pd3_sec p,.pd3_band p,.pd3_pack p{font-size:15.5px}
.pd3_steps b{font-size:17px}
.pd3_steps p{font-size:15px}
.pd3_tags{font-size:14.5px}
.pd3_lines li{font-size:15.5px}
.pd3_fine{font-size:14.5px!important}
.pd3_fine b{font-size:15.5px}
.pd3_nutri{font-size:13.5px}
.pd3_ing2 figcaption{font-size:15px}
.pd3_ing2 figcaption span,.pd3_know span,.pd3_ing span,.pd3_good span,.pd3_guide span,.pd3_pack li span{font-size:13.5px}
.pd3_know b{font-size:15.5px}
.pd3_vs3 b{font-size:14px}
.pd3_band.type_vs summary,.pd3_sec.type_fold summary{font-size:17px}
.pd3_band.type_vs details p,.pd3_sec.type_fold details p,.pd3_qa details p{font-size:15px}
.pd3_band.type_vs details ul{font-size:14.5px}
.pd3_howto li b{font-size:14px}
.pd3_howto li span{font-size:17px}
.pd3_howto li p,.pd3_howto .note p,.pd3_scene p,.pd3_fit li{font-size:14.5px}
.pd3_pack li b,.pd3_guide b{font-size:14.5px}
.pd3_qa summary{font-size:16px}
.pd3_ing b,.pd3_good b{font-size:16px}
.pd3_note{font-size:13px!important}
.pd3_sec.type_info h3{font-size:18px}
.pd3 .pdk_kick{font-size:12.5px}
.pd3 .pd2_kit h3{font-size:26px}
.pd3 .pdk_lead{font-size:16px}
.pd3 .pdk_pts li{font-size:13.5px}