newtil-css 0.2.93 → 0.2.95

package/dist/components.css

@@ -1 +1,1430 @@
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");.icon\:home:before{content:"\e88a"}.icon\:menu:before{content:"\e5d2"}.icon\:close:before{content:"\e5cd"}.icon\:arrow_back:before{content:"\e5c4"}.icon\:arrow_forward:before{content:"\e5c8"}.icon\:expand_more:before{content:"\e5cf"}.icon\:expand_less:before{content:"\e5ce"}.icon\:chevron_left:before{content:"\e5cb"}.icon\:chevron_right:before{content:"\e5cc"}.icon\:more_vert:before{content:"\e5d4"}.icon\:more_horiz:before{content:"\e5d3"}.icon\:refresh:before{content:"\e5d5"}.icon\:settings:before{content:"\e8b8"}.icon\:apps:before{content:"\e5c3"}.icon\:launch:before{content:"\e895"}.icon\:add:before{content:"\e145"}.icon\:remove:before{content:"\e15b"}.icon\:edit:before{content:"\e3c9"}.icon\:delete:before{content:"\e872"}.icon\:save:before{content:"\e161"}.icon\:check:before{content:"\e5ca"}.icon\:clear:before{content:"\e14c"}.icon\:cancel:before{content:"\e5c9"}.icon\:done:before{content:"\e876"}.icon\:search:before{content:"\e8b6"}.icon\:share:before{content:"\e80d"}.icon\:download:before{content:"\e2c4"}.icon\:upload:before{content:"\e2c6"}.icon\:copy:before{content:"\e14d"}.icon\:visibility:before{content:"\e8f4"}.icon\:visibility_off:before{content:"\e8f5"}.icon\:lock:before{content:"\e897"}.icon\:lock_open:before{content:"\e898"}.icon\:sync:before{content:"\e627"}.icon\:info:before{content:"\e88e"}.icon\:email:before{content:"\e0be"}.icon\:phone:before{content:"\e0cd"}.icon\:chat:before{content:"\e0b7"}.icon\:notifications:before{content:"\e7f4"}.icon\:send:before{content:"\e163"}.icon\:reply:before{content:"\e15e"}.icon\:help:before{content:"\e887"}.icon\:feedback:before{content:"\e87f"}.icon\:play_arrow:before{content:"\e037"}.icon\:pause:before{content:"\e034"}.icon\:stop:before{content:"\e047"}.icon\:volume_up:before{content:"\e050"}.icon\:volume_off:before{content:"\e04f"}.icon\:mic:before{content:"\e029"}.icon\:mic_off:before{content:"\e02b"}.icon\:folder:before{content:"\e2c7"}.icon\:folder_open:before{content:"\e2c8"}.icon\:attach_file:before{content:"\e226"}.icon\:cloud:before{content:"\e2bd"}.icon\:description:before{content:"\e873"}.icon\:person:before{content:"\e7fd"}.icon\:people:before{content:"\e7fb"}.icon\:favorite:before{content:"\e87d"}.icon\:star:before{content:"\e838"}.icon\:thumb_up:before{content:"\e8dc"}:root{--icon-size:24px;--icon-family:"Material Symbols Outlined";--icon-color:var(--color-base-9);--icon-fill:0;--icon-weight:400;--icon-grade:0;--icon-optical-size:24}@media (prefers-color-scheme:dark){:root{--icon-color:var(--color-base-2)}}.m3-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;transition:all .2s ease-in-out;visibility:visible;width:var(--icon-size);&:before{align-items:center;color:inherit;display:inline-flex;flex-shrink:0;font-family:var(--icon-family);font-size:var(--icon-size);font-variation-settings:"FILL" var(--icon-fill,0),"wght" var(--icon-weight,400),"GRAD" var(--icon-grade,0),"OPSZ" var(--icon-optical-size,24);height:var(--icon-size);overflow:hidden;vertical-align:top;width:var(--icon-size)}&.hover:not(.n-deco):hover{background-color:var(--color-base-3);border-radius:50%;transform:scale(1.4);&:before{transform:scale(.72)}}&.icon-style\:outlined:before{--icon-family:"Material Symbols Outlined"}&.icon-style\:rounded:before{--icon-family:"Material Symbols Rounded"}&.icon-style\:sharp:before{--icon-family:"Material Symbols Sharp"}&.icon-filled\:0:before{--icon-fill:0}&.icon-filled\:1:before{--icon-fill:1}&.icon-weight\:100:before{--icon-weight:100}&.icon-weight\:200:before{--icon-weight:200}&.icon-weight\:300:before{--icon-weight:300}&.icon-weight\:400:before{--icon-weight:400}&.icon-weight\:500:before{--icon-weight:500}&.icon-weight\:600:before{--icon-weight:600}&.icon-weight\:700:before{--icon-weight:700}&.icon-grade\:-25:before{--icon-grade:-25}&.icon-grade\:0:before{--icon-grade:0}&.icon-grade\:200:before{--icon-grade:200}&.icon-optical-size\:20:before{--icon-optical-size:20px}&.icon-optical-size\:24:before{--icon-optical-size:24px}&.icon-optical-size\:40:before{--icon-optical-size:40px}&.icon-optical-size\:48:before{--icon-optical-size:48px}&.icon-color\:main-1:before{color:var(--color-main-1)}&.icon-color\:main-2:before{color:var(--color-main-2)}&.icon-color\:main-3:before{color:var(--color-main-3)}&.icon-color\:sub-1:before{color:var(--color-sub-1)}&.icon-color\:sub-2:before{color:var(--color-sub-2)}&.icon-color\:sub-3:before{color:var(--color-sub-3)}&.icon-color\:accent-1:before{color:var(--color-accent-1)}&.icon-color\:accent-2:before{color:var(--color-accent-2)}&.icon-color\:accent-3:before{color:var(--color-accent-3)}&.icon-color\:base-1:before{color:var(--color-base-1)}&.icon-color\:base-2:before{color:var(--color-base-2)}&.icon-color\:base-3:before{color:var(--color-base-3)}&.icon-color\:base-4:before{color:var(--color-base-4)}&.icon-color\:base-5:before{color:var(--color-base-5)}&.icon-color\:base-6:before{color:var(--color-base-6)}&.icon-color\:base-7:before{color:var(--color-base-7)}&.icon-color\:base-8:before{color:var(--color-base-8)}&.icon-color\:base-9:before{color:var(--color-base-9)}&.icon-color\:base-10:before{color:var(--color-base-10)}&.icon-size\:20{--icon-size:20px}&.icon-size\:24{--icon-size:24px}&.icon-size\:40{--icon-size:40px}&.icon-size\:48{--icon-size:48px}}.m3-btn{--btn-gap:2px;--btn-margin-top:5px;--btn-fill:1;--btn-background:rgba(var(--rgb-main-2),1);--btn-color:rgb(var(--rgb-base-1));--btn-box-shadow:none;--btn-border:0;--btn-outline:none;--btn-outline-offset:0px;--btn-border-radius:999px;--btn-height:var(--space-22);--btn-padding:0 var(--space-10);--btn-font-size:var(--space-8);--btn-font-weight:var(--font-weight-medium);--btn-line-height:var(--space-13);--btn-letter-spacing:0.1px}@media (prefers-color-scheme:dark){.m3-btn{--btn-background-dark:rgba(var(--rgb-main-2),1);--btn-color-dark:rgb(var(--rgb-base-1));--btn-box-shadow-dark:none;--btn-border-dark:0;--btn-outline-dark:none}.m3-btn.btn-state\:disabled,.m3-btn:disabled{--btn-background-dark:rgba(var(--rgb-main-3),0.3);--btn-color-dark:rgba(var(--rgb-main-1),0.3);--btn-box-shadow-dark:none;--btn-border-dark:0;--btn-outline-dark:none}.m3-btn.btn-state\:focus:not(:active),.m3-btn:focus:not(:active){--btn-border-dark:2px solid rgb(var(--rgb-base-1));--btn-outline-dark:2px solid rgb(var(--rgb-main-2))}.m3-btn.btn-state\:hover,.m3-btn:hover{--btn-background-dark:rgba(var(--rgb-main-1),1)}.m3-btn.btn-state\:active,.m3-btn:active{--btn-background-dark:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-2),1) 65%,rgba(var(--rgb-main-1),1) 66%);--btn-border-radius-dark:var(--radius-lg)}.btn\:elevated{--btn-background-dark:rgba(var(--rgb-main-3),0.3);--btn-box-shadow-dark:0px 1px 2px 0.5px rgba(var(--rgb-base-10),1);--btn-color-dark:rgb(var(--rgb-main-1))}.btn\:tonal{--btn-background-dark:rgba(var(--rgb-main-2),0.5);--btn-color-dark:rgb(var(--rgb-main-1))}.btn\:outlined{--btn-background-dark:none;--btn-color-dark:rgb(var(--rgb-main-1));--btn-outline-dark:0.2px solid rgba(var(--rgb-main-3),0.7)}.btn\:text{--btn-background-dark:none;--btn-color-dark:rgb(var(--rgb-main-2))}.btn\:elevated.btn-state\:focus:not(:active),.btn\:elevated:focus:not(:active){--btn-border-dark:2px solid rgb(var(--rgb-main-3));--btn-outline-dark:2px solid rgb(var(--rgb-base-1))}.btn\:elevated.btn-state\:hover,.btn\:elevated:hover{--btn-background-dark:rgba(var(--rgb-main-2),0.3)}.btn\:elevated.btn-state\:active,.btn\:elevated:active{--btn-background-dark:radial-gradient(144% 100% at 80% 94%,rgba(var(--rgb-main-3),0.5) 65%,rgba(var(--rgb-main-3),1) 66%);--btn-border-radius-dark:var(--radius-lg)}.btn\:tonal.btn-state\:focus:not(:active),.btn\:tonal:focus:not(:active){--btn-border-dark:2px solid rgb(var(--rgb-base-1));--btn-outline-dark:3px solid rgba(var(--rgb-main-2),0.5)}.btn\:tonal.btn-state\:hover,.btn\:tonal:hover{--btn-background-dark:rgba(var(--rgb-main-3),0.7)}.btn\:tonal.btn-state\:active,.btn\:tonal:active{--btn-background-dark:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-2),0.5) 65%,rgba(var(--rgb-main-3),0.7) 66%);--btn-border-radius-dark:var(--radius-lg)}.btn\:outlined.btn-state\:focus:not(:active),.btn\:outlined:focus:not(:active){--btn-border-dark:2px solid rgb(var(--rgb-main-1));--btn-outline-dark:0.1px solid rgba(var(--rgb-main-1),0.5);--btn-outline-offset-dark:-5px}.btn\:outlined.btn-state\:hover,.btn\:outlined:hover{--btn-background-dark:rgba(var(--rgb-main-3),0.5)}.btn\:outlined.btn-state\:active,.btn\:outlined:active{--btn-background-dark:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-2),0.5) 65%,rgba(var(--rgb-main-2),0.3) 66%);--btn-border-radius-dark:var(--radius-lg)}.btn\:text.btn-state\:focus:not(:active),.btn\:text:focus:not(:active){--btn-border-dark:2px solid rgb(var(--rgb-main-1));--btn-outline-dark:0.1px solid rgba(var(--rgb-main-1),0.5);--btn-outline-offset-dark:-5px}.btn\:text.btn-state\:hover,.btn\:text:hover{--btn-background-dark:rgba(var(--rgb-main-3),0.5)}.btn\:text.btn-state\:active,.btn\:text:active{--btn-background-dark:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-2),0.5) 65%,rgba(var(--rgb-main-2),0.3) 66%);--btn-border-radius-dark:var(--radius-lg)}}.m3-btn{align-items:center;background:var(--btn-background-dark,var(--btn-background));border:var(--btn-border-dark,var(--btn-border));border-radius:var(--btn-border-radius);box-shadow:var(--btn-box-shadow-dark,var(--btn-box-shadow));color:var(--btn-color-dark,var(--btn-color));display:inline-flex;font-family:roboto;font-size:var(--btn-font-size);font-variation-settings:"FILL" var(--btn-fill);font-weight:var(--btn-font-weight);gap:var(--btn-gap);height:var(--btn-height);justify-content:center;letter-spacing:var(--btn-letter-spacing);line-height:var(--btn-line-height);margin-top:var(--btn-margin-top);outline:var(--btn-outline-dark,var(--btn-outline));outline-offset:var(--btn-outline-offset);padding:var(--btn-padding);transition:background-color .3s ease,transform .3s ease}.m3-btn.btn-state\:disabled,.m3-btn:disabled{--btn-background:rgba(var(--rgb-base-10),0.08);--btn-color:rgba(var(--rgb-base-10),0.2);--btn-box-shadow:none;--btn-border:none;--btn-outline:none}.btn-state\:focus:not(:active),.m3-btn:focus:not(:active){--btn-border:2px solid rgba(var(--rgb-base-1),1);--btn-outline:2.5px solid rgba(var(--rgb-main-2),1)}.btn-state\:hover,.m3-btn:hover{--btn-background:rgba(var(--rgb-main-2),0.7)}.btn-state\:active,.m3-btn:active{--btn-background:radial-gradient(144% 100% at 80% 94%,rgba(var(--rgb-main-2),0.7) 65%,rgba(var(--rgb-main-2),1) 66%);--btn-border-radius:var(--radius-lg)}.btn\:elevated{--btn-background:linear-gradient(161deg,rgba(var(--rgb-main-1),0.01) 0%,rgba(var(--rgb-main-1),0.2) 100%);--btn-box-shadow:0px 0.7px 2px 0.5px rgba(var(--rgb-base-10),0.5);--btn-color:rgb(var(--rgb-main-2))}.btn\:tonal{--btn-background:radial-gradient(144% 100% at 80% 94%,rgba(var(--rgb-main-1),1) 0%,rgba(var(--rgb-main-1),0.7) 100%);--btn-color:rgb(var(--rgb-main-3))}.btn\:outlined{--btn-background:none;--btn-border:1px solid rgba(var(--rgb-main-3),0.2);--btn-color:rgb(var(--rgb-main-3))}.btn\:text{--btn-background:none;--btn-border:none;--btn-outline:none;--btn-color:rgb(var(--rgb-main-2))}.btn\:elevated.btn-state\:focus:not(:active),.btn\:elevated:focus:not(:active){--btn-border:2px solid rgb(var(--rgb-main-3));--btn-outline:0.3px solid rgba(var(--rgb-main-3),0.3);--btn-outline-offset:-4px}.btn\:elevated.btn-state\:hover,.btn\:elevated:hover{--btn-background:linear-gradient(161deg,rgba(var(--rgb-main-1),0.1) 0%,rgba(var(--rgb-main-1),0.5) 100%)}.btn\:elevated.btn-state\:active,.btn\:elevated:active{--btn-background:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-1),0.4) 65%,rgba(var(--rgb-main-1),0.2) 66%);--btn-border-radius:var(--radius-lg)}.btn\:tonal.btn-state\:focus:not(:active),.btn\:tonal:focus:not(:active){--btn-border:2px solid rgb(var(--rgb-base-1));--btn-outline:2.5px solid rgb(var(--rgb-main-2))}.btn\:tonal.btn-state\:hover,.btn\:tonal:hover{--btn-background:linear-gradient(161deg,rgba(var(--rgb-main-1),0.5) 8%,rgba(var(--rgb-main-1),0.6) 81%)}.btn\:tonal.btn-state\:active,.btn\:tonal:active{--btn-background:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-1),1) 65%,rgba(var(--rgb-main-1),0.8) 66%);--btn-border-radius:var(--radius-lg)}.btn\:outlined.btn-state\:focus:not(:active),.btn\:outlined:focus:not(:active){--btn-border:2px solid rgb(var(--rgb-main-3));--btn-outline:0.3px solid rgba(var(--rgb-main-3),0.3);--btn-outline-offset:-4px}.btn\:outlined.btn-state\:hover,.btn\:outlined:hover{--btn-background:linear-gradient(161deg,rgba(var(--rgb-main-1),0.01) 0%,rgba(var(--rgb-main-1),0.2) 100%)}.btn\:outlined.btn-state\:active,.btn\:outlined:active{--btn-background:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-1),0.4) 65%,rgba(var(--rgb-main-1),0.2) 66%);--btn-border-radius:var(--radius-lg)}.btn\:text.btn-state\:focus:not(:active),.btn\:text:focus:not(:active){--btn-border:2px solid rgb(var(--rgb-main-3));--btn-outline:0.3px solid rgba(var(--rgb-main-3),0.3);--btn-outline-offset:-4px}.btn\:text.btn-state\:hover,.btn\:text:hover{--btn-background:linear-gradient(161deg,rgba(var(--rgb-main-1),0.01) 0%,rgba(var(--rgb-main-1),0.2) 100%)}.btn\:text.btn-state\:active,.btn\:text:active{--btn-background:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-1),0.4) 65%,rgba(var(--rgb-main-1),0.2) 66%);--btn-border-radius:var(--radius-lg)}.btn-shape\:square{--btn-border-radius:12px}.btn-size\:xs{--btn-height:var(--space-19);--btn-padding:0 var(--space-6);--btn-font-size:var(--space-8);--btn-font-weight:var(--font-weight-medium);--btn-line-height:var(--space-13);--btn-letter-spacing:0.1px}.btn-size\:xs.btn-shape\:square{--btn-border-radius:12px}.btn-size\:m{--btn-height:var(--space-28);--btn-padding:0 var(--space-15);--btn-font-size:var(--space-10);--btn-font-weight:var(--font-weight-medium);--btn-line-height:var(--space-15);--btn-letter-spacing:0.15px}.btn-size\:m.btn-shape\:square{--btn-border-radius:16px}.btn-size\:l{--btn-height:var(--space-32);--btn-padding:0 var(--space-24);--btn-font-size:var(--space-15);--btn-font-weight:600;--btn-line-height:var(--space-19);--btn-letter-spacing:0px}.btn-size\:l.btn-shape\:square{--btn-border-radius:28px}.btn-size\:xl{--btn-height:var(--space-35);--btn-padding:0 var(--space-29);--btn-font-size:var(--space-19);--btn-font-weight:600;--btn-line-height:var(--space-22);--btn-letter-spacing:0px}.btn-size\:xl.btn-shape\:square{--btn-border-radius:28px}.m3-checkbox{--checkbox-main-color:var(--color-main-2);--checkbox-icon-color:var(--color-white);--checkbox-border-color:var(--color-base-8);--checkbox-outline-color:var(--color-main-2);--checkbox-text-color:var(--color-base-8);--checkbox-opacity:var(--opacity-0);--checkbox-icon-content:"\e5ca";--checkbox-transparent-0:transparent 0%;--checkbox-transparent-38:transparent 38%;--checkbox-transparent-92:transparent 92%;--checkbox-transparent-100:transparent 100%;--background-gradient:linear-gradient(180deg,#fff,rgba(106,142,41,.3) 50%,rgba(106,142,41,.5))}@media (prefers-color-scheme:dark){.m3-checkbox{--checkbox-main-color:var(--color-main-1);--checkbox-icon-color:var(--color-main-3);--checkbox-outline-color:var(--color-main-1);--color-main-2:var(--color-main-1);--background-gradient:linear-gradient(180deg,#fff,rgba(140,186,53,.3) 50%,rgba(140,186,53,.5))}}.m3-checkbox,.m3-checkbox input[type=checkbox]:after,.m3-checkbox input[type=checkbox]:before{transition:all .3s ease}.m3-checkbox{align-items:center;color:var(--checkbox-text-color);cursor:pointer;display:inline-flex;font-size:16px;padding:15px;user-select:none}.m3-checkbox input[type=checkbox]{appearance:none;border:2px solid var(--checkbox-border-color);border-radius:2px;box-sizing:border-box;height:18px;margin-right:20px;position:relative;width:18px}.m3-checkbox input[type=checkbox]:after{align-items:center;background-color:var(--checkbox-main-color);border-color:var(--checkbox-main-color);border-radius:2px;color:var(--checkbox-icon-color);content:var(--checkbox-icon-content);display:flex;font-family:Material Symbols Outlined;font-size:18px;font-weight:var(--font-weight-medium);height:inherit;justify-content:center;left:-2px;opacity:var(--checkbox-opacity);position:absolute;top:-2px;width:inherit}.m3-checkbox input[type=checkbox]:before{background:var(--checkbox-main-color);border-radius:50%;content:"";display:inline-flex;height:40px;left:50%;opacity:var(--checkbox-opacity);outline:3px solid var(--checkbox-outline-color);position:absolute;top:50%;transform:translate(-50%,-50%);width:40px}.m3-checkbox input[type=checkbox]:not(:disabled):checked:after{--checkbox-icon-content:"\e5ca";--checkbox-opacity:var(--opacity-100)}.m3-checkbox input[type=checkbox]:disabled{--checkbox-border-color:color-mix(in srgb,var(--color-base-8),var(--checkbox-transparent-38));--checkbox-text-color:color-mix(in srgb,var(--color-base-8),var(--checkbox-transparent-38))}.m3-checkbox input[type=checkbox]:not(:disabled):hover:before{--checkbox-outline-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-100));--checkbox-main-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-92));--checkbox-opacity:var(--opacity-100)}.m3-checkbox input[type=checkbox]:not(:disabled):focus:before{--checkbox-outline-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-0));--checkbox-main-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-100));--checkbox-opacity:var(--opacity-100)}.m3-checkbox input[type=checkbox]:not(:disabled):active:before{--checkbox-outline-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-100));--checkbox-main-color:var(--background-gradient);--checkbox-opacity:var(--opacity-90)}.m3-checkbox.checkbox-mode\:indeterminate input[type=checkbox]:after{--checkbox-icon-content:"\f88a"!important}.m3-checkbox.checkbox-state\:enabled input[type=checkbox]:after{--checkbox-icon-content:"\e5ca";--checkbox-opacity:var(--opacity-100)}.m3-checkbox.checkbox-state\:unselected-disabled input[type=checkbox]{--checkbox-border-color:color-mix(in srgb,var(--color-base-8),var(--checkbox-transparent-38));--checkbox-text-color:color-mix(in srgb,var(--color-base-8),var(--checkbox-transparent-38))}.m3-checkbox.checkbox-state\:hovered input[type=checkbox]:before{--checkbox-outline-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-100));--checkbox-main-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-92));--checkbox-opacity:var(--opacity-100)}.m3-checkbox.checkbox-state\:focused input[type=checkbox]:before{--checkbox-outline-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-0));--checkbox-main-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-100));--checkbox-opacity:var(--opacity-100)}.m3-checkbox.checkbox-state\:pressed input[type=checkbox]:before{--checkbox-outline-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-100));--checkbox-main-color:var(--background-gradient);--checkbox-opacity:var(--opacity-90)}.m3-radio{--radio-size:20px;--radio-touch-size:48px;--radio-stroke-width:2px;--radio-inner-stroke-width:5px;--radio-inner-dot-size:10px;--radio-spacing-label:15px;--radio-label-size:15px;--radio-display:inline-flex;--radio-align-items:center;--radio-cursor:pointer;--radio-user-select:none;--radio-select-primary:var(--color-main-2);--radio-unselect-primary:var(--color-base-9);--radio-focus-ring:3px;--radio-transform:translate(-50%,-50%);--radio-pointer:none;--radio-box-sizing:border-box;--radio-transition:all 180ms ease;--radio-border-color:var(--radio-unselect-primary);--radio-border-color-checked:var(--radio-select-primary);--radio-box-shadow:none;--radio-background-color:transparent;--radio-outline:none;--radio-outline-offset:0;--radio-outline-offset-focus:5px;--alpha-1:8%;--alpha-2:10%;--alpha-3:62%;--transparent-1:10%;--transparent-2:90%;--transparent-3:92%;--transparent-disabled:62%}@media (prefers-color-scheme:dark){.m3-radio{--radio-select-primary:var(--color-main-1)}}.m3-radio{align-items:var(--radio-align-items);cursor:var(--radio-cursor);display:var(--radio-display);gap:var(--radio-spacing-label);user-select:var(--radio-user-select)}.m3-radio input[type=radio]{appearance:none;background-color:var(--radio-background-color);border:none;cursor:var(--radio-cursor);height:var(--radio-touch-size);margin:var(--scale-0);position:relative;width:var(--radio-touch-size)}.m3-radio input[type=radio]:after,.m3-radio input[type=radio]:before{box-sizing:var(--radio-box-sizing);content:"";left:50%;pointer-events:var(--radio-pointer);position:absolute;top:50%;transform:var(--radio-transform);transition:var(--radio-transition)}.m3-radio input[type=radio]:before{background-color:var(--radio-background-color);border:var(--radio-stroke-width) solid var(--radio-unselect-primary);border-radius:var(--radius-8);box-shadow:var(--radio-box-shadow);height:var(--radio-size);outline:var(--radio-outline);outline-offset:var(--radio-outline-offset);width:var(--radio-size)}.m3-radio input[type=radio]:after{border:var(--radio-inner-stroke-width) solid var(--radio-select-primary);border-radius:var(--radius-8);height:0;opacity:var(--opacity-0);width:0}.m3-radio input[type=radio]:checked:before{border-color:var(--radio-border-color-checked)}.m3-radio input[type=radio]:checked:after{opacity:var(--opacity-100)}.m3-radio input[type=radio]:hover:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-3));--radio-background-color:color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-2))}.m3-radio input[type=radio]:checked:hover:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-3));--radio-background-color:color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-2))}.m3-radio input[type=radio]:active:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-2));--radio-background-color:color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-2))}.m3-radio input[type=radio]:checked:active:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-2));--radio-background-color:color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-2))}.m3-radio input[type=radio]:focus:before{--radio-outline:1px solid color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-1));--radio-outline-offset:var(--radio-outline-offset-focus)}.m3-radio input[type=radio]:checked:focus:before{--radio-outline:1px solid color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-1));--radio-outline-offset:var(--radio-outline-offset-focus)}.m3-radio input[type=radio]:disabled{box-shadow:none;cursor:not-allowed}.m3-radio input[type=radio]:checked:disabled:after,.m3-radio input[type=radio]:checked:disabled:before,.m3-radio input[type=radio]:disabled:after,.m3-radio input[type=radio]:disabled:before{--radio-border-color:color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-disabled));background-color:transparent;box-shadow:none}.m3-radio .m3-radio-label{color:var(--radio-unselect-primary);font-size:var(--radio-label-size)}.radio\:hover input[type=radio]:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-3));--radio-background-color:color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-2))}.radio\:hover input[type=radio]:checked:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-3));--radio-background-color:color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-2))}.radio\:press input[type=radio]:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-2));--radio-background-color:color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-2))}.radio\:press input[type=radio]:checked:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-2));--radio-background-color:color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-2))}.radio\:focus input[type=radio]:before{--radio-outline:1px solid color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-1));--radio-outline-offset:var(--radio-outline-offset-focus)}.radio\:focus input[type=radio]:checked:before{--radio-outline:1px solid color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-1));--radio-outline-offset:var(--radio-outline-offset-focus)}.m3-card{--overflow-hidden:hidden;--cursor-pointer:pointer;--cursor-grab:grab;--cursor-not-allowed:not-allowed;--card-background:var(--color-base-1);--card-width:auto;--card-height:auto;--card-padding:var(--space-10);--card-border:none;--card-border-radius:var(--radius-xl);--card-box-shadow:0 var(--space-1) var(--space-3) rgba(0,0,0,var(--opacity-40)),0 var(--space-1) var(--space-2) rgba(0,0,0,var(--opacity-50));--card-opacity:var(--opacity-100);--card-outline:none;--card-outline-offset:0;--card-transform:none;--card-focused-outline-color:var(--color-base-8);--card-overflow:var(--overflow-hidden);--card-cursor:var(--cursor-pointer);--card-transition:box-shadow var(--duration-5) var(--ease-out),transform var(--duration-5) var(--ease-out),opacity var(--duration-5) var(--ease-out);--card-content-padding:var(--space-10);--card-headline-margin-bottom:var(--space-3);--card-headline-font-size:var(--size-15);--card-headline-font-weight:var(--font-weight-semibold);--card-headline-color:var(--color-base-10);--card-headline-line-height:var(--size-19);--card-headline-letter-spacing:0;--card-subhead-margin-bottom:var(--space-3);--card-subhead-font-size:var(--size-10);--card-subhead-font-weight:var(--font-weight-normal);--card-subhead-color:var(--color-base-8);--card-subhead-line-height:var(--size-13);--card-subhead-letter-spacing:0;--card-supporting-text-font-size:var(--size-6);--card-supporting-text-font-weight:var(--font-weight-normal);--card-supporting-text-color:var(--color-base-10);--card-supporting-text-line-height:var(--size-9);--card-supporting-text-margin-bottom:var(--space-2);--card-supporting-text-letter-spacing:0}@media (prefers-color-scheme:dark){.m3-card{--card-background:var(--color-base-2);--card-headline-color:var(--color-base-10);--card-subhead-color:var(--color-base-8);--card-supporting-text-color:var(--color-base-9)}.m3-card.card-state\:focused{--card-focused-outline-color:var(--color-accent-2)}}.m3-card{background:var(--card-background);border:var(--card-border);border-radius:var(--card-border-radius);box-shadow:var(--card-box-shadow);cursor:var(--card-cursor);height:var(--card-height);opacity:var(--card-opacity);outline:var(--card-outline);outline-offset:var(--card-outline-offset);overflow:var(--card-overflow);padding:var(--card-padding);transform:var(--card-transform);transition:var(--card-transition);width:var(--card-width)}.m3-card.card-state\:enabled{--card-opacity:var(--opacity-100);--card-box-shadow:0px solid #000}.m3-card.card-state\:disabled,.m3-card.card-state\:disabled button{--card-opacity:var(--opacity-60);--card-cursor:var(--cursor-not-allowed)}.m3-card.card-state\:hovered{--card-opacity:var(--opacity-90)}.m3-card.card-state\:focused,.m3-card.card-state\:hovered{--card-box-shadow:0 var(--space-4) var(--space-4) rgba(0,0,0,.16),0 var(--space-2) var(--space-4) rgba(0,0,0,.23)}.m3-card.card-state\:focused{--card-outline:3px solid var(--card-focused-outline-color);--card-outline-offset:var(--space-2);--card-opacity:var(--opacity-90)}.m3-card.card-state\:dragged{--card-box-shadow:0 var(--space-4) var(--space-10) rgba(0,0,0,var(--opacity-25)),0 var(--space-6) var(--space-6) rgba(0,0,0,var(--opacity-30));--card-transform:scale(1.02);--card-opacity:var(--opacity-80);--card-cursor:var(--cursor-grap)}.m3-card .content{padding:var(--card-content-padding)}.m3-card .headline{color:var(--card-headline-color);font-size:var(--card-headline-font-size);font-weight:var(--card-headline-font-semibold);letter-spacing:var(--card-headline-letter-spacing);line-height:var(--card-headline-line-height);margin-bottom:var(--card-headline-margin-bottom)}.m3-card .subhead{color:var(--card-subhead-color);font-size:var(--card-subhead-font-size);font-weight:var(--card-subhead-font-weight);letter-spacing:var(--card-subhead-letter-spacing);line-height:var(--card-subhead-line-height);margin-bottom:var(--card-subhead-margin-bottom)}.m3-card .supporting-text{color:var(--card-supporting-text-color);font-size:var(--card-supporting-text-font-size);font-weight:var(--card-supporting-text-font-weight);letter-spacing:var(--card-supporting-text-letter-spacing);line-height:var(--card-supporting-text-line-height);margin-bottom:var(--card-supporting-text-margin-bottom)}.m3-dialog{--dialog-spec-min-width:280px;--dialog-spec-max-width:560px;--dialog-bg-color:var(--color-base-3);--dialog-radius:var(--space-17);--dialog-padding:var(--space-15);--dialog-min-width:var(--dialog-spec-min-width);--dialog-max-width:var(--dialog-spec-max-width);--dialog-color:var(--color-base-8);--dialog-headline-font-color:var(--color-base-10);--dialog-headline-font-size:var(--space-15);--dialog-headline-font-weight:var(--font-weight-4);--dialog-headline-margin-bottom:var(--space-14);--dialog-content-font-color:var(--color-base-8);--dialog-content-font-size:var(--space-8);--dialog-content-margin-bottom:var(--space-15);--dialog-content-line-height:var(--space-13);--dialog-actions-gap:var(--space-4);--dialog-btn-color:var(--color-sub-2);--dialog-btn-padding:var(--space-12) var(--space-10);--dialog-hovered-bg:color-mix(in srgb,var(--dialog-btn-color) 8%,transparent);--dialog-focused-bg:color-mix(in srgb,var(--dialog-btn-color) 10%,transparent);--dialog-pressed-bg:color-mix(in srgb,var(--dialog-btn-color) 10%,transparent)}@media (prefers-color-scheme:dark){.m3-dialog{--dialog-bg-color:var(--color-base-3);--dialog-headline-font-color:var(--color-base-10);--dialog-content-font-color:var(--color-base-8);--dialog-btn-color:var(--color-sub-2)}}.m3-dialog{background:var(--dialog-bg-color);border-radius:var(--dialog-radius);box-shadow:0 0 0 100vmax rgba(0,0,0,.4);box-sizing:border-box;color:var(--dialog-color);flex-direction:column;font-family:Roboto,Segoe UI,Helvetica Neue,Arial,sans-serif;height:fit-content;inset:0;margin:auto;max-width:var(--dialog-max-width);min-width:var(--dialog-min-width);padding:var(--dialog-padding);position:fixed;width:fit-content;.header,>:first-child{color:var(--dialog-headline-font-color);font-size:var(--dialog-headline-font-size);font-weight:var(--dialog-headline-font-weight);margin:0 0 var(--dialog-headline-margin-bottom) 0}.content,>:nth-child(2){color:var(--dialog-content-font-color);font-size:var(--dialog-content-font-size);line-height:var(--dialog-content-line-height);margin:0 0 var(--dialog-content-margin-bottom) 0}.actions,>:nth-child(3){display:flex;gap:var(--dialog-actions-gap);justify-content:flex-end}}
+
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
+/* ===== NEWTIL CSS COMPONENTS ===== */
+/* Material 3 Components */
+/*
+=== Google Material Icons - Essential 버전 ===
+총 60개 핵심 아이콘
+크기: ~3180바이트 (압축 전)
+
+실제 프로젝트에서 자주 사용하는 핵심 아이콘들만 선별했습니다.
+더 많은 아이콘이 필요하면 material-icons-github.css를 사용하세요.
+
+사용법:
+<i class="n-icon icon:home"></i>
+<button class="n-btn n-icon icon:search">검색</button>
+*/
+/* Material Icons 폰트 로드 */
+/* === NAVIGATION === */
+.icon\:home::before {
+	content: "\e88a";
+}
+.icon\:menu::before {
+	content: "\e5d2";
+}
+.icon\:close::before {
+	content: "\e5cd";
+}
+.icon\:arrow_back::before {
+	content: "\e5c4";
+}
+.icon\:arrow_forward::before {
+	content: "\e5c8";
+}
+.icon\:expand_more::before {
+	content: "\e5cf";
+}
+.icon\:expand_less::before {
+	content: "\e5ce";
+}
+.icon\:chevron_left::before {
+	content: "\e5cb";
+}
+.icon\:chevron_right::before {
+	content: "\e5cc";
+}
+.icon\:more_vert::before {
+	content: "\e5d4";
+}
+.icon\:more_horiz::before {
+	content: "\e5d3";
+}
+.icon\:refresh::before {
+	content: "\e5d5";
+}
+.icon\:settings::before {
+	content: "\e8b8";
+}
+.icon\:apps::before {
+	content: "\e5c3";
+}
+.icon\:launch::before {
+	content: "\e895";
+}
+/* === ACTIONS === */
+.icon\:add::before {
+	content: "\e145";
+}
+.icon\:remove::before {
+	content: "\e15b";
+}
+.icon\:edit::before {
+	content: "\e3c9";
+}
+.icon\:delete::before {
+	content: "\e872";
+}
+.icon\:save::before {
+	content: "\e161";
+}
+.icon\:check::before {
+	content: "\e5ca";
+}
+.icon\:clear::before {
+	content: "\e14c";
+}
+.icon\:cancel::before {
+	content: "\e5c9";
+}
+.icon\:done::before {
+	content: "\e876";
+}
+.icon\:search::before {
+	content: "\e8b6";
+}
+.icon\:share::before {
+	content: "\e80d";
+}
+.icon\:download::before {
+	content: "\e2c4";
+}
+.icon\:upload::before {
+	content: "\e2c6";
+}
+.icon\:copy::before {
+	content: "\e14d";
+}
+.icon\:visibility::before {
+	content: "\e8f4";
+}
+.icon\:visibility_off::before {
+	content: "\e8f5";
+}
+.icon\:lock::before {
+	content: "\e897";
+}
+.icon\:lock_open::before {
+	content: "\e898";
+}
+.icon\:sync::before {
+	content: "\e627";
+}
+.icon\:info::before {
+	content: "\e88e";
+}
+/* === COMMUNICATION === */
+.icon\:email::before {
+	content: "\e0be";
+}
+.icon\:phone::before {
+	content: "\e0cd";
+}
+.icon\:chat::before {
+	content: "\e0b7";
+}
+.icon\:notifications::before {
+	content: "\e7f4";
+}
+.icon\:send::before {
+	content: "\e163";
+}
+.icon\:reply::before {
+	content: "\e15e";
+}
+.icon\:help::before {
+	content: "\e887";
+}
+.icon\:feedback::before {
+	content: "\e87f";
+}
+/* === MEDIA === */
+.icon\:play_arrow::before {
+	content: "\e037";
+}
+.icon\:pause::before {
+	content: "\e034";
+}
+.icon\:stop::before {
+	content: "\e047";
+}
+.icon\:volume_up::before {
+	content: "\e050";
+}
+.icon\:volume_off::before {
+	content: "\e04f";
+}
+.icon\:mic::before {
+	content: "\e029";
+}
+.icon\:mic_off::before {
+	content: "\e02b";
+}
+/* === FILES === */
+.icon\:folder::before {
+	content: "\e2c7";
+}
+.icon\:folder_open::before {
+	content: "\e2c8";
+}
+.icon\:attach_file::before {
+	content: "\e226";
+}
+.icon\:cloud::before {
+	content: "\e2bd";
+}
+.icon\:description::before {
+	content: "\e873";
+}
+/* === SOCIAL === */
+.icon\:person::before {
+	content: "\e7fd";
+}
+.icon\:people::before {
+	content: "\e7fb";
+}
+.icon\:favorite::before {
+	content: "\e87d";
+}
+.icon\:star::before {
+	content: "\e838";
+}
+.icon\:thumb_up::before {
+	content: "\e8dc";
+}
+:root {
+	--icon-size: 24px;
+	--icon-family: "Material Symbols Outlined";
+	--icon-color: var(--color-base-9);
+	--icon-fill: 0;
+	--icon-weight: 400;
+	--icon-grade: 0;
+	--icon-optical-size: 24;
+}
+@media (prefers-color-scheme: dark) {
+	:root {
+		--icon-color: var(--color-base-2);
+	}
+}
+.m3-icon {
+	display: inline-flex;
+	width: var(--icon-size);
+	height: var(--icon-size);
+	overflow: hidden;
+	align-items: center;
+	/* justify-content: center; */
+
+	visibility: visible;
+
+	transition: all 0.2s ease-in-out;
+
+	&::before {
+
+		flex-shrink: 0;
+
+		display: inline-flex;
+		align-items: center;
+		vertical-align: top;
+
+		width: var(--icon-size);
+		height: var(--icon-size);
+		overflow: hidden;
+
+
+		color: inherit;
+		font-family: var(--icon-family);
+		font-size: var(--icon-size);
+		font-variation-settings: 
+			"FILL" var(--icon-fill, 0), 
+			"wght" var(--icon-weight, 400), 
+			"GRAD" var(--icon-grade, 0), 
+			"OPSZ" var(--icon-optical-size, 24);
+	}
+
+	&.hover:not(.n-deco):hover {
+		border-radius: 50%;
+		background-color: var(--color-base-3);
+		transform: scale(1.4);
+
+		&::before {
+			transform: scale(0.72);
+		}
+	}
+
+	
+	/* === style  =============================== */
+	&.icon-style\:outlined::before { --icon-family: "Material Symbols Outlined"; }
+	&.icon-style\:rounded::before { --icon-family: "Material Symbols Rounded"; }
+	&.icon-style\:sharp::before { --icon-family: "Material Symbols Sharp"; }
+
+	/* ==== variation/filled =============================== */
+	&.icon-filled\:0::before { --icon-fill: 0; }
+	&.icon-filled\:1::before { --icon-fill: 1; }
+
+	/* ==== variation/weight =============================== */
+	&.icon-weight\:100::before { --icon-weight: 100; }
+	&.icon-weight\:200::before { --icon-weight: 200; }
+	&.icon-weight\:300::before { --icon-weight: 300; }
+	&.icon-weight\:400::before { --icon-weight: 400; }
+	&.icon-weight\:500::before { --icon-weight: 500; }
+	&.icon-weight\:600::before { --icon-weight: 600; }
+	&.icon-weight\:700::before { --icon-weight: 700; }
+
+	/* ==== variation/grade =============================== */
+	&.icon-grade\:-25::before { --icon-grade: -25; }
+	&.icon-grade\:0::before { --icon-grade: 0; }
+	&.icon-grade\:200::before { --icon-grade: 200; }
+
+	/* ==== variation/optical-size =============================== */
+	&.icon-optical-size\:20::before { --icon-optical-size: 20px; }
+	&.icon-optical-size\:24::before { --icon-optical-size: 24px; }
+	&.icon-optical-size\:40::before { --icon-optical-size: 40px; }
+	&.icon-optical-size\:48::before { --icon-optical-size: 48px; }
+
+
+    /* === color ======================================= */ 
+    &.icon-color\:main-1::before { color: var(--color-main-1); }
+    &.icon-color\:main-2::before { color: var(--color-main-2); }
+    &.icon-color\:main-3::before { color: var(--color-main-3); }
+    &.icon-color\:sub-1::before { color: var(--color-sub-1); }
+    &.icon-color\:sub-2::before { color: var(--color-sub-2); }
+    &.icon-color\:sub-3::before { color: var(--color-sub-3); }
+    &.icon-color\:accent-1::before { color: var(--color-accent-1); }
+    &.icon-color\:accent-2::before { color: var(--color-accent-2); }
+    &.icon-color\:accent-3::before { color: var(--color-accent-3); }
+    &.icon-color\:base-1::before { color: var(--color-base-1); }
+    &.icon-color\:base-2::before { color: var(--color-base-2); }
+    &.icon-color\:base-3::before { color: var(--color-base-3); }
+    &.icon-color\:base-4::before { color: var(--color-base-4); }
+    &.icon-color\:base-5::before { color: var(--color-base-5); }
+    &.icon-color\:base-6::before { color: var(--color-base-6); }
+    &.icon-color\:base-7::before { color: var(--color-base-7); }
+    &.icon-color\:base-8::before { color: var(--color-base-8); }
+    &.icon-color\:base-9::before { color: var(--color-base-9); }
+    &.icon-color\:base-10::before { color: var(--color-base-10); }
+
+
+	/* ---- icon-size ------------------------------------------------- */
+	&.icon-size\:20 { --icon-size: 20px; }
+	&.icon-size\:24 { --icon-size: 24px; }
+	&.icon-size\:40 { --icon-size: 40px; }
+	&.icon-size\:48 { --icon-size: 48px; }
+    
+
+}
+@media (min-width: 640px) {
+	
+}
+@media (min-width: 768px) {
+	
+}
+@media (min-width: 1024px) {
+
+}
+@media (min-width: 1280px) {
+
+}
+/* ====== M3 Button options (spec overview) =====================
+Size : Small (default) | XS | M | L | XL 
+Shape : Round (default) | Square 
+Color : Filled (default) | Elevated | Tonal | Outlined | Text 
+State : Enabled (default) | Disabled | Hover | Focus | Active(Pressed)  */
+/* ================Variable=====================*/
+.m3-btn {
+    /* boxing */
+    --btn-gap: 2px;
+    --btn-margin-top: 5px;
+    --btn-fill: 1;
+
+    /* color */
+    --btn-background: rgba(var(--rgb-main-2), 1);
+    --btn-color: rgb(var(--rgb-base-1));
+    --btn-box-shadow: none;
+    --btn-border: 0;
+    --btn-outline: none;
+    --btn-outline-offset: 0px;
+    --btn-border-radius: 999px;
+
+    /* size */
+    --btn-height: var(--space-22);
+    --btn-padding: 0 var(--space-10);
+
+    /* content */
+    --btn-font-size: var(--space-8);
+    --btn-font-weight: var(--font-weight-medium);
+    --btn-line-height: var(--space-13);
+    --btn-letter-spacing: 0.1px;
+}
+/* ================Dark Mode===================*/
+@media (prefers-color-scheme: dark) {
+    .m3-btn {
+        /* color - default dark mode variables */
+        --btn-background-dark: rgba(var(--rgb-main-2), 1);
+        --btn-color-dark: rgb(var(--rgb-base-1));
+        --btn-box-shadow-dark: none;
+        --btn-border-dark: 0;
+        --btn-outline-dark: none;
+    }
+
+    .m3-btn:disabled,
+    .m3-btn.btn-state\:disabled {
+        --btn-background-dark: rgba(var(--rgb-main-3), 0.3);
+        --btn-color-dark: rgba(var(--rgb-main-1), 0.3);
+        --btn-box-shadow-dark: none;
+        --btn-border-dark: 0;
+        --btn-outline-dark: none;
+    }
+
+    .m3-btn:focus:not(:active),
+    .m3-btn.btn-state\:focus:not(:active) {
+        --btn-border-dark: 2px solid rgb(var(--rgb-base-1));
+        --btn-outline-dark: 2px solid rgb(var(--rgb-main-2));
+    }
+
+    .m3-btn:hover,
+    .m3-btn.btn-state\:hover {
+        --btn-background-dark: rgba(var(--rgb-main-1), 1);
+    }
+
+    .m3-btn:active,
+    .m3-btn.btn-state\:active {
+        --btn-background-dark: radial-gradient(107% 112% at 65% 103%,
+                rgba(var(--rgb-main-2), 1) 65%,
+                rgba(var(--rgb-main-1), 1) 66%);
+        --btn-border-radius-dark: var(--radius-lg);
+    }
+
+    .btn\:elevated {
+        /* boxing */
+        --btn-background-dark: rgba(var(--rgb-main-3), 0.3);
+        --btn-box-shadow-dark: 0px 1px 2px 0.5px rgba(var(--rgb-base-10), 1);
+
+        /* content */
+        --btn-color-dark: rgb(var(--rgb-main-1));
+    }
+
+    .btn\:tonal {
+        --btn-background-dark: rgba(var(--rgb-main-2), 0.5);
+        --btn-color-dark: rgb(var(--rgb-main-1));
+    }
+
+    .btn\:outlined {
+        --btn-background-dark: none;
+        --btn-color-dark: rgb(var(--rgb-main-1));
+        --btn-outline-dark: 0.2px solid rgba(var(--rgb-main-3), 0.7);
+    }
+
+    .btn\:text {
+        --btn-background-dark: none;
+        --btn-color-dark: rgb(var(--rgb-main-2));
+    }
+
+    /* ----------Elevated State------------ */
+    .btn\:elevated:focus:not(:active),
+    .btn\:elevated.btn-state\:focus:not(:active) {
+        --btn-border-dark: 2px solid rgb(var(--rgb-main-3));
+        --btn-outline-dark: 2px solid rgb(var(--rgb-base-1));
+    }
+
+    .btn\:elevated:hover,
+    .btn\:elevated.btn-state\:hover {
+        --btn-background-dark: rgba(var(--rgb-main-2), 0.3);
+    }
+
+    .btn\:elevated:active,
+    .btn\:elevated.btn-state\:active {
+        --btn-background-dark: radial-gradient(144% 100% at 80% 94%,
+                rgba(var(--rgb-main-3), 0.5) 65%,
+                rgba(var(--rgb-main-3), 1) 66%);
+        --btn-border-radius-dark: var(--radius-lg);
+    }
+
+    /* ----------Tonal State---------------- */
+    .btn\:tonal:focus:not(:active),
+    .btn\:tonal.btn-state\:focus:not(:active) {
+        --btn-border-dark: 2px solid rgb(var(--rgb-base-1));
+        --btn-outline-dark: 3px solid rgba(var(--rgb-main-2), 0.5);
+    }
+
+    .btn\:tonal:hover,
+    .btn\:tonal.btn-state\:hover {
+        --btn-background-dark: rgba(var(--rgb-main-3), 0.7);
+    }
+
+    .btn\:tonal:active,
+    .btn\:tonal.btn-state\:active {
+        --btn-background-dark: radial-gradient(107% 112% at 65% 103%,
+                rgba(var(--rgb-main-2), 0.5) 65%,
+                rgba(var(--rgb-main-3), 0.7) 66%);
+        --btn-border-radius-dark: var(--radius-lg);
+    }
+
+    /* ----------Outlined State------------ */
+    .btn\:outlined:focus:not(:active),
+    .btn\:outlined.btn-state\:focus:not(:active) {
+        --btn-border-dark: 2px solid rgb(var(--rgb-main-1));
+        --btn-outline-dark: 0.1px solid rgba(var(--rgb-main-1), 0.5);
+        --btn-outline-offset-dark: -5px;
+    }
+
+    .btn\:outlined:hover,
+    .btn\:outlined.btn-state\:hover {
+        --btn-background-dark: rgba(var(--rgb-main-3), 0.5);
+    }
+
+    .btn\:outlined:active,
+    .btn\:outlined.btn-state\:active {
+        --btn-background-dark: radial-gradient(107% 112% at 65% 103%,
+                rgba(var(--rgb-main-2), 0.5) 65%,
+                rgba(var(--rgb-main-2), 0.3) 66%);
+        --btn-border-radius-dark: var(--radius-lg);
+    }
+
+    /* ----------Text State----------------- */
+    .btn\:text:focus:not(:active),
+    .btn\:text.btn-state\:focus:not(:active) {
+        --btn-border-dark: 2px solid rgb(var(--rgb-main-1));
+        --btn-outline-dark: 0.1px solid rgba(var(--rgb-main-1), 0.5);
+        --btn-outline-offset-dark: -5px;
+    }
+
+    .btn\:text:hover,
+    .btn\:text.btn-state\:hover {
+        --btn-background-dark: rgba(var(--rgb-main-3), 0.5);
+    }
+
+    .btn\:text:active,
+    .btn\:text.btn-state\:active {
+        --btn-background-dark: radial-gradient(107% 112% at 65% 103%,
+                rgba(var(--rgb-main-2), 0.5) 65%,
+                rgba(var(--rgb-main-2), 0.3) 66%);
+        --btn-border-radius-dark: var(--radius-lg);
+    }
+}
+/* ================Base Type====================*/
+.m3-btn {
+    /* boxing */
+    border-radius: var(--btn-border-radius);
+    height: var(--btn-height);
+    padding: var(--btn-padding);
+    margin-top: var(--btn-margin-top);
+    gap: var(--btn-gap);
+
+    /* layout */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    /* color */
+    background: var(--btn-background-dark, var(--btn-background));
+    color: var(--btn-color-dark, var(--btn-color));
+    box-shadow: var(--btn-box-shadow-dark, var(--btn-box-shadow));
+    border: var(--btn-border-dark, var(--btn-border));
+    outline: var(--btn-outline-dark, var(--btn-outline));
+    outline-offset: var(--btn-outline-offset);
+
+    /* content */
+    font-family: roboto;
+    font-variation-settings: 'FILL' var(--btn-fill);
+    font-size: var(--btn-font-size);
+    font-weight: var(--btn-font-weight);
+    line-height: var(--btn-line-height);
+    letter-spacing: var(--btn-letter-spacing);
+
+    /* effect */
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+/* ================Light Mode===================*/
+.m3-btn:disabled,
+.m3-btn.btn-state\:disabled {
+    --btn-background: rgba(var(--rgb-base-10), 0.08);
+    --btn-color: rgba(var(--rgb-base-10), 0.2);
+    --btn-box-shadow: none;
+    --btn-border: none;
+    --btn-outline: none;
+}
+.m3-btn:focus:not(:active),
+.btn-state\:focus:not(:active) {
+    --btn-border: 2px solid rgba(var(--rgb-base-1), 1);
+    --btn-outline: 2.5px solid rgba(var(--rgb-main-2), 1);
+}
+.m3-btn:hover,
+.btn-state\:hover {
+    --btn-background: rgba(var(--rgb-main-2), 0.7);
+}
+.m3-btn:active,
+.btn-state\:active {
+    --btn-background: radial-gradient(144% 100% at 80% 94%,
+            rgba(var(--rgb-main-2), 0.7) 65%,
+            rgba(var(--rgb-main-2), 1) 66%);
+    --btn-border-radius: var(--radius-lg);
+}
+.btn\:elevated {
+    /* boxing */
+    --btn-background: linear-gradient(161deg,
+            rgba(var(--rgb-main-1), 0.01) 0%,
+            rgba(var(--rgb-main-1), 0.2) 100%);
+    --btn-box-shadow: 0px 0.7px 2px 0.5px rgba(var(--rgb-base-10), 0.5);
+
+    /* content */
+    --btn-color: rgb(var(--rgb-main-2));
+}
+.btn\:tonal {
+    /* boxing */
+    --btn-background: radial-gradient(144% 100% at 80% 94%,
+            rgba(var(--rgb-main-1), 1) 0%,
+            rgba(var(--rgb-main-1), 0.7) 100%);
+
+    /* content */
+    --btn-color: rgb(var(--rgb-main-3));
+}
+.btn\:outlined {
+    /* boxing */
+    --btn-background: none;
+    --btn-border: 1px solid rgba(var(--rgb-main-3), 0.2);
+
+    /* content */
+    --btn-color: rgb(var(--rgb-main-3));
+}
+.btn\:text {
+    /* boxing */
+    --btn-background: none;
+    --btn-border: none;
+    --btn-outline: none;
+
+    /* content */
+    --btn-color: rgb(var(--rgb-main-2));
+}
+/* ----------Elevated State------------ */
+.btn\:elevated:focus:not(:active),
+.btn\:elevated.btn-state\:focus:not(:active) {
+    --btn-border: 2px solid rgb(var(--rgb-main-3));
+    --btn-outline: 0.3px solid rgba(var(--rgb-main-3), 0.3);
+    --btn-outline-offset: -4px;
+}
+.btn\:elevated:hover,
+.btn\:elevated.btn-state\:hover {
+    --btn-background: linear-gradient(161deg,
+            rgba(var(--rgb-main-1), 0.1) 0%,
+            rgba(var(--rgb-main-1), 0.5) 100%);
+}
+.btn\:elevated:active,
+.btn\:elevated.btn-state\:active {
+    --btn-background: radial-gradient(107% 112% at 65% 103%,
+            rgba(var(--rgb-main-1), 0.4) 65%,
+            rgba(var(--rgb-main-1), 0.2) 66%);
+    --btn-border-radius: var(--radius-lg);
+}
+/* ----------Tonal State---------------- */
+.btn\:tonal:focus:not(:active),
+.btn\:tonal.btn-state\:focus:not(:active) {
+    --btn-border: 2px solid rgb(var(--rgb-base-1));
+    --btn-outline: 2.5px solid rgb(var(--rgb-main-2));
+}
+.btn\:tonal:hover,
+.btn\:tonal.btn-state\:hover {
+    --btn-background: linear-gradient(161deg,
+            rgba(var(--rgb-main-1), 0.5) 8%,
+            rgba(var(--rgb-main-1), 0.6) 81%);
+}
+.btn\:tonal:active,
+.btn\:tonal.btn-state\:active {
+    --btn-background: radial-gradient(107% 112% at 65% 103%,
+            rgba(var(--rgb-main-1), 1) 65%,
+            rgba(var(--rgb-main-1), 0.8) 66%);
+    --btn-border-radius: var(--radius-lg);
+}
+/* ----------Outlined State------------ */
+.btn\:outlined:focus:not(:active),
+.btn\:outlined.btn-state\:focus:not(:active) {
+    --btn-border: 2px solid rgb(var(--rgb-main-3));
+    --btn-outline: 0.3px solid rgba(var(--rgb-main-3), 0.3);
+    --btn-outline-offset: -4px;
+}
+.btn\:outlined:hover,
+.btn\:outlined.btn-state\:hover {
+    --btn-background: linear-gradient(161deg,
+            rgba(var(--rgb-main-1), 0.01) 0%,
+            rgba(var(--rgb-main-1), 0.2) 100%);
+}
+.btn\:outlined:active,
+.btn\:outlined.btn-state\:active {
+    --btn-background: radial-gradient(107% 112% at 65% 103%,
+            rgba(var(--rgb-main-1), 0.4) 65%,
+            rgba(var(--rgb-main-1), 0.2) 66%);
+    --btn-border-radius: var(--radius-lg);
+}
+/* ----------Text State----------------- */
+.btn\:text:focus:not(:active),
+.btn\:text.btn-state\:focus:not(:active) {
+    --btn-border: 2px solid rgb(var(--rgb-main-3));
+    --btn-outline: 0.3px solid rgba(var(--rgb-main-3), 0.3);
+    --btn-outline-offset: -4px;
+}
+.btn\:text:hover,
+.btn\:text.btn-state\:hover {
+    --btn-background: linear-gradient(161deg,
+            rgba(var(--rgb-main-1), 0.01) 0%,
+            rgba(var(--rgb-main-1), 0.2) 100%);
+}
+.btn\:text:active,
+.btn\:text.btn-state\:active {
+    --btn-background: radial-gradient(107% 112% at 65% 103%,
+            rgba(var(--rgb-main-1), 0.4) 65%,
+            rgba(var(--rgb-main-1), 0.2) 66%);
+    --btn-border-radius: var(--radius-lg);
+}
+/* ================Button Size===================*/
+.btn-shape\:square {
+    --btn-border-radius: 12px;
+}
+.btn-size\:xs {
+    /* boxing */
+    --btn-height: var(--space-19);
+    --btn-padding: 0 var(--space-6);
+
+    /* content */
+    --btn-font-size: var(--space-8);
+    --btn-font-weight: var(--font-weight-medium);
+    --btn-line-height: var(--space-13);
+    --btn-letter-spacing: 0.1px;
+}
+.btn-size\:xs.btn-shape\:square {
+    --btn-border-radius: 12px;
+}
+.btn-size\:m {
+    /* boxing */
+    --btn-height: var(--space-28);
+    --btn-padding: 0 var(--space-15);
+
+    /* content */
+    --btn-font-size: var(--space-10);
+    --btn-font-weight: var(--font-weight-medium);
+    --btn-line-height: var(--space-15);
+    --btn-letter-spacing: 0.15px;
+}
+.btn-size\:m.btn-shape\:square {
+    --btn-border-radius: 16px;
+}
+.btn-size\:l {
+    /* boxing */
+    --btn-height: var(--space-32);
+    --btn-padding: 0 var(--space-24);
+
+    /* content */
+    --btn-font-size: var(--space-15);
+    --btn-font-weight: 600;
+    --btn-line-height: var(--space-19);
+    --btn-letter-spacing: 0px;
+}
+.btn-size\:l.btn-shape\:square {
+    --btn-border-radius: 28px;
+}
+.btn-size\:xl {
+    /* boxing */
+    --btn-height: var(--space-35);
+    --btn-padding: 0 var(--space-29);
+
+    /* content */
+    --btn-font-size: var(--space-19);
+    --btn-font-weight: 600;
+    --btn-line-height: var(--space-22);
+    --btn-letter-spacing: 0px;
+}
+.btn-size\:xl.btn-shape\:square {
+    --btn-border-radius: 28px;
+}
+/* 체크박스 변수 */
+.m3-checkbox {
+    --checkbox-main-color: var(--color-main-2);
+    --checkbox-icon-color: var(--color-white);
+    --checkbox-border-color: var(--color-base-8);
+    --checkbox-outline-color: var(--color-main-2);
+    --checkbox-text-color: var(--color-base-8);
+    --checkbox-opacity: var(--opacity-0);
+    --checkbox-icon-content: "\e5ca";
+    --checkbox-transparent-0: transparent 0%;
+    --checkbox-transparent-38: transparent 38%;
+    --checkbox-transparent-92: transparent 92%;
+    --checkbox-transparent-100: transparent 100%;
+    --background-gradient: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(106, 142, 41, 0.3) 50%, rgba(106, 142, 41, 0.5) 100%);
+}
+/* 다크모드 */
+@media (prefers-color-scheme: dark) {
+    .m3-checkbox {
+        --checkbox-main-color: var(--color-main-1);
+        --checkbox-icon-color: var(--color-main-3);
+        --checkbox-outline-color: var(--color-main-1);
+        --color-main-2: var(--color-main-1);
+        --background-gradient: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(140, 186, 53, 0.3) 50%, rgba(140, 186, 53, 0.5) 100%);
+    }
+}
+/* 체크박스 동작 트랜지션 */
+.m3-checkbox,
+.m3-checkbox input[type="checkbox"]::after,
+.m3-checkbox input[type="checkbox"]::before {
+    transition: all 0.3s ease;
+}
+.m3-checkbox {
+    display: inline-flex;
+    align-items: center;
+    padding: 15px;
+    cursor: pointer;
+    user-select: none;
+    font-size: 16px;
+    color: var(--checkbox-text-color);
+}
+.m3-checkbox input[type="checkbox"] {
+    appearance: none;
+    position: relative;
+    margin-right: 20px;
+    /* 크기/모양 */
+    width: 18px;
+    height: 18px;
+    border-radius: 2px;
+    border: 2px solid var(--checkbox-border-color);
+    box-sizing: border-box;
+}
+.m3-checkbox input[type="checkbox"]::after {
+    /* 레이아웃 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 크기/모양 */
+    width: inherit;
+    height: inherit;
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    background-color: var(--checkbox-main-color);
+    border-color: var(--checkbox-main-color);
+    border-radius: 2px;
+    /* 컨텐츠 */
+    content: var(--checkbox-icon-content);
+    font-family: "Material Symbols Outlined";
+    font-size: 18px;
+    font-weight: var(--font-weight-medium);
+    color: var(--checkbox-icon-color);
+    opacity: var(--checkbox-opacity);
+}
+.m3-checkbox input[type="checkbox"]::before {
+    display: inline-flex;
+    /* 크기/모양 */
+    content: "";
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    outline: 3px solid var(--checkbox-outline-color);
+    background: var(--checkbox-main-color);
+    opacity: var(--checkbox-opacity);
+}
+/* ⬇️state별 변수 구간 */
+.m3-checkbox input[type="checkbox"]:not(:disabled):checked::after {
+    --checkbox-icon-content: "\e5ca";
+    --checkbox-opacity: var(--opacity-100);
+}
+.m3-checkbox input[type="checkbox"]:disabled {
+    --checkbox-border-color: color-mix(in srgb, var(--color-base-8), var(--checkbox-transparent-38));
+    --checkbox-text-color: color-mix(in srgb, var(--color-base-8), var(--checkbox-transparent-38));
+}
+.m3-checkbox input[type="checkbox"]:not(:disabled):hover::before {
+    --checkbox-outline-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-100));
+    --checkbox-main-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-92));
+    --checkbox-opacity: var(--opacity-100);
+}
+.m3-checkbox input[type="checkbox"]:not(:disabled):focus::before {
+    --checkbox-outline-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-0));
+    --checkbox-main-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-100));
+    --checkbox-opacity: var(--opacity-100);
+}
+.m3-checkbox input[type="checkbox"]:not(:disabled):active::before {
+    --checkbox-outline-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-100));
+    --checkbox-main-color: var(--background-gradient);
+    --checkbox-opacity: var(--opacity-90);
+}
+.m3-checkbox.checkbox-mode\:indeterminate input[type="checkbox"]::after {
+    --checkbox-icon-content: "\f88a" !important;
+}
+/* ⬇️각 상태를 기본으로 하는  정적인 상태의 체크박스 */
+.m3-checkbox.checkbox-state\:enabled input[type="checkbox"]::after {
+    --checkbox-icon-content: "\e5ca";
+    --checkbox-opacity: var(--opacity-100);
+}
+.m3-checkbox.checkbox-state\:unselected-disabled input[type="checkbox"] {
+    --checkbox-border-color: color-mix(in srgb, var(--color-base-8), var(--checkbox-transparent-38));
+    --checkbox-text-color: color-mix(in srgb, var(--color-base-8), var(--checkbox-transparent-38));
+}
+.m3-checkbox.checkbox-state\:hovered input[type="checkbox"]::before {
+    --checkbox-outline-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-100));
+    --checkbox-main-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-92));
+    --checkbox-opacity: var(--opacity-100);
+}
+.m3-checkbox.checkbox-state\:focused input[type="checkbox"]::before {
+    --checkbox-outline-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-0));
+    --checkbox-main-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-100));
+    --checkbox-opacity: var(--opacity-100);
+}
+.m3-checkbox.checkbox-state\:pressed input[type="checkbox"]::before {
+    --checkbox-outline-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-100));
+    --checkbox-main-color: var(--background-gradient);
+    --checkbox-opacity: var(--opacity-90);
+}
+/* =========================================
+   M3 Radio Button Variables
+   Google Material Design 3 스타일 변수 정의
+   ========================================= */
+.m3-radio {
+    /* 크기 및 간격 */
+    --radio-size: 20px;       /* 라디오 버튼 크기 */
+    --radio-touch-size: 48px;       /* 터치 영역 크기 (접근성) */
+    --radio-stroke-width: 2px;      /* 테두리 두께 */
+    --radio-inner-stroke-width: 5px; /* 내부 점 크기 제어용 테두리 */
+    --radio-inner-dot-size: 10px;   /* 내부 점 크기 (참조용) */
+    --radio-spacing-label: 15px;    /* 라디오와 라벨 사이 간격 */
+    --radio-label-size: 15px;       /* 라벨 폰트 크기 */
+
+    /* 버튼속성 */
+    --radio-display: inline-flex;
+    --radio-align-items: center;
+    --radio-cursor: pointer;
+    --radio-user-select: none;
+
+    /* 색상 */
+    --radio-select-primary: var(--color-main-2);   /* 선택 컬러 */
+    --radio-unselect-primary: var(--color-base-9); /* 미선택 컬러 */
+    --radio-focus-ring: 3px;
+
+    /* 버튼스타일 before,after */
+    --radio-transform: translate(-50%, -50%);
+    --radio-pointer: none;
+    --radio-box-sizing: border-box;
+    --radio-transition: all 180ms ease;
+    --radio-border-color: var(--radio-unselect-primary);
+    --radio-border-color-checked: var(--radio-select-primary);
+    --radio-background-color: transparent;
+    /* 액션 스타일 hover, press, focus */
+    --radio-box-shadow: none;
+    --radio-background-color: transparent;
+    --radio-outline: none;
+    --radio-outline-offset: 0;
+    --radio-outline-offset-focus: 5px;
+    
+    /* 투명도 (Opacity) */
+    --alpha-1: 8%;
+    --alpha-2: 10%;
+    --alpha-3: 62%;
+
+    /* 투명도 (Color Mix용) */
+    --transparent-1: 10%;
+    --transparent-2: 90%;
+    --transparent-3: 92%;
+    --transparent-disabled: 62%;
+    
+    
+}
+/* 다크 모드 오버라이드 */
+@media (prefers-color-scheme: dark) {
+    .m3-radio {
+        --radio-select-primary: var(--color-main-1);
+    }
+}
+/* =========================================
+   Container & Layout
+   ========================================= */
+.m3-radio {
+    display: var(--radio-display);
+    align-items: var(--radio-align-items);
+    cursor: var(--radio-cursor);
+    user-select: var(--radio-user-select);
+    gap: var(--radio-spacing-label);
+}
+/* =========================================
+   Input Reset & Touch Area
+   기본 라디오 버튼 숨김 및 커스텀 스타일 공간 확보
+   ========================================= */
+.m3-radio input[type="radio"] {
+    appearance: none;             /* 기본 브라우저 스타일 제거 */
+    width: var(--radio-touch-size); /* 터치 영역 확보 */
+    height: var(--radio-touch-size);
+    margin: var(--scale-0);
+    border: none;
+    position: relative;
+    background-color: var(--radio-background-color);
+    cursor: var(--radio-cursor);
+}
+/* =========================================
+   Pseudo-elements Setup
+   ::before -> 외부 링
+   ::after  -> 내부 점
+   ========================================= */
+.m3-radio input[type="radio"]::before,
+.m3-radio input[type="radio"]::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+
+    transform: var(--radio-transform); /* 중앙 정렬 */
+    pointer-events: var(--radio-pointer);
+    box-sizing: var(--radio-box-sizing);
+    transition: var(--radio-transition);
+}
+/* 외부 링 (Unchecked State) */
+.m3-radio input[type="radio"]::before {
+    width: var(--radio-size);
+    height: var(--radio-size);
+    border-radius: var(--radius-8); /* 원형 */
+    border: var(--radio-stroke-width) solid var(--radio-unselect-primary);
+    box-shadow: var(--radio-box-shadow);
+    background-color: var(--radio-background-color);
+    outline: var(--radio-outline);
+    outline-offset: var(--radio-outline-offset);
+}
+/* 내부 점 (Hidden by default) */
+.m3-radio input[type="radio"]::after {
+    width: 0;
+    height: 0;
+    border-radius: var(--radius-8);
+    border: var(--radio-inner-stroke-width) solid var(--radio-select-primary);
+    opacity: var(--opacity-0);
+}
+/* =========================================
+   States: Checked
+   ========================================= */
+/* 체크 시 외부 링 색상 변경 */
+.m3-radio input[type="radio"]:checked::before {
+    border-color: var(--radio-border-color-checked);
+}
+/* 체크 시 내부 점 표시 */
+.m3-radio input[type="radio"]:checked::after {
+    opacity: var(--opacity-100);
+}
+/* =========================================
+   States: Hover
+   Hover 시 배경에 희미한 원(Ripple) 표시
+   ========================================= */
+.m3-radio input[type="radio"]:hover::before {
+    /* box-shadow로 Ripple 효과 구현 */
+    --radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-3));
+    --radio-background-color: color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-2));
+}
+.m3-radio input[type="radio"]:checked:hover::before {
+    --radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-3));
+    --radio-background-color: color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-2));
+}
+/* =========================================
+   States: Active (Press)
+   눌렀을 때 진한 Ripple 표시
+   ========================================= */
+.m3-radio input[type="radio"]:active::before {
+    --radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-2));
+    --radio-background-color: color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-2));
+}
+.m3-radio input[type="radio"]:checked:active::before {
+    --radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-2));
+    --radio-background-color: color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-2));
+}
+/* =========================================
+   States: Focus
+   키보드 접근성 등을 위한 포커스 링
+   ========================================= */
+.m3-radio input[type="radio"]:focus::before {
+    --radio-outline: 1px solid color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-1));
+    --radio-outline-offset: var(--radio-outline-offset-focus);
+}
+.m3-radio input[type="radio"]:checked:focus::before {
+    --radio-outline: 1px solid color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-1));
+    --radio-outline-offset: var(--radio-outline-offset-focus);
+}
+/* =========================================
+   States: Disabled
+   ========================================= */
+.m3-radio input[type="radio"]:disabled {
+    cursor: not-allowed;
+    box-shadow: none;
+}
+.m3-radio input[type="radio"]:checked:disabled::before,
+.m3-radio input[type="radio"]:checked:disabled::after,
+.m3-radio input[type="radio"]:disabled::before,
+.m3-radio input[type="radio"]:disabled::after {
+    --radio-border-color: color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-disabled));
+    background-color: transparent;
+    box-shadow: none;
+}
+/* =========================================
+   Label
+   ========================================= */
+.m3-radio .m3-radio-label {
+    font-size: var(--radio-label-size);
+    color: var(--radio-unselect-primary);
+}
+/* =========================================
+   Helpers: Force States
+   테스트 또는 강제 상태 표현용 클래스
+   (.radio:hover, .radio:press, .radio:focus)
+   ========================================= */
+/* Hover Force */
+.radio\:hover input[type="radio"]::before {
+    --radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-3));
+    --radio-background-color: color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-2));
+}
+.radio\:hover input[type="radio"]:checked::before {
+    --radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-3));
+    --radio-background-color: color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-2));
+}
+/* Press Force */
+.radio\:press input[type="radio"]::before {
+    --radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-2));
+    --radio-background-color: color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-2));
+}
+.radio\:press input[type="radio"]:checked::before {
+    --radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-2));
+    --radio-background-color: color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-2));
+}
+/* Focus Force */
+.radio\:focus input[type="radio"]::before {
+    --radio-outline: 1px solid color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-1));
+    --radio-outline-offset: var(--radio-outline-offset-focus);
+}
+.radio\:focus input[type="radio"]:checked::before {
+    --radio-outline: 1px solid color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-1));
+    --radio-outline-offset: var(--radio-outline-offset-focus);
+}
+.m3-card {
+    /* 추가 변수 선언 */
+    --overflow-hidden: hidden;
+    --cursor-pointer: pointer;
+    --cursor-grab: grab;
+    --cursor-not-allowed: not-allowed;
+
+
+    /* ========== 카드의 변수 선언(기본값) ========== */
+    /* boxing */
+    --card-background: var(--color-base-1);
+    --card-width: auto;
+    --card-height: auto;
+    --card-padding: var(--space-10);
+    --card-border: none;
+    /* --card-border: var(--border-width-2) solid var(--color-base-2); */
+    --card-border-radius: var(--radius-xl);
+    --card-box-shadow: 0 var(--space-1) var(--space-3) rgba(0, 0, 0, var(--opacity-40)),
+        0 var(--space-1) var(--space-2) rgba(0, 0, 0, var(--opacity-50));
+    --card-opacity: var(--opacity-100);
+    --card-outline: none;
+    --card-outline-offset: 0;
+    --card-transform: none;
+    
+    /* 상태별 변수 */
+    --card-focused-outline-color: var(--color-base-8);
+    
+    /* overlay */
+    --card-overflow: var(--overflow-hidden);
+
+    /* effect */
+    --card-cursor: var(--cursor-pointer);
+    --card-transition: box-shadow var(--duration-5) var(--ease-out),
+        transform var(--duration-5) var(--ease-out),
+        opacity var(--duration-5) var(--ease-out);
+
+    /* ========== 카드 내부 컨텐츠의 변수 선언(기본값) ========== */
+    /* boxing */
+    --card-content-padding: var(--space-10);
+    
+    /* ========== 카드 내부 헤드라인의 변수 선언(기본값) ========== */
+    /* boxing */
+    --card-headline-margin-bottom: var(--space-3);
+
+    /* font */
+    --card-headline-font-size: var(--size-15);
+    --card-headline-font-weight: var(--font-weight-semibold);
+    --card-headline-color: var(--color-base-10);
+    --card-headline-line-height: var(--size-19);
+    --card-headline-letter-spacing: 0;
+
+    /* ========== 카드 내부 서브헤드의 변수 선언(기본값) ========== */
+    /* boxing */
+    --card-subhead-margin-bottom: var(--space-3);
+
+    /* font */
+    --card-subhead-font-size: var(--size-10);
+    --card-subhead-font-weight: var(--font-weight-normal);
+    --card-subhead-color: var(--color-base-8);
+    --card-subhead-line-height: var(--size-13);
+    --card-subhead-letter-spacing: 0;
+
+    /* font */
+    --card-supporting-text-font-size: var(--size-6);
+    --card-supporting-text-font-weight: var(--font-weight-normal);
+    --card-supporting-text-color: var(--color-base-10);
+    --card-supporting-text-line-height: var(--size-9);
+    --card-supporting-text-margin-bottom: var(--space-2);
+    --card-supporting-text-letter-spacing: 0;
+}
+/* ====== 다크 모드 ====== */
+@media (prefers-color-scheme: dark) {
+    .m3-card {
+        /* 다크모드에서 변경되는 변수들만 재정의 */
+        --card-background: var(--color-base-2);
+        --card-headline-color: var(--color-base-10);
+        --card-subhead-color: var(--color-base-8);
+        --card-supporting-text-color: var(--color-base-9);
+    }
+
+    .m3-card.card-state\:focused {
+        --card-focused-outline-color: var(--color-accent-2);
+    }
+}
+/* ====== LIGHT MODE (Default) ====== */
+/* 카드 컨테이너 */
+.m3-card {
+    /* boxing */
+    background: var(--card-background);
+    width: var(--card-width);
+    height: var(--card-height);
+    padding: var(--card-padding);
+    border: var(--card-border);
+    border-radius: var(--card-border-radius);
+    box-shadow: var(--card-box-shadow);
+    opacity: var(--card-opacity);
+    outline: var(--card-outline);
+    outline-offset: var(--card-outline-offset);
+    transform: var(--card-transform);
+    /* layout */
+    overflow: var(--card-overflow);
+
+    /* effect */
+    cursor: var(--card-cursor);
+    transition: var(--card-transition);
+}
+/* 카드 상태 */
+.m3-card.card-state\:enabled {
+    --card-opacity: var(--opacity-100);
+    --card-box-shadow: 0px solid black;
+}
+.m3-card.card-state\:disabled,
+.m3-card.card-state\:disabled button {
+    --card-opacity: var(--opacity-60);
+    --card-cursor: var(--cursor-not-allowed);
+}
+.m3-card.card-state\:hovered {
+    --card-box-shadow: 0 var(--space-4) var(--space-4) rgba(0, 0, 0, 0.16),
+        0 var(--space-2) var(--space-4) rgba(0, 0, 0, 0.23);
+    --card-opacity: var(--opacity-90);
+}
+.m3-card.card-state\:focused {
+    --card-box-shadow: 0 var(--space-4) var(--space-4) rgba(0, 0, 0, 0.16),
+        0 var(--space-2) var(--space-4) rgba(0, 0, 0, 0.23);
+    --card-outline: 3px solid var(--card-focused-outline-color);
+    --card-outline-offset: var(--space-2);
+    --card-opacity: var(--opacity-90);
+}
+.m3-card.card-state\:dragged {
+    --card-box-shadow: 0 var(--space-4) var(--space-10) rgba(0, 0, 0, var(--opacity-25)),
+        0 var(--space-6) var(--space-6) rgba(0, 0, 0, var(--opacity-30));
+    --card-transform: scale(1.02);
+    --card-opacity: var(--opacity-80);
+    --card-cursor: var(--cursor-grap);
+}
+/* 카드 컨텐츠 */
+.m3-card .content {
+    padding: var(--card-content-padding);
+    
+}
+.m3-card .headline {
+    font-size: var(--card-headline-font-size);
+    font-weight: var(--card-headline-font-semibold);
+    color: var(--card-headline-color);
+    line-height: var(--card-headline-line-height);
+    margin-bottom: var(--card-headline-margin-bottom);
+    letter-spacing: var(--card-headline-letter-spacing);
+}
+.m3-card .subhead {
+    font-size: var(--card-subhead-font-size);
+    font-weight: var(--card-subhead-font-weight);
+    color: var(--card-subhead-color);
+    line-height: var(--card-subhead-line-height);
+    margin-bottom: var(--card-subhead-margin-bottom);
+    letter-spacing: var(--card-subhead-letter-spacing);
+}
+.m3-card .supporting-text {
+    font-size: var(--card-supporting-text-font-size);
+    font-weight: var(--card-supporting-text-font-weight);
+    color: var(--card-supporting-text-color);
+    line-height: var(--card-supporting-text-line-height);
+    margin-bottom: var(--card-supporting-text-margin-bottom);
+    letter-spacing: var(--card-supporting-text-letter-spacing);
+}
+.m3-dialog {
+    /* =====공통 상수 variables.css에서 정의 어떤값 사용했는지 주석으로 표시 ===== */
+    /* color */
+    /* --color-base-10: #000000;
+    --color-base-9: #191919;
+    --color-base-8: #585858;
+    --color-sub-2: #2570b6;
+    --color-sub-1: #2983d7;
+    --color-base-4: #b3b3b3;
+    --color-base-2: #d7d7d7;
+    --color-base-3: #e5e7eb; */
+
+    /* font size */
+    /* --space-15: 24px;
+    --space-8: 14px;
+     */
+
+    /* radius */
+    /* --space-17: 28px; */
+
+    /* opacity */
+    /* --opacity-10: 0.1; */
+
+    /* padding */
+    /* --space-15: 24px;
+    --space-14: 22px;
+    --space-13: 20px;
+    --space-12: 18px;
+    --space-10: 16px;
+    --space-8: 14px;
+    --space-6: 12px;
+    --space-5: 10px;
+    --space-4: 8px;
+    --space-3: 4px;
+    --space-2: 2px;
+    --space-1: 1px; */
+
+
+    /* margin */
+    /* --space-15: 24px;
+    --space-14: 22px;
+    --space-13: 20px;
+    --space-12: 18px;
+    --space-10: 16px;
+    --space-8: 14px;
+    --space-6: 12px;
+    --space-5: 10px;
+    --space-4: 8px;
+    --space-3: 4px;
+    --space-2: 2px;
+    --space-1: 1px; */
+
+    /* gap */
+    /* --space-4: 8px;
+    --space-3: 4px;
+    --space-2: 2px;
+    --space-1: 1px; */
+
+    /* line height */
+    /* --space-13: 20px;
+    --space-10: 16px;
+    --space-6: 12px;
+    --space-4: 8px;
+    --space-3: 4px; */
+
+    /* width, height */
+    /* 문서에는 최소, 최대 넓이로 나와있어서 수정하였음 */
+    --dialog-spec-min-width: 280px;
+    --dialog-spec-max-width: 560px;
+
+    /*======================= 변수 =======================*/
+    /* 여기서만 수정한다 */
+    --dialog-bg-color: var(--color-base-3);
+    --dialog-radius: var(--space-17);
+    --dialog-padding: var(--space-15);
+    --dialog-min-width: var(--dialog-spec-min-width);
+    --dialog-max-width: var(--dialog-spec-max-width);
+
+    --dialog-color: var(--color-base-8);
+
+    --dialog-headline-font-color: var(--color-base-10);
+    --dialog-headline-font-size: var(--space-15);
+    --dialog-headline-font-weight: var(--font-weight-4);
+    --dialog-headline-margin-bottom: var(--space-14);
+
+    --dialog-content-font-color: var(--color-base-8);
+    --dialog-content-font-size: var(--space-8);
+    --dialog-content-margin-bottom: var(--space-15);
+    --dialog-content-line-height: var(--space-13);
+
+    --dialog-actions-gap: var(--space-4);
+
+    --dialog-btn-color: var(--color-sub-2);
+    --dialog-btn-padding: var(--space-12) var(--space-10);
+
+    /* Text Button specific */
+    /* --dialog-opacity-1: 0.08 -> 8% */
+    --dialog-hovered-bg: color-mix(in srgb, var(--dialog-btn-color) 8%, transparent);
+    --dialog-focused-bg: color-mix(in srgb, var(--dialog-btn-color) 10%, transparent);
+    --dialog-pressed-bg: color-mix(in srgb, var(--dialog-btn-color) 10%, transparent);
+}
+/* ====다크모드 테마==== */
+@media (prefers-color-scheme: dark) {
+    .m3-dialog {
+        --dialog-bg-color: var(--color-base-3);
+        --dialog-headline-font-color: var(--color-base-10);
+        --dialog-content-font-color: var(--color-base-8);
+        --dialog-btn-color: var(--color-sub-2);
+    }
+}
+/* ====기본 테마==== */
+.m3-dialog {
+    position: fixed;
+    /* top, right, bottom, left 값을 한 번에 지정하는 속성 */
+    inset: 0;
+    margin: auto;
+    width: fit-content;
+    height: fit-content;
+
+    /* backdrop */
+    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
+
+    /* moved from .modal-container */
+    background: var(--dialog-bg-color);
+    padding: var(--dialog-padding);
+    border-radius: var(--dialog-radius);
+    min-width: var(--dialog-min-width);
+    max-width: var(--dialog-max-width);
+    box-sizing: border-box;
+
+    color: var(--dialog-color);
+    font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+
+    flex-direction: column;
+
+    .header,
+    > :first-child {
+        margin: 0 0 var(--dialog-headline-margin-bottom) 0;
+        color: var(--dialog-headline-font-color);
+        font-size: var(--dialog-headline-font-size);
+        font-weight: var(--dialog-headline-font-weight);
+    }
+
+    .content,
+    > :nth-child(2) {
+        margin: 0 0 var(--dialog-content-margin-bottom) 0;
+        color: var(--dialog-content-font-color);
+        font-size: var(--dialog-content-font-size);
+        line-height: var(--dialog-content-line-height);
+    }
+
+    .actions,
+    > :nth-child(3) {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--dialog-actions-gap);
+    }
+}
+/* === 1. n-btn & STRUCTURE === */