/* ── 평면화 (2026-09-29) ─────────────────────────────────────────
   AI 가 만든 티를 빼는 덮어쓰기 층. 기능·구조는 건드리지 않고 겉모양만 바꾼다.
   참고: 아이라벨, GPT 새 시안(온라인쇼핑몰 codex/새-시안).
     1. 모서리 직각        2. 그림자 없음, 구역은 1px 선으로
     3. 색은 남색 하나 + 흰색·연회색 (파스텔 판 제거)
     4. 썸네일에서 도면 위 색띠를 잘라 도면만 (원단·규격은 카드 글에 이미 있다)
     5. 버튼은 단색 사각형, 보조 동작은 테두리만
   이 파일의 <link> 한 줄을 지우면 이전 모양으로 돌아간다. */

:root{--radius:0px;--shadow:none;--navy:#17384d;--flat-bg:#f5f7f8;--flat-line:#dce4e8}

/* 1·2. 모서리와 그림자 */
*,*::before,*::after{border-radius:0 !important;box-shadow:none !important}
/* 원래 동그래야 하는 것만 되돌린다 */
.hero-dots button,.cart-button b,input[type=radio],.ab-dot,.q-dot{border-radius:999px !important}
/* 라벨 그림의 라벨 한 장은 실물처럼 모서리가 둥글다 */
.label-strip i{border-radius:9px !important}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.product-card{transform:none !important}@media(hover:hover) and (pointer:fine){.product-card:hover{transform:none !important}}
@media(hover:hover) and (pointer:fine){.product-card:hover{border-color:#9bb9ca}}
.label-strip,.feature-photo,.product-visual img{filter:none !important}

/* 3. 색 — 파스텔 판을 연회색 한 가지로 */
.material-feature{background:var(--flat-bg) !important;border:1px solid var(--flat-line)}
.feature-specimen{background:#fff !important;border-left:1px solid var(--flat-line)}
.finder{border:1px solid var(--flat-line);border-top:2px solid var(--navy)}
.admin-banner{background:var(--flat-bg) !important;border:1px solid var(--flat-line)}
.guide-section{background:var(--navy)}
.guide-steps article{background:var(--navy)}
.trust-row{border-top:1px solid var(--flat-line)}
.material-tab{border-color:var(--flat-line)}
.material-tab.active{background:#fff;border-color:var(--navy);box-shadow:inset 3px 0 0 var(--navy) !important}@media(hover:hover) and (pointer:fine){.material-tab:hover{background:#fff;border-color:var(--navy);box-shadow:inset 3px 0 0 var(--navy) !important}}

/* 4. 썸네일 — 도면 SVG 위쪽 278px 색띠를 잘라 도면만 보인다 (1000×1000 중 아래 722) */
.product-visual{aspect-ratio:1000/722 !important;background:var(--flat-bg)}
.product-visual img{object-fit:cover !important;object-position:center bottom !important}
.product-card{border:1px solid var(--flat-line)}

/* 5. 버튼 */
.primary-button,.search-button,.product-card .add-cart,.ab-go,.support-actions button,.pd-buy .primary-button{
  background-color:var(--navy) !important;border:0}   /* background 로 쓰면 폰 카드의 카트 아이콘(배경 그림)까지 지워진다 */
@media(hover:hover) and (pointer:fine){.primary-button:hover,.search-button:hover,.product-card .add-cart:hover,.ab-go:hover{background-color:#0f2736 !important}}
.secondary-button,.reset-button,.quick-sizes button,.view-options,.support-actions a{background-color:#fff !important;border:1px solid #c3d0d7}
.catalog-types button,.pd-tabs button{border-radius:0 !important}

/* 제목 크기를 한 단계 낮춘다 — 모든 영역이 같은 크기로 소리치지 않게 */
.section-heading h2,.product-heading h2,.guide-copy h2{font-size:32px}
@media(max-width:560px){.section-heading h2,.product-heading h2,.guide-copy h2{font-size:26px}}

/* ── 2단계 · 헤더 검색 ──────────────────────────────────────────
   PC(900px 이상)는 두 줄: 로고·검색·계정 / 주 메뉴. 폰은 첫 줄 아래에 검색창을 늘 둔다.
   styles.css 의 .site-header·.header-inner 규칙을 여기서 덮는다. */
:root{--head-h:125px}
.site-header{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--flat-line)}
.header-search{display:flex;height:42px;border:1px solid #c8d7df;background:#fff}
.header-search:focus-within{border-color:var(--navy)}
.header-search input{flex:1;min-width:0;border:0;outline:0;padding:0 14px;background:transparent;
  color:var(--ink);font-size:14px;-webkit-appearance:none;appearance:none}
.header-search input::placeholder{color:#8597a0;opacity:1}
.header-search button{flex:none;width:46px;border:0;border-left:1px solid #c8d7df;
  background-color:#eef3f6;color:var(--navy);display:grid;place-items:center}
@media(hover:hover) and (pointer:fine){.header-search button:hover{background-color:#e0eaf0}}
.header-search svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.header-search>.impl-tag{top:-10px;right:52px}   /* 기본 자리(오른쪽 위 안)는 돋보기를 가린다 */
/* 헤더가 두꺼워져서 앵커로 뛰면 제목이 헤더 밑에 숨는다 */
[id]{scroll-margin-top:var(--head-h)}
.sticky{top:calc(var(--head-h) + 18px)}

@media(min-width:900px){
  .header-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 28px;height:auto;padding:0 28px}
  .brand{grid-row:1;height:76px}
  .header-search{grid-row:1;grid-column:2;justify-self:end;width:min(540px,100%)}
  .header-actions{grid-row:1;grid-column:3;gap:4px}
  .desktop-nav{grid-row:2;grid-column:1/-1;display:flex;height:48px;gap:52px;font-size:15px;border-top:1px solid #eef2f4}
  .desktop-nav a{padding:13px 0}
  .desktop-nav a:after{bottom:0;background:var(--navy)}
  .menu-button,.mobile-nav.open{display:none}
}
@media(max-width:899.98px){
  :root{--head-h:97px}   /* 9/30 헤더 여백을 줄인 뒤 실측 */
  .header-inner{height:auto;flex-wrap:wrap;padding:6px 14px 8px;gap:6px}
  .brand img{height:40px}
  .header-search{order:3;flex:1 0 100%;height:40px}
  .header-search input{font-size:16px}              /* iOS 는 16px 보다 작으면 누를 때 화면을 확대한다 */
  .header-search input::placeholder{font-size:14px}
}

/* ── 2단계 · 카드 표 ────────────────────────────────────────────
   카드 아래쪽을 '라벨 … 값' 줄로 정리한다 (GPT 시안 .product-lines).
   가격·담기는 카드 바닥에 붙인다 — 한 줄에 놓인 카드끼리 가격 높이가 맞는다.
   styles.css 의 .product-info dl 규칙(두 칸 격자·왼쪽 굵은 선)을 이기려고 #productGrid 로 건다. */
#productGrid .product-card{display:flex;flex-direction:column}
#productGrid .product-info{flex:1;display:flex;flex-direction:column;padding:16px}
#productGrid .product-material{margin:0 0 5px;font-size:12.5px;color:var(--navy)}
#productGrid .product-info h3{font-size:18px;line-height:1.4;letter-spacing:-.03em;margin:0 0 12px}
#productGrid .product-rows{display:block;margin:0 0 14px;border-top:1px solid var(--flat-line)}
#productGrid .product-rows div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;
  padding:7px 0;border:0;border-bottom:1px solid var(--flat-line)}
#productGrid .product-rows dt{font-size:12px;color:#7f929c}
/* 칸이 좁으면 값이 다음 줄 오른쪽으로 내려간다 (linebreak.js 가 NBSP 로 묶어서 넘치지 않게) */
#productGrid .product-rows dd{margin:0 0 0 auto;font-size:13px;font-weight:700;color:var(--ink);
  text-align:right;font-variant-numeric:tabular-nums}
#productGrid .product-rows dd span{display:block;white-space:nowrap}   /* 지관 하나에 한 줄 */
#productGrid .price-row{margin:auto 0 12px;flex-wrap:wrap;gap:0 8px}
#productGrid .price-row s{font-size:13px}
#productGrid .price-row b{font-size:20px;color:var(--navy)}
#productGrid .price-row b.ask{font-size:17px;color:#5d7284}
/* 901~1120px(스크롤바 포함) 에서 4열이면 카드 안 폭이 215px 보다 좁아져 '장바구니 담기'가 칸 밖으로 나간다 → 3열 (12개씩이라 네 줄로 맞는다) */
@media(min-width:901px) and (max-width:1120px){#productGrid{grid-template-columns:repeat(3,1fr)}}
#productGrid .product-buy{flex-wrap:wrap}   /* 그래도 좁은 폭(561~585px 등)에서는 담기 버튼이 아랫줄로 */
#productGrid .add-cart{white-space:nowrap}  /* 버튼 안에서 '장바구니/담기' 두 줄로 접히지 말고 통째로 아랫줄로 (1024px 왼쪽 필터 3열) */

/* 폰: 2열·한 화면 4개. 표는 첫 줄만, 장바구니는 가격 오른쪽 아이콘(catalog.css) 자리 */
@media(max-width:560px){
  #productGrid .product-info{padding:8px 10px 10px}
  #productGrid .product-buy{bottom:10px}
  #productGrid .product-material{margin-bottom:2px;font-size:12px}
  #productGrid .product-tag{padding:1px 5px}
  #productGrid .product-info h3{font-size:15px;line-height:1.3;margin:0 0 5px}
  #productGrid .product-rows{margin:0}
  #productGrid .product-rows div{padding:3px 0;gap:0 6px}
  #productGrid .product-rows div+div{display:none}
  #productGrid .product-rows dt{font-size:11px}
  #productGrid .product-rows dd{font-size:11.5px;line-height:1.3}
  #productGrid .price-row{min-height:40px;margin:auto 0 0;padding-right:44px;align-content:center;gap:0 6px;line-height:1.2}  /* 두 줄로 접혀도 아이콘 높이 안 */
  #productGrid .price-row s{font-size:12px}
  #productGrid .price-row b{font-size:17px}
}

/* ── 2단계 · 왼쪽 필터 ──────────────────────────────────────────
   PC(1024px 이상)는 왼쪽 '조건으로 찾기' 패널 + 오른쪽 결과 3열 두 단 (GPT 시안 list.html).
   그보다 좁으면 패널을 접어 두고 '조건 설정' 단추로 편다. 값은 바꾸는 즉시 적용된다 (app.js 패널읽기). */
.filter-panel{border-top:2px solid var(--navy);background:#fff}
.filter-panel>.impl-tag{top:-11px;right:0}              /* 기본 자리는 '초기화'를 가린다 */
.filter-head{display:flex;justify-content:space-between;align-items:center;height:50px;border-bottom:1px solid var(--flat-line)}
.filter-head h3{margin:0;font-size:16px;letter-spacing:-.02em}
.filter-head button{border:0;background:none;padding:8px 0;color:#5d7284;font-size:13px;font-weight:700}
@media(hover:hover) and (pointer:fine){.filter-head button:hover{color:var(--navy);text-decoration:underline}}
.filter-panel fieldset{min-width:0;margin:0;padding:16px 0;border:0;border-bottom:1px solid var(--flat-line)}
/* legend 를 띄우지 않으면 윗선에 붙어 버려 위 여백이 안 먹는다 */
.filter-panel legend{float:left;width:100%;margin:0 0 10px;padding:0;font-size:14px;font-weight:800;color:var(--ink)}
.filter-panel legend small{font-size:12px;font-weight:600;color:#7f929c}
.filter-panel legend+*{clear:both}
.filter-choices{display:grid;gap:9px}
.filter-panel label{font-size:13.5px;color:#3d5563;cursor:pointer}
.filter-panel input[type=radio],.filter-panel input[type=checkbox]{width:15px;height:15px;margin:0 7px 0 0;vertical-align:-2px;accent-color:var(--navy)}
.size-pair{display:flex;align-items:flex-end;gap:6px}
.size-pair label{flex:1;min-width:0;font-size:12.5px;color:#5d7284}
.size-pair input{display:block;width:100%;height:38px;margin-top:4px;padding:0 9px;border:1px solid #c8d7df;
  background:#fff;color:var(--ink);font-size:14px;outline:0}
.size-pair input:focus{border-color:var(--navy)}
.size-pair>span{padding-bottom:9px;color:#93a5ad}
.filter-check{display:block;padding:16px 0;border-bottom:1px solid var(--flat-line)}
/* 제품군마다 보이는 칸 — app.js 가 폼에 data-type 을 단다. 숨긴 칸에는 조건이 남지 않는다(조건다듬기) */
#filterForm[data-type=roll] [data-for=ribbon],#filterForm[data-type=ribbon] [data-for=roll],
#filterForm[data-type=a4] .for-material,#filterForm:not([data-type=roll]) .for-core,
#filterForm[data-type=ribbon] .t-label,#filterForm:not([data-type=ribbon]) .t-ribbon,
#filterForm[data-type=ribbon]:not(.has-h) .for-h{display:none}
.filter-toggle,.filter-apply{display:none}

/* 결과 위 한 줄: (조건 설정) · 검색 요약 · 정렬 */
#popular .catalog-summary{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:50px;margin-top:18px;padding:6px 0}
#catalogSummary{flex:1;min-width:0;font-size:13px;font-weight:800;color:var(--ink)}
#popular .catalog-sort{display:flex;align-items:center;gap:8px;width:auto;margin-left:auto;font-size:13px}
#popular .catalog-sort select{width:auto;min-width:130px;height:38px}
#popular .product-grid{margin-top:18px}

@media(min-width:1024px){
  .catalog-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0 32px;margin-top:24px}
  #popular .catalog-layout>.catalog-summary{grid-column:2;min-height:52px;margin-top:0}   /* 아래 선이 패널 제목 줄 아래 선과 맞는다 */
  .filter-panel{grid-column:1;grid-row:1/span 2;align-self:start}
  .catalog-results{grid-column:2;min-width:0}
  #productGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 패널의 제품군과 같은 선택지가 바로 옆에 또 있으면 어느 쪽이 기준인지 헷갈린다. 좁은 화면에서는 패널이 접혀 있어 탭을 둔다 */
  #popular .catalog-tabs{display:none}
}
@media(max-width:1023.98px){
  .filter-toggle{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid #c3d0d7;
    background-color:#fff;color:var(--navy);font-size:14px;font-weight:800}
  .filter-toggle::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
  .filter-toggle[aria-expanded=true]{background-color:var(--navy);border-color:var(--navy);color:#fff}
  .filter-toggle[aria-expanded=true]::after{transform:translateY(2px) rotate(-135deg)}
  .filter-panel{display:none;margin-top:4px;padding:0 16px;border:1px solid var(--flat-line);border-top:2px solid var(--navy)}
  .filter-panel.open{display:block}
  .filter-choices{display:flex;flex-wrap:wrap;gap:10px 22px}
  .size-pair{max-width:360px}
  .filter-apply{display:flex;align-items:center;justify-content:center;width:100%;height:46px;margin:16px 0;border:0;
    background-color:var(--navy);color:#fff;font-size:15px;font-weight:800}
}
@media(max-width:560px){
  #catalogSummary{order:3;flex-basis:100%}              /* 검색 요약은 단추·정렬 아래 한 줄로 */
  #catalogSummary:empty{display:none}
  #popular .catalog-sort select{min-width:0}
}

/* ── 2단계 · 검수 반영 (9/30) ─────────────────────────────────── */
.frame{overflow:clip}   /* overflow:hidden 이면 주문서 요약(sticky)이 화면이 아니라 틀을 기준으로 잡혀 79px 내려앉는다 */
@media(min-width:1024px){.catalog-layout{grid-template-rows:auto 1fr}}   /* 결과가 적을 때 요약 줄이 늘어나지 않게 */
@media(max-width:1023.98px){.size-pair input,#popular .catalog-sort select{font-size:16px}}   /* iOS 확대 방지 */
/* 360px(갤럭시 기본 폭): 로고와 계정 단추가 한 줄에 들어가야 헤더가 두 줄(103px)로 유지된다 */
@media(max-width:380px){
  .header-actions .text-button,.cart-button,.menu-button{padding-left:7px;padding-right:7px}
  .brand img{height:34px}
  .header-search input::placeholder{font-size:13px}
}
/* 원단 사진(흰 배경 라벨 스트립)은 잘라내지 않고 통째로 */
.feature-photo{object-fit:cover !important;object-position:center !important;background:#fff}   /* 칸을 꽉 채우고 가운데 (9/30) */
.pd-info-body img{object-fit:contain;background:#fff}
/* 상품 상세 큰 도면도 목록처럼 위 색띠를 잘라 도면만 — 원단·규격은 옆 상품명과 사양표에 있다 */
#pdImage{aspect-ratio:1000/722;object-fit:cover;object-position:center bottom}
#pdImage.is-photo{object-fit:contain;object-position:center;background:#fff}
/* 폰 한 화면 4개 — 헤더·카드·하단 띠를 조금씩 줄여 넷째 카드 가격까지 전화 띠 위에 둔다 (390×700 측정) */
.product-line-m{display:none}
@media(max-width:560px){
  #productGrid .product-rows{display:none}
  #productGrid .product-line-m{display:block;margin:0 0 2px;font-size:11.5px;color:#5d7284;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #productGrid .price-row{min-height:36px}
  #productGrid .product-card .add-cart{width:36px;height:36px}
}
@media(max-width:899.98px){
  .header-inner{padding:4px 14px 6px}
  .header-search{height:38px}
}
@media(max-width:560px){
  .admin-dock{min-height:52px;padding:6px 14px}
  .admin-dock a{padding:8px 14px}
}
@media(max-width:380px){#productGrid .product-line-m{font-size:10.5px;letter-spacing:-.02em}}   /* 360px: '40·75지관 3,000 / 8,000장' 한 줄 */

/* ── 상세 보강 (9/30) ─────────────────────────────────────────────
   휑하던 상세를 표로 채운다: 원단·등급 비교, 제조사 사양, 맞는 리본, 지관별 값, 구매 전 확인, 정보 고시. */
@media(min-width:900px){.pd-visual{position:sticky;top:calc(var(--head-h) + 16px)}}   /* 오른쪽 구매 칸이 길어 도면 아래가 비었다 */
.pd-thumbs button{border-color:var(--flat-line);background:#fff}
.pd-thumbs button.active{border-color:var(--navy)}
.pd-fit{display:grid;gap:3px;margin:14px 0 4px;padding:12px 14px;border:1px solid var(--flat-line);border-left:3px solid var(--navy);background:var(--flat-bg)}
.pd-fit b{font-size:14px;color:var(--ink)}
.pd-fit span{font-size:13px;color:#4d6474}
.pd-fit a{justify-self:start;margin-top:4px;font-size:13px;font-weight:800;color:var(--navy);border-bottom:1px solid currentColor}
.pd-fit a::after{content:" →"}
.ex-cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:13.5px;border-top:2px solid var(--navy)}
.ex-cmp th,.ex-cmp td{padding:10px 12px;border-bottom:1px solid var(--flat-line);text-align:left;vertical-align:top;line-height:1.5}
.ex-cmp tr:first-child th{background:#fff;font-size:14px;color:var(--ink)}
.ex-cmp tr:first-child th a{color:var(--navy);border-bottom:1px solid #9bb9ca}
.ex-cmp tr>th:first-child{width:130px;background:var(--flat-bg);color:#5d7284;font-weight:700;white-space:nowrap}
.ex-cmp .now{background:#eef4f8;font-weight:700;color:var(--ink)}
.ex-cmp tr:first-child .now{box-shadow:inset 0 3px 0 var(--navy) !important}
.ex-cmp td a{color:var(--navy);font-weight:800}
.ex-core-price{margin-top:12px;min-width:0}
.ex-match{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.ex-match-card{display:grid;gap:2px;padding:13px 14px;border:1px solid var(--flat-line);background:#fff}
@media(hover:hover) and (pointer:fine){.ex-match-card:hover{border-color:#9bb9ca}}
.ex-match-card span{font-size:12px;color:#7f929c}
.ex-match-card b{font-size:17px;color:var(--ink)}
.ex-match-card em{font-style:normal;font-size:13px;color:#4d6474}
.ex-match-card strong{margin-top:6px;font-size:16px;color:var(--navy)}
.ex-more{display:block;width:100%;height:44px;margin-top:10px;border:1px solid #c3d0d7;background:#fff;color:var(--navy);font-size:14px;font-weight:800}
@media(hover:hover) and (pointer:fine){.ex-more:hover{border-color:var(--navy)}}
.ex-care{margin:0;padding:0;list-style:none;border-top:2px solid var(--navy)}
.ex-care li{position:relative;padding:11px 0 11px 18px;border-bottom:1px solid var(--flat-line);font-size:14px;color:#3d5563;line-height:1.6}
.ex-care li::before{content:"";position:absolute;left:4px;top:20px;width:5px;height:5px;background:var(--navy)}
.ex-note{margin:10px 0 0;font-size:12.5px;color:#7f929c}
#exMaker .pd-detail-spec,#exNotice .pd-detail-spec{border-top:2px solid var(--navy)}
@media(max-width:560px){
  .ex-cmp{font-size:12.5px}
  .ex-cmp tr>th:first-child{width:96px}
  .ex-match{grid-template-columns:1fr 1fr}
}
/* 상세 맨 위 약속 배지 — 진한 판 대신 선으로 */
.ex-promise div{background:#fff !important;color:var(--ink) !important;border:1px solid var(--flat-line);border-top:2px solid var(--navy);text-align:left}
.ex-promise b{color:var(--navy)}
.ex-promise span{color:#5d7284;opacity:1}

/* 리본 상세 — 인쇄 원리 3단계, 쓰는 곳, 폭 고르기 (9/30) */
.ex-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0;list-style:none;counter-reset:st;border-top:2px solid var(--navy)}
.ex-steps li{display:grid;gap:4px;align-content:start;padding:16px 16px 16px 0;border-bottom:1px solid var(--flat-line);counter-increment:st}
.ex-steps li+li{padding-left:16px;border-left:1px solid var(--flat-line)}
.ex-steps b{font-size:15px;color:var(--ink)}
.ex-steps b::before{content:counter(st) ". ";color:var(--navy)}
.ex-steps span{font-size:13.5px;color:#4d6474;line-height:1.6}
.ex-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ex-chips li{padding:7px 12px;border:1px solid var(--flat-line);background:var(--flat-bg);font-size:13.5px;font-weight:700;color:#3d5563}
.ex-width{min-width:0}
.ex-width tr:first-child th{background:var(--flat-bg) !important;color:#5d7284;font-weight:700}
.ex-width td:last-child,.ex-width tr:first-child th:last-child{text-align:right}
#exMakerLead{margin:0 0 12px}
@media(max-width:560px){
  .ex-steps{grid-template-columns:1fr}
  .ex-steps li,.ex-steps li+li{padding:12px 0;border-left:0}
}

.product-card{cursor:pointer}
.product-card .product-buy{cursor:default}

/* 상세 그림 — 글·표만 있던 곳에 인쇄 원리, 등급 막대, 폭 그림, 원단 사진 (9/30) */
.ex-how-fig{margin:0 0 14px;padding:10px 12px;border:1px solid var(--flat-line);background:#fff}
.ex-how-fig svg{display:block;width:100%;height:auto;font-family:inherit}
.ex-scale{margin:0 0 14px}
.ex-scale ol{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none}
.ex-scale li{position:relative;display:grid;gap:2px;padding:12px 14px;color:#fff}
.ex-scale li:nth-child(1){background:#6d8494}.ex-scale li:nth-child(2){background:#3f6179}.ex-scale li:nth-child(3){background:#17384d}
.ex-scale li b{font-size:15px}.ex-scale li span{font-size:12.5px;opacity:.85}
.ex-scale li em{position:absolute;right:10px;top:10px;padding:2px 7px;background:#fff;color:var(--navy);font-style:normal;font-size:11.5px;font-weight:800}
.ex-scale li.now{box-shadow:inset 0 -4px 0 #e8793a}
.ex-scale p{display:flex;justify-content:space-between;margin:6px 0 0;font-size:12.5px;font-weight:700;color:#5d7284}
.ex-cmp-photo{display:block;width:100%;max-width:120px;aspect-ratio:4/3;object-fit:contain;margin:0 0 6px;background:#fff}
.ex-width-grid{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start}
.ex-width-fig{margin:0;padding:12px;border:1px solid var(--flat-line);background:#fff}
.ex-width-fig svg{display:block;width:100%;height:auto;font-family:inherit}
.ex-width-fig figcaption{margin-top:6px;font-size:12.5px;color:#5d7284;text-align:center}
@media(max-width:700px){.ex-width-grid{grid-template-columns:1fr}.ex-width-fig{max-width:300px;margin:0 auto}}
@media(max-width:560px){.ex-scale li{padding:10px}.ex-scale li em{position:static;justify-self:start;margin-top:4px}}
@media(max-width:560px){.ex-how-fig{padding:6px}.ex-how-fig g text{font-size:21px}}   /* 720 폭 그림이 폰에서 절반으로 줄어 글씨가 7px 이 됐다 */

/* ── 구매 흐름 6화면 (9/30) — 영카트 기본 기능 기준 ───────────────── */
.sc-item .opt{display:block;color:#4d6474}
.opt-btn{min-height:28px !important;margin-top:6px;padding:0 10px !important;font-size:12px !important}
.pane-title.with-btn{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pane-title .more{font-size:13px;font-weight:700;color:var(--navy)}
.radio-row{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;font-size:14px}
.radio-row label,.check{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink)}
.radio-row input,.check input{width:auto !important;min-height:auto !important;margin:0}
.zip-row{display:flex;gap:8px}.zip-row input{max-width:140px}.zip-row .btn{flex:none}
.disc-row{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--flat-line);font-size:14px}
.disc-row span{color:#5d7284;font-weight:700}
.pt-use{display:flex;gap:6px}.pt-use input{width:110px;min-height:34px;padding:0 10px;border:1px solid #c3d0d7;text-align:right}
.bank-box{margin-top:14px;padding:16px 18px;border:1px solid var(--flat-line);border-left:3px solid var(--navy);background:var(--flat-bg)}
.bank-box>b{display:block;margin-bottom:8px;font-size:17px;color:var(--ink)}
.bank-box dl{display:grid;grid-template-columns:90px 1fr;gap:6px 12px;margin:0 0 8px;font-size:14px}
.bank-box dt{color:#5d7284}.bank-box dd{margin:0;font-weight:700;color:var(--ink)}
.done-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px;border-bottom:2px solid var(--navy)}
.done-top b{display:block;font-size:22px;color:var(--ink)}.done-top span{font-size:13.5px;color:#5d7284}
.od-steps{display:grid;grid-template-columns:repeat(5,1fr);margin:16px 0 0;padding:0;list-style:none;counter-reset:od}
.od-steps li{position:relative;padding:10px 4px 0;border-top:4px solid var(--flat-line);text-align:center;font-size:13px;font-weight:700;color:#8a9ba6}
.od-steps li.on{border-top-color:var(--navy);color:var(--navy)}
.od-info{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.od-info section{padding:14px 16px;border:1px solid var(--flat-line);background:#fff}
.od-info h4{margin:0 0 10px;font-size:15px;color:var(--ink)}
.od-info dl{display:grid;grid-template-columns:86px 1fr;gap:7px 10px;margin:0;font-size:13.5px}
.od-info dt{color:#5d7284}.od-info dd{margin:0;color:var(--ink)}
.sc-table .no{font-size:12px;color:#7f929c}
.my-sum{display:flex;gap:8px}
.my-sum a{display:grid;gap:2px;min-width:96px;padding:10px 14px;border:1px solid var(--flat-line);background:#fff;text-align:center}
.my-sum i{font-style:normal;font-size:12px;color:#5d7284}.my-sum strong{font-size:17px;color:var(--navy)}
.wish-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wish-mini a{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px;border:1px solid var(--flat-line);background:#fff}
.wish-mini img{grid-row:span 2;width:56px;height:56px;object-fit:contain}
.wish-mini b{font-size:13.5px;color:var(--ink)}.wish-mini span{font-size:13px;font-weight:800;color:var(--navy)}
.guest-box{margin-top:26px;padding:18px;border:1px solid var(--flat-line);background:var(--flat-bg)}
.guest-box>b{display:block;margin-bottom:10px;font-size:15px;color:var(--ink)}
.wish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.wish-card{position:relative;display:grid;gap:6px;padding:12px;border:1px solid var(--flat-line);background:#fff}
.wish-card img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--flat-bg)}
.wish-card b{font-size:14.5px;color:var(--ink)}.wish-card strong{font-size:16px;color:var(--navy)}
.wc-check{position:absolute;left:18px;top:18px}.wc-check input{width:18px;height:18px}
.wc-buy{display:flex;gap:6px;flex-wrap:wrap}.wc-buy select{flex:1;min-width:0;min-height:36px;border:1px solid #c3d0d7;padding:0 8px;font-size:13px}
.wc-date{font-size:12px;color:#8a9ba6}
.wc-del{position:absolute;right:12px;top:12px;padding:3px 8px;border:1px solid var(--flat-line);background:#fff;font-size:12px;color:#5d7284}
.impl-how{margin-top:14px;padding:16px 18px;border:1px dashed #b7c6d1;background:#fff}
.impl-how>b{display:block;margin-bottom:10px;font-size:14.5px;color:var(--ink)}
.impl-how table{width:100%;border-collapse:collapse;font-size:13.5px}
.impl-how th,.impl-how td{padding:9px 10px;border-bottom:1px solid var(--flat-line);text-align:left;vertical-align:top;line-height:1.55}
.impl-how tr:first-child th{background:var(--flat-bg);color:#5d7284;font-size:12.5px}
.impl-how tr:not(:first-child) th{width:150px;color:var(--ink)}
.impl-how td:nth-child(2){width:84px}
.impl-how .kind{display:inline-block;padding:2px 7px;font-size:11.5px;font-weight:800;color:#fff;white-space:nowrap}
.impl-how .kind.skin{background:#2f7d4f}.impl-how .kind.code{background:#1f5f99}.impl-how .kind.policy{background:#b7791f}
@media(max-width:700px){
  .od-info,.wish-mini{grid-template-columns:1fr}
  .od-steps li{font-size:11.5px}
  .my-head{flex-wrap:wrap}.my-sum{width:100%}.my-sum a{flex:1;min-width:0}
  .impl-how tr:not(:first-child) th{width:96px}
  .disc-row{grid-template-columns:64px 1fr;}.disc-row>:last-child{grid-column:1/-1}
}
.frame-body .hint{margin:6px 0 0;font-size:13px;line-height:1.55;color:#5d7284}
.state:not(.ready):not(.ship):not(.done){background:#fdf1e3;color:#9a5a12}
#mypage .my-head{background:var(--flat-bg) !important;color:var(--ink) !important;border:1px solid var(--flat-line);border-top:2px solid var(--navy)}
#mypage .my-head span{color:#5d7284;opacity:1}
@media(max-width:700px){   /* 구현 방법 표 — 파일 이름이 길어 폰에서 넘쳤다 → 줄마다 쌓는다 */
  .impl-how table,.impl-how tbody,.impl-how tr,.impl-how th,.impl-how td{display:block;width:auto !important}
  .impl-how tr:first-child{display:none}
  .impl-how tr{padding:9px 0;border-bottom:1px solid var(--flat-line)}
  .impl-how th,.impl-how td{padding:2px 0;border:0;overflow-wrap:anywhere}
}
.wc-buy select{flex:1 1 100%}

/* 06 로그인·회원가입 (9/30) */
.frame-cap{margin:22px 0 8px;font-size:14px;font-weight:800;color:var(--ink)}
.login-wrap section{border-radius:0 !important;border-color:var(--flat-line) !important;background:#fff}
.join-steps{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 20px;padding:0;list-style:none}
.join-steps li{padding:9px 4px 0;border-top:4px solid var(--flat-line);text-align:center;font-size:13px;font-weight:700;color:#8a9ba6}
.join-steps li.on{border-top-color:var(--navy);color:var(--navy)}
.join-steps li.done{border-top-color:#9bb9ca;color:#5d7284}
.check.all{display:flex;padding:14px 16px;border:1px solid var(--navy);background:var(--flat-bg);font-size:15px}
.terms{margin-top:14px}
.terms-box{height:92px;overflow:auto;margin-top:8px;padding:12px 14px;border:1px solid var(--flat-line);background:#fff;font-size:13px;line-height:1.6;color:#4d6474}
.terms-table{width:100%;margin-top:8px;border-collapse:collapse;font-size:13px}
.terms-table th,.terms-table td{padding:8px 10px;border:1px solid var(--flat-line);text-align:left}
.terms-table th{background:var(--flat-bg);color:#5d7284}
.captcha{display:flex;gap:8px;align-items:center;margin-top:16px}
.captcha .cap-img{padding:9px 14px;background:repeating-linear-gradient(45deg,#e6ecf0 0 6px,#f5f7f8 6px 12px);font:800 17px/1 monospace;letter-spacing:2px;color:#17384d}
.captcha input{width:150px;min-height:40px;padding:0 10px;border:1px solid #c3d0d7}
.join-done{padding:26px 10px;text-align:center}
.join-done>b{display:block;font-size:22px;color:var(--ink)}
.join-done p{margin:10px 0 0;font-size:14px;color:#4d6474}
.join-point{display:inline-block;padding:6px 12px;background:var(--flat-bg);font-weight:700;color:var(--navy) !important}
.find-box{max-width:440px;margin:0 auto}
.find-box h3{margin:0 0 6px;font-size:18px}.find-box p{margin:0 0 16px;font-size:13.5px;color:#5d7284}
@media(max-width:560px){.captcha{flex-wrap:wrap}.captcha input{flex:1}}

/* 롤 규격별 예시 사진 (9/30) — 도면처럼 아래 색띠를 자를 필요가 없다 */
.product-visual{position:relative}
.product-visual img.is-photo{object-fit:cover !important;object-position:center !important}
.photo-note{position:absolute;right:6px;bottom:6px;padding:2px 6px;background:rgba(255,255,255,.88);font-size:11px;font-weight:600;color:#5d7284;pointer-events:none}
@media(max-width:560px){.photo-note{font-size:9.5px;right:4px;bottom:4px;padding:1px 4px}}
.product-visual .photo-note{inset:auto 6px 6px auto;top:auto;left:auto;width:auto;height:auto;display:block;border-radius:0;background:rgba(255,255,255,.9);color:#5d7284;line-height:1.35;letter-spacing:0;text-transform:none;box-shadow:none}
@media(max-width:560px){.product-visual .photo-note{inset:auto 4px 4px auto}}
.product-visual .photo-note{white-space:nowrap;max-width:calc(100% - 8px);overflow:hidden;text-overflow:clip}
#pdImage.is-photo.is-fill{object-fit:cover;object-position:center}
.pd-thumbs img.is-fill{width:100%;height:100%;object-fit:cover}
/* 안내 4칸 — 칸 안에서 가운데 정렬 (9/30) */
.trust-row>div{text-align:center;align-items:center;justify-content:center}
/* 상세 본문 원단 사진 — 가운데 (9/30) */
.ex-shot img{margin:0 auto}

/* 07 견적 종류 (9/30) */
.q-kind{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px}
.q-kind button{display:grid;gap:3px;padding:14px 16px;border:1px solid var(--flat-line);background:#fff;text-align:left;cursor:pointer}
.q-kind button b{font-size:16px;color:var(--ink)}.q-kind button span{font-size:13px;color:#5d7284}
.q-kind button.on{border:2px solid var(--navy);padding:13px 15px;background:var(--flat-bg)}
.q-lead{margin:0 0 14px;font-size:14px;color:#3d5563}
.q-h{margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--flat-line);font-size:15px;color:var(--ink)}
@media(max-width:560px){.q-kind{grid-template-columns:1fr}}

.q-guide{margin:0 0 14px;border:1px solid var(--flat-line);background:#fff}
.q-guide summary{padding:12px 16px;font-size:15px;font-weight:800;color:var(--ink);cursor:pointer}
.q-steps{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0 16px 16px;list-style:none;counter-reset:qs;gap:10px}
.q-steps li{display:grid;gap:3px;padding:10px 12px;background:var(--flat-bg);counter-increment:qs}
.q-steps li>b{font-size:14px;color:var(--ink)}.q-steps li>b::before{content:counter(qs) ". ";color:var(--navy)}.q-steps span b{color:var(--ink)}
.q-steps span{font-size:12.5px;line-height:1.55;color:#4d6474}
.q-must{margin:0 0 6px;padding:14px 16px;border-left:3px solid #b7791f;background:#fdf6ea}
.q-must>b{display:block;margin-bottom:6px;font-size:14.5px;color:#7a4f10}
.q-must ul{margin:0;padding-left:18px;font-size:13px;line-height:1.65;color:#5a4a33}
@media(max-width:700px){.q-steps{grid-template-columns:1fr}}

/* 장바구니 리본 추천 (9/30) */
.rb-rec{margin-top:18px;padding:16px 18px;border:1px solid var(--flat-line);border-left:3px solid var(--navy);background:var(--flat-bg)}
.rb-rec-head b{display:block;font-size:16px;color:var(--ink)}.rb-rec-head span{display:block;margin-top:3px;font-size:13.5px;color:#4d6474}
.rb-rec-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.rb-card{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--flat-line);background:#fff}
.rb-card img{width:64px;height:48px;object-fit:contain}
.rb-card em{display:block;font-style:normal;font-size:12px;color:#5d7284}.rb-card b{display:block;font-size:14px;color:var(--ink)}.rb-card strong{font-size:14px;color:var(--navy)}
.rb-card .btn{min-height:34px;padding:0 14px;font-size:13px}
.rb-more{display:inline-block;margin-top:10px;font-size:13px;font-weight:800;color:var(--navy);border-bottom:1px solid currentColor}
@media(max-width:700px){.rb-rec-list{grid-template-columns:1fr}}
#cart .sum{padding-top:30px}   /* 구현 방식 꼬리표가 상품 금액을 가렸다 */
/* 구매 흐름 화면의 상품 그림 — 목록 카드처럼 도면 위 색띠를 자른다 (9/30, 예람님: "다 이전 사진") */
.frame-body img[src*="assets/catalog/"]{aspect-ratio:1000/722;height:auto !important;object-fit:cover !important;object-position:center bottom !important;border-radius:0 !important}
.sc-item img[src*="assets/catalog/"],.wish-mini img[src*="assets/catalog/"]{width:72px !important}
.rb-card img[src*="assets/catalog/"]{width:72px !important}
.rb-card{grid-template-columns:72px 1fr auto}
.wish-mini a{grid-template-columns:72px 1fr}

/* 검색 결과 없음 — 견적·전화로 이어 준다 (9/30) */
.empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.empty-actions a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--flat-line);background:#fff;font-size:14px;font-weight:800;color:var(--navy)}
/* 없는 규격 → 견적문의 단추를 앞에, 크게 (10/14) */
.empty-actions a.main{min-height:50px;padding:0 24px;border-color:var(--navy);background:var(--navy);color:#fff;font-size:16px}
.empty-state .near-sizes{margin:18px 0 0}
.empty-actions button{min-height:42px;padding:0 16px;border:1px solid var(--flat-line)!important;background:#fff!important;color:var(--navy)!important;font-size:14px;font-weight:800;border-radius:0!important}   /* '전체 상품 보기'는 보조 단추로 — 견적 단추만 눈에 띄게 */
@media(max-width:640px){.empty-state{padding:28px 18px!important}.empty-actions a.main{width:100%;justify-content:center}}
#emptyReset{margin:0}
.pd-bulk{margin:8px 0 0;padding:10px 12px;border-left:3px solid #b7791f;background:#fdf6ea;font-size:13px;line-height:1.55;color:#5a4a33}
.pd-bulk a{font-weight:800;color:var(--navy);border-bottom:1px solid currentColor}
.mock-cart-note{margin:-4px 0 12px;padding:8px 12px;background:var(--flat-bg);font-size:13px;color:#5d7284}

/* ── 상세 탭 단순화 (9/30, 예람님: 단조롭고 글씨 작고 글이 많다) ─────────────
   글씨를 키우고, 첫 칸은 큰 사진 + 핵심 사양, 부가 정보는 접어 둔다. */
.pd-panel{font-size:16px}
.pd-panel .ex-h4{font-size:22px;letter-spacing:-.02em}
.pd-panel .ex-sub{font-size:15.5px;color:#4d6474}
.pd-panel .ex-note{font-size:14px}
.pd-panel .ex-cmp{font-size:15px}
.pd-panel .ex-cmp th,.pd-panel .ex-cmp td{padding:12px 14px}
.pd-panel .pd-detail-spec{font-size:15.5px}
.pd-panel .ex-care li{font-size:15.5px}
.pd-panel .ex-steps span,.pd-panel .ex-chips li{font-size:15px}
.pd-panel .ex-steps b{font-size:17px}
.ex-promise b{font-size:18px}.ex-promise span{font-size:14.5px}

/* 첫 칸: 큰 사진 | 제목·핵심 사양 */
.ex-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:center}
.ex-hero .ex-shot{position:relative;margin:0}
.ex-hero .ex-shot img{width:100%;max-width:none;aspect-ratio:1/1;object-fit:cover;border-radius:0}
.ex-hero .ex-shot[data-note]::after{content:attr(data-note);position:absolute;right:10px;bottom:10px;padding:3px 8px;background:rgba(255,255,255,.9);font-size:12.5px;color:#5d7284}
.ex-hero .ex-shot[hidden]+.ex-hero-copy{grid-column:1/-1}
.ex-hero .ex-eng{font-size:13px;letter-spacing:.12em}
.ex-hero .ex-title{margin:6px 0 10px;font-size:32px;line-height:1.25;letter-spacing:-.03em}
.ex-hero .pd-detail-lead{font-size:18px;line-height:1.6;color:#3d5563;margin:0 0 22px}
.ex-hero .ex-icons{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;padding:0;list-style:none;border-top:2px solid var(--navy)}
.ex-hero .ex-icons li{display:grid;gap:4px;padding:16px 4px;border:0;border-bottom:1px solid var(--flat-line);background:none;text-align:left}
.ex-hero .ex-icons li:nth-child(odd){padding-right:16px}
.ex-hero .ex-icons li:nth-child(even){padding-left:16px;border-left:1px solid var(--flat-line)}
.ex-hero .ex-icons b{font-size:14px;font-weight:700;color:#5d7284}
.ex-hero .ex-icons span{font-size:20px;font-weight:800;color:var(--ink);line-height:1.35}

/* 부가 정보는 접어 둔다 */
.ex-fold{border-top:1px solid var(--flat-line);padding-top:0 !important}
.ex-fold>summary{display:flex;align-items:center;justify-content:space-between;padding:20px 2px;cursor:pointer;list-style:none}
.ex-fold>summary::-webkit-details-marker{display:none}
.ex-fold>summary::after{content:"펼쳐 보기";font-size:14px;font-weight:800;color:var(--navy)}
.ex-fold[open]>summary::after{content:"접기"}
.ex-fold>summary .ex-h4{margin:0}
.ex-fold+.ex-fold{margin-top:0 !important}

/* 지관 두 장 — 글 대신 큰 숫자 */
.ex-cores article b{font-size:26px}
.ex-cores article span{font-size:16px}
.ex-cores article p{font-size:15px}

@media(max-width:900px){
  .ex-hero{grid-template-columns:1fr;gap:20px}
  .ex-hero .ex-title{font-size:26px}
  .ex-hero .pd-detail-lead{font-size:16.5px}
  .ex-hero .ex-icons span{font-size:17px}
  .pd-panel .ex-h4{font-size:20px}
}
.ex-hero .ex-icons li:last-child:nth-child(odd){grid-column:1/-1;border-left:0;padding-left:4px}

/* 상단 메뉴 가운데 정렬 (9/30 예람님) */
.desktop-nav{justify-content:center}

/* 휴대폰 검수 (9/30) */
@media(max-width:700px){
  .sc-table td.r{justify-content:flex-end;gap:2px}
  .sc-table td.r:before{margin-right:auto}
  .pd-core-pick button b{white-space:nowrap;font-size:16px}
}
@media(max-width:560px){
  .pd-panel .ex-width th,.pd-panel .ex-width td{padding:10px 6px;font-size:13.5px}
}
.ex-hero .ex-shot.is-a4 img{aspect-ratio:1000/722;object-fit:cover;object-position:center bottom;background:#fff}   /* 도면 위 색띠는 목록처럼 자른다 */

/* 12 맞춤결제 목록 (9/30) */
.pp-list{display:grid;gap:10px;margin-top:18px}
.pp-list a{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto auto;column-gap:18px;align-items:center;padding:16px 18px;border:1px solid var(--flat-line);background:#fff}
@media(hover:hover) and (pointer:fine){.pp-list a:hover{border-color:var(--navy)}}
.pp-list b{font-size:16px;color:var(--ink)}.pp-list span{grid-column:1;font-size:14px;color:#5d7284}
.pp-list strong{grid-row:1/3;grid-column:2;font-size:18px;color:var(--navy)}
.pp-list em{grid-row:1/3;grid-column:3;font-style:normal;padding:8px 14px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:800}
@media(max-width:560px){.pp-list a{grid-template-columns:1fr auto}.pp-list em{display:none}}

/* 9/30 전수조사: 하단 법정 표시 — 사업자정보 확인·호스팅·구매안전서비스 */
footer .footer-links a.privacy{font-weight:800;color:#12406b}
.footer-check{margin-left:6px;padding:1px 7px;border:1px solid #b9cbd8;border-radius:6px;font-size:12px;font-weight:700;color:#12406b;background:#fff}
.footer-escrow{grid-column:1/-1;display:flex;gap:14px;align-items:center;margin-top:16px;padding:12px 14px;border:1px solid #cddbe3;border-radius:10px;background:#fff}
.footer-escrow img{width:80px;height:auto;flex:none}
.footer-escrow p{margin:0;font-size:13px;line-height:1.6;color:#425c70}
.footer-escrow a{font-weight:800;color:#12406b;border-bottom:1px solid currentColor}
@media(max-width:560px){.footer-escrow{align-items:flex-start}.footer-escrow img{width:64px}}

.rv-policy{margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#f7fafc;font-size:13.5px;line-height:1.6;color:#425c70}
.rv-policy>b{display:block;margin-bottom:4px;color:var(--ink)}
.rv-policy ul{margin:0;padding-left:18px}
.rv-policy li b{margin-right:4px;color:var(--ink)}
.pd-rv-point p{margin:6px 0 0;font-size:13px;color:#5c748a}
.pd-policy-more{margin-top:10px}
.escrow-hint{padding:10px 12px;border-radius:8px;background:#f3f7fa}
/* 휴대폰에서 하단이 390px 을 넘던 것 (9/30 법정 표시 추가 뒤) — 항목이 줄바꿈되게 */
footer{grid-template-columns:minmax(0,1fr) auto}
footer>*{min-width:0}
.footer-corp div{flex-wrap:wrap}
.footer-corp dd{min-width:0;overflow-wrap:anywhere}
.footer-escrow p{min-width:0}
@media(max-width:560px){
  footer{grid-template-columns:minmax(0,1fr)}
  .support-actions{flex-wrap:wrap}
  .support-actions a{flex:1 1 auto}
}

/* 네이버 톡톡 떠 있는 버튼 — 폰에서는 아래 전화 띠(62px) 위로 */
.talk-float{position:fixed;right:18px;bottom:22px;z-index:35;display:flex;align-items:center;gap:6px;height:48px;padding:0 18px 0 14px;border-radius:999px;background:#03c75a;color:#fff;font-weight:800;font-size:14.5px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.talk-float svg{width:20px;height:20px;fill:#fff}
@media(hover:hover) and (pointer:fine){.talk-float:hover{background:#02b351}}
.talk-float:focus-visible{outline:3px solid #0e3558;outline-offset:2px}
@media(max-width:560px){.talk-float{right:12px;bottom:74px;height:44px;padding:0 14px 0 12px;font-size:13.5px}}
/* 안내 4칸 — 글이 위에 붙고 아래가 비어 있던 것 (9/30 예람님): 위아래 여백을 같게, 칸 안에서 세로 가운데 */
.trust-row{padding:26px 0;align-items:stretch}
.trust-row>div{display:flex;flex-direction:column;justify-content:center;padding:6px 24px}
/* 규격 검색 도면 — 처음엔 예시(40×20)를 그려 둔다 (9/30) */
.live-sample{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:999px;background:#e6eef5;color:#40596e;font-style:normal;font-size:12.5px;font-weight:800;vertical-align:2px}
#liveCanvas.is-sample svg{opacity:.85}

/* 부가세 포함 표시 (예람님 9/30: 가격은 부가세 포함) — B2B 구매 담당자가 묻는 첫 질문 */
.pd-vat{margin-left:8px;font-style:normal;font-size:13px;font-weight:600;color:#6b7c8a;align-self:center}
.total span small{font-size:12px;font-weight:600;color:#7b8e9e;margin-left:4px}

/* 휴대폰에서 누르기·읽기 쉽게 (9/30 전수조사 6번) — 수량 버튼이 옆 글에 밀려 23px 로 줄어들었다 */
.pd-qty{flex-wrap:wrap}
.pd-qty-box{flex:none}
.pd-qty-box button{flex:none;width:44px}
@media(max-width:560px){
  .qty-box button{min-width:40px;min-height:40px}
  .screen input[type=checkbox]{width:22px;height:22px}
  .product-tag,.pd-sold,.pd-low,.photo-note,.od-steps li{font-size:12px}
  .product-info dt,#productGrid .product-rows dt{font-size:12px}
  #productGrid .product-rows dd,#productGrid .product-line-m{font-size:12.5px}
  .pd-crumb a,#pdFit a{display:inline-block;padding:10px 0}
}
@media(max-width:380px){#productGrid .product-line-m{font-size:12px;letter-spacing:-.01em}}

/* 메인 고객센터 칸 — 네모 버튼 4개가 높이·정렬이 제각각이었다 (예람님 10/1).
   할 일은 하나(사진으로 문의)만 버튼으로, 전화·톡톡·이메일은 그 아래 한 줄 글자 링크로 */
.support-actions{flex-direction:column;align-items:flex-end;gap:14px}
.support-actions a.support-main{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border:0;border-radius:10px;background:var(--navy,#12304c) !important;color:#fff;font-size:16px;font-weight:800}
@media(hover:hover) and (pointer:fine){.support-actions a.support-main:hover{background:#0b2036 !important}}
.support-sub{display:flex;flex-wrap:wrap;justify-content:flex-end;margin:0;font-size:14.5px;color:#5c748a}
.support-actions .support-sub a{padding:4px 0;border:0 !important;background:none !important;font-weight:700;color:var(--ink)}
.support-sub a+a::before{content:"";display:inline-block;width:1px;height:12px;margin:0 14px;background:#c3d0d7;vertical-align:-1px}
@media(hover:hover) and (pointer:fine){.support-sub a:hover{text-decoration:underline}}
@media(max-width:560px){
  .support{flex-direction:column;align-items:stretch;gap:22px}
  .support-actions{align-items:stretch}
  .support-actions a.support-main{width:100%}
  .support-sub{justify-content:flex-start;row-gap:6px}
  .support-sub a{padding:8px 0}
  /* 누르는 곳 넓히기 — 배너 점, 원단 소개의 '규격 보기', 목록 조건 칸 */
  .feature-copy a{padding:8px 0}
  .filter-panel input[type=radio],.filter-panel input[type=checkbox]{width:20px;height:20px}
}
.support-sub a{flex:none}
/* 배너 점 — 보이는 점은 그대로, 누르는 범위만 넓힌다(padding 은 background 줄임말에 지워져 흰 원이 됐다) */
.hero-dots button{position:relative}
.hero-dots button::after{content:"";position:absolute;inset:-14px -5px}
@media(max-width:560px){.support-sub{flex-direction:column;align-items:flex-start;gap:0}.support-sub a+a::before{display:none}}

/* 인쇄 라벨 견적 안내 — 빽빽하던 9칸을 4단계 + 조건 4줄로 (10/1) */
.q-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 16px;padding:0;list-style:none;counter-reset:qf;border:1px solid var(--flat-line);background:#fff}
.q-flow li{position:relative;display:grid;gap:4px;padding:16px 18px;counter-increment:qf;border-right:1px solid var(--flat-line)}
.q-flow li:last-child{border-right:0}
.q-flow li b{font-size:16.5px;color:var(--ink)}
.q-flow li b::before{content:counter(qf);display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:999px;background:var(--navy);color:#fff;font-size:13px;vertical-align:1px}
.q-flow li span{font-size:14.5px;color:#4d6474}
.q-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin:0 0 16px;padding:0}
.q-facts div{display:grid;gap:2px}
.q-facts dt{font-size:14px;font-weight:800;color:var(--navy)}
.q-facts dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.q-must ul{font-size:15px;line-height:1.7}
.q-must>b{font-size:16px}
@media(max-width:700px){.q-flow{grid-template-columns:1fr 1fr}.q-flow li:nth-child(2){border-right:0}.q-flow li:nth-child(-n+2){border-bottom:1px solid var(--flat-line)}.q-facts{grid-template-columns:1fr}}
.q-flow-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.q-flow-3{grid-template-columns:1fr}.q-flow-3 li{border-right:0;border-bottom:1px solid var(--flat-line)}.q-flow-3 li:last-child{border-bottom:0}}
/* 견적 종류 고르기 — 아래 입력 칸과 같은 네모라 버튼인 줄 몰랐다 (예람님 10/1).
   질문 + 동그라미 선택 표시 + 고른 쪽은 진하게 채움 + 아래 입력 칸과 선으로 띄움 */
.q-kind-ask{margin:0 0 10px;font-size:16px;font-weight:800;color:var(--ink)}
.q-kind{margin:0 0 26px;padding-bottom:26px;border-bottom:1px solid var(--flat-line)}
.q-kind button{position:relative;padding:16px 18px 16px 50px;border:1.5px solid #b9cbd8;border-radius:10px;background:#fff;transition:border-color .15s,background .15s}
.q-kind button::before{content:"";position:absolute;left:18px;top:50%;width:20px;height:20px;margin-top:-10px;border:2px solid #9fb3c2;border-radius:999px;background:#fff;box-sizing:border-box}
@media(hover:hover) and (pointer:fine){.q-kind button:hover{border-color:var(--navy)}}
.q-kind button.on{padding:16px 18px 16px 50px;border:1.5px solid var(--navy);background:var(--navy)}
.q-kind button.on b{color:#fff}.q-kind button.on span{color:#d4e2ec}
.q-kind button.on::before{border:6px solid #fff;background:var(--navy)}
.q-kind button b{font-size:17px}
.q-kind button::before{border-radius:999px !important}
/* 네이버 톡톡 — 너무 안 보였다 (예람님 10/1). 지금 사이트처럼 크게: 높이 64px, 아이콘 30px, 두 줄 글자 */
.talk-float{right:24px;bottom:28px;height:64px;padding:0 24px 0 18px;gap:10px;font-size:17px;border-radius:999px !important;box-shadow:0 10px 28px rgba(3,130,60,.35),0 2px 6px rgba(0,0,0,.15)}
.talk-float svg{width:30px;height:30px}
.talk-float span{display:grid;line-height:1.15}
.talk-float small{font-size:12px;font-weight:700;opacity:.9}
@media(max-width:560px){.talk-float{right:12px;bottom:76px;height:56px;padding:0 18px 0 14px;font-size:15.5px}.talk-float svg{width:26px;height:26px}}
.talk-float{box-shadow:0 10px 28px rgba(3,130,60,.35),0 2px 6px rgba(0,0,0,.15) !important}
.q-facts div{align-content:start}
/* 가격 줄 — '부가세 포함'이 세로 가운데라 큰 가격과 바닥선이 8px 어긋났다 (10/1 전수 정렬 점검) */
.pd-vat{align-self:baseline}
/* 견적 — 전화·톡톡은 위 한 줄로, 맨 아래는 '견적 요청하기'만 */
.q-direct{margin:-4px 0 18px;font-size:14.5px;color:#4d6474}
.q-direct a{font-weight:800;color:var(--navy);border-bottom:1px solid currentColor}
.q-submit{justify-content:stretch}
.q-submit .btn.main{flex:1;min-height:54px;font-size:17px}

/* 할인 행사 (10/1) — 특가 꼬리표 · 행사가 · 이벤트 화면 */
.product-tag.sale{background:#c0392b;color:#fff}
.price-row b.sale{color:#c0392b}
.pd-sale{margin:10px 0 0;padding:10px 12px;background:#fdecea;border-left:3px solid #c0392b;font-size:14px;color:#6b2a22}
.pd-sale b{margin-right:6px;color:#c0392b}
.pd-sale a{font-weight:800;color:#6b2a22;border-bottom:1px solid currentColor}
.ev-banner{padding:34px 32px;background:linear-gradient(120deg,#12304c,#1d4f7a);color:#fff}
.ev-tag{display:inline-block;padding:4px 12px;background:#c0392b;color:#fff;font-size:14px;font-weight:800}
.ev-banner h3{margin:14px 0 8px;font-size:28px;line-height:1.3;color:#fff;letter-spacing:-.02em}
.ev-banner p{margin:0;font-size:16px;color:#d4e2ec}
.ev-note{margin:14px 0 18px;font-size:14px;color:#5d7284}
.ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ev-card{display:grid;border:1px solid var(--flat-line);background:#fff}
@media(hover:hover) and (pointer:fine){.ev-card:hover{border-color:var(--navy)}}
.ev-img{display:block;aspect-ratio:1000/722;overflow:hidden;background:#f1f6f8}
.ev-img img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
.ev-body{display:grid;gap:6px;padding:14px 16px 16px}
.ev-body .product-tag{justify-self:start}
.ev-body b{font-size:17px;color:var(--ink)}
.ev-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ev-price s{font-size:14px;color:#9fb0bc}
.ev-price strong{font-size:22px;color:#c0392b}
.ev-price i{font-style:normal;font-size:14px;font-weight:800;color:#c0392b}
@media(max-width:700px){.ev-grid{grid-template-columns:1fr 1fr}.ev-banner{padding:24px 20px}.ev-banner h3{font-size:21px}}
@media(max-width:420px){.ev-grid{grid-template-columns:1fr}}

/* 이벤트 배너 — 메인 큰 배너(.hero)와 같은 꼴: 사진 + 왼쪽 밝은 그늘 + 남색 글씨 (10/1) */
.ev-hero{position:relative;min-height:230px;display:flex;align-items:center;background:#eaf2f7 url(assets/hero-event.jpg) right center/cover no-repeat;border:1px solid var(--flat-line)}
.ev-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,249,252,.97) 0%,rgba(244,249,252,.9) 34%,rgba(244,249,252,.15) 64%,transparent 100%)}
.ev-hero-copy{position:relative;padding:28px 34px}
.ev-hero .eyebrow{margin:0 0 10px}
.ev-hero h3{margin:0;font-size:40px;line-height:1.1;letter-spacing:-.05em;color:var(--ink)}
.ev-when{margin:12px 0 0;font-size:16.5px;color:#49647b}
@media(max-width:700px){.ev-hero{min-height:180px;background-position:70% center}.ev-hero::before{background:linear-gradient(90deg,rgba(244,249,252,.97),rgba(244,249,252,.86) 62%,rgba(244,249,252,.3))}.ev-hero-copy{padding:22px 20px}.ev-hero h3{font-size:30px}.ev-when{font-size:14.5px}}
.my-quote+.hint{margin-top:8px}
@media(max-width:560px){.my-sum{flex-wrap:wrap}.my-sum a{flex:1 1 40%}}

/* 지관 정보 — 기존 상세처럼 지관 사진 2장 + 문구 (10/1) */
.ex-cores{gap:16px}
.ex-core{margin:0;border:1px solid var(--line);background:#fff}
.ex-core img{display:block;width:100%;aspect-ratio:327/300;object-fit:cover;object-position:center;background:#f4f4f6}
.ex-core figcaption{display:grid;gap:4px;padding:14px 16px 16px}
.ex-core figcaption b{font-size:20px;color:var(--ink)}
.ex-core figcaption span{margin:0;font-size:15px;font-weight:500;line-height:1.55;color:#4d6474}
.ex-core.off{opacity:.45}
.ex-core-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:15px;line-height:1.7;color:#4d6474}
.ex-cores{max-width:760px}
.ex-core img{aspect-ratio:auto;height:220px;object-fit:contain}
@media(max-width:560px){.ex-cores{grid-template-columns:1fr 1fr;gap:10px}.ex-core img{height:130px}.ex-core figcaption{padding:10px 12px 12px}.ex-core figcaption b{font-size:17px}.ex-core figcaption span{font-size:13.5px}}

/* ── 움직임·누름 다듬기 (10/2, 에밀 코왈스키 기준) ───────────────────────────
   기본 ease 는 힘이 없다. 들어오고 나가는 것은 빠르게 시작하는 ease-out, 색 바뀜은 ease.
   UI 움직임은 0.3초 안. 자주 보는 것(호버·탭 전환)은 거의 안 움직인다. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}

/* 누르면 살짝 눌린다 — 화면이 내 손을 알아들었다는 표시. 손가락으로 누를 때 생기는 파란 사각형은 끈다 */
:where(button,.btn,.primary-button,.secondary-button,.support-main,.talk-float,.ab-go,.toast-go,.ex-more){-webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .16s var(--ease-out)}
:where(button,.btn,.primary-button,.secondary-button,.support-main,.talk-float,.ab-go,.toast-go,.ex-more):not(:disabled):active{transform:scale(.97)}
.primary-button:active,.secondary-button:active,.search-button:active{transform:scale(.97)}   /* 예전 1px 내려가기 대신 */
.material-tab:not(:disabled):active,.q-kind button:not(:disabled):active{transform:scale(.985)}   /* 큰 칸은 덜 */
.q-kind button{transition:border-color .15s ease,background-color .15s ease,transform .16s var(--ease-out)}
.hero-dots button{transition:width .25s var(--ease-out),background-color .25s ease}
.product-card{transition:border-color .15s ease}   /* 떠오르기는 평면화에서 껐다 — 남은 테두리 색만 */

/* 상단 메뉴 밑줄: right 값(레이아웃)을 움직이던 것을 transform 으로 */
.desktop-nav a:after{right:0;transform:scaleX(0);transform-origin:left center;transition:transform .2s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.desktop-nav a:hover:after{transform:scaleX(1)}}

/* 토스트: 모든 속성 0.25초 → 투명도·위치만. 나갈 때가 들어올 때보다 빠르게 */
.toast{transition:opacity .15s var(--ease-out),transform .15s var(--ease-out)}
.toast.show{transition-duration:.22s}

/* 휴대폰 '조건 설정' 패널: 툭 나타나던 것을 살짝 내려오며 나타나게. 화살표도 같이 돈다 */
@media(max-width:1023.98px){
  .filter-panel.open{transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
  @starting-style{.filter-panel.open{opacity:0;transform:translateY(-6px)}}
  .filter-toggle::after{transition:transform .2s var(--ease-out)}
}

/* 접는 칸(자주 묻는 질문·상세 접기·견적 안내): 펼친 내용이 툭 나오지 않게 */
details[open]>summary~*{animation:펼침 .22s var(--ease-out)}
@keyframes 펼침{from{opacity:0;transform:translateY(-4px)}}

/* 움직임 줄이기 설정: 위치가 움직이는 것은 끄고, 눌림 표시는 남긴다(이미 transition 은 꺼져 있다) */
@media(prefers-reduced-motion:reduce){
  details[open]>summary~*{animation:none}
  @starting-style{.filter-panel.open{opacity:1;transform:none}}
}

/* 상세 가격 옆 부가세 안내: 휴대폰에서 중간에 꺾이지 않게 (10/7) */
.pd-vat{white-space:nowrap}
.pd-price{flex-wrap:wrap}
.pd-vat{order:3}
@media(max-width:560px){.pd-vat{flex-basis:100%;margin-left:0}}

/* 제작품·품절 → 견적·생산 요청 (10/7) */
.add-cart.ask{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:#fff;color:var(--navy);border:1px solid var(--navy)}
.pd-soldout .pd-ask{display:inline-flex;margin-top:10px;min-height:42px;padding:0 18px;align-items:center;text-decoration:none}
.q-made-note{margin:0 0 14px;padding:12px 14px;border-left:3px solid var(--navy);background:#f3f7fa;font-size:14.5px;line-height:1.6;color:#33495a}
.q-made-note b{margin-right:6px;color:var(--ink)}
.pd-actions .pd-quote{grid-column:1/-1;height:50px;justify-content:center;text-decoration:none}
.pd-soldout .pd-ask{display:flex;width:max-content;color:#fff !important;font-weight:800}

/* 배너 사진 천천히 움직이기 (10/7 예람님: 영상·GIF 대신). 용량 0, 관리자에서 사진만 바꾸면 그대로 적용.
   보이는 동안 7초에 걸쳐 6% 확대. 사라질 때는 크기를 그대로 둔 채 흐려지고, 다 사라진 뒤(0.9초)에 원래 크기로 돌아간다 */
.hero-slides{overflow:hidden}
.hero-image{transform:scale(1);transform-origin:60% 50%;transition:opacity .9s ease,transform 0s linear .9s}
.hero-image.on{transform:scale(1.06);transition:opacity .9s ease,transform 7s linear}
@starting-style{.hero-image.on{transform:scale(1)}}   /* 첫 장도 처음부터 움직이게 */
.hero-image:nth-child(2){transform-origin:30% 60%}
.hero-image:nth-child(3){transform-origin:70% 40%;transform:scale(1.06)}   /* 셋째 장은 반대로 — 크게 시작해 천천히 줄어든다 (10/7 예람님) */
.hero-image:nth-child(3).on{transform:scale(1)}
@media(prefers-reduced-motion:reduce){.hero-image,.hero-image.on{transform:none !important}}

/* ── 눌러지는 목업 (10/7) — mock-flow.js ── */
.state.cancel:not(.ready):not(.ship):not(.done){background:#fbeaea;color:#a23b3b}
.mf-empty{padding:28px 10px !important;text-align:center;color:#6d8191;font-size:14px}
.mf-empty a{color:var(--navy);font-weight:800;text-decoration:underline}
.mf-link{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sc-actions a.mf-off{opacity:.45}
.sc-field.mf-err input,.sc-field.mf-err select,.sc-field.mf-err textarea,.sc-field.mf-err .drop{border-color:#c94a4a !important;box-shadow:0 0 0 3px rgba(201,74,74,.12)}
.mf-made{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:13px;line-height:1.5}
.mf-closed{margin-top:16px;padding:16px 18px;background:#fbf3f3;border-left:4px solid #c94a4a}
.mf-closed b{display:block;font-size:16px;color:#8e2f2f;margin-bottom:8px}
.mf-closed dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:14px}
.mf-closed dt{color:#7b6b6b}.mf-closed dd{margin:0}
.mf-ship{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 16px;background:var(--flat-bg);font-size:14px}
.mf-admin{margin:18px 0 0;padding:16px 18px;border:2px dashed #e0a63a;background:#fffaf0;font-size:14px}
.mf-admin-head{display:block;color:#7a4b06;font-size:15px;margin-bottom:8px}
.mf-admin-head small{font-weight:600;color:#9a7a46;margin-left:6px;font-size:12.5px}
.mf-now{margin:0 0 10px}.mf-now span{color:#8a7a5c;font-size:12.5px}
.mf-adm-btns{display:flex;flex-wrap:wrap;gap:8px}
.mf-adm-list{list-style:none;margin:8px 0 0;padding:0}
.mf-adm-list li{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #f0dfbd}
.mf-adm-list li>span{flex:1;min-width:0}
.mf-log{margin-top:10px;font-size:13px}.mf-log summary{cursor:pointer;color:#7a4b06;font-weight:700}
.mf-log ol{margin:6px 0 0;padding-left:20px}.mf-log li span{color:#9a8a6a}
.mf-dlg{width:min(440px,calc(100% - 32px));border:0;padding:0;box-shadow:0 20px 50px rgba(10,30,50,.3)}
.mf-dlg::backdrop{background:rgba(12,28,44,.45)}
.mf-dlg form{padding:22px}
.mf-dlg h3{margin:0 0 12px;font-size:18px}.mf-dlg h3 small{font-size:12px;color:#8a9ba6;font-weight:700}
.mf-dlg-body p{margin:0 0 10px;font-size:14px}
.mf-dlg-name{font-weight:800}
.mf-lab{display:grid;gap:6px;margin:0 0 12px;font-size:13.5px;font-weight:700;color:#405a6e}
.mf-lab input,.mf-lab select,.mf-lab textarea{width:100%;min-height:42px;padding:8px 12px;border:1px solid #ccd9e1;font:inherit;font-weight:500;color:var(--ink)}
.mf-lab textarea{min-height:80px;resize:vertical}
.mf-dlg-act{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.mf-reset{position:fixed;left:14px;bottom:104px;z-index:41;padding:8px 12px;border:1px solid #e0a63a;border-radius:8px;background:#fffaf0;color:#7a4b06;font-size:12.5px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.08);cursor:pointer}
@media(max-width:560px){.mf-reset{bottom:166px}.mf-adm-list li{flex-wrap:wrap}}
.toast .toast-go{color:#9fd3ff;font-weight:800;margin-left:8px;text-decoration:underline}
.mf-test{margin:-4px 0 14px;padding:8px 12px;background:#fffaf0;border-left:3px solid #e0a63a;font-size:13px;color:#6b4a12}
.mf-post h3{margin:6px 0 4px;font-size:20px}
.mf-post-meta{margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--flat-line);font-size:13px;color:#7b8e9e}
.mf-post-body{min-height:120px;font-size:15px;line-height:1.75}
.mf-post-file{margin:16px 0 0;padding:10px 12px;background:var(--flat-bg);font-size:14px}
.mf-post-file a{font-weight:700;text-decoration:underline}
#mfGuest{margin:4px 0 6px;padding:12px 14px;background:var(--flat-bg)}
/* 쿠폰·포인트 (10/7) */
.mf-minus{color:#b23b3b;font-weight:800}.mf-plus{color:#246b45;font-weight:800}
.cp-top{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--flat-line);border:1px solid var(--flat-line);margin-bottom:10px}
.cp-top div{background:#fff;padding:16px 18px}.cp-top i{display:block;font-style:normal;font-size:13px;color:#6d8191}.cp-top strong{font-size:24px;color:var(--navy)}
.cp-zone{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.cp-card{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--flat-line);border-left:4px solid var(--navy);background:#fff}
.cp-card em{font-style:normal;font-size:12px;font-weight:800;color:#6d8191}.cp-card b{font-size:15px}.cp-card span{font-size:13px;color:#5d7284}
.cp-card button{justify-self:start;margin-top:6px}
.mf-cps{display:grid;gap:8px;max-height:50vh;overflow:auto}
.mf-cp{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--flat-line);cursor:pointer}
.mf-cp span{display:grid}.mf-cp small{color:#6d8191;font-size:12px}.mf-cp em{font-style:normal;font-weight:800;color:#b23b3b;font-size:13px;text-align:right}
.mf-cp.off{opacity:.55;cursor:not-allowed}.mf-cp.off em{color:#6d8191;font-weight:600}
.mf-adm-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.mf-lab.mf-inline{margin:0;grid-template-columns:auto;font-size:12px}.mf-lab.mf-inline input{width:110px;min-height:34px}
.mf-pt-hint{margin:4px 0 0}
/* 견적서·거래명세서 (10/7) — 화면에선 덮개, 인쇄할 땐 이 종이만 */
.mf-doc{position:fixed;inset:0;z-index:200;overflow:auto;background:rgba(12,28,44,.55);padding:24px 16px}
.mf-doc-bar{max-width:800px;margin:0 auto 10px;display:flex;justify-content:space-between;align-items:center;color:#fff;gap:10px}
.mf-paper{max-width:800px;margin:0 auto;background:#fff;color:#111;padding:40px 44px;font-size:13px;line-height:1.5}
.mf-paper h1{text-align:center;font-size:28px;letter-spacing:.1em;margin:0 0 24px}
.mf-paper table{border-collapse:collapse;width:100%}
.mf-paper th,.mf-paper td{border:1px solid #333;padding:6px 8px;text-align:center;vertical-align:middle}
.mf-paper th{background:#f1f3f5;font-weight:700}
.mf-paper td.l{text-align:left}.mf-paper td.r{text-align:right}
.mf-paper-head{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;margin-bottom:14px}
.mf-paper-head table:first-child th,.mf-paper-head table:first-child td{border:0;border-bottom:1px solid #999;text-align:left}
.mf-paper-lead{padding-top:12px !important;font-weight:700;border:0 !important}
.mf-paper-from th.v{width:26px;writing-mode:vertical-rl;letter-spacing:.3em}
.mf-paper-from td{text-align:left}
.mf-paper-total{margin:0 0 10px;padding:10px 12px;border:2px solid #333;font-size:14px}
.mf-paper-items tfoot th{text-align:right}
.mf-paper-note{margin:14px 0 0;color:#444}
html.mf-doc-open{overflow:hidden}
@media print{
  body>*:not(.mf-doc){display:none !important}
  .mf-doc{position:static;background:none;padding:0;overflow:visible}
  .mf-doc-bar{display:none}
  .mf-paper{max-width:none;padding:0}
  html.mf-doc-open{overflow:visible}
}
@media(max-width:640px){.mf-paper{padding:20px 14px;font-size:12px}.mf-paper-head{grid-template-columns:1fr}}
.sc-table tr.mf-cut td{color:#9aa7b2}.sc-table tr.mf-cut b{text-decoration:line-through}
.mf-adm-sub{margin:16px 0 4px;font-size:14px;color:#7a4b06}.mf-adm-sub small{font-weight:600;color:#9a7a46}
.btn.mf-leave{margin-right:auto;color:#a23b3b}
.drop{cursor:pointer}.drop.mf-has{border-color:var(--navy);color:var(--navy);font-weight:700}
.near-sizes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:4px 0 16px}
.near-sizes b{font-size:13px;color:#5d7284}
.near-sizes a{padding:6px 12px;border:1px solid var(--flat-line);background:#fff;font-size:13.5px;font-weight:700}
.pd-restock{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.pd-restock span{width:100%;font-size:13px;color:#5d7284}
.pd-restock input{flex:1;min-width:150px;height:42px;padding:0 12px;border:1px solid #ccd9e1}
.pd-restock .secondary-button{min-height:42px;padding:0 16px;font-size:14px;background:#fff}
/* 고객센터 게시판 (10/7 예람님: 게시판 느낌이 없다) — 흰 판 + 머리줄 + 목록 표 */
.mf-board-tabs{margin:0 !important}
.mf-board{background:#fff;border:1px solid var(--flat-line);border-top:2px solid var(--navy);margin-top:-1px}
.mf-board-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--flat-line);background:var(--flat-bg);font-size:14px;color:#4c6273}
.mf-board-head b{color:var(--navy)}
.mf-board-clear{margin-left:8px;border:0;background:none;color:#5d7284;text-decoration:underline;font-size:13px;cursor:pointer}
.mf-board-search{display:flex;gap:6px}
.mf-board-search select,.mf-board-search input{height:36px;border:1px solid #ccd9e1;background:#fff;padding:0 10px;font:inherit;font-size:13.5px}
.mf-board-search input{width:180px}
.mf-board-search .btn{min-height:36px;padding:0 14px;font-size:13px}
.mf-board-table{width:100%;border-collapse:collapse;font-size:14.5px}
.mf-board-table th{padding:11px 10px;background:#f2f5f7;border-bottom:1px solid #cfd9e0;color:#4c6273;font-size:13px;font-weight:800}
.mf-board-table td{padding:14px 10px;border-bottom:1px solid var(--flat-line);color:#5d7284;text-align:center}
.mf-board-table .t{text-align:left}
.mf-board-table td.t a{color:var(--ink);font-weight:700}
.mf-board-table .no{width:70px}.mf-board-table .who{width:90px}.mf-board-table .date{width:110px}.mf-board-table .hit{width:70px}
.mf-board-table small.m{display:none}
@media(hover:hover) and (pointer:fine){.mf-board-table tbody tr:hover{background:#f7fafc}.mf-board-table td.t a:hover{text-decoration:underline}}
.mf-tag{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid #b9cbd8;font-size:11px;font-weight:800;color:#4c6273;vertical-align:2px}
.mf-tag.new{border-color:#e07a3a;color:#c25d1c}
.mf-board-pages{display:flex;justify-content:center;gap:4px;padding:16px 0}
.mf-board-pages button{min-width:32px;height:32px;border:1px solid var(--flat-line);background:#fff;font-weight:700;color:#4c6273}
.mf-board-pages button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.mf-faq{margin:0 !important;padding:0 18px}
.mf-faq details{border-bottom:1px solid var(--flat-line)}
.mf-faq summary{display:flex;gap:12px;align-items:baseline}
.mf-faq summary i,.mf-faq-a i{font-style:normal;font-weight:800;color:var(--navy);flex:none}
.mf-faq-a{display:flex;gap:12px;margin:0 0 14px;padding:14px 16px;background:var(--flat-bg)}
.mf-faq-a i{color:#c25d1c}.mf-faq-a p{margin:0}
.mf-post{padding:0}
.mf-post-head{padding:20px 22px 14px;border-bottom:1px solid var(--flat-line);background:var(--flat-bg)}
.mf-post-head em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--navy)}
.mf-post-head h3{margin:4px 0 8px;font-size:21px}
.mf-post .mf-post-meta{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;border:0;font-size:13px;color:#7b8e9e}
.mf-post .mf-post-file{margin:0;padding:10px 22px;border-bottom:1px solid var(--flat-line);background:#fff}
.mf-post .mf-post-body{padding:26px 22px;min-height:180px}
.mf-post-nav{list-style:none;margin:0;padding:0;border-top:1px solid var(--flat-line)}
.mf-post-nav li{display:flex;gap:16px;padding:12px 22px;border-bottom:1px solid var(--flat-line);font-size:14px}
.mf-post-nav span{flex:none;width:56px;color:#7b8e9e;font-weight:700}
.mf-post-nav a{font-weight:700}.mf-post-nav em{font-style:normal;color:#9aa7b2}
.mf-post-foot{display:flex;justify-content:center;padding:16px}
@media(max-width:640px){
  .mf-board-head{padding:12px}.mf-board-search{width:100%}.mf-board-search input{flex:1;width:auto}
  .mf-board-table thead,.mf-board-table .no,.mf-board-table .who,.mf-board-table .date,.mf-board-table .hit{display:none}
  .mf-board-table td{padding:12px}.mf-board-table small.m{display:block;margin-top:4px;font-size:12.5px;color:#7b8e9e}
  .mf-faq{padding:0 12px}.mf-post-head,.mf-post .mf-post-body,.mf-post-nav li,.mf-post .mf-post-file{padding-left:14px;padding-right:14px}
}
@media(max-width:640px){.mf-board-search input{min-width:0}.mf-board-search select,.mf-board-search .btn{flex:none}}
/* 품절 카드 (10/7 예람님: 티가 안 나고 '생산 요청하기' 글씨가 안 보인다 — 전역 남색 !important 배경 위에 남색 글씨였다) */
.product-card.is-sold .product-visual img{opacity:.45;filter:grayscale(1)}
.product-card .sold-band{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:9px 0;background:rgba(40,48,56,.82);color:#fff;text-align:center;font-size:17px;font-weight:800;letter-spacing:.3em}
.product-card.is-sold .price-row{opacity:.55}
.product-card.is-sold .qty-box[hidden]{display:none !important}
.product-card .add-cart.ask{flex:1 1 100%;background-color:#fff !important;color:var(--navy) !important;border:1.5px solid var(--navy) !important;font-weight:800}
@media(hover:hover) and (pointer:fine){.product-card .add-cart.ask:hover{background-color:var(--navy) !important;color:#fff !important}}
.pd-main{position:relative}
.pd-main.is-sold img{opacity:.45;filter:grayscale(1)}
.pd-main .sold-band{position:absolute;left:0;right:0;top:45%;transform:translateY(-50%);padding:12px 0;background:rgba(40,48,56,.82);color:#fff;text-align:center;font-size:22px;font-weight:800;letter-spacing:.3em}
.product-card.is-sold .product-visual img{opacity:.6 !important}
.product-card .sold-band{top:auto;bottom:14px;transform:none;padding:7px 0;font-size:15px}
.pd-main.is-sold img{opacity:.6}
.pd-main .sold-band{top:auto;bottom:56px;transform:none}
.pd-main .sold-band{top:42%;bottom:auto;transform:translateY(-50%)}
.pd-is-sold .pd-price{opacity:.5}
/* 폰: 담기는 아이콘 칸이지만 품절은 글자로 (아이콘 칸에 글자 0px이라 빈 네모로 보였다) */
@media(max-width:560px){
  #productGrid .product-card .add-cart.ask{width:auto;height:34px;padding:0 10px;font-size:12px;background-image:none !important;border-radius:8px;white-space:nowrap}
  .product-card .sold-band{bottom:8px;padding:5px 0;font-size:13px}
}
@media(max-width:560px){
  #productGrid .product-card.is-sold .product-buy{position:static;margin-top:6px}
  #productGrid .product-card.is-sold .add-cart.ask{width:100%}
}
/* 주문 상세의 주문 상품 (10/7 예람님: 뭘 주문했는지 잘 안 보인다, 수량·금액·상태를 크게, 가운데 쪽으로)
   상품 칸을 반으로 줄여 나머지 세 칸이 가운데로 모인다 */
#done .mf-items{table-layout:fixed}
#done .mf-items th{font-size:14px;padding:12px 10px}
#done .mf-items th.mf-items-name{width:52%}
#done .mf-items td{padding:18px 12px;font-size:17px;font-weight:700;color:var(--ink)}
#done .mf-items td.r{text-align:center;font-size:18px;font-weight:800}
#done .mf-items .sc-item{gap:16px}
#done .mf-items .sc-item img{width:92px !important;height:92px}
#done .mf-items .sc-item b{font-size:18px;line-height:1.35}
#done .mf-items .sc-item .opt{margin-top:5px;font-size:15px}
#done .mf-items .state{padding:6px 14px;font-size:14.5px}
@media(max-width:560px){
  #done .mf-items{table-layout:auto}
  #done .mf-items td{padding:6px 0;font-size:16px}
  #done .mf-items td.r{text-align:right}
  #done .mf-items .sc-item img{width:72px !important;height:72px}
  #done .mf-items .sc-item b{font-size:16.5px}
}
/* 나의 견적 문의 — 줄을 누르면 내가 남긴 견적·답변 (10/7) */
.my-quote tr.mf-row-link{cursor:pointer}
@media(hover:hover) and (pointer:fine){.my-quote tr.mf-row-link:hover td{background:#f5f8fa}}
.mf-q-title{display:grid;gap:4px;margin:0 0 12px}.mf-q-title b{font-size:16px}.mf-q-title>span{font-size:13px;color:#7b8e9e}
.mf-q-dl{display:grid;grid-template-columns:110px 1fr;margin:0 0 12px;border-top:1px solid var(--flat-line);font-size:14px}
.mf-q-dl dt,.mf-q-dl dd{margin:0;padding:8px 6px;border-bottom:1px solid var(--flat-line)}
.mf-q-dl dt{color:#6d8191;font-weight:700;background:var(--flat-bg)}
.mf-q-answer{padding:12px 14px;background:#eef5fb;border-left:3px solid var(--navy);font-size:14px}
.mf-q-answer p{margin:6px 0 0}
/* 배송지 변경·비회원 찾기 */
.btn.mf-mini{min-height:28px;padding:0 10px;font-size:12px;margin-left:8px;vertical-align:1px}
.mf-guest-help{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0}
.mf-linkbtn{border:0;background:none;padding:0;color:#4c6273;font-size:13px;text-decoration:underline;cursor:pointer}
.mf-mail{padding:12px 14px;border:1px solid var(--flat-line);background:#fff}.mf-mail p{margin:8px 0 0;font-size:14px}

/* 장바구니·주문 내역도 주문 상세처럼 크게 (10/7 예람님) — #done 전용이던 규칙을 .mf-items 공통으로 */
.sc-table.mf-items{table-layout:fixed}
.sc-table.mf-items th{font-size:14px;padding:12px 10px}
.sc-table.mf-items td{padding:18px 12px;font-size:17px;font-weight:700;color:var(--ink)}
.sc-table.mf-items td.r{text-align:center;font-size:18px;font-weight:800}
.sc-table.mf-items .sc-item{gap:16px}
.sc-table.mf-items .sc-item img{width:92px !important;height:92px}
.sc-table.mf-items .sc-item b{font-size:18px;line-height:1.35}
.sc-table.mf-items .sc-item .opt{margin-top:5px;font-size:15px}
.sc-table.mf-items .state{padding:6px 14px;font-size:14.5px}
.sc-table.mf-items .no{font-size:13px;font-weight:600}
#cart .mf-items th.mf-items-check{width:56px}
#cart .mf-items th.mf-items-name{width:56%}
#cart .mf-items .opt-btn{margin-top:8px;min-height:32px;font-size:13px}
#orders .mf-items th.mf-items-date{width:170px}
#orders .mf-items th.mf-items-name{width:40%}
#orders .mf-items th.mf-items-act{width:200px}
#orders .mf-items td[data-th="주문"] b{font-size:17px}
#orders .mf-items .sc-item img{width:72px !important;height:72px}
#orders .mf-items td .btn{min-height:36px !important;font-size:13.5px !important;margin:2px 0}
@media(max-width:560px){
  .sc-table.mf-items{table-layout:auto}
  .sc-table.mf-items td{padding:6px 0;font-size:16px}
  .sc-table.mf-items td.r{text-align:right}
  .sc-table.mf-items .sc-item img{width:72px !important;height:72px}
  .sc-table.mf-items .sc-item b{font-size:16.5px}
}

/* 주문 진행 단계 (10/7 예람님: 진행 중인 티가 안 난다) — 동그라미 + 잇는 선, 끝난 단계 ✓·날짜, 지금 단계는 크게·은은하게 깜빡 */
.od-steps{display:grid;grid-template-columns:repeat(5,1fr);margin:22px 0 6px;padding:0;list-style:none}
.od-steps li{position:relative;display:grid;justify-items:center;gap:6px;padding:0 4px;border:0 !important;text-align:center;color:#8a9ba6}
.od-steps li::before{content:"";position:absolute;top:19px;right:50%;width:100%;height:4px;background:var(--flat-line);z-index:0}
.od-steps li:first-child::before{display:none}
.od-steps li.done::before,.od-steps li.now::before{background:var(--navy)}
.od-steps i{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:3px solid var(--flat-line);background:#fff;font-style:normal;font-size:16px;font-weight:800;color:#8a9ba6}
.od-steps li.done i{background:var(--navy);border-color:var(--navy);color:#fff}
.od-steps li.now i{width:50px;height:50px;margin-top:-4px;background:#fff;border:4px solid var(--navy);color:var(--navy);font-size:18px;box-shadow:0 0 0 6px rgba(23,56,77,.12);animation:od-now 1.8s ease-in-out infinite}
.od-steps b{font-size:14.5px;font-weight:800}
.od-steps li.done b{color:var(--ink)}
.od-steps li.now b{color:var(--navy);font-size:16px}
.od-steps small{min-height:16px;font-size:12px;color:#7b8e9e}
.od-steps li.now small{color:#c25d1c;font-weight:800}
@keyframes od-now{50%{box-shadow:0 0 0 11px rgba(23,56,77,.05)}}
@media(prefers-reduced-motion:reduce){.od-steps li.now i{animation:none}}
@media(max-width:560px){
  .od-steps i{width:30px;height:30px;font-size:13px;border-width:2px}
  .od-steps li.now i{width:36px;height:36px;margin-top:-3px;border-width:3px}
  .od-steps li::before{top:13px;height:3px}
  .od-steps b,.od-steps li.now b{font-size:11.5px}
  .od-steps small{font-size:10.5px}
}
.od-steps i{border-radius:50% !important}
/* 지금 단계 깜빡임 — 전역 box-shadow:none !important 때문에 그림자 대신 고리(::after)로 */
.od-steps li.now i{animation:none}
.od-steps li.now i::after{content:"";position:absolute;inset:-9px;border:3px solid rgba(23,56,77,.35);border-radius:50% !important;animation:od-ring 1.8s ease-out infinite}
@keyframes od-ring{from{transform:scale(.85);opacity:1}to{transform:scale(1.25);opacity:0}}
@media(prefers-reduced-motion:reduce){.od-steps li.now i::after{animation:none;opacity:.6;transform:none}}
.mf-ship span b{margin-left:6px;font-size:16px}

/* ═══ 글씨 키우기 (10/8 예람님: "전체적으로 글씨가 너무 작다") ═══════════════════════════════
   측정(글자 수 기준): 목업 가운데 크기 13~14px, 14px 미만 42~90% — 지금 라이브(15px·24%)보다 작았다.
   목표: 가운데 15px 이상 · 14px 미만 20% 이하 · 12px 미만 0. 본문 16 · 보조 14~15 · 칸 이름 15 · 입력 16(아이폰 확대 방지).
   이 묶음을 지우면 예전 크기로 돌아간다 (백업: _부분백업_flat.css.20261008_글씨키우기전) */
body{font-size:16px}
.notice{font-size:14.5px}
/* 안내 문구·보조 글씨 */
.hint,.sc-field .hint,p.hint{font-size:14.5px !important;line-height:1.6}
.mock-note{font-size:13.5px}
/* 입력 칸 */
.sc-field label{font-size:15px !important}
.sc-field input,.sc-field select,.sc-field textarea,.mf-lab input,.mf-lab select,.mf-lab textarea,.pt-use input,.guest-box input,.zip-row input,
.mf-board-search input,.mf-board-search select,.pd-restock input,.captcha input,#order select,#order input:not([type=checkbox]):not([type=radio]){font-size:16px !important}
.mf-lab{font-size:15px}
.check,.radio-row label,.pays label,.mf-made{font-size:15px}
/* 단추 */
.btn{font-size:15px}
.btn[style*="font-size:13px"]{font-size:14.5px !important}
.state{font-size:13.5px !important;padding:5px 11px}
/* 표 */
.sc-table{font-size:15.5px}
.sc-table th{font-size:14px !important}
.sc-table .no{font-size:13.5px}
.sc-item b{font-size:16px}
.sc-item span,.sc-item .opt{font-size:14.5px}
.od-info dl,.od-info dd,.od-info dt,.sum dl,.sum dt,.sum dd,.bank-box dl{font-size:15.5px}
.od-info h4{font-size:17px}
.done-top span{font-size:14.5px}
/* 마이페이지 */
.my-head span{font-size:15px}
.my-sum i{font-size:14px}
.my-grid b{font-size:16px}
.my-grid span{font-size:14px}
.wish-mini b{font-size:15px}.wish-mini span{font-size:14.5px}
.pane-title small{font-size:14px}
/* 게시판·문의·견적 */
.catalog-tabs button,.mf-board-tabs button{font-size:15px !important}
.mf-board-head,.mf-board-table{font-size:16px}
.mf-board-table th{font-size:14px}
.mf-tag{font-size:12.5px}
.qna-list,.qna-q,.qna-a,.qna-top b{font-size:15.5px}
.qna-date{font-size:13.5px}
.q-kind span,.q-direct,.q-kind-ask{font-size:15px}
.q-facts dt,.q-facts dd,.q-must li,.q-flow span,.q-lead{font-size:15px}
.drop{font-size:14.5px}
/* 쿠폰·포인트·관리판 밖 */
.cp-top i{font-size:14.5px}
.cp-card em{font-size:13.5px}.cp-card span{font-size:14.5px}
.mf-q-dl,.mf-q-answer{font-size:15px}
.mf-dlg-body p{font-size:15px}
.mf-guest-help .mf-linkbtn{font-size:14.5px}
.mf-test{font-size:14.5px}
/* 메인·목록 */
.finder-grid label>span:first-child,.finder-grid label>span:not(.field){font-size:14.5px}
.quick-sizes,.quick-sizes button{font-size:14.5px}
.trust-row span{font-size:14.5px}
.product-info dl dt,.product-rows dt{font-size:13.5px !important}
.product-info dl dd,.product-rows dd{font-size:14.5px !important}
.price-row s{font-size:14px}
.product-material{font-size:14px}
.product-tag{font-size:12.5px !important}
.filter-panel span,.filter-group span,.fp-group label,.fp-group span{font-size:15px}
/* 상품 상세 */
.pd-detail-spec dt,.pd-detail-spec dd,.pd-core small,.pd-core span{font-size:14.5px}
.pd-qty-limit{font-size:14px}
/* 바닥글 */
.footer-corp{font-size:14px}
.footer-links{font-size:14.5px}
.footer-escrow p,.footer-main p,.footer-copy{font-size:14px}
@media(max-width:560px){
  #productGrid .product-line-m{font-size:13px !important}
  .product-info dl dt,.product-rows dt{font-size:13px !important}
  .od-steps b,.od-steps li.now b{font-size:12.5px}
  .od-steps small{font-size:12px}
}
/* 글씨 키우기 2차 — 다시 재서 남은 작은 글씨 */
.product-rows dt,.product-info dl dt{font-size:14px !important}
.product-rows dd,.product-info dl dd{font-size:15px !important}
.price-row s,#productGrid .price-row s{font-size:14px !important}
.product-material,.product-info .product-material{font-size:14px !important}
.filter-choices label,.filter-choices span{font-size:15px !important}
.material-tab span{font-size:14.5px !important}
.catalog-guide span,.catalog-guide b{font-size:14.5px}
.pd-core .ok small,.pd-core button small,.pd-core button span{font-size:14px !important}
.pd-sizes a,.ok a,.pd-alt a{font-size:14.5px}
.pd-tabs td,.pd-tabs th,.pd-panel td,.pd-panel th,.pd-buy td,.pd-buy th,.pd-fit span{font-size:14.5px !important}
.rb-rec-head span{font-size:15px !important}
.rb-card em{font-size:13.5px !important}
.btn.opt-btn{font-size:14px !important;min-height:34px}
.rb-more{font-size:14.5px !important}
.btn.mf-mini{font-size:13.5px !important;min-height:32px}
.pane-title a.more,.pane-title .more{font-size:14.5px !important}
.sc-table .no,.sc-table span.no{font-size:14px !important}
#orders .mf-items td .btn{font-size:14.5px !important}
.q-kind button span,.q-kind span{font-size:15px !important}
.drop span{font-size:14px !important}
.rv-policy li,.rv-policy b{font-size:15px !important}
.rv-list p,.rv-list li>p{font-size:15.5px !important}
.rv-tags li{font-size:14.5px !important}
.rv-top em,.rv-top span,.rv-top b{font-size:14px !important}
.pd-rv-point li,.pd-rv-point p{font-size:14.5px !important}
.wc-date,.wc-del{font-size:13.5px !important}
.pay-note p,.pay-note a{font-size:15px !important}
.pp-list em,.pp-list span{font-size:14.5px !important}
.login-wrap section p,.login-wrap p.mf-test,.mf-test{font-size:15px !important}
.login-links a{font-size:14.5px !important}
.join-steps li{font-size:14.5px !important}
.terms-box,.terms-table td,.terms-table th{font-size:14.5px}
.find-box p{font-size:15px}
.hint,.sc-field .hint,p.hint{font-size:15px !important}
.ab-tag{font-size:13px !important}
.pagination button{font-size:14px !important}
.catalog-guide a{font-size:14.5px !important}
.rv-score i{font-size:14px !important}
.od-steps li.now small,.od-steps small{font-size:13px}
@media(max-width:560px){
  .terms{overflow-x:auto}
  .terms-table td,.terms-table th{font-size:13px;padding:6px 5px}
}

/* ═══ 상품 카드 포커스 (10/8 예람님: 엑셀의 포커스 셀처럼 — 올리면 조금 커지며 앞으로, 뒤는 아주 약하게 흐리게) ═══
   마우스가 있는 화면에서만. 움직임 줄이기 설정이면 크기·흐림 없이 테두리만 */
@media(hover:hover) and (pointer:fine){
  #productGrid .product-card{position:relative;transition:transform .24s var(--ease-out,cubic-bezier(.23,1,.32,1)),filter .3s ease,opacity .3s ease,box-shadow .24s ease,border-color .2s ease}
  /* 10/15 오재민 님: 움직임이 강함 → 커지는 정도·흐림을 줄이고 그림자 없이 테두리로 */
  #productGrid .product-card:hover{transform:translateY(-2px) scale(1.012) !important;z-index:5;border-color:var(--navy) !important;box-shadow:none !important}
  #productGrid:has(.product-card:hover) .product-card:not(:hover){opacity:.9;transition-delay:.06s}
}
@media(prefers-reduced-motion:reduce){
  #productGrid .product-card,#productGrid .product-card:hover{transform:none !important;transition:border-color .15s ease}
  #productGrid:has(.product-card:hover) .product-card:not(:hover){filter:none;opacity:1}
}

/* 상품 카드: 품명·가격 오른쪽 정렬, 수량 따라 합계 (10/8 예람님) — 폰은 오른쪽에 담기 아이콘이 있어 왼쪽 그대로 */
@media(min-width:561px){
  #productGrid .product-info .product-material{justify-content:flex-end;text-align:right}
  #productGrid .product-info h3{text-align:right}
  #productGrid .price-row{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:4px 8px;text-align:right}
}
#productGrid .price-each{flex-basis:100%;font-size:13.5px;font-weight:700;color:#7b8e9e}
#productGrid .price-each:empty{display:none}

/* ═══ 상품 비교 (10/8 다시) — '비교하기' → 카드를 누르는 대로 아래 표에 ═══ */
.product-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.cmp-start{flex:none;min-height:46px;padding:0 20px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);font-size:16px;font-weight:800;cursor:pointer}
.cmp-start[aria-pressed="true"]{background:var(--navy);color:#fff}
@media(hover:hover) and (pointer:fine){.cmp-start:hover{background:var(--navy);color:#fff}}
html.cmp-mode #productGrid .product-card{cursor:copy}
html.cmp-mode #productGrid .product-card .product-buy{pointer-events:none;opacity:.5}
#productGrid .product-card.cmp-picked{outline:3px solid var(--navy);outline-offset:-3px}
#productGrid .product-card.cmp-picked::after{content:attr(data-cmp-no);position:absolute;top:10px;left:10px;z-index:4;display:grid;place-items:center;width:34px;height:34px;border-radius:50% !important;background:var(--navy);color:#fff;font-size:16px;font-weight:800}
/* 비교 중에는 포커스 흐림을 끈다 — 고른 카드가 흐려 보이면 헷갈린다 */
html.cmp-mode #productGrid:has(.product-card:hover) .product-card:not(:hover){filter:none;opacity:1}

.cmp-dock{position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:min(62vh,600px);display:flex;flex-direction:column;background:#fff;border-top:3px solid var(--navy);box-shadow:0 -14px 34px rgba(16,40,60,.14) !important;animation:cmp-up .26s var(--ease-out,cubic-bezier(.23,1,.32,1))}
@keyframes cmp-up{from{transform:translateY(100%)}}
.cmp-dock-head{flex:none;display:flex;align-items:center;gap:14px;max-width:1224px;width:100%;margin:0 auto;padding:12px 20px}
.cmp-dock-head>b{font-size:18px}.cmp-dock-head>b span{margin-left:4px;color:#7b8e9e;font-weight:700}
.cmp-dock-tip{flex:1;font-size:15px;color:#5d7284}
.cmp-fold,.cmp-end{min-height:40px;padding:0 14px;border:1px solid #b9cbd8;background:#fff;color:#4c6273;font-size:15px;font-weight:800;cursor:pointer}
.cmp-end{border-color:var(--navy);color:var(--navy)}
.cmp-dock.is-folded .cmp-dock-body{display:none}
.cmp-dock-body{overflow:auto;border-top:1px solid var(--flat-line)}
.cmp-table{width:100%;max-width:1224px;margin:0 auto;border-collapse:collapse;table-layout:fixed}
.cmp-table th,.cmp-table td{padding:12px 14px;border-bottom:1px solid var(--flat-line);text-align:center;vertical-align:middle;font-size:16px;line-height:1.45}
.cmp-table tbody th,.cmp-table tfoot th,.cmp-corner{width:120px;text-align:left !important;font-size:15px;font-weight:800;color:#5d7284;background:var(--flat-bg)}
.cmp-table thead th{position:relative;vertical-align:top;padding-top:14px;font-weight:700}
.cmp-table thead img{display:block;width:96px;height:66px;margin:0 auto 8px;object-fit:contain;background:#f5f7f8}
.cmp-table thead b{display:block;font-size:17px;color:var(--ink)}
.cmp-table thead strong{display:block;margin-top:4px;font-size:20px;color:var(--navy)}
.cmp-x{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;background:none;color:#9aa7b2;font-size:16px;cursor:pointer}
@media(hover:hover) and (pointer:fine){.cmp-x:hover{color:var(--ink)}}
.cmp-table td.is-best{color:#1f6b45;font-weight:800}
.cmp-table td em{display:block;font-style:normal;font-size:13px;font-weight:800;color:#1f6b45}
.cmp-slot{color:#9aa7b2;background:repeating-linear-gradient(135deg,#fff 0 10px,#f7f9fa 10px 20px)}
.cmp-slot span{display:block;padding:28px 0;font-size:14px;font-weight:700}
.cmp-table tfoot td{padding:12px 10px 16px;border-bottom:0}
.cmp-buy{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border:0;background:var(--navy);color:#fff;font-size:15px;font-weight:800;cursor:pointer}
.cmp-buy.ask{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.cmp-more{display:block;margin-top:8px;font-size:14px;color:#5d7284;text-decoration:underline}
html.cmp-mode body{padding-bottom:min(62vh,600px)}
@media(max-width:560px){
  .cmp-start{min-height:40px;padding:0 14px;font-size:15px}
  .cmp-dock{bottom:52px;max-height:66vh}       /* 아래 전화 띠 위 */
  .cmp-dock-head{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .cmp-dock-tip{order:3;flex-basis:100%;font-size:14px}
  .cmp-table{table-layout:auto;min-width:calc(84px + var(--cols,2) * 150px)}
  .cmp-table th,.cmp-table td{padding:10px 8px;font-size:14.5px}
  .cmp-table tbody th,.cmp-table tfoot th,.cmp-corner{width:84px;font-size:13.5px;position:sticky;left:0;z-index:1}
  .cmp-table thead b{font-size:15px}.cmp-table thead strong{font-size:17px}
  html.cmp-mode body{padding-bottom:70vh}
}
@media(prefers-reduced-motion:reduce){.cmp-dock{animation:none}}
#productGrid .product-card{position:relative}
/* 비교 판 높이 — 위 카드를 계속 누를 수 있게 화면의 절반 아래로 */
.cmp-dock{max-height:min(46vh,440px)}
html.cmp-mode body{padding-bottom:min(46vh,440px)}
.cmp-table thead img{width:72px;height:50px;margin-bottom:6px}
.cmp-table thead th{padding-top:10px;padding-bottom:10px}
.cmp-table thead th:not(.cmp-corner):not(.cmp-slot){background:#fff;position:sticky;top:0;z-index:2}
.cmp-table thead .cmp-corner{position:sticky;top:0;z-index:2}
@media(max-width:560px){.cmp-dock{max-height:56vh}html.cmp-mode body{padding-bottom:62vh}}

/* 마이페이지 (10/8 예람님) — 요약 칸은 오른쪽 끝, 섹션은 카드로 나눠 접기 */
#mypage .my-head{justify-content:space-between}
#mypage .my-sum{margin-left:auto;display:grid;grid-template-columns:repeat(4,118px);gap:8px}
#mypage .my-sum a{min-width:0}
@media(hover:hover) and (pointer:fine){#mypage .my-sum a:hover{border-color:var(--navy)}}
.my-sec{margin-top:18px;border:1px solid var(--flat-line);background:#fff}
.my-sec>summary{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;list-style:none;user-select:none}
.my-sec>summary::-webkit-details-marker{display:none}
.my-sec>summary::before{content:"";flex:none;width:10px;height:10px;border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(-45deg);transition:transform .2s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.my-sec[open]>summary::before{transform:rotate(45deg) translate(-2px,-2px)}
.my-sec>summary .pane-title{flex:1;margin:0 !important;padding:0 !important;border:0 !important;font-size:18px}
.my-sec>summary .more{font-size:14.5px}
.my-count{margin-left:6px;font-size:14.5px;font-weight:700;color:#7b8e9e}
#my-quotes .my-count{color:#c25d1c}
@media(hover:hover) and (pointer:fine){.my-sec>summary:hover{background:var(--flat-bg)}}
.my-sec[open]>summary{border-bottom:1px solid var(--flat-line)}
.my-sec>:not(summary){margin-left:20px;margin-right:20px}
.my-sec>.sc-table{width:calc(100% - 40px)}
.my-sec>:last-child{margin-bottom:18px}
.my-sec>.sc-table th{border-top:0}
.my-sec .wish-mini{margin-top:16px}
@media(max-width:700px){
  #mypage .my-sum{width:100%;grid-template-columns:repeat(4,1fr)}
}
@media(max-width:560px){
  #mypage .my-sum{grid-template-columns:repeat(2,1fr)}
  .my-sec>summary{padding:14px 14px}
  .my-sec>:not(summary){margin-left:12px;margin-right:12px}
  .my-sec>.sc-table{width:calc(100% - 24px)}
}
@media(prefers-reduced-motion:reduce){.my-sec>summary::before{transition:none}}
.my-sec>p.hint{margin:12px 20px 18px !important}@media(max-width:560px){.my-sec>p.hint{margin:10px 12px 14px !important}}

/* 장바구니·주문 내역도 마이페이지처럼 카드로 (10/8 예람님) */
.sec-card{margin-top:18px;border:1px solid var(--flat-line);background:#fff}
.sec-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 20px;border-bottom:1px solid var(--flat-line)}
.sec-head .pane-title{flex:1;margin:0 !important;padding:0 !important;border:0 !important;font-size:18px}
.sec-tools{display:flex;flex-wrap:wrap;gap:8px}
.sec-tools .btn{min-height:38px;padding:0 14px;font-size:14.5px}
.sec-card>.sc-table{width:calc(100% - 40px);margin:0 20px 6px}
.sec-card>.sc-table th{border-top:0}
.sec-sum{padding:4px 20px 6px}
.sec-sum .sum{margin:0 !important;border:0 !important;background:none !important;padding:12px 0 !important}
#cart .rb-rec{margin-top:18px}
.sec-note{font-size:14px;color:#7b8e9e;font-weight:600}
#mfGuestLookup .guest-box{margin:16px 20px 18px !important;border:0 !important;padding:0 !important;background:none !important}
#mfOrderGroups .my-sec>.mf-empty{margin:14px 20px 18px}
p.mf-empty.sec-card{padding:28px 20px !important}
@media(max-width:560px){
  .sec-head{padding:12px 12px}
  .sec-card>.sc-table{width:calc(100% - 24px);margin:0 12px 6px}
  .sec-sum{padding:4px 12px 6px}
  #mfGuestLookup .guest-box{margin:12px 12px 14px !important}
}

/* 주문서도 카드로 (10/8 예람님) — 왼쪽 다섯 장(주문자·배송지·할인·결제·세금계산서), 오른쪽 주문 상품·합계 한 장 */
.sec-body{padding:18px 20px 20px}
.sec-body>.sc-field:last-child,.sec-body>.two:last-child .sc-field{margin-bottom:0}
#order .split>div>.sec-card:first-child,#ordSide{margin-top:0}
#ordSide .sec-head .more{font-size:14.5px}
#ordSide .sum{margin:0 20px !important;border:0 !important;background:none !important;padding:16px 0 20px !important}
#ordDisc .disc-row:last-of-type{border-bottom:0}
#ordPay .escrow-hint{margin-top:0}
#ordPay .bank-box{margin-top:16px}
@media(max-width:560px){
  .sec-body{padding:14px 12px 16px}
  #ordSide .sum{margin:0 12px !important}
}

/* 견적문의 제목 칸 (10/8 예람님) */
#quote .q-title{margin:0}
#quote .q-title input{font-weight:700}

/* 견적문의도 카드로 (10/8 예람님) */
#qKind .q-kind{margin:0 0 20px !important;padding:0 !important;border:0 !important}
#quote .q-panel .q-must{margin-bottom:0}
#quote .q-panel .q-facts{margin-bottom:18px}
#quote .q-made-note{margin:18px 0 0}
#quote .q-submit{margin-top:22px}

/* 남은 화면도 카드로 (10/8 예람님: 회색 바탕에 내용이 떠 있어 집중이 흩어진다) — 주문 상세·가입·1:1 문의·후기·맞춤결제·행사·쿠폰 */
.sec-body>:first-child{margin-top:0}
.frame-body>.sec-card:first-child,.join-steps+.sec-card{margin-top:0}
.sec-card+.sc-actions{margin-top:20px}
.sec-card>.sc-table:last-child{margin-bottom:14px}
.sec-head .catalog-tabs{margin:0 !important}
.od-info{margin-top:18px}
.od-info section{padding:18px 20px}
.join-done,.find-box{border:1px solid var(--flat-line);background:#fff}
.join-done{padding:34px 20px}
.find-box{padding:26px 24px}
#pay .pp-list{margin-top:16px}
#event .ev-hero+.sec-card{margin-top:18px}

/* 상품 상세 아래쪽도 카드로 (10/8 예람님) — 위 구매 영역·큰 사진 소개(.ex-hero)는 그대로.
   상세정보 탭: 주제마다 카드 한 장(머리줄 + 내용), 접는 칸은 마이페이지 접기 카드와 같은 꼴.
   구매후기·상품문의·배송 탭: 탭 내용 전체가 카드 한 장. HTML 은 그대로(상세 스킨에서 칸을 감싸기만) */
.pd-panel .ex-block:not(.ex-hero){margin-bottom:16px;padding:24px 26px;border:1px solid var(--flat-line);background:#fff}
.pd-panel .ex-block:not(.ex-hero):not(.ex-fold)>.ex-h4{margin:-24px -26px 18px;padding:18px 26px;border-bottom:1px solid var(--flat-line)}
.pd-panel .ex-hero{margin-bottom:28px}
.pd-panel .ex-fold{padding:0 !important;border:1px solid var(--flat-line);background:#fff}
.pd-panel .ex-fold+.ex-fold{margin-top:0 !important}
.pd-panel .ex-fold>summary{padding:18px 26px}
.pd-panel .ex-fold[open]>summary{border-bottom:1px solid var(--flat-line)}
.pd-panel .ex-fold>:not(summary){margin-left:26px;margin-right:26px}
.pd-panel .ex-fold>summary+*{margin-top:18px}
.pd-panel .ex-fold>:last-child{margin-bottom:22px}
@media(hover:hover) and (pointer:fine){.pd-panel .ex-fold>summary:hover{background:var(--flat-bg)}}
.pd-panel:not([data-panel=detail]){margin-top:22px;padding:26px 28px;border:1px solid var(--flat-line);background:#fff}
.pd-panel[data-panel=ship] .ex-fold{margin:4px 0 26px}
@media(max-width:560px){
  .pd-panel .ex-block:not(.ex-hero){padding:18px 14px}
  .pd-panel .ex-block:not(.ex-hero):not(.ex-fold)>.ex-h4{margin:-18px -14px 14px;padding:14px}
  .pd-panel .ex-fold{padding:0 !important}
  .pd-panel .ex-fold>summary{padding:15px 14px}
  .pd-panel .ex-fold>:not(summary){margin-left:14px;margin-right:14px}
  .pd-panel:not([data-panel=detail]){padding:18px 14px}
}

/* 리본 인티마 정리 (10/8) — 리본 목록 위 견적문의 한 줄, 진열 안 하는 상품 화면 */
.catalog-guide.rb-other{display:block}
.catalog-guide.rb-other a{font-weight:800;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.pd-gone{max-width:560px;margin:60px auto 90px;padding:34px 28px;border:1px solid var(--flat-line);background:#fff;text-align:center}
.pd-gone b{display:block;font-size:20px;color:var(--ink)}
.pd-gone p{margin:10px 0 20px;font-size:16px;color:#4d6474}
.pd-gone p a{font-weight:800;color:var(--navy);text-decoration:underline}

/* 규격 검색 도면 — A4 는 세로로 긴 한 장이라 높이를 더 준다 (10/8) */
#liveCanvas[data-kind="a4"] svg{max-height:320px}
#liveCanvas[data-kind="ribbon"] svg{max-height:230px}

/* 3D — 제품군마다 쓰는 버튼만 (10/8) */
/* 10/12: 숨기지 않는다 — 단추 자리가 늘 같게. 그 제품에 없는 단추는 roll3d.js 가 disabled 로 (아래 모양) */

/* 3D 보는 방향 단추는 A4 에서만 · 그냥 휠을 굴리면 확대 안내를 잠깐 진하게 (10/8) */
.roll-hint{transition:color .2s}
.roll-hint.flash{color:#0e568f;font-weight:700}

/* A4 3D 엔 도안 넣기·유광/무광이 없다 (10/8 예람님) */


/* 라벨 내용 단추는 롤라벨에서만 (10/8) */


/* 3D 그림 위 '예시' 표 (10/8 예람님: 무조건 잘 보이게) — 끌기·확대를 막지 않게 pointer-events 없음 */
.roll-stage{position:relative}
.roll-sample{position:absolute;left:14px;top:18px;z-index:2;display:flex;align-items:center;gap:8px;margin:0;padding:6px 12px 6px 6px;
  background:rgba(255,255,255,.95);border:1px solid #c9d6df;pointer-events:none;font-size:14px;font-weight:700;color:#17384d}
.roll-sample b{padding:3px 9px;background:#17384d;color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.04em}
@media(max-width:560px){.roll-sample{left:8px;top:12px;font-size:12.5px;padding:4px 9px 4px 4px}.roll-sample b{font-size:12px;padding:2px 7px}}

/* 히어로 진한 남색 + 규격 검색 상자 그림자 (10/8 예람님, 시안 F 밤 무대에서 두 가지만 가져옴)
   ① 큰 사진 위를 진한 남색으로 덮고 글은 흰색 — 사진 속 롤·기계가 조명 받은 것처럼 뜬다. 모서리는 9/29 원칙대로 직각
   ② 도면·3D 가 들어 있는 규격 검색 상자만 떠 있는 그림자 한 겹 — 9/29 '그림자 없음'의 예외(예람님 요청). 다른 곳은 그대로 그림자 없음 */
html .hero{background:#0b1a24}
html .hero .hero-shade{background:linear-gradient(90deg,rgba(11,26,36,.97) 0%,rgba(11,26,36,.9) 34%,rgba(11,26,36,.25) 62%,rgba(11,26,36,.05) 100%) !important}
@media(max-width:900px){html .hero .hero-shade{background:linear-gradient(90deg,rgba(11,26,36,.95),rgba(11,26,36,.8) 62%,rgba(11,26,36,.35)) !important}}
html .hero h1{color:#fff}   /* 크기·굵기는 원래대로 (10/8 예람님: 얇은 건 빼고) */
html .hero-copy{color:#c3d3de}
html .hero .eyebrow{color:#9fd0f2}
html .hero .primary-button{background-color:#fff !important;color:#0b1a24 !important;border-color:#fff !important}
html .hero .secondary-button{background:transparent !important;color:#fff !important;border:1px solid rgba(255,255,255,.5) !important}
@media(hover:hover) and (pointer:fine){html .hero .primary-button:hover{background-color:#e3eef6 !important}html .hero .secondary-button:hover{border-color:#fff !important}}
html .hero-dots button{background:rgba(255,255,255,.35)}
html .hero-dots button.on{background:#9fd0f2}
html .finder{box-shadow:none !important}   /* 10/15 오재민 님: 그림자가 강해 글자를 가림 — 직각·그림자 없음 원칙대로 테두리만 */

/* ── 모바일 최적화 (10/8 예람님) ─────────────────────────────────────────────
   점검(tools/모바일점검.js, 375px): 가로 넘침은 없었다. 대신 ① 위아래 고정 띠가 화면의 1/4 을 가림 ② 손가락보다 작은 단추·체크(13~38px)
   ③ 규격 검색 칸이 한 줄에 하나씩이라 600px ④ 아이폰에서 누르면 화면이 확대되는 입력 칸(16px 미만) ⑤ 상세 지관 사진 10px 넘침, A4 칸 표 글씨 12px */
/* ① 머리줄: 내릴 때 숨김(admin-bind.js) */
.site-header{transition:transform .25s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.site-header.is-hidden{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}
/* ① 아래: 떠 있는 톡톡 버튼을 전화 띠 안으로 */
.dock-talk{display:none}
@media(max-width:560px){
  .talk-float{display:none !important}
  .admin-dock{gap:8px}
  .admin-dock span{font-size:12.5px}
  .admin-dock .dock-talk{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;min-height:40px;padding:0 12px !important;background:#03c75a !important;color:#fff;font-size:14px;font-weight:800}
  .dock-talk svg{width:18px;height:18px;fill:#fff}
  .admin-dock>a{min-height:40px;display:inline-flex;align-items:center}
}
@media(max-width:700px){
  /* ② 손가락 크기 — 체크·라디오 20px, 단추 42px, 수량 ± 40px */
  input[type=checkbox],input[type=radio]{width:20px !important;height:20px !important;accent-color:var(--navy)}
  label.check,.radio-row label{min-height:40px}
  .btn{min-height:42px}
  .btn.mf-mini,.opt-btn,.wc-del{min-height:38px}
  .live-tabs button{min-height:40px}
  .catalog-tabs button{min-height:42px}
  .qty-box button{min-width:40px;min-height:40px}
  .qty-box input{min-height:40px}
  .header-search input,.header-search button{min-height:42px}
  .more,.login-links a,.mf-linkbtn{display:inline-flex;align-items:center;min-height:40px}
  /* ④ 아이폰 확대 방지 — 입력 칸 글씨 16px 이상 */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px !important}
  .wc-buy select{min-height:42px}
}
@media(max-width:560px){
  /* ③ 규격 검색: 제품군 한 줄, 가로|세로, 원단|지관, 검색 단추 한 줄 */
  .finder-grid{grid-template-columns:1fr 1fr !important}
  .finder-grid>label:first-child,.finder-grid>.search-button{grid-column:1/-1}
  .finder-heading h2{font-size:20px !important}
  /* ⑤ 상세 */
  .ex-cores{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .ex-core img{width:100%;object-fit:cover}
  .ex-a4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex-a4-card b,.ex-a4-arr{font-size:14px !important}
  .ex-a4-k{font-size:13px !important}
  .pd-wrap small,.ex-size-count,.pd-panel dt{font-size:13.5px}
}
@media(max-width:700px){
  .product-card .add-cart:not(.ask){width:42px !important;height:42px !important;min-width:42px}
  .reset-button,.filter-toggle,#catalogSort{min-height:42px}
}
@media(max-width:700px){   /* 화면 코드에 박힌 작은 높이(min-height:34px 인라인)보다 우선 */
  .btn{min-height:42px !important}
  .btn.mf-mini,.btn.opt-btn{min-height:38px !important}
  .mf-board-search input,.mf-board-search .btn{min-height:42px !important}
  .wc-buy button,.wc-buy input{min-height:40px !important;min-width:40px}
}
@media(max-width:700px){#orders .mf-items td .btn{min-height:42px !important}.rb-more{display:inline-flex;align-items:center;min-height:40px}}

/* ── 하나 고르기: 동그라미(라디오) 대신 누르는 칸(칩) — PC 도 (10/8 예람님: 조건 패널 동그라미가 세련되지 않다) ──
   라디오가 든 칸에만 mobile.js(칩맞춤)가 label.chip · label.on 을 단다. 진짜 라디오는 칸 전체를 덮는 투명 판(키보드·화면 낭독 그대로).
   폰 크기(46px·15px)는 mobile.css 가 덮는다. 직각 · 그림자 없음 */
html .filter-panel .filter-choices{display:flex;flex-wrap:wrap;gap:6px}
html .radio-row{gap:6px}
html label.chip{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 12px;
  border:1px solid #cfdae0;background:#fff;color:var(--ink);font-size:14px !important;font-weight:700;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
html label.chip input{position:absolute;inset:0;width:100% !important;height:100% !important;min-height:0 !important;margin:0 !important;opacity:0;cursor:pointer}
@media(hover:hover) and (pointer:fine){html label.chip:hover{border-color:var(--navy)}}
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}
html .pays label.chip{display:flex;min-height:52px}

/* ── 로그인·로그아웃 (10/12) — 메뉴(☰) 맨 위 계정 줄 · 마이페이지 로그아웃 (mobile.js 가 그린다) ── */
.m-account{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0 14px;border-bottom:2px solid var(--navy)}
.m-account p{flex:1 1 100%;margin:0 0 2px;font-size:14px;color:#5d7284}
.m-account p b{font-size:17px;color:var(--ink)}
.mobile-nav .m-account a{display:inline-flex;align-items:center;justify-content:center;flex:1 1 0;min-height:44px;padding:0 12px;border:1px solid var(--flat-line);background:#fff;color:var(--ink);font-size:15px;font-weight:800}
.mobile-nav .m-account a:last-child{background:var(--navy);border-color:var(--navy);color:#fff}
.mobile-nav .m-account a[data-logout]{background:#fff;border-color:var(--flat-line);color:var(--ink)}
.my-logout{display:inline-flex;align-items:center;min-height:36px;margin-top:10px;padding:0 12px;border:1px solid #b9cbd8;background:#fff;color:var(--ink);font-size:14px;font-weight:800}
@media(hover:hover) and (pointer:fine){.my-logout:hover{border-color:var(--navy)}}

/* 견적 종류(무지·인쇄) 단추의 동그라미 표시 빼기 (10/12 예람님: 동그라미 선택이 세련되지 않다) — 고른 칸은 남색으로 채워지는 그대로 */
html .q-kind button,html .q-kind button.on{padding-left:18px}
html .q-kind button::before{display:none}

/* 밝은 화면 전용 (10/12 예람님: 고르는 칸 글씨와 바탕이 같아 안 보였다) — 폰 다크 모드면 브라우저가 입력·고르는 칸 글씨를 흰색으로 바꾸는데
   칸 바탕은 흰색으로 정해 두어 묻혔다. 색 체계를 밝은 쪽으로 못 박고, 입력 칸 글씨색도 직접 정한다 */
:root{color-scheme:only light}
input,select,textarea{color:var(--ink);-webkit-text-fill-color:currentColor}
option,optgroup{color:var(--ink);background-color:#fff}
input::placeholder,textarea::placeholder{color:#8a9ba6;-webkit-text-fill-color:#8a9ba6}

/* 3D 단추 줄 — 그 제품에 없는 단추는 흐리게, 눌러도 아무 일 없음. 자리는 그대로 (10/12 예람님: 절대 위치 사수) */
html .roll-tools button:disabled{opacity:.35;cursor:not-allowed;background:#fff !important;color:#8a9ba6 !important;border-color:var(--flat-line) !important}
html .roll-tools button:disabled.on{box-shadow:none !important}
/* 규격 검색 — 그 제품군에 없는 칸 (10/12): 리본 길이는 300m 고정(읽기 전용), A4·리본의 지관·A4 원단은 '해당 없음'으로 잠금 */
html .finder .field input.is-fixed{background:var(--flat-bg);cursor:default}
html .finder .field input.is-fixed::placeholder{color:var(--ink);-webkit-text-fill-color:var(--ink);opacity:1}
html .finder select:disabled{background:var(--flat-bg);color:#6b7f8c;-webkit-text-fill-color:#6b7f8c;cursor:default;opacity:1}
/* 3D 단추 줄을 요약 줄 위로 올렸다(10/12) — 구분선도 단추 줄 위로 */
html .roll-stage .roll-tools{margin-top:12px;padding-top:12px;border-top:1px solid #e4ebf0}

/* 언어 선택 KOR / ENG (10/12, i18n.js 가 머리줄 오른쪽 맨 앞에 단다) */
.lang-switch{display:inline-flex;flex:0 0 auto;margin-right:6px;border:1px solid var(--flat-line)}
.lang-switch button{min-width:44px;height:34px;padding:0 8px;border:0;background:#fff;color:#5d7284;font-size:12.5px;font-weight:800;letter-spacing:.04em}
.lang-switch button+button{border-left:1px solid var(--flat-line)}
.lang-switch button[aria-pressed="true"]{background:var(--navy);color:#fff}
@media(hover:hover) and (pointer:fine){.lang-switch button[aria-pressed="false"]:hover{color:var(--navy);background:#f3f7f9}}
.lang-switch button:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
/* 영문 화면: CSS 에 박힌 한국어 글 */
html[lang="en"] .ex-fold>summary::after{content:"Expand"}
html[lang="en"] .ex-fold[open]>summary::after{content:"Collapse"}
/* 고르기 칸(select) 화살표 — 기본 화살표는 칸 오른쪽 끝에 붙어 있었다(10/15 예람님: 양쪽 여백을 맞춰 줘).
   모든 select 를 같은 모양으로: 왼쪽 글 여백 14px = 오른쪽 화살표 여백 14px, 화살표는 남색 꺾쇠 */
select:not([multiple]):not([size]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-left:14px!important;padding-right:40px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23102b43' stroke-width='1.8'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:12px 8px!important}
select:not([multiple]):not([size]):disabled{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239aa9b3' stroke-width='1.8'/%3E%3C/svg%3E")!important}
select::-ms-expand{display:none}

/* 히어로 작은 제목(눈썹)을 비우면 자리도 없앤다 (10/15) */
.hero .eyebrow:empty{display:none}

/* 10/15 오재민 님 의견 — 카드 글자 위계: 원단·품명·가격만 굵게, 나머지는 보통 굵기 / 지관과 매수 사이를 띄움 / 칸 아래 도움말은 칸 안 글자 쪽으로 살짝 들임(시각 보정) */
#productGrid .product-rows dd{font-weight:500}
#productGrid .product-line-m{font-weight:500}
#productGrid .product-rows dd span i{margin-right:6px}
.sc-field>select+.hint,.sc-field>input+.hint{padding-left:3px}
/* 머리줄 (10/15 오재민 님 스케치): 로고를 키워 왼쪽 두 줄에 걸치고, 맨 위 오른쪽에 작고 연한 로그인 줄,
   아랫줄에 크게 한 주 메뉴(왼쪽) + 짧게 줄인 검색칸(오른쪽 — 예시 검색어가 '40x20 감열지' 정도라 길 필요 없음) */
@media(min-width:900px){
  :root{--head-h:107px}
  .header-inner{grid-template-columns:auto minmax(0,1fr) auto !important;grid-template-rows:42px 64px;gap:0 48px !important;align-items:center}
  .brand{grid-row:1/3 !important;grid-column:1;height:auto !important;align-self:center}
  .brand img{height:60px !important}
  .header-actions{grid-row:1 !important;grid-column:2/4 !important;justify-self:stretch;justify-content:flex-end;align-self:stretch;align-items:center;gap:2px !important;border-bottom:1px solid #eef2f4}
  .header-actions .text-button,.header-actions .cart-button{font-size:13px !important;font-weight:500 !important;color:#5d7284 !important;padding:6px 10px !important}
  .header-actions .cart-button{border:0 !important}
  .header-actions .cart-button b{font-weight:700}
  .lang-switch{margin-right:8px}
  .lang-switch button{font-size:11.5px !important;font-weight:600 !important;padding:3px 8px !important}
  .desktop-nav{grid-row:2 !important;grid-column:2 !important;justify-content:flex-start !important;height:64px !important;gap:48px !important;font-size:17px !important;font-weight:800;border-top:0 !important}
  .desktop-nav a{padding:20px 0 !important}
  .header-search{grid-row:2 !important;grid-column:3 !important;justify-self:end;width:300px !important;height:40px !important}
}
/* 톡톡 버튼 (10/15 오재민 님): 네이버 N 표 + '톡톡 상담' 한 줄. 색은 네이버 초록(#03c75a) 그대로 — 형광처럼 보이던 초록 그림자 번짐을 뺀다 */
/* 10/15 오재민 님 2차: N 을 흰 칸 없이 흰 글자로(둥근 버튼에 각진 칸이 어색), 버튼 안 여백·N 과 글 사이를 줄임 */
.talk-float{box-shadow:none !important;gap:7px !important;height:56px !important;padding:0 22px 0 20px !important}
.talk-float .talk-n{flex:none;color:#fff;font:900 22px/1 Arial,Helvetica,sans-serif;letter-spacing:-.02em}
.talk-float span{display:block;line-height:1.2;font-weight:500 !important}   /* 굵으면 '톡톡'이 한 덩어리로 보임 (10/15) */
@media(max-width:560px){.talk-float{height:48px !important;padding:0 18px 0 16px !important;gap:6px !important}.talk-float .talk-n{font-size:19px}}
@media(min-width:900px){
  /* KOR/ENG 도 로그인 줄처럼 연하게 — 칸 테두리·남색 칠 대신 글자만, 고른 쪽만 진하게 (10/15) */
  .lang-switch{border:0 !important}
  .lang-switch button{min-width:0 !important;height:28px !important;background:transparent !important;color:#8a9aa6 !important}
  .lang-switch button+button{border-left:1px solid #d5dee3 !important}
  .lang-switch button[aria-pressed="true"]{color:var(--navy) !important;font-weight:800 !important}
}
/* 히어로 넘김 점이 사진에 묻힘 (10/15 예람님) → 어두운 반투명 받침 위에 흰 점 */
html .hero-dots{padding:8px 12px;gap:10px;background:rgba(10,24,36,.55)}
html .hero-dots button{background:rgba(255,255,255,.5) !important}
html .hero-dots button.on{background:#fff !important}
/* 정렬 (10/15 오재민 님): '정렬'과 칸 사이를 띄우고, 고른 글자는 보통 굵기 */
.catalog-sort{gap:12px !important}
.catalog-sort select,#catalogSort{font-weight:500 !important}
/* 카드 표 (10/15 오재민 님): 오른쪽 값이 진해서 더 커 보임 → 한 단계 작게, 왼쪽 이름과 같은 크기 / 품절 지관 줄은 흐리게 */
#productGrid .product-rows dd{font-size:13.5px !important}
#productGrid .product-rows dt{font-size:13.5px !important}
#productGrid .product-rows dd span.q-sold{color:#9aa9b3}
#productGrid .product-rows dd span.q-sold small{margin-left:4px;font-size:12px;font-weight:700;color:#a23b3b}
@media(max-width:560px){#productGrid .product-rows dd,#productGrid .product-rows dt{font-size:12px !important}}
/* 10/15 예람님: 카테고리는 로고와 검색칸 사이 가운데로 */
@media(min-width:900px){.desktop-nav{justify-content:center !important}}
/* 10/15 예람님: 맨 위 띠 없앰(admin-data.js 탭배너 사용 false). 스크립트가 지우기 전 잠깐 보였다 사라지며 화면이 튀지 않게 — 다시 켤 땐 이 줄도 지울 것 */
#tabBanner{display:none !important}
/* 10/15 예람님: 하단은 최대한 촘촘하게 (읽는 사람이 적다) */
.support{padding:26px 28px !important}
.support h2{font-size:22px !important;margin-top:2px !important}
.support-actions{gap:8px !important}
.support-actions a.support-main{min-height:44px !important;padding:0 22px !important}
footer{padding:22px max(28px,calc((100% - 1224px)/2)) 18px !important;gap:6px 24px !important}
.footer-brand img{height:30px !important}
.footer-main p{margin:6px 0 0 !important;font-size:12.5px !important}
.footer-corp{margin:8px 0 0 !important;gap:2px 14px !important;font-size:12.5px !important}
.footer-escrow{margin-top:8px !important;padding:8px 10px !important}
.footer-escrow img{width:56px !important}
.footer-escrow p{font-size:12px !important;line-height:1.5 !important}
.footer-copy{margin:6px 0 0 !important;font-size:12px !important}
.footer-links{font-size:12.5px !important}
html .hero-dots{border-radius:999px !important}   /* 10/15 예람님: 넘김 점 받침은 둥글게 */
/* 규격 찾기 칸 이름(제품군·가로·세로·원단·지관)을 칸 안 글자 쪽으로 살짝 들임 — 칸 테두리에 붙어 '절벽에 걸친' 느낌 (10/15 오재민 님) */
.finder-grid label>span:first-child,.finder-grid label>span:not(.field){padding-left:4px}
/* KOR/ENG 는 오른쪽 끝(장바구니 뒤)으로, 글자 크기는 옆 줄과 같게 (10/15 오재민 님) */
@media(min-width:900px){
  .header-actions .lang-switch{order:99;margin:0 0 0 10px !important}
  .lang-switch button{font-size:13px !important;letter-spacing:0 !important;padding:3px 9px !important}
  .lang-switch button[aria-pressed="false"]{font-weight:500 !important}
}
/* 머리줄 위·아래 줄 사이 선 없애고 여백 줄임 (10/15 오재민 님) */
@media(min-width:900px){
  :root{--head-h:97px}   /* 실측 */
  .header-inner{grid-template-rows:34px 56px !important;padding-top:6px !important}
  .header-actions{border-bottom:0 !important}
  .desktop-nav{height:56px !important}
  .desktop-nav a{padding:16px 0 !important}
}
/* KOR·ENG 글자 바닥선 맞춤 (10/15 오재민 님: 굵은 KOR 가 위로 떠 보임 — 굵기마다 글꼴 높이가 달라 단추 안 가운데 맞춤이 어긋남) → 글자 바닥선 기준으로 */
@media(min-width:900px){
  .lang-switch{align-items:baseline !important}
  .lang-switch button{height:auto !important;line-height:1.3 !important;padding:4px 9px !important;vertical-align:baseline}
}
/* '제품 비교' 단추 (10/15 오재민 님): 덜 진하게·작게, 제목 '전체 상품'과 같은 줄 가운데에 */
.product-heading{align-items:center !important}
.cmp-start{min-height:38px !important;padding:0 14px !important;border:1px solid #c3d0d7 !important;color:#3d5568 !important;font-size:14px !important;font-weight:600 !important}
.cmp-start[aria-pressed="true"]{border-color:var(--navy) !important;color:#fff !important}
@media(hover:hover) and (pointer:fine){.cmp-start:hover{border-color:var(--navy) !important;color:#fff !important}}
/* '제품 비교'(위) > '프린터 방식 확인하기'(아래) 위계, 글자 크기 14px 로 같게, 둘 다 연하게 (10/15 오재민 님) */
.cmp-start{font-size:14px !important;color:#4d6474 !important;border-color:#d0dae0 !important}
.catalog-guide a{font-size:14px !important;font-weight:500 !important;color:#7d8e9b !important;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c3d0d7}
/* 프린터 방식 띠 정리 (10/15 오재민 님): [굵은 프린터 이름] [작은 꼬리표 리본 사용/미사용] [원단], 두 칸 사이 세로 선, 괄호 뺌 */
.catalog-guide{padding:12px 18px !important;gap:8px 0 !important;font-size:14px !important}
.catalog-guide>span{display:inline-flex;align-items:center;gap:8px;font-size:14px !important}
.catalog-guide>span+span{margin-left:22px;padding-left:22px;border-left:1px solid #d5dee3}
.catalog-guide b{margin:0 !important;font-size:14px !important;font-weight:700;color:var(--ink)}
.catalog-guide i{font-style:normal;font-size:12px;font-weight:600;color:#5d7284;border:1px solid #c3d0d7;padding:1px 6px;line-height:1.4}
.catalog-guide em{font-style:normal;font-weight:500;color:#46617a}
@media(max-width:560px){.catalog-guide>span+span{margin-left:0;padding-left:0;border-left:0}.catalog-guide>span{flex-wrap:wrap}}
/* 에스크로 안내: 흰 상자는 필수가 아니다(안내 글·표시만 있으면 됨) → 상자 없이 바닥 색 그대로 (10/15 예람님) */
.footer-escrow{background:none !important;border:0 !important;padding:0 !important;border-radius:0 !important}
.talk-float .talk-ic{flex:none;width:22px;height:22px;fill:#fff}
@media(max-width:560px){.talk-float .talk-ic{width:20px;height:20px}}
/* 바닥글 더 촘촘하게 + 에스크로 표시 그림의 흰 바탕 빼기(곱하기 섞기로 바닥 색이 비치게) (10/15 예람님) */
footer{padding:18px max(28px,calc((100% - 1224px)/2)) 14px !important;gap:4px 24px !important}
.footer-main p{margin:4px 0 0 !important}
.footer-corp{margin:6px 0 0 !important;line-height:1.55}
.footer-escrow{margin-top:6px !important;gap:10px !important}
.footer-escrow img{mix-blend-mode:multiply;clip-path:inset(2px)}   /* 그림 가장자리 1px 회색 테두리도 잘라냄 */
.footer-copy{margin:4px 0 0 !important}
/* 규격 찾기 큰 상자 모서리를 살짝 둥글게 (10/15 예람님: 너무 뾰족함) */
.finder{border-radius:8px !important;overflow:hidden}
/* 10/15 톡톡 공식 배너(파트너센터 177759, 150×50) — 모양은 네이버 것 그대로, 자리만. 폰은 탭 바 '상담' */
.talk-banner-fix{position:fixed;right:24px;bottom:28px;z-index:35;line-height:0}
@media(max-width:700px){.talk-banner-fix{display:none}}
/* 10/15 예람님: 공식 배너가 네모 상자라 밋밋 → 바깥 상자만 알약 모양으로 띄움(말풍선 표시·초록·글자 내용은 네이버 것 그대로).
   '그림자 넣고 떠 있는 느낌으로' → 초록빛 그림자 + 마우스 올리면 2px 떠오름. 네이버 CSS 가 늦게 붙고 크기가 style 에 박혀 와서(150×50)
   우리 쪽 선택자를 한 단계 더 세게 + !important(전역 직각·그림자 없음 규칙 *{…!important} 도 이겨야 함) */
.talk-banner-fix .talk_preview_area .talk_banner_preview,.talk-float{display:inline-flex !important;align-items:center;justify-content:center;gap:8px !important;width:auto !important;height:58px !important;padding:0 26px 0 22px !important;border-radius:999px !important;
  box-shadow:0 14px 32px rgba(0,150,55,.45),0 5px 12px rgba(16,43,67,.24) !important;transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s cubic-bezier(.23,1,.32,1)}
.talk-banner-fix .talk_preview_area .talk_banner_preview{font-family:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',sans-serif !important;font-size:16.5px;letter-spacing:-.01em}
.talk-banner-fix .talk_preview_area .talk_banner_preview:after{display:none}
.talk-banner-fix .talk_preview_area .ico_talk_banner{margin:0;transform:scale(1.25)}
.talk-banner-fix .talk_preview_area .talk_banner_desc{margin:0;line-height:1;font-weight:600}
@media(hover:hover) and (pointer:fine){
  .talk-banner-fix .talk_banner_link:hover .talk_banner_preview,.talk-float:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(0,150,55,.5),0 7px 16px rgba(16,43,67,.26) !important}
}
.talk-banner-fix .talk_banner_link:active .talk_banner_preview{transform:translateY(0) scale(.98)}
@media(prefers-reduced-motion:reduce){.talk-banner-fix .talk_preview_area .talk_banner_preview,.talk-float{transition:none}}
.talk-banner-fix .talk_banner_link:focus-visible{outline:3px solid #0e3558;outline-offset:3px;border-radius:999px}