:root {
  --fs: 16px;          /* 본문 글자 크기 — 컨트롤로 변경 */
  --lh: 1.6;
  --measure: 40em;     /* em 기준이라 글자 크기에 따라 컨테이너 폭도 함께 변함 */
  --pad: 24px;         /* header와 container가 공유하는 좌우 여백 */

  color-scheme: light;
  --bg: #fbfaf7;
  --fg: #1f1d1a;
  --muted: #8a827a;
  --line: #e3ded4;
  --memo-bg: #ffffff;
  --note-line: #b3aaa0;
  --shadow: rgba(60, 50, 40, 0.13);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dissolve: 180ms;   /* js/main.js가 이 값을 읽어 타이밍을 맞춘다 */

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

html[data-size="s"] { --fs: 12px; }
html[data-size="m"] { --fs: 16px; }
html[data-size="l"] { --fs: 20px; }

/* 기본은 위의 밝은 팔레트로 고정한다. 시스템이 다크 모드여도 밝게 열리고,
   헤더의 검은 사각형을 눌러야 어두워진다. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161513;
  --fg: #e9e5de;
  --muted: #8d857b;
  --line: #33302b;
  --memo-bg: #22201d;
  --note-line: #6b635a;
  --shadow: rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

/*
 * 배경을 body에만 두면 화면 밖 영역(iOS의 고무줄 스크롤 구간, 노치 아래)은
 * 캔버스 기본색으로 남아 검게 드러난다. 루트에 직접 칠해야 그 영역까지 덮인다.
 * overflow-x도 여기에 함께 건다 — body에만 걸면 뷰포트로 전파되는 조건이
 * 브라우저마다 달라서 iOS에서 가로 스크롤이 그대로 남았다.
 */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* keep-all로 어절을 통째로 넘기면 줄 끝이 최대 64px까지 들쭉날쭉해진다.
     음절 사이에서 끊게 두면 그 편차가 14px로 줄어든다.
     break-all과 결과는 같지만 normal은 숫자나 영문 토큰은 쪼개지 않는다. */
  word-break: normal;
  overflow-wrap: break-word;

  /* 메모 카드는 절대 위치라 밀려나면 가로 스크롤을 만든다. js가 화면 안으로
     당겨주지만, 그 계산이 늦거나 어긋나도 좌우로 밀리지는 않게 막아둔다.
     hidden과 달리 clip은 스크롤 컨테이너를 만들지 않아 sticky 헤더가 살아 있다. */
  overflow-x: clip;
}

/* ---------- 헤더 ---------- */

/* 바 자체는 화면 전체를 덮고(스크롤 시 본문을 가려줌),
   내용물만 500px로 묶어 container와 왼쪽 끝을 맞춘다. */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  /*
   * 페이지와 완전히 같은 불투명 색이어야 한다.
   * 반투명 + backdrop-filter였을 때는 가만히 있을 땐 같은 색으로 합성됐지만,
   * 뒤로 본문이 지나가면 블러가 그 색을 끌어와 띠가 회색으로 물들었다.
   * viewport-fit=cover 이후로는 이 헤더가 상태 표시줄 뒤를 덮기 때문에,
   * 그 얼룩이 곧 "상단 UI가 배경색과 안 맞는" 증상으로 나타났다.
   */
  background: var(--bg);

  /* viewport-fit=cover로 페이지가 상태 표시줄 아래까지 올라온다.
     그만큼 내용을 내려 컨트롤이 시계·배터리에 가리지 않게 하고,
     헤더 배경은 그 위까지 덮여 상태 표시줄 영역이 페이지와 같은 색이 된다. */
  padding-top: env(safe-area-inset-top, 0px);

  /* 헤더는 본문 크기 변화에 영향받지 않도록 고정 */
  font-size: 15px;
  line-height: 1.4;
}

.header__inner {
  max-width: 500px;
  margin: 0;
  /* 가로 모드에서 노치 쪽으로 붙지 않도록 안전 영역을 더한다 (세로에서는 0) */
  padding-left: calc(var(--pad) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--pad) + env(safe-area-inset-right, 0px));
  height: 60px;
  display: flex;
  align-items: center;
}

/* ---------- 컨트롤 ---------- */

.controls {
  display: flex;
  align-items: center;
  gap: 22px;      /* 두 묶음 사이는 넓게 */
}

.control-group {
  display: flex;
  align-items: center;
  gap: 9px;       /* 이름표와 도형 사이는 좁게 — 둘이 한 덩어리로 읽히도록 */
}

.control-group__label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
  user-select: none;
}

/* ---------- 글자 크기 슬라이더 ---------- */

.size-slider {
  --pos: 0.5;          /* 0 / 0.5 / 1 — js가 단계에 맞춰 바꾼다 */
  --knob: 22px;
  position: relative;
  width: 92px;
  height: var(--knob);
  flex: none;
}

/* 선은 손잡이가 오가는 구간, 즉 양 끝 원의 중심까지만 긋는다 */
.size-slider__track {
  position: absolute;
  top: 50%;
  left: calc(var(--knob) / 2);
  right: calc(var(--knob) / 2);
  height: 2px;
  margin-top: -1px;
  background: var(--fg);
  pointer-events: none;
}

.size-slider__knob {
  position: absolute;
  top: 0;
  left: calc(var(--pos) * (100% - var(--knob)));
  width: var(--knob);
  height: var(--knob);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  user-select: none;
  pointer-events: none;
  transition: left 0.18s var(--ease);
}

/* 투명한 native range가 그 위를 덮는다. 끌기, 클릭, 좌우 방향키가 공짜로 따라온다. */
.size-slider__input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: -13px 0;      /* 손가락이 닿는 세로 여유 */
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* appearance: none만으로는 부족하다. Chrome은 배경 없는 thumb을 투명하게
     그리지만 iOS Safari는 기본 흰 사각형을 그려서, 그게 원 뒤에 겹쳐 보였다.
     opacity: 0이면 어느 쪽이든 확실히 사라진다(입력은 그대로 받는다). */
  opacity: 0;
}

/* 손잡이 폭을 원과 맞춰야 값이 바뀌는 지점과 원의 위치가 어긋나지 않는다 */
.size-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--knob);
  height: var(--knob);
}

.size-slider__input::-moz-range-thumb {
  width: var(--knob);
  height: var(--knob);
  border: 0;
}

.size-slider__input:focus { outline: none; }

.size-slider__input:focus-visible ~ .size-slider__knob {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.themes {
  display: flex;
  align-items: center;
  gap: 7px;
}

.theme-btn {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}

/* 사각형은 작게 두되 손가락이 닿는 면적은 넓힌다 (레이아웃에는 영향 없음) */
.theme-btn::after {
  content: "";
  position: absolute;
  inset: -12px -6px;
}

.theme-btn[data-theme="dark"] { background: #1f1d1a; }
.theme-btn[data-theme="light"] { background: #ffffff; }

.theme-btn:hover { border-color: var(--muted); }

.theme-btn[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg);
}

.theme-btn:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}

/* ---------- 본문 ---------- */

.container {
  max-width: var(--measure);
  margin: 0;
  padding: 64px var(--pad) 120px;
  /* 헤더와 같은 기준으로 안전 영역을 더해 본문 왼쪽 끝을 맞춘다.
     메모 클램프는 이 계산된 padding을 읽으므로 함께 따라온다. */
  padding-left: calc(var(--pad) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--pad) + env(safe-area-inset-right, 0px));
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

/* 크기 전환 중에는 본문을 지웠다가 되살린다 */
.letter {
  opacity: 1;
  transition: opacity var(--dissolve) var(--ease);
}

.letter.is-dissolving { opacity: 0; }

.letter__greeting {
  margin: 0 0 2em;
  font-weight: 600;
}

.letter p { margin: 0 0 1.6em; }

.letter__signature {
  margin-top: 3.5em;
  padding-top: 1.8em;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.letter__signature p { margin: 0 0 0.4em; }
.letter__signature .name {
  color: var(--fg);
  font-weight: 600;
}

/* ---------- 점선 밑줄 + 메모 ---------- */

.note-wrap {
  position: relative;
  display: inline-block;
}

.note {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  text-decoration: underline dotted var(--note-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color 0.15s var(--ease);
}

.note:hover,
.note-wrap.is-open .note {
  text-decoration-color: var(--fg);
}

.note:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 2px;
}

.memo {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  margin-left: var(--shift, 0px);
  width: max-content;
  /* min()을 못 읽는 브라우저에서 max-width가 통째로 무시되면 카드가
     max-content 폭(한 줄로 늘어선 문장)이 되어 화면을 크게 넘는다. */
  max-width: 78vw;
  max-width: min(24em, 78vw);

  /* 간격을 padding으로 주면 카드가 밑줄에 붙어 있어서,
     마우스를 카드로 옮기는 동안 hover가 끊기지 않는다 */
  padding-top: 10px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease),
              visibility 0s linear 0.16s;
}

.note-wrap.is-open .memo {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease),
              visibility 0s;
}

.memo__body {
  /* span이라 기본이 inline이다. 그대로 두면 줄이 바뀔 때마다
     테두리와 배경이 조각나서 카드가 두 동강 난다. */
  display: block;
  padding: 0.75em 0.9em;
  background: var(--memo-bg);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px var(--shadow), 0 1px 3px var(--shadow);
  color: var(--fg);
  font-size: 0.875em;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  word-break: keep-all;
}

@media (max-width: 480px) {
  :root { --pad: 20px; }
  .container { padding-top: 40px; padding-bottom: 88px; }

}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}