/* STANDARD_ASSET_LOCK=HASUGU-PHOTO-UNIFIED-R11. 문제=화면별 사진 효과 불일치·누락 / 유발=페이지별 구현 / 수정=공통 비파괴 오버레이 / 잠금=원본 픽셀·기존 탐색·object-fit·정지·동적 삽입 보존 */
:root{--uf-navy:#08283f;--uf-cyan:#72f2ef;--uf-metal:#b9edff;--uf-radius:15px;--uf-speed:4.6s}.uf-layer{position:absolute;z-index:5;pointer-events:none;overflow:hidden;border-radius:inherit;box-shadow:inset 0 0 0 1px #78e4ed66;container-type:inline-size}.uf-layer[hidden]{display:none!important}.uf-routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.uf-route{fill:none;stroke:#72f2ef;stroke-width:1.1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 2px #08283f)}.uf-route-flow{stroke:#fff;stroke-width:1;stroke-dasharray:5 19;animation:uf-travel 3.4s linear infinite}.uf-badge{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:9px;max-width:calc(100% - 24px);padding:8px 12px;border:1px solid #67dce5;border-radius:var(--uf-radius);background:linear-gradient(125deg,#08283ff0,#0a3045e8);color:#eefbff;box-shadow:0 6px 20px #001a2d55;backdrop-filter:blur(6px);font:700 12px/1.4 'Malgun Gothic',sans-serif;pointer-events:auto;cursor:pointer;text-align:left;text-decoration:none}.uf-badge small{display:block;font-size:10px;font-weight:400;color:#a8dce8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}.uf-num{display:grid;place-items:center;position:relative;flex-shrink:0;width:29px;height:29px;border:1px solid #b9fffa;border-radius:50%;background:linear-gradient(140deg,#e8ffff,#49d7db 48%,#1599ad);color:#06314a;font-weight:900;box-shadow:0 3px 0 #11687d,0 5px 12px #001d3377}.uf-num:before{content:'';position:absolute;inset:-4px;border:1px solid #91ffff;border-radius:50%;animation:uf-wave 2.7s ease-out infinite}.uf-icon{position:relative;display:inline-block;width:32px;height:32px;flex-shrink:0;transform-style:preserve-3d;animation:uf-float var(--uf-speed) ease-in-out infinite;filter:drop-shadow(0 4px 4px #0005)}.uf-icon svg{width:100%;height:100%;display:block;transform:translateZ(8px)}.uf-icon:after{content:'';position:absolute;inset:0;border-radius:10px;background:linear-gradient(120deg,transparent 30%,#fff6,transparent 70%);animation:uf-glint 5s ease-in-out infinite;pointer-events:none}.uf-flag{position:absolute;right:12px;top:12px;color:#bff8ff;background:#08283fe6;padding:5px 9px;border:1px solid #72f2ef66;border-radius:20px;font:10px/1.3 'Malgun Gothic',sans-serif;letter-spacing:.5px}.uf-layer.uf-small .uf-badge{padding:5px 7px;left:6px;bottom:6px;border-radius:11px;gap:5px}.uf-small .uf-badge .uf-copy,.uf-small .uf-flag{display:none}.uf-small .uf-icon{width:23px;height:23px}.uf-small .uf-num{width:23px;height:23px;font-size:10px}.uf-small .uf-routes{opacity:.55}.uf-toolbar{position:fixed;bottom:13px;left:13px;z-index:120;display:flex;gap:6px;padding:5px;border:1px solid #36647d;border-radius:30px;background:#08283fe8;backdrop-filter:blur(8px);box-shadow:0 8px 24px #001a2d33}.uf-toolbar button{border:0;background:transparent;color:#c5f5fc;border-radius:20px;padding:9px 12px;font:11px 'Malgun Gothic',sans-serif;cursor:pointer}.uf-toolbar button[aria-pressed=true]{background:#bff4f1;color:#073247}.uf-toolbar button:focus-visible,.uf-badge:focus-visible,.uf-close:focus-visible,.uf-view-tab:focus-visible{outline:3px solid #fff;outline-offset:3px}.uf-hidden .uf-layer{visibility:hidden}.uf-still .uf-layer *,.uf-still .uf-layer *:before,.uf-still .uf-layer *:after,.uf-still .uf-view *,.uf-still .uf-view *:before,.uf-still .uf-view *:after{animation-play-state:paused!important}.uf-view{width:min(1120px,calc(100% - 24px));max-height:92vh;padding:0;border:1px solid #31576d;border-radius:22px;background:#061a2b;color:#e7f5ff;box-shadow:0 30px 100px #0008}.uf-view::backdrop{background:#03121ddd;backdrop-filter:blur(5px)}.uf-view-head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid #31576d;gap:15px}.uf-view-head strong{font-size:13px;color:#83ecec;letter-spacing:1px}.uf-close{width:35px;height:35px;border:1px solid #47758e;background:#12334c;color:#fff;border-radius:50%;font-size:20px;cursor:pointer}.uf-view-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:25px;padding:25px}.uf-view-frame{position:relative;align-self:start;overflow:hidden;border-radius:18px;background:#102b3e;min-width:0}.uf-view-frame>img{width:100%;height:auto;max-height:68vh;object-fit:contain;display:block;margin:0!important;border-radius:0!important}.uf-view-copy{min-width:0}.uf-view-copy h2{font:700 24px/1.5 'Malgun Gothic',sans-serif;color:#e7f5ff!important;margin:10px 0 15px}.uf-view-copy p{font:14px/1.9 'Malgun Gothic',sans-serif;color:#b8cfde;overflow-wrap:anywhere}.uf-view-tabs{display:grid;gap:10px;margin:20px 0}.uf-view-tab{display:flex;gap:12px;align-items:center;padding:13px;background:#12354c;border:1px solid #31576d;border-radius:15px;color:#d3e8f4;font:13px 'Malgun Gothic',sans-serif;cursor:pointer;text-align:left}.uf-view-tab[aria-pressed=true]{border-color:#72f2ef;background:#16455d}.uf-view-caption{padding:14px;border-top:1px solid #31576d;font-size:11px;line-height:1.8;color:#85a9c0}.uf-view-frame .uf-badge{pointer-events:none}.uf-native-note{color:#83ecec;font:12px/1.8 'Malgun Gothic',sans-serif}.uf-section-icon{color:#72f2ef}.uf-view-source{color:#9cebf1;font:12px 'Malgun Gothic',sans-serif;text-decoration:underline}
@container(max-width:240px){.uf-copy,.uf-flag{display:none}.uf-badge{padding:5px 7px;gap:5px;left:6px;bottom:6px}.uf-icon{width:23px;height:23px}.uf-num{width:23px;height:23px;font-size:10px}}
@keyframes uf-travel{to{stroke-dashoffset:-96}}@keyframes uf-wave{0%{opacity:.8;transform:scale(.88)}80%,100%{opacity:0;transform:scale(1.65)}}@keyframes uf-float{0%,100%{transform:perspective(250px) translateY(0) rotateY(-16deg) rotateX(6deg)}50%{transform:perspective(250px) translateY(-4px) rotateY(17deg) rotateX(-5deg)}}@keyframes uf-glint{0%,100%{opacity:.1;transform:translateX(-10%)}50%{opacity:.65;transform:translateX(10%)}}
@media(max-width:700px){.uf-view-grid{grid-template-columns:1fr;padding:14px;gap:18px}.uf-view-head{padding:14px 18px}.uf-view-copy h2{font-size:21px}.uf-view-frame>img{max-height:62vh}.uf-badge small{max-width:175px}.uf-toolbar{bottom:8px;left:8px;gap:0}.uf-toolbar button{font-size:10px;padding:9px}.uf-flag{font-size:9px}.uf-view-copy p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.uf-layer *,.uf-layer *:before,.uf-view *,.uf-view *:before{animation:none!important;transition:none!important}}
@media print{.uf-layer,.uf-toolbar,.uf-view{display:none!important}}
/* 문제=화면 밖 애니메이션 불필요 계산 / 유발=전체 사진 공통 효과 / 수정=IntersectionObserver 비활성 상태 일시정지 / 잠금=화면 복귀 후 재개 */
.uf-offscreen *,.uf-offscreen *:before,.uf-offscreen *:after{animation-play-state:paused!important}
/* 문제=큰 사진의 정보량이 표본보다 적음 / 유발=축약 배지만 적용 / 수정=사진·기록·원본 3항목 상세 표시 / 잠금=표식은 정보 항목이며 물체 자동진단 아님 */
.uf-extra{display:none}.uf-detail .uf-badge{left:12px;bottom:12px;max-width:calc(100% - 24px)}.uf-detail .uf-extra2{bottom:84px;display:flex}.uf-detail .uf-extra3{bottom:156px;display:flex}.uf-detail .uf-badge .uf-copy small{max-width:220px}.uf-detail .uf-extra .uf-num:before{animation-delay:.6s}.uf-detail .uf-extra3 .uf-num:before{animation-delay:1.2s}.uf-detail .uf-extra .uf-icon{animation-delay:-1.5s}.uf-detail .uf-extra3 .uf-icon{animation-delay:-3s}
@media(max-width:700px){.uf-detail .uf-badge{padding:7px 9px;gap:7px}.uf-detail .uf-badge .uf-copy small{display:none}.uf-detail .uf-extra2{bottom:64px}.uf-detail .uf-extra3{bottom:116px}.uf-detail .uf-icon{width:27px;height:27px}.uf-detail .uf-copy b{font-size:11px}}
/* 문제=제품 캡처의 잘린 영역 바깥에 배지 위치 / 유발=전체 img rect 사용 / 수정=호스트와 교차한 표시 영역 기준 배치 / 잠금=제품 본체·로고 크롭 변경 없음 */
.graphics-still6 .uf-layer *,.graphics-still6 .uf-layer *:before,.graphics-still6 .uf-layer *:after,.still .uf-layer *,.still .uf-layer *:before,.still .uf-layer *:after{animation-play-state:paused!important}
/* 문제=모달의 top-layer로 바깥 정지 버튼 접근 불가 / 유발=공통 툴바 외부 배치 / 수정=확대창 내부에 같은 제어 연결 / 잠금=실제 버튼 클릭으로 pause·hide 검증 */
.uf-inline-controls{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}.uf-inline-controls button{padding:9px 12px;border:1px solid #36647d;border-radius:25px;background:#12334c;color:#c5f5fc;font:11px 'Malgun Gothic',sans-serif;cursor:pointer}.uf-inline-controls button[aria-pressed=true]{background:#bff4f1;color:#073247}
/* 문제=모바일 세로 사진이 썸네일로 잘못 축약 / 유발=너비 단독 기준 / 수정=높이 280 이상 상세형·제목 유지 / 잠금=390px 사진 내부 가로 넘침 없음 */
.uf-detail .uf-copy{display:block}.uf-detail .uf-copy b{white-space:nowrap}.uf-detail .uf-flag{display:block}
/* 문제=표본 페이지에 같은 정지·원본 버튼 중복 / 유발=공통 제어 추가 / 수정=표본도 공통 툴바로 통일 / 잠금=기존 실제 표식·설명 선택 보존 */
body[data-uf-native=true] header .controls{display:none}

/* Situation notes: source-relative targets, linked explanation. */
.uf-situation-layer{overflow:visible;box-shadow:none}.uf-target{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;z-index:5;padding:0;font-size:12px}.uf-target[aria-pressed=true]{outline:4px solid #ffffff88;box-shadow:0 0 20px #72f2ef}.uf-point-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.uf-point-lines path{fill:none;stroke:#73e5ea;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.4}.uf-point-lines path.selected{opacity:1;stroke-width:2}.uf-point-card{position:absolute;left:3%;max-width:37%;padding:10px;border:1px solid #4e8b9e;background:#08283fe8;color:#defcff;border-radius:12px;font:700 12px/1.4 sans-serif;pointer-events:auto;z-index:4;cursor:pointer}.uf-point-card.selected{border-color:#a7ffff;background:#164d60}.uf-view-frame .uf-situation-layer .uf-badge{display:none}@media(max-width:700px){.uf-point-card{font-size:10px;padding:7px}.uf-target{width:25px;height:25px;font-size:10px}}

/* STANDARD_ASSET_LOCK=HASUGU-PHOTO-FULL-R13. 문제=확대 사진 표식과 입체 아이콘 불통일 / 유발=텍스트 카드·작은 터치 영역 / 수정=대상별 SVG·44px 표식·선 이동·줄바꿈 / 잠금=원본·정지·reduced-motion 보존 */
.uf-point-card{display:flex;gap:6px;align-items:center;max-width:42%;text-align:left}.uf-point-card .uf-icon{width:27px;height:27px;flex-shrink:0}.uf-point-card span:last-child{overflow-wrap:anywhere}.uf-point-lines path{stroke-dasharray:4 14;animation:uf-travel 3.4s linear infinite;stroke-width:1.5}.uf-target{width:44px!important;height:44px!important;font-size:12px!important}.uf-copy b{white-space:normal!important;line-height:1.4}.uf-view-source{display:block;margin-top:12px}.uf-view-source[hidden]{display:none}.uf-view-copy h2{overflow-wrap:anywhere}.uf-situation-layer .uf-point-lines{overflow:visible}
@media(max-width:700px){.uf-point-card{padding:5px;font-size:10px}.uf-point-card .uf-icon{width:22px;height:22px}.uf-view-tabs .uf-view-tab{min-height:44px;white-space:normal}.uf-view-frame>img{max-height:62vh}}
@media(prefers-reduced-motion:reduce){.uf-point-lines path{animation:none!important}}

/* R46: fixed number typography prevents inherited 28px text in a 29px circle.
   Rings stay inside the circle so overflow containers cannot cut the animated rim. */
.uf-num{box-sizing:border-box!important;display:inline-grid!important;place-items:center!important;width:36px;height:36px;min-width:36px;min-height:36px;flex:0 0 auto!important;padding:0!important;overflow:visible!important;isolation:isolate;aspect-ratio:1;border:1px solid var(--uf-num-light,#b8ffff)!important;border-radius:50%!important;background:radial-gradient(ellipse at 32% 19%,#ffffffc9 0%,#ffffff25 30%,transparent 54%),linear-gradient(145deg,var(--uf-num-light,#b8ffff),var(--uf-num-mid,#28cbd4) 52%,var(--uf-num-dark,#087b99))!important;color:#072c42!important;font:800 14px/1 Arial,'Malgun Gothic',sans-serif!important;font-variant-numeric:tabular-nums;letter-spacing:0!important;white-space:nowrap!important;text-indent:0!important;text-shadow:0 1px 0 #ffffff90;box-shadow:inset 0 0 0 2px #ffffff30,inset 0 -3px 5px #05213d55,0 2px 5px #00132580,0 0 9px var(--uf-num-mid,#28cbd4)!important}
.uf-num:before{inset:3px!important;border:1px solid #ffffff80!important;border-radius:50%!important;animation:none!important;pointer-events:none}
.uf-target.uf-num{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;font-size:17px!important}
.uf-target[aria-pressed=true]{outline:2px solid #ffffffb0!important;outline-offset:3px}
.uf-small .uf-num{width:26px;min-width:26px;height:26px;min-height:26px;font-size:11px!important}
.uf-view-tab .ph-text{flex-wrap:nowrap!important;min-width:0}.uf-view-tab .ph-text>span:last-child{min-width:0}

/* Keep numeral ink opaque during parent metallic hover/focus animation. */
.uf-num{-webkit-text-fill-color:#072c42!important;-webkit-text-stroke:0!important;background-clip:border-box!important;-webkit-background-clip:border-box!important}