/* 토닥토닥 푸터 페이지의 레이아웃과 타이포그래피를 정의하는 스타일 */
@font-face{font-family:'DM Sans';src:url('../fonts/DMSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Epilogue;src:url('../fonts/Epilogue-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
:root{--background:#dfe4f2;--foreground:#080909;font-family:'DM Sans',Arial,sans-serif;font-weight:400;color:var(--foreground);background:var(--background);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100vh}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.footer{position:relative;min-height:100vh;padding-top:6.54vw}
.jobs{margin-left:8.65vw;width:25vw}
.tag{display:inline-flex;align-items:center;border-radius:100px;background:#f7f8fa;padding:.39vw .61vw;font-size:.88vw;line-height:1.2;height:1.9vw;white-space:nowrap}
.headline{font-family:Epilogue,Arial,sans-serif;font-weight:900;font-size:1.66vw;line-height:1.2;letter-spacing:0}
.job-title{display:block;margin-top:1.45vw}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:.7vw;margin-top:1.6vw}
.cta-btn{display:inline-flex;align-items:center;border-radius:100px;background:#f7f8fa;padding:.75vw 1.4vw;font-size:1.075vw;line-height:1.2;white-space:nowrap;box-shadow:0 .2vw .8vw rgba(8,9,9,.08);transition:transform .2s ease,box-shadow .2s ease}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 .4vw 1.2vw rgba(8,9,9,.14)}
.music-player{display:block;width:min(100%,16vw);min-width:220px;height:2.6vw;min-height:36px;margin-top:.7vw;background:#ffd84d;border-radius:100px;overflow:hidden;box-shadow:0 .2vw .8vw rgba(8,9,9,.08)}
.music-player::-webkit-media-controls-panel{background-color:#ffd84d}
.music-player::-webkit-media-controls-enclosure{border-radius:100px;background-color:#ffd84d}
.cta-primary{background:var(--foreground);color:#e2e7f2}
.contact .cta-btn{background:#ffd84d;color:var(--foreground)}
.contact .cta-btn:hover{background:#ffcf1f}
.contact .cta{margin-top:0}
.site-footer{position:absolute;left:0;right:0;bottom:1.4em;max-width:60em;margin:0 auto;padding:0 24px;text-align:center;font-size:max(12px,.8vw);line-height:1.4}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:none;opacity:.7}
.site-footer p{margin:0}
.site-footer .tag{background:#e2d8e9;display:inline-block;height:auto;white-space:normal;word-break:keep-all;font-size:inherit;line-height:1.6;padding:.8em 1.4em;border-radius:18px}
.footer-intro{word-break:keep-all}
.site-footer .footer-tag{margin-bottom:.9em}
.footer-intro span{display:block}
.site-footer .footer-copy{margin-top:.6em}
.logo{position:absolute;left:50%;top:7.7vw;transform:translateX(-50%);text-align:center;white-space:nowrap}
.logo svg{display:block;width:100%;height:auto}
.contact{position:absolute;left:74.3vw;top:6.54vw}
.socials{display:flex;align-items:center;gap:1.43vw;margin-top:1.61vw}
.socials span,.socials img{display:block;width:1.71vw;height:1.71vw}

.footer{isolation:isolate;overflow:hidden}
.footer-background{position:absolute;inset:0;z-index:-1;pointer-events:none}
.footer-background video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}

@media(max-width:700px){
  :root{--background:#f0eefa;background:var(--background)}
  body{background:var(--background)}
  .footer{display:flex;flex-direction:column;gap:36px;min-height:100svh;padding:20px 24px 0;background:var(--background)}
  .logo{position:static;order:0;align-self:center;width:100%;transform:none;text-align:center;margin-bottom:4px}
  .logo .job-title{margin-top:0;font-size:clamp(20px,5.6vw,26px)}
  .jobs,.contact{display:contents}
  .tag{height:30px;padding:6px 11px;font-size:14px}
  .headline{font-size:clamp(22px,6.3vw,30px);line-height:1.25}
  .jobs .tag{display:none}
  .footer-background{position:relative;inset:auto;order:2;z-index:auto;flex:none;align-self:center;width:calc(100% + 48px);aspect-ratio:4/3;margin-top:-40px}
  .footer-background video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
  .cta{width:100%;gap:10px}
  .jobs .cta{order:3;margin-top:-12px}
  .contact .cta{order:4;margin-top:-26px}
  .music-player{order:4;width:100%;margin-top:-26px}
  .cta-btn{justify-content:center;width:100%;min-height:52px;padding:14px 20px;font-size:17px;box-shadow:0 2px 10px rgba(8,9,9,.08)}
  .jobs .job-title{order:5;margin-top:0}
  .contact .tag{order:6;align-self:flex-start}
  .socials{order:7;gap:18px;margin-top:-20px}
  .socials span{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
  .socials img{width:30px;height:30px}
  .socials span:first-child{margin-left:-7px}
  .footer > footer{order:8}
  .footer > br{display:none}
  .contact .cta > .tag{display:none}
  .site-footer .tag{padding:14px 16px}
  .site-footer{position:static;padding:24px 4px calc(1.7em + env(safe-area-inset-bottom));border-top:1px solid rgba(8,9,9,.1);font-size:13px;line-height:1.7}
  .footer-intro span+span{margin-top:6px}
  .site-footer .footer-copy{margin-top:18px;font-size:12px;opacity:.75}
}