/*
 * 기획안 09. 톤 가이드를 그대로 옮긴 것.
 *
 *   여백    과할 정도
 *   타이포  큰 자간·행간 세리프
 *   색상    무채색 + 종이 톤
 *   모션    스크롤 애니메이션 금지
 *   레이아웃 세로 한 줄 (카드 그리드 금지)
 *   다크모드 지원 필수
 *
 * 배지·카운트·인기 표시는 여기에 스타일이 아예 없다. 만들 수 없게 두는 편이
 * 만들지 말자고 적어두는 것보다 낫다.
 */

/*
 * 조용한 회색이 곧 흐린 회색은 아니다. muted / faint 둘 다 본문 배경 대비
 * 4.5:1 을 넘긴다 — 여백으로 조용하게 만들지, 안 보이게 해서 조용하게 만들지 않는다.
 */
:root {
  --paper: #f4f1ea;
  --ink: #1f1c17;
  --ink-muted: #565044; /* 7.1:1 */
  --ink-faint: #6f6859; /* 4.9:1 */
  --rule: #ddd6c8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131211;
    --ink: #e9e4da;
    --ink-muted: #a49b8b; /* 6.8:1 */
    --ink-faint: #8b8375; /* 5.0:1 */
    --rule: #2b2823;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /*
   * 폴백까지 전부 명조다. 고딕을 하나라도 끼워두면 웹폰트가 늦거나 막혔을 때
   * 페이지가 조용히 고딕이 되고, 그러면 톤 가이드가 지켜지는지 여부가
   * 네트워크 상태에 달리게 된다.
   */
  font-family: 'Noto Serif KR', 'AppleMyungjo', 'Nanum Myeongjo', 'Batang',
    serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 2.15;
  letter-spacing: 0.02em;
  /*
   * 한글은 기본값이면 어절 한가운데서도 줄이 넘어간다("아닙니 / 다").
   * keep-all 이라야 띄어쓰기에서만 끊긴다.
   */
  word-break: keep-all;
  /* 자연광으로 찍은 사진을 화면이 다시 만지지 않게 */
  -webkit-font-smoothing: antialiased;
}

/* 세로 한 줄. 넓히지 않는다 — 한 줄에 너무 많은 글자가 들어가면 읽는 속도가 붙는다. */
.page {
  max-width: 33rem;
  margin: 0 auto;
  padding: 8rem 1.75rem 7rem;
}

@media (min-width: 40rem) {
  .page {
    padding-top: 11rem;
    padding-bottom: 9rem;
  }
}

/* 섹션 사이는 과하다 싶을 만큼 띄운다 */
.section {
  margin-top: 7.5rem;
}

.section__label {
  margin: 0 0 2.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  /* 한글은 0.28em 쯤부터 쉼표가 앞뒤 글자에서 떨어져 나가 읽기가 걸린다 */
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}

/* --- 표제 --- */

.masthead__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.42em;
}

/*
 * 좁은 화면에서는 손으로 넣은 <br> 를 무시하고 그냥 흐르게 둔다.
 * 한 줄이 안 들어가는 폭에서 <br> 를 살려두면 자연 줄바꿈과 겹쳐서
 * "어떤 / 지" 처럼 낱말이 잘린다. 세 줄로 끊어 읽히는 건 줄이 들어갈 때만.
 */
.masthead__line {
  margin: 2.5rem 0 0;
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

.masthead__line br {
  display: none;
}

/* 가장 긴 줄이 들어가는 폭부터 손으로 끊은 줄을 살린다 */
@media (min-width: 34rem) {
  .masthead__line {
    font-size: 1.4rem;
  }

  .masthead__line br {
    display: inline;
  }
}

.masthead__note {
  margin: 2rem 0 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

/* --- 상태 진입점 --- */

.states {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.states__item {
  border-bottom: 1px solid var(--rule);
}

.states__link {
  display: block;
  padding: 1.75rem 0;
  color: var(--ink);
  font-size: 1.05rem;
  text-decoration: none;
}

/* 이동이 아니라 색이 가라앉는 정도로만. 움직이지 않는다. */
.states__link:hover,
.states__link:focus-visible {
  color: var(--ink-muted);
}

/* --- 오늘의 한 곳 --- */

.today {
  margin: 0;
}

.today__figure {
  margin: 0;
}

/* 사진에 필터를 걸지 않는다. 보정은 찍을 때 끝난다. */
.today__photo {
  display: block;
  width: 100%;
  height: auto;
}

.today__name {
  margin: 2.75rem 0 0;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.today__where {
  margin: 0.5rem 0 0;
  color: var(--ink-faint);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

.today__line {
  margin: 1.75rem 0 0;
  font-size: 1.02rem;
}

.today__link {
  display: inline-block;
  margin-top: 2.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.today__link:hover,
.today__link:focus-visible {
  color: var(--ink-muted);
}

/* --- 목록 --- */

.places {
  margin: 0;
  padding: 0;
  list-style: none;
}

.place {
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.place:first-child {
  padding-top: 0;
}

.place__link {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.place__name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.place__where {
  margin: 0.4rem 0 0;
  color: var(--ink-faint);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

.place__line {
  margin: 1.5rem 0 0;
  font-size: 0.98rem;
}

.place__suitable {
  margin: 1.5rem 0 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

/*
 * --- 일곱 축 ---
 *
 * teaspace.js / list.js 가 만드는 마크업에 붙는다. 상세와 목록이 같은 CSS 를
 * 쓰는 게 중요하다 — 축 패턴이 지문 노릇을 하려면 어디서 보든 같아야 한다.
 */

.teaspace-axes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.teaspace-axis {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'name  name'
    'track track'
    'left  right';
  gap: 0.5rem 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.6;
}

.teaspace-axis:last-child {
  border-bottom: 0;
}

.teaspace-axis__name {
  grid-area: name;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
}

.teaspace-axis__left {
  grid-area: left;
  color: var(--ink-faint);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.teaspace-axis__right {
  grid-area: right;
  color: var(--ink-faint);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-align: right;
}

/*
 * 눈금과 점. --teaspace-axis-position 은 1~5 를 0~1 로 옮긴 값이다.
 *
 * 0 과 1 에서 점이 눈금 밖으로 반쯤 잘려나가지 않게 양끝을 점 반지름만큼
 * 밀어둔다. 1(고요함)과 5(웅성거림)는 가장 자주 나오는 값이라 여기가 깨지면
 * 제일 눈에 띈다.
 *
 * 점을 색으로 강조하지 않는다 — 어느 쪽 끝도 더 낫지 않으므로
 * 색을 쓰는 순간 한쪽이 좋아 보이기 시작한다.
 */
.teaspace-axis::before {
  content: '';
  grid-area: track;
  height: 11px;
  background-image: radial-gradient(
      circle at calc(4px + var(--teaspace-axis-position) * (100% - 8px)) 50%,
      var(--ink) 0 3.5px,
      transparent 4px
    ),
    linear-gradient(
      to bottom,
      transparent 5px,
      var(--rule) 5px,
      var(--rule) 6px,
      transparent 6px
    );
  background-repeat: no-repeat;
}

/* 아직 보지 못한 축은 눈금만 남고 점이 없다. 가운데로 끌어다 놓지 않는다. */
.teaspace-axis[data-unknown]::before {
  background-image: linear-gradient(
    to bottom,
    transparent 5px,
    var(--rule) 5px,
    var(--rule) 6px,
    transparent 6px
  );
}

.teaspace-axis__observed {
  grid-area: name;
  justify-self: end;
  color: var(--ink-faint);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* 목록에 붙는 미니 버전 — 눈금만 촘촘히 겹쳐 패턴만 읽히게 */
.teaspace-axes--mini {
  margin-top: 2rem;
}

.teaspace-axes--mini .teaspace-axis {
  grid-template-columns: 4.5rem 1fr;
  grid-template-areas: 'name track';
  align-items: center;
  gap: 0 1rem;
  padding: 0.45rem 0;
  border-bottom: 0;
}

.teaspace-axes--mini .teaspace-axis__name {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.teaspace-axes--mini .teaspace-axis__left,
.teaspace-axes--mini .teaspace-axis__right,
.teaspace-axes--mini .teaspace-axis__observed {
  display: none;
}

/* --- 사실 --- */

.teaspace-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.teaspace-fact {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}

.teaspace-fact:last-child {
  border-bottom: 0;
}

.teaspace-fact__note {
  display: block;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

/* --- 소리 --- */

.teaspace-sounds {
  margin: 0;
  padding: 0;
  list-style: none;
}

.teaspace-sound + .teaspace-sound {
  margin-top: 3.5rem;
}

.teaspace-sound__still {
  display: block;
  width: 100%;
  height: auto;
}

.teaspace-sound__audio {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
}

/* --- 꼬리 --- */

.footer {
  margin-top: 9rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

.footer a {
  color: inherit;
}

/* 관측을 못 불러왔을 때. 자리만 접고 사과문을 띄우지 않는다. */
[hidden] {
  display: none !important;
}