/*
 * 미디어 탭 — 원본 아이로그 미디어 앱에서 이식한 목록·카드·필터·모달 규칙.
 *
 * 출처: ~/Library/Mobile Documents/com~apple~CloudDocs/000 아이로그 미디어/styles/main.css
 *
 * ── 반드시 지킬 것 ────────────────────────────────────────────────
 *
 * 1. 모든 셀렉터는 `#section-media`로 시작한다.
 *    미디어 클래스 233개와 일기 앱 클래스 309개 중 54개가 이름이 겹친다.
 *    접두를 하나라도 빠뜨리면 일기·독서·투자 탭이 함께 깨진다.
 *    scripts/tests/check-media-css-scope.js 가 이걸 기계로 검사한다.
 *
 * 2. 접두는 자손 결합자다. `#section-media`가 반드시 조상이어야 한다.
 *    상세 모달의 <dialog>도 #section-media 안에 넣어야 한다.
 *    밖에 두면 이 파일의 다이얼로그 규칙이 통째로 안 먹는다.
 *
 * 3. 아래 ② 중화 블록은 ③ 이식 규칙보다 앞에 있어야 한다.
 *    같은 특정도에서는 나중 것이 이긴다. 순서가 뒤집히면 중화가 이식을 지운다.
 *
 * 4. styles/main.css는 건드리지 않는다. 그게 이 접근의 요점이다.
 */

/* ① 변수 ─────────────────────────────────────────────────────────
 *
 * --bg / --text / --accent / --border / --bg-card / --text-muted /
 * --accent-soft / --accent-hover / --danger / --radius / --radius-sm
 * 는 일부러 정의하지 않는다. 일기 앱 :root 값을 그대로 상속해
 * 미디어 탭이 앱 전체와 한 벌로 보이게 한다.
 *
 * 아래 4개만 일기 앱에 없어서 새로 정의한다. 정의하지 않으면 해당
 * 선언이 통째로 무효가 되어 썸네일 자리가 투명해지고 폰트가 어긋난다.
 */
#section-media {
  /* 썸네일 자리·탭 바탕·다이얼로그 닫기 호버. --bg(#faf6f0)보다 한 단계 가라앉은 톤 */
  --bg-elevated: #f0e9dd;

  /* 이식 범위에서는 카테고리 태그에만 쓴다. 이름은 warning이지만 실제 용도는 호박색 라벨 */
  --warning: #7a5616;
  --warning-soft: rgba(184, 134, 74, 0.14);

  /* JetBrains Mono는 이 앱이 로드하지 않는다(Gaegu·SUITE Variable만).
     일기 앱이 main.css:1391·2650·4218 에서 쓰는 스택을 그대로 쓴다. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* 반투명 틴트 배경 위에서 읽히는 글자색.
     원본은 다크 배경을 전제해 밝은 색(#b8d0ff·#f0d078)을 썼는데
     크림색 위에서는 1.1:1 / 1.3:1 로 완전히 묻힌다. */
  --media-ink-blue: #2c4a7c; /* 파란 틴트 위 6.4:1 */
  --media-ink-amber: #7a5616; /* 호박 틴트 위 5.5:1 */
}

/* ② 중화 ─────────────────────────────────────────────────────────
 *
 * 스코프는 미디어 → 일기 누출만 막는다. 반대는 못 막는다.
 * 일기 앱의 전역 .entry-card / .tag 는 #section-media 안에서도 그대로
 * 적용된다. 특정도가 높은 이식 규칙이 이기는 것은 "자기가 선언한 속성"
 * 뿐이고, 선언하지 않은 속성은 전역 규칙이 그대로 통과한다.
 *
 * 예: 일기 .entry-card 는 padding 1.35rem/1.5rem·bg-card·shadow-card 를
 *     주는데, 원본 미디어 .entry-card 는 position:relative 한 줄뿐이다.
 *     (실제 카드 스타일은 .entry-card--compact 에 있다.)
 *
 * all:unset 은 상속 속성까지 날려 위험하므로 쓰지 않는다.
 * 새는 속성만 이름을 적어 무효화한다.
 */
#section-media .entry-card {
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

#section-media .entry-card:hover {
  transform: none;
  box-shadow: none;
}

#section-media .entry-card__thumb {
  display: block;
  gap: 0;
  margin-top: 0;
  flex-wrap: nowrap;
}

#section-media .entry-card__thumb img {
  border: none;
  border-radius: 0;
}

#section-media .tag {
  margin: 0;
}

/* ③ 이식 ───────────────────────────────────────────────────────── */

/* 선반 탭 — 시사/정보 · 영화/드라마 */
#section-media .tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  margin-bottom: 0.85rem;
  border: 1px solid var(--border);
}

#section-media .tabs__item {
  flex: 1;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: calc(var(--radius) - 4px);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

#section-media .tabs__item:hover {
  color: var(--text);
}

#section-media .tabs__item--active {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* 툴바 — 필터 + 검색 */
#section-media .toolbar {
  display: flex;
  /* 일기 앱 전역 .toolbar 가 flex-direction:column 을 준다. 원본은 가로 배치다 */
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  align-items: center;
}

#section-media .filter {
  display: flex;
  gap: 0.25rem;
  padding: 0.2rem;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

#section-media .filter__btn {
  padding: 0.4rem 0.75rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

#section-media .filter__btn:hover {
  color: var(--text);
}

#section-media .filter__btn--active {
  background: var(--accent-soft);
  /* 원본은 var(--accent). 일기 팔레트에서는 #b8864a on #e8d4b8 = 2.2:1 로 안 읽힌다 */
  color: var(--media-ink-amber);
}

/* .search 는 일기 앱이 input 자체에 쓰는 이름이라(main.css:575) 개명했다.
   원본에서는 입력을 감싸는 div 여서, 그대로 두면 래퍼에 테두리 상자가 하나 더 생긴다. */
#section-media .media-search {
  flex: 1;
  min-width: 180px;
}

#section-media .media-search__input {
  width: 100%;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
}

#section-media .media-search__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* 피드 — 가로형 컴팩트 카드 */
#section-media .feed-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#section-media .feed-list[hidden] {
  display: none !important;
}

#section-media .entry-card {
  position: relative;
}

#section-media .entry-card--compact {
  display: grid;
  grid-template-columns: 5.5rem 104px minmax(0, 1fr);
  gap: 0.65rem 0.85rem;
  align-items: start;
  padding: 0.65rem 0.35rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

#section-media .entry-card--compact:first-child {
  padding-top: 0.35rem;
}

#section-media .entry-card--compact:hover {
  /* 원본은 rgba(255,255,255,.03) — 크림색 위 흰색 3%라 보이지 않는다 */
  background: rgba(184, 134, 74, 0.06);
  border-radius: var(--radius-sm);
}

#section-media .entry-card__lead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

#section-media .entry-card__recorded {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.35;
  min-width: 0;
}

#section-media .entry-card__recorded-label {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.625rem;
}

#section-media .entry-card__recorded-time {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text);
}

/* 상태 토글 — 볼 예정 ↔ 시청 완료 */
#section-media .entry-card__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  margin-top: 0.3rem;
}

#section-media .entry-card__status-btn {
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  transition: filter 0.15s, transform 0.1s;
}

#section-media .entry-card__status-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

#section-media .entry-card__status-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#section-media .entry-card__status-date {
  font-size: 0.625rem;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.2;
}

/* 썸네일 */
#section-media .entry-card__thumb {
  position: relative;
  width: 185px;
  height: 104px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}

#section-media .entry-card__icon {
  font-size: 1.75rem;
  line-height: 1;
  opacity: 0.85;
}

#section-media .entry-card--article .entry-card__thumb {
  /* 원본은 #1e293b → #0f172a. 밝은 앱 속 검은 상자가 되어 톤을 맞췄다 */
  background: linear-gradient(145deg, #efe7da 0%, #e4d9c6 100%);
}

/* 이코노미스트 브랜드 빨강은 의도된 색이라 그대로 둔다.
   흰색 18% 테두리도 자기 배경(진한 빨강) 위에 얹히므로 밝은 배경과 무관하다. */
#section-media .entry-card--economist-brand .entry-card__thumb {
  background: linear-gradient(160deg, #e3120b 0%, #9b0c08 100%);
  border-color: rgba(255, 255, 255, 0.18);
}

#section-media .entry-card__economist-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.35rem;
  text-align: center;
}

#section-media .entry-card__economist-mark {
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: uppercase;
}

#section-media .entry-card--has-thumb .entry-card__thumb {
  /* 테두리는 썸네일 이미지 위에 얹히므로 원본 값을 유지한다 */
  border-color: rgba(255, 255, 255, 0.12);
  /* 그림자만 일기 앱 톤으로. 원본 rgba(0,0,0,.25)는 밝은 종이색 위에서 탁하다 */
  box-shadow: 0 2px 8px rgba(44, 36, 22, 0.12);
}

#section-media .entry-card__thumb .content-open-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: inherit;
}

#section-media .entry-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

#section-media .content-open-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: inherit;
}

#section-media .content-open-link:hover {
  box-shadow: 0 0 0 2px var(--accent);
}

#section-media .content-open-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 카드 본문 — 제목 / 주요내용 / 주요키워드 3행 */
#section-media .entry-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

#section-media .entry-card__row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 0.35rem 0.5rem;
  align-items: baseline;
  font-size: 0.8125rem;
  line-height: 1.45;
}

#section-media .entry-card__label {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

#section-media .entry-card__value {
  min-width: 0;
  color: var(--text);
}

#section-media .entry-card__value--title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}

#section-media .entry-card__title-text {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
}

/* 선반 배지 — 검색 중에만 보인다 */
#section-media .entry-card__shelf {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  vertical-align: middle;
  background: rgba(184, 134, 74, 0.14);
  /* 원본은 var(--accent-hover) — 일기 팔레트에서 3.6:1 로 기준 미달 */
  color: var(--media-ink-amber);
}

#section-media .entry-card__shelf--film {
  background: rgba(91, 141, 239, 0.14);
  color: #3b5f9a;
}

#section-media .entry-card__published {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

#section-media .entry-card__value--summary {
  color: var(--text);
  font-size: 0.8125rem;
}

#section-media .entry-card__value--tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

#section-media .entry-card__empty {
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* 태그 — 키워드(파랑) · 카테고리(호박). 두 색은 정보를 나르므로 구분을 유지한다 */
#section-media .tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 999px;
  background: var(--accent-soft);
  /* 원본은 var(--accent) — 일기 팔레트에서 #b8864a on #e8d4b8 = 2.2:1.
     카드 안에서는 아래 --tags 규칙이 늘 덮지만, 5단계 모달은 이 기본형을 쓴다 */
  color: var(--media-ink-amber);
}

#section-media button.tag {
  border: none;
  cursor: pointer;
  font: inherit;
  line-height: 1.3;
  transition: background 0.15s, transform 0.1s;
}

#section-media button.tag:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

#section-media button.tag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#section-media .tag--category {
  background: var(--warning-soft);
  color: var(--warning);
}

#section-media .entry-card__value--tags .tag:not(.tag--category) {
  background: rgba(91, 141, 239, 0.24);
  /* 원본 #b8d0ff — 합성 배경 #d4ddf0 위에서 1.1:1 */
  color: var(--media-ink-blue);
  border: 1px solid rgba(91, 141, 239, 0.5);
  font-weight: 600;
}

#section-media .entry-card__value--tags .tag--category {
  background: rgba(240, 180, 41, 0.2);
  /* 원본 #f0d078 — 합성 배경 #f8e9c8 위에서 1.3:1 */
  color: var(--media-ink-amber);
  border: 1px solid rgba(240, 180, 41, 0.45);
  font-weight: 600;
}

/* 상태 배지 — 원본이 이미 따뜻한 톤이라 색을 그대로 쓴다 */
#section-media .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: var(--mono);
  border: 1px solid transparent;
  white-space: nowrap;
}

#section-media .badge--to-watch {
  background: rgba(180, 150, 120, 0.18);
  color: #7a6550;
  border-color: rgba(180, 150, 120, 0.35);
  font-weight: 500;
}

#section-media .badge--watched {
  background: rgba(120, 150, 130, 0.22);
  color: #4a6350;
  border-color: rgba(120, 150, 130, 0.4);
  font-weight: 500;
}

/* 버튼 */
#section-media .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

#section-media .btn:active {
  transform: scale(0.98);
}

#section-media .btn--primary {
  background: var(--accent);
  color: #fff;
}

#section-media .btn--primary:hover {
  background: var(--accent-hover);
}

#section-media .btn--secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
}

#section-media .btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

#section-media .btn--ghost {
  background: transparent;
  color: var(--text-muted);
}

#section-media .btn--ghost:hover {
  color: var(--text);
}

#section-media .btn--sm {
  padding: 0.4rem 0.65rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* 상세 모달 — 원본의 좌우 분할(.dialog--split)과 미리보기 패널은 가져오지 않는다.
   축소판은 아래 .media-detail__* 세 규칙이다(5단계).
   <dialog>는 반드시 #section-media 안에 두어야 이 규칙이 먹는다. */
#section-media .dialog {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  max-width: 520px;
  width: calc(100% - 2rem);
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow);
}

#section-media .dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
}

#section-media .dialog__form {
  display: flex;
  flex-direction: column;
}

#section-media .dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 0;
}

#section-media .dialog__title {
  margin: 0;
  font-size: 1.125rem;
  flex: 1 1 auto;
  min-width: 0;
}

#section-media .dialog__close {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

#section-media .dialog__close:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

#section-media .dialog__body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-height: 65vh;
  overflow-y: auto;
}

#section-media .dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
}

#section-media .dialog__footer-right {
  display: flex;
  gap: 0.5rem;
}

/* 상세 모달 축소판 — 원본에 대응하는 마크업이 없다.
   원본 오른쪽 패널은 <input>·<select>·contenteditable로 된 편집 폼이라
   읽기 전용으로는 한 줄도 그대로 쓸 수 없었다. 아래 세 규칙만 새로 만들고
   나머지는 위 .dialog__* 기본형과 목록에서 쓰던 .tag·.badge를 그대로 쓴다. */

#section-media .media-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

#section-media .media-detail__meta strong {
  color: var(--text);
  font-weight: 600;
}

#section-media .media-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

#section-media .media-detail__tags:empty {
  display: none;
}

#section-media .media-detail__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 본문은 main.css의 전역 .body-preview__content가 그린다(사진·문단·링크).
   여기서는 모달 안에서의 간격만 잡는다. 바깥 .body-preview는 쓰지 않는다 —
   배경과 테두리가 있어 dialog 배경 위에 카드가 한 겹 더 얹힌 꼴이 된다. */
#section-media .dialog__body .body-preview__content {
  min-width: 0;
}

#section-media .dialog__body .body-preview__content .media-detail__empty {
  color: var(--text-muted);
  font-style: italic;
}

/* 형광펜 — 119건 중 1건이 [hl]…[/hl]을 쓴다. 안 그리면 대괄호가 글자로 샌다.
   main.css의 .reading-hl 규칙은 .rich-editor 아래로 스코프돼 있어 읽기 전용
   렌더에는 내려오지 않는다. 값은 main.css:1853-1873과 같게 맞췄다. */
#section-media .media-detail__hl {
  color: inherit;
  border-radius: 3px;
  padding: 0.05em 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: rgba(228, 180, 42, 0.52);
}

#section-media .media-detail__hl[data-hl="green"] {
  background: rgba(112, 186, 112, 0.42);
}

#section-media .media-detail__hl[data-hl="cyan"] {
  background: rgba(90, 190, 200, 0.4);
}

#section-media .media-detail__hl[data-hl="pink"] {
  background: rgba(230, 140, 175, 0.42);
}

#section-media .media-detail__hl[data-hl="blue"] {
  background: rgba(120, 165, 230, 0.4);
}

/* 빈 상태 — 영화/드라마 선반은 항상 비어 있다. 여기서 갇히면 안 된다 */
#section-media .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  display: none;
}

#section-media .empty-state.is-visible {
  display: flex;
}

#section-media .empty-state__hint {
  margin: 0;
  max-width: 28rem;
  line-height: 1.5;
}

#section-media #feed-empty-msg {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
  font-weight: 600;
}

/* ④ 모바일 ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  #section-media .entry-card--compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  #section-media .entry-card__recorded {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  #section-media .entry-card__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 180px;
  }

  #section-media .entry-card__row {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 0.25rem 0.4rem;
  }

  #section-media .entry-card__label {
    font-size: 0.625rem;
  }

  #section-media .entry-card__title-text {
    font-size: 0.8125rem;
  }

  #section-media .entry-card__value--title {
    flex-direction: column;
    gap: 0.15rem;
  }
}