/* K-BEAUTY AI extras: 쿠팡 제품 찾기 + 카카오톡 채널. 모바일 우선, 고정(fixed/sticky)·팝업 없음. 접두사 kb- */
.kb-section{margin:18px 0;padding:18px 16px;border:1px solid #f0e3df;border-radius:20px;background:#fff;color:#2b2528}
.kb-section[hidden]{display:none}
.kb-section header p,.kb-eyebrow{margin:0 0 4px;font-size:11px;font-weight:800;letter-spacing:.1em;color:#c0626a}
.kb-section h2{margin:0 0 6px;font-size:20px;line-height:1.3}
.kb-section header span{display:block;margin-bottom:12px;font-size:12px;line-height:1.55;color:#7b6f73}
.kb-need{display:grid;gap:8px;margin-bottom:8px}
.kb-search{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:10px 14px;border:1px solid #f0e3df;border-radius:14px;background:#fffaf6;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.kb-search span{display:grid;gap:1px;min-width:0}
.kb-search small{font-size:11px;font-weight:800;color:#c0626a}
.kb-search b{font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.kb-search em{font-style:normal;font-size:11px;color:#7b6f73}
.kb-search i{flex:none;font-style:normal;font-size:12px;font-weight:800;color:#2b2528}
.kb-product{display:grid;grid-template-columns:72px 1fr;grid-template-areas:"img copy" "btn btn";gap:10px 12px;padding:12px;border:1px solid #f0e3df;border-radius:14px;background:#fff}
.kb-product img,.kb-noimg{grid-area:img;width:72px;height:72px;object-fit:cover;border-radius:10px;background:#fdeeea}
.kb-product-copy{grid-area:copy;display:grid;gap:3px;align-content:start;min-width:0}
.kb-product-copy b{font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.kb-price{font-size:13px;font-weight:800;color:#c0626a}
.kb-product-copy small{font-size:11px;color:#7b6f73}
.kb-btn{grid-area:btn;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;background:#c25b4c;color:#fff;font-size:14px;font-weight:800;text-decoration:none}
.kb-btn--off{background:#f0e3df;color:#7b6f73}
.kb-note{margin:10px 0 0;font-size:11px;line-height:1.55;color:#7b6f73}
/* 카카오톡 채널 */
#kb-kakao{text-align:center}
.kb-kakao-body{margin:0 0 14px;font-size:14px;line-height:1.6;color:#5e5357}
.kb-kakao-btn{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:52px;padding:0 16px;border-radius:12px;background:#fee500;color:#191919;font-size:16px;font-weight:700;text-decoration:none;-webkit-tap-highlight-color:transparent}
.kb-kakao-btn--off{background:#eee;color:#777;font-weight:500}
.kb-kakao-btn:focus-visible,.kb-search:focus-visible,.kb-btn:focus-visible{outline:3px solid #2b2528;outline-offset:2px}
#kb-kakao small{display:block;margin-top:12px;font-size:12px;line-height:1.5;color:#7b6f73}
.kb-footer{display:grid;gap:4px;padding:18px 16px calc(24px + env(safe-area-inset-bottom));text-align:center;color:#7b6f73;font-size:12px}
.kb-footer b{color:#2b2528;font-size:13px;letter-spacing:.06em}
/* 개발용 검증 패널은 ?qa 에서만 */
body:not([data-qa]) .qa-details,body:not([data-qa]) .json-panel{display:none}
@media (min-width:640px){.kb-section{max-width:520px;margin-left:auto;margin-right:auto}}

/* 단계별 사진 아래 "사용 제품" */
.stage-grid .kb-stage-products{margin:0;padding:8px 12px 12px;background:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.stage-grid .kb-stage-products small{flex:0 0 100%;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#c0626a}
.stage-grid .kb-stage-products span{padding:4px 9px;border:1px solid #f0e3df;border-radius:999px;background:#fffaf6;font-size:12px;line-height:1.35;color:#2b2528}

/* 참고 사진 샘플 줄(샘플로 체험 줄은 삭제됨): 한 줄 전체 폭 */
.sample-lab.sample-lab--reference{grid-template-columns:1fr}
.sample-lab.sample-lab--reference:not(:has(> div:not([hidden]))){display:none}

/* 단계 카드 높이가 달라도 아래에 배경색(회색) 빈 칸이 비치지 않게: 카드는 흰 바탕 + 제품 영역이 남는 높이를 채운다 */
.stage-grid figure{background:#fff;display:flex;flex-direction:column}
.stage-grid figure .kb-stage-products{flex:1 1 auto;align-content:flex-start}

/* 참고 사진 찾기(이름 검색) */
.kb-ref-search{flex:0 0 100%;display:block;margin:6px 0 0;padding-top:10px;border-top:1px dashed #f0e3df}
.kb-ref-search label{display:block;margin-bottom:6px;font-size:11px;font-weight:800;letter-spacing:.08em;color:#c0626a}
.kb-ref-search-row{display:flex;gap:6px}
.kb-ref-search-row input{flex:1 1 auto;min-width:0;min-height:44px;padding:8px 14px;border:1px solid #f0e3df;border-radius:999px;background:#fff;font-size:16px;color:#2b2528}
.kb-ref-search-row input:focus{outline:2px solid #c0626a;outline-offset:1px}
.kb-ref-search-row button{flex:0 0 auto;min-height:44px;padding:8px 16px;border:1px solid #c0626a;border-radius:999px;background:#c0626a;color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.kb-ref-search-row button.kb-ref-search-alt{background:#fff;color:#c0626a}
.kb-search-hint{margin:8px 2px 0;font-size:12px;line-height:1.55;color:#7b6f73}
.kb-search-hint[data-error="true"]{color:#b3363f;font-weight:700}

/* 참고 사진 찾기: 3단계 안내 + 돌아오기 버튼 */
.kb-search-steps{margin:10px 0 0;padding:10px 12px 10px 30px;border-radius:14px;background:#fffaf6;font-size:12.5px;line-height:1.7;color:#4a3f43}
.kb-search-steps b{color:#c0626a}
.kb-search-steps small{color:#7b6f73;font-size:11.5px}
.kb-return{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:12px 14px;border:1px solid #c0626a;border-radius:14px;background:#fff0ee;font-size:13px;font-weight:700;color:#2b2528}
.kb-return[hidden]{display:none}
.kb-return button{min-height:44px;padding:8px 16px;border:0;border-radius:999px;background:#c0626a;color:#fff;font-size:13px;font-weight:700;cursor:pointer}

/* 메이크업 강도 버튼 (25/50/75/100%) — 슬라이더가 아니라 버튼 */
.kb-intensity{margin:14px 0;padding:12px 14px;border:1px solid #f0e3df;border-radius:18px;background:#fff}
.kb-intensity-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;font-size:13px;color:#2b2528}
.kb-intensity-head strong{font-size:18px;color:#c0626a}
.kb-intensity-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.kb-intensity-buttons button{min-height:44px;padding:0;border:1px solid #f0e3df;border-radius:999px;background:#fffaf6;color:#7b6f73;font-size:13px;font-weight:700;cursor:pointer}
.kb-intensity-buttons button.active{border-color:#c0626a;background:#c0626a;color:#fff}
.kb-intensity[data-busy="true"]{opacity:.7;pointer-events:none}

/* 사용 편의 개선 (2026-10-03) */
body:not([data-sample="on"]) #sample-button{display:none}
.kb-tips{margin:0 0 14px;padding:10px 14px;border-radius:14px;background:#fffaf6;font-size:12.5px;line-height:1.6;color:#4a3f43}
.kb-tips b{margin-right:6px;color:#c0626a}
.kb-result-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.kb-result-actions button{flex:1 1 200px;min-height:48px;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer}
.kb-nudge{border:1px solid #c0626a;background:#fff;color:#c0626a}
.kb-nudge[hidden]{display:none}
.kb-save{border:0;background:#c0626a;color:#fff}
.kb-note-small{margin:8px 4px 0;font-size:12px;color:#7b6f73}
.kb-note-small[hidden]{display:none}
.kb-error{margin:14px 0;padding:14px 16px;border:1px solid #c0626a;border-radius:16px;background:#fff0ee;color:#2b2528}
.kb-error[hidden]{display:none}
.kb-error b{display:block;margin-bottom:4px;font-size:15px;color:#b3363f}
.kb-error p{margin:0 0 10px;font-size:13px;line-height:1.6}
.kb-error button{min-height:44px;padding:8px 18px;border:0;border-radius:999px;background:#c0626a;color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.kb-swipe-hint{display:none;margin:-2px 2px 10px;font-size:12px;color:#7b6f73}
@media(max-width:600px){
  .kb-swipe-hint{display:block}
  .stage-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:12px}
  .stage-grid figure{flex:0 0 80%;scroll-snap-align:center}
}

/* Phones/tablets: keep the Before/After caption below the photo so it never covers the face (2026-10-03) */
.stage-grid{position:relative;isolation:isolate}
@media(max-width:760px){
  .before-after-hero figure,.reference-pair figure{overflow:visible;background:transparent;display:flex;flex-direction:column;box-shadow:none}
  .before-after-hero canvas,.reference-pair canvas,.reference-pair img{border-radius:18px}
  .before-after-hero figure.after{box-shadow:none}
  .before-after-hero figure.after canvas{box-shadow:0 0 0 2px #e7a59b,0 10px 22px rgba(194,91,76,.14)}
  .before-after-hero figcaption,.reference-pair figcaption{position:static!important;margin:8px 0 0!important;padding:0 2px!important;background:transparent!important;backdrop-filter:none!important;display:block!important;border-radius:0;text-align:center}
  .before-after-hero figcaption b,.reference-pair figcaption b{display:block;font-size:13px}
  .before-after-hero figcaption span,.reference-pair figcaption span{display:block;margin-top:1px;font-size:11.5px;text-align:center!important}
}

/* Before/After 캡션: 작은 한글 "메이크업 전/후" 를 사진 아래에(모든 화면 폭). 얼굴을 가리지 않는다. */
.before-after-hero figure{overflow:visible;background:transparent;display:flex;flex-direction:column}
.before-after-hero figure.after{box-shadow:none}
.before-after-hero canvas{border-radius:18px}
.before-after-hero figure.after canvas{box-shadow:0 0 0 2px #e7a59b,0 10px 22px rgba(194,91,76,.14)}
.before-after-hero figcaption{position:static!important;margin:8px 0 0!important;padding:0 2px!important;background:transparent!important;backdrop-filter:none!important;display:block!important;border-radius:0;text-align:center}
.before-after-hero figcaption b{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;color:#7b6f73}
.before-after-hero figure.after figcaption b{color:#c0626a}
.before-after-hero figcaption span{display:none}

/* 푸터: 안내 링크 + 제휴 고지 */
.kb-footer-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.kb-footer-links a{color:#7b6f73;font-size:13px;text-decoration:underline}
.kb-footer-note{display:block;max-width:520px;margin:8px auto 0;font-size:11.5px;line-height:1.6;color:#7b6f73}

/* 제품 카드: 이미지가 없으면 빈 네모 없이 글자만, 대표 제품 표시 */
.kb-product--noimg{grid-template-columns:1fr;grid-template-areas:"copy" "btn"}
.kb-product-cat{font-size:11px;font-weight:800;letter-spacing:.04em;color:#c0626a}

/* Small phones: 6 intensity buttons in 2 rows of 3 so every button is at least 44px wide (easy to tap) */
@media(max-width:400px){.kb-intensity-buttons{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}.kb-intensity-buttons button{min-height:46px!important}}

/* ───── 12-card results (2026-10-05): top row = full face x6, bottom row = per-step close-ups x6. One column (.kb-stage-col) = one step [full face + close-up] ───── */
.kb-zoom-note{margin:-2px 2px 12px;font-size:12.5px;line-height:1.5;color:#7b6f73}
.stage-grid{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px;row-gap:0}
.stage-grid .kb-stage-col{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:14px;min-width:0}
.stage-grid .kb-stage-col figure{min-width:0}
.stage-grid .kb-stage-col figcaption{min-height:58px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:9px 11px}
.stage-grid .kb-stage-col figcaption b{font-size:12px;white-space:nowrap}
.stage-grid .kb-stage-col figcaption span{max-width:none;text-align:left;font-size:11px;white-space:nowrap}
@media(max-width:900px){
  .kb-swipe-hint{display:block}
  .stage-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78%,300px);grid-template-rows:auto auto;column-gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:12px}
  .stage-grid .kb-stage-col{scroll-snap-align:center}
}
/* Key features: small and simple, below the products */
.kb-insights{padding:12px 16px}
.kb-insights .kb-eyebrow{margin:0 0 4px}
.kb-insight-list{display:grid;gap:0}
.kb-insight-list article{display:grid;grid-template-columns:96px 1fr;gap:1px 10px;align-items:baseline;padding:8px 0;border:0;border-top:1px solid #f4eae7;border-radius:0;background:none;box-shadow:none}
.kb-insight-list article:first-child{border-top:0}
.kb-insight-list span{grid-row:span 2;font-size:10px;font-weight:800;letter-spacing:.06em;color:#c0626a}
.kb-insight-list h3{margin:0;font-size:14px;line-height:1.4}
.kb-insight-list p{margin:0;font-size:12px;line-height:1.5;color:#7b6f73}
.audit-strip[hidden]{display:none}

/* OLIVE YOUNG Global product zone */
.kb-need-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:6px 2px 0}
.kb-need-head b{font-size:13px;font-weight:800;color:#2b2528}
.kb-need-head span{font-size:11.5px;color:#7b6f73}
.kb-product img{object-fit:contain;background:#fff;border:1px solid #f0e3df}
.kb-product-reason{font-style:normal;font-size:12.5px;line-height:1.45;color:#4a3f43}
.kb-product .kb-btn{min-height:44px}

/* OLIVE YOUNG 5% OFF badge (Korean flag + green text) */
.kb-oy-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;background:#fff;border:1px solid #d6ecdc;box-shadow:0 4px 14px rgba(0,0,0,.14);color:#1a8f45;font-size:13px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.kb-oy-badge b{font-weight:900}
.kb-oy-badge .kb-flag{flex:none;display:block}
.kb-oy-badge--hero{position:absolute;top:14px;right:14px;z-index:3}
.kb-oy-badge--deal{display:flex;width:max-content;max-width:100%;margin:14px auto}
.kb-oy-badge--deal[hidden]{display:none}
.kb-photo-hero{position:relative}
.kb-photo-hero > .kb-oy-badge.kb-oy-badge--hero{position:absolute;top:14px;right:14px;left:auto;bottom:auto;z-index:3}
.kb-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.kb-price .kb-price-from{font-size:12px;font-weight:700;color:#7b6f73}
.kb-price .kb-price-list{font-size:12.5px;font-weight:500;color:#9a8f93;text-decoration:line-through}
.kb-price .kb-price-now{font-size:16px;font-weight:900;color:#c0626a}
.kb-product-copy .kb-price-note{font-size:10.5px;color:#9a8f93}

/* Language switcher KO / EN / FR */
.kb-lang { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line, #f0e3df); border-radius: 999px; background: #fff; }
.kb-lang a { display: inline-block; min-width: 34px; padding: 5px 9px; border-radius: 999px; color: var(--muted, #7b6f73); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-align: center; text-decoration: none; }
.kb-lang a:hover { color: var(--ink, #2b2528); }
.kb-lang a[aria-current="true"] { background: var(--coral, #c25b4c); color: #fff; pointer-events: none; }
.kb-lang a:focus-visible { outline: 2px solid var(--coral, #c25b4c); outline-offset: 2px; }
/* Product photos: enlarged to fill the full card height */
.kb-product{grid-template-columns:112px 1fr}
.kb-product > img{grid-area:img;align-self:stretch;width:112px;height:auto;min-height:112px;object-fit:contain;border-radius:12px;background:#fff}

/* Multi-store buy buttons (OLIVE YOUNG Global + Amazon), small badges, and the larger product pool */
.kb-btns{grid-area:btn;display:grid;grid-template-columns:1fr;gap:8px}
.kb-btns--two{grid-template-columns:1fr 1fr}
.kb-btns .kb-btn{grid-area:auto;min-height:44px;padding:0 10px;text-align:center;line-height:1.2;font-size:13.5px}
.kb-btn--amazon-us{background:#2b2528}
.kb-btn--amazon-us:hover{background:#443b3f}
.kb-badge{justify-self:start;display:inline-block;padding:2px 8px;border-radius:999px;background:#fdeeea;color:#a24a3f;font-size:10.5px;font-weight:800;letter-spacing:.02em}
@media (max-width:380px){.kb-btns--two{grid-template-columns:1fr}}
.kb-more>summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid #f0e3df;border-radius:12px;background:#fff;color:#2b2528;font-size:13.5px;font-weight:800}
.kb-more>summary::-webkit-details-marker{display:none}
.kb-more[open]>summary{margin-bottom:8px}
.kb-more>summary:focus-visible{outline:3px solid #2b2528;outline-offset:2px}.kb-need--section{gap:10px;margin-top:6px}
.kb-need-head--section b{font-size:16px}
/* Product grid: image-first cards, 2 columns on phones, 3 on tablets, 4 on desktop */
@media (min-width:640px){#kb-products.kb-section{max-width:1100px}}
#kb-products .kb-need--section{--kb-cols:2;display:grid;grid-template-columns:repeat(var(--kb-cols),minmax(0,1fr));gap:12px;align-items:stretch}
@media (min-width:700px){#kb-products .kb-need--section{--kb-cols:3;gap:16px}}
@media (min-width:1000px){#kb-products .kb-need--section{--kb-cols:4}}
#kb-products .kb-need--section>.kb-need-head,#kb-products .kb-need--section>.kb-more{grid-column:1/-1}
/* .kb-more is a <details> element: Chrome lays its content out inside an internal ::details-content box,
   so putting display:grid directly on <details> silently fails (children stack in one column). The grid
   goes on a real <div class="kb-more-grid"> wrapper inside it instead. */
#kb-products .kb-more-grid{display:grid;grid-template-columns:repeat(var(--kb-cols),minmax(0,1fr));gap:inherit}
#kb-products .kb-need--section .kb-product{display:flex;flex-direction:column;gap:8px;padding:8px 8px 10px;grid-template-columns:none;height:100%}
#kb-products .kb-need--section .kb-product>img{width:100%;height:auto;min-height:0;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:10px}
#kb-products .kb-need--section .kb-product-copy{flex:1;gap:3px;padding:0 2px}
#kb-products .kb-need--section .kb-product-copy b{font-size:13.5px;line-height:1.35}
#kb-products .kb-need--section .kb-product-reason{font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#kb-products .kb-need--section .kb-btns,#kb-products .kb-need--section .kb-btns--two{grid-template-columns:1fr;gap:6px;margin-top:auto}
#kb-products .kb-need--section .kb-btns .kb-btn{min-height:40px;font-size:12.5px;border-radius:10px}.kb-note--tip{margin:12px 0 0;padding:10px 12px;font-size:13px;line-height:1.6;color:#4a3a40;background:#fff6f2;border:1px solid #f0cfc4;border-radius:10px}
.kb-guide{margin:14px 0 0;padding:16px 18px;background:#fff6f2;border:2px solid #c25b4e;border-radius:12px;color:#3d2c31}
.kb-guide-title{display:block;font-size:18px;margin:0 0 8px;color:#a8453a}
.kb-guide ol{margin:0 0 8px;padding-left:22px;font-size:14px;line-height:1.65}
.kb-guide-note{margin:6px 0 0;font-size:13px;line-height:1.6;font-weight:600}
.kb-guide-link{display:inline-block;margin-left:4px;padding:2px 10px;border-radius:999px;background:#c25b4e;color:#fff;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
.kb-guide-link:hover{background:#a8453a}