/* ============================================================
   바탕. 초기화, 글꼴, 뼈대 레이아웃.
   ============================================================ */

/* 글꼴은 직접 들고 있다. 바깥 서버에서 받아오지 않는다.
   이유는 두 가지다. 하나는 인터넷이 끊겨도 앱이 제 모습이어야 해서,
   또 하나는 글꼴 서버에 사용자의 접속 기록을 남기지 않기 위해서다.
   본문 글꼴 이름은 Backcast Sans 다. Pretendard 를 줄여 담은 수정본이라 원래 이름을 쓰지 않는다
   (OFL 예약 글꼴 이름. 라이선스는 fonts/LICENSE-*.txt, 이유는 tools/build-fonts.py 머리). */
@font-face {
  font-family: 'Backcast Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/pretendard-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Backcast Sans';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/pretendard-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Backcast Sans';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/pretendard-700.woff2') format('woff2');
}

/* 제목용. 글자 수가 적어서 아주 작게 줄여 담았다.
   여기 없는 글자는 본문 글꼴(Backcast Sans)로 떨어진다(글자가 사라지지는 않는다). */
@font-face {
  font-family: 'BagelFatOne';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/bagel-display.woff2') format('woff2');
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  word-break: keep-all;          /* 한글이 낱글자로 잘리지 않게 */
  overflow-wrap: anywhere;       /* 대신 아주 긴 단어는 줄바꿈 허용 */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  min-height: 100dvh;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: var(--accent);
}

ul,
ol {
  list-style: none;
}

/* 키보드로 옮겨 다닐 때 어디 있는지 항상 보여야 한다.
   outline: none 으로 지우면 키보드만 쓰는 사람은 길을 잃는다. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 화면에는 안 보이지만 화면 낭독기는 읽는 글. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 앱 뼈대 ---------- */

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--header-h);
  padding: 0 var(--sp-3) 0 var(--sp-5);
  background: var(--bg);
  /* 홈 화면 앱으로 열면 상태바 아래로 내용이 들어간다 */
  padding-top: env(safe-area-inset-top);
  height: calc(var(--header-h) + env(safe-area-inset-top));
}

.app-header .brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-grow: 1;
  min-width: 0;
}

.app-header .brand-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app-main {
  flex-grow: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-4) calc(var(--tabbar-h) + var(--sp-8) + env(safe-area-inset-bottom));
}

/* 화면 하나. 한 번에 하나만 보인다. */
.view {
  display: none;
}

.view.is-active {
  display: block;
  animation: view-in 0.22s var(--ease);
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 아래 탭 ---------- */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  gap: var(--sp-1);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar .tab {
  flex: 1 1 0;
  max-width: 120px;
  min-height: var(--tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.tabbar .tab[aria-current='page'] {
  color: var(--accent);
}

.tabbar .tab svg {
  width: 22px;
  height: 22px;
}

/* ---------- 노트북 · 데스크톱 ----------
   폰 화면을 그대로 늘리지 않는다. 바뀌는 것은 둘이다.
     1. 아래에 떠 있던 탭을 왼쪽 세로줄로 옮긴다
     2. 남는 자리에 달력을 같이 띄운다  (PRD 의 «노트북에서는 목록과 달력을 한 화면에»)

   탭을 옮기면서 요소를 새로 만들지 않았다. 폰과 같은 nav 하나를 자리만 바꿔 쓴다.
   따로 만들면 같은 버튼이 화면에 둘이 되고, 화면 낭독기가 메뉴를 두 번 읽는다.

   왜 떠 있는 알약을 버렸나.
   1440px 에서 찍어 보니 알약이 오른쪽 목록의 맨 아래 항목을 덮고 있었다.
   폰에서는 엄지가 닿는 자리라 맞지만, 마우스로 쓰는 화면에서는 본문을 가리는 장애물이다. */
@media (min-width: 1024px) {
  /* 왼쪽 세로줄 하나에 로고와 이동 버튼을 모은다.
     예전에는 로고가 맨 왼쪽, 넣기 버튼이 맨 오른쪽, 본문이 가운데라 세로 축이 셋이었다.
     눈이 어디를 먼저 볼지 정하지 못한다. 이제 축은 둘이다. 왼쪽 줄과 본문. */
  #app {
    display: block;
    padding-left: var(--side-w);
  }

  /* 줄과 본문에 같은 색을 쓰면 선 하나로만 나뉘어서 레일로 읽히지 않는다.
     한 톤 눌러 깔아 두면 카드(흰색)가 앞으로 나온다. */
  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    width: var(--side-w);
    height: var(--header-h);
    padding: 0 var(--sp-6);
    background: var(--cream);
    border-right: 1px solid var(--line);
  }

  /* 넣기는 왼쪽 줄에 이미 있다. 같은 일을 하는 버튼을 한 화면에 둘 두지 않는다. */
  .app-header .icon-btn {
    display: none;
  }

  /* 로고 글자와 아래 메뉴 글자의 왼쪽 끝을 맞춘다.
     로고 도형과 메뉴 아이콘의 크기가 달라서, 그림만 맞추면 글자가 9px 어긋난다. */
  .app-header .brand {
    gap: var(--sp-3);
  }

  .app-header .brand svg {
    width: 22px;
    height: 22px;
  }

  .tabbar {
    top: var(--header-h);
    right: auto;
    bottom: 0;
    width: var(--side-w);
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: var(--sp-3);
    background: var(--cream);
    backdrop-filter: none;
    border-top: none;
    border-right: 1px solid var(--line);
    overflow-y: auto;   /* 화면이 아주 낮아도 항목이 잘리지 않게 */
  }

  .tabbar .tab {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 46px;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--sp-3);
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
  }

  /* 지금 어디인지는 색만으로 말하지 않는다. 칸 바탕까지 바뀐다. */
  .tabbar .tab[aria-current='page'] {
    background: var(--paper);
    box-shadow: var(--shadow-card);
  }

  .app-main {
    max-width: var(--wide-max);
    padding: var(--sp-6) var(--sp-6) var(--sp-10);
  }

  /* 두 칸으로 나누는 화면은 홈뿐이다. 나머지는 한 칸인데, 그 한 칸이 1120px 이면
     입력칸과 버튼이 가로로 늘어져 눈이 줄 끝까지 따라가야 한다. 읽기 좋은 폭으로 잡는다. */
  .app-main > .view:not(#view-home) {
    max-width: 760px;
  }

  /* 홈에서만 두 칸으로 나눈다. 왼쪽은 상태판, 오른쪽은 달력. */
  .home-split {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }

  /* 달력 칸은 붙잡아 둔다. 왼쪽 목록이 길어도 달력이 화면에 남는다. */
  .home-split__cal {
    position: sticky;
    top: var(--sp-6);
  }

  /* 나란히 둘 때는 달력의 제목을 한 번 더 쓰지 않는다 */
  .home-split__cal .page-head {
    display: none;
  }
}