.article { max-width: 720px; margin: 0 auto; }

.about { display: flex; flex-direction: column; align-items: center; padding: 16px 0 24px; text-align: center; }
.about__logo { width: 72px; height: 72px; margin-bottom: 12px; }
.about__name { font-size: 22px; font-weight: 700; line-height: 1.35; }
.about__tag { margin-top: 4px; font-size: 13px; color: var(--ink-3); }

.doc { padding: 4px 20px; }
.doc__lead { padding: 18px 0 16px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.doc__sec { padding: 20px 0; }
.doc__sec + .doc__sec { border-top: 1px solid var(--line); }
.doc__h { margin-bottom: 10px; font-size: 16px; font-weight: 700; color: var(--ink); }
.doc p { font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.doc p + p, .doc p + .doc__list, .doc__list + p, .doc .tablebox + p, .doc p + .tablebox { margin-top: 10px; }
.doc__list li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.doc__list li + li { margin-top: 6px; }
.doc__list li::before {
  content: ''; position: absolute; left: 2px; top: .8em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--heat);
}
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--heat-ink); }

.article .tablebox { overflow-x: auto; }
.article table { font-size: 13px; }
.article th, .article td { padding: 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.article th:first-child, .article td:first-child { padding-left: 0; min-width: 72px; }
.article th:last-child, .article td:last-child { padding-right: 0; }
.article td:first-child .grade { margin: 2px 0; }
.article tr:last-child td { border-bottom: 0; }
.article th { color: var(--ink-3); font-weight: 500; }
.article td { color: var(--ink-2); line-height: 1.7; }

@media (min-width: 768px) {
  .doc { padding: 8px 32px; }
  .doc__sec { padding: 24px 0; }
}

.fb__again { margin-top: 14px; }

.shots { display: flex; flex-wrap: wrap; gap: 10px; }
.shots__item { position: relative; width: 76px; height: 76px; }
.shots__item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }
.shots__del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--ink); color: var(--on); font-size: 14px; line-height: 1;
}
.shots__add {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: var(--r-md);
  border: 1px dashed var(--fill-2); background: var(--fill); color: var(--ink-3); font-size: 22px; cursor: pointer;
}
.shots__login a { color: var(--heat-ink); }