/* ============================================================
   cafe777 컬리형 스킨 3종 (260817_cafe777-blue 이식) — KurlyHome 전용 스코프
   원본: E:\Claude-My-Designer\docs\plan\260817_cafe777-blue\home.html
   규격: 1050 컨테이너 / 4-up 249+18 / 5-up 190+25 / 히어로 370 / 배너 220
         radius 4(면)·6(배지)·0(사진) / box-shadow 0 / gradient 0 / 배지 2색
   격리: 전 셀렉터 .khome 스코프 + k- 접두 클래스 — 듀오톤/퓨전 캐스케이드와 무간섭.
   토큰 7+1: --brand --accent --coupon --member --canvas --ink --ey (+--on-brand)
   ============================================================ */

.khome{
  --kfont:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  font-family:var(--kfont);background:var(--canvas);color:var(--ink);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;word-break:keep-all;
}
/* ---------- 스킨 0 : KURLY PURPLE (마켓컬리 정통 팔레트 — 260819 기본 스킨) ---------- */
.khome[data-kskin="kurly"],[data-kbridge][data-kskin="kurly"]{
  --brand:#5f0080; --brand-2:#7b2b96;
  --accent:#fa622f; --coupon:#8e4b9e; --member:#c9a227;
  --canvas:#f7f7f7; --paper:#ffffff;
  --ink:#333333; --sub:#666666; --mute:#999999; --strike:#b5b5b5;
  --line:#e8e8e8; --icon:#9aa0a6;
  --on-brand:#ffffff; --ey:#e0b7f0;
  --disp:'Albert Sans',var(--kfont);
  /* 260910 Goal G W-G9 — 디자인 소스 skins/kurly.css 의 표현 토큰 그대로(틴트·액센트 잉크·on-* 대비색·그림자 2층·라운드) */
  --tint:#f3e8f7; --accent-ink:#b83d15; --on-accent:#0a0a0a; --on-coupon:#ffffff; --on-member:#231b00;
  --shadow:0 1px 3px rgba(95,0,128,.10); --shadow-2:0 8px 24px rgba(95,0,128,.14);
  --r:12px; --r-sm:8px;
  /* 260911 W-J5 — 어워드 GOLD 훅(duotone.css :root 와 같은 이름 6종). 컬리 = 멤버 금색 그대로(기본 스킨의 금색 정체성), 칩 바탕은 브랜드 틴트.
     파생값은 color-mix — hex 를 새로 만들지 않는다. */
  --gold:var(--member); --gold-wash:var(--tint); --gold-ink:color-mix(in srgb,var(--member) 45%,var(--ink));
  --gold-hi:color-mix(in srgb,var(--member) 80%,var(--paper)); --on-gold:var(--on-member); --gold-deep:color-mix(in srgb,var(--member) 60%,var(--ink));
}
/* ---------- 스킨 1 : INK & PINK (beautypharmacy.co.kr 실측) ---------- */
.khome[data-kskin="ink"],[data-kbridge][data-kskin="ink"]{
  --brand:#0a0a0a; --brand-2:#242424;
  --accent:#e0479a; --coupon:#f06fb0; --member:#c9a227;
  --canvas:#f5f5f5; --paper:#ffffff;
  --ink:#0a0a0a; --sub:#666666; --mute:#999999; --strike:#b5b5b5;
  --line:#e4e4e4; --icon:#9aa0a6;
  --on-brand:#ffffff; --ey:#ff8dc4;
  --disp:'Albert Sans',var(--kfont);
  /* 실측 사이트(beautypharmacy.co.kr)는 사진이 각진다 — 라운드 0 유지. 나머지 표현 토큰은 .khome 파생값(파일 끝 W-G9 블록) */
  --r-sm:0px;
  /* W-J5 — 잉크: 금색 글자·헤어라인, 칩 바탕은 흰 종이(테두리는 잉크 — kurly-pages.css §13) */
  --gold:var(--member); --gold-wash:var(--paper); --gold-ink:color-mix(in srgb,var(--member) 55%,var(--ink));
  --gold-hi:color-mix(in srgb,var(--member) 80%,var(--paper)); --on-gold:var(--on-member); --gold-deep:color-mix(in srgb,var(--member) 60%,var(--ink));
}
/* ---------- 스킨 2 : SAND & SKY (POP 계승) ---------- */
.khome[data-kskin="sand"],[data-kbridge][data-kskin="sand"]{
  --brand:#0f5a73; --brand-2:#12566e;
  --accent:#d9622b; --coupon:#5bc8e4; --member:#c8944b;
  --canvas:#f2ebde; --paper:#fffdf8;
  --ink:#26282a; --sub:#5a5d60; --mute:#8e9194; --strike:#b2aa9d;
  --line:#e0d6c6; --icon:#a89e8f;
  --on-brand:#ffffff; --ey:#8fdcf0;
  --disp:'Marcellus',var(--kfont);
  /* W-J5 — 샌드: 따뜻한 금(--member #c8944b), 칩 바탕은 금색 14% 를 섞은 종이(--canvas 면과 구분되게) */
  --gold:var(--member); --gold-wash:color-mix(in srgb,var(--member) 14%,var(--paper)); --gold-ink:color-mix(in srgb,var(--member) 55%,var(--ink));
  --gold-hi:color-mix(in srgb,var(--member) 80%,var(--paper)); --on-gold:var(--on-member); --gold-deep:color-mix(in srgb,var(--member) 60%,var(--ink));
}
/* ---------- 스킨 3 : HERB & AMBER ---------- */
.khome[data-kskin="herb"],[data-kbridge][data-kskin="herb"]{
  --brand:#16352a; --brand-2:#1f4a3a;
  --accent:#d97706; --coupon:#5a8f6e; --member:#8a6fb0;
  --canvas:#faf6ee; --paper:#ffffff;
  --ink:#1a2b22; --sub:#5c6b62; --mute:#8d9a92; --strike:#b3b8b4;
  --line:#e6e0d3; --icon:#9aa89f;
  --on-brand:#ffffff; --ey:#b6e3c3;
  --disp:'Marcellus',var(--kfont);
  /* W-J5 — 허브: 앰버(--accent #d97706). --member 는 보라라 어워드 금색 자리에 부적합 */
  --gold:var(--accent); --gold-wash:color-mix(in srgb,var(--accent) 12%,var(--paper)); --gold-ink:color-mix(in srgb,var(--accent) 60%,var(--ink));
  --gold-hi:color-mix(in srgb,var(--accent) 80%,var(--paper)); --on-gold:var(--on-accent); --gold-deep:color-mix(in srgb,var(--accent) 60%,var(--ink));
}

.khome *{box-sizing:border-box;margin:0;padding:0}
.khome img{display:block;max-width:100%}
.khome a{color:inherit;text-decoration:none}
.khome a:hover{text-decoration:none}
.khome button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit}
/* 260908 지시 1-4: 고정폭 → 유동폭. 예전 width:1050px 고정이라 761~1049px(아이패드) 에서 가로
   스크롤·우측 잘림이 났다. max-width + 좌우 패딩으로 태블릿까지 깔끔하게. */
.khome .kwrap{width:100%;max-width:1050px;margin:0 auto;padding:0 24px;box-sizing:border-box}

/* ===== 프로모 바 42px ===== */
.khome .kpromo{height:42px;background:var(--brand);color:var(--on-brand);display:flex;align-items:center}
.khome .kpromo .kwrap{display:flex;align-items:center;justify-content:center;position:relative;height:100%}
.khome .kpromo p{font-size:14px;font-weight:700;margin:0}
.khome .kpromo p em{font-style:normal;color:var(--ey)}
.khome .kpromo .kx{position:absolute;right:0;font-size:18px;color:var(--on-brand);opacity:.7;line-height:1}

/* ===== 섹션 공통 ===== */
.khome .ksec{padding:40px 0 44px;background-color:var(--canvas)}
.khome .ksec.kpap{background-color:var(--paper)}
.khome .kshead{display:flex;align-items:flex-end;gap:10px;margin-bottom:6px;border:0;padding:0}
.khome .kshead h2{font-family:var(--kfont);font-size:24px;font-weight:700;letter-spacing:-.5px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.khome .kshead .karw{font-size:20px;color:var(--ink);line-height:1}
.khome .kshead .kmore{margin-left:auto;font-size:14px;color:var(--sub)}
.khome .kssub{font-size:14px;color:var(--mute);margin:0 0 18px}

/* ===== 히어로 — 배너 전체 노출(260908 지시 1) ===== */
/* P0-2(260821 감사): "사진이 색을 담당한다" — 사진 원색 + 중립 다크 스크림.
   260908: 예전 height:370px 고정 + object-fit:cover 는 세로가 긴 배너를 위·아래로 잘랐다
   (True Form NAD+ 튜브가 하단에서 잘림). 컨테이너를 배너 비율로 키우고 object-fit:contain 으로
   바꿔 배너 이미지가 통째로 보이게 한다. 남는 여백은 중립 다크(#101013)가 채운다. */
/* 260908 수정: width:100% 를 명시하지 않으면 aspect-ratio + max-height 조합에서 폭이
   '고정높이 × 비율'(=66vh×2.1≈1497px)로 역산돼 배너가 왼쪽으로 치우치고 우측에 큰 여백이 생긴다.
   폭을 100% 로 고정하면 aspect-ratio 는 높이만 정하고 max-height 는 높이만 자른다(폭은 항상 꽉 참). */
/* cafe24 hero parity: literal colors/font stacks deliberately bypass skin token overrides. */
.khome .khero{position:relative;height:90vh;min-height:600px;background:#f4f4f2;overflow:hidden;width:100%;font-family:Pretendard,"Apple SD Gothic Neo",-apple-system,sans-serif;line-height:1.6}
/* cafe24 .hero .slide owns this vh minimum at every breakpoint; .hero itself stays at 600px. */
.khome .khero .kslide{display:none;position:absolute;inset:0;height:100%;min-height:min(86vh,760px);overflow:hidden}
.khome .khero .kslide.on{display:block}
/* 초점 토큰 --hero-focus(260913 W-L2 · duotone.css 와 같은 규칙) — KurlyHome 이 slide.focus 를 인라인으로 싣고, 없으면 이 폴백 */
.khome .khero .kslide picture,.khome .khero .kslide img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,75% center);z-index:0}
.khome .khero .kveil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.32) 30%,rgba(10,10,10,.05) 58%,transparent 76%)}
.khome .khero .kcap{position:absolute;left:0;bottom:13%;z-index:2;padding:0 5vw;max-width:1040px;color:#fff}
.khome .khero .kcap .key{font-family:"Albert Sans","Helvetica Neue",Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:.88}
.khome .khero .kcap .ken{font-family:"Albert Sans",Pretendard,sans-serif;font-size:clamp(44px,7vw,104px);font-weight:800;line-height:.92;letter-spacing:-.01em;margin:14px 0 8px;color:#fff}
.khome .khero .ken .ln{display:block;overflow:hidden}
.khome .khero .ken .kin{display:inline-block;white-space:nowrap;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.khome .khero .kslide.on .kin{transform:none}
.khome .khero .kcap h1{font-size:clamp(22px,3.2vw,40px);font-weight:700;margin:0 0 16px;color:#fff;letter-spacing:-.01em}
.khome .khero .kcap p{font-size:16px;color:rgba(255,255,255,.85);max-width:520px;margin:0 0 26px;line-height:1.6}
.khome .khero .kbtn{display:inline-flex;align-items:center;gap:10px;border:1.5px solid #fff;color:#fff;padding:13px 30px;font-family:"Albert Sans","Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-decoration:none;transition:.35s}
.khome .khero .kbtn:hover{background:#fff;color:#0a0a0a;gap:16px}
.khome .khero .kdots{position:absolute;left:5vw;bottom:30px;display:flex;gap:8px;z-index:5}
.khome .khero .kdots button{width:30px;height:3px;padding:0;background:rgba(255,255,255,.42);border:0;cursor:pointer;transition:.3s}
.khome .khero .kdots button.on{background:#fff;width:50px}
.khome .khero .kslide-no{position:absolute;right:5vw;bottom:30px;z-index:3;font-family:"Albert Sans","Helvetica Neue",Arial,sans-serif;font-size:13px;letter-spacing:.18em;color:rgba(255,255,255,.7)}
@media(max-width:1023px){
  .khome .khero{height:78vh}
  .khome .khero .kslide img.bg{object-position:var(--hero-focus,78% center)}
}
@media(max-width:560px){
  .khome .khero{height:88vh}
  .khome .khero .kslide img.bg{object-position:var(--hero-focus,72% center)}
  .khome .khero .kveil{background:linear-gradient(rgba(10,10,10,.12) 30%,rgba(10,10,10,.72) 100%)}
  .khome .khero .kcap{bottom:9%;max-width:none;padding:0 7vw}
}


/* ===== 상품 레일 ===== */
.khome .krail{position:relative}
.khome .ktrack{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none}
.khome .ktrack::-webkit-scrollbar{display:none}
.khome .ktrack.kg5{gap:25px}
.khome .krail .knav{position:absolute;top:134px;width:44px;height:44px;border-radius:22px;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink);z-index:5}
.khome .krail .knav.kprev{left:-22px}
.khome .krail .knav.knext{right:-22px}
.khome .krail:has(.kg5) .knav{top:97px}
.khome .krail .knav:hover{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
/* 잘린 가장자리 블러(260909 대표 지시 3) — KRail 이 잘린 쪽에만 data-cut-l/r 를 켠다. 64px 띠가 뒤의 카드를
   backdrop-filter 로 흐리고 바깥으로 갈수록 섹션 바탕색(캔버스, 종이 섹션은 종이)으로 진해진다. 화살표(z 5)는 위. */
.khome .krail .kcut{display:none;position:absolute;top:0;bottom:0;width:64px;pointer-events:none;z-index:4;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.khome .krail .kcut-l{left:0;background:linear-gradient(90deg,color-mix(in srgb,var(--rail-bg,var(--canvas)) 88%,transparent) 0%,color-mix(in srgb,var(--rail-bg,var(--canvas)) 40%,transparent) 55%,transparent 100%)}
.khome .krail .kcut-r{right:0;background:linear-gradient(270deg,color-mix(in srgb,var(--rail-bg,var(--canvas)) 88%,transparent) 0%,color-mix(in srgb,var(--rail-bg,var(--canvas)) 40%,transparent) 55%,transparent 100%)}
.khome .krail[data-cut-l] .kcut-l,.khome .krail[data-cut-r] .kcut-r{display:block}
.khome .kpap .krail{--rail-bg:var(--paper)}

/* ===== 상품 카드 — 컬리 5층 스탬프 ===== */
/* P0-1(260821 감사): 카드 높이는 콘텐츠(이미지+텍스트 스택)가 결정한다 — 고정 높이 금지 */
.khome .kpc{width:249px;flex:0 0 249px;background:transparent;border:0;padding:0;display:block}
.khome .kg5 .kpc{width:190px;flex:0 0 190px}
/* P0-1: 이미지 박스 = 컬리 비율(가로/세로 .778) 고정. span 이므로 display:block 필수 —
   블록화 없이는 치수가 무시되고 img height:100% 가 카드 전체 높이로 번져(1:2.06 크롭)
   상품명·가격이 카드 밖으로 넘친다. 249→320px / 190→244px 는 비율이 자동 산출 */
/* 260908 지시 1-1: 카드 이미지 프레임. 실제품 사진(흰 여백 넓은 상품컷)을 cover 로 채우면 제품이 작게
   떠 카드가 무너졌다 → 듀오톤과 동일 전략(contain + 흰 배경 + 소폭 패딩)으로 소스와 무관하게 일관 표시.
   프레임 비율도 세로 .778 에서 4/5 로 완화해 여백을 줄였다. 큐레이션 폴백(전면블리드)만 cover 유지. */
.khome .kpc .kph{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--paper,#fff);border:var(--bw,1px) solid var(--line,#e8e8e8);border-radius:var(--r-sm,0px);transition:box-shadow var(--hover-dur,.16s) ease}
.khome .kpc:hover .kph{box-shadow:var(--shadow-2,none)}
.khome .kpc .kph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%;box-sizing:border-box;transition:transform .25s;mix-blend-mode:normal}
.khome .kpc .kph img[src*="/img/curated/"]{object-fit:cover;padding:0}
.khome .kpc:hover .kph img{transform:scale(1.02)}
.khome .kpc .kbdg{position:absolute;left:8px;top:8px;height:19px;border-radius:6px;padding:0 6px;font-size:14px;font-weight:500;color:#fff;background:var(--coupon);display:inline-flex;align-items:center;line-height:19px}
.khome .kpc .kbdg.kmem{background:var(--member)}
.khome .kpc .krk{position:absolute;left:8px;bottom:6px;font-family:var(--disp);font-size:38px;font-weight:700;color:var(--brand);line-height:1;
  text-shadow:0 0 5px rgba(255,255,255,.95),0 0 10px rgba(255,255,255,.85),0 1px 2px rgba(255,255,255,.95)}
.khome .kpc-layout .kadd{width:100%;height:36px;margin-top:10px;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:16px;color:var(--ink);background:var(--paper);opacity:0;transition:opacity .15s}
.khome .kpc-layout:hover .kadd{opacity:1}
.khome .kpc-layout .kadd:hover{border-color:var(--brand);color:var(--brand)}
/* P1: 카드 브랜드 라인 — 영문 풀네임 prefix 대신 브랜드 표기(소) + 한글명 */
.khome .kpc .kbr{display:block;margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);font-family:var(--disp)}
.khome .kpc h3{font-family:var(--kfont);font-size:16px;font-weight:400;color:var(--ink);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:45px}
.khome .kpc .kop{font-size:14px;color:var(--strike);text-decoration:line-through;margin-top:6px;display:block;min-height:19px}
.khome .kpc .kpr{margin-top:2px;display:flex;align-items:baseline;gap:7px}
.khome .kpc .kpr .kdc{font-size:16px;font-weight:700;color:var(--accent)}
.khome .kpc .kpr .kfp{font-size:16px;font-weight:700;color:var(--ink)}
.khome .kpc .krev{margin-top:8px;display:flex;align-items:center;gap:5px;font-size:13px;color:var(--icon)}
.khome .kpc .krev svg{width:15px;height:15px;fill:var(--icon)}

/* ===== 라인 배너 220px ===== */
.khome .kline{height:220px;display:flex;align-items:center;background:var(--brand);position:relative;overflow:hidden}
.khome .kline .kwrap{display:flex;align-items:center;gap:26px;position:relative;z-index:2}
.khome .kline .ktag{font-size:12px;letter-spacing:.2em;color:var(--ey);font-weight:700}
.khome .kline h3{font-family:var(--kfont);font-size:28px;font-weight:700;color:#fff;letter-spacing:-.6px;margin-top:6px}
.khome .kline h3 em{font-style:normal;color:var(--ey)}
.khome .kline p{font-size:15px;color:rgba(255,255,255,.75);margin-top:8px}
.khome .kline .klb{margin-left:auto;height:44px;padding:0 24px;border:1px solid rgba(255,255,255,.8);border-radius:4px;color:#fff;font-size:15px;display:flex;align-items:center;background:transparent}
.khome .kline .klb:hover{background:#fff;color:var(--brand)}
.khome .kline .kart{position:absolute;right:0;top:0;bottom:0;width:46%;opacity:.4}
.khome .kline .kart img{width:100%;height:100%;object-fit:cover}

/* ===== 타임딜 ===== */
.khome .kdeal{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.khome .kdeal .kclk{width:26px;height:26px;border-radius:13px;background:var(--coupon);display:flex;align-items:center;justify-content:center}
.khome .kdeal .kclk svg{width:15px;height:15px;fill:#fff}
.khome .kdeal .kt{display:flex;align-items:center;gap:5px}
.khome .kdeal .kt b{min-width:34px;height:34px;border-radius:4px;background:var(--ink);color:var(--paper);font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.khome .kdeal .kt i{font-style:normal;color:var(--mute);font-weight:700}
.khome .kdeal .knote{font-size:14px;color:var(--mute)}

/* ===== 대형 특가 (2-up) ===== */
.khome .kbig{display:flex;gap:18px;align-items:stretch}
.khome .kbig .kvis{position:relative;flex:1 1 516px;height:340px;overflow:hidden;background:var(--paper,#fff);border:var(--bw,1px) solid var(--line,#e8e8e8);border-radius:var(--r-sm,0px)}
/* 260908 지시 1-1: 대형특가도 실제품 단품컷이라 contain + 소폭 패딩(잘림·여백 과다 해소). */
.khome .kbig .kvis img{width:100%;height:100%;object-fit:contain;padding:3%;box-sizing:border-box}
.khome .kbig .kvis img[src*="/img/curated/"]{object-fit:cover;padding:0}
.khome .kbig .kinfo{flex:0 0 516px;background:var(--paper);padding:34px 32px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line)}
.khome .kbig .kinfo .kbdg2{display:inline-flex;align-self:flex-start;height:19px;border-radius:6px;padding:0 6px;font-size:14px;font-weight:500;color:#fff;background:var(--member);align-items:center}
.khome .kbig .kinfo h3{font-family:var(--kfont);font-size:26px;font-weight:700;margin-top:12px;letter-spacing:-.5px}
.khome .kbig .kinfo p{font-size:15px;color:var(--sub);margin-top:10px;line-height:1.6}
.khome .kbig .kinfo .kpr{margin-top:18px;display:flex;align-items:baseline;gap:9px}
.khome .kbig .kinfo .kpr .kdc{font-size:26px;font-weight:700;color:var(--accent)}
.khome .kbig .kinfo .kpr .kfp{font-size:26px;font-weight:700}
.khome .kbig .kinfo .kpr .kop{font-size:15px;color:var(--strike);text-decoration:line-through}
.khome .kbig .kinfo .kgo{margin-top:20px;height:48px;background:var(--brand);color:var(--on-brand);border-radius:4px;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}

/* ===== 카테고리 랭킹 탭 ===== */
.khome .ktabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.khome .ktabs button{height:36px;padding:0 16px;border:1px solid var(--line);border-radius:18px;font-size:14px;color:var(--sub);background:var(--paper)}
.khome .ktabs button.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand);font-weight:700}
/* 260909 REV.C: TOP 5 → TOP 3. 전폭이면 카드 3열(.ktop5), 반폭이면 세로 3행 리스트(.ktop3). 부문 칩은 한 줄 미니 칩. */
.khome .ktop5{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.khome .ktop5 .kpc{width:auto}
.khome .ktop5note{margin-top:12px;font-size:12.5px;color:var(--mute)}
.khome .ktabs.ktabs-mini{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;margin-bottom:12px;padding-bottom:2px}
.khome .ktabs.ktabs-mini::-webkit-scrollbar{display:none}
.khome .ktabs.ktabs-mini button{height:28px;padding:0 11px;font-size:12px;white-space:nowrap;flex:0 0 auto}
.khome .ktop3{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.khome .ktop3 li{border-top:1px solid var(--line)}
.khome .ktop3 li:first-child{border-top:0}
.khome .ktop3-row{display:flex;align-items:center;gap:12px;padding:10px 0;min-width:0}
.khome .ktop3-n{font-family:var(--disp);font-size:22px;font-weight:700;color:var(--brand);width:24px;flex:0 0 24px;line-height:1}
.khome .ktop3-th{width:56px;height:70px;flex:0 0 56px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.khome .ktop3-th img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
.khome .ktop3-th img[src*="/img/curated/"]{object-fit:cover;padding:0}
.khome .ktop3-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.khome .ktop3-br{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);font-family:var(--disp)}
.khome .ktop3-tx b{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.khome .ktop3-pr{font-size:13.5px;font-weight:700;color:var(--ink)}
.khome .ktop3-pr em{font-style:normal;color:var(--accent);margin-right:5px}
.khome .ktop3-chip{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--sub);font-family:var(--disp);white-space:nowrap}
.khome .ktop3-chip.kgoldc{border-color:var(--gold,#c9a227);color:var(--gold-ink,#8a6d12);background:var(--gold-wash,#fbf6e6)}
.khome .kranks{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px}
.khome .kranks>div{min-width:0}
.khome .krow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.khome .krow .kn{font-family:var(--disp);font-size:17px;font-weight:700;color:var(--accent);width:20px;flex:0 0 20px}
.khome .krow .kth{width:44px;height:56px;flex:0 0 44px;overflow:hidden;background:var(--canvas)}
.khome .krow .kth img{width:100%;height:100%;object-fit:cover}
.khome .krow .ktx{flex:1;min-width:0}
.khome .krow .ktx b{display:block;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.khome .krow .ktx span{font-size:14px;font-weight:700}
.khome .krow .ktx span em{font-style:normal;color:var(--accent);margin-right:5px}

/* ===== 큐레이션 라인 6종(옵션 products — 전폭 한 줄) ===== */
.khome .klines{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.khome .kln{text-align:center;display:block}
.khome .kln .kcir{display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.khome .kln .kcir img{width:100%;height:100%;object-fit:cover}
.khome .kln b{display:block;font-size:14px;font-weight:700;margin-top:10px;color:var(--ink)}
.khome .kln span{display:block;font-size:12px;color:var(--mute);margin-top:2px;font-family:var(--disp);letter-spacing:.06em}

/* ===== 시술 후 케어 — 몬드리안 타일 정사각(260909 REV.C, 대표 지시 2-3 "작은 사각형 안에 오밀조밀") =====
   4×4 셀 · 타일 6장(2×2 · 2×1 · 1×1 · 1×1 · 2×2 · 2×2) · gap 6 · 라운드 12 · aspect-ratio 1 · max 420.
   6장이 아니면(부문 추가·비활성) .kmondrian-6 이 빠져 2열 자동 배치로 물러선다(구멍·넘침 없음).
   타일색은 스킨 토큰 순환 — brand / ey / canvas / accent / paper / brand-2. hex 금지(스킨 대원칙). */
.khome .kmondrian{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(84px,auto);gap:6px;width:100%;max-width:420px}
.khome .kmondrian-6{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-rows:auto;aspect-ratio:1}
.khome .kmondrian-6 .kmtile:nth-child(1){grid-area:1/1/3/3}
.khome .kmondrian-6 .kmtile:nth-child(2){grid-area:1/3/2/5}
.khome .kmondrian-6 .kmtile:nth-child(3){grid-area:2/3/3/4}
.khome .kmondrian-6 .kmtile:nth-child(4){grid-area:2/4/3/5}
.khome .kmondrian-6 .kmtile:nth-child(5){grid-area:3/1/5/3}
.khome .kmondrian-6 .kmtile:nth-child(6){grid-area:3/3/5/5}
.khome .kmtile{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:12px 12px 10px;border-radius:12px;min-width:0;min-height:0;overflow:hidden;
  color:var(--ink);background:var(--canvas);border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease}
.khome .kmtile b{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.25;word-break:keep-all}
.khome .kmtile small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.72;font-family:var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.khome .kmtile:hover{transform:scale(1.03);z-index:1;box-shadow:0 6px 18px rgba(0,0,0,.12)}
/* 1×1 타일은 글자를 줄인다(≈100px 폭) */
.khome .kmondrian-6 .kmtile:nth-child(3) b,.khome .kmondrian-6 .kmtile:nth-child(4) b{font-size:12.5px}
.khome .kmondrian-6 .kmtile:nth-child(3),.khome .kmondrian-6 .kmtile:nth-child(4){padding:8px 6px}
.khome .kmondrian-6 .kmtile:nth-child(3) small,.khome .kmondrian-6 .kmtile:nth-child(4) small{font-size:9px;letter-spacing:0;flex-shrink:0}
.khome .kmtile:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
@media(max-width:360px){
  .khome .kmondrian-6 .kmtile:nth-child(2){padding:8px}
  .khome .kmondrian-6 .kmtile:nth-child(3),.khome .kmondrian-6 .kmtile:nth-child(4){padding:4px;gap:1px}
  .khome .kmondrian-6 .kmtile:nth-child(3) b,.khome .kmondrian-6 .kmtile:nth-child(4) b{font-size:12px}
  .khome .kmondrian-6 .kmtile:nth-child(3) small,.khome .kmondrian-6 .kmtile:nth-child(4) small{font-size:8.5px;line-height:1.15}
}
.khome .kmtile:nth-child(6n+1){background:var(--brand);color:var(--on-brand);border-color:transparent}
.khome .kmtile:nth-child(6n+2){background:var(--ey);color:var(--ink);border-color:transparent}
.khome .kmtile:nth-child(6n+3){background:var(--canvas);color:var(--ink)}
.khome .kmtile:nth-child(6n+4){background:var(--accent);color:#111;border-color:transparent}
.khome .kmtile:nth-child(6n+5){background:var(--paper);color:var(--ink)}
.khome .kmtile:nth-child(6n+6){background:var(--brand-2);color:var(--on-brand);border-color:transparent}
.khome .kmtile:nth-child(6n+1) small,.khome .kmtile:nth-child(6n+4) small,.khome .kmtile:nth-child(6n+6) small{opacity:.82}

/* ===== 반폭 한 줄(260909 REV.C) — 연속한 half 블록 2개(.khalf)를 KurlyHome 이 .khalf2 로 묶는다 =====
   데스크톱 2열, ≤1023px 1열. 각 칸은 종이 카드(라운드 12·괘선) — 서로 다른 섹션 바탕(canvas/paper)이 한 줄에서 갈리지 않게. */
.khome .khalf2{width:100%;max-width:1050px;margin:0 auto;padding:40px 24px 44px;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch;background:var(--canvas)}
.khome .khalf2 .ksec{padding:0;background:transparent;min-width:0}
.khome .khalf2 .ksec.khalf{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:24px 22px 22px;display:flex;flex-direction:column}
.khome .khalf2 .kwrap{max-width:none;padding:0;width:100%}
.khome .khalf2 .kshead h2{font-size:20px}
.khome .khalf2 .kssub{font-size:13px;margin-bottom:14px}
.khome .khalf2 .kmondrian{margin:0 auto}
@media (max-width:1023px){
  .khome .khalf2{grid-template-columns:1fr;gap:18px;padding:28px 24px 30px}
}

/* ===== 2층 헤더 100px (35 유틸 + 64 브랜드) ===== */
.khome .khead{background:var(--paper);border-bottom:1px solid var(--line)}
.khome .kutil{height:35px;display:flex;align-items:center;justify-content:flex-end;gap:14px;font-size:12px;color:var(--sub)}
.khome .kutil a:hover{color:var(--brand)}
.khome .kutil span{color:var(--line)}
.khome .kbrandrow{height:64px;display:flex;align-items:center;gap:18px}
.khome .kbi{font-family:var(--disp);font-size:30px;font-weight:700;letter-spacing:-.6px;color:var(--brand);line-height:1;white-space:nowrap}
.khome[data-kskin="sand"] .kbi,.khome[data-kskin="herb"] .kbi{font-weight:400;letter-spacing:.4px}
.khome .kstores{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--mute);flex:0 1 auto;min-width:0;max-width:44vw;overflow-x:auto;scrollbar-width:none}
.khome .kstores::-webkit-scrollbar{display:none}
.khome .kstores i{font-style:normal;color:var(--line)}
/* P6: 5탭 IA 링크 — 모바일 세그먼트 스타일이 같은 클래스에 걸린다. */
.khome .kstores .kseg{font:inherit;color:var(--mute);font-weight:400;white-space:nowrap;padding:0;line-height:1;text-decoration:none}
.khome .kstores .kseg.on{color:var(--brand);font-weight:800}
.khome .ksearch{flex:1;max-width:400px;height:40px;border:2px solid var(--brand);border-radius:4px;display:flex;align-items:center;padding:0 12px;gap:8px;background:var(--paper)}
.khome .ksearch input{flex:1;border:0;outline:0;font-size:14px;font-family:inherit;color:var(--ink);background:transparent}
.khome .ksearch input::placeholder{color:var(--mute)}
.khome .khicons{margin-left:auto;display:flex;align-items:center;gap:16px}
.khome .kic{position:relative;width:26px;height:26px;color:var(--ink);display:inline-flex}
.khome button.kic{border:0;background:transparent;padding:0;cursor:pointer}
/* 비로그인 진입 버튼 — 로그인하면 이 자리를 홈 아이콘(.kic)이 대신한다 */
.khome .klogin{display:inline-flex;align-items:center;height:30px;padding:0 13px;border:1px solid var(--brand);border-radius:15px;font-size:12.5px;font-weight:700;color:var(--brand);white-space:nowrap;background:var(--paper)}
.khome .klogin:hover{background:var(--brand);color:var(--on-brand,#fff)}
.khome .kcnt{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;background:var(--accent);color:#fff;border-radius:8px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;font-style:normal}

/* ===== 3층 GNB 56px (스크롤 시 fixed + 컨텍스트 스왑) ===== */
.khome .kgnb{height:56px;background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:300}
.khome .kgnb .kwrap{height:100%;display:flex;align-items:center;gap:30px}
.khome .kcat{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700}
.khome .kbars{display:flex;flex-direction:column;gap:3px}
.khome .kbars i{width:16px;height:2px;background:var(--ink);display:block}
.khome .kgnb nav{display:flex;gap:28px}
.khome .kgnb nav a{font-size:16px;color:var(--ink)}
.khome .kgnb nav a.on{color:var(--brand);font-weight:700}
.khome .kgnb nav a:hover{color:var(--brand)}
.khome .kpill{margin-left:auto;height:34px;border:1px solid var(--line);border-radius:17px;display:flex;align-items:center;gap:6px;padding:0 15px;font-size:13px}
.khome .kpill b{color:var(--brand);font-weight:700}
.khome .kswap{margin-left:auto;display:none;align-items:center;gap:14px}
.khome.kstuck .kgnb{position:fixed;top:0;left:0;right:0;z-index:301;border-bottom:1px solid var(--line)}
.khome.kstuck .kpill{display:none}
.khome.kstuck .kswap{display:flex}
.khome .kmini{height:34px;width:240px;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;padding:0 10px;gap:7px;font-size:13px;color:var(--mute)}
.khome .kspacer{display:none}
.khome.kstuck .kspacer{display:block;height:56px}

/* ===== 우측 고정 레일 80px ===== */
/* P1: 라인 배너 CTA 가림 수정 — 컨테이너 우변(50%+525px)에서 24px 이격 + z 하향(GNB 300 아래).
   이격 폭이 안 나오는 뷰포트(≤1330px)에서는 레일 자체를 숨긴다 */
.khome .kside{position:fixed;right:calc(50% - 629px);top:220px;width:80px;z-index:120}
.khome .kside .kkv{border:1px solid var(--line);background:var(--paper)}
.khome .kside .kkv img{width:100%;height:78px;object-fit:cover}
.khome .kside .kkv p{font-size:11px;font-weight:700;text-align:center;padding:7px 4px;line-height:1.4;margin:0}
.khome .kside a.klk{display:block;border:1px solid var(--line);border-top:0;background:var(--paper);font-size:11px;text-align:center;padding:8px 2px;color:var(--sub)}
.khome .kside a.klk:hover{color:var(--brand)}
.khome .kside .ktopbtn{margin-top:8px;width:80px;height:34px;border:1px solid var(--line);background:var(--paper);font-size:11px;color:var(--sub)}
/* 260902 접기·닫기 — 레일 위 얇은 컨트롤 2개(›접기 ✕닫기). 접힌 레일은 24px 탭 + ↑ 만 남긴다 */
.khome .kside .kside-ctl{display:flex;gap:2px;margin-bottom:2px}
.khome .kside .kside-ctl button{flex:1;height:20px;border:1px solid var(--line);background:var(--paper);font-size:11px;line-height:1;color:var(--mute);cursor:pointer;padding:0}
.khome .kside .kside-ctl button:hover{color:var(--brand);border-color:var(--brand)}
.khome .kside.kside-min{width:24px}
.khome .kside.kside-min .kside-expand{display:block;width:24px;height:60px;border:1px solid var(--line);background:var(--paper);font-size:14px;color:var(--sub);cursor:pointer;padding:0}
.khome .kside.kside-min .kside-expand:hover{color:var(--brand);border-color:var(--brand)}
.khome .kside.kside-min .ktopbtn{width:24px;height:28px;padding:0;font-size:12px}
/* 260902 드래그 이동 — ⠿ 그립·kkv(펼침)/레일 전체(접힘)를 끌어 옮긴다(위치 bps5_kside_pos, 임계 4px) */
.khome .kside .kside-ctl .kside-grip{cursor:grab;touch-action:none;user-select:none}
.khome .kside .kkv{cursor:grab;touch-action:none;user-select:none}
.khome .kside.kside-min{cursor:grab;touch-action:none;user-select:none}
@media (max-width:1330px){.khome .kside{display:none}}

/* ===== 컬리 푸터 ===== */
.khome .kfoot{background:var(--paper);border-top:1px solid var(--line);padding:40px 0 70px;margin-top:10px}
.khome .kfoot .kcols{display:flex;gap:60px}
.khome .kbi2{font-family:var(--disp);font-size:24px;color:var(--brand);font-weight:700}
.khome[data-kskin="sand"] .kbi2,.khome[data-kskin="herb"] .kbi2{font-weight:400}
.khome .kbi2 small{display:block;font-size:11px;letter-spacing:.24em;color:var(--mute);margin-top:6px;font-family:var(--kfont);font-weight:500}
.khome .kfoot h5{font-size:14px;font-weight:700;margin-bottom:10px;color:var(--ink)}
.khome .kfoot li{list-style:none;font-size:13px;color:var(--sub);line-height:2}
.khome .kfoot li a{color:var(--sub)}
.khome .kfoot li a:hover{color:var(--brand)}
.khome .klegal{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--mute);line-height:1.9}
.khome .klegal b{color:var(--sub)}

/* 모바일 하단 탭바 규칙(.kmtab)은 260825 크롬 통일로 걷어냈다 —
   전 스킨 공용 <BottomNav />(src/mall/layout/BottomNav.css)가 대신한다. */

/* ===== 모바일 (컬리 2-up 문법) ===== */
/* 260908 지시 1-4: 태블릿(761~1024) 단계 신설 — 5·6열 그리드를 접어 넘침·과밀 방지.
   하단 탭바(BottomNav 980)와 리듬을 맞춰 kfoot 하단 여백도 여기서 확보. */
@media (max-width:1024px){
  .khome .ktop5{grid-template-columns:repeat(3,1fr)}
  .khome .klines{grid-template-columns:repeat(4,1fr)}
  .khome .kranks{grid-template-columns:repeat(2,1fr);gap:0 20px}
  .khome .kbig{flex-wrap:wrap}
  .khome .kbig .kvis,.khome .kbig .kinfo{flex:1 1 100%}
}
@media (max-width:980px){
  .khome .kfoot{padding-bottom:76px}
}
@media (max-width:760px){
  .khome .kwrap{width:100%;padding:0 16px}
  .khome .kpromo{height:auto;padding:9px 0}
  .khome .kpromo p{font-size:12px;text-align:center;line-height:1.4}
  .khome .kpromo .kx{display:none}
  .khome .ksec{padding:28px 0 30px}
  .khome .kshead h2{font-size:19px}
  .khome .ktrack{display:grid;grid-template-columns:1fr 1fr;gap:22px 12px;overflow:visible}
  .khome .ktrack.kg5{grid-template-columns:1fr 1fr;gap:22px 12px}
  .khome .kpc,.khome .kg5 .kpc{width:100%;flex:none}
  /* .kph 비율(aspect-ratio .778)·블록화는 데스크톱 공통 규칙이 담당(P0-1) */
  .khome .kpc-layout .kadd{opacity:1}
  .khome .kpc h3{font-size:14px;min-height:40px}
  .khome .krail .knav{display:none}
  /* 모바일 그리드(overflow visible)에는 잘림이 없다 — 블러 띠 미표시 */
  .khome .krail .kcut{display:none !important}
  .khome .khalf2{padding:22px 16px 24px}
  .khome .khalf2 .ksec.khalf{padding:18px 16px 16px}
  .khome .kbig{flex-direction:column}
  .khome .kbig .kvis{flex:none;height:200px}
  .khome .kbig .kinfo{flex:none;padding:22px 18px}
  .khome .kbig .kinfo h3{font-size:20px}
  .khome .kbig .kinfo .kpr .kdc,.khome .kbig .kinfo .kpr .kfp{font-size:22px}
  .khome .kline{height:auto;padding:26px 0}
  .khome .kline .kwrap{flex-direction:column;align-items:flex-start;gap:14px}
  .khome .kline h3{font-size:20px}
  .khome .kline .klb{margin-left:0}
  .khome .kline .kart{display:none}
  .khome .kranks{grid-template-columns:1fr}
  .khome .ktop5{grid-template-columns:repeat(2,1fr);gap:12px}
  .khome .klines{grid-template-columns:repeat(3,1fr);gap:14px}
  /* 모바일 헤더 = 브랜드색 크롬 (컬리 모바일 문법) */
  .khome .khead{background:var(--brand);border-bottom:0}
  .khome .kutil{display:none}
  .khome .kbrandrow{height:auto;min-height:56px;flex-wrap:wrap;gap:8px 10px;padding:8px 0}
  .khome .kbi{font-size:19px;color:var(--on-brand)}
  /* 두 대탭은 로고 옆에 모두 보이게 하고, 좁은 화면의 유틸 아이콘은 다음 줄로 보낸다. */
  .khome .kstores{background:rgba(255,255,255,.16);border-radius:16px;padding:3px;gap:0;flex:0 0 auto;max-width:none}
  .khome .kstores i{display:none}
  .khome .kstores .kseg{font-size:12.5px;padding:5px 11px;border-radius:13px;color:rgba(255,255,255,.72);font-weight:600}
  .khome .kstores .kseg.on{background:var(--paper);color:var(--brand);font-weight:700}
  .khome .ksearch{display:none}
  .khome .khicons{gap:10px}
  .khome .kic{color:var(--on-brand);width:23px;height:23px}
  /* 모바일 헤더는 브랜드색 면 — 로그인 버튼도 그 위에서 읽히게 반전 */
  .khome .klogin{height:27px;padding:0 11px;font-size:12px;color:var(--on-brand);border-color:rgba(255,255,255,.72);background:transparent}
  .khome .klogin:hover{background:rgba(255,255,255,.18);color:var(--on-brand)}
  .khome .kgnb{height:46px;overflow:hidden}
  .khome .kgnb .kwrap{gap:18px;overflow-x:auto;scrollbar-width:none}
  .khome .kgnb .kwrap::-webkit-scrollbar{display:none}
  .khome .kcat span{display:none}
  .khome .kgnb nav{gap:18px}
  .khome .kgnb nav a{font-size:15px;white-space:nowrap}
  .khome .kpill,.khome .kswap{display:none}
  .khome.kstuck .kgnb{position:relative}
  .khome.kstuck .kspacer{display:none}
  /* 하단 탭바가 가리지 않도록 푸터 하단 여백 — 탭바 자체는 공용 BottomNav.css 소관 */
  .khome .kfoot{padding-bottom:76px}
  .khome .kfoot .kcols{flex-direction:column;gap:24px}
}

/* P1: 초소형 화면 — 로고·아이콘 축소 + 배송지 아이콘 숨김으로 .kstores 세그먼트 겹침 방지 */
@media (max-width:430px){
  .khome .kbi{font-size:16.5px}
  .khome .kstores .kseg{font-size:12px;padding:4px 10px}
  .khome .khicons{gap:8px}
  .khome .khicons .kic[aria-label="배송지"]{display:none}
}

/* ---------- 전 페이지 스킨 동일성 브리지 (260821 1-4 지시) ----------
   kurly 계열 스킨이 게시되면 홈 밖 전 페이지(듀오톤 크롬)도 같은 팔레트를 쓴다.
   MallLayout 이 래퍼에 data-kbridge + data-kskin + 토큰 오버라이드를 부여하고,
   여기서 듀오톤 토큰(--blue 등)을 스킨 브랜드 컬러로 재매핑한다. */
[data-kbridge]{
  --blue:var(--brand);
  --blue-deep:var(--brand-2);
  --blue-text:var(--brand-2);
  --wash:color-mix(in srgb, var(--brand) 8%, #ffffff);
  --soft:color-mix(in srgb, var(--brand) 22%, #ffffff);
  --tile:var(--canvas);
  background:var(--canvas);
  min-height:100vh;
}
/* 크롬 전용 브리지 (260825 통합) — 컬리 홈은 테이크오버라 공용 크롬(하단 탭바 .bpnav ·
   GNB 오버레이 .gnbov)이 `.khome` 밖 형제로 붙는다. 그러면 --brand/--accent/--mute 가
   그 자리에서 미정의라 듀오톤 폴백으로 떨어져, 같은 스킨인데도 홈과 서브페이지의 탭바 색이
   갈린다(홈=듀오톤 블루 / 서브=스킨 브랜드). 토큰만 물려주고 지면(배경·최소높이)은 갖지
   않는 브리지를 따로 둔다 — 자식이 전부 position:fixed 라 이 래퍼는 높이 0이다.
   `[data-kbridge]` 와 특이도가 같으므로 반드시 그 뒤에 온다. */
[data-kbridge="chrome"]{background:none;min-height:0}

/* ── 이달의 종합 1위 GOLD 스트립 (wf3 P-02 §3·§5 랜딩 반영, 260824) — 금색은 스킨 훅 --gold(W-J5), 폴백만 종전값 ── */
.khome .kgold{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold,#c9a227);padding:12px 16px;margin:14px 0 4px}
.khome .kgold:hover{border-color:var(--gold,#c9a227)}
.khome .kgold-m{font-style:normal;font-family:var(--disp);font-size:11px;letter-spacing:.22em;color:var(--gold,#c9a227);font-weight:700}
.khome .kgold>img{width:52px;height:52px;object-fit:contain;background:var(--canvas)}
.khome .kgold-t{flex:1;min-width:0}
.khome .kgold-t em{display:block;font-style:normal;font-size:11.5px;color:var(--mute)}
.khome .kgold-t b{display:block;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.khome .kgold-s{text-align:right;white-space:nowrap}
.khome .kgold-s b{font-family:var(--disp);font-size:22px;color:var(--brand);font-variant-numeric:tabular-nums}
.khome .kgold-s small{display:block;font-size:11px;color:var(--sub);font-weight:700}
@media (max-width:760px){
  .khome .kgold{gap:10px;padding:10px 12px}
  .khome .kgold>img{width:42px;height:42px}
  .khome .kgold-t b{font-size:13.5px}
  .khome .kgold-s b{font-size:18px}
}

/* ── 260829b 홈 저널 3열(P-01 §5) — 편집 카드: 표지 4:3 · 카테고리 눈썹 · 제목 2줄 · 리드 2줄. 전 색상 토큰 경유 ── */
.kjournal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kjournal-card{display:flex;flex-direction:column;gap:8px;color:var(--ink);min-width:0}
.kjournal-cover{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--wash,var(--surface-2,#f3f4f6));border:1px solid var(--line)}
.kjournal-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease,ease)}
.kjournal-card:hover .kjournal-cover img{transform:scale(1.03)}
.kjournal-cat{font-size:11px;letter-spacing:.08em;color:var(--m6,var(--ink-muted,#6b7280));text-transform:uppercase}
.kjournal-title{font-size:15.5px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kjournal-lead{font-size:12.5px;color:var(--m6,var(--ink-muted,#6b7280));line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:900px){.kjournal-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kjournal-grid{grid-template-columns:1fr;gap:14px}}

/* 260910 Goal F: 동일 우선순위의 모바일·반폭 패딩 선언 뒤에서 섹션 간격을 통일한다.
   .khero·.kline 풀블리드와 더 구체적인 .khalf 카드 내부 패딩은 그대로 둔다. */
.khome{--ksec-gap:56px}
.khome .ksec,.khome .khalf2,.khome .kfit,.khome .kaw,.khome .bh.bh-sec,.khome .bh.bh-panelbn{padding-top:var(--ksec-gap);padding-bottom:var(--ksec-gap)}
.khome .bh.bh-split .bh-split-txt{padding-top:var(--ksec-gap);padding-bottom:var(--ksec-gap)}
.khome .khalf2 .ksec{padding-top:0;padding-bottom:0}
@media (max-width:760px){.khome{--ksec-gap:36px}}

/* ═══════════════════════════════════════════════════════════════════════════
   260910 Goal G · W-G9 — 디자인 어휘 이식(E:/Claude-My-Designer/docs/plan/260909-cafe777-related-design)
   옮긴 것 = 컨테이너·타일·레일·플래그·배경 어휘만:
     base.css  .pc .ph .flag → .bp-flag · .bd/.bd-acc/.bd-cpn/.bd-mem/.bd-line → .bp-bd* · .rail.r5/.r4 → .ktrack.bp-rail.r5/.r4
               .card.tick::after → .bp-tick · .railwrap::before/after → .krail.bp-railwrap · .sect-h h2::before/.more → .kshead.bp-sect-h/.kmore.bp-more
               .ranklist/.rankrow(44·72·1fr·auto, .sig) → .ktop3.bp-ranklist/.ktop3-row.bp-rankrow(.bp-sig) · .bgfx/--bgfx → --k-bgfx(섹션 바탕 이미지층)
               --tick/--tick-bw/--rule-w/--rule-mr/--bracket/--bracket-bw 계측 토큰 · --bd-h 배지 높이 · --hover-lift 대신 그림자 층
     skins/kurly.css  틱 0·브래킷 0·룰 0 · 알약 배지(--r-pill) · 하드 보더 대신 그림자 층(--shadow/--shadow-2) · 순위 숫자 브랜드색 · 행마다 라운드 카드
   옮기지 않은 것 = 디자인의 헤더·유틸바·GNB·LNB·푸터·목업바·스킵링크 — 근본 구성은 원문 지시로 이식 금지.
   클래스 이름은 C-G5 계약(bp- 접두) — ProductCard(데코)·RankRow·ReorderWatchBlock 이 같은 이름을 쓴다. 이 블록은 파일 끝에 두어
   .khome *{margin:0;padding:0} 리셋(0,1,0)보다 뒤에 온다(같은 명시도면 나중 것이 이긴다).
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── 토큰 — 홈(.khome)과 서브페이지 브리지([data-kbridge]) 양쪽 같은 이름. 스킨별 확정값(hex)은 위 스킨 블록(더 구체적)이 이긴다.
      컬리 = 디자인 표대로 틱 0·브래킷 0·룰 0. 파생값은 color-mix — hex 를 새로 만들지 않는다. ── */
.khome,[data-kbridge]{
  --bd-h:26px; --bd-pad:10px; --bp-flag-gap:4px; --bp-rail-gap:16px;
  --bw:1px; --r:12px; --r-sm:8px; --r-pill:999px;
  --tick:0px; --tick-bw:0px; --bracket:0px; --bracket-bw:0px;
  --rule-w:0px; --rule-mr:0px; --rule-d:none;
  --hover-dur:.16s;
  --shadow:0 1px 3px color-mix(in srgb,var(--brand) 10%,transparent);
  --shadow-2:0 8px 24px color-mix(in srgb,var(--brand) 14%,transparent);
  --tint:color-mix(in srgb,var(--brand) 10%,var(--paper));
  --accent-ink:color-mix(in srgb,var(--accent) 78%,var(--ink));
  --on-accent:var(--ink); --on-coupon:var(--on-brand); --on-member:var(--ink);
  --k-bgfx:none; --k-bgfx-size:auto; --k-bgfx-op:0;
  /* 260911 C-H1 — BLUE 태그 글자색. 브리지 밖(듀오톤·클래식)은 --blue-text, 브리지 안은 --blue-text=--brand-2 */
  --bd-blue:var(--blue-text,var(--blue,var(--brand)));
}
/* 홈 테이크오버(.khome)는 [data-kbridge] 밖이라 :root 의 듀오톤 --blue-text 가 새어 든다 — 브리지와 같은 값(브랜드 2색)으로 고정 */
.khome{--bd-blue:var(--brand-2,var(--brand))}

/* ── 플래그·배지 (base.css .pc .ph .flag / .bd*) — 썸네일 좌상단 absolute, 줄바꿈 허용, 클릭은 뒤의 링크로 통과 ── */
.bp-flag{position:absolute;left:8px;top:8px;z-index:1;display:flex;flex-wrap:wrap;gap:var(--bp-flag-gap,4px);max-width:calc(100% - 16px);pointer-events:none}
/* ── 태그(배지) 6종 — 260911 Goal H · C-H1(W-H1). 스킨 토큰만: 잉크·종이·헤어라인·틴트·브랜드 + 글자색으로만 쓰는 금색(--member)·파랑(--bd-blue).
      실측 전(260910): 할인=주황 바탕·입고 예정=보라 바탕·GOLD/약사가 픽/재고 임박=금색 바탕·정보=회색 outline → hue 4계열이 한 카드에 겹쳤다.
      기본 .bp-bd = 정보성(종이 바탕 + 헤어라인 + 잉크 글자: '재발주 71%'·'잔여 소량'·'NEW'). 주황·보라·금색 **바탕** 금지(GOLD 는 잉크 바탕 + 금색 글자).
      카드 한 장에 최대 2개(HomeTags.cardTags 가 자른다). 구 별칭 .bp-bd-acc/-cpn/-mem/-line 은 legacy 훅으로만 남고(색은 새 규칙),
      같은 요소의 .is-* (0,2,0) 가 별칭(0,1,0) 을 항상 이긴다. 폴백 hex 는 컬리 스킨 확정값 그대로 — 새 hue 를 만들지 않는다. ── */
.bp-bd{display:inline-flex;align-items:center;height:var(--bd-h,26px);padding:0 var(--bd-pad,10px);border-radius:var(--r-pill,999px);
  font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1;white-space:nowrap;font-family:var(--kfont,inherit);box-sizing:border-box;
  border:1px solid var(--line,#e8e8e8);background:var(--paper,#fff);color:var(--ink,#333333)}
.bp-bd.is-critical{background:var(--ink,#333333);border-color:var(--ink,#333333);color:var(--paper,#fff)}
.bp-bd.is-attention{background:var(--tint,var(--wash,#f3e8f7));border-color:var(--tint,var(--wash,#f3e8f7));color:var(--brand,var(--blue-text,#5f0080))}
.bp-bd.is-award-gold{background:var(--ink,#333333);border-color:var(--ink,#333333);color:var(--gold-hi,var(--member,#c9a227))}
.bp-bd.is-award-blue{background:var(--paper,#fff);border-color:var(--line,#e8e8e8);color:var(--bd-blue,var(--blue-text,var(--brand,#5f0080)))}
.bp-bd.is-rank{background:var(--brand,var(--blue,#5f0080));border-color:var(--brand,var(--blue,#5f0080));color:var(--on-brand,var(--paper,#fff))}
/* 별칭(legacy 훅) — acc→critical · cpn→attention · mem→award-gold · line→기본. 새 코드는 .is-* 만 쓴다 */
.bp-bd-acc{background:var(--ink,#333333);border-color:var(--ink,#333333);color:var(--paper,#fff)}
.bp-bd-cpn{background:var(--tint,var(--wash,#f3e8f7));border-color:var(--tint,var(--wash,#f3e8f7));color:var(--brand,var(--blue-text,#5f0080))}
.bp-bd-mem{background:var(--ink,#333333);border-color:var(--ink,#333333);color:var(--gold-hi,var(--member,#c9a227))}
.bp-bd-line{background:var(--paper,#fff);border-color:var(--line,#e8e8e8);color:var(--ink,#333333)}

/* ── 코너 틱 (base.css .card.tick::after · Radian 계측) — 컬리는 --tick 0 이라 그리지 않는다. 토큰만 올리면 나타난다 ── */
.bp-tick{position:relative}
.bp-tick::after{content:"";position:absolute;right:0;bottom:0;width:var(--tick,0px);height:var(--tick,0px);
  border-right:var(--tick-bw,0px) solid var(--accent);border-bottom:var(--tick-bw,0px) solid var(--accent);pointer-events:none;z-index:1}
/* 뷰파인더 브래킷 (base.css .railwrap::before/::after) — 레일 양 끝 L자. 컬리 0 */
.khome .krail.bp-railwrap::before,.khome .krail.bp-railwrap::after{content:"";position:absolute;top:0;width:var(--bracket,0px);height:var(--bracket,0px);pointer-events:none;z-index:6}
.khome .krail.bp-railwrap::before{left:0;border-left:var(--bracket-bw,0px) solid var(--accent);border-top:var(--bracket-bw,0px) solid var(--accent)}
.khome .krail.bp-railwrap::after{right:0;border-right:var(--bracket-bw,0px) solid var(--accent);border-top:var(--bracket-bw,0px) solid var(--accent)}

/* ── 레일 열 폭 (base.css .rail.r5/.r4) — 5열 = (100% − gap×4)/5 · 4열 = (100% − gap×3)/4. 트랙은 grid 열 흐름 + 가로 스크롤(기존 .ktrack overflow) ── */
.khome .ktrack.bp-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:var(--bp-rail-gap,16px);align-items:start}
.khome .ktrack.bp-rail.r5{grid-auto-columns:minmax(180px,calc((100% - var(--bp-rail-gap,16px) * 4) / 5))}
.khome .ktrack.bp-rail.r4{grid-auto-columns:minmax(220px,calc((100% - var(--bp-rail-gap,16px) * 3) / 4))}
.khome .ktrack.bp-rail .kpc{width:auto;flex:none;min-width:0}
.khome .krail:has(.bp-rail.r5) .knav{top:97px}

/* ── 섹션 헤더 (base.css .sect-h · h2::before 계측 룰 · .more 액센트 링크) — 룰 폭 0 이면 ::before 는 display:none(플렉스 gap 도 생기지 않는다) ── */
.khome .kshead.bp-sect-h h2{letter-spacing:-.02em}
.khome .kshead.bp-sect-h h2::before{content:"";display:var(--rule-d,none);width:var(--rule-w,0px);height:2px;background:var(--accent);margin-right:var(--rule-mr,0px)}
.khome .kshead .kmore.bp-more{color:var(--accent-ink,var(--accent));font-weight:700}

/* ── 랭킹 행 (base.css .ranklist/.rankrow 44·72·1fr·auto + skins/kurly.css: 행마다 라운드 카드·헤어라인·그림자·순위 브랜드색) ── */
.khome .ktop3.bp-ranklist{gap:8px;border:0;background:transparent;overflow:visible}
.khome .ktop3.bp-ranklist li{border-top:0}
.khome .ktop3-row.bp-rankrow{display:grid;grid-template-columns:44px 72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;min-width:0;
  background:var(--paper);border:var(--bw,1px) solid var(--line);border-radius:var(--r,12px);box-shadow:var(--shadow,none);transition:box-shadow var(--hover-dur,.16s) ease}
.khome .ktop3-row.bp-rankrow:hover{box-shadow:var(--shadow-2,none)}
.khome .bp-rankrow .ktop3-n{width:auto;flex:none;text-align:center;font-size:20px;font-variant-numeric:tabular-nums}
.khome .bp-rankrow .ktop3-th{width:72px;height:72px;flex:0 0 72px;border-radius:var(--r-sm,0px);background:var(--canvas)}
.khome .bp-rankrow .bp-sig{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--sub);white-space:normal;line-height:1.4;overflow-wrap:anywhere}
.khome .bp-rankrow .ktop3-pr [data-price-locked]{white-space:normal!important}
.khome .ktrack:focus-visible,.khome .ktop3-row.bp-rankrow:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.khome .bp-rankrow .bp-sig strong{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ── 배경층 (base.css .bgfx · --bgfx/--bgfx-op) — 고정 의사요소(.khome::before) 대신 섹션 바탕의 이미지 층으로 옮겼다:
      z-index:-1 의사요소가 보이려면 .khome 이 스태킹 컨텍스트여야 하는데, 그러면 홈 팝업(.khome 안)이 바깥 하단 탭바 아래로 들어가 팝업 규칙이 깨진다.
      기본 none(컬리 = 디자인 표대로 배경 텍스처 없음). 열 안내선 프리셋 = .khome[data-kbgfx="cols"] — 잉크 5%(≤.06) 1px 선을 1050 컨테이너의 5열 경계에,
      ≤1049px(유동폭)에서는 끈다. 기본 none에서는 대비 영향이 없다. 옵션을 켜면 글자 뒤 배경색도 달라질 수 있어 별도 대비 검증이 필요하다. ── */
.khome .ksec,.khome .khalf2{background-image:var(--k-bgfx,none);background-size:var(--k-bgfx-size,auto);background-position:center top;background-repeat:no-repeat}
.khome[data-kbgfx="cols"]{--k-bgfx-op:.05;--k-guide:color-mix(in srgb,var(--ink) 5%,transparent);--k-bgfx-size:1002px 100%;
  --k-bgfx:linear-gradient(90deg,transparent calc(100% - 1px),var(--k-guide) calc(100% - 1px)),repeating-linear-gradient(90deg,var(--k-guide) 0 1px,transparent 1px calc(1002px / 5))}
@media (max-width:1049px){.khome[data-kbgfx="cols"]{--k-bgfx:none}}
@media (prefers-reduced-motion:reduce){
  .khome .kpc .kph,.khome .kpc .kph img,.khome .ktop3-row.bp-rankrow{transition:none}
  .khome .kpc:hover .kph img{transform:none}
  .khome .ktrack{scroll-behavior:auto}
}

/* ── 데코 스티커 오버레이 (C-G1 ProductDecoration 7종 — W-G5 가 ProductCard 에 그린다) — 좌표는 --dx/--dy(0..1) 또는 인라인 left/top, 크기 --ds ── */
.bp-deco{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.bp-deco-item{position:absolute;left:calc(var(--dx,0) * 100%);top:calc(var(--dy,0) * 100%);transform:translate(-50%,-50%) scale(var(--ds,1));
  display:inline-flex;align-items:center;justify-content:center;height:var(--bd-h,26px);padding:0 10px;border-radius:var(--r-pill,999px);
  font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1;white-space:nowrap;box-shadow:var(--shadow,none);font-family:var(--disp,var(--kfont,inherit))}
.bp-deco-item[data-kind="award-gold"]{background:var(--gold,var(--member,#c9a227));color:var(--on-gold,var(--on-member,#231b00))}
.bp-deco-item[data-kind="award-blue"]{background:var(--brand,#5f0080);color:var(--on-brand,#fff)}
.bp-deco-item[data-kind="rank"]{width:34px;height:34px;padding:0;border-radius:50%;background:var(--brand,#5f0080);color:var(--on-brand,#fff);font-size:14px}
.bp-deco-item[data-kind="crown"]{height:auto;padding:0;background:transparent;box-shadow:none;font-size:22px}
.bp-deco-item[data-kind="new"]{background:var(--accent,#fa622f);color:var(--on-accent,#0a0a0a)}
.bp-deco-item[data-kind="best"]{background:var(--ink,#333333);color:var(--paper,#fff)}
.bp-deco-item[data-kind="stamp"]{width:44px;height:44px;padding:0;border-radius:50%;background:transparent;box-shadow:none;border:2px solid var(--brand,#5f0080);color:var(--brand,#5f0080);font-size:10px;
  transform:translate(-50%,-50%) rotate(-12deg) scale(var(--ds,1))}

/* ── 모바일 — 디자인 r5/r4 레일은 2열 그리드(열 흐름 → 행 흐름), 랭킹 행은 32·56 열, 배지는 한 단계 작게. 기존 760 규칙 뒤에 와야 이긴다 ── */
@media (max-width:1023px){
  .khome{--bd-h:22px;--bd-pad:8px}
  .khome .ktrack.bp-rail{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;overflow:visible}
  .khome .krail.bp-railwrap .knav,.khome .krail.bp-railwrap .kcut{display:none}
  .khome .ktop3-row.bp-rankrow{grid-template-columns:32px 56px minmax(0,1fr);gap:10px;padding:10px 12px}
  .khome .bp-rankrow .ktop3-chip{grid-column:3;justify-self:start;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .khome .bp-rankrow .ktop3-th{width:56px;height:56px;flex:0 0 56px}
  .bp-flag{left:6px;top:6px}
  .bp-bd{font-size:10px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   260911 Goal H · W-H1 — 재발주 두 블록 재디자인(실측 shots/reorder-rail-*.png · reorder-watch-*.png 뒤)
   [data-rail="always"] : '재발주가 많은 큐레이션' 은 **모든 폭에서 가로 레일**. 종전엔 ≤1023 의 .ktrack.bp-rail 폴백(행 흐름 2열 그리드)과
     ≤760 의 .ktrack 그리드에 걸려 768px 에서 8장 세로 그리드 2,712px, 390px 1,817px 로 접혔다. 이 규칙은 특이도 (0,4,0) 으로 그 둘(0,3,0·0,2,0)을
     이기고 파일 끝에 있어 같은 특이도의 나중 규칙에도 밀리지 않는다. 스크롤 스냅 + 화살표 + 잘림 블러 유지.
     열 폭: ≥1024 = r5 그대로(5열) · 761~1023 = 4열 + ¼ 엿보기 · ≤760 = 2열 + ⅕ 엿보기(스크롤 가능함을 드러낸다).
   [data-thumb="square"] : 썸네일 4:5 → 1:1 — 바로 아래 '재발주 대기' 블록(1:1)과 같은 비율이라 재발주 두 블록이 한 가족으로 읽히고 카드 세로가 준다.
   열 폭은 **고정 트랙(단일 값)** 이어야 한다(실측 260911 00:5x): 가로 스크롤 그리드에서 minmax(0,calc(…)) 는 컨테이너 폭(720)에서 남는 공간을
   8개 트랙에 균등 배분해 76px 에서 멈춘다(성장 한도 154px 에 못 미친다) — 종전 r5 의 minmax(180px,calc) 도 실제로는 늘 최소 180px 였다.
   ═══════════════════════════════════════════════════════════════════════════ */
.khome .krail[data-rail="always"] .ktrack{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:max(180px,calc((100% - var(--bp-rail-gap,16px) * 4) / 5));
  gap:var(--bp-rail-gap,16px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
.khome .krail[data-rail="always"] .ktrack .kpc{width:auto;flex:none;min-width:0;scroll-snap-align:start}
.khome .krail[data-rail="always"] .knav{display:flex}
.khome .krail[data-rail="always"] .kcut{display:none}
.khome .krail[data-rail="always"][data-cut-l] .kcut-l,.khome .krail[data-rail="always"][data-cut-r] .kcut-r{display:block}
.khome .krail[data-thumb="square"] .kpc .kph{aspect-ratio:1/1}
.khome .krail[data-thumb="square"] .kpc-layout .kadd{height:32px;margin-top:6px;font-size:14px}
.khome .krail[data-thumb="square"] .kpc h3{font-size:14px;min-height:40px}
.khome .krail[data-thumb="square"] .kpc .krev{margin-top:6px;font-size:12px;line-height:1.4;align-items:flex-start}
.khome .krail[data-thumb="square"] .kpc .krev svg{flex:none;margin-top:1px}
.khome .krail[data-thumb="square"] .kpc .kbr,.khome .krail[data-thumb="square"] .kpc .krev{color:var(--sub)}
.khome .krail[data-rail="always"] .bp-flag .bp-bd{max-width:100%;white-space:normal;overflow-wrap:anywhere;height:auto;min-height:var(--bd-h,26px);padding-block:4px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.khome .kpc .kph-placeholder{display:flex;align-items:center;justify-content:center;height:100%;padding:12px;color:var(--sub);font-size:12px}
.khome .kpc-layout:focus-within .kadd{opacity:1}
.khome .kpc:focus-visible,.khome .kpc-layout .kadd:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
@media (hover:none){.khome .kpc-layout .kadd{opacity:1}}
/* 화살표는 1:1 썸네일 세로 중앙 — .krail:has(.bp-rail.r5) .knav (0,5,0) 보다 뒤에 오는 같은 특이도 */
.khome .krail[data-rail="always"][data-thumb="square"] .knav{top:72px}
@media (max-width:1023px){
  .khome .krail[data-rail="always"] .ktrack{grid-auto-columns:calc((100% - var(--bp-rail-gap,16px) * 4) / 4.25)}
  .khome .krail[data-rail="always"][data-thumb="square"] .knav{top:56px}
}
@media (max-width:760px){
  .khome .krail[data-rail="always"] .ktrack{grid-auto-columns:calc((100% - 12px) / 2.2);gap:12px}
  /* 44px 원형 화살표는 16px 거터 밖(−22px)으로 나가 가로 오버플로를 만든다 — 폰은 스와이프 + 스냅 */
  .khome .krail[data-rail="always"] .knav{display:none}
}

/* 상품 링크와 담기 버튼은 형제: 중첩 인터랙티브 요소 없이 기존 카드 층 순서를 유지한다. */
.khome .kpc-layout{display:grid;align-content:start;grid-template-columns:minmax(0,1fr);min-width:0;width:249px;flex:0 0 249px}
.khome .kg5 .kpc-layout{width:190px;flex-basis:190px}
.khome .ktop5 .kpc-layout,.khome .ktrack.bp-rail .kpc-layout{width:auto;flex:none}
.khome .kpc-layout>.kpc{display:contents}
.khome .kpc-layout .kph{grid-row:1}
.khome .kpc-layout .kadd{grid-row:2}
.khome .krail[data-rail="always"] .kpc-layout{scroll-snap-align:start}
.khome .kpc-layout:has(>.kpc:focus-visible){outline:2px solid var(--brand);outline-offset:-2px}
@media (max-width:760px){.khome .kpc-layout,.khome .kg5 .kpc-layout{width:100%;flex:none}}
@media (prefers-reduced-motion:reduce){
  .khome .kpc-layout .kadd{transition:none}
  .khome .krail[data-rail="always"] .ktrack{scroll-behavior:auto}
}

/* 260911 — 태블릿(761~1023) 헤더: 검색창을 숨기고 로고·아이콘을 줄여 브랜드 행이 뷰포트를 넘지 않게(768 문서 폭 769~777 결함). 검색은 GNB 의 "성분 · 증상 검색" 버튼이 맡는다. */
@media (max-width:1023px) and (min-width:761px){
  .khome .ksearch{display:none}
  .khome .kbi{font-size:24px}
  .khome .khicons{gap:10px}
  .khome .kstores{max-width:none;flex:1 1 auto}
}