/* this-week.css — «이번 주 아토비아» 칸(PRD 43 퍼널 도착지) · 콘텐츠관 · 대문 같이 읽음 · 정본 tools/design_rollback/patches/tw_01.py CSS · 짓는 길 tw_02.py · 데이터 메인워커 · this-week.js 메인기능 */
/* DESIGN-1027:tw-01 BEGIN — 콘텐츠관 «이번 주 아토비아» 칸(PRD 43 퍼널 도착지 · 그 주 영상 세 편 · 쪽 안 재생). 되돌리기 rb.py undo tw-01 */
.atv-this-week[hidden]{display:none!important}
/* #atv-this-week · 카드(곧 id=tw-<갈래>)로 바로 올 때 고정 머리띠(PC 79 · 폰 71px)에 제목이 가리지 않게 — 10-27 텍스트 짚음 · 메인워커 전함(허브 블로그 고리가 여기로 옴) */
.atv-this-week,.atv-this-week .atv-tw-item{scroll-margin-top:96px}
.atv-this-week{--atv-tw-ready:1;margin:0 0 28px;padding:28px 28px 30px;border:1px solid rgba(24,35,55,.1);border-radius:28px;background:rgba(255,255,255,.88);box-shadow:0 18px 48px rgba(24,35,55,.08)}
.atv-this-week .atv-tw-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 22px}
.atv-this-week .atv-tw-head .col-kicker{display:block;margin:0 0 6px;color:#136a7d;font-size:13px;font-weight:700;letter-spacing:.12em;line-height:1.4;text-transform:uppercase}
.atv-this-week .atv-tw-head h2{margin:0;color:#182337;font-size:28px;font-weight:700;letter-spacing:-.04em;line-height:1.2}
.atv-this-week .atv-tw-sub{margin:6px 0 0;color:#56606f;font-size:15px;line-height:1.5}
.atv-this-week .atv-tw-range{flex:none;padding:6px 12px;border:1px solid rgba(24,35,55,.14);border-radius:999px;color:#56606f;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.atv-this-week .atv-tw-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:22px;margin:0;padding:0;list-style:none}
.atv-this-week .atv-tw-item{min-width:0;margin:0;padding:0}
.atv-this-week .atv-tw-frame{position:relative;display:flex;justify-content:center;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#0e1316}
.atv-this-week .atv-tw-play{position:relative;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:#0e1316;cursor:pointer}
.atv-this-week .atv-tw-poster{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.atv-this-week .atv-tw-play:hover .atv-tw-poster{transform:scale(1.03)}
.atv-this-week .atv-tw-play:focus-visible{outline:3px solid #136a7d;outline-offset:-3px}
.atv-this-week .atv-tw-icon{position:absolute;bottom:14px;left:14px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 6px 18px rgba(0,0,0,.34)}
.atv-this-week .atv-tw-icon::before{position:absolute;top:50%;left:50%;margin:-9px 0 0 -5px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #182337;content:""}
.atv-this-week .atv-tw-media{display:block;width:100%;height:100%;border:0;background:#0e1316}
.atv-this-week .atv-tw-item.is-playing[data-shape="short"] .atv-tw-frame{aspect-ratio:9/16;max-height:78vh}
.atv-this-week .atv-tw-body{padding:14px 2px 0}
.atv-this-week .atv-tw-brand{display:inline-block;padding:3px 10px;border-radius:999px;background:#dcf0f3;color:#136a7d;font-size:13px;font-weight:700;line-height:1.5}
.atv-this-week .atv-tw-title{display:-webkit-box;margin:9px 0 4px;overflow:hidden;color:#182337;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.42;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.atv-this-week .atv-tw-note{display:-webkit-box;margin:0;overflow:hidden;color:#56606f;font-size:15px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.atv-this-week .atv-tw-product{display:inline-flex;align-items:center;gap:4px;min-height:32px;margin-top:6px;color:#136a7d;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.atv-this-week .atv-tw-product::after{content:"→";text-decoration:none}
/* 글 항목(메인기능 tw-00c · data-kind="article") — 그림을 누르면 그 글로 · 영상 셋 다음 줄에서 시작 · 윗선으로 영상과 가름(10-27 대표님 허브 구조 «카드뉴스 = 글») */
.atv-this-week .atv-tw-read-media{display:block;width:100%;height:100%}
.atv-this-week .atv-tw-read-media:hover .atv-tw-poster{transform:scale(1.03)}
.atv-this-week .atv-tw-read-media:focus-visible{outline:3px solid #136a7d;outline-offset:-3px}
.atv-this-week .atv-tw-item[data-kind="article"] .atv-tw-frame{background:#e9eef0}
.atv-this-week .atv-tw-item[data-kind="video"]+.atv-tw-item[data-kind="article"]{grid-column-start:1}
.atv-this-week .atv-tw-item[data-kind="video"]~.atv-tw-item[data-kind="article"]{margin-top:4px;padding-top:24px;border-top:1px solid rgba(24,35,55,.1)}
.atv-this-week .atv-tw-read{display:inline-flex;align-items:center;gap:4px;min-height:32px;margin-top:6px;color:#136a7d;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.atv-this-week .atv-tw-read::after{content:"→";text-decoration:none}
.atv-this-week .atv-tw-read+.atv-tw-product{margin-left:14px}
@media (max-width:700px){
/* 폰: 글은 작은 줄(그림 왼쪽 · 글 오른쪽) — 큰 카드 여섯 장이면 칸이 2,000px 을 넘는다 */
.atv-this-week .atv-tw-item[data-kind="article"]{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;align-items:start}
.atv-this-week .atv-tw-item[data-kind="video"]~.atv-tw-item[data-kind="article"]{margin-top:0;padding-top:16px}
.atv-this-week .atv-tw-item[data-kind="video"]~.atv-tw-item[data-kind="article"]~.atv-tw-item[data-kind="article"]{border-top:0;padding-top:0}
.atv-this-week .atv-tw-item[data-kind="article"] .atv-tw-frame{border-radius:10px}
.atv-this-week .atv-tw-item[data-kind="article"] .atv-tw-body{padding:0}
.atv-this-week .atv-tw-item[data-kind="article"] .atv-tw-title{margin:6px 0 2px;font-size:15px}
.atv-this-week .atv-tw-item[data-kind="article"] .atv-tw-note{font-size:14px;-webkit-line-clamp:1}
.atv-this-week .atv-tw-item[data-kind="article"] .atv-tw-read{margin-top:2px;font-size:14px}
.atv-this-week,.atv-this-week .atv-tw-item{scroll-margin-top:88px}
.atv-this-week{margin-bottom:20px;padding:20px 16px 22px;border-radius:22px}
.atv-this-week .atv-tw-head{display:block;margin-bottom:18px}
.atv-this-week .atv-tw-head h2{font-size:24px}
.atv-this-week .atv-tw-range{display:inline-block;margin-top:10px}
.atv-this-week .atv-tw-list{grid-template-columns:minmax(0,1fr);gap:24px}
.atv-this-week .atv-tw-frame{border-radius:14px}
.atv-this-week .atv-tw-title{font-size:16px}}
@media (prefers-reduced-motion:reduce){.atv-this-week .atv-tw-poster{transition:none}.atv-this-week .atv-tw-play:hover .atv-tw-poster,.atv-this-week .atv-tw-read-media:hover .atv-tw-poster{transform:none}}
@media (prefers-color-scheme:dark){
html:not(.atv-light) .atv-this-week{background:rgba(16,22,25,.9);border-color:rgba(255,255,255,.14);box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08)}
html:not(.atv-light) .atv-this-week .atv-tw-head .col-kicker{color:#9ec8d1}
html:not(.atv-light) .atv-this-week .atv-tw-head h2,html:not(.atv-light) .atv-this-week .atv-tw-title{color:#cfd5e0}
html:not(.atv-light) .atv-this-week .atv-tw-sub,html:not(.atv-light) .atv-this-week .atv-tw-note,html:not(.atv-light) .atv-this-week .atv-tw-range{color:#a9b4bf}
html:not(.atv-light) .atv-this-week .atv-tw-range{border-color:rgba(255,255,255,.16)}
html:not(.atv-light) .atv-this-week .atv-tw-brand{background:rgba(143,217,234,.12);color:#8fd9ea}
html:not(.atv-light) .atv-this-week .atv-tw-product,html:not(.atv-light) .atv-this-week .atv-tw-read{color:#8fd9ea}
html:not(.atv-light) .atv-this-week .atv-tw-frame{box-shadow:0 0 0 1px rgba(255,255,255,.1)}
html:not(.atv-light) .atv-this-week .atv-tw-item[data-kind="article"] .atv-tw-frame{background:#1d262b}
html:not(.atv-light) .atv-this-week .atv-tw-item[data-kind="video"]~.atv-tw-item[data-kind="article"]{border-top-color:rgba(255,255,255,.12)}}
html.atv-dark .atv-this-week{background:rgba(16,22,25,.9);border-color:rgba(255,255,255,.14);box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08)}
html.atv-dark .atv-this-week .atv-tw-head .col-kicker{color:#9ec8d1}
html.atv-dark .atv-this-week .atv-tw-head h2,html.atv-dark .atv-this-week .atv-tw-title{color:#cfd5e0}
html.atv-dark .atv-this-week .atv-tw-sub,html.atv-dark .atv-this-week .atv-tw-note,html.atv-dark .atv-this-week .atv-tw-range{color:#a9b4bf}
html.atv-dark .atv-this-week .atv-tw-range{border-color:rgba(255,255,255,.16)}
html.atv-dark .atv-this-week .atv-tw-brand{background:rgba(143,217,234,.12);color:#8fd9ea}
html.atv-dark .atv-this-week .atv-tw-product,html.atv-dark .atv-this-week .atv-tw-read{color:#8fd9ea}
html.atv-dark .atv-this-week .atv-tw-frame{box-shadow:0 0 0 1px rgba(255,255,255,.1)}
html.atv-dark .atv-this-week .atv-tw-item[data-kind="article"] .atv-tw-frame{background:#1d262b}
html.atv-dark .atv-this-week .atv-tw-item[data-kind="video"]~.atv-tw-item[data-kind="article"]{border-top-color:rgba(255,255,255,.12)}
/* DESIGN-1027:tw-01 END */
/* 대문 자리 — main.hr 의 «.hr section{padding:128px 0}»(옆 0)을 덮고 hr-wrap 폭에 맞춘다. 밑 «내게 필요한 케어» 칸이 위 224 · 이음선을 가진다 */
main.hr .atv-this-week{width:min(1240px,calc(100% - 64px));margin:72px auto 0;padding:28px 28px 30px}
@media (max-width:700px){main.hr .atv-this-week{width:calc(100% - 48px);margin-top:44px;padding:20px 16px 22px}}
/* 편집형(제안 · 10-27 23시대 대표님 «휑한게 좀 없어지긴 했지만 이게 최선인가?») — 이번 주 한 편 크게 + 나머지 작은 줄
   여섯 칸 같은 격자는 «새 글 · 새 영상» 피드와 같은 꼴이라 겹쳐 보이고 길다(PC 1,109 · 폰 1,832px). 첫 항목 = 그 주 대표(데이터 차례 맨 앞).
   #atv-this-week 로 거는 것은 글 줄 규칙(.atv-tw-item[data-kind] 다섯 칸 셈)을 덮으려고. */
#atv-this-week .atv-tw-list>li:not(:first-child){display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:center;grid-column-start:auto;margin:0;padding:14px 0 0;border-top:0}
#atv-this-week .atv-tw-list>li:nth-child(n+3){padding-top:14px;border-top:1px solid rgba(24,35,55,.1)}
#atv-this-week .atv-tw-list>li:not(:first-child) .atv-tw-frame{border-radius:10px}
#atv-this-week .atv-tw-list>li:not(:first-child) .atv-tw-body{padding:0}
#atv-this-week .atv-tw-list>li:not(:first-child) .atv-tw-title{margin:5px 0 0;font-size:15px;line-height:1.4}
#atv-this-week .atv-tw-list>li:not(:first-child) .atv-tw-note{display:none}
#atv-this-week .atv-tw-list>li:not(:first-child) .atv-tw-read,#atv-this-week .atv-tw-list>li:not(:first-child) .atv-tw-product{min-height:28px;margin-top:2px;font-size:14px}
#atv-this-week .atv-tw-list>li:not(:first-child) .atv-tw-icon{bottom:6px;left:6px;width:30px;height:30px}
#atv-this-week .atv-tw-list>li:not(:first-child) .atv-tw-icon::before{margin:-6px 0 0 -3px;border-width:6px 0 6px 10px}
#atv-this-week .atv-tw-list>li:not(:first-child).is-playing{display:block}
#atv-this-week .atv-tw-list>li:not(:first-child).is-playing .atv-tw-frame{margin-bottom:10px}
#atv-this-week .atv-tw-list>li:first-child .atv-tw-title{font-size:21px;line-height:1.38}
@media (min-width:701px){
#atv-this-week .atv-tw-list{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0 36px}
#atv-this-week .atv-tw-list>li:first-child{grid-column:1;grid-row:1 / span 6}
#atv-this-week .atv-tw-list>li:not(:first-child){grid-column:2}}
@media (max-width:700px){
#atv-this-week .atv-tw-list{gap:0}
#atv-this-week .atv-tw-list>li:first-child{padding-bottom:6px}
#atv-this-week .atv-tw-list>li:not(:first-child){grid-template-columns:116px minmax(0,1fr)}
#atv-this-week .atv-tw-list>li:first-child .atv-tw-title{font-size:18px}}
@media (prefers-color-scheme:dark){html:not(.atv-light) #atv-this-week .atv-tw-list>li:nth-child(n+3){border-top-color:rgba(255,255,255,.12)}}
html.atv-dark #atv-this-week .atv-tw-list>li:nth-child(n+3){border-top-color:rgba(255,255,255,.12)}