.media-index{--ink:#202b3c;--muted:#626d7e;--line:#e2e6ed;--navy:#122b57;--art-position:70% 58%;color:var(--ink);word-break:keep-all}
.media-index .wrap{max-width:1120px;margin-inline:auto;padding-inline:28px}
.media-index-press{--media-accent:#122b57;--media-tint:#edf2fa;--media-art:url('../img/media/press-wide.jpg');--art-position:62% 18%}
.media-index-blog{--media-accent:#3a4a24;--media-tint:#e9f1d8;--media-art:url('../img/media/blog-wide.jpg')}
.media-index-videos{--media-accent:#713747;--media-tint:#f7edf0;--media-art:url('../img/media/videos-wide.jpg');--art-position:58% 42%}
.media-index-cases{--media-accent:#4a3b20;--media-tint:#fbf3e0;--media-art:url('../img/media/cases-wide.jpg');--art-position:64% 58%}
.media-index .media-masthead{position:relative;isolation:isolate;overflow:hidden}
.media-index .media-banner{color:#fff}
.media-index .media-masthead::before{content:'';position:absolute;inset:-24px -48px;z-index:-1;background:linear-gradient(90deg,rgba(10,26,49,.88),rgba(10,26,49,.55) 40%,rgba(10,26,49,.08)),var(--media-art) var(--art-position)/cover no-repeat;transform:translateY(var(--media-scroll,0px))}
.media-index .media-banner .wrap{min-height:264px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-block:40px;gap:12px}
.media-index .media-eyebrow{font-size:11px;letter-spacing:.16em;color:#ffffffb3}
.media-index .media-banner h1{font-size:46px;font-weight:650;line-height:1.2;letter-spacing:-.045em;color:#fff}
.media-index .media-banner p{font-size:15px;line-height:1.8;max-width:600px;color:#ffffffdb}
.media-index .media-tabs{background:transparent}
.media-index .media-tabs .wrap{display:flex}
.media-index .media-tabs a{background:#fff;flex:1;min-width:0;min-height:60px;display:flex;justify-content:center;align-items:center;position:relative;font-size:15px;color:var(--muted);text-decoration:none;gap:4px}
.media-index .media-tabs a[aria-current]{color:var(--navy);font-weight:700}
.media-index .media-tabs a[aria-current]::after{content:'';position:absolute;bottom:0;inset-inline:24%;height:2px;background:var(--navy)}
.media-index .media-tabs a:hover{color:var(--navy);background:#f4f6fa}
.media-index :focus-visible{outline:2px solid #1e5bba;outline-offset:4px}
.media-index .media-catalog{padding-block:32px 64px}
.media-index .media-catalog h2{font-size:24px;line-height:1.5;font-weight:650;margin-bottom:20px;color:var(--ink)}
.media-index .media-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:24px}
.media-index .media-search{display:flex;align-items:center;gap:12px;flex:1;max-width:560px;border:1px solid var(--line);border-radius:8px;background:#f4f6fa;padding:0 16px}
.media-index .media-search input{width:100%;min-width:0;min-height:48px;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink)}
.media-index .media-loaded-count{font-size:13px;color:var(--muted)}
.media-index .media-no-match{padding:32px 0;color:var(--muted)}
.media-index [hidden]{display:none!important}
.media-index .case-grid{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--navy)}
.media-index a.ccard{display:block;padding:28px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;min-width:0;color:var(--ink);text-decoration:none}
.media-index .ccard .cbadge{display:block;font-size:12px;color:var(--muted);background:transparent;padding:0;margin-bottom:12px}
.media-index .ccard .cttl{font-size:18px;font-weight:600;line-height:1.5;margin:0;color:var(--ink)}
.media-index .ccard .cdesc{font-size:14px;line-height:1.8;margin-top:12px;color:var(--muted)}
.media-index .ccard .cdate:empty{display:none}
.media-index .blog-grid{display:block;border-top:1px solid var(--navy)}
.media-index .bcard{display:block;padding:24px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;color:var(--ink);text-decoration:none}
.media-index .btitle{display:block;font-size:20px;line-height:1.6;font-weight:600}
.media-index .bchip{display:inline-block;color:var(--navy);font-size:12px;background:transparent;margin-bottom:8px;padding:0}
.media-index .bfoot{display:flex;justify-content:space-between;margin-top:16px;font-size:12px;color:var(--muted)}
.media-index .mlist{border-top:1px solid var(--navy)}
.media-index .mrow2{display:block;border:0;border-bottom:1px solid var(--line);background:transparent;border-radius:0;padding:0}
.media-index .mlist .mrow-main{display:grid;grid-template-columns:110px minmax(0,1fr) 88px;gap:24px;align-items:center;padding:24px 0;color:var(--ink);text-decoration:none}
.media-index .moutlet{grid-column:1;grid-row:1;font-size:14px;color:var(--navy);font-weight:600}
.media-index .mttl{grid-column:2;grid-row:1;font-size:18px;line-height:1.6;font-weight:500}
.media-index .mdate{grid-column:3;grid-row:1;font-size:12px;color:var(--muted)}
.media-index .vid-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.media-index .vcard{min-width:0;display:block;color:var(--ink);border:0;background:transparent;box-shadow:none;text-decoration:none}
.media-index .vthumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;margin-bottom:16px}
.media-index .vthumb img{width:100%;height:100%;object-fit:cover}
.media-index .vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;background:white;color:var(--navy);border-radius:50%}
.media-index .vbody{display:block;padding:0}.media-index .vtitle{font-size:18px;line-height:1.6;font-weight:600}
.media-index .vmeta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin-top:12px}
.media-index .vid-allwrap{margin-top:32px}.media-index .vid-all{color:var(--navy)}
.media-index .ccard:hover .cttl,.media-index .bcard:hover .btitle,.media-index .mrow-main:hover .mttl,.media-index .vcard:hover .vtitle{color:var(--navy);text-decoration:underline;text-underline-offset:4px}
@media(max-width:1000px){.media-index .vid-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-index .ccard .cttl{font-size:18px}}
@media(max-width:720px){.media-index .wrap{padding-inline:20px}.media-index .media-banner .wrap{min-height:236px;padding-block:32px}.media-index .media-banner h1{font-size:34px}.media-index .media-banner p{font-size:14px}.media-index .media-tabs a{font-size:14px;min-height:56px}.media-index .media-catalog{padding-block:24px 48px}.media-index .media-catalog h2{font-size:20px}.media-index .media-search{flex-basis:100%;max-width:none}.media-index .case-grid,.media-index .vid-grid{grid-template-columns:minmax(0,1fr)}.media-index .mlist .mrow-main{grid-template-columns:minmax(0,1fr) auto;gap:8px}.media-index .moutlet{grid-column:1;grid-row:1}.media-index .mdate{grid-column:2;grid-row:1}.media-index .mttl{grid-column:1/-1;grid-row:2;font-size:16px}.media-index .btitle{font-size:18px}.media-index .vmeta{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.media-index .media-masthead::before{transform:none}}
.media-index .story-route{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin-bottom:16px}.media-index .route-arrow{font-size:20px;color:var(--navy)}
.media-index .story-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:24px;font-size:12px;line-height:1.7}.media-index .story-document{color:var(--navy)}.media-index .story-audience{color:var(--muted)}.media-index .story-open{margin-inline-start:auto;color:var(--muted)}
.media-index .blog-summary{font-size:14px;color:var(--muted);line-height:1.8;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.media-index .blog-tags{display:block;font-size:12px;line-height:1.8;color:var(--muted);margin-top:12px}.media-index-blog .bfoot{display:none}
.media-index .media-filter-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:24px}.media-index .media-filter-chips button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;min-height:44px;padding:8px 16px;border-radius:8px;cursor:pointer;text-align:start}.media-index .media-filter-chips button[aria-pressed=true]{background:var(--navy);color:white}.media-index .media-filter-chips button:hover{background:#e8edf6;color:var(--navy)}
.media-index .media-tools select{font:inherit;font-size:14px;max-width:100%;min-width:0;min-height:48px;border:1px solid var(--line);border-radius:8px;background:white;padding:8px 12px}.media-index .media-loaded-count{order:4;flex-basis:100%}
.media-index .media-results{min-width:0}.media-index .media-more{grid-column:1/-1}
@media(max-width:720px){.media-index .media-tools select{flex:1}.media-index .story-foot{margin-top:20px}.media-index .story-route{font-size:12px}}

.media-index .cttl,.media-index .btitle,.media-index .mttl,.media-index .vtitle{overflow-wrap:anywhere}
.media-index .media-tabs a{text-align:center;padding-inline:6px;overflow-wrap:anywhere}
.media-index .media-language-note{display:block;font-size:12px;color:var(--muted);margin-block:8px}
html[dir="rtl"] .media-index .media-masthead::before{background:linear-gradient(270deg,rgba(10,26,49,.88),rgba(10,26,49,.55) 40%,rgba(10,26,49,.08)),var(--media-art) var(--art-position)/cover no-repeat}
html[dir="rtl"] .media-index .media-eyebrow,html[dir="rtl"] .media-index .media-banner h1{letter-spacing:normal}
html[dir="rtl"] .media-index .media-catalog{text-align:start}
.media-index .media-banner h1,.media-index .media-banner p{min-width:0;max-width:100%;overflow-wrap:anywhere}
@media(max-width:720px){.media-index .media-tools select{flex:1 1 100%;width:100%}.media-index .media-tabs a{font-size:13px;line-height:1.5;padding:8px 4px;word-break:normal}}
html:lang(ja) .media-index .media-banner p{word-break:normal;text-wrap:balance}

.media-index-cases a.ccard{padding-block:18px}
.media-index-cases .ccard .story-route{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 6px;line-height:1.4;font-size:12px}
.media-index-cases .ccard .route-arrow{font-size:16px;line-height:1}
.media-index-cases .ccard .cttl{line-height:1.4}
.media-index-cases .ccard .cdesc{margin-top:4px;line-height:1.6}
.media-index-cases .ccard .story-foot{margin-top:8px;line-height:1.5}

.media-index .media-tabs a[aria-current]{color:var(--media-accent);background:#fff;isolation:isolate}
.media-index .media-tabs a[aria-current]::before{content:"";position:absolute;inset:4px;border-radius:6px;background:var(--media-tint);z-index:-1}
.media-index .media-tabs a[aria-current]::after{display:none}
.media-index:is(.media-index-cases,.media-index-blog) .media-filter-chips button[aria-pressed=true],.media-index:is(.media-index-cases,.media-index-blog) .media-filter-chips button:hover{background:var(--media-tint);color:var(--media-accent)}
.media-index-cases .ccard .story-route,.media-index-cases .ccard .route-arrow,.media-index-blog .bchip{color:var(--media-accent)}

.media-index .media-toolbar{padding-block:16px 12px}
.media-index .media-toolbar .media-tools{margin-bottom:0;gap:8px 12px}
.media-index .media-toolbar .media-loaded-count{color:#fff;text-shadow:0 1px 3px #0008}
.media-index .media-catalog{padding-top:20px}

.media-index .media-tabs a:first-child{border-start-start-radius:8px;border-end-start-radius:8px}
.media-index .media-tabs a:last-child{border-start-end-radius:8px;border-end-end-radius:8px}

.media-index .media-controls-wrap{padding-bottom:16px}
.media-index .media-banner .media-tabs{position:relative;padding:12px;border:1px solid transparent;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.07));backdrop-filter:blur(20px) saturate(110%);-webkit-backdrop-filter:blur(20px) saturate(110%);box-shadow:inset 0 1px 0 #ffffff30,0 4px 16px #0a1a310d}
.media-index .media-controls .media-tabs .wrap{padding:0}
.media-index .media-controls .media-toolbar{padding:12px 0 0}
.media-index .media-controls .media-loaded-count{color:#fff;text-shadow:0 1px 3px #000b}
@supports not (backdrop-filter:blur(1px)){.media-index .media-banner .media-tabs{background:rgba(255,255,255,.9)}}
@media(prefers-reduced-transparency:reduce){.media-index .media-banner .media-tabs{background:#f1f3f6;backdrop-filter:none;-webkit-backdrop-filter:none}}

.media-index .media-banner .media-tabs::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.85),rgba(255,255,255,.12) 28%,rgba(255,255,255,.02) 52%,rgba(255,255,255,.45) 78%,rgba(255,255,255,.14));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}


.media-index .media-controls .media-tabs{padding-bottom:4px;background:var(--media-tint);border-radius:8px}

.media-index .media-banner .media-accessible-title,.media-index .media-banner p{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.media-index .media-banner .wrap{padding-block:24px;gap:8px}
.media-index .media-banner .media-tabs{background:transparent;width:min(100%,520px)}
.media-index .media-banner .media-tabs .wrap{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-height:0;padding:0}
.media-index .media-banner .media-tabs a{flex:none;justify-content:flex-start;min-height:36px;padding:2px 0;border:0;border-radius:0;background:transparent;color:#ffffffbd;font-size:20px;line-height:1.3;font-weight:400;text-align:start;text-shadow:0 1px 4px #0005}
.media-index .media-banner .media-tabs a:hover{background:transparent;color:#fff}
.media-index .media-banner .media-tabs a[aria-current]{background:transparent;color:var(--media-tint);font-size:34px;font-weight:700}
.media-index .media-banner .media-tabs a::before,.media-index .media-banner .media-tabs a::after{display:none}
.media-index .media-controls .media-toolbar{padding:0}
@media(max-width:720px){
.media-index .media-banner .wrap{min-height:180px;padding-block:24px}
.media-index .media-banner .media-tabs{width:100%}
.media-index .media-banner .media-tabs .wrap{flex-direction:row;gap:12px}
.media-index .media-banner .media-tabs a{flex:1;min-width:0;min-height:56px;font-size:13px;align-items:center;justify-content:center;text-align:center;overflow-wrap:anywhere}
.media-index .media-banner .media-tabs a[aria-current]{font-size:17px}
}

@media(max-width:720px){
.media-index .media-banner .media-tabs .wrap{overflow-x:auto;gap:20px;justify-content:flex-start;scrollbar-width:none}
.media-index .media-banner .media-tabs a{flex:0 0 auto;white-space:nowrap;overflow-wrap:normal;color:#fff}
html .media-index .media-masthead::before,html[dir="rtl"] .media-index .media-masthead::before{background:linear-gradient(rgba(10,26,49,.64),rgba(10,26,49,.64)),var(--media-art) var(--art-position)/cover no-repeat}
}

.media-index .media-banner .media-tabs .wrap::-webkit-scrollbar{display:none}

@media(min-width:721px){.media-index .media-banner .media-tabs a[aria-current]{margin-bottom:10px}}

.media-index .media-banner .media-tabs .wrap{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px;overflow:visible}
.media-index .media-banner .media-tabs a{flex:none;justify-content:flex-start;text-align:start;min-height:36px;white-space:normal;color:rgba(255,255,255,.82);transition:color .18s ease}
.media-index .media-banner .media-tabs a:nth-child(3){color:rgba(255,255,255,.64)}
.media-index .media-banner .media-tabs a:nth-child(4){color:rgba(255,255,255,.46)}
.media-index .media-banner .media-tabs a:hover,.media-index .media-banner .media-tabs a:focus-visible{color:#fff}
.media-index .media-banner .media-tabs a[aria-current]{color:var(--media-tint);font-size:34px;font-weight:700;margin-block:4px}
.media-index .media-banner>.wrap{min-height:264px}
@media(max-width:720px){.media-index .media-banner .media-tabs a{font-size:16px;min-height:32px}.media-index .media-banner .media-tabs a[aria-current]{font-size:28px}.media-index .media-banner>.wrap{min-height:244px}}
@media(prefers-reduced-motion:reduce){.media-index .media-banner .media-tabs a{transition:none}}

.media-index .media-banner .media-tabs a:first-child{color:rgba(255,255,255,.64)}
.media-index .media-banner .media-tabs a[aria-current]{color:var(--media-tint)}
.media-index .media-banner .media-tabs a:hover,.media-index .media-banner .media-tabs a:focus-visible{color:#fff}

.media-index .media-banner .media-tabs{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.07));padding:12px;border-radius:12px;box-sizing:border-box}
.media-index .media-banner .media-tabs .wrap{padding:0}
.media-index .media-controls{padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

.media-index .media-banner .media-tabs{width:min(100%,280px);background:linear-gradient(135deg,color-mix(in srgb,var(--media-tint) 5%,transparent),color-mix(in srgb,var(--media-accent) 2%,transparent))}

.media-index .media-banner .media-tabs .wrap{position:relative;height:176px;overflow:hidden;display:block;mask-image:linear-gradient(transparent,#000 10%,#000 85%,transparent)}
.media-index .media-banner .media-tabs a{position:absolute;inset-inline:0;height:44px;min-height:44px;margin:0;display:flex;align-items:center}
.media-index .media-banner .media-tabs a:nth-child(1){top:0}
.media-index .media-banner .media-tabs a:nth-child(2){top:44px}
.media-index .media-banner .media-tabs a:nth-child(3){top:88px}
.media-index .media-banner .media-tabs a:nth-child(4){top:132px}
.media-index .media-banner .media-tabs a[aria-current]{margin:0}

.media-index .media-banner .media-tabs{border:0;border-radius:0;box-shadow:none;padding-block:22px;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.media-index .media-banner .media-tabs::before{display:none}
.media-index .media-banner .media-tabs{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;mask-image:none}
.media-index .media-masthead::after{content:"";position:absolute;inset-block:0;inset-inline-start:max(28px,calc((100% - 1120px)/2 + 28px));width:280px;max-width:calc(100% - 56px);background:linear-gradient(135deg,color-mix(in srgb,var(--media-tint) 5%,transparent),color-mix(in srgb,var(--media-accent) 2%,transparent));backdrop-filter:blur(20px) saturate(110%);-webkit-backdrop-filter:blur(20px) saturate(110%);pointer-events:none;z-index:-1}
@media(max-width:720px){.media-index .media-masthead::after{inset-inline-start:16px;max-width:calc(100% - 32px)}}
.media-index .media-controls .media-toolbar{padding-inline:0}
.media-index .media-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.media-index .media-search{grid-column:1/-1;max-width:none;min-width:0;background:#fff;border-color:transparent;box-shadow:0 4px 18px #06152b16}
.media-index .media-search:focus-within{outline:2px solid var(--media-tint);outline-offset:3px}
.media-index .media-tools select{width:100%;background:#fffffff0;border-color:transparent}
.media-index .media-loaded-count{grid-column:1/-1;margin-top:4px;font-size:12px;letter-spacing:.02em}
@media(min-width:901px){
.media-index .media-masthead{display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:56px;align-items:center;padding-inline:max(28px,calc((100% - 1120px)/2 + 28px));min-height:320px}
.media-index .media-banner>.wrap{padding-inline:0;min-height:320px}
.media-index .media-controls-wrap{width:100%;max-width:560px;padding:40px 0 24px;box-sizing:border-box;align-self:end;margin-inline:0;margin-bottom:24px}
}
@media(max-width:900px){.media-index .media-controls-wrap{padding-bottom:24px}.media-index .media-tools select{font-size:13px;padding-inline:8px}}
@media(max-width:600px){.media-index .media-tools{grid-template-columns:minmax(0,1fr)}.media-index .media-tools select{font-size:14px;padding-inline:12px}.media-index .media-controls-wrap{padding-inline:16px}}
.media-index .media-tools select{order:0}
.media-index .media-search{order:1}
.media-index .media-loaded-count{order:2}

.media-index .media-outgoing-art{position:absolute;inset:-24px -48px;z-index:-2;pointer-events:none}
.media-index .media-masthead.media-art-enter::before{animation:media-art-arrive 620ms cubic-bezier(.22,.61,.36,1) both}
@keyframes media-art-arrive{from{opacity:0;transform:translate(calc(var(--media-art-enter-x,48px) * var(--media-art-dir,1)),var(--media-scroll,0px))}to{opacity:1;transform:translate(0,var(--media-scroll,0px))}}
@media(prefers-reduced-motion:reduce){.media-index .media-masthead.media-art-enter::before{animation:none}}

.media-index .media-tools{position:relative}
.media-index .media-count-outgoing{position:absolute;pointer-events:none;color:#fff;text-shadow:0 1px 3px #000b;font-size:12px;letter-spacing:.02em;line-height:inherit}
.media-index .media-banner .media-tabs a:not([aria-current]){color:rgba(255,255,255,.38);filter:blur(.65px);transition:color .18s ease,filter .18s ease}
.media-index .media-banner .media-tabs a:nth-child(4):not([aria-current]){color:rgba(255,255,255,.24);filter:blur(1px)}
.media-index .media-banner .media-tabs a:not([aria-current]):hover,.media-index .media-banner .media-tabs a:not([aria-current]):focus-visible{color:rgba(255,255,255,.9);filter:none}
.media-index .media-banner .media-tabs a[aria-current]{filter:none}

.media-index .media-banner .media-tabs a:not([aria-current]){filter:none;color:rgba(255,255,255,.46)}
.media-index .media-banner .media-tabs a:nth-child(4):not([aria-current]){filter:none;color:rgba(255,255,255,.28)}
.media-index .media-banner .media-tabs a:not([aria-current]):hover,.media-index .media-banner .media-tabs a:not([aria-current]):focus-visible{color:rgba(255,255,255,.9)}
.media-index .media-masthead::after{mask-image:linear-gradient(to right,transparent,#000 7%,#000 90%,transparent)}
.media-index .media-intro{margin:0 0 20px;color:rgba(255,255,255,.9);font-size:16px;line-height:1.6;text-shadow:0 1px 5px #07182b80;max-width:42ch;text-wrap:pretty}
@media(max-width:600px){.media-index .media-intro{font-size:14px;margin-bottom:16px}}

.media-index .media-masthead{display:block;padding-inline:0;min-height:0}
.media-index .media-masthead::after{display:none}
.media-index .media-banner>.wrap{min-height:0;padding:28px 28px 20px;gap:16px}
html[lang] .media-index .media-banner .media-tabs{width:100%;padding:0;mask-image:none}
.media-index .media-banner .media-tabs .wrap{display:flex;flex-direction:row;height:auto;gap:6px;padding:0;min-height:0;overflow-x:auto;mask-image:none}
html[lang] .media-index .media-banner .media-tabs a{position:relative;inset:auto;flex:1 0 auto;justify-content:center;height:48px;min-height:48px;padding:0 20px;margin:0;font-size:16px;line-height:1.3;white-space:nowrap;filter:none;color:rgba(255,255,255,.72);border-radius:8px;background:rgba(255,255,255,.09)}
html[lang] .media-index .media-banner .media-tabs a[aria-current]{font-size:16px;font-weight:700;color:var(--media-accent);background:var(--media-tint)}
.media-index .media-controls-wrap{width:auto;max-width:1120px;margin:0 auto;padding:0 28px 28px;box-sizing:border-box}
.media-index .media-controls{max-width:640px;margin-inline-start:auto}
.media-index .media-intro{font-size:16px;margin-bottom:16px;max-width:none}
@media(max-width:720px){.media-index .media-banner>.wrap{padding:24px 16px 16px}html[lang] .media-index .media-banner .media-tabs a{padding-inline:16px;font-size:14px}html[lang] .media-index .media-banner .media-tabs a[aria-current]{font-size:14px}.media-index .media-controls-wrap{padding:0 16px 24px}}

.media-index .media-bottom-tabs{max-width:1120px;margin:0 auto;padding:0 28px}
.media-index .media-bottom-tabs .media-tabs{background:none;padding:0}
.media-index .media-bottom-tabs .media-tabs .wrap{display:flex;gap:6px;padding:0;height:auto;overflow-x:auto;mask-image:none}
html[lang] .media-index .media-bottom-tabs .media-tabs a{position:relative;inset:auto;flex:1 0 auto;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;margin:0;font-size:16px;white-space:nowrap;filter:none;color:rgba(255,255,255,.8);background:rgba(255,255,255,.12);border:0;border-radius:8px 8px 0 0;text-decoration:none}
html[lang] .media-index .media-bottom-tabs .media-tabs a[aria-current]{font-weight:700;color:var(--media-accent);background:var(--media-tint)}
.media-index .media-bottom-tabs .media-tabs a::before,.media-index .media-bottom-tabs .media-tabs a::after{display:none}
@media(max-width:720px){.media-index .media-bottom-tabs{padding-inline:16px}html[lang] .media-index .media-bottom-tabs .media-tabs a{padding-inline:16px;font-size:14px}}
.media-index .media-catalog{border-top:4px solid var(--media-tint)}

.media-index .media-catalog>.media-controls-wrap{padding-top:20px;padding-bottom:20px}
.media-index .media-catalog .media-loaded-count{color:var(--muted);text-shadow:none}
.media-index .media-catalog .media-search,.media-index .media-catalog .media-tools select{border-color:var(--line)}
.media-index .media-banner>.media-intro{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;max-width:1064px;margin:0 auto;padding:0 28px 28px;box-sizing:border-box}
.media-index .media-banner .media-accessible-title{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip-path:none;white-space:normal;font-size:34px;line-height:1.25;color:#fff}
.media-index .media-banner>.wrap{gap:12px;padding-bottom:10px}
@media(max-width:720px){.media-index .media-banner .media-accessible-title{font-size:28px}}
.media-index .media-bottom-tabs .media-tabs{position:relative;padding:6px 6px 0;border:1px solid rgba(255,255,255,.18);border-bottom:0;border-radius:14px 14px 0 0;background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035));backdrop-filter:blur(24px) saturate(110%);-webkit-backdrop-filter:blur(24px) saturate(110%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);overflow:hidden}
.media-index .media-bottom-tabs .media-tabs::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;padding:1px;background:linear-gradient(120deg,#ffffff80,#ffffff08 35%,#ffffff05 65%,#ffffff40);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.media-index .media-bottom-tabs .media-tabs{overflow:visible}
.media-index .media-bottom-tabs .media-tabs .wrap{overflow:visible;align-items:flex-end}
html[lang] .media-index .media-bottom-tabs .media-tabs a{height:48px;min-height:48px;box-sizing:border-box;transition:height .36s cubic-bezier(.22,.61,.36,1),background-color .36s ease,color .36s ease,box-shadow .36s ease}
html[lang] .media-index .media-bottom-tabs .media-tabs a[aria-current]{height:55px;box-shadow:0 -3px 10px #07182b12}
@media(max-width:720px){.media-index .media-bottom-tabs .media-tabs .wrap{overflow-x:auto;padding-top:7px;margin-top:-7px}}
@media(prefers-reduced-motion:reduce){html[lang] .media-index .media-bottom-tabs .media-tabs a{transition:none}}
.media-index .media-bottom-tabs .media-tabs .wrap{height:48px;min-height:48px}
.media-index .media-bottom-tabs .media-tabs .wrap{gap:0}
html[lang] .media-index .media-bottom-tabs .media-tabs a{border-radius:0}
html[lang] .media-index .media-bottom-tabs .media-tabs a:first-child{border-start-start-radius:8px}
html[lang] .media-index .media-bottom-tabs .media-tabs a:last-child{border-start-end-radius:8px}
.media-index .media-bottom-tabs .media-tabs{padding:0;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.media-index .media-bottom-tabs .media-tabs::before{display:none}

.media-index .media-bottom-tabs .media-tabs{position:relative;isolation:isolate;padding:4px 4px 0;background:var(--media-tint);border-radius:12px 12px 0 0}
.media-index .media-bottom-tabs .media-tabs .wrap{position:relative;z-index:1;height:55px;min-height:55px}
.media-index .media-tab-wash{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none}

.media-index .media-bottom-tabs .media-tabs{--media-frame-color:var(--media-tint);background:none}
.media-index .media-bottom-tabs .media-tabs::after,.media-index .media-tab-wash{content:"";position:absolute;inset:0;padding:4px 4px 0;box-sizing:border-box;border-radius:inherit;pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.media-index .media-bottom-tabs .media-tabs::after{background:var(--media-frame-color);z-index:-1}
html[lang] .media-index .media-bottom-tabs .media-tabs a,html[lang] .media-index .media-bottom-tabs .media-tabs a[aria-current]{height:48px;min-height:48px;box-shadow:none;transition:background-color .36s ease,color .36s ease}
.media-index .media-bottom-tabs .media-tabs .wrap{height:48px;min-height:48px;padding-top:0;margin-top:0;gap:0}
html[lang] .media-index .media-bottom-tabs .media-tabs a{isolation:isolate}
html[lang] .media-index .media-bottom-tabs .media-tabs a[aria-current]::before{display:block;content:"";position:absolute;inset:-4px 0 0;background:inherit;border-radius:0;z-index:-1;pointer-events:none}
html[lang] .media-index .media-bottom-tabs .media-tabs a:first-child[aria-current]::before{inset-inline-start:-4px;border-start-start-radius:12px}
html[lang] .media-index .media-bottom-tabs .media-tabs a:last-child[aria-current]::before{inset-inline-end:-4px;border-start-end-radius:12px}
html[lang] .media-index .media-bottom-tabs .media-tabs a:not([aria-current]){background:rgba(16,29,47,.66);color:rgba(255,255,255,.8);font-weight:500;text-shadow:none}
html[lang] .media-index .media-bottom-tabs .media-tabs a:not([aria-current]):hover{background:rgba(35,51,73,.84);color:#fff}
html[lang] .media-index .media-bottom-tabs .media-tabs a:not([aria-current]):focus-visible{background:rgba(35,51,73,.9);color:#fff;outline:2px solid var(--media-tint);outline-offset:-4px}
.media-index .media-banner>.wrap{max-width:1120px;width:100%;box-sizing:border-box;margin-inline:auto;padding:48px 28px 16px;gap:14px}
.media-index .media-banner>.media-intro{max-width:1120px;width:100%;box-sizing:border-box;margin-inline:auto;padding:0 28px 48px}
@media(max-width:720px){.media-index .media-banner>.wrap{padding:32px 16px 12px;gap:12px}.media-index .media-banner>.media-intro{padding:0 16px 32px}}
@media(min-width:901px){
.media-index .media-controls{max-width:none}
.media-index .media-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2.4fr)}
.media-index .media-search{grid-column:3;grid-row:1}
.media-index .media-tools select{grid-row:1}
.media-index .media-loaded-count{grid-column:3;grid-row:2}
}
.media-index .media-search,.media-index .media-tools select{box-shadow:none}

.media-back-top{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:50;width:44px;height:44px;padding:0;border:1px solid #dce1e8;border-radius:50%;background:#fffffff2;color:#25354b;font:24px/1 system-ui;cursor:pointer;box-shadow:none}
.media-back-top[hidden]{display:none}
.media-back-top:hover{background:#f0f3f7}
.media-back-top:focus-visible{outline:2px solid #25354b;outline-offset:3px}

.media-index .media-eyebrow{display:flex;align-items:center;gap:0;font-size:12px;font-weight:600;letter-spacing:.04em}
.media-index .media-list-back{display:inline-flex;align-items:center;min-height:32px;color:#fff;text-decoration:none;margin-inline-end:14px;padding-inline-end:14px;position:relative;letter-spacing:normal}
.media-index .media-list-back::after{content:"";position:absolute;inset-inline-end:0;top:50%;height:14px;transform:translateY(-50%);border-inline-end:1px solid #ffffff55}
.media-index .media-list-back:hover{text-decoration:underline;text-underline-offset:4px}
.media-index .media-banner>.wrap{padding-top:16px;padding-bottom:12px;gap:60px}
.media-index .media-list-back{min-height:44px}
.media-index .media-banner .media-accessible-title{font-size:46px;font-weight:650;line-height:1.2;letter-spacing:-.045em}
.media-index .media-banner>.media-intro{font-size:15px;line-height:1.8;padding-bottom:48px}
@media(max-width:1000px){.media-index .media-banner .media-accessible-title{font-size:40px}}
@media(max-width:720px){.media-index .media-banner>.wrap{padding-top:8px;padding-bottom:12px;gap:32px}.media-index .media-banner .media-accessible-title{font-size:34px}.media-index .media-banner>.media-intro{font-size:14px;padding-bottom:32px}}
.media-index .media-more{width:fit-content;min-height:46px;box-sizing:border-box;margin:28px auto 0;padding:12px 24px;border:1px solid #d7e2f2;border-radius:999px;background:#fff;color:var(--navy);font-size:13px;font-weight:650;line-height:1.5;box-shadow:none;transition:background-color .18s ease,border-color .18s ease}
.media-index .media-more:hover{background:#f4f7fb;border-color:#b8c8df}
.media-index .media-more{background:var(--media-tint);color:var(--media-accent);border-color:color-mix(in srgb,var(--media-accent) 22%,var(--media-tint))}
.media-index .media-more:hover{background:color-mix(in srgb,var(--media-accent) 8%,var(--media-tint));border-color:color-mix(in srgb,var(--media-accent) 40%,var(--media-tint))}

.media-index .media-bottom-tabs{max-width:none;background:#fff;padding-inline:max(28px,calc((100% - 1120px)/2 + 28px))}
.media-index .media-bottom-tabs .media-tabs{padding:0;border:0;border-radius:0;background:#fff}
.media-index .media-bottom-tabs .media-tabs::after,.media-index .media-bottom-tabs .media-tabs::before{display:none}
.media-index .media-bottom-tabs .media-tabs .wrap{height:60px;min-height:60px;border-bottom:1px solid #e2e6ed;box-sizing:border-box}
html[lang] .media-index .media-bottom-tabs .media-tabs a,html[lang] .media-index .media-bottom-tabs .media-tabs a[aria-current]{height:60px;min-height:60px;padding:0 16px;border-radius:0;background:transparent;color:#626d7e;font-size:15px;font-weight:500;flex:1 0 0;box-shadow:none}
html[lang] .media-index .media-bottom-tabs .media-tabs a[aria-current]{color:var(--media-accent);background:var(--media-tint);font-weight:700}
html[lang] .media-index .media-bottom-tabs .media-tabs a::before,html[lang] .media-index .media-bottom-tabs .media-tabs a[aria-current]::before{display:none}
html[lang] .media-index .media-bottom-tabs .media-tabs a::after{display:block;content:"";position:absolute;inset:auto 24% -1px;height:2px;background:var(--media-accent);opacity:0;transform:scaleX(.6);transition:opacity .2s ease,transform .2s ease}
html[lang] .media-index .media-bottom-tabs .media-tabs a[aria-current]::after{opacity:1;transform:scaleX(1)}
html[lang] .media-index .media-bottom-tabs .media-tabs a:not([aria-current]):hover,html[lang] .media-index .media-bottom-tabs .media-tabs a:not([aria-current]):focus-visible{color:var(--media-accent);background:var(--media-tint)}
.media-index .media-catalog{border-top:0}
@media(max-width:720px){.media-index .media-bottom-tabs{padding-inline:16px}.media-index .media-bottom-tabs .media-tabs .wrap{height:56px;min-height:56px}html[lang] .media-index .media-bottom-tabs .media-tabs a,html[lang] .media-index .media-bottom-tabs .media-tabs a[aria-current]{height:56px;min-height:56px;font-size:14px;flex:1 0 auto}}
html[lang] .media-index .media-bottom-tabs .media-tabs a:not([aria-current]){background:transparent;color:#626d7e;font-weight:500}
html[lang] .media-index .media-bottom-tabs .media-tabs a:not([aria-current]):hover,html[lang] .media-index .media-bottom-tabs .media-tabs a:not([aria-current]):focus-visible{background:var(--media-tint);color:var(--media-accent)}
.media-index .media-bottom-tabs{background:transparent}

html[lang] .media-index .media-bottom-tabs .media-tabs a::after{display:none}
.media-index .media-tab-indicator{position:absolute;bottom:0;left:0;height:100%;background:var(--media-tint);pointer-events:none;z-index:-1}
.media-index .media-tab-indicator::after{content:"";position:absolute;bottom:0;inset-inline:24%;height:2px;background:var(--media-accent);transition:background-color 240ms ease}
.media-index .media-tabs-animated .media-tab-indicator{transition:transform 240ms ease,width 240ms ease,background-color 240ms ease}
html[lang] .media-index .media-bottom-tabs .media-tabs.media-tabs-animated a,html[lang] .media-index .media-bottom-tabs .media-tabs.media-tabs-animated a:not([aria-current]):hover,html[lang] .media-index .media-bottom-tabs .media-tabs.media-tabs-animated a:not([aria-current]):focus-visible{background:transparent}
html[lang] .media-index .media-bottom-tabs .media-tabs a{transition:color 160ms ease,background-color 160ms ease}
@media(prefers-reduced-motion:reduce){.media-index .media-tabs-animated .media-tab-indicator,.media-index .media-tab-indicator::after{transition:none}}

.media-index .media-catalog{--media-panel-radius:16px;--media-panel-border:#e3e9f2;--media-panel-inset:20px;--media-control-radius:10px;--line:#eef1f6;padding:0}
.media-index .media-search-region{padding-block:24px 16px}
.media-index .media-search-region .media-controls-wrap{padding-block:0;margin-bottom:0}
.media-index .media-search-region .media-tools{gap:12px;margin:0}
.media-index .media-content-region{--media-side-width:168px;--media-column-gap:32px;padding-bottom:64px}
.media-index .media-loaded-count{grid-column:1/-1;grid-row:auto;margin-top:0;text-align:right}
.media-index :is(.media-search-region .media-tools,.media-browse){border:1px solid var(--media-panel-border);border-radius:var(--media-panel-radius);padding:var(--media-panel-inset);background:#fff;box-shadow:none;min-width:0}
.media-index .media-search-region .media-tools{padding-block:16px;background:color-mix(in srgb,var(--media-tint) 24%,#fff)}
.media-index .media-search-region :is(.media-search,.media-tools select){border-color:var(--media-panel-border);border-radius:var(--media-control-radius);background:#fff}
.media-index .media-content-region[data-filters="true"] .media-browse{display:grid;grid-template-columns:var(--media-side-width) minmax(0,1fr);gap:var(--media-column-gap)}
.media-index .media-content-region[data-filters="true"] .media-filter-chips{flex-direction:column;align-self:start;margin:0}
.media-index .media-results :is(.blog-grid,.case-grid,.mlist){border-top:0}
.media-index .media-results :is(.bcard,.ccard):nth-child(1 of :not([hidden])),
.media-index .media-results .mrow2:nth-child(1 of :not([hidden])) .mrow-main{padding-top:0}
@media(min-width:721px){
  .media-index .mlist .mrow-main{grid-template-columns:110px minmax(0,1fr) 88px;column-gap:24px;align-items:start}
}
@media(max-width:900px){
  .media-index .media-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .media-index .media-search{grid-column:1/-1;grid-row:auto}
}
@media(max-width:720px){
  .media-index .media-catalog{--media-panel-inset:16px}
  .media-index-cases .ccard .cttl{text-wrap:balance}
  .media-index .media-search-region{padding-top:24px}
  .media-index .media-content-region{padding-bottom:48px}
  .media-index :is(.media-search-region,.media-content-region)>.wrap{padding-left:20px!important;padding-right:20px!important}
  .media-index .media-content-region[data-filters="true"] .media-browse{grid-template-columns:minmax(0,1fr);gap:20px}
  .media-index .media-content-region[data-filters="true"] .media-filter-chips{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;min-width:0}
  .media-index .media-filter-chips button{flex:none;white-space:nowrap}
}

/* 글 상자·검색 띠 — 2026-09-14 덮어쓰기 블록 10여 개(「콘텐츠 단위 상자」「뒤집기」「뒤집기 2」「시험」「테마 색 녹이기」 등)를
   최종 계산값 그대로 한 번씩만 적었다(2026-10-07 M01 정리 — 721px 이상 계산 스타일 전·후 동일 확인). */
.media-index .media-results :is(.bcard,.ccard,.mrow2,.vcard){border:0;border-radius:12px;background:#fff;box-shadow:0 1px 2px color-mix(in srgb,var(--media-accent) 12%,transparent),0 6px 16px color-mix(in srgb,var(--media-accent) 14%,transparent);transition:box-shadow .2s,transform .2s}
.media-index .media-results :is(.bcard,.ccard,.mrow2,.vcard):hover{background:#fff;border:0;outline:0;outline-offset:-1px;transform:translateY(-2px);box-shadow:0 2px 4px color-mix(in srgb,var(--media-accent) 14%,transparent),0 12px 28px color-mix(in srgb,var(--media-accent) 20%,transparent)}
@media(prefers-reduced-motion:reduce){.media-index .media-results :is(.bcard,.ccard,.mrow2,.vcard):hover{transform:none}}
.media-index .media-results :is(.blog-grid,.case-grid,.mlist){display:flex;flex-direction:column;gap:12px}
.media-index .media-results .vid-grid{gap:16px}
/* 분류 열: 흰 상자, 선택은 옅은 탭 색 */
.media-index .media-content-region[data-filters="true"] .media-filter-chips{border:0;border-radius:12px;background:#fff;padding:8px;gap:2px;position:sticky;top:16px;box-shadow:0 1px 2px color-mix(in srgb,var(--media-accent) 12%,transparent),0 6px 16px color-mix(in srgb,var(--media-accent) 14%,transparent);transition:box-shadow .2s,transform .2s}
.media-index .media-content-region[data-filters="true"] .media-filter-chips button{text-align:left;width:100%}
.media-index:is(.media-index-cases,.media-index-blog) .media-content-region[data-filters="true"] .media-filter-chips button[aria-pressed=true]{background:var(--media-tint);color:var(--media-accent);font-weight:600;border:0}
.media-index:is(.media-index-cases,.media-index-blog) .media-content-region[data-filters="true"] .media-filter-chips button:not([aria-pressed=true]):hover{background:color-mix(in srgb,var(--media-tint) 50%,#fff)}
/* 검색 띠(진한 탭 색)와 목록 바탕(옅은 탭 색)을 위·아래로 붙인 한 상자 */
.media-index .media-search-region{padding-block:24px 0}
.media-index .media-search-region .media-tools{border:0;border-radius:var(--media-panel-radius) var(--media-panel-radius) 0 0;background:var(--media-accent)}
.media-index .media-content-region .media-browse{background:color-mix(in srgb,var(--media-tint) 24%,#fff);border:0;border-radius:0 0 var(--media-panel-radius) var(--media-panel-radius);padding-top:var(--media-panel-inset)}
.media-index .media-search-region .media-count,.media-index .media-search-region .media-loaded-count{padding-bottom:4px;color:rgba(255,255,255,.85)}
.media-index .media-search-region .media-loaded-count b{color:#fff}
.media-index .media-search-region :is(.media-search,.media-tools select){border-color:transparent}
.media-index .media-search-region .media-search:focus-within,.media-index .media-search-region .media-tools select:focus-visible{border-color:#fff;outline:2px solid rgba(255,255,255,.45);outline-offset:0}
/* 탭 색: 작은 정보·누르는 것·재생 버튼 */
.media-index .media-results :is(.bchip,.moutlet,.story-route,.route-arrow,.story-document,.vmeta,.mdate,.bfoot){color:var(--media-accent)}
.media-index .ccard:hover .cttl,.media-index .bcard:hover .btitle,.media-index .mrow-main:hover .mttl,.media-index .vcard:hover .vtitle{color:var(--media-accent);text-decoration-color:color-mix(in srgb,var(--media-accent) 45%,#fff)}
.media-index .media-results .story-open,.media-index .vid-all,.media-index .media-more{color:var(--media-accent);font-weight:600}
.media-index .vplay{color:var(--media-accent)}
/* 블로그·에피소드: 맨 위 옅은 띠(분류/경로) + 흰 바탕 제목·요약·꼬리 */
.media-index-blog .media-results .bcard,.media-index-cases .media-results .ccard{padding:0;overflow:hidden}
.media-index-blog .media-results .bcard .bchip,.media-index-cases .media-results .ccard .story-route{display:flex;background:var(--media-tint);color:var(--media-accent);margin:0;padding:10px 22px;font-weight:600}
.media-index-blog .media-results .bcard .bchip{display:block}
.media-index-cases .media-results .ccard .route-arrow{color:var(--media-accent)}
.media-index-blog .media-results .bcard .btitle,.media-index-cases .media-results .ccard .cttl{background:#fff;color:var(--ink);margin:0;padding:16px 22px 0}
.media-index-blog .media-results .bcard:hover .btitle,.media-index-cases .media-results .ccard:hover .cttl{color:var(--media-accent);text-decoration-color:color-mix(in srgb,var(--media-accent) 45%,#fff)}
.media-index-blog .media-results .bcard .blog-summary,.media-index-cases .media-results .ccard .cdesc{margin:0;padding:10px 22px 0}
.media-index-cases .media-results .ccard .story-foot{margin:0;padding:10px 22px 16px}
/* 뉴스: 위 옅은 띠(매체명 왼쪽, 날짜 오른쪽) + 아래 제목 전체 폭 */
.media-index-press .media-results .mrow2{overflow:hidden}
.media-index-press .media-results .mrow2 .mrow-main{grid-template-columns:minmax(0,1fr) auto;column-gap:0;row-gap:0;padding:0;align-items:center}
.media-index-press .media-results .moutlet{grid-column:1;grid-row:1;background:var(--media-tint);color:var(--media-accent);font-size:13px;font-weight:600;padding:10px 22px}
.media-index-press .media-results .mdate{grid-column:2;grid-row:1;background:var(--media-tint);color:var(--media-accent);opacity:.8;padding:10px 22px 10px 0;text-align:right;white-space:nowrap}
.media-index-press .media-results .mttl{grid-column:1/-1;grid-row:2;padding:14px 22px 10px;font-size:17px;line-height:1.55}
.media-index-press .media-results .mopen{grid-column:1/-1;grid-row:3;text-align:right;padding:0 22px 16px}
/* 동영상: 사진은 그대로, 맨 아래 줄(날짜 · YouTube에서 보기)을 옅은 띠로 */
.media-index-videos .media-results .vcard{padding:0;overflow:hidden;display:flex;flex-direction:column}
.media-index-videos .media-results .vcard .vthumb{margin:12px 12px 0}
.media-index-videos .media-results .vcard .vbody{display:flex;flex-direction:column;flex:1;padding:0}
.media-index-videos .media-results .vcard .vtitle{display:block;padding:12px 16px 0}
.media-index-videos .media-results .vcard .vbody .vtitle{margin-bottom:14px}
.media-index-videos .media-results .vcard .vmeta{margin-top:auto;padding:10px 16px;background:var(--media-tint);color:var(--media-accent);font-weight:500}
.media-index-videos .media-results .vcard .vmeta time{color:var(--media-accent);opacity:.8}
.media-index-videos .media-results .vcard .vmeta .vyt{color:var(--media-accent)}
.media-index-videos .media-results .vcard .vmeta .vyt::after{content:" ↗"}
/* "자세히 보기": 상자 오른쪽 아래. 사이트 안 이동은 →, 유튜브는 ↗ */
.media-index .media-results :is(.bread,.mopen,.story-open){color:var(--media-accent);font-weight:600;font-size:12px}
.media-index .media-results :is(.bread,.mopen)::after{content:" →"}
html[dir="rtl"] .media-index .media-results :is(.bread,.mopen)::after{content:" ←"}
/* 블로그: 태그 줄(왼쪽)과 날짜·자세히 보기(오른쪽)를 같은 줄에 */
.media-index-blog .media-results .bcard{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
.media-index-blog .media-results .bcard :is(.bchip,.btitle,.blog-summary){grid-column:1/-1}
.media-index-blog .media-results .bcard .blog-tags{grid-column:1;margin:0;padding:10px 22px 16px}
.media-index-blog .media-results .bcard .bfoot{display:flex;justify-content:flex-end;grid-column:2;margin:0;padding:10px 22px 16px 12px}
.media-index-blog .media-results .bcard .bfoot>span:first-child:empty{display:none}
.media-index-blog .media-results .bcard .blog-tags:empty{display:block}
/* 아랍어(RTL) 페이지는 위 사진도 좌우로 뒤집는다(2026-09-15). 글이 오른쓱에 붙으니 사진의 초점도 왼쪽으로 가야 한다.
   transform 은 스크롤·진입 애니메이션이 쓰므로 건드리지 않고, 별도 속성 scale 로만 뒤집는다. */
html[dir="rtl"] .media-index .media-masthead::before{scale:-1 1}
html[dir="rtl"] .media-index .media-masthead{--media-art-dir:-1}

/* =====================================================================
   미디어 목록 4장 모바일·태블릿 가독성 (2026-10-01, T10) — 전부 ≤1024, 데스크톱 그대로.
   ===================================================================== */
@media(max-width:1024px){
  /* 원본(enko) 한글 병기가 영어 뒤에 띄어쓰기 없이 붙어 "Blog블로그" "online미성년자" 처럼 한 단어로 읽혔다 → 줄을 나눈다 */
  .media-index .media-eyebrow .i18n-sub{margin-inline-start:.45em}
  .media-index .media-banner .media-accessible-title .i18n-sub{display:block;font-size:.5em;font-weight:600;letter-spacing:0;margin-top:6px;color:rgba(255,255,255,.92)}
  .media-index .media-banner>.media-intro{color:#fff;font-size:16px;line-height:1.65}
  .media-index .media-intro .i18n-sub{display:block;margin-top:4px;color:rgba(255,255,255,.92);font-size:.94em}
  .media-index .media-results :is(.vtitle,.btitle,.cttl,.mttl) .i18n-sub{display:block;margin-top:4px;font-size:.84em;font-weight:500;line-height:1.5;color:#4f5a6c}
  .media-index .media-list-back{font-size:13px}
  /* 본문·보조 글자 */
  .media-index .media-results :is(.blog-summary,.cdesc){font-size:15px;line-height:1.65;color:#4f5a6c}
  .media-index .media-results :is(.bread,.mopen,.story-open){font-size:13px}
  .media-index .media-results .blog-tags{font-size:13px}
  .media-index-blog .media-results .bcard .bfoot{gap:12px;align-items:center}
  .media-index .media-filter-chips button{min-height:44px;font-size:15px}
  .media-index .vid-all{display:inline-flex;align-items:center;min-height:44px}
  .media-index .media-status{font-size:15px;line-height:1.6}
  .media-index .media-more{font-size:14px}
  /* 901~1024: 검색칸이 오른쪽 절반에만 있고 왼쪽이 비었다 → ≤900 과 같은 배치(검색 한 줄 전체) */
  .media-index .media-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .media-index .media-search{grid-column:1/-1;grid-row:auto}
  .media-index .media-tools select{grid-row:auto}
  .media-index .media-loaded-count{grid-column:1/-1;grid-row:auto}
}
/* 태블릿(721~1024): 왼쪽 분류 세로 열 + 1열 카드 → 분류는 위 한 줄, 카드는 2열 */
@media(min-width:721px) and (max-width:1024px){
  .media-index .media-content-region[data-filters="true"] .media-browse{grid-template-columns:minmax(0,1fr);gap:16px}
  .media-index .media-content-region[data-filters="true"] .media-filter-chips{flex-direction:row;flex-wrap:wrap;position:static}
  .media-index .media-content-region[data-filters="true"] .media-filter-chips button{width:auto}
  .media-index .media-results :is(.blog-grid,.case-grid,.mlist){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
  .media-index-blog .media-results .bcard,.media-index-cases .media-results .ccard{display:flex;flex-direction:column;align-items:stretch}
  .media-index-blog .media-results .bcard .bfoot,.media-index-cases .media-results .ccard .story-foot{margin-top:auto}
  .media-index-blog .media-results .bcard .blog-tags{padding-bottom:0}
  .media-index-blog .media-results .bcard .bfoot{justify-content:space-between;padding:10px 22px 16px}
}
/* 휴대폰 동영상: 1열 큰 카드 15장(약 7,600px) → 썸네일 왼쪽·제목 오른쪽 가로 카드 */
@media(max-width:560px){
  .media-index-videos .media-results .vcard{display:grid;grid-template-columns:132px minmax(0,1fr);column-gap:12px}
  .media-index-videos .media-results .vcard .vthumb{grid-column:1;grid-row:1;margin:12px 0 12px 12px;align-self:start}
  .media-index-videos .media-results .vcard .vbody{display:contents}
  .media-index-videos .media-results .vcard .vtitle{grid-column:2;grid-row:1;padding:12px 12px 0 0;margin-bottom:12px;font-size:15.5px;line-height:1.45}
  .media-index-videos .media-results .vcard .vmeta{grid-column:1/-1;grid-row:2;margin-top:0}
  .media-index .vplay{width:36px;height:36px}
}
@media(max-width:1024px){.media-index .vmeta .vyt .i18n-sub{margin-inline-start:.35em}}
/* 뉴스 띠: 날짜 칸만 opacity .8 이라 띠 배경이 두 색으로 끊겨 보였다 → 글자색으로만 옅게 */
@media(max-width:1024px){.media-index-press .media-results .mdate{opacity:1;color:color-mix(in srgb,var(--media-accent) 82%,#fff)}}
/* 좁은 휴대폰 동영상 가로 카드(2026-10-02 T10 후속: 320 까지) — 썸네일 폭 비례(최소 96px) */
@media(max-width:600px){
  .media-index-videos .media-results .vcard{grid-template-columns:minmax(96px,34%) minmax(0,1fr);column-gap:10px}
  .media-index-videos .media-results .vcard .vthumb{margin:10px 0 10px 10px}
  .media-index-videos .media-results .vcard .vtitle{padding:10px 10px 0 0;font-size:15px}
}

/* =====================================================================
   모바일 미디어 목록 공통 카드 시스템 (2026-10-07 M01) — ≤720 전용, 721 이상은 위 규칙 그대로.
   예전 ≤720·≤600·≤400 덮어쓰기(2026-10-01~02 T10)를 이 한 블록으로 다시 썼다.
   상단 ≈120px · 탭 48px(선택 아래 3px 막대) · 검색 44px · 분류 알약 36px(+터치 44px) ·
   흰 목록 상자 하나 + 구분선(카드별 그림자·색 띠 없음) · 메타 12.5 → 제목 16.5 굵게 2줄 → 요약 14.5 1줄 → ›
   ===================================================================== */
/* JS 가 넣는 모바일 전용 조각은 넓은 화면에서 숨긴다 */
@media(min-width:721px){
  .media-index :is(.media-chip-count,.media-more-count,.media-filter-open,.media-active-filters,.media-sheet,.media-flag,.media-skeleton){display:none!important}
}
@media(max-width:720px){
  .media-index{--m-border:#e3e9f2;--m-line:#eef1f6;--m-muted:#626d7e;--m-soft:#8a94a5}

  /* 1. 상단 이미지 영역 ≈120px: 돌아가기 줄 · 제목 26px · 소개 한 줄(넘치면 …) */
  .media-index .media-banner>.wrap{padding:2px 16px 0;gap:0}
  .media-index .media-eyebrow{font-size:12px}
  .media-index .media-list-back{min-height:44px}
  .media-index .media-banner .media-accessible-title{font-size:26px;font-weight:700;line-height:1.25;letter-spacing:-.03em}
  .media-index .media-banner .media-accessible-title .i18n-sub{font-size:13px;margin-top:2px}
  .media-index .media-banner>.media-intro{font-size:14px;line-height:1.5;margin-block:4px 14px;padding:0 16px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .media-index .media-banner>.media-intro:has(.i18n-sub){-webkit-line-clamp:2} /* 루트(영·한 병기)는 두 줄 */
  .media-index .media-intro .i18n-sub{margin-top:0;font-size:13px}

  /* 2. 탭 4칸 48px(긴 언어는 칸 안에서 줄바꿈해 늘어난다), 선택 탭 아래 3px 막대(흰 바탕). 고정(sticky)은 하지 않는다 — 탭이 overflow:hidden 인 상단 이미지 안에 있다 */
  .media-index .media-bottom-tabs{padding-inline:0;background:#fff}
  html[lang] .media-index .media-bottom-tabs .media-tabs .wrap{height:auto;min-height:48px;padding:0;gap:0;overflow:visible;border-bottom:1px solid var(--m-border);background:#fff}
  html[lang] .media-index .media-bottom-tabs .media-tabs a,
  html[lang] .media-index .media-bottom-tabs .media-tabs a[aria-current]{flex:1 1 0;min-width:0;height:auto;min-height:48px;padding:4px;box-sizing:border-box;flex-direction:column;gap:1px;background:transparent;color:var(--m-muted);font-size:14px;font-weight:500;line-height:1.2;white-space:normal;overflow-wrap:break-word;word-break:normal;line-break:strict;text-wrap:balance;text-align:center}
  html[lang] .media-index .media-bottom-tabs .media-tabs a:lang(ko){font-size:15px;word-break:keep-all}
  html[lang] .media-index .media-bottom-tabs .media-tabs a[aria-current]{color:var(--media-accent);font-weight:700}
  html[lang] .media-index .media-bottom-tabs .media-tabs a:not([aria-current]):is(:hover,:focus-visible){background:transparent;color:var(--media-accent)}
  html[lang] .media-index .media-bottom-tabs .media-tabs a[aria-current]::after{display:block;content:"";position:absolute;inset:auto 20% 0;height:3px;border-radius:3px 3px 0 0;background:var(--media-accent);opacity:1;transform:none}
  .media-index .media-bottom-tabs .media-tabs a .i18n-sub{font-size:11.5px;font-weight:500}
  .media-index .media-tab-indicator{display:none}

  /* 3. 검색 44px·16px. 상자 3중(진한 검색 띠·옅은 목록 상자·카드 그림자)을 걷어낸다 */
  .media-index .media-search-region{padding:12px 0 0}
  html body .media-index :is(.media-search-region,.media-content-region)>.wrap{padding-left:16px!important;padding-right:16px!important}
  .media-index .media-search-region .media-controls-wrap{padding:0;margin:0}
  .media-index .media-search-region .media-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;border:0;border-radius:0;background:transparent}
  .media-index .media-search-region .media-tools .media-search{order:1;flex:1 1 170px;min-width:0;height:44px;min-height:44px;box-sizing:border-box;padding:0 12px;padding-inline-start:38px;border:1px solid var(--m-border);border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%/18px}
  html[dir="rtl"] .media-index .media-search-region .media-tools .media-search{background-position:right 12px center}
  .media-index .media-search input{height:42px;min-height:42px;font-size:16px}
  .media-index .media-search-region .media-tools .media-search:focus-within{border-color:var(--media-accent);outline:2px solid color-mix(in srgb,var(--media-accent) 20%,#fff);outline-offset:0}
  .media-index .media-search-region .media-tools select{display:none}
  .media-index .media-search-region .media-loaded-count{order:4;flex-basis:100%;margin:0;padding:0;font-size:13px;line-height:1.5;color:var(--m-muted);text-align:start;text-shadow:none;letter-spacing:0}
  .media-index .media-search-region .media-loaded-count b{color:var(--media-accent)}

  /* 3-1. 에피소드 국가 필터: 버튼 하나 + 고른 값 칩(✕ 해제) + 바텀시트 */
  .media-index .media-filter-open{order:2;flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:1px solid var(--m-border);border-radius:12px;background:#fff;color:var(--media-accent);font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer}
  .media-index .media-filter-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--media-accent);color:#fff;font-size:11.5px}
  .media-index .media-active-filters{order:3;flex-basis:100%;display:flex;flex-wrap:wrap;gap:0 8px;margin-block:-4px}
  .media-index .media-active-chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--media-accent);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
  .media-index .media-active-chip::before{content:"";position:absolute;inset:5px 0;z-index:-1;border:1px dashed color-mix(in srgb,var(--media-accent) 40%,#fff);border-radius:999px;background:var(--media-tint)}
  .media-index .media-active-chip::after{content:"✕";font-size:12px}
  .media-index .media-sheet{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;justify-content:flex-end}
  .media-index .media-sheet-backdrop{position:absolute;inset:0;background:rgba(10,26,49,.45)}
  .media-index .media-sheet-panel{position:relative;max-height:85vh;overflow:auto;box-sizing:border-box;padding:4px 16px calc(16px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;background:#fff;box-shadow:0 -8px 24px rgba(10,26,49,.18);text-align:start}
  .media-index .media-sheet-panel:focus{outline:0}
  .media-index .media-sheet-head{display:flex;align-items:center;justify-content:space-between;min-height:52px}
  .media-index .media-sheet .media-sheet-title{margin:0;font-size:17px;font-weight:700;line-height:1.4;color:var(--ink)}
  .media-index .media-sheet-close{width:44px;height:44px;margin-inline-end:-10px;border:0;border-radius:10px;background:transparent;color:var(--m-muted);font-size:18px;cursor:pointer}
  .media-index .media-sheet-body{display:grid;gap:12px;padding:4px 0 16px}
  .media-index .media-sheet-field{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--m-muted)}
  .media-index .media-sheet-field select{width:100%;min-height:48px;box-sizing:border-box;padding:0 12px;border:1px solid var(--m-border);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:400}
  .media-index .media-sheet-done{width:100%;height:48px;border:0;border-radius:12px;background:var(--media-accent);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}

  /* 4. 분류 칩: 보이는 알약 36px + 위아래 4px 터치 여백(=44px). 줄바꿈(가로 스크롤 없음), 글 수 표시 */
  .media-index .media-content-region{padding-bottom:32px}
  .media-index .media-content-region[data-filters] .media-browse{display:block;margin:0;padding:0;border:0;border-radius:0;background:transparent}
  .media-index .media-content-region[data-filters="true"] .media-filter-chips{display:flex;flex-direction:row;flex-wrap:wrap;gap:0 8px;margin:4px 0 0;padding:0;position:static;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
  html[lang] .media-index .media-content-region[data-filters="true"] .media-filter-chips button{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:4px;flex:none;width:auto;height:44px;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#4f5a6c;font-size:14px;font-weight:500;white-space:nowrap}
  html[lang] .media-index .media-content-region[data-filters="true"] .media-filter-chips button::before{content:"";position:absolute;inset:4px 0;z-index:-1;border:1px solid var(--m-border);border-radius:999px;background:#fff}
  html[lang] .media-index .media-content-region[data-filters="true"] .media-filter-chips button[aria-pressed=true]{background:transparent;color:#fff;font-weight:700}
  html[lang] .media-index .media-content-region[data-filters="true"] .media-filter-chips button[aria-pressed=true]::before{border-color:var(--media-accent);background:var(--media-accent)}
  html[lang] .media-index .media-content-region[data-filters="true"] .media-filter-chips button:not([aria-pressed=true]):hover{background:transparent}
  html[lang] .media-index .media-content-region[data-filters="true"] .media-filter-chips button:not([aria-pressed=true]):hover::before{background:var(--media-tint)}
  .media-index .media-chip-count{font-size:12px;font-weight:500;color:var(--m-soft)}
  .media-index .media-filter-chips button[aria-pressed=true] .media-chip-count{color:#ffffffcc}

  .media-index .media-results .vtitle{font-size:17px;line-height:1.5} /* 동영상(카드 구성은 그대로): 예전 ≤720 크기 유지 */
  /* 5. 목록 = 흰 상자 하나 + 구분선 */
  .media-index .media-results{margin-top:8px}
  .media-index .media-results :is(.blog-grid,.case-grid,.mlist){display:block;gap:0;overflow:hidden;border:1px solid var(--m-border);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(10,42,94,.05),0 6px 16px rgba(10,42,94,.05)}
  .media-index .media-results :is(.blog-grid,.case-grid,.mlist):not(:has(> :not([hidden]))){display:none}
  html[lang] .media-index .media-results :is(a.bcard,a.ccard,.mrow2){display:block;margin:0;padding:0;overflow:visible;border:0;border-top:1px solid var(--m-line);border-radius:0;background:#fff;box-shadow:none;transform:none;transition:background-color .15s}
  html[lang] .media-index .media-results :is(a.bcard,a.ccard,.mrow2):nth-child(1 of :not([hidden])){border-top:0}
  html[lang] .media-index .media-results :is(a.bcard,a.ccard,.mrow2):hover{background:#f8fafc;box-shadow:none;transform:none}

  /* 6. 한 줄: 링크 전체가 grid, 오른쪽 › */
  html[lang] .media-index .media-results :is(a.bcard,a.ccard,a.mrow-main){display:grid;column-gap:0;row-gap:0;align-items:start;min-height:72px;box-sizing:border-box;padding:16px;color:var(--ink);text-decoration:none}
  /* 예전 「첫 글 위 여백 0」(:nth-child(1 of …)) 규칙을 모바일에서만 되돌린다 */
  html[lang] .media-index .media-results :is(.bcard,.ccard):nth-child(1 of :not([hidden])),
  html[lang] .media-index .media-results .mrow2:nth-child(1 of :not([hidden])) .mrow-main{padding-top:16px}
  html[lang] .media-index-blog .media-results a.bcard.media-lead:nth-child(1 of :not([hidden])){padding-top:18px}
  html[lang] .media-index .media-results :is(a.bcard,a.ccard,a.mrow-main)::after{content:"›";grid-row:1/8;align-self:center;justify-self:end;margin-inline-start:8px;font-size:22px;line-height:1;color:#b4bccb}
  /* 카드 방향(글 언어) 기준. :dir() 은 iOS<16.4 미지원(규칙 통째 무시) → 카드 자신의 dir 속성(media-content.js 가 붙임) 또는 문서 dir 로 판정 */
  html[lang] .media-index .media-results :is(a.bcard,a.ccard,a.mrow-main)[dir=rtl]::after,
  html[dir=rtl] .media-index .media-results :is(a.bcard,a.ccard,a.mrow-main):not([dir=ltr])::after{content:"‹"}
  html[lang] .media-index .media-results :is(.btitle,.cttl,.mttl){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:6px 0 0;padding:0;background:none;color:var(--ink);font-size:16.5px;font-weight:700;line-height:1.45;letter-spacing:-.01em;text-wrap:pretty}
  html[lang] .media-index .media-results :is(.bcard:hover .btitle,.ccard:hover .cttl,.mrow-main:hover .mttl){color:var(--ink);text-decoration:none}
  html[lang] .media-index .media-results :is(.blog-summary,.cdesc){display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin:4px 0 0;padding:0;font-size:14.5px;line-height:1.55;color:var(--m-muted)}
  html[lang] .media-index .media-results .media-language-note{grid-row:1;margin:0 0 4px;font-size:12px}
  html[lang] .media-index .media-results :is(.bread,.mopen,.story-open){display:none}

  /* 6-1. 블로그: 분류 배지 · 날짜 / 제목 / 요약 / 태그(낱개 칩, 태그 안에서 줄바꿈 금지) */
  html[lang] .media-index-blog .media-results a.bcard{grid-template-columns:auto minmax(0,1fr) auto}
  html[lang] .media-index-blog .media-results a.bcard>*{grid-column:1/3}
  html[lang] .media-index-blog .media-results .bcard .bchip{grid-column:1;grid-row:3;align-self:center;justify-self:start;display:inline-block;margin:0;margin-inline-end:8px;padding:2px 8px;border-radius:6px;background:var(--media-tint);color:var(--media-accent);font-size:12px;font-weight:700;line-height:1.5}
  html[lang] .media-index-blog .media-results .bcard .bfoot{display:contents}
  html[lang] .media-index-blog .media-results .bcard .bfoot>span:first-child{grid-column:2;grid-row:3;align-self:center;font-size:12.5px;line-height:1.5;color:var(--m-muted)}
  html[lang] .media-index-blog .media-results .bcard .btitle{grid-row:4}
  html[lang] .media-index-blog .media-results .bcard .blog-summary{grid-row:5}
  html[lang] .media-index-blog .media-results .bcard .blog-tags{grid-column:1/3;grid-row:6;display:flex;flex-wrap:wrap;gap:2px 8px;margin:6px 0 0;padding:0;font-size:12.5px;line-height:1.5;color:var(--media-accent)}
  .media-index .blog-tags .media-tag{white-space:nowrap}
  html[lang] .media-index-blog .media-results a.bcard::after{grid-column:3}
  /* 첫 글 크게: 옅은 탭 색 바탕 · 「최신 글」 · 제목 19px · 요약 두 줄 */
  html[lang] .media-index-blog .media-results a.bcard.media-lead{padding:18px 16px;background:var(--media-tint)}
  html[lang] .media-index-blog .media-results a.bcard.media-lead::before{content:attr(data-lead-label);grid-column:1/3;grid-row:2;margin-bottom:6px;color:var(--media-accent);font-size:12px;font-weight:700;letter-spacing:.02em}
  html[lang] .media-index-blog .media-results a.bcard.media-lead .bchip{background:#fff}
  html[lang] .media-index-blog .media-results a.bcard.media-lead .btitle{-webkit-line-clamp:3;font-size:19px;font-weight:800;line-height:1.42}
  html[lang] .media-index-blog .media-results a.bcard.media-lead .blog-summary{-webkit-line-clamp:2}

  /* 6-2. 뉴스: 왼쪽 44px 언론사 글자 타일 · 「언론사 · 날짜」 · 제목 두 줄 */
  html[lang] .media-index-press .media-results a.mrow-main{grid-template-columns:56px auto minmax(0,1fr) auto}
  html[lang] .media-index-press .media-results a.mrow-main:not([data-initial]){grid-template-columns:0 auto minmax(0,1fr) auto}
  html[lang] .media-index-press .media-results a.mrow-main[data-initial]::before{content:attr(data-initial);grid-column:1;grid-row:1/4;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tile-bg,var(--media-tint));color:var(--tile-fg,var(--media-accent));font-size:17px;font-weight:800;line-height:1}
  .media-index-press .media-results a.mrow-main[data-tone="1"]{--tile-bg:#e8f0fb;--tile-fg:#1e4f8f}
  .media-index-press .media-results a.mrow-main[data-tone="2"]{--tile-bg:#e7f3ec;--tile-fg:#2c6b45}
  .media-index-press .media-results a.mrow-main[data-tone="3"]{--tile-bg:#fbeee4;--tile-fg:#9a4d16}
  .media-index-press .media-results a.mrow-main[data-tone="4"]{--tile-bg:#f1ecf8;--tile-fg:#5b3f8c}
  html[lang] .media-index-press .media-results .moutlet{grid-column:2;grid-row:1;align-self:center;margin:0;margin-inline-end:6px;padding:0;background:none;color:var(--ink);font-size:12.5px;font-weight:700;line-height:1.5}
  html[lang] .media-index-press .media-results .mdate{grid-column:3;grid-row:1;align-self:center;margin:0;padding:0;background:none;color:var(--m-muted);opacity:1;font-size:12.5px;line-height:1.5;text-align:start;white-space:nowrap}
  html[lang] .media-index-press .media-results a.mrow-main[data-initial] .mdate:not(:empty)::before{content:"·";margin-inline-end:6px;color:#b4bccb}
  html[lang] .media-index-press .media-results .mttl{grid-column:2/4;grid-row:2;margin-top:4px}
  html[lang] .media-index-press .media-results .media-language-note{grid-column:2/4;grid-row:3;margin:4px 0 0}
  html[lang] .media-index-press .media-results a.mrow-main::after{grid-column:4;grid-row:1/4}

  /* 6-3. 에피소드: 국기 경로 / 제목 / 요약 한 줄 / 문서 배지 · 고객 유형(13px) */
  html[lang] .media-index-cases .media-results a.ccard{grid-template-columns:minmax(0,1fr) auto}
  html[lang] .media-index-cases .media-results a.ccard>*{grid-column:1}
  html[lang] .media-index-cases .media-results a.ccard::after{grid-column:2}
  html[lang] .media-index-cases .media-results .ccard :is(.story-route,.cbadge){grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:0;padding:0;background:none;color:var(--media-accent);font-size:13px;font-weight:700;line-height:1.5}
  html[lang] .media-index-cases .media-results .ccard .route-arrow{font-size:14px;line-height:1;color:var(--media-accent)}
  .media-index .story-route .route-place{display:inline-flex;align-items:center}
  .media-index .story-route .media-flag{display:inline-block;width:20px;height:14px;margin-inline-end:5px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
  html[lang] .media-index-cases .media-results .ccard .cttl{grid-row:3}
  html[lang] .media-index-cases .media-results .ccard .cdesc{grid-row:4}
  html[lang] .media-index-cases .media-results .ccard .story-foot{grid-row:5;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:8px 0 0;padding:0;font-size:13px;line-height:1.5}
  html[lang] .media-index-cases .media-results .ccard .story-document{padding:2px 8px;border-radius:6px;background:var(--media-tint);color:var(--media-accent);font-size:13px;font-weight:700}
  html[lang] .media-index-cases .media-results .ccard .story-audience{color:var(--m-muted);font-size:13px}

  /* 7. 더 보기: 폭 전체 48px, 「더 보기 20 / 48」 */
  .media-index .media-results .media-more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:48px;min-height:48px;box-sizing:border-box;margin:12px 0 0;padding:0 16px;border:1px solid var(--m-border);border-radius:12px;background:#fff;color:var(--media-accent);font-size:15px;font-weight:700}
  .media-index .media-results .media-more:hover{background:var(--media-tint)}
  .media-index .media-more-count{font-size:13px;font-weight:500;color:var(--m-soft)}
  .media-index .media-results .media-more-count:empty{display:none}

  /* 8. 로딩: 같은 모양 회색 줄 3개(「불러오는 중…」은 읽기 전용 알림으로만) */
  .media-index .media-status{padding:0;font-size:14px}
  .media-index .media-status:has(.media-skeleton){margin:0}
  .media-index .media-status-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .media-index .media-skeleton{display:block;overflow:hidden;border:1px solid var(--m-border);border-radius:16px;background:#fff}
  .media-index .media-skeleton-row{display:flex;flex-direction:column;gap:8px;min-height:72px;box-sizing:border-box;padding:16px;border-top:1px solid var(--m-line)}
  .media-index .media-skeleton-row:first-child{border-top:0}
  .media-index .media-skeleton-bar{display:block;width:30%;height:12px;border-radius:6px;background:linear-gradient(90deg,#edf0f5 0,#f6f8fb 50%,#edf0f5 100%) 0 0/200% 100%;animation:media-skeleton 1.2s linear infinite}
  .media-index .media-skeleton-bar:nth-child(2){width:88%;height:16px}
  .media-index .media-skeleton-bar:nth-child(3){width:62%}
  .media-index .media-no-match{padding:24px 4px;font-size:14px}
}
@keyframes media-skeleton{from{background-position:100% 0}to{background-position:-100% 0}}
@media(max-width:720px) and (prefers-reduced-motion:reduce){.media-index .media-skeleton-bar{animation:none}}