/* ── apple-design.md 토큰 (다크 컨텍스트) ───────────────────────── */
:root {
  --surface-black: #0a0a0b;
  /* 상단 sticky 바(헤더·컨트롤) 배경 — --surface-black 에서 자동 파생(반투명) */
  --surface-veil: rgb(from var(--surface-black) r g b / 0.72);
  --surface-tile-1: #161617;
  --surface-tile-2: #1d1d1f;
  --surface-raise: #2a2a2c;
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-soft: rgba(255, 255, 255, 0.055);

  --on-dark: #f5f5f7;
  --body-muted: #a1a1a6;
  --ink-mute-48: #6e6e73;

  --accent: #2997ff;

  --font:
    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 스크롤바 자리를 항상 확보 — 콘텐츠 길이가 바뀌어도 너비가 출렁이지 않음 */
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
body {
  background: var(--surface-black);
  color: var(--on-dark);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: var(--accent);
  text-decoration: none;
}

/* ── global-nav — 순흑 슬림 바 ───────────────────────────────── */
.global-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  background: var(--surface-veil);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  font-size: 15px;
  letter-spacing: -0.12px;
  color: var(--body-muted);
}
.global-nav .brand {
  color: var(--on-dark);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: auto;
  min-width: 0;
}
/* 메타 텍스트 + 안내 아이콘 묶음 — 데스크탑은 nav 정중앙 고정 */
.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.global-nav .nav-meta {
  color: var(--body-muted);
  font-variant-numeric: tabular-nums;
}
.global-nav .nav-meta b {
  color: var(--accent);
  font-weight: 600;
}
/* 축약 표기는 기본 숨김 — 모바일 미디어쿼리에서만 켠다 */
.nav-meta-short {
  display: none;
}
/* 갱신 주기 안내 — ! 아이콘 + 호버/클릭/터치 시 뜨는 말풍선 */
.nav-info {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.14s;
}
/* display:inline-flex 가 hidden 의 display:none 을 덮으므로 명시적으로 끈다 */
.nav-info[hidden] {
  display: none;
}
.nav-info:hover {
  filter: brightness(1.12);
}
.nav-info-pop {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: max-content;
  max-width: 232px;
  padding: 9px 12px;
  background: var(--surface-tile-1);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  /* nav-center 의 nowrap 를 상속하므로 말풍선 안에선 다시 줄바꿈 허용.
     keep-all 로 한국어 단어가 음절 단위로 쪼개지지 않게 한다. */
  white-space: normal;
  word-break: keep-all;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.2px;
  color: var(--on-dark);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s;
  z-index: 200;
}
.nav-info-pop strong {
  color: var(--accent);
  font-weight: 600;
}
.nav-info:hover .nav-info-pop,
.nav-info.open .nav-info-pop {
  opacity: 1;
  visibility: visible;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ── 컨트롤 — 상단 sticky ──────────────────────────────────────── */
.controls {
  position: sticky;
  top: 44px;
  z-index: 90;
  background: var(--surface-veil);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 13px 0;
}
.controls-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  flex-direction: column;
}
/* 접기 대상 — 날짜 스테퍼·검색·슬라이더 묶음. 칩은 바깥에 둬 늘 보인다.
   grid-template-rows 1fr↔0fr 로 높이를 부드럽게 접는다 — display:none 은
   트랜지션이 안 되므로. 안쪽 inner 가 overflow:hidden 으로 잘린다. */
.controls-top {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}
.controls.collapsed .controls-top {
  grid-template-rows: 0fr;
}
.controls-top-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-bottom: 13px; /* 슬라이더-토글 간격 — 접힐 때 같이 사라짐 */
  transition: opacity 0.3s ease;
}
.controls.collapsed .controls-top-inner {
  opacity: 0;
}
/* 펼침/접힘 토글 — 접히는 구간과 칩 사이 경계, 절제된 텍스트 버튼 */
.controls-toggle {
  align-self: center;
  margin-bottom: 13px; /* 토글-칩 간격 */
  border: 0;
  background: transparent;
  color: var(--body-muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.1px;
  padding: 2px 12px;
  cursor: pointer;
  transition: color 0.14s;
}
.controls-toggle:hover {
  color: var(--on-dark);
}
/* 접힌 토글에 덧붙는 현재 분야 — 모바일에서만 보인다.
   데스크탑은 칩이 늘 보이므로 분야를 토글에 또 적을 필요가 없다. */
.toggle-cat {
  display: none;
  font-weight: 600;
  color: var(--accent);
}

/* 1행 — 날짜 스테퍼 + 검색 */
.row-top {
  display: flex;
  gap: 9px;
  align-items: center;
}
.datestep {
  display: flex;
  align-items: center;
  background: var(--surface-tile-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 3px;
  flex-shrink: 0;
}
.datestep button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--on-dark);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s;
}
.datestep button:hover:not(:disabled) {
  background: var(--surface-raise);
}
.datestep button:disabled {
  opacity: 0.25;
  cursor: default;
}
.datestep .label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
  padding: 0 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 축약 날짜는 기본 숨김 — 모바일 미디어쿼리에서만 켠다 */
.date-short {
  display: none;
}
.search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-tile-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 0 14px;
  height: 38px;
  transition: border-color 0.14s;
}
.search:focus-within {
  border-color: var(--accent);
}
.search svg {
  flex-shrink: 0;
  opacity: 0.42;
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: 0;
  color: var(--on-dark);
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: -0.3px;
}
.search input::placeholder {
  color: var(--ink-mute-48);
}

/* 2행 — 시간 슬라이더 */
.timeline {
  display: flex;
  align-items: center;
  gap: 14px;
}
.timeline input[type="range"] {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  background: transparent;
  outline: 0;
  cursor: pointer;
}
/* WebKit — 트랙(4px) + thumb 중앙 정렬 */
.timeline input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    var(--accent) var(--fill, 100%),
    var(--surface-raise) var(--fill, 100%)
  );
}
.timeline input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 9999px;
  background: #fff;
  border: 0;
  margin-top: -5.5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
/* Firefox */
.timeline input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 9999px;
  background: var(--surface-raise);
}
.timeline input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 9999px;
  background: var(--accent);
}
.timeline input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 9999px;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.timeline .readout {
  font-size: 13px;
  letter-spacing: -0.2px;
  color: var(--body-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 64px;
  text-align: right;
}
.timeline .readout b {
  color: var(--on-dark);
  font-weight: 600;
}

/* 3행 — 분야 칩 (줄바꿈) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chip {
  border: 0;
  position: relative;
  background: rgba(255, 255, 255, 0.07);
  color: var(--on-dark);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.2px;
  border-radius: 9999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s;
}
.chip:hover {
  background: rgba(255, 255, 255, 0.13);
}
.chip.active {
  background: var(--on-dark);
  color: #000;
  font-weight: 600;
}
.chip-n {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  opacity: 0.45;
}
.chip.active .chip-n {
  opacity: 0.5;
}
/* 그 분야에 NEW 카드가 있을 때 — 칩 우상단 안쪽에 인셋한 accent 점 */
.chip-dot {
  display: none;
  position: absolute;
  /* 알약형 칩의 둥근 우상단 모서리에 걸치는 위치 — 절반은 칩 면 위,
     절반은 모서리 바깥 빈 영역. 음수 오프셋이 아니라 칩 박스 안이라 안 잘린다. */
  top: 1px;
  right: 1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.chip.has-new .chip-dot {
  display: block;
}
/* NEW 가상 칩 — accent 강조 */
.chip-new {
  background: rgb(from var(--accent) r g b / 0.16);
  color: var(--accent);
}
.chip-new:hover {
  background: rgb(from var(--accent) r g b / 0.24);
}
.chip-new.active {
  background: var(--accent);
  color: #fff;
}

/* ── 카드 ─────────────────────────────────────────────────────── */
main {
  padding: 8px 0 96px;
}
.cat-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.08px;
  text-transform: uppercase;
  color: var(--on-dark);
  margin: 36px 0 14px;
}
.cat-label:first-child {
  margin-top: 24px;
}

.card {
  position: relative;
  background: var(--surface-tile-1);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 26px 28px;
  margin-bottom: 14px;
  transition:
    border-color 0.18s,
    background 0.18s,
    box-shadow 0.18s;
}
.card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: var(--surface-tile-2);
}
/* NEW 카드 — accent 톤 보더. 풀 채도는 피해 절제. */
.card.is-new {
  border-color: rgb(from var(--accent) r g b / 0.45);
}
.card.is-new:hover {
  border-color: rgb(from var(--accent) r g b / 0.65);
}
.card-meta {
  font-size: 13px;
  letter-spacing: -0.2px;
  color: var(--ink-mute-48);
  font-variant-numeric: tabular-nums;
}
/* 슬라이더로 막 드러난 카드 — 우상단 코너 NEW 글자(그라데이션) */
.card-new {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: linear-gradient(115deg, #2997ff 10%, #6fd0ff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 검색어가 걸린 단어 강조 */
.hl {
  color: var(--accent);
}
.card-title {
  margin-top: 6px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.374px;
  color: var(--on-dark);
}
.card-body {
  margin-top: 11px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.32px;
  color: var(--body-muted);
}
.card-body p {
  margin: 0 0 9px;
}
.card-body p:last-child {
  margin-bottom: 0;
}
.card-body ul {
  margin: 9px 0;
  list-style: none;
}
.card-body li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 5px;
}
.card-body li:last-child {
  margin-bottom: 0;
}
.card-body li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-mute-48);
}
.card-body strong {
  color: var(--on-dark);
  font-weight: 600;
}
.card-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: var(--surface-raise);
  padding: 1.5px 5px;
  border-radius: 5px;
}
/* 블록(불릿·문단)에 딸린 임베드 — 그 항목 바로 아래 */
.card-body .embeds {
  margin-top: 8px;
}

/* 출처+원문 묶음 — 카드의 '근거' 영역 */
.card-source {
  margin-top: 20px;
}
.embeds {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.embed {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  background: var(--surface-tile-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.embed:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--surface-raise);
}
.embed-fav {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--surface-raise);
  flex-shrink: 0;
  object-fit: contain;
}
.embed-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.embed-domain {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--on-dark);
}
.embed-url {
  font-size: 12px;
  letter-spacing: -0.1px;
  color: var(--ink-mute-48);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-toggle {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.embeds + .raw-toggle {
  margin-top: 12px;
}

/* 채팅 원문 */
.raw {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.raw[hidden] {
  display: none;
}
.raw-msg .meta {
  font-size: 12px;
  letter-spacing: -0.1px;
  color: var(--ink-mute-48);
  margin-bottom: 5px;
  padding-left: 2px;
}
.raw-msg .meta b {
  color: var(--on-dark);
  font-weight: 600;
  font-size: 13px;
}
.raw-msg .txt {
  background: var(--surface-raise);
  border-radius: 4px 14px 14px 14px;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.2px;
  color: var(--body-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.state {
  padding: 100px 0;
  text-align: center;
  font-size: 16px;
  letter-spacing: -0.32px;
  color: var(--ink-mute-48);
}
.state.error {
  color: #ff6b5e;
}

@media (max-width: 600px) {
  .card {
    padding: 20px;
  }
  .card-title {
    font-size: 19px;
  }
  .timeline .readout {
    min-width: 56px;
    font-size: 12px;
  }
  /* nav — 좁은 폭에선 메타 묶음 정중앙 고정이 브랜드명과 겹친다.
     in-flow 오른쪽 정렬로 바꾸고(브랜드의 margin-right:auto 가 밀어냄),
     문구도 축약본으로 교체해 한 줄에 들어가게 한다. 브랜드는 …로 잘림. */
  .nav-center {
    position: static;
    transform: none;
    flex-shrink: 0;
    padding-left: 12px;
  }
  .nav-meta-full {
    display: none;
  }
  .nav-meta-short {
    display: inline;
  }
  /* 날짜 스테퍼 — 좁은 폭에선 축약 표기로 바꿔 검색칸 공간을 확보 */
  .date-full {
    display: none;
  }
  .date-short {
    display: inline;
  }
  /* 칩까지 같이 접기 — 칩을 grid 1fr↔0fr 로 감싸 controls-top 과 같은 방식으로
     접는다. 토글은 order 로 칩 아래로 내려, 접으면 헤더가 nav+토글만 남는다.
     (데스크탑은 chips-wrap 이 평범한 블록이라 이 규칙들이 적용되지 않는다.) */
  .chips-wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
    order: 1;
  }
  .controls.collapsed .chips-wrap {
    grid-template-rows: 0fr;
  }
  .chips {
    min-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
  }
  .controls.collapsed .chips {
    opacity: 0;
  }
  .controls-toggle {
    order: 2;
    margin: 13px 0 0;
  }
  .controls.collapsed .controls-toggle {
    margin-top: 0;
  }
  .toggle-cat {
    display: inline;
  }
}

/* ── View Transitions — 카드·칩·분야 라벨만 움직인다 ───────────── */
::view-transition-group(*) {
  animation-duration: 0.34s;
}
/* 루트(나머지 화면 전체)는 크로스페이드 끔 — 이름 붙은 요소만 모션 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ── 읽기 전 필독 — 컨트롤 바 아래, 콘텐츠 상단 진입점 ──────────── */
/* 박스 없이 글자색만 — NEW! 처럼 그라데이션을 텍스트에 클립해 흐른다. */
.readfirst {
  display: block;
  margin: 18px 0 0;
  padding: 4px 0;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.1px;
  background: linear-gradient(
    100deg,
    #2997ff 0%,
    #6fd0ff 28%,
    #a78bfa 50%,
    #6fd0ff 72%,
    #2997ff 100%
  );
  /* 200% + 이동값 -200% 라야 정확히 타일 1칸씩 흘러 이음매가 안 보인다. */
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rf-shimmer 4.5s linear infinite;
}
.readfirst[hidden] {
  display: none;
}
@keyframes rf-shimmer {
  to {
    background-position: -200% center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .readfirst {
    animation: none;
  }
}

/* ── 모달 — 읽기 전 필독 본문 ──────────────────────────────────── */
.modal {
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 440px;
  width: calc(100% - 44px);
}
.modal::backdrop {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-card {
  position: relative;
  background: var(--surface-tile-1);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 26px 26px 24px;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-raise);
  color: var(--body-muted);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.14s;
}
.modal-close:hover {
  color: var(--on-dark);
}
.modal-title {
  font-size: 19.5px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--on-dark);
  margin-bottom: 16px;
}
.modal-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
}
.modal-body li {
  position: relative;
  padding-left: 16px;
  font-size: 15.5px;
  line-height: 1.62;
  letter-spacing: -0.2px;
  color: var(--body-muted);
}
.modal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.modal-body strong {
  color: var(--on-dark);
  font-weight: 600;
}