/* =========================================================
   4Q 매거진 기획전 스타일 : magazine_4q_v2.css
   CDN : https://cdn-tgreen.bizhost.kr/phpskr/tgreen09/2026/10/29/HSH/css/magazine_4q_v2.css
   게시글에는 게시판 고정 블록(01)과 몰 요소 규칙만 남긴다.
   ========================================================= */
/* 02. 공통 영역 */
#wrapper_ey { position: relative; display: flex; width: 100%; min-height: 100vh; background-color: #fff; color: #000; }
#wrapper_ey *, #wrapper_ey *::before, #wrapper_ey *::after { box-sizing: border-box; }
#wrapper_ey a { color: inherit; text-decoration: none; }
#wrapper_ey button { border: 0; background: transparent; cursor: pointer; font: inherit; }
#wrapper_ey img { display: block; width: 100%; height: auto; }

/* 03. 좌측 기본 영역 */
#left { position: relative; width: 36%; max-height: 100vh; overflow-y: auto; border-right: 1px solid #ececec; background-color: #fff; scroll-behavior: smooth; }

/* 04. 좌측 스티키 메뉴 */
#left .left_sticky_menu { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 24px; height: 56px; 
  background-color: #000; overflow: hidden; }
#left .left_sticky_menu_button { flex: 1 1 0; min-width: 0; height: 56px; padding: 0 8px; border: 0; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: 0; 
  text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; border-radius: 0; transition: opacity 0.2s ease, font-weight 0.2s ease; }
#left .left_sticky_menu_button.is_active,
#left .left_sticky_menu_button:hover { background-color: transparent; color: #d7ca94; font-weight: 700; opacity: 1; }

/* 좌측 스티키 PC PRODUCT 숨김 */
/* 05. 좌측 메인 비주얼 */
#left .top_visual_area { position: relative; background-color: #fff; color: #000; }
#left .top_visual_title_header { padding: 24px 24px 20px; background-color: #fff; color: #000; text-align: left; }
#left .top_visual_swipe_wrap { position: relative; aspect-ratio: 4 / 5; overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; }
#left .top_visual_swipe_item { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity 0.45s ease, transform 0.65s ease; }
#left .top_visual_swipe_wrap img { -webkit-user-drag: none; user-select: none; }
#left .top_visual_swipe_item.is_active { opacity: 1; transform: scale(1); }
#left .top_visual_dim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.14)); z-index: 2; }
#left .top_visual_text_area { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 28px 28px 45px; text-align: left; color: #fff; }
#left .top_visual_season_text { margin: 0 0 12px 0; font-family: 'Bai Jamjuree', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.14em; opacity: 0.92; }
#left .top_visual_title_text { margin: 0; font-size: 96px; line-height: 0.95; letter-spacing: -0.05em; font-weight: 600; }
#left .top_visual_title_header .top_visual_title_text { color: #000; }
#left .top_visual_subtitle_text { margin: 0; font-size: clamp(38px, 6vw, 72px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 600;  }
#left .top_visual_desc_text { margin: 14px 0 0 0; font-size: 26px; font-weight: 400; word-break: keep-all; }

/* 블러 + 슬라이드 페이드 */
#left .top_visual_text_area.top_visual_text_fade_ey .top_visual_copy_item_ey { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(8px);
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease; will-change: opacity, transform, filter; }
#left .top_visual_text_area.top_visual_text_fade_ey.is_show .top_visual_copy_item_ey { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
#left .top_visual_text_area.top_visual_text_fade_ey.is_show .top_visual_copy_item_ey:nth-child(1) { transition-delay: 0.05s; }
#left .top_visual_text_area.top_visual_text_fade_ey.is_show .top_visual_copy_item_ey:nth-child(2) { transition-delay: 0.15s; }
#left .top_visual_text_area.top_visual_text_fade_ey.is_show .top_visual_copy_item_ey:nth-child(3) { transition-delay: 0.25s; }
#left #top_visual_items_mount_ey { position: relative; z-index: 1; width: 100%; height: 100%; background-color: #fff; }
#left #top_visual_items_mount_ey .top_visual_swipe_item { position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 0; transform: none; transition: opacity 0.08s linear; will-change: opacity; pointer-events: none; }
#left #top_visual_items_mount_ey .top_visual_swipe_item.is_prev_active { opacity: 1; visibility: visible; z-index: 1; }
#left #top_visual_items_mount_ey .top_visual_swipe_item.is_active { opacity: 1; visibility: visible; z-index: 2; pointer-events: auto; }
#left #top_visual_items_mount_ey .top_visual_swipe_item img { width: 100%; height: 100%; object-fit: cover; }

/* 06. 좌측 인트로 배너 */
#left .intro_banner_area { padding: 34px 20px 60px; background-color: #fff; text-align: left; }
#left .intro_banner_text { margin: 0; font-size: 18px; line-height: 1.7em; font-weight: 300; color: #000; word-break: keep-all; }
#left .intro_banner_timer_text { margin: 26px 0 0 0; font-size: 16px; font-weight: 600; color: #000; }

/* 07. 좌측 이벤트 / 쿠폰 / 유의사항 */
#left .event_section_area { display: flex; flex-direction: column; }
#left .event_coupon_inline_anchor,
#left .event_wide_banner_area { display: none; }

/* ver1 */
#left .event_section_area[data-event-version="1"] .event_card_list { display: grid; }
#left .event_section_area[data-event-version="1"] .event_coupon_inline_anchor,
#left .event_section_area[data-event-version="1"] .event_wide_banner_area { display: none; }

/* ver2 */
#left .event_section_area[data-event-version="2"] .event_card_list { display: none; }
#left .event_section_area[data-event-version="2"] .event_coupon_inline_anchor { display: block; }
#left .event_section_area[data-event-version="2"] .coupon_box_area { margin-top: 15px; }
#left .event_section_area[data-event-version="2"] .event_info_text_box { margin: 30px 0 20px 0; }

/* ver3 */
#left .event_section_area[data-event-version="3"] .event_card_list,
#left .event_section_area[data-event-version="3"] .event_coupon_inline_anchor,
#left .event_section_area[data-event-version="3"] .event_info_text_box { display: none; }
#left .event_section_area[data-event-version="3"] .event_wide_banner_area { display: block; }
#event_section[data-event-version="3"] .notice_coupon_item { display: none; }

#event_section { padding: 19px 20px 60px 20px; background-color: #f5f5f5; border-bottom: 0; }
#left .event_section_area { margin-top: 50px; text-align: center; }
#left .event_title_area { margin-bottom: 0; text-align: center; }
#left .event_title_area h2 { margin: 0; font-size: 3rem; font-weight: 600; text-align: center; color: #000; letter-spacing: 0; }
#left .event_title_area h3 { margin: 10px 0 0 0; font-size: 1rem; line-height: 1.8; font-weight: 400; color: #000; }
#left .event_card_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 30px; }
#left .event_card_item { border: 0; background-color: #fff; overflow: hidden; }
#left .event_card_image_box { position: relative; overflow: hidden; background-color: #f6f6f6; }
#left .event_card_image_box img { display: block; width: 100%; height: auto; }
#left .event_card_image_box .event_img_default,
#left .event_card_image_box .event_img_hover { transition: opacity 0.35s ease; }
#left .event_card_image_box .event_img_hover { position: absolute; top: 0; left: 0; opacity: 0; }
#left .event_card_item:hover .event_card_image_box .event_img_default { opacity: 0; }
#left .event_card_item:hover .event_card_image_box .event_img_hover { opacity: 1; }
#left .event_card_text_box h4 { margin: 0; font-size: 16px; line-height: 2.5em; font-weight: 500; color: #000; background-color: #f5f5f5; }
#left .event_wide_banner_area { margin-top: 30px; text-align: left; }
#left .event_wide_banner_link { display: block; }
#left .event_wide_banner_image_box { overflow: hidden; background-color: #f6f6f6; }
#left .event_wide_banner_image_box img { display: block; width: 100%; height: auto; }
#left .event_wide_banner_button { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; margin: 5px 0 0 0; background-color: #000; color: #fff; 
  font-size: 16px; font-weight: 700; letter-spacing: -0.02em; transition: opacity 0.2s ease; }
#left .event_wide_banner_button:hover { opacity: 0.88; }
#left .event_info_text_box { margin: 30px 0 45px 0; padding: 0; color: #000; text-align: left; }
#left .event_info_text_box h4 { margin: 0 0 12px 0; font-weight: 400; font-size: 18px; color: #000; }
#left .event_info_text_box h5 { font-size: 16px; margin: 20px 0 -12px 0; font-weight: 300; color: #000; }

/* 좌측 쿠폰 영역 */
#left .coupon_box_area { width: 670px; max-width: 100%; height: 100px; background-color: #000; background-clip: padding-box; margin: 0; display: flex;
  align-items: center; justify-content: space-between; padding-left: 16px; color: #ffffff;
  position: relative; overflow: hidden; z-index: 0; backface-visibility: hidden; transform: translateZ(0); }
#left .coupon_box_area::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(100% - 110px - 1px); width: 1px;
background-color: #000; z-index: 1; }
#left .coupon_text_area { display: flex; flex-direction: column; justify-content: center; line-height: normal; padding-left: 15px; min-width: 0; }
#left .coupon_discount_text { margin: 0; font-size: 35px; font-weight: 700; text-align: left; line-height: 1; }
#left .coupon_condition_row { display: inline-flex; align-items: center; white-space: nowrap; gap: 4px; font-size: 20px; margin-top: 10px; }
#left .coupon_condition_text,
#left .coupon_divider_text,
#left .coupon_timer_text { color: #d5d5d5; margin: 0; line-height: 1.2em; }
#left .coupon_condition_text,
#left .coupon_divider_text{ display: none;}
#left .coupon_condition_text { font-weight: 500; }
#left .coupon_download_button { width: 110px; height: 100%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: url('https://cdn-tgreen.bizhost.kr/phpskr/tgreen09/2025/06/18/HSH/img/coupon/img_icon.png') no-repeat center;
  background-size: 24px 24px; background-color: #000; }
/* 쿠폰 박스 어디를 눌러도 다운로드 */
#left .coupon_download_button::before { content: ''; position: absolute; inset: 0; z-index: 2; }
#left .coupon_comment_button { display: none; align-items: center; justify-content: center; width: 670px; max-width: 100%; height: 50px; margin: 5px 0; 
  background-color: #000; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; transition: opacity 0.2s ease; }
#left .coupon_comment_button:hover { opacity: 0.88; }

/* 좌측 유의사항 영역 */
#left .notice_section_area { position: relative; width: 100%; margin: 10px 0 0; text-align: left; }
#left .notice_toggle_wrap { position: relative; width: 100%; border: 0; }
#left .notice_toggle_button { width: auto; padding: 0; display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px; text-align: left; }
#left .notice_toggle_button h4 { margin: 0; line-height: 20px; text-align: left; font-size: 16px; font-weight: 400; color: #1e1e1e; flex: 0 0 auto; }
#left .notice_toggle_icon { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500;
  color: #000; flex: 0 0 auto; line-height: 1; margin-left: 2px; }
#left .notice_toggle_detail_area { max-height: 0; overflow: hidden; padding: 0; text-align: left; color: #000; opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding-top 0.35s ease; }
#left .notice_toggle_detail_area.is_open { max-height: 1000px; opacity: 1; padding-top: 14px; }
#left .notice_toggle_detail_area h5 { margin: 9px 0; font-size: 14px; font-weight: 300; color: #000; word-break: keep-all; }

/* 08. 좌측 컬렉션 영역 */
#left .collection_section_area { padding: 60px 20px 0; }
#left .collection_title_area { margin-bottom: 24px; text-align: left; }
#left .collection_title_area h2 { margin: 0; font-size: 116px; font-weight: 700; letter-spacing: -0.04em; color: #000; }
#left .collection_question_block { margin-top: 80px; text-align: left; }
#left .collection_question_label { margin: 0 0 8px 0; font-size: 20px; font-weight: 700; color: #000; }
#left .collection_question_title { margin: 0 0 20px 0; font-size: 28px; font-weight: 700; color: #000; letter-spacing: -0.03em; word-break: keep-all; }
#left .collection_image_box { overflow: hidden; }
#left .collection_image_box.large,
#left .collection_image_box.medium { aspect-ratio: 4 / 5; }
#left .collection_product_map_box { position: relative; overflow: visible; }
#left .collection_product_map_box.collection_stack_scene { aspect-ratio: auto; height: 300vh; background-color: transparent; }
#left .collection_stack_sticky { position: sticky; top: 70px; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; /*background-color: #f3f3f3;*/ }
#left .collection_stack_item { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform, opacity; overflow: hidden; }
#left .collection_stack_item img { width: 100%; height: 100%; object-fit: cover; }
#left .collection_stack_item.stack_01 { z-index: 1; transform: translate3d(0, 0, 0); }
#left .collection_stack_item.stack_02 { z-index: 2; transform: translate3d(0, 100%, 0); }
#left .collection_stack_item.stack_03 { z-index: 3; transform: translate3d(0, 100%, 0); }
#left .collection_stack_item.stack_04 { z-index: 4; transform: translate3d(0, 100%, 0); }
#left .collection_stack_item.stack_05 { z-index: 5; transform: translate3d(0, 100%, 0); }
#left #collection_stack_scene_q4_ey .collection_stack_item > a { position: relative; display: block; width: 100%; height: 100%; }
#left #collection_stack_scene_q4_ey .editorial_pick_label { position: absolute; top: 3%; right: 3%; z-index: 20; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; background-color: #fff; color: #000; border: 1px solid #bdbdbd; font-size: 16px; font-weight: 400; letter-spacing: -0.03em; white-space: nowrap; }
#left #collection_stack_scene_q4_ey .editorial_pick_num { position: absolute; z-index: 20; display: flex; align-items: center; justify-content: center; 
  width: 24px; height: 24px; background-color: #000; color: #fff; font-size: 14px; font-weight: 400; }
#left #collection_stack_scene_q4_ey .editorial_pick_num.num_01 { top: 3%; left: 3%; }
#left #collection_stack_scene_q4_ey .editorial_pick_num.num_02 { top: 3%; left: 50%; }
#left #collection_stack_scene_q4_ey .editorial_pick_num.num_03 { top: 53%; left: 3%; }
#left #collection_stack_scene_q4_ey .editorial_pick_num.num_04 { top: 53%; left: 50%; }
#left #collection_stack_scene_q4_ey .editorial_pick_num.num_detail { top: 3%; left: 3%; }
#left .collection_stack_caption { position: absolute; left: 5%; bottom: 5%; z-index: 5; color: #fff; text-align: left; pointer-events: none; }
#left .collection_stack_caption h4,
#left .collection_stack_caption h5 { font-size: 24px; font-weight: 400; }
#left .collection_stack_caption h5 { margin: 0 0 4px 0; }
#left .collection_stack_caption h4 { margin: 0; word-break: keep-all; text-transform: uppercase;}
#left .collection_text_box { padding: 18px 2px 0; }
#left .collection_text_box h3 { margin: 0 0 10px 0; font-size: 36px; font-weight: 700; letter-spacing: -0.02em; color: #000; }
#left .collection_text_box h4 { margin: 0; font-size: 16px; line-height: 1.7em; font-weight: 300; color: #333; word-break: keep-all; }
#left .collection_grid_box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
#left .collection_quote_box { margin-top: 32px; padding: 24px 22px; background-color: #f7f7f7; color: #000; text-align: left; }
#left .collection_quote_box h3 { margin: 0; font-size: 22px; line-height: 1.7em; font-weight: 700; letter-spacing: -0.01em; }
#left .collection_quote_box h4 { margin: 6px 0 0 0; font-size: 16px; font-weight: 400; color: #666; word-break: keep-all; }
#left .collection_quote_swipe_wrap { margin-top: 18px; }
#left .collection_quote_swipe_item { flex: 0 0 100%; min-width: 0; }
#left .collection_quote_swipe_image_box { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background-color: #fff; }
#left .collection_quote_swipe_image_box a { display: block; width: 100%; height: 100%; }
#left .collection_quote_swipe_image_box img { width: 100%; height: 100%; object-fit: cover; }
#left .collection_quote_swipe_control_area { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; pointer-events: none; z-index: 3; }
#left .collection_quote_swipe_control_button,
#left .look_swipe_control_button,
#left .rel_btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #222; font-size: 26px;
  line-height: 1; font-weight: 400; border: 0; border-radius: 0; box-shadow: none; pointer-events: auto; opacity: 1; padding: 0; }
#left .collection_quote_swipe_control_button:hover,
#left .look_swipe_control_button:hover,
#left .rel_btn:hover { background: #fff; color: #222; border: 0; }
#left .collection_quote_swipe_text_box { padding: 16px 0; }
#left .collection_quote_swipe_product_name { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; color: #000; }
#left .collection_quote_product_grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
#left .collection_quote_product_item { display: block; min-width: 0; }
#left .collection_quote_product_thumb { overflow: hidden; background-color: #efefef; aspect-ratio: 1 / 1.28; }
#left .collection_quote_product_thumb img { width: 100%; height: 100%; object-fit: cover; }
#left .collection_quote_product_info { padding-top: 8px; }
#left .collection_related_image_area { margin-top: 32px; overflow: hidden; }
#left .collection_related_image_area img { display: block; width: 100%; height: auto; }
#left .collection_quote_product_name_small { margin: 0 0 4px 0; font-size: 14px; line-height: 1.4; font-weight: 400; color: #000; word-break: keep-all; overflow: hidden; 
  text-overflow: ellipsis; white-space: nowrap; }

#left .collection_question_block_03 { margin-top: 80px; }
#left .collection_question_block_04 { padding: 0; }
#left .collection_focus_image_box { display: block; margin-top: 20px; overflow: hidden; aspect-ratio: 4 / 3; }
#left .collection_focus_image_box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
#left .collection_focus_image_box:hover img { transform: scale(1.025); }
#left .collection_focus_stack_scene { margin-top: 20px; overflow: visible; background-color: transparent; }
#left .collection_focus_stack_scene.collection_q4_stack_scene { height: 400vh; }
#left .collection_focus_stack_scene .collection_stack_sticky { aspect-ratio: 4 / 5; }
#left .collection_focus_stack_scene .collection_stack_item > a { display: block; width: 100%; height: 100%; }
#left .collection_focus_stack_scene .collection_stack_item > a img { width: 100%; height: 100%; object-fit: cover; }
#left .collection_focus_stack_scene .collection_stack_caption { left: 5%; bottom: 5%; }
#left .collection_question_block_04 .collection_focus_stack_scene .collection_stack_caption { color: #000; left: 3%; }

#left .collection_q4_grid_area { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; max-width: 100%; box-sizing: border-box; overflow: hidden; }
#left .collection_q4_grid_item { position: relative; display: block; overflow: visible; aspect-ratio: 4 / 5; width: 100%; }
#left .collection_q4_grid_item img { width: 100%; height: 100%; object-fit: cover; transition: none; }

/* 09. 공통 스와이프 */
#left .collection_quote_swipe_wrap,
#left .look_swipe_wrap,
#left .rel_wrap { position: relative; overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; }
#left .collection_quote_swipe_wrap img,
#left .look_swipe_wrap img,
#left .rel_wrap img { -webkit-user-drag: none; user-select: none; }
#left .collection_quote_swipe_list,
#left .look_swipe_list,
#left .rel_list { display: flex; transition: transform 0.25s ease; will-change: transform; }

/* 10. 좌측 룩 / 추천상품 */
#left .look_section_area { padding: 64px 0 0; }

#left .look_swipe_item { flex: 0 0 100%; }
#left .look_swipe_image_box { aspect-ratio: 4 / 5; overflow: hidden; }
#left .look_swipe_text_box { padding: 16px 2px 0; text-align: left; }
#left .look_swipe_text_box h4 { margin: 0 0 8px 0; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: #000; }
#left .look_swipe_text_box h5 { margin: 0; font-size: 16px; line-height: 1.7em; font-weight: 400; color: #555; word-break: keep-all; }
#left .look_swipe_control_area { position: absolute; top: 43%; left: 0; right: 0; transform: translateY(-50%); display: flex;
  align-items: center; justify-content: space-between; padding: 0 12px; pointer-events: none; z-index: 3; }
#left .look_swipe_current_text { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); min-width: 58px;
  padding: 4px 8px; background-color: rgba(17, 17, 17, 0.52); color: #ffffff; text-align: center; font-size: 11px; font-weight: 500; pointer-events: none; z-index: 5;
  opacity: 1; transition: opacity 0.2s ease; }
#left .look_swipe_wrap:hover .look_swipe_current_text { opacity: 0; }

/* 좌측 상품 픽 영역 */
#left .rel_area { padding: 26px 0 0; }
#left .rel_head h4 { margin: 0 0 14px 0; font-size: 16px; font-weight: 500; color: #000; text-align: left; }
#left .rel_item { flex: 0 0 calc((100% - 40px) / 4.5); min-width: 0; display: block; }
#left .rel_list { gap: 10px; position: relative; z-index: 1; }
#left .rel_item,
#left .rel_item a,
#left .collection_quote_product_item,
#left .collection_q4_grid_item a,
#left .collection_stack_item a,
#left .collection_focus_image_box,
#left .look_swipe_image_box a,
#right .product_card_item a { pointer-events: auto; }
#left .rel_thumb { position: relative; overflow: hidden; background-color: #f5f5f5; aspect-ratio: 1 / 1.28; }
#left .rel_item.is_soldout .rel_thumb img { filter: brightness(0.42); }
#left .rel_badge { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; text-shadow: 0 0 10px rgba(0,0,0,0.8); pointer-events: none; }
#left .rel_text { padding-top: 8px; text-align: left; }
#left .rel_brand { display: block; margin: 0 0 4px 0; font-size: 12px; font-weight: 400; color: #000; }
#left .rel_name { display: block; margin: 0 0 6px 0; font-size: 13px; line-height: 1.35em; font-weight: 400; color: #000; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#left .rel_price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 0; padding: 0; font-size: 12px; line-height: 1.35em; letter-spacing: -0.03em; }
#left .rel_current { color: #000; font-size: 13px; font-weight: 700; }
#left .rel_original { color: #888; font-size: 11px; font-weight: 500; text-decoration: line-through; }
#left .rel_sale { color: #d11111; font-size: 12px; font-weight: 800; }
#left .rel_review { color: #777; font-size: 11px; font-weight: 500; }
#left .rel_btn { position: absolute; top: 37%; transform: translateY(-50%); z-index: 30; pointer-events: auto; background: rgba(255,255,255,0.85); }
#left .rel_btn.is_disabled { opacity: 0.35; pointer-events: none; }
#left .rel_btn.prev { left: 0; }
#left .rel_btn.next { right: 0; }

/* 11. 공유 영역 */
#left .share_area { position: sticky; bottom: 20px; right: 10px; margin-left: auto; width: fit-content; display: flex; flex-direction: column; align-items: flex-end; z-index: 99; }
#left .share_open_button { width: 42px; height: 42px; background: #fff; border: 1px solid #dfdfdf; border-radius: 50%; padding: 8px; display:
  flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
#left .share_open_button img { width: 100%; height: 100%; object-fit: contain; }
#left .share_layer { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); z-index: 9999; align-items: center;
  justify-content: center; }
#left .share_layer.is_open { display: flex; }
#left .share_layer_box { position: relative; background: #fff; padding: 22px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); display: flex;
  flex-direction: column; gap: 8px; min-width: 300px; max-width: 90% }
#left .share_close_button { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 24px; color: #555; cursor: 
  pointer; z-index: 10; padding: 0; width: auto; height: auto; display: block; }
#left #copy_url_button_ey, #left #share_kakao_button_ey { width: 100%; border: none; padding: 12px 14px; cursor: pointer; background: transparent; display: flex;
  align-items: center; justify-content: center; gap: 8px; text-align: center; }
#left .kakao_img_icon, #left .url_img_icon { display: block; margin: 0; position: static; flex: 0 0 auto; }
#left .kakao_img_icon { width: 20px; height: 20px; }
#left .url_img_icon { width: 22px; height: 22px; }

/* 12. 우측 상품 영역 */
#right { position: relative; width: 64%; max-height: 100vh; display: flex; flex-direction: column; background-color: #fff; }
#right .right_scroll_area { flex: 1; overflow-y: auto; }

/* 우측 스티키 메뉴 */
#right .right_sticky_menu { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: flex-start;
  gap: 15px; padding: 10px 30px; background-color: #fff; border-bottom: 0; }
#right .right_filter_button { min-width: auto; padding: 5px 15px; border: 0; border-bottom: 2px solid transparent; color: #000;
  font-size: 0.9rem; font-weight: 700; transition: border-color 0.2s ease; }
#right .right_filter_button.is_active, #right .right_filter_button:hover { background-color: transparent; color: #000; border-color: #000; }
#right .right_menu_spacer { flex: 1; }
#right .right_brand_link h4 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: 0; }

/* 우측 상품 리스트 영역 */
#right .product_list_grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 15px; padding: 20px;
  box-sizing: border-box; max-width: 100%; width: 100%; }
#right .product_card_item { padding-bottom: 10px; position: relative; text-align: left; display: flex; flex-direction: column;
  justify-content: space-between; gap: 0; }
#right .product_card_image_box { position: relative; overflow: hidden; background-color: #f5f5f5; aspect-ratio: 1 / 1.36; }
#right .product_card_item.is_soldout .product_card_image_box img { filter: brightness(0.42); }
#right .product_badge { position: absolute; left: 50%; top: 50%; z-index: 11; transform: translate(-50%, -50%); color: #fff; font-size: 14px; font-weight: 800; text-align: center; white-space: nowrap; text-shadow: 0 0 10px rgba(0,0,0,0.75); pointer-events: none; }
#right .product_coupon_icon { position: absolute; bottom: 10px; left: 10px; width: 25px; height: 25px;
  background-image: url('https://img.icons8.com/?size=100&id=61837&format=png&color=ffffff');
  background-size: cover; background-repeat: no-repeat; z-index: 10; }
#right .product_card_text_box { display: flex; flex-direction: column; padding-top: 8px; height: auto; box-sizing: border-box; gap: 0; }
#right .product_brand_text { display: block; font-size: 0.85rem; font-weight: 500; color: #232323; padding-left: 10px;
  margin: 0 0 4px 0; height: 20px; line-height: 20px; }
#right .product_name_text { display: block; margin: 0 0 12px 10px; padding: 0; font-size: 0.85rem; font-weight: 400; text-align: left;
  line-height: 1.3em;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000111; word-break: keep-all; }
#right .product_price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin: 0 0 0 10px; padding: 0; font-size: 0.85rem; line-height: 1.35em; letter-spacing: -0.03em; }
#right .product_current { color: #000; font-size: 0.9rem; font-weight: 700; }
#right .product_original { color: #888; font-size: 0.78rem; font-weight: 500; text-decoration: line-through; }
#right .product_sale { color: #d11111; font-size: 0.85rem; font-weight: 800; }
#right .product_review { color: #777; font-size: 0.78rem; font-weight: 500; }
#right .product_more_button { grid-column: 1 / -1; background-color: #000; color: #fff; font-size: 1rem; font-weight: 700; text-transform: uppercase; 
  padding: 12px 60px; margin: 10px auto 0; text-align: center; max-width: 300px; }
#right .product_empty_text_box { grid-column: 1 / -1; padding: 64px 0; text-align: center; }
#right .product_empty_text_box h3 { font-size: 18px; font-weight: 600; color: #444; }
#right .product_card_item { align-self: start; }
/* #right .product_card_item,
#left .rel_item { content-visibility: auto; contain-intrinsic-size: 320px 460px; } */

/* 이벤트 영역 배너 모드 */
/* #wrapper_ey.is_event_banner_mode_ey #event_section { display: none !important; } */
#left .event_temp_banner_link { display: block; }
#left .event_temp_banner_image_box { overflow: hidden; padding: 20px; }
#left .event_temp_banner_image_box img { display: block; width: 100%; height: auto; }

/* FLOW SECTION */
#left .event_temp_banner_image_box { display: none; }
#left .flow_section_ey { width: 100%; overflow: hidden; }
#left .flow_track_ey { display: flex; width: max-content; animation: flow_move_left_ey 28s linear infinite; will-change: transform; }
#left .flow_section_ey:hover .flow_track_ey { animation-play-state: paused; }
#left .flow_item_ey { flex: 0 0 auto; width: 250px; aspect-ratio: 4 / 5; overflow: hidden; background-color: #e9e9e9; }
#left .flow_item_ey img { width: 100%; height: 100%; object-fit: cover; }
@keyframes flow_move_left_ey {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 6px)); }}

#left .flow_section_ey img { opacity: 1 !important; transform: none !important; }
#left .flow_item_ey a { display: block; width: 100%; height: 100%; }
/* 이벤트 표시 옵션 / FLOW */

/* 모션/페이드 */
.fade_text_ey { opacity: 0; transform: translateY(30px); transition: opacity 0.75s ease, transform 0.75s ease; will-change: opacity, transform; }
.fade_text_ey.is_show { opacity: 1; transform: translateY(0); }
.fade_text_ey.fade_delay_1,
.fade_text_ey.fade_delay_2,
.fade_text_ey.fade_delay_3 { transition-delay: 0s; }

/* 이미지 페이드 */
#left img.image_fade_ey,
#right img.image_fade_ey { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s ease; will-change: opacity, transform; }
#left img.image_fade_ey.is_show,
#right img.image_fade_ey.is_show { opacity: 1; transform: translateY(0); }

/* 모바일 스티키 스와이퍼 전환 */
#left .mobile_stack_nav_ey { display: none; }

/* Q1 제품 카드 (01_01~03) */
#left .pick_card_ey { position: relative; display: block; width: 100%; height: 100%; background-color: #fff; color: #000; text-align: left; container-type: inline-size; overflow: hidden; user-select: none; -webkit-user-select: none; }
#left .collection_stack_item .pick_card_img_ey { position: absolute; top: 4.48%; left: 11.07%; width: 77.73%; height: auto; object-fit: contain; }
#left .collection_stack_item .pick_card_img_ey:not([src]),
#left .collection_stack_item img[data-auto-cut-no]:not([src]) { visibility: hidden; }
#left .pick_card_name_ey { position: absolute; top: 6.4%; left: 6%; right: 9.6%; z-index: 2; margin: 0; font-size: 5.33cqw; line-height: 1.25em; font-weight: 600; letter-spacing: -0.02em; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#left .pick_card_desc_ey { position: absolute; top: 83%; left: 6%; right: 9.6%; z-index: 2; display: flex; align-items: flex-start; }
#left .pick_card_desc_ey h6 { flex: 0 0 29.9%; margin: 0; font-size: 2.93cqw; line-height: 1.18em; font-weight: 700; letter-spacing: -0.02em; color: #000; text-transform: uppercase; }
#left .pick_card_desc_text_ey { flex: 1 1 auto; min-width: 0; }
#left .pick_card_desc_text_ey h4 { margin: 0; font-size: 3.47cqw; line-height: 1.31em; font-weight: 500; letter-spacing: -0.02em; color: #000; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#left .pick_card_desc_text_ey h4 + h4 { margin-top: 1.47cqw; }
#left .pick_card_scene_ey .collection_stack_sticky { cursor: grab; border: 1px solid #ddd; box-sizing: border-box; }
#left .collection_stack_sticky { cursor: grab; user-select: none; -webkit-user-select: none; }
#left .pick_swipe_ey { position: relative; width: 100%; height: 100%; overflow: hidden; }
#left .pick_swipe_list_ey { display: flex; width: 100%; height: 100%; transition: transform 0.35s ease; }
#left .pick_swipe_item_ey { flex: 0 0 100%; width: 100%; height: 100%; }
#left .pick_swipe_nav_ey { position: absolute; top: 50%; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; transform: translateY(-50%); pointer-events: none; }

@media (max-width: 768px) {


/* 모바일 레이아웃 전환 */
#wrapper_ey { display: block; min-height: auto; }
#left, #right { width: 100%; max-height: none; overflow: visible; }
#left { border-right: 0; }
#right { margin-top: 35px; }
#right .right_scroll_area { overflow: visible; }

/* 좌측 스티키 메뉴 */
#left .left_sticky_menu { position: -webkit-sticky; position: sticky; top: 0; z-index: 120; padding: 0 10px; height: 76px; }
#left .left_sticky_menu_button { height: 52px; font-size: 1.5rem; flex: 1 1 0; max-width: none; }

/* 메인 비주얼 */
#left .top_visual_title_header { padding: 20px 20px 16px; }
#left .top_visual_text_area { padding: 22px 20px 40px; }
#left .top_visual_season_text { font-size: 24px; }
#left .top_visual_title_text { font-size: 100px; }
#left .top_visual_subtitle_text { font-size: 72px; }
#left .top_visual_desc_text { font-size: 36px; }

/* 좌측 인트로 배너 */
#left .intro_banner_area { padding: 34px 0 60px; line-break: anywhere; }
#left .intro_banner_text { font-size: 28px; }
#left .intro_banner_timer_text { font-size: 28px; }

/* 좌측 공통 패딩 */
#left .event_section_area,
#left .notice_section_area,
#left .look_section_area { padding:20px 0; }
#left .left_inner { padding-bottom: 0; }

/* 이벤트 영역 */
#event_section { padding: 60px 20px 60px 0; background-color: #f5f5f5; }
#left .event_section_area { margin-top: 0; padding: 0; }
#left .event_title_area h2 { margin: 0; font-size: 3.5rem; }
#left .event_title_area h3 { margin: 20px 0 0 0; font-size: 1.5rem; line-height: 1.7em; }
#left .event_card_list { margin-top: 30px; }
#left .event_card_text_box { padding: 16px 0 0 0; }
#left .event_card_text_box h4 { font-size: 1.7rem; line-height: 1.3em; }
#left .event_info_text_box { margin: 30px 0 20px 20px !important; }
#left .event_info_text_box h4 { margin: 20px 0; font-size: 1.7rem; }
#left .event_info_text_box h5 { font-size: 1.6rem; margin: 30px 0 -16px 0; }
#left .event_wide_banner_area { margin-top: 30px; }
#left .event_wide_banner_button { height: auto; margin: 10px auto 0; padding: 30px 0; font-size: 32px; }
#left .event_temp_banner_section { padding: 0; }
#left .flow_section_ey { padding: 34px 0; }
#left .flow_track_ey { animation-duration: 24s; }
#left .flow_item_ey { width: 300px; }

/* 쿠폰 영역 */
#left .coupon_box_area { width: 700px; max-width: 100%; height: 150px;  }
#left .coupon_discount_text { margin: 0; font-size: 46px; font-weight: 700; text-align: left; line-height: 1; }
#left .coupon_condition_row { display: inline-flex; align-items: center; white-space: nowrap; gap: 4px; font-size: 24px; margin-top: 10px; }
#left .coupon_condition_text, #left .coupon_divider_text, #left .coupon_timer_text { font-size: 24px; }
#left .coupon_download_button { width: 110px; height: 100%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: url('https://cdn-tgreen.bizhost.kr/phpskr/tgreen09/2025/06/18/HSH/img/coupon/img_icon.png') no-repeat center; background-size: 40px 40px; background-color: #000000; }
#left .coupon_comment_button { width: 700px; max-width: 100%; height: auto; margin: 10px auto 0; padding: 30px 0; font-size: 32px; }

/* 유의사항 */
#left .notice_section_area { position: relative; width: 100%; margin: 0; padding: 20px 0 20px 20px; }
#left .notice_toggle_button h4 { margin: 0; line-height: 30px; text-align: left; font-size: 26px; font-weight: 400; color: #1e1e1e; flex: 0 0 auto; }
#left .notice_toggle_icon { font-size: 26px; margin-left: 7px; }
#left .notice_toggle_detail_area { padding: 0; }
#left .notice_toggle_detail_area h5 { margin: 9px 0; font-size: 24px; font-weight: 300; line-height: 1.5em; color: #000; word-break: keep-all; }

/* 컬렉션 및 링크 */
#left .collection_section_area { padding: 0; }
#left .collection_title_area {margin: 70px 0 0;}
#left .collection_title_area h2 { margin: 0; font-size: 128px; }
#left .collection_question_label {font-size: 34px; }
#left .collection_question_title { font-size: 42px; line-height: 1.3em; }
#left #collection_stack_scene_q4_ey .editorial_pick_num { width: 48px; height: 48px; font-size: 28px; }
#left #collection_stack_scene_q4_ey .editorial_pick_label { min-height: 52px; padding: 0 18px; font-size: 24px; }
#left .collection_stack_sticky { top: 90px; }
#left .collection_stack_caption h4,
#left .collection_stack_caption h5 { font-size: 32px; font-weight: 500 !important; }
#left .collection_text_box { padding: 0; }
#left .collection_text_box h3 { font-size: 56px; margin: 20px 0 10px 0; }
#left .collection_text_box h4 { font-size: 28px; margin-bottom: 20px; line-height: 1.6em; }
#left .collection_quote_box { margin-top: 60px; }
#left .collection_related_image_area { margin-top: 60px; }
#left .collection_quote_box h3 { font-size: 32px; }
#left .collection_quote_box h4 { margin: 10px 0 0 0; font-size: 28px; line-height: 1.5em; }
#left .collection_quote_swipe_control_button, #left .look_swipe_control_button, #left .rel_btn { width: 60px; height: 60px; font-size: 60px; font-weight: 400; padding: 0; }
#left .collection_quote_swipe_product_name { font-size: 30px; }
#left .collection_quote_product_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#left .collection_quote_product_name_small { font-size: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#left .collection_question_block_03 { margin-top: 80px; }
#left .collection_focus_image_box { margin-top: 26px; aspect-ratio: 4 / 3; }
#left .collection_focus_stack_scene { margin-top: 26px; }
#left .collection_focus_stack_scene.collection_q4_stack_scene { height: 420vh; }
#left .collection_q4_grid_area { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 0; }

/* 우측 상단 */
#right .right_sticky_menu { position: -webkit-sticky; position: sticky; top: 0; z-index: 80; padding: 30px 16px; gap: 24px; background-color: #fff; }
#right .right_filter_button { padding: 0; font-size: 1.8rem; }
#right .right_brand_link h4 { margin: 0; font-size: 1.8rem; }

/* 상품 리스트 */
#right .product_list_grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0; }
#right .product_badge { font-size: 28px; }
#left .rel_badge { font-size: 24px; }
#right .product_card_item { width: 100%; padding-bottom: 50px; position: relative; text-align: left; display: flex; flex-direction: column; justify-content: space-between; gap: 0; }
#right .product_card_text_box { display: flex; flex-direction: column; padding-top: 15px; height: auto; box-sizing: border-box; gap: 0; }
#right .product_brand_text,
#right .product_name_text { font-size: 24px; font-weight: 400; text-align: left; white-space: normal; color: #000; word-break: keep-all; }
#right .product_brand_text { margin: 0 0 9px 0; padding: 2px 0; line-height: 1.3em; }
#right .product_name_text { margin: 10px 0 0; padding: 2px 0; line-height: 1.4em; }
#right .product_price { margin: 8px 0 0; font-size: 1.45rem; gap: 8px; }
#right .product_current { font-size: 26px; }
#right .product_original, #right .product_review { font-size: 1.25rem; }
#right .product_sale { font-size: 1.45rem; }
#right .product_coupon_icon { bottom: 11px; left: 11px; width: 50px; height: 50px; }
#right .product_more_button {  width: calc(100% - 0px); max-width: none; background-color: #000; color: #fff; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; 
 padding: 26px 24px; }

/* 룩 스와이프 */
#left .rel_area { margin-top: 22px; }
#left .rel_head h4 { margin: 0 0 12px 0; font-size: 26px; }

#left .rel_item { flex: 0 0 calc((100% - 30px) / 3.6); }
#left .look_swipe_current_text { font-size: 30px; }
#left .look_swipe_text_box h4 { font-size: 32px; }
#left .collection_quote_swipe_control_button, #left .look_swipe_control_button, #left .rel_btn { color: #000; }

#left .look_swipe_text_box h5 { font-size: 28px; }

/* 추천상품 */
#left .rel_brand,
#left .rel_name { display: block; font-size: 21px; font-weight: 400; }
#left .rel_name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#left .rel_price { margin-top: 8px; font-size: 19px; gap: 6px; }
#left .rel_current { font-size: 21px; }
#left .rel_original, #left .rel_review { font-size: 17px; }
#left .rel_sale { font-size: 19px; }

#left .collection_grid_box { grid-template-columns: 1fr; }

/* 공유 */
#left .share_area { display: none; }

/* 텍스트/가로 스크롤 보정 */
#wrapper_ey, #left, #right, #left *, #right * { min-width: 0; }
#left .top_visual_title_text { font-size: clamp(54px, 13vw, 100px); max-width: 100%; overflow-wrap: anywhere; }
#left .top_visual_subtitle_text { font-size: clamp(42px, 10vw, 72px); max-width: 100%; overflow-wrap: anywhere; }
#left .collection_title_area h2 { font-size: clamp(58px, 17vw, 128px); max-width: 100%; overflow-wrap: anywhere; }
#left .top_visual_desc_text,
#left .intro_banner_text,
#left .collection_question_title,
#left .collection_text_box h4,
#left .look_swipe_text_box h5 { max-width: 100%; overflow-wrap: break-word; word-break: keep-all; }
#left .coupon_box_area, #left .coupon_comment_button { width: 100%; }
#left .coupon_text_area { min-width: 0; flex: 1 1 auto; padding-left: 12px; }
#left .coupon_discount_text { font-size: clamp(34px, 6vw, 46px); }
#left .coupon_condition_row { max-width: 100%; font-size: clamp(18px, 4vw, 24px); white-space: normal; flex-wrap: wrap; row-gap: 3px; }
#left #collection_stack_scene_q4_ey .editorial_pick_label { max-width: calc(100% - 24px); white-space: normal; line-height: 1.25em; word-break: keep-all; }
#right .right_sticky_menu { flex-wrap: wrap; }
#right .right_filter_button { flex: 0 1 auto; white-space: nowrap; }
#right .right_menu_spacer { flex: 1 1 20px; }
#left .rel_brand, #left .rel_name, #left .collection_quote_product_name_small, #right .product_brand_text, #right .product_name_text { max-width: 100%; min-width: 0; }
#right .product_card_item, #right .product_card_text_box { min-width: 0; }

#left img.image_fade_ey,
#right img.image_fade_ey {transform: translateY(36px); transition-duration: 0.8s;}
#left img.image_fade_ey.is_show,
#right img.image_fade_ey.is_show {transform: translateY(0);}

#left .collection_product_map_box.collection_stack_scene,
#left .collection_focus_stack_scene.collection_q4_stack_scene { height: calc(125vw + 0px); min-height: 0; margin-top: 0; }
#left .collection_stack_sticky,
#left .collection_focus_stack_scene .collection_stack_sticky { position: sticky; top: 76px; width: 100%; height: auto; aspect-ratio: 4 / 5; overflow: hidden; background-color: #f3f3f3; }
#left .collection_stack_item { transform: none !important; opacity: 0; pointer-events: none; z-index: 1; transition: opacity 0.28s ease; }
#left .collection_stack_item.stack_01 { opacity: 1; z-index: 2; }
#left .collection_stack_item.is_mobile_stack_active { opacity: 1; pointer-events: auto; z-index: 10; }
#left .collection_stack_item.is_mobile_stack_active ~ .collection_stack_item.stack_01 { opacity: 0; }
#left .collection_stack_item img,
#left .collection_focus_stack_scene .collection_stack_item > a img { width: 100%; height: 100%; object-fit: cover; }
#left .mobile_stack_nav_ey { position: absolute; top: 43%; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; transform: translateY(-50%); pointer-events: none; }
#left .mobile_stack_button_ey { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; color: #000; 
  font-size: 60px; line-height: 1; pointer-events: auto; }
#left .look_swipe_current_text { display: none !important; }
#left .pick_swipe_nav_ey { display: none; }
#left .pick_card_name_ey { font-size: max(5.33cqw, 32px); }
#left .pick_card_desc_ey h6 { font-size: max(2.93cqw, 25px); }
#left .pick_card_desc_text_ey h4 { font-size: max(3.47cqw, 25px); }
#left .collection_question_block_04 { margin-top: 64px; padding: 0; }
}