/* K-Ranking home (Figma 124:2) and category nav detail (Figma 124:326) */
/* Page text is pure black across the whole channel, as in Figma. See the matching note in
   kinsight.css: home.css sets body.kw26-page{color:var(--kw-ink)} and only K-Flow had overridden
   it, so headings without their own colour inherited purple. Same specificity as the home.css
   rule, so source order settles it and no !important is needed. */
body.kr26-page{color:#000}
.kr26-masthead{position:relative;height:107px;background:#f6f6ff}
.kr26-brand{position:absolute;left:max(calc((100% - 1222px)/2),28px);top:26px;width:226px;height:56px;display:flex;align-items:center}
.kr26-brand img{display:block;width:226px;height:56px;object-fit:contain}
/* Colour restated so the channel name stays black even if the page rule above ever changes. */
.kr26-masthead>strong{position:absolute;left:50%;top:33px;transform:translateX(-50%);color:#000;font-size:32px;line-height:39px;font-weight:600}

.kr26-channel-nav{height:60px;background:#4f4878;color:#fff;display:flex;align-items:center}
.kr26-channel-nav>div{width:996px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:22px}
.kr26-channel-nav a{display:grid;grid-template-areas:"label";place-items:center;flex:0 0 auto;color:#fff;font-size:16px;line-height:19px;text-decoration:none;white-space:nowrap;font-weight:400}
.kr26-channel-nav a::before,.kr26-channel-nav a>span{grid-area:label}
.kr26-channel-nav a::before{content:attr(data-label);visibility:hidden;font-weight:700}
.kr26-channel-nav a:hover>span,.kr26-channel-nav a:focus-visible>span,.kr26-channel-nav a.active>span{font-weight:700}
.kr26-nav-search{width:157px;height:38px;flex:0 0 157px;border:1px solid #fff;border-radius:32px;display:flex;align-items:center;padding:0 17px}
.kr26-nav-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:400 16px/19px Inter}
/* Same as K-Insight: slightly transparent white hint, alpha in the colour, opacity kept at 1 so
   Firefox's 0.54 default does not compound. */
.kr26-nav-search input::placeholder{color:rgba(255,255,255,.7);opacity:1}
.kr26-nav-search button{width:15px;height:15px;flex:0 0 15px;padding:0;border:1px solid #fff;border-radius:50%;background:transparent;cursor:pointer}

/* Browse By Category */
.kr26-browse{position:relative;width:996px;margin:46px auto 0;z-index:40}
.kr26-browse-trigger{display:flex;width:217px;height:38px;padding:0 21px;align-items:center;border:1px solid #000;border-radius:32px;background:#dfd6f1;color:#000;font:400 16px/19px Inter;cursor:pointer}
.kr26-browse-menu{position:absolute;left:21px;top:38px;width:177px;background:#c9c0da;padding:22px 0;display:none}
.kr26-browse.is-open .kr26-browse-menu{display:block}
.kr26-browse-menu>div{position:relative}
.kr26-browse-menu>div>a{display:flex;height:48px;padding:0 10px;align-items:center;justify-content:center;color:#000;text-decoration:none;text-align:center;font-size:12px;line-height:16px}
.kr26-browse-menu>div>a:hover,.kr26-browse-menu>div:focus-within>a{font-weight:700}
.kr26-browse-sub{position:absolute;left:177px;top:0;width:154px;background:#ebe6f5;padding:0;display:none}
.kr26-browse-menu>div:hover .kr26-browse-sub,.kr26-browse-menu>div:focus-within .kr26-browse-sub{display:block}
.kr26-browse-sub a{display:flex;height:48px;padding:0 10px;align-items:center;justify-content:center;color:#000;text-decoration:none;text-align:center;font-size:12px;line-height:16px}
.kr26-browse-sub a:hover{font-weight:700}

/* Hero */
.kr26-hero{position:relative;height:688px;margin-top:24px;overflow:hidden}
.kr26-hero-media{position:absolute;inset:0}
.kr26-hero-media img,.kr26-hero-media .kw26-admin-image{display:block;width:100%;height:100%;object-fit:cover}
.kr26-hero-inner{position:relative;width:996px;height:100%;margin:auto}
.kr26-hero h1{position:absolute;left:0;top:149px;width:609px;margin:0;font-size:56px;line-height:68px;font-weight:700}
.kr26-hero-copy{position:absolute;left:0;top:324px;width:548px;margin:0;font-size:24px;line-height:36px}
.kr26-hero-points{position:absolute;left:0;top:448px;width:548px;margin:0;font-size:24px;line-height:36px}
.kr26-hero-points p{margin:0}

/* Interactive ranking bubble cloud */
/* Bubble backdrop is a frontend-fixed gradient: the category model has a single banner image field. */
.kr26-bubbles{position:relative;height:809px;overflow:hidden;background:radial-gradient(ellipse at 22% 24%,#fff 0 26%,transparent 52%),radial-gradient(ellipse at 76% 74%,rgba(79,72,120,.42),transparent 46%),radial-gradient(ellipse at 54% 40%,rgba(220,211,232,.85),transparent 40%),linear-gradient(122deg,#f6f6ff 12%,#efe9fa 50%,#dcd3e8 100%)}
.kr26-bubbles-inner{position:relative;width:1440px;height:809px;margin:auto}
.kr26-bubble{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#19007c;text-align:center;text-decoration:none;font-weight:700;transition:transform .3s ease,opacity .3s ease}
.kr26-bubble img,.kr26-bubble .kw26-admin-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.kr26-bubble span{position:relative;z-index:2;max-width:88%;line-height:1.25}
.kr26-bubble:hover,.kr26-bubble:focus-visible{opacity:1!important;transform:scale(1.12);z-index:30!important;outline:none}
.kr26-bubble:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #19007c;opacity:0;pointer-events:none}
.kr26-bubble:hover:after,.kr26-bubble:focus-visible:after{animation:kr26-ripple 1.1s ease-out infinite}
@keyframes kr26-ripple{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.28)}}
@media(prefers-reduced-motion:reduce){.kr26-bubble{transition:none}.kr26-bubble:hover:after,.kr26-bubble:focus-visible:after{animation:none}}
.kr26-explore{position:absolute;left:1082px;top:694px;display:flex;width:238px;height:62px;align-items:center;justify-content:center;border:1px solid #000;border-radius:32px;background:#dcd3e8;color:#000;text-decoration:none;font-size:24px;line-height:29px}

/* Content sections: Latest, Tops, Popular, Awards */
.kr26-sections{width:996px;margin:44px auto 0}
.kr26-section{margin-bottom:108px}
.kr26-section:last-child{margin-bottom:144px}
.kr26-section>header{display:flex;height:39px;align-items:center;gap:32px}
.kr26-section h2{margin:0;font-size:32px;line-height:39px;font-weight:600}
.kr26-section>header>a{display:flex;width:146px;height:38px;flex:0 0 146px;align-items:center;justify-content:center;border:1px solid #000;border-radius:32px;background:#dcd3e8;color:#000;text-decoration:none;font-size:16px;line-height:19px}
.kr26-feature{display:grid;grid-template-columns:383px 612px;margin-top:42px}
.kr26-feature-media{width:383px;height:492px;overflow:hidden}
.kr26-feature-media img,.kr26-feature-media .kw26-admin-image{display:block;width:100%;height:100%;object-fit:cover}
.kr26-feature-copy{display:flex;height:492px;padding:48px 47px;flex-direction:column;background:#e2dbeb;color:#000;text-decoration:none}
.kr26-feature-copy strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:4;font-size:16px;line-height:48px;font-weight:400}
.kr26-feature-copy p{display:-webkit-box;overflow:hidden;margin:20px 0 0;-webkit-box-orient:vertical;-webkit-line-clamp:4;font-size:16px;line-height:24px;font-weight:500}
.kr26-meta{display:flex;gap:16px;justify-content:space-between;margin-top:auto;font-size:12px;line-height:15px}
.kr26-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kr26-meta time{flex:0 0 auto}
.kr26-row{display:grid;margin-top:37px}
.kr26-row-2{grid-template-columns:repeat(2,486px);gap:24px}
.kr26-row-3{grid-template-columns:repeat(3,306px);gap:39px}
.kr26-row-note{grid-template-columns:repeat(3,306px);gap:38px;margin-top:31px}
.kr26-card{overflow:hidden}
.kr26-card>a,.kr26-card>div{display:block;height:100%;color:#000;text-decoration:none}
.kr26-card img,.kr26-card .kw26-admin-image{display:block;width:100%;object-fit:cover}
.kr26-card-copy{display:flex;flex-direction:column;background:#e2dbeb}
.kr26-card-copy strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-weight:400}
.kr26-card-copy p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.kr26-row-2 .kr26-card img,.kr26-row-2 .kr26-card .kw26-admin-image{height:282px}
.kr26-row-2 .kr26-card-copy{height:244px;padding:16px 19px 19px}
.kr26-row-2 .kr26-card-copy strong{font-size:16px;line-height:36px}
.kr26-row-2 .kr26-card-copy p{margin:8px 0 0;font-size:15px;line-height:24px}
.kr26-row-3 .kr26-card img,.kr26-row-3 .kr26-card .kw26-admin-image{height:303px}
.kr26-row-3 .kr26-card-copy{height:210px;padding:16px 17px 19px}
.kr26-row-3 .kr26-card-copy strong{font-size:16px;line-height:36px}
.kr26-row-3 .kr26-card-copy p{margin:4px 0 0;font-size:12px;line-height:24px}
.kr26-row-note .kr26-card{height:128px;border:1px solid #000}
.kr26-row-note .kr26-card-copy{height:100%;padding:14px 18px;background:transparent}
.kr26-row-note .kr26-card-copy strong{font-size:16px;line-height:36px}
.kr26-placeholder{pointer-events:none}
.kr26-card a:focus-visible,.kr26-feature a:focus-visible,.kr26-section>header>a:focus-visible,.kr26-explore:focus-visible,.kr26-browse-trigger:focus-visible{outline:2px solid #19007c;outline-offset:-2px}

/* Bubble slots keep the Figma cloud composition; opacity doubles as depth order */
.kr26-bubble-0{left:250px;top:127px;width:143px;height:143px;font-size:14px;opacity:.2;z-index:2}
.kr26-bubble-1{left:917px;top:126px;width:145px;height:145px;font-size:15px;opacity:.2;z-index:2}
.kr26-bubble-2{left:446px;top:147px;width:205px;height:205px;font-size:20px;opacity:.2;z-index:2}
.kr26-bubble-3{left:723px;top:100px;width:260px;height:260px;font-size:20px;opacity:.4;z-index:4}
.kr26-bubble-4{left:1142px;top:204px;width:173px;height:173px;font-size:20px;opacity:.4;z-index:4}
.kr26-bubble-5{left:530px;top:204px;width:337px;height:337px;font-size:28px;opacity:.6;z-index:6}
.kr26-bubble-6{left:926px;top:240px;width:269px;height:269px;font-size:32px;opacity:.8;z-index:8}
.kr26-bubble-7{left:225px;top:245px;width:284px;height:284px;font-size:24px;opacity:.2;z-index:2}
.kr26-bubble-8{left:425px;top:283px;width:162px;height:162px;font-size:20px;opacity:.5;z-index:5}
.kr26-bubble-9{left:785px;top:363px;width:205px;height:205px;font-size:20px;opacity:.3;z-index:3}
.kr26-bubble-10{left:410px;top:379px;width:275px;height:275px;font-size:20px;opacity:.2;z-index:2}
.kr26-bubble-11{left:138px;top:423px;width:266px;height:266px;font-size:24px;opacity:.4;z-index:4}
.kr26-bubble-12{left:920px;top:460px;width:194px;height:194px;font-size:15px;opacity:.5;z-index:5}
.kr26-bubble-13{left:583px;top:505px;width:218px;height:218px;font-size:15px;opacity:.4;z-index:4}

/* 1100px and below: the 996px/1440px fixed canvases become fluid instead of scaled,
   because a unitless scale factor cannot be derived from vw in CSS. */
@media(max-width:1100px){
 .kr26-channel-nav>div{width:calc(100% - 56px);overflow-x:auto;justify-content:flex-start}
 .kr26-browse{width:calc(100% - 56px);margin:32px 28px 0}
 .kr26-hero{height:auto;padding:56px 0 64px}
 .kr26-hero-inner{width:calc(100% - 56px);height:auto;margin:0 28px}
 .kr26-hero h1,.kr26-hero-copy,.kr26-hero-points{position:relative;left:auto;top:auto;width:auto;max-width:640px}
 .kr26-hero h1{font-size:44px;line-height:56px}
 .kr26-hero-copy{margin-top:28px}
 .kr26-hero-points{margin-top:24px}
 .kr26-bubbles{height:auto;padding:40px 0}
 .kr26-bubbles-inner{width:calc(100% - 56px);height:auto;margin:0 28px;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
 .kr26-bubble,.kr26-bubble[class*="kr26-bubble-"]{position:relative;left:auto!important;top:auto!important;width:150px!important;height:150px!important;font-size:15px!important;opacity:1!important;z-index:auto!important}
 .kr26-explore{position:relative;left:auto;top:auto;margin:32px auto 0}
 .kr26-sections{width:calc(100% - 56px);margin:56px 28px 0}
 .kr26-feature{grid-template-columns:minmax(0,383px) minmax(0,1fr)}
 .kr26-feature-media{width:100%}
 .kr26-row-2,.kr26-row-3,.kr26-row-note{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
 .kr26-row .kr26-card img,.kr26-row .kr26-card .kw26-admin-image{height:auto;aspect-ratio:1.55}
 .kr26-row-2 .kr26-card-copy,.kr26-row-3 .kr26-card-copy{height:auto;min-height:200px}
}
@media(max-width:760px){
 .kr26-masthead{height:90px}
 .kr26-brand{left:20px;top:12px;width:150px;height:66px}
 .kr26-brand img{width:150px;height:auto}
 .kr26-masthead>strong{top:28px;left:auto;right:20px;transform:none;font-size:24px;line-height:30px}
 .kr26-channel-nav{height:58px}
 .kr26-channel-nav>div{width:100%;padding:0 20px;gap:24px;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
 .kr26-channel-nav>div::-webkit-scrollbar{display:none}
 .kr26-channel-nav a{font-size:14px}
 .kr26-nav-search{width:130px;flex:0 0 130px}
 .kr26-browse{width:calc(100% - 40px);margin:24px 20px 0}
 .kr26-browse-menu{left:0;width:100%;max-width:280px}
 .kr26-browse-sub{position:relative;left:0;top:auto;width:100%;background:#e6e0f2}
 .kr26-hero{height:auto;margin-top:20px;padding:40px 0 48px}
 .kr26-hero-media{inset:0}
 .kr26-hero-inner{width:calc(100% - 40px);height:auto;margin:0 20px}
 .kr26-hero h1,.kr26-hero-copy,.kr26-hero-points{position:relative;left:auto;top:auto;width:auto}
 .kr26-hero h1{font-size:36px;line-height:46px}
 .kr26-hero-copy{margin-top:24px;font-size:18px;line-height:28px}
 .kr26-hero-points{margin-top:20px;font-size:18px;line-height:28px}
 .kr26-bubbles{height:auto;padding:28px 0}
 .kr26-bubbles-inner{width:calc(100% - 40px);height:auto;margin:0 20px;transform:none;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
 .kr26-bubble,.kr26-bubble[class*="kr26-bubble-"]{position:relative;left:auto!important;top:auto!important;width:104px!important;height:104px!important;font-size:12px!important;opacity:1!important;z-index:auto!important}
 .kr26-explore{position:relative;left:auto;top:auto;width:100%;max-width:238px;margin:24px auto 0}
 .kr26-sections{width:calc(100% - 40px);margin:48px 20px 0;transform:none}
 .kr26-section{margin-bottom:64px}
 .kr26-section:last-child{margin-bottom:80px}
 .kr26-section>header{height:auto;gap:16px;flex-wrap:wrap}
 .kr26-section h2{font-size:26px;line-height:32px}
 .kr26-section>header>a{width:118px;height:36px;flex:0 0 118px}
 .kr26-feature{grid-template-columns:1fr;margin-top:24px}
 .kr26-feature-media{width:100%;height:auto}
 .kr26-feature-media img,.kr26-feature-media .kw26-admin-image{height:auto;aspect-ratio:.78}
 .kr26-feature-copy{height:auto;padding:24px 20px}
 .kr26-feature-copy strong{line-height:32px}
 .kr26-row,.kr26-row-2,.kr26-row-3,.kr26-row-note{grid-template-columns:1fr;gap:20px;margin-top:20px}
 .kr26-row .kr26-card img,.kr26-row .kr26-card .kw26-admin-image{height:auto!important;aspect-ratio:1.72}
 .kr26-row-2 .kr26-card-copy,.kr26-row-3 .kr26-card-copy{height:auto;min-height:180px;padding:18px 20px}
 .kr26-row-note .kr26-card{height:auto;min-height:118px}
}

/* Navigation guide: cards and buttons grow slightly on hover to signal they are clickable */
.kr26-card,.kr26-feature{transition:transform .2s ease}
.kr26-card:hover,.kr26-feature:hover{transform:scale(1.012)}
.kr26-section>header>a,.kr26-explore,.kr26-browse-trigger{transition:transform .2s ease,background .2s ease}
.kr26-section>header>a:hover,.kr26-explore:hover,.kr26-browse-trigger:hover{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.kr26-card,.kr26-feature,.kr26-section>header>a,.kr26-explore,.kr26-browse-trigger{transition:none}.kr26-card:hover,.kr26-feature:hover,.kr26-section>header>a:hover,.kr26-explore:hover,.kr26-browse-trigger:hover{transform:none}}

/* K-Ranking category detail page 1: Latest / Tops / Popular / Awards (Figma 124:210) */
/* The gap above the footer is padding on the page, not margin on the View More button (2026-08-11).
   The button only renders while there are more records, so on the last page — and on any page that
   never had enough records for a second page — the button's margin-bottom disappeared with it and
   the last card ended up flush against the footer, 0px gap. Same defect existed on all five list
   families in the theme. Keeping the number here means the spacing survives the button, and the
   geometry is unchanged while the button is present: card bottom + 101 (button top margin) + 38
   (button) + 195 (this padding) = footer, exactly as before. */
.kr26-tab-page{width:996px;margin:0 auto;padding-bottom:195px}
.kr26-tab-title{margin:45px 0 0;text-align:center;font-size:48px;line-height:58px;font-weight:600}
.kr26-tab-page .kr26-browse{margin:38px auto 0}
.kr26-tab-layout{display:grid;grid-template-columns:589px 368px;gap:39px;margin-top:25px}
.kr26-tab-feed{display:flex;flex-direction:column;gap:49px;min-width:0}
.kr26-tab-card{display:grid;grid-template-columns:282px 307px;height:360px;overflow:hidden}
.kr26-tab-media{display:block;width:282px;height:360px;overflow:hidden}
.kr26-tab-media img,.kr26-tab-media .kw26-admin-image{display:block;width:100%;height:100%;object-fit:cover}
.kr26-tab-copy{display:flex;height:360px;padding:22px;flex-direction:column;background:#e2dbeb;color:#000;text-decoration:none}
.kr26-tab-copy strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:16px;line-height:48px;font-weight:400}
.kr26-tab-copy p{display:-webkit-box;overflow:hidden;margin:12px 0 0;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:15px;line-height:24px;font-weight:500}
.kr26-tab-copy small{display:flex;margin-top:auto;flex-direction:column;gap:14px;font-size:12px;line-height:15px}
.kr26-tab-copy small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kr26-featured h2{height:65px;margin:0;font-size:20px;line-height:24px;font-weight:600}
.kr26-featured article{width:368px;height:108px;margin-bottom:24px;background:rgba(226,219,235,.2)}
.kr26-featured article>a,.kr26-featured article>div{display:flex;height:100%;padding:14px 16px 16px;flex-direction:column;justify-content:space-between;color:#000;text-decoration:none}
.kr26-featured strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:16px;line-height:24px;font-weight:400}
.kr26-featured small{display:flex;gap:10px;justify-content:space-between;font-size:12px;line-height:15px}
.kr26-featured small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kr26-featured time{flex:0 0 auto}
.kr26-view-more{display:flex;width:147px;height:38px;margin:101px 0 0 208px;align-items:center;justify-content:center;border:1px solid #000;border-radius:32px;color:#000;text-decoration:none;font-size:16px;line-height:19px;transition:transform .2s ease}
.kr26-view-more:hover{transform:scale(1.04)}
.kr26-tab-card{transition:transform .2s ease}
.kr26-tab-card:hover,.kr26-featured article:hover{transform:scale(1.012)}
.kr26-featured article{transition:transform .2s ease}
@media(prefers-reduced-motion:reduce){.kr26-tab-card,.kr26-featured article,.kr26-view-more{transition:none}.kr26-tab-card:hover,.kr26-featured article:hover,.kr26-view-more:hover{transform:none}}
@media(max-width:1100px){
 .kr26-tab-page{width:calc(100% - 56px);margin:0 28px;padding-bottom:90px}
 .kr26-tab-title{font-size:38px;line-height:46px;text-align:left}
 .kr26-tab-page .kr26-browse{width:100%;margin:28px 0 0}
 .kr26-tab-layout{grid-template-columns:minmax(0,1fr) 368px;gap:28px}
 .kr26-tab-card{grid-template-columns:240px minmax(0,1fr);height:auto;min-height:320px}
 .kr26-tab-media{width:240px;height:auto;min-height:320px}
 .kr26-tab-copy{height:auto;min-height:320px}
 .kr26-featured article{width:100%}
 .kr26-view-more{margin:56px auto 0}
}
@media(max-width:760px){
 .kr26-tab-page{width:calc(100% - 40px);margin:0 20px;padding-bottom:72px}
 .kr26-tab-title{margin-top:28px;font-size:30px;line-height:38px}
 .kr26-tab-layout{grid-template-columns:1fr;gap:44px;margin-top:20px}
 .kr26-tab-feed{gap:28px}
 .kr26-tab-card{grid-template-columns:1fr;height:auto;min-height:0}
 .kr26-tab-media{width:100%;height:auto;min-height:0}
 .kr26-tab-media img,.kr26-tab-media .kw26-admin-image{height:auto;aspect-ratio:1.35}
 .kr26-tab-copy{height:auto;min-height:0;padding:20px}
 .kr26-tab-copy strong{line-height:32px}
 .kr26-featured{margin-top:0}
 .kr26-view-more{margin:40px auto 0}
}

/* K-Ranking category detail page 2: one category per page (Figma 177:60) */
.kr26-cat-page{width:996px;margin:0 auto;padding-bottom:194px}
.kr26-cat-title{margin:45px 0 0;text-align:center;font-size:48px;line-height:58px;font-weight:600}
.kr26-cat-page .kr26-browse{margin:38px auto 0}
.kr26-cat-feed{display:flex;flex-direction:column;gap:55px;margin-top:45px}
.kr26-cat-card{display:grid;grid-template-columns:350px 646px;height:448px;overflow:hidden;transition:transform .2s ease}
.kr26-cat-card:hover{transform:scale(1.008)}
.kr26-cat-media{display:block;width:350px;height:448px;overflow:hidden}
.kr26-cat-media img,.kr26-cat-media .kw26-admin-image{display:block;width:100%;height:100%;object-fit:cover}
.kr26-cat-copy{display:flex;height:448px;padding:24px 33px;flex-direction:column;background:#e2dbeb;color:#000;text-decoration:none}
.kr26-cat-copy strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-width:439px;font-size:16px;line-height:48px;font-weight:400}
.kr26-cat-copy p{display:-webkit-box;overflow:hidden;margin:12px 0 0;-webkit-box-orient:vertical;-webkit-line-clamp:4;max-width:315px;font-size:15px;line-height:24px;font-weight:500}
.kr26-cat-copy small{display:flex;margin-top:auto;flex-direction:column;gap:14px;font-size:12px;line-height:15px}
.kr26-cat-copy small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kr26-view-more-center{margin:100px auto 0}
@media(prefers-reduced-motion:reduce){.kr26-cat-card{transition:none}.kr26-cat-card:hover{transform:none}}
@media(max-width:1100px){
 .kr26-cat-page{width:calc(100% - 56px);margin:0 28px;padding-bottom:90px}
 .kr26-cat-title{font-size:38px;line-height:46px;text-align:left}
 .kr26-cat-page .kr26-browse{width:100%;margin:28px 0 0}
 .kr26-cat-feed{gap:36px;margin-top:32px}
 .kr26-cat-card{grid-template-columns:300px minmax(0,1fr);height:auto;min-height:380px}
 .kr26-cat-media{width:300px;height:auto;min-height:380px}
 .kr26-cat-copy{height:auto;min-height:380px}
 .kr26-cat-copy strong,.kr26-cat-copy p{max-width:none}
 .kr26-view-more-center{margin:56px auto 0}
}
@media(max-width:760px){
 .kr26-cat-page{width:calc(100% - 40px);margin:0 20px;padding-bottom:72px}
 .kr26-cat-title{margin-top:28px;font-size:28px;line-height:36px}
 .kr26-cat-feed{gap:28px;margin-top:24px}
 .kr26-cat-card{grid-template-columns:1fr;height:auto;min-height:0}
 .kr26-cat-media{width:100%;height:auto;min-height:0}
 .kr26-cat-media img,.kr26-cat-media .kw26-admin-image{height:auto;aspect-ratio:1.3}
 .kr26-cat-copy{height:auto;min-height:0;padding:20px}
 .kr26-cat-copy strong{line-height:32px}
 .kr26-view-more-center{margin:40px auto 0}
}

/* K-Ranking article detail (Figma 235:75) */
.krd26-page{position:relative}
.krd26-hero{position:relative;height:845px;overflow:hidden}
/* 2026-08-25：按 Figma 235:75 修正 hero 左列偏移。原来所有左列元素都比 Figma 高 166px
   （从 hero media 的 top:114 量起而非 frame 顶部）。现在修正到 Figma 的实际坐标。
   category=286, social=291(不变已是正确的), title=278(保持,它在flow block里), byline=646→812,
   credit=613→779, 两条 hairline 也顺移。hero 高度从 845 增加到 1008 容纳完整内容。 */
.krd26-hero{position:relative;height:1008px;overflow:hidden}
.krd26-hero-inner{position:relative;width:1440px;height:1008px;margin:0 auto}
.krd26-deco-accent{left:0;top:20px;width:135px;height:164px;background:#4f4878}
.krd26-deco-panel{left:43px;top:66px;width:634px;height:842px;background:#dfd6f1}
.krd26-deco-dark{left:1021px;top:691px;width:374px;height:286px;background:#4f4878}
.krd26-deco-light{left:677px;top:756px;width:344px;height:161px;background:#dfd6f1}
.krd26-deco-light2{left:1021px;top:756px;width:135px;height:161px;background:rgba(223,214,241,.8)}
.krd26-deco-dots{left:1037px;top:775px;width:119px;height:154px;background-image:radial-gradient(#4f4878 1px,transparent 1px);background-size:17px 22px}
.krd26-hero-media{position:absolute;left:630px;top:280px;width:690px;height:486px;overflow:hidden}
.krd26-hero-cat{position:absolute;left:80px;top:286px;margin:0;font-size:16px;line-height:20px;text-transform:uppercase}
/* 2026-09-01：social 图标行修正到 291px（分类标签同一行、标题上方）。
   上次 +166 偏移时误写成 457，把图标行压到了标题（444px）上，造成文字重叠。 */
.krd26-hero-social{position:absolute;left:384px;top:291px;z-index:2;display:flex;align-items:center;gap:33px}
.krd26-hero-text{position:absolute;left:87px;top:444px;width:504px}
.krd26-hero-byline{position:absolute;left:88px;top:812px;width:399px;margin:0;font-size:14px;line-height:18px}
.krd26-hero-credit{position:absolute;left:1174px;top:779px;width:200px;margin:0;color:#fff;font-size:14px;line-height:17px;font-weight:200}

.krd26-share-rail{position:absolute;left:0;top:1116px;bottom:180px;width:84px;z-index:20}
.krd26-share-dock{position:sticky;top:24px;width:84px}
.krd26-share-trigger{position:relative;display:block;width:84px;height:84px;padding:0;border:0;background:#4f4878;color:#fff;cursor:pointer}
.krd26-share-trigger i{position:absolute;display:block;width:11px;height:11px;border:1px solid currentColor;border-radius:50%}
.krd26-share-trigger i:nth-child(1){left:27px;top:37px}
.krd26-share-trigger i:nth-child(2){left:45px;top:28px}
.krd26-share-trigger i:nth-child(3){left:45px;top:47px}
.krd26-share-trigger:before,.krd26-share-trigger:after{content:"";position:absolute;left:36px;width:20px;height:1px;background:currentColor;transform-origin:left}
.krd26-share-trigger:before{top:40px;transform:rotate(-27deg)}
.krd26-share-trigger:after{top:45px;transform:rotate(27deg)}
.krd26-share-menu{position:relative;width:84px;height:405px;background:#dfd6f1}
.krd26-share-menu[hidden],.krd26-share-status[hidden]{display:none}
.krd26-share-menu a,.krd26-share-menu button{position:absolute;left:0;display:flex;width:84px;height:60px;padding:0;align-items:center;justify-content:center;border:0;background:transparent;color:#fff;text-decoration:none;cursor:pointer}
.krd26-share-menu a:nth-child(1){top:12px}
.krd26-share-menu a:nth-child(2){top:90px}
.krd26-share-menu a:nth-child(3){top:169px}
.krd26-share-menu a:nth-child(4){top:249px}
.krd26-share-menu button:nth-child(5){top:326px}
.krd26-share-menu svg{display:block;width:30px;height:30px;fill:currentColor}
.krd26-share-status{position:absolute;left:127px;top:418px;width:336px;height:72px;display:flex;align-items:center;justify-content:center;background:#dfd6f1;color:#000;font-size:24px;line-height:30px;white-space:nowrap}
.krd26-share-trigger:focus-visible,.krd26-share-menu a:focus-visible,.krd26-share-menu button:focus-visible{outline:3px solid #19007c;outline-offset:-3px}

/* Left edge aligns with the shared 996px grid; RELATED intentionally runs past it, as in Figma.
   Uses a percentage of the full-width page instead of 100vw so the scrollbar is not counted. */
.krd26-layout{position:relative;display:grid;grid-template-columns:588px 368px;gap:87px;width:1043px;margin:54px 0 140px;margin-left:max(calc((100% - 996px)/2),28px)}
.krd26-main{min-width:0}
.krd26-content{font-size:16px;line-height:30px}
.krd26-content p{margin:0 0 30px}
.krd26-content h2,.krd26-content h3{margin:44px 0 20px;font-size:24px;line-height:30px;font-weight:700}
.krd26-content a{color:#19007c;text-decoration:underline}
.krd26-content img{display:block;max-width:100%;height:auto;margin:30px 0}
.krd26-content .kw26-admin-image{min-height:320px;margin:30px 0}
.krd26-zoomable{cursor:zoom-in;transition:transform .25s ease}
.krd26-zoomable:hover{transform:scale(1.02)}
/* Only long tables get the fixed frame and the purple scrollbar.
   781px is the Figma frame height. Short images remain unframed. */
.krd26-rank-frame{max-height:781px;margin:30px 0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#e5def4 #4f4878}
.krd26-rank-frame img{margin:0}
.krd26-rank-frame::-webkit-scrollbar{width:13px}
.krd26-rank-frame::-webkit-scrollbar-track{background:#4f4878}
.krd26-rank-frame::-webkit-scrollbar-thumb{background:#e5def4;border-radius:4px;border:2px solid #4f4878}
.krd26-rank-frame:focus-visible{outline:2px solid #19007c;outline-offset:2px}
/* Real Download button. The one painted inside the ranking bitmap is not clickable, so this
   sits in the top-right corner of the image and stays put while a long ranking scrolls. */
.krd26-figure{position:relative;margin:30px 0}
.krd26-figure img{display:block;margin:0}
.krd26-rank-frame{position:relative}
.krd26-rank-tools{position:sticky;top:12px;z-index:2;display:flex;justify-content:flex-end;height:0;padding-right:12px}
/* Long rankings: always visible. Ordinary images: only on hover/focus, so a photo-heavy
   article does not sprout a button on every picture. Touch devices always show it. */
.krd26-figure>.krd26-rank-tools{position:absolute;top:12px;right:0;left:0;padding-right:12px;opacity:0;transition:opacity .2s ease}
.krd26-figure:hover>.krd26-rank-tools,.krd26-figure:focus-within>.krd26-rank-tools{opacity:1}
@media(hover:none){.krd26-figure>.krd26-rank-tools{opacity:1}}
.krd26-download{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid #dfd6f1;border-radius:6px;background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(25,0,124,.12);color:#19007c;font-size:12px;line-height:1;font-weight:500;text-decoration:none;cursor:pointer;transition:background .2s ease,transform .2s ease}
.krd26-download svg{width:13px;height:13px;fill:currentColor;flex:0 0 13px}
.krd26-download:hover{background:#f6f6ff;transform:scale(1.03)}
.krd26-download:focus-visible{outline:2px solid #19007c;outline-offset:2px}
.krd26-download.is-busy{opacity:.6;pointer-events:none}
.krd26-list-note{margin:0 0 30px;padding:6px;background:#f7f3fc;font-size:8px;line-height:11px}
.krd26-topics{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:18px;color:#19007c;font-size:13px;line-height:30px}
.krd26-topics a{color:inherit;text-decoration:none}
.krd26-related h2{height:65px;margin:0;font-size:20px;line-height:24px;font-weight:600}
.krd26-related article{width:368px;height:108px;margin-bottom:24px;background:rgba(226,219,235,.2);transition:transform .2s ease}
.krd26-related article:hover{transform:scale(1.015)}
.krd26-related article>a,.krd26-related article>div{display:flex;height:100%;padding:14px 16px 16px;flex-direction:column;justify-content:space-between;color:#000;text-decoration:none}
.krd26-related strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:16px;line-height:24px;font-weight:400}
.krd26-related small{display:flex;gap:10px;justify-content:space-between;font-size:12px;line-height:15px}
.krd26-related small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.krd26-related time{flex:0 0 auto}

.krd26-lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(24,20,44,.88)}
.krd26-lightbox[hidden]{display:none}
.krd26-lightbox img{max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.krd26-lightbox-close{position:absolute;right:24px;top:20px;width:44px;height:44px;border:0;border-radius:50%;background:#dfd6f1;color:#19007c;font-size:28px;line-height:1;cursor:pointer}
.krd26-no-scroll{overflow:hidden}
@media(prefers-reduced-motion:reduce){.krd26-zoomable,.krd26-related article,.krd26-download,.krd26-figure>.krd26-rank-tools{transition:none}.krd26-zoomable:hover,.krd26-related article:hover,.krd26-download:hover{transform:none}}
@media(max-width:1100px){
 .krd26-hero{height:auto;overflow:visible;padding:40px 0 48px;background:#dfd6f1}
 .krd26-hero-inner{width:calc(100% - 56px);height:auto;margin:0 28px}
 .krd26-deco{display:none}
 .krd26-hero-media{position:relative;left:auto;top:auto;width:100%;height:auto}
 .krd26-hero-media img,.krd26-hero-media .kw26-admin-image{height:auto;aspect-ratio:1.42}
 .krd26-hero-credit,.krd26-hero-cat,.krd26-hero-social,.krd26-hero-text,.krd26-hero-byline{position:relative;left:auto;top:auto;width:auto}
 .krd26-hero-inner h1,.krd26-hero-summary{width:auto;-webkit-line-clamp:unset}
 .krd26-hero-credit{color:#000;margin-top:10px}
 .krd26-hero-cat{margin-top:24px}
 .krd26-hero-social{margin-top:18px}
 .krd26-hero-inner h1{margin-top:18px;font-size:30px;line-height:42px}
 .krd26-hero-summary{margin-top:20px}
 .krd26-hero-byline{margin-top:20px}
 .krd26-share-rail{position:relative;left:auto;top:auto;bottom:auto;width:calc(100% - 56px);margin:32px 28px 0}
 .krd26-share-dock{position:relative;top:auto;width:100%}
 .krd26-share-menu{position:absolute;left:84px;top:0;width:calc(100% - 84px);height:64px;display:grid;grid-template-columns:repeat(5,1fr)}
 .krd26-share-menu a,.krd26-share-menu button,.krd26-share-menu a:nth-child(n),.krd26-share-menu button:nth-child(5){position:relative;left:auto;top:auto;width:100%;height:64px}
 .krd26-share-status{left:0;top:96px;width:100%;height:64px;font-size:20px}
 .krd26-layout{grid-template-columns:minmax(0,1fr) 368px;gap:40px;width:calc(100% - 56px);margin:40px 28px 90px}
 .krd26-rank-frame{max-height:600px}
}
@media(max-width:760px){
 .krd26-hero-inner{width:calc(100% - 40px);margin:0 20px}
 .krd26-hero-inner h1{font-size:26px;line-height:36px}
 .krd26-share-rail{width:calc(100% - 40px);margin:24px 20px 0}
 .krd26-share-trigger{width:64px;height:64px}
 .krd26-share-trigger i:nth-child(1){left:19px;top:28px}
 .krd26-share-trigger i:nth-child(2){left:37px;top:19px}
 .krd26-share-trigger i:nth-child(3){left:37px;top:38px}
 .krd26-share-trigger:before{left:28px;top:31px}
 .krd26-share-trigger:after{left:28px;top:36px}
 .krd26-share-menu{left:64px;width:calc(100% - 64px)}
 .krd26-share-menu svg{width:24px;height:24px}
 .krd26-layout{grid-template-columns:1fr;gap:56px;width:calc(100% - 40px);margin:32px 20px 80px}
 .krd26-related article{width:100%}
 .krd26-rank-frame{max-height:70vh}
 .krd26-lightbox{padding:16px}
}

/* Figma hairlines that were missed because they are zero-height VECTOR layers, not rectangles.
   Home: 996px dividers between the four sections (124:157 / 124:158 / 124:189).
   Tab page: 368px rule 35px under the FEATURED heading (124:275).
   Article: 199px rule above the category label, 221px above the social row, 368px under
   RELATED (267:1592 / 267:1593 / 235:101). */
.kr26-section:not(:last-child){padding-bottom:54px;margin-bottom:54px;border-bottom:1px solid var(--kw-line)}
.kr26-featured h2,.krd26-related h2{position:relative}
.kr26-featured h2:after,.krd26-related h2:after{content:"";position:absolute;left:0;top:35px;width:100%;height:1px;background:var(--kw-line)}
.krd26-hero-cat:before{content:"";position:absolute;left:0;top:-6px;width:199px;height:1px;background:currentColor;opacity:.4}
.krd26-hero-social:before{content:"";position:absolute;left:-14px;top:-8px;width:221px;height:1px;background:currentColor;opacity:.4}
.kr26-explore span,.kr26-section>header>a span{display:inline-block;width:18px;height:18px;margin-left:8px;font-size:0;background:url("../images/icon-arrow-up-right.svg") center/contain no-repeat}
.kr26-explore span{width:22px;height:22px;margin-left:10px}
.kr26-view-more span{width:9px;height:9px;border-right:1.6px solid #000;border-bottom:1.6px solid #000;transform:translateY(-3px) rotate(45deg)}
.kr26-view-more{gap:8px}
@media(max-width:1100px){
 .kr26-section:not(:last-child){padding-bottom:32px;margin-bottom:32px}
 .krd26-hero-cat:before,.krd26-hero-social:before{display:none}
}
/* Editorial typography: CMS headlines use Lusitana; navigation, categories and controls stay Inter. */
.kr26-hero h1,.kr26-feature-copy strong,.kr26-card-copy strong,.kr26-tab-copy strong,.kr26-featured strong,.kr26-cat-copy strong,.krd26-related strong{font-family:Lusitana}
/* Lusitana at 400 reads lighter than the Inter 400 Figma measured, so serif titles carry 700. */
.kr26-feature-copy strong,.kr26-card-copy strong,.kr26-tab-copy strong,.kr26-featured strong,.kr26-cat-copy strong,.krd26-related strong{font-weight:700}
/* The earlier flat 18px compensation is superseded by the three-tier card scale below. */
/* Card typography tiers (scale defined in home.css).
   Large  : feature card on the home page, the 589px main cards on detail page 1, the 996px cards
            on detail page 2.
   Medium : the 486px and 306px image cards in the home page rows.
   Small  : the bordered text-only cards, FEATURED and article RELATED. */
.kr26-feature-copy strong,.kr26-tab-copy strong,.kr26-cat-copy strong{font-size:var(--kw-card-lg-title);line-height:var(--kw-card-lg-title-lh)}
.kr26-feature-copy p,.kr26-tab-copy p,.kr26-cat-copy p{font-size:var(--kw-card-lg-text);line-height:var(--kw-card-lg-text-lh)}
.kr26-row-2 .kr26-card-copy strong,.kr26-row-3 .kr26-card-copy strong{font-size:var(--kw-card-md-title);line-height:var(--kw-card-md-title-lh)}
.kr26-row-2 .kr26-card-copy p,.kr26-row-3 .kr26-card-copy p{font-size:var(--kw-card-md-text);line-height:var(--kw-card-md-text-lh)}
.kr26-row-note .kr26-card-copy strong,.kr26-featured strong,.krd26-related strong{font-size:var(--kw-card-sm-title);line-height:var(--kw-card-sm-title-lh)}
.kr26-meta,.kr26-featured small,.krd26-related small{font-size:var(--kw-card-meta);line-height:var(--kw-card-meta-lh)}
/* Content-driven cards (2026-08-07): titles and intros show in full, no ellipsis. The Figma
   heights become floors via min-height, so short cards keep their designed bottom whitespace and
   long ones grow instead of clipping. These cards already sit in grids, so growth just pushes the
   row down. */
.kr26-feature-copy strong,.kr26-feature-copy p,.kr26-card-copy strong,.kr26-card-copy p,.kr26-tab-copy strong,.kr26-tab-copy p,.kr26-featured strong,.kr26-cat-copy strong,.kr26-cat-copy p,.krd26-related strong{display:block;overflow:visible;-webkit-line-clamp:none;-webkit-box-orient:initial;max-width:none}
.kr26-feature{align-items:start}
.kr26-feature-media,.kr26-feature-copy{height:auto;min-height:492px}
.kr26-row-2 .kr26-card-copy{height:auto;min-height:244px}
.kr26-row-3 .kr26-card-copy{height:auto;min-height:210px}
.kr26-row-note .kr26-card{height:auto;min-height:128px}
.kr26-row-note .kr26-card-copy{height:auto;min-height:100px}
.kr26-tab-layout,.kr26-cat-feed{align-items:start}
.kr26-tab-media,.kr26-tab-copy{height:auto;min-height:360px}
.kr26-cat-media,.kr26-cat-copy{height:auto;min-height:448px}
.kr26-featured article,.krd26-related article{height:auto;min-height:108px}
/* Text hugs the bottom of the panel (2026-08-07). Previously the meta line carried
   margin-top:auto and the panels were space-between, so all of the surplus left over by
   min-height piled up between the intro and the meta - an ~80px hole in the middle of the card.
   Now the whole text group sits against the bottom padding and the surplus moves above the
   title, i.e. into the gap under the image. */
.kr26-feature-copy,.kr26-row-2 .kr26-card-copy,.kr26-row-3 .kr26-card-copy,.kr26-row-note .kr26-card-copy,.kr26-tab-copy,.kr26-cat-copy{justify-content:flex-start}
/* Panels with an intro: the heading stays put under the image, the description follows immediately.
   2026-08-25: Client requested removal of the large gap between title and description. Previously
   margin-top:auto pushed the description to the bottom; now we use a small fixed margin so title
   and description sit together, and meta stays at the bottom via its own margin-top:auto. */
.kr26-feature-copy p,.kr26-row-2 .kr26-card-copy p,.kr26-row-3 .kr26-card-copy p,.kr26-tab-copy p,.kr26-cat-copy p{margin-top:12px}
.kr26-feature-copy strong{margin-bottom:0}
.kr26-row-2 .kr26-card-copy strong,.kr26-row-3 .kr26-card-copy strong{margin-bottom:8px}
.kr26-tab-copy strong,.kr26-cat-copy strong{margin-bottom:12px}
.kr26-meta,.kr26-tab-copy small,.kr26-cat-copy small{margin-top:16px}
/* Panels with no intro: heading on top, meta on the bottom, surplus between the two. */
.kr26-row-note .kr26-card-copy .kr26-meta{margin-top:auto}
.kr26-featured article>a,.kr26-featured article>div,.krd26-related article>a,.krd26-related article>div{justify-content:flex-start}
.kr26-featured small,.krd26-related small{margin-top:auto}
/* Same fix as kflow.css: the 108px rails need the min-height on the flex container (<a>), not on
   the <article>, otherwise the surplus lands under the meta. Plus a guaranteed gap under the heading. */
.kr26-featured article,.krd26-related article{min-height:0}
.kr26-featured article>a,.kr26-featured article>div,.krd26-related article>a,.krd26-related article>div{min-height:108px;height:auto}
.kr26-featured strong,.krd26-related strong{margin-bottom:12px}
/* K-Ranking homepage type spec (2026-08-07).
   Already correct: masthead K-RANKING 32, channel nav 16, Browse By Category 16, hero copy and
   checklist 24/1.5x, Explore More 24, section headings (Latest/Popular) 32, See More 16,
   feature card 32/1.5x with a 16/1.5x intro, small bordered cards 16/1.5x, all grey meta 12,
   largest bubble 32.
   Four values needed changing, below. */
/* Hero headline was 56/68px (1.214x); the spec asks for 1.2x. */
.kr26-hero h1{line-height:1.2}
/* Bubble labels were 1.25x; the spec asks for 1.125x on the largest bubble, applied to all so the
   cloud keeps one rhythm. */
.kr26-bubble span{line-height:1.125}
/* The two medium card shapes take different intro type, which the shared md token cannot express:
   the horizontal 486px card uses 16/1.5x, the vertical 306px card uses 12 at 2x. */
.kr26-row-2 .kr26-card-copy p{font-size:var(--kw-card-lg-text);line-height:1.5}
.kr26-row-3 .kr26-card-copy p{font-size:12px;line-height:2}
/* K-Ranking article detail (2026-08-07). The top half follows the K-Flow article spec, so the hero
   headline moves from 36/50px to 32 at 1.4x. Hero category 16, byline 14, Image Credits 14 Extra
   Light, Topics 13 and RELATED 20 already match. Body scale is handled in home.css.
   Browse By Category dropdown already matches: trigger 16, level-1 12, level-2 12. */
.krd26-hero-inner h1{font-size:32px;line-height:1.4}
@media(max-width:760px){.krd26-hero-inner h1{font-size:26px}}

/* Card panel tint (2026-08-11). Same correction as K-Insight: the Figma rectangles are filled
   #e2dbeb but their layer opacity is far below 100%, so the design renders a very pale tint, not
   the full-strength colour. Exporting 124:9 (the 486x244 row card panel) confirms it. The panels
   sit on the white page background, so .2 composites to #f9f8fb, which is also the flat value
   K-Flow's LATEST panel already uses and the alpha the FEATURED/RELATED cards already use.
   All four variants are the same component (image plus pale copy panel): home feature card, home
   image cards, category detail page 1 card, category detail page 2 card.
   .kr26-row-note .kr26-card-copy stays transparent: it is more specific, so it still wins. */
.kr26-feature-copy,.kr26-card-copy,.kr26-tab-copy,.kr26-cat-copy{background:rgba(226,219,235,.2)}

/* Card media crops (2026-08-11). Same defect found on the K-Insight brand page, same fix. The
   no-truncation pass above gave these media boxes height:auto with a min-height floor, and
   img{height:100%} against an auto-height parent degrades to auto, so the photo takes its own
   intrinsic ratio and the floor shows up as a white strip: the Awards feature photo rendered 431
   inside a 492 box at both 1440 and 1024 (61px of white), and on phones the floors set after the
   media queries were never cleared, leaving 100px under a 260px tab photo and 178px under a 270px
   category photo. Pinning the Figma ratio makes the height a function of the column width, and the
   floors are cleared unscoped so the phone layout's own image ratios decide the height there.
   The two cards also carried a hard height with overflow:hidden, so a description longer than the
   Figma sample was silently cut instead of growing the card, which the content-driven pass was
   supposed to allow everywhere. */
.kr26-tab-card{height:auto;min-height:360px}
.kr26-cat-card{height:auto;min-height:448px}
.kr26-feature-media,.kr26-tab-media,.kr26-cat-media{min-height:0}
@media(min-width:761px){
 .kr26-feature-media{aspect-ratio:383/492}
 .kr26-tab-media{aspect-ratio:282/360}
 .kr26-cat-media{aspect-ratio:350/448}
 .kr26-feature-media img,.kr26-feature-media .kw26-admin-image,.kr26-tab-media img,.kr26-tab-media .kw26-admin-image,.kr26-cat-media img,.kr26-cat-media .kw26-admin-image{width:100%;height:100%;object-fit:cover}
}
/* ==========================================================================
   Hero copy / points overlap fix (2026-08-17).
   The Figma-derived rules placed both blocks at fixed absolute tops (324 and 448) inside a
   996x688 hero, which leaves 124px for the description. At 24px/36px over a 548px column that is
   exactly 3 lines. The approved K-Ranking description runs 4 lines (144px), so it overflowed and
   collided with the points list below it (reported on the live site 2026-08-17).
   Fix: the whole hero text block becomes a vertically centred flex column, so any line count is
   handled. A first attempt that only swapped the absolute top for padding was rejected: it stops
   the overlap but leaves the points list riding up when the copy is short.
   Only the >=1101px desktop rules need this: the two smaller breakpoints already switch both
   blocks to position:relative and stack them in flow.
   ========================================================================== */
@media(min-width:1101px){
 /* Three fixed absolute tops can only ever be right for one exact line count. Replaced with a
    vertically centred flex column and fixed gaps, so 2 lines, 4 lines or 8 lines all render
    balanced and can never overlap. The hero keeps 688px as its floor and grows only if the copy
    genuinely needs more room; the background image is inset:0 and stretches either way.
    .kr26-hero-media stays absolutely positioned, so it is out of flow and unaffected. */
 .kr26-hero{height:auto;min-height:688px;display:flex;align-items:center}
 .kr26-hero-inner{height:auto;padding:80px 0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
 .kr26-hero h1{position:static;width:609px;margin:0}
 .kr26-hero-copy{position:static;width:548px;margin:40px 0 0}
 .kr26-hero-points{position:static;width:548px;margin:28px 0 0}
}
/* ==========================================================================
   Browse By Category: three-level menu (2026-08-17, final).

   Requirement: hovering a first-level row opens that row's own children as a panel to its right,
   aligned with the row, and the first-level list itself must not move.

   The original rules already do exactly that. Three attempts made it worse before this was clear,
   recorded here so none of them gets retried:
     1. Expanding children inline under the row: scrolls with the list, but pushes every row below
        it down, so the list visibly jumps on hover.
     2. Capping the list height with overflow-y and anchoring the flyout to the panel rather than
        the row, so it could escape the scroller. Every flyout then shared one fixed top, so all of
        them stacked in the same place and the visible one was whichever painted last, never the
        one under the pointer.
     3. Inserting a .kr26-browse-scroll wrapper to hold the overflow. That wrapper is a direct div
        child of .kr26-browse-menu, so it was captured by the existing
        .kr26-browse-menu>div:hover .kr26-browse-sub{display:block}. Pointing at any row also hovers
        the wrapper, which opened all fifteen panels at once.
   Root cause of 2 and 3 is the same: a flyout aligned to its row needs the row as its containing
   block, the row sits inside the list, so any overflow on the list clips the flyout. Pure CSS
   cannot give both a scrollbar and row-aligned flyouts. Correct content wins, so the list is not
   scrollable and the template keeps its original structure with no wrapper.
   List height follows the number of first-level categories: 8 rows is ~430px; the current 15
   (8 legacy plus 7 new) is tall and shrinks back once the legacy categories are removed.

   What is added below, on top of the original behaviour:
     - the markup always emits .kr26-browse-sub, so a row with no children used to open an empty
       panel on hover. :has(a) suppresses that, and only rows with children get the chevron.
     - the hovered row is tinted so it is obvious which panel belongs to it.
     - the panel is a little wider with padding and a shadow, per the agreed design.
   ========================================================================== */
.kr26-browse-menu>div>a{justify-content:space-between;padding:0 14px;text-align:left;gap:8px}
.kr26-browse-menu>div:has(.kr26-browse-sub a)>a:after{content:"\203A";flex:0 0 auto;font-size:18px;line-height:1;opacity:.65}
.kr26-browse-menu>div:hover>a,.kr26-browse-menu>div:focus-within>a{background:#d7cfe6;font-weight:700}
/* a row with no children must not open an empty box; overrides the original show rule, which is
   (0,3,2), so this needs to be at least as specific and come later */
.kr26-browse-menu>div:hover .kr26-browse-sub:not(:has(a)),
.kr26-browse-menu>div:focus-within .kr26-browse-sub:not(:has(a)){display:none}
/* 2026-09-01：同一时间只允许展开一个飞出面板。
   显示条件本来是 :hover 和 :focus-within 两个并列条件，某一行被点过或 Tab 过之后就一直带着
   焦点、面板不收；此时鼠标移到另一行，第二个面板又开出来，两个面板上下叠在一起（客户反馈
   「会展开多个」）。这里的规则是：只要鼠标在菜单范围内，没被悬停的行一律收起面板、也不高亮，
   于是 hover 永远压过 focus-within。鼠标离开菜单后规则失效，键盘 Tab 浏览照旧可用。
   特异度 (0,4,1) 高于原显示规则的 (0,3,1)，所以能覆盖。 */
.kr26-browse-menu:hover>div:not(:hover) .kr26-browse-sub{display:none}
.kr26-browse-menu:hover>div:not(:hover)>a{background:transparent;font-weight:400}
@media(min-width:761px){
 .kr26-browse-sub{width:186px;padding:14px 0;box-shadow:2px 2px 10px rgba(25,0,124,.12);z-index:2}
 .kr26-browse-sub a{justify-content:flex-start;padding:0 16px;height:auto;min-height:44px;text-align:left}
}

/* ==========================================================================
   2026-08-25：卡片等高 + 标题/副标题超出 3 行显示省略号
   客户要求：同行卡片高度一致；标题最多 3 行、副标题也最多 3 行，超出省略号截断。
   ========================================================================== */
.kr26-row-2,.kr26-row-3{align-items:stretch}
.kr26-row-2 .kr26-card,.kr26-row-3 .kr26-card{display:flex;flex-direction:column}
.kr26-row-2 .kr26-card>a,.kr26-row-2 .kr26-card>div,.kr26-row-3 .kr26-card>a,.kr26-row-3 .kr26-card>div{display:flex;flex-direction:column;flex:1}
.kr26-row-2 .kr26-card-copy,.kr26-row-3 .kr26-card-copy{flex:1}
.kr26-row-2 .kr26-card-copy strong,.kr26-row-3 .kr26-card-copy strong{display:-webkit-box!important;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.kr26-row-2 .kr26-card-copy p,.kr26-row-3 .kr26-card-copy p{display:-webkit-box!important;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
/* tab 页和 category 页的卡片同理 */
.kr26-tab-copy strong,.kr26-cat-copy strong{display:-webkit-box!important;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.kr26-tab-copy p,.kr26-cat-copy p{display:-webkit-box!important;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}

/* ==========================================================================
   2026-09-01：feature / row / tab / cat 卡片的 meta 行推到卡片底部
   客户反馈：meta 行（作者 | 分类  日期）下方留了一大片空白，应该沉到卡片底部；
   同排两张卡的 meta 要水平对齐。
   做法：卡片文字区本来就是 flex 列且有固定/最小高度，给 meta 加 margin-top:auto
   把它顶到底部；标题和正文仍留在顶部（保持之前的 12px 小间距）。
   同排卡片已经等高（align-items:stretch），meta 贴底后自然水平对齐。
   ========================================================================== */
.kr26-feature-copy .kr26-meta,
.kr26-row-2 .kr26-card-copy .kr26-meta,
.kr26-row-3 .kr26-card-copy .kr26-meta,
.kr26-tab-copy small,
.kr26-cat-copy small{margin-top:auto}
/* feature 卡片文字区撑满整卡高度，meta 才有下沉空间 */
.kr26-feature{align-items:stretch}
.kr26-feature-copy{flex:1}

/* ==========================================================================
   2026-09-04：榜单框窄屏放开横向滚动（安全网）+ 正文富文本限宽

   一、榜单框 .krd26-rank-frame
   上面第 347 行是 overflow-y:auto + overflow-x:hidden，而两档媒体查询里只改了 max-height
   （1100 档 600px、760 档 70vh），overflow-x 一直没动。

   这里要说清楚适用范围，免得后面的人误判：.krd26-rank-frame 不是模板里的静态节点，
   而是 kranking-article.js 在 .krd26-content 里动态包出来的，且只包 <img>
   （条件：naturalHeight/naturalWidth >= 1.3 且渲染高度 > 781px 的长榜单图）。
   框里的 <img> 会继承第 341 行的 .krd26-content img{max-width:100%}，所以图片本身
   不会横向溢出，overflow-x:hidden 目前并没有裁掉任何东西。

   之所以还是把窄屏改成 auto：这是一层零成本的安全网。不溢出时浏览器不会显示滚动条，
   视觉上完全没有变化；一旦以后框里换成真实表格、或者有人调整了上面的 max-width 规则，
   内容就能横滑出来而不是被静默裁掉。>1100px 保持原来的 hidden，桌面 588px 列里
   榜单图本来就放得下，不需要冒出横向滚动条。紫色滚动条样式沿用第 349-352 行已有的声明。

   注意：这一条没有解决"长榜单图在手机上被压到 335px 宽、字太小看不清"的问题。
   那个要靠给框内图片加 min-width 再横滑来解决，会改变榜单在手机上的观感，
   属于需要先跟客户确认的改动，这里不做。手机端目前可以点图走 #krd26-lightbox 放大。

   二、正文富文本 .krd26-content
   原来只有 img 限了 max-width:100%（第 341 行），table / iframe / video / pre 一个都没约束，
   编辑器粘进来的宽表格或嵌入视频会顶破 588px 正文列。
   处理方式与 K-Insight 正文（kinsight.css 的 .kid26-content）保持一致。
   只加宽度与溢出约束，不动字号、字体、行高，正文排版不受影响。
   ========================================================================== */
@media(max-width:1100px){
 .krd26-rank-frame{overflow-x:auto;overscroll-behavior-x:contain}
}
.krd26-content{overflow-wrap:break-word}
.krd26-content img,
.krd26-content table,
.krd26-content iframe,
.krd26-content video,
.krd26-content pre{max-width:100%}
.krd26-content table{display:block;overflow-x:auto}
.krd26-content pre{overflow-x:auto}
/* 表格/代码块横滑到头时不要把手势传给页面（iOS 上会误触发返回） */
.krd26-content table,
.krd26-content pre{overscroll-behavior-x:contain}