html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}
body {
  overflow-x: hidden;
}
.contents_cover {
  text-align: center;
}
.contents_cover > img {
  width: 100%;
  max-width: 768px;
}

.contents_container {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  padding: 3vh 10vw 8vh 10vw;
}
.contents_tit {
  padding: 4vh 0;
}
.contents_tit > img {
  width: 100%;
}
.contents_box {
  display: flex;
  flex-direction: column;
}
.contents_box > img {
  width: 100%;
  margin: 0 auto 4vh auto;
}
.contents_box > img.contents_img {
  width: 80%;
  margin: 0 auto 4vh auto;
}
.contents_box > img:last-child {
  margin: 0 auto;
}
.logo_img {
  width: 40%!important;
  margin: 10vh auto 10vh auto!important;
}

.contact_container {
  position:sticky;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-end;
  align-items: center;
  background: #F5F7F9;
  border-radius: 0.5rem 0.5rem 0 0;
  box-shadow: 0 -6px 4px rgba(0,0,0,0.1);
  animation: bottom 1s 0s 1 ease-in-out alternate forwards;
}
@keyframes bottom{
  0% { bottom:-100px; }
  100% { left: 0px; }
}
.contact_container > div {
  width: 100%;
  max-width: 868px;
  text-align: center;
  font-size: 1rem;
  box-sizing: border-box;
}
.contact_container > div:first-child {
  padding: 1rem 2rem 0 2rem;
  z-index: 2;
}
.contact_container > div:last-child {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;
}
.contact_container > div > a {
  width: 100%;
  margin: 0 0 0.5rem 0;
  padding: 0.5rem;
  text-decoration: none;
  border-radius: 0.5rem;
  box-sizing: border-box;
  background: #FFDB20;
  color: #000000;
  font-weight: 500;
}
.contact_container > div > a:last-child {
  background: #192837;
  color: #ffffff;
}

.contents_div {
  width: 100%;
  background: #FAFAFA;
  height: 10px;
  border-top: 1px solid #EBEBEB;
  border-bottom: 1px solid #EBEBEB;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}

@media (min-width: 450px) {
  .contact_container > div:last-child {
    flex-direction: row;
  }
  .contact_container > div > a {
    margin: 0;
  }
  .contact_container > div > a:last-child {
    margin: 0 0 0 1rem;
  }
}
/* ===== 제휴 문의 레이어 ===== */
body.layer_open {
  overflow: hidden;
}

.partnership_layer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(25, 40, 55, 0.6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2rem 1rem;
  box-sizing: border-box;
}
/* 열릴 때는 JS가 hidden 속성을 함께 떼지만, 속성이 남아 있어도 열리도록 명시한다 */
.partnership_layer.is_open,
.partnership_layer.is_open[hidden] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.partnership_panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  /* 화면(레이어 패딩 제외)보다 커지지 않게 잡아 항상 화면 정중앙에 머물게 한다 */
  max-height: 100%;
  margin: auto;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.partnership_head {
  position: relative;
  flex: 0 0 auto;
  padding: 1.5rem 3rem 1.25rem 1.5rem;
  background: #192837;
  color: #ffffff;
}
.partnership_head > h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.partnership_head > p {
  margin: 0.5rem 0 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #B9C4CE;
}
.partnership_close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.partnership_close:hover {
  background: rgba(255, 255, 255, 0.15);
}
.partnership_body {
  /* 기본 1단. 화면이 넓어지면 아래 미디어쿼리에서 2단·3단으로 나뉜다 */
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem 1.25rem;
  align-content: start;
  flex: 1 1 auto;
  padding: 1.5rem;
  /* 다단으로도 못 담을 만큼 화면이 낮을 때만 폼 안쪽에서 스크롤 (페이지 스크롤 방지) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* display:grid 가 UA의 [hidden] 규칙을 덮어쓰므로 접수 완료 시 숨김이 동작하도록 명시한다 */
.partnership_body[hidden] {
  display: none;
}
/* 폼 직계 요소 중 한 줄을 통째로 써야 하는 것들 */
.partnership_field_wide,
.partnership_agree,
.partnership_status,
.partnership_submit,
.partnership_body > .partnership_error {
  grid-column: 1 / -1;
}
/* 라벨 → 입력창 → 오류 문구를 세로로 쌓되, 간격은 row-gap 으로만 준다.
   오류 문구는 전문을 그대로 노출하므로 노출 시 항목 높이가 한 줄 늘어난다.
   그만큼을 압축 티어(아래 미디어쿼리)에서 미리 확보해 스크롤이 생기지 않게 한다. */
.partnership_field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.3rem;
  /* 같은 행의 다른 항목에 오류가 떠서 행이 높아져도 이 항목의 행들은 늘어나지 않는다.
     (기본값 stretch 로 두면 오류 없는 항목의 입력창 높이가 같이 늘어난다) */
  align-content: start;
  margin: 0;
  min-width: 0;
}
.partnership_field > label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #192837;
}
.partnership_field > .partnership_error {
  margin: 0;
  /* 한국어를 어절 단위로 끊어 두 줄이 되더라도 읽기 좋게 유지한다 */
  word-break: keep-all;
}
.partnership_field > label > span {
  color: #E5484D;
}
.partnership_field > input,
.partnership_field > textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid #D7DDE3;
  border-radius: 0.4rem;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 0.95rem;
  font-family: inherit;
  color: #192837;
}
.partnership_field > input:focus,
.partnership_field > textarea:focus {
  outline: none;
  border-color: #1FB9DF;
  box-shadow: 0 0 0 3px rgba(31, 185, 223, 0.15);
}
.partnership_field > input::placeholder,
.partnership_field > textarea::placeholder {
  color: #A9B3BC;
}
.partnership_field > textarea {
  display: block;
  height: 6rem;
  min-height: 3rem;
  line-height: 1.5;
  /* 세로 방향으로만 늘릴 수 있게 해 레이아웃이 가로로 깨지지 않도록 한다 */
  resize: vertical;
}
.partnership_field > input.is_invalid {
  border-color: #E5484D;
  background: #FFFBFB;
}
.partnership_field > input.is_invalid:focus {
  border-color: #E5484D;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.15);
}
.partnership_error {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #C4292E;
}
.partnership_error::before {
  content: "!";
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0 0.3rem 0 0;
  border-radius: 50%;
  background: #E5484D;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 0.95rem;
  text-align: center;
  vertical-align: 1px;
}
.partnership_agree {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0.25rem 0 0 0;
  padding: 0.85rem;
  border-radius: 0.4rem;
  background: #F5F7F9;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #4A5763;
}
.partnership_agree > input {
  flex: 0 0 auto;
  margin: 0.15rem 0.5rem 0 0;
}
.partnership_agree > input.is_invalid {
  outline: 2px solid #E5484D;
  outline-offset: 1px;
}
.partnership_agree_text {
  flex: 1 1 auto;
  min-width: 0;
}
/* 동의 오류는 같은 줄 오른쪽 끝에 붙인다 → 오류가 떠도 높이가 늘지 않는다.
   폭이 모자라면 flex-wrap 으로 자연스럽게 다음 줄로 내려간다(모바일 1단 구간). */
.partnership_agree > .partnership_error {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 0 0 0 0.75rem;
  white-space: nowrap;
}
.partnership_agree label {
  cursor: pointer;
}
.partnership_terms {
  margin: 0 0 0 0.25rem;
  color: #0A7BCE;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.partnership_terms:hover {
  color: #1FB9DF;
}
.partnership_status {
  display: none;
  margin: 0;
  padding: 0.75rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.5;
}
.partnership_status.is_error {
  display: block;
  background: #FDECEC;
  color: #C4292E;
}
.partnership_submit {
  width: 100%;
  margin: 0.25rem 0 0 0;
  padding: 0.85rem;
  border: 0;
  border-radius: 0.5rem;
  background: #FFDB20;
  color: #000000;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.partnership_submit:disabled {
  background: #E7EAED;
  color: #98A2AC;
  cursor: default;
}

/* --- RWD: 화면이 넓어지면 입력 항목을 2단으로 펼쳐 세로 길이를 절반으로 줄인다 --- */
@media (min-width: 620px) {
  .partnership_panel {
    max-width: 760px;
  }
  .partnership_body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 넓은 화면에서는 패널을 조금 더 넓혀 동의 문구 줄 수를 줄인다(= 세로 길이 감소) */
@media (min-width: 1000px) {
  .partnership_panel {
    max-width: 840px;
  }
}
/* --- 기준 화면: 1280 x 960 (브라우저 크롬 제외 뷰포트 약 1280 x 830) ---
   이 구간은 세로 여유가 충분하므로 여백·입력창을 넉넉하게 되돌린다. */
@media (min-width: 1200px) and (min-height: 800px) {
  .partnership_panel {
    max-width: 880px;
  }
  .partnership_body {
    gap: 1rem 1.5rem;
    padding: 1.75rem;
  }
  .partnership_field > textarea {
    height: 7rem;
  }
}

/* --- 노트북 등 세로가 짧은 화면: 여백·글자 크기를 줄여 스크롤 없이 담는다.
       오류 문구 3줄(약 60px)이 동시에 떠도 들어가도록 미리 잡아둔 값이다. --- */
@media (max-height: 760px) {
  .partnership_layer {
    padding: 1rem;
  }
  .partnership_head {
    padding: 0.85rem 3rem 0.75rem 1.25rem;
  }
  .partnership_head > h2 {
    font-size: 1.1rem;
  }
  .partnership_close {
    top: 0.5rem;
    right: 0.65rem;
  }
  .partnership_body {
    gap: 0.55rem 1.1rem;
    padding: 1rem 1.25rem;
  }
  .partnership_field {
    row-gap: 0.2rem;
  }
  .partnership_field > label {
    font-size: 0.8rem;
  }
  .partnership_error {
    font-size: 0.72rem;
  }
  .partnership_field > input,
  .partnership_field > textarea {
    padding: 0.5rem 0.65rem;
    font-size: 0.9rem;
  }
  .partnership_field > textarea {
    height: 4rem;
  }
  .partnership_agree {
    padding: 0.6rem 0.7rem;
    font-size: 0.75rem;
  }
  .partnership_submit {
    padding: 0.7rem;
    font-size: 0.95rem;
  }
  .partnership_done {
    padding: 1.75rem 1.5rem;
  }
}

/* --- 가로 모드(랜드스케이프)처럼 세로가 매우 짧은 화면: 2단 유지 + 최소 여백 --- */
@media (max-height: 560px) and (min-width: 620px) {
  .partnership_layer {
    padding: 0.6rem;
  }
  .partnership_panel {
    max-width: 880px;
  }
  .partnership_body {
    gap: 0.4rem 0.9rem;
    padding: 0.7rem 0.9rem;
  }
  .partnership_head {
    padding: 0.55rem 2.5rem 0.5rem 0.9rem;
  }
  .partnership_head > h2 {
    font-size: 0.95rem;
  }
  .partnership_close {
    top: 0.35rem;
    right: 0.35rem;
  }
  .partnership_field {
    row-gap: 0.15rem;
  }
  .partnership_field > label {
    font-size: 0.72rem;
  }
  .partnership_error {
    font-size: 0.66rem;
  }
  .partnership_field > input,
  .partnership_field > textarea {
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
  }
  .partnership_field > textarea {
    height: 2.6rem;
  }
  .partnership_agree {
    margin: 0;
    padding: 0.45rem 0.55rem;
    font-size: 0.68rem;
    line-height: 1.35;
  }
  .partnership_submit {
    margin: 0;
    padding: 0.5rem;
    font-size: 0.88rem;
  }
  .partnership_done {
    padding: 1.25rem 1rem;
  }
}

/* ===== 약관 레이어 (제휴 문의 레이어 위에 겹쳐 뜬다) ===== */
.terms_layer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background: rgba(25, 40, 55, 0.75);
  padding: 2rem 1rem;
  box-sizing: border-box;
}
.terms_layer.is_open,
.terms_layer.is_open[hidden] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.terms_panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  height: 100%;
  max-height: 640px;
  margin: auto;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.terms_head {
  position: relative;
  flex: 0 0 auto;
  padding: 1.15rem 3rem 1.15rem 1.5rem;
  background: #192837;
  color: #ffffff;
}
.terms_head > h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.terms_close {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.terms_close:hover {
  background: rgba(255, 255, 255, 0.15);
}
.terms_frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #ffffff;
}
.terms_foot {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid #E4E9ED;
  background: #F5F7F9;
}
.terms_foot > a {
  font-size: 0.8rem;
  color: #6B7681;
}
.terms_confirm {
  flex: 0 0 auto;
  padding: 0.6rem 2rem;
  border: 0;
  border-radius: 0.4rem;
  background: #192837;
  color: #ffffff;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.partnership_honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.partnership_done {
  flex: 1 1 auto;
  padding: 2.5rem 1.5rem;
  overflow-y: auto;
  text-align: center;
}
.partnership_done > strong {
  display: block;
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  color: #192837;
}
.partnership_done > p {
  margin: 0 0 1.5rem 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #4A5763;
}
.partnership_done > button {
  padding: 0.7rem 2rem;
  border: 0;
  border-radius: 0.5rem;
  background: #192837;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}