/* ---------- 공통 부분(폰트, 배경색) ---------- */
/* -- 대화 본문 폰트 추가 -- */
  @font-face{
    font-family: 'daehwa_bold';
    src:url('../../font/DAEHWA_NANUM_BONMUN_BOLD.ttf') format("truetype");
  }

  @font-face{
    font-family: 'daehwa_light';
    src:url('../../font/DAEHWA_NANUM_BONMUN_LIGHT.ttf') format("truetype");
  }

  @font-face{
    font-family: 'daehwa_regular';
    src:url('../../font/DAEHWA_NANUM_BONMUN_REGULAR.ttf') format("truetype");
  }

/* -- 배경색 변경 -- */
  .visual {  /* 폰트 소개 페이지일 때만 배경 이미지(bg2450x3000)가 아닌 흰 배경으로*/
    background: none !important;
    background-color: #ffffff !important;
    color: #000;
  }

/* -- 앱으로 열었을 때 헤더 부분이 우선순위 제일 높게 설정 -- */
  .w3-top, .w3-bottom {
    z-index: 5 !important;
  }


/* ---------- DH_font_bonmun.php ---------- */
/* 여기서부터 삭제 후 최신 style 코드 가져올 것 */
/* -- 이미지 slick 부분 style -- */
   #visuall {
    position: relative;
    max-width: 1000px;
    margin-left: 200px;

    /* position: relative;
    max-width: 2000px; */
  }

  .slick-dots {   /* 도트 버튼 style */
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  .slick-dots li button:before {
    color: white;
    opacity: 0.75;
    font-size: 12px;
  }

  :root {
    --dot-color: #f4a261; 
  }

  .slick-dots li button {  /* 기본 도트 버튼 */
    width: clamp(5px, 2vw, 9px);
    height: clamp(5px, 2vw, 9px);
    border: none;
    background: var(--dot-color);
    border-radius: 50%;
    padding: 0;
    font-size: 0;
  }

  .slick-dots li button:before {  /* slick 기본 before 도트 숨기기 */
    display: none;
  }


  .slick-dots li.slick-active button {  /* 선택된 도트 */
    background: transparent;
    border: 2px solid var(--dot-color);
  }

  .slick-prev,
  .slick-next {  /* arrows custom */
    display: block !important;
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    z-index: 2;
    color: #FF8200;
    background: none;
    border: none;
    font-size: 0px;
    cursor: pointer;
    line-height: 1;
  }

  .slick-prev::before,
  .slick-next::before {
    content: '<';
    text-indent: 0;
    display: block;
    font-size: clamp(22px, 3vw, 45px);
    font-weight: 70;
    color: orange;
    transform: scaleY(2.3); /* 세로 방향으로 2.3배 확대 */
    transition: transform 0.2s, font-weight 0.2s;
  }

  .slick-prev {
     left: 3.5%; 
  }

  .slick-next {
     right: 3.5%; 
  }

  .slick-next::before {
    content: '>';
  }

  .slick-prev:hover::before,
  .slick-next:hover::before {  /* 호버 시 얇게 (굵기 변화만) */
    font-weight: 40;
  }

  .slide {  /* 이미지 내 텍스트 style */
    position: relative;
  }

  .slide img {
    /* width: 100%; */
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .caption {  /* 공통 텍스트 스타일 */
    font-family: daehwa_light;
    position: absolute;
    color: black;
  }

  .caption .small {  /* 첫 줄: 작은 글씨 */
    font-size: clamp(14px, 2vw, 22px); /*22px;*/
    font-weight: normal;
    line-height: 1.2;
  }

  .caption .big {  /* 두 번째 줄: 크고 굵게 */
    font-size: clamp(22px, 2vw, 40px); /*40px;*/ 
    font-weight: bold;
  }

  .caption-1 {  /* 첫 번째 텍스트: 우측 상단 */
    /*top: 60px;
    right: 120px;*/
    top: 8%;
    right: 8%;
  }

  .caption-2 {  /* 두 번째 텍스트: 좌측 하단 */
    /*bottom: 60px;
    left: 120px;*/
    bottom: 12%;
    left: 10%;
  }


/* -- row1 style -- */  
  .row1 {
    margin-top: 2em;
    width: 100%;
  }

  .row1 .label {
    width: 100%;
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 0.5em;
  }

  .row1 .description {
    font-size: 16px;
    line-height: 1.6;
    margin-left: 1.5em; /* 들여쓰기 */
    margin-bottom: 1em;
    font-family: daehwa_regular;
  }

  .row1 .buttons {
    display: flex;
    justify-content: center;
    gap: clamp(1em, 4vw, 5em); /*5em;*/
    padding: 0 5% 0 5%;
  }

  .row1 .buttons img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .row1 .buttons .hover:hover {
    transform: scale(0.95);
    transition: transform 0.3s ease;
  }

  .no-hover:hover {
    transform: none;
  }


/* -- row2 style -- */
  .row2 {
    display: flex;
    align-items: center; 
    margin-bottom: 8em;
  }

  .content {
    width: 80%;
    line-height: 1.6;
    display: flex;
    flex-direction: column; /* 이미지들을 세로 정렬 */
    font-size: clamp(25px, 4vw, 40px); /*40px;*/
    font-family: daehwa_regular;
  }

  .row2 .row-content-mobile {
    display: none;
  }

  .label {
    width: 20%;
    font-weight: normal;
    font-size: 20px;
  }

  .image-caption {
    margin: 0;
    padding: 0;
    font-size: 14px;
    margin-bottom: 4px; /* 이미지와 너무 붙지 않게 살짝 띄움 */
  }

  .content img {
    display: block;
    width: 50%;
    height: auto;
  }

  @media (max-width: 366px) {
    .row2 .row-content-mobile {
      display: block;
    }

    .row2 .row-content-pc {
      display: none;
    }
  }

/* -- row3 style -- */  
  .row3 {
    display: flex;
    align-items: flex-start; /* 위쪽 정렬 */
    margin-bottom: 8em;
  }

  .row3-mobile-label {
    display: none;  
  }
  
  .row3 .content img {
    width: 75%; 
  }


/* -- 반응형 위한 미디어 코드 -- */ 
  @media (min-width: 601px) and (max-width: 1425px) {
    #visuall {
      margin: auto;
    }    
  }

  @media (min-width: 601px) and (max-width: 1200px) {
    #visuall {
      margin: 0 4%;
    }
  }
  @media (max-width: 600px) {
    #visuall {
      margin-left: 0px;
    }

    .slick-dots li {
      margin: 0 1px;
    }

    .label {
      width: 80%;
    }

    .content {
      width: 100%;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .image-caption {
      font-size: clamp(10px, 4vw, 14px); /*14px;*/
      margin-bottom: 2px; 
    }

    .content img {
      width: 75%;
    }

    .row2 {
      flex-direction: column;
      align-items: flex-start; /* 위쪽 정렬 */
    }

    .row2 .label {
      padding: 0 0 20px 0;
    }

    .row3 {
      flex-direction: column;
      align-items: flex-start; 
      margin-bottom: 8em;
    }

    .row3 .label {
      padding: 0 0 20px 0;
    }

    .row3 .content img {
      width: 85%; 
    }

    .row3-pc-label {
      display: none;
    }

    .row3-mobile-label {
      display: block;
    }
  }


/* -- row4 style -- */  
  .row4 .label {
    width: 100%;
    font-weight: normal;
    font-size: 20px;
  }

  .row4-content1 {
    display: flex;
    gap: clamp(0.5em, 4vw, 1em); /*1em;*/
    font-size: 40px;
    line-height: 1.6;
    width: 90%;
    font-family: daehwa_regular;
  }

  .row4-content1 .text {
    width: 35%;
    font-size: 14px;
    padding-right: 0px;
    line-height: 1.6;
    border-bottom: none;
  }

  .row4-content1 .image {
    height: 60%; /*330px;*/
    width: 65%;
  }

  .row4-content1 .image img {
    width: 100%;
    height: auto;
    display: block
  }

  .row4-content2 {
    display: flex;
    gap: 1em;
    font-size: 40px;
    line-height: 1.6;
    width: 90%;
    margin: 30px 0;
  }

  .text1-text2 {
    width: 85%;
  }
  
  .row4-content2 .text1 {
    width: 30%;
    font-size: clamp(10px, 2vw, 20px);
    padding-right: 0px;
    line-height: 1.6;
    border-bottom: none;
    text-align: right;
    letter-spacing: 4px; 
  }

  .row4-content2 .text2 {
    width: 70%;
    font-size: clamp(10px, 3vw, 20px);
    text-align: left;
    letter-spacing: 4px;
    color: #000;
  }


/* -- 반응형 위한 미디어 코드 -- */  
  @media (max-width: 600px) {
    .row4-content1 {
      flex-direction: column;
      width: 100%;
      justify-content: center;
      align-items: center;
      align-self: center;
    }

    .row4-content1 .text {
      width: 70%;
      text-align: center;
      padding: 20px 0 0 0;
    }

    .row4-content2 {
      gap: 0.4em;
      width: 100%;
    }
    
    .text1-text2 {
      width: 95%;
    }

    .row4-content2 .text1 {
      width: 35%;
    }

    .row4-content2 .text2 {
      width: 65%;
    }
  }


/* -- font typing(textarea) 부분 style -- */
  .font-test-container {
    text-align: center;
    margin-top: 40px;
    width: 95%;
  }

  .test-title {
    font-size: clamp(25px, 4vw, 37px); /*37px;*/
    font-weight: regular;
    margin-bottom: 20px;
  }

  .font-test-area {
    width: 85%;
    height: 30%; /*200px;*/
    font-size: clamp(21px, 4vw, 30px); /*30px;*/
    text-align: center;
    padding: 1em;
    border-radius: 12px;
    border: 2px solid transparent;
    resize: none;
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto; /* 화면 가운데 정렬 */
    box-sizing: border-box;
  }

  .orange-title {
    color: #FF8200;
    font-family: daehwa_light;
  }

  .orange-area {
    background-color: #fff0db;
    color: #FF8200;
    font-family: daehwa_light;
  }

  .orange-area::placeholder {
    color: #ffb366; 
  }

  .orange-area:hover,
  .orange-area:focus {
    background-color: #fff7ee;
    border-color: #FF8200;
    outline: none;
  }

  .green-title {
    color: #38ff3c;
    font-family: daehwa_regular;
  }

  .green-area {
    background-color: #e9fbea;
    color: #2ecc71;
    font-family: daehwa_regular;
  }

  .green-area::placeholder {
    color: #a3d9a5; 
  }

  .green-area:hover,
  .green-area:focus {
    background-color: #f3fef4;
    border-color: #38ff3c;
    outline: none;
  }

  .blue-title {
    color: #389bff;
    font-family: daehwa_bold;
  }

  .blue-area {
    background-color: #e1f0ff;
    color: #389bff;
    font-family: daehwa_bold;
  }

  .blue-area::placeholder {
    color: #99cfff;
  }

  .blue-area:hover,
  .blue-area:focus {
    background-color: #f0f8ff;
    border-color: #389bff;
    outline: none;
  }

  .notice-banner {
    background-color: #000;
    color: #fff;
    text-align: center;
    font-weight: 600; 
    font-size: 1.2rem; 
    padding: 1em;
  }

  /* -- 반응형 위한 미디어 코드 -- */  
  @media (max-width: 600px) {
    .font-test-container {
      width: 100%;
    }
  }