.khub-card-link{color:inherit;text-decoration:none}.khub-card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:22px}.khub-has-page{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.khub-has-page:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(6,26,58,.12)}.khub-card-link:focus-visible{outline:none}.khub-has-page:focus-within{box-shadow:0 0 0 3px #5CC8FF}@media (prefers-reduced-motion:reduce){.khub-has-page{transition:none}.khub-has-page:hover{transform:none}}

.kht-lift{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s}
/* 좁은 화면: 설명 줄은 두 줄 자리를 미리 — 실시간 순위(/api/trending)가 오면 글이 바뀌어 두 줄이 되며 순위 목록이 20px 밀렸다 (2026-10-28) */
@media (max-width:700px){.kht-note{min-height:2.9em}}
.kht-lift:hover{transform:translateY(-4px);box-shadow:0 18px 34px -20px rgba(6,26,58,.6)}
.kht-lift:active,.kht-press:active{transform:scale(.97)}
.kht-ytp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#1E5BFF;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .2s}
.kht-ytp i{display:block;width:0;height:0;border-left:13px solid #FFFFFF;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.kht-yt:hover .kht-ytp,.kht-yt:focus-visible .kht-ytp{transform:translate(-50%,-50%) scale(1.12)}
.kht-wrap [lang=ko],.kht-sheet [lang=ko]{word-break:keep-all;overflow-wrap:anywhere}
/* 설명 창 '관련 제품' (2026-10-18): 사진(있으면) · 이름 · 가게 · 구매 단추 한 줄씩. 사진 없는 새 상품도 같은 높이로 깔끔하게 */
.kht-rkbuy{display:inline-block;margin-inline-start:6px;padding:2px 8px;border-radius:999px;background:#EAF2FF;color:#1238B0;font-size:11.5px;font-weight:800;vertical-align:2px;white-space:nowrap}
.kht-buyl{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.kht-buyc{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 10px;border-radius:16px;border:1px solid #DCE6F2;background:#FFFFFF;color:#061A3A;text-decoration:none}
.kht-buyi{flex:0 0 60px;width:60px;height:60px;border-radius:12px;overflow:hidden;background:#EEF4FB}
.kht-buyi img{display:block;width:100%;height:100%;object-fit:cover}
.kht-buyt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kht-buyt b{font-size:14.5px;line-height:1.35;font-weight:800;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kht-buyt small{font-size:12px;font-weight:700;color:#5B6F8C}
.kht-buyb{flex:0 0 auto;display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:#1E5BFF;color:#FFFFFF;font-size:13px;font-weight:800;white-space:nowrap}
.kht-buyc:hover .kht-buyb,.kht-buyc:focus-visible .kht-buyb{background:#061A3A}
@media (max-width:400px){.kht-rk{flex-wrap:wrap}.kht-rksay{flex:1 0 100%!important;flex-direction:row!important;height:38px;border-left:0!important;border-top:1px solid #E3EAF5!important}}
.kht-eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.kht-eq i{display:block;width:3px;height:5px;border-radius:2px;background:currentColor}
.kht-eq i:nth-child(1){height:6px}.kht-eq i:nth-child(2){height:12px}.kht-eq i:nth-child(3){height:9px}
.kht-eq.on i{animation:khtEq .7s ease-in-out infinite}
.kht-eq.on i:nth-child(2){animation-delay:.15s}
.kht-eq.on i:nth-child(3){animation-delay:.3s}
.kht-modal{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end}
.kht-sheet{position:relative;width:min(460px,100%);height:100%;overflow:auto;background:#FFFFFF;box-shadow:-24px 0 48px -24px rgba(6,26,58,.5);animation:khtSlide .35s cubic-bezier(.2,.8,.2,1) both}
.kht-dim{animation:khtDim .3s ease both}
@keyframes khtEq{0%,100%{height:5px}50%{height:14px}}
@keyframes khtSlide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes khtUp{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes khtDim{from{opacity:0}to{opacity:1}}
@media (max-width:720px){
  .kht-modal{align-items:flex-end}
  .kht-sheet{width:100%;height:auto;max-height:86vh;border-radius:26px 26px 0 0;animation-name:khtUp}
}
@media (prefers-reduced-motion:reduce){
  .kht-sheet,.kht-dim,.kht-eq.on i{animation:none!important}
  .kht-lift{transition:none!important}
  .kht-lift:hover{transform:none!important}
}

body{margin:0;background:#FFFFFF} *{box-sizing:border-box} a{color:#1E5BFF} a:where(:hover){color:#061A3A}

/* 바닥글 (2026-10-14 사용자: "디자인 손봐줘") — 로고 칸을 넓게, 링크 세 칸은 오른쪽에 모아서. 제목은 고정폭 대문자 대신 하늘색 굵은 글씨 */
/* 링크 묶음은 가로 줄로 (같은 날 사용자: "세로로 되어 있어 별로") — 왼쪽에 묶음 이름, 오른쪽에 링크가 이어진다 */
.khf-grid{display:flex;flex-direction:column;gap:16px}
.khf-grid>nav{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 24px}
.khf-h{flex:0 0 72px;margin:0;font-size:13px;font-weight:800;color:#5CC8FF}
.khf-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;font-size:15px}
.khf-links a{color:#EAF2FB;text-decoration:none;transition:color .2s}
.khf-links a:hover,.khf-legal a:hover{color:#5CC8FF}
.khf-lang{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;border:1px solid #2A4A78;color:#C7D6E7;text-decoration:none;font-size:14px;transition:border-color .2s}
.khf-lang:hover{border-color:#5CC8FF}
.khf-legal{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;font-weight:700}
.khf-legal a{color:#EAF2FB;text-decoration:none;transition:color .2s}
@media (max-width:520px){.khf-grid{gap:20px}.khf-h{flex-basis:100%}.khf-links{gap:8px 20px}}
/* 구독 띠 (2026-10-19 사용자: "빈 여백이 너무 많고, '내 레터 만들기'가 아니라 구독 관련 내용으로, 샘플 호 미리 보기는 필요 없다") —
   맨 위는 위클리 구독 띠 한 줄(아이콘·제목·한 줄 안내·구독 단추), 그 아래 왼쪽 로고·사이트 한 줄, 오른쪽 링크 묶음 */
.khf-sub{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(18px,2.4vw,32px);padding:clamp(18px,2vw,24px) clamp(18px,2.4vw,32px);border-radius:24px;background:linear-gradient(135deg,#0F2B5E 0%,#0A2149 100%);border:1px solid #23467E;margin-bottom:clamp(36px,4vw,52px)}
.khf-news-ic{flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:rgba(92,200,255,0.16);color:#5CC8FF;display:flex;align-items:center;justify-content:center}
.khf-sub-in{flex:1 1 320px;min-width:0}
.khf-kick{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:#5CC8FF}
.khf-news-t{margin:0;font-size:clamp(20px,1.8vw,24px);font-weight:800;letter-spacing:-0.03em;line-height:1.2}
.khf-news-t a{color:#FFFFFF;text-decoration:none}
.khf-news-p{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:#C7D6E7;text-wrap:pretty}
.khf-sub-go{flex:0 0 auto}
.khf-main{display:flex;flex-wrap:wrap;gap:28px clamp(32px,5vw,96px);align-items:flex-start}
.khf-brand{flex:0 1 340px;min-width:0;display:flex;flex-direction:column;gap:14px}
.khf-tag{margin:0;font-size:14.5px;line-height:1.55;color:#C7D6E7;text-wrap:pretty}
.khf-main>.khf-grid{flex:1 1 480px;min-width:0}
@media (max-width:640px){.khf-sub-go{flex:1 1 100%}.khf-news-ic{display:none}}
/* 터치 화면에서 바닥글 링크가 23px 높이라 누르기 어려웠다(2026-10-27) — 손가락 기기에서만 44px 칸, 줄 간격은 그만큼 줄임 */
@media (pointer:coarse){.khf-links,.khf-legal{row-gap:0}.khf-links a,.khf-legal a{display:inline-flex;align-items:center;min-height:44px}}

html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}
@media (max-width:640px){.kh-chiprow{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}.kh-chiprow::-webkit-scrollbar{display:none}.kh-rcard{flex-direction:row!important;border-radius:18px!important}.kh-rcard-img{flex:0 0 104px;aspect-ratio:auto!important;min-height:104px}.kh-rcard-meta{inset-inline-start:6px!important;top:6px!important;max-width:calc(100% - 12px);padding:3px 7px!important;font-size:11px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kh-rcard-tx{flex:1;min-width:0;padding:12px 14px!important;gap:4px!important}.kh-rcard-tx>strong{font-size:17px!important}.kh-rcard-tx>span:first-of-type{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}.kh-ad{display:none}main section[id]{scroll-margin-top:84px}.kh-langs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:0;padding:10px 16px 24px;background:#061A3A;font-size:13px;font-weight:600;line-height:1.7}.kh-langs a{color:#A9C4E6;text-decoration:none}.kh-langs a:hover{color:#FFFFFF;text-decoration:underline}.kh-langs a[aria-current]{color:#FFFFFF}@media (max-width:760px){.kh-langs{padding-bottom:96px}}
@media (prefers-reduced-motion:no-preference){@supports ((animation-timeline:view()) and (animation-range:entry)){
  main h2:not(header h2):not(footer h2),[data-khc-rise]{animation:khcRise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
}}
@keyframes khcRise{from{opacity:0;transform:translateY(26px)}}
.khc-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.khc-hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(6,26,58,.94) 0%,rgba(6,26,58,.6) 48%,rgba(6,26,58,.12) 100%),linear-gradient(0deg,rgba(6,26,58,.92) 0%,rgba(6,26,58,0) 58%)}
.khc-hero-big{position:absolute;z-index:-1;right:-2vw;top:3%;font-size:clamp(150px,27vw,440px);font-weight:900;line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.13);white-space:nowrap;pointer-events:none;user-select:none}
.khc-hero-in{position:relative;max-width:1440px;margin:0 auto;min-height:min(80vh,760px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(110px,18vh,200px) clamp(16px,3vw,48px) clamp(36px,6vh,64px);box-sizing:border-box}
.khc-hero-txt{max-width:780px}
.khc-hero-txt h1{text-shadow:0 6px 40px rgba(0,0,0,.35)}
@media (max-width:640px){.khc-hero-in{min-height:56vh}.khc-hero-big{top:auto;bottom:38%}}
@media (prefers-reduced-motion:no-preference){
  .khc-hero-txt{animation:khcIn .9s cubic-bezier(.2,.8,.2,1) both}
  .khc-hero-big{animation:khcFloat 18s ease-in-out infinite alternate}
  @supports ((animation-timeline:view()) and (animation-range:exit)){
    .khc-hero-bg{animation:khcZoom linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
}
.khc-ph{min-height:min(66vh,620px);display:flex;align-items:flex-end}
.khc-ph-in{width:100%;box-sizing:border-box}
@media (max-width:640px){.khc-ph{min-height:56vh}}
.khc-ph-in>p:first-child>a{padding:12px 0;margin:-12px 0}
.khc-ph-big{position:absolute;z-index:0;right:-2vw;top:6%;font-size:clamp(120px,22vw,340px);font-weight:900;line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.12);white-space:nowrap;pointer-events:none;user-select:none}
@media (prefers-reduced-motion:no-preference){
  .khc-ph-big{animation:khcFloat 20s ease-in-out infinite alternate}
  .khc-ph-in{animation:khcIn .9s cubic-bezier(.2,.8,.2,1) both}
  @supports ((animation-timeline:view()) and (animation-range:exit)){.khc-ph-bg{animation:khcZoom linear both;animation-timeline:view();animation-range:exit 0% exit 100%}}
}
@keyframes khcIn{from{opacity:0;transform:translateY(34px)}}
@keyframes khcFloat{from{transform:translateX(0)}to{transform:translateX(-9vw)}}
@keyframes khcZoom{to{transform:scale(1.12)}}
.khc-still{position:fixed;z-index:70;left:clamp(12px,2vw,24px);bottom:calc(16px + var(--kh-dock-h,0px) + var(--kh-toast-h,0px));display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(6,26,58,.78);color:#FFFFFF;font:800 13px/1 "Pretendard Variable",system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(6,26,58,.25)}
.khc-still[hidden]{display:none}
.khc-still:focus-visible{outline:3px solid #5CC8FF;outline-offset:2px}
@media (max-width:640px){.khc-still{width:44px;height:44px;padding:0;justify-content:center;font-size:0;gap:0}.khc-still::before{content:attr(data-icon);font-size:14px;letter-spacing:-1px}}
@media (max-width:1024px){.khc-still{top:calc(80px + env(safe-area-inset-top,0px));bottom:auto;left:auto;right:clamp(12px,2vw,24px)}}