/* ============================
   Common CSS - Typography & Colors
   ============================ */
@charset "euc-kr";
/* Pretendard ÆùÆ® Àû¿ë */
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 100; /* Thin */
    font-display: swap;
    src: url('https://health.chosun.com/amirang/css/Pretendard-1.3.9/static/woff2/Pretendard-Thin.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 200; /* ExtraLight */
    font-display: swap;
    src: url('https://health.chosun.com/amirang/css/Pretendard-1.3.9/static/woff2/Pretendard-ExtraLight.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 300; /* Light */
    font-display: swap;
    src: url('https://health.chosun.com/amirang/css/Pretendard-1.3.9/static/woff2/Pretendard-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400; /* Regular */
    font-display: swap;
    src: url('https://health.chosun.com/amirang/css/Pretendard-1.3.9/static/woff2/Pretendard-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500; /* Medium */
    font-display: swap;
    src: url('https://health.chosun.com/amirang/css/Pretendard-1.3.9/static/woff2/Pretendard-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 600; /* SemiBold */
    font-display: swap;
    src: url('https://health.chosun.com/amirang/css/Pretendard-1.3.9/static/woff2/Pretendard-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700; /* Bold */
    font-display: swap;
    src: url('https://health.chosun.com/amirang/css/Pretendard-1.3.9/static/woff2/Pretendard-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 800; /* ExtraBold */
    font-display: swap;
    src: url('https://health.chosun.com/amirang/css/Pretendard-1.3.9/static/woff2/Pretendard-ExtraBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 900; /* Black */
    font-display: swap;
    src: url('https://health.chosun.com/amirang/css/Pretendard-1.3.9/static/woff2/Pretendard-Black.woff2') format('woff2');
}
*{
	/*box-sizing: border-box;*/
}
body {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    color: var(--black);
    line-height: 1.6;
	margin: 0 auto;
}
div {
	position: relative;
}
ul {
	list-style: none;
}
input, textarea, button, select {
  font-family: 'Pretendard', sans-serif;
}
input::placeholder {
	font-family: 'Pretendard';
}
:focus {
	border: 0px solid var(--primary);
	outline: 0px dotted var(--primary);
	outline: 1px dotted var(--black);
}

/* ============================
   Color Palette
   ============================ */

/* Primary Colors */
:root {
    --primary-120: #E88155;
    --primary: #F38B5E;
    --primary-75: #F6A886;
    --primary-50: #F9C5AF;
    --primary-35: #FBD7C7;
    --primary-10: #FEF4EF;

    /* Grey Scale */
    --black: #333333;
    --grey-5: #555555;
    --grey-8: #888888;
    --grey-b: #BBBBBB;
    --grey-d9: #D9D9D9;
    --grey-ea: #EAEAEA;
    --grey-f8: #F8F9FD;
    --black-10: #111111;
	--black-10-opt: rgba(17, 17, 17, 0.1);
	--black-005-opt: rgba(0, 0, 0, 0.05);
    --white: #FFFFFF;

    /* Secondary Colors */
    --green: #21C531;
    --green-80: #5CC264;
    --green-10: #EEFBEF;

    /* Alert Colors */
    --focus: #555555;
    --positive: #2171E8;
    --negative: #E84141;
	--negative-f3: #F35E5E; /*new*/

	
    /* Background Colors */
    --bg-primary: #F3885E;
    --bg-footer: #F8F9FD;
	--bg-secondary: #FEF4EF;
}

/* ============================
   Typography Styles
   ============================ */

/* ÆùÆ® µÎ²² */
.font-light { font-weight: 400; }   /* Light */
.font-regular { font-weight: 400; } /* Regular */
.font-medium { font-weight: 500; }  /* Medium */
.font-semibold { font-weight: 600; } /* SemiBold */
.font-bold { font-weight: 700; }    /* Bold */
.font-800 { font-weight: 800; }    /* 800Bold */

/* Çì´õ ½ºÅ¸ÀÏ */
 .heading-1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0px;
}
h1, h2, h3, h4, h5, h6, p, figure, fieldset, ul, li, dl, dd, dt  {
    margin: 0;
    padding: 0;
	border: 0;
}
h1{
    font-size: 38px;
    font-weight: 800;
    line-height: 50.4px;
    letter-spacing: 0px;
}
/* ±âº» ½ºÅ¸ÀÏ */
p {
    font-size: 16px;
    line-height: 1.6;
}
a {
    text-decoration: none;
    color: inherit;
}
.clamp-3 {
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* ============================
   Color Classes
   ============================ */

/* ÅؽºÆ® »ö»ó */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--bg-secondary); }
.text-black { color: var(--black); }
.text-grey { color: var(--grey-8); }
.text-green { color: var(--green); }
.text-positive { color: var(--positive); }
.text-negative { color: var(--negative); }
.text-white { color: var(--white); }

/* ¹è°æ »ö»ó */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-footer { background-color: var(--bg-footer); }
.bg-black { background-color: var(--black); }
.bg-grey { background-color: var(--grey-8); }
.bg-green { background-color: var(--green); }

/* ============================
   Buttons
   ============================ */

/* °øÅë ¹öÆ° ½ºÅ¸ÀÏ */
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Primary ¹öÆ° */
.btn-primary {
    background-color: var(--primary-120);
    color: #fff;
    border: none;
}

.btn-primary:hover {
    background-color: var(--primary-75);
}

/* Secondary ¹öÆ° */
.btn-secondary {
    background-color: var(--grey-b);
    color: #fff;
    border: none;
}

.btn-secondary:hover {
    background-color: var(--grey-8);
}

/* Alert ¹öÆ° */
.btn-positive {
    background-color: var(--positive);
    color: #fff;
    border: none;
}

.btn-positive:hover {
    background-color: #1a5dbb;
}

.btn-negative {
    background-color: var(--negative);
    color: #fff;
    border: none;
}

.btn-negative:hover {
    background-color: #c73535;
}
/* Footer */
footer {
  background-color: var(--grey-f8);
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--grey-8);
}