@charset "utf-8";

/* Reset */
@import url(reset.css);

/* Fonts */
@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(../fonts/Pretendard-Black.woff2) format('woff2'), url(../fonts/Pretendard-Black.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(../fonts/Pretendard-ExtraBold.woff2) format('woff2'), url(../fonts/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(../fonts/Pretendard-Bold.woff2) format('woff2'), url(../fonts/Pretendard-Bold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(../fonts/Pretendard-SemiBold.woff2) format('woff2'), url(../fonts/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(../fonts/Pretendard-Medium.woff2) format('woff2'), url(../fonts/Pretendard-Medium.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(../fonts/Pretendard-Regular.woff2) format('woff2'), url(../fonts/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(../fonts/Pretendard-Light.woff2) format('woff2'), url(../fonts/Pretendard-Light.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(../fonts/Pretendard-ExtraLight.woff2) format('woff2'), url(../fonts/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(../fonts/Pretendard-Thin.woff2) format('woff2'), url(../fonts/Pretendard-Thin.woff) format('woff');
}

/* Variables */
:root {
  --samsungshi-black: #000;
  --samsungshi-white: #fff;
  --samsungshi-dark-white:#f7f7f7;
  --samsungshi-red: #e32c2f;
  --samsungshi-blue:#092d7b;
  --samsungshi-gray:#d7d7d7;
  --samsungshi-dark-gray:#666;

  --samsungshi-bg-color:#f4f6f8;
  --samsungshi-border-color:#e6e6e6;
}

:root, html {
  font-size: 10px;
}


*{
  box-sizing: border-box;
}



body {
  display:flex;
  flex-direction: column;
  font-family: 'pretendard', sans-serif;
  font-style:normal;
  margin:0 auto;
  font-size:1.8rem;
  gap:5rem;
  color:#666;
}

a:link,a:visited{
  color:black;
  text-decoration: none;
}

.hidden {
    overflow: hidden;
    border: 0;
    position: absolute;
    z-index: -1;
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
  }

.mb_view {
  display: none;
}
.pc.view{
  display:block;
}  
table.pc_view {
  display: table;
}

.up {
  color: var(--samsungshi-red);
}
.down {
  color: var(--samsungshi-blue);
}
.same {
  color: var(--samsungshi-black);
}


table {
  width: 100%;
  border-top: 2px solid #111;
}

caption{
  font-size:1rem;
  margin-bottom:0.5rem;
  text-align: left;
}


table thead th, table thead td{
  background-color: var(--samsungshi-bg-color);
}





/* table height */
th,dt{font-size: 1.8rem;line-height: 2rem;color: #111;font-weight: 500;text-align: center;padding: 2.5rem 0;}
td,dd{font-size: 1.8rem;line-height: 2rem;color: #666;text-align: center;padding: 2.5rem 0;}
dt,dd{display:flex; justify-content: center; align-items: center;}

th, td {
  border-right:1px solid var(--samsungshi-border-color);
  border-bottom: 1px solid var(--samsungshi-border-color);
  vertical-align: middle;
}
th:last-child, td:last-child {
  border-right: none;
}


/* 기본 Arrow */
.arrow{display:flex;justify-content:center;align-items:center; gap:0.25rem; }
 table .arrow{display:table-cell;}
  
  
.arrow.up:before{
  background-color: var(--samsungshi-red);
  clip-path: polygon(50% 0%,100% 100%,0% 100%);
}

.arrow.down:before{
  background-color: var(--samsungshi-blue);
  clip-path: polygon(0% 0%,100% 0%,50% 100%);
}

.arrow.up:before, .arrow.down:before{
  content: '';
  display: inline-block;
  width: 12px;
  height: 8px;
}

.cup__current .arrow.up:before, .cup__current .arrow.down:before{
  width: 25px;
  height: 15px;
}


table .arrow.up:before, table .arrow.down:before{
  position: relative;
  bottom:2px;
}

/* 지수 Arrow CSS */
.index-arrow{
  position:relative;
  color:var(--samsungshi-white);
}

.index-arrow.up:before {
  content: "";
  display: inline-block;
  width: 13rem;
  height: 80%;
  background-color: #e0180a;
  clip-path: polygon(50% 0%, 100% 50%, 80% 50%, 80% 100%, 20% 100%, 20% 50%, 0% 50%);
  position: absolute;
  z-index: -9999;
}

.index-arrow.down:before {
  content: "";
  display: inline-block;
  width: 13rem;
  height: 80%;
  clip-path: polygon(50% 0%, 100% 50%, 80% 50%, 80% 100%, 20% 100%, 20% 50%, 0% 50%);
  transform:rotate(180deg);
  position: absolute;
  z-index: -9999;
  background-color: var(--samsungshi-blue);
}

.index-arrow.same{
  color: black; 
}

.index-arrow #text{transform:translateY(10px);}

.stock-info{
  display:flex;
  justify-content: space-between;
  padding-bottom:2.5rem;
  border-bottom: 2px solid #111;
  color:#111;
}

.stock-info__name{
  font-size: 3.5rem;
}

.stock-info__date{
  align-self: flex-end;
  font-size:1.6rem;
}


.cup{
  display:grid;
  grid-template-columns: 60% 40%;
  justify-items: center;
  align-items: center;
}

.cup__current dd{
  font-size:5rem;
}

.cup__updown{
  width:100%;
  display:grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,1fr);
  row-gap: 1rem;
}

.cup__updown dt, .cup__updown dd {
  padding: 0;
}

.ohlv{
  display:grid;
  grid-template-columns: repeat(4,1fr);
}

.ohlv dl{
  border-top:1px solid var(--samsungshi-border-color);
  border-bottom: 1px solid var(--samsungshi-border-color);
  border-right:1px solid var(--samsungshi-border-color);
}
.ohlv dl:last-child{border-right:none;}

.ohlv dt{
  border-bottom:1px solid var(--samsungshi-border-color);
  background-color: var(--samsungshi-bg-color);
}


#quote_chart{
  display:flex;
  align-items: center;
  gap:7rem;
  margin-top:-2rem;
}

.cur-ohlv{
  display:flex;
  flex-direction: column;
  gap:5rem;
}

#quote_chart > * {
  width: 50%;
}

#current_bottom{display:flex; gap:7rem;}
#current_bottom > * { width: 50%;}
#cap_ind { width:50%; display: flex; flex-direction: column; gap:7rem;}
.capital_tb { width:100%; }
.capital_tb th:nth-child(2n-1){
  width:31%;
  padding-left:10px;
  text-align:left;
  background-color:var(--samsungshi-bg-color);
}
.capital_tb td:nth-child(2n){
  padding-right:10px;
  text-align:right;
}
.capital_tb th:last-child, .capital_tb td:last-child { border-right:none; }


/* index */
#index_tb{display:grid; grid-template-columns: repeat(3, 1fr);border-top:2px solid #666;
  border-bottom:1px solid var(--samsungshi-border-color);}

.index dt{
  border-bottom:1px solid var(--samsungshi-border-color);
  background-color:var(--samsungshi-bg-color);
  height:7rem;
}

.index dd:nth-child(2){
  transform: translateY(10px);
}



/* 현재가 일자별 */

#daily_history th:last-child,
#daily_history td:last-child {
  border-right: none;
}


@media all and (max-width:1024px){
  :root, html{
    font-size:8px;
  }

  body,#quote_chart,#current_bottom,#cap_ind{gap:3rem;}

  .pc_view { display:none; }
  .mb_view { display:block; }

  table .arrow.up:before,table .arrow.down:before {
    position: relative;
    bottom: 1px;
    margin-right:1px;
  }
  
  .stock-info{
    flex-direction: column;
    gap:2rem;
  }
  .stock-info{
    text-align: center;
  }


  .cur-ohlv {
    gap: 2rem;
  }


  #quote_chart{
    flex-direction: column;
  }
  #quote_chart > * {
    width: 100%;
}

  #current_bottom{
    flex-direction:column;
  }

  #current_bottom > *{
    width:100%;
  }


  /* 주가정보 차트 Style-2 */
  #cur_top_box{
      border-bottom:none;
      padding:10px 0 0 0;
  }
  #cur_top_box>#cup, #cur_top_box>#ohlv{
      width:100%;
      float:none;
  }
  #cur_top_box>#cup{
      padding-top:0px;
      padding-bottom:10px;
  }
  #cur_top_box>#ohlv { margin-left:0%; }


  .capital_tb th:nth-child(2n-1) { width:50%; }

}