/* =========================================================
   LETSRUN PLAY ??Design Tokens
   Phase 1 ?怨뺛걟 夷?Figma ??4 夷?筌ㅼ뮇伊?疫꿸퀡???疫꿸퀣?
   ?怨좊뱜: Pretendard (??덉읅 ??뺥닏??CDN)
   ========================================================= */

@import url("/fonts/pretendard/pretendard.css");

:root {
  /* ---------- Font ---------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* ---------- PLAY Color System ----------
     ??깃텢夷뚨빊類ㅼ젫夷????= Play Yellow
     ??뽰サ夷뚧€④쑴?끻첎?  = Look Coral
     筌ｋ똾肉뺤쮯筌〓챷肉?    = Activity Ground
     ??뽮퐬夷뚧€⑤벀而?    = Yard Green
     ?癒?뒅: MAIN(500) ?怨쀪퐨 ????夷???용뮞???袁⑹뵠?꾩꼷? 700 夷?           ?蹂? 獄쏄퀗瑗?? 100~200 夷????꾩꼹?쀯㎘醫롫퓠????揶쎛€筌왖€ MAIN */
  --yellow-100:#FFFDF2; --yellow-200:#FFF9DB; --yellow-300:#FFF4B8;
  --yellow-400:#FFF08E; --yellow-500:#FFEC58; --yellow-600:#D8C83F;
  --yellow-700:#A2941D; --yellow-800:#827821; --yellow-900:#595113;

  --coral-100:#FFF4F0; --coral-200:#FFE3DA; --coral-300:#FFC2AF;
  --coral-400:#FF9C78; --coral-500:#FF7E56; --coral-600:#E7633D;
  --coral-700:#C14A28; --coral-800:#93341A; --coral-900:#64210F;

  --ground-100:#FFF7EE; --ground-200:#FCE8CF; --ground-300:#F8D19F;
  --ground-400:#F4BE79; --ground-500:#F0B365; --ground-600:#D79745;
  --ground-700:#AE7126; --ground-800:#80531A; --ground-900:#573712;

  --green-100:#F3FDF1; --green-200:#DDF9D8; --green-300:#B9F2B0;
  --green-400:#99EC8C; --green-500:#89EA7A; --green-600:#67C85A;
  --green-700:#438F39; --green-800:#2F6529; --green-900:#1F431B;

  /* ??뺛렎??癰귢쑴臾???筌띾뜇寃??녿퓠??뺣뮉 ??곥걹 ????亦낅슣??*/
  --c-event:   var(--yellow-500);  --c-event-deep:   var(--yellow-700);  --c-event-bg:   var(--yellow-100);
  --c-season:  var(--coral-500);   --c-season-deep:  var(--coral-700);   --c-season-bg:  var(--coral-100);
  --c-exp:     var(--ground-500);  --c-exp-deep:     var(--ground-700);  --c-exp-bg:     var(--ground-100);
  --c-fac:     var(--green-500);   --c-fac-deep:     var(--green-700);   --c-fac-bg:     var(--green-100);

  /* ---------- Neutrals ---------- */
  --ink:  #1D1D1F;   /* 癰귣챶揆夷??뺛걠 */
  --grey: #6B6B70;   /* 癰귣똻????용뮞??*/
  /* --soft???袁⑹뵠?꾩깢猷삳탣??됱뵠???????"?關?? ?袁⑹뒠??€??260806). ??獄쏄퀗瑗?????2.80:1嚥?癰귣챶揆 ??용뮞??
     疫꿸퀣?(WCAG AA 4.5:1)??筌?沃섎챷?귟첋?嚥?????癒? ??덈뮉 ?얜㈇??癒?뮉 ?怨? ??낅뮉????癰귣똻????용뮞?紐껊뮉 --grey(5.30:1).
     ???퉳 ?袁㏉€롥첎? ink?萸썄ey 2??ｍ€????곸???€흭, ????? 3??ｍ€롧몴?筌띾슢諭억쭖?AA?????궢??????용뼄. */
  --soft: #9A9AA0;   /* 雅뚯눘苑띿쮯???쟿??곷뮞????*/
  --line: #E5E5E7;   /* ?닌됲뀋?議뽯；??癒?봺 */
  --bg:   #F6F6F4;   /* ??? 獄쏄퀗瑗??됰뗀以?*/
  --white:#FFFFFF;
  --neut-thumb:#D9D1BF;  /* NEUT 夷??紐껉퐬??疫꿸퀡??(Figma Paint Style) */
  --icon-bg:#F2F2F7;     /* 獄쎻뫖揆 ?類ｋ궖 ?袁⑹뵠???癒곗굨 獄쏄퀗瑗?*/
  --cta-green:#97FC85;   /* 筌ｌ꼷?ц쳸?먁?CTA (筌띾Ŧ彛?獄쏄퀡瑗? */

  /* ---------- Typography scale ---------- */
  --fs-display: 80px;  /* ??됰선嚥?????????? (?怨쀫뮞???? */
  --fs-card-lg: 26px;
  --fs-hero-meta: 24px; /* .nav-hero__title, .visit__title ?袁⑹뒠 ???袁⑥삋 --fs-h1???怨쀫뮞????揶쏅?? 揶쏆늿?筌?
                            筌뤴뫀而??揶?13.5px)??癰귣챶揆癰귣????臾믩툡????삳뎃??뱀몵嚥≪뮆????沅??븍릭筌왖€ ??낅뮉??*/
  --fs-h1:      24px;  /* Section Heading(.section__head h1/h2) ?袁⑹뒠 */
  --fs-h2:      22px;  /* 燁삳?諭?筌뤴뫀???봔€??뺛걠疫??????(PLAY NOW!, ?꾨뗄??沃섎챶?곮퉪?용┛ 筌뤴뫀?? Wide Banner Card ?? */
  --fs-h3:      18px;  /* ??곗뺘 燁삳?諭???뺛걠(.card__title) */
  --fs-card:    17px;
  --fs-body-lg: 16px;
  --fs-body:    15px;
  --fs-body-sm: 14px;
  --fs-label:   13px;
  --fs-caption: 12px;
  --fs-badge:   11px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight: 1.15;  /* ????????? */
  --lh-base:  1.5;
  --lh-body:  1.6;

  /* ---------- Spacing ---------- */
  --sp-4: 16px; --sp-6: 24px; /* ??쇨텢??2??ｍ€롳쭕??醫?(detail.css) ????롢돢筌왖€ 10??ｍ€??筌〓챷???롫뮉 ?⑤끃????곷선 ?類ｂ봺??덈뼄 */

  --container: 1280px;      /* ?怨쀫뮞?????꾩꼹?쀯㎘???(1440 - 80*2) */
  /* ?怨쀫뮞?????ル슣????媛?260806 ???⑥쥙??80px ???醫딅짗).
     疫꿸퀣? ??1440?癒?퐣??5.556vw = 80.0px??€??clamp ?怨밸립??椰꾨챶??**疫꿸퀣?덃€??類μ넇????덉뵬**??롫뼄(?꾩꼹?쀯㎘?1280 ?醫?).
     998~1200 ?닌덉퍢?癒?퐣筌?餓κ쑴堉?醫딅뼄 ?????닌덉퍢?癒?퐣 ?ル슣??160px??域밸챶?嚥??醫????됯퀬猷?紐꾩벥 ??16%揶쎛€ ??媛????랁€?     ?꾩꼹?쀯㎘醫? 838px繹먮슣? ?リ낯釉섓쭪????얜챷?ｇ몴??袁れ넅??뺣뼄(1024 疫꿸퀣? ??媛?80??7, ?꾩꼹?쀯㎘?864??10).
     ??.container???袁⑤빍??GNB(.gnb__inner)夷???됰뗀?????됱뵬(.rail--bleed)夷뚩굜遺용뮞 筌?Ŧ???(.courses-viewport)??
     揶쏆늿? ?醫뤾쿃??筌〓챷????嚥? ?뚢뫂???€瑗ワ쭕??怨뺤쨮 獄쏅떽?€筌왖€ 筌띾Þ??獄쏆꼶諭?????醫뤾쿃??獄쏅떽????類ｌ졊????ｍ뜞 ??筌욊낯???
     筌뤴뫀而????97)?? ?袁⑥삋 沃섎챶逾??곸삓?귐딅퓠??16px嚥???堉?怨?嚥???揶쏅????怨밸샨??獄쏆룇? ??낅뮉?? */
  --pad-page: clamp(20px, 5.556vw, 80px);
  --gap-section: 72px;      /* ?諭€??揶쏄쑨爰?*/
  --gap-card: 32px;         /* 燁삳?諭?揶쏄쑨爰?*/
  --hero-ratio-desk: 876/680; /* ?怨쀫뮞??????98) ??됰선嚥?獄쏄퀡瑗??⑥쥙????쑴??Figma ?類ｋ궚) ??????癰궰€??€猷?筌뤴뫁堉뉗쮯??깆뒲????덉뵬 */

  /* ---------- Card ---------- */
  --content-card-media-ratio: 420/280; /* ??곗뺘 ?꾩꼹?쀯㎘?燁삳?諭?.card--wide) ?⑤벏????€?筌왖€ ??쑴??????沅㏃쮯?怨멸맒 ???類ㅼ삢???袁? ??沅??*/

  /* ---------- Radius ----------
     260813 Visual ?類ｋ즷: 筌?surface) ??깆뒲??? ????ｍ€???????⑥눛釉?칰??觀??SaaS ?癒?덱??餓κ쑴???
     ??--r-full(pill)?? 域밸챶?嚥??遺얜뼄 ??Chip夷똁adge?????튋 ?類κ묶?????袁⑥쨮??븍뱜????? 筌ｋ떯??     (鈺곌퀣??Chip / ??뽯뻻=Badge)????꾩쓺 ??롫뮉 ?됰슢????遺용꺖??揶쏄낯?野?獄쏅떽?€筌왖€ ??낅뮉??
     筌?"筌롫똻? ???觀?野? ???튋?? 域밸챶?嚥?揶쎛€ ??€苡?獄쎻뫚堉??€?? */
  --r-sm: 6px;   /* ??뽰뒻 疫꼲€??깅뮞 燁?(8??) */
  --r-md: 8px;   /* ?類ｊ컩???紐껉퐬??뗫；???꾨ご 甕곌쑵?됱쮯疫꿸퀡??.btn (10??) */
  --r-card: 10px; /* (14??0) */
  --r-media: 14px; /* ?꾩꼹?쀯㎘?燁삳?諭???€?筌왖€(HOME .card__media ??쇨텢??揶? ???怨멸쉭 揶쎼끇??뵳?猷멥걟??獄쏅벡??? ?⑤벏??(24??4) */
  --r-lg: 12px;  /* 燁삳?諭???€?筌왖€夷??뺚댘??쇱뒲 ??ㅺ섯 (16??2) */
  --r-xl: 14px;  /* 獄쎻뫖揆?類ｋ궖夷뚳쭗?ㅼ뺍????됰선嚥≪몿猷뱁떘?깃퀡??燁삳?諭?(20??4) */
  --r-hero: 16px; /* (24??6) */
  --r-full: 999px; /* 甕곌쑵?됱쮯?苑룸８媛숋쭪? ???醫? */

  /* ---------- Effect ----------
     260813: 域밸챶??癒? ?袁⑹뒭????????? border嚥?筌롫똻???닌됲뀋??롫뮉 獄쎻뫚堉??곗쨮 ?類ｋ즷??덈뼄.
     ?⑤벊???뚮똾猷??곕뱜??box-shadow??home.css?癒?퐣 ???봔€????볤탢??뉙€? FAB筌?"????덈뮉 甕곌쑵????€???
     ?源껉봄??筌ㅼ뮇???뽰몵嚥???ｋ┸??疫꿸퀣???????類ㅺ텦夷??얜즲 ?곕벡??. */
  --shadow-fab: 0 4px 12px rgba(0,0,0,.14);
  --overlay-hero: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.66) 100%);
  --glass: rgba(255,255,255,.20);
  --glass-active: rgba(255,255,255,.36);
  --glass-chip: rgba(255,255,255,.13);
}
/* ---------- Mobile overrides (??97px) ---------- */
@media (max-width:997px) {
  :root {
    --fs-display: 36px;
    --fs-h1: 20px;
    --fs-h2: 19px;
    --fs-h3: 16px;
    --fs-card-lg: 20px;
    --fs-hero-meta: 13.5px;
    --pad-page: 16px;      /* 筌뤴뫀而???⑤벏??gutter ??疫꿸퀣???醫뤾쿃 ??沅???醫됲뇣 癰궰€???곕떽? ???? */
    --gap-section: 40px;
    --gap-card: 12px;
    --r-hero: 12px;   /* ?怨쀫뮞????16??筌띿쉸??????ｍ€??곕벡??16??2) */
  }
}