/* 폰 전용 화면 (10/8) — mobile.js 와 짝. 700px 이하에서만. 직각 · 그림자 없음(9/29 원칙) 그대로
   옮길 때: 영카트 모바일 스킨의 css 로 */
.m-tabbar,.m-sheet,.m-buybar,.ms,.ms-start,.ms-picked,.m-dim,.m-sheet-x,.m-login-tabs,.m-terms-toggle{display:none}

@media(max-width:700px){
  :root{--tab-h:60px;--safe-b:env(safe-area-inset-bottom,0px)}
  body{padding-bottom:calc(var(--tab-h) + var(--safe-b)) !important}
  html.m-lock,html.m-lock body{overflow:hidden}
  /* 전화 띠·떠 있는 톡톡 → 탭 바 '상담' 으로 합쳤다 */
  .admin-dock,.talk-float{display:none !important}
  .toast{bottom:calc(var(--tab-h) + var(--safe-b) + 12px)}
  html.m-has-buybar .toast,html.m-has-paybar .toast{bottom:calc(var(--tab-h) + var(--safe-b) + 80px)}
  .impl-legend{bottom:calc(var(--tab-h) + 14px)}
  .review-toggle{bottom:calc(var(--tab-h) + 62px)}
  .mf-reset{bottom:calc(var(--tab-h) + 104px)}

  /* 320px 폰 — 원래부터 넘치던 두 곳: 상세 '부가세 별도'(줄바꿈 금지라 칸을 335px 로 밀었다) · 메인 약속 두 칸 */
  html .pd-vat{white-space:normal}
  /* 메인 약속 네 칸 — 2×2 로 칸 크기를 같게, 네 칸 다 같은 줄에서 왼쪽 맞춰 시작 (10/8 예람님: 정렬이 이상, 네 개 딱 구분되게)
     칸 사이는 1px 선(바탕색이 비치는 틈)으로만 나눈다 — 직각·그림자 없음 그대로 */
  html .trust-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:28px 16px 0;padding:0;
    background:var(--flat-line);border:1px solid var(--flat-line)}
  html .trust-row>div{display:block;padding:16px 14px 18px;border:0 !important;background:#fff;text-align:left}
  html .trust-row strong{display:block;font-size:16px;letter-spacing:-.02em}
  html .trust-row span{display:block;margin-top:6px;font-size:14px !important;line-height:1.55;color:#5d7284}

  /* 손가락으로 누르기 작은 곳 — 모양은 그대로, 눌리는 자리만 넓힌다 */
  html .hero-dots button{position:relative}
  html .hero-dots button::after{content:"";position:absolute;inset:-16px -5px}
  html .footer-links a{display:inline-flex;align-items:center;min-height:40px}
  html .site-header .brand{min-height:44px}

  /* ① 탭 바 */
  .m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:repeat(5,1fr);
    height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);background:#fff;border-top:1px solid var(--flat-line)}
  .m-tabbar>*{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:0;background:none;padding:0;color:#6b7f8c;font-size:12px;font-weight:700;-webkit-tap-highlight-color:transparent}
  .m-tabbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .m-tabbar .on{color:var(--navy)}
  .m-tabbar .on svg{stroke-width:2.2}
  .m-tabbar .on::before{content:"";position:absolute;left:28%;right:28%;top:-1px;height:2px;background:var(--navy)}
  .m-tabbar b{position:absolute;top:6px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;
    background:var(--navy);color:#fff;font-size:11.5px;line-height:1}
  .m-tabbar b[data-n="0"]{display:none}
  .m-tabbar>:active{background:#f2f5f6}

  /* 상담 — 아래에서 올라오는 창 */
  .m-sheet:not([hidden]){position:fixed;inset:0 0 calc(var(--tab-h) + var(--safe-b));z-index:80;display:flex;align-items:flex-end;background:rgba(11,26,36,.5);animation:m-fade .18s ease-out}
  .m-sheet-box{width:100%;max-height:82vh;overflow:auto;background:#fff;padding:6px 16px 14px;animation:m-up .26s var(--ease-out)}
  .m-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 10px;border-bottom:2px solid var(--navy)}
  .m-sheet-head h2{margin:0;font-size:17px;line-height:1.4;letter-spacing:-.02em}
  .m-x{flex:0 0 auto;width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;border:0;background:none;color:var(--ink)}
  .m-x svg,.m-row svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .m-row{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 2px;border-bottom:1px solid var(--flat-line);color:var(--ink)}
  .m-row svg{flex:0 0 auto;color:var(--navy)}
  .m-row.talk svg{color:#03c75a}
  .m-row b{display:block;font-size:16px}
  .m-row small{display:block;margin-top:1px;font-size:13px;color:#6b7f8c}
  .m-row:active{background:#f2f5f6}

  /* ③ 상품 상세 — 탭 바 대신 구매 띠 */
  html.m-has-buybar body,html.m-has-paybar body{padding-bottom:calc(var(--tab-h) + 68px + var(--safe-b)) !important}
  /* 10/8 예람님: 하단 바(탭 바)는 늘 고정 → 구매·결제 띠는 탭 바 바로 위에 */
  .m-buybar{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + var(--safe-b));z-index:41;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;
    padding:8px 12px;background:#fff;border-top:1px solid var(--flat-line)}
  .m-buybar p{margin:0;min-width:0}
  .m-buybar small{display:block;font-size:12px;color:#6b7f8c;font-weight:700}
  .m-buybar b{display:block;font-size:18px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-buybar button{height:48px;padding:0 16px;border:1px solid var(--navy);background:#fff;color:var(--navy);font-size:15.5px;font-weight:800}
  .m-buybar .m-buy{background:var(--navy);color:#fff}
  .m-buybar button:disabled{opacity:.4}

  /* 머리줄 — 장바구니·로그인은 탭 바에 있다. 로고 · 메뉴 · 검색만 */
  .header-actions .text-button,.header-actions .cart-button{display:none !important}

  /* 상품 상세 표 — 옆으로 밀어 보는 곳을 없앤다 (10/8 예람님: 비교는 좋은데 가로 스크롤은 없으면)
     카드 안 카드라 양옆 여백이 쌓여 표 자리가 275px 였다(pd-wrap 18 + pd-tabs 15 + pd-panel 2 + 카드 1+14)
     → 탭 묶음 여백을 걷고, 비교표만 카드 테두리까지. 375px 에서 333px.
     flat.css 의 .pd-panel td{14.5px !important} 를 이겨야 해서 글자 크기에 !important */
  html .pd-tabs{padding-left:0;padding-right:0}
  html .pd-panel .ex-cmp,html .pd-panel .ex-size-table{min-width:0 !important;width:100%}
  html .pd-panel .ex-cmp th,html .pd-panel .ex-cmp td{padding:10px 8px}
  html .pd-panel .ex-cmp tr>th:first-child{width:auto;white-space:normal}   /* 폭 고르기 '110mm (이 상품)' 이 가격 칸을 밀었다 */

  /* 원단 비교(4개) · 리본 등급 비교(3개): 항목 이름은 값 위 회색 띠로, 고를 것들은 전부 나란히 — 한눈에.
     칸 수는 product.js 표그리기가 --n 으로 넣는다 */
  html .pd-panel #exCompare .ex-size-wrap{overflow:visible;margin:0 -14px}   /* 스크롤 상자가 없어야 머리줄이 화면에 붙는다 */
  html .pd-panel #exScale ol{margin:0 -14px}                                 /* 리본: 등급 색 띠 3칸을 아래 표 3열에 맞춘다 */
  html .pd-panel #exCompareTable{display:block;border-top:0}
  html .pd-panel #exCompareTable tbody{display:block}
  html .pd-panel #exCompareTable tr{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
  html .pd-panel #exCompareTable th,html .pd-panel #exCompareTable td{padding:9px 4px;font-size:13.5px !important;line-height:1.45;text-align:center;letter-spacing:-.02em}
  html .pd-panel #exCompareTable td+td,html .pd-panel #exCompareTable tr>th:not(:first-child)+th{border-left:1px solid var(--flat-line)}
  html .pd-panel #exCompareTable tr>th:first-child{grid-column:1/-1;padding:7px 14px;text-align:left;font-size:13px !important;font-weight:800}
  /* 머리줄(원단·등급 이름) — 내려 읽는 동안 검색창 바로 밑에. 머리줄이 숨으면 맨 위에 */
  html .pd-panel #exCompareTable tr:first-child{position:sticky;top:var(--head-h);z-index:2;background:#fff;border-top:2px solid var(--navy);transition:top .25s var(--ease-out)}
  html:has(.site-header.is-hidden) .pd-panel #exCompareTable tr:first-child{top:0}
  html .pd-panel #exCompareTable tr:first-child>th:first-child{display:none}
  html .pd-panel #exCompareTable tr:first-child>th{padding:11px 3px;font-size:14px !important}

  /* 전체 규격표(접는 칸): 가로·세로를 한 칸 '40×20' 으로(product.js td[data-h]) → 5칸. 320px 만 원래 스크롤 상자가 받는다 */
  html .pd-panel .ex-size-table th,html .pd-panel .ex-size-table td{padding:9px 3px;font-size:13.5px !important}
  html .pd-panel .ex-size-table tr>:nth-child(2){display:none}
  html .pd-panel .ex-size-table th:first-child{font-size:0 !important}
  html .pd-panel .ex-size-table th:first-child::after{content:"규격";font-size:13.5px}
  html .pd-panel .ex-size-table td[data-h]::after{content:"×" attr(data-h)}
  html .pd-panel .ex-size-table td.now b{padding:2px 4px}
  html .pd-panel .ex-size-table td small{display:block;font-size:12.5px}
  /* 표 안 가격·원단 링크 — 글자 한 줄(20px)만 눌리던 것을 칸 전체로 */
  html .pd-panel .ex-size-table td.ok a,html .pd-panel #exCompareTable td a,html .pd-panel #exCompareTable th a{display:block;padding:6px 0}

  /* 마이페이지·주문 내역·주문 상세 — '칸 이름: 값' 다섯 줄(한 건 215~300px)을 줄 카드로 (10/8 2단계)
     국내 쇼핑앱 주문 목록처럼: 날짜·상태 → 사진·상품 → 금액·단추 */
  html #orders .mf-items,html #orders .mf-items tbody,html #done .mf-items,html #done .mf-items tbody,
  html #my-orders .sc-table,html #my-orders tbody,html #my-quotes .sc-table,html #my-quotes tbody{display:block}
  html #orders .mf-items thead,html #done .mf-items thead,html #my-orders thead,html #my-quotes thead{display:none}
  html #orders .mf-items tr,html #done .mf-items tr,html #my-orders tr,html #my-quotes tr{display:grid;align-items:center;gap:8px 10px;padding:14px 0;border-bottom:1px solid var(--flat-line)}
  html #orders .mf-items tr:last-child,html #done .mf-items tr:last-child,html #my-orders tr:last-child,html #my-quotes tr:last-child{border-bottom:0}
  html #orders .mf-items td,html #done .mf-items td,html #my-orders td,html #my-quotes td{display:block;min-width:0;padding:0;border:0;text-align:left;font-size:15.5px}
  html #orders .mf-items td::before,html #done .mf-items td::before,html #my-orders td::before,html #my-quotes td::before{display:none}
  html #orders .mf-items td.mf-empty,html #my-orders td.mf-empty,html #my-quotes td.mf-empty{grid-column:1/-1;text-align:center}

  /* 05 주문 내역: ① 날짜·주문번호 | 상태  ② 사진 + 상품·결제 수단  ③ 금액(미입금) | 단추 */
  html #orders .mf-items tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"no state" "item item" "amt act"}
  html #orders .mf-items td[data-th="주문"]{grid-area:no;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
  html #orders .mf-items td[data-th="주문"] br{display:none}
  html #orders .mf-items td[data-th="주문"] b{font-size:16px}
  html #orders .mf-items td[data-th="주문"] .no{font-size:12.5px;color:#8597a3;white-space:nowrap}
  html #orders .mf-items td[data-th="상태"]{grid-area:state;justify-self:end}
  html #orders .mf-items td.full{grid-area:item}
  html #orders .mf-items .sc-item{gap:12px}
  html #orders .mf-items .sc-item img{width:64px !important;height:auto !important;aspect-ratio:1000/722}
  html #orders .mf-items .sc-item b{font-size:16px;line-height:1.35}
  html #orders .mf-items .sc-item .opt{margin-top:2px;font-size:14.5px}
  html #orders .mf-items td.r{grid-area:amt;font-size:17px;font-weight:800;line-height:1.35}
  html #orders .mf-items td.r .no{font-size:13px;font-weight:600;color:#8597a3}
  html #orders .mf-items td[data-th=""]{grid-area:act;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  html #orders .mf-items td[data-th=""] .btn{margin:0}

  /* 04 마이페이지 최근 주문: ① 상품 | 상태  ② 날짜 · 금액 | 다시 담기 */
  html #my-orders tr{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"item item state" "date amt act"}
  html #my-orders td.full{grid-area:item;font-size:16px;font-weight:700;line-height:1.4}
  html #my-orders td[data-th="주문일"]{grid-area:date;font-size:14.5px;color:#6d8191}
  html #my-orders td.r{grid-area:amt;font-size:16px;font-weight:800}
  html #my-orders td[data-th="상태"]{grid-area:state;justify-self:end}
  html #my-orders td[data-th=""]{grid-area:act;justify-self:end}
  /* 나의 견적 문의: ① 제목 | 상태  ② 문의일 */
  html #my-quotes tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"item state" "date state";gap:4px 12px}
  html #my-quotes td.full{grid-area:item;font-size:16px;font-weight:700;line-height:1.4}
  html #my-quotes td[data-th="문의일"]{grid-area:date;font-size:14.5px;color:#6d8191}
  html #my-quotes td[data-th="상태"]{grid-area:state;justify-self:end}
  /* 요약 — 2×2 상자 → 한 줄 네 칸(선으로 나눔). 네 칸 순서는 mock-flow.js 가 자리로 읽으니 그대로 */
  html #mypage .my-head{gap:12px;padding:14px}
  html #mypage .my-sum{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--flat-line);background:#fff}
  html #mypage .my-sum a{grid-template-rows:1fr auto;align-items:center;gap:2px;padding:8px 2px;border:0;word-break:keep-all;line-height:1.3}
  html #mypage .my-sum a+a{border-left:1px solid var(--flat-line)}
  html #mypage .my-sum strong{font-size:17px}
  /* 메뉴 7칸 — 2열 상자 → 한 줄 목록 */
  html #mypage .my-grid{grid-template-columns:1fr;gap:0;margin-top:0;border:1px solid var(--flat-line);background:#fff}
  html #mypage .my-grid a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 14px;border:0}
  html #mypage .my-grid a+a{border-top:1px solid var(--flat-line)}
  html #mypage .my-grid span{margin:0;text-align:right;word-break:keep-all}

  /* 03 주문 상세 주문 상품: ① 사진 + 상품·옵션  ② 수량 · 금액 | 상태 */
  html #done .mf-items tr{grid-template-columns:64px auto minmax(0,1fr) auto;grid-template-areas:"item item item item" ". qty amt state";gap:6px 12px}
  html #done .mf-items td.full{grid-area:item}
  html #done .mf-items td[data-th="수량"]{grid-area:qty;color:#5d7284}
  html #done .mf-items td.r{grid-area:amt;font-size:16.5px}
  html #done .mf-items td[data-th="상태"]{grid-area:state;justify-self:end}
  html #done .mf-items tr.mf-cut td{color:#9aa7b2}
  html #done .mf-items .sc-item{gap:12px}
  html #done .mf-items .sc-item img{width:64px !important;height:auto !important;aspect-ratio:1000/722}
  html #done .mf-items .sc-item b{font-size:16px}

  /* 11 관심상품: 사진 84px 왼쪽 + 이름·가격·담은 날, 아래 지관·수량 한 줄 (한 장 370px → 150px 안팎) */
  html #wish .wish-grid{grid-template-columns:1fr;gap:8px}
  html #wish .wish-card{grid-template-columns:84px minmax(0,1fr);grid-template-areas:"img name" "img price" "img date" "buy buy";align-items:start;gap:2px 12px}
  html #wish .wish-card>a{grid-area:img}
  html #wish .wish-card>b{grid-area:name;padding-right:52px;font-size:15.5px;line-height:1.35}
  html #wish .wish-card>strong{grid-area:price}
  html #wish .wish-card>.wc-date{grid-area:date}
  html #wish .wish-card>.wc-buy{grid-area:buy;flex-wrap:nowrap;margin-top:8px}
  html #wish .wc-buy select{flex:1 1 0}

  /* 맨 위 띠 — 폰에서 두 줄이 되면 둘째 줄이 머리줄에 가려졌다 */
  html .notice{height:auto;min-height:34px;padding:6px 16px;line-height:1.4;text-align:center}

  /* ② 메인 첫 화면 — 첫 질문이 첫 화면 안에 들어오게 히어로를 줄인다.
     사진 위에 글(PC 처럼) · 진한 남색 그대로. 배너마다 단추 하나는 남긴다 — 단추가 있다 없다 하면 넘어갈 때마다 아래 질문이 위아래로 튄다 */
  html .hero{min-height:0}
  html .hero .hero-slides{position:absolute;inset:0;height:auto}
  html .hero .hero-shade{display:block;background:linear-gradient(180deg,rgba(11,26,36,.5) 0%,rgba(11,26,36,.82) 55%,rgba(11,26,36,.96) 100%) !important}
  html .hero .hero-content{padding:30px 20px 100px}
  html .hero h1{font-size:34px}
  html .hero .hero-copy{margin:10px 0 0;font-size:15.5px}
  html .hero .hero-actions{margin-top:18px}
  html .hero .hero-actions .secondary-button{display:none}
  html .hero .hero-actions .primary-button{width:100%}
  html .hero .hero-dots{top:14px;bottom:auto;right:16px}
  .finder>:not(.ms-start){display:none !important}
  .ms-start{display:block}
  .ms-start h2{margin:0 0 14px;font-size:22px;line-height:1.3;letter-spacing:-.03em}
  .ms-tip{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:#6b7f8c}

  /* 단계 판 (전체 화면) */
  .ms:not([hidden]){position:fixed;inset:0 0 calc(var(--tab-h) + var(--safe-b));z-index:70;display:flex;flex-direction:column;background:#fff}
  .ms-top{flex:0 0 auto;display:flex;align-items:center;gap:6px;height:56px;padding:0 6px;border-bottom:1px solid var(--flat-line)}
  .ms-top button{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--ink)}
  .ms-top svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ms-bar{flex:1;height:3px;background:#e3e9ec}
  .ms-bar i{display:block;height:100%;background:var(--navy);transition:width .3s var(--ease-out)}
  .ms-count{min-width:34px;font-size:13px;font-weight:800;color:#6b7f8c;text-align:right}
  .ms-body{flex:1;overflow:auto;padding:24px 20px 28px;-webkit-overflow-scrolling:touch}
  .ms-body h2{margin:0;font-size:26px;line-height:1.3;letter-spacing:-.035em;outline:0}
  .ms-sub{margin:10px 0 0;font-size:15px;line-height:1.6;color:#5b6f7c}
  .ms-main{margin-top:24px}
  .ms-main>*{animation:m-in .22s var(--ease-out)}
  .ms-cta{flex:0 0 auto;padding:10px 16px;border-top:1px solid var(--flat-line);background:#fff}
  .ms-next{width:100%;height:56px;border:0;background:var(--navy);color:#fff;font-size:17px;font-weight:800}

  /* 보기 — 한 줄에 하나 (눌러지는 칸 64px) */
  .ms-opts{display:grid;gap:8px}
  .ms-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:64px;padding:12px 14px 12px 16px;
    border:1px solid #cfdae0;background:#fff;color:var(--ink);text-align:left}
  .ms-opt b{display:block;font-size:17px;letter-spacing:-.02em}
  .ms-opt small{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:#6b7f8c;font-weight:600}
  .ms-opt svg{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:#8aa0ad;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ms-opt.on{outline:2px solid var(--navy);outline-offset:-2px;background:#f2f6f8}
  .ms-opt:active{background:#f2f5f6}
  .ms-group{margin:10px 0 0;font-size:13.5px;font-weight:800;color:var(--navy)}
  .ms-group:first-child{margin-top:0}
  .ms-opts hr{margin:8px 0 0;border:0;border-top:1px solid var(--flat-line)}

  /* 칩 — 크기·칸 수·폭처럼 고를 게 많을 때 */
  .ms-chips{display:flex;flex-wrap:wrap;gap:8px}
  .ms-chips button{min-height:44px;padding:0 16px;border:1px solid #cfdae0;background:#fff;color:var(--ink);font-size:16px;font-weight:700}
  .ms-chips.big{display:grid;grid-template-columns:repeat(3,1fr)}
  .ms-chips.big button{min-height:54px;padding:0 6px;font-size:17px}
  .ms-chips .wide{grid-column:1/-1}
  .ms-chips .on{background:var(--navy);border-color:var(--navy);color:#fff}

  /* 크기 — 큰 숫자 칸 두 개 */
  .ms-size{display:flex;align-items:flex-end;gap:10px;margin-bottom:18px}
  .ms-size label{flex:1;min-width:0}
  .ms-size label span{display:block;font-size:13.5px;font-weight:800;color:#5b6f7c}
  html .ms .ms-size input{width:100%;height:60px;padding:0 2px;border:0;border-bottom:2px solid #cfdae0;background:none;color:var(--ink);
    font-size:32px !important;font-weight:800;letter-spacing:-.03em;outline:0}
  .ms-size input:focus{border-bottom-color:var(--navy)}
  .ms-size input::placeholder{color:#c3cfd6}
  .ms-size i{padding-bottom:14px;font-style:normal;font-size:22px;color:#8aa0ad}
  .ms-size em{padding-bottom:16px;font-style:normal;font-size:16px;font-weight:700;color:#6b7f8c}
  .ms-draw{margin-top:22px}
  .ms-draw .live-draw{margin:0}

  /* ④ 장바구니·주문서 — 탭 바 대신 '금액 + 주문하기' 띠 */
  .m-paybar{grid-template-columns:1fr minmax(150px,46%)}
  .m-paybar b{font-size:20px}
  .m-paybar .m-buy.off{opacity:.45}
  html.m-has-paybar{scroll-padding-bottom:calc(var(--tab-h) + 76px + var(--safe-b))}   /* 빈 칸 검사로 초점이 갈 때 띠에 안 가리게 */

  /* 목록 '조건 설정' — 아래에서 올라오는 창 */
  .m-dim:not([hidden]){position:fixed;inset:0 0 calc(var(--tab-h) + var(--safe-b));z-index:79;display:block;background:rgba(11,26,36,.5);animation:m-fade .18s ease-out}
  html .filter-panel.open{position:fixed !important;   /* impl-tags.js 가 position:relative 를 인라인으로 단다 */
   left:0;right:0;bottom:calc(var(--tab-h) + var(--safe-b));z-index:80;max-height:calc(86vh - var(--tab-h));overflow:auto;overscroll-behavior:contain;
    margin:0;padding:0 16px;border:0;border-top:2px solid var(--navy);background:#fff;animation:m-up .26s var(--ease-out)}
  html .filter-panel.open .filter-head{position:sticky;top:0;z-index:2;height:56px;background:#fff}
  html .filter-panel.open .filter-head h3{margin-right:auto;font-size:18px}
  html .filter-panel.open .filter-head button{min-height:44px;padding:0 10px;font-size:14px}
  html .filter-panel.open .m-sheet-x{display:grid;margin-right:-10px}
  html .filter-panel.open .filter-apply{position:sticky;bottom:0;z-index:2;width:calc(100% + 32px);height:auto;min-height:56px;margin:12px -16px 0;
    padding:0;font-size:17px}   /* 단추 기본 좌우 여백이 남아 창이 12px 옆으로 밀렸다 */

  /* 하나 고르기 — 동그라미(라디오) 대신 누르는 칸(칩). 10/8 예람님: 요즘 폰 화면은 동그라미 선택을 거의 안 쓴다
     조건 창 · 주문서 배송지·결제 수단 · 견적 디자인 파일. 라디오가 든 칸에만 mobile.js 가 label.chip 을 단다(가입 수신 동의 같은 체크는 그대로).
     진짜 라디오는 칸 전체를 덮는 투명 판으로 남긴다(키보드·화면 낭독 그대로). 고른 표시는 label.on — :has 를 못 읽는 옛 폰도 */
  html .filter-panel .filter-choices,html .radio-row{display:flex;flex-wrap:wrap;gap:8px}
  html label.chip{position:relative;display:inline-flex;align-items:center;justify-content:center;
    min-height:46px;padding:0 16px;border:1px solid #cfdae0;background:#fff;color:var(--ink);font-size:15px !important;font-weight:700;cursor:pointer}
  html .pays label.chip{display:flex;padding:0 8px}
  html label.chip input{position:absolute;inset:0;width:100% !important;height:100% !important;min-height:0 !important;margin:0;opacity:0;cursor:pointer}
  html label.chip:active{background:#eef3f6}
  html label.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
  html label.chip:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:2px}

  /* ⑤ 로그인·회원가입 (10/12) — 탭 둘 · 큰 입력 칸 · 회원가입은 단추로 · 약관은 접기 · '다음/회원가입' 단추는 화면 아래 붙임 */
  .m-login-tabs{display:grid;grid-template-columns:1fr 1fr;margin:0 0 14px;border-bottom:1px solid var(--flat-line)}
  .m-login-tabs button{min-height:50px;border:0;border-bottom:3px solid transparent;background:none;color:#6b7f8c;font-size:16px;font-weight:800}
  .m-login-tabs button.on{border-bottom-color:var(--navy);color:var(--navy)}
  html #login .login-wrap{display:block}
  html #login .login-wrap[data-lt="member"] .lg-find,html #login .login-wrap[data-lt="member"] .mf-guest-help{display:none}
  html #login .login-wrap[data-lt="guest"]>section:first-child,html #login .login-wrap[data-lt="guest"] .lg-order{display:none}
  html #login .login-wrap[data-lt="guest"] .lg-find h3{margin-top:0 !important}
  html #login .login-wrap>section{padding:20px 16px}
  html #login .login-wrap>section+section{margin-top:12px}
  html #login .login-wrap[data-lt="guest"]>section+section{margin-top:0}
  html #login .login-wrap h3{font-size:19px}
  html #login .login-wrap>section:first-child>h3,html #login .lg-find>h3{display:none}   /* 탭 이름과 같은 제목은 뺀다 */
  html #login .login-wrap .sc-field input{height:52px}
  html #login .login-wrap .btn{min-height:52px !important;font-size:16px}
  html #login .login-links{display:grid;grid-template-columns:1fr;gap:4px;margin-top:12px}
  html #login .login-links a[href="#join1"]{order:-1;justify-content:center;min-height:52px;border:1px solid var(--navy);background:#fff;color:var(--navy);font-size:16px !important;font-weight:800}
  html #login .login-links a[href="#find"]{justify-content:center;color:#5d7284}
  /* 약관 — 항목 한 줄 + '내용 보기', 펼치면 전문·표 */
  html #login .terms{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;overflow:visible}
  html #login .terms>label{flex:1 1 auto;min-width:0}
  .m-terms-toggle{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid var(--flat-line);background:#fff;color:var(--ink);font-size:14px;font-weight:700}
  html #login .terms>:not(label):not(.m-terms-toggle){display:none;flex:1 1 100%}
  html #login .terms.open>:not(label):not(.m-terms-toggle){display:block}
  html #login .terms-box{height:auto;max-height:240px}
  /* 개인정보 표 — 네 칸을 옆으로 밀지 않고 줄마다 카드로 */
  html #login .terms.open .terms-table,html #login .terms-table tbody{display:block}
  html #login .terms-table tr:first-child{display:none}
  html #login .terms-table tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;padding:12px;border:1px solid var(--flat-line);border-top:0}
  html #login .terms-table tr:nth-child(2){border-top:1px solid var(--flat-line)}
  html #login .terms-table td{display:block;padding:0;border:0;font-size:14px}
  html #login .terms-table td:nth-child(1){grid-row:1/span 3;align-self:start;padding:2px 8px;background:var(--flat-bg);font-weight:800;color:var(--navy)}
  html #login .terms-table td:nth-child(2){font-weight:800}
  html #login .terms-table td:nth-child(3)::before{content:"항목 · ";color:#6b7f8c;font-weight:700}
  html #login .terms-table td:nth-child(4)::before{content:"보유 기간 · ";color:#6b7f8c;font-weight:700}
  /* 약관 동의·정보 입력·가입 완료의 아래 단추 줄 — 화면 아래(탭 바 위)에 붙는다 */
  html #login .frame .sc-actions{position:sticky;bottom:calc(var(--tab-h) + var(--safe-b));z-index:5;margin:16px -15px 0;padding:10px 15px;
    background:#fff;border-top:1px solid var(--flat-line)}
  html #login .frame .sc-actions .btn{min-height:52px !important;font-size:16px}
  html #login .join-done .sc-actions{position:static;margin:16px 0 0;border:0;padding:0}
  html label.check input[type=checkbox]{flex:0 0 20px}   /* 글이 길면 체크 칸이 14px 로 눌렸다 */

  /* ⑥ 견적문의 단계식 (10/12) — 한 화면에 질문 하나, 아래 '이전 · 다음/견적 요청하기' (mobile.js 가 html.m-qsteps 를 단다) */
  html.m-qsteps #quote .qs-off{display:none !important}
  html.m-qsteps #quote .q-submit{display:none}
  html.m-qsteps #quote .q-panel .sec-head,html.m-qsteps #quote #qKind .sec-head{display:none}
  html.m-qsteps #quote .frame-body>.pane-title{margin-bottom:6px;font-size:15px;color:#5d7284}
  html.m-qsteps #quote .frame-body>.pane-title small{display:none}
  .q-step-head{scroll-margin-top:12px;margin:0 0 16px}
  .q-step-bar{display:flex;align-items:center;gap:10px;margin:0 0 16px}
  .q-step-head h2{margin:0;font-size:24px;line-height:1.3;letter-spacing:-.035em;outline:0}
  .q-step-head p{margin:8px 0 0;font-size:15px;line-height:1.6;color:#5b6f7c}
  html.m-qsteps #quote .q-kind{display:grid;grid-template-columns:1fr;gap:8px;margin:0;padding:0;border:0}
  html.m-qsteps #quote .q-kind button{display:block;width:100%;min-height:72px;padding:14px 16px;text-align:left}
  html.m-qsteps #quote .q-kind button b{display:block;font-size:17px}
  html.m-qsteps #quote .q-kind button span{display:block;margin-top:2px;font-size:14px}
  html.m-qsteps #quote .sc-field input,html.m-qsteps #quote .sc-field select{height:52px}
  html.m-qsteps #quote .two{grid-template-columns:1fr 1fr;gap:10px}
  html.m-qsteps #quote .two:has(select){grid-template-columns:1fr}   /* 고르는 칸은 글이 길어(사각형 (모서리 표준 R2)) 한 줄에 하나 */
  .q-step-nav{display:none}
  html.m-qsteps #quote .q-step-nav{position:sticky;bottom:calc(var(--tab-h) + var(--safe-b));z-index:5;display:flex;gap:8px;margin:16px -15px 0;padding:10px 15px;
    background:#fff;border-top:1px solid var(--flat-line)}
  html.m-qsteps #quote .q-step-nav .btn{min-height:52px !important;font-size:16px}
  html.m-qsteps #quote .q-step-nav .q-prev{flex:0 0 96px}
  html.m-qsteps #quote .q-step-nav .q-next{flex:1}

  /* 폰 메인 목록 — 첫 질문 바로 아래로 옮겼다(mobile.js). 위의 머리를 줄여 상품이 빨리 보이게 (10/12 예람님: 뭘 파는지 먼저)
     '전체 상품' 과 비교하기 한 줄 · 제품군 탭 한 줄 · 프린터 방식 안내는 아래 원단 소개와 같은 내용이라 폰 목록에선 뺀다 */
  html #popular{padding-top:28px}
  html #popular .product-heading{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  html #popular .product-heading>div{flex:1 1 auto;min-width:0;text-align:left}
  html #popular .product-heading h2{text-align:left}
  html #popular .product-heading h2{font-size:24px}
  html #popular .product-heading p{display:none}
  html #popular .product-heading .cmp-start{flex:0 0 auto;margin:0}
  html #popular .catalog-tabs{display:flex;flex-wrap:nowrap;gap:6px;margin-top:14px}
  html #popular .catalog-tabs button{flex:1 1 auto;min-width:0;padding:0 6px;font-size:15px;white-space:nowrap}
  html #popular #catalogGuide{display:none}
  html #popular .catalog-layout{margin-top:12px}

  /* 목록 위 '고른 조건' */
  .ms-picked:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 0;padding:12px 14px;
    background:var(--navy);color:#fff;scroll-margin-top:12px}
  .ms-picked p{margin:0;min-width:0;font-size:15px;font-weight:700;line-height:1.45}
  .ms-picked p b{display:block;font-size:12.5px;color:#9fd0f2}
  .ms-picked button{flex:0 0 auto;min-height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.55);background:none;color:#fff;font-size:14.5px;font-weight:800}
}
@keyframes m-fade{from{opacity:0}}
@keyframes m-up{from{transform:translateY(100%)}}
@keyframes m-in{from{opacity:0;transform:translateX(14px)}}
@media(max-width:359px){html .pd-panel #exCompareTable tr:first-child>th{font-size:13px !important}}   /* 320px 폰: '유포감열지' 가 한 칸에 */
@media(prefers-reduced-motion:reduce){.m-sheet,.m-sheet-box,.ms-main>*,.m-dim,html .filter-panel.open{animation:none !important}.ms-bar i{transition:none}}

/* 영문 화면(i18n.js): CSS 에 박힌 한국어 글 (10/12) */
@media(max-width:700px){
  html[lang="en"] .pd-panel .ex-size-table th:first-child::after{content:"Size"}
  html[lang="en"] #login .terms-table td:nth-child(3)::before{content:"Items · "}
  html[lang="en"] #login .terms-table td:nth-child(4)::before{content:"Retention · "}
  html .lang-switch{margin-right:2px}
  /* 영문은 말이 길다: 목록 제품군 탭(Barcode ribbons)은 두 줄까지 */
  html[lang="en"] #popular .catalog-tabs button{white-space:normal;line-height:1.2;padding:4px 6px;font-size:14px}
  html[lang="en"] #productGrid .product-line-m{white-space:normal;text-overflow:clip}   /* '40·75mm core: 3,000 / 8,000 labels' 가 … 로 잘렸다 → 두 줄 */
  /* 상세 위쪽 한 단 — 1fr 은 안 줄어드는 내용(표·도면)에 밀려 320px 에서 화면보다 넓어졌다 */
  html .pd-top{grid-template-columns:minmax(0,1fr)}
  /* 상세 지관 표: 칸 이름(영문 'Compatible printers')이 한 줄로 버티며 320px 폰에서 표가 화면 밖으로 나갔다 */
  html .pd-core-table{table-layout:fixed}
  html .pd-core-table th{white-space:normal;width:30%}
  html .pd-core-table th,html .pd-core-table td{padding:8px 6px;overflow-wrap:anywhere}
  html .lang-switch button{min-width:40px;height:36px;padding:0 6px}
}