:root {
  
  --color-ink: #0b1320;          
  --color-main: #0b1320;         
  --color-main-2: #ff7a18;       
  --color-accent: #ff7a18;       
  --color-accent-2: #f2600a;     
  --color-base: #fffaf4;         
  --color-paper: #ffffff;        
  --color-beige: #ffd8a8;        
  --color-beige-soft: #ffeedd;   
  --color-orange-soft: #ffe2c7;  
  --color-sky-1: #e6edf6;        
  --color-sky-2: #fdf3e8;        
  --color-cloud: #ffffff;
  --color-sun: #ffc27a;
  --color-sun-ray: rgb(255 194 122 / 0.75);
  --color-flow-line: rgb(255 122 24 / 0.35);   
  --color-bit-1: rgb(255 122 24 / 0.45);       
  --color-pale: #fff1e2;         
  --color-line: #e7d3bd;         
  --color-outline: rgb(255 122 24 / 0.32);   
  --color-outline-navy: rgb(11 19 32 / 0.12);
  --color-on-dark: #ffffff;
  --color-on-dark-line: rgb(255 255 255 / 0.7);
  --color-error: #ff7a18;        
  --color-shadow: rgb(11 19 32 / 0.14);
  --color-mk: rgb(255 122 24 / 0.28);        
  --color-line-icon: #b49a82;                
  --color-accent-deep: #d36c2d;              
  --color-pink: #f8ddce;                     
  --color-navy-2: #18243a;                   
  --color-navy-3: #24324a;                   
  --color-on-dark-soft: rgb(255 255 255 / 0.86);   
  --color-veil-0: rgb(11 19 32 / 0);
  --color-veil-navy: rgb(11 19 32 / 0.72);   
  --color-tag-2: #60432a;                    
  --color-tag-3: #aa9a85;

  
  --bg-dark: linear-gradient(160deg, #1a2638 0%, var(--color-ink) 100%);
  --bg-accent: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
  --bg-sky: linear-gradient(180deg, var(--color-sky-1) 0%, var(--color-sky-2) 78%);

  
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --font-en: "Outfit", "Zen Kaku Gothic New", sans-serif;
  --fs-min: 13px;
  --fs-base: clamp(var(--fs-min), min(2.26dvh, 3.85vw, 18.5px), 18.5px);   
  --fs-ui: max(var(--fs-min), 13px);
  --fs-input: 16px;
  --fs-head: 1.4em;              
  --fs-head-s: 1.24em;           
  --fw-body: 500;                
  --ls-body: 0.05em;             
  --ls-head: 0.16em;             
  --lh-body: 1.9;                
  --lh-head: 1.55;               

  
  --col: 480px;
  --header-h: 56px;
  --gutter: 22px;
  --next-h: 0px;
  --sp-1: 0.45em;                        
  --sp-p: 0.75em;                        
  --sp-g: clamp(0.9em, 2.6dvh, 2.4em);   
  --pad-y: 1.2em;                
  --radius-pill: 999px;
  --radius-s: 8px;
  --radius-m: 16px;              
  --shadow-soft: 0 6px 18px 0 var(--color-shadow);
  --shadow-column: 0 0 24px 0 var(--color-shadow);
  --reel-h: clamp(72px, 22dvh, 300px);
  --reel-pxs: 30;
  --bigline-pxs: 38;             

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rise: 16px;
  --dur-in: 500ms;
  --dur-hover: 300ms;
}
@media (max-height: 600px) { :root { --pad-y: 0.7em; --sp-p: 0.5em; --sp-g: 0.7em; } }
@media (min-width: 960px) { :root { --fs-base: clamp(var(--fs-min), 2.1dvh, 17.5px); --gutter: calc(var(--fs-base) * 1.5); } }