/* COMMON */
.body__container {
  /* default font로 roboto를 설정, 지원 안될 시 고딕체 대체 */
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #333;
}
/* a 태그 아래 생기는 밑줄 제거 */
a {
  text-decoration: none;
}

/* BTN */
.btn {
  height: 34px;
  background: #eee linear-gradient(to bottom, #fcfcfc, #eee);
  border: 1px solid #d5d5d5;
  border-radius: 4px;

  /*수직적 가운데 정렬(align-items)
  수평적 가운데 정렬 기능 넣지 않고 flex 활용
  -> 1. width 삭제 2. padding 추가, display: inline-flex 적용
  TODO: flex 학습 후 재확인할 것
  */
  display: inline-flex;
  align-items: center;
  padding: 0 12px;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;

  /*버튼에 커서 올리면 커서가 포인터 모양으로 변환*/
  cursor: pointer;
  /*padding 등 여백 적용 시 박스의 크기를 제한*/
  box-sizing: border-box;
  position: relative;
  color: #333;
}
.btn:hover::before{
  content: "";
  position: absolute;
  /* top left 0으로 설정해야 부모요소 기준으로 position이 정확히 일치하는 곳에서 hover 가능 */
  top: 0;
  left: 0;
  /* hover 시 부모요소와 같은 크기로 설정 */
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.07);

}
.btn.btn--primary{
  border: 1px solid #65b836;
  color: #fff;
  background: #55a532 linear-gradient(#91dd70, #55ae2e);
}

/* INPUT TEXT */
.input--text{
  height: 34px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  /* input 박스 클릭 시 border 부분에 변화생김, 이를 제어하는 방법 중 inline은 까다로움으로 none 처리*/
  outline: none;
  box-shadow: inset 0 1px 2px rgba(73, 40, 40, 0.075);
  font-size: 16px;
}
.input--text:focus {
  border-color: #51a7e8;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075), 
              0 0 5px rgba(81,167,232,0.5);
}
/* Vendor Prefix (브라우저 업체별 접두사) 
표준 기능이 아닌 업체별 실험적 제공 기능의 경우 Vendor Prefix 사용함 */
.input--text::-webkit-input-placeholder { color: #cacaca}
.input--text::-ms-input-placeholder { color: #cacaca}
.input--text::-moz-input-placeholder { color: #cacaca}


/* FLOAT CLEARFIX */
.clearfix::after {
  content: "";
  clear: both;
  display: block;
}
.float--left {
  float: left;
}
.float--right {
  float: right;
}

/* SUMMARY */
.summary {

}
.summary__title {
  font-size: 38px;
  font-weight: 300;
  line-height: 1.25;
  margin-bottom: 18px;
}
.summary__description {
  font-size: 26px;
  font-weight: 300;
  color: #767676;
  line-height: 1.5;

}
/* SECTION INNER */
.section {
  /* 큼직한 블록 안에 relative를 선언하는 것이 추후 사용성 증가 */
  position: relative;
}
/* 수평적 가운데 정렬 가능, 반드시 width가 정의되어야 함 */
/* refactor: .inner 안에 공통적으로 들어가므로 본문과 같이 독립 적용 */
.section .inner {
  max-width: 980px;
  margin: 0 auto;

  box-sizing: border-box;
  position: relative;
}


/* HEADER */
header {
  border-bottom: 1px solid rgba(0,0,0,0.75);
  box-shadow: 0 0 5px rgba(0,0,0,0.75);
  /* 브라우저별 색상속성의 텍스트를 읽는 방법이 다르므로 16진수표현 권장 */
  background: #fff;
}
header .inner{
  /* header가 아닌 header .inner에 height을 삽입하는 이유는 height의 default는 
  auto이므로 지식요소에 height을 추가함으로써 자동으로 부모요소에 같은 높이가 추가됨 */
  height: 78px;
}
/* header .inner .menu-group 으로 선택하여 속성 입력 가능하나 직관적으로 표기하기 위해 본문의 방식 권장 */
header .menu-group{
  /* 아래 속성으로 자식요소(후손요소 X)들의 수평정렬 가능 */
  display: flex;
  /* 아래 속성으로 해당 아이디의 높이를 기준으로 자식요소 수직정렬 */
  align-items: center;
  height: 100%;
}
header .logo{
  margin-right: 10px;
}
header .logo a{
  background: url("../img/logo.svg");
  width: 32px;
  height: 32px;
  display: block;
  /* html로 삽입한 text는 img의 대체요소가 됨으로 제거하지 않고 text를 밀어버림 */
  text-indent: -9999px;
}
header .logo a:hover{
  background: url("../img/logo_on.svg");
}
header .main-menu{
  display: flex;
}
header .main-menu li a{
  /* inline 요소인 a 태그에 block 속성을 부여하기 위해 아래 속성 추가 */
  display: block;
  /* a 태그 영역을 4방위에서 10px 늘림으로써 UX 향상 */
  padding: 10px;
  color: #3c4146;
}
header .main-menu li a:hover {
  color: #4078c0;
}
header .sign-group {
  display: flex;
  /* 수직 정렬 위해 아래의 두 가지 속성 활용 */
  align-items: center;
  height: 100%;
}
/* order 속성을 통해 sign-group 자식 요소들 간 순서를 바꿈 */
header .btn-group {
  order: 2;
  /* btn 내 a에 대해 inline-flex 처리에 따라 의도치 않은 띄어쓰기가 반영됨. 이를 flex로 조정 가능 */
  display: flex;
}
header .btn-group .sign-in {
  margin-right: 4px;
}
#search-form {
  order: 1;
  margin-right: 12px;
}
#search {
  width: 160px;
  font-size: 14px;
}
/* id=search 요소의 형제요소 중 type="submit"인 요소 선택 */
#search + [type="submit"] {
  display: none;
}
header .sub-menu {
/* order: 0; 기본값이므로 생략 가능*/
  display: flex;
  margin-right: 10px;
}
header .sub-menu li a {
  padding: 8px;
  display: block;
  font-size: 13px;
  color: #3c4146;
}

/* VISUAL */
.section--visual {
  background-image: url("../img/bg.jpg");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
}
/* 배경이미지 안에 회색계열의 배경을 덧붙여서 전체적으로 어두운 느낌을 보여줌 */
.section--visual::before {
  content: "";
  /* 부모 요소인 section--visual에 position: relative;가 없지만 .section에 해당 속성이 있으므로 relative 사용 가능 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
}
.section--visual .inner {
  padding: 160px 0;
  display: flex;
}
/* TODO: flex 학습 후 다시 보자 */
.section--visual .summary {
  /* flex: 1; 로 축약 가능 */
  flex-grow: 1;
  flex-basis: 0;
  margin-right: 90px;
}
/* color를 inner 안에 사용하지 않은 이유는 재사용성 때문, 흰 글씨는 summary page에만 사용됨 */
.section--visual .summary__title {
  color: #fff;
  font-size: 54px;
}
.section--visual .summary__description {
  color: #fff;
}
#sign-form {
  /* sign-form의 크기를 조절함에 따라 자식 요소들의 크기를 한번에 적용됨. 이와 같은 구조 권장 */
  width: 340px;

}
#sign-form li {
  margin-bottom: 17px;
}
/* TODO: todoapp refactor할 때 사용 */
#sign-form li:last-child {
  margin-bottom: 0;
}
#sign-form .input--text {
  width: 100%;
  height: 40px;
}
#sign-form .caption {
  font-size: 12px;
  margin-top: 5px;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  text-align: center;
}
#sign-form [type="submit"] {
  width: 100%;
  height: 62px;
  padding: 0 25px;
  font-size: 20px;
  /* text-align: center; 기능 X, class btn(선 정의된 요소)에서 display: inline-flex 속성이 있으므로 justify-content를 사용해야 내부 content 정렬 기능 */
  justify-content: center;
}