/* 미리 만들어 두는 페이지의 모양. 달력의 스타일과 따로, 이 한 장만 싣습니다.
   색과 글꼴은 src/base.css와 같은 것을 씁니다 — 흰 바탕에 회색 면, 글꼴은 하나. */

:root {
  --paper: #FFFFFF;
  --soft: #F5F6F8;
  --line: #E9EBEE;
  --ink: #191F28;
  --sub: #4E5968;
  --muted: #6B7684;
  --red: #D6402F;
  --blue: #2F63C8;
  --sans: 'IBM Plex Sans KR', sans-serif;
}

:root:lang(en),
:root:lang(vi) {
  --sans: 'IBM Plex Sans', 'IBM Plex Sans KR', sans-serif;
}

:root:lang(zh-Hans) {
  --sans: 'IBM Plex Sans', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}

:root:lang(zh-Hant) {
  --sans: 'IBM Plex Sans', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body.pg {
  margin: 0;
  padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* 한국어는 낱말 가운데에서 줄을 바꾸지 않습니다. */
body.pg:lang(ko) {
  word-break: keep-all;
}

.pg a {
  color: inherit;
  text-decoration: none;
}

.pg a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pg :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 6px;
}

.pg-mast,
.pg-main,
.pg-foot {
  max-width: 800px;
  margin: 0 auto;
}

/* 머리 */

.pg-mast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 16px 0 8px;
}

.pg-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pg-brand:hover {
  text-decoration: none;
}

.pg-seal {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--red);
}

.pg-seal svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.pg-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2px;
  margin-right: -10px;
  font-size: 14px;
}

.pg-langs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--muted);
}

.pg-langs a[aria-current] {
  font-weight: 600;
  color: var(--ink);
}

/* 길잡이 */

.pg-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--muted);
}

/* 본문 */

.pg-main h1 {
  margin: 10px 0 0;
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pg-lead {
  margin: 10px 0 0;
  max-width: 44em;
  color: var(--sub);
}

/* 해를 붙여 찾아온 사람에게 먼저 주는 답 — 올해와 내년의 양력 날짜. */
.pg-answer {
  margin: 12px 0 0;
  max-width: 44em;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

/* 넣으러 가는 단추. 이 페이지에서 가장 센 것 하나. */

.pg .pg-cta {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin-top: 20px;
  padding: 0 24px;
  border-radius: 16px;
  background: var(--blue);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.pg .pg-cta:hover {
  background: #2552AC;
  text-decoration: none;
}

/* 글로 된 페이지: 넣는 법, 개인정보 안내 */

.pg-main section > h2 {
  margin: 36px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pg-steps-list,
.pg-notes {
  max-width: 44em;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--sub);
}

.pg-steps-list li,
.pg-notes li {
  position: relative;
  padding: 12px 0 12px 40px;
  border-top: 1px solid var(--line);
}

.pg-steps-list {
  counter-reset: step;
}

.pg-steps-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 12px;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--sub);
}

.pg-notes li {
  padding-left: 20px;
}

.pg-notes li::before {
  content: '';
  position: absolute;
  top: 23px;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
}

.pg-aside {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.pg-aside a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 앞, 목록, 뒤 */

.pg-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 600;
}

.pg-steps a {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--sub);
}

.pg-steps a:hover {
  background: var(--line);
  color: var(--ink);
  text-decoration: none;
}

.pg-steps > :nth-child(2) {
  justify-self: center;
  background: transparent;
}

.pg-steps > :last-child {
  justify-self: end;
  text-align: right;
}

/* 접어 두는 묶음. 긴 표와 목록은 이름만 보이게 접어 두고 볼 것만 펼칩니다. */

.pg-folds {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.pg-fold {
  padding: 0 20px;
  border-radius: 16px;
  background: var(--soft);
  scroll-margin-top: 8px;
}

.pg-fold summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  min-height: 56px;
  padding: 15px 28px 15px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}

.pg-fold summary::-webkit-details-marker {
  display: none;
}

/* 오른쪽 끝의 꺾쇠. 펼치면 위를 봅니다. */
.pg-fold summary::after {
  content: '';
  position: absolute;
  top: 23px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg);
}

.pg-fold[open] summary::after {
  top: 27px;
  transform: rotate(-135deg);
}

.pg-fold summary h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pg-fold summary small {
  font-size: 13px;
  color: var(--muted);
}

.pg-fold > .pg-scroll,
.pg-fold > .pg-grid {
  margin: 0;
  padding-bottom: 16px;
}

/* 표 */

.pg-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.pg-table th {
  padding: 4px 12px 8px 0;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.pg-table td {
  padding: 10px 12px 10px 0;
  border-top: 1px solid var(--line);
  vertical-align: baseline;
}

.pg-table td:first-child {
  font-weight: 600;
  white-space: nowrap;
}

.pg-table td:last-child,
.pg-table th:last-child {
  padding-right: 0;
}

.pg-table tr.red td:nth-child(-n + 2) {
  color: var(--red);
}

.pg-table tr.blue td:nth-child(-n + 2) {
  color: var(--blue);
}

.pg-table a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}

/* 목록 */

.pg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-grid a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
}

.pg-grid a:hover {
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}

.pg-grid small {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.pg-grid a:hover small {
  color: inherit;
}

/* 꼬리 */

.pg-foot {
  margin-top: 48px;
  padding: 16px 0 max(32px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.pg-foot p {
  margin: 4px 0 0;
}

.pg-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--sub);
}

.pg-more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 같은 사람이 만든 다른 서비스. 꼬리의 작은 글씨 그대로, 맨 아래 한 줄. */
.pg-foot .pg-siblings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
}

.pg-siblings a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 좁은 화면에서는 언어 줄을 한 줄에 넣고, 묶음의 덧말은 이름 아래에 놓습니다. */
@media (max-width: 640px) {
  .pg-langs {
    font-size: 13px;
  }

  .pg-langs a {
    padding: 0 6px;
  }

  .pg-fold summary small {
    flex-basis: 100%;
  }

  .pg-steps a {
    padding: 0 12px;
  }
}

/* 그림: 넣는 순서마다 붙는 화면, 목록 머리의 보기. 사이트의 화면을 그대로 옮긴 것이라 테두리 없이 둡니다. */

.pg-shot {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 14px 0 0;
  border-radius: 20px;
  background: var(--soft);
}

.pg-lead + .pg-shot {
  margin-top: 22px;
}

.pg-shot + .pg-folds {
  margin-top: 24px;
}

/* 좁은 화면에서는 순서 번호 아래까지 그림을 넓혀, 그림 속 글자가 작아지지 않게 합니다. */

@media (max-width: 560px) {
  .pg-steps-list .pg-shot {
    width: calc(100% + 40px);
    max-width: none;
    margin-left: -40px;
  }
}

/* 의견을 받는 주소. 눌러서 바로 메일을 씁니다. */

.pg-mail {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 600;
}

.pg-mail a {
  color: var(--blue);
  overflow-wrap: anywhere;
}

/* 같은 해 다른 나라의 공휴일로 가는 줄. */

.pg-others {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pg .pg-others a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--soft);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.pg .pg-others a:hover {
  background: var(--line);
  text-decoration: none;
}

.pg-steps + .pg-scroll {
  margin-top: 16px;
}

/* 넣는 모습을 찍은 영상. */

.pg-demo {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 24px 0 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--soft);
}