:root{
  font-family:Arial,"Noto Sans KR",sans-serif;font-synthesis:none;
  --ink:#284f45;--muted:#648476;--mint:#458d80;--paper:#f7efdc;--line:#d7dfcf;
  color:var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#c4ebdf}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:3px solid #64ac91;outline-offset:4px}
#app,#world{width:100%;height:100%;display:block;position:relative}
#world{outline:none;touch-action:none;cursor:grab}
#kiosk-dialog{display:none!important}
#world:active{cursor:grabbing}
.hud-top{position:absolute;left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));top:max(24px,env(safe-area-inset-top));display:flex;align-items:flex-start;justify-content:space-between;gap:20px;pointer-events:none;z-index:5}
.brand{color:#436f5d;text-shadow:0 2px 12px #fffff1b8}
.brand-kicker{font-size:12px;font-weight:700;letter-spacing:1.2px;display:block;margin-bottom:7px}
.brand strong{font-size:30px;letter-spacing:1px;font-weight:900;line-height:1}
.brand strong span{font-size:18px;color:#689778;margin-left:6px;letter-spacing:0}
.online{display:grid;grid-template-columns:7px auto;align-items:center;column-gap:9px;padding:12px 16px;border:1px solid #fffdf2d9;border-radius:22px;background:#fffdf2d1;box-shadow:0 5px 22px #55785c12;backdrop-filter:blur(8px);font-size:14px;color:#567b68}
.online i{width:7px;height:7px;background:#7bbe95;border-radius:50%;grid-row:1}
.online span{font-weight:600}
.online small{grid-column:2;font-size:12px;color:#8aa18b;margin-top:4px}
.online.offline i{background:#dfb783}
.hud-actions{position:absolute;top:max(111px,calc(env(safe-area-inset-top) + 88px));right:max(24px,env(safe-area-inset-right));z-index:5;display:flex;gap:8px}
.round-button{width:44px;height:44px;border:1px solid #fffdf2b3;border-radius:50%;display:grid;place-items:center;background:#fffdf2c9;color:#5d8873;font-weight:700;font-size:20px;box-shadow:0 4px 16px #56785d0c}
.round-button:hover{background:#fffdf2}
.round-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.location{position:absolute;left:max(26px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));z-index:5;pointer-events:none;text-shadow:0 1px 12px #fffdf2}
.location span{display:block;font-size:12px;letter-spacing:1.3px;color:#73957b;font-weight:700}
.location strong{display:block;font-size:18px;letter-spacing:-.5px;margin-top:7px}
.controls{position:absolute;left:50%;bottom:max(25px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:12px;background:#fffdf1ac;border:1px solid #ffffffa3;border-radius:24px;padding:10px 16px;color:#66846d;font-size:12px;white-space:nowrap;pointer-events:none}
.controls i{width:3px;height:3px;border-radius:50%;background:#acbba0}
.controls kbd{font:inherit;font-weight:700}
.interaction{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);z-index:10;text-align:center}
.interaction[hidden]{display:none}
.interaction>span{display:inline-block;font-size:13px;font-weight:600;color:#65816a;background:#fffdf1d9;padding:6px 12px;border-radius:16px;margin-bottom:8px}
.interaction button{border:1px solid #fff8e6;background:#fffbed;color:#517963;border-radius:22px;padding:15px 20px;min-width:210px;display:flex;align-items:center;gap:12px;justify-content:center;box-shadow:0 5px 0 #adc599,0 10px 24px #6686591f;transition:transform .15s}
.interaction button:hover{transform:translateY(-2px)}
.interaction button:active{transform:translateY(3px);box-shadow:0 2px 0 #adc599}
.interaction kbd{font:inherit;font-size:12px;background:#e7efd5;border-radius:6px;padding:4px 7px}
.interaction b{font-size:15px}
.interaction button>span{font-size:18px}
.speed-state{position:absolute;left:50%;top:88px;transform:translate(-50%,-5px);display:flex;gap:8px;align-items:center;background:#fffdf1c9;color:#63816a;padding:9px 14px;border-radius:20px;font-size:13px;font-weight:600;opacity:0;transition:.2s;z-index:5;pointer-events:none}
.speed-state.visible{opacity:1;transform:translate(-50%,0)}
.speed-state i{width:14px;height:7px;border-top:2px solid #8bbe9d;border-bottom:2px solid #8bbe9d;transform:skewX(-25deg)}
.toast{position:absolute;left:50%;top:145px;z-index:30;transform:translate(-50%,-8px);background:#fffdf1ed;color:#62816b;border:1px solid #fff;border-radius:20px;padding:12px 18px;font-size:14px;box-shadow:0 8px 24px #6c8a5614;opacity:0;transition:.2s;pointer-events:none;max-width:calc(100% - 36px);text-align:center;line-height:1.5}
.toast.show{opacity:1;transform:translate(-50%,0)}
.activity-notice{position:fixed;z-index:35;left:50%;right:auto;top:min(230px,25vh);bottom:auto;margin:0;transform:translateX(-50%);width:min(380px,calc(100% - 40px));max-height:70vh;overflow:auto;background:#fffdf1f5;color:#315d56;border:1px solid #fff;border-radius:18px;padding:14px 16px;box-shadow:0 6px 24px #184f3b20;font-size:14px;line-height:1.5}
.activity-notice::backdrop{background:transparent;backdrop-filter:none;touch-action:none}
.activity-notice[hidden]{display:none}.activity-notice p{margin:0 0 10px}.activity-notice button{display:block;margin-left:auto;border:0;border-radius:12px;padding:8px 18px;background:#dcecdf;color:#315d56;font:inherit;cursor:pointer}.activity-details{font-size:14px;line-height:1.6;margin-top:20px}
.arrival{position:absolute;inset:0;z-index:20;overflow:hidden;transition:opacity .7s}
.arrival::before{content:'';position:absolute;inset:13.5% 8%;border-radius:min(16.8vw,14.6vh);box-shadow:0 0 0 100vmax #cec8bb;pointer-events:none}
.arrival.done{opacity:0;pointer-events:none}
.arrival-copy{position:absolute;left:20px;right:20px;top:20%;text-align:center;text-shadow:0 2px 24px #ffffed}
.arrival-route{font-size:12px;letter-spacing:2px;font-weight:700;color:#759881}
.arrival h1{font-size:clamp(38px,5.7vw,74px);line-height:1.18;letter-spacing:-3px;margin:17px 0 20px;color:#456f59}
.arrival h1 b{color:#5ba987}
.arrival p{font-size:20px;line-height:1.6;margin:0;color:#315d56;font-weight:700}
.arrival-progress{position:absolute;left:max(6vw,30px);bottom:65px;width:min(310px,43vw);height:3px;background:#fffbe39c;border-radius:2px}
.arrival-progress span{display:block;width:0;height:100%;background:#83b998;border-radius:2px;transition:width .12s linear}
#skip-arrival{position:absolute;right:max(5vw,24px);bottom:43px;border:1px solid #fff;border-radius:22px;background:#fffdf2de;color:#698a71;padding:12px 16px;font-size:13px}
.window-vignette{position:absolute;inset:0;pointer-events:none;border:14px solid #fffae645;border-radius:42% / 24%;box-shadow:inset 0 0 40px #fff4d62b}
.ferry-overlay{position:absolute;inset:0;z-index:19;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:16vh;text-align:center;text-shadow:0 2px 20px #fff9de;color:#476e5b}
.ferry-overlay[hidden]{display:none}
.ferry-overlay>span{font-size:12px;letter-spacing:1.5px;color:#678e76}
.ferry-overlay h2{font-size:clamp(32px,5vw,58px);letter-spacing:-2px;line-height:1.15;margin:15px 0}
.ferry-overlay p{font-size:20px;margin:0;color:#315d56;font-weight:700}
.wake{display:flex;gap:8px;margin-top:19px}
.wake i{display:block;width:30px;height:5px;border-top:2px solid #fffce9;border-radius:50%;animation:wake 1.5s ease-in-out infinite}
.wake i:nth-child(2){animation-delay:.17s}.wake i:nth-child(3){animation-delay:.34s}
dialog{color:var(--ink)}
dialog::backdrop{background:#608b7938;backdrop-filter:blur(6px)}
.panel{border:1px solid #fff;border-radius:28px;background:#fffdf3f7;box-shadow:0 20px 80px #456f5933;padding:32px;max-height:calc(100% - 32px)}
.panel-kicker{font-size:12px;letter-spacing:1.6px;color:#90aa88;font-weight:700}
.panel h2{font-size:27px;letter-spacing:-1px;margin:10px 0 24px}
.dialog-close{position:absolute;right:15px;top:15px;border:0;background:#eff2e2;color:#7a9478;font-size:27px;line-height:1;width:40px;height:40px;border-radius:50%}
.dialog-close:hover{background:#e0ead0}
.news-panel{width:min(640px,calc(100% - 28px))}
.news-list{display:grid;gap:10px}
.news-item{display:grid;grid-template-columns:56px 1fr;gap:16px;border-top:1px solid var(--line);padding:16px 4px}
.news-item:first-child{border-top:0}
.news-date{font-size:13px;font-weight:700;color:#94a88a;padding-top:3px}
.news-item small{display:block;color:#bd9676;font-size:13px;margin-bottom:7px}
.news-item strong{font-size:16px;display:block}
.news-item p{font-size:14px;line-height:1.7;color:#829580;margin:8px 0 0}
.kiosk-panel{width:min(960px,calc(100% - 28px))}
.kiosk-head{display:flex;justify-content:space-between;align-items:flex-start}
.kiosk-head h2{padding-right:25px}
.search-row{height:48px;border:1px solid var(--line);background:#fff;border-radius:16px;display:flex;align-items:center;padding:0 14px;gap:10px}
.search-row svg{width:19px;fill:none;stroke:#98b095;stroke-width:1.8}
.search-row input{border:0;outline:0;background:transparent;width:100%;font-size:16px;color:var(--ink)}
.tag-list{display:flex;gap:8px;overflow:auto;padding:16px 1px;scrollbar-width:none}
.tag-list button{border:1px solid var(--line);border-radius:20px;background:transparent;color:#82987b;padding:8px 13px;font-size:14px;white-space:nowrap}
.tag-list button.active{background:#8fbd9b;color:#fffdf2;border-color:#8fbd9b}
.work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-height:min(450px,49vh);overflow:auto;padding:3px}
.work-card{border:1px solid var(--line);background:#fffdf3;border-radius:19px;overflow:hidden;text-align:left;padding:0;transition:transform .2s}
.work-card:hover{transform:translateY(-3px)}
.work-art{height:110px;display:grid;place-items:center;color:#fffdf1;font-size:40px}
.work-art{width:100%;object-fit:cover}
.real-work{width:100%;height:100%;overflow:auto;background:#183f43;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:25px;padding:34px}
.real-work>img{width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:16px;box-shadow:0 10px 32px #061f2555}
.real-work-copy{color:#f7efdc;display:flex;align-items:flex-start;flex-direction:column;gap:18px}
.real-work-copy small{font-size:14px;color:#92c5b4}
.real-work-copy p{font-size:18px;line-height:1.8;margin:0}
.work-devices{font-size:13px;color:#a8c8ba;line-height:1.7}
.play-work{display:inline-block;border-radius:18px;background:#dfb775;color:#283e35;text-decoration:none;padding:15px 22px;font-size:16px;font-weight:700}
.play-work:hover{background:#ecd09a}
.work-copy{padding:14px}
.work-copy small{font-size:12px;color:#8aaa86}
.work-copy strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0}
.work-copy span{font-size:12px;color:#9ba88f}
.work-viewer{padding:0;border:0;width:min(1040px,calc(100% - 22px));height:min(700px,calc(100% - 22px));max-width:none;max-height:none;border-radius:26px;overflow:hidden;background:#d5e8cc;box-shadow:0 20px 80px #456f5955}
.viewer-close{z-index:2;background:#fffdf1de}
.work-stage{height:calc(100% - 108px);display:grid;place-items:center;position:relative;overflow:hidden}
.demo-game{width:100%;height:100%;display:grid;place-items:center;position:relative}
.demo-symbol{font-size:clamp(80px,16vw,180px);font-weight:900;color:#fffdf1;animation:float 4s ease-in-out infinite}
.demo-game p{position:absolute;bottom:30px;font-size:16px;color:#fffdf1;padding:0 20px;text-align:center}
.work-meta{height:108px;background:#fffdf1;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:15px}
.work-meta span{font-size:12px;color:#b49b7a}
.work-meta h2{font-size:20px;margin:4px 0;letter-spacing:-.5px}
.work-meta p{font-size:12px;color:#94a28a;margin:0}
.work-meta button,.secondary-button{border:0;border-radius:16px;background:#92bd9b;color:#fffdf1;padding:13px 17px;font-size:14px;font-weight:700;flex-shrink:0}
.help-panel{width:min(680px,calc(100% - 28px))}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.guide-grid article{position:relative;background:#edf2de;border-radius:19px;padding:20px}
.guide-grid article>b{position:absolute;right:14px;top:10px;color:#cedbc0;font-size:25px}
.guide-grid strong{font-size:16px}
.guide-grid p{font-size:14px;line-height:1.7;color:#829278;margin:9px 0 0}
.secondary-button{margin-top:18px;background:#e7edda;color:#809571}
#touch-ui{display:none}
#fatal{position:absolute;inset:0;z-index:100;background:#dcefd7;color:#527859;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}
#fatal[hidden]{display:none}
#fatal p{font-size:16px;line-height:1.8}
#fatal button{border:0;border-radius:18px;background:#96bd93;color:#fff;padding:14px 20px}
@keyframes wake{50%{transform:translateY(5px) scaleX(.7);opacity:.4}}
@keyframes float{50%{transform:translateY(-8px)}}
@media(pointer:coarse){
  #jump-button{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:205px;width:62px;height:62px;border:1px solid #f8edda;border-radius:50%;background:#f7efdcda;color:#3d7567;font-size:14px;font-weight:700;pointer-events:auto;touch-action:manipulation;box-shadow:0 4px 12px #184f3b20}
  .controls{display:none}#touch-ui{display:block;pointer-events:none}
  #joystick{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(30px,env(safe-area-inset-bottom));width:112px;height:112px;border:2px solid #fffdf2ac;background:#fffdf126;border-radius:50%;pointer-events:auto;touch-action:none}
  #joystick-knob{position:absolute;left:31px;top:31px;width:46px;height:46px;border:2px solid #fffdf2;background:#fffad7da;border-radius:50%;box-shadow:0 5px 14px #76945b20}
  #touch-ui>span{position:absolute;right:22px;bottom:max(25px,env(safe-area-inset-bottom));font-size:12px;color:#75916f;text-shadow:0 1px 7px #fff;max-width:130px;text-align:right;line-height:1.4}
  .location{bottom:165px}.interaction{left:auto;right:21px;bottom:78px;transform:none}
  .interaction button{min-width:164px;padding:14px}.interaction kbd{display:none}
}
@media(max-width:720px){
  .real-work{grid-template-columns:1fr;padding:26px 20px;gap:20px}.real-work-copy p{font-size:16px}.real-work>img{max-height:230px}
  .hud-top{left:18px;right:18px;top:20px;gap:10px}.brand strong{font-size:26px}
  .brand-kicker{font-size:12px;letter-spacing:.25px;max-width:152px;line-height:1.35}
  .online{padding:10px 12px;font-size:13px;border-radius:18px}.online small{font-size:12px}
  .hud-actions{right:18px;top:107px}.round-button{width:42px;height:42px}
  .speed-state{top:107px;left:21px;transform:translateY(-5px);font-size:12px;padding:9px 11px}.speed-state.visible{transform:translateY(0)}
  .toast{top:159px;width:max-content;font-size:13px}
  .location{left:22px}.location span{font-size:12px;letter-spacing:.8px}.location strong{font-size:17px}
  .arrival-copy{left:28px;right:22px;top:34%}.arrival-route{font-size:12px;letter-spacing:.4px}
  .arrival h1{font-size:42px;letter-spacing:-1.8px}.arrival p{font-size:14px}
  .arrival-progress{left:28px;bottom:46px;width:29vw}#skip-arrival{right:20px;bottom:31px;font-size:12px}
  .window-vignette{border-width:9px}.panel{padding:27px 19px}.panel h2{font-size:23px}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-art{height:92px}.work-copy{padding:11px}
  .guide-grid{grid-template-columns:1fr}.guide-grid article{padding:17px}
  .work-meta{padding:13px}.work-meta button{font-size:13px;padding:12px}.work-meta h2{font-size:18px}
  .ferry-overlay{padding-top:17vh}.ferry-overlay h2{font-size:36px}
}
@media(max-width:380px){.brand-kicker{max-width:128px}.online{padding:9px}.online small{font-size:12px}.work-meta button{max-width:104px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}}

@media(max-width:640px){.brand{min-width:0;max-width:100%}.brand strong{display:block;font-size:clamp(18px,4.2vw,26px);line-height:1.25;word-break:keep-all;letter-spacing:0}}

#app[data-scene="arrival"] #touch-ui{display:none}