/* ---------- 공통 부분(폰트, 배경색) ---------- */
/* -- 대화 본문 폰트 추가 -- */
  @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.php ---------- */
/* -- 폰트페이지 메인 style -- */
  .font-page-container {
    text-align: center;
    padding: 40px 20px;
  }

  .font-page-title {
    font-weight: bold;
    font-size: 26px;
    margin-bottom: 30px;
    font-family: daehwa_loud_2023;
    color: #000;
  }

  .button-row {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }

  .font-button {
    width: 300px;
  }

  .font-button img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.2s;
  }

  .font-button img:hover {
    transform: scale(1.05);
  }

  .font-button p {
    margin-top: 20px;
    font-size: 20px;
    color: #333;
    font-family: daehwa_whisper_2023;
  }

  .font-usage-description {
    font-size: 14px;
    color: #666;
    margin-top: 20px;
    font-family: daehwa_regular;
  }

  .oval-label {
    display: inline-block;
    padding: 2px 10px;        
    border: 1px solid black;   
    border-radius: 999px;      
    background-color: transparent; 
    font-size: 20px;           
  }


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

  .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 {
    display: block;
    /* object-fit: cover;
    width: 100%;
    height: auto; */ 
    object-position: center;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }


  .caption {  /* 공통 텍스트 스타일 */
    font-family: daehwa_loud_2023;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: clamp(7px, 2vw, 16px);
    bottom: 10%;
    text-align: center;
  }


/* -- 반응형 위한 미디어 코드 -- */  
  @media (min-width: 601px) and (max-width: 1425px) { /* 모바일 아닐 때 slick 좌우 여백 생성 */
    #visuall {
      margin: auto;
    }    
  }

  @media (min-width: 601px) and (max-width: 1200px) { /* 모바일 아닐 때 slick 좌우 여백 생성 */
    #visuall {
      margin: 0 4%;
    }
  }

  @media (max-width: 600px) { /* 모바일일 때 slick 좌우 여백 제거, 도트 마진 변경 */
    #visuall {
      margin-left: 0px;
    }

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

    .slide img {
      width: 100%;
      height: 190px; /* 좌우 여백 잘라내기 위해 높이 고정함 */
    }
  }


/* -- 본문 공통 style -- */ 
  .label {
    width: 100%; /*20%;*/
    font-weight: regular;
    font-size: 20px;
    font-family: 'daehwa_regular';
  }

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

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

  .font-image {
    display: flex;
    justify-content: center; 
    align-items: center; 
  }

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


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

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

  .row1 .font-image img {
    width: 60%;
    height: auto;
    display: block
  }

  .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 .flex{
    display: flex;
  }

  .row2 .font-image img {
    width: 95%;
    height: auto;
    display: block
  }

  .description-no-title {
    font-size: 16px;
    line-height: 2;
    margin-left: 10px;
    font-family: 'daehwa_regular'; 
  }


/* -- row3 style -- */  
  .row3 .label {
    width: 100%; /*40%;*/
    font-weight: regular;
    font-size: 20px;
    margin-bottom: 0.5em;
    font-family: 'daehwa_regular';
  }

  .row3 .row3-box {
    width: 65%;
  }

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

  .row3-content1 .text {
    width: 50%;
    font-size: clamp(10px, 4vw, 50px); 
    padding: 0px;
    line-height: 1.6;
    border-bottom: none;
    text-align: center;
    align-items: center;
    color: #000;
    letter-spacing: 4px;
    font-weight: bold;
    font-family: daehwa_loud_2023; 
  }

  .row3-content1 .image {
    height: 50%; /*395px;*/
    width: 50%;
  }

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

  .row3-content2 {
    display: flex;
    justify-content: center;
    font-size: 40px;
    line-height: 1.6;
    margin: 15px 0;
    width: 100%;
    gap: clamp(0.6em, 2vw, 1em);
  }

  .row3-content2 .text1 {    
    width: 30%;
    font-size: clamp(14px, 2vw, 20px); /*20px;*/
    padding-right: 0px;
    line-height: 1.6;
    border-bottom: none;
    text-align: left;
    letter-spacing: 1px; 
  }

  .row3-content2 .text2 {   
    width: 70%;
    font-size: clamp(13px, 2vw, 20px); /*20px;*/
    text-align: right;
    letter-spacing: 1px;
    color: #000;
  }

  .mobile {
    display: none;  
  }


/* -- 반응형 위한 미디어 코드 -- */ 
  @media (max-width: 1094px) { 
    .row3 .row3-box {
      width: 85%;
    }
  }

  @media (max-width: 646px) { 
    .mobile {
      display: block;  
    }

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

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

  .font-test-area {
    width: 85%;
    height: 30%; /*200px;*/
    font-size: clamp(19px, 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_whisper_2023;
  }

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

  .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_talk_2023;
  }

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

  .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_loud_2023;
  }

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

  .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;
  }