@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
@import url(./people.markdown.css);


/*
https://www.sliderrevolution.com/resources/css-list-style/
https://css-tricks.com/snippets/css/css-triangle/

<input type="button" class="img-button" onclick="alert('클릭!')">

input.img-button {
  background: url("https://i.ibb.co/3493r17/cat.jpg") no-repeat;
  width: 180px;
  height: 180px;
}


.responsive-box {
  width: var(--son-fancy-width);
  height: var(--son-fancy-height);
  background-color: #eef;
  margin: 1rem auto;
  border: 2px solid #99c;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
}



:root {
  --min-width: 390px; 
  --max-width: 1000px; 
  --min-height: 200px; 
  --max-height: 500px; 
  --padding: 5vw; 
}

.my-element {
  width: clamp(var(--min-width), calc(100% - var(--padding)), var(--max-width));
  height: clamp(var(--min-height), calc(50vh - var(--padding)), var(--max-height));
  background-color: #eef;
  margin: 1rem auto;
  border: 2px solid #99c;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  padding: var(--padding);
}

*/

:root {
  --son-min-W   : 390px ;
  --son-max-W   : 900px ;
  --son-calc-W  : calc(87.5vw - 187.5px);
  --son-fancy-W : clamp(var(--son-min-W), var(--son-calc-W), var(--son-max-W));

  --son-min-H    : 500px  ;
  --son-max-H    : 900px  ;
  --son-calc-H   : calc(60svh - 60px);
  --son-fancy-H  : clamp(var(--son-min-H), var(--son-calc-H), var(--son-max-H));

  --viewport-height: 100vh  ;
  --son-h-top-nav  : 76px   ;      /* H = height */
  --son-var-test-2 : 0      ;

  .g-section {
    height: var(--viewport-height);
  }

  .g-header {
    height: calc(var(--viewport-height) * 0.05);
  }
}

* { font-family: 'Spoqa Han Sans Neo', 'sans-serif' ; 
    font-weight: 400 ;   /* 500 준수하다,             */
  }

/*===================================================================
 html, body                                                   
=================================================================== */
/* https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height  */
/* box-sizing : content-box ;   이것이 default, width와 height는 content의 너비 */
/* box-sizing : border-box  ;    width와 height는 content의 너비가 아니라 border까지 포함한 태그의 너비 */


html { 
  height     : 100vh  ;
  min-height : 10vh   ;
  width      : 100vw  ;
  min-width  : 10vw   ;
  background : gray   ; 
  margin     : 0      ;
  overflow   : hidden ;
  -webkit-box-sizing: border-box ;
  -moz-box-sizing   : border-box ;
  box-sizing        : border-box ;

/* https://fresh-mint.tistory.com/entry/css-텍스트4-word-break-word-wrap-줄바꿈-속성단어-기준 */
 word-break: break-all  ;
 word-wrap : break-word ;
}

body {
  background : white;
  position   : absolute;    /* height:100% 는 scrollbar 발생, absolute 를 이용하여 방지 */
  height     : 100vh ;
  min-height : 100vh ;
  width      : 100vw  ;
  min-width  : 10vw   ;
  top        : 0     ; 
  bottom     : 0     ; 
  left       : 0     ;
  right      : 0     ;
}


*{
  padding: 0;
}


/*---------------------------------------------------------
 anchor: text-ellipsis

 https://velog.io/@minjuice/CSS-%EB%A7%90%EC%A4%84%EC%9E%84-webkit-line-clamp
 https://stackoverflow.com/questions/25502628/webkit-line-clamp-truncates-link-in-the-middle
----------------------------------------------------------*/
a.son {
    max-width: 130px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.line-clamp a:after { content: ""; }

/*---------------------------------------------------------
 tag-cloud : {{ key, url, label }}
----------------------------------------------------------*/
.tag-cloud {
  display: inline-block;
  color: white;
  padding: 1px 3px;
  margin: 2px 5px;
/*  font-family: Arial;  */
  font-size: 0.8rem;
  border-radius: 3px;
  background-color: #2196F3;
  min-width:36px; 
  text-decoration:none ;
  cursor: pointer ; 
}


/*---------------------------------------------------------
 testimonials    {{ key, url, label, title, desc }}

 <div class="son-tm-container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO at Mighty Schools.</p>
  <p>John Doe saved us from a web disaster.</p>
</div>
<div class="son-tm-container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span >Rebecca Flex.</span> CEO at Company.</p>
  <p>No one is better than John Doe.</p>
</div>
----------------------------------------------------------*/
/* Style the container with a rounded border, grey background and some padding and margin */
.son-tm-container {
  border: 1px solid #ccc ;
  background-color: #666 ;
  border-radius: 5px;
  padding: 6px;
  margin: 9px 0;
}

/* Clear floats after containers */
.son-tm-container::after {
  content: "";
  clear: both;
  display: table;
}

/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.son-tm-container img {
  float: left;
  margin-right: 10px;
  border-radius: 10%;             /* 50% == circle */
}

.son-tm-container a {
  text-decoration: none !important;
  color: #FFF ;
}

/* Increase the font-size of a span element */
.son-tm-container span {
  font-size: 20px;
  margin-right: 8px;
}

/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 500px) {
  .son-tm-container {
    text-align: center;
  }

  .son-tm-container img {
    margin: auto;
    float: none;
    display: block;
  }
}

/*---------------------------------------------------------
 flex new line 
----------------------------------------------------------*/
/* Inserting a collapsed row between two flex items will make 
 * the flex item that comes after it break to a new row 
 * flex-wrap 이 되어있어야 효과 발생한다                  */
.son-flex-break {
  flex-basis: 100%;
  height: 0;
}

/* Use a collapsed column to break to a new column */
.son-flex-break-column {
  flex-basis: 100%;
  width: 0;
}

/*---------------------------------------------------------
 button 
----------------------------------------------------------*/
.son-btn-tiny {
  --bs-btn-padding-x: 3px    ;
  --bs-btn-padding-y: 2px    ;
  --bs-btn-font-size: 12px   ;
/*   --bs-btn-color    : white  ; */
}


/*  Pre tag가 모바일에서 반영이 안되는 현상을 해결하는 방법은 아래의 CSS코드를 입력하면 된다 */
pre {
  white-space: pre-wrap;
  word-wrap  : break-word;
  text-align : justify;
}

/*===================================================================
select-box 화살표 없애기 
=================================================================== */
.select {
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;           /* 작동안한다ㅜㅜ */
}
select::-ms-expand {  display: none; }   /* IE */


/*===================================================================
 scrollbar : inpa.tistory.com/entry/CSS-🌟-스크롤-바Scrollbar-꾸미기-속성-총정리  hide scrollbar but allow scrolling 
=================================================================== */
html {
  -ms-overflow-style: none;     /* for Internet Explorer, Edge */
  scrollbar-width: none;        /* for Firefox */
  overflow-y: scroll; 
}

html::-webkit-scrollbar {
  display: none;               /* for Chrome, Safari, and Opera */
}

.son-scroll::-webkit-scrollbar {
  width: 8px;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit ;
  -moz-box-sizing   : inherit ;
  box-sizing        : inherit ;      /*  border-box ;  */
}

.body_people {
  padding-top     : calc(var(--h-top-nav));    /* (default)navbar 2개 사용 _>1개 사용으로 변경  */ 
  background-color: rgb(204,230,255);
}

::-webkit-scrollbar {
  width : 7px ;              /* vertical-bar에 적용된다   */
  height: 7px ;              /* horizontal-bar에 적용된다 */
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px grey; 
  border-radius: 1px;
}
 
::-webkit-scrollbar-thumb {
  background: #909090   ;            /*  */
/*  background: #333333;           dark-gray  */
  border-radius: 1px ;
}

::-webkit-scrollbar-thumb:hover {
  background: #66ffff ;              /*   */
}


/*===================================================================
 navbar                                                       
=================================================================== */
.navbar {min-height:30px !important}
.navbar-collapse {min-height:30px !important}
.navbar-nav > li > a {padding-top:6px !important; padding-bottom:6px !important;}

.navbar-fixed-top{               /* must not use percents here, must be 80px*/
  z-index: 1001 ;                /* auto */
  height : 68px ; !important     /* height: 38px; !important  */
}             

.navbar-fixed-top > .navbar{      /* */
  height : 34px ;                /*  */
  margin : 0px  ;
}

.navbar-fixed-top > .navbar:nth-child(2){      /* */
  background-color:#d0d0d0;    
}

.navbar-fixed-top  ul>li{      /* */
  height : 30px;
  padding: 1px;     
}

.navbar-nav > li > .dropdown-menu {  background-color: #e7e7e7;  }
.navbar-nav > li > .dropdown-menu a:hover{ background-color: #33ff99;  }

/*  .dropdown-menu a{  background-color: #0000FF !important; }  */
/*
.navbar-top1 {
  top   : 38px ;
  background-color:#d0d0d0;    
  z-index: 1001;
}
*/

.navbar-fixed-bottom{ height: 36px; !important}   /* must not use percents here, must be 60px*/    


/*===================================================================
 embosing-div
  https://codepen.io/daryl/pen/XWXpyz
  https://tympanus.net/Tutorials/BasicReadyToUseCSSStyles/
=================================================================== */
.son-box-accd { 
  width    : 100% ;   
  height   : 0 ;     /* hide  */
  opacity  : 0 ;
  overflow : hidden auto; 
  -webkit-transition: width .25s linear, opacity .2s linear; 
  transition   : width .25s linear, opacity .3s linear; 
  position     : relative; 
  top          : 0.2rem;
  margin-bottom: 0.05rem;     /* 항목간의 간격 조절 */
  padding      : 0.1rem;
  margin-right : 0;           /*  */
  float        : left;
}

.son-box-emboss { 
    position: relative; 
    top     : 0.1rem; 
    left    : 0.1rem; 

/*	width   : 23rem  ; 
    height  : 625px ;   
*/
/*    height  : calc(100vh- 200px)  ; */

/*  background   : -webkit-linear-gradient(bottom, #eaeaea, #fafafa); */  /*  연회색, 너무 연하다?? */
/*  background   : -webkit-linear-gradient(bottom, #dadada, #eaeaea); */    
    background   : -webkit-linear-gradient(top, #e0e0e0, #eeeeee);     

/*  background   : -webkit-linear-gradient(bottom, #d5d5d5, #c3c3c3);  */ /*  조금 진하다 */

    overflow     : hidden;
    padding      : 0.3rem;
    display      : inline-block;

	border       : solid 1px #ddd;
    border-radius: 3px;
    box-shadow   : 0 1px 1px rgba(0,0,0, .75);
}

.son-box-engrave { 
    overflow     : hidden;
    position: relative; 
    top     : 0.1rem; 
    left    : 0.3rem; 

    background   : -webkit-linear-gradient(bottom,#eaeaea, #fafafa);  /*  연회색 */
    padding      : 0.3rem;
    display      : inline-block;
    
	border       : solid 1px #ddd;
    border-radius: 3px;
    box-shadow   : 0 1px 1px rgba(0,0,0,.65);
}

/*===================================================================
 text-shadow                                                
=================================================================== */
.son-text-emboss { 
  color: #f0f0f0;
  font-size: 40px;
  font-family: Futura;
  background-color: #666666;
  text-shadow: 1px 4px 4px #555;
/* text-align : center; */
  -webkit-background-clip: text;
  -moz-background-clip   : text;
}

son-text-down-dist : {
  text-shadow: 0px 3px 0px #b2a98f,
               0px 14px 10px rgba(0,0,0,0.15),
               0px 24px 2px rgba(0,0,0,0.1),
               0px 34px 30px rgba(0,0,0,0.1);
}

son-text-close-heavy:{
  text-shadow:0px 4px 3px rgba(0,0,0,0.4),
              0px 8px 13px rgba(0,0,0,0.1),
              0px 18px 23px rgba(0,0,0,0.1);
}

son-text-like-3d : {
  text-shadow:0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

son-text-inset : {
  text-shadow:
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}


/*===================================================================
 son-box                                                
=================================================================== */
.son-box-card { 
  height : 100%  ;
  display: flex  ;
  flex-direction: column ;
  flex-grow: 1 ;
  min-width: 30% ; 
}

.son-box-card--header { 
  background: DimGray ;
  overflow-y: hidden ;
  overflow-x: auto   ;
/*  height    : 100px  ; */
}

.son-box-card--body { 
  flex: 1;
  align-content: flex-start ;   /* content-size 에 맞게 높이-처리, 이것이 없으면 height가 stretch 된다 */
  overflow: auto ;
  background: #f5f5dc ;
}

.son-box-card--footer { 
  background: DimGray ;
  max-height: 60px   ;             /* 자동으로 default=70px 이 된다, why ?? */
  overflow-x: auto   ;
  overflow-y: hidden ;

}

/* Hide scrollbar for IE, Edge and Firefox */
.son-box-card--footer-test::-webkit-scrollbar {
  /* 스크롤 기능만 남기고 스크롤바는 없애 버린다 */
  -ms-overflow-style: none;                /* IE and Edge */
  webkit-scrollbar { display: none; }      /* 크롬, 사파리, 오페라, 엣지 */
  scrollbar-width: none;                   /* 파이어폭스 */
  display: none;
}


/*===================================================================
 son-card                                                
=================================================================== */
.son-card {  
  min-width : 5%    ;      /* 필요?? */
  max-width : 99%   ;      /* 필요?? */

  background: white ;
  background: -webkit-linear-gradient(bottom,#eaeaea, #fafafa);
/*  width: calc(100% - 18px) ; */       /* 이게 없으면 flex 방식에서 content 최대크기만큼 조절된다 */

  padding: 0.3rem;
  display: inline-block;
  overflow: hidden;

  box-shadow: 0 1px 1px rgba(0,0,0,.65);
  border-radius: 0px;
  border: solid 1px #ddd;
}

 /*  background: linear-gradient(to left, #56ab2f, #a8e063) ; */
 /* font-size : 18px ;  */
 /*  min-height: 100vh;  */

.son-card-topic {  
  /* 연한 하늘색, 너무 연하다 */
  margin-top : 10px    ;
  max-height : 460px   ; 
  background-color: #b8c6db;
  background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%); 
  overflow-y : auto ;
}

.son-card-reply {  
  max-height: 320px ; 
  overflow-y : auto ;
}

.son-card input[type=checkbox] { 
 transform: scale(1.5) ;
 margin : -4px 9px; 2px 0px;
 padding: 0px 1px; 1px 0px;
}

/* has() 는 chrome-105 이상에서만 지원된다, 지원 안해도 상관없다.어차피 배경색상 만 안바뀔뿐이다 */
.son-card:has(input[type=checkbox]:checked) { 
/*  background: linear-gradient(to left, #56ab2f, #a8e063) ; 
    background: linear-gradient(to right, #f0cb35, #c02425) ;
    background: linear-gradient(to left, #2bc0e4, #eaecc6) ;

	가장 적당 하지만 너무 연하다
	background-color: #b8c6db;
    background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%); 

    붉은색 계열
	background-color: #f5d020;
    background-image: linear-gradient(315deg, #f5d020 0%, #f53803 74%);
*/

	background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}


/*------------------------------------------------------------
 image-overlay 

  <div class="son-box-img">
    <img src="img_avatar.png" class="son-img" alt="Avatar">
    <div class="son-box-img-overlay">My Name is John</div>
  </div>
-------------------------------------------------------------*/
.son-box-img {
  position : relative ;
  width    : 50%      ;  
  max-width: 300px    ;
  margin   : 0 px     ; 
  padding  : 0 px     ; 
}

.son-img {
  display : block    ;
  width   : 100%     ;
  height  : auto     ;
}

.son-box-img-overlay {
  opacity   : 0             ;
  transition: .4s ease      ;
  position  : absolute      ; 
  bottom    : 0             ; 
  width     : 100%          ;
  padding   : 3px           ;
  text-align: center        ;
/*  font-size : 20px        ;   */

  background: rgba(64, 64, 64, 0.5) ;   /* gray see-through */
  color     : #f1f1f1            ; 
  color     : white              ;
}

.son-box-img:hover .son-box-img-overlay {
  opacity   : 1   ;
}

/*------------------------------------------------------------- 
 image-is-dead(Rest-In-Peace)                                
--------------------------------------------------------------*/
img.RIP {
  border: 1px inset red      ;    /* border 로 하면  작동안된다, why?? */
  outline: #FF0000 ridge 5px ;  
  margin: auto;  
  padding: 1px;
  text-align: center;
}

.son-img-RIP-flower {
  position : absolute ; 
  bottom   : 2px      ;
  left     : 2px      ; 
}


/* 
https://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height
http://css-infos.net/properties/webkit
----------------------------------------------------------------------
 popover 의 flicker 현상을 막기위해 필요하다, 이유는 모른다
 하지만 이것이  존재하면 tab 안의 내용도 모두 사라진다  
.fade {
   opacity: 0;
   -webkit-transition: opacity 0s linear;
      -moz-transition: opacity 0s linear;
       -ms-transition: opacity 0s linear;
        -o-transition: opacity 0s linear;
           transition: opacity 0s linear;
 }
--------------------------------------------------------------------
.page-content {
  top: calc(var(--header-height) + 10px)
}
--------------------------------------------------------------------
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container > div:last-child {
  background-color: tomato;
  flex: 1;
}
*/


/*-------------------------------------------------------------- 
  flip-card
----------------------------------------------------------------*/

/*------------------------------------------------------------- 
  list-group
---------------------------------------------------------------*/
.son-list-group-item {
  user-select: none;
  margin:2px;
}

.son-list-group input[type="checkbox"] {
  display: none;
}

.son-list-group input[type="checkbox"] + .son-list-group-item {
  cursor: pointer;
}

.son-list-group input[type="checkbox"] + .son-list-group-item:before {
  content: "\2713";
  color: transparent;
  font-weight: bold;
  margin-right: 1em;
}

.son-list-group input[type="checkbox"]:checked + .son-list-group-item {
  background-color: #0275D8;
  color: #FFF;
}

.son-list-group input[type="checkbox"]:checked + .son-list-group-item:before {
  color: inherit;
}

.son-list-group input[type="radio"] {
  display: none;
}

.son-list-group input[type="radio"] + .son-list-group-item {
  cursor: pointer;
}

.son-list-group input[type="radio"] + .son-list-group-item:before {
  content: "\2022";
  color: transparent;
  font-weight: bold;
  margin-right: 1em;
}

.son-list-group input[type="radio"]:checked + .son-list-group-item {
  background-color: #0275D8;
  color: #FFF;
}

.son-list-group input[type="radio"]:checked + .son-list-group-item:before {
  color: inherit;
}



/*---------------------------------------------------------------- 
listgroup 같은 radio-box.check-box 

 https://www.sliderrevolution.com/resources/styling-radio-buttons/  (59 Custom Examples)  
 built-in radio,checkbox 를 display none 시킨다 
 label 을 lis-group-item 처럼 나타나게 만든다 
 lebel 의 before,after 에 radio,checkbox 같은 모양을 만든다(동그라미는 사각형 border-radius 를 조절 하여 생성)  
 그 내부에 tick-mark 를 부착 한다 

sample 
<form>
  <div class="son-radio">
    <input type="radio" id="huey" name="drone" value="huey" checked />
    <label for="huey">Huey</label>
  </div>

  <div class="son-radio">
    <input type="radio" id="louie" name="drone" value="louie" />
    <label for="louie">--Louie</label>
  </div>

  <br>
  <div class="son-check">
    <input type="checkbox" id="huey1" name="drone" value="huey" checked />
    <label for="huey1">Huey</label>
  </div>

  <div class="son-check">
    <input type="checkbox" id="louie1" name="drone" value="louie" />
    <label for="louie1">--Louie</label>
  </div>
</form>

-------------------------------------------------------------------*/
.son-radio , .son-checkbox {
  position: relative ;
  display : block    ;
}

.son-radio label, .son-checkbox label {
  display   : block    ;
  background: #eed     ;           /* #fee8c3;  */
  color     : #111     ;           /*  #444;    */
  padding   : 1px 2px 2px 20px ;   /*  padding: 10px 40px;  */
  margin-bottom: 4px;
  cursor: pointer;

  border       : solid 1px #ddd ;   /* #fdd591  */
  border-radius: 1px ;
  box-shadow   : 0 1px 1px rgba(0,0,0,.65);
}

.son-radio label:after, .son-radio label:before {
  content  : "";
  position : absolute;
  width    : 16px;         /* default= 18px?? */
  height   : 16px;
  top      : 4px;
  left     : 4px;            /* 10px */
  border-radius: 16px;       /*  둥글게 둥글게..., 16px 이상은 거의 동일 */
  background: #fdcb77;
}

/* :after 가 왜 필요한가?? */
.son-checkbox label:before, .son-checkbox label:after  {  /* border-radius 만 다르다 */
  content: "";
  position: absolute;
  width  : 16px  ;
  height : 16px  ;
  top    : 4px  ;
  left   : 4px  ;
  border-radius: 1px;    /*  네모 box 모양 */
  background: #fdcb77;  
}

.son-radio label:before, .son-checkbox label:before {
  background: transparent;
  /* 우리 이제는 헤매지 말자... 아닌 밤중에 달이 밝아도 */
  /* transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s; */
  z-index: 2;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 13px;
  background-position: center;
  width : 0 ;
  height: 0 ;

  /* check-mark , '✓' */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+);
  
}
.son-radio input[type=radio],  .son-checkbox input[type=checkbox] {
  display : none     ;         /* 너는 아예 나타나지 마라 */
  position: absolute ;
  width: 100%;
  left :20px ;                 /* 이 값을 변경해도 헛방이다, 작동 안한다 */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.son-radio input[type=radio]:checked + label, .son-checkbox input[type=checkbox]:checked + label {   
  background: #fdcb77;
/*  
  -webkit-animation-name: blink;
          animation-name: blink;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  border-color: #fcae2c;
*/
}

/* check 된 녀석의 동그라미 색깔 */
.son-radio input[type=radio]:checked + label:after, .son-checkbox input[type=checkbox]:checked + label:after {  
  background: green ;      /* #fcae2c; */
}

/* 동그래미 안의 check-mark */
.son-radio input[type=radio]:checked + label:before , .son-checkbox input[type=checkbox]:checked + label:before{  
  width : 18px ;
  height: 18px ;
}


/*-------------------------------------------------------------- 
from unread.css : https://github.com/Mulaza/unread-messages.js/blob/master/src/css/style.css  
---------------------------------------------------------------*/
.notification-container{
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 1px;    /* 9px; */
}

.notification-circle{
    cursor: default;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red ;   /*  #fd3995;  */
    color: white;
    box-shadow: white 0px 0px 0px 1px;

    font-size: 76%;         /* 85% org */
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 999px;
    min-width : 14px ;     /* 20px; org */
    min-height: 8px  ;     /* 10px; org */
    padding: 2px 3px ;     /* 3px 5px org */
    position: absolute;
    z-index: 1;
    animation-name: pop;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-fill-mode: forwards;
}

.circle-shrink{
    animation-name: shrink;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-fill-mode: forwards;
}

.notification-circle::selection{
    background: none;   
}

@keyframes pop {
    from{ transform: scale(0.4); }
    to{  transform: scale(1); }
}

@keyframes shrink {
    from{     }
    to{ transform: scale(0);  opacity: 0;  }
}


/*------------------------------------------------------------ */
/* context-menu                                                 */
/* Hi,I just updated contextMenu plugin with new FontAwesome 5 support. 
It's working properly if you use FontAvesome with WebFonts & CSS, 
but if you use FontAwesome with SVG & JS, icons are not rendered properly. 
In this case you need additional css:
 ------------------------------------------------------------ */
.context-menu-icon.context-menu-icon--fa5 svg { position: absolute;left: .5em;top: .4em;color: #2980b9;}
.context-menu-icon.context-menu-icon--fa5.context-menu-hover svg {color: #fff;}
.context-menu-icon.context-menu-icon--fa5.context-menu-disabled svg {color: #bbb;}


/*------------------------------------------------------------ 
 rotation                                                    
--------------------------------------------------------------*/
.my-rotate {
   -moz-transition: all 0.3s linear;
   -webkit-transition: all 0.3s linear;
   transition: all 0.3s linear;
}

.my-rotate.d90 {
   -moz-transform:rotate(90deg);
   -webkit-transform:rotate(90deg);
   transform:rotate(90deg);
}

.my-rotate.d180 {
   -moz-transform:rotate(180deg);
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg);
}

.my-rotate.d270 {
   -moz-transform:rotate(270deg);
   -webkit-transform:rotate(270deg);
   transform:rotate(270deg);
}

.my-rotate.down {
   -moz-transform:rotate(180deg);
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg);
}

/* ------------------------------------------------------------ 
 table-data : https://jhnyang.tistory.com/285
 column 의 크기는 th 에 의해서 결정되어진다 
 ------------------------------------------------------------ */
 table.son-table-data--3 {          /* 3-column */
  font-size : 0.9rem           ; 
  margin    : 10px 4px 4px 4px ;
  padding   : 2px 2px 2px 5px  ;
  border    : 1ps solid blue   ;
  border-collapse : collapse   ;  
/*
  width     : 100%             ;
  height    : 100%             ;
  overflow  : auto             ;
*/
}

table.son-table-data--3 tr { 
  border-bottom : 1px dashed green ;  /*  bottom 에만 line 적용 */
  -webkit-border-bottom : 1px dashed green ;  /*  bottom 에만 line 적용 */
/*  padding    : 4px 2px 4px 2px ;  */
}

table.son-table-data--3 tr.sub-title td{
  background-color : cyan   ; 
  text-align   : left       ;        /* td 가 priority 를 가진다 */
  padding-left : 25px       ; 
  font-weight  : 600        ; 
}

table.son-table-data--3 td { 
 /* border-bottom : 1px dotted blue ;  */ 
  padding    : 3px 2px 3px 2px ; 
}

table.son-table-data--3 td:nth-child(1) ,
table.son-table-data--3 th:nth-child(1){    /* 상단 title=subject */
  text-align : right           ;
  padding    : 4px 7px 4px 2px ; 
  white-space: nowrap          ;     /* 필수 */
}

table.son-table-data--3 td:nth-child(2) , 
table.son-table-data--3 th:nth-child(2) {    /* 상단 title=subject */
  text-align : center          ;
  padding    : 4px 7px 4px 2px ; 
  white-space: nowrap          ;     /* 필수 */
}

table.son-table-data--3 td:nth-child(3), 
table.son-table-data--3 th:nth-child(3) {    /* 상단 title=subject */
  text-align : left            ;
  padding    : 4px 7px 4px 2px ; 
  width      : 99%             ; 
  white-space: nowrap          ;     /* 필수 */
}

/*
table.son-table-data--3 td:last-child {  
  text-align : left            ;
  width      : 99%             ; 
}

table.son-table-data--3 td:not(:first-child) {  
  text-align : left            ;
  width      : 99%             ; 
}
*/


/*--------------------------------------------------------------
 쪽지                                                        
---------------------------------------------------------------*/
.mssg_badge{
   position: relative;
   top     : 3px; 
   margin  : 3px 7px 2px 7px; 
   padding : 0px 3px;
}

.mssg_icon{ color: black;  }
.mssg_icon.red{ color: red; }

.mssg_cnt_badge {
   position  : absolute;
   top       : -1px  ;
   right     : -9px ;
   font-size : 0.6rem;
   background: green;
   color     : white ;
   width     : 20px  ;
   height    : 16px  ;
   text-align: center;
   line-height  : 18px;
   border-radius: 45%;
   box-shadow :0 0 1px #333;
}

.mssg_cnt_badge.red {
   background: red;
}

/*-------------------------------------------------------------
 bbs-rotating-caret                                          
--------------------------------------------------------------*/
.bbs-card-head .fa-caret-up {
  transition: .3s transform ease-in-out;
}

.bbs-card-head .collapsed .fa-caret-up {
  transform: rotate(180deg);
}

/*-------------------------------------------------------------- 
 rotating-caret                                               
---------------------------------------------------------------*/
.expand_caret {
   transform: scale(1.6);
   margin-left: 8px;
   margin-top: -4px;
}

a[aria-expanded='false'] > .expand_caret {  transform: scale(1.6) rotate(-90deg); }

accordion-toggle:after {
  font-family: 'FontAwesome';  /* essential to enable caret symbol*/
  content    : "\f0d7";        /* adjust as needed, taken from font-awesome.css */
  color: grey;
}
.accordion-toggle.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\f0da";          /* adjust as needed, taken from font-awesome.css */
}

/*----------------------------------------------------------------
  -checkbox - toggle                                                     
 <label class="chkbox-custom">&nbsp
    <input type="checkbox" checked="checked">
    <span class="checkmark"></span>
   </label>                                                              
-----------------------------------------------------------------*/
/* The container */
.chkbox-custom{
  display: inline;        /* block */
  position: relative;
  /* width   : 26px;  */
  padding-left: 16px;
  margin-bottom: 1px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.chkbox-custom input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top   : 0;
  left  : 0;
  height: 22px;
  width : 22px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
/* .chkbox-custom:hover input ~ .checkmark { background-color: #ccc; } */ 

.chkbox-custom input:checked ~ .checkmark { background-color: #2196F3; }/* When the checkbox is checked, add a blue background */
.checkmark:after {              /* Create the checkmark/indicator (hidden when not checked) */
  content: "";
  position: absolute;
  display: none;
}

.chkbox-custom input:checked ~ .checkmark:after {  display: block; }/* Show the checkmark when checked */
.chkbox-custom .checkmark:after {     /* Style the checkmark/indicator */
  left   : 8px;
  top    : 4px;
  width  : 6px;
  height : 10px;
  border : solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

input:invalid    { border:3px solid red ; }
input:is-invalid { border:3px solid red ; }

input::-webkit-input-placeholder {
  color      : red     ;
  font-style : italic  ;
  font-weight: lighter ;
}

input:-ms-input-placeholder {
  color: red;
  font-style: italic;
}

textarea::-webkit-input-placeholder {
  color: blue;
  font-weight: bold;
}

textarea:-ms-input-placeholder {
  color: blue;
  font-weight: bold;
}

/*-------------------------------------------------------------
 form-compact                                                 
--------------------------------------------------------------*/
.form-compact {
  font-size: 0.8em;
}

.form-compact .form-control {
  padding: 1px 2px;
  height: 24px;
  font-size:1em;
}

.form-compact label {
  margin-bottom: 1px;
}

.form-compact .form-group
{
  margin-bottom:0px;
}

/*------------------------------------------------------------ 
 pop-over                                                    
--------------------------------------------------------------*/
 .popover{
   max-width: 480px;  /* Max Width of the popover (depending on the container!) */
 }

/*--------------------------------------------------------------
Yamm3 - Yet another megamenu(Bootstrap3)  http://geedmo.github.com/yamm3 
@geedmo - Licensed under the MIT license							
---------------------------------------------------------------*/
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .container {
  position: relative;
}
.yamm .dropdown-menu {
  left: auto;
}
.yamm .yamm-content {
  padding: 18px 28px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left : 0;
  right: 0;
}	  


.modal-dialog.modal-fullsize {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.modal-content.modal-fullsize {
  height: auto;
  min-height: 100%;
  border-radius: 0; 
}

.modeless{
  top:10%;
  left:50%;
  bottom:auto;
  right:auto;
  margin-left:-300px;
}

/*------------------------------------------------------------ 
list                                                        
-------------------------------------------------------------*/
li.list-group-item.row   { padding:2px; }     /* padding 이 지나치게 크다 */
.nav-pills>li>a {      /* mssg.main.html 에서 하단의 tab-button  */
   padding-top: 4px;
   padding-bottom: 4px;
}

/*--------------------------------------------------------------
 close mark                                                               
  <div class="wrapper">                                                    
    <img src="https://www.google.com/images/srpr/logo11w.png" />          
    <span class="close"></span>                                           
  </div>                                                                  
---------------------------------------------------------------*/
.mark-wrapper {
  position: relative;
  display: inline-block;
}

.mark-close:before {
  content: '✕';
}

.mark-close {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

/*--------------------------------------------------------------
 centering-block 
---------------------------------------------------------------*/
.center-block {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate3d(-50%,-50%, 0);
}

/*--------------------------------------------------------------
 input-file 용                                               
--------------------------------------------------------------*/
/*  hide-input control */
 .inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

/* label styling   */
.inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: red;
}

.inputfile + label { cursor: pointer; }   /* "hand" cursor */

/* 외곽선  animation, keyboard navigation 일때 필요 */
.inputfile:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {	pointer-events: none; }
.inputfile-1 + label {  color: #d3394c; }
.inputfile-1 + label {
    border: 1px solid #d3394c;
    background-color: #f1e5e6;
    padding: 0;
}

.inputfile-1:focus + label,
.inputfile-1.has-focus + label,
.inputfile-1 + label:hover { border-color: #722040; }

.inputfile-1 + label span,
.inputfile-1 + label strong {  padding: 0.625rem 1.25rem;    /* 10px 20px */ }

.inputfile-1 + label span {
    width: 200px;
    min-height: 2em;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
}

.inputfile-1 + label strong {
    height: 100%;
    color: #f1e5e6;
    background-color: #d3394c;
    display: inline-block;
}

.inputfile-1:focus + label strong,
.inputfile-1.has-focus + label strong,
.inputfile-1 + label:hover strong {
    background-color: #722040;
}

@media screen and (max-width: 50em) {
  .inputfile-1 + label strong { display: block; }
}

/*------------------------------------------------------------ 
 폐기 예정                                                   
-------------------------------------------------------------*/
div.people {
  display        : none    ; 
  margin         : 1px 1px 1px 1px;
  border-top     : 1px solid #1affd0 ;
  border-bottom  : 1px solid #1affd0 ;
  padding        : 1px 5px 1px 5px ;
  background-color: #b3fff0 ;
  height        : 60px    ; 
  font-weight   : normal  ; 
  font-style    : normal  ;
  font-size     : 0.88em  ;
  line-height   : 1.3em   ;
  font-family   : georgia, 돋움체 ;
 }

 hr.people{
   overflow: visible;       /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}

hr.people:after {
    content: ''  ;              /* "★" ; */
    display: inline-block;
    position: relative;
    top: -0.9em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}


/*------------------------------------------------------------
 Bootstrap 3 - Disabled dropdown links						
 Bootstrap 3 has built-in visual support for disabled dropdown menu items, however these are simply 
 visual changes and don't actually impact the interactivity of the element itself. 
 Once this is added to your styles, you can easily disable any dropdown item by applying a [disabled] attribute
 to the <a/> element itself, and adding the usual .disabled class to the parent <li>. 
 More information here: http://blog.craigsworks.com/bootstrap-3-disabled-dropdown-links  
-------------------------------------------------------------*/
/*  Mimic cursor style from native .dropdown-menu > .disabled > a{} styles, since `pointer-events: none` kills the cursor state, too. */
.dropdown-menu > .disabled{  cursor: not-allowed;  }
.dropdown-menu > .disabled > a{ pointer-events: none; }    /* The real magic ;) */

/*-----------------------------------------------------------
 icon-badge                                                  
------------------------------------------------------------*/
.icon-wrapper{
    position:relative;
    float:left;
}

*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}

i {   
    width:16px;
    text-align:center;
    vertical-align:middle;
}

.badge_alert {
    font-size: .7em;
    
    display: block;
    position: absolute;
    top: 0.6em;
    right: 0.7em;
    width: 1.9em;
    height: 1.3em;
    line-height: 1.1em;
    border-radius: 10%;
    text-align: left;

    padding-left:1px;
    color: #fff;
    background: rgba(255,0,0,1);
}



/*------------------------------------------------------------
 flip-btm  
 https://freefrontend.com/css-flip-cards/                     

.flip-btm img{
    display: block;
    width  : 100%;
    height : 100%       ; 
}
-------------------------------------------------------------*/
.flip-btm .flip-btm-div{
    position: absolute;
    top     : 56px   ;
    left    : 10px   ;
    right   : 10px   ;
    bottom  : 18px   ;
    padding : 2px    ;
/*  opacity : 0.2    ;       */
    background-color: silver ;    /*  #ccc ;  */

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style  : preserve-3d;
    -ms-transform-style : preserve-3d;
    transform-style     : preserve-3d;
    -webkit-transform   : rotateX(90deg);
    -webkit-transform   : rotateX(90deg);
    -moz-transform      : perspective(300px)  rotateX(90deg);
    -o-transform        : rotateX(90deg);
    transform-origin    : 50% 100% 0;
    -webkit-transition  : 0.4s;
}

.flip-btm:hover .flip-btm-div{
    -webkit-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform   : rotateX(0deg);
    -o-transform     : rotateX(0deg);
}

/*------------------------------------------------------------
 multi-column                                                
-------------------------------------------------------------*/
.m-col-1 {
  width : 22px  ; 
}

.m-col-2 {
  width     : 65px  ;
  text-align: right ;
}

.m-col-3 {
  margin-left: 15px    ;
  text-align: left   ;
}