@charset "UTF-8";
/* ============================================================================
   redent_web.css — 데스크톱(1024px 이상) 전용 화면 디자인
   ----------------------------------------------------------------------------
   · 1023px 이하(휴대폰·태블릿)에는 아무 영향이 없습니다. 기존 모바일 화면 그대로.
   · 예전에는 자바스크립트로 본문 폭을 33~60%로 강제했지만, 이제 이 파일의
     미디어쿼리가 담당합니다.
   · 이 파일은 다른 CSS 다음에 불러오세요.
   ========================================================================== */

@media all and (min-width: 1024px) {

  /* ---------- 공통 ---------- */
  body {
    font-size: 16px;
    line-height: 1.75;
  }

  /* 예전 JS가 강제하던 폭 제거 — 전체 폭을 쓰고 내부에서 가운데 정렬 */
  .mobile-home {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-x: hidden;
  }

  /* 본문 묶음: 화면 가운데 1160px */
  #aboutus-banner,
  #aboutus-banner1,
  #uxwriting-text,
  #brandig-text1,
  #ovic-text,
  #ovicteams,
  #history,
  #booklist:not(.swiper-wrapper),
  #newslist,
  .search_news,
  .bookinfo-home,
  .notice-contents {
    max-width: 1160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- 상단 내비게이션 ---------- */
  .web-topbar {
    height: 76px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04);
  }
  .drop-topbar {
    height: 76px !important;
    max-width: 1240px;
    width: 100%;
    padding: 0 40px;
    justify-content: flex-start;
  }
  .web-topbar .redent_logo img {
    height: 40px;
    margin-right: 0 !important;
  }
  .drop-topbar .navbar {
    margin-left: auto;
  }
  .navbar a,
  .dropdown .dropbtn {
    font-size: 16px !important;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
  }
  .dropdown .dropbtn {
    height: 76px !important;
    cursor: pointer;
  }
  .dropdowna-menu {
    height: 76px !important;
  }
  /* 예전엔 배경이 빨갛게 칠해졌지만, 글자색+밑줄로 정리 */
  .navbar a:hover,
  .dropdown:hover .dropbtn {
    background-color: transparent !important;
    color: #ca0a0a !important;
  }
  .dropdowna-menu:hover {
    color: #ca0a0a !important;
  }
  .dropdown-content {
    background-color: #fff !important;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
    min-width: 200px !important;
  }
  .dropdown-content a:hover {
    background-color: #ca0a0a !important;
    color: #fff !important;
  }

  /* ---------- 메인 히어로 ---------- */
  #mainTilteImg {
    margin-top: 76px !important;
    background: #000;
  }
  #mainTilteImg .mainImg {
    background-image: none !important;
    width: 100%;
  }
  #mainTilteImg .mainImg img {
    display: block;
    width: 100% !important;
    max-height: 620px;
    object-fit: cover;
    opacity: 0.88;
  }

  /* ---------- 메인 슬로건 배너 ---------- */
  #mainTilteBanner {
    height: auto !important;
  }
  .mainBanner {
    height: auto !important;
    padding: 56px 0 !important;
    font-size: 30px !important;
    line-height: 1.4 !important;
  }
  .mainBanner > div {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 40px;
  }
  .mainBanner hr {
    max-width: 1080px !important;
    margin: 22px auto !important;
    width: 100% !important;
  }
  .mainBanner > div:last-child span {
    font-size: 20px;
    line-height: 1.7;
  }

  /* ---------- 섹션 제목 (BOOKS / WORKS) ---------- */
  #mainTitle {
    max-width: 1160px;
    margin: 90px auto 0 !important;
    padding: 0 40px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #ca0a0a;
  }

  /* ---------- 도서 슬라이드 ---------- */
  .book-swiper-container {
    max-width: 1240px;
    margin: 24px auto 0;
    padding: 0 26px;
    height: auto !important;
  }
  .swiper-wrapper {
    height: auto !important;
    margin-left: 0 !important;
    align-items: stretch;
  }
  .card {
    width: 22% !important;
    margin: 10px 14px !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(202, 10, 10, 0.16) !important;
  }
  .card__image {
    width: 100%;
    background: #faf7f4;
  }
  .card__image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 5 / 7;
    object-fit: contain;
  }
  .card__content {
    height: 74px !important;
    font-size: 15px !important;
    padding: 0 10px;
    /* 좌우 여백을 폭 '안쪽'으로 계산합니다.
       이게 없으면 width:100% + padding 20px = 카드보다 20px 넓어져,
       카드의 overflow:hidden 에 제목 끝이 잘렸습니다. */
    box-sizing: border-box;
  }

  /* ---------- WORKS ---------- */
  #worklist {
    max-width: 1240px;
    margin: 24px auto 90px !important;
    padding: 0 40px;
    gap: 32px;
  }
  .wcard {
    width: 50% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .wcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(202, 10, 10, 0.16) !important;
  }
  .wcard__image {
    width: 100%;
    overflow: hidden;
  }
  .wcard__image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.6s ease;
  }
  .wcard:hover .wcard__image img {
    transform: scale(1.05);
  }
  .wcard__content {
    height: 78px !important;
    font-size: 18px !important;
  }

  /* ---------- 서브 페이지 상단 배너 ---------- */
  #nowmenu {
    height: 240px !important;
    margin-top: 76px !important;
    position: relative;
  }
  #nowmenu span#nowmenuspan {
    position: absolute !important;
    left: 50% !important;
    top: auto !important;
    bottom: 46px;
    width: 1160px !important;
    height: auto !important;
    margin-left: -580px;
    padding: 0 40px;
    font-size: 44px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
  }

  /* ---------- About / UX Writing / Branding 본문 ---------- */
  .page-contents {
    margin-top: 0 !important;
  }
  .aboutus-text1 {
    padding: 70px 40px 0 !important;
    font-size: 38px !important;
    line-height: 1.3 !important;
    width: 100% !important;
  }
  .aboutus-text2 {
    padding: 26px 40px 0 !important;
    font-size: 20px !important;
    line-height: 1.8 !important;
    width: 100% !important;
  }
  .aboutus-text3 {
    padding: 30px 40px 70px !important;
    font-size: 17px !important;
    line-height: 2 !important;
    width: 100% !important;
    color: #505050 !important;
  }
  #uxwriting-text {
    margin: 70px auto !important;
    padding: 0 40px;
    width: 100% !important;
  }
  .uxwriting-text2 {
    font-size: 32px !important;
    line-height: 1.4 !important;
    width: 100% !important;
    color: #0b0b0b !important;
  }
  .uxwriting-text3,
  .uxwriting-text4 {
    font-size: 17px !important;
    line-height: 2 !important;
    width: 100% !important;
  }
  #brandig-text1 {
    padding: 0 40px;
    width: 100% !important;
    font-size: 17px !important;
    line-height: 2 !important;
    text-align: center;
  }

  /* ---------- 브랜딩 로고 흐름 ---------- */
  .container {
    height: 190px !important;
    background: #faf7f4 !important;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }

  /* ---------- OViC ---------- */
  #ovic-text {
    width: 100% !important;
    margin-top: 80px !important;
    padding: 0 40px;
  }
  #ovic-text1 {
    font-size: 34px !important;
  }
  #ovic-text2 {
    font-size: 17px !important;
    line-height: 2 !important;
  }
  /* .ovic-img / #ovic-img1 은 건드리지 않습니다.
     두 그림(가운데 OViC 로고 + 둘레의 작은 원)은 원래 위아래로 놓고
     아래 그림을 67px 끌어올려 하나로 겹쳐 보이게 만든 그림입니다.
     여기서 flex 로 바꿔 좌우로 벌려 놓았더니 따로 떨어져 보였습니다.
     원래 규칙(redent_mobile_ovic.css)이 그대로 동작하게 둡니다. */
  #ovicteams {
    margin: 60px auto 90px !important;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .ovic-teaminfo {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 22px;
    align-items: flex-start !important;
  }
  .ovicteam_name {
    margin-top: 0 !important;
    font-size: 19px !important;
  }
  .ovicteam_text {
    margin-bottom: 0 !important;
    font-size: 15px !important;
  }

  /* ---------- 연혁 ---------- */
  #history {
    padding: 0 40px;
  }
  .years {
    margin: 0 0 10px 0 !important;
  }
  .year-div {
    margin-left: 0 !important;
    cursor: pointer;
  }
  .histroyimg > img,
  .histroyimg > picture > img {
    width: 60% !important;
    max-width: 420px;
    border-radius: 6px;
  }

  /* ---------- 출판 목록 ---------- */
  #booklist:not(.swiper-wrapper) {
    padding: 40px 26px 90px !important;
  }
  .card_books {
    display: flex;
    justify-content: flex-start;
  }
  .card_book_text {
    height: 74px !important;
    font-size: 15px !important;
  }

  /* ---------- 뉴스 ---------- */
  .search_news {
    width: 100% !important;
    padding: 60px 40px 0 !important;
    text-align: left !important;
  }
  #search_text {
    width: 420px !important;
    height: 44px !important;
    padding-left: 16px !important;
  }
  #search_btn {
    right: auto !important;
    left: 420px;
    margin-left: -46px;
    top: 78px !important;
  }
  .news-info {
    padding: 18px 40px !important;
    transition: background-color 0.2s ease;
  }
  .news-info:hover {
    background-color: #faf7f4;
  }
  .news-info-title {
    font-size: 18px !important;
  }
  .news-info-date {
    font-size: 14px !important;
    color: #9a9a9a;
  }

  /* ---------- 도서 · 뉴스 상세 ---------- */
  .bookinfo-home {
    margin-top: 100px !important;
    padding: 0 40px 90px !important;
  }
  .book_imgs {
    width: 100% !important;
    max-width: 640px;
  }
  .book_title_info {
    font-size: 32px !important;
    line-height: 1.3;
  }
  .store_img {
    width: 74px;
    height: auto;
    transition: transform 0.2s ease;
    cursor: pointer;
  }
  .store_img:hover {
    transform: translateY(-2px);
  }

  /* ---------- 푸터 ---------- */
  #aboutus-banner2 {
    height: auto !important;
    padding: 56px 0 32px !important;
  }
  #aboutus-banner2 > * {
    max-width: 1160px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px;
    padding-right: 40px;
  }
  #aboutus-banner2 hr {
    width: 100% !important;
    max-width: 1080px;
  }
  .aboutus-text5 {
    margin-left: 0 !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
  }
  .footerlog-icons,
  .snslink-icons,
  .c_icons {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .sns_back {
    margin-left: 0 !important;
    margin-right: 10px;
    transition: background-color 0.2s ease;
  }
  .sns_back:hover {
    background: rgba(255, 255, 255, 0.32) !important;
  }
  .aboutus-text4 {
    margin-left: 0 !important;
  }
}

/* 큰 화면에서 내용이 너무 벌어지지 않도록 */
@media all and (min-width: 1600px) {
  #mainTilteImg .mainImg img {
    max-height: 680px;
  }
}

/* 애니메이션을 줄이도록 설정한 사용자 존중 */
@media (prefers-reduced-motion: reduce) {
  .card,
  .wcard,
  .wcard__image img,
  .store_img {
    transition: none !important;
  }
}

/* ============================================================================
   폭 통일 — 모든 섹션을 메인 화면 BOOKS 영역과 같은 폭으로 맞춥니다.
   ----------------------------------------------------------------------------
   기준: 바깥 폭 1240px, 내용은 좌우 40px 안쪽에서 시작.
   도서 슬라이드는 카드 자체에 14px 여백이 있어 26px + 14px = 40px 로 맞춥니다.
   (이 블록은 파일 마지막에 있어 위쪽 설정을 덮어씁니다)
   ========================================================================== */
@media all and (min-width: 1024px) {

  /* 폭 계산을 padding 포함 방식으로 통일 — 안 그러면 블록마다 실제 폭이 달라집니다 */
  #mainTilteImg,
  #mainTilteBanner,
  .mainBanner,
  #mainTitle,
  .book-swiper-container,
  #worklist,
  #nowmenu,
  .container,
  #aboutus-banner2,
  #aboutus-banner,
  #aboutus-banner1,
  #uxwriting-text,
  #brandig-text1,
  #ovic-text,
  #ovicteams,
  #history,
  #booklist:not(.swiper-wrapper),
  #newslist,
  .search_news,
  .bookinfo-home,
  .ovic-img {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 내용 시작선을 좌우 40px 로 통일 */
  #mainTitle,
  #worklist,
  #aboutus-banner,
  #aboutus-banner1,
  #uxwriting-text,
  #brandig-text1,
  #ovic-text,
  #ovicteams,
  #history,
  #newslist,
  .search_news,
  .bookinfo-home {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* 도서 슬라이드: 카드 바깥 여백(14px)을 감안해 26px → 실제 시작선 40px */
  .book-swiper-container {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }
  /* 출판 목록도 같은 기준 */
  #booklist:not(.swiper-wrapper) {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  /* 히어로 이미지 · 슬로건 배너 · 서브배너 · 푸터는 1240px 폭을 꽉 채웁니다 */
  #mainTilteImg,
  #mainTilteBanner,
  .mainBanner,
  #nowmenu,
  .container,
  #aboutus-banner2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 배너·푸터 안의 글자는 다른 섹션과 같은 40px 선에서 시작 */
  .mainBanner > div {
    max-width: none !important;
    padding: 0 40px !important;
  }
  .mainBanner hr {
    max-width: none !important;
    width: calc(100% - 80px) !important;
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  #nowmenu span#nowmenuspan {
    left: 40px !important;
    margin-left: 0 !important;
    width: auto !important;
    padding: 0 !important;
  }
  #aboutus-banner2 > * {
    max-width: none !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  #aboutus-banner2 hr {
    max-width: none !important;
    width: calc(100% - 80px) !important;
  }

  /* 히어로 이미지가 박스를 꽉 채우도록 */
  #mainTilteImg .mainImg img {
    width: 100% !important;
    display: block;
  }
}

/* ============================================================================
   출판 목록 — 화면 너비에 맞춰 한 줄에 들어가는 책 수가 자동으로 늘고 줄도록
   ----------------------------------------------------------------------------
   기존 자바스크립트는 "한 줄에 3권"씩 <div class='card_books'> 묶음을 만듭니다.
   그 묶음을 display:contents 로 투명하게 만들어, 안의 카드들이 곧바로
   그리드에 배치되게 했습니다. → JS 수정 없이 너비에 맞춰 유동적으로 흐릅니다.
   ========================================================================== */
@media all and (min-width: 768px) {

  #booklist:not(.swiper-wrapper) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 28px 24px;
    align-items: start;
  }

  /* 줄 묶음을 없는 것처럼 만들어 카드가 직접 그리드에 놓이게 함 */
  #booklist:not(.swiper-wrapper) .card_books {
    display: contents !important;
  }

  /* 카드 폭은 그리드가 정하므로 고정 폭 해제 */
  #booklist:not(.swiper-wrapper) .card {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    height: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
    background: #fff;
  }

  /* 표지 비율을 일정하게 — 자바스크립트가 넣는 인라인 높이보다 우선 */
  #booklist:not(.swiper-wrapper) .card__image {
    width: 100%;
    background: #faf7f4;
  }
  #booklist:not(.swiper-wrapper) .card__image img,
  #booklist:not(.swiper-wrapper) img.bookimg {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--rd-cover-ratio);
    object-fit: contain;
  }

  #booklist:not(.swiper-wrapper) .card_book_text {
    height: 68px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    text-align: center;
    justify-content: center;
  }
}

/* display:contents 를 지원하지 않는 아주 오래된 브라우저 대비 —
   그리드가 적용되지 않아도 줄바꿈으로 자연스럽게 보이도록 */
@supports not (display: contents) {
  @media all and (min-width: 768px) {
    #booklist:not(.swiper-wrapper) {
      display: block !important;
    }
    #booklist:not(.swiper-wrapper) .card_books {
      display: flex !important;
      flex-wrap: wrap;
      gap: 24px;
      justify-content: flex-start;
    }
  }
}

/* ============================================================================
   OViC — 원형 이미지는 원래 규칙 그대로 둡니다
   ----------------------------------------------------------------------------
   예전에는 이 자리에서 데스크톱용으로
     · 두 그림을 flex 로 좌우에 벌려 놓고
     · 아래 그림을 끌어올리던 top:-67px 을 해제하고
     · 팀 목록이 나와도 사라지지 않도록 opacity 를 고정
   했습니다. 그런데 그때는 그림이 아예 안 뜨는 상태(lazy 로딩 문제)라
   이 규칙들이 화면을 어떻게 바꾸는지 아무도 볼 수 없었습니다.
   그림이 정상적으로 뜨고 보니, 하나로 겹쳐 보여야 할 로고와 둘레의 작은 원이
   좌우로 떨어져 보였습니다. 그래서 이 덮어쓰기를 모두 걷어내고
   원래 규칙(redent_mobile_ovic.css)이 그대로 동작하게 되돌렸습니다.
   팀 목록이 보일 때 원이 사라지는 것은 원래 의도된 동작입니다.
   ========================================================================== */
@media all and (min-width: 1024px) {
  /* 팀 목록은 원래대로 부드럽게 나타나되, 위로 겹치지 않도록 */
  #ovicteams {
    margin-top: 40px !important;
  }
}

/* ============================================================================
   출판 목록 표지 — 모든 화면 공통
   ----------------------------------------------------------------------------
   기존 자바스크립트는 "4번째 이미지의 높이를 0.5초 뒤에 재서 모든 표지에 적용"
   하는 방식이라, 그 0.5초 동안 목록이 들쭉날쭉하고 늦게 자리를 잡았습니다.
   비율을 CSS로 고정해 처음부터 자리를 잡도록 합니다.

   표지 자리의 가로:세로 비율(--rd-cover-ratio)은 '가장 통통한 표지'에
   맞춰 둡니다. 예전에는 5:7(0.714)이었는데, '실은 함께하고 싶어'·'뻐끔뻐끔'
   같은 표지는 원래 0.781 이라 위아래에 빈 띠가 생겨 그 책만 표지가 짧고
   바닥선이 위로 떠 보였습니다. 이제 그런 표지가 자리를 꽉 채우고,
   좁은 표지는 좌우에 아주 조금 여백이 생깁니다 — 표지 높이는 모두 같습니다.
   ========================================================================== */
:root {
  --rd-cover-ratio: 0.783;
}
#booklist:not(.swiper-wrapper) .card__image img,
#booklist:not(.swiper-wrapper) img.bookimg {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--rd-cover-ratio);
  object-fit: contain;
  background: #faf7f4;
}

/* ============================================================================
   도서 표지 모서리 통일 — 웹·모바일 공통
   ----------------------------------------------------------------------------
   카드에는 둥근 모서리가 있는데 안의 이미지는 직각이라 위쪽 모서리가 각져
   보였습니다. 이미지도 같은 곡률로 맞춥니다.
   ========================================================================== */
#booklist:not(.swiper-wrapper) .card,
.book-swiper-container .card,
#worklist .wcard {
  border-radius: 12px !important;
  overflow: hidden !important;   /* 안쪽 이미지가 모서리를 넘지 않도록 */
}

#booklist:not(.swiper-wrapper) .card__image,
.book-swiper-container .card__image,
#worklist .wcard__image {
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
}

#booklist:not(.swiper-wrapper) .card__image img,
#booklist:not(.swiper-wrapper) img.bookimg,
.book-swiper-container .card__image img,
#worklist .wcard__image img {
  border-radius: 12px 12px 0 0 !important;
  display: block;
}

/* 도서 상세 화면의 표지·상세 이미지도 같은 느낌으로 */
.book_img img,
.book_imgs {
  border-radius: 12px !important;
}

/* ============================================================================
   메인 화면 BOOKS — 한 줄 슬라이드 유지 (좌우로 밀어서 보기)
   ----------------------------------------------------------------------------
   홈의 슬라이드와 출판 목록이 같은 id(booklist)를 쓰는 탓에 출판용 격자 규칙이
   홈에도 걸려 여러 줄로 펼쳐졌습니다. 홈은 한 줄 슬라이드로 고정합니다.
   ========================================================================== */
.book-swiper-container .swiper-wrapper#booklist,
.book-swiper-container .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
}
.book-swiper-container .swiper-slide {
  flex-shrink: 0 !important;
}

@media all and (min-width: 1024px) {
  /* 넓은 화면에서는 한 줄에 4권 정도 보이고, 나머지는 밀어서 확인 */
  .book-swiper-container .card {
    width: 22% !important;
    margin: 10px 14px !important;
  }
}

/* ============================================================================
   카드 제목 칸 — 좌우 여백 때문에 카드 밖으로 삐져나가지 않게
   ----------------------------------------------------------------------------
   메인 화면 BOOKS 카드에서 '밀밭에서 어린 왕자를 만난 여우는' 처럼 긴 제목이
   오른쪽 끝에서 잘려 보였습니다.
     · 제목 칸은 width:100% (style.css)
     · 여기에 좌우 여백 10px 씩이 더해져 실제 폭이 카드보다 20px 넓어짐
     · 카드에는 overflow:hidden 이 있어 넘친 부분이 그대로 잘림
   여백을 폭 안쪽으로 계산하게 해서, 긴 제목은 잘리지 않고 두 줄로 넘어갑니다.
   (한글은 word-break:keep-all 이라 낱말 중간에서 끊기지 않습니다)
   ========================================================================== */
.card__content,
.wcard__content {
  box-sizing: border-box;
}

/* ============================================================================
   News 검색칸 — 돋보기 아이콘을 입력칸 오른쪽 끝에 붙입니다
   ----------------------------------------------------------------------------
   예전에는 아이콘을 감싼 칸(.search_news) 기준으로
     right: 6%  (모바일)
     right: 14% (태블릿)
     right: 22% (데스크톱)
     left: 420px; top: 78px (웹 전용 보정)
   처럼 화면 폭마다 다른 값으로 밀어 놓았습니다. 입력칸의 실제 오른쪽 끝과는
   무관한 값이라, 폭이 조금만 달라져도 아이콘이 엉뚱한 자리에 놓였습니다.

   이제 입력칸과 아이콘을 한 줄(flex)에 두고 아이콘을 입력칸 안쪽 끝으로
   당겨 붙입니다. 입력칸이 몇 px 이든 항상 오른쪽 끝에서 같은 간격입니다.
   ========================================================================== */
.search_news {
  display: flex !important;
  align-items: center;
  justify-content: center;     /* 휴대폰·태블릿: 가운데 */
  position: relative;
}

/* 아이콘이 입력 글자를 가리지 않도록 오른쪽 여백을 비워 둡니다.
   margin 은 0 으로 되돌립니다 — 기존 규칙의 margin:auto 가 flex 안에서는
   '남는 공간을 전부 차지' 하는 뜻이 되어, 입력칸을 가운데로 밀고 아이콘을
   오른쪽 끝까지 떼어 놓았습니다. 가운데 정렬은 아래 justify-content 가 합니다. */
#search_text {
  padding-right: 42px !important;
  margin: 0 !important;
}

/* 예전 절대 좌표(right/left/top)를 모두 해제하고, 입력칸 끝으로 당깁니다 */
#search_btn {
  position: static !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  margin-left: -36px !important;   /* 아이콘(29px)이 오른쪽 끝에서 7px 안쪽 */
  flex: 0 0 auto;
  cursor: pointer;
}

/* 데스크톱은 검색칸이 왼쪽 정렬입니다 */
@media all and (min-width: 1024px) {
  .search_news {
    justify-content: flex-start !important;
  }
}