/* 요즘이야기 HOME v4(운영자 확정 시안, 2026-10-13): 첫 화면 · 키워드 말풍선 · 키워드 카드 · 인기 글 목록 · 홈 대화상자 내용.
   값은 tokens.css의 var(--ui-*)만 쓴다. 공통 부품(머리 줄·시트·대화상자 틀·알약·표시)은 radar.css. 규칙: docs/DESIGN_SYSTEM_LINT.md */

/* ---------- 홈 바탕 ---------- */
.ui-home{color:var(--ui-ink)}
html[data-source-prefs="pending"] .ui-main{visibility:hidden}

/* ---------- 첫 화면: 입말 제목 + 아이콘 지표 문장 ---------- */
.ui-hero{position:relative;overflow:hidden;background:var(--ui-hero);color:var(--ui-hero-ink)}
.ui-hero-orbit{position:absolute;inset:0;width:100%;height:100%;color:var(--ui-hero-line);pointer-events:none}
.ui-hero-inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-sp-32) var(--ui-sp-40);max-width:var(--ui-max);margin:0 auto;padding:var(--ui-sp-56) var(--ui-sp-24) calc(var(--ui-sp-56) + var(--ui-sp-40))}
.ui-hero-copy{flex:1 1 360px;min-width:0}
.ui-hero-title{font-size:var(--ui-fs-46);font-weight:800;line-height:1.14;letter-spacing:-.045em}
.ui-hero-dim{display:block;color:var(--ui-hero-dim)}
.ui-hero-strong{display:block}
.ui-stat-sentence{max-width:540px;margin-top:var(--ui-sp-24);color:var(--ui-hero-dim);font-size:var(--ui-fs-19);font-weight:600;line-height:2.1;letter-spacing:-.02em}
.ui-stat-part{white-space:nowrap}
.ui-stat-open{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit}
.ui-stat-open:hover .ui-stat{background:var(--ui-sel);color:var(--ui-accent)}
.ui-stat-open:focus-visible{outline:none}
.ui-stat-open:focus-visible .ui-stat{outline:2px solid var(--ui-accent);outline-offset:2px}
.ui-stat{display:inline-flex;align-items:center;gap:var(--ui-sp-8);height:40px;padding:0 var(--ui-sp-12) 0 var(--ui-sp-8);border-radius:var(--ui-r-pill);background:var(--ui-hero-tile);box-shadow:0 1px 3px var(--ui-bub-shadow);color:var(--ui-hero-ink);vertical-align:middle}
.ui-stat b{font-size:var(--ui-fs-21);font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- 키워드 말풍선(PC: 720×300 구름, 모바일: 가로 한 줄). data-slot = 순위 자리이자 크기 단계 ---------- */
.ui-bubbles{position:relative;flex:none;width:720px;max-width:100%;height:300px}
.ui-bubble-lines{position:absolute;inset:0;width:100%;height:100%;color:var(--ui-hero-line);pointer-events:none}
.ui-bubble-lines line{stroke:currentColor;stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round}
.ui-bubble{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:var(--ui-sp-4);padding:var(--ui-sp-8) var(--ui-sp-16) var(--ui-sp-8) var(--ui-sp-12);border-radius:var(--ui-r-pill);background:var(--ui-bub);color:var(--ui-bub-ink);font-size:var(--ui-fs-16);font-weight:800;line-height:1.2;letter-spacing:-.03em;text-decoration:none;white-space:nowrap;box-shadow:0 8px 20px var(--ui-bub-shadow);transform:translate(-50%,-50%)}
.ui-bubble::after{content:"";position:absolute;left:var(--ui-sp-16);bottom:-5px;width:12px;height:12px;border-radius:var(--ui-r-fav);background:inherit;transform:rotate(45deg)}
.ui-bubble:hover{transform:translate(-50%,-50%) scale(1.05)}
.ui-bubble.is-static{cursor:default}
.ui-bubble.is-static:hover{transform:translate(-50%,-50%)}
.ui-bubble:focus-visible{outline:3px solid var(--ui-accent);outline-offset:3px}
.ui-bubble-rank{font-size:var(--ui-fs-13);font-weight:900;font-variant-numeric:tabular-nums}
/* 1위: 큰 주황 말풍선. 번호도 큰 글자(19px 굵게)라 흰 글자 대비 3:1을 지킨다. */
.ui-bubble[data-slot="0"]{left:50%;top:50%;gap:var(--ui-sp-8);padding:var(--ui-sp-16) var(--ui-sp-24);background:var(--ui-hot);color:var(--ui-on-hot);font-size:var(--ui-fs-30)}
.ui-bubble[data-slot="0"] .ui-bubble-rank{font-size:var(--ui-fs-19)}
/* 2·3위: 흰 말풍선, 빨간 번호 */
.ui-bubble[data-slot="1"]{left:19.44%;top:30.67%}
.ui-bubble[data-slot="2"]{left:81.25%;top:30.67%}
.ui-bubble[data-slot="1"],.ui-bubble[data-slot="2"]{gap:var(--ui-sp-8);padding:var(--ui-sp-12) var(--ui-sp-20) var(--ui-sp-12) var(--ui-sp-16);font-size:var(--ui-fs-22)}
.ui-bubble[data-slot="1"] .ui-bubble-rank,.ui-bubble[data-slot="2"] .ui-bubble-rank{color:var(--ui-rank-hot);font-size:var(--ui-fs-16)}
/* 4위부터: 파스텔 7색을 차례로 */
.ui-bubble[data-slot="3"]{left:24.31%;top:75.33%;background:var(--ui-p1-bg);color:var(--ui-p1-fg)}
.ui-bubble[data-slot="4"]{left:77.78%;top:75.33%;background:var(--ui-p2-bg);color:var(--ui-p2-fg)}
.ui-bubble[data-slot="5"]{left:50.28%;top:14.67%;background:var(--ui-p3-bg);color:var(--ui-p3-fg)}
.ui-bubble[data-slot="6"]{left:50.28%;top:86%;background:var(--ui-p4-bg);color:var(--ui-p4-fg)}
.ui-bubble[data-slot="7"]{left:7.78%;top:56.67%;background:var(--ui-p5-bg);color:var(--ui-p5-fg)}
.ui-bubble[data-slot="8"]{left:93.33%;top:56%;background:var(--ui-p6-bg);color:var(--ui-p6-fg)}
.ui-bubble[data-slot="9"]{left:92.22%;top:90%;background:var(--ui-p7-bg);color:var(--ui-p7-fg)}
.ui-bubble[data-slot="6"],.ui-bubble[data-slot="7"],.ui-bubble[data-slot="8"],.ui-bubble[data-slot="9"]{padding:var(--ui-sp-8) var(--ui-sp-12);font-size:var(--ui-fs-14)}
.ui-bubble[data-slot="6"] .ui-bubble-rank,.ui-bubble[data-slot="7"] .ui-bubble-rank,.ui-bubble[data-slot="8"] .ui-bubble-rank,.ui-bubble[data-slot="9"] .ui-bubble-rank{font-size:var(--ui-fs-12)}
.ui-bubble .ui-mark{width:20px;height:20px}
/* 고른 말풍선: 테두리 고리 + 조금 크게. 방문자가 직접 고른 때(has-active)만 나머지를 흐리게 한다. */
.ui-bubbles .ui-bubble.is-active{z-index:5;transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 4px var(--ui-hero),0 0 0 7px var(--ui-ring),0 16px 32px var(--ui-bub-shadow)}
.ui-bubbles.has-active .ui-bubble:not(.is-active){opacity:.7}

/* ---------- 본문: 인기 글(왼쪽) + 키워드 카드(오른쪽, 내려도 따라온다) ---------- */
.ui-main{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"list kw";gap:var(--ui-sp-24);align-items:start;max-width:var(--ui-max);margin:calc(var(--ui-sp-56) * -1) auto 0;padding:0 var(--ui-sp-24) var(--ui-sp-56)}
.ui-list-card{grid-area:list;min-width:0;padding:var(--ui-sp-8) 0;border-radius:var(--ui-r-card);background:var(--ui-card);box-shadow:var(--ui-shadow-card)}
.ui-kw-card{grid-area:kw;position:sticky;top:calc(68px + var(--ui-sp-16));min-width:0;max-height:calc(100vh - 68px - var(--ui-sp-32));overflow:auto;overscroll-behavior:contain;padding:var(--ui-sp-24) var(--ui-sp-24) var(--ui-sp-16);border-radius:var(--ui-r-card);background:var(--ui-card);box-shadow:var(--ui-shadow-card)}

/* ---------- 키워드 카드 ---------- */
.ui-kw-head{display:flex;align-items:center;gap:var(--ui-sp-8)}
.ui-kw-spacer{flex:1}
.ui-rank-badge{display:inline-flex;align-items:center;height:28px;padding:0 var(--ui-sp-12);border-radius:var(--ui-r-pill);background:var(--ui-pill);color:var(--ui-ink-2);font-size:var(--ui-fs-13);font-weight:800;white-space:nowrap}
.ui-rank-badge-1{background:var(--ui-hot-strong);color:var(--ui-on-hot)}
.ui-rank-badge-2{background:var(--ui-up-bg);color:var(--ui-rank-1)}
.ui-kw-head .ui-icon-btn{width:40px;height:40px;background:var(--ui-pill)}
.ui-kw-head .ui-icon-btn:hover{background:var(--ui-sel);color:var(--ui-accent)}
.ui-kw-close{display:none}
.ui-kw-name{margin:var(--ui-sp-12) 0 var(--ui-sp-8);font-size:var(--ui-fs-30);font-weight:800;line-height:1.2;letter-spacing:-.04em;overflow-wrap:anywhere}
.ui-kw-meta{display:flex;align-items:center;gap:var(--ui-sp-16);color:var(--ui-muted);font-size:var(--ui-fs-13);font-weight:600}
.ui-kw-meta>span{display:inline-flex;align-items:center;gap:var(--ui-sp-4)}
.ui-kw-tags{margin:var(--ui-sp-16) 0 var(--ui-sp-4)}
.ui-kw-stories{margin-top:var(--ui-sp-12)}
.ui-kw-story{position:relative;display:flex;align-items:center;gap:var(--ui-sp-12);min-height:56px;padding:var(--ui-sp-4) 0;border-top:1px solid var(--ui-line)}
.ui-kw-story-rank{flex:none;width:40px;color:var(--ui-rank-rest);font-size:var(--ui-fs-13);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-kw-story-link{display:-webkit-box;flex:1;min-width:0;overflow:hidden;color:var(--ui-ink);font-size:var(--ui-fs-14);font-weight:600;line-height:1.45;text-decoration:none;-webkit-box-orient:vertical;-webkit-line-clamp:2}
/* 줄 전체를 누르면 원문으로(모바일에서 제목 글자만 누르기 어렵지 않게) */
.ui-kw-story-link::after{content:"";position:absolute;inset:0}
.ui-kw-story-link:hover{text-decoration:underline;text-underline-offset:3px}
.ui-kw-story>.ui-fav{width:32px;height:32px;padding:var(--ui-sp-8);border-radius:var(--ui-r-pill);background:var(--ui-pill)}
.ui-kw-empty{padding:var(--ui-sp-12) 0;border-top:1px solid var(--ui-line);color:var(--ui-muted);font-size:var(--ui-fs-14)}
.ui-kw-gone{margin-top:var(--ui-sp-12)}

/* ---------- 순위 번호 색 3단계(목록·키워드 카드 공통) ---------- */
.ui-tier-1{color:var(--ui-rank-1)}
.ui-tier-2{color:var(--ui-rank-2)}
.ui-tier-rest{color:var(--ui-rank-rest)}

/* ---------- 인기 글 목록 ---------- */
.ui-list-head{display:flex;align-items:center;gap:var(--ui-sp-4);padding:var(--ui-sp-8) var(--ui-sp-12) var(--ui-sp-8) var(--ui-sp-24)}
.ui-list-title{flex:1;min-width:0;font-size:var(--ui-fs-21);font-weight:800;letter-spacing:-.035em}
.ui-list-head .ui-icon-btn{width:40px;height:40px}
.ui-pref-note{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--ui-sp-8);margin:0 var(--ui-sp-24) var(--ui-sp-8);color:var(--ui-muted);font-size:var(--ui-fs-13)}
.ui-list-card>.ui-empty,.ui-list-notice{margin:var(--ui-sp-8) var(--ui-sp-24) var(--ui-sp-12)}
.ui-list{padding:0 var(--ui-sp-12)}
.ui-row{display:flex;align-items:center;gap:var(--ui-sp-12);min-height:48px;border-top:1px solid var(--ui-line)}
.ui-row:nth-child(-n+3){min-height:56px}
/* 번호 칸: 세 자리(100)까지 한 줄로. 폭이 모자라 '10/0'처럼 꺾이던 문제(2026-10-13)를 막는다. */
.ui-row-rank{flex:none;min-width:32px;text-align:center;font-size:var(--ui-fs-16);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.ui-row-rank.ui-tier-1,.ui-row-rank.ui-tier-2{font-size:var(--ui-fs-22);font-weight:900}
/* 상태 칸: 방금은 정렬을 위해 늘 둔다(하루·요즘은 표시가 없어 칸도 없다). */
.ui-row-mark{display:flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px}
.ui-row-title{flex:1;min-width:0;font-size:var(--ui-fs-15);font-weight:500;line-height:1.42;letter-spacing:-.015em}
.ui-row:nth-child(-n+3) .ui-row-title{font-size:var(--ui-fs-16);font-weight:700}
/* 제목 링크는 위아래 여백으로 줄 높이만큼 누를 수 있게(최소 24px 기준, 실제 약 45px) */
.ui-row-link{display:block;padding:var(--ui-sp-12) 0;overflow:hidden;color:var(--ui-ink);text-decoration:none;white-space:nowrap;text-overflow:ellipsis}
.ui-row-link:hover .ui-row-text{text-decoration:underline;text-underline-offset:3px}
.ui-row-link:visited{color:var(--ui-ink-2)}
/* 자동 페이징: 20개씩 펼친다. 스크립트가 없을 때만 '더 보기' 링크를 쓴다. */
.ui-more{display:block;margin:var(--ui-sp-8) var(--ui-sp-24);padding:var(--ui-sp-12);border-radius:var(--ui-r-box);background:var(--ui-pill);color:var(--ui-ink-2);font-weight:700;text-align:center;text-decoration:none}
.ui-skeleton-row{display:flex;align-items:center;gap:var(--ui-sp-12);min-height:48px;margin:0 var(--ui-sp-12);border-top:1px solid var(--ui-line)}
.ui-skeleton-row span{height:14px;border-radius:var(--ui-r-fav);background:var(--ui-skel)}
.ui-skeleton-row span:first-child{flex:none;width:32px}
.ui-skeleton-row span:nth-child(2){width:46%}
.ui-skeleton-row span:last-child{width:30px;height:30px;margin-left:auto;border-radius:var(--ui-r-pill)}
.ui-sentinel{height:1px}
.ui-list-end{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-sp-12);margin:var(--ui-sp-8) var(--ui-sp-24);color:var(--ui-muted);font-size:var(--ui-fs-13)}

/* ---------- 대화상자 내용: 보는 커뮤니티 · 방금 모은 이야기 ---------- */
.ui-pref-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-sp-8)}
.ui-pref{display:flex;align-items:center;gap:var(--ui-sp-8);min-height:48px;padding:0 var(--ui-sp-12);border:0;border-radius:var(--ui-r-box);background:var(--ui-pill);color:var(--ui-ink);text-align:left}
.ui-pref:hover{background:var(--ui-sel)}
.ui-pref-name{flex:1;min-width:0;overflow:hidden;font-size:var(--ui-fs-14);font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.ui-pref-on{color:var(--ui-accent)}
.ui-pref-off{display:none;color:var(--ui-muted)}
.ui-pref[aria-pressed="false"]{background:var(--ui-card);box-shadow:inset 0 0 0 1px var(--ui-line);color:var(--ui-muted)}
.ui-pref[aria-pressed="false"] .ui-pref-on{display:none}
.ui-pref[aria-pressed="false"] .ui-pref-off{display:block}
.ui-dialog-count{color:var(--ui-muted);font-size:var(--ui-fs-13);font-weight:600}
.ui-items-row{display:flex;align-items:flex-start;gap:var(--ui-sp-12);padding:var(--ui-sp-12) 0;border-top:1px solid var(--ui-line)}
.ui-items-row:first-child{border-top:0}
.ui-items-rank{flex:none;min-width:32px;padding-top:var(--ui-sp-4);color:var(--ui-rank-rest);font-size:var(--ui-fs-14);font-weight:800;font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
.ui-items-main{display:grid;flex:1;gap:var(--ui-sp-4);min-width:0}
.ui-items-title{color:var(--ui-ink);font-size:var(--ui-fs-15);font-weight:600;line-height:1.45;text-decoration:none}
a.ui-items-title:hover{text-decoration:underline;text-underline-offset:3px}
.ui-items-meta{display:flex;align-items:center;gap:var(--ui-sp-4);color:var(--ui-muted);font-size:var(--ui-fs-13)}
.ui-items-message{padding:var(--ui-sp-24) 0;color:var(--ui-muted);font-size:var(--ui-fs-14);text-align:center}
.ui-items-page{color:var(--ui-ink-2);font-size:var(--ui-fs-14);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- 중간 폭 ---------- */
@media(max-width:1180px) and (min-width:801px){
  .ui-main{grid-template-columns:minmax(0,1fr) 340px}
  .ui-hero-inner{justify-content:center}
}

/* ---------- 모바일(800px 이하): 키워드는 첫 화면 안 가로 한 줄, 인기 글이 주인공 ---------- */
@media(max-width:800px){
  .ui-body-home .ui-tabs{display:flex;order:3;flex:1 0 100%;gap:0;height:44px;margin:0 var(--ui-sp-8) var(--ui-sp-12) 0;padding:0}
  .ui-body-home .ui-tab{flex:1;min-width:0;height:44px;padding:0 var(--ui-sp-8);font-size:var(--ui-fs-15)}
  .ui-body-home .ui-tab[aria-current="page"]{box-shadow:inset 0 0 0 4px var(--ui-pill)}
  .ui-hero-inner{display:block;padding:var(--ui-sp-16) 0 var(--ui-sp-32)}
  .ui-hero-copy{padding:0 var(--ui-sp-16)}
  .ui-hero-title{font-size:var(--ui-fs-25);line-height:1.25}
  .ui-hero-dim,.ui-hero-strong{display:inline}
  .ui-stat-sentence{margin-top:var(--ui-sp-8);font-size:var(--ui-fs-14);line-height:2.2}
  .ui-stat{gap:var(--ui-sp-4);height:28px;padding:0 var(--ui-sp-8)}
  .ui-stat .ui-ic{width:16px;height:16px}
  .ui-stat b{font-size:var(--ui-fs-15)}
  .ui-stat-open{margin:calc(var(--ui-sp-8) * -1) 0;padding:var(--ui-sp-8) 0}
  .ui-bubbles{display:flex;gap:var(--ui-sp-8);width:auto;height:auto;margin-top:var(--ui-sp-12);padding:var(--ui-sp-12) var(--ui-sp-16) var(--ui-sp-16);overflow-x:auto;scrollbar-width:none}
  .ui-bubbles::-webkit-scrollbar{display:none}
  .ui-bubble-lines{display:none}
  .ui-bubbles .ui-bubble[data-slot]{position:relative;top:auto;left:auto;flex:none;gap:var(--ui-sp-4);min-height:44px;padding:0 var(--ui-sp-16) 0 var(--ui-sp-12);font-size:var(--ui-fs-15);box-shadow:0 6px 14px var(--ui-bub-shadow);transform:none}
  .ui-bubbles .ui-bubble[data-slot]::after{left:var(--ui-sp-16);bottom:-4px;width:12px;height:12px}
  .ui-bubbles .ui-bubble[data-slot] .ui-bubble-rank{font-size:var(--ui-fs-14)}
  .ui-bubbles .ui-bubble[data-slot="0"]{background:var(--ui-hot-strong)}
  .ui-bubbles .ui-bubble[data-slot]:hover{transform:none}
  .ui-bubbles .ui-bubble[data-slot].is-active{transform:scale(1.06);box-shadow:0 0 0 3px var(--ui-hero),0 0 0 6px var(--ui-ring),0 10px 22px var(--ui-bub-shadow)}
  .ui-bubbles.has-active .ui-bubble:not(.is-active){opacity:.6}
  .ui-main{display:block;margin:0;padding:0}
  .ui-kw-card{display:none;position:relative;top:auto;z-index:2;max-height:none;overflow:visible;margin:calc(var(--ui-sp-16) * -1) var(--ui-sp-12) 0;padding:var(--ui-sp-16) var(--ui-sp-16) var(--ui-sp-8);box-shadow:0 0 0 2px var(--ui-ring),0 12px 28px var(--ui-shadow)}
  .ui-kw-card.is-open{display:block}
  .ui-kw-nav{display:none}
  .ui-kw-close{display:flex}
  .ui-kw-head .ui-icon-btn{width:44px;height:44px;margin:calc(var(--ui-sp-8) * -1) calc(var(--ui-sp-8) * -1) calc(var(--ui-sp-8) * -1) 0;background:none}
  .ui-kw-name{margin-top:var(--ui-sp-8);font-size:var(--ui-fs-22)}
  .ui-list-card{margin:calc(var(--ui-sp-16) * -1) 0 0;padding-top:var(--ui-sp-4);border-radius:var(--ui-r-card) var(--ui-r-card) 0 0;box-shadow:none}
  .ui-kw-card.is-open~.ui-list-card{margin-top:var(--ui-sp-12);border-radius:var(--ui-r-card)}
  .ui-list-head{padding:var(--ui-sp-8) var(--ui-sp-4) var(--ui-sp-4) var(--ui-sp-16)}
  .ui-list-title{font-size:var(--ui-fs-19)}
  .ui-list-head .ui-icon-btn{width:44px;height:44px}
  .ui-pref-note{margin:0 var(--ui-sp-16) var(--ui-sp-8)}
  .ui-list-card>.ui-empty,.ui-list-notice{margin:var(--ui-sp-8) var(--ui-sp-16) var(--ui-sp-12)}
  .ui-list{padding:0 var(--ui-sp-16)}
  .ui-row{gap:var(--ui-sp-8);min-height:64px}
  .ui-row:nth-child(-n+3){min-height:68px}
  .ui-row-title{font-weight:600}
  .ui-row-link{display:flex;align-items:center;min-height:44px;padding:0;line-height:1.4;white-space:normal}
  .ui-row-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .ui-more{margin:var(--ui-sp-8) var(--ui-sp-16)}
  .ui-skeleton-row{min-height:64px;margin:0 var(--ui-sp-16)}
  .ui-list-end{margin:var(--ui-sp-8) var(--ui-sp-16) var(--ui-sp-16)}
  .ui-pref-list{gap:var(--ui-sp-4)}
}

/* 움직임: 줄이기를 고르지 않은 경우에만 */
@media(prefers-reduced-motion:no-preference){
  .ui-bubble{transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease}
}