/*
 * moa — style.css. 색·크기·간격은 tokens.css 의 var() 만 쓴다(raw 색 0).
 * 기본 = 모바일(< 48rem, 줄 최소 44px) → 48rem 태블릿(줄 32px) → 80rem 데스크톱(12열 · 거터 0 · 1200px).
 * 줄 선은 border 가 아니라 inset 그림자다 — 높이가 32 의 배수로 남아야 옆 열과 같은 줄에 선다(DESIGN 5절).
 */

:root {
  --row: var(--spacing-row);
  --cell: var(--spacing-cell);
  --pad: var(--spacing-page-pad-m);
  --touch: var(--spacing-row-touch);
  --gap-band: var(--spacing-row);
}
@media (min-width: 48rem) {
  :root {
    --pad: var(--spacing-page-pad-t);
    --touch: var(--spacing-row);
    --gap-band: var(--spacing-band);
  }
}
@media (min-width: 80rem) {
  :root {
    --pad: 0px;
  }
}

/* ── 0. 바탕 ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--row);
}
body {
  margin: 0;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-list);
  line-height: var(--text-list--line-height);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow-x: clip;
}
h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
ol,
ul {
  padding: 0;
  list-style: none;
}
b,
strong,
h1,
h2,
h3,
th {
  font-weight: var(--font-weight-bold);
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
table {
  border-collapse: collapse;
}
svg {
  display: block;
  flex: none;
}
[hidden] {
  display: none !important;
}
kbd {
  font-family: var(--font-sans);
}
::selection {
  background: var(--color-ink);
  color: var(--color-inverse-ink);
}

/* 포커스 — outline 대신 그림자 링(줄 높이를 바꾸지 않는다). 투명 outline 은 고대비 모드용 */
:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

/* 밑줄 — hover 는 즉시(0ms), 간격 3px · 1px */
.u,
a:where(:not([class])) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  a:where(:not([class])):hover,
  a:hover .u {
    text-decoration-line: underline;
  }
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: var(--pad);
  top: calc(var(--touch) * -3);
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding-inline: var(--cell);
  background: var(--color-inverse-bg);
  color: var(--color-inverse-ink);
  font-size: var(--text-ui);
}
.skip:focus {
  top: 0;
}

.wrap {
  width: 100%;
  max-width: calc(var(--spacing-page) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.muted {
  color: var(--color-ink-muted);
}
.meta {
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--color-ink-muted);
}
.num {
  font-variant-numeric: tabular-nums;
}

/* ── 1. 뜻 색 — 오름 주홍 · 내림 청. 색만으로 말하지 않는다(▲▼ 병기) ───────── */

.d {
  flex: none;
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--color-ink-muted);
  text-align: right;
  white-space: nowrap;
}
.d i {
  font-style: normal;
}
.d--up {
  color: var(--color-up);
}
.d--down {
  color: var(--color-down);
}
.d--new {
  padding-inline: var(--spacing);
  border-radius: var(--radius-xs);
  background: var(--color-up-bg);
  color: var(--color-up);
  font-weight: var(--font-weight-bold);
}

/* ── 2. 줄 · 머리 줄 ───────────────────────────────────────────────────────
 * .row = 링크가 아닌 줄, .item > a = 줄 전체가 링크. 둘 다 아래 1px 괘선. */

.row,
.item > a,
.item > .item__in {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  min-height: var(--touch);
  padding-inline: var(--cell);
}
.row,
.item {
  box-shadow: var(--shadow-row);
}
@media (min-width: 48rem) {
  .row,
  .item > a,
  .item > .item__in {
    height: var(--row);
  }
}
.item > a {
  transition: background-color var(--default-transition-duration) var(--default-transition-timing-function);
}
@media (hover: hover) {
  .item > a:hover {
    background: var(--color-band);
  }
  .item > a:hover .t {
    text-decoration-line: underline;
  }
}
.item > a:focus-visible,
.cell > a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus);
}
.t {
  flex: 1;
  min-width: 0;
  word-break: keep-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.head {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  min-height: var(--touch);
  padding-inline: var(--cell);
  box-shadow: var(--shadow-head), var(--shadow-row);
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
}
@media (min-width: 48rem) {
  .head {
    height: var(--row);
  }
}
.head__t {
  flex: none;
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
  white-space: nowrap;
}
.head__aside {
  margin-left: auto;
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--color-ink-muted);
  white-space: nowrap;
}
.head__aside a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing);
  min-height: var(--touch);
  color: var(--color-ink);
}
.head__btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  margin-left: auto;
  font-size: var(--text-meta);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .head__btn:hover,
  .head__aside a:hover {
    text-decoration-line: underline;
  }
}
.head__btn:active {
  transform: scale(0.98);
}

/* 끝 줄 — "더보기 →" */
.more {
  justify-content: flex-end;
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
}
.more a,
.more button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing);
  min-height: var(--touch);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .more a:hover,
  .more button:hover {
    text-decoration-line: underline;
  }
}

/* 실시간 점 — 이 템플릿의 유일한 반복 모션 */
.live {
  flex: none;
  width: calc(var(--spacing) * 1.5);
  height: calc(var(--spacing) * 1.5);
  border-radius: 50%;
  background: var(--color-live);
  animation: var(--animate-live);
}

/* ── 3. 탭 ─────────────────────────────────────────────────────────────────
 * 현재 = 잉크 700 + 2px 주홍 밑줄. 굵기가 바뀌어도 폭이 흔들리지 않게 굵은 글자 폭을 미리 잡는다(::after).
 * main.js 가 .has-ink 를 붙이면 밑줄은 움직이는 한 개(.tabs__ink)가 된다 — Layout animation 200ms. */

.tabs {
  position: relative;
  display: flex;
  align-self: stretch;
  min-width: 0;
}
.tab {
  display: inline-grid;
  align-content: center;
  justify-items: center;
  min-width: var(--touch);
  min-height: var(--touch);
  padding-inline: calc(var(--spacing) * 2);
  color: var(--color-ink-muted);
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
  white-space: nowrap;
}
.tab::after {
  content: attr(data-t);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: var(--font-weight-bold);
}
.tab[aria-selected="true"],
.tab[aria-current] {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-current);
}
.has-ink > .tab[aria-selected="true"],
.has-ink > .tab[aria-current] {
  box-shadow: none;
}
.tab:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus);
}
@media (hover: hover) {
  .tab:hover {
    color: var(--color-ink);
  }
}
.tabs__ink {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 2px;
  background: var(--color-current);
  transform-origin: 0 0;
  transition: transform 200ms var(--ease-out);
  pointer-events: none;
}
.tabs--end {
  margin-left: auto;
}

/* ── 4. 자리표시자 — 비율 · 용도가 보이는 판 ─────────────────────────────── */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: var(--spacing);
  border: 1px dashed var(--color-rule-strong);
  background: var(--color-plate);
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  font-weight: var(--font-weight-normal);
  text-align: center;
  overflow: hidden;
}
.ph__k {
  position: absolute;
  top: var(--spacing);
  left: calc(var(--spacing) * 2);
}
/* 에셋이 들어온 자리 — 크기·비율은 .ph 규칙을 그대로 받고, 점선과 안쪽 여백만 뺀다.
   판 바탕은 남겨 지연 로딩 동안의 자리가 된다. height:auto 는 width/height 속성의
   픽셀 높이가 aspect-ratio 를 이기지 않게(두 클래스 규칙의 height 는 그대로 이긴다). */
img.ph {
  display: block;
  height: auto;
  padding: 0;
  border: 0;
  object-fit: cover;
}
.media {
  padding: calc(var(--spacing) * 4) var(--cell);
}
.media .ph {
  aspect-ratio: 16 / 9;
}
@media (min-width: 48rem) {
  .media .ph {
    aspect-ratio: auto;
    height: calc(var(--row) * 5);
  }
}

/* ── 5. 유틸 줄 (48rem 부터) ────────────────────────────────────────────── */

.util {
  display: none;
}
@media (min-width: 48rem) {
  .util {
    display: block;
    box-shadow: var(--shadow-row);
    font-size: var(--text-meta);
    line-height: var(--text-meta--line-height);
  }
  .util__in {
    display: flex;
    align-items: center;
    height: var(--row);
  }
  .util__date {
    flex: 1;
    padding-inline: var(--cell);
    color: var(--color-ink-muted);
  }
  .util__nav {
    display: flex;
    gap: calc(var(--spacing) * 4);
  }
  .util__me {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 4);
    padding-inline: var(--cell);
  }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .util__nav {
    display: none;
  }
}

/* ── 6. 워드마크 · 검색창 ────────────────────────────────────────────────── */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--touch);
  font-size: var(--text-lead);
  line-height: var(--text-figure--line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wordmark svg {
  width: 1.1em;
  height: 1.1em;
}
.wordmark__sub {
  font-weight: var(--font-weight-normal);
}
@media (min-width: 48rem) {
  .wordmark {
    font-size: var(--text-search);
  }
  .wordmark--lg {
    font-size: var(--text-figure);
  }
}

/* 검색창은 링크다 — 누르면 예시 질의의 결과로 간다(<form> 0 · 글자를 받지 않는다) */
.search__box {
  display: flex;
  align-items: center;
  height: calc(var(--spacing) * 13);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  overflow: hidden;
}
.search__icon {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
  margin-inline: calc(var(--spacing) * 3) calc(var(--spacing) * 2);
}
.search__q {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  color: var(--color-ink-subtle);
}
.search--filled .search__q {
  color: var(--color-ink);
}
.search__kbd {
  display: none;
}
.search__btn {
  display: grid;
  place-items: center;
  align-self: stretch;
  flex: none;
  padding-inline: calc(var(--spacing) * 5);
  background: var(--color-inverse-bg);
  color: var(--color-inverse-ink);
  font-size: var(--text-list);
  font-weight: var(--font-weight-bold);
  transition: transform 100ms var(--ease-out);
}
.search__box:active .search__btn {
  transform: scale(0.98);
}
.search__box:focus-visible {
  box-shadow: var(--shadow-focus);
}
@media (hover: hover) {
  .search__box:hover .search__q {
    color: var(--color-ink);
  }
}
@media (min-width: 48rem) {
  .search__box {
    height: var(--spacing-search-h-sm);
  }
  .search__kbd {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    margin-inline: calc(var(--spacing) * 3);
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius-xs);
    color: var(--color-ink-muted);
    font-size: var(--text-meta);
    line-height: 1;
  }
  .search--lg .search__box {
    height: var(--spacing-search-h);
  }
  .search--lg .search__q,
  .search--md .search__q {
    font-size: var(--text-search);
    line-height: var(--text-search--line-height);
  }
  .search--lg .search__icon,
  .search--md .search__icon {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    margin-inline: calc(var(--spacing) * 4) calc(var(--spacing) * 3);
  }
  .search--lg .search__btn,
  .search--md .search__btn {
    padding-inline: calc(var(--spacing) * 7);
    font-size: var(--text-lead);
  }
  .search--md .search__box {
    height: calc(var(--spacing) * 14);
  }
}

/* ── 7. 홈 머리(히어로) — 5줄: 틈 1 · 검색 2 · 많이 찾는 1 · 틈 1 ──────────── */

.hero__in {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "mark menu"
    "search search";
  align-items: center;
  row-gap: calc(var(--spacing) * 1);
  padding-block: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
}
.hero .wordmark {
  grid-area: mark;
  padding-inline: var(--cell);
}
.hero__menu {
  grid-area: menu;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding-inline: var(--cell);
  font-size: var(--text-ui);
}
.hero .search {
  grid-area: search;
  padding-inline: var(--cell);
}
.hot {
  display: none;
}
@media (min-width: 48rem) {
  .hero__in {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: var(--row) calc(var(--row) * 2) var(--row) var(--row);
    grid-template-areas:
      ". . . . . . . . . . . ."
      "mark mark search search search search search search search search . ."
      ". . hot hot hot hot hot hot hot hot . ."
      ". . . . . . . . . . . .";
    row-gap: 0;
    padding-block: 0;
  }
  .hero__menu {
    display: none;
  }
  .hero .search {
    padding-inline: 0;
    max-width: var(--spacing-search);
  }
  .hot {
    grid-area: hot;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    height: var(--row);
    overflow: hidden;
    font-size: var(--text-ui);
    line-height: var(--text-ui--line-height);
    white-space: nowrap;
  }
  .hot b {
    margin-right: calc(var(--spacing) * 1);
  }
  .hot a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .hot i {
    font-style: normal;
    color: var(--color-ink-muted);
  }
}
@media (min-width: 48rem) and (hover: hover) {
  .hot a:hover {
    text-decoration-line: underline;
  }
}

/* 모바일 위젯 한 줄 — 날짜 · 날씨 · 코스피 */
.glance {
  box-shadow: var(--shadow-row), inset 0 1px 0 var(--color-rule);
  font-size: var(--text-ui);
}
.glance > a {
  gap: calc(var(--spacing) * 2);
}
.glance .t {
  flex: 1;
}
@media (min-width: 48rem) {
  .glance {
    display: none;
  }
}

/* ── 8. 홈 판(1번 띠) — 뉴스 6 · 급상승 3 · 날씨/증시/배너 3, 모두 13줄 ───── */

.board {
  display: grid;
  row-gap: var(--row);
  margin-top: calc(var(--spacing) * 4);
}
.board > * {
  min-width: 0;
}
@media (min-width: 48rem) {
  .board {
    margin-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "news news trend"
      "wx stock ad";
    align-items: start;
  }
  .news {
    grid-area: news;
  }
  .trend {
    grid-area: trend;
  }
  .wx {
    grid-area: wx;
  }
  .stock {
    grid-area: stock;
  }
  .ad {
    grid-area: ad;
  }
  .trend,
  .stock,
  .ad {
    box-shadow: inset 1px 0 0 var(--color-rule);
  }
}
@media (min-width: 80rem) {
  .board {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(13, var(--row));
    grid-template-areas: none;
    row-gap: 0;
    align-items: stretch;
  }
  .news {
    grid-column: 1 / 7;
    grid-row: 1 / 14;
  }
  .trend {
    grid-column: 7 / 10;
    grid-row: 1 / 14;
  }
  .wx {
    grid-column: 10 / 13;
    grid-row: 1 / 6;
  }
  .stock {
    grid-column: 10 / 13;
    grid-row: 6 / 11;
  }
  .ad {
    grid-column: 10 / 13;
    grid-row: 11 / 14;
  }
  .trend,
  .wx,
  .stock,
  .ad {
    box-shadow: inset 1px 0 0 var(--color-rule);
  }
}

/* 뉴스 — 모바일은 탭이 머리 아래 한 줄(가로 스크롤) */
.head--wrap {
  flex-wrap: wrap;
  row-gap: 0;
}
.head--wrap .head__t,
.head--wrap .head__aside {
  display: flex;
  align-items: center;
  gap: 0.25em;
  min-height: var(--touch);
}
.head--wrap .tabs {
  order: 3;
  flex: 1 0 100%;
  margin-inline: calc(var(--cell) * -1);
  padding-inline: calc(var(--cell) - var(--spacing) * 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  box-shadow: inset 0 1px 0 var(--color-rule);
}
.head--wrap .tabs::-webkit-scrollbar {
  display: none;
}
@media (min-width: 48rem) {
  .head--wrap {
    flex-wrap: nowrap;
  }
  .head--wrap .tabs {
    order: 0;
    flex: 0 1 auto;
    margin-inline: 0;
    padding-inline: 0;
    box-shadow: none;
  }
}

/* 헤드라인 줄 — 모바일: 제목 2줄 + 메타 1줄 */
.line > a {
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--spacing) * 0.5);
  padding-block: calc(var(--spacing) * 2.5);
}
.line .t {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line .meta {
  white-space: nowrap;
}
@media (min-width: 48rem) {
  .line > a {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: 0;
  }
  .line .t {
    display: block;
    white-space: nowrap;
  }
}
@media (max-width: 47.99rem) {
  .news .list > li:nth-child(n + 6) {
    display: none;
  }
}

/* 리드 줄 — 2줄 높이, 썸네일 1:1 */
.lead > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--spacing) * 18);
  grid-template-areas:
    "t ph"
    "s ph";
  align-content: center;
  column-gap: calc(var(--spacing) * 3);
  row-gap: calc(var(--spacing) * 1);
  padding: calc(var(--spacing) * 3) var(--cell);
}
.lead .ph {
  grid-area: ph;
  width: calc(var(--spacing) * 18);
  height: calc(var(--spacing) * 18);
  align-self: center;
}
.lead .t {
  grid-area: t;
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  font-weight: var(--font-weight-bold);
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.lead .lead__s {
  grid-area: s;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (min-width: 48rem) {
  .lead > a {
    height: calc(var(--row) * 2);
    grid-template-columns: calc(var(--spacing-thumb-lead) - var(--spacing) * 2) minmax(0, 1fr);
    grid-template-areas:
      "ph t"
      "ph s";
    row-gap: 0;
    padding-block: 0;
  }
  .lead .ph {
    width: calc(var(--spacing-thumb-lead) - var(--spacing) * 2);
    height: calc(var(--spacing-thumb-lead) - var(--spacing) * 2);
    padding: 0;
  }
  .lead .t {
    display: block;
    white-space: nowrap;
  }
}

/* 순위 줄 — 급상승 · 많이 본 뉴스 */
.rank > a,
.rank > .item__in {
  gap: calc(var(--spacing) * 2.5);
}
.rank__n {
  flex: none;
  width: 2ch;
  text-align: right;
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-muted);
}
.rank.is-top .rank__n {
  color: var(--color-ink);
}
.rank .d {
  min-width: 4ch;
}
.trend .panel ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
}
.trend .panel li:nth-child(n + 6) {
  box-shadow: var(--shadow-row), inset 1px 0 0 var(--color-rule);
}
.trend .panel .rank > a {
  gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 2);
}
@media (min-width: 48rem) {
  .trend .panel ol {
    display: block;
  }
  .trend .panel li:nth-child(n + 6) {
    box-shadow: var(--shadow-row);
  }
  .trend .panel .rank > a {
    gap: calc(var(--spacing) * 2.5);
    padding-inline: var(--cell);
  }
}
.trend__pages {
  justify-content: space-between;
}
.trend__pages .tabs {
  align-self: stretch;
}
.trend__pages .tab {
  font-size: var(--text-meta);
}
.trend__note {
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--color-ink-muted);
}

/* 날씨 */
.wx__now {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: calc(var(--spacing) * 3);
  min-height: calc(var(--touch) * 2);
  padding-inline: var(--cell);
  box-shadow: var(--shadow-row);
}
@media (min-width: 48rem) {
  .wx__now {
    height: calc(var(--row) * 2);
  }
}
.wx__icon {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
}
.wx__temp {
  font-size: var(--text-figure);
  line-height: var(--text-figure--line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}
.wx__state {
  display: grid;
  min-width: 0;
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
}
.wx__state span {
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
  white-space: nowrap;
}
.wx__air {
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--color-ink-muted);
  white-space: nowrap;
  overflow: hidden;
}
.wx__air b {
  color: var(--color-ink);
}
.wx__air .d--up {
  font-weight: var(--font-weight-bold);
}
.wx__hours {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding-inline: var(--cell);
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  text-align: center;
}
.wx__hours li {
  white-space: nowrap;
}
.wx__hours li + li {
  box-shadow: inset 1px 0 0 var(--color-rule);
}
@media (min-width: 48rem) {
  .wx__hours {
    align-items: stretch;
  }
  .wx__hours li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
  }
}
.wx__hours span {
  color: var(--color-ink-muted);
}

/* 증시 줄 — 이름 · 장중 선 · 값 · 변동 */
.tick {
  gap: calc(var(--spacing) * 2);
}
.tick__n {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tick__spark {
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 4);
  color: var(--color-ink-muted);
}
.tick__spark .up {
  fill: var(--color-up);
}
.tick__spark .down {
  fill: var(--color-down);
}
.tick__v {
  flex: none;
  min-width: 8.5ch;
  text-align: right;
  font-weight: var(--font-weight-bold);
}
.tick .d {
  min-width: 6.5ch;
}

/* 배너 — 광고 자리 하나 */
.ad {
  display: grid;
  align-content: center;
  padding-inline: var(--cell);
}
.ad .ph {
  aspect-ratio: 3 / 1;
}
@media (min-width: 48rem) {
  .ad {
    height: calc(var(--row) * 3);
  }
}

/* ── 9. 아래 띠들 ──────────────────────────────────────────────────────── */

.band {
  margin-top: var(--gap-band);
}

/* 서비스 색인 — 글자 색인(아이콘 없음) */
.svc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cell {
  box-shadow: var(--shadow-row);
}
.cell > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--touch) * 1.25);
  padding-inline: var(--cell);
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
  transition: background-color var(--default-transition-duration) var(--default-transition-timing-function);
}
.cell > a span {
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--color-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc__grid .cell:not(:nth-child(3n + 1)) {
  box-shadow: var(--shadow-row), inset 1px 0 0 var(--color-rule);
}
@media (hover: hover) {
  .cell > a:hover {
    background: var(--color-band);
  }
  .cell > a:hover b {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
}
@media (min-width: 48rem) {
  .svc__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .svc__grid .cell,
  .svc__grid .cell:not(:nth-child(3n + 1)) {
    box-shadow: var(--shadow-row), inset 1px 0 0 var(--color-rule);
  }
  .svc__grid .cell:nth-child(4n + 1) {
    box-shadow: var(--shadow-row);
  }
  .cell > a {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--spacing) * 2);
    height: var(--row);
    min-height: 0;
  }
}
@media (min-width: 80rem) {
  .svc__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .svc__grid .cell:nth-child(4n + 1) {
    box-shadow: var(--shadow-row), inset 1px 0 0 var(--color-rule);
  }
  .svc__grid .cell:nth-child(6n + 1) {
    box-shadow: var(--shadow-row);
  }
}

/* 분야별 뉴스 — 데스크톱 4열 · 모바일 분야 고르기 */
.seg {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: var(--shadow-row);
  padding-inline: calc(var(--cell) - var(--spacing) * 2);
}
.seg .tab[aria-pressed="true"] {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-current);
}
.sect__col:not(.is-on) {
  display: none;
}
.sect__h {
  display: none;
}
.sect__col .item:first-child .t {
  font-weight: var(--font-weight-bold);
}
@media (min-width: 48rem) {
  .seg {
    display: none;
  }
  .sect__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sect__col,
  .sect__col:not(.is-on) {
    display: block;
  }
  .sect__col:nth-child(even) {
    box-shadow: inset 1px 0 0 var(--color-rule);
  }
  .sect__h {
    display: flex;
    font-size: var(--text-ui);
  }
}
@media (min-width: 80rem) {
  .sect__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sect__col + .sect__col {
    box-shadow: inset 1px 0 0 var(--color-rule);
  }
}

/* 쇼핑 — 모바일 가로 스크롤(2.3칸) */
.shop__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--cell)) / 2.3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.shop__list::-webkit-scrollbar {
  display: none;
}
.shop__item {
  scroll-snap-align: start;
  min-width: 0;
}
.shop__item > a {
  display: block;
  transition: background-color var(--default-transition-duration) var(--default-transition-timing-function);
}
.shop__item .media .ph {
  aspect-ratio: 1 / 1;
}
.shop__name {
  font-size: var(--text-ui);
}
.shop__price {
  gap: calc(var(--spacing) * 2);
}
.pct {
  font-size: var(--text-meta);
  color: var(--color-accent);
}
@media (hover: hover) {
  .shop__item > a:hover,
  .blog__item > a:hover {
    background: var(--color-band);
  }
  .shop__item > a:hover .t,
  .blog__item > a:hover .t {
    text-decoration-line: underline;
  }
}
@media (min-width: 48rem) {
  .shop__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
  .shop__item .media {
    padding-inline: calc(var(--cell) + var(--spacing) * 2);
  }
  .shop__item .media .ph {
    aspect-ratio: auto;
    width: calc(var(--row) * 5);
    max-width: 100%;
  }
}
@media (min-width: 80rem) {
  .shop__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.shop__item + .shop__item,
.blog__item + .blog__item {
  box-shadow: inset 1px 0 0 var(--color-rule);
}

/* 블로그 — 모바일 1열(사진 왼쪽 1:1) */
.blog__list {
  display: grid;
}
.blog__item > a {
  display: grid;
  grid-template-columns: calc(var(--spacing) * 22) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 4) var(--cell);
  box-shadow: var(--shadow-row);
  transition: background-color var(--default-transition-duration) var(--default-transition-timing-function);
}
.blog__item .media {
  grid-row: 1 / 5;
  padding: 0;
}
.blog__item .media .ph {
  aspect-ratio: 1 / 1;
}
.blog__item .row {
  grid-column: 2;
  min-height: 0;
  padding-inline: 0;
  box-shadow: none;
}
.blog__item .row:nth-child(2) {
  grid-row: 2;
}
.blog__item .row:nth-child(3) {
  grid-row: 3;
}
.blog__item + .blog__item {
  box-shadow: none;
}
@media (min-width: 48rem) {
  .blog__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .blog__item > a {
    display: block;
    padding: 0;
    box-shadow: none;
  }
  .blog__item .media {
    padding: calc(var(--spacing) * 4) var(--cell);
  }
  .blog__item .media .ph {
    aspect-ratio: auto;
  }
  .blog__item .row {
    padding-inline: var(--cell);
    box-shadow: var(--shadow-row);
  }
  .blog__item + .blog__item {
    box-shadow: inset 1px 0 0 var(--color-rule);
  }
}
@media (min-width: 80rem) {
  .blog__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── 10. 꼬리 — 가상 고지 ───────────────────────────────────────────────── */

.foot {
  margin-top: var(--gap-band);
  padding-block: calc(var(--row) * 1) calc(var(--row) * 1.5);
  padding-bottom: max(calc(var(--row) * 1.5), env(safe-area-inset-bottom));
  background: var(--color-band);
  box-shadow: inset 0 1px 0 var(--color-rule);
}
.foot__in {
  display: grid;
  gap: calc(var(--spacing) * 3);
}
.foot__note {
  max-width: 44rem;
  padding-inline: var(--cell);
  font-size: var(--text-list);
  line-height: var(--text-lead--line-height);
}
.foot__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc(var(--spacing) * 4);
  padding-inline: var(--cell);
  font-size: var(--text-meta);
}
.foot__links a {
  display: inline-flex;
  align-items: center;
  min-width: var(--touch); /* 세 글자 "로그인" 도 44px 터치 폭 */
  min-height: var(--touch);
}
.foot__copy {
  padding-inline: var(--cell);
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
}

/* ── 11. 안쪽 페이지 머리 — 워드마크 + 소형 검색창 + 분야 줄 ─────────────── */

.mast__in {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  min-height: calc(var(--touch) + var(--spacing) * 2);
  padding-inline: calc(var(--pad) + var(--cell)) var(--pad);
}
.mast .search {
  margin-left: auto;
}
.mast .search__box {
  width: var(--touch);
  height: var(--touch);
  justify-content: center;
  border-width: 0;
}
.mast .search__icon {
  margin: 0;
}
.mast .search__q,
.mast .search__btn,
.mast .search__kbd {
  display: none;
}
@media (min-width: 48rem) {
  .mast__in {
    height: calc(var(--row) * 2);
    gap: calc(var(--spacing) * 8);
    padding-inline: calc(var(--pad) + var(--cell));
  }
  .mast .search {
    margin-left: 0;
    flex: 0 1 calc(var(--spacing) * 120);
  }
  .mast .search__box {
    width: auto;
    height: var(--spacing-search-h-sm);
    justify-content: flex-start;
    border-width: 2px;
  }
  .mast .search__icon {
    margin-inline: calc(var(--spacing) * 3) calc(var(--spacing) * 2);
  }
  .mast .search__q {
    display: block;
    font-size: var(--text-list);
  }
  .mast .search__btn {
    display: grid;
    font-size: var(--text-ui);
    padding-inline: calc(var(--spacing) * 4);
  }
  .mast .search__kbd {
    display: inline-grid;
  }
}

/* 분야 줄 · 검색 탭 줄 — 아래 2px 잉크 선 */
.mast--line,
.secnav {
  box-shadow: inset 0 -2px 0 var(--color-ink);
}
.secnav .tabs {
  overflow-x: auto;
  scrollbar-width: none;
  padding-inline: calc(var(--cell) - var(--spacing) * 2);
}
.secnav .tabs::-webkit-scrollbar {
  display: none;
}
.secnav .tab {
  font-size: var(--text-list);
}
.secnav__in {
  display: flex;
  align-items: stretch;
}
.secnav__opt {
  display: none;
}
@media (min-width: 48rem) {
  .secnav .tab {
    height: calc(var(--row) * 1.25);
  }
  .secnav__opt {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding-inline: var(--cell);
    font-size: var(--text-meta);
    color: var(--color-ink-muted);
    white-space: nowrap;
  }
}

/* 검색 결과 머리 — 큰 검색창(질의가 채워져 있다) */
.mast--serp .mast__in {
  flex-wrap: wrap;
  row-gap: 0;
  padding-bottom: calc(var(--spacing) * 3);
}
.mast--serp .search {
  flex: 1 0 100%;
  margin: 0;
  padding-right: var(--cell);
}
.mast--serp .search__box {
  width: 100%;
  height: calc(var(--spacing) * 13);
  justify-content: flex-start;
  border-width: 2px;
}
.mast--serp .search__icon {
  margin-inline: calc(var(--spacing) * 3) calc(var(--spacing) * 2);
}
.mast--serp .search__q,
.mast--serp .search__btn {
  display: grid;
  align-items: center;
}
.mast--serp .search__q {
  display: block;
}
@media (min-width: 48rem) {
  .mast--serp .mast__in {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    height: calc(var(--row) * 3);
    padding-block: 0;
    padding-inline: var(--pad);
  }
  .mast--serp .wordmark {
    grid-column: 1 / 3;
    padding-inline: var(--cell);
  }
  .mast--serp .search {
    grid-column: 3 / 11;
    max-width: var(--spacing-search);
    flex: none;
  }
  .mast--serp .search__box {
    height: calc(var(--spacing) * 14);
  }
  .mast--serp .search__kbd {
    display: inline-grid;
  }
  .mast--serp .search__q {
    font-size: var(--text-search);
    line-height: var(--text-search--line-height);
  }
  .mast--serp .search__icon {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    margin-inline: calc(var(--spacing) * 4) calc(var(--spacing) * 3);
  }
  .mast--serp .search__btn {
    padding-inline: calc(var(--spacing) * 7);
    font-size: var(--text-lead);
  }
}

/* ── 12. 두 열 페이지(기사 · 검색) — 본문 8 · 사이드 4 ───────────────────── */

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--gap-band);
  padding-top: calc(var(--spacing) * 6);
}
@media (min-width: 80rem) {
  .page {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 0;
    padding-top: var(--row);
  }
  .page > * {
    grid-column: 1;
  }
  .page > .side {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    position: sticky;
    top: calc(var(--spacing) * 4);
  }
}
.side {
  display: grid;
  row-gap: var(--row);
  align-content: start;
}
@media (min-width: 80rem) {
  .side {
    padding-left: calc(var(--spacing) * 6);
  }
}

/* ── 13. 기사 ────────────────────────────────────────────────────────────── */

.art {
  display: grid;
  row-gap: calc(var(--spacing) * 6);
  padding-inline: var(--cell);
}
.art > * {
  max-width: var(--spacing-measure);
}
.art__head {
  display: grid;
  row-gap: calc(var(--spacing) * 3);
}
.art__sec {
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  font-weight: var(--font-weight-bold);
}
.art__sec a {
  display: inline-flex;
  align-items: center;
  min-width: var(--touch);
  min-height: var(--touch);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .art__sec a:hover {
    text-decoration-line: underline;
  }
}
.art__title,
.notice h1 {
  font-size: var(--text-title-sm);
  line-height: var(--text-title-sm--line-height);
  letter-spacing: var(--text-title--letter-spacing);
  text-wrap: balance;
  word-break: keep-all;
}
@media (min-width: 48rem) {
  .art__title,
  .notice h1 {
    font-size: var(--text-title);
    line-height: var(--text-title--line-height);
  }
}
.art__sub {
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  color: var(--color-ink-muted);
  word-break: keep-all;
}
.art__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc(var(--spacing) * 2);
}
.art__meta b {
  color: var(--color-ink);
}
.art__meta > * + *::before {
  content: "·";
  margin-right: calc(var(--spacing) * 2);
  color: var(--color-ink-muted);
}
.page > .related,
.page > .cmts {
  max-width: calc(var(--spacing-measure) + 2 * var(--cell));
}
.art__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(var(--spacing) * 5);
  box-shadow: inset 0 1px 0 var(--color-rule), var(--shadow-row);
  font-size: var(--text-meta);
}
.sizes {
  display: flex;
  align-items: stretch;
}
.tool {
  display: inline-grid;
  place-items: center;
  min-width: var(--touch);
  min-height: var(--touch);
  color: var(--color-ink-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tool[aria-pressed="true"] {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
.tool--s {
  font-size: var(--text-meta);
}
.tool--m {
  font-size: var(--text-list);
}
.tool--l {
  font-size: var(--text-lead);
}
.tool--txt {
  min-width: 0;
}
@media (hover: hover) {
  .tool:hover {
    color: var(--color-ink);
  }
  .tool--txt:hover {
    text-decoration-line: underline;
  }
}
@media (min-width: 48rem) {
  .tool {
    min-width: var(--row);
    height: var(--row);
  }
}

/* 요약 세 줄 — 띠 바탕, 테두리 없음 */
/* 띠 상자의 안쪽 여백은 calc 없이 토큰 그대로 — impeccable detect 가 calc(var()) 패딩을 0 으로 읽는다(NOTES 2절) */
.brief {
  padding: var(--cell) var(--cell) var(--cell);
  background: var(--color-band);
}
.brief h2 {
  font-size: var(--text-ui);
  line-height: var(--row);
}
.brief ol {
  counter-reset: brief;
  display: grid;
  row-gap: calc(var(--spacing) * 1.5);
}
.brief li {
  counter-increment: brief;
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr);
  column-gap: calc(var(--spacing) * 2);
  word-break: keep-all;
}
.brief li::before {
  content: counter(brief);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-muted);
  text-align: right;
}

.fig .ph {
  aspect-ratio: 16 / 9;
}
.fig figcaption {
  margin-top: calc(var(--spacing) * 2);
}

/* 본문 — 17 / 1.8, 폭 680, 글자 크기 3단(표현) */
.prose {
  --prose: var(--text-body);
  font-size: var(--prose);
  line-height: var(--text-body--line-height);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.prose[data-text-size="s"] {
  --prose: var(--text-body-sm);
}
.prose[data-text-size="l"] {
  --prose: var(--text-body-lg);
}
.prose > * + * {
  margin-top: 1em;
}
.prose h2 {
  margin-top: 2em;
  font-size: var(--text-body-lg);
  line-height: 1.5;
}
.prose blockquote {
  padding-left: calc(var(--spacing) * 5);
  box-shadow: inset 2px 0 0 var(--color-ink);
  font-size: var(--text-lead);
  line-height: 1.7;
}
.prose blockquote p + p {
  margin-top: calc(var(--spacing) * 2);
}
.prose blockquote cite {
  font-style: normal;
}
.prose__by {
  padding-top: calc(var(--spacing) * 4);
  box-shadow: inset 0 1px 0 var(--color-rule);
  font-size: var(--text-ui);
}

/* 표 — 줄 32 · 고정폭 숫자 오른쪽 정렬 */
.tbl-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.tbl {
  width: 100%;
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
}
.tbl caption {
  caption-side: top;
  height: var(--row);
  line-height: var(--row);
  text-align: left;
  font-size: var(--text-ui);
  font-weight: var(--font-weight-bold);
  box-shadow: inset 0 -2px 0 var(--color-ink);
}
.tbl th,
.tbl td {
  height: var(--row);
  padding: 0 var(--cell);
  text-align: left;
  white-space: nowrap;
  box-shadow: var(--shadow-row);
}
.tbl thead th {
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-normal);
}
.tbl .r {
  text-align: right;
}
.tbl tbody th {
  font-weight: var(--font-weight-normal);
}
.tbl .is-now th,
.tbl .is-now td {
  font-weight: var(--font-weight-bold);
}
.tbl-note {
  margin-top: calc(var(--spacing) * 2);
}

/* 관련 기사 · 댓글 */
.related .line .t,
.side .t {
  font-size: var(--text-list);
}
.cmts__write {
  margin-top: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  background: var(--color-band);
  color: var(--color-ink-muted);
  font-size: var(--text-ui);
}
.cmt {
  display: grid;
  row-gap: calc(var(--spacing) * 1.5);
  padding: calc(var(--spacing) * 4) var(--cell);
  box-shadow: var(--shadow-row);
}
.cmt__who {
  display: flex;
  gap: calc(var(--spacing) * 2);
  align-items: baseline;
  font-size: var(--text-ui);
}
.cmt__body {
  word-break: keep-all;
}
.cmt__acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: calc(var(--spacing) * 3);
  min-height: var(--touch);
}
.cmt__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .cmt__more:hover,
  .linkbtn:hover {
    text-decoration-line: underline;
  }
}
.cmt__replies {
  display: grid;
  row-gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 1);
  padding: var(--cell);
  background: var(--color-band);
}
.cmt__replies li {
  display: grid;
  row-gap: calc(var(--spacing) * 0.5);
  font-size: var(--text-ui);
}

/* 접기 — Accordion(grid-template-rows 0fr → 1fr, 200ms) */
.fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms var(--ease-out);
}
.fold.is-open {
  grid-template-rows: 1fr;
}
.fold__in {
  min-height: 0;
  overflow: hidden;
}

/* ── 14. 검색 결과 ───────────────────────────────────────────────────────── */

.serp {
  padding-top: 0;
  row-gap: var(--row);
}
@media (min-width: 80rem) {
  .serp {
    grid-template-rows: auto 1fr auto;
  }
  .serp > .serp__main {
    grid-row: 1 / 3;
  }
  /* 결과 수 한 줄 + 틈 한 줄 아래 — 즉답 머리와 같은 줄에 서서 2px 잉크 선이 1200px 로 이어진다 */
  .serp > .related-q {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-top: calc(var(--row) * 2);
    padding-left: calc(var(--spacing) * 6);
  }
  .serp > .side {
    grid-row: 2 / 4;
    position: static;
  }
  .serp > .pager {
    grid-row: 3;
  }
}
.serp__main {
  display: grid;
  row-gap: var(--row);
}
.serp__count {
  box-shadow: none;
}
.blk {
  scroll-margin-top: var(--row);
}

.answer__body {
  display: grid;
  row-gap: var(--cell);
}
/* 도식은 늘이지 않는다 — 13px 좌표 글자가 13px 로 남게 240×192 그대로 */
.route {
  width: calc(var(--spacing) * 60);
  max-width: calc(100% - 2 * var(--cell));
  margin-inline: var(--cell);
  height: calc(var(--row) * 6);
  color: var(--color-ink);
}
@media (min-width: 48rem) {
  .route {
    max-width: 100%;
    margin-inline: 0;
  }
  .answer__body {
    grid-template-columns: minmax(0, 1fr) calc(var(--spacing) * 60);
    column-gap: calc(var(--spacing) * 6);
    row-gap: 0;
  }
}
.route .grid {
  stroke: var(--color-rule);
}
.route .past {
  fill: var(--color-ink);
}
.route .now {
  fill: var(--color-current);
}
.route .next {
  fill: var(--color-bg);
  stroke: var(--color-ink);
}
.route text {
  fill: var(--color-ink-muted);
  font-size: 13px;
  font-family: var(--font-sans);
}
.route .lbl {
  fill: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
.route .lbl-now {
  fill: var(--color-current);
  font-weight: var(--font-weight-bold);
}
.tbl--ty .now-tag {
  margin-left: calc(var(--spacing) * 1);
  color: var(--color-current);
  font-size: var(--text-meta);
}
@media (max-width: 47.99rem) {
  .tbl--ty .opt {
    display: none;
  }
}

.dict__body {
  display: grid;
  row-gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 4) var(--cell);
  box-shadow: var(--shadow-row);
}
.dict__word {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: calc(var(--spacing) * 2);
}
.dict__word b {
  font-size: var(--text-lead);
}
.dict__defs {
  display: grid;
  row-gap: calc(var(--spacing) * 1);
  counter-reset: def;
}
.dict__defs li {
  counter-increment: def;
  display: grid;
  grid-template-columns: 2.5ch minmax(0, 1fr);
  word-break: keep-all;
}
.dict__defs li::before {
  content: counter(def) ".";
  color: var(--color-ink-muted);
}
.dict__more-list {
  counter-reset: def 2;
  padding-top: calc(var(--spacing) * 1);
}
.dict__ex {
  padding-top: calc(var(--spacing) * 2);
}
.linkbtn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-bold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 결과 한 건 — 4줄(128) · 출처 / 제목 / 요약 2줄, 질의어는 굵게(색 아님) */
.res {
  box-shadow: var(--shadow-row);
}
.res > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  column-gap: calc(var(--spacing) * 4);
  row-gap: calc(var(--spacing) * 0.5);
  padding: calc(var(--spacing) * 4) var(--cell);
  transition: background-color var(--default-transition-duration) var(--default-transition-timing-function);
}
@media (min-width: 48rem) {
  .res > a {
    min-height: calc(var(--row) * 4);
  }
}
@media (hover: hover) {
  .res > a:hover {
    background: var(--color-band);
  }
  .res > a:hover .res__t {
    text-decoration-line: underline;
  }
}
.res > a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus);
}
.res__t {
  font-size: var(--text-result);
  line-height: var(--text-result--line-height);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  word-break: keep-all;
}
.res__s {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
  color: var(--color-ink-muted);
  word-break: keep-all;
}
.res__s b {
  color: var(--color-ink);
}
.res--thumb > a {
  grid-template-columns: minmax(0, 1fr) calc(var(--spacing) * 24);
}
.res--thumb .ph {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  aspect-ratio: 16 / 9;
}
.res--side > a {
  grid-template-columns: calc(var(--spacing) * 22) minmax(0, 1fr);
}
.res--side .ph {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  aspect-ratio: 1 / 1;
}
.res--side > a > :not(.ph) {
  grid-column: 2;
}
@media (min-width: 48rem) {
  .res--thumb > a {
    grid-template-columns: minmax(0, 1fr) calc(var(--spacing) * 32);
  }
}

.imgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--spacing) * 1);
  padding: calc(var(--spacing) * 4) var(--cell);
  box-shadow: var(--shadow-row);
}
.imgs .ph {
  aspect-ratio: 1 / 1;
}
@media (min-width: 48rem) {
  .imgs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .imgs .ph {
    aspect-ratio: auto;
    height: calc(var(--row) * 4);
  }
}

.url {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 연관 검색어 — 2열 × 5줄 */
.rel__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
}
.rel__list li:nth-child(n + 6) {
  box-shadow: var(--shadow-row), inset 1px 0 0 var(--color-rule);
}

/* 페이지 번호(표현) */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1);
  min-height: var(--touch);
  font-size: var(--text-ui);
}
.pager a,
.pager span {
  display: inline-grid;
  place-items: center;
  min-width: var(--touch);
  min-height: var(--touch);
  padding-inline: calc(var(--spacing) * 1);
  border-radius: var(--radius-xs);
}
.pager [aria-current] {
  background: var(--color-inverse-bg);
  color: var(--color-inverse-ink);
  font-weight: var(--font-weight-bold);
}
.pager .off {
  color: var(--color-ink-muted);
}
@media (hover: hover) {
  .pager a:not([aria-current]):hover {
    background: var(--color-band);
  }
}
@media (min-width: 48rem) {
  .pager {
    height: var(--row);
    margin-top: var(--row);
  }
  .pager a,
  .pager span {
    min-width: var(--row);
    min-height: var(--row);
  }
  .pager .edge {
    padding-inline: calc(var(--spacing) * 3);
  }
}
@media (max-width: 47.99rem) {
  .pager .far {
    display: none;
  }
}

.alert {
  font-weight: var(--font-weight-bold);
}

/* ── 15. 소개 ───────────────────────────────────────────────────────────── */

.notice {
  display: grid;
  row-gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 8) var(--cell) 0;
}
.notice > * {
  max-width: var(--spacing-measure);
}
.notice__lead {
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  font-weight: var(--font-weight-bold);
  word-break: keep-all;
}
.notice p {
  word-break: keep-all;
}
@media (min-width: 48rem) {
  .notice {
    padding-top: var(--gap-band);
  }
}
.index__grid {
  display: grid;
  row-gap: var(--row);
}
@media (min-width: 48rem) {
  .index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .index__grid > section:nth-child(even) {
    box-shadow: inset 1px 0 0 var(--color-rule);
  }
}
@media (min-width: 80rem) {
  .index__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 0;
  }
  .index__grid > section + section {
    box-shadow: inset 1px 0 0 var(--color-rule);
  }
}
.index__grid h3 {
  font-size: var(--text-ui);
}
.index__grid .item > a {
  justify-content: space-between;
}
.index__grid .item .meta {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (hover: hover) {
  .index__grid .item > a:hover b {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
}
.facts th,
.facts td {
  height: auto;
  min-height: var(--touch);
  padding-block: calc(var(--spacing) * 2.5);
  white-space: normal;
}
.facts th {
  width: 8em;
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-meta);
}
@media (min-width: 48rem) {
  .facts th,
  .facts td {
    height: var(--row);
    padding-block: 0;
  }
}

/* ── 16. 로그인 (회차 2) — 12열 중 가운데 4열(400) 한 칸 ───────────────────
 * 줄(.login__row)은 컨테이너 전폭이고 내용(.login__col)만 가운데 400 에 선다 → 줄 괘선이 칸 좌우로 그대로 이어진다.
 * 칸 높이는 32 의 배수(머리·입력·버튼·간편 = 2줄, 나머지 1줄). 입력 칸은 모양이다(<input> 0) — 검색창처럼. */

.mast__menu {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  margin-left: auto;
  padding-inline: var(--cell);
  font-size: var(--text-ui);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (min-width: 48rem) {
  .mast__menu {
    padding-inline: 0;
  }
}
@media (hover: hover) {
  .mast__menu:hover {
    text-decoration-line: underline;
  }
}

/* 짧은 상태(#done)에서도 꼬리가 화면 바닥에 붙는다 — 로그인 페이지에만 */
body:has(> .login) {
  display: flex;
  flex-direction: column;
}
.login {
  --col: calc(var(--spacing-page) / 3); /* 4열 = 400 */
  flex: 1 0 auto;
  margin-top: var(--gap-band);
}
.login__row {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  box-shadow: var(--shadow-row);
}
@media (min-width: 48rem) {
  .login__row {
    min-height: var(--row);
  }
}
.login__row--2 {
  min-height: calc(var(--row) * 2);
}
.login__row--gap {
  min-height: var(--row);
  box-shadow: none;
}
.login__col {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--cell);
}
.login__col--flush {
  padding-inline: 0;
}

/* 제목 줄 — 페이지 머리라 2px 잉크 선이 전폭을 긋는다 */
.login__head {
  box-shadow: var(--shadow-head), var(--shadow-row);
}
.login__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
}
.login__h {
  font-size: var(--text-figure);
  line-height: var(--text-figure--line-height);
  letter-spacing: -0.01em;
}

/* 안내 띠 — 칸 안에만 띠 바탕 */
.login__note {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-block: var(--spacing);
  background: var(--color-band);
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  word-break: keep-all;
}

/* #error 문장 — 2줄: 무엇이 틀렸나(주홍 700, ▲ 없이 문장만) · 어떻게 고치나(보조). 주홍은 첫 줄에만 */
.login__err {
  display: grid;
  word-break: keep-all;
}
.login__err b {
  color: var(--color-accent);
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
}

/* 입력 칸(모양) — 2줄: 이름 13 · 예시 값 18. 테두리는 inset 선이라 칸 모서리 = 줄 괘선 자리 */
.login__row--field {
  align-items: stretch;
}
.field {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-inline: var(--cell) 0;
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-ink-muted);
}
/* 비밀번호 칸은 윗선을 아이디 칸의 아랫선과 나눠 쓴다 — 두 칸 사이 선이 한 겹 */
.field--pw {
  box-shadow:
    inset 1px 0 0 var(--color-ink-muted),
    inset -1px 0 0 var(--color-ink-muted),
    inset 0 -1px 0 var(--color-ink-muted);
}
.login[data-state="error"] .field {
  box-shadow: inset 0 0 0 2px var(--color-ink);
}
.login[data-state="error"] .field--pw {
  box-shadow:
    inset 2px 0 0 var(--color-ink),
    inset -2px 0 0 var(--color-ink),
    inset 0 -2px 0 var(--color-ink);
}
.field__stack {
  flex: 1;
  min-width: 0;
  display: grid;
}
.field__label {
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
}
.field__line {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--text-lead--line-height);
  color: var(--color-ink-subtle);
}
.field__value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
}
.field__dots {
  width: calc(var(--spacing) * 23);
  height: calc(var(--spacing) * 2);
}
.field__plain {
  display: none;
}
.field--pw:has([aria-pressed="true"]) .field__dots,
.field--pw:has([aria-pressed="true"]) .field__hidden {
  display: none;
}
.field--pw:has([aria-pressed="true"]) .field__plain {
  display: block;
}
.chip {
  flex: none;
  padding-inline: var(--spacing);
  border-radius: var(--radius-xs);
  background: var(--color-band);
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
}
.field__eye {
  align-self: stretch;
  min-width: var(--touch);
  padding-inline: var(--cell);
  font-size: var(--text-meta);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.field__eye:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus);
}
@media (hover: hover) {
  .field__eye:hover {
    text-decoration-line: underline;
  }
}

/* 누름 표현 — 켬/끔 글자는 aria-pressed 가 고른다 */
[aria-pressed="true"] > .off,
[aria-pressed="false"] > .on {
  display: none;
}

/* 옵션 줄 — 체크 · 토글(모서리 2px, 둥근 알약 없음) */
.login__opts {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.opt {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--touch);
  padding-inline: var(--cell);
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
}
.opt:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus);
}
.opt__box {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}
.opt__box rect {
  fill: var(--color-bg);
  stroke: var(--color-ink-muted);
  stroke-width: 1.5;
  transition: fill var(--default-transition-duration) var(--ease-out);
}
.opt__box path {
  fill: none;
  stroke: var(--color-inverse-ink);
  stroke-width: 2;
  stroke-linecap: square;
  opacity: 0;
}
@media (hover: hover) {
  .opt:hover .opt__box rect,
  .opt:hover .switch__track {
    stroke: var(--color-ink);
    box-shadow: inset 0 0 0 1.5px var(--color-ink);
  }
  .opt:hover > span:not([class]) {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
}
.opt[aria-pressed="true"] .opt__box rect {
  fill: var(--color-ink);
  stroke: var(--color-ink);
}
.opt[aria-pressed="true"] .opt__box path {
  opacity: 1;
}
.switch b {
  min-width: 3ch;
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
}
.switch__track {
  position: relative;
  flex: none;
  width: calc(var(--spacing) * 7);
  height: calc(var(--spacing) * 4);
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1.5px var(--color-ink-muted);
  transition: background-color var(--default-transition-duration) var(--ease-out);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: calc(var(--spacing) * 0.75);
  left: calc(var(--spacing) * 0.75);
  width: calc(var(--spacing) * 2.5);
  height: calc(var(--spacing) * 2.5);
  background: var(--color-ink-muted);
  transition: transform var(--default-transition-duration) var(--ease-out);
}
.switch[aria-pressed="true"] .switch__track {
  background: var(--color-ink);
  box-shadow: none;
}
.switch[aria-pressed="true"] .switch__track::after {
  background: var(--color-inverse-ink);
  transform: translateX(calc(var(--spacing) * 3));
}

/* 로그인 버튼 — 이 화면에서 가장 큰 물건. 48 = 1.5줄, 2줄 칸 가운데 */
.login__btn {
  display: grid;
  place-items: center;
  height: calc(var(--spacing) * 12);
  border-radius: var(--radius-xs);
  background: var(--color-inverse-bg);
  color: var(--color-inverse-ink);
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  font-weight: var(--font-weight-bold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: transform 100ms var(--ease-out);
}
.login__btn:active {
  transform: scale(0.98);
}
@media (hover: hover) {
  .login__btn:hover {
    text-decoration-line: underline;
  }
}

/* 보조 링크 · 완료 링크 */
.login__aux {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
}
.login__aux a,
.done__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing);
  min-height: var(--touch);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.login__aux i {
  font-style: normal;
  color: var(--color-ink-muted);
}
@media (hover: hover) {
  .login__aux a:hover {
    text-decoration-line: underline;
  }
}
.done__t {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  font-weight: var(--font-weight-bold);
}
.done__t svg {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}
.done__links {
  display: flex;
  gap: calc(var(--spacing) * 6);
  font-size: var(--text-ui);
}
.done__links a {
  text-decoration-line: underline;
}

/* 간편 로그인 — 머리 줄(칸 안 2px 잉크) + 세 칸 */
.easy__head {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-head);
}
.easy__head h2 {
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
}
.login__row--easy {
  align-items: stretch;
}
.easy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.easy li + li {
  box-shadow: inset 1px 0 0 var(--color-rule);
}
.easy a {
  display: grid;
  justify-items: center;
  align-content: center;
  row-gap: var(--spacing);
  height: 100%;
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: background-color var(--default-transition-duration) var(--ease-out);
}
.easy svg {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}
.easy a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus);
}
@media (hover: hover) {
  .easy a:hover {
    background: var(--color-band);
  }
  .easy a:hover span {
    text-decoration-line: underline;
  }
}

/* 화면 상태 줄(템플릿 보기) — 탭 모양 링크, 현재 = 주홍 밑줄 */
.login__demo {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-left: var(--cell);
}
.login__demo .tab {
  font-size: var(--text-meta);
}

/* ── 17. 동작 줄이기 — 도는 것 0 ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0s !important;
  }
}