.intro-notes{position:relative}.intro-notes img{position:absolute;width:41%;height:auto}
#navigation .brand{margin-right:auto}#navigation nav{flex:0 1 auto}.original-card>svg{display:block;width:100%;height:auto}
.phone-scene{position:relative;isolation:isolate;width:min(300px,84%);height:461px;margin:auto;overflow:hidden;border-radius:16px 16px 0 0;background:#213237}
#intro .phone-scene img{display:block;position:absolute;max-width:none;margin:0;object-position:center}.phone-scene .phone-map{inset:0;width:100%;height:100%;object-fit:cover}
#intro .phone-campus .phone-map{width:560%;height:205%;left:-102%;top:-36%}.phone-scene .phone-overlay{width:100%;height:auto;left:0;top:0}
#intro .phone-campus .phone-overlay{height:auto;width:99%;top:5%}
#intro .phone-major .phone-overlay{width:91%;height:auto;top:16%;left:4.5%;background:#243434ed;border-radius:12px}
#intro .phone-street .phone-overlay{height:auto;top:50%}
.student-voices{scroll-snap-type:none}
.motion-letter{display:inline-block;white-space:pre}
@media(prefers-reduced-motion:no-preference){
 [data-rise]{opacity:0;translate:0 18px;transition:opacity .2s ease-out,translate .2s ease-out;transition-delay:var(--lag,0ms)}
 [data-rise].motion-on{opacity:1;translate:0 0}
 .campus-slides figure.motion-on .motion-letter{animation:pin-rise .36s ease-out backwards;animation-delay:var(--letter)}
 .phone-campus .phone-map,.phone-major .phone-overlay,.phone-street .phone-overlay{animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-play-state:paused}
 .phone-campus .phone-map{animation-name:pin-map}.phone-major .phone-overlay{animation-name:pin-answer}.phone-street .phone-overlay{animation-name:pin-sheet}
 figure.motion-on .phone-scene img{animation-play-state:running}
 .motion-on .chart-1,.motion-on .chart-2,.motion-on .chart-3{animation:pin-rise .45s ease-out backwards}.motion-on .chart-2{animation-delay:.2s}.motion-on .chart-3{animation-delay:.4s}
 .motion-on .resume{animation:pin-left .55s ease-out both}.motion-on .certificate{animation:pin-right .55s ease-out both}
 .motion-on :is(.wobble-a,.wobble-b){transform-box:fill-box;transform-origin:center;animation:pin-wobble 1.45s ease-in-out infinite alternate}.motion-on .wobble-b{animation-direction:alternate-reverse}
 .motion-on :is(.ticket,.chip,.new-note){transform-box:fill-box;transform-origin:center;animation:pin-pop .42s ease-in-out backwards}.motion-on .new-note{animation-delay:.45s}.motion-on .chip{animation-delay:.88s}
 .motion-on .link-arrow{animation:pin-draw .35s .35s both}
 .primary{transition:transform .28s cubic-bezier(.22,1.7,.4,1),box-shadow .18s}.primary:active{transform:translateY(5px) scale(.98)}
 @keyframes pin-rise{from{opacity:0;transform:translateY(22px)}}
 @keyframes pin-left{from{transform:translateX(72px)}}@keyframes pin-right{from{transform:translateX(-72px)}}
 @keyframes pin-wobble{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
 @keyframes pin-pop{from{opacity:0;transform:scale(0)}75%{opacity:1;transform:scale(1.07)}}
 @keyframes pin-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
 @keyframes pin-map{0%,100%{transform:translateX(0)}50%{transform:translateX(-11%)}}
 @keyframes pin-answer{0%,100%{transform:translateY(15%)}48%,62%{transform:translateY(-19%)}}
 @keyframes pin-sheet{0%,100%{transform:translateY(34%)}42%,65%{transform:translateY(-21%)}}
}
@media(max-height:779px) and (prefers-reduced-motion:no-preference){
 .bonus-stage .coin-anchor{transform:scale(calc(.48 + .52 * var(--entrance,1)))!important}.bonus-stage .confetti{display:block}
 .bonus-stage .reveal-step{opacity:var(--step,1)!important;transform:translateY(calc(18px * (1 - var(--step,1))))!important}
 .benefit-card{position:sticky;top:calc(68px + var(--i)*32px)!important}
}
@media(prefers-reduced-motion:reduce){.intro-notes img{animation:none!important;transform:none}}
.topic-rows>.rolling-window{display:block;width:100%;max-width:100%;padding:0}
#navigation{gap:8px;padding-inline:16px;background:rgb(0 0 0 / 30%)}
#navigation nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0}
#navigation nav a{display:grid;place-items:center;padding:0 12px;height:36px;font:600 16px/1.25 var(--ui-font);letter-spacing:-.4px}
#navigation>button{width:44px;height:44px;padding:10px}
@media(max-width:345px){#navigation,#navigation nav{gap:3px}#navigation nav a{padding-inline:8px}}

#intro .intro-sticker{object-fit:contain;padding:7px}
.phone-scene::after{content:"";position:absolute;inset:0;border:3px solid #111;border-bottom:0;border-radius:inherit;z-index:4;pointer-events:none}
#intro .phone-campus .phone-map{inset:0;width:100%;height:100%;object-fit:cover;animation:none}
.pin-window{position:absolute;inset:82px 3px 3px;overflow-x:auto;scrollbar-width:none}
.pin-field{position:relative;width:1160px;height:100%}
.place-pin{position:absolute;display:grid;gap:2px;width:126px;padding:5px 2px;color:white;text-align:center;border-radius:9px;background:#15221eee;font:600 14px/1.35 var(--ui-font)}
.place-pin::after{content:"";position:absolute;top:100%;left:48%;border:5px solid transparent;border-top-color:#15221eee}
.place-pin small{color:#b9edff;font-size:10px}
#intro .phone-scene .major-header{inset:0 0 auto;width:100%;height:auto;border:0;border-radius:0}
.major-reader{position:absolute;inset:62px 12px 0;padding:12px 10px;background:rgb(21 24 28 / 88%);color:#fff;border:1px solid #969b9f;border-radius:14px 14px 0 0;overflow:auto;scrollbar-width:thin;text-align:left;backdrop-filter:blur(10px)}
.major-content{font:400 13px/1.6 var(--ui-font)}
.major-content h4{font-size:18px;margin:14px 0 6px}
#intro .major-content p{color:white;text-align:left;font:inherit;margin:16px 0}
#intro .major-content img,#intro .street-sheet img{position:static;width:100%;height:auto;border:0;border-radius:0}
.street-sheet{position:absolute;inset:auto 0 0;height:55%;border:1px solid #90938e;border-radius:18px 18px 0 0;overflow:hidden;background:#28292b;transform:translateY(0)}
@media(prefers-reduced-motion:no-preference){.motion-on .street-sheet{animation:street-open 6s ease-in-out infinite}@keyframes street-open{0%,100%{transform:translateY(100%)}42%,68%{transform:translateY(0)}}}
#recruit-schedule{background:rgb(225 254 255 / 30%);padding:24px max(16px,calc((100% - 343px)/2)) 48px}
#recruit-schedule .contest{margin:0;padding:16px;background:#e1feff;border:0;border-radius:12px;color:#08495e;font:500 14px/19px var(--ui-font);text-align:left}
#recruit-schedule h3{font:400 28px/38px Partial,sans-serif;margin:19px 0;padding:10px 0}
#recruit-schedule dl{margin:0 clamp(0px,5vw,31px);grid-template-columns:max-content 1fr;gap:24px 12px;font:600 16px/1.4 var(--ui-font)}
.recruit-info dl:first-of-type dd{min-height:46px}
#recruit-schedule h3:has(+.demo-video){margin-bottom:0}
#recruit-schedule .demo-video{width:calc(100% - 6px);margin:0 auto}
#recruit-schedule .demo-caption{margin:12px 0 19px}
.memo-scene{width:min(100%,343px);height:209px}
.memo-scene .memo-lines{left:22.5%;top:29%;width:44.5%;height:39%}
.memo-scene .hand-arrow{left:calc(50% + 36px);top:96px;width:72px;height:86.4px}
.memo-scene .read-bubble{left:auto;right:calc(50% - 32px);bottom:0;width:155px;height:55px}
@media(prefers-reduced-motion:no-preference){.benefit-stack{padding-bottom:clamp(100px,22svh,220px)}.benefit-stack .benefit-card{position:sticky;top:calc(74px + var(--i)*29px)!important;z-index:calc(1 + var(--i))}}
#faq-content{max-width:343px;margin-inline:auto}
#faq .faq-group h3{padding:4px 16px;color:#999;font:600 16px/20px var(--ui-font)}
#faq-content details{margin:0 0 12px;padding:0 16px;border-color:#999;border-radius:12px}
#faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:55px;padding:15px 0;font:600 16px/25px var(--ui-font)}
#faq summary::after{position:static;flex:0 0 24px;height:24px}
#faq details[open] summary{padding-bottom:0;min-height:40px}
#faq details p{margin:12px 0 0;padding:0 0 15px;font:400 16px/1.4 var(--ui-font)}
.map-controls{position:absolute;top:24px;inset-inline:12px;display:flex;align-items:center;justify-content:space-between;gap:6px;pointer-events:none}
.map-controls span{flex:1;padding:8px 0;border:1px solid #ffffff66;border-radius:24px;background:#20352edb;color:white;text-align:center;font:600 14px/20px var(--ui-font)}

.campus-slides .motion-letter{letter-spacing:.055em}
.campus-slides{cursor:grab;user-select:none;touch-action:pan-x pan-y}
.campus-slides.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.phone-scene{pointer-events:none}
.phone-campus .pin-window{inset:0;overflow:hidden}
.pin-field{height:100%;width:auto;aspect-ratio:1963/937}
#intro .phone-campus .pin-field .phone-map{width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.place-pin{transform:translate(-50%,-100%);width:10.44%;font-size:12px}
.place-pin small{font-size:9px}
.major-reader{inset:61px 3px 0;border:0;border-radius:0;overflow:hidden;scrollbar-width:none}
.major-reader::-webkit-scrollbar,.pin-window::-webkit-scrollbar{display:none}
.street-sheet{height:auto;padding:14px;bottom:0;box-sizing:border-box;background:rgb(20 22 25 / 82%);backdrop-filter:blur(10px);color:white;text-align:left}
.street-message{padding:4px 4px 4px 40px;position:relative;font:500 13px/1.5 var(--ui-font)}
.street-message::before{content:"";position:absolute;top:6px;left:2px;width:32px;height:32px;border-radius:50%;background:center/cover no-repeat url(street-author.png)}
.street-message + .street-message::before{background-image:url(street-senior.png)}
.street-message small{display:block;color:#c9ccce}
#intro .street-message p{font:inherit;margin:4px 0 6px;text-align:left}
@media(prefers-reduced-motion:no-preference){.motion-on .street-sheet{animation-duration:3s}}
.memo-scene .read-bubble{width:193.75px;height:68.75px;bottom:-8px}
#form-title,#form-view>.notice{text-align:center}
.privacy-confirm{display:block;width:100%;margin:20px 0 8px}
#schools-dialog{max-height:85dvh;overflow-y:auto}
@media(prefers-reduced-motion:no-preference){
 .benefit-stack{padding-bottom:0}
 .benefit-stack::after{content:"";display:block;height:clamp(240px,50svh,520px)}
 .benefit-stack .benefit-card{translate:none;opacity:1;top:calc(74px + var(--i)*29px)!important}
}
@media(prefers-reduced-motion:no-preference){
 .benefit-card.motion-on .card-body{animation:pin-rise .4s ease-out backwards}
}
:root{--ui-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo",Pretendard,sans-serif}
body,button,input,select,textarea{font-family:var(--ui-font)}
@media(prefers-reduced-motion:no-preference){.hero img.hero-photo{width:130%;max-width:none;inset:0 auto 0 0;will-change:transform}}
#intro .topic-rows{width:100%;padding-inline:0;overflow:hidden}
#intro .topic-rows .rolling-window{padding-inline:0;overflow-y:hidden}
.phone-scene{border-radius:24px 24px 0 0}
.phone-scene::after{border-width:4px}
.pin-field{width:auto;height:100%;aspect-ratio:1679/945}
#intro .pin-field img{inset:0;width:100%;height:100%;border:0;border-radius:0;object-fit:fill}
#intro .phone-campus .figma-controls{width:100%;height:auto;inset:24px 0 auto;border:0;border-radius:0}
.phone-major{background:#272a30}
#intro .phone-major .phone-map{display:none}
.major-tabs{position:absolute;inset:12px 12px auto;display:flex;padding:4px;height:36px;border-radius:20px;background:#191a1e;color:white;align-items:center;text-align:center;font:500 13px/28px var(--ui-font)}
.major-tabs>*{flex:1}.major-tabs b{background:#343539;border-radius:16px}
.major-reader{inset:55px 4px 0;padding:12px 9px 0;background:#26292e;backdrop-filter:none;border:1px solid #90938e;border-radius:19.2px 19.2px 0 0}
.sr-story{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
@media(prefers-reduced-motion:no-preference){.motion-on .street-sheet{animation:street-read 18s linear infinite}@keyframes street-read{0%,100%{transform:translateY(100%)}5%,92%{transform:translateY(0)}}}
#recruit-schedule{background:#f6ffff}
#recruit-schedule>h3:first-child{margin:0 0 19px}
#recruit-schedule .contest{margin:0 0 19px}
#recruit-schedule dl:first-of-type{margin-inline:8px}
.footer-channels{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px auto}
.footer-channels>a{display:grid;place-items:center;width:28px;height:28px;border-radius:7px}
.footer-channels svg{width:25px;height:25px}
.footer-kakao{background:#fee500}.footer-kakao img{width:22px}.footer-insta{background:linear-gradient(35deg,#ffcb54,#dc3278,#623ec8)}
#application .consent .required{font:inherit}
#privacy-dialog .privacy-content p:last-child{margin-bottom:0}
#privacy-dialog .privacy-confirm{margin-top:40px}
#share-options .share-copy{align-items:stretch;min-height:42px}
#share-dialog #share-url{display:block;align-self:stretch;flex:1 1 0;width:0;min-width:0;height:auto;min-height:0;padding:8px 10px;margin:0;border:0;border-radius:0;background:white;box-shadow:none;color:#066ac2;font:400 13px/20px var(--ui-font);text-overflow:ellipsis}
#share-url:focus-visible{outline-offset:-2px}
#share-dialog{overflow-x:hidden;overscroll-behavior:contain}
#share-dialog:has(#share-copied:not([hidden])){overflow:hidden}

/* Map content at 75% inside the original phone frame. */
.phone-campus .pin-field{width:1259.475px;height:708.45px;top:-127.59px}
.phone-campus .pin-window{overflow:hidden}

#intro .phone-campus .figma-controls{width:75%;inset:18px auto auto 12.5%}
.footer-channels{margin:24px auto;gap:16px}
.footer-channels img{display:block;width:20px;height:20px}
.page footer{background:#000}
.page footer>b{display:flex;align-items:center;justify-content:center;font-size:14px}
.page footer>b img{width:20px}
.page footer>p{font-size:11px;color:#bfbfbf;line-height:17px;margin:8px auto 0}

#schools-dialog .dialog-head{padding-inline:16px}
#schools-dialog .dialog-head>button{padding-inline:0}
#privacy-dialog .privacy-cancel{display:block;width:100%;min-height:48px;margin-top:16px;border:1px solid #999;border-radius:12px;background:white;color:#111;font:600 16px/1.4 var(--ui-font)}
body:not(:has(#apply-dialog[open])) #privacy-dialog [data-consent]{display:none}
#hero { overflow: hidden; }
html, body {
  overflow-x: clip;
  overscroll-behavior-x: none;
}
.page { overflow-x: clip; }
#support { touch-action: pan-y pinch-zoom; }
.page{max-width:none;background:transparent}
 main>section:not(#hero),.page>footer{max-width:480px;margin-inline:auto}
@media(min-width:768px){
 #hero{width:100%;min-height:480px}
 #hero .hero-copy{width:min(80%,1040px);left:50%;right:auto;translate:-50% 0}
 #hero h1{font-size:clamp(48px,5vw,76px)}
}
.bonus-stage{--start-coin:40px;--start-title:280px}
@media(max-height:779px),(prefers-reduced-motion:reduce){.bonus-stage{padding-top:40px}}
.activity-limits li{display:flex;align-items:center;gap:5px}
.activity-limits li::before{content:"";width:18px;height:18px;flex:none;margin:0;padding:0;border-radius:50%;background:linear-gradient(45deg,transparent 41%,white 41% 59%,transparent 59%) center/9px 9px no-repeat,linear-gradient(-45deg,transparent 41%,white 41% 59%,transparent 59%) center/9px 9px no-repeat,#e63b34}

/* Keep the schedule readable even between the phone and desktop layouts. */
#recruit-schedule{padding-inline:16px}
@media(min-width:768px){
 main>section:not(#hero),.page>footer{max-width:none}
 #intro,#support{background:white}
 #hero h1{line-height:1.18}
 #hero .hero-copy p{margin-bottom:12px}
 #intro.revised-intro{padding-top:96px}
 #intro .student-voices{display:grid;gap:16px;width:min(680px,90%);margin:48px auto 80px;padding:0;overflow:visible}
 .student-voices li{min-height:0;padding:24px 28px 24px 68px}
 .student-voices li:before{top:14px;left:24px}
 .student-voices li[aria-hidden]{display:none}
 #intro .campus-examples{padding:56px 24px 0}
 #intro .campus-examples>p{margin-bottom:40px}
 .campus-examples .slide-controls{display:none}
 .campus-slides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:clamp(12px,2vw,36px);max-width:1160px;margin:auto;overflow:visible;cursor:auto;scroll-snap-type:none}
 #intro .campus-slides h3{font-size:clamp(19px,2.1vw,28px);line-height:1.36}
 #intro .phone-scene{width:min(100%,300px)}
 #intro .recruit-intro{padding-inline:0}
 #support .bonus-stage{--start-coin:80px;--start-title:320px}
 #support .bonus-details{max-width:448px;margin-inline:auto}
 #support .benefits{max-width:640px;margin-inline:auto}
 #recruit-schedule{padding:80px max(32px,calc((100% - 1080px)/2));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px);align-items:start;align-content:start;background:#f6ffff}
 #recruit-schedule>h3{margin:0 0 24px;padding:0}
 #recruit-schedule>h3:first-child{grid-area:1/1}
 #recruit-schedule>.contest{grid-area:2/1}
 #recruit-schedule>dl:first-of-type{grid-area:3/1/span 2}
 #recruit-schedule>h3:nth-of-type(2){grid-area:1/2}
 #recruit-schedule>.demo-video{grid-area:2/2/span 2;width:100%}
 #recruit-schedule>.demo-caption{grid-area:4/2}
 #recruit-schedule>dl:last-of-type{grid-area:5/2}
 #recruit-schedule dl{margin:0;min-width:0}
 #faq{padding:80px max(32px,calc((100% - 1160px)/2))}
 #faq-content{max-width:720px}
 #faq-content>.faq-group,#faq-content>.faq-group:first-child{margin:0}
 #faq .contact-kakao{max-width:360px;margin-inline:auto}
}
@media(min-width:768px) and (max-height:779px), (min-width:768px) and (prefers-reduced-motion:reduce){#support .bonus-stage{padding-top:80px}}
.topic-rows .rolling-window{scroll-behavior:auto;scroll-snap-type:none;overflow-anchor:none}

@media (min-width: 768px) {
  .hero-cta {
    top: calc(26px + env(safe-area-inset-top));
    right: clamp(16px, 3vw, 48px);
    bottom: auto;
    left: auto;
    width: auto;
    transform: none;
    z-index: 30;
  }

  #hero-apply {
    height: 48px;
    padding-inline: 20px;
    border-width: 2px;
    border-radius: 24px;
    box-shadow: 0 4px 0 #000;
    font-size: 16px;
  }

  #intro .topic-rows {
    --edge-fade: min(240px, 25%);
    mask-image: linear-gradient(to right, transparent, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #navigation {
    left: 16px;
    transform: none;
  }
}

.bonus-details .point-row {
  column-gap: 4px;
}
.bonus-details .point-row img {
  object-view-box: inset(6%);
}
.bonus-details .point-example p {
  margin-bottom: 4px;
  line-height: 1.15;
}
#privacy-dialog .privacy-cancel { margin-top: 40px; }
#privacy-dialog .privacy-confirm { margin-top: 12px; }
#success-dialog .success-close { left: auto; right: 12px; }

@media (min-width: 768px) {
  :is(#apply-dialog, #schools-dialog, #privacy-dialog, #success-dialog) {
    inset: 0;
    margin: auto;
    height: fit-content;
    max-height: calc(100dvh - 48px);
    padding: 24px 28px 32px;
    border-radius: 20px;
  }
  :is(#apply-dialog, #schools-dialog, #privacy-dialog) .sheet-handle { display: none; }
  #success-dialog .success-main { padding-top: 40px; }
  #success-dialog .success-actions { margin-top: 32px; padding-bottom: 8px; }
}

dialog h2[autofocus]:focus { outline: none; }