body {
  font-family: arial, sans-serif;
  font-size: 14px;
  color: #000;
  background: #fff;
  margin: 0;
}

main {
  max-width: 320px;
  margin: 60px auto;
  padding: 0 16px;
}

h1 {
  font-size: 20px;
  font-weight: normal;
  margin: 0 0 24px;
}

label {
  font-size: 13px;
}

input {
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  padding: 4px;
  border: 1px solid #999;
  box-sizing: border-box;
}

input:focus {
  border-color: #333;
  outline: none;
}

small {
  color: #666;
  font-size: 12px;
}

button {
  font-family: inherit;
  font-size: 13px;
  padding: 4px 12px;
  border: 1px solid #999;
  background: #eee;
  cursor: pointer;
}

button:disabled {
  color: #999;
  cursor: default;
}

a {
  color: #00c;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 16px;
}

th, td {
  font-size: 13px;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;
}

th {
  color: #666;
  width: 40%;
}

td button {
  margin-left: 8px;
}

#message:empty {
  display: none;
}

#message {
  font-size: 13px;
}

#detail:empty {
  display: none;
}

#detail {
  color: #666;
  font-size: 12px;
}

.error {
  color: #c00;
}

.ok {
  color: #060;
}

/* 여기서부터 .tag 까지는 홈의 박스오피스 차트에만 쓴다. 막대는 크기 비교만
   맡고 관객수는 그 옆에 숫자로 그대로 적는다 — 1위와 10위가 백 배 넘게
   벌어지는 값이라, 막대만 남기면 아래쪽 몇 줄은 읽을 수 없다. */

h2 {
  font-size: 13px;
  font-weight: normal;
  color: #666;
  margin: 0 0 6px;
}

/* 오늘의 재개봉작. 표 안에서는 열 줄 중 한 줄이라 맨 위에 한 번 더 적는다.
   아직 아무것도 모르는 동안에는 자리도 만들지 않는다. */
#reopen:empty {
  display: none;
}

#reopen {
  border: 1px solid #999;
  padding: 8px 10px;
  margin: 0 0 24px;
}

#reopen p {
  font-size: 13px;
  margin: 6px 0 0;
}

#reopen small {
  display: block;
}

#chart p {
  font-size: 13px;
  margin: 24px 0 0;
}

.chart {
  margin: 24px 0 16px;
}

.chart caption {
  text-align: left;
  color: #666;
  font-size: 13px;
  padding: 0 0 6px;
}

.chart td {
  padding: 6px 0;
}

.chart .rank,
.chart .count {
  color: #666;
  font-size: 12px;
}

.chart .rank {
  width: 18px;
}

.chart .count {
  width: 58px;
  text-align: right;
  white-space: nowrap;
}

.chart .name {
  font-size: 13px;
}

/* 막대. 관객이 있었던 줄은 아무리 작아도 자국은 남게 둔다. */
.chart .bar {
  height: 6px;
  margin: 3px 0 0;
  background: #eee;
}

.chart .bar span {
  display: block;
  height: 100%;
  min-width: 2px;
  background: #999;
}

/* 재개봉작 줄. 이 서비스가 알려 주겠다고 한 것이라 표 안에서도 눈에 띄게 둔다.
   색은 체크 표시와 같은 초록이다 — 이 화면에서 초록은 계속 같은 뜻이다. */
.chart .reopen .name,
#reopen .name {
  color: #060;
}

.chart .reopen .bar span {
  background: #060;
}

/* 색만으로는 무슨 표시인지 알 수 없으니 말도 같이 적는다. */
.tag {
  border: 1px solid #060;
  color: #060;
  font-size: 11px;
  padding: 0 3px;
  margin-left: 4px;
  white-space: nowrap;
}

/* 여기서부터는 홈 화면 표의 값 칸에만 쓰는 것들이다. 나머지 화면은 계속
   꾸미지 않는다 — 이 자리만 예외로 둔 이유가 둘 있다.

   .check 는 켜진 상태를 글자 대신 적는다. 표의 값 칸은 예/아니오 한 칸이라
   표시 하나로 충분하고, 그 편이 "완료"라고 적는 것보다 빨리 읽힌다.

   .progress 와 .pending 은 재개봉 알림을 켜는 그 한 순간에만 쓴다. 누른 적도
   없는 값이 2.5초 동안 아무 일도 없는 것처럼 보이면 안 되기 때문이다. */

/* 진행 막대. 남은 시간을 알 수 없으니 채우지 않고 훑고 지나간다. */
.progress {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 88px;
  height: 3px;
  background: #eee;
  overflow: hidden;
}

.progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, #bcd, #060);
  animation: sweep 1.15s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(350%);
  }
}

.pending {
  margin-left: 8px;
  color: #666;
  animation: breathe 1.15s ease-in-out infinite;
}

@keyframes breathe {
  50% {
    opacity: 0.35;
  }
}

/* 체크 표시. 표에서 켜진 상태는 글자 대신 이 그림으로 적는다. 값 칸에 남는
   유일한 그림이라 굵기와 크기는 옆 글자에 맞춰 두고, 색만 .ok 와 같이 간다. */
.check {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.check path {
  fill: none;
  stroke: #060;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 선을 따라 그려지는 것은 방금 켜진 자리 하나뿐이다. 기다린 만큼의 마무리는
   있어야 하지만, 새로고침으로 이미 켜져 있던 값까지 그려지면 지금 막 그렇게
   된 것처럼 보인다. 그래서 애니메이션은 .drawn 이 붙을 때만 붙는다. */
.check.drawn path {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: draw 0.45s 0.05s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* 움직임을 줄여 달라고 한 사람에게는 결과만 남긴다. */
@media (prefers-reduced-motion: reduce) {
  .progress::after,
  .pending {
    animation: none;
  }

  .check.drawn path {
    animation: none;
    stroke-dashoffset: 0;
  }
}