:root {
  
  --color-ink: #10223b;          
  --color-main: #184A85;         
  --color-main-2: #184A85;
  --color-accent: #184A85;       
  --color-accent-2: #184A85;
  --color-lime: #A8D94F;         
  --color-base: #F4F7FB;         
  --color-white: #ffffff;
  --color-pale: #F4F7FB;
  --color-line: #c3cddb;         
  --color-on-dark: #ffffff;
  --color-on-dark-line: rgb(255 255 255 / 0.72);
  --grid-lime: rgb(255 255 255 / 0.42);   
  --grid-navy: rgb(255 255 255 / 0.13);   
  --bgmq-ink: rgb(24 74 133 / 0.07);      
  --bgmq-white: rgb(255 255 255 / 0.08);  
  --bgmq-onlime: rgb(255 255 255 / 0.22);  
  --color-error: #c8312b;
  --color-shadow: rgb(16 34 59 / 0.16);

  
  --bg-dark: var(--color-main);
  --bg-accent: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-2) 100%);

  
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-head: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-en: "Fraunces", "Zen Kaku Gothic New", serif;
  --fs-min: 13px;
  
  --fs-base: clamp(var(--fs-min), min(2.2dvh, 3.75vw), 14.5px);
  --fs-ui: max(var(--fs-min), 13px);
  --fs-input: 16px;
  --fw-body: 500;
  --ls-body: 0.04em;
  --lh-body: 1.75;
  --lh-head: 1.4;
  --fs-copy: 1.62em;             
  --fw-copy: 900;
  --lh-copy: 1.42;
  --fs-en-head: clamp(30px, 9vw, 40px);   
  --fs-en-xl: clamp(44px, 14vw, 64px);    

  
  --col: 480px;
  --header-h: 56px;
  --gutter: 22px;                
  --sp-1: 0.45em;
  --sp-p: 0.7em;
  --sp-g: 1.05em;
  --pad-y: 1.1em;
  --next-h: 0px;
  --radius-pill: 64px;           
  --radius-bubble: 22px;         
  --radius-card: 16px;           
  --radius-s: 6px;
  --stroke: 2px;                 
  --grid-size: 20px;             
  --shadow-soft: 0 0 10px 0 var(--color-shadow);
  --shadow-column: 0 0 24px 0 var(--color-shadow);

  
  --ease-out: cubic-bezier(0.4, 0.4, 0, 1);
  --rise: 18px;
  --dur-in: 400ms;
  --dur-hover: 200ms;
  --mq-pxs: 40;                  
  --reel-pxs: 30;                
}
@media (max-height: 600px) { :root { --pad-y: 0.7em; } }
@media (min-height: 860px) { :root { --sp-g: 1.7em; --sp-p: 1em; } }
