:root {


  
  --w-wide:  1920px;   
  --w:       1820px;   
  --w-shop:  1080px;   
  --w-text:   760px;   
  --w-form:   440px;   

  

  
  --gutter:  clamp(20px, 4.2vw, 72px);
  --header-h: 62px;

  
  --cols:    12;
  --col-gap: clamp(16px, 1.6vw, 32px);


  
  --lav-50:  #FAF9FC;   
  --lav-100: #F3F1F7;   
  --lav-200: #E5E1EC;   
  --lav-300: #C7BBE2;   
  --lav-400: #AD9ED1;
  --lav-500: #9382C0;
  --lav-600: #7963B0;
  --lav-700: #67509F;   
  --lav-800: #43385C;
  --lav-900: #332A41;   
  --lav-950: #241E2F;   

  

  
  --nanal-point:      var(--lav-700);   
  --nanal-point-mist: var(--lav-100);

  
  --ink:     #121212;          
  --ink-2:   #464646;          
  --ink-3:   #717171;          
  --line:    #E7E7E7;          
  --ink-placeholder: #A3A3A3;   

  
  --link:       var(--ink-2);   
  --link-quiet: var(--ink-3);   
  --link-hover: var(--ink);     
  --link-dim:   72%;            
  --link-line:  50%;            

  --paper:   #FFFFFF;          
  --paper-2: var(--lav-50);    
  --bg-warm:  #FAF8F5;         
  --bg-stone: #EFEDE8;         
  --bg-note:  #F5F5F5;         
  --dark:    var(--lav-900);   

  
  --ph-bg:   #EFEFEF;
  --ph-line: rgba(0, 0, 0, .06);
  --ph-ink:  #949499;

  --on-dark:     #F0EEF2;
  --on-dark-dim: rgba(240, 238, 242, .64);
  --on-image:     rgba(246, 244, 248, .88);  

  
  --rgb-ink:   18, 18, 18;      
  --rgb-error: 211, 47, 47;    
  --rgb-plum:  67, 56, 92;      
  --rgb-point: 103, 80, 159;   
  --rgb-lilac: 199, 187, 226;   
  --rgb-paper: 255, 255, 255;   

  
  --state-error:     #D32F2F;   
  --state-ok:        #2C6A50;   
  --state-off:       var(--ink-3);        
  --state-off-bg:    #F5F5F5;             

  --header-bg:  rgba(var(--rgb-paper), .86);
  --line-dark-soft: rgba(var(--rgb-lilac), .18);


  --font-kr: "NANAL Digits", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-latin: "DM Sans", var(--font-kr);   
  

  
  --fs-title: clamp(24px, 2.8vw, 34px);   
  --fs-ui-12: 12px;   
  --fs-ui-13: 13px;   
  --fs-ui-14: 14px;   
  --fs-ui-15: 15px;   
  --fs-ui-16: 16px;   
  --fs-ui-18: 18px;   
  --fs-ui-20: 20px;   
  --fs-ui-24: 24px;   
  --fs-ui-28: 28px;   
  

  
  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold:   700;
  
  --fw-body:   var(--fw-normal);     
  --fw-ui:     var(--fw-medium);     
  --fw-strong: var(--fw-semibold);   
  --fw-title:  var(--fw-bold);       


  
  --sp-1:  6px;
  --sp-2:  10px;
  --sp-3:  14px;
  --sp-4:  18px;
  --sp-5:  clamp(22px, 2.4vw, 28px);
  --sp-6:  clamp(26px, 3.2vw, 36px);
  --sp-7:  clamp(32px, 4vw,   48px);
  --sp-8:  clamp(40px, 5vw,   64px);
  --sp-9:  clamp(48px, 6vw,   80px);
  --sp-10: clamp(56px, 7vw,   96px);
  --sp-11: clamp(64px, 8vw,  104px);
  --sp-12: clamp(72px, 9vw,  120px);

  --section-y: clamp(96px, 12vw, 200px);   


  --hair: 1px solid var(--line);
  --hair-strong: 1px solid var(--ink);
  
  --rule-title: 2px solid var(--ink);

  
  --ease: cubic-bezier(.22, .61, .36, 1);

  --dur-fast:  .3s;    
  --dur:       .45s;   
  --dur-move:  .62s;   
  --dur-slow:  1s;     
}