/* NRJT 토큰(애플식 회색 바탕·파랑·초록) 그대로. 항상 밝은 화면.
   <600 아래 탭바 · 600~1099 왼쪽 레일(폴드 펼침) · ≥1100 위 탭 */
:root{
  --primary:#0071e3;--primary-soft:#e8f1fd;--primary-ink:#003e7e;
  --accent:#00c966;--accent-soft:#e6f9ef;--accent-ink:#0a7a3f;
  --ink:#1d1d1f;--ink2:#2c2c2e;--ink3:#5a5a5f;--ink4:#86868b;--ink5:#c7c7cc;
  --bg:#f5f5f7;--surface:#fff;--surface-alt:#fbfbfd;--line:#e5e5ea;--line-soft:#f0f0f2;--line-strong:#d2d2d7;
  --warning:#b95d00;--warning-soft:#fff4e5;--danger:#d70015;--danger-soft:#fdeaec;
  --c-meme:#e0245e;--c-meme-soft:#fdebf1;--c-reels:#8944c9;--c-reels-soft:#f3ebfb;
  --c-music:#0a7a3f;--c-music-soft:#e6f9ef;--c-comm:#b95d00;--c-comm-soft:#fff4e5;
  --glass:rgba(245,245,247,.72);
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);--shadow-md:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.05);
  --r-md:10px;--r-lg:14px;--r-xl:20px;--ease:cubic-bezier(.2,.7,.3,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Pretendard Variable",Pretendard,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;word-break:keep-all;overflow-wrap:anywhere}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}

/* 위 유리 막대 */
.top{position:sticky;top:0;z-index:9;background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;gap:14px;height:52px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.3px;font-size:16px;white-space:nowrap;color:var(--ink)}
.brand svg{width:24px;height:24px;border-radius:7px}
.wm{font-weight:600;color:var(--accent-ink)}.wm b{font-weight:800;color:var(--ink)}   /* 이름: '요즘' 굵게, '.zip' 은 한 단계 낮춰 초록 */
.spacer{flex:1}
.seg{display:none;background:var(--line-soft);border-radius:10px;padding:3px;gap:2px}
.seg a{border-radius:8px;padding:6px 14px;font-size:14px;font-weight:600;color:var(--ink3);white-space:nowrap}
.seg a[aria-current]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.stamp{font-size:12.5px;color:var(--ink4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.icon-btn{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;color:var(--ink3)}
.icon-btn svg{width:18px;height:18px}
.icon-btn.spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 아래 탭바(휴대폰) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:9;background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--line);padding:6px max(4px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:repeat(6,1fr)}
.tabbar a{display:grid;justify-items:center;gap:2px;padding:4px 0;font-size:10.5px;font-weight:600;color:var(--ink4);min-width:0}
.tabbar svg{width:24px;height:24px}
.tabbar a[aria-current]{color:var(--primary)}
@media(min-width:600px) and (max-width:1099px){
  .tabbar{top:0;bottom:0;right:auto;width:84px;grid-template-columns:1fr;grid-auto-rows:min-content;align-content:center;gap:12px;border-top:0;border-right:1px solid var(--line);padding:56px 0 0}
  .tabbar a{font-size:12px;gap:4px}
  .tabbar svg{width:56px;height:32px;padding:4px 16px;border-radius:16px;transition:background .2s var(--ease)}
  .tabbar a[aria-current] svg{background:var(--primary-soft)}
  main,.top{padding-left:84px}
}
@media(min-width:1100px){.seg{display:flex}.tabbar{display:none}}
@media(max-width:420px){.stamp{display:none}}
main{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
@media(min-width:600px){main{padding-bottom:48px}}
#view{display:grid;gap:16px;padding-block:18px}
#view>*{min-width:0}

/* 공통 조각 */
.card{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-md);padding:18px;min-width:0}
.sec-h{display:flex;align-items:baseline;gap:10px;margin:10px 2px 0;flex-wrap:wrap}
.sec-h h2{font-size:20px;font-weight:800;letter-spacing:-.5px}
.sec-h p{font-size:13px;color:var(--ink4);min-width:0}
.sec-h .dot{width:8px;height:8px;border-radius:50%;flex:none;align-self:center;margin-right:-4px}
.sec-k{font-size:14px;font-weight:700;color:var(--c-reels);align-self:center}
.more{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--primary);background:none;border:0;padding:4px 0;white-space:nowrap}
.card-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.card-h h3,.card-h h2{font-size:16px;font-weight:700;letter-spacing:-.3px}
.card-h .more{margin-left:auto}
.card-h .dot{width:8px;height:8px;border-radius:50%;background:var(--ink5);flex:none}
.dot.ai{background:var(--primary)}.dot.meme{background:var(--c-meme)}.dot.trend{background:#f08400}.dot.reels{background:var(--c-reels)}.dot.comm{background:var(--c-comm)}.dot.music{background:var(--accent)}
.card-h small{font-size:12.5px;color:var(--ink4);min-width:0}
.card-h a.site{margin-left:auto;font-size:12.5px;color:var(--ink4);white-space:nowrap}
.hint{font-size:13px;color:var(--ink4);margin:-4px 0 10px}
.grid2,.grid3{display:grid;gap:16px;grid-template-columns:1fr;align-items:stretch}
/* 같은 줄의 상자는 높이를 맞춘다. 내용이 짧은 상자는 남는 자리를 내용과 맨 아랫줄(더 보기·출처) 사이에 둔다 */
.grid2>.card,.grid3>.card,.cards>.item{display:flex;flex-direction:column}
.grid2>.card::after,.grid3>.card::after,.cards>.item::after{content:"";flex:1 0 0;order:1}
.grid2>.card>.btn-more,.grid3>.card>.btn-more,.cards>.item>.go,.cards>.item>.src{order:2}
.cards>.item>.sound{align-self:flex-start}
.grid2:has(>.clip.open),.grid3:has(>.clip.open){align-items:start}   /* 한 상자를 '더 보기'로 펼치면 그 격자는 높이 맞춤을 푼다(옆 상자의 단추가 멀리 밀려나지 않게) */
.pvs .pv span.p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* 첫 화면 미리보기는 설명을 두 줄까지만 */
@media(min-width:600px){.grid2,.grid3{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.grid3{grid-template-columns:repeat(3,1fr)}}
/* 빈자리 없이 채우기(.fill): 칸 수가 줄 수와 안 맞으면 남는 칸이 그 줄을 나눠 가진다 — 한 장 남으면 한 줄 가득, 석 줄 격자에서 두 장 남으면 반반 */
@media(min-width:600px){.fill>:last-child:nth-child(odd){grid-column:1/-1}}
@media(min-width:1100px){
  .grid3.fill{grid-template-columns:repeat(6,1fr)}
  .grid3.fill>*,.grid3.fill>:last-child:nth-child(odd){grid-column:span 2}
  .grid3.fill>:last-child:nth-child(3n+1){grid-column:1/-1}
  .grid3.fill>:nth-last-child(2):nth-child(3n+1),.grid3.fill>:nth-last-child(2):nth-child(3n+1) + *{grid-column:span 3}
}
.tag{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--line-soft);color:var(--ink3);white-space:nowrap}
.tag.meme{background:var(--c-meme-soft);color:var(--c-meme)}.tag.reels{background:var(--c-reels-soft);color:var(--c-reels)}
.tag.trend,.tag.ai{background:var(--primary-soft);color:var(--primary-ink)}.tag.comm{background:var(--c-comm-soft);color:var(--c-comm)}.tag.music{background:var(--c-music-soft);color:var(--c-music)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:2px 9px 2px 7px;border-radius:999px;background:var(--line-soft);color:var(--ink3);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.rising{background:var(--accent-soft);color:var(--accent-ink)}.pill.peak{background:var(--primary-soft);color:var(--primary-ink)}.pill.fading{background:var(--line-soft);color:var(--ink4)}
.unsure{font-size:11.5px;font-weight:600;color:var(--warning);background:var(--warning-soft);padding:2px 8px;border-radius:6px;white-space:nowrap}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px;margin:0 -2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;color:var(--ink3);white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip small{font-weight:500;opacity:.6;margin-left:4px}
.notice{border-radius:var(--r-lg);padding:11px 14px;font-size:14px;background:var(--warning-soft);color:var(--warning)}
.empty{padding:28px 12px;text-align:center;color:var(--ink4);font-size:14.5px}
.btn-more{display:block;width:100%;margin-top:8px;padding:9px;border:0;border-radius:var(--r-md);background:var(--line-soft);font-size:13.5px;font-weight:600;color:var(--ink3)}
.src{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--ink4);margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft)}
.src a{color:var(--ink3);text-decoration:underline;text-decoration-color:var(--ink5);text-underline-offset:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.where{font-size:12.5px;color:var(--ink4);margin-top:10px}
.memo{font-size:13px;color:var(--ink4);padding:0 4px}

/* 오늘: 머리 */
.hero{background:var(--ink);color:#fff;border-radius:24px;padding:24px 22px 20px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(0,201,102,.38),rgba(0,201,102,0) 68%);pointer-events:none}
.hero-date{font-size:13.5px;font-weight:600;color:var(--accent);letter-spacing:.2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.hero-date b{font-weight:800;color:#fff;background:rgba(255,255,255,.14);border-radius:999px;padding:2px 10px;font-size:12.5px;letter-spacing:0}   /* 오늘.zip · 11-12.zip */
.hero-say{margin-left:auto;font-size:12.5px;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.5);white-space:nowrap}   /* 한 줄 소개: 넓은 화면에서만 날짜 줄 오른쪽 끝에 */
@media(max-width:599px){.hero-say{display:none}}
.hero-date select{font:inherit;font-size:12.5px;color:#fff;background:rgba(255,255,255,.14);border:0;border-radius:8px;padding:3px 6px}
.hero h1{font-size:clamp(24px,5.4vw,34px);font-weight:800;letter-spacing:-.9px;line-height:1.25;margin-top:8px;text-wrap:balance;max-width:22em}
.hero ul{margin-top:14px;display:grid;gap:7px;max-width:46em}
.hero li{position:relative;padding-left:16px;font-size:15px;color:rgba(255,255,255,.86);line-height:1.5}
.hero li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hero-meta{margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.55)}
/* 한눈에 보기: 갈래 다섯 칸을 같은 모양으로 나란히(넓은 화면은 가로 다섯 칸, 좁으면 같은 너비의 줄로) */
.hero-pts{display:grid;gap:10px;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:18px;position:relative;z-index:1}   /* 칸 수가 다섯이 아니어도 빈 자리 없이 고르게 */
.pt{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 12px 13px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:#fff;transition:background .2s var(--ease)}
.pt:hover{background:rgba(255,255,255,.13)}
.pt small{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.2px;color:rgba(255,255,255,.72)}
.pt small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.pt.ai small::before{background:#4da3ff}.pt.meme small::before{background:#ff5c8d}.pt.reels small::before{background:#b98cf5}.pt.trend small::before{background:#ffa133}.pt.comm small::before{background:#e8b06a}
.pt b{font-size:16px;font-weight:800;letter-spacing:-.4px;line-height:1.3}
.pt span{font-size:13px;line-height:1.45;color:rgba(255,255,255,.8)}
.pt em{font-style:normal;font-size:12px;line-height:1.4;color:rgba(255,255,255,.52);margin-top:auto;padding-top:6px}
@media(max-width:899px){                                        /* 펼친 폴드·태블릿: 다섯 칸을 그대로 나란히 두고 글자만 조금 줄인다 */
  .hero-pts{gap:7px}
  .pt{padding:10px 10px 11px}
  .pt b{font-size:14.5px}
  .pt span{font-size:12px}
  .pt em{font-size:11px}
}
@media(max-width:679px){                                        /* 휴대폰과 좁은 화면(왼쪽 탭 줄이 막 생긴 600~679px 포함): 가로로는 못 놓으니 같은 너비의 줄로 */
  .hero-pts{grid-auto-flow:row;gap:8px}
  .pt{display:grid;grid-template-columns:68px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:baseline;padding:10px 12px}
  .pt small{grid-row:1 / span 3}
  .pt b,.pt span,.pt em{grid-column:2}
  .pt em{margin-top:0;padding-top:0}
}

/* 영상 줄 */
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;margin:12px -2px 0;scrollbar-width:thin;scrollbar-color:var(--ink5) transparent}
.vt{flex:none;width:132px;border:0;background:none;padding:0;text-align:left;display:grid;gap:5px;align-content:start;scroll-snap-align:start}
@media(min-width:600px){.vt{width:150px}}
/* 타일 바탕 = 밝은 표지 + 제목 글자. 그림이 뜨면 그 위를 덮는다(늦게 뜨거나 못 받아도 검은 빈 타일이 되지 않게) */
.vt-img{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#dfeafd,#efe6fb)}
.vt:nth-child(5n+2) .vt-img{background:linear-gradient(160deg,#dff5ea,#e2effd)}
.vt:nth-child(5n+3) .vt-img{background:linear-gradient(160deg,#fde9ef,#fff1e0)}
.vt:nth-child(5n+4) .vt-img{background:linear-gradient(160deg,#fff4dc,#fde7ea)}
.vt:nth-child(5n+5) .vt-img{background:linear-gradient(160deg,#efe6fb,#fde9f3)}
.vt-t{position:absolute;left:10px;right:10px;bottom:12px;font-size:13px;font-weight:700;line-height:1.35;letter-spacing:-.2px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.vt-logo{position:absolute;left:0;right:0;top:17%;display:flex;justify-content:center}
.vt-logo svg{width:46px;height:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.12))}
.vt-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vt-img i{position:absolute;inset:0;margin:auto;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.42);transition:transform .2s var(--ease)}
.vt-img i::after{content:"";position:absolute;left:15px;top:12px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.vt:hover .vt-img i{transform:scale(1.1)}
.vt-img em{position:absolute;left:8px;top:8px;font-style:normal;font-size:10.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);padding:2px 7px;border-radius:999px}
.vt-cap{font-size:12.5px;line-height:1.35;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vt small{font-size:11.5px;color:var(--ink4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-h + .strip{margin-top:0}
.vrow-h{display:grid;grid-template-columns:26px auto 1fr auto;align-items:center;gap:10px}
.foot{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:10px}
.foot a{font-size:12.5px;color:var(--ink4);text-decoration:underline;text-decoration-color:var(--ink5);text-underline-offset:2px}
.tagbtn{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap}

/* 영상 재생 화면 */
.player{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:12px}
.player-box{display:grid;gap:10px;justify-items:center;max-width:100%}
.player-frame{background:#000;border-radius:16px;overflow:hidden;height:min(calc(100dvh - 150px),780px);aspect-ratio:9/16;max-width:calc(100vw - 24px)}
.player-frame.wide{aspect-ratio:auto;width:min(780px,calc(100vw - 24px));height:min(calc(100dvh - 150px),440px);background:#fff}   /* 틱톡 태그 화면: 그 화면 높이에 맞춘다(아래 절반이 비지 않게) */
@media(max-width:599px){.player-frame.wide{height:min(calc(100dvh - 150px),370px)}}
.player-frame.ig{aspect-ratio:auto;width:min(420px,calc(100vw - 24px));background:#fff}
.player-frame iframe{width:100%;height:100%;border:0;display:block}
.player-cap{color:#fff;text-align:center;max-width:min(560px,calc(100vw - 24px));font-size:14px;display:grid;gap:3px}
.player-cap b{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.player-cap small{color:rgba(255,255,255,.6);font-size:12.5px}
.player-cap a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.player button{position:absolute;border:0;border-radius:50%;width:44px;height:44px;background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;display:grid;place-items:center}
.player-x{top:calc(12px + env(safe-area-inset-top,0px));right:12px}
.player-prev{left:12px;top:50%;transform:translateY(-50%)}
.player-next{right:12px;top:50%;transform:translateY(-50%)}
@media(max-width:599px){.player-prev,.player-next{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:none}}

/* 순위 목록 */
.rows{display:grid}
.row{display:grid;grid-template-columns:26px auto 1fr auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft);min-width:0}
.row:first-child{border-top:0}
.rk{font-size:15px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink2)}
.rows .row:nth-child(-n+3) .rk{color:var(--primary)}
.art{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--line-soft);display:block}
.tt{min-width:0;display:grid}
.tt b{font-size:15px;font-weight:600;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt small{font-size:12.5px;color:var(--ink4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex{display:grid;justify-items:end;gap:1px;font-size:11.5px;color:var(--ink4);white-space:nowrap;font-variant-numeric:tabular-nums}
.mv{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.mv.up{color:var(--danger)}.mv.dn{color:var(--primary)}.mv.new{color:var(--accent-ink);background:var(--accent-soft);padding:0 5px;border-radius:4px}.mv.eq{color:var(--ink5)}
.sg{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line-soft);font-size:14px}
.sg:first-of-type{border-top:0}
.sg .rk{font-size:13px;color:var(--ink4)}
.sg span.t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg span.t small{color:var(--ink4);font-size:12.5px;margin-left:6px}

/* 미리보기 줄 */
.pv{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line-soft)}
.pv:first-of-type{border-top:0;padding-top:2px}
.pv b{font-size:15.5px;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pv span.p{font-size:14px;color:var(--ink3)}

/* 밈·릴스·트렌드·AI 카드 */
.cards{display:grid;gap:16px;grid-template-columns:1fr;align-items:stretch}
@media(min-width:760px){.cards{grid-template-columns:1fr 1fr}
  .cards>article:last-of-type:nth-of-type(odd){grid-column:1/-1}}   /* 카드 수가 홀수면 마지막 카드를 한 줄 가득 — 옆에 빈자리를 남기지 않는다 */
.item .meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:22px}
.item .meta .since{font-size:12px;color:var(--ink4);margin-left:auto;font-variant-numeric:tabular-nums}
.item h3,.item h1{font-size:22px;font-weight:800;letter-spacing:-.6px;line-height:1.3;margin-top:10px}
.item h3 a:hover{text-decoration:underline;text-underline-offset:3px}
/* 카드 전체가 눌린다: 제목 링크를 카드 크기로 늘리고, 카드 안의 다른 누를 것(영상·태그 단추·출처)은 그 위에 둔다. 올리면 살짝 뜨고 누르면 눌린다 */
.cards>.item{position:relative;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.cards>.item h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-xl)}
.cards>.item :is(.strip,.foot,.src a,.go){position:relative;z-index:2}
.cards>.item h3 a:focus-visible{outline:0}.cards>.item:has(h3 a:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.cards>.item:active{transform:scale(.985)}
@media(hover:hover){.cards>.item:hover{transform:translateY(-3px);box-shadow:0 2px 6px rgba(0,0,0,.06),0 14px 30px rgba(0,0,0,.10)}}
/* 첫 화면 미리보기 줄도 줄 전체가 눌린다 */
.pv{position:relative}.pv b a::after{content:"";position:absolute;inset:0 -8px;border-radius:10px;transition:background .15s var(--ease)}   /* 누르는 자리이자 올렸을 때 옅게 깔리는 바탕 */
.pv:active b a::after{background:rgba(0,0,0,.06)}
@media(hover:hover){.pv:hover b a::after{background:rgba(0,0,0,.035)}.pv:hover b a{text-decoration:underline;text-underline-offset:3px}}
.item-page{padding:22px}
.item-page h1{font-size:clamp(26px,5vw,34px);letter-spacing:-.9px}
.item-page .lead{font-size:17px;margin-top:8px}
/* 한 줄 판정 상자: 화면을 찍어 돌려도 어디 글인지 보이게 사이트 이름을 같이 넣는다 */
.verdict{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 14px;align-items:end;margin-top:14px;padding:14px 16px 15px;border-radius:var(--r-lg);background:var(--ink);color:#fff}
.verdict .vq{grid-column:1 / -1;font-size:12.5px;font-weight:700;letter-spacing:.2px;color:#3ddc84}
.verdict.peak .vq{color:#6cb6ff}.verdict.fading .vq{color:#c7c7cc}
.verdict b{font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.3}
.verdict .vs{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:rgba(255,255,255,.62);white-space:nowrap}
.verdict .vs svg{width:16px;height:16px;display:block}
/* 유행 눈금 다섯 칸: 지금 칸까지 색이 차고, 지금 칸의 이름이 밝게 보인다 */
.vg{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:12px}
.vg span{display:grid;gap:6px;font-size:11px;font-weight:600;line-height:1.2;text-align:center;white-space:nowrap;color:rgba(255,255,255,.42)}
.vg i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
.vg .on i{background:#3ddc84}
.verdict.peak .vg .on i{background:#6cb6ff}.verdict.fading .vg .on i{background:#c7c7cc}
.vg .now{color:#fff;font-weight:800}
.vg .now i{height:8px;margin-top:-1px}
.vn{grid-column:1 / -1;margin-top:7px;font-size:11px;color:rgba(255,255,255,.42)}
.item-page>.verdict + .ad{margin-top:14px}
.item-page dd,.item-page blockquote{font-size:15.5px}
.item-page .when{margin-top:14px;padding:0}
.item .lead{font-size:15.5px;font-weight:600;color:var(--ink2);margin-top:4px}
.item dl{margin-top:12px;display:grid;gap:9px}
.item dt{font-size:12px;font-weight:700;color:var(--ink4);letter-spacing:.2px}
.item dd{font-size:14.5px;color:var(--ink2);margin-top:1px}
.item blockquote{margin-top:12px;padding:10px 14px;border-radius:14px 14px 14px 4px;background:var(--line-soft);font-size:14.5px;color:var(--ink2);width:fit-content;max-width:100%}
.sound{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--c-music);background:var(--c-music-soft);padding:4px 10px;border-radius:8px;margin-top:12px;max-width:100%}

/* AI: 연구 해설(펼침) · 새 글 목록 */
/* AI: 소식·연구 공용 카드와 쉬운 해설 페이지 */
.tag.rs{background:var(--accent-soft);color:var(--accent-ink)}
.lv{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap;background:var(--line-soft);color:var(--ink3)}
.lv1{background:var(--accent-soft);color:var(--accent-ink)}.lv2{background:var(--warning-soft);color:var(--warning)}.lv3{background:var(--danger-soft);color:var(--danger)}
.easy{margin-top:12px;padding:12px 14px;border-radius:var(--r-lg);background:var(--accent-soft);font-size:14.5px;line-height:1.6;color:var(--ink2)}
.easy b{display:block;font-size:12px;font-weight:700;letter-spacing:.2px;color:var(--accent-ink);margin-bottom:2px}
.go{display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap;margin-top:12px;font-size:14px;font-weight:700;color:var(--primary)}
.go::after{content:"›"}
.go small{font-size:12px;font-weight:500;color:var(--ink4);order:2}
.doc{max-width:780px;margin-inline:auto;width:100%}
.item-page .easy{font-size:16px;padding:14px 16px}
.item-page h2{font-size:18px;font-weight:800;letter-spacing:-.4px;margin-top:26px}
.item-page .ov{font-size:15.5px;line-height:1.7;color:var(--ink2);margin-top:14px}
.pts{display:grid;gap:8px;margin-top:10px}
.pts li{position:relative;padding-left:16px;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.pts li::before{content:"";position:absolute;left:3px;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.item dl.terms{margin-top:10px;gap:12px}
.item .terms dt{font-size:14.5px;font-weight:700;letter-spacing:0;color:var(--ink)}
.item-page>.ad + .deep-h{margin-top:14px}
.deep-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.deep-h small{font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--ink4)}
.deep{display:grid;gap:22px;margin-top:14px}
.item .deep h3{font-size:16px;font-weight:700;letter-spacing:-.3px;line-height:1.4;margin:0 0 6px}
.deep p{font-size:15.5px;line-height:1.75;color:var(--ink2)}
.deep p + p{margin-top:10px}
.ev{margin-top:22px;padding-top:12px;border-top:1px solid var(--line-soft)}
.ev summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink3)}
.ev ul{display:grid;gap:8px;margin-top:10px}
.ev li{font-size:13.5px;color:var(--ink3)}
.ev li small{display:block;font-size:12px;color:var(--ink4)}
.memo.part{margin-top:14px;padding:0}
.li-m{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px}
.li{display:grid;gap:1px;padding:9px 0;border-top:1px solid var(--line-soft)}
.li:first-of-type{border-top:0}
.li b{font-size:14.5px;font-weight:500;line-height:1.45}
.li small{font-size:12px;color:var(--ink4);font-variant-numeric:tabular-nums}

/* 커뮤니티 */
.post{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--line-soft);align-items:baseline}
.post:first-of-type{border-top:0}
.post .n{font-size:13px;font-weight:700;color:var(--ink4);text-align:center;font-variant-numeric:tabular-nums}
.post b{font-size:14.5px;font-weight:500;line-height:1.45;display:block}
.post small{font-size:12px;color:var(--ink4);font-variant-numeric:tabular-nums}
.post mark{background:#fff3b0;color:inherit;border-radius:3px;padding:0 1px}
.words{display:flex;flex-wrap:wrap;gap:8px}
.word{border:0;border-radius:10px;background:var(--line-soft);padding:6px 11px;font-size:14px;font-weight:600;color:var(--ink2)}
.word small{font-weight:500;color:var(--ink4);margin-left:5px;font-size:12px}
.word[aria-pressed="true"]{background:var(--ink);color:#fff}.word[aria-pressed="true"] small{color:rgba(255,255,255,.6)}

.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:rgba(29,29,31,.92);color:#fff;font-size:14px;padding:10px 16px;border-radius:999px;z-index:40;max-width:calc(100vw - 32px)}
@media(min-width:600px){.toast{bottom:24px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 페이지 머리·길잡이·바닥 */
.page-h{margin:4px 2px 0}
.page-h h1{font-size:clamp(24px,5vw,30px);font-weight:800;letter-spacing:-.8px;line-height:1.25}
.page-h p{font-size:14.5px;color:var(--ink3);margin-top:2px}
/* 뒤로 알약(글 화면 맨 위, 긴 해설은 글 끝에도 한 번): 예전의 작은 위치 글자 줄을 대신한다.
   흰 바탕·가는 테두리는 새로 받기 단추·거르기 알약과 같은 값, 높이는 세 폭 모두 44px. (.up 이라는 이름은 차트의 .mv.up 과 부딪히니 쓰지 않는다) */
.backrow{display:flex;margin:-4px 0}
.back{position:relative;display:inline-flex;align-items:center;gap:4px;height:44px;padding:0 18px 0 11px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm);font-size:16px;font-weight:600;letter-spacing:-.2px;line-height:1;color:var(--ink);white-space:nowrap;transition:background .2s var(--ease),transform .2s var(--ease)}
.back svg{flex:none;width:20px;height:20px;stroke-width:2.4;color:var(--primary)}
.back::after{content:"";position:absolute;inset:-4px -6px}          /* 보이는 높이 44px, 누르는 높이 52px */
.back:active{background:var(--line-soft);transform:scale(.97)}
@media(hover:hover){.back:hover{background:var(--surface-alt);border-color:var(--ink5)}}   /* 손가락으로 누른 뒤 회색이 남지 않게 마우스에서만 */
.item-page>.back{display:flex;width:fit-content;margin-top:16px}   /* 글 끝 알약: 날짜 줄 아래 왼쪽 */
.site-foot{margin-top:28px;padding-block:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink4)}
.site-foot p + p{margin-top:4px}
.site-foot b{font-weight:700;color:var(--ink3)}
.site-foot a{color:var(--ink3);text-decoration:underline;text-decoration-color:var(--ink5);text-underline-offset:2px}
.dates{display:flex;flex-wrap:wrap;gap:8px}
.dates a{border:1px solid var(--line-strong);border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:600;color:var(--ink3)}
.prose{display:grid;gap:8px}
.prose h2{font-size:16px;font-weight:700;margin-top:10px}.prose h2:first-child{margin-top:0}
.prose p{font-size:15px;color:var(--ink2)}
.prose a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.mt{margin-top:12px}
.stack{display:grid;gap:16px}
.chart-note{margin:10px 0 2px}
/* 더 보기: 넘치는 줄은 접어 둔다 */
.clip:not(.open) .xm{display:none}
/* 광고 자리 */
.ad{position:relative;min-height:90px;border-radius:var(--r-lg);overflow:hidden;text-align:center}
.cards>.ad,.grid2>.ad,.grid3>.ad{grid-column:1/-1}
.ad-l{display:block;font-size:11px;color:var(--ink4);text-align:left;padding:0 2px 4px}
.ad-ph{display:grid;place-content:center;gap:2px;min-height:110px;border:1.5px dashed var(--line-strong);background:var(--surface-alt);color:var(--ink4)}
.ad-ph b{font-size:14px;font-weight:700;color:var(--ink3)}.ad-ph span{font-size:12.5px}
.item-page>.ad{margin-top:14px}