/* 요즘이야기 공통 화면(V4): 바탕 규칙과 여러 페이지가 함께 쓰는 ui- 부품.
   값은 tokens.css의 var(--ui-*)만 쓴다(raw 색·!important·인라인 style 금지, 글자·간격·모서리는 정해진 단계만).
   홈 전용은 home-v4.css, 하위 페이지는 pages.css. 규칙: docs/DESIGN_SYSTEM_LINT.md */

/* ---------- 바탕 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ui-page);-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* 시트·대화상자가 떠 있는 동안 뒤 페이지 스크롤을 잠근다(radar.js scrollLock). 스크롤바 자리는 남겨 화면이 옆으로 밀리지 않게. */
.ui-scroll-lock{overflow:hidden;scrollbar-gutter:stable}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;background:var(--ui-page);color:var(--ui-ink);font-family:var(--ui-font);font-size:var(--ui-fs-15);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{display:block}
table{border-collapse:collapse}
/* hidden 속성은 부품의 display보다 언제나 이긴다(!important 대신 선택자 무게로). 부품은 이보다 무거운 선택자로 display를 정하지 않는다. */
[hidden][hidden][hidden]{display:none}
:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
::selection{background:var(--ui-sel)}
.ui-sr-only{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ui-skip{position:fixed;left:var(--ui-sp-12);top:-80px;z-index:100;padding:var(--ui-sp-8) var(--ui-sp-16);border-radius:var(--ui-r-box);background:var(--ui-ink);color:var(--ui-card);font-weight:700;text-decoration:none}
.ui-skip:focus{top:var(--ui-sp-12)}
.ui-ic{flex:none}

/* ---------- 머리 줄: 로고 · 기간 탭(방금·하루·요즘) · 찾기 · 밝기 · 메뉴 ---------- */
.ui-header{position:sticky;top:0;z-index:40;background:var(--ui-card);border-bottom:1px solid var(--ui-line)}
.ui-header-in{display:flex;align-items:center;gap:var(--ui-sp-24);max-width:var(--ui-max);height:68px;margin:0 auto;padding:0 var(--ui-sp-24)}
.ui-brand{display:flex;align-items:center;gap:var(--ui-sp-8);flex:none;min-height:44px;color:var(--ui-ink);font-size:var(--ui-fs-25);font-weight:800;letter-spacing:-.045em;text-decoration:none;white-space:nowrap}
.ui-brand-mark{width:28px;height:28px;border-radius:var(--ui-r-fav)}
.ui-tabs{display:flex;align-items:center;gap:var(--ui-sp-4);height:44px;padding:var(--ui-sp-4);border-radius:var(--ui-r-pill);background:var(--ui-pill)}
.ui-tab{display:flex;align-items:center;justify-content:center;height:36px;min-width:72px;padding:0 var(--ui-sp-16);border-radius:var(--ui-r-pill);color:var(--ui-ink-2);font-size:var(--ui-fs-16);font-weight:600;text-decoration:none;white-space:nowrap}
.ui-tab:hover{background:var(--ui-card);color:var(--ui-ink)}
.ui-tab[aria-current="page"]{background:var(--ui-accent);color:var(--ui-on-accent);font-weight:800}
.ui-header-tools{display:flex;min-width:0;align-items:center;gap:var(--ui-sp-8);margin-left:auto}
.ui-search{display:flex;min-width:0;align-items:center;gap:var(--ui-sp-8);width:280px;height:44px;padding:0 var(--ui-sp-16) 0 var(--ui-sp-4);border-radius:var(--ui-r-pill);background:var(--ui-pill)}
.ui-search:focus-within{box-shadow:0 0 0 2px var(--ui-accent)}
.ui-search button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--ui-r-pill);background:none;color:var(--ui-muted)}
.ui-search input{flex:1;min-width:0;height:40px;padding:0;border:0;background:none;color:var(--ui-ink);font-size:var(--ui-fs-15);outline:none}
.ui-search input::placeholder{color:var(--ui-muted)}
.ui-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.ui-icon-btn{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:var(--ui-r-pill);background:none;color:var(--ui-ink-2);text-decoration:none;cursor:pointer}
.ui-icon-btn:hover{background:var(--ui-pill);color:var(--ui-ink)}
.ui-search-link{display:none}
/* 밝기 버튼: 누르면 바뀔 상태의 아이콘만 보인다(밝게 → 조금 어둡게 → 아주 어둡게 → 기기 설정 → 밝게). */
.ui-theme .ui-ic{display:none}
[data-theme-pref="light"] .ui-theme .ui-ic-dim,[data-theme-pref="dim"] .ui-theme .ui-ic-dark,[data-theme-pref="dark"] .ui-theme .ui-ic-pc,[data-theme-pref="system"] .ui-theme .ui-ic-light{display:block}
@media(pointer:coarse){[data-theme-pref="dark"] .ui-theme .ui-ic-pc{display:none}[data-theme-pref="dark"] .ui-theme .ui-ic-phone{display:block}}
/* 전체 메뉴 */
.ui-menu{position:relative;flex:none}
.ui-menu>summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--ui-r-pill);color:var(--ui-accent);list-style:none;cursor:pointer}
.ui-menu>summary::-webkit-details-marker{display:none}
.ui-menu>summary:hover,.ui-menu[open]>summary{background:var(--ui-pill)}
.ui-menu-panel{position:absolute;top:calc(100% + var(--ui-sp-8));right:0;z-index:50;display:grid;gap:var(--ui-sp-4);min-width:220px;padding:var(--ui-sp-8);border-radius:var(--ui-r-box);background:var(--ui-card);box-shadow:var(--ui-shadow-pop)}
.ui-menu-label{padding:var(--ui-sp-8) var(--ui-sp-12) 0;color:var(--ui-muted);font-size:var(--ui-fs-12);font-weight:700}
.ui-menu-panel a{display:flex;align-items:center;gap:var(--ui-sp-12);min-height:44px;padding:0 var(--ui-sp-12);border-radius:var(--ui-r-box);color:var(--ui-ink);font-size:var(--ui-fs-15);font-weight:600;text-decoration:none;white-space:nowrap}
.ui-menu-panel a:hover{background:var(--ui-pill)}
.ui-menu-panel a[aria-current="page"]{background:var(--ui-sel);color:var(--ui-accent);font-weight:800}
.ui-menu-line{height:1px;margin:var(--ui-sp-4) var(--ui-sp-8);background:var(--ui-line)}

/* ---------- 본문 틀 · 아래 줄 ---------- */
.ui-shell{flex:1;width:100%}
.ui-shell-read{max-width:var(--ui-read);margin:0 auto;padding:var(--ui-sp-32) var(--ui-sp-24) var(--ui-sp-56)}
.ui-footer{border-top:1px solid var(--ui-line);background:var(--ui-card);color:var(--ui-muted);font-size:var(--ui-fs-13)}
.ui-footer-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ui-sp-12) var(--ui-sp-24);max-width:var(--ui-max);margin:0 auto;padding:var(--ui-sp-24)}
.ui-footer strong{color:var(--ui-ink-2)}
.ui-footer-nav{display:flex;flex-wrap:wrap;gap:var(--ui-sp-4)}
.ui-footer-nav a{display:flex;align-items:center;min-height:44px;padding:0 var(--ui-sp-12);border-radius:var(--ui-r-pill);color:var(--ui-ink-2);font-weight:600;text-decoration:none}
.ui-footer-nav a:hover{background:var(--ui-pill)}
.ui-footer-nav a[aria-current="page"]{color:var(--ui-accent)}

/* ---------- 작은 부품: 상태 표시 · 파비콘 · 출처 알약 ---------- */
/* 새로 들어옴(N)·오르는 중: 글과 키워드가 같은 모양 */
.ui-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:var(--ui-r-pill)}
.ui-mark-new{background:var(--ui-new);color:var(--ui-on-new);font-size:var(--ui-fs-12);font-weight:800;line-height:1}
.ui-mark-up{background:var(--ui-up-bg);color:var(--ui-up)}
/* 커뮤니티 파비콘(없으면 머리글자) */
.ui-fav{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;overflow:hidden;border-radius:var(--ui-r-fav)}
.ui-fav img{width:100%;height:100%}
.ui-fav-ini{background:var(--ui-line);color:var(--ui-ink-2);font-size:var(--ui-fs-12);font-weight:800;line-height:1}
.ui-fav-lg{width:20px;height:20px}
/* 출처 알약: 여러 곳은 원글 파비콘 +N, 한 곳은 파비콘 원. 누르면 주목 포인트가 열린다(누르는 곳 44px). */
.ui-source{display:inline-flex;align-items:center;justify-content:flex-end;flex:none;min-width:44px;min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--ui-ink-2)}
.ui-source-body{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-sp-4);min-width:30px;height:30px;padding:0 var(--ui-sp-8);border-radius:var(--ui-r-pill);background:var(--ui-pill)}
.ui-source-one .ui-source-body{width:30px;padding:0}
.ui-source-n{font-size:var(--ui-fs-12);font-weight:800;font-variant-numeric:tabular-nums}
.ui-source:hover .ui-source-body,.ui-source[aria-expanded="true"] .ui-source-body{background:var(--ui-sel);color:var(--ui-accent)}
.ui-source:focus-visible{outline:none}
.ui-source:focus-visible .ui-source-body{outline:2px solid var(--ui-accent);outline-offset:2px}

/* ---------- 해시태그 · 배지 · 버튼 · 빈 자리 ---------- */
.ui-tags{display:flex;flex-wrap:wrap;gap:var(--ui-sp-8)}
.ui-tag{display:inline-flex;align-items:center;gap:var(--ui-sp-4);min-height:36px;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-14);font-weight:600;text-decoration:none}
.ui-tag:hover{text-decoration:underline;text-underline-offset:3px}
.ui-tag-hash{color:var(--ui-muted)}
.ui-tag-in{background:var(--ui-sel);color:var(--ui-accent);font-weight:700}
.ui-tag-in .ui-tag-hash{color:inherit}
.ui-tag-rank{font-size:var(--ui-fs-12);font-weight:800;font-variant-numeric:tabular-nums}
.ui-badge{display:inline-flex;align-items:center;gap:var(--ui-sp-4);height:24px;padding:0 var(--ui-sp-8);border-radius:var(--ui-r-pill);background:var(--ui-pill);color:var(--ui-ink-2);font-size:var(--ui-fs-12);font-weight:700;line-height:1;white-space:nowrap}
.ui-badge-ok{background:var(--ui-ok-bg);color:var(--ui-ok)}
.ui-badge-warn{background:var(--ui-warn-bg);color:var(--ui-warn)}
.ui-badge-danger{background:var(--ui-danger-bg);color:var(--ui-danger)}
.ui-badge-info{background:var(--ui-sel);color:var(--ui-accent)}
.ui-badge-up{background:var(--ui-up-bg);color:var(--ui-rank-1)}
.ui-badge-new{background:var(--ui-new);color:var(--ui-on-new)}
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-sp-8);min-height:44px;padding:0 var(--ui-sp-20);border:0;border-radius:var(--ui-r-pill);background:var(--ui-pill);color:var(--ui-ink);font-size:var(--ui-fs-15);font-weight:700;text-decoration:none;white-space:nowrap}
.ui-btn:hover{background:var(--ui-sel);color:var(--ui-accent)}
.ui-btn:disabled{opacity:.45;cursor:default}
.ui-btn:disabled:hover{background:var(--ui-pill);color:var(--ui-ink)}
.ui-btn-primary{background:var(--ui-accent);color:var(--ui-on-accent)}
.ui-btn-primary:hover{background:var(--ui-accent);color:var(--ui-on-accent);box-shadow:var(--ui-shadow-card)}
.ui-text-btn{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--ui-accent);font-weight:700;text-decoration:none}
.ui-text-btn:hover{text-decoration:underline;text-underline-offset:3px}
.ui-empty{display:grid;justify-items:start;gap:var(--ui-sp-4);padding:var(--ui-sp-20) var(--ui-sp-24);border-radius:var(--ui-r-box);background:var(--ui-pill);color:var(--ui-ink-2);font-size:var(--ui-fs-14)}
.ui-empty strong{color:var(--ui-ink);font-size:var(--ui-fs-15)}
.ui-notice{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--ui-sp-8);padding:var(--ui-sp-8) var(--ui-sp-16);border-radius:var(--ui-r-box);background:var(--ui-pill);color:var(--ui-ink-2);font-size:var(--ui-fs-14)}
.ui-link-dead{color:var(--ui-muted);text-decoration:line-through}

/* ---------- 시트: 주목 포인트·보는 법. 팝업은 한 가지 모양: PC는 가운데 카드, 모바일은 아래에서 올라오는 시트(대화상자와 같다) ---------- */
.ui-backdrop{position:fixed;inset:0;z-index:60;background:var(--ui-scrim)}
.ui-sheet{position:fixed;top:50%;left:50%;z-index:61;width:min(560px,calc(100vw - 32px));max-height:min(720px,calc(100vh - 32px));overflow:auto;overscroll-behavior:contain;border-radius:var(--ui-r-card);background:var(--ui-card);color:var(--ui-ink);box-shadow:var(--ui-shadow-pop);transform:translate(-50%,-50%)}
.ui-sheet-body{padding:var(--ui-sp-12) var(--ui-sp-24) var(--ui-sp-24)}
.ui-sheet-head{display:flex;align-items:center;gap:var(--ui-sp-8);min-height:44px;margin-right:calc(var(--ui-sp-12) * -1)}
.ui-sheet-kicker{flex:1;min-width:0;color:var(--ui-muted);font-size:var(--ui-fs-13);font-weight:700}
.ui-sheet-title{margin:var(--ui-sp-4) 0 var(--ui-sp-20);font-size:var(--ui-fs-19);font-weight:800;line-height:1.35;letter-spacing:-.03em}
.ui-reasons{display:grid;gap:var(--ui-sp-16)}
.ui-reason{display:flex;align-items:flex-start;gap:var(--ui-sp-12)}
.ui-reason-main{flex:1;min-width:0;padding-top:var(--ui-sp-4)}
.ui-reason-title{display:block;font-size:var(--ui-fs-15);font-weight:700;line-height:1.4}
.ui-reason-text{display:block;margin-top:var(--ui-sp-4);color:var(--ui-muted);font-size:var(--ui-fs-14);line-height:1.45}
.ui-tile{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--ui-r-box);background:var(--ui-pill);color:var(--ui-ink-2)}
.ui-tile-up{background:var(--ui-up-bg);color:var(--ui-up)}
.ui-tile-new{background:var(--ui-sel);color:var(--ui-accent)}
.ui-chips{display:flex;flex-wrap:wrap;gap:var(--ui-sp-8);margin-top:var(--ui-sp-8)}
.ui-chip{display:inline-flex;align-items:center;gap:var(--ui-sp-4);height:32px;padding:0 var(--ui-sp-12) 0 var(--ui-sp-8);border-radius:var(--ui-r-pill);background:var(--ui-pill);color:var(--ui-ink-2);font-size:var(--ui-fs-13);font-weight:600;white-space:nowrap}
.ui-chip.is-origin{background:var(--ui-sel);color:var(--ui-ink)}
.ui-chip em{color:var(--ui-accent);font-style:normal;font-weight:800}
.ui-attribution{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-sp-4) var(--ui-sp-12);margin-top:var(--ui-sp-16);color:var(--ui-muted);font-size:var(--ui-fs-13)}
.ui-attribution a{color:var(--ui-accent);font-weight:600}
.ui-actions{display:grid;gap:var(--ui-sp-8);margin-top:var(--ui-sp-24)}
.ui-cta{display:flex;align-items:center;gap:var(--ui-sp-12);min-height:56px;padding:var(--ui-sp-8) var(--ui-sp-16);border-radius:var(--ui-r-box);background:var(--ui-accent);color:var(--ui-on-accent);text-decoration:none}
.ui-cta-text{display:grid;flex:1;min-width:0}
.ui-cta-text strong{font-size:var(--ui-fs-16);font-weight:800}
.ui-cta-text span{font-size:var(--ui-fs-13);font-weight:600}
.ui-cta .ui-fav{box-shadow:0 0 0 2px var(--ui-card)}
.ui-related-head{margin-top:var(--ui-sp-8);color:var(--ui-muted);font-size:var(--ui-fs-13);font-weight:700}
.ui-related{display:grid;gap:var(--ui-sp-4)}
.ui-related-link{display:flex;align-items:center;gap:var(--ui-sp-12);min-height:52px;padding:var(--ui-sp-8) var(--ui-sp-12);border-radius:var(--ui-r-box);background:var(--ui-pill);color:var(--ui-ink);text-decoration:none}
.ui-related-link:hover{background:var(--ui-sel)}
.ui-related-text{display:grid;flex:1;min-width:0}
.ui-related-text small{color:var(--ui-muted);font-size:var(--ui-fs-12);font-weight:700}
.ui-related-text span{overflow:hidden;font-size:var(--ui-fs-14);font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.ui-more-link{display:flex;align-items:center;justify-content:center;gap:var(--ui-sp-4);min-height:44px;color:var(--ui-accent);font-weight:700;text-decoration:none}
.ui-more-link:hover{text-decoration:underline;text-underline-offset:3px}
/* 보는 법 */
.ui-help h3{margin:var(--ui-sp-20) 0 var(--ui-sp-8);color:var(--ui-muted);font-size:var(--ui-fs-13);font-weight:700}
.ui-help h3:first-child{margin-top:0}
.ui-help-list{display:grid;gap:var(--ui-sp-8)}
.ui-help-list li{display:flex;align-items:center;gap:var(--ui-sp-12);min-height:36px;font-size:var(--ui-fs-14);line-height:1.45}
.ui-help-mark{display:flex;align-items:center;justify-content:center;flex:none;width:56px}
.ui-help-mark b{display:flex;align-items:center;justify-content:center;height:28px;padding:0 var(--ui-sp-12);border-radius:var(--ui-r-pill);background:var(--ui-pill);font-size:var(--ui-fs-13)}
.ui-help-box{padding:var(--ui-sp-12) var(--ui-sp-16);border-radius:var(--ui-r-box);background:var(--ui-pill);font-size:var(--ui-fs-14);line-height:1.55}
.ui-help-links{display:grid;gap:var(--ui-sp-4);margin-top:var(--ui-sp-16)}
.ui-help-links a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 var(--ui-sp-16);border-radius:var(--ui-r-box);background:var(--ui-pill);color:var(--ui-ink);font-weight:700;text-decoration:none}
.ui-help-links a:hover{background:var(--ui-sel);color:var(--ui-accent)}

/* ---------- 대화상자(<dialog>): PC는 가운데 카드, 모바일은 아래에서 올라오는 시트 ---------- */
.ui-dialog{width:min(560px,calc(100vw - 32px));max-width:none;max-height:min(720px,calc(100vh - 32px));padding:0;border:0;border-radius:var(--ui-r-card);background:var(--ui-card);color:var(--ui-ink);box-shadow:var(--ui-shadow-pop)}
.ui-dialog::backdrop{background:var(--ui-scrim)}
.ui-dialog-panel{display:flex;flex-direction:column;max-height:inherit}
.ui-dialog-head{display:flex;align-items:center;gap:var(--ui-sp-12);padding:var(--ui-sp-16) var(--ui-sp-12) var(--ui-sp-8) var(--ui-sp-24)}
.ui-dialog-heading{flex:1;min-width:0}
.ui-dialog-title{font-size:var(--ui-fs-21);font-weight:800;letter-spacing:-.03em}
.ui-dialog-sub{color:var(--ui-muted);font-size:var(--ui-fs-13);font-weight:600}
.ui-dialog-desc{padding:0 var(--ui-sp-24);color:var(--ui-muted);font-size:var(--ui-fs-14)}
.ui-dialog-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--ui-sp-16) var(--ui-sp-24)}
.ui-dialog-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-sp-8);padding:var(--ui-sp-12) var(--ui-sp-24) var(--ui-sp-20);border-top:1px solid var(--ui-line)}

/* ---------- 모바일(800px 이하) ---------- */
@media(max-width:800px){
  .ui-header-in{flex-wrap:wrap;gap:0 var(--ui-sp-4);height:auto;min-height:56px;padding:0 var(--ui-sp-8) 0 var(--ui-sp-16)}
  .ui-brand{min-height:56px;font-size:var(--ui-fs-21)}
  .ui-brand-mark{width:24px;height:24px}
  .ui-tabs,.ui-search{display:none}
  .ui-search-link{display:flex}
  .ui-shell-read{padding:var(--ui-sp-24) var(--ui-sp-16) var(--ui-sp-40)}
  .ui-footer-in{padding:var(--ui-sp-20) var(--ui-sp-16)}
  .ui-tag{min-height:44px}
  .ui-sheet{top:auto;right:0;bottom:0;left:0;width:auto;max-height:85vh;border-radius:var(--ui-r-card) var(--ui-r-card) 0 0;transform:none}
  .ui-sheet-body{padding:var(--ui-sp-4) var(--ui-sp-20) calc(var(--ui-sp-24) + env(safe-area-inset-bottom))}
  .ui-sheet-body::before{content:"";display:block;width:40px;height:4px;margin:var(--ui-sp-8) auto 0;border-radius:var(--ui-r-pill);background:var(--ui-line)}
  .ui-dialog{width:100%;max-height:88vh;margin:auto 0 0;border-radius:var(--ui-r-card) var(--ui-r-card) 0 0}
  .ui-dialog-head{padding:var(--ui-sp-12) var(--ui-sp-8) var(--ui-sp-4) var(--ui-sp-20)}
  .ui-dialog-desc{padding:0 var(--ui-sp-20)}
  .ui-dialog-body{padding:var(--ui-sp-12) var(--ui-sp-20)}
  .ui-dialog-foot{padding:var(--ui-sp-12) var(--ui-sp-20) calc(var(--ui-sp-16) + env(safe-area-inset-bottom))}
}

/* 움직임: 줄이기를 고르지 않은 경우에만 */
@media(prefers-reduced-motion:no-preference){
  .ui-source-body,.ui-tab,.ui-btn{transition:background-color .15s ease,color .15s ease}
}