html, body, #__next{
  height: 100%;
}

/* progress bar */
.progress_bar .play_bar {
  transform-origin: 0 0;
}

/* toast */
.toast_layer .inner_toast {
  transition: opacity 0.4s, visibility 0.4s;
  opacity: 0;
  visibility: hidden;
}

.toast_layer .inner_toast.on {
  opacity: 1;
  visibility: visible;
}

.layer_like.on {
  display: block;
  z-index: 99;
}

/* navigation button */
.pc .navigation-button-wrapper button.active {
  background-color:#464646;
}

.pc .navigation-button-wrapper .btn_navi {
  transition: opacity .3s ease-out;
}

@media (max-width : 1012px) {
  .pc article._comment .navigation-button-wrapper,
  .tablet article._comment .navigation-button-wrapper  {
   display: none;
  }
}

@media (max-width : 1012px) and (max-height : 620px) {
  .pc article._comment .control_short,
  .tablet article._comment .navigation-button-wrapper   {
    display: none;
  }
}

@media (max-width : 768px) {
  .pc .navigation-button-wrapper,
  .tablet .navigation-button-wrapper {
    display: none;
  }
}

/* hide header when comment panel is opened in landscape view */
@media (orientation:landscape){
  .mobile article._comment .control_short{
    display: none;
  }

  body {
    height: 100% !important;
  }
}

@media (max-height : calc(408px + 45px)) and (orientation: portrait) {
  .mobile article._comment .control_short{
    display: none;
  }
}

/* comments panel animation */
.pc .shortform_player .item_cmt,
.tablet .shortform_player .item_cmt {
  margin-left: -367px;
  display: block;
  opacity: 0;
  transform: scale(0.95);
  transition: all .3s ease-out;
  visibility: hidden;
}
.pc ._comment .shortform_player[aria-hidden=false] .item_cmt,
.tablet ._comment .shortform_player[aria-hidden=false] .item_cmt {
  opacity: 1;
  margin-left: 7px;
  transform: scale(1);
  visibility: visible;
}

.pc .shortform_player .item_cmt.open .cmt_wrap,
.tablet .shortform_player .item_cmt.open .cmt_wrap {
  animation: none;
}
.pc .shortform_player .item_cmt .cmt_wrap > *,
.tablet .shortform_player .item_cmt .cmt_wrap > *,
.pc .shortform_player .info_player,
.tablet .shortform_player .info_player,
.pc .shortform_player .control_action,
.tablet .shortform_player .control_action {
  transition: opacity .1s ease-out;
}
.pc .shortform_player[aria-hidden=true] .item_cmt .cmt_wrap > *,
.tablet .shortform_player[aria-hidden=true] .item_cmt .cmt_wrap > *,
.pc .shortform_player[aria-hidden=true] .info_player,
.tablet .shortform_player[aria-hidden=true] .info_player,
.pc .shortform_player[aria-hidden=true] .control_action,
.tablet .shortform_player[aria-hidden=true] .control_action {
  opacity: 0.2;
}

/* pc navigation */
.pc .shortform_player:last-child {
  margin-bottom: 5vh;
}

.pc .shortform_player.error {
  margin-top: 5vh;
  margin-bottom: 5vh;
}

.shortform_items {
  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
}

/* Anchor tag */
a:hover {
  cursor: pointer;
}

/* text word break */
.cmt_wrap p {
  word-wrap: break-word; /* 비아시아 언어의 줄바꿈을 제어한다. 단어를 기준으로 하나의 단어 글자가 길어지면 강제로 끊어서 줄 바꿈 처리 */
}

/* PC accessibility - prevent moving next video with tab */
.pc .shortform_player[aria-hidden=true] button,
.pc .shortform_player[aria-hidden=true] a,
.pc .shortform_player[aria-hidden=true] input,
.pc .shortform_player[aria-hidden=true] textarea {
  visibility: hidden;
}

/* fix carousel snap height */
.mobile .shortform_player,
.tablet .shortform_player{
  height : 100%;
}

.collapse .cmt_wrap .cmt_write .info_write {
  position: absolute;
  top: 17px;
  right: 16px;
  border-top: none;
}

.collapse .write_on .cmt_write {
  padding: 14px 16px;
}

.collapse .cmt_wrap .cmt_write .inner_write {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 0;
  margin-right: 56px;
}

.collapse .cmt_wrap .cmt_write .tf_cmt {
  max-width: 258px;
  max-height: 38px;
  overflow-y: hidden;
}

.collapse .cmt_wrap .cmt_write {
  display: block;
}

/* textarea */
.cmt_wrap .cmt_write .inner_write {
  height: auto;
}

/* shrink comment panel when mobile textarea open */
.mobile .shrink .cmt_wrap .cmt_write {
  position: relative;
}

.mobile .shrink .cmt_wrap {
  height: auto;
  padding: 0;
}

/* fix safari position absolute item disappearing on scroll bug */
.pc .item_player .info_player, .tablet .item_player .info_player,
.pc .shortform_player .control_action, .tablet .shortform_player .control_action,
.pc .item_player .btn_feedback .ico_play, .tablet .item_player .btn_feedback .ico_play,
.pc .progress_bar, .tablet .progress_bar {
  transform: translate3d(0,0,0);
}

/* title max 3 lines */
.item_player .info_player .tit_player .link_txt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

/* header z-index */
.control_short {
  z-index: 20;
}

/* 태블릿에서 뮤트 버튼 탭시 모바일과 효과 동일 */
.tablet .article_shortform .control_short .btn_sound:hover:before {
  opacity: 0;
}
.tablet .article_shortform .control_short .btn_sound:active:before {
  opacity: 0.1;
}

body > video {
  display: none;
}

.cmt_wrap.write_on {
  padding-bottom: 135px;
}

.tablet .control_short {
  top: 8px;
  right: 8px;
}

.guide_overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0, 0, 0.5);
  text-align: center;
  z-index: 9999;
}

.guide_image {
  background-position: 0 0;
  width : 60%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/* ipad에서 아이콘 터치 시 hover효과 남아있는 이슈 대응 */
.os_ios [class^="btn_"]:hover:before, .os_ios [class^="ico_"]:hover:before{
  opacity: 0 !important;
}

/* pc 버전에서 유료광고 포함 ADMIN 태그 노출 */
.box_action{margin:0 -15px 0 -4px;padding:10px 0 1px;}
.box_action:after{display:block;clear:both;content:'';}
.item_player .info_player .link_admin{float:left;overflow:hidden;max-width:calc(100% - 8px);height:35px;padding:0 14px;margin:8px 4px 0;border:1px solid rgba(255,255,255,0.2);border-radius:35px;font-weight:bold;font-size:14px;line-height:35px;white-space:nowrap;text-overflow:ellipsis;background:rgba(0,0,0,0.3);box-sizing:border-box;}

/* 썸네일 배경 흰색 적용 */
.item_player .profile_player .thumb_profile .thumb_bg{
  fill:#fff;
}

.video_cover {
  background-color: #000;
  top: 0;
  left:0;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;

}