/* 화면 테마(밝게/어둡게) 공용 정의.
 *
 * 어둡게는 각 화면이 이미 `:root { --bg: … }` 로 갖고 있는 값을 그대로 쓴다.
 * 여기서는 밝게만 `:root[data-theme="light"]` 로 정의한다. 속성 선택자가 붙어
 * 명시도가 한 단계 높으므로, 어느 스타일시트가 먼저 실려도 밝게가 이긴다.
 * 덕분에 styles.css / prototype.css / album-editor.html / cover-editor.css 의
 * 기존 어두운 토큰 블록을 하나도 건드리지 않아도 된다.
 *
 * `data-theme` 는 theme.js 가 첫 그림 전에 <html> 에 붙인다. "시스템 설정"을 골라도
 * JS 가 light/dark 중 하나로 확정해 붙이므로, CSS 에는 미디어 쿼리 사본이 필요 없다. */

:root[data-theme="light"] {
  /* 바탕과 면 */
  --bg: #f4f4f6;
  --paper: #f4f4f6;
  --surface: #ffffff;
  --card: #ffffff;
  --surface-2: #f0f0f3;
  --surface-3: #e6e6ec;
  --soft: #f0f0f3;
  --fill: #eeeef2;
  --fill-hover: #e2e2e9;

  /* 선 */
  --line: #e2e2e8;
  --line-strong: #c3c3ce;

  /* 글자 */
  --ink: #17171b;
  --ink-dim: #55555f;
  --ink-mute: #80808b;
  --ink-soft: #55555f;
  --muted: #55555f;
  /* 어두운 바탕 위에 흰 글자를 얹던 자리(--wine 배경 + --on-invert 글자)는
     밝게에서 역할이 뒤집힌다. 짙은 바탕에 흰 글자가 된다. */
  --wine: #17171b;
  --on-invert: #ffffff;
  --sage: #55555f;
  --wine-soft: #ededeb;
  --sage-soft: #eeeeeb;

  /* 상태색: 흰 바탕에서 읽히도록 어둡게 내린다 */
  --ok: #15803d;
  --ok-line: #9dd8b4;
  --ok-soft: #edf9f1;
  --warn: #a45b06;
  --warn-line: #ecc98d;
  --info: #1d4ed8;
  --danger: #c62828;
  --danger-line: #edaeae;
  --steel-hi: #2f3742;

  /* 편집 도구 묶음의 "브러시드 스테인리스" 질감. 어두운 테마에서는 각 파일에
     적혀 있는 기본값(어두운 금속)을 그대로 쓰고, 밝은 테마에서만 밝은 금속으로 바꾼다.
     빛 반사(sheen)도 함께 낮춰야 한다. 검은 막을 그대로 얹으면 흰 바탕이 잿빛이 된다. */
  --metal-top: #ffffff;
  --metal-bottom: #eceef2;
  --metal-btn-top: #ffffff;
  --metal-btn-bottom: #eaecf1;
  --metal-btn-hover-top: #ffffff;
  --metal-btn-hover-bottom: #dfe2e8;
  --metal-sheen: linear-gradient(148deg, #ffffffd9 0%, #ffffff59 24%, #0f172a0f 52%, #ffffff8c 72%, #0f172a1a 100%);
  --metal-grain: repeating-linear-gradient(91deg, #0f172a08 0 1px, #00000000 1px 3px);

  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* 이 둘은 어두운 팔레트를 만들 때 빠져서, 예전 밝은 값(#ededeb/#eeeeeb)이 그대로
     남아 있었다. `.upload-summary` 처럼 이 색을 배경으로 쓰는 자리는 흰 바탕에 흰 글자가
     되어 어두운 테마에서 지금도 읽을 수 없다. 어두운 면 색으로 맞춘다. */
  --wine-soft: #1d1d23;
  --sage-soft: #1d1d23;
}

/* ── 테마 단추 ────────────────────────────────────────────────
   화면 오른쪽 아래에 하나 떠 있다. theme.js 가 <body> 끝에 넣는다.
   앨범 열람(z-index 1000)처럼 화면을 덮는 창 위로는 올라오지 않는다. */

.theme-toggle {
  position: fixed;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px !important;
  background: var(--surface);
  color: var(--ink-dim);
  padding: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--fill-hover);
  color: var(--ink);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

.theme-toggle svg {
  display: block;
  pointer-events: none;
}

/* 인쇄물에는 화면 단추를 넣지 않는다 */
@media print {
  .theme-toggle { display: none !important; }
}

/* ── 테마에 따라 갈아 끼우는 아이콘 ─────────────────────────────
   구 아이콘은 그림 안에 어두운 유리와 그림자를 그려 넣은 그림이라, 색 토큰으로는
   밝게 만들 수 없다. 그래서 밝은 판(app-icon-liquid-light.svg,
   app-icon-sphere-shell-light.svg)을 함께 두고 여기서 하나만 보여 준다.

   src 를 JS 로 바꾸지 않고 두 장을 겹쳐 두는 이유: theme.js 가 첫 그림 전에
   <html> 에 data-theme 를 붙이므로, CSS 만으로 처음부터 맞는 판이 나온다.
   JS 로 바꾸면 어두운 판이 한 번 번쩍이고 밝은 판으로 바뀐다. */
/* 선택자를 :root 부터 쓰는 이유: 아이콘을 감싼 자리에는 이미
   `.library-brand-icon img { display:block }` 처럼 요소까지 짚는 규칙이 있다.
   `.theme-icon-light` 하나만으로는 명시도가 낮아 밀리고, 두 판이 함께 보인다. */
:root:not([data-theme="light"]) .theme-icon-light { display: none; }
:root[data-theme="light"] .theme-icon-dark { display: none; }

/* ── 화면과 화면 사이 전환 ─────────────────────────────────────
   보관함 → 일기장 → 사진 열람처럼 HTML 파일이 바뀌는 이동에서 흰 번쩍임·툭 끊김 대신
   앞 화면이 옅어지며 새 화면이 살짝 올라와 자리 잡는다(브라우저의 문서 간 View Transitions).
   이 파일은 모든 화면이 읽으므로 여기 한 번만 둔다. 같은 사이트 안 이동에만 걸린다.
   지원하지 않는 브라우저에서는 이 규칙을 무시하고 지금처럼 바로 바뀐다.
   아이폰 앱의 가장자리 밀어 뒤로 가기는 WebKit 이 제 움직임을 쓰므로 여기와 겹치지 않는다.
   브랜드 규칙: 빠르게 끝내되 튀지 않게 — 감속 곡선 하나, 되튐 없음. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: isle-page-out 140ms cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: isle-page-in 240ms cubic-bezier(.22, .8, .26, 1) both;
}
@keyframes isle-page-out { to { opacity: 0; } }
@keyframes isle-page-in { from { opacity: 0; transform: translateY(8px); } }

/* 움직임 줄이기를 켠 사람에게는 전환을 쓰지 않는다. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* 받는 중인 사진은 투명하게 두었다가 다 받으면 떠오른다(theme.js). */
img.isle-img-fade { transition: opacity 220ms cubic-bezier(.22, .8, .26, 1); }
img.isle-img-pending { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  img.isle-img-pending { opacity: 1; }
}