/* ─────────────────────────────────────────────────────────────
   문성전자 — PC 스킨 반응형 덮어쓰기 (ms-responsive)
   2026-09-16 B안: 모바일 전용 스킨(m/) 대신 PC 스킨 한 벌을 반응형으로. 이 파일은 theme/basic/style.css 와
   ms-*.css 의 고정 폭(1200px)·2열 배치를 화면 폭에 따라 풀어 주는 "덮어쓰기 층"이며, 원본 규칙은 손대지 않는다.
   단계: ① 기반(컨테이너·헤더·GNB·푸터·플로팅바) ② 메인 ③ 상세 — 이후 목록·시뮬레이터·가이드·FAQ·신청서·회원.
   기기 판정을 PC 고정(TB_SET_DEVICE 'pc')으로 바꾸기 전까지는 PC 브라우저 폭을 줄일 때만 동작한다.
   ───────────────────────────────────────────────────────────── */

/* ① 기반 — 1240px 이하: 고정 폭 컨테이너를 유동 폭으로 */
@media (max-width:1240px){
  html,body{min-width:0 !important;overflow-x:hidden}
  #wrapper{min-width:0 !important}
  .cont_wrap,.cont_wrap2,.cont_inner,
  #ft.ms-ft .in,.ms-ql,.ms-vid,.ms-brief-wrap,.ms-faq-wrap,.ms-lh,.ms-ph,.ms-wrap{
    width:auto !important;max-width:1200px;margin-left:auto !important;margin-right:auto !important;
    padding-left:20px !important;padding-right:20px !important;box-sizing:border-box}
  .sop-header .sop-inner,#gnb.sop-gnb .sop-gnb-flex,.sop-gnb .allc_bd .con_bx,#mbn_wrap .mbn-ov-in,.ms-hero-in{max-width:100%}
  /* 메인 배너 슬라이더 — style.css min-width:1200px 해제. 2026-09-23 히어로 대신 배너(1932×814)로 교체하며 드러남 (전엔 히어로에 가려 미사용) */
  #mbn_wrap{min-width:0 !important;width:100% !important}
  .fxbar{min-width:0 !important}
  .fxbar.ms-fxbar .fxbar_cont{width:auto !important;max-width:none !important;padding:0 20px !important}
  .ms-sh{padding-left:0;padding-right:0}
  img{max-width:100%}
}

/* ① 기반 — 1024px 이하: 헤더 2줄, GNB 가로 스크롤 2줄, 2열 레이아웃 해제 */
@media (max-width:1024px){
  /* 헤더: 로고 + 회원 링크 한 줄, 검색은 다음 줄 전체 폭 */
  .ms-hd .sop-header{padding:10px 0}
  .ms-hd .sop-inner{flex-wrap:wrap;gap:10px 14px;padding:0 16px}
  .ms-hd .sop-search{order:3;flex:1 1 100%;max-width:none !important;margin:0}
  .ms-hd .sop-search input{height:42px !important}
  .ms-hd .sop-search button{top:2px !important;right:3px !important}
  .ms-hd .sop-hd-right{margin-left:auto}
  .ms-hd .sop-logo-txt strong{font-size:15px}
  .ms-hd .sop-logo-txt span{font-size:11px}

  /* GNB: 1줄 카테고리(가로 스크롤) + 2줄 메뉴(가로 스크롤) */
  .ms-hd .sop-gnb-flex{flex-wrap:wrap;padding:0 !important;min-height:0}
  .ms-hd .sop-gnb-left,.ms-hd .sop-gnb-right{flex:1 1 100%;display:flex;align-items:center;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 12px;min-height:46px}
  .ms-hd .sop-gnb-left::-webkit-scrollbar,.ms-hd .sop-gnb-right::-webkit-scrollbar{display:none}
  .ms-hd .sop-gnb-left > a,.ms-hd .sop-gnb-right a{flex:none;height:46px}
  .ms-hd .sop-gnb-left .sop-allcate{padding:0 12px 0 0;flex:none}
  .ms-hd .sop-gnb-right{border-top:1px solid rgba(255,255,255,.14);margin-left:0;padding-right:12px}
  .ms-hd .ms-tel{margin-left:auto}
  /* 전체 카테고리 드롭다운: 5열 → 2열 */
  .sop-gnb .allc_bd .con_bx{padding:0 16px}
  .sop-gnb .allc_bd .con_bx > ul{grid-template-columns:repeat(2,1fr);gap:0 24px}

  /* 상세: 이미지 열 / 옵션 열 세로 쌓기, 옵션 열 sticky·내부 스크롤 해제 */
  .vi_info{flex-direction:column !important;overflow:visible !important}
  /* 2026-09-18 삼성 [Mo] 요구: 옵션 → 비교표 → 전화상담/셀프구독 → AI 브리핑.
     왼쪽 열 래퍼를 풀어 갤러리·브리핑·옵션 열을 형제로 만든 뒤 브리핑만 맨 아래로 보낸다 (이 줄이 없으면 브리핑이 비교표 위로 올라온다) */
  .vi_info .ms-vi-left{display:contents}
  .vi_info .ms-brief-fold{order:3;margin-top:20px}
  .vi_info .vi_img_bx{width:100% !important;margin-right:0 !important;flex:none !important}
  .vi_info .vi_txt_bx{width:100% !important;position:static !important;max-height:none !important;overflow:visible !important;padding-right:0 !important;margin-top:20px}
  .vi_txt_bx .vitit{min-height:0}
  .ms-rv-sum{position:static !important}

  /* 메인 */
  .ms-yt{grid-template-columns:1fr}
  .ms-yt-list{height:auto !important;min-height:0 !important}
  .ms-ig{grid-template-columns:repeat(3,1fr)}
  .ms-vid-in{grid-template-columns:1fr;gap:24px}
  .ms-sh{flex-wrap:wrap;gap:12px;margin-bottom:18px}
  .ms-sh .tt{max-width:100%}
  .ms-sh .lead{display:none}
  .ms-sh .ctl{width:100%;padding-bottom:0;overflow-x:auto;scrollbar-width:none}
  .ms-sh .ctl::-webkit-scrollbar{display:none}
  .ms-sh .bestca_tab li{flex:none}

  /* 푸터 */
  #ft.ms-ft .ms-ft-cs{grid-template-columns:1fr;gap:14px;padding:18px}
  #ft.ms-ft .ms-ft-body{grid-template-columns:1fr 1fr;gap:28px}
  #ft.ms-ft .ms-ft-brand + .ms-ft-info{grid-column:1/-1}
  #ft.ms-ft .ms-ft-body > div:first-child{grid-column:1/-1}
}


/* ① 기반 — 1024px 이하: 히어로 태그·플로팅바 압축·상세 갤러리 폭 (768 이하와 공통) */
@media (max-width:1024px){
  /* 히어로: 가격 태그가 제품을 가리지 않게 제품 아래 중앙으로, 색상 문구는 태그 아래
     2026-09-22 — 태그를 bottom:-92px 로 띄우던 방식은 태그(88px)와 이미지 사이가 4px, 색상 문구와는 2px 밖에
     안 남아서 글꼴이 조금만 커지거나 '카탈로그가' 줄이 접히면 바로 제품 이미지를 덮었다 (삼성 피드백).
     이제 .ms-prod 를 세로 flex 로 만들어 이미지 → 가격 태그 → 색상 문구가 흐름대로 쌓인다 —
     태그가 얼마나 커지든, 제품 이미지가 정사각이 아니어도 겹치지 않는다.
     대신 위치 기준을 bottom 에서 top 으로 옮긴다(무대 높이를 키워도 이미지·흰 카드 정렬이 그대로). */
  .ms-hero .ms-stage{height:460px !important}
  .ms-hero .ms-stage .floor{width:300px !important;height:300px !important;top:22px;bottom:auto}
  .ms-hero .ms-prod{width:240px !important;top:68px;bottom:auto !important;display:flex;flex-direction:column;align-items:center}
  .ms-hero .ms-prod .ms-tag{position:static !important;margin-top:10px;min-width:200px;padding:10px 14px 9px;text-align:center}
  .ms-hero .ms-prod .ms-tag:after{display:none}
  .ms-hero .ms-prod .ms-tag .v{font-size:22px}
  .ms-hero .ms-prod .ms-sw{position:static !important;margin-top:8px;transform:none !important}
  .ms-hero .ms-dots{bottom:14px}


  /* 상세 갤러리: 세로 쌓임에서 무대가 화면 폭만큼 커지지 않게 */
  .ms-gal .ms-gal-stage{max-width:480px;margin:0 auto}
  .ms-gal .ms-gal-rail{justify-content:center}

  /* 플로팅 상담바 (가이드 ⑦ 문구·하단 고정·접기 없음 유지) — 3줄 압축: [전화 · AI 상담] / [이름 | 연락처 | 신청하기] / [동의 · 자세히] ≈ 140px */
  .fxbar.ms-fxbar .fxbar_cont{height:auto !important;display:block !important;padding:8px 12px 10px !important}
  .fxbar.ms-fxbar .cstel{display:flex !important;align-items:center;gap:8px;padding:0 0 8px !important;border:0 !important;min-width:0;height:auto !important}
  .fxbar.ms-fxbar .cstel:before{width:28px;height:28px;background-size:14px 14px;flex:none}
  .fxbar.ms-fxbar .cstel .stxt{font-size:11px !important;margin:0 !important;white-space:nowrap}
  .fxbar.ms-fxbar .cstel .tel{font-size:17px !important;margin:0 !important;white-space:nowrap}
  .fxbar.ms-fxbar .formbx{height:auto !important;min-width:0}
  .fxbar.ms-fxbar .formbx form{display:grid;grid-template-columns:1fr 1.35fr auto;grid-template-areas:"name tel btn" "agree agree ai";gap:6px 6px;align-items:center}
  .fxbar.ms-fxbar .formbx .wrtbx{display:contents !important}
  .fxbar.ms-fxbar .wrtbx input[type=text]{height:40px !important;line-height:40px !important;padding:0 12px !important;font-size:14px !important;color:#1b2440 !important;width:100% !important;min-width:0;box-sizing:border-box}
  .fxbar.ms-fxbar .formbx .fxname{grid-area:name}
  .fxbar.ms-fxbar .formbx .fxtel{grid-area:tel;border-left:0 !important}
  .fxbar.ms-fxbar .formbx .formbtn{grid-area:btn;width:auto !important;height:40px !important;line-height:40px !important;font-size:14px !important;padding:0 16px !important;border-radius:12px !important;float:none !important;margin:0 !important}
  .fxbar.ms-fxbar .fxagree{grid-area:agree;margin:0 !important;padding:0 0 0 22px !important;height:auto !important;line-height:1.3 !important;font-size:12px !important;display:inline-block}
  .fxbar.ms-fxbar .fxagree input[type=checkbox]{top:1px}
  .fxbar.ms-fxbar .fxbt_more{grid-area:agree;justify-self:end;font-size:12px;align-self:center;margin-right:6px}
  .fxbar.ms-fxbar .sop-ai-fx{grid-area:ai;height:32px;padding:0 12px;font-size:12.5px;position:static !important;margin:0 !important;justify-self:end}
  .fxbar .fxbBtn{display:none !important}
  /* 플로팅바 높이만큼 본문 여백 */
  #ft.ms-ft{padding-bottom:160px !important}
  a.sop-totop{bottom:160px !important;right:12px !important}

}

/* ② 메인·기반 — 768px 이하 (태블릿 세로·폰) */
@media (max-width:768px){
  .cont_wrap2{margin-top:48px !important;margin-bottom:48px !important}
  .cont_wrap,.cont_wrap2,.cont_inner,#ft.ms-ft .in,.ms-ql,.ms-vid,.ms-brief-wrap,.ms-faq-wrap,.ms-lh,.ms-ph,.ms-wrap{padding-left:16px !important;padding-right:16px !important}
  .cont_inner{padding-top:20px !important;padding-bottom:48px !important;min-height:0}

  /* 헤더 */
  .ms-hd .sop-logo-mark{width:42px;height:42px;font-size:8px}
  .ms-hd .sop-logo-img{height:42px !important;width:auto;max-height:none}   /* 기본 배지와 같은 크기 (2026-09-22) */
  .ms-hd .sop-auth{gap:8px;font-size:12px}
  .ms-hd .sop-auth a:first-of-type:not([target="_blank"]):before{display:none}

  /* 카테고리 퀵링크: 가로 스크롤 */
  .ms-ql{justify-content:flex-start !important;flex-wrap:nowrap !important;overflow-x:auto;gap:10px !important;padding-top:20px !important;padding-bottom:6px !important;scrollbar-width:none}
  .ms-ql::-webkit-scrollbar{display:none}
  .ms-ql a{width:86px;flex:none}
  .ms-ql a .plate{width:74px;height:74px;border-radius:22px}
  .ms-ql a .plate img{width:54px;height:54px}
  .ms-ql a .nm{font-size:12px;margin-top:8px}

  /* 섹션 헤더·카드 캐러셀 */
  .ms-sh h2{font-size:22px}
  .ms-sh h2 small{font-size:13px}
  .ms-sh-foot .sop-progress{flex:1 1 auto !important;width:auto}
  .pr_slide{margin-left:-12px}
  .pr_slide .prli,.pr_slide .slick-slide > div > *{margin-left:12px}
  /* 캐러셀 칸이 .pr_slide .prli{height:460px} 고정이라 폰에서 카드(약 420px) 아래가 비었다 — 케이디엘 sop-responsive 와 같은 규칙.
     slick-track 을 flex 로 만들어 칸이 내용 높이를 따르되 서로 같은 높이. 769 이상은 460px 고정 그대로 */
  .pr_slide .slick-track{display:flex !important;align-items:stretch}
  .pr_slide .prli{height:auto !important}

  /* 영상·인스타 */
  .ms-ig{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}   /* minmax(0,…) — 1fr 은 내용 최소 폭을 따라 두 칸이 163/187 로 갈렸다(2026-09-29) */
  .ms-vid-copy h3{font-size:22px}
  .ms-vid{margin-top:48px !important;margin-bottom:48px !important}

  /* 푸터 */
  #ft.ms-ft .ms-ft-body{grid-template-columns:1fr;gap:22px;padding:32px 0 24px}
  #ft.ms-ft .ms-ft-info{grid-template-columns:1fr;gap:6px}
  #ft.ms-ft .ms-ft-info dt{width:84px}
  #ft.ms-ft .ms-ft-bot{flex-direction:column;align-items:flex-start;gap:12px}
  #ft.ms-ft .ms-ft-cs .tel b{font-size:24px}
  #ft.ms-ft .ms-ft-cs .acts{flex-wrap:wrap}

  /* 상세 */
  #device_change{display:none !important}   /* "모바일 버전으로 보기" — 반응형에선 의미 없음 (기기 고정 후엔 출력 자체가 안 됨) */
  .ms-brief-fold .ms-brief-wrap .sab{margin:0 !important}
  .vi_tab.ms-vtab{overflow-x:auto;scrollbar-width:none}
  .vi_tab.ms-vtab::-webkit-scrollbar{display:none}
  .vi_tab.ms-vtab ul{display:flex !important;flex-wrap:nowrap !important;width:max-content !important;min-width:100%}
  .vi_tab.ms-vtab li{flex:none}
  .vi_tab.ms-vtab li{padding:0 14px !important;font-size:13px !important;height:36px !important;line-height:36px !important}
  .vi_txt_bx .vitit{font-size:20px;padding-bottom:16px}
  .vi_txt_bx .vitit .vimodel{font-size:13px;margin-top:10px}
  .ms-cmpi .tb{grid-template-columns:108px 1.2fr 1fr}   /* 2026-09-18: AI 구독 열을 일시불보다 넓게 (삼성 피드백 3번) → 2026-09-28 평강 기준으로 AI 구독이 앞 칸 */
}

/* ② 폰 — 640px 이하: 히어로 무대 축소 (위 1024 블록과 같은 top 기준) */
@media (max-width:640px){
  /* 메인 배너(#mbn_wrap) 화살표 숨김·인디케이터 위치는 2026-09-29 현성식 KV 로 css/sop-main.css 767 분기가 맡는다(세 몰 공통) */
  .ms-hero .ms-stage{height:400px !important}
  .ms-hero .ms-stage .floor{width:250px !important;height:250px !important;top:20px;bottom:auto}
  .ms-hero .ms-prod{width:200px !important;top:56px}
}

/* ② 폰 — 480px 이하 미세 조정 */
@media (max-width:480px){
  .ms-hd .sop-logo-txt strong{font-size:14px}
  .ms-hd .sop-logo-txt span{display:none}
  .ms-hd .sop-auth .sep{display:none}
  .ms-hd .sop-auth a[target="_blank"]{display:none}
  .ms-sh h2{font-size:20px}
  .ms-ig{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ③ 회원·고객센터 2열(사이드 메뉴 #aside + 본문 #con_lf) 페이지 — 1024px 이하 세로 쌓임
   대상: 마이페이지·구독 신청 내역·포인트·찜·쿠폰·1:1문의·리뷰·회원탈퇴·주문조회 (aside_my/aside_cs include 스킨 19개) */
@media (max-width:1024px){
  #aside{float:none !important;width:100% !important;margin:0 0 18px}
  #aside .aside_hd{height:auto;padding:14px 16px;text-align:left;border-radius:14px}
  #aside .aside_hd p{display:inline-block;margin-right:8px;line-height:1.3}
  #aside .aside_name{display:none}
  /* 메뉴(dl)를 가로 스크롤 칩으로 */
  #aside .aside_my,#aside .aside_cs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:10px 0 0;padding:2px 0 6px;border:0 !important;scrollbar-width:none;white-space:nowrap}
  #aside .aside_my::-webkit-scrollbar,#aside .aside_cs::-webkit-scrollbar{display:none}
  #aside .aside_my dt{display:none}
  #aside .aside_cs dt{display:block;flex:none;height:auto !important;line-height:1 !important;border:0 !important;margin:0 !important;padding:0 !important;position:static}
  #aside .aside_cs dt:after,#aside .aside_cs dt:before{display:none !important}
  #aside .aside_my dd,#aside .aside_cs dd{margin:0;padding:0;border:0;flex:none}
  #aside .aside_my dd a,#aside .aside_cs dt a,#aside .aside_cs dd a,#aside .aside_cs dd li a{display:inline-block;height:34px;line-height:34px !important;padding:0 14px !important;border:1.5px solid #e6e9f2;border-radius:9999px;background:#fff !important;color:#1b2440 !important;font-size:13px;font-weight:700}
  #aside .aside_my dd a.on,#aside .aside_my dd a:hover,#aside .aside_cs dt.on a,#aside .aside_cs dt a:hover{border-color:#1a6ad0;background:#eaf3ff !important;color:#0f1c6e !important}
  #con_lf{width:100% !important;float:none !important;display:block;margin-bottom:40px}
  /* 페이지 제목 */
  .pg_tit{padding:10px 0 22px;text-align:left}
  .pg_tit span{font-size:24px;letter-spacing:-1px}
  .pg_tit .pg_nav{position:static;display:block;margin-bottom:6px;font-size:12px;color:#5d6680}
  .pg_tit .pg_stxt{font-size:13px;margin-top:6px}
  /* 표: 고정 열 표는 가로 스크롤, 폼 입력칸은 폭 제한 */
  #con_lf .tbl_head01,#con_lf .tbl_head02,#con_lf .tbl_head03,#con_lf .tbl_frm01,.cont_inner .tbl_head01,.cont_inner .tbl_frm01{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #con_lf .tbl_head01 table,#con_lf .tbl_head02 table,#con_lf .tbl_head03 table{min-width:560px}
  #con_lf .tbl_frm01 table{width:100%}
  #con_lf .frm_input,#con_lf .frm_textbox,.cont_inner .frm_input,.cont_inner .frm_textbox{max-width:100%;box-sizing:border-box}
  #smb_my_act ul{float:none;display:flex;flex-wrap:wrap;gap:6px}
  #smb_my_act li{float:none;margin:0}
  #smb_my_ov,#smb_my_od{margin-bottom:32px}
  .btn_confirm{margin-top:24px}
}
@media (max-width:768px){
  #aside .aside_hd{padding:12px 14px}
  .pg_tit span{font-size:22px}
  #con_lf .tbl_frm01 th{width:96px;font-size:13px}
  #con_lf .tbl_frm01 td{font-size:13px}
}

/* ③ 회원 페이지 세부 — 768px 이하: 마이페이지 회원정보 표(4열→세로), 신청 내역 카드(absolute→grid), 신청서 상품 요약 */
@media (max-width:768px){
  #smb_my_tbl,#smb_my_tbl tbody,#smb_my_tbl tr{display:block;width:100%}
  #smb_my_tbl th,#smb_my_tbl td{display:block;width:auto !important;text-align:left;padding:4px 0 !important;border:0 !important;background:none !important}
  #smb_my_tbl th{padding-top:12px !important;font-size:12px;color:#5d6680;font-weight:700}
  #smb_my_tbl tr{border-bottom:1px dotted #e6e9f2;padding-bottom:8px}
  .rtl_pr,.rtl_pr2{height:auto !important;padding:14px !important;display:grid;grid-template-columns:88px 1fr;gap:8px 12px;align-items:start;border-radius:14px}
  .rtl_pr .img,.rtl_pr2 .img{position:static !important;width:88px !important;height:88px !important;grid-row:1/3}
  .rtl_pr > *:not(.img):not(.pinfo2):not(.price),.rtl_pr2 > *:not(.img):not(.pinfo2):not(.price){grid-column:2}
  .rtl_pr .pname,.rtl_pr2 .pname{font-size:15px !important;margin-bottom:4px !important;line-height:1.4 !important}
  .rtl_pr .pinfo1,.rtl_pr2 .pinfo1{margin-top:0 !important;font-size:12.5px !important}
  .rtl_pr .pinfo2,.rtl_pr2 .pinfo2{position:static !important;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px}
  .rtl_pr .pinfo2 span,.rtl_pr2 .pinfo2 span{margin:0 !important;height:24px !important;line-height:24px !important;font-size:12px !important;padding:0 10px !important}
  .rtl_pr .price,.rtl_pr2 .price{position:static !important;grid-column:1/-1;text-align:left !important;display:flex;align-items:baseline;gap:8px;font-size:13px !important;padding-top:6px;border-top:1px dotted #e6e9f2}
  .rtl_pr .price .mpr,.rtl_pr2 .price .mpr{font-size:22px !important;margin:0 0 0 auto !important}
  .rtl_empty{height:auto !important;line-height:1.5 !important;padding:40px 0}
  .rtlf_pr{display:block;border-width:3px}
  .rtlf_pr .rtlf_img{width:100% !important;height:auto !important;text-align:center;padding:12px 0 0}
  .rtlf_pr .rtlf_img img{width:180px !important;height:180px !important}
  .rtlf_pr .rtlf_info{width:100% !important;padding:14px 16px 18px !important;box-sizing:border-box}
}

/* ④ 목록 상단 밴드(.ms-lh) — 768px 이하 1열: 제목·설명·버튼 위, 대표 누끼 아래 중앙 */
@media (max-width:768px){
  .ms-lh{grid-template-columns:1fr !important;gap:14px !important;padding:22px 18px 20px !important;border-radius:18px;min-height:0 !important}
  .ms-lh h2{font-size:24px !important;gap:10px}
  .ms-lh h2 small,.ms-lh .cnt{font-size:12px}
  .ms-lh p{font-size:13px;max-width:none}
  .ms-lh .acts{margin-top:12px}
  .ms-lh .acts a{flex:1 1 auto;justify-content:center}
  .ms-lh .fig{width:150px !important;height:130px !important;margin:0 auto;order:-1}
  .sub_tree.ms-lh-cats{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;padding-bottom:4px !important}
  .sub_tree.ms-lh-cats::-webkit-scrollbar{display:none}
  .sub_tree.ms-lh-cats li{flex:none}
  .tab_sort.ms-lh-bar{flex-wrap:wrap;gap:8px 12px}
}

/* ⑤ 로그인·회원가입 (css/ms-member.css 카드 폭) — 폰 폭 */
@media (max-width:520px){
  #login_fld.login_wrap{width:auto !important;max-width:440px;padding:26px 20px 22px !important;margin-bottom:48px !important}
  #fregister,#fregisterform{margin-bottom:48px !important}
  #fregisterform .tbl_frm01 th{width:92px !important;font-size:13px}
  #fregisterform .frm_input{width:100% !important;max-width:100%}
  .register_result_wrap,.reg_result{padding:24px 16px}
}

/* 0원딜 GNB 골드 헤어라인 — 좁은 폭은 줄 높이 46px 라 위치만 맞춘다 (css/ms-header.css .ms-gnb-zero, 2026-09-28) */
@media (max-width:1024px){
  .ms-hd .sop-gnb-left > a.ms-gnb-zero:after{bottom:8px}
}

/* ⑤ 팝업 레이어 (lib/popup.inc.php, 2026-09-29) — 관리자 팝업은 'PC'·'모바일'·'공통'으로 따로 등록된다.
   반응형 전환 후에는 폰도 PC 스킨을 쓰므로 PC 파일이 'mobile' 팝업까지 출력하고, 폭으로 한쪽만 보인다.
   display 는 !important 를 쓰지 않는다 — 닫기·24시간 버튼이 인라인 display:none 으로 숨긴다. */
.hd_pops.sop-pop-mobile{display:none}
@media (max-width:767px){
  .hd_pops.sop-pop-mobile{display:block}
  .hd_pops.sop-pop-pc{display:none}
  /* 관리자 입력 좌표·크기(px)는 폰 화면 밖으로 나간다 — 가운데 90% 폭으로 (m/popup.inc.php 와 같은 모양) */
  .hd_pops{left:5% !important;right:5%;top:12px !important;max-width:90%;box-sizing:border-box}
  .hd_pops_con{width:auto !important;height:auto !important;max-height:70vh;overflow:auto}
  .hd_pops_con img{max-width:100%;height:auto}
}

/* ⑦ 회원 비밀번호 확인(bbs/member_confirm.php — 회원정보 수정 전) — style.css #mb_confirm{width:600px} 고정이라
   폰에서 제목이 잘리고 비밀번호 입력칸·확인 버튼이 화면 밖으로 나가 회원정보 수정으로 넘어갈 수 없었다(2026-09-29 평강 390px 실측, 케이디엘 sop-responsive ⑦ 과 같은 규칙).
   아이디 줄 / 비밀번호·입력칸·확인 줄 두 줄 격자로 */
@media (max-width:767px){
  #mb_confirm{width:auto !important;padding:32px 0 56px}
  #mb_confirm fieldset{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:18px 16px;text-align:left}
  #mb_confirm #mb_confirm_id{grid-column:2 / -1;margin:0}
  #mb_confirm label{margin:0}
  #mb_confirm .frm_input{width:100% !important;min-width:0;box-sizing:border-box}
}

/* 케이디엘 sop-responsive ⑧ 과 같은 규칙 — 게시글 보기(bbs/skin/basic/read.php) — 첨부·본문 이미지가 width="730" height="…" 속성으로 나온다.
   ms-responsive ① img{max-width:100%} 로 폭은 줄지만 높이 속성은 남아 사진이 세로로 늘어났다(2026-09-29 390px 가짜 글 실측: 358×1200).
   속성은 CSS 보다 약하므로 height:auto 한 줄로 비율이 돌아온다 */
@media (max-width:1240px){
  .tbl_frm01 td img,.tbl_frm02 td img{height:auto}
}

/* 케이디엘 sop-responsive ⑥ 과 같은 규칙 — 게시판 목록(bbs/skin/basic/list.php): 번호·작성자·파일·조회·등록일 칸이 폭을 먼저 차지해
   제목 칸이 한 글자 폭으로 눌려 세로로 흘렀다(2026-09-29 390px 가짜 행 실측). 폰에서는 표를 풀어 줄마다 제목(전체 폭) + 작성자·등록일만. 관리자 선택 칸·번호·파일·조회는 숨김 */
@media (max-width:767px){
  form[name=fboardlist] .tbl_head01 colgroup,
  form[name=fboardlist] .tbl_head01 thead{display:none}
  form[name=fboardlist] .tbl_head01 table,
  form[name=fboardlist] .tbl_head01 tbody{display:block;width:100%;min-width:0 !important}
  form[name=fboardlist] .tbl_head01 tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:14px 2px;border-bottom:1px solid #e6e9f2}
  form[name=fboardlist] .tbl_head01 td{display:none;border:0 !important;padding:0 !important;background:none}
  form[name=fboardlist] .tbl_head01 td.tal{display:block;flex:1 1 100%;font-size:14px;line-height:1.45;text-align:left}
  form[name=fboardlist] .tbl_head01 td.tal + td,
  form[name=fboardlist] .tbl_head01 td:last-child{display:block;font-size:12px;color:#8a93a8}
  form[name=fboardlist] .tbl_head01 td.empty_table{display:block;flex:1 1 100%;text-align:center;padding:40px 0 !important}
}

/* 케이디엘 sop-responsive ⑩ 과 같은 규칙 (2026-09-29 폰 폭 검수) — 장바구니 8칸 표가 358px 에 눌려 머리글이 접혔다 → 이 표만 가로 스크롤
   (tbl_head02 는 구독 신청서도 쓰므로 #sod_bsk_list 로 좁힘, 빈 장바구니는 머리글 숨김). 약관동의 '전체 동의' 체크박스만 윗줄에 남던 것 → 체크박스 + 라벨 한 줄 */
@media (max-width:767px){
  #sod_bsk_list .tbl_head02{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #sod_bsk_list .tbl_head02 table{min-width:720px}
  #sod_bsk_list .tbl_head02 .td_name{min-width:170px}
  #sod_bsk_list .tbl_head02 table:has(td.empty_table){min-width:0}
  #sod_bsk_list .tbl_head02 table:has(td.empty_table) thead{display:none}
  #fregister .fregister_agree{display:flex;align-items:flex-start;gap:8px}
  #fregister .fregister_agree input[type=checkbox]{flex:none;margin:3px 0 0}
  #fregister .fregister_agree label{flex:1;min-width:0;margin:0}
}

/* 메인 섹션 간격 (2026-09-29, 평강 pk-responsive.css 와 같은 규칙) — sop-main.css(.cont_wrap2 위 64 · 아래 24)에 위 ② 의 바깥 48+48 !important 가 더해져
   폰에서 섹션 사이가 136px 였다(390px 실측, 네 곳 모두). 섹션 위 여백 40 하나로 */
@media (max-width:768px){   /* 768(아이패드 세로)도 — sop-main.css 가 768 이하를 폰으로 본다 */
  #container > .cont_wrap2{margin-top:0 !important;margin-bottom:0 !important;padding-top:40px;padding-bottom:0}
  #container > .cont_wrap2.sop-blog{padding-bottom:24px}
}

/* 케이디엘 sop-responsive ⑬ 과 같은 규칙 (2026-09-29) — 찜한상품(theme/basic/wish.skin.php, 세 몰 같은 파일): style.css 가 사진 + 상품명 칸 502 + 가격·버튼 칸 300 고정이라
   1024 이하에서 칸이 li 밖으로 나가 상품명이 잘리고 '삭제' 버튼이 화면 밖이었다. 사진 왼쪽 · 오른쪽에 상품명 → 가격 → 버튼을 쌓는 카드로 */
@media (max-width:1024px){
  .wishpr li dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 16px;align-items:start;padding:16px}
  .wishpr li dt{position:static;width:120px;height:120px;grid-row:1 / 3}
  .wishpr li dd,.wishpr li dd.lbx,.wishpr li dd.rbx{float:none;width:auto;height:auto;padding:0;min-width:0}
  .wishpr li .pname{margin-top:6px;font-size:15px;line-height:1.4}
  .wishpr li dd.rbx{border-left:0;border-top:1px solid #eaeaea;margin-top:12px;padding-top:10px}
  .wishpr li .btnbx{position:static;margin-top:10px}
}
@media (max-width:767px){
  .wishpr li dl{grid-template-columns:88px minmax(0,1fr);gap:0 12px;padding:14px}
  .wishpr li dt{width:88px;height:88px}
  .wishpr li .pname{font-size:14px}
  .wishpr li .price1 .mpr,.wishpr li .price2 .spr{font-size:17px}
}

/* 구독 신청서 고객정보(theme/basic/rentalform.skin.php #sod_fin_orderer, 2026-09-29) — 항목 이름 칸이 col.w160 고정이라 폰에서 입력칸이 158px 였다.
   767 이하는 이름을 입력칸 위로(케이디엘·평강 신청서와 같은 배치). 숨김 행(인라인 display:none)은 !important 를 쓰지 않아 그대로 숨는다 */
@media (max-width:767px){
  #sod_fin_orderer .tablef,#sod_fin_orderer .tablef tbody{display:block;width:100%}
  #sod_fin_orderer .tablef colgroup{display:none}
  #sod_fin_orderer .tablef tr{display:block;padding:14px 0;border-bottom:1px solid #e6e9f2}
  #sod_fin_orderer .tablef th,#sod_fin_orderer .tablef td{display:block;width:auto;padding:0 !important;border:0 !important;background:none !important;text-align:left;height:auto}
  #sod_fin_orderer .tablef th{margin-bottom:6px;font-size:13px;line-height:1.4;min-height:0}
  #sod_fin_orderer .tablef .frm_input,#sod_fin_orderer .tablef .frm_textbox{width:100% !important;max-width:none;box-sizing:border-box}
  #sod_fin_orderer .tablef .frm_input{height:48px;line-height:46px}   /* 30px 는 손가락으로 누르기 작다 — 케이디엘·평강 신청서와 같은 48 (2026-09-29 스타일 검수에서 44→48) */
  #sod_fin_orderer .tablef .frm_input,#sod_fin_orderer .tablef .frm_textbox{font-size:16px}   /* 16px 미만이면 아이폰이 입력칸을 누를 때 화면을 확대한다(케이디엘·평강과 같게) */
}

/* 헤더 검색창 글자 16px (2026-09-29, 케이디엘 sop-responsive ⑭ 와 같은 규칙) — 16px 미만이면 아이폰이 입력칸을 누를 때 화면을 확대한다 */
@media (max-width:1024px){   /* 아이패드도 16px 미만이면 확대한다 — 태블릿 폭까지 */
  input[name=ss_tx]{font-size:16px !important}
  /* 전 페이지 입력칸 한 번에 (2026-09-29) — 로그인·회원가입·회원정보 찾기·비밀번호 확인·탈퇴·글쓰기·시뮬레이터 정렬·상세 카드 선택 등 세 몰 스캔에서 12~15px 가 남아 있었다.
     글자 입력칸·선택 상자·쓸 수 있는 여러 줄 입력칸은 전부 16px(약관 본문처럼 읽기 전용 textarea 는 제외) */
  input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=search],input[type=url],input[type=date],input:not([type]),select,textarea:not([readonly]){font-size:16px !important}
  /* 게시판 검색(bbs/skin/basic·gallery·webzine list.php form[name=searchform]) — 선택 상자도 16px 미만이면 확대된다 */
  form[name=searchform] input[name=stx],form[name=searchform] select[name=sfl]{font-size:16px !important}
  /* 16px 로 키우면 입력칸 폭(글자 수 기준)이 늘어 검색 버튼이 다음 줄로 밀렸다 → 한 줄 flex */
  form[name=searchform] .bottom_sch{display:flex;align-items:center;justify-content:center;gap:6px}
  form[name=searchform] .bottom_sch input[name=stx]{flex:1 1 auto;min-width:0;width:auto !important;max-width:240px;margin:0 !important}
  form[name=searchform] .bottom_sch select,form[name=searchform] .bottom_sch input[type=submit]{flex:none;margin:0 !important}
}

/* 태블릿 폭(768·1024) 검수 (2026-09-29, 케이디엘 sop-responsive ⑮ 와 같은 규칙) — sop-main.css 가 768 이하를 폰 2열로 보아
   768(아이패드 세로)에서 목록·검색·0원딜·기획전·베스트가 카드 355px 2열(목록 13,000px 대), 시뮬레이터는 1023 까지 2열이었다 */
@media (min-width:600px) and (max-width:768px){
  .pr_desc ul,.bestca ul{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (min-width:600px) and (max-width:1023px){
  .sopsim-list ul{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}

/* ─────────────────────────────────────────────────────────────
   스타일 검수 보정층 (2026-09-29) — 세 몰 폰 폭 전 페이지 스캔을 한 번에 반영 (케이디엘 css/sop-style.css 와 같은 성격)
   ① 삼성 SOP 가이드 서체·타입 스케일 ② 대비 4.5:1(큰 글자 3:1)·누르는 칸 최소 24px ③ 세 몰 모양 불일치(신청서 입력칸 48 은 위 블록에서)
   흐린 회색 토큰 #6b7590 은 ms-*.css 전체에서 #5d6680 으로 바꿨다(연한 바탕 위 4.3 → 5.1)
   ───────────────────────────────────────────────────────────── */
/* ① 서체 — 테마 style.css 4행 NotoSansKR(207개 규칙) → Samsung One Korean */
body,div,table,th,td,pre,blockquote,thead,tfoot,input,button,textarea,ol,li,ul,dl,dt,dd{font-family:'Samsung One Korean','Malgun Gothic','맑은 고딕',sans-serif}

/* ② 대비 */
.vi_tab.ms-vtab li .rvwNum{background:#fff !important}   /* ms-brand.css 가 배경을 남색 !important 로 덮어 남색 숫자가 묻혔다(대비 1.0) */
.vi_tab.ms-vtab li.active .rvwNum{background:rgba(255,255,255,.22) !important}
.sopsim .tt .eyebrow,dd > a.chk,.ms-brief-hd .eb,#sopColorName,#sopCardApply b,.ms-cmp-hd span,.ms-val,
.ms-body .ms-benefit,.ms-benefit b,#msCards button.on small,.sopbd-forms a.on,.sopbd-forms a.on em{color:#1661c8 !important}   /* #1a6ad0 4.0(연파랑 위 3.6) → 5.9 */
.ms-label.sale,.label.sale,.sopsim-step-hd > i{background:#1661c8 !important}   /* 흰 글자 배지 4.0 → 5.9 */
#sopAiOpenBtn .ar,.sg-sh .tag,.sg-jstep h4 small,.sg-wrap h4 > small,.cbf-sh .tag,.cbf-step .no{color:#1268e9 !important}   /* #2189ff 3.2~3.5 */
.sab-ask .sab-sub,.sab .sab-nt,.og .lb .hint,.note > p,.fold-hd > i{color:#6b7280 !important}   /* #9ca3af 2.5 */
#slcnt2 > span,.score > span.of,li > span.n,a.all > small,.ms-body > .ms-sku,span.k > i,.journey li .n{color:#5d6680 !important}   /* 흐린 카운터·SKU·단계 번호 */
.journey li.self .n,.tt > .eyebrow,#sopPeriod button small,.tiers button small,#msPrePills button small{color:#1661c8 !important}   /* #b6bdd0 1.9 · #a0a7ba 2.4 · #9aa3b8 2.5 */
.sopbd .tx .md,.sopbd-forms a em{color:#5f6b85 !important}
.ms-ft-brand .pt,.ms-benefit.alt{color:#7f5400 !important}   /* 금색 #a06a00 4.3 */
#msPreMon{color:#12803b !important}   /* 초록 3.1 */
/* 브랜드 파랑 #1f7cf0 → #1a6ad0 (ms-*.css 전체, 흰 글자 대비 4.0 → 5.3). 아래는 그 위에 얹힌 반투명·흐린 글자 */
.ms-cmpi .c.ai .mut,.ms-cmpi .c.ai .mut span,.ms-cmpi .c.ai #cmpCardBase,.ms-cmpi .c.ai #cmpMemNote{color:rgba(255,255,255,.95) !important}
#sopCmp .c:not(.ai) > .dash{color:#6f778c !important}
.ms-faq-nav a small{color:#5d6680 !important}
.ms-faq-nav a.on small{color:#1661c8 !important}
.ms-faq-cta span{color:#fff !important}   /* 남색 판 위 운영시간이 솔루션 div 기본색(#454545)을 받아 1.5 — 거의 안 보였다 */
.sopbd-tabs a:not(.on) em{color:#5f6b85 !important}
.vimodel span,.tab_sort li a:not(.active){color:#767676 !important}
.empty_list,.empty_table,td.empty_table{color:#767676 !important}
tr.hl td,span.tx small,.cbf-dis-tag{color:#5b6270 !important}
.bx-warning b.fc_255{color:#b85200 !important}
.pg_cnt em,span.total b#total{color:#c8231a !important}
.wishpr .pmodel span{color:#767676 !important}   /* 찜 목록 모델명 #aaa 2.3 */

/* ② 터치 — 누르는 높이 24px 미만만 32px 이상으로 */
@media (max-width:1024px){
  .sop-auth a{display:inline-flex;align-items:center;min-height:36px}
  #ft.ms-ft li a,dd > a.chk,.crumb a.home,a.more,#login_fld span a{display:inline-flex;align-items:center;min-height:32px}
  #msSimStrip .reset{min-height:32px;padding:0 8px}
}

/* ① 타입 스케일 — 모바일 22/20/18·14/12/10(+입력칸 16). 스캔에서 단계 밖이던 규칙을 가장 가까운 단계로(가운데는 14 아래면 올리고 위면 내림) */
@media (max-width:768px){
  span.ms-labels > span.ms-label.sale,
  span.ms-labels > span.ms-label.partner,
  span.ms-body > span.ms-benefit,
  div.ms-ft-brand > span.mark,
  span.ms-benefit > span,
  span.ms-body > span.ms-benefit.alt,
  div.mq-head > div.sku,
  span.k > i,
  button.on > em.rec,
  div.c > span.rec,
  div.c > span#cmpDcRate,
  div.c > span.pct,
  span.pct > span#cmpSubRate,
  div.c > span#msPreRateB,
  div.c > span#msMemRateB,
  div.c > span#cmpMultiPct,
  span.ms-labels > span.ms-label.zero,
  span.ms-label > b{font-size:10px !important}
  a.ms-gnb-zero > span.ms-zero-tag,
  span.ms-zero-tag > b,
  span.ms-meta > span.ms-color,
  span.ms-price > span.l,
  span.ms-benefit > b,
  div.hrs > span.on,
  div.hrs > span,
  div.hrs > span.off,
  span.t > small,
  div.ms-ft-brand > span.pt,
  dd > a.chk,
  span.ms-body > span.ms-point,
  span.labels > span.label.sale,
  span.labels > span.label.partner,
  div#msStage > span.color,
  button.ms-brief-hd > span.eb,
  div.mq-head > span.eyebrow,
  span.k > span#msPayCardNm,
  span.k > span#msPayPtSub,
  button.on > small,
  div.note > p,
  div.tiers > button.on,
  div.tiers > button,
  div.og > a#sopCardApply,
  a#sopCardApply > b,
  div.ms-cmp-hd > span,
  div#sopCmp > div.ft,
  div.ft > b,
  li > span.rvwNum,
  li.active > span.rvwNum,
  a.on > em,
  div.tx > span.md,
  div.tx > span.pl,
  div.dot > span.n,
  div.ck > p,
  div.left > span.cbf-best-tag,
  div.left > span.cbf-dis-tag{font-size:12px !important}
  div.sop-auth > a,
  div.sop-gnb-right > a,
  span.ms-body > span.ms-name,
  span.v > small,
  div.acts > a.pri.ms-ft-consult,
  div.wide > dt,
  div.wide > dd,
  div.ms-ft-bot > div.legal,
  div.legal > b,
  div > span.btn_adv,
  div.fxtel > a,
  div.tx > p,
  span.pg > strong.pg_current,
  span.pg > a.pg_page,
  h2.vitit > div.vimodel,
  div.vimodel > span,
  div.ms-pay-row > span.k,
  b#sopFinal > span,
  div.ms-pay-row > b.v,
  b.v > span#msPayPt,
  div.og > div.lb,
  div.lb > span#sopColorName,
  div#sopPeriod > button.on,
  div#sopPeriod > button,
  div#sopCareWrap > div.lb,
  div#msPrePills > button,
  div#msPrePills > button.on,
  div#msCards > button.on,
  div#msCards > button,
  div#msCards > button.none,
  div.fold > button.fold-hd,
  button.fold-hd > i,
  div.ms-cmp-hd > b,
  div.kicker > b,
  div#cmpSaveWrap > span.pill,
  span.cnt > small,
  div.tb > div.c.th,
  div.tb > div.c.rh,
  div.c > strong,
  strong > span#cmpBaseMon,
  div.c > span.dash,
  span#cmpRowCard > strong#cmpCardSum,
  strong > span#cmpYears,
  div.tb > div.c.fin,
  div.c > strong#cmpMultiDc,
  div.tb > div.c.fin2,
  div.vi_txt_bx > button#sopBdAdd,
  span.tx > b,
  button#sopAiOpenBtn > span.ar,
  ul > li.active,
  div.sopbd-forms > a.on,
  div.sopbd-forms > a,
  div.tx > a.nm,
  li > button.sopbd-add,
  div.sopbd-cart > div#sopBdToggle,
  div#sopBdToggle > b#sopBdCnt,
  li.self > span.ic,
  li > span.ic,
  div.ck > h4,
  div.qa > div.a,
  div.sg-mfaq-more > a,
  div.btns > a.go,
  div.btns > a.tel,
  div.cbf-step > p,
  div.left > a.cbf-apply,
  tr.hl > td,
  tr.hl > td.sum,
  tr > td.sum,
  div.a > div.body,
  dd > button.btn_large.wset,
  section#fregister_term > h2,
  fieldset.fregister_agree > label,
  section#fregister_private > h2,
  div.btn_confirm > a.btn_large.bx-white,
  form > p.pg_cnt,
  p.pg_cnt > em,
  div.cont_inner > p.pg_cnt.mart30,
  div.cont_inner > div.bx-warning.marb10,
  div.bx-warning > b.fc_255,
  li > a.active,
  div.sop-pl-tabs > a.sop-pl-tab.on,
  div.sop-pl-tabs > a.sop-pl-tab,
  div.cont_inner > div.pgbody,
  div.sop-pl-sh > a.more{font-size:14px !important}
  span.ms-price > span.v,
  div.ms-pay-row > b#dMonthly,
  div.c > strong#cmpDcSum,
  div.c > strong#cmpFeel2,
  p.pr > b,
  div.sg-jstep > h4,
  div.maxline > b,
  div.btn_confirm > a.btn_large,
  div.sop-pl-sh > h3,
  a.more > i{font-size:18px !important}
  div.sg-sh > h3{font-size:20px !important}
  div.sg-cta > h3,
  div.cbf-cta > h3,
  div.sop-pl-hd > h2{font-size:22px !important}
}