@font-face{font-family:'Jalnan';src:url('../fonts/Jalnan.woff') format('woff'),url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');font-weight:400;font-display:swap}
:root{
  --page:#f6f2fc;--violet:#7c52b0;--violet-dk:#4a2fa6;--rose:#de5a7a;--brown:#4a3a38;--ink:#222;--orange:#e8710a;
  --display:'Jalnan','Pretendard',system-ui,sans-serif;--body:'Pretendard',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;letter-spacing:0;word-break:keep-all}
ul,ol{list-style:none;padding:0}
body{font-family:var(--body);color:var(--ink);line-height:1.6;background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:99}
:focus-visible{outline:3px solid var(--violet-dk);outline-offset:3px}
.a11y{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:-1px;white-space:nowrap}

#app{outline:0;min-height:100vh;max-width:1900px;margin:0 auto;background:var(--page);position:relative}
.visual{position:relative;height:650px;text-align:center}
.visual__bg{position:absolute;inset:0 auto 0 50%;width:min(100%,1900px);transform:translateX(-50%);overflow:hidden;background:#e4d8fa url('../images/bg-visual.jpg') 0 0/100% 100% no-repeat}
.visual__in{position:relative;z-index:2;padding:120px 20px 0}
.logo{position:absolute;left:30px;top:26px;display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:var(--display);font-size:19.5pt;color:#c4510b}
.logo img{width:60px;height:auto}
.visual-title{font-family:var(--display);font-weight:400;font-size:65pt;line-height:1.1;color:var(--brown);letter-spacing:-.02em}
.visual-title strong{font-weight:400;color:var(--violet-dk)}
.visual-desc{margin-top:24px;font-family:var(--display);font-weight:400;font-size:25pt;line-height:1.3;color:var(--brown)}
.visual-info{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:14px 18px;margin-top:50px}
.visual-info li{display:contents}
.visual-info strong{text-align:center;padding:9px 30px;border-radius:99px;background:var(--brown);color:#fff;font-family:var(--display);font-weight:400;font-size:15pt;white-space:nowrap}
.visual-info p{white-space:nowrap;font-family:var(--display);font-weight:500;font-size:20.8pt;text-align:left;color:var(--brown)}
.visual__stage{position:absolute;inset:0 auto 0 50%;width:min(100%,1900px);transform:translateX(-50%);pointer-events:none;z-index:3}
.char{position:absolute;margin:0;pointer-events:none}
.char img{width:100%;height:auto;filter:drop-shadow(0 8px 14px #4a2fa626)}
.char--bear{left:12.3%;top:360px;width:355px}
.char--lemon{right:12.2%;top:360px;width:328px}
.char.is-empty{aspect-ratio:1;display:grid;place-items:center;border:2px dashed #7c52b0;border-radius:50%;background:#ffffff88;color:var(--violet-dk);font-size:10.5pt;font-weight:700;text-align:center;line-height:1.4;white-space:pre-line}
.char.is-empty img{display:none}.char.is-empty::after{content:attr(data-label)}
.loading{padding:120px 20px;text-align:center}
@media(max-width:1199px){
  .visual{height:450px}
  .visual__bg{background-size:cover;background-position:center top;width:100%}
  .visual__stage{inset:0;left:0;width:100%;transform:none}
  .visual__in{padding-top:80px}
  .logo{left:16px;top:16px;gap:8px;font-size:13pt}
  .logo img{width:40px}
  .visual-title{font-size:26pt;line-height: 1.3;}
  .visual-title strong{display:block}
  .visual-desc{margin-top:14px;font-size:12pt}
  .visual-info{grid-template-columns:auto minmax(0,1fr);max-width:560px;margin:15px auto 0;gap:10px 12px}
  .visual-info strong{padding:6px 16px;font-size:10pt}
  .visual-info p{font-size:13pt;white-space:normal;line-height:1.3}
  .char--bear{left:4%;top:auto;bottom:-30px;width:150px}
  .char--lemon{right:4%;top:auto;bottom:-30px;width:140px}
}

.choose{max-width:1600px;margin:0 auto;padding:80px 150px 80px;text-align:center}
.choose h2{font-family:var(--display);font-weight:400;font-size:32pt;line-height:1.3;color:var(--violet-dk)}
.choose__sub{margin-top:7px;font-size:16pt;font-weight:800}
.choose__list{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:80px}
.card{position:relative;display:flex;flex-direction:column;align-items:center;padding:88px 35px 26px;border-radius:34px;background:#fff;box-shadow:0 10px 30px #7c52b014}
.card__no{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:88px;aspect-ratio:1;border-radius:50%;color:#fff;font-family:var(--display);font-size:33pt;box-shadow:0 0 0 9px var(--page)}
.card--1 .card__no{background:#7c52b0}.card--2 .card__no{background:var(--rose)}
.card h3{font-family:var(--display);font-weight:400;font-size:26pt;line-height:1.3;color:#333}
.card h3 em{font-style:normal}
.card--1 h3 em{color:#7642bc}.card--2 h3 em{color:#e14269}
.card p{margin:10px 0 60px;font-size:14pt;line-height:1.7;font-weight:500}
.btn-survey{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:76px;padding:0 50px;border-radius:18px;color:#fff;font-family:var(--display);font-size:19.5pt;transition:transform .15s,filter .15s}
.btn-survey::before,.btn-survey::after{content:'';width:64px;flex-shrink:0}
.btn-survey::after{aspect-ratio:64/11;background:url('../images/arrow.png') center/contain no-repeat}
.btn-survey span{flex:1;text-align:center}
.card--1 .btn-survey{background:#7c52b0}.card--2 .btn-survey{background:var(--rose)}
.btn-survey:hover{transform:translateY(-3px);filter:brightness(.93)}
.choose__note{margin-top:30px;font-size:14.75pt;font-weight:700;color:#333}
@media(max-width:1199px){
  .choose{padding:60px 20px 60px}
  .choose h2{font-size:19.5pt}
  .choose__sub{font-size:10.5pt}
  .choose__list{grid-template-columns:1fr;gap:60px;margin:70px auto 0;max-width:560px}
  .card{padding:60px 16px 16px;border-radius:24px}
  .card__no{width:56px;font-size:20pt;box-shadow:0 0 0 5px var(--page)}
  .card h3{font-size:16.5pt}
  .card p{margin:10px 0 36px;font-size:10.5pt}
  .btn-survey{height:54px;padding:0 24px;border-radius:12px;font-size:13.5pt}
  .btn-survey::before,.btn-survey::after{width:44px}
  .choose__note{margin-top:30px;font-size:11.25pt}
}