/* Dropped 2 blocks aimed at (1025-1159) and (1025-1299): they tuned the mockup
   for a small desktop, but under M1 desktop is legacy at every width >=1025,
   and with them in place G3 was red at 1025 (container 1160, legacy 1200). */
/* This sheet restyles the legacy home markup for narrow screens. 672 of its
   declarations sat outside every @media and so replaced the desktop page too;
   each segment is now wrapped IN PLACE, which keeps cascade order below. */

@media (max-width: 1023px) {
  /* 메인 -- default.asp
     CSS ONLY ON THE LEGACY MARKUP: both lanes serve the same .content_wrap, and this
     sheet, linked for this page alone, is the whole difference between them. */

  /* Four <style> blocks of the legacy fragments sit INSIDE <body> and so cascade after
     this file; every selector here therefore carries .content_wrap, which outranks them
     on specificity and makes source order irrelevant. */
  .content_wrap {
    --c-primary: #159fda;
    --c-primary-dark: #1f73d6;
    --c-navy: #1b2a4a;
    --c-point: #fb5a5a;
    --c-ink: #222428;
    --c-text: #3a3d44;
    --c-sub: #6b7079;
    --c-mute: #9aa0a8;
    --c-line: #e6e8ec;
    --c-bg-soft: #f6f7f9;
    --c-bg-soft-2: #f1f3f6;
    --container: 1260px;
    --shadow-sm: 0 1px 3px rgba(20,30,50,.06);

    font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
                 "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 14px; line-height: 1.5; letter-spacing: -.01em; color: #3a3d44;
    background: #fff;
  }

  .content_wrap,
  .content_wrap *,
  .content_wrap *::before,
  .content_wrap *::after { box-sizing: border-box; }
  .content_wrap a { color: inherit; }
  .content_wrap ul,
  .content_wrap li { padding: 0; }

  /* ---------------------------------------------------------------- 메인 빅배너 */
  /* Swiper is configured slidesPerView:2 spaceBetween:20 and reads the CONTAINER width
     once, at init: 1200px here is what makes its slides the mockup's 590px. Widen the
     container and every card grows with it. */
  .content_wrap .main_topban { display: block; width: 100%; background: transparent; overflow: hidden; }
  .content_wrap .main_ban.big_newban,
  .content_wrap .big_newban .container { overflow: hidden; }
  .content_wrap .big_newban .swiper-container {
    width: 1200px; margin: 0 0 0 24px; overflow: visible;
  }
  .content_wrap .big_newban .swiper-wrapper { padding: 24px 0 8px; }
  .content_wrap .big_newban .swiper-slide { height: 230px; min-height: 230px; overflow: hidden; border-radius: 14px; background-position: right top; background-repeat: no-repeat; background-size: auto 125%; }
  .content_wrap .big_newban .tit_wrap {
    position: absolute; left: 50px; top: 23%; width: 360px; z-index: 2;
  }
  .content_wrap .big_newban .tit_box h2 {
    font-size: 38px; font-weight: 800; line-height: 45px; letter-spacing: -.02em; color: #000;
  }
  .content_wrap .big_newban .tit_box h3 { margin-top: 20px; font-size: 14px; color: #333; }

  /* The four controls are one row under the track. The legacy pause/play keep their
     .ir_pm text -- the glyph is drawn by ::before, which carries its own font-size and
     so survives the font-size:0 that hides the words. */
  .content_wrap .big_newban .swiper-pagination { display: none; }
  .content_wrap .big_newban .play_small { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 0 20px; background: #f5f6f8; width: 100vw; margin-left: -24px; }
  .content_wrap .big_newban .play_small > .swiper-button-prev_top { order: 1; }
  .content_wrap .big_newban .play_small > .swiper-button-next_top {
    order: 2; margin-left: 132px;
  }
  .content_wrap .big_newban .play_small > .swiper-pause_top,
  .content_wrap .big_newban .play_small > .swiper-play_top { order: 3; }
  .content_wrap .big_newban .play_small > div { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ccc; background: #fff; color: #666; align-items: center; justify-content: center; text-indent: 0; line-height: normal; letter-spacing: normal; overflow: visible; }
  .content_wrap .big_newban .play_small > .swiper-button-prev_top,
  .content_wrap .big_newban .play_small > .swiper-button-next_top { display: flex; }
  .content_wrap .big_newban .swiper-button-prev_top::before { content: "\2039"; font-size: 16px; }
  .content_wrap .big_newban .swiper-button-next_top::before { content: "\203A"; font-size: 16px; }
  .content_wrap .big_newban .swiper-pause_top::before { content: "\275A\275A"; font-size: 11px; }
  .content_wrap .big_newban .swiper-play_top::before { content: "\25B6"; font-size: 11px; }
  .content_wrap .big_newban .play_small > .swiper-play_top { display: none; }
  .content_wrap .big_newban .play_small > .swiper-play_top.active { display: flex; }
  .content_wrap .big_newban .play_small > .swiper-pause_top { display: none; }
  .content_wrap .big_newban .play_small > .swiper-pause_top.active { display: flex; }

  /* ------------------------------------------------------------------ 가이드 9종 */
  html body .content_wrap .line_banner.main_top_content_wrap { width: 100%; padding: 22px 0; overflow: visible; }
  html body .content_wrap .line_banner > article.main_hot { width: 100%; padding: 0; }
  html body .content_wrap .line_banner .line_ban_swiper { max-width: var(--container); margin: 0 auto; }
  html body .content_wrap .line_banner .line_ban_swiper > ul { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; justify-content: stretch; }
  html body .content_wrap .line_banner .line_ban_swiper > ul > li {
    display: block; width: auto; margin: 0; text-align: start;
  }
  html body .content_wrap .line_banner .line_ban_swiper > ul > li > a { gap: 10px; padding: 14px 8px; }
  html body .content_wrap .line_banner .main_hot .img_wrap { width: 54px; height: 54px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  html body .content_wrap .line_banner .main_hot .img_wrap img { width: 30px; object-fit: contain; }
  html body .content_wrap .line_banner .swiper-notification { display: none; }

  /* --------------------------------------------------------------- WHAT'S NEW */
  html body .content_wrap .new_main { padding: 36px 0 30px; background: #f0f2f8; border-bottom: 1px solid var(--c-line); overflow: visible; }
  html body .content_wrap .new_main .brand_new.line-section { max-width: var(--container); margin: 0 auto; padding: 0 !important; background: none; }
  html body .content_wrap .new_main .main_tit {
    width: 100%; margin: 0 0 20px; padding: 0; text-align: start;
  }
  html body .content_wrap .new_main .main_tit h3 {
    font-family: inherit; font-size: 20px; font-weight: 900; line-height: 1.5;
    letter-spacing: .04em; color: var(--c-ink); white-space: nowrap;
  }
  html body .content_wrap .new_main .brand_new_swiper { width: 100%; overflow-x: clip; overflow-y: visible; }
  /* Pitch is card + margin-right, never flex gap: Swiper 4.5 sizes slides with
     outerWidth(true), which counts margins and cannot see a gap, so a gap would
     drift the loop by its own width every slide. */
  html body .content_wrap .new_main .new_list.swiper-wrapper { gap: 0; padding: 0 0 8px; }
  html body .content_wrap .new_main .new_list > li { flex: 0 0 120px; width: 120px; margin: 0 25px 0 0; display: flex; flex-direction: column; align-items: center; }
  html body .content_wrap .new_main .new_list > li > a {
    display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%;
  }
  html body .content_wrap .new_main .new_list li div.cover { display: contents; height: auto; margin: 0; padding: 0; border-radius: 0; }
  html body .content_wrap .new_main .new_list li div.cover img {
    position: static; top: auto; width: 120px; height: 120px; object-fit: cover;
    border: 1px solid var(--c-line); border-radius: 12px; background: #fff;
  }
  html body .content_wrap .new_main .new_list li div.info { position: static; top: auto; }
  html body .content_wrap .new_main .new_list li div.info h4 { height: auto; padding: 0; font-size: 13.5px; font-weight: 700; color: var(--c-text); white-space: nowrap; }
  html body .content_wrap .new_main .new_list li:hover div.info h4 { color: var(--c-primary); }

  /* The control cluster is one row on the title line; the legacy sheet pins each button
     to its own left/top, so every offset here has to be re-stated rather than nudged. */
  html body .content_wrap .new_main .brand_new .top_play { top: -52px; bottom: auto; right: 0; left: auto; width: auto; height: auto; display: flex; align-items: center; gap: 6px; }
}

@media (max-width: 1023px) {
  html body .content_wrap .new_main .brand_new .top_play::before { display: none; }
  html body .content_wrap .new_main .brand_new .top_play > div {
    position: static; width: 32px; height: 32px; margin: 0 !important;
    border-radius: 50%; border: 1px solid #ccc; background: #fff; color: #666;
    align-items: center; justify-content: center;
    text-indent: 0; line-height: normal; letter-spacing: normal;
    overflow: visible; opacity: 1;
  }
  html body .content_wrap .new_main .top_play > .swiper-button-prev,
  html body .content_wrap .new_main .top_play > .swiper-button-next { display: flex; }
  html body .content_wrap .new_main .top_play .swiper-button-prev::before { content: "\2039"; font-size: 16px; }
  html body .content_wrap .new_main .top_play .swiper-button-next::before { content: "\203A"; font-size: 16px; }
  html body .content_wrap .new_main .top_play .swiper-pause::before { content: "\275A\275A"; font-size: 11px; }
  html body .content_wrap .new_main .top_play .swiper-play::before { content: "\25B6"; font-size: 11px; }
  html body .content_wrap .new_main .top_play > .swiper-pause { order: 2; }
  html body .content_wrap .new_main .top_play > .swiper-pause.active { display: flex; }
  html body .content_wrap .new_main .top_play > .swiper-play { order: 2; }
  html body .content_wrap .new_main .top_play > .swiper-play.active { display: flex; }
  html body .content_wrap .new_main .top_play > .swiper-button-prev { order: 1; }
  html body .content_wrap .new_main .top_play > .swiper-button-next { order: 3; }
  html body .content_wrap .new_main .top_play > div:hover { border-color: var(--c-primary); color: var(--c-primary); }
  html body .content_wrap .new_main .swiper-notification { display: none; }

  /* --------------------------------------------------- BEST SELLER / OUR PICKS */
  .content_wrap .bestseller_wrap { padding: 40px 0; background: #fff; }
  .content_wrap .bestseller_wrap .dual { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
  .content_wrap .bestseller_wrap .panel { min-width: 0; }
  .content_wrap .bestseller_wrap .panel__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--c-ink);
  }
  .content_wrap .bestseller_wrap .panel__title {
    font-size: 17px; font-weight: 900; letter-spacing: .06em;
    color: var(--c-ink);
  }
  /* The arrow cluster used to be restyled here; it is hidden below 1024 now, and this
     sheet reaches no other width, so the rules that dressed it went with it. */
  .content_wrap .bestseller_wrap .grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  }
  .content_wrap .bestseller_wrap .grid > .item { min-width: 0; }
  .content_wrap .bestseller_wrap .card__thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #f4f5f7; }
  .content_wrap .bestseller_wrap .card__thumb img { height: 100%; object-fit: cover; }
  .content_wrap .bestseller_wrap .item:hover .card__thumb img { transform: scale(1.06); }
  .content_wrap .bestseller_wrap .card__thumb .gnb_label_p,
  .content_wrap .bestseller_wrap .card__thumb .gnb_label_b { position: absolute; right: 7px; height: 16px; padding: 0 3px; border-radius: 3px; background: #fff; font-size: 10px; font-weight: 500; text-align: center; z-index: 2; }
  .content_wrap .bestseller_wrap .card__thumb .gnb_label_p { top: 10px; color: #da15ae; border: 1px solid #da15ae; }
  .content_wrap .bestseller_wrap .card__thumb .gnb_label_b { top: 30px; color: var(--c-primary); border: 1px solid var(--c-primary); }
  .content_wrap .bestseller_wrap .card__thumb .gnb_label_b + .gnb_label_b { top: 50px; }
  .content_wrap .bestseller_wrap .card__body .name { display: flex; align-items: center; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
  .content_wrap .bestseller_wrap .card__body .gnb_label.l_hit { align-self: flex-start; width: auto; margin: 4.55px 0 0 4px !important; padding: 0 4px; border: 0 !important; font-size: 10px !important; line-height: 16px !important; text-align: start; flex: none; }
  /* The unit and the price are one <div> here and two lines in the mockup; a flex column
     puts the bare price text node on its own line without a wrapper to hang it on. */
  .content_wrap .bestseller_wrap .card__body .price { display: flex; flex-direction: column; align-items: flex-start; margin-top: 2px; font-size: 13px; font-weight: 800; color: var(--c-point); }
  .content_wrap .bestseller_wrap .card__body .price:not(:has(> span)) {
    padding-top: 21px;
  }
  .content_wrap .bestseller_wrap .card__body .price > span:first-child { min-height: 18px; margin: 0 0 3px; padding: 0; border: 0 !important; background: none; font-size: 12px !important; font-weight: 400; line-height: 1.5; text-align: start; color: var(--c-mute) !important; }

  /* ---------------------------------------------------------- 쉬운주문 템플릿 */
  /* NO display DECLARATION ON .grid'S SIBLINGS: category-nav writes style.display on the
     five grids, so a rule here that ever wins would freeze the rotation. */
  .content_wrap .main_template { padding: 40px 0; background: var(--c-bg-soft); }
  .content_wrap .main_template .template_v2 { max-width: var(--container); margin: 0 auto; padding: 28px 28px 24px; background: #fff; border: 2px solid var(--c-primary); border-radius: 16px; }
  .content_wrap .template_v2 .template_head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 20px;
  }
  .content_wrap .template_v2 .title_area h2 {
    font-size: 22px; font-weight: 900;
    color: var(--c-ink);
  }
  .content_wrap .template_v2 .title_area p { margin-top: 4px; color: var(--c-sub); }
  .content_wrap .template_v2 .category_nav { display: flex; gap: 8px; }
  .content_wrap .template_v2 .category_nav button { padding: 9px 22px; border: 1.5px solid var(--c-line); border-radius: 24px; font-weight: 700; color: var(--c-sub); background: #fff; white-space: nowrap; }
  .content_wrap .template_v2 .category_nav button:hover { border-color: var(--c-primary); color: var(--c-primary); }
  .content_wrap .template_v2 .category_nav button.active {
    border-color: var(--c-primary); background: var(--c-primary); color: #fff;
  }
  .content_wrap .template_v2 .grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  }
  .content_wrap .template_v2 .grid > .card-preview,
  .content_wrap .template_v2 .grid > .card {
    position: relative; height: 180px; padding: 16px 14px 12px; overflow: hidden;
    background: #f4f5f8; border: 1px solid #eef0f3; border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }
  /* Both faces whole, front above back: the markup lists the back first, hence
     column-reverse. Each face keeps its own ratio. */
  .content_wrap .template_v2 .grid > .card-preview {
    display: flex; flex-direction: column-reverse; align-items: center;
    justify-content: center; gap: 10px;
  }
  .content_wrap .template_v2 .card-preview img {
    position: static; width: 82%; box-shadow: 0 2px 10px rgba(0,0,0,.14);
  }
  .content_wrap .template_v2 .grid > .card .sticker_circle {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  }
  .content_wrap .template_v2 .grid > .card .sticker_circle img {
    width: auto; max-width: 100%; max-height: 100%;
    border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.14);
  }

  /* ------------------------------------------------------------------ 납품사례 */
  /* display:contents on the viewport and the track lifts the four <figure> slides into
     the card's own grid: the images stack in one cell and the second slide, which is the
     product text on all nine cards, becomes the row under them. */
  html body .content_wrap .deliverycase_warp { max-width: var(--container); margin: 0 auto; padding: 40px 0; display: grid; grid-template-columns: 1fr auto auto; column-gap: 6px; }
  /* the section is 1260 wide; the band behind it is the wrapper the include sits in */
  .content_wrap > div:has(> .deliverycase_warp) { background: #fff; }
  html body .content_wrap .deliverycase_warp .delivery__head {
    display: block; grid-area: 1 / 1; margin-bottom: 20px;
  }
  html body .content_wrap .deliverycase_warp .delivery__title {
    font-family: inherit; font-size: 22px; font-weight: 900; line-height: 1.5;
    color: var(--c-ink);
  }
  html body .content_wrap .deliverycase_warp .delivery__desc { margin-top: 4px; font-size: 13.5px; color: var(--c-sub); }
  html body .content_wrap .deliverycase_warp .cardsWrap { grid-area: 2 / 1 / 3 / 4; }
  html body .content_wrap .deliverycase_warp .cards { gap: 18px; padding-bottom: 0; }
  html body .content_wrap .deliverycase_warp .card { flex: 0 0 calc(25% - 14px); padding: 0 !important; border: 0; border-radius: 0; background: none; display: grid; grid-template-columns: 100%; grid-template-rows: auto auto auto 1fr auto; }
  html body .content_wrap .deliverycase_warp .card__mock,
  html body .content_wrap .deliverycase_warp .mock__viewport,
  html body .content_wrap .deliverycase_warp .mock__track { display: contents; }
  html body .content_wrap .deliverycase_warp .mock__slide { grid-row: 1; grid-column: 1; opacity: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; }
  html body .content_wrap .deliverycase_warp .card__mock:has(.mock__dots > :nth-child(1).is-active) .mock__slide:nth-child(1),
  html body .content_wrap .deliverycase_warp .card__mock:has(.mock__dots > :nth-child(3).is-active) .mock__slide:nth-child(3),
  html body .content_wrap .deliverycase_warp .card__mock:has(.mock__dots > :nth-child(4).is-active) .mock__slide:nth-child(4),
  html body .content_wrap .deliverycase_warp .card__mock:has(.mock__dots > :nth-child(5).is-active) .mock__slide:nth-child(5),
  html body .content_wrap .deliverycase_warp .card__mock:has(.mock__dots > :nth-child(6).is-active) .mock__slide:nth-child(6),
  html body .content_wrap .deliverycase_warp .card__mock:has(.mock__dots > :nth-child(7).is-active) .mock__slide:nth-child(7),
  html body .content_wrap .deliverycase_warp .card__mock:has(.mock__dots > :nth-child(8).is-active) .mock__slide:nth-child(8) {
    opacity: 1; background: var(--c-bg-soft); border: 1px solid var(--c-line);
  }
  html body .content_wrap .deliverycase_warp .mock__dots { position: static; grid-row: 2; grid-column: 1; transform: none; align-items: center; gap: 5px; justify-content: center; margin: 10px 0 4px; padding: 0; border-radius: 0; background: none; backdrop-filter: none; }
  html body .content_wrap .deliverycase_warp .mock__dot {
    width: 7px; height: 7px; border: 0; border-radius: 50%;
    background: #d0d4da; opacity: 1;
  }
  html body .content_wrap .deliverycase_warp .mock__dot.is-active { background: var(--c-primary); }
  html body .content_wrap .deliverycase_warp .mock__dots > :nth-child(2) { display: none; }
  html body .content_wrap .deliverycase_warp .mock__slide:nth-child(2) { grid-row: 3; grid-column: 1; opacity: 1; aspect-ratio: auto; padding: 6px 4px 0; border-radius: 0; overflow: visible; }
  html body .content_wrap .deliverycase_warp .cards .mock__slide .txt_info { padding: 0; }
  html body .content_wrap .deliverycase_warp .cards .mock__slide .txt_info h3 { font-weight: 800; color: var(--c-ink); }
  html body .content_wrap .deliverycase_warp .cards .mock__slide .txt_info ul {
    list-style: none; margin: 4px 0 0; padding: 0;
  }
  html body .content_wrap .deliverycase_warp .cards .mock__slide .txt_info li {
    list-style: none; margin: 0; font-size: 12px; line-height: 1.65;
    color: var(--c-sub);
    /* one legacy <li> carries style="letter-spacing:-0.5px"; the mockup dropped it,
       and an inline declaration is the one thing a priority is for. */
    letter-spacing: inherit !important;
  }
  html body .content_wrap .deliverycase_warp .meta {
    grid-row: 4; grid-column: 1; display: block; margin: 6px 0 0; padding: 0 4px;
  }
  html body .content_wrap .deliverycase_warp .meta__name { font-size: 12px; font-weight: 400; letter-spacing: inherit; color: var(--c-mute); }
  html body .content_wrap .deliverycase_warp .cta { grid-row: 5; grid-column: 1; margin-top: 14px; }
  html body .content_wrap .deliverycase_warp .cta a { display: block; }
  html body .content_wrap .deliverycase_warp .btn { display: flex; align-items: center; justify-content: center; height: 42px; padding: 0; border-radius: 8px; text-align: start; line-height: 1.5; letter-spacing: inherit; }
  html body .content_wrap .deliverycase_warp .btn:hover { background: var(--c-primary-dark); }
  html body .content_wrap .deliverycase_warp .navBtn {
    position: static; transform: none; align-self: end; margin-bottom: 20px;
    width: 34px; height: 34px; border: 1px solid var(--c-line);
    border-radius: 50%; background: #fff; box-shadow: none;
    color: var(--c-sub); font-size: 17px;
  }
  html body .content_wrap .deliverycase_warp .navBtn:hover { border-color: var(--c-primary); color: var(--c-primary); }
  html body .content_wrap .deliverycase_warp .navBtn.left { grid-area: 1 / 2; }
  html body .content_wrap .deliverycase_warp .navBtn.right { grid-area: 1 / 3; }
  html body .content_wrap .deliverycase_warp .navBtn svg { display: none; }
  html body .content_wrap .deliverycase_warp .navBtn.left::before { content: "\2039"; }
  html body .content_wrap .deliverycase_warp .navBtn.right::before { content: "\203A"; }

  /* ---------------------------------------------------------------------- 리뷰 */
  /* The five like buttons are the legacy rating widget and stay where they are, invisible;
     the mockup's five stars are one text run, so the port paints them as ::before. */
  /* width, not just max-width: main_renewal_v2.css:901 pins .review_warp to
     1200px, which max-width:none leaves standing and clipped it at 1180. */
  .content_wrap .review_warp.w1200 { width: auto; max-width: none; padding: 40px 0; background: var(--c-bg-soft); }
  .content_wrap .review_warp > .head { max-width: var(--container); margin: 0 auto 24px; text-align: center; }
  .content_wrap .review_warp .head .title { font-size: 22px; font-weight: 900; color: var(--c-ink); }
  .content_wrap .review_warp .head .desc { margin-top: 6px; color: var(--c-sub); }
  .content_wrap .review_warp .review_box { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .content_wrap .review_warp .review_box > li { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
  .content_wrap .review_warp .review_box > li > a { display: block; }
  .content_wrap .review_warp .review_box li div.cover { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bg-soft-2); }
  /* width and display come from main_renewal_v2.css, which is desktop-only, so below
     1024 the thumb kept its own ratio and left the cover box short on the right. */
  .content_wrap .review_warp .review_box li div.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .content_wrap .review_warp .review_box li div.info { padding: 16px 18px 18px; }

  .content_wrap .review_warp .like_wrap::before { content: "\2605\2605\2605\2605\2605"; display: block; color: #ffb400; letter-spacing: 1px; }
  .content_wrap .review_warp .like_wrap { position: relative; }
  .content_wrap .review_warp .like_wrap button { position: absolute; top: 0; }
  .content_wrap .review_warp .review_box li h4 { margin-top: 8px; font-weight: 800; color: var(--c-ink); }
  .content_wrap .review_warp .review_box li p { display: -webkit-box; margin-top: 4px; font-size: 13.5px; line-height: 1.6; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .content_wrap .review_warp .review_box li span { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--c-primary); }
  .content_wrap .review_warp .review_box li span::after { content: " \203A"; }

  /* ---------------------------------------------------- 대량구매 / 디자인의뢰 */
  /* One 1920x400 strip served both panels on the desktop; halved or stacked it keeps
     neither. Each card carries its own artwork here, the way the mockup draws it, and
     the band itself goes bare so the gutter and the gap show the page, not the strip. */
  .content_wrap #manybuy .bulk_main { height: auto; padding: 8px 0; background: none; }
  .content_wrap #manybuy .footer_ban { display: grid; gap: 14px; padding: 0 16px; }
  .content_wrap #manybuy .footer_ban > div { width: auto; margin: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; overflow: hidden; border-radius: 18px; color: #333; }
  /* The gradient is not decoration, it is the floor: it is what the card wears while
     the photo is missing, so a 404 costs the artwork and nothing else. */
  .content_wrap #manybuy .bulk_top01 { background: radial-gradient(115% 85% at 18% 2%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 58%), linear-gradient(158deg, #edf7fd 0%, #d8edfa 46%, #c2e2f6 100%); box-shadow: inset 0 0 0 1px rgba(21,159,218,.10); }
  .content_wrap #manybuy .bulk_top02 { background: radial-gradient(115% 85% at 18% 2%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 58%), linear-gradient(158deg, #f2fafe 0%, #e2f2fb 46%, #cfe9f8 100%); box-shadow: inset 0 0 0 1px rgba(21,159,218,.10); }
  /* Scrim and photo share ONE layer under the copy: a scrim of its own would sit above the
     card's own children and dim the button with them. The three lists below are positional --
     entry 1 is the scrim, entry 2 the photo -- so dropping a layer means trimming all three. */
  .content_wrap #manybuy .footer_ban > div::before {
    content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
    pointer-events: none; background-repeat: no-repeat, no-repeat;
    background-position: left center, right center; background-size: cover, cover;
  }
  .content_wrap #manybuy .footer_ban > div.bulk_top01::before {
    background-image: linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.84) 46%, rgba(255,255,255,.58) 78%, rgba(255,255,255,0) 100%),
                      url('/include/img/main/rwd_ban_bulk.jpg');
  }
  .content_wrap #manybuy .footer_ban > div.bulk_top02::before {
    background-image: linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.84) 46%, rgba(255,255,255,.58) 78%, rgba(255,255,255,0) 100%),
                      url('/include/img/main/rwd_ban_design.jpg');
  }
  .content_wrap #manybuy .footer_ban span.sub_tit { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .1em; position: relative; z-index: 2; }
  .content_wrap #manybuy .footer_ban h5 { font-weight: 900; line-height: 1.25; letter-spacing: -.02em; position: relative; z-index: 2; }
  .content_wrap #manybuy .footer_ban h5 em { color: #1a4fd8; }
  .content_wrap #manybuy .footer_ban p { margin-top: 12px; line-height: 1.7; position: relative; z-index: 2; }
  .content_wrap #manybuy .footer_ban .btn_inquires { display: inline-flex; align-items: center; margin-top: 18px; border-radius: 8px; background: #333; color: #fff; font-weight: 800; position: relative; z-index: 2; }
  .content_wrap #manybuy .footer_ban .btn_inquires br { display: none; }
  .content_wrap #manybuy .footer_ban .btn_inquires::after { content: " \2192"; margin-left: 8px; }
  .content_wrap #manybuy .footer_ban .btn_inquires:hover { background: #111; }

  /* -------------------------------------------------------------- 아비즈 업력 */
  /* The legacy <article> carries style="padding:70px 0" inline, which no ordinary rule
     can reach: the mockup's 50px is the one place on this page that needs a priority. */
  .content_wrap .company_history { padding: 50px 0 !important; background: #fff; border: 0; }
  .content_wrap .company_history .cont_wrap.sub_default { width: 100%; max-width: var(--container); }
  .content_wrap .company_history.company_history h4 { font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: var(--c-ink); }
  /* main_renewal.css draws a 12px pale-blue bar under this heading with ::after; the
     mockup has no such rule and the bar is 12px of height nothing else accounts for. */
  .content_wrap .company_history.company_history h4::after { content: none; }
  .content_wrap .company_history > .cont_wrap > p { margin: 8px 0 36px; padding: 0; font-size: 14px; line-height: 1.6; letter-spacing: inherit; color: var(--c-sub); }
  .content_wrap .company_history ul {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center;
  }
  .content_wrap .company_history ul > li { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .content_wrap .company_history ul > li > p { width: 64px; height: 64px; padding: 0; line-height: 1.5; border-radius: 50%; background: var(--c-bg-soft); border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .content_wrap .company_history ul > li > p img { width: 36px; height: 36px; object-fit: contain; }
  .content_wrap .company_history ul > li h5 { padding: 0; font-size: 32px; font-weight: 900; line-height: 1.5; letter-spacing: -.02em; color: var(--c-primary); }
  .content_wrap .company_history ul > li span { font-size: 13.5px; line-height: 1.6; color: var(--c-sub); }

  /* The mockup gives .inner a 20px gutter on the one band where the container is wider
     than the viewport minus it; eight legacy containers stand in for that one wrapper. */
}

@media (max-width: 1023px) {
  /* ================================================================= <= 1024px */
}
@media (max-width: 1023px) {
  html body .content_wrap .new_main .brand_new.line-section { padding: 0 16px !important; }
  .content_wrap .bestseller_wrap .dual,
  .content_wrap .company_history .cont_wrap.sub_default { padding: 0 16px; }
  .content_wrap .main_template { padding: 40px 16px; }
  .content_wrap .review_warp.w1200 { padding: 40px 16px; }

  /* The band is a row of inset cards: the page gutter lives on .container, so Swiper
     measures the narrower box and sizes every slide to it. 12/6 is the air above and
     below the track; the 24px under it is set in the override layer at the end. */
  .content_wrap .big_newban .container { padding: 0 16px; overflow: visible; }
  .content_wrap .big_newban .swiper-container {
    width: 100%; margin: 12px auto 6px; overflow: visible;
  }
  /* Let the plugin own the track again: a forced transform blocks the transitionend
     Swiper 4.5 needs to re-arm autoplay, and hiding the loop clones makes it measure
     a shorter strip than it paints. Slide width stays with Swiper so the two agree. */
  .content_wrap .big_newban .swiper-wrapper { padding: 0; }
  .content_wrap .big_newban .swiper-slide {
    min-width: 0; border-radius: 10px; background-size: auto 100% !important;
  }
  /* The copy sits on the card's vertical centre; the override layer below switches
     off legacy's table/table-cell centring, so the absolute block carries it itself. */
  .content_wrap .big_newban .tit_wrap {
    left: 18px; top: 50%; transform: translateY(-50%); width: 58%;
  }
  .content_wrap .big_newban .tit_box h2 { font-size: 18px; line-height: 1.3; }
  .content_wrap .big_newban .tit_box h3 { margin-top: 20px; font-size: 12px; }
  .content_wrap .big_newban .play_small { display: none; }

  html body .content_wrap .line_banner.main_top_content_wrap { padding: 16px 0; }
  html body .content_wrap .line_banner .line_ban_swiper > ul { display: flex; padding: 0 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  html body .content_wrap .line_banner .line_ban_swiper > ul::-webkit-scrollbar { display: none; }
  /* min-width:0 makes flex:0 0 80px mean what it says: the restored 15px label
     is wider than the track while YoonGothicPro740 loads, or if it never does. */
  html body .content_wrap .line_banner .line_ban_swiper > ul > li { flex: 0 0 80px; min-width: 0; scroll-snap-align: start; }
  html body .content_wrap .line_banner .line_ban_swiper > ul > li > a { padding: 10px 4px; }
  html body .content_wrap .line_banner .main_hot .img_wrap { width: 42px; height: 42px; }
  html body .content_wrap .line_banner .main_hot .img_wrap img { width: 24px; height: 24px; }
  html body .content_wrap .line_banner .line_ban_swiper > ul > li h2 {
    text-align: center; white-space: normal;
  }

  html body .content_wrap .new_main .main_tit h3 { font-size: 17px; }

  .content_wrap .bestseller_wrap .dual { display: flex; flex-direction: column; gap: 0; }
  .content_wrap .bestseller_wrap .panel__title { font-size: 15px; }
  /* No arrows below 1024: the strip is swiped, the way the m-dot site does it. */
  .content_wrap .bestseller_wrap .panel__head .nav { display: none; }
  /* Fixed pitch, not a share of the viewport: the strip has to look the same at 375
     and at 1023 and simply reveal more cards, and it bleeds past the page gutter so
     the next card peeks instead of stopping short of the edge. */
  .content_wrap .bestseller_wrap .grid {
    display: flex; overflow-x: auto; gap: 30px; padding: 0 16px 8px 0;
    margin-right: -16px; scrollbar-width: none; scroll-snap-type: none;
  }
  .content_wrap .bestseller_wrap .grid::-webkit-scrollbar { display: none; }
  .content_wrap .bestseller_wrap .grid > .item {
    flex: 0 0 250px; scroll-snap-align: none;
  }
  .content_wrap .bestseller_wrap .card__body .name { font-size: 12px; }
  .content_wrap .bestseller_wrap .card__body .gnb_label.l_hit { margin-top: 2.92px !important; }
  .content_wrap .bestseller_wrap .card__body .price { font-size: 12px; }

  .content_wrap .main_template .template_v2 { padding: 22px 14px; }
  .content_wrap .template_v2 .template_head { flex-direction: column; text-align: center; }
  .content_wrap .template_v2 .title_area { width: 100%; }
  .content_wrap .template_v2 .title_area h2 { font-size: 20px; }
  .content_wrap .template_v2 .title_area p { font-size: 13px; }
  .content_wrap .template_v2 .category_nav { overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 4px; justify-content: flex-start; }
  .content_wrap .template_v2 .category_nav::-webkit-scrollbar { display: none; }
  .content_wrap .template_v2 .category_nav button { flex: 0 0 auto; padding: 9px 18px; font-size: 13.5px; }
  .content_wrap .template_v2 .grid {
    display: flex; overflow-x: auto; gap: 12px; padding-bottom: 8px;
    scrollbar-width: none; scroll-snap-type: x mandatory;
  }
  .content_wrap .template_v2 .grid::-webkit-scrollbar { display: none; }
  .content_wrap .template_v2 .grid > .card-preview,
  .content_wrap .template_v2 .grid > .card {
    flex: 0 0 calc(50% - 6px); scroll-snap-align: start;
    height: auto; aspect-ratio: 5 / 7; padding: 0; border-radius: 10px;
  }
  .content_wrap .template_v2 .grid > .card .sticker_circle img {
    max-height: 100%; box-shadow: none; border-radius: 0;
  }

  html body .content_wrap .deliverycase_warp { padding: 40px 16px; }
  html body .content_wrap .deliverycase_warp .navBtn { display: none; }
  html body .content_wrap .deliverycase_warp .cards { overflow-x: auto; gap: 14px; scrollbar-width: none; padding-bottom: 4px; }
  html body .content_wrap .deliverycase_warp .cards::-webkit-scrollbar { display: none; }
  html body .content_wrap .deliverycase_warp .card { flex: 0 0 calc(50% - 7px); }
  html body .content_wrap .deliverycase_warp .btn { height: 38px; font-size: 13px; }

  .content_wrap .review_warp .review_box {
    display: flex; overflow-x: auto; gap: 12px; padding-bottom: 8px;
    scrollbar-width: none; scroll-snap-type: x mandatory;
  }
  .content_wrap .review_warp .review_box::-webkit-scrollbar { display: none; }
  .content_wrap .review_warp .review_box > li { flex: 0 0 80%; scroll-snap-align: start; }

  .content_wrap #manybuy .footer_ban { grid-template-columns: 1fr; }
  .content_wrap #manybuy .footer_ban > div { padding: 26px 20px; }
  .content_wrap #manybuy .footer_ban h5 { font-size: 22px; }
  .content_wrap #manybuy .footer_ban p { font-size: 12.5px; }
  /* 44px is the floor the button may not go under, not a look: it is the tap target. */
  .content_wrap #manybuy .footer_ban .btn_inquires { height: 44px; padding: 0 16px; font-size: 12.5px; }

  .content_wrap .company_history ul { grid-template-columns: repeat(2, 1fr); }
  .content_wrap .company_history ul > li > p { width: 50px; height: 50px; }
  .content_wrap .company_history ul > li > p img { width: 28px; height: 28px; }
  .content_wrap .company_history ul > li h5 { font-size: 26px; }
}
@media (max-width: 1023px) {
  /* ======================================================== 769px .. 1024px */
}
@media (min-width: 768px) and (max-width: 1023px) {
  html body .content_wrap .new_main .brand_new.line-section { padding: 0 24px !important; }
  .content_wrap .bestseller_wrap .dual,
  .content_wrap .company_history .cont_wrap.sub_default { padding: 0 24px; }
  .content_wrap .bestseller_wrap .grid { padding-right: 24px; margin-right: -24px; }
  .content_wrap .main_template { padding: 40px 24px; }
  .content_wrap .review_warp.w1200 { padding: 40px 24px; }
  html body .content_wrap .deliverycase_warp { padding: 40px 24px; }

  .content_wrap .review_warp .review_box {
    display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: visible;
  }
  .content_wrap .review_warp .review_box > li { flex: none; }
  /* The two panels stay stacked here, as the mockup has them at every width under 1024;
     the page's tablet gutter is the only thing this band takes from the width. */
  .content_wrap #manybuy .footer_ban { padding: 0 24px; }
  .content_wrap .template_v2 .grid > .card-preview,
  .content_wrap .template_v2 .grid > .card { flex: 0 0 calc(25% - 9px); }
}









/* <=1023 OVERRIDE LAYER. default.asp no longer branches on the lane, so base.css,
   main_notice.css, main_renewal.css and main_renewal_v2.css reach this lane below
   1024; linked in <body>, they win every tie. Each rule undoes one of those wins. */
@media (max-width: 1023px) {

  /* ------------------------------------------------------------------- big banner */
  /* .main_ban{position:relative} */
  .content_wrap .main_ban.big_newban { position: static; }
  /* .main_ban .container{width:90%} inside @media(max-width:1240px): it shifted the
     band 18.75px right and shrank every slide with it. */
  .content_wrap .big_newban .container { width: auto; margin-left: 0; margin-right: 0; }
  /* .main_ban .swiper-container{padding-bottom:60px}: the bar legacy lays out in that
     slot is display:none here, so 24px of it only pushed the guide strip down and left
     it reading as part of 새로운 상품 rather than centred between the two. */
  .content_wrap .big_newban .swiper-container { padding-bottom: 0; }
  /* .main_ban .tit_wrap{display:table;height:100px;text-align:left} + .tit_box
     {display:table-cell} */
  .content_wrap .big_newban .tit_wrap { display: block; height: auto; text-align: start; }
  .content_wrap .big_newban .tit_box { display: block; }
  /* .main_ban .tit_box h2/h3{font-family:'Montserrat',...}: the band belongs to the
     Pretendard stack .content_wrap sets. */
  .content_wrap .big_newban .tit_box h2,
  .content_wrap .big_newban .tit_box h3 { font-family: inherit; }
  /* .main_ban .swiper-pagination{z-index:9; width:90% !important} */
  .content_wrap .big_newban .swiper-pagination { z-index: 10; width: 100% !important; }
  /* .main_ban .play_small{position:absolute;height:30px;z-index:9} and the four
     controls inside it, which desktop pins over the slide and this band lays out in
     a static row under it. */
  .content_wrap .big_newban .play_small { position: static; height: auto; z-index: auto; }
  .content_wrap .big_newban .play_small > .swiper-pause_top,
  .content_wrap .big_newban .play_small > .swiper-play_top,
  .content_wrap .big_newban .play_small > .swiper-button-prev_top,
  .content_wrap .big_newban .play_small > .swiper-button-next_top {
    position: static; opacity: 1; z-index: auto;
  }
  /* only margin-top:-9px arrives !important */
  .content_wrap .big_newban .play_small > .swiper-button-prev_top,
  .content_wrap .big_newban .play_small > .swiper-button-next_top { margin-top: 0 !important; }

  /* --------------------------------------------------- BEST SELLER / OUR PICKS */
  /* .bestseller_wrap{max-width:1200px; color:var(--text)}: the colour is inherited by
     every card and label under it, which is why one rule closes 21 of them. */
  .content_wrap .bestseller_wrap { max-width: none; color: inherit; }
  /* .bestseller_wrap .dual{position:relative} anchors a 2px column divider drawn by
     ::after, which their own @media only hides below 980 -- so between 981 and 1023
     it draws, and against a static .dual it would hang off the page instead. */
  .content_wrap .bestseller_wrap .dual { position: static; }
  .content_wrap .bestseller_wrap .dual::after { content: none; }
  /* .bestseller_wrap .panel:first-child{padding-right:10px} is a desktop gutter; the
     leaf class is doubled because :first-child puts the killer at (0,3,0) too. */
  .content_wrap .bestseller_wrap .panel.panel { padding-left: 0; padding-right: 0; }
  .content_wrap .bestseller_wrap .panel__head { padding-top: 0; padding-left: 0; padding-right: 0; }
  /* .bestseller_wrap .card__thumb{display:flex;height:190px;margin-bottom:14px}: the
     thumb is a square driven by aspect-ratio here, not a fixed height. */
  .content_wrap .bestseller_wrap .card__thumb {
    display: block; height: auto; margin-bottom: 0;
    align-items: normal; justify-content: normal;
  }
  .content_wrap .bestseller_wrap .card__body { padding-left: 0; padding-right: 0; }
  /* .bestseller_wrap .grid{min-height:600px} is the desktop 3x2 tab brake; the strip
     here is one row 325.9px tall, and 980 is where the legacy sheet lets go of it --
     so this only ever bites between 981 and 1023. */
  .content_wrap .bestseller_wrap .grid { min-height: 0; }
  /* .bestseller_wrap .name/.price{justify-content:space-between} throws the H badge
     to the far edge; 1.5 is the number .content_wrap hands down. */
  .content_wrap .bestseller_wrap .card__body .name {
    justify-content: normal; line-height: 1.5; gap: normal; min-height: 0;
  }
  .content_wrap .bestseller_wrap .card__body .price { justify-content: normal; }

  /* -------------------------------------------------------------- free templates */
  /* .template_v2 .grid{justify-content:space-between; min-height:400px}: the 400 is
     a desktop tab-height brake and is most of what made this section 187px taller. */
  .content_wrap .template_v2 .grid { justify-content: normal; min-height: 0; }
  /* .template_v2 .title_area h2{margin:0 0 8px 0} */
  .content_wrap .template_v2 .title_area h2 { margin-bottom: 0; }
  /* .template_v2 .card{display:flex;width:210px;...} */
  .content_wrap .template_v2 .grid > .card {
    display: block; width: auto; align-items: normal; justify-content: normal;
  }
  /* .template_v2 .sticker_circle img{display:flex;...} and .template_v2 .h150
     {height:150px !important} -- the only one of the pair that needs an answer in kind. */
  .content_wrap .template_v2 .grid > .card .sticker_circle img {
    display: block; align-items: normal; justify-content: normal;
    height: auto !important;
  }
  /* .card-preview img{height:76px}: both faces are sized from their width, so each
     keeps its own ratio. */
  .content_wrap .template_v2 .card-preview img { height: auto; }
  /* .template_v2 .title_area p{line-height:30px} */
  .content_wrap .template_v2 .title_area p { line-height: 1.5; }

  /* ------------------------------------------------------------------ reviews */
  /* .review_warp .head{display:flex;align-items:baseline} collapsed the title to its
     own text and the header from 60px to 27px. */
  .content_wrap .review_warp .head { display: block; align-items: normal; }
  .content_wrap .review_warp .head .title { font-family: inherit; line-height: 1.5; }
  /* .review_warp .like_wrap{display:flex;margin-bottom:12px}: the five buttons are
     hidden here and the stars are painted by ::before, so a flex row is not wanted. */
  .content_wrap .review_warp .like_wrap { display: block; margin-bottom: 0; }
  /* .review_warp ul.list_box li div.info .like_wrap button{width:15px;height:14px;
     margin-right:5px;background:url(...)} gave those hidden buttons a box again. The
     killer is (0,4,4), so the answer repeats its shape with .content_wrap in front. */
  .content_wrap .review_warp ul.list_box li div.info .like_wrap button {
    width: 0; height: 0; margin-right: 0; background-image: none;
  }
  /* .review_warp .ir_pm.active::before{content: a heart} paints a blue heart on each
     of the 20 like buttons, which sit stacked at top:0 and are sized to nothing here;
     the rating this band shows is the five ::before stars on .like_wrap. */
  .content_wrap .review_warp .ir_pm.active::before { content: none; }
  /* .review_warp .review_box .cover{border-radius:12px;margin-bottom:16px}: the card
     itself is the rounded box here, and its own overflow already clips the photo. */
  .content_wrap .review_warp .review_box li div.cover { border-radius: 0; margin-bottom: 0; }
  /* .review_warp .review_box h4/p/span: the three properties each rule holds that the
     block above leaves open -- a bigger heading, grey body text, a pill border. */
  .content_wrap .review_warp .review_box li h4 { font-size: 14px; margin-bottom: 0; line-height: 1.5; }
  .content_wrap .review_warp .review_box li p { color: inherit; }
  .content_wrap .review_warp .review_box li span {
    border: 0; border-radius: 0; margin-bottom: 0; padding: 0; width: auto;
  }

  /* ------------------------------------------------------------- bulk purchase */
  /* main.bulk_main .footer_ban{width:1200px} is the desktop row; here the band is
     the viewport, and an auto width lets the auto margins fall back to 0. */
  .content_wrap #manybuy .footer_ban { width: auto; }
  .content_wrap #manybuy .footer_ban > div { text-align: start; }
  /* span.sub_tit{height:19px;padding:0 5px;color:#111} and h5{margin-bottom:20px;
     color:#333}: both take the panel's own colour, which is #333 across the band. */
  .content_wrap #manybuy .footer_ban span.sub_tit { height: auto; padding: 0; color: inherit; }
  .content_wrap #manybuy .footer_ban h5 { margin-bottom: 0; color: inherit; }
  .content_wrap #manybuy .footer_ban h5 em { font-weight: inherit; }
  /* .bulk_top01 .btn_inquires{width:40px;margin-left:180px;...} is the desktop round
     icon button; here it is a pill that shrinks to its label. */
  .content_wrap #manybuy .footer_ban .btn_inquires {
    width: auto; margin-left: 0; line-height: 1.5; justify-content: normal;
  }

  /* --------------------------------------------------------------- company history */
  /* .company_history ul{padding-top:70px} [main_renewal.css]: that sheet is linked
     twice now, and the copy in <body> is what reaches past this one. */
  .content_wrap .company_history ul { padding-top: 0; }

  /* ------------------------------------------------------------------- shared */
  /* swiper.min.css .swiper-wrapper{box-sizing:content-box} ties with the reset at the
     top of this sheet and, arriving later, took it. */
  .content_wrap .swiper-wrapper { box-sizing: border-box; }
}

/* The strip wears desktop tokens at every width. Five of them arrive by
   inheritance from page-wide rules that must stay, so they are restated here
   for this region only; values measured on the same lane at 1400px. */
@media (max-width: 1023px) {
  html body .content_wrap .line_banner {
    font-family: Montserrat, YoonGothicPro740, sans-serif;
    font-size: 13px; line-height: 22px; letter-spacing: normal; color: #666;
  }
}

/* Phone: the card loses 30px of height, and that is the whole difference between the
   two narrow bands -- every other banner rule above is shared with the tablet. */
@media (max-width: 767px) {
  .content_wrap .big_newban .swiper-slide { height: 200px; min-height: 200px; }
}

/* Both narrow-band strips get one clickable arrow pair. The reference file puts the
   same chevrons in the same spot, but as pointer-events:none hints that cannot act. */
@media (max-width: 1023px) {
  html body .content_wrap .line_banner .line_ban_swiper { position: relative; }

  html body .content_wrap .line_banner .trk-nav,
  html body .content_wrap .deliverycase_warp .navBtn {
    width: 34px; height: 34px; padding: 0;
    align-items: center; justify-content: center;
    border: 1px solid var(--c-line); border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 10px rgba(20, 30, 50, .18);
    color: var(--c-sub); font-size: 19px; line-height: 1;
    cursor: pointer; transition: opacity .18s ease;
  }
  /* 34px circle, 44x64 target: the reference chevron box, at the AA tap size */
  html body .content_wrap .line_banner .trk-nav::after,
  html body .content_wrap .deliverycase_warp .navBtn::after {
    content: ""; position: absolute; top: -15px; right: -5px; bottom: -15px; left: -5px;
  }
  html body .content_wrap .line_banner .trk-nav:hover,
  html body .content_wrap .deliverycase_warp .navBtn:hover {
    border-color: var(--c-primary); color: var(--c-primary);
  }
  html body .content_wrap .line_banner .trk-nav[disabled],
  html body .content_wrap .deliverycase_warp .navBtn[disabled] {
    opacity: 0; visibility: hidden; pointer-events: none;
  }

  html body .content_wrap .line_banner .trk-nav {
    display: flex; position: absolute; top: 50%; margin-top: -17px; z-index: 6;
  }
  html body .content_wrap .line_banner .trk-nav[hidden] { display: none; }
  html body .content_wrap .line_banner .trk-nav.prev { left: 0; }
  html body .content_wrap .line_banner .trk-nav.next { right: 0; }

  /* Drawn, not typed: the strip pins itself to Montserrat/YoonGothicPro740 and
     neither carries U+2039, so a glyph arrow renders as a tofu box on this row. */
  html body .content_wrap .line_banner .trk-nav.prev::before,
  html body .content_wrap .line_banner .trk-nav.next::before,
  html body .content_wrap .deliverycase_warp .navBtn.left::before,
  html body .content_wrap .deliverycase_warp .navBtn.right::before {
    content: ""; width: 7px; height: 7px;
    border: solid currentColor; border-width: 1.6px 1.6px 0 0;
  }
  html body .content_wrap .line_banner .trk-nav.prev::before,
  html body .content_wrap .deliverycase_warp .navBtn.left::before {
    transform: rotate(-135deg); margin-left: 3px;
  }
  html body .content_wrap .line_banner .trk-nav.next::before,
  html body .content_wrap .deliverycase_warp .navBtn.right::before {
    transform: rotate(45deg); margin-right: 3px;
  }

  /* Row 2 is the card strip, not the title row this pair was parked in while hidden.
     position:static was all that held off the legacy top:55%/left:-13px offsets, and
     relative is needed for z-index and the hit box, so clear those four by hand. */
  html body .content_wrap .deliverycase_warp .navBtn {
    display: flex; position: relative; z-index: 6; align-self: center; margin: 0;
    top: auto; right: auto; bottom: auto; left: auto;
  }
  html body .content_wrap .deliverycase_warp .navBtn:active,
  html body .content_wrap .line_banner .trk-nav:active { transform: scale(.96); }
  html body .content_wrap .deliverycase_warp .navBtn.left {
    grid-area: 2 / 1 / 3 / 4; justify-self: start;
  }
  html body .content_wrap .deliverycase_warp .navBtn.right {
    grid-area: 2 / 1 / 3 / 4; justify-self: end;
  }
}

/* 365이벤트 strip (include/html/biz.main_banner.asp): its own <style> pins it at 1200px
   with no @media, so below 1024 the message, gift and arrow ran off the right edge.
   It now takes the page gutters; .content_wrap outranks that <style>, as above. */
@media (max-width: 1023px) {
  .content_wrap .main_event_lineban { width: auto; margin: 0 24px 40px; }
  .content_wrap .main_event_lineban::after { content: none; }
  /* the copy changes with the event: the strip grows with it rather than clip it */
  .content_wrap .main_event_lineban .bz365 { width: auto; height: auto; min-height: 72px; }
  .content_wrap .main_event_lineban .bz365 .bz-l {
    gap: 10px; max-width: 50%; padding: 0 40px 0 20px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%); }
  .content_wrap .main_event_lineban .bz365 .bz-badge {
    height: 26px; padding: 2px 11px 0; border-radius: 13px; font-size: 14px; }
  /* a longer headline ends in an ellipsis instead of pushing the message out */
  .content_wrap .main_event_lineban .bz365 .bz-hd {
    font-size: 21px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .content_wrap .main_event_lineban .bz365 .bz-r { gap: 10px; padding-left: 12px; padding-right: 16px; }
  /* the message may wrap, into lines balanced where the browser supports it */
  .content_wrap .main_event_lineban .bz365 .bz-msg {
    font-size: 16px; line-height: 1.4; white-space: normal; text-align: right;
    word-break: keep-all; text-wrap: balance; }
  .content_wrap .main_event_lineban .bz365 .bz-msg em { padding: 3px 6px 1px; }
  .content_wrap .main_event_lineban .bz365 .bz-gift { width: 58px; height: 45px; }
  .content_wrap .main_event_lineban .bz365 .bz-arrow { width: 36px; height: 36px; }
  .content_wrap .main_event_lineban .bz365 .bz-arrow svg { width: 16px; height: 16px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .content_wrap .main_event_lineban .bz365 .bz-l { align-self: stretch; height: auto; }
  .content_wrap .main_event_lineban .bz365 .bz-r { padding-top: 10px; padding-bottom: 10px; }
}

/* Phone: the navy part stays a tab on top; message, gift and arrow make the second row.
   .bz-r is display:contents so its three children join the link's grid. */
@media (max-width: 767px) {
  .content_wrap .main_event_lineban { margin: 0 16px 40px; }
  .content_wrap .main_event_lineban .bz365 {
    display: grid; grid-template-columns: minmax(0, max-content) 1fr auto auto;
    grid-template-areas: "l l l l" "msg . gift arrow"; align-items: center; height: auto; }
  .content_wrap .main_event_lineban .bz365 .bz-l {
    grid-area: l; justify-self: start; max-width: 100%; height: 44px; gap: 8px;
    padding: 0 34px 0 14px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); }
  .content_wrap .main_event_lineban .bz365 .bz-badge {
    height: 24px; padding: 2px 10px 0; border-radius: 12px; font-size: 13px; }
  .content_wrap .main_event_lineban .bz365 .bz-hd { font-size: 18px; }
  .content_wrap .main_event_lineban .bz365 .bz-r { display: contents; }
  .content_wrap .main_event_lineban .bz365 .bz-msg {
    grid-area: msg; padding: 12px 0 14px 14px; font-size: 15px; text-align: left; }
  .content_wrap .main_event_lineban .bz365 .bz-gift {
    grid-area: gift; width: 52px; height: 40px; margin-left: 10px; }
  .content_wrap .main_event_lineban .bz365 .bz-arrow {
    grid-area: arrow; width: 32px; height: 32px; margin: 0 14px 0 10px; }
  .content_wrap .main_event_lineban .bz365 .bz-arrow svg { width: 14px; height: 14px; }
}

/* Below 360 the gift gives way, so the message keeps to two lines. */
@media (max-width: 359px) {
  .content_wrap .main_event_lineban .bz365 .bz-gift { display: none; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .content_wrap .main_event_lineban .bz365 .bz-arrow { transition: none; }
}
