/* 효과 예시 공통. 각 페이지의 인상은 페이지마다 다르게 두고, 여기에는 약속만 둔다. */
:root { --e-out: cubic-bezier(.22, 1, .36, 1); --e-expo: cubic-bezier(.16, 1, .3, 1); --e-move: cubic-bezier(.76, 0, .24, 1); --gutter: clamp(16px, 4vw, 56px); }
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg, #fff); color: var(--ink, #111); overflow-x: clip; }
body { font: 400 17px/1.65 "Noto Sans KR", system-ui, sans-serif; overflow-x: clip; word-break: keep-all; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.wrap { padding-inline: var(--gutter); }
/* 예시 안내 띠: 어떤 효과인지 말해 주는 곳. 내용 위를 가리지 않게 맨 아래 작은 알약으로 둔다. */
.tag { position: fixed; left: 50%; bottom: 12px; translate: -50% 0; z-index: 100; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 16px); padding: 6px 6px 6px 16px; border-radius: 99px; background: rgba(17, 17, 17, .92); color: #fff; font: 500 14px/1.3 "Noto Sans KR", sans-serif; }
.tag b { font-weight: 700; white-space: nowrap; }
.tag span { opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 99px; background: #fff; color: #111; font-weight: 700; text-decoration: none; }
@media (max-width: 620px) { .tag span { display: none; } }
/* 등장 */
@media (prefers-reduced-motion: no-preference) {
  [data-in] { opacity: 0; transform: translateY(var(--y, 24px)); transition: opacity .7s var(--e-out) var(--d, 0ms), transform .9s var(--e-expo) var(--d, 0ms); }
  [data-in].on { opacity: 1; transform: none; }
  .js-off [data-in] { opacity: 1; transform: none; }
}
.credit { padding: 26px var(--gutter) 80px; font-size: 15px; opacity: .7; }