:root{--ink:#3a2f2a;--paper:#f7efe0;--card:#fffaf0;--main:#f6c177;--warn:#f3a9a0}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#efe4d0;margin:0;font-family:Pretendard,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif}#frame{background:var(--paper);width:min(100vw,max(62dvh,900px));height:100dvh;margin:0 auto;position:relative;overflow:hidden}#stage{position:absolute;inset:0}#stage canvas{touch-action:none;display:block}#ui{pointer-events:none;position:absolute;inset:0}#ui>*{pointer-events:auto}.hidden{display:none!important}.bar{padding:10px 14px calc(14px + env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:0;left:0;right:0}.btn{font:inherit;color:var(--ink);background:var(--card);border:2.5px solid var(--ink);min-width:92px;box-shadow:0 3px 0 var(--ink);cursor:pointer;touch-action:manipulation;border-radius:18px;padding:11px 22px;font-size:17px;font-weight:700}.btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.btn-main{background:var(--main)}.btn-warn{background:var(--warn)}.btn-quiet{background:var(--card)}.edit-title{background:var(--card);border:2.5px solid var(--ink);border-radius:14px;padding:6px 14px;font-size:15px;font-weight:600}.edit-row{gap:10px;display:flex}.tray{left:8px;right:8px;bottom:calc(78px + env(safe-area-inset-bottom));background:var(--card);border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:20px;flex-direction:column;align-items:center;gap:8px;padding:10px;display:flex;position:absolute}.tray-list{touch-action:pan-x;gap:8px;width:100%;padding:2px 2px 8px;display:flex;overflow-x:auto}.card{width:96px;font:inherit;color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);cursor:pointer;border-radius:14px;flex-direction:column;flex:none;align-items:center;gap:4px;padding:6px 4px;display:flex}.card:active{background:var(--main)}.card-img{object-fit:contain;pointer-events:none;width:72px;height:64px}.card-name{font-size:13px;font-weight:700}.tray .btn{min-width:0;padding:6px 16px;font-size:14px}.toast{left:50%;top:calc(58px + env(safe-area-inset-top));background:var(--card);border:2.5px solid var(--ink);white-space:nowrap;border-radius:14px;padding:8px 16px;font-size:15px;font-weight:600;position:absolute;transform:translate(-50%)}.top{padding:calc(10px + env(safe-area-inset-top)) 10px 0;justify-content:space-between;gap:8px;display:flex;position:absolute;top:0;left:0;right:0;pointer-events:none!important}.chip{background:var(--card);border:2.5px solid var(--ink);border-radius:16px;align-items:center;gap:6px;padding:5px 12px 5px 10px;font-size:15px;font-weight:700;display:flex}.lv{margin-right:2px}.meter{border:2px solid var(--ink);background:#fff;border-radius:6px;width:64px;height:10px;overflow:hidden}.meter-fill{background:#f08c98;width:0;height:100%;transition:width .3s}.heart-text{font-size:13px}.ico{pointer-events:none;flex:none;width:26px;height:26px}.ico-s{width:20px;height:20px}.ico-l{width:40px;height:40px}.bar-row{flex-direction:row;justify-content:center;gap:10px}.btn{position:relative}.btn-s{border-radius:14px;flex:none;min-width:0;padding:8px 14px;font-size:15px}.btn-x{min-width:0;box-shadow:0 2px 0 var(--ink);border-radius:12px;padding:5px 12px;font-size:14px}.btn-off{color:#9b918a;background:#e9e2d6}.badge{border:2.5px solid var(--ink);background:#f08c98;border-radius:12px;min-width:24px;height:24px;padding:0 6px;font-size:13px;line-height:19px;position:absolute;top:-9px;right:-7px}.sheet{max-width:560px;left:8px;right:8px;bottom:calc(78px + env(safe-area-inset-bottom));background:var(--card);border:2.5px solid var(--ink);max-height:58%;box-shadow:0 4px 0 var(--ink);border-radius:20px;flex-direction:column;margin:0 auto;display:flex;position:absolute;overflow:hidden}.sheet-head{justify-content:space-between;align-items:center;padding:10px 12px 6px 16px;display:flex}.sheet-title{font-size:17px;font-weight:800}.sheet-body{touch-action:pan-y;flex-direction:column;gap:8px;padding:4px 10px 12px;display:flex;overflow-y:auto}.row{background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;align-items:center;gap:10px;padding:8px 10px;display:flex}.row-empty{text-align:center;border-style:dashed;justify-content:center;min-height:48px}.row-main{flex-direction:column;flex:auto;gap:3px;min-width:0;display:flex}.row-name{align-items:center;gap:4px;font-size:15px;font-weight:800;display:flex}.dim{color:#8a7f77;font-size:13px;font-weight:600}.face{pointer-events:none;flex:none;width:48px;height:48px}.face-l{width:84px;height:84px}.needs,.reward{flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:700;display:flex}.need{align-items:center;gap:2px;display:inline-flex}.need-short{color:#d0554f}.reward{gap:3px;font-size:13px}.reward .ico:not(:first-child){margin-left:6px}.price{flex:none;align-items:center;gap:3px;font-size:14px;font-weight:800;display:inline-flex}.grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.cell{background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;display:flex}.cell-name{font-size:12px;font-weight:700}.cell-count{font-size:16px;font-weight:800}.sheet .tray-list{padding:2px 0 6px}.card{position:relative}.card-off{background:#e9e2d6}.card-off .card-img{opacity:.45}.card-note{color:#8a7f77;font-size:12px;font-weight:700}.card-count{color:#8a7f77;font-size:11px;font-weight:800;position:absolute;top:3px;right:6px}.land-pic{border:2.5px dashed var(--ink);background:#dcefba;border-radius:12px;justify-content:center;align-items:center;width:72px;height:64px;font-weight:800;display:flex}.modal{background:#3a2f2a59;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.modal-card{background:var(--card);border:2.5px solid var(--ink);width:100%;max-width:320px;box-shadow:0 5px 0 var(--ink);text-align:center;border-radius:22px;flex-direction:column;align-items:center;gap:10px;padding:20px 18px;display:flex}.modal-title{font-size:22px;font-weight:800}.modal-faces{gap:6px;display:flex}.modal-text{font-size:16px;font-weight:700}.modal-text.dim{font-size:14px}.guide{left:0;right:0;top:calc(56px + env(safe-area-inset-top));border:2.5px solid var(--ink);text-align:center;text-wrap:balance;background:#fff3c9;border-radius:14px;width:fit-content;max-width:calc(100% - 20px);margin:0 auto;padding:7px 14px;font-size:14px;font-weight:700;position:absolute;pointer-events:none!important}.guide:not(.hidden)~.toast{top:calc(102px + env(safe-area-inset-top))}.btn-point{animation:.9s ease-in-out infinite point}@keyframes point{0%,to{background:var(--card);transform:translateY(0)}50%{background:#ffd9a0;transform:translateY(-5px)}}.sound-btn{left:10px;bottom:calc(84px + env(safe-area-inset-bottom));font:inherit;color:var(--ink);background:var(--card);border:2px solid var(--ink);cursor:pointer;border-radius:12px;padding:4px 9px;font-size:12px;font-weight:700;position:absolute}.sound-off{color:#9b918a;background:#e9e2d6}.fly{z-index:5;width:32px;height:32px;position:absolute;top:-16px;left:-16px;pointer-events:none!important}@media (width>=901px){#frame{border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink)}}.row-btns{flex-direction:column;flex:none;align-items:center;gap:5px;display:flex}.btn-link{font:inherit;color:#8a7f77;cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:12px;font-weight:700;text-decoration:underline}.bar-row{gap:7px}.bar-row .btn{min-width:0;padding:11px 15px;font-size:16px}.sub{padding:4px 4px 0;font-size:14px;font-weight:800}.grid-3{grid-template-columns:repeat(3,1fr)}.cell-step{color:#8a7f77;font-size:11px;font-weight:700}.meter-s{width:80%;height:8px;margin-top:2px}.row-locked{opacity:.6;border-style:dashed}.row-queue{flex-direction:column;flex-shrink:0;gap:6px}.queue{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.q{flex-direction:column;align-items:center;gap:2px;display:flex}.q-box{border:2px solid var(--ink);background:#fff;border-radius:12px;width:48px;height:48px;position:relative}.q-ico{width:36px;height:36px;position:absolute;top:4px;left:4px}.q-gray{filter:grayscale();opacity:.4}.q-color{transition:clip-path 1s linear}.q-time{min-height:16px;font-size:12px;font-weight:800}.q-empty .q-box{opacity:.5;background:0 0;border-style:dashed}.q-wait .q-box{background:#ece7e1}.q-wait .q-time{color:#8a7f77}.q-active .q-box{background:#fff3c9}.q-ready .q-box{background:#dcf1cd}.need{cursor:pointer}.tip{z-index:30;border:2.5px solid var(--ink);max-width:min(280px,100% - 16px);box-shadow:0 3px 0 var(--ink);pointer-events:none;background:#fff3c9;border-radius:14px;flex-direction:column;gap:4px;padding:8px 12px;display:flex;position:absolute}.tip-name{align-items:center;gap:6px;font-size:15px;font-weight:800;display:flex}.tip .need{cursor:default}.row-how{background:#fffaf0}.tag-lack,.tag-ok{border:2px solid var(--ink);border-radius:9px;padding:1px 7px;font-size:12px;font-weight:800}.tag-lack{background:#ffd9d4}.tag-ok{background:#dcf1cd}.row-event{text-align:center;background:#fff3c9;justify-content:center;font-size:13px;font-weight:700}.modal-gift{align-items:center;gap:6px;font-size:30px;font-weight:800;display:flex}.tabs{flex-shrink:0;gap:6px;padding:9px 5px 0 0;display:flex}.sheet-body>.grid{flex-shrink:0;padding:0 5px 0 0}.tab{font:inherit;color:#8a7f77;background:var(--paper);border:2.5px solid var(--ink);cursor:pointer;border-radius:12px;flex:1 1 0;padding:6px 4px;font-size:14px;font-weight:800;position:relative}.tab-on{background:var(--main);color:var(--ink)}.tab-dot{border:2px solid var(--ink);min-width:20px;height:20px;color:var(--ink);background:#f08c98;border-radius:10px;padding:0 5px;font-size:11px;line-height:16px;position:absolute;top:-8px;right:-4px}.cell-btn{font:inherit;color:var(--ink);cursor:pointer;position:relative}.cell-unknown{background:#ece4d6;border-style:dashed}.cell-unknown .ico{filter:brightness(0);opacity:.22}.cell-unknown .cell-name{color:#a79d94}.cell-new{border:2px solid var(--ink);background:#f08c98;border-radius:9px;padding:0 5px;font-size:10px;font-weight:800;line-height:15px;position:absolute;top:-7px;right:-5px}.tag-special{border:1.5px solid var(--ink);background:#fff3c9;border-radius:8px;margin-left:4px;padding:1px 5px;font-size:10px;font-weight:800}.toast{white-space:normal;text-align:center;text-wrap:balance;width:fit-content;max-width:calc(100% - 20px);margin:0 auto;left:0;right:0;transform:none}.row-say{text-align:center;background:#fff3c9;justify-content:center;font-size:14px;font-weight:700}.talk{padding:0 10px calc(96px + env(safe-area-inset-bottom));cursor:pointer;background:#3a2f2a2e;flex-direction:column;justify-content:flex-end;gap:6px;display:flex;position:absolute;inset:0}.talk-title{border:2.5px solid var(--ink);background:#fff3c9;border-radius:14px;align-self:center;padding:4px 14px;font-size:14px;font-weight:800}.talk-box{background:var(--card);border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:20px;align-items:center;gap:10px;min-height:108px;padding:12px 14px;display:flex}.talk-main{flex-direction:column;flex:auto;gap:4px;display:flex}.talk-name{color:#8a7f77;font-size:14px;font-weight:800}.talk-text{font-size:17px;font-weight:700;line-height:1.45}.talk-foot{justify-content:space-between;padding:0 8px;display:flex}.talk-next{color:var(--card);text-shadow:0 1px 0 var(--ink), 0 -1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink);font-size:13px;font-weight:700}.talk-foot .dim{color:var(--card);text-shadow:0 1px 0 var(--ink), 0 -1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink)}.faces-s{flex-direction:column;flex:none;display:flex}.face-s{width:34px;height:34px}.row-card{background:#fff3c9;align-items:flex-start}.card-text{font-size:13px;font-weight:600;line-height:1.5}.tab{font-size:13px}.talk-foot{justify-content:flex-end;gap:8px}.arcade-link{background:var(--main);text-decoration:none;display:inline-block}.letter{background:#fff3c9;border-radius:8px;padding:3px 7px;font-size:13px;font-weight:700}.bond-plus{color:#c8607a;margin-left:8px}.weather{right:10px;bottom:calc(84px + env(safe-area-inset-bottom));font:inherit;color:var(--ink);border:2px solid var(--ink);cursor:pointer;background:#fff3c9;border-radius:12px;align-items:center;gap:4px;padding:3px 9px 3px 6px;font-size:12px;font-weight:800;display:flex;position:absolute}.card-on{background:var(--main);box-shadow:0 0 0 2px var(--ink)}.row-pick{background:#fff3c9;flex-shrink:0}.row-pick .row-name{flex-wrap:wrap;gap:8px}.pick-text{font-size:13px;font-weight:700;line-height:1.4}.float-btn{right:10px;bottom:calc(126px + env(safe-area-inset-bottom));box-shadow:0 3px 0 var(--ink);position:absolute}.seed-bar{left:0;right:0;bottom:calc(86px + env(safe-area-inset-bottom));border:2.5px solid var(--ink);width:fit-content;max-width:calc(100% - 20px);box-shadow:0 3px 0 var(--ink);background:#fff3c9;border-radius:16px;align-items:center;gap:8px;margin:0 auto;padding:6px 8px 6px 14px;font-size:14px;font-weight:800;display:flex;position:absolute}.q-wait{cursor:pointer}.q-wait .q-box:after{content:"×";border:2px solid var(--ink);text-align:center;background:#ffd9d4;border-radius:50%;width:18px;height:18px;font-size:13px;font-weight:800;line-height:15px;position:absolute;top:-8px;right:-8px}.q-wait .q-time{text-decoration:underline}.queue{padding-top:8px}.tabs-build{padding-top:2px}.tab-count{color:#8a7f77;margin-left:5px;font-size:11px;font-weight:800}.tab-on .tab-count{color:var(--ink)}.meter-wide{width:100%}.install-steps{text-align:left;margin:0;padding-left:22px;font-size:14px;font-weight:700;line-height:1.7}.account-text{line-height:1.6}.account-pick{width:100%;font:inherit;color:var(--ink);border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);cursor:pointer;border-radius:14px;padding:10px 12px;font-size:16px;font-weight:800}.account-kakao{background:#fee500}.account-google{background:#fff}.account-done{box-shadow:none;cursor:default;text-align:center;background:#e9e2d6}.row-account{flex-direction:column;align-items:stretch}.account-picks{gap:8px;display:flex}.account-picks .account-pick{flex:1 1 0;width:auto;padding:9px 6px;font-size:15px}.back-btn{bottom:calc(116px + env(safe-area-inset-bottom));background:var(--main);text-decoration:none}.skip-wait{color:#c8607a;text-align:center;font-size:11px;font-weight:700}.area-btn{bottom:calc(172px + env(safe-area-inset-bottom));background:#fff3c9}
