*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#202722;color:#24332e;font-family:Arial,"맑은 고딕",sans-serif}button,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid #d6d9d0;background:#fffffff0;border-radius:9px;padding:11px 15px;touch-action:manipulation}button:hover{background:#edf1e9}button:focus-visible,select:focus-visible{outline:3px solid #74ac9b;outline-offset:3px}button[aria-pressed=true]{background:#284c42;color:white;border-color:#284c42}[hidden]{display:none!important}#viewport{position:absolute;inset:0;touch-action:none}#viewport canvas{display:block;width:100%;height:100%;outline:0}header{position:absolute;top:max(18px,env(safe-area-inset-top));left:24px;right:24px;display:flex;justify-content:space-between;align-items:start;pointer-events:none;z-index:5}.brand{display:flex;gap:11px;background:#fffffff0;padding:12px 17px;border:1px solid #ffffff8c;border-radius:13px;box-shadow:0 4px 30px #0000000d}.brand strong{font-size:15px;font-weight:600;display:block}.brand small{display:block;color:#64736b;margin-top:4px;font-size:12px}.mark{font-size:28px;line-height:36px;color:#4b7464}.tools{display:flex;gap:7px;pointer-events:auto}.tools button{box-shadow:0 3px 20px #00000009;font-size:13px}#hint{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);font-size:12px;color:#fcfdfa;background:#26362de0;padding:10px 18px;border-radius:40px;white-space:nowrap;pointer-events:none}#map-wrap{position:absolute;right:24px;bottom:24px;width:200px;border:1px solid #fff9;border-radius:12px;overflow:hidden;background:#f4f4eee8;pointer-events:none;box-shadow:0 5px 30px #0001}#map{display:block;width:100%;height:133px}#map-wrap span{font-size:10px;color:#637064;display:block;padding:0 12px 9px}#boundary{position:absolute;left:50%;top:100px;transform:translateX(-50%);background:#2d3c33e8;color:white;font-size:13px;border-radius:24px;padding:9px 16px;opacity:0;transition:opacity .2s;pointer-events:none}#loading{position:absolute;inset:0;background:#eeeee8;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;z-index:30}#loading small{color:#728077}.spinner{width:35px;height:35px;border:2px solid #d1dad3;border-top-color:#456b5d;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:0;border-radius:22px;padding:42px;background:#f6f5ef;box-shadow:0 25px 100px #15231a55}dialog::backdrop{background:#15231a55;backdrop-filter:blur(3px)}.close{position:absolute;right:17px;top:13px;padding:4px 10px;border:0;background:none;font-size:26px;color:#6c746d}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#718276}h1{font-size:31px;line-height:1.4;letter-spacing:-1.1px;margin:18px 0}h2{font-size:23px;margin:16px 0}p{font-size:14px;line-height:1.8;color:#647268}.instruction{display:flex;gap:25px;padding:17px 0;border-top:1px solid #daddd4;font-size:13px;line-height:1.8}.instruction b{width:64px;flex-shrink:0}.instruction span{color:#607068}.note{font-size:12px;color:#7f877d}.primary{background:#2f5546;color:white;width:100%;border:0;display:flex;justify-content:space-between;padding:16px 19px;margin-top:25px}.primary:hover{background:#254536}#photo-dialog{width:min(900px,calc(100vw - 32px))}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.photo-grid button{padding:0;overflow:hidden;text-align:left}.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.photo-grid span{font-size:12px;display:block;padding:13px}#stick,#lookhint{display:none}#compare-bar{position:absolute;z-index:12;bottom:20px;left:50%;transform:translateX(-50%);background:#f7f8f0ed;border-radius:13px;padding:9px;display:flex;align-items:center;gap:8px;white-space:nowrap;box-shadow:0 5px 35px #0004}#compare-bar select{padding:11px 9px;border:1px solid #d6d9d0;border-radius:8px;background:#fff;font-size:12px}#compare-bar button{font-size:12px}#compare-bar small{font-size:10px;margin:0 7px;color:#6b756e}#source-photo{position:absolute;inset:0;margin:auto;width:100%;height:100%;object-fit:contain;background:#202722;z-index:8;pointer-events:none}#source-label{position:absolute;top:24px;left:50%;transform:translateX(-50%);padding:8px 18px;background:#fff;border-radius:20px;font-size:12px;z-index:10}.comparison header,.comparison #map-wrap,.comparison #hint,.comparison #stick,.comparison #lookhint{display:none!important}.comparison #viewport{width:min(100vw,133.3333vh);height:min(100vh,75vw);margin:auto}.comparison #source-photo{object-fit:contain}
@media(pointer:coarse){#stick{display:block;position:absolute;left:25px;bottom:max(35px,env(safe-area-inset-bottom));width:112px;height:112px;border-radius:50%;border:1px solid #ffffffa0;background:#ffffff28;touch-action:none;z-index:6;box-shadow:inset 0 0 0 16px #ffffff0b}#stick i{position:absolute;left:34px;top:34px;width:44px;height:44px;border-radius:50%;background:#ffffffbd;border:1px solid #fff;box-shadow:0 3px 13px #0002}#stick span{position:absolute;bottom:-25px;left:43px;font-size:11px;color:white;text-shadow:0 1px 5px black}#lookhint{display:block;position:absolute;right:26px;bottom:70px;font-size:11px;color:white;text-shadow:0 1px 5px black;pointer-events:none}#hint{display:none}}
@media(max-width:680px){header{left:12px;right:12px;top:max(12px,env(safe-area-inset-top));flex-wrap:wrap;gap:8px}.brand{padding:9px 12px;gap:7px}.brand strong{font-size:12px}.brand small{font-size:10px}.mark{font-size:22px;line-height:29px}.tools{gap:5px}.tools button{padding:10px;font-size:11px}.tools #help{display:none}#map-wrap{right:12px;bottom:calc(155px + env(safe-area-inset-bottom));width:135px}#map{height:90px}#map-wrap span{font-size:9px;padding-bottom:6px}dialog{padding:30px 24px}h1{font-size:27px}.photo-grid{grid-template-columns:1fr}.photo-grid button{display:flex;align-items:center}.photo-grid img{width:43%}.photo-grid span{font-size:11px}#compare-bar{bottom:12px;gap:5px;padding:7px;max-width:calc(100vw - 16px);flex-wrap:wrap;justify-content:center}#compare-bar small{display:none}#compare-bar button{padding:10px;font-size:11px}#compare-bar select{max-width:155px;font-size:11px}#boundary{top:110px;font-size:11px}}