/* MOBILE-20261027: 모바일 사용성 규칙. 홈·활용예시·인서트목록·FAQ·소재·안내·문의 페이지에서만 불러온다(quote/editor 제외). */
.m-cta{display:none}
.pv-short{display:none}
/* M3 설명 2줄 말줄임: 카드 안 세로 flex 에서 overflow:hidden 인 p 가 줄어들어(flex-shrink) 글자 아래가 잘렸다 → flex 0 0 auto 로 수축 금지, 표준 line-clamp 는 끄고 -webkit- 방식만 사용(고정 높이 없음) */
#most-wanted .hk-card p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:none;overflow:hidden;line-height:1.5;height:auto;max-height:none;flex:0 0 auto}
#most-wanted .hk-card h3,#most-wanted .hk-card .hk-price{flex:0 0 auto}
/* ---- 태블릿(641~1180px): 우하단 상담 버튼이 본문을 가리지 않게 오른쪽 여백 확보 ---- */
@media(min-width:641px) and (max-width:1216px){
  main .wrap,footer.site .wrap{padding-right:76px}
}
/* ---- 폰(≤640px) ---- */
@media(max-width:640px){
html{-webkit-text-size-adjust:100%}
body{font-size:16px;line-height:1.65;padding-bottom:0}
footer.site .wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.wrap{padding-left:16px;padding-right:16px}
/* 상단 띠: 짧게 한 줄 */
.pv-banner{font-size:13px;line-height:1.4;padding:6px 12px}
.pv-banner .pv-full{display:none}
.pv-banner .pv-short{display:inline!important}
/* 헤더 */
header.site .in{height:64px}
.logo{min-height:44px}
.burger{width:44px;height:44px}
.burger[aria-expanded=true]{font-size:0}
.burger[aria-expanded=true]::before{content:'\2715';font-size:1.25rem;line-height:1}
nav.main{top:100%}
nav.main.open{max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px);overflow-y:auto;overscroll-behavior:contain;padding:8px 16px 20px;gap:6px}
nav.main a{min-height:52px;display:flex;align-items:center;padding:0 14px;font-size:17px}
nav.main a.cta{justify-content:center;margin-top:10px}
html.nav-open,html.nav-open body{overflow:hidden}
/* 첫 화면: 제목 + 핵심 문장 + 견적 버튼이 먼저, 그림은 버튼 아래 */
.hero{padding:14px 0 28px}
.hero .eyebrow{order:1;margin:0 0 6px;font-size:14px}
.hero h1{order:2;font-size:clamp(1.7rem,8.2vw,2.2rem);line-height:1.22;margin:0 0 14px;word-break:keep-all;text-wrap:balance}
.hero .scope-line{order:3;margin:0 0 12px;padding:10px 12px;font-size:16px;line-height:1.5}
.hero .scope-line b{font-size:17px}
.hero p.lead{order:4;margin:0;font-size:16px;line-height:1.6}
.hero .actions{order:5;margin-top:14px;gap:6px}
.hero .actions .btn{min-height:54px;font-size:1.05rem;justify-content:center}
.hero .actions .textlink{min-height:48px;display:flex;align-items:center;justify-content:center}
.hero-art.hx-wrap{order:6;margin:22px 0 0}
.hero .tags{order:7;margin-top:18px;gap:8px;font-size:13px}
.hero .tags span{font-size:13px;padding:5px 12px}
.hero .tags span.hl.since{font-size:13px}
.hx-steps li b{font-size:13px}
.hx-steps li i{font-size:13px}
.hx-tag,.hx-tag.done{font-size:13px}
/* 숫자 구역 */
.stat p{font-size:14px;line-height:1.5}
/* 구역 공통 */
.sec{padding:44px 0}
.sec-head{margin-bottom:24px}
.sec-head h2{font-size:clamp(1.45rem,6.6vw,1.8rem);line-height:1.3;word-break:keep-all;text-wrap:balance}
.sec-head .lead,.lead{font-size:16px;line-height:1.65;max-width:none}
.eyebrow{font-size:13px}
.btn{min-height:48px}
.textlink{min-height:44px;display:inline-flex;align-items:center}
/* 활용 예시 카드: 1열 가로형(그림 왼쪽·글 오른쪽), 가격 줄은 아래 고정 */
#most-wanted .hk-grid,#most-wanted .hk-grid.g4{grid-template-columns:1fr;gap:12px}
#most-wanted .hk-card{flex-direction:row;align-items:stretch;min-height:132px;height:auto}
#most-wanted .hk-card .bag-anim{flex:0 0 112px;width:112px;min-height:132px;aspect-ratio:auto;height:auto;align-self:stretch}
#most-wanted .hk-card .bag-anim .ba-lb{display:none}
#most-wanted .hk-card>div{padding:12px 12px 12px 14px;min-width:0}
#most-wanted .hk-card h3{font-size:16px;line-height:1.35;margin:0 0 4px}
#most-wanted .hk-card p{font-size:14px;line-height:1.5;margin:0 0 8px}
#most-wanted .hk-price{font-size:16px;min-height:32px}
#most-wanted .hk-price span{font-size:13px}
#most-wanted .hk-sub{font-size:1.15rem;line-height:1.4}
#most-wanted .hk-actions,.sec-actions,.cta-actions{flex-direction:column;align-items:stretch;gap:8px}
#most-wanted .hk-actions .btn,.sec-actions .btn,.cta-actions .btn{width:100%;justify-content:center;min-height:52px}
#most-wanted .hk-actions .textlink,.sec-actions .textlink,.cta-actions .textlink{justify-content:center;min-height:48px}
.hk-note{font-size:13px;line-height:1.6}
/* 신뢰 */
#trust .trust p{font-size:16px;line-height:1.6}
#trust .trust p a{display:flex;align-items:center;min-height:44px;white-space:normal}
/* 5단계 */
#how .step{padding-left:56px}
#how .step p{font-size:16px;line-height:1.65;max-width:none}
#how .st-media{max-width:none}
/* 에디터 소개 */
.ed-list li{font-size:15px}
.ed-cap,figcaption{font-size:13px}
/* 소재 표: 카드형 */
#materials .tbl-wrap{overflow:visible;border:0;background:none;box-shadow:none}
#materials table.cmp,#materials table.cmp tbody{display:block;width:100%}
#materials table.cmp thead{display:none}
#materials table.cmp tr{display:block;border:1px solid #e3dac6;border-radius:12px;background:#fff;padding:14px 16px;margin:0 0 12px}
#materials table.cmp td{display:block;padding:6px 0;border:0;font-size:16px}
#materials table.cmp td:last-child{padding-right:0}
#materials table.cmp td:nth-child(n+2)::before{display:block;font-size:13px;font-weight:700;color:#8a6a2f;margin-bottom:1px}
#materials table.cmp td:nth-child(2)::before{content:'느낌'}
#materials table.cmp td:nth-child(3)::before{content:'이런 곳에'}
#materials table.cmp td:nth-child(4)::before{content:'두께'}
#materials p.small{font-size:14px}
#materials p a{display:inline-flex;align-items:center;min-height:44px}
/* 가격 예시 */
#prices .small{font-size:14px}
/* FAQ */
#faq details.faq summary{min-height:56px;padding:14px 16px;font-size:16px;line-height:1.45;align-items:center}
#faq details.faq .ans{font-size:16px;line-height:1.65;padding:0 16px 16px}
#faq p a,#faq .ans a{display:inline-flex;align-items:center;min-height:44px}
#faq .ans p a{display:inline;min-height:0;padding:14px 3px;margin:-14px -3px}
details.faq summary{min-height:56px}
/* 푸터 */
footer.site{font-size:15px}
footer.site .links a{min-height:48px}
footer.site .links a.owner-link{min-width:48px;justify-content:center;font-size:13px;opacity:.7}
footer.site dl dt{font-size:13px}
footer.site dl dd{font-size:15px}
footer.site dd a{display:inline-flex;align-items:center;min-height:44px}
footer.site .small,footer.site p.small{font-size:13px;line-height:1.6}
/* 보정 */
#materials table.cmp{min-width:0!important;width:100%}
.hero .tags span.scope-badge{font-size:13px}
.ai-tag,.ed-bar span,.ph{font-size:13px}
footer.site .links{gap:0 6px}
footer.site .links a{min-width:48px;justify-content:center;padding:0 6px}
footer.site p a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
/* 다른 페이지 보정 */
html .u-img .u-tag,html .ins-card .ins-gray,html .ins-gray,html .u-tag,html .ck-eyebrow,html .ck-narrow .ck-eyebrow,html .bag-anim .ba-lb,html .ck-howto-label{font-size:13px}
.chips-link{gap:8px}
.chips-link a,.sec-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
main p a:not([class]),:not(.chips-link)>li>a:not([class]){padding:14px 3px;margin:-14px -3px}
.chk input[type=checkbox]{width:24px;height:24px}
label.chk a,.chk a{padding:14px 3px;margin:-14px -3px}
/* 하단 고정 견적 바 + 상담 버튼(바 안에 통합) */
.m-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:8900;gap:8px;padding:8px 68px calc(8px + env(safe-area-inset-bottom)) 12px;background:rgba(15,26,43,.97);border-top:1px solid rgba(184,149,90,.6);box-shadow:0 -6px 18px rgba(0,0,0,.18);transform:translateY(120%);transition:transform .25s ease;pointer-events:none}
.m-cta.on{transform:none;pointer-events:auto}
.m-cta .btn{flex:1;min-height:48px;justify-content:center;font-size:1.02rem}
html .tfhd-btn{width:48px;height:48px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));opacity:0;pointer-events:none;transition:opacity .2s}
html.mcta-on .tfhd-btn{opacity:1;pointer-events:auto}
html.nav-open .m-cta{transform:translateY(120%)}
html.nav-open .tfhd-btn{opacity:0;pointer-events:none}
html.kbd .m-cta{display:none}
}
@media(prefers-reduced-motion:reduce){.m-cta{transition:none}}