@charset "UTF-8";
/* 우진 I&S > 마스코트(우지) — CI / 서체 페이지 레이아웃 기준
   클래스명은 component.css 의 .card / .grid / .sub-tit 와 겹치지 않도록 mascot- 접두어 사용 */

.mascot {
  word-break: keep-all;
}

/* ── 섹션 기본 (intro.css .contents_CI 간격 규칙) ── */
.mascot-sec {
  width: 100%;
  margin-top: 200px;
}
.mascot-sec:first-child {
  margin-top: 100px;
}
@media all and (max-width: 1024px) {
  .mascot-sec {
    margin-top: 60px;
  }
  .mascot-sec:first-child {
    margin-top: 60px;
  }
}

.mascot-sec__tit {
  font-size: 48px;
  font-weight: bold;
  line-height: 1.2;
  color: #14100d;
}
@media all and (max-width: 1024px) {
  .mascot-sec__tit {
    font-size: 18px;
  }
}

.mascot-sec__desc {
  display: block;
  font-size: 22px;
  line-height: 1.67;
  margin-top: 20px;
  color: #14100d;
}
@media all and (max-width: 1024px) {
  .mascot-sec__desc {
    font-size: 14px;
    line-height: 1.38;
    margin-top: 10px;
  }
}

/* 제목 + 다운로드 버튼 한 줄 배치 */
.mascot-sec__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 24px;
}
.mascot-sec__head > div {
  max-width: 1000px;
}
@media all and (max-width: 1024px) {
  .mascot-sec__head {
    gap: 16px;
  }
  .mascot-sec__head > div {
    max-width: none;
  }
}

.mascot-sub-tit {
  margin-top: 80px;
  font-size: 32px;
  font-weight: bold;
  color: #14100d;
}
.mascot-sec__head + .mascot-sub-tit {
  margin-top: 48px;
}
@media all and (max-width: 1024px) {
  .mascot-sub-tit {
    margin-top: 40px;
    font-size: 16px;
  }
  .mascot-sec__head + .mascot-sub-tit {
    margin-top: 28px;
  }
}

/* ── 다운로드 버튼 ── */
.mascot-btn-dl {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px;
  background: #f57921;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 4px;
  transition: background 0.2s;
  white-space: nowrap;
}
.mascot-btn-dl:hover {
  background: #e0661a;
  color: #fff;
}
.mascot-btn-dl svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media all and (max-width: 1024px) {
  .mascot-btn-dl {
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }
}

/* ── 01. INTRODUCTION ──
   캐릭터 가이드(260921 3차공유) 3p 를 좌표 그대로 재현.
   1920x1080pt 기준 값을 블록 폭 기준으로 환산: 값 = pt / 1920 * 100 (cqw) */
.mascot-intro {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1920/1080;
  background: #fff;
  color: #1d2633;
}
.mascot-intro b,
.mascot-intro mark {
  color: #ed7700;
  background: none;
  font-weight: bold;
}
.mascot-intro__label {
  position: absolute;
  left: 4.17cqw;
  top: 3.9cqw;
  font-size: 1.93cqw;
  font-weight: 600;
  line-height: 1.38;
  color: #000;
}
.mascot-intro__head {
  position: absolute;
  left: 4.17cqw;
  top: 12.24cqw;
  font-size: 5.09cqw;
  font-weight: bold;
  line-height: 1.21;
  letter-spacing: -0.01em;
}
.mascot-intro__txt {
  position: absolute;
  left: 4.43cqw;
  top: 26.46cqw;
  font-size: 1.5625cqw;
  font-weight: 500;
  line-height: 1.5;
}
.mascot-intro__visual {
  position: absolute;
  left: 48.6cqw;
  top: 4.35cqw;
  width: 45.02cqw;
  height: auto;
}

/* 모바일은 글자가 너무 작아지므로 같은 요소를 세로로 쌓음 */
@media all and (max-width: 1024px) {
  .mascot-intro {
    aspect-ratio: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .mascot-intro__label,
  .mascot-intro__head,
  .mascot-intro__txt,
  .mascot-intro__visual {
    position: static;
  }
  .mascot-intro__label {
    font-size: 14px;
  }
  .mascot-intro__head {
    font-size: 28px;
    margin-top: 16px;
  }
  .mascot-intro__txt {
    font-size: 15px;
    margin-top: 16px;
  }
  .mascot-intro__txt br.pc-only {
    display: none;
  }
  .mascot-intro__visual {
    width: 82%;
    margin: 32px auto 0;
  }
}
/* 컨테이너 쿼리 미지원 브라우저는 세로 배치로 대체 */
@supports not (container-type: inline-size) {
  .mascot-intro {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }
  .mascot-intro__label,
  .mascot-intro__head,
  .mascot-intro__txt,
  .mascot-intro__visual {
    position: static;
  }
  .mascot-intro__label {
    font-size: 22px;
  }
  .mascot-intro__head {
    font-size: 48px;
    margin-top: 20px;
  }
  .mascot-intro__txt {
    font-size: 22px;
    margin-top: 20px;
  }
  .mascot-intro__visual {
    width: 70%;
    margin: 40px auto 0;
  }
}

/* ── 02. 색상 규정 (intro.css .color-caption 규격) ── */
.mascot-colors {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 40px;
}
.mascot-color {
  width: 240px;
  margin-right: 80px;
}
.mascot-color:last-child {
  margin-right: 0;
}
.mascot-color__chip {
  position: relative;
  width: 100%;
  height: 200px;
  margin-top: 20px;
  border-radius: 8px;
}
.mascot-color__name {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
}
.mascot-color__desc {
  display: block;
  margin-top: 14px;
  padding-left: 10px;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.5;
}
.mascot-color__desc small {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #5b5b5c;
}
/* 우지 지정 색상 */
.mascot-color__chip.__w-orange {
  background: rgb(240, 103, 15);
}
.mascot-color__chip.__w-gray {
  background: rgb(126, 121, 121);
}
.mascot-color__chip.__w-dark {
  background: rgb(101, 96, 97);
}
.mascot-color__chip.__w-pink {
  background: rgb(251, 151, 139);
}
@media all and (max-width: 1024px) {
  .mascot-colors {
    gap: 0 4%;
    margin-top: 24px;
  }
  .mascot-color {
    width: 48%;
    margin-right: 0;
    margin-bottom: 24px;
  }
  .mascot-color__chip {
    height: 110px;
    margin-top: 10px;
  }
  .mascot-color__name {
    font-size: 13px;
    font-weight: normal;
  }
  .mascot-color__desc {
    margin-top: 8px;
    font-size: 13px;
  }
  .mascot-color__desc small {
    font-size: 12px;
  }
}

/* ── 03. 서체 ── */
.mascot-typo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 60px;
}
.mascot-typo li {
  background: #f8f8f8;
  border-radius: 16px;
  padding: 36px 32px;
}
.mascot-typo__lang {
  font-size: 15px;
  font-weight: bold;
  color: #f57921;
}
.mascot-typo__sample {
  font-size: 64px;
  line-height: 1.2;
  margin: 24px 0;
}
/* Amsi Pro 는 상용 서체라 웹폰트 대신 가이드 원본에서 렌더링한 이미지로 표시 */
.mascot-typo__sample img {
  height: 1.2em;
  width: auto;
}
.mascot-typo__sample.__bold {
  font-weight: bold;
}
.mascot-typo__sample.__medium {
  font-weight: 500;
}
.mascot-typo__name {
  font-size: 18px;
  font-weight: bold;
}
@media all and (max-width: 1280px) {
  .mascot-typo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media all and (max-width: 1024px) {
  .mascot-typo {
    gap: 12px;
    margin-top: 24px;
  }
  .mascot-typo li {
    padding: 20px;
  }
  .mascot-typo__sample {
    font-size: 36px;
    margin: 12px 0;
  }
  .mascot-typo__name {
    font-size: 13px;
  }
}

/* ── 04~05. 캐릭터 이미지 그리드 ── */
.mascot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.mascot-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 0.2s, transform 0.2s;
}
.mascot-card:hover {
  border-color: #f57921;
  transform: translateY(-4px);
}
.mascot-card__img {
  aspect-ratio: 1;
  background: #f8f8f8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 32px;
}
.mascot-card__img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
@media all and (max-width: 1024px) {
  .mascot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
  }
  .mascot-card__img {
    padding: 16px;
  }
}

/* ── 06. 로고 결합형 (가이드 15p: 왼쪽 2단 + 오른쪽 세로 1장) ── */
.mascot-vars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 60px;
}
.mascot-logo-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
  transition: border-color 0.2s, transform 0.2s;
}
.mascot-logo-card:hover {
  border-color: #f57921;
  transform: translateY(-4px);
}
.mascot-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mascot-logo-card.__tall {
  grid-column: 2;
  grid-row: 1/span 2;
}
@media all and (max-width: 1024px) {
  .mascot-vars {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 24px;
  }
  .mascot-logo-card.__tall {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ── 07. 사용 가이드라인 ── */
.mascot-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 60px;
}
.mascot-rule {
  background: #f8f8f8;
  border-radius: 16px;
  padding: 40px;
}
.mascot-rule h4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: bold;
  color: #14100d;
}
.mascot-badge {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 4px;
  color: #fff;
  letter-spacing: 0.06em;
  font-weight: bold;
}
.mascot-badge.__do {
  background: #2e8b57;
}
.mascot-badge.__dont {
  background: #d93025;
}
.mascot-rule ul {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}
.mascot-rule li {
  position: relative;
  padding-left: 18px;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
}
.mascot-rule li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f57921;
}
@media all and (max-width: 1024px) {
  .mascot-rules {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 24px;
  }
  .mascot-rule {
    padding: 24px 20px;
  }
  .mascot-rule h4 {
    font-size: 18px;
  }
  .mascot-rule li {
    font-size: 14px;
  }
}

/* 사용 문의 */
.mascot-contact {
  margin-top: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  background: #fff4eb;
  border: 1px solid #fbd9bf;
  border-left: 6px solid #f57921;
  border-radius: 16px;
  padding: 36px 40px;
  color: #14100d;
}
.mascot-contact__tit {
  font-size: 22px;
  font-weight: bold;
  color: #f57921;
}
.mascot-contact__who {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px 16px;
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
}
.mascot-contact__tel {
  font-weight: bold;
}
.mascot-contact__note {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: normal;
  color: #5b5b5c;
}
.mascot-contact img {
  width: 120px;
}
@media all and (max-width: 1024px) {
  .mascot-contact {
    padding: 24px 20px;
  }
  .mascot-contact__tit {
    font-size: 17px;
  }
  .mascot-contact__who {
    margin-top: 8px;
    font-size: 15px;
  }
  .mascot-contact__note {
    font-size: 13px;
  }
  .mascot-contact img {
    width: 80px;
  }
}

/* ── 이미지 크게 보기 + 개별 다운로드 ── */
.mascot-lb {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(20, 16, 13, 0.8);
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 20px;
}
.mascot-lb.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mascot-lb__box {
  background: #fff;
  border-radius: 16px;
  width: 560px;
  max-width: 100%;
  overflow: hidden;
}
.mascot-lb__img {
  background: #f8f8f8;
  padding: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.mascot-lb__img img {
  max-width: 100%;
  max-height: 56vh;
  width: auto;
}
.mascot-lb__foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
}
.mascot-lb__name {
  font-size: 20px;
  font-weight: bold;
  color: #14100d;
}
.mascot-lb__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}
@media all and (max-width: 1024px) {
  .mascot-lb__img {
    padding: 20px;
  }
  .mascot-lb__foot {
    padding: 16px;
    gap: 10px;
  }
  .mascot-lb__name {
    font-size: 15px;
  }
  .mascot-lb__close {
    top: 8px;
    right: 8px;
  }
}