:root{color-scheme:light;font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;--ink:#293c4d;--muted:#8a99a4;--blue:#348dcc;--orange:#ed9844}
*{box-sizing:border-box}
body{margin:0;min-width:300px;color:var(--ink);background:radial-gradient(ellipse at 5% 0%,#fff3dc 0,transparent 43%),radial-gradient(ellipse at 95% 24%,#e8f5fd 0,transparent 48%),#fcfbf6;font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible{outline:3px solid #147dc2;outline-offset:5px}
h1,h2,p{margin:0}
.hub-shell{width:min(1200px,calc(100% - 64px));margin:0 auto;padding:25px 0 max(22px,env(safe-area-inset-bottom))}
.hub-header{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:48px}
.brand{display:inline-flex;align-items:center;gap:11px;min-height:44px;border-radius:8px;font-size:27px;line-height:1;font-weight:900;letter-spacing:-.07em}
.brand-dot{color:var(--orange);margin-left:2px}
.brand-mark{display:flex;align-items:flex-end;justify-content:center;gap:3px;width:35px;height:35px;padding:9px 7px;border:1px solid #f4c789;border-radius:12px;background:#ffddaa;box-shadow:inset 0 1px 0 #fff7e4;transform:rotate(-7deg)}
.brand-mark span{width:5px;height:9px;background:#d98e3b;border-radius:3px}
.brand-mark span:nth-child(2){height:17px;background:#fffdf5}
.brand-mark span:nth-child(3){height:13px;background:#e9a353}
.site-address{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid #e7e9e5;border-radius:9px;background:#ffffff7a;color:#97a09f;font-size:11px;letter-spacing:.015em;font-weight:650;white-space:nowrap}
.site-address>span{width:5px;height:5px;border-radius:50%;background:#b4caba}
.welcome{padding:28px 0 26px;text-align:center}
.eyebrow{font-size:11px;font-weight:750;color:#a5a28f;letter-spacing:.035em;margin-bottom:8px}
h1{font-size:clamp(26px,3.4vw,37px);letter-spacing:-.065em;line-height:1.35;font-weight:850;word-break:keep-all}
h1 span{color:#598faf}
.welcome-copy{font-size:13px;color:#9aa3a7;font-weight:550;margin-top:9px;letter-spacing:-.025em}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.game-card{display:flex;flex-direction:column;min-width:0;background:white;border:1px solid #e2ebee;border-radius:27px;box-shadow:0 6px 21px #385c7908,0 2px 4px #385c7903;overflow:hidden}
.calendar-card{border-color:#ece6dc}
.game-visual{position:relative;height:205px;overflow:hidden;isolation:isolate;border-bottom:1px solid #e5eff5}
.procedure-visual{background:linear-gradient(145deg,#e1f2ff,#eff8fd 75%)}
.calendar-visual{background:linear-gradient(145deg,#fff0d5,#fff8ea 75%);border-bottom-color:#f4ecdc}
.game-visual img{position:absolute;object-fit:contain;z-index:3}
.narmi-character{width:206px;height:206px;left:62px;bottom:-5px;transform:rotate(-5deg)}
.dali-character{width:186px;height:186px;left:111px;bottom:2px;transform:rotate(5deg)}
.visual-halo{position:absolute;width:222px;height:222px;border-radius:50%;left:60px;top:9px;background:#ffffff54;border:1px solid #ffffffa3}
.calendar-visual .visual-halo{width:206px;height:206px;left:104px;top:16px;background:#fffdf34d;border-color:#fffdf39c}
.visual-cloud{position:absolute;display:block;height:12px;width:55px;border-radius:50px;background:#ffffff8c}
.visual-cloud::before{content:"";position:absolute;width:28px;height:24px;bottom:2px;left:13px;border-radius:50%;background:inherit}
.cloud-one{left:28px;top:46px;transform:scale(.85)}
.cloud-two{right:24px;top:151px;transform:scale(1.1);opacity:.7}
.calendar-visual .cloud-one{left:32px;top:129px}
.calendar-visual .cloud-two{right:27px;top:37px}
.bounce-path,.jump-path{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.procedure-tile{position:absolute;z-index:2;display:grid;place-items:center;width:40px;height:43px;border:3px solid #fff;border-radius:13px;background:#ecf7ff;box-shadow:0 3px 0 #b1d3e8;color:#83b0cb;font-size:20px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.tile-one{right:95px;top:93px;transform:rotate(-8deg)}
.tile-two{right:37px;top:63px;transform:rotate(7deg);background:#fff6d8;color:#c0a76c;box-shadow:0 3px 0 #dfd0a5}
.tile-three{right:70px;top:151px;transform:rotate(5deg);width:34px;height:36px;font-size:17px;opacity:.8}
.stamp-ball{position:absolute;z-index:4;display:grid;place-items:center;width:29px;height:29px;right:145px;top:75px;border:3px solid #fff;border-radius:50%;background:#f9826a;color:white;font-size:14px;box-shadow:0 3px 0 #e9b5a94a;transform:rotate(-14deg)}
.visual-spark{position:absolute;z-index:4;color:#efc778;font-size:19px}
.spark-one{left:24px;bottom:26px;transform:rotate(12deg)}
.spark-two{left:62%;top:28px;color:#a9cddd;font-size:22px}
.calendar-visual .spark-one{left:71px;bottom:54px;font-size:18px}
.calendar-visual .spark-two{left:285px;top:32px;color:#e5bc78}
.date-platform{position:absolute;z-index:2;display:flex;align-items:center;flex-direction:column;overflow:hidden;width:43px;height:51px;border:2px solid #fff;border-radius:11px;background:#fffdf7;color:#bfa16b;box-shadow:0 4px 0 #ebd4ab;font-variant-numeric:tabular-nums}
.date-platform small{display:block;width:100%;background:#ecd6ad;color:#fff;font-size:6px;line-height:13px;font-weight:800;letter-spacing:.07em;text-align:center}
.date-platform strong{font-size:22px;line-height:31px;font-weight:850}
.date-one{left:42px;top:59px;transform:rotate(-8deg)}
.date-two{right:51px;top:97px;transform:rotate(5deg)}
.arrival-stamp{position:absolute;display:grid;place-items:center;right:91px;bottom:23px;width:31px;height:31px;border:2px solid #a7cbae;outline:1px dashed #a7cbae;outline-offset:3px;border-radius:50%;background:#f2f9ec;color:#91b495;font-size:17px;line-height:1;transform:rotate(-15deg)}
.game-copy{padding:22px 26px 20px}
.game-category{display:inline-flex;align-items:center;gap:7px;color:#88adc6;font-size:10px;font-weight:800;letter-spacing:.02em;margin-bottom:5px}
.game-category>span{width:5px;height:5px;border-radius:50%;background:#a6cbe3}
.calendar-card .game-category{color:#c0a575}
.calendar-card .game-category>span{background:#e5c088}
h2{font-size:26px;font-weight:850;letter-spacing:-.06em;line-height:1.4;color:#38576d}
.calendar-card h2{color:#74644c}
.game-type{font-size:11px;color:#93a7b5;font-weight:700;margin-top:7px}
.calendar-card .game-type{color:#b4a791}
.game-instruction{margin-top:7px;font-size:13px;font-weight:550;letter-spacing:-.025em;color:#7f939f;word-break:keep-all}
.calendar-card .game-instruction{color:#a79881}
.start-button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:13px 18px;margin:auto 24px 24px;border:1px solid #9bc6e4;border-bottom:3px solid #7fabcb;border-radius:15px;background:#e1f1fc;color:#437fa6;font-size:15px;line-height:1.4;font-weight:800;letter-spacing:-.025em;transition:background-color .15s,box-shadow .15s}
.start-arrow{display:grid;place-items:center;width:27px;height:27px;border:1px solid #b5d6ea;border-radius:9px;background:#ffffff47;font-size:21px;line-height:1;font-weight:600}
.start-button:hover{background:#d4eafd;box-shadow:0 3px 12px #9cc7e62a}
.calendar-start{border-color:#ecc086;border-bottom-color:#dbaa6a;background:#ffe6bd;color:#ae7d3f}
.calendar-start .start-arrow{border-color:#edc68e;background:#fff8e440}
.calendar-start:hover{background:#ffdda5;box-shadow:0 3px 12px #d5b6842a}
.hub-footer{display:flex;align-items:center;justify-content:center;gap:8px;color:#b0b4ad;font-size:10px;font-weight:600;text-align:center;padding-top:23px}
.hub-footer>span{color:#d7c299;font-size:15px}
@media(min-width:700px) and (max-width:920px){
.hub-shell{width:calc(100% - 40px)}
.game-grid{gap:18px}
.game-visual{height:188px}
.narmi-character{left:26px;width:190px;height:190px}
.dali-character{left:71px;width:176px;height:176px}
.visual-halo{left:22px;width:202px;height:202px}
.calendar-visual .visual-halo{left:57px}
.tile-one{right:66px;top:100px}
.tile-two{right:20px;top:57px}
.tile-three{right:34px;top:147px}
.stamp-ball{right:99px;top:50px}
.date-one{left:23px;top:47px}
.date-two{right:23px;top:86px}
.arrival-stamp{right:37px;bottom:19px}
.game-copy{padding:20px 22px}
h2{font-size:24px}
.game-instruction{font-size:12px}
.start-button{margin:auto 20px 20px}
}
@media(max-width:699px){
.hub-shell{width:min(520px,calc(100% - 28px));padding-top:max(17px,env(safe-area-inset-top))}
.hub-header{min-height:42px}
.brand{font-size:24px;gap:8px}
.brand-mark{width:31px;height:31px;border-radius:10px;padding:7px}
.site-address{padding:5px 8px;font-size:9px;gap:5px}
.welcome{padding:22px 2px 23px}
.eyebrow{font-size:10px;margin-bottom:6px}
h1{font-size:clamp(23px,5.65vw,31px)}
.welcome-copy{font-size:11px;margin-top:7px}
.game-grid{grid-template-columns:1fr;gap:15px}
.game-card{display:grid;grid-template-columns:118px minmax(0,1fr);border-radius:22px}
.game-visual{height:auto;min-height:152px;border:0;border-radius:0 0 19px 0}
.game-copy{padding:18px 14px 17px;align-self:center}
.game-category{font-size:9px;gap:5px;margin-bottom:4px}
h2{font-size:clamp(19px,4.75vw,24px)}
.game-type{font-size:9px;margin-top:7px;letter-spacing:-.025em}
.game-instruction{font-size:11px;line-height:1.7;margin-top:7px}
.narmi-character{width:130px;height:130px;left:-8px;bottom:7px;transform:rotate(-6deg)}
.dali-character{width:121px;height:121px;left:-1px;bottom:12px}
.visual-halo{width:158px;height:158px;left:-40px;top:26px}
.calendar-visual .visual-halo{width:150px;height:150px;left:-26px;top:22px}
.cloud-one,.calendar-visual .cloud-one{top:30px;left:-19px;transform:scale(.55)}
.cloud-two,.bounce-path,.jump-path{display:none}
.procedure-tile{width:25px;height:27px;border-width:2px;border-radius:8px;font-size:12px}
.tile-one{right:7px;top:13px}
.tile-two,.tile-three{display:none}
.stamp-ball{right:9px;top:60px;width:20px;height:20px;font-size:8px;border-width:2px}
.visual-spark{font-size:12px}
.spark-one{left:8px;bottom:10px}
.spark-two{left:29px;top:17px;font-size:13px}
.calendar-visual .spark-one{left:6px;bottom:16px;font-size:11px}
.calendar-visual .spark-two{left:19px;top:18px;font-size:12px}
.date-platform{width:27px;height:32px;border-radius:7px}
.date-platform small{font-size:4px;line-height:8px}
.date-platform strong{font-size:14px;line-height:20px}
.date-one{display:none}
.date-two{right:5px;top:12px}
.arrival-stamp{right:9px;bottom:10px;width:20px;height:20px;border-width:1px;outline-offset:2px;font-size:12px;z-index:4}
.start-button{grid-column:1 / -1;min-height:48px;padding:10px 15px;margin:0 14px 14px;font-size:13px;border-radius:13px}
.start-arrow{width:23px;height:23px;border-radius:8px;font-size:18px}
.hub-footer{font-size:9px;padding-top:18px}
}
@media(max-width:359px){
.hub-shell{width:calc(100% - 22px)}
.game-card{grid-template-columns:100px minmax(0,1fr)}
.game-copy{padding-left:12px;padding-right:10px}
.narmi-character{left:-19px}
.dali-character{width:112px;height:112px;left:-7px}
h1{font-size:22px}
h2{font-size:18px}
.game-type{font-size:8px}
.game-instruction{font-size:10px}
}
.catch-card{border-color:#dfeae0}
.catch-visual{background:linear-gradient(145deg,#e0f3e7,#f3faee 78%);border-bottom-color:#e4eee1}
.catch-character{width:162px;height:162px;left:calc(55% - 81px);bottom:1px;transform:rotate(-3deg)}
.catch-visual .visual-halo{width:192px;height:192px;left:calc(55% - 96px);top:28px;background:#ffffff4d;border-color:#ffffffb3}
.catch-token{position:absolute;z-index:4;display:flex;align-items:baseline;justify-content:center;gap:2px;width:41px;height:43px;padding:6px 2px;border:3px solid #fff;border-radius:12px;background:#edf8df;box-shadow:0 3px 0 #b6d0ab;color:#8eb079;line-height:1}
.catch-token:before{content:"";position:absolute;left:45%;top:-17px;height:9px;border-left:2px dashed #a5c69a;opacity:.75}
.catch-token strong{font-size:21px;font-weight:850;font-variant-numeric:tabular-nums}
.catch-token small{font-size:8px;font-weight:800}
.catch-three{left:20px;top:80px;transform:rotate(-9deg)}
.catch-seven{left:54px;top:18px;transform:rotate(5deg);background:#fff2cd;color:#b8a068;box-shadow:0 3px 0 #dcca9f}
.catch-fifteen{right:18px;top:43px;transform:rotate(8deg);background:#e5f3ef;color:#7fa99d;box-shadow:0 3px 0 #accfc3}
.catch-ground{position:absolute;left:calc(55% - 84px);bottom:8px;width:168px;height:24px;border-radius:50%;background:#b7d9b23b}
.catch-visual .cloud-one{left:13px;top:144px;transform:scale(.7)}
.catch-visual .cloud-two{right:17px;top:164px;transform:scale(.8)}
.catch-visual .spark-one{left:32px;bottom:17px;color:#b4ca97}
.catch-visual .spark-two{left:66%;top:12px;color:#b9ce99}
.catch-card .game-category{color:#8cae8d}
.catch-card .game-category>span{background:#b2cea8}
.catch-card h2{color:#5f7f68}
.catch-card .game-type{color:#9ab198}
.catch-card .game-instruction{color:#8c9e88}
.catch-start{border-color:#b3cfad;border-bottom-color:#94b490;background:#e2f1d9;color:#7a9b6f}
.catch-start .start-arrow{border-color:#c2dbb9;background:#ffffff47}
.catch-start:hover{background:#d7ebcb;box-shadow:0 3px 12px #abc5992a}
@media(min-width:1120px){
.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.game-visual{height:190px}
.narmi-character{width:184px;height:184px;left:22px;bottom:0}
.dali-character{width:170px;height:170px;left:calc(50% - 85px);bottom:2px}
.visual-halo{width:198px;height:198px;left:21px;top:14px}
.calendar-visual .visual-halo{width:188px;height:188px;left:calc(50% - 94px);top:16px}
.tile-one{right:65px;top:97px}
.tile-two{right:14px;top:47px}
.tile-three{right:31px;top:146px}
.stamp-ball{right:106px;top:42px}
.date-one{left:17px;top:50px}
.date-two{right:17px;top:80px}
.arrival-stamp{right:41px;bottom:18px}
.calendar-visual .spark-two{left:69%;top:22px}
.game-copy{padding:21px 21px 19px}
h2{font-size:24px}
.game-instruction{font-size:12px}
.start-button{margin:auto 20px 20px;padding:12px 14px;font-size:13px}
}
@media(min-width:700px) and (max-width:1119px){
.catch-card{grid-column:1 / -1;display:grid;grid-template-columns:42% minmax(0,1fr)}
.catch-card .game-visual{grid-row:1 / 3;height:100%;min-height:231px;border:0;border-right:1px solid #e4eee1}
.catch-card .game-copy{align-self:end;padding:24px 27px 19px}
.catch-card .start-button{align-self:start;margin:0 25px 23px}
.catch-character{width:182px;height:182px;left:calc(55% - 91px);bottom:12px}
.catch-visual .visual-halo{width:210px;height:210px;left:calc(55% - 105px);top:31px}
.catch-seven{left:48px;top:22px}
.catch-three{left:22px;top:94px}
.catch-fifteen{right:21px;top:55px}
.catch-ground{bottom:17px}
}
@media(max-width:699px){
.catch-character{width:112px;height:112px;left:4px;bottom:11px;transform:rotate(-4deg)}
.catch-visual .visual-halo{width:151px;height:151px;left:-25px;top:26px}
.catch-token{width:24px;height:27px;border-width:2px;border-radius:8px;padding:4px 1px;gap:1px}
.catch-token strong{font-size:13px}
.catch-token small{font-size:5px}
.catch-token:before{top:-10px;height:5px;border-left-width:1px}
.catch-three{left:5px;top:17px}
.catch-seven{left:45px;top:5px}
.catch-fifteen{right:4px;top:25px;width:27px}
.catch-ground{left:5px;bottom:16px;width:109px;height:17px}
.catch-visual .cloud-one{left:-20px;top:100px}
.catch-visual .spark-one{left:5px;bottom:11px;font-size:11px}
.catch-visual .spark-two{left:17px;top:62px;font-size:10px}
}
@media(max-width:359px){.catch-character{left:-6px;width:109px;height:109px}.catch-seven{left:36px}.catch-fifteen{right:1px;top:34px}.catch-ground{left:-1px;width:98px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;scroll-behavior:auto!important}}