/* /css/app.css */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Pretendard,Inter,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}select:where([multiple]),select:where([size]:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}input:where([type=checkbox]),input:where([type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}input:where([type=checkbox]):checked,input:where([type=radio]):checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=checkbox]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=radio]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):checked:focus,input:where([type=checkbox]):checked:hover,input:where([type=radio]):checked:focus,input:where([type=radio]):checked:hover{border-color:transparent;background-color:currentColor}input:where([type=checkbox]):indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}@media (forced-colors:active) {input:where([type=checkbox]):indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):indeterminate:focus,input:where([type=checkbox]):indeterminate:hover{border-color:transparent;background-color:currentColor}input:where([type=file]){background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}input:where([type=file]):focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}body,html{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(26 26 26/var(--tw-text-opacity,1))}body{font-family:Pretendard,Inter,system-ui,sans-serif;font-size:.9375rem;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1{font-size:1.5rem;letter-spacing:-.02em}h1,h2{font-weight:700;--tw-text-opacity:1;color:rgb(26 26 26/var(--tw-text-opacity,1))}h2{font-size:1.25rem}h3{font-size:1.0625rem;font-weight:700;--tw-text-opacity:1;color:rgb(26 26 26/var(--tw-text-opacity,1))}[role=button]:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}[role=button]:focus:not(:focus-visible),a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.\!card,.card{border-radius:20px;border-width:1px;--tw-border-opacity:1;border-color:rgb(238 240 243/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));--tw-shadow:0 1px 3px rgba(20,20,40,.05),0 6px 20px -10px rgba(20,20,40,.1);--tw-shadow-colored:0 1px 3px var(--tw-shadow-color),0 6px 20px -10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.sk-shimmer{background-color:#eceeee;background-image:linear-gradient(90deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.8) 50%,hsla(0,0%,100%,0) 60%);background-size:250% 100%;background-repeat:no-repeat;background-position:100% 0;animation:ez-sk-sweep 1.3s ease-in-out infinite}@media (prefers-reduced-motion:reduce){.sk-shimmer{animation:none;background-image:none}}.\!btn,.btn{display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;justify-content:center;gap:.375rem;white-space:nowrap;border-radius:.5rem;font-weight:700;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\!btn:disabled,.btn:disabled{cursor:not-allowed;opacity:.4}.\!btn:active:not(:disabled){transform:translateY(1px)!important}.btn:active:not(:disabled){transform:translateY(1px)}.btn-primary{display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;justify-content:center;gap:.375rem;white-space:nowrap;border-radius:.5rem;font-weight:700;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.btn-primary:disabled{cursor:not-allowed;opacity:.4}.btn-primary:active:not(:disabled){transform:translateY(1px)}.btn-primary{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.btn-primary:hover:not(:disabled){background-color:rgba(26,26,26,.85)}.btn-secondary{display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;justify-content:center;gap:.375rem;white-space:nowrap;border-radius:.5rem;font-weight:700;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.btn-secondary:disabled{cursor:not-allowed;opacity:.4}.btn-secondary:active:not(:disabled){transform:translateY(1px)}.btn-secondary{border-width:1px;border-color:rgb(238 240 243/var(--tw-border-opacity,1));background-color:rgb(255 255 255/var(--tw-bg-opacity,1));color:rgb(90 96 97/var(--tw-text-opacity,1))}.btn-secondary,.btn-secondary:hover:not(:disabled){--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1}.btn-secondary:hover:not(:disabled){border-color:rgb(26 26 26/var(--tw-border-opacity,1));background-color:rgb(242 244 244/var(--tw-bg-opacity,1));color:rgb(26 26 26/var(--tw-text-opacity,1))}.btn-ghost{display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;justify-content:center;gap:.375rem;white-space:nowrap;border-radius:.5rem;font-weight:700;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.btn-ghost:disabled{cursor:not-allowed;opacity:.4}.btn-ghost:active:not(:disabled){transform:translateY(1px)}.btn-ghost{--tw-text-opacity:1;color:rgb(90 96 97/var(--tw-text-opacity,1))}.btn-ghost:hover:not(:disabled){--tw-bg-opacity:1;background-color:rgb(242 244 244/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(26 26 26/var(--tw-text-opacity,1))}.btn-md{min-height:40px;padding:.5rem 1rem;font-size:.8125rem;line-height:1.5}.btn-sm{min-height:32px;padding:.375rem .75rem}.btn-sm,.filter-chip{font-size:.75rem;line-height:1.4}.filter-chip{display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;gap:.25rem;border-radius:9999px;border-width:1px;--tw-border-opacity:1;border-color:rgb(238 240 243/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.375rem .875rem;color:rgb(90 96 97/var(--tw-text-opacity,1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.filter-chip,.filter-chip:hover{--tw-text-opacity:1}.filter-chip:hover{border-color:rgba(26,26,26,.2);color:rgb(26 26 26/var(--tw-text-opacity,1))}.filter-chip.\!active,.filter-chip.active{--tw-border-opacity:1;border-color:rgb(26 26 26/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1));font-weight:500;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;vertical-align:middle}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.\!fixed{position:fixed!important}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-inset-1{inset:-.25rem}.-inset-\[5px\]{inset:-5px}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-left-\[18px\]{left:-18px}.-right-1\.5{right:-.375rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.bottom-2{bottom:.5rem}.bottom-20{bottom:5rem}.bottom-24{bottom:6rem}.bottom-36{bottom:9rem}.bottom-4{bottom:1rem}.left-0{left:0}.left-0\.5{left:.125rem}.left-1\/2{left:50%}.left-2{left:.5rem}.left-3{left:.75rem}.left-4{left:1rem}.left-\[5px\]{left:5px}.right-0{right:0}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-0\.5{top:.125rem}.top-1{top:.25rem}.top-1\/2{top:50%}.top-2{top:.5rem}.top-3{top:.75rem}.top-4{top:1rem}.top-\[9px\]{top:9px}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[90\]{z-index:90}.z-\[9999\]{z-index:9999}.order-3{order:3}.order-last{order:9999}.col-span-2{grid-column:span 2/span 2}.col-start-2{grid-column-start:2}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.-mx-3{margin-left:-.75rem;margin-right:-.75rem}.-mx-4{margin-left:-1rem;margin-right:-1rem}.-my-1{margin-top:-.25rem;margin-bottom:-.25rem}.mx-0\.5{margin-left:.125rem;margin-right:.125rem}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-7{margin-top:1.75rem;margin-bottom:1.75rem}.-mb-px{margin-bottom:-1px}.-mt-1{margin-top:-.25rem}.-mt-2{margin-top:-.5rem}.-mt-px{margin-top:-1px}.mb-0{margin-bottom:0}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.mb-3\.5{margin-bottom:.875rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-9{margin-bottom:2.25rem}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-1\.5{margin-left:.375rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mr-0\.5{margin-right:.125rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-auto{margin-right:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-px{margin-top:1px}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}.\!block{display:block!important}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.\!table{display:table!important}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-24{height:6rem}.h-28{height:7rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-36{height:9rem}.h-4{height:1rem}.h-40{height:10rem}.h-44{height:11rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-80{height:20rem}.h-9{height:2.25rem}.h-\[100dvh\]{height:100dvh}.h-\[22px\]{height:22px}.h-\[240px\]{height:240px}.h-\[260px\]{height:260px}.h-\[26px\]{height:26px}.h-\[28px\]{height:28px}.h-\[300px\]{height:300px}.h-\[30px\]{height:30px}.h-\[40px\]{height:40px}.h-\[420px\]{height:420px}.h-\[46px\]{height:46px}.h-\[48px\]{height:48px}.h-\[52px\]{height:52px}.h-\[56px\]{height:56px}.h-\[60px\]{height:60px}.h-\[86px\]{height:86px}.h-\[92dvh\]{height:92dvh}.h-\[9px\]{height:9px}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-72{max-height:18rem}.max-h-\[200px\]{max-height:200px}.max-h-\[252px\]{max-height:252px}.max-h-\[26rem\]{max-height:26rem}.max-h-\[280px\]{max-height:280px}.max-h-\[300px\]{max-height:300px}.max-h-\[440px\]{max-height:440px}.max-h-\[60vh\]{max-height:60vh}.max-h-\[70vh\]{max-height:70vh}.max-h-\[88vh\]{max-height:88vh}.max-h-none{max-height:none}.min-h-0{min-height:0}.min-h-\[36px\]{min-height:36px}.min-h-\[40px\]{min-height:40px}.min-h-\[44px\]{min-height:44px}.min-h-\[60vh\]{min-height:60vh}.min-h-\[70vh\]{min-height:70vh}.w-0\.5{width:.125rem}.w-1\.5{width:.375rem}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-11\/12{width:91.666667%}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-2\/3{width:66.666667%}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-3\/5{width:60%}.w-32{width:8rem}.w-36{width:9rem}.w-4{width:1rem}.w-4\/5{width:80%}.w-40{width:10rem}.w-44{width:11rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-5\/6{width:83.333333%}.w-52{width:13rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-96{width:24rem}.w-\[100px\]{width:100px}.w-\[112px\]{width:112px}.w-\[190px\]{width:190px}.w-\[228px\]{width:228px}.w-\[3\.25rem\]{width:3.25rem}.w-\[30px\]{width:30px}.w-\[4\.5rem\]{width:4.5rem}.w-\[420px\]{width:420px}.w-\[504px\]{width:504px}.w-\[76px\]{width:76px}.w-\[88px\]{width:88px}.w-\[9px\]{width:9px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[120px\]{min-width:120px}.min-w-\[200px\]{min-width:200px}.min-w-\[280px\]{min-width:280px}.min-w-\[2ch\]{min-width:2ch}.min-w-\[3\.5rem\]{min-width:3.5rem}.min-w-\[320px\]{min-width:320px}.min-w-\[36px\]{min-width:36px}.min-w-\[430px\]{min-width:430px}.min-w-\[480px\]{min-width:480px}.min-w-\[5\.5rem\]{min-width:5.5rem}.min-w-\[560px\]{min-width:560px}.min-w-\[6rem\]{min-width:6rem}.min-w-\[700px\]{min-width:700px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-\[100px\]{max-width:100px}.max-w-\[1080px\]{max-width:1080px}.max-w-\[120px\]{max-width:120px}.max-w-\[12rem\]{max-width:12rem}.max-w-\[140px\]{max-width:140px}.max-w-\[168px\]{max-width:168px}.max-w-\[220px\]{max-width:220px}.max-w-\[28rem\]{max-width:28rem}.max-w-\[420px\]{max-width:420px}.max-w-\[560px\]{max-width:560px}.max-w-\[640px\]{max-width:640px}.max-w-\[980px\]{max-width:980px}.max-w-app{max-width:1440px}.max-w-auth{max-width:480px}.max-w-full{max-width:100%}.max-w-prose{max-width:65ch}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-\[2\]{flex:2}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.basis-full{flex-basis:100%}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.-translate-x-1{--tw-translate-x:-0.25rem}.-translate-x-1,.-translate-x-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.translate-y-\[1px\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[1px\]{--tw-translate-y:1px}.translate-y-full{--tw-translate-y:100%}.transform,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-start{scroll-snap-align:start}.scroll-mt-24{scroll-margin-top:6rem}.scroll-mt-4{scroll-margin-top:1rem}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.grid-cols-\[26px_minmax\(0\2c 1fr\)_auto\]{grid-template-columns:26px minmax(0,1fr) auto}.grid-cols-\[34px_1fr\]{grid-template-columns:34px 1fr}.grid-cols-\[4\.5rem_1fr_5\.75rem\]{grid-template-columns:4.5rem 1fr 5.75rem}.grid-cols-\[auto_minmax\(0\2c 1fr\)\]{grid-template-columns:auto minmax(0,1fr)}.grid-cols-\[minmax\(96px\2c 0\.8fr\)_1fr_1fr\]{grid-template-columns:minmax(96px,.8fr) 1fr 1fr}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-\[3px\]{gap:3px}.gap-px{gap:1px}.gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-0{row-gap:0}.gap-y-0\.5{row-gap:.125rem}.gap-y-1{row-gap:.25rem}.gap-y-1\.5{row-gap:.375rem}.gap-y-2{row-gap:.5rem}.gap-y-2\.5{row-gap:.625rem}.gap-y-3{row-gap:.75rem}.gap-y-4{row-gap:1rem}.space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-ghost>:not([hidden])~:not([hidden]),.divide-line>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(238 240 243/var(--tw-divide-opacity,1))}.divide-line\/60>:not([hidden])~:not([hidden]){border-color:rgba(238,240,243,.6)}.divide-line\/70>:not([hidden])~:not([hidden]){border-color:rgba(238,240,243,.7)}.self-start{align-self:flex-start}.self-center{align-self:center}.justify-self-end{justify-self:end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-clip{overflow:clip}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.overscroll-contain{overscroll-behavior:contain}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.text-wrap{text-wrap:wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.break-keep{word-break:keep-all}.rounded{border-radius:4px}.rounded-2xl{border-radius:20px}.rounded-3xl{border-radius:28px}.rounded-\[14px\]{border-radius:14px}.rounded-\[9px\]{border-radius:9px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:2px}.rounded-xl{border-radius:14px}.rounded-b{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.rounded-b-2xl{border-bottom-right-radius:20px;border-bottom-left-radius:20px}.rounded-b-lg{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.rounded-t-2xl{border-top-left-radius:20px;border-top-right-radius:20px}.rounded-t-3xl{border-top-left-radius:28px;border-top-right-radius:28px}.rounded-t-\[2px\]{border-top-left-radius:2px;border-top-right-radius:2px}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-\[1\.5px\]{border-width:1.5px}.border-x{border-left-width:1px;border-right-width:1px}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-brand{--tw-border-opacity:1;border-color:rgb(34 70 58/var(--tw-border-opacity,1))}.border-brand-soft{--tw-border-opacity:1;border-color:rgb(234 241 237/var(--tw-border-opacity,1))}.border-brand\/15{border-color:rgba(34,70,58,.15)}.border-brand\/20{border-color:rgba(34,70,58,.2)}.border-brand\/25{border-color:rgba(34,70,58,.25)}.border-brand\/30{border-color:rgba(34,70,58,.3)}.border-brand\/35{border-color:rgba(34,70,58,.35)}.border-brand\/40{border-color:rgba(34,70,58,.4)}.border-data-caution\/30{border-color:rgba(212,138,46,.3)}.border-data-caution\/35{border-color:rgba(212,138,46,.35)}.border-data-caution\/40{border-color:rgba(212,138,46,.4)}.border-data-down\/30{border-color:rgba(192,57,43,.3)}.border-data-info\/25{border-color:rgba(58,110,165,.25)}.border-data-info\/30{border-color:rgba(58,110,165,.3)}.border-data-info\/40{border-color:rgba(58,110,165,.4)}.border-data-up\/30{border-color:rgba(24,121,78,.3)}.border-ghost{--tw-border-opacity:1;border-color:rgb(238 240 243/var(--tw-border-opacity,1))}.border-ghost\/60{border-color:rgba(238,240,243,.6)}.border-ink{--tw-border-opacity:1;border-color:rgb(26 26 26/var(--tw-border-opacity,1))}.border-ink-muted\/30{border-color:hsla(0,0%,46%,.3)}.border-ink\/10{border-color:rgba(26,26,26,.1)}.border-ink\/15{border-color:rgba(26,26,26,.15)}.border-line{--tw-border-opacity:1;border-color:rgb(238 240 243/var(--tw-border-opacity,1))}.border-line\/40{border-color:rgba(238,240,243,.4)}.border-line\/50{border-color:rgba(238,240,243,.5)}.border-line\/60{border-color:rgba(238,240,243,.6)}.border-line\/70{border-color:rgba(238,240,243,.7)}.border-plan{--tw-border-opacity:1;border-color:rgb(122 90 166/var(--tw-border-opacity,1))}.border-plan\/25{border-color:rgba(122,90,166,.25)}.border-plan\/30{border-color:rgba(122,90,166,.3)}.border-surface{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-surface\/40{border-color:hsla(0,0%,100%,.4)}.border-transparent{border-color:transparent}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-white\/25{border-color:hsla(0,0%,100%,.25)}.border-white\/30{border-color:hsla(0,0%,100%,.3)}.border-t-brand{--tw-border-opacity:1;border-top-color:rgb(34 70 58/var(--tw-border-opacity,1))}.bg-\[\#FAF7F0\]{--tw-bg-opacity:1;background-color:rgb(250 247 240/var(--tw-bg-opacity,1))}.bg-\[\#FEE500\]{--tw-bg-opacity:1;background-color:rgb(254 229 0/var(--tw-bg-opacity,1))}.bg-\[\#FFFBF4\]{--tw-bg-opacity:1;background-color:rgb(255 251 244/var(--tw-bg-opacity,1))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-brand{--tw-bg-opacity:1;background-color:rgb(34 70 58/var(--tw-bg-opacity,1))}.bg-brand-crown{--tw-bg-opacity:1;background-color:rgb(108 192 138/var(--tw-bg-opacity,1))}.bg-brand-dark{--tw-bg-opacity:1;background-color:rgb(27 58 48/var(--tw-bg-opacity,1))}.bg-brand-point{--tw-bg-opacity:1;background-color:rgb(82 164 109/var(--tw-bg-opacity,1))}.bg-brand-point\/40{background-color:rgba(82,164,109,.4)}.bg-brand-soft{--tw-bg-opacity:1;background-color:rgb(234 241 237/var(--tw-bg-opacity,1))}.bg-brand-soft\/40{background-color:rgba(234,241,237,.4)}.bg-brand-soft\/50{background-color:rgba(234,241,237,.5)}.bg-brand-soft\/60{background-color:rgba(234,241,237,.6)}.bg-brand\/10{background-color:rgba(34,70,58,.1)}.bg-brand\/15{background-color:rgba(34,70,58,.15)}.bg-brand\/5{background-color:rgba(34,70,58,.05)}.bg-brand\/60{background-color:rgba(34,70,58,.6)}.bg-brand\/\[0\.03\]{background-color:rgba(34,70,58,.03)}.bg-brand\/\[0\.06\]{background-color:rgba(34,70,58,.06)}.bg-data-caution{--tw-bg-opacity:1;background-color:rgb(212 138 46/var(--tw-bg-opacity,1))}.bg-data-caution\/10{background-color:rgba(212,138,46,.1)}.bg-data-caution\/15{background-color:rgba(212,138,46,.15)}.bg-data-caution\/20{background-color:rgba(212,138,46,.2)}.bg-data-caution\/30{background-color:rgba(212,138,46,.3)}.bg-data-caution\/40{background-color:rgba(212,138,46,.4)}.bg-data-caution\/5{background-color:rgba(212,138,46,.05)}.bg-data-caution\/50{background-color:rgba(212,138,46,.5)}.bg-data-caution\/\[0\.05\]{background-color:rgba(212,138,46,.05)}.bg-data-down{--tw-bg-opacity:1;background-color:rgb(192 57 43/var(--tw-bg-opacity,1))}.bg-data-down\/10{background-color:rgba(192,57,43,.1)}.bg-data-down\/15{background-color:rgba(192,57,43,.15)}.bg-data-high{--tw-bg-opacity:1;background-color:rgb(91 168 112/var(--tw-bg-opacity,1))}.bg-data-high\/15{background-color:rgba(91,168,112,.15)}.bg-data-info{--tw-bg-opacity:1;background-color:rgb(58 110 165/var(--tw-bg-opacity,1))}.bg-data-info\/10{background-color:rgba(58,110,165,.1)}.bg-data-info\/15{background-color:rgba(58,110,165,.15)}.bg-data-info\/20{background-color:rgba(58,110,165,.2)}.bg-data-info\/40{background-color:rgba(58,110,165,.4)}.bg-data-info\/5{background-color:rgba(58,110,165,.05)}.bg-data-info\/50{background-color:rgba(58,110,165,.5)}.bg-data-info\/\[0\.03\]{background-color:rgba(58,110,165,.03)}.bg-data-neutral{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.bg-data-up{--tw-bg-opacity:1;background-color:rgb(24 121 78/var(--tw-bg-opacity,1))}.bg-data-up\/10{background-color:rgba(24,121,78,.1)}.bg-data-up\/15{background-color:rgba(24,121,78,.15)}.bg-data-up\/20{background-color:rgba(24,121,78,.2)}.bg-data-up\/40{background-color:rgba(24,121,78,.4)}.bg-data-up\/5{background-color:rgba(24,121,78,.05)}.bg-ghost{--tw-bg-opacity:1;background-color:rgb(238 240 243/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-ink{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1))}.bg-ink-muted{--tw-bg-opacity:1;background-color:rgb(118 118 118/var(--tw-bg-opacity,1))}.bg-ink-muted\/15{background-color:hsla(0,0%,46%,.15)}.bg-ink-muted\/40{background-color:hsla(0,0%,46%,.4)}.bg-ink-soft{--tw-bg-opacity:1;background-color:rgb(90 96 97/var(--tw-bg-opacity,1))}.bg-ink\/40{background-color:rgba(26,26,26,.4)}.bg-ink\/50{background-color:rgba(26,26,26,.5)}.bg-ink\/85{background-color:rgba(26,26,26,.85)}.bg-line{--tw-bg-opacity:1;background-color:rgb(238 240 243/var(--tw-bg-opacity,1))}.bg-plan{--tw-bg-opacity:1;background-color:rgb(122 90 166/var(--tw-bg-opacity,1))}.bg-plan-soft{--tw-bg-opacity:1;background-color:rgb(239 234 246/var(--tw-bg-opacity,1))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.bg-surface{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-surface-highlight{--tw-bg-opacity:1;background-color:rgb(242 244 244/var(--tw-bg-opacity,1))}.bg-surface-highlight\/40{background-color:hsla(180,8%,95%,.4)}.bg-surface-highlight\/50{background-color:hsla(180,8%,95%,.5)}.bg-surface-highlight\/60{background-color:hsla(180,8%,95%,.6)}.bg-surface-secondary{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-surface-secondary\/40{background-color:hsla(0,0%,98%,.4)}.bg-surface-secondary\/60{background-color:hsla(0,0%,98%,.6)}.bg-surface\/90{background-color:hsla(0,0%,100%,.9)}.bg-surface\/95{background-color:hsla(0,0%,100%,.95)}.bg-transparent{background-color:transparent}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-px{padding-top:1px;padding-bottom:1px}.pb-0\.5{padding-bottom:.125rem}.pb-1{padding-bottom:.25rem}.pb-1\.5{padding-bottom:.375rem}.pb-10{padding-bottom:2.5rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-2\.5{padding-bottom:.625rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pb-28{padding-bottom:7rem}.pb-3{padding-bottom:.75rem}.pb-3\.5{padding-bottom:.875rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pb-\[max\(2rem\2c env\(safe-area-inset-bottom\)\)\]{padding-bottom:max(2rem,env(safe-area-inset-bottom))}.pl-1{padding-left:.25rem}.pl-10{padding-left:2.5rem}.pl-12{padding-left:3rem}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pl-\[3\.75rem\]{padding-left:3.75rem}.pr-1{padding-right:.25rem}.pr-16{padding-right:4rem}.pr-2{padding-right:.5rem}.pr-2\.5{padding-right:.625rem}.pr-20{padding-right:5rem}.pr-3{padding-right:.75rem}.pr-3\.5{padding-right:.875rem}.pr-4{padding-right:1rem}.pr-8{padding-right:2rem}.pt-0\.5{padding-top:.125rem}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pt-12{padding-top:3rem}.pt-2{padding-top:.5rem}.pt-2\.5{padding-top:.625rem}.pt-20{padding-top:5rem}.pt-24{padding-top:6rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.\!text-left{text-align:left!important}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.align-\[-2px\]{vertical-align:-2px}.align-\[-3px\]{vertical-align:-3px}.font-mono{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,monospace}.text-\[0\.5625rem\]{font-size:.5625rem}.text-\[0\.5rem\]{font-size:.5rem}.text-\[0\.625rem\]{font-size:.625rem}.text-\[0\.6875rem\]{font-size:.6875rem}.text-\[0\.75rem\]{font-size:.75rem}.text-\[0\.8125rem\]{font-size:.8125rem}.text-\[0\.875rem\]{font-size:.875rem}.text-\[0\.9375rem\]{font-size:.9375rem}.text-\[1\.0625rem\]{font-size:1.0625rem}.text-\[1\.125rem\]{font-size:1.125rem}.text-\[1\.25rem\]{font-size:1.25rem}.text-\[1\.375rem\]{font-size:1.375rem}.text-\[1\.75rem\]{font-size:1.75rem}.text-\[10px\]{font-size:10px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.text-\[1rem\]{font-size:1rem}.text-\[20px\]{font-size:20px}.text-\[22px\]{font-size:22px}.text-\[2rem\]{font-size:2rem}.text-\[3rem\]{font-size:3rem}.text-body{font-size:.875rem;line-height:1.55}.text-body-lg{font-size:.9375rem;line-height:1.55}.text-body-sm{font-size:.8125rem;line-height:1.5}.text-caption{font-size:.6875rem;line-height:1.4}.text-heading{font-size:1.125rem;line-height:1.3}.text-input{font-size:1rem;line-height:1.5}.text-label{font-size:.75rem;line-height:1.4}.text-section{font-size:1rem;line-height:1.35}.text-title{font-size:1.375rem;line-height:1.25}.text-title-lg{font-size:1.625rem;line-height:1.2}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\[16px\]{line-height:16px}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-normal{letter-spacing:0}.tracking-tight{letter-spacing:-.025em}.tracking-tightest{letter-spacing:-.02em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#16A34A\]{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-\[\#191919\]{--tw-text-opacity:1;color:rgb(25 25 25/var(--tw-text-opacity,1))}.text-\[\#2563EB\]{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-\[Nrem\]{color:Nrem}.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-brand{--tw-text-opacity:1;color:rgb(34 70 58/var(--tw-text-opacity,1))}.text-brand-crown{--tw-text-opacity:1;color:rgb(108 192 138/var(--tw-text-opacity,1))}.text-brand-dark{--tw-text-opacity:1;color:rgb(27 58 48/var(--tw-text-opacity,1))}.text-brand-point{--tw-text-opacity:1;color:rgb(82 164 109/var(--tw-text-opacity,1))}.text-data-caution{--tw-text-opacity:1;color:rgb(212 138 46/var(--tw-text-opacity,1))}.text-data-down{--tw-text-opacity:1;color:rgb(192 57 43/var(--tw-text-opacity,1))}.text-data-down\/70{color:rgba(192,57,43,.7)}.text-data-high{--tw-text-opacity:1;color:rgb(91 168 112/var(--tw-text-opacity,1))}.text-data-info{--tw-text-opacity:1;color:rgb(58 110 165/var(--tw-text-opacity,1))}.text-data-neutral{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-data-up{--tw-text-opacity:1;color:rgb(24 121 78/var(--tw-text-opacity,1))}.text-fav{--tw-text-opacity:1;color:rgb(224 36 94/var(--tw-text-opacity,1))}.text-ghost{--tw-text-opacity:1;color:rgb(238 240 243/var(--tw-text-opacity,1))}.text-ink{--tw-text-opacity:1;color:rgb(26 26 26/var(--tw-text-opacity,1))}.text-ink-muted{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.text-ink-muted\/40{color:hsla(0,0%,46%,.4)}.text-ink-muted\/60{color:hsla(0,0%,46%,.6)}.text-ink-muted\/70{color:hsla(0,0%,46%,.7)}.text-ink-muted\/80{color:hsla(0,0%,46%,.8)}.text-ink-soft{--tw-text-opacity:1;color:rgb(90 96 97/var(--tw-text-opacity,1))}.text-line{--tw-text-opacity:1;color:rgb(238 240 243/var(--tw-text-opacity,1))}.text-plan{--tw-text-opacity:1;color:rgb(122 90 166/var(--tw-text-opacity,1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-surface{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-surface\/30{color:hsla(0,0%,100%,.3)}.text-surface\/50{color:hsla(0,0%,100%,.5)}.text-surface\/60{color:hsla(0,0%,100%,.6)}.text-surface\/70{color:hsla(0,0%,100%,.7)}.text-surface\/80{color:hsla(0,0%,100%,.8)}.text-surface\/85{color:hsla(0,0%,100%,.85)}.text-surface\/90{color:hsla(0,0%,100%,.9)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.decoration-ink-muted\/40{text-decoration-color:hsla(0,0%,46%,.4)}.decoration-line{text-decoration-color:#eef0f3}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-ink{accent-color:#1a1a1a}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-card{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-card{--tw-shadow:0 1px 3px rgba(20,20,40,.05),0 6px 20px -10px rgba(20,20,40,.1);--tw-shadow-colored:0 1px 3px var(--tw-shadow-color),0 6px 20px -10px var(--tw-shadow-color)}.shadow-dock{--tw-shadow:0 14px 30px -8px rgba(20,20,40,.5);--tw-shadow-colored:0 14px 30px -8px var(--tw-shadow-color)}.shadow-dock,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-dock{--tw-shadow-color:#1a1b20;--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.\!ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-4{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-white\/20{--tw-ring-color:hsla(0,0%,100%,.2)}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200,.duration-base{transition-duration:.2s}.ease-brand{transition-timing-function:cubic-bezier(.22,1,.36,1)}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.safe-bottom{padding-bottom:env(safe-area-inset-bottom,0)}.num{font-variant-numeric:tabular-nums;letter-spacing:-.015em}.scrollbar-none{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-none::-webkit-scrollbar{display:none}@keyframes ez-sk-sweep{0%{background-position:100% 0}to{background-position:0 0}}@keyframes op-card-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.op-card-new{animation:op-card-in .5s ease-out}@keyframes ticker-scroll{0%{transform:translateX(0)}to{transform:translateX(-50%)}}.ticker-marquee-track{width:-moz-max-content;width:max-content;animation:ticker-scroll 60s linear infinite}.ticker-marquee-track:hover{animation-play-state:paused}@media (max-width:767px){[data-delete],[data-expand-body],[data-like],[data-reply-delete],[data-reply-like],[data-reply-report],[data-report-comment],[data-report],[data-toggle-replies]{min-height:36px;min-width:36px;display:inline-flex!important;align-items:center;justify-content:center}#comment-submit,[data-op-full-send],[data-op-send],[data-op-sheet-send]{min-width:36px!important;min-height:36px!important}[data-reply-submit]{min-height:36px!important;padding:6px 12px!important}[data-op-domain],[data-op-fdomain],[data-op-sdomain]{min-height:36px!important;display:inline-flex;align-items:center}[data-op-collapse],[data-op-expand-full],[data-op-sheet-close]{min-width:36px!important;min-height:36px!important}.filter-chip{min-height:44px}.cmp-add-btn{min-height:44px!important;display:inline-flex;align-items:center;justify-content:center}[data-report-comment]{padding:8px}[data-region-filter]{min-height:36px}.scroll-fade-r{mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body.h-screen{height:100vh;height:100dvh}@media (max-width:767px){.band-word{display:none}.band-word-keep .band-word{display:inline}}#route-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:95;pointer-events:none;opacity:0;transition:opacity .12s ease}#route-progress.active{opacity:1}#route-progress>i{display:block;height:100%;background:#22463a;transform-origin:left;transform:scaleX(0)}#app-root.route-leaving{opacity:.55;pointer-events:none;transition:opacity .12s ease}::view-transition-old(root){animation-duration:.1s;animation-timing-function:ease-in}::view-transition-new(root){animation-duration:.17s;animation-timing-function:ease-out}@keyframes ez-route-in{0%{opacity:0}to{opacity:1}}#app-root.route-enter{animation:ez-route-in .15s ease-out}@media (prefers-reduced-motion:reduce){::view-transition-new(root),::view-transition-old(root){animation:none!important}#app-root.route-enter{animation:none}}@keyframes ez-swap-in{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}#popular-many>li,#popular-surge>li,#search-results>*,[data-role=board-list]>*,[data-role=event-list]>*,[data-role=favorites-scroll]>*,[data-role=opinion-grid]>*,[data-role=opinions-list]>*,[data-role=trending-grid]>*{animation:ez-swap-in .18s ease-out both}[data-role=opinion-grid]>:nth-child(2),[data-role=trending-grid]>:nth-child(2){animation-delay:40ms}[data-role=opinion-grid]>:nth-child(3),[data-role=trending-grid]>:nth-child(3){animation-delay:80ms}[data-role=opinion-grid]>:nth-child(4),[data-role=trending-grid]>:nth-child(4){animation-delay:.12s}[data-role=trending-grid]>:nth-child(5){animation-delay:.16s}[data-role=trending-grid]>:nth-child(6){animation-delay:.2s}@keyframes ez-toast-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@keyframes ez-pop{0%{scale:1}40%{scale:1.25}to{scale:1}}.ez-pop{animation:ez-pop .22s cubic-bezier(.22,1,.36,1)}.card-lift{transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s cubic-bezier(.22,1,.36,1),border-color .15s ease,background-color .15s ease}@media (hover:hover){.card-lift:hover{transform:translateY(-2px);box-shadow:0 8px 28px -8px rgba(20,20,40,.16)}}.card-lift:active{transform:translateY(0) scale(.995)}#app-root [role=button]:active,#app-root button:not([disabled]):active{scale:.97}#op-panel{animation:ez-swap-in .2s ease-out}#app-root{overscroll-behavior-y:contain}[data-op-sheet-content]{overscroll-behavior:contain}.cv-auto{content-visibility:auto;contain-intrinsic-size:auto 150px}@media (max-width:767px){.aptinfo,.aptinfo tbody{display:block}.aptinfo tr{display:grid;grid-template-columns:84px minmax(0,1fr)}.aptinfo th{width:auto;border-left-width:0}.aptinfo td,.aptinfo th{padding-left:12px;padding-right:12px}.aptinfo td{min-width:0;overflow-wrap:anywhere}.aptinfo tr>:nth-child(3),.aptinfo tr>:nth-child(4){border-top:1px solid #eef0f3}}[hidden]:not([hidden=until-found]){display:none!important}.placeholder\:text-ink-muted::-moz-placeholder{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.placeholder\:text-ink-muted::placeholder{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.placeholder\:text-surface\/50::-moz-placeholder{color:hsla(0,0%,100%,.5)}.placeholder\:text-surface\/50::placeholder{color:hsla(0,0%,100%,.5)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:-inset-1:after{content:var(--tw-content);inset:-.25rem}.after\:-inset-\[5px\]:after{content:var(--tw-content);inset:-5px}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px}.after\:top-0\.5:after{content:var(--tw-content);top:.125rem}.after\:h-4:after{content:var(--tw-content);height:1rem}.after\:w-4:after{content:var(--tw-content);width:1rem}.after\:rounded-full:after{content:var(--tw-content);border-radius:9999px}.after\:bg-surface:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.first\:border-t-0:first-child{border-top-width:0}.first\:pt-0:first-child{padding-top:0}.last\:border-0:last-child{border-width:0}.last\:border-b-0:last-child{border-bottom-width:0}.last\:border-none:last-child{border-style:none}.focus-within\:border-brand:focus-within{--tw-border-opacity:1;border-color:rgb(34 70 58/var(--tw-border-opacity,1))}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-brand-soft:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgb(234 241 237/var(--tw-ring-opacity,1))}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-0\.5:hover,.hover\:scale-\[1\.03\]:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-\[1\.03\]:hover{--tw-scale-x:1.03;--tw-scale-y:1.03}.hover\:gap-2:hover{gap:.5rem}.hover\:border-brand:hover{--tw-border-opacity:1;border-color:rgb(34 70 58/var(--tw-border-opacity,1))}.hover\:border-brand\/30:hover{border-color:rgba(34,70,58,.3)}.hover\:border-brand\/40:hover{border-color:rgba(34,70,58,.4)}.hover\:border-brand\/50:hover{border-color:rgba(34,70,58,.5)}.hover\:border-ink:hover{--tw-border-opacity:1;border-color:rgb(26 26 26/var(--tw-border-opacity,1))}.hover\:border-ink\/20:hover{border-color:rgba(26,26,26,.2)}.hover\:border-ink\/30:hover{border-color:rgba(26,26,26,.3)}.hover\:border-ink\/40:hover{border-color:rgba(26,26,26,.4)}.hover\:border-white\/60:hover{border-color:hsla(0,0%,100%,.6)}.hover\:border-white\/70:hover{border-color:hsla(0,0%,100%,.7)}.hover\:bg-black\/90:hover{background-color:rgba(0,0,0,.9)}.hover\:bg-brand-dark:hover{--tw-bg-opacity:1;background-color:rgb(27 58 48/var(--tw-bg-opacity,1))}.hover\:bg-brand-soft:hover{--tw-bg-opacity:1;background-color:rgb(234 241 237/var(--tw-bg-opacity,1))}.hover\:bg-brand-soft\/40:hover{background-color:rgba(234,241,237,.4)}.hover\:bg-brand-soft\/50:hover{background-color:rgba(234,241,237,.5)}.hover\:bg-brand-soft\/70:hover{background-color:rgba(234,241,237,.7)}.hover\:bg-brand\/5:hover{background-color:rgba(34,70,58,.05)}.hover\:bg-data-down\/90:hover{background-color:rgba(192,57,43,.9)}.hover\:bg-ghost:hover{--tw-bg-opacity:1;background-color:rgb(238 240 243/var(--tw-bg-opacity,1))}.hover\:bg-ink-muted:hover{--tw-bg-opacity:1;background-color:rgb(118 118 118/var(--tw-bg-opacity,1))}.hover\:bg-ink\/5:hover{background-color:rgba(26,26,26,.05)}.hover\:bg-ink\/80:hover{background-color:rgba(26,26,26,.8)}.hover\:bg-ink\/85:hover{background-color:rgba(26,26,26,.85)}.hover\:bg-surface:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:bg-surface-highlight:hover{--tw-bg-opacity:1;background-color:rgb(242 244 244/var(--tw-bg-opacity,1))}.hover\:bg-surface-highlight\/50:hover{background-color:hsla(180,8%,95%,.5)}.hover\:bg-surface-highlight\/60:hover{background-color:hsla(180,8%,95%,.6)}.hover\:bg-surface-secondary:hover{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.hover\:bg-surface-secondary\/40:hover{background-color:hsla(0,0%,98%,.4)}.hover\:text-brand:hover{--tw-text-opacity:1;color:rgb(34 70 58/var(--tw-text-opacity,1))}.hover\:text-brand-dark:hover{--tw-text-opacity:1;color:rgb(27 58 48/var(--tw-text-opacity,1))}.hover\:text-data-down:hover{--tw-text-opacity:1;color:rgb(192 57 43/var(--tw-text-opacity,1))}.hover\:text-data-info\/80:hover{color:rgba(58,110,165,.8)}.hover\:text-ink:hover{--tw-text-opacity:1;color:rgb(26 26 26/var(--tw-text-opacity,1))}.hover\:text-surface:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-ink:hover{text-decoration-color:#1a1a1a}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-\[0_8px_28px_-8px_rgba\(20\2c 20\2c 40\2c \.16\)\]:hover{--tw-shadow:0 8px 28px -8px rgba(20,20,40,.16);--tw-shadow-colored:0 8px 28px -8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-card:hover{--tw-shadow:0 1px 3px rgba(20,20,40,.05),0 6px 20px -10px rgba(20,20,40,.1);--tw-shadow-colored:0 1px 3px var(--tw-shadow-color),0 6px 20px -10px var(--tw-shadow-color)}.hover\:shadow-card:hover,.hover\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:ring-white\/40:hover{--tw-ring-color:hsla(0,0%,100%,.4)}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus\:absolute:focus{position:absolute}.focus\:left-3:focus{left:.75rem}.focus\:top-3:focus{top:.75rem}.focus\:z-\[100\]:focus{z-index:100}.focus\:rounded:focus{border-radius:4px}.focus\:border-brand:focus{--tw-border-opacity:1;border-color:rgb(34 70 58/var(--tw-border-opacity,1))}.focus\:border-brand-crown:focus{--tw-border-opacity:1;border-color:rgb(108 192 138/var(--tw-border-opacity,1))}.focus\:border-ink:focus{--tw-border-opacity:1;border-color:rgb(26 26 26/var(--tw-border-opacity,1))}.focus\:bg-ink:focus{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1))}.focus\:bg-white\/\[0\.15\]:focus{background-color:hsla(0,0%,100%,.15)}.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}.focus\:py-2:focus{padding-top:.5rem;padding-bottom:.5rem}.focus\:text-body-sm:focus{font-size:.8125rem;line-height:1.5}.focus\:font-bold:focus{font-weight:700}.focus\:text-surface:focus{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-4:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-brand-crown\/30:focus{--tw-ring-color:rgba(108,192,138,.3)}.focus\:ring-brand-crown\/40:focus{--tw-ring-color:rgba(108,192,138,.4)}.focus\:ring-brand-soft:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(234 241 237/var(--tw-ring-opacity,1))}.focus\:ring-brand\/10:focus{--tw-ring-color:rgba(34,70,58,.1)}.focus\:ring-brand\/15:focus{--tw-ring-color:rgba(34,70,58,.15)}.focus\:ring-brand\/20:focus{--tw-ring-color:rgba(34,70,58,.2)}.focus\:ring-brand\/25:focus{--tw-ring-color:rgba(34,70,58,.25)}.focus\:ring-brand\/30:focus{--tw-ring-color:rgba(34,70,58,.3)}.focus\:ring-surface\/40:focus{--tw-ring-color:hsla(0,0%,100%,.4)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\:outline:focus-visible{outline-style:solid}.focus-visible\:outline-2:focus-visible{outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-ink:focus-visible{outline-color:#1a1a1a}.active\:scale-\[0\.98\]:active{--tw-scale-x:0.98;--tw-scale-y:0.98;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.group[open] .group-open\:rotate-180{--tw-rotate:180deg}.group:hover .group-hover\:translate-x-0,.group[open] .group-open\:rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-0{--tw-translate-x:0px}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-brand{--tw-text-opacity:1;color:rgb(34 70 58/var(--tw-text-opacity,1))}.group:hover .group-hover\:underline{text-decoration-line:underline}.group:hover .group-hover\:opacity-100{opacity:1}.peer:checked~.peer-checked\:translate-x-4{--tw-translate-x:1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked~.peer-checked\:bg-brand{--tw-bg-opacity:1;background-color:rgb(34 70 58/var(--tw-bg-opacity,1))}.peer:checked~.peer-checked\:after\:translate-x-full:after{content:var(--tw-content);--tw-translate-x:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:focus-visible~.peer-focus-visible\:outline{outline-style:solid}.peer:focus-visible~.peer-focus-visible\:outline-2{outline-width:2px}.peer:focus-visible~.peer-focus-visible\:outline-offset-2{outline-offset:2px}.peer:focus-visible~.peer-focus-visible\:outline-brand{outline-color:#22463a}@media (prefers-reduced-motion:reduce){.motion-reduce\:animate-none{animation:none}}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:mx-4{margin-left:1rem;margin-right:1rem}.sm\:inline{display:inline}.sm\:hidden{display:none}.sm\:h-auto{height:auto}.sm\:max-h-\[88vh\]{max-height:88vh}.sm\:max-w-2xl{max-width:42rem}.sm\:max-w-md{max-width:28rem}.sm\:shrink-0{flex-shrink:0}.sm\:translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:gap-3{gap:.75rem}.sm\:rounded-2xl{border-radius:20px}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pb-6{padding-bottom:1.5rem}.sm\:pt-6{padding-top:1.5rem}.sm\:text-body-sm{font-size:.8125rem;line-height:1.5}.sm\:text-label{font-size:.75rem;line-height:1.4}}@media (min-width:768px){.md\:sticky{position:sticky}.md\:bottom-4{bottom:1rem}.md\:bottom-auto{bottom:auto}.md\:left-auto{left:auto}.md\:right-4{right:1rem}.md\:top-4{top:1rem}.md\:top-\[72px\]{top:72px}.md\:order-1{order:1}.md\:order-2{order:2}.md\:order-none{order:0}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:-mx-5{margin-left:-1.25rem;margin-right:-1.25rem}.md\:mx-4{margin-left:1rem;margin-right:1rem}.md\:mb-3{margin-bottom:.75rem}.md\:mb-4{margin-bottom:1rem}.md\:mb-5{margin-bottom:1.25rem}.md\:mb-6{margin-bottom:1.5rem}.md\:mb-8{margin-bottom:2rem}.md\:mt-2\.5{margin-top:.625rem}.md\:mt-3{margin-top:.75rem}.md\:block{display:block}.md\:inline{display:inline}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:grid{display:grid}.md\:hidden{display:none}.md\:h-12{height:3rem}.md\:h-52{height:13rem}.md\:h-\[300px\]{height:300px}.md\:h-\[360px\]{height:360px}.md\:h-\[48px\]{height:48px}.md\:h-\[500px\]{height:500px}.md\:h-auto{height:auto}.md\:max-h-\[90vh\]{max-height:90vh}.md\:w-12{width:3rem}.md\:w-52{width:13rem}.md\:w-\[380px\]{width:380px}.md\:w-\[96px\]{width:96px}.md\:w-auto{width:auto}.md\:max-w-6xl{max-width:72rem}.md\:basis-auto{flex-basis:auto}.md\:translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:grid-cols-\[150px_minmax\(0\2c 1fr\)\]{grid-template-columns:150px minmax(0,1fr)}.md\:grid-cols-\[150px_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)\]{grid-template-columns:150px minmax(0,1fr) minmax(0,1fr)}.md\:grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr}.md\:grid-cols-\[6rem_1fr_6\.5rem\]{grid-template-columns:6rem 1fr 6.5rem}.md\:flex-row{flex-direction:row}.md\:flex-wrap{flex-wrap:wrap}.md\:flex-nowrap{flex-wrap:nowrap}.md\:items-start{align-items:flex-start}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:gap-2{gap:.5rem}.md\:gap-3{gap:.75rem}.md\:gap-4{gap:1rem}.md\:gap-5{gap:1.25rem}.md\:gap-6{gap:1.5rem}.md\:gap-7{gap:1.75rem}.md\:gap-8{gap:2rem}.md\:overflow-visible{overflow:visible}.md\:rounded-2xl{border-radius:20px}.md\:border-t-0{border-top-width:0}.md\:p-10{padding:2.5rem}.md\:p-2{padding:.5rem}.md\:p-3{padding:.75rem}.md\:p-5{padding:1.25rem}.md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-4{padding-left:1rem;padding-right:1rem}.md\:px-5{padding-left:1.25rem;padding-right:1.25rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.md\:py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:py-28{padding-top:7rem;padding-bottom:7rem}.md\:py-32{padding-top:8rem;padding-bottom:8rem}.md\:py-4{padding-top:1rem;padding-bottom:1rem}.md\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:pb-14{padding-bottom:3.5rem}.md\:pb-24{padding-bottom:6rem}.md\:pb-28{padding-bottom:7rem}.md\:pt-0{padding-top:0}.md\:pt-16{padding-top:4rem}.md\:pt-28{padding-top:7rem}.md\:pt-32{padding-top:8rem}.md\:text-center{text-align:center}.md\:text-\[1\.25rem\]{font-size:1.25rem}.md\:text-\[2\.5rem\]{font-size:2.5rem}.md\:text-body-lg{font-size:.9375rem;line-height:1.55}.md\:text-body-sm{font-size:.8125rem;line-height:1.5}.md\:text-heading{font-size:1.125rem;line-height:1.3}.md\:text-label{font-size:.75rem;line-height:1.4}.md\:text-section{font-size:1rem;line-height:1.35}.md\:text-title-lg{font-size:1.625rem;line-height:1.2}.md\:shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:top-2{top:.5rem}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-start-3{grid-column-start:3}.lg\:col-start-4{grid-column-start:4}.lg\:block{display:block}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:max-h-\[calc\(100dvh-5\.5rem\)\]{max-height:calc(100dvh - 5.5rem)}.lg\:min-h-\[78vh\]{min-height:78vh}.lg\:basis-1\/4{flex-basis:25%}.lg\:basis-3\/4{flex-basis:75%}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-\[44px_minmax\(190px\2c 1\.25fr\)_minmax\(200px\2c 1fr\)_minmax\(200px\2c 1fr\)\]{grid-template-columns:44px minmax(190px,1.25fr) minmax(200px,1fr) minmax(200px,1fr)}.lg\:grid-cols-\[minmax\(0\2c 0\.9fr\)_minmax\(0\2c 1\.7fr\)_minmax\(0\2c 1fr\)\]{grid-template-columns:minmax(0,.9fr) minmax(0,1.7fr) minmax(0,1fr)}.lg\:grid-cols-\[minmax\(0\2c 0\.9fr\)_minmax\(0\2c 1\.7fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 0\.95fr\)\]{grid-template-columns:minmax(0,.9fr) minmax(0,1.7fr) minmax(0,1fr) minmax(0,.95fr)}.lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(20rem\2c 23rem\)\]{grid-template-columns:minmax(0,1fr) minmax(20rem,23rem)}.lg\:flex-row{flex-direction:row}.lg\:gap-16{gap:4rem}.lg\:gap-3\.5{gap:.875rem}.lg\:gap-5{gap:1.25rem}.lg\:gap-8{gap:2rem}.lg\:justify-self-end{justify-self:end}.lg\:overflow-y-auto{overflow-y:auto}.lg\:px-10{padding-left:2.5rem;padding-right:2.5rem}.lg\:px-12{padding-left:3rem;padding-right:3rem}.lg\:px-14{padding-left:3.5rem;padding-right:3.5rem}.lg\:pr-0\.5{padding-right:.125rem}}@media (min-width:1280px){.xl\:sticky{position:sticky}.xl\:top-4{top:1rem}.xl\:col-start-1{grid-column-start:1}.xl\:col-start-2{grid-column-start:2}.xl\:row-span-2{grid-row:span 2/span 2}.xl\:row-start-1{grid-row-start:1}.xl\:row-start-2{grid-row-start:2}.xl\:block{display:block}.xl\:grid{display:grid}.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-\[minmax\(0\2c 1fr\)_360px\]{grid-template-columns:minmax(0,1fr) 360px}.xl\:grid-cols-\[minmax\(0\2c 1fr\)_380px\]{grid-template-columns:minmax(0,1fr) 380px}.xl\:grid-cols-\[minmax\(0\2c 1fr\)_clamp\(420px\2c 32vw\2c 600px\)\]{grid-template-columns:minmax(0,1fr) clamp(420px,32vw,600px)}.xl\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(23rem\2c 27rem\)\]{grid-template-columns:minmax(0,1fr) minmax(23rem,27rem)}.xl\:grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.xl\:items-start{align-items:flex-start}.xl\:gap-10{gap:2.5rem}.xl\:gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.xl\:gap-y-4{row-gap:1rem}.xl\:px-12{padding-left:3rem;padding-right:3rem}}@media (min-width:1536px){.\32xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}
/* /css/grid.css */
/* 탐색 그리드 공용 표 CSS — 홈(`main.home-grid.xgrid`). `/pick` ④(main.pick-page.xgrid)는 .sx 화살표·표 기본 규칙만 같이 쓴다.
   2026-09-06 partials/home.html <style> 에서 승격. 파셜 안 <style> 은 언마운트 시 사라지므로 두 화면이 쓰는 규칙은
   전역 파일이어야 한다. Tailwind 파이프라인을 타지 않는다 → 토큰은 리터럴(값 SoT = tailwind.config.js). 홈 전용(필터 접힘·모바일 시트)은 home.html 에.

   ── 정리안 2026-09-22 (운영자 "권고안으로 진행 · 위치 정렬 딱딱 떨어지게") ─────────────────────────────
   · 왼쪽 레일 = 모바일 16px · 데스크톱 40px (--rail). 히어로·필터·컨트롤 행·행머리·단지 셀 글자가 한 선에 선다.
   · 세로 리듬 = 4px 배수. 컨트롤 행 44 · 그룹 머리 24(모바일)/26 · 라벨 머리 40/44 · 행머리 44 · 값 행 44 · 데스크톱 행 ≈56.
   · 컨트롤 칩은 전부 28px(정렬 칩 999 · 그룹 칩 7px · 전체/열 설명 999). 액션 필(보고서·비교) 28(모바일) / 22(데스크톱 2줄 행).
   · 좁은 화면 = 2단 행: 단지가 열이 아니라 **행머리**(colspan 셀 안 sticky-left 상자). 단지 <col>·단지 th 없음.
   · 결측 = '정보 없음'(.na) · 모집단 내 위치 = 값 아래 한 줄(.pos · 뒤쪽 절반이면 주황 '감수'). */

/* ── 표 공통: 헤더/본문이 다른 표라 고정 레이아웃 + 동일 colgroup 이 전제 ── */
/* ⚠ width 를 auto 로 두면 table-layout:fixed 가 colgroup 폭을 컨테이너에 맞춰 **눌러서**
   헤더 표와 본문 표의 총폭이 어긋난다(실측 1417 vs 1378 → 열이 밀림).
   ⚠ width:max-content 는 table-layout:fixed 에서도 **셀 내용**을 재서, 긴 시설명이 있는
   본문 표만 넓어진다(실측 헤더 5384 vs 본문 5870 → 열이 486px 밀림).
   총폭을 명시값으로 고정한다: --nmw(단지명, CSS) + --rest(나머지 합, main.js 가 세팅). */
.xgrid { --nmw: 296px; --rail: 40px; --chrome-h: 56px; }   /* 단지 열 296 = 레일 40 + 순번 27 + 이름·소재지 · 2줄째에 소재지 + 보고서·비교 필(108)이 함께 선다 */
.xgrid table {
  border-collapse: separate; border-spacing: 0; table-layout: fixed;
  width: calc(var(--nmw) + var(--rest, 0px)); min-width: 100%;
}
.xgrid col.nmcol { width: var(--nmw); }

/* ── ③ 컨트롤 행 + 그리드 헤더 — 한 덩어리로 최상단 고정 ──
   sticky 는 **래퍼**(.gsticky)가 맡는다. `.ghead` 를 따로 sticky 로 두면 컨트롤 행이 먼저 밀려 올라간다. */
.xgrid .gsticky { position: sticky; top: 0; z-index: 6; background: #FFFFFF; }
/* 컨트롤 행 — 표를 조작하는 것 전부가 한 줄. 좁으면 한 줄 가로 스크롤(화살표 P-7 · .ctl-sx 기준). */
.xgrid .ctlbar {
  display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 var(--rail);
  background: #FFFFFF; border-bottom: 1px solid #EEF0F3;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none;
}
.xgrid .ctlbar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.xgrid .ctlbar > * { flex: 0 0 auto; }
.xgrid .ctlbar .chips { display: inline-flex; align-items: center; gap: 6px; }
.xgrid .ctlbar .chips:empty { display: none; }
.xgrid .ctlbar .chips:empty + .cgsep { display: none; }
/* 모수(모바일) — 데스크톱은 단지 머리 셀이 말한다 */
.xgrid .ctlbar .cnt { font-size: .8125rem; font-weight: 800; color: #1A1A1A; letter-spacing: -.01em; font-variant-numeric: tabular-nums; padding-right: 8px; border-right: 1px solid #E2E6E8; }
.xgrid .ctlbar .cnt small { font-size: .6875rem; font-weight: 600; color: #8C9492; margin-left: 4px; }
.xgrid .ctlbar .cgsep { width: 1px; height: 18px; background: #E2E6E8; margin: 0 2px; }
/* 면적 민감 정렬 경고(H-14) — 컨트롤 행 아래 한 줄 · 그 정렬이 아니면 hidden */
.xgrid .capline { padding: 6px var(--rail); background: #FFFFFF; border-bottom: 1px solid #EEF0F3; }

.xgrid .ghead {
  overflow: hidden;                 /* 사용자가 직접 가로 스크롤하지 않는다 */
  background: #F2F4F4; border-bottom: 1px solid #E2E6E8;
}
.xgrid .ghead th {
  background: #F2F4F4; white-space: nowrap; text-align: left; padding: 0;
  font-weight: 700; color: #5A6061;
}
.xgrid .ghead th .th { display: flex; align-items: center; gap: 7px; padding: 0 13px; height: 44px; cursor: pointer; user-select: none; }
/* 정렬 트리거는 `<button class="th">` 이다 (F-011 — th 에 role=button 을 얹으면 aria-sort 가 죽는다).
   preflight 가 배경·테두리·폰트는 이미 지웠고, 표 셀 안에서 div 처럼 굴게 폭·정렬만 맞춘다. */
.xgrid .ghead th button.th { width: 100%; text-align: left; font: inherit; color: inherit; letter-spacing: inherit; }
.xgrid .ghead th button.th:focus-visible { outline: 2px solid #22463A; outline-offset: -2px; }
.xgrid .ghead th button.th:active { scale: 1; }   /* 전역 프레스 축소(MB-1)는 표 머리글에선 흔들림으로 보인다 */
/* 라벨과 배지는 한 덩어리 — 좁아질 때 **줄어드는 건 라벨 텍스트뿐**이어야 한다(운영자 지적 2026-08-27). */
.xgrid .ghead th .lb { display: inline-flex; align-items: center; gap: 2px; min-width: 0; flex: 0 1 auto; }
.xgrid .ghead th .lbt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xgrid .ghead th .sdir { flex: 0 0 auto; font-size: .5625rem; }
.xgrid .ghead th.nosort .th { cursor: default; }
.xgrid .ghead th .th:hover { background: rgba(0,0,0,.035); }
.xgrid .ghead th.nosort .th:hover { background: transparent; }
.xgrid .ghead th.sorted { background: #EAF1ED; color: #22463A; }
.xgrid .ghead th.sorted .th:hover { background: #EAF1ED; }
.xgrid th.numh .th { justify-content: flex-end; }

/* ── ④ 바디 — 가로 전용 스크롤러 ── */
.xgrid .gbody { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; cursor: grab; }
.xgrid .gbody tr { cursor: pointer; }
/* 시설 셀 = 지도 팝업 트리거. 지도 핀 아이콘을 값 바로 앞에 **상시** 인라인으로(운영자 지적 2026-08-26). */
.xgrid td.poi-cell .poi-mark {
  font-size: 13px; line-height: 1; vertical-align: -2px; margin-right: 2px;
  color: #22463A; opacity: .34; pointer-events: none; user-select: none;
}
.xgrid td.poi-cell:hover { background: #EAF1ED !important; box-shadow: inset 0 0 0 1px #22463A; }
.xgrid td.poi-cell:hover .poi-mark { opacity: 1; }

/* 헤더 설명 트리거(구 `?`) — 2026-09-06 폐지(툴팁 + 열 설명 패널). 셀렉터는 팝업(.colpop)과 함께 남긴다. */
.xgrid .ghead th { position: relative; }
.xgrid .ghead .th-info {
  position: absolute; top: 3px; right: 3px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; padding: 0; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; color: inherit;
  font-size: 9px; line-height: 1; font-weight: 700; opacity: .4; cursor: pointer;
}
.xgrid .ghead .th-info::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 50%;
}
.xgrid .ghead th .th { padding-right: 13px; }
.xgrid .ghead .th-info:focus-visible { outline: 2px solid #22463A; outline-offset: 2px; opacity: 1; }
/* 정렬 가능/불가를 눌러 보기 전에 알 수 있게 (H-05) */
.xgrid .ghead th[data-sk] .lbt { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.xgrid .ghead th[data-sk]:hover .lbt { text-decoration-color: currentColor; }
.xgrid .ghead th.nosort { color: #999999; }
.xgrid .ghead th[data-sk]:focus-visible { outline: 2px solid #22463A; outline-offset: -2px; }
.xgrid .ghead th:hover .th-info { opacity: .75; }
.xgrid .ghead .th-info:hover,
.xgrid .ghead .th-info[aria-expanded="true"] {
  opacity: 1; background: #22463A; border-color: #22463A; color: #FFFFFF;
}
/* 컬럼 설명 팝업 — .ghead 가 overflow:hidden 이라 body 에 fixed 로 띄운다 */
.colpop {
  position: fixed; z-index: 60; max-width: 304px;
  background: #FFFFFF; border: 1px solid #E2E6E8; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 24, 32, .16); padding: 13px 15px 14px;
}
.colpop .ttl { font-size: .8125rem; font-weight: 700; color: #1A1A1A; padding-right: 18px; margin-bottom: 5px; }
.colpop .body { font-size: .75rem; line-height: 1.6; color: #5A6061; white-space: normal; }
.colpop .x {
  position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #999999; font-size: 15px; line-height: 1; cursor: pointer;
}
.colpop .x:hover { color: #1A1A1A; }

.xgrid .gbody td { padding: 8px 13px; border-bottom: 1px solid #EEF0F3; vertical-align: middle; white-space: nowrap; background: #FFFFFF; line-height: 1.3; }
.xgrid .gbody tr:hover td { background: #FAFAFA; }
.xgrid td.n, .xgrid th.numh { text-align: right; }
.xgrid .gsep { border-left: 1px solid #E2E6E8 !important; }
/* T2-5(2026-09-15): 고정 단지 셀 우측선(1px) 바로 옆 열의 좌측선은 그리지 않는다 — 겹치면 2px 로 두껍게 보였다(운영자 09-13). */
.xgrid td.fix + .gsep, .xgrid th.fix + .gsep { border-left: 0 !important; }
/* 셀 안 숫자·보조 줄 */
.xgrid .num { font-variant-numeric: tabular-nums; }
.xgrid .gbody td .text-caption { line-height: 1.25; }
/* 결측 — '정보 없음'(운영자 15차 · '—' 금지). 작고 흐리게: 값이 아니라 값의 부재다. */
.xgrid .na { font-size: .6875rem; color: #B5BDBA; letter-spacing: -.01em; }
/* 모집단 내 위치(상위 4 · 값 아래 한 줄 · lens: 모집단·방향 명시). 뒤쪽 절반 = 감수할 것(주황 글자 · 배경 없음). */
.xgrid .gbody td .pos { display: block; margin-top: 2px; font-size: .6875rem; line-height: 1.2; color: #8C9492; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xgrid .gbody td .pos.worst { color: #A9711F; font-weight: 700; }
/* 분양 배지 — 이름 옆에서 준공 전 단지임을 바로 말한다(색만으로 알리지 않는다) */
.xgrid .pbadge { display: inline-block; vertical-align: 1px; margin-left: 3px; padding: 0 4px; border-radius: 3px; background: #EAF1ED; color: #1B3A30; font-size: .6875rem; font-weight: 700; line-height: 1.45; white-space: nowrap; }

/* ── 단지 셀(데스크톱 · 2줄 행 · 정리안 A6) ─────────────────────────────────
   1줄 = 순번 + 이름(링크) · 2줄 = 소재지 · `보고서` · `＋ 비교`. 종전 4줄(92px)이 ≈56px 로.
   단지 셀 글자는 --rail(40px) 에서 시작해 필터·컨트롤 행과 한 선에 선다(--nmw 230 → 296: 레일 26 + 2줄째의 액션 필 자리). */
.xgrid th.fix, .xgrid td.fix {
  position: sticky; left: 0; z-index: 4;
  white-space: normal; border-right: 1px solid #E2E6E8;
}
.xgrid td.fix { padding: 6px 13px 6px var(--rail); }
.xgrid .ghead th.fix { z-index: 6; background: #F2F4F4; }
.xgrid .ghead th.fix.sorted { background: #EAF1ED; }
.xgrid .gbody tr:hover td.fix { background: #FAFAFA; }
.xgrid .nmcell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.xgrid .nmcell .l1 { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.xgrid .nmcell .l2 { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 27px; }   /* 순번 20 + gap 7 → 소재지가 이름과 같은 x 에 */
.xgrid .nmcell .l2 .loc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xgrid .nm { display: inline; font-weight: 700; font-size: .8125rem; line-height: 1.25; color: #1A1A1A; letter-spacing: -.005em; word-break: keep-all; overflow-wrap: anywhere; }
.xgrid .loc { display: block; font-size: .6875rem; line-height: 1.3; color: #999999; }
/* 동명 단지 구분자(2026-10-01 · utils/name-disambig.js 와 같은 표기) — 이름 뒤 보통 굵기 흐린 글자. */
.xgrid .nm .nmd { font-weight: 400; color: #999999; }
/* 순번 — 정렬 순서다(랭킹 아님 · lens). 1~4 는 채움, 나머지는 틴트. */
.xgrid .seq { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #EAF1ED; color: #22463A; font-size: .6875rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.xgrid .seq.top { background: #22463A; color: #FFFFFF; }
/* 단지명 링크 — 진짜 링크(키보드 도달·새 탭 가능, H-16) */
.xgrid .nmlink { color: inherit; text-decoration: none; min-width: 0; }
.xgrid .nmlink:hover .nm { text-decoration: underline; text-underline-offset: 2px; }
.xgrid .nmlink:focus-visible { outline: 2px solid #22463A; outline-offset: 2px; border-radius: 3px; }
/* 액션 필 — `보고서`(링크) · `＋ 비교 / ✓ 비교`(토글 버튼 · 네이티브 체크박스 폐기 · 정리안 C1).
   상시 노출한다 — 호버로만 알리면 모르고 지나간다(poi 아이콘과 같은 판단). 히트박스는 ::before 로 24px 이상. */
.xgrid .nmdetail, .xgrid .cmp {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex: 0 0 auto;
  height: 22px; padding: 0 8px; border-radius: 999px; font-size: .6875rem; font-weight: 700; line-height: 1;
  white-space: nowrap; cursor: pointer; text-decoration: none; font-family: inherit;
}
.xgrid .nmdetail::before, .xgrid .cmp::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.xgrid .nmdetail { border: 1px solid #E2E6E8; background: #FFFFFF; color: #1B3A30; }
.xgrid .nmdetail:hover { border-color: #22463A; background: #EAF1ED; }
.xgrid .cmp { border: 1.5px solid #22463A; background: #FFFFFF; color: #22463A; }
.xgrid .cmp::after { content: '＋ 비교'; }
.xgrid .cmp[aria-pressed="true"] { background: #22463A; color: #FFFFFF; }
.xgrid .cmp[aria-pressed="true"]::after { content: '✓ 비교'; }
.xgrid .cmp:hover { background: #EAF1ED; }
.xgrid .cmp[aria-pressed="true"]:hover { background: #1B3A30; }
.xgrid .nmdetail:focus-visible, .xgrid .cmp:focus-visible { outline: 2px solid #22463A; outline-offset: 2px; }
.xgrid .cmp:active { scale: 1; }

/* 정렬 배지 */
.xgrid .sbadge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 999px; background: #22463A; color: #fff; font-size: 9px; font-weight: 800; line-height: 1; }

/* 필터 칩 */
.xgrid .fchip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 1px solid #EEF0F3; border-radius: 7px; background: #FFFFFF; color: #5A6061; font-size: .78125rem; font-weight: 600; white-space: nowrap; }
.xgrid .fchip:hover { border-color: #767676; color: #1A1A1A; }
.xgrid .fchip[data-on] { background: #22463A; border-color: #22463A; color: #fff; padding-right: 6px; }
/* ⚠ 해제 ✕ 는 시각 17px 이지만 히트박스는 24px 이상이어야 한다(WCAG 2.5.8 AA). */
.xgrid .fchip .rm {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; background: rgba(255,255,255,.22);
  font-size: 11px; line-height: 1;
}
.xgrid .fchip .rm::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
}
.xgrid .fchip .rm:hover { background: rgba(255,255,255,.4); }
/* 접힘 바 안의 적용 칩(#fzactive)은 28px 로 — 컨트롤 칩과 같은 키 */
.home-grid #fzactive .fchip { height: 28px; font-size: .75rem; }

/* 커버리지 게이트 (05 개선안 H-03) — 이 지역에 정보가 없거나 얇은 조건을 칩에서 미리 말한다 */
.xgrid .fchip .cvtag {
  margin-left: 4px; padding: 0 4px; border-radius: 4px;
  background: #F2F4F4; color: #999999; font-size: .625rem; font-weight: 700;
}
.xgrid .fchip[data-cov="none"] { color: #999999; border-style: dashed; cursor: not-allowed; }
.xgrid .fchip[data-cov="none"]:hover { border-color: #EEF0F3; color: #999999; }
.xgrid .fchip[data-cov="thin"] .cvtag { background: #FBF3E7; color: #A9711F; }

/* 컨트롤 칩 — 전부 28px 한 키. 그룹 칩(.cg) 7px · 전체/열 설명(.cgp) 999 · 정렬 칩(.schip) 999 */
.xgrid .cg { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid #22463A; background: #EAF1ED; color: #1B3A30; font-size: .75rem; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.xgrid .cg[data-off] { background: #FFFFFF; border-color: #EEF0F3; color: #767676; text-decoration: line-through; }
.xgrid .cgp { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid #EEF0F3; background: #FFFFFF; color: #5A6061; font-size: .75rem; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.xgrid .cgp:hover { border-color: #767676; color: #1A1A1A; }
.xgrid .cgp[data-on] { background: #22463A; border-color: #22463A; color: #FFFFFF; }
.xgrid .cgp-help .material-symbols-outlined { font-size: 15px; line-height: 1; }
.xgrid .cgsep { width: 1px; height: 18px; background: #E2E6E8; margin: 0 2px; }
/* 정렬 칩 — 필수 조건 중 정렬 가능분 + 열머리로 걸린 키. 탭 = 추가 → 방향 → 해제(main.js). */
.xgrid .schip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; background: #22463A; color: #FFFFFF; font-size: .75rem; font-weight: 700; white-space: nowrap; font-family: inherit; }
.xgrid .schip .sb { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 999px; background: #52A46D; color: #fff; font-size: .625rem; font-weight: 800; line-height: 1; }
.xgrid .schip .dir { font-weight: 600; opacity: .9; }
.xgrid .schip.cand { background: #FFFFFF; color: #5A6061; box-shadow: inset 0 0 0 1px #E2E6E4; padding: 0 10px; cursor: pointer; font-weight: 600; }
.xgrid .schip.cand:hover { box-shadow: inset 0 0 0 1px #767676; color: #1A1A1A; }
.xgrid .schip.cand.on { background: #22463A; color: #fff; box-shadow: none; font-weight: 700; padding-left: 6px; }
/* `비교 n곳 →`(데스크톱 · 컨트롤 행 오른쪽 끝) */
.xgrid .cmp-go { margin-left: auto; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: #22463A; color: #FFFFFF; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.xgrid .cmp-go:hover { background: #1B3A30; }
/* 비교 바(모바일) — 1곳 이상 고르면 독 위 플로팅 필(dock-chrome 의 .dock-chat 과 같은 기준선) */
.xgrid .cmpbar {
  position: fixed; left: 16px; right: 16px; z-index: 40;
  bottom: calc(var(--m-bottombar-h, 60px) + env(safe-area-inset-bottom, 0px) + 12px);
  height: 44px; padding: 0 6px 0 16px; border-radius: 999px; background: #22463A; color: #FFFFFF;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .8125rem; font-weight: 700; box-shadow: 0 10px 28px -8px rgba(20, 40, 30, .55);
}
.xgrid .cmpbar small { font-weight: 500; opacity: .75; margin-left: 4px; }
.xgrid .cmpbar button { height: 32px; padding: 0 14px; border-radius: 999px; background: #FFFFFF; color: #22463A; font-size: .75rem; font-weight: 800; font-family: inherit; }

/* ── P-7 가로 스크롤 화살표 (모바일 가독성 검토 2026-09-10) ────────────────────
   스크롤 바가 아니다 — **내용이 그쪽에 더 있을 때만** 그 방향 끝에 원형 화살표를 띄운다. 배선은 `utils/scroll-arrows.js`.
   ⚠ 마스크(그라데이션 페이드)는 쓰지 않는다 — 스크롤러 안 sticky 첫 열이 브라우저에 따라 흔들린다. */
.sx { position: relative; }
/* ⚠ **버튼이 곧 히트박스**다(40px · WCAG 2.5.8 AA). 시각 원(28px)은 `::before` 로 안쪽에 그린다.
   히트박스가 컨테이너 밖으로 나가면 문서가 4px 넓어져 가로 스크롤이 생긴다(실기기 지적). */
.sxa {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 8;
  width: 40px; height: 40px; padding: 0; border: 0; background: transparent; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1B3A30; font-size: 17px; font-weight: 800; line-height: 1; cursor: pointer;
}
.sxa::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); border: 1px solid #E2E6E4;
  box-shadow: 0 2px 8px rgba(20, 20, 40, .16);
}
.sxa .sxg { position: relative; }        /* 글리프를 원 위로 */
.sxa-l { left: 0; }
.sxa-r { right: 0; }
/* 고정 머리글(.gsticky) 안에 둘 때 — 머리글 행 오른쪽 끝에 앉아 세로 스크롤에도 남는다 */
.sxa.sxa-bottom { top: auto; bottom: 1px; transform: none; }
/* 표에 붙일 때 — **머리 쪽 상단**(운영자 지적 2026-09-11: 8,536px 표의 한가운데 화살표는 무의미) */
.sxa.sxa-top { top: 0; transform: none; }
.sx.sx-on { padding-top: 30px; }
.sxa:hover::before { border-color: #22463A; background: #EAF1ED; }
.sxa:active::before { background: #DCE9E1; }
.sxa:focus-visible { outline: 2px solid #22463A; outline-offset: -6px; border-radius: 50%; }

/* ── G-1 열 그룹 칩 — 모바일에선 탭 = 그 그룹으로 점프, ✕ = 끄기 ──────────────
   데스크톱은 종전 그대로 탭 = 켜기/끄기 토글이다(동작이 바뀌지 않는다). */
.xgrid .cg .cgx { display: none; }
@media (max-width: 767px) {
  .xgrid .cg { padding-right: 5px; }
  .xgrid .cg .cgx {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 1px; border-radius: 50%;
    background: rgba(34, 70, 58, .12); font-size: 10px; line-height: 1;
  }
  .xgrid .cg .cgx::before {
    content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 26px; height: 26px; border-radius: 50%;
  }
  .xgrid .cg[data-off] { padding-right: 10px; }
  .xgrid .cg[data-off] .cgx { display: none; }
  /* 지금 보고 있는 열 그룹 — 켜짐/꺼짐(data-off)과 다른 축이라 링으로 표시한다 */
  .xgrid .cg[data-cur] { box-shadow: inset 0 0 0 2px #22463A; }
  /* 열 설명은 아이콘만(컨트롤 행 폭) — 이름은 title·aria */
  .xgrid .cgp-help { width: 28px; padding: 0; justify-content: center; }
  .xgrid .cgp-help .cgp-t { display: none; }
}

/* ── 머리글 2줄 · 단지 머리 셀 모집단 요약 · 정렬 배지 · 열 설명 패널 · 가로 스크롤 바 숨김 (2026-09-06) ── */
.xgrid .ghead tr.gr th { height: 26px; padding: 0 8px; background: #F7F8F8; color: #767676; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-align: center; border-bottom: 1px solid #E2E6E8; white-space: nowrap; }
.xgrid .ghead tr.gr th.gnm { text-align: left; background: #F2F4F4; vertical-align: middle; border-bottom: 0; }
.xgrid .ghead th.gnm .gnmbox { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 70px; padding: 0 13px 0 var(--rail); }
.xgrid .ghead th.gnm .gnmt { font-size: .75rem; font-weight: 700; color: #5A6061; }
.xgrid .ghead th.gnm .gnmt b { color: #1A1A1A; font-size: .875rem; font-variant-numeric: tabular-nums; }
.xgrid .ghead th.gnm .gsum { font-size: .6875rem; font-weight: 500; color: #767676; line-height: 1.35; white-space: normal; }
.xgrid .ghead .sb2 { display: inline-flex; align-items: center; gap: 1px; height: 18px; padding: 0 6px; border-radius: 999px; background: #22463A; color: #fff; font-size: .6875rem; font-weight: 800; line-height: 1; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.xgrid .ghead .shint { flex: 0 0 auto; font-size: .5625rem; color: #999999; opacity: 0; transition: opacity .12s; letter-spacing: -.1em; }
.xgrid .ghead th[data-sk]:hover .shint, .xgrid .ghead th[data-sk]:focus-within .shint { opacity: .7; }
/* 가로 스크롤 바 숨김 — 스크롤은 드래그(grab)·트랙패드·Shift+휠·화살표로 */
.xgrid .gbody { scrollbar-width: none; -ms-overflow-style: none; }
.xgrid .gbody::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* 열 설명 패널 — 데스크톱 우측 고정, 모바일 하단 시트 */
.xgrid .colhelp { position: fixed; right: 20px; top: calc(var(--chrome-h) + 12px); bottom: 20px; width: 340px; overflow: auto; z-index: 9; background: #FFFFFF; border: 1px solid #E2E6E4; border-radius: 14px; box-shadow: 0 12px 30px -10px rgba(16,24,32,.25); padding: 12px 14px 16px; }
.xgrid .colhelp .ch-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.xgrid .colhelp .ch-t { font-size: .875rem; font-weight: 800; color: #1A1A1A; }
.xgrid .colhelp .ch-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #767676; font-size: 15px; cursor: pointer; }
.xgrid .colhelp .ch-x:hover { background: #F2F4F4; color: #1A1A1A; }
.xgrid .colhelp .ch-lead { font-size: .75rem; line-height: 1.5; color: #5A6061; padding: 6px 0 8px; border-bottom: 1px solid #EEF0F3; }
.xgrid .colhelp .ch-g { font-size: .6875rem; font-weight: 800; letter-spacing: .06em; color: #767676; text-transform: uppercase; margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid #EEF0F3; }
.xgrid .colhelp .ch-g:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.xgrid .colhelp .ch-it { padding: 6px 0; font-size: .75rem; line-height: 1.5; color: #5A6061; }
.xgrid .colhelp .ch-it b { display: block; color: #1A1A1A; font-size: .8125rem; }
.xgrid .colhelp .ch-tags i { font-style: normal; color: #22463A; font-weight: 700; font-size: .6875rem; margin-left: 6px; }
@media (max-width: 767px) { .xgrid .colhelp { left: 12px; right: 12px; top: auto; bottom: 0; width: auto; max-height: 60vh; border-radius: 14px 14px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } }

/* 「내 조건」 열 블록 — 연한 녹색 머리 · 블록 끝 2px 선 */
.xgrid .ghead tr.gr th.cond { background: #EAF1ED; color: #1B3A30; }
.xgrid .ghead tr:not(.gr) th.cond { background: #EAF1ED; }
.xgrid .ghead tr:not(.gr) th.cond.sorted { background: #DCE9E1; }
.xgrid .gbody td.cond { background: #F8FBF9; }
.xgrid .gcond { border-right: 2px solid #22463A !important; }
.xgrid .gcond + .gsep, .xgrid td.fix + .gsep { border-left: 0 !important; }
/* 데스크톱에서는 재단 상자가 없는 것처럼 — 종전 레이아웃 그대로 */
@media (min-width: 768px) { .xgrid .gbody td .cellbox { display: contents; } }

/* ══════════════ 좁은 화면 = 2단 행 (≤767 · 홈 정리안 B1 · 2026-09-22) ══════════════
   단지 열(116px) 재단(2026-09-10 P-3)을 **대체**한다. 그 재단 위에 09-21 순번·비교 체크박스가 같은 46px 상자에 얹혀
   잘림 30/30 · 소재지 비가시 30/30 이 됐다(실측). 단지는 열이 아니라 행머리다:
     tr.rh  = colspan 셀 하나 · 안의 .rhbox 가 sticky-left(뷰포트 폭) → 값 행이 지나가도 이름은 제자리
     tr.rv  = 값 열(44px 고정 · .cellbox 재단) · 첫 값 열은 --rail 에서 시작해 행머리 글자와 한 선
   단지 <col>·단지 th 는 없다(colgroupHtml/headerHtml narrow). 모수는 컨트롤 행 cnt 가 말한다. */
@media (max-width: 767px) {
  .xgrid { --nmw: 0px; --rail: 16px; }
  .xgrid .ctlbar { gap: 6px; }
  .xgrid .ghead tr.gr th { height: 24px; font-size: .625rem; padding: 0 6px; }
  .xgrid .ghead th .th { height: 40px; padding: 0 8px; gap: 4px; }
  .xgrid .ghead .sb2 { height: 16px; padding: 0 5px; font-size: .625rem; }
  .xgrid .ghead .shint { display: none; }
  .xgrid .ghead tr:last-child th:first-child .th { padding-left: var(--rail); }
  .xgrid .ghead tr.gr th { text-align: left; }                 /* 묶음 이름은 그 묶음 첫 열의 왼쪽 선에서 시작 — 행머리·첫 값 열과 같은 레일 */
  .xgrid .ghead tr.gr th:first-child { padding-left: var(--rail); }

  /* 행머리 */
  .xgrid .gbody tr.rh td { padding: 0; height: auto; border-bottom: 0; }
  .xgrid .gbody tr.rh:hover td, .xgrid .gbody tr.rh:hover + tr.rv td { background: #FAFAFA; }
  .xgrid .rhbox {
    position: sticky; left: 0; width: 100vw; max-width: 100%;
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px var(--rail) 2px;
    background: inherit;
  }
  .xgrid .rhbox .rhmain { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; flex: 1 1 auto; }
  /* 이름은 어절 우선 최대 2줄(행머리가 그만큼 자란다 · 잘림 0) — 여기 clamp 는 이름 블록에만 걸린다(시설 셀과 달리 뒤따르는 인라인 값이 없다) */
  .xgrid .rhbox .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .875rem; line-height: 1.2; white-space: normal; }
  .xgrid .rhbox .loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .xgrid .rhbox .rhact { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
  .xgrid .rhbox .nmdetail, .xgrid .rhbox .cmp { height: 28px; padding: 0 10px; font-size: .75rem; }
  .xgrid .rhbox .nmdetail::before, .xgrid .rhbox .cmp::before { top: -8px; bottom: -8px; }

  /* 값 행 — 44px 고정 · 상자 재단 */
  .xgrid .gbody tr.rv td { height: 44px; padding: 0 8px; border-bottom: 1px solid #E2E6E8; vertical-align: middle; }
  .xgrid .gbody tr.rv td:first-child { padding-left: var(--rail); }
  .xgrid .gbody td .cellbox { display: block; max-height: 40px; overflow: hidden; line-height: 1.25; }
  /* 시설 셀: 이름은 어절로 줄바꿈 · 거리 인라인 · 부가(노선·학교유형·등급)는 ' · ' 로 이어 상자 2줄에서 재단.
     ⚠ clamp 는 **상자**에 건다 — span 에 걸면 블록이 되어 거리가 다음 줄로 밀린다(09-10 실측). */
  .xgrid .gbody td .cellbox.tx { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .xgrid .gbody td .cellbox.tx .whitespace-normal { display: inline; }
  .xgrid .gbody td .cellbox.tx > div { display: inline; }
  /* 부가 줄 앞 구분점 — 앞에 **값**(이름·거리)이 있을 때만. 지도 핀 바로 뒤(배정초 목록의 첫 학교)에는 찍지 않는다. */
  .xgrid .gbody td .cellbox.tx > :not(.poi-mark) + div::before { content: ' · '; color: #B5BDBA; }
  .xgrid .gbody td .cellbox.tx .text-caption { font-size: .6875rem; }
  .xgrid .gbody td .pos { margin-top: 1px; font-size: .625rem; }
  /* 시설 셀 지도 팝업 — 좁은 화면은 셀 전체가 히트 */
  .xgrid td.poi-cell .poi-mark { font-size: 12px; margin-right: 1px; }
  /* 결과 모드 잔여 셀렉터 호환(순번 · 조건 열) */
  .xgrid .seq { min-width: 20px; height: 20px; font-size: .6875rem; }
}

/* /css/report.css */
/* 단지 보고서·비교 렌더 CSS — 「내 조건 집 찾기」 /pick ③④ 와 단지 상세 「보고서」 탭이 공유 (이관 TODO T3-1 · 2026-09-21).
   partials/pick.html 인라인 <style> 에서 승격했다 — 파셜 <style> 은 언마운트 시 사라지므로 두 화면이 쓰는 규칙은 전역 파일이어야 한다.
   스코프 = `.rp-scope`(pick 은 main.pick-page 에도 붙어 있다 · 탭은 패널 host 에만). ⚠ 탭에는 `.xgrid` 를 주지 않는다 — grid.css 의
   `.xgrid table { min-width:100% }` 가 칸 고정 표(`--col`)를 래퍼 폭으로 늘린다(pick 은 `.rp-t{min-width:0}` 으로 끊었다).
   토큰은 리터럴(값 SoT = tailwind.config.js). 칸 너비 시스템 `--col`(228/196/168/124)·`--gap`·`--rp-fig-w` 는 여기서만 선언한다.
   `--chrome-h` = 고정 지도(sticky)의 상단 오프셋 — 기본 0(탭) · pick 은 파셜 인라인 `.pick-page{--chrome-h:56px}` + syncChrome() 이 덮는다. */
.rp-scope { --chrome-h: 0px; }

    /* ── ③ 단지 보고서(Phase 2 · 02 §4) — 문장·표만. 절 머리 번호 = 미니맵 번호 ── */
    .rp-scope .rp { max-width: none; padding-top: 22px; padding-bottom: 112px; font-size: .875rem; color: #1A1A1A; --rp-fig-w: 420px; }
    /* 전폭(운영자 2026-09-06 2차: 우측 목차를 뺀 남은 너비 전부) — 넓은 화면은 지도 열도 비례해 커진다(최소 420 · 최대 30%) */
    @media (min-width: 1600px) { .rp-scope .rp { --rp-fig-w: minmax(420px, 30%); } }
    /* 절 = 본문 + 우측 지도 스냅샷(운영자 2차 검토: "빈 곳에 항목별 위치·POI 지도"). 지도 열은 절 안에서 sticky. */
    /* 절 = 행들. 행 = 항목 블록 | 그 항목의 지도(운영자 16차 "지도를 항목 라벨 옆에").
       2026-09-15 운영자 재지시 "지도를 디폴트 확대로": 지도는 **확대(본문 폭 · 소제목 아래)가 기본**이고, 이용자가 축소를 누른 행만
       2열(본문 | 옆 열 스냅샷)이 된다. 지도 없는 행은 전폭 블록 — 표 폭은 칸 수로 고정돼(아래 --col) 열 폭에 흔들리지 않는다. */
    .rp-scope .rp-row.has-fig:not(.expanded) { display: grid; grid-template-columns: minmax(0, 1fr) var(--rp-fig-w); gap: 0 40px; align-items: start; }
    .rp-scope .rp-row { padding: 0 0 6px; }
    .rp-scope .rp-row + .rp-row { margin-top: 6px; }
    .rp-scope .rp-sec .rp-body { min-width: 0; }
    .rp-scope .rp-row > .rp-fig { margin: 0; position: sticky; top: calc(var(--chrome-h) + 16px); align-self: start; padding-top: 2px; }
    /* 지도 우측 상단 확대/축소 컨트롤(운영자 17차) — 지도 위에 떠 있고, 지도 자체는 스냅샷(pointer-events:none)이라 컨트롤만 클릭된다 */
    .rp-scope .rp-fig { position: relative; }
    .rp-scope .rp-mapctl { position: absolute; top: 10px; right: 8px; z-index: 6; display: flex; gap: 4px; }
    .rp-scope .rp-mapbtn { height: 26px; padding: 0 9px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.96); color: #1B3A30; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.10); }
    .rp-scope .rp-mapbtn:hover { background: #EAF1ED; }
    .rp-scope .rp-mapbtn[disabled] { color: #B5BBB8; background: rgba(255,255,255,.8); cursor: default; }
    .rp-scope .rp-mapbtn[disabled]:hover { background: rgba(255,255,255,.8); }
    /* 확대(기본): 행이 한 열이 되고 지도는 항목 소제목 아래 본문 안에 본문 폭으로 · 끌기 + 줌 버튼 + 휠(지도를 가리키고 시작한 휠만 — 스크롤 도중 지나가는 휠은 페이지 몫 · utils/map-wheel.js) */
    .rp-scope .rp-body > .rp-fig.expanded { margin: 6px 0 16px; position: relative; }
    .rp-scope .rp-fig.expanded .rp-map { aspect-ratio: 2 / 1; max-height: 620px; pointer-events: auto; }
    .rp-scope .rp-fig.expanded figcaption { display: flex; flex-wrap: wrap; gap: 0 10px; }
    /* ⚠ 모바일: 앱 전역 고정 상단 바(집BTI 칩·프로필 버튼)가 화면 위쪽을 덮어 지도 위 컨트롤이 가려질 수 있다(Playwright 실측) → 지도 위 흐름 안에 우측 정렬로 */
    @media (max-width: 767px) {
      .rp-scope .rp-fig.expanded .rp-map { aspect-ratio: 4 / 3; pointer-events: none; }   /* 모바일: 확대가 기본이라도 스냅샷 — 페이지 스크롤 우선(④ 와 같은 규칙) */
      .rp-scope .rp-mapctl { position: static; justify-content: flex-end; margin: 0 0 6px; }
    }
    .rp-scope .rp-row .rp-body > .rp-h3:first-child { margin-top: 8px; }
    .rp-scope .rp-map-ph span { display: block; font-size: .6875rem; color: #B5BBB8; margin-top: 4px; padding: 0 16px; text-align: center; }
    .rp-scope .rp-map { width: 100%; aspect-ratio: 5 / 4; border-radius: 12px; overflow: hidden; background: #EEF0F3; border: 1px solid #E2E6E4; pointer-events: none; position: relative; }
    .rp-scope .rp-map-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #999999; font-size: .8125rem; }
    .rp-scope .rp-fig figcaption { font-size: .75rem; color: #767676; line-height: 1.55; margin-top: 8px; }
    .rp-scope .rp-fig figcaption b { color: #1A1A1A; margin-right: 6px; }
    .rp-scope .rp-lg { display: inline; }
    .rp-scope .rp-lg i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 4px 0 8px; vertical-align: -1px; }
    .rp-scope .rp-lgn { display: block; color: #999999; }
    /* 지도 마커(CustomOverlay) — 점 + 라벨 · 단지는 진하게 */
    .rp-mk { display: flex; align-items: center; gap: 4px; pointer-events: none; white-space: nowrap; transform: translateY(0); }
    .rp-mk i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, #3A6EA5); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); flex: 0 0 10px; }
    .rp-mk span { font-size: 11px; font-weight: 700; color: #1A1A1A; background: rgba(255,255,255,.92); padding: 1px 5px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); line-height: 1.35; }
    .rp-mk.sm i { width: 6px; height: 6px; border-width: 1px; flex-basis: 6px; }
    .rp-mk.sm span { font-size: 9.5px; padding: 0 3px; font-weight: 600; }
    .rp-mk.lbl-only i { display: none; }
    .rp-mk.apt i { width: 14px; height: 14px; flex-basis: 14px; box-shadow: 0 0 0 3px rgba(34,70,58,.25); }
    .rp-mk.apt span { background: #22463A; color: #fff; font-size: 12px; box-shadow: none; }
    .rp-scope .rp-head { padding-bottom: 14px; border-bottom: 1px solid #EEF0F3; margin-bottom: 8px; }
    .rp-scope .rp-role { font-size: .6875rem; font-weight: 800; letter-spacing: .08em; color: #22463A; text-transform: uppercase; }
    .rp-scope .rp-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 4px 0 6px; }
    .rp-scope .rp-sub { font-size: .875rem; color: #5A6061; line-height: 1.6; }
    .rp-scope .rp-sub b { color: #1A1A1A; }
    .rp-scope .rp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: .8125rem; }
    .rp-scope .rp-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #E2E6E4; background: #FFFFFF; color: #1B3A30; font-weight: 700; font-size: .8125rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
    .rp-scope .rp-pill:hover { border-color: #767676; }
    .rp-scope .rp-pill.on { background: #22463A; border-color: #22463A; color: #fff; }
    .rp-scope .rp-pill input { width: 14px; height: 14px; accent-color: #22463A; }
    .rp-scope .rp-sec { padding: 22px 0 14px; border-bottom: 1px solid #EEF0F3; }
    .rp-scope .rp-sec:last-child { border-bottom: 0; }
    .rp-scope .rp-sec h2 { display: flex; align-items: baseline; gap: 10px; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; }
    .rp-scope .rp-sec h2 small { font-size: .75rem; font-weight: 600; color: #767676; }
    .rp-scope .rp-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #22463A; color: #fff; font-size: .75rem; font-weight: 800; }
    .rp-scope .rp-h3 { font-size: .875rem; font-weight: 800; color: #1B3A30; margin: 16px 0 8px; }
    /* 키·값 = 라벨 위 · 값 아래 카드(운영자 15차: 넘침·어색한 줄바꿈 없이, 공간 여유). 보조 정보는 값 아래 흐린 줄 */
    /* 카드도 표와 같은 칸(--col · 아래 칸 너비 시스템) — 긴 값(.kv-long · 소재지·시공)은 2칸, 남는 오른쪽은 비운다 */
    .rp-scope .rp-kv { display: grid; grid-template-columns: repeat(auto-fill, var(--col)); gap: 10px var(--gap); margin: 0; }
    .rp-scope .rp-kv > div.kv-long { grid-column: span 2; }
    .rp-scope .rp-kv > div { display: flex; flex-direction: column; gap: 4px; padding: 11px 14px 12px; border: 1px solid #EEF0F3; border-radius: 12px; background: #FAFAFA; min-width: 0; }
    .rp-scope .rp-kv dt { color: #5A6061; font-size: .75rem; font-weight: 700; letter-spacing: -.005em; }
    .rp-scope .rp-kv dd { margin: 0; font-size: .9375rem; line-height: 1.5; font-variant-numeric: tabular-nums; word-break: keep-all; overflow-wrap: anywhere; color: #1A1A1A; }
    .rp-scope .rp-kv dd .rp-dim { display: block; font-size: .78125rem; line-height: 1.45; margin-top: 1px; }
    .rp-scope .rp-kv dd .rp-dim.rp-inl { display: inline; }   /* 값 뒤 흐린 꼬리(분양 잠정 행정동 C10) — 줄을 바꾸지 않는다 */
    .rp-scope .rp-kv dd b { font-weight: 800; }
    .rp-scope .rp-kv dd br { display: none; }
    /* 값 아래 보조 줄 — 요인 표에서는 "무엇까지의 값인가"(역명·시설명)를 여기 싣는다 */
    .rp-scope .rp-t td .rp-line { display: block; font-size: .75rem; color: #767676; font-weight: 500; margin-top: 2px; line-height: 1.45; }
    .rp-scope .rp-kv dd .rp-line { display: block; font-size: .8125rem; color: #5A6061; margin-top: 3px; }
    .rp-scope .rp-kv dd .rp-line b { font-weight: 800; color: #1A1A1A; }
    .rp-scope .rp-det { margin: 6px 0 10px; }
    .rp-scope .rp-det .rp-t { font-size: .75rem; }
    .rp-scope .rp-kv2 { grid-template-columns: repeat(auto-fill, calc(var(--col) * 2 + var(--gap))); }   /* 설명이 긴 값(자금 결과·재현) = 2칸 카드 */
    .rp-scope .rp-kv2 > div.kv-long { grid-column: auto; }
    .rp-scope .rp-na { color: #B5BBB8; font-weight: 500; font-size: .8125rem; }
    .rp-scope .rp-sub { display: block; color: #999999; font-weight: 500; font-size: .75rem; line-height: 1.3; }
    .rp-scope .rp-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 6px; }
    /* 드래그 가로 스크롤(2026-09-15 운영자): 넘치는 표는 잡아 끌 수 있다(utils/drag-scroll.js bindDragScrollIn · 안 넘치면 글자 선택 그대로).
       `.sx-on` 은 scroll-arrows.js 가 넘칠 때만 켠다 → 그때만 잡는 손 커서. */
    .rp-scope .sx.sx-on > .rp-tw, .rp-scope .sx.sx-on > .cp-tw { cursor: grab; }
    .rp-scope .sx > .rp-tw.dragging, .rp-scope .sx > .cp-tw.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
    /* ── 칸 너비 시스템(T4-2·T5-2 재작업 · 2026-09-15 운영자 재지시 "1개 컬럼 너비를 통일 · 우측이 남으면 비워라") ──
       보고서·비교의 **모든 표 열·카드·폼 칸이 한 칸(--col)** 이다(첫 열도 같은 칸). 표 폭 = 칸 수 × 칸 · 오른쪽이 남으면 비우고
       넘치면 가로 스크롤(화살표 + 드래그). 반응형은 뷰포트 기준 3단(1440+ / 1024~1439 / 768~1023) · 모바일은 아래 재단 규칙 그대로.
       ⚠ 1차 커밋(09-15 06:32)이 화면에 안 나타난 원인: `.rp-scope` 가 `.xgrid` 라 grid.css 의 `.xgrid table { min-width:100% }` 가
          이 표까지 덮어 **표가 매번 래퍼 폭으로 늘어났다**(3열 표 472/315/315 · 6열 표 254/170 — 표마다 열 폭이 달랐다). `min-width:0` 으로 끊는다. */
    .rp-scope { --col: 228px; --gap: 14px; }
    @media (max-width: 1439px) { .rp-scope { --col: 196px; } }
    @media (max-width: 1023px) { .rp-scope { --col: 168px; } }
    @media (max-width: 767px)  { .rp-scope { --col: 124px; } }
    .rp-scope .rp-t { width: calc(var(--col) * var(--n, 2)); min-width: 0; max-width: none; table-layout: fixed; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
    .rp-scope .rp-t th, .rp-scope .rp-t td { width: var(--col); }
    @media (max-width: 767px) { .rp-scope .rp-t.rp-stack { width: 100%; table-layout: auto; } .rp-scope .rp-t.rp-stack th, .rp-scope .rp-t.rp-stack td { width: auto; } }
    .rp-scope .rp-t th { text-align: left; font-weight: 700; color: #5A6061; font-size: .75rem; padding: 8px 14px 8px 0; border-bottom: 1px solid #E2E6E4; white-space: nowrap; }
    .rp-scope .rp-t td { padding: 9px 14px 9px 0; border-bottom: 1px solid #EEF0F3; vertical-align: top; line-height: 1.5; }
    .rp-scope .rp-t th:last-child, .rp-scope .rp-t td:last-child { padding-right: 0; }
    /* 2026-09-15 운영자: 격자 **세로줄** + **열 머리 가운데 정렬**(③ 보고서 · ④ 비교 공통 문법).
       세로줄은 열 사이에만(바깥 테두리 없음 — 가로줄과 같은 문법 · 묶음 머리(colspan)는 한 칸이라 줄 없음).
       줄 뒤 칸은 왼쪽 여백 12px 을 둬 글자가 줄에 붙지 않게 · 첫 열 본문은 절 왼끝에 그대로(여백 0).
       열 머리는 양옆 여백을 같게(12/12) 해야 칸의 정중앙에 온다(첫/끝 열의 0 여백 예외를 머리에서만 푼다).
       모바일 2줄 격자(.rp-stack)는 아래 미디어 블록이 border:0 · padding:0 으로 되돌린다(세로줄 없음 = 표가 아니라 격자). */
    .rp-scope .rp-t th:not(:last-child), .rp-scope .rp-t td:not(:last-child) { border-right: 1px solid #EEF0F3; }
    .rp-scope .rp-t th:not(:first-child), .rp-scope .rp-t td:not(:first-child) { padding-left: 12px; }
    .rp-scope .rp-t thead th, .rp-scope .rp-t thead th.n,
    .rp-scope .rp-t thead th:first-child, .rp-scope .rp-t thead th:last-child { text-align: center; padding-left: 12px; padding-right: 12px; }
    /* P-1 전면 적용 — **칸은 줄을 바꾸고, 토큰은 안 바꾼다.** 숫자열을 통째로 nowrap 으로 두면
       긴 값(요인 JSONB · "5억 2천 148건/12개월")이 줄을 못 바꿔 **옆 칸 위로 그려진다**
       (데스크톱 실측 16칸 · 모바일에서 운영자가 캡처한 그 증상). 금액·거리·순위 같은 한 덩어리는
       `won()`·`dist()`·`profileTxt()` 가 이미 `.tok` 으로 감싸 두었다. */
    .rp-scope .rp-t th.n, .rp-scope .rp-t td.n { text-align: right; white-space: normal; }
    .rp-scope .rp-t td .rp-dim { white-space: nowrap; }
    .rp-scope .rp-t tr:last-child td { border-bottom: 0; }
    /* P-1 — 칸은 어절에서 줄을 바꾸고, 한 덩어리는 안 바꾼다.
       ⛔ 한 덩어리를 `<span>` 으로 묶지 말 것 — `won()`·`dist()` 는 `bsdFact()` 처럼 **평문으로
          조합돼 `esc()` 를 타는 자리**가 있어 마크업이 화면에 그대로 보였다(2026-09-11 실기기).
          지금은 줄바꿈 없는 공백(NBSP)으로 묶는다(pick-report.js `nb()`).
       ⚠ 폭과 무관하게 적용한다 — 데스크톱(1440)에서도 눌린 칸에서 침범이 16건 났었다. */
    .rp-scope .rp-t th, .rp-scope .rp-t td { word-break: keep-all; overflow-wrap: anywhere; }
    /* G-2 — 묶음 머리 행(§1 핵심 수치의 규모·가격·입지·학군·생활). 22행을 스캔 단위 5개로 나눈다 */
    .rp-scope .rp-t tr.rp-grow th { padding: 15px 0 5px; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; color: #22463A; border-bottom: 1px solid #E2E6E4; }
    .rp-scope .rp-t tbody tr.rp-grow:first-child th { padding-top: 2px; }
    /* G-4 — 요인 표의 중분류 행을 묶음 머리로(소분류는 그 아래 들여쓰기) */
    .rp-scope .rp-t tr.rp-mid td { background: #F7F8F8; }
    .rp-scope .rp-ind { display: inline-block; padding-left: 14px; }
    .rp-scope .rp-note { font-size: .75rem; color: #767676; line-height: 1.6; margin: 8px 0 0; }
    .rp-scope .rp-dim { color: #999999; font-weight: 500; }
    .rp-scope .rp-warn { color: #A9711F; font-weight: 700; }
    .rp-scope .rp-a { color: #1B3A30; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
    .rp-scope .rp-ul { margin: 0; padding-left: 18px; font-size: .8125rem; color: #5A6061; line-height: 1.65; }
    .rp-scope .rp-disc { font-size: .75rem; color: #767676; line-height: 1.65; margin: 0; }
    .rp-scope .rp-hr { border: 0; border-top: 1px dashed #E2E6E4; margin: 10px 0; }
    .rp-scope .rp-det summary { cursor: pointer; font-size: .75rem; color: #1B3A30; font-weight: 700; margin-top: 4px; }
    .rp-scope .rp-det[open] { display: block; margin: 6px 0; }
    .rp-scope .rp-cmp { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
    .rp-scope .rp-cmp input { width: 14px; height: 14px; accent-color: #22463A; }
    .rp-scope .rp-form { display: grid; grid-template-columns: repeat(auto-fill, var(--col)); gap: 10px var(--gap); margin: 0 0 12px; padding: 14px; border: 1px solid #EEF0F3; border-radius: 14px; background: #FAFAFA; }
    .rp-scope .rp-form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .75rem; font-weight: 700; color: #5A6061; }
    .rp-scope .rp-form input:not([type="checkbox"]), .rp-scope .rp-form select { width: 100%; min-width: 0; box-sizing: border-box; height: 38px; border: 1px solid #E2E6E4; border-radius: 10px; padding: 0 10px; font-size: 1rem; /* 16px — iOS 포커스 확대 없이(확대 차단 해제 선행 3/9) */ font-variant-numeric: tabular-nums; background: #FFFFFF; color: #1A1A1A; }
    .rp-scope .rp-form input:focus, .rp-scope .rp-form select:focus { outline: 2px solid #22463A; outline-offset: 1px; }
    .rp-scope .rp-form .rp-chk { flex-direction: row; align-items: center; align-self: end; height: 38px; gap: 8px; }
    .rp-scope .rp-form .rp-chk input { width: 16px; height: 16px; accent-color: #22463A; }
    /* ── 데이터 상태 카드 · 절 머리 완전성 배지 · 원천 미적재 고지 (품질개선 PART ①) ──
         유료 표면의 정직 계약: 결손·추정·미적재를 숨기지 않고 첫 화면에 센다. 경고색이 아니라 정보색. */
    .rp-scope .rp-status { margin: 14px 0 4px; padding: 14px 16px; border: 1px solid #E2E6E4; border-radius: 14px; background: #FAFAFA; }
    .rp-scope .rp-st-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: .9375rem; }
    .rp-scope .rp-st-head span { font-size: .8125rem; color: #5A6061; font-weight: 500; }
    .rp-scope .rp-st-body { display: grid; grid-template-columns: repeat(auto-fill, calc(var(--col) * 2 + var(--gap))); gap: 8px var(--gap); margin: 10px 0 0; }
    .rp-scope .rp-st-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .rp-scope .rp-st-row dt { font-size: .75rem; font-weight: 800; letter-spacing: -.005em; }
    .rp-scope .rp-st-row dt.miss { color: #767676; }
    .rp-scope .rp-st-row dt.est { color: #A9711F; }
    .rp-scope .rp-st-row dt.stale { color: #3A6EA5; }
    .rp-scope .rp-st-row dt.gap { color: #C44040; }
    .rp-scope .rp-st-row dd { margin: 0; font-size: .8125rem; line-height: 1.55; color: #1A1A1A; word-break: keep-all; overflow-wrap: anywhere; }
    .rp-scope .rp-asof { margin-left: auto; font-size: .6875rem; font-weight: 600; color: #767676; white-space: nowrap; }
    .rp-scope .rp-asof.warn { color: #A9711F; font-weight: 700; }
    .rp-scope .rp-asof + .rp-comp { margin-left: 8px; }
    .rp-scope .rp-comp { margin-left: auto; font-size: .6875rem; font-weight: 700; color: #767676; background: #F2F4F4; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
    .rp-scope .rp-comp.warn { background: #FBF3E7; color: #7A5316; }
    .rp-scope .rp-gap { background: #FBF3E7; border-radius: 10px; padding: 9px 12px; color: #7A5316; }
    .rp-scope .rp-gap b { color: #5C3F10; }
    .rp-scope .rp-sec h2 { flex-wrap: wrap; }
    .rp-scope .rp-load { padding: 60px 0; text-align: center; color: #767676; font-size: .9375rem; }
    /* T4-9·T4-10·T5-3(2026-09-15): 정적 SVG 그래프 블록 — 표 위 · 인쇄 그대로 */
    .rp-scope .rp-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 22px; margin: 4px 0 14px; }
    .rp-scope .rp-chart { margin: 0 0 10px; }
    .rp-scope .rp-chart figcaption { font-size: .8125rem; color: #1A1A1A; margin-bottom: 4px; }
    .rp-scope .rp-chart figcaption b { font-weight: 800; }
    .rp-scope .rp-chart-svg svg { width: 100%; height: auto; display: block; }
    .rp-scope .rp-chart-lg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: .75rem; color: #5A6061; }
    .rp-scope .rp-chart-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
    /* T4-7: 재현 계산 절(상위 4 안에서) — 머리 바로 아래 · 값 카드 3장 */
    .rp-scope .rp-repro { border: 1px solid #DCE9E1; border-radius: 16px; padding: 14px 18px 6px; margin: 14px 0 18px; background: #FBFDFC; }
    .rp-scope .rp-repro h2 .rp-n { background: #22463A; color: #FFFFFF; font-size: .625rem; letter-spacing: .04em; }
    .rp-scope .rp-repro-kv { grid-template-columns: 1fr; }
    .rp-scope .rp-repro-kv dd { font-size: .875rem; line-height: 1.6; }
    .rp-scope .rp-link { color: #22463A; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
    /* T4-1·T5-1(2026-09-15): 로딩 스켈레톤 — 절 골격·표 골격 + 진행 표시 */
    .rp-scope .rp-skel { padding: 18px 0 60px; }
    .rp-scope .rp-skel .sk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: .875rem; color: #5A6061; }
    .rp-scope .rp-skel .sk-spin { width: 16px; height: 16px; border: 2px solid #E2E6E4; border-top-color: #22463A; border-radius: 50%; animation: sk-rot .8s linear infinite; flex: 0 0 auto; }
    .rp-scope .rp-skel .sk-elapsed { margin-left: auto; font-variant-numeric: tabular-nums; color: #999999; font-size: .8125rem; }
    .rp-scope .rp-skel .sk-title { margin-bottom: 22px; }
    .rp-scope .rp-skel .sk-title .sk-line { height: 22px; margin-bottom: 8px; }
    .rp-scope .rp-skel .sk-sec { padding: 14px 0 16px; border-top: 1px solid #EEF0F3; }
    .rp-scope .rp-skel .sk-h { display: block; width: 180px; height: 14px; border-radius: 6px; margin-bottom: 12px; }
    .rp-scope .rp-skel .sk-line { display: block; height: 11px; border-radius: 6px; margin-bottom: 8px; }
    .rp-scope .rp-skel .sk-kv { display: grid; grid-template-columns: repeat(auto-fill, var(--col)); gap: 10px var(--gap); margin-top: 10px; }
    .rp-scope .rp-skel .sk-kv .sk-line { height: 52px; border-radius: 12px; margin: 0; }
    .rp-scope .rp-skel .sk-table { display: grid; gap: 6px; }
    .rp-scope .rp-skel .sk-row { display: grid; grid-template-columns: repeat(auto-fill, calc(var(--col) - 6px)); gap: 6px; }
    .rp-scope .rp-skel .sk-cell { display: block; height: 30px; border-radius: 6px; }
    .rp-scope .rp-skel .sk-row.head .sk-cell { height: 40px; }
    .rp-scope .rp-skel .sk-h, .rp-scope .rp-skel .sk-line, .rp-scope .rp-skel .sk-cell, .rp-scope .rp-skel .sk-col { background: linear-gradient(90deg, #F2F4F4 0%, #FAFAFA 40%, #F2F4F4 80%); background-size: 200% 100%; animation: sk-shimmer 1.4s ease-in-out infinite; }
    @keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    @keyframes sk-rot { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .rp-scope .rp-skel .sk-h, .rp-scope .rp-skel .sk-line, .rp-scope .rp-skel .sk-cell, .rp-scope .rp-skel .sk-spin { animation: none; } }
    @media (max-width: 1023px) {
      .rp-scope .rp-row.has-fig:not(.expanded) { grid-template-columns: 1fr; gap: 0; }
      .rp-scope .rp-row > .rp-fig { position: static; order: 1; margin: 6px 0 10px; }
      .rp-scope .rp-row .rp-body { order: 2; }
      .rp-scope .rp-map { aspect-ratio: 16 / 10; }
    }
    /* ══ 모바일 재단 (2026-09-10 모바일 가독성 검토 · 운영자 승인) ══════════════════════
       실측 문제 셋: ① 표가 화면 폭에 눌리면서 nowrap 값이 **옆 칸을 침범**했고(§6 요인 · §4 면적별)
       ② 한글이 글자 단위로 꺾였으며 ③ 키·값 카드가 1열이라 값 하나에 한 화면의 1/10 을 썼다
       (문서 높이 64,335px = 약 80화면). 접거나 줄이지 않는다 — 전량 그대로 두고 치수만 재단한다. */
    @media (max-width: 767px) {
      .rp-scope .rp { padding-top: 14px; padding-bottom: 32px; }
      /* P-4 — 키·값 카드 2열. 긴 값(소재지·좌표·시공·공용면적…)만 전폭으로 내려온다. */
      .rp-scope .rp-kv, .rp-scope .rp-kv2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
      .rp-scope .rp-kv > div { padding: 9px 11px 10px; }
      .rp-scope .rp-kv > div.kv-long { grid-column: 1 / -1; }
      .rp-scope .rp-kv dd { font-size: .875rem; }
      .rp-scope .rp-form { grid-template-columns: 1fr 1fr; }

      /* P-2 — 표는 눌리지 않는다. 열은 내용 폭을 지키고, 넘치면 래퍼가 옆으로 스크롤한다(화살표 P-7).
         첫 열은 sticky 라 가로로 밀어도 무슨 행인지 남는다. */
      .rp-scope .rp-t:not(.rp-stack) { width: max-content; min-width: 100%; }
      .rp-scope .rp-t:not(.rp-stack) th, .rp-scope .rp-t:not(.rp-stack) td { padding-right: 12px; }
      .rp-scope .rp-t:not(.rp-stack) th:first-child,
      .rp-scope .rp-t:not(.rp-stack) td:first-child {
        position: sticky; left: 0; z-index: 1; background: #FFFFFF; width: 168px; min-width: 88px; padding-right: 10px;   /* 모바일 예외: 항목 열만 168(라벨 2줄 이내) · 값 열은 --col 124 */
      }
      .rp-scope .rp-t:not(.rp-stack) td.n, .rp-scope .rp-t:not(.rp-stack) th.n { min-width: 66px; }

      /* P-5 — 3열 이상 표는 2줄 격자로 편다: 1줄 = 라벨 | 값 · 2줄 = 나머지 열(열 이름을 앞에 붙여).
         열 순서는 `--o`(order)로 바꾼다 — DOM 순서는 데스크톱 표 그대로 둬야 한다. */
      .rp-scope .rp-t.rp-stack { width: 100%; min-width: 0; display: block; }
      .rp-scope .rp-t.rp-stack thead { display: none; }
      .rp-scope .rp-t.rp-stack tbody { display: block; }
      /* ⚠ 값 열을 `auto` 로만 두면 **긴 값이 라벨 열을 0 으로 깔아뭉갠다**(요인 JSONB 값 실측 452px).
         라벨에 최소 40% 를 보장한다. */
      .rp-scope .rp-t.rp-stack tr { display: grid; grid-template-columns: minmax(40%, 1fr) minmax(0, auto); gap: 1px 10px; padding: 9px 0; border-bottom: 1px solid #EEF0F3; }
      .rp-scope .rp-t.rp-stack tr:last-child { border-bottom: 0; }
      /* ⚠ `td.n` 의 nowrap 을 여기서 푼다 — 안 풀면 긴 값이 줄을 못 바꿔 칸 밖으로 그려진다(침범의 원인) */
      .rp-scope .rp-t.rp-stack td { display: block; padding: 0; border: 0; order: var(--o, 0); min-width: 0; white-space: normal; }
      .rp-scope .rp-t.rp-stack td.sk { font-weight: 700; }
      .rp-scope .rp-t.rp-stack td.sv { text-align: left; }
      .rp-scope .rp-t.rp-stack td.sv.n { text-align: right; }
      .rp-scope .rp-t.rp-stack td.sox { grid-column: 1 / -1; font-size: .75rem; line-height: 1.5; color: #767676; }
      .rp-scope .rp-t.rp-stack td.sox:empty { display: none; }
      .rp-scope .rp-t.rp-stack td.sox::before { content: attr(data-h) " "; color: #999999; font-weight: 700; }
      .rp-scope .rp-t.rp-stack tr.rp-grow { display: block; padding: 14px 0 4px; border-bottom: 1px solid #E2E6E4; }
      .rp-scope .rp-t.rp-stack tr.rp-grow th { display: block; padding: 0; border: 0; }
      .rp-scope .rp-t.rp-stack tr.rp-mid { background: #F7F8F8; padding: 9px 8px; border-radius: 8px; margin-top: 8px; }
      .rp-scope .rp-t.rp-stack tr.rp-mid td { background: transparent; }
      .rp-scope .rp-t.rp-stack .rp-ind { padding-left: 0; }
      .rp-scope .rp-t.rp-stack td .rp-dim { white-space: normal; }
    }
    /* ── ④ 비교(04_구현설계_Phase3_비교 · 2026-09-06 운영자 2차 개정) — 행 = 항목 · 열 = 단지. 머리는 ③과 같은 .rp-head(제목 = 단지명들 · 열 색 점),
         그 아래 단지명만 있는 고정 열 머리(.cp-head). 열 추가/제거 없음(결과에서). 표 첫 열은 모바일 가로 스크롤에서 고정. ── */
    .rp-scope .cp { max-width: none; }
    .rp-scope .cp-title { display: flex; flex-wrap: wrap; gap: 6px 26px; }
    .rp-scope .cp-tn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
    .rp-scope .cp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: 0 0 10px; display: inline-block; }
    .rp-scope .cp-tn .cp-dot { width: 14px; height: 14px; flex-basis: 14px; }
    .rp-scope .rp-actions .rp-pill .cp-dot { width: 9px; height: 9px; flex-basis: 9px; }
    /* 고정 열 머리 = 표와 같은 칸(--col) — 종전 `240px + 1fr×n` 은 표(232px 열)와 어긋나 셋째 단지명이 그 열 위에 없었다(2026-09-15 실측 452 vs 232) */
    .rp-scope .cp-head { position: sticky; top: var(--chrome-h); z-index: 7; display: grid; grid-template-columns: var(--col) repeat(var(--cp-n, 4), var(--col)); gap: 0; padding: 8px 0; margin-top: 8px; background: #FFFFFF; border-bottom: 1px solid #E2E6E4; }
    /* 2026-09-15 운영자: 머리 명칭은 칸 가운데 · 칸 사이 세로줄(아래 표 .cp-t 와 같은 줄 — 열 폭이 같은 --col 이라 줄이 이어진다) */
    .rp-scope .cp-hlbl { display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: #767676; border-right: 1px solid #EEF0F3; }
    .rp-scope .cp-hcol { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 0 10px; font-size: .9375rem; font-weight: 800; letter-spacing: -.01em; color: #1A1A1A; text-decoration: none; }
    .rp-scope .cp-hcol:not(:last-child) { border-right: 1px solid #EEF0F3; }
    .rp-scope .cp-hcol span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* 동명 단지 짧은 구분자(2026-10-01) — 알약·열 머리. 이름 뒤 흐린 보통 굵기 · 넘치면 말줄임(이름이 먼저 보인다). */
    .rp-scope .cp-nd { margin-left: 2px; font-size: .85em; font-weight: 500; color: #767676; letter-spacing: 0; }
    .rp-scope .rp-pill .cp-pn { display: inline-block; max-width: 13em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
    .rp-scope .cp-hcol:hover span { text-decoration: underline; text-underline-offset: 3px; }
    .rp-scope .cp-sec { padding: 22px 0 14px; border-bottom: 1px solid #EEF0F3; }
    .rp-scope .cp-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 8px; }
    /* T5-2 재작업(2026-09-15): 비교표도 같은 칸 — 행 머리 1칸 + 단지마다 1칸(--col). 열이 적으면 오른쪽을 비운다.
       열 폭은 <colgroup> 이 정한다 — 첫 행이 묶음 머리(colspan)인 표(§1·§8)는 첫 행 셀에서 폭을 못 읽어 열이 균등 분배됐다(실측 234×4). */
    .rp-scope .cp-t { width: calc(var(--col) * (var(--cp-n, 4) + 1)); min-width: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .8125rem; font-variant-numeric: tabular-nums; }
    .rp-scope .cp-t col { width: var(--col); }
    .rp-scope .cp-t th, .rp-scope .cp-t td { padding: 9px 12px 9px 0; border-bottom: 1px solid #EEF0F3; vertical-align: top; line-height: 1.5; text-align: left; }
    .rp-scope .cp-t th[scope="row"] { width: var(--col); font-weight: 700; color: #5A6061; font-size: .8125rem; position: sticky; left: 0; background: #FFFFFF; z-index: 1; padding-right: 14px; word-break: keep-all; overflow-wrap: anywhere; }
    .rp-scope .cp-t td { width: var(--col); color: #1A1A1A; font-size: .875rem; word-break: keep-all; overflow-wrap: anywhere; padding-left: 12px; }
    /* 2026-09-15 운영자: 격자 세로줄 — 행 머리(sticky · 흰 배경이라 가로로 밀어도 줄이 따라온다)와 단지 열 사이 · 단지 열 사이.
       마지막 열 · 묶음 머리(colspan) · 'n곳 공통' 합친 칸(마지막 칸)엔 없음. */
    .rp-scope .cp-t th:not(:last-child), .rp-scope .cp-t td:not(:last-child) { border-right: 1px solid #EEF0F3; }
    .rp-scope .cp-t td b { font-weight: 800; }
    .rp-scope .cp-t tr.cp-cat th { padding: 16px 0 6px; font-size: .8125rem; font-weight: 800; color: #1B3A30; border-bottom: 1px solid #E2E6E4; position: static; }
    /* 라벨만 제자리에 — 표를 가로로 밀어도 "지금 무슨 묶음인가"가 남는다.
       ⚠ **`max-width` 가 핵심이다.** sticky 는 제 containing block(여기서는 표 폭짜리 `th`) 안에서만
          움직이므로, 라벨 상자가 스크롤 폭보다 넓으면 오른쪽 끝에 먼저 닿아 **중간에서 멈춘다**
          (실측: 폭 400 라벨이 347 스크롤포트에서 176px 만 따라오고 앞부분이 잘렸다).
          보이는 폭으로 상자를 묶고 줄바꿈을 허용하면 끝까지 따라온다. */
    .rp-scope .cp-t tr.cp-cat th .cp-catl,
    .rp-scope .rp-t tr.rp-grow th > span {
      position: sticky; left: 0; display: inline-block; background: #FFFFFF;
      max-width: calc(100vw - 32px); white-space: normal; padding-right: 8px;
    }
    .rp-scope .cp-t tr.cp-sub th, .rp-scope .cp-t tr.cp-sub td { background: #FAFAFA; font-size: .8125rem; }
    .rp-scope .cp-t td.cp-same { color: #5A6061; }   /* 모든 열 같은 값 → 한 칸 + 'n곳 공통' */
    .rp-scope .cp-mark { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #F2F4F4; color: #5A6061; font-size: .6875rem; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
    .rp-scope .cp-line { display: block; font-size: .75rem; color: #767676; margin-top: 2px; line-height: 1.45; }
    .rp-scope .cp-line b { color: #1A1A1A; font-weight: 800; }
    .rp-scope .cp-status { display: block; font-size: .75rem; font-weight: 700; color: #1B3A30; margin-top: 2px; }
    .rp-scope .cp-lbl-note { display: block; font-size: .6875rem; color: #999999; font-weight: 500; }
    /* 열별 목록 셀(동·거래·역·학교·정비사업·이벤트 …) */
    .rp-scope .cp-ul { margin: 0; padding: 0; list-style: none; font-size: .8125rem; line-height: 1.5; }
    .rp-scope .cp-ul li { padding: 3px 0; border-bottom: 1px dashed #EEF0F3; }
    .rp-scope .cp-ul li:last-child { border-bottom: 0; }
    /* ⚠ 고정 130px 이면 4곳 비교의 120px 열을 넘어 옆 칸을 침범한다(모바일·태블릿 실측) */
    .rp-scope .cp-price { width: 100%; max-width: 130px; min-width: 0; box-sizing: border-box; height: 34px; border: 1px solid #E2E6E4; border-radius: 8px; padding: 0 8px; font-size: .875rem; font-variant-numeric: tabular-nums; }
    .rp-scope .cp-form { margin-bottom: 8px; }
    /* 지도 — 비교는 **확대가 기본 · 축소 없음**(운영자 2차). wide = 다단지 한 장(전폭) · per = 열별 단지 지도(n열 그리드). 끌기·줌 버튼·휠 줌(utils/map-wheel.js 규칙) */
    .rp-scope .cp-figs { display: grid; gap: 16px; margin: 12px 0 18px; }
    .rp-scope .cp-figs.wide { grid-template-columns: 1fr; }
    .rp-scope .cp-figs.per { grid-template-columns: repeat(var(--cp-n, 4), minmax(0, 1fr)); }
    .rp-scope .cp-figs .rp-map { pointer-events: auto; }
    .rp-scope .cp-figs.wide .rp-map { aspect-ratio: 21 / 9; max-height: 640px; }
    .rp-scope .cp-figs.per .rp-map { aspect-ratio: 4 / 3; }
    .rp-scope .cp-fig figcaption .cp-dot { margin-right: 7px; vertical-align: -1px; }
    .rp-scope .cp-fig figcaption b { margin-right: 8px; }
    .rp-mk.apt span { background: var(--c, #22463A); }
    @media (max-width: 1279px) {
      .rp-scope .cp-figs.per { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 1023px) {
      .rp-scope .cp-figs.wide .rp-map { aspect-ratio: 16 / 10; }
    }
    @media (max-width: 767px) {
      .rp-scope .cp-head { gap: 8px; }
      .rp-scope .cp-hcol { font-size: .8125rem; }
      /* M-14 — 고정 640px 이라 2곳 비교에서도 첫 열이 반만 보이고 둘째 열은 화면 밖이었다.
         열 수에 맞춰 잡는다: 2곳 = 110 + 2×130 = 370 → 375 화면에서 가로 스크롤 0. */
      .rp-scope .cp-t th[scope="row"], .rp-scope .cp-t col:first-child { width: 96px; }
      .rp-scope .cp-t { min-width: calc(96px + var(--cp-n, 4) * 120px); }   /* 2곳 = 336 ≤ 본문 347 */
      .rp-scope .cp-head { grid-template-columns: repeat(var(--cp-n, 4), minmax(0, 1fr)); }
      .rp-scope .cp-hlbl { display: none; }
      .rp-scope .cp-figs.per { grid-template-columns: 1fr; }
      .rp-scope .cp-figs .rp-map { pointer-events: none; }   /* 모바일: 지도 위에서도 페이지 스크롤이 우선(스냅샷) */
      .rp-scope .cp-figs.wide .rp-map, .rp-scope .cp-figs.per .rp-map { aspect-ratio: 4 / 3; }
      .rp-scope .cp-title { gap: 4px 16px; }
    }
    @media print {
      .rp-scope .stepbar, .rp-scope .mm-rail, .rp-scope .rp-actions, .rp-scope .rp-mapctl, #shell-topnav, #shell-footer, #shell-bottom-tab { display: none !important; }
      .rp-scope .cp-head { position: static; }
      .rp-scope .cp-t { min-width: 0; }
      .rp-scope .cp-figs .rp-map { pointer-events: none; }
      /* 칸 고정 표는 종이 폭에 맞춘다(7열 1,596px 이 잘리지 않게) */
      .rp-scope .rp-t, .rp-scope .cp-t { width: 100% !important; }
      .rp-scope .rp-t th, .rp-scope .rp-t td, .rp-scope .cp-t th, .rp-scope .cp-t td, .rp-scope .cp-t col { width: auto; }
      .rp-scope .step { display: none; } .rp-scope .step.on { display: block; }
      .rp-scope .rp { max-width: none; padding: 0; font-size: 11px; --rp-fig-w: 240px; }
      .rp-scope .rp-row > .rp-fig { position: static; }
      .rp-scope .rp-row.has-fig:not(.expanded) { display: block; }
      .rp-scope .rp-sec { break-inside: auto; page-break-inside: auto; }
      .rp-scope .rp-sec h2 { break-after: avoid; }
      .rp-scope .rp-tw { overflow: visible; }
      /* T4-4(2026-09-15): 인쇄본에서 지도 그림은 뺀다 — 카카오 타일(수십 장) 인쇄 방지 · 그래프 그림(data-chart)은 그대로 찍힌다 */
      .rp-scope .rp-fig[data-map] { display: none !important; }
      .rp-scope .rp-map { display: none !important; }
    }

/* 단지 상세 탭 인쇄(T3-8) — 헤더·다른 탭 패널을 뺀다(pick 은 위 print 블록의 stepbar·mm-rail 규칙이 같은 역할). */
@media print {
  #apt-header, .tab-panel:not(.is-active) { display: none !important; }
  .tab-panel.is-active { display: block !important; }
}
/* 개요(절 목차) 스티키 패널 — 단지 상세 「보고서」 탭 전용(운영자 2026-09-22): 우측 고정 · 내용을 가려도 됨 · 축소 모드 = 알약 한 줄.
   z-index 40 = 데스크톱 독 레이어(50)보다 아래지만 독 아이템(상단 우측 계정 y 14~42 · 하단 우측 footer)과 자리를 피한다(top 64 · 하단 96 여유). */
.rp-scope .rp-outline { position: fixed; right: 16px; top: 64px; z-index: 40; width: 220px; max-height: calc(100vh - 64px - 96px); display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid #EEF0F3; border-radius: 14px; box-shadow: 0 12px 32px -18px rgba(20,20,40,.35); overflow: hidden; }
.rp-scope .rp-ol-head { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 0 10px 0 12px; border: 0; background: #FFFFFF; color: #1A1A1A;
  font-size: .8125rem; font-weight: 800; cursor: pointer; text-align: left; flex: 0 0 auto; white-space: nowrap; }
.rp-scope .rp-ol-head:hover { background: #F7F8F8; }
.rp-scope .rp-ol-head .material-symbols-outlined { font-size: 1.125rem; color: #5A6061; }
.rp-scope .rp-ol-head .rp-ol-cur { margin-left: auto; font-weight: 600; color: #5A6061; font-variant-numeric: tabular-nums; }
.rp-scope .rp-ol-list { list-style: none; margin: 0; padding: 4px 6px 8px; overflow-y: auto; scrollbar-width: thin; border-top: 1px solid #EEF0F3; }
.rp-scope .rp-ol-it { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 9px; background: transparent; color: #5A6061;
  font-size: .8125rem; font-weight: 600; text-align: left; cursor: pointer; line-height: 1.3; }
.rp-scope .rp-ol-it:hover { background: #F2F4F4; color: #1A1A1A; }
.rp-scope .rp-ol-it[aria-current="true"] { background: #EAF1ED; color: #1B3A30; font-weight: 700; }
.rp-scope .rp-ol-it .rp-ol-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: #F2F4F4; color: #5A6061;
  font-size: .6875rem; font-weight: 800; flex: 0 0 auto; }
.rp-scope .rp-ol-it[aria-current="true"] .rp-ol-n { background: #22463A; color: #FFFFFF; }
.rp-scope .rp-ol-it .rp-ol-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 축소 모드 — 머리 한 줄만 알약으로. 카운터(현재 절/16)는 남겨 어디쯤인지 보인다 */
.rp-scope .rp-outline[data-collapsed="1"] { width: auto; max-height: none; border-radius: 999px; }
.rp-scope .rp-outline[data-collapsed="1"] .rp-ol-list { display: none; }
.rp-scope .rp-outline[data-collapsed="1"] .rp-ol-head { padding: 0 10px 0 12px; }
/* 모바일: 상단 우측은 공유·관심 버튼 자리라 **하단 우측**에 띄운다(하단 탭 바 위 · 펼치면 위로 자란다) */
@media (max-width: 767px) { .rp-scope .rp-outline { right: 10px; top: auto; bottom: 84px; width: 212px; max-height: calc(100vh - 168px); } }
@media (prefers-reduced-motion: no-preference) { .rp-scope .rp-outline { transition: width .15s ease, border-radius .15s ease; } }
@media print { .rp-scope .rp-outline { display: none !important; } }

/* ⚠ 절 앵커 스트립(.rp-nav)은 2026-09-23 제거 — 같은 일을 우측 개요 패널(.rp-outline)이 한다. 되살리지 말 것. */
.rp-scope .rp-load { padding: 40px 0; color: #5A6061; font-size: .9375rem; line-height: 1.6; }

/* /css/dock-chrome.css */
/* ════════════════════════════════════════════════════════════════
   Floating Dock Chrome — 코너 플로팅 독 (리브랜딩 v3 "The Open Canvas")
   헤더(topnav)/푸터(footer)/하단탭(bottom-tab)을 제거하고
   4코너 + 하단중앙 플로팅 독으로 chrome 재배치.

   디자인 토큰은 tailwind.config.js / app.css 와 동일 값(하드코딩):
     dock #1A1B20 · line/ghost #EEF0F3 · brand #22463A · brand-point #52A46D
     brand-crown(다크 위 accent) #6CC08A · brand-muted #8A9A95 · surface #FFF
   shadow-dock/shadow-card 는 tailwind 와 동일.

   ⚠ z-index: 코드베이스 chrome 관례(topnav/bottom-tab = z-50)에 맞춤.
     #dock-layer z-50 / #dock-pop z-51 → 모바일 의견 시트(z-60)·모달이 위를 덮음.
   ════════════════════════════════════════════════════════════════ */

:root {
  --sh-dock: 0 14px 30px -8px rgba(20, 20, 40, .50); /* tailwind: shadow-dock */
  --sh-card: 0 1px 3px rgba(20, 20, 40, .05), 0 6px 20px -10px rgba(20, 20, 40, .10); /* shadow-card */
  --m-topbar-h: 52px;     /* 모바일 상단 슬림바 높이 */
  --m-bottombar-h: 60px;  /* 모바일 하단 탭바 높이(safe-area 별도) */
  /* 상단 노치/상태바 인셋: @capacitor-community/safe-area 플러그인이 주입하는
     --safe-area-inset-top 우선, 없으면 웹뷰 env() 폴백(iOS·모바일웹·Android 15 edge-to-edge). */
  --m-sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
}

/* 인라인 SVG 아이콘(로고 막대) helper */
.dock .ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }
/* Material Symbols 글리프는 color 상속 → 부모(.nav-item/.acc-btn 등)의 색을 따른다 */
.dock .material-symbols-outlined { line-height: 1; }

/* ════════ 도크 레이어 ════════ */
/* 풀스크린 오버레이. pointer-events:none → 본문 클릭 통과, 각 독만 auto */
#dock-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.dock { position: fixed; pointer-events: auto; display: flex; align-items: center;
  transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .42s cubic-bezier(.22,1,.36,1); }

/* 모바일 상단 슬림바 배경 스트립(데스크톱 미사용). #dock-layer 내부 → opinion-full 시 함께 숨김. */
.m-topbar-bg { display: none; }
.dock.dock-zbti { display: none; }   /* 집BTI 칩 = 모바일 상단바 전용(웹은 홈 히어로 버튼) */

/* ── 터치 롱프레스 아티팩트 차단(휴대폰·커서없는 태블릿) ──
   텍스트 선택·복사, 링크 콜아웃(미리보기/새창 이동), 탭 하이라이트, 더블탭 줌 방지.
   독·팝오버는 네비게이션 chrome 이라 선택/드래그/컨텍스트 메뉴가 불필요. */
#dock-layer, #dock-pop {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.dock, .pop-card { touch-action: manipulation; }
#dock-layer a, #dock-pop a, .dock svg, .dock img { -webkit-user-drag: none; user-drag: none; }

/* 위치: 콘텐츠 가림 최소화를 위해 가장자리에 더 붙임(요구사항 1) */
.dock-logo    { top: 14px; left: 14px; }
.dock-account { top: 14px; right: 14px; background: #1A1B20; border-radius: 999px; padding: 5px; gap: 4px; flex-direction: column; box-shadow: var(--sh-dock); }
.dock-nav     { left: 50%; bottom: 18px; transform: translateX(-50%); background: #1A1B20; border-radius: 999px; padding: 7px 9px; gap: 2px; box-shadow: var(--sh-dock); }
.dock-footer  { left: 14px; bottom: 18px; }
.dock-chat    { right: 14px; bottom: 18px; }

/* ── 기본 = 최소화(개별). 해당 독에 마우스를 올리면 그 독만 awake 로 펼쳐짐 ──
   로고 독은 예외: 항상 큰 상태 + 불투명 (브랜드 상시 노출) */
.dock:not(.dock-logo) { opacity: .4; }
.dock.awake { opacity: 1; }
.dock-logo  { opacity: 1; }                                      /* 로고는 최소화하되 불투명 유지(요구사항 2) */
.dock:not(.dock-nav) { transform: scale(.58); }                  /* 로고 포함 전 코너 독 동일 축소(요구사항 2) */
.dock:not(.dock-nav).awake { transform: none; }
.dock-nav   { transform: translateX(-50%) scale(.6); }
.dock-nav.awake { transform: translateX(-50%); }
/* transform-origin 은 각 독 요소 inline style 로 지정:
   logo=top left · account=top right · nav=bottom center · footer=bottom left · chat=bottom right */

/* ── 로고 독 (인터랙션) ── */
.logo-btn { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #EEF0F3;
  box-shadow: var(--sh-card); height: 44px; padding: 0 11px; border-radius: 999px; overflow: hidden; cursor: pointer; }
.logo-mark-wrap { display: flex; flex-shrink: 0; }
.logo-mark .bar { transform-box: fill-box; transform-origin: bottom; }
.dock-logo:hover .logo-mark .bar { animation: barWave .9s ease-in-out infinite; }
.dock-logo:hover .logo-mark .bar:nth-child(1) { animation-delay: 0s; }
.dock-logo:hover .logo-mark .bar:nth-child(2) { animation-delay: .1s; }
.dock-logo:hover .logo-mark .bar:nth-child(3) { animation-delay: .2s; }
@keyframes barWave { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.18)} }
.logo-word { max-width: 0; opacity: 0; white-space: nowrap; font-weight: 700; color: #22463A; font-size: 16px;
  letter-spacing: -.02em; margin-left: -3px; transition: max-width .38s cubic-bezier(.22,1,.36,1), opacity .25s, margin .38s; }
.dock-logo:hover .logo-word { max-width: 80px; opacity: 1; margin-left: 0; }
.dock-logo.bounce .logo-btn { animation: logoPop .6s cubic-bezier(.22,1,.36,1); }
@keyframes logoPop { 0%,100%{transform:scale(1)} 40%{transform:scale(.9)} }

/* ── 계정 독 (알림 카운트 + 아바타) ── */
.acc-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #B8BCC6; background: transparent; transition: .15s; cursor: pointer; }
.acc-btn:hover { color: #fff; background: #33343C; }
.acc-count { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #C0392B; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; border: 2px solid #1A1B20; }
.acc-div { width: 20px; height: 1px; background: rgba(255,255,255,.12); }  /* 세로 독 → 가로 구분선(요구사항 3) */
.acc-avatar { width: 38px; height: 38px; border-radius: 50%; background: #33343C; color: #E7EBF2; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.16); transition: .15s; cursor: pointer; }
.acc-avatar:hover { border-color: #6CC08A; }
/* 비로그인 — 단일 로그인 아이콘(세로 독 폭에 맞춘 원형, 요구사항 3) */
.acc-login { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #B8BCC6; background: transparent; transition: .15s; cursor: pointer; }
.acc-login:hover { background: #33343C; color: #fff; }

/* ── 네비 독 (주 내비게이션) ── */
.nav-item { position: relative; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #B8BCC6; transition: .15s; }
.nav-item:hover { color: #fff; background: #33343C; }
.nav-item.active { background: #33343C; color: #6CC08A; }
.nav-label { position: absolute; bottom: calc(100% + 9px); font-size: 11px; font-weight: 600; color: #fff; background: #1A1B20;
  padding: 4px 9px; border-radius: 7px; white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none; transition: .15s; box-shadow: var(--sh-dock); }
.nav-item:hover .nav-label { opacity: 1; transform: none; }

/* ── 푸터·토론 독 (단일 원형 버튼) ── */
.footer-btn, .chat-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; background: #1A1B20; color: #E7EBF2;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-dock); transition: .15s; cursor: pointer; }
.footer-btn:hover, .chat-btn:hover { background: #33343C; }
.chat-count { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #52A46D; color: #0E2417; font-size: 11px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; border: 2px solid #1A1B20; }

/* ════════ 팝오버 (프로필 / 알림 / 푸터메뉴) ════════ */
#dock-pop { position: fixed; inset: 0; z-index: 51; pointer-events: none; }
.pop-card { position: fixed; pointer-events: auto; background: #fff; border: 1px solid #EEF0F3; border-radius: 16px;
  box-shadow: 0 18px 50px -12px rgba(20,20,40,.30); opacity: 0; transition: opacity .18s, transform .2s cubic-bezier(.22,1,.36,1); }
.pop-profile, .pop-notif { transform: translateY(-8px) scale(.98); }   /* 상단 코너 → 아래로 펼침 */
.pop-footer { transform: translateY(8px) scale(.98); }                 /* 하단 코너 → 위로 펼침 */
.pop-card.show { opacity: 1; transform: none; }

/* 프로필 메뉴 */
.pop-profile { width: 244px; padding: 6px; overflow: hidden; }
.pop-head { display: flex; gap: 10px; align-items: center; padding: 14px 12px; margin: -6px -6px 6px; background: #FAFAFA; border-bottom: 1px solid #EEF0F3; }
.pop-avatar { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid #EEF0F3; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #5A6061; }
.pop-name { font-weight: 700; font-size: 14px; }
.pop-sub { font-size: 12px; color: #767676; margin-top: 1px; }
.pop-row { display: block; width: 100%; text-align: left; padding: 11px 12px; font-size: 14px; color: #1A1A1A; border-radius: 9px; background: none; border: 0; cursor: pointer; text-decoration: none; }
.pop-row:hover { background: #F2F4F4; }
.pop-divline { border-bottom: 1px solid #EEF0F3; border-radius: 0; margin-bottom: 1px; }
.pop-danger { color: #C0392B; }
.pop-danger:hover { background: #FCECEC; }

/* 알림 패널 */
.pop-notif { width: 304px; padding: 6px; }
.pop-title { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 8px; font-weight: 700; font-size: 14px; }
.pop-readall { font-size: 12px; color: #5A6061; font-weight: 500; background: none; border: 0; cursor: pointer; }
.pop-readall:hover { color: #1A1A1A; }
.notif-list { max-height: 304px; overflow: auto; }
.notif-empty { padding: 28px 12px; text-align: center; font-size: 13px; color: #767676; }
.notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 11px; position: relative; text-decoration: none; }
.notif-item:hover { background: #F2F4F4; }
.notif-item.unread { background: rgba(34,70,58,.05); }
.notif-ic { color: #5A6061; background: #EEF0F3; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-body { min-width: 0; }
.notif-t { font-size: 13px; color: #1A1A1A; line-height: 1.35; font-weight: 500; }
.notif-sub { font-size: 12px; color: #5A6061; line-height: 1.35; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-s { font-size: 11px; color: #767676; margin-top: 3px; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: #22463A; position: absolute; right: 12px; top: 15px; }
.notif-all { display: block; text-align: center; padding: 11px; font-size: 13px; color: #22463A; font-weight: 600; border-top: 1px solid #EEF0F3; margin-top: 4px; text-decoration: none; }
.notif-all:hover { background: #FAFAFA; }

/* 푸터 메뉴 (신선도 + 링크 + 빌드) */
.pop-footer { width: 232px; padding: 6px; }
.fresh-row { display: flex; gap: 7px; align-items: center; font-size: 12px; color: #5A6061; padding: 10px 12px; }
.fresh-dot { width: 7px; height: 7px; border-radius: 50%; background: #2D8B4E; flex-shrink: 0; }  /* 비정상 시 #D48A2E */
.footer-links { display: flex; flex-direction: column; border-top: 1px solid #EEF0F3; padding-top: 4px; }
.footer-link { padding: 9px 12px; font-size: 14px; color: #1A1A1A; border-radius: 9px; text-decoration: none; }
.footer-link:hover { background: #F2F4F4; }
/* 운영 채널(SNS·앱) 이미지 버튼 행 — 브랜드 로고를 소프트 칩에 배치(흰 팝업 배경이라 브랜드색 대비 유지) */
.footer-social { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #EEF0F3; }
.social-chip { position: relative; flex: 1; height: 42px; display: flex; align-items: center; justify-content: center; background: #F7F8F9; border: 1px solid #EEF0F3; border-radius: 12px; text-decoration: none; transition: background .12s, border-color .12s, transform .12s; }
.social-chip:hover { background: #F2F4F4; border-color: #DDE1E5; transform: translateY(-1px); }
.social-chip img { display: block; width: 20px; height: 20px; }
.social-chip.is-soon { cursor: default; opacity: .55; }
.social-chip.is-soon:hover { background: #F7F8F9; border-color: #EEF0F3; transform: none; }
.social-chip.is-soon img { filter: grayscale(1); }
.social-soon { position: absolute; bottom: -5px; right: -4px; font-size: 8px; line-height: 1; background: #767676; color: #fff; padding: 2px 4px; border-radius: 6px; font-weight: 700; letter-spacing: -.02em; }
/* P3-4 글자 크기 세그먼트 (가/가/가) — active=딥그린. 컨트롤 자체는 고정크기(크롬). */
.font-scale-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px 5px; border-top: 1px solid #EEF0F3; }
.font-scale-cap { font-size: 13px; color: #5A6061; }
.font-scale-seg { display: inline-flex; background: #F2F4F4; border-radius: 999px; padding: 2px; }
.font-scale-seg button { width: 30px; height: 26px; border: none; background: transparent; color: #5A6061; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background .12s, color .12s; }
.font-scale-seg button:hover { color: #1A1A1A; }
.font-scale-seg button.is-active { background: #22463A; color: #fff; }
.footer-build { font-size: 11px; color: #767676; font-family: 'JetBrains Mono', monospace; padding: 10px 12px 6px; border-top: 1px solid #EEF0F3; margin-top: 4px; }

/* 의견 패널 자체 트리거(구 우하단 접힘 바·모바일 FAB)는 토론 독(.dock-chat)이 대체 → 숨김.
   토론 독 click → toggleOpinionPanel() 가 패널을 펼침/접힘(데스크톱)·시트 열기/닫기(모바일). */
#op-collapsed-bar, #op-fab { display: none !important; }

/* ════════ 모바일(<768px): 코너 플로팅 독 → 전통 바 ════════
   요구: 휴대폰 터치 타깃·앱 이식(Capacitor). 데스크톱(≥768) 코너 독은 불변.
   레이아웃: 상단 슬림바[더보기·로고·계정] + 하단 탭바[홈·검색·비교·이벤트·마이].
   2단계 탭(wake) 비활성(dock-chrome.js isMobile 게이트) → 한 번 탭에 즉시 동작.
   본문은 #app-root 패딩으로 바 높이만큼 인셋(솔리드 바가 콘텐츠를 가리지 않게). */
@media (max-width: 767px) {
  /* 본문 인셋 — 상단은 슬림바 높이 + 노치/상태바, 하단은 탭바 높이 + 홈 인디케이터 */
  #app-root { padding-top: calc(var(--m-topbar-h) + var(--m-sat));
    padding-bottom: calc(var(--m-bottombar-h) + env(safe-area-inset-bottom, 0px)); }

  /* 코너 독 최소화/축소 해제 — 모바일 바는 상시 노출 */
  .dock-logo, .dock-account, .dock-footer, .dock-nav, .dock-chat { opacity: 1 !important; }
  .dock-zbti { display: flex; opacity: 1 !important; }

  /* ── 상단 슬림바 ── (배경은 상태바까지 덮고, 안쪽 콘텐츠만 인셋만큼 내림) */
  .m-topbar-bg { display: block; position: fixed; top: 0; left: 0; right: 0;
    height: calc(var(--m-topbar-h) + var(--m-sat)); padding-top: var(--m-sat);
    background: #fff; border-bottom: 1px solid #EEF0F3; }

  /* 로고 = 상단 중앙, 워드마크 상시 노출 */
  .dock-logo { top: var(--m-sat); left: 50%; height: var(--m-topbar-h); transform: translateX(-50%) !important; align-items: center; }
  .dock-logo .logo-btn { height: 40px; background: transparent; border: 0; box-shadow: none; padding: 0 6px; }
  .dock-logo .logo-word { max-width: 90px; opacity: 1; margin-left: 0; }

  /* 계정 독 = 상단 우측, 가로 배치, 흰 배경 위 다크 아이콘 */
  .dock-account { top: var(--m-sat); right: 6px; bottom: auto; height: var(--m-topbar-h); flex-direction: row; align-items: center;
    background: transparent; box-shadow: none; padding: 0; gap: 2px; transform: none !important; }
  .dock-account .acc-div { display: none; }
  .acc-btn, .acc-login { color: #5A6061; }
  .acc-btn:hover, .acc-login:hover { background: #F2F4F4; color: #1A1A1A; }
  .acc-avatar { background: #EEF0F3; color: #1A1A1A; border: 0; }
  .acc-count { border-color: #fff; }

  /* 더보기(구 푸터 독) = 상단 좌측 — 사이트 메뉴/신선도(약관·개인정보·출처 접근 보존) */
  .dock-footer { top: var(--m-sat); left: 6px; right: auto; bottom: auto; height: var(--m-topbar-h); align-items: center;
    transform: none !important; }
  .footer-btn { width: 38px; height: 38px; background: transparent; box-shadow: none; color: #5A6061; }
  .footer-btn:hover { background: #F2F4F4; }

  /* 집BTI 헤더 칩 — ••• 오른쪽 고정(계정 독은 폭 가변이라 좌측 앵커) */
  .dock.dock-zbti { display: flex; }
  .dock-zbti { top: var(--m-sat); left: 48px; right: auto; bottom: auto;
    height: var(--m-topbar-h); align-items: center; transform: none !important; }
  .zbti-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 11px;
    border-radius: 999px; background: #EAF1ED; color: #1B3A30;
    font-size: 12px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; }
  .zbti-chip:active { transform: translateY(1px); }

  /* ── 하단 탭바 ── */
  .dock-nav { left: 0; right: 0; bottom: 0; width: 100%; transform: none !important; border-radius: 0;
    background: #fff; box-shadow: 0 -2px 12px -6px rgba(20,20,40,.12); border-top: 1px solid #EEF0F3;
    padding: 0; padding-bottom: env(safe-area-inset-bottom, 0px); gap: 0; justify-content: space-around; }
  /* 6탭 구성(2026-09-23 재개발 신설 + 환경 복구) — NAV 그대로라 **모바일에서 숨기는 항목이 없다**.
     `flex:1` 이라 칸 수가 바뀌어도 폭은 저절로 나뉜다. 375px 기준 칸당 ≈62px(아이콘 24 + 라벨 10px).
     ⚠ 7칸부터는 라벨이 접힌다 — 늘리려면 여기 치수를 같이 봐야 한다.
     ⚠ 종전엔 여기서 `환경`을 display:none 하고 '더보기'(MOBILE_NAV_LINKS)로 따로 복원했는데,
        같은 진입점을 두 곳에서 관리하는 구조라 한쪽만 고치면 어긋났다. 2026-08-30 제거.
     ⚠ 토론은 D-9 로 폐기 — 셀렉터를 되살리지 말 것. */
  .dock-nav .nav-item { flex: 1; flex-direction: column; gap: 3px; width: auto; height: var(--m-bottombar-h);
    border-radius: 0; color: #767676; }
  .dock-nav .nav-item:hover { background: transparent; color: #1A1A1A; }
  .dock-nav .nav-item.active { background: transparent; color: #22463A; }
  .dock-nav .nav-item .material-symbols-outlined { font-size: 24px; }
  .dock-nav .nav-item.active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
  .dock-nav .nav-label { position: static; opacity: 1; transform: none; background: transparent; color: inherit;
    box-shadow: none; padding: 0; font-size: 10px; font-weight: 600; letter-spacing: -.01em; }

  /* 토론 FAB = 하단바 위로 띄움 */
  .dock-chat { right: 14px; bottom: calc(var(--m-bottombar-h) + env(safe-area-inset-bottom, 0px) + 12px);
    transform: none !important; }

  /* 팝오버 폭 보정 */
  .pop-card { max-width: calc(100vw - 24px); }
  .pop-notif { width: min(304px, calc(100vw - 24px)); }

  /* P1-5: 하단탭서 숨긴 환경·토론을 '더보기' 메뉴 상단에 모바일 전용 진입점으로 복원 */
}

/* 모바일 바텀시트 모달(<640=sm 미만, components/modal.js items-end): 패널 바닥은 화면 끝
   (앱=edge-to-edge 라 시스템 내비바·홈 인디케이터 뒤)까지 내려간다 → 패널에 하단 인셋만큼 여백.
   ⚠ 패널 자체는 스크롤하지 않는다(본문만 스크롤 · 버튼 footer 는 스크롤 밖) — 그래야 이 여백이
     스크롤 끝에만 생기는 게 아니라 늘 비어 있다(2026-09-27 S25 3버튼 내비 '적용' 겹침).
   전체 화면 모달(data-full · 높이 100dvh)은 상단도 상태바 뒤에서 시작하므로 상단 인셋도 더한다.
   데스크톱(sm+ 중앙 다이얼로그)은 미적용. */
@media (max-width: 639px) {
  [data-modal-root] [data-panel] { padding-bottom: env(safe-area-inset-bottom, 0px); }
  [data-modal-root] [data-panel][data-full] { padding-top: var(--m-sat); }
}

/* 새 버전 배너(version-check.js · 기본 bottom-4) — 모바일은 하단 탭바·내비바 위로 띄운다(토스트와 같은 기준선) */
@media (max-width: 767px) {
  #version-banner { bottom: calc(var(--m-bottombar-h) + env(safe-area-inset-bottom, 0px) + 12px);
    max-width: calc(100vw - 24px); }
}

/* ════════ 연결 불안정 배너 (utils/net-status.js · 2026-10-04 운영 안전) ════════
   apiFetch 가 30초 안 3회 실패(5xx·530·524·타임아웃·네트워크)를 보면 띄우고, 다음 정상 응답에 내린다.
   v3 소프트 카드(흰 바탕·헤어라인·카드 그림자) + 딥그린 칩 아이콘 — 빨강 경고·왼쪽 컬러 보더 없음.
   자리: 데스크톱 = 상단 중앙(로고 독·계정 독 사이) · 모바일 = 상단 슬림바 바로 아래.
   z-index 50 = #dock-layer 와 같고 나중에 붙어 그 위 · #dock-pop(51)·모달(10000+)·토스트(9999) 아래. */
#net-banner { position: fixed; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(560px, calc(100vw - 200px));
  display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 8px;
  background: #fff; border: 1px solid #EEF0F3; border-radius: 16px; box-shadow: var(--sh-card);
  color: #1A1A1A; animation: netBannerIn .22s cubic-bezier(.22,1,.36,1); }
@keyframes netBannerIn { from { opacity: 0; } to { opacity: 1; } }
#net-banner .nb-ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; background: #EAF1ED; color: #22463A;
  display: flex; align-items: center; justify-content: center; font-size: 18px; }
#net-banner .nb-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; word-break: keep-all; }
#net-banner .nb-main { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
#net-banner .nb-sub { font-size: 12px; color: #5A6061; }
#net-banner .nb-act { flex-shrink: 0; height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: #22463A; color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#net-banner .nb-act:hover { opacity: .9; }
#net-banner .nb-x { flex-shrink: 0; width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: #767676;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
#net-banner .nb-x:hover { background: #F2F4F4; color: #1A1A1A; }
#net-banner .nb-x .material-symbols-outlined { font-size: 18px; }
/* 데스크톱 토스트(우상단 · components/toast.js)는 배너가 있는 동안 배너 아래로 — 좁은 데스크톱에서 겹치지 않게.
   --net-banner-h = 배너 실제 높이(net-status.js 가 띄울 때 넣는다). */
@media (min-width: 768px) {
  body.net-banner-on #toast-container { top: calc(14px + var(--net-banner-h, 50px) + 12px); }
  /* 본문도 배너 높이만큼 내린다 — 홈 히어로 제목처럼 상단 중앙에 놓인 머리를 가리지 않게(모바일과 같은 원리) */
  body.net-banner-on #app-root { padding-top: calc(14px + var(--net-banner-h, 50px) + 8px); }
}
/* 모바일: 상단 슬림바(+노치) 바로 아래 · 좌우 12px · 터치 타깃 44px. 토스트는 하단이라 겹치지 않는다.
   배너가 본문 첫 줄(상세 화면의 '뒤로' 행 등)을 가리지 않게 본문 인셋을 배너 높이만큼 늘린다 —
   #app-root 안의 sticky top-0(단지 상세 탭 바)도 인셋 아래에 붙어 배너와 겹치지 않는다. */
@media (max-width: 767px) {
  body.net-banner-on #app-root { padding-top: calc(var(--m-topbar-h) + var(--m-sat) + var(--net-banner-h, 58px) + 16px); }
  #net-banner { top: calc(var(--m-topbar-h) + var(--m-sat) + 8px); left: 12px; right: 12px; transform: none;
    width: auto; max-width: none; padding: 6px 4px 6px 8px; }
  #net-banner .nb-txt { flex: 1; }
  #net-banner .nb-act { height: 44px; }
  #net-banner .nb-x { width: 44px; height: 44px; }
}

