/* Daylight palette taken from the supplied walk: sky #86BFE6, sun #FFE08A,
   foliage #568E49. Deeper companion inks preserve readable text contrast. */
:root{--ink:#17385b;--ink-soft:#405c77;--ink-faint:#566b7f;--paper:#fff;--paper-alt:#f4faff;--line:#b8d4e7;--accent:#1559a6;--teal-600:#176b46;--coral-600:#1559a6;--detail-line:#a8cde044;--sky:#eaf6ff;--sun:#ffe08a;--leaf:#e8f7d5}
body{background:#fff;color:var(--ink)}.site-header{background:#fff}.site-header.has-scrolled{box-shadow:0 1px 0 #a5c7e5,0 6px 18px #2c65a014}.site-nav a{color:#17385b}.site-nav a[aria-current=location]{color:#1559a6}.site-nav a:after{background:#1559a6}.header-language select{border-color:#93b8d7;background:#f2f9ff;color:#17385b}.header-language select:hover,.header-language select:focus{background:#e4f3ff;border-color:#1559a6;box-shadow:0 3px 0 #8cc8f044}.site-nav.is-open{background:#fff;border-color:#9fc7e5}.nav-toggle:before,.nav-toggle:after{background:#17385b}.nav-toggle:not([aria-expanded=true]):before{box-shadow:0 7px #17385b}
main>.original-intro,main>.principles,main>.learning-how,main>.curriculum,main>.site-faq{background:#fff}main>.story,main>.review-modes{background:var(--sky)}main>.cheonjiin{background:#f3f9ff}main>.factory-intro{background:var(--leaf)}main>.rewards{background:#fff2be}main>.mission-gallery{background:#d8edff;color:var(--ink)}
.journey-eyebrow{color:#176b46}.factory-intro h2{font-family:Paperlogy,sans-serif;font-weight:700;letter-spacing:-.045em;color:#174d32}.factory-description{color:#274d39}.factory-features:before{background:#76ac64}.factory-features li>span{background:#237346;border-color:#237346;color:#fff}.factory-features li>div{border-color:#9dcc88}.factory-features h3,.factory-input-help h3{color:#174d32}.factory-features p,.factory-input-help p,.factory-note{color:#33583b}.factory-input-help{border-inline-start-color:#3d8c44}.factory-figure{background:#fff;border-color:#98c682;box-shadow:0 18px 32px #4b872818}.factory-shot{border-color:#b9d7ab}.factory-figure figcaption{color:#3f6042}.factory-play{background:#176b46;border-color:#176b46;color:#fff}.factory-play:hover{background:#105237}
.principle-num{color:#1559a6}.principle-card:hover{background:#eef8ff}.section-title{color:var(--ink)}.section-lede{color:#405c77}.curr-item{background:#f5fbff;border-color:#b8d8ed}.curr-item[open]{background:#e6f4ff;border-color:#599ed2}.curr-item summary:hover{color:#1559a6}.curr-num{color:#1559a6;background:#e2f0fb}.curr-item[open] .curr-num{background:#1559a6;color:#fff}.curr-final{background:#fff3c3;border-color:#e6c356}.curr-final-badge{color:#715719}.course-access strong{color:#1559a6}.course-access>div:first-child strong{color:#176b46}.course-access small{background:#fff3c3;border-inline-start-color:#bb8b1d;color:#604b1d}.site-scope-example>span,.site-scope-example>div{border-color:#73afd9}.site-scope-example strong{background:#d8edff}
.mission-gallery .section-title{color:#17385b}.mission-gallery .section-lede{color:#365979}.mission-gallery .card-flow-toggle{background:#fff;color:#1559a6;border-color:#1559a6}.mission-gallery .card-flow-toggle:hover{background:#ffdf7e}.mission-track .card-art{background:#fff;border-color:#84b8df;box-shadow:0 12px 20px #2865a01c}.mission-track .card-art:after{background:#ffe08a;color:#17385b}.mission-track figcaption,.mission-track figure:hover figcaption,.mission-track figure:focus-within figcaption{color:#17385b}.mission-track figcaption span{color:#405c77}.mission-track .card-art:focus-visible{outline-color:#1559a6}.card-flow-toggle,.zoom-close,.story-btn{color:#1559a6;background:#fff;border-color:#699fc9}.card-flow-toggle:hover,.zoom-close:hover,.story-btn:hover{background:#ffe08a}#screenZoom{background:#fff;border-color:#84b8df}#screenZoom p{color:#17385b}#screenZoom::backdrop{background:#17385bbd}
main>.cta{background:#1559a6;color:#fff}.cta .section-title,.cta h2,.cta p,.cta .support-link{color:#fff}.cta .support-link{text-decoration:underline;text-underline-offset:5px}.cta-inner{background:transparent}.site-footer{background:#f2f9ff;color:#17385b}.footer-copy,.footer-links,.footer-business{color:#405c77}.language-directory{border-color:#bad6ed}.language-directory a{color:#365979}.language-directory a[aria-current]{color:#1559a6}.site-faq dl>div{border-color:#bad6ed}.animation-credit{color:#405c77}.support-link{color:#1559a6}
button,a,summary,select{-webkit-tap-highlight-color:#81c7ff44}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,.screen-open:focus-visible,.mission-track .card-art:focus-visible,.header-language select:focus-visible{outline:3px solid #1559a6;outline-offset:5px}.cta a:focus-visible{outline-color:#ffe08a}
main>section:not(.provided-main){scroll-margin-top:0}
:root{--gold-100:#fff2be;--gold-300:#ffe08a;--gold-600:#775a12;--teal-100:#e4f5d4;--coral-100:#e3f3ff;--pink-600:#1559a6}.logo-kr .dot,.logo-en .dot{color:#b25455}.mission-gallery .section-title{text-align:center;padding-inline:24px}.factory-play[hidden]{display:none}
.name-example{border-color:#b5cde0;background:#fff}.rewards-list .icon-sm{color:#1559a6}
@media(max-width:859px){.nav-toggle{position:relative;display:block!important;flex:0 0 34px;width:34px;height:44px;border:0;background:none;padding:0}.nav-toggle>span:not(.sr-only){display:none}.nav-toggle:before,.nav-toggle:after{content:'';position:absolute;left:6px;width:22px;height:2px;background:#17385b}.nav-toggle:before{top:12px}.nav-toggle:after{top:26px}.nav-toggle[aria-expanded=true]:before,.nav-toggle[aria-expanded=true]:after{top:19px}.site-nav.is-open{max-height:calc(100dvh - var(--header-height,72px) - 24px);overflow:auto}}
html.wheel-scroll,html.keyboard-scroll{scroll-snap-type:none}
/* Language is part of the header typography, with the native select arrow retained. */
.header-language select{border:0;border-radius:0;background:transparent;box-shadow:none;padding:9px 6px 9px 10px;min-height:44px}.header-language select:hover,.header-language select:focus{border:0;background:#eef7ff;box-shadow:none}.header-language select:active{background:#d8edff}.header-language select:focus-visible{outline:3px solid #1559a6;outline-offset:2px}
/* Product explanations share the same content measure as their screenshots. */
.learning-motion-note{max-width:760px;margin:30px auto 0;padding:18px 22px;border-inline-start:3px solid #1559a6;background:#eaf6ff;color:#274c70;font-size:14px;line-height:1.9;text-align:start}.story-reward-note{max-width:64ch;margin:12px auto 26px;color:#274c70;font-size:15px;line-height:1.85;text-align:center}
.rewards-copy{max-width:64ch;width:100%;min-width:0}.rewards-copy .section-lede{margin-inline:0}.rewards-list{padding-inline-start:1.3em}.rewards-list>li:last-child{width:fit-content;max-width:100%}.name-example{box-sizing:border-box;width:100%;max-width:100%;min-width:0;padding:14px 24px;margin-top:12px;font-family:Paperlogy,sans-serif;font-size:17px;overflow-wrap:anywhere}
.cheonjiin-grid{grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:26px 60px;align-items:start}.cheonjiin-grid>div:first-child{grid-column:1;grid-row:1}.cheonjiin-steps{grid-column:1;grid-row:2;margin:0}.opening-preview{grid-column:2;grid-row:1 / span 2;width:100%;max-width:440px;margin:0;justify-self:end}.opening-stage{aspect-ratio:16/9;overflow:hidden;border:1px solid #a9cadf;border-radius:16px;background:#faf8f3}.opening-stage>img,.opening-stage>iframe{display:block;width:100%;height:100%;border:0;object-fit:contain}.opening-preview figcaption{font-size:12px;line-height:1.7;margin:10px 0;color:#405c77}.opening-controls{display:flex;gap:10px;flex-wrap:wrap}.opening-controls button{min-height:44px;min-width:88px;border:1px solid #1559a6;border-radius:6px;padding:8px 14px;font:500 13px Paperlogy,sans-serif;color:#1559a6;background:#fff;cursor:pointer}.opening-controls button:hover{background:#d8edff}.opening-controls button[hidden]{display:none}
/* The stable figure handles input; only its child card tilts. No oscillating observer. */
.mission-track figure{perspective:900px}.mission-track .card-art{--rest-tilt:-1.5deg;--tilt-x:0deg;--tilt-y:0deg;--lift:0px;transform:translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(var(--rest-tilt));transition:transform 220ms cubic-bezier(.22,1,.36,1),box-shadow 220ms ease;transform-style:preserve-3d}.mission-track figure:nth-child(even) .card-art{--rest-tilt:1.5deg}.mission-track .card-art::before{content:'';pointer-events:none;position:absolute;z-index:1;inset:5px;border-radius:9px;background:linear-gradient(115deg,transparent 25%,#ffffff70 48%,transparent 70%);opacity:0;transform:translateX(-25%);transition:opacity 220ms ease,transform 400ms ease}.mission-track figure.is-engaged .card-art,.mission-track .card-art:focus-visible{--rest-tilt:0deg;--lift:-14px;transform:translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(var(--rest-tilt));box-shadow:0 24px 30px #1559a635}.mission-track figure.is-engaged .card-art:before,.mission-track .card-art:focus-visible:before{opacity:.7;transform:translateX(0)}.mission-track .card-art:focus-visible{--tilt-y:-6deg}.mission-track .card-art:active{--lift:-9px}.mission-track{padding-block:30px 36px!important}#screenZoom.card-zoom[open]{animation:card-arrive 320ms cubic-bezier(.22,1,.36,1)}@keyframes card-arrive{from{opacity:.5;transform:perspective(1000px) translateY(16px) rotateY(-12deg) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:760px){.learning-motion-note{padding:16px;font-size:13px}.story-reward-note{font-size:14px}.cheonjiin-grid{grid-template-columns:1fr;gap:24px}.cheonjiin-grid>div:first-child,.cheonjiin-steps,.opening-preview{grid-column:auto;grid-row:auto}.opening-preview{justify-self:center}.name-example{font-size:16px;padding:13px 18px}}
@media(max-width:760px),(max-width:950px) and (pointer:coarse){.provided-main{height:clamp(190px,50svh,440px);min-height:0}}
@media(prefers-reduced-motion:reduce){.mission-track .card-art,.mission-track .card-art:hover,.mission-track .card-art:focus-visible,.mission-track figure.is-engaged .card-art{transform:none!important}.mission-track .card-art:before{display:none}#screenZoom.card-zoom[open]{animation:none!important}}
.cheonjiin-grid>div:first-child .section-lede{margin-inline:0;max-width:64ch}
@media(max-width:950px) and (max-height:500px) and (pointer:coarse){.original-intro{padding-top:24px!important}}
.rewards-list>li.name-explainer{display:inline-grid;grid-template-columns:minmax(0,1fr);align-self:flex-start;width:max-content;max-width:100%;row-gap:8px;box-sizing:border-box}.name-explainer .name-example{width:auto;justify-self:stretch;margin-top:4px}.name-explanation{min-width:0;overflow-wrap:anywhere}.opening-controls button:disabled{opacity:.55;cursor:default}
/* Latest requested mobile ratio takes precedence over the earlier half-screen trial. */
@media(max-width:760px),(max-width:950px) and (pointer:coarse){.provided-main{height:calc(100vw * 9 / 16);min-height:0;aspect-ratio:16/9}}
/* A short hero must also be a native snap target, or initial layout can jump past it. */
main>.provided-main{scroll-snap-align:start;scroll-snap-stop:normal}

/* 2026-10-11 requested main animation trial: width : height = 16 : 9. */
.provided-main{height:auto!important;min-height:0!important;aspect-ratio:16 / 9;width:100%;position:relative}
.provided-main iframe{position:absolute;inset:0;width:100%;height:100%}

/* Portrait U01 preview, mobile text left / animation right. */
.opening-preview{max-width:260px}
.opening-stage{aspect-ratio:9 / 16}
@media(max-width:760px){
 .cheonjiin-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 14px;align-items:start}
 .cheonjiin-grid>div:first-child{grid-column:1 / -1;grid-row:1}
 .cheonjiin-steps{grid-column:1;grid-row:2;min-width:0}
 .opening-preview{grid-column:2;grid-row:2;max-width:220px;justify-self:end;min-width:0}
 .cheonjiin-steps li{gap:8px;align-items:flex-start}
 .cheonjiin-steps li>div{min-width:0}
 .cheonjiin-steps strong{font-size:14px}
 .cheonjiin-steps p{font-size:12px;line-height:1.6}
 .cheonjiin-steps .cj-icon{width:30px;height:30px;flex:0 0 30px}
 .opening-controls{gap:6px}.opening-controls button{min-width:0;width:100%;padding:8px 5px;font-size:12px}
}

.cheonjiin-grid{max-width:1040px;margin-inline:auto;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto 1fr;gap:32px 80px}.cheonjiin-steps{align-self:start}
@media(max-width:760px){.cheonjiin-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 14px}.cheonjiin-steps{display:flex;flex-direction:column;gap:24px;padding-top:14px}.cheonjiin-steps li{display:flex;flex-direction:row;align-items:center;text-align:start;gap:10px}.cheonjiin-steps li p{margin:0}}

/* Match the preceding sections: explanation first, centered examples below on narrow screens. */
.graduation-pair{width:100%;margin-inline:auto}
.graduation-pair figcaption{max-width:100%;overflow-wrap:break-word}
html[lang="ko"] .graduation-pair figcaption{word-break:keep-all}
@media(max-width:759px){.rewards-copy{grid-row:1}.rewards-visual{grid-row:2;width:100%;justify-self:center}.rewards-grid{justify-items:center}}

/* Unit cards: centered, automatically advancing coverflow. */
.mission-track.is-coverflow{--card-width:min(40vw,220px);display:block;position:relative;width:100%;max-width:1060px;height:calc(var(--card-width)*1.78 + 92px);padding:20px 0!important;margin-inline:auto;overflow:visible;perspective:1000px;scroll-snap-type:none;touch-action:pan-y;direction:ltr}
.mission-track.is-coverflow figure{position:absolute;top:20px;left:50%;width:var(--card-width);padding:0;margin:0 0 0 calc(var(--card-width)*-.5);transform:translateX(var(--offset)) translateZ(var(--depth)) rotateY(var(--angle)) scale(var(--scale));transform-origin:50% 45%;transition:transform 800ms cubic-bezier(.22,1,.36,1),filter 800ms;filter:brightness(.7);backface-visibility:hidden}
.mission-track.is-coverflow figure.is-active{filter:brightness(1)}
.mission-track.is-coverflow .card-art{width:100%;height:auto!important;aspect-ratio:9/16;padding:0;border:1px solid #8da7b3;border-radius:12px;box-shadow:0 18px 32px #17385b28;background:transparent}
.mission-track.is-coverflow .card-art img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.mission-track.is-coverflow figcaption{opacity:0;transition:opacity 400ms;font-size:13px;word-break:keep-all}
.mission-track.is-coverflow .is-active figcaption{opacity:1}
.mission-track.is-coverflow .card-art:after{display:none}
.card-gallery-controls{display:flex;justify-content:center;gap:14px;direction:ltr;margin:10px auto 0}.card-gallery-controls .card-flow-toggle{margin:0}
@media(prefers-reduced-motion:reduce){.mission-track.is-coverflow figure,.mission-track.is-coverflow figcaption{transition:none}}

.mission-gallery>.wrap .section-lede{text-align:center}

/* Graduation card and keyboard share a top edge; name conversion sits under the keyboard. */
.graduation-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(12px,3vw,22px)}
.graduation-pair figure{width:100%;max-width:220px;justify-self:center;align-self:start}
.graduation-pair .name-example{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;margin:14px 0 0;padding:12px 8px;font-size:clamp(12px,3.2vw,16px);line-height:1.5}
.graduation-pair .name-example>span{max-width:100%;overflow-wrap:anywhere}
.graduation-pair figcaption{margin-top:8px;font-size:12px;line-height:1.5}
/* Transformed cards must not become snap targets in the page's vertical scroller. */
.mission-track.is-coverflow figure{scroll-snap-align:none}

/* Keep the U01 explanation and portrait preview together as one compact group. */
.cheonjiin-grid{max-width:720px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:28px 32px;align-items:center}
.cheonjiin-grid>div:first-child{grid-column:1 / -1;grid-row:1}
.cheonjiin-grid>div:first-child .section-lede{margin-bottom:0}
.cheonjiin-steps{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:24px;width:max-content;max-width:100%;justify-self:end;align-self:center;padding-top:0}
.cheonjiin-steps li{flex-direction:row;align-items:center;text-align:start;gap:12px}
.opening-preview{grid-column:2;grid-row:2;max-width:240px;justify-self:start;align-self:center}
.opening-preview .opening-controls{display:none}
@media(max-width:600px){
 .cheonjiin-grid{max-width:440px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:24px}
 .cheonjiin-grid>div:first-child,.cheonjiin-steps,.opening-preview{grid-column:1;grid-row:auto}
 .cheonjiin-steps{justify-self:center;gap:16px}
 .opening-preview{max-width:220px;justify-self:center}
}

/* Small controls below the recording leave the video itself unobstructed. */
.factory-media-controls{display:flex;justify-content:center;gap:12px;margin:12px 0 0}
.factory-media-controls[hidden]{display:none}
.factory-media-controls button{min-width:44px;min-height:44px;padding:6px 12px;border:1px solid #d2dad6;border-radius:8px;background:#fff;color:#191919;font:600 18px system-ui;cursor:pointer}
.factory-media-controls button:focus-visible{outline:2px solid #191919;outline-offset:3px}