:root {
  --color-ink: #202020;          
  --color-main: #202020;         
  --color-main-2: #5b5b57;       
  --color-accent: #202020;       
  --color-accent-2: #202020;
  --color-base: #fcfcfc;         
  --color-cream: #f3e6bd;        
  --color-pale: #f3efe4;         
  --color-line: #cfcabd;         
  --color-on-dark: #fcfcfc;      
  --color-on-dark-line: rgb(252 252 252 / 0.72);
  --color-error: #b23a2b;
  --color-shadow: rgb(32 32 32 / 0.14);
  --color-hairline: rgb(32 32 32 / 0.08);       
  --color-card-dark: rgb(252 252 252 / 0.08);   
  --color-card-dark-line: rgb(252 252 252 / 0.22);
  
  --tag-green: #dee5bc;
  --tag-peach: #e5ccb0;
  --tag-gray: #d6dbd6;
  --tag-yellow: #f1e6c1;

  
  --bg-dark: var(--color-ink);
  --bg-accent: var(--color-ink);

  
  --font-body: "M PLUS 1p", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-head: "M PLUS 1p", "Hiragino Sans", sans-serif;
  --font-en: "M PLUS 1p", 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;
  --fw-body: 500;                
  --fw-strong: 800;              
  --ls-body: 0.03em;
  --lh-body: 1.8;
  --lh-head: 1.4;

  
  --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;               
  --radius-card: 20px;           
  --radius-btn: 24px 4px 24px 24px;  
  --shadow-soft: 0 10px 30px -12px var(--color-shadow);
  --shadow-column: 0 0 24px 0 var(--color-shadow);

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rise: 24px;
  --dur-in: 600ms;
  --dur-hover: 300ms;
}
@media (max-height: 600px) { :root { --pad-y: 0.7em; } }