:root {
  color: #222c25;
  background: #f8f3e9;
  font-family: Nunito, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  line-height: 1.5;
}

body { margin: 0; }

main {
  box-sizing: border-box;
  max-width: 45rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 6vw, 3.5rem);
}

header {
  padding-bottom: clamp(1.4rem, 4vw, 2rem);
  border-bottom: 1px solid #cdd6cb;
}

header img { display: block; width: 9rem; height: auto; }

h1 {
  margin: .7rem 0 .45rem;
  font-family: "DM Serif Text", Georgia, serif;
  font-size: clamp(2rem, 7.5vw, 3.3rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.035em;
}

p { margin: 0; color: #4e564e; }
section { margin-top: 1.55rem; }
h2 { margin: 0 0 .75rem; font-size: 1.25rem; color: #335845; }

ul {
  display: grid;
  gap: .65rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  box-sizing: border-box;
  padding: .85rem clamp(.75rem, 3.5vw, 1.2rem);
  background: #fffdf8;
  border: 1px solid #cdd6cb;
  border-radius: .85rem;
  color: inherit;
  text-decoration: none;
}

a:hover { background: #eaf2eb; border-color: #809885; }
a:focus-visible { outline: 3px solid #335845; outline-offset: 2px; }
strong { display: block; font-size: clamp(1.04rem, 4vw, 1.2rem); }
.korean { display: block; color: #4e564e; margin-top: .1rem; overflow-wrap: anywhere; }
.format { white-space: nowrap; color: #335845; font-size: .84rem; font-weight: 650; }
footer { margin-top: 1.55rem; color: #4e564e; font-size: .85rem; }