:root {
  
  --color-ink: #2b2420;          
  --color-main: #005f7d;         
  --color-blue-deep: #00708f;    
  --color-main-2: #005f7d;       
  --color-blue: #008db7;         
  --color-blue-pale: rgb(0 141 183 / 0.16);   
  --color-yellow: #ffdc00;       
  --color-accent: #00789e;       
  --color-accent-2: #006a8c;     
  --color-base: #efe8dd;         
  --color-pale: #e6ddcf;         
  --color-paper: #fbf8f1;        
  --color-pink: #f08bb4;         
  --color-sky: #cfe6ef;          
  --color-wood: #b5844b;         
  --color-card: #f7f0dc;         
  --color-pin: #b8975a;          
  --color-tape: rgb(255 244 196 / 0.78);   
  --color-khaki: #e3d8bf;        
  --color-on-wood-line: rgb(255 246 226 / 0.75);  
  --color-line: #c9bfae;         
  --color-on-dark: #ffffff;      
  --color-on-dark-line: rgb(255 255 255 / 0.7);
  --color-error: #c8312b;        
  --color-shadow: rgb(43 36 32 / 0.16);
  --color-shadow-photo: rgb(43 36 32 / 0.12);  

  
  --bg-dark: url("assets/washi-blue.jpg"), var(--color-blue);   
  --bg-accent: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
  --bg-paper: url("assets/washi.jpg");   

  
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
  --font-head: "Slackside One", "Yusei Magic", "Zen Maru Gothic", cursive;
  --font-hand: "Slackside One", "Yusei Magic", "Zen Maru Gothic", cursive;
  --font-en: "Barlow Condensed", "Zen Maru Gothic", sans-serif;
  
  --fs-min: 13px;
  
  --fs-base: clamp(var(--fs-min), min(2.26dvh, 3.85vw), 15px);
  --fs-ui: max(var(--fs-min), 13px);   
  --fs-input: 16px;                     
  --fs-head: 2.45em;             
  --fs-copy: min(2.95em, 11.2vw); 
  --dd: 3.3em;                   
  --fs-hand: 1.05em;             
  --fw-body: 700;                
  --ls-body: 0.03em;
  --lh-body: 1.9;                
  --lh-head: 1.25;
  --ls-head: 0.04em;

  
  --col: 480px;                  
  --header-h: 56px;
  --gutter: 22px;                
  --sp-1: 0.45em;                
  --sp-p: 0.75em;                
  --sp-g: 1.1em;                 
  --pad-y: 1.2em;                
  --next-h: 0px;                 
  --radius-pill: 999px;
  --radius-s: 6px;
  --shadow-soft: 0 0 10px 0 var(--color-shadow);
  --shadow-column: 0 0 24px 0 var(--color-shadow);
  --shadow-photo: 0 1.5px 8px;   
  --tilt-a: -2.2deg;             
  --tilt-b: 1.8deg;

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rise: 24px;                  
  --dur-in: 500ms;
  --dur-hover: 300ms;
  --jitter: 0.9s;                
  --hill-h: 27%;                 
  --hill-t: 20s;                 
  --ticker: 28s;                 
}

@media (max-height: 600px) { :root { --pad-y: 0.7em; } }

@media (min-height: 860px) {
  :root { --fs-base: clamp(var(--fs-min), min(2.26dvh, 4.2vw), 17px); --sp-g: 2em; }
}