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)}}