/* 어랍쇼 패밀리 공통 푸터(site-foot.js). 모양은 어랍쇼넷 푸터 그대로, 사이트 색은 변수로만 바꾼다. */
.sf {
  --sf-ink: var(--foot-ink, #23221f);
  --sf-faint: var(--foot-faint, #a9a7a0);
  --sf-line: var(--foot-line, color-mix(in srgb, var(--sf-ink) 10%, transparent));
  --sf-bg: var(--foot-bg, #f3f1ec);
  box-sizing: border-box; max-width: var(--foot-max, 1200px); margin: 0 auto; padding: 32px clamp(14px, 4vw, 64px) 44px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 40px;
  font-family: var(--foot-font, 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif);
  font-size: 12px; letter-spacing: .04em; color: var(--sf-faint); border-top: 1px solid var(--sf-line);
  word-break: keep-all;
}
.sf > * { white-space: nowrap; }
.sf a { color: inherit; text-decoration: none; }
.sf .sf-note { flex: 1 0 100%; white-space: normal; font-size: 12px; line-height: 1.7; color: var(--sf-faint); }
.sf .sf-note > span { display: inline-block; } /* 안내문은 구절(span)마다 통째로 줄바꿈: 한두 글자만 넘어가지 않게 */
.sf .sf-uni, .sf .sf-btn, .sf .sf-sns > button { color: var(--sf-ink); font-size: 13px; letter-spacing: .08em; }
.sf .sf-uni:hover { opacity: .65; }
.sf .sf-door { cursor: default; }
.sf .sf-by::before { content: ' · '; white-space: pre; }
.sf .sf-right { display: inline-flex; align-items: baseline; gap: 22px; }
.sf .sf-btn, .sf .sf-sns > button { all: unset; cursor: pointer; color: var(--sf-ink); font: inherit; font-size: 13px; letter-spacing: .08em; white-space: nowrap; }
.sf .sf-btn:hover, .sf .sf-sns > button:hover, .sf .sf-sns > button[aria-expanded="true"] { opacity: .65; }
.sf .sf-btn:focus-visible, .sf .sf-sns > button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.sf-sns { position: relative; display: inline-block; }
.sf-caret { margin-left: .4em; display: inline-block; transition: transform .15s; }
.sf-sns > button[aria-expanded="true"] .sf-caret { transform: rotate(180deg); }
.sf-sns-list {
  position: absolute; bottom: calc(100% + 12px); right: 0; z-index: 50; margin: 0; padding: 8px 0; list-style: none; min-width: 180px;
  background: var(--sf-bg); border: 1px solid var(--sf-line); color: var(--sf-faint); font-size: 13px; letter-spacing: .02em; text-align: left;
}
.sf-sns-list[hidden] { display: none; }
.sf-sns-list a { display: block; padding: 7px 18px; white-space: nowrap; }
.sf-sns-list a:hover, .sf-sns-list a:focus-visible { color: var(--sf-ink); background: color-mix(in srgb, var(--sf-ink) 4%, transparent); outline: none; }
.sf-sns-list small { margin-left: .35em; font-size: 11.5px; }
.sf-sns-list .sns-group { margin-top: 6px; padding: 9px 18px 3px; border-top: 1px solid var(--sf-line); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.sf-sns-list .in-group a { padding-left: 28px; }
/* 폴드 펼침·태블릿: 저작권만 아래 줄 */
@media (min-width: 641px) and (max-width: 960px) {
  .sf .sf-copy { order: 3; flex-basis: 100%; }
}
/* 휴대폰: ARAPSHOW UNIVERSE / 단추 / 저작권 / by arapshow 차례로 한 줄씩 */
@media (max-width: 640px) {
  .sf { flex-direction: column; align-items: flex-start; gap: 20px; }
  .sf .sf-right { order: 2; gap: 26px; }
  .sf .sf-copy { order: 3; }
  .sf .sf-by { display: block; margin-top: 3px; }
  .sf .sf-by::before { content: none; }
  .sf-sns-list { right: auto; left: 0; }
}