/* ---------- SF Tokens ---------- */
    :root{
      --bg:#F8ECE3;        
      --paper:#ffffff;      
      --brand:#FF2C00;     
      --brand-deep:#FD522D; 
      --accent:#4aa9ff;   
      --ink:#222;      
      --ink-2:666;    
      --line:#eaeaea;      
      --radius:24px;
      --radius-lg:28px;
      --shadow:0 10px 30px rgba(14,30,37,.06), 0 2px 4px rgba(14,30,37,.06);
      --max:1100px;          
      --left-rail:260px;    
      
      --px-desktop: 70px;  
      --px-mobile: 24px; 
    }


    *,*::before,*::after{box-sizing:border-box;word-break:keep-all;}
    html{scroll-behavior:smooth; overflow-x: hidden;}
    body{
      margin:0; 
      font-family: "Pretendard", sans-serif;
      font-weight:400;
      color:var(--ink); 
      background:var(--bg);
      overflow-x: hidden;
    }
    :where(h1,h2,h3)[tabindex="-1"]:focus { outline: none; }
    
    
	.cg_title {max-width:var(--max); margin:0 auto; position:relative; text-align: center; padding:30px 0;}
	.cg_title img {width: 320px; height: auto;}
    .cg_page{max-width:calc(var(--max) + var(--left-rail) + 40px); margin:0 auto; position:relative;}


    
    





    /* ---------- LNB ---------- */
    .cg_rail{position:fixed; left:calc(50% - (var(--max)/2.2) - var(--left-rail)); top:180px; width:var(--left-rail);}
    .cg_rail .cg_logo{display:none}
    .cg_rail .cg_menu{list-style:none; padding:0; margin:0; background:transparent; border-radius:0; box-shadow:none;}        
    .cg_rail .cg_menu li{margin:2px 0}
    .cg_rail .cg_menu a{display:block; padding:6px 0; border-radius:0; text-decoration:none; font-size:38px; line-height:1.2; font-weight:700; color:rgba(0,0,0,.15); transition:opacity .2s ease; white-space:nowrap; font-size:clamp(20px,3vw,38px);}
    .cg_rail .cg_menu a:hover{color:#000; opacity:1}
    .cg_rail .cg_menu a.active{color:#000; opacity:1} 


    @media (max-width: 900px)	{
      :root{ --left-rail:0px; }
      .cg_rail{position:fixed; left:0; right:0; top:auto; bottom:10px; width:auto; padding:0 10px}
      .cg_rail .cg_menu{display:flex; gap:8px; padding:8px; border-radius:14px}
      .cg_rail .cg_logo{display:none}
      .cg_rail .cg_menu a{flex:1; text-align:center; font-size:13px; padding:12px 8px}
    }

    




    /* HERO */
    .cg_hero{max-width:var(--max); margin:0 auto; padding:0; position:relative;}
    .cg_hero-box{
	    
  background-image: linear-gradient(
    120deg,
    #FD522D 30%,
    #FD522D 20%,
    #FF6B2C 60%
  );
    
    
	    /* background: var(--brand-deep) url("./img/bg_hero.png") no-repeat right -30px bottom / auto 95%; */
		color:#fff; border-radius:70px 70px 0 0; padding:70px var(--px-desktop); overflow:hidden; position:relative}

.cg_hero-inner{position:relative; z-index:2}

.cg_hero-media{
  position:absolute; right:-120px; bottom:-50px; width:50%; height:100%; z-index:-1; pointer-events:none; display:block;
    opacity: 0;
  animation: fadeIn 1.6s ease-out .05s forwards;
}
@keyframes fadeIn{
  to { opacity: 1; }
  }
.cg_hero-media video{width:100%; height:100%; object-fit:contain; display:block; border-radius: 200%;}

    .cg_hero h1{width: 680px; margin:10px 0 8px; line-height:130%; font-size:clamp(22px, 4.6vw, 46px); font-weight: 600; letter-spacing: -1px;}
    .cg_hero h1 span {display: block; opacity: 0.7;}
    .cg_hero p{margin:22px 0 0; color:#fff; opacity:0.7; font-size:22px;}
    .cg_eyebrow{display:inline-block; font-weight:600; font-size:35px; position:relative; z-index: 1;margin-bottom: 8vh;}
    .cg_eyebrow::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:7px; background:linear-gradient(90deg,#8fd7ff, #FD522D); border-radius:3px;}
    .cg_chips{margin-top:24px; display:flex; flex-wrap:wrap; gap:10px}
    .cg_chip{font-size:15px; padding:8px 14px; border-radius:999px; color:var(--brand); background:#ffffff; box-shadow:0 4px 8px rgba(0,0,0,.04); font-weight: 600;}

    @media (max-width: 900px)	{    
	.cg_hero-box {border-radius:20px 20px 0 0; 
		  background-image: linear-gradient(
    90deg,
    #FD522D 30%,
    #FD522D 20%,
    #FF6B2C 60%
  );
	}
	.cg_eyebrow {font-size:27px; font-weight: 700;}
	.cg_hero h1{width:100%; margin:10px 0 8px; font-weight: 700;}
    .cg_hero h1 span {display: inline-block;}
    .cg_hero p{margin:22px 0 0; color:#fff; opacity:0.8; font-size:13px !important; font-weight: 700;}

	.cg_chips{margin-top:20px;gap:5px}
	.cg_chip{font-size:12px; padding:5px 10px;}

	.cg_eyebrow{margin-bottom: 5vh;}
      
    .cg_hero-media{right:-30px; bottom:-30px; width:40%; height:65%;}



	}









    /* Features */
    .cg_band{max-width:var(--max); margin:0 auto; background:var(--paper);box-shadow:none; padding:70px var(--px-desktop);}
    .cg_band h2{margin:0 0 18px}
	.cg_band:last-child {border-radius:0 0 70px 70px;}

    .cg_cards{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
    .cg_card{background:#fff; border:1px solid #ececec; border-radius:18px; padding:28px; display:grid; place-items:center; text-align:center; gap:12px;}
    .cg_card .cg_ico{width:140px; height:auto; border-radius:16px;}
    .cg_card .cg_ico img {width: 100%;}
    .cg_card h3{margin:0; font-size:30px; line-height:110%; color:#333; font-weight: 600;}
    .cg_card h3 .emph{color:var(--brand); display:block}
    .cg_card p{margin:0; color:#777; font-size:18px; line-height: 140%; text-align: center; font-weight: 400;}
    
	@media (max-width:900px){ 
		.cg_cards{grid-template-columns:minmax(0,1fr)} 
	   .cg_card p{width: 80%;}
	  .cg_card .cg_ico{width:100px;}
	   .cg_card h3{font-size:24px; line-height:110%;}
	   .cg_band:last-child {border-radius:0 0 20px 20px;}


		}

    
    
    
    
    
 

    /* GoCoin */
    .cg_gocoin{max-width:var(--max); height: 430px; margin:0 auto; display:block; position:relative; background:var(--paper); border-radius:0; box-shadow:none; padding:70px var(--px-desktop);
	    background: #F7F7F7 url("./img/bg_gocoin.jpg") no-repeat right bottom / auto 100%; 
    }
    .cg_gocoin .cg_content{max-width:45%;}
    .cg_gocoin h2{margin:0 0 10px; font-size:26px; font-weight:600; color:#111; letter-spacing:-0.2px}
    .cg_gocoin p{margin:0; color:#555; font-size:18px; line-height:160%}
    .cg_gocoin p b, .cg_gocoin p strong{font-weight:700}
    
    .cg_gocoin .cg_gocoin_img {position: absolute;top:16%; right: 220px; width: 220px; height: auto;}
    .cg_gocoin .cg_gocoin_img img {width: 100%;}
      
          @media (max-width: 900px){
      .cg_gocoin{ overflow: hidden; padding:40px 70px; background: #F7F7F7 url("./img/bg_gocoin.jpg") no-repeat right bottom / auto 40%; }
	  .cg_gocoin .cg_gocoin_img {top:52%; right:40%; width: 180px; height: auto;}
      .cg_gocoin .cg_content{ max-width:100%; }
      .cg_gocoin::after{ width:55%; opacity:.8; }
      .cg_gocoin h2{font-size:20px; font-weight:600; }

    }
    
    
    
    
    
   
    
    
    

    /* GUIDE */
    .cg_steps{display:grid; gap:14px;}
	.cg_step{
	background:#fff; border-radius:14px;
	padding:0px 10px 0px 30px;
	display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
	}
	.cg_step h3{margin:0; color:#1D83C0; font-size:24px; margin-top:30px; font-weight:500; letter-spacing: -0.6px;}
    .cg_step sup{font-size:.6em; vertical-align:super; margin-right:3px; font-weight:700; color:#8EC1DF}
    .cg_step .cg_step_img{width:100px; height:150px; background:transparent center bottom 30px/45px 45px no-repeat;}
	 .cg_step_body {color:#1D83C0; font-size:18px;line-height: 150%;}
     .cg_step_body h3 {margin-bottom:5px;}
     .cg_step_body p {margin-top:0; margin-left:20px;}
	 .cg_step_body h3 span {font-size:16px; opacity: 0.6; margin-left:20px;}
	 
    .cg_use-grid{display:grid; grid-template-columns:1fr; gap:30px}
    .cg_use-card{background:#F9F9F9; border:none; border-radius:10px; padding:28px; display:grid; grid-template-columns:1fr 300px; align-items:center; gap:24px}
    .cg_use-card h3{margin:0 0 0 16px; color:#111; font-weight:600; font-size:29px; letter-spacing:-0.2px}
    .cg_use-card sup{font-size:.5em; vertical-align:super; margin-right:8px; font-weight:800; color:#FC937D}
    .cg_use-card .cg_visual{width:300px; height:220px; background-size:contain; background-repeat:no-repeat; background-position:center center; border-radius:12px}
    .cg_use-card p{margin:10px 0 0 50px; width: 380px; color:#777; font-size:18px; line-height:140%; font-weight: 400;}




    @media (max-width: 900px) {
      .cg_use-card{grid-template-columns:1fr}
      .cg_use-card .cg_visual{width:100%; height:200px; margin-top:12px}
      .cg_step{grid-template-columns:1fr minmax(56px, 24%);} 
      .cg_step .cg_step_img{width:56px; height:56px}
	  
      .cg_use-card h3{margin:0 0 0 0px; color:#111; font-weight:600; font-size:22px;}
      .cg_use-card p{width: 100%;font-size:14px !important; margin:10px 0 0 25px;}
	  .cg_step_body h3 span {font-size:13px; opacity: 0.6; margin-left:10px;}
	  
    	.cg_step{
	border-radius:10px;
	padding:10px 10px 15px 20px;
	display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
    .cg_step h3{font-size:16px; margin-top:10px; font-weight: 600; letter-spacing: -1px; width: 60vw;}
	  
    .cg_step .cg_step_img{ width:40px; height: 150px; background:transparent center bottom /30px 30px no-repeat;}
	.cg_copy span{display: block;}

    }






    /* Foot */
    #signup.cg_band{ background:#DDEFFD; }
    #signup h2{ color:#0A6CBF; }
    #signup .cg_step{ border-color:#BEE0FA; }

    #usage.cg_band{ background:#ffffff; }

    @media (max-width: 900px){
      .cg_use-card{grid-template-columns:1fr}
      .cg_use-card .cg_visual{width:100%; height:200px; margin-top:12px}
      .cg_step{grid-template-columns:1fr minmax(56px, 24%);} 
      .cg_step .cg_step_img{width:56px; height:56px}
    }

    h1, h2, h3, h4, h5, h6{
      font-family: "Pretendard", sans-serif;
      font-weight:600;
    }
    
    h2 {font-size:35px;}
	h3 img {height: 15px; vertical-align: middle;}




    /* Tip */
    .cg_notice-wrap{max-width:var(--max); margin:0 auto; padding:0 0 70px;}
    .cg_warn{display:block; margin:8px 0 22px;}
    .cg_warn h3{margin:0 0 6px; color:#FF2C00; font-size:20px}
    .cg_warn p{margin:0; color:#FF2C00; line-height:1.5}


    .cg_tipbar{position:relative; background:#3f3f3f; color:#fff; border-radius:16px; padding:20px 0; display:flex; align-items:center; width:100%; justify-content: center;}
    .cg_tipbar strong{color:#FF6D3B; margin-right:4px}

    
    .cg_illust{position: absolute; right:0px; bottom: 0px; width:150px; height:120px; background:#fff0 center center/auto 100% no-repeat; background-image:url('./img/bg_tip.png');}
    
    @media (max-width: 900px){
      .cg_notice-wrap{padding:0 0 40px}
  
      .cg_illust {height:70px; right:-40px;}
      .cg_tipbar {padding:20px 50px 20px 20px;font-size:14px; }
    }

    footer{max-width:var(--max); margin:28px auto 140px; padding:24px 16px; color:#9ca3af; font-size:13px}
    





    /* CTA Button */
    .cg_cta{display:inline-block; margin-top:24px; padding:14px 36px;margin-left:-26px; background:#fff; color:#111; text-decoration:none; border-radius:15px; box-shadow:0 10px 20px rgba(0,0,0,.08); font-weight:600; font-size:16px}
    .cg_cta:hover{background: #222; color:#fff;}
    .cg_cta span {color:var(--brand)}
    @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }	
    
    

        
        
        
        
        
        
    
      /* Mobile Common Styles */

        @media (max-width: 900px){
	        
    h2 {font-size:27px; font-weight: 700;}
    p {font-size:16px !important;}
	.cg_title {padding:20px 0;}
	.cg_title img {width: 280px;}
	.cg_cta font {display: none;}
	  .cg_band, .cg_gocoin{ padding:40px var(--px-mobile); }
      .cg_hero-box{ padding:40px var(--px-mobile); }
      .cg_hero-inner{ padding:0; }


      .cg_rail{position:fixed; overflow: hidden; left:1%; right:0; top:auto; bottom:10px; width:auto; padding:8px var(--px-mobile); display:flex; align-items:center; gap:10px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background:rgba(255, 255, 255, 0.7); width: 98%; border-radius:20px; box-shadow:0 12px 28px rgba(0,0,0,.2); z-index:9999; padding-bottom:calc(8px + env(safe-area-inset-bottom))}
      .cg_rail .cg_menu{display:flex; flex:1; gap:3px; padding:0; margin:0; align-items:center; justify-content:center}
      .cg_rail .cg_menu a{flex:1; text-align:center; font-size:13px; line-height:1.2; padding:10px 3px; white-space:nowrap}
      .cg_cta{display:inline-flex; align-items:center; margin:0; padding:10px 14px; font-size:13px; border-radius:16px; white-space:nowrap; box-shadow:none; border:1px solid #eaeaea}   
   
   
   
   
    }