/* 요즘이야기 하위 페이지(V4): 글 찾기 · 이야기 자세히 · 소개와 기준 · 없는 페이지.
   값은 tokens.css의 var(--ui-*)만 쓴다. 공통 부품은 radar.css. 규칙: docs/DESIGN_SYSTEM_LINT.md */

/* ---------- 페이지 머리 ---------- */
.ui-page-head{display:grid;gap:var(--ui-sp-12);margin-bottom:var(--ui-sp-24)}
.ui-page-title{font-size:var(--ui-fs-30);font-weight:800;line-height:1.25;letter-spacing:-.04em}
.ui-page-lead{color:var(--ui-ink-2);font-size:var(--ui-fs-16);line-height:1.6}
.ui-page-lead strong{color:var(--ui-ink)}
.ui-note{margin-top:var(--ui-sp-12);color:var(--ui-muted);font-size:var(--ui-fs-13);line-height:1.6}
/* 페이지 바탕 위의 빈 자리 안내는 카드 바탕으로(바탕과 같은 회색이면 보이지 않는다) */
.ui-shell-read>.ui-empty{margin-top:var(--ui-sp-16);background:var(--ui-card);box-shadow:var(--ui-shadow-card)}
.ui-back{display:inline-flex;align-items:center;gap:var(--ui-sp-4);min-height:44px;margin-bottom:var(--ui-sp-8);color:var(--ui-ink-2);font-weight:700;text-decoration:none}
.ui-back:hover{color:var(--ui-accent)}

/* ---------- 구역 ---------- */
.ui-section{margin-top:var(--ui-sp-40)}
.ui-section-head{display:flex;align-items:center;gap:var(--ui-sp-8);margin-bottom:var(--ui-sp-12)}
.ui-section-head h2{font-size:var(--ui-fs-21);font-weight:800;letter-spacing:-.03em}
.ui-count{display:inline-flex;align-items:center;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-13);font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- 글 찾기 ---------- */
.ui-search-form{display:flex;align-items:center;gap:var(--ui-sp-8);min-height:56px;padding:var(--ui-sp-4) var(--ui-sp-4) var(--ui-sp-4) var(--ui-sp-16);border-radius:var(--ui-r-pill);background:var(--ui-card);box-shadow:var(--ui-shadow-card);color:var(--ui-muted)}
.ui-search-form:focus-within{box-shadow:0 0 0 2px var(--ui-accent),var(--ui-shadow-card)}
.ui-search-form input{flex:1;min-width:0;height:48px;padding:0;border:0;background:none;color:var(--ui-ink);font-size:var(--ui-fs-16);outline:none}
.ui-search-form input::placeholder{color:var(--ui-muted)}
.ui-search-summary{margin-top:var(--ui-sp-24);color:var(--ui-ink-2);font-size:var(--ui-fs-15)}
.ui-search-summary strong{color:var(--ui-ink)}
.ui-results{display:grid;gap:var(--ui-sp-12)}
.ui-result{display:grid;gap:var(--ui-sp-8);padding:var(--ui-sp-16) var(--ui-sp-20);border-radius:var(--ui-r-card);background:var(--ui-card);box-shadow:var(--ui-shadow-card)}
.ui-result-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-sp-4) var(--ui-sp-8);color:var(--ui-muted);font-size:var(--ui-fs-13)}
.ui-result-origin{display:inline-flex;align-items:center;gap:var(--ui-sp-4);color:var(--ui-ink-2);font-weight:600}
.ui-result-time{margin-left:auto}
.ui-result-title{display:flex;align-items:center;min-height:44px;color:var(--ui-ink);font-size:var(--ui-fs-16);font-weight:700;line-height:1.45;text-decoration:none}
.ui-result-title:hover{text-decoration:underline;text-underline-offset:3px}
.ui-result-links{display:flex;flex-wrap:wrap;gap:var(--ui-sp-8)}
.ui-result-link{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-13);font-weight:600;text-decoration:none}
a.ui-result-link:hover{background:var(--ui-sel);color:var(--ui-accent)}
.ui-result-more{display:inline-flex;align-items:center;min-height:36px;color:var(--ui-muted);font-size:var(--ui-fs-13)}
.ui-result-meta{color:var(--ui-muted);font-size:var(--ui-fs-13)}

/* ---------- 이야기 자세히 ---------- */
.ui-detail-head{display:grid;gap:var(--ui-sp-12)}
.ui-detail-badges{display:flex;flex-wrap:wrap;gap:var(--ui-sp-8)}
.ui-detail-title{font-size:var(--ui-fs-30);font-weight:800;line-height:1.3;letter-spacing:-.035em}
.ui-detail-origin{color:var(--ui-ink-2);font-size:var(--ui-fs-15)}
.ui-detail-actions{display:flex;flex-wrap:wrap;gap:var(--ui-sp-8);margin-top:var(--ui-sp-4)}
.ui-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--ui-sp-8);margin-top:var(--ui-sp-24)}
.ui-facts>div{display:grid;gap:var(--ui-sp-4);padding:var(--ui-sp-12) var(--ui-sp-16);border-radius:var(--ui-r-box);background:var(--ui-card);box-shadow:var(--ui-shadow-card)}
.ui-facts dt{color:var(--ui-muted);font-size:var(--ui-fs-13);font-weight:600}
.ui-facts dd{font-size:var(--ui-fs-19);font-weight:800;font-variant-numeric:tabular-nums}
.ui-detail-sources{margin-top:var(--ui-sp-12)}
.ui-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-sp-16);margin-top:var(--ui-sp-32)}
.ui-panel{padding:var(--ui-sp-20) var(--ui-sp-24);border-radius:var(--ui-r-card);background:var(--ui-card);box-shadow:var(--ui-shadow-card)}
.ui-panel-title{margin-bottom:var(--ui-sp-12);font-size:var(--ui-fs-16);font-weight:800}
.ui-bullets{display:grid;gap:var(--ui-sp-8);font-size:var(--ui-fs-14);line-height:1.55}
.ui-bullets li{position:relative;padding-left:var(--ui-sp-16)}
.ui-bullets li::before{content:"";position:absolute;left:var(--ui-sp-4);top:.62em;width:4px;height:4px;border-radius:var(--ui-r-pill);background:var(--ui-muted)}
.ui-metrics{display:grid;gap:var(--ui-sp-8);font-size:var(--ui-fs-14)}
.ui-metrics>div{display:flex;justify-content:space-between;gap:var(--ui-sp-12);padding-bottom:var(--ui-sp-8);border-bottom:1px solid var(--ui-line)}
.ui-metrics>div:last-child{padding-bottom:0;border-bottom:0}
.ui-metrics dt{color:var(--ui-muted)}
.ui-metrics dd{font-weight:700;text-align:right}
.ui-timeline{display:grid;gap:var(--ui-sp-8)}
.ui-timeline-item{display:grid;gap:var(--ui-sp-8);padding:var(--ui-sp-16) var(--ui-sp-20);border-radius:var(--ui-r-box);background:var(--ui-card);box-shadow:var(--ui-shadow-card)}
.ui-timeline-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-sp-4) var(--ui-sp-8);color:var(--ui-muted);font-size:var(--ui-fs-13)}
.ui-timeline-source{color:var(--ui-ink-2);font-weight:700}
.ui-timeline-title{display:inline-flex;align-items:flex-start;gap:var(--ui-sp-4);color:var(--ui-ink);font-size:var(--ui-fs-16);font-weight:700;line-height:1.45;text-decoration:none}
a.ui-timeline-title:hover{color:var(--ui-accent)}
.ui-timeline-title .ui-ic{margin-top:var(--ui-sp-4);color:var(--ui-muted)}
.ui-timeline-facts{display:flex;flex-wrap:wrap;gap:var(--ui-sp-4) var(--ui-sp-12);color:var(--ui-muted);font-size:var(--ui-fs-13);font-variant-numeric:tabular-nums}
.ui-source-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--ui-sp-12)}
.ui-source-card{display:grid;align-content:start;gap:var(--ui-sp-8);padding:var(--ui-sp-16) var(--ui-sp-20);border-radius:var(--ui-r-box);background:var(--ui-card);box-shadow:var(--ui-shadow-card)}
.ui-source-card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--ui-sp-4) var(--ui-sp-8)}
.ui-source-card-head span{color:var(--ui-muted);font-size:var(--ui-fs-13)}
.ui-source-card-facts{display:flex;flex-wrap:wrap;gap:var(--ui-sp-4) var(--ui-sp-12);color:var(--ui-muted);font-size:var(--ui-fs-13)}
.ui-source-card-facts b{color:var(--ui-ink);font-variant-numeric:tabular-nums}
.ui-rank-tracks{display:grid;gap:var(--ui-sp-4)}
.ui-rank-track{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ui-sp-4) var(--ui-sp-8);font-size:var(--ui-fs-13)}
.ui-rank-track>span{color:var(--ui-muted)}
.ui-rank-move{color:var(--ui-muted);font-style:normal;font-weight:700}
.ui-rank-up{color:var(--ui-up)}
.ui-rank-down{color:var(--ui-accent)}
.ui-story-list{display:grid;gap:var(--ui-sp-4)}
.ui-story-row{display:flex;justify-content:space-between;gap:var(--ui-sp-12);padding:var(--ui-sp-12) 0;border-bottom:1px solid var(--ui-line);font-size:var(--ui-fs-14)}
.ui-story-row time{flex:none;color:var(--ui-muted);font-size:var(--ui-fs-13)}

/* ---------- 소개와 기준 ---------- */
.ui-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-sp-12)}
.ui-step{display:grid;align-content:start;gap:var(--ui-sp-8);padding:var(--ui-sp-20);border-radius:var(--ui-r-card);background:var(--ui-card);box-shadow:var(--ui-shadow-card);color:var(--ui-ink-2);font-size:var(--ui-fs-14);line-height:1.6}
.ui-step-no{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ui-r-pill);background:var(--ui-sel);color:var(--ui-accent);font-size:var(--ui-fs-15);font-weight:800}
.ui-step-title{color:var(--ui-ink);font-size:var(--ui-fs-16);font-weight:800}
.ui-define{display:grid;gap:var(--ui-sp-8)}
.ui-define>div{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:var(--ui-sp-16);padding:var(--ui-sp-12) var(--ui-sp-16);border-radius:var(--ui-r-box);background:var(--ui-card);box-shadow:var(--ui-shadow-card)}
.ui-define dt{display:flex;align-items:center;gap:var(--ui-sp-8);font-size:var(--ui-fs-14);font-weight:800}
.ui-define dd{color:var(--ui-ink-2);font-size:var(--ui-fs-14);line-height:1.6}
.ui-define-none{display:inline-flex;align-items:center;justify-content:center;width:22px;color:var(--ui-muted)}
.ui-rules{display:grid;gap:var(--ui-sp-8)}
.ui-rules li{display:grid;gap:var(--ui-sp-4);padding:var(--ui-sp-16) var(--ui-sp-20);border-radius:var(--ui-r-box);background:var(--ui-card);box-shadow:var(--ui-shadow-card)}
.ui-rules strong{font-size:var(--ui-fs-15)}
.ui-rules span{color:var(--ui-ink-2);font-size:var(--ui-fs-14);line-height:1.6}
.ui-fold{border-radius:var(--ui-r-card);background:var(--ui-card);box-shadow:var(--ui-shadow-card)}
.ui-fold>summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-sp-4) var(--ui-sp-12);min-height:56px;padding:var(--ui-sp-12) var(--ui-sp-20);font-weight:800;cursor:pointer}
.ui-fold-meta{color:var(--ui-muted);font-size:var(--ui-fs-13);font-weight:600}
.ui-fold>summary::-webkit-details-marker{display:none}
.ui-fold>summary{list-style:none}
.ui-fold-icon{margin-left:auto;color:var(--ui-muted);transform:rotate(180deg)}
.ui-fold[open] .ui-fold-icon{transform:none}
.ui-fold>.ui-note{padding:0 var(--ui-sp-20) var(--ui-sp-20)}
.ui-table-wrap{overflow-x:auto;padding:0 var(--ui-sp-20)}
.ui-table{width:100%;font-size:var(--ui-fs-13)}
.ui-table th,.ui-table td{padding:var(--ui-sp-12) var(--ui-sp-8);border-top:1px solid var(--ui-line);text-align:left;vertical-align:middle}
.ui-table thead th{border-top:0;color:var(--ui-muted);font-weight:700;white-space:nowrap}
.ui-table tbody th{font-weight:700}
.ui-table td .ui-badge{margin:var(--ui-sp-4) var(--ui-sp-4) var(--ui-sp-4) 0}
.ui-table-kind{color:var(--ui-muted);font-size:var(--ui-fs-12);font-weight:600}

/* ---------- 없는 페이지 ---------- */
.ui-not-found{display:grid;justify-items:center;gap:var(--ui-sp-12);padding:var(--ui-sp-56) 0;text-align:center}
.ui-not-found-mark{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:var(--ui-r-pill);background:var(--ui-sel);color:var(--ui-accent)}
.ui-not-found-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ui-sp-8);margin-top:var(--ui-sp-8)}

/* ---------- 모바일(800px 이하) ---------- */
@media(max-width:800px){
  .ui-page-title,.ui-detail-title{font-size:var(--ui-fs-25)}
  .ui-page-lead{font-size:var(--ui-fs-15)}
  .ui-section{margin-top:var(--ui-sp-32)}
  .ui-section-head h2{font-size:var(--ui-fs-19)}
  .ui-result{padding:var(--ui-sp-16)}
  .ui-result-link{min-height:44px}
  .ui-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-panels,.ui-steps{grid-template-columns:minmax(0,1fr)}
  .ui-define>div{grid-template-columns:minmax(0,1fr);gap:var(--ui-sp-8)}
  .ui-table-wrap{padding:0 var(--ui-sp-16)}
  /* 좁은 화면에서 표는 한 줄씩 카드로: 칸 이름(data-label)을 값 앞에 붙인다 */
  .ui-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .ui-table tr{display:grid;gap:var(--ui-sp-4);padding:var(--ui-sp-12) 0;border-top:1px solid var(--ui-line)}
  .ui-table th,.ui-table td{padding:0;border-top:0}
  .ui-table tbody th{font-size:var(--ui-fs-15)}
  .ui-table td::before{content:attr(data-label) " · ";color:var(--ui-muted);font-weight:600}
}